:root{
  --bg:#f7f5f2; --surface:#ffffff; --surface-2:#f0eee9; --border:#e2ddd3;
  --text:#2b2a28; --text-dim:#6b675f; --accent:#3d6b5c; --accent-2:#a8763e;
  --good:#3d7a4a; --warn:#b3591f; --bad:#b3402f; --radius:14px;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1b1a18; --surface:#242220; --surface-2:#2c2a27; --border:#3a3733;
    --text:#eeece7; --text-dim:#a8a39a; --accent:#7fb89e; --accent-2:#d9a866;
    --good:#7fc48c; --warn:#e0a565; --bad:#e08a7a;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 20px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#1b1a18; --surface:#242220; --surface-2:#2c2a27; --border:#3a3733;
  --text:#eeece7; --text-dim:#a8a39a; --accent:#7fb89e; --accent-2:#d9a866;
  --good:#7fc48c; --warn:#e0a565; --bad:#e08a7a;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 20px rgba(0,0,0,.35);
}
*{box-sizing:border-box;}
body{background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
#app{max-width:900px; margin:0 auto; padding:20px 16px 60px; padding-block:24px 60px;}
h1,h2,h3{line-height:1.25; margin:0 0 8px;}
h1{font-size:1.5rem;} h2{font-size:1.2rem;} h3{font-size:1.02rem;}
p{line-height:1.55; margin:0 0 10px;}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin-bottom:16px; box-shadow:var(--shadow);}
.muted{color:var(--text-dim); font-size:.92rem;}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.row.between{justify-content:space-between;}
button{font:inherit; cursor:pointer; border-radius:10px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); padding:10px 16px; transition:transform .05s ease;}
button:active{transform:scale(.98);}
button.primary{background:var(--accent); border-color:var(--accent); color:#fff;}
button.ghost{background:transparent;}
button.small{padding:6px 10px; font-size:.85rem;}
button:disabled{opacity:.45; cursor:not-allowed;}
input[type=text],input[type=number],textarea,select{
  font:inherit; padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); width:100%;
}
textarea{min-height:70px; resize:vertical;}
.pill{display:inline-block; padding:3px 10px; border-radius:999px; background:var(--surface-2); font-size:.78rem; color:var(--text-dim); border:1px solid var(--border);}
.pill.level{background:var(--accent); color:#fff; border-color:var(--accent);}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px;}
.lesson-tile{border:1px solid var(--border); border-radius:12px; padding:14px; background:var(--surface); cursor:pointer;}
.lesson-tile:hover{border-color:var(--accent);}
.lesson-tile.done{border-color:var(--good);}
.lesson-tile.locked{opacity:.5; cursor:default;}
.vocab-item{display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--border);}
.vocab-item:last-child{border-bottom:none;}
.vocab-en{font-weight:600;}
.progress-bar{height:8px; background:var(--surface-2); border-radius:999px; overflow:hidden;}
.progress-bar > div{height:100%; background:var(--accent);}
.tabbar{display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap;}
.tabbar button{flex:0 0 auto;}
.tabbar button.active{background:var(--accent); color:#fff; border-color:var(--accent);}
.quiz-q{margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--border);}
.quiz-q:last-child{border:none;}
.opt{display:block; width:100%; text-align:left; margin-bottom:6px;}
.opt.correct{border-color:var(--good); background:color-mix(in srgb, var(--good) 18%, var(--surface));}
.opt.wrong{border-color:var(--bad); background:color-mix(in srgb, var(--bad) 18%, var(--surface));}
.dialogue-line{margin-bottom:10px; padding:10px 12px; border-radius:10px; background:var(--surface-2);}
.dialogue-line.you{background:color-mix(in srgb, var(--accent) 14%, var(--surface));}
.tag-row{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border);}
.tag-row:last-child{border:none;}
.badge-weak{color:var(--bad);} .badge-mid{color:var(--warn);} .badge-good{color:var(--good);}
a.link{color:var(--accent); cursor:pointer; text-decoration:underline;}
.top-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; gap:10px; flex-wrap:wrap;}
.spacer{flex:1;}
.note{font-size:.85rem; color:var(--text-dim); background:var(--surface-2); border-radius:10px; padding:10px 12px; margin-top:10px;}
.locked-mod{padding:10px; border-radius:10px; background:var(--surface-2); margin-bottom:6px; font-size:.9rem;}