/* ========== Nexus AI — Professional Dark / Light Glassmorphism ========== */
:root, [data-theme="dark"] {
  --bg-deep: transparent;
  --bg-card: rgba(20, 22, 30, 0.9);
  --bg-glass: rgba(28, 32, 44, 0.62);
  --border-glass: transparent;
  --text: #e8eaef;
  --text-muted: #9ca3b8;
  /* Layered surfaces + feedback (dark) — slightly softer contrast */
  --n-bg-deep: #0b0d12;
  --n-bg-raised: #13161e;
  --n-bg-card: #1e2433;
  --n-border-panel: rgba(255, 255, 255, 0.1);
  --n-placeholder: rgba(203, 213, 225, 0.62);
  --n-feedback-success: #14b8a6;
  --n-feedback-success-border: rgba(20, 184, 166, 0.55);
  --n-feedback-success-bg: rgba(20, 184, 166, 0.14);
  --n-feedback-wrong: #fb7185;
  --n-feedback-wrong-border: rgba(251, 113, 133, 0.55);
  --n-feedback-wrong-bg: rgba(248, 113, 113, 0.12);
  --n-cta-glow: 0 0 0 1px rgba(167, 139, 250, 0.38), 0 0 28px rgba(139, 92, 246, 0.22);
  --n-cta-glow-strong: 0 0 0 2px rgba(167, 139, 250, 0.45), 0 0 40px rgba(139, 92, 246, 0.3);
  --accent: #6366f1;
  --accent-glow: rgba(99, 102, 241, 0.4);
  --success: #22c55e;
  --danger: #ef4444;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --transition: 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  /* ~3× faster than previous tier */
  --trail-period: 0.125s;
  --trail-line-height: 3px;
  --trail-header-sweep: 0.38s;
  --neon-cyan: #00fff0;
  --neon-cyan-hot: #66ffff;
  --neon-cyan-soft: rgba(0, 255, 245, 0.55);
  --trail-stroke: 1.5px;
  --neon-chase-ring: 3px;
  --neon-trail-a: rgba(0, 255, 245, 0.7);
  --neon-trail-b: #66ffff;
  --neon-trail-c: #e0ffff;
  --neon-trail-d: rgba(0, 255, 245, 0.95);
  --primary-neon-glow: rgba(0, 255, 245, 0.5);
  --primary-neon-glow-soft: rgba(0, 255, 245, 0.22);
}

/* Animated conic “from” angle — no element rotation (avoids overflow clip on rounded rects). */
@property --neon-chase-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

[data-theme="light"] {
  /* Warm bone / alabaster / parchment + royal purple accents */
  --n-bg-deep: #f9f6ee;
  --n-bg-raised: #f3f1ea;
  --n-bg-card: #edeade;
  --n-border-panel: rgba(108, 59, 170, 0.12);
  --n-placeholder: #64748b;
  --n-feedback-success: #0d9488;
  --n-feedback-success-border: rgba(13, 148, 136, 0.45);
  --n-feedback-success-bg: rgba(13, 148, 136, 0.1);
  --n-feedback-wrong: #e11d48;
  --n-feedback-wrong-border: rgba(225, 29, 72, 0.45);
  --n-feedback-wrong-bg: rgba(225, 29, 72, 0.08);
  --n-cta-glow: 0 0 0 1px rgba(108, 59, 170, 0.22), 0 0 24px rgba(108, 59, 170, 0.12);
  --n-cta-glow-strong: 0 0 0 2px rgba(108, 59, 170, 0.3), 0 0 36px rgba(99, 102, 241, 0.16);
  --bg-deep: #f9f6ee;
  --bg-page-tint: #f7f4ec;
  --bg-card: rgba(252, 245, 229, 0.94);
  --bg-input-fill: #e8e4dc;
  --bg-glass: rgba(253, 251, 245, 0.88);
  --border-glass: rgba(26, 26, 26, 0.08);
  --text: #1c1917;
  --text-muted: #57534e;
  --accent: #6c3baa;
  --accent-glow: rgba(108, 59, 170, 0.35);
  --shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
  /* ~3× faster than previous tier */
  --trail-period: 0.125s;
  --trail-line-height: 3px;
  --trail-header-sweep: 0.38s;
  --neon-cyan: #0e7490;
  --neon-cyan-hot: #0891b2;
  --neon-cyan-soft: rgba(14, 116, 144, 0.55);
  --trail-stroke: 1.5px;
  --neon-trail-a: rgba(14, 116, 144, 0.88);
  --neon-trail-b: #0e7490;
  --neon-trail-c: #67e8f9;
  --neon-trail-d: rgba(8, 145, 178, 0.95);
  --primary-neon-glow: rgba(14, 116, 144, 0.45);
  --primary-neon-glow-soft: rgba(14, 116, 144, 0.22);
}

html {
  -webkit-tap-highlight-color: transparent;
}

/* Purple brand atoms in chrome (header, study input, landing center) — overrides teal defaults */
.header-atom.assistant-atom .atom-nucleus,
.study-inline-atom.assistant-atom .atom-nucleus,
.study-brand-atom .atom-nucleus,
.bg-center-atom-inner .atom-nucleus {
  background: radial-gradient(circle at 35% 35%, #faf5ff, #c4b5fd 48%, #6366f1 100%) !important;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.5), 0 0 20px rgba(167, 139, 250, 0.22) !important;
}
.header-atom.assistant-atom .atom-ring,
.study-inline-atom.assistant-atom .atom-ring,
.study-brand-atom .atom-ring,
.bg-center-atom-inner .atom-ring {
  border-color: rgba(167, 139, 250, 0.55) !important;
}
.header-atom.assistant-atom .atom-ring .atom-electron,
.study-inline-atom.assistant-atom .atom-ring .atom-electron,
.study-brand-atom .atom-ring .atom-electron,
.bg-center-atom-inner .atom-ring .atom-electron {
  background: radial-gradient(circle at 30% 30%, #faf5ff, #a78bfa 72%, #6366f1 100%) !important;
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.65) !important;
}
[data-theme="light"] .header-atom.assistant-atom .atom-nucleus,
[data-theme="light"] .study-inline-atom.assistant-atom .atom-nucleus,
[data-theme="light"] .study-brand-atom .atom-nucleus,
[data-theme="light"] .bg-center-atom-inner .atom-nucleus {
  background: radial-gradient(circle at 35% 35%, #ffffff, #ddd6fe 42%, #6366f1 100%) !important;
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.45), 0 0 16px rgba(167, 139, 250, 0.2) !important;
}
[data-theme="light"] .header-atom.assistant-atom .atom-ring,
[data-theme="light"] .study-inline-atom.assistant-atom .atom-ring,
[data-theme="light"] .study-brand-atom .atom-ring,
[data-theme="light"] .bg-center-atom-inner .atom-ring {
  border-color: rgba(99, 102, 241, 0.45) !important;
}
[data-theme="light"] .header-atom.assistant-atom .atom-ring .atom-electron,
[data-theme="light"] .study-inline-atom.assistant-atom .atom-ring .atom-electron,
[data-theme="light"] .study-brand-atom .atom-ring .atom-electron,
[data-theme="light"] .bg-center-atom-inner .atom-ring .atom-electron {
  background: radial-gradient(circle at 30% 30%, #faf5ff, #a78bfa 75%, #4f46e5 100%) !important;
  box-shadow: 0 0 6px rgba(99, 102, 241, 0.55) !important;
}

/* Developer / admin monitor hidden site-wide (requested UI cleanup) */
#admin-monitor-fab,
#admin-monitor {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* KaTeX must stay LTR even when chat/quiz is RTL, or formulas break on desktop browsers. */
.chat-msg-body .katex,
.nexus-quiz-q-text .katex,
.nexus-quiz-option-label .katex,
.nexus-md-pre-quiz .katex,
.nexus-md-post-quiz .katex {
  direction: ltr;
  unicode-bidi: isolate;
}

[data-theme="light"] #view-landing {
  background: transparent !important;
}

/* Plain UI: no starfield canvas; keep center atom, strip prism wash */
[data-nexus-bg="plain"] #bg-canvas {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

[data-nexus-bg="plain"] #bg-ambient {
  display: block !important;
  visibility: visible !important;
  pointer-events: none !important;
  background: none !important;
  animation: none !important;
  filter: none !important;
  mix-blend-mode: normal;
  opacity: 1;
  will-change: auto;
}

[data-nexus-bg="plain"] .bg-ambient-spin {
  display: none !important;
  visibility: hidden !important;
}

[data-nexus-bg="plain"] .bg-center-atom {
  mix-blend-mode: normal;
}

[data-nexus-bg="plain"] html,
[data-nexus-bg="plain"] body {
  background: #ffffff !important;
}

[data-nexus-bg="plain"][data-theme="dark"] html,
[data-nexus-bg="plain"][data-theme="dark"] body {
  background: var(--n-bg-deep) !important;
}

/* Theme toggle — legacy class (header uses #theme-toggle) */
.theme-toggle:not(#theme-toggle) {
  display: none !important;
}

/* Borderless chrome: visible focus for keyboard users */
#root button:focus-visible,
#root .neon-cyan-chase:focus-visible,
a.sidebar-btn:focus-visible,
a.sidebar-flashcards-link:focus-visible,
.auth-tab:focus-visible,
.chat-input:focus-visible,
.landing-input:focus-visible,
.modal-input:focus-visible,
.settings-select:focus-visible,
.auth-form input:focus-visible,
.otp-input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--neon-cyan) 80%, transparent);
  outline-offset: 2px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[data-font-size="very-small"] { font-size: 12px; }
[data-font-size="small"] { font-size: 14px; }
[data-font-size="large"] { font-size: 18px; }
[data-font-size="medium"], :root { font-size: 16px; }

html, body {
  height: 100%;
  font-family: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
  background: #ffffff;
  color: var(--text);
  overflow: hidden;
}
html:has(body[data-current-view="landing"]) {
  overflow-y: auto;
  overflow-x: hidden;
  height: auto;
}
body[data-current-view="landing"] {
  overflow-y: auto;
  overflow-x: hidden;
  height: auto;
  scroll-behavior: smooth;
}

[data-theme="dark"] html,
[data-theme="dark"] body {
  background: var(--n-bg-deep);
}

[data-theme="light"] html,
[data-theme="light"] body {
  background: var(--n-bg-deep);
}

/* Input placeholders — readable on light + dark */
.study-search-input::placeholder,
.dash-search-input::placeholder,
.chat-input::placeholder,
.landing-input::placeholder,
.modal-input::placeholder {
  color: var(--n-placeholder);
  opacity: 1;
}

/* Unified motion on interactive surfaces */
button,
[role="button"],
.dash-nav-btn,
.dash-bottom-nav-btn,
.primary-btn,
.secondary-btn,
.danger-btn,
.header-nav-pill,
.study-action-tile,
.study-topic-card,
.study-quick-link,
.quiz-count-btn,
.quiz-option,
.chat-input-btn,
.study-send-btn,
.study-footer-btn,
.study-btn-new-chat,
.study-upload-btn,
.admin-monitor-fab {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Standalone subpages (flashcards, password reset): full-page scroll */
html.nexus-subpage-scroll,
html.nexus-subpage-scroll body {
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
  min-height: 100%;
  -webkit-overflow-scrolling: touch;
}

html.nexus-subpage-scroll body {
  min-height: 100vh;
}

/* Flashcards + buy + about + pricing: lock document; scroll inside subpage column (not html/body) */
html.nexus-subpage-scroll:has(body.page-flashcards),
html.nexus-subpage-scroll:has(body.page-buy),
html.nexus-subpage-scroll:has(body.page-about),
html.nexus-subpage-scroll:has(body.page-pricing) {
  overflow: hidden !important;
  height: 100%;
  min-height: 100dvh;
  max-height: 100dvh;
}
html.nexus-subpage-scroll:has(body.page-flashcards) body,
html.nexus-subpage-scroll:has(body.page-buy) body,
html.nexus-subpage-scroll:has(body.page-about) body,
html.nexus-subpage-scroll:has(body.page-pricing) body {
  overflow: hidden !important;
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.page-flashcards .fc-subpage,
body.page-buy .buy-sub,
body.page-about .about-sub,
body.page-pricing .pricing-sub {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

body.page-flashcards .fc-app-header .app-header-brand-wrap,
body.page-quiz .app-header .app-header-brand-wrap {
  align-items: center;
}

/* Mobile browsers can break nested scroll containers with fixed 100dvh locks. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  html.nexus-subpage-scroll:has(body.page-flashcards),
  html.nexus-subpage-scroll:has(body.page-buy),
  html.nexus-subpage-scroll:has(body.page-about),
  html.nexus-subpage-scroll:has(body.page-pricing) {
    overflow-y: auto !important;
    min-height: 100%;
    max-height: none;
    height: auto;
  }
  html.nexus-subpage-scroll:has(body.page-flashcards) body,
  html.nexus-subpage-scroll:has(body.page-buy) body,
  html.nexus-subpage-scroll:has(body.page-about) body,
  html.nexus-subpage-scroll:has(body.page-pricing) body {
    overflow-y: auto !important;
    height: auto;
    max-height: none;
    min-height: 100vh;
    display: block;
  }
  body.page-flashcards .fc-subpage,
  body.page-buy .buy-sub,
  body.page-about .about-sub,
  body.page-pricing .pricing-sub {
    min-height: 100vh;
    overflow-y: visible;
  }
}

/* Flashcards / subpage header: show actions without dashboard body attribute */
.fc-app-header .header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Top nav pills: neon ring is clipped by .neon-cyan-chase { overflow: hidden } */
.app-header .header-nav-pill.neon-cyan-chase {
  overflow: visible;
}

/* 1. Background Video — fills screen except top header line */
/* Background canvas — space animation */
#bg-canvas {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100vh - 60px);
  z-index: 0;
  background: #000000;
  pointer-events: none;
}

/*
 * Ambient prism wash + continuous spin layer.
 * Motion is off when: Settings → Performance → Fast mode is on, or the OS requests reduced motion
 * (Windows: Accessibility → Visual effects → Animation effects; macOS: Display → Reduce motion).
 */
/* Unified “prism field” wash: skewed planes + conic shards + scan lines (no orbiting circles) */
.bg-ambient {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  overflow: hidden;
  /* Single property keeps within browser will-change budget (avoids console spam). */
  will-change: transform;
  opacity: 0.62;
  transform-origin: 45% 55%;
  background:
    conic-gradient(
      from 200deg at 25% 35%,
      rgba(99, 102, 241, 0.32),
      transparent 22%,
      rgba(34, 211, 238, 0.26),
      transparent 48%,
      rgba(236, 72, 153, 0.2),
      transparent 72%,
      rgba(52, 211, 153, 0.14),
      transparent 100%
    ),
    linear-gradient(112deg, rgba(139, 92, 246, 0.22) 0%, transparent 42%, rgba(59, 130, 246, 0.14) 100%),
    linear-gradient(-24deg, transparent 40%, rgba(251, 113, 133, 0.12) 52%, transparent 64%),
    repeating-linear-gradient(
      -58deg,
      transparent 0 18px,
      rgba(255, 255, 255, 0.035) 18px 19px,
      transparent 19px 36px
    ),
    linear-gradient(185deg, rgba(6, 8, 18, 0) 0%, rgba(99, 102, 241, 0.08) 50%, rgba(6, 8, 18, 0) 100%);
  background-size: 145% 145%, 240% 240%, 200% 200%, 280% 280%, 100% 100%;
  background-position: 10% 30%, 0% 0%, 80% 20%, 0% 0%, 50% 50%;
  animation:
    bgPrismShift 28s ease-in-out infinite alternate,
    bgPrismWarp 42s ease-in-out infinite alternate;
}

/* Continuous rotation (linear, never “rests” like alternate keyframes) */
.bg-ambient-spin {
  position: absolute;
  left: -35%;
  top: -35%;
  width: 170%;
  height: 170%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.45;
  transform-origin: 48% 52%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    rgba(99, 102, 241, 0.28),
    transparent 18%,
    rgba(34, 211, 238, 0.22),
    transparent 38%,
    rgba(236, 72, 153, 0.18),
    transparent 58%,
    rgba(52, 211, 153, 0.14),
    transparent 78%,
    rgba(99, 102, 241, 0.2),
    transparent 100%
  );
  animation: bgAmbientSpin 72s linear infinite;
  will-change: transform;
}

@keyframes bgAmbientSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes bgPrismShift {
  0% {
    background-position: 2% 20%, 0% 5%, 65% 0%, 0% 0%, 48% 48%;
    filter: hue-rotate(-10deg) saturate(1.08);
  }
  50% {
    background-position: 92% 68%, 100% 95%, 5% 100%, 55% 70%, 52% 55%;
    filter: hue-rotate(16deg) saturate(1.22);
  }
  100% {
    background-position: 35% 88%, 15% 0%, 100% 25%, 88% 25%, 50% 50%;
    filter: hue-rotate(6deg) saturate(1.1);
  }
}

@keyframes bgPrismWarp {
  0% {
    transform: translate(-3.5%, 1.2%) skewX(-5deg) skewY(2.2deg) scale(1.14, 0.86);
  }
  50% {
    transform: translate(2.8%, -2.2%) skewX(4deg) skewY(-3deg) scale(0.9, 1.12);
  }
  100% {
    transform: translate(4%, 2.5%) skewX(-3deg) skewY(2.8deg) scale(1.08, 0.92);
  }
}

[data-fast-mode="on"] .bg-ambient {
  animation: none !important;
  opacity: 0.16;
  filter: none !important;
  background-position: 0 0 !important;
  transform: none !important;
}

[data-fast-mode="on"] .bg-ambient-spin {
  animation: none !important;
  opacity: 0 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .bg-ambient {
    animation: none !important;
    opacity: 0.2;
    transform: none !important;
    filter: none !important;
  }

  .bg-ambient-spin {
    animation: none !important;
    transform: none !important;
    opacity: 0.12;
  }
}



/* Centered copy / error toast (avoids a “from the side” cue on small screens) */
.nexus-copy-toast {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  z-index: 2147483646;
  max-width: min(92vw, 420px);
  padding: 8px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text, #e8eaef);
  background: rgba(15, 17, 22, 0.88);
  border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  text-align: center;
  box-sizing: border-box;
}
[data-theme="light"] .nexus-copy-toast {
  color: #0f1114;
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(15, 17, 22, 0.12);
}
.nexus-copy-toast.nexus-toast--error {
  border: 1px solid rgba(248, 113, 113, 0.55);
  color: #fecdd3;
  white-space: pre-wrap;
  line-height: 1.35;
  text-align: left;
}

[data-theme="light"] .nexus-copy-toast.nexus-toast--error {
  color: #7f1d1d;
  border-color: rgba(185, 28, 28, 0.45);
  background: rgba(254, 226, 226, 0.95);
}

.nexus-copy-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Center decorative atom — large, above spin layer, strong strokes so it reads through UI */
.bg-center-atom {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(120vw, 2200px);
  height: min(120vw, 2200px);
  margin-left: 0;
  margin-top: 0;
  z-index: 2;
  opacity: 0.58;
  filter: blur(0.12px);
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  will-change: transform;
  animation: bgCenterAtomDrift 56s ease-in-out infinite alternate;
}
.bg-center-atom-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-origin: center center;
  will-change: auto;
  animation: bgCenterAtomBreathe 18s ease-in-out infinite;
}
@keyframes bgCenterAtomDrift {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(-50%, -50%) translate(2.2%, -1.8%) rotate(5deg);
  }
  66% {
    transform: translate(-50%, -50%) translate(-1.8%, 2.4%) rotate(-4deg);
  }
  100% {
    transform: translate(-50%, -50%) translate(1.2%, 1%) rotate(2deg);
  }
}
@keyframes bgCenterAtomBreathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.92;
  }
  50% {
    transform: scale(1.09);
    opacity: 1;
  }
}
.bg-center-atom .atom-nucleus {
  width: 56px;
  height: 56px;
  box-shadow: 0 0 36px rgba(196, 214, 255, 0.95);
}
.bg-center-atom .atom-ring {
  width: 92%;
  height: 40%;
  max-width: 1400px;
  border-width: 3px;
  border-color: rgba(220, 228, 255, 0.72);
}
.bg-center-atom .atom-ring .atom-electron {
  width: 26px;
  height: 26px;
}
[data-fast-mode="on"] .bg-center-atom {
  opacity: 0.42;
  animation: bgCenterAtomDriftSlow 80s ease-in-out infinite alternate;
}
@keyframes bgCenterAtomDriftSlow {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) translate(1.2%, -0.8%) rotate(2.5deg);
  }
}
[data-fast-mode="on"] .bg-center-atom-inner {
  animation: bgCenterAtomBreatheSlow 32s ease-in-out infinite;
}
@keyframes bgCenterAtomBreatheSlow {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.045);
    opacity: 0.95;
  }
}
[data-fast-mode="on"] .bg-center-atom .atom-ring {
  animation-duration: 14s !important;
  opacity: 0.75;
}
@media (prefers-reduced-motion: reduce) {
  .bg-center-atom {
    animation: none !important;
    opacity: 0.36;
    transform: translate(-50%, -50%);
  }
  .bg-center-atom-inner {
    animation: none !important;
  }
  .bg-center-atom .atom-ring {
    animation: none !important;
  }
}

[data-theme="light"] .bg-center-atom {
  opacity: 0.66;
  mix-blend-mode: normal;
  filter: none;
}

[data-theme="light"] .bg-center-atom .atom-nucleus {
  background: radial-gradient(circle at 35% 35%, #134e4a, #0d9488 46%, #115e59 100%);
  box-shadow: 0 0 38px rgba(13, 148, 136, 0.88), 0 0 72px rgba(17, 94, 89, 0.42);
}

[data-theme="light"] .bg-center-atom .atom-ring {
  border-color: rgba(15, 118, 110, 0.9);
  border-width: 3px;
  box-shadow: 0 0 18px rgba(45, 212, 191, 0.4), 0 0 34px rgba(13, 148, 136, 0.22);
}

[data-theme="light"] .bg-center-atom .atom-ring .atom-electron {
  background: radial-gradient(circle at 30% 30%, #ccfbf1, #2dd4bf 68%, #0f766e 100%);
  box-shadow: 0 0 16px rgba(45, 212, 191, 0.92), 0 0 28px rgba(13, 148, 136, 0.4);
}

[data-nexus-bg="plain"][data-theme="light"] .bg-center-atom {
  opacity: 0.56;
}

/* Flashcards subpage — larger center atom, slow spin (respects reduced-motion above) */
body.page-flashcards .bg-center-atom {
  width: min(150vw, 3000px);
  height: min(150vw, 3000px);
  opacity: 0.72;
}
@keyframes fcFlashcardsAtomSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
body.page-flashcards .bg-center-atom-inner {
  animation: fcFlashcardsAtomSpin 100s linear infinite;
}
[data-fast-mode="on"] body.page-flashcards .bg-center-atom-inner {
  animation-duration: 140s;
}
@media (prefers-reduced-motion: reduce) {
  body.page-flashcards .bg-center-atom-inner {
    animation: none !important;
  }
}

/* 2. Transparency Overrides */
#root,
.view,
.landing-shell {
  background: transparent !important;
  min-height: 100vh;
  position: relative;
  isolation: isolate;
}
#root {
  overflow: hidden;
  height: 100%;
  min-height: 100%;
  max-height: 100dvh;
  z-index: 20;
  position: relative;
}

/* Main app: no document scroll — only in-view scroll areas (chat list, landing center if needed) */
body[data-current-view="dashboard"] #root {
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  /* Allow fixed header dropdowns to paint outside #root (was clipping .header-mobile-dropdown) */
  overflow: visible;
}
body[data-current-view="dashboard"] #view-dashboard {
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

body[data-current-view="landing"] #root {
  height: auto;
  max-height: none;
  overflow: visible;
}

body[data-current-view="landing"] #view-landing.active {
  height: auto;
  max-height: none;
  min-height: 0;
  overflow: visible;
  display: block;
}

body[data-current-view="landing"] #view-landing.active .landing-shell {
  min-height: 0;
  overflow: visible;
}

/* 3. Removing the "Big Box" look */
.landing-center {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  padding: 40px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  #bg-canvas {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  #bg-canvas {
    transform: translateZ(0);
    will-change: auto;
  }
}

.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 60px;
  z-index: 9999;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 0 12px 0 14px;
  background: rgba(2, 3, 8, 0.96);
  backdrop-filter: blur(20px);
  border-bottom: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  isolation: isolate;
  box-sizing: border-box;
  overflow: visible;
}

/*
 * Top bar: neon trail on the bottom edge only (separator under the header box).
 */
.app-header::before,
.chat-input-area::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--trail-line-height, 3px);
  pointer-events: none;
  box-sizing: border-box;
  border-radius: 0;
  overflow: visible;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 6%,
    rgba(0, 255, 245, 0.15) 16%,
    var(--neon-trail-a) 38%,
    var(--neon-trail-b) 50%,
    var(--neon-trail-c) 62%,
    rgba(0, 255, 245, 0.15) 84%,
    transparent 94%,
    transparent 100%
  );
  background-size: 40% 100%;
  background-repeat: no-repeat;
  background-position: 0% 50%;
  animation: appHeaderNeonSweep var(--trail-header-sweep, 0.38s) ease-in-out infinite alternate;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.95)),
    drop-shadow(0 0 6px var(--neon-cyan-hot)),
    drop-shadow(0 0 14px var(--neon-cyan-soft)),
    drop-shadow(0 0 28px rgba(0, 255, 245, 0.75)),
    drop-shadow(0 0 48px rgba(0, 255, 230, 0.42));
}

.app-header::before {
  bottom: 0;
  z-index: 10001;
  box-shadow:
    0 0 10px rgba(0, 255, 245, 0.85),
    0 0 22px rgba(0, 255, 250, 0.5),
    0 0 40px rgba(0, 255, 230, 0.28),
    0 4px 18px rgba(0, 255, 245, 0.35),
    0 10px 36px rgba(0, 240, 255, 0.18);
}

.chat-input-area::before {
  top: 0;
  z-index: 5;
  box-shadow:
    0 0 10px rgba(0, 255, 245, 0.85),
    0 0 22px rgba(0, 255, 250, 0.5),
    0 0 40px rgba(0, 255, 230, 0.28),
    0 -4px 18px rgba(0, 255, 245, 0.35),
    0 -10px 36px rgba(0, 240, 255, 0.18);
}

[data-theme="light"] .app-header::before,
[data-theme="light"] .chat-input-area::before {
  filter:
    drop-shadow(0 0 1px rgba(0, 120, 115, 0.5)),
    drop-shadow(0 0 8px rgba(0, 190, 185, 0.95)),
    drop-shadow(0 0 18px rgba(0, 170, 165, 0.65)),
    drop-shadow(0 0 34px rgba(0, 150, 145, 0.4)),
    drop-shadow(0 0 52px rgba(0, 130, 125, 0.22));
}

[data-theme="light"] .app-header::before {
  box-shadow:
    0 0 10px rgba(0, 180, 175, 0.55),
    0 0 22px rgba(0, 160, 155, 0.35),
    0 0 36px rgba(0, 140, 135, 0.2),
    0 4px 16px rgba(0, 170, 165, 0.22),
    0 10px 32px rgba(0, 150, 145, 0.12);
}

[data-theme="light"] .chat-input-area::before {
  box-shadow:
    0 0 10px rgba(0, 180, 175, 0.55),
    0 0 22px rgba(0, 160, 155, 0.35),
    0 0 36px rgba(0, 140, 135, 0.2),
    0 -4px 16px rgba(0, 170, 165, 0.22),
    0 -10px 32px rgba(0, 150, 145, 0.12);
}

[dir="rtl"] .app-header::before,
[dir="rtl"] .chat-input-area::before {
  animation-direction: reverse;
}

.app-header > * {
  position: relative;
  z-index: 10002;
}

.app-header-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-header-end {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* ----- Slash command palette (/) — terminal-style, replaces header focus ----- */
body.nexus-cmd-palette-open #app-header {
  opacity: 0;
  pointer-events: none;
}

.nexus-command-palette {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100005;
  min-height: 60px;
  box-sizing: border-box;
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  font-family: ui-monospace, "Cascadia Code", "Consolas", "SF Mono", Menlo, monospace;
  font-size: 0.88rem;
  line-height: 1.35;
  background: linear-gradient(180deg, rgba(250, 245, 255, 0.98) 0%, rgba(243, 232, 255, 0.96) 100%);
  border-bottom: 1px solid rgba(91, 33, 182, 0.18);
  box-shadow: 0 8px 32px rgba(76, 29, 149, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

[data-theme="dark"] .nexus-command-palette {
  background: linear-gradient(180deg, rgba(14, 12, 22, 0.98) 0%, rgba(18, 16, 28, 0.97) 100%);
  border-bottom-color: rgba(139, 92, 246, 0.28);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.45);
  color: #e8e4f0;
}

.nexus-command-palette-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.nexus-command-label {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  flex-shrink: 0;
  color: #7c3aed;
  font-weight: 700;
  user-select: none;
}

[data-theme="dark"] .nexus-command-label {
  color: #c4b5fd;
}

.nexus-command-dollar {
  color: var(--text-muted, #64748b);
  font-weight: 600;
}

.nexus-command-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: rgba(255, 255, 255, 0.55);
  color: var(--text, #0f172a);
  font: inherit;
  padding: 8px 12px;
  border-radius: 8px;
  outline: none;
  border: 1px solid rgba(91, 33, 182, 0.15);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .nexus-command-input {
  background: rgba(30, 28, 42, 0.85);
  color: #f1f0f5;
  border-color: rgba(139, 92, 246, 0.25);
}

.nexus-command-input:focus {
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}

.nexus-command-feedback {
  margin: 6px 0 0;
  padding: 0 2px;
  font-size: 0.8rem;
  color: #a78bfa;
  min-height: 1.2em;
}

[data-theme="dark"] .nexus-command-feedback {
  color: #c4b5fd;
}

.nexus-command-dropdown {
  margin-top: 10px;
  max-width: min(560px, 100%);
  border-radius: 4px;
  border: 1px solid rgba(91, 33, 182, 0.2);
  background: rgba(30, 27, 46, 0.92);
  color: #f1f0f7;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

[data-theme="light"] .nexus-command-dropdown {
  background: rgba(40, 36, 58, 0.94);
  color: #f5f3ff;
  border-color: rgba(91, 33, 182, 0.25);
}

.nexus-command-dd-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-weight: 700;
  font-size: 0.82rem;
}

.nexus-command-dd-header {
  color: #fff;
}

.nexus-command-dd-type {
  color: #a78bfa;
  font-weight: 600;
}

.nexus-command-dd-type::before {
  content: ": ";
  color: rgba(255, 255, 255, 0.35);
  font-weight: 500;
}

.nexus-command-dd-desc {
  margin: 0;
  padding: 8px 12px 6px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.45;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nexus-command-dd-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: min(240px, 40vh);
  overflow-y: auto;
}

.nexus-command-dd-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.84rem;
  word-break: break-all;
  border-left: 3px solid transparent;
}

.nexus-command-dd-item:hover,
.nexus-command-dd-item.is-active {
  background: rgba(124, 58, 237, 0.25);
  border-left-color: #a78bfa;
}

@media (max-width: 768px) {
  .nexus-command-palette {
    padding: 8px 10px 10px;
    font-size: 0.82rem;
  }
}

.header-center-nav {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.5vw, 28px);
  flex-wrap: wrap;
  max-width: min(100vw - 200px, 520px);
  min-width: 0;
}

@media (min-width: 769px) {
  .header-nav--mobile-only {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .header-nav--desktop-only {
    display: none !important;
  }
  .header-nav--mobile-only.header-more-wrap {
    display: flex !important;
    align-items: center;
  }
  /* Logged-in mobile: primary is Study + More; Landing stays in More only */
  body[data-user-logged-in="true"] .header-landing-bar-mobile-hide {
    display: none !important;
  }
}

.header-more-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.header-more-btn {
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-inline: 12px;
}
.header-more-chevron {
  flex-shrink: 0;
  transition: transform 0.22s ease;
  opacity: 0.85;
}
.header-more-btn[aria-expanded="true"] .header-more-chevron {
  transform: rotate(180deg);
}
.header-mobile-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: min(220px, calc(100vw - 32px));
  padding: 8px;
  border-radius: 14px;
  z-index: 100050;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(18, 16, 28, 0.96);
  border: 1px solid rgba(167, 139, 250, 0.28);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(99, 102, 241, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.header-mobile-dropdown.nexus-header-dropdown-panel:not(.nexus-header-dropdown--open) {
  display: none !important;
}
[data-theme="light"] .header-mobile-dropdown {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(91, 33, 182, 0.2);
  box-shadow:
    0 16px 40px rgba(76, 29, 149, 0.12),
    0 0 0 1px rgba(91, 33, 182, 0.08);
}
.header-mobile-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  color: #e8e4f0;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: start;
  transition: background 0.18s ease, border-color 0.18s ease;
}
[data-theme="light"] .header-mobile-dropdown-item {
  color: #1e1b2e;
}
.header-mobile-dropdown-item:hover,
.header-mobile-dropdown-item:focus-visible {
  background: rgba(139, 92, 246, 0.16);
  border-color: rgba(167, 139, 250, 0.25);
  outline: none;
}
[data-theme="light"] .header-mobile-dropdown-item:hover,
[data-theme="light"] .header-mobile-dropdown-item:focus-visible {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(91, 33, 182, 0.18);
}
.header-mobile-dropdown .header-loggedin-only {
  display: none !important;
}
body[data-user-logged-in="true"] .header-mobile-dropdown .header-loggedin-only {
  display: flex !important;
}
.header-mobile-dropdown .header-loggedout-only {
  display: none !important;
}
body[data-user-logged-in="false"] .header-mobile-dropdown .header-loggedout-only {
  display: flex !important;
}
body[data-user-logged-in="true"] .header-mobile-dropdown .header-loggedout-only {
  display: none !important;
}

@media (max-width: 768px) {
  .header-center-nav {
    max-width: min(100vw - 108px, 360px);
  }
}

@media (min-width: 900px) {
  .header-nav-pill {
    min-width: 104px;
    padding: 10px 22px;
    font-size: 0.9rem;
    border-radius: 12px;
  }
}

.header-top-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-right: 2px;
}

.header-nav-pill {
  appearance: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition), border-color var(--transition), filter var(--transition);
  border: 1px solid transparent;
}

[data-theme="light"] .header-nav-pill {
  background: rgba(28, 25, 23, 0.04);
  color: var(--text);
}

a.header-nav-pill:not(.header-nav-pill--current):not(.active-pill):hover,
button.header-nav-pill:not(.header-nav-pill--current):not(.active-pill):hover {
  background: rgba(108, 59, 170, 0.12);
  border-color: rgba(108, 59, 170, 0.2);
  color: var(--text);
}

a.header-nav-pill:not(.header-nav-pill--current):not(.active-pill):focus-visible,
button.header-nav-pill:not(.header-nav-pill--current):not(.active-pill):focus-visible {
  outline: none;
  background: rgba(108, 59, 170, 0.14);
  border-color: rgba(108, 59, 170, 0.28);
}

[data-theme="dark"] a.header-nav-pill:not(.header-nav-pill--current):not(.active-pill):hover,
[data-theme="dark"] button.header-nav-pill:not(.header-nav-pill--current):not(.active-pill):hover {
  background: rgba(167, 139, 250, 0.14);
  border-color: rgba(167, 139, 250, 0.28);
}

.header-nav-pill.active-pill,
.header-nav-pill.header-nav-pill--current {
  background: rgba(139, 92, 246, 0.18);
  color: #c4b5fd;
  border-color: rgba(167, 139, 250, 0.35);
  pointer-events: none;
  cursor: default;
}

[data-theme="light"] .header-nav-pill.active-pill,
[data-theme="light"] .header-nav-pill.header-nav-pill--current {
  background: rgba(108, 59, 170, 0.12);
  color: #6c3baa;
  border-color: rgba(108, 59, 170, 0.28);
}

.header-nav-pill.active-pill:hover,
.header-nav-pill.header-nav-pill--current:hover {
  background: inherit;
  border-color: inherit;
  filter: none;
}

.header-actions {
  display: none;
  align-items: center;
  gap: 8px;
}
body[data-current-view="dashboard"] .header-actions {
  display: flex;
}

.header-icon-btn,
.header-sidebar-toggle {
  touch-action: manipulation;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background var(--transition), filter var(--transition);
  display: flex;
}
.header-icon-btn:hover,
.header-sidebar-toggle:hover {
  background: rgba(99, 102, 241, 0.15);
}

.header-icon-btn.clean-hover:hover,
.header-sidebar-toggle.clean-hover:hover {
  background-image: linear-gradient(
      118deg,
      transparent 38%,
      var(--hover-shine-mid) 50%,
      transparent 62%
    ),
    linear-gradient(rgba(99, 102, 241, 0.16), rgba(99, 102, 241, 0.16));
  background-size: 280% 280%, 100% 100%;
  background-position: 0% 0%, 0 0;
  background-repeat: no-repeat, no-repeat;
}

[data-theme="light"] .header-icon-btn.clean-hover:hover,
[data-theme="light"] .header-sidebar-toggle.clean-hover:hover {
  background-image: linear-gradient(
      118deg,
      transparent 38%,
      var(--hover-shine-mid) 50%,
      transparent 62%
    ),
    linear-gradient(rgba(99, 102, 241, 0.12), rgba(99, 102, 241, 0.12));
}

[data-theme="light"] .app-header {
  background: rgba(240, 242, 245, 0.96);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.app-header-brand-wrap {
  grid-column: 1;
  justify-self: start;
  margin-left: 2px;
  padding-left: max(8px, env(safe-area-inset-left, 0px));
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

@media (max-width: 768px) {
  body[data-current-view="landing"] .app-header-brand {
    display: none !important;
  }
}

.app-header-brand {
  color: #e8eaef;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 1.12rem;
  text-transform: uppercase;
  background: linear-gradient(115deg, #f8fafc 0%, #e8e0ff 38%, #c4b5fd 72%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 14px rgba(167, 139, 250, 0.25));
}

[data-theme="light"] .app-header-brand {
  background: linear-gradient(115deg, #0f172a 0%, #312e81 42%, #6d28d9 78%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6));
}

@keyframes nexusBrandTrailShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* ========== Views (Fade & Slide) ========== */
.view {
  background: transparent !important;
  position: fixed;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  display: flex;
  align-items: center;  
  justify-content: center;
  pointer-events: none;
  padding: 84px 24px 24px;
}
#view-dashboard.view {
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}

.view.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  z-index: 2;
  pointer-events: auto;
}
#view-dashboard:not(.active) #sidebar.dash-sidebar,
#view-dashboard:not(.active) #sidebar-backdrop.sidebar-backdrop {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate3d(-100%, 0, 0) !important;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ========== Landing Hero ========== */
#view-landing {
  background: transparent !important;
}

.hero-bg {
  display: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 560px;
  width: 100%;
}

.hero-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #fff 0%, var(--text-muted) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fadeInDown 0.8s ease both;
}

.hero-subtitle {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: 1rem;
  animation: fadeInDown 0.8s 0.1s ease both;
}

.hero-typewriter-wrap {
  min-height: 1.6em;
  margin-bottom: 1.25rem;
  font-size: 1.1rem;
  color: var(--accent);
  animation: fadeInDown 0.8s 0.2s ease both;
}
.hero-typewriter-cursor {
  animation: blink 0.8s step-end infinite;
  margin-left: 2px;
}
@keyframes blink {
  50% { opacity: 0; }
}

.hero-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 1.5rem;
  animation: fadeInDown 0.8s 0.25s ease both;
}
.hero-pill {
  padding: 6px 14px;
  border-radius: 999px;
  background: transparent !important;
  border: 1px solid var(--border-glass);
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: transform var(--transition), border-color var(--transition);
}
.hero-pill:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  color: var(--text);
}

.hero-orbs {
  display: none;
}
.hero-orbs::before,
.hero-orbs::after {
  display: none;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, -20px); }
}

.hero-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent !important;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  padding: 8px 12px;
  backdrop-filter: none;
  box-shadow: none;
  animation: fadeInDown 0.8s 0.2s ease both;
}

.hero-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 1rem;
  padding: 12px 16px;
  outline: none;
}

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

.hero-submit {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition), box-shadow var(--transition);
}

.hero-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--accent-glow);
}

.hero-submit:active {
  transform: translateY(0);
}

.hero-submit-icon {
  font-size: 1.2rem;
}

.hero-hint {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--text-muted);
  animation: fadeInDown 0.8s 0.35s ease both;
}
.hero-hint kbd {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  font-size: 0.8em;
}

/* ========== Glass & Buttons ========== */
.glass {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}

/* Override .glass on landing/main page - no background blocking canvas */
#view-landing .glass,
#view-dashboard .glass {
  background: transparent !important;
  backdrop-filter: none;
  box-shadow: none;
}

.btn-primary {
  width: 100%;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  border: none;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px var(--accent-glow);
}

.btn-secondary {
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  color: var(--text);
  cursor: pointer;
  transition: transform var(--transition);
}

.btn-secondary:hover {
  transform: translateY(-1px);
}

.btn-danger {
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  background: var(--danger);
  border: none;
  color: #fff;
  cursor: pointer;
  transition: transform var(--transition);
}

.btn-danger:hover {
  transform: translateY(-1px);
}

/* ========== Auth View ========== */
#view-auth {
  background: var(--bg-deep);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  border-radius: var(--radius);
  padding: 28px;
}

.auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.auth-tab {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.95rem;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.auth-tab:hover {
  color: var(--text);
  border-color: rgba(255,255,255,0.15);
}

.auth-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-names-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.auth-names-row.hidden {
  display: none !important;
}

.auth-modal-card {
  position: relative;
  overflow: visible;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.2),
    0 24px 80px rgba(99, 102, 241, 0.15),
    0 0 120px rgba(34, 211, 238, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
[data-theme="dark"] .auth-modal-card {
  background: rgba(20, 20, 28, 0.7);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 1px rgba(139, 92, 246, 0.25),
    0 24px 80px rgba(0, 0, 0, 0.5),
    0 0 100px rgba(139, 92, 246, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.auth-aurora-clip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.auth-aurora-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.55;
  z-index: 0;
}
.auth-panel-inner {
  position: relative;
  z-index: 1;
  padding: 8px 4px 0;
}
[data-fast-mode="on"] .auth-aurora-canvas {
  display: none !important;
}
#auth-country-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 5;
}

#auth-country-wrap:has(.auth-country-dropdown:not(.hidden)) {
  z-index: 30;
}

.auth-country-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.auth-country-error {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #f87171;
}
[data-theme="light"] .auth-country-error {
  color: #b91c1c;
}
.auth-country-error.hidden {
  display: none;
}

.auth-country-native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.auth-country-select-shell {
  position: relative;
  width: 100%;
  border-radius: 14px;
  padding: 2px;
  background: linear-gradient(155deg, rgba(16, 18, 32, 0.97), rgba(8, 10, 20, 0.99));
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.28),
    0 10px 40px rgba(99, 102, 241, 0.12),
    0 0 80px rgba(34, 211, 238, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: box-shadow 0.2s ease;
}

.auth-country-select-shell:hover {
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.5),
    0 12px 44px rgba(99, 102, 241, 0.18),
    0 0 100px rgba(34, 211, 238, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.auth-country-select-shell:has(.auth-country-dropdown:not(.hidden)) {
  z-index: 40;
  box-shadow:
    0 0 0 2px var(--accent),
    0 0 0 6px var(--accent-glow),
    0 16px 48px rgba(99, 102, 241, 0.22),
    0 0 100px rgba(34, 211, 238, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.auth-country-custom-trigger {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 14px 46px 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.4);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.35;
  min-height: 50px;
  cursor: pointer;
  outline: none;
  text-align: left;
  font-family: inherit;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.auth-country-custom-trigger:hover {
  background: rgba(0, 0, 0, 0.48);
  border-color: rgba(255, 255, 255, 0.14);
}

.auth-country-custom-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.92);
}

.auth-country-custom-text.is-placeholder {
  color: var(--text-muted);
}

.auth-country-select-chevron {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  transition: color 0.2s ease, transform 0.25s ease;
}

.auth-country-select-chevron svg {
  display: block;
}

.auth-country-select-shell:has(.auth-country-dropdown:not(.hidden)) .auth-country-select-chevron {
  color: var(--accent);
  transform: translateY(-50%) rotate(180deg);
}

.auth-country-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
  display: flex;
  flex-direction: column;
  max-height: min(320px, 52vh);
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(129, 140, 248, 0.35);
  background: rgba(12, 14, 26, 0.98);
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(99, 102, 241, 0.2),
    0 0 64px rgba(34, 211, 238, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.auth-country-dropdown.hidden {
  display: none !important;
}

.auth-country-dropdown-search-wrap {
  flex-shrink: 0;
  margin-bottom: 8px;
}

.auth-country-dropdown-search {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-country-dropdown-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.auth-country-dropdown-search::placeholder {
  color: var(--text-muted);
}

.auth-country-dropdown-options {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 10px;
  margin: 0 -2px;
  padding: 4px 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(129, 140, 248, 0.45) rgba(0, 0, 0, 0.2);
}

.auth-country-dropdown-empty {
  padding: 24px 14px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.auth-country-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 2px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease;
}

.auth-country-dropdown-item.hidden {
  display: none !important;
}

.auth-country-dropdown-item:hover,
.auth-country-dropdown-item:focus {
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.22), rgba(34, 211, 238, 0.1));
  outline: none;
}

.auth-country-dropdown-flag {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
}

.auth-country-dropdown-name {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}

.auth-country-dropdown-code {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.4);
}

[data-theme="light"] .auth-country-select-shell {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(245, 245, 250, 1));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 8px 28px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .auth-country-select-shell:has(.auth-country-dropdown:not(.hidden)) {
  box-shadow:
    0 0 0 2px var(--accent),
    0 0 0 5px var(--accent-glow),
    0 12px 36px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .auth-country-custom-trigger {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(0, 0, 0, 0.1);
  color: #1a1d24;
}

[data-theme="light"] .auth-country-custom-trigger:hover {
  background: #fff;
}

[data-theme="light"] .auth-country-custom-text {
  color: #1a1d24;
}

[data-theme="light"] .auth-country-select-chevron {
  color: rgba(0, 0, 0, 0.45);
}

[data-theme="light"] .auth-country-dropdown {
  background: rgba(255, 255, 255, 0.99);
  border-color: rgba(79, 70, 229, 0.22);
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(79, 70, 229, 0.1);
}

[data-theme="light"] .auth-country-dropdown-search {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.12);
  color: #1a1d24;
}

[data-theme="light"] .auth-country-dropdown-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

[data-theme="light"] .auth-country-dropdown-item {
  color: #1a1d24;
}

[data-theme="light"] .auth-country-dropdown-item:hover,
[data-theme="light"] .auth-country-dropdown-item:focus {
  background: rgba(99, 102, 241, 0.12);
}

[data-theme="light"] .auth-country-dropdown-code {
  color: rgba(0, 0, 0, 0.45);
}

/* Post-signup: full-screen success */
.account-created-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  padding: 24px;
}
.account-created-overlay.hidden {
  display: none !important;
}
.account-created-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 320px;
}
.account-created-mark-wrap {
  width: 112px;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.08);
  box-shadow: 0 0 48px rgba(34, 197, 94, 0.25);
  transform-origin: 50% 50%;
}
.account-created-svg {
  width: 88px;
  height: 88px;
  color: #4ade80;
}
.account-created-circle {
  stroke-dasharray: 277;
  stroke-dashoffset: 277;
}
.account-created-check {
  stroke-dasharray: 72;
  stroke-dashoffset: 72;
}
.account-created-title {
  margin: 28px 0 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.02em;
  opacity: 0;
}
.account-created-inner--play .account-created-circle {
  animation: accCircleDraw 0.75s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.account-created-inner--play .account-created-check {
  animation: accCheckDraw 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.55s forwards;
}
.account-created-inner--play .account-created-mark-wrap {
  animation: accMarkMorph 0.9s cubic-bezier(0.45, 0, 0.2, 1) 1.05s forwards;
}
.account-created-inner--play .account-created-title {
  animation: accTitleIn 0.5s ease-out 1.35s forwards;
}
@keyframes accCircleDraw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes accCheckDraw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes accMarkMorph {
  0% {
    transform: scale(1) rotate(0deg);
    border-radius: 50%;
  }
  35% {
    transform: scale(1.12, 0.88) rotate(-5deg);
    border-radius: 42% 58% 48% 52%;
  }
  70% {
    transform: scale(0.92, 1.08) rotate(4deg);
    border-radius: 55% 45% 52% 48%;
  }
  100% {
    transform: scale(1.2, 0.72) rotate(8deg) translateY(10px);
    border-radius: 38% 62% 40% 60%;
    opacity: 0.75;
    box-shadow: 0 0 32px rgba(34, 197, 94, 0.15);
  }
}
@keyframes accTitleIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .account-created-circle,
  .account-created-check {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
  .account-created-inner--play .account-created-mark-wrap {
    animation: none !important;
  }
  .account-created-inner--play .account-created-title {
    animation: none !important;
    opacity: 1 !important;
  }
}
.nexus-svg-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.nexus-svg-toolbar label {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.nexus-svg-toolbar input[type="color"] {
  width: 44px;
  height: 36px;
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  padding: 2px;
  cursor: pointer;
  background: transparent;
  touch-action: manipulation;
}
[data-fast-mode="on"] .chat-msg {
  animation: none !important;
}
[data-fast-mode="on"] .neon-cyan-chase::before {
  animation-duration: 0.62s !important;
  animation-timing-function: linear !important;
  opacity: 0.92;
  filter:
    drop-shadow(0 0 4px var(--neon-cyan-soft)),
    drop-shadow(0 0 12px var(--primary-neon-glow-soft));
}

[data-fast-mode="on"] .app-header::before,
[data-fast-mode="on"] .chat-input-area::before {
  animation-duration: 0.58s !important;
  opacity: 0.9;
}

.auth-password-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-password-wrap input {
  flex: 1;
  padding-right: 48px;
}

.auth-password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  opacity: 0.7;
  padding: 4px;
  line-height: 1;
}

.auth-password-toggle:hover {
  opacity: 1;
}

.auth-password-toggle svg {
  display: block;
  color: #fff;
}

.auth-password-toggle .hidden {
  display: none !important;
}

.auth-form input {
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.auth-form input:-webkit-autofill,
.auth-form input:-webkit-autofill:hover,
.auth-form input:-webkit-autofill:focus,
.auth-form input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px rgba(0, 0, 0, 0.25) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  transition: background-color 5000s ease-in-out 0s;
}

.auth-form input::placeholder {
  color: var(--text-muted);
  opacity: 0.8;
}

.auth-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  background: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .auth-form input {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .auth-form input:-webkit-autofill,
[data-theme="light"] .auth-form input:-webkit-autofill:hover,
[data-theme="light"] .auth-form input:-webkit-autofill:focus,
[data-theme="light"] .auth-form input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.95) inset !important;
  -webkit-text-fill-color: #1a1d24 !important;
}

.auth-forgot-row {
  margin: 0 0 8px;
  text-align: center;
}
.auth-forgot-row.hidden {
  display: none !important;
}
.auth-forgot-link {
  border: none;
  background: none;
  color: var(--accent);
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 6px 8px;
  font-family: inherit;
}
.auth-forgot-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}
.auth-forgot-panel .modal-note {
  margin: 0;
  text-align: center;
}

.auth-forgot-fallback {
  margin-top: 4px;
}
.auth-forgot-fallback.hidden {
  display: none !important;
}
.auth-forgot-fallback-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.auth-forgot-fallback-link {
  color: var(--accent);
  font-size: 0.85rem;
  word-break: break-all;
  max-width: 100%;
}

[data-theme="light"] .auth-form input:focus {
  background: #fff;
  border-color: var(--accent);
}

.auth-error {
  margin-top: 12px;
  color: var(--danger);
  font-size: 0.9rem;
  min-height: 1.2em;
}

/* ========== Verify View ========== */
.verify-card {
  width: 100%;
  max-width: 380px;
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
}

.verify-card h2 {
  font-size: 1.35rem;
  margin-bottom: 8px;
}

.verify-email-display {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 24px;
}

.verify-inputs {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.verify-code {
  width: 320px;
  height: 64px;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.6em;
  border-radius: var(--radius);
  border: 2px solid var(--border-glass);
  background:
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(255,255,255,0.08) 42px 46px),
    rgba(0,0,0,0.2);
  color: var(--text);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.verify-code::placeholder {
  color: rgba(255,255,255,0.22);
  letter-spacing: 0.7em;
}
.verify-code:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  transform: translateY(-2px);
}

/* ========== Dashboard Layout ========== */
#view-dashboard {
  background: transparent !important;
  display: block;
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}

/* ===== New Dashboard Layout ===== */
.dash-layout {
  display: flex;
  width: 100%;
  height: 100vh;
  height: 100dvh;
}

.dash-sidebar {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: rgba(16, 17, 22, 0.72);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, box-shadow 0.3s ease;
  z-index: 100;
  position: relative;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 4px 0 40px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .dash-sidebar {
  background: color-mix(in srgb, var(--n-bg-raised) 94%, white);
  border-right: 1px solid var(--n-border-panel);
  box-shadow: 4px 0 28px rgba(15, 23, 42, 0.07);
}
[data-theme="dark"] .dash-sidebar {
  background: color-mix(in srgb, var(--n-bg-raised) 94%, transparent);
  border-right-color: var(--n-border-panel);
}
.dash-sidebar.collapsed {
  transform: translateX(-100%);
  position: absolute;
  left: 0; top: 0; bottom: 0;
  opacity: 0;
  pointer-events: none;
}

/* Sidebar header */
.dash-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  flex-shrink: 0;
}
[data-theme="light"] .dash-sidebar-header {
  border-bottom-color: rgba(139,92,246,0.06);
}
.dash-sidebar-toggle {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}
.dash-sidebar-toggle:hover {
  background: rgba(139,92,246,0.1);
  color: var(--text);
}
[data-theme="light"] .dash-sidebar-toggle { border-color: rgba(0,0,0,0.06); }
.dash-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-brand-atom { width: 24px; height: 24px; display: inline-flex; position: relative; }
.dash-brand-atom .atom-nucleus { width: 5px; height: 5px; }
.dash-brand-atom .atom-ring { width: 22px; height: 22px; }
.dash-brand-text {
  font-weight: 700;
  font-size: 0.95rem;
  background: linear-gradient(135deg, #a78bfa, #818cf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="light"] .dash-brand-text {
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dash-theme-btn {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, transform 0.2s;
  flex-shrink: 0;
}
.dash-theme-btn:hover {
  background: rgba(139,92,246,0.1);
  color: var(--text);
  transform: rotate(15deg);
}
[data-theme="light"] .dash-theme-btn { border-color: rgba(0,0,0,0.06); }
[data-theme="dark"] .dash-theme-sun { display: none; }
[data-theme="dark"] .dash-theme-moon { display: block; }
[data-theme="light"] .dash-theme-sun { display: block; }
[data-theme="light"] .dash-theme-moon { display: none; }

/* Sidebar search */
.dash-sidebar-search {
  padding: 10px 14px;
  position: relative;
  flex-shrink: 0;
}
.dash-search-icon {
  position: absolute;
  left: 26px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); opacity: 0.5; pointer-events: none;
}
.dash-search-input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.04);
  font-size: 0.82rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.dash-search-input:focus {
  border-color: rgba(139,92,246,0.35);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.08);
}
[data-theme="light"] .dash-search-input {
  background: rgba(255,255,255,0.7);
  border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .dash-search-input:focus {
  border-color: rgba(139,92,246,0.3);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.06);
}

/* Sidebar nav buttons */
.dash-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 12px;
  flex-shrink: 0;
}
.dash-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
}
.dash-nav-btn svg { flex-shrink: 0; opacity: 0.6; transition: opacity 0.2s; }
.dash-nav-btn:hover {
  background: rgba(139,92,246,0.08);
  color: var(--text);
  transform: translateX(2px);
}
.dash-nav-btn:hover svg { opacity: 1; }
.dash-nav-primary {
  min-height: 44px;
  border: 1px dashed rgba(139,92,246,0.25) !important;
  background: rgba(139,92,246,0.06);
  color: #a78bfa !important;
  font-weight: 600;
}
.dash-nav-primary:hover {
  background: rgba(139,92,246,0.12);
  border-color: rgba(139,92,246,0.4) !important;
}
[data-theme="light"] .dash-nav-primary {
  color: #7c3aed !important;
  border-color: rgba(139,92,246,0.2) !important;
}
.dash-nav-primary:focus-visible {
  box-shadow: var(--n-cta-glow-strong);
  outline: none;
}
.dash-nav-danger {
  color: #fca5a5 !important;
  border: 1px solid rgba(248,113,113,0.25) !important;
}
.dash-nav-danger:hover { background: rgba(220,38,38,0.1); }
.dash-nav-danger:disabled { opacity: 0.35; cursor: not-allowed; }

/* Study sidebar CTA — violet → indigo gradient + glow (matches hub tiles) */
.dash-nav-study-gradient {
  min-height: 44px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(99, 102, 241, 0.18)) !important;
  border: 1px solid rgba(167, 139, 250, 0.45) !important;
  color: #e9d5ff !important;
  font-weight: 600 !important;
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.2);
}
.dash-nav-study-gradient svg {
  opacity: 0.95 !important;
  color: #c4b5fd;
}
.dash-nav-study-gradient:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.32), rgba(99, 102, 241, 0.26)) !important;
  border-color: rgba(196, 181, 253, 0.65) !important;
  box-shadow: 0 0 32px rgba(139, 92, 246, 0.35);
  transform: translateX(0) translateY(-1px);
}
[data-theme="light"] .dash-nav-study-gradient {
  color: #4c1d95 !important;
  border-color: rgba(91, 33, 182, 0.35) !important;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(79, 70, 229, 0.12)) !important;
  box-shadow: 0 4px 20px rgba(91, 33, 182, 0.12);
}
[data-theme="light"] .dash-nav-study-gradient svg {
  color: #5b21b6;
}
[data-theme="light"] .dash-nav-study-gradient:hover {
  box-shadow: 0 6px 28px rgba(91, 33, 182, 0.2);
}

.nexus-btn-primary-gradient {
  background: linear-gradient(135deg, #7c3aed, #6366f1) !important;
  color: #fff !important;
  border: 1px solid rgba(196, 181, 253, 0.35) !important;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.25);
  min-height: 44px;
}
.nexus-btn-primary-gradient:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 28px rgba(139, 92, 246, 0.4);
  transform: translateY(-1px);
}
[data-theme="light"] .nexus-btn-primary-gradient {
  background: linear-gradient(135deg, #6d28d9, #4f46e5) !important;
  box-shadow: 0 4px 18px rgba(79, 70, 229, 0.22);
}

.dash-loggedin-only {
  display: none !important;
}
body[data-user-logged-in="true"] .dash-bottom-nav.dash-loggedin-only {
  display: flex !important;
}

.dash-bottom-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9990;
  padding: 8px 12px max(10px, env(safe-area-inset-bottom));
  justify-content: space-around;
  align-items: stretch;
  gap: 8px;
  background: rgba(12, 14, 18, 0.82);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-theme="light"] .dash-bottom-nav {
  background: rgba(249, 250, 251, 0.88);
  border-top-color: rgba(26, 26, 26, 0.08);
}
.dash-bottom-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 48px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
}
.dash-bottom-nav-btn svg {
  opacity: 0.85;
}
.dash-bottom-nav-btn:hover,
.dash-bottom-nav-btn:focus-visible {
  color: var(--text);
  background: rgba(139, 92, 246, 0.1);
}

@media (max-width: 768px) {
  body[data-user-logged-in="true"][data-current-view="dashboard"] .dash-bottom-nav.dash-loggedin-only {
    display: flex !important;
  }
  body[data-user-logged-in="true"][data-current-view="dashboard"] .dash-layout .chat-main {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}

.settings-plan-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.settings-plan-link {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 10px 8px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(139, 92, 246, 0.2);
  color: var(--text);
  background: rgba(139, 92, 246, 0.06);
}
.settings-plan-link:hover {
  border-color: rgba(139, 92, 246, 0.4);
  background: rgba(139, 92, 246, 0.1);
}
.settings-plan-link-featured {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(99, 102, 241, 0.12));
  border-color: rgba(167, 139, 250, 0.45);
}
.settings-plans-cta {
  width: 100%;
  margin-top: 4px;
}

.dash-nav-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.dash-nav-row .dash-nav-btn {
  flex: 1;
  min-width: 0;
}
.dash-nav-icon-btn {
  width: 38px; height: 38px;
  min-width: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.04);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  flex-shrink: 0;
}
.dash-nav-icon-btn:hover {
  background: rgba(139,92,246,0.1);
  color: var(--text);
  transform: scale(1.05);
}
[data-theme="light"] .dash-nav-icon-btn { border-color: rgba(0,0,0,0.04); }

/* Conversation label */
.dash-convo-label {
  padding: 14px 16px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  opacity: 0.5;
  flex-shrink: 0;
}

/* Conversations list */
.dash-conversations {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 10px 10px;
  scrollbar-width: thin;
  min-height: 0;
}

/* Sidebar footer */
.dash-sidebar-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.04);
  flex-shrink: 0;
}
[data-theme="light"] .dash-sidebar-footer {
  border-top-color: rgba(0,0,0,0.05);
}
.dash-sidebar-footer .sidebar-avatar {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  user-select: none;
  flex-shrink: 0;
}
.dash-sidebar-footer .sidebar-email {
  font-size: 0.78rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Chat main — shifts right when sidebar open */
.dash-layout .chat-main {
  flex: 1;
  min-width: 0;
  margin-left: 0;
  padding-top: 60px;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent !important;
}

/* Mobile: sidebar overlays */
@media (max-width: 768px) {
  .dash-sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 10000;
    width: 280px;
    box-shadow: 4px 0 32px rgba(0,0,0,0.4);
  }
  .dash-sidebar.collapsed {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    box-shadow: none;
  }
  .dash-layout .chat-main {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dash-sidebar { transition: transform 0.2s ease, opacity 0.2s ease; }
}

a.sidebar-flashcards-link {
  box-sizing: border-box;
  width: 100%;
  justify-content: flex-start;
}

.sidebar-actions-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-nav-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 4px;
}

.sidebar-btn-new-chat {
  border: 1px dashed rgba(139,92,246,0.25) !important;
  background: rgba(139,92,246,0.06) !important;
  color: #a78bfa !important;
}
.sidebar-btn-new-chat:hover {
  background: rgba(139,92,246,0.12) !important;
  border-color: rgba(139,92,246,0.4) !important;
  box-shadow: 0 4px 16px rgba(139,92,246,0.15);
  transform: translateY(-1px);
}
[data-theme="light"] .sidebar-btn-new-chat {
  color: #7c3aed !important;
  border-color: rgba(139,92,246,0.2) !important;
  background: rgba(139,92,246,0.05) !important;
}
[data-theme="light"] .sidebar-btn-new-chat:hover {
  background: rgba(139,92,246,0.1) !important;
  border-color: rgba(139,92,246,0.35) !important;
  box-shadow: 0 4px 16px rgba(139,92,246,0.1);
}

.sidebar-btn .sidebar-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sidebar-conversations-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  opacity: 0.6;
  padding: 14px 4px 4px;
}

.sidebar-conversations {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(42dvh, 320px);
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
  padding: 4px 4px 12px 4px;
  scrollbar-width: thin;
}

@media (max-width: 768px) {
  .sidebar-conversations {
    max-height: min(52dvh, 400px);
  }
  .sidebar-profile-row {
    grid-template-columns: 36px minmax(0, 1fr) 40px;
    gap: 6px;
    align-items: center;
  }
  .sidebar-settings-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .sidebar-avatar {
    flex-shrink: 0;
  }
  .sidebar-email {
    min-width: 0;
    font-size: 0.8rem;
  }
}

.sidebar-spacer {
  flex: 1;
}

.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
[data-theme="light"] .sidebar-footer {
  border-top-color: rgba(0,0,0,0.05);
}

.sidebar-profile-row {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  gap: 8px;
  align-items: center;
}

.sidebar-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  user-select: none;
  box-shadow: 0 2px 8px rgba(139,92,246,0.25);
}

.sidebar-avatar.m-blue {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 2px 8px rgba(59,130,246,0.25);
}

.sidebar-settings-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.sidebar-settings-btn:hover {
  background: rgba(139,92,246,0.1);
  color: var(--text);
  transform: scale(1.05);
}
[data-theme="light"] .sidebar-settings-btn {
  border-color: rgba(0,0,0,0.06);
  background: rgba(0,0,0,0.03);
}
[data-theme="light"] .sidebar-settings-btn:hover {
  background: rgba(139,92,246,0.08);
}

.sidebar-avatar.hidden {
  visibility: hidden;
}

.sidebar-email {
  font-size: 0.82rem;
  color: var(--text-muted);
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.sidebar-btn-exit {
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-glass);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform var(--transition), color var(--transition), border-color var(--transition);
}

.sidebar-btn-exit:hover {
  transform: translateY(-1px);
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.3);
}

/* ========== Chat Main ========== */
.chat-main {
  margin-left: 0;
  padding-top: 60px;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent !important;
}

.chat-topbar {
  position: sticky;
  top: 0;
  z-index: 999;
  min-height: 0;
  padding: 0;
  background: transparent !important;
}
.chat-separator {
  flex: 1;
  height: 1px;
  background: transparent;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-glass);
  background: var(--bg-glass);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.icon-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  contain: layout style;
}

.chat-messages:empty::before {
  content: "";
  display: none;
  max-width: 420px;
  margin: 12vh auto 0;
  padding: 20px 24px;
  text-align: center;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--text-muted);
  border-radius: var(--radius);
  border: 1px dashed var(--border-glass);
  background: var(--bg-glass);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

/* User-requested cleanup: hide sidebar search + deck blocks (welcome hub toggles via session state) */
#study-sidebar-search-block,
#study-sidebar-decks {
  display: none !important;
}

[data-theme="light"] .chat-messages:empty::before {
  color: #5c6370;
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(0, 0, 0, 0.1);
}

/* Dark mode: message column reads as a subtle “card” (closer to light-mode clarity) */
[data-theme="dark"] #view-dashboard .chat-messages {
  background: rgba(22, 26, 38, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  margin: 10px 14px 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.viewer-card {
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border-glass);
  background: transparent !important;
}
.viewer-title {
  font-weight: 700;
  margin-bottom: 4px;
}
.viewer-filename {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.viewer-body ul {
  margin: 8px 0;
  padding-left: 1.1em;
}
.viewer-body li {
  margin: 4px 0;
}
.chat-msg {
  max-width: 85%;
  padding: 14px 18px;
  border-radius: var(--radius);
  line-height: 1.5;
  animation: messageIn 0.35s ease both;
}

.chat-msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #4338ca 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.35);
}

.chat-msg-user-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-msg-user-content p {
  margin: 0;
}
.chat-msg-user-img-wrap {
  margin-top: 4px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  max-width: 280px;
  max-height: 200px;
  background: rgba(0,0,0,0.2);
}
.chat-msg-user-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
}
.chat-msg-user-file-label {
  font-size: 0.9rem;
  opacity: 0.95;
}

.chat-msg.assistant {
  align-self: flex-start;
  max-width: 92%;
  min-width: min(320px, 85vw);
  background: linear-gradient(135deg, rgba(30, 35, 55, 0.85) 0%, rgba(20, 25, 45, 0.9) 100%) !important;
  border: none;
  backdrop-filter: blur(16px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.chat-msg.assistant.neon-cyan-chase {
  background: linear-gradient(135deg, rgba(30, 35, 55, 0.88) 0%, rgba(20, 25, 45, 0.93) 100%) !important;
  border: none !important;
}

[data-theme="light"] .chat-msg.assistant {
  background: rgba(245, 240, 255, 0.85) !important;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .chat-msg.assistant.neon-cyan-chase {
  background: rgba(245, 240, 255, 0.88) !important;
}

.chat-msg.assistant.viewer-card.neon-cyan-chase {
  background: linear-gradient(135deg, rgba(28, 33, 52, 0.92) 0%, rgba(18, 22, 40, 0.94) 100%) !important;
}

[data-theme="light"] .chat-msg.assistant.viewer-card.neon-cyan-chase {
  background: rgba(255, 255, 255, 0.82) !important;
}

.chat-msg.assistant.neon-cyan-chase::before {
  animation-duration: 0.5s;
}

@media (max-width: 768px), (pointer: coarse) {
  [data-visual-performance="full"] .chat-msg.assistant.neon-cyan-chase::before {
    animation-duration: 2.5s !important;
    filter:
      drop-shadow(0 0 4px rgba(255, 255, 255, 0.75)),
      drop-shadow(0 0 10px var(--neon-cyan-soft)),
      drop-shadow(0 0 22px rgba(0, 255, 245, 0.55)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-msg.assistant.neon-cyan-chase::before {
    animation: none !important;
    opacity: 0.5;
  }
}

.chat-msg.streaming {
  border-color: var(--accent);
  box-shadow: 0 0 22px var(--accent-glow);
  animation: glow 2.2s ease-in-out infinite;
}

.chat-msg.assistant .chat-msg-body {
  word-wrap: break-word;
  position: relative;
  z-index: 2;
  color: #e8eaef;
}

[data-theme="light"] .chat-msg.assistant .chat-msg-body {
  color: #1a1d24;
}

.chat-msg.assistant .chat-msg-body::before {
  display: none;
}

.chat-msg.assistant .chat-msg-body strong {
  font-weight: 700;
  unicode-bidi: isolate;
  direction: inherit;
}
.chat-msg.assistant .chat-msg-body em { font-style: italic; }
.chat-msg.assistant .chat-msg-body code {
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0,0,0,0.2);
  font-size: 0.9em;
}
.chat-msg.assistant .chat-msg-body pre {
  margin: 8px 0;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.25);
  overflow-x: auto;
}
.chat-msg.assistant .chat-msg-body pre code { padding: 0; background: none; }
.chat-msg.assistant .chat-msg-body ul, .chat-msg.assistant .chat-msg-body ol { margin: 8px 0; padding-left: 1.5em; }
.chat-msg.assistant .chat-msg-body p { margin: 6px 0; }
.chat-msg.assistant .chat-msg-body p:first-child { margin-top: 0; }
.chat-msg.assistant .chat-msg-body p:last-child { margin-bottom: 0; }

/* GFM tables — assistant bubbles only */
.chat-msg.assistant .chat-msg-body table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 0.92em;
  line-height: 1.45;
}
.chat-msg.assistant .chat-msg-body th,
.chat-msg.assistant .chat-msg-body td {
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 8px 10px;
  vertical-align: top;
}
[data-theme="light"] .chat-msg.assistant .chat-msg-body th,
[data-theme="light"] .chat-msg.assistant .chat-msg-body td {
  border-color: rgba(26, 29, 36, 0.18);
}
.chat-msg.assistant .chat-msg-body thead th {
  background: #0d1b3d;
  color: #fff;
  font-weight: 700;
  font-style: italic;
  text-align: left;
}
[data-theme="light"] .chat-msg.assistant .chat-msg-body thead th {
  background: #0d1b3d;
  color: #fff;
}
.chat-msg.assistant .chat-msg-body tbody td:first-child {
  background: rgba(135, 206, 250, 0.28);
  font-style: italic;
}
[data-theme="light"] .chat-msg.assistant .chat-msg-body tbody td:first-child {
  background: rgba(100, 180, 255, 0.35);
}
.chat-msg.assistant .chat-msg-body tbody tr:nth-child(odd) td:not(:first-child) {
  background: rgba(255, 255, 255, 0.04);
}
.chat-msg.assistant .chat-msg-body tbody tr:nth-child(even) td:not(:first-child) {
  background: rgba(180, 200, 255, 0.08);
}
[data-theme="light"] .chat-msg.assistant .chat-msg-body tbody tr:nth-child(odd) td:not(:first-child) {
  background: #fff;
}
[data-theme="light"] .chat-msg.assistant .chat-msg-body tbody tr:nth-child(even) td:not(:first-child) {
  background: #e8f0fa;
}

.nexus-svg-wrap {
  --svg-stroke: #ffffff;
  --svg-fill: rgba(255, 255, 255, 0.85);
  --svg-text: #ffffff;
  max-width: 100%;
  overflow: auto;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nexus-svg-wrap path,
.nexus-svg-wrap line,
.nexus-svg-wrap polygon,
.nexus-svg-wrap circle,
.nexus-svg-wrap polyline {
  stroke: var(--svg-stroke);
}
.nexus-svg-wrap [fill]:not([fill="none"]) {
  fill: var(--svg-fill);
}
.nexus-svg-wrap text,
.nexus-svg-wrap tspan {
  fill: var(--svg-text);
}
.nexus-svg-wrap svg {
  width: min(100%, 400px);
  height: auto;
  max-width: 100%;
  max-height: 220px;
  display: block;
  margin: 8px auto;
  object-fit: contain;
}
[data-theme="light"] .nexus-svg-wrap:not([data-svg-custom]) {
  --svg-stroke: #1a1d24;
  --svg-fill: rgba(26, 29, 36, 0.85);
  --svg-text: #1a1d24;
}

@media (max-width: 768px) {
  .nexus-svg-wrap svg {
    width: 100%;
    max-height: 200px;
  }
  .nexus-svg-toolbar {
    gap: 8px;
  }
  .nexus-svg-toolbar label {
    font-size: 0.9rem;
  }
}

[data-reading-mode="on"] .chat-msg.assistant {
  max-width: 98%;
  min-width: min(400px, 95vw);
}
[data-reading-mode="on"] .chat-msg.assistant .chat-msg-body {
  font-size: 0.85em;
  line-height: 1.55;
}

.chat-input-area {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 24px max(12px, env(safe-area-inset-bottom, 0px));
  border-top: none;
  background: transparent !important;
  position: relative;
  border-radius: 14px 14px 0 0;
}

/* Thinking message */
.thinking-message .chat-msg-body {
  padding: 12px 16px;
}

.thinking-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.nexus-logo-loader {
  width: 32px;
  height: 32px;
  position: relative;
}

.nexus-logo-loader .n-letter {
  font-family: 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 20px;
  fill: #D4AF37;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.nexus-logo-loader .trace {
  transform-origin: 50% 50%;
  animation: spin 1.5s linear infinite;
}

.nexus-logo-loader .trace-inner {
  transform-origin: 50% 50%;
  animation: spin-reverse 2s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes neonChaseAngle {
  from {
    --neon-chase-angle: 0deg;
  }
  to {
    --neon-chase-angle: 360deg;
  }
}

/* Horizontal neon sweep for header bottom + chat/composer separator lines */
@keyframes appHeaderNeonSweep {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

@keyframes spin-reverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

.chat-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  min-height: 0;
}

.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  font-size: 0.85rem;
  color: var(--text);
}

/* PDF chip — reference style: rounded box, filename, icon, type label */
.file-chip-pdf {
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(40, 44, 58, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.file-chip-pdf .file-chip-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.file-chip-pdf .file-chip-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: #e8eaef;
}

.file-chip-pdf .file-chip-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-chip-pdf .file-chip-preview {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
}

.file-chip-pdf .file-chip-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.file-chip-pdf .file-chip-preview-fallback {
  display: none;
  font-size: 0.7rem;
  font-weight: 600;
  color: #b0b5be;
}

.file-chip-pdf .file-chip-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e8eaef;
}

.file-chip-pdf .file-chip-icon svg {
  width: 20px;
  height: 20px;
}

.file-chip-pdf .file-chip-type {
  font-size: 0.8rem;
  color: #b0b5be;
}

.file-chip-pdf .file-chip-remove {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-chip-thumb {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.file-chip-remove {
  margin-left: 4px;
  padding: 2px 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  font-size: 1rem;
  line-height: 1;
  transition: color var(--transition), background var(--transition);
}

.file-chip-remove:hover {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.15);
}

@keyframes thinkingGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.file-chip.upload-analyzing .file-chip-name {
  color: var(--text-muted);
  font-style: italic;
}

.chip-del {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 1rem;
}

@keyframes file-chip-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.file-chip-loading .file-chip-preview-skeleton {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-chip-loading .file-chip-skeleton {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.06) 100%
  );
  background-size: 200% 100%;
  animation: file-chip-shimmer 1.5s ease-in-out infinite;
}

.file-chip-loading .file-chip-type {
  color: var(--text-muted);
  font-style: italic;
}

.cloud-url-panel {
  width: 100%;
  max-width: 640px;
  margin: 0 auto 10px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(0, 255, 245, 0.15);
  box-sizing: border-box;
}

[data-theme="light"] .cloud-url-panel {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(0, 0, 0, 0.08);
}

.cloud-url-panel.hidden,
.cloud-url-panel[hidden] {
  display: none !important;
}

.cloud-url-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.cloud-url-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
}

.cloud-url-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-size: 0.9rem;
}

[data-theme="light"] .cloud-url-input {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.12);
}

.cloud-url-submit {
  padding: 10px 16px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  background: rgba(0, 255, 245, 0.12);
  flex-shrink: 0;
}

.cloud-url-submit:hover {
  background: rgba(0, 255, 245, 0.2);
}

.cloud-url-hint {
  margin: 8px 0 0;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--text-muted);
  opacity: 0.9;
}

.landing-center .cloud-url-panel {
  margin-top: 12px;
  margin-bottom: 0;
}

.chat-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  width: 100%;
  max-width: 640px;
  min-width: 0;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.chat-input-area .chat-input-wrap {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .chat-input-wrap {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(26, 26, 26, 0.1) !important;
}
[data-theme="light"] .chat-input-wrap:focus-within {
  border-color: rgba(91, 33, 182, 0.35) !important;
  box-shadow: 0 0 0 3px rgba(91, 33, 182, 0.08);
}

[data-theme="light"] .chat-input-area .chat-input-wrap {
  border: 1px solid rgba(26, 26, 26, 0.1) !important;
}

.chat-input-wrap--drag-over {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.3);
}

.chat-input-area--drag-over .chat-input-wrap {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.3);
}

.chat-input-area .chat-input-wrap.chat-input-wrap--drag-over,
.chat-input-area.chat-input-area--drag-over .chat-input-wrap {
  border: none !important;
  box-shadow: 0 0 0 2px rgba(0, 255, 245, 0.55), 0 4px 20px rgba(0, 0, 0, 0.25);
}

/* Drop files overlay (study + dashboard chat shell) */
#chat-input-area {
  position: relative;
}
.chat-file-drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 16px;
  border: 2px dashed rgba(96, 165, 250, 0.72);
  background: rgba(59, 130, 246, 0.1);
  color: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, border-color 0.2s ease;
}
[data-theme="light"] .chat-file-drop-overlay {
  background: rgba(239, 246, 255, 0.95);
  border-color: rgba(59, 130, 246, 0.62);
  color: #1d4ed8;
}
.chat-file-drop-overlay__icon {
  width: 56px;
  height: 72px;
  border-radius: 8px;
  border: 2px solid rgba(59, 130, 246, 0.65);
  background: linear-gradient(165deg, rgba(96, 165, 250, 0.18), rgba(255, 255, 255, 0.06));
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.18);
  position: relative;
}
.chat-file-drop-overlay__icon::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: rgba(59, 130, 246, 0.5);
  box-shadow: 0 10px 0 rgba(59, 130, 246, 0.28), 0 20px 0 rgba(59, 130, 246, 0.18);
}
#chat-input-area:has(#chat-messages:empty) .chat-file-drop-overlay,
.study-chat-area:has(#chat-messages:empty) .chat-file-drop-overlay {
  min-height: 100%;
  inset: 0;
}
body[data-nexus-page="study"] #chat-input-area:has(#chat-messages:empty) {
  min-height: clamp(340px, 46vh, 520px);
}
/* Empty hub: avoid a tall empty band above the composer so quick actions + topics sit lower */
body[data-nexus-page="study"]
  #study-area:not([data-study-session-active="true"])
  #chat-input-area:has(#chat-messages:empty) {
  min-height: clamp(80px, 12vh, 140px);
  flex: 0 0 auto;
}
body[data-nexus-page="study"] #chat-input-area:has(#chat-messages:empty) .study-chat-composer-column {
  margin-top: auto;
}
#chat-input-area.chat-input-area--drag-over .chat-file-drop-overlay,
.study-chat-area.chat-input-area--drag-over .chat-file-drop-overlay {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .chat-file-drop-overlay {
    transition: none;
    transform: none;
  }
}

/* Shared upload progress toast (flashcards/quiz/chat) */
.upload-progress-toast {
  position: fixed;
  right: 14px;
  bottom: 14px;
  width: min(360px, calc(100vw - 20px));
  max-height: min(62vh, 420px);
  z-index: 100100;
  border-radius: 14px;
  border: 1px solid rgba(139, 92, 246, 0.3);
  background: color-mix(in srgb, var(--n-bg-card) 92%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  scrollbar-width: thin;
}
[data-theme="light"] .upload-progress-toast {
  border-color: rgba(109, 40, 217, 0.35);
  background: rgba(255, 252, 248, 0.96);
  box-shadow: 0 10px 22px rgba(91, 33, 182, 0.12);
}
.upload-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}
.upload-progress-head strong { font-size: 0.95rem; }
.upload-progress-head-actions { display: inline-flex; gap: 6px; }
.upload-progress-icon-btn {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid var(--n-border-panel);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.upload-progress-body {
  padding: 8px 10px 10px;
  overflow-y: auto;
  max-height: min(50vh, 340px);
}
.upload-progress-item {
  border: 1px solid var(--n-border-panel);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: var(--n-bg-raised);
}
.upload-progress-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 5px;
  align-items: flex-start;
  min-width: 0;
  width: 100%;
}
.upload-progress-name span:last-child {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.35;
}
.upload-file-icon {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
}
.upload-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.upload-progress-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.24);
  overflow: hidden;
}
.upload-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #60a5fa, #818cf8);
  width: 0%;
  transition: width 0.15s linear;
}
.upload-progress-pct {
  font-size: 0.74rem;
  min-width: 36px;
  text-align: right;
  color: var(--text-muted);
}
.upload-progress-status {
  font-size: 0.74rem;
  margin-top: 4px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.upload-progress-item.done .upload-progress-fill { display: none; }
.upload-progress-item.done .upload-progress-pct {
  color: #22c55e;
  font-weight: 800;
}
.fc-upload-zone.fc-upload-zone--drag,
.quiz-panel--drop.qz-dragover {
  transform: scale(1.015);
  border-style: dashed !important;
  border-color: rgba(96, 165, 250, 0.9) !important;
  background: rgba(59, 130, 246, 0.08) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22), 0 16px 40px rgba(37, 99, 235, 0.14);
}
[data-theme="light"] .fc-upload-zone.fc-upload-zone--drag,
[data-theme="light"] .quiz-panel--drop.qz-dragover {
  background: rgba(239, 246, 255, 0.96) !important;
}
.fc-upload-zone.fc-upload-zone--drag::after,
.quiz-panel--drop.qz-dragover::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 18px;
  border: 2px dotted rgba(96, 165, 250, 0.55);
  pointer-events: none;
}
.fc-upload-zone.fc-upload-zone--drag::before,
.quiz-panel--drop.qz-dragover::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 80px;
  transform: translate(-50%, -58%);
  border-radius: 10px;
  border: 2px solid rgba(59, 130, 246, 0.7);
  background: linear-gradient(180deg, rgba(147, 197, 253, 0.26), rgba(255, 255, 255, 0.05));
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.14);
}
.fc-upload-zone.fc-upload-zone--drag #fc-upload-label,
.quiz-panel--drop.qz-dragover #qz-upload-hint {
  position: relative;
  z-index: 1;
}

*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
*::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
}
*::-webkit-scrollbar-thumb {
  background: rgba(129, 140, 248, 0.45);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
[data-theme="light"] *::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.92);
}
[data-theme="light"] *::-webkit-scrollbar-thumb {
  background: rgba(91, 33, 182, 0.32);
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background-clip: padding-box;
}

[data-theme="light"] body[data-nexus-page="study"] .study-sidebar,
[data-theme="light"] body.page-flashcards .fc-panel,
[data-theme="light"] body.page-quiz .quiz-panel,
[data-theme="light"] body.page-quiz .quiz-question-card {
  border-color: rgba(109, 40, 217, 0.2) !important;
  box-shadow: 0 4px 14px rgba(91, 33, 182, 0.08);
}
[data-theme="light"] body.page-flashcards .fc-opt:hover,
[data-theme="light"] body.page-quiz .quiz-count-btn:hover,
[data-theme="light"] body.page-quiz .quiz-option-btn:hover {
  border-color: rgba(109, 40, 217, 0.46) !important;
  background: rgba(109, 40, 217, 0.08) !important;
}
body.page-flashcards .fc-title-input {
  min-height: 52px;
  font-size: 1.02rem;
  font-weight: 600;
}
body.page-flashcards .fc-deck-inner {
  transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease, filter 0.28s ease;
}
body.page-flashcards .fc-deck-inner.fc-deck-swap {
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  filter: blur(1px);
}
body.page-flashcards .fc-face {
  transition: box-shadow 0.28s ease, transform 0.28s ease;
}
body.page-flashcards .fc-face:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
}

@media (max-width: 768px) {
  .app-header {
    padding: 4px 6px !important;
    gap: 6px;
  }
  .header-center-nav {
    flex: 1;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 2px;
  }
  .app-header .header-nav-pill {
    min-width: max-content;
    padding: 7px 10px;
    font-size: 0.78rem;
  }
}

.header-atom {
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin-right: 10px;
  flex-shrink: 0;
  contain: layout style paint;
  will-change: auto;
}

.header-atom.assistant-atom {
  width: 22px;
  height: 22px;
  min-width: 22px;
}

.header-atom .atom-nucleus {
  width: 5px;
  height: 5px;
}

.header-atom .atom-ring {
  width: 20px;
  height: 8px;
}

.header-atom .atom-ring .atom-electron {
  width: 4px;
  height: 4px;
}

[data-theme="light"] .header-atom .atom-nucleus {
  background: radial-gradient(circle at 35% 35%, #134e4a, #0d9488 55%, #115e59 100%);
  box-shadow: 0 0 7px rgba(13, 148, 136, 0.95), 0 0 12px rgba(17, 94, 89, 0.5);
}

[data-theme="light"] .header-atom .atom-ring {
  border-color: rgba(15, 118, 110, 0.92);
}

[data-theme="light"] .header-atom .atom-ring .atom-electron {
  background: radial-gradient(circle at 30% 30%, #ccfbf1, #2dd4bf 78%, #0f766e 100%);
  box-shadow: 0 0 5px rgba(45, 212, 191, 0.9);
}

.chat-btn-upload {
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-glass);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: transform var(--transition), color var(--transition), border-color var(--transition);
}

.chat-btn-upload:hover {
  transform: translateY(-2px) scale(1.05);
  color: var(--accent);
  border-color: var(--accent);
}

.chat-btn-upload,
.chat-send,
.landing-action-btn,
.chat-input-btn {
  transition: transform var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), filter var(--transition);
}

.chat-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 1rem;
  padding: 10px 0;
  outline: none;
}

.chat-input::placeholder {
  color: #b0b5be;
}

[data-theme="light"] .chat-input {
  color: #0f1114;
}

[data-theme="light"] .chat-input::placeholder {
  color: #5c6370;
}

.chat-send {
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  border: none;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}

.chat-send:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 24px var(--accent-glow);
  filter: brightness(1.08);
}

/* ========== Modal ========== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}

.modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  max-width: 400px;
  width: 100%;
  padding: 28px;
  border-radius: var(--radius);
}

.modal-content h2 {
  font-size: 1.25rem;
  margin-bottom: 8px;
}

.modal-content p {
  color: var(--text-muted);
  margin-bottom: 20px;
}

.modal-input {
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-glass);
  background: rgba(0,0,0,0.2);
  color: var(--text);
  font-size: 1rem;
  outline: none;
}

.modal-input:focus {
  border-color: var(--accent);
}

[data-theme="light"] .modal-input {
  background: var(--bg-input-fill, #fafbfc);
  border-color: rgba(109, 40, 217, 0.14);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

#modal-settings.modal {
  align-items: flex-start;
  justify-content: center;
  padding: max(72px, calc(env(safe-area-inset-top, 0px) + 52px)) 16px
    max(24px, env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

#modal-settings .modal-card {
  width: min(420px, calc(100vw - 24px));
  max-height: min(85dvh, calc(100dvh - 120px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 14px 18px;
  padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  overscroll-behavior: contain;
}

#modal-settings .settings-sections {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 0;
  padding-right: 2px;
}

#modal-settings .modal-actions {
  flex-shrink: 0;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-glass, rgba(255, 255, 255, 0.1));
  background: var(--n-bg-card, var(--bg));
  position: sticky;
  bottom: 0;
  z-index: 1;
}

#modal-delete-account .modal-card {
  width: min(460px, calc(100vw - 24px));
  max-height: min(84vh, calc(100vh - 90px));
  overflow-y: auto;
}

#modal-delete-account .modal-note strong {
  letter-spacing: 0.02em;
}

#modal-delete-account-error {
  margin-top: -6px;
  color: #fca5a5;
}

#modal-settings .modal-note {
  margin-bottom: 12px;
  font-size: 0.85rem;
}

#modal-settings h2 {
  font-size: 1.1rem;
}

.settings-sections {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}

.settings-section {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-section-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 4px 0;
}

.settings-section .settings-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.95rem;
}

.settings-row-checkbox {
  cursor: pointer;
  user-select: none;
}

.settings-row-checkbox .settings-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.settings-row.is-muted {
  opacity: 0.55;
}

.settings-row.is-muted .settings-select:disabled {
  cursor: not-allowed;
}

.settings-row--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.settings-text-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-glass);
  background-color: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font-size: 0.9rem;
  font-family: ui-monospace, monospace;
}

.settings-text-input:focus {
  border-color: var(--accent);
  outline: none;
}

[data-theme="light"] .settings-text-input,
[data-theme="light"] #modal-settings .settings-select {
  background-color: rgba(26, 29, 36, 0.07);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--text);
}

[data-theme="light"] #modal-settings .modal-card.glass {
  background: rgba(200, 205, 216, 0.92);
  border-color: rgba(0, 0, 0, 0.1);
}

.settings-select {
  padding: 8px 32px 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-glass);
  background-color: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font-size: 0.9rem;
  min-width: 120px;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.settings-select:hover,
.settings-select:focus {
  border-color: var(--accent);
  outline: none;
}
.settings-select option {
  background: var(--bg);
  color: var(--text);
  padding: 8px;
}

.auth-remember-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  cursor: pointer;
  margin: 12px 0 8px 0;
}

.auth-remember-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.auth-remember-row span {
  user-select: none;
}

.auth-password-hints {
  margin: 0 0 10px 0;
  font-size: 0.82rem;
  line-height: 1.45;
}

.auth-pw-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.auth-pw-rule-icon {
  font-weight: 700;
  width: 1.1em;
  text-align: center;
  flex-shrink: 0;
}

.auth-pw-rule--ok {
  color: #22c55e;
}

.auth-pw-rule--bad {
  color: #f87171;
}

[data-theme="light"] .auth-pw-rule--ok {
  color: #15803d;
}

[data-theme="light"] .auth-pw-rule--bad {
  color: #dc2626;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

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

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

@keyframes glow {
  0%, 100% { box-shadow: 0 0 16px var(--accent-glow); border-color: var(--accent); }
  50% { box-shadow: 0 0 32px var(--accent-glow); border-color: rgba(99, 102, 241, 0.8); }
}

/* Admin Monitor */
.admin-monitor {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 400px;
  height: 300px;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  backdrop-filter: blur(20px);
  min-width: 200px;
  min-height: 150px;
}

.monitor-header {
  padding: 8px 12px;
  background: var(--accent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: grab;
  user-select: none;
}

.monitor-header:active {
  cursor: grabbing;
}

#monitor-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.monitor-content {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.8rem;
  color: #0f0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.monitor-log {
  word-break: break-all;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 2px;
}
.monitor-log.error { color: #ff4444; }
.monitor-log.info { color: #44aaff; }
.monitor-log.success { color: #00ff00; }

.monitor-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 15px;
  height: 15px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--accent) 50%);
}

/* ===== Nexus V2 Visual Foundation Overrides ===== */
:root,
[data-theme="dark"] {
  --n-bg: #0a0a0b;
  --n-card: rgba(255, 255, 255, 0.06);
  --n-card-border: transparent;
  --n-text: #ececf2;
  --n-muted: #a8a9b6;
  --n-surface: rgba(14, 14, 18, 0.78);
  --n-input-glow: rgba(104, 94, 255, 0.28);
}

[data-theme="light"] {
  --n-bg: #f1f4f9;
  --n-card: rgba(255, 255, 255, 0.94);
  --n-card-border: rgba(15, 23, 42, 0.1);
  --n-text: #0f172a;
  --n-muted: #64748b;
  --n-surface: rgba(255, 255, 255, 0.97);
  --n-input-glow: rgba(79, 70, 229, 0.18);
}

[data-theme="light"] body.page-buy .buy-subscribe,
[data-theme="light"] body.page-pricing .pricing-buy-btn:not(.secondary) {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #334155 100%);
  color: #f8fafc;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.2);
}
[data-theme="light"] body.page-buy .buy-subscribe:hover,
[data-theme="light"] body.page-pricing .pricing-buy-btn:not(.secondary):hover {
  filter: brightness(1.06);
}
[data-theme="light"] body.page-buy .buy-field input,
[data-theme="light"] body.page-buy .buy-field select {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(15, 23, 42, 0.12);
  color: #0f172a;
}
[data-theme="light"] body.page-pricing .billing-toggle button.is-on {
  background: rgba(79, 70, 229, 0.12);
  border-color: rgba(79, 70, 229, 0.45);
  color: #3730a3;
}
[data-theme="light"] body.page-pricing .pricing-price-card {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}

html,
body {
  background: transparent !important;
  color: var(--n-text);
}

#view-landing {
  background: transparent !important;
}

.landing-shell {
  background: transparent !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  z-index: 10;
}

/* 3. Removing the "Big Box" look */
.landing-center {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  padding: 40px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-align: center;
}

.landing-query-container {
  background: transparent !important;
  backdrop-filter: none;
  border: none;
  box-shadow: none;
}

.landing-title {
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 10px;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 35%, #a78bfa 65%, #6366f1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.25));
}

[data-theme="light"] .landing-title {
  background: linear-gradient(135deg, #1a1d24 0%, #4f46e5 50%, #6366f1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.landing-subtitle {
  color: #e8eaef;
  margin-bottom: 24px;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  text-shadow:
    0 0 4px rgba(0, 0, 0, 1),
    0 0 8px rgba(0, 0, 0, 0.9),
    0 1px 3px rgba(0, 0, 0, 0.8),
    0 2px 6px rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .landing-subtitle {
  color: #2d3139;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 1),
    0 0 8px rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(255, 255, 255, 0.8);
}

.landing-input-shell {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 18px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.4) !important;
  border: none;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

[data-theme="light"] .landing-input-shell {
  background: rgba(255, 255, 255, 0.75) !important;
  border-color: transparent;
}

.landing-input-shell--drag-over {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.3);
}

.landing-input-shell.landing-input-shell--drag-over {
  border: none !important;
  box-shadow: 0 0 0 2px rgba(0, 255, 245, 0.55), 0 4px 20px rgba(0, 0, 0, 0.3);
}

.landing-input {
  border: none;
  outline: none;
  background: transparent;
  color: #ffffff;
  font-size: 1.05rem;
  padding: 0 14px;
  width: 100%;
  height: 46px;
}

.landing-input::placeholder {
  color: #b0b5be;
}

[data-theme="light"] .landing-input {
  color: #0f1114;
}

[data-theme="light"] .landing-input::placeholder {
  color: #5c6370;
}

.landing-action-btn,
.chat-input-btn {
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-radius: 12px;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  cursor: pointer;
}

[data-theme="light"] .landing-action-btn,
[data-theme="light"] .chat-input-btn {
  background: rgba(0, 0, 0, 0.08);
  color: #0f1114;
}

.landing-typewriter-line {
  margin-top: 14px;
  color: #e8eaef;
  min-height: 24px;
  text-shadow:
    0 0 4px rgba(0, 0, 0, 1),
    0 0 8px rgba(0, 0, 0, 0.9),
    0 1px 3px rgba(0, 0, 0, 0.8),
    0 2px 6px rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .landing-typewriter-line {
  color: #2d3139;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 1),
    0 0 8px rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(255, 255, 255, 0.8);
}

.type-cursor {
  margin-left: 2px;
  animation: typeBlink 0.8s step-end infinite;
}

@keyframes typeBlink {
  50% { opacity: 0; }
}

.chat-topbar {
  min-height: 0;
  padding: 0;
}

.mini-btn,
.sidebar-btn,
.sidebar-exit,
.primary-btn,
.secondary-btn,
.danger-btn,
.modal-input,
.chat-input-wrap,
.sidebar {
  background: transparent !important;
  border: 1px solid var(--n-card-border);
  color: var(--n-text);
  backdrop-filter: none;
}

.modal-card {
  background: var(--n-card);
  border: 1px solid var(--n-card-border);
  color: var(--n-text);
  backdrop-filter: blur(14px);
}

.primary-btn,
.secondary-btn,
.danger-btn,
.mini-btn,
.sidebar-btn,
.sidebar-exit {
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
}

.primary-btn {
  width: 100%;
  background: linear-gradient(135deg, rgba(115, 101, 255, 0.35), rgba(87, 212, 255, 0.25)), var(--n-card);
}

.danger-btn {
  background: rgba(255, 94, 125, 0.17);
}

.secondary-btn {
  background: rgba(255, 255, 255, 0.04);
}

.chat-main {
  margin-left: 0;
  background: transparent;
}

.chat-input-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 14px;
  padding: 8px;
  gap: 8px;
}

.chat-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--n-text);
  padding: 0 12px;
  height: 42px;
}

.sidebar {
  border-right: 1px solid var(--n-card-border) !important;
}

.convo-check-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 2px;
}
.convo-select-cb {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent, #6366f1);
}

.sidebar-btn-delete-selected {
  display: none;
  margin-top: 6px;
  font-size: 0.82rem;
  opacity: 0.92;
  border-color: rgba(248, 113, 113, 0.35) !important;
  color: #fecaca !important;
}
.sidebar-btn-delete-selected:not(:disabled):hover {
  background: rgba(220, 38, 38, 0.2) !important;
  border-color: rgba(248, 113, 113, 0.75) !important;
  box-shadow: 0 0 16px rgba(248, 113, 113, 0.25);
}
.sidebar-btn-delete-selected:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

[data-theme="light"] .sidebar-btn-delete-selected:not(:disabled) {
  opacity: 1;
  font-weight: 600;
  color: #991b1b !important;
  background: rgba(254, 226, 226, 0.95) !important;
  border: 1px solid rgba(220, 38, 38, 0.55) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 2px 8px rgba(220, 38, 38, 0.12);
}
[data-theme="light"] .sidebar-btn-delete-selected:not(:disabled):hover {
  background: rgba(252, 165, 165, 0.55) !important;
  border-color: rgba(185, 28, 28, 0.75) !important;
  color: #7f1d1d !important;
  box-shadow: 0 0 14px rgba(220, 38, 38, 0.22);
}
[data-theme="light"] .sidebar-btn-delete-selected:disabled {
  opacity: 0.5;
  color: var(--text-muted) !important;
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Log out — animated red ring only; hover / focus fills solid red */
.settings-logout-btn.neon-red-logout.danger-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fca5a5 !important;
  --trail-period: 1.35s;
}
.settings-logout-btn.neon-red-logout::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border-radius: inherit;
  padding: var(--neon-chase-ring, 3px);
  background: conic-gradient(
    from var(--neon-chase-angle, 0deg),
    transparent 0deg,
    transparent 228deg,
    rgba(248, 113, 113, 0.88) 248deg,
    rgba(239, 68, 68, 0.95) 268deg,
    rgba(254, 202, 202, 0.78) 298deg,
    rgba(248, 113, 113, 0.92) 322deg,
    transparent 350deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: neonChaseAngle var(--trail-period, 0.125s) linear infinite;
  pointer-events: none;
  z-index: 0;
  filter:
    drop-shadow(0 0 2px rgba(248, 113, 113, 0.95)),
    drop-shadow(0 0 10px rgba(239, 68, 68, 0.5)),
    drop-shadow(0 0 22px rgba(220, 38, 38, 0.38));
}
.settings-logout-btn.neon-red-logout::after {
  content: "";
  position: absolute;
  inset: var(--neon-chase-ring, 3px);
  border-radius: inherit;
  background-color: transparent;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.2s ease, background-color 0.32s ease;
}
.settings-logout-btn.neon-red-logout:hover::after,
.settings-logout-btn.neon-red-logout:focus-visible::after {
  opacity: 1;
  background-color: rgba(185, 28, 28, 0.92);
}
.settings-logout-btn.neon-red-logout:hover,
.settings-logout-btn.neon-red-logout:focus-visible {
  color: #fff !important;
}
[data-theme="light"] .settings-logout-btn.neon-red-logout {
  color: #991b1b !important;
}
[data-theme="light"] .settings-logout-btn.neon-red-logout::before {
  filter:
    drop-shadow(0 0 2px rgba(153, 27, 27, 0.45)),
    drop-shadow(0 0 12px rgba(220, 38, 38, 0.42));
}
[data-theme="light"] .settings-logout-btn.neon-red-logout:hover,
[data-theme="light"] .settings-logout-btn.neon-red-logout:focus-visible {
  color: #fff !important;
}

.convo-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 26px 26px;
  gap: 6px;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  overflow: visible;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
  text-align: left;
  width: 100%;
  position: relative;
  z-index: 1;
}

.convo-item:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 2px 14px rgba(139, 92, 246, 0.18);
  z-index: 2;
}
[data-theme="light"] .convo-item:hover {
  background: rgba(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.2);
  box-shadow: 0 2px 12px rgba(124, 58, 237, 0.1);
}

.convo-item.active {
  background: rgba(139, 92, 246, 0.15);
  border-color: transparent;
  border-left: 3px solid #8B5CF6;
  font-weight: 600;
}
[data-theme="light"] .convo-item.active {
  background: rgba(124, 58, 237, 0.08);
  border-left-color: #7C3AED;
}

.convo-item.neon-cyan-chase {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden;
}

.convo-item.neon-cyan-chase:hover {
  background: transparent !important;
  box-shadow: none !important;
}

.convo-item.neon-cyan-chase.active {
  background: rgba(139, 92, 246, 0.08) !important;
  border: none !important;
  border-left: 3px solid #8B5CF6 !important;
}

.convo-item.neon-cyan-chase .convo-rename,
.convo-item.neon-cyan-chase .convo-del {
  background: transparent !important;
}

.convo-main {
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0;
  flex: 1;
}

/* Study sidebar: no bulk-select column — titles use full width */
.convo-item--study-hub {
  grid-template-columns: minmax(0, 1fr) 28px 28px;
  gap: 4px;
  padding-left: 10px;
  padding-right: 8px;
}
.convo-item--study-hub .convo-rename,
.convo-item--study-hub .convo-del {
  flex-shrink: 0;
}

.convo-del,
.convo-rename {
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  line-height: 1;
  flex-shrink: 0;
}

.convo-rename:hover {
  color: var(--accent);
  background: rgba(99, 102, 241, 0.15);
}

.convo-del:hover {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.15);
}

.modal {
  z-index: 2000;
}

.modal-card {
  width: min(440px, 94vw);
  border-radius: 14px;
  padding: 20px;
}

.modal-note {
  color: var(--n-muted);
  margin: 8px 0 16px;
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.auth-tab {
  border-radius: 10px;
  border: 1px solid var(--n-card-border);
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--n-muted);
  cursor: pointer;
}

.auth-tab.active {
  color: var(--n-text);
  background: rgba(117, 96, 255, 0.18);
}

.auth-form {
  display: grid;
  gap: 10px;
}

.auth-form input,
.modal-input {
  width: 100%;
  border-radius: 10px;
  padding: 12px;
  outline: none;
}

.status-text {
  min-height: 20px;
  color: #ff7f9b;
  margin-top: 10px;
  font-size: 0.92rem;
}

.status-text.status-text--info {
  color: #5eead4;
}

[data-theme="light"] .status-text.status-text--info {
  color: #0d9488;
}

.hidden {
  display: none !important;
}

.otp-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.otp-input {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 1px solid var(--n-card-border);
  background: rgba(255, 255, 255, 0.05);
  text-align: center;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--n-text);
  outline: none;
}

.otp-input:focus {
  box-shadow: 0 0 0 1px rgba(125, 108, 255, 0.85), 0 0 20px rgba(125, 108, 255, 0.3);
}

.verify-actions {
  display: grid;
  gap: 8px;
}

.clean-hover {
  position: relative;
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.28s ease, box-shadow 0.35s ease,
    background-position 0.55s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s ease;
}
.clean-hover:hover {
  transform: scale(1.03);
  box-shadow: 0 0 18px rgba(139, 92, 246, 0.25), 0 0 6px rgba(139, 92, 246, 0.12);
}
[data-theme="light"] .clean-hover:hover {
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.15), 0 0 4px rgba(124, 58, 237, 0.08);
}

/* Diagonal shine (layered background) — idle left, sweeps right on hover */
.header-icon-btn.clean-hover,
.header-sidebar-toggle.clean-hover {
  background-repeat: no-repeat, no-repeat;
  background-size: 280% 280%, 100% 100%;
  background-position: -100% 0%, 0 0;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.24s ease, box-shadow 0.28s ease,
    background-position 0.85s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s ease;
}

html {
  --hover-shine-mid: rgba(139, 92, 246, 0.22);
  --hover-shine-mid-soft: rgba(139, 92, 246, 0.18);
  --hover-sweep-a: rgba(88, 28, 135, 0.85);
  --hover-sweep-b: rgba(139, 92, 246, 0.4);
  --hover-sweep-c: rgba(167, 139, 250, 0.55);
  --hover-sweep-core: rgba(255, 255, 255, 0.42);
  --hover-sweep-fill: rgba(88, 28, 135, 0.7);
  --hover-sweep-fill2: rgba(88, 28, 135, 0.65);
  --hover-sweep-glow-in: rgba(139, 92, 246, 0.2);
  --hover-sweep-glow-white: rgba(255, 255, 255, 0.06);
  --hover-sweep-glow-out: rgba(139, 92, 246, 0.3);
  --hover-sweep-glow-in2: rgba(139, 92, 246, 0.18);
  --hover-sweep-glow-white2: rgba(255, 255, 255, 0.05);
  --hover-sweep-glow-out2: rgba(139, 92, 246, 0.25);
  --hover-sweep-drop1: rgba(139, 92, 246, 0.4);
  --hover-sweep-drop2: rgba(167, 139, 250, 0.12);
  --hover-sweep-drop1b: rgba(139, 92, 246, 0.35);
  --hover-sweep-drop2b: rgba(192, 168, 255, 0.1);
}
html[data-theme="light"] {
  --hover-shine-mid: rgba(124, 58, 237, 0.2);
  --hover-shine-mid-soft: rgba(124, 58, 237, 0.15);
  --hover-sweep-a: rgba(109, 40, 217, 0.35);
  --hover-sweep-b: rgba(139, 92, 246, 0.3);
  --hover-sweep-c: rgba(167, 139, 250, 0.45);
  --hover-sweep-core: rgba(255, 255, 255, 0.5);
  --hover-sweep-fill: rgba(124, 58, 237, 0.25);
  --hover-sweep-fill2: rgba(124, 58, 237, 0.22);
  --hover-sweep-glow-in: rgba(124, 58, 237, 0.16);
  --hover-sweep-glow-white: rgba(255, 255, 255, 0.1);
  --hover-sweep-glow-out: rgba(124, 58, 237, 0.22);
  --hover-sweep-glow-in2: rgba(124, 58, 237, 0.14);
  --hover-sweep-glow-white2: rgba(255, 255, 255, 0.12);
  --hover-sweep-glow-out2: rgba(124, 58, 237, 0.2);
  --hover-sweep-drop1: rgba(124, 58, 237, 0.28);
  --hover-sweep-drop2: rgba(139, 92, 246, 0.14);
  --hover-sweep-drop1b: rgba(124, 58, 237, 0.25);
  --hover-sweep-drop2b: rgba(196, 181, 253, 0.18);
}

.header-icon-btn.clean-hover {
  background-image: linear-gradient(
      118deg,
      transparent 38%,
      var(--hover-shine-mid) 50%,
      transparent 62%
    ),
    linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06));
}

.header-sidebar-toggle.clean-hover {
  background-image: linear-gradient(
      118deg,
      transparent 38%,
      var(--hover-shine-mid) 50%,
      transparent 62%
    ),
    linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06));
}

[data-theme="light"] .header-icon-btn.clean-hover,
[data-theme="light"] .header-sidebar-toggle.clean-hover {
  background-image: linear-gradient(
      118deg,
      transparent 38%,
      var(--hover-shine-mid) 50%,
      transparent 62%
    ),
    linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06));
}

.header-icon-btn.clean-hover:hover,
.header-sidebar-toggle.clean-hover:hover {
  background-position: 120% 0%, 0 0;
}

.landing-action-btn.clean-hover {
  background-image: linear-gradient(
      118deg,
      transparent 38%,
      var(--hover-shine-mid-soft) 50%,
      transparent 62%
    ),
    linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15));
  background-size: 280% 280%, 100% 100%;
  background-position: -100% 0%, 0 0;
  background-repeat: no-repeat, no-repeat;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.24s ease, box-shadow 0.28s ease,
    background-position 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="light"] .landing-action-btn.clean-hover {
  background-image: linear-gradient(
      118deg,
      transparent 38%,
      var(--hover-shine-mid-soft) 50%,
      transparent 62%
    ),
    linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08));
}

.landing-action-btn.clean-hover:hover {
  background-position: 120% 0%, 0 0;
}

.header-icon-btn .theme-icon-svg {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* “Forgot password?” — shimmer off left, sweeps right on hover */
.auth-forgot-link.clean-hover {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  border-radius: 8px;
  vertical-align: baseline;
  background-image: linear-gradient(
    105deg,
    transparent 0%,
    transparent 40%,
    var(--hover-shine-mid-soft) 50%,
    transparent 60%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-position: -100% 50%;
  background-repeat: no-repeat;
  transition: background-position 0.75s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease, filter 0.2s ease;
}

.auth-forgot-link.clean-hover:hover {
  background-position: 120% 50%;
  filter: drop-shadow(0 0 6px rgba(0, 255, 230, 0.18));
}

[data-theme="light"] .auth-forgot-link.clean-hover {
  background-image: linear-gradient(
    105deg,
    transparent 0%,
    transparent 40%,
    var(--hover-shine-mid-soft) 50%,
    transparent 60%,
    transparent 100%
  );
}

.clean-hover:hover {
  transform: scale(1.02);
  filter: brightness(1.08);
}

.primary-btn.clean-hover:hover:not(.neon-cyan-chase),
.secondary-btn.clean-hover:hover:not(.neon-cyan-chase) {
  filter: brightness(1.08);
  box-shadow: 0 0 14px rgba(0, 230, 255, 0.07);
}

/* Neon + diagonal: no scale/brightness on hover — only ::after diagonal moves. */
.neon-cyan-chase.clean-hover:hover {
  transform: none;
  filter: none;
}

@media (max-width: 768px), (pointer: coarse) {
  .clean-hover:hover {
    transform: none;
    filter: brightness(1.06);
  }
  .neon-cyan-chase.clean-hover:hover {
    filter: none;
  }
  .auth-forgot-link.clean-hover:hover {
    filter: none;
  }
}

/* --------------------------------------------------------------------------
   Neon cyan chase — hollow controls: only the animated ring + glow (no fill).
   Theme tokens --neon-trail-*: dark = bright cyan; light = deeper teal (readable on white).
   -------------------------------------------------------------------------- */
.neon-cyan-chase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: inherit;
}

.neon-cyan-chase::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border-radius: inherit;
  padding: var(--neon-chase-ring, 3px);
  background: conic-gradient(
    from var(--neon-chase-angle, 0deg),
    transparent 0deg,
    transparent 228deg,
    var(--neon-trail-a) 248deg,
    var(--neon-trail-b) 268deg,
    var(--neon-trail-c) 298deg,
    var(--neon-trail-d) 322deg,
    transparent 350deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: neonChaseAngle var(--trail-period, 0.125s) linear infinite;
  pointer-events: none;
  z-index: 0;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.7)),
    drop-shadow(0 0 6px rgba(139, 92, 246, 0.4)),
    drop-shadow(0 0 14px var(--neon-cyan-hot)),
    drop-shadow(0 0 24px var(--neon-cyan-soft));
  opacity: 0.85;
}

[data-theme="light"] .neon-cyan-chase::before {
  filter:
    drop-shadow(0 0 2px rgba(124, 58, 237, 0.3)),
    drop-shadow(0 0 8px rgba(124, 58, 237, 0.5)),
    drop-shadow(0 0 18px rgba(139, 92, 246, 0.35));
  opacity: 0.75;
}

/* Inner fill — do NOT use `background: … !important` here or it blocks the clean-hover sweep. */
.neon-cyan-chase::after {
  content: "";
  position: absolute;
  inset: var(--neon-chase-ring, 3px);
  border-radius: inherit;
  background-color: transparent;
  /* Behind label/text and ::before ring hole; avoids covering input text on shells without child wrappers */
  z-index: -1;
  pointer-events: none;
}

/*
 * Diagonal: cyan + white core, teal-cyan edges; glow on hover. Slide = background-position only.
 */
.neon-cyan-chase.clean-hover::after,
.auth-tab.neon-cyan-chase::after,
a.header-nav-pill.neon-cyan-chase::after,
button.header-nav-pill.neon-cyan-chase::after,
button.fc-opt.neon-cyan-chase::after,
.convo-item.neon-cyan-chase::after,
.fc-upload-zone.neon-cyan-chase::after,
.fc-deck-inner.neon-cyan-chase::after,
.fc-history-item.neon-cyan-chase::after {
  inset: var(--neon-chase-ring, 3px);
  width: auto;
  height: auto;
  opacity: 0;
  background-color: transparent;
  box-shadow: none;
  filter: none;
  background-image: linear-gradient(
    118deg,
    var(--hover-sweep-a) 0%,
    var(--hover-sweep-a) 28%,
    var(--hover-sweep-b) 38%,
    var(--hover-sweep-c) 46%,
    var(--hover-sweep-core) 50%,
    var(--hover-sweep-c) 54%,
    var(--hover-sweep-b) 60%,
    var(--hover-sweep-a) 68%,
    var(--hover-sweep-a) 100%
  );
  background-size: 280% 100%;
  background-position: 4% 50%;
  background-repeat: no-repeat;
  transition:
    background-position 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.22s ease,
    background-color 0.45s ease,
    box-shadow 0.45s ease,
    filter 0.45s ease;
}

.neon-cyan-chase.clean-hover:hover::after,
.neon-cyan-chase.clean-hover:active::after,
.auth-tab.neon-cyan-chase:hover::after,
.auth-tab.neon-cyan-chase:active::after,
a.header-nav-pill.neon-cyan-chase:hover::after,
a.header-nav-pill.neon-cyan-chase:active::after,
button.header-nav-pill.neon-cyan-chase:hover::after,
button.header-nav-pill.neon-cyan-chase:active::after,
button.fc-opt.neon-cyan-chase:hover::after,
button.fc-opt.neon-cyan-chase:active::after,
.convo-item.neon-cyan-chase:hover::after,
.convo-item.neon-cyan-chase:active::after,
.fc-upload-zone.neon-cyan-chase:hover::after,
.fc-upload-zone.neon-cyan-chase:active::after,
.fc-deck-inner.neon-cyan-chase:hover::after,
.fc-deck-inner.neon-cyan-chase:active::after,
.fc-history-item.neon-cyan-chase:hover::after,
.fc-history-item.neon-cyan-chase:active::after {
  opacity: 1;
  background-color: var(--hover-sweep-fill);
  background-position: 96% 50%;
  box-shadow:
    inset 0 0 28px var(--hover-sweep-glow-in),
    inset 0 0 56px var(--hover-sweep-glow-white),
    0 0 14px var(--hover-sweep-glow-out);
  filter: drop-shadow(0 0 10px var(--hover-sweep-drop1)) drop-shadow(0 0 20px var(--hover-sweep-drop2));
}

[data-theme="light"] .neon-cyan-chase.clean-hover::after,
[data-theme="light"] .auth-tab.neon-cyan-chase::after,
[data-theme="light"] a.header-nav-pill.neon-cyan-chase::after,
[data-theme="light"] button.header-nav-pill.neon-cyan-chase::after,
[data-theme="light"] button.fc-opt.neon-cyan-chase::after,
[data-theme="light"] .convo-item.neon-cyan-chase::after,
[data-theme="light"] .fc-upload-zone.neon-cyan-chase::after,
[data-theme="light"] .fc-deck-inner.neon-cyan-chase::after,
[data-theme="light"] .fc-history-item.neon-cyan-chase::after {
  background-image: linear-gradient(
    118deg,
    var(--hover-sweep-a) 0%,
    var(--hover-sweep-a) 28%,
    var(--hover-sweep-b) 38%,
    var(--hover-sweep-c) 46%,
    var(--hover-sweep-core) 50%,
    var(--hover-sweep-c) 54%,
    var(--hover-sweep-b) 60%,
    var(--hover-sweep-a) 68%,
    var(--hover-sweep-a) 100%
  );
}

[data-theme="light"] .neon-cyan-chase.clean-hover:hover::after,
[data-theme="light"] .neon-cyan-chase.clean-hover:active::after,
[data-theme="light"] .auth-tab.neon-cyan-chase:hover::after,
[data-theme="light"] .auth-tab.neon-cyan-chase:active::after,
[data-theme="light"] a.header-nav-pill.neon-cyan-chase:hover::after,
[data-theme="light"] a.header-nav-pill.neon-cyan-chase:active::after,
[data-theme="light"] button.header-nav-pill.neon-cyan-chase:hover::after,
[data-theme="light"] button.header-nav-pill.neon-cyan-chase:active::after,
[data-theme="light"] button.fc-opt.neon-cyan-chase:hover::after,
[data-theme="light"] button.fc-opt.neon-cyan-chase:active::after,
[data-theme="light"] .convo-item.neon-cyan-chase:hover::after,
[data-theme="light"] .convo-item.neon-cyan-chase:active::after,
[data-theme="light"] .fc-upload-zone.neon-cyan-chase:hover::after,
[data-theme="light"] .fc-upload-zone.neon-cyan-chase:active::after,
[data-theme="light"] .fc-deck-inner.neon-cyan-chase:hover::after,
[data-theme="light"] .fc-deck-inner.neon-cyan-chase:active::after,
[data-theme="light"] .fc-history-item.neon-cyan-chase:hover::after,
[data-theme="light"] .fc-history-item.neon-cyan-chase:active::after {
  background-color: var(--hover-sweep-fill);
  box-shadow:
    inset 0 0 24px var(--hover-sweep-glow-in),
    inset 0 0 48px var(--hover-sweep-glow-white),
    0 0 12px var(--hover-sweep-glow-out);
  filter: drop-shadow(0 0 8px var(--hover-sweep-drop1));
}

.auth-forgot-panel .neon-cyan-chase.clean-hover::after,
.auth-forgot-panel .neon-cyan-chase.clean-hover:hover::after {
  background-image: none !important;
  opacity: 0 !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .neon-cyan-chase.clean-hover::after,
  .auth-tab.neon-cyan-chase::after,
  a.header-nav-pill.neon-cyan-chase::after,
  button.header-nav-pill.neon-cyan-chase::after,
  button.fc-opt.neon-cyan-chase::after,
  .convo-item.neon-cyan-chase::after,
  .fc-upload-zone.neon-cyan-chase::after,
  .fc-deck-inner.neon-cyan-chase::after,
  .fc-history-item.neon-cyan-chase::after,
  .primary-btn.clean-hover:not(.neon-cyan-chase)::after,
  .secondary-btn.clean-hover:not(.neon-cyan-chase)::after,
  .danger-btn.clean-hover:not(.neon-cyan-chase)::after,
  .chat-input-btn.clean-hover:not(.neon-cyan-chase)::after,
  .sidebar-btn.clean-hover:not(.neon-cyan-chase)::after,
  .sidebar-settings-btn.clean-hover:not(.neon-cyan-chase)::after,
  .mini-btn.clean-hover:not(.neon-cyan-chase)::after {
    transition-duration: 0.2s !important;
    will-change: auto;
  }

  .neon-cyan-chase.clean-hover:hover::after,
  .neon-cyan-chase.clean-hover:active::after,
  .auth-tab.neon-cyan-chase:hover::after,
  .auth-tab.neon-cyan-chase:active::after,
  a.header-nav-pill.neon-cyan-chase:hover::after,
  a.header-nav-pill.neon-cyan-chase:active::after,
  button.header-nav-pill.neon-cyan-chase:hover::after,
  button.header-nav-pill.neon-cyan-chase:active::after,
  button.fc-opt.neon-cyan-chase:hover::after,
  button.fc-opt.neon-cyan-chase:active::after,
  .convo-item.neon-cyan-chase:hover::after,
  .convo-item.neon-cyan-chase:active::after,
  .fc-upload-zone.neon-cyan-chase:hover::after,
  .fc-upload-zone.neon-cyan-chase:active::after,
  .fc-deck-inner.neon-cyan-chase:hover::after,
  .fc-deck-inner.neon-cyan-chase:active::after,
  .fc-history-item.neon-cyan-chase:hover::after,
  .fc-history-item.neon-cyan-chase:active::after,
  .primary-btn.clean-hover:not(.neon-cyan-chase):hover::after,
  .primary-btn.clean-hover:not(.neon-cyan-chase):active::after,
  .secondary-btn.clean-hover:not(.neon-cyan-chase):hover::after,
  .secondary-btn.clean-hover:not(.neon-cyan-chase):active::after,
  .danger-btn.clean-hover:not(.neon-cyan-chase):hover::after,
  .danger-btn.clean-hover:not(.neon-cyan-chase):active::after,
  .chat-input-btn.clean-hover:not(.neon-cyan-chase):hover::after,
  .chat-input-btn.clean-hover:not(.neon-cyan-chase):active::after,
  .sidebar-btn.clean-hover:not(.neon-cyan-chase):hover::after,
  .sidebar-btn.clean-hover:not(.neon-cyan-chase):active::after,
  .sidebar-settings-btn.clean-hover:not(.neon-cyan-chase):hover::after,
  .sidebar-settings-btn.clean-hover:not(.neon-cyan-chase):active::after,
  .mini-btn.clean-hover:not(.neon-cyan-chase):hover::after,
  .mini-btn.clean-hover:not(.neon-cyan-chase):active::after {
    background-position: 96% 50%;
    transition-duration: 0.2s !important;
    will-change: auto;
  }
}

/* Filled buttons without neon ring: same sweep on ::after (mostly transparent band). */
.primary-btn.clean-hover:not(.neon-cyan-chase),
.secondary-btn.clean-hover:not(.neon-cyan-chase),
.danger-btn.clean-hover:not(.neon-cyan-chase),
.chat-input-btn.clean-hover:not(.neon-cyan-chase),
.sidebar-btn.clean-hover:not(.neon-cyan-chase),
.sidebar-settings-btn.clean-hover:not(.neon-cyan-chase),
.mini-btn.clean-hover:not(.neon-cyan-chase) {
  overflow: hidden;
  isolation: isolate;
}

.primary-btn.clean-hover:not(.neon-cyan-chase)::after,
.secondary-btn.clean-hover:not(.neon-cyan-chase)::after,
.danger-btn.clean-hover:not(.neon-cyan-chase)::after,
.chat-input-btn.clean-hover:not(.neon-cyan-chase)::after,
.sidebar-btn.clean-hover:not(.neon-cyan-chase)::after,
.sidebar-settings-btn.clean-hover:not(.neon-cyan-chase)::after,
.mini-btn.clean-hover:not(.neon-cyan-chase)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background-color: transparent;
  box-shadow: none;
  filter: none;
  background-image: linear-gradient(
    118deg,
    var(--hover-sweep-a) 0%,
    var(--hover-sweep-a) 28%,
    var(--hover-sweep-b) 38%,
    var(--hover-sweep-c) 46%,
    var(--hover-sweep-core) 50%,
    var(--hover-sweep-c) 54%,
    var(--hover-sweep-b) 60%,
    var(--hover-sweep-a) 68%,
    var(--hover-sweep-a) 100%
  );
  background-size: 280% 100%;
  background-position: 4% 50%;
  background-repeat: no-repeat;
  transition:
    background-position 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.22s ease,
    background-color 0.45s ease,
    box-shadow 0.45s ease,
    filter 0.45s ease;
}

.primary-btn.clean-hover:not(.neon-cyan-chase):hover::after,
.primary-btn.clean-hover:not(.neon-cyan-chase):active::after,
.secondary-btn.clean-hover:not(.neon-cyan-chase):hover::after,
.secondary-btn.clean-hover:not(.neon-cyan-chase):active::after,
.danger-btn.clean-hover:not(.neon-cyan-chase):hover::after,
.danger-btn.clean-hover:not(.neon-cyan-chase):active::after,
.chat-input-btn.clean-hover:not(.neon-cyan-chase):hover::after,
.chat-input-btn.clean-hover:not(.neon-cyan-chase):active::after,
.sidebar-btn.clean-hover:not(.neon-cyan-chase):hover::after,
.sidebar-btn.clean-hover:not(.neon-cyan-chase):active::after,
.sidebar-settings-btn.clean-hover:not(.neon-cyan-chase):hover::after,
.sidebar-settings-btn.clean-hover:not(.neon-cyan-chase):active::after,
.mini-btn.clean-hover:not(.neon-cyan-chase):hover::after,
.mini-btn.clean-hover:not(.neon-cyan-chase):active::after {
  opacity: 1;
  background-color: var(--hover-sweep-fill2);
  background-position: 96% 50%;
  box-shadow:
    inset 0 0 26px var(--hover-sweep-glow-in2),
    inset 0 0 52px var(--hover-sweep-glow-white2),
    0 0 12px var(--hover-sweep-glow-out2);
  filter: drop-shadow(0 0 10px var(--hover-sweep-drop1b)) drop-shadow(0 0 18px var(--hover-sweep-drop2b));
}

[data-theme="light"] .primary-btn.clean-hover:not(.neon-cyan-chase)::after,
[data-theme="light"] .secondary-btn.clean-hover:not(.neon-cyan-chase)::after,
[data-theme="light"] .danger-btn.clean-hover:not(.neon-cyan-chase)::after,
[data-theme="light"] .chat-input-btn.clean-hover:not(.neon-cyan-chase)::after,
[data-theme="light"] .sidebar-btn.clean-hover:not(.neon-cyan-chase)::after,
[data-theme="light"] .sidebar-settings-btn.clean-hover:not(.neon-cyan-chase)::after,
[data-theme="light"] .mini-btn.clean-hover:not(.neon-cyan-chase)::after {
  background-image: linear-gradient(
    118deg,
    var(--hover-sweep-a) 0%,
    var(--hover-sweep-a) 28%,
    var(--hover-sweep-b) 38%,
    var(--hover-sweep-c) 46%,
    var(--hover-sweep-core) 50%,
    var(--hover-sweep-c) 54%,
    var(--hover-sweep-b) 60%,
    var(--hover-sweep-a) 68%,
    var(--hover-sweep-a) 100%
  );
}

[data-theme="light"] .primary-btn.clean-hover:not(.neon-cyan-chase):hover::after,
[data-theme="light"] .primary-btn.clean-hover:not(.neon-cyan-chase):active::after,
[data-theme="light"] .secondary-btn.clean-hover:not(.neon-cyan-chase):hover::after,
[data-theme="light"] .secondary-btn.clean-hover:not(.neon-cyan-chase):active::after,
[data-theme="light"] .danger-btn.clean-hover:not(.neon-cyan-chase):hover::after,
[data-theme="light"] .danger-btn.clean-hover:not(.neon-cyan-chase):active::after,
[data-theme="light"] .chat-input-btn.clean-hover:not(.neon-cyan-chase):hover::after,
[data-theme="light"] .chat-input-btn.clean-hover:not(.neon-cyan-chase):active::after,
[data-theme="light"] .sidebar-btn.clean-hover:not(.neon-cyan-chase):hover::after,
[data-theme="light"] .sidebar-btn.clean-hover:not(.neon-cyan-chase):active::after,
[data-theme="light"] .sidebar-settings-btn.clean-hover:not(.neon-cyan-chase):hover::after,
[data-theme="light"] .sidebar-settings-btn.clean-hover:not(.neon-cyan-chase):active::after,
[data-theme="light"] .mini-btn.clean-hover:not(.neon-cyan-chase):hover::after,
[data-theme="light"] .mini-btn.clean-hover:not(.neon-cyan-chase):active::after {
  background-color: var(--hover-sweep-fill2);
  box-shadow:
    inset 0 0 22px var(--hover-sweep-glow-in2),
    inset 0 0 44px var(--hover-sweep-glow-white2),
    0 0 10px var(--hover-sweep-glow-out2);
  filter: drop-shadow(0 0 10px var(--hover-sweep-drop1b));
}

.primary-btn.clean-hover:not(.neon-cyan-chase) > *,
.secondary-btn.clean-hover:not(.neon-cyan-chase) > *,
.danger-btn.clean-hover:not(.neon-cyan-chase) > *,
.chat-input-btn.clean-hover:not(.neon-cyan-chase) > *,
.sidebar-btn.clean-hover:not(.neon-cyan-chase) > *,
.sidebar-settings-btn.clean-hover:not(.neon-cyan-chase) > *,
.mini-btn.clean-hover:not(.neon-cyan-chase) > * {
  position: relative;
  z-index: 1;
}

.neon-cyan-chase > * {
  position: relative;
  z-index: 2;
}

.neon-cyan-chase.clean-hover {
  transition:
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.24s ease,
    box-shadow 0.28s ease;
}

.landing-input-shell.neon-cyan-chase {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.fc-panel.neon-cyan-chase,
.fc-upload-zone.neon-cyan-chase,
.fc-input.neon-cyan-chase,
.fc-textarea.neon-cyan-chase,
.fc-history-item.neon-cyan-chase {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.fc-deck-inner.neon-cyan-chase {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: var(--radius-sm);
}

.fc-upload-zone.neon-cyan-chase,
.fc-history-item.neon-cyan-chase {
  overflow: hidden;
}

.primary-btn.neon-cyan-chase,
.secondary-btn.neon-cyan-chase {
  color: var(--n-text);
}

.danger-btn.neon-cyan-chase {
  color: #fecaca;
}

[data-theme="light"] .danger-btn.neon-cyan-chase {
  color: #b91c1c;
}

.nexus-quiz-option-btn.neon-cyan-chase:hover {
  background: transparent !important;
}

/* Phones / touch — slower spinning trail when using full visuals (Maximum uses [data-fast-mode] rules) */
@media (max-width: 768px), (pointer: coarse) {
  [data-visual-performance="full"] .neon-cyan-chase::before {
    animation-duration: 2.6s !important;
    animation-timing-function: linear !important;
    opacity: 0.96;
  }
  [data-visual-performance="full"] .app-header::before,
  [data-visual-performance="full"] .chat-input-area::before {
    animation-duration: 2.4s !important;
    animation-timing-function: ease-in-out !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-header::before,
  .chat-input-area::before {
    animation: none !important;
    opacity: 0.65;
  }
  .neon-cyan-chase::before {
    animation: neonChaseAngle 5.5s linear infinite !important;
    opacity: 0.65;
    filter: none;
  }
}

/* Maximum: static neon ring, no header sweep motion, no diagonal hover sweeps, lighter backdrop */
[data-visual-performance="max"] .neon-cyan-chase::before {
  animation: none !important;
  --neon-chase-angle: 268deg;
  opacity: 0.5;
  filter: none !important;
}
[data-visual-performance="max"] .settings-logout-btn.neon-red-logout::before {
  animation: none !important;
  --neon-chase-angle: 268deg;
  opacity: 0.55;
  filter: none !important;
}
[data-visual-performance="max"] .chat-msg.assistant.neon-cyan-chase::before {
  animation: none !important;
  --neon-chase-angle: 268deg;
  opacity: 0.5;
  filter: none !important;
}
[data-theme="light"][data-visual-performance="max"] .neon-cyan-chase::before {
  opacity: 0.42;
}
[data-theme="light"][data-visual-performance="max"] .chat-msg.assistant.neon-cyan-chase::before {
  opacity: 0.42;
}
[data-visual-performance="max"] .app-header::before,
[data-visual-performance="max"] .chat-input-area::before {
  animation: none !important;
  filter: none !important;
  opacity: 0.68;
  background-position: 50% 50%;
}
[data-theme="light"][data-visual-performance="max"] .app-header::before,
[data-theme="light"][data-visual-performance="max"] .chat-input-area::before {
  opacity: 0.55;
}

[data-visual-performance="max"] .neon-cyan-chase.clean-hover::after,
[data-visual-performance="max"] .auth-tab.neon-cyan-chase::after,
[data-visual-performance="max"] button.fc-opt.neon-cyan-chase::after,
[data-visual-performance="max"] .convo-item.neon-cyan-chase::after,
[data-visual-performance="max"] .fc-upload-zone.neon-cyan-chase::after,
[data-visual-performance="max"] .fc-deck-inner.neon-cyan-chase::after,
[data-visual-performance="max"] .fc-history-item.neon-cyan-chase::after,
[data-visual-performance="max"] .primary-btn.clean-hover:not(.neon-cyan-chase)::after,
[data-visual-performance="max"] .secondary-btn.clean-hover:not(.neon-cyan-chase)::after,
[data-visual-performance="max"] .danger-btn.clean-hover:not(.neon-cyan-chase)::after,
[data-visual-performance="max"] .chat-input-btn.clean-hover:not(.neon-cyan-chase)::after,
[data-visual-performance="max"] .sidebar-btn.clean-hover:not(.neon-cyan-chase)::after,
[data-visual-performance="max"] .sidebar-settings-btn.clean-hover:not(.neon-cyan-chase)::after,
[data-visual-performance="max"] .mini-btn.clean-hover:not(.neon-cyan-chase)::after {
  opacity: 0 !important;
  transition: none !important;
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

[data-visual-performance="max"] .neon-cyan-chase.clean-hover:hover::after,
[data-visual-performance="max"] .neon-cyan-chase.clean-hover:active::after,
[data-visual-performance="max"] .auth-tab.neon-cyan-chase:hover::after,
[data-visual-performance="max"] .auth-tab.neon-cyan-chase:active::after,
[data-visual-performance="max"] button.fc-opt.neon-cyan-chase:hover::after,
[data-visual-performance="max"] button.fc-opt.neon-cyan-chase:active::after,
[data-visual-performance="max"] .convo-item.neon-cyan-chase:hover::after,
[data-visual-performance="max"] .convo-item.neon-cyan-chase:active::after,
[data-visual-performance="max"] .fc-upload-zone.neon-cyan-chase:hover::after,
[data-visual-performance="max"] .fc-upload-zone.neon-cyan-chase:active::after,
[data-visual-performance="max"] .fc-deck-inner.neon-cyan-chase:hover::after,
[data-visual-performance="max"] .fc-deck-inner.neon-cyan-chase:active::after,
[data-visual-performance="max"] .fc-history-item.neon-cyan-chase:hover::after,
[data-visual-performance="max"] .fc-history-item.neon-cyan-chase:active::after,
[data-visual-performance="max"] .primary-btn.clean-hover:not(.neon-cyan-chase):hover::after,
[data-visual-performance="max"] .primary-btn.clean-hover:not(.neon-cyan-chase):active::after,
[data-visual-performance="max"] .secondary-btn.clean-hover:not(.neon-cyan-chase):hover::after,
[data-visual-performance="max"] .secondary-btn.clean-hover:not(.neon-cyan-chase):active::after,
[data-visual-performance="max"] .danger-btn.clean-hover:not(.neon-cyan-chase):hover::after,
[data-visual-performance="max"] .danger-btn.clean-hover:not(.neon-cyan-chase):active::after,
[data-visual-performance="max"] .chat-input-btn.clean-hover:not(.neon-cyan-chase):hover::after,
[data-visual-performance="max"] .chat-input-btn.clean-hover:not(.neon-cyan-chase):active::after,
[data-visual-performance="max"] .sidebar-btn.clean-hover:not(.neon-cyan-chase):hover::after,
[data-visual-performance="max"] .sidebar-btn.clean-hover:not(.neon-cyan-chase):active::after,
[data-visual-performance="max"] .sidebar-settings-btn.clean-hover:not(.neon-cyan-chase):hover::after,
[data-visual-performance="max"] .sidebar-settings-btn.clean-hover:not(.neon-cyan-chase):active::after,
[data-visual-performance="max"] .mini-btn.clean-hover:not(.neon-cyan-chase):hover::after,
[data-visual-performance="max"] .mini-btn.clean-hover:not(.neon-cyan-chase):active::after {
  opacity: 0 !important;
}

[data-visual-performance="max"] .bg-center-atom,
[data-visual-performance="max"] .bg-center-atom-inner {
  animation: none !important;
  will-change: auto !important;
}
[data-visual-performance="max"] .bg-center-atom .atom-ring,
[data-visual-performance="max"] .bg-center-atom .atom-ring .atom-electron {
  animation: none !important;
}
[data-visual-performance="max"] .bg-ambient,
[data-visual-performance="max"] .bg-ambient-spin {
  animation: none !important;
  will-change: auto !important;
}
[data-visual-performance="max"] .app-header {
  backdrop-filter: none !important;
}

/* Static ring replaces neon; add a simple border so controls stay readable */
[data-visual-performance="max"] .neon-cyan-chase,
[data-visual-performance="max"] .fc-panel.neon-cyan-chase,
[data-visual-performance="max"] .fc-upload-zone.neon-cyan-chase,
[data-visual-performance="max"] .fc-input.neon-cyan-chase,
[data-visual-performance="max"] .fc-textarea.neon-cyan-chase,
[data-visual-performance="max"] .fc-history-item.neon-cyan-chase,
[data-visual-performance="max"] .fc-deck-inner.neon-cyan-chase,
[data-visual-performance="max"] .convo-item.neon-cyan-chase,
[data-visual-performance="max"] .landing-input-shell.neon-cyan-chase,
[data-visual-performance="max"] .chat-input-wrap.neon-cyan-chase {
  border: 1px solid rgba(0, 200, 210, 0.42) !important;
  box-sizing: border-box;
}
[data-theme="light"][data-visual-performance="max"] .neon-cyan-chase,
[data-theme="light"][data-visual-performance="max"] .fc-panel.neon-cyan-chase,
[data-theme="light"][data-visual-performance="max"] .fc-upload-zone.neon-cyan-chase,
[data-theme="light"][data-visual-performance="max"] .fc-input.neon-cyan-chase,
[data-theme="light"][data-visual-performance="max"] .fc-textarea.neon-cyan-chase,
[data-theme="light"][data-visual-performance="max"] .fc-history-item.neon-cyan-chase,
[data-theme="light"][data-visual-performance="max"] .fc-deck-inner.neon-cyan-chase,
[data-theme="light"][data-visual-performance="max"] .convo-item.neon-cyan-chase,
[data-theme="light"][data-visual-performance="max"] .landing-input-shell.neon-cyan-chase,
[data-theme="light"][data-visual-performance="max"] .chat-input-wrap.neon-cyan-chase {
  border-color: rgba(0, 110, 105, 0.5) !important;
}

[data-visual-performance="max"] .chat-msg.streaming {
  animation: none !important;
}

/* Maximum: stop atom orbits (header + inline), thinking loader, typewriter cursor, ambient prism */
[data-visual-performance="max"] .atom-ring.ring-x,
[data-visual-performance="max"] .atom-ring.ring-y,
[data-visual-performance="max"] .atom-ring.ring-z {
  animation: none !important;
  will-change: auto !important;
}
[data-visual-performance="max"] .nexus-logo-loader .trace,
[data-visual-performance="max"] .nexus-logo-loader .trace-inner {
  animation: none !important;
}
[data-visual-performance="max"] .type-cursor {
  animation: none !important;
  opacity: 1;
}
[data-visual-performance="max"] .file-chip-loading .file-chip-preview-skeleton,
[data-visual-performance="max"] .file-chip-loading .file-chip-skeleton {
  animation: none !important;
}
[data-visual-performance="max"] .assistant-inline-atom.streaming {
  animation: none !important;
}
[data-visual-performance="max"] .nexus-quiz-option-btn.neon-cyan-chase {
  animation: none !important;
}
[data-visual-performance="max"] .chat-msg.assistant.streaming-live {
  animation: none !important;
}
[data-visual-performance="max"] .ai-thinking-floating {
  animation: none !important;
}

@media (max-width: 900px) {
  .dash-sidebar {
    width: 260px;
  }
}

@media (pointer: coarse) {
  .chat-attachments {
    min-height: 0;
  }
}

@media (max-width: 520px) {
  .app-header {
    padding: 0 6px 0 8px;
    gap: 4px;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  }
  .header-center-nav {
    gap: 2px;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  }
  .header-center-nav::-webkit-scrollbar {
    display: none;
  }
  .header-nav-pill {
    padding: 6px 7px;
    font-size: 0.72rem;
    border-radius: 8px;
  }
  .app-header-brand {
    font-size: 0.92rem;
    letter-spacing: 0.05em;
  }
  .header-atom {
    margin-right: 6px;
  }
  .app-header-end {
    gap: 4px;
  }
  .header-icon-btn,
  .header-sidebar-toggle {
    width: 40px;
    height: 40px;
  }
}

/* index + standalone nexus pages: full-width pills + no edge fade; overflow must not clip the More dropdown */
@media (max-width: 768px) {
  body:not([data-nexus-page]) .header-center-nav,
  body[data-nexus-page] .header-center-nav {
    overflow-x: visible;
    overflow-y: visible;
  }
}
@media (max-width: 520px) {
  body:not([data-nexus-page]) .header-center-nav,
  body[data-nexus-page] .header-center-nav {
    overflow-x: visible !important;
    overflow-y: visible !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
}

@media (max-width: 480px) {
  .app-header { padding: 0 6px; }
  .chat-input-wrap { padding: 8px 10px; gap: 8px; }
  .landing-input-shell { padding: 6px; }
}

@media (max-width: 760px) {
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    contain: layout paint;
  }
  .dash-sidebar:not(.collapsed) ~ .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  .chat-main {
    margin-left: 0;
    height: calc(100vh - 60px);
    min-height: 0;
    overflow: hidden;
  }
  #view-dashboard.view.active {
    display: block;
  }
}

@media (max-width: 768px) {
  .chat-messages {
    padding: 8px 6px 12px;
    gap: 10px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .chat-msg {
    max-width: 96%;
    padding: 9px 12px;
    font-size: 0.9rem;
    line-height: 1.42;
    border-radius: 12px;
  }
  .chat-msg.user {
    max-width: 92%;
  }
  .chat-msg.assistant {
    max-width: 98%;
    min-width: 0;
  }
  .chat-msg.assistant .chat-msg-body {
    font-size: 0.9rem;
    line-height: 1.45;
    min-height: 0;
  }
  .chat-input-area {
    padding: 8px 8px max(52px, calc(env(safe-area-inset-bottom) + 32px));
    width: 100%;
  }
  .chat-input-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    width: 100%;
    min-width: 0;
    padding: 6px 8px;
    gap: 6px;
  }
  .chat-input {
    font-size: 0.92rem;
  }
  .chat-input-btn {
    min-width: 40px;
    min-height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  [data-theme="dark"] #view-dashboard .chat-messages {
    margin: 6px 8px 4px;
  }
}

/* Modern top-right sun/moon toggle */
.theme-toggle {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 3000;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
  border: 1px solid var(--n-card-border);
  color: var(--n-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  cursor: pointer;
}

/* Fluid stream box growth while tokens arrive */
.chat-msg.assistant {
  overflow: hidden;
  width: fit-content;
  max-width: 85%;
  display: inline-block;
  position: relative;
  border-radius: 12px;
  transition: max-height 0.25s ease-out, min-height 0.2s ease, transform 0.2s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.chat-msg.assistant.streaming-live {
  min-height: 0;
  box-shadow: 0 0 0 1px rgba(120, 180, 255, 0.2);
  animation: streamBoxGlow 2s ease-in-out infinite;
}

.chat-msg.assistant .chat-msg-body {
  overflow-wrap: break-word;
  word-break: break-word;
}

@keyframes streamBoxGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(120, 180, 255, 0.2); }
  50% { box-shadow: 0 0 12px 2px rgba(120, 180, 255, 0.15); }
}

.fluid-stream {
  max-height: none;
}

/* Study / mobile: avoid collapsing streaming bubbles (replaces old soft-expand cap during tokens) */
body[data-nexus-page="study"] .chat-msg.assistant.fluid-stream,
body[data-nexus-page="study"] .chat-msg.assistant.streaming-live {
  max-height: none;
  min-height: 0;
}
@media (max-width: 768px) {
  body[data-nexus-page="study"] .chat-msg.assistant .chat-msg-body.streaming-expand {
    transition: none;
  }
}

.chat-msg.assistant.thinking .chat-msg-body {
  animation: thinkPulse 1.2s ease-in-out infinite;
}

.chat-msg.assistant.streaming-live .chat-msg-body {
  animation: liveTextPulse 1.4s ease-in-out infinite;
}

/* Screen-reader-only status (typing bubble has no visible text) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* iMessage-style typing bubble (purple theme) */
.ai-thinking-standalone {
  align-self: flex-start;
  margin: 4px 0 10px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: none;
  border: none;
  box-shadow: none;
  max-width: 100%;
}

.ai-typing-bubble {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  margin-bottom: 12px;
  padding: 11px 18px 12px;
  border-radius: 999px;
  background: #ececee;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .ai-typing-bubble {
  background: rgba(49, 46, 129, 0.55);
  border-color: rgba(167, 139, 250, 0.28);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.32);
}

/* Thought-bubble tail: two stacked circles (not a square chevron) */
.ai-typing-bubble__tail {
  position: absolute;
  left: 10px;
  bottom: -15px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  pointer-events: none;
}

.ai-typing-bubble__tail-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ececee;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  margin-top: -2px;
}

.ai-typing-bubble__tail-dot--sm {
  width: 7px;
  height: 7px;
  margin-left: 3px;
  margin-top: 1px;
}

[data-theme="dark"] .ai-typing-bubble__tail-dot {
  background: rgba(49, 46, 129, 0.55);
  border-color: rgba(167, 139, 250, 0.24);
  box-shadow: none;
}

.ai-typing-bubble__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.ai-typing-bubble__dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6b7280;
  opacity: 0.75;
  animation: aiTypingDotBob 0.9s ease-in-out infinite;
  transform-origin: center center;
}

.ai-typing-bubble__dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.ai-typing-bubble__dots span:nth-child(3) {
  animation-delay: 0.3s;
}

[data-theme="dark"] .ai-typing-bubble__dots span {
  background: #a5a0c8;
  opacity: 0.9;
}

/* Simple vertical bob, staggered */
@keyframes aiTypingDotBob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-typing-bubble__dots span {
    animation: none;
    transform: none;
  }
}

/* Study chat: comfortable tap targets + no horizontal overflow on phones */
@media (max-width: 768px), (pointer: coarse) {
  [data-nexus-page="study"] .ai-thinking-standalone {
    max-width: min(100%, calc(100vw - 1.5rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  }
  [data-nexus-page="study"] .ai-typing-bubble {
    min-height: 44px;
    min-width: 60px;
    padding: 14px 18px;
    box-sizing: border-box;
  }
  [data-nexus-page="study"] .chat-msg.assistant,
  [data-nexus-page="study"] .chat-msg.user {
    max-width: min(96%, calc(100vw - 0.75rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  }
  body[data-nexus-page="study"] .study-chat-messages {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
  }
  body[data-nexus-page="study"] .study-chat-area {
    padding-left: 0;
    padding-right: 0;
  }
  body[data-nexus-page="study"] #study-area[data-study-session-active="true"] .study-main-inner,
  body[data-nexus-page="study"] .study-main-inner {
    padding-left: 10px;
    padding-right: 10px;
  }
}

.ai-thinking-floating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 8px 0;
  padding: 2px 4px;
  align-self: flex-start;
  animation: thinkingFade 1.35s ease-in-out infinite;
}

.ai-thinking-floating .assistant-atom {
  filter: drop-shadow(0 0 8px rgba(159, 196, 255, 0.45));
}

.ai-thinking-label {
  color: #b8bbca;
  font-size: 0.92rem;
}

.ai-thinking-floating.thinking-complete .assistant-atom {
  animation: none;
  opacity: 0.65;
}

.ai-thinking-floating.thinking-complete .ai-thinking-label {
  opacity: 0.9;
}

.assistant-shell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.assistant-icon {
  width: 26px;
  min-width: 26px;
  height: 26px;
  margin-top: 2px;
}

.assistant-atom {
  width: 30px;
  height: 30px;
  position: relative;
  transform-style: preserve-3d;
  perspective: 180px;
  contain: layout style paint;
  will-change: auto;
}

.atom-nucleus {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 35%, #ffffff, #c9d1ff 62%, #8fa2ff 100%);
  box-shadow: 0 0 9px rgba(196, 214, 255, 0.9);
}

.atom-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 27px;
  height: 11px;
  border-radius: 50%;
  border: 1.7px solid rgba(179, 198, 255, 0.72);
  transform-style: preserve-3d;
  transform-origin: center center;
  contain: layout style;
  will-change: transform;
  backface-visibility: hidden;
}

.atom-ring .atom-electron {
  position: absolute;
  top: 50%;
  left: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 30% 30%, #ffffff, #9dd9ff 70%);
  box-shadow: 0 0 8px rgba(145, 212, 255, 0.75);
  transition: box-shadow 0.35s ease, filter 0.35s ease;
}

[data-theme="light"] .assistant-shell .assistant-atom .atom-nucleus,
[data-theme="light"] .ai-thinking-floating .assistant-atom .atom-nucleus {
  background: radial-gradient(circle at 35% 35%, #134e4a, #0d9488 48%, #115e59 100%);
  box-shadow: 0 0 10px rgba(13, 148, 136, 0.85), 0 0 18px rgba(17, 94, 89, 0.4);
}

[data-theme="light"] .assistant-shell .assistant-atom .atom-ring,
[data-theme="light"] .ai-thinking-floating .assistant-atom .atom-ring {
  border-color: rgba(15, 118, 110, 0.88);
}

[data-theme="light"] .assistant-shell .assistant-atom .atom-ring .atom-electron,
[data-theme="light"] .ai-thinking-floating .assistant-atom .atom-ring .atom-electron {
  background: radial-gradient(circle at 30% 30%, #ccfbf1, #2dd4bf 75%, #0f766e 100%);
  box-shadow: 0 0 7px rgba(45, 212, 191, 0.85);
}

[data-theme="light"] .ai-thinking-floating .assistant-atom {
  filter: drop-shadow(0 0 6px rgba(45, 212, 191, 0.35));
}

.ring-x {
  transform: translate(-50%, -50%) rotateX(72deg) translateZ(0);
  animation: orbitSpinX 3.5s linear infinite;
}

.ring-y {
  transform: translate(-50%, -50%) rotateY(72deg) translateZ(0);
  animation: orbitSpinY 4.1s linear infinite;
}

.ring-z {
  transform: translate(-50%, -50%) rotateZ(70deg) translateZ(0);
  animation: orbitSpinZ 3.8s linear infinite;
}

@keyframes thinkPulse {
  0% { color: #9ea0af; }
  50% { color: #ffffff; }
  100% { color: #9ea0af; }
}

@keyframes liveTextPulse {
  0% { color: #b5b8c5; }
  50% { color: #f7f8ff; }
  100% { color: #b5b8c5; }
}

@keyframes orbitSpinX {
  from { transform: translate(-50%, -50%) rotateX(72deg) rotateZ(0deg); }
  to { transform: translate(-50%, -50%) rotateX(72deg) rotateZ(360deg); }
}

@keyframes orbitSpinY {
  from { transform: translate(-50%, -50%) rotateY(72deg) rotateZ(0deg); }
  to { transform: translate(-50%, -50%) rotateY(72deg) rotateZ(-360deg); }
}

@keyframes orbitSpinZ {
  from { transform: translate(-50%, -50%) rotateZ(70deg) rotateX(0deg); }
  to { transform: translate(-50%, -50%) rotateZ(70deg) rotateX(360deg); }
}

@keyframes thinkingFade {
  0% { opacity: 0.58; }
  50% { opacity: 1; }
  100% { opacity: 0.58; }
}

/* Smoother global timings (uses :root --transition) */

/* Modal animation fix: avoid slow/glitchy transitions */
.modal {
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.modal-backdrop {
  opacity: 0;
  transition: opacity 0.18s ease;
}

.modal.active .modal-backdrop {
  opacity: 1;
}

.modal-card {
  transform: translateY(12px) scale(0.985);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.modal.active .modal-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Theme switch transition */
html {
  transition: color 0.45s ease;
}

body,
.view,
.sidebar,
.chat-main,
.chat-messages,
.chat-input-wrap,
.modal-card,
.theme-toggle {
  transition:
    background 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  html,
  body,
  .view,
  .sidebar,
  .chat-main,
  .chat-messages,
  .chat-input-wrap,
  .modal-card,
  .theme-toggle {
    transition-duration: 0.01ms !important;
  }
}

.theme-toggle.switching {
  transform: rotate(180deg) scale(1.06);
}

/* Keep textbox clean (no embedded logo overlays) */
.chat-input-wrap::before,
.landing-input-shell::before {
  content: none !important;
  display: none !important;
}

.soft-expand {
  max-height: 60px;
  transition: max-height 0.24s ease, transform 0.2s ease, opacity 0.2s ease;
}

.admin-monitor {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 420px;
  height: 310px;
  z-index: 3300;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--n-card-border);
  background: rgba(16, 18, 25, 0.86);
  color: var(--n-text);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.35);
  resize: both;
  overflow: auto;
  will-change: auto;
}

.admin-monitor.dragging,
.admin-monitor.resizing {
  transition: none !important;
}

.admin-monitor-handle {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  cursor: move;
  background: rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid var(--n-card-border);
  user-select: none;
}

.admin-monitor-handle button {
  border: none;
  background: transparent;
  color: var(--n-text);
  font-size: 1rem;
  cursor: pointer;
}

.admin-monitor-body {
  height: calc(100% - 38px);
  overflow: auto;
  padding: 10px;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
}

.admin-stat {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 8px;
}

.admin-stat-wide {
  grid-column: 1 / -1;
  flex-wrap: wrap;
}

.admin-gemini-compress {
  font-size: 0.78rem;
  word-break: break-word;
  max-width: 72%;
  text-align: right;
  font-weight: 500;
}

.admin-tts-block {
  flex-wrap: wrap;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.admin-tts-block > span:first-of-type { font-weight: 500; }
.admin-tts-block .admin-tts-error-label { font-size: 0.78rem; opacity: 0.85; }
.admin-tts-error {
  font-size: 0.8rem;
  word-break: break-word;
  color: #f0a0a0;
  max-width: 100%;
}

.admin-blob-block {
  flex-wrap: wrap;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.admin-blob-block > span:first-of-type {
  font-weight: 500;
}
.admin-blob-client-error {
  font-size: 0.78rem;
  word-break: break-word;
  color: #f0b090;
  max-width: 100%;
}

.admin-gemini-error {
  font-size: 0.78rem;
  word-break: break-word;
  color: #a8d4ff;
  max-width: 100%;
}

.admin-activity-feed {
  min-height: 100px;
  max-height: 180px;
  overflow: auto;
  padding: 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-activity-item {
  font-size: 0.78rem;
  margin-bottom: 5px;
  color: #d7dbff;
}

.admin-monitor-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, rgba(155, 176, 255, 0.8) 50%);
}

.admin-monitor-fab {
  position: fixed;
  right: 16px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 3299;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(167, 139, 250, 0.45);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(99, 102, 241, 0.28));
  color: #f5f3ff;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(91, 33, 182, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-monitor-fab:hover {
  filter: brightness(1.08);
  box-shadow: 0 10px 32px rgba(139, 92, 246, 0.45);
}
body[data-user-logged-in="true"][data-current-view="dashboard"] .admin-monitor-fab:not(.hidden) {
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 769px) {
  body[data-user-logged-in="true"][data-current-view="dashboard"] .admin-monitor-fab:not(.hidden) {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
}
[data-theme="light"] .admin-monitor-fab {
  color: #4c1d95;
  border-color: rgba(91, 33, 182, 0.35);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(79, 70, 229, 0.16));
  box-shadow: 0 6px 22px rgba(79, 70, 229, 0.2);
}

/* Dashboard: single scroll region = .chat-messages (chat-main is flex column, height locked below) */
#view-dashboard .chat-messages {
  padding-top: 12px;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Step 5 structural + integrity overrides */
.app-header {
  height: 60px !important;
  z-index: 10000 !important;
  background: linear-gradient(180deg, rgba(40, 44, 58, 0.98) 0%, rgba(2, 3, 8, 0.96) 100%) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

[data-theme="light"] .app-header {
  background: linear-gradient(180deg, rgba(245, 247, 250, 0.98) 0%, rgba(240, 242, 245, 0.96) 100%) !important;
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .sidebar-email {
  color: var(--text-muted);
}

#view-dashboard {
  margin-top: 0 !important;
  padding-top: 0 !important;
  overflow: hidden !important;
}

#view-dashboard .dash-layout .chat-main {
  padding-top: 60px !important;
  height: 100vh !important;
  height: 100dvh !important;
  flex: 1;
  min-width: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--n-bg-deep) 88%, rgba(99, 102, 241, 0.14)) 0%,
    color-mix(in srgb, var(--n-bg-deep) 96%, rgba(139, 92, 246, 0.06)) 50%,
    var(--n-bg-deep) 100%
  ) !important;
  backdrop-filter: none;
}

[data-theme="light"] #view-dashboard .dash-layout .chat-main {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--n-bg-raised) 96%, rgba(124, 58, 237, 0.06)) 0%,
    color-mix(in srgb, var(--n-bg-deep) 98%, rgba(91, 33, 182, 0.04)) 100%
  ) !important;
}

.chat-input-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.landing-input-shell:not(.hero-input-inside) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.chat-msg.assistant {
  width: 100%;
  max-width: 100%;
  display: block;
  box-sizing: border-box;
}

.chat-msg.assistant .chat-msg-body {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-height: 0;
  max-height: none;
  overflow: visible;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.chat-msg.assistant.streaming-live .chat-msg-body {
  min-height: 0;
  height: auto;
}

.assistant-row .chat-msg {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.chat-msg.user .chat-msg-user-text { margin-bottom: 4px; }
.chat-msg-file-preview {
  margin-top: 6px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  max-width: 280px;
  border: 1px solid var(--border-glass);
}
.chat-msg-preview-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  background: var(--bg-glass);
}
.chat-msg-file-preview.preview-failed .chat-msg-preview-img { display: none; }
.chat-msg-file-preview.preview-failed::after {
  content: "Preview unavailable";
  display: block;
  padding: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.chat-msg-body.streaming-expand {
  min-height: 0;
  display: inline-block;
  vertical-align: top;
  transition: min-height 0.2s ease-out, padding 0.2s ease-out;
}

.chat-msg.streaming-live .chat-msg-body {
  transition: min-height 0.18s ease-out, padding 0.18s ease-out;
}

/* Remove any legacy assistant watermark logo */
.chat-msg.assistant .chat-msg-body::before {
  content: none !important;
  display: none !important;
  background-image: none !important;
}

.assistant-row {
  width: 100%;
  display: block;
}

.assistant-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.assistant-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  margin-top: 0;
  margin-left: auto;
}

.assistant-action-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 6px;
  font-size: 0.78rem;
  line-height: 1;
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.7;
}

.assistant-action-btn:hover {
  color: var(--text);
  opacity: 1;
}

.assistant-copy-btn--flash {
  animation: assistantCopyFlash 0.55s ease;
}

@keyframes assistantCopyFlash {
  0%,
  100% {
    opacity: 1;
    color: var(--text-muted);
    transform: scale(1);
  }
  45% {
    opacity: 1;
    color: var(--accent);
    transform: scale(1.12);
  }
}

.assistant-copy-btn.hidden,
.assistant-speak-btn.hidden {
  display: none;
}

.inline-formula {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid var(--border-glass);
  background: var(--bg-glass);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.92em;
}

.file-pulse-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  margin-right: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  border: 1px solid var(--border-glass);
  background: var(--bg-glass);
  animation: filePulse 1.1s ease-in-out infinite;
}

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

.assistant-inline-atom {
  width: 24px;
  min-width: 24px;
  height: 24px;
  margin-top: 0;
  opacity: 0.85;
}

.assistant-inline-atom svg {
  width: 24px;
  height: 24px;
}

.assistant-inline-atom.streaming {
  animation: atomPulse 1.25s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes atomPulse {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}

/* Interactive Quiz */
.nexus-quiz-collapsible {
  margin: 12px 0;
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: var(--radius);
  overflow: hidden;
}

.nexus-quiz-collapsible-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(99, 102, 241, 0.1);
  border: none;
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
  text-align: left;
}

.nexus-quiz-collapsible-header:hover {
  background: rgba(99, 102, 241, 0.18);
}

.nexus-quiz-collapsible-icon {
  font-size: 0.8rem;
  opacity: 0.9;
}

.nexus-quiz-collapsible-body {
  padding: 0;
}

.nexus-quiz-collapsed .nexus-quiz-collapsible-body {
  display: none;
}

.nexus-quiz-form {
  margin: 16px 0;
  padding: 16px;
  border-radius: var(--radius);
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.2);
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.nexus-quiz-q {
  margin-bottom: 16px;
}

.nexus-quiz-q:last-of-type {
  margin-bottom: 12px;
}

.nexus-quiz-q.nexus-quiz-q-incorrect {
  padding: 10px 12px;
  margin-left: -4px;
  margin-right: -4px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(239, 68, 68, 0.55);
  background: rgba(239, 68, 68, 0.08);
}

.nexus-quiz-q.nexus-quiz-q-correct {
  padding: 10px 12px;
  margin-left: -4px;
  margin-right: -4px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.06);
}

.nexus-quiz-q-text {
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--text);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 8px;
}

.nexus-quiz-q-num {
  font-weight: 700;
  line-height: 1.4;
}

.nexus-quiz-q-main {
  min-width: 0;
}

.nexus-quiz-option-wrap {
  display: block;
  margin: 0;
}

.nexus-quiz-option-label {
  display: block;
  width: 100%;
  text-align: left;
  pointer-events: none;
  line-height: 1.35;
}
.nexus-quiz-option-btn {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: none;
  background: rgba(99, 102, 241, 0.1);
  color: var(--text);
  font-size: 0.95rem;
  cursor: pointer;
  pointer-events: auto;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  width: 100%;
  text-align: left;
}

.nexus-quiz-option-btn:hover {
  background: rgba(99, 102, 241, 0.2);
  border-color: var(--accent);
}

.nexus-quiz-option-btn.selected {
  background: rgba(99, 102, 241, 0.35);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.nexus-quiz-option-btn.neon-cyan-chase.selected {
  background: transparent !important;
  background-image: none !important;
  color: var(--accent);
  box-shadow: none !important;
}

.nexus-quiz-option-btn.nexus-quiz-correct {
  background: rgba(34, 197, 94, 0.25);
  border-color: rgba(34, 197, 94, 0.6);
  color: #22c55e;
}

.nexus-quiz-option-btn.nexus-quiz-wrong {
  background: rgba(239, 68, 68, 0.38);
  border-color: rgba(239, 68, 68, 0.85);
  color: #fecaca;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35);
}

.nexus-quiz-option-btn:disabled {
  cursor: default;
  pointer-events: none;
}

.nexus-quiz-option-btn .nexus-quiz-mark {
  margin-left: 8px;
  font-weight: 800;
}

.nexus-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-left: 0;
}

.nexus-quiz-submit-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.nexus-quiz-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(99, 102, 241, 0.3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: nexus-quiz-spin 0.8s linear infinite;
}

@keyframes nexus-quiz-spin {
  to { transform: rotate(360deg); }
}

.nexus-quiz-submit {
  margin-top: 0;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  border: none;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  pointer-events: auto;
  transition: transform var(--transition), opacity var(--transition);
}

.nexus-quiz-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  opacity: 0.95;
}

.nexus-quiz-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.nexus-quiz-performance-summary {
  margin-bottom: 12px;
  font-weight: 600;
}

.nexus-quiz-your-answers {
  margin-top: 6px;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-muted);
}

.nexus-quiz-summary-correct {
  color: #22c55e;
}

.nexus-quiz-summary-wrong {
  color: #ef4444;
}

.nexus-quiz-focus-label {
  font-weight: 600;
  color: var(--text);
}

.nexus-quiz-focus-topics {
  font-weight: 500;
  color: var(--accent);
  font-style: italic;
}

.nexus-quiz-feedback {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(99, 102, 241, 0.25);
}

.nexus-quiz-feedback.nexus-quiz-error {
  color: var(--danger);
}

/* Simple math (Unicode + inline) */
.math-inline {
  font-style: italic;
  white-space: nowrap;
}

.math-inline sup {
  font-size: 0.75em;
  vertical-align: super;
  font-style: normal;
}

.math-frac {
  display: inline;
}

.math-frac span {
  font-style: italic;
}

/* ======================================================================
   SAFE RUNTIME FIXES
   - header settings: hidden on desktop (sidebar ⚙); visible on small screens
   - improve upload remove button visibility
   - gentle mobile readability boost
   ====================================================================== */

#header-settings {
  display: none !important;
}

@media (max-width: 760px) {
  body[data-current-view="dashboard"] #header-settings {
    display: flex !important;
  }
}

.file-chip-remove {
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  background: rgba(18, 22, 34, 0.82) !important;
  color: #ffffff !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.file-chip-remove:hover {
  background: rgba(127, 54, 242, 0.88) !important;
}

@media (max-width: 900px) {
  .chat-msg .chat-msg-body,
  .chat-input,
  .sidebar-btn,
  .sidebar-email {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

  .chat-input-btn {
    width: 40px !important;
    height: 40px !important;
  }
}

/* Chrome: borderless panels (tokens + modal shadow only) */

.modal-card.glass {
  border: none !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

[data-theme="light"] .modal-card.glass:not(.auth-modal-card) {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
}

/* ---------- Custom neon trail presets (Settings → Neon trail color) ---------- */
html[data-trail-preset="cyan"] {
  --neon-trail-a: rgba(0, 255, 245, 0.82);
  --neon-trail-b: #5fffd9;
  --neon-trail-c: #e6fffd;
  --neon-trail-d: rgba(0, 255, 230, 0.98);
  --neon-cyan-hot: #7fffeb;
  --neon-cyan-soft: rgba(0, 255, 245, 0.62);
}
html[data-theme="light"][data-trail-preset="cyan"] {
  --neon-trail-a: rgba(0, 140, 130, 0.95);
  --neon-trail-b: #00d4be;
  --neon-trail-c: #b6fff6;
  --neon-trail-d: rgba(0, 120, 110, 0.98);
  --neon-cyan-hot: #00b4a6;
  --neon-cyan-soft: rgba(0, 150, 140, 0.55);
}

html[data-trail-preset="violet"] {
  --neon-trail-a: rgba(167, 139, 250, 0.72);
  --neon-trail-b: #c4b5fd;
  --neon-trail-c: #ede9fe;
  --neon-trail-d: rgba(139, 92, 246, 0.92);
  --neon-cyan-hot: #ddd6fe;
  --neon-cyan-soft: rgba(167, 139, 250, 0.5);
}
html[data-theme="light"][data-trail-preset="violet"] {
  --neon-trail-a: rgba(109, 40, 217, 0.78);
  --neon-trail-b: #8b5cf6;
  --neon-trail-c: #e9d5ff;
  --neon-trail-d: rgba(91, 33, 182, 0.95);
  --neon-cyan-hot: #7c3aed;
  --neon-cyan-soft: rgba(124, 58, 237, 0.45);
}

html[data-trail-preset="rose"] {
  --neon-trail-a: rgba(251, 113, 133, 0.75);
  --neon-trail-b: #fda4af;
  --neon-trail-c: #ffe4e6;
  --neon-trail-d: rgba(244, 63, 94, 0.9);
  --neon-cyan-hot: #fecdd3;
  --neon-cyan-soft: rgba(251, 113, 133, 0.48);
}
html[data-theme="light"][data-trail-preset="rose"] {
  --neon-trail-a: rgba(225, 29, 72, 0.78);
  --neon-trail-b: #fb7185;
  --neon-trail-c: #ffe4e9;
  --neon-trail-d: rgba(190, 18, 60, 0.92);
  --neon-cyan-hot: #f43f5e;
  --neon-cyan-soft: rgba(244, 63, 94, 0.42);
}

html[data-trail-preset="gold"] {
  --neon-trail-a: rgba(250, 204, 21, 0.75);
  --neon-trail-b: #fde047;
  --neon-trail-c: #fef9c3;
  --neon-trail-d: rgba(234, 179, 8, 0.92);
  --neon-cyan-hot: #facc15;
  --neon-cyan-soft: rgba(250, 204, 21, 0.45);
}
html[data-theme="light"][data-trail-preset="gold"] {
  --neon-trail-a: rgba(180, 130, 0, 0.85);
  --neon-trail-b: #eab308;
  --neon-trail-c: #fef08a;
  --neon-trail-d: rgba(161, 98, 7, 0.95);
  --neon-cyan-hot: #ca8a04;
  --neon-cyan-soft: rgba(234, 179, 8, 0.5);
}

html[data-trail-preset="sky"] {
  --neon-trail-a: rgba(56, 189, 248, 0.72);
  --neon-trail-b: #7dd3fc;
  --neon-trail-c: #e0f2fe;
  --neon-trail-d: rgba(14, 165, 233, 0.92);
  --neon-cyan-hot: #bae6fd;
  --neon-cyan-soft: rgba(56, 189, 248, 0.48);
}
html[data-theme="light"][data-trail-preset="sky"] {
  --neon-trail-a: rgba(2, 132, 199, 0.82);
  --neon-trail-b: #38bdf8;
  --neon-trail-c: #e0f2fe;
  --neon-trail-d: rgba(3, 105, 161, 0.95);
  --neon-cyan-hot: #0ea5e9;
  --neon-cyan-soft: rgba(14, 165, 233, 0.45);
}

html[data-trail-preset="lime"] {
  --neon-trail-a: rgba(163, 230, 53, 0.72);
  --neon-trail-b: #bef264;
  --neon-trail-c: #ecfccb;
  --neon-trail-d: rgba(132, 204, 22, 0.9);
  --neon-cyan-hot: #d9f99d;
  --neon-cyan-soft: rgba(163, 230, 53, 0.45);
}
html[data-theme="light"][data-trail-preset="lime"] {
  --neon-trail-a: rgba(77, 124, 15, 0.82);
  --neon-trail-b: #84cc16;
  --neon-trail-c: #ecfccb;
  --neon-trail-d: rgba(63, 98, 18, 0.95);
  --neon-cyan-hot: #65a30d;
  --neon-cyan-soft: rgba(132, 204, 22, 0.42);
}

/* ---------- Sidebar conversation rows: clearer in light & dark ---------- */
[data-theme="light"] .convo-item:not(.neon-cyan-chase) {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(15, 23, 42, 0.09);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .convo-item:not(.neon-cyan-chase):hover {
  background: rgba(248, 250, 252, 1);
  border-color: rgba(79, 70, 229, 0.32);
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.1);
}

[data-theme="light"] .convo-item:not(.neon-cyan-chase).active {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.11), rgba(45, 212, 191, 0.08));
  border-color: rgba(79, 70, 229, 0.5);
  box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.12);
}

[data-theme="dark"] .convo-item:not(.neon-cyan-chase) {
  background: rgba(18, 22, 34, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .convo-item:not(.neon-cyan-chase):hover {
  background: rgba(30, 36, 52, 0.92);
  border-color: rgba(129, 140, 248, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .convo-item:not(.neon-cyan-chase).active {
  background: rgba(99, 102, 241, 0.24);
  border-color: rgba(165, 180, 252, 0.55);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.35), 0 4px 14px rgba(0, 0, 0, 0.25);
}

.convo-item.neon-cyan-chase.active {
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.45), 0 0 16px rgba(99, 102, 241, 0.12);
}

[data-theme="light"] .convo-item.neon-cyan-chase.active {
  box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.4), 0 0 18px rgba(79, 70, 229, 0.1);
}

/* ---------- Quiz / message diagrams: readable SVG, no cramped labels ---------- */
.nexus-quiz-q-text svg,
.chat-msg.assistant .chat-msg-body svg {
  display: block;
  width: 100%;
  max-width: min(100%, 420px);
  height: auto;
  max-height: min(50vh, 280px);
  margin: 10px 0 12px;
  overflow: visible;
  flex-shrink: 0;
}

.nexus-quiz-q-text {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.nexus-quiz-q-text svg text,
.chat-msg.assistant .chat-msg-body svg text {
  paint-order: stroke fill;
  stroke: rgba(15, 17, 20, 0.92);
  stroke-width: 0.28px;
  stroke-linejoin: round;
}

[data-theme="light"] .nexus-quiz-q-text svg text,
[data-theme="light"] .chat-msg.assistant .chat-msg-body svg text {
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 0.35px;
}

.nexus-quiz-q-text pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 520px) {
  .nexus-quiz-q-text svg,
  .chat-msg.assistant .chat-msg-body svg {
    max-width: 100%;
    max-height: min(42vh, 240px);
  }
}

/* ---------- Hover shine presets (Settings) — shine + diagonal sweep ---------- */
html[data-hover-preset="cyan"] {
  --hover-shine-mid: rgba(0, 255, 235, 0.24);
  --hover-shine-mid-soft: rgba(0, 255, 235, 0.2);
  --hover-sweep-a: rgba(0, 58, 72, 0.96);
  --hover-sweep-b: rgba(0, 190, 205, 0.4);
  --hover-sweep-c: rgba(0, 255, 248, 0.62);
  --hover-sweep-core: rgba(255, 255, 255, 0.48);
  --hover-sweep-fill: rgba(0, 75, 92, 0.82);
  --hover-sweep-fill2: rgba(0, 75, 92, 0.8);
  --hover-sweep-glow-in: rgba(0, 255, 245, 0.22);
  --hover-sweep-glow-white: rgba(255, 255, 255, 0.07);
  --hover-sweep-glow-out: rgba(0, 255, 245, 0.35);
  --hover-sweep-glow-in2: rgba(0, 255, 245, 0.2);
  --hover-sweep-glow-white2: rgba(255, 255, 255, 0.06);
  --hover-sweep-glow-out2: rgba(0, 255, 245, 0.32);
  --hover-sweep-drop1: rgba(0, 255, 245, 0.45);
  --hover-sweep-drop2: rgba(180, 255, 255, 0.12);
  --hover-sweep-drop1b: rgba(0, 255, 245, 0.4);
  --hover-sweep-drop2b: rgba(200, 255, 255, 0.1);
}
html[data-theme="light"][data-hover-preset="cyan"] {
  --hover-shine-mid: rgba(0, 160, 175, 0.3);
  --hover-shine-mid-soft: rgba(0, 160, 180, 0.24);
  --hover-sweep-a: rgba(0, 120, 130, 0.42);
  --hover-sweep-b: rgba(0, 200, 210, 0.38);
  --hover-sweep-c: rgba(0, 230, 235, 0.55);
  --hover-sweep-core: rgba(255, 255, 255, 0.55);
  --hover-sweep-fill: rgba(0, 140, 150, 0.32);
  --hover-sweep-fill2: rgba(0, 145, 155, 0.3);
  --hover-sweep-glow-in: rgba(0, 220, 230, 0.2);
  --hover-sweep-glow-white: rgba(255, 255, 255, 0.12);
  --hover-sweep-glow-out: rgba(0, 200, 210, 0.28);
  --hover-sweep-glow-in2: rgba(0, 220, 230, 0.18);
  --hover-sweep-glow-white2: rgba(255, 255, 255, 0.14);
  --hover-sweep-glow-out2: rgba(0, 195, 205, 0.26);
  --hover-sweep-drop1: rgba(0, 190, 200, 0.35);
  --hover-sweep-drop2: rgba(0, 160, 175, 0.18);
  --hover-sweep-drop1b: rgba(0, 190, 200, 0.32);
  --hover-sweep-drop2b: rgba(200, 240, 245, 0.2);
}
html[data-hover-preset="violet"] {
  --hover-shine-mid: rgba(167, 139, 250, 0.32);
  --hover-shine-mid-soft: rgba(167, 139, 250, 0.26);
  --hover-sweep-a: rgba(46, 16, 82, 0.96);
  --hover-sweep-b: rgba(124, 58, 237, 0.42);
  --hover-sweep-c: rgba(167, 139, 250, 0.65);
  --hover-sweep-core: rgba(255, 255, 255, 0.5);
  --hover-sweep-fill: rgba(76, 29, 149, 0.86);
  --hover-sweep-fill2: rgba(70, 26, 138, 0.84);
  --hover-sweep-glow-in: rgba(167, 139, 250, 0.24);
  --hover-sweep-glow-white: rgba(255, 255, 255, 0.08);
  --hover-sweep-glow-out: rgba(139, 92, 246, 0.4);
  --hover-sweep-glow-in2: rgba(167, 139, 250, 0.2);
  --hover-sweep-glow-white2: rgba(255, 255, 255, 0.07);
  --hover-sweep-glow-out2: rgba(124, 58, 237, 0.36);
  --hover-sweep-drop1: rgba(167, 139, 250, 0.48);
  --hover-sweep-drop2: rgba(221, 214, 254, 0.14);
  --hover-sweep-drop1b: rgba(139, 92, 246, 0.42);
  --hover-sweep-drop2b: rgba(237, 233, 254, 0.12);
}
html[data-theme="light"][data-hover-preset="violet"] {
  --hover-shine-mid: rgba(109, 40, 217, 0.32);
  --hover-shine-mid-soft: rgba(91, 33, 182, 0.28);
  --hover-sweep-a: rgba(91, 33, 182, 0.4);
  --hover-sweep-b: rgba(124, 58, 237, 0.38);
  --hover-sweep-c: rgba(167, 139, 250, 0.52);
  --hover-sweep-core: rgba(255, 255, 255, 0.58);
  --hover-sweep-fill: rgba(109, 40, 217, 0.32);
  --hover-sweep-fill2: rgba(105, 38, 210, 0.3);
  --hover-sweep-glow-in: rgba(167, 139, 250, 0.2);
  --hover-sweep-glow-white: rgba(255, 255, 255, 0.12);
  --hover-sweep-glow-out: rgba(124, 58, 237, 0.3);
  --hover-sweep-glow-in2: rgba(167, 139, 250, 0.18);
  --hover-sweep-glow-white2: rgba(255, 255, 255, 0.14);
  --hover-sweep-glow-out2: rgba(91, 33, 182, 0.28);
  --hover-sweep-drop1: rgba(109, 40, 217, 0.36);
  --hover-sweep-drop2: rgba(167, 139, 250, 0.2);
  --hover-sweep-drop1b: rgba(91, 33, 182, 0.34);
  --hover-sweep-drop2b: rgba(237, 233, 254, 0.18);
}
html[data-hover-preset="rose"] {
  --hover-shine-mid: rgba(251, 113, 133, 0.32);
  --hover-shine-mid-soft: rgba(251, 113, 133, 0.26);
  --hover-sweep-a: rgba(88, 12, 36, 0.96);
  --hover-sweep-b: rgba(225, 29, 72, 0.42);
  --hover-sweep-c: rgba(251, 113, 133, 0.65);
  --hover-sweep-core: rgba(255, 255, 255, 0.5);
  --hover-sweep-fill: rgba(136, 19, 55, 0.86);
  --hover-sweep-fill2: rgba(128, 18, 52, 0.84);
  --hover-sweep-glow-in: rgba(251, 113, 133, 0.24);
  --hover-sweep-glow-white: rgba(255, 255, 255, 0.08);
  --hover-sweep-glow-out: rgba(244, 63, 94, 0.4);
  --hover-sweep-glow-in2: rgba(251, 113, 133, 0.2);
  --hover-sweep-glow-white2: rgba(255, 255, 255, 0.07);
  --hover-sweep-glow-out2: rgba(225, 29, 72, 0.36);
  --hover-sweep-drop1: rgba(251, 113, 133, 0.48);
  --hover-sweep-drop2: rgba(255, 228, 230, 0.14);
  --hover-sweep-drop1b: rgba(244, 63, 94, 0.42);
  --hover-sweep-drop2b: rgba(255, 241, 242, 0.12);
}
html[data-theme="light"][data-hover-preset="rose"] {
  --hover-shine-mid: rgba(225, 29, 72, 0.3);
  --hover-shine-mid-soft: rgba(190, 18, 60, 0.26);
  --hover-sweep-a: rgba(159, 18, 57, 0.42);
  --hover-sweep-b: rgba(225, 29, 72, 0.38);
  --hover-sweep-c: rgba(251, 113, 133, 0.52);
  --hover-sweep-core: rgba(255, 255, 255, 0.58);
  --hover-sweep-fill: rgba(190, 18, 60, 0.32);
  --hover-sweep-fill2: rgba(185, 17, 58, 0.3);
  --hover-sweep-glow-in: rgba(251, 113, 133, 0.2);
  --hover-sweep-glow-white: rgba(255, 255, 255, 0.12);
  --hover-sweep-glow-out: rgba(225, 29, 72, 0.3);
  --hover-sweep-glow-in2: rgba(251, 113, 133, 0.18);
  --hover-sweep-glow-white2: rgba(255, 255, 255, 0.14);
  --hover-sweep-glow-out2: rgba(159, 18, 57, 0.28);
  --hover-sweep-drop1: rgba(190, 18, 60, 0.36);
  --hover-sweep-drop2: rgba(251, 113, 133, 0.2);
  --hover-sweep-drop1b: rgba(159, 18, 57, 0.34);
  --hover-sweep-drop2b: rgba(255, 228, 230, 0.18);
}
html[data-hover-preset="gold"] {
  --hover-shine-mid: rgba(250, 204, 21, 0.34);
  --hover-shine-mid-soft: rgba(250, 204, 21, 0.28);
  --hover-sweep-a: rgba(75, 52, 6, 0.96);
  --hover-sweep-b: rgba(202, 138, 4, 0.45);
  --hover-sweep-c: rgba(250, 204, 21, 0.68);
  --hover-sweep-core: rgba(255, 255, 255, 0.52);
  --hover-sweep-fill: rgba(113, 63, 18, 0.86);
  --hover-sweep-fill2: rgba(105, 58, 16, 0.84);
  --hover-sweep-glow-in: rgba(250, 204, 21, 0.26);
  --hover-sweep-glow-white: rgba(255, 255, 255, 0.08);
  --hover-sweep-glow-out: rgba(234, 179, 8, 0.42);
  --hover-sweep-glow-in2: rgba(250, 204, 21, 0.22);
  --hover-sweep-glow-white2: rgba(255, 255, 255, 0.07);
  --hover-sweep-glow-out2: rgba(202, 138, 4, 0.38);
  --hover-sweep-drop1: rgba(250, 204, 21, 0.5);
  --hover-sweep-drop2: rgba(254, 243, 199, 0.16);
  --hover-sweep-drop1b: rgba(234, 179, 8, 0.44);
  --hover-sweep-drop2b: rgba(255, 251, 235, 0.12);
}
html[data-theme="light"][data-hover-preset="gold"] {
  --hover-shine-mid: rgba(180, 130, 0, 0.34);
  --hover-shine-mid-soft: rgba(161, 98, 7, 0.28);
  --hover-sweep-a: rgba(146, 64, 14, 0.42);
  --hover-sweep-b: rgba(202, 138, 4, 0.4);
  --hover-sweep-c: rgba(250, 204, 21, 0.55);
  --hover-sweep-core: rgba(255, 255, 255, 0.58);
  --hover-sweep-fill: rgba(161, 98, 7, 0.34);
  --hover-sweep-fill2: rgba(155, 94, 7, 0.32);
  --hover-sweep-glow-in: rgba(250, 204, 21, 0.22);
  --hover-sweep-glow-white: rgba(255, 255, 255, 0.12);
  --hover-sweep-glow-out: rgba(202, 138, 4, 0.32);
  --hover-sweep-glow-in2: rgba(250, 204, 21, 0.2);
  --hover-sweep-glow-white2: rgba(255, 255, 255, 0.14);
  --hover-sweep-glow-out2: rgba(146, 64, 14, 0.3);
  --hover-sweep-drop1: rgba(161, 98, 7, 0.38);
  --hover-sweep-drop2: rgba(250, 204, 21, 0.22);
  --hover-sweep-drop1b: rgba(146, 64, 14, 0.34);
  --hover-sweep-drop2b: rgba(254, 243, 199, 0.2);
}
html[data-hover-preset="sky"] {
  --hover-shine-mid: rgba(56, 189, 248, 0.32);
  --hover-shine-mid-soft: rgba(56, 189, 248, 0.26);
  --hover-sweep-a: rgba(12, 54, 92, 0.96);
  --hover-sweep-b: rgba(14, 165, 233, 0.42);
  --hover-sweep-c: rgba(56, 189, 248, 0.65);
  --hover-sweep-core: rgba(255, 255, 255, 0.5);
  --hover-sweep-fill: rgba(7, 89, 133, 0.86);
  --hover-sweep-fill2: rgba(6, 82, 125, 0.84);
  --hover-sweep-glow-in: rgba(56, 189, 248, 0.24);
  --hover-sweep-glow-white: rgba(255, 255, 255, 0.08);
  --hover-sweep-glow-out: rgba(14, 165, 233, 0.4);
  --hover-sweep-glow-in2: rgba(56, 189, 248, 0.2);
  --hover-sweep-glow-white2: rgba(255, 255, 255, 0.07);
  --hover-sweep-glow-out2: rgba(2, 132, 199, 0.36);
  --hover-sweep-drop1: rgba(56, 189, 248, 0.48);
  --hover-sweep-drop2: rgba(224, 242, 254, 0.14);
  --hover-sweep-drop1b: rgba(14, 165, 233, 0.42);
  --hover-sweep-drop2b: rgba(186, 230, 253, 0.12);
}
html[data-theme="light"][data-hover-preset="sky"] {
  --hover-shine-mid: rgba(2, 132, 199, 0.32);
  --hover-shine-mid-soft: rgba(3, 105, 161, 0.28);
  --hover-sweep-a: rgba(3, 105, 161, 0.42);
  --hover-sweep-b: rgba(14, 165, 233, 0.38);
  --hover-sweep-c: rgba(56, 189, 248, 0.52);
  --hover-sweep-core: rgba(255, 255, 255, 0.58);
  --hover-sweep-fill: rgba(2, 132, 199, 0.32);
  --hover-sweep-fill2: rgba(2, 125, 190, 0.3);
  --hover-sweep-glow-in: rgba(56, 189, 248, 0.2);
  --hover-sweep-glow-white: rgba(255, 255, 255, 0.12);
  --hover-sweep-glow-out: rgba(14, 165, 233, 0.3);
  --hover-sweep-glow-in2: rgba(56, 189, 248, 0.18);
  --hover-sweep-glow-white2: rgba(255, 255, 255, 0.14);
  --hover-sweep-glow-out2: rgba(3, 105, 161, 0.28);
  --hover-sweep-drop1: rgba(2, 132, 199, 0.36);
  --hover-sweep-drop2: rgba(56, 189, 248, 0.2);
  --hover-sweep-drop1b: rgba(3, 105, 161, 0.34);
  --hover-sweep-drop2b: rgba(224, 242, 254, 0.18);
}
html[data-hover-preset="lime"] {
  --hover-shine-mid: rgba(163, 230, 53, 0.32);
  --hover-shine-mid-soft: rgba(163, 230, 53, 0.26);
  --hover-sweep-a: rgba(38, 58, 8, 0.96);
  --hover-sweep-b: rgba(101, 163, 13, 0.45);
  --hover-sweep-c: rgba(163, 230, 53, 0.68);
  --hover-sweep-core: rgba(255, 255, 255, 0.5);
  --hover-sweep-fill: rgba(54, 83, 20, 0.86);
  --hover-sweep-fill2: rgba(50, 77, 18, 0.84);
  --hover-sweep-glow-in: rgba(163, 230, 53, 0.24);
  --hover-sweep-glow-white: rgba(255, 255, 255, 0.08);
  --hover-sweep-glow-out: rgba(132, 204, 22, 0.4);
  --hover-sweep-glow-in2: rgba(163, 230, 53, 0.2);
  --hover-sweep-glow-white2: rgba(255, 255, 255, 0.07);
  --hover-sweep-glow-out2: rgba(101, 163, 13, 0.36);
  --hover-sweep-drop1: rgba(163, 230, 53, 0.48);
  --hover-sweep-drop2: rgba(236, 252, 203, 0.14);
  --hover-sweep-drop1b: rgba(132, 204, 22, 0.42);
  --hover-sweep-drop2b: rgba(247, 254, 231, 0.12);
}
html[data-theme="light"][data-hover-preset="lime"] {
  --hover-shine-mid: rgba(77, 124, 15, 0.32);
  --hover-shine-mid-soft: rgba(63, 98, 18, 0.28);
  --hover-sweep-a: rgba(63, 98, 18, 0.42);
  --hover-sweep-b: rgba(101, 163, 13, 0.4);
  --hover-sweep-c: rgba(163, 230, 53, 0.52);
  --hover-sweep-core: rgba(255, 255, 255, 0.58);
  --hover-sweep-fill: rgba(77, 124, 15, 0.32);
  --hover-sweep-fill2: rgba(72, 118, 14, 0.3);
  --hover-sweep-glow-in: rgba(163, 230, 53, 0.2);
  --hover-sweep-glow-white: rgba(255, 255, 255, 0.12);
  --hover-sweep-glow-out: rgba(101, 163, 13, 0.3);
  --hover-sweep-glow-in2: rgba(163, 230, 53, 0.18);
  --hover-sweep-glow-white2: rgba(255, 255, 255, 0.14);
  --hover-sweep-glow-out2: rgba(63, 98, 18, 0.28);
  --hover-sweep-drop1: rgba(77, 124, 15, 0.36);
  --hover-sweep-drop2: rgba(163, 230, 53, 0.2);
  --hover-sweep-drop1b: rgba(63, 98, 18, 0.34);
  --hover-sweep-drop2b: rgba(236, 252, 203, 0.18);
}
html[data-hover-preset="mint"] {
  --hover-shine-mid: rgba(45, 212, 191, 0.34);
  --hover-shine-mid-soft: rgba(45, 212, 191, 0.28);
  --hover-sweep-a: rgba(6, 62, 58, 0.96);
  --hover-sweep-b: rgba(13, 148, 136, 0.42);
  --hover-sweep-c: rgba(45, 212, 191, 0.65);
  --hover-sweep-core: rgba(255, 255, 255, 0.5);
  --hover-sweep-fill: rgba(15, 118, 110, 0.86);
  --hover-sweep-fill2: rgba(14, 110, 102, 0.84);
  --hover-sweep-glow-in: rgba(45, 212, 191, 0.24);
  --hover-sweep-glow-white: rgba(255, 255, 255, 0.08);
  --hover-sweep-glow-out: rgba(20, 184, 166, 0.4);
  --hover-sweep-glow-in2: rgba(45, 212, 191, 0.2);
  --hover-sweep-glow-white2: rgba(255, 255, 255, 0.07);
  --hover-sweep-glow-out2: rgba(13, 148, 136, 0.36);
  --hover-sweep-drop1: rgba(45, 212, 191, 0.48);
  --hover-sweep-drop2: rgba(204, 251, 241, 0.14);
  --hover-sweep-drop1b: rgba(20, 184, 166, 0.42);
  --hover-sweep-drop2b: rgba(236, 253, 245, 0.12);
}
html[data-theme="light"][data-hover-preset="mint"] {
  --hover-shine-mid: rgba(13, 148, 136, 0.34);
  --hover-shine-mid-soft: rgba(15, 118, 110, 0.28);
  --hover-sweep-a: rgba(15, 118, 110, 0.42);
  --hover-sweep-b: rgba(13, 148, 136, 0.38);
  --hover-sweep-c: rgba(45, 212, 191, 0.52);
  --hover-sweep-core: rgba(255, 255, 255, 0.58);
  --hover-sweep-fill: rgba(13, 148, 136, 0.32);
  --hover-sweep-fill2: rgba(12, 140, 130, 0.3);
  --hover-sweep-glow-in: rgba(45, 212, 191, 0.2);
  --hover-sweep-glow-white: rgba(255, 255, 255, 0.12);
  --hover-sweep-glow-out: rgba(20, 184, 166, 0.3);
  --hover-sweep-glow-in2: rgba(45, 212, 191, 0.18);
  --hover-sweep-glow-white2: rgba(255, 255, 255, 0.14);
  --hover-sweep-glow-out2: rgba(15, 118, 110, 0.28);
  --hover-sweep-drop1: rgba(13, 148, 136, 0.36);
  --hover-sweep-drop2: rgba(45, 212, 191, 0.2);
  --hover-sweep-drop1b: rgba(15, 118, 110, 0.34);
  --hover-sweep-drop2b: rgba(204, 251, 241, 0.18);
}
html[data-hover-preset="orange"] {
  --hover-shine-mid: rgba(251, 146, 60, 0.36);
  --hover-shine-mid-soft: rgba(251, 146, 60, 0.3);
  --hover-sweep-a: rgba(92, 38, 6, 0.96);
  --hover-sweep-b: rgba(234, 88, 12, 0.44);
  --hover-sweep-c: rgba(251, 146, 60, 0.68);
  --hover-sweep-core: rgba(255, 255, 255, 0.5);
  --hover-sweep-fill: rgba(154, 52, 18, 0.86);
  --hover-sweep-fill2: rgba(145, 48, 16, 0.84);
  --hover-sweep-glow-in: rgba(251, 146, 60, 0.26);
  --hover-sweep-glow-white: rgba(255, 255, 255, 0.08);
  --hover-sweep-glow-out: rgba(249, 115, 22, 0.42);
  --hover-sweep-glow-in2: rgba(251, 146, 60, 0.22);
  --hover-sweep-glow-white2: rgba(255, 255, 255, 0.07);
  --hover-sweep-glow-out2: rgba(234, 88, 12, 0.38);
  --hover-sweep-drop1: rgba(251, 146, 60, 0.5);
  --hover-sweep-drop2: rgba(255, 237, 213, 0.14);
  --hover-sweep-drop1b: rgba(249, 115, 22, 0.44);
  --hover-sweep-drop2b: rgba(255, 247, 237, 0.12);
}
html[data-theme="light"][data-hover-preset="orange"] {
  --hover-shine-mid: rgba(194, 65, 12, 0.34);
  --hover-shine-mid-soft: rgba(154, 52, 18, 0.28);
  --hover-sweep-a: rgba(154, 52, 18, 0.42);
  --hover-sweep-b: rgba(234, 88, 12, 0.4);
  --hover-sweep-c: rgba(251, 146, 60, 0.52);
  --hover-sweep-core: rgba(255, 255, 255, 0.58);
  --hover-sweep-fill: rgba(194, 65, 12, 0.32);
  --hover-sweep-fill2: rgba(185, 62, 11, 0.3);
  --hover-sweep-glow-in: rgba(251, 146, 60, 0.22);
  --hover-sweep-glow-white: rgba(255, 255, 255, 0.12);
  --hover-sweep-glow-out: rgba(234, 88, 12, 0.32);
  --hover-sweep-glow-in2: rgba(251, 146, 60, 0.2);
  --hover-sweep-glow-white2: rgba(255, 255, 255, 0.14);
  --hover-sweep-glow-out2: rgba(154, 52, 18, 0.28);
  --hover-sweep-drop1: rgba(194, 65, 12, 0.36);
  --hover-sweep-drop2: rgba(251, 146, 60, 0.2);
  --hover-sweep-drop1b: rgba(154, 52, 18, 0.34);
  --hover-sweep-drop2b: rgba(255, 237, 213, 0.18);
}
html[data-hover-preset="magenta"] {
  --hover-shine-mid: rgba(232, 121, 249, 0.34);
  --hover-shine-mid-soft: rgba(232, 121, 249, 0.28);
  --hover-sweep-a: rgba(72, 18, 82, 0.96);
  --hover-sweep-b: rgba(192, 38, 211, 0.42);
  --hover-sweep-c: rgba(232, 121, 249, 0.68);
  --hover-sweep-core: rgba(255, 255, 255, 0.52);
  --hover-sweep-fill: rgba(112, 28, 128, 0.86);
  --hover-sweep-fill2: rgba(105, 26, 120, 0.84);
  --hover-sweep-glow-in: rgba(232, 121, 249, 0.24);
  --hover-sweep-glow-white: rgba(255, 255, 255, 0.08);
  --hover-sweep-glow-out: rgba(217, 70, 239, 0.4);
  --hover-sweep-glow-in2: rgba(232, 121, 249, 0.2);
  --hover-sweep-glow-white2: rgba(255, 255, 255, 0.07);
  --hover-sweep-glow-out2: rgba(217, 70, 239, 0.36);
  --hover-sweep-drop1: rgba(232, 121, 249, 0.48);
  --hover-sweep-drop2: rgba(250, 232, 255, 0.14);
  --hover-sweep-drop1b: rgba(217, 70, 239, 0.42);
  --hover-sweep-drop2b: rgba(255, 200, 255, 0.12);
}
html[data-theme="light"][data-hover-preset="magenta"] {
  --hover-shine-mid: rgba(162, 28, 175, 0.32);
  --hover-shine-mid-soft: rgba(134, 25, 143, 0.26);
  --hover-sweep-a: rgba(134, 25, 143, 0.42);
  --hover-sweep-b: rgba(192, 38, 211, 0.38);
  --hover-sweep-c: rgba(217, 70, 239, 0.52);
  --hover-sweep-core: rgba(255, 255, 255, 0.58);
  --hover-sweep-fill: rgba(162, 28, 175, 0.34);
  --hover-sweep-fill2: rgba(155, 26, 168, 0.32);
  --hover-sweep-glow-in: rgba(217, 70, 239, 0.2);
  --hover-sweep-glow-white: rgba(255, 255, 255, 0.12);
  --hover-sweep-glow-out: rgba(192, 38, 211, 0.3);
  --hover-sweep-glow-in2: rgba(217, 70, 239, 0.18);
  --hover-sweep-glow-white2: rgba(255, 255, 255, 0.14);
  --hover-sweep-glow-out2: rgba(134, 25, 143, 0.28);
  --hover-sweep-drop1: rgba(162, 28, 175, 0.36);
  --hover-sweep-drop2: rgba(192, 38, 211, 0.2);
  --hover-sweep-drop1b: rgba(134, 25, 143, 0.34);
  --hover-sweep-drop2b: rgba(250, 232, 255, 0.18);
}
html[data-hover-preset="coral"] {
  --hover-shine-mid: rgba(255, 127, 80, 0.36);
  --hover-shine-mid-soft: rgba(255, 127, 80, 0.3);
  --hover-sweep-a: rgba(92, 28, 22, 0.96);
  --hover-sweep-b: rgba(244, 63, 94, 0.42);
  --hover-sweep-c: rgba(255, 127, 80, 0.68);
  --hover-sweep-core: rgba(255, 255, 255, 0.5);
  --hover-sweep-fill: rgba(159, 18, 57, 0.86);
  --hover-sweep-fill2: rgba(148, 16, 52, 0.84);
  --hover-sweep-glow-in: rgba(255, 127, 80, 0.24);
  --hover-sweep-glow-white: rgba(255, 255, 255, 0.08);
  --hover-sweep-glow-out: rgba(244, 63, 94, 0.4);
  --hover-sweep-glow-in2: rgba(255, 127, 80, 0.2);
  --hover-sweep-glow-white2: rgba(255, 255, 255, 0.07);
  --hover-sweep-glow-out2: rgba(225, 29, 72, 0.36);
  --hover-sweep-drop1: rgba(255, 127, 80, 0.48);
  --hover-sweep-drop2: rgba(255, 228, 230, 0.14);
  --hover-sweep-drop1b: rgba(244, 63, 94, 0.42);
  --hover-sweep-drop2b: rgba(255, 241, 242, 0.12);
}
html[data-theme="light"][data-hover-preset="coral"] {
  --hover-shine-mid: rgba(200, 80, 50, 0.34);
  --hover-shine-mid-soft: rgba(180, 70, 45, 0.28);
  --hover-sweep-a: rgba(180, 50, 40, 0.42);
  --hover-sweep-b: rgba(244, 63, 94, 0.38);
  --hover-sweep-c: rgba(255, 127, 80, 0.52);
  --hover-sweep-core: rgba(255, 255, 255, 0.58);
  --hover-sweep-fill: rgba(200, 60, 45, 0.32);
  --hover-sweep-fill2: rgba(192, 58, 42, 0.3);
  --hover-sweep-glow-in: rgba(255, 127, 80, 0.2);
  --hover-sweep-glow-white: rgba(255, 255, 255, 0.12);
  --hover-sweep-glow-out: rgba(244, 63, 94, 0.3);
  --hover-sweep-glow-in2: rgba(255, 127, 80, 0.18);
  --hover-sweep-glow-white2: rgba(255, 255, 255, 0.14);
  --hover-sweep-glow-out2: rgba(190, 40, 35, 0.28);
  --hover-sweep-drop1: rgba(200, 60, 45, 0.36);
  --hover-sweep-drop2: rgba(255, 127, 80, 0.2);
  --hover-sweep-drop1b: rgba(180, 50, 40, 0.34);
  --hover-sweep-drop2b: rgba(255, 228, 230, 0.18);
}
html[data-hover-preset="teal"] {
  --hover-shine-mid: rgba(20, 184, 166, 0.34);
  --hover-shine-mid-soft: rgba(20, 184, 166, 0.28);
  --hover-sweep-a: rgba(6, 58, 54, 0.96);
  --hover-sweep-b: rgba(15, 118, 110, 0.42);
  --hover-sweep-c: rgba(20, 184, 166, 0.65);
  --hover-sweep-core: rgba(255, 255, 255, 0.5);
  --hover-sweep-fill: rgba(17, 94, 89, 0.86);
  --hover-sweep-fill2: rgba(15, 88, 83, 0.84);
  --hover-sweep-glow-in: rgba(20, 184, 166, 0.24);
  --hover-sweep-glow-white: rgba(255, 255, 255, 0.08);
  --hover-sweep-glow-out: rgba(13, 148, 136, 0.4);
  --hover-sweep-glow-in2: rgba(20, 184, 166, 0.2);
  --hover-sweep-glow-white2: rgba(255, 255, 255, 0.07);
  --hover-sweep-glow-out2: rgba(15, 118, 110, 0.36);
  --hover-sweep-drop1: rgba(20, 184, 166, 0.48);
  --hover-sweep-drop2: rgba(204, 251, 241, 0.14);
  --hover-sweep-drop1b: rgba(13, 148, 136, 0.42);
  --hover-sweep-drop2b: rgba(236, 253, 245, 0.12);
}
html[data-theme="light"][data-hover-preset="teal"] {
  --hover-shine-mid: rgba(15, 118, 110, 0.34);
  --hover-shine-mid-soft: rgba(17, 94, 89, 0.28);
  --hover-sweep-a: rgba(17, 94, 89, 0.42);
  --hover-sweep-b: rgba(15, 118, 110, 0.38);
  --hover-sweep-c: rgba(20, 184, 166, 0.52);
  --hover-sweep-core: rgba(255, 255, 255, 0.58);
  --hover-sweep-fill: rgba(15, 118, 110, 0.32);
  --hover-sweep-fill2: rgba(14, 112, 106, 0.3);
  --hover-sweep-glow-in: rgba(20, 184, 166, 0.2);
  --hover-sweep-glow-white: rgba(255, 255, 255, 0.12);
  --hover-sweep-glow-out: rgba(13, 148, 136, 0.3);
  --hover-sweep-glow-in2: rgba(20, 184, 166, 0.18);
  --hover-sweep-glow-white2: rgba(255, 255, 255, 0.14);
  --hover-sweep-glow-out2: rgba(17, 94, 89, 0.28);
  --hover-sweep-drop1: rgba(15, 118, 110, 0.36);
  --hover-sweep-drop2: rgba(20, 184, 166, 0.2);
  --hover-sweep-drop1b: rgba(17, 94, 89, 0.34);
  --hover-sweep-drop2b: rgba(204, 251, 241, 0.18);
}

/* Extra neon trail presets */
html[data-trail-preset="mint"] {
  --neon-trail-a: rgba(45, 212, 191, 0.78);
  --neon-trail-b: #5eead4;
  --neon-trail-c: #ccfbf1;
  --neon-trail-d: rgba(13, 148, 136, 0.92);
  --neon-cyan-hot: #99f6e4;
  --neon-cyan-soft: rgba(45, 212, 191, 0.5);
}
html[data-theme="light"][data-trail-preset="mint"] {
  --neon-trail-a: rgba(13, 148, 136, 0.88);
  --neon-trail-b: #14b8a6;
  --neon-trail-c: #ccfbf1;
  --neon-trail-d: rgba(15, 118, 110, 0.95);
  --neon-cyan-hot: #0d9488;
  --neon-cyan-soft: rgba(20, 184, 166, 0.45);
}
html[data-trail-preset="orange"] {
  --neon-trail-a: rgba(251, 146, 60, 0.75);
  --neon-trail-b: #fdba74;
  --neon-trail-c: #ffedd5;
  --neon-trail-d: rgba(234, 88, 12, 0.92);
  --neon-cyan-hot: #fed7aa;
  --neon-cyan-soft: rgba(251, 146, 60, 0.48);
}
html[data-theme="light"][data-trail-preset="orange"] {
  --neon-trail-a: rgba(194, 65, 12, 0.82);
  --neon-trail-b: #ea580c;
  --neon-trail-c: #ffedd5;
  --neon-trail-d: rgba(154, 52, 18, 0.95);
  --neon-cyan-hot: #c2410c;
  --neon-cyan-soft: rgba(234, 88, 12, 0.45);
}
html[data-trail-preset="magenta"] {
  --neon-trail-a: rgba(232, 121, 249, 0.72);
  --neon-trail-b: #f0abfc;
  --neon-trail-c: #fae8ff;
  --neon-trail-d: rgba(192, 38, 211, 0.9);
  --neon-cyan-hot: #e879f9;
  --neon-cyan-soft: rgba(217, 70, 239, 0.48);
}
html[data-theme="light"][data-trail-preset="magenta"] {
  --neon-trail-a: rgba(162, 28, 175, 0.82);
  --neon-trail-b: #c026d3;
  --neon-trail-c: #fae8ff;
  --neon-trail-d: rgba(134, 25, 143, 0.95);
  --neon-cyan-hot: #a21caf;
  --neon-cyan-soft: rgba(192, 38, 211, 0.42);
}
html[data-trail-preset="coral"] {
  --neon-trail-a: rgba(255, 127, 80, 0.75);
  --neon-trail-b: #fca5a5;
  --neon-trail-c: #ffe4e6;
  --neon-trail-d: rgba(244, 63, 94, 0.88);
  --neon-cyan-hot: #fecdd3;
  --neon-cyan-soft: rgba(255, 99, 132, 0.45);
}
html[data-theme="light"][data-trail-preset="coral"] {
  --neon-trail-a: rgba(190, 24, 93, 0.78);
  --neon-trail-b: #e11d48;
  --neon-trail-c: #ffe4e6;
  --neon-trail-d: rgba(159, 18, 57, 0.92);
  --neon-cyan-hot: #be123c;
  --neon-cyan-soft: rgba(225, 29, 72, 0.4);
}
html[data-trail-preset="teal"] {
  --neon-trail-a: rgba(20, 184, 166, 0.75);
  --neon-trail-b: #2dd4bf;
  --neon-trail-c: #ccfbf1;
  --neon-trail-d: rgba(15, 118, 110, 0.92);
  --neon-cyan-hot: #5eead4;
  --neon-cyan-soft: rgba(45, 212, 191, 0.48);
}
html[data-theme="light"][data-trail-preset="teal"] {
  --neon-trail-a: rgba(17, 94, 89, 0.85);
  --neon-trail-b: #0f766e;
  --neon-trail-c: #ccfbf1;
  --neon-trail-d: rgba(19, 78, 74, 0.95);
  --neon-cyan-hot: #115e59;
  --neon-cyan-soft: rgba(15, 118, 110, 0.42);
}

/* --- New presets: gradient-purple, gradient-ocean, black, white, sunset, neon-green, ice, fire --- */
html[data-trail-preset="gradient-purple"] {
  --neon-trail-a: rgba(168,85,247,0.75); --neon-trail-b: #c084fc; --neon-trail-c: #f3e8ff; --neon-trail-d: rgba(126,34,206,0.92);
  --neon-cyan-hot: #a855f7; --neon-cyan-soft: rgba(192,132,252,0.48);
}
html[data-theme="light"][data-trail-preset="gradient-purple"] {
  --neon-trail-a: rgba(107,33,168,0.85); --neon-trail-b: #9333ea; --neon-trail-c: #f3e8ff; --neon-trail-d: rgba(88,28,135,0.95);
  --neon-cyan-hot: #7e22ce; --neon-cyan-soft: rgba(168,85,247,0.42);
}
html[data-trail-preset="gradient-ocean"] {
  --neon-trail-a: rgba(6,182,212,0.75); --neon-trail-b: #22d3ee; --neon-trail-c: #e0f7fa; --neon-trail-d: rgba(8,145,178,0.92);
  --neon-cyan-hot: #06b6d4; --neon-cyan-soft: rgba(34,211,238,0.48);
}
html[data-theme="light"][data-trail-preset="gradient-ocean"] {
  --neon-trail-a: rgba(14,116,144,0.85); --neon-trail-b: #0891b2; --neon-trail-c: #e0f7fa; --neon-trail-d: rgba(21,94,117,0.95);
  --neon-cyan-hot: #0e7490; --neon-cyan-soft: rgba(6,182,212,0.42);
}
html[data-trail-preset="black"] {
  --neon-trail-a: rgba(51,65,85,0.75); --neon-trail-b: #475569; --neon-trail-c: #94a3b8; --neon-trail-d: rgba(30,41,59,0.92);
  --neon-cyan-hot: #64748b; --neon-cyan-soft: rgba(100,116,139,0.48);
}
html[data-theme="light"][data-trail-preset="black"] {
  --neon-trail-a: rgba(15,23,42,0.85); --neon-trail-b: #1e293b; --neon-trail-c: #64748b; --neon-trail-d: rgba(2,6,23,0.95);
  --neon-cyan-hot: #0f172a; --neon-cyan-soft: rgba(30,41,59,0.42);
}
html[data-trail-preset="white"] {
  --neon-trail-a: rgba(241,245,249,0.75); --neon-trail-b: #e2e8f0; --neon-trail-c: #ffffff; --neon-trail-d: rgba(226,232,240,0.92);
  --neon-cyan-hot: #f8fafc; --neon-cyan-soft: rgba(248,250,252,0.48);
}
html[data-theme="light"][data-trail-preset="white"] {
  --neon-trail-a: rgba(148,163,184,0.65); --neon-trail-b: #cbd5e1; --neon-trail-c: #ffffff; --neon-trail-d: rgba(203,213,225,0.8);
  --neon-cyan-hot: #e2e8f0; --neon-cyan-soft: rgba(226,232,240,0.42);
}
html[data-trail-preset="sunset"] {
  --neon-trail-a: rgba(249,115,22,0.75); --neon-trail-b: #fb923c; --neon-trail-c: #fed7aa; --neon-trail-d: rgba(194,65,12,0.92);
  --neon-cyan-hot: #ea580c; --neon-cyan-soft: rgba(251,146,60,0.48);
}
html[data-theme="light"][data-trail-preset="sunset"] {
  --neon-trail-a: rgba(124,45,18,0.85); --neon-trail-b: #9a3412; --neon-trail-c: #fed7aa; --neon-trail-d: rgba(154,52,18,0.95);
  --neon-cyan-hot: #c2410c; --neon-cyan-soft: rgba(234,88,12,0.42);
}
html[data-trail-preset="neon-green"] {
  --neon-trail-a: rgba(74,222,128,0.75); --neon-trail-b: #4ade80; --neon-trail-c: #bbf7d0; --neon-trail-d: rgba(22,163,74,0.92);
  --neon-cyan-hot: #22c55e; --neon-cyan-soft: rgba(74,222,128,0.48);
}
html[data-theme="light"][data-trail-preset="neon-green"] {
  --neon-trail-a: rgba(21,128,61,0.85); --neon-trail-b: #15803d; --neon-trail-c: #bbf7d0; --neon-trail-d: rgba(20,83,45,0.95);
  --neon-cyan-hot: #166534; --neon-cyan-soft: rgba(22,163,74,0.42);
}
html[data-trail-preset="ice"] {
  --neon-trail-a: rgba(186,230,253,0.75); --neon-trail-b: #7dd3fc; --neon-trail-c: #e0f2fe; --neon-trail-d: rgba(56,189,248,0.85);
  --neon-cyan-hot: #38bdf8; --neon-cyan-soft: rgba(125,211,252,0.48);
}
html[data-theme="light"][data-trail-preset="ice"] {
  --neon-trail-a: rgba(3,105,161,0.7); --neon-trail-b: #0284c7; --neon-trail-c: #e0f2fe; --neon-trail-d: rgba(7,89,133,0.85);
  --neon-cyan-hot: #0369a1; --neon-cyan-soft: rgba(14,165,233,0.42);
}
html[data-trail-preset="fire"] {
  --neon-trail-a: rgba(248,113,113,0.75); --neon-trail-b: #f87171; --neon-trail-c: #fecaca; --neon-trail-d: rgba(220,38,38,0.92);
  --neon-cyan-hot: #ef4444; --neon-cyan-soft: rgba(248,113,113,0.48);
}
html[data-theme="light"][data-trail-preset="fire"] {
  --neon-trail-a: rgba(153,27,27,0.85); --neon-trail-b: #b91c1c; --neon-trail-c: #fecaca; --neon-trail-d: rgba(127,29,29,0.95);
  --neon-cyan-hot: #991b1b; --neon-cyan-soft: rgba(220,38,38,0.42);
}

html[data-hover-preset="gradient-purple"] { --hover-shine-mid: rgba(168,85,247,0.3); --hover-shine-mid-soft: rgba(168,85,247,0.24); }
html[data-hover-preset="gradient-ocean"] { --hover-shine-mid: rgba(6,182,212,0.3); --hover-shine-mid-soft: rgba(6,182,212,0.24); }
html[data-hover-preset="black"] { --hover-shine-mid: rgba(51,65,85,0.3); --hover-shine-mid-soft: rgba(51,65,85,0.24); }
html[data-hover-preset="white"] { --hover-shine-mid: rgba(241,245,249,0.3); --hover-shine-mid-soft: rgba(241,245,249,0.24); }
html[data-hover-preset="sunset"] { --hover-shine-mid: rgba(249,115,22,0.3); --hover-shine-mid-soft: rgba(249,115,22,0.24); }
html[data-hover-preset="neon-green"] { --hover-shine-mid: rgba(74,222,128,0.3); --hover-shine-mid-soft: rgba(74,222,128,0.24); }
html[data-hover-preset="ice"] { --hover-shine-mid: rgba(186,230,253,0.3); --hover-shine-mid-soft: rgba(186,230,253,0.24); }
html[data-hover-preset="fire"] { --hover-shine-mid: rgba(248,113,113,0.3); --hover-shine-mid-soft: rgba(248,113,113,0.24); }

/* Accent color change (Neon trail / Hover shine in Settings) */
@keyframes nexus-accent-pulse-anim {
  0% {
    filter: brightness(1) saturate(1);
  }
  40% {
    filter: brightness(1.09) saturate(1.2);
  }
  100% {
    filter: brightness(1) saturate(1);
  }
}
html.nexus-accent-pulse {
  animation: nexus-accent-pulse-anim 0.72s cubic-bezier(0.33, 1, 0.68, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  html.nexus-accent-pulse {
    animation: none;
  }
}

/* Theme switch overlay — below .app-header; never capture taps (was blocking header) */
.nexus-theme-transition {
  position: fixed;
  inset: 0;
  z-index: 9980;
  pointer-events: none !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.nexus-theme-transition--active {
  pointer-events: none !important;
  opacity: 1;
  visibility: visible;
}
.nexus-theme-transition__bg {
  position: absolute;
  inset: 0;
  background: #0b0f14;
}
.nexus-theme-transition--to-dark .nexus-theme-transition__bg {
  background: #f8fafc;
  animation: nexusTTransBgToDark 0.82s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.nexus-theme-transition--to-light .nexus-theme-transition__bg {
  background: #0b0f14;
  animation: nexusTTransBgToLight 0.82s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes nexusTTransBgToDark {
  from {
    background: #f8fafc;
  }
  to {
    background: #0b0f14;
  }
}
@keyframes nexusTTransBgToLight {
  from {
    background: #0b0f14;
  }
  to {
    background: #f8fafc;
  }
}
.nexus-theme-transition__orb {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(132px, 36vw);
  height: min(132px, 36vw);
  pointer-events: none;
}
.nexus-theme-transition__svg {
  width: 100%;
  height: 100%;
  display: block;
}
.nexus-theme-transition__sun,
.nexus-theme-transition__moon {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.nexus-theme-transition--to-dark .nexus-theme-transition__sun {
  opacity: 1;
}
.nexus-theme-transition--to-dark .nexus-theme-transition__moon {
  opacity: 0;
}
.nexus-theme-transition--active.nexus-theme-transition--to-dark .nexus-theme-transition__sun {
  animation: nexusTTransSunOut 0.76s ease forwards;
}
.nexus-theme-transition--active.nexus-theme-transition--to-dark .nexus-theme-transition__moon {
  animation: nexusTTransMoonIn 0.76s ease 0.16s forwards;
}
.nexus-theme-transition--to-light .nexus-theme-transition__sun {
  opacity: 0;
}
.nexus-theme-transition--to-light .nexus-theme-transition__moon {
  opacity: 1;
}
.nexus-theme-transition--active.nexus-theme-transition--to-light .nexus-theme-transition__moon {
  animation: nexusTTransMoonOut 0.76s ease forwards;
}
.nexus-theme-transition--active.nexus-theme-transition--to-light .nexus-theme-transition__sun {
  animation: nexusTTransSunIn 0.76s ease 0.16s forwards;
}
@keyframes nexusTTransSunOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.72);
  }
}
@keyframes nexusTTransMoonIn {
  0% {
    opacity: 0;
    transform: scale(0.68) rotate(-14deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
@keyframes nexusTTransMoonOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.72);
  }
}
@keyframes nexusTTransSunIn {
  0% {
    opacity: 0;
    transform: scale(0.68) rotate(14deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nexus-theme-transition__bg,
  .nexus-theme-transition--active.nexus-theme-transition--to-dark .nexus-theme-transition__sun,
  .nexus-theme-transition--active.nexus-theme-transition--to-dark .nexus-theme-transition__moon,
  .nexus-theme-transition--active.nexus-theme-transition--to-light .nexus-theme-transition__sun,
  .nexus-theme-transition--active.nexus-theme-transition--to-light .nexus-theme-transition__moon {
    animation: none !important;
  }
}
@media (pointer: coarse) {
  .nexus-theme-transition__orb {
    display: none;
  }
  .nexus-theme-transition--to-dark .nexus-theme-transition__bg,
  .nexus-theme-transition--to-light .nexus-theme-transition__bg {
    animation-duration: 0.5s;
  }
}

.assistant-action-btn .assistant-action-ic {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Boot: hide main shell until auth resolves (no landing flash for logged-in users) */
#root.nexus-loading {
  visibility: hidden;
  pointer-events: none;
}
/* Fixed header stays interactive: #root pointer-events:none would swallow clicks (theme, More, nav). */
#root.nexus-loading #app-header {
  visibility: visible;
  pointer-events: auto;
}

/* Custom atom colors (Settings → Atom color; vars set in app.js) */
html[data-atom-preset]:not([data-atom-preset="default"]) .assistant-atom .atom-nucleus,
html[data-atom-preset]:not([data-atom-preset="default"]) .header-atom .atom-nucleus,
html[data-atom-preset]:not([data-atom-preset="default"]) .bg-center-atom-inner .atom-nucleus {
  background: radial-gradient(
    circle at 35% 35%,
    var(--nexus-atom-nuc-hi),
    var(--nexus-atom-nuc-mid) 55%,
    var(--nexus-atom-nuc-deep) 100%
  );
  box-shadow: 0 0 10px var(--nexus-atom-glow);
}

html[data-atom-preset]:not([data-atom-preset="default"]) .assistant-atom .atom-ring,
html[data-atom-preset]:not([data-atom-preset="default"]) .header-atom .atom-ring,
html[data-atom-preset]:not([data-atom-preset="default"]) .bg-center-atom-inner .atom-ring {
  border-color: var(--nexus-atom-ring);
}

html[data-atom-preset]:not([data-atom-preset="default"]) .assistant-atom .atom-ring .atom-electron,
html[data-atom-preset]:not([data-atom-preset="default"]) .header-atom .atom-ring .atom-electron,
html[data-atom-preset]:not([data-atom-preset="default"]) .bg-center-atom-inner .atom-ring .atom-electron {
  background: radial-gradient(circle at 30% 30%, var(--nexus-atom-e-hi), var(--nexus-atom-e-mid) 70%);
  box-shadow: 0 0 8px var(--nexus-atom-e-glow);
}

/* Assistant row: keep topbar + body readable on narrow viewports */
@media (max-width: 640px) {
  .assistant-row {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .assistant-row .chat-msg {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  .assistant-row .chat-msg.assistant {
    max-width: 100%;
  }

  .assistant-row .assistant-topbar {
    gap: 8px;
    margin-bottom: 6px;
  }

  .assistant-row .assistant-inline-atom {
    margin-top: 1px;
  }

  .assistant-row .assistant-actions {
    justify-self: auto;
    margin-left: 0;
    margin-top: 0;
    flex-shrink: 0;
  }

  .assistant-row .chat-msg-body {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  #view-dashboard .chat-input-area {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: max(4px, env(safe-area-inset-left));
    padding-right: max(4px, env(safe-area-inset-right));
    overflow-x: hidden;
  }

  #view-dashboard .chat-messages,
  #view-dashboard #chat-messages {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  #view-dashboard .chat-input-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  #view-dashboard .chat-input {
    min-width: 0;
    flex: 1 1 auto;
    max-width: 100%;
  }
}

/* Very narrow phones (~iPhone 5 width): tighter type, inputs, header pills */
@media (max-width: 360px) {
  body[data-current-view="dashboard"] #view-dashboard .chat-main {
    font-size: 0.8125rem;
  }
  #view-dashboard .chat-messages {
    padding: 10px 8px;
    gap: 10px;
    font-size: 0.9em;
  }
  #view-dashboard .chat-msg-body {
    font-size: 0.94em;
    line-height: 1.42;
  }
  #view-dashboard .chat-input-area {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }
  #view-dashboard .chat-input-wrap textarea,
  #view-dashboard .chat-input-wrap .chat-input {
    font-size: 0.88rem;
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .app-header .header-nav-pill,
  .app-header .header-center-nav a.header-nav-pill {
    padding: 5px 8px;
    font-size: 0.68rem;
    max-width: 28vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .app-header .header-center-nav {
    gap: 4px;
    flex-wrap: nowrap;
    min-width: 0;
    justify-content: center;
  }
  .assistant-action-btn {
    width: 30px;
    height: 30px;
  }
}

/* Coarse pointer / no hover: tap feedback + focus rings (hover is unreliable on many phones). */
@media (hover: none) {
  .auth-country-dropdown-item:active {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.28), rgba(34, 211, 238, 0.14));
  }
  .auth-country-dropdown-item:focus-visible {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.22), rgba(34, 211, 238, 0.1));
    outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
    outline-offset: 2px;
  }
  [data-theme="light"] .auth-country-dropdown-item:active {
    background: rgba(99, 102, 241, 0.18);
  }
  [data-theme="light"] .auth-country-dropdown-item:focus-visible {
    background: rgba(99, 102, 241, 0.12);
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 2px;
  }
  .auth-country-custom-trigger:active {
    background: rgba(0, 0, 0, 0.52);
    border-color: rgba(255, 255, 255, 0.18);
  }
  .auth-country-custom-trigger:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
    outline-offset: 2px;
    border-color: rgba(255, 255, 255, 0.22);
  }
  [data-theme="light"] .auth-country-custom-trigger:active {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.14);
  }
  [data-theme="light"] .auth-country-custom-trigger:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 2px;
  }
  a.header-nav-pill.neon-cyan-chase:active,
  button.header-nav-pill.neon-cyan-chase:active {
    background: rgba(99, 102, 241, 0.15);
  }
  a.header-nav-pill.neon-cyan-chase:focus-visible,
  button.header-nav-pill.neon-cyan-chase:focus-visible {
    background: rgba(99, 102, 241, 0.12);
    outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
    outline-offset: 2px;
  }
  [data-theme="light"] a.header-nav-pill.neon-cyan-chase:active,
  [data-theme="light"] button.header-nav-pill.neon-cyan-chase:active {
    background: rgba(99, 102, 241, 0.14);
  }
  body.page-buy .pay-tab:active {
    filter: brightness(1.06);
    transform: scale(0.99);
  }
  body.page-buy .pay-tab:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
    outline-offset: 2px;
    filter: brightness(1.05);
  }
  [data-theme="light"] body.page-buy .pay-tab:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  }
  .primary-btn.clean-hover:active:not(.neon-cyan-chase),
  .secondary-btn.clean-hover:active:not(.neon-cyan-chase) {
    filter: brightness(1.08);
    box-shadow: 0 0 14px rgba(0, 230, 255, 0.07);
    transform: scale(1.02);
  }
  .primary-btn.clean-hover:focus-visible:not(.neon-cyan-chase),
  .secondary-btn.clean-hover:focus-visible:not(.neon-cyan-chase) {
    outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
    outline-offset: 2px;
    filter: brightness(1.08);
    box-shadow: 0 0 14px rgba(0, 230, 255, 0.07);
  }
  [data-theme="light"] .primary-btn.clean-hover:active:not(.neon-cyan-chase),
  [data-theme="light"] .secondary-btn.clean-hover:active:not(.neon-cyan-chase) {
    box-shadow: 0 0 12px rgba(79, 70, 229, 0.12);
  }
  [data-theme="light"] .primary-btn.clean-hover:focus-visible:not(.neon-cyan-chase),
  [data-theme="light"] .secondary-btn.clean-hover:focus-visible:not(.neon-cyan-chase) {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow: 0 0 12px rgba(79, 70, 229, 0.12);
  }
  .neon-cyan-chase.clean-hover:active {
    transform: none;
    filter: none;
  }
  .neon-cyan-chase.clean-hover:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
    outline-offset: 2px;
    transform: none;
    filter: none;
  }
  [data-theme="light"] .neon-cyan-chase.clean-hover:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  }
  .assistant-action-btn:active {
    filter: brightness(1.1);
    transform: scale(0.96);
  }
  .assistant-action-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
    outline-offset: 2px;
    filter: brightness(1.08);
  }
  [data-theme="light"] .assistant-action-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  }
}

/* ==========================================================================
   LANDING PAGE REDESIGN — Scroll, Sections, Light/Dark, Animations
   ========================================================================== */

/* --- Scroll fix: allow landing page to scroll freely --- */
body[data-current-view="landing"],
html:has(#view-landing.active) body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100% !important;
}
html:has(body[data-current-view="landing"]),
html:has(#view-landing.active) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
}
body[data-current-view="landing"] #root,
html:has(#view-landing.active) #root {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
body[data-current-view="landing"] #view-landing.active,
html:has(#view-landing.active) #view-landing.active {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body[data-current-view="landing"] #view-landing.active .landing-shell,
html:has(#view-landing.active) .landing-shell {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  min-height: auto !important;
  display: block !important;
}
#view-landing .landing-shell {
  display: block;
  min-height: auto;
  padding: 0;
}

/* --- Shared section layout --- */
.landing-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 24px 60px;
  overflow-x: hidden;
  overflow-y: visible;
}

/* --- Soft purple edge glows (light) --- */
[data-theme="light"] .landing-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(139,92,246,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(139,92,246,0.06) 0%, transparent 70%);
  z-index: 0;
}
.landing-section > * { position: relative; z-index: 1; }

/* --- LP Section headings --- */
.lp-section-heading {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.lp-section-sub {
  text-align: center;
  max-width: 620px;
  color: var(--text-muted);
  margin: 0 auto 48px;
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  line-height: 1.6;
}

/* =========================
   SECTION 1: HERO
   ========================= */
.landing-hero {
  padding-top: 120px;
  gap: 40px;
}
.landing-hero-content {
  text-align: center;
  max-width: 780px;
  width: 100%;
}

/* Brand line above hero headline (top bar hides this text on landing) */
.landing-hero-brand {
  margin: 0 auto 10px;
  padding: 0;
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.15;
  text-align: center;
  background: linear-gradient(115deg, #f8fafc 0%, #e8e0ff 38%, #c4b5fd 72%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 18px rgba(167, 139, 250, 0.35));
}

[data-theme="light"] .landing-hero-brand {
  background: linear-gradient(115deg, #0f172a 0%, #312e81 42%, #6d28d9 78%, #7c3aed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.65));
}

@media (min-width: 769px) {
  body[data-current-view="landing"] .landing-hero-brand {
    display: none !important;
  }
}

.landing-hero .landing-title {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.08;
  margin-bottom: 16px;
  letter-spacing: -0.03em;
}

@media (max-width: 768px) {
  body[data-current-view="landing"] .landing-hero-brand {
    font-size: clamp(2.35rem, 11vw, 3.75rem);
    letter-spacing: 0.08em;
    margin-bottom: 14px;
    filter: drop-shadow(0 0 22px rgba(167, 139, 250, 0.45));
  }
  body[data-current-view="landing"] .landing-hero .landing-title {
    font-size: clamp(1.2rem, 4.2vw, 1.85rem) !important;
    line-height: 1.18;
    margin-bottom: 14px;
    letter-spacing: -0.02em;
  }
}
.landing-hero .landing-subtitle {
  max-width: 640px;
  margin: 0 auto 28px;
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  line-height: 1.65;
}

/* Hero buttons */
.landing-hero-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
  white-space: nowrap;
}
.lp-btn:hover { transform: translateY(-2px); }
.lp-btn:active { transform: translateY(0) scale(0.97); }

.lp-btn-primary {
  background: linear-gradient(135deg, #7c3aed, #6366f1, #8b5cf6);
  color: #fff;
  box-shadow: 0 4px 20px rgba(99,102,241,0.35);
}
.lp-btn-primary:hover { box-shadow: 0 6px 28px rgba(99,102,241,0.5); }

.lp-btn-secondary {
  background: rgba(255,255,255,0.9);
  color: #1a1d24;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
}
[data-theme="dark"] .lp-btn-secondary {
  background: rgba(255,255,255,0.1);
  color: #e8eaef;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.08);
}
.lp-btn-secondary:hover { box-shadow: 0 4px 18px rgba(0,0,0,0.12), 0 0 20px rgba(139,92,246,0.1); }

.lp-btn-full { width: 100%; }

/* --- Hero Screen (computer mock) --- */
.landing-hero-screen {
  width: 100%;
  max-width: 860px;
}
.hero-screen-frame {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.06);
  background: #fff;
}
[data-theme="dark"] .hero-screen-frame {
  background: #141418;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
}
.hero-screen-topbar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  background: #f3f3f5;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
[data-theme="dark"] .hero-screen-topbar {
  background: #1c1c22;
  border-bottom-color: rgba(255,255,255,0.06);
}
.hero-dot {
  width: 12px; height: 12px; border-radius: 50%;
}
.hero-dot.red { background: #ff5f57; }
.hero-dot.yellow { background: #ffbd2e; }
.hero-dot.green { background: #28c840; }
.hero-screen-title {
  margin-left: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}
.hero-screen-body {
  display: flex;
  min-height: 340px;
}

/* Hero sidebar mock */
.hero-chat-sidebar {
  width: 200px;
  flex-shrink: 0;
  padding: 16px 12px;
  border-right: 1px solid rgba(0,0,0,0.06);
  background: #fafafe;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
[data-theme="dark"] .hero-chat-sidebar {
  background: #18181e;
  border-right-color: rgba(255,255,255,0.06);
}
.hero-sidebar-brand {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}
.hero-sidebar-icon { color: #7c3aed; font-size: 1.1rem; }
.hero-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: default;
  transition: background 0.2s;
}
.hero-sidebar-item.active {
  background: rgba(139,92,246,0.1);
  color: #7c3aed;
  font-weight: 600;
}
[data-theme="dark"] .hero-sidebar-item.active {
  background: rgba(139,92,246,0.18);
  color: #a78bfa;
}

/* Hero chat main — real app preview with chat bubbles */
.hero-chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  min-height: 0;
  overflow: hidden;
}
.hero-chat-history {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 12px;
  overflow-y: auto;
}
.hero-bubble {
  max-width: 82%;
  padding: 10px 16px;
  border-radius: 16px;
  font-size: 0.85rem;
  line-height: 1.55;
  word-break: break-word;
}
.hero-bubble code {
  background: rgba(139,92,246,0.12);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.82em;
  font-family: "Fira Code", "Cascadia Code", monospace;
}
.hero-bubble-user {
  align-self: flex-end;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.hero-bubble-ai {
  align-self: flex-start;
  background: rgba(13,148,136,0.1);
  color: var(--text);
  border-bottom-left-radius: 4px;
  border: 1px solid rgba(13,148,136,0.15);
}
.hero-bubble-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #0d9488;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
[data-theme="dark"] .hero-bubble-ai {
  background: rgba(45,212,191,0.08);
  border-color: rgba(45,212,191,0.15);
}
[data-theme="dark"] .hero-bubble-label { color: #2dd4bf; }
[data-theme="dark"] .hero-bubble code {
  background: rgba(192,132,252,0.15);
}
.hero-chat-bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: rgba(250,250,254,0.6);
}
[data-theme="dark"] .hero-chat-bottom {
  border-top-color: rgba(255,255,255,0.06);
  background: rgba(20,20,26,0.6);
}

/* Real input shell inside the macOS window */
.hero-screen-frame .landing-input-shell.neon-cyan-chase.hero-input-inside {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 14px;
  padding: 6px 8px;
  background: rgba(245,245,250,0.95) !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06) !important;
  backdrop-filter: none !important;
  width: 100%;
}
[data-theme="dark"] .hero-screen-frame .landing-input-shell.neon-cyan-chase.hero-input-inside {
  background: rgba(30,30,38,0.95) !important;
  border-color: rgba(139,92,246,0.25) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.25) !important;
}
.hero-input-inside .landing-input {
  color: var(--text) !important;
  font-size: 0.92rem;
}
[data-theme="light"] .hero-input-inside .landing-input {
  color: #1a1d24 !important;
}
.hero-input-inside .landing-action-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 10px;
}
.hero-chat-input-actions {
  display: flex;
  gap: 16px;
  padding: 0 4px;
  flex-wrap: wrap;
}
.hero-action-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: default;
}

/* =========================
   SECTION 2: FEATURE GRID
   ========================= */
.landing-features { background: transparent; }
.lp-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 960px;
  width: 100%;
}
.lp-feature-card {
  border-radius: 16px;
  padding: 28px 24px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}
.lp-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(139,92,246,0.12);
}
[data-theme="light"] .lp-feature-card {
  background: rgba(255,255,255,0.95);
  border-color: rgba(139,92,246,0.08);
}
.lp-feature-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 14px 0 8px;
  color: var(--text);
}
.lp-feature-card p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}
.lp-feature-card[data-action="study"] { cursor: pointer; }
.lp-feature-card[data-action="study"]:hover {
  border-color: rgba(139,92,246,0.3);
  box-shadow: 0 8px 30px rgba(139,92,246,0.18);
}

/* Feature icons */
.lp-feature-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-icon-blue-purple {
  background: linear-gradient(135deg, #818cf8, #6366f1);
  color: #fff;
}
.lp-icon-orange-red {
  background: linear-gradient(135deg, #fb923c, #f97316);
  color: #fff;
}
.lp-icon-purple-pink {
  background: linear-gradient(135deg, #c084fc, #a855f7);
  color: #fff;
}

/* Dark feature cards */
[data-theme="dark"] .lp-feature-card {
  background: rgba(20,20,28,0.9);
  border-color: rgba(139,92,246,0.12);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
[data-theme="dark"] .lp-feature-card:hover {
  border-color: rgba(139,92,246,0.4);
  box-shadow: 0 0 25px rgba(139,92,246,0.2), 0 8px 30px rgba(0,0,0,0.4);
}
[data-theme="dark"] .lp-icon-blue-purple {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  box-shadow: 0 0 14px rgba(99,102,241,0.4);
}
[data-theme="dark"] .lp-icon-orange-red {
  background: linear-gradient(135deg, #f97316, #ea580c);
  box-shadow: 0 0 14px rgba(249,115,22,0.4);
}
[data-theme="dark"] .lp-icon-purple-pink {
  background: linear-gradient(135deg, #d946ef, #a855f7);
  box-shadow: 0 0 14px rgba(168,85,247,0.4);
}

/* =========================
   SECTION 3: ANALYTICS
   ========================= */
.landing-analytics {
  padding: 80px 24px 100px;
}
.lp-analytics-content {
  max-width: 760px;
  width: 100%;
  text-align: center;
}
.lp-analytics-text {
  font-size: clamp(1.2rem, 2.8vw, 1.75rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 48px;
  min-height: 3em;
}
.lp-analytics-text .lp-typed-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: #7c3aed;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: lpCursorBlink 0.7s step-end infinite;
}
[data-theme="dark"] .lp-analytics-text { color: #d1d5db; }

.lp-stats-row {
  display: flex;
  justify-content: center;
  gap: clamp(32px, 8vw, 80px);
  flex-wrap: wrap;
}
.lp-stat { text-align: center; }
.lp-stat-number {
  display: block;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: #7c3aed;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
[data-theme="dark"] .lp-stat-number { color: #a78bfa; }
.lp-stat-label {
  display: block;
  margin-top: 6px;
  font-size: 0.88rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* =========================
   SECTION 4: PRICING
   ========================= */
.landing-pricing {
  padding: 80px 24px 100px;
}
.lp-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1000px;
  width: 100%;
  align-items: start;
}
.lp-pricing-card {
  border-radius: 16px;
  padding: clamp(24px, 4vw, 32px);
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}
.lp-pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(139,92,246,0.1);
}
[data-theme="light"] .lp-pricing-card {
  border-color: rgba(139,92,246,0.08);
}
.lp-pricing-featured {
  border-color: rgba(139,92,246,0.3) !important;
  box-shadow: 0 4px 24px rgba(139,92,246,0.12);
  position: relative;
}
.lp-pricing-featured::before {
  content: "Popular";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lp-pricing-icon { margin-bottom: 12px; }
.lp-pricing-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text);
}
.lp-pricing-amt {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 800;
  color: var(--text);
  margin: 8px 0 12px;
}
.lp-pricing-amt span {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
}
.lp-pricing-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 16px;
}
.lp-pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  flex: 1;
}
.lp-pricing-card li {
  padding: 8px 0;
  font-size: 0.88rem;
  color: var(--text);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  gap: 8px;
}
.lp-pricing-card li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #7c3aed;
  flex-shrink: 0;
}
.lp-pricing-card li:last-child { border-bottom: none; }
.lp-pricing-card[data-action="about"] { cursor: pointer; }

/* Dark pricing */
[data-theme="dark"] .lp-pricing-card {
  background: rgba(20,20,28,0.9);
  border-color: rgba(139,92,246,0.12);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
[data-theme="dark"] .lp-pricing-card:hover {
  box-shadow: 0 0 30px rgba(139,92,246,0.15), 0 8px 30px rgba(0,0,0,0.4);
  border-color: rgba(139,92,246,0.35);
}
[data-theme="dark"] .lp-pricing-featured {
  border-color: rgba(139,92,246,0.45) !important;
  box-shadow: 0 0 24px rgba(139,92,246,0.2);
}
[data-theme="dark"] .lp-pricing-card li {
  border-bottom-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .lp-pricing-card li::before {
  background: #a78bfa;
}
[data-theme="dark"] .lp-btn-primary {
  background: linear-gradient(135deg, #7c3aed, #6366f1, #8b5cf6);
  box-shadow: 0 4px 20px rgba(99,102,241,0.4);
}

/* Dark section edge glows */
[data-theme="dark"] .landing-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 40% at 0% 50%, rgba(139,92,246,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 100% 50%, rgba(139,92,246,0.06) 0%, transparent 70%);
  z-index: 0;
}

/* =========================
   ANIMATIONS
   ========================= */

/* Fade-in base */
.lp-anim {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.7s ease;
  transition-delay: var(--anim-delay, 0s);
}
.lp-anim.lp-anim-fade { transform: translateY(12px); filter: blur(6px); }
.lp-anim.lp-anim-up { transform: translateY(40px); filter: blur(4px); }
.lp-anim.lp-anim-slide-bottom { transform: translateY(60px); filter: blur(4px); }

.lp-anim.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}

/* Slide from left/right for feature cards */
.lp-anim.lp-anim-left { transform: translateX(-50px); filter: blur(6px); }
.lp-anim.lp-anim-right { transform: translateX(50px); filter: blur(6px); }
.lp-anim.lp-anim-left.is-visible,
.lp-anim.lp-anim-right.is-visible {
  transform: translateX(0);
  filter: blur(0px);
}

/* Spring popup for hero chat elements */
.lp-anim-popup {
  opacity: 0;
  transform: translateY(50px) scale(0.92);
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--popup-delay, 0.3s);
}
.hero-screen-frame.is-visible .lp-anim-popup,
.lp-anim-popup.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Icon pulse */
.lp-feature-card.is-visible .lp-feature-icon {
  animation: lpPulseIcon 2s ease-in-out infinite;
  animation-delay: var(--anim-delay, 0s);
}

@keyframes lpPulseIcon {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* Magnetic pull + liquid-glow on primary CTA */
.lp-btn-primary {
  position: relative;
  overflow: visible;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.lp-btn-primary::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: conic-gradient(from var(--glow-angle, 0deg), #7c3aed, #6366f1, #0d9488, #7c3aed);
  z-index: -1;
  opacity: 0;
  filter: blur(10px);
  transition: opacity 0.4s ease;
  animation: lpGlowSpin 3s linear infinite;
}
.lp-btn-primary:hover::before { opacity: 0.7; }
@keyframes lpGlowSpin {
  0% { --glow-angle: 0deg; filter: blur(10px); }
  100% { --glow-angle: 360deg; filter: blur(10px); }
}
@property --glow-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* Section gradient shift */
.landing-section {
  --grad-x: 50%;
  --grad-y: 50%;
}
.landing-hero { --section-hue: 270; }
.landing-features { --section-hue: 250; }
.landing-analytics { --section-hue: 170; }
.landing-pricing { --section-hue: 280; }
[data-theme="light"] .landing-section::before {
  background:
    radial-gradient(ellipse 55% 45% at var(--grad-x, 50%) var(--grad-y, 50%),
      hsla(var(--section-hue, 270), 60%, 70%, 0.06) 0%, transparent 70%);
}
[data-theme="dark"] .landing-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 55% 45% at var(--grad-x, 50%) var(--grad-y, 50%),
      hsla(var(--section-hue, 270), 60%, 40%, 0.08) 0%, transparent 70%);
}

/* Cursor blink for analytics typing */
@keyframes lpCursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Compression animation for study area */
@keyframes lpCompressDown {
  0% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(0.3) translateY(120px); }
}
.study-compressing .study-main > *:not(.study-close-btn) {
  animation: lpCompressDown 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Study workspace page (study.html) + landing chat sink */
body[data-nexus-page="study"] #root {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  overflow: visible;
}

/* ---- Study hub: purple/white palette, chat state, glass header ---- */
body[data-nexus-page="study"][data-theme="light"] #root {
  background: #f9f6ee;
}
body[data-nexus-page="study"][data-theme="light"] .study-page-embed {
  background: #f9f6ee;
}
body[data-nexus-page="study"][data-theme="light"] .study-main,
body[data-nexus-page="study"][data-theme="light"] .study-main-inner {
  background: #f9f6ee;
}
body[data-nexus-page="study"][data-theme="light"] .study-sidebar {
  background: #f5f3ff;
  border-right: 0.5px solid rgba(108, 59, 170, 0.18);
}
body[data-nexus-page="study"][data-theme="dark"] .study-sidebar {
  background: color-mix(in srgb, #1a1625 88%, #6366f1);
  border-right: 0.5px solid rgba(167, 139, 250, 0.2);
}
body[data-nexus-page="study"][data-theme="dark"] .study-main,
body[data-nexus-page="study"][data-theme="dark"] .study-main-inner {
  background: color-mix(in srgb, var(--n-bg-deep) 96%, #312e81 4%);
}

body[data-nexus-page="study"] .study-appbar-hamburger {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 0.5px solid rgba(167, 139, 250, 0.28);
  background: rgba(255, 255, 255, 0.55);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 2px;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
[data-theme="dark"] body[data-nexus-page="study"] .study-appbar-hamburger {
  background: rgba(30, 30, 42, 0.75);
  border-color: rgba(167, 139, 250, 0.28);
  color: #e8e4f0;
}
body[data-nexus-page="study"] .study-appbar-hamburger:hover {
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(99, 102, 241, 0.35);
}
body[data-nexus-page="study"] .study-appbar-hamburger.is-collapsed {
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.2), 0 4px 18px rgba(99, 102, 241, 0.12);
}
body[data-nexus-page="study"][data-theme="light"] .study-appbar-hamburger {
  border-color: rgba(108, 59, 170, 0.2);
  background: rgba(252, 245, 229, 0.75);
}

body[data-nexus-page="study"] .app-header.app-header--study-glass {
  background: rgba(249, 246, 238, 0.72) !important;
  backdrop-filter: blur(20px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.15) !important;
  border-bottom: 0.5px solid rgba(167, 139, 250, 0.22) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 8px 32px rgba(99, 102, 241, 0.06) !important;
}
[data-theme="dark"] body[data-nexus-page="study"] .app-header.app-header--study-glass {
  background: rgba(18, 20, 28, 0.72) !important;
  border-bottom-color: rgba(167, 139, 250, 0.18) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 40px rgba(0, 0, 0, 0.35) !important;
}
body[data-nexus-page="study"] .app-header.app-header--study-glass::before {
  opacity: 0.42;
}

body[data-nexus-page="study"] #study-welcome {
  transition:
    opacity 0.45s ease,
    max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.35s ease,
    padding 0.35s ease,
    min-height 0.35s ease;
}
body[data-nexus-page="study"] .study-discover-blocks {
  overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), margin 0.35s ease;
  max-height: 2400px;
  opacity: 1;
}
body[data-nexus-page="study"] .study-sidebar-extra-block {
  overflow: hidden;
  transition: opacity 0.35s ease, max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1), margin 0.3s ease, padding 0.3s ease;
  max-height: 2000px;
  opacity: 1;
}
#study-area[data-study-session-active="true"] .study-discover-blocks {
  max-height: 0;
  opacity: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  pointer-events: none;
}
#study-area[data-study-session-active="true"] #study-welcome {
  max-height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: none !important;
}
#study-area[data-study-session-active="true"] .study-sidebar-extra-block {
  max-height: 0 !important;
  opacity: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none !important;
  border: none !important;
}
#study-area[data-study-session-active="true"] .study-main-inner {
  padding-top: 12px;
  padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
  overflow-y: hidden;
}
#study-area[data-study-session-active="true"] .study-chat-area {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 6px;
  padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
}
#study-area[data-study-session-active="true"] .study-chat-messages {
  margin-bottom: 6px;
}
#study-area:not([data-study-session-active="true"]) .study-chat-area {
  flex: 0 0 auto;
  min-height: 0;
  max-height: none;
  margin-top: 0;
  justify-content: flex-end;
}
#study-area:not([data-study-session-active="true"]) .study-chat-messages {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 0;
  margin-bottom: 0;
  padding: 0;
  border-width: 0;
  overflow: hidden;
}
#study-area:not([data-study-session-active="true"]) #study-welcome {
  flex: 1 1 0;
  min-height: 0;
  max-height: none !important;
  display: flex;
  flex-direction: column;
  overflow: visible;
  width: 100%;
}
#study-area:not([data-study-session-active="true"]) .study-welcome-content {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
  width: 100%;
  max-width: none;
}
#study-area:not([data-study-session-active="true"]) .study-welcome-icon-wrap {
  margin-bottom: 10px;
}
#study-area:not([data-study-session-active="true"]) .study-welcome h2 {
  margin-bottom: 8px;
}
#study-area:not([data-study-session-active="true"]) .study-welcome p {
  margin-bottom: 14px;
}
#study-area:not([data-study-session-active="true"]) .study-discover-blocks {
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: visible;
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
  padding-bottom: 10px;
  width: 100%;
  max-width: none;
}
#study-area:not([data-study-session-active="true"]) .study-discover-blocks > .study-hub-label:not(.study-hub-label-topics) {
  margin-bottom: 6px;
}
#study-area:not([data-study-session-active="true"]) .study-quick-actions {
  flex: 0 0 auto;
  min-height: auto;
  max-width: none;
  width: auto;
  margin-inline: auto;
  grid-template-columns: repeat(2, 118px);
  grid-auto-rows: 118px;
  align-content: center;
  justify-content: center;
  gap: 10px;
  margin-top: 0;
  padding-inline: clamp(6px, 2vw, 18px);
}
#study-area:not([data-study-session-active="true"]) .study-action-tile {
  min-height: 0;
  height: 100%;
  width: 100%;
  padding: 10px 8px 11px;
  gap: 5px;
  border-radius: 22px;
  align-items: center;
  text-align: center;
  justify-content: center;
}
#study-area:not([data-study-session-active="true"]) .study-action-tile .study-action-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}
#study-area:not([data-study-session-active="true"]) .study-action-tile .study-action-icon svg {
  width: 22px;
  height: 22px;
}
#study-area:not([data-study-session-active="true"]) .study-action-title {
  font-size: 0.78rem;
  line-height: 1.2;
}
#study-area:not([data-study-session-active="true"]) .study-action-desc {
  font-size: 0.62rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#study-area:not([data-study-session-active="true"]) .study-main-inner {
  overflow-y: hidden;
}
#study-area:not([data-study-session-active="true"]) .study-welcome .study-hub-label {
  width: 100%;
}
#study-area:not([data-study-session-active="true"]) .study-hub-label-topics {
  margin-top: 20px;
  margin-bottom: 5px;
}
#study-area:not([data-study-session-active="true"]) .study-topic-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  width: min(720px, 100%);
  margin: 6px auto 14px;
  padding-inline: clamp(6px, 2vw, 18px);
}
@media (max-width: 820px) {
  #study-area:not([data-study-session-active="true"]) .study-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 100px));
    grid-auto-rows: 100px;
  }
  #study-area:not([data-study-session-active="true"]) .study-discover-blocks {
    margin-top: auto;
    padding-top: 4px;
  }
}
@media (max-width: 420px) {
  #study-area:not([data-study-session-active="true"]) .study-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 92px));
    grid-auto-rows: 92px;
    gap: 8px;
  }
}

/* Study hub (empty session): mobile layout — scroll welcome, keep composer clear, ease header crowding */
@media (max-width: 768px) {
  body[data-nexus-page="study"] .app-header-brand-wrap {
    gap: 8px;
  }
  body[data-nexus-page="study"] .app-header-brand-wrap .header-atom {
    display: none !important;
  }
  /* Show up to 4 popular topic chips on mobile */
  body[data-nexus-page="study"] #study-area .study-topic-cards .study-topic-card:nth-child(n + 5) {
    display: none !important;
  }
  body[data-nexus-page="study"] #study-area .study-hub-label-topics {
    display: block !important;
  }
  body[data-nexus-page="study"] .app-header {
    padding-inline: 4px 8px;
    gap: 4px;
  }
  body[data-nexus-page="study"] .header-nav-pill {
    padding: 5px 8px;
    font-size: 0.68rem;
  }
  /* Empty hub: welcome fills main column above composer */
  body[data-nexus-page="study"] #study-area:not([data-study-session-active="true"]) .study-main {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }
  body[data-nexus-page="study"] #study-area:not([data-study-session-active="true"]) .study-main-inner {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    padding-top: 12px;
    padding-bottom: 8px;
  }
  #study-area:not([data-study-session-active="true"]) #study-welcome {
    flex: 1 1 0;
    min-height: 0;
    max-height: none !important;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 14px 12px 12px;
  }
  #study-area:not([data-study-session-active="true"]) .study-welcome-content {
    justify-content: flex-start;
    width: 100%;
    max-width: none;
  }
  #study-area:not([data-study-session-active="true"]) .study-discover-blocks {
    margin-top: 0;
    padding-top: 12px;
    padding-bottom: 16px;
    overflow-x: hidden;
    width: 100%;
    max-width: none;
  }
  body[data-nexus-page="study"]
    #study-area:not([data-study-session-active="true"])
    .study-quick-actions {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(104px, auto);
    gap: 12px;
    padding-inline: 0;
    justify-content: stretch;
    align-content: start;
  }
  #study-area:not([data-study-session-active="true"]) .study-welcome h2 {
    margin-bottom: 10px;
  }
  #study-area:not([data-study-session-active="true"]) .study-welcome p {
    margin-bottom: 16px;
  }
  #study-area:not([data-study-session-active="true"]) .study-chat-area {
    flex: 0 0 auto;
    padding: 8px 12px max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  }
  body[data-nexus-page="study"] .study-chat-input-row {
    gap: 8px;
  }
}
#study-area:not([data-study-session-active="true"]) .study-topic-card {
  border-radius: 999px;
  padding: 5px 11px;
  min-height: 0;
  font-size: 0.7rem;
  font-weight: 650;
  background: rgba(124, 58, 237, 0.18);
  border: 1px solid rgba(167, 139, 250, 0.35);
  color: var(--text);
}
[data-theme="light"] #study-area:not([data-study-session-active="true"]) .study-topic-card {
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(91, 33, 182, 0.28);
}

body[data-nexus-page="study"] .study-chat-messages .chat-msg.user {
  background: #6366f1 !important;
  color: #fff !important;
  box-shadow: none !important;
  border: 0.5px solid rgba(255, 255, 255, 0.2) !important;
}
body[data-nexus-page="study"] .study-chat-messages .chat-msg.assistant,
body[data-nexus-page="study"] .study-chat-messages .chat-msg.assistant.neon-cyan-chase {
  background: #f3f4ff !important;
  color: var(--text) !important;
  box-shadow: none !important;
  border: 0.5px solid rgba(167, 139, 250, 0.28) !important;
  backdrop-filter: none !important;
}
[data-theme="dark"] body[data-nexus-page="study"] .study-chat-messages .chat-msg.assistant,
[data-theme="dark"] body[data-nexus-page="study"] .study-chat-messages .chat-msg.assistant.neon-cyan-chase {
  background: rgba(49, 46, 129, 0.45) !important;
  color: #e8e4f0 !important;
  border-color: rgba(167, 139, 250, 0.25) !important;
}

body[data-nexus-page="study"] .study-chat-input-wrap {
  border: none !important;
  background: rgba(228, 231, 239, 0.94) !important;
  box-shadow:
    0 4px 24px rgba(15, 23, 42, 0.08),
    0 0 0 0.5px rgba(91, 33, 182, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}
body[data-nexus-page="study"] .study-chat-input-wrap:focus-within {
  box-shadow:
    0 8px 32px rgba(15, 23, 42, 0.1),
    0 0 0 1px rgba(99, 102, 241, 0.32),
    0 0 40px rgba(99, 102, 241, 0.1) !important;
}
[data-theme="dark"] body[data-nexus-page="study"] .study-chat-input-wrap {
  background: rgba(26, 26, 36, 0.88) !important;
  box-shadow:
    0 4px 28px rgba(0, 0, 0, 0.45),
    0 0 0 0.5px rgba(167, 139, 250, 0.2),
    0 0 36px rgba(99, 102, 241, 0.12) !important;
}
[data-theme="dark"] body[data-nexus-page="study"] .study-chat-input-wrap:focus-within {
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(167, 139, 250, 0.38),
    0 0 48px rgba(99, 102, 241, 0.14) !important;
}

[data-theme="light"] body[data-nexus-page="study"] .study-action-tile {
  background: linear-gradient(145deg, rgba(99, 102, 241, 0.16), rgba(91, 33, 182, 0.1)) !important;
  border: 0.5px solid rgba(91, 33, 182, 0.24) !important;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.1) !important;
}
[data-theme="light"] body[data-nexus-page="study"] .study-action-tile:hover {
  border-color: rgba(99, 102, 241, 0.38) !important;
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.14) !important;
}
[data-theme="light"] body[data-nexus-page="study"] .study-topic-card {
  background: rgba(99, 102, 241, 0.12) !important;
  border: 0.5px solid rgba(91, 33, 182, 0.22) !important;
  box-shadow: none !important;
}
[data-theme="light"] body[data-nexus-page="study"] .study-topic-card:hover {
  box-shadow: 0 0 0 0.5px rgba(99, 102, 241, 0.2) !important;
  background: rgba(99, 102, 241, 0.16) !important;
}
[data-theme="dark"] body[data-nexus-page="study"] .study-action-tile {
  background: linear-gradient(145deg, rgba(99, 102, 241, 0.22), rgba(49, 46, 129, 0.35)) !important;
  border-color: rgba(167, 139, 250, 0.28) !important;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35) !important;
}
[data-theme="dark"] body[data-nexus-page="study"] .study-topic-card {
  background: rgba(99, 102, 241, 0.14) !important;
  border-color: rgba(167, 139, 250, 0.32) !important;
}
[data-theme="dark"] body[data-nexus-page="study"] .study-topic-card:hover {
  background: rgba(99, 102, 241, 0.2) !important;
}

body[data-nexus-page="study"] .study-send-btn {
  background: linear-gradient(135deg, #6c3baa, #6366f1) !important;
}
body[data-nexus-page="study"] .study-send-btn:hover {
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.35) !important;
}

@media (prefers-reduced-motion: reduce) {
  body[data-nexus-page="study"] #study-welcome,
  body[data-nexus-page="study"] .study-discover-blocks,
  body[data-nexus-page="study"] .study-sidebar-extra-block {
    transition: none !important;
  }
}

.study-page-embed {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.study-page-embed > .study-shell {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-height: none;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.nexus-offscreen-chat {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.lp-feature-card--link {
  text-decoration: none;
  color: inherit;
}

/* =========================
   STUDY AREA OVERLAY
   ========================= */
.study-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(249, 250, 251, 0.97);
  display: flex;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.45s ease, backdrop-filter 0.45s ease;
  backdrop-filter: blur(0);
}
.study-overlay:not(.hidden) {
  backdrop-filter: blur(16px);
}
.study-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
[data-theme="dark"] .study-overlay {
  background: rgba(12,14,18,0.99);
}

.study-overlay > .study-shell {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-height: 100dvh;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.study-chrome-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(91, 33, 182, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 245, 255, 0.92));
}
[data-theme="dark"] .study-chrome-header {
  border-bottom-color: rgba(139, 92, 246, 0.2);
  background: linear-gradient(180deg, rgba(22, 22, 28, 0.98), rgba(16, 17, 22, 0.96));
}
.study-chrome-title {
  flex: 1;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.study-chrome-end {
  display: flex;
  align-items: center;
  gap: 8px;
}
.study-close-soft {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(91, 33, 182, 0.2);
  background: rgba(255, 255, 255, 0.75);
  color: var(--text);
  cursor: pointer;
}
[data-theme="dark"] .study-close-soft {
  background: rgba(30, 30, 40, 0.85);
  border-color: rgba(139, 92, 246, 0.35);
  color: #e8e4f0;
}
.study-panel-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(91, 33, 182, 0.15);
  background: rgba(255, 255, 255, 0.65);
}
[data-theme="dark"] .study-panel-toggle {
  background: rgba(30, 30, 40, 0.75);
  border-color: rgba(139, 92, 246, 0.22);
}

/* Entrance animations */
@keyframes studySidebarSlide {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes studyMainFade {
  from { opacity: 0; transform: scale(0.96) translateY(16px); filter: blur(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
@keyframes studyWelcomePop {
  from { opacity: 0; transform: translateY(24px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes studyTagPop {
  from { opacity: 0; transform: translateY(10px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.study-overlay:not(.hidden) .study-sidebar,
.study-page-embed .study-sidebar {
  animation: studySidebarSlide 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.study-overlay:not(.hidden) .study-main,
.study-page-embed .study-main {
  animation: studyMainFade 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}
.study-overlay:not(.hidden) .study-welcome-content,
.study-page-embed .study-welcome-content {
  animation: studyWelcomePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.18s both;
}
.study-overlay:not(.hidden) .study-action-tile,
.study-page-embed .study-action-tile {
  opacity: 0;
  animation: studyTagPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.study-overlay:not(.hidden) .study-action-tile:nth-child(1),
.study-page-embed .study-action-tile:nth-child(1) { animation-delay: 0.22s; }
.study-overlay:not(.hidden) .study-action-tile:nth-child(2),
.study-page-embed .study-action-tile:nth-child(2) { animation-delay: 0.3s; }
.study-overlay:not(.hidden) .study-topic-card,
.study-page-embed .study-topic-card {
  opacity: 0;
  animation: studyTagPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.study-overlay:not(.hidden) .study-topic-card:nth-child(1),
.study-page-embed .study-topic-card:nth-child(1) { animation-delay: 0.36s; }
.study-overlay:not(.hidden) .study-topic-card:nth-child(2),
.study-page-embed .study-topic-card:nth-child(2) { animation-delay: 0.4s; }
.study-overlay:not(.hidden) .study-topic-card:nth-child(3),
.study-page-embed .study-topic-card:nth-child(3) { animation-delay: 0.44s; }
.study-overlay:not(.hidden) .study-topic-card:nth-child(4),
.study-page-embed .study-topic-card:nth-child(4) { animation-delay: 0.48s; }
.study-overlay:not(.hidden) .study-topic-card:nth-child(5),
.study-page-embed .study-topic-card:nth-child(5) { animation-delay: 0.52s; }
.study-overlay:not(.hidden) .study-topic-card:nth-child(6),
.study-page-embed .study-topic-card:nth-child(6) { animation-delay: 0.56s; }
.study-overlay:not(.hidden) .study-chat-input-wrap,
.study-page-embed .study-chat-input-wrap {
  animation: dashSlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both;
}

@media (prefers-reduced-motion: reduce) {
  .study-overlay:not(.hidden) .study-sidebar,
  .study-overlay:not(.hidden) .study-main,
  .study-overlay:not(.hidden) .study-welcome-content,
  .study-overlay:not(.hidden) .study-action-tile,
  .study-overlay:not(.hidden) .study-topic-card,
  .study-overlay:not(.hidden) .study-chat-input-wrap,
  .study-page-embed .study-sidebar,
  .study-page-embed .study-main,
  .study-page-embed .study-welcome-content,
  .study-page-embed .study-action-tile,
  .study-page-embed .study-topic-card,
  .study-page-embed .study-chat-input-wrap {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .study-welcome-icon-ring,
  .study-welcome-icon-wrap,
  .study-inline-atom {
    animation: none !important;
  }
}

.study-layout {
  display: flex;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  max-height: 100%;
}

/* Scrollable middle of Study sidebar (footer + brand stay fixed) */
.study-sidebar-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#study-sidebar-panel.study-sidebar-collapsed {
  width: 0 !important;
  min-width: 0 !important;
  padding-left: 0;
  padding-right: 0;
  border-right: none;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

#study-sidebar-panel.study-sidebar {
  transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, min-width 0.32s ease;
}

.study-panel-toggle:focus-visible {
  outline: 2px solid rgba(139, 92, 246, 0.55);
  outline-offset: 2px;
}

.study-panel-toggle.is-collapsed {
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.25), 0 0 24px rgba(139, 92, 246, 0.12);
}

.study-sidebar-footer-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.study-footer-link-btn {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(139, 92, 246, 0.28);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(99, 102, 241, 0.08));
  color: #5b21b6;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.study-footer-link-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(139, 92, 246, 0.2);
  border-color: rgba(167, 139, 250, 0.45);
}

.study-footer-link-btn:focus-visible {
  outline: 2px solid rgba(139, 92, 246, 0.45);
  outline-offset: 2px;
}

[data-theme="dark"] .study-footer-link-btn {
  color: #e9d5ff;
  border-color: rgba(167, 139, 250, 0.35);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(79, 70, 229, 0.12));
}

[data-theme="dark"] .study-footer-link-btn:hover {
  box-shadow: 0 4px 22px rgba(139, 92, 246, 0.25);
}

.study-sidebar-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 14px 8px;
}

.study-btn-new-chat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 14px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.28);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(250, 245, 255, 0.94));
  color: #5b21b6;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(139, 92, 246, 0.08);
}
[data-theme="dark"] .study-btn-new-chat {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.24), rgba(79, 70, 229, 0.16));
  border-color: rgba(167, 139, 250, 0.38);
  color: #ede9fe;
}
.study-btn-new-chat:hover {
  transform: translateY(-2px);
  box-shadow: var(--n-cta-glow-strong);
  border-color: rgba(167, 139, 250, 0.5);
}
.study-btn-new-chat:focus-visible {
  outline: none;
  box-shadow: var(--n-cta-glow-strong);
}

.study-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px 14px;
  margin: 0;
}
.study-quick-link {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
  text-align: center;
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  color: #5b21b6;
  border: 1px solid rgba(139, 92, 246, 0.32);
  background: rgba(139, 92, 246, 0.07);
}
[data-theme="dark"] .study-quick-link {
  color: #ddd6fe;
  border-color: rgba(167, 139, 250, 0.38);
  background: rgba(139, 92, 246, 0.12);
}
.study-quick-link:hover {
  background: rgba(139, 92, 246, 0.16);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.15);
}
[data-theme="dark"] .study-quick-link:hover {
  background: rgba(139, 92, 246, 0.22);
}
.study-quick-link:focus-visible {
  outline: none;
  box-shadow: var(--n-cta-glow);
  border-color: rgba(167, 139, 250, 0.55);
}

.study-section-label {
  padding: 10px 16px 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  opacity: 0.88;
}

/* ---- Study Sidebar ---- */
.study-sidebar {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: color-mix(in srgb, var(--n-bg-raised) 94%, white);
  border-right: 1px solid var(--n-border-panel);
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-theme="dark"] .study-sidebar {
  background: color-mix(in srgb, var(--n-bg-raised) 94%, transparent);
  border-right-color: var(--n-border-panel);
}
.study-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px 14px;
  border-bottom: 1px solid rgba(139,92,246,0.08);
}
[data-theme="dark"] .study-sidebar-header {
  border-bottom-color: rgba(255,255,255,0.06);
}
.study-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}
.study-brand-atom {
  width: 28px;
  height: 28px;
  display: inline-flex;
  position: relative;
}
.study-brand-atom .atom-nucleus { width: 6px; height: 6px; }
.study-brand-atom .atom-ring { width: 26px; height: 26px; }
.study-brand-text {
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="dark"] .study-brand-text {
  background: linear-gradient(135deg, #a78bfa, #818cf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.study-sidebar-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.06);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.study-sidebar-close:hover {
  background: rgba(139,92,246,0.08);
  color: var(--text);
}
[data-theme="dark"] .study-sidebar-close {
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .study-sidebar-close:hover {
  background: rgba(139,92,246,0.15);
}

.study-sidebar-search {
  padding: 10px 14px;
  position: relative;
}
.study-search-icon {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  opacity: 0.6;
  pointer-events: none;
}
.study-search-input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.7);
  font-size: 0.82rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.study-search-input:focus {
  border-color: rgba(139,92,246,0.3);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.08);
}
[data-theme="dark"] .study-search-input {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
  color: #e8eaef;
}
[data-theme="dark"] .study-search-input:focus {
  border-color: rgba(139,92,246,0.35);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.1);
}

.study-tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
}
.study-tab {
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  display: flex;
  align-items: center;
  gap: 10px;
}
.study-tab svg { opacity: 0.6; flex-shrink: 0; transition: opacity 0.2s; }
.study-tab:hover {
  background: rgba(139,92,246,0.06);
  transform: translateX(2px);
}
.study-tab:hover svg { opacity: 1; }
.study-tab.active {
  background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(99,102,241,0.1));
  color: #7c3aed;
  font-weight: 700;
}
.study-tab.active svg { opacity: 1; color: #7c3aed; }
[data-theme="dark"] .study-tab.active {
  background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(99,102,241,0.14));
  color: #a78bfa;
}
[data-theme="dark"] .study-tab.active svg { color: #a78bfa; }

.study-sets-label {
  padding: 12px 16px 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  opacity: 0.7;
}

.study-sets-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  padding: 0 12px;
  scrollbar-width: thin;
}
.study-set-item {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.84rem;
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  border: none;
  background: none;
  text-align: left;
  width: 100%;
}
.study-set-item:hover {
  background: rgba(139,92,246,0.06);
  transform: translateX(2px);
}
[data-theme="dark"] .study-set-item:hover { background: rgba(139,92,246,0.08); }
.study-set-item.active {
  background: rgba(139,92,246,0.1);
  font-weight: 600;
  color: #7c3aed;
  border-left: 3px solid #7c3aed;
  padding-left: 9px;
}
[data-theme="dark"] .study-set-item.active {
  color: #a78bfa;
  border-left-color: #a78bfa;
  background: rgba(139,92,246,0.14);
}

.study-sidebar-footer {
  margin-top: auto;
  padding: 14px 14px 16px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
[data-theme="dark"] .study-sidebar-footer {
  border-top-color: rgba(255,255,255,0.06);
}
.study-sidebar-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 0;
  padding: 0 2px;
}
.study-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.study-stat-num {
  font-size: 1.1rem;
  font-weight: 700;
  color: #7c3aed;
}
[data-theme="dark"] .study-stat-num { color: #a78bfa; }
.study-stat-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.study-footer-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(139,92,246,0.2);
  background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(99,102,241,0.06));
  color: #7c3aed;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.study-footer-btn:hover {
  background: linear-gradient(135deg, rgba(139,92,246,0.14), rgba(99,102,241,0.1));
  border-color: rgba(139,92,246,0.35);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(139,92,246,0.15);
}
[data-theme="dark"] .study-footer-btn {
  color: #a78bfa;
  border-color: rgba(139,92,246,0.25);
  background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(99,102,241,0.08));
}
[data-theme="dark"] .study-footer-btn:hover {
  background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(99,102,241,0.14));
  border-color: rgba(139,92,246,0.45);
  box-shadow: 0 4px 16px rgba(139,92,246,0.2);
}

/* ---- Study Main Area ---- */
.study-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: transparent;
}
.study-main-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 24px 32px;
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.45) rgba(15, 23, 42, 0.35);
}
[data-theme="light"] .study-main-inner {
  scrollbar-color: rgba(91, 33, 182, 0.45) rgba(243, 244, 246, 0.95);
}
.study-close-btn {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.85);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: background 0.2s, color 0.2s, transform 0.15s;
  z-index: 5;
  backdrop-filter: blur(8px);
}
.study-close-btn:hover {
  background: rgba(139,92,246,0.08);
  color: var(--text);
  transform: scale(1.05);
}
[data-theme="dark"] .study-close-btn {
  background: rgba(26,26,34,0.85);
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .study-close-btn:hover {
  background: rgba(139,92,246,0.15);
  color: #e8eaef;
}

/* ---- Study Welcome ---- */
.study-welcome {
  text-align: center;
  margin: 0;
  padding: 16px 12px 20px;
  position: relative;
  flex: 0 1 auto;
  max-height: min(46vh, 420px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.study-welcome-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
[data-theme="dark"] .study-welcome-glow {
  background: radial-gradient(circle, rgba(139,92,246,0.12) 0%, transparent 70%);
}
.study-welcome-content {
  position: relative;
  z-index: 1;
}
.study-welcome-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 20px;
  animation: studyWelcomeFloat 5s ease-in-out infinite;
}
.study-welcome-icon-ring {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid rgba(139,92,246,0.15);
  animation: studyIconRing 3s ease-in-out infinite;
}
@keyframes studyWelcomeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes studyIconRing {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.15); opacity: 0.2; }
}
[data-theme="dark"] .study-welcome-icon-ring {
  border-color: rgba(167,139,250,0.2);
}
.study-welcome-icon {
  color: #7c3aed;
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(99,102,241,0.08));
}
[data-theme="dark"] .study-welcome-icon {
  color: #a78bfa;
  background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(99,102,241,0.12));
}
.study-welcome h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 10px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.study-welcome p {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: 0 0 20px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}
.study-hub-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px;
  text-align: center;
  opacity: 0.85;
}
.study-hub-label-topics {
  margin-top: 28px;
}
.study-quick-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 560px;
  margin: 0 auto 8px;
  width: 100%;
}
@media (min-width: 600px) {
  .study-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.study-action-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 8px;
  min-height: 120px;
  padding: 18px 18px 20px;
  border-radius: 16px;
  border: 1px solid rgba(167, 139, 250, 0.35);
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.18), rgba(99, 102, 241, 0.12));
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.study-action-tile:hover {
  border-color: rgba(196, 181, 253, 0.55);
  box-shadow: 0 16px 48px rgba(139, 92, 246, 0.28);
  transform: translateY(-4px) scale(1.01);
}
.study-action-tile:active {
  transform: translateY(-1px) scale(0.995);
}
[data-theme="light"] .study-action-tile {
  background: linear-gradient(145deg, rgba(124, 58, 237, 0.12), rgba(79, 70, 229, 0.08));
  border-color: rgba(91, 33, 182, 0.2);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.04), 0 10px 32px rgba(15, 23, 42, 0.08);
}
[data-theme="dark"] .study-action-tile {
  background: linear-gradient(145deg, color-mix(in srgb, var(--n-bg-card) 45%, rgba(139, 92, 246, 0.38)), color-mix(in srgb, var(--n-bg-raised) 35%, rgba(99, 102, 241, 0.22)));
  box-shadow: 0 0 0 1px var(--n-border-panel), 0 12px 44px rgba(0, 0, 0, 0.42);
}
.study-action-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.15);
  color: #e9d5ff;
}
[data-theme="light"] .study-action-icon {
  background: rgba(255, 255, 255, 0.65);
  color: #5b21b6;
}
.study-action-icon-quiz {
  color: #c4d4ff;
}
[data-theme="light"] .study-action-icon-quiz {
  color: #4338ca;
}
.study-action-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.study-action-desc {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 0;
}

.study-topic-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  max-width: 720px;
  margin: 1.25rem auto 0;
  width: 100%;
}
.study-hub-label-topics {
  margin-top: 1.75rem;
}
.study-topic-card {
  flex: 1 1 158px;
  max-width: 220px;
  min-height: 52px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(139, 92, 246, 0.18);
  background: rgba(255, 255, 255, 0.65);
  color: #5b21b6;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
}
.study-topic-card:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.35);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 32px rgba(139, 92, 246, 0.16);
}
.study-topic-card:active {
  transform: translateY(-1px) scale(0.99);
}
[data-theme="dark"] .study-topic-card {
  color: #ddd6fe;
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(167, 139, 250, 0.25);
}
[data-theme="dark"] .study-topic-card:hover {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(196, 181, 253, 0.4);
}
.study-topic-card:focus-visible {
  outline: none;
  box-shadow: var(--n-cta-glow);
  border-color: rgba(167, 139, 250, 0.5);
}

/* ---- Flashcard Carousel ---- */
.study-carousel-wrap {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0;
  max-height: min(38vh, 360px);
  overflow: hidden;
}
.study-carousel-wrap.hidden { display: none; }
.study-carousel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 16px;
}
.study-deck-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.study-card-counter {
  font-size: 0.82rem;
  font-weight: 600;
  color: #7c3aed;
  background: rgba(139,92,246,0.08);
  padding: 4px 12px;
  border-radius: 999px;
}
[data-theme="dark"] .study-card-counter {
  color: #a78bfa;
  background: rgba(139,92,246,0.14);
}
.study-carousel-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.study-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 20px 50px;
  max-width: 100%;
  scrollbar-width: none;
}
.study-carousel::-webkit-scrollbar { display: none; }
.study-flashcard {
  flex: 0 0 340px;
  min-height: 240px;
  border-radius: 18px;
  scroll-snap-align: center;
  cursor: pointer;
  position: relative;
  perspective: 800px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.study-flashcard:hover { transform: translateY(-4px); }
.study-flashcard.nav-out-left { animation: fcSlideOutLeft 0.28s ease both; }
.study-flashcard.nav-out-right { animation: fcSlideOutRight 0.28s ease both; }
.study-flashcard.nav-in-left { animation: fcSlideInLeft 0.28s ease both; }
.study-flashcard.nav-in-right { animation: fcSlideInRight 0.28s ease both; }

@keyframes fcSlideOutLeft {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-42px); opacity: 0.76; }
}
@keyframes fcSlideOutRight {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(42px); opacity: 0.76; }
}
@keyframes fcSlideInLeft {
  from { transform: translateX(-42px); opacity: 0.76; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes fcSlideInRight {
  from { transform: translateX(42px); opacity: 0.76; }
  to { transform: translateX(0); opacity: 1; }
}

.upload-limit-popup {
  position: fixed;
  top: 82px;
  right: 16px;
  z-index: 100060;
  padding: 12px 16px;
  border-radius: 12px;
  border: 2px solid rgba(239, 68, 68, 0.95);
  background: rgba(38, 10, 14, 0.94);
  color: #ffd4d4;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 12px 30px rgba(239, 68, 68, 0.26);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.upload-limit-popup.visible {
  opacity: 1;
  transform: translateY(0);
}
.study-flashcard-inner {
  width: 100%;
  min-height: 220px;
  position: relative;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}
.study-flashcard.flipped .study-flashcard-inner {
  transform: rotateY(180deg);
}
.study-flashcard-front,
.study-flashcard-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 18px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(139,92,246,0.1);
  box-shadow: 0 4px 24px rgba(139,92,246,0.06), 0 1px 3px rgba(0,0,0,0.04);
}
[data-theme="dark"] .study-flashcard-front,
[data-theme="dark"] .study-flashcard-back {
  background: rgba(22,22,30,0.95);
  border-color: rgba(139,92,246,0.18);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(139,92,246,0.08);
}
.study-flashcard-back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, rgba(139,92,246,0.06), rgba(255,255,255,0.95));
}
[data-theme="dark"] .study-flashcard-back {
  background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(22,22,30,0.95));
}
.study-flashcard-front h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 14px 0 8px;
}
.study-flashcard-front p,
.study-flashcard-back p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}
.study-flashcard-back p {
  color: var(--text);
  font-weight: 500;
}
.study-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.9);
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  backdrop-filter: blur(8px);
}
.study-carousel-nav:hover {
  background: rgba(139,92,246,0.08);
  color: #7c3aed;
  border-color: rgba(139,92,246,0.2);
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 4px 16px rgba(139,92,246,0.1);
}
[data-theme="dark"] .study-carousel-nav {
  background: rgba(26,26,34,0.9);
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .study-carousel-nav:hover {
  background: rgba(139,92,246,0.15);
  color: #a78bfa;
  border-color: rgba(139,92,246,0.3);
  box-shadow: 0 4px 16px rgba(139,92,246,0.15);
}
.study-nav-prev { left: 4px; }
.study-nav-next { right: 4px; }
.study-carousel-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 16px 0;
}
.study-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.12);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  border: none;
  padding: 0;
}
.study-carousel-dot.active {
  background: #7c3aed;
  width: 24px;
}
[data-theme="dark"] .study-carousel-dot { background: rgba(255,255,255,0.12); }
[data-theme="dark"] .study-carousel-dot.active { background: #a78bfa; }

/* ---- Study Chat ---- */
.study-chat-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.study-chat-atom-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.study-inline-atom {
  width: 36px;
  height: 36px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: studyAtomBob 4s ease-in-out infinite;
}
@keyframes studyAtomBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.study-inline-atom .atom-nucleus {
  width: 8px;
  height: 8px;
}
.study-inline-atom .atom-ring {
  width: 32px;
  height: 32px;
}
.study-chat-input-row .study-chat-input-wrap {
  flex: 1;
  min-width: 0;
}
.study-chat-composer-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
/* YouTube tool ( study chat ) */
.nexus-youtube-tool {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nexus-yt-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
[data-theme="light"] .nexus-yt-toggle {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.22);
}
.nexus-yt-toggle:hover {
  background: rgba(255, 0, 0, 0.1);
  border-color: rgba(255, 80, 80, 0.45);
}
.nexus-yt-toggle-icon {
  color: #ff0000;
  display: flex;
  align-items: center;
}
.nexus-yt-chevron {
  transition: transform 0.2s ease;
  opacity: 0.7;
}
.nexus-youtube-tool.is-open .nexus-yt-chevron {
  transform: rotate(180deg);
}
.nexus-yt-panel[hidden] {
  display: none !important;
}
.nexus-yt-panel:not([hidden]) {
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .nexus-yt-panel:not([hidden]) {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.nexus-yt-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.85;
  margin-bottom: 6px;
}
.nexus-yt-url-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font-size: 0.9rem;
}
[data-theme="light"] .nexus-yt-url-input {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.12);
}
.nexus-yt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.nexus-yt-open-web,
.nexus-yt-copy {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid rgba(99, 102, 241, 0.45);
  background: rgba(99, 102, 241, 0.15);
  color: var(--text);
  cursor: pointer;
}
.nexus-yt-open-web:hover,
.nexus-yt-copy:hover {
  background: rgba(99, 102, 241, 0.28);
}
.nexus-yt-open-web:disabled,
.nexus-yt-copy:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.nexus-yt-hint {
  font-size: 0.72rem;
  line-height: 1.4;
  opacity: 0.8;
  margin: 8px 0 0;
}

.study-chat-area {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 12px 0 16px;
  margin-top: auto;
}
.study-chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  -webkit-overflow-scrolling: touch;
}
[data-theme="light"] body[data-nexus-page="study"] .study-chat-messages {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 6px 0 8px;
  box-shadow: none;
}
.study-chat-input-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(139,92,246,0.12);
  border-radius: 14px;
  padding: 6px 8px 6px 6px;
  min-height: 52px;
  transition: border-color 0.25s, box-shadow 0.25s;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-theme="light"] body[data-nexus-page="study"] .study-chat-input-wrap {
  background: rgba(226, 230, 240, 0.96) !important;
  border: 1px solid rgba(71, 55, 110, 0.18) !important;
  box-shadow:
    0 3px 18px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}
.study-upload-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 10px;
  border: 1px solid rgba(139, 92, 246, 0.18);
  background: rgba(139, 92, 246, 0.06);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.study-upload-btn:hover {
  background: rgba(139, 92, 246, 0.12);
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.15);
}
.study-upload-btn:active {
  transform: scale(0.96);
}
[data-theme="dark"] .study-upload-btn {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #e8eaef;
}
[data-theme="dark"] .study-upload-btn:hover {
  background: rgba(139, 92, 246, 0.18);
}
.study-chat-input-wrap:focus-within {
  border-color: rgba(139,92,246,0.35);
  box-shadow: 0 0 0 4px rgba(139,92,246,0.06);
}
[data-theme="dark"] .study-chat-input-wrap {
  background: rgba(22,22,30,0.8);
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .study-chat-input-wrap:focus-within {
  border-color: rgba(139,92,246,0.4);
  box-shadow: 0 0 0 4px rgba(139,92,246,0.08);
}
.study-chat-input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 12px;
  border: none;
  background: transparent;
  font-size: 0.9rem;
  color: var(--text);
  outline: none;
}
[data-theme="dark"] .study-chat-input {
  color: #e8eaef;
}
.study-send-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
  flex-shrink: 0;
}
.study-send-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 16px rgba(139,92,246,0.35);
}
.study-send-btn:active {
  transform: scale(0.95);
}

/* Study chat bubbles */
.study-chat-bubble {
  padding: 10px 16px;
  border-radius: 14px;
  font-size: 0.88rem;
  line-height: 1.5;
  max-width: 85%;
  animation: studyTagPop 0.25s ease both;
}
.study-chat-user {
  align-self: flex-end;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.study-chat-ai {
  align-self: flex-start;
  background: rgba(139,92,246,0.08);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
[data-theme="dark"] .study-chat-ai {
  background: rgba(139,92,246,0.12);
}

/* =========================
   QUIZ MODAL
   ========================= */
.modal-quiz-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.modal-quiz-head h2 {
  margin: 0;
  font-size: 1.15rem;
}
.modal-quiz-x {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  border: 1px solid var(--border-glass);
  background: transparent;
  color: var(--text-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-quiz-x:hover {
  color: var(--text);
  background: rgba(139, 92, 246, 0.08);
}
.quiz-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.quiz-modal-actions .primary-btn,
.quiz-modal-actions .secondary-btn {
  width: 100%;
  min-height: 44px;
}
.quiz-upload-btn-inline {
  flex-shrink: 0;
  min-height: 44px;
}
.quiz-count-btn {
  min-height: 44px;
  padding: 10px 16px;
}

.quiz-modal-card {
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
}
.quiz-topic-section {
  margin-bottom: 20px;
}
.quiz-upload-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.quiz-file-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quiz-section-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.quiz-type-section { margin-bottom: 20px; }
.quiz-type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.quiz-chip {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.quiz-chip input[type="checkbox"] {
  display: none;
}
.quiz-chip span {
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid rgba(139,92,246,0.15);
  background: rgba(139,92,246,0.05);
  color: var(--text-muted);
  transition: all 0.2s;
  user-select: none;
}
.quiz-chip input:checked + span {
  background: rgba(139,92,246,0.15);
  border-color: rgba(139,92,246,0.4);
  color: #a78bfa;
}
[data-theme="light"] .quiz-chip input:checked + span {
  color: #7c3aed;
  background: rgba(139,92,246,0.1);
  border-color: rgba(139,92,246,0.3);
}
.quiz-chip:hover span {
  border-color: rgba(139,92,246,0.3);
}
.quiz-count-section { margin-bottom: 20px; }
.quiz-count-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.quiz-count-btn {
  padding: 8px 18px;
  border-radius: 10px;
  border: 1px solid rgba(139,92,246,0.12);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.quiz-count-btn:hover {
  border-color: rgba(139,92,246,0.3);
  background: rgba(139,92,246,0.06);
}
.quiz-count-btn.active {
  background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(99,102,241,0.1));
  border-color: rgba(139,92,246,0.4);
  color: #a78bfa;
}
[data-theme="light"] .quiz-count-btn.active {
  color: #7c3aed;
}
.quiz-count-ai {
  font-style: italic;
}
.quiz-generate-btn {
  width: 100%;
  margin-top: 4px;
}
.quiz-loading {
  text-align: center;
  padding: 40px 20px;
}
.quiz-loading-atom { width: 48px; height: 48px; margin: 0 auto 16px; }
.quiz-loading p { color: var(--text-muted); font-size: 0.92rem; }

/* Quiz questions display */
.quiz-display {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px 0;
}
.quiz-question {
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(139,92,246,0.1);
  background: rgba(139,92,246,0.03);
}
[data-theme="light"] .quiz-question {
  background: rgba(255,255,255,0.6);
}
.quiz-q-num {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a78bfa;
  margin-bottom: 6px;
}
[data-theme="light"] .quiz-q-num { color: #7c3aed; }
.quiz-q-text {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.5;
}
.quiz-q-type {
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.7;
  margin-bottom: 8px;
}
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.quiz-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(139,92,246,0.08);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text);
  font-size: 0.86rem;
  text-align: left;
  width: 100%;
}
.quiz-option:hover {
  background: rgba(139,92,246,0.06);
  border-color: rgba(139,92,246,0.2);
}
.quiz-option.selected {
  background: rgba(139,92,246,0.1);
  border-color: rgba(139,92,246,0.35);
  font-weight: 600;
}
.quiz-option.correct {
  background: var(--n-feedback-success-bg);
  border-color: var(--n-feedback-success-border);
  color: var(--n-feedback-success);
}
.quiz-option.wrong {
  background: var(--n-feedback-wrong-bg);
  border-color: var(--n-feedback-wrong-border);
  color: var(--n-feedback-wrong);
}
.quiz-text-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(139,92,246,0.12);
  background: transparent;
  color: var(--text);
  font-size: 0.86rem;
  outline: none;
}
.quiz-text-input:focus {
  border-color: rgba(139,92,246,0.35);
}

/* Quiz results */
.quiz-results {
  text-align: center;
  padding: 24px 0;
}
.quiz-score {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #a78bfa, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}
.quiz-results-msg {
  font-size: 0.92rem;
  color: var(--text-muted);
}

/* =========================
   ABOUT US MODAL
   ========================= */
.modal-about-card {
  max-width: 560px;
}
.modal-about-subhead {
  font-size: 1.05rem;
  color: #7c3aed;
  font-weight: 600;
  margin: -4px 0 20px;
}
[data-theme="dark"] .modal-about-subhead { color: #a78bfa; }
.modal-about-body p {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.modal-about-body p:last-child { margin-bottom: 0; }

/* =========================
   RESPONSIVE — MOBILE
   ========================= */
@media (max-width: 768px) {
  .landing-section { padding: 80px 16px 48px; min-height: auto; }
  .landing-hero { padding-top: 90px; gap: 28px; }
  .landing-hero .landing-title { font-size: clamp(1.6rem, 7vw, 2.4rem); }

  .hero-screen-body { flex-direction: column; }
  .hero-chat-sidebar { width: 100%; border-right: none; border-bottom: 1px solid rgba(0,0,0,0.06); padding: 12px; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  [data-theme="dark"] .hero-chat-sidebar { border-bottom-color: rgba(255,255,255,0.06); }
  .hero-sidebar-brand { margin-bottom: 0; margin-right: auto; }
  .hero-sidebar-item { padding: 6px 8px; font-size: 0.72rem; }
  .hero-chat-main { padding: 0; }
  .hero-chat-history { padding: 14px 14px 8px; }
  .hero-chat-bottom { padding: 8px 12px 10px; }

  .lp-feature-grid { grid-template-columns: 1fr; gap: 14px; }
  .lp-pricing-grid { grid-template-columns: 1fr; gap: 16px; }
  .lp-stats-row { gap: 24px; }

  /* Study area mobile */
  .study-layout { flex-direction: column; }
  .study-sidebar {
    width: 100%;
    max-height: 220px;
    border-right: none;
    border-bottom: 1px solid rgba(139,92,246,0.08);
  }
  [data-theme="dark"] .study-sidebar { border-bottom-color: rgba(255,255,255,0.06); }
  .study-tabs { flex-direction: row; flex-wrap: wrap; gap: 4px; padding: 6px 12px; }
  .study-tab { padding: 8px 12px; font-size: 0.78rem; }
  .study-sidebar-search { padding: 8px 12px; }
  .study-main-inner { padding: 20px 16px; }
  .study-chat-area { padding: 0 16px 16px; }
  .study-flashcard { flex: 0 0 280px; }
  .study-close-btn { top: 10px; right: 12px; width: 34px; height: 34px; }
  .study-sidebar-stats { gap: 12px; }
  .study-sets-label { display: none; }
}

/* Study standalone (study.html): mobile drawer sidebar below global header — overlays main + chrome */
@media (max-width: 768px) {
  /*
   * Kill .study-page-embed .study-sidebar { animation: studySidebarSlide … both } — it leaves
   * transform: translateX(0) from keyframes and fights the drawer’s translateX(-100%), so ~25% of
   * the panel stays visible when “closed” (duplicate / ghost edge).
   */
  body[data-nexus-page="study"] .study-page-embed .study-sidebar,
  body[data-nexus-page="study"] .study-page-embed #study-sidebar-panel.study-sidebar {
    animation: none !important;
  }
  body[data-nexus-page="study"] .study-sidebar-brand-row .study-brand-atom {
    display: none !important;
  }
  /* No overlay backdrop — only the drawer’s shadow separates from content; avoids duplicate dim + close timing */
  body[data-nexus-page="study"] .study-layout {
    flex-direction: row;
    flex: 1;
    min-height: 0;
    position: relative;
  }
  body[data-nexus-page="study"] .study-main {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
  }
  /* Open drawer: :not(.collapsed) so open-state opacity/pointer rules do not keep the panel visible when "closed" */
  body[data-nexus-page="study"] #study-sidebar-panel.study-sidebar:not(.study-sidebar-collapsed) {
    position: fixed;
    top: 60px;
    left: 0;
    width: min(86vw, 320px) !important;
    min-width: min(86vw, 320px) !important;
    max-width: min(86vw, 320px);
    height: calc(100dvh - 60px);
    max-height: calc(100dvh - 60px) !important;
    z-index: 9010;
    flex-shrink: 0;
    border-right: 1px solid var(--n-border-panel);
    border-bottom: none;
    box-shadow: 8px 0 28px rgba(0, 0, 0, 0.28);
    transform: translateX(0) !important;
    transition: transform 0.2s linear 0s !important;
    opacity: 1 !important;
    pointer-events: auto;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body[data-nexus-page="study"] #study-sidebar-panel.study-sidebar.study-sidebar-collapsed {
    position: fixed;
    top: 60px;
    left: 0;
    width: min(86vw, 320px) !important;
    min-width: min(86vw, 320px) !important;
    max-width: min(86vw, 320px);
    height: calc(100dvh - 60px);
    z-index: 9010;
    transform: translateX(-100%) !important;
    transition: transform 0.2s linear 0s !important;
    pointer-events: none !important;
    box-shadow: none;
    opacity: 1;
    border-right: none;
    overflow: hidden;
  }
  /* Full-bleed chat (overrides generic .study-main-inner from earlier mobile block) */
  body[data-nexus-page="study"] .study-main-inner {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 12px;
  }
  body[data-nexus-page="study"] .study-chat-area {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 480px) {
  .landing-hero-btns { flex-direction: column; align-items: stretch; }
  .lp-btn { padding: 12px 20px; font-size: 0.9rem; }
  .hero-screen-body { min-height: 260px; }
  .hero-chat-sidebar { display: none; }
  .study-flashcard { flex: 0 0 260px; min-height: 180px; }
  .study-carousel { padding: 16px 24px; }
  .lp-contact-wrap { margin-top: 20px; }
  .lp-btn-contact { padding: 12px 24px; font-size: 0.88rem; }
  .lp-stats-row { flex-direction: column; gap: 18px; }
  .lp-stat-number { font-size: 2rem !important; }
  .header-center-nav { gap: 8px; }
  .header-nav-pill { font-size: 0.72rem; padding: 6px 12px; }
}

@media (max-width: 360px) {
  .header-center-nav { gap: 6px; }
  .header-nav-pill { font-size: 0.68rem; padding: 5px 10px; }
  .hero-bubble { font-size: 0.78rem; }
}

/* ==========================================================================
   LANDING PAGE v2 — Colors, Auth Morph, Nav Glow, Compression, Springs
   ========================================================================== */

/* --- Cyan accent button (Try Features Free) --- */
.lp-btn-cyan {
  background: rgba(13,148,136,0.08);
  color: #0D9488;
  border: 1px solid rgba(13,148,136,0.25);
  box-shadow: 0 0 18px rgba(13,148,136,0.12), 0 2px 10px rgba(0,0,0,0.04);
}
.lp-btn-cyan:hover {
  background: rgba(13,148,136,0.14);
  box-shadow: 0 0 28px rgba(13,148,136,0.2), 0 4px 16px rgba(0,0,0,0.06);
  border-color: rgba(13,148,136,0.4);
}
[data-theme="dark"] .lp-btn-cyan {
  background: rgba(45,212,191,0.1);
  color: #2DD4BF;
  border-color: rgba(45,212,191,0.3);
  box-shadow: 0 0 20px rgba(45,212,191,0.15), 0 2px 10px rgba(0,0,0,0.2);
}
[data-theme="dark"] .lp-btn-cyan:hover {
  background: rgba(45,212,191,0.18);
  box-shadow: 0 0 32px rgba(45,212,191,0.25), 0 4px 16px rgba(0,0,0,0.3);
  border-color: rgba(45,212,191,0.5);
}

/* --- Auth Modal Morph-in Animation --- */
.modal.lp-morph-active {
  display: flex !important;
  visibility: visible !important;
}
.modal.lp-morph-active > .modal-backdrop {
  animation: lpMorphBackdrop 0.5s ease-in-out forwards;
}
.modal.lp-morph-active > .modal-card {
  animation: lpMorphCard 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.modal.lp-morph-active .auth-panel-inner > *,
.modal.lp-morph-active .auth-social-divider,
.modal.lp-morph-active .auth-social-row {
  animation: lpMorphContentIn 0.4s ease-out 0.15s both;
}

@keyframes lpMorphBackdrop {
  0% { opacity: 0; backdrop-filter: blur(0px); }
  100% { opacity: 1; backdrop-filter: blur(8px); }
}
@keyframes lpMorphCard {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(20px);
    border-radius: 999px;
  }
  50% {
    opacity: 1;
    border-radius: 24px;
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    border-radius: var(--radius, 14px);
  }
}
@keyframes lpMorphContentIn {
  0% { opacity: 0; transform: translateY(8px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Morph-out (reverse) */
.modal.lp-morph-out > .modal-backdrop {
  animation: lpMorphBackdrop 0.35s ease-in reverse forwards;
}
.modal.lp-morph-out > .modal-card {
  animation: lpMorphCard 0.35s ease-in reverse forwards;
}

/* --- Social Login in Auth Modal --- */
.auth-social-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.auth-social-divider::before,
.auth-social-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,0.1);
}
[data-theme="dark"] .auth-social-divider::before,
[data-theme="dark"] .auth-social-divider::after {
  background: rgba(255,255,255,0.08);
}
.auth-social-row {
  display: flex;
  gap: 12px;
}
.auth-social-row-single {
  justify-content: center;
}
.auth-social-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.85);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.25s, transform 0.2s;
}
.auth-google-btn {
  max-width: 320px;
}
.auth-social-btn:hover {
  background: rgba(255,255,255,1);
  border-color: rgba(0,0,0,0.18);
  box-shadow: 0 4px 20px rgba(66,133,244,0.18);
  transform: translateY(-1px);
}
.auth-social-btn:active {
  transform: translateY(0) scale(0.98);
}
[data-theme="dark"] .auth-social-btn {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: #e8eaef;
}
[data-theme="dark"] .auth-social-btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 4px 20px rgba(66,133,244,0.15);
  transform: translateY(-1px);
}

/* --- Section heading glow on nav scroll --- */
@keyframes lpHeadingGlow {
  0% { text-shadow: 0 0 0 transparent; }
  30% { text-shadow: 0 0 20px rgba(13,148,136,0.5), 0 0 40px rgba(13,148,136,0.2); }
  100% { text-shadow: 0 0 0 transparent; }
}
[data-theme="dark"] .lp-section-heading.lp-glow-active {
  animation: lpHeadingGlowDark 1s ease-out;
}
@keyframes lpHeadingGlowDark {
  0% { text-shadow: 0 0 0 transparent; }
  30% { text-shadow: 0 0 24px rgba(45,212,191,0.5), 0 0 48px rgba(45,212,191,0.2); }
  100% { text-shadow: 0 0 0 transparent; }
}
.lp-section-heading.lp-glow-active {
  animation: lpHeadingGlow 1s ease-out;
}
.lp-analytics-text.lp-glow-active {
  animation: lpHeadingGlow 1s ease-out;
}
[data-theme="dark"] .lp-analytics-text.lp-glow-active {
  animation: lpHeadingGlowDark 1s ease-out;
}


/* --- Pricing Spring / Bounce Animation --- */
.lp-pricing-card.lp-anim.lp-anim-slide-bottom {
  transition:
    opacity 0.7s ease,
    transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--anim-delay, 0s);
}

/* --- Pricing Button Pulse Glow --- */
.lp-btn-pulse {
  position: relative;
  overflow: visible;
}
.lp-btn-pulse::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(168,85,247,0.3), rgba(99,102,241,0.3));
  z-index: -1;
  animation: lpBtnPulse 2.5s ease-in-out infinite;
}
@keyframes lpBtnPulse {
  0%, 100% { opacity: 0; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
[data-theme="dark"] .lp-btn-pulse::after {
  background: linear-gradient(135deg, rgba(192,132,252,0.35), rgba(99,102,241,0.35));
}

/* --- Nav Compression Transition --- */
.landing-section.lp-nav-compressing {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
  transform: scaleY(0.5) translateY(-20%);
  opacity: 0;
  pointer-events: none;
}
.landing-section.lp-nav-compress-done {
  transition: none;
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

/* --- Updated color accents for landing elements --- */
[data-theme="light"] .lp-stat-number { color: #A855F7; }
[data-theme="light"] .hero-bubble-label { color: #A855F7; }
[data-theme="light"] .hero-sidebar-item.active { color: #A855F7; background: rgba(168,85,247,0.1); }
[data-theme="light"] .study-overlay {
  background: rgba(250,248,255,0.98);
}
[data-theme="light"] .study-sidebar {
  background: rgba(245,243,252,0.98);
  border-right-color: rgba(139,92,246,0.08);
}
[data-theme="light"] .study-sidebar-header {
  border-bottom-color: rgba(139,92,246,0.06);
}
[data-theme="light"] .study-tab.active {
  color: #7c3aed;
  background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(99,102,241,0.08));
}
[data-theme="light"] .study-tab:hover:not(.active) {
  background: rgba(139,92,246,0.05);
}
[data-theme="light"] .study-quick-tag {
  color: #6d28d9;
  border-color: rgba(139,92,246,0.15);
  background: rgba(255,255,255,0.9);
}
[data-theme="light"] .study-quick-tag:hover {
  background: rgba(139,92,246,0.08);
  border-color: rgba(139,92,246,0.3);
}
[data-theme="light"] .study-carousel-dot.active { background: #7c3aed; }
[data-theme="light"] .study-flashcard-front,
[data-theme="light"] .study-flashcard-back {
  background: #fff;
  box-shadow: 0 4px 24px rgba(139,92,246,0.06), 0 1px 3px rgba(0,0,0,0.04);
  border-color: rgba(139,92,246,0.08);
}
[data-theme="light"] .study-flashcard-back {
  background: linear-gradient(135deg, rgba(139,92,246,0.04), #fff);
}
[data-theme="light"] .study-carousel-nav {
  background: rgba(255,255,255,0.95);
  border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .study-carousel-nav:hover {
  background: rgba(139,92,246,0.06);
  color: #7c3aed;
  border-color: rgba(139,92,246,0.15);
}
[data-theme="light"] .lp-pricing-card li::before { background: #A855F7; }
[data-theme="light"] .modal-about-subhead { color: #A855F7; }

[data-theme="dark"] .lp-stat-number { color: #C084FC; }
[data-theme="dark"] .hero-bubble-label { color: #C084FC; }
[data-theme="dark"] .hero-sidebar-item.active { color: #C084FC; background: rgba(192,132,252,0.18); }
[data-theme="dark"] .study-carousel-dot.active { background: #a78bfa; }
[data-theme="dark"] .lp-pricing-card li::before { background: #C084FC; }
[data-theme="dark"] .modal-about-subhead { color: #C084FC; }

/* Dark theme: feature card glowing purple edges */
[data-theme="dark"] .lp-feature-card {
  border-color: rgba(192,132,252,0.15);
}
[data-theme="dark"] .lp-feature-card:hover {
  border-color: rgba(192,132,252,0.45);
  box-shadow: 0 0 30px rgba(192,132,252,0.2), 0 8px 30px rgba(0,0,0,0.4);
}

/* Dark theme: neon icon colors for feature cards */
[data-theme="dark"] .lp-icon-blue-purple {
  background: linear-gradient(135deg, #818cf8, #6366f1);
  box-shadow: 0 0 16px rgba(129,140,248,0.5);
}
[data-theme="dark"] .lp-icon-orange-red {
  background: linear-gradient(135deg, #fb923c, #f97316);
  box-shadow: 0 0 16px rgba(251,146,60,0.5);
}
[data-theme="dark"] .lp-icon-purple-pink {
  background: linear-gradient(135deg, #e879f9, #d946ef);
  box-shadow: 0 0 16px rgba(217,70,239,0.5);
}

/* Pricing featured card: neon purple border in dark */
[data-theme="dark"] .lp-pricing-featured {
  border-color: rgba(192,132,252,0.5) !important;
  box-shadow: 0 0 28px rgba(192,132,252,0.2);
}

@media (max-width: 480px) {
  .auth-social-row { flex-direction: column; }
}

/* ===== Contact Me button (landing analytics) ===== */
.lp-contact-wrap {
  text-align: center;
  margin-top: clamp(20px, 4vw, 36px);
}
.lp-btn-contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  background: linear-gradient(135deg, #a78bfa, #6366f1);
  color: #fff;
  border: none;
  box-shadow: 0 4px 20px rgba(139,92,246,0.3);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, filter 0.2s ease;
}
.lp-btn-contact:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 32px rgba(139,92,246,0.45);
  filter: brightness(1.08);
}
.lp-btn-contact:active {
  transform: scale(0.97);
}
[data-theme="light"] .lp-btn-contact {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  box-shadow: 0 4px 18px rgba(124,58,237,0.25);
}
[data-theme="light"] .lp-btn-contact:hover {
  box-shadow: 0 8px 28px rgba(124,58,237,0.35);
}

/* ===== Header logged-in / logged-out clusters ===== */
.header-loggedin-only {
  display: none !important;
}
body[data-user-logged-in="true"] .header-loggedin-only {
  display: inline-flex !important;
}
.header-loggedout-only {
  display: none !important;
}
body[data-user-logged-in="false"] .header-loggedout-only {
  display: inline-flex !important;
}
/* Avoid flash of “Log in” before /api/auth/me resolves when already signed in */
body[data-auth-pending="true"] .app-header .header-loggedout-only,
body[data-auth-pending="true"] .header-mobile-dropdown .header-loggedout-only {
  visibility: hidden !important;
}

/* ===== Sidebar toggle animation (scale + glow, no rotation) ===== */
.header-sidebar-toggle svg {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
}
.header-sidebar-toggle.is-open svg {
  transform: scale(1.1);
  filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.4));
}
.header-sidebar-toggle:not(.is-open) svg {
  transform: scale(1);
  filter: none;
}
.header-sidebar-toggle:active svg {
  transform: scale(0.9);
}

/* ===== Super-smooth text streaming ===== */
.chat-msg.assistant.streaming-live {
  will-change: contents;
}
.chat-msg.assistant.streaming-live .chat-msg-body {
  transition: none;
  will-change: contents;
  line-height: 1.7;
}
.chat-msg.assistant.streaming-live .chat-msg-body p,
.chat-msg.assistant.streaming-live .chat-msg-body li,
.chat-msg.assistant.streaming-live .chat-msg-body code,
.chat-msg.assistant.streaming-live .chat-msg-body pre {
  animation: streamWordFade 0.2s ease both;
}
@keyframes streamWordFade {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}
@keyframes streamCursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.chat-msg.assistant.streaming-live .chat-msg-body::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--accent, #2dd4bf);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: streamCursorBlink 0.8s ease-in-out infinite;
  border-radius: 1px;
}
.chat-msg.assistant:not(.streaming-live) .chat-msg-body::after {
  display: none;
}

/* ===== Dashboard entrance animations ===== */
@keyframes dashSlideLeft {
  from { opacity: 0; transform: translateX(-50px); filter: blur(6px); }
  to   { opacity: 1; transform: translateX(0);     filter: blur(0); }
}
@keyframes dashSlideUp {
  from { opacity: 0; transform: translateY(30px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes dashFadeScale {
  from { opacity: 0; transform: scale(0.94); filter: blur(6px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}
@keyframes dashBtnPop {
  from { opacity: 0; transform: translateX(-20px) scale(0.9); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

#view-dashboard.active #sidebar.dash-anim-in {
  animation: dashSlideLeft 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
#view-dashboard.active .chat-main.dash-anim-in {
  animation: dashFadeScale 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}
#view-dashboard.active .chat-topbar.dash-anim-in {
  animation: dashSlideUp 0.5s ease 0.15s forwards;
}
#view-dashboard.active #chat-input-area.dash-anim-in {
  animation: dashSlideUp 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}
#view-dashboard.active #sidebar .dash-nav-btn.dash-btn-in,
#view-dashboard.active #sidebar .dash-nav-icon-btn.dash-btn-in {
  animation: dashBtnPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) var(--dash-btn-delay, 0s) forwards;
}

.chat-messages .chat-msg {
  animation: dashSlideUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.chat-messages .chat-msg.user {
  animation-name: dashMsgRight;
}
@keyframes dashMsgRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.chat-messages .chat-msg.assistant {
  animation-name: dashMsgLeft;
}
@keyframes dashMsgLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ===== Settings Modal Animation ===== */
@keyframes settingsSlideIn {
  from { opacity: 0; transform: translateY(20px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes settingsSlideOut {
  from { opacity: 1; transform: translateY(0); filter: blur(0); }
  to   { opacity: 0; transform: translateY(20px); filter: blur(4px); }
}
.modal.modal-anim-in > .modal-card {
  animation: settingsSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.modal.modal-anim-in > .modal-backdrop {
  animation: lpMorphBackdrop 0.35s ease forwards;
}
.modal.modal-anim-out > .modal-card {
  animation: settingsSlideOut 0.3s ease forwards;
}
.modal.modal-anim-out > .modal-backdrop {
  animation: lpMorphBackdrop 0.3s ease reverse forwards;
}

/* ===== Light Theme Purple Polish ===== */
[data-theme="light"] .sidebar-btn {
  border-color: rgba(139, 92, 246, 0.12);
}
[data-theme="light"] .sidebar-btn:hover {
  background: rgba(139, 92, 246, 0.06);
  border-color: rgba(139, 92, 246, 0.2);
}

/* ===========================================================================
   MACOS-STYLE THEME OVERHAUL — Solid backgrounds, stronger purple, animations
   =========================================================================== */

/* --- Global button base (replaces neon trail visuals) --- */
.primary-btn,
.secondary-btn,
.danger-btn,
.header-nav-pill,
.header-sidebar-toggle,
.auth-tab,
.landing-action-btn,
.chat-input-btn,
.dash-nav-btn,
.dash-nav-icon-btn,
.dash-sidebar-toggle,
.dash-theme-btn,
.convo-item,
.nexus-quiz-option-btn,
.nexus-quiz-submit {
  transition: background 0.22s cubic-bezier(0.4,0,0.2,1),
              color 0.22s cubic-bezier(0.4,0,0.2,1),
              border-color 0.22s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.22s cubic-bezier(0.4,0,0.2,1),
              transform 0.18s cubic-bezier(0.4,0,0.2,1) !important;
}

/* --- Primary button --- */
.primary-btn {
  background: rgba(139,92,246,0.12) !important;
  border: 1px solid rgba(139,92,246,0.25) !important;
  color: #a78bfa !important;
  border-radius: 10px !important;
}
.primary-btn:hover {
  background: rgba(139,92,246,0.2) !important;
  border-color: rgba(139,92,246,0.45) !important;
  transform: scale(1.02);
  box-shadow: 0 2px 12px rgba(139,92,246,0.15);
}
.primary-btn:active {
  transform: scale(0.98);
  box-shadow: none;
}
[data-theme="light"] .primary-btn {
  background: rgba(109,40,217,0.1) !important;
  border-color: rgba(109,40,217,0.3) !important;
  color: #6d28d9 !important;
}
[data-theme="light"] .primary-btn:hover {
  background: rgba(109,40,217,0.18) !important;
  border-color: rgba(109,40,217,0.5) !important;
  box-shadow: 0 2px 12px rgba(109,40,217,0.12);
}

/* --- Secondary button --- */
.secondary-btn {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: var(--text-muted) !important;
  border-radius: 10px !important;
}
.secondary-btn:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(139,92,246,0.2) !important;
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.secondary-btn:active { transform: scale(0.98); }
[data-theme="light"] .secondary-btn {
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(109,40,217,0.12) !important;
  color: #4b5563 !important;
}
[data-theme="light"] .secondary-btn:hover {
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.12), rgba(99, 102, 241, 0.1)) !important;
  border-color: rgba(109, 40, 217, 0.38) !important;
  color: #312e81 !important;
  box-shadow: 0 2px 10px rgba(109, 40, 217, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* --- Danger button --- */
.danger-btn {
  background: rgba(220,38,38,0.08) !important;
  border: 1px solid rgba(248,113,113,0.2) !important;
  color: #fca5a5 !important;
  border-radius: 10px !important;
}
.danger-btn:hover {
  background: rgba(220,38,38,0.15) !important;
  border-color: rgba(248,113,113,0.4) !important;
  transform: scale(1.02);
}
.danger-btn:active { transform: scale(0.98); }
[data-theme="light"] .danger-btn {
  background: rgba(220,38,38,0.06) !important;
  border-color: rgba(220,38,38,0.2) !important;
  color: #dc2626 !important;
}

/* --- Header nav pills (macOS block: must not override current page) --- */
.header-nav-pill:not(.header-nav-pill--current):not(.active-pill) {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 8px 16px;
  font-weight: 600;
}
.header-nav-pill:not(.header-nav-pill--current):not(.active-pill):hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.25);
  transform: scale(1.03);
  box-shadow: 0 2px 10px rgba(139, 92, 246, 0.1);
}
.header-nav-pill:not(.header-nav-pill--current):not(.active-pill):active {
  transform: scale(0.97);
}
[data-theme="light"] .header-nav-pill:not(.header-nav-pill--current):not(.active-pill) {
  background: rgba(28, 25, 23, 0.04);
  border-color: rgba(108, 59, 170, 0.1);
  color: var(--text);
}
[data-theme="light"] .header-nav-pill:not(.header-nav-pill--current):not(.active-pill):hover {
  background: rgba(108, 59, 170, 0.1);
  border-color: rgba(108, 59, 170, 0.26);
  color: #6c3baa;
  box-shadow: 0 2px 10px rgba(108, 59, 170, 0.08);
}
.header-nav-pill.active-pill,
.header-nav-pill.header-nav-pill--current {
  transform: none;
  box-shadow: none;
}
.header-nav-pill.active-pill:hover,
.header-nav-pill.header-nav-pill--current:hover {
  transform: none;
  box-shadow: none;
}

/* --- Header sidebar toggle --- */
.header-sidebar-toggle {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}
.header-sidebar-toggle:not(.clean-hover):hover {
  background: rgba(139,92,246,0.1);
  border-color: rgba(139,92,246,0.25);
  transform: scale(1.05);
}
.header-sidebar-toggle:active { transform: scale(0.95); }
[data-theme="light"] .header-sidebar-toggle {
  background: rgba(255,255,255,0.5);
  border-color: rgba(109,40,217,0.1);
}
[data-theme="light"] .header-sidebar-toggle:not(.clean-hover):hover {
  background: rgba(109,40,217,0.08);
  border-color: rgba(109,40,217,0.2);
}
.header-sidebar-toggle.clean-hover:hover {
  border-color: rgba(139,92,246,0.35);
  transform: scale(1.05);
}
[data-theme="light"] .header-sidebar-toggle.clean-hover:hover {
  border-color: rgba(109,40,217,0.28);
}

/* --- Chat input wrap (remove trail, solid bg) --- */
.chat-input-wrap {
  background: rgba(12,14,20,0.7) !important;
  border: 1px solid rgba(139,92,246,0.12) !important;
  border-radius: 14px !important;
}
.chat-input-wrap:focus-within {
  border-color: rgba(139,92,246,0.35) !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,0.1) !important;
}
[data-theme="light"] .chat-input-wrap {
  background: var(--bg-input-fill, #fafbfc) !important;
  border-color: rgba(109,40,217,0.16) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}
[data-theme="light"] .chat-input-wrap:focus-within {
  border-color: rgba(109,40,217,0.35) !important;
  box-shadow: 0 0 0 3px rgba(109,40,217,0.08) !important;
}

/* --- Chat input buttons --- */
.chat-input-btn {
  background: rgba(139,92,246,0.08);
  border: 1px solid rgba(139,92,246,0.12);
  border-radius: 8px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
}
.chat-input-btn:hover {
  background: rgba(139,92,246,0.15);
  border-color: rgba(139,92,246,0.3);
  transform: scale(1.08);
}
.chat-input-btn:active { transform: scale(0.94); }
[data-theme="light"] .chat-input-btn {
  background: rgba(109,40,217,0.06);
  border-color: rgba(109,40,217,0.1);
}
[data-theme="light"] .chat-input-btn:hover {
  background: rgba(109,40,217,0.12);
  border-color: rgba(109,40,217,0.25);
}

/* --- Landing input shell --- */
.landing-input-shell {
  background: rgba(12,14,20,0.7) !important;
  border: 1px solid rgba(139,92,246,0.12) !important;
  border-radius: 14px !important;
}
.landing-input-shell:focus-within {
  border-color: rgba(139,92,246,0.35) !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,0.1) !important;
}
[data-theme="light"] .landing-input-shell {
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(109,40,217,0.12) !important;
}
[data-theme="light"] .landing-input-shell:focus-within {
  border-color: rgba(109,40,217,0.35) !important;
  box-shadow: 0 0 0 3px rgba(109,40,217,0.08) !important;
}

/* --- Landing action buttons --- */
.landing-action-btn {
  background: rgba(139,92,246,0.08);
  border: 1px solid rgba(139,92,246,0.12);
  border-radius: 8px;
}
.landing-action-btn:hover {
  background: rgba(139,92,246,0.15);
  border-color: rgba(139,92,246,0.3);
  transform: scale(1.08);
}
.landing-action-btn:active { transform: scale(0.94); }

/* --- Auth tabs --- */
.auth-tab {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}
.auth-tab:hover {
  background: rgba(139,92,246,0.08);
  border-color: rgba(139,92,246,0.2);
}
.auth-tab.active {
  background: rgba(139,92,246,0.12);
  border-color: rgba(139,92,246,0.3);
  color: #a78bfa;
}
[data-theme="light"] .auth-tab {
  background: rgba(255,255,255,0.5);
  border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .auth-tab.active {
  background: rgba(109,40,217,0.1);
  border-color: rgba(109,40,217,0.3);
  color: #6d28d9;
}

/* --- Convo items --- */
.convo-item {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
}
.convo-item:hover {
  background: rgba(139,92,246,0.06);
  border-color: rgba(139,92,246,0.12);
  transform: translateX(2px);
}
.convo-item.active {
  background: rgba(139,92,246,0.1);
  border-color: rgba(139,92,246,0.2);
}
[data-theme="light"] .convo-item:hover {
  background: rgba(109,40,217,0.05);
  border-color: rgba(109,40,217,0.1);
}
[data-theme="light"] .convo-item.active {
  background: rgba(109,40,217,0.08);
  border-color: rgba(109,40,217,0.15);
}

/* --- Assistant action buttons (copy, speak) --- */
.assistant-action-btn {
  background: rgba(139,92,246,0.06);
  border: 1px solid rgba(139,92,246,0.1);
  border-radius: 8px;
}
.assistant-action-btn:hover {
  background: rgba(139,92,246,0.12);
  border-color: rgba(139,92,246,0.25);
  transform: scale(1.08);
}
.assistant-action-btn:active { transform: scale(0.94); }
[data-theme="light"] .assistant-action-btn {
  background: rgba(109,40,217,0.05);
  border-color: rgba(109,40,217,0.08);
}
[data-theme="light"] .assistant-action-btn:hover {
  background: rgba(109,40,217,0.1);
  border-color: rgba(109,40,217,0.2);
}

/* --- Modal cards --- */
.modal-card {
  border: 1px solid rgba(139,92,246,0.1) !important;
  background: rgba(16,17,22,0.96) !important;
  border-radius: 16px !important;
}
[data-theme="light"] .modal-card {
  background: rgba(255,255,255,0.97) !important;
  border-color: rgba(109,40,217,0.12) !important;
}

/* --- Stronger purple for light theme globally --- */
[data-theme="light"] {
  --text: #1f1635;
  --text-muted: #534970;
}

/* --- Input focus glow --- */
.modal-input:focus,
.dash-search-input:focus,
.settings-select:focus,
.quiz-text-input:focus {
  border-color: rgba(109,40,217,0.4) !important;
  box-shadow: 0 0 0 3px rgba(109,40,217,0.08) !important;
  outline: none;
}
[data-theme="dark"] .modal-input:focus,
[data-theme="dark"] .dash-search-input:focus {
  border-color: rgba(139,92,246,0.4) !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,0.1) !important;
}

/* --- Clean hover for remaining elements --- */
.clean-hover {
  transition: background 0.22s cubic-bezier(0.4,0,0.2,1),
              transform 0.18s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.22s cubic-bezier(0.4,0,0.2,1) !important;
}
.clean-hover:hover { transform: scale(1.02); }
.clean-hover:active { transform: scale(0.98); }

/* --- Streaming cursor on assistant text --- */
.chat-msg.assistant.streaming-live .chat-msg-body::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  background: #a78bfa;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: streamCursorBlink 0.7s step-end infinite;
}
[data-theme="light"] .chat-msg.assistant.streaming-live .chat-msg-body::after {
  background: #7c3aed;
}
@keyframes streamCursorBlink {
  50% { opacity: 0; }
}

/* --- Custom tooltip (JS: #nexus-tooltip); ::after disabled to avoid double tips --- */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: none !important;
  display: none !important;
}
#nexus-tooltip.nexus-tooltip {
  position: fixed;
  z-index: 100003;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(16, 17, 22, 0.94);
  backdrop-filter: blur(10px);
  color: #e0dce8;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
  max-width: min(300px, calc(100vw - 24px));
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

#nexus-tooltip.nexus-tooltip.nexus-tooltip--wrap {
  white-space: normal;
  word-break: break-word;
  overflow: visible;
  text-overflow: unset;
}
#nexus-tooltip.nexus-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}
[data-theme="light"] #nexus-tooltip.nexus-tooltip {
  background: rgba(40, 32, 58, 0.95);
  color: #f3f0ff;
  border-color: rgba(109, 40, 217, 0.2);
  box-shadow: 0 4px 20px rgba(109, 40, 217, 0.12);
}

/* --- Mobile compatibility for all new styles --- */
@media (max-width: 768px) {
  .primary-btn, .secondary-btn, .danger-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    font-size: 0.84rem !important;
  }
  .header-nav-pill {
    padding: 6px 10px !important;
    font-size: 0.76rem !important;
    min-height: 38px;
  }
  .header-sidebar-toggle {
    min-width: 40px; min-height: 40px;
  }
  .chat-input-btn {
    min-width: 40px; min-height: 40px;
  }
  .dash-nav-btn, .dash-nav-icon-btn {
    min-height: 44px !important;
    font-size: 0.84rem !important;
  }
  .convo-item {
    min-height: 44px;
    padding: 10px 12px !important;
  }
  .auth-tab {
    min-height: 44px;
  }
  .app-header-brand-wrap {
    gap: 10px !important;
    padding-left: 0;
  }
  .modal-card {
    margin: 12px !important;
    max-height: calc(100vh - 24px) !important;
  }
}