:root{color-scheme:dark;--bg:#08111F;--surface:#101D2E;--raise:#17283D;--text:#F5F7FA;--muted:#91A3B8;--border:#263A52;--brand:#39E58C;--warning:#F7C948;--danger:#F04452}*{box-sizing:border-box}html{background:#08111F}html,body{min-height:100%;background-color:#08111F}body{margin:0;background:radial-gradient(circle at 50% -10%,rgba(57,229,140,.08),transparent 34rem),var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}.hidden{display:none!important}.app-shell{width:min(100%,760px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease;margin:auto;padding:max(10px,env(safe-area-inset-top)) 14px max(80px,calc(70px + env(safe-area-inset-bottom)))}.app-header{height:52px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:8px;color:var(--text);text-decoration:none}.brand img{width:34px;height:34px}.connection{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:900}.dot{width:9px;height:9px;border-radius:50%;background:currentColor}.connection.ok{color:var(--brand)}.connection.bad{color:var(--danger)}.connection.writing{color:var(--warning)}.btn{border:1px solid transparent;border-radius:13px;min-height:46px;padding:10px 14px;font-weight:850;color:var(--text);background:var(--raise);transition:background-color .16s ease,border-color .16s ease,color .16s ease,filter .16s ease,transform .12s ease}.btn:active,button:active{transform:scale(.97)}.btn.primary{background:var(--brand);color:#06140E}.btn.secondary{border-color:var(--border)}.btn.danger{background:rgba(240,68,82,.14);border-color:rgba(240,68,82,.5);color:#FF9AA3}.wide{width:100%}.row{display:flex;gap:8px;flex-wrap:wrap}.kicker{color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.14em}.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(2,8,16,.78);animation:fade .18s}.card{width:min(100%,420px);border:1px solid var(--border);border-radius:20px;padding:20px;background:var(--surface);animation:modal .2s cubic-bezier(.2,.8,.2,1)}.card h2{text-align:center}.card p{color:var(--muted);text-align:center}.card input,.card .btn{width:100%;margin-top:9px}.card input{min-height:48px;border:1px solid var(--border);border-radius:12px;background:#0D1928;color:var(--text);padding:10px 12px}.toast{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:200;width:min(calc(100% - 24px),680px);margin:auto;border-radius:14px;padding:12px;text-align:center;font-weight:900;opacity:0;pointer-events:none}.toast.ok{background:#106A4B}.toast.error{background:#892A35}.toast.show{animation:toastin .28s cubic-bezier(.2,.8,.2,1) both}.toast.hide{animation:toastout .22s ease-in both}@keyframes fade{from{background:transparent}}@keyframes modal{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastin{from{opacity:0;transform:translateY(72px)}to{opacity:1;transform:translateY(0)}}@keyframes toastout{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(72px)}}
button,summary,select,[role="button"]{cursor:pointer}
button:disabled{cursor:not-allowed}

.dot.pulse{animation:dotPulse .55s ease}
.modal.closing .card{animation:modalOut .15s ease both}
.paused-pulse{animation:pausedPulse 1.4s ease-in-out infinite}
details[open] .settings-body{animation:settingsReveal .18s ease both}
@keyframes modalOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes dotPulse{0%{transform:scale(1)}50%{transform:scale(1.55)}100%{transform:scale(1)}}
@keyframes pausedPulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes settingsReveal{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}

button,summary,select,[role="button"]{
    transition:background-color .16s ease,border-color .16s ease,color .16s ease,filter .16s ease,transform .12s ease,box-shadow .16s ease;
}
@media(hover:hover) and (pointer:fine){
    button:hover:not(:disabled){
        filter:brightness(1.10);
    }
    .btn.primary:hover:not(:disabled){
        background:#4BEA99;
        border-color:#4BEA99;
    }
    .btn.secondary:hover:not(:disabled),
    .quickgrid button:hover:not(:disabled),
    .correct button:hover:not(:disabled),
    .group .row button:hover:not(:disabled){
        background:#20334A;
        border-color:#36516E;
    }
    .btn.danger:hover:not(:disabled){
        background:rgba(240,68,82,.22);
        border-color:rgba(240,68,82,.72);
    }
    summary:hover{
        color:var(--brand);
    }
}

body.app-ready .app-shell{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

#confirmModal .card p{line-height:1.45}
#confirmModal .card h2{margin-bottom:6px}

.btn.active-toggle{
    background:var(--warning)!important;
    border-color:var(--warning)!important;
    color:#1A1606!important;
}
@media(hover:hover) and (pointer:fine){
    .btn.active-toggle:hover:not(:disabled){
        background:#FFD95E!important;
        border-color:#FFD95E!important;
        filter:none;
    }
}

.auth-honeypot{
    position:absolute!important;
    left:-10000px!important;
    top:auto!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
}