*, *::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; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; background: var(--gray50); color: var(--gray800); line-height: 1.6; min-height: 100vh; }
    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.5px; }
    .logo span { color:var(--teal); }

    .app-wrapper { max-width:1500px; margin:0 auto; padding:88px 24px 40px; display:grid; grid-template-columns:310px 1fr; gap:24px; min-height:100vh; align-items:start; }

    .sidebar { position:sticky; top:88px; display:flex; flex-direction:column; gap:16px; }
    .sidebar-card { background:var(--white); border:1px solid var(--gray200); border-radius:var(--radius); padding:20px; }
    .sidebar-card h3 { font-size:0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal3); margin-bottom:14px; }

    /* Bottom rail — promos and stats moved out of sidebar to keep it short.
       3 columns on desktop wide enough, auto-fit collapses on narrower viewports
       (and on mobile, where app-wrapper is already 1-column, this stacks too). */
    .bottom-rail { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; margin-top:24px; }
    .bottom-rail-card { background:var(--white); border:1px solid var(--gray200); border-radius:var(--radius); padding:20px; display:flex; flex-direction:column; }
    .bottom-rail-card h3 { font-size:0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal3); margin-bottom:14px; }
    .bottom-rail-card-promo { background:linear-gradient(135deg,#0a1628 0%,#0d2a52 100%); border:1px solid rgba(14,165,233,0.25); }
    .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 var(--gray200); background:var(--gray50); color:var(--gray600); font-size:0.85rem; font-weight:500; 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:var(--gray200); 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:var(--gray50); border-radius:10px; padding:12px; text-align:center; border:1px solid var(--gray100); }
    .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 var(--gray200); border-radius:8px; font-size:0.83rem; font-family:inherit; color:var(--gray800); background:var(--gray50); 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:var(--gray100); 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 var(--gray100); 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 { display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-radius:10px; border:1.5px solid var(--gray200); background:var(--gray50); transition:all 0.2s; }
    .timer-mode-card:hover { border-color:var(--teal); background:rgba(14,165,233,0.04); }
    .timer-mode-active { border-color:var(--teal) !important; background:rgba(14,165,233,0.08) !important; }
    .tmc-icon { font-size:1.4rem; }
    .tmc-name { font-size:0.82rem; font-weight:700; color:var(--navy); }
    .tmc-desc { font-size:0.72rem; color:var(--gray400); line-height:1.4; }

    /* ── Enquiry Modal (matches live site) ── */
    #enquiryModal { 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 { 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 { font-size:2.5rem; margin-bottom:12px; }
    .eq-success-title { color:#fff; font-size:1.1rem; font-weight:700; margin-bottom:6px; }
    .eq-success-sub { color:rgba(255,255,255,0.5); font-size:0.85rem; }

    .main-content { display:flex; flex-direction:column; gap:20px; }
    /* Sticky station header — keeps timer visible while user types/scrolls. */
    .station-header { background:var(--white); border:1px solid var(--gray200); border-radius:var(--radius); padding:20px 24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; position:sticky; top:76px; z-index:50; box-shadow:0 2px 12px rgba(10,22,40,0.04); }
    .station-num { font-size:0.78rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--gray400); }
    .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; }
    .header-spacer { flex:1; }
    .timer-display { display:flex; align-items:center; gap:12px; }
    .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-writing { background:rgba(14,165,233,0.15); color:var(--teal3); }
    .phase-idle { background:var(--gray100); color:var(--gray400); }
    .phase-done { background:rgba(34,197,94,0.15); color:#166534; }
    .timer-num { font-size:1.4rem; font-weight:800; color:var(--navy); min-width:60px; text-align:right; font-variant-numeric:tabular-nums; transition:color 0.3s; }
    .timer-num.urgent { color:var(--red); }
    .progress-outer { height:4px; background:var(--white); border:1px solid var(--gray200); border-top:none; border-radius:0 0 var(--radius) var(--radius); padding-bottom:4px; }
    .progress-fill { height:4px; border-radius:2px; background:var(--teal); transition:width 1s linear, background 0.3s; width:0%; }
    .progress-fill.reading { background:var(--gold); }
    .progress-fill.writing { background:var(--teal); }
    .progress-fill.urgent { background:var(--red); }

    .scenario-card { background:var(--white); border:1px solid var(--gray200); border-radius:var(--radius); overflow:hidden; }
    .scenario-top { padding:28px 32px; border-bottom:1px solid var(--gray100); }
    .scenario-label { font-size:0.72rem; font-weight:700; 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:1.05rem; color:var(--gray800); line-height:1.8; }
    .idle-hero { padding:52px 32px; text-align:center; }
    .idle-icon { font-size:3.5rem; margin-bottom:20px; opacity:0.3; }
    .idle-title { font-size:1.4rem; font-weight:700; color:var(--gray800); margin-bottom:8px; }
    .idle-sub { font-size:0.95rem; color:var(--gray400); }
    .prompts-area { padding:20px 32px; display:flex; flex-direction:column; gap:14px; }
    .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:var(--gray100); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:0.9rem; flex-shrink:0; }
    .prompt-item { background:var(--gray50); border:1px solid var(--gray200); 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:28px; height:28px; background:var(--navy); color:var(--white); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.78rem; font-weight:700; flex-shrink:0; }
    .prompt-text { font-size:0.97rem; color:var(--gray800); line-height:1.65; padding-top:3px; }

    .answer-section { border-top:1px solid var(--gray100); padding:22px 32px; 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; }
    .word-count { font-size:0.75rem; color:var(--gray400); font-weight:400; letter-spacing:0; text-transform:none; }
    .answer-textarea { width:100%; min-height:160px; padding:16px; border:1px solid var(--gray200); 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:var(--gray50); }
    .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; }
    .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; }
    .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 var(--gray200); border-radius:var(--radius); padding:16px 24px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
    .btn-ctrl { display:flex; align-items:center; gap:8px; padding:10px 20px; border-radius:50px; border:1px solid var(--gray200); background:var(--white); color:var(--gray600); font-size:0.88rem; font-weight:600; cursor:pointer; transition:all 0.2s; font-family:inherit; }
    .btn-ctrl:hover:not(:disabled) { border-color:var(--navy); color:var(--navy); background:var(--gray50); }
    .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-ctrl-skip { border-color:var(--gold); color:#92400e; }
    .btn-ctrl-skip:hover:not(:disabled) { background:rgba(245,158,11,0.08); }
    .ctrl-spacer { flex:1; }
    .kbd-hints { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
    .kbd-hint { display:flex; align-items:center; gap:6px; font-size:0.78rem; color:var(--gray400); }
    kbd { background:var(--gray100); border:1px solid var(--gray200); border-radius:5px; padding:2px 7px; font-size:0.72rem; font-family:inherit; color:var(--gray600); }

    .review-panel { background:var(--white); border:1px solid var(--gray200); border-radius:var(--radius); overflow:hidden; display:none; }
    .review-panel.show { display:block; }
    .review-header { background:var(--navy); padding:28px 32px; }
    .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 var(--gray100); }
    .review-stat { text-align:center; }
    .review-stat-num { font-size:2rem; font-weight:800; color:var(--teal); display:block; }
    .review-stat-label { font-size:0.78rem; color:var(--gray400); }
    .review-trend { padding:24px 32px; border-bottom:1px solid var(--gray100); }
    .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 var(--gray200); 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 var(--gray200); border-radius:12px; overflow:hidden; transition:box-shadow 0.2s; }
    .station-review-card:hover { box-shadow:var(--shadow); }
    .src-header { padding:14px 18px; display:flex; align-items:flex-start; gap:12px; background:var(--gray50); border-bottom:1px solid var(--gray100); cursor:pointer; user-select:none; }
    .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:var(--gray50); 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 var(--gray100); 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 var(--gray200); box-shadow:none; }
    .btn-restart-outline:hover { background:var(--gray50); 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:1024px) { .app-wrapper { grid-template-columns:1fr; } .sidebar { position:static; } }
    
    /* ── Mode Toggle ── */
    .mode-toggle-wrap { background:var(--white); border:1px solid var(--gray200); border-radius:var(--radius); padding:16px 20px; display:flex; flex-direction:column; gap:10px; }
    .mode-toggle-label { font-size:0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal3); margin-bottom:4px; }
    .mode-pill-row { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
    .mode-pill { padding:10px 6px; border-radius:10px; border:2px solid var(--gray200); background:var(--gray50); color:var(--gray600); font-size:0.85rem; font-weight:700; cursor:pointer; transition:all 0.2s; font-family:inherit; text-align:center; }
    .mode-pill:hover { border-color:var(--teal); color:var(--teal3); }
    .mode-pill.active-casper { background:var(--navy); color:var(--white); border-color:var(--navy); }
    .mode-pill.active-mmi { background:linear-gradient(135deg,#6d28d9,#7c3aed); color:var(--white); border-color:#7c3aed; }

    /* ── 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); }

    /* ── 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:var(--gray50); color:var(--gray600); cursor:default; border-color:var(--gray200); resize:none; }
    .answer-textarea.time-expired { border-color:var(--teal)!important; }
    @keyframes flashRed { 0%{border-color:var(--gray200);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 var(--gray100); 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:80px 16px 32px; }
      .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; }
      .station-num { font-size:0.7rem; }
    }
  
    /* ── 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:var(--gray200); 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 var(--gray200); border-radius:8px; font-size:0.875rem; color:var(--gray800); outline:none; transition:border-color 0.2s; font-family:inherit; }
    .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:var(--gray50); color:var(--gray600); border:1.5px solid var(--gray200); cursor:pointer; font-weight:600; font-size:0.85rem; font-family:inherit; transition:all 0.2s; }
    .btn-mcancel:hover { background:var(--gray100); }
    .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:96px 20px 64px;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:7px 16px;border-radius:50px;background:rgba(14,165,233,0.12);border:1px solid rgba(14,165,233,0.3);color:#38bdf8;font-size:0.75rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:20px;font-family:'DM Sans',system-ui,sans-serif;}
    .practice-hero-title{font-family:'DM Serif Display',Georgia,serif;font-size:clamp(1.9rem,5vw,3rem);line-height:1.1;color:#fff;margin:0 0 18px;font-weight:400;letter-spacing:-0.5px;}
    .practice-hero-accent{color:#38bdf8;}
    .practice-hero-sub{color:rgba(255,255,255,0.72);font-size:clamp(0.95rem,1.4vw,1.05rem);line-height:1.65;max-width:640px;margin:0 auto 28px;font-family:'DM Sans',system-ui,sans-serif;}
    .practice-hero-stats{display:flex;justify-content:center;gap:36px;margin:0 auto 32px;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:clamp(1.5rem,3vw,2rem);color:#38bdf8;font-weight:400;line-height:1;}
    .practice-hero-stat-label{font-size:0.75rem;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:1rem;padding:15px 32px;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:84px 18px 48px;}
      .practice-hero-stats{gap:24px;}
    }