/* =================================================
   THEME SYSTEM (CSS variables, switched by data-theme)
   ================================================= */

:root,
[data-theme="aurora"] {
  --bg: #08081a;
  --bg-elev: rgba(255, 255, 255, 0.03);
  --text: #f5f5f7;
  --accent: #b794f6;
  --accent-2: #67e8f9;
  --accent-on: #08081a;
  --success: #34d399;
  --danger: #f87171;
  --mute-1: #a8a8b8;
  --mute-2: #6e6e80;
  --mute-3: #3a3a4a;
  --line-1: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.10);
  --line-3: rgba(255, 255, 255, 0.20);
  --row-hover-bg: rgba(183, 148, 246, 0.06);
  --font-display: 'Inter', sans-serif;
  --font-display-weight: 700;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Inter', sans-serif;
  --display-tracking: -0.04em;
  --grain-blend: overlay;
  --grain-opacity: 0;
  --accent-glow: 0 0 30px rgba(183, 148, 246, 0.5);
}

[data-theme="bento"] {
  --bg: #0a0a0c;
  --bg-elev: #16161a;
  --text: #fafafa;
  --accent: #f97316;
  --accent-2: #fbbf24;
  --accent-on: #0a0a0c;
  --success: #22c55e;
  --danger: #ef4444;
  --mute-1: #a1a1aa;
  --mute-2: #71717a;
  --mute-3: #3f3f46;
  --line-1: rgba(255, 255, 255, 0.05);
  --line-2: rgba(255, 255, 255, 0.10);
  --line-3: rgba(255, 255, 255, 0.20);
  --row-hover-bg: rgba(249, 115, 22, 0.06);
  --font-display: 'Inter', sans-serif;
  --font-display-weight: 700;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Inter', sans-serif;
  --display-tracking: -0.03em;
  --grain-blend: overlay;
  --grain-opacity: 0.03;
  --accent-glow: 0 0 24px rgba(249, 115, 22, 0.3);
}

[data-theme="minimal"] {
  --bg: #fafaf9;
  --bg-elev: #ffffff;
  --text: #0a0a0a;
  --accent: #ef4444;
  --accent-2: #f43f5e;
  --accent-on: #ffffff;
  --success: #16a34a;
  --danger: #ef4444;
  --mute-1: #525252;
  --mute-2: #737373;
  --mute-3: #d4d4d4;
  --line-1: rgba(0, 0, 0, 0.05);
  --line-2: rgba(0, 0, 0, 0.10);
  --line-3: rgba(0, 0, 0, 0.20);
  --row-hover-bg: rgba(239, 68, 68, 0.04);
  --font-display: 'Inter', sans-serif;
  --font-display-weight: 700;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Inter', sans-serif;
  --display-tracking: -0.04em;
  --grain-blend: multiply;
  --grain-opacity: 0;
  --accent-glow: none;
}

[data-theme="neon"] {
  --bg: #050214;
  --bg-elev: #0c0728;
  --text: #e9e7ff;
  --accent: #ff00ff;
  --accent-2: #00ffff;
  --accent-on: #050214;
  --success: #00ff66;
  --danger: #ff0080;
  --mute-1: #8b7fb5;
  --mute-2: #4a3e7a;
  --mute-3: #2a1f50;
  --line-1: rgba(255, 0, 255, 0.10);
  --line-2: rgba(255, 0, 255, 0.20);
  --line-3: rgba(255, 0, 255, 0.40);
  --row-hover-bg: rgba(255, 0, 255, 0.08);
  --font-display: 'Inter', sans-serif;
  --font-display-weight: 800;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Inter', sans-serif;
  --display-tracking: -0.04em;
  --grain-blend: screen;
  --grain-opacity: 0.05;
  --accent-glow: 0 0 25px var(--accent), 0 0 50px var(--accent);
}

[data-theme="magazine"] {
  --bg: #faf6f0;
  --bg-elev: #ffffff;
  --text: #1a1610;
  --accent: #dc2626;
  --accent-2: #fbbf24;
  --accent-on: #ffffff;
  --success: #15803d;
  --danger: #dc2626;
  --mute-1: #6b6358;
  --mute-2: #9b9080;
  --mute-3: #d6cdb8;
  --line-1: rgba(26, 22, 16, 0.08);
  --line-2: rgba(26, 22, 16, 0.15);
  --line-3: rgba(26, 22, 16, 0.35);
  --row-hover-bg: rgba(220, 38, 38, 0.05);
  --font-display: 'Playfair Display', Georgia, serif;
  --font-display-weight: 900;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Inter', sans-serif;
  --display-tracking: -0.02em;
  --grain-blend: multiply;
  --grain-opacity: 0.05;
  --accent-glow: none;
}

[data-theme="newspaper"] {
  --bg: #f4ede0;
  --bg-elev: #ebe2cf;
  --text: #14110a;
  --accent: #b1141a;
  --accent-2: #14110a;
  --accent-on: #f4ede0;
  --success: #2d5a27;
  --danger: #b1141a;
  --mute-1: #6a5d44;
  --mute-2: #948668;
  --mute-3: #c5b89c;
  --line-1: rgba(20, 17, 10, 0.10);
  --line-2: rgba(20, 17, 10, 0.20);
  --line-3: rgba(20, 17, 10, 0.45);
  --row-hover-bg: rgba(177, 20, 26, 0.05);
  --font-display: 'Playfair Display', Georgia, serif;
  --font-display-weight: 900;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Inter', sans-serif;
  --display-tracking: -0.02em;
  --grain-blend: multiply;
  --grain-opacity: 0.08;
  --accent-glow: none;
}

[data-theme="terminal"] {
  --bg: #050a05;
  --bg-elev: #0a1408;
  --text: #c8ffc8;
  --accent: #00ff66;
  --accent-2: #ffb000;
  --accent-on: #050a05;
  --success: #00ff66;
  --danger: #ff4444;
  --mute-1: #5b9b5b;
  --mute-2: #3a6a3a;
  --mute-3: #1f3a1f;
  --line-1: rgba(0, 255, 102, 0.10);
  --line-2: rgba(0, 255, 102, 0.20);
  --line-3: rgba(0, 255, 102, 0.40);
  --row-hover-bg: rgba(0, 255, 102, 0.06);
  --font-display: 'JetBrains Mono', monospace;
  --font-display-weight: 700;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'JetBrains Mono', monospace;
  --display-tracking: -0.02em;
  --grain-blend: screen;
  --grain-opacity: 0.04;
  --accent-glow: 0 0 12px var(--accent);
}

[data-theme="gaming"] {
  --bg: #0a0418;
  --bg-elev: #150828;
  --text: #ffffff;
  --accent: #ff71ce;
  --accent-2: #01cdfe;
  --accent-on: #0a0418;
  --success: #05ffa1;
  --danger: #ff4d6d;
  --mute-1: #8a7eb5;
  --mute-2: #5e4d8a;
  --mute-3: #3a2c6a;
  --line-1: rgba(255, 113, 206, 0.10);
  --line-2: rgba(255, 113, 206, 0.20);
  --line-3: rgba(255, 113, 206, 0.40);
  --row-hover-bg: rgba(255, 113, 206, 0.08);
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-display-weight: 700;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Inter', sans-serif;
  --display-tracking: -0.04em;
  --grain-blend: overlay;
  --grain-opacity: 0.05;
  --accent-glow: 0 0 20px rgba(255, 113, 206, 0.7), 0 0 40px rgba(1, 205, 254, 0.4);
}

[data-theme="zen"] {
  --bg: #fafaf9;
  --bg-elev: #ffffff;
  --text: #0a0a0a;
  --accent: #ef4444;
  --accent-2: #fb7185;
  --accent-on: #ffffff;
  --success: #16a34a;
  --danger: #ef4444;
  --mute-1: #525252;
  --mute-2: #737373;
  --mute-3: #d4d4d4;
  --line-1: rgba(0, 0, 0, 0.05);
  --line-2: rgba(0, 0, 0, 0.10);
  --line-3: rgba(0, 0, 0, 0.20);
  --row-hover-bg: rgba(239, 68, 68, 0.04);
  --font-display: 'Inter', sans-serif;
  --font-display-weight: 700;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Inter', sans-serif;
  --display-tracking: -0.04em;
  --grain-blend: multiply;
  --grain-opacity: 0;
  --accent-glow: none;
}

[data-theme="swiss"] {
  --bg: #000;
  --bg-elev: #0a0a0a;
  --text: #fafafa;
  --accent: #d4ff00;
  --accent-2: #d4ff00;
  --accent-on: #000;
  --success: #00ff88;
  --danger: #ff3b30;
  --mute-1: #525252;
  --mute-2: #404040;
  --mute-3: #262626;
  --line-1: rgba(255, 255, 255, 0.05);
  --line-2: rgba(255, 255, 255, 0.10);
  --line-3: rgba(255, 255, 255, 0.20);
  --row-hover-bg: rgba(212, 255, 0, 0.05);
  --font-display: 'Inter', sans-serif;
  --font-display-weight: 900;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Inter', sans-serif;
  --display-tracking: -0.06em;
  --grain-blend: overlay;
  --grain-opacity: 0.04;
  --accent-glow: none;
}

[data-theme="mountains"] {
  --bg: #0e1521;
  --bg-elev: rgba(255, 255, 255, 0.04);
  --text: #f4ede0;
  --accent: #f59e0b;
  --accent-2: #fb923c;
  --accent-on: #0e1521;
  --success: #84cc16;
  --danger: #ef4444;
  --mute-1: #a89e88;
  --mute-2: #6b6457;
  --mute-3: #3a352c;
  --line-1: rgba(245, 158, 11, 0.10);
  --line-2: rgba(245, 158, 11, 0.18);
  --line-3: rgba(245, 158, 11, 0.35);
  --row-hover-bg: rgba(245, 158, 11, 0.06);
  --font-display: 'Inter', sans-serif;
  --font-display-weight: 800;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Inter', sans-serif;
  --display-tracking: -0.04em;
  --grain-blend: overlay;
  --grain-opacity: 0.06;
  --accent-glow: 0 0 30px rgba(245, 158, 11, 0.4);
}

[data-theme="galaxy"] {
  --bg: #050818;
  --bg-elev: #0a0f28;
  --text: #f5f5f7;
  --accent: #fbbf24;
  --accent-2: #a78bfa;
  --accent-on: #050818;
  --success: #34d399;
  --danger: #f87171;
  --mute-1: #8b8ba8;
  --mute-2: #5a5a78;
  --mute-3: #2a2a44;
  --line-1: rgba(251, 191, 36, 0.10);
  --line-2: rgba(251, 191, 36, 0.20);
  --line-3: rgba(251, 191, 36, 0.40);
  --row-hover-bg: rgba(251, 191, 36, 0.05);
  --font-display: 'Inter', sans-serif;
  --font-display-weight: 700;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Inter', sans-serif;
  --display-tracking: -0.04em;
  --grain-blend: screen;
  --grain-opacity: 0.04;
  --accent-glow: 0 0 30px rgba(251, 191, 36, 0.5);
}

[data-theme="pro"] {
  --bg: #0a0a0a;
  --bg-elev: #111114;
  --text: #fafafa;
  --accent: #00ffae;
  --accent-2: #00b4ff;
  --accent-on: #0a0a0a;
  --success: #00ffae;
  --danger: #ff4060;
  --mute-1: #888;
  --mute-2: #555;
  --mute-3: #2a2a2a;
  --line-1: rgba(255, 255, 255, 0.05);
  --line-2: rgba(255, 255, 255, 0.10);
  --line-3: rgba(255, 255, 255, 0.20);
  --row-hover-bg: rgba(0, 255, 174, 0.04);
  --font-display: 'Inter', sans-serif;
  --font-display-weight: 600;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Inter', sans-serif;
  --display-tracking: -0.025em;
  --grain-blend: overlay;
  --grain-opacity: 0;
  --accent-glow: 0 0 20px rgba(0, 255, 174, 0.4);
}

/* =================================================
   GLOBAL RESET / BASE
   ================================================= */

*, *::before, *::after { box-sizing: border-box; }
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  transition: background-color 0.3s ease, color 0.3s ease;
}
html { scroll-behavior: smooth; }

::selection { background: var(--accent); color: var(--accent-on); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--mute-3); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* =================================================
   TAILWIND OVERRIDES (theme-aware)
   ================================================= */

.bg-black { background-color: var(--bg) !important; }
body.bg-black { background-color: var(--bg) !important; }
.text-white { color: var(--text) !important; }
.text-electric { color: var(--accent) !important; }
.bg-electric { background-color: var(--accent) !important; }
.border-electric { border-color: var(--accent) !important; }

/* Status colors */
.text-success { color: var(--success) !important; }
.bg-success { background-color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.bg-danger { background-color: var(--danger) !important; }
.border-success { border-color: var(--success) !important; }
.border-danger { border-color: var(--danger) !important; }

/* Mutes */
.text-zinc-500 { color: var(--mute-1) !important; }
.text-zinc-600 { color: var(--mute-2) !important; }
.text-zinc-700 { color: var(--mute-3) !important; }

/* Borders */
.border-white\/5 { border-color: var(--line-1) !important; }
.border-white\/10 { border-color: var(--line-2) !important; }
.border-white\/20 { border-color: var(--line-3) !important; }

/* Backdrop */
.bg-black\/80 { background-color: color-mix(in srgb, var(--bg) 80%, transparent) !important; }

/* =================================================
   TYPOGRAPHY
   ================================================= */

.font-display {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 0.85;
}
.font-mono { font-family: var(--font-mono) !important; }

.tracking-mega-tight { letter-spacing: var(--display-tracking) !important; }

.txt-mega   { font-size: clamp(6rem, 18vw, 16rem); }
.txt-giant  { font-size: clamp(4rem, 12vw, 10rem); }
.txt-huge   { font-size: clamp(3rem, 8vw, 7rem); }

.label-mono {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.7rem;
  font-weight: 500;
}

/* =================================================
   STRUCTURE
   ================================================= */

.section-divider { border-top: 1px solid var(--line-2); }

.thin-line {
  height: 1px;
  background: var(--line-2);
}

[data-theme="paper"] .thin-line { height: 3px; background: transparent; border-top: 3px double var(--line-3); }

.electric-line {
  height: 2px;
  background: var(--accent);
}

[data-theme="cyber"] .electric-line { height: 1px; box-shadow: 0 0 8px var(--accent); }
[data-theme="arcade"] .electric-line { height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: var(--accent-glow); }

/* =================================================
   EFFECTS
   ================================================= */

.outline-text {
  -webkit-text-stroke: 2px var(--accent);
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.outline-text-white {
  -webkit-text-stroke: 1.5px var(--line-3);
  -webkit-text-fill-color: transparent;
  color: transparent;
}

[data-theme="cyber"] .outline-text { text-shadow: var(--accent-glow); }
[data-theme="arcade"] .outline-text { text-shadow: var(--accent-glow); }

/* Background grain */
.bg-grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  mix-blend-mode: var(--grain-blend);
}

/* Cyber-only: scan lines + grid */
[data-theme="cyber"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 0, 255, 0.025) 0px,
      rgba(255, 0, 255, 0.025) 1px,
      transparent 1px,
      transparent 3px
    );
}

[data-theme="cyber"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 0, 255, 0.03) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 40px 40px;
}

/* Arcade-only: horizon grid */
[data-theme="arcade"] body::before {
  content: '';
  position: fixed;
  bottom: 0;
  left: -10%;
  right: -10%;
  height: 50vh;
  pointer-events: none;
  background:
    linear-gradient(transparent, rgba(255, 113, 206, 0.06) 70%, rgba(1, 205, 254, 0.10)),
    linear-gradient(rgba(255, 113, 206, 0.15) 1px, transparent 1px) 0 0 / 100% 30px,
    linear-gradient(90deg, rgba(1, 205, 254, 0.10) 1px, transparent 1px) 0 0 / 30px 100%;
  transform: perspective(400px) rotateX(60deg);
  transform-origin: bottom;
  opacity: 0.4;
  z-index: 0;
}

/* Paper-only: subtle paper texture + masthead-like ornament */
[data-theme="paper"] {
  background-image:
    radial-gradient(ellipse at top, rgba(177, 20, 26, 0.03), transparent 60%);
}

/* Mono-only: ultra-clean (no overlays) */

/* =================================================
   PULSE DOT
   ================================================= */

@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(3); opacity: 0; }
}
.pulse-dot { position: relative; }
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: pulse-ring 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.flicker { animation: flicker 1.4s ease-in-out infinite; }

/* =================================================
   PROGRESS BAR
   ================================================= */

.bar-track {
  height: 4px;
  background: var(--line-1);
  position: relative;
  overflow: hidden;
}
.bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  box-shadow: var(--accent-glow);
}

[data-theme="paper"] .bar-track { height: 6px; background: var(--line-1); }
[data-theme="paper"] .bar-fill { background: var(--accent); }

/* =================================================
   ROW HOVER
   ================================================= */

.row-hover {
  position: relative;
  transition: background-color 0.2s ease;
}
.row-hover:hover { background: var(--row-hover-bg); }
.row-hover:hover .row-name { color: var(--accent); }

[data-theme="cyber"] .row-hover:hover .row-name { text-shadow: var(--accent-glow); }
[data-theme="arcade"] .row-hover:hover .row-name { text-shadow: var(--accent-glow); }

/* =================================================
   BUTTONS
   ================================================= */

.btn-electric {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: var(--accent);
  color: var(--accent-on);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all 0.2s ease;
  border: 2px solid var(--accent);
  box-shadow: var(--accent-glow);
}
.btn-electric:hover {
  background: transparent;
  color: var(--accent);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: transparent;
  color: var(--text);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all 0.2s ease;
  border: 1px solid var(--line-3);
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* =================================================
   THEME SWITCHER (top of page)
   ================================================= */

.theme-switcher {
  position: relative;
  z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid var(--line-1);
}

.theme-switcher-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.theme-pill {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0.4rem 0.7rem;
  background: transparent;
  color: var(--mute-1);
  border: 1px solid var(--line-2);
  cursor: pointer;
  transition: all 0.2s ease;
}
.theme-pill:hover {
  color: var(--text);
  border-color: var(--line-3);
}
.theme-pill.active {
  color: var(--accent-on);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--accent-glow);
}

/* Theme switcher label */
.theme-switcher-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.6rem;
  color: var(--mute-2);
  margin-right: auto;
}

/* =================================================
   RECHARTS THEMING
   ================================================= */

.recharts-cartesian-grid-horizontal line,
.recharts-cartesian-grid-vertical line {
  stroke: var(--line-1);
}
.recharts-tooltip-wrapper { outline: none !important; }
.recharts-default-tooltip {
  background: var(--bg) !important;
  border: 1px solid var(--accent) !important;
  border-radius: 0 !important;
  padding: 8px 12px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--text) !important;
  box-shadow: var(--accent-glow) !important;
}
.recharts-tooltip-label { color: var(--accent) !important; font-weight: 700 !important; margin-bottom: 4px !important; }
.recharts-tooltip-item { color: var(--text) !important; padding: 1px 0 !important; }

/* =================================================
   STATUS / MISC
   ================================================= */

.status-on { color: var(--success); }
.status-off { color: var(--danger); }

.section-marker {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.section-marker::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--accent);
}

@keyframes glitch-shift {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-1px, 1px); }
  40% { transform: translate(1px, -1px); }
  60% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 1px); }
}
.glitch-on-hover:hover { animation: glitch-shift 0.4s linear; }

[data-theme="cyber"] .glitch-on-hover:hover {
  text-shadow:
    2px 0 var(--accent-2),
    -2px 0 var(--accent),
    0 0 12px var(--accent);
}

/* =================================================
   THEME-SPECIFIC TWEAKS
   ================================================= */

/* PAPER: serif look on big numbers + masthead */
[data-theme="paper"] .label-mono {
  letter-spacing: 0.18em;
  font-weight: 700;
}
[data-theme="paper"] .row-hover:hover { background: rgba(177, 20, 26, 0.06); }

/* CYBER: brackets visual on section labels */
[data-theme="cyber"] .section-marker::before {
  background: var(--accent);
  box-shadow: var(--accent-glow);
}

/* ARCADE: text gradient secondary accent on outline-text-white */
[data-theme="arcade"] .outline-text-white {
  -webkit-text-stroke: 1.5px var(--accent-2);
}

/* MONO: serif numbers feel like Vogue cover */
[data-theme="mono"] .row-hover:hover { background: rgba(0, 0, 0, 0.04); }
[data-theme="mono"] .label-mono { font-weight: 600; }

/* =================================================
   PREMIUM HELPERS — used across new layouts
   ================================================= */

/* Glass card (used in Aurora + Minimal) */
.glass-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}
[data-theme="minimal"] .glass-card {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6) inset, 0 4px 24px -4px rgba(0, 0, 0, 0.06);
}

/* Bento cell - grid item */
.bento-cell {
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.bento-cell:hover {
  border-color: var(--line-3);
  transform: translateY(-2px);
}
.bento-cell.featured {
  background: linear-gradient(135deg, var(--bg-elev), color-mix(in srgb, var(--accent) 8%, var(--bg-elev)));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line-2));
}
[data-theme="bento"] .bento-cell.featured::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--accent), transparent 50%, var(--accent-2) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* KPI tile (Pro dashboard) */
.kpi-tile {
  background: var(--bg-elev);
  border: 1px solid var(--line-1);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  position: relative;
  overflow: hidden;
}
.kpi-tile-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.65rem;
  color: var(--mute-1);
}
.kpi-tile-value {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  letter-spacing: var(--display-tracking);
  font-size: 2.25rem;
  line-height: 1;
}
.kpi-tile-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
}
.kpi-tile-trend.up { color: var(--success); }
.kpi-tile-trend.down { color: var(--danger); }

/* Ring progress (Minimal) */
.ring-progress {
  position: relative;
  display: grid;
  place-items: center;
}
.ring-progress > svg { transform: rotate(-90deg); }
.ring-progress > svg circle.track { stroke: var(--mute-3); fill: none; }
.ring-progress > svg circle.fill {
  stroke: var(--accent);
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.ring-progress > .center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
}

/* Dot grid background (Pro/Aurora subtle) */
.dot-grid-bg {
  background-image: radial-gradient(circle, var(--line-2) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Mesh gradient bg (Aurora) */
.mesh-gradient {
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(183, 148, 246, 0.18), transparent 50%),
    radial-gradient(ellipse 70% 50% at 80% 30%, rgba(103, 232, 249, 0.15), transparent 50%),
    radial-gradient(ellipse 60% 80% at 50% 80%, rgba(244, 114, 182, 0.12), transparent 50%);
}

/* Spotlight on hover (mouse-tracking via JS sets --x, --y) */
.spotlight-hover {
  position: relative;
  overflow: hidden;
}
.spotlight-hover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(400px circle at var(--x, 50%) var(--y, 50%), color-mix(in srgb, var(--accent) 10%, transparent), transparent 50%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.spotlight-hover:hover::before { opacity: 1; }

/* Number ticker (large monospace tabular) */
.tab-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Tilted card (3D mouse rotation, applied via JS) */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
  will-change: transform;
}
.tilt-card-inner { transform: translateZ(0); }

/* Live pulse ring */
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  position: relative;
  flex-shrink: 0;
}
.live-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--success);
  animation: live-pulse 2s ease-out infinite;
}
@keyframes live-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(3); opacity: 0; }
}

/* Hairline divider */
.hairline { height: 1px; background: var(--line-2); }
.hairline-strong { height: 1px; background: var(--line-3); }

/* Aurora pane (transparent over webgl bg) */
.aurora-pane {
  background: rgba(8, 8, 26, 0.4);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

/* Aurora WebGL container */
.aurora-container {
  position: fixed;
  inset: 0;
  z-index: -10;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  opacity: 0.85;
}
.aurora-container canvas { display: block; width: 100% !important; height: 100% !important; }

/* GlareHover - sweep light across card on hover */
.glare-hover { position: relative; overflow: hidden; }
.glare-hover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.08) 50%, transparent 70%);
  transform: translateX(-100%);
  pointer-events: none;
  transition: transform 0.7s ease;
}
.glare-hover:hover::after { transform: translateX(100%); }
[data-theme="minimal"] .glare-hover::after { background: linear-gradient(110deg, transparent 30%, rgba(0, 0, 0, 0.05) 50%, transparent 70%); }

/* StarBorder (animated rotating gradient border) */
.star-border {
  position: relative;
  border-radius: 16px;
}
.star-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--star-angle, 0deg), transparent 0deg, var(--accent) 90deg, var(--accent-2) 180deg, var(--accent) 270deg, transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: star-rotate 6s linear infinite;
  pointer-events: none;
}
@property --star-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes star-rotate {
  to { --star-angle: 360deg; }
}

/* =================================================
   CONTINUOUS ANIMATIONS (always-on, per layout)
   ================================================= */

/* Floating blobs (background ambient motion) */
@keyframes float-blob-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(8vw, -5vh) scale(1.08); }
  66%      { transform: translate(-4vw, 6vh) scale(0.95); }
}
@keyframes float-blob-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-6vw, 8vh) scale(1.1); }
}
@keyframes float-blob-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(7vw, 5vh) scale(0.92); }
  80%      { transform: translate(-3vw, -6vh) scale(1.05); }
}

.float-bg {
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  overflow: hidden;
}
.float-bg .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.5;
  will-change: transform;
}

/* Pulsing glow — bardziej widoczny */
@keyframes glow-pulse-soft {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent), 0 0 0 0 color-mix(in srgb, var(--accent) 25%, transparent); }
  50%      { box-shadow: 0 0 80px 8px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 0 30px color-mix(in srgb, var(--accent) 8%, transparent); }
}
.glow-pulse { animation: glow-pulse-soft 3s ease-in-out infinite; }

/* Stronger scale breath */
@keyframes breath-soft {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}
.breath { animation: breath-soft 4s ease-in-out infinite; }

/* Number shimmer — szybszy + jaśniejszy peak */
@keyframes num-shimmer {
  0%, 100% { background-position: 200% center; }
  50%      { background-position: -100% center; }
}
.num-shimmer {
  background: linear-gradient(110deg, currentColor 25%, #ffffff 50%, currentColor 75%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: num-shimmer 3.5s ease-in-out infinite;
}

/* Akcent ring breath (na hero card) */
@keyframes accent-ring-breath {
  0%, 100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent),
      0 0 30px 0 color-mix(in srgb, var(--accent) 25%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent),
      0 0 80px 8px color-mix(in srgb, var(--accent) 35%, transparent);
  }
}
.accent-ring-breath { animation: accent-ring-breath 3.5s ease-in-out infinite; }

/* Sparkline line pulse (subtle glow breathing) */
@keyframes sparkPulse {
  0%, 100% { filter: drop-shadow(0 0 4px currentColor); opacity: 0.92; }
  50%      { filter: drop-shadow(0 0 12px currentColor); opacity: 1; }
}

/* Animowany ring wokół sparkline container */
.spark-container {
  position: relative;
}
.spark-ring {
  border-radius: 8px;
  border: 1px solid rgba(183, 148, 246, 0.0);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.row-hover:hover .spark-ring {
  border-color: rgba(183, 148, 246, 0.18);
  box-shadow: 0 0 24px rgba(183, 148, 246, 0.12), inset 0 0 12px rgba(103, 232, 249, 0.05);
}

/* Bar fill animowany (ciągle pulsujący progress) */
@keyframes bar-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; box-shadow: 0 0 16px var(--accent); }
}
.bar-pulse { animation: bar-pulse 2.4s ease-in-out infinite; }

/* Slowly drifting grid (Pro) */
@keyframes grid-drift {
  from { background-position: 0 0; }
  to   { background-position: 28px 28px; }
}

/* Border gradient sweep (Bento featured cells) */
@keyframes sweep-border {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.animated-border-gradient {
  position: relative;
  overflow: hidden;
}
.animated-border-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(110deg, transparent 35%, var(--accent) 50%, transparent 65%);
  background-size: 250% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: sweep-border 5s linear infinite;
  pointer-events: none;
}

/* Gentle orbital element */
@keyframes orbit-slow {
  to { transform: rotate(360deg); }
}
.orbit-slow { animation: orbit-slow 30s linear infinite; }

/* Ring progress subtle breath (Minimal) */
@keyframes ring-breath {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50%      { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 40%, transparent)); }
}
.ring-breath > svg .fill { animation: ring-breath 4s ease-in-out infinite; }

/* Number flicker (Pro live data feel) */
@keyframes num-flicker {
  0%, 100% { opacity: 1; }
  97%, 99% { opacity: 0.85; }
  98%      { opacity: 0.6; }
}
.num-flicker { animation: num-flicker 4s steps(1) infinite; }

/* MOUNTAINS — cinematic sky + parallax peaks */
[data-theme="mountains"] body {
  background:
    linear-gradient(180deg,
      #1a1428 0%,
      #2d1f3a 20%,
      #6b3a3a 45%,
      #c97744 65%,
      #f59e0b 78%,
      #0e1521 100%);
  background-attachment: fixed;
  position: relative;
}

@keyframes drift-x-slow {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-30px); }
}
@keyframes drift-x-slower {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(20px); }
}
@keyframes sun-pulse {
  0%, 100% { opacity: 0.85; box-shadow: 0 0 80px 30px rgba(245, 158, 11, 0.6); }
  50%      { opacity: 1;    box-shadow: 0 0 120px 50px rgba(245, 158, 11, 0.85); }
}
@keyframes fog-drift {
  0%, 100% { transform: translateX(0); opacity: 0.55; }
  50%      { transform: translateX(40px); opacity: 0.7; }
}

.mtn-sky {
  position: fixed; inset: 0; z-index: -10; pointer-events: none;
  overflow: hidden;
}
.mtn-sky::before { /* warstwa gwiazd na górze */
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 12%, white 50%, transparent),
    radial-gradient(1.5px 1.5px at 50% 18%, white 50%, transparent),
    radial-gradient(1px 1px at 70% 8%, white 50%, transparent),
    radial-gradient(2px 2px at 85% 15%, white 50%, transparent),
    radial-gradient(1px 1px at 10% 22%, white 50%, transparent),
    radial-gradient(1.5px 1.5px at 35% 5%, white 50%, transparent);
  opacity: 0.6;
}
.mtn-sun {
  position: absolute;
  left: 50%; top: 38%;
  transform: translate(-50%, -50%);
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, #fde68a 0%, #f59e0b 50%, #ea580c 100%);
  animation: sun-pulse 6s ease-in-out infinite;
}
.mtn-fog {
  position: absolute;
  left: -10%; right: -10%; bottom: 30%;
  height: 80px;
  background: linear-gradient(180deg, transparent, rgba(255, 200, 150, 0.4), transparent);
  filter: blur(20px);
  animation: fog-drift 14s ease-in-out infinite;
}
.mtn-fog-2 {
  position: absolute;
  left: -10%; right: -10%; bottom: 18%;
  height: 100px;
  background: linear-gradient(180deg, transparent, rgba(200, 130, 80, 0.5), transparent);
  filter: blur(28px);
  animation: fog-drift 22s ease-in-out infinite reverse;
}

.mtn-layer {
  position: absolute;
  left: -5%; right: -5%;
  pointer-events: none;
}
.mtn-layer-1 { bottom: 28%; opacity: 0.55; animation: drift-x-slower 30s ease-in-out infinite; }
.mtn-layer-2 { bottom: 14%; opacity: 0.75; animation: drift-x-slow 22s ease-in-out infinite; }
.mtn-layer-3 { bottom: 0;   opacity: 0.95; animation: drift-x-slow 18s ease-in-out infinite reverse; }

.mtn-vignette {
  position: fixed; inset: 0; z-index: -8; pointer-events: none;
  background: radial-gradient(ellipse at center 60%, transparent 30%, rgba(14, 21, 33, 0.55) 80%, rgba(14, 21, 33, 0.85) 100%);
}

/* Cinematic letterbox bars (subtle) */
.mtn-letterbox::before,
.mtn-letterbox::after {
  content: '';
  position: fixed;
  left: 0; right: 0;
  height: 36px;
  background: #000;
  z-index: 5;
  pointer-events: none;
}
.mtn-letterbox::before { top: 44px; } /* under theme switcher */
.mtn-letterbox::after  { bottom: 0; }

/* Glass pane na mountains */
[data-theme="mountains"] .mtn-pane {
  background: rgba(14, 21, 33, 0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(245, 158, 11, 0.2);
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}

/* NEON — scan lines + grid */
[data-theme="neon"] body::before {
  content: '';
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(0deg,
    rgba(255, 0, 255, 0.03) 0px, rgba(255, 0, 255, 0.03) 1px,
    transparent 1px, transparent 3px);
}
[data-theme="neon"] body::after {
  content: '';
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(rgba(255, 0, 255, 0.04) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, rgba(0, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 60px 60px;
  animation: grid-drift 40s linear infinite;
}
.neon-glow { text-shadow: 0 0 8px var(--accent), 0 0 20px var(--accent), 0 0 40px var(--accent); }
.neon-glow-2 { text-shadow: 0 0 8px var(--accent-2), 0 0 20px var(--accent-2), 0 0 40px var(--accent-2); }
.neon-border {
  border: 1px solid var(--accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 0 12px color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Per-theme decorations */
[data-theme="pro"] body {
  background-image: radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 28px 28px;
  background-attachment: fixed;
  animation: grid-drift 60s linear infinite;
}

/* =================================================
   SHARED PAGES (Profile, Users)
   ================================================= */

.compact-page .txt-mega { font-size: clamp(3.5rem, 9vw, 7rem); }
.compact-page .txt-giant { font-size: clamp(2.5rem, 7vw, 5rem); }
.compact-page .txt-huge { font-size: clamp(2rem, 5vw, 4rem); }

.sparkline {
  display: block;
  width: 100%;
  height: 32px;
}

/* MOBILE */
@media (max-width: 640px) {
  .label-mono { font-size: 0.65rem; letter-spacing: 0.15em; }
  .theme-pill { font-size: 0.55rem; padding: 0.3rem 0.5rem; }
  .theme-switcher-label { display: none; }
}

/* =================================================
   BACKGROUNDS — Aurora (/users) + GradientDots (/<u>)
   ================================================= */

/* Aurora paskowy gradient (CSS-only) */
.aurora-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.aurora-bg-inner {
  position: absolute;
  inset: -10px;
  --white: #fff;
  --black: #000;
  --transparent: transparent;
  --blue-500: #3b82f6;
  --indigo-300: #a5b4fc;
  --blue-300: #93c5fd;
  --violet-200: #ddd6fe;
  --blue-400: #60a5fa;
  --white-gradient: repeating-linear-gradient(100deg, var(--white) 0%, var(--white) 7%, var(--transparent) 10%, var(--transparent) 12%, var(--white) 16%);
  --dark-gradient: repeating-linear-gradient(100deg, var(--black) 0%, var(--black) 7%, var(--transparent) 10%, var(--transparent) 12%, var(--black) 16%);
  --aurora: repeating-linear-gradient(100deg, var(--blue-500) 10%, var(--indigo-300) 15%, var(--blue-300) 20%, var(--violet-200) 25%, var(--blue-400) 30%);
  background-image: var(--dark-gradient), var(--aurora);
  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;
  filter: blur(10px);
  will-change: transform;
}
.aurora-bg-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--dark-gradient), var(--aurora);
  background-size: 200%, 100%;
  background-attachment: fixed;
  mix-blend-mode: difference;
  animation: aurora 60s linear infinite;
  pointer-events: none;
}
.aurora-bg-radial {
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 70%);
          mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 70%);
}
@keyframes aurora {
  0%   { background-position: 50% 50%, 50% 50%; }
  100% { background-position: 350% 50%, 350% 50%; }
}

/* AuroraHeroBackground — paskowe gradienty z mix-blend-difference + radial vignette */
.aurora-hero-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.aurora-hero-bg-stack {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.4;
}
.aurora-hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
}
/* warstwa szronu między tłem a treścią — backdrop-filter rozmywa aurorę */
.aurora-hero-frost {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  -webkit-backdrop-filter: blur(24px) saturate(1.05);
          backdrop-filter: blur(24px) saturate(1.05);
}