/* ==============================================================
   PRO EXAM A - אתר תרגול למבחן מקצועית א'
   Palette: Mindset AI Systems brand tokens (tokens.css)
   6 brand colors: #4A3B7A #896EC0 #202239 #25232B #343043 #B4A8E4
   ============================================================== */

:root {
  /* === Brand palette - exact values from Mindset AI Systems tokens.css === */
  --void:    #24231F;  /* deep background (--ms-bg) */
  --void-2:  #343043;  /* dark purple-gray (--ms-dark-2) */
  --void-3:  #25232B;  /* dark (--ms-dark) */
  --ink:     #25232B;
  --ink-2:   #343043;
  --steel:   #343043;

  --neon-cyan:     #B4A8E4;  /* light lavender (--ms-lavender) */
  --electric-blue: #896EC0;  /* lavender purple (--ms-purple) */
  --violet-light:  #B4A8E4;  /* light lavender (--ms-lavender) */
  --violet:        #896EC0;  /* lavender purple (--ms-purple) */
  --mint:          #B4A8E4;  /* mapped to light lavender */
  --btc-orange:    #896EC0;  /* legacy alias - mapped to brand accent */

  /* Soft + glow variants */
  --cyan-soft:    rgba(180, 168, 228, 0.14);
  --cyan-glow:    rgba(180, 168, 228, 0.42);
  --blue-soft:    rgba(137, 110, 192, 0.14);
  --violet-soft:  rgba(137, 110, 192, 0.12);
  --violet-glow:  rgba(137, 110, 192, 0.42);
  --lavender-soft:rgba(180, 168, 228, 0.14);
  --mint-soft:    rgba(180, 168, 228, 0.12);
  --orange-soft:  rgba(137, 110, 192, 0.14);

  /* Aliases for older code paths - mapped onto Mindset brand colors */
  --cyan:         var(--neon-cyan);
  --cyan-bright:  var(--neon-cyan);
  --neon-purple:  var(--violet);
  --neon-magenta: var(--violet-light);
  --neon-green:   var(--mint);
  --neon-blue:    var(--electric-blue);
  --magenta:      var(--violet-light);
  --amber:        #896EC0;
  --amber-bright: #B4A8E4;
  --amber-deep:   #4A3B7A;
  --amber-soft:   var(--orange-soft);
  --amber-glow:   rgba(137, 110, 192, 0.40);
  --plasma:       var(--violet);
  --plasma-soft:  var(--violet-soft);

  /* Surfaces */
  --bg-primary: var(--void);
  --bg-secondary: rgba(52, 48, 67, 0.62);
  --bg-tertiary:  rgba(52, 48, 67, 0.55);
  --bg-elevated:  rgba(52, 48, 67, 0.78);
  --border:         rgba(180, 168, 228, 0.10);
  --border-strong:  rgba(180, 168, 228, 0.22);
  --border-subtle:  rgba(180, 168, 228, 0.06);

  /* Text */
  --text-primary:   #FFFFFF;
  --text-secondary: #B4A8E4;
  --text-muted:     rgba(180, 168, 228, 0.72);
  --text-faint:     rgba(180, 168, 228, 0.48);

  /* Semantics */
  --accent:       #896EC0;
  --accent-light: #B4A8E4;
  --accent-soft:  rgba(137, 110, 192, 0.14);
  --accent-glow:  rgba(137, 110, 192, 0.40);

  --info:      var(--neon-cyan);
  --info-soft: var(--cyan-soft);

  /* Functional state colors (correct/incorrect feedback) - not brand palette */
  --success:      #4DDB88;
  --success-soft: rgba(77, 219, 136, 0.14);
  --error:        #FF6B6B;
  --error-soft:   rgba(255, 107, 107, 0.12);
  --gold:         #B4A8E4;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 28px 72px rgba(0, 0, 0, 0.65);
  --shadow-glow-cyan: 0 0 0 1px rgba(180, 168, 228, 0.4), 0 12px 42px rgba(180, 168, 228, 0.4);
  --shadow-glow-amber: 0 0 0 1px rgba(137, 110, 192, 0.4), 0 12px 42px rgba(137, 110, 192, 0.4);

  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;

  --transition: 240ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 160ms cubic-bezier(0.22, 1, 0.36, 1);

  --safe-bottom: env(safe-area-inset-bottom, 0);
  --safe-top: env(safe-area-inset-top, 0);

  --sidebar-width: 304px;
  --header-h: 230px;

  /* Brand fonts only: Sora (Latin/numbers) + Heebo (Hebrew). */
  --font-display: 'Sora', 'Heebo', system-ui, sans-serif;
  --font-body: 'Heebo', 'Sora', system-ui, sans-serif;
  --font-mono: 'Sora', 'Heebo', system-ui, sans-serif;
}

/* Light theme retained for the toggle button (not the primary look).
   Values from Mindset tokens.css light mode. */
[data-theme="light"] {
  --void: #FFFFFF;
  --void-2: #EFEDF3;
  --void-3: #F6F4EF;
  --ink: #FFFFFF;
  --ink-2: #F6F4EF;
  --steel: #EFEDF3;

  --bg-primary: var(--void);
  --bg-secondary: rgba(255, 255, 255, 0.85);
  --bg-tertiary: rgba(246, 244, 239, 0.85);
  --bg-elevated: #FFFFFF;
  --border: rgba(74, 59, 122, 0.15);
  --border-strong: rgba(74, 59, 122, 0.22);
  --border-subtle: rgba(74, 59, 122, 0.08);

  --text-primary: #202239;
  --text-secondary: #4A3B7A;
  --text-muted: rgba(74, 59, 122, 0.72);
  --text-faint: rgba(74, 59, 122, 0.45);

  --shadow-sm: 0 1px 3px rgba(32, 34, 57, 0.07);
  --shadow-md: 0 8px 28px rgba(32, 34, 57, 0.10);
  --shadow-lg: 0 24px 60px rgba(32, 34, 57, 0.14);
}

/* ==========  Reset  ========== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-feature-settings: "ss01", "tnum";
  background: var(--void);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
  position: relative;
  letter-spacing: -0.005em;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; -webkit-tap-highlight-color: transparent; user-select: none; }
input, textarea { font-family: inherit; color: inherit; unicode-bidi: plaintext; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(180, 168, 228, 0.4), rgba(137, 110, 192, 0.4)); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(180, 168, 228, 0.4), rgba(137, 110, 192, 0.4)); }
::selection { background: var(--amber); color: var(--void); }

a { color: inherit; text-decoration: none; }

/* ==========  Atmospheric background  ========== */
.bg-fx {
  position: fixed; inset: 0;
  z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,   rgba(137, 110, 192, 0.20), transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 60%,  rgba(137, 110, 192, 0.16),  transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 80%, rgba(180, 168, 228, 0.14), transparent 70%),
    linear-gradient(180deg, #24231F 0%, #343043 55%, #24231F 100%);
}
[data-theme="light"] .bg-fx {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(180, 168, 228, 0.4), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(137, 110, 192, 0.4), transparent 70%),
    linear-gradient(180deg, #EFEDF3 0%, #F6F4EF 100%);
}

/* Hex / circuit grid - דק ועדין מאוד, רק רעש רקע, לא קווים בולטים */
.bg-fx-grid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(rgba(180, 168, 228, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 168, 228, 0.07) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 5%, transparent 55%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 5%, transparent 55%);
  animation: gridDrift 60s linear infinite;
}
@keyframes gridDrift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 64px 64px, 64px 64px; }
}

/* Floating glowing orbs */
.bg-fx-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  mix-blend-mode: screen;
  animation: orbFloat 22s ease-in-out infinite;
}
.bg-fx-orb-1 {
  width: 520px; height: 520px;
  top: -80px; right: -120px;
  background: radial-gradient(circle, rgba(180, 168, 228, 0.42), transparent 65%);
}
.bg-fx-orb-2 {
  width: 460px; height: 460px;
  top: 38%; left: -100px;
  background: radial-gradient(circle, rgba(137, 110, 192, 0.36), transparent 65%);
  animation-delay: -7s;
}
.bg-fx-orb-3 {
  width: 380px; height: 380px;
  bottom: -100px; right: 30%;
  background: radial-gradient(circle, rgba(180, 168, 228, 0.28), transparent 65%);
  animation-delay: -14s;
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.06); }
  66%      { transform: translate(-30px, 40px) scale(0.96); }
}

/* ==========  Dynamic sparkles layer  ========== */
.bg-fx-sparkles {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
}
.sparkle-layer {
  position: absolute; inset: 0;
  background-repeat: repeat;
}
/* Layer 1 - small white twinkles, fast pulse - tiled to 280×280 so the pattern
   repeats and covers every page densely (was 100% 100% = 10 sparkles total). */
.sparkle-layer-1 {
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #FFFFFF, transparent 60%),
    radial-gradient(1.2px 1.2px at 28% 78%, #FFFFFF, transparent 60%),
    radial-gradient(1.2px 1.2px at 47% 32%, #FFFFFF, transparent 60%),
    radial-gradient(1.2px 1.2px at 63% 88%, #FFFFFF, transparent 60%),
    radial-gradient(1.2px 1.2px at 76% 24%, #FFFFFF, transparent 60%),
    radial-gradient(1.2px 1.2px at 88% 67%, #FFFFFF, transparent 60%),
    radial-gradient(1.2px 1.2px at 94% 8%,  #FFFFFF, transparent 60%),
    radial-gradient(1.2px 1.2px at 16% 51%, #FFFFFF, transparent 60%),
    radial-gradient(1.2px 1.2px at 38% 96%, #FFFFFF, transparent 60%),
    radial-gradient(1.2px 1.2px at 55% 14%, #FFFFFF, transparent 60%),
    radial-gradient(1.2px 1.2px at 7% 65%,  #FFFFFF, transparent 60%),
    radial-gradient(1.2px 1.2px at 71% 47%, #FFFFFF, transparent 60%);
  background-size: 280px 280px;
  background-repeat: repeat;
  animation: twinkleFast 4.5s ease-in-out infinite;
  opacity: 0.85;
}
/* Layer 2 - cyan + electric blue, tiled to 360×360 */
.sparkle-layer-2 {
  background-image:
    radial-gradient(2px 2px at 11% 27%,     var(--neon-cyan),     transparent 65%),
    radial-gradient(1.5px 1.5px at 29% 63%, var(--electric-blue), transparent 65%),
    radial-gradient(2px 2px at 47% 14%,     var(--neon-cyan),     transparent 65%),
    radial-gradient(1.5px 1.5px at 64% 71%, var(--electric-blue), transparent 65%),
    radial-gradient(2px 2px at 81% 41%,     var(--neon-cyan),     transparent 65%),
    radial-gradient(1.5px 1.5px at 96% 86%, var(--electric-blue), transparent 65%),
    radial-gradient(1.8px 1.8px at 19% 89%, var(--neon-cyan),     transparent 65%),
    radial-gradient(1.5px 1.5px at 38% 38%, var(--electric-blue), transparent 65%);
  background-size: 360px 360px;
  background-repeat: repeat;
  filter: drop-shadow(0 0 5px var(--neon-cyan));
  animation: twinkleSlow 7s ease-in-out infinite, sparkleDrift 90s linear infinite;
  opacity: 0.75;
}
/* Layer 3 - violet + mint + amber accent dots, tiled to 420×420 */
.sparkle-layer-3 {
  background-image:
    radial-gradient(1.5px 1.5px at 19% 42%, var(--mint),         transparent 65%),
    radial-gradient(2px 2px at 53% 81%,     var(--violet),       transparent 65%),
    radial-gradient(1.5px 1.5px at 77% 17%, var(--violet-light), transparent 65%),
    radial-gradient(2px 2px at 91% 52%,     var(--mint),         transparent 65%),
    radial-gradient(1.5px 1.5px at 25% 8%,  var(--violet),       transparent 65%),
    radial-gradient(1.8px 1.8px at 43% 60%, var(--amber-bright), transparent 65%),
    radial-gradient(1.5px 1.5px at 67% 92%, var(--mint),         transparent 65%);
  background-size: 420px 420px;
  background-repeat: repeat;
  filter: drop-shadow(0 0 6px var(--violet));
  animation: twinkleMid 5.5s ease-in-out infinite reverse, sparkleDrift 120s linear infinite reverse;
  opacity: 0.65;
}
@keyframes twinkleFast {
  0%, 100% { opacity: 0.45; transform: scale(0.92); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
@keyframes twinkleSlow {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1;   }
}
@keyframes twinkleMid {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.9; }
}
@keyframes sparkleDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-40px, -25px, 0); }
}
[data-theme="light"] .bg-fx-sparkles { opacity: 0.4; mix-blend-mode: multiply; }
/* Sparkles deliberately keep animating even with prefers-reduced-motion - they're
   a decorative, intentional branding element Nati explicitly wants visible always. */

/* ==========  WARP SPARKLES (particles flying toward viewer)  ========== */
.warp-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.warp-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 6px rgba(180, 168, 228, 0.85);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  animation: warpFly var(--dur, 5s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
}
.warp-particle.cyan   { background: #B4A8E4; box-shadow: 0 0 8px rgba(180, 168, 228, 0.95); }
.warp-particle.violet { background: #896EC0; box-shadow: 0 0 8px rgba(137, 110, 192, 0.95); }
.warp-particle.mint   { background: #B4A8E4; box-shadow: 0 0 7px rgba(180, 168, 228, 0.90); }
.warp-particle.amber  { background: #896EC0; box-shadow: 0 0 7px rgba(137, 110, 192, 0.85); }

@keyframes warpFly {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(0, 0) scale(0.1);
  }
  15% {
    opacity: 0.6;
  }
  85% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--dx, 50vw), var(--dy, 50vh)) scale(1.8);
  }
}

/* Subtle film grain */
.bg-fx-noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.35;
  mix-blend-mode: overlay;
}
[data-theme="light"] .bg-fx-noise { opacity: 0.15; }

.app-header, main, .app-footer, .sidebar { position: relative; z-index: 1; }

/* ==========  Responsive helpers  ========== */
.mobile-only { display: flex; }
.desktop-only { display: none; }
@media (min-width: 960px) {
  .mobile-only { display: none !important; }
  .desktop-only { display: flex; }
}

/* ==========  HEADER - cinematic banner  ========== */
.app-header {
  position: relative;
  width: 100%;
  z-index: 50;
  padding-top: var(--safe-top);
  background:
    linear-gradient(180deg,
      rgba(36, 35, 31, 0.95) 0%,
      rgba(52, 48, 67, 0.82) 60%,
      rgba(36, 35, 31, 0.92) 100%),
    radial-gradient(ellipse 60% 100% at 50% 50%, rgba(180, 168, 228, 0.16), transparent 70%);
  border-bottom: 1px solid rgba(180, 168, 228, 0.16);
  overflow: hidden;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
[data-theme="light"] .app-header {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(245,248,254,0.85) 100%),
    radial-gradient(ellipse 60% 100% at 50% 50%, rgba(180, 168, 228, 0.4), transparent 70%);
  border-bottom-color: rgba(52, 48, 67, 0.08);
}

/* Header is full-width banner on every breakpoint. Sidebar sits BELOW it. */

/* Animated header circuit lines */
.app-header::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 12% 30%, rgba(180, 168, 228, 0.4), transparent 22%),
    radial-gradient(circle at 88% 70%, rgba(137, 110, 192, 0.4), transparent 22%);
  pointer-events: none;
}
.app-header::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), rgba(180, 168, 228, 0.08) calc(100% - 1px));
  background-size: 140px 100%;
  pointer-events: none;
  opacity: 0.35;
  mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 75%);
}

/* Sweeping scan-line */
.header-scan {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(180, 168, 228, 0.4) 5%, rgba(180, 168, 228, 0.4) 50%, rgba(137, 110, 192, 0.4) 95%, transparent 100%);
  animation: scan 6s ease-in-out infinite;
  opacity: 0.75;
}
@keyframes scan {
  0%, 100% { transform: translateX(-30%); opacity: 0; }
  50%      { transform: translateX(30%); opacity: 1; }
}

.header-banner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 26px 28px 30px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  position: relative;
  z-index: 2;
  min-height: 200px;
}
@media (min-width: 768px) {
  .header-banner { padding: 34px 40px 40px; min-height: 250px; gap: 36px; }
}
@media (min-width: 1100px) {
  .header-banner { min-height: 280px; }
}
@media (max-width: 800px) {
  .header-banner {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    padding: 18px 16px 22px;
    gap: 14px 14px;
    min-height: auto;
  }
  .header-banner-actions {
    grid-column: 1 / -1;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
  }
}
@media (max-width: 420px) {
  .header-banner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .header-banner-content {
    text-align: center;
  }
  .header-banner-content .header-eyebrow {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Header logo - wide aspect (3.22:1) for the new neon-futuristic brand */
.header-logo-wrap {
  position: relative;
  height: 80px;
  aspect-ratio: 2087 / 647;
  flex-shrink: 0;
  max-width: 100%;
}
@media (min-width: 640px)  { .header-logo-wrap { height: 95px; } }
@media (min-width: 768px)  { .header-logo-wrap { height: 110px; } }
@media (min-width: 1100px) { .header-logo-wrap { height: 130px; } }
@media (max-width: 480px)  { .header-logo-wrap { height: 70px; } }

.header-logo-halo {
  position: absolute; inset: -10%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(180, 168, 228, 0.55), transparent 60%),
    radial-gradient(ellipse at 70% 30%, rgba(137, 110, 192, 0.50), transparent 60%),
    radial-gradient(ellipse at 50% 75%, rgba(180, 168, 228, 0.42), transparent 60%);
  filter: blur(34px);
  animation: haloPulse 5s ease-in-out infinite;
  z-index: 0;
}
@keyframes haloPulse {
  0%, 100% { transform: scale(0.95); opacity: 0.7; }
  50%      { transform: scale(1.10); opacity: 1; }
}

.header-banner-logo {
  position: relative;
  width: 100%; height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 18px rgba(180, 168, 228, 0.55))
    drop-shadow(0 0 12px rgba(137, 110, 192, 0.40))
    drop-shadow(0 0 8px  rgba(180, 168, 228, 0.28));
  z-index: 1;
  cursor: pointer;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.header-banner-logo:hover { transform: rotate(-3deg) scale(1.04); }

/* Header content (title + eyebrow + chips) */
.header-banner-content {
  min-width: 0;
  text-align: right;
  cursor: pointer;
}
.header-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-bright);
  margin-bottom: 14px;
  padding: 4px 10px;
  background: rgba(180, 168, 228, 0.4);
  border: 1px solid rgba(180, 168, 228, 0.22);
  border-radius: 100px;
  unicode-bidi: plaintext;
  white-space: nowrap;
}
@media (max-width: 540px) {
  .header-eyebrow { font-size: 9.5px; letter-spacing: 0.14em; padding: 3px 8px; margin-bottom: 8px; }
}
.eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan-bright);
  box-shadow: 0 0 8px var(--cyan-bright);
  animation: blink 1.8s ease-in-out infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.header-banner-title {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.title-line-1 {
  font-size: clamp(34px, 5.2vw, 56px);
  color: #fff;
  font-weight: 800;
  text-shadow: 0 2px 28px rgba(180, 168, 228, 0.45);
}
.title-line-2 {
  font-size: clamp(20px, 3.2vw, 30px);
  font-weight: 600;
  /* Gradient with strong stops so each word reads clearly against
     the warm-left/cool-right hero gradient. */
  background: linear-gradient(95deg,
    var(--amber-bright) 0%,
    var(--amber-bright) 22%,
    #fff 50%,
    var(--cyan-bright) 78%,
    var(--cyan-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  unicode-bidi: plaintext;
  letter-spacing: 0.005em;
  filter:
    drop-shadow(0 0 8px rgba(137, 110, 192, 0.35))
    drop-shadow(0 2px 4px rgba(36, 35, 31, 0.5));
}
.title-amp {
  color: var(--amber);
  -webkit-text-fill-color: var(--amber);
  font-weight: 400;
  font-style: italic;
  padding: 0 4px;
}

.header-banner-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
@media (max-width: 640px) {
  .header-banner-meta { display: none; }
  .title-line-1 { font-size: clamp(26px, 7.4vw, 36px); }
  .title-line-2 { font-size: clamp(15px, 4.6vw, 22px); }
}
/* Refined tag-style - not a button. Subtle, text-forward, gradient text only. */
.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  padding: 0 4px;
  background: transparent;
  border: none;
  cursor: default;
  pointer-events: none;
  user-select: none;
  background-image: linear-gradient(95deg, var(--amber-bright) 0%, var(--cyan-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.005em;
  filter: drop-shadow(0 1px 6px rgba(137, 110, 192, 0.25));
}
.meta-chip-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: linear-gradient(135deg, var(--amber-bright) 0%, var(--cyan-bright) 100%);
  box-shadow: 0 0 8px rgba(137, 110, 192, 0.55);
  flex-shrink: 0;
}
.header-banner-meta {
  gap: 18px;
}
@media (max-width: 640px) {
  .meta-chip { font-size: 13px; gap: 6px; }
  .header-banner-meta { gap: 14px; }
}

.header-banner-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  align-items: center;
}

.icon-btn {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center; justify-content: center;
  color: var(--text-secondary);
  background: rgba(180, 168, 228, 0.4);
  border: 1px solid rgba(180, 168, 228, 0.22);
  transition: all var(--transition);
  flex-shrink: 0;
}
.icon-btn:hover, .icon-btn:active {
  background: rgba(180, 168, 228, 0.4);
  border-color: rgba(180, 168, 228, 0.22);
  color: var(--cyan-bright);
  transform: translateY(-1px);
}

/* Mobile hamburger - clearly indicate it opens the menu */
.icon-btn-menu {
  width: auto;
  padding: 0 12px;
  gap: 7px;
  background: linear-gradient(135deg, rgba(180, 168, 228, 0.18), rgba(137, 110, 192, 0.18));
  border: 1px solid rgba(180, 168, 228, 0.55);
  color: var(--cyan-bright);
  animation: menuBtnPulse 1.8s ease-in-out 0.6s 4;
}
.icon-btn-menu .menu-btn-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.icon-btn-menu:hover, .icon-btn-menu:active {
  background: linear-gradient(135deg, rgba(180, 168, 228, 0.32), rgba(137, 110, 192, 0.32));
  border-color: var(--cyan-bright);
  animation: none;
}
@keyframes menuBtnPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(180, 168, 228, 0.45);
    transform: translateY(0);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(180, 168, 228, 0);
    transform: translateY(-1px);
  }
}

.back-btn {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: none;
  align-items: center; justify-content: center;
  color: var(--text-secondary);
  background: rgba(180, 168, 228, 0.4);
  border: 1px solid rgba(180, 168, 228, 0.22);
  transition: all var(--transition);
  flex-shrink: 0;
  grid-column: 1;
  grid-row: 1;
  position: absolute;
  top: 18px;
  left: 18px;
}
.back-btn:hover, .back-btn:active {
  background: rgba(137, 110, 192, 0.4);
  border-color: rgba(137, 110, 192, 0.4);
  color: var(--amber-bright);
}
.back-btn.visible { display: flex; }

/* ==========  SIDEBAR  ========== */
/* On mobile: full-screen drawer from the right.
   On desktop: pinned to the right, but starts BELOW the full-width banner. */
.sidebar {
  position: fixed;
  top: 0; right: 0;
  width: var(--sidebar-width);
  height: 100vh; height: 100dvh;
  background:
    linear-gradient(180deg, rgba(36, 35, 31, 0.92) 0%, rgba(52, 48, 67, 0.78) 100%);
  border-left: 1px solid rgba(180, 168, 228, 0.16);
  z-index: 90;
  overflow-y: auto;
  transition: transform var(--transition);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  box-shadow:
    -10px 0 60px rgba(0, 0, 0, 0.50),
    inset 1px 0 0 rgba(255, 255, 255, 0.04);
}
[data-theme="light"] .sidebar {
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(245,248,254,0.88) 100%);
  border-left-color: rgba(52, 48, 67, 0.08);
}

/* Vertical luminous edge */
.sidebar::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(180, 168, 228, 0.45) 20%,
    rgba(137, 110, 192, 0.45) 55%,
    rgba(180, 168, 228, 0.30) 85%,
    transparent 100%);
  opacity: 0.7;
}

.sidebar-content {
  padding: 22px 14px calc(20px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 100%;
}

.sidebar-close {
  position: absolute;
  top: 12px; left: 12px;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(180, 168, 228, 0.4);
  border: 1px solid rgba(180, 168, 228, 0.22);
  color: var(--text-secondary);
  display: flex;
  align-items: center; justify-content: center;
  transition: all var(--transition-fast);
}
.sidebar-close:hover { color: var(--text-primary); background: rgba(180, 168, 228, 0.4); }

/* Mobile-only mini brand block at top of sidebar */
.sidebar-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 8px 18px;
  margin-bottom: 6px;
  border-bottom: 1px dashed rgba(180, 168, 228, 0.22);
}
.sidebar-brand-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(180, 168, 228, 0.55)) drop-shadow(0 0 6px rgba(137, 110, 192, 0.35));
}
.sidebar-brand-text { display: flex; flex-direction: column; }
.sidebar-brand-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  unicode-bidi: plaintext;
}
.sidebar-brand-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-bright);
  margin-top: 2px;
}

.sidebar-section {
  margin-bottom: 12px;
}

.sidebar-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 500;
  padding: 12px 14px 8px;
}
.ssti-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180, 168, 228, 0.4));
}
.sidebar-section:first-of-type .sidebar-section-title { padding-top: 4px; }

/* Glass-effect sidebar buttons */
.sidebar-link {
  display: grid;
  grid-template-columns: 36px 1fr 14px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: right;
  width: 100%;
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.005) 100%);
  border: 1px solid rgba(180, 168, 228, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all var(--transition);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 1px 0 rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.sidebar-link::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, transparent 0%, rgba(180, 168, 228, 0.4) 50%, rgba(137, 110, 192, 0.4) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition);
}
.sidebar-link:hover {
  border-color: rgba(180, 168, 228, 0.22);
  background: linear-gradient(135deg, rgba(180, 168, 228, 0.4) 0%, rgba(255, 255, 255, 0.01) 100%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 6px 22px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(180, 168, 228, 0.4);
}
.sidebar-link:hover::after { opacity: 1; background: linear-gradient(135deg, rgba(180, 168, 228, 0.4) 0%, transparent 60%); }
.sidebar-link:active { transform: translateY(0); }
.sidebar-link.active {
  background:
    linear-gradient(135deg, rgba(137, 110, 192, 0.4) 0%, rgba(180, 168, 228, 0.4) 100%);
  border-color: rgba(137, 110, 192, 0.4);
  color: var(--amber-bright);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(137, 110, 192, 0.4),
    0 8px 26px rgba(137, 110, 192, 0.4);
}
.sidebar-link.active .sb-sub { color: var(--amber-bright); opacity: 0.85; }
.sidebar-link.active .sb-arrow { opacity: 1; color: var(--amber-bright); }
.sidebar-link.small {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 10px 14px;
  grid-template-columns: 30px 1fr;
}
.sidebar-link.small .sb-icon { width: 28px; height: 28px; border-radius: 8px; }
.sidebar-link.small .sb-icon svg { width: 14px; height: 14px; }
.sidebar-link.danger:hover { color: var(--error); border-color: rgba(255, 107, 107, 0.30); background: rgba(255, 107, 107, 0.06); }
.sidebar-link.danger:hover .sb-icon { color: var(--error); border-color: rgba(255, 107, 107, 0.30); }

/* Icon tile inside sidebar buttons */
.sb-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(180, 168, 228, 0.4) 0%, rgba(137, 110, 192, 0.4) 100%);
  border: 1px solid rgba(180, 168, 228, 0.22);
  color: var(--cyan-bright);
  transition: all var(--transition);
}
.sb-icon svg {
  width: 17px; height: 17px;
  filter: drop-shadow(0 0 4px rgba(180, 168, 228, 0.4));
}
.sidebar-link:hover .sb-icon {
  background: linear-gradient(135deg, rgba(180, 168, 228, 0.4) 0%, rgba(137, 110, 192, 0.4) 100%);
  border-color: rgba(180, 168, 228, 0.22);
  box-shadow: 0 0 14px rgba(180, 168, 228, 0.4);
}
.sidebar-link.active .sb-icon {
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-bright) 100%);
  border-color: var(--amber-bright);
  color: var(--void);
  box-shadow: 0 0 18px rgba(137, 110, 192, 0.4);
}
.sidebar-link.active .sb-icon svg { filter: none; }

.sb-label { display: flex; flex-direction: column; line-height: 1.25; gap: 2px; min-width: 0; }
.sb-name {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb-arrow {
  display: flex;
  align-items: center; justify-content: center;
  color: var(--text-faint);
  opacity: 0;
  transition: all var(--transition);
}
.sb-arrow svg { width: 12px; height: 12px; }
.sidebar-link:hover .sb-arrow { opacity: 1; transform: translateX(-3px); color: var(--cyan-bright); }

.sidebar-footer {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(180, 168, 228, 0.22);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Mobile: slide-out */
@media (max-width: 959px) {
  .sidebar { transform: translateX(100%); box-shadow: -16px 0 60px rgba(0,0,0,0.5); }
  .sidebar.open { transform: translateX(0); }
}
.sidebar-overlay {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at top right, rgba(36, 35, 31, 0.65), rgba(36, 35, 31, 0.82));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 80;
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition);
}
.sidebar-overlay.visible { opacity: 1; pointer-events: auto; }
@media (min-width: 960px) { .sidebar-overlay { display: none; } }

/* ==========  APP LAYOUT  ==========
   Banner spans full width above. Below it, a flex row:
   sidebar pinned on the right (RTL: first child), main fills the rest.
   On mobile the sidebar reverts to its existing slide-out behavior.
*/
.app-layout { max-width: 1440px; margin: 0 auto; }
main {
  padding: 18px 16px 40px;
  min-height: calc(100vh - 200px - 220px);
}
@media (min-width: 960px) {
  .app-layout {
    display: flex;
    align-items: flex-start;
  }
  /* On desktop, sidebar is part of the flex flow and sticks below the banner */
  .sidebar {
    position: sticky;
    top: 0;
    right: auto;
    height: calc(100dvh - 24px);
    flex-shrink: 0;
  }
  main {
    flex: 1;
    min-width: 0;
    padding: 32px 40px 48px;
    margin-right: 0;
  }
}

/* ==========  Initial loader  ========== */
.loader {
  display: flex;
  flex-direction: column;
  align-items: center; justify-content: center;
  padding: 120px 20px;
  gap: 18px;
}
.loader-spinner {
  width: 48px; height: 48px;
  border: 2px solid rgba(180, 168, 228, 0.22);
  border-top-color: var(--cyan-bright);
  border-right-color: var(--amber);
  border-radius: 50%;
  animation: spin 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  box-shadow: 0 0 24px rgba(180, 168, 228, 0.4);
}
.loader-text {
  font-family: var(--font-mono);
  color: var(--text-secondary);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========  HOME / HERO  ========== */
.hero {
  position: relative;
  /* Reduced opacity from 0.88 → 0.40 on the dark base so sparkles + grid behind
     show through the hero. Glass effect is now a real glass effect. */
  background:
    radial-gradient(ellipse 70% 100% at 0% 50%,    rgba(180, 168, 228, 0.22), transparent 60%),
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(137, 110, 192, 0.18),  transparent 60%),
    radial-gradient(ellipse 40% 60% at 50% 0%,    rgba(180, 168, 228, 0.10),  transparent 60%),
    linear-gradient(135deg, rgba(36, 35, 31, 0.40) 0%, rgba(52, 48, 67, 0.30) 50%, rgba(36, 35, 31, 0.40) 100%);
  border: 1.5px solid transparent;
  border-radius: var(--radius-xl);
  padding: 18px 22px;
  margin-bottom: 20px;
  overflow: hidden;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(180, 168, 228, 0.30);
}
@media (min-width: 768px) {
  .hero {
    padding: 24px 40px 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }
}
[data-theme="light"] .hero {
  background:
    radial-gradient(ellipse 70% 100% at 0% 50%, rgba(180, 168, 228, 0.4), transparent 60%),
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(137, 110, 192, 0.4), transparent 60%),
    linear-gradient(135deg, #ffffff 0%, #EFEDF3 100%);
  border-color: rgba(52, 48, 67, 0.08);
}

/* Hex corner decoration */
.hero::before {
  content: '';
  position: absolute;
  top: -40px; left: -40px;
  width: 240px; height: 240px;
  background:
    conic-gradient(from 30deg at 50% 50%,
      transparent 0deg,
      rgba(180, 168, 228, 0.22) 60deg,
      transparent 120deg,
      rgba(137, 110, 192, 0.22)  180deg,
      transparent 240deg,
      rgba(180, 168, 228, 0.16)  300deg,
      transparent 360deg);
  filter: blur(50px);
  opacity: 0.75;
  animation: heroRotate 24s linear infinite;
}
@keyframes heroRotate { to { transform: rotate(360deg); } }

/* Soft circuit grid texture inside the hero */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(180, 168, 228, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(137, 110, 192, 0.05) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;
  mask-image: radial-gradient(ellipse at 100% 50%, black 5%, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse at 100% 50%, black 5%, transparent 60%);
  pointer-events: none;
  opacity: 0.5;
}

.hero > * { position: relative; z-index: 2; }

.hero-content { display: flex; flex-direction: column; align-items: flex-end; width: 100%; }
@media (max-width: 767px) { .hero-content { align-items: stretch; } }

.hero-greeting {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--neon-cyan);
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-weight: 500;
  padding: 6px 14px;
  background: rgba(180, 168, 228, 0.08);
  border: 1px solid rgba(180, 168, 228, 0.28);
  border-radius: 100px;
  align-self: flex-start;
  box-shadow: 0 0 24px rgba(180, 168, 228, 0.15);
}
.hero-greeting::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--neon-cyan);
  box-shadow: 0 0 12px var(--neon-cyan);
  animation: blink 1.8s ease-in-out infinite;
}

.hero h1 {
  font-family: var(--font-body);
  font-size: clamp(28px, 5.4vw, 50px);
  font-weight: 800;
  margin-bottom: 14px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fff;
}
.hero h1 .accent {
  background: linear-gradient(95deg, var(--neon-cyan) 0%, var(--electric-blue) 35%, var(--violet) 70%, var(--mint) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(137, 110, 192, 0.35));
}
.hero p {
  color: var(--text-secondary);
  font-size: clamp(15px, 1.7vw, 19px);
  line-height: 1.6;
  margin-top: 18px;
  margin-bottom: 28px;
  max-width: 64ch;
}
@media (min-width: 768px) { .hero p { text-align: right; } }
/* Stats panel: fill the full width of the hero, not just left half */
@media (min-width: 768px) { .hero-stats { width: 100%; max-width: 100%; } }

/* Hero intro paragraph - bigger, single-line on desktop, tight margins */
.hero p.hero-intro {
  color: var(--text-secondary);
  font-size: clamp(15px, 2vw, 21px);
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 14px;
  max-width: none;
  font-weight: 500;
}
@media (min-width: 1100px) {
  .hero p.hero-intro {
    white-space: nowrap;
    font-size: clamp(17px, 1.6vw, 20px);
  }
}

/* Stats row */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 520px) { .hero-stats { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
@media (min-width: 768px) { .hero-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .hero-stats { grid-template-columns: repeat(4, 1fr); } }

.hero-stat {
  position: relative;
  background: linear-gradient(135deg, rgba(52, 48, 67, 0.85) 0%, rgba(52, 48, 67, 0.65) 100%);
  border: 1px solid rgba(180, 168, 228, 0.38);
  border-radius: var(--radius);
  padding: 20px 14px;
  text-align: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  transition: all var(--transition);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.35),
    0 0 18px rgba(180, 168, 228, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: statBreathe 4s ease-in-out infinite;
}
.hero-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), var(--violet, #896EC0), transparent);
  opacity: 0.85;
}
.hero-stat:hover {
  border-color: var(--neon-cyan);
  transform: translateY(-3px);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.50),
    0 0 36px rgba(180, 168, 228, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.hero-stat-value {
  font-family: var(--font-body);
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--neon-cyan);
  text-shadow: 0 0 18px rgba(180, 168, 228, 0.45);
}
.hero-stat-label {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-primary);
  margin-top: 10px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

button.hero-stat-clickable {
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.hero-stat-clickable:hover {
  border-color: var(--neon-cyan);
  background: linear-gradient(135deg, rgba(52, 48, 67, 0.95) 0%, rgba(52, 48, 67, 0.85) 100%);
}
.hero-stat-clickable:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 2px;
}
.hero-stat-hint {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--neon-cyan);
  margin-top: 6px;
  letter-spacing: 0;
  opacity: 0.9;
  text-transform: none;
  font-weight: 600;
}
@keyframes statBreathe {
  0%, 100% { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), 0 0 18px rgba(180, 168, 228, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
  50%      { box-shadow: 0 6px 28px rgba(0, 0, 0, 0.40), 0 0 28px rgba(180, 168, 228, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
}
@media (max-width: 600px) {
  .hero-stat { padding: 16px 10px; }
  .hero-stat-value { font-size: 34px; }
  .hero-stat-label { font-size: 13px; margin-top: 8px; }
  .hero-stat-hint { font-size: 11px; }
}

/* ============================================================
   Stat detail modal (drill-down from clickable KPI boxes)
   ============================================================ */
.stat-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(36, 35, 31, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.stat-detail-overlay.visible { opacity: 1; }
.stat-detail-panel {
  width: 100%;
  max-width: 540px;
  max-height: 88vh;
  background: linear-gradient(180deg, rgba(36, 35, 31, 0.98), rgba(52, 48, 67, 0.95));
  border: 1px solid rgba(180, 168, 228, 0.35);
  border-radius: 18px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6), 0 0 40px rgba(180, 168, 228, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.stat-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(180, 168, 228, 0.18);
  background: rgba(36, 35, 31, 0.4);
}
.stat-detail-title {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.stat-detail-close {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(180, 168, 228, 0.3);
  background: rgba(180, 168, 228, 0.12);
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.15s;
}
.stat-detail-close:hover {
  background: rgba(137, 110, 192, 0.18);
  border-color: var(--btc-orange);
  color: var(--btc-orange);
}
/* Header layout: title takes the row, action + close sit together on the far edge */
.stat-detail-header { gap: 10px; }
.stat-detail-title { flex: 1; }
.stat-detail-action {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--mint);
  background: rgba(137, 110, 192, 0.14);
  color: var(--mint);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.stat-detail-action:hover {
  background: rgba(137, 110, 192, 0.24);
  transform: translateY(-1px);
}
@media (max-width: 600px) {
  .stat-detail-action { padding: 7px 10px; font-size: 12px; }
}
.stat-detail-body {
  padding: 12px;
  overflow-y: auto;
  flex: 1;
}
.stat-detail-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 14px;
}
.stat-detail-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: rgba(52, 48, 67, 0.4);
  border: 1px solid rgba(180, 168, 228, 0.12);
  border-radius: 12px;
  color: var(--text-primary);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: all 0.15s;
}
.stat-detail-row:hover:not(:disabled) {
  background: rgba(52, 48, 67, 0.75);
  border-color: rgba(180, 168, 228, 0.22);
  transform: translateY(-1px);
}
.stat-detail-row:disabled {
  cursor: default;
  opacity: 0.85;
}
.stat-detail-row-lead {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.stat-detail-row-trail {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-shrink: 0;
}
.stat-detail-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 3px 7px;
  background: rgba(180, 168, 228, 0.18);
  color: var(--cyan-bright);
  border-radius: 6px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.stat-detail-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.stat-detail-value {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--btc-orange);
}
.stat-detail-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
@media (max-width: 540px) {
  .stat-detail-panel { max-height: 92vh; border-radius: 14px; }
  .stat-detail-header { padding: 14px 16px; }
  .stat-detail-title { font-size: 15px; }
  .stat-detail-name { font-size: 13px; }
  .stat-detail-value { font-size: 14px; }
}

/* ============================================================
   PWA install modal + sidebar install button
   ============================================================ */
.sidebar-install {
  background: linear-gradient(135deg, rgba(137, 110, 192, 0.10), rgba(180, 168, 228, 0.10));
  border-color: rgba(180, 168, 228, 0.22) !important;
}
.sidebar-install .sb-icon {
  color: var(--mint);
}
.sidebar-install:hover {
  background: linear-gradient(135deg, rgba(137, 110, 192, 0.20), rgba(180, 168, 228, 0.20));
}

.install-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(36, 35, 31, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.install-modal-overlay.visible { opacity: 1; }
.install-modal-panel {
  width: 100%;
  max-width: 460px;
  background: linear-gradient(180deg, rgba(36, 35, 31, 0.98), rgba(52, 48, 67, 0.96));
  border: 1px solid rgba(180, 168, 228, 0.35);
  border-radius: 20px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.65), 0 0 50px rgba(137, 110, 192, 0.12);
  overflow: hidden;
}
.install-modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid rgba(180, 168, 228, 0.18);
}
.install-modal-icon {
  font-size: 32px;
  filter: drop-shadow(0 4px 14px rgba(137, 110, 192, 0.35));
}
.install-modal-title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.install-modal-body {
  padding: 18px 22px;
  color: var(--text-secondary);
  font-size: 14.5px;
  line-height: 1.6;
}
.install-modal-body p { margin: 0 0 10px; }
.install-modal-sub {
  font-size: 12.5px;
  color: var(--text-muted);
}
.install-modal-steps {
  margin: 12px 0 0;
  padding-inline-start: 22px;
  color: var(--text-primary);
}
.install-modal-steps li { margin-bottom: 8px; font-size: 14px; }
.install-modal-footer {
  padding: 14px 22px 20px;
  display: flex;
  justify-content: flex-end;
}
.install-modal-footer-row {
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.install-modal-primary,
.install-modal-secondary,
.install-modal-close {
  padding: 11px 22px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
}
.install-modal-primary {
  background: linear-gradient(135deg, var(--mint) 0%, var(--neon-cyan) 100%);
  color: #24231F;
  box-shadow: 0 6px 18px rgba(137, 110, 192, 0.3);
}
.install-modal-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(137, 110, 192, 0.45);
}
.install-modal-secondary {
  background: rgba(180, 168, 228, 0.12);
  color: var(--text-secondary);
  border-color: rgba(180, 168, 228, 0.35);
}
.install-modal-secondary:hover {
  background: rgba(180, 168, 228, 0.22);
  color: var(--text-primary);
}
.install-modal-close {
  background: rgba(180, 168, 228, 0.18);
  color: var(--cyan-bright);
  border-color: rgba(180, 168, 228, 0.5);
  min-width: 140px;
}
.install-modal-close:hover {
  background: rgba(180, 168, 228, 0.28);
}
@media (min-width: 600px) {
  .hero-stat-value { font-size: 36px; }
}

/* Hero deco panel removed per user request - kept rule for backwards compat */
.hero-deco-panel { display: none !important; }
.hero-deco-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 18% 22%, var(--neon-cyan), transparent 65%),
    radial-gradient(2.5px 2.5px at 34% 58%, var(--neon-purple), transparent 65%),
    radial-gradient(2px 2px at 52% 31%, var(--neon-green), transparent 65%),
    radial-gradient(2.5px 2.5px at 68% 72%, var(--neon-magenta), transparent 65%),
    radial-gradient(2px 2px at 82% 19%, var(--neon-cyan), transparent 65%),
    radial-gradient(2.5px 2.5px at 26% 84%, var(--neon-magenta), transparent 65%),
    radial-gradient(2px 2px at 45% 12%, var(--neon-green), transparent 65%),
    radial-gradient(2.5px 2.5px at 74% 47%, var(--neon-purple), transparent 65%),
    radial-gradient(1.5px 1.5px at 88% 88%, #fff, transparent 65%),
    radial-gradient(1.5px 1.5px at 12% 67%, #fff, transparent 65%);
  filter: drop-shadow(0 0 6px currentColor);
  animation: heroSparkle 4s ease-in-out infinite;
}
.hero-deco-panel::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 320px; height: 320px;
  border: 1px solid rgba(180, 168, 228, 0.22);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 30% 30%, rgba(180, 168, 228, 0.4), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(137, 110, 192, 0.4), transparent 55%);
  box-shadow:
    0 0 0 1px rgba(137, 110, 192, 0.4),
    0 0 60px rgba(180, 168, 228, 0.4),
    inset 0 0 80px rgba(137, 110, 192, 0.4);
  animation: spinSlow 36s linear infinite;
}
@keyframes heroSparkle {
  0%, 100% { opacity: 0.4; transform: scale(0.96); }
  50%      { opacity: 1;   transform: scale(1.04); }
}
@keyframes spinSlow { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes heroFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-10px) scale(1.03); }
}

/* ==========  SECTION TITLES  ========== */
.section-title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 32px 0 16px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.section-title > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.section-title > span:first-child::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 2px;
  background: linear-gradient(90deg, var(--amber), var(--cyan));
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(137, 110, 192, 0.4);
}
.section-title-link {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--cyan-bright);
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid rgba(180, 168, 228, 0.22);
  background: rgba(180, 168, 228, 0.4);
  transition: all var(--transition-fast);
}
.section-title-link:hover { background: rgba(180, 168, 228, 0.4); border-color: rgba(180, 168, 228, 0.4); }
.section-more-row { display: flex; justify-content: center; margin: 14px 0 4px; }
.section-more-btn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--cyan-bright);
  cursor: pointer;
  padding: 10px 22px;
  border-radius: 100px;
  border: 1px solid rgba(180, 168, 228, 0.22);
  background: rgba(180, 168, 228, 0.12);
  transition: all var(--transition-fast);
}
.section-more-btn:hover { background: rgba(180, 168, 228, 0.22); }

/* ==========  QUICK ACTIONS  ========== */
.quick-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 28px;
}
@media (min-width: 600px) { .quick-actions { grid-template-columns: 1fr 1fr; } }

.quick-action {
  position: relative;
  background: linear-gradient(135deg, rgba(52, 48, 67, 0.55) 0%, rgba(52, 48, 67, 0.40) 100%);
  border: 1px solid rgba(180, 168, 228, 0.22);
  border-radius: var(--radius-lg);
  padding: 22px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: right;
  transition: all var(--transition);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  cursor: pointer;
}
.quick-action::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(180, 168, 228, 0.4), transparent 60%);
  filter: blur(28px);
  opacity: 0;
  transition: opacity var(--transition);
}
.quick-action:hover::before, .quick-action:active::before { opacity: 1; }
.quick-action:hover, .quick-action:active {
  border-color: rgba(180, 168, 228, 0.22);
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
}
/* Primary quick-action - was solid yellow, now matches the brand glass palette
   (dark glass panel + amber→cyan gradient border + warm-cool glow). */
.quick-action.primary {
  background:
    radial-gradient(ellipse at top right, rgba(137, 110, 192, 0.25), transparent 65%),
    radial-gradient(ellipse at bottom left, rgba(180, 168, 228, 0.20), transparent 65%),
    linear-gradient(135deg, rgba(52, 48, 67, 0.65) 0%, rgba(52, 48, 67, 0.50) 100%) padding-box,
    linear-gradient(135deg, var(--amber-bright) 0%, var(--cyan-bright) 100%) border-box;
  border: 1.5px solid transparent;
  color: var(--text-primary);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.45),
    0 0 28px rgba(137, 110, 192, 0.18),
    0 0 36px rgba(180, 168, 228, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.quick-action.primary:hover {
  transform: translateY(-3px);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(137, 110, 192, 0.28),
    0 0 52px rgba(180, 168, 228, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.quick-action.primary::before {
  background: radial-gradient(circle, rgba(137, 110, 192, 0.35), transparent 60%);
  opacity: 1;
}
.quick-action.primary .qa-title {
  background: linear-gradient(95deg, var(--amber-bright) 0%, var(--cyan-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.quick-action.primary .qa-subtitle { color: var(--text-secondary); }
.quick-action.primary .quick-action-icon { color: var(--text-primary); }
.quick-action-icon {
  font-size: 22px;
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(180, 168, 228, 0.4), rgba(137, 110, 192, 0.4));
  border: 1px solid rgba(180, 168, 228, 0.22);
  margin-bottom: 6px;
}
.quick-action.primary .quick-action-icon {
  background: linear-gradient(135deg, rgba(137, 110, 192, 0.30), rgba(180, 168, 228, 0.30));
  border-color: rgba(137, 110, 192, 0.45);
  color: #fff;
}
.qa-title {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.qa-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 400;
}

/* ==========  Q DETAIL MODAL (from home stat drilldown)  ========== */
.q-detail-overlay {
  position: fixed; inset: 0;
  background: rgba(36, 35, 31, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  z-index: 1000;
  animation: fadeIn 0.18s ease-out;
}
.q-detail-modal {
  background: linear-gradient(135deg, rgba(52, 48, 67, 0.95) 0%, rgba(52, 48, 67, 0.85) 100%);
  border: 1px solid rgba(180, 168, 228, 0.35);
  border-radius: 18px;
  max-width: 760px;
  width: 100%;
  max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(180, 168, 228, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.q-detail-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(180, 168, 228, 0.20);
  background: rgba(36, 35, 31, 0.55);
}
.q-detail-head-text {
  flex: 1;
  font-weight: 700;
  color: var(--neon-cyan);
  font-size: 0.95rem;
}
.q-detail-close {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(180, 168, 228, 0.30);
  background: rgba(36, 35, 31, 0.7);
  color: var(--text-soft, #B4A8E4);
  font-size: 1rem;
  cursor: pointer;
  transition: all 150ms ease;
}
.q-detail-close:hover {
  border-color: var(--danger, #FF6B6B);
  color: var(--danger, #FF6B6B);
  background: rgba(255, 107, 107, 0.12);
}
.q-detail-body {
  padding: 18px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
}
.q-detail-text {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text-primary, #FFFFFF);
  font-weight: 500;
}
.q-detail-correct-text {
  background: rgba(77, 219, 136, 0.10);
  border: 1px solid rgba(77, 219, 136, 0.30);
  border-radius: 12px;
  padding: 12px 14px;
}
@media (max-width: 600px) {
  .q-detail-overlay { padding: 8px; }
  .q-detail-modal { border-radius: 14px; max-height: 94vh; }
  .q-detail-head { padding: 12px 14px; }
  .q-detail-body { padding: 14px; gap: 12px; }
  .q-detail-text { font-size: 0.98rem; }
}

/* ==========  PERSISTENT SCROLL NAV (left side, always visible)  ========== */
.scroll-nav {
  position: fixed;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 60;
  pointer-events: auto;
}
.scroll-nav-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid rgba(180, 168, 228, 0.45);
  background: rgba(36, 35, 31, 0.72);
  color: var(--neon-cyan, #B4A8E4);
  cursor: pointer;
  padding: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.scroll-nav-btn:hover {
  background: rgba(180, 168, 228, 0.18);
  color: var(--text-primary, #FFFFFF);
  transform: translateX(-2px);
  box-shadow: 0 4px 16px rgba(180, 168, 228, 0.20);
}
.scroll-nav-btn:focus-visible {
  outline: 2px solid var(--neon-cyan, #B4A8E4);
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .scroll-nav { left: 8px; }
  .scroll-nav-btn { width: 32px; height: 32px; }
}

/* ==========  CARDS GRID  ========== */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 480px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px) { .cards-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .cards-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .cards-grid { grid-template-columns: repeat(5, 1fr); } }

.card {
  position: relative;
  background: linear-gradient(135deg, rgba(52, 48, 67, 0.50) 0%, rgba(52, 48, 67, 0.30) 100%);
  border: 1px solid rgba(180, 168, 228, 0.22);
  border-radius: var(--radius);
  padding: 20px 20px 18px;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all var(--transition);
  overflow: hidden;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  cursor: pointer;
  min-height: 130px;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; right: 14px;
  width: 36px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--amber));
  border-radius: 0 0 2px 2px;
  opacity: 0.6;
  transition: all var(--transition);
}
.card::after {
  content: '';
  position: absolute;
  bottom: -50%; left: -50%;
  width: 200%; height: 100%;
  background: radial-gradient(ellipse, rgba(180, 168, 228, 0.4), transparent 60%);
  filter: blur(40px);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.card:hover, .card:active {
  transform: translateY(-3px);
  border-color: rgba(137, 110, 192, 0.4);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.card:hover::before { opacity: 1; width: 60px; box-shadow: 0 0 12px var(--amber); }
.card:hover::after { opacity: 1; }
.card > * { position: relative; z-index: 1; }

.card-title {
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}
.card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  flex-wrap: wrap;
}
.card-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: rgba(180, 168, 228, 0.4);
  border: 1px solid rgba(180, 168, 228, 0.22);
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 500;
}
.card-badge.card-best {
  background: rgba(137, 110, 192, 0.4);
  border-color: rgba(137, 110, 192, 0.4);
  color: var(--amber-bright);
  font-weight: 700;
}
.card-badge.card-resume {
  background: rgba(137, 110, 192, 0.18);
  border-color: rgba(137, 110, 192, 0.5);
  color: var(--mint);
  font-weight: 700;
}
.card-progress-bar {
  height: 4px;
  background: rgba(180, 168, 228, 0.4);
  border-radius: 100px;
  overflow: hidden;
  margin-top: auto;
  position: relative;
}
.card-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan-bright), var(--amber-bright));
  border-radius: 100px;
  box-shadow: 0 0 10px var(--cyan-glow);
  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.card-progress-fill.card-progress-resume {
  background: linear-gradient(90deg, var(--mint), var(--cyan-bright));
  box-shadow: 0 0 10px rgba(137, 110, 192, 0.45);
}

/* ---------- Resume dialog (replaces window.confirm) ---------- */
.resume-overlay {
  position: fixed;
  inset: 0;
  background: rgba(36, 35, 31, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
  animation: resume-fade-in 220ms ease-out;
}
@keyframes resume-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.resume-panel {
  background: linear-gradient(135deg, rgba(52, 48, 67, 0.95), rgba(36, 35, 31, 0.95));
  border: 1px solid rgba(180, 168, 228, 0.22);
  border-radius: 20px;
  padding: 32px 28px 24px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(180, 168, 228, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: resume-pop-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes resume-pop-in {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.resume-icon {
  font-size: 38px;
  line-height: 1;
  color: var(--mint);
  margin-bottom: 12px;
  text-shadow: 0 0 24px rgba(137, 110, 192, 0.6);
  animation: resume-icon-pulse 1.8s ease-in-out infinite;
}
@keyframes resume-icon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.resume-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 6px;
  line-height: 1.3;
}
.resume-quiz-name {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 22px;
  padding: 6px 14px;
  background: rgba(180, 168, 228, 0.12);
  border-radius: 100px;
  display: inline-block;
}
.resume-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.resume-stat {
  background: rgba(137, 110, 192, 0.08);
  border: 1px solid rgba(180, 168, 228, 0.25);
  border-radius: 14px;
  padding: 14px 8px;
}
.resume-stat-num {
  font-size: 28px;
  font-weight: 800;
  color: var(--mint);
  line-height: 1;
  margin-bottom: 4px;
  text-shadow: 0 0 12px rgba(137, 110, 192, 0.4);
}
.resume-stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}
.resume-btn-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.resume-btn {
  border: none;
  border-radius: 100px;
  padding: 13px 22px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: transform 180ms, box-shadow 180ms, background 180ms;
}
.resume-btn:hover {
  transform: translateY(-1px);
}
.resume-btn:active {
  transform: translateY(0);
}
.resume-btn:focus-visible {
  outline: 2px solid var(--cyan-bright);
  outline-offset: 2px;
}
.resume-btn-primary {
  background: linear-gradient(135deg, var(--mint), var(--cyan-bright));
  color: var(--void);
  box-shadow: 0 6px 22px rgba(137, 110, 192, 0.35);
}
.resume-btn-primary:hover {
  box-shadow: 0 10px 30px rgba(137, 110, 192, 0.5);
}
.resume-btn-secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid rgba(180, 168, 228, 0.35);
}
.resume-btn-secondary:hover {
  background: rgba(180, 168, 228, 0.12);
  color: var(--text-primary);
}
@media (max-width: 600px) {
  .resume-panel {
    padding: 26px 20px 20px;
    max-width: 360px;
  }
  .resume-title { font-size: 19px; }
  .resume-stat-num { font-size: 24px; }
  .resume-icon { animation: none; }
}

.topic-icon {
  font-size: 24px;
  margin-bottom: 2px;
  display: inline-flex;
  width: 44px; height: 44px;
  border-radius: 12px;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(180, 168, 228, 0.4), rgba(137, 110, 192, 0.4));
  border: 1px solid rgba(180, 168, 228, 0.22);
}

/* ==========  BUTTONS  ========== */
.btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: all var(--transition);
  background: rgba(180, 168, 228, 0.4);
  color: var(--text-primary);
  border: 1px solid rgba(180, 168, 228, 0.22);
  min-height: 48px;
}
.btn:hover, .btn:active {
  background: rgba(180, 168, 228, 0.4);
  border-color: rgba(180, 168, 228, 0.22);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }
.btn-primary {
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-deep) 100%);
  color: #FFFFFF;
  border: 1px solid rgba(137, 110, 192, 0.4);
  box-shadow: 0 8px 24px rgba(137, 110, 192, 0.4);
}
.btn-primary:hover, .btn-primary:active {
  box-shadow: 0 12px 32px rgba(137, 110, 192, 0.55), 0 0 20px rgba(137, 110, 192, 0.45);
  transform: translateY(-1px);
}
.btn-secondary {
  background: rgba(180, 168, 228, 0.4);
  border-color: rgba(180, 168, 228, 0.22);
  color: var(--cyan-bright);
}
.btn-secondary:hover {
  background: rgba(180, 168, 228, 0.4);
  border-color: rgba(180, 168, 228, 0.22);
}
.btn-ghost { background: transparent; border-color: rgba(180, 168, 228, 0.4); }
.btn-success {
  background: linear-gradient(135deg, var(--success) 0%, #2BB37D 100%);
  color: var(--void);
  border: 1px solid rgba(77, 219, 136, 0.4);
}
.btn-full { width: 100%; }

/* ==========  RUNNER / QUIZ  ========== */
.sim-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 14px;
  flex-wrap: wrap;
}
.sim-title-bar { flex: 1; min-width: 0; }
.sim-title {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.sim-progress-text {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--cyan-bright);
  margin-top: 4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sim-mode-badge {
  background: linear-gradient(135deg, rgba(137, 110, 192, 0.4), rgba(137, 110, 192, 0.4));
  color: var(--amber-bright);
  padding: 6px 12px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid rgba(137, 110, 192, 0.4);
}

.progress-track {
  height: 6px;
  background: rgba(180, 168, 228, 0.4);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 24px;
  position: relative;
}
.progress-track::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(180, 168, 228, 0.4));
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan-bright), var(--amber-bright));
  box-shadow: 0 0 14px var(--cyan-glow);
  transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  border-radius: 100px;
}

.question-card {
  background: linear-gradient(135deg, rgba(52, 48, 67, 0.65) 0%, rgba(52, 48, 67, 0.45) 100%);
  border: 1px solid rgba(180, 168, 228, 0.22);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  margin-bottom: 16px;
  animation: slideIn 320ms cubic-bezier(0.22, 1, 0.36, 1);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
@media (min-width: 600px) { .question-card { padding: 32px 30px; } }
/* מצב בהיר - אזור השאלות: רקע לבן + ניגודיות קריאה (במקום רקע כהה קשיח) */
[data-theme="light"] .question-card {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
[data-theme="light"] .option {
  background: var(--bg-tertiary);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
[data-theme="light"] .explanation-panel { background: var(--bg-tertiary); }
@keyframes slideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.question-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--amber-bright);
  background: rgba(137, 110, 192, 0.4);
  padding: 5px 11px;
  border-radius: 100px;
  margin-bottom: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  border: 1px solid rgba(137, 110, 192, 0.4);
}
.passage-box {
  background: linear-gradient(135deg, rgba(180, 168, 228, 0.10) 0%, rgba(137, 110, 192, 0.10) 100%);
  border: 1px solid rgba(180, 168, 228, 0.35);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin: 12px 0 18px;
  position: relative;
}
.passage-box::before {
  content: '📖 קטע לקריאה';
  position: absolute;
  top: -10px;
  right: 16px;
  background: var(--void);
  padding: 2px 10px;
  border-radius: 100px;
  border: 1px solid rgba(180, 168, 228, 0.35);
  color: var(--neon-cyan);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.passage-heading {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.4;
}
.passage-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.passage-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px 11px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--neon-cyan), var(--electric-blue));
  color: var(--void) !important;
  font-weight: 800;
  font-size: 15px;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
  box-shadow: 0 4px 18px rgba(180, 168, 228, 0.45);
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.6);
}
.passage-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(180, 168, 228, 0.65);
  background: linear-gradient(135deg, var(--electric-blue), var(--violet));
}
.passage-link-arrow {
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  display: inline-block;
  transform: rotate(0deg);
  transition: transform 160ms ease;
}
.passage-link:hover .passage-link-arrow {
  transform: translateY(-2px) translateX(2px);
}
.passage-domain {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: 6px;
}
.passage-domain::before {
  content: '🌐';
  font-size: 12px;
}
.question-text {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 20px;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
@media (min-width: 600px) { .question-text { font-size: 19px; } }

.question-callout {
  background: rgba(180, 168, 228, 0.4);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
  font-size: 13.5px;
  color: var(--text-secondary);
  border-right: 3px solid var(--cyan);
  line-height: 1.6;
}

.help-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(180, 168, 228, 0.4);
  color: var(--cyan-bright);
  padding: 9px 14px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 0;
  border: 1px solid rgba(180, 168, 228, 0.22);
  transition: all var(--transition-fast);
}
.help-btn:hover, .help-btn:active {
  background: rgba(180, 168, 228, 0.4);
  border-color: rgba(180, 168, 228, 0.22);
  transform: translateY(-1px);
}

.explanation-panel {
  background: linear-gradient(135deg, rgba(180, 168, 228, 0.4) 0%, rgba(180, 168, 228, 0.4) 100%);
  border: 1px solid rgba(180, 168, 228, 0.22);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 16px;
  font-size: 14.5px;
  line-height: 1.65;
  animation: slideIn 250ms cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
}
.explanation-panel::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--cyan-bright), var(--amber-bright));
}
.explanation-panel .ep-label {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 700;
  color: var(--cyan-bright);
  letter-spacing: 0;
  margin-bottom: 12px;
  line-height: 1.4;
}
@media (min-width: 600px) { .explanation-panel .ep-label { font-size: 21px; } }
.explanation-panel .ep-label-deep { color: var(--amber-bright); }
.explanation-panel .deep-btn {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cyan-bright);
  border: 1px solid rgba(180, 168, 228, 0.22);
  border-radius: 100px;
  padding: 8px 14px;
  background: rgba(180, 168, 228, 0.4);
  transition: all var(--transition-fast);
}
.explanation-panel .deep-btn:hover {
  background: rgba(180, 168, 228, 0.4);
  border-color: rgba(180, 168, 228, 0.22);
}
.explanation-panel .deep-text {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed rgba(180, 168, 228, 0.22);
  animation: slideIn 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.option {
  background: rgba(180, 168, 228, 0.4);
  border: 1.5px solid rgba(180, 168, 228, 0.22);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 15px;
  line-height: 1.55;
  text-align: right;
  min-height: 58px;
  position: relative;
  overflow: hidden;
}
.option:hover:not(.locked) {
  border-color: rgba(180, 168, 228, 0.22);
  background: rgba(180, 168, 228, 0.4);
  transform: translateX(-2px);
}
.option.selected {
  border-color: var(--amber);
  background: rgba(137, 110, 192, 0.4);
  box-shadow: 0 0 0 1px rgba(137, 110, 192, 0.4), 0 8px 24px rgba(137, 110, 192, 0.4);
}
.option.correct {
  border-color: var(--success);
  background: rgba(77, 219, 136, 0.4);
  box-shadow: 0 0 0 1px rgba(77, 219, 136, 0.4), 0 8px 24px rgba(77, 219, 136, 0.4);
}
.option.incorrect {
  border-color: var(--error);
  background: rgba(255, 107, 107, 0.40);
  box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.40), 0 8px 24px rgba(255, 107, 107, 0.40);
}
.option.locked { cursor: default; }
.option-marker {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border: 1.5px solid rgba(180, 168, 228, 0.22);
  border-radius: 10px;
  display: flex;
  align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  background: rgba(52, 48, 67, 0.55);
  transition: all var(--transition-fast);
}
.option.selected .option-marker {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--void);
}
.option.correct .option-marker {
  background: var(--success);
  border-color: var(--success);
  color: var(--void);
}
.option.incorrect .option-marker {
  background: var(--error);
  border-color: var(--error);
  color: var(--void);
}
.option-text { flex: 1; padding-top: 4px; }
.option-icon { font-size: 18px; line-height: 1; padding-top: 4px; }

.open-input {
  width: 100%;
  background: rgba(52, 48, 67, 0.55);
  border: 1.5px solid rgba(180, 168, 228, 0.22);
  border-radius: var(--radius);
  color: var(--text-primary);
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.6;
  min-height: 130px;
  resize: vertical;
  transition: all var(--transition-fast);
}
.open-input:focus {
  outline: none;
  border-color: var(--cyan-bright);
  box-shadow: 0 0 0 3px rgba(180, 168, 228, 0.4);
}
.open-note {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 10px;
  font-style: italic;
}

.action-bar {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 4px;
}
.action-bar .left { display: flex; gap: 8px; }
.action-bar .right { display: flex; gap: 8px; flex: 1; justify-content: flex-end; }
@media (max-width: 600px) {
  .action-bar { flex-direction: column-reverse; gap: 10px; }
  .action-bar .left, .action-bar .right { width: 100%; }
  .action-bar .btn { flex: 1; }
}

/* ==========  RESULTS  ========== */
.results-hero {
  position: relative;
  background:
    radial-gradient(ellipse at top, rgba(180, 168, 228, 0.4), transparent 60%),
    linear-gradient(180deg, rgba(52, 48, 67, 0.70), rgba(52, 48, 67, 0.40));
  border-radius: var(--radius-xl);
  padding: 44px 24px;
  text-align: center;
  margin-bottom: 28px;
  border: 1px solid rgba(180, 168, 228, 0.22);
  overflow: hidden;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.results-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--amber), transparent);
}
.score-circle {
  width: 152px; height: 152px;
  border-radius: 50%;
  margin: 0 auto 22px;
  display: flex;
  align-items: center; justify-content: center;
  flex-direction: column;
  background:
    radial-gradient(circle at center, rgba(52, 48, 67, 0.95), rgba(52, 48, 67, 0.95));
  border: 6px solid var(--amber);
  position: relative;
  box-shadow: 0 0 30px rgba(137, 110, 192, 0.4), inset 0 0 20px rgba(137, 110, 192, 0.4);
}
.score-circle.passing {
  border-color: var(--success);
  box-shadow: 0 0 36px rgba(77, 219, 136, 0.4), inset 0 0 20px rgba(77, 219, 136, 0.4);
}
.score-circle.failing {
  border-color: var(--error);
  box-shadow: 0 0 30px rgba(255, 107, 107, 0.32), inset 0 0 20px rgba(255, 107, 107, 0.10);
}
.score-percent {
  font-family: var(--font-body);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}
.score-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.results-message {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.results-detail { color: var(--text-secondary); margin-bottom: 24px; font-size: 14px; }

.review-item {
  background: linear-gradient(135deg, rgba(52, 48, 67, 0.50) 0%, rgba(52, 48, 67, 0.30) 100%);
  border: 1px solid rgba(180, 168, 228, 0.22);
  border-radius: var(--radius);
  padding: 18px 18px;
  margin-bottom: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.review-header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.review-status {
  width: 30px; height: 30px;
  border-radius: 10px;
  display: flex;
  align-items: center; justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--void);
  flex-shrink: 0;
}
.review-status.correct { background: var(--success); box-shadow: 0 0 12px rgba(77, 219, 136, 0.4); }
.review-status.incorrect { background: var(--error); box-shadow: 0 0 12px rgba(255, 107, 107, 0.30); }
.review-status.skipped { background: rgba(180, 168, 228, 0.4); color: var(--text-primary); }
.review-num {
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.review-question {
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.55;
  font-size: 15px;
  color: var(--text-primary);
}
.review-answers { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.review-line {
  padding: 10px 14px;
  border-radius: 10px;
  line-height: 1.5;
  border: 1px solid transparent;
}
.review-line.correct { background: rgba(77, 219, 136, 0.4); color: var(--success); border-color: rgba(77, 219, 136, 0.4); }
.review-line.user.wrong { background: rgba(255, 107, 107, 0.08); color: var(--error); border-color: rgba(255, 107, 107, 0.22); }
.review-line.user.right { background: rgba(77, 219, 136, 0.4); color: var(--success); border-color: rgba(77, 219, 136, 0.4); }
.review-line.user.neutral { background: rgba(137, 110, 192, 0.4); border-color: rgba(137, 110, 192, 0.4); }

/* ==========  Info blocks  ========== */
.info-block {
  background: linear-gradient(135deg, rgba(52, 48, 67, 0.55) 0%, rgba(52, 48, 67, 0.35) 100%);
  border: 1px solid rgba(180, 168, 228, 0.22);
  border-radius: var(--radius);
  padding: 24px 22px;
  margin-bottom: 14px;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.info-block h2 {
  font-family: var(--font-body);
  font-size: 20px;
  margin-bottom: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.info-block p { color: var(--text-secondary); line-height: 1.65; margin-bottom: 10px; }
.info-block ul { margin-right: 20px; color: var(--text-secondary); }
.info-block li { margin-bottom: 6px; line-height: 1.6; }

/* ==========  FOOTER  ========== */
.app-footer {
  margin-top: 80px;
  padding: 0 16px calc(20px + var(--safe-bottom));
  position: relative;
  z-index: 1;
}
@media (min-width: 960px) {
  .app-footer { padding-right: 16px; padding-left: 16px; }
}
.footer-content {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  padding: 32px 24px 24px;
  background: linear-gradient(180deg, rgba(52, 48, 67, 0.45) 0%, rgba(36, 35, 31, 0.65) 100%);
  border: 1px solid rgba(180, 168, 228, 0.22);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
.footer-content::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--amber), transparent);
  opacity: 0.6;
}

.footer-credits-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .footer-credits-row { flex-direction: column; gap: 22px; text-align: center; }
}

.footer-col-college {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: center;
}
@media (max-width: 720px) { .footer-col-college { flex-direction: column; text-align: center; } }
.footer-logo {
  width: 180px;
  height: auto;
  border-radius: 12px;
  background: white;
  padding: 12px 16px;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.32));
  flex-shrink: 0;
}
@media (max-width: 540px) {
  .footer-logo { width: 150px; padding: 10px 14px; }
}
.footer-copyright {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 420px;
}
@media (max-width: 540px) {
  .footer-copyright { font-size: 13.5px; max-width: 310px; }
}

.footer-col-builder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding-right: 20px;
  border-right: 1px solid rgba(180, 168, 228, 0.22);
}
@media (max-width: 720px) {
  .footer-col-builder { padding-right: 0; border-right: none; border-top: 1px solid rgba(180, 168, 228, 0.4); padding-top: 18px; }
}
.footer-builder-line {
  font-size: 13px;
  color: var(--text-secondary);
  font-family: inherit;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}
.footer-builder-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 8px;
}
@media (max-width: 540px) {
  .footer-builder-name-row { gap: 8px; }
}
.footer-builder-name {
  font-family: var(--font-body);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.005em;
  background: linear-gradient(95deg, var(--amber-bright) 0%, var(--cyan-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.footer-builder-sub {
  font-size: 13px;
  color: var(--text-secondary);
}

/* WhatsApp buttons - always solid green, pulse on hover (no color change) */
@keyframes waPulse {
  0%, 100% {
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35), 0 0 0 0 rgba(37, 211, 102, 0.55);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 6px 22px rgba(37, 211, 102, 0.55), 0 0 0 8px rgba(37, 211, 102, 0);
    transform: scale(1.04);
  }
}

.footer-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  font-family: var(--font-body);
  letter-spacing: -0.005em;
  box-shadow: 0 2px 10px rgba(37, 211, 102, 0.30);
}
.footer-wa-btn:hover, .footer-wa-btn:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  animation: waPulse 1.2s ease-in-out infinite;
}
.footer-wa-btn svg { flex-shrink: 0; }

.top-credit-wa {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-inline-start: 8px;
  padding: 3px 9px;
  background: #25D366;
  color: #fff;
  border: 1px solid #25D366;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  font-family: var(--font-body);
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.30);
}
.top-credit-wa:hover, .top-credit-wa:focus-visible {
  color: #fff;
  background: #25D366;
  animation: waPulse 1.2s ease-in-out infinite;
}
.top-credit-wa svg { flex-shrink: 0; }

.login-footer-wa {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: 6px;
  padding: 2px 8px;
  background: #25D366;
  color: #fff;
  border: 1px solid #25D366;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  vertical-align: middle;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.30);
}

/* Support / tip button - HIDDEN in production per Nati's instruction (26/05/2026).
   Do not display until further notice. Styles preserved below for future use. */
.top-credit-tip { display: none !important; }
.top-credit-tip-old-keep-below {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-inline-start: 8px;
  padding: 3px 9px;
  background: linear-gradient(135deg, #8A1A2B 0%, #4F0E1B 100%);
  color: #fff;
  border: 1px solid #6B1220;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(74, 14, 27, 0.45);
  transition: transform 0.15s;
}
.top-credit-tip:hover, .top-credit-tip:focus-visible {
  animation: tipPulse 1.2s ease-in-out infinite;
  outline: none;
}
.top-credit-tip svg {
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(255, 180, 180, 0.5));
}
@keyframes tipPulse {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(138, 26, 43, 0.45), 0 0 0 0 rgba(138, 26, 43, 0.55);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 4px 14px rgba(138, 26, 43, 0.6), 0 0 0 8px rgba(138, 26, 43, 0);
    transform: scale(1.04);
  }
}

/* Support modal */
.tip-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(36, 35, 31, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.tip-modal-overlay.visible { opacity: 1; }
.tip-modal-panel {
  width: 100%;
  max-width: 460px;
  background: linear-gradient(180deg, rgba(36, 35, 31, 0.98), rgba(52, 48, 67, 0.96));
  border: 1.5px solid;
  border-image: linear-gradient(135deg, #E63950 0%, var(--cyan-bright) 100%) 1;
  border-radius: 20px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.65), 0 0 40px rgba(230, 57, 80, 0.15);
  overflow: hidden;
}
.tip-modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px 14px;
  border-bottom: 1px solid rgba(230, 57, 80, 0.20);
}
.tip-modal-heart {
  font-size: 36px;
  line-height: 1;
  filter: drop-shadow(0 4px 14px rgba(230, 57, 80, 0.5));
  animation: heartBeat 1.4s ease-in-out infinite;
}
@keyframes heartBeat {
  0%, 50%, 100% { transform: scale(1); }
  25%, 75% { transform: scale(1.12); }
}
.tip-modal-title {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.tip-modal-body {
  padding: 18px 24px 4px;
  color: var(--text-secondary);
  font-size: 14.5px;
  line-height: 1.65;
}
.tip-modal-body p { margin: 0 0 12px; }
.tip-modal-body p:last-child { margin-bottom: 0; }
.tip-modal-phone {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  background: rgba(230, 57, 80, 0.12);
  border: 1px solid rgba(230, 57, 80, 0.40);
  border-radius: 12px;
  padding: 12px 20px;
  margin: 14px auto;
  letter-spacing: 0.06em;
  direction: ltr;
  cursor: copy;
  transition: all 0.15s;
}
.tip-modal-phone:hover {
  background: rgba(230, 57, 80, 0.18);
  border-color: rgba(230, 57, 80, 0.65);
}
.tip-modal-phone .copy-hint {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 4px;
  letter-spacing: 0;
  direction: rtl;
}
.tip-modal-signoff {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  margin: 18px 0 6px;
}
.tip-modal-qrs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 18px 0 14px;
}
.tip-qr-cell {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(230, 57, 80, 0.25);
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
}
.tip-qr-img {
  width: 100%;
  max-width: 180px;
  height: auto;
  border-radius: 8px;
  background: #fff;
  padding: 6px;
  display: block;
  margin: 0 auto;
}
.tip-qr-app {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  margin-top: 10px;
  letter-spacing: -0.005em;
}
.tip-modal-footer {
  padding: 14px 24px 22px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.tip-modal-close {
  padding: 10px 22px;
  border-radius: 12px;
  background: rgba(180, 168, 228, 0.14);
  color: var(--text-primary);
  border: 1px solid rgba(180, 168, 228, 0.30);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.tip-modal-close:hover {
  background: rgba(180, 168, 228, 0.24);
}
@media (max-width: 540px) {
  .top-credit-tip { font-size: 10.5px; padding: 3px 8px; }
  .tip-modal-panel { border-radius: 16px; }
  .tip-modal-header { padding: 18px 18px 12px; }
  .tip-modal-title { font-size: 17px; }
  .tip-modal-body { padding: 14px 18px 4px; font-size: 13.5px; }
  .tip-modal-phone { font-size: 19px; padding: 10px 16px; }
  .tip-modal-qrs { gap: 10px; }
  .tip-qr-img { max-width: 140px; }
  .tip-qr-app { font-size: 12px; }
  .tip-modal-signoff { font-size: 15px; }
  .tip-modal-footer { padding: 12px 18px 18px; }
}
.login-footer-wa:hover, .login-footer-wa:focus-visible {
  color: #fff;
  background: #25D366;
  animation: waPulse 1.2s ease-in-out infinite;
}
.login-footer-wa svg { flex-shrink: 0; }

.footer-bottom-line {
  margin-top: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180, 168, 228, 0.4), transparent);
}

/* ==========  EMPTY / SEARCH / TOAST  ========== */
.empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-secondary);
}
.empty-icon { font-size: 56px; margin-bottom: 16px; opacity: 0.7; }

.search-box {
  width: 100%;
  background: rgba(52, 48, 67, 0.55);
  border: 1.5px solid rgba(180, 168, 228, 0.22);
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 14px;
  margin-bottom: 18px;
  color: var(--text-primary);
  transition: all var(--transition-fast);
  backdrop-filter: blur(10px);
}
.search-box:focus {
  outline: none;
  border-color: var(--cyan-bright);
  box-shadow: 0 0 0 3px rgba(180, 168, 228, 0.4);
}

.toast {
  position: fixed;
  bottom: calc(28px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(140px);
  background: linear-gradient(135deg, rgba(52, 48, 67, 0.95), rgba(52, 48, 67, 0.95));
  color: var(--text-primary);
  padding: 14px 22px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  z-index: 300;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(180, 168, 228, 0.4);
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
  backdrop-filter: blur(18px);
}
.toast.visible { transform: translateX(-50%) translateY(0); }

/* ==========  LOGIN SCREEN  ========== */
body.login-mode .app-header,
body.login-mode .sidebar,
body.login-mode .sidebar-overlay,
body.login-mode .app-footer { display: none !important; }

.login-screen {
  min-height: 100vh; min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center; justify-content: center;
  padding: 32px 18px;
  position: relative;
  z-index: 1;
}

.login-card {
  width: 100%;
  max-width: 460px;
  background: linear-gradient(135deg, rgba(52, 48, 67, 0.78) 0%, rgba(52, 48, 67, 0.65) 100%);
  border: 1px solid rgba(180, 168, 228, 0.22);
  border-radius: 28px;
  padding: 42px 32px 36px;
  text-align: center;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 80px rgba(180, 168, 228, 0.4);
}
[data-theme="light"] .login-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(245, 248, 254, 0.85) 100%);
  border-color: rgba(52, 48, 67, 0.10);
}

.login-card::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background:
    radial-gradient(circle at 30% 30%, rgba(180, 168, 228, 0.4), transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(137, 110, 192, 0.4), transparent 40%);
  animation: loginGlow 8s ease-in-out infinite alternate;
  pointer-events: none;
}
.login-card::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan-bright), var(--amber-bright), transparent);
  opacity: 0.7;
}
@keyframes loginGlow {
  0%   { transform: rotate(0deg) scale(1); opacity: 0.7; }
  100% { transform: rotate(20deg) scale(1.1); opacity: 1; }
}
.login-card > * { position: relative; z-index: 2; }

.login-logo {
  width: 320px;
  height: auto;
  aspect-ratio: 2087 / 647;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto 20px;
  display: block;
  filter:
    drop-shadow(0 0 26px rgba(180, 168, 228, 0.6))
    drop-shadow(0 0 14px rgba(137, 110, 192, 0.4));
  animation: loginLogoFloat 5s ease-in-out infinite;
}
@media (max-width: 480px) {
  .login-logo { width: 260px; }
}
@keyframes loginLogoFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-6px) scale(1.03); }
}

.login-title {
  font-family: var(--font-body);
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
  color: #fff;
}
.login-subtitle {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--cyan-bright);
  font-weight: 500;
  margin-bottom: 30px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  unicode-bidi: plaintext;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: right;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.login-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.login-field input {
  width: 100%;
  background: rgba(52, 48, 67, 0.55);
  border: 1.5px solid rgba(180, 168, 228, 0.22);
  border-radius: 14px;
  padding: 15px 18px;
  font-size: 15px;
  color: var(--text-primary);
  transition: all var(--transition-fast);
  font-family: inherit;
  text-align: right;
  unicode-bidi: plaintext;
}
[data-theme="light"] .login-field input {
  background: rgba(245, 248, 254, 0.8);
  border-color: rgba(52, 48, 67, 0.10);
}
.login-field input:focus {
  outline: none;
  border-color: var(--cyan-bright);
  background: rgba(180, 168, 228, 0.4);
  box-shadow: 0 0 0 3px rgba(180, 168, 228, 0.4);
}

.login-password-wrap { position: relative; }
.login-password-wrap input { padding-left: 50px; }
.login-eye {
  position: absolute;
  top: 50%; left: 10px;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 8px;
  color: var(--text-secondary);
  transition: opacity var(--transition-fast);
  opacity: 0.75;
  display: flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
}
.login-eye:hover, .login-eye.on { opacity: 1; background: rgba(180, 168, 228, 0.4); color: var(--cyan-bright); }

.login-error {
  min-height: 22px;
  font-size: 13px;
  text-align: center;
  font-weight: 500;
}
.login-error.error { color: var(--error); }
.login-error.info { color: var(--cyan-bright); }

.login-submit {
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-deep) 100%);
  color: var(--void);
  border: none;
  border-radius: 14px;
  padding: 16px 20px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  margin-top: 6px;
  transition: all var(--transition);
  box-shadow:
    0 12px 28px rgba(137, 110, 192, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
  position: relative;
  overflow: hidden;
}
.login-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.30) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.login-submit:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 36px rgba(137, 110, 192, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.login-submit:hover::before { transform: translateX(100%); }
.login-submit:active { transform: translateY(0); }

.login-signup {
  margin-top: 24px;
  font-size: 13px;
  color: var(--text-secondary);
}
.login-link {
  color: var(--cyan-bright);
  font-weight: 600;
  border-bottom: 1px dashed rgba(180, 168, 228, 0.22);
  padding-bottom: 1px;
}
.login-link:hover { border-bottom-style: solid; color: var(--amber-bright); border-bottom-color: var(--amber); }

.login-footer {
  margin-top: 40px;
  text-align: center;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.7;
}
.login-footer-line { margin-bottom: 4px; }
.login-footer-line:last-child { color: var(--cyan-bright); font-weight: 500; }

/* ==========  Help row + bot button  ========== */
.help-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.help-btn.bot,
.deep-btn.bot {
  background: linear-gradient(135deg, rgba(137, 110, 192, 0.4), rgba(137, 110, 192, 0.4));
  color: var(--amber-bright);
  border-color: rgba(137, 110, 192, 0.4);
}
.help-btn.bot:hover,
.deep-btn.bot:hover {
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-deep) 100%);
  color: var(--void);
  border-color: var(--amber);
}

/* ==========  Bot overlay + panel  ========== */
.bot-overlay {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, rgba(36, 35, 31, 0.60), rgba(36, 35, 31, 0.85));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 400;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  animation: fadeIn 220ms ease;
}
@media (min-width: 600px) {
  .bot-overlay { align-items: center; padding: 28px; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.bot-panel {
  background: linear-gradient(180deg, rgba(52, 48, 67, 0.95), rgba(52, 48, 67, 0.92));
  width: 100%;
  max-width: 600px;
  max-height: 92vh; max-height: 92dvh;
  border-radius: 28px 28px 0 0;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 -30px 80px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(180, 168, 228, 0.4);
  animation: slideUp 320ms cubic-bezier(0.22, 1, 0.36, 1);
  border: 1px solid rgba(180, 168, 228, 0.22);
  border-bottom: none;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  overflow: hidden;
}
@media (min-width: 600px) {
  .bot-panel { border-radius: 28px; min-height: 480px; border-bottom: 1px solid rgba(180, 168, 228, 0.4); }
}
@keyframes slideUp {
  from { transform: translateY(50px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.bot-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(180, 168, 228, 0.22);
  background: rgba(52, 48, 67, 0.50);
  position: relative;
}
.bot-header::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan-bright), var(--amber-bright), transparent);
  opacity: 0.5;
}
.bot-avatar {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-deep) 100%);
  display: flex;
  align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(137, 110, 192, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.bot-title {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.bot-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 3px;
}
.bot-close {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center; justify-content: center;
  font-size: 18px;
  color: var(--text-secondary);
  background: rgba(180, 168, 228, 0.4);
  border: 1px solid rgba(180, 168, 228, 0.22);
  transition: all var(--transition-fast);
}
.bot-close:hover {
  background: rgba(255, 107, 107, 0.10);
  color: var(--error);
  border-color: rgba(255, 107, 107, 0.30);
}

.bot-context {
  padding: 14px 22px;
  background: rgba(180, 168, 228, 0.4);
  border-bottom: 1px solid rgba(180, 168, 228, 0.22);
}
.bot-context-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--cyan-bright);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 6px;
}
.bot-context-text {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
  max-height: 80px;
  overflow-y: auto;
}

.bot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 220px;
}

.bot-msg {
  padding: 13px 16px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.6;
  max-width: 88%;
  word-wrap: break-word;
  animation: slideIn 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.bot-msg.user {
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-deep) 100%);
  color: var(--void);
  align-self: flex-end;
  border-bottom-right-radius: 6px;
  box-shadow: 0 4px 14px rgba(137, 110, 192, 0.4);
  font-weight: 500;
}
.bot-msg.ai {
  background: rgba(52, 48, 67, 0.65);
  color: var(--text-primary);
  align-self: flex-start;
  border-bottom-left-radius: 6px;
  border: 1px solid rgba(180, 168, 228, 0.22);
}
.bot-msg.ai.thinking {
  color: var(--text-muted);
  font-style: italic;
}
/* Force RTL base direction on bot messages so mixed Hebrew/English keeps
   stable reading order. Latin runs are wrapped in <bdi> by app.js. */
.bot-msg, .bot-msg .md-p, .bot-msg .md-h, .bot-msg .md-list, .bot-msg .md-list li {
  direction: rtl;
  text-align: right;
}
.bot-msg bdi { unicode-bidi: isolate; }
.bot-msg.ai.error {
  background: rgba(255, 107, 107, 0.10);
  color: var(--error);
  border: 1px solid rgba(255, 107, 107, 0.30);
}
.bot-quota-notice {
  align-self: stretch;
  font-size: 0.85rem;
  padding: 8px 12px;
  border-radius: 10px;
  margin: 4px 0;
  text-align: center;
  font-weight: 500;
}
.bot-quota-notice.info {
  background: rgba(180, 168, 228, 0.10);
  color: var(--neon-cyan);
  border: 1px solid rgba(180, 168, 228, 0.30);
}
.bot-quota-notice.warn {
  background: rgba(137, 110, 192, 0.12);
  color: var(--btc-orange);
  border: 1px solid rgba(137, 110, 192, 0.40);
}
.bot-msg-bank-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--cyan-bright);
  margin-bottom: 6px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bot-suggestions {
  background: rgba(52, 48, 67, 0.55);
  border-radius: var(--radius);
  padding: 14px 16px;
  border: 1px dashed rgba(180, 168, 228, 0.22);
}
.bot-suggestions-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 12px;
}
.bot-suggestion-btn {
  display: block;
  width: 100%;
  text-align: right;
  background: rgba(180, 168, 228, 0.4);
  border: 1px solid rgba(180, 168, 228, 0.22);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--text-primary);
  margin-bottom: 8px;
  transition: all var(--transition-fast);
  cursor: pointer;
}
.bot-suggestion-btn:hover {
  border-color: rgba(180, 168, 228, 0.22);
  background: rgba(180, 168, 228, 0.4);
  transform: translateX(-3px);
}
.bot-suggestion-btn:last-child { margin-bottom: 0; }

.bot-input-row {
  display: flex;
  gap: 10px;
  padding: 14px 18px calc(14px + var(--safe-bottom));
  border-top: 1px solid rgba(180, 168, 228, 0.22);
  background: rgba(52, 48, 67, 0.55);
}
.bot-input-row input {
  flex: 1;
  background: rgba(52, 48, 67, 0.55);
  border: 1.5px solid rgba(180, 168, 228, 0.22);
  border-radius: 100px;
  padding: 13px 18px;
  font-size: 14px;
  color: var(--text-primary);
}
.bot-input-row input:focus {
  outline: none;
  border-color: var(--cyan-bright);
  box-shadow: 0 0 0 3px rgba(180, 168, 228, 0.4);
}
.bot-send {
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-deep) 100%);
  color: var(--void);
  border-radius: 100px;
  padding: 13px 22px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 14px rgba(137, 110, 192, 0.4);
}
.bot-send:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(137, 110, 192, 0.4); }

/* Markdown rendering inside bot messages */
.bot-msg.ai .md-p { margin-bottom: 8px; line-height: 1.6; }
.bot-msg.ai .md-p:last-child { margin-bottom: 0; }
.bot-msg.ai .md-h { font-family: var(--font-body); font-weight: 700; line-height: 1.3; margin: 12px 0 6px; letter-spacing: -0.005em; }
.bot-msg.ai .md-h3 { font-size: 16px; color: var(--cyan-bright); }
.bot-msg.ai .md-h4 { font-size: 15px; color: var(--amber-bright); }
.bot-msg.ai .md-h5, .bot-msg.ai .md-h6 { font-size: 14px; }
.bot-msg.ai .md-list { margin: 6px 0 10px; padding-right: 20px; }
.bot-msg.ai .md-list li { margin-bottom: 4px; line-height: 1.55; }
.bot-msg.ai .md-hr { border: none; border-top: 1px dashed rgba(180, 168, 228, 0.4); margin: 12px 0; }
.bot-msg.ai .md-spacer { height: 4px; }
.bot-msg.ai strong { color: var(--amber-bright); font-weight: 700; }
.bot-msg.ai code {
  background: rgba(180, 168, 228, 0.4);
  padding: 2px 7px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--cyan-bright);
  border: 1px solid rgba(180, 168, 228, 0.22);
}

/* ==========  Headings used by various pages (h1 inline)  ========== */
main > h1 {
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(95deg, #fff 0%, var(--amber-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   Admin-switch button in the topbar header.
   Visible only when STATE.auth.role === 'admin'.
   Gradient + amber halo so it never gets lost next to the icon
   buttons. Always one click away to the admin panel.
   ============================================================ */
.admin-switch-btn {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--violet) 0%, var(--electric-blue) 60%, var(--neon-cyan) 100%);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0 6px 18px rgba(137, 110, 192, 0.45),
    0 0 0 1px rgba(180, 168, 228, 0.35) inset;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.15s ease;
  white-space: nowrap;
}
.admin-switch-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow:
    0 8px 22px rgba(137, 110, 192, 0.55),
    0 0 0 1px rgba(180, 168, 228, 0.55) inset;
}
.admin-switch-btn:active { transform: translateY(0); }
.admin-switch-btn svg { flex-shrink: 0; }
@media (max-width: 640px) {
  .admin-switch-btn span { display: none; }
  .admin-switch-btn { padding: 10px; border-radius: 999px; }
}

/* ============================================================
   MOBILE FLICKER FIX  (≤959px and/or touch)
   iOS Safari and Android Chrome can't handle the combo of
   `filter: blur(80px)` + `backdrop-filter` + `mix-blend-mode`
   + multiple infinite animations. The browser repaints the
   compositor on every frame and the screen flickers visibly.
   On mobile we kill the heaviest layers and freeze animations,
   keeping the visual identity via static gradients/dots.
   ============================================================ */
@media (max-width: 600px) {
  /* 1. Heavy blurred orbs - biggest GPU cost. Remove on small screens. */
  .bg-fx-orb { display: none !important; }

  /* 2. Sparkle layers - keep animations on, just drop the heavy filter. */
  .sparkle-layer-2,
  .sparkle-layer-3 {
    filter: none !important;
  }

  /* 3. Background grid drift - freeze position. */
  .bg-fx-grid { animation: none !important; }

  /* 3b. Resume dialog pulsing arrow icon - freeze on mobile. */
  .resume-icon { animation: none !important; }

  /* 4. Backdrop-filter is the #1 cause of compositor thrashing on iOS. When a
        blurred surface sits OVER the animated full-screen sparkle layers, the
        blur recomputes every single frame -> whole-screen flicker ("רצח").
        The old per-selector list missed .hero-stat, .footer-content and
        .sidebar-link (verified live at 375px, 07/06/2026), which is why the
        flicker persisted. Kill ALL backdrop-filters on mobile - the glass
        identity is already dropped on the main surfaces; this completes it and
        breaks the recompute-every-frame chain without touching the sparkles. */
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 5. Kill remaining infinite hero/login spinners that don't add value on a small screen. */
  .hero-ring,
  .hero-halo,
  .hero-sparkle-cluster,
  .login-glow,
  .login-logo {
    animation: none !important;
  }
  .blink,
  .pulse-dot,
  [class*="blink"] {
    animation: none !important;
  }

  /* 6. Remove mix-blend-mode (forces compositor recomposites every paint). */
  * { mix-blend-mode: normal !important; }

  /* 7. Force GPU stability - promote sticky elements but no transform thrash. */
  .sidebar,
  .app-header { will-change: auto; }

  /* 8. iOS Safari: replace remaining 100vh with 100dvh to avoid URL-bar layout shifts. */
  html, body { min-height: 100dvh; }

  /* 9. Warp particles - 30 fading dots with box-shadow thrash the compositor on
        mobile and cause the visible whole-page flicker. Hide them on small screens
        (sparkle layers stay - those are part of the branding per Nati's rule). */
  .warp-field { display: none !important; }

  /* 10. Header scan-line pulses opacity 0→1→0 every 6s - reads as a flash on a
         small viewport. Freeze it dim instead of removing - keeps the gradient line. */
  .header-scan { animation: none !important; opacity: 0.18 !important; }

  /* 11. Breathing box-shadow on stat cards / active chip / "new" badge.
         Animating box-shadow forces an expensive compositor repaint each frame
         on mobile and reads as a flicker (Nati report 07/06/2026). Freeze the
         shadow static - the elements stay fully visible, only the pulse stops.
         REVERSIBLE: delete this rule to restore the breathing. Desktop unaffected. */
  .hero-stat,
  .cat-chip.active,
  .sb-new-badge { animation: none !important; }

  /* 12. Header logo halo: a 34px-blur glow that pulses (scale+opacity) behind
         the banner. Animating a heavy blur is an expensive repaint on mobile.
         Freeze it - the glow stays, just stops pulsing. (07/06/2026) */
  .header-logo-halo { animation: none !important; }

  /* 13. Decorative ::before spinner/glow on the hero & login card. These were
         only "covered" before because .hero/.login-card sat in the old
         backdrop-filter list (now a global *). Freeze them explicitly. */
  .hero::before,
  .login-card::before { animation: none !important; }
}

/* Reduce-motion users get the same treatment regardless of device. */
@media (prefers-reduced-motion: reduce) {
  .bg-fx-orb,
  .bg-fx-grid,
  .sparkle-layer-1,
  .sparkle-layer-2,
  .sparkle-layer-3,
  .hero-ring,
  .hero-halo,
  .hero-sparkle-cluster,
  .login-glow,
  .login-logo {
    animation: none !important;
  }
}

/* ============================================================
   TOP CREDITS STRIP
   Thin band above the main banner. Mirrors the footer credits
   so the college and the builder get visibility on every screen
   (including login). Wraps cleanly on phones, separator hidden
   on narrow widths.
   ============================================================ */
.top-credits {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 14px 18px;
  background: linear-gradient(180deg,
      rgba(36, 35, 31, 0.94) 0%,
      rgba(36, 35, 31, 0.72) 100%);
  border-bottom: 1px solid rgba(180, 168, 228, 0.14);
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.45;
}
.top-credit-logo {
  height: 44px;
  width: auto;
  border-radius: 8px;
  background: white;
  padding: 5px 8px;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.30));
  flex-shrink: 0;
}
.top-credit-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.top-credit-icon {
  color: var(--btc-orange);
  font-weight: 800;
}
.top-credit-item strong {
  color: var(--neon-cyan);
  font-weight: 700;
}
.top-credit-sep {
  color: rgba(180, 168, 228, 0.45);
  font-weight: 700;
}
[data-theme="light"] .top-credits {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 248, 254, 0.86) 100%);
  border-bottom-color: rgba(52, 48, 67, 0.08);
  color: rgba(52, 48, 67, 0.72);
}
[data-theme="light"] .top-credit-item strong {
  color: var(--deep-blue, #4A3B7A);
}

/* Tablet (≤768px) - let it wrap if needed */
@media (max-width: 768px) {
  .top-credit-item { white-space: normal; }
}
/* Mobile (≤640px) - two lines, hide separator */
@media (max-width: 640px) {
  .top-credits {
    padding: 10px 14px;
    font-size: 0.74rem;
    gap: 6px 10px;
  }
  .top-credit-item {
    flex: 1 1 100%;
    justify-content: center;
    text-align: center;
  }
  .top-credit-sep { display: none; }
  .top-credit-logo { height: 36px; }
}
/* Tiny phones (≤360px) */
@media (max-width: 360px) {
  .top-credits {
    font-size: 0.68rem;
    padding: 6px 10px;
  }
}

/* On small mobiles, hide the long top credit
   to keep login form above the fold. Full credit stays in footer. */
@media (max-width: 600px) {
  .top-credits .top-credit-item:first-of-type {
    display: none;
  }
  .top-credit-sep:first-of-type {
    display: none;
  }
}

/* ============================================================
   GLOSSARY (מילון מונחים)
   חיפוש חכם + רשימת כרטיסים
   ============================================================ */
.glossary-search-wrap {
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(180deg, var(--void) 0%, rgba(36, 35, 31, 0.95) 100%);
  padding: 12px 0;
  margin-bottom: 8px;
}
.glossary-search {
  width: 100%;
  padding: 12px 16px;
  background: rgba(36, 35, 31, 0.7);
  border: 1px solid rgba(180, 168, 228, 0.3);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 16px;
  font-family: inherit;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.glossary-search:focus {
  outline: none;
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 3px rgba(180, 168, 228, 0.18);
}
.glossary-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 4px 4px 14px;
}

/* ===== category filter (tech-look checkboxes) ===== */
.glossary-cat-filter {
  margin: 6px 0 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(36, 35, 31, 0.65) 0%, rgba(52, 48, 67, 0.35) 100%);
  border: 1px solid rgba(180, 168, 228, 0.20);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 4px 18px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}
.cat-filter-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.cat-filter-label {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--neon-cyan);
  text-transform: none;
  font-family: var(--font-body);
  margin-inline-end: auto;
}
.cat-filter-bulk-btn {
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(36, 35, 31, 0.7);
  color: var(--text-soft, #B4A8E4);
  border: 1px solid rgba(180, 168, 228, 0.30);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: all 150ms ease;
}
.cat-filter-bulk-btn:hover {
  background: rgba(180, 168, 228, 0.15);
  color: var(--text-primary);
  border-color: var(--neon-cyan);
}
.cat-filter-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 8px;
  background: rgba(36, 35, 31, 0.65);
  border: 1px solid rgba(180, 168, 228, 0.25);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--text-soft, #B4A8E4);
  transition: all 150ms ease;
  user-select: none;
}
.cat-chip:hover {
  border-color: var(--neon-cyan);
  color: var(--text-primary);
  box-shadow: 0 0 12px rgba(180, 168, 228, 0.30), inset 0 0 8px rgba(180, 168, 228, 0.08);
  background: rgba(180, 168, 228, 0.08);
}
/* Very subtle breathing on every chip - barely visible, 5s cycle */
.cat-chip {
  animation: chipBreathe 5s ease-in-out infinite;
}
.cat-chip.active {
  animation: chipBreatheActive 5s ease-in-out infinite;
}
@keyframes chipBreathe {
  0%, 100% { opacity: 0.92; }
  50%      { opacity: 1; }
}
@keyframes chipBreatheActive {
  0%, 100% { box-shadow: 0 0 10px rgba(180, 168, 228, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
  50%      { box-shadow: 0 0 16px rgba(180, 168, 228, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.10); }
}
@media (prefers-reduced-motion: reduce) {
  .cat-chip, .cat-chip.active { animation: none; }
}
.cat-chip input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid rgba(180, 168, 228, 0.6);
  border-radius: 4px;
  background: rgba(36, 35, 31, 0.9);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all 150ms ease;
}
.cat-chip input[type="checkbox"]:checked {
  background: var(--neon-cyan);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 8px rgba(180, 168, 228, 0.45);
}
.cat-chip input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0;
  width: 4px;
  height: 8px;
  border: solid #24231F;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.cat-chip.active {
  background: linear-gradient(135deg, rgba(180, 168, 228, 0.18) 0%, rgba(137, 110, 192, 0.12) 100%);
  border-color: rgba(180, 168, 228, 0.7);
  color: var(--text-primary);
  box-shadow:
    0 0 12px rgba(180, 168, 228, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.cat-chip-count {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 6px;
  background: rgba(180, 168, 228, 0.15);
  border-radius: 999px;
  color: var(--neon-cyan);
  min-width: 18px;
  text-align: center;
}
.cat-chip.active .cat-chip-count {
  background: rgba(180, 168, 228, 0.30);
}

/* badge inside each glossary card showing its category */
.glossary-cat-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  background: rgba(137, 110, 192, 0.15);
  color: var(--neon-purple, #896EC0);
  border: 1px solid rgba(137, 110, 192, 0.35);
  border-radius: 999px;
  margin-inline-start: auto;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

@media (max-width: 600px) {
  .glossary-cat-filter { padding: 10px 12px; }
  .cat-chip { font-size: 0.78rem; padding: 5px 8px 5px 6px; }
  .cat-chip-count { font-size: 0.68rem; padding: 1px 5px; }
  .glossary-cat-badge { font-size: 0.65rem; padding: 1px 6px; }
}
.glossary-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.glossary-card {
  background: linear-gradient(135deg, rgba(52, 48, 67, 0.50) 0%, rgba(52, 48, 67, 0.35) 100%);
  border: 1px solid rgba(180, 168, 228, 0.20);
  border-radius: 14px;
  padding: 14px 16px;
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 0.18s, background 0.18s, transform 0.18s, box-shadow 0.18s;
}
.glossary-card:hover {
  border-color: rgba(180, 168, 228, 0.50);
  background: linear-gradient(135deg, rgba(52, 48, 67, 0.65) 0%, rgba(52, 48, 67, 0.45) 100%);
  transform: translateY(-1px);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.30),
    0 0 24px rgba(180, 168, 228, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.glossary-card-header {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.glossary-number {
  color: var(--btc-orange);
  font-weight: 700;
  font-size: 0.95rem;
  font-family: var(--font-body);
  min-width: 30px;
  text-align: start;
  opacity: 0.85;
}
.glossary-term {
  color: var(--neon-cyan);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  font-family: var(--font-body);
}
.glossary-term::after {
  content: ' ·';
  color: var(--text-muted);
  font-weight: 400;
  margin-inline-start: 4px;
}
.glossary-term:last-child::after {
  content: '';
  margin: 0;
}
.glossary-english {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-family: 'Sora', 'Heebo', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-style: normal;
  unicode-bidi: plaintext;
}
.glossary-def {
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.65;
}
.glossary-def-line { margin-bottom: 6px; }
.glossary-def-line:last-child { margin-bottom: 0; }
@media (max-width: 540px) {
  .glossary-search { font-size: 15px; padding: 10px 14px; }
  .glossary-term { font-size: 0.98rem; }
  .glossary-def { font-size: 0.88rem; }
}
/* Invisible sentinel for IntersectionObserver - triggers loading the next chunk */
.glossary-sentinel {
  height: 1px;
  width: 100%;
  pointer-events: none;
  visibility: hidden;
}

/* Question screenshot (document-explorer questions) */
.question-image-wrap {
  margin: 14px 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.question-image {
  max-width: 100%;
  max-height: 420px;
  border-radius: 12px;
  border: 1px solid rgba(180, 168, 228, 0.25);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.40), 0 0 18px rgba(180, 168, 228, 0.10);
  background: #fff;
  cursor: zoom-in;
  transition: transform 0.18s, box-shadow 0.18s;
}
.question-image:hover {
  transform: scale(1.01);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.50), 0 0 28px rgba(180, 168, 228, 0.22);
}
.question-image-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}
@media (max-width: 540px) {
  .question-image { max-height: 280px; }
}

/* Image lightbox - tap-to-zoom on screenshots */
.image-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(36, 35, 31, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  opacity: 0;
  transition: opacity 0.2s ease;
  cursor: zoom-out;
}
.image-lightbox-overlay.visible { opacity: 1; }
.image-lightbox-img {
  max-width: 95vw;
  max-height: 90vh;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  background: #fff;
}
.image-lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================================
   PDF viewer (פרויקט גמר)
   ============================================================ */
.project-doc-tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
@media (min-width: 720px) {
  .project-doc-tabs { grid-template-columns: repeat(3, 1fr); }
}
.project-doc-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(52, 48, 67, 0.4);
  border: 1px solid rgba(180, 168, 228, 0.18);
  border-radius: 14px;
  color: var(--text-primary);
  text-align: start;
  cursor: pointer;
  font: inherit;
  transition: all 0.18s;
}
.project-doc-tab:hover {
  background: rgba(52, 48, 67, 0.65);
  border-color: rgba(180, 168, 228, 0.22);
  transform: translateY(-1px);
}
.project-doc-tab.active {
  background: linear-gradient(135deg, rgba(180, 168, 228, 0.18), rgba(137, 110, 192, 0.15));
  border-color: var(--cyan-bright);
  box-shadow: 0 0 24px rgba(180, 168, 228, 0.18);
}
.project-doc-tab-icon {
  font-size: 24px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(180, 168, 228, 0.3));
}
.project-doc-tab-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.project-doc-tab-title {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.project-doc-tab-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.project-doc-tab.active .project-doc-tab-title {
  color: var(--cyan-bright);
}

/* Sheets template card (when doc.type === 'sheets-template') */
.sheets-template-card {
  background: linear-gradient(135deg, rgba(52, 48, 67, 0.55) 0%, rgba(52, 48, 67, 0.40) 100%) padding-box,
    linear-gradient(135deg, var(--amber-bright) 0%, var(--cyan-bright) 100%) border-box;
  border: 1.5px solid transparent;
  border-radius: 20px;
  padding: 40px 32px;
  text-align: center;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.40);
  margin-top: 8px;
}
.sheets-template-icon {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 14px;
  filter: drop-shadow(0 6px 20px rgba(137, 110, 192, 0.30));
}
.sheets-template-title {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  letter-spacing: -0.005em;
}
.sheets-template-desc {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.65;
  margin: 0 auto 24px;
  max-width: 520px;
}
.sheets-template-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: linear-gradient(135deg, var(--mint) 0%, var(--neon-cyan) 100%);
  color: #24231F;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(137, 110, 192, 0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}
.sheets-template-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(137, 110, 192, 0.50);
}
.sheets-template-note {
  color: var(--text-muted);
  font-size: 12.5px;
  margin: 16px auto 0;
  max-width: 460px;
}
@media (max-width: 540px) {
  .sheets-template-card { padding: 28px 20px; }
  .sheets-template-icon { font-size: 48px; }
  .sheets-template-title { font-size: 18px; }
  .sheets-template-desc { font-size: 14px; }
  .sheets-template-cta { padding: 12px 24px; font-size: 14.5px; }
}

.pdf-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.pdf-download-btn,
.pdf-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.18s, filter 0.15s;
  cursor: pointer;
}
.pdf-download-btn {
  background: linear-gradient(135deg, var(--neon-cyan), var(--violet));
  color: var(--void);
  box-shadow: 0 4px 14px rgba(180, 168, 228, 0.35);
}
.pdf-download-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.pdf-open-btn {
  background: rgba(180, 168, 228, 0.12);
  color: var(--neon-cyan);
  border: 1px solid rgba(180, 168, 228, 0.22);
}
.pdf-open-btn:hover { background: rgba(180, 168, 228, 0.22); transform: translateY(-1px); }

.pdf-viewer-wrap {
  position: relative;
  width: 100%;
  height: calc(100vh - 280px);
  min-height: 500px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(36, 35, 31, 0.6);
  border: 1px solid rgba(180, 168, 228, 0.25);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}
.pdf-viewer-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 540px) {
  .pdf-viewer-wrap { height: calc(100vh - 360px); min-height: 400px; }
  .pdf-download-btn, .pdf-open-btn { padding: 9px 13px; font-size: 0.88rem; }
}

/* "New" badge on sidebar links — green-mint, not red */
.sb-new-badge {
  display: inline-block;
  margin-inline-start: 6px;
  background: linear-gradient(135deg, rgba(137, 110, 192, 0.30), rgba(180, 168, 228, 0.30));
  color: var(--violet-light);
  border: 1px solid rgba(180, 168, 228, 0.55);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
  text-shadow: 0 0 6px rgba(77, 219, 136, 0.50);
  box-shadow: 0 0 10px rgba(77, 219, 136, 0.20);
  animation: newBadgePulse 2.6s ease-in-out infinite;
}
@keyframes newBadgePulse {
  0%, 100% { box-shadow: 0 0 10px rgba(77, 219, 136, 0.20); }
  50%      { box-shadow: 0 0 16px rgba(77, 219, 136, 0.50); }
}
@media (max-width: 600px) {
  .sb-new-badge { animation: none; }
}

/* Audio button next to each glossary category chip */
.cat-chip-wrap {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  border-radius: 999px;
  overflow: hidden;
}
.cat-chip-audio {
  background: rgba(77, 219, 136, 0.10);
  color: var(--neon-cyan);
  border: 1px solid rgba(77, 219, 136, 0.30);
  border-right: none;
  padding: 0 10px;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 160ms ease;
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
}
.glossary-audio-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: linear-gradient(90deg, rgba(77, 219, 136, 0.10), rgba(77, 219, 136, 0.04));
  border: 1px solid rgba(77, 219, 136, 0.30);
  border-radius: 10px;
}
.glossary-audio-banner-icon { font-size: 1.4rem; }
.glossary-audio-banner-text {
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.5;
  flex: 1;
  min-width: 220px;
}
.glossary-full-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(77, 219, 136, 0.20);
  color: var(--text-primary);
  border: 1px solid rgba(77, 219, 136, 0.50);
  border-radius: 10px;
  text-decoration: none;
  transition: all 160ms ease;
  font-size: 0.95rem;
}
.glossary-full-dl-btn:hover {
  background: rgba(77, 219, 136, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(77, 219, 136, 0.20);
}
.glossary-full-dl-icon { font-size: 1.3rem; }
.glossary-full-dl-title-line { font-weight: 700; }
.glossary-full-dl-meta { font-size: 0.82rem; color: var(--text-secondary); margin-top: 2px; }

@media (max-width: 600px) {
  .glossary-audio-banner {
    padding: 10px 12px;
    gap: 8px;
  }
  .glossary-audio-banner-icon { font-size: 1.2rem; }
  .glossary-audio-banner-text { font-size: 0.88rem; min-width: 0; flex: 1 1 100%; }
  .glossary-full-dl-btn {
    width: 100%;
    justify-content: center;
    padding: 12px 14px;
  }
  .glossary-term-audio {
    padding: 4px 10px;
    font-size: 0.95rem;
    margin-inline-start: 4px;
  }
  .glossary-term-player {
    height: 36px;
  }
}
.glossary-term-audio {
  background: rgba(77, 219, 136, 0.12);
  color: var(--neon-cyan);
  border: 1px solid rgba(77, 219, 136, 0.30);
  border-radius: 8px;
  padding: 2px 8px;
  margin-inline-start: 6px;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 160ms ease;
}
.glossary-term-audio:hover {
  background: rgba(77, 219, 136, 0.25);
  color: var(--text-primary);
}
.glossary-term-player {
  display: block;
  width: 100%;
  margin-top: 8px;
  border-radius: 6px;
}
.cat-chip-audio:hover {
  background: rgba(77, 219, 136, 0.22);
  color: var(--text-primary);
}
.cat-chip-wrap .cat-chip {
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Audio button on topic cards (and glossary categories) */
.card-with-audio {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  cursor: default;
}
.card-with-audio .card-main {
  flex: 1;
  background: transparent;
  border: none;
  color: inherit;
  padding: 18px 18px 14px;
  text-align: right;
  cursor: pointer;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background 160ms ease;
}
.card-with-audio .card-main:hover { background: rgba(180, 168, 228, 0.04); }
.card-audio-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(137, 110, 192, 0.10), rgba(180, 168, 228, 0.10));
  color: var(--neon-cyan);
  border: none;
  border-top: 1px solid rgba(77, 219, 136, 0.30);
  padding: 9px 12px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 160ms ease;
}
.card-audio-btn:hover {
  background: linear-gradient(135deg, rgba(77, 219, 136, 0.22), rgba(180, 168, 228, 0.22));
  color: var(--text-primary);
}
.card-audio-icon { font-size: 1rem; }

/* Full-length downloads bar */
.audio-full-dl {
  background: linear-gradient(135deg, rgba(77, 219, 136, 0.08), rgba(180, 168, 228, 0.08));
  border: 1px solid rgba(77, 219, 136, 0.30);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.audio-full-dl-title {
  color: var(--violet-light);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 10px;
}
.audio-full-dl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.audio-full-dl-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(36, 35, 31, 0.65);
  border: 1px solid rgba(77, 219, 136, 0.30);
  border-radius: 10px;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--text-primary);
  transition: all 180ms ease;
}
.audio-full-dl-btn:hover {
  border-color: var(--violet-light);
  background: rgba(137, 110, 192, 0.08);
  transform: translateY(-1px);
}
.audio-full-dl-btn-icon { font-size: 1.4rem; flex-shrink: 0; }
.audio-full-dl-btn-name { font-weight: 700; font-size: 0.95rem; }
.audio-full-dl-btn-meta { color: var(--text-secondary); font-size: 0.78rem; margin-top: 2px; }
@media (max-width: 600px) {
  .audio-full-dl-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   AUDIO RECORDINGS PAGE — /audio
   Two-tab list with inline HTML5 audio + progress tracking.
   ============================================================ */
.audio-tabs {
  display: flex;
  gap: 8px;
  background: rgba(36, 35, 31, 0.55);
  border: 1px solid rgba(180, 168, 228, 0.16);
  padding: 6px;
  border-radius: 14px;
  margin-bottom: 14px;
}
.audio-tab {
  flex: 1;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 14px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 160ms ease;
}
.audio-tab:hover { color: var(--text-primary); background: rgba(180, 168, 228, 0.06); }
.audio-tab.active {
  background: linear-gradient(135deg, rgba(180, 168, 228, 0.18), rgba(137, 110, 192, 0.18));
  color: var(--text-primary);
  border-color: rgba(180, 168, 228, 0.42);
  box-shadow: 0 0 14px rgba(180, 168, 228, 0.18);
}

.audio-list {
  display: grid;
  gap: 12px;
}

.audio-card {
  background: rgba(36, 35, 31, 0.55);
  border: 1px solid rgba(180, 168, 228, 0.16);
  border-radius: 14px;
  padding: 14px 16px;
  display: grid;
  gap: 10px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.audio-card:hover {
  border-color: rgba(180, 168, 228, 0.38);
  box-shadow: 0 4px 18px rgba(180, 168, 228, 0.10);
}
.audio-card-flash {
  animation: audioFlash 1.6s ease-out;
}
@keyframes audioFlash {
  0%   { box-shadow: 0 0 0 2px rgba(180, 168, 228, 0.0); }
  30%  { box-shadow: 0 0 0 2px rgba(180, 168, 228, 0.85); }
  100% { box-shadow: 0 0 0 2px rgba(180, 168, 228, 0.0); }
}

.audio-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.audio-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(180, 168, 228, 0.16), rgba(137, 110, 192, 0.16));
  color: var(--neon-cyan);
  font-weight: 700;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(180, 168, 228, 0.30);
}
.audio-title {
  flex: 1;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 1.02rem;
}
.audio-done-badge {
  background: rgba(77, 219, 136, 0.16);
  color: var(--violet-light);
  border: 1px solid rgba(77, 219, 136, 0.40);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.75rem;
  font-weight: 600;
}

.audio-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.audio-meta-sep { opacity: 0.5; }

.audio-progress-bar {
  height: 5px;
  background: rgba(180, 168, 228, 0.10);
  border-radius: 999px;
  overflow: hidden;
}
.audio-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--neon-cyan), var(--violet, #896EC0));
  transition: width 600ms ease;
}

.audio-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.audio-controls audio {
  flex: 1;
  min-width: 240px;
  height: 38px;
}
.audio-download {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(180, 168, 228, 0.10);
  color: var(--neon-cyan);
  border: 1px solid rgba(180, 168, 228, 0.30);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 160ms ease;
}
.audio-download:hover {
  background: rgba(180, 168, 228, 0.18);
  border-color: var(--neon-cyan);
}

@media (max-width: 600px) {
  .audio-card { padding: 12px 13px; }
  .audio-title { font-size: 0.95rem; }
  .audio-controls audio { min-width: 100%; }
  .audio-download { width: 100%; justify-content: center; }
}

/* ===== Block Explorer Guide (bonus area) ===== */
.beg-intro { color: var(--text-secondary); font-size: 15px; line-height: 1.75; margin-bottom: 18px; }
.beg-intro b { color: var(--text-primary); }
.beg-legendline { color: var(--text-muted); font-size: 13px; margin-bottom: 22px; }
/* Floating "Ask the bot" button - dedicated to the block explorer, fixed to the
   viewport so it follows the scroll. Appended to <body> by renderBlockExplorerGuide. */
.beg-bot-fab { position: fixed; bottom: 22px; left: 22px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--violet), var(--electric-blue)); color: #fff; border: none; border-radius: 999px; padding: 13px 20px; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 22px rgba(137,110,192,0.5); transition: transform 0.14s ease, box-shadow 0.14s ease; }
.beg-bot-fab:hover { transform: translateY(-2px); box-shadow: 0 9px 28px rgba(137,110,192,0.65); }
.beg-bot-fab:active { transform: translateY(0); }
.beg-bot-fab-emoji { font-size: 18px; line-height: 1; }
@media (max-width: 600px) {
  .beg-bot-fab { bottom: 16px; left: 14px; padding: 11px 16px; font-size: 14px; }
}
.beg-screen { margin-bottom: 34px; background: linear-gradient(180deg, var(--void-2), var(--void)); border: 1px solid rgba(180,168,228,0.18); border-radius: 16px; padding: 16px; }
.beg-screen-h { font-size: 18px; font-weight: 700; color: var(--neon-cyan); margin: 4px 0 4px; }
.beg-screen-sub { color: var(--text-secondary); font-size: 14px; margin-bottom: 14px; }
.beg-imgwrap { position: relative; display: block; width: 100%; border-radius: 12px; overflow: visible; border: 1px solid var(--void-2); background: var(--void); }
.beg-img { display: block; width: 100%; height: auto; border-radius: 12px; }
/* Dark mode for LIGHT (white-background) screenshots only - EtherScan/explorer pages.
   Inverts lightness so white pages become dark, then hue-rotate 180deg restores
   approximate colors. Applied selectively (.img-dark, set in JS by filename) so that
   screenshots that are ALREADY dark - e.g. wallet "Send/Confirm" screens - are left
   untouched and do NOT flip to bright white. Overlay dots/cards are separate elements
   and are never affected. Classification is by measured mean luminance (>=190). */
.img-dark { filter: invert(0.9) hue-rotate(180deg) contrast(0.95); }
.beg-hot { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--btc-orange); color: #202239; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; cursor: pointer; transform: translate(-50%, -50%); box-shadow: 0 2px 9px rgba(0,0,0,0.55); transition: transform 0.12s ease, background 0.12s ease; z-index: 2; }
.beg-hot:hover { transform: translate(-50%, -50%) scale(1.15); }
.beg-hot.active { background: var(--mint); transform: translate(-50%, -50%) scale(1.25); }
.beg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-top: 16px; }
.beg-card { background: var(--void); border: 1px solid var(--void-2); border-radius: 12px; padding: 12px 13px; scroll-margin-top: 90px; }
.beg-card.active { border-color: var(--mint); box-shadow: 0 0 0 2px rgba(77,219,136,0.25); }
.beg-card-h { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text-primary); font-size: 14px; margin-bottom: 5px; }
.beg-card-n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--btc-orange); color: #202239; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.beg-card-mean { color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
.beg-card-ask { color: var(--neon-cyan); font-size: 12.5px; line-height: 1.55; margin-top: 6px; }
.beg-note { background: rgba(137,110,192,0.10); border: 1px solid rgba(137,110,192,0.35); border-radius: 14px; padding: 14px 16px; margin-bottom: 30px; }
.beg-note-h { color: var(--violet-light); font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.beg-note ul { margin: 0; padding-inline-start: 20px; color: var(--text-secondary); font-size: 14px; line-height: 1.8; }
.beg-note ul b { color: var(--text-primary); }

/* --- Block-explorer: hover tooltip on hotspots --- */
.beg-hot:hover, .beg-hot:focus-visible { z-index: 20; }
.beg-tip { position: absolute; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(260px, 72vw); background: var(--void); border: 1px solid var(--neon-cyan); border-radius: 10px; padding: 8px 11px; font-size: 12.5px; line-height: 1.5; font-weight: 400; text-align: right; direction: rtl; color: var(--text-secondary); box-shadow: 0 6px 22px rgba(0,0,0,0.6); opacity: 0; visibility: hidden; transition: opacity 0.14s ease; pointer-events: none; z-index: 30; }
.beg-tip b { display: block; color: var(--neon-cyan); font-weight: 700; margin-bottom: 3px; font-size: 13px; }
.beg-tip-above { bottom: calc(100% + 10px); }
.beg-tip-below { top: calc(100% + 10px); }
.beg-hot:hover .beg-tip, .beg-hot:focus-visible .beg-tip { opacity: 1; visibility: visible; }

/* --- Block-explorer: challenge ("find the field") mode --- */
.beg-screen-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.beg-screen-titles { flex: 1; min-width: 200px; }
.beg-screen-head .beg-screen-h, .beg-screen-head .beg-screen-sub { margin-top: 0; }
.beg-screen-head .beg-screen-sub { margin-bottom: 0; }
@keyframes beg-challenge-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 3px 12px rgba(137,110,192,0.4); }
  50% { transform: scale(1.05); box-shadow: 0 6px 22px rgba(137,110,192,0.75); }
}
.beg-challenge-btn { flex: none; background: linear-gradient(135deg, var(--violet), var(--electric-blue)); color: #fff; border: none; border-radius: 10px; padding: 9px 15px; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 12px rgba(137,110,192,0.4); transition: transform 0.12s ease, box-shadow 0.12s ease; animation: beg-challenge-breathe 2.6s ease-in-out infinite; }
.beg-challenge-btn:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 5px 16px rgba(137,110,192,0.55); animation-play-state: paused; }
.beg-challenge-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: linear-gradient(135deg, rgba(137,110,192,0.18), rgba(137,110,192,0.12)); border: 1px solid var(--violet); border-radius: 12px; padding: 11px 14px; margin-bottom: 10px; }
.beg-ch-prompt { flex: 1; min-width: 180px; font-size: 16px; color: var(--text-primary); font-weight: 600; }
.beg-ch-prompt b { color: var(--mint); font-weight: 800; }
.beg-ch-meta { display: flex; gap: 12px; align-items: center; font-size: 14px; font-weight: 700; }
.beg-ch-score { color: var(--mint); }
.beg-ch-count { color: var(--text-muted); }
.beg-ch-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.beg-ch-btn { background: var(--void); color: var(--text-secondary); border: 1px solid var(--void-2); border-radius: 8px; padding: 7px 11px; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color 0.12s ease, color 0.12s ease; }
.beg-ch-btn:hover { border-color: var(--neon-cyan); color: var(--text-primary); }
.beg-ch-replay { background: var(--mint); color: #202239; border-color: var(--mint); }
.beg-ch-learn { background: var(--electric-blue); color: #202239; border-color: var(--electric-blue); }
.beg-ch-progress { height: 6px; background: var(--void); border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
.beg-ch-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--mint), var(--neon-cyan)); transition: width 0.3s ease; }
.beg-challenge-on .beg-cards { display: none; }
.beg-challenge-on .beg-hot { display: none; }
.beg-challenge-on .beg-imgwrap { cursor: crosshair; }
.beg-mark { position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: #fff; z-index: 25; pointer-events: none; animation: begMarkPop 0.25s ease; }
.beg-mark.ok { background: rgba(77,219,136,0.92); color: #202239; box-shadow: 0 0 0 4px rgba(77,219,136,0.35); }
.beg-mark.no { background: rgba(255,90,90,0.92); box-shadow: 0 0 0 4px rgba(255,90,90,0.3); }
@keyframes begMarkPop { from { transform: translate(-50%,-50%) scale(0.3); opacity: 0; } to { transform: translate(-50%,-50%) scale(1); opacity: 1; } }
.beg-target { position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; background: var(--mint); color: #202239; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; border: 3px solid #fff; z-index: 24; pointer-events: none; box-shadow: 0 0 0 4px rgba(77,219,136,0.4); animation: begTargetPulse 0.55s ease 2; }
@keyframes begTargetPulse { 0%,100% { box-shadow: 0 0 0 4px rgba(77,219,136,0.4); } 50% { box-shadow: 0 0 0 11px rgba(77,219,136,0.15); } }
/* Mobile/tablet: no hover -> hide tooltips and clip image box so absolute tooltips never cause horizontal scroll */
@media (max-width: 768px) {
  .beg-imgwrap { overflow: hidden; }
  .beg-tip { display: none !important; }
  .beg-screen { overflow-x: hidden; }
  .beg-challenge-bar { gap: 8px; padding: 10px 11px; }
  .beg-ch-prompt { font-size: 15px; min-width: 100%; }
  .beg-ch-actions { flex: 1; }
  .beg-screen-head .beg-challenge-btn { width: 100%; }
}

/* --- Learning-sim recordings: headphone per card + play-all + full download --- */
.lesim-card-wrap { position: relative; display: flex; flex-direction: column; }
.lesim-card-wrap > .card { width: 100%; }
.lesim-audio-btn {
  position: absolute; top: 10px; left: 10px; z-index: 4;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(137, 110, 192, 0.14); border: 1px solid rgba(77, 219, 136, 0.45);
  color: var(--mint); font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.14s ease, transform 0.12s ease;
}
.lesim-audio-btn:hover { background: rgba(77, 219, 136, 0.28); transform: scale(1.08); }
.lesim-player { width: 100%; margin-top: 8px; }
.lesim-playall-wrap { margin: -6px 0 20px; }
.lesim-playall-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--mint), var(--neon-cyan));
  color: #202239; border: none; border-radius: 10px; padding: 10px 16px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 3px 12px rgba(77, 219, 136, 0.3); transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.lesim-playall-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(77, 219, 136, 0.45); }
.lesim-playall-wrap .lesim-player { max-width: 520px; }
.lesim-audio-note { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; margin: 0 0 20px; padding: 8px 12px; background: rgba(180,168,228,0.07); border-radius: 8px; border-inline-start: 3px solid rgba(77,219,136,0.4); }

/* ---------- Personal Coach page (ProExam A Coach) ---------- */
.coach-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
  max-width: 860px;
  margin: 0 auto;
  background: rgba(52, 48, 67, 0.35);
  border: 1px solid rgba(180, 168, 228, 0.35);
  border-radius: 22px;
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.coach-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(180, 168, 228, 0.35);
  background: rgba(52, 48, 67, 0.5);
}
.coach-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: linear-gradient(135deg, var(--accent) 0%, #4A3B7A 100%);
  box-shadow: 0 4px 14px rgba(137, 110, 192, 0.4);
  flex-shrink: 0;
}
.coach-title {
  font-weight: 800;
  font-size: 16px;
  color: var(--text-primary);
}
.coach-subtitle {
  font-size: 12.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coach-reset {
  font-size: 13px;
  padding: 9px 14px;
  border-radius: 100px;
  border: 1px solid rgba(180, 168, 228, 0.22);
  color: var(--text-secondary);
  background: transparent;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.coach-reset:hover {
  color: var(--text-primary);
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(137, 110, 192, 0.35);
}
.coach-messages { flex: 1; }
@media (max-width: 768px) {
  .coach-page { height: calc(100dvh - 108px); border-radius: 16px; }
  .coach-subtitle { font-size: 11.5px; }
}