/* Shared alias tokens — resolve theme-specific vars for generic usage */
:root {
  --primary: var(--brand, #06B6D4);
  --success: var(--ok, #22c55e);
  --text-muted: var(--text-dim, #6b7280);
}

/* Word bank — blur words during spelling sprint to prevent cheating */
#wordBankLedger.spelling-blur .wb-word {
  filter: blur(5px);
  user-select: none;
  transition: filter 0.3s;
}
#wordBankLedger .wb-word { transition: filter 0.3s; }

.solid-grid {
  border-collapse: collapse;
  border: 1px solid #000;
}

.solid-grid th,
.solid-grid td {
  border: 1px solid #000;
  padding: 10px;
}

/* Load Google Font for Neon themes */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400..700&display=swap');

/* ExamReady base dark theme (extracted)
   Theme tokens */
:root[data-theme="dark"] {
  --bg:#0f172a; --panel:#111827; --muted:#1f2937; --text:#e5e7eb; --text-dim:#cbd5e1; --brand:#06B6D4; --accent:#38B5CF64; --warn:#f97316; --danger:#ef4444; --ok:#84CC16; 
  --card:#0b1224; --border:#243150; --answerbar-h:180px; --mono-stack: "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "DejaVu Sans Mono", "Liberation Mono", "Ubuntu Mono", "Courier New", monospace; 
  --page-zoom:1; --topbar-h:0px;
  --input-bg:#0a1020;
  --chart-label:var(--text);
  --chart-muted:var(--text-dim);
  --chart-grid:rgba(248,250,252,0.2);
  --chart-line:var(--brand);
  --chart-bar:var(--ok);
}
/* =============================================================
   Neon Notebook Theme (light, paper-like with neon accents)
   Activate via: document.documentElement.setAttribute('data-theme','neon-notebook')
   ============================================================= */
:root[data-theme|="neon-notebook"] {
  /* Base remap to existing variable names used throughout app */
  --bg:#fdfdf7; /* page background */
  --panel:#ffffff;
  --card:#ffffff;
  --muted:#4b5563;
  --text:#111827;
  --text-dim:#4b5563;
  --brand:#1a9a96; /* primary accent */
  --accent:rgba(99,102,241,0.15);
  --warn:#f97316;
  --danger:#ec4899; /* use pink as danger for vibrancy */
  --ok:#22c55e;
  --border:#d1d5db;
  --answerbar-h:180px;
  --mono-stack: "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "DejaVu Sans Mono", "Liberation Mono", "Ubuntu Mono", "Courier New", monospace;
  --page-zoom:1; --topbar-h:0px;
  --input-bg:#ffffff;
  /* Additional neon notebook tokens */
  --bg-page:#fdfdf7;
  --bg-card:#ffffff;
  --text-main:#111827;
  --text-muted:#4b5563;
  --border-radius-lg:18px;
  --border-radius-md:14px;
  --shadow-soft:0 10px 25px rgba(15,23,42,0.08);
  --neon-blue:#6366f1;
  --neon-pink:#f55a34;
  --neon-teal:#128f8a;
  --neon-gold:#ee9311;
  /* New neon color for Streak days */
  --neon-sky:#0ea5e9;
  --fill-blue:#9d9ff2;
  --fill-pink:#f5ad9c;
  --fill-teal:#71cecb;
  --fill-gold:#f2c587;
  --fill-sky:rgba(14,165,233,0.16);
  --accent-primary:#1c4446;
  --accent-success:#22c55e;
  --accent-warning:#ee9311;
  --btn-primary-bg:#128f8a;
  --btn-primary-bg-hover:#818cf8;
  --btn-primary-text:#ffffff;
  --btn-outline-hover-fill:rgba(255,255,255,0.6);
  --header-bg:#ffffff;
  --header-underline:#f97316;
  --sidebar-bg:#f3f4f6;
  --sidebar-border:#d1d5db;
  --chart-label:var(--text);
  --chart-muted:var(--text-dim);
  --chart-grid:rgba(17,24,39,0.18);
  --chart-line:var(--brand);
  --chart-bar:var(--ok);
}

/* Body adjustments for neon notebook */
html[data-theme|="neon-notebook"],
body[data-theme|="neon-notebook"],
.theme-neon-notebook body {background:var(--bg-page);color:var(--text-main);} 

/* Neon themes: swap base font to Fredoka */
html[data-theme|="neon-notebook"],
html[data-theme|="neon-notebook"] body{
  font-family:"Fredoka", system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}

/* Top bar override */
[data-theme|="neon-notebook"] .topbar {background:var(--sidebar-bg);border-bottom:none;box-shadow:none;}
[data-theme|="neon-notebook"] .topbar .logo {box-shadow:none;}
[data-theme|="neon-notebook"] .navlinks button.active:not(.signin):not(.signout){background:var(--brand);color:#fff;}

/* Sidebar */
[data-theme|="neon-notebook"] .sidebar {background:var(--sidebar-bg);border-right:none;box-shadow:none;}
[data-theme|="neon-notebook"] .course {background:var(--bg-card);border:2px solid var(--border);}
[data-theme|="neon-notebook"] .course:hover {
  border-color:var(--brand);
  box-shadow:0 4px 12px rgba(99,102,241,.25);
  background: rgba(26, 154, 150, 0.1);
} 
[data-theme|="neon-notebook"] .course.active {
  background: var(--brand);
  color: #ffffff;
  border-color: var(--brand);
  outline: none;
}
[data-theme|="neon-notebook"] .course.active * {
  color: #ffffff !important;
}

/* Generic card override */
[data-theme|="neon-notebook"] .card {background:var(--bg-card);border:2px solid var(--border);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-soft);}
[data-theme|="neon-notebook"] .character-card .avatar {border-color:var(--brand);box-shadow:0 6px 16px rgba(99,102,241,0.25);} 

/* KPI tiles (stat tiles) */
[data-theme|="neon-notebook"] .row .col.card {border:2px solid rgba(148,163,184,0.7);background:var(--bg-card);} 
[data-theme|="neon-notebook"] .row .col.card:nth-child(1){border-color:var(--neon-blue);} 
[data-theme|="neon-notebook"] .row .col.card:nth-child(2){border-color:var(--neon-pink);} 
[data-theme|="neon-notebook"] .row .col.card:nth-child(3){border-color:var(--neon-teal);} 
[data-theme|="neon-notebook"] .row .col.card:nth-child(4){border-color:var(--neon-gold);} 
[data-theme|="neon-notebook"] .row .col.card:nth-child(5){border-color:var(--neon-blue);} 

/* Buttons */
[data-theme|="neon-notebook"] .btn.primary {background:var(--btn-primary-bg);color:var(--btn-primary-text);box-shadow:0 0 0 2px rgba(129,140,248,0.5);} 
[data-theme|="neon-notebook"] .btn.primary:hover {background:var(--btn-primary-bg-hover);transform:translateY(-1px);box-shadow:0 0 0 3px rgba(129,140,248,0.7);} 
[data-theme|="neon-notebook"] .btn.ghost {border:2px solid var(--accent-primary);color:var(--accent-primary);background:transparent;} 
[data-theme|="neon-notebook"] .btn.ghost:hover {background:var(--btn-outline-hover-fill);color:#111827;} 
[data-theme|="neon-notebook"] .signin {background:var(--btn-primary-bg);color:#fff;box-shadow:0 0 0 2px rgba(129,140,248,.4);} 
[data-theme|="neon-notebook"] .signin:hover {background:var(--btn-primary-bg-hover);} 
[data-theme|="neon-notebook"] .signout {border:2px solid var(--danger);color:var(--danger);} 

/* Answer bar (Neon): make the bar itself the rounded container aligned to question width */
[data-theme|="neon-notebook"] .answerbar {
  background:#fff;
  border:2px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow-soft);
  border-top:none; /* override base */
  /* Fallback alignment; JS will set exact left/width to match #panelQuestion */
  left:calc(320px + 20px);
  right:20px;
  margin:0; /* allow left/right positioning to define width */
  bottom:14px; /* small gap from viewport bottom */
  width:auto;
  height:auto; /* allow content to define height */
  padding:10px 16px 8px 16px; /* reduce bottom padding */
  box-sizing:border-box; /* include border in computed width */
}
[data-theme|="neon-notebook"] .answerbar textarea {background:#fff;border:2px solid var(--border);color:var(--text);box-sizing:border-box;max-width:100%;} 
/* Slightly reduce textarea width to avoid pushing layout; center within bar */
[data-theme|="neon-notebook"] .answerbar textarea{width:90%; margin:0 auto; display:block;}
/* Reset inner controls: they should not create a second rounded box */
[data-theme|="neon-notebook"] .answerbar .controls{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  width:auto;
  margin:0;
  box-shadow:none;
  gap:8px; /* tighten vertical spacing slightly */
}

/* Modal */
[data-theme|="neon-notebook"] .modal {background:var(--bg-card);border:2px solid var(--border);box-shadow:var(--shadow-soft);} 
/* Neon: ensure ghost buttons in modals have visible outlines */
[data-theme|="neon-notebook"] .modal .btn.ghost{border:2px solid var(--border)!important;background:#fff;color:var(--text);} 

/* Scrollbar tint light */
[data-theme|="neon-notebook"] .scroll-themed::-webkit-scrollbar-thumb {background:linear-gradient(180deg,var(--brand),var(--btn-primary-bg-hover));border:3px solid #ffffff80;}

/* Pricing table wrap adaptation */
[data-theme|="neon-notebook"] #dashPricingWrap {background:var(--bg-card);border:3px solid var(--brand);box-shadow:var(--shadow-soft);} 

/* Registration form overrides */
[data-theme|="neon-notebook"] .form-field input {background:#fff;border:2px solid var(--border);color:var(--text);} 
[data-theme|="neon-notebook"] .form-field input:focus {outline:3px solid var(--brand);} 
[data-theme|="neon-notebook"] .avatar-grid {background:#f3f4f6;border:2px solid var(--border);} 
[data-theme|="neon-notebook"] .avatar-grid label {background:#ffffff;border:1px solid var(--border);} 
[data-theme|="neon-notebook"] .avatar-grid label:hover {box-shadow:0 0 0 2px var(--brand),0 4px 14px rgba(99,102,241,.25);} 
[data-theme|="neon-notebook"] .avatar-grid img {border-color:var(--border);} 
[data-theme|="neon-notebook"] .avatar-grid label.selected img {border-color:var(--brand);} 

/* Table tweaks */
[data-theme|="neon-notebook"] table {background:#fff;border:2px solid var(--border);} 
[data-theme|="neon-notebook"] th {color:var(--text-muted);} 
[data-theme|="neon-notebook"] td {color:var(--text);} 
[data-theme|="neon-notebook"] #panelResults a {color:var(--brand);} 

/* Character card subtle dashed inner like notebook */
[data-theme|="neon-notebook"] .character-card {position:relative;}
[data-theme|="neon-notebook"] .character-card:before {content:"";position:absolute;inset:8px;border:1px dashed rgba(17,24,39,0.18);border-radius:calc(14px - 8px);pointer-events:none;}

/* Neon: question window gets the same warm paper tint */
[data-theme|="neon-notebook"] #panelQuestion{
  background:#fffaf2;
}

/* Hover lift for generic cards */
[data-theme|="neon-notebook"] .card:hover {box-shadow:0 14px 30px rgba(15,23,42,0.16);transform:translateY(-2px);} 
[data-theme|="neon-notebook"] .card {transition:transform .15s ease, box-shadow .15s ease;}

/* Neon course type helper classes (can be applied dynamically) */
[data-theme|="neon-notebook"] .course-card--thinking {border:2px solid var(--neon-blue);background:var(--fill-blue);} 
[data-theme|="neon-notebook"] .course-card--writing {border:2px solid var(--neon-pink);background:var(--fill-pink);} 
[data-theme|="neon-notebook"] .course-card--reading {border:2px solid var(--neon-teal);background:var(--fill-teal);} 
[data-theme|="neon-notebook"] .course-card--maths {border:2px solid var(--neon-gold);background:var(--fill-gold);} 
[data-theme|="neon-notebook"] .course-card {border-radius:var(--border-radius-lg);padding:20px 18px;background:var(--bg-card);box-shadow:var(--shadow-soft);transition:transform .12s ease, box-shadow .12s ease;} 
[data-theme|="neon-notebook"] .course-card:hover {transform:translateY(-2px);box-shadow:0 14px 30px rgba(15,23,42,0.16);} 

/* Badges */
[data-theme|="neon-notebook"] .badge {display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:600;color:#fff;} 
[data-theme|="neon-notebook"] .badge--sandbox {background:#22c55e;} 
[data-theme|="neon-notebook"] .badge--recommended {background:#f97316;} 

/* =============================================================
   Explanation/question rich text helpers
   ============================================================= */
.explanation-body,
.question-rich-text {
  line-height:1.65;
  font-size:1rem;
  word-break:break-word;
  color:var(--text);
}
.explanation-body {
  white-space:pre-line;
}
.question-rich-text {
  white-space:pre-line;
  font-family:inherit;
  font-variant-ligatures:normal;
}
.explanation-body p,
.question-rich-text p {
  margin:0 0 0.9em 0;
}
.explanation-body ul,
.explanation-body ol,
.question-rich-text ul,
.question-rich-text ol {
  padding-left:1.4em;
  margin:0 0 1em 0;
}
.explanation-body li,
.question-rich-text li {
  margin:0 0 0.6em 0;
}
.explanation-body p:last-child,
.explanation-body li:last-child,
.explanation-body ul:last-child,
.explanation-body ol:last-child,
.question-rich-text p:last-child,
.question-rich-text li:last-child,
.question-rich-text ul:last-child,
.question-rich-text ol:last-child {
  margin-bottom:0;
}
.explanation-body pre,
.question-rich-text pre {
  font-family:var(--mono-stack);
  white-space:pre-wrap;
  margin:0 0 1em 0;
}
.explanation-body strong,
.explanation-body em,
.question-rich-text strong,
.question-rich-text em {
  line-height:inherit;
}
.explanation-body table,
.question-rich-text table {
  width:100%;
  border-collapse:collapse;
  margin:1.1em 0;
  font-size:0.95rem;
}
.explanation-body th,
.explanation-body td,
.question-rich-text th,
.question-rich-text td {
  border:1px solid var(--border);
  padding:8px 10px;
  text-align:left;
}
.explanation-body th,
.question-rich-text th {
  background:rgba(148,163,184,0.2);
  font-weight:700;
}
.explanation-body caption,
.question-rich-text caption {
  caption-side:top;
  font-weight:600;
  margin-bottom:6px;
}
.question-choice-text{
  display:inline-block;
  white-space:pre-wrap;
  font-family:inherit;
  font-variant-ligatures:none;
}
html,body {height:100%; margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"; background:linear-gradient(180deg,var(--bg),#0b1224 60%); color:var(--text); overflow-x:hidden;}
.dashboard-full-bleed{--topbar-h:0px;}
.dashboard-full-bleed .topbar{display:none;}
.dashboard-full-bleed .layout{min-height:calc(100vh/var(--page-zoom));}
.dashboard-full-bleed .layout .sidebar{top:0;height:calc(100vh/var(--page-zoom));}
/* Extend neon look to all variants (soft/clean/bold) */
[data-theme|="neon-notebook"] .topbar{background:var(--sidebar-bg);border-bottom:none;box-shadow:none;}
[data-theme|="neon-notebook"] .navlinks button.active:not(.signin):not(.signout){background:var(--brand);color:#fff;}
[data-theme|="neon-notebook"] .signin{background:var(--btn-primary-bg);color:var(--btn-primary-text);} 
[data-theme|="neon-notebook"] .signout{border:2px solid var(--danger);color:var(--danger);background:#fff;}
/* Light themes: use danger-colored signout button on white backgrounds */
[data-theme="sky-notebook"] .signout,
[data-theme="comic-sunset"] .signout,
[data-theme="mint-soda"] .signout,
[data-theme="cyber-lilac"] .signout{border:2px solid var(--danger);color:var(--danger);background:#fff;}

/* Reusable utilities for inputs and fieldsets (used by settings modal too) */
.themed-input, .themed-select {padding:8px;border-radius:8px;border:1px solid var(--border);background:var(--input-bg);color:var(--text);} 
.themed-input:focus, .themed-select:focus {outline:2px solid var(--brand);} 
.themed-fieldset {border:1px solid var(--border);border-radius:12px;padding:14px;}
.themed-legend {padding:0 6px;font-size:14px;}
.course-filter{padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:var(--input-bg, var(--panel));color:var(--text);min-width:150px;font-weight:600;appearance:none;transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;}
.course-filter:focus{outline:2px solid var(--brand);box-shadow:0 0 0 2px rgba(99,102,241,0.25);} 

/* Loading overlay window */
.loading-window {background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,0.25);padding:24px;width:min(90vw,780px);max-height:80vh;display:flex;flex-direction:column;align-items:center;overflow:auto;}
/* Neon: make loading/joke window use the warm paper tint */
[data-theme|="neon-notebook"] .loading-window{background:#fffaf2;}

/* Joke conversation bubbles (spinner screen) */
.joke-bubble{padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:#0f223d;color:var(--text);} 
.joke-bubble--you{text-align:right;background:#182b46;}

/* Light, outlined bubbles for Neon Notebook variants */
[data-theme|="neon-notebook"] .joke-bubble{background:#fff;border:2px solid var(--border);box-shadow:var(--shadow-soft);color:var(--text);} 
[data-theme|="neon-notebook"] .joke-bubble--quizzy{border-color:var(--neon-blue);} 
[data-theme|="neon-notebook"] .joke-bubble--you{border-color:var(--neon-pink);} 

/* Sky Notebook */
[data-theme="sky-notebook"] .joke-bubble{background:#fff;border:2px solid #e3eefc;color:var(--text);} 
[data-theme="sky-notebook"] .joke-bubble--quizzy{border-color:#3b82f6;} 
[data-theme="sky-notebook"] .joke-bubble--you{border-color:#6366f1;} 

/* Comic Sunset */
[data-theme="comic-sunset"] .joke-bubble{background:#fff;border:2px solid #fcd9bd;color:var(--text);} 
[data-theme="comic-sunset"] .joke-bubble--quizzy{border-color:#f97316;} 
[data-theme="comic-sunset"] .joke-bubble--you{border-color:#ec4899;} 

/* Mint Soda */
[data-theme="mint-soda"] .joke-bubble{background:#fff;border:2px solid #dff6f2;color:var(--text);} 
[data-theme="mint-soda"] .joke-bubble--quizzy{border-color:#2dd4bf;} 
[data-theme="mint-soda"] .joke-bubble--you{border-color:#3b82f6;} 

/* Cyber Lilac */
[data-theme="cyber-lilac"] .joke-bubble{background:#fff;border:2px solid #e7e1fb;color:var(--text);} 
[data-theme="cyber-lilac"] .joke-bubble--quizzy{border-color:#8b5cf6;} 
[data-theme="cyber-lilac"] .joke-bubble--you{border-color:#ec4899;} 

/* Chalkboard */
[data-theme="chalkboard"] .joke-bubble{background:#12251e;border:2px solid #1b3a30;color:var(--text);} 
[data-theme="chalkboard"] .joke-bubble--quizzy{border-color:#86efac;} 
[data-theme="chalkboard"] .joke-bubble--you{border-color:#38bdf8;} 

/* Variant tokens */
:root[data-theme="neon-notebook-soft"]{
  --bg:#fafaf6; --bg-page:#fafaf6; --panel:#fff; --card:#fff; --text:#111827; --text-main:#111827; --text-dim:#6b7280;
  --brand:#6366f1; --accent:rgba(99,102,241,.12); --border:#e5e7eb; --sidebar-bg:#f7f7fb; --sidebar-border:#e5e7eb;
  --fill-blue:rgba(129,140,248,.18); --fill-pink:rgba(244,114,182,.18); --fill-teal:rgba(45,212,191,.18); --fill-gold:rgba(251,191,36,.22);
  --btn-primary-bg:#6366f1; --btn-primary-bg-hover:#818cf8; --btn-primary-text:#ffffff; --header-bg:#ffffff; --header-underline:transparent;
  --shadow-soft:0 8px 22px rgba(15,23,42,.08);
}

/* Variant extras */
[data-theme="neon-notebook-soft"] .pill{background:#fff;}
/* Neon soft: ensure all dashboard boxes have a visible outline */
[data-theme="neon-notebook-soft"] .row .col.card,
[data-theme="neon-notebook-soft"] .dashGrid .col.card{
  border:2px solid var(--border);
  background:var(--bg-card);
}
/* Neon soft: color outlines for charts row (distinct colors) */
[data-theme="neon-notebook-soft"] .dashGrid .col.card:nth-child(1){ /* Accuracy trend */
  border-color: var(--neon-blue);
}
[data-theme="neon-notebook-soft"] .dashGrid .col.card:nth-child(2){ /* Sessions per week */
  border-color: var(--neon-teal);
  background: var(--fill-teal);
}
[data-theme="neon-notebook-soft"] #recentSessionsCard{ /* Recent sessions */
  border-color: var(--neon-pink);
}
/* Neon soft: outline course boxes uniformly */
[data-theme="neon-notebook-soft"] .sidebar .course{
  border:2px solid var(--brand);
}
/* Neon soft: add pale fills to specific KPI tiles */
[data-theme="neon-notebook-soft"] .row .col.card:nth-child(1){ /* Sessions */
  border-color: var(--neon-blue);
  background: var(--fill-blue);
}
[data-theme="neon-notebook-soft"] .row .col.card:nth-child(4){ /* % average score */
  border-color: var(--neon-gold);
  background: var(--fill-gold);
}
/* Neon soft: new color for Streak days (6th KPI tile) */
[data-theme="neon-notebook-soft"] .row .col.card:nth-child(6){ /* Streak days */
  border-color: var(--neon-sky);
  background: var(--fill-sky);
}
/* Force light background for all neon-notebook variants (override dark gradient on body) */
html[data-theme|="neon-notebook"],
html[data-theme|="neon-notebook"] body{
  /* Nuke the dark gradient declared on `html,body` further down */
  background: var(--bg-page) !important;
  background-image: none !important;
}
/* Force light backgrounds for new light themes */
html[data-theme="sky-notebook"],
html[data-theme="comic-sunset"],
html[data-theme="mint-soda"],
html[data-theme="cyber-lilac"],
html[data-theme="sky-notebook"] body,
html[data-theme="comic-sunset"] body,
html[data-theme="mint-soda"] body,
html[data-theme="cyber-lilac"] body{
  background: var(--bg-page) !important;
  background-image: none !important;
}
.pageScale{position:relative;left:50%;transform:scale(var(--page-zoom)) translateX(-50%);transform-origin:top left;width:calc(100% / var(--page-zoom));}
/* Links – use brand color (fix unreadable blue) */
a{color:var(--brand);text-decoration:none;} a:hover, a:focus{ text-decoration:underline; }
.mono{font-family:var(--mono-stack); font-variant-ligatures:none; letter-spacing:.005em;}
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:rgba(15,23,42,.9);backdrop-filter:blur(4px);} 
.brand{display:flex;align-items:center;gap:12px;font-weight:700;} 
.brand .logo-link{display:inline-flex;align-items:center;text-decoration:none;outline-offset:4px;}
.brand .logo-link:focus-visible{outline:2px solid var(--brand);}
.brand .logo{width:280px;max-height:104px;object-fit:contain;border-radius:10px;box-shadow:0 0 12px rgba(96,165,250,.4);cursor:pointer;} 
.navlinks{display:flex;gap:18px;align-items:center;} .navlinks button{background:none;border:2px solid transparent;color:var(--text);font-weight:600;padding:8px 10px;border-radius:10px;cursor:pointer;transition:color .15s ease,border-color .15s ease,box-shadow .15s ease;} .navlinks button:not(.signin):not(.signout):hover{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand);} .navlinks button.active:not(.signin):not(.signout){background:var(--brand);color:#0b1e1f;font-weight:800;box-shadow:0 2px 10px rgba(0,0,0,.35);} .signin{background:var(--brand);color:#0b1e1f;padding:8px 14px;border-radius:12px;font-weight:800;} .signout{color:#fb4b4b;padding:8px 12px;border-radius:12px;border:2px solid #fff;font-weight:700;}
.dash-signout{font-size:13px;font-style:italic;color:var(--text-dim);text-decoration:none;align-self:flex-start;}
.dash-signout:hover{text-decoration:underline;}
.layout{display:grid;grid-template-columns:320px 1fr;min-height:calc((100vh - var(--topbar-h))/var(--page-zoom));}
.main{position:relative;padding:18px 20px calc(var(--answerbar-h) + 20px);} .card{background:linear-gradient(180deg,rgba(17,28,52,.92),rgba(11,18,36,.82));border:1.5px solid rgba(56,181,207,.45);border-radius:16px;padding:16px;margin-bottom:14px;box-shadow:0 12px 36px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.06) inset;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; white-space:nowrap;}
.question-panel{position:relative;display:flex;flex-direction:column;gap:16px;padding-bottom:0;height:calc(100vh - var(--topbar-h) - var(--answerbar-h) - 40px);max-height:calc(100vh - var(--topbar-h) - var(--answerbar-h) - 40px);}
.question-content{min-height:200px;flex:1;overflow:auto;padding-bottom:32px;}
.question-controls{position:sticky;bottom:-16px;right:auto;left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;background:transparent;border-top:1px solid var(--border);border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;margin:0 -16px -16px;padding:16px 20px 24px;box-shadow:none;z-index:5;}
.question-controls__actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center;}
.flag-toggle{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--border);background:rgba(255,255,255,.04);color:var(--text);display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;transition:background .25s ease,border-color .25s ease,color .25s ease;}
.flag-toggle:hover{background:rgba(255,255,255,.08);}
.flag-toggle[aria-pressed="true"]{background:var(--accent);color:#0f172a;border-color:var(--brand);box-shadow:0 0 12px rgba(56,181,207,.4);} 
/* Base: during questions, prevent page-level scroll; let #panelQuestion handle it */
.question-active .main{overflow:hidden;}
.question-active .layout{grid-template-columns:1fr;}
.question-active .sidebar{display:none !important;}
.question-active .layout{overflow:hidden;}
.question-frame{position:relative;display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start;max-width:1400px;margin:0 auto;}
/* Question Text: Takes 2/3rds of space (approx 66%), no max-width limits to avoid wrapping too early */
.question-frame__main{flex:2 1 600px;min-width:320px;}
.question-frame__stem{font-size:18px;font-weight:700;}
.question-choice-text{font-weight:400;}
.question-frame--single .question-frame__main{flex-basis:100%;min-width:100%;max-width:none;}
/* Side Panel: Takes 1/3rd of space */
.question-frame__side{flex:1 1 300px;min-width:260px;max-width:500px;}
.question-frame__side--reading{border:1px solid var(--border);border-radius:12px;background:var(--panel);padding:12px;}
.question-frame__side-scroll{max-height:min(60vh,520px);overflow:auto;}
.question-frame__side--image{
    flex: 1 1 300px;
    align-self: center; /* Vertically center the image relative to the question text */
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}
.question-frame__side--image img{max-width:100%;max-height:450px;border-radius:12px;box-shadow:0 4px 18px rgba(0,0,0,0.3); margin: 0 auto;}
@media(max-width:1024px){
  .question-panel{height:auto;max-height:none;padding-bottom:40px;}
  .question-frame__main,
  .question-frame__side{flex:1 1 100%;min-width:100%;}
  .question-frame__side-scroll{max-height:none;}
  .question-controls{position:static;margin:12px -16px -16px;justify-content:flex-start;}
}
/* Neon: ensure container background matches children to avoid seams */
[data-theme|="neon-notebook"] .layout{background:var(--sidebar-bg);} 
/* Neon: match main background to sidebar for that light bluish field */
[data-theme|="neon-notebook"] .main{background:var(--sidebar-bg);} 
/* Neon: only tint the interior of the dashboard container */
[data-theme|="neon-notebook"] #panelDashboard{background:#fffaf2;}
.character-card{display:flex;align-items:center;gap:18px;}
.character-card .avatar{width:120px;height:120px;object-fit:cover;border-radius:14px;border:3px solid var(--brand);box-shadow:0 6px 18px rgba(0,0,0,.35);} 
/* Neon variants: teal backdrop fill behind avatar (not just an outline) */
[data-theme|="neon-notebook"] .character-card{position:relative;}
[data-theme|="neon-notebook"] .character-card::after{
  content:""; position:absolute; left:16px; top:16px; width:120px; height:120px;
  background:#2db7bf; border-radius:14px; z-index:0;
}
[data-theme|="neon-notebook"] .character-card .avatar{position:relative; z-index:1; background:transparent; border:none; box-shadow:0 6px 18px rgba(15,23,42,.15);} 
.profile-reward-row{margin:12px 0 28px;}
.reward-journey-card{display:grid;grid-template-columns:minmax(220px,1fr) minmax(360px,2fr) auto;align-items:center;gap:20px;padding:24px;border:1.5px solid rgba(56,181,207,.4);background:radial-gradient(circle at top left,rgba(6,182,212,.18),rgba(2,6,17,.95));box-shadow:0 18px 40px rgba(2,6,17,.45);cursor:default;position:relative;overflow:hidden;}
.reward-journey-card::after{content:"";position:absolute;inset:10px;pointer-events:none;border:1px solid rgba(255,255,255,.06);border-radius:20px;opacity:.6;}
.reward-journey-card:hover{transform:none;box-shadow:0 20px 45px rgba(5,12,32,.55);} 
.reward-journey__media{display:none;}
.reward-avatar-ring,.reward-level-tag{display:none;}
.reward-journey__content{display:flex;flex-direction:column;gap:10px;position:relative;z-index:1;}
.reward-journey__heading{display:flex;flex-direction:column;gap:6px;}
.reward-journey-card .quick-card__title{font-size:30px;font-weight:900;color:#fdf2f8;letter-spacing:.01em;text-shadow:0 8px 25px rgba(244,114,182,.3);}
.reward-journey-card .quick-card__title::after{content:"";display:block;width:42px;height:3px;background:linear-gradient(90deg,#fcd34d,#f472b6);border-radius:999px;margin-top:8px;}
.quick-card__eyebrow{text-transform:uppercase;font-size:12px;letter-spacing:.12em;color:rgba(255,255,255,.7);font-weight:700;}
.reward-journey__lines{display:flex;flex-direction:column;gap:8px;font-size:15px;color:rgba(255,255,255,.7);}
.reward-line{color:var(--text);font-weight:600;display:flex;align-items:center;gap:6px;}
.reward-line span{font-weight:900;font-size:28px;color:#ffedd5;text-shadow:0 0 18px rgba(253,186,116,.4);}
.reward-line--bold{font-size:16px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);}
.reward-line.hint{font-size:13px;color:rgba(255,255,255,.65);}
.reward-journey__link{align-self:flex-start;background:linear-gradient(135deg,#e0f2fe,#fef9c3);border:1px solid rgba(17,24,39,.12);color:var(--brand);font-weight:700;font-size:12px;cursor:pointer;padding:6px 14px;border-radius:999px;text-decoration:none;box-shadow:0 6px 18px rgba(15,23,42,.12);transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease;}
.reward-journey__link:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(15,23,42,.18);opacity:0.95;} 
.reward-journey__track-col{display:flex;align-items:center;justify-content:flex-start;width:100%;position:relative;z-index:1;}
.reward-journey__track{position:relative;padding-top:12px;width:100%;min-width:360px;display:flex;flex-direction:column;gap:12px;}
#dashRewardTrack{display:flex;flex-direction:column;justify-content:center;gap:10px;}
.reward-track__avatar-pin{position:absolute;top:21px;left:var(--reward-progress,0%);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;z-index:3;}
.reward-track__avatar-ring{width:40px;height:40px;border-radius:50%;padding:2px;background:linear-gradient(135deg,rgba(59,130,246,.25),rgba(16,185,129,.25));box-shadow:0 6px 18px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;}
.reward-track__avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid rgba(2,6,23,.8);background:#0f172a;}
.reward-track__avatar-label{font-size:11px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;background:rgba(255,255,255,.8);padding:2px 8px;border-radius:999px;box-shadow:0 2px 6px rgba(15,23,42,.12);}
.reward-track--frost{background:rgba(15,23,42,.35);padding:18px 20px;border-radius:18px;border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 0 25px rgba(255,255,255,.08);} 
.reward-journey__trophy{display:flex;align-items:center;justify-content:flex-end;position:relative;z-index:1;}
.reward-trophy-glow{position:relative;padding:12px;border-radius:18px;background:rgba(255,255,255,.04);box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 50px rgba(236,72,153,.25);} 
.reward-trophy-glow::after{content:"";position:absolute;inset:5px;border-radius:14px;border:1px solid rgba(255,255,255,.08);} 
.reward-journey__trophy img{width:130px;height:auto;max-width:23vw;object-fit:contain;filter:drop-shadow(0 12px 25px rgba(0,0,0,.45));}
/* Neon notebook overrides for brighter reward card */
[data-theme|="neon-notebook"] .reward-journey-card{
  background:linear-gradient(135deg,#fffef6,#f4fbff);
  border:2px solid rgba(17,24,39,0.08);
  box-shadow:var(--shadow-soft);
  color:var(--text);
}
[data-theme|="neon-notebook"] .reward-journey-card::after{border-color:rgba(26,154,150,0.3);opacity:1;}
[data-theme|="neon-notebook"] .reward-journey-card .quick-card__title{color:var(--text);text-shadow:none;}
[data-theme|="neon-notebook"] .reward-journey-card .quick-card__title::after{background:linear-gradient(90deg,var(--brand),var(--neon-pink));}
[data-theme|="neon-notebook"] .reward-journey-card .quick-card__eyebrow{color:var(--neon-teal);}
[data-theme|="neon-notebook"] .reward-journey__lines{color:var(--text-dim);}
[data-theme|="neon-notebook"] .reward-line{color:var(--text);}
[data-theme|="neon-notebook"] .reward-line span{color:var(--brand);text-shadow:none;}
[data-theme|="neon-notebook"] .reward-line.hint{color:var(--muted);}
[data-theme|="neon-notebook"] .reward-avatar-ring{background:linear-gradient(135deg,rgba(26,154,150,.2),rgba(99,102,241,.18));box-shadow:0 8px 22px rgba(15,23,42,.12);}
[data-theme|="neon-notebook"] .reward-avatar-ring::after{border:2px dashed rgba(26,154,150,.35);}
[data-theme|="neon-notebook"] .reward-avatar-ring .avatar{border:3px solid #fff;background:#fff;}
[data-theme|="neon-notebook"] .reward-level-tag{background:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(26,154,150,.35);}
[data-theme|="neon-notebook"] .reward-journey__link{background:linear-gradient(135deg,#ffffff,var(--fill-teal));color:var(--brand);box-shadow:0 4px 12px rgba(15,23,42,.1);border:1.5px solid rgba(26,154,150,.25);} 
[data-theme|="neon-notebook"] .reward-journey__track{min-width:0;}
[data-theme|="neon-notebook"] .reward-track--frost{
  background:linear-gradient(135deg,rgba(26,154,150,.08),rgba(255,255,255,.95));
  border:2px solid rgba(26,154,150,.2);
  box-shadow:inset 0 0 0 rgba(255,255,255,0);
}
[data-theme|="neon-notebook"] .reward-track__legend{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(17,24,39,.08);
  color:var(--muted);
  box-shadow:none;
}
[data-theme|="neon-notebook"] .reward-trophy-glow{padding:0;background:transparent;box-shadow:none;}
[data-theme|="neon-notebook"] .reward-trophy-glow::after{display:none;}
[data-theme|="neon-notebook"] .reward-journey__trophy img{filter:drop-shadow(0 20px 45px rgba(238,147,17,.38));background:transparent;}
@media (max-width:1200px){.reward-journey-card{grid-template-columns:auto minmax(200px,1fr) minmax(280px,1.4fr) auto;}.reward-journey__track{min-width:260px;}}
.reward-info-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;z-index:90;}
.reward-info-modal.hidden{display:none;}
.reward-info-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);}
.reward-info-modal__window{position:relative;z-index:1;background:linear-gradient(180deg,rgba(13,23,46,.98),rgba(7,12,26,.94));border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:22px;max-width:420px;width:100%;box-shadow:0 18px 50px rgba(0,0,0,.5);}
.reward-info-modal__close{position:absolute;top:10px;right:12px;background:none;border:none;font-size:22px;color:var(--text);cursor:pointer;}
.reward-info-text{font-size:14px;color:var(--text-dim);margin:0 0 12px 0;}
.reward-info-table{width:100%;border-collapse:collapse;font-size:14px;}
.reward-info-table th,.reward-info-table td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.1);text-align:left;}
.reward-info-table th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);}
.reward-info-table td:first-child{font-weight:800;}
@media (max-width:900px){.reward-journey-card{grid-template-columns:1fr;gap:16px;text-align:center;}.reward-journey__track{min-width:0;}.reward-journey__media .avatar{margin:0 auto 8px;}.reward-journey__trophy img{width:90px;} .reward-track__legend{justify-content:center;}}
.reward-track__legend .legend-item{justify-content:center;}

@keyframes rewardRing{to{transform:rotate(360deg);}}
.reward-card{background:linear-gradient(135deg,rgba(12,74,110,0.35),rgba(6,182,212,0.15));border:2px solid var(--neon-blue, var(--brand));border-radius:18px;box-shadow:0 12px 30px rgba(6,182,212,0.18);padding:16px 18px;color:var(--text);} 
[data-theme|="neon-notebook"] .reward-card,
[data-theme="sky-notebook"] .reward-card,
[data-theme="comic-sunset"] .reward-card,
[data-theme="mint-soda"] .reward-card,
[data-theme="cyber-lilac"] .reward-card{background:#fff;border:2px solid var(--neon-blue, var(--brand));box-shadow:var(--shadow-soft);}
.reward-track{display:flex;flex-direction:column;gap:6px;}
.reward-track__current{display:flex;flex-direction:column;gap:4px;}
.reward-track--empty{display:flex;flex-direction:column;gap:6px;justify-content:center;min-height:180px;text-align:center;}
.reward-track__header{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;}
.reward-track__value{font-size:22px;font-weight:800;line-height:1.1;}
.reward-track__points-now{font-size:14px;font-weight:700;color:var(--text-dim);}
.reward-track__next-block{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:180px;}
.reward-track__next-title{text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:var(--text-dim);font-weight:700;}
.reward-track__next-name{font-size:16px;font-weight:700;color:var(--text);}
.reward-track__next-meta{font-size:12px;color:var(--text-dim);font-weight:600;}
.reward-track__row{display:flex;align-items:flex-start;gap:18px;width:100%;}
.reward-track__bar-wrap{position:relative;padding:12px 0 34px;width:100%;flex:1;}
.reward-track__marker{position:absolute;top:-36px;transform:translateX(-50%);background:var(--brand);color:#020611;font-size:11px;font-weight:800;padding:5px 12px;border-radius:999px;box-shadow:0 4px 12px rgba(6,9,20,.35);white-space:nowrap;letter-spacing:.01em;}
.reward-track__marker-value{display:block;font-size:14px;letter-spacing:0;font-weight:900;}
.reward-track__marker::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--brand);}
.reward-track__bar{position:relative;margin:0;height:18px;border-radius:999px;background:rgba(255,255,255,0.18);overflow:hidden;z-index:1;}
[data-theme|="neon-notebook"] .reward-track__bar,
[data-theme="sky-notebook"] .reward-track__bar,
[data-theme="comic-sunset"] .reward-track__bar,
[data-theme="mint-soda"] .reward-track__bar,
[data-theme="cyber-lilac"] .reward-track__bar,
[data-theme="chalkboard"] .reward-track__bar{background:rgba(15,23,42,0.08);}
.reward-track__fill{position:absolute;inset:0;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--ok));width:var(--reward-progress,0%);transition:width .4s ease;z-index:1;}
.reward-track__dot{position:absolute;top:50%;left:var(--reward-progress,0%);transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;border:0;background:transparent;box-shadow:none;display:flex;align-items:center;justify-content:center;z-index:2;}
.reward-track__dot::before{content:"";width:26px;height:26px;border-radius:50%;border:2px solid var(--brand);background:var(--panel);box-shadow:0 0 12px rgba(255,255,255,0.5);}
.reward-track__next-inline{display:flex;flex-direction:column;gap:2px;min-width:120px;text-align:left;}
.reward-track__next-label{text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:var(--text-dim);font-weight:700;}
.reward-track__next-name{font-size:16px;font-weight:800;color:var(--text);}
.reward-track__next-meta{font-size:12px;color:var(--text-dim);font-weight:600;}
[data-theme|="neon-notebook"] .reward-track__dot,
[data-theme="sky-notebook"] .reward-track__dot,
[data-theme="comic-sunset"] .reward-track__dot,
[data-theme="mint-soda"] .reward-track__dot,
[data-theme="cyber-lilac"] .reward-track__dot{background:#fff;}
.reward-track__points{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;font-size:11px;color:var(--text-dim);font-weight:600;}
.reward-track__points span:nth-child(2){text-align:center;flex:1;}
.muted{color:var(--text-dim);} .row{display:flex;gap:12px;flex-wrap:wrap;} .row .col{flex:1;min-width:260px;}
.dash-quick-actions{display:flex;gap:16px;margin:12px 0 8px;flex-wrap:wrap;}
.marketing-cta-row{display:flex;gap:16px;margin:18px 0 4px;flex-wrap:wrap;}
.quick-card{display:flex;align-items:center;gap:16px;flex:1 1 32%;min-width:260px;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease;}
.quick-card.active{box-shadow:0 0 0 3px currentColor;}
.quick-card:focus-visible{outline:3px solid currentColor;outline-offset:3px;}
.quick-card:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(15,23,42,0.18);}
.quick-card__media{flex:0 0 110px;}
.quick-card__media img{width:100%;height:auto;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,0.25);}
.quick-card__content{display:flex;flex-direction:column;gap:4px;}
.quick-card__title{font-size:20px;font-weight:800;}
.quick-card__sub{font-size:14px;color:var(--text-dim);}
.quick-card__stat{font-size:30px;font-weight:900;color:var(--text);}
.testme-card{border:2px solid var(--brand);color:var(--brand);}
.loop-card{border:2px solid var(--neon-pink);background:var(--fill-pink, rgba(244,114,182,.18));color:var(--neon-pink);}
.loop-card.active{box-shadow:0 0 0 3px var(--neon-pink);}
.improve-card{border:2px solid var(--neon-gold, var(--brand));background:var(--fill-gold, rgba(242,197,135,.25));color:var(--neon-gold, #ee9311);}
[data-theme="dark"] .marketing-card{background:linear-gradient(135deg,rgba(6,182,212,.22),rgba(14,165,233,.2));border:2px solid rgba(14,165,233,.6);color:#e0f7ff;}
[data-theme="dark"] .marketing-card--register{background:linear-gradient(135deg,rgba(236,72,153,.22),rgba(249,115,22,.2));border-color:rgba(236,72,153,.55);color:#ffeef9;}
.marketing-card{flex:1 1 280px;}
.blog-card{margin-top:18px;border:2px solid var(--border);border-radius:20px;padding:22px;background:var(--card);box-shadow:0 12px 32px rgba(0,0,0,0.25);display:flex;flex-direction:column;gap:16px;}
.blog-card__head{display:flex;flex-direction:column;gap:6px;}
.blog-card__head h3{margin:0;font-size:22px;}
.blog-card__chip{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 12px;background:var(--accent, rgba(56,181,207,.14));color:var(--brand);font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;}
.blog-card__posts{display:flex;flex-direction:column;gap:14px;}
.blog-card__post{display:flex;gap:18px;align-items:flex-start;border:1.5px solid var(--border);border-radius:16px;padding:18px;background:var(--panel);box-shadow:0 8px 24px rgba(0,0,0,0.18);}
.blog-card__post--text-only{flex-direction:column;}
.blog-card__copy{flex:2;display:flex;flex-direction:column;gap:6px;}
.blog-card__date{font-size:0.8rem;color:var(--text-dim);font-weight:600;text-transform:uppercase;letter-spacing:0.05em;}
.blog-card__lead{margin:0;font-size:16px;font-weight:800;color:var(--text);letter-spacing:.01em;line-height:1.3;}
.blog-card__body{font-size:.95rem;color:var(--text);line-height:1.4;white-space:normal;}
.blog-card__body p { margin: 0 0 10px 0; }
.blog-card__body p:last-child { margin-bottom: 0; }
.blog-card__body h1 { color: var(--brand); font-size: 1.4rem; margin: 20px 0 10px 0; }
.blog-card__body h2 { color: var(--brand); border-bottom: 2px solid var(--border); padding-bottom: 6px; margin: 24px 0 12px 0; font-size: 1.2rem; }
.blog-card__body h3 { color: var(--text); font-size: 1.1rem; margin: 18px 0 8px 0; }
.blog-card__body ul, .blog-card__body ol { margin: 0 0 10px 20px; padding: 0; }
.blog-card__body li { margin-bottom: 6px; }
.blog-card__body--truncated {
    max-height: 15em; /* Fallback for line-clamp */
    overflow: hidden;
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}
.blog-card__body--truncated::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3em;
    background: linear-gradient(to bottom, transparent, var(--panel));
    pointer-events: none;
}
.blog-card__read-more {
    background: none;
    border: none;
    color: var(--brand);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-size: 0.9rem;
    align-self: flex-start;
    margin-top: 4px;
    text-decoration: none;
}
.blog-carousel {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}
.blog-carousel__track {
    flex: 1;
    min-width: 0;
}
.blog-carousel__btn {
    background: var(--brand);
    border: 2px solid var(--brand);
    color: #ffffff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1.6rem;
    line-height: 1;
    padding-bottom: 4px;
    flex-shrink: 0;
    margin-top: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.blog-carousel__btn:hover:not(:disabled) {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    filter: brightness(1.1);
}
.blog-carousel__btn:disabled {
    background: var(--muted);
    border-color: var(--muted);
    opacity: 0.4;
    cursor: default;
    box-shadow: none;
}
.blog-card__read-more:hover { text-decoration: underline; }
.blog-card__image{flex:1;display:flex;align-items:flex-start;justify-content:center;margin-top:24px;}
.blog-card__image img{width:100%;max-width:220px;border-radius:16px;object-fit:cover;box-shadow:0 14px 32px rgba(0,0,0,0.35);border:2px solid rgba(255,255,255,0.08);}
.blog-card__footer { margin-top: 12px; text-align: center; }
.blog-card__link { color: var(--brand); font-weight: 700; text-decoration: none; cursor: pointer; }
.blog-card__link:hover { text-decoration: underline; }
.blog-card__status{padding:18px;border:1.5px dashed var(--border);border-radius:16px;text-align:center;font-weight:600;color:var(--text-dim);font-size:.95rem;}
@media(max-width:900px){
  .blog-card__post{flex-direction:column;}
  .blog-card__image img{max-width:100%;}
}
[data-theme="dark"] .testme-card{background:linear-gradient(135deg,rgba(6,182,212,.2),rgba(37,99,235,.18));}
[data-theme="dark"] .loop-card{background:linear-gradient(135deg,rgba(244,114,182,.22),rgba(192,38,211,.2));}
[data-theme="dark"] .improve-card{background:linear-gradient(135deg,rgba(129,140,248,.2),rgba(59,130,246,.18));color:#c4d9ff;}
@media (max-width:900px){
  .quick-card{flex:1 1 100%;}
}
.dashGrid{display:grid;grid-template-columns:minmax(320px,2fr) minmax(240px,1fr);gap:16px;align-items:start;justify-items:stretch;}
.dash-accuracy-card{grid-column:1/span 1;grid-row:1/span 3;align-self:stretch;}
.dash-average-card{grid-column:2/span 1;grid-row:1;display:flex;flex-direction:column;gap:6px;}
.dash-attempt-card{grid-column:2;grid-row:2;}
.dash-correct-card{grid-column:2;grid-row:3;}
.dash-recent-card{grid-column:1/span 2;width:100%;max-width:100%;justify-self:stretch;margin-top:4px;box-sizing:border-box;overflow:hidden;}
.recent-table-scroll{width:100%;overflow-x:auto;margin-top:8px;}
.recent-table-scroll table{min-width:640px;}
@media (max-width:1024px){
  .dashGrid{grid-template-columns:1fr;}
  .dash-accuracy-card{grid-row:auto;}
  .dash-average-card,.dash-attempt-card,.dash-correct-card,.dash-recent-card{grid-column:1;grid-row:auto;width:100%;max-width:none;}
  .dash-recent-card{margin-top:0;}
}
.card#panelQuestion{
  margin-bottom: 12px;
  box-sizing: border-box;
}
.answerbar{position:fixed;z-index:40;left:calc(320px + 20px);right:20px;bottom:14px;background:var(--panel);border:2px solid var(--border);border-radius:18px;padding:16px;box-sizing:border-box;} 
.answerbar__content{display:flex;flex-direction:column;gap:10px;align-items:stretch;}
.answerbar__label{text-transform:uppercase;font-size:12px;letter-spacing:.08em;font-weight:700;color:var(--text-dim);}
.answerbar__hint{font-size:12px;text-align:center;margin:0;}
.answerbar textarea{width:100%;max-width:100%;min-height:74px;resize:vertical;margin:0;display:block;padding:12px 14px;border-radius:12px;border:2px solid var(--border);background:var(--input-bg);color:var(--text);font-family:var(--mono-stack);}
.btn{border:0;padding:10px 14px;border-radius:12px;font-weight:700;cursor:pointer;} .btn.primary{background:var(--brand);color:#0b1e1f;} .btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border);} .btn.warn{background:var(--warn);color:#1a1207;} .btn.danger{background:var(--danger);color:#fff;}
.pill{display:inline-flex;gap:8px;align-items:center;padding:12px 16px;border-radius:999px;border:1px solid var(--border);background:rgba(11,18,36,.8);font-size:18px;font-weight:bold;}
/* Neon variants: make user pill light */
[data-theme|="neon-notebook"] .pill{background:#fff;border:2px solid var(--border);color:var(--text);} 
/* Light themes: make pill light to match UI */
[data-theme="sky-notebook"] .pill,
[data-theme="comic-sunset"] .pill,
[data-theme="mint-soda"] .pill,
[data-theme="cyber-lilac"] .pill{background:#fff;border:2px solid var(--border);color:var(--text);} 
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;z-index:100;padding:10vh 12px 4vh;overflow:hidden;box-sizing:border-box;place-items:start center;} .modal{width:min(640px,92vw);background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.4);margin:0 auto;max-height:calc(100vh - 18vh);overflow:auto;} .modal h3{margin-top:0;} .modal .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;}
.hidden{display:none!important;} #timerLabel{font-weight:800;letter-spacing:.08em;} .question-timer{position:absolute;top:10px;right:12px;z-index:2;}
#qNavStrip .qnav-item{display:inline-flex;align-items:center;} #qNavStrip .qnav-item .qsym{color:#a6e538;font-weight:700;margin-left:4px;} .qz-row{display:flex;gap:12px;align-items:flex-start;margin:8px 0;} .qz-avatar{width:54px;height:auto;border-radius:10px;box-shadow:0 6px 16px rgba(0,0,0,.12);flex:0 0 54px;}
@keyframes spin{to{transform:rotate(360deg);}} .spinner{width:18px;height:18px;border:2px solid #7aa0;border-top-color:#7aa;border-radius:50%;display:inline-block;animation:spin 1s linear infinite;margin-right:8px;}
#loadingTest{position:fixed;inset:0;background:rgba(15,23,42,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;} #loadingTest .pencil-spinner{width:150px;height:150px;animation:spin 2.5s linear infinite;}
.modal.wide-explain{width:min(1040px,96vw);max-height:calc(100vh - 18vh);overflow:hidden;margin:0 auto;border:3px solid var(--brand);box-shadow:0 12px 40px rgba(6,182,212,.15),0 0 0 1px rgba(56,181,207,.35) inset;}
/* Prevent background page scroll while modal is open */
body.modal-open{overflow:hidden;}
.scroll-themed, .qz-scrollbox{scrollbar-width:thin;scrollbar-color:var(--brand) rgba(11,18,36,.3);} .scroll-themed::-webkit-scrollbar,.qz-scrollbox::-webkit-scrollbar{width:12px;height:12px;} .scroll-themed::-webkit-scrollbar-track,.qz-scrollbox::-webkit-scrollbar-track{background:linear-gradient(180deg,rgba(11,18,36,.25),rgba(11,18,36,.45));border-radius:12px;border:3px solid transparent;background-clip:content-box;} .scroll-themed::-webkit-scrollbar-thumb,.qz-scrollbox::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(56,181,207,.9),rgba(6,182,212,.9));border-radius:999px;border:3px solid rgba(11,18,36,.6);box-shadow:0 2px 6px rgba(0,0,0,.35);} .scroll-themed::-webkit-scrollbar-thumb:hover,.qz-scrollbox::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(56,181,207,1),rgba(6,182,212,1));}
/* Light theme scrollbar track + Firefox color */
[data-theme="sky-notebook"] .scroll-themed,[data-theme="sky-notebook"] .qz-scrollbox{scrollbar-color:var(--brand) #e3eefc;}
[data-theme="sky-notebook"] .scroll-themed::-webkit-scrollbar-track,[data-theme="sky-notebook"] .qz-scrollbox::-webkit-scrollbar-track{background:linear-gradient(180deg,#f0f6ff,#e3eefc);} 
[data-theme="comic-sunset"] .scroll-themed,[data-theme="comic-sunset"] .qz-scrollbox{scrollbar-color:var(--brand) #fcd9bd;}
[data-theme="comic-sunset"] .scroll-themed::-webkit-scrollbar-track,[data-theme="comic-sunset"] .qz-scrollbox::-webkit-scrollbar-track{background:linear-gradient(180deg,#fff4e8,#fde7d3);} 
[data-theme="mint-soda"] .scroll-themed,[data-theme="mint-soda"] .qz-scrollbox{scrollbar-color:var(--brand) #dff6f2;}
[data-theme="mint-soda"] .scroll-themed::-webkit-scrollbar-track,[data-theme="mint-soda"] .qz-scrollbox::-webkit-scrollbar-track{background:linear-gradient(180deg,#e9fffa,#dff6f2);} 
[data-theme="cyber-lilac"] .scroll-themed,[data-theme="cyber-lilac"] .qz-scrollbox{scrollbar-color:var(--brand) #e7e1fb;}
[data-theme="cyber-lilac"] .scroll-themed::-webkit-scrollbar-track,[data-theme="cyber-lilac"] .qz-scrollbox::-webkit-scrollbar-track{background:linear-gradient(180deg,#f4f0ff,#e7e1fb);} 
[data-theme="chalkboard"] .scroll-themed,[data-theme="chalkboard"] .qz-scrollbox{scrollbar-color:var(--brand) #1b3a30;}
[data-theme="chalkboard"] .scroll-themed::-webkit-scrollbar-track,[data-theme="chalkboard"] .qz-scrollbox::-webkit-scrollbar-track{background:linear-gradient(180deg,#0f1f1a,#12251e);} 
/* Sidebar styles */
.layout .sidebar{position:sticky;top:var(--topbar-h);height:calc((100vh - var(--topbar-h))/var(--page-zoom));display:flex;flex-direction:column;min-height:0;padding:18px 14px 14px;box-sizing:border-box;box-shadow:none;overflow-y:auto;}
.sidebar-logo{width:80%;max-width:220px;align-self:center;margin-bottom:8px;object-fit:contain;}
.sidebar>h3{margin:8px 0 12px;line-height:1.2;}
.sidebar .courses{flex:1 1 auto;min-height:80px;max-height:50vh;overflow-y:auto;overscroll-behavior:contain;padding:0 10px 0 6px;scrollbar-gutter:stable;scrollbar-width:thin;}
.sidebar .courses::-webkit-scrollbar{width:8px;}
.sidebar .courses::-webkit-scrollbar-thumb{background:#2a3a5a;border-radius:6px;}
.course{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;margin:8px 0;border:1.5px solid var(--border);border-radius:12px;background:var(--card);cursor:pointer;box-sizing:border-box;width:100%;max-width:100%;overflow:hidden;}
.course:hover{border-color:var(--brand);}
.course.active{outline:2px solid var(--brand);outline-offset:-2px;}
.course-skill-tree{padding-left:16px;margin-top:2px;margin-bottom:6px;border-left:2px solid var(--border);margin-left:18px;}
.skill-tree-root{font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted,var(--muted));padding:4px 0 2px 0;opacity:0.7;}
.skill-tree-item{display:flex;align-items:center;gap:4px;font-size:0.88rem;padding:5px 6px 5px 0;cursor:pointer !important;border-radius:6px;color:var(--text);transition:color 0.15s,background 0.15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.skill-tree-item:hover{color:var(--brand);background:var(--brand-subtle,rgba(99,102,241,0.08));}
.skill-tree-item.active{color:var(--brand);font-weight:600;}
.skill-tree-branch{font-family:monospace;color:var(--border);margin-right:2px;flex-shrink:0;font-size:0.9rem;line-height:1;}
.sidebar .add{display:block;width:100%;max-width:100%;box-sizing:border-box;margin:14px 0 8px;padding:12px;border:2px dashed var(--brand);border-radius:12px;background:transparent;color:var(--brand);font-weight:700;text-align:center;cursor:pointer;}
.sidebar-settings-link{display:block;width:100%;box-sizing:border-box;padding:6px 8px;text-align:center;font-weight:700;font-size:13px;color:var(--text);text-decoration:none;margin-bottom:16px;border-radius:10px;transition:background .2s ease,color .2s ease;}
.sidebar-settings-link:hover{background:rgba(255,255,255,.08);text-decoration:none;}
#sidebarImage{margin-top:auto;align-self:center;width:min(220px,90%);height:auto;max-height:clamp(160px,26vh,280px);object-fit:contain;border-radius:12px;margin-bottom:6px;}
.sidebar,.sidebar *{box-sizing:border-box;}
@media(max-width:1024px){
  .question-panel{padding-bottom:40px;}
  .question-controls{position:static;margin-top:12px;justify-content:flex-start;}
}
/* Responsive zoom */ @media (max-width:1440px) and (min-width:1281px){:root[data-theme="dark"]{--page-zoom:.9;}} @media (max-width:1280px){:root[data-theme="dark"]{--page-zoom:.8;}} @media(max-width:820px){.layout{grid-template-columns:1fr;} .answerbar{left:0;}}

/* Tables (general) */
table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:12px;border:1px solid var(--border);} 
th,td{padding:10px 12px;border-bottom:1px solid var(--border);} 
th{text-align:left;color:var(--text-dim);font-weight:700;}
tr:last-child td{border-bottom:0;}

/* Results table alignment: center specific columns for readability */
#panelResults table th:nth-child(3),
#panelResults table td:nth-child(3),
#panelResults table th:nth-child(4),
#panelResults table td:nth-child(4),
#panelResults table th:nth-child(5),
#panelResults table td:nth-child(5),
#panelResults table th:nth-child(6),
#panelResults table td:nth-child(6),
#panelResults table th:nth-child(7),
#panelResults table td:nth-child(7){text-align:center;}

/* Ensure links in results use brand color */
#panelResults a{color:var(--brand);} #panelResults a:hover{opacity:.9;}
/* Thicker borders specifically for results tables */
#panelResults table{border-width:1.5px;}
#panelResults table th, #panelResults table td{border-bottom:1.25px solid var(--border);} 

/* ================= Registration Form ================= */
.register-panel{position:relative;}
.register-form{display:flex;flex-direction:column;gap:18px;max-width:780px;}
.register-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;}
.form-field{display:flex;flex-direction:column;gap:6px;}
.form-field label{font-size:13px;font-weight:600;color:var(--text-dim);}
.form-field input{padding:10px;border-radius:10px;border:1px solid var(--border);background:#0a1020;color:var(--text);font-size:14px;}
.form-field input:focus{outline:2px solid var(--brand);}
.form-field.full-span{grid-column:1 / -1;}
.avatar-preview{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:4px;}
.avatar-preview img{width:96px;height:96px;border-radius:14px;border:2px solid var(--border);object-fit:cover;box-shadow:0 4px 12px rgba(0,0,0,.4);background:#0a1020;}
.password-strength{display:flex;align-items:center;gap:12px;margin-top:6px;}
.password-strength .bar{flex:1;height:10px;background:#1e293b;border-radius:6px;overflow:hidden;border:1px solid var(--border);}
.password-strength .bar .inner{height:100%;width:0;background:var(--danger);transition:width .35s ease,background-color .35s ease;}
.password-strength .label{font-size:12px;font-weight:600;}
.reg-errors{color:var(--danger);font-size:13px;min-height:20px;}
.login-backend-toggle{display:flex;align-items:center;gap:12px;padding:8px 0;}
.login-backend-toggle__label{font-weight:600;}
.login-backend-toggle__hint{font-size:13px;line-height:1.4;}
.toggle-switch{position:relative;display:inline-flex;width:48px;height:26px;}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:var(--border,#d1d5db);border-radius:999px;transition:background .2s ease;}
.toggle-slider::before{content:"";position:absolute;height:18px;width:18px;left:4px;top:4px;border-radius:50%;background:var(--panel,#fff);box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .2s ease;}
.toggle-switch input:checked+.toggle-slider{background:var(--primary,#2563eb);}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(22px);}
.register-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:4px;}
.register-alt{margin-top:4px;font-size:12px;}
.register-intro{margin-top:0;}
.avatar-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;align-items:flex-start;max-height:150px;overflow-y:auto;padding:4px;border:1px solid var(--border);border-radius:12px;background:#0d162b;}
.avatar-grid label{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;width:92px;flex:0 0 auto;border:1px solid var(--border);border-radius:10px;background:#0d162b;cursor:pointer;transition:border-color .25s,background .25s,box-shadow .25s;}
.avatar-grid label:hover{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),0 4px 14px rgba(0,0,0,.45);} 
.avatar-grid img{width:60px;height:60px;object-fit:cover;border-radius:50%;border:2px solid var(--border);transition:border-color .25s,transform .25s;box-shadow:0 2px 6px rgba(0,0,0,.35);} 
.avatar-grid input[type=radio]{display:none;}
.avatar-grid label.selected img{border-color:var(--brand);transform:scale(1.08);} 

/* Pricing table box on dashboard */
#dashPricingWrap{opacity:.9;border-radius:16px;overflow:hidden;border:3px solid #06b6d4;}
#dashPricingWrap stripe-pricing-table{display:block;}
/* =============================================================
   Five Brand-new Themes (keep: dark and neon-notebook-soft)
   ============================================================= */

/* 1) Sky Notebook (airy blues, subtle lines) */
:root[data-theme="sky-notebook"]{
  --bg:#f7fbff; --bg-page:#f7fbff; --panel:#ffffff; --card:#ffffff; --text:#0f172a; --text-main:#0f172a; --text-dim:#475569;
  --brand:#3b82f6; --accent:rgba(59,130,246,.14); --warn:#f59e0b; --danger:#ef4444; --ok:#22c55e; --border:#dbe7f5; 
  --muted:#5b6b7e; --answerbar-h:180px; --mono-stack:ui-monospace,Consolas,monospace; --page-zoom:1; --topbar-h:0px; --input-bg:#ffffff;
  --fill-blue:rgba(59,130,246,.16); --fill-pink:rgba(99,102,241,.12); --fill-teal:rgba(45,212,191,.16); --fill-gold:rgba(251,191,36,.20);
  --shadow-soft:0 10px 26px rgba(15,23,42,.08);
  --chart-label:var(--text);
  --chart-muted:var(--text-dim);
  --chart-grid:rgba(15,23,42,0.15);
  --chart-line:var(--brand);
  --chart-bar:var(--ok);
}
[data-theme="sky-notebook"] .topbar{background:#ffffffee;border-bottom:2px solid #e3eefc;}
[data-theme="sky-notebook"] .navlinks button.active:not(.signin):not(.signout){background:#3b82f6;color:#fff;}
[data-theme="sky-notebook"] .sidebar{background:#f0f6ff;border-right:2px solid #e3eefc;}
[data-theme="sky-notebook"] .course{background:var(--card);border:2px solid #e3eefc;}
[data-theme="sky-notebook"] .row .col.card{background:var(--card);border:2px solid #e3eefc;}
[data-theme="sky-notebook"] .card{background:var(--card);border:2px solid #e3eefc;box-shadow:var(--shadow-soft);} 
[data-theme="sky-notebook"] .dashGrid .col.card{background:var(--card);} 
[data-theme="sky-notebook"] .row .col.card:nth-child(1){border-color:#3b82f6;background:var(--fill-blue);} 
[data-theme="sky-notebook"] .row .col.card:nth-child(2){border-color:#6366f1;background:var(--fill-pink);} 
[data-theme="sky-notebook"] .row .col.card:nth-child(3){border-color:#14b8a6;background:var(--fill-teal);} 
[data-theme="sky-notebook"] .row .col.card:nth-child(4){border-color:#f59e0b;background:var(--fill-gold);} 
[data-theme="sky-notebook"] .row .col.card:nth-child(5){border-color:#3b82f6;background:var(--fill-blue);} 
[data-theme="sky-notebook"] .btn.primary{background:#3b82f6;color:#fff;}
[data-theme="sky-notebook"] .answerbar{background:#ffffffee;border-top:2px solid #e3eefc;} 
[data-theme="sky-notebook"] .answerbar textarea{background:#fff;border:2px solid #e3eefc;color:var(--text);} 
[data-theme="sky-notebook"] .modal{background:#fff;border:2px solid #e3eefc;box-shadow:var(--shadow-soft);} 
[data-theme="sky-notebook"] .scroll-themed::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#3b82f6,#60a5fa);border:3px solid #ffffff80;}
[data-theme="sky-notebook"] #dashPricingWrap{background:#fff;border:3px solid #3b82f6;box-shadow:var(--shadow-soft);} 
[data-theme="sky-notebook"] .form-field input{background:#fff;border:2px solid #e3eefc;color:var(--text);} 
[data-theme="sky-notebook"] .form-field input:focus{outline:3px solid #3b82f6;} 
[data-theme="sky-notebook"] .avatar-grid{background:#edf4ff;border:2px solid #e3eefc;} 
[data-theme="sky-notebook"] .avatar-grid label{background:#fff;border:1px solid #e3eefc;} 
[data-theme="sky-notebook"] .avatar-grid label:hover{box-shadow:0 0 0 2px #3b82f6,0 4px 14px rgba(59,130,246,.25);} 
[data-theme="sky-notebook"] table{background:#fff;border:2px solid #e3eefc;} 

/* 2) Comic Sunset (warm oranges + magenta) */
:root[data-theme="comic-sunset"]{
  --bg:#fff8f1; --bg-page:#fff8f1; --panel:#ffffff; --card:#ffffff; --text:#1f2937; --text-main:#1f2937; --text-dim:#6b7280;
  --brand:#f97316; --accent:rgba(249,115,22,.16); --warn:#ef4444; --danger:#ef4444; --ok:#22c55e; --border:#fde7d3;
  --muted:#6b7280; --answerbar-h:180px; --mono-stack:ui-monospace,Consolas,monospace; --page-zoom:1; --topbar-h:0px; --input-bg:#ffffff;
  --fill-blue:rgba(249,115,22,.16); --fill-pink:rgba(236,72,153,.18); --fill-teal:rgba(20,184,166,.18); --fill-gold:rgba(251,191,36,.26);
  --shadow-soft:0 10px 26px rgba(249,115,22,.18);
  --chart-label:var(--text);
  --chart-muted:var(--text-dim);
  --chart-grid:rgba(30,41,59,0.18);
  --chart-line:var(--brand);
  --chart-bar:var(--ok);
}
[data-theme="comic-sunset"] .topbar{background:#ffffffee;border-bottom:2px solid #fde7d3;}
[data-theme="comic-sunset"] .navlinks button.active:not(.signin):not(.signout){background:#f97316;color:#1a1207;}
[data-theme="comic-sunset"] .sidebar{background:#fff4e8;border-right:2px solid #fde7d3;}
[data-theme="comic-sunset"] .course{background:var(--card);border:2px solid #fcd9bd;}
[data-theme="comic-sunset"] .row .col.card{background:var(--card);border:2px solid #fcd9bd;}
[data-theme="comic-sunset"] .card{background:var(--card);border:2px solid #fcd9bd;box-shadow:var(--shadow-soft);} 
[data-theme="comic-sunset"] .dashGrid .col.card{background:var(--card);} 
[data-theme="comic-sunset"] .row .col.card:nth-child(1){border-color:#f97316;background:var(--fill-blue);} 
[data-theme="comic-sunset"] .row .col.card:nth-child(2){border-color:#ec4899;background:var(--fill-pink);} 
[data-theme="comic-sunset"] .row .col.card:nth-child(3){border-color:#14b8a6;background:var(--fill-teal);} 
[data-theme="comic-sunset"] .row .col.card:nth-child(4){border-color:#f59e0b;background:var(--fill-gold);} 
[data-theme="comic-sunset"] .btn.primary{background:#f97316;color:#1a1207;}
[data-theme="comic-sunset"] .answerbar{background:#fffdf9;border-top:2px solid #fcd9bd;} 
[data-theme="comic-sunset"] .answerbar textarea{background:#fff;border:2px solid #fcd9bd;color:var(--text);} 
[data-theme="comic-sunset"] .modal{background:#fff;border:2px solid #fcd9bd;box-shadow:var(--shadow-soft);} 
[data-theme="comic-sunset"] .scroll-themed::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#f97316,#fb923c);border:3px solid #ffffff80;}
[data-theme="comic-sunset"] #dashPricingWrap{background:#fff;border:3px solid #f97316;box-shadow:var(--shadow-soft);} 
[data-theme="comic-sunset"] .form-field input{background:#fff;border:2px solid #fcd9bd;color:var(--text);} 
[data-theme="comic-sunset"] .form-field input:focus{outline:3px solid #f97316;} 
[data-theme="comic-sunset"] .avatar-grid{background:#fff1e5;border:2px solid #fcd9bd;} 
[data-theme="comic-sunset"] .avatar-grid label{background:#fff;border:1px solid #fcd9bd;} 
[data-theme="comic-sunset"] .avatar-grid label:hover{box-shadow:0 0 0 2px #f97316,0 4px 14px rgba(249,115,22,.25);} 
[data-theme="comic-sunset"] table{background:#fff;border:2px solid #fcd9bd;} 

/* 3) Mint Soda (fresh teals + bubbles) */
:root[data-theme="mint-soda"]{
  --bg:#f2fffb; --bg-page:#f2fffb; --panel:#ffffff; --card:#ffffff; --text:#0b1720; --text-main:#0b1720; --text-dim:#446b66;
  --brand:#2dd4bf; --accent:rgba(45,212,191,.16); --warn:#f59e0b; --danger:#ef4444; --ok:#16a34a; --border:#cfeee7;
  --muted:#446b66; --answerbar-h:180px; --mono-stack:ui-monospace,Consolas,monospace; --page-zoom:1; --topbar-h:0px; --input-bg:#ffffff;
  --fill-blue:rgba(45,212,191,.18); --fill-pink:rgba(20,184,166,.16); --fill-teal:rgba(59,130,246,.16); --fill-gold:rgba(251,191,36,.22);
  --shadow-soft:0 8px 24px rgba(12,71,64,.12);
  --chart-label:var(--text);
  --chart-muted:var(--text-dim);
  --chart-grid:rgba(12,71,64,0.18);
  --chart-line:var(--brand);
  --chart-bar:var(--ok);
}
[data-theme="mint-soda"] .topbar{background:#ffffffee;border-bottom:2px solid #dff6f2;}
[data-theme="mint-soda"] .navlinks button.active:not(.signin):not(.signout){background:#2dd4bf;color:#003b34;}
[data-theme="mint-soda"] .sidebar{background:#e9fffa;border-right:2px solid #dff6f2;}
[data-theme="mint-soda"] .course{background:var(--card);border:2px solid #dff6f2;}
[data-theme="mint-soda"] .row .col.card{background:var(--card);border:2px solid #dff6f2;}
[data-theme="mint-soda"] .card{background:var(--card);border:2px solid #dff6f2;box-shadow:var(--shadow-soft);} 
[data-theme="mint-soda"] .dashGrid .col.card{background:var(--card);} 
[data-theme="mint-soda"] .row .col.card:nth-child(1){border-color:#2dd4bf;background:var(--fill-blue);} 
[data-theme="mint-soda"] .row .col.card:nth-child(2){border-color:#14b8a6;background:var(--fill-pink);} 
[data-theme="mint-soda"] .row .col.card:nth-child(3){border-color:#3b82f6;background:var(--fill-teal);} 
[data-theme="mint-soda"] .row .col.card:nth-child(4){border-color:#f59e0b;background:var(--fill-gold);} 
[data-theme="mint-soda"] .btn.primary{background:#2dd4bf;color:#003b34;}
[data-theme="mint-soda"] .answerbar{background:#ffffffee;border-top:2px solid #dff6f2;} 
[data-theme="mint-soda"] .answerbar textarea{background:#fff;border:2px solid #dff6f2;color:var(--text);} 
[data-theme="mint-soda"] .modal{background:#fff;border:2px solid #dff6f2;box-shadow:var(--shadow-soft);} 
[data-theme="mint-soda"] .scroll-themed::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#2dd4bf,#5eead4);border:3px solid #ffffff80;}
[data-theme="mint-soda"] #dashPricingWrap{background:#fff;border:3px solid #2dd4bf;box-shadow:var(--shadow-soft);} 
[data-theme="mint-soda"] .form-field input{background:#fff;border:2px solid #dff6f2;color:var(--text);} 
[data-theme="mint-soda"] .form-field input:focus{outline:3px solid #2dd4bf;} 
[data-theme="mint-soda"] .avatar-grid{background:#ecfffb;border:2px solid #dff6f2;} 
[data-theme="mint-soda"] .avatar-grid label{background:#fff;border:1px solid #dff6f2;} 
[data-theme="mint-soda"] .avatar-grid label:hover{box-shadow:0 0 0 2px #2dd4bf,0 4px 14px rgba(45,212,191,.25);} 
[data-theme="mint-soda"] table{background:#fff;border:2px solid #dff6f2;} 

/* 4) Cyber Lilac (modern lilac with neon cues) */
:root[data-theme="cyber-lilac"]{
  --bg:#faf8ff; --bg-page:#faf8ff; --panel:#ffffff; --card:#ffffff; --text:#1b1530; --text-main:#1b1530; --text-dim:#544a72;
  --brand:#8b5cf6; --accent:rgba(139,92,246,.16); --warn:#f59e0b; --danger:#ec4899; --ok:#22c55e; --border:#e7e1fb;
  --muted:#544a72; --answerbar-h:180px; --mono-stack:ui-monospace,Consolas,monospace; --page-zoom:1; --topbar-h:0px; --input-bg:#ffffff;
  --fill-blue:rgba(139,92,246,.18); --fill-pink:rgba(236,72,153,.20); --fill-teal:rgba(45,212,191,.18); --fill-gold:rgba(251,191,36,.22);
  --shadow-soft:0 10px 28px rgba(27,21,48,.10);
  --chart-label:var(--text);
  --chart-muted:var(--text-dim);
  --chart-grid:rgba(27,21,48,0.18);
  --chart-line:var(--brand);
  --chart-bar:var(--ok);
}
[data-theme="cyber-lilac"] .topbar{background:#ffffffee;border-bottom:2px solid #e7e1fb;}
[data-theme="cyber-lilac"] .navlinks button.active:not(.signin):not(.signout){background:#8b5cf6;color:#fff;}
[data-theme="cyber-lilac"] .sidebar{background:#f4f0ff;border-right:2px solid #e7e1fb;}
[data-theme="cyber-lilac"] .course{background:var(--card);border:2px solid #e7e1fb;}
[data-theme="cyber-lilac"] .row .col.card{background:var(--card);border:2px solid #e7e1fb;}
[data-theme="cyber-lilac"] .card{background:var(--card);border:2px solid #e7e1fb;box-shadow:var(--shadow-soft);} 
[data-theme="cyber-lilac"] .dashGrid .col.card{background:var(--card);} 
[data-theme="cyber-lilac"] .row .col.card:nth-child(1){border-color:#8b5cf6;background:var(--fill-blue);} 
[data-theme="cyber-lilac"] .row .col.card:nth-child(2){border-color:#ec4899;background:var(--fill-pink);} 
[data-theme="cyber-lilac"] .row .col.card:nth-child(3){border-color:#14b8a6;background:var(--fill-teal);} 
[data-theme="cyber-lilac"] .row .col.card:nth-child(4){border-color:#f59e0b;background:var(--fill-gold);} 
[data-theme="cyber-lilac"] .btn.primary{background:#8b5cf6;color:#fff;}
[data-theme="cyber-lilac"] .answerbar{background:#ffffffee;border-top:2px solid #e7e1fb;} 
[data-theme="cyber-lilac"] .answerbar textarea{background:#fff;border:2px solid #e7e1fb;color:var(--text);} 
[data-theme="cyber-lilac"] .modal{background:#fff;border:2px solid #e7e1fb;box-shadow:var(--shadow-soft);} 
[data-theme="cyber-lilac"] .scroll-themed::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#8b5cf6,#a78bfa);border:3px solid #ffffff80;}
[data-theme="cyber-lilac"] #dashPricingWrap{background:#fff;border:3px solid #8b5cf6;box-shadow:var(--shadow-soft);} 
[data-theme="cyber-lilac"] .form-field input{background:#fff;border:2px solid #e7e1fb;color:var(--text);} 
[data-theme="cyber-lilac"] .form-field input:focus{outline:3px solid #8b5cf6;} 
[data-theme="cyber-lilac"] .avatar-grid{background:#f2ecff;border:2px solid #e7e1fb;} 
[data-theme="cyber-lilac"] .avatar-grid label{background:#fff;border:1px solid #e7e1fb;} 
[data-theme="cyber-lilac"] .avatar-grid label:hover{box-shadow:0 0 0 2px #8b5cf6,0 4px 14px rgba(139,92,246,.25);} 
[data-theme="cyber-lilac"] table{background:#fff;border:2px solid #e7e1fb;} 

/* 5) Chalkboard (scholastic dark slate + chalk) */
:root[data-theme="chalkboard"]{
  --bg:#101a16; --bg-page:#101a16; --panel:#0f1f1a; --card:#12251e; --text:#e5f3ec; --text-main:#e5f3ec; --text-dim:#b8d3c8;
  --brand:#86efac; --accent:rgba(134,239,172,.22); --warn:#fbbf24; --danger:#f87171; --ok:#22c55e; --border:#204237;
  --muted:#99c1b4; --answerbar-h:180px; --mono-stack:ui-monospace,Consolas,monospace; --page-zoom:1; --topbar-h:0px; --input-bg:#0f1f1a;
  --fill-blue:rgba(134,239,172,.20); --fill-pink:rgba(56,189,248,.20); --fill-teal:rgba(34,197,94,.22); --fill-gold:rgba(250,204,21,.22);
  --shadow-soft:0 16px 36px rgba(0,0,0,.55);
  --chart-label:var(--text);
  --chart-muted:var(--text-dim);
  --chart-grid:rgba(229,243,236,0.25);
  --chart-line:var(--brand);
  --chart-bar:var(--ok);
}
[data-theme="chalkboard"] .topbar{background:#0f1f1a;box-shadow:0 0 0 2px #1b3a30,0 8px 26px rgba(0,0,0,.5);}
[data-theme="chalkboard"] .navlinks button.active:not(.signin):not(.signout){background:#86efac;color:#0a1a14;}
[data-theme="chalkboard"] .sidebar{background:#0f1f1a;border-right:2px solid #1b3a30;}
[data-theme="chalkboard"] .course{background:#12251e;border:2px solid #1b3a30;}
[data-theme="chalkboard"] .row .col.card{background:linear-gradient(135deg,#12251e,#0f1f1a);border:2px solid #1b3a30;}
[data-theme="chalkboard"] .row .col.card:nth-child(1){border-color:#86efac;background:var(--fill-blue);} 
[data-theme="chalkboard"] .row .col.card:nth-child(2){border-color:#38bdf8;background:var(--fill-pink);} 
[data-theme="chalkboard"] .row .col.card:nth-child(3){border-color:#22c55e;background:var(--fill-teal);} 
[data-theme="chalkboard"] .row .col.card:nth-child(4){border-color:#facc15;background:var(--fill-gold);} 
[data-theme="chalkboard"] .btn.primary{background:#86efac;color:#0a1a14;}
[data-theme="chalkboard"] .answerbar{background:#12251eee;border-top:2px solid #1b3a30;} 
[data-theme="chalkboard"] .answerbar textarea{background:#0f1f1a;border:2px solid #1b3a30;color:var(--text);} 
[data-theme="chalkboard"] .modal{background:#12251e;border:2px solid #1b3a30;box-shadow:var(--shadow-soft);} 
[data-theme="chalkboard"] .scroll-themed::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#86efac,#bbf7d0);border:3px solid rgba(18,37,30,.8);} 
[data-theme="chalkboard"] #dashPricingWrap{background:#12251e;border:3px solid #86efac;box-shadow:0 12px 32px rgba(0,0,0,.45);} 
[data-theme="chalkboard"] .form-field input{background:#0f1f1a;border:2px solid #1b3a30;color:var(--text);} 
[data-theme="chalkboard"] .form-field input:focus{outline:3px solid #86efac;} 
[data-theme="chalkboard"] .avatar-grid{background:#0f1f1a;border:2px solid #1b3a30;} 
[data-theme="chalkboard"] .avatar-grid label{background:#12251e;border:1px solid #1b3a30;} 
[data-theme="chalkboard"] .avatar-grid label:hover{box-shadow:0 0 0 2px #86efac,0 4px 14px rgba(134,239,172,.18);} 
[data-theme="chalkboard"] table{background:#12251e;border:2px solid #1b3a30;} 

/* Marketing Layout */
.layout--marketing { grid-template-columns: 1fr !important; }
.layout--marketing .sidebar { display: none !important; }
.layout--marketing .main { max-width: 1200px; margin: 0 auto; }

/* Schools Progress */
#schoolsProgressSection .card { margin-bottom: 0; }
.school-target-card { transition: border-color 0.2s; }
.school-target-card:hover { border-color: var(--brand) !important; }
.school-checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 0; font-size: 0.9rem; }
.school-checkbox-label input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--brand); flex-shrink: 0; }

/* ================================================================
   DEVTOOLS UNIFIED PANEL
   ================================================================ */
#panelDevTools {
    display: flex !important; /* override .hidden which sets display:none */
}
#panelDevTools.hidden {
    display: none !important;
}

/* Left-nav buttons */
.dt-nav-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text, #374151);
    transition: background 0.15s, color 0.15s;
    border-left: 3px solid transparent;
    line-height: 1.4;
}
.dt-nav-btn:hover {
    background: rgba(0,0,0,0.05);
}
.dt-nav-btn.active {
    background: rgba(var(--primary-rgb, 99,102,241), 0.1);
    border-left-color: var(--primary, #6366f1);
    color: var(--primary, #6366f1);
    font-weight: 700;
}

/* Tool content panes */
.dt-tool-panel {
    animation: dtFadeIn 0.18s ease;
}
.dt-tool-panel.hidden { display: none !important; }

/* iframe-based tools need flex layout */
#dtTestMaker,
#dtVocab {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 100px);
}
#dtTestMaker.hidden,
#dtVocab.hidden {
    display: none !important;
}

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


/* Marketing Card Schemes */
.marketing-features {
    border: 2px solid var(--brand) !important;
    background: var(--panel);
}
.marketing-features h3 {
    color: var(--brand) !important;
}

.marketing-featured-tests {
    background: #475569 !important; /* Slate 600 - Lighter than before but still dark */
    border: 1px solid #64748b !important;
}
.marketing-featured-tests h3 {
    color: #f8fafc !important;
}

.marketing-blog {
    background: transparent !important;
    border: 1px solid #fed7aa !important; /* Orange 200 */
}
.marketing-blog .blog-card__chip {
    background: #ffedd5 !important; /* Orange 100 */
    color: #9a3412 !important; /* Orange 800 */
    border: 1px solid #fdba74 !important;
}

/* Features Card Layout */
.features-container {
    display: flex;
    gap: 32px;
    align-items: center;
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    flex: 1;
}
.features-image-col {
    display: none;
    flex: 0 0 300px;
}
@media (min-width: 1024px) {
    .features-image-col {
        display: block;
    }
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* Neutralize code tags */
code { font-family: inherit; font-size: inherit; background: transparent; padding: 0; }


/* Vocational Builder Flashcards */
.flashcard-wrap {
  perspective: 1000px;
  width: 100%;
  max-width: 400px;
  margin: 24px auto;
  cursor: pointer;
}

.flashcard {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4; /* aspect ratio */
  text-align: left;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  border-radius: 16px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border);
}

.flashcard-front, .flashcard-back {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

/* =====================================================================
   TOOLTIP BUBBLES
   ===================================================================== */
.er-tooltip-bubble {
    position: fixed;
    z-index: 9900;
    background: var(--primary, #6366f1);
    color: #fff;
    padding: 10px 28px 10px 14px;
    border-radius: 10px;
    font-size: 0.83rem;
    max-width: 240px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.22);
    line-height: 1.45;
    pointer-events: auto;
    animation: er-tip-in 0.18s ease;
}
@keyframes er-tip-in {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1); }
}
.er-tip-close {
    position: absolute;
    top: 5px; right: 7px;
    background: none; border: none;
    color: #fff; opacity: 0.7;
    cursor: pointer; font-size: 0.75rem;
    padding: 2px 4px; line-height: 1;
    border-radius: 4px;
}
.er-tip-close:hover { opacity: 1; background: rgba(255,255,255,0.15); }

.er-tip-footer {
    margin-top: 8px;
    text-align: right;
}
.er-tip-never {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
}
.er-tip-never:hover {
    color: #fff;
    text-decoration: underline;
}

/* Arrows — the ::after pseudo-element draws the pointer */
.er-tooltip-bubble::after {
    content: '';
    position: absolute;
    border: 7px solid transparent;
}
.er-tooltip-bubble.arrow-top::after {
    /* tip below anchor, arrow points up */
    top: -14px; left: 18px;
    border-bottom-color: var(--primary, #6366f1);
}
.er-tooltip-bubble.arrow-bottom::after {
    /* tip above anchor, arrow points down */
    bottom: -14px; left: 18px;
    border-top-color: var(--primary, #6366f1);
}
.er-tooltip-bubble.arrow-left::after {
    /* tip to the right of anchor, arrow points left */
    left: -14px; top: 12px;
    border-right-color: var(--primary, #6366f1);
}
.er-tooltip-bubble.arrow-right::after {
    /* tip to the left of anchor, arrow points right */
    right: -14px; top: 12px;
    border-left-color: var(--primary, #6366f1);
}

.flashcard-front {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); /* Dark gradient based on albeit.svg */
  color: #ecf0f1;      /* Light text */
}

.flashcard-front .word-title {
  font-size: 3rem;
  font-weight: 800;
  margin: 0;
  color: #ecf0f1;
}

.flashcard-back {
  transform: rotateY(180deg);
  background: #fff;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;
}

.flashcard-back .word-title {
  font-size: 2rem;
  font-weight: bold;
  border-bottom: 2px solid #3498db;
  padding-bottom: 8px;
  margin-bottom: 16px;
  width: 100%;
  color: #1a252f;
}

.vocab-field {
  margin-bottom: 12px;
  font-size: 1.1rem;
  line-height: 1.5;
}

.vocab-label {
  font-weight: bold;
  color: #3498db;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 1px;
  margin-right: 8px;
}

.vocab-btn {
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  font-weight: bold;
  cursor: pointer;
  transition: opacity 0.2s;
}

.vocab-btn:hover { opacity: 0.8; }
.vocab-btn.known { background: #2ecc71; color: white; }
.vocab-btn.learning { background: #e67e22; color: white; }
.vocab-btn.unknown { background: #e74c3c; color: white; }

/* Vocab Builder Hover States */
.vocab-tile[onclick]:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-color: var(--primary) !important; }