: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,.09);--sf-surface-2:rgba(255,255,255,.12);--sf-border-soft:rgba(255,255,255,.16);--sf-border-strong:rgba(255,255,255,.24);--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}
        html[data-theme='light'] .bg-white\/3{background:rgba(0,0,0,.05)!important}
        html[data-theme='light'] .bg-white\/5{background:rgba(0,0,0,.07)!important}
        html[data-theme='light'] .bg-white\/6{background:rgba(0,0,0,.07)!important}
        html[data-theme='light'] .bg-white\/8{background:rgba(0,0,0,.08)!important}
        html[data-theme='light'] .bg-white\/10{background:rgba(0,0,0,.09)!important}
        html[data-theme='light'] .bg-white\/12{background:rgba(0,0,0,.1)!important}
        html[data-theme='light'] .border-white\/8{border-color:rgba(0,0,0,.14)!important}
        html[data-theme='light'] .border-white\/10{border-color:rgba(0,0,0,.16)!important}
        html[data-theme='light'] .border-white\/12{border-color:rgba(0,0,0,.18)!important}
        html[data-theme='light'] .hover\:bg-white\/10:hover{background:rgba(0,0,0,.09)!important}
        html[data-theme='light'] .hover\:bg-white\/5:hover{background:rgba(0,0,0,.07)!important}
        html[data-theme='light'] .text-sf-300{color:#5A5855!important}
        html[data-theme='light'] .text-sf-200{color:#3A3835!important}
        html[data-theme='light'] .bg-sf-800\/60{background:rgba(255,255,255,.85)!important;border-color:rgba(0,0,0,.15)!important}
        html[data-theme='light'] .placeholder-sf-300::placeholder{color:#8A8885!important}
        html[data-theme='light'] .provider-btn{background:rgba(0,0,0,.04)!important;border-color:rgba(0,0,0,.15)!important;color:#3A3835!important}
        html[data-theme='light'] .provider-btn:hover{background:rgba(0,0,0,.08)!important}
        html[data-theme='light'] select option{background:#F7F5EF;color:#1C1B1A}
        *,*::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}
        .turn-skip-btn{min-height:40px;padding:8px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#C8C6C1;font-size:15px;font-weight:700;line-height:1;cursor:pointer;transition:all .2s ease}
        .turn-skip-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#E8E6E1}
        @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-container{top:calc(clamp(56px,6vw,72px) + 14px)!important;z-index:1000!important}
        .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}
        .auth-loading-dots{display:inline-flex;align-items:center;gap:3px;margin-left:3px;vertical-align:middle}
        .auth-loading-dots span{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.35;animation:auth-dot 1s ease-in-out infinite}
        .auth-loading-dots span:nth-child(2){animation-delay:.15s}
        .auth-loading-dots span:nth-child(3){animation-delay:.3s}
        @keyframes auth-dot{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
        @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:grid;grid-template-columns:minmax(190px,1fr) auto minmax(190px,1fr);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{grid-column:1;justify-self:start;display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#E8E6E1;font-family:'Space Grotesk',sans-serif;font-size:clamp(16px,2.5vw,22px);font-weight:800;cursor:pointer;padding:5px 10px 5px 5px;border-radius:13px;flex-shrink:0}
        .navbar-logo{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(200,149,108,.2);flex-shrink:0;overflow:hidden}
        .practice-nest-theme-logo{width:100%;height:100%;display:block;object-fit:cover}
        .practice-nest-theme-logo-light{display:none}
        html[data-theme='light'] .practice-nest-theme-logo-dark{display:none}
        html[data-theme='light'] .practice-nest-theme-logo-light{display:block}
        .navbar-tabs{grid-column:2;justify-self:center;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{grid-column:3;justify-self:end;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}
        .mobile-nav-back,.mobile-menu-btn,.mobile-nav-menu{display:none}
        #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:1000px;margin:0 auto;user-select:none;-webkit-user-select:none}
        .landing-title{font-size:var(--fs-hero);line-height:.95;font-weight:700;letter-spacing:-.07em;animation:landing-fade .8s ease both}
        .landing-brand-title{display:inline-flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,22px);max-width:100%;padding-inline:.08em;box-sizing:border-box}
        .landing-title-logo{width:clamp(72px,12vw,126px);height:clamp(72px,12vw,126px);border-radius:clamp(16px,2.5vw,28px);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden;box-shadow:0 18px 45px rgba(200,149,108,.22)}
        .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}
        #trial-wall-modal{background:rgba(0,0,0,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
        #trial-wall-modal .app-modal{width:min(560px,calc(100vw - 32px));padding:46px 36px 34px;border-radius:22px;background:#FFFFFF!important;border:1px solid rgba(0,0,0,.12)!important;box-shadow:0 36px 90px rgba(0,0,0,.42);color:#1C1B1A}
        #trial-wall-modal .modal-close-btn{top:18px;right:18px;width:40px;height:40px;border-radius:12px;background:#F0F0F0;border:1px solid #C8C8C8;color:#2A2927;font-size:17px}
        #trial-wall-modal .trial-warning-icon{width:76px;height:76px;border-radius:22px;background:rgba(232,149,144,.14);border:1px solid rgba(232,149,144,.34);color:#E89590;font-size:28px}
        #trial-wall-modal #trial-wall-title{margin-top:22px;color:#1C1B1A!important;font-size:30px;line-height:1.1}
        #trial-wall-modal #trial-wall-copy{max-width:410px;margin:16px auto 0;color:#3F3D39!important;font-size:17px;line-height:1.55}
        #trial-wall-modal .grid{gap:14px;margin-top:34px}
        #trial-wall-modal .modal-primary-btn,#trial-wall-modal .modal-secondary-btn{min-height:58px;border-radius:14px;font-size:17px;font-family:'Space Grotesk',sans-serif;box-shadow:none}

        /* Signed-out settings prompt */
        .settings-auth-card{width:min(560px,100%);margin:clamp(40px,8vh,96px) auto;padding:clamp(30px,4vw,44px) clamp(22px,4vw,36px);border-radius:22px;border:1px solid rgba(255,255,255,.18);background:rgba(23,23,27,.96);box-shadow:0 28px 70px rgba(0,0,0,.36)}
        .settings-auth-icon{width:76px;height:76px;margin:0 auto;border-radius:22px;display:flex;align-items:center;justify-content:center;background:rgba(200,149,108,.15);border:1px solid rgba(232,184,138,.32);color:#E8B88A;font-size:28px}
        .settings-auth-title{margin-top:24px;color:#E8E6E1;font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,3vw,32px);font-weight:800;line-height:1.15}
        .settings-auth-copy{max-width:420px;margin:14px auto 0;color:#D8D5D0;font-size:17px;line-height:1.55}
        .settings-auth-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:430px;margin:32px auto 0}
        .settings-auth-actions .modal-primary-btn,.settings-auth-actions .modal-secondary-btn{min-height:58px;border-radius:14px;font-family:'Space Grotesk',sans-serif;font-size:17px;box-shadow:none}
        #trial-wall-modal .modal-primary-btn{background:#C8956C;border:1px solid #A97854;color:#1C1B1A}
        #trial-wall-modal .modal-secondary-btn{background:#F2F2F2;border:1px solid #CFCFCF;color:#2A2927}
        #trial-wall-modal .modal-primary-btn:hover{filter:brightness(1.04)}
        #trial-wall-modal .modal-secondary-btn:hover{background:#E8E8E8}
        .delete-zone-card{max-width:860px;margin:0 auto;padding:24px;border-radius:18px;border:1px solid rgba(232,137,128,.34);background:linear-gradient(135deg,rgba(212,115,110,.13),rgba(255,255,255,.04));display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px);gap:24px;align-items:center;box-shadow:0 18px 48px rgba(0,0,0,.22)}
        .delete-zone-copy{display:flex;align-items:flex-start;gap:18px;text-align:left}
        .delete-danger-icon{width:62px;height:62px;border-radius:18px;background:rgba(212,115,110,.14);border:1px solid rgba(232,137,128,.36);color:#E89590;display:flex;align-items:center;justify-content:center;font-size:24px;flex:0 0 auto}
        .delete-zone-warning{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:8px 12px;border-radius:999px;background:rgba(212,115,110,.12);border:1px solid rgba(232,137,128,.26);color:#F1A29B;font-size:13px;font-weight:800}
        .delete-zone-action{display:flex;flex-direction:column;gap:10px}
        .delete-zone-action p{margin:0;color:#A8A6A1;font-size:12px;line-height:1.5;text-align:center}
        .delete-open-btn,.delete-confirm-btn{width:100%;min-height:58px;padding:14px 22px;border-radius:14px;border:1px solid rgba(232,137,128,.54);background:linear-gradient(135deg,#D4736E,#9F3E39);color:#FFF5F2;font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;box-shadow:0 14px 30px rgba(159,62,57,.28);transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
        .delete-open-btn:hover,.delete-confirm-btn:not(:disabled):hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 18px 38px rgba(159,62,57,.34)}
        .delete-account-modal{width:min(540px,calc(100vw - 32px))}
        .delete-account-modal .delete-danger-icon{margin-bottom:16px}
        .delete-warning-list{display:grid;gap:10px;margin-top:18px;padding:14px;border-radius:16px;background:rgba(212,115,110,.09);border:1px solid rgba(232,137,128,.24)}
        .delete-warning-list div{display:flex;gap:10px;align-items:flex-start;color:#D8D5D0;font-size:13px;line-height:1.45}
        .delete-warning-list i{color:#E89590;margin-top:2px;flex:0 0 auto}
        .delete-confirm-btn:disabled{background:rgba(212,115,110,.18);border-color:rgba(232,137,128,.25);box-shadow:none;color:#F1A29B}

        /* 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'] .navbar-brand{background:rgba(255,255,255,.72)!important;border-color:rgba(0,0,0,.18)!important;box-shadow:0 8px 22px rgba(60,50,40,.08)}
        html[data-theme='light'] .mobile-nav-back,html[data-theme='light'] .mobile-menu-btn{background:#FFFFFF!important;border-color:rgba(0,0,0,.18)!important;color:#2E2C2A!important;box-shadow:0 8px 22px rgba(60,50,40,.08)}
        html[data-theme='light'] .mobile-nav-menu{background:#FFFDF9;border-color:rgba(0,0,0,.14);box-shadow:0 18px 48px rgba(70,55,40,.18)}
        html[data-theme='light'] .mobile-nav-menu button{background:transparent!important;border-color:transparent!important;color:#2E2C2A!important}
        html[data-theme='light'] .mobile-nav-menu button i{color:#A87A55}
        html[data-theme='light'] .mobile-nav-menu button:hover,html[data-theme='light'] .mobile-nav-menu button.active{background:rgba(200,149,108,.16)!important;border-color:rgba(168,122,85,.24)!important;color:#1C1B1A!important}
        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}
        .mobile-home-features,.mobile-home-tagline,.mobile-home-copy{display:none}

        @media(max-width:768px){
            :root{
                --practice-nest-mobile-header-height:calc(62px + env(safe-area-inset-top));
                --practice-nest-mobile-header-back-height:calc(108px + env(safe-area-inset-top));
            }
            .app-navbar{height:var(--practice-nest-mobile-header-height);padding:env(safe-area-inset-top) 10px 8px;display:grid;grid-template-columns:minmax(0,1fr) 44px;grid-template-rows:44px;align-items:center;gap:8px}
            .app-navbar.has-mobile-back{height:var(--practice-nest-mobile-header-back-height);grid-template-rows:44px 40px;align-content:center;row-gap:6px}
            .mobile-nav-back,.mobile-menu-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:13px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.09);color:#E8E6E1;font-size:17px;cursor:pointer;box-shadow:none}
            .mobile-nav-back.is-hidden,.mobile-menu-btn.is-hidden{display:none!important}
            .mobile-nav-back{grid-column:1;grid-row:2;justify-self:start}
            .mobile-menu-btn{grid-column:2;grid-row:1;justify-self:end}
            .navbar-brand{grid-column:1;grid-row:1;justify-self:start;gap:7px;max-width:100%;min-width:0;padding:4px 9px 4px 4px;border-radius:13px;font-size:17px}
            .navbar-brand .navbar-logo{width:34px;height:34px;border-radius:10px}
            .navbar-brand>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
            .navbar-tabs,.navbar-actions,#navbar-ai-status{display:none!important}
            .setup-tab-btn{flex:0 0 auto}
            .setup-tab-btn i{margin-right:0!important}
            .setup-tab-btn span{display:none}
            .mobile-nav-menu{position:fixed;top:calc(var(--practice-nest-mobile-header-height) + 6px);left:10px;right:10px;z-index:205;padding:8px;border-radius:18px;border:1px solid rgba(255,255,255,.18);background:rgba(18,18,21,.98);box-shadow:0 18px 52px rgba(0,0,0,.38);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
            .app-navbar.has-mobile-back .mobile-nav-menu{top:calc(var(--practice-nest-mobile-header-back-height) + 6px)}
            .mobile-nav-menu.open{display:grid;gap:5px}
            .mobile-nav-menu button{min-height:48px;padding:0 14px;border-radius:13px;border:1px solid transparent;background:transparent;color:#E8E6E1;font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:800;display:flex;align-items:center;gap:12px;cursor:pointer;text-align:left}
            .mobile-nav-menu button i{width:18px;text-align:center;color:#E8B88A}
            .mobile-nav-menu button:hover,.mobile-nav-menu button.active{background:rgba(200,149,108,.16);border-color:rgba(232,184,138,.28);color:#F2F0EC}
            .mobile-nav-menu button.hidden{display:none!important}
            .mobile-menu-auth{margin-top:5px;border-top-color:rgba(255,255,255,.12)!important}
            body.mobile-back-visible #setup-screen{padding-top:var(--practice-nest-mobile-header-back-height)}
            body:not(.mobile-back-visible) #setup-screen{padding-top:var(--practice-nest-mobile-header-height)}
            #toast-container{top:calc(var(--practice-nest-mobile-header-height) + 10px)!important;left:12px!important;right:12px!important}
            body.mobile-back-visible #toast-container{top:calc(var(--practice-nest-mobile-header-back-height) + 10px)!important}
            #panel-home .home-hero-block{padding:30px 8px 8px}
            #panel-home .home-hero-sub{display:none}
            #panel-home .mobile-home-tagline,#panel-home .mobile-home-copy{display:block}
            #panel-home .mobile-home-tagline{margin-top:18px}
            #panel-home .home-stat-row{display:none!important}
            #panel-home .mobile-home-features{display:grid;grid-template-columns:1fr;width:min(100%,410px);margin:20px auto 0}
            #panel-home .mobile-home-features .landing-feature-card{min-height:130px}
            #home-classroom-access-card{margin-top:24px!important;padding:22px 18px!important;border-radius:18px!important}
            #home-classroom-access-card>.grid{gap:18px!important}
            #home-classroom-access-card .classroom-benefits-panel{display:none!important}
            .classroom-inquiry-copy{padding-top:18px!important}
            .classroom-inquiry-copy button{max-width:none!important}
            .landing-features{grid-template-columns:1fr}
            .landing-feature-card{min-height:130px}
            .landing-shell{padding-top:32px}
            .settings-auth-actions{grid-template-columns:1fr}
            .delete-zone-card{grid-template-columns:1fr;padding:20px}
            .delete-zone-copy{flex-direction:column;align-items:center;text-align:center}
            .delete-zone-warning{border-radius:14px}
        }

        /* 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}
        }

        @media(max-width:768px){
            body[data-screen='session'],
            body[data-screen='assignment']{
                overflow:hidden;
            }

            body[data-screen='session'] #session-screen,
            body[data-screen='assignment'] #assignment-screen{
                height:calc(var(--practice-nest-visual-vh,100dvh) - var(--practice-nest-mobile-header-back-height));
                min-height:0;
                padding:0;
                margin-top:var(--practice-nest-mobile-header-back-height);
                overflow:hidden;
            }

            body[data-screen='session'] #session-screen>header{
                display:none;
            }

            body[data-screen='assignment'] #assignment-screen:has(#assignment-session-mount.flex)>header{
                display:none;
            }

            body[data-screen='assignment'] #assignment-screen:has(#assignment-session-mount.flex)>main{
                padding:0!important;
                min-height:0;
            }

            #session-progress-track{
                height:4px;
                flex:0 0 auto;
            }

            #dialogue-context{
                flex:1 1 auto;
                min-height:0;
                padding:14px 14px 12px!important;
                gap:12px;
                overflow-y:auto;
                overscroll-behavior:contain;
                -webkit-overflow-scrolling:touch;
            }

            #session-screen .bubble,
            #assignment-session-mount .bubble{
                max-width:100%;
                width:100%;
                border-radius:16px;
                transform:none!important;
            }

            #session-screen .bubble-current,
            #assignment-session-mount .bubble-current{
                box-shadow:0 8px 28px rgba(200,149,108,.08);
            }

            #session-screen .bubble .text-sm,
            #assignment-session-mount .bubble .text-sm{
                font-size:16px;
                line-height:1.55;
            }

            #interaction-area{
                flex:0 0 auto;
                width:100%;
                min-height:auto!important;
                max-height:52vh;
                padding:12px 14px calc(12px + env(safe-area-inset-bottom))!important;
                margin:0!important;
                border-radius:18px 18px 0 0!important;
                border-left:0!important;
                border-right:0!important;
                border-bottom:0!important;
                overflow-y:auto;
                overscroll-behavior:contain;
                -webkit-overflow-scrolling:touch;
                box-shadow:0 -10px 30px rgba(0,0,0,.08);
            }

            #interaction-area input,
            #interaction-area textarea,
            #interaction-area select{
                font-size:16px!important;
            }

            #interaction-area .practice-expected-card{
                padding:10px 12px!important;
                border-radius:12px!important;
            }

            #interaction-area .practice-expected-card p{
                font-size:14px!important;
                line-height:1.45!important;
                display:-webkit-box;
                -webkit-line-clamp:3;
                -webkit-box-orient:vertical;
                overflow:hidden;
            }

            #interaction-area .practice-input-row{
                display:grid!important;
                grid-template-columns:minmax(0,1fr) 48px 56px;
                gap:8px;
                align-items:center;
            }

            #interaction-area .practice-input-row input{
                width:100%;
                min-width:0;
                height:48px;
                padding:0 14px!important;
            }

            #interaction-area .practice-input-row .mic-btn{
                width:48px;
                height:48px;
                font-size:18px;
            }

            #interaction-area .practice-send-btn{
                width:56px;
                height:52px;
                min-height:52px;
                padding:0!important;
                justify-content:center;
            }

            #interaction-area .mic-btn-lg{
                width:64px;
                height:64px;
                font-size:24px;
            }

            #interaction-area .hint-reveal{
                padding:14px!important;
                border-radius:14px!important;
            }

            #interaction-area .hint-reveal p,
            #interaction-area .line-hidden{
                font-size:16px!important;
                line-height:1.5!important;
            }

            #interaction-area .pres-btn-row{
                width:100%;
                display:grid;
                grid-template-columns:minmax(0,1fr) 64px;
                align-items:center;
                gap:12px;
            }

            #interaction-area .hint-reveal-btn{
                width:100%;
                min-height:52px;
            }

            #assignment-session-mount{
                flex:1 1 auto;
                min-height:0;
                width:100%;
            }
        }

/* 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 {
    filter: 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-brand-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2vw, 20px);
}

.home-title-logo {
    width: clamp(64px, 10vw, 96px);
    height: clamp(64px, 10vw, 96px);
    border-radius: clamp(16px, 2.5vw, 24px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(200,149,108,.22);
    -webkit-text-fill-color: initial;
}

.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;
}
/* ═══════════════════════════════════════════════════════════════
   CONTRAST FIXES — appended to end of base.css
   1. Selected role pill in light mode: white text on tan background
      was 2.63:1 (fails WCAG AA, needs 4.5:1). Fixed to dark text.
   2. Leaderboard rank/score text in light mode used colors designed
      for a near-black background, landing at 1.58:1 and 1.71:1 on
      the light leaderboard row background. Fixed with darker shades
      of the same hue (tan/green).
   3. Light-mode input placeholder text was 3.54:1 (borderline for
      small text). Darkened slightly for a comfortable margin.
═══════════════════════════════════════════════════════════════ */

/* Fix 1: role-pill.selected — was color:#ffffff (2.63:1 fail) */
html[data-theme='light'] .role-pill.selected {
    background: #C8956C;
    border-color: #C8956C;
    color: #1C1B1A;
}

/* Fix 2: leaderboard rank/score text needs darker tones in light mode
   (the base colors #E8B88A / #7EC9A0 are tuned for dark backgrounds) */
html[data-theme='light'] .lb-rank{color:#8a5a32}
html[data-theme='light'] .lb-score{color:#1f6b40}

/* Fix 3: light-mode placeholder text, darkened from #888888 (3.54:1)
   for a safer margin on small text */
html[data-theme='light'] input::placeholder,
html[data-theme='light'] textarea::placeholder{
    color:#6b6964 !important;
}

/* ── UI polish pass: neater shells, calmer borders, more consistent buttons ── */
.setup-main-card{
    background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
    border:1px solid var(--sf-border-soft);
    box-shadow:0 18px 48px rgba(0,0,0,.22);
    overflow:hidden;
}

#setup-screen .setup-main-card > .setup-panel:first-child{
    border-top-left-radius:inherit;
    border-top-right-radius:inherit;
}

.navbar-signin-btn,
.navbar-signout-btn,
.google-btn,
.provider-btn,
#test-api-btn,
#home-class-code-submit{
    box-shadow:0 8px 20px rgba(0,0,0,.14);
}

.navbar-signin-btn,
.navbar-signout-btn,
.google-btn,
.provider-btn{
    transition:transform .18s ease,box-shadow .22s ease,background-color .22s ease,border-color .22s ease,color .22s ease;
}

.navbar-signin-btn:hover,
.navbar-signout-btn:hover,
.google-btn:hover,
.provider-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 26px rgba(0,0,0,.18);
}

.provider-btn{
    min-height:96px;
    justify-content:center;
    overflow:hidden;
}

.provider-btn::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 55%);
    pointer-events:none;
}

#landing-inquire > div{
    border-top:0 !important;
    border-radius:28px 28px 0 0;
    box-shadow:0 -12px 36px rgba(40,28,18,.08);
}

#home-classroom-access-card{
    border-color:rgba(0,0,0,.08) !important;
    box-shadow:0 16px 38px rgba(40,28,18,.10);
    overflow:hidden;
}

.classroom-feature-list li{
    padding:12px 14px;
    border-radius:14px;
    background:rgba(255,255,255,.72);
    border:1px solid rgba(200,149,108,.10);
}

.classroom-inquiry-copy button,
#landing-inquire button{
    box-shadow:0 10px 22px rgba(168,122,85,.18);
}

#home-class-code{
    box-shadow:inset 0 1px 2px rgba(0,0,0,.04);
}

.classroom-overflow-menu{
    background:rgba(18,18,21,.98);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 36px rgba(0,0,0,.30);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.classroom-overflow-menu button{
    border:none !important;
    min-height:40px;
}

#app-footer{
    border-top:1px solid rgba(255,255,255,.08);
}

html[data-theme='light'] .setup-main-card{
    background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.92));
    border-color:rgba(0,0,0,.10);
    box-shadow:0 18px 46px rgba(70,55,40,.08);
}

html[data-theme='light'] .settings-auth-card{
    background:#FFFFFF;
    border-color:rgba(0,0,0,.12);
    box-shadow:0 30px 70px rgba(70,55,40,.10);
}

html[data-theme='light'] .settings-auth-icon{
    background:#FFF4EC;
    border-color:rgba(200,149,108,.32);
    color:#A87A55;
}

html[data-theme='light'] .settings-auth-title{
    color:#1C1B1A;
}

html[data-theme='light'] .settings-auth-copy{
    color:#3F3D39;
}

html[data-theme='light'] .navbar-signin-btn,
html[data-theme='light'] .navbar-signout-btn,
html[data-theme='light'] .google-btn,
html[data-theme='light'] .provider-btn,
html[data-theme='light'] #test-api-btn,
html[data-theme='light'] #home-class-code-submit{
    box-shadow:0 10px 24px rgba(70,55,40,.08);
}

html[data-theme='light'] #landing-inquire > div{
    box-shadow:0 -14px 38px rgba(70,55,40,.08);
}

html[data-theme='light'] #home-classroom-access-card{
    border-color:rgba(200,149,108,.18) !important;
    box-shadow:0 18px 36px rgba(70,55,40,.08);
}

html[data-theme='light'] .classroom-feature-list li{
    background:rgba(255,255,255,.92);
    border-color:rgba(200,149,108,.14);
}

html[data-theme='light'] .classroom-overflow-menu{
    background:rgba(255,255,255,.98);
    border-color:rgba(0,0,0,.10);
    box-shadow:0 18px 36px rgba(70,55,40,.12);
}

html[data-theme='light'] #app-footer{
    border-top:1px solid rgba(0,0,0,.08);
}

/* ── Final theme stability layer: keep startup + light/dark surfaces in sync ── */
html,
body{
    background:var(--sf-bg);
    color:var(--sf-fg);
}

body{
    min-height:100vh;
}

.app-navbar,
.setup-main-card,
.glass,
.mini-card,
.flow-card,
.app-modal,
.help-modal,
.onboarding-modal,
.assist-panel,
#landing-inquire > div,
#home-classroom-access-card,
#app-footer,
#home-class-code,
#home-class-code-submit{
    transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;
}

html:not([data-theme='light']) .app-navbar{
    background:rgba(13,13,15,.94);
    border-bottom-color:rgba(255,255,255,.14);
}

html:not([data-theme='light']) .setup-main-card,
html:not([data-theme='light']) .flow-card,
html:not([data-theme='light']) .app-modal,
html:not([data-theme='light']) .help-modal,
html:not([data-theme='light']) .onboarding-modal{
    background:#17171B;
    border-color:rgba(255,255,255,.18);
}

html:not([data-theme='light']) #landing-inquire > div,
html:not([data-theme='light']) #home-classroom-access-card{
    background:#17171B !important;
    border-color:rgba(255,255,255,.14) !important;
    color:#E8E6E1 !important;
}

html:not([data-theme='light']) #landing-inquire h3,
html:not([data-theme='light']) #landing-inquire p,
html:not([data-theme='light']) #home-classroom-access-card > div > div:first-child,
html:not([data-theme='light']) .classroom-inquiry-copy > div,
html:not([data-theme='light']) .classroom-inquiry-copy p{
    color:#E8E6E1 !important;
}

html:not([data-theme='light']) .classroom-feature-list,
html:not([data-theme='light']) .classroom-feature-list li,
html:not([data-theme='light']) #home-class-code-error,
html:not([data-theme='light']) #landing-inquire p,
html:not([data-theme='light']) .classroom-inquiry-copy p{
    color:#B8B5AF !important;
}

html:not([data-theme='light']) .classroom-feature-list li{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.10);
}

html:not([data-theme='light']) .classroom-inquiry-copy{
    border-left-color:rgba(255,255,255,.12) !important;
}

html:not([data-theme='light']) .classroom-inquiry-copy > div:last-child{
    border-top-color:rgba(255,255,255,.12) !important;
}

html:not([data-theme='light']) #home-class-code{
    background:rgba(255,255,255,.08) !important;
    border-color:rgba(255,255,255,.16) !important;
    color:#F2F0EC !important;
}

html:not([data-theme='light']) #home-class-code::placeholder{
    color:#AAA7A1 !important;
}

html:not([data-theme='light']) #home-class-code-submit{
    background:linear-gradient(135deg,#C8956C,#E8B88A) !important;
    color:#111111 !important;
    border:none !important;
}

html:not([data-theme='light']) .delete-open-btn,
html:not([data-theme='light']) .delete-confirm-btn{
    background:linear-gradient(135deg,#D4736E,#9F3E39) !important;
    border-color:rgba(232,137,128,.54) !important;
    color:#FFF5F2 !important;
}

html:not([data-theme='light']) .delete-confirm-btn:disabled{
    background:rgba(212,115,110,.18) !important;
    border-color:rgba(232,137,128,.25) !important;
    color:#F1A29B !important;
}

html[data-theme='light'] .app-navbar{
    background:rgba(247,245,239,.96);
    border-bottom-color:rgba(0,0,0,.12);
}

html[data-theme='light'] .setup-main-card,
html[data-theme='light'] .flow-card,
html[data-theme='light'] .app-modal,
html[data-theme='light'] .help-modal,
html[data-theme='light'] .onboarding-modal{
    background:#FFFFFF;
    border-color:rgba(0,0,0,.12);
}

html[data-theme='light'] #landing-inquire > div,
html[data-theme='light'] #home-classroom-access-card{
    background:#FFFDF9 !important;
    border-color:rgba(200,149,108,.18) !important;
    color:#1C1B1A !important;
}

html[data-theme='light'] .classroom-inquiry-copy{
    border-left-color:rgba(0,0,0,.12) !important;
}

html[data-theme='light'] .classroom-inquiry-copy > div:last-child{
    border-top-color:rgba(0,0,0,.12) !important;
}

html[data-theme='light'] #home-class-code{
    background:#FFFFFF !important;
    border-color:rgba(0,0,0,.14) !important;
    color:#1C1B1A !important;
}

html[data-theme='light'] #home-class-code::placeholder{
    color:#7C7973 !important;
}

html[data-theme='light'] #home-class-code-submit{
    background:linear-gradient(135deg,#C8956C,#E8B88A) !important;
    color:#1C1B1A !important;
    border:1px solid rgba(168,122,85,.35) !important;
    box-shadow:0 12px 26px rgba(168,122,85,.16) !important;
}

html[data-theme='light'] #home-class-code-submit:hover{
    filter:brightness(1.03);
}

html[data-theme='light'] .delete-zone-card{
    background:linear-gradient(135deg,#FFF8F6,#FFFFFF) !important;
    border-color:rgba(180,72,66,.22) !important;
    box-shadow:0 18px 48px rgba(80,55,45,.10);
}

html[data-theme='light'] .delete-danger-icon{
    background:#FFF0EE;
    border-color:rgba(180,72,66,.26);
    color:#B44842;
}

html[data-theme='light'] .delete-zone-warning,
html[data-theme='light'] .delete-warning-list{
    background:#FFF4F2;
    border-color:rgba(180,72,66,.22);
    color:#9F3E39;
}

html[data-theme='light'] .delete-warning-list div{
    color:#3F3D39;
}

html[data-theme='light'] .delete-open-btn,
html[data-theme='light'] .delete-confirm-btn{
    background:linear-gradient(135deg,#D4736E,#9F3E39) !important;
    border-color:rgba(159,62,57,.48) !important;
    color:#FFFFFF !important;
}

html[data-theme='light'] .delete-confirm-btn:disabled{
    background:#F3D7D4 !important;
    border-color:#E9C0BD !important;
    color:#9F3E39 !important;
}

.recording-help-wrap{
    position:relative;
    width:100%;
    display:flex;
    justify-content:center;
    margin-bottom:10px;
    pointer-events:none;
}

.recording-help-bubble{
    position:relative;
    max-width:320px;
    padding:14px 16px;
    border-radius:18px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 12px 28px rgba(0,0,0,.22);
    text-align:center;
    pointer-events:auto;
    transform-origin:50% 100%;
    animation:recording-help-pop .22s ease-out;
}

.recording-help-bubble::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:-10px;
    width:18px;
    height:18px;
    background:inherit;
    border-right:1px solid rgba(255,255,255,.18);
    border-bottom:1px solid rgba(255,255,255,.18);
    transform:translateX(-50%) rotate(45deg);
    border-bottom-right-radius:5px;
}

.recording-help-bubble p{
    margin:0;
    color:#F2F0EC;
    font-size:14px;
    line-height:1.5;
    font-weight:600;
}

.recording-help-link{
    margin-top:8px;
    padding:0;
    border:none;
    background:transparent;
    color:#E8B88A;
    font-size:13px;
    font-weight:700;
    text-decoration:underline;
    cursor:pointer;
}

.recording-help-link:hover{
    color:#F0CFA8;
}

@keyframes recording-help-pop{
    0%{opacity:0;transform:translateY(10px) scale(.88)}
    100%{opacity:1;transform:translateY(0) scale(1)}
}

html[data-theme='light'] .recording-help-bubble{
    background:#FFFFFF;
    border-color:rgba(0,0,0,.14);
    box-shadow:0 12px 24px rgba(70,55,40,.12);
}

html[data-theme='light'] .recording-help-bubble::after{
    border-right-color:rgba(0,0,0,.14);
    border-bottom-color:rgba(0,0,0,.14);
}

html[data-theme='light'] .recording-help-bubble p{
    color:#2E2C2A;
}

html[data-theme='light'] .recording-help-link{
    color:#8f5f3f;
}

@media(max-width:480px){
    #setup-screen{
        padding-left:8px;
        padding-right:8px;
    }

    #setup-screen .setup-main-card{
        max-width:calc(100vw - 16px);
    }

    #setup-screen .setup-panel{
        padding:18px;
    }

    .mode-layout,
    .mode-layout>*{
        min-width:0;
        width:100%;
        max-width:100%;
    }

    .mode-layout input,
    .mode-layout select,
    .mode-layout textarea,
    .mode-layout button{
        max-width:100%;
    }

    .setup-script-actions,
    .script-save-row,
    .script-library-row,
    .join-class-row{
        flex-direction:column!important;
        align-items:stretch!important;
    }

    .setup-script-actions>*,
    .script-save-row>*,
    .script-library-row>*,
    .join-class-row>*{
        width:100%;
    }

    .setup-script-actions button{
        width:100%!important;
    }

    .setup-script-heading{
        flex-direction:column!important;
        align-items:stretch!important;
        gap:10px;
    }

    .setup-script-actions,
    .script-save-row,
    .script-library-row,
    .join-class-row{
        width:100%!important;
    }

    #script-library-select{
        min-width:0;
    }

    .app-modal-overlay{
        align-items:flex-start;
        overflow-y:auto;
        padding:12px;
    }

    .app-modal{
        max-height:calc(100vh - 24px);
        max-height:calc(100dvh - 24px);
        overflow-y:auto;
    }
}

@media(max-width:768px){
    body[data-screen='login'] .app-navbar{
        display:none;
    }

    body[data-screen='login'] #login-screen{
        padding-top:0;
    }

    body[data-screen='login'] .landing-shell{
        padding-top:clamp(28px,8vw,48px);
    }
}