/* 令牌照 miniapp/prototype/v8.html :root（品牌绿 / 纸 / 圆角四档 / 间距四档 / 阴影三档） */
:root{
  --g:#1E7B4E; --gd:#16543C; --gl:#EBF3EE; --gh:#2A9163;
  --bad:#B5412F; --badl:#FBECE8;
  --ink:#14261F; --ink2:#3C4E45; --ink3:#4E6B5C; --mut:#6E8078; --faint:#A6B3AC;
  --line:#E4EAE6; --line2:#F0F4F2;
  --bg:#F3F5F2; --card:#fff;
  --paper:#FEFEFC; --pedge:#E7E3D8; --cream:#FFFDF6;
  --rule:#C9D7CF; --rule2:#E1E9E4;
  --r-lg:10px; --r-md:6px; --r-sm:3px; --r-pill:999px;
  --sp-1:6px; --sp-2:13px; --sp-3:20px; --sp-4:28px;
  --sh-1:0 1px 2px rgba(20,38,31,.06);
  --sh-2:0 2px 8px rgba(20,38,31,.07);
  --sh-3:0 8px 24px rgba(20,38,31,.10);
  --cjk:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --en:"Avenir Next","Segoe UI","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --g:#4FB283; --gd:#7FCBA5; --gl:#18302A; --gh:#3C9E70;
    --bad:#E27B67; --badl:#3A2420;
    --ink:#E4EEE9; --ink2:#C4D3CB; --ink3:#9DB3A8; --mut:#7D9A8D; --faint:#557063;
    --line:#223B31; --line2:#1A2E26;
    --bg:#0E1A15; --card:#13231C;
    --paper:#15261F; --pedge:#2A4237; --cream:#172A22;
    --rule:#30493E; --rule2:#22382F;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --g:#4FB283; --gd:#7FCBA5; --gl:#18302A; --gh:#3C9E70;
  --bad:#E27B67; --badl:#3A2420;
  --ink:#E4EEE9; --ink2:#C4D3CB; --ink3:#9DB3A8; --mut:#7D9A8D; --faint:#557063;
  --line:#223B31; --line2:#1A2E26;
  --bg:#0E1A15; --card:#13231C;
  --paper:#15261F; --pedge:#2A4237; --cream:#172A22;
  --rule:#30493E; --rule2:#22382F;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--cjk);font-size:15px;line-height:1.5;
  min-height:100vh;overflow-x:hidden}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
  max-width:880px;margin:0 auto;padding:var(--sp-2) 16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:.02em}
.brand img{border-radius:8px;display:block}
.brand em{font-style:normal;font-weight:500;color:var(--ink3);font-size:14px;margin-left:8px;
  padding-left:8px;border-left:1px solid var(--line)}
.bookpick select{appearance:none;-webkit-appearance:none;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236E8078'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 32px 7px 14px;font-weight:600;box-shadow:var(--sh-1)}

.wrap{max-width:880px;margin:0 auto;padding:0 16px var(--sp-4)}

.units{display:flex;gap:var(--sp-1);overflow-x:auto;padding:4px 0 var(--sp-2);scrollbar-width:none}
.units::-webkit-scrollbar{display:none}
.units button{flex:none;border:1px solid var(--line);background:var(--card);border-radius:var(--r-pill);
  padding:6px 14px;font-size:14px;color:var(--ink2);box-shadow:var(--sh-1);white-space:nowrap}
.units button.on{background:var(--g);border-color:var(--g);color:#fff}
.units button .ok{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--g);margin-left:6px;vertical-align:middle}
.units button.on .ok{background:#fff}

.modes{display:flex;gap:4px;background:var(--line2);border-radius:var(--r-md);padding:3px;margin-bottom:var(--sp-2);width:max-content;max-width:100%}
.modes button{border:0;background:transparent;border-radius:var(--r-sm);padding:6px 16px;font-size:14px;color:var(--ink3)}
.modes button.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:var(--sh-1)}
.modes b{font-weight:600;color:var(--mut);font-size:12px;margin-left:2px}

/* 纸：作业纸底色 + 折角 */
.sheet,.done{position:relative;background:var(--paper);border:1px solid var(--pedge);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden}
.sheet::after,.done::after{content:"";position:absolute;right:0;top:0;width:22px;height:22px;
  background:linear-gradient(225deg,var(--bg) 50%,var(--pedge) 50%,var(--cream) 62%);border-bottom-left-radius:var(--r-sm)}
.bar{height:4px;background:var(--line2)}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gh),var(--gd));transition:width .3s}
.meta{display:flex;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3) 0;font-size:13px;color:var(--mut);font-variant-numeric:tabular-nums;flex-wrap:wrap}
.meta b{color:var(--ink2);font-weight:600}
.meta #clock{margin-left:auto}

.stage{position:relative;padding:var(--sp-4) var(--sp-3) var(--sp-3);min-height:300px;text-align:center;cursor:text}
.cn{font-size:26px;font-weight:600;margin:var(--sp-2) 0 4px;color:var(--ink);min-height:1.5em}
.cn.veil{color:var(--faint);letter-spacing:.3em}
.sub{margin:0 0 var(--sp-3);color:var(--mut);font-size:14px;min-height:1.5em}
.sub .ipa{font-family:var(--en);color:var(--ink3)}
.ex{margin:var(--sp-3) auto 0;max-width:560px;color:var(--ink3);font-size:14px;min-height:1.5em}
.ex .en{font-family:var(--en);color:var(--ink2);display:block;font-size:15px}

/* 四线三格：每个词一块，线随词宽 */
.line{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;font-family:var(--en);user-select:none}
.w{position:relative;display:inline-flex;align-items:flex-end;height:76px;padding:0 6px 16px;font-size:44px;line-height:1;
  background:
    linear-gradient(var(--rule2),var(--rule2)) 0 14px/100% 1px no-repeat,
    linear-gradient(var(--rule2),var(--rule2)) 0 30px/100% 1px no-repeat,
    linear-gradient(var(--rule),var(--rule)) 0 calc(100% - 16px)/100% 1.5px no-repeat,
    linear-gradient(var(--rule2),var(--rule2)) 0 calc(100% - 2px)/100% 1px no-repeat}
.sent .w{height:58px;font-size:32px;padding:0 4px 12px;
  background:
    linear-gradient(var(--rule2),var(--rule2)) 0 10px/100% 1px no-repeat,
    linear-gradient(var(--rule2),var(--rule2)) 0 22px/100% 1px no-repeat,
    linear-gradient(var(--rule),var(--rule)) 0 calc(100% - 12px)/100% 1.5px no-repeat,
    linear-gradient(var(--rule2),var(--rule2)) 0 calc(100% - 2px)/100% 1px no-repeat}
.w.cur{background-color:var(--gl);border-radius:var(--r-sm)}
.w.fin .c{color:var(--g)}
.c{display:inline-block;color:transparent;transition:color .12s;position:relative;white-space:pre}
.c.typed{color:var(--ink)}
.c.fix{color:var(--mut)}
.c.peek{color:var(--faint)}
.c.now::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:3px;border-radius:2px;background:var(--g);animation:blink 1s steps(2) infinite}
.c.bad{color:var(--bad)!important;animation:shake .28s}
@keyframes blink{50%{opacity:.25}}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.stage.wrongflash{animation:wf .35s}
@keyframes wf{30%{background:var(--badl)}}

.key{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;border:0;background:transparent;caret-color:transparent;cursor:text}

.tools{display:flex;flex-wrap:wrap;gap:var(--sp-1);justify-content:center;padding:var(--sp-2) var(--sp-3) var(--sp-3);border-top:1px dashed var(--pedge);background:var(--cream)}
.tool{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);border-radius:var(--r-pill);
  padding:6px 14px;font-size:14px;color:var(--ink2);box-shadow:var(--sh-1)}
.tool:hover{border-color:var(--g);color:var(--g)}
.tool.on{background:var(--gl);border-color:var(--g);color:var(--gd)}
.tool svg{width:18px;height:18px;fill:currentColor;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tool kbd{font-family:var(--en);font-size:11px;color:var(--mut);border:1px solid var(--line);border-radius:var(--r-sm);padding:0 4px;background:var(--line2)}

.done{padding:var(--sp-4) var(--sp-3);text-align:center}
.done h2{margin:0 0 var(--sp-3);font-size:22px}
.score{display:flex;justify-content:center;gap:var(--sp-4);margin-bottom:var(--sp-3)}
.score div{display:flex;flex-direction:column;align-items:center}
.score b{font-size:30px;color:var(--g);font-family:var(--en);font-variant-numeric:tabular-nums}
.score span{font-size:13px;color:var(--mut)}
.wl{list-style:none;margin:0 auto var(--sp-3);padding:0;max-width:520px;text-align:left}
.wl li{display:flex;align-items:center;gap:var(--sp-2);padding:8px 4px;border-bottom:1px solid var(--line2)}
.wl li b{font-family:var(--en);font-size:17px;min-width:6em}
.wl li span{color:var(--ink3);font-size:14px;flex:1}
.wl li button{border:0;background:var(--gl);color:var(--gd);border-radius:var(--r-pill);padding:3px 10px;font-size:13px}
.acts{display:flex;gap:var(--sp-1);justify-content:center;flex-wrap:wrap}
.btn{border:1px solid var(--g);background:var(--g);color:#fff;border-radius:var(--r-md);padding:10px 22px;font-weight:600;font-size:15px}
.btn.ghost{background:transparent;color:var(--g)}

.mini{display:flex;gap:var(--sp-3);align-items:center;margin-top:var(--sp-3);padding:var(--sp-2) var(--sp-3);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.mini img{border-radius:var(--r-md);background:#fff;padding:4px;flex:none}
.mini h3{margin:0 0 4px;font-size:16px}
.mini p{margin:0;color:var(--ink3);font-size:14px}
.foot{text-align:center;color:var(--mut);font-size:12px;padding:0 16px var(--sp-4)}

@media (max-width:600px){
  .brand em{display:none}
  .stage{min-height:250px;padding:var(--sp-3) var(--sp-2) var(--sp-2)}
  .cn{font-size:22px}
  .w{height:62px;font-size:34px;padding:0 4px 13px;
    background:
      linear-gradient(var(--rule2),var(--rule2)) 0 11px/100% 1px no-repeat,
      linear-gradient(var(--rule2),var(--rule2)) 0 24px/100% 1px no-repeat,
      linear-gradient(var(--rule),var(--rule)) 0 calc(100% - 13px)/100% 1.5px no-repeat,
      linear-gradient(var(--rule2),var(--rule2)) 0 calc(100% - 2px)/100% 1px no-repeat}
  .sent .w{height:46px;font-size:24px;padding:0 3px 9px;
    background:
      linear-gradient(var(--rule2),var(--rule2)) 0 8px/100% 1px no-repeat,
      linear-gradient(var(--rule2),var(--rule2)) 0 17px/100% 1px no-repeat,
      linear-gradient(var(--rule),var(--rule)) 0 calc(100% - 9px)/100% 1.5px no-repeat,
      linear-gradient(var(--rule2),var(--rule2)) 0 calc(100% - 2px)/100% 1px no-repeat}
  .line{gap:2px 8px}
  .meta{gap:var(--sp-2);padding:10px var(--sp-2) 0}
  .tool kbd{display:none}
  .tools{padding:10px var(--sp-1) var(--sp-2)}
  .tool{padding:6px 11px}
  .mini{flex-direction:column;text-align:center}
  .score{gap:var(--sp-3)}
}