/* ═══════════════════════════════════════════════════════════════
   ASENAR.IO — Shared Design System v2.0
   Stunning, responsive, mobile-first overhaul.
   All pages import this file for consistent styling.
   Page-specific styles remain in each HTML file.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════ CSS VARIABLES ═══════════ */
:root {
  --bg: #06080f; --bg2: #0a0e1a; --surface: #0f1525; --surface2: #141c32;
  --card: #111a2e; --card-hover: #162040;
  --border: #1a2744; --border2: #243560;
  --glass: rgba(15,21,37,0.85); --glass-b: rgba(255,255,255,0.05);
  --neon-green: #00ff88; --neon-blue: #3b82f6; --neon-purple: #8b5cf6;
  --neon-cyan: #06d6a0; --neon-orange: #ff6b35; --neon-pink: #f472b6; --neon-yellow: #fbbf24;
  --up: #00ff88; --down: #ff4757; --flat: #fbbf24;
  --text: #f1f5f9; --text2: #cbd5e1; --muted: #94a3b8; --dim: #64748b;
  --f-display: 'Sora', sans-serif; --f-body: 'Space Grotesk', sans-serif; --f-mono: 'JetBrains Mono', monospace;
  --wrap: 1280px; --gap: 16px; --radius: 10px; --radius-sm: 8px; --radius-lg: 14px;
  --glow-green: 0 0 30px rgba(0,255,136,0.15); --glow-blue: 0 0 30px rgba(59,130,246,0.15); --glow-purple: 0 0 30px rgba(139,92,246,0.15);
  --sidebar-w: 220px;
  --vstrip-w: 0px;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ═══════════ LIGHT THEME ═══════════ */
[data-theme="light"] {
  --bg: #f5f7fa; --bg2: #edf0f5; --surface: #ffffff; --surface2: #f0f2f7;
  --card: #ffffff; --card-hover: #f8f9fc;
  --border: #e2e8f0; --border2: #cbd5e1;
  --glass: rgba(255,255,255,0.9); --glass-b: rgba(0,0,0,0.06);
  --neon-green: #059669; --neon-blue: #2563eb; --neon-purple: #7c3aed;
  --neon-cyan: #0d9488; --neon-orange: #ea580c; --neon-pink: #db2777; --neon-yellow: #d97706;
  --up: #059669; --down: #dc2626; --flat: #d97706;
  --text: #0f172a; --text2: #334155; --muted: #64748b; --dim: #94a3b8;
  --glow-green: 0 0 20px rgba(5,150,105,0.1); --glow-blue: 0 0 20px rgba(37,99,235,0.1); --glow-purple: 0 0 20px rgba(124,58,237,0.1);
}
[data-theme="light"] body::before { display: none; }
[data-theme="light"] .navbar { background: rgba(255,255,255,0.95); border-right-color: var(--border); }
[data-theme="light"] .mobile-topbar { background: rgba(255,255,255,0.95); }
[data-theme="light"] .ticker-bar { background: linear-gradient(90deg, #edf0f5, #f5f7fa, #edf0f5); }
[data-theme="light"] .btn-premium { color: #fff; }
[data-theme="light"] .nav-brand > span { color: #2563eb; }
[data-theme="light"] .logo-wolf img { filter: drop-shadow(0 0 6px rgba(37,99,235,0.15)); }
[data-theme="light"] .nav-brand:hover .logo-wolf img { filter: drop-shadow(0 0 12px rgba(37,99,235,0.35)) drop-shadow(0 0 24px rgba(5,150,105,0.2)); }
[data-theme="light"] .modal-logo { filter: drop-shadow(0 0 8px rgba(37,99,235,0.2)); }
[data-theme="light"] .nav-dropdown-menu { box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
[data-theme="light"] .sidebar-overlay { background: rgba(255,255,255,0.3); }

/* ═══════════ RESET & BASE ═══════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scrollbar-gutter: stable; overflow-x: hidden; scroll-behavior: smooth; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }
img { max-width: 100%; height: auto; }
body {
  font-family: var(--f-body); background: var(--bg); color: var(--text);
  min-height: 100vh; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(59,130,246,0.06) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 20%, rgba(139,92,246,0.04) 0%, transparent 50%),
              radial-gradient(ellipse at 50% 80%, rgba(0,255,136,0.03) 0%, transparent 50%);
  pointer-events: none; z-index: 0;
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gap); position: relative; z-index: 1; }

/* ═══════════ FOCUS & ACCESSIBILITY ═══════════ */
:focus-visible {
  outline: 2px solid var(--neon-green);
  outline-offset: 2px;
  border-radius: 4px;
}
::selection { background: rgba(0,255,136,0.2); color: var(--text); }

/* ═══════════ SCROLL REVEAL ANIMATION ═══════════ */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ═══════════ TICKER BAND ═══════════ */
.ticker-bar {
  background: linear-gradient(90deg, var(--bg2), var(--surface), var(--bg2));
  border-bottom: 1px solid var(--border); padding: 12px 0; overflow: hidden;
  white-space: nowrap; position: fixed; top: 0; left: var(--sidebar-w); width: calc(100% - var(--sidebar-w)); z-index: 100;
}
.ticker-track { display: flex; gap: 24px; justify-content: center; align-items: center; width: 100%; animation: none; }
.ticker-item { display: flex; gap: 6px; align-items: center; font-size: 12px; font-family: var(--f-mono); transition: opacity 0.3s ease; }
.ticker-item:hover { opacity: 0.7; }
.ticker-item + .ticker-item { padding-left: 24px; border-left: 1px solid var(--border); }
.ticker-symbol { color: var(--muted); font-weight: 600; font-size: 11px; }
.ticker-price { color: var(--text); font-weight: 600; }
.ticker-change { font-weight: 700; font-size: 11px; }
.ticker-change.up { color: var(--up); }
.ticker-change.down { color: var(--down); }
.ticker-change.flat { color: var(--flat); }

/* ═══════════ VERTICAL PRICE STRIP ═══════════ */
.vstrip-corner {
  position: fixed; top: 0; left: var(--sidebar-w);
  width: 56px; height: 36px; z-index: 101;
  background: var(--bg2); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.vstrip-corner-label {
  font-family: var(--f-mono); font-size: 7px; font-weight: 700;
  color: var(--muted); letter-spacing: 1px; text-transform: uppercase; line-height: 1;
}
.vstrip-corner-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--neon-green);
  animation: vstripPulse 2s ease-in-out infinite;
}
.vstrip-corner-dot.closed { background: var(--down); animation: none; }
@keyframes vstripPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px rgba(0,255,136,0.6); }
  50% { opacity: 0.4; box-shadow: 0 0 0px transparent; }
}
[data-theme="light"] .vstrip-corner { background: #f5f7fa; }
.vstrip {
  position: fixed; top: 36px; left: var(--sidebar-w);
  width: 56px; height: calc(100vh - 36px);
  background: var(--bg2); border-right: 1px solid var(--border);
  overflow: hidden; z-index: 97;
}
.vstrip-inner {
  display: flex; flex-direction: column;
  animation: vstripScroll 600s linear infinite;
}
.vstrip-inner:hover { animation-play-state: paused; }
.vstrip-row {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 4px; border-bottom: 1px solid rgba(255,255,255,0.04);
  font-family: var(--f-mono); cursor: default;
  transition: background 0.12s;
  min-height: 56px; gap: 2px;
}
.vstrip-row:hover { background: rgba(255,255,255,0.04); }
.vstrip-sym { color: var(--muted); font-weight: 700; font-size: 8px; letter-spacing: 0.3px; text-align: center; }
.vstrip-price { color: var(--text); font-weight: 600; font-size: 9px; text-align: center; }
.vstrip-chg { font-weight: 700; font-size: 8px; text-align: center; }
.vstrip-chg.up { color: var(--up); }
.vstrip-chg.down { color: var(--down); }
.vstrip-chg.flat { color: var(--flat); }
/* Fade edges */
.vstrip::before, .vstrip::after {
  content: ''; position: absolute; left: 0; right: 0; height: 24px; z-index: 2; pointer-events: none;
}
.vstrip::before { top: 0; background: linear-gradient(to bottom, var(--bg2), transparent); }
.vstrip::after  { bottom: 0; background: linear-gradient(to top, var(--bg2), transparent); }
@keyframes vstripScroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
/* Adjust body and ticker-bar to make room */
body.has-vstrip { --vstrip-w: 56px; }
body.has-vstrip .ticker-bar { left: calc(var(--sidebar-w) + var(--vstrip-w)); width: calc(100% - var(--sidebar-w) - var(--vstrip-w)); }
[data-theme="light"] .vstrip { background: #f5f7fa; }
[data-theme="light"] .vstrip::before { background: linear-gradient(to bottom, #f5f7fa, transparent); }
[data-theme="light"] .vstrip::after  { background: linear-gradient(to top, #f5f7fa, transparent); }
[data-theme="light"] .vstrip-row:hover { background: rgba(0,0,0,0.03); }
[data-theme="light"] .vstrip-row { border-bottom-color: rgba(0,0,0,0.05); }

/* ═══════════ SIDEBAR NAVBAR ═══════════ */
.navbar {
  position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh; z-index: 99;
  background: var(--glass); backdrop-filter: blur(24px) saturate(1.2);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s ease;
}
.navbar::-webkit-scrollbar { width: 3px; }
.navbar::-webkit-scrollbar-track { background: transparent; }
.navbar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Radio Wave ── */
.nav-wave {
  position: fixed; top: 0; left: calc(var(--sidebar-w) - 3px); width: 3px; height: 100vh; z-index: 98;
  display: flex; flex-direction: row; gap: 0; overflow: hidden;
}
.nav-wave span {
  display: block; height: 200%; width: 1px; position: relative;
  animation: radioWaveV 2.5s ease-in-out infinite;
}
.nav-wave span:nth-child(1) { background: linear-gradient(180deg, transparent 0%, #3b82f6 20%, #3b82f6 50%, transparent 80%); animation-delay: 0s; }
.nav-wave span:nth-child(2) { background: linear-gradient(180deg, transparent 0%, #00ff88 25%, #00ff88 55%, transparent 85%); animation-delay: 0.3s; }
.nav-wave span:nth-child(3) { background: linear-gradient(180deg, transparent 0%, #ef4444 15%, #ef4444 45%, transparent 75%); animation-delay: 0.6s; }
.nav-wave.stopped span { animation: none; opacity: 0; transition: opacity 0.8s ease; }
@keyframes radioWaveV {
  0% { transform: translateY(-25%); opacity: 0.3; }
  25% { opacity: 1; }
  50% { transform: translateY(0%); opacity: 0.6; }
  75% { opacity: 1; }
  100% { transform: translateY(-25%); opacity: 0.3; }
}

.nav-inner {
  display: flex; flex-direction: column; padding: 12px 12px; height: 100%;
}

/* ── Brand at top ── */
.nav-brand {
  display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--f-display);
  font-weight: 800; font-size: 18px; color: var(--text); padding: 12px 4px 10px; flex-shrink: 0;
  text-align: center; transition: transform 0.3s var(--ease-spring);
}
.nav-brand:hover { transform: scale(1.02); }
.nav-brand > span { color: #2563eb; }
.brand-io { color: var(--neon-green); }
.logo-wolf { position: relative; display: flex; }
.logo-wolf img { width: 52px; height: 52px; filter: drop-shadow(0 0 8px rgba(0,255,136,0.3)); transition: all 0.4s var(--ease-out-expo); }
.nav-brand:hover .logo-wolf img {
  filter: drop-shadow(0 0 16px rgba(0,255,136,0.5)) drop-shadow(0 0 32px rgba(59,130,246,0.3));
  animation: wolf-laugh 0.5s ease;
}
@keyframes wolf-laugh {
  0%,100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg) scale(1.1); }
  50% { transform: rotate(5deg) scale(1.15); }
  75% { transform: rotate(-3deg) scale(1.1); }
}

/* ── Nav links ── */
.nav-links {
  display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto;
}
.nav-link {
  font-size: 13px; font-weight: 500; color: var(--muted); padding: 7px 10px;
  border-radius: var(--radius-sm); transition: all 0.25s var(--ease-out-expo); position: relative;
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.nav-link:hover { color: var(--text); background: var(--glass-b); transform: translateX(3px); }
.nav-link.active {
  color: var(--neon-green); background: rgba(0,255,136,0.08);
  border-left: 3px solid var(--neon-green); padding-left: 9px;
}
.nav-link .badge {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--neon-orange); margin-left: 4px; vertical-align: super;
  animation: badge-pulse 2s ease infinite;
}
@keyframes badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* ═══════════ NAV DROPDOWN (vertical) ═══════════ */
.nav-dropdown { position: relative; display: flex; flex-direction: column; }
.nav-dropdown > .nav-link { cursor: pointer; }
.nav-dropdown-menu {
  display: none; position: relative; top: 0; left: 0; transform: none;
  background: transparent; border: none; border-radius: 0;
  padding: 0 0 0 20px; min-width: 0; box-shadow: none; z-index: 1;
}
.nav-dropdown:hover .nav-dropdown-menu { display: flex; flex-direction: column; gap: 0; }
.nav-dropdown-menu a {
  display: block; padding: 8px 12px; font-size: 13px; color: var(--muted);
  transition: all 0.2s var(--ease-out-expo); border-radius: var(--radius-sm);
}
.nav-dropdown-menu a:hover { color: var(--text); background: var(--glass-b); transform: translateX(3px); }

/* ── Nav section label ── */
.nav-section-label {
  font-size: 10px; font-weight: 700; color: var(--dim); text-transform: uppercase;
  letter-spacing: 0.1em; padding: 16px 12px 6px; user-select: none;
}

/* ═══════════ NAV RIGHT ═══════════ */
.nav-right {
  display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-shrink: 0;
}
.nav-right-row { display: flex; align-items: center; gap: 8px; }
.theme-toggle {
  background: var(--surface); border: 1px solid var(--border); width: 36px; height: 36px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted); transition: all 0.3s var(--ease-spring); flex-shrink: 0;
}
.theme-toggle:hover { color: var(--neon-yellow); border-color: var(--neon-yellow); transform: rotate(15deg); }
[data-theme="light"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon, :root:not([data-theme]) .icon-moon { display: none; }
.btn-login {
  background: var(--surface); border: 1px solid var(--border); padding: 8px 12px;
  border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--text);
  cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.25s var(--ease-out-expo);
  font-family: var(--f-body); width: 100%; justify-content: center;
}
.btn-login:hover { border-color: var(--neon-green); color: var(--neon-green); background: rgba(0,255,136,0.04); }
.btn-premium {
  background: linear-gradient(135deg, var(--neon-green), var(--neon-blue)); padding: 8px 12px;
  border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; color: var(--bg);
  transition: all 0.3s var(--ease-out-expo); display: block; text-align: center; width: 100%;
  position: relative; overflow: hidden;
}
.btn-premium::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}
.btn-premium:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,255,136,0.25); }
.btn-premium:hover::before { left: 100%; }

/* ═══════════ MOBILE TOP BAR + SIDEBAR TOGGLE ═══════════ */
.mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; position: relative; width: 36px; height: 36px; }
.mobile-toggle span {
  display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px;
  position: absolute; left: 8px; transition: all 0.35s var(--ease-out-expo);
}
.mobile-toggle span:nth-child(1) { top: 10px; }
.mobile-toggle span:nth-child(2) { top: 17px; }
.mobile-toggle span:nth-child(3) { top: 24px; }
/* Hamburger → X animation */
.mobile-toggle.active span:nth-child(1) { top: 17px; transform: rotate(45deg); }
.mobile-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mobile-toggle.active span:nth-child(3) { top: 17px; transform: rotate(-45deg); }

.mobile-topbar {
  display: none; position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 101;
  background: var(--glass); backdrop-filter: blur(24px) saturate(1.2); border-bottom: 1px solid var(--border);
  padding: 0 16px; align-items: center; justify-content: space-between;
}
.sidebar-overlay {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6); z-index: 98; backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.35s ease;
}
.sidebar-overlay.active { display: block; opacity: 1; }

/* ═══════════ MOBILE TOPBAR OVERRIDES ═══════════ */
.mobile-topbar .nav-brand {
  flex-direction: row; align-items: center; gap: 8px;
  padding: 0; font-size: 16px; text-align: left;
}
.mobile-topbar .logo-wolf img { width: 32px; height: 32px; }
.mobile-topbar .nav-brand > span { font-size: 16px; }

@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }
  .navbar {
    width: 280px; transform: translateX(-100%); z-index: 200;
    box-shadow: 4px 0 32px rgba(0,0,0,0.4);
  }
  .navbar.open { transform: translateX(0); }
  .mobile-topbar { display: flex; }
  .mobile-toggle { display: flex; align-items: center; justify-content: center; }
  .ticker-bar { left: 0; width: 100%; top: 56px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ticker-track { justify-content: flex-start; gap: 16px; padding: 0 12px; min-width: max-content; }
  .ticker-item + .ticker-item { padding-left: 16px; }
  .ticker-symbol { font-size: 10px; }
  .ticker-price { font-size: 11px; }
  .ticker-change { font-size: 10px; }
  .nav-wave { display: none; }
  .vstrip, .vstrip-corner { display: none; }
  :root { --vstrip-w: 0px; }
  body.has-vstrip { --vstrip-w: 0px; }
  .page-header { padding-top: 110px !important; }
  body { padding-top: 90px; }
}

/* ═══════════ COMPACT SCALE — tightens all page-specific inline styles ═══════════ */
/* Reduces the visual "kinderbook" feel without touching any HTML file.
   Targets common patterns used across all 24 pages. */
h1, h2, h3 { letter-spacing: -0.01em; }
h2 { font-size: 18px; }
h3 { font-size: 14px; }
section { margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
article, .card, [class*="card"] { padding: 12px; }
/* Override common inline card padding patterns */
[style*="padding: 20px"], [style*="padding:20px"] { padding: 12px !important; }
[style*="padding: 24px"], [style*="padding:24px"] { padding: 12px !important; }
[style*="padding: 32px"], [style*="padding:32px"] { padding: 14px !important; }
[style*="padding: 40px"], [style*="padding:40px"] { padding: 16px !important; }
/* Tighten grid gaps globally */
[style*="gap: 16px"], [style*="gap:16px"] { gap: 10px !important; }
[style*="gap: 20px"], [style*="gap:20px"] { gap: 12px !important; }
[style*="gap: 24px"], [style*="gap:24px"] { gap: 12px !important; }
[style*="gap: 32px"], [style*="gap:32px"] { gap: 14px !important; }
/* Tighten inline margins */
[style*="margin-bottom: 24px"], [style*="margin-bottom:24px"] { margin-bottom: 12px !important; }
[style*="margin-bottom: 32px"], [style*="margin-bottom:32px"] { margin-bottom: 16px !important; }
[style*="margin-top: 24px"], [style*="margin-top:24px"] { margin-top: 12px !important; }
[style*="margin-top: 32px"], [style*="margin-top:32px"] { margin-top: 16px !important; }
/* Scale down large inline fonts */
[style*="font-size: 36px"], [style*="font-size:36px"] { font-size: 24px !important; }
[style*="font-size: 32px"], [style*="font-size:32px"] { font-size: 22px !important; }
[style*="font-size: 28px"], [style*="font-size:28px"] { font-size: 20px !important; }
[style*="font-size: 24px"], [style*="font-size:24px"] { font-size: 18px !important; }
[style*="font-size: 22px"], [style*="font-size:22px"] { font-size: 17px !important; }
[style*="font-size: 20px"], [style*="font-size:20px"] { font-size: 16px !important; }
[style*="font-size: 18px"], [style*="font-size:18px"] { font-size: 14px !important; }
[style*="font-size: 17px"], [style*="font-size:17px"] { font-size: 13px !important; }
[style*="font-size: 16px"], [style*="font-size:16px"] { font-size: 13px !important; }
[style*="font-size: 15px"], [style*="font-size:15px"] { font-size: 12px !important; }
[style*="font-size: 14px"], [style*="font-size:14px"] { font-size: 12px !important; }
[style*="font-size: 13px"], [style*="font-size:13px"] { font-size: 11px !important; }
/* Tighten border-radius on large cards */
[style*="border-radius: 16px"], [style*="border-radius:16px"] { border-radius: 10px !important; }
[style*="border-radius: 20px"], [style*="border-radius:20px"] { border-radius: 12px !important; }
[style*="border-radius: 24px"], [style*="border-radius:24px"] { border-radius: 12px !important; }

/* ═══════════ PAGE-SPECIFIC CLASS OVERRIDES ═══════════ */
/* These override <style> block declarations across all 24 pages */

/* Hero/header sections — all pages use .page-header or *-hero */
.page-header, [class$="-hero"], [class*="-masthead"] { padding: 40px 0 12px !important; }
.page-header h1, [class$="-hero"] h1, [class*="-masthead"] h1 { font-size: clamp(20px, 3.5vw, 26px) !important; }

/* Cards — every page has *-card pattern */
[class$="-card"], [class*="-card "] { padding: 12px !important; border-radius: var(--radius) !important; }
.compare-card, .metric-bars, .verdict-card, .score-card, .streak-card,
.macro-card, .calc-card, .podium-card, .alert-modal, .premium-banner,
.hisse-card, .question-card { padding: 12px !important; }

/* Score/stat displays — oversized numbers */
.score-big, .streak-count, .rb-val { font-size: 22px !important; }
.cc-price, .mc-value { font-size: 22px !important; }
.cc-name, .calc-title, .radar-title, .popular-title, .competition-title,
.results-title, .masthead-title, .sec-mstat-val, .scr-stat-val,
.hm-stat-val, .ys-value, .pf-stat-value, .podium-score { font-size: 16px !important; }

/* Large emoji/icon displays */
.results-emoji, .wl-empty-icon, .pf-empty-icon, .lesson-hero-icon,
.completion-title { font-size: 32px !important; }
.podium-avatar, .lb-user-avatar, .streak-flames { font-size: 18px !important; }

/* Question text */
.q-text { font-size: 15px !important; }

/* Section padding tighteners */
.quiz-layout, .game-result { padding: 16px !important; }
.results-screen, .crossword-masthead, .competition-section, .completion-box,
.hisse-hero, .hisse-404, .lesson-hero, .lesson-section, .wl-empty, .pf-empty,
.lb-cta, .quiz-hero, .hissele-hero, .sec-hero, .scr-hero, .hm-hero { padding: 16px !important; }
.premium-locked-content, .premium-overlay, .quiz-lb, .quiz-question,
.sidebar-toc, .your-stats, .info-banner, .tcmb-countdown, .sec-premium,
.scr-lock-overlay, .wl-expanded-cell, .pf-stat { padding: 12px !important; }

/* Footer override (pages with inline footer styles) */
.footer { padding: 24px 0 12px !important; }
.footer-brand { font-size: 16px !important; }

/* ═══════════ SMALL MOBILE (<480px) ═══════════ */
@media (max-width: 480px) {
  :root { --gap: 12px; --radius: 8px; --radius-lg: 12px; }
  .wrap { padding: 0 10px; }
  body { padding-top: 86px; }
}

/* ═══════════ LOGIN MODAL ═══════════ */
.modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(12px);
  z-index: 200; display: none; align-items: center; justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal-box {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 40px; max-width: 400px; width: 90%; position: relative;
  animation: modal-enter 0.35s var(--ease-out-expo);
}
@keyframes modal-enter {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-close {
  position: absolute; top: 16px; right: 16px; background: none; border: none;
  color: var(--muted); cursor: pointer; font-size: 24px; line-height: 1;
  transition: color 0.2s ease, transform 0.2s ease;
}
.modal-close:hover { color: var(--text); transform: rotate(90deg); }
.modal-logo { display: flex; justify-content: center; margin-bottom: 24px; }
.modal-logo img { width: 48px; height: 48px; filter: drop-shadow(0 0 12px rgba(0,255,136,0.3)); }
.modal-title {
  font-family: var(--f-display); font-size: 22px; font-weight: 700;
  text-align: center; margin-bottom: 8px; color: var(--text);
}
.modal-sub { text-align: center; font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.modal-google {
  width: 100%; padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-family: var(--f-body); font-size: 14px;
  font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-bottom: 20px; transition: all 0.25s var(--ease-out-expo);
}
.modal-google:hover { border-color: var(--neon-blue); background: rgba(59,130,246,0.05); }
.modal-divider {
  text-align: center; font-size: 12px; color: var(--dim); margin-bottom: 20px; position: relative;
}
.modal-divider::before, .modal-divider::after {
  content: ''; position: absolute; top: 50%; width: 40%; height: 1px; background: var(--border);
}
.modal-divider::before { left: 0; }
.modal-divider::after { right: 0; }
.modal-field { margin-bottom: 16px; }
.modal-field label { display: block; font-size: 13px; font-weight: 600; color: var(--text2); margin-bottom: 6px; }
.modal-field input {
  width: 100%; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-family: var(--f-mono); font-size: 14px; outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.modal-field input:focus { border-color: var(--neon-green); box-shadow: 0 0 0 3px rgba(0,255,136,0.1); }
.modal-submit {
  width: 100%; padding: 12px; border-radius: var(--radius-sm); border: none;
  background: linear-gradient(135deg, var(--neon-green), var(--neon-blue)); color: var(--bg);
  font-family: var(--f-body); font-size: 15px; font-weight: 700; cursor: pointer;
  margin-top: 8px; transition: all 0.25s var(--ease-out-expo);
}
.modal-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,255,136,0.25); }
.modal-footer, .modal-footer-text { text-align: center; margin-top: 16px; font-size: 13px; color: var(--muted); }
.modal-footer a, .modal-footer-text a { color: var(--neon-green); font-weight: 600; }
/* Modal aliases for standardised HTML */
.modal-box h2 {
  font-family: var(--f-display); font-size: 22px; font-weight: 700;
  text-align: center; margin-bottom: 8px; color: var(--text);
}
.modal-box h2 span { color: var(--neon-green); }
.modal-box p#modalSubtitle { text-align: center; font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.btn-google, .modal-google {
  width: 100%; padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-family: var(--f-body); font-size: 14px;
  font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-bottom: 20px; transition: all 0.25s var(--ease-out-expo);
}
.btn-google:hover, .modal-google:hover { border-color: var(--neon-blue); }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--text2); margin-bottom: 6px; }
.form-group input {
  width: 100%; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-family: var(--f-mono); font-size: 14px; outline: none;
  box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group input:focus { border-color: var(--neon-green); box-shadow: 0 0 0 3px rgba(0,255,136,0.1); }
.btn-submit {
  width: 100%; padding: 12px; border-radius: var(--radius-sm); border: none;
  background: linear-gradient(135deg, var(--neon-green), var(--neon-blue)); color: var(--bg);
  font-family: var(--f-body); font-size: 15px; font-weight: 700; cursor: pointer;
  margin-top: 8px; transition: all 0.25s var(--ease-out-expo);
}
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,255,136,0.25); }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
[data-theme="light"] .btn-submit { color: #fff; }
.auth-error { color: #ef4444; font-size: 13px; text-align: center; margin-bottom: 12px; }
.user-info { display: inline-flex; align-items: center; gap: 4px; }

/* ═══════════ CONTENT OFFSET for sidebar ═══════════ */
body { margin-left: calc(var(--sidebar-w) + var(--vstrip-w)); }
body > .ticker-bar { margin-left: 0; }

/* ═══════════ PAGE HEADER (common) ═══════════ */
.page-header { text-align: center; padding: 32px 0 24px; }
.page-header h1 {
  font-family: var(--f-display); font-size: clamp(22px, 4vw, 32px);
  font-weight: 800; line-height: 1.2; color: var(--text); margin-bottom: 8px;
}
.page-header h1 .accent {
  background: linear-gradient(135deg, var(--neon-green), var(--neon-blue));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.page-header p { font-size: 14px; color: var(--text2); max-width: 560px; margin: 0 auto; line-height: 1.5; }

/* ═══════════ FOOTER ═══════════ */
.footer { background: var(--bg2); border-top: 1px solid var(--border); padding: 32px 0 16px; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px;
  padding-bottom: 32px; border-bottom: 1px solid var(--border);
}
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; gap: 20px; } }
.footer-brand { font-family: var(--f-display); font-weight: 800; font-size: 20px; margin-bottom: 12px; color: var(--text); }
.footer-brand span { color: var(--neon-green); }
.footer-desc { font-size: 13px; color: var(--muted); line-height: 1.7; }
.footer-col h4 {
  font-size: 13px; font-weight: 700; color: var(--text); text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 14px;
}
.footer-col a {
  display: block; font-size: 14px; color: var(--muted); padding: 4px 0;
  transition: color 0.2s ease, transform 0.2s ease;
}
.footer-col a:hover { color: var(--neon-green); transform: translateX(3px); }
.footer-social { display: flex; gap: 16px; justify-content: center; padding: 20px 0 12px; border-top: 1px solid rgba(255,255,255,0.06); }
.footer-social a {
  color: var(--muted); transition: all 0.3s var(--ease-spring);
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
}
.footer-social a:hover { color: var(--neon-green); border-color: var(--neon-green); transform: translateY(-3px); background: rgba(0,255,136,0.06); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 16px; font-size: 13px; color: var(--dim);
}
.footer-powered a { color: var(--neon-green); }
@media (max-width: 768px) {
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  body { margin-left: 0; }
  body > .wrap, body > .footer, body > main { margin-left: 0; }
}

/* ── SEO Footer ── */
.seo-footer { padding: 32px 0 0; border-top: 1px solid var(--border); margin-top: 24px; }
.seo-footer-section { margin-bottom: 16px; }
.seo-footer-title {
  font-family: var(--f-body); font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 10px; font-weight: 600;
}
.seo-footer-links { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.seo-footer-links a {
  font-family: var(--f-body); font-size: 11px; color: var(--muted);
  text-decoration: none; padding: 4px 10px; border: 1px solid var(--border);
  border-radius: 6px; transition: all 0.2s ease; white-space: nowrap;
}
.seo-footer-links a:hover { color: var(--neon-green); border-color: var(--neon-green); }
.seo-footer-links a.flagship {
  color: var(--neon-green); border-color: var(--neon-green);
  font-weight: 600; background: rgba(0,255,136,0.06);
}
.seo-footer-links a.flagship:hover { background: rgba(0,255,136,0.12); }
.seo-footer-links a.external::after { content: '\2197'; margin-left: 3px; font-size: 9px; opacity: 0.6; }
@media (max-width: 768px) { .seo-footer-links { gap: 5px; } .seo-footer-links a { font-size: 10px; padding: 3px 8px; } }

/* ═══════════ UTILITY CLASSES ═══════════ */
.text-up { color: var(--up); }
.text-down { color: var(--down); }
.text-flat { color: var(--flat); }
.text-muted { color: var(--muted); }
.text-gradient {
  background: linear-gradient(135deg, var(--neon-green), var(--neon-cyan), var(--neon-blue));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.glass-card {
  background: var(--glass); backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.shimmer {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ═══════════ SHARE COMPONENT — Reusable across all pages ═══════════ */

/* Share trigger button (placed in page-specific spots) */
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.share-btn:hover {
  background: rgba(59,130,246,0.1);
  border-color: var(--neon-blue);
  color: var(--text);
}
.share-btn svg { width: 16px; height: 16px; }

/* Share popup overlay */
.share-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.share-overlay.active { opacity: 1; pointer-events: auto; }

/* Share popup panel */
.share-popup {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border2);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 24px 20px 32px;
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.3s var(--ease-out-expo);
  max-width: 480px;
  margin: 0 auto;
}
.share-popup.active { transform: translateY(0); }

@media (min-width: 640px) {
  .share-popup {
    position: fixed;
    bottom: auto; top: 50%; left: 50%; right: auto;
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border2);
    padding: 28px;
    max-width: 420px;
    width: 90%;
  }
  .share-popup.active { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.share-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.share-popup-title {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.share-popup-close {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 18px;
}
.share-popup-close:hover { background: rgba(255,71,87,0.1); border-color: var(--down); color: var(--down); }

/* Preview card inside popup */
.share-preview {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
  max-height: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-preview strong { color: var(--text); font-weight: 600; }

/* Platform buttons grid */
.share-platforms {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.share-platform {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}
.share-platform:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }
.share-platform svg { width: 24px; height: 24px; }
.share-platform span {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Platform-specific hover colors */
.share-platform.x:hover { border-color: #1d9bf0; background: rgba(29,155,240,0.08); }
.share-platform.x:hover span { color: #1d9bf0; }
.share-platform.whatsapp:hover { border-color: #25d366; background: rgba(37,211,102,0.08); }
.share-platform.whatsapp:hover span { color: #25d366; }
.share-platform.telegram:hover { border-color: #0088cc; background: rgba(0,136,204,0.08); }
.share-platform.telegram:hover span { color: #0088cc; }
.share-platform.linkedin:hover { border-color: #0a66c2; background: rgba(10,102,194,0.08); }
.share-platform.linkedin:hover span { color: #0a66c2; }
.share-platform.facebook:hover { border-color: #1877f2; background: rgba(24,119,242,0.08); }
.share-platform.facebook:hover span { color: #1877f2; }
.share-platform.instagram:hover { border-color: #e4405f; background: rgba(228,64,95,0.08); }
.share-platform.instagram:hover span { color: #e4405f; }
.share-platform.tiktok:hover { border-color: #00f2ea; background: rgba(0,242,234,0.08); }
.share-platform.tiktok:hover span { color: #00f2ea; }
.share-platform.copy:hover { border-color: var(--neon-cyan); background: rgba(6,214,160,0.08); }
.share-platform.copy:hover span { color: var(--neon-cyan); }
.share-platform.copy.copied { border-color: var(--up); background: rgba(0,255,136,0.12); }
.share-platform.copy.copied span { color: var(--up); }

/* Toast notification for copy */
.share-toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--up);
  color: #000;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 10000;
}
.share-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Light theme overrides */
[data-theme="light"] .share-popup { background: #fff; border-color: var(--border); box-shadow: 0 16px 48px rgba(0,0,0,0.12); }
[data-theme="light"] .share-platform { background: rgba(0,0,0,0.02); }
[data-theme="light"] .share-overlay { background: rgba(0,0,0,0.3); }

/* Responsive: 3-col on very small screens */
@media (max-width: 380px) {
  .share-platforms { grid-template-columns: repeat(4, 1fr); }
}

/* ═══════════ SCROLL REVEAL OBSERVER (injected via JS) ═══════════ */
/* Add this script to shared.js or inline:
   const obs = new IntersectionObserver((entries) => {
     entries.forEach(e => { if(e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); } });
   }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
   document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
*/