@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Share+Tech+Mono&display=swap');
/* Royal (Bold Typography) faces — Inter Tight for headlines/UI, Playfair
   Display italic for pull-quotes. Arctic (Minimalist Monochrome Editorial)
   adds Playfair Display upright 700/900 (display headings) + Source Serif 4
   (body) — JetBrains Mono (labels) is already loaded above. Browsers only
   download faces actually rendered, so non-Royal/Arctic themes pay no cost. */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,700;0,900;1,400;1,500;1,600&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,400&display=swap');

/* Additional custom styles for Tournament Admin Dashboard */

/* Cyberpunk theme tokens + utility classes (shared, gated to [data-theme="neon"]) */
@import url('./cyberpunk.css?vh=2');
@import url('./vectorheart.css?vh=1');  /* T157 (Vectorheart PR-D-1): pairs with the cyberpunk import above */
@import url('./midnight.css?vh=1');     /* T-MN-1 (Midnight Linear/Modern theme core) */

/* ============================================
   THEME SYSTEM - CSS Custom Properties
   10 Themes: Cyberpunk (default, neon), Midnight, Arctic, Royal, Forest,
              Ocean, Cream, Rose, Sky, Mint
   T044 (2026-05-22): cyberpunk replaces "Neon Arcade" under the same theme
   id ('neon'). :root defaults mirror cyberpunk for first-paint before the
   IIFE runs. Non-neon themes get explicit overrides restoring the legacy
   minimalist aesthetic (border-radius + font-family + drop cyberpunk pseudo).
   ============================================ */

:root {
	/* Font System — defaults mirror cyberpunk for first-paint;
	   non-neon themes override these in their explicit blocks below. */
	--font-primary: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
	--font-display: 'Orbitron', 'Share Tech Mono', monospace;
	--font-mono: 'JetBrains Mono', 'Courier New', monospace;

	/* Default theme: Cyberpunk (first-paint fallback before IIFE runs).
	   Mirrors --cp-* tokens defined in cyberpunk.css [data-theme="neon"]
	   so a cold-load with no stored theme paints cyberpunk, not midnight. */
	--bg-primary: #0a0a0f;
	--bg-secondary: #12121a;
	--bg-tertiary: #1c1c2e;
	--bg-hover: #2a2a3a;
	--bg-selected: #1c1c2e;
	--bg-card: #12121a;

	--text-primary: #e0e0e0;
	--text-secondary: #8a8f99;
	--text-muted: #8a8f99;
	--text-inverse: #0a0a0f;

	--border-color: #2a2a3a;
	--border-light: #2a2a3a;
	--border-dark: #00ff88;

	--shadow-color: rgba(0, 255, 136, 0.2);
	--shadow-md: 0 0 5px #00ff88, 0 0 10px rgba(0, 255, 136, 0.25);
	--overlay-bg: rgba(10, 10, 15, 0.9);

	/* Default accent colors — cyberpunk neon palette */
	--accent-blue: #00d4ff;
	--accent-blue-hover: #00b8e0;
	--accent-blue-light: rgba(0, 212, 255, 0.2);
	--accent-green: #00ff88;
	--accent-green-light: rgba(0, 255, 136, 0.2);
	--accent-red: #ff3366;
	--accent-red-light: rgba(255, 51, 102, 0.2);
	--accent-yellow: #ff00ff;
	--accent-yellow-light: rgba(255, 0, 255, 0.2);
	--accent-gray: #8a8f99;
	--accent-gray-light: rgba(138, 143, 153, 0.2);

	/* Button colors */
	--btn-primary-bg: #00ff88;
	--btn-primary-hover: #00d96f;
	--btn-secondary-bg: #1c1c2e;
	--btn-secondary-hover: #2a2a3a;

	/* Theme type indicator (for conditional styling) */
	--theme-type: dark;

	/* Corner radius scale (Royal/Bold-Typography prep). Defaults preserve the
	   exact literals every other theme used before tokenization, so non-Royal
	   themes don't move. [data-theme="royal"] zeroes the whole scale for sharp
	   edges. px↔rem are exact (8px=.5rem, 4px=.25rem, 12px=.75rem, 16px=1rem). */
	--radius-2xs: 2px;
	--radius-xs: 3px;
	--radius-sm: 0.25rem;
	--radius-md: 0.375rem;
	--radius-lg: 0.5rem;
	--radius-xl: 0.75rem;
	--radius-2xl: 1rem;
	--radius-pill: 9999px;
	--radius-circle: 50%;
}

/* Cyberpunk page-level treatment — scanline overlay on body::after when
   data-theme="neon" is active. Non-neon themes get an explicit reset below. */
[data-theme="neon"] body::after {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9000;
	background-image: repeating-linear-gradient(
		0deg,
		rgba(0, 255, 136, 0.03) 0px,
		rgba(0, 255, 136, 0.03) 1px,
		transparent 1px,
		transparent 3px
	);
	opacity: 0.3;
}

/* Cyberpunk body font + page background */
[data-theme="neon"] body {
	font-family: var(--font-primary);
	background: var(--bg-primary);
}

/* Midnight Theme — Linear/Modern near-black + indigo palette (T-MN-2, 2026-05-31) */
[data-theme="midnight"] {
	--bg-primary: #050506;
	--bg-secondary: #0a0a0c;
	--bg-tertiary: #101014;
	--bg-hover: rgba(255,255,255,.06);
	--text-primary: #EDEDEF;
	--text-secondary: #8A8F98;
	--text-muted: rgba(255,255,255,.45);
	--border-color: rgba(255,255,255,.06);
	--accent-blue: #5E6AD2;
	--theme-type: dark;
}

/* Arctic Theme - Clean, bright for well-lit venues */
/* Arctic — Minimalist Monochrome Editorial (reskin 2026-06-04). Pure black &
   white; the single sanctioned gray (#525252) is secondary text. Black IS the
   accent. The only non-monochrome hues are the two FUNCTIONAL status accents
   (--accent-green winner, --accent-red live/underway), each always paired with
   a glyph/label cue (WCAG color-not-only). Shadows off, radius zeroed (see the
   global sweep in the appended Arctic Editorial Layer at end of file). Fonts +
   component editorial rules also live in that appended block (source order). */
[data-theme="arctic"] {
	--bg-primary: #ffffff;
	--bg-secondary: #f5f5f5;
	--bg-tertiary: #ffffff;
	--bg-hover: #ededed;
	--bg-selected: #e5e5e5;
	--bg-card: #ffffff;
	--text-primary: #000000;
	--text-secondary: #000000;
	--text-muted: #525252;
	--text-inverse: #ffffff;
	--border-color: #000000;
	--border-light: #e5e5e5;
	--border-dark: #000000;
	--shadow-color: transparent;
	--shadow-md: none;
	--overlay-bg: rgba(0, 0, 0, 0.6);
	--accent-blue: #000000;        /* black IS the accent */
	--accent-blue-hover: #000000;
	--accent-blue-light: rgba(0, 0, 0, 0.08);
	--accent-green: #2e5e4e;       /* FUNCTIONAL: winner/advanced (pair w/ ✓) */
	--accent-green-light: rgba(46, 94, 78, 0.14);
	--accent-red: #c8102e;         /* FUNCTIONAL: live/underway/danger (pair w/ dot+label) */
	--accent-red-light: rgba(200, 16, 46, 0.14);
	--btn-primary-bg: #000000;
	--btn-primary-hover: #2b2b2b;
	--btn-secondary-bg: #ffffff;
	--btn-secondary-hover: #000000;
	--theme-type: light;
}

/* Neon Theme = Cyberpunk (T044, 2026-05-22)
   Tokens mirror --cp-* defined in cyberpunk.css. The shared file additionally
   provides .cyber-* utility classes (chamfer/scanlines/glitch/glow) which
   activate automatically under this theme. Page-level scanline pseudo + font
   override is wired above via [data-theme="neon"] body::after / body. */
[data-theme="neon"] {
	--bg-primary: #0a0a0f;
	--bg-secondary: #12121a;
	--bg-tertiary: #1c1c2e;
	--bg-hover: #2a2a3a;
	--bg-selected: #1c1c2e;
	--bg-card: #12121a;
	--text-primary: #e0e0e0;
	--text-secondary: #8a8f99;
	--text-muted: #8a8f99;
	--text-inverse: #0a0a0f;
	--border-color: #2a2a3a;
	--border-light: #2a2a3a;
	--border-dark: #00ff88;
	--shadow-color: rgba(0, 255, 136, 0.2);
	--shadow-md: 0 0 5px #00ff88, 0 0 10px rgba(0, 255, 136, 0.25);
	--overlay-bg: rgba(10, 10, 15, 0.9);
	--accent-blue: #00d4ff;
	--accent-blue-hover: #00b8e0;
	--accent-blue-light: rgba(0, 212, 255, 0.2);
	--accent-green: #00ff88;
	--accent-green-light: rgba(0, 255, 136, 0.2);
	--accent-red: #ff3366;
	--accent-red-light: rgba(255, 51, 102, 0.2);
	--accent-yellow: #ff00ff;
	--accent-yellow-light: rgba(255, 0, 255, 0.2);
	--btn-primary-bg: #00ff88;
	--btn-primary-hover: #00d96f;
	--btn-secondary-bg: #1c1c2e;
	--btn-secondary-hover: #2a2a3a;
	--theme-type: dark;
}

/* Royal Theme — Bold Typography (2026-05-31). Near-black canvas + a single
   warm vermillion accent (used sparingly: primary CTA, links, focus, active
   state). Supersedes the legacy gold/navy palette. Sets the FULL accent set
   so it no longer silently inherits cyberpunk's red/hover/light from :root.
   Semantic state colors are retained (a dashboard needs distinct signals) but
   retuned for the dark canvas and pushed away from vermillion's orange so a
   signal never reads as the brand accent. */
[data-theme="royal"] {
	--bg-primary: #0A0A0A;
	--bg-secondary: #0F0F0F;
	--bg-tertiary: #1A1A1A;
	--bg-hover: #1F1F1F;
	--bg-selected: #1F1F1F;
	--bg-card: #0F0F0F;

	--text-primary: #FAFAFA;
	--text-secondary: #A3A3A3;
	--text-muted: #8C8C8C;          /* ~5.6:1 on bg — clears WCAG AA for body text
	                                   (spec's #737373 is only ~4.2:1, fails AA-normal) */
	--text-inverse: #0A0A0A;        /* dark text on vermillion/accent fills */

	--border-color: #262626;
	--border-light: #1A1A1A;
	--border-dark: #404040;

	--shadow-color: transparent;    /* depth = borders + layered type, not shadow */
	--shadow-md: none;
	--overlay-bg: rgba(10, 10, 10, 0.72);

	/* Brand accent — vermillion. */
	--accent-blue: #FF3D00;
	--accent-blue-hover: #FF5722;
	--accent-blue-light: rgba(255, 61, 0, 0.16);
	/* Semantic state — distinct from each other AND from vermillion's orange. */
	--accent-green: #34D399;
	--accent-green-light: rgba(52, 211, 153, 0.16);
	--accent-red: #F43F5E;          /* danger — rose-red, not orange */
	--accent-red-light: rgba(244, 63, 94, 0.16);
	--accent-yellow: #FBBF24;
	--accent-yellow-light: rgba(251, 191, 36, 0.16);
	--accent-gray: #737373;
	--accent-gray-light: rgba(115, 115, 115, 0.16);

	--btn-primary-bg: #FF3D00;
	--btn-primary-hover: #FF5722;
	--btn-secondary-bg: transparent;
	--btn-secondary-hover: #1A1A1A;

	--theme-type: dark;

	/* Sharp edges — zero the whole radius scale. */
	--radius-2xs: 0;
	--radius-xs: 0;
	--radius-sm: 0;
	--radius-md: 0;
	--radius-lg: 0;
	--radius-xl: 0;
	--radius-2xl: 0;
	--radius-pill: 0;
	--radius-circle: 0;
}

/* Forest Theme - Nature-inspired, calming green tones */

/* Ocean Theme - Deep blue oceanic feel */

/* ============================================
   LIGHT MODE THEMES
   ============================================ */

/* Cream Theme - Warm, soft beige tones */

/* Rose Theme - Soft pink/rose tones */
[data-theme="rose"] {
	--bg-primary: #fdf2f4;
	--bg-secondary: #fce7eb;
	--bg-tertiary: #fbd5dd;
	--bg-hover: #f9c2ce;
	--bg-selected: #fce7eb;
	--bg-card: #ffffff;
	--text-primary: #4a1525;
	--text-secondary: #7a2840;
	--text-muted: #a04058;
	--text-inverse: #fdf2f4;
	--border-color: #f0a8b8;
	--border-light: #f8d0d8;
	--border-dark: #e07890;
	--shadow-color: rgba(74, 21, 37, 0.08);
	--shadow-md: 0 4px 6px -1px rgba(74, 21, 37, 0.1);
	--overlay-bg: rgba(74, 21, 37, 0.5);
	--accent-blue: #ec4899;
	--btn-primary-bg: #be185d;
	--btn-primary-hover: #9d174d;
	--btn-secondary-bg: #f472b6;
	--btn-secondary-hover: #ec4899;
	--theme-type: light;
}

/* Sky Theme - Light blue airy feel */

/* Mint Theme - Fresh green/mint tones */
[data-theme="mint"] {
	--bg-primary: #f0fdf4;
	--bg-secondary: #dcfce7;
	--bg-tertiary: #bbf7d0;
	--bg-hover: #86efac;
	--bg-selected: #dcfce7;
	--bg-card: #ffffff;
	--text-primary: #14532d;
	--text-secondary: #166534;
	--text-muted: #15803d;
	--text-inverse: #f0fdf4;
	--border-color: #86efac;
	--border-light: #bbf7d0;
	--border-dark: #4ade80;
	--shadow-color: rgba(20, 83, 45, 0.08);
	--shadow-md: 0 4px 6px -1px rgba(20, 83, 45, 0.1);
	--overlay-bg: rgba(20, 83, 45, 0.5);
	--accent-blue: #10b981;
	--btn-primary-bg: #166534;
	--btn-primary-hover: #14532d;
	--btn-secondary-bg: #4ade80;
	--btn-secondary-hover: #22c55e;
	--theme-type: light;
}

/* Vectorheart — 11th theme + brand-locked public identity (T166, 2026-05-25).
   Mirrors the cp-token compat shim in shared/vectorheart.css for legacy
   admin-style tokens (--bg-*, --text-*, --accent-*, --btn-*). Without this
   block, public HTMLs that load style.css fall through to the :root cyberpunk
   defaults — wrong palette under data-theme="vector". Tokens map to
   shared/vectorheart.css's --vec-* surface; no shadow/glow stacks — flat by
   design. */
[data-theme="vector"] {
	--bg-primary: #0A0A0A;          /* canvas-base */
	--bg-secondary: #141414;        /* canvas-elevated */
	--bg-tertiary: #1A1A1A;         /* canvas-elevated +1 step */
	--bg-hover: #202020;
	--bg-selected: #1A1A1A;
	--bg-card: #141414;

	--text-primary: #FAFAFA;        /* ink-bright */
	--text-secondary: #D4D4D4;      /* ink-regular */
	--text-muted: #8C8C8C;          /* ink-muted */
	--text-inverse: #0A0A0A;

	--border-color: #2A2A2A;        /* rule-heavy */
	--border-light: #1F1F1F;        /* rule-hairline */
	--border-dark: #FF0066;         /* signal-magenta (load-bearing accent) */

	--shadow-color: transparent;    /* flat by design */
	--shadow-md: none;
	--overlay-bg: rgba(10, 10, 10, 0.92);

	--accent-blue: #FF0066;         /* signal-magenta — brand accent */
	--accent-blue-hover: #CC0052;
	--accent-blue-light: rgba(255, 0, 102, 0.20);
	--accent-green: #00E5FF;        /* signal-cyan — repurpose 'green' slot */
	--accent-green-light: rgba(0, 229, 255, 0.20);
	--accent-red: #D40000;          /* signal-red */
	--accent-red-light: rgba(212, 0, 0, 0.20);
	--accent-yellow: #EED202;       /* signal-yellow */
	--accent-yellow-light: rgba(238, 210, 2, 0.20);
	--accent-gray: #8C8C8C;
	--accent-gray-light: rgba(140, 140, 140, 0.20);

	--btn-primary-bg: #FF0066;
	--btn-primary-hover: #CC0052;
	--btn-secondary-bg: #141414;
	--btn-secondary-hover: #1F1F1F;

	--theme-type: dark;
}

/* ============================================
   MINIMALIST OVERRIDES — non-neon themes (T044, 2026-05-22)
   :root defaults mirror cyberpunk for first-paint, so every non-neon theme
   gets an explicit reset back to minimalist: legacy Inter/Oswald fonts and
   a flat (no scanline) body. .cyber-* utility classes from cyberpunk.css are
   already gated to [data-theme="neon"] so they're no-ops here — but we still
   nullify body::after just in case external CSS dropped a pseudo-element on
   the body.
   ============================================ */
[data-theme="midnight"],
[data-theme="arctic"],
[data-theme="royal"],
[data-theme="rose"],
[data-theme="mint"],
[data-theme="vector"] {
	--font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-display: 'Oswald', 'Inter', sans-serif;
	--font-mono: 'JetBrains Mono', 'Courier New', monospace;
}

/* Vectorheart-specific: Oxanium replaces Oswald as the display font (the
   spec is explicit — see docs/VECTORHEART_THEME_PROMPT.md §Typography).
   Order matters: this single-selector override lands AFTER the shared block
   above so it wins specificity-tiebreak by source order. */
[data-theme="vector"] {
	--font-display: 'Oxanium', 'Big Shoulders Display', sans-serif;
}

/* Royal (Bold Typography): Inter Tight for headlines + all UI; Playfair Display
   italic reserved for pull-quotes only (--font-quote). Lands after the shared
   minimalist block so it wins by source order (same trick as the vector block). */
[data-theme="royal"] {
	--font-primary: 'Inter Tight', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
	--font-quote: 'Playfair Display', Georgia, serif;
}

[data-theme="midnight"] body,
[data-theme="arctic"] body,
[data-theme="royal"] body,
[data-theme="rose"] body,
[data-theme="mint"] body,
[data-theme="vector"] body {
	font-family: var(--font-primary);
}

[data-theme="midnight"] body::after,
[data-theme="arctic"] body::after,
[data-theme="royal"] body::after,
[data-theme="rose"] body::after,
[data-theme="mint"] body::after,
[data-theme="vector"] body::after {
	content: none;
	background-image: none;
}

/* Legacy support: map 'dark' to 'midnight' and 'light' to 'arctic' */
[data-theme="dark"] {
	--bg-primary: #111827;
	--bg-secondary: #1f2937;
	--bg-tertiary: #374151;
	--bg-hover: #4b5563;
	--bg-selected: #1e3a5f;
	--bg-card: #1f2937;
	--text-primary: #f3f4f6;
	--text-secondary: #d1d5db;
	--text-muted: #9ca3af;
	--text-inverse: #111827;
	--border-color: #374151;
	--border-light: #4b5563;
	--border-dark: #6b7280;
	--theme-type: dark;
}

[data-theme="light"] {
	--bg-primary: #f8fafc;
	--bg-secondary: #f1f5f9;
	--bg-tertiary: #e2e8f0;
	--bg-hover: #cbd5e1;
	--bg-selected: #dbeafe;
	--bg-card: #ffffff;
	--text-primary: #0f172a;
	--text-secondary: #334155;
	--text-muted: #64748b;
	--text-inverse: #ffffff;
	--border-color: #cbd5e1;
	--border-light: #e2e8f0;
	--border-dark: #94a3b8;
	--btn-primary-bg: #1e293b;
	--btn-primary-hover: #334155;
	--theme-type: light;
}

/* Theme-aware body styling */
body {
	background-color: var(--bg-primary);
	color: var(--text-primary);
	font-family: var(--font-primary);
}

/* ============================================
   SEMANTIC COMPONENT CLASSES (.bs-*)
   Theme-aware via CSS variables — no per-theme overrides needed.
   ============================================ */

/* --- Cards --- */
.bs-card {
	background-color: var(--bg-secondary);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-color);
	padding: 1rem;
}
.bs-card-lg {
	background-color: var(--bg-secondary);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-color);
	padding: 1.5rem;
}
.bs-card-compact {
	background-color: var(--bg-secondary);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-color);
}

/* --- Buttons --- */
.bs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	font-weight: 500;
	border-radius: var(--radius-sm);
	transition: background-color 0.15s, color 0.15s, opacity 0.15s;
	cursor: pointer;
	border: none;
	white-space: nowrap;
	text-decoration: none;
}
.bs-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.bs-btn-sm {
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
}
.bs-btn-md {
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
}
.bs-btn-lg {
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	border-radius: var(--radius-lg);
}
.bs-btn-primary {
	background-color: var(--accent-blue);
	color: #fff;
}
.bs-btn-primary:hover:not(:disabled) {
	background-color: var(--accent-blue-hover, #2563eb);
}
.bs-btn-success {
	background-color: var(--accent-green);
	color: #fff;
}
.bs-btn-success:hover:not(:disabled) {
	background-color: #059669;
}
.bs-btn-danger {
	background-color: #dc2626;
	color: #fff;
}
.bs-btn-danger:hover:not(:disabled) {
	background-color: #b91c1c;
}
.bs-btn-warning {
	background-color: var(--accent-yellow);
	color: #fff;
}
.bs-btn-warning:hover:not(:disabled) {
	background-color: #d97706;
}
.bs-btn-secondary {
	background-color: var(--bg-tertiary);
	color: var(--text-primary);
}
.bs-btn-secondary:hover:not(:disabled) {
	background-color: var(--bg-hover);
}
.bs-btn-ghost-blue {
	background-color: rgba(59, 130, 246, 0.15);
	color: var(--accent-blue);
}
.bs-btn-ghost-blue:hover:not(:disabled) {
	background-color: rgba(59, 130, 246, 0.3);
}
.bs-btn-ghost-green {
	background-color: rgba(16, 185, 129, 0.15);
	color: var(--accent-green);
}
.bs-btn-ghost-green:hover:not(:disabled) {
	background-color: rgba(16, 185, 129, 0.3);
}
.bs-btn-ghost-red {
	background-color: rgba(239, 68, 68, 0.15);
	color: var(--accent-red);
}
.bs-btn-ghost-red:hover:not(:disabled) {
	background-color: rgba(239, 68, 68, 0.3);
}
.bs-btn-ghost-yellow {
	background-color: rgba(245, 158, 11, 0.15);
	color: var(--accent-yellow);
}
.bs-btn-ghost-yellow:hover:not(:disabled) {
	background-color: rgba(245, 158, 11, 0.3);
}

/* --- Badges --- */
.bs-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.125rem 0.5rem;
	border-radius: var(--radius-sm);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.5;
}
.bs-badge-success {
	background-color: rgba(16, 185, 129, 0.15);
	color: var(--accent-green);
}
.bs-badge-error {
	background-color: rgba(239, 68, 68, 0.15);
	color: var(--accent-red);
}
.bs-badge-warning {
	background-color: rgba(245, 158, 11, 0.15);
	color: var(--accent-yellow);
}
.bs-badge-info {
	background-color: rgba(59, 130, 246, 0.15);
	color: var(--accent-blue);
}
.bs-badge-pending {
	background-color: rgba(107, 114, 128, 0.2);
	color: var(--text-muted);
}
.bs-badge-live {
	background-color: rgba(239, 68, 68, 0.2);
	color: var(--accent-red);
	animation: pulse 2s infinite;
}

/* --- Inputs --- */
.bs-input {
	width: 100%;
	padding: 0.5rem 0.75rem;
	background-color: var(--bg-primary);
	border: 1px solid var(--border-light, #4b5563);
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	font-size: 0.875rem;
}
.bs-input:focus {
	outline: none;
	border-color: var(--accent-blue);
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.bs-input::placeholder {
	color: var(--text-muted);
}
.bs-input-compact {
	padding: 0.25rem 0.5rem;
	background-color: var(--bg-primary);
	border: 1px solid var(--border-light, #4b5563);
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	font-size: 0.75rem;
}
.bs-input-compact:focus {
	outline: none;
	border-color: var(--accent-blue);
}
.bs-select {
	padding: 0.25rem 0.5rem;
	background-color: var(--bg-primary);
	border: 1px solid var(--border-light, #4b5563);
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	font-size: 0.75rem;
}
.bs-select:focus {
	outline: none;
	border-color: var(--accent-blue);
}
.bs-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--text-secondary);
	margin-bottom: 0.25rem;
}

/* --- Table / Rows --- */
.bs-table {
	background-color: var(--bg-secondary);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-color);
	overflow: hidden;
}
.bs-table-header {
	display: flex;
	align-items: center;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--border-color);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.bs-table-row {
	display: flex;
	align-items: center;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--border-color);
	transition: background-color 0.1s;
}
.bs-table-row:last-child {
	border-bottom: none;
}
.bs-table-row:hover {
	background-color: var(--bg-hover);
}

/* --- Modal --- */
.bs-modal-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 50;
}
.bs-modal {
	background-color: var(--bg-secondary);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-color);
	padding: 1.5rem;
	width: 100%;
	max-width: 28rem;
	margin: 0 1rem;
}
.bs-modal-lg {
	max-width: 36rem;
}
.bs-modal-xl {
	max-width: 48rem;
}
.bs-modal-header {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 1rem;
}
.bs-modal-body {
	color: var(--text-secondary);
}
.bs-modal-footer {
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border-color);
}

/* --- Toast --- */
.bs-toast {
	padding: 0.75rem 1rem;
	border-radius: var(--radius-lg);
	font-size: 0.875rem;
	font-weight: 500;
	animation: slideDown 0.3s ease-out;
}
.bs-toast-success {
	background-color: rgba(16, 185, 129, 0.15);
	color: var(--accent-green);
	border: 1px solid rgba(16, 185, 129, 0.3);
}
.bs-toast-error {
	background-color: rgba(239, 68, 68, 0.15);
	color: var(--accent-red);
	border: 1px solid rgba(239, 68, 68, 0.3);
}
.bs-toast-warning {
	background-color: rgba(245, 158, 11, 0.15);
	color: var(--accent-yellow);
	border: 1px solid rgba(245, 158, 11, 0.3);
}
.bs-toast-info {
	background-color: rgba(59, 130, 246, 0.15);
	color: var(--accent-blue);
	border: 1px solid rgba(59, 130, 246, 0.3);
}

/* --- Filter Tabs --- */
.bs-filter-tab {
	padding: 0.5rem 1rem;
	border-radius: var(--radius-lg);
	font-size: 0.875rem;
	font-weight: 500;
	white-space: nowrap;
	transition: background-color 0.15s, color 0.15s;
	cursor: pointer;
	border: none;
	background-color: var(--bg-tertiary);
	color: var(--text-secondary);
}
.bs-filter-tab:hover {
	background-color: var(--bg-hover);
}
.bs-filter-tab.active {
	background-color: var(--accent-blue);
	color: #fff;
}

/* --- Text Helpers --- */
.bs-text-heading {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--text-primary);
}
.bs-text-subheading {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--text-primary);
}
.bs-text-muted {
	font-size: 0.75rem;
	color: var(--text-muted);
}
.bs-text-hint {
	font-size: 0.75rem;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* --- Tournament Workspace Sidebar --- */
.tw-sidebar {
	background-color: var(--bg-secondary);
	border-right: 1px solid var(--border-color);
}
.tw-sidebar-section {
	border-bottom: 1px solid var(--border-color);
}
.tw-sidebar-section-bottom {
	border-top: 1px solid var(--border-color);
}
.tw-nav-link {
	color: var(--text-muted);
	transition: color 0.15s;
}
.tw-nav-link:hover {
	color: var(--text-primary);
}
.tw-nav-item {
	color: var(--text-muted);
	transition: background-color 0.15s, color 0.15s;
}
.tw-nav-item:hover {
	background-color: var(--bg-tertiary);
	color: var(--text-primary);
}
.tw-nav-item.active {
	background-color: var(--bg-tertiary);
	color: var(--text-primary);
	border-left: 3px solid var(--accent-blue);
	padding-left: 9px;
}
.tw-nav-avatar {
	background-color: var(--bg-hover);
}
.tw-header {
	background-color: var(--bg-secondary);
	border-bottom: 1px solid var(--border-color);
}

/* --- Section Fade Transition --- */
.tw-section-enter {
	animation: ds-fade-slide-up 300ms cubic-bezier(0, 0, 0.2, 1) both;
}
@media (prefers-reduced-motion: reduce) {
	.tw-section-enter {
		animation: none;
	}
}

/* ============================================
   THEME OVERRIDES - Fix Tailwind color classes
   Applied to all light themes: arctic, cream, rose, sky, mint, light (legacy)
   ============================================ */

/* Light themes - Override Tailwind classes for readable text */
[data-theme="arctic"] .text-white,
[data-theme="arctic"] .text-gray-100,
[data-theme="arctic"] .text-gray-200,
[data-theme="rose"] .text-white,
[data-theme="rose"] .text-gray-100,
[data-theme="rose"] .text-gray-200,
[data-theme="mint"] .text-white,
[data-theme="mint"] .text-gray-100,
[data-theme="mint"] .text-gray-200,
[data-theme="light"] .text-white,
[data-theme="light"] .text-gray-100,
[data-theme="light"] .text-gray-200 {
	color: var(--text-primary);
}

[data-theme="arctic"] .text-gray-300,
[data-theme="arctic"] .text-gray-400,
[data-theme="rose"] .text-gray-300,
[data-theme="rose"] .text-gray-400,
[data-theme="mint"] .text-gray-300,
[data-theme="mint"] .text-gray-400,
[data-theme="light"] .text-gray-300,
[data-theme="light"] .text-gray-400 {
	color: var(--text-secondary);
}

[data-theme="arctic"] .text-gray-500,
[data-theme="arctic"] .text-gray-600,
[data-theme="rose"] .text-gray-500,
[data-theme="rose"] .text-gray-600,
[data-theme="mint"] .text-gray-500,
[data-theme="mint"] .text-gray-600,
[data-theme="light"] .text-gray-500,
[data-theme="light"] .text-gray-600 {
	color: var(--text-muted);
}

/* Light themes - Override Tailwind background colors */
[data-theme="arctic"] .bg-gray-800,
[data-theme="arctic"] .bg-gray-900,
[data-theme="rose"] .bg-gray-800,
[data-theme="rose"] .bg-gray-900,
[data-theme="mint"] .bg-gray-800,
[data-theme="mint"] .bg-gray-900,
[data-theme="light"] .bg-gray-800,
[data-theme="light"] .bg-gray-900 {
	background-color: var(--bg-secondary);
}

[data-theme="arctic"] .bg-gray-700,
[data-theme="rose"] .bg-gray-700,
[data-theme="mint"] .bg-gray-700,
[data-theme="light"] .bg-gray-700 {
	background-color: var(--bg-tertiary);
}

[data-theme="arctic"] .bg-gray-600,
[data-theme="rose"] .bg-gray-600,
[data-theme="mint"] .bg-gray-600,
[data-theme="light"] .bg-gray-600 {
	background-color: var(--bg-hover);
}

/* Light themes - Override Tailwind border colors */
[data-theme="arctic"] .border-gray-700,
[data-theme="arctic"] .border-gray-600,
[data-theme="rose"] .border-gray-700,
[data-theme="rose"] .border-gray-600,
[data-theme="mint"] .border-gray-700,
[data-theme="mint"] .border-gray-600,
[data-theme="light"] .border-gray-700,
[data-theme="light"] .border-gray-600 {
	border-color: var(--border-color);
}

[data-theme="arctic"] .border-gray-500,
[data-theme="rose"] .border-gray-500,
[data-theme="mint"] .border-gray-500,
[data-theme="light"] .border-gray-500 {
	border-color: var(--border-light);
}

/* Light themes - Hover states */
[data-theme="arctic"] .hover\:text-white:hover,
[data-theme="rose"] .hover\:text-white:hover,
[data-theme="mint"] .hover\:text-white:hover,
[data-theme="light"] .hover\:text-white:hover {
	color: var(--text-primary);
}

[data-theme="arctic"] .hover\:bg-gray-700:hover,
[data-theme="rose"] .hover\:bg-gray-700:hover,
[data-theme="mint"] .hover\:bg-gray-700:hover,
[data-theme="light"] .hover\:bg-gray-700:hover {
	background-color: var(--bg-tertiary);
}

[data-theme="arctic"] .hover\:bg-gray-600:hover,
[data-theme="rose"] .hover\:bg-gray-600:hover,
[data-theme="mint"] .hover\:bg-gray-600:hover,
[data-theme="light"] .hover\:bg-gray-600:hover {
	background-color: var(--bg-hover);
}

/* Light themes - Form inputs */
[data-theme="arctic"] input,
[data-theme="arctic"] select,
[data-theme="arctic"] textarea,
[data-theme="rose"] input,
[data-theme="rose"] select,
[data-theme="rose"] textarea,
[data-theme="mint"] input,
[data-theme="mint"] select,
[data-theme="mint"] textarea,
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
	background-color: var(--bg-primary);
	border-color: var(--border-color);
	color: var(--text-primary);
}

[data-theme="arctic"] input::placeholder,
[data-theme="arctic"] textarea::placeholder,
[data-theme="rose"] input::placeholder,
[data-theme="rose"] textarea::placeholder,
[data-theme="mint"] input::placeholder,
[data-theme="mint"] textarea::placeholder,
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
	color: var(--text-muted);
}

/* Light themes - Focus states */
[data-theme="arctic"] input:focus,
[data-theme="arctic"] select:focus,
[data-theme="arctic"] textarea:focus,
[data-theme="rose"] input:focus,
[data-theme="rose"] select:focus,
[data-theme="rose"] textarea:focus,
[data-theme="mint"] input:focus,
[data-theme="mint"] select:focus,
[data-theme="mint"] textarea:focus,
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
	border-color: var(--accent-blue);
}

/* Light themes - Tables */
[data-theme="arctic"] table th,
[data-theme="rose"] table th,
[data-theme="mint"] table th,
[data-theme="light"] table th {
	color: var(--text-secondary);
}

[data-theme="arctic"] table td,
[data-theme="rose"] table td,
[data-theme="mint"] table td,
[data-theme="light"] table td {
	color: var(--text-primary);
}

/* Light themes - Modals */
[data-theme="arctic"] .modal-content,
[data-theme="arctic"] [class*="modal"] > div,
[data-theme="rose"] .modal-content,
[data-theme="rose"] [class*="modal"] > div,
[data-theme="mint"] .modal-content,
[data-theme="mint"] [class*="modal"] > div,
[data-theme="light"] .modal-content,
[data-theme="light"] [class*="modal"] > div {
	background-color: var(--bg-secondary);
	border-color: var(--border-color);
}

/* Light themes - Specific container overrides */
[data-theme="arctic"] .bg-black,
[data-theme="rose"] .bg-black,
[data-theme="mint"] .bg-black,
[data-theme="light"] .bg-black {
	background-color: var(--bg-primary);
}

[data-theme="arctic"] .bg-opacity-75,
[data-theme="rose"] .bg-opacity-75,
[data-theme="mint"] .bg-opacity-75,
[data-theme="light"] .bg-opacity-75 {
	background-color: rgba(0, 0, 0, 0.5);
}

/* ============================================
   DARK THEME OVERRIDES - Fix Tailwind color classes
   Applied to non-default dark themes: neon, royal, forest, ocean
   (Midnight overrides are in the MIDNIGHT section below — T-MN-2)
   ============================================ */

/* Dark themes - Override Tailwind background colors */
[data-theme="neon"] .bg-gray-800,
[data-theme="neon"] .bg-gray-900,
[data-theme="royal"] .bg-gray-800,
[data-theme="royal"] .bg-gray-900 {
	background-color: var(--bg-secondary);
}

[data-theme="neon"] .bg-gray-700,
[data-theme="royal"] .bg-gray-700 {
	background-color: var(--bg-tertiary);
}

[data-theme="neon"] .bg-gray-600,
[data-theme="royal"] .bg-gray-600 {
	background-color: var(--bg-hover);
}

/* Dark themes - Override Tailwind border colors */
[data-theme="neon"] .border-gray-700,
[data-theme="neon"] .border-gray-600,
[data-theme="royal"] .border-gray-700,
[data-theme="royal"] .border-gray-600 {
	border-color: var(--border-color);
}

/* Dark themes - Override Tailwind text colors */
[data-theme="neon"] .text-gray-300,
[data-theme="neon"] .text-gray-400,
[data-theme="royal"] .text-gray-300,
[data-theme="royal"] .text-gray-400 {
	color: var(--text-secondary);
}

[data-theme="neon"] .text-gray-500,
[data-theme="neon"] .text-gray-600,
[data-theme="royal"] .text-gray-500,
[data-theme="royal"] .text-gray-600 {
	color: var(--text-muted);
}

/* Dark themes - Override Tailwind hover states */
[data-theme="neon"] .hover\:bg-gray-700:hover,
[data-theme="royal"] .hover\:bg-gray-700:hover {
	background-color: var(--bg-tertiary);
}

[data-theme="neon"] .hover\:bg-gray-600:hover,
[data-theme="royal"] .hover\:bg-gray-600:hover {
	background-color: var(--bg-hover);
}

/* Dark themes - Form inputs */
[data-theme="neon"] input,
[data-theme="neon"] select,
[data-theme="neon"] textarea,
[data-theme="royal"] input,
[data-theme="royal"] select,
[data-theme="royal"] textarea {
	background-color: var(--bg-primary);
	border-color: var(--border-color);
	color: var(--text-primary);
}

/* ============================================================================
   CYBERPUNK POLISH (2026-05-31) — applies the design-system aesthetic to the
   admin chrome under [data-theme="neon"]. Effects are color / box-shadow /
   text-shadow / hover only — NO clip-path on shared Tailwind elements, so nothing
   clips content or shifts the layout. Neon-gated; all other themes untouched.
   Tokens: --cp-* from the cyberpunk.css @import at the top of this file.
   ============================================================================ */

/* Primary action buttons → neon accent + glow. Parity fix: vector/midnight/light
   already recolor Tailwind blue/green CTAs to their accent; neon was the only dark
   theme leaving them Tailwind-blue. */
[data-theme="neon"] .bg-blue-500,
[data-theme="neon"] .bg-blue-600,
[data-theme="neon"] .bg-blue-700,
[data-theme="neon"] .bg-green-500,
[data-theme="neon"] .bg-green-600,
[data-theme="neon"] .bg-green-700 {
	background-color: var(--cp-accent-primary);
	color: #0a0a0f !important;
	box-shadow: var(--cp-glow-neon-sm);
}

[data-theme="neon"] .hover\:bg-blue-700:hover,
[data-theme="neon"] .hover\:bg-blue-600:hover,
[data-theme="neon"] .hover\:bg-green-700:hover,
[data-theme="neon"] .hover\:bg-green-600:hover {
	background-color: var(--cp-accent-primary);
	filter: brightness(1.12);
	box-shadow: var(--cp-glow-neon);
}

/* Headings → subtle static neon glow (legible, PSE-safe — no flashing). */
[data-theme="neon"] h1,
[data-theme="neon"] h2 {
	text-shadow: 0 0 6px rgba(0, 255, 136, 0.45);
}

/* Page title (h1) → one-shot chromatic micro-glitch on hover. Interactive and
   non-distracting; motion-gated so reduced-motion users keep the static glow.
   cp-glitch is defined in cyberpunk.css under the same motion media query. */
@media (prefers-reduced-motion: no-preference) {
	[data-theme="neon"] h1:hover {
		animation: cp-glitch 0.4s steps(3) 1;
	}
}

/* Cards/panels → neon glow on hover. box-shadow only = zero layout shift; scoped
   to rounded containers so it lands on cards, not every gray chip. */
[data-theme="neon"] .bg-gray-800.rounded-lg,
[data-theme="neon"] .bg-gray-800.rounded-xl,
[data-theme="neon"] .bg-gray-900.rounded-lg,
[data-theme="neon"] .bg-gray-900.rounded-xl {
	transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="neon"] .bg-gray-800.rounded-lg:hover,
[data-theme="neon"] .bg-gray-800.rounded-xl:hover,
[data-theme="neon"] .bg-gray-900.rounded-lg:hover,
[data-theme="neon"] .bg-gray-900.rounded-xl:hover {
	box-shadow: var(--cp-glow-neon-sm);
}

/* Preserve accent colors in both themes */
.text-blue-400, .text-blue-500, .text-blue-600 {
	color: var(--accent-blue) !important;
}

.text-green-400, .text-green-500, .text-green-600 {
	color: var(--accent-green) !important;
}

.text-red-400, .text-red-500, .text-red-600 {
	color: var(--accent-red) !important;
}

.text-yellow-400, .text-yellow-500, .text-yellow-600 {
	color: var(--accent-yellow) !important;
}

/* ============================================
   VECTORHEART — Tailwind utility overrides (T166, 2026-05-25)
   ============================================
   The dark-theme override blocks above (lines ~1178+) include neon/royal/
   forest/ocean but NOT vector. Pages like privacy.html, terms.html,
   accessibility.html paint their layout with Tailwind utilities
   (.bg-gray-900, .text-blue-300, .border-gray-800, ...), so without
   these overrides those utilities resolve to their hardcoded Tailwind
   palette under the brand-locked vector theme — wrong palette
   (Tailwind slate-gray panels + Tailwind blue accents instead of
   Vectorheart canvas + magenta).

   All values pull from the [data-theme="vector"] block defined earlier
   in this file (--bg-secondary, --text-muted, --border-color, ...).
   ============================================ */
[data-theme="vector"] .bg-gray-800,
[data-theme="vector"] .bg-gray-900 {
	background-color: var(--bg-secondary);
}

[data-theme="vector"] .bg-gray-700 {
	background-color: var(--bg-tertiary);
}

[data-theme="vector"] .bg-gray-600 {
	background-color: var(--bg-hover);
}

[data-theme="vector"] .border-gray-700,
[data-theme="vector"] .border-gray-800 {
	border-color: var(--border-color);
}

[data-theme="vector"] .text-gray-100,
[data-theme="vector"] .text-gray-200 {
	color: var(--text-primary);
}

[data-theme="vector"] .text-gray-300,
[data-theme="vector"] .text-gray-400 {
	color: var(--text-secondary);
}

[data-theme="vector"] .text-gray-500,
[data-theme="vector"] .text-gray-600 {
	color: var(--text-muted);
}

[data-theme="vector"] .text-blue-300,
[data-theme="vector"] .text-blue-400 {
	color: var(--accent-blue) !important;   /* signal-magenta under vector */
}

[data-theme="vector"] .text-green-400,
[data-theme="vector"] .text-green-500,
[data-theme="vector"] .text-green-600 {
	color: var(--accent-green) !important;   /* signal-cyan under vector */
}

[data-theme="vector"] .text-purple-400,
[data-theme="vector"] .text-purple-500 {
	color: var(--accent-blue) !important;   /* signal-magenta — purple→brand */
}

[data-theme="vector"] .text-yellow-400,
[data-theme="vector"] .text-yellow-500 {
	color: var(--accent-yellow) !important;
}

/* Tailwind blue/green action buttons: paint as Vectorheart magenta under
   vector so CTAs match the brand accent (pricing.html "Subscribe" buttons,
   landing/signup CTAs that use bg-blue-600). */
[data-theme="vector"] .bg-blue-500,
[data-theme="vector"] .bg-blue-600,
[data-theme="vector"] .bg-blue-700,
[data-theme="vector"] .bg-green-500,
[data-theme="vector"] .bg-green-600,
[data-theme="vector"] .bg-green-700 {
	background-color: var(--accent-blue);   /* signal-magenta */
	color: #0A0A0A !important;
}

[data-theme="vector"] .hover\:bg-blue-700:hover,
[data-theme="vector"] .hover\:bg-blue-600:hover,
[data-theme="vector"] .hover\:bg-green-700:hover,
[data-theme="vector"] .hover\:bg-green-600:hover {
	background-color: var(--accent-blue-hover);   /* magenta darkened */
}

[data-theme="vector"] .hover\:bg-gray-700:hover {
	background-color: var(--bg-tertiary);
}

[data-theme="vector"] .hover\:bg-gray-600:hover {
	background-color: var(--bg-hover);
}

[data-theme="vector"] input,
[data-theme="vector"] select,
[data-theme="vector"] textarea {
	background-color: var(--bg-primary);
	border-color: var(--border-color);
	color: var(--text-primary);
}

/* ============================================
   ROYAL — Bold Typography component layer (2026-05-31)
   Tailwind CTA remaps + focus ring + bounded editorial type scale. Mirrors the
   vector remap pattern above but keeps the three CTA signals distinct, and only
   bumps the already-large heading tiers (editorial surfaces) so dense
   operational views keep their sizes.
   ============================================ */

/* Primary CTAs → vermillion, confirm → emerald, danger → rose. Dark text on all
   three (white-on-bright fails WCAG AA at button text sizes). */
[data-theme="royal"] .bg-blue-500,
[data-theme="royal"] .bg-blue-600,
[data-theme="royal"] .bg-blue-700 {
	background-color: var(--accent-blue);
	color: #0A0A0A !important;
}
[data-theme="royal"] .hover\:bg-blue-700:hover,
[data-theme="royal"] .hover\:bg-blue-600:hover {
	background-color: var(--accent-blue-hover);
}
[data-theme="royal"] .bg-green-500,
[data-theme="royal"] .bg-green-600,
[data-theme="royal"] .bg-green-700 {
	background-color: var(--accent-green);
	color: #0A0A0A !important;
}
[data-theme="royal"] .bg-red-500,
[data-theme="royal"] .bg-red-600,
[data-theme="royal"] .bg-red-700 {
	background-color: var(--accent-red);
	color: #0A0A0A !important;
}
[data-theme="royal"] .hover\:bg-green-700:hover,
[data-theme="royal"] .hover\:bg-green-600:hover,
[data-theme="royal"] .hover\:bg-red-700:hover,
[data-theme="royal"] .hover\:bg-red-600:hover {
	filter: brightness(0.92);
}

/* Vermillion focus ring everywhere (independent of the --ds-color-focus token). */
[data-theme="royal"] :focus-visible {
	outline: 2px solid var(--accent-blue);
	outline-offset: 2px;
}

/* Editorial scale bump — ONLY the already-large heading tiers grow + tighten
   (these sit on hero/editorial surfaces, rarely in dense toolbars). Smaller
   tiers used in operational views are intentionally untouched. */
[data-theme="royal"] .text-4xl {
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	letter-spacing: -0.04em;
	line-height: 1.05;
}
[data-theme="royal"] .text-5xl {
	font-size: clamp(3rem, 7vw, 5rem);
	letter-spacing: -0.05em;
	line-height: 1.0;
}
[data-theme="royal"] h1,
[data-theme="royal"] h2,
[data-theme="royal"] h3 {
	letter-spacing: -0.03em;
}

/* Structural labels → mono, wide-tracked, uppercase (the poster signature).
   Scoped to short label elements; dense data text stays in the body face. */
[data-theme="royal"] .section-title,
[data-theme="royal"] thead th {
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* Pull-quotes — the single place the Playfair Display italic display face
   appears (per the Bold Typography spec: serif reserved for quotes only). */
[data-theme="royal"] blockquote {
	font-family: var(--font-quote);
	font-style: italic;
}

/* ============================================
   MIDNIGHT — Tailwind utility overrides (T-MN-2, 2026-05-31)
   Deep near-black + indigo; mirrors the neon/vector override pattern above.
   ============================================ */
[data-theme="midnight"] .bg-gray-800,
[data-theme="midnight"] .bg-gray-900 {
	background-color: var(--bg-secondary);
}

[data-theme="midnight"] .bg-gray-700 {
	background-color: var(--bg-tertiary);
}

[data-theme="midnight"] .bg-gray-600 {
	background-color: var(--bg-hover);
}

[data-theme="midnight"] .border-gray-700,
[data-theme="midnight"] .border-gray-800 {
	border-color: var(--border-color);
}

[data-theme="midnight"] .text-gray-100,
[data-theme="midnight"] .text-gray-200 {
	color: var(--text-primary);
}

[data-theme="midnight"] .text-gray-300,
[data-theme="midnight"] .text-gray-400 {
	color: var(--text-secondary);
}

[data-theme="midnight"] .text-gray-500,
[data-theme="midnight"] .text-gray-600 {
	color: var(--text-muted);
}

[data-theme="midnight"] .text-blue-300,
[data-theme="midnight"] .text-blue-400 {
	color: var(--accent-blue) !important;
}

[data-theme="midnight"] .bg-blue-500,
[data-theme="midnight"] .bg-blue-600,
[data-theme="midnight"] .bg-blue-700 {
	background-color: #5E6AD2;
	box-shadow: 0 0 0 1px rgba(94,106,210,.5), 0 4px 12px rgba(94,106,210,.3);
}

[data-theme="midnight"] .hover\:bg-blue-700:hover,
[data-theme="midnight"] .hover\:bg-blue-600:hover {
	background-color: #6872D9;
}

[data-theme="midnight"] .hover\:bg-gray-700:hover {
	background-color: var(--bg-tertiary);
}

[data-theme="midnight"] .hover\:bg-gray-600:hover {
	background-color: var(--bg-hover);
}

[data-theme="midnight"] input,
[data-theme="midnight"] select,
[data-theme="midnight"] textarea {
	background-color: var(--bg-primary);
	border-color: var(--border-color);
	color: var(--text-primary);
}

/* ============================================
   LIGHT MODE - Button & Card Enhancements
   ============================================ */

/* Light mode - Primary action buttons (dark bg for contrast) */
[data-theme="light"] button.bg-blue-600,
[data-theme="light"] button.bg-blue-500,
[data-theme="light"] .btn-primary,
[data-theme="light"] button[type="submit"]:not(.filter-btn):not(.tab-button) {
	background-color: var(--accent-blue) !important;
	color: var(--text-inverse) !important;
}

[data-theme="light"] button.bg-blue-600:hover,
[data-theme="light"] button.bg-blue-500:hover,
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] button[type="submit"]:not(.filter-btn):not(.tab-button):hover {
	background-color: var(--accent-blue-hover) !important;
}

/* Light mode - Secondary buttons (slate/gray buttons need dark bg) */
[data-theme="light"] button.bg-gray-800,
[data-theme="light"] button.bg-gray-700,
[data-theme="light"] button.bg-gray-600 {
	background-color: var(--btn-primary-bg) !important;
	color: var(--text-inverse) !important;
}

[data-theme="light"] button.bg-gray-800:hover,
[data-theme="light"] button.bg-gray-700:hover,
[data-theme="light"] button.bg-gray-600:hover {
	background-color: var(--btn-primary-hover) !important;
}

/* Light mode - Danger buttons */
[data-theme="light"] button.bg-red-600,
[data-theme="light"] button.bg-red-500 {
	background-color: var(--accent-red) !important;
	color: var(--text-inverse) !important;
}

/* Light mode - Success buttons */
[data-theme="light"] button.bg-green-600,
[data-theme="light"] button.bg-green-500 {
	background-color: var(--accent-green) !important;
	color: var(--text-inverse) !important;
}

/* Light mode - Cards with elevation */
[data-theme="light"] .card,
[data-theme="light"] .status-card-compact,
[data-theme="light"] .match-card,
[data-theme="light"] .flyer-card,
[data-theme="light"] .display-card,
[data-theme="light"] section > div.bg-gray-800,
[data-theme="light"] section > div.bg-gray-900,
[data-theme="light"] div.rounded-lg.bg-gray-800,
[data-theme="light"] div.rounded-lg.bg-gray-900 {
	background-color: var(--bg-card) !important;
	border: 1px solid var(--border-color) !important;
	box-shadow: var(--shadow-md) !important;
}

/* Light mode - Section headers */
[data-theme="light"] section h2,
[data-theme="light"] section h3,
[data-theme="light"] .section-title {
	color: var(--text-primary);
}

/* Light mode - Subtle button variant (outline style) */
[data-theme="light"] .btn-subtle,
[data-theme="light"] button.border.border-gray-600,
[data-theme="light"] button.border.border-gray-700 {
	background-color: transparent !important;
	border-color: var(--border-dark) !important;
	color: var(--text-secondary) !important;
}

[data-theme="light"] .btn-subtle:hover,
[data-theme="light"] button.border.border-gray-600:hover,
[data-theme="light"] button.border.border-gray-700:hover {
	background-color: var(--bg-tertiary) !important;
	color: var(--text-primary) !important;
}

/* Light mode - Navigation active state */
[data-theme="light"] .nav-item[data-page].active,
[data-theme="light"] .nav-item[data-page]:hover {
	background-color: var(--bg-tertiary) !important;
}

/* Light mode - Table styling */
[data-theme="light"] table {
	background-color: var(--bg-card);
	border: 1px solid var(--border-color);
}

[data-theme="light"] table thead {
	background-color: var(--bg-secondary);
}

[data-theme="light"] table tbody tr {
	border-bottom: 1px solid var(--border-light);
}

[data-theme="light"] table tbody tr:hover {
	background-color: var(--bg-secondary);
}

/* Light mode - Sidebar */
[data-theme="light"] .sidebar {
	background-color: var(--bg-card) !important;
	border-right: 1px solid var(--border-color) !important;
}

/* Light mode - Dropdown menus */
[data-theme="light"] select {
	background-color: var(--bg-card) !important;
	border-color: var(--border-color) !important;
}

/* Light mode - Form containers with bg-gray-700/50 */
[data-theme="light"] .bg-gray-700\/50,
[data-theme="light"] [class*="bg-gray-700/50"] {
	background-color: var(--bg-secondary) !important;
}

/* Light mode - Status indicators */
[data-theme="light"] .status-indicator {
	box-shadow: 0 0 0 2px var(--bg-card);
}

/* Light mode - Badges and pills */
[data-theme="light"] .badge,
[data-theme="light"] span.bg-gray-600,
[data-theme="light"] span.bg-gray-700 {
	background-color: var(--bg-tertiary) !important;
	color: var(--text-secondary) !important;
}

/* Light mode - Dividers */
[data-theme="light"] hr,
[data-theme="light"] .divide-gray-700 > * {
	border-color: var(--border-light) !important;
}

/* Light mode - Modal overlay */
[data-theme="light"] .modal-backdrop,
[data-theme="light"] .fixed.inset-0.bg-black {
	background-color: rgba(0, 0, 0, 0.4) !important;
}

/* Light mode - Focus rings */
[data-theme="light"] button:focus-visible,
[data-theme="light"] input:focus-visible,
[data-theme="light"] select:focus-visible,
[data-theme="light"] a:focus-visible {
	outline: 2px solid var(--accent-blue);
	outline-offset: 2px;
}

/* Light mode - Disabled buttons */
[data-theme="light"] button:disabled {
	background-color: var(--bg-tertiary) !important;
	color: var(--text-muted) !important;
	cursor: not-allowed;
}

/* Light mode - Yellow/warning buttons */
[data-theme="light"] button.bg-yellow-600,
[data-theme="light"] button.bg-yellow-500 {
	background-color: var(--accent-yellow) !important;
	color: var(--text-primary) !important;
}

/* Light mode - Filter buttons in their inactive state */
[data-theme="light"] .filter-btn:not(.active),
[data-theme="light"] button[data-filter]:not(.active) {
	background-color: var(--bg-secondary) !important;
	color: var(--text-secondary) !important;
	border: 1px solid var(--border-color) !important;
}

[data-theme="light"] .filter-btn:not(.active):hover,
[data-theme="light"] button[data-filter]:not(.active):hover {
	background-color: var(--bg-tertiary) !important;
	color: var(--text-primary) !important;
}

/* Login Page Theme Overrides */
.login-card {
	background-color: var(--bg-card);
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-md);
}

.login-card h1 {
	color: var(--text-primary);
}

.login-card p {
	color: var(--text-muted);
}

.login-card label {
	color: var(--text-secondary);
}

.login-card input {
	background-color: var(--bg-primary);
	border-color: var(--border-color);
	color: var(--text-primary);
}

.login-card input::placeholder {
	color: var(--text-muted);
}

.login-card input:focus {
	border-color: var(--accent-blue);
}

/* Theme transition for smooth switching */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
	transition-delay: 0s !important;
}

/* ============================================
   APP LAYOUT - Sidebar Navigation
   ============================================ */

.app-layout {
	display: flex;
	min-height: 100vh;
}

.sidebar {
	width: 240px;
	min-width: 240px;
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	height: 100dvh; /* Dynamic viewport height for mobile browsers */
	z-index: 40;
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
}

/* Sidebar navigation scroll container */
.sidebar nav {
	flex: 1;
	min-height: 0; /* Critical for flex scroll to work */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
	scrollbar-width: thin;
	scrollbar-color: var(--border-light) transparent;
}

.sidebar nav::-webkit-scrollbar {
	width: 4px;
}

.sidebar nav::-webkit-scrollbar-track {
	background: transparent;
}

.sidebar nav::-webkit-scrollbar-thumb {
	background: var(--border-light);
	border-radius: var(--radius-2xs);
}

.sidebar nav::-webkit-scrollbar-thumb:hover {
	background: var(--text-muted);
}

.main-wrapper {
	flex: 1;
	margin-left: 240px;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	transition: margin-left 0.3s ease;
}

.main-content {
	flex: 1;
	padding: 1.5rem;
	overflow-y: auto;
}

/* Sidebar Collapsed State */
.app-layout.sidebar-collapsed .sidebar {
	width: 64px;
	min-width: 64px;
}

.app-layout.sidebar-collapsed .main-wrapper {
	margin-left: 64px;
}

.app-layout.sidebar-collapsed .nav-label {
	display: none;
}

.app-layout.sidebar-collapsed .sidebar .toggle-icon {
	transform: rotate(180deg);
}

.app-layout.sidebar-collapsed .nav-item {
	justify-content: center;
	padding-left: 0;
	padding-right: 0;
}

/* Mobile Styles */
@media (max-width: 1023px) {
	.sidebar {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		height: 100dvh; /* Dynamic viewport height for mobile browsers */
		transform: translateX(-100%);
		width: 280px;
		z-index: 50;
		transition: transform 0.3s ease;
		padding-top: env(safe-area-inset-top, 0);
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	.main-wrapper {
		margin-left: 0;
	}

	.app-layout.mobile-menu-open .sidebar {
		transform: translateX(0);
	}

	#sidebarToggle {
		display: none;
	}

	.mobile-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--overlay-bg);
		z-index: 45;
	}
}

/* Tablet styles - ensure sidebar scrolls on iPad */
@media (min-width: 768px) and (max-width: 1023px) {
	.sidebar {
		height: 100dvh;
	}

	.sidebar nav {
		max-height: calc(100dvh - 200px); /* Account for header and user section */
	}
}

@media (min-width: 1024px) {
	#mobileMenuBtn {
		display: none !important;
	}

	.mobile-overlay {
		display: none !important;
	}
}

/* Navigation Items */
.nav-item {
	position: relative;
}

.nav-item svg {
	flex-shrink: 0;
}

/* Active Navigation Indicator */
.nav-item[data-page].bg-gray-700::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 60%;
	background: var(--accent-blue);
	border-radius: 0 var(--radius-2xs) var(--radius-2xs) 0;
}

/* ============================================
   STATUS CARDS - Compact Dashboard Style
   ============================================ */

.status-card-compact {
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: 1rem;
	transition: all 0.2s ease;
}

.status-card-compact:hover {
	border-color: var(--border-light);
}

.status-card-compact.online {
	border-left: 3px solid var(--accent-green);
}

.status-card-compact.offline {
	border-left: 3px solid var(--accent-red);
}

/* Quick Stats Grid */
.quick-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
}

.quick-stat-card {
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: 1.25rem;
}

.quick-stat-value {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;
}

.quick-stat-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
	margin-top: 0.25rem;
}

/* ============================================
   ORIGINAL STYLES
   ============================================ */

/* Status Indicator */
.status-indicator {
	width: 12px;
	height: 12px;
	border-radius: var(--radius-circle);
	display: inline-block;
	margin-right: 8px;
	animation: pulse 2s ease-in-out infinite;
}

.status-indicator.online {
	background-color: var(--accent-green);
	box-shadow: 0 0 8px var(--accent-green-light);
}

.status-indicator.offline {
	background-color: var(--accent-red);
	box-shadow: 0 0 8px var(--accent-red-light);
}

.status-indicator.loading {
	background-color: var(--accent-gray);
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.6;
	}
}

/* Alert Styles */
.alert {
	padding: 1rem 1.5rem;
	border-radius: var(--radius-lg);
	margin-bottom: 1rem;
	animation: slideDown 0.3s ease-out;
}

.alert-success {
	background-color: var(--accent-green-light);
	border: 1px solid var(--accent-green);
	color: var(--accent-green);
}

.alert-error {
	background-color: var(--accent-red-light);
	border: 1px solid var(--accent-red);
	color: var(--accent-red);
}

.alert-info {
	background-color: var(--accent-blue-light);
	border: 1px solid var(--accent-blue);
	color: var(--accent-blue);
}

.alert-warning {
	background-color: var(--accent-yellow-light);
	border: 1px solid var(--accent-yellow);
	color: var(--accent-yellow);
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Flyer Gallery */
.flyer-card {
	position: relative;
	background-color: var(--bg-secondary);
	border: 2px solid var(--border-color);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: all 0.3s ease;
	cursor: pointer;
}

.flyer-card:hover {
	border-color: var(--accent-blue);
	transform: translateY(-4px);
	box-shadow: 0 8px 16px var(--accent-blue-light);
}

.flyer-card.selected {
	border-color: var(--accent-green);
	box-shadow: 0 0 16px var(--accent-green-light);
}

.flyer-card.selected::after {
	content: "✓";
	position: absolute;
	top: 8px;
	right: 8px;
	background-color: var(--accent-green);
	color: var(--text-inverse);
	width: 32px;
	height: 32px;
	border-radius: var(--radius-circle);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: bold;
	box-shadow: 0 2px 8px var(--shadow-color);
	z-index: 10;
}

.flyer-image {
	width: 100%;
	height: 120px;
	object-fit: cover;
	background-color: var(--bg-primary);
}

/* Enhanced Flyer Image Display */
.flyer-image-container {
	position: relative;
	width: 100%;
	height: 160px;
	background-color: var(--bg-primary);
	overflow: hidden;
}

.flyer-image-preview {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.3s ease-in;
}

.flyer-loading {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--bg-primary);
}

.flyer-fallback {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: var(--bg-primary);
}

.flyer-info {
	padding: 0.75rem;
}

.flyer-filename {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.flyer-meta {
	font-size: 0.75rem;
	color: var(--text-muted);
	margin-top: 0.25rem;
}

/* Loading Spinner */
.spinner {
	border: 3px solid var(--border-color);
	border-top: 3px solid var(--accent-blue);
	border-radius: var(--radius-circle);
	width: 24px;
	height: 24px;
	animation: spin 1s linear infinite;
	display: inline-block;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Modal Backdrop Blur */
#uploadModal {
	backdrop-filter: blur(4px);
}

/* Button Loading State */
.btn-loading {
	position: relative;
	pointer-events: none;
	opacity: 0.7;
}

.btn-loading::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	top: 50%;
	left: 50%;
	margin-left: -8px;
	margin-top: -8px;
	border: 2px solid #ffffff;
	border-top-color: transparent;
	border-radius: var(--radius-circle);
	animation: spin 0.8s linear infinite;
}

/* ============================================
   SKELETON LOADING STATES
   Phase 7.8 - Shimmer animations for data loading
   ============================================ */

/* Base skeleton element */
.skeleton {
	background: var(--bg-tertiary);
	border-radius: var(--radius-sm);
	position: relative;
	overflow: hidden;
}

/* Shimmer animation overlay */
.skeleton::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.08) 50%,
		transparent 100%
	);
	animation: skeleton-shimmer 1.5s ease-in-out infinite;
	transform: translateX(-100%);
}

@keyframes skeleton-shimmer {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

/* Light theme shimmer adjustment */
[data-theme="arctic"] .skeleton::after,
[data-theme="rose"] .skeleton::after,
[data-theme="mint"] .skeleton::after,
[data-theme="light"] .skeleton::after {
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(0, 0, 0, 0.04) 50%,
		transparent 100%
	);
}

/* Skeleton text lines */
.skeleton-text {
	height: 14px;
	margin-bottom: 8px;
}
.skeleton-text:last-child { margin-bottom: 0; }
.skeleton-text-sm { height: 12px; }
.skeleton-text-lg { height: 18px; }
.skeleton-text-xl { height: 24px; }
.skeleton-text-2xl { height: 32px; }

/* Width variants */
.skeleton-w-full { width: 100%; }
.skeleton-w-3\/4 { width: 75%; }
.skeleton-w-1\/2 { width: 50%; }
.skeleton-w-1\/3 { width: 33%; }
.skeleton-w-1\/4 { width: 25%; }

/* Skeleton stat card (matches quick-stat-card dimensions) */
.skeleton-stat-card {
	padding: 1rem;
	min-height: 80px;
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
}
.skeleton-stat-card .skeleton-value {
	height: 32px;
	width: 60px;
	margin-bottom: 8px;
}
.skeleton-stat-card .skeleton-label {
	height: 14px;
	width: 80px;
}

/* Skeleton status card (matches status-card-compact) */
.skeleton-status-card {
	padding: 1rem;
	min-height: 72px;
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
}
.skeleton-status-card .skeleton-indicator {
	width: 12px;
	height: 12px;
	border-radius: var(--radius-circle);
	flex-shrink: 0;
}
.skeleton-status-card .skeleton-content { flex: 1; }

/* Skeleton table row */
.skeleton-table-row {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	gap: 16px;
	border-bottom: 1px solid var(--border-color);
}
.skeleton-table-row:last-child { border-bottom: none; }

/* Skeleton match card */
.skeleton-match-card {
	padding: 16px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	margin-bottom: 12px;
	background: var(--bg-secondary);
}
.skeleton-match-card .skeleton-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 12px;
}
.skeleton-match-card .skeleton-players {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Skeleton gallery card (for flyers/sponsors) */
.skeleton-gallery-card {
	aspect-ratio: 16/9;
	border-radius: var(--radius-lg);
	min-height: 140px;
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
}

/* Skeleton list item (activity feed) */
.skeleton-list-item {
	display: flex;
	align-items: center;
	padding: 12px;
	gap: 12px;
	border-bottom: 1px solid var(--border-color);
}
.skeleton-list-item:last-child { border-bottom: none; }
.skeleton-list-item .skeleton-avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-circle);
	flex-shrink: 0;
}

/* Skeleton display card (for Pi displays) */
.skeleton-display-card {
	padding: 16px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	background: var(--bg-secondary);
}

/* Skeleton station card */
.skeleton-station-card {
	padding: 12px;
	min-height: 60px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	background: var(--bg-secondary);
}

/* Container for skeleton groups - handles fade out */
.skeleton-container {
	transition: opacity 300ms ease-out;
}
.skeleton-container.skeleton-hidden {
	opacity: 0;
	pointer-events: none;
}

/* Status Grid Styling */
.bg-gray-750 {
	background-color: var(--bg-tertiary);
}

/* File Upload Drag and Drop */
.file-drop-zone {
	border: 2px dashed var(--border-light);
	border-radius: var(--radius-lg);
	padding: 2rem;
	text-align: center;
	transition: all 0.3s ease;
}

.file-drop-zone.dragover {
	border-color: var(--accent-blue);
	background-color: var(--accent-blue-light);
}

/* Responsive Improvements */
@media (max-width: 768px) {
	.container {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	h1 {
		font-size: 1.75rem;
	}

	h2 {
		font-size: 1.5rem;
	}
}

/* Tournament List Items */
.tournament-item {
	background-color: var(--bg-secondary);
	border: 2px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: 1rem 1.25rem;
	transition: all 0.2s ease;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tournament-item:hover {
	border-color: var(--accent-blue);
	background-color: var(--bg-hover);
}

.tournament-item.selected {
	border-color: var(--accent-green);
	background-color: var(--bg-selected);
	box-shadow: 0 0 12px var(--accent-green-light);
}

.tournament-name {
	font-size: 1rem;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 0.5rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tournament-game {
	font-size: 0.875rem;
	color: var(--text-muted);
	margin-bottom: 0.5rem;
}

.tournament-meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.75rem;
	color: var(--text-muted);
}

.tournament-state {
	display: inline-block;
	padding: 0.25rem 0.5rem;
	border-radius: var(--radius-sm);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
}

.tournament-state.pending {
	background-color: var(--accent-yellow-light);
	color: var(--accent-yellow);
}

.tournament-state.underway {
	background-color: var(--accent-green-light);
	color: var(--accent-green);
}

.tournament-state.complete {
	background-color: var(--accent-gray-light);
	color: var(--text-muted);
}

/* Tabs */
.tab-button {
	color: var(--text-muted);
	border-bottom: 2px solid transparent;
}

.tab-button:hover {
	color: var(--text-primary);
}

.tab-button.active {
	color: var(--accent-blue);
	border-bottom-color: var(--accent-blue);
}

.tournament-list {
	min-height: 200px;
}


/* In-Progress Tournament Widget */
#inProgressTournament {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
}

#inProgressTournament > div:first-child {
	flex: 1;
	min-width: 0; /* Allow shrinking */
}

#inProgressTournament > div:last-child {
	flex-shrink: 0; /* Prevent right side from shrinking */
	margin-left: auto; /* Force to right side */
}

/* Toast Notification (short-lived, in-section) */
.toast {
	padding: 0.75rem 1rem;
	border-radius: var(--radius-lg);
	margin-bottom: 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
	animation: toastSlideDown 0.5s ease-out forwards;
}

.toast-success {
	background-color: var(--accent-green-light);
	border: 2px solid var(--accent-green);
	color: var(--accent-green);
}

.toast-error {
	background-color: var(--accent-red-light);
	border: 2px solid var(--accent-red);
	color: var(--accent-red);
}

.toast-info {
	background-color: var(--accent-blue-light);
	border: 2px solid var(--accent-blue);
	color: var(--accent-blue);
}

/* Exit state - fade out and slide up */
.toast-exit {
	animation: toastSlideUp 0.5s ease-in forwards;
}

/* Entrance animation - slide down and fade in */
@keyframes toastSlideDown {
	0% {
		opacity: 0;
		transform: translateY(-30px) scale(0.9);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Exit animation - slide up and fade out */
@keyframes toastSlideUp {
	0% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translateY(-20px) scale(0.95);
	}
}

/* SortableJS Drag & Drop Styles */
.sortable-ghost {
	opacity: 0.4;
	background-color: var(--accent-blue) !important;
}

.sortable-drag {
	opacity: 1;
	cursor: grabbing !important;
}

.drag-handle {
	font-size: 1.25rem;
	line-height: 1;
}

.drag-handle:active {
	cursor: grabbing;
}

/* Row being dragged */
tr.sortable-chosen {
	background-color: var(--accent-blue-light);
	box-shadow: 0 4px 12px var(--accent-blue-light);
}

/* Display Management Styles */
.display-card {
	transition: all 0.3s ease;
}

.display-card.online {
	border-color: var(--accent-green);
}

.display-card.offline {
	border-color: var(--border-light);
	opacity: 0.7;
}

.display-card button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.display-card button:disabled:hover {
	background-color: inherit;
	transform: none;
}

/* View selector button transitions */
.view-selector button {
	transition: all 0.2s ease;
}

.view-selector button:not(:disabled):hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.view-selector button.active {
	position: relative;
	box-shadow: 0 0 12px var(--accent-blue-light);
}

/* System info grid animations */
.system-info-card {
	transition: transform 0.2s ease;
}

.system-info-card:hover {
	transform: scale(1.05);
}

/* Display refresh indicator pulse */
@keyframes refreshPulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

.auto-refresh-active {
	animation: refreshPulse 2s ease-in-out infinite;
}

/* ============================================
   PWA MOBILE STYLES
   ============================================ */

/* Standalone mode adjustments (when installed as PWA) */
@media (display-mode: standalone) {
	body {
		/* Prevent overscroll bounce on iOS */
		overscroll-behavior: none;
	}

	.main-content {
		/* Add safe area insets for notched devices */
		padding-bottom: env(safe-area-inset-bottom, 1.5rem);
	}
}

/* PWA standalone mode indicator */
.pwa-standalone .sidebar {
	padding-top: env(safe-area-inset-top, 0);
}

/* Touch-friendly improvements */
@media (pointer: coarse) {
	/* Larger touch targets */
	.nav-item {
		min-height: 48px;
	}

	button,
	.btn,
	select,
	input[type="checkbox"],
	input[type="radio"] {
		min-height: 44px;
		min-width: 44px;
	}

	/* Larger form inputs on mobile */
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="number"],
	textarea,
	select {
		font-size: 16px; /* Prevents iOS zoom on focus */
		padding: 0.75rem 1rem;
	}

	/* Better tap targets for match cards */
	.tournament-item {
		padding: 1rem 1.25rem;
	}

	/* Station dropdown larger on mobile */
	.station-dropdown {
		min-height: 48px;
	}
}

/* Mobile improvements */
@media (max-width: 640px) {
	/* Quick Actions grid on mobile */
	.quick-actions-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Status cards stack better */
	.status-card-compact {
		padding: 0.75rem;
	}

	/* Quick stat cards */
	.quick-stat-value {
		font-size: 1.5rem;
	}

	/* Match cards on mobile */
	.match-card {
		padding: 0.75rem;
	}

	/* Ticker message section */
	#tickerMessage {
		font-size: 16px;
	}

	/* Modal improvements */
	.modal-content {
		margin: 1rem;
		max-height: calc(100vh - 2rem);
	}

	/* Score modal buttons */
	.score-btn {
		min-width: 48px;
		min-height: 48px;
		font-size: 1.25rem;
	}

	/* Table horizontal scroll */
	.table-container {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Participant table adjustments */
	#participantTable th,
	#participantTable td {
		padding: 0.5rem;
		font-size: 0.875rem;
	}

	/* Hide less important columns on mobile */
	.hide-on-mobile {
		display: none;
	}

	/* Action buttons stack on mobile */
	.action-buttons {
		flex-direction: column;
		gap: 0.5rem;
	}

	/* Full width buttons on mobile */
	.btn-mobile-full {
		width: 100%;
	}
}

/* Tablet adjustments */
@media (min-width: 641px) and (max-width: 1023px) {
	.main-content {
		padding: 1rem;
	}

	/* 2-column grid for quick actions */
	.quick-actions-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* PWA Update Banner positioning */
#pwa-update-banner {
	animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* PWA Offline Banner */
#pwa-offline-banner {
	animation: slideDown 0.3s ease-out;
}

/* Prevent text selection on interactive elements */
.no-select {
	-webkit-user-select: none;
	user-select: none;
}

/* Pull to refresh indicator (for future enhancement) */
.pull-to-refresh-indicator {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%) translateY(-100%);
	padding: 0.5rem 1rem;
	background: var(--accent-blue);
	color: var(--text-inverse);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	font-size: 0.875rem;
	transition: transform 0.2s ease;
	z-index: 100;
}

.pull-to-refresh-indicator.visible {
	transform: translateX(-50%) translateY(0);
}

/* ============================================
   ANALYTICS PAGE
   ============================================ */

/* Background for nested sections */
.bg-gray-750 {
	background-color: var(--bg-secondary);
}

/* Tab content visibility */
.tab-content {
	display: block;
}

.tab-content.hidden {
	display: none;
}

/* Scrollbar styling for analytics */
.analytics-scroll::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.analytics-scroll::-webkit-scrollbar-track {
	background: var(--bg-secondary);
	border-radius: var(--radius-xs);
}

.analytics-scroll::-webkit-scrollbar-thumb {
	background: var(--border-light);
	border-radius: var(--radius-xs);
}

.analytics-scroll::-webkit-scrollbar-thumb:hover {
	background: var(--text-muted);
}

/* ApexCharts theme-aware fixes */
.apexcharts-tooltip {
	background: var(--bg-secondary) !important;
	border: 1px solid var(--border-color) !important;
}

.apexcharts-tooltip-title {
	background: var(--bg-tertiary) !important;
	border-bottom: 1px solid var(--border-light) !important;
}

.apexcharts-xaxistooltip {
	background: var(--bg-secondary) !important;
	border: 1px solid var(--border-color) !important;
}

.apexcharts-yaxistooltip {
	background: var(--bg-secondary) !important;
	border: 1px solid var(--border-color) !important;
}

/* Hover effect for table rows */
.hover\:bg-gray-750:hover {
	background-color: var(--bg-tertiary);
}

/* ============================================
   MOBILE RESPONSIVE ENHANCEMENTS
   ============================================ */

/* Score Modal - Touch Optimized */
@media (max-width: 640px) {
	/* Score modal full screen */
	#scoreModal > div {
		margin: 0;
		max-width: 100%;
		width: 100%;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
	}

	/* Score modal content scrollable */
	#scoreModalContent {
		flex: 1;
		overflow-y: auto;
	}

	/* Larger score adjustment buttons */
	#scoreModal button[onclick^="adjustScore"] {
		min-width: 56px;
		min-height: 56px;
		font-size: 1.5rem;
	}

	/* Larger score input fields */
	#scoreModal input[type="number"] {
		width: 80px;
		height: 64px;
		font-size: 2rem;
	}

	/* Quick winner buttons - full width stacked */
	#scoreModal .grid.grid-cols-2 {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	/* Larger winner/forfeit buttons */
	#scoreModal button[onclick^="quickWinner"],
	#scoreModal button[onclick^="forfeitMatch"] {
		padding: 1rem;
		font-size: 1rem;
	}

	/* Player name sections stack on mobile */
	#scoreModal .border-t .grid.grid-cols-2 {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	/* Score entry player section centered */
	#scoreModal .text-center {
		padding: 0.5rem 0;
	}

	/* Declare winner button larger */
	#scoreModal button[onclick="declareWinnerByScore()"] {
		padding: 1rem;
		font-size: 1.125rem;
	}

	/* Bottom buttons stack */
	#scoreModal .flex.gap-4.mb-3 {
		flex-direction: column;
		gap: 0.75rem;
	}
}

/* Match Filters - Horizontal Scroll on Mobile */
@media (max-width: 640px) {
	/* Filter buttons container */
	.match-filters,
	#matchSection .flex.gap-2 {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
		padding-bottom: 0.5rem;
		margin-bottom: 0.5rem;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.match-filters::-webkit-scrollbar,
	#matchSection .flex.gap-2::-webkit-scrollbar {
		display: none;
	}

	/* Filter buttons don't shrink */
	.filter-btn {
		flex-shrink: 0;
	}

	/* Match section header stacks */
	#matchSection .flex.items-center.justify-between {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}
}

/* Match Cards - Mobile Optimized */
@media (max-width: 640px) {
	/* Match card layout */
	.match-card {
		padding: 1rem;
	}

	/* Match card internal layout */
	.match-card > .flex {
		flex-direction: column;
		gap: 0.75rem;
	}

	/* Match info full width */
	.match-card .match-info {
		width: 100%;
	}

	/* Match actions full width, wrap */
	.match-card .match-actions,
	.match-card .flex.gap-2:last-child {
		width: 100%;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	/* Station dropdown full width */
	.match-card select,
	.station-dropdown {
		width: 100%;
		min-height: 48px;
	}

	/* Action buttons grow to fill */
	.match-card .match-actions button {
		flex: 1;
		min-width: calc(50% - 0.25rem);
	}
}

/* Participant Table - Card View on Mobile */
@media (max-width: 768px) {
	/* Hide table on mobile, show when larger */
	#participantTable .hide-on-mobile,
	#participantTable th.hide-on-mobile,
	#participantTable td.hide-on-mobile {
		display: none;
	}

	/* Compact table cells */
	#participantTable th,
	#participantTable td {
		padding: 0.5rem 0.375rem;
		font-size: 0.8125rem;
	}

	/* Seed column narrower */
	#participantTable th:first-child,
	#participantTable td:first-child {
		width: 60px;
	}

	/* Actions column compact */
	#participantTable th:last-child,
	#participantTable td:last-child {
		width: auto;
	}

	/* Action buttons in table */
	#participantTable .flex.gap-2 {
		flex-wrap: wrap;
		gap: 0.25rem;
	}

	#participantTable button {
		padding: 0.375rem 0.5rem;
		font-size: 0.75rem;
	}
}

/* Participant Cards - Alternative Mobile View */
.participant-card {
	display: none;
}

@media (max-width: 480px) {
	/* Show cards, hide table on very small screens */
	#tableContainer.use-cards table {
		display: none;
	}

	#tableContainer.use-cards .participant-cards-container {
		display: block;
	}

	.participant-card {
		display: block;
		background: var(--bg-secondary);
		border: 1px solid var(--border-color);
		border-radius: var(--radius-lg);
		padding: 1rem;
		margin-bottom: 0.75rem;
	}

	.participant-card.checked-in {
		border-left: 3px solid var(--accent-green);
	}

	.participant-card .card-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 0.5rem;
	}

	.participant-card .card-seed {
		background: var(--bg-tertiary);
		color: var(--text-primary);
		padding: 0.25rem 0.5rem;
		border-radius: var(--radius-sm);
		font-weight: 600;
		font-size: 0.875rem;
	}

	.participant-card .card-name {
		font-weight: 600;
		color: var(--text-primary);
		font-size: 1rem;
	}

	.participant-card .card-meta {
		font-size: 0.75rem;
		color: var(--text-muted);
		margin-top: 0.25rem;
	}

	.participant-card .card-actions {
		display: flex;
		gap: 0.5rem;
		margin-top: 0.75rem;
		flex-wrap: wrap;
	}

	.participant-card .card-actions button {
		flex: 1;
		min-width: calc(50% - 0.25rem);
		padding: 0.5rem;
		font-size: 0.875rem;
	}
}

/* Actions Bar - Mobile Responsive */
@media (max-width: 640px) {
	/* Actions bar on participants page */
	#participantsPage .flex.flex-wrap.gap-3,
	section .flex.flex-wrap.gap-3 {
		gap: 0.5rem;
	}

	/* Action buttons smaller */
	section .flex.flex-wrap.gap-3 button {
		padding: 0.5rem 0.75rem;
		font-size: 0.8125rem;
	}

	/* Search input full width */
	#searchInput {
		width: 100%;
		margin-bottom: 0.5rem;
	}
}

/* Dashboard Stats Grid - Responsive */
@media (max-width: 640px) {
	/* Stats grid 2x2 on mobile */
	#statsSection .grid.grid-cols-2.md\:grid-cols-4,
	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
	}

	/* Stat cards compact */
	#statsSection .bg-gray-800 {
		padding: 0.75rem;
	}

	#statsSection .text-3xl {
		font-size: 1.5rem;
	}

	#statsSection .text-sm {
		font-size: 0.75rem;
	}

	/* Quick stats grid */
	.quick-stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
	}

	.quick-stat-value {
		font-size: 1.5rem;
	}

	.quick-stat-label {
		font-size: 0.6875rem;
	}
}

/* Dashboard Ticker Section - Mobile */
@media (max-width: 640px) {
	/* Ticker presets wrap */
	.ticker-presets,
	#tickerPresets {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.ticker-presets button,
	#tickerPresets button {
		flex: 1;
		min-width: calc(50% - 0.25rem);
		padding: 0.5rem;
		font-size: 0.8125rem;
	}

	/* Ticker input and button stack */
	.ticker-controls,
	#tickerSection .flex.gap-2 {
		flex-direction: column;
	}

	#tickerMessage {
		width: 100%;
	}

	/* Timer controls */
	#timerSection .grid {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	/* DQ timer buttons stack */
	#timerSection .flex.gap-2 {
		flex-direction: column;
	}

	#timerSection button {
		width: 100%;
	}
}

/* Dashboard QR Section - Mobile */
@media (max-width: 640px) {
	#qrSection .flex.gap-2 {
		flex-wrap: wrap;
	}

	#qrSection button {
		flex: 1;
		min-width: calc(50% - 0.25rem);
	}

	#qrSection input {
		width: 100%;
		margin-bottom: 0.5rem;
	}
}

/* Full Screen Modals on Mobile */
@media (max-width: 640px) {
	/* Generic modal full screen */
	.modal-fullscreen,
	#addParticipantModal > div,
	#editParticipantModal > div,
	#bulkAddModal > div,
	#underwayModal > div {
		margin: 0;
		max-width: 100%;
		width: 100%;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
		overflow-y: auto;
	}

	/* Modal header sticky */
	.modal-fullscreen .modal-header,
	#addParticipantModal h3,
	#editParticipantModal h3,
	#bulkAddModal h3 {
		position: sticky;
		top: 0;
		background: var(--bg-secondary);
		z-index: 10;
		padding: 1rem;
		margin: -1.5rem -1.5rem 1rem -1.5rem;
		border-bottom: 1px solid var(--border-color);
	}

	/* Modal content padding adjustment */
	#addParticipantModal > div,
	#editParticipantModal > div,
	#bulkAddModal > div {
		padding: 1.5rem;
		padding-top: 0;
	}

	/* Modal form spacing */
	#addParticipantModal .space-y-4,
	#editParticipantModal .space-y-4,
	#bulkAddModal .space-y-4 {
		padding-top: 1rem;
	}

	/* Modal buttons sticky bottom */
	#addParticipantModal .flex.gap-3.pt-2,
	#editParticipantModal .flex.gap-3.pt-2,
	#bulkAddModal .flex.gap-3.pt-2 {
		position: sticky;
		bottom: 0;
		background: var(--bg-secondary);
		padding: 1rem 0;
		margin: 0 -1.5rem;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
		border-top: 1px solid var(--border-color);
	}

	/* Bulk add textarea taller on mobile */
	#bulkAddTextarea {
		min-height: 200px;
	}
}

/* Station Management - Mobile */
@media (max-width: 768px) {
	/* Station section grid stacks */
	#stationSection .grid.grid-cols-1.md\:grid-cols-2 {
		grid-template-columns: 1fr;
	}

	/* Add station form */
	#stationSection .flex.gap-2 {
		flex-direction: column;
	}

	#stationSection input,
	#stationSection button {
		width: 100%;
	}
}

/* Tournament Page - Mobile */
@media (max-width: 640px) {
	/* Tournament selection grid */
	.grid.grid-cols-1.md\:grid-cols-3 {
		grid-template-columns: 1fr;
	}

	/* Tournament tabs scroll */
	.tournament-tabs,
	.flex.border-b.border-gray-700 {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.tournament-tabs::-webkit-scrollbar {
		display: none;
	}

	/* Tab buttons don't shrink */
	.tab-button {
		flex-shrink: 0;
		white-space: nowrap;
	}

	/* Tournament item compact */
	.tournament-item {
		padding: 0.75rem 1rem;
	}

	.tournament-name {
		font-size: 0.9375rem;
	}

	/* Tournament controls stack */
	.tournament-controls,
	.flex.gap-2.mt-4 {
		flex-direction: column;
	}

	.tournament-controls button {
		width: 100%;
	}
}

/* Settings Page - Mobile */
@media (max-width: 640px) {
	/* Settings tabs scroll */
	#settingsTabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
		scrollbar-width: none;
	}

	#settingsTabs::-webkit-scrollbar {
		display: none;
	}

	/* Settings section */
	.settings-section {
		padding: 1rem;
	}

	/* Form grid stacks */
	.settings-section .grid.grid-cols-2 {
		grid-template-columns: 1fr;
	}
}

/* Displays Page - Mobile */
@media (max-width: 768px) {
	/* Display cards stack */
	.display-card .grid.grid-cols-4 {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
	}

	/* View selector buttons wrap */
	.view-selector {
		flex-wrap: wrap;
	}

	.view-selector button {
		flex: 1;
		min-width: calc(33% - 0.5rem);
	}

	/* Bracket controls stack */
	#bracketControls .flex.gap-4 {
		flex-direction: column;
	}

	/* Zoom slider full width */
	#bracketControls input[type="range"] {
		width: 100%;
	}
}

/* Analytics Page - Mobile */
@media (max-width: 640px) {
	/* Game tabs scroll */
	#gameTabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	#gameTabs::-webkit-scrollbar {
		display: none;
	}

	/* Content tabs scroll */
	.content-tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Stats overview 2x2 */
	#statsOverview .grid.grid-cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Rankings table compact */
	#rankingsTable th,
	#rankingsTable td {
		padding: 0.5rem 0.375rem;
		font-size: 0.8125rem;
	}
}

/* Flyers Page - Mobile */
@media (max-width: 640px) {
	/* Flyer gallery 2 columns */
	#flyerGallery {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
	}

	/* Flyer card compact */
	.flyer-card {
		padding: 0;
	}

	.flyer-info {
		padding: 0.5rem;
	}

	.flyer-filename {
		font-size: 0.75rem;
	}

	/* Upload form stack */
	#uploadForm .flex.gap-4 {
		flex-direction: column;
	}

	#uploadForm input,
	#uploadForm button {
		width: 100%;
	}
}

/* Login Page - Mobile */
@media (max-width: 640px) {
	#loginForm {
		padding: 1.5rem;
		margin: 1rem;
	}

	#loginForm input {
		font-size: 16px; /* Prevents iOS zoom */
	}
}

/* Touch-friendly utility classes */
@media (pointer: coarse) {
	/* Ensure all interactive elements are touch-friendly */
	.touch-target {
		min-height: 44px;
		min-width: 44px;
	}

	/* Drag handles larger on touch */
	.drag-handle {
		padding: 0.75rem;
		font-size: 1.5rem;
	}

	/* Checkboxes larger on touch */
	input[type="checkbox"] {
		width: 20px;
		height: 20px;
	}

	/* Radio buttons larger on touch */
	input[type="radio"] {
		width: 20px;
		height: 20px;
	}
}

/* Swipe indicator for horizontal scroll areas */
.scroll-hint {
	position: relative;
}

.scroll-hint::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 20px;
	background: linear-gradient(to right, transparent, var(--bg-secondary));
	pointer-events: none;
}

/* Hide scroll hint when scrolled */
.scroll-hint.scrolled::after {
	display: none;
}

/* ============================================
   SPONSOR MANAGEMENT PAGE
   ============================================ */

/* Sponsor card styles */
.sponsor-card {
	transition: all 0.3s ease;
}

.sponsor-card:hover {
	border-color: var(--accent-blue);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px var(--accent-blue-light);
}

/* ============================================
   SPONSORS PAGE (scoped to body[data-page="Sponsors"])
   Moved from sponsors.html inline \3c style> block 2026-04-06 audit LOW-1/LOW-2.
   Uses theme variables so arctic/cream/rose/sky/mint light themes render
   correctly instead of dark-only hardcoded hex.
   ============================================ */

body[data-page="Sponsors"] .preview-panel {
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
	position: relative;
	overflow: hidden;
	border: 1px solid var(--border-color);
	/* Default proportions; sponsors.js renderPreview() overrides these from SPONSOR_SAFE_ZONES. */
	--preview-corner-w: 18%;
	--preview-corner-h: 20%;
	--preview-edge-margin: 4%;
	--preview-bottom-margin: 10%;
}

body[data-page="Sponsors"] .preview-corner {
	position: absolute;
	width: var(--preview-corner-w);
	height: var(--preview-corner-h);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px dashed var(--border-color);
	border-radius: var(--radius-sm);
	font-size: 10px;
	color: var(--text-muted);
	transition: all 0.3s ease;
	background: rgba(0, 0, 0, 0.2);
}

body[data-page="Sponsors"] .preview-corner.occupied {
	border-color: var(--accent-green);
	background: var(--accent-green-light, rgba(16, 185, 129, 0.12));
}

body[data-page="Sponsors"] .preview-corner img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

body[data-page="Sponsors"] .preview-corner.top-left    { top: var(--preview-edge-margin); left: var(--preview-edge-margin); }
body[data-page="Sponsors"] .preview-corner.top-right   { top: var(--preview-edge-margin); right: var(--preview-edge-margin); }
body[data-page="Sponsors"] .preview-corner.bottom-left { bottom: var(--preview-bottom-margin); left: var(--preview-edge-margin); }
body[data-page="Sponsors"] .preview-corner.bottom-right{ bottom: var(--preview-bottom-margin); right: var(--preview-edge-margin); }

/* Corner picker (upload modal + corner change modal) */
body[data-page="Sponsors"] .corner-picker {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	max-width: 240px;
}

body[data-page="Sponsors"] .corner-option {
	padding: 8px 12px;
	border: 2px solid var(--border-color);
	border-radius: var(--radius-md);
	background: var(--bg-secondary);
	color: var(--text-secondary);
	cursor: pointer;
	text-align: center;
	font-size: 12px;
	font-family: inherit;
	transition: all 0.2s ease;
}

body[data-page="Sponsors"] .corner-option:hover:not([aria-disabled="true"]) {
	border-color: var(--accent-blue);
	color: var(--text-primary);
}

body[data-page="Sponsors"] .corner-option:focus-visible {
	outline: 2px solid var(--accent-blue);
	outline-offset: 2px;
}

body[data-page="Sponsors"] .corner-option.selected {
	border-color: var(--accent-blue);
	background: var(--accent-blue);
	color: #fff;
}

body[data-page="Sponsors"] .corner-option[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	border-color: var(--border-color);
}

body[data-page="Sponsors"] .corner-option__status {
	display: block;
	font-size: 10px;
	color: var(--accent-red);
	margin-top: 2px;
}

/* Sponsor cards on this page (overrides minimum .sponsor-card rules above) */
body[data-page="Sponsors"] .sponsor-card {
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: 16px;
}

body[data-page="Sponsors"] .sponsor-card:hover {
	border-color: var(--border-light, var(--accent-blue));
}

body[data-page="Sponsors"] .sponsor-card.inactive {
	opacity: 0.6;
}

body[data-page="Sponsors"] .sponsor-card .corner-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	background: var(--bg-tertiary);
	border-radius: var(--radius-sm);
	font-size: 11px;
	color: var(--text-muted);
}

body[data-page="Sponsors"] .sponsor-card .corner-badge.active {
	background: var(--accent-green-light, rgba(16, 185, 129, 0.2));
	color: var(--accent-green);
}

/* Upload tile */
body[data-page="Sponsors"] .upload-card {
	background: var(--bg-secondary);
	border: 2px dashed var(--border-color);
	border-radius: var(--radius-lg);
	padding: 24px;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	color: var(--text-secondary);
	font-family: inherit;
}

body[data-page="Sponsors"] .upload-card:hover {
	border-color: var(--accent-blue);
	background: var(--bg-selected, var(--bg-hover));
}

/* Position filter tabs */
.position-tab {
	transition: all 0.2s ease;
}

.position-tab.active {
	box-shadow: 0 0 8px var(--accent-blue-light);
}

/* Sponsor gallery responsive */
@media (max-width: 640px) {
	#sponsorGallery {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
	}

	.sponsor-card .p-3 {
		padding: 0.5rem;
	}

	.sponsor-card h3 {
		font-size: 0.875rem;
	}

	/* Upload form stacks on mobile */
	#uploadForm .grid {
		grid-template-columns: 1fr;
	}

	/* Position filter tabs scroll horizontally */
	.position-tabs-container {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.position-tabs-container::-webkit-scrollbar {
		display: none;
	}

	.position-tab {
		flex-shrink: 0;
		white-space: nowrap;
	}
}

/* Range slider styling - consistent across all sliders */
input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	cursor: pointer;
}

/* Slider track - WebKit (Chrome, Safari, Edge) */
input[type="range"]::-webkit-slider-runnable-track {
	background: #4b5563;
	height: 0.5rem;
	border-radius: var(--radius-sm);
	border: 1px solid #6b7280;
}

/* Slider track - Firefox */
input[type="range"]::-moz-range-track {
	background: #4b5563;
	height: 0.5rem;
	border-radius: var(--radius-sm);
	border: 1px solid #6b7280;
}

/* Slider thumb - WebKit */
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	background: var(--accent-blue);
	height: 1.25rem;
	width: 1.25rem;
	border-radius: var(--radius-circle);
	margin-top: -0.375rem;
	transition: transform 0.15s ease;
	border: 2px solid #1e40af;
}

input[type="range"]::-webkit-slider-thumb:hover {
	transform: scale(1.1);
	background: #2563eb;
}

/* Slider thumb - Firefox */
input[type="range"]::-moz-range-thumb {
	background: var(--accent-blue);
	height: 1.25rem;
	width: 1.25rem;
	border-radius: var(--radius-circle);
	border: 2px solid #1e40af;
	transition: transform 0.15s ease;
}

input[type="range"]::-moz-range-thumb:hover {
	transform: scale(1.1);
	background: #2563eb;
}

/* Config panel styling */
.bg-gray-750 {
	background-color: var(--bg-tertiary);
}

/* ==========================================
   Cache Indicators
   ========================================== */

.cache-indicator {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: var(--radius-xl);
	font-size: 0.75rem;
	font-weight: 500;
}

.cache-indicator svg {
	width: 12px;
	height: 12px;
}

.cache-indicator-text {
	font-size: 0.7rem;
}

/* Cache status colors */
.cache-fresh {
	background-color: rgba(16, 185, 129, 0.15);
	color: #10b981;
	border: 1px solid rgba(16, 185, 129, 0.3);
}

.cache-hit {
	background-color: rgba(59, 130, 246, 0.15);
	color: #3b82f6;
	border: 1px solid rgba(59, 130, 246, 0.3);
}

.cache-stale {
	background-color: rgba(245, 158, 11, 0.15);
	color: #f59e0b;
	border: 1px solid rgba(245, 158, 11, 0.3);
}

.cache-offline {
	background-color: rgba(249, 115, 22, 0.15);
	color: #f97316;
	border: 1px solid rgba(249, 115, 22, 0.3);
}

.cache-unknown {
	background-color: rgba(107, 114, 128, 0.15);
	color: #6b7280;
	border: 1px solid rgba(107, 114, 128, 0.3);
}

/* Compact cache badge (dot only) */
.cache-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: var(--radius-circle);
	cursor: help;
}

.cache-dot {
	width: 8px;
	height: 8px;
	border-radius: var(--radius-circle);
}

.cache-fresh .cache-dot {
	background-color: #10b981;
	box-shadow: 0 0 4px rgba(16, 185, 129, 0.5);
}

.cache-hit .cache-dot {
	background-color: #3b82f6;
	box-shadow: 0 0 4px rgba(59, 130, 246, 0.5);
}

.cache-stale .cache-dot {
	background-color: #f59e0b;
	box-shadow: 0 0 4px rgba(245, 158, 11, 0.5);
}

.cache-offline .cache-dot {
	background-color: #f97316;
	box-shadow: 0 0 4px rgba(249, 115, 22, 0.5);
	animation: pulse 1s infinite;
}

.cache-unknown .cache-dot {
	background-color: #6b7280;
}

/* Cache status card for settings page */
.cache-stats-card {
	background-color: var(--bg-secondary);
	border-radius: var(--radius-lg);
	padding: 16px;
	border: 1px solid var(--border-color);
}

.cache-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 12px;
}

.cache-stat-item {
	text-align: center;
	padding: 8px;
	background-color: var(--bg-tertiary);
	border-radius: var(--radius-md);
}

.cache-stat-value {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--text-primary);
}

.cache-stat-label {
	font-size: 0.75rem;
	color: var(--text-secondary);
	margin-top: 4px;
}

/* Light mode overrides for cache indicators */
[data-theme="light"] .cache-indicator {
	font-weight: 600;
}

[data-theme="light"] .cache-fresh {
	background-color: rgba(16, 185, 129, 0.1);
}

[data-theme="light"] .cache-hit {
	background-color: rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .cache-stale {
	background-color: rgba(245, 158, 11, 0.1);
}

[data-theme="light"] .cache-offline {
	background-color: rgba(249, 115, 22, 0.1);
}

/* =============================================================================
   COMMAND CENTER STYLES
   ============================================================================= */

/* Header */
.cc-header {
	position: sticky;
	top: 0;
	z-index: 30;
}

/* 4-Quadrant Grid */
.cc-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 1rem;
	height: calc(100vh - 120px);
	min-height: 500px;
}

/* Individual Quadrant */
.cc-quadrant {
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.cc-quadrant-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--border-color);
	flex-shrink: 0;
	background-color: var(--bg-tertiary);
}

.cc-quadrant-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-primary);
}

.cc-quadrant-badge {
	background-color: var(--accent-blue);
	color: white;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.125rem 0.5rem;
	border-radius: var(--radius-pill);
	min-width: 1.5rem;
	text-align: center;
}

.cc-quadrant-content {
	flex: 1;
	overflow-y: auto;
	padding: 0.75rem;
}

/* Empty State */
.cc-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 100px;
	text-align: center;
}

/* Match Cards */
.cc-match-card {
	background-color: var(--bg-tertiary);
	border: 2px solid transparent;
	border-radius: var(--radius-lg);
	padding: 0.75rem;
	margin-bottom: 0.5rem;
	cursor: pointer;
	transition: all 0.15s ease;
}

.cc-match-card:hover {
	border-color: var(--accent-blue);
}

.cc-match-card.selected {
	border-color: var(--accent-blue);
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.cc-match-card.underway {
	border-left: 4px solid var(--accent-green);
}

.cc-match-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
	font-size: 0.75rem;
	flex-wrap: wrap;
}

.cc-match-round {
	color: var(--text-secondary);
	font-weight: 500;
}

.cc-match-station {
	background-color: var(--accent-blue-light);
	color: var(--accent-blue);
	padding: 0.125rem 0.375rem;
	border-radius: var(--radius-sm);
	font-weight: 500;
}

.cc-tv-badge {
	background-color: #dc2626;
	color: white;
	padding: 0.125rem 0.5rem;
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	animation: tv-badge-pulse 2s ease-in-out infinite;
}

@keyframes tv-badge-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}

.cc-play-order {
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	color: white;
	padding: 0.125rem 0.5rem;
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	margin-right: 0.5rem;
}

.cc-match-elapsed {
	color: var(--accent-green);
	margin-left: auto;
	font-weight: 500;
}

.cc-match-players {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.cc-player {
	flex: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-width: 0;
}

.cc-player-name {
	color: #f3f4f6 !important;  /* Force light text for dark mode */
	font-weight: 500;
	font-size: 0.875rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 120px;
	min-width: 30px;
	flex: 1;
}

/* Light mode override for player names */
[data-theme="light"] .cc-player-name {
	color: #111827 !important;
}

.cc-player-score {
	color: var(--text-secondary);
	font-weight: 600;
	font-size: 1rem;
	flex-shrink: 0;
}

.cc-vs {
	color: var(--text-muted);
	font-size: 0.75rem;
	flex-shrink: 0;
}

.cc-match-actions {
	margin-top: 0.5rem;
	display: flex;
	gap: 0.5rem;
}

/* Keyboard hint */
.cc-key-hint {
	background-color: var(--bg-primary);
	color: var(--text-muted);
	font-size: 0.625rem;
	font-weight: 600;
	padding: 0.125rem 0.375rem;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-color);
	margin-left: auto;
}

/* Command Center Buttons */
.cc-btn {
	padding: 0.375rem 0.75rem;
	border-radius: var(--radius-md);
	font-size: 0.75rem;
	font-weight: 500;
	transition: all 0.15s ease;
	cursor: pointer;
	border: none;
}

.cc-btn-primary {
	background-color: var(--accent-blue);
	color: white;
}

.cc-btn-primary:hover {
	background-color: var(--accent-blue-hover);
}

.cc-btn-secondary {
	background-color: var(--bg-primary);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
}

.cc-btn-secondary:hover {
	background-color: var(--bg-hover);
}

.cc-btn-warning {
	background-color: #ca8a04;
	color: white;
}

.cc-btn-warning:hover {
	background-color: #a16207;
}

.cc-btn-success {
	background-color: #16a34a;
	color: white;
}

.cc-btn-success:hover {
	background-color: #15803d;
}

.cc-btn-sm {
	padding: 0.25rem 0.5rem;
	font-size: 0.7rem;
}

/* Wait Estimate Badge (Phase 14.1) */
.cc-wait-estimate {
	font-size: 0.7rem;
	color: #9ca3af;
	font-style: italic;
}

/* Keyboard Shortcut Hints (Phase 14.1) */
.cc-shortcut-hints {
	font-size: 0.7rem;
	color: var(--text-muted, #6b7280);
	text-align: center;
	margin-top: 4px;
}

.cc-shortcut-hints kbd {
	background: rgba(255,255,255,0.1);
	padding: 1px 4px;
	border-radius: var(--radius-xs);
	font-family: var(--font-mono);
	font-size: 0.65rem;
}

/* System Status Grid */
.cc-status-grid {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.cc-status-section {
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--border-color);
}

.cc-status-section:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.cc-status-label {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.5rem;
}

.cc-status-items {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.cc-status-item {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.875rem;
	color: var(--text-primary);
}

.cc-status-mode {
	font-weight: 600;
	font-size: 0.75rem;
	padding: 0.125rem 0.5rem;
	border-radius: var(--radius-sm);
}

.cc-mode-idle {
	background-color: var(--accent-gray-light);
	color: var(--accent-gray);
}

.cc-mode-upcoming {
	background-color: var(--accent-yellow-light);
	color: var(--accent-yellow);
}

.cc-mode-active {
	background-color: var(--accent-green-light);
	color: var(--accent-green);
}

/* Progress Bar */
.cc-progress-bar {
	height: 0.5rem;
	background-color: var(--bg-tertiary);
	border-radius: var(--radius-pill);
	overflow: hidden;
	margin-bottom: 0.5rem;
}

.cc-progress-fill {
	height: 100%;
	background-color: var(--accent-green);
	transition: width 0.3s ease;
}

/* Dashboard Tournament Progress Bar - Phase 7.6 */
#tournamentProgressSection .progress-bar {
	height: 0.625rem;
	background-color: var(--bg-tertiary);
	border-radius: var(--radius-pill);
	overflow: hidden;
}

#progressFill {
	height: 100%;
	background: linear-gradient(90deg, #22c55e, #4ade80);
	border-radius: var(--radius-pill);
	transition: width 0.5s ease-out;
}

/* Recent Tournaments Dropdown - Phase 7.7 */
[data-theme="light"] #recentTournamentsPanel,
[data-theme="arctic"] #recentTournamentsPanel,
[data-theme="rose"] #recentTournamentsPanel,
[data-theme="mint"] #recentTournamentsPanel {
	background-color: var(--bg-secondary);
	border-color: var(--border-color);
}

[data-theme="light"] #tournamentSearchInput,
[data-theme="arctic"] #tournamentSearchInput,
[data-theme="rose"] #tournamentSearchInput,
[data-theme="mint"] #tournamentSearchInput {
	background-color: var(--bg-tertiary);
	border-color: var(--border-color);
	color: var(--text-primary);
}

[data-theme="light"] #recentTournamentsPanel .tournament-item:hover,
[data-theme="arctic"] #recentTournamentsPanel .tournament-item:hover,
[data-theme="rose"] #recentTournamentsPanel .tournament-item:hover,
[data-theme="mint"] #recentTournamentsPanel .tournament-item:hover {
	background-color: var(--bg-tertiary);
}

/* Favorite star animation */
.favorite-star {
	transition: transform 0.2s ease, color 0.2s ease;
}

.favorite-star:hover {
	transform: scale(1.2);
}

.favorite-star.active {
	color: #fbbf24;
}

/* Quick Actions Grid */
.cc-actions-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
}

.cc-action-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	padding: 0.75rem;
	background-color: var(--bg-tertiary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	color: var(--text-primary);
	font-size: 0.75rem;
	font-weight: 500;
	transition: all 0.15s ease;
	min-height: 70px;
	text-decoration: none;
	cursor: pointer;
}

.cc-action-btn:hover {
	background-color: var(--bg-hover);
	border-color: var(--accent-blue);
}

.cc-action-btn svg {
	color: var(--text-secondary);
}

.cc-action-btn:hover svg {
	color: var(--accent-blue);
}

.cc-action-btn-success {
	background-color: rgba(16, 185, 129, 0.2);
	border-color: rgb(16, 185, 129);
}

.cc-action-btn-success:hover {
	background-color: rgba(16, 185, 129, 0.3);
	border-color: rgb(5, 150, 105);
}

.cc-action-btn-success svg {
	color: rgb(16, 185, 129);
}

.cc-action-btn-success:hover svg {
	color: rgb(52, 211, 153);
}

/* Danger button (Panic/Emergency) */
.cc-action-btn-danger {
	background-color: rgba(239, 68, 68, 0.2);
	border-color: rgb(239, 68, 68);
}

.cc-action-btn-danger:hover {
	background-color: rgba(239, 68, 68, 0.4);
	border-color: rgb(220, 38, 38);
}

.cc-action-btn-danger svg {
	color: rgb(239, 68, 68);
}

.cc-action-btn-danger:hover svg {
	color: rgb(248, 113, 113);
}

/* Warning button (Resume from emergency) */
.cc-action-btn-warning {
	background-color: rgba(245, 158, 11, 0.3);
	border-color: rgb(245, 158, 11);
}

.cc-action-btn-warning:hover {
	background-color: rgba(245, 158, 11, 0.5);
	border-color: rgb(217, 119, 6);
}

.cc-action-btn-warning svg {
	color: rgb(245, 158, 11);
}

.cc-action-btn-warning:hover svg {
	color: rgb(252, 211, 77);
}

/* Emergency mode styling */
.emergency-mode {
	position: relative;
}

.emergency-mode::before {
	content: '';
	position: absolute;
	inset: 0;
	border: 3px solid rgb(239, 68, 68);
	border-radius: inherit;
	animation: emergency-pulse 1s ease-in-out infinite;
	pointer-events: none;
	z-index: 100;
}

@keyframes emergency-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

/* Emergency banner */
.emergency-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background-color: rgb(239, 68, 68);
	color: white;
	font-weight: 600;
	font-size: 0.875rem;
	animation: emergency-pulse 1s ease-in-out infinite;
	margin-top: 0.5rem;
	border-radius: var(--radius-md);
}

/* Operator Hint Cards (Phase 9.1) */
.operator-hint-card {
	display: block;
	padding: 0.625rem 0.75rem;
	background-color: var(--bg-tertiary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	transition: all 0.15s ease;
}

.operator-hint-card:hover {
	border-color: var(--border-light);
	background-color: var(--bg-hover);
}

/* Priority colors */
.operator-hint-card.hint-priority-low {
	border-left: 3px solid var(--accent-gray);
}

.operator-hint-card.hint-priority-low .hint-category-icon {
	color: var(--accent-gray);
}

.operator-hint-card.hint-priority-medium {
	border-left: 3px solid var(--accent-yellow);
}

.operator-hint-card.hint-priority-medium .hint-category-icon {
	color: var(--accent-yellow);
}

.operator-hint-card.hint-priority-high {
	border-left: 3px solid #f97316;
	background-color: rgba(249, 115, 22, 0.1);
}

.operator-hint-card.hint-priority-high .hint-category-icon {
	color: #f97316;
}

.operator-hint-card.hint-priority-critical {
	border-left: 3px solid var(--accent-red);
	background-color: rgba(239, 68, 68, 0.15);
	animation: hint-pulse 2s ease-in-out infinite;
}

.operator-hint-card.hint-priority-critical .hint-category-icon {
	color: var(--accent-red);
}

@keyframes hint-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.85; }
}

/* Hint category icon colors by category */
.operator-hint-card[data-category="pacing"] .hint-category-icon {
	color: var(--accent-green);
}

.operator-hint-card[data-category="milestone"] .hint-category-icon {
	color: #a855f7; /* purple */
}

.operator-hint-card[data-category="anomaly"] .hint-category-icon {
	color: #f97316; /* orange */
}

/* Light theme adjustments */
[data-theme="light"] .operator-hint-card,
[data-theme="arctic"] .operator-hint-card,
[data-theme="rose"] .operator-hint-card,
[data-theme="mint"] .operator-hint-card {
	background-color: var(--bg-secondary);
}

[data-theme="light"] .operator-hint-card p,
[data-theme="arctic"] .operator-hint-card p,
[data-theme="rose"] .operator-hint-card p,
[data-theme="mint"] .operator-hint-card p {
	color: var(--text-primary);
}

/* Match History Panel */
.match-history-panel {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 30;
	width: 100%;
	max-width: 600px;
}

.match-history-toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.75rem 1rem;
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-bottom: none;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	color: var(--text-primary);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s;
}

.match-history-toggle:hover {
	background-color: var(--bg-tertiary);
}

.match-history-badge {
	background-color: var(--accent-secondary);
	color: white;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.125rem 0.5rem;
	border-radius: var(--radius-pill);
	margin-left: auto;
}

.match-history-content {
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-top: none;
	max-height: 300px;
	overflow-y: auto;
}

.match-history-content.expanded {
	display: block;
}

.match-history-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--border-color);
	font-size: 0.875rem;
}

.match-history-item:last-child {
	border-bottom: none;
}

.match-history-item:hover {
	background-color: var(--bg-tertiary);
}

.match-history-players {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.match-history-player {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.match-history-player.winner {
	color: rgb(34, 197, 94);
	font-weight: 600;
}

.match-history-score {
	font-weight: 600;
	color: var(--text-muted);
}

.match-history-time {
	font-size: 0.75rem;
	color: var(--text-muted);
}

.match-history-empty {
	padding: 1.5rem;
	text-align: center;
	color: var(--text-muted);
}

/* Chevron rotation when expanded */
.match-history-toggle.expanded #matchHistoryChevron {
	transform: rotate(180deg);
}

/* Keyboard shortcut indicator in buttons */
.cc-kbd {
	background-color: var(--bg-primary);
	color: var(--text-muted);
	font-size: 0.625rem;
	font-weight: 600;
	padding: 0.125rem 0.25rem;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-color);
	font-family: monospace;
}

/* Keyboard help modal styling */
kbd.kbd {
	display: inline-block;
	background-color: var(--bg-tertiary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 0.125rem 0.5rem;
	font-family: monospace;
	font-size: 0.75rem;
	color: var(--text-primary);
}

/* Keyboard hint badges in buttons */
.kbd-hint {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	background-color: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-sm);
	font-family: monospace;
	font-size: 0.7rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
}

/* =============================================================================
   COMMAND CENTER MOBILE RESPONSIVE
   ============================================================================= */

@media (max-width: 1023px) {
	.cc-grid {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(4, minmax(200px, auto));
		height: auto;
		overflow-y: auto;
	}

	.cc-quadrant-content {
		max-height: 300px;
	}

	.cc-actions-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.cc-player-name {
		max-width: 80px;
	}
}

@media (max-width: 640px) {
	.cc-header {
		padding: 0.5rem 1rem;
	}

	.cc-header h1 {
		font-size: 1rem;
	}

	.cc-quadrant-header {
		padding: 0.5rem 0.75rem;
	}

	.cc-quadrant-content {
		padding: 0.5rem;
	}

	.cc-match-card {
		padding: 0.5rem;
	}

	.cc-player-name {
		max-width: 60px;
	}

	.cc-actions-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.cc-action-btn {
		min-height: 60px;
		padding: 0.5rem;
	}
}

/* Touch device optimizations */
@media (pointer: coarse) {
	.cc-match-card {
		padding: 1rem;
		min-height: 80px;
	}

	.cc-btn {
		padding: 0.5rem 1rem;
		min-height: 44px;
	}

	.cc-action-btn {
		min-height: 80px;
	}
}

/* ============================================
   NEXT UP INDICATOR
   ============================================ */

.next-up-card {
	position: relative;
	box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}

.animate-pulse-slow {
	animation: pulse-slow 2s ease-in-out infinite;
}

@keyframes pulse-slow {
	0%, 100% {
		box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
	}
	50% {
		box-shadow: 0 0 30px rgba(34, 197, 94, 0.5);
	}
}

/* ============================================
   PRE-FLIGHT CHECKLIST
   ============================================ */

.checklist-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	background-color: var(--bg-tertiary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	transition: background-color 0.2s, border-color 0.2s;
}

.checklist-item.hidden {
	display: none;
}

.checklist-item:hover {
	background-color: var(--bg-hover);
}

.checklist-item.success {
	border-color: rgba(34, 197, 94, 0.5);
	background-color: rgba(34, 197, 94, 0.1);
}

.checklist-item.warning {
	border-color: rgba(245, 158, 11, 0.5);
	background-color: rgba(245, 158, 11, 0.1);
}

.checklist-item.error {
	border-color: rgba(239, 68, 68, 0.5);
	background-color: rgba(239, 68, 68, 0.1);
}

.checklist-icon {
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--bg-secondary);
	border-radius: var(--radius-lg);
	color: var(--text-muted);
}

.checklist-item.success .checklist-icon {
	background-color: rgba(34, 197, 94, 0.2);
	color: rgb(34, 197, 94);
}

.checklist-item.warning .checklist-icon {
	background-color: rgba(245, 158, 11, 0.2);
	color: rgb(245, 158, 11);
}

.checklist-item.error .checklist-icon {
	background-color: rgba(239, 68, 68, 0.2);
	color: rgb(239, 68, 68);
}

.checklist-content {
	flex: 1;
	min-width: 0;
}

.checklist-title {
	font-weight: 600;
	color: var(--text-primary);
	font-size: 0.9375rem;
}

.checklist-description {
	font-size: 0.8125rem;
	color: var(--text-muted);
	margin-top: 0.125rem;
}

.checklist-status {
	flex-shrink: 0;
}

.checklist-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.75rem;
	border-radius: var(--radius-pill);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.checklist-badge.pending {
	background-color: var(--bg-secondary);
	color: var(--text-muted);
}

.checklist-badge.success {
	background-color: rgba(34, 197, 94, 0.2);
	color: rgb(34, 197, 94);
}

.checklist-badge.warning {
	background-color: rgba(245, 158, 11, 0.2);
	color: rgb(245, 158, 11);
}

.checklist-badge.error {
	background-color: rgba(239, 68, 68, 0.2);
	color: rgb(239, 68, 68);
}

/* Checklist badge icons */
.checklist-badge.success::before {
	content: '';
	width: 0.5rem;
	height: 0.5rem;
	background-color: currentColor;
	border-radius: var(--radius-circle);
}

.checklist-badge.warning::before,
.checklist-badge.error::before {
	content: '!';
	font-size: 0.625rem;
	font-weight: 700;
}

/* Mobile responsive checklist */
@media (max-width: 640px) {
	.checklist-item {
		flex-wrap: wrap;
		gap: 0.75rem;
		padding: 0.75rem;
	}

	.checklist-icon {
		width: 2rem;
		height: 2rem;
	}

	.checklist-content {
		flex: 1 1 calc(100% - 3rem);
		order: 1;
	}

	.checklist-status {
		order: 2;
		margin-left: auto;
	}

	.checklist-title {
		font-size: 0.875rem;
	}

	.checklist-description {
		font-size: 0.75rem;
	}
}

/* ============================================
   PLATFORM ADMIN - Media Grid (Flyers/Sponsors)
   ============================================ */

/* Thumbnail grid layout */
.media-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 1rem;
}

/* Media card (flyer or sponsor thumbnail) */
.media-card {
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: all 0.2s ease;
}

.media-card:hover {
	border-color: var(--accent-blue);
	box-shadow: 0 4px 12px var(--shadow-color);
	transform: translateY(-2px);
}

/* Thumbnail container */
.media-thumbnail-container {
	position: relative;
	width: 100%;
	height: 100px;
	overflow: hidden;
	background: var(--bg-tertiary);
	cursor: pointer;
}

/* Thumbnail image */
.media-thumbnail {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s ease;
}

.media-card:hover .media-thumbnail {
	transform: scale(1.05);
}

/* Video badge overlay */
.media-video-badge {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	background: rgba(168, 85, 247, 0.9);
	color: #ffffff;
	padding: 0.125rem 0.375rem;
	border-radius: var(--radius-sm);
	font-size: 0.625rem;
	font-weight: 600;
	text-transform: uppercase;
}

/* Play icon for videos */
.media-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 2.5rem;
	height: 2.5rem;
	background: rgba(0, 0, 0, 0.6);
	border-radius: var(--radius-circle);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	opacity: 0.8;
	transition: opacity 0.2s ease;
}

.media-card:hover .media-play-icon {
	opacity: 1;
}

/* Media card info section */
.media-info {
	padding: 0.75rem;
}

.media-filename {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 0.375rem;
}

.media-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-bottom: 0.5rem;
}

.media-owner-badge {
	background: rgba(59, 130, 246, 0.2);
	color: #3b82f6;
	padding: 0.125rem 0.375rem;
	border-radius: var(--radius-sm);
	font-size: 0.625rem;
	font-weight: 500;
}

.media-legacy-badge {
	background: rgba(234, 179, 8, 0.2);
	color: #eab308;
	padding: 0.125rem 0.375rem;
	border-radius: var(--radius-sm);
	font-size: 0.625rem;
	font-weight: 500;
}

.media-size {
	font-size: 0.625rem;
	color: var(--text-muted);
}

/* Media card actions */
.media-actions {
	display: flex;
	gap: 0.5rem;
}

.media-action-btn {
	flex: 1;
	padding: 0.375rem 0.5rem;
	font-size: 0.75rem;
	border-radius: var(--radius-sm);
	text-align: center;
	cursor: pointer;
	transition: all 0.15s ease;
}

.media-action-btn.delete {
	background: rgba(239, 68, 68, 0.2);
	color: #ef4444;
	border: 1px solid transparent;
}

.media-action-btn.delete:hover {
	background: #ef4444;
	color: #ffffff;
}

/* Image preview modal styles */
#imagePreviewModal img,
#imagePreviewModal video {
	max-width: 100%;
	max-height: 70vh;
	object-fit: contain;
}

/* Sponsor-specific styles */
.sponsor-position-badge {
	background: rgba(107, 114, 128, 0.2);
	color: #9ca3af;
	padding: 0.125rem 0.375rem;
	border-radius: var(--radius-sm);
	font-size: 0.625rem;
	text-transform: capitalize;
}

.sponsor-active-indicator {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--radius-circle);
	background: #22c55e;
	box-shadow: 0 0 4px #22c55e;
}

.sponsor-inactive-indicator {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--radius-circle);
	background: #6b7280;
}

/* Responsive adjustments for media grid */
@media (max-width: 640px) {
	.media-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
	}

	.media-thumbnail-container {
		height: 80px;
	}

	.media-info {
		padding: 0.5rem;
	}
}

@media (min-width: 1280px) {
	.media-grid {
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	}
}

/* ============================================
   Image Preview Modal Content
   ============================================ */

/* Preview image/video container centering */
#previewImageContainer {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	min-height: 0;
	padding: 1rem;
}

/* Preview image/video */
.preview-image {
	max-width: 90vw;
	max-height: 70vh;
	object-fit: contain;
	border-radius: var(--radius-lg);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Info panel styling */
#previewInfoPanel {
	background: var(--bg-secondary);
	border-top: 1px solid var(--border-color);
	padding: 1.5rem;
	min-width: 300px;
}

@media (max-width: 768px) {
	#previewInfoPanel {
		min-width: auto;
		width: 100%;
	}
}

/* Info panel rows */
.preview-info-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--border-color);
}

.preview-info-row:last-of-type {
	border-bottom: none;
}

.preview-info-label {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.preview-info-value {
	font-size: 0.875rem;
	color: var(--text-primary);
	text-align: right;
	word-break: break-word;
	max-width: 200px;
}

/* ============================================
   BRACKET THEME SELECTOR (Settings Page)
   ============================================ */

.theme-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.theme-card {
	position: relative;
	cursor: pointer;
	padding: 0.75rem;
	border: 2px solid var(--border-color);
	border-radius: var(--radius-lg);
	text-align: center;
	transition: all 0.2s ease;
	background: var(--bg-secondary);
}

.theme-card:hover {
	border-color: var(--accent-blue);
	background: var(--bg-tertiary);
}

.theme-card.selected {
	border-color: var(--accent-blue);
	box-shadow: 0 0 0 3px var(--accent-blue-light);
}

.theme-swatch {
	border-radius: var(--radius-md);
	border: 1px solid var(--border-color);
	padding: 0.5rem;
	margin-bottom: 0.6rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	align-items: stretch;
	min-height: 84px;
	overflow: hidden;
	transition: transform 0.2s ease;
}

.theme-card:hover .theme-swatch {
	transform: scale(1.02);
}

/* Mini-preview sub-elements — painted in each theme's own colors via inline
   styles (settings.js renderCard), so the operator sees real text legibility +
   accent at a glance. */
.theme-swatch__heading {
	font-weight: 700;
	font-size: 0.7rem;
	letter-spacing: 0.02em;
	text-align: left;
	line-height: 1.1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.theme-swatch__match {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem;
	border: 1px solid;
	border-radius: var(--radius-xs);
	padding: 0.2rem 0.35rem;
	font-size: 0.62rem;
}

.theme-swatch__player {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.theme-swatch__win {
	font-weight: 800;
	flex-shrink: 0;
}

.theme-swatch__btn {
	align-self: flex-start;
	font-size: 0.6rem;
	font-weight: 700;
	padding: 0.12rem 0.5rem;
	border-radius: var(--radius-lg);
	line-height: 1.5;
}

/* Selected check — a non-color-only indicator (pairs with the ring + aria-checked). */
.theme-card__check {
	position: absolute;
	top: 0.4rem;
	right: 0.4rem;
	width: 1.15rem;
	height: 1.15rem;
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--accent-blue);
	color: #fff;
	border-radius: var(--radius-pill);
	font-size: 0.7rem;
	font-weight: 800;
	line-height: 1;
	z-index: 1;
}

.theme-card.selected .theme-card__check {
	display: flex;
}

.theme-name {
	display: block;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--text-primary);
	margin-bottom: 0.25rem;
}

.theme-description {
	display: block;
	font-size: 0.75rem;
	color: var(--text-muted);
	line-height: 1.3;
}

/* ============================================================================
   Flyer Media Controls
   ============================================================================ */

/* Playback state indicator dot */
.playback-state-dot {
	width: 10px;
	height: 10px;
	border-radius: var(--radius-circle);
	background-color: var(--text-muted);
	flex-shrink: 0;
}

.playback-state-dot.playing {
	background-color: var(--accent-green);
	animation: pulse-playing 1.5s ease-in-out infinite;
}

.playback-state-dot.paused {
	background-color: var(--accent-yellow);
}

.playback-state-dot.stopped {
	background-color: var(--text-muted);
}

@keyframes pulse-playing {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
	}
	50% {
		box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
	}
}

/* Progress bar */
.progress-bar {
	width: 100%;
	height: 6px;
	background-color: var(--bg-secondary);
	border-radius: var(--radius-xs);
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
	border-radius: var(--radius-xs);
	transition: width 0.2s ease;
}

/* Media control buttons */
.media-control-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-circle);
	color: var(--text-secondary);
	cursor: pointer;
	transition: all 0.2s ease;
}

.media-control-btn:hover {
	background-color: var(--bg-tertiary);
	color: var(--text-primary);
	border-color: var(--accent-blue);
}

.media-control-btn.primary {
	width: 48px;
	height: 48px;
	background-color: var(--accent-blue);
	border-color: var(--accent-blue);
	color: white;
}

.media-control-btn.primary:hover {
	background-color: var(--accent-blue-dark);
	transform: scale(1.05);
}

.media-control-btn.active {
	background-color: var(--accent-blue);
	border-color: var(--accent-blue);
	color: white;
}

/* Volume slider */
.volume-slider {
	-webkit-appearance: none;
	appearance: none;
	height: 6px;
	background: var(--bg-secondary);
	border-radius: var(--radius-xs);
	outline: none;
}

.volume-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	background: var(--accent-blue);
	border-radius: var(--radius-circle);
	cursor: pointer;
	transition: transform 0.1s ease;
}

.volume-slider::-webkit-slider-thumb:hover {
	transform: scale(1.2);
}

.volume-slider::-moz-range-thumb {
	width: 16px;
	height: 16px;
	background: var(--accent-blue);
	border-radius: var(--radius-circle);
	cursor: pointer;
	border: none;
}

/* Playlist item */
.playlist-item {
	transition: background-color 0.2s ease;
}

.playlist-item:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.playlist-item.current {
	background-color: rgba(59, 130, 246, 0.2);
	border-left: 3px solid var(--accent-blue);
}

.playlist-item input[type="number"] {
	-moz-appearance: textfield;
}

.playlist-item input[type="number"]::-webkit-inner-spin-button,
.playlist-item input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ============================================
   PRICING PAGE STYLES
   ============================================ */

/* Pricing card tier colors */
.pricing-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	border: 1px solid transparent;
}

.pricing-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.3);
}

/* Tier-specific styling */
.pricing-card-gray {
	border-color: #4b5563;
	background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

.pricing-card-gray:hover {
	border-color: #6b7280;
}

.pricing-card-blue {
	border-color: rgba(59, 130, 246, 0.3);
	background: linear-gradient(135deg, #1e3a5f 0%, #111827 100%);
}

.pricing-card-blue:hover {
	border-color: rgba(59, 130, 246, 0.5);
}

.pricing-card-purple {
	border-color: rgba(139, 92, 246, 0.3);
	background: linear-gradient(135deg, #2e1a47 0%, #111827 100%);
}

.pricing-card-purple:hover {
	border-color: rgba(139, 92, 246, 0.5);
}

.pricing-card-gold {
	border-color: rgba(245, 158, 11, 0.3);
	background: linear-gradient(135deg, #3d2e0a 0%, #111827 100%);
}

.pricing-card-gold:hover {
	border-color: rgba(245, 158, 11, 0.5);
}

/* Popular badge styling */
.pricing-card.popular {
	border: 2px solid #3b82f6;
}

.popular-badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: white;
	padding: 6px 20px;
	border-radius: var(--radius-pill);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
	}
	50% {
		box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
	}
}

/* Feature icon colors by tier */
.feature-icon {
	transition: color 0.2s ease;
}

.feature-icon-gray {
	color: #9ca3af;
}

.feature-icon-blue {
	color: #60a5fa;
}

.feature-icon-purple {
	color: #a78bfa;
}

.feature-icon-gold {
	color: #fbbf24;
}

.feature-icon-green {
	color: #22c55e;
}

/* Billing toggle styling */
.billing-toggle {
	background: rgba(31, 41, 55, 0.8);
	border-radius: var(--radius-pill);
	padding: 4px;
	border: 1px solid #374151;
}

.billing-option {
	padding: 10px 24px;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: all 0.2s ease;
	font-weight: 500;
	color: #9ca3af;
}

.billing-option:hover:not(.active) {
	color: #d1d5db;
}

.billing-option.active {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: white;
	box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.annual-savings {
	background: rgba(34, 197, 94, 0.2);
	color: #22c55e;
	padding: 2px 8px;
	border-radius: var(--radius-sm);
	font-size: 11px;
	font-weight: 600;
}

/* Price display */
.price-amount {
	font-size: 48px;
	font-weight: 700;
	line-height: 1;
	background: linear-gradient(135deg, #ffffff 0%, #d1d5db 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* "All Plans Include" section */
.all-plans-include {
	background: rgba(31, 41, 55, 0.5);
	border: 1px solid #374151;
	border-radius: var(--radius-2xl);
	padding: 32px;
	margin-bottom: 48px;
}

.all-plans-include h3 {
	font-size: 18px;
	font-weight: 600;
	color: #f3f4f6;
	margin-bottom: 24px;
	text-align: center;
}

.all-plans-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
}

.all-plans-item {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #9ca3af;
	font-size: 14px;
}

.all-plans-item svg {
	width: 20px;
	height: 20px;
	color: #22c55e;
	flex-shrink: 0;
}

/* Feature comparison table */
.comparison-table-wrapper {
	overflow-x: auto;
	margin-top: 48px;
	margin-bottom: 48px;
}

.comparison-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	min-width: 700px;
}

.comparison-table th,
.comparison-table td {
	padding: 12px 16px;
	text-align: center;
	border-bottom: 1px solid #374151;
}

.comparison-table th {
	background: #1f2937;
	font-weight: 600;
	color: #f3f4f6;
}

.comparison-table th:first-child {
	text-align: left;
	border-top-left-radius: 8px;
}

.comparison-table th:last-child {
	border-top-right-radius: 8px;
}

.comparison-table td:first-child {
	text-align: left;
	color: #d1d5db;
}

.comparison-table tbody tr:hover {
	background: rgba(55, 65, 81, 0.3);
}

.comparison-table tbody tr:last-child td:first-child {
	border-bottom-left-radius: 8px;
}

.comparison-table tbody tr:last-child td:last-child {
	border-bottom-right-radius: 8px;
}

.comparison-check {
	color: #22c55e;
	font-size: 20px;
}

.comparison-x {
	color: #6b7280;
	font-size: 20px;
}

.comparison-category {
	background: rgba(59, 130, 246, 0.1);
	font-weight: 600;
	color: #60a5fa;
}

.comparison-category td {
	padding: 8px 16px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Comparison toggle button */
.comparison-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 32px auto;
	padding: 12px 24px;
	background: rgba(31, 41, 55, 0.5);
	border: 1px solid #374151;
	border-radius: var(--radius-lg);
	color: #9ca3af;
	cursor: pointer;
	transition: all 0.2s ease;
}

.comparison-toggle:hover {
	background: rgba(55, 65, 81, 0.5);
	color: #d1d5db;
}

.comparison-toggle svg {
	transition: transform 0.2s ease;
}

.comparison-toggle.expanded svg {
	transform: rotate(180deg);
}

/* FAQ improvements */
.faq-item {
	background: rgba(31, 41, 55, 0.8);
	border: 1px solid #374151;
	border-radius: var(--radius-xl);
	padding: 24px;
	transition: all 0.2s ease;
}

.faq-item:hover {
	border-color: #4b5563;
}

.faq-item h3 {
	font-size: 16px;
	font-weight: 600;
	color: #f3f4f6;
	margin-bottom: 8px;
}

.faq-item p {
	color: #9ca3af;
	line-height: 1.6;
}

/* Trust signals */
.trust-signals {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px solid #374151;
}

.trust-signal {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #9ca3af;
	font-size: 14px;
}

.trust-signal svg {
	width: 20px;
	height: 20px;
	color: #22c55e;
}

/* Comparison table section toggle */
.comparison-table-section {
	border-top: 1px solid #374151;
	padding-top: 16px;
}

#comparisonTable table {
	background: #1f2937;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

#comparisonTable tbody tr:hover {
	background: rgba(55, 65, 81, 0.3);
}

/* Mobile responsive pricing */
@media (max-width: 768px) {
	.pricing-card {
		padding: 24px;
	}

	.price-amount {
		font-size: 36px;
	}

	.billing-option {
		padding: 8px 16px;
		font-size: 14px;
	}

	.all-plans-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.all-plans-include .grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.comparison-table-wrapper {
		margin-left: -16px;
		margin-right: -16px;
		padding-left: 16px;
		padding-right: 16px;
	}

	#comparisonTable {
		margin-left: -24px;
		margin-right: -24px;
		padding: 0 8px;
	}

	#comparisonTable th,
	#comparisonTable td {
		padding: 8px 6px;
		font-size: 12px;
	}

	#comparisonTable th:first-child,
	#comparisonTable td:first-child {
		min-width: 140px;
		font-size: 11px;
	}

	.faq-item {
		padding: 16px;
	}

	.faq-item h3 {
		font-size: 14px;
	}

	.faq-item p {
		font-size: 13px;
	}

	.trust-signals {
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}
}

@media (max-width: 480px) {
	.all-plans-grid {
		grid-template-columns: 1fr;
	}

	.all-plans-include .grid {
		grid-template-columns: 1fr;
	}

	#comparisonTable th,
	#comparisonTable td {
		padding: 6px 4px;
		font-size: 11px;
	}

	#comparisonTable th:first-child,
	#comparisonTable td:first-child {
		min-width: 100px;
		position: sticky;
		left: 0;
		background: #1f2937;
		z-index: 1;
	}
}

/* ============================================
   SUBSCRIPTION PLAN CARD TIER GRADIENTS
   ============================================ */

/* Base plan card styles */
.plan-card-free,
.plan-card-starter,
.plan-card-pro,
.plan-card-enterprise,
.plan-card-unlimited {
	background-size: 200% 200%;
	color: white;
	transition: all 0.3s ease;
}

/* Free tier - subtle gray */
.plan-card-free {
	background: linear-gradient(135deg, #374151 0%, #4b5563 50%, #6b7280 100%);
}

/* Starter tier - blue gradient */
.plan-card-starter {
	background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
}

/* Pro tier - purple gradient */
.plan-card-pro {
	background: linear-gradient(135deg, #6b21a8 0%, #a855f7 50%, #c084fc 100%);
}

/* Enterprise tier - gold/amber gradient */
.plan-card-enterprise {
	background: linear-gradient(135deg, #92400e 0%, #d97706 50%, #fbbf24 100%);
}

/* Unlimited tier - special gradient */
.plan-card-unlimited {
	background: linear-gradient(135deg, #0f766e 0%, #14b8a6 50%, #2dd4bf 100%);
}

/* Hover effects for plan cards */
.plan-card-free:hover,
.plan-card-starter:hover,
.plan-card-pro:hover,
.plan-card-enterprise:hover,
.plan-card-unlimited:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Plan card text styling */
.plan-card-free .text-gray-300,
.plan-card-starter .text-gray-300,
.plan-card-pro .text-gray-300,
.plan-card-enterprise .text-gray-300,
.plan-card-unlimited .text-gray-300 {
	color: rgba(255, 255, 255, 0.85);
}

/* ============================================
   CANCEL SUBSCRIPTION MODAL STYLES
   ============================================ */

/* Cancel reason option styling */
.cancel-reason-option {
	transition: all 0.2s ease;
}

.cancel-reason-option:hover {
	transform: translateX(4px);
}

.cancel-reason-option.selected,
.cancel-reason-option:has(input:checked) {
	background-color: #4b5563 !important;
	border: 2px solid #3b82f6;
}

/* Radio button styling */
.cancel-reason-option input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: #3b82f6;
}

/* Cancel modal step transitions */
#cancelStep1,
#cancelStep2,
#cancelStep3,
#cancelProcessing,
#cancelSuccess {
	animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Retention offer card styling */
#retentionOffer {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
	border: 1px solid rgba(59, 130, 246, 0.3);
	border-radius: var(--radius-xl);
	padding: 24px;
}

/* Processing spinner enhancement */
#cancelProcessing svg {
	filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.5));
}

/* Success state enhancement */
#cancelSuccess .rounded-full {
	animation: successPulse 2s ease infinite;
}

@keyframes successPulse {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
	}
	50% {
		box-shadow: 0 0 0 15px rgba(16, 185, 129, 0);
	}
}

/* Quick upgrade prompt styling */
#upgradePrompt {
	transition: all 0.3s ease;
}

#upgradePrompt:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15);
}

/* Light theme adjustments for plan cards */
[data-theme="light"] .plan-card-free,
[data-theme="light"] .plan-card-starter,
[data-theme="light"] .plan-card-pro,
[data-theme="light"] .plan-card-enterprise,
[data-theme="light"] .plan-card-unlimited {
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .plan-card-free .text-white,
[data-theme="light"] .plan-card-starter .text-white,
[data-theme="light"] .plan-card-pro .text-white,
[data-theme="light"] .plan-card-enterprise .text-white,
[data-theme="light"] .plan-card-unlimited .text-white {
	color: white !important;
}

/* ============================================
   PAYMENT SUCCESS MODAL - Animations
   ============================================ */

/* Checkmark container pop animation */
@keyframes checkmarkPop {
	0% {
		transform: scale(0);
		opacity: 0;
	}
	50% {
		transform: scale(1.2);
	}
	70% {
		transform: scale(0.9);
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* Checkmark path drawing animation */
@keyframes checkmarkDraw {
	0% {
		stroke-dashoffset: 50;
	}
	100% {
		stroke-dashoffset: 0;
	}
}

/* Modal fade in */
@keyframes modalFadeIn {
	0% {
		opacity: 0;
		transform: scale(0.95) translateY(10px);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

/* Apply pop animation to checkmark container */
.success-checkmark-pop {
	animation: checkmarkPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Apply draw animation to checkmark path */
.success-checkmark-draw {
	stroke-dasharray: 50;
	stroke-dashoffset: 50;
	animation: checkmarkDraw 0.5s ease-out 0.4s forwards;
}

/* Payment success modal styling */
#paymentSuccessModal .bg-gray-800 {
	animation: modalFadeIn 0.4s ease-out forwards;
}

/* Backdrop blur fallback for older browsers */
#paymentSuccessModal .backdrop-blur-sm {
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/* Receipt card styling */
#paymentSuccessModal .bg-gray-700\/50 {
	border: 1px solid rgba(75, 85, 99, 0.3);
}

/* Next steps list hover effect */
#nextStepsList li {
	transition: transform 0.2s ease;
}

#nextStepsList li:hover {
	transform: translateX(4px);
}

/* Get Started button glow effect */
#paymentSuccessModal button[onclick="closePaymentSuccessModal()"] {
	box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

#paymentSuccessModal button[onclick="closePaymentSuccessModal()"]:hover {
	box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

/* Confetti canvas positioning */
#confettiCanvas {
	width: 100%;
	height: 100%;
}

/* Light theme adjustments for payment success modal */
[data-theme="light"] #paymentSuccessModal .bg-gray-800 {
	background-color: var(--bg-card);
}

[data-theme="light"] #paymentSuccessModal .bg-gray-700\/50 {
	background-color: var(--bg-secondary);
	border-color: var(--border-color);
}

[data-theme="light"] #paymentSuccessModal .bg-gray-700\/30 {
	background-color: var(--bg-tertiary);
}

[data-theme="light"] #paymentSuccessModal .text-white {
	color: var(--text-primary);
}

[data-theme="light"] #paymentSuccessModal .text-gray-300 {
	color: var(--text-secondary);
}

[data-theme="light"] #paymentSuccessModal .text-gray-400 {
	color: var(--text-muted);
}

/* Keep header text white in light mode */
[data-theme="light"] #paymentSuccessModal .bg-gradient-to-r .text-white {
	color: white !important;
}

/* ============================================
   ACCESSIBILITY - Skip Links
   ============================================ */

.skip-link {
	position: absolute;
	top: -100px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--accent-blue);
	color: white;
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius-lg);
	font-weight: 600;
	z-index: 100000;
	text-decoration: none;
	transition: top 0.2s ease-in-out;
}

.skip-link:focus {
	top: 1rem;
	outline: 2px solid white;
	outline-offset: 2px;
}

/* ============================================
   ACCESSIBILITY - Focus Indicators
   ============================================ */

/* Enhanced focus indicators for keyboard navigation */
:focus-visible {
	outline: 2px solid var(--accent-blue);
	outline-offset: 2px;
}

/* Remove default focus for mouse users */
:focus:not(:focus-visible) {
	outline: none;
}

/* Ensure buttons and links have visible focus */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--accent-blue);
	outline-offset: 2px;
}

/* ============================================
   COOKIE CONSENT BANNER
   ============================================ */

.cookie-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--bg-secondary);
	border-top: 1px solid var(--border-color);
	padding: 1rem;
	z-index: 99999;
	transform: translateY(100%);
	transition: transform 0.3s ease-in-out;
}

.cookie-banner-visible {
	transform: translateY(0);
}

.cookie-banner-hidden {
	transform: translateY(100%);
}

.cookie-banner-content {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.cookie-banner-text {
	flex: 1;
	min-width: 280px;
	color: var(--text-secondary);
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 0;
}

.cookie-banner-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-shrink: 0;
}

.cookie-banner-link {
	color: var(--accent-blue);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 500;
}

.cookie-banner-link:hover {
	text-decoration: underline;
}

.cookie-banner-button {
	background: var(--accent-blue);
	color: white;
	border: none;
	padding: 0.5rem 1.25rem;
	border-radius: var(--radius-md);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
}

.cookie-banner-button:hover {
	background: var(--accent-blue-hover);
}

.cookie-banner-button:focus-visible {
	outline: 2px solid white;
	outline-offset: 2px;
}

/* Mobile responsive */
@media (max-width: 640px) {
	.cookie-banner-content {
		flex-direction: column;
		text-align: center;
	}

	.cookie-banner-text {
		min-width: 100%;
	}

	.cookie-banner-actions {
		width: 100%;
		justify-content: center;
	}
}

/* ============================================
   ANALYTICS HUB - Unified Analytics Page
   Sponsor Tab & Contextual Filter Styling
   ============================================ */

/* Sponsor tab visual distinction - left separator */
.sponsor-tab {
	border-left: 1px solid var(--border-color);
	margin-left: 0.5rem;
	padding-left: 1rem;
}

/* Sponsor tab active state - purple accent */
.sponsor-tab.active,
.sponsor-tab[aria-selected="true"] {
	background-color: rgba(168, 85, 247, 0.15);
	border-bottom-color: #a855f7;
	color: #a855f7;
}

.sponsor-tab:hover:not(.active) {
	color: #c084fc;
}

/* Light theme sponsor tab adjustments */
[data-theme="light"] .sponsor-tab.active,
[data-theme="light"] .sponsor-tab[aria-selected="true"] {
	background-color: rgba(168, 85, 247, 0.1);
	color: #7c3aed;
	border-bottom-color: #7c3aed;
}

[data-theme="light"] .sponsor-tab:hover:not(.active) {
	color: #8b5cf6;
}

/* Filter container context switching transitions */
#gameFilterContainer,
#dateFilterContainer {
	transition: opacity 200ms ease-in-out;
}

#gameFilterContainer.fade-out,
#dateFilterContainer.fade-out {
	opacity: 0;
}

/* Stats container context switching */
#tournamentStatsContainer,
#sponsorStatsContainer {
	transition: opacity 150ms ease-in-out;
}

#tournamentStatsContainer.fade-out,
#sponsorStatsContainer.fade-out {
	opacity: 0;
}

/* Sponsor stats purple accent icons */
#sponsorStatsContainer .text-purple-400 {
	color: #c084fc;
}

/* Sponsor performance table styling */
#sponsorPerformanceTable tbody tr:hover {
	background-color: rgba(168, 85, 247, 0.08);
}

/* Sponsor chart container styling */
#sponsorTimelineChart,
#sponsorPositionChart,
#sponsorFunnelChart,
#sponsorDisplayChart {
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
}

/* Sponsor detail modal purple accent */
#sponsorDetailModal .border-gray-700 {
	border-color: rgba(168, 85, 247, 0.2);
}

/* Hide seeding section when sponsors tab is active */
#seedingSection.hidden-for-sponsors {
	display: none;
}

/* Responsive adjustments for unified analytics */
@media (max-width: 768px) {
	.sponsor-tab {
		border-left: none;
		margin-left: 0;
		padding-left: 0.75rem;
	}

	/* Stack date filter inputs on mobile */
	#dateFilterContainer .flex.gap-3 {
		flex-wrap: wrap;
	}

	#dateFilterContainer input[type="date"] {
		width: 100%;
	}
}

@media (max-width: 640px) {
	/* Sponsor charts 1 column on mobile */
	#sponsorsTab .grid.grid-cols-2 {
		grid-template-columns: 1fr;
	}
}

/* ============================================
 * Stat Card Gradient Accents - Phase 14.1
 * ============================================ */
.ds-stat-card-participants::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.ds-stat-card-checked-in::before { background: linear-gradient(90deg, #10b981, #34d399); }
.ds-stat-card-matches::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.ds-stat-card-completed::before { background: linear-gradient(90deg, #22c55e, #4ade80); }
.ds-stat-card-in-progress::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.ds-stat-card-remaining::before { background: linear-gradient(90deg, #f97316, #fb923c); }

/* Icon containers for stat cards */
.ds-stat-icon-container {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--ds-space-3, 0.75rem);
}

.ds-stat-icon-blue { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.ds-stat-icon-green { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.ds-stat-icon-purple { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.ds-stat-icon-success { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.ds-stat-icon-yellow { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.ds-stat-icon-orange { background: rgba(249, 115, 22, 0.15); color: #f97316; }

/* Light theme icon container adjustments */
[data-theme="light"] .ds-stat-icon-blue { background: rgba(59, 130, 246, 0.12); }
[data-theme="light"] .ds-stat-icon-green { background: rgba(16, 185, 129, 0.12); }
[data-theme="light"] .ds-stat-icon-purple { background: rgba(139, 92, 246, 0.12); }
[data-theme="light"] .ds-stat-icon-success { background: rgba(34, 197, 94, 0.12); }
[data-theme="light"] .ds-stat-icon-yellow { background: rgba(245, 158, 11, 0.12); }
[data-theme="light"] .ds-stat-icon-orange { background: rgba(249, 115, 22, 0.12); }

/* Glass Skeleton Stat Card - Phase 14.1 */
.skeleton-stat-card-glass {
  padding: 1.25rem;
  min-height: 100px;
  background: var(--ds-glass-bg-subtle, rgba(31, 41, 55, 0.5));
  backdrop-filter: blur(4px);
  border: 1px solid var(--ds-glass-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

.skeleton-stat-card-glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ds-bg-elevated, #374151);
}

.skeleton-stat-card-glass .skeleton-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  background: var(--ds-bg-elevated, #374151);
}

.skeleton-stat-card-glass .skeleton-value {
  height: 32px;
  width: 60px;
  margin-bottom: 8px;
  border-radius: var(--radius-sm);
  background: var(--ds-bg-elevated, #374151);
}

.skeleton-stat-card-glass .skeleton-label {
  height: 12px;
  width: 80px;
  border-radius: var(--radius-sm);
  background: var(--ds-bg-elevated, #374151);
}

/* Skeleton shimmer animation */
.skeleton-stat-card-glass .skeleton-icon,
.skeleton-stat-card-glass .skeleton-value,
.skeleton-stat-card-glass .skeleton-label {
  animation: ds-skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes ds-skeleton-shimmer {
  0% { opacity: 0.5; }
  50% { opacity: 0.8; }
  100% { opacity: 0.5; }
}

/* Light theme skeleton adjustments */
[data-theme="light"] .skeleton-stat-card-glass {
  background: rgba(243, 244, 246, 0.8);
  border-color: rgba(209, 213, 219, 0.5);
}

[data-theme="light"] .skeleton-stat-card-glass .skeleton-icon,
[data-theme="light"] .skeleton-stat-card-glass .skeleton-value,
[data-theme="light"] .skeleton-stat-card-glass .skeleton-label {
  background: #e5e7eb;
}

/* Reduced motion preference for skeletons */
@media (prefers-reduced-motion: reduce) {
  .skeleton-stat-card-glass .skeleton-icon,
  .skeleton-stat-card-glass .skeleton-value,
  .skeleton-stat-card-glass .skeleton-label {
    animation: none;
    opacity: 0.6;
  }
}

/* ============================================
   FORM VALIDATION STYLES - Phase 14.4
   ============================================ */

/* Input validation wrapper */
.ds-input-validation {
  position: relative;
}

.ds-input-validation input,
.ds-input-validation select,
.ds-input-validation textarea {
  padding-right: 36px;
  transition: border-color var(--ds-duration-fast, 150ms) var(--ds-ease-default, ease),
              box-shadow var(--ds-duration-fast, 150ms) var(--ds-ease-default, ease);
}

/* Valid state */
.ds-input-validation.is-valid input,
.ds-input-validation.is-valid select {
  border-color: var(--accent-green);
}

.ds-input-validation.is-valid input:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

/* Invalid state */
.ds-input-validation.is-invalid input,
.ds-input-validation.is-invalid select {
  border-color: var(--accent-red);
}

.ds-input-validation.is-invalid input:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* Validation icons */
.ds-validation-icon {
  position: absolute;
  right: 10px;
  top: 1.25rem;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--ds-duration-fast, 150ms) var(--ds-ease-default, ease);
}

.ds-input-validation.is-valid .ds-validation-icon-success,
.ds-input-validation.is-invalid .ds-validation-icon-error {
  opacity: 1;
}

.ds-validation-icon-success { color: var(--accent-green); }
.ds-validation-icon-error { color: var(--accent-red); }

/* Error message below field */
.ds-field-error {
  display: none;
  margin-top: 4px;
  font-size: var(--ds-text-xs, 0.75rem);
  color: var(--accent-red);
  animation: ds-fade-slide-up var(--ds-duration-fast, 150ms) var(--ds-ease-out, ease-out);
}

.ds-input-validation.is-invalid .ds-field-error {
  display: block;
}

/* Shake animation for invalid submission */
@keyframes ds-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.ds-shake {
  animation: ds-shake 0.5s ease-in-out;
}

/* ============================================
   WIZARD ACCORDION SECTIONS - Phase 14.2
   ============================================ */

/* Accordion section container */
.wizard-accordion-section {
  border: 1px solid var(--border-color, #374151);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 0.5rem;
}

/* Accordion header button */
.wizard-accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
  background: rgba(55, 65, 81, 0.3);
  border: none;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.wizard-accordion-header:hover {
  background: rgba(55, 65, 81, 0.5);
}

.wizard-accordion-header[aria-expanded="true"] {
  border-bottom: 1px solid var(--border-color, #374151);
}

/* Chevron rotation */
.wizard-accordion-chevron {
  transition: transform 200ms ease-out;
  flex-shrink: 0;
}

.wizard-accordion-header[aria-expanded="true"] .wizard-accordion-chevron {
  transform: rotate(180deg);
}

/* Accordion body with smooth animation */
.wizard-accordion-body {
  transition: max-height 300ms ease-out, opacity 200ms ease-out;
  overflow: hidden;
}

.wizard-accordion-body.collapsed {
  max-height: 0 !important;
  opacity: 0;
}

.wizard-accordion-body:not(.collapsed) {
  opacity: 1;
}

/* Light theme overrides */
[data-theme="light"] .wizard-accordion-section {
  border-color: #d1d5db;
}

[data-theme="light"] .wizard-accordion-header {
  background: rgba(243, 244, 246, 0.6);
}

[data-theme="light"] .wizard-accordion-header:hover {
  background: rgba(229, 231, 235, 0.8);
}

[data-theme="light"] .wizard-accordion-header[aria-expanded="true"] {
  border-bottom-color: #d1d5db;
}


/* Quick Create template strip */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Tournament preview card */
/* Reduced motion preference for wizard */
@media (prefers-reduced-motion: reduce) {
  .ds-shake {
    animation: none;
  }
  .wizard-accordion-body {
    transition: none;
  }
  .wizard-accordion-chevron {
    transition: none;
  }
}

/* ============================================
   Preserved Component Classes (migrated from design-system)
   These classes are actively used by JS (utils.js, nav.js)
   ============================================ */

/* Screen reader only */
.ds-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reduced Motion Support (WCAG 2.1 compliance) */
@media (prefers-reduced-motion: reduce) {
  .ds-animate-press,
  .ds-animate-match-enter,
  .ds-animate-fade-up,
  .ds-animate-score-change,
  .ds-animate-winner,
  .ds-animate-shimmer,
  .ds-animate-shimmer-overlay::after,
  .ds-animate-state-pending,
  .ds-animate-state-open,
  .ds-animate-state-underway,
  .ds-animate-state-complete,
  .ds-confetti-particle {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----------------------------------------
   Animation Keyframes
   ---------------------------------------- */

@keyframes ds-press {
  0% { transform: scale(1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes ds-slide-in-left {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes ds-fade-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ds-score-pulse {
  0% { transform: scale(1); color: inherit; }
  25% { transform: scale(1.2); color: #10b981; }
  100% { transform: scale(1); color: inherit; }
}

@keyframes ds-celebrate {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  25% { transform: scale(1.02); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.3); }
  50% { transform: scale(1.01); box-shadow: 0 0 0 16px rgba(16, 185, 129, 0.15); }
  100% { transform: scale(1); box-shadow: 0 0 0 24px rgba(16, 185, 129, 0); }
}

@keyframes ds-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes ds-state-pulse {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

@keyframes ds-confetti-float {
  0% { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(-100px) rotate(720deg); }
}

/* ----------------------------------------
   Animation Utility Classes
   ---------------------------------------- */

.ds-animate-press {
  animation: ds-press 150ms cubic-bezier(0, 0, 0.2, 1);
}

.ds-animate-match-enter {
  animation: ds-slide-in-left 300ms cubic-bezier(0, 0, 0.2, 1) both;
}

.ds-animate-match-enter:nth-child(1) { animation-delay: 0ms; }
.ds-animate-match-enter:nth-child(2) { animation-delay: 50ms; }
.ds-animate-match-enter:nth-child(3) { animation-delay: 100ms; }
.ds-animate-match-enter:nth-child(4) { animation-delay: 150ms; }
.ds-animate-match-enter:nth-child(5) { animation-delay: 200ms; }
.ds-animate-match-enter:nth-child(n+6) { animation-delay: 250ms; }

.ds-animate-fade-up {
  animation: ds-fade-slide-up 300ms cubic-bezier(0, 0, 0.2, 1) both;
}

.ds-animate-score-change {
  animation: ds-score-pulse 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.ds-animate-winner {
  animation: ds-celebrate 700ms cubic-bezier(0, 0, 0.2, 1) both;
}

.ds-animate-shimmer {
  background: linear-gradient(
    90deg,
    var(--bg-tertiary) 0%,
    var(--bg-secondary) 50%,
    var(--bg-tertiary) 100%
  );
  background-size: 200% 100%;
  animation: ds-shimmer 1.5s linear infinite;
}

.ds-animate-shimmer-overlay {
  position: relative;
}

.ds-animate-shimmer-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: ds-shimmer 1.5s linear infinite;
  pointer-events: none;
  border-radius: inherit;
}

/* ----------------------------------------
   Match State Transition Classes
   ---------------------------------------- */

.ds-animate-state-pending {
  animation: ds-state-pulse 300ms cubic-bezier(0.4, 0, 0.2, 1);
  border-left-color: var(--text-muted);
}

.ds-animate-state-open {
  animation: ds-state-pulse 300ms cubic-bezier(0.4, 0, 0.2, 1);
  border-left-color: #3b82f6;
}

.ds-animate-state-underway {
  animation: ds-state-pulse 300ms cubic-bezier(0.4, 0, 0.2, 1);
  border-left-color: #f59e0b;
}

.ds-animate-state-complete {
  animation: ds-state-pulse 300ms cubic-bezier(0.4, 0, 0.2, 1);
  border-left-color: #10b981;
}

/* ----------------------------------------
   Confetti Effect
   ---------------------------------------- */

.ds-confetti-container {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
  z-index: 60;
}

.ds-confetti-particle {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-2xs);
  animation: ds-confetti-float 700ms cubic-bezier(0, 0, 0.2, 1) forwards;
}

.ds-confetti-particle--gold { background-color: #fbbf24; }
.ds-confetti-particle--green { background-color: #10b981; }
.ds-confetti-particle--blue { background-color: #3b82f6; }
.ds-confetti-particle--purple { background-color: #8b5cf6; }
.ds-confetti-particle--pink { background-color: #ec4899; }

/* ----------------------------------------
   Interactive Feedback Classes
   ---------------------------------------- */

.ds-btn-pressable {
  transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
}

.ds-btn-pressable:active:not(:disabled) {
  transform: scale(0.95);
}

.ds-card-lift {
  transition: transform 150ms cubic-bezier(0, 0, 0.2, 1),
              box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
}

.ds-card-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* ----------------------------------------
   Skip Link (Accessibility)
   ---------------------------------------- */

.ds-skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  padding: 12px 24px;
  background-color: #3b82f6;
  color: white;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  transition: top 150ms cubic-bezier(0, 0, 0.2, 1);
}

.ds-skip-link:focus {
  top: 16px;
  outline: 3px solid white;
  outline-offset: 2px;
}

[data-theme="light"] .ds-skip-link:focus {
  outline: 3px solid #1e40af;
}

/* ----------------------------------------
   Empty States
   ---------------------------------------- */

.ds-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  text-align: center;
  min-height: 200px;
}

.ds-empty-state-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  opacity: 0.4;
  color: var(--text-muted, #6b7280);
}

.ds-empty-state-icon svg {
  width: 100%;
  height: 100%;
}

.ds-empty-state-title {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text-secondary, #9ca3af);
  margin: 0 0 8px 0;
}

.ds-empty-state-message {
  font-size: 0.875rem;
  color: var(--text-muted, #6b7280);
  max-width: 320px;
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.ds-empty-state-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

/* Empty state size: Small */
.ds-empty-state-sm {
  padding: 16px 8px;
  min-height: 120px;
}

.ds-empty-state-sm .ds-empty-state-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
}

.ds-empty-state-sm .ds-empty-state-title {
  font-size: 1rem;
}

.ds-empty-state-sm .ds-empty-state-message {
  font-size: 0.75rem;
  max-width: 240px;
}

/* Empty state size: Large */
.ds-empty-state-lg {
  padding: 48px 24px;
  min-height: 300px;
}

.ds-empty-state-lg .ds-empty-state-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 24px;
}

.ds-empty-state-lg .ds-empty-state-title {
  font-size: 1.25rem;
}

.ds-empty-state-lg .ds-empty-state-message {
  font-size: 1rem;
  max-width: 400px;
}

/* Empty state animation */
.ds-empty-state-animate {
  animation: ds-empty-state-fade-in 0.3s ease-out;
}

@keyframes ds-empty-state-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ds-empty-state-animate {
    animation: none;
  }
}

/* ============================================
   DESIGN SYSTEM CLASSES (.ds-*) — HOTFIX 2026-04-07
   ============================================
   games.html and games.js reference .ds-input / .ds-modal / .ds-btn-* but
   none of them ever had CSS rules anywhere in the codebase. In the default
   midnight theme, body inherits color:var(--text-primary) (near-white), which
   Tailwind's preflight then propagates to <input> via color:inherit. Browser
   default form-control background is white on most platforms, so the edit
   modal rendered as white-on-white invisible text. The Add/Edit Game modal
   was also unstyled (no backdrop, no card chrome).
   These rules are theme-aware via existing CSS variables and are designed to
   coexist with — not override — the inline styles that live-*.js attaches
   alongside its .ds-btn-primary hook classes.
   ============================================ */

/* --- Inputs --- */
.ds-input {
	width: 100%;
	padding: 0.5rem 0.75rem;
	background-color: var(--bg-primary);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	color: var(--text-primary);
	font-size: 0.875rem;
	font-family: inherit;
	line-height: 1.25;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ds-input:focus {
	outline: none;
	border-color: var(--accent-blue);
	box-shadow: 0 0 0 2px var(--accent-blue-light);
}
.ds-input:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.ds-input::placeholder {
	color: var(--text-muted);
}
.ds-input-sm {
	padding: 0.375rem 0.5rem;
	font-size: 0.8125rem;
}

/* --- Modal backdrop + container ---
   Use :not(.hidden) so Tailwind's .hidden{display:none} continues to win
   when the modal is closed (style.css loads after tailwind.css, so a plain
   .ds-modal-backdrop{display:flex} would override .hidden). */
.ds-modal-backdrop {
	position: fixed;
	inset: 0;
	background-color: var(--overlay-bg);
	z-index: 1000;
	padding: 1rem;
	overflow-y: auto;
}
.ds-modal-backdrop:not(.hidden) {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}
.ds-modal {
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-md);
	color: var(--text-primary);
	width: 100%;
	max-width: 32rem;
}
.ds-modal-md  { max-width: 32rem; }
.ds-modal-lg  { max-width: 42rem; }
.ds-modal-xl  { max-width: 48rem; }
.ds-modal-2xl { max-width: 56rem; }
.ds-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--border-color);
}
.ds-modal-title {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0;
}
.ds-modal-close-enhanced {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-md);
	color: var(--text-muted);
	background: transparent;
	border: none;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}
.ds-modal-close-enhanced:hover {
	background-color: var(--bg-tertiary);
	color: var(--text-primary);
}

/* --- Buttons ---
   live-*.js uses .ds-btn-primary as a marker class with inline style="..."
   for visuals. Those inline styles win over these rules, so live-* pages are
   unaffected. games.html uses these classes alone, with no inline styles. */
.ds-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: var(--radius-md);
	font-size: 0.875rem;
	font-weight: 500;
	font-family: inherit;
	line-height: 1.25;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.ds-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.ds-btn-sm {
	padding: 0.375rem 0.625rem;
	font-size: 0.8125rem;
}
.ds-btn-primary {
	background-color: var(--btn-primary-bg);
	color: #ffffff;
}
.ds-btn-primary:hover:not(:disabled) {
	background-color: var(--btn-primary-hover);
}
.ds-btn-secondary {
	background-color: var(--btn-secondary-bg);
	color: var(--text-primary);
}
.ds-btn-secondary:hover:not(:disabled) {
	background-color: var(--btn-secondary-hover);
}
.ds-btn-danger {
	background-color: var(--accent-red);
	color: #ffffff;
}
.ds-btn-danger:hover:not(:disabled) {
	background-color: #dc2626;
}
.ds-btn-ghost {
	background-color: transparent;
	color: var(--text-secondary);
}
.ds-btn-ghost:hover:not(:disabled) {
	background-color: var(--bg-tertiary);
	color: var(--text-primary);
}

/* ============================================================
   SETTINGS BUCKET — TABLET RESPONSIVENESS + SAVE UX (T094)
   ============================================================
   T4.2 (responsiveness sweep) + T4.5 (save UX standardization).
   Added 2026-05-24 per docs/plans/2026-05-23-settings-bucket-audit-design.md.

   Scope: settings.html, settings-users.html, settings-integrations.html,
   settings-notifications.html, settings-activity.html.

   Pattern overview (see STYLE_GUIDE.md § "Settings Save UX"):
   - Editable pages get a sticky bottom save bar (.bs-sticky-save-bar)
     activated by setting data-dirty="true" on document.body.
   - Read-only pages keep inline action buttons (refresh, load-more).
   - The bar reserves padding-bottom on body[data-bucket="settings"]
     so the last form item never hides under the bar.
   - 16px input font-size is enforced at <= 768px to prevent iOS zoom.
   - Tap targets in tables expand to 44x44 under @media(pointer:coarse).
*/

/* iOS zoom prevention — applies to every settings sub-page input/select/textarea
   at tablet portrait widths. JS-generated inline styles in settings-users.js and
   settings-integrations.js use 14px; this rule wins via media query specificity. */
@media (max-width: 768px) {
	body[data-bucket="settings"] input[type="text"],
	body[data-bucket="settings"] input[type="email"],
	body[data-bucket="settings"] input[type="password"],
	body[data-bucket="settings"] input[type="number"],
	body[data-bucket="settings"] input[type="search"],
	body[data-bucket="settings"] input[type="tel"],
	body[data-bucket="settings"] input[type="url"],
	body[data-bucket="settings"] select,
	body[data-bucket="settings"] textarea {
		font-size: 16px;
	}
}

/* Tap targets: action buttons and table icon buttons inside settings pages.
   Per CLAUDE.md "Mobile Responsive" the existing .touch-target class is the
   convention; we extend it to the small "Copy"/"Show"/"Hide"/"Refresh" buttons
   in settings.html stream-key/RTMP rows under coarse pointer devices. */
@media (pointer: coarse) {
	body[data-bucket="settings"] button {
		min-height: 44px;
	}
	body[data-bucket="settings"] button.bs-link,
	body[data-bucket="settings"] button.bs-text-link {
		/* Text-only links opt out — they're rendered inline and never primary */
		min-height: 0;
	}
}

/* Scroll-hint wrapper for activity log table — extends existing .scroll-hint
   (admin-dashboard/CLAUDE.md § Mobile Responsive). The activity log JS builds a
   5-column CSS grid (100px 90px 1fr 90px 1fr) that needs ~520px minimum width;
   on 768px portrait that overflows the main content area. Wrapper applies
   horizontal scroll + fade hint on the right edge. */
.bs-settings-scroll {
	position: relative;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.bs-settings-scroll::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 24px;
	background: linear-gradient(to right, transparent, var(--bg-primary, #111827));
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.15s ease;
}
.bs-settings-scroll.scrolled::after {
	opacity: 0;
}
/* Activity log inner grid stays full-width but min-content prevents column
   crunching that would happen with the bare grid. */
.bs-settings-scroll > * {
	min-width: 560px;
}

/* Sticky save bar — slides up from bottom when document body is "dirty".
   Visible across full main-wrapper width; respects sidebar collapse via
   .app-layout flex math (sibling .sidebar takes its own width). */
.bs-sticky-save-bar {
	position: sticky;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	padding: 12px 24px;
	background: var(--bg-secondary);
	border-top: 1px solid var(--border-color);
	box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.25);
	transform: translateY(110%);
	opacity: 0;
	pointer-events: none;
	transition: transform 200ms ease, opacity 200ms ease;
	margin-top: 24px;
	/* Cyberpunk treatment under [data-theme="neon"]: the chamfered top edge is
	   intentionally subtle — bar is structural, not decorative. */
}
.bs-sticky-save-bar.is-dirty {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}
.bs-sticky-save-bar__status {
	margin-right: auto;
	font-size: 13px;
	color: var(--text-muted);
}
.bs-sticky-save-bar__status[data-dirty="true"] {
	color: var(--accent-yellow, #f59e0b);
	font-weight: 600;
}
.bs-sticky-save-bar__btn {
	min-height: 40px;
	padding: 8px 18px;
	border-radius: var(--radius-lg);
	font-size: 14px;
	font-weight: 600;
	border: 1px solid transparent;
	cursor: pointer;
	transition: opacity 150ms ease, background 150ms ease;
}
.bs-sticky-save-bar__btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.bs-sticky-save-bar__btn--cancel {
	background: var(--bg-tertiary, var(--bg-primary));
	color: var(--text-primary);
	border-color: var(--border-color);
}
.bs-sticky-save-bar__btn--save {
	background: var(--accent-blue);
	color: #fff;
}
.bs-sticky-save-bar__btn--save:hover:not(:disabled) {
	filter: brightness(1.1);
}

/* Reserve scroll padding so the last form item is never hidden under the bar.
   Applied on the bucket body so it persists whether or not the bar is currently
   visible (avoid layout shift on dirty toggle). */
body[data-bucket="settings"] #mainContent,
body[data-bucket="settings"] main {
	padding-bottom: 80px;
}

/* Tablet portrait: extra breathing room around the save bar; reduce horizontal
   padding so buttons don't crowd the screen edge. */
@media (max-width: 768px) {
	.bs-sticky-save-bar {
		padding: 10px 16px;
	}
	.bs-sticky-save-bar__status {
		display: none;
	}
}
@media (max-width: 480px) {
	.bs-sticky-save-bar {
		flex-wrap: wrap;
	}
	.bs-sticky-save-bar__btn {
		flex: 1;
	}
}

/* Reduced motion: the slide-up becomes an instant show/hide. */
@media (prefers-reduced-motion: reduce) {
	.bs-sticky-save-bar {
		transition: none;
	}
}

/* =============================================================================
   T086 (2026-05-24): Impersonation banner — sticky red bar injected into
   the top of every authenticated admin-dashboard page when the session is
   impersonated (req.session.impersonatedBy set). The bar is created by
   middleware/impersonation-banner.js via DOM in an inline IIFE; styles
   below are belt-and-suspenders (the IIFE also sets inline cssText), and
   primarily exist so:
     1. Print stylesheets hide the banner cleanly.
     2. The body padding-top survives later JS that bashes body.style.
     3. Reduced-motion users don't get any animation surprises.

   Selector hooks the IDs the IIFE assigns. If you rename IDs in the
   middleware, update both places + recompute the CSP hash.
   ============================================================================= */
#__bracketspot_impersonation_banner_root__ > div[role="alert"] {
	background: #dc2626;
	color: #fff;
	font-weight: 600;
}

@media print {
	#__bracketspot_impersonation_banner_root__,
	#__bracketspot_impersonation_banner__ {
		display: none !important;
	}
	/* Undo the body padding-top so prints don't have a stranded gap. */
	body { padding-top: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
	#__bracketspot_impersonation_banner_root__ * {
		transition: none !important;
		animation: none !important;
	}
}

/* ============================================
   T156 (Vectorheart PR-C-4): [data-theme="vector"] Tailwind overrides.
   Mirrors the dark-theme override block earlier in this file (~line 1118).
   Vector uses the same --bg-secondary / --bg-tertiary / --bg-hover /
   --border-color / --text-secondary / --text-muted vars as the other dark
   themes; the vars themselves carry the Vectorheart palette per
   public/src/styles/tokens.css [data-theme="vector"] block (also T156).

   Appended as a standalone block (rather than added to the existing
   comma-separated dark-theme selector lists) for clean diff. CSS cascade
   means these rules apply independently — same precedence as the original
   dark-theme overrides.
   ============================================ */

[data-theme="vector"] .bg-gray-800,
[data-theme="vector"] .bg-gray-900 {
	background-color: var(--bg-secondary);
}

[data-theme="vector"] .bg-gray-700 {
	background-color: var(--bg-tertiary);
}

[data-theme="vector"] .bg-gray-600 {
	background-color: var(--bg-hover);
}

[data-theme="vector"] .border-gray-700,
[data-theme="vector"] .border-gray-600 {
	border-color: var(--border-color);
}

[data-theme="vector"] .text-gray-300,
[data-theme="vector"] .text-gray-400 {
	color: var(--text-secondary);
}

[data-theme="vector"] .text-gray-500,
[data-theme="vector"] .text-gray-600 {
	color: var(--text-muted);
}

[data-theme="vector"] .hover\:bg-gray-700:hover {
	background-color: var(--bg-tertiary);
}

[data-theme="vector"] .hover\:bg-gray-600:hover {
	background-color: var(--bg-hover);
}

[data-theme="vector"] input,
[data-theme="vector"] select,
[data-theme="vector"] textarea {
	background-color: var(--bg-primary);
	border-color: var(--border-color);
	color: var(--text-primary);
}

/* PWA migration banner — T201 (Phase 4A, 2026-05-29). Shown one-time to
   installed-home-screen users when the service worker is sunset. Constructed
   by /js/migration-banner.js via safe DOM APIs. Token names match this file's
   :root palette (NOT the --surface-elevated/--accent names in the design-doc
   reference snippet, which don't exist here). Removable ~90 days post-4B. */
.pwa-migration-banner {
	position: fixed;
	bottom: 16px;
	left: 16px;
	right: 16px;
	z-index: 9999;
	max-width: 480px;
	margin: 0 auto;
	background: var(--bg-secondary, #1f2937);
	color: var(--text-primary, #f3f4f6);
	border: 1px solid var(--border-color, #2a2a3a);
	border-radius: var(--radius-xl);
	padding: 16px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.pwa-migration-banner__inner {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pwa-migration-banner__inner strong {
	font-size: 1rem;
}

.pwa-migration-banner__inner p {
	margin: 0;
	font-size: 0.875rem;
	color: var(--text-secondary, #8a8f99);
	line-height: 1.4;
}

.pwa-migration-banner__dismiss {
	align-self: flex-start;
	margin-top: 8px;
	background: var(--accent-blue, #00d4ff);
	color: var(--text-inverse, #0a0a0f);
	border: none;
	padding: 8px 16px;
	border-radius: var(--radius-md);
	font-weight: 600;
	cursor: pointer;
}

.pwa-migration-banner__dismiss:hover {
	background: var(--accent-blue-hover, #00b8e0);
}

.pwa-migration-banner__dismiss:focus-visible {
	outline: 2px solid var(--accent-blue, #00d4ff);
	outline-offset: 2px;
}

/* Coarse-pointer touch target (design-doc §6 rec #8: >=44px on touch). */
@media (any-pointer: coarse) {
	.pwa-migration-banner__dismiss {
		min-block-size: 44px;
		min-inline-size: 44px;
	}
}

/* ============================================================================
   ARCTIC — MINIMALIST MONOCHROME EDITORIAL LAYER  (reskin 2026-06-04)
   ----------------------------------------------------------------------------
   CSS-only, scoped to [data-theme="arctic"]; NO markup changes. Lands at the
   end of the file so its font + component rules win by source order over the
   earlier shared blocks. Pairs with the monochrome token block (~line 130).
   Design: docs/plans/2026-06-04-arctic-monochrome-editorial-theme-design.md
   Pure B&W + ONE gray (#525252). The only non-monochrome hues are the two
   FUNCTIONAL status accents: --accent-green (#2e5e4e, winner/success) and
   --accent-red (#c8102e, live/danger), always paired with a label/glyph cue.
   ============================================================================ */

/* --- Fonts: serif display + serif body + mono labels (override the shared
       Inter/Oswald block ~line 376 by source order) --- */
[data-theme="arctic"] {
	--font-primary: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--font-display: 'Playfair Display', Georgia, serif;
	--font-mono: 'JetBrains Mono', 'Courier New', monospace;
}

/* --- Zero radius (Royal-style token zeroing — keeps the radius-token forward-guard
       happy) so every var(--radius-*) component renders sharp. --- */
[data-theme="arctic"] {
	--radius-2xs: 0;
	--radius-xs: 0;
	--radius-sm: 0;
	--radius-md: 0;
	--radius-lg: 0;
	--radius-xl: 0;
	--radius-2xl: 0;
	--radius-pill: 0;
	--radius-circle: 0;
}
/* Also flatten Tailwind rounded-* utilities (which use literal radii, not tokens).
   html[...] specificity (0,1,1) beats Tailwind's 0,1,0 regardless of CDN inject
   order; the bare `0` value satisfies the radius-token forward-guard. --- */
html[data-theme="arctic"] *,
html[data-theme="arctic"] *::before,
html[data-theme="arctic"] *::after {
	border-radius: 0;
}
/* --- Zero-shadow sweep ("no depth"). NOTE: this also nukes Tailwind focus:ring
       (box-shadow based), so the :focus-visible outline rules below restore focus. --- */
[data-theme="arctic"] *,
[data-theme="arctic"] *::before,
[data-theme="arctic"] *::after {
	box-shadow: none !important;
}

/* --- Typography tiers --- */
[data-theme="arctic"] h1,
[data-theme="arctic"] h2,
[data-theme="arctic"] h3,
[data-theme="arctic"] h4,
[data-theme="arctic"] .page-title,
[data-theme="arctic"] .modal-title {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.12;
}
[data-theme="arctic"] h1,
[data-theme="arctic"] .page-title {
	font-weight: 900;
	letter-spacing: -0.03em;
}
[data-theme="arctic"] body {
	line-height: 1.6;
}
/* Mono labels: buttons, table headers, badges, nav tags */
[data-theme="arctic"] button,
[data-theme="arctic"] .btn,
[data-theme="arctic"] table th,
[data-theme="arctic"] .badge,
[data-theme="arctic"] .status-badge {
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
[data-theme="arctic"] table th {
	font-size: 0.72rem;
	border-bottom: 2px solid #000;
}

/* ----------------------------------------------------------------------------
   Chromatic Tailwind neutralization — the existing arctic blocks only remap
   gray-*; these neutralize the color utilities buttons/badges actually use
   (inventory taken from admin-dashboard/public 2026-06-04).
   ---------------------------------------------------------------------------- */
/* → BLACK (info / accent / primary). color:#fff wins over the earlier
   .text-white→#000 remap by source order, preventing black-on-black. */
[data-theme="arctic"] .bg-blue-500,
[data-theme="arctic"] .bg-blue-600,
[data-theme="arctic"] .bg-blue-700,
[data-theme="arctic"] .bg-indigo-600,
[data-theme="arctic"] .bg-indigo-700,
[data-theme="arctic"] .bg-purple-500,
[data-theme="arctic"] .bg-purple-600,
[data-theme="arctic"] .bg-purple-700,
[data-theme="arctic"] .bg-violet-600,
[data-theme="arctic"] .bg-sky-600,
[data-theme="arctic"] .bg-cyan-600,
[data-theme="arctic"] .bg-teal-600,
[data-theme="arctic"] .bg-pink-600 {
	background-color: #000;
	color: #fff;
}
/* → FUNCTIONAL GREEN (success / winner / active) */
[data-theme="arctic"] .bg-green-400,
[data-theme="arctic"] .bg-green-500,
[data-theme="arctic"] .bg-green-600,
[data-theme="arctic"] .bg-green-700,
[data-theme="arctic"] .bg-emerald-500,
[data-theme="arctic"] .bg-emerald-600,
[data-theme="arctic"] .bg-lime-600 {
	background-color: var(--accent-green);
	color: #fff;
}
/* → FUNCTIONAL RED (danger / live / underway) */
[data-theme="arctic"] .bg-red-400,
[data-theme="arctic"] .bg-red-500,
[data-theme="arctic"] .bg-red-600,
[data-theme="arctic"] .bg-red-700,
[data-theme="arctic"] .bg-rose-600 {
	background-color: var(--accent-red);
	color: #fff;
}
/* → WARNING (not a sanctioned hue) → dark gray, white text */
[data-theme="arctic"] .bg-yellow-400,
[data-theme="arctic"] .bg-yellow-500,
[data-theme="arctic"] .bg-yellow-600,
[data-theme="arctic"] .bg-yellow-700,
[data-theme="arctic"] .bg-amber-500,
[data-theme="arctic"] .bg-amber-600,
[data-theme="arctic"] .bg-orange-600,
[data-theme="arctic"] .bg-orange-700 {
	background-color: #525252;
	color: #fff;
}
/* Light tints (50–200) → off-white panel, black text */
[data-theme="arctic"] .bg-blue-50,
[data-theme="arctic"] .bg-green-100,
[data-theme="arctic"] .bg-red-100,
[data-theme="arctic"] .bg-orange-100,
[data-theme="arctic"] .bg-yellow-100 {
	background-color: #f5f5f5;
	color: #000;
}
/* Deep (800–900) → near-black panel, white text */
[data-theme="arctic"] .bg-blue-900,
[data-theme="arctic"] .bg-purple-900,
[data-theme="arctic"] .bg-cyan-900,
[data-theme="arctic"] .bg-green-900,
[data-theme="arctic"] .bg-yellow-900,
[data-theme="arctic"] .bg-red-800,
[data-theme="arctic"] .bg-red-900 {
	background-color: #1a1a1a;
	color: #fff;
}

/* Foreground on the DARK chromatic backgrounds: force descendants white so nested
   .text-white and currentColor SVG icons (e.g. the header logo chip — bg-blue-600
   square with a white-stroke SVG) don't render black-on-black. The earlier
   .text-white→#000 remap (line ~875) otherwise wins on the child; `… *` at
   specificity (0,2,1) beats it. Scoped to the dark groups only — the light tints
   (#f5f5f5) keep dark foreground. */
[data-theme="arctic"] .bg-blue-500 *,
[data-theme="arctic"] .bg-blue-600 *,
[data-theme="arctic"] .bg-blue-700 *,
[data-theme="arctic"] .bg-blue-900 *,
[data-theme="arctic"] .bg-indigo-600 *,
[data-theme="arctic"] .bg-indigo-700 *,
[data-theme="arctic"] .bg-purple-500 *,
[data-theme="arctic"] .bg-purple-600 *,
[data-theme="arctic"] .bg-purple-700 *,
[data-theme="arctic"] .bg-purple-900 *,
[data-theme="arctic"] .bg-violet-600 *,
[data-theme="arctic"] .bg-sky-600 *,
[data-theme="arctic"] .bg-cyan-600 *,
[data-theme="arctic"] .bg-cyan-900 *,
[data-theme="arctic"] .bg-teal-600 *,
[data-theme="arctic"] .bg-pink-600 *,
[data-theme="arctic"] .bg-green-400 *,
[data-theme="arctic"] .bg-green-500 *,
[data-theme="arctic"] .bg-green-600 *,
[data-theme="arctic"] .bg-green-700 *,
[data-theme="arctic"] .bg-green-900 *,
[data-theme="arctic"] .bg-emerald-500 *,
[data-theme="arctic"] .bg-emerald-600 *,
[data-theme="arctic"] .bg-lime-600 *,
[data-theme="arctic"] .bg-red-400 *,
[data-theme="arctic"] .bg-red-500 *,
[data-theme="arctic"] .bg-red-600 *,
[data-theme="arctic"] .bg-red-700 *,
[data-theme="arctic"] .bg-red-800 *,
[data-theme="arctic"] .bg-red-900 *,
[data-theme="arctic"] .bg-rose-600 *,
[data-theme="arctic"] .bg-yellow-400 *,
[data-theme="arctic"] .bg-yellow-500 *,
[data-theme="arctic"] .bg-yellow-600 *,
[data-theme="arctic"] .bg-yellow-700 *,
[data-theme="arctic"] .bg-yellow-900 *,
[data-theme="arctic"] .bg-amber-500 *,
[data-theme="arctic"] .bg-amber-600 *,
[data-theme="arctic"] .bg-orange-600 *,
[data-theme="arctic"] .bg-orange-700 * {
	color: #fff;
}

/* Text utilities */
[data-theme="arctic"] .text-green-100,
[data-theme="arctic"] .text-green-300,
[data-theme="arctic"] .text-green-400,
[data-theme="arctic"] .text-green-500,
[data-theme="arctic"] .text-green-600,
[data-theme="arctic"] .text-green-700,
[data-theme="arctic"] .text-emerald-400 {
	color: var(--accent-green);
}
[data-theme="arctic"] .text-red-200,
[data-theme="arctic"] .text-red-300,
[data-theme="arctic"] .text-red-400,
[data-theme="arctic"] .text-red-500,
[data-theme="arctic"] .text-red-600,
[data-theme="arctic"] .text-red-700 {
	color: var(--accent-red);
}
[data-theme="arctic"] .text-yellow-100,
[data-theme="arctic"] .text-yellow-200,
[data-theme="arctic"] .text-yellow-300,
[data-theme="arctic"] .text-yellow-400,
[data-theme="arctic"] .text-yellow-500,
[data-theme="arctic"] .text-yellow-600,
[data-theme="arctic"] .text-amber-400,
[data-theme="arctic"] .text-amber-500,
[data-theme="arctic"] .text-orange-400,
[data-theme="arctic"] .text-orange-700 {
	color: #525252;
}
[data-theme="arctic"] .text-blue-100,
[data-theme="arctic"] .text-blue-200,
[data-theme="arctic"] .text-blue-300,
[data-theme="arctic"] .text-blue-400,
[data-theme="arctic"] .text-blue-500,
[data-theme="arctic"] .text-blue-600,
[data-theme="arctic"] .text-purple-100,
[data-theme="arctic"] .text-purple-200,
[data-theme="arctic"] .text-purple-300,
[data-theme="arctic"] .text-purple-400,
[data-theme="arctic"] .text-purple-500,
[data-theme="arctic"] .text-purple-600,
[data-theme="arctic"] .text-cyan-400,
[data-theme="arctic"] .text-cyan-500,
[data-theme="arctic"] .text-pink-400 {
	color: #000;
}

/* Borders */
[data-theme="arctic"] .border-green-400,
[data-theme="arctic"] .border-green-500,
[data-theme="arctic"] .border-green-600,
[data-theme="arctic"] .border-green-700,
[data-theme="arctic"] .border-emerald-500 {
	border-color: var(--accent-green);
}
[data-theme="arctic"] .border-red-400,
[data-theme="arctic"] .border-red-500,
[data-theme="arctic"] .border-red-600,
[data-theme="arctic"] .border-red-700 {
	border-color: var(--accent-red);
}
[data-theme="arctic"] .border-blue-400,
[data-theme="arctic"] .border-blue-500,
[data-theme="arctic"] .border-blue-700,
[data-theme="arctic"] .border-purple-500,
[data-theme="arctic"] .border-pink-500,
[data-theme="arctic"] .border-yellow-500,
[data-theme="arctic"] .border-yellow-600,
[data-theme="arctic"] .border-yellow-700,
[data-theme="arctic"] .border-amber-500,
[data-theme="arctic"] .border-orange-400 {
	border-color: #000;
}

/* ----------------------------------------------------------------------------
   Buttons — uppercase mono (set above) + editorial hover INVERSION.
   box-shadow is swept to none, so the hover edge uses outline (layout-safe).
   ---------------------------------------------------------------------------- */
[data-theme="arctic"] button,
[data-theme="arctic"] .btn,
[data-theme="arctic"] a.bg-blue-600,
[data-theme="arctic"] a.bg-green-600,
[data-theme="arctic"] a.bg-red-600 {
	transition: background-color 0.1s, color 0.1s, outline-color 0.1s;
}
/* info/primary (→black) hover → invert to white/black */
[data-theme="arctic"] .hover\:bg-blue-700:hover,
[data-theme="arctic"] .hover\:bg-blue-500:hover,
[data-theme="arctic"] .hover\:bg-purple-700:hover,
[data-theme="arctic"] .hover\:bg-purple-500:hover {
	background-color: #fff;
	color: #000;
	outline: 2px solid #000;
	outline-offset: -2px;
}
/* success (→green) hover → invert to white, keep green ink + edge */
[data-theme="arctic"] .hover\:bg-green-700:hover,
[data-theme="arctic"] .hover\:bg-green-500:hover {
	background-color: #fff;
	color: var(--accent-green);
	outline: 2px solid var(--accent-green);
	outline-offset: -2px;
}
/* danger (→red) hover → invert to white, keep red ink + edge */
[data-theme="arctic"] .hover\:bg-red-700:hover,
[data-theme="arctic"] .hover\:bg-red-600:hover,
[data-theme="arctic"] .hover\:bg-red-500:hover,
[data-theme="arctic"] .hover\:bg-red-900:hover {
	background-color: #fff;
	color: var(--accent-red);
	outline: 2px solid var(--accent-red);
	outline-offset: -2px;
}
/* warning hover → invert to white/black */
[data-theme="arctic"] .hover\:bg-yellow-500:hover,
[data-theme="arctic"] .hover\:bg-yellow-700:hover {
	background-color: #fff;
	color: #000;
	outline: 2px solid #000;
	outline-offset: -2px;
}

/* ----------------------------------------------------------------------------
   Inputs — bottom-rule only; focus thickens the rule (no colored ring).
   ---------------------------------------------------------------------------- */
[data-theme="arctic"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
[data-theme="arctic"] select,
[data-theme="arctic"] textarea {
	border: 0;
	border-bottom: 2px solid #000;
	background-color: transparent;
}
[data-theme="arctic"] input:focus,
[data-theme="arctic"] select:focus,
[data-theme="arctic"] textarea:focus {
	border-bottom-width: 4px;
	outline: none;
}
[data-theme="arctic"] input::placeholder,
[data-theme="arctic"] textarea::placeholder {
	font-style: italic;
	color: #525252;
}

/* ----------------------------------------------------------------------------
   Focus-visible (a11y) — REQUIRED: the zero-shadow sweep removed Tailwind's
   focus:ring. A solid black outline is immune to the box-shadow sweep.
   ---------------------------------------------------------------------------- */
[data-theme="arctic"] a:focus-visible,
[data-theme="arctic"] button:focus-visible,
[data-theme="arctic"] .btn:focus-visible,
[data-theme="arctic"] [role="button"]:focus-visible,
[data-theme="arctic"] [tabindex]:focus-visible {
	outline: 3px solid #000;
	outline-offset: 3px;
}
[data-theme="arctic"] input:focus-visible,
[data-theme="arctic"] textarea:focus-visible {
	outline: none;
	border-bottom-width: 4px;
}
/* <select> chrome doesn't reliably paint a bottom-border across platforms, so the
   border-thicken signal can be invisible — keep a real outline for keyboard focus. */
[data-theme="arctic"] select:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
   Editorial details — thick <hr> rules + a whisper-faint hairline paper grain.
   ---------------------------------------------------------------------------- */
[data-theme="arctic"] hr {
	border: 0;
	border-top: 4px solid #000;
}
[data-theme="arctic"] body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9998;
	opacity: 0.015;
	background-image: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 3px,
		#000 3px,
		#000 4px
	);
}