/* ═══════════════════════════════════════════════════════
   THEME.CSS — shared transitions, skeletons, bg themes
   ═══════════════════════════════════════════════════════ */

/* ═════════ COOLALERT VIEWPORT CENTERING ═════════ */
.cool-alert-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99999 !important;
}

/* ═════════ PAGE TRANSITIONS ═════════ */
body {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}
body.page-ready {
  opacity: 1;
  transform: none;
}
body.page-leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease;
}

/* ═════════ BACKGROUND THEMES ═════════ */
/* User-chosen accent drives the ambient background glow */
body {
  --grid-opacity: 0.08;
  --glow-opacity: 1;
  background-image:
    linear-gradient(rgb(197 174 235 / var(--grid-opacity, 0)) 1px, transparent 1px),
    linear-gradient(90deg, rgb(197 174 235 / var(--grid-opacity, 0)) 1px, transparent 1px),
    radial-gradient(ellipse 1400px 850px at 8% 0%, hsla(var(--user-accent-h, 260), var(--user-accent-s, 84%), 52%, calc(0.38 * var(--glow-opacity, 1))) 0%, transparent 58%),
    radial-gradient(ellipse 1100px 650px at 92% 5%, hsla(var(--user-accent2-h, 290), var(--user-accent2-s, 94%), 55%, calc(0.28 * var(--glow-opacity, 1))) 0%, transparent 56%),
    radial-gradient(ellipse 800px 550px at 50% 55%, hsla(var(--user-accent-h, 260), var(--user-accent-s, 84%), 48%, calc(0.16 * var(--glow-opacity, 1))) 0%, transparent 62%),
    radial-gradient(ellipse 500px 400px at 30% 80%, hsla(var(--user-accent2-h, 290), var(--user-accent2-s, 94%), 50%, calc(0.10 * var(--glow-opacity, 1))) 0%, transparent 60%);
  background-size:
    42px 42px,
    42px 42px,
    auto,
    auto,
    auto,
    auto;
  background-position:
    0 0,
    0 0,
    8% 0%,
    92% 5%,
    50% 55%,
    30% 80%;
  animation: ambientBgDrift 80s ease-in-out infinite alternate;
}

body.page-home {
  --grid-opacity: 0;
}

.bg-orb,
.bg-orb--1,
.bg-orb--2,
.bg-orb--3 {
  display: none !important;
  animation: none !important;
}

/* Solid-color mode: strip gradients, apply flat bg */
body.bg-solid {
  background-image: none !important;
  background-color: var(--solid-bg, #0a0118) !important;
}

/* ═════════ LIGHT-BG ADAPTIVE TEXT ═════════ */
/* When the solid bg is light, flip all text / surface / border tokens to dark */
body.bg-light {
  --ink: #1a1025;
  --ink-soft: #3d2e55;
  --ink-muted: #6b5a82;
  --line: rgba(30, 10, 60, 0.18);
  --line-strong: rgba(30, 10, 60, 0.30);
  --surface: rgba(0, 0, 0, 0.06);
  --surface-2: rgba(0, 0, 0, 0.09);
  --surface-hover: rgba(0, 0, 0, 0.10);
  --border: rgba(30, 10, 60, 0.12);
  --border-2: rgba(30, 10, 60, 0.22);
  color: var(--ink);
}
body.bg-light .topbar {
  background: rgba(255, 255, 255, 0.55);
  border-bottom-color: rgba(30, 10, 60, 0.12);
}
body.bg-light .topbar-link { color: #3d2e55; }
body.bg-light .topbar-link:hover { color: #1a1025; background: rgba(0,0,0,.06); border-color: rgba(30,10,60,.12); }
body.bg-light #user-email { color: #3d2e55; }
body.bg-light #logout-btn {
  background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.18); color: #dc2626;
}
body.bg-light .badge { background: rgba(143,73,230,.1); border-color: rgba(143,73,230,.25); color: #7c3aed; }
body.bg-light .badge-dot { background: #7c3aed; box-shadow: 0 0 8px rgba(124,58,237,.5); }
body.bg-light h1,
body.bg-light h2,
body.bg-light h3 { color: #1a1025; }
body.bg-light h1 { background: linear-gradient(135deg, #1a1025 30%, #5b3a8a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.bg-light .subtitle,
body.bg-light .card-header-sub { color: #6b5a82; }
body.bg-light .card-header h2 { color: #1a1025; }
body.bg-light .settings-card,
body.bg-light .create-card {
  background: rgba(255,255,255,.45);
  border-color: rgba(30,10,60,.12);
  box-shadow: 0 8px 30px rgba(0,0,0,.06);
}
body.bg-light .setting-info p { color: #6b5a82; }
body.bg-light .setting-info h3 { color: #1a1025; }
body.bg-light .setting-value { color: #3d2e55; }
body.bg-light .module-item {
  background: rgba(255,255,255,.45);
  border-color: rgba(30,10,60,.12);
}
body.bg-light .module-item:hover {
  background: rgba(255,255,255,.6);
  border-color: rgba(30,10,60,.2);
}
body.bg-light .module-item h3 { color: #1a1025; }
body.bg-light .module-meta { color: #6b5a82; }
body.bg-light .module-score { color: #7c3aed; }
body.bg-light input,
body.bg-light textarea {
  background: rgba(255,255,255,.5);
  border-color: rgba(30,10,60,.15);
  color: #1a1025;
}
body.bg-light input::placeholder,
body.bg-light textarea::placeholder { color: #8a7a9e; }
body.bg-light input:focus,
body.bg-light textarea:focus {
  border-color: rgba(143,73,230,.4);
  box-shadow: 0 0 0 3px rgba(143,73,230,.1);
}
body.bg-light .upload-zone {
  border-color: rgba(30,10,60,.18);
  background: rgba(255,255,255,.3);
  color: #6b5a82;
}
body.bg-light .upload-zone:hover { border-color: rgba(143,73,230,.35); background: rgba(143,73,230,.06); }
body.bg-light .upload-zone strong { color: #3d2e55; }
body.bg-light .msg { color: #3d2e55; }
body.bg-light .empty-state { color: #6b5a82; }
body.bg-light .empty-state strong { color: #1a1025; }
body.bg-light .skeleton-card {
  background: linear-gradient(90deg, rgba(0,0,0,.04) 25%, rgba(0,0,0,.07) 50%, rgba(0,0,0,.04) 75%);
  background-size: 400% 100%;
  border-color: rgba(30,10,60,.08);
}
body.bg-light .color-hex { color: #3d2e55; }
body.bg-light .range-value { color: #3d2e55; }
body.bg-light .range-input { background: rgba(143,73,230,.15); }
body.bg-light .toggle-slider { background: rgba(30,10,60,.15); border-color: rgba(30,10,60,.18); }
body.bg-light .segment-btn { color: #6b5a82; }
body.bg-light .segment-btn:hover { color: #3d2e55; }
body.bg-light .segment-control { background: rgba(255,255,255,.4); border-color: rgba(30,10,60,.15); }
body.bg-light .summary-btn { background: rgba(143,73,230,.1); color: #7c3aed; border-color: rgba(143,73,230,.2) !important; }
body.bg-light .material-divider { color: #6b5a82; }
body.bg-light .file-indicator { color: #6b5a82; background: rgba(255,255,255,.4); border-color: rgba(30,10,60,.12); }
body.bg-light .name-input { background: rgba(255,255,255,.5); border-color: rgba(30,10,60,.15); color: #1a1025; }
body.bg-light .name-input::placeholder { color: #8a7a9e; }
/* study + practice page adaptive overrides */
body.bg-light .nav-chip {
  color: #3d2e55;
  background: rgba(124,58,237,.08);
  border-color: rgba(30,10,60,.14);
}
body.bg-light .nav-chip:hover {
  color: #1a1025;
  background: rgba(124,58,237,.14);
}
body.bg-light .hero-panel,
body.bg-light .panel,
body.bg-light .quick-steps,
body.bg-light .exp-block,
body.bg-light .quiz-sidebar,
body.bg-light .tip-item,
body.bg-light .option,
body.bg-light .chat-drawer,
body.bg-light .drawer-head,
body.bg-light .chat-form,
body.bg-light .chat-form input,
body.bg-light .chat-messages .msg.assistant {
  background: rgba(255,255,255,.45) !important;
  border-color: rgba(30,10,60,.14) !important;
  color: #1a1025;
}
body.bg-light .panel-tag,
body.bg-light .eyebrow,
body.bg-light .step-number,
body.bg-light .exp-block h3,
body.bg-light .counter-current {
  color: #7c3aed !important;
}
body.bg-light .hint-text,
body.bg-light .hero-subject,
body.bg-light .step-card p,
body.bg-light .chat-status,
body.bg-light .practice-note,
body.bg-light .counter-total,
body.bg-light .counter-sep,
body.bg-light .submit-status {
  color: #6b5a82 !important;
}
body.bg-light .quiz-config textarea,
body.bg-light .quiz-config select,
body.bg-light #quiz-guidance,
body.bg-light #question-count,
body.bg-light .pager button,
body.bg-light .sidebar-counter {
  background: rgba(255,255,255,.55) !important;
  border-color: rgba(30,10,60,.15) !important;
  color: #1a1025 !important;
}
body.bg-light .quiz-config textarea::placeholder,
body.bg-light #quiz-guidance::placeholder {
  color: #8a7a9e !important;
}
body.bg-light .actions a {
  color: #7c3aed;
  background: rgba(124,58,237,.08);
  border-color: rgba(124,58,237,.2);
}
body.bg-light .actions a:hover {
  background: rgba(124,58,237,.14);
}
body.bg-light .actions button {
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.2);
  color: #dc2626;
}
body.bg-light .chat-messages .msg.user,
body.bg-light .btn-accent,
body.bg-light .btn-cta,
body.bg-light .chat-form button,
body.bg-light #next-btn {
  background: linear-gradient(135deg, #8f49e6, #b06cff) !important;
  color: #fff !important;
}
body.bg-light .drawer-close {
  background: rgba(124,58,237,.1) !important;
  color: #3d2e55 !important;
  border-color: rgba(30,10,60,.15) !important;
}
body.bg-light .step-card {
  background: rgba(255,255,255,.4) !important;
  border-color: rgba(30,10,60,.15) !important;
}
body.bg-light .quiz-main,
body.bg-light .question-card h2,
body.bg-light .sidebar-header h1,
body.bg-light .option {
  color: #1a1025 !important;
}
body.bg-light .option-prefix {
  background: rgba(0,0,0,.06) !important;
  color: #3d2e55 !important;
}
body.bg-light .option.selected {
  background: rgba(124,58,237,.1) !important;
  border-color: rgba(124,58,237,.35) !important;
}
body.bg-light .option.selected .option-prefix {
  background: #8f49e6 !important;
  color: #fff !important;
}
/* feedback page — question text + review cards on light bg */
body.bg-light .review-item .review-question strong { color: #1a1025; }
body.bg-light .review-question { color: #1a1025; }
body.bg-light .review-item { background: rgba(255,255,255,.45); border-color: rgba(30,10,60,.12); }
body.bg-light .review-item:hover { border-color: rgba(30,10,60,.2); }
body.bg-light .review-header:hover { background: rgba(0,0,0,.04); }
body.bg-light .review-number { color: inherit; }
body.bg-light .review-item p { color: #6b5a82; }
body.bg-light .score-hero { background: linear-gradient(180deg, rgba(124,58,237,.06) 0%, transparent 100%); border-bottom-color: rgba(30,10,60,.12); }
body.bg-light .hero-title { color: #3d2e55; }
body.bg-light .correct-label { color: #6b5a82; }
body.bg-light .correct-label strong { color: #1a1025; }
body.bg-light .encouragement { color: #6b5a82; }
body.bg-light .tips-card { background: rgba(255,255,255,.45); border-color: rgba(30,10,60,.12); }
body.bg-light .tips-list li { background: rgba(255,255,255,.5); border-color: rgba(30,10,60,.1); color: #3d2e55; }
/* keep bg-orbs subtle on light bg */

/* ═════════ SKELETON LOADERS ═════════ */
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
  gap: .75rem;
}

.skeleton-card {
  height: 100px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.03) 75%);
  background-size: 400% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}

.skeleton-card--tall {
  height: 160px;
}

.loading-shell {
  pointer-events: none;
}

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

@keyframes ambientBgDrift {
  0% {
    background-position:
      0 0,
      0 0,
      8% 0%,
      92% 5%,
      50% 55%,
      30% 80%;
  }
  100% {
    background-position:
      0 0,
      0 0,
      16% 6%,
      84% 11%,
      45% 61%,
      36% 74%;
  }
}

/* ═════════ EMPTY STATE (shared) ═════════ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  color: #b5a7d2;
  font-size: .82rem;
  gap: .3rem;
}
.empty-state strong {
  color: #f5efff;
  font-size: .88rem;
}

/* ═════════ SR-ONLY ═════════ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ═════════ TOPBAR RESPONSIVE (shared) ═════════ */
@media (max-width: 600px) {
  .topbar {
    height: 48px;
    padding: 0 .75rem;
  }
  .brand-logo {
    height: 28px;
  }
}

/* ═════════ REDUCED MOTION ═════════ */
@media (prefers-reduced-motion: reduce) {
  body { transition: none !important; }
  body { animation: none !important; }
  .skeleton-card { animation: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ═════════ SCROLL REVEAL ANIMATIONS (shared) ═════════ */
[data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal="fade-up"]    { transform: translateY(40px); }
[data-reveal="fade-left"]  { transform: translateX(40px); }
[data-reveal="fade-right"] { transform: translateX(-40px); }
[data-reveal="scale-in"]   { transform: scale(0.92); }

[data-reveal][data-delay="1"] { transition-delay: 0.08s; }
[data-reveal][data-delay="2"] { transition-delay: 0.16s; }
[data-reveal][data-delay="3"] { transition-delay: 0.24s; }
[data-reveal][data-delay="4"] { transition-delay: 0.32s; }
[data-reveal][data-delay="5"] { transition-delay: 0.40s; }
[data-reveal][data-delay="6"] { transition-delay: 0.48s; }
[data-reveal][data-delay="7"] { transition-delay: 0.56s; }
[data-reveal][data-delay="8"] { transition-delay: 0.64s; }

[data-reveal].revealed {
  opacity: 1;
  transform: none;
}