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

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 :root {
 --navy:#0a1628; --navy2:#0d1f3c; --navy3:#112347;
 --teal:#0ea5e9; --teal2:#38bdf8; --teal3:#0284c7;
 --white:#ffffff; --gray50:#f8fafc; --gray100:#f1f5f9;
 --gray200:#e2e8f0; --gray400:#94a3b8; --gray600:#475569; --gray800:#1e293b;
 --gold:#f59e0b; --red:#ef4444; --green:#22c55e;
 --radius:16px; --radius-sm:10px; --shadow:0 4px 24px rgba(0,0,0,0.12);
 }
 html { scroll-behavior: smooth; width:100%; max-width:100vw; overflow-x:hidden; }
 body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; background: #f5f4f1; color: var(--gray800); line-height: 1.6; min-height: 100vh; width:100%; max-width:100vw; overflow-x:hidden; }
 a { text-decoration: none; color: inherit; }
 img { max-width: 100%; display: block; }

 .logo { font-size:1.5rem; font-weight:800; color:var(--white); letter-spacing:0; }
 .logo span { color:var(--teal); }

 .app-wrapper { max-width:1480px; margin:0 auto; padding:30px 20px 36px; display:grid; grid-template-columns:minmax(260px,300px) minmax(0,1060px); gap:22px; min-height:100vh; align-items:start; justify-content:center; }

 .sidebar { position:sticky; top:84px; display:flex; flex-direction:column; gap:12px; }
 .sidebar-card { background:var(--white); border:1px solid #d1d5db; border-radius:14px; padding:16px; box-shadow:0 1px 4px rgba(10,22,40,0.06); }
 .sidebar-card h3 { font-size:0.7rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal3); margin-bottom:12px; }
 .sidebar .mode-toggle-wrap { order:1; }
 .sidebar > .btn-start { order:2; }
 #casperMockConfigPanel { order:2; } /* sits right after mode-toggle, before start button */
 #aiMarkingCard { order:3; }
 #categoryCard { order:4; }
 #starredQueueCard { order:5; }
 #mmiOptionsCard { order:6; }
 #casperMasterclassCard { order:7; }
 #casperClassCard { order:8; }
 #questionSubmitCard { order:9; }
 #leaderboardCard { order:10; }
 .account-card { border-color:rgba(14,165,233,0.26); box-shadow:0 14px 34px rgba(14,165,233,0.08); }
 .account-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
 .account-card-kicker { font-size:0.68rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal3); margin-bottom:4px; }
 .account-card-title { font-size:1rem; line-height:1.25; font-weight:850; color:var(--navy); }
 .account-card-copy { font-size:0.76rem; color:var(--gray600); line-height:1.5; margin-bottom:12px; }
 .account-card-badge { flex-shrink:0; font-size:0.62rem; font-weight:850; letter-spacing:0.08em; text-transform:uppercase; color:#075985; background:#e0f2fe; border:1px solid rgba(14,165,233,0.22); border-radius:999px; padding:4px 8px; }

 .question-submit-card { border-color:rgba(245,158,11,0.28); background:linear-gradient(180deg,#fff,#fffbeb); }
 .question-submit-kicker { font-size:0.66rem; font-weight:900; letter-spacing:0.1em; text-transform:uppercase; color:#b45309; margin-bottom:5px; }
 .question-submit-title { font-size:0.98rem; line-height:1.3; font-weight:900; color:var(--navy); margin-bottom:6px; }
 .question-submit-copy { font-size:0.76rem; color:var(--gray600); line-height:1.5; margin-bottom:10px; }
 .question-submit-benefits { display:grid; gap:6px; margin-bottom:12px; }
 .question-submit-benefits span { display:block; font-size:0.7rem; line-height:1.35; color:#7c2d12; background:#fff7ed; border:1px solid #fed7aa; border-radius:8px; padding:7px 8px; }
 .question-submit-btn { width:100%; border:0; border-radius:999px; background:var(--gold); color:var(--navy); padding:10px 13px; font-family:inherit; font-size:0.8rem; font-weight:900; cursor:pointer; transition:transform 0.18s, background 0.18s; }
 .question-submit-btn:hover { background:#fbbf24; transform:translateY(-1px); }

 .casper-class-card { border-color:rgba(14,165,233,0.28); background:linear-gradient(180deg,#ffffff,#eff6ff); box-shadow:0 14px 34px rgba(14,165,233,0.08); }
 .casper-class-kicker { font-size:0.66rem; font-weight:900; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal3); margin-bottom:5px; }
 .casper-class-title { font-size:1rem; line-height:1.3; font-weight:900; color:var(--navy); margin-bottom:7px; }
 .casper-class-copy { font-size:0.76rem; color:var(--gray600); line-height:1.52; margin-bottom:11px; }
 .casper-class-tags { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:12px; }
 .casper-class-tags span { font-size:0.62rem; font-weight:850; border-radius:999px; padding:3px 7px; color:#075985; background:#e0f2fe; border:1px solid rgba(14,165,233,0.18); }
 .casper-class-btn { width:100%; border:0; border-radius:999px; background:var(--navy); color:#fff; padding:10px 13px; font-family:inherit; font-size:0.8rem; font-weight:900; cursor:pointer; transition:transform 0.18s, background 0.18s; }
 .casper-class-btn:hover { background:var(--navy2); transform:translateY(-1px); }
 .casper-class-link { width:100%; border:0; background:transparent; color:var(--teal3); padding:9px 8px 0; font-family:inherit; font-size:0.76rem; font-weight:850; cursor:pointer; text-align:center; }

 .casper-masterclass-card { border:1.5px solid rgba(245,158,11,0.48); background:linear-gradient(180deg,#fff,#fff8ec); box-shadow:0 20px 44px rgba(245,158,11,0.16),0 3px 12px rgba(10,22,40,0.08); position:relative; overflow:hidden; }
 .casper-masterclass-card::before { content:''; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,var(--gold),var(--teal)); }
 .casper-masterclass-kicker { display:inline-flex; align-items:center; gap:7px; margin:3px 0 8px; color:#b45309; font-size:0.64rem; font-weight:950; letter-spacing:0.11em; text-transform:uppercase; }
 .casper-masterclass-kicker::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(245,158,11,0.16); }
 .casper-masterclass-title { color:var(--navy); font-size:1.12rem; font-weight:950; line-height:1.23; margin-bottom:7px; }
 .casper-masterclass-copy { color:var(--gray600); font-size:0.77rem; line-height:1.52; margin-bottom:11px; }
 .casper-masterclass-tags { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:12px; }
 .casper-masterclass-tags span { border-radius:999px; padding:3px 7px; background:#fffbeb; border:1px solid #fde68a; color:#92400e; font-size:0.62rem; font-weight:850; }
 .casper-masterclass-btn { width:100%; border:0; border-radius:999px; background:linear-gradient(135deg,#fbbf24,#f59e0b); color:var(--navy); padding:10px 13px; font-family:inherit; font-size:0.8rem; font-weight:950; cursor:pointer; transition:transform 0.18s, box-shadow 0.18s; box-shadow:0 8px 22px rgba(245,158,11,0.2); }
 .casper-masterclass-btn:hover { transform:translateY(-1px); box-shadow:0 12px 26px rgba(245,158,11,0.28); }

 .masterclass-nudge-overlay { position:fixed; inset:0; z-index:100000; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(7,19,38,0.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
 .masterclass-nudge-overlay.open { display:flex; }
 .masterclass-nudge-card { width:min(660px,100%); max-height:min(92vh,760px); overflow:auto; background:#fff; border:1px solid rgba(14,165,233,0.22); border-radius:18px; box-shadow:0 30px 90px rgba(0,0,0,0.34); color:var(--gray800); }
 .masterclass-nudge-head { background:linear-gradient(135deg,var(--navy),#0d2a52); padding:24px 26px 22px; color:#fff; position:relative; }
 .masterclass-nudge-close { position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,0.18); background:rgba(255,255,255,0.08); color:#fff; cursor:pointer; font-family:inherit; font-size:1rem; line-height:1; display:flex; align-items:center; justify-content:center; }
 .masterclass-nudge-kicker { display:inline-flex; align-items:center; border-radius:999px; border:1px solid rgba(56,189,248,0.24); background:rgba(14,165,233,0.14); color:#bae6fd; padding:5px 11px; font-size:0.66rem; font-weight:900; letter-spacing:0.11em; text-transform:uppercase; margin-bottom:13px; }
 .masterclass-nudge-title { max-width:420px; font-size:1.45rem; line-height:1.18; font-weight:900; color:#fff; margin:0 0 8px; letter-spacing:0; }
 .masterclass-nudge-sub { max-width:440px; color:rgba(255,255,255,0.72); font-size:0.91rem; line-height:1.58; margin:0; }
 .masterclass-nudge-body { padding:22px 26px 24px; }
 .masterclass-nudge-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-bottom:18px; }
 .masterclass-nudge-fact { border:1px solid #dbeafe; background:#f8fbff; border-radius:11px; padding:10px 11px; min-width:0; }
 .masterclass-nudge-fact strong { display:block; color:var(--navy); font-size:0.92rem; line-height:1.2; margin-bottom:2px; }
 .masterclass-nudge-fact span { display:block; color:var(--gray600); font-size:0.7rem; line-height:1.35; font-weight:700; }
 .masterclass-nudge-panel { border:1px solid #fde68a; background:#fffbeb; border-radius:13px; padding:13px 15px; margin:-4px 0 18px; color:#713f12; font-size:0.84rem; line-height:1.55; }
 .masterclass-nudge-panel strong { color:#0a1628; }
 .masterclass-nudge-list { display:grid; gap:9px; margin:0 0 20px; }
 .masterclass-nudge-item { display:flex; gap:10px; align-items:flex-start; color:var(--gray600); font-size:0.86rem; line-height:1.48; }
 .masterclass-nudge-dot { width:18px; height:18px; border-radius:50%; background:#e0f2fe; border:1px solid rgba(14,165,233,0.24); flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center; }
 .masterclass-nudge-dot::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--teal); }
 .masterclass-nudge-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
 .masterclass-nudge-primary { display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:999px; background:linear-gradient(135deg,var(--teal),var(--teal3)); color:#fff; padding:12px 19px; font-family:inherit; font-size:0.88rem; font-weight:900; cursor:pointer; box-shadow:0 10px 28px rgba(14,165,233,0.24); }
 .masterclass-nudge-secondary { display:inline-flex; align-items:center; justify-content:center; border:1px solid #d1d5db; border-radius:999px; background:#fff; color:var(--gray600); padding:11px 16px; font-family:inherit; font-size:0.83rem; font-weight:850; cursor:pointer; }
 .masterclass-nudge-secondary.danger { color:#64748b; background:#f8fafc; }
 .masterclass-nudge-note { margin-top:12px; color:var(--gray400); font-size:0.72rem; line-height:1.45; }
 @media(max-width:560px){
  .masterclass-nudge-head,.masterclass-nudge-body { padding-left:20px; padding-right:20px; }
  .masterclass-nudge-title { font-size:1.25rem; padding-right:32px; }
  .masterclass-nudge-facts { grid-template-columns:1fr; }
  .masterclass-nudge-actions { flex-direction:column; align-items:stretch; }
  .masterclass-nudge-primary,.masterclass-nudge-secondary { width:100%; }
 }

 /* Practice insights - replaces the old clunky bottom-card grid with one coach-led panel. */
 .practice-insights-area { display:flex; flex-direction:column; gap:14px; margin-top:24px; }
 .practice-coach-strip { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:center; padding:18px 20px; border-radius:var(--radius); background:linear-gradient(135deg,#071326,#0d2a52); border:1px solid rgba(14,165,233,0.25); color:#fff; overflow:hidden; position:relative; }
 .practice-coach-strip::after { content:''; position:absolute; right:-42px; top:-42px; width:150px; height:150px; border-radius:50%; background:radial-gradient(circle,rgba(14,165,233,0.18),transparent 70%); pointer-events:none; }
 .practice-coach-copy { position:relative; z-index:1; }
 .practice-coach-kicker { font-size:0.68rem; font-weight:900; letter-spacing:0.12em; text-transform:uppercase; color:var(--teal2); margin-bottom:5px; }
 .practice-coach-title { font-size:1.03rem; font-weight:900; color:#fff; line-height:1.3; margin-bottom:4px; }
 .practice-coach-body { max-width:780px; font-size:0.86rem; line-height:1.55; color:rgba(255,255,255,0.68); }
 .practice-coach-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
 .practice-coach-tag { font-size:0.68rem; font-weight:800; color:#bae6fd; background:rgba(14,165,233,0.14); border:1px solid rgba(56,189,248,0.2); border-radius:999px; padding:4px 8px; }
 .practice-coach-actions { position:relative; z-index:1; display:flex; flex-direction:column; gap:8px; min-width:190px; }
 .practice-coach-btn { display:flex; align-items:center; justify-content:center; border:0; border-radius:999px; padding:11px 16px; background:var(--teal); color:#fff; font-size:0.84rem; font-weight:900; cursor:pointer; font-family:inherit; white-space:nowrap; transition:background 0.18s, transform 0.18s; }
 .practice-coach-btn:hover { background:var(--teal2); transform:translateY(-1px); }
 .practice-coach-link { display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.16); border-radius:999px; padding:9px 13px; color:rgba(255,255,255,0.72); font-size:0.78rem; font-weight:800; background:rgba(255,255,255,0.04); }
 .practice-coach-link-btn { cursor:pointer; font-family:inherit; }
 .practice-insights { background:#fff; border:1px solid #d1d5db; border-radius:var(--radius); overflow:hidden; box-shadow:0 1px 4px rgba(10,22,40,0.05); }
 .practice-insights-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:18px 20px; border-bottom:1px solid #e4e2de; }
 .practice-insights-title { font-size:1.05rem; font-weight:900; color:var(--navy); line-height:1.3; margin-bottom:3px; }
 .practice-insights-sub { font-size:0.82rem; color:var(--gray500); line-height:1.45; }
 .practice-insight-tabs { display:flex; gap:5px; background:var(--gray100); padding:4px; border-radius:999px; flex-shrink:0; }
 .practice-insight-tab { border:0; background:transparent; color:var(--gray600); border-radius:999px; padding:8px 13px; font-size:0.78rem; font-weight:900; cursor:pointer; font-family:inherit; white-space:nowrap; }
 .practice-insight-tab.active { background:#fff; color:var(--navy); box-shadow:0 2px 8px rgba(10,22,40,0.08); }
 .practice-insights-body { padding:18px 20px; }
 .practice-metric-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
 .practice-metric { border:1px solid #d1d5db; border-radius:11px; padding:13px 14px; background:linear-gradient(180deg,#fff,#f7f6f3); min-width:0; }
 .practice-metric-num { font-size:1.25rem; font-weight:900; color:var(--navy); line-height:1; display:block; }
 .practice-metric-label { font-size:0.72rem; color:var(--gray500); font-weight:800; margin-top:4px; display:block; }
 .practice-insight-panel { display:none; }
 .practice-insight-panel.active { display:block; }
 .practice-insight-layout { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(300px,0.92fr); gap:18px; align-items:start; }
 .practice-section-title { font-size:0.72rem; font-weight:900; letter-spacing:0.12em; text-transform:uppercase; color:var(--teal3); margin-bottom:10px; }
 .practice-trend-card { border:1px solid #d1d5db; border-radius:12px; background:linear-gradient(180deg,#fff,#f7f9fe); padding:16px; min-height:150px; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; }
 .practice-trend-bars { height:112px; display:flex; align-items:end; gap:10px; }
 .practice-trend-bar { flex:1; min-height:22px; border-radius:6px 6px 0 0; background:linear-gradient(180deg,var(--teal2),var(--teal)); position:relative; transition:opacity 0.2s; }
 .practice-trend-bar.gold { background:linear-gradient(180deg,#fbbf24,var(--gold)); }
 .practice-trend-bar.green { background:linear-gradient(180deg,#86efac,var(--green)); }
 .practice-trend-bar span { position:absolute; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%); font-size:0.68rem; font-weight:900; color:var(--gray600); }
 .practice-trend-labels { display:flex; justify-content:space-between; gap:8px; color:var(--gray400); font-size:0.68rem; font-weight:800; }
 .practice-coach-note { border-left:3px solid var(--teal); padding:2px 0 2px 13px; color:var(--gray600); font-size:0.9rem; line-height:1.6; }
 .practice-coach-note strong { color:var(--navy); }
 .practice-action-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
 .practice-action-card { border:1px solid #d1d5db; border-radius:12px; padding:15px; background:#fff; display:flex; flex-direction:column; min-width:0; box-shadow:0 1px 3px rgba(10,22,40,0.04); }
 .practice-action-card.dark { background:linear-gradient(135deg,var(--navy),#0d2a52); border-color:rgba(14,165,233,0.25); color:#fff; }
 .practice-action-kicker { font-size:0.66rem; font-weight:900; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal3); margin-bottom:7px; }
 .practice-action-card.dark .practice-action-kicker { color:var(--teal2); }
 .practice-action-title { font-size:0.95rem; font-weight:900; color:var(--navy); line-height:1.35; margin-bottom:5px; }
 .practice-action-card.dark .practice-action-title { color:#fff; }
 .practice-action-copy { color:var(--gray600); font-size:0.78rem; line-height:1.5; margin-bottom:12px; }
 .practice-action-card.dark .practice-action-copy { color:rgba(255,255,255,0.66); }
 .practice-action-meta { display:flex; gap:5px; flex-wrap:wrap; margin-top:auto; margin-bottom:10px; }
 .practice-mini-tag { font-size:0.62rem; font-weight:850; border-radius:999px; padding:3px 7px; color:#075985; background:#e0f2fe; }
 .practice-action-card.dark .practice-mini-tag { color:#bae6fd; background:rgba(14,165,233,0.16); border:1px solid rgba(56,189,248,0.18); }
 .practice-action-btn { display:flex; align-items:center; justify-content:center; width:100%; border:0; border-radius:999px; padding:9px 12px; background:var(--teal); color:#fff; font-size:0.78rem; font-weight:900; cursor:pointer; font-family:inherit; }
 .practice-action-btn.gold { background:var(--gold); color:var(--navy); }
 .practice-action-btn.outline { background:#fff; color:var(--navy); border:1px solid #d1d5db; }
 .practice-email-input { width:100%; padding:9px 12px; border:1px solid #d1d5db; border-radius:8px; font-size:0.82rem; font-family:inherit; color:var(--gray800); background:#f9f8f6; outline:none; margin-bottom:8px; box-sizing:border-box; }
 .practice-email-done { display:none; font-size:0.82rem; color:#16a34a; font-weight:700; padding:8px 0; }
 .practice-empty-insight { border:1px dashed #cbd5e1; border-radius:12px; background:#f9f8f6; color:var(--gray500); padding:18px; font-size:0.86rem; line-height:1.55; }
 .practice-insights .bottom-rail-card { background:transparent; border:0; border-radius:0; padding:0; display:block; min-width:0; }
 .practice-insights .bottom-rail-card h3 { font-size:0.72rem; font-weight:900; letter-spacing:0.12em; text-transform:uppercase; color:var(--teal3); margin-bottom:10px; }
 .category-filters { display:flex; flex-direction:column; gap:6px; }
 .cat-btn { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-radius:8px; border:1px solid #d1d5db; background:#f9f8f6; color:var(--gray600); font-size:0.85rem; font-weight:600; cursor:pointer; transition:all 0.2s; font-family:inherit; width:100%; text-align:left; }
 .cat-btn:hover { border-color:var(--teal); color:var(--teal3); background:rgba(14,165,233,0.04); }
 .cat-btn.active { background:var(--navy); color:var(--white); border-color:var(--navy); }
 .cat-btn.active .cat-count { background:rgba(255,255,255,0.15); color:rgba(255,255,255,0.8); }
 .cat-count { font-size:0.72rem; font-weight:600; background:#e4e2de; color:var(--gray600); padding:2px 8px; border-radius:50px; }
 .timer-settings { display:flex; flex-direction:column; gap:14px; }
 .setting-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
 .setting-label { font-size:0.85rem; color:var(--gray600); }
 .setting-val { font-size:0.85rem; font-weight:700; color:var(--navy); min-width:40px; text-align:right; }
 input[type="range"] { -webkit-appearance:none; width:100%; height:4px; border-radius:2px; background:var(--gray200); outline:none; cursor:pointer; }
 input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--teal); cursor:pointer; transition:transform 0.15s; }
 input[type="range"]::-webkit-slider-thumb:hover { transform:scale(1.2); }
 .stats-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
 .stat-mini { background:#fff; border-radius:10px; padding:12px; text-align:center; border:1px solid #d1d5db; box-shadow:0 1px 3px rgba(10,22,40,0.05); }
 .stat-mini-num { font-size:1.5rem; font-weight:800; color:var(--teal); display:block; }
 .stat-mini-label { font-size:0.72rem; color:var(--gray400); font-weight:500; }
 .btn-start { width:100%; padding:16px; border-radius:50px; background:var(--teal); color:var(--white); font-size:1rem; font-weight:700; border:none; cursor:pointer; transition:all 0.25s; font-family:inherit; box-shadow:0 4px 20px rgba(14,165,233,0.35); display:flex; align-items:center; justify-content:center; gap:8px; }
 .btn-start:hover { background:var(--teal2); transform:translateY(-2px); }
 .btn-start.running { background:var(--gray800); box-shadow:none; }
 .btn-start.running:hover { background:var(--navy); }

 .ai-toggle-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
 .ai-toggle-label { font-size:0.88rem; font-weight:700; color:var(--gray800); }
 .toggle-switch { position:relative; width:42px; height:24px; flex-shrink:0; }
 .toggle-switch input { opacity:0; width:0; height:0; position:absolute; }
 .toggle-slider { position:absolute; cursor:pointer; inset:0; background:var(--gray200); border-radius:24px; transition:0.3s; }
 .toggle-slider::before { content:''; position:absolute; height:18px; width:18px; left:3px; bottom:3px; background:var(--white); border-radius:50%; transition:0.3s; }
 input:checked + .toggle-slider { background:var(--teal); }
 input:checked + .toggle-slider::before { transform:translateX(18px); }
 .api-key-wrap { margin-top:10px; }
 .api-key-wrap label { font-size:0.78rem; color:var(--gray600); display:block; margin-bottom:6px; }
 .api-key-input { width:100%; padding:9px 12px; border:1px solid #d1d5db; border-radius:8px; font-size:0.83rem; font-family:inherit; color:var(--gray800); background:#f9f8f6; outline:none; transition:border-color 0.2s; }
 .api-key-input:focus { border-color:var(--teal); background:var(--white); }
 .api-note { font-size:0.71rem; color:var(--gray400); margin-top:6px; line-height:1.5; }
 .ai-status { display:flex; align-items:center; gap:6px; font-size:0.78rem; margin-top:10px; padding:8px 10px; border-radius:8px; }
 .ai-status.ok { background:rgba(34,197,94,0.1); color:#166534; }
 .ai-status.off { background:#f0eeea; color:var(--gray400); }
 .ai-status.err { background:rgba(239,68,68,0.1); color:#991b1b; }
 .sdot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
 .sdot-green { background:var(--green); }
 .sdot-gray { background:var(--gray400); }
 .sdot-red { background:var(--red); }

 .trend-wrap { margin-top:16px; border-top:1px solid #e4e2de; padding-top:14px; }
 .trend-title { font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--teal3); margin-bottom:10px; }
 .trend-empty { font-size:0.8rem; color:var(--gray400); text-align:center; padding:16px 0; font-style:italic; }
 .trend-avg-line { display:flex; align-items:center; justify-content:space-between; margin-top:6px; font-size:0.75rem; color:var(--gray400); }
 .trend-avg-num { font-weight:700; color:var(--navy); }

 .timer-mode-card { position:relative; display:flex; flex-direction:column; gap:4px; min-height:86px; padding:13px 13px 12px 58px; border-radius:12px; border:1.5px solid #cbd5e1; background:linear-gradient(135deg,#fff,#f7f6f3); transition:all 0.2s; }
 .timer-mode-card:hover { border-color:var(--teal); background:linear-gradient(135deg,#fff,rgba(14,165,233,0.06)); transform:translateY(-1px); }
 .timer-mode-active { border-color:var(--teal) !important; background:linear-gradient(135deg,rgba(14,165,233,0.12),#fff) !important; box-shadow:0 8px 20px rgba(14,165,233,0.1); }
 .tmc-icon { position:absolute; left:13px; top:13px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:10px; font-size:1.25rem; background:#fff; box-shadow:0 4px 12px rgba(10,22,40,0.08); }
 #timerModeOff .tmc-icon { background:#f8fafc; }
 #timerModeStandard .tmc-icon { background:#e0f2fe; }
 #timerModeRapid .tmc-icon { background:#fef3c7; }
 #timerModeDeep .tmc-icon { background:#ede9fe; }
 .tmc-name { font-size:0.82rem; font-weight:800; color:var(--navy); line-height:1.2; }
 .tmc-desc { font-size:0.7rem; color:var(--gray600); line-height:1.35; }

 /* -- Enquiry Modal (matches live site) -- */
 #enquiryModal, #questionSubmitModal { display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); align-items:center; justify-content:center; }
 #enquiryModal.open, #questionSubmitModal.open { display:flex; }
 .enquiry-card { background:#0d1f3c; border:1px solid rgba(255,255,255,0.12); border-radius:20px; padding:36px 32px; max-width:460px; width:92%; position:relative; max-height:92vh; overflow-y:auto; }
 .enquiry-close { position:absolute; top:14px; right:14px; background:rgba(255,255,255,0.08); border:none; color:#fff; width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; }
 .enquiry-title { color:#fff; font-size:1.2rem; font-weight:800; margin-bottom:4px; }
 .enquiry-sub { color:rgba(255,255,255,0.5); font-size:0.85rem; margin-bottom:22px; }
 .enquiry-type-badge { display:inline-block; font-size:0.72rem; font-weight:700; padding:4px 12px; border-radius:50px; margin-bottom:16px; letter-spacing:0.04em; }
 .eq-field { margin-bottom:14px; }
 .eq-field label { display:block; font-size:0.78rem; font-weight:600; color:rgba(255,255,255,0.6); margin-bottom:6px; }
 .eq-field input, .eq-field textarea, .eq-field select { width:100%; padding:11px 14px; border:1.5px solid rgba(255,255,255,0.15); border-radius:10px; font-size:0.88rem; font-family:inherit; color:#fff; background:rgba(255,255,255,0.06); outline:none; transition:border-color 0.2s; box-sizing:border-box; }
 .eq-field input:focus, .eq-field textarea:focus, .eq-field select:focus { border-color:#0ea5e9; background:rgba(14,165,233,0.06); }
 .eq-field input::placeholder, .eq-field textarea::placeholder { color:rgba(255,255,255,0.3); }
 .eq-field select option { background:#0d1f3c; color:#fff; }
 .eq-actions { display:flex; gap:10px; margin-top:18px; }
 .eq-btn-cancel { flex:0 0 auto; padding:12px 20px; border-radius:50px; border:1px solid rgba(255,255,255,0.15); background:transparent; color:rgba(255,255,255,0.6); font-size:0.88rem; cursor:pointer; font-family:inherit; transition:all 0.2s; }
 .eq-btn-cancel:hover { border-color:rgba(255,255,255,0.4); color:#fff; }
 .eq-btn-submit { flex:1; padding:12px 20px; border-radius:50px; border:none; background:#0ea5e9; color:#fff; font-size:0.92rem; font-weight:700; cursor:pointer; font-family:inherit; transition:all 0.2s; }
 .eq-btn-submit:hover { background:#38bdf8; }
 .eq-btn-submit:disabled { opacity:0.5; cursor:not-allowed; }
 .eq-error { display:none; background:rgba(239,68,68,0.12); border:1px solid rgba(239,68,68,0.3); color:#fca5a5; font-size:0.82rem; padding:10px 14px; border-radius:8px; margin-bottom:14px; }
 .eq-success { text-align:center; padding:20px 0; }
.eq-success-icon { width:52px; height:52px; margin:0 auto 12px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(34,197,94,0.13); border:1px solid rgba(34,197,94,0.28); color:#86efac; font-size:0; line-height:1; }
.eq-success-icon::before { content:'\2713'; font-size:1.45rem; line-height:1; transform:translateY(-1px); }
 .eq-success-title { color:#fff; font-size:1.1rem; font-weight:700; margin-bottom:6px; }
 .question-modal-card { max-width:620px; }
 .question-format-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
 .question-format-grid .eq-field:first-child { grid-column:1 / -1; }
 .question-benefit-box { background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.25); border-radius:12px; padding:12px 14px; margin-bottom:16px; color:#fde68a; font-size:0.8rem; line-height:1.55; }
 .question-benefit-box strong { color:#fff; display:block; margin-bottom:4px; }
 .question-submit-status { display:none; font-size:0.8rem; line-height:1.45; padding:10px 12px; border-radius:10px; margin-bottom:12px; }
 .question-submit-status.error { display:block; color:#fecaca; background:rgba(239,68,68,0.12); border:1px solid rgba(239,68,68,0.28); }
 .question-submit-status.ok { display:block; color:#bbf7d0; background:rgba(34,197,94,0.12); border:1px solid rgba(34,197,94,0.26); }
 @media(max-width:640px){ .question-format-grid { grid-template-columns:1fr; } }
 .eq-success-sub { color:rgba(255,255,255,0.5); font-size:0.85rem; }

 .main-content { display:flex; flex-direction:column; gap:16px; min-width:0; }
 /* Sticky station header - keeps timer visible while user types/scrolls. */
 .station-header { background:var(--white); border:1px solid #d1d5db; border-radius:14px; padding:15px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; position:sticky; top:76px; z-index:50; box-shadow:0 2px 10px rgba(10,22,40,0.08); }
 .station-num { font-size:0.78rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--gray400); }
 .station-star-btn { width:30px; height:30px; border:1px solid transparent; border-radius:50%; background:transparent; color:var(--gray400); display:inline-flex; align-items:center; justify-content:center; font-family:inherit; font-size:1.35rem; line-height:1; cursor:pointer; transition:color 0.18s, background 0.18s, border-color 0.18s, transform 0.18s; }
 .station-star-btn:hover, .station-star-btn:focus-visible { color:var(--gold); background:rgba(245,158,11,0.08); border-color:rgba(245,158,11,0.22); transform:translateY(-1px); outline:none; }
 .station-star-btn.is-starred { color:var(--gold); background:rgba(245,158,11,0.12); border-color:rgba(245,158,11,0.28); }
 .station-star-hint { display:inline-flex; margin-left:-2px; color:#b45309; font-size:0.74rem; font-weight:700; font-style:normal; line-height:1.2; white-space:nowrap; align-self:center; background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.22); border-radius:50px; padding:4px 10px; }
 .category-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 14px; border-radius:50px; font-size:0.78rem; font-weight:700; }
 .cat-ethics { background:rgba(245,158,11,0.12); color:#b45309; }
 .cat-conflict { background:rgba(14,165,233,0.12); color:var(--teal3); }
 .cat-personal { background:rgba(139,92,246,0.12); color:#7c3aed; }
 .cat-professional { background:rgba(34,197,94,0.12); color:#16a34a; }
 .cat-communication { background:rgba(239,68,68,0.12); color:#dc2626; }
 .cat-teamwork { background:rgba(20,184,166,0.12); color:#0f766e; }
 .cat-public-health { background:rgba(59,130,246,0.12); color:#2563eb; }
 .cat-indigenous-health { background:rgba(217,119,6,0.13); color:#92400e; }
 .cat-rural-health { background:rgba(34,197,94,0.12); color:#15803d; }
 .cat-cultural-competence { background:rgba(236,72,153,0.12); color:#be185d; }
 .header-spacer { flex:1; }
 .timer-display { display:flex; align-items:center; gap:10px; padding:6px 10px; border:1px solid #cbd5e1; border-radius:999px; background:#f9f8f6; }
 .phase-badge { font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:4px 12px; border-radius:50px; }
 .phase-reading { background:rgba(245,158,11,0.15); color:#92400e; }
 .phase-reflection { background:rgba(124,58,237,0.14); color:#6d28d9; }
 .phase-writing { background:rgba(14,165,233,0.15); color:var(--teal3); }
 .phase-idle { background:#ede9e3; color:var(--gray400); }
 .phase-done { background:rgba(34,197,94,0.15); color:#166534; }
 .timer-num { font-size:1.28rem; font-weight:850; color:var(--navy); min-width:58px; text-align:right; font-variant-numeric:tabular-nums; transition:color 0.3s; }
 .timer-num.urgent { color:var(--red); }
 .progress-outer { height:5px; background:#e4e2de; border:none; border-radius:0 0 var(--radius) var(--radius); overflow:hidden; }
 .progress-fill { height:5px; border-radius:0; background:var(--teal); transition:width 1s linear, background 0.3s; width:0%; }
 .progress-fill.reading { background:var(--gold); }
 .progress-fill.reflection { background:#8b5cf6; }
 .progress-fill.writing { background:var(--teal); }
 .progress-fill.urgent { background:var(--red); }

 .casper-reflection-toggle { align-items:center; gap:8px; min-height:38px; padding:5px 7px 5px 11px; border:1px solid rgba(124,58,237,0.24); border-radius:999px; background:linear-gradient(135deg,#fff,rgba(124,58,237,0.06)); box-shadow:0 6px 18px rgba(124,58,237,0.08); cursor:pointer; transition:border-color 0.18s, background 0.18s, box-shadow 0.18s; }
 .casper-reflection-toggle:hover,
 .casper-reflection-toggle:focus-within { border-color:rgba(124,58,237,0.55); background:linear-gradient(135deg,#fff,rgba(124,58,237,0.1)); box-shadow:0 8px 22px rgba(124,58,237,0.12); }
 .casper-reflection-toggle.active { border-color:#8b5cf6; background:linear-gradient(135deg,rgba(237,233,254,0.95),#fff); }
 .casper-reflection-toggle input { width:16px; height:16px; accent-color:#7c3aed; cursor:pointer; flex-shrink:0; }
 .reflection-toggle-copy { display:flex; align-items:baseline; gap:5px; min-width:0; }
 .reflection-toggle-title { color:var(--navy); font-size:0.74rem; font-weight:850; line-height:1.1; white-space:nowrap; }
 .reflection-toggle-sub { color:#7c3aed; font-size:0.64rem; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; white-space:nowrap; }
 .reflection-new-chip { display:inline-flex; align-items:center; justify-content:center; margin-left:3px; padding:1px 6px; border-radius:999px; background:#fef3c7; border:1px solid rgba(245,158,11,0.28); color:#92400e; font-size:0.58rem; font-weight:900; letter-spacing:0.02em; vertical-align:middle; }
 .reflection-help { position:relative; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#f5f3ff; border:1px solid rgba(124,58,237,0.22); color:#6d28d9; font-size:0.72rem; font-weight:900; flex-shrink:0; }
 .reflection-help::after { content:attr(aria-label); position:absolute; right:0; top:calc(100% + 9px); z-index:80; width:min(300px,78vw); padding:10px 12px; border-radius:10px; background:#0a1628; color:#fff; box-shadow:0 14px 34px rgba(10,22,40,0.22); font-size:0.72rem; font-weight:650; line-height:1.45; text-align:left; opacity:0; pointer-events:none; transform:translateY(-4px); transition:opacity 0.15s, transform 0.15s; }
 .reflection-help:hover::after,
 .reflection-help:focus::after { opacity:1; transform:translateY(0); }

 .scenario-card { background:var(--white); border:1px solid #d1d5db; border-radius:var(--radius); overflow:hidden; box-shadow:0 2px 10px rgba(10,22,40,0.07), 0 1px 3px rgba(10,22,40,0.04); }
 .scenario-top { padding:24px 28px; border-bottom:1px solid #e4e2de; }
 .scenario-label { font-size:0.7rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--teal3); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
 .scenario-label::before { content:''; display:block; width:20px; height:2px; background:var(--teal); border-radius:1px; }
 .scenario-text { font-size:1rem; color:var(--gray800); line-height:1.75; }
 .idle-hero { padding:40px 28px 36px; text-align:center; }
 .idle-icon { font-size:3rem; margin-bottom:16px; opacity:0.18; }
 .idle-title { font-size:1.25rem; font-weight:800; color:var(--navy); margin-bottom:6px; }
 .idle-sub { font-size:0.9rem; color:var(--gray400); line-height:1.55; max-width:360px; margin:0 auto; }
 .idle-start-row { display:flex; flex-direction:column; align-items:center; gap:7px; margin:22px auto 0; max-width:320px; }
 .btn-start-inline { width:100%; max-width:300px; min-height:48px; padding:13px 20px; font-size:0.96rem; box-shadow:0 10px 26px rgba(14,165,233,0.28); }
 .idle-start-hint { font-size:0.72rem; color:var(--gray400); line-height:1.35; }
 .prompts-area { padding:18px 28px 20px; display:flex; flex-direction:column; gap:10px; }
 .prompts-locked { display:flex; align-items:center; gap:12px; color:var(--gray400); font-size:0.9rem; font-style:italic; }
 .lock-icon { width:32px; height:32px; background:#ede9e3; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:0.9rem; flex-shrink:0; }
 .prompt-item { background:#f9f8f6; border:1px solid #d1d5db; border-radius:12px; padding:16px 18px; display:flex; gap:14px; align-items:flex-start; animation:fadeSlideIn 0.4s ease; }
 @keyframes fadeSlideIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
 .prompt-num { width:26px; height:26px; background:var(--navy); color:var(--white); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.74rem; font-weight:700; flex-shrink:0; margin-top:1px; }
 .prompt-text { font-size:0.97rem; color:var(--gray800); line-height:1.65; padding-top:3px; }

 .answer-section { border-top:1px solid #e4e2de; padding:18px 28px; display:flex; flex-direction:column; gap:10px; }
 .answer-label { font-size:0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--gray400); display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
 .answer-label-main { display:inline-flex; align-items:center; gap:8px; }
 .answer-label-actions { display:inline-flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; margin-left:auto; }
 .word-count { font-size:0.75rem; color:var(--gray400); font-weight:400; letter-spacing:0; text-transform:none; }
 .answer-textarea { width:100%; min-height:260px; height:min(38vh, 380px); padding:16px; border:1px solid #cbd5e1; border-radius:12px; font-family:inherit; font-size:0.95rem; color:var(--gray800); line-height:1.7; resize:vertical; outline:none; transition:border-color 0.2s, background 0.2s; background:#f9f8f6; }
 .answer-textarea:focus { border-color:var(--teal); background:var(--white); }
 .answer-textarea::placeholder { color:var(--gray400); }

 .ai-feedback { border:1px solid rgba(14,165,233,0.25); border-radius:12px; background:rgba(14,165,233,0.04); overflow:hidden; animation:fadeSlideIn 0.5s ease; border-top:3px solid var(--teal); }
 .ai-feedback-header { padding:12px 18px; border-bottom:1px solid rgba(14,165,233,0.15); display:flex; align-items:center; gap:10px; }
 .ai-feedback-title { font-size:0.8rem; font-weight:700; color:var(--teal3); }
 .ai-score-badge { margin-left:auto; font-size:0.82rem; font-weight:800; padding:3px 12px; border-radius:50px; }
 .score-high { background:rgba(34,197,94,0.15); color:#166534; }
 .score-mid { background:rgba(245,158,11,0.15); color:#92400e; }
 .score-low { background:rgba(239,68,68,0.15); color:#991b1b; }
 /* Score-specific top border on AI feedback panels */
 .ai-feedback:has(.score-high) { border-top-color:#22c55e; }
 .ai-feedback:has(.score-mid)  { border-top-color:var(--gold); }
 .ai-feedback:has(.score-low)  { border-top-color:var(--red); }
 .ai-feedback-body { padding:14px 18px; font-size:0.9rem; color:var(--gray600); line-height:1.75; }
 .ai-feedback-body strong { color:var(--navy); font-weight:600; }
 .ai-loading { padding:18px; display:flex; align-items:center; gap:10px; color:var(--teal3); font-size:0.88rem; }
 .spinner { width:16px; height:16px; border:2px solid rgba(14,165,233,0.3); border-top-color:var(--teal); border-radius:50%; animation:spin 0.8s linear infinite; flex-shrink:0; }
 @keyframes spin { to { transform:rotate(360deg); } }

 .nav-controls { background:var(--white); border:1px solid #d1d5db; border-radius:var(--radius); padding:16px 18px; display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; box-shadow:0 2px 8px rgba(10,22,40,0.07); }
 .station-action-left { display:flex; align-items:center; gap:8px; margin-right:auto; flex-wrap:wrap; }
 .btn-ctrl { display:flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:10px 18px; border-radius:50px; border:1px solid #cbd5e1; background:var(--white); color:var(--gray600); font-size:0.88rem; font-weight:700; cursor:pointer; transition:all 0.2s; font-family:inherit; white-space:nowrap; }
 .btn-ctrl[hidden] { display:none; }
 .btn-ctrl:hover:not(:disabled) { border-color:var(--navy); color:var(--navy); background:#f9f8f6; }
 .btn-ctrl:disabled { opacity:0.35; cursor:not-allowed; }
 .btn-ctrl-primary { background:var(--navy); color:var(--white); border-color:var(--navy); }
 .btn-ctrl-primary:hover:not(:disabled) { background:var(--navy2); border-color:var(--navy2); color:var(--white); }
 .btn-ai-mark { background:linear-gradient(135deg,var(--teal),#0284c7); color:var(--white); border-color:transparent; box-shadow:0 6px 18px rgba(14,165,233,0.25); }
 .btn-ai-mark:hover:not(:disabled) { background:linear-gradient(135deg,var(--teal2),var(--teal)); color:var(--white); border-color:transparent; transform:translateY(-1px); }
 .btn-ai-mark-small { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:7px 13px; border-radius:999px; border:1px solid rgba(14,165,233,0.32); background:rgba(14,165,233,0.09); color:var(--teal3); font-family:inherit; font-size:0.76rem; font-weight:850; cursor:pointer; transition:all 0.18s; white-space:nowrap; }
 .btn-ai-mark-small:hover:not(:disabled) { background:rgba(14,165,233,0.16); border-color:var(--teal); color:#075985; transform:translateY(-1px); }
 .btn-ai-mark-small:disabled { opacity:0.58; cursor:not-allowed; transform:none; }
 .btn-ctrl-refresh { border-color:rgba(245,158,11,0.3); background:#fffbeb; color:#92400e; }
 .btn-ctrl-refresh:hover:not(:disabled) { background:#fef3c7; border-color:var(--gold); color:#78350f; }
 .btn-ctrl-skip { border-color:var(--gold); color:#92400e; }
 .btn-ctrl-skip:hover:not(:disabled) { background:rgba(245,158,11,0.08); }
 .ai-action-wrap { align-items:center; gap:8px; flex-wrap:wrap; }
 .ai-action-wrap-top { text-transform:none; letter-spacing:0; }
 .ai-action-remaining { font-size:0.75rem; color:var(--teal3); font-weight:800; white-space:nowrap; }
 .ai-action-remaining-top { font-size:0.68rem; color:var(--gray400); font-weight:750; }
 .btn-start.session-running { background:var(--gray100); color:var(--gray600); box-shadow:none; cursor:default; transform:none; }
 .btn-start.session-running:hover { background:var(--gray100); transform:none; }

 .review-panel { background:var(--white); border:1px solid #d1d5db; border-radius:var(--radius); overflow:hidden; display:none; box-shadow:0 2px 10px rgba(10,22,40,0.07); }
 .review-panel.show { display:block; }
 .review-header { background:linear-gradient(135deg,var(--navy) 0%,#0d2a52 100%); padding:28px 32px; border-bottom:3px solid var(--teal); }
 .review-header h2 { font-size:1.8rem; font-weight:800; color:var(--white); margin-bottom:4px; }
 .review-header p { color:rgba(255,255,255,0.6); font-size:0.95rem; }
 .review-stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:24px 32px; border-bottom:1px solid #e4e2de; }
 .review-stat { text-align:center; }
 .review-stat-num { font-size:1.9rem; font-weight:900; color:var(--teal); display:block; letter-spacing:-0.02em; }
 .review-stat-label { font-size:0.78rem; color:var(--gray400); }
 .review-trend { padding:24px 32px; border-bottom:1px solid #e4e2de; }
 .review-trend h3 { font-size:0.78rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal3); margin-bottom:16px; }
 .chart-container { position:relative; height:140px; width:100%; }
 .review-list { padding:24px 32px; display:flex; flex-direction:column; gap:14px; }
 .review-list h3 { font-size:0.78rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal3); }
 .review-filter-row { display:flex; gap:8px; flex-wrap:wrap; }
 .review-filter-btn { padding:6px 16px; border-radius:50px; border:1px solid #cbd5e1; background:var(--white); color:var(--gray600); font-size:0.8rem; font-weight:500; cursor:pointer; font-family:inherit; transition:all 0.2s; }
 .review-filter-btn.active { background:var(--navy); color:var(--white); border-color:var(--navy); }
 .station-review-card { border:1px solid #d1d5db; border-radius:12px; overflow:hidden; transition:box-shadow 0.2s; }
 .station-review-card:hover { box-shadow:0 4px 16px rgba(10,22,40,0.1); }
 .station-review-card:hover .src-header { background:#f0eeea; }
 .src-header { padding:14px 18px; display:flex; align-items:flex-start; gap:12px; background:#f9f8f6; border-bottom:1px solid #e4e2de; cursor:pointer; user-select:none; transition:background 0.15s; }
 .src-num { font-size:0.72rem; font-weight:700; color:var(--gray400); min-width:20px; padding-top:2px; }
 .src-scenario { font-size:0.88rem; color:var(--gray700); line-height:1.5; flex:1; }
 .src-score-badge { flex-shrink:0; font-size:0.78rem; font-weight:800; padding:3px 12px; border-radius:50px; }
 .src-body { padding:16px 18px; display:none; }
 .src-body.open { display:block; }
 .src-section-label { font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--gray400); margin-bottom:6px; margin-top:14px; }
 .src-section-label:first-child { margin-top:0; }
 .src-answer-text { font-size:0.88rem; color:var(--gray600); line-height:1.7; background:#f9f8f6; border:1px solid #e4e2de; border-radius:8px; padding:12px 14px; white-space:pre-wrap; }
 .src-feedback-text { font-size:0.88rem; color:var(--gray700); line-height:1.75; }
 .src-feedback-text strong { color:var(--navy); }
 .below-avg-tag { display:inline-flex; align-items:center; gap:4px; background:rgba(239,68,68,0.1); color:#dc2626; font-size:0.7rem; font-weight:700; padding:2px 8px; border-radius:50px; margin-left:6px; }
 .review-footer { padding:24px 32px; border-top:1px solid #e4e2de; display:flex; gap:12px; flex-wrap:wrap; }
 .btn-restart { display:inline-flex; align-items:center; gap:8px; padding:13px 28px; border-radius:50px; background:var(--teal); color:var(--white); font-size:0.9rem; font-weight:700; border:none; cursor:pointer; font-family:inherit; transition:all 0.2s; box-shadow:0 4px 16px rgba(14,165,233,0.3); }
 .btn-restart:hover { background:var(--teal2); transform:translateY(-2px); }
 .btn-restart-outline { background:var(--white); color:var(--navy); border:1px solid #d1d5db; box-shadow:none; }
 .btn-restart-outline:hover { background:#f0eeea; border-color:var(--navy); }

 footer { background:#060e1c; padding:32px 0; color:rgba(255,255,255,0.4); margin-top:40px; }
 .footer-inner { max-width:1500px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
 .footer-logo { font-size:1.1rem; font-weight:800; color:var(--white); }
 .footer-logo span { color:var(--teal); }
 .footer-copy { font-size:0.8rem; }
 .footer-link { color:var(--teal2); font-size:0.8rem; }
 .footer-link:hover { text-decoration:underline; }

 @media (max-width:1180px) {
 .practice-action-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .practice-insight-layout { grid-template-columns:1fr; }
 }
 @media (max-width:1024px) { .app-wrapper { grid-template-columns:1fr; } .sidebar { position:static; } }
 
 /* -- Mode Toggle -- */
 .mode-toggle-wrap { background:var(--white); border:1px solid #d1d5db; border-top:2.5px solid var(--teal); border-radius:var(--radius); padding:16px 20px; display:flex; flex-direction:column; gap:10px; box-shadow:0 2px 8px rgba(14,165,233,0.07), 0 1px 3px rgba(10,22,40,0.06); }
 .mode-toggle-label { font-size:0.72rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--teal3); }
 .mode-pill-row { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.practice-mode-grid { grid-template-columns:0.9fr 0.74fr 1.55fr; }
/* ── MODE PILLS ── */
/* All three pills share a fixed height so the grid NEVER reflows */
.mode-pill {
 display:flex; align-items:center; justify-content:center;
 height:42px; min-height:42px; max-height:42px; /* locked — no reflow */
 padding:0 7px; border-radius:8px;
 border:1px solid #cbd5e1; /* slightly stronger than gray200 — reads as pressable */
 background:var(--white); color:var(--gray600);
 font-size:0.8rem; font-weight:800; cursor:pointer;
 transition:background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
 font-family:inherit; text-align:center; white-space:nowrap; letter-spacing:0;
 overflow:hidden; /* belt-and-braces — nothing can push height */
}
.mode-pill:hover { border-color:var(--teal); color:var(--teal3); background:rgba(14,165,233,0.04); }
.mode-pill.active-casper { background:var(--navy); color:var(--white); border-color:var(--navy); box-shadow:0 4px 14px rgba(10,22,40,0.22); }
.mode-pill.active-mmi { background:linear-gradient(135deg,#6d28d9,#7c3aed); color:var(--white); border-color:#7c3aed; box-shadow:0 4px 14px rgba(124,58,237,0.25); }

/* Mock pill: two-line content via relative+absolute so kicker never pushes height */
.mode-pill-mock {
 position:relative;
 flex-direction:column; gap:0;
 color:var(--navy);
 border-color:rgba(14,165,233,0.45);
 background:linear-gradient(160deg,rgba(14,165,233,0.1),rgba(14,165,233,0.02) 60%,#fff);
 box-shadow:0 4px 14px rgba(14,165,233,0.14);
}
/* Kicker absolutely positioned — cannot affect pill height */
.mock-pill-kicker {
 position:absolute;
 top:6px; left:50%; transform:translateX(-50%);
 display:block;
 font-size:0.5rem; font-weight:900; line-height:1;
 letter-spacing:0.12em; text-transform:uppercase;
 color:var(--teal3);
 pointer-events:none; white-space:nowrap;
}
/* Main label pushed down slightly to visually sit below kicker */
.mode-pill-mock > span:last-child { margin-top:8px; }

.mode-pill.active-mock {
 background:linear-gradient(135deg,var(--navy),#0f2a44);
 box-shadow:0 8px 20px rgba(10,22,40,0.28), inset 0 -3px 0 var(--teal);
 color:#ffffff !important; /* explicit — overrides gray600 base */
 border-color:var(--navy);
}
/* Both children must be white — explicit overrides prevent invisible-text bug */
.mode-pill.active-mock .mock-pill-kicker { color:#7dd3fc !important; }
.mode-pill.active-mock > span:last-child { color:#ffffff !important; }
.mode-pill.active-mock:hover { border-color:var(--navy); color:#ffffff !important; }
.mock-pill-helper {
 margin-top:8px;
 padding:10px 12px;
 border:1px solid rgba(14,165,233,0.2);
 border-radius:10px;
 background:linear-gradient(135deg,rgba(14,165,233,0.07),rgba(14,165,233,0.03));
 color:var(--gray600);
 font-size:0.74rem;
 font-weight:600;
 line-height:1.45;
 text-align:center;
}
.mock-pill-helper a {
 color:var(--teal3);
 font-weight:700;
 text-decoration:none;
 border-bottom:1.5px solid rgba(2,132,199,0.3);
 padding-bottom:1px;
 transition:border-color 0.15s, color 0.15s;
 white-space:nowrap;
}
.mock-pill-helper a:hover {
 color:var(--teal);
 border-bottom-color:var(--teal);
}

 /* -- MMI sidebar options -- */
 .mmi-options { display:flex; flex-direction:column; gap:8px; }
 .mmi-opt-row { display:flex; align-items:center; justify-content:space-between; font-size:0.83rem; color:var(--gray600); }
 .mmi-opt-label { font-size:0.83rem; color:var(--gray600); }
 .mmi-sidebar-note { border:1px solid rgba(124,58,237,0.16); background:linear-gradient(180deg,#fff,#faf7ff); border-radius:10px; padding:11px 12px; color:var(--gray600); font-size:0.76rem; line-height:1.5; margin-bottom:12px; }
 .mmi-sidebar-note strong { display:block; color:#6d28d9; font-weight:900; margin-bottom:3px; }
 .mmi-prompt-count-btn { min-height:34px; border:1px solid var(--gray200); border-radius:8px; background:#fff; color:var(--gray700); font-family:inherit; font-size:0.82rem; font-weight:800; cursor:pointer; transition:background 0.16s,border-color 0.16s,color 0.16s,box-shadow 0.16s; }
 .mmi-prompt-count-btn:hover { border-color:rgba(14,165,233,0.45); color:var(--teal3); }
 .mmi-prompt-count-btn.active { background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:0 5px 12px rgba(10,22,40,0.14); }

 .mmi-timer-picker { margin:26px auto 0; max-width:640px; text-align:left; }
 .mmi-timer-picker-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:10px; }
 .mmi-timer-kicker { font-size:0.68rem; font-weight:900; letter-spacing:0.12em; text-transform:uppercase; color:#6d28d9; }
 .mmi-timer-title { font-size:0.92rem; font-weight:900; color:var(--navy); line-height:1.25; margin-top:2px; }
 .mmi-timer-selected { flex-shrink:0; border:1px solid rgba(124,58,237,0.2); background:rgba(124,58,237,0.07); color:#6d28d9; border-radius:999px; padding:5px 10px; font-size:0.68rem; font-weight:900; white-space:nowrap; }
 .mmi-timer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
 .mmi-timer-choice { min-height:86px; border-color:#d8d5e6; background:linear-gradient(135deg,#fff,#f9f7ff); }
 .mmi-timer-picker .mmi-timer-choice:hover { border-color:#7c3aed; background:linear-gradient(135deg,#fff,rgba(124,58,237,0.06)); transform:translateY(-1px); }
 .mmi-timer-picker .mmi-timer-choice.active { border-color:#7c3aed; background:linear-gradient(135deg,rgba(124,58,237,0.11),#fff); box-shadow:0 8px 20px rgba(124,58,237,0.12); }
 .mmi-timer-choice .preset-name { display:block; font-size:0.82rem; font-weight:900; color:var(--navy); margin-bottom:4px; }
 .mmi-timer-choice .preset-detail { display:block; font-size:0.69rem; color:var(--gray600); line-height:1.38; }
 .mmi-timer-picker .mmi-timer-choice.active .preset-name, .mmi-timer-picker .mmi-timer-choice.active .preset-detail { color:#6d28d9; }
 .mmi-timer-choice-custom { grid-column:1/-1; min-height:72px; }
 .mmi-timer-picker .mmi-custom-config { margin-top:10px; border-color:rgba(124,58,237,0.18); background:linear-gradient(180deg,#fff,#fbfaff); }
 .mmi-custom-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
 .mmi-custom-grid label { display:block; min-width:0; }
 .mmi-custom-grid select,
 .mmi-custom-grid input[type="number"] { width:100%; min-height:38px; padding:8px 10px; border:1px solid var(--gray200); border-radius:8px; background:#fff; color:var(--gray800); font-family:inherit; font-size:0.82rem; font-weight:700; outline:none; }
 .mmi-custom-grid select:focus,
 .mmi-custom-grid input[type="number"]:focus { border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,0.1); }
 .mmi-custom-hint { font-size:0.72rem; color:var(--gray500); line-height:1.45; margin-top:8px; }
 .mmi-central-timer { align-items:center; justify-content:space-between; gap:16px; width:min(520px,100%); margin:0 auto 14px; padding:15px 18px; border:1px solid rgba(124,58,237,0.2); border-radius:14px; background:linear-gradient(135deg,#fff,rgba(124,58,237,0.06)); box-shadow:0 12px 28px rgba(10,22,40,0.08); font-family:inherit; }
 .mmi-central-timer.is-reading { border-color:rgba(124,58,237,0.24); background:linear-gradient(135deg,#fff,rgba(124,58,237,0.08)); }
 .mmi-central-timer.is-answer { border-color:rgba(239,68,68,0.2); background:linear-gradient(135deg,#fff,rgba(239,68,68,0.055)); }
 .mmi-central-copy { display:flex; flex-direction:column; min-width:110px; }
 .mmi-central-label { font-size:0.68rem; font-weight:900; letter-spacing:0.1em; text-transform:uppercase; color:#6d28d9; }
 .mmi-central-timer.is-answer .mmi-central-label { color:#dc2626; }
 .mmi-central-sub { font-size:0.72rem; color:var(--gray500); font-weight:700; margin-top:2px; }
 .mmi-central-number { flex:1; text-align:center; font-size:2.25rem; line-height:1; font-weight:950; color:var(--navy); font-variant-numeric:tabular-nums; letter-spacing:0; }
 .mmi-central-number.urgent { color:var(--red); }
 .mmi-central-remaining { min-width:70px; text-align:right; font-size:0.68rem; color:var(--gray400); font-weight:900; text-transform:uppercase; letter-spacing:0.08em; }

 /* -- Download button -- */
 .btn-download { display:inline-flex; align-items:center; gap:7px; padding:9px 18px; border-radius:50px; border:1.5px solid var(--teal3); background:rgba(14,165,233,0.06); color:var(--teal3); font-size:0.83rem; font-weight:700; cursor:pointer; transition:all 0.2s; font-family:inherit; white-space:nowrap; }
 .btn-download:hover { background:rgba(14,165,233,0.12); }

 /* -- Textarea locked state -- */
 .answer-textarea.locked { background:#f0eeea; color:var(--gray600); cursor:default; border-color:#d1d5db; resize:none; }
 .answer-textarea.time-expired { border-color:var(--teal)!important; }
 @keyframes flashRed { 0%{border-color:#d1d5db;box-shadow:none} 20%{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,0.2)} 60%{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,0.15)} 100%{border-color:var(--teal);box-shadow:none} }
 .answer-textarea.flash-expired { animation:flashRed 1.1s ease forwards; }
 .time-up-banner { display:none; border-radius:8px; padding:7px 12px; font-size:0.78rem; font-weight:600; align-items:center; gap:8px; margin-bottom:6px; }
 .time-up-banner.show { display:flex; }
 .time-up-banner.open-mode { background:rgba(14,165,233,0.07); border:1px solid rgba(14,165,233,0.2); color:var(--teal3); }
 .time-up-banner.strict-mode { background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.25); color:#dc2626; }

 /* -- Webcam panel -- */
 /* -- Webcam: compact floating panel -- */
 .webcam-panel { display:none; }
 .webcam-panel.show { display:flex; justify-content:center; margin-bottom:4px; }
 .webcam-float { width:420px; margin:0 auto; background:var(--navy); border-radius:14px; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,0.35); border:2px solid rgba(14,165,233,0.25); }
 .webcam-header { background:var(--navy); padding:7px 12px; display:flex; align-items:center; gap:8px; border-bottom:1px solid rgba(255,255,255,0.06); }
 .webcam-header-title { color:rgba(255,255,255,0.75); font-weight:600; font-size:0.72rem; flex:1; letter-spacing:0.02em; }
 .rec-dot { width:7px; height:7px; border-radius:50%; background:var(--red); animation:recpulse 1.2s ease-in-out infinite; flex-shrink:0; }
 @keyframes recpulse { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
 .rec-label { font-size:0.65rem; font-weight:700; color:rgba(255,255,255,0.6); letter-spacing:0.06em; text-transform:uppercase; }
 .webcam-video-wrap { position:relative; background:#000; width:100%; aspect-ratio:16/9; overflow:hidden; }
 #webcamLive { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block; background:#000; transform:scaleX(-1); }
 #webcamPlayback { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:contain; display:none; background:#000; }
 .webcam-overlay { position:absolute; top:0; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; background:rgba(10,22,40,0.82); }
 .webcam-overlay.hidden { display:none; }
 .webcam-permission-text { color:rgba(255,255,255,0.75); font-size:0.72rem; text-align:center; padding:0 12px; line-height:1.4; }
 .btn-webcam-start { padding:7px 14px; border-radius:50px; background:var(--teal); color:var(--white); border:none; font-size:0.75rem; font-weight:700; cursor:pointer; font-family:inherit; }
 .webcam-controls { padding:7px 10px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; background:rgba(255,255,255,0.04); border-top:1px solid rgba(255,255,255,0.06); }
 .webcam-timer-display { font-size:0.82rem; font-weight:800; color:var(--teal2); font-variant-numeric:tabular-nums; margin-right:auto; }
 .btn-webcam-dl { display:inline-flex; align-items:center; gap:4px; padding:5px 10px; border-radius:50px; background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.8); border:1px solid rgba(255,255,255,0.12); font-size:0.7rem; font-weight:700; cursor:pointer; font-family:inherit; transition:all 0.2s; white-space:nowrap; }
 .btn-webcam-dl:hover { background:rgba(255,255,255,0.15); }
 .btn-webcam-dl:disabled { opacity:0.3; cursor:not-allowed; }
 .btn-webcam-restart { display:inline-flex; align-items:center; gap:4px; padding:5px 10px; border-radius:50px; background:rgba(239,68,68,0.12); color:#fca5a5; border:1px solid rgba(239,68,68,0.25); font-size:0.7rem; font-weight:700; cursor:pointer; font-family:inherit; transition:all 0.2s; white-space:nowrap; }
 .btn-webcam-restart:hover { background:rgba(239,68,68,0.22); }
 .btn-webcam-restart:disabled { opacity:0.3; cursor:not-allowed; }
 @media (max-width:768px) { .webcam-float { width:100%; max-width:420px; } }

 /* -- MMI speaking mode - no textarea, show speaking prompt -- */
 .mmi-speaking-area { border-top:1px solid #e4e2de; padding:22px 32px; display:none; flex-direction:column; gap:14px; }
 .mmi-speaking-area.show { display:flex; }
 .speaking-instruction { background:rgba(14,165,233,0.06); border:1px solid rgba(14,165,233,0.2); border-radius:12px; padding:16px 18px; font-size:0.93rem; color:var(--navy); line-height:1.6; }
 .speaking-instruction strong { color:var(--teal3); }

 /* -- Category badge for MMI -- */
 .cat-mmi { background:rgba(139,92,246,0.12); color:#7c3aed; }

 @media (max-width:600px) {
 .app-wrapper { padding:22px 14px 30px; }
 .scenario-top,.prompts-area,.answer-section,.review-list,.review-trend,.review-footer { padding:20px; }
 .review-stat-row { grid-template-columns:repeat(2,1fr); }
 .review-header { padding:24px 20px; }
 /* Tighter sticky header on mobile so it doesn't eat the screen */
 .station-header { padding:12px 14px; gap:10px; top:70px; border-radius:12px; }
 .timer-num { font-size:1.2rem; min-width:52px; }
 .phase-badge { font-size:0.66rem; padding:3px 10px; }
 .casper-reflection-toggle { width:100%; justify-content:center; padding:7px 10px; border-radius:12px; }
 .reflection-help::after { left:50%; right:auto; transform:translate(-50%,-4px); }
 .reflection-help:hover::after,
 .reflection-help:focus::after { transform:translate(-50%,0); }
 .station-num { font-size:0.7rem; }
 .timer-mode-card { min-height:80px; padding:12px 12px 11px 54px; }
 .tmc-icon { left:12px; top:12px; width:31px; height:31px; font-size:1.08rem; }
 .mmi-timer-picker { max-width:100%; margin-top:22px; }
 .mmi-timer-picker-head { align-items:flex-start; flex-direction:column; gap:7px; }
 .mmi-timer-selected { white-space:normal; }
 .mmi-timer-grid, .mmi-custom-grid { grid-template-columns:1fr; }
 .mmi-timer-choice-custom { grid-column:auto; }
 .mmi-central-timer { flex-direction:column; align-items:center; gap:9px; text-align:center; padding:14px; }
 .mmi-central-copy, .mmi-central-remaining { min-width:0; text-align:center; }
 .mmi-central-number { font-size:2rem; }
 .practice-coach-strip { grid-template-columns:1fr; padding:16px; }
 .practice-coach-actions { min-width:0; width:100%; }
 .practice-insights-head { display:block; padding:16px; }
 .practice-insight-tabs { margin-top:12px; overflow:auto; width:100%; border-radius:14px; }
 .practice-insights-body { padding:16px; }
 .practice-metric-strip { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 .practice-action-grid { grid-template-columns:1fr; }
 .practice-trend-bars { gap:7px; }
 .nav-controls { align-items:stretch; }
 .station-action-left, .ai-action-wrap { width:100%; margin-right:0; }
 .station-action-left .btn-ctrl, .ai-action-wrap .btn-ctrl, .nav-controls > .btn-ctrl-skip, .nav-controls > .btn-ctrl-primary { width:100%; }
 .ai-action-remaining { width:100%; text-align:center; }
 .answer-label-actions { width:100%; justify-content:flex-start; margin-left:0; }
 .ai-action-wrap-top { width:auto; }
 .ai-action-wrap-top .btn-ai-mark-small { width:auto; }
 .ai-action-remaining-top { width:auto; text-align:left; }
 }
 
 /* -- DAN MARKING CTA -- */
 .dan-marking-card { background:linear-gradient(135deg,var(--navy) 0%,#0d2a52 100%); border-radius:16px; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; margin:16px 0; border:1px solid rgba(14,165,233,0.2); position:relative; overflow:hidden; }
 .dan-marking-card::before { content:''; position:absolute; top:-30px; right:-30px; width:120px; height:120px; background:radial-gradient(circle,rgba(245,158,11,0.15) 0%,transparent 70%); pointer-events:none; }
 .dan-marking-left { flex:1; }
 .dan-marking-label { font-size:0.65rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); margin-bottom:4px; }
 .dan-marking-left h4 { font-size:1rem; font-weight:800; color:var(--white); margin-bottom:4px; line-height:1.25; }
 .dan-marking-left p { font-size:0.78rem; color:rgba(255,255,255,0.55); line-height:1.5; }
 .dan-marking-right { display:flex; flex-direction:column; align-items:center; gap:8px; flex-shrink:0; }
 .dan-price { font-size:1.6rem; font-weight:800; color:var(--gold); line-height:1; }
 .dan-price-sub { font-size:0.7rem; color:rgba(255,255,255,0.4); }
 .btn-dan { background:var(--gold); color:var(--navy); font-weight:700; font-size:0.82rem; padding:10px 18px; border-radius:50px; border:none; cursor:pointer; transition:all 0.2s; white-space:nowrap; font-family:inherit; }
 .btn-dan:hover { background:#e08e00; transform:translateY(-1px); }
 /* limit bar */
 .ai-limit-bar { display:flex; justify-content:space-between; margin-bottom:5px; }
 .ai-limit-label { font-size:0.72rem; color:var(--gray600); font-weight:500; }
 .ai-limit-count { font-size:0.72rem; font-weight:700; color:var(--teal); }
 .ai-limit-count.exhausted { color:var(--gold); }
 .ai-limit-track { height:4px; background:#e4e2de; border-radius:100px; overflow:hidden; margin-bottom:2px; }
 .ai-limit-fill { height:4px; background:var(--teal); border-radius:100px; transition:width 0.4s ease; }
 .ai-limit-fill.exhausted { background:var(--gold); }
 /* Dan marking modal */
 .marking-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.55); backdrop-filter:blur(4px); z-index:2000; display:none; align-items:center; justify-content:center; padding:20px; }
 .marking-modal-overlay.open { display:flex; }
 .marking-modal { background:#fff; border-radius:16px; padding:32px; max-width:480px; width:100%; box-shadow:0 12px 48px rgba(0,0,0,0.28); }
 .marking-modal h3 { font-size:1.2rem; font-weight:800; color:var(--navy); margin-bottom:6px; }
 .marking-modal .msub { font-size:0.85rem; color:var(--gray600); margin-bottom:18px; line-height:1.55; }
 .marking-price-note { background:#fffbeb; border:1px solid rgba(245,158,11,0.3); border-radius:10px; padding:12px 16px; font-size:0.82rem; color:#78350f; margin-bottom:16px; }
 .marking-price-note strong { display:block; font-size:0.95rem; color:#92400e; margin-bottom:2px; }
 .mfield { margin-bottom:13px; }
 .mfield label { display:block; font-size:0.8rem; font-weight:600; color:var(--gray800); margin-bottom:5px; }
 .mfield input, .mfield textarea { width:100%; padding:9px 13px; border:1.5px solid #d1d5db; border-radius:8px; font-size:0.875rem; color:var(--gray800); outline:none; transition:border-color 0.2s; font-family:inherit; background:#fafaf9; }
 .mfield input:focus, .mfield textarea:focus { border-color:var(--teal); }
 .mactions { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }
 .btn-mcancel { padding:9px 18px; border-radius:50px; background:#f9f8f6; color:var(--gray600); border:1.5px solid #d1d5db; cursor:pointer; font-weight:600; font-size:0.85rem; font-family:inherit; transition:all 0.2s; }
 .btn-mcancel:hover { background:#ede9e3; }
 .btn-msend { padding:9px 22px; border-radius:50px; background:var(--navy); color:#fff; border:none; cursor:pointer; font-weight:700; font-size:0.85rem; font-family:inherit; transition:all 0.2s; }
 .btn-msend:hover { background:#0d2a52; }

 
 /* Practice page hero (for cold SEO visitors) */
 .practice-hero{background:linear-gradient(135deg,#0a1628 0%,#0d2a52 55%,#0a1f3d 100%);padding:72px 20px 34px;text-align:center;position:relative;overflow:hidden;}
 .practice-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at top,rgba(14,165,233,0.12),transparent 60%);pointer-events:none;}
 .practice-hero-inner{position:relative;max-width:820px;margin:0 auto;}
 .practice-hero-eyebrow{display:inline-block;padding:6px 14px;border-radius:50px;background:rgba(14,165,233,0.12);border:1px solid rgba(14,165,233,0.3);color:#38bdf8;font-size:0.72rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:13px;font-family:'DM Sans',system-ui,sans-serif;}
 .practice-hero-title{font-family:'DM Serif Display',Georgia,serif;font-size:2.28rem;line-height:1.06;color:#fff;margin:0 0 12px;font-weight:400;letter-spacing:0;}
 .practice-hero-accent{color:#38bdf8;}
 .practice-hero-sub{color:rgba(255,255,255,0.72);font-size:0.92rem;line-height:1.5;max-width:640px;margin:0 auto 16px;font-family:'DM Sans',system-ui,sans-serif;}
 .practice-hero-stats{display:flex;justify-content:center;gap:24px;margin:0 auto 18px;flex-wrap:wrap;}
 .practice-hero-stat{display:flex;flex-direction:column;align-items:center;gap:2px;}
 .practice-hero-stat-num{font-family:'DM Serif Display',Georgia,serif;font-size:1.52rem;color:#38bdf8;font-weight:400;line-height:1;}
 .practice-hero-stat-label{font-size:0.68rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.5);font-family:'DM Sans',system-ui,sans-serif;}
 .practice-hero-cta{display:inline-flex;align-items:center;gap:8px;background:#0ea5e9;color:#fff;font-family:'DM Sans',system-ui,sans-serif;font-weight:700;font-size:0.94rem;padding:13px 28px;border-radius:50px;text-decoration:none;box-shadow:0 6px 24px rgba(14,165,233,0.4);transition:all 0.2s;}
 .practice-hero-cta:hover{background:#38bdf8;transform:translateY(-2px);box-shadow:0 10px 32px rgba(14,165,233,0.5);}
 @media(max-width:640px){
 .practice-hero{padding:62px 16px 26px;}
 .practice-hero-inner{max-width:100%;min-width:0;}
 .practice-hero-title{font-size:1.64rem;line-height:1.1;}
 .practice-hero-title br{display:none;}
 .practice-hero-title,.practice-hero-sub{max-width:100%;overflow-wrap:break-word;}
 .practice-hero-sub{font-size:0.84rem;line-height:1.46;margin-bottom:14px;}
 .practice-hero-stats{display:none;}
 .practice-hero-cred{display:flex!important;width:100%;max-width:340px;box-sizing:border-box;margin:0 auto 14px!important;white-space:normal;justify-content:center;line-height:1.3;overflow-wrap:anywhere;}
 .practice-hero-cta{width:min(100%,260px);justify-content:center;}
 #practice-app,.app-wrapper,.sidebar,.main-content,.mode-toggle-wrap,.sidebar-card,.station-header,.scenario-card,.nav-controls{max-width:100%;min-width:0;}
 .practice-mode-grid{grid-template-columns:minmax(0,0.9fr) minmax(0,0.74fr) minmax(0,1.55fr);}
 .mode-pill{min-width:0;}
}