:root{
  --bg:#F5F7F7; --surface:#FFFFFF; --surface-2:#EEF2F2;
  --text:#121718; --muted:#586A6E; --border:#DFE5E6;
  --accent:#0B5F59; --accent-fill:#0F766E; --accent-soft:#E2F1EF;
  --good:#1C7430; --good-soft:#E3F3E7; --bad:#B42318; --bad-soft:#FCE9E7;
  --radius:16px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(16,24,28,.06), 0 8px 24px rgba(16,24,28,.06);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Inter,system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A0E0F; --surface:#141A1B; --surface-2:#1C2426;
    --text:#E9F0F0; --muted:#98A9AD; --border:#242F31;
    --accent:#5EEAD4; --accent-fill:#0F766E; --accent-soft:#12312F;
    --good:#6EE7A0; --good-soft:#123322; --bad:#FCA5A0; --bad-soft:#3A1614;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#0A0E0F; --surface:#141A1B; --surface-2:#1C2426;
  --text:#E9F0F0; --muted:#98A9AD; --border:#242F31;
  --accent:#5EEAD4; --accent-fill:#0F766E; --accent-soft:#12312F;
  --good:#6EE7A0; --good-soft:#123322; --bad:#FCA5A0; --bad-soft:#3A1614;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text); font-family:var(--font);
  font-size:17px; line-height:1.5; -webkit-font-smoothing:antialiased;
  padding-bottom:calc(76px + env(safe-area-inset-bottom));
}
h2{font-size:26px; letter-spacing:-.02em; margin:0 0 4px}
h3{font-size:17px; margin:0 0 6px; letter-spacing:-.01em}
p{margin:0 0 10px}
small{font-weight:400}

.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:9px}
.brand-name{font-weight:650; letter-spacing:-.02em; font-size:17px}
.mark{width:22px;height:22px;border-radius:7px;background:linear-gradient(140deg,var(--accent-fill),#134E4A);display:block;position:relative}
.mark::after{content:"";position:absolute;inset:6px 6px auto 6px;height:2px;border-radius:2px;background:#fff;opacity:.9}
.mark::before{content:"";position:absolute;inset:auto 6px 6px 6px;height:2px;border-radius:2px;background:#fff;opacity:.55}

#main{max-width:760px; margin:0 auto; padding:16px}
.view-head{margin:4px 0 14px}
.hint{color:var(--muted); font-size:14px; line-height:1.45}

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; margin-bottom:14px; box-shadow:var(--shadow);
}
.card.note h3{margin-bottom:4px}
.card.note p{color:var(--muted); font-size:14px; margin:0}

/* ---------- Horas ---------- */
.hours-card{background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:18px; box-shadow:var(--shadow); margin-bottom:20px}
.hours-top{display:flex; align-items:center; justify-content:space-between; gap:16px}
.hours-value{font-size:40px; font-weight:680; letter-spacing:-.04em; line-height:1}
.hours-value small{font-size:15px; color:var(--muted); font-weight:500; margin-left:6px; letter-spacing:0}
.hours-label{color:var(--muted); font-size:13px; margin-top:6px}
.ring{position:relative; width:84px; height:84px; flex:none}
.ring-svg{width:84px; height:84px; transform:rotate(-90deg)}
.ring-bg{fill:none; stroke:var(--surface-2); stroke-width:10}
.ring-fg{fill:none; stroke:var(--accent-fill); stroke-width:10; stroke-linecap:round;
  stroke-dasharray:327; stroke-dashoffset:327; transition:stroke-dashoffset .8s cubic-bezier(.2,.7,.3,1)}
.ring-text{position:absolute; inset:0; display:grid; place-items:center; font-size:14px; font-weight:640}
.hours-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:18px; border-top:1px solid var(--border); padding-top:14px}
.hours-grid div{display:flex; flex-direction:column; gap:2px}
.hours-grid b{font-size:16px; letter-spacing:-.02em}
.hours-grid span{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}

.section-head{display:flex; align-items:center; justify-content:space-between; margin:0 0 6px}
.seg{display:flex; background:var(--surface-2); border-radius:9px; padding:3px; gap:2px}
.seg-btn{border:0; background:transparent; color:var(--muted); font:inherit; font-size:13px; font-weight:560;
  padding:6px 12px; border-radius:7px; cursor:pointer}
.seg-btn.on{background:var(--surface); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.12)}

/* ---------- Blocos do dia ---------- */
.blocks{list-style:none; margin:12px 0 18px; padding:0; display:flex; flex-direction:column; gap:10px}
.block{display:flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); cursor:pointer; text-align:left; width:100%; font:inherit; color:inherit}
.block:active{transform:scale(.99)}
.block .num{width:28px; height:28px; border-radius:50%; background:var(--surface-2); color:var(--muted);
  display:grid; place-items:center; font-size:13px; font-weight:640; flex:none}
.block.done .num{background:var(--good-soft); color:var(--good)}
.block .b-title{font-weight:580; letter-spacing:-.01em}
.block .b-sub{font-size:13px; color:var(--muted)}
.block .b-min{margin-left:auto; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; flex:none}
.block.done .b-title{color:var(--muted); text-decoration:line-through; text-decoration-color:var(--border)}

/* ---------- Botões ---------- */
.primary-btn{background:var(--accent-fill); color:#fff; border:0; border-radius:12px; font:inherit; font-size:16px;
  font-weight:580; padding:13px 18px; cursor:pointer}
.primary-btn:active{opacity:.85}
.primary-btn.wide{width:100%; margin-top:10px}
.primary-btn:disabled{opacity:.4; cursor:default}
.ghost-btn{background:var(--surface-2); color:var(--text); border:1px solid var(--border); border-radius:12px;
  font:inherit; font-size:15px; font-weight:520; padding:11px 15px; cursor:pointer}
.ghost-btn.small{padding:7px 12px; font-size:13px; border-radius:9px}
.ghost-btn.danger{color:var(--bad)}
.ghost-btn:disabled{opacity:.4; cursor:default}
.ghost-btn.on{background:var(--accent-soft); border-color:var(--accent-fill); color:var(--accent)}
.row{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}

/* ---------- Listas / histórias ---------- */
.filters{display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap}
.chip{background:var(--surface-2); border:1px solid var(--border); color:var(--muted); border-radius:20px;
  padding:7px 14px; font-size:13px; font-weight:560; cursor:pointer}
.chip.on{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-fill)}
.list{display:flex; flex-direction:column; gap:10px}
.story{display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px; cursor:pointer; box-shadow:var(--shadow); width:100%; font:inherit; color:inherit; text-align:left}
.story .lvl{font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--accent); background:var(--accent-soft);
  border-radius:6px; padding:4px 7px; flex:none}
.story .s-title{font-weight:580; letter-spacing:-.01em}
.story .s-sub{font-size:13px; color:var(--muted)}
.story .s-check{margin-left:auto; font-size:12px; color:var(--good); font-weight:600; flex:none}

.reader-bar{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}
.reader-title{font-weight:620; letter-spacing:-.01em; text-align:center; flex:1}
.reader-body{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:8px; box-shadow:var(--shadow)}
.line{padding:11px 12px; border-radius:10px; cursor:pointer; border:0; background:transparent; width:100%; text-align:left; font:inherit; color:inherit; display:block}
.line + .line{border-top:1px solid var(--border)}
.line.active{background:var(--accent-soft)}
.line .en{font-size:17px; line-height:1.45}
.line .pt{font-size:14px; color:var(--muted); margin-top:3px; display:none}
.reader.show-pt .line .pt{display:block}
.line.active .en{font-weight:560}
.reader-foot{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; position:sticky; bottom:calc(84px + env(safe-area-inset-bottom))}

.quiz-q{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:12px; box-shadow:var(--shadow)}
.quiz-q .q{font-weight:560; margin-bottom:10px}
.opt{display:block; width:100%; text-align:left; font:inherit; color:inherit; background:var(--surface-2);
  border:1px solid var(--border); border-radius:11px; padding:12px; margin-bottom:8px; cursor:pointer}
.opt.right{background:var(--good-soft); border-color:var(--good); color:var(--good); font-weight:560}
.opt.wrong{background:var(--bad-soft); border-color:var(--bad); color:var(--bad)}

/* ---------- SRS ---------- */
.srs-stats{display:flex; gap:8px; margin-bottom:12px}
.srs-stats div{flex:1; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px; text-align:center}
.srs-stats b{display:block; font-size:20px; letter-spacing:-.02em}
.srs-stats span{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.srs-card{text-align:center; padding:26px 16px}
.srs-word{font-size:34px; font-weight:640; letter-spacing:-.03em; margin-bottom:10px}
.srs-answer{margin:16px 0 4px; border-top:1px solid var(--border); padding-top:16px}
.srs-pt{font-size:22px; font-weight:560; margin-bottom:10px}
.srs-ex{font-size:16px}
.srs-expt{font-size:14px; color:var(--muted); margin-top:3px}
.srs-grades{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:14px}
.srs-grades button{font:inherit; font-size:13px; font-weight:560; padding:12px 4px; border-radius:11px;
  border:1px solid var(--border); background:var(--surface-2); color:var(--text); cursor:pointer}
.srs-grades button[data-g="1"]{color:var(--bad)}
.srs-grades button[data-g="4"]{color:var(--good)}
.srs-empty p{color:var(--muted)}
.chunks{margin-top:10px; display:flex; flex-direction:column; gap:0}
.chunk{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--border); cursor:pointer; align-items:baseline}
.chunk b{font-weight:560; font-size:15px}
.chunk span{color:var(--muted); font-size:13px; text-align:right}

/* ---------- Ouvido ---------- */
.tabs{display:flex; gap:6px; background:var(--surface-2); padding:4px; border-radius:11px; margin-bottom:14px}
.tab-btn{flex:1; border:0; background:transparent; font:inherit; font-size:14px; font-weight:560; color:var(--muted);
  padding:9px; border-radius:8px; cursor:pointer}
.tab-btn.active{background:var(--surface); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.12)}
.pair-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.pair{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px; cursor:pointer;
  text-align:left; font:inherit; color:inherit; box-shadow:var(--shadow)}
.pair b{display:block; font-weight:600; letter-spacing:-.01em; margin-bottom:3px}
.pair span{font-size:12px; color:var(--muted)}
.pair .acc{font-size:12px; color:var(--accent); font-weight:600}
.drill{margin-top:4px}
.tip{background:var(--accent-soft); color:var(--accent); border-radius:12px; padding:12px; font-size:14px; margin-bottom:14px}
.drill-options{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px}
.drill-options button{font:inherit; font-size:20px; font-weight:580; padding:22px 8px; border-radius:14px;
  border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer}
.drill-options button.right{background:var(--good-soft); border-color:var(--good); color:var(--good)}
.drill-options button.wrong{background:var(--bad-soft); border-color:var(--bad); color:var(--bad)}
.drill-feedback{margin-top:12px; text-align:center; font-size:15px; min-height:24px; font-weight:560}
.score{font-variant-numeric:tabular-nums; color:var(--muted); font-size:14px; width:52px; text-align:right}
.shadow-line{font-size:24px; font-weight:580; letter-spacing:-.02em; line-height:1.35; margin-bottom:8px}
.shadow-tip{color:var(--muted); font-size:14px}

/* ---------- Falar ---------- */
.prompt-q{font-size:21px; font-weight:580; letter-spacing:-.02em; line-height:1.35; margin-bottom:10px}
.prompt-hints{display:flex; flex-wrap:wrap; gap:6px}
.prompt-hints span{background:var(--surface-2); border:1px solid var(--border); border-radius:20px; padding:5px 11px; font-size:13px; color:var(--muted)}
.prompt-hints span.hit{background:var(--good-soft); border-color:var(--good); color:var(--good); font-weight:560}
.transcript{margin-top:14px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:13px; font-size:16px}
.transcript em{color:var(--muted); font-style:normal}
.talk-feedback{margin-top:10px; font-size:14px; color:var(--muted)}
.rec-on{background:var(--bad) !important; color:#fff !important; border-color:var(--bad) !important}
.topic{font-size:20px; font-weight:580; letter-spacing:-.02em; margin:12px 0 8px; line-height:1.35}
.rounds{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0}
.round{background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:11px; text-align:center}
.round.on{background:var(--accent-soft); border-color:var(--accent-fill)}
.round.done{background:var(--good-soft); border-color:var(--good)}
.round b{display:block; font-size:15px}
.round span{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.round.done span{color:var(--good)}
.timer{font-size:56px; font-weight:660; letter-spacing:-.04em; text-align:center; font-variant-numeric:tabular-nums; margin:6px 0}

/* ---------- Progresso ---------- */
.chart{display:flex; align-items:flex-end; gap:3px; height:110px; margin-top:12px}
.bar{flex:1; background:var(--surface-2); border-radius:3px 3px 0 0; min-height:3px; position:relative}
.bar.has{background:var(--accent-fill)}
.levels div{display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-top:1px solid var(--border); font-size:15px}
.levels div:first-child{border-top:0}
.levels .lv-name{font-weight:560}
.levels .lv-h{color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums}
.levels .lv-now{color:var(--accent); font-weight:640}
.levels .lv-done{color:var(--good); font-weight:600}
.pace{font-size:15px; line-height:1.55}
.method{margin:6px 0 10px; padding-left:18px; font-size:14px; color:var(--muted); line-height:1.7}
.method b{color:var(--text)}

/* ---------- Tabbar ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; gap:2px;
  padding:7px 6px calc(7px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:saturate(1.6) blur(16px); border-top:1px solid var(--border);
}
.tabbar button{flex:1; border:0; background:transparent; color:var(--muted); font:inherit; font-size:10px; font-weight:560;
  display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 2px; cursor:pointer; border-radius:9px}
.tabbar button.active{color:var(--accent)}
.ico{width:21px; height:21px; display:block; background:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain}
.ico-today{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>')}
.ico-input{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h7a2 2 0 012 2v12a2 2 0 00-2-2H4z"/><path d="M20 5h-7a2 2 0 00-2 2v12a2 2 0 012-2h7z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h7a2 2 0 012 2v12a2 2 0 00-2-2H4z"/><path d="M20 5h-7a2 2 0 00-2 2v12a2 2 0 012-2h7z"/></svg>')}
.ico-words{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linejoin="round"><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M7 3h10"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linejoin="round"><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M7 3h10"/></svg>')}
.ico-ear{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><path d="M6 12a6 6 0 1112 0c0 3-2 4-3 5s-1 3-3 3a3 3 0 01-3-3"/><path d="M9 11a3 3 0 016 0"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><path d="M6 12a6 6 0 1112 0c0 3-2 4-3 5s-1 3-3 3a3 3 0 01-3-3"/><path d="M9 11a3 3 0 016 0"/></svg>')}
.ico-speak{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0014 0M12 18v3"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0014 0M12 18v3"/></svg>')}
.ico-prog{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><path d="M5 19V9M12 19V5M19 19v-6"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><path d="M5 19V9M12 19V5M19 19v-6"/></svg>')}

/* ---------- Extras ---------- */
.timer-pill{position:fixed; right:14px; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:25;
  background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:7px 13px;
  font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:7px}
.timer-pill .dot{width:7px; height:7px; border-radius:50%; background:var(--bad); animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.25}}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(92px + env(safe-area-inset-bottom)); z-index:40;
  background:var(--text); color:var(--bg); padding:11px 17px; border-radius:22px; font-size:14px; font-weight:560;
  box-shadow:var(--shadow); max-width:88vw; text-align:center}
@media (min-width:700px){ .pair-grid{grid-template-columns:repeat(3,1fr)} }

#sound-diag{white-space:pre-line; font-size:14px; line-height:1.6; margin-bottom:4px}
select.ghost-btn{-webkit-appearance:none; appearance:none; max-width:100%; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size:5px 5px,5px 5px;
  background-repeat:no-repeat; padding-right:32px}
.card.warn{border-color:var(--bad); background:var(--bad-soft)}
.card.warn h3{color:var(--bad)}
.card.warn p{font-size:14px; margin:0}