/* ============================================================
   禧蓓虎记单词 · 样式（深色模式 / 抽屉式布局）
   ============================================================ */
:root{
  --bg:#0e1116;
  --bg-2:#12161d;
  --card:#171b23;
  --card-2:#1d222c;
  --line:#252b36;
  --line-2:#39414f;
  --ink:#e4e8f0;
  --ink-soft:#98a1b0;
  --ink-faint:#636d7d;
  --brand:#5b86d6;
  --brand-soft:rgba(91,134,214,.14);
  --green:#4fc08d;
  --green-soft:rgba(79,192,141,.12);
  --red:#e07070;
  --red-soft:rgba(224,112,112,.12);
  --gold:#d9b45f;
  --radius:16px;
  --radius-sm:12px;
  --shadow:0 10px 30px rgba(0,0,0,.34);
  --shadow-sm:0 4px 14px rgba(0,0,0,.26);
  /* 英文字体：默认 Noto Sans（音标字符最全，ə ɔ ɪ ʊ ʃ ˈ ː θ 都有），
     设置里可切 Andika（识字教学体）/ Lexend。
     --en-font 同时作用于「单词拼写（字母格）」和「音标」两处。 */
  --en-font:"Noto Sans";
  --font:var(--en-font),"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
}

/* 字体切换：设置项写入 <html data-font-family>，三套字体都已本地打包 */
html[data-font-family="lexend"]{--en-font:"Lexend"}
html[data-font-family="andika"]{--en-font:"Andika"}
html[data-font-family="notosans"]{--en-font:"Noto Sans"}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,p{margin:0}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;font-size:inherit}
b{font-weight:700}
::selection{background:rgba(91,134,214,.32)}

/* 滚动条（深色） */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#2a313d;border-radius:9px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 首次加载：字体加载界面 ---------- */
.boot{
  position:fixed;inset:0;z-index:999;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .4s ease;
}
.boot.is-done{opacity:0;pointer-events:none}
.boot-box{width:min(78vw,320px);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:9px}
.boot-name{font-size:21px;font-weight:700;letter-spacing:3px;color:var(--ink)}
.boot-sub{font-size:11.5px;letter-spacing:3px;color:var(--ink-faint)}
.boot-bar{
  margin-top:14px;width:100%;height:4px;border-radius:999px;
  background:var(--card-2);overflow:hidden;
}
.boot-fill{display:block;height:100%;width:0;border-radius:999px;
  background:var(--brand);transition:width .18s linear}
.boot-num{font-size:11.5px;font-weight:600;color:var(--ink-faint);letter-spacing:1px}
.boot-note{min-height:14px;font-size:11px;color:var(--ink-faint);opacity:.7}

/* ---------- 背景装饰（极低调） ---------- */
.deco{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.b1{width:520px;height:520px;background:#17243d;top:-200px;left:-160px}
.b2{width:440px;height:440px;background:#20182f;top:40%;right:-180px}
.b3{width:460px;height:460px;background:#131f2e;bottom:-220px;left:26%}

/* ---------- 布局 ---------- */
/* 界面上移（--lift）：设置里可调并记住，用于 iPad 等平板软键盘弹出时不被遮挡。
   分两段生效，保证顶部（练习页进度条 / 首页标题）永远留在屏幕内、不会被切掉：
   ① 先吃掉 #app 的顶部留白，但至少留 10px；
   ② 留白吃完后，剩余量记为 --lift-rest，交给各屏内容区的下内边距承担——
      居中内容整体上移，顶部不会溢出屏幕。 */
#app{
  position:relative;z-index:1;max-width:860px;margin:0 auto;
  --pad-top:clamp(56px,7vh,84px);
  padding:max(10px, calc(var(--pad-top) - var(--lift,0px))) clamp(16px,3vw,28px) 96px;
  --lift-rest:max(0px, calc(var(--lift,0px) - var(--pad-top) + 10px));
}
.screen{display:none;animation:fadeUp .3s ease}
.screen.is-active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- 首页 ---------- */
#screen-home.is-active{display:flex;align-items:center;justify-content:center;
  align-items:safe center;   /* 上移量过大时改为顶部对齐，宁可往下长也不顶出屏幕 */
  min-height:calc(100vh - 180px);
  padding-bottom:calc(2 * var(--lift-rest,0px))}
.home-wrap{text-align:center;display:flex;flex-direction:column;align-items:center;
  gap:14px;max-width:520px;width:100%}
#screen-home h1{font-size:clamp(26px,4vw,34px);font-weight:700;letter-spacing:3px}
.home-tag{font-size:11px;letter-spacing:3px;color:var(--ink-faint);font-weight:600}
.home-summary{
  margin-top:6px;color:var(--ink-soft);font-size:14.5px;line-height:1.8;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 24px;width:100%;
}
.home-summary b{color:var(--ink);font-weight:700}
.home-wrap .btn-lg{min-width:220px;margin-top:4px}

/* ---------- 抽屉 ---------- */
.drawer{
  position:fixed;top:0;left:0;bottom:0;z-index:60;
  width:min(88vw,380px);background:var(--bg-2);
  border-right:1px solid var(--line);
  transform:translateX(-102%);transition:transform .26s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;box-shadow:var(--shadow);
}
body.drawer-open .drawer{transform:translateX(0)}
.drawer-mask{
  position:fixed;inset:0;z-index:55;background:rgba(6,8,12,.62);
  opacity:0;pointer-events:none;transition:opacity .26s;
}
body.drawer-open .drawer-mask{opacity:1;pointer-events:auto}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line);flex:none;
}
.drawer-head b{font-size:15.5px;font-weight:700;letter-spacing:.5px}
.drawer-body{flex:1;overflow-y:auto;padding:6px 18px 28px}
.d-sec{padding:18px 0;border-bottom:1px solid var(--line)}
.d-sec:last-child{border-bottom:none}
.d-title{display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-size:14.5px;font-weight:700}
.d-title .step-no{width:24px;height:24px;border-radius:8px;font-size:12.5px}
.d-actions{margin-left:auto;display:flex;gap:6px}
.settings{display:flex;flex-direction:column;gap:2px}
.set-row{display:flex;align-items:center;gap:12px;padding:11px 2px;
  border-bottom:1px dashed var(--line);font-size:14px;font-weight:600;color:var(--ink-soft)}
.set-row:last-child{border-bottom:none}
.set-row>span:first-child{flex:1;color:var(--ink-soft)}
.set-row input[type=range]{flex:1;max-width:150px;accent-color:var(--brand)}
.set-row input[type=checkbox]{width:19px;height:19px;accent-color:var(--brand);cursor:pointer}
.set-row b{color:var(--ink);font-size:13px;min-width:48px;text-align:right}
/* 设置行里的补充说明（如「词库管理」下的小字） */
.set-note{display:block;font-size:11.5px;font-weight:500;color:var(--ink-faint);margin-top:2px}
.set-link{white-space:nowrap}
/* 设置行内的小分段选择（如字体切换） */
.set-row .seg{margin-left:auto;gap:2px;padding:3px;background:var(--card-2);border-radius:10px}
.set-row .seg .seg-btn{padding:6px 13px;font-size:13px;border-radius:8px}
.set-row .seg .seg-btn.is-active{background:var(--brand-soft);color:var(--brand)}

/* ---------- 抽屉开关 ---------- */
.bar-btn{
  position:fixed;left:clamp(12px,2vw,20px);top:clamp(12px,2vw,18px);z-index:40;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;
  color:var(--ink-faint);background:rgba(23,27,35,.66);
  border:1px solid var(--line);backdrop-filter:blur(10px);
  transition:.18s;
}
.bar-btn:hover{color:var(--ink);border-color:var(--line-2)}
.bar-ico{font-size:14px;line-height:1}

/* ---------- 右下角导航 ---------- */
.dock{
  position:fixed;right:clamp(12px,2vw,22px);bottom:clamp(12px,2vw,22px);z-index:40;
  display:flex;flex-direction:column;gap:4px;align-items:flex-end;
}
.dock-btn{
  position:relative;padding:6px 12px;border-radius:999px;
  font-size:12.5px;font-weight:600;color:var(--ink-faint);
  background:transparent;transition:.18s;
}
.dock-btn:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.dock-btn.is-active{color:var(--ink-soft);background:rgba(255,255,255,.06)}
.badge{
  position:absolute;top:0;right:-2px;min-width:16px;height:16px;padding:0 4px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--red);color:#fff;font-size:10px;font-weight:700;border-radius:999px;
}

/* 练习中隐藏外围控件，保持简洁 */
body.is-practice .dock,
body.is-practice .bar-btn{display:none}

/* ---------- 面板 ---------- */
.panel{background:var(--card);border-radius:var(--radius);padding:clamp(16px,2.4vw,22px);
  margin-top:16px;border:1px solid var(--line)}
.panel-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.panel-head h2{font-size:15.5px;font-weight:700}
.step-no{
  width:24px;height:24px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);border:1px solid rgba(91,134,214,.28);
  font-size:12px;font-weight:700
}
.sub-head{display:flex;align-items:center;justify-content:space-between;
  margin:18px 0 10px;gap:10px;flex-wrap:wrap}
.mini-label{font-size:13px;font-weight:600;color:var(--ink-faint)}
.sub-actions{display:flex;align-items:center;gap:8px}
.link-btn{font-size:13px;font-weight:600;color:var(--ink-faint);padding:5px 9px;border-radius:8px;
  transition:.18s;text-decoration:none}
.link-btn:hover{color:var(--ink);background:rgba(255,255,255,.05)}

/* ---------- 词库卡片（抽屉内，纵向列表） ---------- */
.bank-list{display:flex;flex-direction:column;gap:8px}
.bank-card{
  display:flex;gap:12px;align-items:center;text-align:left;width:100%;
  padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--card);transition:.18s;
}
.bank-card:hover{border-color:var(--line-2);background:var(--card-2)}
.bank-card.is-active{border-color:rgba(91,134,214,.55);background:var(--brand-soft)}
.bank-emoji{font-size:20px;flex:none;opacity:.9}
.bank-card > span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.bank-name{font-size:14px;font-weight:700}
.bank-desc{font-size:11.5px;color:var(--ink-faint);line-height:1.5}

/* ---------- 单元列表（从上到下一行一个，词数靠右） ---------- */
.chip-wrap{display:flex;flex-direction:column;gap:6px}
.chip{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 12px;border-radius:10px;font-size:13px;font-weight:600;
  background:var(--card-2);color:var(--ink-faint);border:1px solid transparent;transition:.18s;
}
.chip:hover{color:var(--ink-soft);background:var(--card)}
.chip.is-active{background:var(--brand-soft);color:var(--brand);
  border-color:rgba(91,134,214,.4)}
.chip .chip-n{font-size:11px;opacity:.65;margin-left:auto;flex:none}

/* ---------- 玩法卡片 ---------- */
.mode-list{display:flex;flex-direction:column;gap:8px}
.mode-card{
  display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;padding:12px 14px;
  border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--card);transition:.18s;
}
.mode-card:hover{border-color:var(--line-2);background:var(--card-2)}
.mode-card.is-active{border-color:rgba(91,134,214,.55);background:var(--brand-soft)}
.mode-emoji{font-size:18px;opacity:.9}
.mode-card > span:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.mode-name{font-size:14px;font-weight:700}
.mode-desc{font-size:11.5px;color:var(--ink-faint);line-height:1.55}

/* ---------- 分段选择 ---------- */
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--card);padding:4px;border-radius:11px;
  border:1px solid var(--line)}
.seg-btn{padding:8px 15px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--ink-faint);transition:.18s}
.seg-btn:hover{color:var(--ink-soft)}
.seg-btn.is-active{background:var(--brand-soft);color:var(--brand)}

/* ---------- 按钮 ---------- */
.btn{border-radius:11px;font-weight:600;transition:.18s;display:inline-flex;
  align-items:center;justify-content:center;gap:7px;white-space:nowrap}
.btn-primary{background:#3f63c8;color:#fff;padding:11px 26px;font-size:14.5px}
.btn-primary:hover:not(:disabled){background:#4a70d6}
.btn-primary:disabled{opacity:.35;cursor:not-allowed}
.btn-lg{padding:13px 30px;font-size:15px}
.btn-ghost{background:transparent;color:var(--ink-faint);padding:9px 16px;font-size:13.5px;
  border:1px solid transparent}
.btn-ghost:hover{color:var(--ink-soft);background:rgba(255,255,255,.05)}
.icon-btn{
  width:34px;height:34px;border-radius:10px;font-size:15px;color:var(--ink-faint);
  transition:.18s;display:grid;place-items:center;
}
.icon-btn:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.icon-btn.is-off{opacity:.35}

/* ============================================================
   练习页
   ============================================================ */
/* 练习页：上移只压缩内容区下边距，顶部进度条始终留在屏幕内 */
#screen-practice.is-active{display:flex;flex-direction:column;min-height:calc(100vh - 150px);
  padding-bottom:calc(2 * var(--lift-rest,0px))}
.p-top{display:flex;align-items:center;gap:14px}
/* 进度条与序号叠放：细条横向穿过数字，数字用背景色遮住条码，整体居中 */
.p-prog{flex:1;min-width:0;position:relative;display:flex;align-items:center;
  justify-content:center;height:26px}
.progress{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  width:100%;height:7px;border-radius:999px;background:var(--card-2);overflow:hidden}
.p-num{position:relative;z-index:1;margin:0 auto;padding:2px 10px;border-radius:999px;
  background:var(--bg);font-size:13px;font-weight:700;color:var(--ink-soft);
  letter-spacing:1.2px;font-variant-numeric:tabular-nums;line-height:1.1}
.progress-fill{height:100%;width:0;border-radius:999px;background:var(--brand);
  transition:width .4s ease;opacity:.85}
.p-stars{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--ink-faint)}
.p-stars span{opacity:.65;font-size:12px}
.p-stars b{color:var(--gold);font-size:14px}

.p-body{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;justify-content:safe center;  /* 内容超高时贴顶，不往上溢出到进度条 */
  gap:clamp(20px,3.4vh,34px);padding:clamp(20px,4vh,44px) 0}
.p-mode{font-size:11.5px;font-weight:600;letter-spacing:2px;color:var(--ink-faint)}

.prompt{text-align:center;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;min-height:120px}
/* 中文释义：不加粗（用户要求），字号比单词拼写小，让视线先落在拼写上 */
.prompt-cn{font-size:clamp(23px,3.7vw,30px);font-weight:400;letter-spacing:2px;
  color:var(--ink);line-height:1.25}
.prompt-hint{font-size:clamp(15px,2.2vw,19px);font-weight:600;color:var(--ink-faint);
  letter-spacing:2px;font-family:var(--font)}
/* 练习页音标：中文下方的第二行，字号放大够醒目，但不加粗（用户要求：常规字重）。
   听力模式先藏着，答错或跳过后再露出来。 */
.prompt-ipa{font-size:clamp(25px,4vw,33px);font-weight:400;color:var(--ink-soft);
  letter-spacing:1px;opacity:1;font-family:var(--font);line-height:1.2}
/* 音标按音节分色：与字母格同一套 5 色、段的序号一一对应，
   所以「字母格第 2 段是橙色」时音标第 2 段也是橙色，孩子能对上号。
   段界靠下面那条「相邻兄弟」margin 拉开，不加任何字符，不改变音标本身。 */
.ipa-s0{color:#7fb3ff}
.ipa-s1{color:#ffc46b}
.ipa-s2{color:#c79bff}
.ipa-s3{color:#6fd7c7}
.ipa-s4{color:#ff9bb0}
/* 段与段之间横向留白加大，音节边界一眼可辨。
   用「相邻兄弟」选择器：只在段与段之间加，[ ] 括号两侧不加，行首行尾不松散。 */
.prompt-ipa span + span{margin-left:clamp(9px,1.5vw,15px)}
.wi-ipa span + span{margin-left:3px}

/* 练习页返回按钮：友好、低调 */
.p-back{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  padding:7px 14px 7px 11px;border-radius:999px;
  background:transparent;border:1px solid var(--line);
  color:var(--ink-faint);font-size:12.5px;font-weight:600;
  transition:.18s;white-space:nowrap;
}
.p-back:hover{color:var(--ink-soft);border-color:var(--line-2);background:rgba(255,255,255,.04)}
.p-back-ico{display:flex;align-items:center}

/* 发音按钮：仅一个图标，圆钮放大，孩子好点 */
.speaker{
  width:54px;height:54px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:transparent;border:1.5px solid var(--line-2);
  color:var(--ink-faint);font-size:24px;transition:.18s;
}
.speaker:hover{color:var(--ink-soft);border-color:var(--ink-faint)}
.speaker .speaker-icon{line-height:1;display:block}
.speaker.is-playing{color:var(--brand);border-color:var(--brand);
  animation:pulse .9s ease-in-out infinite}
.speaker.is-fail{color:var(--red);border-color:var(--red);animation:shake .42s}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.75}}

/* ---------- 字母格：下划线外观（Lexend，间距收紧） ---------- */
/* 格宽 ≈ 0.94em：实测最宽字母（Noto Sans m = 0.935em、Andika W = 1.016em 推进）
   在这个比例下既放得下，又不会让相邻字母蹭到一起 */
.tiles{display:flex;flex-wrap:wrap;justify-content:center;
  column-gap:clamp(0px,0.2vw,3px);row-gap:clamp(12px,2vw,18px);
  max-width:100%;padding:4px 2px;min-height:74px}
.tile{
  width:clamp(27px,3.9vw,34px);height:clamp(50px,6.6vw,58px);
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:7px;border-radius:0;background:none;
  border-bottom:2.5px solid var(--line-2);
  font-size:clamp(29px,4.2vw,36px);font-weight:600;line-height:1;
  font-family:var(--font);font-feature-settings:normal;
  color:var(--ink);transition:.14s;
}
.tile.is-filled{color:var(--ink)}
.tile.is-cursor{border-bottom-color:var(--brand);animation:blink 1.1s ease-in-out infinite}
@keyframes blink{0%,100%{border-bottom-color:var(--brand)}50%{border-bottom-color:rgba(91,134,214,.2)}}

/* 音节分色：相邻音节用不同颜色，帮助孩子分块记忆。
   颜色同时画在「字母」和「下划线」上——还没输入时格子是空的，
   只有下划线带色，孩子照样能一眼看出这个词分几块、块在哪断开。
   实现上把颜色存进 --sy：这样后面 .is-ok 只要写 var(--sy, var(--green))，
   分了色的词拼对后保持音节色，没分色的词（单音节）才变绿给反馈。 */
.tile.sy0{--sy:#7fb3ff}
.tile.sy1{--sy:#ffc46b}
.tile.sy2{--sy:#c79bff}
.tile.sy3{--sy:#6fd7c7}
.tile.sy4{--sy:#ff9bb0}
.tile.sy0,.tile.sy1,.tile.sy2,.tile.sy3,.tile.sy4{
  color:var(--sy);border-bottom-color:var(--sy)}
/* 音节交界处留一点缝，让「块」的边界看得出来（同一音节内不额外加缝） */
.tile.sy-gap{margin-left:5px}

/* 拼对：整词维持音节色（--sy 已设就是音节色），
   只有没上色的词（单音节）才用绿色给出「对了」的反馈 */
.tile.is-ok{color:var(--sy,var(--green));border-bottom-color:var(--sy,var(--green))}
.tile.is-bad{border-bottom-color:var(--red);color:var(--red)}
.tile.is-space{width:clamp(9px,1.2vw,15px);border-bottom:none}
.tiles.shake{animation:shake .42s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}
  40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}

.p-tools{display:flex;gap:16px}
.feedback{min-height:22px;font-size:13.5px;font-weight:600;text-align:center;color:var(--ink-faint)}
.feedback.ok{color:var(--green)}
.feedback.bad{color:var(--red)}

/* 隐藏输入框：承接键盘输入（平板弹出软键盘） */
.ghost-input{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);
  width:2px;height:2px;opacity:0;border:none;outline:none;padding:0;
  font-size:16px;pointer-events:none;
}

/* ============================================================
   结算页
   ============================================================ */
.result-card{background:var(--card);border-radius:var(--radius);padding:clamp(24px,4vw,40px);
  text-align:center;border:1px solid var(--line)}
.result-emoji{font-size:clamp(48px,9vw,72px);animation:pop .5s ease}
@keyframes pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.result-card h1{font-size:clamp(22px,3.6vw,28px);font-weight:700;margin-top:6px}
.result-sub{color:var(--ink-faint);font-size:14px;margin-top:8px}
.result-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin:24px 0}
.rs{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 8px}
.rs b{display:block;font-size:23px;color:var(--ink);font-weight:700}
.rs span{font-size:11.5px;color:var(--ink-faint);font-weight:600}
.result-wrong{text-align:left;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:14px;margin-bottom:18px}
.result-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* 单词列表（错题/结果） */
.word-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.word-item{
  display:flex;align-items:center;gap:10px;background:var(--bg-2);border-radius:11px;
  padding:9px 13px;border:1px solid var(--line);
}
.word-item.is-wrong{background:rgba(224,112,112,.06);border-color:rgba(224,112,112,.22)}
.wi-main{display:flex;flex-direction:column;line-height:1.3}
.wi-w{font-size:14.5px;font-weight:700;letter-spacing:.3px}
.wi-cn{font-size:11.5px;color:var(--ink-faint)}
/* 列表里的音标也跟随英文字体（Andika / Lexend / Noto Sans），
   不用等宽字体——等宽体的 IPA 区字符常常缺失，会掉回系统字体 */
.wi-ipa{font-size:11px;color:var(--ink-faint);font-family:var(--font);opacity:.8}
.wi-play{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.05);
  display:grid;place-items:center;font-size:13px;color:var(--ink-soft);transition:.18s}
.wi-play:hover{background:rgba(255,255,255,.1);color:var(--ink)}
.wi-count{margin-left:auto;font-size:11px;font-weight:700;color:var(--red);
  background:var(--red-soft);padding:3px 8px;border-radius:999px}

/* ---------- 通用页头 ---------- */
.page-head{margin-bottom:14px;padding-left:2px}
.page-head h1{font-size:clamp(21px,3vw,26px);font-weight:700}
.page-sub{color:var(--ink-faint);font-size:13.5px;margin-top:6px}
.wb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- 统计 ---------- */
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:16px}
.stat-card{background:var(--card);border-radius:var(--radius-sm);padding:18px;text-align:center;
  border:1px solid var(--line)}
.stat-ico{font-size:20px;margin-bottom:8px;opacity:.85}
.stat-card b{display:block;font-size:25px;color:var(--ink);font-weight:700}
.stat-card span{font-size:12px;color:var(--ink-faint);font-weight:600}
.chart{display:flex;align-items:flex-end;gap:clamp(6px,1.6vw,16px);height:170px;padding-top:10px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end}
.bar{width:100%;max-width:44px;border-radius:8px 8px 4px 4px;min-height:4px;
  background:#2c3a55;transition:height .5s ease}
.bar.is-today{background:#3f63c8}
.bar-val{font-size:11.5px;font-weight:700;color:var(--ink-faint)}
.bar-day{font-size:11.5px;color:var(--ink-faint);font-weight:600}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:84px;transform:translate(-50%,16px);
  background:#232a35;color:var(--ink);border:1px solid var(--line-2);
  padding:10px 20px;border-radius:11px;
  font-size:13.5px;font-weight:600;opacity:0;pointer-events:none;transition:.28s;z-index:80;
}
.toast.is-show{opacity:1;transform:translate(-50%,0)}

/* ---------- 小屏适配 ---------- */
@media (max-width:640px){
  #app{--pad-top:64px}
  .bar-tx{display:none}
  .bar-btn{padding:9px 12px}
  .btn-primary{width:100%}
  #screen-practice.is-active{min-height:calc(100vh - 120px)}
}