:root{
  --bg:#f6f7fb; --card:#ffffff; --text:#14213d; --muted:#5b6785; --line:#e3e7f1;
  --accent:#4f46e5; --accent-soft:#e8e7fd; --green:#16a34a; --amber:#b45309; --amber-soft:#fef3c7;
  --play:#dcfce7;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220; --card:#131c31; --text:#e8ecf7; --muted:#9aa6c4; --line:#243153;
    --accent:#8b8bff; --accent-soft:#232a55; --green:#4ade80; --amber:#fbbf24; --amber-soft:#3a2f0d;
    --play:#12351f;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:0;z-index:5}
.brand{color:var(--text);text-decoration:none;font-weight:700}
.top-right{display:flex;align-items:center;gap:10px}
.mode{font-size:13px;color:var(--amber);background:var(--amber-soft);padding:3px 10px;border-radius:999px}
main{max-width:860px;margin:0 auto;padding:20px 16px 80px}
h1{font-size:26px;margin:6px 0 4px}
h2{font-size:20px;margin:34px 0 12px}
.sub{color:var(--muted);margin:0 0 18px}
.back{display:inline-block;margin-bottom:8px;color:var(--accent);text-decoration:none}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin:12px 0}
a.lesson{display:block;color:inherit;text-decoration:none}
a.lesson:hover{border-color:var(--accent)}
.lesson h3{margin:0 0 2px;font-size:18px}
.muted{color:var(--muted)}
button{font:inherit;cursor:pointer}
.btn{border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:10px;padding:8px 14px}
.ghost{border:1px solid var(--line);background:transparent;color:var(--text);border-radius:10px;padding:6px 12px}
.pbtn{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:10px;padding:6px 12px}
.pbtn:hover{border-color:var(--accent)}
.pbtn.small{padding:3px 9px;font-size:14px}
.playing{background:var(--play)!important;border-color:var(--green)!important}
.label{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.sent{font-size:22px;line-height:1.7}
.w{border:0;background:none;color:inherit;font:inherit;padding:1px 3px;margin:0 -1px;border-radius:6px;cursor:pointer}
.w:hover{background:var(--accent-soft)}
.w.nw{cursor:default;opacity:.6}
.w.playing{outline:2px solid var(--green)}
.pt{color:var(--muted);margin-top:6px}
.pt{display:none}
.show-pt>.pt{display:block}
.ptbtn{margin-left:auto}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.parts{margin-top:14px;border-top:1px dashed var(--line);padding-top:10px}
.parts summary{cursor:pointer;color:var(--accent);font-weight:600}
.chunks{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.chunk{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chunk .ct{flex:1 1 220px;font-size:18px}
.chunk .cp{flex-basis:100%;color:var(--muted);font-size:14px;margin-top:-4px}
.chunk .cp{display:none}
.show-pt .chunk .cp{display:block}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:10px 0}
audio{width:100%;margin-top:8px}
.wordbox{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.wordbox .w{background:var(--card);border:1px solid var(--line);padding:3px 10px}
input[type=text],input[type=email],input[type=password],input[type=search]{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);font:inherit}
.login{max-width:380px;margin:40px auto}
.login label{display:block;margin:12px 0 4px;font-size:14px;color:var(--muted)}
.err{color:#dc2626;margin-top:10px;min-height:1.4em}
@media (max-width:520px){.sent{font-size:20px}}
#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);max-width:90vw;background:#dc2626;color:#fff;
  padding:10px 16px;border-radius:10px;z-index:20;box-shadow:0 4px 14px rgba(0,0,0,.3)}
#toast[hidden]{display:none}

/* ---- palavras difíceis / revisão espaçada ---- */
.rvlink{font-size:14px;text-decoration:none;color:var(--accent);border:1px solid var(--line);padding:4px 10px;border-radius:999px;background:var(--card)}
.rvlink.due{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
.w.indeck{border-bottom:2px dotted var(--amber);border-radius:6px 6px 0 0}
#wordbox .w.indeck::before{content:"★ ";color:var(--amber)}
#wordbar{position:fixed;left:0;right:0;bottom:0;z-index:15;background:var(--card);border-top:1px solid var(--line);
  box-shadow:0 -4px 14px rgba(0,0,0,.18);padding:10px 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
#wordbar[hidden]{display:none}
#wordbar .wb-main,#wordbar .wb-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wb-word{font-size:20px}
#wordbar .btn.on{background:var(--amber-soft);color:var(--amber);border-color:var(--amber)}
body:has(#wordbar:not([hidden])) main{padding-bottom:140px}
.dueCard{display:flex;justify-content:space-between;align-items:center;gap:12px;text-decoration:none;color:inherit;border-color:var(--accent)}
.dueCard.ok{border-color:var(--green)}
.dueCard .btn,.dueCard .ghost{text-decoration:none;white-space:nowrap}
.tip{color:var(--muted)}
.rvword{font-size:34px;font-weight:700;margin:2px 0 12px}
.rvcard mark{background:var(--amber-soft);color:var(--amber);padding:0 4px;border-radius:5px;font-weight:700}
.rvcard .sent{margin-bottom:6px}
.answer{border-top:1px dashed var(--line);margin-top:14px;padding-top:12px}
.answer .gl{font-size:22px;font-weight:600;margin-bottom:8px}
.rate{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.rate .pbtn{display:flex;flex-direction:column;align-items:center;padding:10px 4px}
.rate .pbtn span{font-size:12px;color:var(--muted)}
.rate0{border-color:#dc2626!important}.rate1{border-color:var(--amber)!important}
.rate2{border-color:var(--accent)!important}.rate3{border-color:var(--green)!important}
.rvprog{margin:6px 0}
.wrow .wrow-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.w.big{font-size:22px;font-weight:600}
.small{font-size:13px}
.ghost.small{padding:3px 10px;margin-top:6px}