:root{
  --bg:#f1ebe2; --card:#fffdf8; --ink:#1b1b1b; --sub:#6b665e; --line:#1b1b1b;
  --accent:#f2b705; --purple:#7c4dff; --soft:#e6ded2; --red:#d62d2d;
  font-family:-apple-system,"Sukhumvit Set","Thonburi","Noto Sans Thai",system-ui,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#1a1916; --card:#262420; --ink:#f3efe7; --sub:#aaa398; --line:#f3efe7; --soft:#3a3731; }
}
html{height:100%; scroll-padding-top:env(safe-area-inset-top,0px);}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
body{margin:0; min-height:100%; background:var(--bg); color:var(--ink);}
button{font:inherit; color:inherit;}
header{position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:var(--bg);
  padding:14px 16px 12px; border-bottom:2px solid var(--line); display:flex; align-items:center; gap:10px;}
header h1{font-size:18px; margin:0; flex:1; font-weight:700;}
.net{font-size:12px; color:var(--sub);}
.back{background:none; border:2px solid var(--line); border-radius:8px; padding:4px 12px; font-size:15px;}
main{padding:16px 14px 60px; max-width:860px; margin:0 auto;}
.hint{font-size:13px; color:var(--sub); margin:0 0 14px;}
.sect{font-size:13px; font-weight:700; color:var(--sub); margin:22px 0 10px; letter-spacing:.02em;}
.card{background:var(--card); border:2px solid var(--line); box-shadow:5px 5px 0 var(--accent);
  padding:14px; margin-bottom:14px; display:flex; align-items:center; gap:12px; cursor:pointer;}
.card h3{margin:0 0 3px; font-size:15.5px;}
.card .sub{font-size:12px; color:var(--sub);}
.card .info{flex:1; min-width:0;}
.card.empty{opacity:.45; box-shadow:5px 5px 0 var(--soft);}
.card.review{box-shadow:5px 5px 0 var(--red);}
.count{font-family:ui-monospace,Menlo,monospace; background:var(--ink); color:var(--bg); padding:3px 9px; font-size:12px; white-space:nowrap;}
.count.red{background:var(--red); color:#fff;}
.btn{border:2px solid var(--line); background:var(--card); font-size:13px; padding:6px 11px; cursor:pointer;}
.btn.dark{background:var(--ink); color:var(--bg);}
.btn:disabled{opacity:.35;}
/* popup */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; z-index:20;}
.overlay.show{display:block;}
.modal{position:absolute; inset:0; top:calc(12px + env(safe-area-inset-top,0px)); background:var(--bg);
  border-top:2px solid var(--line); overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:0 12px calc(50px + env(safe-area-inset-bottom,0px));}
.mtop{position:sticky; top:0; background:var(--bg); z-index:3; border-bottom:2px solid var(--line); margin:0 -12px 16px; padding:0 12px;}
.mhead{padding:12px 0 8px; display:flex; gap:8px; align-items:center;}
.mhead h2{flex:1; margin:0; font-size:16px;}
.chips{display:flex; gap:6px; overflow-x:auto; padding-bottom:10px;}
.chip{flex:none; border:2px solid var(--line); background:var(--card); padding:4px 10px; font-size:12.5px;}
.chip.on{background:var(--ink); color:var(--bg);}
/* toolbar */
.tools{display:flex; gap:6px; align-items:center; overflow-x:auto; padding:0 0 10px; scrollbar-width:none;}
.tools::-webkit-scrollbar{display:none;}
.tb{flex:none; min-width:38px; height:38px; border:2px solid var(--line); background:var(--card);
  font-size:16px; display:flex; align-items:center; justify-content:center; padding:0 8px;}
.tb.on{background:var(--ink); color:var(--bg);}
.sep{flex:none; width:2px; height:26px; background:var(--soft); margin:0 2px;}
.sw{flex:none; width:30px; height:30px; border-radius:50%; border:3px solid transparent; outline:2px solid var(--line); padding:0;}
.sw.on{border-color:var(--bg); outline:3px solid var(--accent);}
.sz{flex:none; width:34px; height:34px; border:2px solid var(--line); background:var(--card); display:flex; align-items:center; justify-content:center; padding:0;}
.sz i{display:block; border-radius:50%; background:var(--ink);}
.sz.on{background:var(--accent);}
.timer{flex:none; font-family:ui-monospace,Menlo,monospace; font-size:15px; min-width:62px; text-align:center;}
/* question */
.q{background:var(--card); border:2px solid var(--line); box-shadow:6px 6px 0 var(--accent); margin:0 4px 26px 0;}
.q.hasWrong{box-shadow:6px 6px 0 var(--red);}
.qbar{display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:10px 10px 0;}
.tag{font-size:11.5px; font-weight:600; border:1.5px solid var(--line); padding:3px 8px; display:inline-flex; align-items:center; gap:5px;}
.tag.code{background:var(--ink); color:var(--bg); font-family:ui-monospace,Menlo,monospace; border-color:var(--ink);}
.tag.ch{border-style:dashed;}
.tag .dot{width:9px; height:9px; background:var(--purple); display:inline-block;}
.wb{font-size:12px; font-weight:700; background:var(--red); color:#fff; padding:3px 8px; display:none;}
.wb.show{display:inline-block;}
.spacer{flex:1;}
.paper{position:relative; margin-top:10px; background:#fff; border-top:1.5px solid var(--soft); user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;}
.paper img{display:block; width:100%; height:auto; pointer-events:none; min-height:80px;}
.scratch{height:0; padding-bottom:75%; border-top:1.5px dashed #cfc6b8;
  background-image:radial-gradient(#d9d2c6 1px, transparent 1.2px); background-size:22px 22px; position:relative;}
.scratch span{position:absolute; top:6px; left:10px; font-size:11px; color:#a39a8c;}
.paper canvas{position:absolute; inset:0; width:100%; height:100%; touch-action:pan-y pinch-zoom;}
body.finger .paper canvas{touch-action:none;}
.qfoot{display:flex; flex-wrap:wrap; gap:6px; padding:10px; border-top:1.5px solid var(--soft); align-items:center;}
.qfoot .btn{padding:5px 10px;}
.wrong{display:flex; align-items:center; border:2px solid var(--red);}
.wrong button{border:none; background:none; width:34px; height:32px; font-size:18px; color:var(--red);}
.wrong span{font-size:12.5px; font-weight:600; color:var(--red); padding:0 4px; min-width:84px; text-align:center;}
.ans{display:none; border-top:2px dashed var(--line); padding:10px;}
.ans.show{display:block;}
.ans .key{font-weight:700; font-size:15px; margin-bottom:8px;}
.ans .key span{background:var(--accent); color:#1b1b1b; padding:2px 8px;}
.ans img{width:100%; height:auto; display:block; border:1.5px solid var(--soft); background:#fff;}
.done{background:var(--accent)!important; color:#1b1b1b!important;}
/* settings */
.row{display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1.5px solid var(--soft);}
.row .info{flex:1;}
.row b{font-size:14px;} .row small{display:block; color:var(--sub); font-size:12px;}
/* sheet */
.sheet{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:40; display:none; align-items:flex-end; justify-content:center;}
.sheet.show{display:flex;}
.sheet .box{background:var(--bg); border:2px solid var(--line); border-bottom:none; width:100%; max-width:520px; padding:18px 16px calc(22px + env(safe-area-inset-bottom,0px));}
.sheet h3{margin:0 0 4px; font-size:16px;}
.sheet p{margin:0 0 14px; font-size:12.5px; color:var(--sub);}
.sheet .opt{display:block; width:100%; text-align:left; margin-bottom:10px; padding:12px; box-shadow:4px 4px 0 var(--accent);}
.sheet .opt b{display:block; font-size:14px;}
.sheet .opt small{color:var(--sub);}
.toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%);
  background:var(--ink); color:var(--bg); padding:10px 16px; font-size:13px; z-index:60; display:none; max-width:90vw; text-align:center;}
.toast.show{display:block;}