:root {
  --navy:    #041B35;
  --accent:  #FF8413;
  --accent2: #e6730d;
  --cream:   #FFFCF5;
  --white:   #FFFFFF;
  --page:    #F0EDE8;
  --card:    #FFFFFF;
  --card-alt:#F7F5F0;
  --border:  rgba(4,27,53,0.10);
  --text-main: #041B35;
  --text-sub:  #6b7280;
  --text-muted:#9ca3af;
  --radius-sm:10px;--radius-md:14px;--radius-lg:20px;--radius-xl:26px;
  --font:'Montserrat',system-ui,sans-serif;
  --sidebar-w:240px;--header-h:64px;--bottom-nav-h:72px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --shadow-card:0 0 20px rgba(0,0,0,0.08),0 4px 16px rgba(0,0,0,0.10),0 8px 32px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.06);
  --shadow-glow:0 0 32px rgba(255,132,19,0.18);
}

/* === DARK MODE === */
[data-theme="dark"] {
  --page:    #0d1525;
  --card:    #142237;
  --card-alt:#0f1e30;
  --border:  rgba(255,255,255,0.09);
  --text-main: #FFFCF5;
  --text-sub:  #94a3b8;
  --text-muted:#64748b;
  --shadow-card:0 0 20px rgba(0,0,0,0.28),0 4px 16px rgba(0,0,0,0.35),0 8px 32px rgba(0,0,0,0.28),0 1px 4px rgba(0,0,0,0.15);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12)}
[data-theme="dark"] .exam-date-field,[data-theme="dark"] .sidebar-exam-field{background:rgba(255,255,255,0.07);color:var(--text-main);border-color:var(--border);color-scheme:dark}
[data-theme="dark"] .qotd-top-bar{background:var(--accent)}
[data-theme="dark"] .welcome-card{background:linear-gradient(135deg,rgba(255,132,19,0.16) 0%,rgba(255,132,19,0.05) 60%,transparent 100%)}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--page);color:var(--text-main);min-height:100vh;min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
button{font-family:var(--font);cursor:pointer;border:none;background:none}
a{text-decoration:none;color:inherit}

/* === LAYOUT MOBILE FIRST === */
.app-shell{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.sidebar{display:none}
.app-body{flex:1;display:flex;flex-direction:column;min-height:0}
.desktop-header{display:none}

.app-header{position:sticky;top:0;z-index:100;height:calc(var(--header-h) + var(--sat));background:var(--navy);border-bottom:2px solid var(--accent);display:flex;align-items:center;justify-content:space-between;padding:var(--sat) 20px 0;flex-shrink:0}
.header-logo{height:36px;width:auto;object-fit:contain}
.header-right{display:flex;align-items:center;gap:10px}
.tagline-pill{background:rgba(255,132,19,0.15);border:1px solid rgba(255,132,19,0.35);color:var(--accent);font-size:9px;font-weight:800;letter-spacing:2px;text-transform:uppercase;padding:5px 12px;border-radius:100px}
.header-notif-btn{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);color:rgba(255,252,245,0.7);display:flex;align-items:center;justify-content:center;font-size:18px;transition:background .2s,color .2s}
.header-notif-btn:hover{background:rgba(255,132,19,0.15);color:var(--accent)}
.mob-profile-btn{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);color:rgba(255,252,245,0.7);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;transition:background .2s,color .2s,border-color .2s}
.mob-profile-btn.logged-in{background:var(--accent);color:var(--navy);border:2px solid rgba(255,132,19,0.4);font-size:14px}
.mob-profile-btn:hover{background:rgba(255,132,19,0.15);color:var(--accent)}

.main-content{flex:1;overflow-y:auto;padding:16px 24px calc(var(--bottom-nav-h) + var(--sab) + 16px);display:flex;flex-direction:column;gap:16px}
.dashboard-cols{display:flex;flex-direction:column;gap:16px}

.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:100;height:calc(var(--bottom-nav-h) + var(--sab));background:var(--navy);border-top:1px solid rgba(255,255,255,0.08);display:flex;align-items:stretch;padding-bottom:var(--sab);transition:transform .3s ease}
.bottom-nav.nav-quiz-hidden{transform:translateY(100%)}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:rgba(255,252,245,0.45);font-size:9px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;transition:color .2s;border:none;background:none;padding:8px 4px}
.nav-item i{font-size:22px}
.nav-item.active{color:var(--accent)}
.nav-item.active::after{content:'';display:block;width:4px;height:4px;border-radius:50%;background:var(--accent);margin-top:2px}
.nav-item:not(.active):hover{color:rgba(255,252,245,0.65)}
/* Dashboard icon orange accent */
.nav-item[data-nav="dashboard"] i{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;background:rgba(255,132,19,0.14);transition:background .2s,box-shadow .2s}
.nav-item[data-nav="dashboard"].active i{background:rgba(255,132,19,0.22);box-shadow:0 0 14px rgba(255,132,19,0.40)}
/* Extra bottom padding so content clears the Coach button + bottom nav on mobile */
@media(max-width:767px){
  .results-body,.review-body,.prequiz-body{padding-bottom:calc(var(--bottom-nav-h) + 20px) !important}
  /* Quiz body: must clear nav (72px) + coach button bottom offset (12px) + button height (~60px) + gap (16px) */
  .quiz-body{padding-bottom:calc(var(--bottom-nav-h) + 12px + 60px + 16px) !important}
  /* Ensure Next/Back row renders above the fixed coach button layer */
  .quiz-nav-row{position:relative;z-index:10}
}

/* === DESKTOP LAYOUT === */
@media(min-width:768px){
  .app-shell{flex-direction:row}
  .app-header{display:none}
  .bottom-nav{display:none}
  .app-body{flex:1;display:flex;flex-direction:column;height:100vh;overflow:hidden;padding-top:var(--header-h)}

  /* Sprint C5: width, min-width, and max-width all locked to 240px so no
     content change — exam countdown appearing, date input opening, scrollbar
     visibility — can cause the sidebar to resize and reflow its card children.
     scrollbar-gutter:stable reserves space for the scrollbar track permanently,
     so the scrollbar appearing or disappearing does not shift card widths. */
  .sidebar{display:flex;flex-direction:column;width:var(--sidebar-w);min-width:var(--sidebar-w);max-width:var(--sidebar-w);min-height:100vh;background:var(--navy);border-right:1px solid rgba(255,255,255,0.08);position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;flex-shrink:0;box-shadow:4px 0 28px rgba(255,132,19,0.18),2px 0 8px rgba(255,132,19,0.10)}
  /* Internal quiz sidebar is redundant — main sidebar handles it on desktop */
  #screen-quiz .quiz-sidebar-col,#screen-prequiz .quiz-sidebar-col{display:none !important}
  .sidebar-header{padding:24px 20px 16px;border-bottom:2px solid var(--accent)}
  .sidebar-logo{height:38px;width:auto;object-fit:contain}
  .sidebar-tagline{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);margin-top:8px}
  .sidebar-nav{display:flex;flex-direction:column;padding:12px 10px;gap:3px}
  .sidebar-nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-md);font-size:12px;font-weight:700;color:rgba(255,252,245,0.65);letter-spacing:0.3px;transition:all .2s;border:none;background:none;text-align:left;width:100%;cursor:pointer}
  .sidebar-nav-item i{font-size:18px;flex-shrink:0}
  .sidebar-nav-item:hover{background:rgba(255,255,255,0.06);color:var(--cream)}
  .sidebar-nav-item.active{background:rgba(255,132,19,0.15);color:var(--accent);border:1px solid rgba(255,132,19,0.25)}
  .sidebar-footer{padding:12px 10px 20px;border-top:1px solid rgba(255,255,255,0.08);margin-top:auto}

  /* Desktop header — fixed, outside app-body, shown/hidden via .visible class in JS */
  .desktop-header{position:fixed;top:0;left:var(--sidebar-w);right:0;z-index:200;height:var(--header-h);background:var(--navy);border-bottom:2px solid var(--accent);display:none;align-items:center;justify-content:space-between;padding:0 36px}
  .desktop-header.visible{display:flex}
  /* When sidebar is hidden (auth screens), header spans full width */
  .desktop-header.header-full{left:0}
  /* Auth screens: offset from top so card centres below the fixed header */
  #screen-signup,#screen-login,#screen-reset-password{padding-top:var(--header-h)}
  .desktop-header-title{font-size:17px;font-weight:800;color:var(--cream);letter-spacing:0.3px}
  .desktop-header-right{display:flex;align-items:center;gap:12px}
  .desktop-user-name{font-size:12px;font-weight:700;color:rgba(255,252,245,0.75);letter-spacing:0.2px}
  .desktop-user-sep{width:1px;height:18px;background:rgba(255,255,255,0.12)}
  .desktop-user-avatar-wrap{position:relative}
  .desktop-user-avatar{width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--navy);font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px solid rgba(255,132,19,0.4);transition:border-color .2s}
  .desktop-user-avatar:hover{border-color:var(--accent)}
  .desktop-user-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--navy);border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-md);padding:6px;min-width:150px;box-shadow:0 8px 24px rgba(0,0,0,0.3);z-index:200}
  .desktop-user-dropdown.open{display:block}
  .dropdown-item{display:flex;align-items:center;gap:8px;width:100%;padding:9px 12px;border-radius:10px;font-size:12px;font-weight:700;color:rgba(255,252,245,0.80);text-align:left;transition:background .15s,color .15s;background:none;border:none;cursor:pointer;font-family:var(--font)}
  .dropdown-item:hover{background:rgba(255,132,19,0.12);color:var(--cream)}
  .dropdown-item i{font-size:16px}

  /* Main content desktop */
  .main-content{flex:1;overflow:hidden;padding:0;gap:0;display:flex;flex-direction:column}
  .dashboard-cols{display:grid;grid-template-columns:1fr 1fr;gap:0;flex:1;overflow:hidden;height:100%}
  .dash-col-left,.dash-col-right{overflow-y:auto;padding:28px 28px 28px;display:flex;flex-direction:column;gap:24px;align-items:stretch}
  .dash-col-left{border-right:1px solid var(--border)}
  /* Align Welcome card top with Quick 10 CTA (offset by the section-header above Quick 10) */
  .dash-col-left > section.welcome-card{margin-top:34px;flex-shrink:0}
  /* Ensure welcome card content is always visible on desktop */
  .dash-col-left .welcome-card .welcome-eyebrow{display:flex}
  .dash-col-left .welcome-card .welcome-msg{display:block;opacity:1;visibility:visible}
  .dash-col-left .welcome-card .welcome-sub{display:block;opacity:1;visibility:visible}
  .dash-col-left .welcome-card .welcome-date{display:flex;opacity:1;visibility:visible}

  .main-top-bar{padding:10px 28px 0;display:flex;flex-direction:column;gap:10px;flex-shrink:0}
}
@media(min-width:1200px){
  .dash-col-left,.dash-col-right{padding:32px 36px}
}

/* === EXAM COUNTDOWN BANNER === */
.exam-banner{display:none;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,132,19,0.08);border:1px solid rgba(255,132,19,0.25);border-radius:var(--radius-md);padding:12px 16px;cursor:pointer;transition:background .2s;animation:fadeIn .4s ease}
.exam-banner:hover{background:rgba(255,132,19,0.13)}
.exam-banner.visible{display:flex}
.exam-banner-left{display:flex;align-items:center;gap:10px}
.exam-banner-left i{font-size:20px;color:var(--accent);flex-shrink:0}
.exam-banner-text{font-size:12px;font-weight:700;color:var(--text-main)}
.exam-banner-days{font-size:22px;font-weight:900;color:var(--accent);white-space:nowrap}
.exam-date-input-wrap{display:none;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 16px;box-shadow:var(--shadow-card)}
.exam-date-input-wrap.visible{display:flex}
.exam-date-input-wrap label{font-size:11px;font-weight:700;color:var(--text-sub);text-transform:uppercase;letter-spacing:1px}
.exam-date-row{display:flex;gap:8px}
.exam-date-field{flex:1;border:1.5px solid var(--border);border-radius:10px;padding:10px 12px;font-family:var(--font);font-size:13px;font-weight:600;color:var(--text-main);background:var(--card-alt);outline:none;transition:border .2s}
.exam-date-field:focus{border-color:var(--accent)}
.btn-save-exam{background:var(--accent);color:var(--navy);font-size:13px;font-weight:800;padding:10px 18px;border-radius:10px;border:none;cursor:pointer;transition:background .2s;white-space:nowrap}
.btn-save-exam:hover{background:var(--accent2)}

/* === SECTION HEADERS === */
.section-header{display:flex;align-items:center;justify-content:space-between;padding:6px 0;margin-bottom:6px}
.section-label{font-size:13px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-sub)}

/* === WELCOME CARD === */
.welcome-card{background:linear-gradient(135deg,rgba(255,132,19,0.12) 0%,rgba(255,132,19,0.03) 60%,transparent 100%);border:1px solid rgba(255,132,19,0.20);border-radius:var(--radius-xl);padding:22px 20px;position:relative;overflow:hidden;box-shadow:var(--shadow-card);margin-bottom:8px}
.welcome-card::before{content:'';position:absolute;top:-32px;right:-32px;width:130px;height:130px;border-radius:50%;background:rgba(255,132,19,0.13);pointer-events:none}
.welcome-card::after{content:'';position:absolute;top:14px;right:14px;width:54px;height:54px;border-radius:50%;border:2px solid rgba(255,132,19,0.18);pointer-events:none}
.welcome-eyebrow{font-size:9px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);margin-bottom:7px;display:flex;align-items:center;gap:6px}
.welcome-eyebrow::before{content:'';display:inline-block;width:16px;height:2px;background:var(--accent);border-radius:2px}
.welcome-msg{font-size:16px;font-weight:700;color:var(--text-main);line-height:1.5;transition:opacity .4s}
.welcome-msg strong{color:var(--accent)}
.welcome-name{color:#F97316}
.welcome-sub{font-size:14px;font-weight:500;color:#555;margin-top:12px;line-height:1.7;font-style:italic;border-left:3px solid #FF8413;padding-left:14px}
[data-theme="dark"] .welcome-sub{color:var(--text-sub)}
.welcome-date{font-size:11px;font-weight:600;color:var(--text-sub);margin-top:10px;display:flex;align-items:center;gap:6px;padding-top:10px;border-top:1px solid var(--border)}
.welcome-date i{font-size:13px}

/* === QOTD === */
.qotd-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-card)}
.qotd-top-bar{background:var(--accent);padding:13px 18px;display:flex;align-items:center;justify-content:center}
.qotd-top-label{font-size:15px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:var(--navy);display:flex;align-items:center;gap:8px}
.qotd-top-label i{font-size:16px}
.qotd-body{padding:20px 18px}
.qotd-q{font-size:14px;font-weight:700;color:var(--text-main);line-height:1.65;margin-bottom:18px}
.qotd-choices{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.qotd-choice{display:flex;align-items:flex-start;gap:11px;padding:11px 13px;background:var(--card-alt);border:1.5px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;text-align:left;width:100%;color:var(--text-main)}
.qotd-choice:hover:not(.selected):not(.correct):not(.wrong){background:rgba(178,92,13,0.22);border-color:rgba(178,92,13,0.55)}
.qotd-choice.selected{background:rgba(178,92,13,0.45);border-color:rgba(178,92,13,0.75);color:var(--text-main);cursor:default}
.qotd-choice.correct{background:rgba(34,197,94,0.08);border-color:rgba(34,197,94,0.45)}
.qotd-choice.wrong{background:rgba(239,68,68,0.07);border-color:rgba(239,68,68,0.35)}
.choice-letter{font-size:11px;font-weight:900;color:var(--accent);min-width:18px;padding-top:1px;flex-shrink:0}
.qotd-choice.selected .choice-letter{color:var(--accent)}
.qotd-choice.correct .choice-letter{color:#16a34a}
.qotd-choice.wrong .choice-letter{color:#dc2626}
.choice-text{font-size:13px;font-weight:600;line-height:1.5;color:var(--text-main)}
.qotd-footer{display:flex;align-items:center;gap:10px;justify-content:flex-start}
.btn-qotd-submit{padding:12px 24px;background:var(--accent);border:none;border-radius:var(--radius-sm);font-size:13px;font-weight:800;color:var(--navy);letter-spacing:0.5px;transition:all .2s;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:var(--font);cursor:pointer}
.btn-qotd-submit:hover{background:var(--accent2)}
.qotd-explanation{display:none;margin-top:14px;padding:13px;background:rgba(34,197,94,0.07);border:1px solid rgba(34,197,94,0.20);border-radius:var(--radius-sm);font-size:13px;color:var(--text-main);line-height:1.6}
.qotd-explanation strong{color:#15803d;font-weight:800}

/* === QUICK 10 CTA === */
.quick10-cta{display:flex;align-items:center;justify-content:space-between;background:var(--accent);border:none;border-radius:var(--radius-xl);padding:20px 22px;color:var(--navy);width:100%;text-align:left;cursor:pointer;box-shadow:0 8px 32px rgba(255,132,19,0.35),var(--shadow-glow);transition:all .2s;position:relative;overflow:hidden}
.quick10-cta::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.12) 0%,transparent 60%);pointer-events:none}
.quick10-cta:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(255,132,19,0.45),var(--shadow-glow)}
.quick10-cta:active{transform:translateY(0)}
.quick10-left{display:flex;flex-direction:column;gap:4px}
.quick10-eyebrow{font-size:9px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:rgba(4,27,53,0.60)}
.quick10-label{font-size:23px;font-weight:900;color:var(--navy);display:flex;align-items:center;gap:8px;letter-spacing:-0.3px}
.quick10-label i{font-size:22px}
.quick10-meta{font-size:11px;font-weight:600;color:rgba(4,27,53,0.60);display:flex;align-items:center;gap:7px;margin-top:2px}
.meta-dot{width:3px;height:3px;border-radius:50%;background:rgba(4,27,53,0.40)}
.quick10-arrow{width:42px;height:42px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px;color:var(--accent)}

/* === QUIZ MODES GRID === */
.modes-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mode-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 14px;display:flex;flex-direction:column;gap:9px;position:relative;overflow:hidden;transition:all .2s;cursor:pointer;text-align:left;box-shadow:var(--shadow-card)}
.mode-card.unlocked{border-color:rgba(255,132,19,0.25);background:linear-gradient(135deg,rgba(255,132,19,0.05) 0%,var(--card) 100%)}
.mode-card.unlocked:hover{border-color:rgba(255,132,19,0.55);box-shadow:0 4px 20px rgba(255,132,19,0.15);transform:translateY(-1px)}
.mode-card.locked{border-color:rgba(255,132,19,0.25);background:linear-gradient(135deg,rgba(255,132,19,0.05) 0%,var(--card) 100%);cursor:pointer}
.mode-card.locked:hover{border-color:rgba(255,132,19,0.55);box-shadow:0 4px 20px rgba(255,132,19,0.15);transform:translateY(-1px)}
.mode-icon-wrap{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0}
.mode-card.unlocked .mode-icon-wrap{background:rgba(255,132,19,0.12);color:var(--accent)}
.mode-card.locked .mode-icon-wrap{background:rgba(255,132,19,0.12);color:var(--accent)}
.mode-name{font-size:15px;font-weight:800;color:var(--text-main);line-height:1.3}
.mode-desc{font-size:11px;font-weight:600;color:var(--text-sub);line-height:1.4}
.mode-badge{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:4px 9px;border-radius:100px;width:fit-content}
.badge-ready{background:rgba(255,132,19,0.12);color:var(--accent);border:1px solid rgba(255,132,19,0.25)}
.badge-premium{background:rgba(139,92,246,0.10);color:#7c3aed;border:1px solid rgba(139,92,246,0.20)}
.badge-premium i{font-size:9px}
.badge-free{background:rgba(34,197,94,0.10);color:#16a34a;border:1px solid rgba(34,197,94,0.25)}
.badge-free i{font-size:9px}
.mode-card.full-width{grid-column:1/-1;flex-direction:row;align-items:center;gap:14px}
.mode-card.full-width .mode-content{flex:1}

/* === SIDEBAR WIDGETS === */
.scorecard-widget{margin:0 10px 12px;background:rgba(255,132,19,0.08);border:1px solid rgba(255,132,19,0.20);border-radius:var(--radius-md);padding:16px}
.scorecard-label{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.scorecard-stats{display:flex;justify-content:space-between;margin-bottom:10px}
.scorecard-stat{text-align:center}
.scorecard-stat-val{font-size:26px;font-weight:900;color:var(--cream);line-height:1}
.scorecard-stat-key{font-size:8px;font-weight:700;color:rgba(255,252,245,0.45);margin-top:3px;letter-spacing:0.5px;text-transform:uppercase}
.scorecard-bar-wrap{height:4px;background:rgba(255,255,255,0.10);border-radius:4px;overflow:hidden;margin-bottom:8px}
/* Sprint C3: switched from width to transform:scaleX so the bar animation runs
   on the GPU compositor thread (zero CPU repaints per frame). width animations
   force a CPU repaint every frame (~60/s) and re-rasterise the entire sticky
   sidebar tile — causing all four sidebar cards to visibly pulse for ~1 second
   on every login. transform:scaleX is fully GPU-compositable. */
.scorecard-bar-fill{height:100%;width:100%;background:var(--accent);border-radius:4px;transform:scaleX(0);transform-origin:left;transition:transform 1s ease}
.scorecard-day-label{font-size:9px;font-weight:700;color:rgba(255,252,245,0.40);letter-spacing:0.5px}
.dash-st-total{font-size:26px;font-weight:900;color:var(--cream);line-height:1;margin-bottom:6px}
.dash-st-session{font-size:9px;font-weight:700;letter-spacing:0.5px}
.dash-st-session-label{color:#F97316 !important}
.dash-st-session-val{color:#FFFFFF !important}

.sidebar-streak-cal{display:none;margin:0 10px 12px;background:rgba(255,132,19,0.08);border:1px solid rgba(255,132,19,0.20);border-radius:var(--radius-md);padding:14px}
.streak-cal-label{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.streak-cal-month{font-size:12px;font-weight:700;color:rgba(255,252,245,0.70);margin-bottom:8px;letter-spacing:0.1px}
.streak-cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
/* Desktop month grid — full month, same logic as mobile overlay */
.streak-month-headers{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:5px}
.streak-month-header{font-size:7px;font-weight:800;color:rgba(255,252,245,0.28);text-align:center;text-transform:uppercase;letter-spacing:0.3px}
.streak-month-cell{aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:rgba(255,252,245,0.20);background:rgba(255,255,255,0.03);border:1px solid transparent;transition:background .2s}
.streak-month-cell.in-month{color:rgba(255,252,245,0.40)}
.streak-month-cell.studied{background:#FF8413;color:#fff;border-color:#FF8413;box-shadow:0 0 6px rgba(255,132,19,0.50)}
/* will-change:opacity promotes today-cell to its own GPU compositing layer so the
   opacity animation doesn't force a repaint of the parent sidebar compositing layer.
   box-shadow is kept static (paint-once on creation) — it is NOT in the @keyframes. */
.streak-month-cell.today-cell{background:#FF9B3C;color:#041B35;border-color:#FF9B3C;font-weight:900;box-shadow:0 0 0 2px rgba(255,155,60,0.28),0 0 10px rgba(255,132,19,0.55);animation:orange-pulse 2.2s ease-in-out infinite;will-change:opacity}
.streak-month-cell.empty{background:transparent;border-color:transparent;color:transparent}
/* Legacy dot styles kept for safety */
.streak-day{height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1px}
.streak-day-letter{font-size:7px;font-weight:700;color:rgba(255,252,245,0.30);text-transform:uppercase}
.streak-day-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.08);transition:background .3s}
.streak-day-dot.studied{background:#FF8413;box-shadow:0 0 6px rgba(255,132,19,0.50)}
.streak-day-dot.today{box-shadow:0 0 0 2px rgba(255,132,19,0.40),0 0 8px rgba(255,132,19,0.35)}

.sidebar-exam-cd{display:none;margin:0 10px 12px;padding:12px 14px;background:rgba(255,132,19,0.08);border:1px solid rgba(255,132,19,0.20);border-radius:var(--radius-md);cursor:pointer;transition:background .2s}
.sidebar-exam-cd:hover{background:rgba(255,132,19,0.14)}
.sidebar-exam-cd-label{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);margin-bottom:5px}
.sidebar-exam-cd-value{font-size:20px;font-weight:900;color:var(--cream);line-height:1}
.sidebar-exam-cd-sub{font-size:9px;font-weight:600;color:rgba(255,252,245,0.40);margin-top:2px}
/* Logged-in / no exam date — clickable prompt */
.sidebar-exam-prompt{display:none;margin:0 10px 12px;padding:10px 14px;background:rgba(255,132,19,0.07);border:1px solid rgba(255,132,19,0.18);border-radius:var(--radius-md);cursor:pointer;transition:background .2s;align-items:center;gap:10px}
.sidebar-exam-prompt:hover{background:rgba(255,132,19,0.13)}
.sidebar-exam-prompt i{font-size:15px;color:var(--accent);flex-shrink:0}
.sidebar-exam-prompt span{font-size:10px;font-weight:700;color:var(--cream);line-height:1.35}
/* Anonymous / logged-out — info label only */
.sidebar-exam-anon{display:none;margin:0 10px 12px;padding:10px 14px;background:rgba(255,252,245,0.03);border:1px solid rgba(255,252,245,0.08);border-radius:var(--radius-md);align-items:center;gap:10px}
.sidebar-exam-anon i{font-size:15px;color:rgba(255,252,245,0.30);flex-shrink:0}
.sidebar-exam-anon span{font-size:10px;font-weight:600;color:rgba(255,252,245,0.35);line-height:1.35}
.sidebar-exam-input{display:none;margin:0 10px 12px;padding:12px 14px;background:rgba(255,132,19,0.08);border:1px solid rgba(255,132,19,0.20);border-radius:var(--radius-md)}
.sidebar-exam-input.visible{display:block}
.sidebar-exam-input label{font-size:9px;font-weight:700;color:rgba(255,252,245,0.50);text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:6px}
.sidebar-exam-field{width:100%;border:1px solid rgba(255,255,255,0.15);border-radius:8px;padding:8px 10px;font-family:var(--font);font-size:12px;font-weight:600;color:var(--cream);background:rgba(255,255,255,0.07);outline:none;transition:border .2s;color-scheme:dark}
.sidebar-exam-field:focus{border-color:var(--accent)}
.btn-save-exam-sidebar{margin-top:8px;width:100%;padding:8px;background:var(--accent);color:var(--navy);font-size:11px;font-weight:800;border-radius:8px;border:none;cursor:pointer;transition:background .2s;font-family:var(--font)}
.btn-save-exam-sidebar:hover{background:var(--accent2)}


/* === INSTALL BANNER — Sprint 2: persistent dashboard prompt, mobile only === */
.install-banner{display:none}
@media(max-width:767px){
  .install-banner.visible{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%);border:1px solid rgba(249,115,22,0.22);border-radius:var(--radius-md);padding:12px 14px;box-shadow:var(--shadow-card);animation:fadeIn .3s ease}
  [data-theme="dark"] .install-banner.visible{background:var(--card);border-color:rgba(255,255,255,0.09)}
}
.install-banner-text{flex:1;font-size:13px;font-weight:700;color:var(--text-main);line-height:1.35;display:flex;align-items:center;gap:8px}
.install-banner-text i{font-size:18px;color:#F97316;flex-shrink:0}
.btn-install{background:#F97316;color:#041B35;font-size:12px;font-weight:900;padding:8px 14px;border-radius:8px;white-space:nowrap;flex-shrink:0;border:none;cursor:pointer;font-family:var(--font);transition:background .2s}
.btn-install:hover{background:#ea6c0e}
.btn-dismiss-install{color:var(--text-muted);font-size:18px;flex-shrink:0;transition:color .2s;padding:4px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.btn-dismiss-install:hover{color:var(--text-main)}

/* === PRE QUIZ SCREEN === */
#screen-prequiz,#screen-timed-prequiz,#screen-beast-prequiz,#screen-weakest-prequiz,#screen-unfinished-prequiz,#screen-targeted-prequiz,#screen-byo{display:none;flex-direction:column;flex:1;min-height:100vh;min-height:100dvh}
#screen-prequiz.active,#screen-timed-prequiz.active,#screen-beast-prequiz.active,#screen-weakest-prequiz.active,#screen-unfinished-prequiz.active,#screen-targeted-prequiz.active,#screen-byo.active{display:flex}
#screen-byo{background:var(--navy)}

/* === BUILD YOUR OWN CONFIG SCREEN === */
.byo-body{flex:1;overflow-y:auto;padding:28px 24px 40px;display:flex;flex-direction:column;gap:24px;background:transparent}
@media(min-width:768px){.byo-body{max-width:1100px;margin:0 auto;width:100%;padding:32px 0 56px;overflow-y:visible}}
@media(max-width:767px){.byo-body{padding-bottom:calc(var(--bottom-nav-h) + 20px)}}
.byo-subtitle{font-size:13px;font-weight:600;color:rgba(255,252,245,0.55);line-height:1.6}
/* Option groups */
.byo-group{display:flex;flex-direction:column;gap:10px}
.byo-group-header{display:flex;align-items:center;justify-content:space-between}
.byo-group-label{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,252,245,0.45)}
/* Select All toggle */
.byo-select-all{font-size:11px;font-weight:700;color:var(--accent);background:rgba(255,132,19,0.08);border:1px solid rgba(255,132,19,0.22);border-radius:100px;padding:4px 12px;cursor:pointer;transition:all .2s;font-family:var(--font)}
.byo-select-all:hover{background:rgba(255,132,19,0.15)}
/* Topic card grid */
.byo-topic-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.byo-topic-card{display:flex;align-items:center;gap:9px;padding:12px 14px;border-radius:var(--radius-lg);border:1.5px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.04);font-family:var(--font);font-size:12px;font-weight:700;color:rgba(255,252,245,0.50);cursor:pointer;transition:all .2s;text-align:left;width:100%}
.byo-topic-card i{font-size:15px;flex-shrink:0}
.byo-topic-card:hover{border-color:rgba(255,132,19,0.40);color:rgba(255,252,245,0.85)}
.byo-topic-card.active{border-color:var(--accent);background:rgba(255,132,19,0.10);color:var(--accent)}
/* Timer duration reveal */
.byo-timer-reveal{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:var(--radius-lg);background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);margin-top:2px}
.byo-timer-reveal[hidden]{display:none!important}
.byo-timer-reveal-label{font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,252,245,0.35)}
/* Pool cards */
.byo-pool-opts{display:flex;flex-direction:column;gap:10px}
.byo-pool-card{display:flex;align-items:flex-start;gap:14px;padding:16px;border-radius:var(--radius-lg);border:1.5px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.04);cursor:pointer;transition:all .2s;text-align:left;width:100%;font-family:var(--font)}
.byo-pool-card:hover{border-color:rgba(255,132,19,0.35)}
.byo-pool-card.active{border-color:var(--accent);background:rgba(255,132,19,0.06)}
.byo-pool-icon{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;color:rgba(255,252,245,0.45);transition:all .2s}
.byo-pool-card.active .byo-pool-icon{background:rgba(255,132,19,0.14);color:var(--accent)}
.byo-pool-title{font-size:13px;font-weight:800;color:rgba(255,252,245,0.85)}
.byo-pool-desc{font-size:11px;font-weight:600;color:rgba(255,252,245,0.45);margin-top:3px;line-height:1.55}
.byo-pool-card.active .byo-pool-title{color:#fff}
.byo-pool-card.active .byo-pool-desc{color:rgba(255,252,245,0.65)}
/* Summary block */
.byo-summary{padding:14px 16px;border-radius:var(--radius-lg);background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10)}
.byo-summary-label{font-size:9px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.byo-summary-text{font-size:13px;font-weight:600;color:rgba(255,252,245,0.75);line-height:1.6}
/* Dark-context pill overrides for prequiz-opts inside BYO */
#screen-byo .prequiz-opt{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.12);color:rgba(255,252,245,0.60)}
#screen-byo .prequiz-opt:hover{border-color:rgba(255,132,19,0.45);color:rgba(255,252,245,0.90)}
#screen-byo .prequiz-opt.active{border-color:var(--accent);background:rgba(255,132,19,0.12);color:var(--accent)}

/* === BUILD YOUR OWN — CONFIRM SCREEN === */
#screen-byo-confirm{display:none;flex-direction:column;flex:1;min-height:100vh;min-height:100dvh;background:var(--navy)}
#screen-byo-confirm.active{display:flex}
.byo-confirm-body{flex:1;overflow-y:auto;padding:48px 24px 56px;display:flex;flex-direction:column;align-items:center;background:transparent}
@media(max-width:767px){.byo-confirm-body{padding-bottom:calc(var(--bottom-nav-h) + 28px)}}
@media(min-width:768px){.byo-confirm-body{overflow-y:visible}}
.byo-confirm-inner{width:100%;max-width:480px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.byo-confirm-icon{font-size:48px;color:var(--accent);line-height:1}
.byo-confirm-count{font-size:22px;font-weight:800;color:var(--cream);letter-spacing:-0.3px}
.byo-confirm-card{width:100%;padding:16px 18px;border-radius:var(--radius-lg);background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);text-align:left}
.byo-confirm-card-label{font-size:9px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent);margin-bottom:7px}
.byo-confirm-card-text{font-size:13px;font-weight:600;color:rgba(255,252,245,0.80);line-height:1.6}
.byo-confirm-notice{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--radius-lg);background:rgba(250,204,21,0.07);border:1px solid rgba(250,204,21,0.22);text-align:left;width:100%}
.byo-confirm-notice i{color:#d97706;font-size:16px;flex-shrink:0;margin-top:1px}
.byo-confirm-notice span{font-size:12px;font-weight:600;color:rgba(255,252,245,0.75);line-height:1.5}
.byo-confirm-notice[hidden]{display:none!important}
.byo-change-setup-btn{width:100%;padding:14px;background:transparent;color:rgba(255,252,245,0.45);font-size:13px;font-weight:700;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,0.10);cursor:pointer;transition:all .2s;font-family:var(--font);display:flex;align-items:center;justify-content:center;gap:8px;letter-spacing:0.2px}
.byo-change-setup-btn:hover{background:rgba(255,255,255,0.05);color:rgba(255,252,245,0.75)}
.byo-change-setup-btn i{font-size:14px}

#screen-prequiz,#screen-timed-prequiz{background:var(--navy)}
.prequiz-topbar{position:sticky;top:0;z-index:100;background:var(--navy);border-bottom:2px solid var(--accent);padding:0 20px;height:var(--header-h);display:flex;align-items:center;gap:14px;flex-shrink:0}
.prequiz-topbar-label{font-size:16px;font-weight:800;color:var(--cream);letter-spacing:0.3px}
.prequiz-body{flex:1;overflow-y:auto;padding:28px 24px 40px;display:flex;flex-direction:column;gap:24px;background:transparent}
@media(min-width:768px){
  /* Prequiz desktop: dark navy environment matching Weakest Subjects standard */
  #screen-prequiz,#screen-timed-prequiz{background:linear-gradient(135deg,#1c3352 0%,#243f62 45%,#1c3352 100%)}
  #screen-prequiz .prequiz-topbar,#screen-timed-prequiz .prequiz-topbar{
    margin:16px 16px 8px 16px;
    border-radius:var(--radius-xl);
    top:16px;
  }
  .prequiz-body{max-width:1100px;margin:0 auto;width:100%;padding:32px 0 56px;background:transparent;overflow-y:visible;}
}

/* ── Prequiz desktop layout — single column, full width (matches Weakest/Targeted pattern) */
@media(min-width:1024px){
  .prequiz-body{
    max-width:1100px;
    padding:28px 0 56px
  }
}
/* ── Sprint I2a/I2d: Desktop pill-row alignment ─────────────────────────────
   Stretch length / count / type / pressure pill rows evenly across the full
   container width on desktop. Topic pills (#prequiz-topic-opts) are excluded
   so they stay compact and left-aligned, wrapping naturally.
   flex:1 1 auto (not flex:1) uses actual content-width as flex-basis so the
   browser never starts items below their minimum content size.
   flex-wrap:nowrap forces all pills onto one row so the last-row distortion
   problem (one pill stretched full-width) never occurs.                      */
@media(min-width:768px){
  #timed-length-opts,
  #timed-pressure-opts,
  #byo-count-opts,
  #byo-type-opts,
  #byo-diff-opts,
  #byo-timer-opts,
  #byo-duration-opts,
  #weakest-length-opts,
  #unfinished-length-opts,
  #targeted-length-opts{
    flex-wrap:nowrap
  }
  #timed-length-opts .prequiz-opt,
  #timed-pressure-opts .prequiz-opt,
  #byo-count-opts .prequiz-opt,
  #byo-type-opts .prequiz-opt,
  #byo-diff-opts .prequiz-opt,
  #byo-timer-opts .prequiz-opt,
  #byo-duration-opts .prequiz-opt,
  #weakest-length-opts .prequiz-opt,
  #unfinished-length-opts .prequiz-opt,
  #targeted-length-opts .prequiz-opt{
    flex:1 1 auto;
    white-space:nowrap;
    justify-content:center
  }
}

/* === TIMED QUIZ LIVE DISPLAY === */
.timed-live-display{text-align:center;font-size:14px;font-weight:600;color:var(--text-sub);padding:14px 18px;background:rgba(255,132,19,0.06);border:1px solid rgba(255,132,19,0.22);border-radius:var(--radius-md);line-height:1.5;transition:all .2s}
.timed-live-display strong{color:var(--accent);font-weight:900;font-size:17px}

.prequiz-section-label{font-size:13px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-sub);margin-bottom:10px}
.prequiz-opts{display:flex;flex-wrap:nowrap;gap:8px}
.prequiz-opt{padding:9px 16px;border-radius:100px;border:1.5px solid var(--border);background:var(--card);font-family:var(--font);font-size:12px;font-weight:700;color:var(--text-sub);cursor:pointer;transition:all .2s;box-shadow:var(--shadow-card);display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.prequiz-opt i{font-size:14px;flex-shrink:0}
.prequiz-opt:hover{border-color:rgba(255,132,19,0.40);color:var(--accent)}
.prequiz-opt.active{border-color:var(--accent);background:rgba(255,132,19,0.10);color:var(--accent)}
.prequiz-opt.topic-excluded{opacity:0.42;border-color:var(--border)!important;background:var(--card)!important;color:var(--text-muted)!important;cursor:default!important;pointer-events:auto}
.prequiz-opt.topic-excluded:hover{border-color:var(--border)!important;color:var(--text-muted)!important}
.topic-off-badge{font-size:9px;font-weight:800;letter-spacing:0.5px;text-transform:uppercase;background:rgba(255,255,255,0.08);color:var(--text-muted);border-radius:4px;padding:1px 5px;margin-left:2px;flex-shrink:0}
.prequiz-feedback-opts{display:flex;flex-direction:column;gap:10px}
.prequiz-feedback-opt{display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--radius-lg);border:1.5px solid var(--border);background:var(--card);cursor:pointer;transition:all .2s;text-align:left;width:100%;box-shadow:var(--shadow-card)}
.prequiz-feedback-opt:hover{border-color:rgba(255,132,19,0.35)}
.prequiz-feedback-opt.active{border-color:var(--accent);background:rgba(255,132,19,0.06)}
.prequiz-feedback-icon{width:40px;height:40px;border-radius:11px;background:rgba(4,27,53,0.06);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;color:var(--text-muted);transition:background .2s,color .2s}
.prequiz-feedback-opt.active .prequiz-feedback-icon{background:rgba(255,132,19,0.12);color:var(--accent)}
.prequiz-feedback-title{font-size:13px;font-weight:800;color:var(--text-main)}
.prequiz-feedback-desc{font-size:11px;font-weight:600;color:var(--text-sub);margin-top:2px}
/* Selected feedback card — white text + orange icon on all dark pre-quiz screens */
.prequiz-feedback-opt.active .prequiz-feedback-title{color:#ffffff}
.prequiz-feedback-opt.active .prequiz-feedback-desc{color:rgba(255,255,255,0.70)}
.prequiz-feedback-opt.active .prequiz-feedback-icon{background:rgba(249,115,22,0.15);color:#F97316}
/* Scoped reinforcement for Quick 10 and Timed Quiz screens */
#screen-prequiz .prequiz-feedback-opt.active .prequiz-feedback-title,
#screen-timed-prequiz .prequiz-feedback-opt.active .prequiz-feedback-title{color:#ffffff}
#screen-prequiz .prequiz-feedback-opt.active .prequiz-feedback-desc,
#screen-timed-prequiz .prequiz-feedback-opt.active .prequiz-feedback-desc{color:rgba(255,255,255,0.70)}
#screen-prequiz .prequiz-feedback-opt.active .prequiz-feedback-icon,
#screen-timed-prequiz .prequiz-feedback-opt.active .prequiz-feedback-icon{background:rgba(249,115,22,0.15);color:#F97316}
.btn-start-quiz{width:100%;padding:16px;background:var(--accent);color:var(--navy);font-size:15px;font-weight:900;border-radius:var(--radius-lg);border:none;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:9px;letter-spacing:0.3px;box-shadow:0 8px 32px rgba(255,132,19,0.35);margin-top:8px;font-family:var(--font)}
.btn-start-quiz:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:0 12px 40px rgba(255,132,19,0.45)}
.btn-start-quiz i{font-size:20px}

/* === QUIZ SCREEN === */
#screen-quiz,#screen-results,#screen-review,#screen-settings{display:none;flex-direction:column;flex:1;min-height:100vh;min-height:100dvh}
#screen-quiz.active,#screen-results.active,#screen-review.active,#screen-settings.active{display:flex}
.quiz-topbar{position:sticky;top:0;z-index:100;background:var(--navy);border-bottom:2px solid var(--accent);padding:0 20px;height:var(--header-h);display:flex;align-items:center;gap:14px;flex-shrink:0;overflow:visible}
.quiz-back-btn{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);color:rgba(255,252,245,0.70);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;transition:background .2s,color .2s}
.quiz-back-btn:hover{background:rgba(255,132,19,0.15);color:var(--accent)}
.quiz-topbar-meta{flex:1;display:flex;flex-direction:column;gap:5px}
.quiz-topbar-label{font-size:13px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);line-height:1}
/* ── Segmented dashed progress bar (all quiz modes) ───────────────────────── */
.quiz-progress-track,#mock-progress-track{display:flex;gap:1px;align-items:stretch;height:6px;background:none;overflow:visible;flex-shrink:0}
.progress-dash{flex:1 1 0;min-width:0;height:6px;border-radius:2px;background:rgba(255,255,255,0.15);transition:background 0.25s}
.progress-dash.answered{background:#F97316}
.progress-dash.current{background:#F97316;animation:timer-pulse 1.2s ease-in-out infinite}
.quiz-q-counter{font-size:12px;font-weight:800;color:rgba(255,252,245,0.65);white-space:nowrap;flex-shrink:0}

/* === QUIZ PROGRESS COUNTERS === */
/* === QUIZ PROGRESS PILLS (mobile only) === */
.quiz-progress-counters{display:flex;gap:8px;padding:10px 16px 4px;flex-shrink:0}
@media(min-width:768px){.quiz-progress-counters{display:none}}
.quiz-ctr{display:flex;align-items:center;justify-content:center;gap:5px;font-size:11px;font-weight:700;flex:1;padding:8px 6px;border-radius:100px;border:1.5px solid transparent}
.ctr-answered{background:rgba(34,197,94,0.09);border-color:rgba(34,197,94,0.30);color:#16a34a}
.ctr-skipped{background:rgba(245,158,11,0.09);border-color:rgba(245,158,11,0.30);color:#d97706}
.ctr-flagged{background:rgba(124,58,237,0.09);border-color:rgba(124,58,237,0.30);color:#7c3aed}
.quiz-ctr i{font-size:13px;flex-shrink:0;color:inherit}
.quiz-ctr-num{font-size:13px;font-weight:900;color:inherit}
.quiz-ctr-sep{display:none}
/* Skipped + Flagged pills are tappable to enter filter navigation */
.ctr-skipped,.ctr-flagged{cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s}
.ctr-skipped:hover{background:rgba(245,158,11,0.16);border-color:rgba(245,158,11,0.50)}
.ctr-flagged:hover{background:rgba(124,58,237,0.16);border-color:rgba(124,58,237,0.50)}
.quiz-ctr.filter-active.ctr-skipped{background:rgba(245,158,11,0.22);border-color:rgba(245,158,11,0.65);box-shadow:0 0 0 2px rgba(245,158,11,0.18)}
.quiz-ctr.filter-active.ctr-flagged{background:rgba(124,58,237,0.22);border-color:rgba(124,58,237,0.65);box-shadow:0 0 0 2px rgba(124,58,237,0.18)}
/* Desktop right panel — skipped + flagged stat rows are also tappable */
.qrp-stat-row.stat-skipped,.qrp-stat-row.stat-flagged{cursor:pointer;transition:background .15s,border-color .15s}
.qrp-stat-row.stat-skipped:hover{background:rgba(245,158,11,0.10);border-color:rgba(245,158,11,0.30)}
.qrp-stat-row.stat-flagged:hover{background:rgba(124,58,237,0.10);border-color:rgba(124,58,237,0.30)}
.qrp-stat-row.stat-skipped.filter-active{background:rgba(245,158,11,0.15);border-color:rgba(245,158,11,0.45)}
.qrp-stat-row.stat-flagged.filter-active{background:rgba(124,58,237,0.15);border-color:rgba(124,58,237,0.45)}

.quiz-body{flex:1;overflow-y:auto;padding:24px 24px 40px;display:flex;flex-direction:column;gap:16px;background:var(--page)}
@media(min-width:768px){.quiz-body{padding:32px 40px 40px;max-width:none;margin:0;width:100%}}
.quiz-topic-tag{display:none}

/* === QUIZ CONTENT WRAPPER (desktop three-col) === */
.quiz-content-wrapper{flex:1;display:flex;flex-direction:column;overflow:hidden}
@media(min-width:768px){
  /* Left-aligned at 20% of content area (calc(100vw - 240px) * 0.20 = calc(20vw - 48px)) */
  .quiz-content-wrapper{flex-direction:row;height:auto;flex:0 0 auto;min-height:0;align-items:flex-start;justify-content:flex-start;padding:0 24px 20px calc(20vw - 48px);gap:12px}
  /* Default (no right panel): quiz-body fills, locked height */
  .quiz-body{flex:1;max-width:680px;margin:0;height:766px;overflow-y:auto}
  /* Right panel — locked to same explicit height as quiz-body */
  #screen-quiz[data-mode="end"] .quiz-right-panel,
  #screen-quiz[data-mode="instant"] .quiz-right-panel{display:flex;flex:0 0 260px;min-width:260px;flex-shrink:0;border-top:none;padding:24px 18px;margin-left:0;height:766px;overflow-y:auto}
  /* When right panel visible: quiz-body preferred width 680px, can shrink, no auto-margins */
  #screen-quiz[data-mode="end"] .quiz-body,
  #screen-quiz[data-mode="instant"] .quiz-body{flex:0 1 680px;margin:0}
}

/* === DESKTOP QUIZ SCREEN — DARK NAVY ENVIRONMENT + FROSTED GLASS CARDS === */
@media(min-width:768px){
  /* #3 — Lighter premium background (was near-opaque #041B35) */
  #screen-quiz{background:linear-gradient(135deg,#1c3352 0%,#243f62 45%,#1c3352 100%)}
  /* #2 — Progress banner: left-aligned to match panel group offset */
  #screen-quiz .quiz-topbar{
    max-width:952px;
    width:auto;
    margin:16px 16px 8px calc(20vw - 48px);
    border:1.5px solid var(--accent);
    border-bottom:1.5px solid var(--accent);
    border-radius:var(--radius-xl);
    top:16px;
  }
  /* #4 & #5 — Warm orange glow on question window and session progress panel */
  #screen-quiz .quiz-body,
  #screen-quiz .quiz-right-panel{background:rgba(255,252,245,0.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,132,19,0.20);box-shadow:0 0 0 1px rgba(255,132,19,0.12),0 0 32px rgba(255,132,19,0.28),0 0 64px rgba(255,132,19,0.11),inset 0 0 20px rgba(255,132,19,0.07);border-radius:var(--radius-xl)}
  [data-theme="dark"] #screen-quiz .quiz-body,
  [data-theme="dark"] #screen-quiz .quiz-right-panel{background:rgba(255,252,245,0.10);box-shadow:0 0 0 1px rgba(255,132,19,0.16),0 0 32px rgba(255,132,19,0.30),0 0 64px rgba(255,132,19,0.13),inset 0 0 20px rgba(255,132,19,0.09)}
}

/* === QUIZ RIGHT PANEL === */
.quiz-right-panel{display:none;flex-direction:column;gap:20px;background:var(--card);border-top:1px solid var(--border);padding:20px 16px;flex-shrink:0}
@media(min-width:768px){
  .quiz-right-panel{display:flex;width:280px;min-width:280px;flex-shrink:0;border-top:none;overflow-y:auto;padding:28px 20px}
}
.qrp-section-label{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px}
.qrp-stat-row{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius-sm);background:var(--card-alt);border:1px solid var(--border);margin-bottom:6px}
.qrp-stat-row i{font-size:15px;flex-shrink:0}
.qrp-stat-row span{font-size:12px;font-weight:700;color:var(--text-sub);flex:1}
.qrp-stat-num{font-size:16px;font-weight:900;color:var(--text-main)}
.qrp-stat-row.stat-answered i,.qrp-stat-row.stat-answered .qrp-stat-num{color:var(--accent)}
.qrp-stat-row.stat-skipped i,.qrp-stat-row.stat-skipped .qrp-stat-num{color:#b45309}
.qrp-stat-row.stat-flagged i,.qrp-stat-row.stat-flagged .qrp-stat-num{color:#7c3aed}
.qrp-flag-btn{width:100%;padding:11px;background:var(--card-alt);border:1.5px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font);font-size:12px;font-weight:800;color:var(--text-sub);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .2s}
.qrp-flag-btn:hover{border-color:rgba(139,92,246,0.40);color:#7c3aed;background:rgba(139,92,246,0.06)}
.qrp-flag-btn.flagged{border-color:rgba(139,92,246,0.50);color:#7c3aed;background:rgba(139,92,246,0.10)}
.qrp-flag-btn i{font-size:15px}
.quiz-navigator{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.quiz-nav-btn{aspect-ratio:1;border-radius:8px;font-size:11px;font-weight:800;border:1.5px solid var(--border);background:var(--card-alt);color:var(--text-sub);cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;font-family:var(--font)}
@media(min-width:768px){
  .quiz-navigator{grid-template-columns:repeat(8,1fr);gap:4px}
  .quiz-nav-btn{font-size:9px;border-radius:6px}
}
.quiz-nav-btn.current{background:var(--accent);color:var(--navy);border-color:var(--accent)}
.quiz-nav-btn.answered{background:rgba(34,197,94,0.12);color:#16a34a;border-color:rgba(34,197,94,0.40)}
.quiz-nav-btn.skipped{background:rgba(245,158,11,0.12);color:#d97706;border-color:rgba(245,158,11,0.40)}
.quiz-nav-btn.nav-flagged{background:rgba(124,58,237,0.12);color:#7c3aed;border-color:rgba(124,58,237,0.40)}
.quiz-nav-btn:hover:not(.current){border-color:var(--accent)}
/* Instant mode right panel explanation */
.qrp-explanation-box{display:none;background:var(--card-alt);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;font-size:13px;color:var(--text-main);line-height:1.65;animation:fadeIn .3s ease}
.qrp-explanation-box.visible{display:block}
.qrp-explanation-label{font-size:10px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.qrp-explanation-label.correct-lbl{color:#16a34a}
.qrp-explanation-label.wrong-lbl{color:#dc2626}
.qrp-placeholder{text-align:center;padding:32px 16px;color:var(--text-muted);font-size:12px;font-weight:600;line-height:1.6}

/* === QUIZ QUESTION HEADER (flag) === */
.quiz-question-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.quiz-question-text{font-size:16px;font-weight:700;color:var(--text-main);line-height:1.65;flex:1}
.quiz-flag-btn{width:34px;height:34px;border-radius:9px;border:1.5px solid var(--border);background:var(--card);color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;transition:all .2s;cursor:pointer}
.quiz-flag-btn:hover{border-color:rgba(139,92,246,0.40);color:#7c3aed;background:rgba(139,92,246,0.06)}
.quiz-flag-btn.flagged{border-color:rgba(139,92,246,0.50);color:#7c3aed;background:rgba(139,92,246,0.10)}
.quiz-flag-indicator{font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#7c3aed;display:none;align-items:center;gap:4px}
.quiz-flag-indicator.visible{display:flex}
.quiz-flag-indicator i{font-size:12px}

.quiz-choices{display:flex;flex-direction:column;gap:10px}
.quiz-choice{display:flex;align-items:flex-start;gap:13px;padding:14px 15px;background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all .18s;text-align:left;width:100%;color:var(--text-main);box-shadow:var(--shadow-card)}
.quiz-choice:hover:not(.selected):not(:disabled):not(.correct):not(.wrong){background:rgba(178,92,13,0.22);border-color:rgba(178,92,13,0.55)}
.quiz-choice:disabled{cursor:default}
.quiz-choice.selected{background:rgba(178,92,13,0.45);border-color:rgba(178,92,13,0.75)}
.quiz-choice.selected .quiz-choice-letter{background:rgba(178,92,13,0.18);color:var(--accent)}
.quiz-choice.correct{background:rgba(34,197,94,0.08);border-color:rgba(34,197,94,0.50)}
.quiz-choice.wrong{background:rgba(239,68,68,0.07);border-color:rgba(239,68,68,0.40)}
.quiz-choice-letter{font-size:11px;font-weight:900;color:var(--accent);min-width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:rgba(255,132,19,0.10);border-radius:6px;flex-shrink:0;margin-top:1px;transition:background .18s,color .18s}
.quiz-choice.correct .quiz-choice-letter{background:rgba(34,197,94,0.15);color:#16a34a}
.quiz-choice.wrong .quiz-choice-letter{background:rgba(239,68,68,0.15);color:#dc2626}
.quiz-choice-text{font-size:13px;font-weight:600;line-height:1.55;color:var(--text-main);flex:1}
.quiz-choice.selected .quiz-choice-text{color:var(--navy)}
.quiz-choice-icon{margin-left:auto;font-size:18px;flex-shrink:0;margin-top:1px;opacity:0;transition:opacity .2s}
.quiz-choice.correct .quiz-choice-icon,.quiz-choice.wrong .quiz-choice-icon{opacity:1}
.quiz-choice.correct .quiz-choice-icon{color:#16a34a}
.quiz-choice.wrong .quiz-choice-icon{color:#dc2626}
.quiz-explanation{display:none;background:var(--card-alt);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;font-size:13px;color:var(--text-main);line-height:1.65;animation:fadeIn .3s ease}
.quiz-explanation.visible{display:block}
.quiz-explanation-label{font-size:10px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.quiz-explanation-label.correct-lbl{color:#16a34a}
.quiz-explanation-label.wrong-lbl{color:#dc2626}
.quiz-explanation-label i{font-size:14px}

/* === QUIZ NAV ROW (Back + Next) === */
.quiz-nav-row{display:flex;gap:10px;justify-content:flex-end}
.btn-quiz-back-nav{display:none;padding:15px 18px;background:var(--card);color:var(--text-sub);font-size:14px;font-weight:800;border-radius:var(--radius-md);border:1px solid var(--border);cursor:pointer;transition:all .2s;align-items:center;justify-content:center;gap:7px;font-family:var(--font);flex-shrink:0;box-shadow:var(--shadow-card)}
.btn-quiz-back-nav.visible{display:flex}
.btn-quiz-back-nav:hover{background:var(--card-alt);color:var(--text-main)}
.btn-quiz-back-nav i{font-size:16px}
.btn-quiz-next{display:none;padding:15px 28px;background:var(--accent);color:var(--navy);font-size:14px;font-weight:900;letter-spacing:0.3px;border-radius:var(--radius-md);border:none;cursor:pointer;transition:all .2s;align-items:center;justify-content:center;gap:8px;font-family:var(--font);white-space:nowrap}
.btn-quiz-next.visible{display:inline-flex;animation:fadeIn .3s ease}
.btn-quiz-next:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:0 6px 24px rgba(255,132,19,0.35)}
.btn-quiz-next i{font-size:18px}

/* === SUBMIT MODAL === */
.submit-modal{display:none;position:fixed;inset:0;z-index:500;background:rgba(0,0,0,0.45);align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.submit-modal.active{display:flex;animation:fadeIn .2s ease}
.submit-modal-box{background:rgba(255,255,255,0.78);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.6);border-radius:20px;padding:28px 24px;max-width:420px;width:100%;box-shadow:0 8px 32px rgba(0,0,0,0.18);display:flex;flex-direction:column;gap:20px}
.submit-modal-headline{font-size:15px;font-weight:800;color:var(--text-main);line-height:1.55;border-left:3px solid var(--accent);padding-left:14px;font-style:italic}
.submit-modal-clean{font-size:15px;font-weight:700;color:var(--text-main);text-align:center}
.submit-modal-stats-row{display:flex;gap:12px;justify-content:center}
.submit-modal-stat{flex:1;background:var(--card-alt);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 12px;text-align:center;display:flex;flex-direction:column;gap:4px;max-width:120px}
.submit-modal-stat.tappable{cursor:pointer;transition:border-color .18s,box-shadow .18s,background .18s,transform .12s}
.submit-modal-stat.tappable:hover{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,132,19,0.13);background:var(--card)}
.submit-modal-stat.tappable:active{transform:scale(0.96)}
.submit-modal-stat-num{font-size:28px;font-weight:900;color:var(--text-main);line-height:1}
.submit-modal-stat-num.skipped{color:#b45309}
.submit-modal-stat-num.flagged{color:#7c3aed}
.submit-modal-stat-key{font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px}
.submit-modal-actions{display:flex;gap:10px}
.submit-modal-actions .btn-back-dash{flex:1}
.submit-modal-actions .btn-retry{flex:1}
.email-confirm-box{text-align:center;gap:16px}
.email-confirm-icon{font-size:52px;color:var(--accent)}
.email-confirm-heading{font-size:18px;font-weight:900;color:var(--text-main)}
.email-confirm-body{font-size:14px;font-weight:500;color:var(--text-muted);line-height:1.6;margin:0}

/* === EXHAUSTED TOPIC MODAL === */
.exhausted-modal-box{align-items:center;text-align:center;gap:16px}
.exhausted-modal-icon{width:60px;height:60px;border-radius:50%;background:rgba(255,132,19,0.12);border:2px solid rgba(255,132,19,0.35);display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--accent);flex-shrink:0}
#exhausted-modal-headline{border-left:none;padding-left:0;text-align:center;font-size:17px;font-weight:900;letter-spacing:0.2px}
.exhausted-modal-body{font-size:14px;font-weight:500;color:var(--text-muted);line-height:1.6;max-width:320px}
.exhausted-modal-topic-name{color:var(--accent);font-weight:800;display:inline}
.exhausted-modal-actions{flex-direction:column;gap:8px}
.exhausted-modal-actions .btn-back-dash,.exhausted-modal-actions .btn-retry{width:100%}
@media(min-width:400px){.exhausted-modal-actions{flex-direction:row}}

/* === RESULTS SCREEN === */
.results-topbar{position:sticky;top:0;z-index:100;background:var(--navy);border-bottom:2px solid var(--accent);padding:0 20px;height:var(--header-h);display:flex;align-items:center;flex-shrink:0}
.results-topbar-label{font-size:16px;font-weight:800;color:var(--cream);letter-spacing:0.3px}
.results-body{flex:1;overflow-y:auto;padding:32px 24px 40px;display:flex;flex-direction:column;align-items:center;gap:22px;background:var(--page)}
@media(min-width:768px){.results-body{padding:48px 40px;max-width:520px;margin:0 auto;width:100%}}
.results-score-ring{width:130px;height:130px;border-radius:50%;background:conic-gradient(#F97316 var(--score-fill,0%), rgba(255,132,19,0.12) var(--score-fill,0%));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:0 0 40px rgba(255,132,19,0.18);position:relative}
.results-score-ring::before{content:'';position:absolute;inset:9px;border-radius:50%;background:#0a1228;z-index:0}
.results-score-ring>*{position:relative;z-index:1}
.results-score-num{font-size:32px;font-weight:900;color:var(--text-main);line-height:1}
.results-score-denom{font-size:13px;font-weight:700;color:var(--text-sub)}
.results-grade-pill{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;padding:5px 16px;border-radius:100px}
.results-msg{text-align:center;font-size:16px;font-weight:700;color:var(--text-main);line-height:1.65;max-width:340px}
.results-stats{display:flex;gap:12px;width:100%}
.results-stat-card{flex:1;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px 12px;text-align:center;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow-card)}
.results-stat-val{font-size:26px;font-weight:900;color:var(--text-main);line-height:1}
.results-stat-key{font-size:10px;font-weight:700;color:var(--text-muted);letter-spacing:0.5px;text-transform:uppercase}
.results-actions{display:flex;flex-direction:column;gap:10px;width:100%}
.btn-retry{width:100%;padding:15px;background:var(--accent);color:var(--navy);font-size:14px;font-weight:900;border-radius:var(--radius-md);border:none;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;letter-spacing:0.3px;font-family:var(--font)}
.btn-retry:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:0 6px 24px rgba(255,132,19,0.35)}
.btn-back-dash{width:100%;padding:15px;background:var(--card);color:var(--text-sub);font-size:14px;font-weight:800;border-radius:var(--radius-md);border:1px solid var(--border);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;letter-spacing:0.3px;box-shadow:var(--shadow-card);font-family:var(--font)}
.btn-back-dash:hover{background:var(--card-alt);color:var(--text-main)}
.btn-retry i,.btn-back-dash i{font-size:18px}

/* === REVIEW SCREEN (consolidated end) === */
.review-body{flex:1;overflow-y:auto;padding:28px 24px 40px;display:flex;flex-direction:column;gap:20px;background:var(--page)}
@media(min-width:768px){.review-body{padding:40px 40px;max-width:760px;margin:0 auto;width:100%}}
/* Large score hero */
.review-score-hero{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 20px 24px;background:rgba(10,18,40,0.85);border:1px solid rgba(249,115,22,0.4);border-radius:var(--radius-xl);box-shadow:0 0 24px rgba(249,115,22,0.15);text-align:center}
.review-score-ring-lg{width:120px;height:120px;border-radius:50%;border:4px solid var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(255,132,19,0.07);box-shadow:0 0 48px rgba(255,132,19,0.15)}
.review-ring-hole{background:#0a1228 !important}
.review-score-big{font-size:52px;font-weight:900;color:#F97316;line-height:1}
.review-score-big-denom{font-size:14px;font-weight:700;color:rgba(255,255,255,0.65);margin-top:2px}
.review-grade-pill{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;padding:5px 18px;border-radius:100px;background:rgba(249,115,22,0.18) !important;color:#F97316 !important;border:1px solid rgba(249,115,22,0.45) !important}
.review-tgg-voice{font-size:15px;font-weight:700;color:rgba(255,255,255,0.85);line-height:1.65;max-width:360px}
.review-filter-tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.review-tab{padding:8px 16px;border-radius:100px;border:1px solid rgba(249,115,22,0.3);background:#0a1228;font-family:var(--font);font-size:12px;font-weight:700;color:#ffffff;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px;box-shadow:0 0 24px rgba(249,115,22,0.15)}
.review-tab:hover{border-color:rgba(255,132,19,0.40);color:var(--accent)}
.review-tab.active{border-color:var(--accent);background:rgba(255,132,19,0.10);color:var(--accent)}
.review-tab-count{background:rgba(249,115,22,0.15);color:#ffffff;border-radius:100px;padding:1px 7px;font-size:10px;font-weight:900}
.review-tab.active .review-tab-count{background:var(--accent);color:var(--navy)}
.review-cards-section{display:none}
.review-cards-section.active{display:block}
.review-cards{display:flex;flex-direction:column;gap:10px}
.review-q-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);cursor:pointer;transition:border-color .2s}
.review-q-card:hover{border-color:rgba(255,132,19,0.35)}
.review-q-card.correct-card{border-left:3px solid rgba(34,197,94,0.50)}
.review-q-card.wrong-card{border-left:3px solid rgba(239,68,68,0.45)}
.review-q-card.skipped-card{border-left:3px solid rgba(180,83,9,0.45)}
.review-q-card.flagged-card{border-left:3px solid rgba(124,58,237,0.45)}
.review-q-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;gap:10px}
.review-q-num{font-size:10px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);flex-shrink:0}
.review-q-status{font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:3px 9px;border-radius:100px;flex-shrink:0}
.status-correct{background:rgba(34,197,94,0.10);color:#16a34a}
.status-wrong{background:rgba(239,68,68,0.10);color:#dc2626}
.status-skipped{background:rgba(180,83,9,0.10);color:#b45309}
.status-flagged{background:rgba(124,58,237,0.10);color:#7c3aed}
.review-q-text{font-size:13px;font-weight:600;color:var(--text-main);line-height:1.55;flex:1}
.review-q-expand-icon{font-size:16px;color:var(--text-muted);transition:transform .25s;flex-shrink:0}
.review-q-card.expanded .review-q-expand-icon{transform:rotate(180deg)}
.review-q-detail{display:none;border-top:1px solid var(--border);padding:14px 16px;flex-direction:column;gap:8px;background:var(--card-alt)}
.review-q-card.expanded .review-q-detail{display:flex}
.review-choice-row{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--card);font-size:12px;font-weight:600;color:var(--text-main);line-height:1.45}
.review-choice-row.correct-ans{background:rgba(34,197,94,0.08);border-color:rgba(34,197,94,0.40)}
.review-choice-row.wrong-ans{background:rgba(239,68,68,0.07);border-color:rgba(239,68,68,0.35)}
.review-choice-ltr{font-size:10px;font-weight:900;color:var(--accent);min-width:18px;flex-shrink:0}
.review-choice-row.correct-ans .review-choice-ltr{color:#16a34a}
.review-choice-row.wrong-ans .review-choice-ltr{color:#dc2626}
.review-choice-your-ans{margin-left:auto;font-size:9px;font-weight:800;letter-spacing:0.5px;text-transform:uppercase;color:#ef4444;flex-shrink:0;align-self:center}
.review-explanation{font-size:12px;color:var(--text-main);line-height:1.6;padding:10px 12px;background:rgba(34,197,94,0.06);border:1px solid rgba(34,197,94,0.18);border-radius:var(--radius-sm)}
.review-explanation strong{color:#15803d}
.review-exp-topic-header{font-size:11px;font-weight:800;color:#F97316;letter-spacing:0.4px;margin-bottom:12px;line-height:1.4}
.review-exp-section{margin-top:10px}
.review-exp-label{font-size:10px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:4px;color:var(--text-muted)}
.review-exp-label.green-lbl{color:#15803d}
.review-exp-label.orange-lbl{color:#F97316}
.review-exp-body{font-size:12px;color:var(--text-main);line-height:1.65}
.review-exp-link{color:#F97316;word-break:break-all;font-size:11px}
.review-exp-link:hover{text-decoration:underline}
.review-actions{display:flex;flex-direction:column;gap:10px;padding-top:4px}

/* === PERFORMANCE ASSESSMENT SECTION === */
.perf-section{display:flex;flex-direction:column;gap:16px}
.perf-summary{font-size:14px;font-weight:600;color:#ffffff;line-height:1.75;text-align:center;max-width:560px;margin:0 auto;background:rgba(10,18,40,0.85);border:1px solid rgba(249,115,22,0.2);border-radius:12px;padding:14px 18px}
.perf-debrief{font-size:12px;font-weight:700;color:rgba(249,115,22,0.9);display:flex;align-items:center;justify-content:center;gap:7px;text-align:center}
.perf-cards-row{display:flex;gap:12px;flex-wrap:wrap}
.perf-card{flex:1;min-width:220px;background:rgba(10,18,40,0.85);border:1px solid rgba(249,115,22,0.3);box-shadow:0 0 20px rgba(249,115,22,0.1);border-radius:16px;padding:20px 16px;display:flex;flex-direction:column;gap:16px}
.perf-card-title{font-size:11px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:#F97316;text-align:center}
.perf-circles-grid{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.perf-circles-row{display:flex;gap:28px;justify-content:center;align-items:flex-start}
.perf-circle-wrap{display:flex;flex-direction:column;align-items:center;gap:7px}
.perf-circle{width:58px;height:58px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.perf-circle-hole{position:absolute;inset:7px;border-radius:50%;background:#0a1228;z-index:0}
.perf-circle-pct{font-size:11px;font-weight:900;color:#F97316;position:relative;z-index:1;line-height:1}
.perf-circle-name{font-size:10px;font-weight:700;color:rgba(255,255,255,0.75);text-align:center;max-width:62px;line-height:1.3}

/* === SETTINGS SCREEN === */
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.settings-row-label{font-size:14px;font-weight:700;color:var(--text-main)}
.toggle-switch{width:48px;height:26px;border-radius:100px;background:var(--border);border:none;cursor:pointer;position:relative;transition:background .25s;flex-shrink:0;padding:0}
.toggle-switch[aria-checked="true"]{background:var(--accent)}
.toggle-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .25s;display:block;box-shadow:0 1px 4px rgba(0,0,0,0.2)}
.toggle-switch[aria-checked="true"] .toggle-thumb{transform:translateX(22px)}
.accent-swatches{display:flex;flex-wrap:wrap;gap:10px;padding:16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.accent-swatch{width:38px;height:38px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:transform .2s,border-color .2s;position:relative}
.accent-swatch:hover{transform:scale(1.12)}
.accent-swatch.active{border-color:var(--text-main);transform:scale(1.08)}
.accent-swatch.active::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--text-main);opacity:0.35}

/* === SETTINGS: TOPIC PREFERENCES === */
.settings-topic-prefs-desc{font-size:12px;font-weight:500;color:var(--text-muted);line-height:1.55;margin-bottom:12px}
.settings-topic-list{display:flex;flex-direction:column;gap:8px}
.settings-topic-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.settings-topic-row-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.settings-topic-name{font-size:14px;font-weight:700;color:var(--text-main);white-space:nowrap}
.tpref-badge{font-size:10px;font-weight:800;letter-spacing:0.4px;text-transform:uppercase;border-radius:100px;padding:2px 8px;flex-shrink:0}
.tpref-badge-active{background:rgba(34,197,94,0.12);color:#22c55e}
.tpref-badge-excluded{background:rgba(239,68,68,0.12);color:#ef4444}
.tpref-badge-recycled{background:rgba(255,132,19,0.12);color:var(--accent)}
.tpref-btn{padding:7px 13px;border-radius:100px;border:1.5px solid var(--border);background:var(--card);font-family:var(--font);font-size:11px;font-weight:700;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;flex-shrink:0}
.tpref-btn i{font-size:13px}
.tpref-btn-exclude{color:#ef4444;border-color:rgba(239,68,68,0.25)}
.tpref-btn-exclude:hover{background:rgba(239,68,68,0.08);border-color:#ef4444}
.tpref-btn-enable{color:#22c55e;border-color:rgba(34,197,94,0.25)}
.tpref-btn-enable:hover{background:rgba(34,197,94,0.08);border-color:#22c55e}

/* === SHRM PULSE (mobile-only section) === */
.shrm-pulse-mobile{display:block}
@media(min-width:768px){.shrm-pulse-mobile{display:none}}
.shrm-news-desktop-section{display:none}
@media(min-width:768px){.shrm-news-desktop-section{display:block}}
.shrm-pulse-heading{font-size:20px;font-weight:900;color:var(--text-main);letter-spacing:-0.2px;line-height:1.2}

/* === SHRM NEWS === */
.shrm-news-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:border-color .2s}
.shrm-pulse-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,0.8);vertical-align:middle;position:relative;top:-2px;margin-left:7px;animation:shrmPulse 1.5s ease-in-out infinite;flex-shrink:0}
@keyframes shrmPulse{0%,100%{transform:scale(1);box-shadow:0 0 6px rgba(34,197,94,0.8)}50%{transform:scale(1.25);box-shadow:0 0 10px rgba(34,197,94,1)}}
.shrm-news-card:hover{border-color:rgba(255,132,19,0.30)}
.shrm-news-item{display:flex;flex-direction:column;gap:5px;padding:14px 16px;border-bottom:1px solid var(--border);cursor:default;transition:background .15s}
.shrm-news-item-link{text-decoration:none;color:inherit;cursor:pointer}
.shrm-news-item:last-child{border-bottom:none}
.shrm-news-item:hover{background:var(--card-alt)}
.shrm-news-headline{font-size:13px;font-weight:700;color:var(--text-main);line-height:1.5}
.shrm-news-meta{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;color:var(--text-muted)}
.shrm-news-source{color:var(--accent)}
.shrm-news-sep{width:3px;height:3px;border-radius:50%;background:var(--border)}
.shrm-news-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:28px 16px;font-size:13px;font-weight:600;color:var(--text-muted)}
.shrm-news-loading-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:newsPulse 1.2s ease-in-out infinite}
.shrm-news-loading-dot:nth-child(2){animation-delay:.2s}
.shrm-news-loading-dot:nth-child(3){animation-delay:.4s}
@keyframes newsPulse{0%,80%,100%{opacity:.2}40%{opacity:1}}
.shrm-news-error{padding:20px 16px;font-size:13px;font-weight:600;color:var(--text-muted);text-align:center}
.shrm-news-refresh{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:var(--text-muted);border:none;background:none;cursor:pointer;padding:0;transition:color .2s;font-family:var(--font)}
.shrm-news-refresh:hover{color:var(--accent)}
.shrm-news-refresh i{font-size:13px}

/* === UTILITY === */
.fade-in{animation:fadeIn .5s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(4,27,53,0.12);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(4,27,53,0.20)}

/* ══ MOBILE STREAK STRIP ══════════════════════════════════════════════════════ */
.mob-streak-wrap{display:block}
@media(min-width:768px){.mob-streak-wrap{display:none}}
.mob-streak-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:12px 14px 14px;box-shadow:var(--shadow-card);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:border-color .2s}
.mob-streak-card:active{border-color:rgba(255,132,19,0.4)}
.mob-streak-row{display:flex;flex-direction:column;gap:5px}
.mob-streak-labels{display:flex}
.mob-streak-circles{display:flex;position:relative}
.mob-streak-label{flex:1;text-align:center;font-size:8px;font-weight:700;color:var(--text-sub);text-transform:uppercase;line-height:1;padding-bottom:2px}
.mob-streak-slot{flex:1;display:flex;justify-content:center;position:relative}
/* Connector bridges — drawn from slot center outward so they meet at slot edges */
.mob-streak-slot.connects-right::after{content:'';position:absolute;top:50%;left:50%;right:0;height:3px;background:#FF8413;transform:translateY(-50%);z-index:0;border-radius:0}
.mob-streak-slot.connects-left::before{content:'';position:absolute;top:50%;left:0;right:50%;height:3px;background:#FF8413;transform:translateY(-50%);z-index:0;border-radius:0}
.mob-streak-circle{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.06);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:rgba(255,252,245,0.3);position:relative;z-index:1;transition:background .2s,border-color .2s,box-shadow .2s}
.mob-streak-circle.studied{background:#FF8413;border-color:#FF8413;color:#fff;box-shadow:0 0 8px rgba(255,132,19,0.50)}
/* will-change:opacity promotes this element to its own GPU compositing layer.
   Static box-shadow below is paint-once; the animation only changes opacity. */
.mob-streak-circle.today-teal{background:#FF9B3C;border-color:#FF9B3C;color:#041B35;box-shadow:0 0 0 3px rgba(255,155,60,0.25),0 0 14px rgba(255,132,19,0.55);animation:orange-pulse 2.2s ease-in-out infinite;will-change:opacity}
/* SPRINT C2 — Root-cause fix for sidebar pulsing.
   Previously this @keyframes animated BOTH opacity AND box-shadow.
   box-shadow is NOT GPU-compositable: changing it every animation frame
   (~60fps) forces a CPU repaint of the entire sidebar compositing layer,
   making all four sidebar cards pulse in unison.
   Fix: animate opacity ONLY. Opacity is GPU-compositable (no repaint).
   The glowing box-shadow appearance is preserved as a static property on
   the element itself — it paints once when the element is created. */
@keyframes orange-pulse{0%,100%{opacity:1}50%{opacity:0.72}}
.mob-streak-tap-hint{font-size:9px;font-weight:700;color:rgba(255,255,255,0.25);text-align:center;margin-top:8px;letter-spacing:0.5px}

/* ══ MONTH OVERLAY ════════════════════════════════════════════════════════════ */
.mob-month-overlay{position:fixed;inset:0;z-index:600;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;opacity:0;transition:opacity .3s ease}
.mob-month-overlay.open{pointer-events:all;opacity:1}
.mob-month-backdrop{position:absolute;inset:0;background:rgba(4,27,53,0.60);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.mob-month-sheet{position:relative;width:100%;max-width:480px;background:var(--navy);border-radius:24px 24px 0 0;padding:22px 20px calc(env(safe-area-inset-bottom) + 32px);border-top:2px solid var(--accent);box-shadow:0 -12px 48px rgba(0,0,0,0.45);transform:translateY(100%);transition:transform .38s cubic-bezier(0.32,1.26,0.58,1)}
.mob-month-overlay.open .mob-month-sheet{transform:translateY(0)}
.mob-month-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.mob-month-title{font-size:17px;font-weight:900;color:var(--cream);letter-spacing:0.2px;margin-bottom:4px}
.mob-month-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#8b5cf6;background:rgba(139,92,246,0.12);padding:4px 10px;border-radius:100px;border:1px solid rgba(139,92,246,0.25)}
.mob-month-close{flex-shrink:0;width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);color:rgba(255,252,245,0.7);display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;transition:background .2s;-webkit-tap-highlight-color:transparent}
.mob-month-close:active{background:rgba(255,255,255,0.14)}
.mob-month-day-headers{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:8px}
.mob-month-day-header{font-size:9px;font-weight:800;color:rgba(255,252,245,0.30);text-align:center;text-transform:uppercase;padding:4px 0;letter-spacing:0.5px}
.mob-month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.mob-month-cell{aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:rgba(255,252,245,0.22);background:rgba(255,255,255,0.03);border:1.5px solid transparent;transition:background .2s}
.mob-month-cell.in-month{color:rgba(255,252,245,0.45)}
.mob-month-cell.studied{background:#FF8413;color:#fff;border-color:#FF8413;box-shadow:0 0 8px rgba(255,132,19,0.45)}
.mob-month-cell.today-cell{background:#FF9B3C;color:#041B35;border-color:#FF9B3C;font-weight:900;box-shadow:0 0 0 3px rgba(255,155,60,0.25),0 0 14px rgba(255,132,19,0.55);animation:orange-pulse 2.2s ease-in-out infinite;will-change:opacity}
.mob-month-cell.empty{background:transparent;border-color:transparent;color:transparent}

/* ══ COACH TGG — FLOATING BUTTON ════════════════════════════════════════════ */
@keyframes coach-glow{
  0%,100%{box-shadow:0 4px 20px rgba(255,132,19,0.45),0 0 0 0 rgba(255,132,19,0.08)}
  50%{box-shadow:0 6px 32px rgba(255,132,19,0.70),0 0 0 8px rgba(255,132,19,0)}
}
.coach-btn{
  display:none;position:fixed;z-index:300;cursor:pointer;
  background:var(--accent);color:#fff;border:none;
  border-radius:100px;padding:10px 18px 10px 12px;
  align-items:center;gap:10px;font-family:var(--font);
  animation:coach-glow 2.6s ease-in-out infinite;
  transition:opacity .2s,transform .2s;
  /* Mobile: above bottom nav, bottom-right */
  bottom:calc(var(--bottom-nav-h) + 12px);right:16px;
}
.coach-btn.coach-visible{display:flex}
.coach-btn:hover{transform:scale(1.03)}
.coach-btn-icon{font-size:22px;display:flex;flex-shrink:0}
.coach-btn-text{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1}
.coach-btn-label{font-size:13px;font-weight:800;letter-spacing:0.2px}
.coach-btn-powered{font-size:9px;font-weight:600;opacity:0.72;letter-spacing:0.4px}
/* Desktop: vertically centered in quiz body area (88px topbar area + 383px = halfway in 766px body) */
@media(min-width:768px){
  .coach-btn{
    bottom:auto;right:20px;
    top:471px;transform:translateY(-50%);
  }
  .coach-btn:hover{transform:translateY(calc(-50% - 2px))}
}

/* ══ COACH TGG — BACKDROP (mobile only) ═════════════════════════════════════ */
.coach-backdrop{
  position:fixed;inset:0;z-index:305;
  background:rgba(4,27,53,0.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,visibility 0s .3s;
}
.coach-backdrop.coach-open{
  opacity:1;visibility:visible;pointer-events:all;
  transition:opacity .3s ease,visibility 0s 0s;
}
@media(min-width:768px){.coach-backdrop{display:none!important}}

/* ══ COACH TGG — PANEL ═══════════════════════════════════════════════════════ */
.coach-panel{
  display:flex;flex-direction:column;position:fixed;z-index:310;
  visibility:hidden;pointer-events:none;
  /* Mobile: bottom sheet */
  bottom:0;left:0;right:0;height:72vh;max-height:520px;
  border-radius:24px 24px 0 0;
  background:var(--card);
  border:1px solid rgba(255,132,19,0.22);
  box-shadow:0 -8px 40px rgba(255,132,19,0.22),0 0 0 1px rgba(255,132,19,0.10);
  transform:translateY(calc(100% + 20px));
  transition:transform .38s cubic-bezier(0.32,1.26,0.58,1),visibility 0s .38s;
}
.coach-panel.coach-open{
  visibility:visible;pointer-events:all;transform:translateY(0);
  transition:transform .38s cubic-bezier(0.32,1.26,0.58,1),visibility 0s 0s;
}
/* Desktop: right-side panel matching quiz body height */
@media(min-width:768px){
  .coach-panel{
    bottom:auto;left:auto;top:88px;right:0;
    height:766px;width:380px;max-height:none;
    border-radius:var(--radius-xl) 0 0 var(--radius-xl);
    background:rgba(255,252,245,0.88);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,132,19,0.20);
    box-shadow:0 0 0 1px rgba(255,132,19,0.12),0 0 32px rgba(255,132,19,0.28),0 0 64px rgba(255,132,19,0.11),inset 0 0 20px rgba(255,132,19,0.07);
    transform:translateX(calc(100% + 20px));
    transition:transform .38s cubic-bezier(0.32,1.26,0.58,1),visibility 0s .38s;
  }
  .coach-panel.coach-open{transform:translateX(0);transition:transform .38s cubic-bezier(0.32,1.26,0.58,1),visibility 0s 0s}
  [data-theme="dark"] .coach-panel{
    background:rgba(255,252,245,0.10);
    box-shadow:0 0 0 1px rgba(255,132,19,0.16),0 0 32px rgba(255,132,19,0.30),0 0 64px rgba(255,132,19,0.13),inset 0 0 20px rgba(255,132,19,0.09);
  }
}
/* Panel header */
.coach-panel-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 12px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.coach-panel-title{
  display:flex;align-items:center;gap:9px;
  font-size:14px;font-weight:800;color:var(--text-main);letter-spacing:0.2px;
}
.coach-panel-title i{font-size:20px;color:var(--accent)}
.coach-close-btn{
  width:30px;height:30px;border-radius:8px;
  background:rgba(4,27,53,0.06);border:1px solid var(--border);
  color:var(--text-muted);display:flex;align-items:center;justify-content:center;
  font-size:16px;cursor:pointer;flex-shrink:0;transition:background .2s,color .2s;
}
.coach-close-btn:hover{background:rgba(255,132,19,0.10);color:var(--accent)}
/* Messages area */
.coach-messages{
  flex:1;overflow-y:auto;padding:14px 12px;
  display:flex;flex-direction:column;gap:10px;
}
.coach-msg{display:flex;flex-direction:column;gap:3px;max-width:92%}
.coach-msg-name{
  font-size:10px;font-weight:800;letter-spacing:0.8px;text-transform:uppercase;
  color:var(--text-muted);padding:0 3px;
}
.coach-msg-bubble{
  padding:9px 12px;font-size:13px;line-height:1.6;color:var(--text-main);
  border-radius:4px 13px 13px 13px;
}
.coach-msg.tgg .coach-msg-name{color:var(--accent)}
.coach-msg.tgg .coach-msg-bubble{background:rgba(255,132,19,0.09);border:1px solid rgba(255,132,19,0.18)}
.coach-msg.user{align-items:flex-end;align-self:flex-end}
.coach-msg.user .coach-msg-bubble{
  background:var(--accent);color:#fff;border-radius:13px 13px 4px 13px;
}
.coach-msg.user .coach-msg-name{color:var(--text-muted)}
/* Typing indicator */
.coach-typing-wrap{
  display:flex;align-items:center;gap:5px;
  padding:10px 12px;background:rgba(255,132,19,0.09);
  border:1px solid rgba(255,132,19,0.18);border-radius:4px 13px 13px 13px;
  width:fit-content;
}
.coach-typing-dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  animation:coach-typing-anim 1.2s ease-in-out infinite;
}
.coach-typing-dot:nth-child(2){animation-delay:.2s}
.coach-typing-dot:nth-child(3){animation-delay:.4s}
@keyframes coach-typing-anim{0%,80%,100%{opacity:.25;transform:scale(0.7)}40%{opacity:1;transform:scale(1)}}
/* Input area */
.coach-input-wrap{
  padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 10px);
  border-top:1px solid var(--border);flex-shrink:0;
}
.coach-input-row{display:flex;gap:8px;align-items:flex-end}
.coach-input{
  flex:1;padding:9px 12px;border:1px solid var(--border);
  border-radius:var(--radius-md);background:var(--card-alt);
  color:var(--text-main);font-size:13px;font-family:var(--font);
  resize:none;max-height:80px;line-height:1.5;
  transition:border-color .2s;overflow-y:auto;
}
.coach-input:focus{outline:none;border-color:rgba(255,132,19,0.45)}
.coach-send-btn{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:var(--accent);color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:17px;
  transition:background .2s,transform .15s;
}
.coach-send-btn:hover{background:#e67510;transform:scale(1.05)}
.coach-send-btn:disabled{opacity:0.45;cursor:not-allowed;transform:none}
.coach-powered-note{
  font-size:10px;color:var(--text-muted);text-align:center;
  margin-top:6px;font-weight:600;letter-spacing:0.3px;
}

/* ══ MOBILE WELCOME (mobile-order duplicate — hidden on desktop) ══════════════ */
.mob-welcome-section{display:block;margin-bottom:0}
@media(min-width:768px){.mob-welcome-section{display:none}}
@media(max-width:767px){.dash-col-left > .welcome-card{display:none}}

/* ══ MOBILE EXAM COUNTDOWN CARD ══════════════════════════════════════════════ */
/* ── Mobile Time Row (Exam Countdown + Study Time side by side) ── */
.dashboard-time-row{display:flex;gap:12px}
.dashboard-time-row>.mob-exam-cd-card,.dashboard-time-row>.mob-studytime-card{flex:1;min-width:0}
@media(min-width:768px){.dashboard-time-row{display:block}}

/* ── Mobile Study Time Card ── */
.mob-studytime-card{background:var(--card);border:1px solid rgba(255,132,19,0.30);border-radius:var(--radius-xl);padding:16px;box-shadow:var(--shadow-card)}
@media(min-width:768px){.mob-studytime-card{display:none}}
.mob-studytime-inner{display:flex;align-items:center;gap:14px}
.mob-studytime-icon{width:44px;height:44px;border-radius:12px;background:rgba(255,132,19,0.12);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.mob-studytime-body{flex:1;min-width:0}
.mob-studytime-num{font-size:32px;font-weight:900;color:var(--accent);line-height:1}
.mob-studytime-label{font-size:11px;font-weight:700;color:var(--text-sub);text-transform:uppercase;letter-spacing:0.5px;margin-top:2px}
.mob-studytime-sub{font-size:12px;color:var(--text-muted);margin-top:3px}

.mob-exam-cd-card{display:block;background:var(--card);border:1px solid rgba(255,132,19,0.30);border-radius:var(--radius-xl);padding:16px;box-shadow:var(--shadow-card);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .2s,box-shadow .2s}
.mob-exam-cd-card:active{border-color:rgba(255,132,19,0.55);box-shadow:0 0 20px rgba(255,132,19,0.15)}
@media(min-width:768px){.mob-exam-cd-card{display:none}}
.mob-exam-cd-inner{display:flex;align-items:center;gap:14px}
.mob-exam-cd-icon{width:44px;height:44px;border-radius:12px;background:rgba(255,132,19,0.12);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.mob-exam-cd-body{flex:1;min-width:0}
.mob-exam-cd-num{font-size:32px;font-weight:900;color:var(--accent);line-height:1}
.mob-exam-cd-label{font-size:11px;font-weight:700;color:var(--text-sub);text-transform:uppercase;letter-spacing:0.5px;margin-top:2px}
.mob-exam-cd-sub{font-size:12px;color:var(--text-muted);margin-top:3px}
.mob-exam-cd-chevron{color:var(--text-muted);font-size:18px;flex-shrink:0}
.mob-exam-date-input{display:none;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.mob-exam-date-input.visible{display:block}
.mob-exam-date-input label{font-size:11px;font-weight:700;color:var(--text-sub);text-transform:uppercase;letter-spacing:0.5px;display:block;margin-bottom:6px}
.mob-exam-date-row{display:flex;gap:8px}
.mob-exam-date-row input[type="date"]{flex:1;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card-alt);color:var(--text-main);font-size:14px;font-family:inherit}
.mob-exam-date-row .btn-save-mob-exam{padding:9px 16px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
/* ── Timed Quiz: horizontal progress bar ─────────────────────────────────── */
@keyframes timer-pulse{0%,100%{opacity:1}50%{opacity:0.5}}
/* ── Timed Quiz: horizontal timer bar — green → amber → red urgency ──────── */
#quiz-timer-bar-wrap{height:6px;width:100%;background:rgba(0,0,0,0.08);overflow:hidden;flex-shrink:0}
#quiz-timer-bar-fill{height:6px;width:100%;background:#16A34A;transition:width 0.9s linear,background 0.3s ease;transform-origin:left}
#quiz-timer-bar-wrap.timer-amber #quiz-timer-bar-fill{background:#F59E0B}
#quiz-timer-bar-wrap.timer-red   #quiz-timer-bar-fill{background:#DC2626}
/* ── Timed Quiz: topbar numeric countdown pill (mobile + desktop) ──────────── */
.quiz-timer-pill{display:none;align-items:center;justify-content:center;min-width:64px;width:64px;height:28px;padding:0 8px;border-radius:100px;background:rgba(22,163,74,0.10);border:1.5px solid #16A34A;color:#16A34A;font-weight:800;font-size:13px;font-family:var(--font);font-variant-numeric:tabular-nums;flex-shrink:0;letter-spacing:0;line-height:1;transition:border-color .3s,color .3s,background .3s;text-align:center}
.quiz-timer-pill.timer-amber{border-color:#F59E0B;color:#F59E0B;background:rgba(245,158,11,0.10)}
.quiz-timer-pill.timer-red{border-color:#DC2626;color:#DC2626;background:rgba(220,38,38,0.08);animation:timer-pulse 0.8s ease-in-out infinite}

/* ══ BEAST MODE PRE-ENTRY SCREEN ════════════════════════════════════════════ */
#screen-beast-prequiz{background:var(--navy)}
@media(min-width:768px){
  #screen-beast-prequiz{background:linear-gradient(135deg,#1c3352 0%,#243f62 45%,#1c3352 100%)}
  #screen-beast-prequiz .prequiz-topbar{margin:16px 16px 8px 16px;border:1.5px solid rgba(220,38,38,0.45);border-bottom:1.5px solid rgba(220,38,38,0.45);border-radius:var(--radius-xl);top:16px}
}

/* ── Beast body — centered scroll container ──────────────────────────────── */
.beast-prequiz-body{flex:1;overflow-y:auto;padding:32px 24px 56px;display:flex;flex-direction:column;align-items:center;gap:24px;background:transparent}
@media(min-width:768px){
  .beast-prequiz-body{max-width:1100px;width:100%;margin:0 auto;padding:40px 0 56px;overflow-y:visible}
}

/* ── Skull badge ──────────────────────────────────────────────────────────── */
@keyframes beast-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,0.40),0 0 20px rgba(220,38,38,0.20)}
  50%{box-shadow:0 0 0 10px rgba(220,38,38,0),0 0 44px rgba(220,38,38,0.55)}
}
.beast-skull-badge{width:90px;height:90px;border-radius:50%;background:#0a0f1a;border:2px solid rgba(220,38,38,0.40);display:flex;align-items:center;justify-content:center;flex-shrink:0;animation:beast-pulse 2.2s ease-in-out infinite}
.beast-skull-badge i{font-size:44px;color:#ef4444}

/* ── Title block ─────────────────────────────────────────────────────────── */
.beast-title-block{text-align:center;display:flex;flex-direction:column;gap:8px;width:100%}
.beast-eyebrow{font-size:10px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:rgba(220,38,38,0.70)}
.beast-title{font-size:40px;font-weight:900;color:#fff;letter-spacing:-0.5px;line-height:1.1}
.beast-subtitle{font-size:14px;font-weight:600;color:rgba(255,252,245,0.65);line-height:1.65;max-width:400px;margin:0 auto}

/* ── Stat cards ──────────────────────────────────────────────────────────── */
.beast-stats-row{display:flex;gap:10px;width:100%}
.beast-stat-card{flex:1;background:rgba(4,27,53,0.85);border:1px solid rgba(249,115,22,0.20);border-radius:var(--radius-md);padding:16px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.beast-stat-card i{font-size:22px;color:#F97316}
.beast-stat-val{font-size:20px;font-weight:900;color:#fff;line-height:1}
.beast-stat-key{font-size:10px;font-weight:700;color:rgba(255,252,245,0.45);letter-spacing:0.5px;text-transform:uppercase}

/* ── Rules card ──────────────────────────────────────────────────────────── */
.beast-rules-card{width:100%;background:rgba(4,27,53,0.85);border:1px solid rgba(220,38,38,0.25);border-radius:var(--radius-lg);padding:22px 20px;box-shadow:inset 0 0 40px rgba(220,38,38,0.05);display:flex;flex-direction:column;gap:16px}
.beast-rules-title{font-size:10px;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:rgba(220,38,38,0.70)}
.beast-rule-row{display:flex;align-items:flex-start;gap:14px}
.beast-rule-icon{width:34px;height:34px;border-radius:9px;background:rgba(220,38,38,0.12);border:1px solid rgba(220,38,38,0.25);display:flex;align-items:center;justify-content:center;font-size:16px;color:#ef4444;flex-shrink:0}
.beast-rule-body{display:flex;flex-direction:column;gap:3px;padding-top:1px}
.beast-rule-name{font-size:13px;font-weight:800;color:#fff;line-height:1.3}
.beast-rule-desc{font-size:12px;font-weight:600;color:rgba(255,252,245,0.50);line-height:1.5}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-beast-start{width:100%;padding:16px;background:#dc2626;color:#fff;font-size:15px;font-weight:900;border-radius:var(--radius-lg);border:none;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:9px;letter-spacing:0.3px;font-family:var(--font);box-shadow:0 8px 32px rgba(220,38,38,0.35)}
.btn-beast-start:hover{background:#b91c1c;transform:translateY(-1px);box-shadow:0 12px 40px rgba(220,38,38,0.50)}
.btn-beast-start i{font-size:20px}
.btn-beast-back{width:100%;padding:14px;background:transparent;color:rgba(255,252,245,0.55);font-size:13px;font-weight:700;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,0.10);cursor:pointer;transition:all .2s;font-family:var(--font);letter-spacing:0.3px}
.btn-beast-back:hover{background:rgba(255,255,255,0.05);color:rgba(255,252,245,0.85)}
@media(max-width:767px){.beast-prequiz-body{padding-bottom:calc(var(--bottom-nav-h) + 20px)}}

/* ── Beast Quiz Engine — utility classes ──────────────────────────────────── */
.beast-hidden{display:none!important}
.btn-quiz-next.beast-next-dimmed{opacity:0.35;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* ══ WEAKEST SUBJECTS PRE-QUIZ SCREEN ═══════════════════════════════════════ */
#screen-weakest-prequiz{background:var(--navy)}
@media(min-width:768px){
  #screen-weakest-prequiz{background:linear-gradient(135deg,#1c3352 0%,#243f62 45%,#1c3352 100%)}
  #screen-weakest-prequiz .prequiz-topbar{margin:16px 16px 8px 16px;border-radius:var(--radius-xl);top:16px}
}

/* ── Scroll body ──────────────────────────────────────────────────────────── */
.weakest-prequiz-body{flex:1;overflow-y:auto;padding:24px 24px 56px;display:flex;flex-direction:column;gap:20px;background:transparent}
@media(min-width:768px){.weakest-prequiz-body{max-width:1100px;width:100%;margin:0 auto;padding:32px 0 56px;overflow-y:visible}}

/* ── Data accuracy banner ─────────────────────────────────────────────────── */
.weakest-accuracy-banner{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--radius-lg);background:rgba(249,115,22,0.08);border:1px solid rgba(249,115,22,0.22);color:rgba(255,252,245,0.80);font-size:13px;line-height:1.55}
.weakest-accuracy-banner i{color:#F97316;font-size:16px;flex-shrink:0;margin-top:2px}

/* ── Feedback mode selected-state overrides (dark screen) ─────────────────── */
#screen-weakest-prequiz .prequiz-feedback-opt.active .prequiz-feedback-title{color:#ffffff}
#screen-weakest-prequiz .prequiz-feedback-opt.active .prequiz-feedback-desc{color:rgba(255,255,255,0.70)}
#screen-weakest-prequiz .prequiz-feedback-opt.active .prequiz-feedback-icon{background:rgba(249,115,22,0.15);color:#F97316}

/* ── Topic insight cards ──────────────────────────────────────────────────── */
#weakest-topic-cards{display:flex;flex-direction:column;gap:10px}
.weakest-topic-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-left:3px solid #dc2626;border-radius:var(--radius-lg);padding:16px 16px 14px;display:flex;flex-direction:row;align-items:center;gap:12px}
.weakest-card-text{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.weakest-card-rank{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.7px;color:rgba(255,252,245,0.38)}
.weakest-card-topic{font-size:20px;font-weight:800;color:var(--cream);letter-spacing:-0.2px;line-height:1.15}
.weakest-card-meta{font-size:12px;color:rgba(255,255,255,0.80);margin-top:2px}
/* ── Accuracy block (replaces dial on Weakest Subjects + Targeted Study) ─── */
.card-accuracy-block{display:flex;flex-direction:column;align-items:flex-end;min-width:120px;gap:4px;flex-shrink:0}
@media(min-width:768px){.card-accuracy-block{flex:1;max-width:50%;min-width:200px}}
.card-accuracy-label{font-size:10px;font-weight:700;color:rgba(255,255,255,0.55);letter-spacing:0.5px;text-transform:uppercase}
.card-accuracy-value{font-size:22px;font-weight:800;color:#F97316;line-height:1}
.card-accuracy-bar{width:100%;height:8px;background:rgba(255,255,255,0.12);border-radius:5px;overflow:hidden;margin-top:2px}
.card-accuracy-bar-fill{height:100%;background:linear-gradient(90deg,#F97316,#FB923C);border-radius:5px;transition:width 0.4s ease}

/* ── Start button ─────────────────────────────────────────────────────────── */
.btn-weakest-start{width:100%;padding:16px;background:var(--accent);color:#fff;font-size:15px;font-weight:800;border-radius:var(--radius-lg);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);letter-spacing:0.2px;transition:all .2s;margin-top:4px}
.btn-weakest-start:hover{background:#e8740f;transform:translateY(-1px);box-shadow:0 4px 20px rgba(249,115,22,0.35)}
.btn-weakest-start i{font-size:20px}

@media(max-width:767px){.weakest-prequiz-body{padding-bottom:calc(var(--bottom-nav-h) + 20px)}}

/* ══ UNFINISHED BUSINESS PRE-QUIZ SCREEN ════════════════════════════════════ */
#screen-unfinished-prequiz{background:var(--navy)}
@media(min-width:768px){
  #screen-unfinished-prequiz{background:linear-gradient(135deg,#1c3352 0%,#243f62 45%,#1c3352 100%)}
  #screen-unfinished-prequiz .prequiz-topbar{margin:16px 16px 8px 16px;border-radius:var(--radius-xl);top:16px}
}

/* ── Scroll body ──────────────────────────────────────────────────────────── */
.unfinished-prequiz-body{flex:1;overflow-y:auto;padding:24px 24px 56px;display:flex;flex-direction:column;gap:20px;background:transparent}
@media(min-width:768px){.unfinished-prequiz-body{max-width:1100px;width:100%;margin:0 auto;padding:32px 0 56px;overflow-y:visible}}
@media(max-width:767px){.unfinished-prequiz-body{padding-bottom:calc(var(--bottom-nav-h) + 20px)}}

/* ── Summary card ─────────────────────────────────────────────────────────── */
.unfinished-summary-card{background:rgba(4,27,53,0.7);border:1.5px solid rgba(255,132,19,0.35);border-radius:var(--radius-xl);padding:28px 20px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;box-shadow:0 0 32px rgba(255,132,19,0.12),inset 0 0 32px rgba(255,132,19,0.03)}
.unfinished-summary-icon{width:56px;height:56px;border-radius:50%;background:rgba(255,132,19,0.12);border:2px solid rgba(255,132,19,0.3);display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--accent);flex-shrink:0}
.unfinished-summary-count{font-size:52px;font-weight:900;color:var(--accent);line-height:1;letter-spacing:-1px}
.unfinished-summary-label{font-size:13px;font-weight:700;color:var(--cream);letter-spacing:0.2px;text-transform:uppercase;opacity:0.85}
.unfinished-summary-sub{font-size:13px;font-weight:500;color:var(--text-muted);line-height:1.55;max-width:280px;margin-top:2px}

/* ── Greyed-out length option ─────────────────────────────────────────────── */
.prequiz-opt.prequiz-opt-disabled{opacity:0.38;cursor:not-allowed!important;border-color:var(--border)!important;background:var(--card)!important;color:var(--text-muted)!important;flex-direction:column;gap:2px;pointer-events:auto}
.prequiz-opt.prequiz-opt-disabled:hover{border-color:var(--border)!important;color:var(--text-muted)!important}
.unfinished-opt-note{font-size:9px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;color:var(--text-muted);line-height:1}

/* ── Feedback mode selected-state overrides (dark screen) ─────────────────── */
#screen-unfinished-prequiz .prequiz-feedback-opt.active .prequiz-feedback-title{color:#ffffff}
#screen-unfinished-prequiz .prequiz-feedback-opt.active .prequiz-feedback-desc{color:rgba(255,255,255,0.70)}
#screen-unfinished-prequiz .prequiz-feedback-opt.active .prequiz-feedback-icon{background:rgba(249,115,22,0.15);color:#F97316}

/* ── Start button ─────────────────────────────────────────────────────────── */
.btn-unfinished-start{width:100%;padding:16px;background:var(--accent);color:#fff;font-size:15px;font-weight:800;border-radius:var(--radius-lg);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);letter-spacing:0.2px;transition:all .2s;margin-top:4px}
.btn-unfinished-start:hover{background:#e8740f;transform:translateY(-1px);box-shadow:0 4px 20px rgba(249,115,22,0.35)}
.btn-unfinished-start i{font-size:20px}

/* ══ TARGETED STUDY PRE-QUIZ SCREEN ═════════════════════════════════════════ */
#screen-targeted-prequiz{background:var(--navy)}
@media(min-width:768px){
  #screen-targeted-prequiz{background:linear-gradient(135deg,#1c3352 0%,#243f62 45%,#1c3352 100%)}
  #screen-targeted-prequiz .prequiz-topbar{margin:16px 16px 8px 16px;border-radius:var(--radius-xl);top:16px}
}

/* ── Scroll body ──────────────────────────────────────────────────────────── */
.targeted-prequiz-body{flex:1;overflow-y:auto;padding:24px 24px 56px;display:flex;flex-direction:column;gap:20px;background:transparent}
@media(min-width:768px){.targeted-prequiz-body{max-width:1100px;width:100%;margin:0 auto;padding:32px 0 56px;overflow-y:visible}}
@media(max-width:767px){.targeted-prequiz-body{padding-bottom:calc(var(--bottom-nav-h) + 20px)}}

/* ── Topic selection grid ─────────────────────────────────────────────────── */
.targeted-topic-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ── Topic card ───────────────────────────────────────────────────────────── */
.targeted-topic-card{background:rgba(255,255,255,0.04);border:1.5px solid rgba(255,255,255,0.09);border-radius:var(--radius-lg);padding:14px 12px 12px;display:flex;flex-direction:column;gap:10px;cursor:pointer;text-align:left;transition:border-color .18s,background .18s,box-shadow .18s;position:relative;font-family:var(--font)}
.targeted-topic-card:hover:not(.targeted-excluded){border-color:rgba(255,132,19,0.4);background:rgba(255,132,19,0.04)}

/* ── Selected state ───────────────────────────────────────────────────────── */
.targeted-topic-card.targeted-selected{border-color:rgba(255,132,19,0.55);background:rgba(255,132,19,0.08);box-shadow:0 0 0 1px rgba(255,132,19,0.18)}

/* ── Card header row ──────────────────────────────────────────────────────── */
.targeted-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.targeted-card-name{font-size:15px;font-weight:800;color:var(--cream);line-height:1.2;flex:1}

/* ── Check icon ───────────────────────────────────────────────────────────── */
.targeted-check-icon{font-size:18px;color:rgba(255,132,19,0.3);transition:color .18s;flex-shrink:0;opacity:0}
.targeted-check-icon.visible{color:var(--accent);opacity:1}

/* ── Card inner row + left column ─────────────────────────────────────────── */
.targeted-card-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.targeted-card-left{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}

/* ── Stats line ───────────────────────────────────────────────────────────── */
.targeted-card-meta{font-size:11px;color:rgba(255,255,255,0.70);line-height:1.4}

/* ── Excluded state ───────────────────────────────────────────────────────── */
.targeted-topic-card.targeted-excluded{opacity:0.38;cursor:not-allowed;border-color:rgba(255,255,255,0.06)!important;background:rgba(255,255,255,0.02)!important;box-shadow:none!important}
.targeted-excluded-note{font-size:9px;font-weight:800;letter-spacing:0.4px;text-transform:uppercase;background:rgba(255,255,255,0.07);color:var(--text-muted);border-radius:4px;padding:2px 6px;flex-shrink:0;white-space:nowrap}
.targeted-excluded-sub{font-size:10px;color:var(--text-muted);font-weight:600;margin-top:-4px}

/* ── Feedback selected-state overrides (dark screen) ─────────────────────── */
#screen-targeted-prequiz .prequiz-feedback-opt.active .prequiz-feedback-title{color:#ffffff}
#screen-targeted-prequiz .prequiz-feedback-opt.active .prequiz-feedback-desc{color:rgba(255,255,255,0.70)}
#screen-targeted-prequiz .prequiz-feedback-opt.active .prequiz-feedback-icon{background:rgba(249,115,22,0.15);color:#F97316}

/* ── Start button ─────────────────────────────────────────────────────────── */
.btn-targeted-start{width:100%;padding:16px;background:var(--accent);color:#fff;font-size:15px;font-weight:800;border-radius:var(--radius-lg);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);letter-spacing:0.2px;transition:all .2s;margin-top:4px}
.btn-targeted-start:hover:not(:disabled){background:#e8740f;transform:translateY(-1px);box-shadow:0 4px 20px rgba(249,115,22,0.35)}
.btn-targeted-start:disabled{opacity:0.35;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn-targeted-start i{font-size:20px}

/* ══ MOCK EXAM BRIEFING SCREEN ══════════════════════════════════════════════ */

/* Screen container */
#screen-mock-briefing,#screen-mock-prequiz{display:none;flex-direction:column;flex:1;min-height:100vh;min-height:100dvh}
#screen-mock-briefing.active,#screen-mock-prequiz.active{display:flex}
#screen-mock-briefing,#screen-mock-prequiz{background:var(--navy)}

/* Topbar: explicit scroll-bleed fix — opaque solid bar, sticky flush at top:0, full width, above all content */
#screen-mock-briefing .prequiz-topbar{position:sticky;top:0;z-index:110;background:var(--navy);width:100%;border-radius:0;margin:0}

@media(min-width:768px){
  #screen-mock-briefing,#screen-mock-prequiz{background:linear-gradient(135deg,#1c3352 0%,#243f62 45%,#1c3352 100%)}
  /* Desktop: keep full-width flush bar (no rounded pill, no margin gap) so content cannot bleed above or beside it */
  #screen-mock-briefing .prequiz-topbar{margin:0;border-radius:0;top:0}
  /* Match other prequiz screens: let the page scroll on desktop rather than the inner div */
  .mock-briefing-body{overflow-y:visible}
}

/* Scrollable body */
.mock-briefing-body{flex:1;overflow-y:auto;padding:28px 24px 56px;display:flex;flex-direction:column;align-items:center;background:transparent}
@media(max-width:767px){.mock-briefing-body{padding-bottom:calc(var(--bottom-nav-h) + 24px)}}

/* Centered content wrapper */
.mock-briefing-inner{width:100%;max-width:1100px;display:flex;flex-direction:column;align-items:center;gap:20px}
@media(min-width:768px){.mock-briefing-inner{padding:16px 0 40px}}

/* ── Top pill badge ──────────────────────────────────────────────────────── */
.mock-top-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:100px;background:rgba(255,132,19,0.09);border:1px solid rgba(255,132,19,0.25);color:rgba(255,252,245,0.75);font-size:11px;font-weight:800;letter-spacing:0.8px;text-transform:uppercase}
.mock-top-badge i{font-size:14px;color:var(--accent)}

/* ── Shield icon circle ──────────────────────────────────────────────────── */
.mock-shield-wrap{display:flex;align-items:center;justify-content:center;padding:4px 0}
.mock-shield-circle{width:72px;height:72px;border-radius:50%;background:rgba(255,132,19,0.10);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:32px;color:var(--accent);box-shadow:0 0 0 6px rgba(255,132,19,0.10),0 0 28px rgba(255,132,19,0.30);animation:mock-shield-pulse 2.4s ease-in-out infinite}

@keyframes mock-shield-pulse{
  0%,100%{box-shadow:0 0 0 6px rgba(255,132,19,0.10),0 0 28px rgba(255,132,19,0.30)}
  50%{box-shadow:0 0 0 10px rgba(255,132,19,0.06),0 0 42px rgba(255,132,19,0.48)}
}

/* ── Title ──────────────────────────────────────────────────────────────── */
.mock-title{font-size:22px;font-weight:900;color:var(--cream);text-align:center;line-height:1.2;letter-spacing:-0.3px}
@media(min-width:768px){.mock-title{font-size:26px}}

/* ── Source note ─────────────────────────────────────────────────────────── */
.mock-source-note{width:100%;display:flex;align-items:flex-start;gap:10px;background:rgba(255,132,19,0.06);border:1px solid rgba(255,132,19,0.18);border-radius:var(--radius-md);padding:12px 14px}
.mock-source-note i{font-size:18px;color:var(--accent);flex-shrink:0;margin-top:1px}
.mock-source-note span{font-size:12px;font-weight:600;color:rgba(255,252,245,0.70);line-height:1.6}

/* ── Rules card ──────────────────────────────────────────────────────────── */
.mock-rules-card{width:100%;background:rgba(4,27,53,0.85);border:1.5px solid rgba(255,132,19,0.30);border-radius:var(--radius-lg);padding:22px 20px;box-shadow:inset 0 0 40px rgba(255,132,19,0.04);display:flex;flex-direction:column;gap:16px}
.mock-rules-header{display:flex;align-items:center;gap:9px;padding-bottom:4px;border-bottom:1px solid rgba(255,132,19,0.15)}
.mock-rules-header i{font-size:17px;color:var(--accent)}
.mock-rules-header span{font-size:10px;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:rgba(255,132,19,0.85)}

/* ── Rule rows ───────────────────────────────────────────────────────────── */
.mock-rule-row{display:flex;align-items:flex-start;gap:13px}
.mock-rule-icon{width:34px;height:34px;flex-shrink:0;border-radius:9px;background:rgba(255,132,19,0.12);border:1px solid rgba(255,132,19,0.25);display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--accent)}
.mock-rule-body{display:flex;flex-direction:column;gap:3px;padding-top:2px;flex:1}
.mock-rule-name{font-size:13px;font-weight:800;color:var(--cream);line-height:1.2}
.mock-rule-desc{font-size:12px;font-weight:500;color:rgba(255,252,245,0.60);line-height:1.55}

/* ── Tip block ───────────────────────────────────────────────────────────── */
.mock-tip-block{width:100%;display:flex;align-items:flex-start;gap:12px;background:rgba(255,132,19,0.07);border:1.5px solid rgba(255,132,19,0.28);border-radius:var(--radius-md);padding:14px 16px}
.mock-tip-block i{font-size:20px;color:var(--accent);flex-shrink:0;margin-top:1px}
.mock-tip-block span{font-size:13px;font-weight:600;color:rgba(255,252,245,0.80);line-height:1.6}

/* ── Action buttons ─────────────────────────────────────────────────────── */
.mock-briefing-btns{width:100%;display:flex;flex-direction:column;gap:12px}
.btn-mock-proceed{width:100%;padding:17px;background:var(--accent);color:#fff;font-size:15px;font-weight:800;border-radius:var(--radius-lg);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font);letter-spacing:0.2px;transition:all .2s;box-shadow:0 4px 24px rgba(255,132,19,0.28)}
.btn-mock-proceed:hover{background:#e8740f;transform:translateY(-1px);box-shadow:0 6px 28px rgba(255,132,19,0.40)}
.btn-mock-proceed i{font-size:19px}
.btn-mock-back{width:100%;padding:14px;background:transparent;color:rgba(255,252,245,0.55);font-size:13px;font-weight:700;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,0.10);cursor:pointer;transition:all .2s;font-family:var(--font);letter-spacing:0.3px;text-align:center}
.btn-mock-back:hover{background:rgba(255,255,255,0.05);color:rgba(255,252,245,0.85)}

/* ══ GLOBAL SCREEN ENTRANCE ANIMATION ════════════════════════════════════ */
@keyframes screen-fade-up{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

/* Base: any element marked for entrance animation starts hidden */
.anim-el,.mock-anim-el{opacity:0}

/* Trigger: parent screen carries .screen-animate-in → each child plays the animation */
.screen-animate-in .anim-el,
.screen-animate-in .mock-anim-el{animation:screen-fade-up 400ms ease-out forwards}

/* Legacy alias: .animate-in on a screen is treated identically to .screen-animate-in */
.animate-in .anim-el,
.animate-in .mock-anim-el{animation:screen-fade-up 400ms ease-out forwards}

/* ══ MOCK EXAM PRE-ENTRY SCREEN (Screen 2) ════════════════════════════════ */

/* Scrollable body */
.mock-prequiz-body{flex:1;overflow-y:auto;padding:28px 24px 56px;display:flex;flex-direction:column;align-items:center;background:transparent}
@media(max-width:767px){.mock-prequiz-body{padding-bottom:calc(var(--bottom-nav-h) + 24px)}}
@media(min-width:768px){.mock-prequiz-body{overflow-y:visible}}

/* Centered content wrapper */
.mock-prequiz-inner{width:100%;max-width:1100px;display:flex;flex-direction:column;align-items:center;gap:22px}
@media(min-width:768px){.mock-prequiz-inner{padding:16px 0 48px}}

/* ── Title block ─────────────────────────────────────────────────────────── */
.mock-prequiz-title-block{width:100%;text-align:center;display:flex;flex-direction:column;gap:8px}
.mock-prequiz-title{font-size:22px;font-weight:900;color:var(--cream);line-height:1.2;letter-spacing:-0.3px}
.mock-prequiz-subtitle{font-size:13px;font-weight:600;color:rgba(255,252,245,0.60);line-height:1.5}
@media(min-width:768px){.mock-prequiz-title{font-size:26px}}

/* ── Stat cards — 2×2 mobile, 4-col desktop ─────────────────────────────── */
.mock-prequiz-stats{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:480px){.mock-prequiz-stats{grid-template-columns:repeat(4,1fr)}}
.mock-prequiz-stat-card{background:rgba(4,27,53,0.85);border:1px solid rgba(255,132,19,0.22);border-radius:var(--radius-md);padding:16px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.mock-prequiz-stat-card i{font-size:22px;color:var(--accent)}
.mock-prequiz-stat-val{font-size:20px;font-weight:900;color:var(--cream);line-height:1}
.mock-prequiz-stat-key{font-size:10px;font-weight:700;color:rgba(255,252,245,0.45);letter-spacing:0.5px;text-transform:uppercase}

/* ── Comparison table card ───────────────────────────────────────────────── */
.mock-compare-card{width:100%;background:rgba(4,27,53,0.85);border:1.5px solid rgba(255,132,19,0.30);border-radius:var(--radius-lg);overflow:hidden;box-shadow:inset 0 0 40px rgba(255,132,19,0.04)}
.mock-compare-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.mock-compare-table{width:100%;min-width:420px;border-collapse:collapse}
.mock-compare-th{padding:11px 14px;font-size:10px;font-weight:900;letter-spacing:1.8px;text-transform:uppercase;color:rgba(255,252,245,0.55);text-align:left;background:rgba(255,132,19,0.06);border-bottom:1px solid rgba(255,132,19,0.20)}
.mock-compare-th-feature{color:rgba(255,252,245,0.40);width:38%}
.mock-compare-th-ours{color:var(--accent)}
.mock-compare-row:not(:last-child) td{border-bottom:1px solid rgba(255,255,255,0.06)}
.mock-compare-row:hover td{background:rgba(255,132,19,0.04)}
.mock-compare-feature{padding:11px 14px;font-size:12px;font-weight:700;color:rgba(255,252,245,0.55);width:38%}
.mock-compare-real{padding:11px 14px;font-size:12px;font-weight:600;color:rgba(255,252,245,0.70)}
.mock-compare-ours{padding:11px 14px;font-size:12px;font-weight:700;color:var(--accent)}

/* ── Commitment block ────────────────────────────────────────────────────── */
.mock-commitment-block{width:100%;display:flex;align-items:flex-start;gap:14px;background:rgba(185,28,28,0.08);border:1.5px solid rgba(220,38,38,0.30);border-radius:var(--radius-md);padding:16px}
.mock-commitment-icon{width:36px;height:36px;flex-shrink:0;border-radius:9px;background:rgba(220,38,38,0.12);border:1px solid rgba(220,38,38,0.30);display:flex;align-items:center;justify-content:center;font-size:18px;color:#ef4444}
.mock-commitment-body{display:flex;flex-direction:column;gap:4px}
.mock-commitment-title{font-size:13px;font-weight:800;color:var(--cream)}
.mock-commitment-desc{font-size:12px;font-weight:500;color:rgba(255,252,245,0.65);line-height:1.6}

/* ── Desktop recommendation ──────────────────────────────────────────────── */
.mock-desktop-note{width:100%;display:flex;align-items:flex-start;gap:10px;background:rgba(255,132,19,0.07);border:1px solid rgba(255,132,19,0.28);border-radius:var(--radius-md);padding:12px 14px}
.mock-desktop-note i{font-size:18px;color:var(--accent);flex-shrink:0;margin-top:1px}
.mock-desktop-note span{font-size:12px;font-weight:700;color:var(--accent);line-height:1.55}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.mock-prequiz-btns{width:100%;display:flex;flex-direction:column;gap:12px}
.btn-mock-begin{width:100%;padding:17px;background:var(--accent);color:#fff;font-size:15px;font-weight:800;border-radius:var(--radius-lg);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font);letter-spacing:0.2px;transition:all .2s;box-shadow:0 4px 24px rgba(255,132,19,0.28)}
.btn-mock-begin:hover{background:#e8740f;transform:translateY(-1px);box-shadow:0 6px 28px rgba(255,132,19,0.40)}
.btn-mock-begin i{font-size:19px}

/* ══ MOCK EXAM ENGINE — Sprint 4A ════════════════════════════════════════════ */

/* === Shared screen display rules === */
#screen-mock-exam,#screen-mock-break,#screen-mock-results{display:none;flex-direction:column;flex:1;min-height:100vh;min-height:100dvh;background:var(--navy)}
#screen-mock-exam.active,#screen-mock-break.active,#screen-mock-results.active{display:flex}

/* === Mock Exam Topbar === */
.mock-exam-topbar{position:sticky;top:0;z-index:110;background:var(--navy);border-bottom:2px solid var(--accent);padding:0 16px;height:var(--header-h);display:flex;align-items:center;gap:10px;flex-shrink:0}
.mock-exam-topbar-meta{flex:1;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.mock-exam-section-label{font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);line-height:1;white-space:nowrap}
.mock-exam-q-counter{font-size:13px;font-weight:800;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* === Mock Timer Pill (always visible — both mobile and desktop) === */
.mock-timer-pill{display:flex;align-items:center;justify-content:center;min-width:82px;height:34px;padding:0 12px;border-radius:100px;background:#0a1228;border:1px solid #F97316;color:#F97316;font-weight:700;font-size:14px;font-family:var(--font);flex-shrink:0;letter-spacing:0.3px;line-height:1;transition:border-color .3s,color .3s}
.mock-timer-pill.timer-pill-amber{border-color:#F59E0B;color:#F59E0B}
.mock-timer-pill.timer-pill-red{border-color:#EF4444;color:#EF4444;animation:timer-pulse 0.8s ease-in-out infinite}

/* === Mock Exam Content Wrap (body + right panel) === */
.mock-exam-content-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden}

/* === Mock Exam Body === */
.mock-exam-body{flex:1;overflow-y:auto;padding:24px 24px 40px;display:flex;flex-direction:column;gap:16px;background:var(--page)}
@media(max-width:767px){.mock-exam-body{padding-bottom:calc(var(--bottom-nav-h) + 24px)}}

/* === Mock Nav Row (Prev / Map / Next) === */
.mock-exam-nav-row{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.mock-exam-nav-row .btn-quiz-back-nav{flex-shrink:0}
.btn-mock-map-toggle{display:flex;align-items:center;justify-content:center;gap:6px;padding:13px 16px;background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius-md);font-family:var(--font);font-size:13px;font-weight:800;color:var(--text-sub);cursor:pointer;transition:all .2s;flex-shrink:0}
.btn-mock-map-toggle:hover{border-color:rgba(255,132,19,0.45);color:var(--accent)}
.btn-mock-map-toggle.active{border-color:rgba(255,132,19,0.45);color:var(--accent);background:rgba(255,132,19,0.07)}
.btn-mock-map-toggle i{font-size:16px}
/* Hide map toggle on desktop (always-visible right panel handles it) */
@media(min-width:768px){.btn-mock-map-toggle{display:none}}

/* === Mock Nav Drawer (mobile collapsible) === */
.mock-nav-drawer{display:none;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px}
.mock-nav-drawer.open{display:flex}
@media(min-width:768px){.mock-nav-drawer{display:none !important}}
.mock-nav-drawer-label{font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted)}
.mock-nav-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
@media(min-width:768px){.mock-nav-grid{grid-template-columns:repeat(7,1fr);gap:5px}}

/* === Mock Exam Right Panel (desktop) === */
.mock-exam-right-panel{display:none}
@media(min-width:768px){
  .mock-exam-content-wrap{flex-direction:row;height:auto;flex:1;min-height:0;align-items:flex-start;padding:0 24px 20px calc(20vw - 48px);gap:12px}
  .mock-exam-body{flex:0 1 680px;max-width:680px;height:766px;overflow-y:auto;border-radius:var(--radius-xl);background:rgba(255,252,245,0.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,132,19,0.20);box-shadow:0 0 0 1px rgba(255,132,19,0.12),0 0 32px rgba(255,132,19,0.28),inset 0 0 20px rgba(255,132,19,0.07);padding:32px 40px 40px}
  [data-theme="dark"] .mock-exam-body{background:rgba(255,252,245,0.10);box-shadow:0 0 0 1px rgba(255,132,19,0.16),0 0 32px rgba(255,132,19,0.30),inset 0 0 20px rgba(255,132,19,0.09)}
  .mock-exam-right-panel{display:flex;flex-direction:column;gap:10px;flex:0 0 260px;min-width:260px;padding:24px 18px;height:766px;overflow-y:auto;border-radius:var(--radius-xl);background:rgba(255,252,245,0.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,132,19,0.20);box-shadow:0 0 0 1px rgba(255,132,19,0.12),0 0 32px rgba(255,132,19,0.28),inset 0 0 20px rgba(255,132,19,0.07)}
  [data-theme="dark"] .mock-exam-right-panel{background:rgba(255,252,245,0.10);box-shadow:0 0 0 1px rgba(255,132,19,0.16),0 0 32px rgba(255,132,19,0.30),inset 0 0 20px rgba(255,132,19,0.09)}
  #screen-mock-exam{background:linear-gradient(135deg,#1c3352 0%,#243f62 45%,#1c3352 100%)}
  #screen-mock-exam .mock-exam-topbar{max-width:952px;width:auto;margin:16px 16px 8px calc(20vw - 48px);border:1.5px solid var(--accent);border-radius:var(--radius-xl);top:16px}
}
.mock-rp-timer-wrap{display:flex;flex-direction:column;gap:4px;align-items:flex-start;padding:10px 0 4px}
.mock-rp-timer{font-size:20px;min-width:auto;height:auto;padding:8px 14px;border-radius:var(--radius-md)}
.mock-rp-timer-label{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);padding-left:2px}

/* === Break Screen === */
.mock-break-body{flex:1;overflow-y:auto;padding:40px 24px 56px;display:flex;flex-direction:column;align-items:center;background:transparent}
@media(max-width:767px){.mock-break-body{padding-bottom:calc(var(--bottom-nav-h) + 24px)}}
.mock-break-inner{width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.mock-break-icon{width:80px;height:80px;border-radius:50%;background:rgba(255,132,19,0.10);border:2px solid rgba(255,132,19,0.30);display:flex;align-items:center;justify-content:center;font-size:40px;color:var(--accent)}
.mock-break-title{font-size:26px;font-weight:900;color:var(--cream);letter-spacing:-0.3px}
.mock-break-subtitle{font-size:14px;font-weight:600;color:rgba(255,252,245,0.65);line-height:1.65;max-width:400px}
.mock-break-reminder{display:flex;align-items:flex-start;gap:12px;background:rgba(255,132,19,0.07);border:1px solid rgba(255,132,19,0.25);border-radius:var(--radius-md);padding:14px 16px;text-align:left;width:100%}
.mock-break-reminder i{font-size:18px;color:var(--accent);flex-shrink:0;margin-top:1px}
.mock-break-reminder span{font-size:12px;font-weight:600;color:rgba(255,252,245,0.70);line-height:1.6}
.mock-break-btns{width:100%;display:flex;flex-direction:column;gap:12px}

/* === Results Placeholder Screen === */
.mock-results-body{flex:1;overflow-y:auto;padding:60px 24px 56px;display:flex;flex-direction:column;align-items:center;background:transparent}
@media(max-width:767px){.mock-results-body{padding-bottom:calc(var(--bottom-nav-h) + 24px)}}
.mock-results-inner{width:100%;max-width:480px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.mock-results-icon{width:90px;height:90px;border-radius:50%;background:rgba(255,132,19,0.10);border:2px solid rgba(255,132,19,0.35);display:flex;align-items:center;justify-content:center;font-size:44px;color:var(--accent)}
.mock-results-title{font-size:28px;font-weight:900;color:var(--cream);letter-spacing:-0.3px}
.mock-results-msg{font-size:16px;font-weight:800;color:var(--accent)}
.mock-results-sub{font-size:13px;font-weight:500;color:rgba(255,252,245,0.60);line-height:1.65;max-width:380px}

/* === Exit Warning Modal extras === */
.mock-exit-modal-box{align-items:center;text-align:center}
.mock-exit-icon{width:56px;height:56px;border-radius:50%;background:rgba(220,38,38,0.10);border:2px solid rgba(220,38,38,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;color:#ef4444;flex-shrink:0}
#mock-exit-headline{border-left:none;padding-left:0;font-style:normal;font-size:14px;font-weight:700;color:var(--text-main);line-height:1.6}

/* ══ MOCK EXAM — Sprint 4B: Break Stats + End-of-Exam Confirmation ══ */

/* Break screen — Section 1 stat row */
.mock-break-stats{width:100%;display:flex;align-items:center;justify-content:center;background:rgba(255,252,245,0.05);border:1px solid rgba(255,252,245,0.10);border-radius:var(--radius-md);padding:16px 12px}
.mock-break-stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.mock-break-stat-divider{width:1px;height:36px;background:rgba(255,252,245,0.12);flex-shrink:0}
.mock-break-stat-num{font-size:24px;font-weight:900;color:var(--cream);font-family:var(--font);letter-spacing:-0.5px}
.mock-break-stat-flagged{color:var(--accent)}
.mock-break-stat-unanswered{color:rgba(255,252,245,0.40)}
.mock-break-stat-key{font-size:10px;font-weight:700;color:rgba(255,252,245,0.45);text-transform:uppercase;letter-spacing:0.6px}

/* End-of-Exam Confirmation Screen */
#screen-mock-confirm{display:none;flex-direction:column;flex:1;min-height:100vh;min-height:100dvh;background:var(--navy)}
#screen-mock-confirm.active{display:flex}
.mock-confirm-body{flex:1;overflow-y:auto;padding:40px 24px 56px;display:flex;flex-direction:column;align-items:center;background:transparent}
@media(max-width:767px){.mock-confirm-body{padding-bottom:calc(var(--bottom-nav-h) + 24px)}}
.mock-confirm-inner{width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.mock-confirm-icon{width:88px;height:88px;border-radius:50%;background:rgba(255,132,19,0.10);border:2px solid rgba(255,132,19,0.35);display:flex;align-items:center;justify-content:center;font-size:42px;color:var(--accent)}
.mock-confirm-title{font-size:26px;font-weight:900;color:var(--cream);letter-spacing:-0.3px}
.mock-confirm-subtitle{font-size:13px;font-weight:600;color:rgba(255,252,245,0.60);line-height:1.65;max-width:380px}
.mock-confirm-section-card{width:100%;background:rgba(255,252,245,0.04);border:1px solid rgba(255,252,245,0.10);border-radius:var(--radius-md);padding:16px 14px 14px;text-align:left}
.mock-confirm-section-label{font-size:11px;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:12px}
.mock-confirm-stat-row{display:flex}
.mock-confirm-stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;border-right:1px solid rgba(255,252,245,0.10)}
.mock-confirm-stat:last-child{border-right:none}
.mock-confirm-stat-num{font-size:22px;font-weight:900;color:var(--cream);font-family:var(--font);letter-spacing:-0.5px}
.mock-confirm-flagged{color:var(--accent)}
.mock-confirm-unanswered{color:rgba(255,252,245,0.35)}
.mock-confirm-stat-key{font-size:10px;font-weight:700;color:rgba(255,252,245,0.40);text-transform:uppercase;letter-spacing:0.5px}
.mock-confirm-note{display:flex;align-items:flex-start;gap:10px;background:rgba(255,132,19,0.05);border:1px solid rgba(255,132,19,0.15);border-radius:var(--radius-md);padding:12px 14px;text-align:left;width:100%}
.mock-confirm-note i{font-size:16px;color:rgba(255,132,19,0.65);flex-shrink:0;margin-top:1px}
.mock-confirm-note span{font-size:12px;font-weight:600;color:rgba(255,252,245,0.55);line-height:1.6}
@media(min-width:768px){
  .mock-confirm-body{padding:56px 24px 40px}
  .mock-confirm-section-card{background:rgba(255,252,245,0.06)}
}

/* ══ MOCK EXAM — Sprint 5: Full Results Screen ══ */

/* Override body for full-width stacked layout */
#screen-mock-results .mock-results-body{padding:0 0 56px;align-items:stretch;gap:0}
@media(max-width:767px){#screen-mock-results .mock-results-body{padding-bottom:calc(var(--bottom-nav-h) + 24px)}}

/* ── Layer 1: Scaled Score Hero ─────────────────────────────────────────── */
.mock-res-score-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 20px 28px;border-bottom:1px solid rgba(255,252,245,0.08);background:rgba(255,132,19,0.03)}
.mock-res-score-num{font-size:88px;font-weight:900;color:var(--cream);line-height:1;letter-spacing:-4px;font-family:var(--font)}
.mock-res-score-max{font-size:12px;font-weight:700;color:rgba(255,252,245,0.35);text-transform:uppercase;letter-spacing:1.5px;margin-top:6px}
.mock-res-pass-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 18px;border-radius:100px;font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase;margin-top:16px}
.mock-res-pass{background:rgba(34,197,94,0.12);color:#16a34a;border:1px solid rgba(34,197,94,0.30)}
.mock-res-fail{background:rgba(239,68,68,0.10);color:#ef4444;border:1px solid rgba(239,68,68,0.25)}
.mock-res-score-explain{font-size:13px;font-weight:500;color:rgba(255,252,245,0.60);line-height:1.7;max-width:460px;margin:16px 0 0;text-align:center}

/* ── Layer 2: Raw Stats Row ──────────────────────────────────────────────── */
.mock-res-stats-row{display:flex;gap:8px;padding:16px;border-bottom:1px solid rgba(255,252,245,0.08)}
.mock-res-stat-card{flex:1;background:rgba(255,252,245,0.05);border:1px solid rgba(255,252,245,0.08);border-radius:var(--radius-md);padding:12px 8px;text-align:center;display:flex;flex-direction:column;gap:3px}
.mock-res-stat-val{font-size:20px;font-weight:900;color:var(--cream);font-family:var(--font);letter-spacing:-0.5px;line-height:1}
.mock-res-stat-wrong{color:#ef4444}
.mock-res-stat-unanswered{color:rgba(255,252,245,0.40)}
.mock-res-stat-scaled{color:var(--accent)}
.mock-res-scaled-label{font-size:13px;font-weight:800;color:rgba(255,252,245,0.50);letter-spacing:0.2px;margin-top:12px}
.mock-res-stat-key{font-size:9px;font-weight:700;color:rgba(255,252,245,0.40);text-transform:uppercase;letter-spacing:0.6px}

/* ── Section Labels ──────────────────────────────────────────────────────── */
.mock-res-section-label{font-size:11px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);padding:20px 16px 10px;width:100%}

/* ── Layer 3a: Topic Breakdown Grid ─────────────────────────────────────── */
.mock-res-topic-grid{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;padding:4px 16px 20px;border-bottom:1px solid rgba(255,252,245,0.08)}
.mock-res-topic-count{font-size:10px;font-weight:600;color:rgba(255,252,245,0.35);text-align:center;margin-top:2px}
.mock-res-weakest-topic .perf-circle-name{color:rgba(239,100,50,0.90) !important}

/* ── Layer 3b: Question Cards (dark-context overrides) ───────────────────── */
.mock-res-cards{display:flex;flex-direction:column;gap:8px;padding:0 16px;width:100%}
.mock-res-cards:not(:empty){padding-bottom:4px}
#screen-mock-results .review-q-card{background:rgba(255,252,245,0.05);border-color:rgba(255,252,245,0.10)}
#screen-mock-results .review-q-card:hover{border-color:rgba(255,132,19,0.40)}
#screen-mock-results .review-q-text{color:var(--cream)}
#screen-mock-results .review-q-num{color:rgba(255,252,245,0.45)}
#screen-mock-results .review-q-expand-icon{color:rgba(255,252,245,0.35)}
#screen-mock-results .review-q-detail{background:rgba(255,252,245,0.03);border-color:rgba(255,252,245,0.08)}
#screen-mock-results .review-choice-row{background:rgba(255,252,245,0.03);border-color:rgba(255,252,245,0.10);color:var(--cream)}
#screen-mock-results .review-choice-ltr{color:var(--accent)}
#screen-mock-results .review-choice-row.correct-ans{background:rgba(34,197,94,0.10);border-color:rgba(34,197,94,0.35)}
#screen-mock-results .review-choice-row.wrong-ans{background:rgba(239,68,68,0.08);border-color:rgba(239,68,68,0.30)}
#screen-mock-results .review-choice-row.correct-ans .review-choice-ltr{color:#16a34a}
#screen-mock-results .review-choice-row.wrong-ans .review-choice-ltr{color:#ef4444}
#screen-mock-results .review-explanation{background:rgba(34,197,94,0.05);border-color:rgba(34,197,94,0.15)}
#screen-mock-results .review-exp-body{color:rgba(255,252,245,0.70)}
#screen-mock-results .review-exp-topic-header{color:var(--accent)}
#screen-mock-results .review-exp-label{color:rgba(255,252,245,0.45)}
#screen-mock-results .review-exp-label.green-lbl{color:#16a34a}
#screen-mock-results .review-exp-label.orange-lbl{color:var(--accent)}

/* ── Bottom Actions ──────────────────────────────────────────────────────── */
.mock-res-actions{display:flex;flex-direction:column;gap:10px;padding:20px 16px;width:100%}
@media(min-width:480px){.mock-res-actions{flex-direction:row}}

/* ── Desktop overrides ───────────────────────────────────────────────────── */
@media(min-width:768px){
  .mock-res-score-hero{padding:52px 40px 36px}
  .mock-res-score-num{font-size:108px}
  .mock-res-stats-row{padding:16px 40px;gap:12px}
  .mock-res-stat-val{font-size:24px}
  .mock-res-section-label{padding:24px 40px 12px}
  .mock-res-topic-grid{padding:4px 40px 24px;gap:20px}
  .mock-res-cards{padding:0 40px}
  .mock-res-actions{padding:24px 40px;flex-direction:row}
}

/* ═══════════════════════════════════════════════════════════
   STUDYLITICS SCREEN
═══════════════════════════════════════════════════════════ */
#screen-studylitics{display:none;flex-direction:column;flex:1;min-height:100vh;min-height:100dvh;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E") repeat,#cbc5bc;position:relative}
#screen-studylitics.active{display:flex}

/* Topbar */
.studylitics-topbar{position:sticky;top:0;z-index:100;background:var(--navy);border-bottom:2px solid var(--accent);padding:0 20px;height:var(--header-h);display:flex;align-items:center;flex-shrink:0}
.studylitics-topbar-title{font-size:14px;font-weight:800;letter-spacing:0.6px;text-transform:uppercase;color:var(--cream)}

/* Body scroll container */
.studylitics-body{flex:1;overflow-y:auto;padding:20px 24px 48px;display:flex;flex-direction:column;gap:16px;background:transparent}
@media(max-width:767px){.studylitics-body{padding-bottom:calc(var(--bottom-nav-h) + 24px)}}
@media(min-width:768px){.studylitics-body{max-width:960px;margin:0 auto;width:100%;padding:20px 24px 48px;overflow-y:visible;gap:12px}}

/* ── Studylitics desktop 2-column grid ───────────────────────────────────
   Left col: Readiness+Countdown (row-1) + Snapshot + Topic Breakdown
   Right col: Accuracy Trend + Weak Areas (row-3) + Quiz History
   Dividers span both columns for visual separation.                       */
@media(min-width:1024px){
  .studylitics-body{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-auto-rows:auto;
    column-gap:20px;
    row-gap:12px;
    align-items:start;
    max-width:1160px;
    padding:20px 28px 48px;
    overflow-y:visible
  }
  /* Dividers and the snapshot row span both columns */
  .sl-divider{grid-column:1/-1}
  .snapshot-grid{grid-column:1/-1}
  .readiness-tooltip-popover{grid-column:1/-1}
  .snapshot-tooltip-backdrop{grid-column:1/-1}
  /* Row 1 (readiness + countdown) — spans both cols as-is (already a flex row) */
  .studylitics-row-1{grid-column:1/-1}
  /* Topic breakdown — left column only */
  .studylitics-topic-breakdown{grid-column:1/2;align-self:start}
  /* Row 3 (trend + weak) — right column, placed beside topic breakdown */
  .studylitics-row-3{grid-column:2/3;align-self:start;flex-direction:column}
  /* Quiz history — spans both columns at the bottom */
  .studylitics-quiz-history{grid-column:1/-1}
}

/* Section label */
.studylitics-section-label{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(4,27,53,0.55);margin-top:4px}
/* Section dividers — labelled ruled lines between major Studylitics sections */
.sl-divider{display:flex;align-items:center;margin:4px 0}
.sl-divider::before,.sl-divider::after{content:'';flex:1;height:1px;background:rgba(4,27,53,0.12)}
.sl-divider span{padding:0 10px;font-size:9px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:rgba(4,27,53,0.35);white-space:nowrap}

/* Dark navy card */
.studylitics-card{background:#131920;border:1px solid rgba(255,255,255,0.08);box-shadow:var(--shadow-card);border-radius:var(--radius-xl,16px);padding:20px 18px;display:flex;flex-direction:column;gap:14px}

/* Card header row */
.studylitics-card-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.studylitics-card-label{font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,252,245,0.55)}
.studylitics-info-btn{background:none;border:none;cursor:pointer;color:rgba(255,252,245,0.55);font-size:16px;padding:2px;line-height:1;transition:color .2s}
.studylitics-info-btn:hover{color:var(--accent)}

/* ── Row 1: 2-up on desktop ── */
.studylitics-row-1{display:flex;flex-direction:column;gap:16px}
@media(min-width:768px){
  .studylitics-row-1{flex-direction:row;align-items:stretch}
  .studylitics-readiness{flex:2}
  .studylitics-countdown{flex:1}
}

/* ── Readiness Ring ── */
.readiness-ring-wrap{position:relative;display:flex;align-items:center;justify-content:center;width:140px;height:140px;margin:0 auto}
.readiness-ring{width:140px;height:140px;transform:rotate(-90deg)}
.ring-track{fill:none;stroke:rgba(255,255,255,0.08);stroke-width:10}
.ring-fill{fill:none;stroke:var(--accent);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1)}
.readiness-ring-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.readiness-score-val{font-size:36px;font-weight:900;color:rgba(255,252,245,1);line-height:1;letter-spacing:-1px}
.readiness-score-label{font-size:12px;font-weight:700;color:rgba(255,252,245,0.65)}

/* Tier badge */
.readiness-tier-badge{align-self:center;padding:5px 14px;border-radius:99px;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;background:rgba(255,255,255,0.07);color:rgba(255,252,245,0.65);border:1px solid rgba(255,255,255,0.12);transition:all .4s}
.readiness-tier-badge.tier-novice{background:rgba(239,68,68,0.15);border-color:rgba(239,68,68,0.3);color:#ef4444}
.readiness-tier-badge.tier-developing{background:rgba(245,158,11,0.15);border-color:rgba(245,158,11,0.3);color:#f59e0b}
.readiness-tier-badge.tier-competent{background:rgba(249,115,22,0.15);border-color:rgba(249,115,22,0.3);color:#F97316}
.readiness-tier-badge.tier-proficient{background:rgba(59,130,246,0.15);border-color:rgba(59,130,246,0.3);color:#3b82f6}
.readiness-tier-badge.tier-exam-ready{background:rgba(34,197,94,0.15);border-color:rgba(34,197,94,0.3);color:#22c55e}

/* Factor breakdown bars */
.readiness-breakdown{display:flex;flex-direction:column;gap:8px;width:100%}
.readiness-factor-row{display:grid;grid-template-columns:80px 1fr 40px;align-items:center;gap:8px}
.rf-label{font-size:11px;font-weight:700;color:rgba(255,252,245,0.65);white-space:nowrap}
.rf-bar-wrap{height:5px;background:rgba(255,255,255,0.08);border-radius:99px;overflow:hidden}
.rf-bar{height:100%;width:0%;background:var(--accent);border-radius:99px;transition:width 1s cubic-bezier(.4,0,.2,1) .2s;box-shadow:0 0 4px rgba(249,115,22,0.6)}
.rf-val{font-size:11px;font-weight:800;color:rgba(255,252,245,0.65);text-align:right}
.readiness-disclaimer{font-size:10px;font-weight:500;color:rgba(255,252,245,0.35);line-height:1.55;margin:6px 0 0;padding-top:10px;border-top:1px solid rgba(255,255,255,0.07);text-align:center}

/* ── Exam Countdown ── */
.countdown-no-date{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:8px 0}
.countdown-no-date i{font-size:32px;color:rgba(255,252,245,0.55)}
.countdown-no-date-text{font-size:12px;font-weight:600;color:rgba(255,252,245,0.65);line-height:1.5}
.countdown-set-btn{padding:10px 20px;background:rgba(255,132,19,0.12);border:1px solid rgba(255,132,19,0.30);border-radius:var(--radius-lg,12px);color:var(--accent);font-size:12px;font-weight:800;font-family:var(--font);cursor:pointer;transition:all .2s;letter-spacing:0.3px}
.countdown-set-btn:hover{background:rgba(255,132,19,0.20)}
.countdown-has-date{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.countdown-has-date[hidden]{display:none!important}
.countdown-no-date[hidden]{display:none!important}
.countdown-number{font-size:56px;font-weight:900;color:rgba(255,252,245,1);line-height:1;letter-spacing:-2px}
.countdown-unit{font-size:13px;font-weight:700;color:rgba(255,252,245,0.65);text-transform:uppercase;letter-spacing:1.2px}
.countdown-exam-date{font-size:12px;font-weight:600;color:rgba(255,252,245,0.65);margin-top:2px}
.countdown-urgency-bar-wrap{width:100%;height:4px;background:rgba(255,255,255,0.08);border-radius:99px;overflow:hidden;margin-top:8px}
.countdown-urgency-bar{height:100%;width:100%;border-radius:99px;transition:background .4s}
.countdown-urgency-label{font-size:11px;font-weight:700;color:rgba(255,252,245,0.65);letter-spacing:0.3px}
.countdown-change-btn{margin-top:4px;background:none;border:none;color:rgba(255,252,245,0.55);font-size:11px;font-weight:700;font-family:var(--font);cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:0;transition:color .2s}
.countdown-change-btn:hover{color:rgba(255,252,245,0.85)}

/* ── Total Study Time block (inside Exam Countdown card) ── */
.countdown-study-time{display:flex;flex-direction:column;align-items:center;width:100%;gap:2px;padding-bottom:2px}
.cst-divider{width:80%;height:1px;background:rgba(255,255,255,0.10);margin:10px 0 8px}
.cst-label{font-size:9px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:rgba(255,252,245,0.40)}
.cst-total{font-size:28px;font-weight:900;color:rgba(255,252,245,0.92);letter-spacing:-0.5px;line-height:1.1;font-family:var(--font,'Montserrat')}
.cst-session{font-size:11px;font-weight:600;color:#F97316;margin-top:2px}

/* ── Performance Snapshot grid ── */
.snapshot-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:480px){.snapshot-grid{grid-template-columns:repeat(4,1fr)}}
.snapshot-card{background:#131920;border:1px solid rgba(255,255,255,0.09);border-radius:var(--radius-lg,12px);padding:14px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.snapshot-card-icon{width:36px;height:36px;border-radius:10px;background:var(--snap-color);display:flex;align-items:center;justify-content:center}
.snapshot-card-icon i{font-size:18px;color:var(--snap-icon-color)}
.snapshot-card-val{font-size:22px;font-weight:900;color:rgba(255,252,245,1);line-height:1;letter-spacing:-0.5px}
.snapshot-card-key{font-size:10px;font-weight:700;color:rgba(255,252,245,0.65);letter-spacing:0.4px;text-transform:uppercase;line-height:1.3}

/* ── Readiness Tooltip Popover ── */
.readiness-tooltip-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:300}
.readiness-tooltip-backdrop[hidden]{display:none!important}
.readiness-tooltip-popover{position:fixed;bottom:0;left:0;right:0;z-index:301;background:rgba(255,255,255,0.78);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.6);border-left:3px solid #F97316;border-radius:20px 20px 0 0;padding:28px 24px;box-shadow:0 8px 32px rgba(0,0,0,0.18),inset 0 1px 0 rgba(249,115,22,0.15);display:flex;flex-direction:column;gap:16px;max-height:80vh;overflow-y:auto}
.readiness-tooltip-popover[hidden]{display:none!important}
@media(min-width:600px){
  .readiness-tooltip-popover{bottom:auto;top:50%;left:50%;right:auto;transform:translate(-50%,-50%);width:460px;border-radius:20px;border:1px solid rgba(255,255,255,0.6);border-left:3px solid #F97316;max-height:90vh}
}
.rtp-header{display:flex;align-items:center;justify-content:space-between}
.rtp-title{font-size:15px;font-weight:700;color:#F97316}
.rtp-title::after{content:'';display:block;width:32px;height:2px;background:#F97316;margin-top:8px;border-radius:2px}
.rtp-close{background:none;border:none;cursor:pointer;color:var(--text-sub);font-size:18px;padding:4px;transition:color .2s;line-height:1}
.rtp-close:hover{color:var(--text-main)}
.rtp-body{display:flex;flex-direction:column;gap:12px}
.rtp-row{display:flex;flex-direction:column;gap:3px;padding:12px 14px;background:rgba(0,0,0,0.04);border-radius:var(--radius-lg,12px);border:1px solid rgba(0,0,0,0.08)}
.rtp-factor{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--accent)}
.rtp-weight{font-size:18px;font-weight:900;color:var(--text-main);line-height:1.1}
.rtp-desc{font-size:12px;font-weight:600;color:var(--text-sub);line-height:1.5;margin-top:2px}
.rtp-note{font-size:11px;font-weight:600;color:var(--text-sub);line-height:1.5;padding:10px 14px;background:rgba(250,204,21,0.06);border-radius:var(--radius-lg,12px);border:1px solid rgba(250,204,21,0.15)}
.rtp-note:empty{display:none}

/* ── Inline Countdown Date Picker ──────────────────────────────────────────── */
.countdown-date-picker{display:flex;flex-direction:column;gap:10px;padding:14px 16px;background:rgba(255,132,19,0.06);border:1px solid rgba(255,132,19,0.22);border-radius:var(--radius-lg,12px);width:100%;margin-top:4px;box-sizing:border-box}
.countdown-date-picker[hidden]{display:none!important}
.countdown-date-picker-label{font-size:10px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:rgba(255,252,245,0.65)}
.countdown-date-field{width:100%;border:1px solid rgba(255,255,255,0.15);border-radius:8px;padding:9px 11px;font-family:var(--font);font-size:13px;font-weight:600;color:var(--cream);background:rgba(255,255,255,0.07);outline:none;transition:border-color .2s;color-scheme:dark;box-sizing:border-box}
.countdown-date-field:focus{border-color:var(--accent)}
.countdown-date-picker-actions{display:flex;gap:8px}
.countdown-date-cancel-btn{flex:1;padding:9px;background:transparent;color:rgba(255,252,245,0.65);font-size:12px;font-weight:700;border-radius:var(--radius-lg,12px);border:1px solid rgba(255,255,255,0.12);cursor:pointer;font-family:var(--font);transition:all .2s}
.countdown-date-cancel-btn:hover{background:rgba(255,255,255,0.05);color:rgba(255,252,245,0.90)}
.countdown-date-save-btn{flex:2;padding:9px;background:rgba(255,132,19,0.15);color:var(--accent);font-size:12px;font-weight:800;border-radius:var(--radius-lg,12px);border:1px solid rgba(255,132,19,0.30);cursor:pointer;font-family:var(--font);transition:all .2s;letter-spacing:0.3px;display:flex;align-items:center;justify-content:center;gap:5px}
.countdown-date-save-btn:hover{background:rgba(255,132,19,0.25)}
.countdown-date-save-btn i{font-size:13px}

/* ── Snapshot Card Info Button ─────────────────────────────────────────────── */
.snapshot-card{position:relative}
.snapshot-info-btn{position:absolute;top:7px;right:7px;background:none;border:none;cursor:pointer;color:rgba(255,252,245,0.55);font-size:13px;padding:2px;line-height:1;transition:color .2s}
.snapshot-info-btn:hover{color:rgba(255,252,245,1)}

/* ── Snapshot Stat Tooltip Popover ─────────────────────────────────────────── */
.snapshot-tooltip-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:300}
.snapshot-tooltip-backdrop[hidden]{display:none!important}
.snapshot-tooltip-popover{position:fixed;bottom:0;left:0;right:0;z-index:301;background:rgba(255,255,255,0.78);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.6);border-left:3px solid #F97316;border-radius:20px 20px 0 0;padding:28px 24px;box-shadow:0 8px 32px rgba(0,0,0,0.18),inset 0 1px 0 rgba(249,115,22,0.15);display:flex;flex-direction:column;gap:10px}
.snapshot-tooltip-popover[hidden]{display:none!important}
@media(min-width:600px){
  .snapshot-tooltip-popover{bottom:auto;top:50%;left:50%;right:auto;transform:translate(-50%,-50%);width:380px;border-radius:20px;border:1px solid rgba(255,255,255,0.6);border-left:3px solid #F97316}
}
.stp-header{display:flex;align-items:center;justify-content:space-between}
.stp-title{font-size:15px;font-weight:700;color:#F97316}
.stp-title::after{content:'';display:block;width:32px;height:2px;background:#F97316;margin-top:8px;border-radius:2px}
.stp-text{margin:0;font-size:13px;font-weight:600;color:var(--text-sub);line-height:1.65}

/* ═══════════════════════════════════════════════════════════
   STUDYLITICS SPRINT 2  —  Topic Breakdown · Weak Areas · Accuracy Trend
═══════════════════════════════════════════════════════════ */

/* ── Row 3: Accuracy Trend + Weak Areas side-by-side on desktop ── */
.studylitics-row-3{display:flex;flex-direction:column;gap:16px}
@media(min-width:768px){
  .studylitics-row-3{flex-direction:row;align-items:flex-start}
  .studylitics-row-3 .studylitics-trend{flex:1}
  .studylitics-row-3 .studylitics-weak-areas{flex:1}
}

/* ── Tap instruction sublabel ── */
.topic-tap-instruction{font-size:10px;font-weight:600;color:rgba(255,252,245,0.55);margin:0 0 10px;line-height:1.4;letter-spacing:0.1px}

/* ── First-tap pulse ring (dismissed after first tap via localStorage) ── */
@keyframes tc-pulse{0%,100%{box-shadow:0 0 0 0 rgba(167,139,250,0.50)}60%{box-shadow:0 0 0 7px rgba(167,139,250,0)}}
.topic-circle-wrap.tc-show-pulse{animation:tc-pulse 2.2s ease-in-out infinite}
/* Same cue on results perf circles */
@keyframes perf-pulse{0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,0.45)}60%{box-shadow:0 0 0 7px rgba(249,115,22,0)}}
.perf-circle-wrap.tc-show-pulse{animation:perf-pulse 2.2s ease-in-out infinite}

/* ── Topic Circles Row ── */
.topic-circles-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 6px}
@media(min-width:480px){.topic-circles-row{grid-template-columns:repeat(6,1fr);gap:8px}}
.topic-circle-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.topic-circle-wrap:hover .topic-circle-svg circle.tc-fill{filter:brightness(1.1)}
.topic-circle-svg{width:60px;height:60px;overflow:visible}
@media(min-width:768px){.topic-circle-svg{width:112px;height:112px}}
.tc-track{fill:none;stroke:rgba(255,255,255,0.07);stroke-width:5}
.tc-fill{fill:none;stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1) .2s}
.tc-bg{fill:rgba(255,255,255,0.04)}
.tc-pct{font-size:12px;font-weight:900;fill:var(--cream);text-anchor:middle;dominant-baseline:central}
@media(min-width:768px){.tc-pct{font-size:10px}}
.tc-pct-empty{font-size:10px;font-weight:700;fill:rgba(255,252,245,0.55);text-anchor:middle;dominant-baseline:central}
@media(min-width:768px){.tc-pct-empty{font-size:8px}}
.topic-circle-label{font-size:9px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;color:rgba(255,252,245,0.65);text-align:center;line-height:1.3;max-width:100%;overflow-wrap:break-word;word-break:break-word}
@media(min-width:768px){.topic-circle-label{font-size:11px}}
/* Colour variants — orange=strong, lavender=medium, deep purple=weak */
.tc-fill.tc-strong{stroke:#F97316;filter:drop-shadow(0 0 4px rgba(249,115,22,0.50))}
.tc-fill.tc-medium{stroke:#a78bfa;filter:drop-shadow(0 0 3px rgba(167,139,250,0.35))}
.tc-fill.tc-weak{stroke:#7c3aed;filter:drop-shadow(0 0 4px rgba(124,58,237,0.55))}
/* ── Desktop hover states — tappable elements only ── */
@media(min-width:768px){
  .topic-circle-wrap{transition:transform 0.2s ease}
  .topic-circle-wrap:hover{transform:translateY(-2px)}
  .topic-circle-wrap:hover .topic-circle-svg circle.tc-fill.tc-strong{filter:drop-shadow(0 0 8px rgba(249,115,22,0.75))}
  .topic-circle-wrap:hover .topic-circle-svg circle.tc-fill.tc-medium{filter:drop-shadow(0 0 7px rgba(167,139,250,0.60))}
  .topic-circle-wrap:hover .topic-circle-svg circle.tc-fill.tc-weak{filter:drop-shadow(0 0 8px rgba(124,58,237,0.75))}
  .history-row-main{transition:transform 0.2s ease,background 0.2s ease;border-radius:6px;cursor:pointer}
  .history-row-main:hover{transform:translateY(-1px);background:rgba(255,255,255,0.04)}
  .btn-drill:hover{transform:translateY(-2px)}
  .td-q-card{transition:transform 0.2s ease,border-color 0.15s}
  .td-q-card:hover{transform:translateY(-2px);border-color:rgba(124,58,237,0.40)}
}
/* Empty state */
.studylitics-empty-state{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 0;text-align:center}
.studylitics-empty-state i{font-size:28px;color:rgba(255,252,245,0.40)}
.studylitics-empty-state p{font-size:12px;font-weight:600;color:rgba(255,252,245,0.40);line-height:1.5;max-width:220px;margin:0}
.sl-logged-out-overlay{position:absolute;top:calc(var(--header-h) + var(--sat));left:0;right:0;bottom:0;z-index:10;display:flex;align-items:center;justify-content:center;background:var(--page)}
.sl-logged-out-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:80px 24px;text-align:center}
.sl-logged-out-state i{font-size:52px;color:var(--accent);opacity:0.45}
.sl-logged-out-state p{font-size:15px;font-weight:700;color:var(--text-sub);max-width:240px;line-height:1.5;margin:0}
.sl-login-btn{background:var(--accent);color:var(--navy);font-family:var(--font);font-size:13px;font-weight:800;padding:11px 28px;border-radius:var(--radius-md);border:none;cursor:pointer;letter-spacing:0.3px;transition:opacity .2s}
.sl-login-btn:hover{opacity:0.88}
/* Illustrated empty state SVG */
.es-svg{stroke:rgba(255,252,245,0.2);stroke-width:1.5;fill:none;width:52px;height:52px;display:block;margin:0 auto;overflow:visible}

/* ── Section colour treatments — dark gradient cards with coloured glow ── */
/* Orange: Exam Readiness, Exam Countdown, Quiz History */
.studylitics-readiness,
.studylitics-countdown,
.studylitics-quiz-history{background:linear-gradient(135deg,#1a1f2e,#131920);border-color:rgba(249,115,22,0.25);box-shadow:var(--shadow-card)}
/* Purple: Topic Breakdown */
.studylitics-topic-breakdown{background:linear-gradient(135deg,#17152a,#131920);border-color:rgba(124,58,237,0.25);box-shadow:var(--shadow-card)}
/* Purple: Accuracy Trend (Weak Areas already below) */
.studylitics-trend{background:linear-gradient(135deg,#17152a,#131920);border-color:rgba(124,58,237,0.25);box-shadow:var(--shadow-card)}

/* ── Snapshot cards — purple gradient glow ── */
.snapshot-card{background:linear-gradient(135deg,#17152a,#131920)!important;border-color:rgba(124,58,237,0.25)!important;box-shadow:var(--shadow-card)}

/* ── Weak Areas Card ── */
.studylitics-weak-areas{background:linear-gradient(135deg,#17152a,#131920);border-color:rgba(124,58,237,0.25);box-shadow:var(--shadow-card)}
.weak-areas-list{display:flex;flex-direction:column;gap:12px}
.weak-area-row{display:flex;flex-direction:column;gap:5px}
.weak-area-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.weak-area-name{font-size:12px;font-weight:800;color:var(--cream);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.weak-area-meta{font-size:10px;font-weight:600;color:rgba(255,252,245,0.65);white-space:nowrap}
.weak-area-bar-wrap{height:4px;background:rgba(255,255,255,0.07);border-radius:99px;overflow:hidden}
.weak-area-bar{height:100%;background:#7c3aed;border-radius:99px;width:0%;transition:width 1s cubic-bezier(.4,0,.2,1) .3s;box-shadow:0 0 4px rgba(124,58,237,0.6)}
.weak-area-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}
.weak-area-pct{font-size:18px;font-weight:900;color:#a78bfa;line-height:1;letter-spacing:-0.5px}
.btn-drill{padding:5px 12px;background:rgba(139,92,246,0.12);border:1px solid rgba(139,92,246,0.30);border-radius:8px;color:#a78bfa;font-size:11px;font-weight:800;font-family:var(--font);cursor:pointer;transition:all .2s;letter-spacing:0.3px;display:flex;align-items:center;gap:5px}
.btn-drill:hover{background:rgba(139,92,246,0.22);border-color:rgba(139,92,246,0.50)}
.btn-drill i{font-size:11px}

/* ── Accuracy Trend Card ── */
.studylitics-trend{box-sizing:border-box}
.trend-chart-wrap{width:100%;min-height:160px;position:relative}
.trend-svg{width:100%;height:180px;overflow:visible;display:block}
.trend-grid-line{stroke:rgba(255,255,255,0.05);stroke-width:1}
.trend-axis-label{font-size:9px;font-weight:700;fill:rgba(255,252,245,0.55);text-anchor:middle}
.trend-axis-label-y{font-size:9px;font-weight:700;fill:rgba(255,252,245,0.55);text-anchor:end}
.trend-area{fill-opacity:1}
.trend-line{fill:none;stroke:#7c3aed;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.trend-dot{fill:#a78bfa;transition:r .2s}
.trend-dot-latest{filter:drop-shadow(0 0 5px #7c3aed)}

/* ── Sprint 2 shared tooltip ── */
.spr2-tooltip-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:300}
.spr2-tooltip-backdrop[hidden]{display:none!important}
.spr2-tooltip-popover{position:fixed;bottom:0;left:0;right:0;z-index:301;background:rgba(255,255,255,0.78);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.6);border-left:3px solid #F97316;border-radius:20px 20px 0 0;padding:28px 24px;box-shadow:0 8px 32px rgba(0,0,0,0.18),inset 0 1px 0 rgba(249,115,22,0.15);display:flex;flex-direction:column;gap:10px}
.spr2-tooltip-popover[hidden]{display:none!important}
@media(min-width:600px){
  .spr2-tooltip-popover{bottom:auto;top:50%;left:50%;right:auto;transform:translate(-50%,-50%);width:400px;border-radius:20px;border:1px solid rgba(255,255,255,0.6);border-left:3px solid #F97316}
}

/* ── Sprint 3: Quiz History ── */
.studylitics-quiz-history{display:flex;flex-direction:column;gap:0}

/* History row */
.history-list{display:flex;flex-direction:column;gap:0}
.history-row{border-bottom:1px solid rgba(255,255,255,0.06)}
.history-row:last-child{border-bottom:none}
.history-row-main{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 0;cursor:default}
.history-row-left{flex:1;min-width:0}
.history-row-right{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}

/* Mode pills */
.history-mode-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;font-family:var(--font,'Montserrat');padding:3px 9px;border-radius:999px;letter-spacing:0.02em;white-space:nowrap}
.history-mode-orange{background:rgba(255,132,19,0.14);color:#FF8413;border:1px solid rgba(255,132,19,0.30)}
.history-mode-teal  {background:rgba(124,58,237,0.12);color:#a78bfa;border:1px solid rgba(124,58,237,0.28)}
.history-mode-purple{background:rgba(124,58,237,0.12);color:#a78bfa;border:1px solid rgba(124,58,237,0.28)}
.history-mode-amber {background:rgba(245,158,11,0.14);color:#F59E0B;border:1px solid rgba(245,158,11,0.30)}

/* Row meta values */
.history-score{font-size:13px;font-weight:700;color:var(--cream,#FFFCF5)}
.history-qcount{font-size:11px;color:rgba(255,252,245,0.65);white-space:nowrap}
.history-dur{font-size:11px;color:rgba(255,252,245,0.65)}
.history-date{font-size:11px;color:rgba(255,252,245,0.65);white-space:nowrap}

/* Mock-specific tags */
.hmock-pass-tag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;letter-spacing:0.03em}
.hmock-pass-tag.hpass{background:rgba(124,58,237,0.14);color:#a78bfa;border:1px solid rgba(124,58,237,0.30)}
.hmock-pass-tag.hfail{background:rgba(239,68,68,0.12);color:#f87171;border:1px solid rgba(239,68,68,0.25)}
.hmock-scaled{font-size:11px;color:rgba(255,252,245,0.65)}

/* Expand button */
.history-expand-btn{background:none;border:none;color:rgba(255,252,245,0.55);cursor:pointer;padding:3px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:color 0.15s,transform 0.2s}
.history-expand-btn:hover{color:rgba(255,252,245,0.90)}
.history-expand-btn.expanded{transform:rotate(180deg);color:#FF8413}
.history-expand-btn i{font-size:14px}

/* Detail / topic breakdown panel */
.history-row-detail{padding:8px 0 12px;display:flex;flex-direction:column;gap:6px}
.history-row-detail[hidden]{display:none}
.history-topic-row{display:grid;grid-template-columns:90px 36px 1fr;align-items:center;gap:8px}
.htb-topic{font-size:11px;color:rgba(255,252,245,0.65);font-family:var(--font,'Montserrat')}
.htb-pct{font-size:11px;font-weight:700;text-align:right}
.htb-strong .htb-pct{color:#ddd6fe}
.htb-medium .htb-pct{color:#F97316}
.htb-weak   .htb-pct{color:#a78bfa}
.htb-bar-track{background:rgba(255,255,255,0.07);border-radius:999px;height:4px;overflow:hidden}
.htb-bar{height:100%;border-radius:999px;transition:width 0.4s ease}
.htb-strong .htb-bar{background:#7c3aed;box-shadow:0 0 4px rgba(124,58,237,0.6)}
.htb-medium .htb-bar{background:#F97316;box-shadow:0 0 4px rgba(249,115,22,0.6)}
.htb-weak   .htb-bar{background:#7c3aed;box-shadow:0 0 4px rgba(124,58,237,0.6)}

/* Empty state */
.history-empty-state{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 16px;text-align:center}
.history-empty-state[hidden]{display:none}
.history-empty-state i{font-size:32px;color:rgba(255,252,245,0.40)}
.history-empty-state p{font-size:12px;color:rgba(255,252,245,0.40);line-height:1.5;margin:0}

/* Show more button */
.history-show-more-btn{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;padding:9px 0;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.10);border-radius:8px;color:rgba(255,252,245,0.65);font-size:12px;font-weight:600;font-family:var(--font,'Montserrat');cursor:pointer;transition:background 0.15s,color 0.15s}
.history-show-more-btn:hover{background:rgba(255,255,255,0.09);color:rgba(255,252,245,0.95)}
.history-show-more-btn[hidden]{display:none!important}

/* ── Section colour identity — icon tints per section ── */
/* Orange sections */
.studylitics-readiness .studylitics-info-btn,
.studylitics-countdown .studylitics-info-btn,
.studylitics-quiz-history .studylitics-info-btn{color:rgba(249,115,22,0.55)}
.studylitics-readiness .studylitics-info-btn:hover,
.studylitics-countdown .studylitics-info-btn:hover,
.studylitics-quiz-history .studylitics-info-btn:hover{color:#F97316}
/* Purple sections (topic breakdown merged in) */
.studylitics-topic-breakdown .studylitics-info-btn,
.studylitics-weak-areas .studylitics-info-btn,
.studylitics-trend .studylitics-info-btn{color:rgba(139,92,246,0.55)}
.studylitics-topic-breakdown .studylitics-info-btn:hover,
.studylitics-weak-areas .studylitics-info-btn:hover,
.studylitics-trend .studylitics-info-btn:hover{color:#a78bfa}
/* Snapshot info buttons — purple */
.snapshot-info-btn{color:rgba(139,92,246,0.40)!important}
.snapshot-info-btn:hover{color:#a78bfa!important}

/* Quiz History — expanded row stat pills */
.history-detail-stats{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 4px}
.history-stat-pill{display:flex;flex-direction:column;align-items:center;gap:2px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);border-radius:8px;padding:7px 14px;min-width:60px;flex:1}
.history-stat-val{font-size:15px;font-weight:900;color:rgba(255,252,245,1);line-height:1;letter-spacing:-0.3px;font-family:var(--font,'Montserrat')}
.history-stat-key{font-size:9px;font-weight:700;color:rgba(255,252,245,0.65);text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap}

/* ══════════════════════════════════════════════════════════════════════════════
   TOPIC DETAIL SCREEN
   ══════════════════════════════════════════════════════════════════════════════ */

/* Screen shell — flex:1 fills remaining space after sidebar on desktop */
#screen-topic-detail{display:none;flex-direction:column;flex:1;min-height:100vh;min-height:100dvh;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E") repeat,#cbc5bc}
#screen-topic-detail.active{display:flex}

/* Topbar — stays dark navy */
.td-topbar{display:flex;align-items:center;gap:12px;padding:14px 16px 10px;background:var(--navy);border-bottom:2px solid var(--accent);flex-shrink:0;position:sticky;top:0;z-index:100}
.td-topbar-title{font-size:16px;font-weight:900;color:var(--cream,#FFFCF5);letter-spacing:-0.2px;font-family:var(--font,'Montserrat')}

/* Body — matches studylitics-body pattern exactly */
.td-body{flex:1;overflow-y:auto;padding:16px 24px 40px;display:flex;flex-direction:column;gap:14px;box-sizing:border-box}
@media(max-width:767px){.td-body{padding-bottom:calc(var(--bottom-nav-h,64px) + 24px)}}
@media(min-width:768px){.td-body{max-width:900px;margin:0 auto;width:100%;padding:28px 0 56px;overflow-y:visible}}

/* ── Page title ── */
.td-page-title{font-size:22px;font-weight:900;color:var(--navy,#041B35);letter-spacing:-0.4px;font-family:var(--font,'Montserrat');margin:0 0 2px;padding:0;line-height:1.2}
@media(min-width:768px){.td-page-title{font-size:26px}}
/* ── Hero stats row ── */
.td-hero-row{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:480px){.td-hero-row{grid-template-columns:repeat(4,1fr)}}
.td-stat-card{background:linear-gradient(135deg,#17152a,#131920);border:1px solid rgba(124,58,237,0.25);border-radius:14px;padding:12px 10px;display:flex;flex-direction:row;align-items:center;gap:10px;box-shadow:0 4px 24px rgba(0,0,0,0.2),0 0 16px rgba(124,58,237,0.12),inset 0 1px 0 rgba(255,255,255,0.12)}
.td-stat-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(124,58,237,0.12);color:#a78bfa;font-size:16px;flex-shrink:0}
.td-stat-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.td-stat-val{font-size:20px;font-weight:900;color:rgba(255,252,245,1);line-height:1;letter-spacing:-0.5px;font-family:var(--font,'Montserrat')}
.td-stat-key{font-size:9px;font-weight:700;color:rgba(255,252,245,0.65);text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap}
/* Accent overrides */
.td-stat-accuracy .td-stat-val{color:#F97316}
.td-stat-accuracy .td-stat-icon{background:rgba(249,115,22,0.12);color:#F97316}
.td-stat-correct .td-stat-val{color:#34d399}
.td-stat-correct .td-stat-icon{background:rgba(52,211,153,0.12);color:#34d399}
.td-stat-incorrect .td-stat-val{color:#f87171}
.td-stat-incorrect .td-stat-icon{background:rgba(248,113,113,0.12);color:#f87171}

/* ── Circle + trend two-col row ── */
.td-circle-trend-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:360px){.td-circle-trend-row{grid-template-columns:1fr}}
.td-circle-card,.td-trend-card{background:linear-gradient(135deg,#17152a,#131920);border-color:rgba(124,58,237,0.25);box-shadow:0 4px 24px rgba(0,0,0,0.2),0 0 16px rgba(124,58,237,0.12),inset 0 1px 0 rgba(255,255,255,0.12)}

/* Accuracy circle */
.td-circle-outer{display:flex;justify-content:center;align-items:center;padding:8px 0 4px}
.td-circle-svg{width:100%;max-width:112px;height:auto;display:block;margin:0 auto;overflow:visible}
.td-circle-track{fill:none;stroke:rgba(255,255,255,0.07);stroke-width:8}
.td-circle-fill{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1) .25s}
.td-circle-pct-val{font-size:18px;font-weight:900;fill:var(--cream,#FFFCF5);text-anchor:middle;dominant-baseline:central;font-family:var(--font,'Montserrat')}
.td-circle-pct-lbl{font-size:9px;font-weight:700;fill:rgba(255,252,245,0.65);text-anchor:middle;dominant-baseline:central;text-transform:uppercase;letter-spacing:0.6px;font-family:var(--font,'Montserrat')}

/* Mini trend */
.td-trend-chart-wrap{min-height:80px;padding-bottom:4px}
.td-trend-svg{width:100%;height:auto;display:block;overflow:visible}
.td-trend-line{fill:none;stroke:#7c3aed;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.td-trend-dot{fill:#7c3aed;filter:drop-shadow(0 0 3px rgba(124,58,237,0.7))}

/* ── Questions card ── */
.td-questions-card{background:linear-gradient(135deg,#17152a,#131920);border-color:rgba(124,58,237,0.25);box-shadow:0 4px 24px rgba(0,0,0,0.2),0 0 16px rgba(124,58,237,0.12),inset 0 1px 0 rgba(255,255,255,0.12)}
.td-q-count-badge{font-size:10px;font-weight:700;color:rgba(255,252,245,0.55);margin-left:auto;white-space:nowrap}
#td-questions-list{display:flex;flex-direction:column;gap:6px;margin-top:4px}

/* Question card rows */
.td-q-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:10px;overflow:hidden;cursor:pointer;transition:border-color .15s}
.td-q-card:hover{border-color:rgba(255,255,255,0.14)}
.td-q-card-correct{border-left:3px solid rgba(52,211,153,0.45)}
.td-q-card-incorrect{border-left:3px solid rgba(248,113,113,0.45)}

.td-q-header{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;position:relative}
.td-q-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:3px}
.dot-correct{background:#34d399}
.dot-incorrect{background:#f87171}
.td-q-text{font-size:12px;font-weight:600;color:rgba(255,252,245,0.90);flex:1;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.td-q-card.expanded .td-q-text{-webkit-line-clamp:unset;overflow:visible}
.td-q-status{font-size:9px;font-weight:800;white-space:nowrap;padding:2px 7px;border-radius:99px;flex-shrink:0;margin-top:1px}
.td-q-status-correct{background:rgba(52,211,153,0.12);color:#34d399;border:1px solid rgba(52,211,153,0.25)}
.td-q-status-incorrect{background:rgba(248,113,113,0.12);color:#f87171;border:1px solid rgba(248,113,113,0.25)}
.td-q-expand-icon{font-size:13px;color:rgba(255,252,245,0.55);flex-shrink:0;margin-top:2px;transition:transform .2s}
.td-q-card.expanded .td-q-expand-icon{transform:rotate(180deg)}

.td-q-detail{display:none;padding:0 12px 12px;border-top:1px solid rgba(255,255,255,0.06)}
.td-q-card.expanded .td-q-detail{display:block}

/* ── Dark card overrides for review content inside Topic Detail ──
   Cards are dark navy — review-choice-row / review-exp-body must use
   cream text, not var(--text-main), to be readable.                  */
#screen-topic-detail .td-q-detail{background:rgba(255,252,245,0.02);border-color:rgba(255,252,245,0.07)}
#screen-topic-detail .review-choice-row{background:rgba(255,252,245,0.03);border-color:rgba(255,252,245,0.10);color:var(--cream,#FFFCF5)}
#screen-topic-detail .review-choice-ltr{color:var(--accent,#FF8413)}
#screen-topic-detail .review-choice-row.correct-ans{background:rgba(34,197,94,0.10);border-color:rgba(34,197,94,0.35)}
#screen-topic-detail .review-choice-row.wrong-ans{background:rgba(239,68,68,0.08);border-color:rgba(239,68,68,0.30)}
#screen-topic-detail .review-choice-row.correct-ans .review-choice-ltr{color:#16a34a}
#screen-topic-detail .review-choice-row.wrong-ans .review-choice-ltr{color:#ef4444}
#screen-topic-detail .review-choice-your-ans{color:#ef4444}
#screen-topic-detail .review-explanation{background:rgba(34,197,94,0.05);border-color:rgba(34,197,94,0.15)}
#screen-topic-detail .review-exp-body{color:rgba(255,252,245,0.75)}
#screen-topic-detail .review-exp-topic-header{color:var(--accent,#FF8413)}
#screen-topic-detail .review-exp-label{color:rgba(255,252,245,0.65)}
#screen-topic-detail .review-exp-label.green-lbl{color:#16a34a}
#screen-topic-detail .review-exp-label.orange-lbl{color:var(--accent,#FF8413)}
#screen-topic-detail .review-exp-section{margin-top:10px}

/* ── Bottom action buttons ── */
.td-btn-practice{display:block;width:100%;padding:14px 20px;background:linear-gradient(135deg,#FF8413,#e06600);border:none;border-radius:14px;color:#fff;font-size:14px;font-weight:900;font-family:var(--font,'Montserrat');letter-spacing:0.2px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity .2s,transform .1s;box-shadow:0 4px 20px rgba(255,132,19,0.30)}
.td-btn-practice:hover{opacity:.9}
.td-btn-practice:active{transform:scale(0.98)}
.td-btn-ghost{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:12px 20px;background:transparent;border:1px solid rgba(255,255,255,0.12);border-radius:14px;color:rgba(255,252,245,0.60);font-size:13px;font-weight:700;font-family:var(--font,'Montserrat');cursor:pointer;transition:border-color .2s,color .2s}
.td-btn-ghost:hover{border-color:rgba(255,255,255,0.22);color:rgba(255,252,245,0.85)}

/* ═══════════════════════════════════════════
   STUDYLITICS AI REPORT SECTION
═══════════════════════════════════════════ */

/* --- Section container --- */
.sl-report-section{margin:28px 0 8px;padding:0 4px;display:flex;flex-direction:column;align-items:center;gap:10px}
.sl-report-heading{font-size:13px;font-weight:600;color:var(--text-muted);letter-spacing:0.2px;text-align:center}

/* --- Generate button (active state) --- */
.sl-report-btn{width:100%;padding:16px 20px;background:linear-gradient(135deg,#FF8413,#e06600);border:none;border-radius:14px;color:#fff;font-size:15px;font-weight:900;font-family:var(--font,'Montserrat');letter-spacing:0.3px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;transition:opacity .2s,transform .1s;box-shadow:0 4px 22px rgba(255,132,19,0.35)}
.sl-report-btn:hover{opacity:.9}
.sl-report-btn:active{transform:scale(0.98)}
.sl-report-btn i{font-size:18px}

/* --- Locked state (no API key) --- */
.sl-report-btn.sl-report-locked{background:var(--border,#e0dcd4);box-shadow:none;cursor:not-allowed;opacity:0.65}
.sl-report-btn.sl-report-locked:hover{opacity:0.65}
.sl-report-btn.sl-report-locked:active{transform:none}
.sl-report-locked-text{font-size:12px;font-weight:600;color:var(--text-muted);letter-spacing:0.2px;margin:0;display:none}
.sl-report-btn.sl-report-locked + .sl-report-locked-text{display:block}

/* --- Loading state (button text swap) --- */
.sl-report-btn.sl-report-loading{opacity:0.75;cursor:not-allowed}
.sl-report-btn.sl-report-loading:active{transform:none}

/* ═══════════════════════════════════════════
   STUDYLITICS AI REPORT OVERLAY
═══════════════════════════════════════════ */
.report-overlay{position:fixed;inset:0;z-index:9999;background:var(--cream,#FFFCF5);display:flex;flex-direction:column;overflow:hidden}
.report-overlay[hidden]{display:none}

/* --- Top bar --- */
.report-overlay-topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 12px;background:var(--cream,#FFFCF5);border-bottom:1px solid var(--border,#e0dcd4);flex-shrink:0}
.report-close-btn{width:36px;height:36px;border-radius:50%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--text-muted);cursor:pointer;transition:background .15s,color .15s;flex-shrink:0}
.report-close-btn:hover{background:rgba(4,27,53,0.07);color:var(--navy,#041B35)}
.report-overlay-title{font-size:16px;font-weight:900;color:var(--navy,#041B35);font-family:var(--font,'Montserrat');letter-spacing:0.2px}
.report-topbar-spacer{width:36px;flex-shrink:0}

/* --- Scrollable body --- */
.report-overlay-body{flex:1;overflow-y:auto;padding:24px 24px 16px;-webkit-overflow-scrolling:touch}

/* --- Loading state --- */
.report-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:220px}
.report-loading-spinner{width:40px;height:40px;border:3px solid rgba(255,132,19,0.2);border-top-color:#FF8413;border-radius:50%;animation:reportSpin 0.8s linear infinite}
@keyframes reportSpin{to{transform:rotate(360deg)}}
.report-loading-text{font-size:14px;font-weight:600;color:var(--text-muted);margin:0}

/* --- Report content typography --- */
.report-content{color:var(--text-main);line-height:1.7}
.report-content h2{font-size:14px;font-weight:900;color:var(--navy,#041B35);font-family:var(--font,'Montserrat');letter-spacing:0.3px;text-transform:uppercase;margin:28px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--accent,#FF8413)}
.report-content h2:first-child{margin-top:0}
.report-content p{font-size:14px;line-height:1.75;color:var(--text-main);margin:0 0 12px}
.report-content ul{margin:0 0 12px;padding-left:20px}
.report-content li{font-size:14px;line-height:1.7;color:var(--text-main);margin-bottom:6px}
.report-content strong{font-weight:800;color:var(--navy,#041B35)}
.report-content em{font-style:italic;color:var(--text-muted)}

/* --- Action bar --- */
.report-action-bar{display:flex;gap:10px;padding:12px 16px;background:var(--cream,#FFFCF5);border-top:1px solid var(--border,#e0dcd4);flex-shrink:0}
.report-action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:12px 8px;border:1.5px solid var(--border,#e0dcd4);border-radius:12px;background:transparent;font-size:12px;font-weight:800;font-family:var(--font,'Montserrat');color:var(--navy,#041B35);cursor:pointer;transition:background .15s,border-color .15s,color .15s;letter-spacing:0.2px}
.report-action-btn i{font-size:16px}
.report-action-btn:hover{background:rgba(4,27,53,0.05);border-color:rgba(4,27,53,0.2)}
.report-action-btn:active{transform:scale(0.97)}
.report-share-btn{border-color:var(--accent,#FF8413);color:var(--accent,#FF8413)}
.report-share-btn:hover{background:rgba(255,132,19,0.07);border-color:var(--accent,#FF8413)}
.report-pdf-btn{border-color:rgba(4,27,53,0.25)}
.report-action-close{border-color:rgba(4,27,53,0.2);color:var(--text-muted)}

/* Desktop: wider overlay with max-width */
@media(min-width:768px){
  .report-overlay{align-items:center}
  .report-overlay-topbar,.report-overlay-body,.report-action-bar{width:100%;max-width:680px;box-sizing:border-box}
  .report-overlay-body{padding:32px 32px 16px}
  .report-action-bar{padding:14px 32px}
  .report-content h2{font-size:15px}
  .report-content p,.report-content li{font-size:15px}
}

/* ── Print stylesheet for PDF export ── */
@media print{
  body > *:not(.report-overlay){display:none!important}
  .report-overlay{position:static!important;background:#fff!important;display:block!important}
  .report-overlay-topbar,.report-action-bar{display:none!important}
  .report-overlay-body{overflow:visible!important;padding:24px!important}
  .report-content h2{break-after:avoid;page-break-after:avoid}
  .report-content p,.report-content li{break-inside:avoid;page-break-inside:avoid}
}

/* ═══════════════════════════════════════════
   SIDEBAR COLLAPSE TOGGLE  (desktop only)
═══════════════════════════════════════════ */
@media(min-width:768px){

  /* --- Smooth width transition on the sidebar (collapse/expand only) ---
     Sprint C5: Scoped to .is-collapsing so the transition only fires when the
     toggle button is clicked. Previously, transition:width was permanently active
     on .sidebar — any child layout change (e.g. #sidebar-exam-cd switching from
     display:none to display:block) re-triggered the width transition, causing all
     four sidebar cards to continuously pulse in size. Now the JS toggle handler
     adds .is-collapsing for exactly the 0.28s window, then removes it. */
  .sidebar.is-collapsing{transition:width 0.28s cubic-bezier(0.4,0,0.2,1)}

  /* --- Sidebar footer: stack toggle + settings vertically --- */
  .sidebar-footer{display:flex;flex-direction:column;gap:3px}

  /* --- Toggle button: subtler variant of sidebar-nav-item --- */
  .sidebar-toggle-btn{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-md);font-size:12px;font-weight:700;color:rgba(255,252,245,0.38);letter-spacing:0.3px;transition:background .2s,color .2s;border:none;background:none;text-align:left;width:100%;cursor:pointer;font-family:var(--font)}
  .sidebar-toggle-btn i{font-size:18px;flex-shrink:0}
  .sidebar-toggle-btn:hover{background:rgba(255,255,255,0.05);color:rgba(255,252,245,0.65)}

  /* --- Monogram: hidden in expanded state, shown when collapsed --- */
  .sidebar-monogram{display:none;width:36px;height:36px;border-radius:10px;background:var(--accent);color:var(--navy);font-size:16px;font-weight:900;font-family:var(--font);align-items:center;justify-content:center;margin:0 auto;flex-shrink:0;letter-spacing:0}

  /* ─────────────────────────────────────────
     COLLAPSED STATE
  ───────────────────────────────────────── */
  .sidebar.sidebar-collapsed{width:64px;min-width:64px;max-width:64px;overflow-x:hidden}

  /* Header: centre-align, hide full logo + tagline, show monogram */
  .sidebar.sidebar-collapsed .sidebar-header{padding:14px 6px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-bottom:2px solid var(--accent)}
  .sidebar.sidebar-collapsed .sidebar-logo{display:none}
  .sidebar.sidebar-collapsed .sidebar-tagline{display:none}
  .sidebar.sidebar-collapsed .sidebar-monogram{display:flex}

  /* Nav: centre icons, hide labels */
  .sidebar.sidebar-collapsed .sidebar-nav{padding:12px 6px;align-items:stretch}
  .sidebar.sidebar-collapsed .sidebar-nav-item{justify-content:center;padding:10px 6px;gap:0}
  .sidebar.sidebar-collapsed .nav-label{display:none}

  /* Footer: centre-align toggle + settings icons */
  .sidebar.sidebar-collapsed .sidebar-footer{padding:12px 6px 20px;align-items:stretch}
  .sidebar.sidebar-collapsed .sidebar-toggle-btn{justify-content:center;padding:10px 6px;gap:0}

  /* Hide all sidebar widgets (use !important where JS sets inline display) */
  .sidebar.sidebar-collapsed .sidebar-streak-cal{display:none !important}
  .sidebar.sidebar-collapsed .sidebar-exam-cd{display:none !important}
  .sidebar.sidebar-collapsed .sidebar-exam-prompt{display:none !important}
  .sidebar.sidebar-collapsed .sidebar-exam-anon{display:none !important}
  .sidebar.sidebar-collapsed .sidebar-exam-input{display:none !important}
  .sidebar.sidebar-collapsed .scorecard-widget{display:none !important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME STANDARDISATION
   Studylitics · Quiz · Results/Review · Pre-Quiz → match Dashboard card style
   Dashboard is the master reference — these rules never touch dashboard HTML.
═══════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────────
   1. STUDYLITICS — All dark cards → white  (Dashboard card standard)
────────────────────────────────────────────────────────────────────────── */

/* Page canvas */
#screen-studylitics{background:var(--page)}

/* Base dark card shell → warm gradient */
.studylitics-card{background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%);border:1px solid var(--border);box-shadow:var(--shadow-card)}
.studylitics-card-label{color:var(--text-muted)}
.studylitics-info-btn{color:var(--text-muted)}
.studylitics-info-btn:hover{color:var(--accent)}

/* Section gradient overrides: orange and purple glows → warm gradient card */
.studylitics-readiness,.studylitics-countdown,.studylitics-quiz-history{background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%)!important;border-color:var(--border)!important;box-shadow:var(--shadow-card)!important}
.studylitics-topic-breakdown,.studylitics-trend,.studylitics-weak-areas{background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%)!important;border-color:var(--border)!important;box-shadow:var(--shadow-card)!important}
.snapshot-card{background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%)!important;border:1px solid var(--border)!important;box-shadow:var(--shadow-card)!important}
/* Dark mode: the !important gradient above renders in dark mode too — restore dark card colour */
[data-theme="dark"] .studylitics-card{background:var(--card)}
[data-theme="dark"] .studylitics-readiness,[data-theme="dark"] .studylitics-countdown,[data-theme="dark"] .studylitics-quiz-history{background:var(--card)!important}
[data-theme="dark"] .studylitics-topic-breakdown,[data-theme="dark"] .studylitics-trend,[data-theme="dark"] .studylitics-weak-areas{background:var(--card)!important}
[data-theme="dark"] .snapshot-card{background:var(--card)!important}

/* Section info button colour overrides → uniform muted */
.studylitics-readiness .studylitics-info-btn,.studylitics-countdown .studylitics-info-btn,
.studylitics-quiz-history .studylitics-info-btn,.studylitics-topic-breakdown .studylitics-info-btn,
.studylitics-weak-areas .studylitics-info-btn,.studylitics-trend .studylitics-info-btn{color:var(--text-muted)}
.studylitics-readiness .studylitics-info-btn:hover,.studylitics-countdown .studylitics-info-btn:hover,
.studylitics-quiz-history .studylitics-info-btn:hover,.studylitics-topic-breakdown .studylitics-info-btn:hover,
.studylitics-weak-areas .studylitics-info-btn:hover,.studylitics-trend .studylitics-info-btn:hover{color:var(--accent)}
.snapshot-info-btn{color:var(--text-muted)!important}
.snapshot-info-btn:hover{color:var(--accent)!important}

/* Readiness ring */
.readiness-score-val{color:var(--text-main)}
.readiness-score-label{color:var(--text-muted)}
.ring-track{stroke:rgba(4,27,53,0.10)}
.readiness-tier-badge{background:rgba(4,27,53,0.05);border-color:var(--border);color:var(--text-muted)}

/* Factor breakdown */
.rf-label{color:var(--text-muted)}
.rf-bar-wrap{background:rgba(4,27,53,0.08)}
.rf-val{color:var(--text-muted)}
/* Disclaimer — light mode uses adaptive muted token and border */
.readiness-disclaimer{color:var(--text-muted);border-top-color:var(--border)}

/* Exam Countdown card */
.countdown-no-date i{color:var(--text-muted)}
.countdown-no-date-text{color:var(--text-sub)}
.countdown-number{color:var(--text-main)}
.countdown-unit{color:var(--text-muted)}
.countdown-exam-date{color:var(--text-muted)}
.countdown-urgency-bar-wrap{background:rgba(4,27,53,0.08)}
.countdown-urgency-label{color:var(--text-muted)}
.countdown-change-btn{color:var(--text-muted)}
.countdown-change-btn:hover{color:var(--text-main)}

/* Inline date picker inside countdown card */
.countdown-date-picker-label{color:var(--text-muted)}
.countdown-date-field{color:var(--text-main);background:var(--card-alt);border-color:var(--border);color-scheme:light}
.countdown-date-cancel-btn{color:var(--text-sub);border-color:var(--border)}
.countdown-date-cancel-btn:hover{background:var(--card-alt);color:var(--text-main)}

/* Study time block inside countdown card */
.cst-divider{background:var(--border)}
.cst-label{color:var(--text-muted)}
.cst-total{color:var(--text-main)}
.cst-session{color:#F97316}

/* Snapshot cards */
.snapshot-card-val{color:var(--text-main)}
.snapshot-card-key{color:var(--text-muted)}

/* Topic circles — SVG element fills and label */
.tc-track{stroke:rgba(4,27,53,0.10)}
.tc-bg{fill:rgba(4,27,53,0.03)}
.tc-pct{fill:var(--navy)}
.tc-pct-empty{fill:rgba(4,27,53,0.45)}
.topic-circle-label{color:var(--text-muted)}
.topic-tap-instruction{color:var(--text-muted)}

/* Weak areas card */
.weak-area-name{color:var(--text-main)}
.weak-area-meta{color:var(--text-muted)}
.weak-area-bar-wrap{background:rgba(4,27,53,0.08)}
.weak-area-pct{color:#7c3aed}

/* Accuracy trend chart (SVG axis/grid lines) */
.trend-grid-line{stroke:rgba(4,27,53,0.07)}
.trend-axis-label{fill:rgba(4,27,53,0.50)}
.trend-axis-label-y{fill:rgba(4,27,53,0.50)}

/* Quiz History rows */
.history-row{border-bottom-color:var(--border)}
.history-score{color:var(--text-main)}
.history-qcount,.history-dur,.history-date{color:var(--text-muted)}
.history-expand-btn{color:var(--text-muted)}
.history-expand-btn:hover{color:var(--navy)}
.hmock-scaled{color:var(--text-muted)}
.htb-topic{color:var(--text-muted)}
.htb-bar-track{background:rgba(4,27,53,0.07)}
.history-show-more-btn{background:var(--card-alt);border-color:var(--border);color:var(--text-sub)}
.history-show-more-btn:hover{background:rgba(4,27,53,0.06);color:var(--text-main)}
.history-empty-state i,.history-empty-state p{color:var(--text-muted)}

/* Desktop history row hover */
@media(min-width:768px){.history-row-main:hover{background:rgba(4,27,53,0.03)}}

/* Empty states */
.studylitics-empty-state i,.studylitics-empty-state p{color:var(--text-muted)}
.es-svg{stroke:rgba(4,27,53,0.18)}

/* ──────────────────────────────────────────────────────────────────────────
   2. QUIZ SCREEN — Remove dark header bar; plain white card panels
────────────────────────────────────────────────────────────────────────── */

/* Screen background */
#screen-quiz{background:var(--page)}

/* Topbar — strip navy bar; clean light row */
.quiz-topbar{background:var(--page);border-bottom:1px solid var(--border)}
.quiz-topbar-label{color:var(--text-main);letter-spacing:0.2px}
.quiz-progress-track{background:none}
.progress-dash{background:rgba(4,27,53,0.12)}
.quiz-q-counter{color:var(--text-muted)}
.quiz-back-btn{background:var(--card);border-color:var(--border);color:var(--text-muted)}
.quiz-back-btn:hover{background:var(--card-alt);color:var(--accent)}

/* Desktop — remove frosted-glass pill; plain white card + normal header row */
@media(min-width:768px){
  #screen-quiz{background:var(--page)}
  #screen-quiz .quiz-topbar{background:var(--page);border:none;border-bottom:1px solid var(--border);border-radius:0;margin:0;top:0;max-width:none;width:100%}
  #screen-quiz .quiz-body,#screen-quiz .quiz-right-panel{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-card);border-radius:var(--radius-xl);backdrop-filter:none;-webkit-backdrop-filter:none}
  [data-theme="dark"] #screen-quiz .quiz-body,[data-theme="dark"] #screen-quiz .quiz-right-panel{background:var(--card)!important;box-shadow:var(--shadow-card)}
}

/* ──────────────────────────────────────────────────────────────────────────
   3. RESULTS + REVIEW SCREEN — Score ring hole; dark hero → white card
────────────────────────────────────────────────────────────────────────── */

/* Score ring inner hole → page background so it blends */
.results-score-ring::before{background:var(--page)}

/* Review score hero — dark card → white */
.review-score-hero{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-card)}
.review-ring-hole{background:var(--page)!important}
.review-score-big-denom{color:var(--text-muted)}
.review-tgg-voice{color:var(--text-main)}

/* Review filter tabs — dark → light */
.review-tab{background:var(--card);border-color:var(--border);color:var(--text-sub);box-shadow:none}
.review-tab:hover{border-color:rgba(249,115,22,0.40);color:var(--accent)}
.review-tab.active{border-color:var(--accent);background:rgba(249,115,22,0.08);color:var(--accent)}
.review-tab-count{background:rgba(4,27,53,0.08);color:var(--text-muted)}
.review-tab.active .review-tab-count{background:var(--accent);color:var(--navy)}

/* Performance Assessment cards (Topic Performance + SJT vs Regular) */
.perf-summary{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-card);color:var(--text-main)}
.perf-card{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-card)}
.perf-circle-hole{background:var(--page)!important}
.perf-circle-name{color:var(--text-muted)}

/* ──────────────────────────────────────────────────────────────────────────
   4. PRE-QUIZ SCREENS — Remove dark header bar; light page background
────────────────────────────────────────────────────────────────────────── */

/* All pre-quiz screen backgrounds → page light */
#screen-prequiz,#screen-timed-prequiz,#screen-beast-prequiz,
#screen-weakest-prequiz,#screen-unfinished-prequiz,#screen-targeted-prequiz{background:var(--page)}

/* Topbar — strip navy bar; clean light row */
.prequiz-topbar{background:var(--page);border-bottom:1px solid var(--border)}
.prequiz-topbar-label{color:var(--text-main)}

/* Active feedback option — dark text on light orange tint (was white on dark) */
.prequiz-feedback-opt.active .prequiz-feedback-title{color:var(--text-main)}
.prequiz-feedback-opt.active .prequiz-feedback-desc{color:var(--text-sub)}
#screen-prequiz .prequiz-feedback-opt.active .prequiz-feedback-title,
#screen-timed-prequiz .prequiz-feedback-opt.active .prequiz-feedback-title{color:var(--text-main)}
#screen-prequiz .prequiz-feedback-opt.active .prequiz-feedback-desc,
#screen-timed-prequiz .prequiz-feedback-opt.active .prequiz-feedback-desc{color:var(--text-sub)}

/* topic-off-badge — dark glass → light */
.topic-off-badge{background:rgba(4,27,53,0.06);color:var(--text-muted)}

/* BYO screen prequiz-opts — remove dark overrides; use standard light defaults */
#screen-byo .prequiz-opt{background:var(--card);border-color:var(--border);color:var(--text-sub)}
#screen-byo .prequiz-opt:hover{border-color:rgba(249,115,22,0.40);color:var(--accent)}
#screen-byo .prequiz-opt.active{border-color:var(--accent);background:rgba(249,115,22,0.10);color:var(--accent)}

/* Desktop — override dark gradient backgrounds and floating topbar pills */
@media(min-width:768px){
  #screen-prequiz,#screen-timed-prequiz{background:var(--page)}
  #screen-prequiz .prequiz-topbar,#screen-timed-prequiz .prequiz-topbar{background:var(--page);border:none;border-bottom:1px solid var(--border);border-radius:0;margin:0;top:0;max-width:none;width:100%}
  /* Beast mode keeps its special red-bordered floating topbar shape but loses navy bg */
  #screen-beast-prequiz .prequiz-topbar{background:var(--page)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPLETE LIGHT STANDARDISATION — PHASE 2
   Global bg #E8E2D9 · Dashboard-card style · Dark nav topbars restored
   Dashboard untouched. All changes are append-only overrides.
═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. GLOBAL PAGE BACKGROUND: #E8E2D9 across every screen ──────────────── */
#screen-topic-detail,#screen-studylitics,
#screen-quiz,#screen-results,#screen-review,#screen-settings,
#screen-prequiz,#screen-timed-prequiz,
#screen-beast-prequiz,#screen-weakest-prequiz,
#screen-unfinished-prequiz,#screen-targeted-prequiz,
#screen-byo,#screen-byo-confirm,
#screen-mock-briefing,#screen-mock-prequiz,
#screen-mock-exam,#screen-mock-break,#screen-mock-results{background:#E8E2D9}

.quiz-body,.results-body,.review-body{background:#E8E2D9}
.results-score-ring::before,.review-ring-hole,.perf-circle-hole{background:#E8E2D9!important}

@media(min-width:768px){
  #screen-prequiz,#screen-timed-prequiz,#screen-beast-prequiz,
  #screen-weakest-prequiz,#screen-unfinished-prequiz,#screen-targeted-prequiz,
  #screen-mock-briefing,#screen-mock-prequiz,
  #screen-mock-exam,#screen-mock-break,#screen-mock-results{background:#E8E2D9}
  .quiz-body{background:#E8E2D9}
  /* Mock exam engine: remove frosted-glass → plain white card (matches quiz screen) */
  .mock-exam-body{background:var(--card)!important;border:1px solid var(--border)!important;box-shadow:var(--shadow-card)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .mock-exam-right-panel{background:var(--card)!important;border:1px solid var(--border)!important;box-shadow:var(--shadow-card)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  #screen-mock-exam{background:#E8E2D9}
  #screen-mock-exam .mock-exam-topbar{background:var(--navy);border:none;border-bottom:2px solid var(--accent);border-radius:0;margin:0;top:0;max-width:none;width:100%}
}

/* ── 2. PRE-QUIZ TOPBARS: Restore dark navy + orange underline ─────────────
   Overrides both the original floating styles and the previous-sprint light styles.
   Specificity matches previous sprint's ID+class rules (placed later → wins). */
.prequiz-topbar{background:var(--navy);border-bottom:2px solid var(--accent)}
.prequiz-topbar-label{color:var(--cream)}
.prequiz-topbar .quiz-back-btn{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.12);color:rgba(255,252,245,0.70)}
.prequiz-topbar .quiz-back-btn:hover{background:rgba(255,132,19,0.15);color:var(--accent)}

@media(min-width:768px){
  /* Override previous sprint's light desktop topbar rules (ID+class specificity) */
  #screen-prequiz .prequiz-topbar,#screen-timed-prequiz .prequiz-topbar,
  #screen-beast-prequiz .prequiz-topbar,#screen-weakest-prequiz .prequiz-topbar,
  #screen-unfinished-prequiz .prequiz-topbar,#screen-targeted-prequiz .prequiz-topbar,
  #screen-byo .prequiz-topbar,#screen-byo-confirm .prequiz-topbar,
  #screen-mock-briefing .prequiz-topbar,#screen-mock-prequiz .prequiz-topbar,
  #screen-settings .prequiz-topbar{
    background:var(--navy);
    border:none;
    border-bottom:2px solid var(--accent);
    border-radius:0;
    margin:0;
    top:0;
    max-width:none;
    width:100%
  }
}

/* ── 3. TOPIC DETAIL — stat cards, question cards, text visibility ─────────── */
/* Stat cards */
.td-stat-card{background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%);border:1px solid rgba(249,115,22,0.22);box-shadow:0 0 20px rgba(0,0,0,0.08),0 4px 16px rgba(0,0,0,0.10),0 8px 32px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.06)}
.td-stat-val{color:var(--text-main)}
.td-stat-key{color:var(--text-muted)}
.td-stat-accuracy .td-stat-val{color:#F97316}
.td-stat-correct .td-stat-val{color:#16a34a}
.td-stat-incorrect .td-stat-val{color:#dc2626}

/* Circle + trend cards */
.td-circle-card,.td-trend-card{background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%);border-color:rgba(249,115,22,0.22);box-shadow:0 0 20px rgba(0,0,0,0.08),0 4px 16px rgba(0,0,0,0.10),0 8px 32px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.06)}
.td-circle-track{stroke:rgba(4,27,53,0.10)}
.td-circle-pct-val{fill:var(--navy)}
.td-circle-pct-lbl{fill:rgba(4,27,53,0.50)}

/* Questions card */
.td-questions-card{background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%);border-color:rgba(249,115,22,0.22);box-shadow:0 0 20px rgba(0,0,0,0.08),0 4px 16px rgba(0,0,0,0.10),0 8px 32px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.06)}
.td-q-count-badge{color:var(--text-muted)}

/* Question cards — fix invisible white-on-white text */
.td-q-card{background:var(--card-alt);border:1px solid var(--border)}
.td-q-card:hover{border-color:rgba(249,115,22,0.40)}
.td-q-text{color:var(--text-main)}
.td-q-expand-icon{color:var(--text-muted)}
.td-q-detail{border-top-color:var(--border)}

/* Revert dark-context review-choice overrides: use standard light styles */
#screen-topic-detail .td-q-detail{background:var(--card-alt);border-color:var(--border)}
#screen-topic-detail .review-choice-row{background:var(--card);border-color:var(--border);color:var(--text-main)}
#screen-topic-detail .review-choice-ltr{color:var(--accent)}
#screen-topic-detail .review-choice-row.correct-ans{background:rgba(34,197,94,0.08);border-color:rgba(34,197,94,0.40)}
#screen-topic-detail .review-choice-row.wrong-ans{background:rgba(239,68,68,0.07);border-color:rgba(239,68,68,0.35)}
#screen-topic-detail .review-choice-row.correct-ans .review-choice-ltr{color:#16a34a}
#screen-topic-detail .review-choice-row.wrong-ans .review-choice-ltr{color:#dc2626}
#screen-topic-detail .review-explanation{background:rgba(34,197,94,0.06);border-color:rgba(34,197,94,0.18)}
#screen-topic-detail .review-exp-body{color:var(--text-main)}
#screen-topic-detail .review-exp-label{color:var(--text-muted)}

/* Ghost back button */
.td-btn-ghost{border-color:var(--border);color:var(--text-muted)}
.td-btn-ghost:hover{border-color:rgba(249,115,22,0.40);color:var(--accent)}

/* Desktop hover */
@media(min-width:768px){.td-q-card:hover{border-color:rgba(249,115,22,0.40)}}

/* ── 4. BEAST MODE — title, stat cards, rules card ──────────────────────── */
.beast-title{color:var(--text-main)}
.beast-subtitle{color:var(--text-muted)}
.beast-stat-card{background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%);border-color:rgba(249,115,22,0.22);box-shadow:0 0 20px rgba(0,0,0,0.08),0 4px 16px rgba(0,0,0,0.10),0 8px 32px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.06)}
.beast-stat-val{color:var(--text-main)}
.beast-stat-key{color:var(--text-muted)}
.beast-rules-card{background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%);border-color:rgba(249,115,22,0.22);box-shadow:0 0 20px rgba(0,0,0,0.08),0 4px 16px rgba(0,0,0,0.10),0 8px 32px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.06)}
.beast-rule-name{color:var(--text-main)}
.beast-rule-desc{color:var(--text-muted)}

/* ── 5. WEAKEST SUBJECTS — topic cards, dial holes, feedback ────────────── */
.weakest-topic-card{background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%);border:1px solid rgba(249,115,22,0.22);border-left:3px solid #dc2626;box-shadow:0 0 20px rgba(0,0,0,0.08),0 4px 16px rgba(0,0,0,0.10),0 8px 32px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.06)}
.weakest-topic-card:hover{border-color:rgba(249,115,22,0.50);border-left-color:#dc2626}
.weakest-card-rank{color:var(--text-muted)}
.weakest-card-topic{color:var(--text-main)}
.weakest-card-meta{color:rgba(0,0,0,0.60)}
.card-accuracy-label{color:rgba(0,0,0,0.50)}
.card-accuracy-bar{background:rgba(0,0,0,0.08)}
.weakest-accuracy-banner{color:var(--text-main)}
.weakest-accuracy-banner span,.weakest-accuracy-banner strong{color:var(--text-main)}
#screen-weakest-prequiz .prequiz-feedback-opt.active .prequiz-feedback-title{color:var(--text-main)}
#screen-weakest-prequiz .prequiz-feedback-opt.active .prequiz-feedback-desc{color:var(--text-sub)}

/* ── 6. UNFINISHED BUSINESS — hero card, feedback ───────────────────────── */
.unfinished-summary-card{background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%);border:1px solid rgba(249,115,22,0.22);box-shadow:0 0 20px rgba(0,0,0,0.08),0 4px 16px rgba(0,0,0,0.10),0 8px 32px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.06)}
.unfinished-summary-label{color:var(--text-main)}
#screen-unfinished-prequiz .prequiz-feedback-opt.active .prequiz-feedback-title{color:var(--text-main)}
#screen-unfinished-prequiz .prequiz-feedback-opt.active .prequiz-feedback-desc{color:var(--text-sub)}

/* ── 7. TARGETED STUDY — topic cards, excluded note, feedback ───────────── */
.targeted-topic-card{background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%);border:1.5px solid rgba(249,115,22,0.22);box-shadow:0 0 20px rgba(0,0,0,0.08),0 4px 16px rgba(0,0,0,0.10),0 8px 32px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.06)}
.targeted-topic-card:hover:not(.targeted-excluded){border-color:rgba(249,115,22,0.55);background:rgba(249,115,22,0.04)}
.targeted-topic-card.targeted-selected{border-color:#F97316;background:rgba(249,115,22,0.06);box-shadow:0 4px 20px rgba(249,115,22,0.15)}
.targeted-card-name{color:var(--text-main)}
.targeted-card-meta{color:rgba(0,0,0,0.60)}
.targeted-topic-card.targeted-excluded{border-color:var(--border)!important;background:var(--card)!important}
.targeted-excluded-note{background:rgba(4,27,53,0.06);color:var(--text-muted)}
#screen-targeted-prequiz .prequiz-feedback-opt.active .prequiz-feedback-title{color:var(--text-main)}
#screen-targeted-prequiz .prequiz-feedback-opt.active .prequiz-feedback-desc{color:var(--text-sub)}

/* ── 8. MOCK BRIEFING (Prometric Guidelines) ─────────────────────────────── */
.mock-title{color:var(--text-main)}
.mock-top-badge{background:rgba(249,115,22,0.08);border-color:rgba(249,115,22,0.25);color:var(--text-sub)}
.mock-source-note span{color:var(--text-sub)}
.mock-rules-card{background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%);border-color:rgba(249,115,22,0.22);box-shadow:0 0 20px rgba(0,0,0,0.08),0 4px 16px rgba(0,0,0,0.10),0 8px 32px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.06)}
.mock-rule-name{color:var(--text-main)}
.mock-rule-desc{color:var(--text-muted)}
.mock-tip-block span{color:var(--text-sub)}

/* ── 9. FULL MOCK EXAM PRE-QUIZ ──────────────────────────────────────────── */
.mock-prequiz-title{color:var(--text-main)}
.mock-prequiz-subtitle{color:var(--text-muted)}
.mock-prequiz-stat-card{background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%);border-color:rgba(249,115,22,0.22);box-shadow:0 0 20px rgba(0,0,0,0.08),0 4px 16px rgba(0,0,0,0.10),0 8px 32px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.06)}
.mock-prequiz-stat-val{color:var(--text-main)}
.mock-prequiz-stat-key{color:var(--text-muted)}
.mock-compare-card{background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%);border-color:rgba(249,115,22,0.22);box-shadow:0 0 20px rgba(0,0,0,0.08),0 4px 16px rgba(0,0,0,0.10),0 8px 32px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.06)}
.mock-compare-th{background:rgba(249,115,22,0.06);border-bottom-color:rgba(249,115,22,0.18);color:var(--text-muted)}
.mock-compare-th-feature{color:var(--text-muted)}
.mock-compare-th-ours{color:var(--accent)}
.mock-compare-row:not(:last-child) td{border-bottom-color:var(--border)}
.mock-compare-row:hover td{background:rgba(249,115,22,0.03)}
.mock-compare-feature{color:var(--text-sub)}
.mock-compare-real{color:var(--text-main)}
.mock-commitment-block{background:rgba(220,38,38,0.06);border-color:rgba(220,38,38,0.25)}
.mock-commitment-title{color:var(--text-main)}
.mock-commitment-desc{color:var(--text-muted)}
.mock-desktop-note span{color:var(--text-sub)}

/* ── 10. BUILD YOUR OWN ──────────────────────────────────────────────────── */
.byo-subtitle{color:var(--text-muted)}
.byo-group-label{color:var(--text-muted)}
.byo-topic-card{background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%);border-color:rgba(249,115,22,0.22);color:var(--text-sub)}
.byo-topic-card:hover{border-color:rgba(249,115,22,0.55);color:var(--accent)}
.byo-topic-card.active{border-color:var(--accent);background:rgba(249,115,22,0.08);color:var(--accent)}
.byo-timer-reveal{background:var(--card-alt);border-color:var(--border)}
.byo-timer-reveal-label{color:var(--text-muted)}
.byo-pool-card{background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%);border-color:rgba(249,115,22,0.22)}
.byo-pool-card:hover{border-color:rgba(249,115,22,0.50)}
.byo-pool-card.active{border-color:var(--accent);background:rgba(249,115,22,0.06)}
.byo-pool-icon{background:rgba(4,27,53,0.06);color:var(--text-muted)}
.byo-pool-card.active .byo-pool-icon{background:rgba(249,115,22,0.12);color:var(--accent)}
.byo-pool-title{color:var(--text-main)}
.byo-pool-desc{color:var(--text-muted)}
.byo-pool-card.active .byo-pool-title{color:var(--text-main)}
.byo-pool-card.active .byo-pool-desc{color:var(--text-sub)}
.byo-summary{background:var(--card-alt);border-color:var(--border)}
.byo-summary-text{color:var(--text-main)}
#screen-byo .prequiz-opt{background:var(--card);border-color:var(--border);color:var(--text-sub)}
#screen-byo .prequiz-opt:hover{border-color:rgba(249,115,22,0.45);color:var(--accent)}
#screen-byo .prequiz-opt.active{border-color:var(--accent);background:rgba(249,115,22,0.10);color:var(--accent)}

/* ── 11. BYO CONFIRM ────────────────────────────────────────────────────── */
#screen-byo-confirm{background:#E8E2D9}
.byo-confirm-count{color:var(--text-main)}
.byo-confirm-card{background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%);border:1px solid rgba(249,115,22,0.22);box-shadow:0 0 20px rgba(0,0,0,0.08),0 4px 16px rgba(0,0,0,0.10),0 8px 32px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.06)}
.byo-confirm-card-text{color:var(--text-main)}
.byo-confirm-notice span{color:var(--text-sub)}
.byo-change-setup-btn{color:var(--text-muted);border-color:var(--border)}
.byo-change-setup-btn:hover{background:var(--card-alt);color:var(--text-main)}

/* ── 12. MOCK EXAM BREAK SCREEN ─────────────────────────────────────────── */
.mock-break-title{color:var(--text-main)}
.mock-break-subtitle{color:var(--text-muted)}
.mock-break-reminder span{color:var(--text-sub)}
.mock-break-stats{background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%);border:1px solid rgba(249,115,22,0.22);box-shadow:0 0 20px rgba(0,0,0,0.08),0 4px 16px rgba(0,0,0,0.10),0 8px 32px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.06)}
.mock-break-stat-divider{background:var(--border)}
.mock-break-stat-num{color:var(--text-main)}
.mock-break-stat-key{color:var(--text-muted)}

/* ── 13. MOCK EXAM RESULTS SCREEN ──────────────────────────────────────── */
.mock-res-score-hero{background:rgba(249,115,22,0.04);border-bottom-color:var(--border)}
.mock-res-score-num{color:var(--text-main)}
.mock-res-score-max{color:var(--text-muted)}
.mock-res-score-explain{color:var(--text-sub)}
.mock-res-scaled-label{color:var(--text-muted)}
.mock-res-stats-row{border-bottom-color:var(--border)}
.mock-res-stat-card{background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%);border:1px solid rgba(249,115,22,0.22);box-shadow:0 0 20px rgba(0,0,0,0.08),0 4px 16px rgba(0,0,0,0.10),0 8px 32px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.06)}
.mock-res-stat-val{color:var(--text-main)}
.mock-res-stat-key{color:var(--text-muted)}
.mock-res-topic-grid{border-bottom-color:var(--border)}
.mock-res-topic-count{color:var(--text-muted)}
.perf-circle-name{color:var(--text-muted)}
/* Revert dark-context review card overrides inside mock results */
#screen-mock-results .review-q-card{background:var(--card);border-color:var(--border)}
#screen-mock-results .review-q-card:hover{border-color:rgba(249,115,22,0.45)}
#screen-mock-results .review-q-text{color:var(--text-main)}
#screen-mock-results .review-q-num{color:var(--text-muted)}
#screen-mock-results .review-q-expand-icon{color:var(--text-muted)}
#screen-mock-results .review-q-detail{background:var(--card-alt);border-color:var(--border)}
#screen-mock-results .review-choice-row{background:var(--card);border-color:var(--border);color:var(--text-main)}
#screen-mock-results .review-choice-ltr{color:var(--accent)}
#screen-mock-results .review-choice-row.correct-ans{background:rgba(34,197,94,0.08);border-color:rgba(34,197,94,0.40)}
#screen-mock-results .review-choice-row.wrong-ans{background:rgba(239,68,68,0.07);border-color:rgba(239,68,68,0.35)}
#screen-mock-results .review-choice-row.correct-ans .review-choice-ltr{color:#16a34a}
#screen-mock-results .review-choice-row.wrong-ans .review-choice-ltr{color:#ef4444}
#screen-mock-results .review-explanation{background:rgba(34,197,94,0.06);border-color:rgba(34,197,94,0.18)}
#screen-mock-results .review-exp-body{color:var(--text-main)}
#screen-mock-results .review-exp-label{color:var(--text-muted)}
#screen-mock-results .review-exp-label.green-lbl{color:#15803d}
#screen-mock-results .review-exp-label.orange-lbl{color:#F97316}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 3 — Card glow · Progress bar · Coach panel · Modals · Review · Night mode
═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. GLOBAL: warm gradient tint on all standard white cards ──────────── */
/* Cards that previously used plain var(--card) white now get the warm tint */
.mode-card.unlocked,.mode-card.locked,.qotd-card,
.prequiz-feedback-opt,.settings-row,.accent-swatches,.settings-topic-row,.shrm-news-card,
.exam-date-input-wrap,.mob-exam-cd-card{
  background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%)
}
/* ── 1b. DARK MODE: restore dark card background, undo the light gradient ── */
[data-theme="dark"] .mode-card.unlocked,[data-theme="dark"] .mode-card.locked,[data-theme="dark"] .qotd-card,
[data-theme="dark"] .prequiz-feedback-opt,[data-theme="dark"] .settings-row,[data-theme="dark"] .accent-swatches,[data-theme="dark"] .settings-topic-row,[data-theme="dark"] .shrm-news-card,
[data-theme="dark"] .exam-date-input-wrap,[data-theme="dark"] .mob-exam-cd-card{
  background:var(--card)
}
/* Orange hover border on interactive cards */
.mode-card.unlocked:hover,.mode-card.locked:hover,.qotd-card:hover,
.settings-row:hover,.settings-topic-row:hover,.shrm-news-card:hover{
  border-color:#F97316
}

/* ── 2. QUIZ BODY + RIGHT PANEL: warm gradient, stronger shadow, orange hover ── */
@media(min-width:768px){
  #screen-quiz .quiz-body,#screen-quiz .quiz-right-panel{
    background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%)!important;
    box-shadow:0 0 20px rgba(0,0,0,0.08),0 4px 16px rgba(0,0,0,0.10),0 8px 32px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.06)!important;
    border:1px solid rgba(249,115,22,0.22)!important
  }
  #screen-quiz .quiz-body:hover,#screen-quiz .quiz-right-panel:hover{border-color:#F97316!important}
}

/* ── 3. QUIZ PROGRESS BAR: constrain to content card width on desktop ─────
   Padding shifts the topbar content to start at the same left offset as
   the quiz card group so the progress bar no longer spans the full viewport. */
@media(min-width:768px){
  #screen-quiz .quiz-topbar{
    padding-left:calc(20vw - 48px);
    background:#E8E2D9
  }
}

/* ── 4. COACH TGG PANEL: align top with quiz card; apply card treatment ─── */
@media(min-width:768px){
  .coach-panel{
    top:var(--header-h);   /* 64px — exact top edge of quiz body card */
    background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:0 0 20px rgba(0,0,0,0.08),0 4px 16px rgba(0,0,0,0.10),0 8px 32px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.06);
    border:1px solid rgba(249,115,22,0.22)
  }
  /* Coach btn: vertically centred on the panel (header + half of 766px panel height) */
  .coach-btn{top:calc(var(--header-h) + 383px)}
  .coach-btn:hover{transform:translateY(calc(-50% - 2px))}
}

/* ── 5. ALL MODALS: warm gradient + stronger shadow + orange border ──────── */
/* submit, exhausted, and any other overlay card */
.submit-modal-box:hover{border-color:#F97316}
.exhausted-modal-box{
  background:rgba(255,255,255,0.78);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 8px 32px rgba(0,0,0,0.18)
}

/* ── 6. SESSION REVIEW SCREEN: card treatment on all panel cards ─────────── */
.review-score-hero{
  background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%);
  transition:border-color .2s
}
.review-score-hero:hover{border-color:#F97316}
.perf-summary,.perf-card{
  background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%);
  transition:border-color .2s
}
.perf-summary:hover,.perf-card:hover{border-color:#F97316}
.review-actions .btn-back-dash{
  background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%)
}
.review-actions .btn-back-dash:hover{border-color:#F97316}

/* ── 7. NIGHT MODE TOGGLE: sidebar row (desktop only) ──────────────────── */
.sidebar-night-row{
  display:none;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:background .2s;
  border:none;
  background:none;
  width:100%;
  font-family:var(--font);
  text-align:left
}
.sidebar-night-row:hover{background:rgba(255,255,255,0.05)}
.sidebar-night-icon{font-size:18px;flex-shrink:0;color:rgba(255,252,245,0.65);line-height:1}
.sidebar-night-label{font-size:12px;font-weight:700;color:rgba(255,252,245,0.65);letter-spacing:0.3px;flex:1}
.sidebar-night-toggle{
  width:38px;height:21px;
  border-radius:100px;
  background:rgba(255,255,255,0.15);
  border:none;cursor:pointer;
  position:relative;
  transition:background .25s;
  flex-shrink:0;padding:0
}
.sidebar-night-toggle[aria-checked="true"]{background:var(--accent)}
.sidebar-night-thumb{
  position:absolute;top:2px;left:2px;
  width:17px;height:17px;border-radius:50%;
  background:#fff;
  transition:transform .25s;
  display:block;
  box-shadow:0 1px 3px rgba(0,0,0,0.25)
}
.sidebar-night-toggle[aria-checked="true"] .sidebar-night-thumb{transform:translateX(17px)}

@media(min-width:768px){
  .sidebar-night-row{display:flex}
  /* Collapsed sidebar: icon only — hide label and toggle */
  .sidebar.sidebar-collapsed .sidebar-night-row{justify-content:center;padding:10px 6px}
  .sidebar.sidebar-collapsed .sidebar-night-label,
  .sidebar.sidebar-collapsed .sidebar-night-toggle{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   QUIZ SCREEN LAYOUT — solid borders · exact progress bar · card spacing
   Applies to all quiz modes that use the standard question layout.
═══════════════════════════════════════════════════════════════════════════ */
@media(min-width:768px){

  /* ── 1 & 2: Solid always-on #F97316 border on all three panels ───────────── */
  #screen-quiz .quiz-body{border:1.5px solid #F97316!important}
  #screen-quiz .quiz-right-panel{border:1.5px solid #F97316!important}
  .coach-panel{border:1.5px solid #F97316!important}

  /* ── 3: Progress bar — moved into content wrapper, spans card group width ── */

  /* Turn off the Phase 3 topbar padding-left (bar is no longer in topbar) */
  #screen-quiz .quiz-topbar{padding-left:20px}

  /* Content wrapper: flex-wrap so the progress bar takes its own first line */
  .quiz-content-wrapper{
    flex-wrap:wrap;
    align-content:flex-start;
    row-gap:0;
    padding-top:16px   /* visual breathing room below the topbar */
  }

  /* Progress bar: explicit pixel width = card group max. */
  .quiz-content-wrapper > .quiz-progress-track{
    flex:none;
    width:952px;        /* quiz-body(680) + gap(12) + right-panel(260) */
    max-width:100%;
    height:6px;
    margin-bottom:10px;
    display:flex
  }
  /* Timer bar: constrained to card group width, matching content-wrapper offset */
  #quiz-timer-bar-wrap{
    margin-left:calc(20vw - 48px);
    margin-right:24px;
    max-width:952px;
    height:6px
  }
  #quiz-timer-bar-fill{height:6px}
  /* Mock exam: dashed progress bar aligned to content-wrapper offset */
  #mock-progress-track{
    margin-left:calc(20vw - 48px);
    margin-right:24px;
    max-width:952px
  }

  /* ── 4: Move cards down — coach panel top updated to match card top edge ─── */
  /* Card top = topbar(64px) + padding-top(16px) + bar(6px) + margin(10px) = 96px */
  .coach-panel{top:calc(var(--header-h) + 30px)}
  .coach-btn{top:calc(var(--header-h) + 30px + 383px)}

}

/* ── QUIZ TOPBAR: align content width to card group ──────────────────────────
   Left  = content wrapper padding-left  = calc(20vw - 48px)
   Right = max(12px, calc(80vw - 1144px))
     · On narrow/medium viewports the cards fill the wrapper; right panel sits
       at 12 px from the app-body edge — so 12 px is the floor.
     · On wide viewports (> ~1445 px) the quiz body hits its 680 px cap and the
       card group ends at (20vw - 48) + 952 px from the left. The remaining
       space is: (100vw - 240) - (20vw - 48 + 952) = 80vw - 1144 px.
   Both padding values mirror the content wrapper exactly. */
@media(min-width:768px){
  #screen-quiz .quiz-topbar{
    padding-left:calc(20vw - 48px);
    padding-right:max(12px, calc(80vw - 1144px))
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE COMPLETION — Full cross-screen overrides, desktop and mobile
   Groups A–H from the two dark-mode audits. Light mode is untouched.
   All rules are global (no @media wrap) unless noted.
═══════════════════════════════════════════════════════════════════════════ */

/* ── A. SCREEN + SCROLL-AREA BACKGROUNDS ────────────────────────────────── */
[data-theme="dark"] #screen-topic-detail,
[data-theme="dark"] #screen-studylitics,
[data-theme="dark"] #screen-quiz,
[data-theme="dark"] #screen-results,
[data-theme="dark"] #screen-review,
[data-theme="dark"] #screen-settings,
[data-theme="dark"] #screen-prequiz,
[data-theme="dark"] #screen-timed-prequiz,
[data-theme="dark"] #screen-beast-prequiz,
[data-theme="dark"] #screen-weakest-prequiz,
[data-theme="dark"] #screen-unfinished-prequiz,
[data-theme="dark"] #screen-targeted-prequiz,
[data-theme="dark"] #screen-byo,
[data-theme="dark"] #screen-byo-confirm,
[data-theme="dark"] #screen-mock-briefing,
[data-theme="dark"] #screen-mock-prequiz,
[data-theme="dark"] #screen-mock-exam,
[data-theme="dark"] #screen-mock-break,
[data-theme="dark"] #screen-mock-results{background:var(--page)}
[data-theme="dark"] .results-body,[data-theme="dark"] .review-body{background:var(--page)}

/* ── B. QUIZ BODY — global, reaches mobile ──────────────────────────────── */
[data-theme="dark"] .quiz-body{background:var(--page)}
/* Desktop override (var(--card) + !important) already lives in @media(min-width:768px) above */

/* ── C. RING + DIAL HOLES (!important beats Phase 2) ────────────────────── */
[data-theme="dark"] .results-score-ring::before,
[data-theme="dark"] .review-ring-hole,
[data-theme="dark"] .perf-circle-hole{background:var(--page)!important}

/* ── D. CARD BACKGROUNDS ─────────────────────────────────────────────────── */
[data-theme="dark"] .td-stat-card,
[data-theme="dark"] .td-circle-card,[data-theme="dark"] .td-trend-card,
[data-theme="dark"] .td-questions-card,
[data-theme="dark"] .beast-stat-card,[data-theme="dark"] .beast-rules-card,
[data-theme="dark"] .weakest-topic-card,
[data-theme="dark"] .unfinished-summary-card,
[data-theme="dark"] .targeted-topic-card,
[data-theme="dark"] .mock-rules-card,
[data-theme="dark"] .mock-prequiz-stat-card,[data-theme="dark"] .mock-compare-card,
[data-theme="dark"] .byo-topic-card,[data-theme="dark"] .byo-pool-card,
[data-theme="dark"] .byo-confirm-card,
[data-theme="dark"] .mock-break-stats,
[data-theme="dark"] .mock-res-stat-card,
[data-theme="dark"] .submit-modal-box,
[data-theme="dark"] .review-score-hero,
[data-theme="dark"] .perf-summary,[data-theme="dark"] .perf-card,
[data-theme="dark"] .review-actions .btn-back-dash{background:var(--card)}

/* ── E. SVG + CHART ELEMENTS (restore original dark-card values) ─────────── */
[data-theme="dark"] .td-circle-track{stroke:rgba(255,255,255,0.07)}
[data-theme="dark"] .td-circle-pct-val{fill:var(--cream)}
[data-theme="dark"] .td-circle-pct-lbl{fill:rgba(255,252,245,0.65)}
[data-theme="dark"] .tc-track{stroke:rgba(255,255,255,0.07)}
[data-theme="dark"] .tc-bg{fill:rgba(255,255,255,0.04)}
[data-theme="dark"] .tc-pct{fill:var(--cream)}
[data-theme="dark"] .tc-pct-empty{fill:rgba(255,252,245,0.55)}
[data-theme="dark"] .trend-grid-line{stroke:rgba(255,255,255,0.05)}
[data-theme="dark"] .trend-axis-label{fill:rgba(255,252,245,0.55)}
[data-theme="dark"] .trend-axis-label-y{fill:rgba(255,252,245,0.55)}

/* ── F. BAR TRACKS + TINTED ELEMENTS ────────────────────────────────────── */
[data-theme="dark"] .weak-area-bar-wrap{background:rgba(255,255,255,0.07)}
[data-theme="dark"] .htb-bar-track{background:rgba(255,255,255,0.07)}
[data-theme="dark"] .quiz-progress-track{background:rgba(255,255,255,0.08)}
[data-theme="dark"] .targeted-excluded-note{background:rgba(255,255,255,0.06)}
[data-theme="dark"] .byo-pool-icon{background:rgba(255,255,255,0.06)}

/* ── G. REPORT OVERLAY ───────────────────────────────────────────────────── */
[data-theme="dark"] .report-overlay,
[data-theme="dark"] .report-overlay-topbar,
[data-theme="dark"] .report-action-bar{background:var(--card)}
[data-theme="dark"] .report-overlay-title,
[data-theme="dark"] .report-content strong,
[data-theme="dark"] .report-action-btn{color:var(--text-main)}

/* ── H. REVIEW TAB COUNT + SELECTED ANSWER TEXT ─────────────────────────── */
[data-theme="dark"] .review-tab-count{background:rgba(249,115,22,0.15);color:#fff}
[data-theme="dark"] .quiz-choice.selected .quiz-choice-text{color:var(--cream)}

/* ── I. STAT SUBTEXT + ACCURACY BLOCK — restore dark-card readability ──────── */
[data-theme="dark"] .weakest-card-meta{color:rgba(255,255,255,0.80)}
[data-theme="dark"] .targeted-card-meta{color:rgba(255,255,255,0.70)}
[data-theme="dark"] .card-accuracy-label{color:rgba(255,255,255,0.55)}
[data-theme="dark"] .card-accuracy-bar{background:rgba(255,255,255,0.12)}

/* ── DESKTOP QUIZ TOPBAR — dark mode fix ─────────────────────────────────
   Phase 3 hardcoded background:#E8E2D9 on #screen-quiz .quiz-topbar (desktop).
   [data-theme="dark"] adds an attribute selector, giving this rule higher
   specificity than the Phase 3 rule, so it wins without !important.
   Mobile is untouched — the global .quiz-topbar uses var(--page) which
   already resolves correctly in dark mode on mobile. */
@media(min-width:768px){
  [data-theme="dark"] #screen-quiz .quiz-topbar{background:var(--page)}
}

/* ── I. STUDYLITICS TEXT ELEMENTS — dark mode fix ────────────────────────
   .studylitics-section-label and .sl-divider have hardcoded dark navy rgba
   colours that are invisible on dark backgrounds without these overrides. */
[data-theme="dark"] .studylitics-section-label{color:var(--text-muted)}
[data-theme="dark"] .sl-divider::before,[data-theme="dark"] .sl-divider::after{background:var(--border)}
[data-theme="dark"] .sl-divider span{color:var(--text-muted)}

/* ── J. MOCK-CONFIRM screen not in Phase 2 #E8E2D9 list — it uses --navy  ──
   Already inherits dark navy so no extra rule needed.                      */

/* ── K. REVIEWS + ACCOUNT screens — belt-and-suspenders dark page bg ─────
   #screen-reviews already has its own [data-theme="dark"] rule at line 2904.
   #screen-account uses var(--page) natively. These extra rules ensure any
   stray specificity from Phase 2 never bleeds through. */
[data-theme="dark"] #screen-account{background:var(--page)}
[data-theme="dark"] #screen-signup,[data-theme="dark"] #screen-login,[data-theme="dark"] #screen-reset-password{background:var(--page)}

/* ── Settings moved to profile dropdown on desktop — hide from sidebar ─────
   Mobile sidebar Settings remains visible and functional (no @media guard). */
@media(min-width:768px){
  .sidebar-nav-item[data-nav="settings"]{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   REVIEWS SCREEN
   Single column on mobile, two-column grid on desktop.
   Cards follow the standard warm gradient treatment (light) / var(--card) (dark).
═══════════════════════════════════════════════════════════════════════════ */
#screen-reviews{display:none;flex-direction:column;flex:1;min-height:100vh;min-height:100dvh;background:#E8E2D9}
#screen-reviews.active{display:flex}
[data-theme="dark"] #screen-reviews{background:var(--page)}

/* Topbar — dark navy + orange underline, matching all other top-level screens */
.reviews-topbar{position:sticky;top:0;z-index:100;background:var(--navy);border-bottom:2px solid var(--accent);padding:0 20px;height:var(--header-h);display:flex;align-items:center;flex-shrink:0}
.reviews-topbar-title{font-size:14px;font-weight:800;letter-spacing:0.6px;text-transform:uppercase;color:var(--cream)}

/* Scroll body */
.reviews-body{flex:1;overflow-y:auto;padding:28px 24px 48px;display:flex;flex-direction:column;gap:20px}
@media(max-width:767px){.reviews-body{padding-bottom:calc(var(--bottom-nav-h) + 24px)}}
@media(min-width:768px){.reviews-body{max-width:900px;margin:0 auto;width:100%;padding:36px 0 56px;overflow-y:visible}}

/* Section heading */
.reviews-heading{font-size:22px;font-weight:900;color:var(--text-main);letter-spacing:-0.3px;line-height:1.2;margin-bottom:4px}

/* Card grid — single column mobile, two column desktop */
.reviews-list{display:flex;flex-direction:column;gap:16px}
@media(min-width:768px){.reviews-list{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}}

/* Review card — standard warm gradient card treatment */
.review-card{background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%);border:1px solid rgba(249,115,22,0.22);border-radius:var(--radius-xl);padding:22px 20px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-card);transition:border-color .2s}
.review-card:hover{border-color:#F97316}
[data-theme="dark"] .review-card{background:var(--card)}

/* Star rating */
.review-stars{display:flex;gap:3px}
.review-stars i{font-size:17px;color:#F97316}

/* Review body text */
.review-text{font-size:14px;font-weight:500;color:var(--text-main);line-height:1.65;margin:0;flex:1}

/* Reviewer name — separated by a subtle rule */
.review-author{font-size:12px;font-weight:800;color:var(--text-sub);letter-spacing:0.3px;padding-top:8px;border-top:1px solid var(--border)}

/* ═══════════════════════════════════════════════════════════════════════════
   AUTH SCREENS — Sign Up and Log In
═══════════════════════════════════════════════════════════════════════════ */

#screen-signup,#screen-login,#screen-reset-password{display:none;flex-direction:column;flex:1;min-height:100vh;min-height:100dvh;background:var(--page);overflow-y:auto}
#screen-signup.active,#screen-login.active,#screen-reset-password.active{display:flex}
/* Account screen */
#screen-account{display:none;flex-direction:column;flex:1;min-height:100vh;min-height:100dvh;background:var(--page)}
#screen-account.active{display:flex}
@media(max-width:767px){#screen-account{padding-bottom:calc(var(--bottom-nav-h) + 20px)}}
.acct-body{flex:1;overflow-y:auto;padding:24px 20px 56px;display:flex;flex-direction:column;gap:18px}
@media(min-width:768px){.acct-body{max-width:560px;width:100%;margin:0 auto;padding:32px 0 56px}}
.acct-profile-header{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 0 8px}
.acct-avatar-lg{width:72px;height:72px;border-radius:50%;background:var(--navy);color:var(--accent);font-size:30px;font-weight:900;display:flex;align-items:center;justify-content:center;border:3px solid rgba(255,132,19,0.35)}
.acct-name{font-size:20px;font-weight:900;color:var(--text-main);letter-spacing:0.2px}
.acct-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden}
.acct-card-title{font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-sub);padding:14px 18px 4px}
.acct-row{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;gap:12px}
.acct-row+.acct-row{border-top:1px solid var(--border)}
.acct-row-label{font-size:13px;font-weight:700;color:var(--text-sub);flex-shrink:0}
.acct-row-value{font-size:13px;font-weight:700;color:var(--text-main);text-align:right;word-break:break-all}
.acct-badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:100px;font-size:11px;font-weight:800;letter-spacing:0.5px;text-transform:uppercase}
.acct-badge-trial{background:rgba(255,132,19,0.12);color:var(--accent)}
.acct-badge-premium{background:rgba(34,197,94,0.10);color:#16a34a}
.acct-badge-expired{background:rgba(220,38,38,0.08);color:#dc2626}
.acct-exam-row{display:flex;align-items:center;gap:8px}
.acct-edit-btn{background:none;border:1px solid var(--border);border-radius:8px;padding:5px 8px;cursor:pointer;color:var(--text-sub);font-size:14px;display:flex;align-items:center;transition:all .15s}
.acct-edit-btn:hover{border-color:var(--accent);color:var(--accent)}
.acct-exam-input-wrap{display:none;align-items:center;gap:8px;padding:4px 18px 14px}
.acct-exam-input-wrap.open{display:flex}
.acct-exam-date-input{flex:1;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:9px 12px;font-family:var(--font);font-size:13px;font-weight:600;color:var(--text-main);background:var(--card-alt);outline:none;transition:border .2s}
.acct-exam-date-input:focus{border-color:#F97316}
.acct-exam-save-btn{padding:9px 18px!important;width:auto!important;flex-shrink:0}
.acct-card-action{padding:4px 18px 14px}
.acct-actions{display:flex;flex-direction:column;gap:10px}

/* Scroll container — centres card on desktop, stacks on mobile */
.auth-body{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:40px 20px 72px;width:100%}
@media(min-width:480px){.auth-body{align-items:center;padding:48px 20px}}

/* Card — matches standard warm gradient card treatment */
.auth-card{background:linear-gradient(135deg,rgba(249,115,22,0.04) 0%,#fff 100%);border:1px solid rgba(249,115,22,0.22);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);padding:36px 28px;width:100%;max-width:420px;display:flex;flex-direction:column;gap:22px;position:relative}
.auth-back-btn{position:absolute;top:16px;left:16px;background:none;border:none;color:var(--text);font-size:20px;cursor:pointer;padding:8px;border-radius:50%;transition:background .2s}
.auth-back-btn:hover{background:rgba(0,0,0,0.06)}

/* Logo */
.auth-logo-wrap{display:flex;justify-content:center}
.auth-logo{height:48px;width:auto;object-fit:contain}

/* Headings */
.auth-heading{font-size:22px;font-weight:900;color:var(--text-main);text-align:center;letter-spacing:-0.3px;line-height:1.2}
.auth-subheading{font-size:13px;font-weight:600;color:var(--text-sub);text-align:center;line-height:1.55;margin-top:-10px}

/* Form layout */
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.auth-field{display:flex;flex-direction:column;gap:5px}

/* Label */
.auth-label{font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-sub)}

/* Input */
.auth-input{border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;font-family:var(--font);font-size:14px;font-weight:600;color:var(--text-main);background:var(--card);outline:none;transition:border-color .2s,box-shadow .2s;width:100%;box-sizing:border-box}
.auth-input:focus{border-color:#F97316;box-shadow:0 0 0 3px rgba(249,115,22,0.10)}
.auth-input::placeholder{color:var(--text-muted);font-weight:500}

/* Error banner */
.auth-error{font-size:12px;font-weight:700;color:#dc2626;background:rgba(220,38,38,0.06);border:1px solid rgba(220,38,38,0.20);border-radius:var(--radius-sm);padding:10px 14px;line-height:1.5}
.auth-error[hidden]{display:none!important}
.auth-stay-label{display:flex;align-items:center;gap:10px;cursor:pointer;min-height:44px;padding:4px 0;-webkit-tap-highlight-color:transparent;user-select:none}
.auth-stay-checkbox{width:18px;height:18px;accent-color:#F97316;cursor:pointer;flex-shrink:0}
.auth-stay-text{font-size:13px;font-weight:600;color:var(--text-sub)}

/* Primary button */
.auth-btn-primary{width:100%;padding:14px;background:#F97316;color:#041B35;font-family:var(--font);font-size:14px;font-weight:900;border:none;border-radius:var(--radius-md);cursor:pointer;transition:background .2s,transform .15s;letter-spacing:0.3px;box-shadow:0 4px 18px rgba(249,115,22,0.32);margin-top:2px}
.auth-btn-primary:hover{background:#ea6c0e;transform:translateY(-1px)}
.auth-btn-primary:active{transform:translateY(0)}
.auth-btn-primary:disabled{opacity:0.6;cursor:not-allowed;transform:none}

/* Success icon — used in reset-password and any future auth success states */
.auth-success-icon{
  display:flex;align-items:center;justify-content:center;
  width:68px;height:68px;border-radius:50%;
  background:rgba(34,197,94,0.12);
  color:#16a34a;font-size:36px;
  margin:0 auto 4px;
}

/* Ghost/link button */
.auth-extras{display:flex;justify-content:flex-end}
.auth-link{background:none;border:none;cursor:pointer;color:#F97316;font-family:var(--font);font-size:13px;font-weight:700;padding:0;transition:opacity .2s;text-decoration:none}
.auth-link:hover{opacity:0.75}

/* Switch line (e.g. "Already have an account?") */
.auth-switch{font-size:13px;font-weight:600;color:var(--text-sub);text-align:center;line-height:1.6}

/* Dark mode */
[data-theme="dark"] .auth-card{background:var(--card);border-color:rgba(249,115,22,0.20)}
[data-theme="dark"] .auth-input{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.12);color:var(--text-main)}
[data-theme="dark"] .auth-input:focus{border-color:#F97316;box-shadow:0 0 0 3px rgba(249,115,22,0.15)}

/* ═══════════════════════════════════════════════════════════════════════════
   ANONYMOUS LEAD CAPTURE GATE
   Shows after quiz completion for non-logged-in users.
   Score donut stays visible; everything below it is blurred.
═══════════════════════════════════════════════════════════════════════════ */

/* Blur applied to content below score hero */
.lead-blur{
  filter:blur(5px);
  pointer-events:none;
  user-select:none;
  transition:filter .3s ease;
}

/* Gate modal — bottom-sheet on mobile, centred card on wider screens */
#anon-lead-gate-modal{
  display:none;
  position:fixed;inset:0;z-index:8000;
  background:rgba(4,27,53,0.65);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  align-items:flex-end;
  justify-content:center;
}
#anon-lead-gate-modal.active{display:flex}
@media(min-width:600px){
  #anon-lead-gate-modal{align-items:center}
}

/* ── Logout confirmation modal ──────────────────────────────────────────────── */
#logout-confirm-modal{
  display:none;position:fixed;inset:0;z-index:9000;
  background:rgba(4,27,53,0.65);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  align-items:center;justify-content:center;
}
#logout-confirm-modal.active{display:flex}
.logout-confirm-card{
  background:var(--card);border-radius:16px;border:1px solid var(--border);
  padding:28px 24px 20px;width:calc(100% - 48px);max-width:340px;
  box-shadow:0 8px 32px rgba(0,0,0,0.24);text-align:center;
}
.logout-confirm-heading{font-size:17px;font-weight:700;color:var(--text-main);margin-bottom:8px}
.logout-confirm-msg{font-size:14px;color:var(--text-sub);margin-bottom:24px;line-height:1.5}
.logout-confirm-actions{display:flex;gap:10px}
.logout-cancel-btn{
  flex:1;padding:11px 0;border-radius:10px;border:1px solid var(--border);
  background:var(--bg);color:var(--text-main);font-size:14px;font-weight:600;cursor:pointer;
}
.logout-cancel-btn:hover{background:var(--border)}
.logout-confirm-btn{
  flex:1;padding:11px 0;border-radius:10px;border:none;
  background:#DC2626;color:#fff;font-size:14px;font-weight:700;cursor:pointer;
}
.logout-confirm-btn:hover{background:#B91C1C}

.anon-lead-gate-card{
  background:var(--card);
  border-radius:20px 20px 0 0;
  border:1px solid var(--border);
  border-bottom:none;
  width:100%;
  padding:28px 24px 36px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:13px;
  box-shadow:0 -8px 56px rgba(0,0,0,0.36);
  animation:alg-slide-up .32s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes alg-slide-up{
  from{transform:translateY(40px);opacity:0}
  to{transform:translateY(0);opacity:1}
}
@media(min-width:600px){
  .anon-lead-gate-card{
    border-radius:20px!important;
    border:1px solid var(--border)!important;
    max-width:440px;
    max-height:90vh;
    overflow-y:auto;
    animation:alg-fade-in .25s ease forwards;
  }
}
@keyframes alg-fade-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}

/* ── Anonymous mode gate modal inner elements ────────────────────────────── */
.anon-gate-icon{font-size:32px;color:#F97316;margin-bottom:12px;text-align:center}
.anon-gate-title{font-size:18px;font-weight:800;color:var(--text);text-align:center;margin-bottom:8px}
.anon-gate-body{font-size:14px;color:var(--text-muted);text-align:center;line-height:1.5}

/* ── Upgrade modal inner elements ────────────────────────────────────────────── */
.upgrade-modal-icon{font-size:32px;color:#F97316;margin-bottom:12px;text-align:center}
.upgrade-modal-title{font-size:18px;font-weight:800;color:var(--text);text-align:center;margin-bottom:8px}
.upgrade-modal-body{font-size:14px;color:var(--text-muted);text-align:center;line-height:1.5}

.alg-logo{height:34px;width:auto;margin-bottom:2px}

.alg-score-context{
  font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--accent);background:rgba(255,132,19,0.1);
  border:1px solid rgba(255,132,19,0.2);
  padding:4px 14px;border-radius:100px;
}

.alg-heading{
  font-size:21px;font-weight:900;
  color:var(--text-main);
  text-align:center;line-height:1.25;margin:0;
}

.alg-body{
  font-size:14px;font-weight:500;
  color:var(--text-sub);
  text-align:center;line-height:1.62;
  margin:0;max-width:320px;
}

.alg-form{display:flex;flex-direction:column;gap:10px;width:100%}

.alg-input{
  width:100%;padding:13px 16px;
  border-radius:11px;
  border:1.5px solid var(--border);
  background:var(--page);
  color:var(--text-main);
  font-family:inherit;font-size:14px;font-weight:600;
  outline:none;
  transition:border-color .2s,box-shadow .2s;
  box-sizing:border-box;
}
.alg-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,132,19,0.15)}
.alg-input::placeholder{color:var(--text-muted)}

.alg-error{
  font-size:12px;font-weight:700;color:#dc2626;
  padding:8px 13px;
  background:rgba(239,68,68,0.07);
  border-radius:8px;border:1px solid rgba(239,68,68,0.2);
}

.alg-btn-primary{
  width:100%;padding:14px;
  border-radius:12px;
  background:var(--accent);color:#fff;
  font-family:inherit;font-size:15px;font-weight:800;letter-spacing:0.4px;
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .2s,transform .1s;
}
.alg-btn-primary:hover{background:var(--accent2)}
.alg-btn-primary:active{transform:scale(.98)}

.alg-login-row{font-size:13px;font-weight:600;color:var(--text-muted);text-align:center}
.alg-link{
  background:none;border:none;
  color:var(--accent);font-family:inherit;font-size:13px;font-weight:700;
  cursor:pointer;padding:0;text-decoration:underline;
}
.alg-link:hover{opacity:.8}

.alg-skip-btn{
  background:none;border:none;
  color:var(--text-muted);font-family:inherit;
  font-size:12px;font-weight:600;
  cursor:pointer;padding:2px 8px;text-decoration:underline;opacity:.6;
  margin-top:2px;
}
.alg-skip-btn:hover{opacity:1}

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

/* Success state — shown after inline signup completes */
#alg-success-state{
  display:flex;flex-direction:column;align-items:center;
  gap:14px;width:100%;text-align:center;
  padding-bottom:6px;
}
.alg-success-icon{
  width:64px;height:64px;
  border-radius:50%;
  background:rgba(255,132,19,0.12);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);font-size:32px;
  margin-bottom:4px;
}

/* "Sign Up to Unlock" sticky banner — shown after skip, stays above blurred content */
.alg-unlock-banner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:11px 16px;
  margin-bottom:12px;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:12px;
  font-family:inherit;font-size:14px;font-weight:700;
  cursor:pointer;
  box-shadow:0 4px 18px rgba(255,132,19,0.35);
  transition:opacity .15s ease,transform .15s ease;
}
.alg-unlock-banner:hover{opacity:.9;transform:translateY(-1px)}
.alg-unlock-banner i{font-size:17px}

/* Dark mode adjustments */
[data-theme="dark"] .alg-input{
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.12);
}
[data-theme="dark"] .alg-input:focus{
  border-color:#F97316;box-shadow:0 0 0 3px rgba(249,115,22,0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADD TO HOME SCREEN PROMPT OVERLAY
   Sprint 1 — fires once after the user's first score report
═══════════════════════════════════════════════════════════════════════════ */

/* Overlay container — bottom-sheet on mobile, centred card on larger screens */
.install-prompt-overlay{
  position:fixed;inset:0;z-index:500;
  display:flex;align-items:flex-end;justify-content:center;
  padding:0 0 env(safe-area-inset-bottom);
}
.install-prompt-overlay[hidden]{display:none!important}
@media(min-width:480px){
  .install-prompt-overlay{align-items:center;padding:20px}
}

/* Semi-transparent backdrop */
.install-prompt-backdrop{
  position:absolute;inset:0;
  background:rgba(4,27,53,0.55);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  animation:fadeIn .25s ease;
  cursor:pointer;
}

/* Card */
.install-prompt-card{
  position:relative;z-index:1;
  width:100%;max-width:420px;
  background:#FFFFFF;
  border:1px solid rgba(4,27,53,0.12);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow:var(--shadow-card);
  padding:24px 20px 32px;
  display:flex;flex-direction:column;gap:18px;
  animation:ipSlideUp .32s cubic-bezier(.32,1.25,.5,1);
}
@media(min-width:480px){
  .install-prompt-card{
    border-radius:var(--radius-xl);
    padding:28px 24px;
    animation:fadeIn .25s ease;
  }
}
@keyframes ipSlideUp{
  from{transform:translateY(110%);opacity:0}
  to{transform:translateY(0);opacity:1}
}

/* Header row */
.install-prompt-header{display:flex;align-items:flex-start;gap:14px}
.install-prompt-icon{
  width:46px;height:46px;flex-shrink:0;
  border-radius:13px;
  background:rgba(249,115,22,0.12);
  color:#F97316;font-size:24px;
  display:flex;align-items:center;justify-content:center;
}
.install-prompt-titles{flex:1}
.install-prompt-eyebrow{
  font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:var(--text-sub);margin-bottom:5px;
}
.install-prompt-title{
  font-size:16px;font-weight:900;letter-spacing:-0.2px;line-height:1.3;
  color:var(--text-main);
}
.install-prompt-close{
  width:32px;height:32px;flex-shrink:0;border:none;cursor:pointer;
  border-radius:8px;background:rgba(4,27,53,0.06);
  color:var(--text-muted);font-size:18px;font-family:var(--font);
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;
}
.install-prompt-close:hover{background:rgba(249,115,22,0.12);color:#F97316}

/* Body panels — hidden by default, shown by JS */
.install-prompt-body{display:none;flex-direction:column;gap:16px}

.install-prompt-desc{
  font-size:13px;font-weight:600;line-height:1.65;
  color:var(--text-main);margin:0;
}

/* iOS step list */
.install-steps-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.install-step{
  display:flex;align-items:center;gap:13px;
  padding:12px 14px;
  background:var(--card-alt);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
}
.install-step-icon{
  width:34px;height:34px;flex-shrink:0;border-radius:9px;
  background:rgba(249,115,22,0.12);color:#F97316;font-size:18px;
  display:flex;align-items:center;justify-content:center;
}
.install-step-text{font-size:13px;font-weight:600;color:var(--text-main);line-height:1.45}
.install-step-text strong{color:#F97316;font-weight:800}

/* Contextual note (e.g. "Chrome cannot install on iPhone") */
.install-prompt-note{
  font-size:11px;font-weight:600;line-height:1.55;margin:0;
  color:var(--text-muted);
  background:rgba(4,27,53,0.04);
  border-radius:var(--radius-sm);
  padding:8px 10px;
}
[data-theme="dark"] .install-prompt-note{
  background:rgba(255,255,255,0.04);
  color:rgba(255,252,245,0.45);
}

/* Android action group */
.install-prompt-actions{display:flex;flex-direction:column;gap:10px}

.install-prompt-add-btn{
  width:100%;padding:14px;border:none;cursor:pointer;
  border-radius:var(--radius-lg);
  background:#F97316;color:var(--navy);
  font-family:var(--font);font-size:14px;font-weight:900;letter-spacing:0.3px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 4px 18px rgba(249,115,22,0.32);
  transition:background .2s,transform .15s;
}
.install-prompt-add-btn:hover{background:#ea6c0e;transform:translateY(-1px)}
.install-prompt-add-btn i{font-size:18px}

.install-prompt-dismiss-btn{
  width:100%;padding:12px;cursor:pointer;
  background:transparent;border:1.5px solid var(--border);border-radius:var(--radius-lg);
  font-family:var(--font);font-size:13px;font-weight:700;color:var(--text-muted);
  transition:border-color .2s,color .2s;
}
.install-prompt-dismiss-btn:hover{border-color:rgba(249,115,22,0.40);color:var(--text-sub)}

/* "Got It" — iOS primary action: solid orange, same as add button */
#install-prompt-ios-dismiss{
  background:#F97316;color:var(--navy);
  border:none;
  font-weight:900;font-size:14px;letter-spacing:0.3px;
  box-shadow:0 4px 18px rgba(249,115,22,0.32);
  transition:background .2s,transform .15s;
}
#install-prompt-ios-dismiss:hover{background:#ea6c0e;transform:translateY(-1px)}

/* Dark mode */
[data-theme="dark"] .install-prompt-card{
  background:var(--card);border-color:rgba(255,255,255,0.10);
}
[data-theme="dark"] .install-prompt-eyebrow{color:rgba(255,252,245,0.55)}
[data-theme="dark"] .install-prompt-desc{color:var(--text-main)}
[data-theme="dark"] .install-prompt-close{
  background:rgba(255,255,255,0.07);color:rgba(255,252,245,0.55);
}
[data-theme="dark"] .install-prompt-close:hover{background:rgba(249,115,22,0.15);color:#F97316}
[data-theme="dark"] .install-step{
  background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.09);
}
[data-theme="dark"] .install-step-text{color:var(--text-main)}
[data-theme="dark"] .install-prompt-dismiss-btn{
  border-color:rgba(255,255,255,0.12);color:rgba(255,252,245,0.55);
}
[data-theme="dark"] .install-prompt-dismiss-btn:hover{
  border-color:rgba(249,115,22,0.35);color:rgba(255,252,245,0.80);
}

/* ── Questions loading / error overlay ───────────────────────────────────── */
#questions-loading-overlay{position:fixed;inset:0;z-index:99999;background:var(--navy);display:flex;align-items:center;justify-content:center}
.ql-box{display:flex;flex-direction:column;align-items:center;gap:20px;padding:40px 32px;text-align:center;max-width:320px}
.ql-spinner{width:44px;height:44px;border:4px solid rgba(255,132,19,0.25);border-top-color:var(--accent);border-radius:50%;animation:ql-spin 0.8s linear infinite}
@keyframes ql-spin{to{transform:rotate(360deg)}}
.ql-msg{font-family:var(--font);font-size:15px;font-weight:700;color:rgba(255,252,245,0.80);line-height:1.5;margin:0}
.ql-retry-btn{background:var(--accent);color:var(--navy);font-family:var(--font);font-size:13px;font-weight:800;padding:11px 28px;border-radius:var(--radius-md);border:none;cursor:pointer;letter-spacing:0.3px;transition:opacity .2s}
.ql-retry-btn:hover{opacity:0.88}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE — v14 completion pass
   Fixes residual hardcoded light-only colours that bypassed CSS variables.
   All rules are append-only overrides — light mode is untouched.
═══════════════════════════════════════════════════════════════════════════ */

/* ── L. STUDYLITICS — light-mode overrides that bleed into dark mode ─────
   Phase 3 sprint rewrote studylitics cards to warm-gradient / light colours.
   These dark-mode restores undo those light overrides on dark backgrounds. */
[data-theme="dark"] .ring-track{stroke:rgba(255,255,255,0.08)}
[data-theme="dark"] .readiness-tier-badge{background:rgba(255,255,255,0.06);border-color:var(--border);color:var(--text-sub)}
[data-theme="dark"] .rf-bar-wrap{background:rgba(255,255,255,0.07)}
[data-theme="dark"] .countdown-urgency-bar-wrap{background:rgba(255,255,255,0.07)}
[data-theme="dark"] .readiness-disclaimer{color:var(--text-muted);border-top-color:var(--border)}
[data-theme="dark"] .countdown-date-field{color-scheme:dark;background:rgba(255,255,255,0.06);border-color:var(--border)}

/* ── M. BYO CONFIRM — page background (#E8E2D9 hardcoded, no dark override) */
[data-theme="dark"] #screen-byo-confirm{background:var(--page)}

/* ── N. MOCK-CONFIRM section card — rgba(255,252,245,0.06) is already readable
   in dark mode (white-tinted) — no change needed. */

/* ── O. TOPIC-DETAIL dial holes — overridden with #E8E2D9 in Phase 2.
   Block C at line 2887 already covers weakest/targeted; add topic-detail here. */
[data-theme="dark"] .td-circle-hole{background:var(--page)!important}

/* ── P. DESKTOP — ensure quiz body card bg also flips in dark on desktop ──
   Phase 2 desktop rule sets .quiz-body{background:var(--card)!important}.
   var(--card) already resolves to dark-card in dark mode — nothing to do.   */

/* ═══════════════════════════════════════════════════════════════════════════
   SPRINT B1 — Dark mode completion + Global mobile header bar
   Extends dark navy app-header to all non-quiz mobile screens.
   Dark mode: fills any remaining per-screen gaps.
   All rules are append-only overrides.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Q. MOCK-CONFIRM — dark page bg for full dark mode consistency ───────
   Screen uses background:var(--navy) which is always dark, but var(--page)
   in dark mode (#0d1525) matches every other screen for visual consistency. */
[data-theme="dark"] #screen-mock-confirm{background:var(--page)}

/* ── R. MOBILE TOPBAR SUPPRESSION — hide title-only topbars on mobile ────
   When the global app-header is visible it acts as the page header on mobile.
   Topbars that only display a screen title (no back button) are hidden to
   prevent a double-header. Back-button topbars (prequiz-topbar, td-topbar,
   etc.) are kept so navigation remains intact.
   On desktop these topbars remain as height spacers beneath .desktop-header. */
@media(max-width:767px){
  #screen-studylitics.active .studylitics-topbar,
  #screen-reviews.active .reviews-topbar,
  #screen-results.active .results-topbar,
  #screen-review.active .results-topbar{display:none}
}

/* ── T. MOBILE SCREEN MIN-HEIGHT CORRECTION ──────────────────────────────
   Screens that display the global app-header (64px+sat) share the viewport.
   Their min-height:100dvh would push them 64px below the fold.
   Capping to calc(100dvh - header) keeps the screen within the viewport.
   Screens that hide the app-header (quiz, mock-exam, auth) are unaffected
   because they're not listed here. Desktop screens are not affected (the
   @media guard keeps this mobile-only). */
@media(max-width:767px){
  #screen-prequiz,#screen-timed-prequiz,#screen-beast-prequiz,
  #screen-weakest-prequiz,#screen-unfinished-prequiz,#screen-targeted-prequiz,
  #screen-byo,#screen-byo-confirm,
  #screen-results,#screen-review,#screen-settings,
  #screen-studylitics,#screen-reviews,#screen-topic-detail,
  #screen-mock-briefing,#screen-mock-prequiz,
  #screen-mock-break,#screen-mock-confirm,#screen-mock-results,
  #screen-account{
    min-height:calc(100dvh - calc(var(--header-h) + var(--sat)));
    min-height:calc(100svh - calc(var(--header-h) + var(--sat)))
  }
}

/* ── S. DESKTOP PREQUIZ TOPBAR — dark mode: match page background ─────────
   Phase 2 sets prequiz topbar to var(--page) on desktop. In dark mode
   var(--page) resolves to #0d1525, which is already correct — confirming
   no extra rule is required. Left here as a documented audit note. */

/* ═══════════════════════════════════════════════════════════════════════════
   SPRINT B2 — Targeted fixes
   1. Sidebar pulsing: fixed in app.js (no CSS change needed)
   2. Exam date removal: .btn-clear-date style
   3. Quick 10 + Timed Quiz desktop layout revert
═══════════════════════════════════════════════════════════════════════════ */

/* ── U. CLEAR DATE BUTTON ─────────────────────────────────────────────────── */
/* Shared across all exam-date input panels (sidebar, quiz sidebar, banner, mobile).
   Hidden by default; JS shows it via style.display when a date is already set.  */
.btn-clear-date{
  display:none;
  width:100%;
  margin-top:6px;
  padding:6px 0;
  background:none;
  border:none;
  border-top:1px solid rgba(255,255,255,0.07);
  color:rgba(255,252,245,0.35);
  font-size:10px;
  font-weight:700;
  letter-spacing:0.3px;
  text-align:center;
  cursor:pointer;
  transition:color .2s;
  font-family:var(--font)
}
.btn-clear-date:hover{color:#EF4444}
/* Light-mode variant (exam banner lives in the light content area) */
[data-theme="dark"] .btn-clear-date,
.sidebar .btn-clear-date{
  border-top-color:rgba(255,255,255,0.07);
  color:rgba(255,252,245,0.35)
}
.exam-date-input-wrap .btn-clear-date{
  border-top-color:var(--border);
  color:var(--text-muted)
}

/* ── V. REVERT QUICK 10 + TIMED QUIZ DESKTOP TO SINGLE-COLUMN ──────────────
   Sprint B1 added a 2-column grid to ALL .prequiz-body at 1024px+.
   Quick 10 (#screen-prequiz) and Timed Quiz (#screen-timed-prequiz) screens
   should stay single-column centred — only the other prequiz screens keep
   the grid layout. Force flex-column and restore original max-width:560px.  */
@media(min-width:1024px){
  #screen-prequiz .prequiz-body,
  #screen-timed-prequiz .prequiz-body{
    display:flex !important;
    flex-direction:column !important;
    max-width:560px
  }
}

/* ── Sprint C6: Quick 10 pre-quiz alignment ─────────────────────────────
   Self-size the prequiz-body to its widest content (the topic pills row)
   so feedback cards and Start Quiz button share the same width as the pills.
   width:fit-content + max-width:100% lets the body track the pills content
   width exactly — no hardcoded pixel values needed. The existing margin:0 auto
   (from the base .prequiz-body 768px rule) centres the column automatically.
   Scoped to #screen-prequiz only; Timed Quiz keeps its separate 560px layout.
   Overrides both the 1100px max-width (768px rule) and the 560px max-width
   (1024px Sprint V rule) via cascade order at equal specificity (1 ID + 1 class). */
@media(min-width:768px){
  #screen-prequiz .prequiz-body {
    width: fit-content;
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPRINT C1 — Exam date removal confirmation modal
   Uses the same card/overlay structure as #logout-confirm-modal.
   Confirm button uses --accent (orange) instead of the logout red.
═══════════════════════════════════════════════════════════════════════════ */

#exam-clear-modal{
  display:none;position:fixed;inset:0;z-index:9000;
  background:rgba(4,27,53,0.65);
  align-items:center;justify-content:center;
}
#exam-clear-modal.active{display:flex}
.exam-clear-confirm-btn{background:var(--accent) !important}
.exam-clear-confirm-btn:hover{background:var(--accent2) !important}

/* ═══════════════════════════════════════════════════════════════════════════
   SPRINT C2 — CSS Containment: isolate sidebar widget paint regions
   ─────────────────────────────────────────────────────────────────────────
   The sidebar is a single compositing layer (position:sticky + overflow-y:auto).
   Any paint operation inside a child element — including the per-5-second
   study-time textContent write — invalidates the entire sidebar layer,
   making all four cards appear to pulse together.

   contain: layout style paint creates a CSS containment context around each
   widget so that paint operations inside them are scoped to their own bounding
   box and do NOT propagate to the parent sidebar layer.

   Note: contain:paint clips painted content to the element's border box.
   All sidebar widgets are self-contained boxes with no intentional overflow
   (the glow on .today-cell intentionally extends slightly but is cosmetic only),
   so this is safe to apply.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Sprint C5: Every sidebar card on its own GPU compositing layer ──────────
   Each card gets contain:layout style paint (scopes paint to the card's bounds)
   plus will-change:transform + transform:translateZ(0) (promotes the card to a
   dedicated GPU tile). Result: a repaint inside any one card — whether from the
   5-second study timer, the scorecard bar transition, the orange-pulse animation,
   or an exam-date display change — cannot cascade to any of the other cards.

   Applies to both the main sidebar and the quiz sidebar. Class selectors
   (.sidebar-streak-cal, .sidebar-exam-cd, .scorecard-widget) cover both sidebars
   automatically; ID overrides follow for cards that need different treatment. */

/* Study Streak card — isolates orange-pulse animation from other cards */
.sidebar-streak-cal {
  contain: layout style paint;
  will-change: transform;
  transform: translateZ(0);
}

/* Exam Countdown card — isolates display:none→block repaint when date is set.
   Also covered by #sidebar-exam-region wrapper (Sprint C4), but direct promotion
   of the card itself ensures the card's own paint is fully isolated. */
.sidebar-exam-cd {
  contain: layout style paint;
  will-change: transform;
  transform: translateZ(0);
}

/* My Study Scorecard — isolates scorecard bar transition (transform 1s ease) */
.scorecard-widget {
  contain: layout style paint;
  will-change: transform;
  transform: translateZ(0);
}

/* Total Study Time card — Sprint C3 Fix B (unchanged): isolates 5-second
   textContent writes from the session timer */
#dash-studytime-widget {
  contain: layout style paint;
  will-change: transform;
  transform: translateZ(0);
}

/* Exam countdown region wrapper — Sprint C4 (unchanged): isolates display
   changes on sidebar-exam-cd, sidebar-exam-prompt, sidebar-exam-anon */
#sidebar-exam-region,
#quiz-sidebar-exam-region { will-change: transform; transform: translateZ(0); }

/* ── Coach Report Card (Sprint E1b) ─────────────────────────────────────────
   Full-width card injected below the score hero on every study mode results
   screen (review screen) and the mock exam results screen.                  */
.coach-report-card {
  background: rgba(10,18,40,0.85);
  border: 1px solid rgba(249,115,22,0.3);
  box-shadow: 0 0 20px rgba(249,115,22,0.1);
  border-radius: 16px;
  padding: 20px 20px 24px;
  margin: 16px 0 0;
}
.coach-report-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #F97316;
  margin-bottom: 16px;
}
.coach-report-header i { font-size: 16px; }
.coach-report-body { display: flex; flex-direction: column; gap: 16px; }
.coach-report-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary, rgba(255,255,255,0.55));
}
.coach-report-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(249,115,22,0.25);
  border-top-color: #F97316;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
.coach-report-section { display: flex; flex-direction: column; gap: 5px; }
.coach-report-section-heading {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #F97316;
}
.coach-report-section-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
}
.coach-report-raw {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
  white-space: pre-wrap;
}
.coach-report-error {
  font-size: 13px;
  color: var(--text-secondary, rgba(255,255,255,0.55));
  margin: 0;
  line-height: 1.5;
}
/* Light-mode overrides */
.coach-report-card {
  background: var(--card);
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}
/* Dark-mode — match other results cards (var(--card) = #142237) */
[data-theme="dark"] .coach-report-card {
  background: var(--card);
  border-color: rgba(249,115,22,0.3);
  box-shadow: 0 0 20px rgba(249,115,22,0.1);
}

/* ── History Coach Report Modal (Sprint E2b) ─────────────────────────────── */
.hcm-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:0;max-width:480px;width:100%;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 40px rgba(0,0,0,0.22)}
/* Sticky non-scrolling portion — title, score, tab bar */
.hcm-sticky-header{padding:24px 20px 0;display:flex;flex-direction:column;gap:16px;flex-shrink:0;background:var(--card)}
/* Scrolling portion — content panes */
.hcm-scroll-body{overflow-y:auto;flex:1;padding:16px 20px 24px;display:flex;flex-direction:column}
.hcm-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.hcm-title{font-size:15px;font-weight:800;color:var(--text-main);line-height:1.4;font-family:var(--font)}
.hcm-date{font-size:12px;font-weight:600;color:var(--text-muted)}
.hcm-close-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--card-alt);color:var(--text-sub);display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;flex-shrink:0;transition:background .2s}
.hcm-close-btn:hover{background:var(--border)}
.hcm-score-row{display:flex;align-items:baseline;gap:10px}
.hcm-score-pct{font-size:28px;font-weight:900;color:var(--accent);line-height:1;font-family:var(--font)}
.hcm-score-frac{font-size:13px;font-weight:600;color:var(--text-muted)}
.hcm-report-body{border-top:1px solid var(--border);padding-top:16px}
.hcm-no-report{font-size:13px;color:var(--text-muted);font-style:italic;text-align:center;padding:16px 0;margin:0}
/* ── History Coach Modal — Tab bar ─────────────────────────────────────────── */
.hcm-tabs{display:flex;gap:0;border-bottom:1px solid var(--border)}
.hcm-tab{flex:1;padding:9px 12px;font-size:11px;font-weight:800;font-family:var(--font);background:transparent;border:none;border-bottom:2.5px solid transparent;margin-bottom:-1px;color:var(--text-muted);cursor:pointer;transition:color .2s,border-color .2s;text-transform:uppercase;letter-spacing:.9px}
.hcm-tab.active{color:#F97316;border-bottom-color:#F97316}
.hcm-tab:hover:not(.active){color:var(--text-main)}
/* ── History Coach Modal — Panes ────────────────────────────────────────────── */
.hcm-pane{display:flex;flex-direction:column;gap:10px}
.hcm-pane[hidden]{display:none}
.hcm-pane .hcm-report-body{border-top:none;padding-top:0}
/* ── History Coach Modal — Review Questions ─────────────────────────────────── */
.hcm-rq-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:32px 16px;font-size:13px;font-weight:600;color:var(--text-muted)}
.hcm-rq-choice-text{flex:1;font-size:12px;font-weight:600;line-height:1.45;color:var(--text-main)}
.hcm-rq-your-ans{font-size:9px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;padding:2px 7px;border-radius:4px;flex-shrink:0;margin-left:auto;background:rgba(255,132,19,0.12);color:var(--accent)}
.review-choice-row.correct-ans .hcm-rq-your-ans{background:rgba(34,197,94,0.15);color:#16a34a}
.review-choice-row.wrong-ans .hcm-rq-your-ans{background:rgba(239,68,68,0.15);color:#dc2626}

/* ── Coach Report Disclaimer (Sprint E2c) ────────────────────────────────── */
/* Used both as a footnote after the results card and inside the history modal */
.coach-report-disclaimer{font-size:11px;color:var(--text-muted);font-style:italic;text-align:center;line-height:1.55;margin:0;padding:0 4px}