:root{
  --bg:#fafaf8;--surface:#ffffff;--surface2:#f0eee8;--text:#222;--muted:#777;--faint:#aaa;--border:#e4e2dc;--border2:#d6d3cb;
  --accent:#222;--on-accent:#fff;
  --again-bg:#fdeaea;--again-fg:#a32d2d;--again-bd:#f3b9b9;
  --so-bg:#fdf3df;--so-fg:#8a5a0b;--so-bd:#f1d9a3;
  --easy-bg:#e6f4e3;--easy-fg:#2d6b1c;--easy-bd:#b9deb0;
  --ok:#2d6b1c;--danger:#a32d2d;
  --font:system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  --hz:"PingFang SC","Microsoft YaHei","Noto Sans SC","Hiragino Sans GB",sans-serif;
  --card-radius:18px;
}
:root[data-mode="dark"]{
  --bg:#14181f;--surface:#1d232d;--surface2:#2a313d;--text:#e8ecf2;--muted:#8a94a6;--faint:#5b6577;--border:#262d38;--border2:#323a48;
  --accent:#5dcaa5;--on-accent:#0b2a20;
  --again-bg:#3a1f22;--again-fg:#f09595;--again-bd:#3a1f22;
  --so-bg:#3a3020;--so-fg:#ef9f27;--so-bd:#3a3020;
  --easy-bg:#1c3a30;--easy-fg:#5dcaa5;--easy-bd:#1c3a30;
  --ok:#5dcaa5;--danger:#f09595;
}
:root[data-design="paper"]{
  --bg:#f4ecdb;--surface:#fffaf0;--surface2:#efe3c8;--text:#3b3226;--muted:#7a6c55;--faint:#a99a7e;--border:#e0d3b6;--border2:#d9ccb0;
  --accent:#3b3226;--on-accent:#f4ecdb;
  --again-bg:#f3d9d2;--again-fg:#8a3a2a;--again-bd:#e3b9ad;
  --so-bg:#f0e2bb;--so-fg:#7a5a1c;--so-bd:#dcc78f;
  --easy-bg:#d9e6c8;--easy-fg:#3f5a26;--easy-bd:#b7cf9a;
  --font:Georgia,"Times New Roman","Songti SC","Noto Serif SC",serif;--card-radius:6px;
}
:root[data-design="paper"][data-mode="dark"]{
  --bg:#2a2520;--surface:#342e27;--surface2:#463d33;--text:#efe4cf;--muted:#b3a58a;--faint:#7e725d;--border:#473f34;--border2:#554b3e;
  --accent:#e8d6a8;--on-accent:#2a2520;
  --again-bg:#4a2b26;--again-fg:#f0a595;--again-bd:#4a2b26;--so-bg:#4a3d22;--so-fg:#efc27a;--so-bd:#4a3d22;--easy-bg:#2f4126;--easy-fg:#b7d89a;--easy-bd:#2f4126;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px}
body{overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
.hz{font-family:var(--hz)}
#app{display:flex;flex-direction:column;height:100%;max-width:620px;margin:0 auto;position:relative}
.view{flex:1;overflow-y:auto;padding:calc(16px + env(safe-area-inset-top)) 16px 16px}
h1{font-size:24px;font-weight:600;margin:4px 0 14px}
h2{font-size:15px;font-weight:600;margin:20px 0 8px;color:var(--muted)}
.muted{color:var(--muted)}.small{font-size:13px}
.tabs{display:flex;justify-content:space-around;border-top:1px solid var(--border);background:var(--bg);padding:8px 0 calc(8px + env(safe-area-inset-bottom))}
.tabs button{flex:1;background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--faint);padding:4px}
.tabs button.cur{color:var(--text)}
.tabs svg{width:22px;height:22px}
.btn{border:1px solid var(--border2);background:var(--surface);border-radius:12px;padding:12px 16px;font-size:15px}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:500}
.btn.block{display:block;width:100%;text-align:center}
.btn.ghost{background:none}
.btn.danger{color:var(--danger)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 12px}
.tile b{display:block;font-size:26px;font-weight:600}
.tile span{font-size:12px;color:var(--muted)}
.box{background:var(--surface);border:1px solid var(--border);border-radius:14px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border-bottom:1px solid var(--border);cursor:pointer;text-align:left;width:100%;background:none;border-left:0;border-right:0;border-top:0}
.row:last-child{border-bottom:0}
.row .l{min-width:0}.row .r{text-align:right;font-size:13px;color:var(--muted);flex:none}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:5px 10px;border-radius:99px;background:var(--surface2);color:var(--muted);max-width:100%}
.chip svg{width:13px;height:13px;flex:none}
.field{width:100%;border:1px solid var(--border);background:var(--surface);border-radius:12px;padding:12px 14px;font-size:17px;outline:none}
.field:focus{border-color:var(--text)}
.sw{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);gap:12px}
.sw:last-child{border-bottom:0}
.seg{display:flex;gap:4px;background:var(--surface2);padding:3px;border-radius:10px}
.seg button{border:0;background:none;padding:6px 10px;border-radius:8px;font-size:13px}
.seg button.on{background:var(--surface);box-shadow:0 0 0 1px var(--border2)}
.res{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);background:var(--surface);border-radius:12px;margin-bottom:8px;width:100%;text-align:left}
.res .h{font-size:26px;line-height:1.15}.res .p{font-size:13px;color:var(--muted);margin-top:2px}
.res .e{font-size:13px;text-align:right;max-width:48%;line-height:1.35;color:var(--text)}
.res.saved{background:var(--easy-bg);border-color:var(--easy-bd)}
.tag{font-size:10px;border:1px solid var(--border2);color:var(--muted);border-radius:99px;padding:1px 6px;margin-left:6px;vertical-align:middle}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(80px + env(safe-area-inset-bottom));background:var(--text);color:var(--bg);padding:10px 16px;border-radius:99px;font-size:14px;display:flex;gap:14px;align-items:center;z-index:50;max-width:92%}
.toast button{background:none;border:0;color:inherit;text-decoration:underline;font-size:14px;padding:0}
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--bg);width:100%;max-width:620px;border-radius:20px 20px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));max-height:80vh;overflow-y:auto}
.sheet .big{font-size:44px;line-height:1.1}
.modal{background:var(--bg);border-radius:18px;padding:18px;width:min(92%,420px);margin:auto}

/* ---------- review ---------- */
.review{position:fixed;inset:0;background:var(--bg);z-index:30;display:flex;flex-direction:column;max-width:620px;margin:0 auto;padding:calc(12px + env(safe-area-inset-top)) 16px calc(14px + env(safe-area-inset-bottom));gap:12px}
.rtop{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted)}
.rtop button{background:none;border:0;font-size:22px;color:var(--muted);padding:0 6px}
.bar{height:3px;background:var(--border);border-radius:2px}.bar i{display:block;height:100%;background:var(--accent);border-radius:2px;transition:width .25s}
.stagewrap{flex:1;position:relative;min-height:0;display:flex}
.cardx{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--card-radius);padding:20px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;position:relative;touch-action:none;user-select:none;overflow:hidden;transition:box-shadow .15s,border-color .15s}
:root[data-design="paper"] .cardx{background-image:repeating-linear-gradient(transparent,transparent 33px,var(--border) 33px,var(--border) 34px)}
.cardx .big{font-size:76px;line-height:1.12}
.cardx .py{font-size:24px}
.cardx .defs{font-size:17px;line-height:1.45;max-width:100%;overflow-y:auto;max-height:26vh;touch-action:pan-y}
.cardx .div{width:100%;border-top:1px solid var(--border);margin:8px 0 4px}
.spk{width:42px;height:42px;border-radius:50%;background:var(--surface2);border:0;display:inline-flex;align-items:center;justify-content:center;color:var(--text);flex:none}
.spk svg{width:20px;height:20px}
.sent{font-size:22px;line-height:2.1;text-align:center}
.sent .w{border-radius:6px;padding:0 1px;cursor:pointer}
.sent .w:hover,.sent .w:active{background:var(--surface2)}
.sent ruby rt{font-size:11px;color:var(--muted)}
.sent-en{font-size:13px;color:var(--muted);margin-top:2px}
.stamp{position:absolute;top:16px;font-size:15px;font-weight:700;border:2px solid;border-radius:8px;padding:3px 10px;opacity:0;pointer-events:none}
.rate{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rate button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:13px 4px;font-size:15px;border-radius:14px;border:2px solid transparent}
.rate small{font-size:11px;opacity:.8}
.rate .again{background:var(--again-bg);color:var(--again-fg);border-color:var(--again-bd)}
.rate .sosso{background:var(--so-bg);color:var(--so-fg);border-color:var(--so-bd)}
.rate .easy{background:var(--easy-bg);color:var(--easy-fg);border-color:var(--easy-bd)}
.rate button.lit{box-shadow:0 0 0 3px currentColor;transform:scale(1.03)}
.rhint{text-align:center;font-size:11px;color:var(--faint);margin-top:-4px}
.revbtn{display:flex;gap:8px}
.revbtn .btn{flex:1}
.bars{display:flex;align-items:flex-end;gap:4px;height:70px}
.bars div{flex:1;background:var(--accent);border-radius:3px 3px 0 0;min-height:2px;opacity:.85}