:root{
  --bg:#f4f5fb; --panel:#ffffff; --panel2:#eef0f8; --ink:#141a2e; --muted:#667085;
  --line:#e3e6f0; --accent:#4f46e5; --accent2:#0ea5a4; --accent-ink:#fff;
  --card:#ffffff; --card-ink:#131a30;
  --g1:#dc2626; --g2:#ea7c28; --g3:#16a34a; --g4:#2563eb;
  --shadow:0 18px 50px -18px rgba(40,45,110,.35);
  --radius:20px;
}
[data-theme="dark"]{
  --bg:#0a0f22; --panel:#131a33; --panel2:#0e1430; --ink:#e8ecf8; --muted:#98a2c0;
  --line:#232c52; --accent:#7c7cf4; --accent2:#2dd4bf;
  --card:#162046; --card-ink:#eef1ff;
  --shadow:0 22px 60px -18px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
kbd{font:600 .68rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--panel2);
  border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:2px 6px;color:var(--muted)}
.muted{color:var(--muted)} .small{font-size:.8rem} .center{text-align:center} .spacer{flex:1}
.only-mobile{display:none!important}

#app{max-width:1240px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;padding:14px 18px 8px}
.brand{display:flex;align-items:center;gap:10px;min-width:max-content}
.logo{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:#fff;font-size:22px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:var(--shadow)}
.brandtxt{display:flex;flex-direction:column;line-height:1.15}
.brandtxt strong{font-size:1.02rem;letter-spacing:-.01em}
.brandtxt span{font-size:.75rem;color:var(--muted)}
.search{flex:1;display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:8px 10px;max-width:420px;margin-left:8px}
.search input{flex:1;border:0;outline:0;background:transparent;color:var(--ink);font-size:.92rem;min-width:0}
.topactions{margin-left:auto;display:flex;gap:8px;align-items:center}
.iconbtn{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:11px;
  min-width:38px;height:38px;font-size:1.05rem;cursor:pointer}
.iconbtn:hover{border-color:var(--accent)}
.iconbtn.on{border-color:var(--accent);color:var(--accent)}
:fullscreen #app{max-width:none;padding:0 12px}
:fullscreen .topbar,:fullscreen .progressline,:fullscreen #sidebar,
:fullscreen .studymeta,:fullscreen .controls,
:fullscreen .kbdline,:fullscreen #swipeHint,:fullscreen .sidebtn{display:none!important}
.fsnav{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;gap:14px}
.fsnav button{width:68px;height:68px;border-radius:22px;font-size:2.2rem;line-height:1;cursor:pointer;
  border:1px solid var(--line);color:var(--ink);
  background:color-mix(in srgb,var(--panel) 88%,transparent);opacity:.8;box-shadow:var(--shadow)}
.fsnav button:hover{opacity:1;border-color:var(--accent)}
:fullscreen .grades{margin:14px 0 0}
:fullscreen .layout{display:block;width:100%;padding:18px 8px;max-width:960px;margin:0 auto}
:fullscreen .cardwrap{display:block}
:fullscreen .inner{min-height:82dvh}
:fullscreen .face{padding:34px 38px}
:fullscreen body{background:var(--bg)}
.fsexit{position:fixed;top:14px;right:14px;z-index:60;width:40px;height:40px;border-radius:12px;
  border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 82%,transparent);
  color:var(--muted);font-size:1rem;cursor:pointer;opacity:.55}
.fsexit:hover{opacity:1;color:var(--ink)}
.pillbtn{border:0;cursor:pointer;border-radius:11px;padding:0 14px;height:38px;font-weight:650;font-size:.88rem;
  color:var(--accent-ink);background:linear-gradient(135deg,var(--accent),var(--accent2))}
.btn{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:12px;
  padding:10px 16px;font-size:.9rem;font-weight:600;cursor:pointer}
.btn:hover{border-color:var(--accent)} .btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:0}
.btn.danger{color:var(--g1);border-color:color-mix(in srgb,var(--g1) 45%,transparent)}
.btn.file{cursor:pointer}
.btn:focus-visible,.iconbtn:focus-visible{outline:3px solid var(--accent2);outline-offset:2px}
.card:focus{outline:none}
.card:focus-visible{outline:none}
.ghostbtn{background:none;border:0;color:var(--muted);cursor:pointer;font-size:.82rem;padding:6px}
.ghostbtn:hover{color:var(--accent)}

.progressline{height:5px;background:var(--panel2);margin:6px 18px 0;border-radius:99px;overflow:hidden}
.progressline #bar{height:100%;width:0;border-radius:99px;transition:width .35s ease;
  background:linear-gradient(90deg,var(--accent),var(--accent2))}

.layout{flex:1;display:grid;grid-template-columns:300px 1fr;gap:18px;padding:14px 18px 30px;align-items:start}
#sidebar{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;
  position:sticky;top:12px;max-height:calc(100dvh - 130px);overflow:auto}
.sidehead{display:flex;align-items:center;justify-content:space-between;margin:12px 2px 8px}
.sidehead:first-child{margin-top:0}
.sidehead strong{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.decknav,.topicnav{display:flex;flex-direction:column;gap:6px}
.deckbtn,.topicbtn{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  border:1px solid transparent;background:transparent;color:var(--ink);border-radius:12px;padding:9px 10px;font-size:.88rem}
.deckbtn:hover,.topicbtn:hover{background:var(--panel2)}
.deckbtn.active,.topicbtn.active{background:var(--panel2);border-color:var(--accent)}
.deckbtn .n,.topicbtn .n{margin-left:auto;font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.dot{width:10px;height:10px;border-radius:99px;flex:none}
.tbar{height:4px;border-radius:99px;background:var(--panel2);margin-top:5px;overflow:hidden}
.tbar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.twrap{flex:1;min-width:0}
.twrap .tname{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opts{display:flex;flex-direction:column;gap:10px;padding:4px 2px}
.switch{display:flex;align-items:center;gap:9px;font-size:.87rem;cursor:pointer}
.switch input{width:17px;height:17px;accent-color:var(--accent)}
.switch kbd{margin-left:auto}

#study{min-width:0}
.studymeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 2px 12px;font-size:.83rem}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:5px 12px;font-weight:650}
#streakChip{background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:5px 12px}

.cardwrap{display:flex;align-items:stretch;gap:10px}
.sidebtn{flex:none;width:44px;border-radius:16px;border:1px solid var(--line);background:var(--panel);
  color:var(--muted);font-size:1.8rem;cursor:pointer}
.sidebtn:hover{color:var(--accent);border-color:var(--accent)}
.card{flex:1;perspective:1600px;cursor:pointer;min-width:0;touch-action:pan-y}
.inner{position:relative;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.7,.25,1.1);min-height:380px}
.card.flipped .inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--card);color:var(--card-ink);border:1px solid var(--line);border-radius:24px;
  box-shadow:var(--shadow);padding:26px 30px;overflow:auto}
.face.back{transform:rotateY(180deg)}
.face p#front{font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.55;font-weight:600;letter-spacing:-.01em;margin:18px 0}
.face .hint{color:var(--muted);font-size:.8rem}
.face #back{font-size:clamp(1rem,2vw,1.15rem);line-height:1.65;user-select:text;-webkit-user-select:text}
.face p#front{user-select:text;-webkit-user-select:text}
.face #back small{color:var(--muted)}
.facerow{display:flex;align-items:center;gap:10px;justify-content:space-between}
.kind{font-size:.7rem;font-weight:800;letter-spacing:.12em;color:var(--accent)}
.kind.answered{color:var(--accent2)}
.diff{font-size:.72rem;font-weight:700;color:#b45309;background:#fef3c7;border-radius:99px;padding:3px 10px}
[data-theme="dark"] .diff{color:#fcd34d;background:#3a2a08}
.source{margin-top:16px;padding-top:12px;border-top:1px dashed var(--line);color:var(--muted);font-size:.78rem}
.card.slideL .inner{animation:slideL .22s ease}
.card.slideR .inner{animation:slideR .22s ease}
@keyframes slideL{from{transform:translateX(46px);opacity:.4}to{transform:none;opacity:1}}
@keyframes slideR{from{transform:translateX(-46px);opacity:.4}to{transform:none;opacity:1}}

.grades{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 54px 0}
.grade{border:0;border-radius:14px;padding:12px 8px;color:#fff;cursor:pointer;display:flex;flex-direction:column;gap:4px;align-items:center}
.grade b{font-size:.92rem} .grade kbd{background:rgba(255,255,255,.22);border:0;color:#fff}
.g1{background:var(--g1)} .g2{background:var(--g2)} .g3{background:var(--g3)} .g4{background:var(--g4)}
.grade:hover{filter:brightness(1.08)}
.controls{display:flex;gap:10px;justify-content:center;margin:14px 0 6px;flex-wrap:wrap}
.controls .btn{min-width:104px;min-height:46px}
#starBtn.starred{color:#b45309;border-color:#eab308}
.kbdline{margin:8px 0 0}

.modal{position:fixed;inset:0;background:rgba(8,10,25,.55);backdrop-filter:blur(3px);display:grid;
  place-items:center;padding:18px;z-index:50}
.modal[hidden]{display:none}
.sheet{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:22px;
  width:min(860px,100%);max-height:88dvh;overflow:auto;padding:22px 24px;box-shadow:var(--shadow)}
.sheet.narrow{width:min(520px,100%)}
.sheethead{display:flex;align-items:center;justify-content:space-between}
.sheethead h2{margin:0;font-size:1.15rem}
.sheet h3{margin:20px 0 10px;font-size:.85rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.statcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:12px}
.stat{background:var(--panel2);border-radius:14px;padding:12px}
.stat b{font-size:1.3rem;display:block;font-variant-numeric:tabular-nums}
.stat span{font-size:.75rem;color:var(--muted)}
.chart{display:flex;align-items:flex-end;gap:6px;height:120px;padding:8px 4px 0}
.chart .bcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.chart .bcol i{width:100%;max-width:34px;border-radius:6px 6px 2px 2px;min-height:3px;
  background:linear-gradient(180deg,var(--accent),var(--accent2))}
.chart .bcol span{font-size:.62rem;color:var(--muted)}
#topicTable{display:flex;flex-direction:column;gap:8px}
.trow{display:grid;grid-template-columns:1fr auto;gap:3px 10px;font-size:.84rem;background:var(--panel2);
  border-radius:12px;padding:9px 12px}
.trow .tbar{grid-column:1/-1}
.trow b{font-variant-numeric:tabular-nums}
.logtable{display:flex;flex-direction:column;gap:6px;font-size:.84rem}
.lrow{display:flex;gap:12px;background:var(--panel2);border-radius:10px;padding:8px 12px;font-variant-numeric:tabular-nums}
.lrow span:last-child{margin-left:auto;color:var(--muted)}
.sheetrow{display:flex;gap:10px;margin-top:18px;align-items:center;flex-wrap:wrap}
.keys{width:100%;border-collapse:collapse;font-size:.88rem}
.keys td{padding:7px 4px;border-bottom:1px solid var(--line)}
.keys td:first-child{white-space:nowrap;width:46%}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--ink);
  color:var(--bg);padding:11px 18px;border-radius:12px;font-size:.87rem;opacity:0;pointer-events:none;
  transition:all .25s ease;z-index:99;max-width:88vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%)}

#backdrop{position:fixed;inset:0;background:rgba(8,10,25,.5);z-index:30}
#backdrop[hidden]{display:none}

@media (max-width:900px){
  .only-mobile{display:inline-flex!important}
  p.only-mobile{display:block!important}
  .layout{grid-template-columns:1fr;padding:10px 12px 26px}
  #sidebar{position:fixed;inset:0 auto 0 0;width:min(330px,88vw);z-index:40;border-radius:0 20px 20px 0;
    transform:translateX(-105%);transition:transform .25s ease;max-height:none}
  body.sideopen #sidebar{transform:none}
  .sidebtn{display:none}
  .topbar{flex-wrap:wrap}
  .search{order:3;flex-basis:100%;max-width:none;margin-left:0}
  .inner{min-height:46dvh}
  .face{padding:20px}
  .grades{margin:12px 0 0}
  .controls .btn{flex:1;min-width:0}
  .kbdline{display:none}
  #statsBtn span{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}