:root{--sf-bg:#0D0D0F;--sf-fg:#E8E6E1;--sf-glass:22,22,25;--sf-glass-border:200,149,108;--sf-dot:rgba(200,149,108,.035);--sf-surface-1:rgba(255,255,255,.07);--sf-surface-2:rgba(255,255,255,.09);--sf-border-soft:rgba(255,255,255,.12);--sf-border-strong:rgba(255,255,255,.19);--sf-focus-ring:rgba(232,184,138,.65);--sf-status-recording:#D4736E;--sf-chart-primary:#C8956C;--sf-chart-axis:rgba(255,255,255,.14);--sf-chart-accent:#7EC9A0;--sf-confetti-1:#C8956C;--sf-confetti-2:#5BB882;--sf-confetti-3:#E8B88A;--sf-confetti-4:#E89590;--sf-confetti-5:#E8E6E1;--sf-wd-ok:#7EC9A0;--sf-wd-miss:#E89590;--sf-wd-miss-underline:#D4736E;--sf-accent-sage:#A8E0C0;--sf-accent-copper:#E8B88A;--sf-accent-coral:#E89590;--fs-xs:clamp(.65rem,1.2vw,.75rem);--fs-sm:clamp(.75rem,1.4vw,.875rem);--fs-base:clamp(.875rem,1.6vw,1rem);--fs-lg:clamp(1.1rem,2.2vw,1.5rem);--fs-xl:clamp(1.25rem,3vw,2rem);--fs-2xl:clamp(1.5rem,4vw,2.5rem);--fs-hero:clamp(3.5rem,10vw,8rem);--space-sm:clamp(8px,1vw,14px);--space-md:clamp(12px,1.5vw,20px);--space-lg:clamp(16px,2vw,28px);--space-xl:clamp(20px,2.5vw,40px)}
        html[data-theme='light']{--sf-bg:#F7F5EF;--sf-fg:#1C1B1A;--sf-glass:255,255,255;--sf-glass-border:200,149,108;--sf-dot:rgba(153,121,94,.08);--sf-surface-1:rgba(0,0,0,.04);--sf-surface-2:rgba(0,0,0,.06);--sf-border-soft:rgba(0,0,0,.12);--sf-border-strong:rgba(0,0,0,.18);--sf-focus-ring:rgba(168,122,85,.55);--sf-status-recording:#C85555;--sf-chart-primary:#A87A55;--sf-chart-axis:rgba(0,0,0,.16);--sf-chart-accent:#449966;--sf-confetti-1:#A87A55;--sf-confetti-2:#449966;--sf-confetti-3:#C8956C;--sf-confetti-4:#D4736E;--sf-confetti-5:#6E6D69;--sf-wd-ok:#449966;--sf-wd-miss:#A85555;--sf-wd-miss-underline:#C85555;--sf-accent-sage:#2f7f55;--sf-accent-copper:#8f5f3f;--sf-accent-coral:#a54848}
        *,*::before,*::after{box-sizing:border-box}
        body{font-family:'DM Sans',sans-serif;background:var(--sf-bg);color:var(--sf-fg);overflow-x:hidden;font-size:var(--fs-base)}
        h1,h2,h3,h4,h5,h6{font-family:'Space Grotesk',sans-serif}
        button,input,select,textarea{font-family:'DM Sans',sans-serif}
        button,input,select,textarea{transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease}
        button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--sf-focus-ring);outline-offset:2px}
        .bg-blob{position:fixed;border-radius:50%;pointer-events:none;filter:blur(130px);opacity:.12;z-index:0}
        .blob-1{width:650px;height:650px;background:#C8956C;top:-250px;right:-200px;animation:bf 22s ease-in-out infinite}
        .blob-2{width:550px;height:550px;background:#5BB882;bottom:-220px;left:-200px;animation:bf 22s ease-in-out infinite reverse;animation-delay:-8s}
        .blob-3{width:300px;height:300px;background:#C8956C;top:50%;left:35%;animation:bf 18s ease-in-out infinite;animation-delay:-14s;opacity:.05}
        @keyframes bf{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(35px,-25px) scale(1.06)}66%{transform:translate(-25px,20px) scale(.94)}}
        .dot-grid{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(var(--sf-dot) 1px,transparent 1px);background-size:32px 32px}
        .screen{display:none;opacity:0;transition:opacity .4s ease;position:relative;z-index:1;padding-top:clamp(56px,6vw,80px);padding-left:clamp(12px,2vw,32px);padding-right:clamp(12px,2vw,32px);overflow-x:hidden}
        .screen.active{display:flex;opacity:1}
        #login-screen.active{display:block}
        #setup-screen{align-items:flex-start;padding-top:clamp(56px,6vw,80px)}
        .glass{background:rgba(var(--sf-glass),.82);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(var(--sf-glass-border),.18)}
        .gradient-text{background:linear-gradient(135deg,#E8B88A 0%,#C8956C 40%,#5BB882 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
        .mode-card{cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}
        .mode-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .3s ease;background:linear-gradient(135deg,rgba(200,149,108,.08),rgba(91,184,130,.05))}
        .mode-card:hover::before,.mode-card.selected::before{opacity:1}
        .mode-card.selected{border-color:rgba(200,149,108,.4)!important}
        .mode-card .ck{position:absolute;top:12px;right:12px;width:24px;height:24px;border-radius:50%;background:#C8956C;display:flex;align-items:center;justify-content:center;transform:scale(0);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
        .mode-card.selected .ck{transform:scale(1)}
        .role-pill{cursor:pointer;transition:all .25s ease;padding:clamp(6px,.8vw,8px) clamp(12px,1.5vw,20px);border-radius:999px;border:1px solid rgba(200,149,108,.15);background:rgba(22,22,25,.6);font-size:var(--fs-sm);font-weight:500;color:#C8C6C1}
        .role-pill:hover{border-color:rgba(200,149,108,.35);color:#E8E6E1}
        .role-pill.selected{background:linear-gradient(135deg,rgba(200,149,108,.2),rgba(200,149,108,.08));border-color:#C8956C;color:#E8B88A}
        .hint-pill{cursor:pointer;transition:all .25s ease;padding:4px 12px;border-radius:8px;border:1px solid rgba(200,149,108,.12);background:rgba(22,22,25,.5);font-size:11px;font-weight:600;color:#8A8885;letter-spacing:.3px}
        .hint-pill:hover{border-color:rgba(200,149,108,.3);color:#C8C6C1}
        .hint-pill.active{background:rgba(200,149,108,.15);border-color:#C8956C;color:#E8B88A}
        .bubble{max-width:80%;padding:clamp(10px,1.4vw,20px);border-radius:16px;position:relative;transition:all .3s ease}
        .bubble-other{background:rgba(91,184,130,.1);border:1px solid rgba(91,184,130,.25);border-left:3px solid #5BB882;align-self:flex-start;border-bottom-left-radius:4px}
        .bubble-user{background:rgba(200,149,108,.15);border:1px solid rgba(200,149,108,.28);border-right:3px solid #C8956C;align-self:flex-end;border-bottom-right-radius:4px}
        .bubble-current{box-shadow:0 0 24px rgba(200,149,108,.1);transform:scale(1.02)}
        .bubble-past{opacity:.5}
        .bubble-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
        .bubble-other .bubble-label{color:#7EC9A0}
        .bubble-user .bubble-label{color:#E8B88A}
        .replay-btn{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:rgba(91,184,130,.15);border:none;color:#7EC9A0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:11px;opacity:0;transition:opacity .2s ease}
        .bubble:hover .replay-btn,.bubble-current .replay-btn{opacity:1}
        .mic-btn{width:clamp(44px,5vw,56px);height:clamp(44px,5vw,56px);border-radius:50%;border:2px solid rgba(200,149,108,.3);background:rgba(200,149,108,.08);color:#E8B88A;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:clamp(16px,2vw,20px);transition:all .3s ease;position:relative;flex-shrink:0}
        .mic-btn:hover{background:rgba(200,149,108,.15);border-color:#C8956C}
        .mic-btn.recording{border-color:var(--sf-status-recording);color:var(--sf-status-recording);background:color-mix(in srgb,var(--sf-status-recording) 16%,transparent)}
        .mic-btn.recording::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid color-mix(in srgb,var(--sf-status-recording) 45%,transparent);animation:mp 1.5s ease-out infinite}
        .mic-btn-lg{width:clamp(60px,7vw,80px);height:clamp(60px,7vw,80px);font-size:clamp(22px,3vw,28px);border-width:3px}
        .mic-btn-lg.recording::after{inset:-10px}
        @keyframes mp{0%{transform:scale(1);opacity:1}100%{transform:scale(1.6);opacity:0}}
        .progress-track{height:3px;background:rgba(255,255,255,.13);overflow:hidden}
        .progress-fill{height:100%;background:linear-gradient(90deg,#C8956C,#5BB882);transition:width .5s cubic-bezier(.4,0,.2,1)}
        .eval-in{animation:ei .5s cubic-bezier(.4,0,.2,1) forwards}
        @keyframes ei{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
        .score-ring-bg{stroke:rgba(255,255,255,.13)}
        .score-ring-fill{transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1)}
        .toast{padding:12px 20px;border-radius:12px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:10px;max-width:420px;animation:ti .4s cubic-bezier(.34,1.56,.64,1);box-shadow:0 8px 32px rgba(0,0,0,.5)}
        .toast-success{background:rgba(91,184,130,.15);border:1px solid rgba(91,184,130,.3);color:#A8E0C0}
        .toast-error{background:rgba(212,115,110,.15);border:1px solid rgba(212,115,110,.3);color:#E89590}
        .toast-info{background:rgba(200,149,108,.15);border:1px solid rgba(200,149,108,.3);color:#E8B88A}
        @keyframes ti{from{transform:translateX(100px);opacity:0}to{transform:translateX(0);opacity:1}}
        @keyframes to2{from{transform:translateX(0);opacity:1}to{transform:translateX(100px);opacity:0}}
        .request-submitted-toast{position:fixed;top:20px;right:20px;z-index:10000;max-width:calc(100vw - 40px);padding:14px 20px;border-radius:12px;background:#1f6f45;color:#fff;font-size:14px;font-weight:700;box-shadow:0 12px 32px rgba(0,0,0,.28);opacity:0;transform:translateY(-10px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
        .request-submitted-toast.show{opacity:1;transform:translateY(0)}
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f0f0f0;
        }
        ::-webkit-scrollbar-thumb {
            background: #aaaaaa;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #888888;
        }
        .line-dot{width:8px;height:8px;border-radius:50%;transition:all .3s ease;background:rgba(255,255,255,.2)}
        .line-dot.done{background:#5BB882}.line-dot.current{background:#C8956C;transform:scale(1.4);box-shadow:0 0 8px rgba(200,149,108,.5)}
        .line-dot.low{background:var(--sf-status-recording)}
        .typing-dot{width:6px;height:6px;border-radius:50%;background:var(--sf-chart-primary);animation:tb 1.4s ease-in-out infinite}
        .typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}
        @keyframes tb{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-8px)}}
        .input-glow:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--sf-chart-primary) 26%,transparent);border-color:color-mix(in srgb,var(--sf-chart-primary) 50%,transparent)!important}
        .spinner{width:20px;height:20px;border:2px solid color-mix(in srgb,var(--sf-chart-primary) 22%,transparent);border-top-color:var(--sf-chart-primary);border-radius:50%;animation:sp .8s linear infinite}
        @keyframes sp{to{transform:rotate(360deg)}}
        .report-card{transition:all .3s ease}.report-card:hover{border-color:rgba(200,149,108,.2)}
        .report-card.low{border-color:rgba(212,115,110,.3)!important;background:rgba(212,115,110,.03)}
        .collapse-content{max-height:0;overflow:hidden;transition:max-height .4s ease}.collapse-content.open{max-height:800px}
        @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
        @media(max-width:640px){.bubble{max-width:92%}.egrid{grid-template-columns:1fr!important}.hdr-stats{grid-template-columns:repeat(2,1fr)!important}.pres-eval-grid{grid-template-columns:1fr!important}.hint-hdr-group{display:none!important}.setup-tab-btn i{margin-right:4px!important}.assist-panel{right:12px;bottom:72px;width:calc(100vw - 24px);height:68vh;max-height:520px}.pres-btn-row{flex-direction:column;gap:10px}.hint-reveal-btn{width:100%;justify-content:center}.mode-layout textarea{min-height:220px}}
        @media(max-width:420px){header .text-4xl{font-size:2rem;line-height:1.1}.setup-nav{gap:4px;padding:4px}.setup-tab-btn span{display:none}.setup-tab-btn{display:flex;justify-content:center;align-items:center}.setup-tab-btn i{margin-right:0!important}}
        select option{background:#161619;color:#E8E6E1}
        @media print{.no-print{display:none!important}body{background:#fff;color:#111}}
        .clone-wave{display:flex;align-items:end;gap:2px;height:24px}
        .clone-wave span{width:3px;background:#C8956C;border-radius:2px;animation:cw 1s ease-in-out infinite}
        .clone-wave span:nth-child(1){animation-delay:0s}.clone-wave span:nth-child(2){animation-delay:.1s}.clone-wave span:nth-child(3){animation-delay:.2s}.clone-wave span:nth-child(4){animation-delay:.3s}.clone-wave span:nth-child(5){animation-delay:.4s}
        @keyframes cw{0%,100%{height:6px}50%{height:22px}}
        .check-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:8px;font-size:12px;font-weight:600}
        .check-yes{background:rgba(91,184,130,.12);color:#7EC9A0}
        .check-no{background:rgba(212,115,110,.12);color:#E89590}
        .hint-reveal{animation:hr .35s cubic-bezier(.4,0,.2,1) forwards}
        @keyframes hr{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

        /* ── HIDDEN LINE: properly blurred, not selectable ── */
        .line-hidden{
            filter:blur(10px);
            user-select:none;
            -webkit-user-select:none;
            pointer-events:none;
            opacity:.35;
            transition:filter .4s ease, opacity .4s ease;
        }
        .line-revealed{
            filter:none;
            opacity:1;
            transition:filter .4s ease, opacity .4s ease;
        }

        .vol-bar-track{width:100%;height:6px;background:rgba(255,255,255,.13);border-radius:3px;overflow:hidden}
        .vol-bar-fill{height:100%;border-radius:3px;transition:width 60ms linear;background:linear-gradient(90deg,#C8956C,#D4736E)}
        .silence-countdown{font-variant-numeric:tabular-nums;font-weight:700}

        /* Two-button row in presentation HIDDEN state */
        .pres-btn-row{display:flex;align-items:center;justify-content:center;gap:16px;width:100%}
        .hint-reveal-btn{
            display:flex;align-items:center;gap:8px;
            padding:clamp(10px,1.2vw,12px) clamp(16px,2vw,24px);border-radius:14px;
            background:rgba(200,149,108,.1);
            border:1.5px solid rgba(200,149,108,.25);
            color:#E8B88A;font-family:'Space Grotesk',sans-serif;
            font-size:var(--fs-sm);font-weight:600;cursor:pointer;
            transition:all .25s ease;
            white-space:nowrap;
        }
        .hint-reveal-btn:hover{background:rgba(200,149,108,.18);border-color:#C8956C}

        /* Help modal */
        .help-overlay{position:fixed;inset:0;z-index:250;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:16px}
        .help-overlay.open{display:flex}
        .help-modal{background:#161619;border:1px solid rgba(200,149,108,.12);border-radius:20px;max-width:520px;width:100%;max-height:85vh;overflow-y:auto;padding:clamp(18px,2.5vw,28px);box-shadow:0 24px 64px rgba(0,0,0,.5)}
        .help-modal h2{font-size:20px;font-weight:700;color:#E8E6E1;margin-bottom:16px}
        .help-modal h3{font-size:13px;font-weight:700;color:#E8B88A;text-transform:uppercase;letter-spacing:.5px;margin:16px 0 8px}
        .help-modal p,.help-modal li{font-size:14px;color:#C8C6C1;line-height:1.6}
        .help-modal ul{list-style:none;padding:0;margin:0}
        .help-modal li{padding:4px 0 4px 20px;position:relative}
        .help-modal li::before{content:'';position:absolute;left:0;top:12px;width:6px;height:6px;border-radius:50%;background:#C8956C}
        .help-modal .close-help{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.05);border:none;color:#8A8885;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .2s ease}
        .help-modal .close-help:hover{background:rgba(255,255,255,.1);color:#E8E6E1}

        /* Word diff in report */
        .wd-ok{color:var(--sf-wd-ok)}
        .wd-miss{color:var(--sf-wd-miss);text-decoration:underline wavy var(--sf-wd-miss-underline);text-underline-offset:3px}
        .wd-section{background:rgba(255,255,255,.07);border-radius:8px;padding:8px 12px;border:1px solid rgba(255,255,255,.12)}
        .wd-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#8A8885;margin-bottom:4px}
        .wd-words{font-size:13px;line-height:1.8;word-wrap:break-word}
        .wd-pct{font-size:11px;font-weight:700;margin-left:6px}

        /* Setup tabs */
        .setup-nav{display:flex;align-items:center;gap:4px;min-width:0}
        .setup-tab-btn{padding:clamp(6px,.8vw,8px) clamp(8px,1.2vw,16px);border-radius:10px;border:0;background:transparent;color:#C8C6C1;font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:all .2s ease;font-family:'Space Grotesk',sans-serif;white-space:nowrap}
        .setup-tab-btn.hidden{display:none!important}
        .setup-tab-btn i{margin-right:6px}
        .setup-tab-btn:hover{color:#E8E6E1;background:rgba(255,255,255,.08)}
        .setup-tab-btn.active{color:#E8B88A;background:rgba(200,149,108,.15);border:1px solid rgba(200,149,108,.35)}
        .setup-panel{display:none}
        .setup-panel.active{display:block}
        .mini-card{background:var(--sf-surface-1);border:1px solid var(--sf-border-soft);border-radius:12px;padding:clamp(12px,1.8vw,24px)}
        .mode-layout{display:grid;grid-template-columns:1.05fr 1.4fr;gap:18px;align-items:start}
        @media(max-width:900px){.mode-layout{grid-template-columns:1fr}}

        /* Assistant widget */
        .assist-fab{position:fixed;right:clamp(12px,2vw,18px);bottom:clamp(12px,2vw,18px);z-index:9999;width:clamp(48px,5vw,56px);height:clamp(48px,5vw,56px);border-radius:16px;border:1px solid rgba(200,149,108,.25);background:linear-gradient(135deg,rgba(200,149,108,.3),rgba(91,184,130,.25));color:#E8E6E1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 12px 32px rgba(0,0,0,.35)}
        .assist-fab.hidden{display:none!important}
        .assist-panel{position:fixed;z-index:9999;bottom:clamp(70px,8vw,86px);right:clamp(12px,2vw,18px);width:min(clamp(300px,35vw,380px),calc(100vw - 24px));max-height:calc(100vh - 120px);overflow:hidden;display:flex;flex-direction:column;background:rgba(18,18,21,.96);border:1px solid rgba(200,149,108,.18);border-radius:18px;box-shadow:0 24px 52px rgba(0,0,0,.45)}
        .assist-panel.hidden{display:none!important}
        .assist-panel:not(.open){display:none}
        .assist-panel.open{display:flex}
        .assist-msgs{flex:1;overflow-y:auto;min-height:0;padding:14px;display:flex;flex-direction:column;gap:10px}
        .assist-bubble{max-width:86%;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.45}
        .assist-user{align-self:flex-end;background:rgba(200,149,108,.2);border:1px solid rgba(200,149,108,.28);color:#F0CFA8}
        .assist-bot{align-self:flex-start;background:var(--sf-surface-2);border:1px solid var(--sf-border-soft);color:#D5D3CF}
        .assist-meta{padding:10px 14px;border-top:1px solid rgba(255,255,255,.06);display:flex;gap:8px;background:rgba(0,0,0,.2)}
        .assist-input{flex:1;background:var(--sf-surface-2);border:1px solid var(--sf-border-strong);border-radius:10px;padding:10px 12px;color:#E8E6E1;font-size:13px;outline:none}
        .assist-send{width:42px;height:42px;border-radius:10px;border:1px solid rgba(200,149,108,.25);background:rgba(200,149,108,.14);color:#E8B88A;cursor:pointer}

        .auth-card{border:1px solid rgba(200,149,108,.16)}
        .google-btn:disabled{opacity:.6;cursor:not-allowed}
        .auth-user-wrap{max-width:100%}
        .auth-user-chip{max-width:min(78vw,360px)}
        .auth-user-chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .onboarding-overlay{position:fixed;inset:0;z-index:130;background:rgba(3,3,5,.72);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:16px}
        .onboarding-overlay.open{display:flex}
        .onboarding-modal{width:min(520px,100%);background:rgba(18,18,21,.98);border:1px solid rgba(200,149,108,.2);border-radius:20px;padding:clamp(18px,2.5vw,28px);box-shadow:0 28px 60px rgba(0,0,0,.45)}
        .onboarding-modal{pointer-events:auto}
        .onboarding-modal button{pointer-events:auto;cursor:pointer}
        #onboarding-prev-btn:disabled{opacity:.45;cursor:not-allowed}
        #onboarding-prev-btn:disabled:hover{background:rgba(255,255,255,.05)}
        .onboarding-dots{display:flex;gap:6px;align-items:center;margin-top:12px}
        .onboarding-dot{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.18);transition:all .25s ease}
        .onboarding-dot.active{width:20px;background:rgba(200,149,108,.9)}

        .lb-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;background:var(--sf-surface-1);border:1px solid var(--sf-border-soft)}
        .lb-rank{font-size:11px;font-weight:700;color:#E8B88A;min-width:28px}
        .lb-name{font-size:12px;color:#E8E6E1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .lb-meta{font-size:10px;color:#8A8885}
        .lb-score{font-size:12px;font-weight:700;color:#7EC9A0}

        /* ── DARK MODE: boost faint Tailwind utility surfaces & borders ── */
        .bg-white\/2,.bg-white\/3{background:rgba(255,255,255,.07)!important}
        .bg-white\/5{background:rgba(255,255,255,.09)!important}
        .border-white\/5{border-color:rgba(255,255,255,.1)!important}
        .border-white\/6{border-color:rgba(255,255,255,.11)!important}
        .border-white\/8{border-color:rgba(255,255,255,.15)!important}
        .border-white\/10{border-color:rgba(255,255,255,.17)!important}
        .border-white\/12{border-color:rgba(255,255,255,.19)!important}

        /* Dark mode only: make all Start modes clearly visible */
        html:not([data-theme='light']) #start-btn{
            color:#ffffff!important;
            border:2px solid #ffffff!important;
            background:linear-gradient(135deg,rgba(28,28,33,.95),rgba(12,12,16,.95))!important;
            box-shadow:0 0 0 1px rgba(255,255,255,.15),0 10px 22px rgba(0,0,0,.35);
        }
        html:not([data-theme='light']) #start-btn:hover{
            background:linear-gradient(135deg,rgba(40,40,47,.96),rgba(18,18,24,.96))!important;
            border-color:#ffffff!important;
        }
        html:not([data-theme='light']) #start-btn:disabled{
            color:#ffffff!important;
            border-color:rgba(255,255,255,.82)!important;
            opacity:.5!important;
        }

        /* ── LIGHT MODE ── */
        html[data-theme='light'] body{color:#1C1B1A}
        html[data-theme='light'] .glass{background:rgba(255,255,255,.88);border-color:rgba(0,0,0,.1)}
        html[data-theme='light'] .mini-card{background:rgba(255,255,255,.78);border-color:rgba(0,0,0,.1)}

        /* sf color scale is fixed in Tailwind config; invert for light mode */
        html[data-theme='light'] .text-sf-50{color:#1C1B1A!important}
        html[data-theme='light'] .text-sf-100{color:#2E2C2A!important}
        html[data-theme='light'] .text-sf-200{color:#4A4845!important}

        /* Tailwind surface/border utility overrides for light mode */
        html[data-theme='light'] .bg-white\/2,html[data-theme='light'] .bg-white\/3{background:rgba(0,0,0,.04)!important}
        html[data-theme='light'] .bg-white\/5{background:rgba(0,0,0,.05)!important}
        html[data-theme='light'] .border-white\/5,html[data-theme='light'] .border-white\/6{border-color:rgba(0,0,0,.1)!important}
        html[data-theme='light'] .border-white\/8{border-color:rgba(0,0,0,.13)!important}
        html[data-theme='light'] .border-white\/10{border-color:rgba(0,0,0,.14)!important}
        html[data-theme='light'] .border-white\/12{border-color:rgba(0,0,0,.15)!important}

        /* Inputs */
        html[data-theme='light'] .input-glow{background:#fff;border-color:rgba(0,0,0,.18)!important;color:#1C1B1A}
        html[data-theme='light'] .input-glow::placeholder{color:#9A9895}
        html[data-theme='light'] .input-glow:focus{border-color:rgba(200,149,108,.55)!important;box-shadow:0 0 0 2px rgba(200,149,108,.2)}
        html[data-theme='light'] select option{background:#fff;color:#1C1B1A}

        /* Start / action buttons (amber gradient) */
        html[data-theme='light'] .from-amber-500{border:1.5px solid rgba(170,110,50,.4)!important;box-shadow:0 2px 10px rgba(200,149,108,.3)}
        html[data-theme='light'] #start-btn:disabled{opacity:.45!important}

        /* Setup navigation */
        html[data-theme='light'] .setup-nav{background:transparent;border:0}
        html[data-theme='light'] .setup-tab-btn{color:#4D4A45}
        html[data-theme='light'] .setup-tab-btn:hover{background:rgba(0,0,0,.05);color:#1C1B1A}
        html[data-theme='light'] .setup-tab-btn.active{color:#7C4F31;background:rgba(200,149,108,.18);border-color:rgba(200,149,108,.35)}

        /* Role & hint pills */
        html[data-theme='light'] .role-pill{background:rgba(255,255,255,.9);border-color:rgba(0,0,0,.14);color:#3D3C3A}
        html[data-theme='light'] .role-pill:hover{border-color:rgba(200,149,108,.5);color:#1C1B1A}
        html[data-theme='light'] .role-pill.selected{background:rgba(200,149,108,.15);border-color:#C8956C;color:#7C4F31}
        html[data-theme='light'] .hint-pill{background:rgba(255,255,255,.9);border-color:rgba(0,0,0,.14);color:#5A5855}
        html[data-theme='light'] .hint-pill:hover{border-color:rgba(200,149,108,.45);color:#1C1B1A}
        html[data-theme='light'] .hint-pill.active{background:rgba(200,149,108,.18);border-color:#C8956C;color:#7C4F31}
        html[data-theme='light'] .hint-reveal-btn{background:rgba(200,149,108,.15);border-color:rgba(200,149,108,.45);color:#7C4F31}
        html[data-theme='light'] .hint-reveal-btn:hover{background:rgba(200,149,108,.25);border-color:#C8956C}
        html[data-theme='light'] .mic-btn.recording{background:rgba(200,85,85,.1);border-color:var(--sf-status-recording);color:var(--sf-status-recording)}

        /* Dialogue bubbles */
        html[data-theme='light'] .bubble-other{background:rgba(225,243,233,.9);border-color:rgba(91,184,130,.22);border-left-color:#5BB882}
        html[data-theme='light'] .bubble-user{background:rgba(255,245,232,.9);border-color:rgba(200,149,108,.28);border-right-color:#C8956C}
        html[data-theme='light'] .bubble-other .bubble-label{color:#449966}
        html[data-theme='light'] .bubble-user .bubble-label{color:#A87A55}

        /* Progress tracks & indicators */
        html[data-theme='light'] .progress-track{background:rgba(0,0,0,.12)}
        html[data-theme='light'] .line-dot{background:rgba(0,0,0,.2)}
        html[data-theme='light'] .score-ring-bg{stroke:rgba(0,0,0,.12)}
        html[data-theme='light'] .vol-bar-track{background:rgba(0,0,0,.12)}

        /* Word diff boxes */
        html[data-theme='light'] .wd-section{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.08)}
        html[data-theme='light'] .wd-ok{color:var(--sf-wd-ok)}
        html[data-theme='light'] .wd-miss{color:var(--sf-wd-miss);text-decoration-color:var(--sf-wd-miss-underline)}

        /* Practice line picker */
        .practice-line-item{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border-radius:12px;border:1px solid var(--sf-border-soft);background:var(--sf-surface-1);cursor:pointer;transition:background .15s,border-color .15s;margin-bottom:7px}
        .practice-line-item:hover{background:var(--sf-surface-2);border-color:var(--sf-border-strong)}
        .pli-num{font-size:10px;font-weight:700;min-width:22px;text-align:center;background:var(--sf-surface-2);border-radius:6px;padding:2px 5px;color:#8A8885;flex-shrink:0;margin-top:2px}
        .pli-text{font-size:14px;color:#E8E6E1;flex:1;line-height:1.5}
        .pli-score{font-size:11px;font-weight:700;padding:2px 8px;border-radius:9999px;flex-shrink:0;margin-top:1px}
        html[data-theme='light'] .practice-line-item{background:rgba(255,255,255,.78);border-color:rgba(0,0,0,.1)}
        html[data-theme='light'] .practice-line-item:hover{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.18)}
        html[data-theme='light'] .pli-num{background:rgba(0,0,0,.07);color:#666}
        html[data-theme='light'] .pli-text{color:#1a1a1a}

        /* Leaderboard rows */
        html[data-theme='light'] .lb-row{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.09)}

        /* Report cards */
        html[data-theme='light'] .report-card{border-color:rgba(0,0,0,.1)}
        html[data-theme='light'] .report-card:hover{border-color:rgba(200,149,108,.35)}

        /* Mode cards */
        html[data-theme='light'] .mode-card{background:rgba(255,255,255,.65)}

        /* Help & onboarding modals */
        html[data-theme='light'] .help-modal{background:#fff;border-color:rgba(0,0,0,.1)}
        html[data-theme='light'] .help-modal h2{color:#1C1B1A}
        html[data-theme='light'] .help-modal h3{color:#7C4F31}
        html[data-theme='light'] .help-modal p,html[data-theme='light'] .help-modal li{color:#4A4845}
        html[data-theme='light'] .help-modal .close-help{background:rgba(0,0,0,.05);color:#6A6865}
        html[data-theme='light'] .help-modal .close-help:hover{background:rgba(0,0,0,.1);color:#1C1B1A}
        html[data-theme='light'] .onboarding-modal{background:rgba(255,255,255,.98);border-color:rgba(200,149,108,.25)}

        /* Assistant widget */
        html[data-theme='light'] .assist-panel{background:rgba(255,255,255,.98);border-color:rgba(185,143,109,.25)}
        html[data-theme='light'] .assist-bot{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.09);color:#3D3C3A}
        html[data-theme='light'] .assist-user{background:rgba(200,149,108,.12);border-color:rgba(200,149,108,.25)}
        html[data-theme='light'] .assist-input{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.14);color:#1C1B1A}
        html[data-theme='light'] .assist-input::placeholder{color:#9A9895}

        /* Shared action controls */
        .action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:clamp(8px,1vw,10px) clamp(10px,1.2vw,14px);border-radius:10px;border:1px solid var(--sf-border-strong);background:var(--sf-surface-1);color:var(--sf-fg);font-size:var(--fs-xs);font-weight:700;line-height:1;cursor:pointer}
        .action-btn:hover{transform:translateY(-1px);background:var(--sf-surface-2)}
        .action-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
        .action-btn--sage{background:color-mix(in srgb,var(--sf-accent-sage) 18%,transparent);border-color:color-mix(in srgb,var(--sf-accent-sage) 40%,transparent);color:var(--sf-accent-sage)}
        .action-btn--sage:hover{background:color-mix(in srgb,var(--sf-accent-sage) 26%,transparent)}
        .action-btn--copper{background:color-mix(in srgb,var(--sf-accent-copper) 18%,transparent);border-color:color-mix(in srgb,var(--sf-accent-copper) 40%,transparent);color:var(--sf-accent-copper)}
        .action-btn--copper:hover{background:color-mix(in srgb,var(--sf-accent-copper) 26%,transparent)}
        .action-btn--coral{background:color-mix(in srgb,var(--sf-accent-coral) 18%,transparent);border-color:color-mix(in srgb,var(--sf-accent-coral) 40%,transparent);color:var(--sf-accent-coral)}
        .action-btn--coral:hover{background:color-mix(in srgb,var(--sf-accent-coral) 26%,transparent)}
        html:not([data-theme='light']) #onboarding-next-btn{background:rgba(255,255,255,0.1)!important;border:1px solid rgba(255,255,255,0.2)!important;color:#E8B88A!important;}
        html:not([data-theme='light']) #onboarding-prev-btn{background:rgba(255,255,255,0.07)!important;border:1px solid rgba(255,255,255,0.15)!important;color:#C8C6C1!important;}
        /* ── Profile Onboarding Screen ─────────────────────────────────────── */
        #onboarding-screen{background:var(--sf-bg)}
        .onboarding-card{background:var(--sf-surface-2);border:1px solid var(--sf-border-soft);border-radius:1.5rem;padding:2rem}
        .onboarding-role-card{display:block;padding:1rem 1.25rem;border-radius:1rem;border:1.5px solid var(--sf-border-soft);background:var(--sf-surface-1);color:var(--sf-fg);cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
        .onboarding-role-card:hover{background:var(--sf-surface-2);border-color:var(--sf-border-strong)}
        .onboarding-role-card.selected{border-color:var(--sf-accent-copper);background:color-mix(in srgb,var(--sf-accent-copper) 10%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--sf-accent-copper) 40%,transparent)}
        .ob-role-icon{width:2.75rem;height:2.75rem;border-radius:.875rem;background:color-mix(in srgb,var(--sf-accent-copper) 12%,transparent);border:1px solid color-mix(in srgb,var(--sf-accent-copper) 25%,transparent);display:flex;align-items:center;justify-content:center;color:var(--sf-accent-copper);flex-shrink:0}
        .ob-progress-bar{height:4px;background:var(--sf-border-soft);border-radius:9999px;overflow:hidden}
        .ob-progress-fill{height:100%;background:var(--sf-accent-copper);border-radius:9999px;transition:width .35s ease}
        .ob-error{font-size:.8rem;color:var(--sf-accent-coral)}
        #onboarding-screen .text-sf-50{color:var(--sf-fg)}
        #onboarding-screen .input-glow{background:var(--sf-surface-1);color:var(--sf-fg);border-color:var(--sf-border-soft)}
        #ob-back-btn{background:var(--sf-surface-1);border:1px solid var(--sf-border-soft);color:var(--sf-fg)}
        #ob-back-btn:hover{background:var(--sf-surface-2);border-color:var(--sf-border-strong)}

        /* Fixed app navbar and signed-out landing */
        .app-navbar{position:fixed;top:0;left:0;right:0;z-index:200;height:clamp(56px,6vw,72px);padding:0 clamp(10px,2vw,18px);display:flex;align-items:center;gap:16px;background:rgba(13,13,15,.94);border-bottom:1px solid rgba(255,255,255,.2);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
        .navbar-brand{display:inline-flex;align-items:center;gap:10px;border:1px solid transparent;background:transparent;color:#E8E6E1;font-family:'Space Grotesk',sans-serif;font-size:clamp(16px,2.5vw,22px);font-weight:800;cursor:pointer;padding:6px;border-radius:12px;flex-shrink:0}
        .navbar-logo{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,#C8956C,#5BB882);color:#0D0D0F;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(200,149,108,.2);flex-shrink:0}
        .navbar-tabs{flex:1;justify-content:center;overflow-x:auto;scrollbar-width:none}
        .navbar-tabs::-webkit-scrollbar{display:none}
        .navbar-actions,.navbar-auth-chip{display:flex;align-items:center;gap:10px;min-width:0}
        .navbar-actions{margin-left:auto;flex-shrink:0}
        .navbar-signin-btn,.navbar-signout-btn{padding:10px 20px;border-radius:12px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.12);color:#E8E6E1;font-size:14px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
        .navbar-auth-chip{max-width:min(62vw,400px);padding:5px 6px 5px 9px;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(255,255,255,.1);color:#E8E6E1;font-size:14px;font-weight:700}
        .navbar-auth-chip>span{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .navbar-user-photo{width:28px;height:28px;border-radius:50%;object-fit:cover}
        #login-screen{overflow:visible}
        #landing-inquire {
            width: 100vw;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }
        #app-footer {
            display: block !important;
            position: relative;
            z-index: 3;
            width: 100%;
            margin: 0;
            flex-shrink: 0;
        }
        @media(max-width:1023px){
            .classroom-inquiry-copy{padding-top:28px;padding-left:0!important;border-top:1px solid #ddd;border-left:0!important}
        }
        @media(max-width:640px){
            .classroom-feature-list{grid-template-columns:1fr!important}
        }
        .landing-shell{width:min(1080px,100%);margin:auto;padding:220px 16px 64px;text-align:center}
        .landing-hero{max-width:720px;margin:0 auto}
        .landing-title{font-size:var(--fs-hero);line-height:.95;font-weight:700;letter-spacing:-.07em;animation:landing-fade .8s ease both}
        .landing-tagline{margin-top:22px;color:#E8E6E1;font-family:'Space Grotesk',sans-serif;font-size:clamp(1rem,2.5vw,1.7rem);font-weight:600}
        .landing-copy{max-width:620px;margin:12px auto 0;color:#A8A6A1;font-size:15px;line-height:1.7}
        .landing-features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:42px auto 0}
        .landing-feature-card{min-height:170px;padding:24px 20px;border-radius:18px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#E8E6E1;text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:10px;cursor:pointer;animation:landing-rise .65s ease both}
        .landing-feature-card:nth-child(2){animation-delay:.1s}.landing-feature-card:nth-child(3){animation-delay:.2s}
        .landing-feature-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.14);border-color:rgba(200,149,108,.45)}
        .landing-feature-card i{font-size:22px;color:#E8B88A}.landing-feature-card strong{font-family:'Space Grotesk',sans-serif;font-size:17px}.landing-feature-card span{color:#A8A6A1;font-size:13px;line-height:1.5}
        .landing-cta{margin-top:32px;display:flex;flex-direction:column;align-items:center;gap:12px}
        .landing-primary-btn,.modal-primary-btn{min-height:46px;padding:11px 24px;border-radius:12px;border:1px solid rgba(240,207,168,.5);background:linear-gradient(135deg,#C8956C,#A87A55);color:#0D0D0F;font-weight:800;cursor:pointer}
        .landing-signin-link{border:0;background:transparent;color:#E8E6E1;text-decoration:underline;text-underline-offset:4px;font-weight:700;cursor:pointer}
        @keyframes landing-fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
        @keyframes landing-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

        /* Shared auth and trial modals */
        .app-modal-overlay{position:fixed;inset:0;z-index:260;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.68);backdrop-filter:blur(8px)}
        .app-modal-overlay.open{display:flex}
        .app-modal{position:relative;width:min(460px,100%);padding:clamp(18px,2.5vw,28px);border-radius:20px;background:rgba(18,18,21,.98);border:1px solid rgba(255,255,255,.22);box-shadow:0 28px 72px rgba(0,0,0,.55)}
        .modal-close-btn{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#E8E6E1;cursor:pointer}
        .modal-primary-btn,.modal-secondary-btn{width:100%}
        .modal-secondary-btn{min-height:46px;padding:11px 24px;border-radius:12px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.12);color:#E8E6E1;font-weight:800;cursor:pointer}
        .trial-warning-icon{width:62px;height:62px;margin:0 auto;border-radius:18px;display:flex;align-items:center;justify-content:center;background:rgba(232,149,144,.16);border:1px solid rgba(232,149,144,.35);color:#E89590;font-size:25px}

        /* CONTRAST ENFORCEMENT */
        html:not([data-theme='light']) .glass{background:rgba(18,18,21,.94);border-color:rgba(255,255,255,.24)}
        html:not([data-theme='light']) button:not(:disabled):not(.setup-tab-btn){--min-border:rgba(255,255,255,0.2);color:#E8E6E1}
        html:not([data-theme='light']) button:not(:disabled):not(.navbar-brand):not(.landing-signin-link):not(.setup-tab-btn){border-width:1px;border-style:solid;border-color:var(--min-border)}
        html:not([data-theme='light']) button:not(:disabled):not(.setup-tab-btn):hover{border-color:rgba(255,255,255,.38)}
        html:not([data-theme='light']) .mini-card{background:rgba(255,255,255,.11)!important;border-color:rgba(255,255,255,.25)!important;box-shadow:0 8px 24px rgba(0,0,0,.18)}
        html:not([data-theme='light']) .action-btn{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.3)!important;color:#F2F0EC!important}
        html:not([data-theme='light']) .action-btn:hover{background:rgba(255,255,255,.18)!important;border-color:rgba(255,255,255,.42)!important}
        html:not([data-theme='light']) .action-btn--copper{background:rgba(200,149,108,.24)!important;border-color:rgba(232,184,138,.58)!important;color:#FFD4AA!important}
        html:not([data-theme='light']) .action-btn--sage{background:rgba(91,184,130,.2)!important;border-color:rgba(126,201,160,.5)!important;color:#B9F0D0!important}
        html:not([data-theme='light']) .action-btn--coral{background:rgba(212,115,110,.2)!important;border-color:rgba(232,149,144,.5)!important;color:#FFC0BC!important}
        html:not([data-theme='light']) .bg-white\/2,html:not([data-theme='light']) .bg-white\/3,html:not([data-theme='light']) .bg-white\/5{background:rgba(255,255,255,.12)!important}
        html:not([data-theme='light']) .border-white\/5,html:not([data-theme='light']) .border-white\/6,html:not([data-theme='light']) .border-white\/8{border-color:rgba(255,255,255,.25)!important}
        html:not([data-theme='light']) .text-sf-200{color:#D8D5D0!important}
        html:not([data-theme='light']) .text-sf-300{color:#B8B5AF!important}
        html:not([data-theme='light']) input,html:not([data-theme='light']) select,html:not([data-theme='light']) textarea{background:rgba(255,255,255,.1)!important;border-color:rgba(255,255,255,.32)!important;color:#F2F0EC!important}
        html:not([data-theme='light']) input::placeholder,html:not([data-theme='light']) textarea::placeholder{color:#AAA7A1!important}
        html:not([data-theme='light']) .help-modal,html:not([data-theme='light']) .onboarding-modal,html:not([data-theme='light']) .app-modal{background:#17171B;border-color:rgba(255,255,255,.3);box-shadow:0 28px 72px rgba(0,0,0,.65)}
        [role='dialog']{z-index:250!important}
        html:not([data-theme='light']) [role='dialog']>.glass{background:#17171B;border-color:rgba(255,255,255,.3)}
        html:not([data-theme='light']) .classroom-overflow-menu button[aria-label],html:not([data-theme='light']) button[aria-label*="options"]{background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.2)!important}
        html:not([data-theme='light']) button[aria-label^="Back"],html:not([data-theme='light']) #back-btn{background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.25)!important;color:#E8E6E1!important}
        html:not([data-theme='light']) .hint-pill:not(.active),html:not([data-theme='light']) .role-pill:not(.selected){border-color:rgba(200,149,108,.3)!important}
        html:not([data-theme='light']) audio{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:10px}

        html[data-theme='light'] body,html[data-theme='light'] button:not(.setup-tab-btn),html[data-theme='light'] .text-sf-300{color:#2E2C2A!important}
        html[data-theme='light'] .text-sf-200{color:#2E2C2A!important}
        html[data-theme='light'] button:not(:disabled):not(.setup-tab-btn){background-color:rgba(0,0,0,.07);border-color:rgba(0,0,0,.22)!important}
        html[data-theme='light'] button:not(:disabled):not(.setup-tab-btn):hover{background-color:rgba(0,0,0,.11);border-color:rgba(0,0,0,.32)!important}
        html[data-theme='light'] .action-btn{background:#F4F1EC!important;border-color:rgba(0,0,0,.24)!important;color:#2E2C2A!important}
        html[data-theme='light'] .action-btn--copper{background:#F7E8DA!important;border-color:#A87A55!important;color:#70472D!important}
        html[data-theme='light'] .action-btn--sage{background:#E5F5EB!important;border-color:#449966!important;color:#23683E!important}
        html[data-theme='light'] .action-btn--coral{background:#FBE8E7!important;border-color:#A85555!important;color:#823F3F!important}
        html[data-theme='light'] .glass{background:rgba(255,255,255,.94);border-color:rgba(0,0,0,.18)!important}
        html[data-theme='light'] .mini-card{background:#FFF;border-color:rgba(0,0,0,.2)!important;box-shadow:0 8px 22px rgba(70,55,40,.08)}
        html[data-theme='light'] .border-white\/5,html[data-theme='light'] .border-white\/6,html[data-theme='light'] .border-white\/8,html[data-theme='light'] .border-white\/10,html[data-theme='light'] .border-white\/12{border-color:rgba(0,0,0,.15)!important}
        html[data-theme='light'] .app-navbar{background:rgba(247,245,239,.96);border-color:rgba(0,0,0,.15)}
        html[data-theme='light'] .navbar-brand,html[data-theme='light'] .navbar-signin-btn,html[data-theme='light'] .navbar-signout-btn,html[data-theme='light'] .navbar-auth-chip{color:#2E2C2A}
        html[data-theme='light'] .app-modal,html[data-theme='light'] .help-modal,html[data-theme='light'] .onboarding-modal{background:#FFF;border-color:rgba(0,0,0,.22)}
        html[data-theme='light'] .landing-tagline,html[data-theme='light'] .landing-feature-card{color:#2E2C2A}
        html[data-theme='light'] .landing-copy,html[data-theme='light'] .landing-feature-card span{color:#4A4845}
        html[data-theme='light'] .landing-feature-card{background:#FFF;border-color:rgba(0,0,0,.2)}
        html[data-theme='light'] input,html[data-theme='light'] select,html[data-theme='light'] textarea{background:#FFF!important;border-color:rgba(0,0,0,.24)!important;color:#1C1B1A!important}

        /* Student grade summary */
        .student-grade-summary{display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(135deg,rgba(200,149,108,.2),rgba(91,184,130,.13))!important;border-color:rgba(232,184,138,.48)!important}
        .student-overall-grade{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.5rem,6vw,4.5rem);line-height:1;font-weight:800;color:#F2C397}
        .student-letter-grade,.student-grade-received,.student-grade-pending{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;font-family:'Space Grotesk',sans-serif;font-weight:800}
        .student-letter-grade{min-width:48px;padding:8px 12px;background:rgba(91,184,130,.2);border:1px solid rgba(126,201,160,.5);color:#B9F0D0;font-size:1.25rem}
        .student-grade-received,.student-grade-pending{min-width:92px;padding:10px 14px;font-size:1rem}
        .student-grade-received{background:rgba(91,184,130,.2);border:1px solid rgba(126,201,160,.5);color:#B9F0D0}
        .student-grade-pending{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#C8C6C1}
        html[data-theme='light'] .student-grade-summary{background:linear-gradient(135deg,#FFF4E8,#EAF8F0)!important;border-color:rgba(124,79,49,.35)!important}
        html[data-theme='light'] .student-overall-grade{color:#7C4F31}
        html[data-theme='light'] .student-letter-grade,html[data-theme='light'] .student-grade-received{background:#E5F5EB;border-color:#449966;color:#23683E}
        html[data-theme='light'] .student-grade-pending{background:#F1EFEB;border-color:rgba(0,0,0,.2);color:#4A4845}
        @media(max-width:768px){
            .app-navbar{gap:8px}
            .navbar-brand{gap:7px}
            .navbar-tabs{justify-content:flex-start}
            .setup-tab-btn{flex:0 0 auto}
            .setup-tab-btn i{margin-right:0!important}
            .setup-tab-btn span{display:none}
            .navbar-signin-btn,.navbar-signout-btn{width:40px;height:40px;padding:0;justify-content:center}
            .navbar-signin-btn span,.navbar-signout-btn span,.navbar-auth-chip>span{display:none}
            .navbar-auth-chip{padding:4px;gap:4px}
            .landing-features{grid-template-columns:1fr}
            .landing-feature-card{min-height:130px}
            .landing-shell{padding-top:32px}
        }

        /* Full-size workspace layouts */
        #setup-screen>div{width:100%;max-width:none}
        #setup-screen .setup-main-card{width:100%;max-width:calc(100vw - 32px);min-height:calc(100vh - 96px);margin:0 auto 16px;border-radius:20px}
        #setup-screen .setup-panel{padding:24px}
        #setup-screen .setup-panel h2{font-size:1.5rem;line-height:2rem}
        #setup-screen .setup-panel h3{font-size:1.25rem;line-height:1.75rem}
        #setup-screen .setup-panel .text-sm{font-size:1rem;line-height:1.5rem}
        #setup-screen .setup-panel button{min-height:48px;font-size:14px}
        #setup-screen .mini-card{padding:clamp(12px,1.8vw,24px);border-radius:16px}
        #setup-screen .mini-card{margin-bottom:16px}
        #setup-screen .setup-panel>.mini-card{margin-top:1.5rem}
        #setup-screen .setup-panel .grid{gap:max(20px,1.25rem)}
        #setup-screen .lb-row{padding:14px 16px;gap:14px}
        #setup-screen .lb-name,#setup-screen .lb-score{font-size:14px}
        #setup-screen .lb-meta{font-size:12px}

        /* Settings sizing */
        #panel-settings .mini-card{padding:0}
        #panel-settings .mini-card>button{padding:24px}
        #panel-settings .collapse-content>div{padding:24px}
        #panel-settings label{font-size:1rem!important;line-height:1.5rem}
        #panel-settings .input-glow{padding-top:1rem!important;padding-bottom:1rem!important;font-size:1rem}

        /* Class workspace sizing, including dynamically rendered cards */
        #class-screen>header,#class-screen>main{padding:24px 32px}
        #class-screen>header>div{width:100%;max-width:1200px;margin:0 auto}
        #class-page-content{width:100%;max-width:1200px;margin:0 auto;font-size:1.0625rem;line-height:1.65}
        #class-screen header .text-sm{font-size:1rem;line-height:1.5rem}
        #class-screen header .text-base{font-size:1.125rem;line-height:1.75rem}
        #class-page-title{font-size:2rem;line-height:2.5rem}
        #class-page-content .mini-card{padding:clamp(12px,1.8vw,24px);border-radius:16px;margin-bottom:16px}
        #class-page-content .text-xs{font-size:.875rem;line-height:1.25rem}
        #class-page-content .text-sm{font-size:1rem;line-height:1.5rem}
        #class-page-content .text-base{font-size:1.125rem;line-height:1.75rem}
        #class-page-content .text-xl{font-size:1.5rem;line-height:2rem}
        #class-page-content .text-2xl{font-size:1.875rem;line-height:2.25rem}
        #class-page-content button{min-height:48px;font-size:14px}
        #class-page-content .p-4,#class-page-content .p-5{padding:1.5rem}
        #class-page-content .gap-4{gap:1.5rem}
        #class-page-content .space-y-4>:not([hidden])~:not([hidden]){margin-top:1.5rem}

        /* Assignment workspace sizing */
        #assignment-screen>header,#assignment-screen>main{padding:24px 32px}
        #assignment-screen>header>div{width:100%;max-width:900px;margin:0 auto}
        #assignment-preview{width:100%;max-width:900px;margin:0 auto;padding:0}
        #assignment-session-mount,#assignment-result{width:100%;max-width:900px;margin-left:auto;margin-right:auto}
        #assignment-script-readonly{max-height:none;overflow:visible}
        #assignment-role-pills .role-pill{padding:clamp(6px,.8vw,8px) clamp(12px,1.5vw,20px);font-size:var(--fs-sm)}
        #assignment-screen header .text-sm{font-size:1rem;line-height:1.5rem}
        #assignment-page-title{font-size:1.875rem;line-height:2.25rem}
        #assignment-screen .mini-card{padding:clamp(12px,1.8vw,24px);border-radius:16px;margin-bottom:16px}
        #assignment-screen .text-sm{font-size:1rem;line-height:1.5rem}
        #assignment-screen .text-base{font-size:1.125rem;line-height:1.75rem}
        #assignment-screen button{min-height:48px;font-size:14px}
        #assignment-screen .p-4,#assignment-screen .p-5{padding:1.5rem}
        #assignment-screen .gap-4{gap:1.5rem}

        /* Session workspace sizing */
        #session-screen .bubble{padding:clamp(10px,1.4vw,20px)}
        #session-screen .bubble .text-sm{font-size:1rem;line-height:1.6}
        #session-screen #dialogue-context{padding:clamp(12px,1.8vw,24px)}
        #session-screen #interaction-area{padding:clamp(14px,2vw,20px) clamp(16px,2.5vw,24px);min-height:clamp(130px,15vw,160px);border-radius:16px;margin-bottom:16px}
        #assignment-screen .bubble{padding:clamp(10px,1.4vw,20px)}
        #assignment-screen .bubble .text-sm{font-size:1rem;line-height:1.6}

        /* Report, modal, and overflow guardrails */
        #class-screen>header,#assignment-screen>header,#session-screen>header,#complete-screen>header{border-radius:20px;margin-bottom:16px}
        #complete-screen>header,#complete-screen>main{padding:24px}
        #complete-screen>header>div,#complete-screen .report-content{width:100%;max-width:960px;margin-left:auto;margin-right:auto}
        .app-modal,.help-modal,.onboarding-modal,[role='dialog']>.glass{border-radius:20px;padding:clamp(18px,2.5vw,28px);max-width:calc(100vw - 32px)}
        .screen img,.screen video,.screen canvas,.screen pre{max-width:100%}
        .screen pre{overflow-wrap:anywhere}
        .screen .glass,.screen .mini-card,.screen button,.screen input,.screen select,.screen textarea{min-width:0}

        @media(max-width:767px){
            #class-screen>header,#class-screen>main,#assignment-screen>header,#assignment-screen>main,#complete-screen>header,#complete-screen>main{padding:16px}
            #setup-screen .setup-panel{padding:24px}
        }

/* Flowing animated gradient background */
.flow-bg {
    position: relative;
    overflow: hidden;
}
.flow-bg::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(200,149,108,0.18) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 20%, rgba(91,184,130,0.15) 0%, transparent 55%),
                radial-gradient(ellipse at 60% 80%, rgba(212,115,110,0.12) 0%, transparent 50%),
                #0e0f11;
    background-size: 200% 200%;
    animation: flow-gradient 12s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes flow-gradient {
    0%   { background-position: 0% 50%; filter: hue-rotate(0deg); }
    33%  { background-position: 50% 0%; filter: hue-rotate(8deg); }
    66%  { background-position: 100% 50%; filter: hue-rotate(-8deg); }
    100% { background-position: 50% 100%; filter: hue-rotate(0deg); }
}
.flow-bg > * {
    position: relative;
    z-index: 1;
}

/* Glassy cards on flow-bg screens */
.flow-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 20px;
    transition: background 0.3s ease, transform 0.2s ease;
}
.flow-card:hover {
    background: rgba(255,255,255,0.07);
    transform: translateY(-2px);
}

/* Animated CTA button */
.flow-btn {
    background: linear-gradient(135deg, #C8956C, #E8B88A, #5BB882);
    background-size: 200% 200%;
    animation: flow-btn-shift 4s ease infinite;
    border: none;
    color: #0e0f11;
    font-weight: 700;
    border-radius: 14px;
    transition: brightness 0.2s ease, transform 0.15s ease;
}
.flow-btn:hover {
    brightness: 1.1;
    transform: scale(1.02);
}
@keyframes flow-btn-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Final dark/light contrast safeguards */
:root {
    --min-text-contrast: #e0e0e0;
}

html:not([data-theme='light']) .action-btn {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    color: #e0e0e0 !important;
}
html:not([data-theme='light']) .action-btn:hover {
    background: rgba(255,255,255,0.14) !important;
    color: #ffffff !important;
}
html:not([data-theme='light']) .setup-tab-btn {
    color: #b0b0b0;
}
html:not([data-theme='light']) .setup-tab-btn.active {
    color: #ffffff;
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.2);
}

html[data-theme='light'] {
    --sf-50: #0a0a0a;
    --sf-100: #1a1a1a;
    --sf-200: #2a2a2a;
    --sf-300: #444444;
    --sf-400: #666666;
    --sf-800: #f0f0f0;
    --sf-900: #ffffff;
}
html[data-theme='light'] body {
    background: #f5f5f5;
    color: #0a0a0a !important;
}
html[data-theme='light'] .mini-card {
    background: #ffffff;
    border: 1.5px solid #d0d0d0 !important;
    color: #0a0a0a;
}
html[data-theme='light'] .flow-card {
    background: rgba(255,255,255,0.85);
    border: 1.5px solid #d0d0d0;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
html[data-theme='light'] .app-navbar {
    background: rgba(255,255,255,0.92);
    border-bottom: 1.5px solid #d0d0d0;
}
html[data-theme='light'] .setup-tab-btn {
    color: #444444;
    border-color: #d0d0d0;
}
html[data-theme='light'] .setup-tab-btn.active {
    background: #0a0a0a;
    color: #ffffff;
    border-color: #0a0a0a;
}
html[data-theme='light'] .role-pill {
    background: #f0f0f0;
    border: 1.5px solid #cccccc;
    color: #1a1a1a;
}
html[data-theme='light'] .role-pill.selected {
    background: #C8956C;
    border-color: #C8956C;
    color: #ffffff;
}
html[data-theme='light'] .bubble {
    background: #ffffff;
    border: 1.5px solid #d0d0d0;
    color: #0a0a0a;
}
html[data-theme='light'] .bubble-user {
    background: #C8956C22;
    border-color: #C8956C55;
}
html[data-theme='light'] input,
html[data-theme='light'] textarea,
html[data-theme='light'] select {
    background: #ffffff !important;
    border: 1.5px solid #cccccc !important;
    color: #0a0a0a !important;
}
html[data-theme='light'] input::placeholder,
html[data-theme='light'] textarea::placeholder {
    color: #888888 !important;
}
html[data-theme='light'] .action-btn {
    background: #f0f0f0 !important;
    border: 1.5px solid #cccccc !important;
    color: #1a1a1a !important;
}
html[data-theme='light'] .action-btn:hover {
    background: #e0e0e0 !important;
}
html[data-theme='light'] .toast {
    background: #1a1a1a;
    color: #ffffff;
}

.home-hero-title {
    font-size: clamp(2.8rem, 7vw, 5rem);
    animation: hero-breathe 4s ease-in-out infinite;
    background: linear-gradient(135deg, #f0e6d3, #C8956C, #5BB882);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.home-hero-sub {
    font-size: clamp(0.95rem, 2vw, 1.2rem);
    animation: hero-breathe 4s ease-in-out infinite 0.5s;
}

.home-stat-num {
    font-size: clamp(2rem, 5vw, 3.5rem);
    animation: stat-glow 3s ease-in-out infinite;
}

.home-logo-pulse {
    animation: logo-pulse 3s ease-in-out infinite;
}

@keyframes hero-breathe {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%       { opacity: 1;    transform: scale(1.03); }
}

@keyframes stat-glow {
    0%, 100% { filter: drop-shadow(0 0 6px currentColor); transform: scale(1); }
    50%       { filter: drop-shadow(0 0 18px currentColor); transform: scale(1.06); }
}

@keyframes logo-pulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 20px rgba(200,149,108,0.3); }
    50%       { transform: scale(1.06); box-shadow: 0 0 40px rgba(200,149,108,0.6); }
}

html[data-theme='light'] .flow-bg::before {
    background: radial-gradient(ellipse at 20% 50%, rgba(200,149,108,0.25) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 20%, rgba(91,184,130,0.2) 0%, transparent 55%),
                radial-gradient(ellipse at 60% 80%, rgba(212,115,110,0.15) 0%, transparent 50%),
                #f7f3ef;
}

html[data-theme='light'] #login-screen {
    color: #1a1a1a;
}

html[data-theme='light'] #login-screen .landing-tagline,
html[data-theme='light'] #login-screen p {
    color: #444444;
}

html[data-theme='light'] #login-screen .flow-card {
    background: rgba(255,255,255,0.7);
    border: 1.5px solid rgba(200,149,108,0.2);
    color: #1a1a1a;
}

html[data-theme='light'] #login-screen .flow-card strong {
    color: #1a1a1a;
}

html[data-theme='light'] #login-screen .flow-card span {
    color: #555555;
}