:root{
  --bg:#FBF9F5; --card:#FFFFFF; --ink:#241F1A; --muted:#68625A; --line:#E7E1D6; --accent:#2F5D50; --accent-ink:#FFFFFF;
  --soft:#E9F0EC; --again:#B4443A; --hard:#A8742A; --good:#2F5D50; --easy:#3D6FA3; --shadow:0 1px 2px rgba(36,31,26,.06),0 6px 20px rgba(36,31,26,.07);
  --serif:'Iowan Old Style',Charter,Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',system-ui,sans-serif;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#1D1B19;--card:#262320;--ink:#F1ECE1;--muted:#A19B90;--line:#38342F;--accent:#7FB3A1;--accent-ink:#10231D;--soft:#26332E;--again:#E27D72;--hard:#D9A55A;--good:#7FB3A1;--easy:#7FA8D6;--shadow:none}
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.45 var(--sans);-webkit-text-size-adjust:100%}
body{min-height:100dvh;overscroll-behavior-y:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.2;margin:0}
.wrap{max-width:560px;margin:0 auto;padding:calc(var(--sat) + 14px) 16px calc(var(--sab) + 28px)}
.top{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin-bottom:6px}
.brand{font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:-.01em}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border:0;background:none;border-radius:12px;color:var(--ink)}
.icon-btn:active{background:var(--soft)}
.icon-btn svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pill{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;min-height:44px;border:0;background:none;padding:0 4px}
.workspace-link{text-decoration:none;font-weight:650;color:var(--accent)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.dot.ok{background:var(--good)} .dot.warn{background:var(--hard)}
.hero{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px 20px;box-shadow:var(--shadow);margin:8px 0 22px}
.hero .big{font-family:var(--serif);font-size:56px;line-height:1;font-weight:600;letter-spacing:-.02em}
.hero .sub{color:var(--muted);margin:6px 0 18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:14px;border:1px solid var(--line);background:var(--card);font-weight:600}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.block{display:flex;width:100%}
.btn.danger{color:var(--again)}
.btn:disabled{opacity:.5}
.btn:active{transform:scale(.99)}
.h2row{display:flex;align-items:center;justify-content:space-between;margin:18px 0 8px}
.h2row h2{font-size:20px}
.list{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.row{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:10px 16px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left}
.row:last-child{border-bottom:0}
.row:active{background:var(--soft)}
.row .t{flex:1;min-width:0}
.row .t b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .t small{color:var(--muted);font-size:14px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{min-width:28px;height:28px;padding:0 9px;border-radius:14px;background:var(--soft);color:var(--accent);font-weight:700;font-size:14px;display:inline-grid;place-items:center}
.badge.zero{background:none;color:var(--muted);font-weight:500}
.empty{color:var(--muted);text-align:center;padding:28px 12px}
.note{color:var(--muted);font-size:14px;margin:8px 2px}
.banner{background:var(--soft);border-radius:14px;padding:12px 14px;margin:6px 0 14px;font-size:15px}
.banner button{margin-top:8px}
.beta{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--soft);color:var(--accent);border-radius:6px;padding:2px 6px;margin-left:6px;vertical-align:2px}
/* review */
.rv{display:flex;flex-direction:column;min-height:100dvh;padding:calc(var(--sat) + 8px) 16px calc(var(--sab) + 16px);max-width:560px;margin:0 auto}
.rv-top{display:flex;align-items:center;gap:8px}
.bar{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);width:0;transition:width .25s}
.rv-n{font-size:13px;color:var(--muted);min-width:44px;text-align:right}
/* flip pad: question above the binding, answer below, binding exactly at screen centre */
:root{--bind:#D2CBBE}
@media (prefers-color-scheme:dark){:root{--bind:#4C4741}}
.pad{position:fixed;left:16px;right:16px;top:calc(var(--sat) + 62px);bottom:calc(var(--sab) + 156px);max-width:528px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden;touch-action:pan-y;transition:transform .18s,opacity .18s;user-select:none;-webkit-user-select:none}
.half{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;padding:26px 22px;text-align:center}
.half.up{top:0;bottom:calc(100% - (50dvh - var(--sat) - 62px))}
.half.down{top:calc(50dvh - var(--sat) - 62px);bottom:0;perspective:600px}
.txt{font-family:var(--serif);font-size:25px;line-height:1.35;white-space:pre-wrap;overflow-wrap:anywhere;max-height:100%;overflow:auto}
.txt.small{font-size:19px}
.flipin{transform-origin:top center;animation:flipin .28s ease-out}
@keyframes flipin{from{transform:rotateX(-80deg);opacity:0}to{transform:none;opacity:1}}
.hint{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.binding{position:absolute;left:0;right:0;top:calc(50dvh - var(--sat) - 62px);transform:translateY(-50%);display:flex;justify-content:center;gap:14px;pointer-events:none;height:10px;align-items:center}
.binding::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--line)}
.binding i{position:relative;width:20px;height:10px;border-radius:4px;background:var(--bind)}
.rv-ctl{position:fixed;left:16px;right:16px;bottom:calc(var(--sab) + 10px);max-width:528px;margin:0 auto}
@media (max-height:640px){.rv-ctl .g{min-height:54px}}
.tag{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center}
.grades{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.g{min-height:64px;border-radius:14px;border:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:700}
.g small{font-weight:500;color:var(--muted);font-size:12px}
.g[data-g="0"]{color:var(--again)} .g[data-g="1"]{color:var(--hard)} .g[data-g="2"]{color:var(--good)} .g[data-g="3"]{color:var(--easy)}
.g:active{background:var(--soft)}
.show{min-height:64px}
.rv-actions{display:flex;justify-content:space-between;margin-top:8px}
.linkbtn{background:none;border:0;color:var(--muted);min-height:44px;padding:0 8px;font-size:15px}
/* sheet */
.scrim{position:fixed;inset:0;background:rgba(20,16,12,.45);z-index:20;animation:fade .15s}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:21;background:var(--bg);border-radius:22px 22px 0 0;max-height:92dvh;overflow:auto;padding:16px 16px calc(var(--sab) + 18px);max-width:560px;margin:0 auto;animation:up .2s}
.sheet h3{font-size:21px;margin:2px 0 12px}
.field{display:block;margin:0 0 12px}
.field span{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
.in{width:100%;min-height:50px;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:12px 14px}
textarea.in{min-height:96px;resize:vertical;line-height:1.4}
.btnrow{display:flex;gap:10px;margin-top:6px}
.btnrow .btn{flex:1}
.pv{display:flex;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line);align-items:flex-start}
.pv input{width:22px;height:22px;margin-top:3px;accent-color:var(--accent)}
.pv div{flex:1;min-width:0} .pv b{display:block;font-weight:600} .pv span{color:var(--muted);font-size:15px}
.toast{position:fixed;left:50%;bottom:calc(var(--sab) + 22px);transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;z-index:40;font-size:15px;max-width:90vw}
.cardrow .t b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@keyframes fade{from{opacity:0}to{opacity:1}} @keyframes up{from{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}