:root{
  --bg:#0e1216; --panel:#161c22; --panel2:#1d252d; --line:#2a343d;
  --ink:#e8eef2; --ink2:#9fb0bd; --dim:#6c7d8a;
  --accent:#e0b23a; --accent2:#3aa6b5;
  --good:#4caf78; --again:#d9534f; --easy:#3f8fd2;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; min-height:100vh;
  padding-bottom:env(safe-area-inset-bottom);
}
#topbar{
  display:flex; align-items:center; gap:10px;
  position:sticky; top:0; z-index:5;
  background:rgba(14,18,22,.92); backdrop-filter:blur(8px);
  padding:10px 12px; padding-top:calc(10px + env(safe-area-inset-top));
  border-bottom:1px solid var(--line);
}
#crumb{flex:1; font-weight:600; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.stat{font-size:13px; color:var(--ink2); font-variant-numeric:tabular-nums; white-space:nowrap}
.ghost{
  background:none; color:var(--ink); border:1px solid var(--line);
  border-radius:10px; width:40px; height:40px; font-size:18px; cursor:pointer; flex:0 0 auto;
}
.ghost:active{background:var(--panel2)}
main{max-width:760px; margin:0 auto; padding:18px 16px 40px}
h1{font-size:22px; margin:6px 0 16px}
h2{font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin:26px 0 12px}
#course-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.tile{
  background:var(--panel); border:1px solid var(--line); color:var(--ink);
  border-radius:var(--radius); padding:14px 13px; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:5px; min-height:74px;
  transition:transform .06s ease, border-color .15s;
}
.tile:active{transform:scale(.98); border-color:var(--accent)}
.tile .t-name{font-size:14px; font-weight:600; line-height:1.25}
.tile .t-meta{font-size:12px; color:var(--ink2); margin-top:auto}
.tile .t-bar{height:4px; border-radius:2px; background:var(--line); overflow:hidden; margin-top:6px}
.tile .t-bar i{display:block; height:100%; background:var(--accent2); width:0%}
.tile.big{min-height:0; padding:14px; font-weight:600; font-size:15px; text-align:center}
.quickrow{display:grid; grid-template-columns:1fr 1fr; gap:10px}
#topic-row{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  background:var(--panel); border:1px solid var(--line); color:var(--ink2);
  border-radius:999px; padding:7px 13px; font-size:13px; cursor:pointer;
}
.chip:active{color:var(--ink); border-color:var(--accent)}
.badge{
  background:var(--accent); color:#1a1400; border-radius:999px; padding:1px 8px;
  font-size:12px; font-weight:700; margin-left:6px;
}
#study-head{display:flex; align-items:center; gap:10px}
#study-title{flex:1; font-weight:600; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#progress{height:5px; background:var(--line); border-radius:3px; margin:12px 0 18px; overflow:hidden}
#progress-fill{height:100%; width:0%; background:var(--accent); border-radius:3px; transition:width .25s}
#card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 18px 30px; min-height:320px; display:flex; flex-direction:column; gap:14px;
}
.chip-top, #card-topic{align-self:flex-start}
#card-topic{
  background:var(--panel2); border:1px solid var(--line); color:var(--accent);
  border-radius:999px; padding:4px 12px; font-size:12px; letter-spacing:.05em; text-transform:uppercase;
}
#card-course{color:var(--dim); font-size:12px}
#card-q{font-size:20px; font-weight:600; line-height:1.4}
#card-a{
  font-size:17px; line-height:1.55; background:var(--panel2);
  border:1px solid var(--line); border-left:3px solid var(--accent2);
  border-radius:10px; padding:14px 15px; color:var(--ink);
  animation:slidein .18s ease;
}
#card-a .src{display:block; margin-top:12px; color:var(--dim); font-size:12px}
@keyframes slidein{from{opacity:0; transform:translateY(6px)}to{opacity:1}}
#controls{margin-top:16px; display:flex; flex-direction:column; gap:10px}
#grade-row{display:flex; gap:10px}
#grade-row .grade{flex:1}
.primary,.grade{
  border:none; border-radius:12px; padding:15px; font-size:16px; font-weight:700; cursor:pointer;
  color:#101418;
}
.primary{background:var(--accent); width:100%}
.primary:active{filter:brightness(1.08)}
.grade.again{background:var(--again); color:#fff}
.grade.good{background:var(--good); color:#08130c}
.grade.easy{background:var(--easy); color:#fff}
#study-end{text-align:center; padding:40px 10px}
#study-end p{font-size:18px; font-weight:600; margin:8px 0}
.muted{color:var(--ink2); font-weight:400; font-size:14px}
.mq .muted{margin-top:4px}