@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700;800&display=swap');

:root {
  --gs-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --gs-font-title: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Default Light Mode Color Scheme (Day view) */
  --gs-teal:      #3b82f6; /* Premium Indigo-blue accent */
  --gs-teal-dark: #2563eb;
  --gs-teal-pale: #eff6ff;
  --gs-teal-mid:  #bfdbfe;
  --gs-navy:      #0f172a; /* Slate 900 for header */
  --gs-navy-mid:  #1e293b;
  --gs-text:      #0f172a;
  --gs-text-2:    #334155;
  --gs-text-3:    #64748b;
  --gs-border:    #e2e8f0;
  --gs-border-2:  #cbd5e0;
  --gs-bg:        #f8fafc;
  --gs-white:     #ffffff;
  --gs-card:      #ffffff;
  --gs-sure:      #10b981;
  --gs-intuition: #3b82f6;
  --gs-fifty:     #f59e0b;
  --gs-guess:     #6b7280;
  --gs-danger:    #ef4444;
  --gs-warning:   #f59e0b;
  --gs-success:   #10b981;
  --gs-xp:        #8b5cf6;
  /* Pale semantic backgrounds — used behind text colored with --gs-text,
     so unlike --gs-success/--gs-danger themselves these MUST flip for
     dark mode too (a light pastel fill under near-white text is
     unreadable) — see the .gs-mcq-option.correct/.wrong and
     .gs-explanation rules below. */
  --gs-success-bg:     #f0fdf4;
  --gs-success-border: #bbf7d0;
  --gs-danger-bg:      #fef2f2;
  --gs-danger-border:  #fecaca;
  /* Confidence Analysis card backgrounds — same reasoning as
     --gs-success-bg/--gs-danger-bg above: text on these fills uses
     --gs-text/--gs-text-3, so the fills must flip for dark mode too. */
  --gs-conf-sure-bg:      #ecfdf5;
  --gs-conf-intuition-bg: #eff6ff;
  --gs-conf-fifty-bg:     #fffbeb;
  --gs-conf-guess-bg:     #f9fafb;
  --gs-conf-untagged-bg:  #f1f5f9;
  --gs-radius:    16px;
  --gs-radius-sm: 10px;
  --gs-shadow:    0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --gs-shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  --gs-nav-h:     60px;
  --gs-sidebar-w: 240px;
}

/* Night Mode Colors (Dark Theme) */
html.night-mode body.gsmitra-app,
body.night-mode {
  --gs-bg:        #0b0f19; /* Deep charcoal slate */
  --gs-card:      rgba(17, 24, 39, 0.75); /* Semitranslucent glass card */
  --gs-white:     #111827;
  --gs-text:      #f3f4f6;
  --gs-text-2:    #e5e7eb;
  --gs-text-3:    #9ca3af;
  --gs-border:    rgba(255, 255, 255, 0.09);
  --gs-border-2:  rgba(255, 255, 255, 0.16);
  --gs-teal:      #6366f1; /* Indigo primary for night mode */
  --gs-teal-dark: #4f46e5;
  --gs-teal-pale: rgba(99, 102, 241, 0.14);
  --gs-teal-mid:  #818cf8;
  --gs-shadow:    0 4px 30px rgba(0, 0, 0, 0.3);
  --gs-shadow-md: 0 10px 40px rgba(0, 0, 0, 0.4);
  --gs-success-bg:     rgba(16, 185, 129, 0.14);
  --gs-success-border: rgba(16, 185, 129, 0.4);
  --gs-danger-bg:      rgba(239, 68, 68, 0.14);
  --gs-danger-border:  rgba(239, 68, 68, 0.4);
  --gs-conf-sure-bg:      rgba(16, 185, 129, 0.14);
  --gs-conf-intuition-bg: rgba(59, 130, 246, 0.14);
  --gs-conf-fifty-bg:     rgba(245, 158, 11, 0.14);
  --gs-conf-guess-bg:     rgba(156, 163, 175, 0.14);
  --gs-conf-untagged-bg:  rgba(148, 163, 184, 0.10);
}

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

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body.gsmitra-app {
  font-family: var(--gs-font);
  background: var(--gs-bg);
  color: var(--gs-text);
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ── Typography ─────────────────────────────────────────── */
h1,h2,h3,h4,h5 { font-family: var(--gs-font-title); font-weight: 700; line-height: 1.3; color: var(--gs-text); }
h1 { font-size: clamp(1.5rem,3vw,2rem); }
h2 { font-size: clamp(1.2rem,2.5vw,1.5rem); }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; }
p  { color: var(--gs-text-2); }
a  { color: var(--gs-teal); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Top Nav ────────────────────────────────────────────── */
.gs-topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--gs-nav-h);
  background: var(--gs-navy);
  display: flex; align-items: center; padding: 0 1rem;
  gap: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.gs-topnav .gs-logo {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1.1rem; font-weight: 700; color: #fff; letter-spacing: -.02em;
}
.gs-topnav .gs-logo img { height: 32px; width: auto; }
.gs-topnav .gs-logo span { color: var(--gs-teal); }
.gs-nav-spacer { flex: 1; }
.gs-nav-user {
  display: flex; align-items: center; gap: .75rem;
}
.gs-nav-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--gs-teal); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem; flex-shrink: 0;
}
.gs-nav-name { color: #fff; font-size: .85rem; display: none; }
.gs-nav-plan-pill {
  display: none; align-items: center; white-space: nowrap;
  font-size: .78rem; font-weight: 600; color: var(--gs-teal-mid);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 99px; padding: .3rem .7rem; text-decoration: none;
}
.gs-nav-plan-pill:hover { background: rgba(255,255,255,.12); text-decoration: none; }
.gs-nav-plan-pill-upgrade { color: #fff; background: var(--gs-teal); border-color: var(--gs-teal); }
.gs-nav-plan-pill-upgrade:hover { background: var(--gs-teal-dark); }
.gs-nav-plan-expiry { opacity: .85; font-weight: 400; }
/* Mobile plan card on Home — hidden on desktop, where the navbar pill above covers this instead */
.gs-home-plan-card { display: block; text-decoration: none; color: inherit; border-left: 3px solid var(--gs-teal); }
.gs-home-plan-card:hover { text-decoration: none; }
.gs-home-plan-card-upgrade { border-left-color: var(--gs-danger); }
.gs-nav-id   { color: var(--gs-teal-mid); font-size: .75rem; }
.gs-nav-bell {
  position: relative; color: #9ca3af; cursor: pointer;
  font-size: 1.2rem; padding: .25rem;
}
.gs-nav-bell .gs-badge {
  position: absolute; top: 0; right: 0;
  background: var(--gs-danger); color: #fff;
  font-size: 9px; font-weight: 700; border-radius: 10px;
  padding: 1px 4px; min-width: 16px; text-align: center;
}
.gs-hamburger {
  background: none; border: none; color: #9ca3af; cursor: pointer;
  font-size: 1.4rem; padding: .25rem; display: flex;
}

/* ── Layout ─────────────────────────────────────────────── */
.gs-layout {
  display: flex; padding-top: var(--gs-nav-h);
  min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────── */
.gs-sidebar {
  position: fixed; top: var(--gs-nav-h); left: 0; bottom: 0;
  width: var(--gs-sidebar-w);
  background: var(--gs-white);
  border-right: 1px solid var(--gs-border);
  overflow-y: auto; overflow-x: hidden;
  transform: translateX(-100%);
  transition: transform .25s ease, width .2s ease;
  z-index: 90;
  display: flex; flex-direction: column;
}
.gs-sidebar.open { transform: translateX(0); }
.gs-sidebar-toggle {
  display: none; background: none; border: none; font-size: 1.15rem;
  cursor: pointer; padding: .25rem; align-items: center; justify-content: center;
  margin-right: 4px; color: var(--gs-text-2);
}
.gs-sidebar-overlay {
  display: none; position: fixed; inset: 0; z-index: 89;
  background: rgba(0,0,0,.35);
}
.gs-sidebar-overlay.show { display: block; }

.gs-nav-list { list-style: none; padding: 1rem 0; flex: 1; }
.gs-nav-item a {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 1.25rem; color: var(--gs-text-2);
  font-size: .875rem; font-weight: 500; border-radius: 0;
  transition: background .15s, color .15s;
  text-decoration: none;
}
.gs-nav-item a:hover { background: var(--gs-teal-pale); color: var(--gs-teal-dark); }
.gs-nav-item.active a { background: var(--gs-teal-pale); color: var(--gs-teal); border-left: 3px solid var(--gs-teal); }
.gs-nav-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
.gs-nav-item.gs-nav-locked a { opacity: .55; }
.gs-nav-lock { margin-left: auto; font-size: .75rem; opacity: .8; }
.gs-bnav-locked { opacity: .55; }
.gs-nav-divider { height: 1px; background: var(--gs-border); margin: .5rem 1.25rem; }
.gs-nav-section-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--gs-text-3);
  padding: .5rem 1.25rem .25rem;
}
.gs-sidebar-footer {
  padding: 1rem 1.25rem; border-top: 1px solid var(--gs-border);
}
.gs-streak-pill {
  display: flex; align-items: center; gap: .5rem;
  background: var(--gs-teal-pale); border-radius: var(--gs-radius-sm);
  padding: .5rem .75rem; font-size: .8rem; color: var(--gs-teal-dark); font-weight: 600;
}

/* ── Main content ───────────────────────────────────────── */
.gs-main {
  flex: 1; min-width: 0;
  padding: 1.5rem 1rem 5rem;
  transition: margin-left .25s;
}

/* ── Cards ──────────────────────────────────────────────── */
.gs-card {
  background: var(--gs-card); border-radius: var(--gs-radius);
  border: 1px solid var(--gs-border); box-shadow: var(--gs-shadow);
  padding: 1.25rem;
}
.gs-card-title {
  font-size: .8rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--gs-text-3); margin-bottom: .75rem;
}
.gs-card + .gs-card { margin-top: 1rem; }

/* ── Stat cards ─────────────────────────────────────────── */
.gs-stats-grid {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(2, 1fr);
}
.gs-stat-card {
  background: var(--gs-card); border-radius: var(--gs-radius);
  border: 1px solid var(--gs-border); padding: 1rem;
  display: flex; flex-direction: column; gap: .25rem;
}
.gs-stat-label { font-size: .75rem; color: var(--gs-text-3); font-weight: 500; }
.gs-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--gs-text); line-height: 1; }
.gs-stat-sub   { font-size: .75rem; color: var(--gs-text-3); }
.gs-stat-card.teal  .gs-stat-value { color: var(--gs-teal); }
.gs-stat-card.xp    .gs-stat-value { color: var(--gs-xp); }
.gs-stat-card.fire  .gs-stat-value { color: #f97316; }
.gs-stat-card.blue  .gs-stat-value { color: #3b82f6; }

/* ── XP Progress bar ────────────────────────────────────── */
.gs-xp-bar {
  background: #e9d5ff; border-radius: 99px; height: 8px; overflow: hidden;
}
.gs-xp-fill {
  height: 100%; background: var(--gs-xp); border-radius: 99px;
  transition: width .6s ease;
}
.gs-level-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .35rem;
}
.gs-level-name { font-size: .8rem; font-weight: 600; color: var(--gs-xp); }
.gs-level-xp   { font-size: .75rem; color: var(--gs-text-3); }

/* ── Streak display ─────────────────────────────────────── */
.gs-streak-display {
  display: flex; align-items: center; gap: .5rem;
}
.gs-streak-number {
  font-size: 2rem; font-weight: 800; color: #f97316; line-height: 1;
}
.gs-streak-label { font-size: .8rem; color: var(--gs-text-3); }

/* ── Page header ────────────────────────────────────────── */
.gs-page-header {
  margin-bottom: 1.25rem;
}
.gs-page-header h1 { font-size: 1.3rem; margin-bottom: .25rem; }
.gs-page-header p  { font-size: .875rem; color: var(--gs-text-3); }

/* ── Buttons ────────────────────────────────────────────── */
.gs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .6rem 1.25rem; border-radius: var(--gs-radius-sm);
  font-size: .875rem; font-weight: 600; cursor: pointer;
  transition: all .15s; border: none; text-decoration: none;
  white-space: nowrap;
}
.gs-btn:hover { text-decoration: none; }
.gs-btn-primary   { background: var(--gs-teal); color: #fff; }
.gs-btn-primary:hover { background: var(--gs-teal-dark); }
.gs-btn-outline   { background: transparent; color: var(--gs-teal); border: 1.5px solid var(--gs-teal); }
.gs-btn-outline:hover { background: var(--gs-teal-pale); }
.gs-btn-ghost     { background: transparent; color: var(--gs-text-2); border: 1px solid var(--gs-border-2); }
.gs-btn-ghost:hover { background: var(--gs-bg); }
.gs-btn-danger    { background: #fee2e2; color: var(--gs-danger); border: 1px solid #fca5a5; }
.gs-btn-sm { padding: .4rem .85rem; font-size: .8rem; }
.gs-btn-full { width: 100%; }
.gs-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── MCQ Interface ──────────────────────────────────────── */
.gs-mcq-question {
  font-size: 1rem; font-weight: 500; color: var(--gs-text);
  line-height: 1.6; margin-bottom: 1.25rem; padding: 1rem;
  background: var(--gs-teal-pale); border-radius: var(--gs-radius-sm);
  border-left: 3px solid var(--gs-teal);
}
/* "Clear Response" — sits between the options and the confidence row, the
   same place the real UPSC/UPPSC CBT interface puts it. Hidden until there
   is actually a response to clear. */
.gs-clear-row { display: flex; justify-content: flex-end; margin: -0.75rem 0 1rem; }
.gs-clear-btn { font-size: .75rem; color: var(--gs-text-3); }
.gs-clear-btn:hover { color: var(--gs-danger); border-color: var(--gs-danger); }

.gs-mcq-image { margin: -0.75rem 0 1.25rem; text-align: center; }
.gs-mcq-image img { max-width: 100%; max-height: 360px; border-radius: var(--gs-radius-sm); border: 1px solid var(--gs-border); }
.gs-mcq-options { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.25rem; }
.gs-mcq-option {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .75rem 1rem; border: 1.5px solid var(--gs-border);
  border-radius: var(--gs-radius-sm); cursor: pointer;
  transition: all .15s; background: var(--gs-white);
}
.gs-mcq-option:hover { border-color: var(--gs-teal); background: var(--gs-teal-pale); }
.gs-mcq-option.selected { border-color: var(--gs-teal); background: var(--gs-teal-pale); }
.gs-mcq-option.correct  { border-color: var(--gs-success); background: var(--gs-success-bg); }
.gs-mcq-option.wrong    { border-color: var(--gs-danger); background: var(--gs-danger-bg); }
.gs-mcq-letter {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gs-border); color: var(--gs-text-2);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; flex-shrink: 0;
}
.gs-mcq-option.selected .gs-mcq-letter { background: var(--gs-teal); color: #fff; }
.gs-mcq-option.correct .gs-mcq-letter  { background: var(--gs-success); color: #fff; }
.gs-mcq-option.wrong .gs-mcq-letter    { background: var(--gs-danger); color: #fff; }
.gs-mcq-text { font-size: .9rem; color: var(--gs-text); line-height: 1.5; }

/* ── Confidence selector ────────────────────────────────── */
.gs-confidence-row {
  display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.gs-conf-label { font-size: .8rem; color: var(--gs-text-3); margin-bottom: .4rem; }
.gs-conf-btn {
  padding: .35rem .75rem; border-radius: 99px;
  font-size: .75rem; font-weight: 600; cursor: pointer; border: 1.5px solid transparent;
  transition: all .15s;
}
.gs-conf-btn.sure       { border-color: var(--gs-sure); color: var(--gs-sure); background: #ecfdf5; }
.gs-conf-btn.intuition  { border-color: var(--gs-intuition); color: var(--gs-intuition); background: #eff6ff; }
.gs-conf-btn.fifty      { border-color: var(--gs-fifty); color: var(--gs-fifty); background: #fffbeb; }
.gs-conf-btn.guess      { border-color: var(--gs-guess); color: var(--gs-guess); background: #f9fafb; }
.gs-conf-btn.selected.sure      { background: var(--gs-sure); color: #fff; }
.gs-conf-btn.selected.intuition { background: var(--gs-intuition); color: #fff; }
.gs-conf-btn.selected.fifty     { background: #b45309; color: #fff; border-color: #b45309; }
.gs-conf-btn.selected.guess     { background: var(--gs-guess); color: #fff; }
/* Selection shouldn't rely on color alone — add a checkmark + ring so it reads
   clearly regardless of the button's own hue (this is what made 50-50 hard to
   tell apart: its border/bg colors are close in tone to its unselected state) */
.gs-conf-btn.selected {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0,0,0,.18);
  font-weight: 700;
}
.gs-conf-btn.selected::before { content: "\2713\0020"; }

/* ── Explanation box ────────────────────────────────────── */
.gs-explanation {
  background: var(--gs-success-bg); border: 1px solid var(--gs-success-border);
  border-radius: var(--gs-radius-sm); padding: .875rem;
  font-size: .875rem; line-height: 1.6; color: var(--gs-text);
  margin-top: .75rem;
}
.gs-explanation-label {
  font-weight: 700; color: var(--gs-success); font-size: .8rem;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: .35rem;
}

/* Restore paragraph/list/heading spacing inside admin-authored rich content
   (question text, explanations) — the global * { margin:0; padding:0 } reset
   above strips these by default, which is what made formatted text look like
   one flat run with no breaks, lists, or visible bold. */
.gs-mcq-question p, .gs-explanation p, .gs-rich p { margin: 0 0 .75em; }
.gs-mcq-question p:last-child, .gs-explanation p:last-child, .gs-rich p:last-child { margin-bottom: 0; }
.gs-mcq-question ol, .gs-mcq-question ul,
.gs-explanation ol, .gs-explanation ul,
.gs-rich ol, .gs-rich ul { margin: .4em 0 .75em; padding-left: 1.4em; }
.gs-mcq-question li, .gs-explanation li, .gs-rich li { margin-bottom: .3em; }
.gs-mcq-question strong, .gs-mcq-question b,
.gs-explanation strong, .gs-explanation b,
.gs-rich strong, .gs-rich b { font-weight: 700; }
.gs-mcq-question h1, .gs-mcq-question h2, .gs-mcq-question h3,
.gs-explanation h1, .gs-explanation h2, .gs-explanation h3,
.gs-rich h1, .gs-rich h2, .gs-rich h3 { margin: .5em 0 .35em; font-weight: 700; }

/* Tables inserted via the admin's "Insert table" builder — theme-aware
   (not hardcoded light colors) so it stays readable in dark mode too. */
.gs-mcq-question table, .gs-explanation table, .gs-rich table {
  border-collapse: collapse; width: 100%; margin: .5em 0 .75em; font-size: .92em;
  overflow-x: auto; display: block;
}
.gs-mcq-question td, .gs-mcq-question th,
.gs-explanation td, .gs-explanation th,
.gs-rich td, .gs-rich th {
  border: 1px solid var(--gs-border); padding: .4em .6em; text-align: left;
}
.gs-mcq-question th, .gs-explanation th, .gs-rich th {
  background: var(--gs-bg); font-weight: 700; color: var(--gs-text);
}

/* ── MCQ meta/nav ───────────────────────────────────────── */
.gs-mcq-meta {
  display: flex; align-items: center; gap: 1rem;
  font-size: .8rem; color: var(--gs-text-3); margin-bottom: 1rem;
  flex-wrap: wrap;
}
.gs-mcq-meta span { display: flex; align-items: center; gap: .3rem; }
.gs-mcq-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--gs-border);
  flex-wrap: wrap; gap: .5rem;
}
/* Each inner group (action buttons on the left, Prev/Next on the right)
   is deliberately NOT wrap-enabled itself — an earlier fix here let each
   button wrap independently, which split Prev and Next across two
   different lines (confusing — they read as unrelated buttons). Only the
   outer .gs-mcq-nav wraps, so at most it's two lines: the action group
   whole, then the nav group whole, each group's own buttons always
   staying together. */
.gs-mcq-nav > div { display: flex; gap: .4rem; }
.gs-mcq-counter {
  font-size: .875rem; font-weight: 600; color: var(--gs-text-2);
}

/* ── Progress bar ───────────────────────────────────────── */
.gs-progress {
  background: var(--gs-border); border-radius: 99px; height: 6px; overflow: hidden;
}
.gs-progress-fill {
  height: 100%; background: var(--gs-teal); border-radius: 99px;
  transition: width .3s ease;
}

/* ── Test navigator (NTA style) ─────────────────────────── */
.gs-test-header {
  position: sticky; top: var(--gs-nav-h); z-index: 80;
  background: var(--gs-white); border-bottom: 1px solid var(--gs-border);
  padding: .75rem 1rem; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
}
.gs-test-timer {
  font-size: 1.1rem; font-weight: 700; color: var(--gs-teal);
  font-variant-numeric: tabular-nums;
}
.gs-test-timer.danger { color: var(--gs-danger); animation: pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

.gs-q-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(36px,1fr)); gap: .35rem;
}
.gs-q-bubble {
  width: 36px; height: 36px; border-radius: var(--gs-radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; cursor: pointer;
  border: 1.5px solid var(--gs-border); color: var(--gs-text-2);
  background: var(--gs-white); transition: all .1s;
}
.gs-q-bubble.answered   { background: var(--gs-teal); color: #fff; border-color: var(--gs-teal); }
.gs-q-bubble.current    { border-color: var(--gs-teal); color: var(--gs-teal); }
.gs-q-bubble.marked     { background: #8b5cf6; color: #fff; border-color: #8b5cf6; }
/* Was a hardcoded light-gray hex — fine in light mode, but combined with
   the base rule's var(--gs-text-2) (which flips to near-white in dark
   mode) it produced near-white numbers on a near-white background,
   exactly the "numbers not visible in dark mode" bug. var(--gs-bg) gives
   the same "slightly off from white" look in light mode while correctly
   flipping dark in dark mode, same as --gs-text-2 does. */
.gs-q-bubble.not-visited{ background: var(--gs-bg); }
@keyframes gsQNavPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29,158,117,0); }
  50%      { box-shadow: 0 0 0 6px rgba(29,158,117,.35); }
}
.gs-q-nav-pulse { animation: gsQNavPulse 0.5s ease-in-out 2; border-radius: var(--gs-radius, 8px); }

/* ── Study log form ─────────────────────────────────────── */
.gs-log-step {
  display: none;
}
.gs-log-step.active { display: block; }
.gs-log-question-label {
  font-size: 1rem; font-weight: 600; color: var(--gs-text);
  margin-bottom: 1rem; line-height: 1.4;
}
.gs-log-options {
  display: flex; flex-direction: column; gap: .5rem;
}
/* A 1-10 scale reads better as a compact number grid than 10 stacked
   full-width rows (the default .gs-log-option list style). */
.gs-log-options-scale {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem;
}
.gs-log-option-scale {
  justify-content: center; padding: .75rem .5rem; font-weight: 700; font-size: 1rem;
}
.gs-log-option {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem; border: 1.5px solid var(--gs-border);
  border-radius: var(--gs-radius-sm); cursor: pointer;
  transition: all .15s; background: var(--gs-white);
  font-size: .9rem; color: var(--gs-text);
}
.gs-log-option:hover { border-color: var(--gs-teal); background: var(--gs-teal-pale); }
.gs-log-option.selected { border-color: var(--gs-teal); background: var(--gs-teal-pale); color: var(--gs-teal-dark); }
.gs-log-option-icon { font-size: 1.2rem; }
.gs-log-input {
  width: 100%; padding: .75rem 1rem; border: 1.5px solid var(--gs-border);
  border-radius: var(--gs-radius-sm); font-size: .95rem; color: var(--gs-text);
  font-family: var(--gs-font); outline: none; transition: border .15s;
  background: var(--gs-white);
}
.gs-log-input:focus { border-color: var(--gs-teal); }
.gs-log-stepper {
  display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem;
}
.gs-log-step-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gs-border); transition: background .2s;
}
.gs-log-step-dot.done    { background: var(--gs-teal); }
.gs-log-step-dot.current { background: var(--gs-teal); width: 20px; border-radius: 4px; }

/* ── Dashboard quick links ──────────────────────────────── */
.gs-quick-grid {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(2, 1fr);
}
.gs-quick-card {
  background: var(--gs-card); border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius); padding: 1rem;
  display: flex; flex-direction: column; gap: .35rem;
  cursor: pointer; transition: all .15s; text-decoration: none;
}
.gs-quick-card:hover { border-color: var(--gs-teal); background: var(--gs-teal-pale); text-decoration: none; }
.gs-quick-icon { font-size: 1.5rem; }
.gs-quick-title { font-size: .875rem; font-weight: 600; color: var(--gs-text); }
.gs-quick-sub   { font-size: .75rem; color: var(--gs-text-3); }

/* ── Badges/pills ───────────────────────────────────────── */
.gs-badge {
  display: inline-flex; align-items: center;
  padding: .2rem .6rem; border-radius: 99px;
  font-size: .72rem; font-weight: 600;
}
.gs-badge-teal    { background: var(--gs-teal-pale); color: var(--gs-teal-dark); }
.gs-badge-green   { background: #ecfdf5; color: #065f46; }
.gs-badge-red     { background: #fef2f2; color: #991b1b; }
.gs-badge-amber   { background: #fffbeb; color: #92400e; }
.gs-badge-purple  { background: #f5f3ff; color: #5b21b6; }
.gs-badge-gray    { background: #f3f4f6; color: #374151; }

/* ── Tables ─────────────────────────────────────────────── */
.gs-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gs-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.gs-table th {
  text-align: left; padding: .65rem .875rem;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gs-text-3);
  border-bottom: 2px solid var(--gs-border); background: var(--gs-bg);
}
.gs-table td {
  padding: .75rem .875rem; border-bottom: 1px solid var(--gs-border);
  color: var(--gs-text); vertical-align: middle;
}
.gs-table tr:last-child td { border-bottom: none; }
.gs-table tr:hover td { background: var(--gs-bg); }

/* ── Empty state ────────────────────────────────────────── */
.gs-empty {
  text-align: center; padding: 3rem 1rem;
  color: var(--gs-text-3);
}
.gs-empty-icon { font-size: 2.5rem; margin-bottom: .75rem; opacity: .4; }
.gs-empty h3   { font-size: 1rem; color: var(--gs-text-2); margin-bottom: .35rem; }
.gs-empty p    { font-size: .875rem; }

/* ── Toast notifications ────────────────────────────────── */
.gs-toast-wrap {
  position: fixed; bottom: 5rem; left: 50%; transform: translateX(-50%);
  z-index: 999; display: flex; flex-direction: column; gap: .5rem;
  pointer-events: none; width: calc(100% - 2rem); max-width: 380px;
}
.gs-toast {
  background: var(--gs-navy); color: #fff;
  padding: .75rem 1rem; border-radius: var(--gs-radius-sm);
  font-size: .875rem; box-shadow: var(--gs-shadow-md);
  display: flex; align-items: center; gap: .75rem;
  animation: slide-up .25s ease; pointer-events: all;
}
.gs-toast.success { border-left: 3px solid var(--gs-success); }
.gs-toast.error   { border-left: 3px solid var(--gs-danger); }
.gs-toast.xp      { border-left: 3px solid var(--gs-xp); }
@keyframes slide-up { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ── XP pop animation ───────────────────────────────────── */
.gs-xp-pop {
  position: fixed; pointer-events: none; z-index: 999;
  font-size: 1.1rem; font-weight: 800; color: var(--gs-xp);
  animation: xp-float 1.2s ease forwards;
}
@keyframes xp-float {
  0%   { opacity:1; transform: translateY(0) scale(1); }
  60%  { opacity:1; transform: translateY(-40px) scale(1.2); }
  100% { opacity:0; transform: translateY(-70px) scale(.8); }
}

/* ── Loading skeleton ───────────────────────────────────── */
.gs-skeleton {
  background: linear-gradient(90deg, var(--gs-border) 25%, var(--gs-bg) 50%, var(--gs-border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite; border-radius: 4px;
}
@keyframes shimmer { 0%{background-position:200%} 100%{background-position:-200%} }

/* ── Mentor dashboard specific ──────────────────────────── */
.gs-student-row {
  display: flex; align-items: center; gap: .875rem;
  padding: .875rem; border-radius: var(--gs-radius-sm);
  border: 1px solid var(--gs-border); margin-bottom: .5rem;
  background: var(--gs-white); cursor: pointer; transition: all .15s;
  text-decoration: none;
}
.gs-student-row:hover { border-color: var(--gs-teal); background: var(--gs-teal-pale); text-decoration: none; }
.gs-student-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gs-teal); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; flex-shrink: 0;
}
.gs-student-info { flex: 1; min-width: 0; }
.gs-student-name { font-weight: 600; font-size: .9rem; color: var(--gs-text); }
.gs-student-meta { font-size: .75rem; color: var(--gs-text-3); }
.gs-health-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
}
.gs-health-dot.green  { background: var(--gs-success); }
.gs-health-dot.amber  { background: var(--gs-warning); }
.gs-health-dot.red    { background: var(--gs-danger); }

/* ── Calibration flags ──
   Severity is carried by a left border rather than a filled background:
   several flags stacked in filled colour reads as an error log, which is
   the wrong tone for something a student opens about their own study. */
.gs-flag {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .7rem .8rem; margin-bottom: .5rem;
  border-radius: var(--gs-radius-sm);
  background: var(--gs-bg); border-left: 3px solid var(--gs-border);
}
.gs-flag:last-child { margin-bottom: 0; }
.gs-flag-high   { border-left-color: var(--gs-danger); }
.gs-flag-medium { border-left-color: var(--gs-warning); }
.gs-flag-low    { border-left-color: var(--gs-intuition); }
.gs-flag-info   { border-left-color: var(--gs-text-3); }
.gs-flag-good   { border-left-color: var(--gs-success); }
.gs-flag-icon { font-size: 1rem; line-height: 1.3; flex-shrink: 0; }
.gs-flag-body { flex: 1; min-width: 0; }
.gs-flag-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
.gs-flag-title { font-size: .85rem; font-weight: 700; color: var(--gs-text); }
.gs-flag-scope {
  font-size: .68rem; font-weight: 600; color: var(--gs-text-3);
  background: var(--gs-border); border-radius: 99px; padding: 1px 7px;
}
.gs-flag-text { font-size: .82rem; line-height: 1.55; color: var(--gs-text-2); margin-top: .2rem; }
.gs-flag-detail { font-size: .68rem; color: var(--gs-text-3); margin-top: .25rem; font-variant-numeric: tabular-nums; }

/* ── Attempt strategy ── */
.gs-strategy { display: flex; flex-direction: column; gap: .3rem; }
.gs-strategy-row {
  display: grid; align-items: center; gap: .5rem;
  grid-template-columns: 12px 5.5rem 4.5rem 5.5rem 1fr;
  padding: .45rem .6rem; border-radius: var(--gs-radius-sm);
  background: var(--gs-bg); font-size: .8rem;
}
.gs-strategy-tag { font-weight: 600; color: var(--gs-text); }
.gs-strategy-acc { color: var(--gs-text-2); font-variant-numeric: tabular-nums; }
.gs-strategy-ev  { font-weight: 700; font-variant-numeric: tabular-nums; }
.gs-strategy-row.attempt    .gs-strategy-ev { color: var(--gs-success); }
.gs-strategy-row.skip       .gs-strategy-ev { color: var(--gs-danger); }
.gs-strategy-row.coinflip .gs-strategy-ev { color: var(--gs-text-3); }
.gs-strategy-verdict { font-size: .76rem; color: var(--gs-text-3); }

/* Per-subject split — the part that actually changes marks, since an overall
   verdict can be carried by one strong subject and wrong everywhere else. */
.gs-strategy-subjects { margin-top: .8rem; border-top: 1px solid var(--gs-border); padding-top: .7rem; }
.gs-strategy-subhead {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .78rem; font-weight: 700; color: var(--gs-text-2); margin-bottom: .45rem;
}
.gs-strategy-subject { padding: .45rem 0; border-bottom: 1px solid var(--gs-border); }
.gs-strategy-subject-head { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.gs-strategy-advice { font-size: .78rem; line-height: 1.5; color: var(--gs-text-2); margin-top: .3rem; }
.gs-strategy-subject:last-child { border-bottom: 0; }
.gs-strategy-subject-name { font-size: .8rem; font-weight: 600; min-width: 7.5rem; color: var(--gs-text); }
.gs-strategy-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.gs-strategy-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .7rem; padding: .12rem .45rem; border-radius: 99px;
  border: 1px solid var(--gs-border); color: var(--gs-text-2); white-space: nowrap;
}
.gs-strategy-chip.attempt    { background: var(--gs-success-bg); border-color: var(--gs-success-border); color: var(--gs-success); }
.gs-strategy-chip.skip       { background: var(--gs-danger-bg);  border-color: var(--gs-danger-border);  color: var(--gs-danger); }
/* At chance level: neutral, since neither attempting nor skipping wins. */
.gs-strategy-chip.coinflip { background: var(--gs-bg); color: var(--gs-text-3); }
/* A chip contradicting the overall verdict is the actionable one. */
.gs-strategy-chip.diverges { box-shadow: 0 0 0 2px var(--gs-warning); }

.gs-strategy-stake > div + div { margin-top: .35rem; }
.gs-strategy-stake {
  margin-top: .7rem; padding: .6rem .75rem; border-radius: var(--gs-radius-sm);
  background: var(--gs-warning-bg, var(--gs-bg)); border-left: 3px solid var(--gs-warning);
  font-size: .82rem; line-height: 1.55; color: var(--gs-text-2);
}
@media (max-width: 600px) {
  /* Five columns will not fit a phone, so fold into a 2x3 grid. Every cell
     is placed explicitly: left to flow, the EV cell lands back in the 12px
     swatch column and collides with the verdict beside it. */
  .gs-strategy-row { grid-template-columns: 12px 1fr auto; row-gap: .2rem; }
  .gs-strategy-row > .gs-trend-swatch { grid-column: 1; grid-row: 1; }
  .gs-strategy-tag     { grid-column: 2; grid-row: 1; }
  .gs-strategy-acc     { grid-column: 3; grid-row: 1; text-align: right; }
  .gs-strategy-ev      { grid-column: 2; grid-row: 2; }
  .gs-strategy-verdict { grid-column: 3; grid-row: 2; text-align: right; white-space: nowrap; }
}

/* ── Confidence trend chart ── */
.gs-trend-controls { display: flex; flex-wrap: wrap; gap: .4rem .75rem; }
.gs-trend-legend { display: flex; flex-wrap: wrap; gap: .3rem .5rem; margin-bottom: .5rem; }
.gs-trend-legend-item {
  display: inline-flex; align-items: center; gap: .3rem;
  border: 1px solid var(--gs-border); background: var(--gs-white);
  border-radius: 99px; padding: .2rem .55rem; font-size: .7rem; font-weight: 600;
  color: var(--gs-text-3); cursor: pointer; font-family: inherit;
}
/* Dimmed rather than hidden when a series is toggled off, so it stays
   obvious that the line exists and can be brought back. */
.gs-trend-legend-item { opacity: .45; }
.gs-trend-legend-item.active { opacity: 1; color: var(--gs-text); }
.gs-trend-swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.gs-trend-swatch.sure      { background: var(--gs-sure); }
.gs-trend-swatch.intuition { background: var(--gs-intuition); }
.gs-trend-swatch.fifty     { background: var(--gs-fifty); }
.gs-trend-swatch.guess     { background: var(--gs-guess); }
.gs-trend-wrap { position: relative; }
/* Fixed height with a non-uniform viewBox: the chart should stretch to the
   card width without the stroke widths and label text scaling with it. */
.gs-trend-svg { width: 100%; height: 200px; display: block; overflow: visible; }
.gs-trend-xaxis {
  display: flex; justify-content: space-between;
  font-size: .68rem; color: var(--gs-text-3); margin-top: .15rem;
}
.gs-trend-empty {
  padding: 1.5rem 1rem; text-align: center;
  font-size: .82rem; color: var(--gs-text-3);
}

/* ── Confidence mix strip on a subject/topic row ── */
.gs-confmix { margin-top: .45rem; }
.gs-confmix-bar {
  display: flex; height: 6px; border-radius: 99px; overflow: hidden;
  background: var(--gs-border);
}
.gs-confmix-seg { display: block; height: 100%; }
.gs-confmix-seg.sure      { background: var(--gs-sure); }
.gs-confmix-seg.intuition { background: var(--gs-intuition); }
.gs-confmix-seg.fifty     { background: var(--gs-fifty); }
.gs-confmix-seg.guess     { background: var(--gs-guess); }
.gs-confmix-legend {
  display: flex; flex-wrap: wrap; gap: .2rem .7rem;
  margin-top: .3rem; font-size: .69rem; color: var(--gs-text-3);
}
.gs-confmix-legend span { display: inline-flex; align-items: center; gap: .25rem; }
.gs-confmix-n { opacity: .75; }
/* A tag with too few answers to quote an accuracy: still listed, visibly
   lighter so it doesn't read as an equal-weight finding. */
.gs-confmix-thin { opacity: .6; font-style: italic; }

/* ── Study-log date range filter ── */
.gs-logfilter {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem .75rem; margin-bottom: .6rem;
}
.gs-logfilter-presets { display: flex; flex-wrap: wrap; gap: .25rem; }
.gs-logfilter-btn {
  border: 1px solid var(--gs-border); background: var(--gs-white);
  color: var(--gs-text-2); border-radius: 99px; padding: .25rem .6rem;
  font-size: .72rem; font-weight: 600; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.gs-logfilter-btn:hover { border-color: var(--gs-teal); color: var(--gs-teal); }
.gs-logfilter-btn.active { background: var(--gs-teal); border-color: var(--gs-teal); color: #fff; }
.gs-logfilter-range { display: flex; align-items: center; gap: .35rem; }
.gs-logfilter-date {
  border: 1px solid var(--gs-border); background: var(--gs-white);
  color: var(--gs-text); border-radius: 6px; padding: .2rem .4rem;
  font-size: .72rem; font-family: inherit;
}
.gs-logfilter-sep { font-size: .72rem; color: var(--gs-text-3); }
.gs-logfilter-count { font-size: .72rem; color: var(--gs-text-3); font-weight: 600; }
.gs-logfilter-empty {
  padding: .9rem 1rem; font-size: .82rem; color: var(--gs-text-3);
  background: var(--gs-bg); border-radius: var(--gs-radius-sm); text-align: center;
}
.gs-logfilter-empty .gs-logfilter-btn { margin-left: .4rem; }
@media (max-width: 560px) {
  .gs-logfilter { gap: .4rem; }
  .gs-logfilter-range { width: 100%; }
  .gs-logfilter-date { flex: 1; min-width: 0; }
}

/* ── Diary entries (student log history + mentor 360 activity) ── */
.gs-diary-toggle {
  background: none; border: 0; cursor: pointer; padding: 0;
  font-size: .75rem; font-weight: 600; color: var(--gs-teal); font-family: inherit;
}
.gs-diary-toggle:hover { text-decoration: underline; }
.gs-diary-row > td { background: var(--gs-bg); padding: 0 !important; }
.gs-diary-entry {
  padding: .75rem 1rem; border-left: 3px solid var(--gs-teal);
  margin: .35rem 0; font-size: .85rem; line-height: 1.6;
}
.gs-diary-date { font-size: .72rem; font-weight: 700; color: var(--gs-text-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .35rem; }
.gs-diary-text { color: var(--gs-text); white-space: normal; }
.gs-diary-notes,
.gs-diary-topics { margin-top: .5rem; font-size: .8rem; color: var(--gs-text-2); }

/* ── Session rows (mentor 360 → Sessions) ── */
.gs-session-row {
  display: flex; gap: 1rem; padding: .75rem 0;
  border-bottom: 1px solid var(--gs-border);
}
.gs-session-row:last-child { border-bottom: 0; }
.gs-session-when { flex-shrink: 0; min-width: 92px; }
.gs-session-date { font-size: .85rem; font-weight: 700; color: var(--gs-text); }
.gs-session-time { font-size: .72rem; color: var(--gs-text-3); }
.gs-session-body { flex: 1; min-width: 0; }
.gs-session-note { margin-top: .4rem; font-size: .8rem; color: var(--gs-text-2); line-height: 1.5; }
@media (max-width: 560px) {
  .gs-session-row { flex-direction: column; gap: .35rem; }
  .gs-session-when { display: flex; gap: .5rem; align-items: baseline; }
}

/* ── Subject / topic analytics (My Progress, mentor 360, DSR) ──
   Coverage and mastery share one track and one denominator, drawn as two
   overlaid fills rather than two separate bars: mastery can never exceed
   coverage, so the lighter band that remains visible behind it is exactly
   "seen but not yet got right" — the gap the student needs to close. */
.gs-analytics-row { padding: .7rem 0; border-bottom: 1px solid var(--gs-border); }
.gs-analytics-row:last-child { border-bottom: 0; }
.gs-analytics-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .75rem; margin-bottom: .4rem; flex-wrap: wrap;
}
.gs-analytics-label { font-weight: 600; font-size: .9rem; color: var(--gs-text); }
.gs-analytics-sub { font-weight: 400; font-size: .72rem; color: var(--gs-text-3); margin-left: .4rem; }
.gs-analytics-stats { flex-shrink: 0; }

.gs-analytics-bar {
  position: relative; height: 8px; border-radius: 99px;
  background: var(--gs-border); overflow: hidden;
}
.gs-analytics-fill-coverage,
.gs-analytics-fill-mastery { position: absolute; inset-block: 0; left: 0; border-radius: 99px; }
.gs-analytics-fill-coverage { background: var(--gs-teal-mid); }
.gs-analytics-fill-mastery  { background: var(--gs-success); }

.gs-analytics-legend {
  display: flex; flex-wrap: wrap; gap: .25rem .9rem;
  margin-top: .35rem; font-size: .72rem; color: var(--gs-text-3);
}
.gs-analytics-untouched { color: var(--gs-text-3); opacity: .85; }

.gs-analytics-key {
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
  font-size: .72rem; color: var(--gs-text-3); margin-bottom: .5rem;
}
.gs-key-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .3rem; vertical-align: middle; }
.gs-key-swatch.coverage { background: var(--gs-teal-mid); }
.gs-key-swatch.mastery  { background: var(--gs-success); }

.gs-analytics-subject { padding: .25rem 0; }
.gs-analytics-toggle {
  background: none; border: 0; cursor: pointer; padding: .15rem 0 .4rem;
  font-size: .75rem; font-weight: 600; color: var(--gs-teal); font-family: inherit;
}
.gs-analytics-toggle:hover { text-decoration: underline; }
.gs-analytics-topics {
  padding-left: .9rem; margin-bottom: .5rem;
  border-left: 2px solid var(--gs-border);
}
.gs-analytics-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 720px) { .gs-analytics-cols { grid-template-columns: 1fr; } }

.gs-weak-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--gs-border);
}
.gs-weak-row:last-child { border-bottom: 0; }
.gs-weak-topic { font-size: .875rem; font-weight: 600; color: var(--gs-text); }
.gs-weak-sub { font-size: .72rem; color: var(--gs-text-3); }
.gs-dsr-subjects { margin-top: .5rem; }

/* ── Confidence breakdown chart ─────────────────────────── */
.gs-conf-breakdown {
  display: grid; grid-template-columns: repeat(2,1fr); gap: .5rem;
}
/* Question-wise Analysis header + filter chips. The chip row must wrap:
   on a phone five chips laid out in a single nowrap flex row pushed the
   card into horizontal overflow and squashed the title beside it. Stacking
   the title above the chips below 640px keeps both readable. */
.gs-qa-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: .75rem; flex-wrap: wrap;
}
.gs-qa-filters {
  display: flex; flex-wrap: wrap; gap: .4rem; min-width: 0;
}
.gs-qa-filters .gs-btn { font-size: .75rem; white-space: nowrap; }
@media (max-width: 640px) {
  .gs-qa-header { flex-direction: column; align-items: stretch; gap: .6rem; }
  .gs-qa-filters { gap: .35rem; }
  /* Natural widths, not flex:1 — stretching the odd chip on the last row to
     fill it reads as a broken layout rather than a deliberate one. Padding
     is kept generous so each chip stays a comfortable tap target. */
  .gs-qa-filters .gs-btn { flex: 0 0 auto; font-size: .72rem; padding: .4rem .65rem; }
}

.gs-conf-bar-item { padding: .6rem .75rem; border-radius: var(--gs-radius-sm); }
/* "Not Tagged" spans the full grid width — it's a count, not a 5th peer
   of the four accuracy cards, and a lone half-width card left a hole. */
.gs-conf-bar-item.untagged {
  grid-column: 1 / -1;
  background: var(--gs-conf-untagged-bg);
  border: 1px dashed var(--gs-border-2);
}
.gs-conf-bar-item.untagged .gs-conf-bar-label { color: var(--gs-text-3); }
.gs-conf-clickable { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.gs-conf-clickable:hover { transform: translateY(-1px); box-shadow: var(--gs-shadow); }
.gs-conf-clickable:focus-visible { outline: 2px solid var(--gs-teal); outline-offset: 2px; }
.gs-conf-bar-item.gs-conf-active { box-shadow: inset 0 0 0 2px var(--gs-teal); }
.gs-conf-empty { opacity: .55; }
.gs-conf-bar-item.sure      { background: var(--gs-conf-sure-bg); }
.gs-conf-bar-item.intuition { background: var(--gs-conf-intuition-bg); }
.gs-conf-bar-item.fifty     { background: var(--gs-conf-fifty-bg); }
.gs-conf-bar-item.guess     { background: var(--gs-conf-guess-bg); }
.gs-conf-bar-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.gs-conf-bar-item.sure .gs-conf-bar-label      { color: var(--gs-sure); }
.gs-conf-bar-item.intuition .gs-conf-bar-label { color: var(--gs-intuition); }
.gs-conf-bar-item.fifty .gs-conf-bar-label     { color: var(--gs-fifty); }
.gs-conf-bar-item.guess .gs-conf-bar-label     { color: var(--gs-guess); }
.gs-conf-bar-acc { font-size: 1.1rem; font-weight: 800; color: var(--gs-text); }
.gs-conf-bar-sub { font-size: .7rem; color: var(--gs-text-3); }

/* Study Log — 14-day heatmap (mentor student view) */
.gs-heatmap-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; }
.gs-heat-col { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.gs-heat-wd { font-size: .62rem; color: var(--gs-text-3); font-weight: 700; text-transform: uppercase; }
.gs-heat-cell {
    width: 100%; aspect-ratio: 1 / 1; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 600; color: #fff; cursor: default;
}
.gs-heat-empty { background: #f0f0f0; color: var(--gs-text-3); }
.gs-heat-1 { background: #fca5a5; }
.gs-heat-2 { background: #fcd34d; color: #4a3200; }
.gs-heat-3 { background: #6ee7b7; color: #064e3b; }
.gs-heat-4 { background: #10b981; }

/* ── DSR report card ────────────────────────────────────── */
.gs-dsr-header {
  background: linear-gradient(135deg, var(--gs-navy) 0%, var(--gs-navy-mid) 100%);
  border-radius: var(--gs-radius); padding: 1.25rem; color: #fff;
  margin-bottom: 1rem;
}
.gs-dsr-period { font-size: .8rem; color: var(--gs-teal-mid); margin-bottom: .5rem; }
.gs-dsr-title  { font-size: 1.1rem; font-weight: 700; }
.gs-dsr-student{ font-size: .85rem; color: #9ca3af; margin-top: .25rem; }

/* ── Counselling notes ──────────────────────────────────── */
.gs-note-item {
  padding: .875rem; border-radius: var(--gs-radius-sm);
  border-left: 3px solid var(--gs-teal); background: var(--gs-teal-pale);
  margin-bottom: .5rem;
}
.gs-note-text { font-size: .875rem; color: var(--gs-text); line-height: 1.5; }
.gs-note-meta { font-size: .72rem; color: var(--gs-text-3); margin-top: .35rem; }
.gs-note-item.warning { border-color: var(--gs-warning); background: #fffbeb; }
.gs-note-item.danger  { border-color: var(--gs-danger); background: #fef2f2; }

/* ── Mobile bottom nav ──────────────────────────────────── */
.gs-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 95;
  background: var(--gs-white); border-top: 1px solid var(--gs-border);
  display: flex; height: 56px;
  box-shadow: 0 -2px 8px rgba(0,0,0,.06);
}
.gs-bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; text-decoration: none;
  color: var(--gs-text-3); font-size: .65rem; font-weight: 500;
  transition: color .15s; padding: .25rem;
}
.gs-bottom-nav a .gs-bnav-icon { font-size: 1.2rem; }
.gs-bottom-nav a.active { color: var(--gs-teal); }
.gs-bottom-nav a.active .gs-bnav-icon { color: var(--gs-teal); }

/* ── Forms ──────────────────────────────────────────────── */
.gs-form-group { margin-bottom: 1rem; }
.gs-label { display: block; font-size: .8rem; font-weight: 600; color: var(--gs-text-2); margin-bottom: .35rem; }
.gs-input, .gs-select, .gs-textarea {
  width: 100%; padding: .65rem .875rem; border: 1.5px solid var(--gs-border);
  border-radius: var(--gs-radius-sm); font-size: .9rem; color: var(--gs-text);
  font-family: var(--gs-font); background: var(--gs-white);
  outline: none; transition: border .15s;
}
.gs-input:focus, .gs-select:focus, .gs-textarea:focus { border-color: var(--gs-teal); }
.gs-textarea { resize: vertical; min-height: 100px; }
.gs-form-error { font-size: .78rem; color: var(--gs-danger); margin-top: .25rem; }
.gs-form-hint  { font-size: .78rem; color: var(--gs-text-3); margin-top: .25rem; }

/* ── Login page ─────────────────────────────────────────── */
.gs-auth-page {
  min-height: 100vh; background: var(--gs-navy);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.gs-auth-card {
  background: var(--gs-white); border-radius: 16px;
  padding: 2rem; width: 100%; max-width: 400px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.gs-auth-logo {
  text-align: center; margin-bottom: 1.75rem;
}
.gs-auth-logo img { height: 48px; margin-bottom: .5rem; }
.gs-auth-logo h1  { font-size: 1.3rem; color: var(--gs-text); }
.gs-auth-logo p   { font-size: .8rem; color: var(--gs-text-3); margin-top: .2rem; }
.gs-auth-tabs {
  display: flex; border-radius: var(--gs-radius-sm); overflow: hidden;
  border: 1px solid var(--gs-border); margin-bottom: 1.5rem;
}
.gs-auth-tab {
  flex: 1; padding: .6rem; text-align: center; font-size: .875rem;
  font-weight: 600; cursor: pointer; transition: all .15s;
  color: var(--gs-text-3); background: var(--gs-bg); border: none;
}
.gs-auth-tab.active { background: var(--gs-teal); color: #fff; }
.gs-auth-divider {
  text-align: center; position: relative; margin: 1rem 0;
  color: var(--gs-text-3); font-size: .8rem;
}
.gs-auth-divider::before {
  content: ''; position: absolute; top: 50%; left: 0; right: 0;
  height: 1px; background: var(--gs-border);
}
.gs-auth-divider span { background: #fff; padding: 0 .5rem; position: relative; }
.gs-google-btn {
  width: 100%; padding: .65rem; border: 1.5px solid var(--gs-border);
  border-radius: var(--gs-radius-sm); background: #fff;
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  font-size: .875rem; font-weight: 600; cursor: pointer; transition: all .15s;
  color: var(--gs-text);
}
.gs-google-btn:hover { background: var(--gs-bg); border-color: var(--gs-border-2); }

/* ── Responsive: desktop ────────────────────────────────── */
@media (min-width: 768px) {
  .gs-sidebar {
    transform: translateX(0) !important;
    position: sticky; top: var(--gs-nav-h);
    height: calc(100vh - var(--gs-nav-h));
    flex-shrink: 0;
  }
  .gs-sidebar-overlay { display: none !important; }
  .gs-hamburger { display: none; }
  .gs-sidebar-toggle { display: inline-flex; }
  .gs-bottom-nav { display: none; }
  .gs-main { padding: 2rem 2rem 2rem; }
  .gs-nav-name { display: block; }
  .gs-nav-plan-pill { display: inline-flex; }
  .gs-home-plan-card { display: none; }
  .gs-stats-grid { grid-template-columns: repeat(4,1fr); }
  .gs-quick-grid { grid-template-columns: repeat(4,1fr); }
  .gs-conf-breakdown { grid-template-columns: repeat(4,1fr); }
  .gs-layout { padding-top: var(--gs-nav-h); }
}

/* ── Sidebar collapsed state (desktop toggle) ──────────────── */
html.gs-sidebar-collapsed .gs-sidebar { width: 68px; }
html.gs-sidebar-collapsed .gs-nav-label,
html.gs-sidebar-collapsed .gs-nav-section-label,
html.gs-sidebar-collapsed .gs-nav-lock,
html.gs-sidebar-collapsed .gs-nav-item .gs-badge,
html.gs-sidebar-collapsed .gs-sidebar-footer,
html.gs-sidebar-collapsed .gs-streak-pill span { display: none; }
html.gs-sidebar-collapsed .gs-nav-item a { justify-content: center; padding: .65rem; gap: 0; }
html.gs-sidebar-collapsed .gs-nav-item.active a { border-left: none; box-shadow: inset 3px 0 0 var(--gs-teal); }
html.gs-sidebar-collapsed .gs-sidebar-toggle { transform: rotate(180deg); }

@media (min-width: 1024px) {
  .gs-main { max-width: 900px; }
}

/* ── Utility ────────────────────────────────────────────── */
.gs-flex   { display: flex; }
.gs-gap-sm { gap: .5rem; }
.gs-gap    { gap: .75rem; }
.gs-gap-lg { gap: 1.25rem; }
.gs-items-center { align-items: center; }
.gs-justify-between { justify-content: space-between; }
.gs-mt-sm  { margin-top: .5rem; }
.gs-mt     { margin-top: .75rem; }
.gs-mt-lg  { margin-top: 1.25rem; }
.gs-mb-sm  { margin-bottom: .5rem; }
.gs-mb     { margin-bottom: .75rem; }
.gs-mb-lg  { margin-bottom: 1.25rem; }
.gs-text-sm { font-size: .8rem; }
.gs-text-xs { font-size: .72rem; }
.gs-muted   { color: var(--gs-text-3); }
.gs-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   GSMITRA LMS — v2.1 additions
   Custom Test, Revision upgrades, Test UI, Chat, Analytics
═══════════════════════════════════════════════════════════ */

/* ── Test attempt layout — sidebar right ───────────────── */
.gs-test-layout {
  display: flex; gap: 1rem; align-items: flex-start;
}
.gs-test-main   { flex: 1; min-width: 0; }
.gs-test-sidebar {
  width: 260px; flex-shrink: 0;
  position: sticky; top: calc(var(--gs-nav-h) + 60px);
  max-height: calc(100vh - var(--gs-nav-h) - 80px);
  overflow-y: auto;
}
@media (max-width: 767px) {
  .gs-test-layout   { flex-direction: column; }
  .gs-test-sidebar  { width: 100%; position: static; max-height: none; order: -1; }
  /* Mark for review / Bookmark / Report / Prev / Next — 5 buttons is
     tight on a phone even with wrapping enabled; shrinking them a bit
     lets more fit per line before it needs to wrap at all. */
  .gs-mcq-nav .gs-btn-sm { padding: .35rem .6rem; font-size: .74rem; }
}

/* ── Custom test builder ────────────────────────────────── */
.gs-custom-builder { max-width: 640px; }
.gs-size-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; margin-bottom: 1.25rem;
}
.gs-size-card {
  border: 2px solid var(--gs-border); border-radius: var(--gs-radius);
  padding: 1rem; text-align: center; cursor: pointer; transition: all .15s;
}
.gs-size-card:hover   { border-color: var(--gs-teal); background: var(--gs-teal-pale); }
.gs-size-card.selected{ border-color: var(--gs-teal); background: var(--gs-teal-pale); }
.gs-size-card .gs-size-num { font-size: 1.5rem; font-weight: 800; color: var(--gs-teal); }
.gs-size-card .gs-size-dur { font-size: .75rem; color: var(--gs-text-3); margin-top: .2rem; }
.gs-size-card .gs-size-pts { font-size: .72rem; color: var(--gs-text-3); }

.gs-subject-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: .5rem; margin-bottom: 1rem;
}
.gs-subject-chip {
  padding: .55rem .875rem; border: 1.5px solid var(--gs-border);
  border-radius: var(--gs-radius-sm); cursor: pointer; font-size: .825rem;
  font-weight: 500; color: var(--gs-text-2); transition: all .15s; text-align: center;
}
.gs-subject-chip:hover   { border-color: var(--gs-teal); color: var(--gs-teal); }
.gs-subject-chip.selected{ border-color: var(--gs-teal); background: var(--gs-teal-pale); color: var(--gs-teal-dark); font-weight: 700; }

/* Small colored dot on each Step 2 subject chip — set via --chip-accent by
   paintSubjectChips() in class-student-custom-test.php. Same color reused
   on that subject's Step 3 topic group so the two steps visually match up. */
.gs-subject-chip { position: relative; padding-left: 1.3rem; }
.gs-subject-chip::before {
  content: ''; position: absolute; left: .55rem; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--chip-accent, var(--gs-border-2));
}

.gs-topic-wrap {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem;
}
.gs-topic-chip {
  padding: .3rem .7rem; border: 1.5px solid var(--gs-border);
  border-radius: 99px; cursor: pointer; font-size: .775rem;
  color: var(--gs-text-2); transition: all .15s;
}
.gs-topic-chip.selected { border-color: var(--gs-teal); background: var(--gs-teal); color: #fff; }

/* ── Custom test — topics grouped by subject (Step 3 reorganization) ──
   Replaces the old flat merged chip list: each selected subject gets its
   own bordered group, color-coded to match its Step 2 chip, so multiple
   subjects no longer read as one scattered blob. */
.gs-multi-subject-note {
  background: var(--gs-teal-pale); color: var(--gs-teal-dark);
  border: 1px solid var(--gs-teal-mid); border-radius: var(--gs-radius-sm);
  padding: .55rem .8rem; font-size: .8rem; font-weight: 500; margin-bottom: .85rem;
}
.gs-topic-groups { display: flex; flex-direction: column; gap: .75rem; }
.gs-topic-group {
  border: 1px solid var(--gs-border); border-left: 3px solid var(--group-accent, var(--gs-teal));
  border-radius: var(--gs-radius-sm); padding: .7rem .85rem; background: var(--gs-card);
}
.gs-topic-group-header {
  display: flex; align-items: center; gap: .45rem; margin-bottom: .55rem;
}
.gs-topic-group-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.gs-topic-group-name { font-size: .85rem; font-weight: 700; color: var(--gs-text); }
.gs-topic-group-count {
  margin-left: auto; font-size: .7rem; color: var(--gs-text-3);
  background: var(--gs-bg); border-radius: 99px; padding: .1rem .55rem;
}
.gs-topic-group-body { display: flex; flex-wrap: wrap; gap: .4rem; }

/* Current Events Period range picker — nested inside its own group only */
.gs-ce-period-picker {
  margin-top: .65rem; padding-top: .6rem; border-top: 1px dashed var(--gs-border);
}
.gs-ce-period-picker label {
  display: block; font-size: .75rem; font-weight: 600; color: var(--gs-text-2); margin-bottom: .35rem;
}
.gs-ce-period-picker label small { font-weight: 400; color: var(--gs-text-3); }
.gs-ce-period-inputs { display: flex; align-items: center; gap: .5rem; }
.gs-ce-period-inputs input[type="month"] { max-width: 150px; }
.gs-ce-period-inputs span { font-size: .75rem; color: var(--gs-text-3); }

.gs-builder-summary {
  background: var(--gs-navy); color: #fff; border-radius: var(--gs-radius);
  padding: 1rem 1.25rem; margin-bottom: 1.25rem;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
}
.gs-builder-summary .gs-sum-item { text-align: center; }
.gs-builder-summary .gs-sum-val  { font-size: 1.1rem; font-weight: 800; color: var(--gs-teal); }
.gs-builder-summary .gs-sum-lab  { font-size: .7rem; color: #9ca3af; }

/* ── Revision filters ───────────────────────────────────── */
.gs-rev-filters {
  display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.gs-rev-stat-row {
  display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.gs-rev-stat {
  flex: 1; min-width: 80px; background: var(--gs-card);
  border: 1px solid var(--gs-border); border-radius: var(--gs-radius-sm);
  padding: .6rem .75rem; text-align: center;
}
.gs-rev-stat .val { font-size: 1.2rem; font-weight: 800; color: var(--gs-text); }
.gs-rev-stat .lab { font-size: .7rem; color: var(--gs-text-3); }
.gs-rev-stat.danger .val { color: var(--gs-danger); }
.gs-rev-stat.teal .val   { color: var(--gs-teal); }

.gs-rev-rate-label { font-size: .8rem; font-weight: 600; color: var(--gs-text-2); margin-bottom: .4rem; }
.gs-rev-rate-btns  { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ── Flashcards (merge v1) ───────────────────────────────── */
.gs-fc-deck-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: .75rem;
}
.gs-fc-deck {
  background: var(--gs-card); border: 1px solid var(--gs-border); border-radius: var(--gs-radius);
  padding: 1rem;
}
.gs-fc-deck-name { font-weight: 700; color: var(--gs-text); margin-bottom: .25rem; }
.gs-fc-deck-meta { font-size: .8rem; color: var(--gs-text-3); }

/* Always a fixed two-line stack (title line, then badges+actions line) —
   deliberately NOT a single flex-wrap row, which used to reflow
   inconsistently depending on content width: a short "Due" badge kept a
   row on one line while a longer "Due 2026-08-22" one wrapped it to two,
   producing a ragged, uneven list. A fixed stack looks the same for
   every row regardless of badge/text length. */
.gs-fc-row {
  padding: .7rem 0; border-bottom: 1px solid var(--gs-border);
}
.gs-fc-row:last-child { border-bottom: none; }
.gs-fc-row-top { display: flex; align-items: center; gap: .5rem; min-width: 0; margin-bottom: .35rem; }
.gs-fc-row-front { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-weight: 500; color: var(--gs-text); }
.gs-fc-row-bottom { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.gs-fc-row-badges { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.gs-fc-row-actions { display: flex; align-items: center; gap: .3rem; flex-shrink: 0; }
.gs-fc-icon-btn {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gs-border-2);
  background: var(--gs-white); cursor: pointer; font-size: .8rem;
  display: flex; align-items: center; justify-content: center; transition: background .12s;
}
.gs-fc-icon-btn:hover { background: var(--gs-bg); }
.gs-fc-icon-btn.danger:hover { background: #fef2f2; border-color: var(--gs-danger); }

.gs-flash-card {
  perspective: 1200px; height: 220px; cursor: pointer; margin: .5rem 0;
}
.gs-flash-inner {
  position: relative; width: 100%; height: 100%; text-align: center;
  transition: transform .5s; transform-style: preserve-3d;
}
.gs-flash-card.flipped .gs-flash-inner { transform: rotateY(180deg); }
.gs-flash-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 1.25rem; border-radius: var(--gs-radius); border: 1px solid var(--gs-border);
  background: var(--gs-card); font-size: 1.05rem; font-weight: 600; color: var(--gs-text);
  overflow-y: auto;
}
.gs-flash-back { transform: rotateY(180deg); background: var(--gs-teal-pale); font-weight: 500; }
.gs-fc-hint { text-align: center; font-size: .8rem; color: var(--gs-text-3); margin: .5rem 0 0; }

.gs-fc-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 10000;
  align-items: center; justify-content: center; padding: 1rem;
}
.gs-fc-modal {
  background: var(--gs-card); border-radius: var(--gs-radius); width: 100%; max-width: 480px;
  max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
}
.gs-fc-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--gs-border);
}
.gs-fc-modal-header h2 { margin: 0; font-size: 1rem; }
.gs-fc-modal-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--gs-text-3); line-height: 1; }
.gs-fc-modal-close:hover { color: var(--gs-text); }
.gs-fc-modal-body { padding: 1.25rem; overflow-y: auto; }
.gs-fc-modal-footer {
  display: flex; justify-content: flex-end; gap: .5rem;
  padding: 1rem 1.25rem; border-top: 1px solid var(--gs-border);
}

/* ── Chat ───────────────────────────────────────────────── */
.gs-chat-wrap {
  display: flex; flex-direction: column; height: 420px;
  border: 1px solid var(--gs-border); border-radius: var(--gs-radius); overflow: hidden;
}
.gs-chat-messages {
  flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .75rem;
  background: var(--gs-bg);
}
.gs-chat-bubble {
  max-width: 80%; padding: .65rem .875rem; border-radius: 12px;
  font-size: .875rem; line-height: 1.5; word-break: break-word;
}
.gs-chat-bubble.sent {
  background: var(--gs-teal); color: #fff; align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.gs-chat-bubble.received {
  background: var(--gs-white); color: var(--gs-text);
  border: 1px solid var(--gs-border); align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.gs-chat-bubble .gs-chat-meta {
  font-size: .68rem; opacity: .7; margin-top: .3rem;
}
.gs-chat-input-row {
  display: flex; gap: .5rem; padding: .75rem;
  border-top: 1px solid var(--gs-border); background: var(--gs-white);
}
.gs-chat-input {
  flex: 1; padding: .6rem .875rem; border: 1.5px solid var(--gs-border);
  border-radius: var(--gs-radius-sm); font-size: .875rem; outline: none;
  font-family: var(--gs-font); resize: none; transition: border .15s;
}
.gs-chat-input:focus { border-color: var(--gs-teal); }
.gs-chat-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 100%; color: var(--gs-text-3); gap: .5rem;
}

/* ── AI Mentor Helper chat (mentor-facing, class-mentor-ai-helper.php) ── */
.gs-ai-chat-thread {
  display: flex; flex-direction: column; gap: .6rem; padding: .25rem;
}
.gs-ai-bubble {
  max-width: 85%; padding: .6rem .8rem; border-radius: 12px;
  font-size: .85rem; line-height: 1.55; word-break: break-word;
}
.gs-ai-bubble-user {
  background: var(--gs-teal); color: #fff; align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.gs-ai-bubble-ai {
  background: var(--gs-white); color: var(--gs-text);
  border: 1px solid var(--gs-border); align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.gs-ai-bubble-refused {
  background: #fffbeb; color: #b45309; border: 1px solid #fde68a;
  align-self: flex-start; border-bottom-left-radius: 4px;
}

/* ── Star rating ────────────────────────────────────────── */
.gs-stars { display: flex; gap: .25rem; }
.gs-star  {
  font-size: 1.5rem; cursor: pointer; color: var(--gs-border-2);
  transition: color .1s;
}
.gs-star.active { color: #f59e0b; }
.gs-star:hover  { color: #f59e0b; }

/* ── Analytics / charts ─────────────────────────────────── */
.gs-chart-wrap {
  background: var(--gs-card); border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius); padding: 1.25rem; margin-bottom: 1rem;
}
.gs-chart-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gs-text-3); margin-bottom: 1rem; }
.gs-bar-chart   { display: flex; align-items: flex-end; gap: .4rem; height: 120px; }
/* height:100% here is load-bearing: a CSS percentage height only resolves
   against a parent with an explicitly-set (non-auto) height, and this had
   none — so .gs-bar's height:X% below was silently ignored per spec and
   every bar collapsed to its 4px minimum regardless of value, which is
   why the chart showed no visible difference between any two bars.
   justify-content:flex-end keeps the bar anchored to the bottom (growing
   upward) now that the column has real height to grow within. */
.gs-bar-col     { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .25rem; height: 100%; }
.gs-bar         { width: 100%; border-radius: 4px 4px 0 0; background: var(--gs-teal); min-height: 4px; transition: height .4s ease; }
.gs-bar.danger  { background: var(--gs-danger); }
.gs-bar.amber   { background: var(--gs-warning); }
.gs-bar-label   { font-size: .62rem; color: var(--gs-text-3); text-align: center; }
.gs-bar-val     { font-size: .68rem; font-weight: 700; color: var(--gs-text-2); }

.gs-line-chart  { position: relative; height: 100px; }
.gs-line-svg    { width: 100%; height: 100%; }

/* ── Study log visual ───────────────────────────────────── */
.gs-log-card {
  background: linear-gradient(135deg, var(--gs-navy) 0%, var(--gs-navy-mid) 100%);
  border-radius: var(--gs-radius); padding: 1.25rem; color: #fff; margin-bottom: 1rem;
}
.gs-log-card-title { font-size: .8rem; color: var(--gs-teal-mid); margin-bottom: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.gs-log-auto-field {
  background: rgba(255,255,255,.08); border-radius: var(--gs-radius-sm);
  padding: .6rem .875rem; margin-bottom: .5rem;
  display: flex; justify-content: space-between; align-items: center;
}
.gs-log-auto-label { font-size: .8rem; color: #9ca3af; }
.gs-log-auto-val   { font-size: .9rem; font-weight: 700; color: #fff; }

/* ── Test improvements ──────────────────────────────────── */
.gs-test-card {
  background: var(--gs-card); border-radius: var(--gs-radius);
  border: 1px solid var(--gs-border); overflow: hidden; margin-bottom: .75rem;
  transition: box-shadow .15s;
}
.gs-test-card:hover { box-shadow: var(--gs-shadow-md); }
.gs-test-card-header {
  padding: 1rem 1.25rem; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
}
.gs-test-card-body { padding: 0 1.25rem 1rem; }
.gs-test-card-footer {
  padding: .75rem 1.25rem; background: var(--gs-bg);
  border-top: 1px solid var(--gs-border);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
}
.gs-test-progress-mini { height: 4px; background: var(--gs-border); border-radius: 99px; overflow: hidden; margin-top: .5rem; }
.gs-test-progress-mini-fill { height: 100%; background: var(--gs-teal); border-radius: 99px; }

/* ── Forgot password ────────────────────────────────────── */
.gs-auth-back { font-size: .8rem; text-align: center; margin-top: .75rem; }
.gs-auth-back a { color: var(--gs-teal); }

/* ── Notification dropdown ──────────────────────────────── */
.gs-notif-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: -8px;
  width: 320px; background: var(--gs-white);
  border: 1px solid var(--gs-border); border-radius: var(--gs-radius);
  box-shadow: var(--gs-shadow-md); z-index: 200; overflow: hidden;
}
.gs-notif-dropdown.open { display: block; }

.gs-notif-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: .75rem 1rem; border-bottom: 1px solid var(--gs-border);
  font-weight: 700; font-size: .85rem; color: var(--gs-text);
}
.gs-notif-mark-all {
  background: none; border: none; cursor: pointer;
  font-size: .75rem; color: var(--gs-teal); font-weight: 600;
}
.gs-notif-list { max-height: 340px; overflow-y: auto; }
.gs-notif-item {
  padding: .75rem 1rem; border-bottom: 1px solid var(--gs-border);
  cursor: pointer; transition: background .12s;
}
.gs-notif-item:hover { background: var(--gs-bg); }
.gs-notif-item.unread { background: var(--gs-teal-pale); border-left: 3px solid var(--gs-teal); }
.gs-notif-item.unread:hover { background: var(--gs-teal-mid); }
.gs-notif-msg { font-size: .825rem; color: var(--gs-text); line-height: 1.4; margin-bottom: .2rem; }
.gs-notif-time { font-size: .7rem; color: var(--gs-text-3); }
.gs-notif-empty { padding: 2rem; text-align: center; color: var(--gs-text-3); font-size: .875rem; }
.gs-notif-loading { padding: 1.5rem; text-align: center; color: var(--gs-text-3); font-size: .85rem; }

@media (max-width: 480px) {
  /* Anchoring to the bell (position:absolute) let a fixed 320px-wide panel
     overflow past the screen edge on narrow phones — switching to
     position:fixed, pinned to the viewport with equal side margins,
     guarantees it always sits fully on-screen regardless of where the
     bell icon lands in the header. */
  .gs-notif-dropdown {
    position: fixed; top: calc(var(--gs-nav-h) + 8px);
    left: 1rem; right: 1rem; width: auto;
  }
}

/* ── Question analysis ──────────────────────────────────── */
.gs-qa-item { transition: box-shadow .15s; }
.gs-qa-item:hover { box-shadow: var(--gs-shadow-md); }

/* ── Report a question (shared modal) ──────────────────── */
.gs-report-overlay {
  display: none; position: fixed; inset: 0; z-index: 300;
  background: rgba(15,34,53,.45); align-items: center; justify-content: center;
  padding: 1rem;
}
.gs-report-overlay.open { display: flex; }
.gs-report-box {
  background: var(--gs-white); border-radius: var(--gs-radius);
  box-shadow: var(--gs-shadow-md); width: 100%; max-width: 380px;
  padding: 1.25rem; max-height: 90vh; overflow-y: auto;
}
.gs-report-title { font-size: 1rem; font-weight: 700; color: var(--gs-text); margin-bottom: .25rem; }
.gs-report-sub { font-size: .8rem; color: var(--gs-text-3); line-height: 1.4; margin-bottom: .9rem; }
.gs-report-label { display: block; font-size: .78rem; font-weight: 600; color: var(--gs-text-2); margin-bottom: .3rem; }
.gs-report-select, .gs-report-textarea {
  width: 100%; padding: .6rem .75rem; border: 1.5px solid var(--gs-border);
  border-radius: var(--gs-radius-sm); font-size: .875rem; color: var(--gs-text);
  font-family: var(--gs-font); outline: none; margin-bottom: .9rem; background: var(--gs-white);
}
.gs-report-select:focus, .gs-report-textarea:focus { border-color: var(--gs-teal); }
.gs-report-textarea { resize: vertical; }
.gs-report-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.gs-report-btn { color: var(--gs-danger); }

/* ── Bookmark button (Practice/Tests/Custom Test/Results) ───────── */
.gs-bookmark-btn.active {
  color: var(--gs-teal-dark); border-color: var(--gs-teal); background: var(--gs-teal-pale);
}

/* ── Profile: Upgrade / Payment History tabs (v2.1.22) ─────────── */
/* The mentor 360 view puts ten tabs in this bar. With `flex: 1` and no
   wrapping they could not shrink below their text width, so the strip
   pushed the whole page into horizontal overflow — the same failure the
   post-test filter chips had. Scroll the strip itself instead of the page:
   a horizontal swipe is the right gesture for a tab bar, whereas wrapping
   ten tabs onto three rows would eat the viewport on a phone. */
.gs-tabbar {
  display: flex; gap: 4px; background: var(--gs-bg);
  border-radius: var(--gs-radius); padding: 4px;
  overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.gs-tab-btn {
  flex: 1 0 auto; padding: .55rem .75rem; font-size: .85rem; font-weight: 600; border: none;
  background: transparent; color: var(--gs-text-3); border-radius: calc(var(--gs-radius) - 2px);
  cursor: pointer; font-family: var(--gs-font); white-space: nowrap;
}
.gs-tab-btn.active { background: var(--gs-white); color: var(--gs-text); box-shadow: var(--gs-shadow-sm); }

.gs-plan-card { background: var(--gs-bg); border: 1px solid var(--gs-border); border-radius: var(--gs-radius); padding: .9rem 1rem; margin-bottom: .7rem; }
.gs-plan-card-title { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .95rem; margin-bottom: .6rem; }
.gs-plan-pills { display: flex; gap: .4rem; flex-wrap: wrap; }
.gs-plan-pill {
  flex: 1; min-width: 84px; text-align: center; font-size: .75rem; line-height: 1.5; padding: .4rem .3rem;
  border-radius: var(--gs-radius-sm); border: 1.5px solid var(--gs-border-2); background: var(--gs-white);
  color: var(--gs-text-2); cursor: pointer; font-family: var(--gs-font);
}
.gs-plan-pill strong { display: block; font-size: .85rem; color: var(--gs-text); }
.gs-plan-pill.selected { border-color: var(--gs-teal); background: var(--gs-teal-pale); color: var(--gs-teal-dark); }
.gs-plan-pill.selected strong { color: var(--gs-teal-dark); }
.gs-plan-pill.pending { opacity: .55; cursor: not-allowed; }

.gs-pay-panel { border-top: 1px solid var(--gs-border); padding-top: 1rem; margin-top: 1rem; }
.gs-pay-qr-row { display: flex; gap: 1rem; align-items: center; margin-bottom: .8rem; flex-wrap: wrap; }
.gs-pay-upi-box { display: flex; align-items: center; gap: 6px; background: var(--gs-bg); border-radius: var(--gs-radius-sm); padding: .45rem .7rem; font-family: monospace; font-size: .8rem; cursor: pointer; }
.gs-pay-apps { display: flex; gap: .6rem; margin: .6rem 0; }
.gs-pay-app-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--gs-bg); border-radius: var(--gs-radius-sm); padding: .5rem .25rem; border: none; cursor: pointer; font-family: var(--gs-font); }
.gs-pay-app-icon { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: #fff; }
.gs-pay-app-btn span { font-size: .68rem; color: var(--gs-text-2); }

.gs-history-row { display: flex; justify-content: space-between; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--gs-border); }
.gs-history-row:last-child { border-bottom: none; }

/* ── Course Engine — Phase 2 (catalog + read-only outline) ──────── */
.gs-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.gs-course-card { display: flex; flex-direction: column; background: var(--gs-card); border: 1px solid var(--gs-border); border-radius: var(--gs-radius); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
.gs-course-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); transform: translateY(-1px); text-decoration: none; color: inherit; }
.gs-course-thumb { position: relative; height: 120px; background: var(--gs-teal-pale); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.gs-course-draft-badge { position: absolute; top: 8px; right: 8px; background: #f97316; color: #fff; font-size: .65rem; font-weight: 600; padding: 2px 6px; border-radius: 4px; }
.gs-course-body { padding: .85rem 1rem 1rem; display: flex; flex-direction: column; gap: .35rem; }
.gs-course-body h3 { margin: 0; font-size: .95rem; }
.gs-course-subtitle { margin: 0; font-size: .8rem; color: var(--gs-text-3); }
.gs-course-meta { display: flex; flex-wrap: wrap; gap: .6rem; font-size: .72rem; color: var(--gs-text-3); }
.gs-course-stats { font-size: .72rem; color: var(--gs-text-3); }
.gs-course-price { align-self: flex-start; font-size: .8rem; font-weight: 600; color: var(--gs-teal); }
.gs-course-price.gs-course-free { color: #1D9E75; }

.gs-outline-module { padding: .75rem 0; border-bottom: 1px solid var(--gs-border); }
.gs-outline-module:last-child { border-bottom: none; }
.gs-outline-module-title {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-weight: 600; font-size: .9rem; margin-bottom: .4rem;
}
.gs-outline-module-title-text { display: flex; align-items: center; gap: .5rem; }
.gs-outline-module-count { font-weight: 400; font-size: .75rem; color: var(--gs-text-3); white-space: nowrap; flex-shrink: 0; }
.gs-outline-lessons { list-style: none; margin: 0; padding: 0; }
.gs-outline-lessons li { display: flex; align-items: center; flex-wrap: wrap; row-gap: .3rem; gap: .5rem; padding: .5rem .25rem; font-size: .85rem; border-top: 1px solid #f5f5f5; }
.gs-outline-lesson-icon { flex-shrink: 0; }
.gs-outline-lesson-title { flex: 1; }
.gs-outline-preview-tag { font-size: .65rem; font-weight: 600; color: var(--gs-teal); border: 1px solid var(--gs-teal); border-radius: 4px; padding: 1px 6px; }

/* ── Course Engine — Phase 3 (existing Test engine linking) ──────── */
.gs-outline-test-unavailable { font-size: .7rem; color: var(--gs-text-3); font-style: italic; }
.gs-outline-test-score { font-size: .7rem; font-weight: 600; color: #1D9E75; white-space: nowrap; }
.gs-outline-test-link { font-size: .75rem; font-weight: 600; color: var(--gs-teal); text-decoration: none; white-space: nowrap; }
.gs-outline-test-link:hover { text-decoration: underline; }
.gs-outline-test-link-primary { background: var(--gs-teal); color: #fff; padding: 3px 10px; border-radius: 6px; }
.gs-outline-test-link-primary:hover { background: var(--gs-teal-dark); text-decoration: none; }

/* ── Course Engine — Phase 4 (video + progress) ──────────────────── */
.gs-course-progress-bar { width: 100%; height: 6px; border-radius: 99px; background: var(--gs-border); overflow: hidden; margin-bottom: .3rem; }
.gs-course-progress-fill { height: 100%; background: var(--gs-teal); border-radius: 99px; transition: width .2s; }
.gs-course-progress-label { font-size: .7rem; font-weight: 600; color: var(--gs-teal-dark); }
.gs-outline-lesson-link { color: var(--gs-text-1); text-decoration: none; }
.gs-outline-lesson-link:hover { color: var(--gs-teal); text-decoration: underline; }
.gs-outline-lesson-done { color: #1D9E75; font-weight: 700; }
.gs-outline-lesson-inprogress { color: #f97316; }
.gs-lesson-video-wrap { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--gs-border); }
.gs-lesson-video-embed { position: relative; padding-top: 56.25%; border-radius: var(--gs-radius-sm); overflow: hidden; background: #000; }
.gs-lesson-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gs-lesson-media { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--gs-border); }
.gs-lesson-audio { width: 100%; }
.gs-lesson-pdf { width: 100%; height: 480px; border: 1px solid var(--gs-border); border-radius: var(--gs-radius-sm); }
.gs-lesson-body { line-height: 1.6; margin-bottom: 1rem; }
.gs-lesson-complete-row { padding-top: .75rem; border-top: 1px solid var(--gs-border); }
.gs-lesson-complete-badge { font-size: .85rem; font-weight: 600; color: #1D9E75; }
.gs-lesson-complete-hint { font-size: .8rem; color: var(--gs-text-3); }

/* ── Course Engine — Phase 5 (course player shell) ───────────────── */
/* Deliberately separate names/IDs from .gs-sidebar/.gs-hamburger (the
   main app shell) so this drawer's JS binding never collides with
   student-app.js's querySelector-based one. */
.gs-player { display: flex; flex-direction: column; gap: 0; position: relative; }
.gs-course-drawer-toggle { display: inline-flex; align-self: flex-start; margin-bottom: .75rem; padding: .5rem .9rem; border: 1px solid var(--gs-border); border-radius: var(--gs-radius-sm); background: var(--gs-card); color: var(--gs-text); font-size: .85rem; font-weight: 600; cursor: pointer; }
.gs-course-sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,.35); }
.gs-course-sidebar-overlay.show { display: block; }
.gs-course-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 280px; max-width: 82vw;
  background: var(--gs-white); color: var(--gs-text); border-right: 1px solid var(--gs-border);
  overflow-y: auto; padding: 1rem; z-index: 96;
  transform: translateX(-100%); transition: transform .25s ease;
}
.gs-course-sidebar.open { transform: translateX(0); }
.gs-player-sidebar-back { display: block; font-size: .8rem; font-weight: 600; color: var(--gs-text-2); text-decoration: none; margin-bottom: .5rem; }
.gs-player-sidebar-module .gs-outline-lessons li { font-size: .8rem; }
.gs-lesson-row-active { background: var(--gs-teal-pale); border-radius: 6px; margin: 0 -6px; padding-left: 6px !important; padding-right: 6px !important; }
.gs-lesson-row-active .gs-outline-lesson-link { color: var(--gs-teal-dark); font-weight: 700; }
.gs-player-main { min-width: 0; }
.gs-player-nav-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: 1rem; }

@media (min-width: 900px) {
  .gs-course-drawer-toggle { display: none; }
  .gs-course-sidebar-overlay { display: none !important; }
  .gs-course-sidebar { position: sticky; top: 1rem; transform: none; width: 280px; flex-shrink: 0; height: fit-content; max-height: calc(100vh - 2rem); border: 1px solid var(--gs-border); border-radius: var(--gs-radius-sm); }
  .gs-player { flex-direction: row; align-items: flex-start; gap: 1.25rem; }
}

/* ── Course Engine — Phase 6 (Resources + Assignments + Drip) ────── */
.gs-outline-lesson-locked { font-size: .7rem; color: var(--gs-text-3); font-style: italic; white-space: nowrap; }
.gs-lesson-resources { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--gs-border); }
.gs-lesson-resources-title { font-size: .85rem; font-weight: 700; margin: 0 0 .4rem; }
.gs-lesson-resources ul { list-style: none; margin: 0; padding: 0; }
.gs-lesson-resources li { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; font-size: .82rem; }
.gs-lesson-resources li a { color: var(--gs-teal); text-decoration: none; margin-left: auto; }
.gs-lesson-resources li a:hover { text-decoration: underline; }
.gs-assignment-prompt { font-size: .95rem; line-height: 1.6; background: var(--gs-bg); padding: .85rem; border-radius: 8px; }

/* ── Course Engine — Phase 7 (Commerce/Enrollment) ───────────────── */
.gs-course-buy-box { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--gs-border); }
.gs-course-buy-hint { font-size: .75rem; color: var(--gs-text-3); margin-top: .4rem; }

/* ── UI/UX Premium Tweaks & Night Mode Toggles ───────────────── */
body.night-mode .gs-card,
html.night-mode body.gsmitra-app .gs-card {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: var(--gs-card);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

/* Optimal reading constraints for long-form study — capped width only, NOT
   centered: centering this element while its siblings (options list, meta
   row) stay left-aligned made the question box visibly drift right/inset
   compared to everything around it. Left-aligned + capped reads as "this
   block just doesn't stretch as wide," which is the intent; centered +
   capped reads as a layout bug. */
.gs-mcq-question,
.gs-explanation,
.gs-rich {
  max-width: 680px !important;
  margin-left: 0;
  margin-right: auto;
  line-height: 1.65 !important;
}

/* Distinct styling for bilingual questions to separate EN/HI */
.gs-mcq-question blockquote,
.gs-mcq-question .hi-text {
  display: block;
  margin-top: 0.75rem;
  opacity: 0.85;
  font-size: 0.95em;
  border-top: 1px dashed var(--gs-border);
  padding-top: 0.75rem;
}

/* Smooth transition for theme toggles */
.gs-theme-toggle {
  transition: transform 0.2s ease;
}
.gs-theme-toggle:hover {
  transform: scale(1.1);
}
/* Comprehension passage box (v2.24.0) */
.gs-passage { border:1px solid var(--gs-border, #e5e7eb); border-left:3px solid var(--gs-teal, #0d9e7a); border-radius:8px; background:var(--gs-bg, #f8fafc); margin:.25rem 0 .75rem; }
.gs-passage > summary { cursor:pointer; padding:.5rem .75rem; font-size:.8rem; font-weight:700; color:var(--gs-teal, #0d9e7a); list-style:none; user-select:none; }
.gs-passage > summary::-webkit-details-marker { display:none; }
.gs-passage > summary::after { content:' ▾'; font-weight:400; }
.gs-passage:not([open]) > summary::after { content:' ▸ tap to read'; }
.gs-passage-pos { font-weight:500; color:var(--gs-text-3, #6b7280); margin-left:.25rem; }
.gs-passage-body { padding:0 .875rem .75rem; font-size:.9rem; line-height:1.65; max-height:45vh; overflow-y:auto; color:var(--gs-text, #111827); }

/* Paper toggle + qualifying card (v2.25.0) */
.gs-paper-switch { display:flex; flex-wrap:wrap; gap:.4rem .9rem; align-items:center; margin:0 0 1rem; padding:.5rem .75rem; background:var(--gs-card, #fff); border:1px solid var(--gs-border, #e5e7eb); border-radius:10px; }
.gs-paper-switch-group { display:inline-flex; align-items:center; gap:.3rem; flex-wrap:wrap; }
.gs-paper-switch-exam { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--gs-text-3, #6b7280); margin-right:.15rem; }
.gs-paper-switch-btn { font-size:.8rem; font-weight:600; padding:.25rem .7rem; border-radius:99px; border:1px solid var(--gs-border, #e5e7eb); color:var(--gs-text, #111827); text-decoration:none; background:transparent; }
.gs-paper-switch-btn:hover { border-color:var(--gs-teal, #0d9e7a); }
.gs-paper-switch-btn.active { background:var(--gs-teal, #0d9e7a); border-color:var(--gs-teal, #0d9e7a); color:#fff; }
.gs-qual-bars { position:relative; display:flex; align-items:flex-end; gap:6px; height:70px; padding:4px 0; border-bottom:1px solid var(--gs-border, #e5e7eb); }
.gs-qual-bar { flex:1; max-width:34px; border-radius:4px 4px 0 0; }
.gs-qual-bar.ok { background:var(--gs-success, #16a34a); }
.gs-qual-bar.low { background:var(--gs-danger, #dc2626); opacity:.8; }
.gs-qual-line { position:absolute; left:0; right:0; border-top:2px dashed var(--gs-text-3, #6b7280); }
.gs-qual-pill { display:inline-block; font-size:.7rem; font-weight:700; padding:.15rem .5rem; border-radius:99px; }
.gs-qual-pill.ok { background:#dcfce7; color:#166534; }
.gs-qual-pill.low { background:#fee2e2; color:#991b1b; }