:root{
  --bg:#080b12;
  --bg2:#0d1220;
  --card:#111726;
  --card2:#0e1420;
  --border:#1e2740;
  --border2:#28324f;
  --text:#eef2fb;
  --muted:#8892ab;
  --muted2:#5c6785;
  --cyan:#4db8ff;
  --cyan-dim:#1b3a52;
  --green:#39e07b;
  --green-glow:#39ff9e;
  --red:#ff5c72;
  --amber:#ffb454;
  --primary:#5b8cff;
  --radius:16px;
  --cell: clamp(40px, 13.5vw, 62px);
  --gap: clamp(8px, 2.6vw, 18px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, #16233f55, transparent),
    radial-gradient(900px 500px at -10% 110%, #12314a44, transparent),
    var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100dvh;
  overscroll-behavior:none;
}

#app{
  max-width:520px;
  margin:0 auto;
  padding:max(12px,env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:14px;
  min-height:100dvh;
}

.hidden{display:none !important}

/* Header */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.logo{
  font-size:22px;color:var(--cyan);
  filter:drop-shadow(0 0 8px #4db8ff88);
}
.brand-title{font-weight:800;letter-spacing:.3px}
.brand-sub{font-size:12px;color:var(--muted)}
.stats{display:flex;align-items:center;gap:8px}
.stat{
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:6px 10px;text-align:center;min-width:52px;line-height:1.1;
}
.stat b{display:block;font-size:16px}
.stat span{font-size:10px;color:var(--muted)}
#statDue{color:var(--amber)}
#statNew{color:var(--cyan)}
#statLearned{color:var(--green)}
.icon-btn{
  background:var(--card);border:1px solid var(--border);color:var(--text);
  width:38px;height:38px;border-radius:12px;font-size:18px;cursor:pointer;
}
.icon-btn:active{transform:scale(.94)}

/* Settings */
.settings{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px;display:flex;flex-direction:column;gap:12px;
}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.settings-row label{color:var(--muted);font-size:14px}
.settings select{
  background:var(--bg2);border:1px solid var(--border2);color:var(--text);
  border-radius:10px;padding:8px 10px;font-size:14px;
}
.settings input[type=checkbox]{width:20px;height:20px;accent-color:var(--primary)}
.backup-btns{display:flex;gap:8px}
.backup-btns .btn{padding:8px 12px;font-size:13px}
.settings-note{font-size:12px;color:var(--muted2);line-height:1.4;border-top:1px dashed var(--border);padding-top:10px}
.settings-actions{display:flex;justify-content:space-between;gap:10px;margin-top:4px}

/* Session bar */
.session-bar{display:flex;align-items:center;gap:10px}
.session-progress{flex:1;height:8px;background:var(--card);border-radius:99px;overflow:hidden;border:1px solid var(--border)}
#sessionFill{height:100%;width:0%;background:linear-gradient(90deg,var(--cyan),var(--green));transition:width .35s ease}
.session-label{font-size:12px;color:var(--muted);white-space:nowrap}

/* Card */
.card{
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;display:flex;flex-direction:column;gap:14px;
  box-shadow:0 20px 60px -30px #000;
}

/* Prompt */
.prompt{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.prompt-top{display:flex;gap:8px;align-items:center}
.pos{font-size:11px;color:var(--muted);background:var(--bg2);border:1px solid var(--border);border-radius:99px;padding:2px 10px}
.lv{font-size:11px;color:var(--cyan);background:var(--cyan-dim);border-radius:99px;padding:2px 10px}
.meaning{font-size:clamp(20px,6.2vw,26px);font-weight:800;line-height:1.25}
.example{font-size:14px;color:var(--muted);font-style:italic;min-height:1em}
.example .blank{color:var(--cyan);letter-spacing:2px}

/* Board */
.board-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}
.trace-caption{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted2)}
.numseq{font-size:13px;color:var(--cyan);letter-spacing:1px;min-height:1.1em;text-align:center;word-spacing:2px}
.board{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,var(--cell));
  gap:var(--gap);
  padding:6px;
  touch-action:none;
  user-select:none;-webkit-user-select:none;
}
.lines{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.cell{
  width:var(--cell);height:var(--cell);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(13px,3.6vw,16px);font-weight:600;color:var(--muted);
  background:radial-gradient(circle at 50% 40%,#131a2b,#0c111c);
  border:1.5px solid var(--border2);
  transition:all .12s ease;cursor:pointer;position:relative;
}
.cell .lett{position:absolute;top:3px;right:6px;font-size:9px;color:var(--muted2);font-weight:700}
.cell.active{
  color:#fff;border-color:var(--green);
  background:radial-gradient(circle at 50% 40%,#123a26,#0c2618);
  box-shadow:0 0 14px #39e07b88, inset 0 0 10px #39e07b44;
}
.cell.target{
  color:#fff;border-color:var(--cyan);
  box-shadow:0 0 14px #4db8ff88, inset 0 0 10px #4db8ff44;
}
.cell.press{transform:scale(1.12)}

/* Input */
.input-row{display:flex;gap:8px}
#answer{
  flex:1;background:var(--bg2);border:1.5px solid var(--border2);color:var(--text);
  border-radius:12px;padding:14px 14px;font-size:17px;letter-spacing:.5px;
  outline:none;transition:border-color .15s;
}
#answer:focus{border-color:var(--primary)}
#answer.ok{border-color:var(--green)}
#answer.bad{border-color:var(--red)}

/* Buttons */
.btn{
  border:1px solid var(--border2);background:var(--card);color:var(--text);
  border-radius:12px;padding:13px 16px;font-size:15px;font-weight:700;cursor:pointer;
  transition:transform .08s, background .15s, border-color .15s;
}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(180deg,#5b8cff,#3d6fe6);border-color:#5b8cff;color:#fff;box-shadow:0 8px 24px -10px #3d6fe6}
.btn.ghost{background:transparent}
.btn.danger{color:var(--red);border-color:#5a2330}
.btn.audio{background:var(--bg2);align-self:center;padding:9px 16px;font-size:14px;border-radius:99px}
.actions{display:flex;gap:10px}
.actions .btn{flex:1}
.actions .primary{flex:1.3}

/* Feedback */
.feedback{border-radius:12px;padding:12px 14px;font-weight:700;text-align:center}
.feedback.good{background:#0f2e1e;border:1px solid #1e6b45;color:var(--green-glow)}
.feedback.bad{background:#2e1218;border:1px solid #6b2130;color:#ff8a9a}
.feedback .correct{font-size:22px;font-weight:800;letter-spacing:1px;color:#fff;display:block;margin-top:4px}
.feedback .hanviet{font-size:13px;color:var(--muted);font-weight:500}

/* Grades */
.grades{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.grade{
  display:flex;flex-direction:column;gap:2px;align-items:center;
  border:1px solid var(--border2);background:var(--card);color:var(--text);
  border-radius:12px;padding:10px 4px;cursor:pointer;transition:transform .08s;
}
.grade:active{transform:scale(.96)}
.grade b{font-size:14px}
.grade span{font-size:10px;color:var(--muted)}
.grade.again{border-color:#5a2330}.grade.again b{color:var(--red)}
.grade.hard{border-color:#5a4a23}.grade.hard b{color:var(--amber)}
.grade.good{border-color:#23405a}.grade.good b{color:var(--cyan)}
.grade.easy{border-color:#235a3a}.grade.easy b{color:var(--green)}

/* Done */
.done{text-align:center;padding:30px 10px;display:flex;flex-direction:column;gap:12px;align-items:center}
.done-emoji{font-size:52px}
.done h2{margin:0}
.done p{color:var(--muted);margin:0}

.foot{text-align:center;font-size:12px;color:var(--muted2);margin-top:auto;padding-top:6px}

/* Larger screens */
@media(min-width:560px){
  :root{--cell:60px;--gap:16px}
}