:root{color-scheme:light dark;font-family:system-ui,sans-serif;background:light-dark(#f2f4f0,#151b18);color:light-dark(#17372e,#e8f1ec);
  --line:light-dark(#cbd8ce,#53665a);--soft:light-dark(#e3ebe4,#283c31);--panel:light-dark(#fff,#24342b);--on:light-dark(#d5e5d9,#385943);--row:light-dark(#dbe2dc,#405046);--bg:light-dark(#f2f4f0,#151b18)}
*{box-sizing:border-box}
body{margin:0;padding:36px 20px}
main{max-width:760px;margin:auto}
h1{font-size:24px;font-weight:600;margin:0}
h2{font-size:18px;margin:0}
.sub{opacity:.75;font-size:14px}
button,select,input{font:inherit}
button:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #b9974f;outline-offset:3px}
header.top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn,.actions select{background:none;color:inherit;border:1px solid var(--line);border-radius:9px;padding:8px 12px;cursor:pointer}
.btn.primary{background:var(--soft)}
.btn:disabled{opacity:.5;cursor:default}
.btn.danger{border-color:#b55}
select{background:var(--panel);color:inherit;border:1px solid var(--line);border-radius:8px;padding:7px 8px}
input[type=text],input[type=password],input[type=number]{display:block;width:100%;color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px;margin-top:5px}

/* review panel */
.scene{perspective:1200px;margin:20px 0 22px;position:relative}
.card-tools{position:absolute;top:12px;right:16px;z-index:1;font-size:12px;display:flex;gap:6px;align-items:center;opacity:.85}
.card-tools select{font-size:12px;padding:3px 6px}
.front-pick{font-size:13px;display:flex;gap:6px;align-items:center}
.front-pick select{font-size:13px;padding:4px 6px}
#card{width:100%;height:330px;background:var(--panel);border:0;border-radius:24px;box-shadow:0 12px 32px #0001;padding:32px;cursor:pointer;color:inherit;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
#card.turn{animation:turn .3s ease}
@keyframes turn{from{transform:rotateY(90deg);opacity:.3}to{transform:none;opacity:1}}
.stack-tag{font-size:12px;opacity:.55;margin-bottom:6px}
.label{text-transform:uppercase;letter-spacing:2px;font-size:12px;opacity:.65;margin-bottom:24px}
.word{font-size:clamp(26px,6vw,46px);overflow-wrap:anywhere}
.word.empty{opacity:.35}
.hint{font-size:13px;opacity:.6;margin-top:28px}
.dots{display:flex;gap:6px;margin-top:14px}
.dots i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.2}
.dots i.seen{opacity:.7}
.ratings{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rating{border:1px solid var(--line);border-radius:16px;background:var(--soft);color:inherit;padding:16px 8px;cursor:pointer}
.rating strong{display:block;font-size:24px;margin-bottom:5px}
.rating span{font-size:13px}
.rating:disabled{opacity:.4;cursor:default}
#status{min-height:24px;margin-top:18px;font-size:14px}
.footer{font-size:13px;line-height:1.6;opacity:.8;margin-top:12px}
#empty{padding:50px 20px;text-align:center;border:1px dashed var(--line);border-radius:24px;margin:20px 0}
#empty .btn{margin:4px}

/* stacks */
#stacks-head{display:flex;justify-content:space-between;align-items:center;margin:36px 0 12px}
.stack{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;background:var(--panel)}
.stack.picked{border-color:#b9974f}
.stack-head{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:14px 16px}
.pick{display:flex;gap:10px;align-items:center;font-weight:600;flex:1 1 200px;cursor:pointer}
.pick input{width:18px;height:18px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:12px;border:1px solid var(--line);border-radius:99px;padding:2px 9px;opacity:.85}
.counts{font-size:13px;opacity:.8}
.stack-body{border-top:1px solid var(--line);padding:16px}
.stack-body section{margin-bottom:24px}
.stack-body h3{margin:0 0 10px;font-size:15px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label.field{display:block;margin-bottom:12px;font-size:14px}
.siderow{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.siderow input{margin:0}
.table-wrap{overflow:auto;max-height:480px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px;border-bottom:1px solid var(--row);overflow-wrap:anywhere}
th{position:sticky;top:0;background:var(--bg)}
tr.suspended td.t{opacity:.45}
.icon{background:none;border:0;color:inherit;cursor:pointer;min-width:40px;min-height:40px;display:inline-grid;place-items:center}
.icon:disabled{opacity:.3;cursor:default}
.icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.note{font-size:13px;opacity:.75}
.msg{font-size:13px;min-height:20px}
.msg.err{color:#c44}
[hidden]{display:none!important}

/* login */
.login{max-width:360px;margin:12vh auto}
.login form{margin-top:20px}
.login .btn{width:100%;margin-top:8px;padding:12px}

@media(prefers-reduced-motion:reduce){#card.turn{animation:none}}
@media(max-width:520px){body{padding:20px 14px}#card{height:300px;padding:20px}.grid2{grid-template-columns:1fr}}