:root{
  --bg:#0c1117;--bg2:#111a24;--card:#172230;--card2:#1e2b3b;--line:#263548;
  --text:#e8eef5;--muted:#8fa1b5;--muted2:#5f7188;
  --green:#3ddc84;--green2:#22b56a;--amber:#f5a524;--red:#ef5b5b;--blue:#4ea3ff;
  --radius:16px;--shadow:0 6px 24px rgba(0,0,0,.35);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{font-size:16px}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100svh;line-height:1.45;overscroll-behavior-y:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font:inherit;color:var(--text);background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%;outline:none}
input:focus,textarea:focus{border-color:var(--green)}
a{color:var(--blue)}
.hidden{display:none!important}

/* layout */
#app{max-width:640px;margin:0 auto;padding:0 16px calc(84px + var(--safe-b));min-height:100svh}
header.top{display:flex;align-items:center;justify-content:space-between;padding:14px 0 6px;position:sticky;top:0;background:linear-gradient(var(--bg) 80%,transparent);z-index:5}
header.top h1{font-size:1.05rem;font-weight:800;letter-spacing:-.2px;display:flex;align-items:center;gap:8px}
header.top h1 span{color:var(--green)}
header.top .sub{font-size:.75rem;color:var(--muted)}
.pill{font-size:.7rem;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--card2);color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.pill.green{background:rgba(61,220,132,.15);color:var(--green)}
.pill.amber{background:rgba(245,165,36,.15);color:var(--amber)}
.pill.red{background:rgba(239,91,91,.15);color:var(--red)}
.pill.blue{background:rgba(78,163,255,.15);color:var(--blue)}

nav.tabs{position:fixed;left:0;right:0;bottom:0;background:rgba(12,17,23,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:8px 4px calc(8px + var(--safe-b));z-index:10}
nav.tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.62rem;font-weight:600;color:var(--muted2);padding:4px 0}
nav.tabs button .ic{font-size:1.25rem;line-height:1}
nav.tabs button.active{color:var(--green)}
nav.tabs button .dot{position:absolute;margin-top:-2px;margin-left:22px;width:7px;height:7px;border-radius:50%;background:var(--amber)}

.tab{display:none;padding-top:8px;animation:fade .2s}
.tab.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:12px;box-shadow:var(--shadow)}
.card h2{font-size:1.05rem;font-weight:800;margin-bottom:4px}
.card h3{font-size:.92rem;font-weight:700;margin-bottom:6px}
.card p{font-size:.9rem;color:var(--muted)}
.card p.t{color:var(--text)}
.row{display:flex;align-items:center;gap:10px}
.row.between{justify-content:space-between}
.row.wrap{flex-wrap:wrap}
.grow{flex:1}
.mt{margin-top:10px}.mt2{margin-top:16px}.mb{margin-bottom:10px}
.small{font-size:.78rem;color:var(--muted)}
.tiny{font-size:.7rem;color:var(--muted2)}
.big{font-size:1.6rem;font-weight:800;line-height:1.1}
.huge{font-size:2.6rem;font-weight:900;line-height:1;letter-spacing:-1px}
.center{text-align:center}
.green{color:var(--green)}.amber{color:var(--amber)}.red{color:var(--red)}.blue{color:var(--blue)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-weight:700;font-size:.92rem;transition:transform .08s,background .15s}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--green);color:#06120b;border-color:var(--green)}
.btn.amber{background:var(--amber);color:#1a1000;border-color:var(--amber)}
.btn.danger{background:rgba(239,91,91,.15);color:var(--red);border-color:rgba(239,91,91,.3)}
.btn.ghost{background:transparent}
.btn.block{width:100%}
.btn.sm{padding:8px 12px;font-size:.8rem;border-radius:10px}
.btn.xs{padding:5px 9px;font-size:.72rem;border-radius:8px}
.btn.round{width:44px;height:44px;padding:0;border-radius:50%}
.btn:disabled{opacity:.45;cursor:default}
.btnrow{display:flex;gap:8px;margin-top:12px}
.btnrow .btn{flex:1}

/* progresso */
.bar{height:8px;background:var(--bg2);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green2),var(--green));border-radius:99px;transition:width .5s}
.bar.amber i{background:linear-gradient(90deg,#c47d0c,var(--amber))}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{background:var(--bg2);border-radius:12px;padding:10px;text-align:center}
.stat b{display:block;font-size:1.35rem;font-weight:900}
.stat span{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}

/* etapas da sessao */
.steps{display:flex;flex-direction:column;gap:8px}
.step{display:flex;align-items:center;gap:12px;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;text-align:left;width:100%}
.step .n{width:34px;height:34px;border-radius:50%;background:var(--card2);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;flex-shrink:0}
.step.done .n{background:var(--green);color:#06120b}
.step.done .n::before{content:"✓"}
.step.done .n span{display:none}
.step .lbl{flex:1}
.step .lbl b{display:block;font-size:.95rem}
.step .lbl small{color:var(--muted);font-size:.75rem}
.step .min{font-size:.75rem;color:var(--muted);font-weight:700}
.step.active{border-color:var(--green)}

.timer{font-variant-numeric:tabular-nums;font-weight:800;font-size:1rem;color:var(--muted)}
.timer.over{color:var(--amber)}

/* cards de revisao */
.flash{background:var(--card2);border-radius:18px;padding:26px 18px;text-align:center;min-height:210px;display:flex;flex-direction:column;justify-content:center;gap:10px;border:1px solid var(--line)}
.flash .q{font-size:1.25rem;font-weight:700}
.flash .a{font-size:1.35rem;font-weight:800;color:var(--green)}
.flash .ex{font-size:.85rem;color:var(--muted);font-style:italic}
.flash .tag{font-size:.65rem;color:var(--muted2);text-transform:uppercase;letter-spacing:.5px}
.rate{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.rate .btn{flex-direction:column;gap:2px;padding:10px 6px}
.rate .btn small{font-size:.65rem;font-weight:500;opacity:.7}

/* dialogo */
.dlg{display:flex;flex-direction:column;gap:8px}
.line{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:14px;background:var(--bg2);border:1px solid transparent}
.line.you{background:rgba(61,220,132,.08)}
.line.playing{border-color:var(--green)}
.line .who{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);min-width:56px;padding-top:3px}
.line.you .who{color:var(--green)}
.line .txt{flex:1;font-size:.95rem}
.line .txt.blur{filter:blur(6px);user-select:none}
.line .acts{display:flex;gap:4px}
.seg{display:inline-flex;background:var(--bg2);border-radius:10px;padding:3px;border:1px solid var(--line)}
.seg button{padding:6px 10px;border-radius:8px;font-size:.78rem;font-weight:700;color:var(--muted)}
.seg button.on{background:var(--card2);color:var(--text)}
.chk{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:.9rem}
.chk input{width:20px;height:20px;accent-color:var(--green)}
.cmp{font-size:.95rem;line-height:1.7}
.cmp .ok{color:var(--green)}
.cmp .miss{color:var(--red);text-decoration:underline dotted}

/* chat */
.chat{display:flex;flex-direction:column;gap:8px;min-height:200px;max-height:48svh;overflow-y:auto;padding:4px 0}
.msg{max-width:88%;padding:10px 13px;border-radius:16px;font-size:.95rem;position:relative}
.msg.ai{background:var(--bg2);align-self:flex-start;border-bottom-left-radius:4px}
.msg.me{background:rgba(61,220,132,.14);align-self:flex-end;border-bottom-right-radius:4px}
.msg.sys{align-self:center;font-size:.75rem;color:var(--muted);background:transparent}
.msg .txt.blur{filter:blur(6px);user-select:none;cursor:pointer}
.msg .acts{display:flex;gap:6px;margin-top:6px}
.ptt{width:88px;height:88px;border-radius:50%;background:var(--green);color:#06120b;font-size:2rem;display:flex;align-items:center;justify-content:center;margin:0 auto;box-shadow:0 0 0 0 rgba(61,220,132,.5);transition:box-shadow .2s,background .2s}
.ptt.rec{background:var(--red);color:#fff;animation:pulse 1.2s infinite}
.ptt.busy{background:var(--card2);color:var(--muted)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(239,91,91,.5)}70%{box-shadow:0 0 0 18px rgba(239,91,91,0)}100%{box-shadow:0 0 0 0 rgba(239,91,91,0)}}
.ptt-lbl{text-align:center;font-size:.78rem;color:var(--muted);margin-top:8px;min-height:1.2em}

/* feedback */
.fb-item{background:var(--bg2);border-radius:12px;padding:10px 12px;margin-top:8px;font-size:.9rem}
.fb-item .said{color:var(--red);text-decoration:line-through;opacity:.8}
.fb-item .better{color:var(--green);font-weight:700}
.fb-item .why{font-size:.78rem;color:var(--muted);margin-top:2px}
.score{display:flex;gap:4px}
.score i{width:14px;height:14px;border-radius:50%;background:var(--card2)}
.score i.on{background:var(--green)}

/* 4/3/2 */
.rounds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.round{background:var(--bg2);border-radius:12px;padding:10px;text-align:center;border:1px solid var(--line)}
.round.on{border-color:var(--red)}
.round.done{border-color:var(--green)}
.round b{display:block;font-size:1.3rem}
.round small{font-size:.65rem;color:var(--muted)}
.bigtimer{font-size:3rem;font-weight:900;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:-1px}

/* plano */
.wk{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.wk:last-child{border-bottom:none}
.wk .num{width:38px;height:38px;border-radius:12px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-weight:900;flex-shrink:0}
.wk.cur .num{background:var(--green);color:#06120b}
.wk.past .num{background:var(--card2);color:var(--muted)}
.wk .info{flex:1}
.wk .info b{display:block;font-size:.95rem}
.wk .info small{color:var(--muted);font-size:.75rem}
.wk .dots{display:flex;gap:3px;margin-top:6px}
.wk .dots i{width:9px;height:9px;border-radius:50%;background:var(--card2)}
.wk .dots i.d{background:var(--green)}
.wk .dots i.m{background:var(--red);opacity:.6}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:8px}
.cal .h{font-size:.6rem;color:var(--muted2);text-align:center;text-transform:uppercase}
.cal .d{aspect-ratio:1;border-radius:8px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:.72rem;color:var(--muted2)}
.cal .d.study{background:var(--card2);color:var(--text)}
.cal .d.done{background:var(--green);color:#06120b;font-weight:800}
.cal .d.miss{background:rgba(239,91,91,.2);color:var(--red)}
.cal .d.today{outline:2px solid var(--amber)}
.cal .d.off{opacity:.25}

.chunk{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.chunk:last-child{border:none}
.chunk .en{font-weight:700}
.chunk .pt{font-size:.78rem;color:var(--muted)}
.chunk .st{font-size:.6rem;color:var(--muted2);text-transform:uppercase}

/* lista */
.list-item{display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;background:var(--bg2);margin-bottom:8px;text-align:left;width:100%}
.list-item b{display:block;font-size:.92rem}
.list-item small{color:var(--muted);font-size:.75rem}
.list-item .ar{color:var(--muted2)}

/* login */
.login{min-height:80svh;display:flex;flex-direction:column;justify-content:center;gap:14px;text-align:center}
.login .logo{font-size:3rem}
.login input{text-align:center;font-size:1.4rem;letter-spacing:.3em}

/* toast */
#toast{position:fixed;left:50%;bottom:calc(96px + var(--safe-b));transform:translateX(-50%);background:var(--card2);border:1px solid var(--line);color:var(--text);padding:10px 16px;border-radius:12px;font-size:.85rem;z-index:50;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90%;text-align:center}
#toast.show{opacity:1}
#toast.err{border-color:var(--red)}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.modal .box{background:var(--card);border-radius:20px 20px 0 0;width:100%;max-width:640px;max-height:88svh;overflow-y:auto;padding:18px 16px calc(18px + var(--safe-b))}
.modal .box h2{font-size:1.05rem;margin-bottom:8px}

svg.chart{width:100%;height:110px;display:block}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--muted);border-top-color:var(--green);border-radius:50%;animation:rot .8s linear infinite;vertical-align:middle}
@keyframes rot{to{transform:rotate(360deg)}}
@media (min-width:700px){#app{padding-top:10px} nav.tabs{max-width:640px;margin:0 auto;border-radius:18px 18px 0 0;border:1px solid var(--line);border-bottom:none}}