/* sp-lesson.css — 双拼训练营（public/test/）
   设计语言对齐站内打字页 ltv2：暗夜分层 + 极光背景 + 玻璃卡片 + 紫青辉光。
   适配原则：clamp 前 px 兜底；不用 flex-gap 于自绘网格（共享键盘组件自带 gap 属生产同款）；
   100dvh + --app-h 兜底；safe-area 四向吃进；动效只用 transform/opacity。 */

:root {
  --bg: #0b0d12; --panel: #10131a; --panel2: #171b26;
  --line: rgba(255,255,255,.09); --line2: rgba(255,255,255,.16);
  --fg: #dfe5f2; --dim: #8b95a8; --faint: #5b6478;
  --acc: #8b5cf6; --acc2: #22d3ee; --accink: #a78bfa;
  --glow: rgba(139,92,246,.32); --glow2: rgba(34,211,238,.22);
  --ok: #34d399; --bad: #ff6b6b; --gold: #f0ad4e; --pink: #ef6a6a; --orange: #f0a24b;
  --r-lg: 18px; --r-md: 14px; --r-sm: 10px;
  --app-h: 100vh;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --glass: rgba(14,17,24,.74);
  /* —— 主题化派生变量（各主题覆盖这些）—— */
  --au1: rgba(139,92,246,.30); --au2: rgba(34,211,238,.20); --au3: rgba(167,139,250,.20);
  --au-op: .8; --sd-op: .5; --veil: rgba(11,13,18,.55);
  --hero1: #e9e3ff; --hero2: #a78bfa; --hero3: #22d3ee;
  --btn1: #8b5cf6; --btn2: #6366f1; --btn3: #22d3ee;
  --cur1: #ef6a6a; --cur2: #e05590; --curglow: rgba(239,106,106,.55);
  --nowlt: #ffd28f;
  --soft: rgba(255,255,255,.045); --softline: rgba(255,255,255,.1); --ghost: rgba(255,255,255,.06);
  --shadow: 0 24px 70px -28px rgba(0,0,0,.7);
  --drawer: rgba(16,19,26,.97); --sheet: rgba(23,27,38,.98);
  --font-ch: inherit;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { height: 100%; margin: 0; padding: 0; }
body {
  font-family: "Inter", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", "WenQuanYi Micro Hei", -apple-system, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", sans-serif;
  color: var(--fg); background: var(--bg); overflow: hidden; overscroll-behavior: none;
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
button { font-family: inherit; }
h1, h2, h3, p { margin: 0; }
input, textarea { user-select: text; -webkit-user-select: text; }

/* ================= 背景层 ================= */
#bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--bg); }
.au { position: absolute; inset: -34%; opacity: var(--au-op); }
.a1 { background:
  radial-gradient(40% 34% at 22% 26%, var(--au1), transparent 70%),
  radial-gradient(36% 30% at 76% 20%, var(--au2), transparent 70%);
  filter: blur(6px); animation: auA 26s ease-in-out infinite alternate; }
.a2 { background:
  radial-gradient(42% 40% at 68% 74%, var(--au3), transparent 72%),
  radial-gradient(30% 26% at 24% 80%, var(--au2), transparent 70%);
  filter: blur(10px); animation: auB 34s ease-in-out infinite alternate; }
.a3 { background: radial-gradient(50% 44% at 50% 50%, rgba(0,0,0,0), var(--veil) 78%); }
@keyframes auA { from { transform: translate(-3%,-2%) rotate(-2deg) scale(1); } to { transform: translate(4%,3%) rotate(2deg) scale(1.1); } }
@keyframes auB { from { transform: translate(3%,2%) scale(1.08); } to { transform: translate(-4%,-3%) scale(1); } }
.stardots { position: absolute; inset: 0; opacity: var(--sd-op);
  background-image: radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 34% 64%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 58% 24%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 76% 58%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 88% 34%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 44% 88%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 66% 82%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 8% 72%, rgba(255,255,255,.3) 50%, transparent 51%);
  animation: twinkle 5s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .32; } to { opacity: .62; } }

/* ================= 应用壳 ================= */
#app { position: relative; z-index: 1; height: var(--app-h); height: 100dvh;
  padding: var(--sat) var(--sar) var(--sab) var(--sal); }
.view { height: 100%; }
.vscroll { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 18px 16px 0; }
@media (max-width: 560px) { .vscroll { padding: 12px 10px 0; } }

/* ================= 通用 ================= */
.btn {
  border: 1px solid var(--line2); background: var(--panel2); color: var(--fg);
  border-radius: 999px; padding: 9px 18px; font-size: 15px; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; touch-action: manipulation;
}
.btn:hover { border-color: var(--acc); box-shadow: 0 0 0 3px var(--glow); }
.btn:active { transform: scale(.96); }
.btn.primary { background: linear-gradient(135deg, var(--btn1), var(--btn2) 60%, var(--btn3) 140%);
  border: 0; color: #fff; font-weight: 700; box-shadow: 0 6px 24px -6px var(--glow); }
.btn.primary:hover { box-shadow: 0 8px 30px -6px var(--glow), 0 0 0 3px rgba(139,92,246,.18); }
.btn.ghost { background: transparent; color: var(--dim); }
.btn.ghost:hover { color: var(--fg); }
.btn.lg { padding: 13px 30px; font-size: 17px; }
.btn.on { border-color: var(--acc); color: var(--accink); box-shadow: 0 0 0 3px var(--glow); }
.card { background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* ================= 首页 ================= */
.hero { max-width: 720px; margin: 4vh auto 0; text-align: center; padding: 0 4px; }
.eyebrow { display: inline-block; font-size: 12px; letter-spacing: .35em; color: var(--accink);
  border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); border-radius: 999px; padding: 5px 16px 5px 19px; margin-bottom: 18px;
  background: color-mix(in srgb, var(--acc) 9%, transparent); }
.hero-title { font-size: 46px; font-size: clamp(34px, 7.4vw, 56px); font-weight: 800; line-height: 1.15; letter-spacing: .02em;
  background: linear-gradient(120deg, var(--hero1) 8%, var(--hero2) 42%, var(--hero3) 88%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { color: var(--dim); font-size: 15px; line-height: 1.9; margin: 14px auto 0; max-width: 560px; }
.hero-core { margin-top: 10px; font-size: 15.5px; color: var(--fg); }
.hero-core b { color: var(--accink); font-weight: 800; letter-spacing: .02em; }
.scheme-pill { display: inline-flex; align-items: center; margin-top: 20px; padding: 9px 20px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--acc) 50%, transparent); background: color-mix(in srgb, var(--acc) 13%, transparent); color: var(--fg); font-size: 15px; cursor: pointer;
  transition: box-shadow .2s, transform .15s; }
.scheme-pill:hover { box-shadow: 0 0 0 4px var(--glow); }
.scheme-pill .sp-ico { margin-right: 8px; font-size: 18px; }
.scheme-pill b { font-weight: 700; }
.scheme-pill i { font-style: normal; color: var(--dim); font-size: 12px; margin-left: 12px; }

.hero-demo { display: flex; justify-content: center; flex-wrap: wrap; margin: 26px 0 6px; }
.demo-chip { display: flex; align-items: center; margin: 6px; padding: 10px 14px; border-radius: var(--r-md);
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: floaty 5s ease-in-out infinite; }
.demo-chip:nth-child(2) { animation-delay: -1.6s; } .demo-chip:nth-child(3) { animation-delay: -3.2s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.demo-chip .dz { font-size: 26px; font-weight: 800; margin-right: 10px; }
.demo-chip .py { color: var(--dim); font-size: 13px; margin-right: 10px; }
.demo-chip .sep { color: var(--faint); margin: 0 8px; }
.kcap { min-width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 8px; font-weight: 800;
  font-size: 15px; margin: 0 3px; padding: 0 8px; display: inline-block; }
.kcap.sm { background: color-mix(in srgb, var(--acc) 20%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 55%, transparent); color: color-mix(in srgb, var(--acc) 45%, var(--fg)); }
.kcap.ym { background: color-mix(in srgb, var(--orange) 15%, transparent); border: 1px solid color-mix(in srgb, var(--orange) 50%, transparent); color: color-mix(in srgb, var(--orange) 55%, var(--fg)); }
.kcap.plus { background: none; border: 0; color: var(--faint); min-width: 12px; padding: 0; }

.cta-row { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.cta-row .btn { margin: 6px; }

.path-wrap { max-width: 1040px; margin: 7vh auto 0; }
.sec-title { font-size: 20px; font-weight: 800; margin-bottom: 18px; }
.sec-title span { font-size: 13px; font-weight: 400; color: var(--faint); margin-left: 10px; }

.journey { display: grid; grid-template-columns: repeat(4, 1fr); }
.jcard { position: relative; margin: 8px; padding: 18px 16px 16px; border-radius: var(--r-lg); cursor: pointer;
  background: var(--glass); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .2s ease, border-color .2s, box-shadow .25s; }
.jcard:hover { transform: translateY(-4px); border-color: rgba(139,92,246,.55); box-shadow: 0 18px 44px -18px var(--glow); }
.jcard::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: .8;
  background: var(--gcb, linear-gradient(90deg, #8b5cf6, #6366f1)); }
.jcard .jno { position: absolute; right: 12px; top: 8px; font-size: 34px; font-weight: 800; color: var(--ghost); }
.jcard .jico { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; background: var(--gcb, linear-gradient(135deg, var(--btn1), var(--btn2))); box-shadow: 0 10px 26px -10px rgba(0,0,0,.45); }
.jcard h3 { font-size: 16px; font-weight: 700; margin: 12px 0 4px; }
.jcard p { font-size: 12px; color: var(--dim); line-height: 1.7; min-height: 34px; }
.jbar { margin-top: 10px; }
.jbar .tr { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); margin-bottom: 5px; }
.jbar .tr b { color: var(--accink); font-weight: 600; }
.jbar .bb { height: 5px; border-radius: 3px; background: var(--soft); overflow: hidden; }
.jbar .bb i { display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--btn1), var(--acc2)); transition: width .4s ease; }
.jcard.doneall::after { background: linear-gradient(90deg, transparent, var(--gold), transparent); }

.home-foot { max-width: 1040px; margin: 26px auto 0; padding: 18px 22px; display: flex; align-items: center;
  justify-content: center; flex-wrap: wrap; }
.ring-wrap { position: relative; width: 88px; height: 88px; margin: 0 22px 0 6px; }
.ring-wrap svg { transform: rotate(-90deg); }
.ring-wrap .rv { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-wrap .rv b { font-size: 19px; }
.ring-wrap .rv i { font-style: normal; font-size: 10px; color: var(--faint); }
.hf-stat { margin: 8px 24px; text-align: center; }
.hf-stat b { font-size: 22px; display: block; }
.hf-stat i { font-style: normal; font-size: 12px; color: var(--dim); }
.page-note { text-align: center; color: var(--faint); font-size: 11px; padding: 26px 10px 30px; line-height: 1.9; }

/* ================= 课程详解 ================= */
.ls-head { display: flex; align-items: center; max-width: 860px; margin: 6px auto 14px; }
.nav-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line2); flex: 0 0 auto;
  background: var(--panel2); color: var(--fg); font-size: 22px; line-height: 1; cursor: pointer;
  transition: border-color .2s, box-shadow .2s; }
.nav-btn:hover { border-color: var(--acc); box-shadow: 0 0 0 3px var(--glow); }
.nav-btn + .nav-btn { margin-left: 6px; }
.ls-ico { width: 52px; height: 52px; border-radius: 14px; margin: 0 14px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  background: linear-gradient(135deg, var(--btn1), var(--btn2)); box-shadow: 0 10px 26px -10px var(--glow); }
.ls-info { flex: 1; min-width: 0; }
.ls-info h2 { font-size: 20px; font-weight: 800; }
.ls-info p { font-size: 12px; color: var(--dim); margin-top: 3px; }

.ls-intro { max-width: 860px; margin: 0 auto 16px; padding: 20px 24px; font-size: 14.5px; line-height: 2; color: var(--fg); box-shadow: var(--shadow); }
.ls-intro b { color: var(--accink); }
.ls-intro .dim { color: var(--dim); }

.part-card { max-width: 860px; margin: 14px auto; border-radius: var(--r-lg); background: var(--glass); box-shadow: var(--shadow);
  border: 1px solid var(--line); overflow: hidden; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.part-head { display: flex; align-items: center; padding: 16px 20px; cursor: pointer; }
.part-head .pno { width: 34px; height: 34px; border-radius: 10px; margin-right: 14px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px;
  background: color-mix(in srgb, var(--acc) 15%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); color: var(--accink); }
.part-head .ptit { flex: 1; min-width: 0; }
.part-head .ptit h3 { font-size: 16px; font-weight: 700; }
.part-head .ptit p { font-size: 12px; color: var(--dim); margin-top: 2px; }
.part-head .pmeta { text-align: right; font-size: 12px; color: var(--dim); white-space: nowrap; margin-right: 10px; }
.part-head .pmeta b { color: var(--accink); }
.part-arrow { color: var(--faint); transition: transform .2s; font-size: 12px; }
.part-card.open .part-arrow { transform: rotate(90deg); }
.part-body { display: none; border-top: 1px solid var(--line); padding: 18px 20px 20px; }
.part-card.open .part-body { display: block; }

.learn-block { margin: 0 0 16px; }
.lb-p { font-size: 14px; line-height: 2; color: var(--fg); }
.lb-p b { color: var(--accink); } .lb-p .yl { color: var(--orange); font-weight: 700; }
.lb-steps { counter-reset: st; }
.lb-step { position: relative; padding: 10px 12px 10px 46px; margin: 8px 0; border-radius: var(--r-md);
  background: var(--soft); border: 1px solid var(--line); font-size: 14px; line-height: 1.9; }
.lb-step::before { counter-increment: st; content: counter(st); position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; text-align: center; line-height: 24px;
  font-size: 12px; font-weight: 800; color: var(--accink); background: color-mix(in srgb, var(--acc) 15%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); }
.lb-mn { background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 12%, transparent), color-mix(in srgb, var(--acc2) 7%, transparent));
  border-left: 3px solid var(--acc); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 12px 16px;
  font-size: 14.5px; line-height: 2.2; white-space: pre-line; color: var(--fg); }
.lb-mn.t2 { border-left-color: var(--gold); background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 11%, transparent), color-mix(in srgb, var(--acc) 6%, transparent)); }
.lb-tip { font-size: 12.5px; color: var(--dim); line-height: 1.9; padding: 8px 12px; border-radius: var(--r-sm);
  background: var(--soft); border: 1px dashed var(--line2); }
.lb-tip b { color: var(--gold); }

/* 示例拆解条 */
.ex-row { display: flex; align-items: center; flex-wrap: wrap; margin: 10px 0; padding: 10px 14px;
  border-radius: var(--r-md); background: var(--soft); border: 1px solid var(--line); }
.ex-row .dz { font-size: 24px; font-weight: 800; min-width: 34px; text-align: center; }
.ex-row .py { color: var(--dim); font-size: 13px; margin: 0 10px; }
.ex-row .sp { display: flex; align-items: center; color: var(--faint); font-size: 13px; }
.ex-row .sp i { font-style: normal; margin: 0 4px; color: var(--faint); }
.ex-row .sp .v { color: var(--acc2); }
.ex-zh { font-size: 12px; color: var(--faint); margin-left: auto; padding-left: 10px; }
@media (max-width: 480px) { .ex-zh { margin-left: 0; width: 100%; padding: 2px 0 0; } }

/* 小键位图（讲解用，随方案联动） */
.mk-title { font-size: 12px; color: var(--dim); margin: 4px 0 8px; }
.mk { display: inline-block; padding: 10px; border-radius: var(--r-md); background: var(--soft);
  border: 1px solid var(--line); max-width: 100%; overflow-x: auto; }
.mk-row { display: flex; }
.mk-key { position: relative; width: 34px; height: 34px; margin: 2px; border-radius: 6px; flex: 0 0 auto;
  background: var(--soft); border: 1px solid var(--softline); color: var(--dim);
  font-size: 13px; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.05; overflow: hidden; }
.mk-key .m-sub { font-size: 8.5px; font-weight: 600; color: var(--orange); max-width: 100%; white-space: nowrap; }
.mk-key .m-cap { font-size: 8.5px; font-weight: 600; color: #9db7ff; }
.mk-key.hl { background: color-mix(in srgb, var(--acc) 26%, var(--soft)); border-color: color-mix(in srgb, var(--acc) 65%, transparent); color: var(--fg);
  box-shadow: 0 0 14px -2px var(--glow); }
.mk-key.hl .m-sub { color: color-mix(in srgb, var(--orange) 60%, var(--fg)); }
.mk-key.zm-hl { background: rgba(34,211,238,.16); border-color: rgba(34,211,238,.6); }
.mk-legend { font-size: 11px; color: var(--faint); margin-top: 6px; line-height: 1.8; }
.mk-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin: 0 4px 0 10px; vertical-align: -1px; }
.mk-legend .l1 { background: rgba(139,92,246,.6); } .mk-legend .l2 { background: rgba(34,211,238,.55); }

/* 关卡格子 */
.lv-grid { display: flex; flex-wrap: wrap; margin-top: 4px; }
.lv-g { width: 42px; height: 42px; margin: 4px; border-radius: 11px; border: 1px solid var(--line2); cursor: pointer;
  background: var(--soft); color: var(--dim); font-size: 14px; position: relative;
  display: flex; align-items: center; justify-content: center; transition: border-color .15s, transform .12s; }
.lv-g:hover { border-color: var(--acc); transform: translateY(-2px); }
.lv-g .st { position: absolute; right: 2px; bottom: 1px; font-size: 9px; color: var(--gold); letter-spacing: -1px; }
.lv-g.done { border-color: rgba(52,211,153,.5); background: rgba(52,211,153,.1); color: #9ff0cf; }
.part-cta { margin-top: 14px; display: flex; align-items: center; flex-wrap: wrap; }
.part-cta .go { margin-right: 12px; }
.part-cta .cnt { font-size: 12px; color: var(--dim); }

/* ================= 打字页 ================= */
#v-type { display: flex; flex-direction: column; padding: 10px 12px 10px; }
#v-type[hidden] { display: none; }
.nav { display: flex; align-items: center; flex: 0 0 auto; margin-bottom: 8px; }
.nav-title { flex: 1; min-width: 80px; text-align: center; font-size: 14px; font-weight: 700; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 8px; }
.nav-tools { display: flex; }
.tbtn { border: 1px solid var(--line2); background: var(--panel2); color: var(--dim); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; cursor: pointer; margin-left: 7px; transition: color .15s, border-color .15s, box-shadow .2s; }
.tbtn:first-child { margin-left: 0; }
.tbtn:hover { color: var(--fg); border-color: var(--acc); }
.tbtn.on { color: var(--accink); border-color: rgba(139,92,246,.6); box-shadow: 0 0 0 3px var(--glow); }
@media (max-width: 560px) { .tbtn { padding: 6px 10px; font-size: 12px; margin-left: 5px; } .nav-title { font-size: 13px; } }

.stage { flex: 1 1 auto; min-height: 70px; display: flex; }
/* 纸面永不溢出打字区(键盘变大时内容区让位, 与键盘绝不重叠) */
.paper { max-height: 100%; overflow: hidden; }
.paper { flex: 1; min-width: 0; max-width: 900px; margin: auto; border-radius: var(--r-lg);
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow); padding: 14px 18px 12px; display: flex; flex-direction: column; }
.paper .meta { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.paper .meta .t { font-size: 15px; font-weight: 700; }
.paper .meta .m { font-size: 11.5px; color: var(--accink); background: rgba(139,92,246,.12);
  border: 1px solid rgba(139,92,246,.32); padding: 2px 10px; border-radius: 999px; white-space: nowrap; margin-left: 10px; }

.lines { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.line { display: flex; justify-content: center; align-items: center; overflow: hidden; white-space: nowrap; }
#ln-now { justify-content: flex-start; }  /* 当前行起点对齐: 超宽内容不两侧裁剪(短行由 lscroll margin:auto 居中) */
.line.prev, .line.next { min-height: 22px; opacity: .55; filter: blur(.4px); }
.line.now { min-height: calc(64px * var(--nowfit, 1)); }  /* 随行内缩放同比收缩, 保证当前行永不裁剪 */
.lscroll { display: flex; justify-content: flex-start; margin: 0 auto; transition: transform .18s ease; }
.cell { --chs: calc(clamp(19px, 3.6vw, 28px) * var(--nowfit, 1));   /* --nowfit: 行内自适应收缩系数(JS 按可用高度注入), 字母与汉字同步缩 */
  display: inline-flex; flex-direction: column; align-items: center; gap: 0; margin: calc(5px * var(--nowfit, 1)) calc(8px * var(--nowfit, 1)); min-width: 30px;
  animation: cellin .18s ease; }   /* 纵向排布: 编码字母在汉字之上(同拼音/双拼页) */
@keyframes cellin { from { opacity: .2; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cell .code { display: flex; font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: calc(var(--chs) * var(--sp-code, 1)); letter-spacing: 2px; line-height: 1.25; color: var(--faint); }
.cell .code .lt { margin: 0 1px; }
.cell .ch { font-size: var(--chs); font-weight: 600; line-height: 1.3; color: var(--fg); }
/* 五笔打字行全是汉字: 不设任何 font-family 覆盖, 完全继承 body 字体栈 —— 与双拼页汉字同一条已验证可行的渲染路径 */
.cell.pure .ch { font-size: var(--chs); color: var(--fg); font-weight: 600; }
.cell.done .code { color: rgba(52,211,153,.55); }
.cell.done .ch { color: var(--dim); }
.cell.cur .code { color: var(--fg); }   /* 主题前景色: 旧版硬编码白在亮色主题(纸面白)下会隐形 */
.cell.cur .ch { background: linear-gradient(135deg, var(--cur1), var(--cur2)); border-radius: 9px; padding: 1px 7px;
  color: #fff; box-shadow: 0 6px 22px -6px var(--curglow); }
.cell.cur .code .lt.now-lt { color: var(--nowlt); font-weight: 800; position: relative; }
.cell.cur .code .lt.now-lt::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  border-radius: 1px; background: var(--nowlt); animation: wbLtBlink 1.05s linear infinite; }   /* 当前键光标横线一闪一闪 */
@keyframes wbLtBlink { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
/* 默写渐进显示: 敲对绿 / 打错红(实敲字母) / 错后改正金, 未敲槽位隐形(光标仍闪) */
.cell .code .lt.t-ok { color: var(--ok); font-weight: 700; }
.cell .code .lt.t-fix { color: var(--gold); font-weight: 700; }
.cell.cur .code .lt.t-err, .cell .code .lt.t-err { color: var(--bad); font-weight: 700; }
body.dict .cell.cur .code .lt.t-hide, body.dict .cell .code .lt.t-hide { color: transparent; }
.cell.cur .code .lt.done-lt { color: var(--ok); }
.cell.punct { opacity: .4; }
.cell.punct .ch { font-size: 22px; color: var(--dim); }
.paper.blind .cell:not(.cur) .code { visibility: hidden; }   /* 盲打：只留当前字编码 */
.line.now.err-shake { animation: shk .22s ease; }
@keyframes shk { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.prog-row { margin-top: 8px; }
.bar { height: 6px; border-radius: 3px; background: var(--soft); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--btn1), var(--acc2)); box-shadow: 0 0 12px var(--glow); transition: width .25s ease; }
.tiles { display: flex; justify-content: center; margin-top: 9px; }
.tile { min-width: 92px; margin: 0 10px; padding: 7px 12px; border-radius: var(--r-md); text-align: center;
  background: var(--soft); border: 1px solid var(--line); }
.tile i { display: block; font-style: normal; font-size: 10.5px; color: var(--faint); letter-spacing: .12em; }
.tile b { font-size: 19px; font-weight: 800; }
@media (max-width: 560px) { .tile { min-width: 78px; margin: 0 6px; padding: 5px 8px; } .tile b { font-size: 16px; } }

/* ================= 键盘区（真键盘 dazi-keyboard + 标签层） ================= */
/* dazi-keyboard.js 的 renderInto 不自动注入样式（injectCss 仅在 EngKeyboard 分支调用），
   以下 dk-* 规则为该文件 113-153 行样式块的原样拷贝（勿改语义，改样式请两头同步） */
.dk-kb-host{--kb-key-bg:#fff;--kb-key-text:#333;--kb-key-border:#e8ecf3;--kb-key-special-bg:#f5f5f5;--kb-key-special-text:#919191;
  --kb-accent:#7a4fd0;--kb-accent-glow:rgba(122,79,208,.3);--kb-correct:#5cb85c;--kb-wrong:#d9534f;--kb-hint:#f0ad4e;}
.dk-kb-wrap{position:relative}
.dk-kb-rows{position:relative}
.dk-kb-row{display:flex;gap:2px;justify-content:center;margin-bottom:3px}
.dk-kb-key{height:41px;border-radius:4px;background:var(--kb-key-bg);border:1px solid var(--kb-key-border);
  box-shadow:0 1px 2px rgba(0,0,0,.05);color:var(--kb-key-text);font-family:"JetBrains Mono", monospace;
  font-size:var(--kb-fs, 16.5px);font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;
  flex:0 0 auto;position:relative;transition:all .12s ease-out;cursor:default;user-select:none}
.dk-kb-key.special{background:var(--kb-key-special-bg);color:var(--kb-key-special-text);font-size:calc(var(--kb-fs, 16.5px) * 0.8)}
  .dk-kb-key span{line-height:1;display:block}
.dk-kb-key .sub{font-size:calc(var(--kb-fs, 16.5px) * 0.74);color:#919191;margin-top:0;margin-bottom:calc(var(--kb-fs, 16.5px) * -0.12 + 3px);order:-1}
.dk-kb-key .cap{font-size:calc(var(--kb-fs, 16.5px) * 0.74);color:#919191;margin-top:2px}
  .dk-kb-key[data-key="back"] span:not(.cap):not(.sub){font-size:calc(var(--kb-fs, 16.5px) * 0.7)}
.dk-kb-key .finger-dot{position:absolute;top:3px;right:4px;width:5px;height:5px;border-radius:50%;opacity:.6}
.dk-kb-key.hint{border-color:var(--kb-accent);background:color-mix(in srgb,var(--kb-accent) 25%,var(--kb-key-bg));
  box-shadow:0 0 0 3px var(--kb-accent-glow);animation:dkKeyHintPulse 1.1s ease-in-out infinite}
.dk-kb-key.correct{background:color-mix(in srgb,var(--kb-correct) 45%,var(--kb-key-bg));border-color:var(--kb-correct);
  box-shadow:0 2px 8px rgba(92,184,92,.45);animation:dkKeyHit .15s}
.dk-kb-key.wrong{background:color-mix(in srgb,var(--kb-wrong) 45%,var(--kb-key-bg));border-color:var(--kb-wrong);
  box-shadow:0 2px 8px rgba(217,83,79,.45);animation:dkKeyShake .25s}
.dk-kb-key.clickable{cursor:pointer}
@keyframes dkKeyHit{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes dkKeyShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes dkKeyHintPulse{0%,100%{box-shadow:0 0 0 2px var(--kb-accent-glow)}50%{box-shadow:0 0 0 6px var(--kb-accent-glow)}}
.dk-hand-stage{position:absolute;top:0;left:0;right:0;bottom:0;overflow:visible;z-index:2;pointer-events:none}
.dk-hand-img{position:absolute;left:0;top:0;transform-origin:0 0;height:auto;pointer-events:none;user-select:none;display:none}
.dk-hand-img.visible{display:block}
/* —— 拷贝结束，以下为本页键盘区自有样式 —— */
/* 键盘区高度占比(自汉字打字页迁移): 打字区=剩余; kbzone 垂直水平居中 */
.kbzone { flex: 0 0 min(calc(var(--sp-kbpct, 42) * 1%), 46vh); min-height: 0; margin-top: 8px;  /* 上限46vh: 矮窗口时键盘不吞掉打字区(当前行优先) */
  display: flex; align-items: center; justify-content: center; }
.kb-frame { width: 100%; max-width: 980px; margin: 0 auto; border-radius: var(--r-lg); padding: 8px 10px 10px;
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 -6px 40px -18px rgba(0,0,0,.6); }
.kb-cap { text-align: center; font-size: 11px; color: var(--dim); margin: 2px 0 6px; }
.kb-cap b { color: var(--accink); font-weight: 600; }
.sp-kb-fit { overflow: hidden; display: flex; justify-content: center; }
.sp-kb-wrap { position: relative; }
.sp-kb-wrap .dk-kb-key .sp-kl { font-size: calc(var(--kb-fs, 16.5px) * .68); line-height: 1.05;
  margin-bottom: 1px; order: -1; font-family: "Inter", "Noto Sans SC", sans-serif; }
.sp-kb-wrap.v-ym .sp-kl, .sp-kb-wrap.v-sp .sp-kl { color: var(--orange); }
.sp-kb-wrap.v-sm .sp-kl { color: #9db7ff; }
.sp-kb-wrap .dk-kb-key .sp-kc { font-size: calc(var(--kb-fs, 16.5px) * .62); line-height: 1.05; margin-top: 2px;
  color: #9db7ff; font-family: "Inter", "Noto Sans SC", sans-serif; }
.kbzone.hidden { display: none; }

/* 击键放大反馈(iPhone输入法式): 按下的键帽瞬间弹大, 看清按的是哪个键 */
.sp-kb-wrap .dk-kb-key { position: relative; }
.sp-kb-wrap .dk-kb-key.pop { animation: spKeyPop .3s cubic-bezier(.2,.85,.3,1.25); z-index: 6; }
@keyframes spKeyPop {
  0% { transform: scale(1); }
  40% { transform: scale(2.13); box-shadow: 0 14px 38px rgba(0,0,0,.38); }
  100% { transform: scale(1); }
}

/* 韵母/双拼视图: 只显示双拼标签 —— 键位字母隐藏, 短标签放大全尺寸, 长标签(iang·uang)缩档+换行不再被盖 */
.sp-kb-wrap.v-ym .dk-kb-key:has(.sp-kl) .sp-base,
.sp-kb-wrap.v-sp .dk-kb-key:has(.sp-kl) .sp-base { display: none; }
.sp-kb-wrap.v-ym .dk-kb-key .sp-kl,
.sp-kb-wrap.v-sp .dk-kb-key .sp-kl {
  font-size: var(--kb-fs, 16.5px); line-height: 1.1;
  white-space: normal; overflow-wrap: anywhere; text-align: center; padding: 0 2px; font-weight: 600; }
.sp-kb-wrap.v-ym .dk-kb-key .sp-kl.kl-long,
.sp-kb-wrap.v-sp .dk-kb-key .sp-kl.kl-long { font-size: calc(var(--kb-fs, 16.5px) * .78); }

/* 打字区高度档位(键盘大小滑杆联动): 区高不足时减行不减字 —— 先藏上/下预告行, 再藏标题行收紧间距 */
body[data-stagefit="1"] .line.prev, body[data-stagefit="1"] .line.next { display: none; }
body[data-stagefit="2"] .line.prev, body[data-stagefit="2"] .line.next { display: none; }
body[data-stagefit="2"] .paper .meta { display: none; }
body[data-stagefit="2"] .line.now { min-height: 52px; }
body[data-stagefit="2"] .paper { padding: 8px 18px 8px; }
body[data-stagefit="2"] .prog-row { margin-top: 4px; }
body[data-stagefit="2"] .prog-row .tiles { display: none; }   /* 极矮时统计瓦片让位: 高度全部留给当前行(上字母下汉字必须完整) */

/* ================= 显示调整(设置抽屉, 自汉字打字页迁移) ================= */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 2px; border-bottom: 1px dashed var(--line); }
.set-row:last-of-type { border-bottom: none; }
.set-row .sr-l { min-width: 0; }
.set-row .sr-l b { font-size: 13.5px; display: block; }
.set-row .sr-l small { display: block; font-size: 11px; color: var(--faint); margin-top: 3px; line-height: 1.6; }
.set-row .sr-c { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.set-row input[type=range] { width: 140px; accent-color: var(--acc); }
.set-row .sv { font-size: 12.5px; font-weight: 800; min-width: 44px; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--accink); }
/* 开关(胶囊圆点, 与汉字打字页同款手感) */
.sw { width: 44px; height: 25px; border-radius: 999px; background: var(--softline); position: relative;
  cursor: pointer; flex: 0 0 auto; transition: background .18s; border: 1px solid var(--line); }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s; }
.sw.on { background: var(--acc); border-color: var(--acc); }
.sw.on::after { transform: translateX(19px); }

/* ================= 抽屉 ================= */
.mask { position: fixed; inset: 0; z-index: 40; background: rgba(5,7,12,.55); opacity: 0; transition: opacity .25s; }
.mask.show { opacity: 1; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(420px, 94vw);
  background: var(--drawer); border-left: 1px solid var(--line2); transform: translateX(102%);
  visibility: hidden;   /* 移出视口后投影仍会绘制, 6 层叠加致右缘发黑 —— 隐藏即不绘制 */
  transition: transform .28s cubic-bezier(.22,.9,.34,1), visibility .28s;
  display: flex; flex-direction: column;
  box-shadow: -18px 0 60px -20px rgba(0,0,0,.6); }
.drawer.show { transform: none; visibility: visible; }
.dr-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px;
  border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.dr-head b { font-size: 16px; }
.x { border: 0; background: transparent; color: var(--dim); font-size: 26px; cursor: pointer; line-height: 1; padding: 2px 8px; }
.x:hover { color: var(--fg); }
.dr-body { flex: 1; overflow-y: auto; padding: 16px 18px 30px; -webkit-overflow-scrolling: touch; }

/* 方案卡 */
.sc-card { display: flex; align-items: center; padding: 13px 14px; margin-bottom: 10px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--soft); cursor: pointer; transition: border-color .15s, transform .12s; }
.sc-card:hover { border-color: var(--acc); transform: translateX(2px); }
.sc-card.on { border-color: color-mix(in srgb, var(--acc) 70%, transparent); background: color-mix(in srgb, var(--acc) 11%, transparent); box-shadow: 0 0 0 3px var(--glow); }
.sc-card .ico { font-size: 24px; margin-right: 12px; }
.sc-card .nm { flex: 1; min-width: 0; }
.sc-card .nm b { font-size: 15px; display: block; }
.sc-card .nm p { font-size: 11.5px; color: var(--dim); margin-top: 2px; line-height: 1.6; }
.sc-card .ck { color: var(--accink); font-size: 13px; }
.dr-sec { margin: 18px 0 8px; font-size: 13px; font-weight: 700; color: var(--accink); }
.dr-note { font-size: 12.5px; color: var(--dim); line-height: 2; }
.dr-note b { color: var(--fg); }

/* 键盘视图选项 */
.kb-opt { display: flex; align-items: center; padding: 13px 14px; margin-bottom: 10px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--soft); cursor: pointer; }
.kb-opt.on { border-color: color-mix(in srgb, var(--acc) 70%, transparent); background: color-mix(in srgb, var(--acc) 11%, transparent); box-shadow: 0 0 0 3px var(--glow); }
.kb-opt .ki { font-size: 20px; margin-right: 12px; }
.kb-opt b { font-size: 15px; display: block; }
.kb-opt p { font-size: 11.5px; color: var(--dim); margin-top: 2px; }

/* ================= 结算弹层 ================= */
.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(5,7,12,.6); padding: 18px; opacity: 0; transition: opacity .25s; }
.modal[hidden] { display: none; }
.modal.show { opacity: 1; }
.sheet { position: relative; width: min(430px, 100%); border-radius: 22px; padding: 30px 26px 24px; text-align: center;
  background: var(--sheet);
  border: 1px solid var(--line2); box-shadow: 0 30px 90px -20px rgba(0,0,0,.8); overflow: hidden; }
.r-glow { position: absolute; left: 50%; top: -70px; width: 260px; height: 160px; transform: translateX(-50%);
  background: radial-gradient(50% 60% at 50% 50%, var(--glow), transparent 75%); pointer-events: none; }
.stars { font-size: 40px; letter-spacing: 8px; color: var(--gold); text-shadow: 0 0 22px rgba(240,173,78,.45); }
.stars .off { color: var(--ghost); text-shadow: none; }
.stars span { display: inline-block; animation: starpop .5s cubic-bezier(.2,1.6,.4,1) backwards; }
.stars span:nth-child(2) { animation-delay: .12s; } .stars span:nth-child(3) { animation-delay: .24s; }
@keyframes starpop { from { transform: scale(0) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
.r-title { font-size: 22px; font-weight: 800; margin-top: 8px;
  background: linear-gradient(120deg, var(--hero1), var(--hero2) 55%, var(--hero3)); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.r-name { font-size: 12px; color: var(--dim); margin: 6px 0 16px; line-height: 1.7; }
.r-grid { display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.r-grid > div { margin: 4px 16px; }
.r-grid i { display: block; font-style: normal; font-size: 11px; color: var(--faint); letter-spacing: .1em; }
.r-grid b { font-size: 21px; font-weight: 800; }
.r-btns button { margin: 0 5px; }

/* ================= Toast ================= */
.toast { position: fixed; left: 50%; bottom: 92px; transform: translate(-50%, 20px); z-index: 99;
  background: var(--drawer); border: 1px solid var(--line2); color: var(--fg); border-radius: 999px;
  padding: 10px 22px; font-size: 13.5px; opacity: 0; pointer-events: none; transition: all .3s ease;
  box-shadow: 0 14px 40px -12px rgba(0,0,0,.7); max-width: 86vw; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ================= 响应式 ================= */
@media (max-width: 960px) { .journey { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .journey { grid-template-columns: 1fr; }
  .jcard p { min-height: 0; }
  .hero { margin-top: 2vh; }
  .hero-title { letter-spacing: 0; }
  .paper { padding: 10px 10px 8px; }
  .cell { --chs: 20px; margin: 2px 6px; gap: 6px; }
  .line.now { min-height: 52px; }
  .kb-frame { padding: 6px 6px 8px; border-radius: var(--r-md); }
}
@media (max-height: 560px) and (orientation: landscape) {
  .vscroll { padding-top: 8px; }
  .paper { padding: 6px 12px 6px; }
  .line.prev, .line.next { display: none; }
  .line.now { min-height: 52px; }
  .cell { --chs: 18px; }
  .tiles { margin-top: 4px; } .tile { padding: 3px 8px; } .tile b { font-size: 15px; }
  .nav { margin-bottom: 4px; }
  .kb-cap { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .au, .stardots, .demo-chip { animation: none !important; }
  * { transition-duration: .01s !important; }
}

/* ================= 主题包（body[data-theme] 只覆盖变量；极夜=默认 :root） ================= */
/* 迁移主题共享推导层: 新增主题只给核心色, 次级变量(线/底纹/按钮/极光/阴影)由此按核心色推导。
   必须置于所有主题块之前 —— 同特异性下后声明者胜, 老主题显式全量定义不受影响。 */
body[data-theme] {
  --glow: color-mix(in srgb, var(--acc) 24%, transparent);
  --line: color-mix(in srgb, var(--fg) 14%, transparent);
  --line2: color-mix(in srgb, var(--fg) 24%, transparent);
  --soft: color-mix(in srgb, var(--fg) 5%, transparent);
  --softline: color-mix(in srgb, var(--fg) 12%, transparent);
  --ghost: color-mix(in srgb, var(--fg) 7%, transparent);
  --au1: color-mix(in srgb, var(--acc) 18%, transparent);
  --au2: color-mix(in srgb, var(--acc2) 13%, transparent);
  --au3: color-mix(in srgb, var(--acc) 16%, transparent);
  --hero1: var(--fg); --hero2: var(--acc); --hero3: var(--acc2);
  --btn1: var(--acc); --btn2: color-mix(in srgb, var(--acc) 82%, var(--fg)); --btn3: var(--acc2);
  --curglow: color-mix(in srgb, var(--cur1) 35%, transparent);
  --shadow: 0 20px 55px -28px color-mix(in srgb, var(--fg) 32%, transparent);
}
body[data-theme=neon] {
  --bg:#060a18; --panel:#0a1020; --panel2:#0e1626; --glass:rgba(10,16,32,.72);
  --fg:#e8f0ff; --dim:#6d7ba6; --faint:#46527a;
  --acc:#00e5ff; --acc2:#ff2e63; --accink:#7ee7ff; --glow:rgba(0,229,255,.28);
  --au1:rgba(0,229,255,.2); --au2:rgba(255,46,99,.14); --au3:rgba(80,120,255,.2);
  --hero1:#eafcff; --hero2:#00e5ff; --hero3:#ff2e63;
  --btn1:#00c8e0; --btn2:#0090c8; --btn3:#7ee7ff;
  --cur1:#ff2e63; --cur2:#c026d3; --curglow:rgba(255,46,99,.45); --nowlt:#ffe66d;
  --line:rgba(120,180,255,.13); --line2:rgba(120,180,255,.24);
  --soft:rgba(120,180,255,.06); --softline:rgba(120,180,255,.14); --ghost:rgba(120,180,255,.08);
  --shadow:0 24px 70px -28px rgba(0,0,0,.85); --drawer:rgba(8,14,28,.97); --sheet:rgba(10,18,34,.98);
  --orange:#ffd166; --gold:#ffd166;
}
body[data-theme=neon] .dk-kb-host {
  --kb-key-bg:#101a2e; --kb-key-text:#d8e6ff; --kb-key-border:#22385e;
  --kb-key-special-bg:#0c1424; --kb-key-special-text:#6d7ba6;
  --kb-accent:#00e5ff; --kb-accent-glow:rgba(0,229,255,.3);
}

body[data-theme=sunset] {
  --bg:#150e0b; --panel:#1c130e; --panel2:#241811; --glass:rgba(30,19,13,.74);
  --fg:#f7ece0; --dim:#a8917c; --faint:#75614f;
  --acc:#f97316; --acc2:#fbbf24; --accink:#fdba74; --glow:rgba(249,115,22,.3);
  --au1:rgba(249,115,22,.22); --au2:rgba(251,191,36,.16); --au3:rgba(239,68,68,.16);
  --hero1:#fff3e6; --hero2:#fb923c; --hero3:#fbbf24;
  --btn1:#ea580c; --btn2:#d97706; --btn3:#fbbf24;
  --cur1:#f43f5e; --cur2:#ea580c; --curglow:rgba(244,63,94,.45); --nowlt:#fde68a;
  --line:rgba(253,186,116,.13); --line2:rgba(253,186,116,.24);
  --soft:rgba(253,186,116,.06); --softline:rgba(253,186,116,.14); --ghost:rgba(253,186,116,.08);
  --shadow:0 24px 70px -28px rgba(0,0,0,.8); --drawer:rgba(26,16,11,.97); --sheet:rgba(30,19,13,.98);
  --orange:#fbbf24;
}
body[data-theme=sunset] .dk-kb-host {
  --kb-key-bg:#241812; --kb-key-text:#f3e2d0; --kb-key-border:#3f2a1d;
  --kb-key-special-bg:#1d130e; --kb-key-special-text:#a8917c;
  --kb-accent:#f97316; --kb-accent-glow:rgba(249,115,22,.3);
}

body[data-theme=onyx] {
  --bg:#0c0b08; --panel:#14120d; --panel2:#1a1710; --glass:rgba(20,18,12,.74);
  --fg:#f0e6d2; --dim:#9c8f74; --faint:#6b6049;
  --acc:#d4af37; --acc2:#e8c96a; --accink:#e2c56a; --glow:rgba(212,175,55,.28);
  --au1:rgba(212,175,55,.16); --au2:rgba(120,90,30,.14); --au3:rgba(212,175,55,.1);
  --hero1:#faf3df; --hero2:#d4af37; --hero3:#f5e3a8;
  --btn1:#b8952e; --btn2:#8a6d1a; --btn3:#d4af37;
  --cur1:#c0392b; --cur2:#8a6d1a; --curglow:rgba(192,57,43,.45); --nowlt:#ffe08a;
  --line:rgba(212,175,55,.14); --line2:rgba(212,175,55,.26);
  --soft:rgba(212,175,55,.05); --softline:rgba(212,175,55,.13); --ghost:rgba(212,175,55,.07);
  --shadow:0 24px 70px -28px rgba(0,0,0,.85); --drawer:rgba(18,16,11,.97); --sheet:rgba(24,21,14,.98);
  --font-ch: "Songti SC","STSong","SimSun",serif;
}
body[data-theme=onyx] .dk-kb-host {
  --kb-key-bg:#1c1912; --kb-key-text:#eadfc6; --kb-key-border:#3a3323;
  --kb-key-special-bg:#16130d; --kb-key-special-text:#9c8f74;
  --kb-accent:#d4af37; --kb-accent-glow:rgba(212,175,55,.3);
}

body[data-theme=aurora] {
  --bg:#e8f6f3; --panel:#f2faf8; --panel2:#e0f0ec; --glass:rgba(255,255,255,.72);
  --fg:#14524d; --dim:#4f7d78; --faint:#7ba39e;
  --acc:#0ea5a0; --acc2:#6366f1; --accink:#0b8a86; --glow:rgba(14,165,160,.22);
  --au1:rgba(14,165,160,.2); --au2:rgba(99,102,241,.13); --au3:rgba(110,231,200,.2);
  --au-op:.9; --sd-op:0; --veil:rgba(232,246,243,0);
  --hero1:#0f4d49; --hero2:#0ea5a0; --hero3:#6366f1;
  --btn1:#0d9488; --btn2:#0f766e; --btn3:#38bdf8;
  --cur1:#e11d48; --cur2:#be123c; --curglow:rgba(225,29,72,.35); --nowlt:#b45309;
  --line:rgba(20,82,77,.14); --line2:rgba(20,82,77,.24);
  --soft:rgba(20,82,77,.05); --softline:rgba(20,82,77,.12); --ghost:rgba(20,82,77,.07);
  --shadow:0 20px 55px -28px rgba(20,82,77,.3); --drawer:rgba(250,255,254,.97); --sheet:rgba(255,255,255,.98);
  --ok:#15803d; --bad:#dc2626; --pink:#e11d48; --orange:#c2680c;
}
body[data-theme=aurora] .dk-kb-host {
  --kb-key-bg:#ffffff; --kb-key-text:#155e59; --kb-key-border:#cbe5e0;
  --kb-key-special-bg:#eef7f5; --kb-key-special-text:#6fa39d;
  --kb-accent:#0ea5a0; --kb-accent-glow:rgba(14,165,160,.25);
}

body[data-theme=apple] {
  --bg:#f5f5f7; --panel:#ffffff; --panel2:#eeeef2; --glass:rgba(255,255,255,.75);
  --fg:#1d1d1f; --dim:#6e6e73; --faint:#a1a1a6;
  --acc:#0071e3; --acc2:#34c759; --accink:#0a6cd0; --glow:rgba(0,113,227,.2);
  --au1:rgba(0,113,227,.08); --au2:rgba(52,199,89,.07); --au3:rgba(88,86,214,.07);
  --au-op:.9; --sd-op:0; --veil:rgba(245,245,247,0);
  --hero1:#1d1d1f; --hero2:#0071e3; --hero3:#34c759;
  --btn1:#0071e3; --btn2:#005bb8; --btn3:#34c759;
  --cur1:#ff3b30; --cur2:#d70015; --curglow:rgba(255,59,48,.35); --nowlt:#c2680c;
  --line:rgba(0,0,0,.09); --line2:rgba(0,0,0,.16);
  --soft:rgba(0,0,0,.045); --softline:rgba(0,0,0,.1); --ghost:rgba(0,0,0,.06);
  --shadow:0 20px 55px -30px rgba(0,0,0,.25); --drawer:rgba(255,255,255,.97); --sheet:rgba(255,255,255,.98);
  --ok:#17954a; --bad:#e0352b; --pink:#ff3b30; --orange:#c2680c; --gold:#b4830c;
}

body[data-theme=ink] {
  --bg:#f7f2e8; --panel:#fdfaf2; --panel2:#efe7d5; --glass:rgba(252,248,240,.75);
  --fg:#26221c; --dim:#9a8d75; --faint:#b7ab93;
  --acc:#3d6b99; --acc2:#8a6d3a; --accink:#345e88; --glow:rgba(61,107,153,.18);
  --au1:rgba(61,107,153,.1); --au2:rgba(138,109,58,.08); --au3:rgba(179,64,46,.06);
  --au-op:.9; --sd-op:0; --veil:rgba(247,242,232,0);
  --hero1:#26221c; --hero2:#3d6b99; --hero3:#8a6d3a;
  --btn1:#3d6b99; --btn2:#2f5a73; --btn3:#8a6d3a;
  --cur1:#b3402e; --cur2:#8a3a2a; --curglow:rgba(179,64,46,.35); --nowlt:#8a6d1a;
  --line:rgba(120,100,70,.18); --line2:rgba(120,100,70,.3);
  --soft:rgba(120,100,70,.06); --softline:rgba(120,100,70,.15); --ghost:rgba(120,100,70,.08);
  --shadow:0 20px 55px -28px rgba(80,60,30,.3); --drawer:rgba(250,245,232,.97); --sheet:rgba(253,250,244,.98);
  --ok:#4a7c59; --bad:#b3402e; --pink:#b3402e; --orange:#8a6d1a; --gold:#8a6d1a;
  --font-ch: "Kaiti SC","STKaiti","KaiTi","FangSong",serif;
}

body[data-theme=matcha] {
  --bg:#eef5e9; --panel:#f7fbf4; --panel2:#e2eedd; --glass:rgba(255,255,255,.72);
  --fg:#24402c; --dim:#5f8266; --faint:#8fae94;
  --acc:#4a8c3f; --acc2:#0e9488; --accink:#3d7a35; --glow:rgba(74,140,63,.2);
  --au1:rgba(74,140,63,.14); --au2:rgba(14,148,136,.1); --au3:rgba(163,177,72,.14);
  --au-op:.9; --sd-op:0; --veil:rgba(238,245,233,0);
  --hero1:#1f3a27; --hero2:#4a8c3f; --hero3:#0e9488;
  --btn1:#44823a; --btn2:#36702e; --btn3:#0e9488;
  --cur1:#c2410c; --cur2:#9a3412; --curglow:rgba(194,65,12,.35); --nowlt:#92600a;
  --line:rgba(36,64,44,.14); --line2:rgba(36,64,44,.24);
  --soft:rgba(36,64,44,.05); --softline:rgba(36,64,44,.12); --ghost:rgba(36,64,44,.07);
  --shadow:0 20px 55px -28px rgba(36,64,44,.3); --drawer:rgba(247,251,244,.97); --sheet:rgba(255,255,255,.98);
  --bad:#c2410c; --pink:#c2410c; --orange:#92600a; --gold:#92600a;
}

body[data-theme=rose] {
  --bg:#fdf2f6; --panel:#fff8fa; --panel2:#f7e3ec; --glass:rgba(255,255,255,.75);
  --fg:#5b2438; --dim:#a06377; --faint:#c295a4;
  --acc:#d6558a; --acc2:#8b5cf6; --accink:#c0467c; --glow:rgba(214,85,138,.22);
  --au1:rgba(214,85,138,.14); --au2:rgba(139,92,246,.1); --au3:rgba(251,146,60,.1);
  --au-op:.9; --sd-op:0; --veil:rgba(253,242,246,0);
  --hero1:#4d1d30; --hero2:#d6558a; --hero3:#8b5cf6;
  --btn1:#cf4a82; --btn2:#b03a6e; --btn3:#8b5cf6;
  --cur1:#e11d48; --cur2:#be123c; --curglow:rgba(225,29,72,.35); --nowlt:#b45309;
  --line:rgba(91,36,56,.13); --line2:rgba(91,36,56,.22);
  --soft:rgba(91,36,56,.05); --softline:rgba(91,36,56,.12); --ghost:rgba(91,36,56,.07);
  --shadow:0 20px 55px -28px rgba(91,36,56,.3); --drawer:rgba(255,248,250,.97); --sheet:rgba(255,255,255,.98);
  --bad:#e11d48; --pink:#e11d48;
}

body[data-theme=minimal] {
  --bg:#ffffff; --panel:#ffffff; --panel2:#f4f4f5; --glass:rgba(255,255,255,.85);
  --fg:#111111; --dim:#9b9b9e; --faint:#c4c4c7;
  --acc:#111111; --acc2:#111111; --accink:#111111; --glow:rgba(0,0,0,.08);
  --au-op:0; --sd-op:0; --veil:rgba(255,255,255,0);
  --hero1:#111; --hero2:#333; --hero3:#111;
  --btn1:#111; --btn2:#000; --btn3:#333;
  --cur1:#111; --cur2:#000; --curglow:rgba(0,0,0,.3); --nowlt:#000;
  --line:rgba(0,0,0,.1); --line2:rgba(0,0,0,.18);
  --soft:rgba(0,0,0,.04); --softline:rgba(0,0,0,.1); --ghost:rgba(0,0,0,.06);
  --shadow:0 16px 45px -30px rgba(0,0,0,.3); --drawer:rgba(255,255,255,.98); --sheet:rgba(255,255,255,.99);
  --ok:#15803d; --bad:#e11d48; --pink:#e11d48; --orange:#8a5a00; --gold:#8a5a00;
}
body[data-theme=minimal] .cell.cur .ch { color:#fff; }
body[data-theme=ink] .cell .ch, body[data-theme=onyx] .cell .ch { font-family: var(--font-ch); }

/* ================= 迁移主题 20 套(自汉字打字页 v1 主题包移植; 与原 10 套同名同神韵的不再重复) ================= */
body[data-theme=cream] {
  --bg:linear-gradient(150deg,#fdf6ec,#fbe8ee 55%,#e9f3ef); --panel:#fdf9f5; --panel2:#f3e9e6; --glass:rgba(255,255,255,.65);
  --fg:#5b4a54; --dim:#a38a99; --faint:color-mix(in srgb,#a38a99 70%,transparent);
  --acc:#8e46c9; --acc2:#e879a9; --accink:#7a3cb0;
  --ok:#15803d; --bad:#e04848; --gold:#8a6d1a; --orange:#b45309; --pink:#e04848; --nowlt:#8a6d1a;
  --cur1:#c2417a; --cur2:#a93662; --au-op:.85; --sd-op:0; --veil:rgba(253,246,236,0);
  --drawer:rgba(253,249,245,.97); --sheet:rgba(255,255,255,.98);
  --font-ch:"Yuanti SC","PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
}
body[data-theme=starry] {
  --bg:linear-gradient(180deg,#cdd7ff 0%,#e9e6ff 60%,#fdefff 100%); --panel:#f4f4ff; --panel2:#e4e4f7; --glass:rgba(255,255,255,.66);
  --fg:#373a6b; --dim:#7f86b3; --faint:color-mix(in srgb,#7f86b3 70%,transparent);
  --acc:#7a7bff; --acc2:#a78bfa; --accink:#5d5ff0;
  --ok:#15803d; --bad:#e04848; --gold:#b45309; --orange:#b45309; --pink:#e04848; --nowlt:#b45309;
  --cur1:#6366f1; --cur2:#4f46e5; --au-op:.85; --sd-op:0; --veil:rgba(233,230,255,0);
  --drawer:rgba(248,248,255,.97); --sheet:rgba(255,255,255,.98);
}
body[data-theme=press] {
  --bg:repeating-linear-gradient(0deg,#f4ecd8,#f4ecd8 3px,#f1e8d2 3px,#f1e8d2 6px); --panel:#fbf5e6; --panel2:#efe6cf; --glass:rgba(255,250,236,.72);
  --fg:#221d17; --dim:#857a68; --faint:color-mix(in srgb,#857a68 70%,transparent);
  --acc:#1f4d7a; --acc2:#8c2f1e; --accink:#1a4166;
  --ok:#3e6b4f; --bad:#8c2f1e; --gold:#8a6d1a; --orange:#8c2f1e; --pink:#8c2f1e; --nowlt:#8a6d1a;
  --cur1:#8c2f1e; --cur2:#75261a; --au-op:.5; --sd-op:0; --veil:rgba(244,236,216,0);
  --drawer:#f4ecd8; --sheet:#fffaf0;
  --font-ch:"Songti SC","SimSun",Georgia,"Microsoft YaHei","PingFang SC","Noto Sans SC",serif;
}
body[data-theme=nebula] {
  --bg:linear-gradient(180deg,#ffd9f2 0%,#e3deff 55%,#d9f1ff 100%); --panel:#f6f1fc; --panel2:#e9e0f5; --glass:rgba(255,255,255,.68);
  --fg:#5a3a72; --dim:#9d7cbb; --faint:color-mix(in srgb,#9d7cbb 70%,transparent);
  --acc:#b95fd0; --acc2:#6f9bff; --accink:#9a48b3;
  --ok:#15803d; --bad:#e04848; --gold:#b45309; --orange:#b45309; --pink:#e04848; --nowlt:#b45309;
  --cur1:#a855f7; --cur2:#9333ea; --au-op:.85; --sd-op:0; --veil:rgba(240,235,255,0);
  --drawer:rgba(250,246,253,.97); --sheet:rgba(255,255,255,.98);
}
body[data-theme=aqua] {
  --bg:linear-gradient(180deg,#d6f5ff 0%,#aee6ff 60%,#dcf7ff 100%); --panel:#eefaff; --panel2:#d8effc; --glass:rgba(255,255,255,.74);
  --fg:#075d7a; --dim:#4f93ab; --faint:color-mix(in srgb,#4f93ab 70%,transparent);
  --acc:#0d8ecf; --acc2:#22d3ee; --accink:#0a76a8;
  --ok:#15803d; --bad:#e04848; --gold:#b45309; --orange:#b45309; --pink:#e04848; --nowlt:#b45309;
  --cur1:#0284c7; --cur2:#0369a1; --au-op:.85; --sd-op:0; --veil:rgba(220,247,255,0);
  --drawer:rgba(240,250,254,.97); --sheet:rgba(255,255,255,.98);
}
body[data-theme=sakura] {
  --bg:linear-gradient(165deg,#fdf0f4,#fbe4ec 55%,#f3e8f7); --panel:#fdf6f9; --panel2:#f5e5ee; --glass:rgba(255,255,255,.6);
  --fg:#5c3d4e; --dim:#b994ab; --faint:color-mix(in srgb,#b994ab 70%,transparent);
  --acc:#9d5fb8; --acc2:#ef7cab; --accink:#86499e;
  --ok:#15803d; --bad:#e04848; --gold:#8a6d1a; --orange:#c2410c; --pink:#e04848; --nowlt:#8a6d1a;
  --cur1:#db2777; --cur2:#be185d; --au-op:.85; --sd-op:0; --veil:rgba(253,240,244,0);
  --drawer:rgba(253,246,249,.97); --sheet:rgba(255,255,255,.98);
  --font-ch:"Hiragino Mincho ProN","Songti SC","Microsoft YaHei","PingFang SC","Noto Sans SC",serif;
}
body[data-theme=candy] {
  --bg:linear-gradient(120deg,#ffd9ec 0%,#fff2b8 45%,#c9f1ff 100%); --panel:#fff7fb; --panel2:#ffeef6; --glass:rgba(255,255,255,.72);
  --fg:#7a3b68; --dim:#b98aa8; --faint:color-mix(in srgb,#b98aa8 70%,transparent);
  --acc:#f0509a; --acc2:#38bdf8; --accink:#d43d85;
  --ok:#15803d; --bad:#e04848; --gold:#b45309; --orange:#b45309; --pink:#e04848; --nowlt:#b45309;
  --cur1:#ec4899; --cur2:#db2777; --au-op:.8; --sd-op:0; --veil:rgba(255,247,251,0);
  --drawer:rgba(255,249,253,.97); --sheet:rgba(255,255,255,.98);
}
body[data-theme=vapor] {
  --bg:linear-gradient(180deg,#ffd9e8 0%,#e8d5ff 46%,#bfe3ff 53%,#e7f3ff 100%); --panel:#f9f4ff; --panel2:#ece4f9; --glass:rgba(255,255,255,.7);
  --fg:#5a4a8a; --dim:#9a8ac0; --faint:color-mix(in srgb,#9a8ac0 70%,transparent);
  --acc:#c46fd8; --acc2:#6ee3c5; --accink:#a94fc4;
  --ok:#15803d; --bad:#e04848; --gold:#b45309; --orange:#b45309; --pink:#e04848; --nowlt:#b45309;
  --cur1:#a855f7; --cur2:#9333ea; --au-op:.8; --sd-op:0; --veil:rgba(249,244,255,0);
  --drawer:rgba(252,248,255,.97); --sheet:rgba(255,255,255,.98);
}
body[data-theme=meteor] {
  --bg:linear-gradient(180deg,#ffe3ae 0%,#ffc7d4 55%,#d9c8ff 100%); --panel:#fdf4ec; --panel2:#f4e6df; --glass:rgba(255,255,255,.66);
  --fg:#6b4a6e; --dim:#a586a8; --faint:color-mix(in srgb,#a586a8 70%,transparent);
  --acc:#f06fa0; --acc2:#8b7bd8; --accink:#d5568c;
  --ok:#15803d; --bad:#e04848; --gold:#b45309; --orange:#b45309; --pink:#e04848; --nowlt:#b45309;
  --cur1:#ec4899; --cur2:#db2777; --au-op:.8; --sd-op:0; --veil:rgba(255,240,244,0);
  --drawer:rgba(253,246,250,.97); --sheet:rgba(255,255,255,.98);
}
body[data-theme=firefly] {
  --bg:linear-gradient(180deg,#eafff3 0%,#d5f6e3 60%,#c2f0d4 100%); --panel:#f0fbf5; --panel2:#dcefe3; --glass:rgba(255,255,255,.72);
  --fg:#1e5c40; --dim:#5e9a7c; --faint:color-mix(in srgb,#5e9a7c 70%,transparent);
  --acc:#17a06a; --acc2:#0ea5a0; --accink:#148559;
  --ok:#15803d; --bad:#e04848; --gold:#8a6d1a; --orange:#b45309; --pink:#e04848; --nowlt:#8a6d1a;
  --cur1:#059669; --cur2:#047857; --au-op:.85; --sd-op:0; --veil:rgba(234,255,243,0);
  --drawer:rgba(244,253,248,.97); --sheet:rgba(255,255,255,.98);
}
body[data-theme=bubble] {
  --bg:linear-gradient(180deg,#bfe9ff 0%,#8fd3ff 55%,#e6f8ff 100%); --panel:#ecf8ff; --panel2:#d6eefa; --glass:rgba(255,255,255,.74);
  --fg:#0b4f79; --dim:#4f7fa3; --faint:color-mix(in srgb,#4f7fa3 70%,transparent);
  --acc:#ff6f9c; --acc2:#0d8ecf; --accink:#e8578a;
  --ok:#15803d; --bad:#e04848; --gold:#b45309; --orange:#b45309; --pink:#e04848; --nowlt:#b45309;
  --cur1:#0284c7; --cur2:#0369a1; --au-op:.8; --sd-op:0; --veil:rgba(230,248,255,0);
  --drawer:rgba(240,250,255,.97); --sheet:rgba(255,255,255,.98);
}
body[data-theme=snow] {
  --bg:linear-gradient(180deg,#e7efff 0%,#f7faff 58%,#dfe9fb 100%); --panel:#f5f8ff; --panel2:#e4ebf8; --glass:rgba(255,255,255,.75);
  --fg:#3a4a6e; --dim:#7a8ab0; --faint:color-mix(in srgb,#7a8ab0 70%,transparent);
  --acc:#6f9bff; --acc2:#a5b8e8; --accink:#5a82e8;
  --ok:#15803d; --bad:#e04848; --gold:#b45309; --orange:#b45309; --pink:#e04848; --nowlt:#b45309;
  --cur1:#4f7df6; --cur2:#3b6ae0; --au-op:.85; --sd-op:0; --veil:rgba(247,250,255,0);
  --drawer:rgba(247,251,255,.97); --sheet:rgba(255,255,255,.98);
}
body[data-theme=inkwash] {
  --bg:linear-gradient(165deg,#f6f2e9 0%,#efe8d8 60%,#e8dfcc 100%); --panel:#faf6ec; --panel2:#ede5d2; --glass:rgba(255,252,244,.72);
  --fg:#2f2a24; --dim:#a89c86; --faint:color-mix(in srgb,#a89c86 70%,transparent);
  --acc:#b3402e; --acc2:#3d6b99; --accink:#993826;
  --ok:#5c8a6a; --bad:#c0392b; --gold:#8a6d1a; --orange:#b3402e; --pink:#c0392b; --nowlt:#8a6d1a;
  --cur1:#b3402e; --cur2:#993826; --au-op:.6; --sd-op:0; --veil:rgba(246,242,233,0);
  --drawer:rgba(250,246,237,.97); --sheet:rgba(255,252,244,.98);
  --font-ch:"Kaiti SC","KaiTi","STKaiti","Microsoft YaHei","PingFang SC","Noto Sans SC",serif;
}
body[data-theme=sunset2] {
  --bg:linear-gradient(150deg,#ff9a6c,#ff5e8e 45%,#a4508b 85%); --panel:rgba(255,246,240,.35); --panel2:rgba(255,246,240,.28); --glass:rgba(255,255,255,.16);
  --fg:#fff8f4; --dim:rgba(255,245,240,.62); --faint:rgba(255,245,240,.4);
  --acc:#ffde9c; --acc2:#ffffff; --accink:#ffe9c8;
  --ok:#9df0bd; --bad:#ff7575; --gold:#ffd982; --orange:#ffd982; --pink:#ff7575; --nowlt:#ffe9c8;
  --cur1:#7c2d5e; --cur2:#601f4a; --au-op:.4; --sd-op:0; --veil:rgba(90,20,70,.2);
  --drawer:rgba(90,20,70,.92); --sheet:rgba(120,35,95,.94);
  --font-ch:"Songti SC","Microsoft YaHei","PingFang SC","Noto Sans SC",serif;
}
body[data-theme=neon2] {
  --bg:linear-gradient(160deg,#0a0e1a 0%,#0d1226 60%,#12081e 100%); --panel:#0d1226; --panel2:#131a34; --glass:rgba(16,22,40,.55);
  --fg:#e8f0ff; --dim:#5d6b93; --faint:#46527a;
  --acc:#00e5ff; --acc2:#ff2e63; --accink:#7ee7ff;
  --ok:#00ffa3; --bad:#ff2e63; --gold:#ffd23c; --orange:#ffd23c; --pink:#ff2e63; --nowlt:#ffd23c;
  --cur1:#00b8d4; --cur2:#0091ad; --au-op:.6; --sd-op:.3; --veil:rgba(6,8,16,.45);
  --drawer:rgba(10,14,26,.97); --sheet:rgba(16,22,40,.98);
}
body[data-theme=neon2] .dk-kb-host {
  --kb-key-bg:#101830; --kb-key-text:#cfe6ff; --kb-key-border:rgba(0,229,255,.22);
  --kb-key-special-bg:#0c1222; --kb-key-special-text:#5d6b93;
  --kb-accent:#00e5ff; --kb-accent-glow:rgba(0,229,255,.25);
}
body[data-theme=cyber] {
  --bg:#050a06; --panel:#06140a; --panel2:#0a1c0e; --glass:rgba(6,20,10,.55);
  --fg:#b8ffcf; --dim:#3f7a53; --faint:#2d5c3e;
  --acc:#39ff5a; --acc2:#00e5ff; --accink:#7dffa0;
  --ok:#39ff5a; --bad:#ff5a5a; --gold:#ffd23c; --orange:#ffd23c; --pink:#ff5a5a; --nowlt:#ffd23c;
  --cur1:#059669; --cur2:#047857; --au-op:.6; --sd-op:.3; --veil:rgba(3,8,5,.4);
  --drawer:rgba(4,14,7,.97); --sheet:rgba(6,20,10,.98);
  --font-ch:"JetBrains Mono","Microsoft YaHei","PingFang SC","Noto Sans SC",monospace;
}
body[data-theme=cyber] .dk-kb-host {
  --kb-key-bg:#0a2012; --kb-key-text:#9dffb7; --kb-key-border:rgba(57,255,90,.25);
  --kb-key-special-bg:#06140a; --kb-key-special-text:#3f7a53;
  --kb-accent:#39ff5a; --kb-accent-glow:rgba(57,255,90,.25);
}
body[data-theme=glitch] {
  --bg:#0a0a0d; --panel:#101016; --panel2:#16161e; --glass:rgba(16,16,22,.7);
  --fg:#f2f2fa; --dim:#9a9ab2; --faint:#6a6a82;
  --acc:#ff3c78; --acc2:#3cffc0; --accink:#ff6b9d;
  --ok:#3cffc0; --bad:#ff3c3c; --gold:#ffd23c; --orange:#ffd23c; --pink:#ff3c78; --nowlt:#ffd23c;
  --cur1:#ff3c78; --cur2:#d92f66; --au-op:.55; --sd-op:.25; --veil:rgba(5,5,8,.45);
  --drawer:rgba(12,12,17,.97); --sheet:rgba(16,16,22,.98);
  --font-ch:"JetBrains Mono",Consolas,"Microsoft YaHei","PingFang SC","Noto Sans SC",monospace;
}
body[data-theme=glitch] .dk-kb-host {
  --kb-key-bg:#15151d; --kb-key-text:#d8d8e8; --kb-key-border:rgba(255,60,120,.22);
  --kb-key-special-bg:#101016; --kb-key-special-text:#9a9ab2;
  --kb-accent:#ff3c78; --kb-accent-glow:rgba(255,60,120,.25);
}
body[data-theme=magma] {
  --bg:linear-gradient(180deg,#12060a,#1e0906 60%,#0d0405); --panel:#1c0b08; --panel2:#26100b; --glass:rgba(36,12,10,.55);
  --fg:#fff0e6; --dim:#b07a63; --faint:#8a5c4a;
  --acc:#ff7a2f; --acc2:#ffd9a8; --accink:#ffb37a;
  --ok:#9fe870; --bad:#ff4d4d; --gold:#ffd9a8; --orange:#ffd9a8; --pink:#ff4d4d; --nowlt:#ffd9a8;
  --cur1:#c2410c; --cur2:#9a3412; --au-op:.6; --sd-op:.25; --veil:rgba(10,3,3,.45);
  --drawer:rgba(24,7,6,.97); --sheet:rgba(36,12,10,.98);
  --font-ch:"Songti SC","Microsoft YaHei","PingFang SC","Noto Sans SC",serif;
}
body[data-theme=magma] .dk-kb-host {
  --kb-key-bg:#2a100a; --kb-key-text:#ffe8d9; --kb-key-border:rgba(255,122,47,.25);
  --kb-key-special-bg:#1c0b08; --kb-key-special-text:#b07a63;
  --kb-accent:#ff7a2f; --kb-accent-glow:rgba(255,122,47,.25);
}
body[data-theme=grid] {
  --bg:#05060f; --panel:#0a0e20; --panel2:#10152c; --glass:rgba(10,14,32,.6);
  --fg:#e6ecff; --dim:#6a7396; --faint:#4a5278;
  --acc:#5d8bff; --acc2:#46e6a0; --accink:#7ba4ff;
  --ok:#46e6a0; --bad:#ff5f7e; --gold:#ffd23c; --orange:#ffd23c; --pink:#ff5f7e; --nowlt:#ffd23c;
  --cur1:#3b82f6; --cur2:#2563eb; --au-op:.6; --sd-op:.25; --veil:rgba(3,4,10,.45);
  --drawer:rgba(6,9,22,.97); --sheet:rgba(10,14,32,.98);
  --font-ch:"JetBrains Mono","PingFang SC","Microsoft YaHei","Noto Sans SC",monospace;
}
body[data-theme=grid] .dk-kb-host {
  --kb-key-bg:#0d1226; --kb-key-text:#dbe4ff; --kb-key-border:rgba(93,139,255,.25);
  --kb-key-special-bg:#0a0e20; --kb-key-special-text:#6a7396;
  --kb-accent:#5d8bff; --kb-accent-glow:rgba(93,139,255,.25);
}
body[data-theme=beam] {
  --bg:#0a0a0c; --panel:#121216; --panel2:#18181e; --glass:rgba(18,18,22,.6);
  --fg:#f5efdf; --dim:#8a8778; --faint:#67645a;
  --acc:#d4af37; --acc2:#ffd982; --accink:#e8c96a;
  --ok:#a3d977; --bad:#e06060; --gold:#ffd982; --orange:#ffd982; --pink:#e06060; --nowlt:#ffd982;
  --cur1:#a16207; --cur2:#854d0e; --au-op:.55; --sd-op:.2; --veil:rgba(5,5,6,.45);
  --drawer:rgba(12,12,14,.97); --sheet:rgba(18,18,22,.98);
  --font-ch:"Didot","Songti SC","Microsoft YaHei","PingFang SC","Noto Sans SC",serif;
}
body[data-theme=beam] .dk-kb-host {
  --kb-key-bg:#17171c; --kb-key-text:#f5efdf; --kb-key-border:rgba(255,217,130,.22);
  --kb-key-special-bg:#121216; --kb-key-special-text:#8a8778;
  --kb-accent:#ffd982; --kb-accent-glow:rgba(255,217,130,.25);
}
/* 迁移主题: 书法体主题汉字联动 */
body[data-theme=inkwash] .cell .ch, body[data-theme=sakura] .cell .ch,
body[data-theme=press] .cell .ch, body[data-theme=sunset2] .cell .ch,
body[data-theme=magma] .cell .ch, body[data-theme=beam] .cell .ch { font-family: var(--font-ch); }

/* 主题卡 */
.th-card { display: flex; align-items: center; padding: 12px 14px; margin-bottom: 10px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--soft); cursor: pointer; transition: border-color .15s, transform .12s; }
.th-card:hover { border-color: var(--acc); transform: translateX(2px); }
.th-card.on { border-color: color-mix(in srgb, var(--acc) 70%, transparent); background: color-mix(in srgb, var(--acc) 11%, transparent); box-shadow: 0 0 0 3px var(--glow); }
.th-card .ti { font-size: 20px; margin-right: 12px; }
.th-card .tn b { font-size: 15px; display: block; }
.th-card .tn p { font-size: 11.5px; color: var(--dim); margin-top: 2px; }
.th-card .th-dots { margin-left: auto; display: flex; }
.th-card .th-dots i { width: 15px; height: 15px; border-radius: 50%; margin-left: 5px; border: 1px solid rgba(128,128,128,.35); }
.th-card .ck { color: var(--accink); font-size: 13px; margin-left: 8px; }

/* ================= 3.0 新手化组件 ================= */
/* 首页次要链接行 */
.hero-links { margin-top: 12px; font-size: 13px; color: var(--faint); }
.hero-links button { border: 0; background: none; color: var(--dim); font-size: 13px; cursor: pointer; padding: 4px 2px; }
.hero-links button:hover { color: var(--accink); }
.hero-links i { font-style: normal; margin: 0 10px; color: var(--faint); }

/* 新手三步条 */
.steps3-wrap { max-width: 1040px; margin: 5vh auto 0; }
.steps3 { display: flex; }
.s3 { flex: 1 1 0; min-width: 0; margin: 0 8px; padding: 18px 18px 16px; border-radius: var(--r-lg); position: relative;
  background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow); cursor: pointer;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .2s, border-color .2s; }
.s3:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--acc) 55%, transparent); }
.s3 .s3-no { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; margin-bottom: 10px;
  background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--accink);
  border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); }
.s3 b { font-size: 16px; display: block; }
.s3 p { font-size: 12.5px; color: var(--dim); margin-top: 5px; line-height: 1.8; }
.s3 .s3-go { position: absolute; right: 14px; top: 16px; font-size: 12px; color: var(--accink); }
.s3::after { content: ""; position: absolute; right: -14px; top: 50%; width: 12px; height: 2px; background: var(--line2); }
.s3:last-child::after { display: none; }
@media (max-width: 760px) {
  .steps3 { flex-direction: column; }
  .s3 { margin: 0 0 12px; }
  .s3::after { display: none; }
}

/* 课程地图五步分组 */
.stage { margin: 0 0 6px; }
.stage-head { display: flex; align-items: baseline; margin: 18px 6px 8px; }
.stage-head .st-tag { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--accink);
  background: color-mix(in srgb, var(--acc) 13%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent);
  border-radius: 999px; padding: 3px 12px; margin-right: 12px; white-space: nowrap; }
.stage-head .st-tit { font-size: 16px; font-weight: 700; }
.stage-head .st-desc { font-size: 12.5px; color: var(--faint); margin-left: 10px; }
.stage .journey { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .stage .journey { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stage .journey { grid-template-columns: 1fr; } }
#journey { display: block; }

/* 声母/韵母/零声母 总表（第1课） */
.py-table { border-radius: var(--r-md); border: 1px solid var(--softline); background: var(--soft); padding: 12px 14px; margin: 8px 0; }
.py-table .pt-cap { font-size: 12.5px; color: var(--dim); margin-bottom: 8px; }
.py-row { display: flex; flex-wrap: wrap; margin: 0 -3px; }
.py-chip { margin: 3px; padding: 6px 10px 5px; border-radius: 9px; background: var(--panel2);
  border: 1px solid var(--softline); text-align: center; min-width: 44px; }
.py-chip b { display: block; font-size: 16px; font-weight: 800; line-height: 1.25; color: var(--fg); }
.py-chip i { display: block; font-style: normal; font-size: 10.5px; color: var(--faint); line-height: 1.5; white-space: nowrap; }
.py-chip.sp b { color: var(--accink); }                    /* zh/ch/sh 特殊声母 */
.py-chip.yw b { color: var(--orange); }                    /* y/w 开头字母 */
.py-chip.zero b { color: var(--gold); }
.py-g { display: flex; align-items: baseline; margin: 10px 0 4px; }
.py-g em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--accink); white-space: nowrap; margin-right: 10px; }
.py-g span { font-size: 11.5px; color: var(--faint); }
.py-g2 { border-top: 1px dashed var(--softline); margin-top: 10px; padding-top: 8px; }
.py-note { font-size: 12.5px; color: var(--dim); line-height: 1.9; margin-top: 8px; }
.py-note b { color: var(--fg); }

/* 本课你将学会 */
.takeaway { max-width: 860px; margin: 0 auto 14px; padding: 14px 20px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ok) 8%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 28%, transparent); }
.takeaway .tk-t { font-size: 13px; font-weight: 700; color: var(--ok); margin-bottom: 6px; }
.takeaway ul { margin: 0; padding: 0; list-style: none; }
.takeaway li { font-size: 13.5px; color: var(--fg); line-height: 2; }
.takeaway li::before { content: "✓ "; color: var(--ok); font-weight: 700; }

/* 新手引导浮层 */
.g-step { min-height: 190px; text-align: center; padding-top: 26px; }
.g-step .g-ico { font-size: 44px; line-height: 1.2; }
.g-step b { display: block; font-size: 19px; margin: 12px 0 8px; }
.g-step p { font-size: 14px; color: var(--dim); line-height: 2; max-width: 330px; margin: 0 auto; }
.g-step p .kcap { margin: 0 2px; }
.g-dots { text-align: center; margin-top: 4px; }
.g-dots i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--softline); margin: 0 4px; }
.g-dots i.on { background: var(--acc); width: 18px; border-radius: 4px; }

/* 打字页顶栏: 说明高亮 */
.tbtn.lead { color: var(--accink); border-color: color-mix(in srgb, var(--acc) 55%, transparent); }
@media (max-width: 560px) { .s3 { padding: 14px; } .stage-head .st-desc { display: none; } }

/* ================= 3.1 简化版首页（清单式课程） ================= */
.hero { margin-top: 6vh; }
.stage-sep { display: flex; align-items: baseline; margin: 26px 4px 6px; padding-bottom: 6px; border-bottom: 1px solid var(--softline); }
.stage-sep span { font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--accink); }
.stage-sep i { font-style: normal; font-size: 12px; color: var(--faint); margin-left: 10px; }
.lrow { display: flex; align-items: center; padding: 14px 12px; margin: 6px 0; border-radius: var(--r-md);
  background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow); cursor: pointer;
  transition: transform .15s ease, border-color .2s; }
.lrow:hover { transform: translateX(4px); border-color: color-mix(in srgb, var(--acc) 45%, transparent); }
.lrow .ln { width: 44px; height: 44px; border-radius: 12px; margin-right: 14px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800;
  background: var(--soft); border: 1px solid var(--softline); color: var(--accink); }
.lrow .lt { flex: 1; min-width: 0; }
.lrow .lt b { font-size: 15.5px; font-weight: 700; display: block; }
.lrow .lt p { font-size: 12.5px; color: var(--dim); margin-top: 3px; line-height: 1.7;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .lr { text-align: right; margin: 0 10px 0 14px; flex: 0 0 auto; }
.lrow .lr b { display: block; font-size: 14px; color: var(--accink); }
.lrow .lr.ing b { color: var(--fg); }
.lrow .lr b.dn { color: var(--ok); font-weight: 600; }
.lrow .lr span { font-size: 11.5px; color: var(--faint); }
.lrow .la { color: var(--faint); font-size: 18px; flex: 0 0 auto; }
.home-foot { padding: 20px 8px 34px; }
.hf-bar { height: 4px; border-radius: 2px; background: var(--soft); overflow: hidden; margin-bottom: 10px; }
.hf-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--btn1), var(--acc2)); }
.hf-line { display: flex; justify-content: center; flex-wrap: wrap; font-size: 12.5px; color: var(--dim); }
.hf-line b { color: var(--fg); }
.hf-star { color: var(--gold); margin: 0 14px; }
.hf-dim { color: var(--faint); }
@media (max-width: 560px) {
  .lrow { padding: 12px 10px; }
  .lrow .lt p { white-space: normal; }
  .lrow .lr span { display: none; }
}
.lrow.next { border-color: color-mix(in srgb, var(--acc) 55%, transparent); box-shadow: 0 0 0 3px var(--glow), var(--shadow); }
.lrow.next .ln { background: linear-gradient(135deg, var(--btn1), var(--btn2)); color: #fff; border-color: transparent; }
.lrow.next .lr b { color: var(--accink); font-weight: 800; }

/* ================= 五笔训练营键帽标签层(三角布局) ================= */
/* 三视图各司其职: 字根键盘=区位键名+字母+字根, 简码键盘=字母+简码字, 标准键盘=素键 */
.sp-kb-wrap.v-root .dk-kb-key .sp-base, .sp-kb-wrap.v-jian .dk-kb-key .sp-base {
  position: absolute; top: 2px; right: 10px; margin: 0;
  font-size: calc(var(--kb-fs, 16.5px) * .58); font-weight: 600; color: var(--dim); }
.sp-kb-wrap .dk-kb-key[data-key="space"] .sp-kc { position: absolute; bottom: 3px; left: 8px; margin: 0; }
/* v-root: 左上 区位号+键名字(按区分色) */
.sp-kb-wrap.v-root .dk-kb-key .sp-kl {
  position: absolute; top: 2px; left: 3px; margin: 0;
  font-size: calc(var(--kb-fs, 16.5px) * .55); line-height: 1; font-weight: 700; white-space: nowrap;
  font-family: "Inter", "Noto Sans SC", sans-serif; }
.sp-kb-wrap.v-root .dk-kb-key[data-zone="1"] .sp-kl { color: #16a34a; }
.sp-kb-wrap.v-root .dk-kb-key[data-zone="2"] .sp-kl { color: #2563eb; }
.sp-kb-wrap.v-root .dk-kb-key[data-zone="3"] .sp-kl { color: #ea580c; }
.sp-kb-wrap.v-root .dk-kb-key[data-zone="4"] .sp-kl { color: #db2777; }
.sp-kb-wrap.v-root .dk-kb-key[data-zone="5"] .sp-kl { color: #9333ea; }
.sp-kb-wrap.v-root .dk-kb-key .sp-kl.z-learn { color: var(--faint); font-weight: 500; }
/* v-root: 左下 字根分两行完整显示(字号由 JS rowsFontSize 按实际字体量宽内联适配, 不再截断) */
.sp-kb-wrap.v-root .dk-kb-key .sp-kc { position: absolute; bottom: 2px; left: 3px; margin: 0; }
.sp-kb-wrap .dk-kb-key .sp-kc.kl-rows { display: flex; flex-direction: column; align-items: flex-start; }
.sp-kb-wrap .dk-kb-key .sp-kc.kl-rows i { display: flex; gap: 1.5px; font-style: normal; }
.sp-kb-wrap .dk-kb-key .sp-kc.kl-rows b { font-weight: 600; }
/* v-jian: 左下 一级简码字(大号) */
.sp-kb-wrap.v-jian .dk-kb-key .sp-kl {
  position: absolute; bottom: 2px; left: 3px; margin: 0;
  font-size: calc(var(--kb-fs, 16.5px) * .95); line-height: 1.1; font-weight: 700; color: var(--accink);
  font-family: "Inter", "Noto Sans SC", sans-serif; }
/* 字根表抽屉: 五区卡 */
.zk-zone { border-radius: var(--r-md); border: 1px solid var(--softline); background: var(--soft); padding: 12px 14px; margin: 10px 0; }

/* 首页右侧"全部关卡"竖排菜单钮 + 关卡抽屉列表 */
#lv-side { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 40;
  writing-mode: vertical-rl; letter-spacing: 3px; padding: 16px 8px; cursor: pointer;
  border: 1px solid var(--line); border-right: 0; border-radius: 12px 0 0 12px;
  background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--accink); font-size: 13px; font-weight: 600; box-shadow: -4px 6px 24px -12px rgba(0,0,0,.5); }
#lv-side:hover { color: var(--fg); border-color: var(--acc); }
.lvv-course { display: flex; align-items: center; gap: 8px; margin: 16px 0 4px; font-size: 13px; }
.lvv-course b { flex: 1; color: var(--fg); }
.lvv-course i { font-style: normal; font-size: 11px; color: var(--dim); }
.lvv-part { margin: 6px 0 10px; }
.lvv-part > span { display: block; font-size: 12px; color: var(--dim); margin-bottom: 2px; }
#dr-levels-body .lv-g { width: 36px; height: 36px; margin: 3px; border-radius: 9px; }
.zk-zone .zk-h { display: flex; align-items: baseline; margin-bottom: 8px; }
.zk-zone .zk-h b { font-size: 14px; margin-right: 10px; }
.zk-zone .zk-h span { font-size: 11.5px; color: var(--faint); }
.zk-key { display: flex; margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: var(--panel2);
  border: 1px solid var(--softline); }
.zk-key .zk-k { flex: 0 0 66px; font-weight: 800; font-size: 14px; color: var(--accink); }
.zk-key .zk-r { flex: 1; min-width: 0; font-size: 12.5px; color: var(--fg); line-height: 1.7; }
.zk-key .zk-r i { font-style: normal; display: block; font-size: 11px; color: var(--dim); }

/* 结算弹窗按键提示 */
.r-keyhint { text-align: center; margin-top: 12px; font-size: 11.5px; color: var(--faint); letter-spacing: .02em; }
.r-keyhint b { color: var(--accink); font-weight: 700; }

/* ≤420px 窄屏: 顶栏改两行(返回+工具一行, 标题独占一行居中) —— Firefox/Chromium 字体度量差异下 6 按钮也不溢出视口 */
@media (max-width: 420px) {
  #v-type { padding: 8px 8px 8px; }
  .nav { flex-wrap: wrap; row-gap: 6px; margin-bottom: 6px; }
  .nav-title { order: 3; flex: 1 1 100%; min-width: 0; margin: 0; font-size: 12.5px; }
  .tbtn { padding: 5px 8px; font-size: 11.5px; margin-left: 4px; }
  .nav-btn { width: 34px; height: 34px; }
}

/* ===== 顶栏: 关卡选择汉字化 + H5 工具按钮收进菜单 (2026-10-20) ===== */
.nav { position: relative; }
.nav-btn.wide { width: auto; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; }
.nav-btn.menu-btn { display: none; }
@media (max-width: 560px) {
  .nav-btn.menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .nav-btn.wide { padding: 0 10px; font-size: 12px; }
  .nav-tools { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 70;
    flex-direction: column; align-items: stretch; min-width: 132px;
    background: var(--panel2); border: 1px solid var(--line2); border-radius: 14px; padding: 7px;
    box-shadow: 0 14px 34px -12px rgba(0,0,0,.45); }
  .nav-tools.open { display: flex; }
  .nav-tools .tbtn { margin: 2px 0; padding: 9px 12px; font-size: 13px; text-align: center; }
}

/* ===== H5 打字页导航调整(2026-10-22): 紧贴页面顶部 + 选择关卡靠右 ===== */
@media (max-width: 560px) {
  #v-type { padding-top: 0; padding-top: env(safe-area-inset-top, 0px); }
  .nav { margin-top: 0; }
  .nav-btn.wide { order: 2; }        /* 选择关卡移到标题右侧 */
  .nav-btn.menu-btn { order: 3; }    /* ☰ 保持最右 */
}
/* sp-lesson.css — 双拼训练营（public/test/）
   设计语言对齐站内打字页 ltv2：暗夜分层 + 极光背景 + 玻璃卡片 + 紫青辉光。
   适配原则：clamp 前 px 兜底；不用 flex-gap 于自绘网格（共享键盘组件自带 gap 属生产同款）；
   100dvh + --app-h 兜底；safe-area 四向吃进；动效只用 transform/opacity。 */

:root {
  --bg: #0b0d12; --panel: #10131a; --panel2: #171b26;
  --line: rgba(255,255,255,.09); --line2: rgba(255,255,255,.16);
  --fg: #dfe5f2; --dim: #8b95a8; --faint: #5b6478;
  --acc: #8b5cf6; --acc2: #22d3ee; --accink: #a78bfa;
  --glow: rgba(139,92,246,.32); --glow2: rgba(34,211,238,.22);
  --ok: #34d399; --bad: #ff6b6b; --gold: #f0ad4e; --pink: #ef6a6a; --orange: #f0a24b;
  --r-lg: 18px; --r-md: 14px; --r-sm: 10px;
  --app-h: 100vh;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --glass: rgba(14,17,24,.74);
  /* —— 主题化派生变量（各主题覆盖这些）—— */
  --au1: rgba(139,92,246,.30); --au2: rgba(34,211,238,.20); --au3: rgba(167,139,250,.20);
  --au-op: .8; --sd-op: .5; --veil: rgba(11,13,18,.55);
  --hero1: #e9e3ff; --hero2: #a78bfa; --hero3: #22d3ee;
  --btn1: #8b5cf6; --btn2: #6366f1; --btn3: #22d3ee;
  --cur1: #ef6a6a; --cur2: #e05590; --curglow: rgba(239,106,106,.55);
  --nowlt: #ffd28f;
  --soft: rgba(255,255,255,.045); --softline: rgba(255,255,255,.1); --ghost: rgba(255,255,255,.06);
  --shadow: 0 24px 70px -28px rgba(0,0,0,.7);
  --drawer: rgba(16,19,26,.97); --sheet: rgba(23,27,38,.98);
  --font-ch: inherit;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { height: 100%; margin: 0; padding: 0; }
body {
  font-family: "Inter", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", "WenQuanYi Micro Hei", -apple-system, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", sans-serif;
  color: var(--fg); background: var(--bg); overflow: hidden; overscroll-behavior: none;
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
button { font-family: inherit; }
h1, h2, h3, p { margin: 0; }
input, textarea { user-select: text; -webkit-user-select: text; }

/* ================= 背景层 ================= */
#bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--bg); }
.au { position: absolute; inset: -34%; opacity: var(--au-op); }
.a1 { background:
  radial-gradient(40% 34% at 22% 26%, var(--au1), transparent 70%),
  radial-gradient(36% 30% at 76% 20%, var(--au2), transparent 70%);
  filter: blur(6px); animation: auA 26s ease-in-out infinite alternate; }
.a2 { background:
  radial-gradient(42% 40% at 68% 74%, var(--au3), transparent 72%),
  radial-gradient(30% 26% at 24% 80%, var(--au2), transparent 70%);
  filter: blur(10px); animation: auB 34s ease-in-out infinite alternate; }
.a3 { background: radial-gradient(50% 44% at 50% 50%, rgba(0,0,0,0), var(--veil) 78%); }
@keyframes auA { from { transform: translate(-3%,-2%) rotate(-2deg) scale(1); } to { transform: translate(4%,3%) rotate(2deg) scale(1.1); } }
@keyframes auB { from { transform: translate(3%,2%) scale(1.08); } to { transform: translate(-4%,-3%) scale(1); } }
.stardots { position: absolute; inset: 0; opacity: var(--sd-op);
  background-image: radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 34% 64%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 58% 24%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 76% 58%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 88% 34%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 44% 88%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 66% 82%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 8% 72%, rgba(255,255,255,.3) 50%, transparent 51%);
  animation: twinkle 5s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .32; } to { opacity: .62; } }

/* ================= 应用壳 ================= */
#app { position: relative; z-index: 1; height: var(--app-h); height: 100dvh;
  padding: var(--sat) var(--sar) var(--sab) var(--sal); }
.view { height: 100%; }
.vscroll { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 18px 16px 0; }
@media (max-width: 560px) { .vscroll { padding: 12px 10px 0; } }

/* ================= 通用 ================= */
.btn {
  border: 1px solid var(--line2); background: var(--panel2); color: var(--fg);
  border-radius: 999px; padding: 9px 18px; font-size: 15px; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; touch-action: manipulation;
}
.btn:hover { border-color: var(--acc); box-shadow: 0 0 0 3px var(--glow); }
.btn:active { transform: scale(.96); }
.btn.primary { background: linear-gradient(135deg, var(--btn1), var(--btn2) 60%, var(--btn3) 140%);
  border: 0; color: #fff; font-weight: 700; box-shadow: 0 6px 24px -6px var(--glow); }
.btn.primary:hover { box-shadow: 0 8px 30px -6px var(--glow), 0 0 0 3px rgba(139,92,246,.18); }
.btn.ghost { background: transparent; color: var(--dim); }
.btn.ghost:hover { color: var(--fg); }
.btn.lg { padding: 13px 30px; font-size: 17px; }
.btn.on { border-color: var(--acc); color: var(--accink); box-shadow: 0 0 0 3px var(--glow); }
.card { background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* ================= 首页 ================= */
.hero { max-width: 720px; margin: 4vh auto 0; text-align: center; padding: 0 4px; }
.eyebrow { display: inline-block; font-size: 12px; letter-spacing: .35em; color: var(--accink);
  border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); border-radius: 999px; padding: 5px 16px 5px 19px; margin-bottom: 18px;
  background: color-mix(in srgb, var(--acc) 9%, transparent); }
.hero-title { font-size: 46px; font-size: clamp(34px, 7.4vw, 56px); font-weight: 800; line-height: 1.15; letter-spacing: .02em;
  background: linear-gradient(120deg, var(--hero1) 8%, var(--hero2) 42%, var(--hero3) 88%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { color: var(--dim); font-size: 15px; line-height: 1.9; margin: 14px auto 0; max-width: 560px; }
.hero-core { margin-top: 10px; font-size: 15.5px; color: var(--fg); }
.hero-core b { color: var(--accink); font-weight: 800; letter-spacing: .02em; }
.scheme-pill { display: inline-flex; align-items: center; margin-top: 20px; padding: 9px 20px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--acc) 50%, transparent); background: color-mix(in srgb, var(--acc) 13%, transparent); color: var(--fg); font-size: 15px; cursor: pointer;
  transition: box-shadow .2s, transform .15s; }
.scheme-pill:hover { box-shadow: 0 0 0 4px var(--glow); }
.scheme-pill .sp-ico { margin-right: 8px; font-size: 18px; }
.scheme-pill b { font-weight: 700; }
.scheme-pill i { font-style: normal; color: var(--dim); font-size: 12px; margin-left: 12px; }

.hero-demo { display: flex; justify-content: center; flex-wrap: wrap; margin: 26px 0 6px; }
.demo-chip { display: flex; align-items: center; margin: 6px; padding: 10px 14px; border-radius: var(--r-md);
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: floaty 5s ease-in-out infinite; }
.demo-chip:nth-child(2) { animation-delay: -1.6s; } .demo-chip:nth-child(3) { animation-delay: -3.2s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.demo-chip .dz { font-size: 26px; font-weight: 800; margin-right: 10px; }
.demo-chip .py { color: var(--dim); font-size: 13px; margin-right: 10px; }
.demo-chip .sep { color: var(--faint); margin: 0 8px; }
.kcap { min-width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 8px; font-weight: 800;
  font-size: 15px; margin: 0 3px; padding: 0 8px; display: inline-block; }
.kcap.sm { background: color-mix(in srgb, var(--acc) 20%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 55%, transparent); color: color-mix(in srgb, var(--acc) 45%, var(--fg)); }
.kcap.ym { background: color-mix(in srgb, var(--orange) 15%, transparent); border: 1px solid color-mix(in srgb, var(--orange) 50%, transparent); color: color-mix(in srgb, var(--orange) 55%, var(--fg)); }
.kcap.plus { background: none; border: 0; color: var(--faint); min-width: 12px; padding: 0; }

.cta-row { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.cta-row .btn { margin: 6px; }

.path-wrap { max-width: 1040px; margin: 7vh auto 0; }
.sec-title { font-size: 20px; font-weight: 800; margin-bottom: 18px; }
.sec-title span { font-size: 13px; font-weight: 400; color: var(--faint); margin-left: 10px; }

.journey { display: grid; grid-template-columns: repeat(4, 1fr); }
.jcard { position: relative; margin: 8px; padding: 18px 16px 16px; border-radius: var(--r-lg); cursor: pointer;
  background: var(--glass); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .2s ease, border-color .2s, box-shadow .25s; }
.jcard:hover { transform: translateY(-4px); border-color: rgba(139,92,246,.55); box-shadow: 0 18px 44px -18px var(--glow); }
.jcard::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: .8;
  background: var(--gcb, linear-gradient(90deg, #8b5cf6, #6366f1)); }
.jcard .jno { position: absolute; right: 12px; top: 8px; font-size: 34px; font-weight: 800; color: var(--ghost); }
.jcard .jico { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; background: var(--gcb, linear-gradient(135deg, var(--btn1), var(--btn2))); box-shadow: 0 10px 26px -10px rgba(0,0,0,.45); }
.jcard h3 { font-size: 16px; font-weight: 700; margin: 12px 0 4px; }
.jcard p { font-size: 12px; color: var(--dim); line-height: 1.7; min-height: 34px; }
.jbar { margin-top: 10px; }
.jbar .tr { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); margin-bottom: 5px; }
.jbar .tr b { color: var(--accink); font-weight: 600; }
.jbar .bb { height: 5px; border-radius: 3px; background: var(--soft); overflow: hidden; }
.jbar .bb i { display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--btn1), var(--acc2)); transition: width .4s ease; }
.jcard.doneall::after { background: linear-gradient(90deg, transparent, var(--gold), transparent); }

.home-foot { max-width: 1040px; margin: 26px auto 0; padding: 18px 22px; display: flex; align-items: center;
  justify-content: center; flex-wrap: wrap; }
.ring-wrap { position: relative; width: 88px; height: 88px; margin: 0 22px 0 6px; }
.ring-wrap svg { transform: rotate(-90deg); }
.ring-wrap .rv { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-wrap .rv b { font-size: 19px; }
.ring-wrap .rv i { font-style: normal; font-size: 10px; color: var(--faint); }
.hf-stat { margin: 8px 24px; text-align: center; }
.hf-stat b { font-size: 22px; display: block; }
.hf-stat i { font-style: normal; font-size: 12px; color: var(--dim); }
.page-note { text-align: center; color: var(--faint); font-size: 11px; padding: 26px 10px 30px; line-height: 1.9; }

/* ================= 课程详解 ================= */
.ls-head { display: flex; align-items: center; max-width: 860px; margin: 6px auto 14px; }
.nav-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line2); flex: 0 0 auto;
  background: var(--panel2); color: var(--fg); font-size: 22px; line-height: 1; cursor: pointer;
  transition: border-color .2s, box-shadow .2s; }
.nav-btn:hover { border-color: var(--acc); box-shadow: 0 0 0 3px var(--glow); }
.nav-btn + .nav-btn { margin-left: 6px; }
.ls-ico { width: 52px; height: 52px; border-radius: 14px; margin: 0 14px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  background: linear-gradient(135deg, var(--btn1), var(--btn2)); box-shadow: 0 10px 26px -10px var(--glow); }
.ls-info { flex: 1; min-width: 0; }
.ls-info h2 { font-size: 20px; font-weight: 800; }
.ls-info p { font-size: 12px; color: var(--dim); margin-top: 3px; }

.ls-intro { max-width: 860px; margin: 0 auto 16px; padding: 20px 24px; font-size: 14.5px; line-height: 2; color: var(--fg); box-shadow: var(--shadow); }
.ls-intro b { color: var(--accink); }
.ls-intro .dim { color: var(--dim); }

.part-card { max-width: 860px; margin: 14px auto; border-radius: var(--r-lg); background: var(--glass); box-shadow: var(--shadow);
  border: 1px solid var(--line); overflow: hidden; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.part-head { display: flex; align-items: center; padding: 16px 20px; cursor: pointer; }
.part-head .pno { width: 34px; height: 34px; border-radius: 10px; margin-right: 14px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px;
  background: color-mix(in srgb, var(--acc) 15%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); color: var(--accink); }
.part-head .ptit { flex: 1; min-width: 0; }
.part-head .ptit h3 { font-size: 16px; font-weight: 700; }
.part-head .ptit p { font-size: 12px; color: var(--dim); margin-top: 2px; }
.part-head .pmeta { text-align: right; font-size: 12px; color: var(--dim); white-space: nowrap; margin-right: 10px; }
.part-head .pmeta b { color: var(--accink); }
.part-arrow { color: var(--faint); transition: transform .2s; font-size: 12px; }
.part-card.open .part-arrow { transform: rotate(90deg); }
.part-body { display: none; border-top: 1px solid var(--line); padding: 18px 20px 20px; }
.part-card.open .part-body { display: block; }

.learn-block { margin: 0 0 16px; }
.lb-p { font-size: 14px; line-height: 2; color: var(--fg); }
.lb-p b { color: var(--accink); } .lb-p .yl { color: var(--orange); font-weight: 700; }
.lb-steps { counter-reset: st; }
.lb-step { position: relative; padding: 10px 12px 10px 46px; margin: 8px 0; border-radius: var(--r-md);
  background: var(--soft); border: 1px solid var(--line); font-size: 14px; line-height: 1.9; }
.lb-step::before { counter-increment: st; content: counter(st); position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; text-align: center; line-height: 24px;
  font-size: 12px; font-weight: 800; color: var(--accink); background: color-mix(in srgb, var(--acc) 15%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); }
.lb-mn { background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 12%, transparent), color-mix(in srgb, var(--acc2) 7%, transparent));
  border-left: 3px solid var(--acc); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 12px 16px;
  font-size: 14.5px; line-height: 2.2; white-space: pre-line; color: var(--fg); }
.lb-mn.t2 { border-left-color: var(--gold); background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 11%, transparent), color-mix(in srgb, var(--acc) 6%, transparent)); }
.lb-tip { font-size: 12.5px; color: var(--dim); line-height: 1.9; padding: 8px 12px; border-radius: var(--r-sm);
  background: var(--soft); border: 1px dashed var(--line2); }
.lb-tip b { color: var(--gold); }

/* 示例拆解条 */
.ex-row { display: flex; align-items: center; flex-wrap: wrap; margin: 10px 0; padding: 10px 14px;
  border-radius: var(--r-md); background: var(--soft); border: 1px solid var(--line); }
.ex-row .dz { font-size: 24px; font-weight: 800; min-width: 34px; text-align: center; }
.ex-row .py { color: var(--dim); font-size: 13px; margin: 0 10px; }
.ex-row .sp { display: flex; align-items: center; color: var(--faint); font-size: 13px; }
.ex-row .sp i { font-style: normal; margin: 0 4px; color: var(--faint); }
.ex-row .sp .v { color: var(--acc2); }
.ex-zh { font-size: 12px; color: var(--faint); margin-left: auto; padding-left: 10px; }
@media (max-width: 480px) { .ex-zh { margin-left: 0; width: 100%; padding: 2px 0 0; } }

/* 小键位图（讲解用，随方案联动） */
.mk-title { font-size: 12px; color: var(--dim); margin: 4px 0 8px; }
.mk { display: inline-block; padding: 10px; border-radius: var(--r-md); background: var(--soft);
  border: 1px solid var(--line); max-width: 100%; overflow-x: auto; }
.mk-row { display: flex; }
.mk-key { position: relative; width: 34px; height: 34px; margin: 2px; border-radius: 6px; flex: 0 0 auto;
  background: var(--soft); border: 1px solid var(--softline); color: var(--dim);
  font-size: 13px; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.05; overflow: hidden; }
.mk-key .m-sub { font-size: 8.5px; font-weight: 600; color: var(--orange); max-width: 100%; white-space: nowrap; }
.mk-key .m-cap { font-size: 8.5px; font-weight: 600; color: #9db7ff; }
.mk-key.hl { background: color-mix(in srgb, var(--acc) 26%, var(--soft)); border-color: color-mix(in srgb, var(--acc) 65%, transparent); color: var(--fg);
  box-shadow: 0 0 14px -2px var(--glow); }
.mk-key.hl .m-sub { color: color-mix(in srgb, var(--orange) 60%, var(--fg)); }
.mk-key.zm-hl { background: rgba(34,211,238,.16); border-color: rgba(34,211,238,.6); }
.mk-legend { font-size: 11px; color: var(--faint); margin-top: 6px; line-height: 1.8; }
.mk-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin: 0 4px 0 10px; vertical-align: -1px; }
.mk-legend .l1 { background: rgba(139,92,246,.6); } .mk-legend .l2 { background: rgba(34,211,238,.55); }

/* 关卡格子 */
.lv-grid { display: flex; flex-wrap: wrap; margin-top: 4px; }
.lv-g { width: 42px; height: 42px; margin: 4px; border-radius: 11px; border: 1px solid var(--line2); cursor: pointer;
  background: var(--soft); color: var(--dim); font-size: 14px; position: relative;
  display: flex; align-items: center; justify-content: center; transition: border-color .15s, transform .12s; }
.lv-g:hover { border-color: var(--acc); transform: translateY(-2px); }
.lv-g .st { position: absolute; right: 2px; bottom: 1px; font-size: 9px; color: var(--gold); letter-spacing: -1px; }
.lv-g.done { border-color: rgba(52,211,153,.5); background: rgba(52,211,153,.1); color: #9ff0cf; }
.part-cta { margin-top: 14px; display: flex; align-items: center; flex-wrap: wrap; }
.part-cta .go { margin-right: 12px; }
.part-cta .cnt { font-size: 12px; color: var(--dim); }

/* ================= 打字页 ================= */
#v-type { display: flex; flex-direction: column; padding: 10px 12px 10px; }
#v-type[hidden] { display: none; }
.nav { display: flex; align-items: center; flex: 0 0 auto; margin-bottom: 8px; }
.nav-title { flex: 1; min-width: 80px; text-align: center; font-size: 14px; font-weight: 700; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 8px; }
.nav-tools { display: flex; }
.tbtn { border: 1px solid var(--line2); background: var(--panel2); color: var(--dim); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; cursor: pointer; margin-left: 7px; transition: color .15s, border-color .15s, box-shadow .2s; }
.tbtn:first-child { margin-left: 0; }
.tbtn:hover { color: var(--fg); border-color: var(--acc); }
.tbtn.on { color: var(--accink); border-color: rgba(139,92,246,.6); box-shadow: 0 0 0 3px var(--glow); }
@media (max-width: 560px) { .tbtn { padding: 6px 10px; font-size: 12px; margin-left: 5px; } .nav-title { font-size: 13px; } }

.stage { flex: 1 1 auto; min-height: 70px; display: flex; }
/* 纸面永不溢出打字区(键盘变大时内容区让位, 与键盘绝不重叠) */
.paper { max-height: 100%; overflow: hidden; }
.paper { flex: 1; min-width: 0; max-width: 900px; margin: auto; border-radius: var(--r-lg);
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow); padding: 14px 18px 12px; display: flex; flex-direction: column; }
.paper .meta { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.paper .meta .t { font-size: 15px; font-weight: 700; }
.paper .meta .m { font-size: 11.5px; color: var(--accink); background: rgba(139,92,246,.12);
  border: 1px solid rgba(139,92,246,.32); padding: 2px 10px; border-radius: 999px; white-space: nowrap; margin-left: 10px; }

.lines { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.line { display: flex; justify-content: center; align-items: center; overflow: hidden; white-space: nowrap; }
#ln-now { justify-content: flex-start; }  /* 当前行起点对齐: 超宽内容不两侧裁剪(短行由 lscroll margin:auto 居中) */
.line.prev, .line.next { min-height: 22px; opacity: .55; filter: blur(.4px); }
.line.now { min-height: calc(64px * var(--nowfit, 1)); }  /* 随行内缩放同比收缩, 保证当前行永不裁剪 */
.lscroll { display: flex; justify-content: flex-start; margin: 0 auto; transition: transform .18s ease; }
.cell { --chs: calc(clamp(19px, 3.6vw, 28px) * var(--nowfit, 1));   /* --nowfit: 行内自适应收缩系数(JS 按可用高度注入), 字母与汉字同步缩 */
  display: inline-flex; flex-direction: column; align-items: center; gap: 0; margin: calc(5px * var(--nowfit, 1)) calc(8px * var(--nowfit, 1)); min-width: 30px;
  animation: cellin .18s ease; }   /* 纵向排布: 编码字母在汉字之上(同拼音/双拼页) */
@keyframes cellin { from { opacity: .2; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cell .code { display: flex; font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: calc(var(--chs) * var(--sp-code, 1)); letter-spacing: 2px; line-height: 1.25; color: var(--faint); }
.cell .code .lt { margin: 0 1px; }
.cell .ch { font-size: var(--chs); font-weight: 600; line-height: 1.3; color: var(--fg); }
/* 五笔打字行全是汉字: 不设任何 font-family 覆盖, 完全继承 body 字体栈 —— 与双拼页汉字同一条已验证可行的渲染路径 */
.cell.pure .ch { font-size: var(--chs); color: var(--fg); font-weight: 600; }
.cell.done .code { color: rgba(52,211,153,.55); }
.cell.done .ch { color: var(--dim); }
.cell.cur .code { color: var(--fg); }   /* 主题前景色: 旧版硬编码白在亮色主题(纸面白)下会隐形 */
.cell.cur .ch { background: linear-gradient(135deg, var(--cur1), var(--cur2)); border-radius: 9px; padding: 1px 7px;
  color: #fff; box-shadow: 0 6px 22px -6px var(--curglow); }
.cell.cur .code .lt.now-lt { color: var(--nowlt); font-weight: 800; position: relative; }
.cell.cur .code .lt.now-lt::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  border-radius: 1px; background: var(--nowlt); animation: wbLtBlink 1.05s linear infinite; }   /* 当前键光标横线一闪一闪 */
@keyframes wbLtBlink { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
/* 默写渐进显示: 敲对绿 / 打错红(实敲字母) / 错后改正金, 未敲槽位隐形(光标仍闪) */
.cell .code .lt.t-ok { color: var(--ok); font-weight: 700; }
.cell .code .lt.t-fix { color: var(--gold); font-weight: 700; }
.cell.cur .code .lt.t-err, .cell .code .lt.t-err { color: var(--bad); font-weight: 700; }
body.dict .cell.cur .code .lt.t-hide, body.dict .cell .code .lt.t-hide { color: transparent; }
.cell.cur .code .lt.done-lt { color: var(--ok); }
.cell.punct { opacity: .4; }
.cell.punct .ch { font-size: 22px; color: var(--dim); }
.paper.blind .cell:not(.cur) .code { visibility: hidden; }   /* 盲打：只留当前字编码 */
.line.now.err-shake { animation: shk .22s ease; }
@keyframes shk { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.prog-row { margin-top: 8px; }
.bar { height: 6px; border-radius: 3px; background: var(--soft); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--btn1), var(--acc2)); box-shadow: 0 0 12px var(--glow); transition: width .25s ease; }
.tiles { display: flex; justify-content: center; margin-top: 9px; }
.tile { min-width: 92px; margin: 0 10px; padding: 7px 12px; border-radius: var(--r-md); text-align: center;
  background: var(--soft); border: 1px solid var(--line); }
.tile i { display: block; font-style: normal; font-size: 10.5px; color: var(--faint); letter-spacing: .12em; }
.tile b { font-size: 19px; font-weight: 800; }
@media (max-width: 560px) { .tile { min-width: 78px; margin: 0 6px; padding: 5px 8px; } .tile b { font-size: 16px; } }

/* ================= 键盘区（真键盘 dazi-keyboard + 标签层） ================= */
/* dazi-keyboard.js 的 renderInto 不自动注入样式（injectCss 仅在 EngKeyboard 分支调用），
   以下 dk-* 规则为该文件 113-153 行样式块的原样拷贝（勿改语义，改样式请两头同步） */
.dk-kb-host{--kb-key-bg:#fff;--kb-key-text:#333;--kb-key-border:#e8ecf3;--kb-key-special-bg:#f5f5f5;--kb-key-special-text:#919191;
  --kb-accent:#7a4fd0;--kb-accent-glow:rgba(122,79,208,.3);--kb-correct:#5cb85c;--kb-wrong:#d9534f;--kb-hint:#f0ad4e;}
.dk-kb-wrap{position:relative}
.dk-kb-rows{position:relative}
.dk-kb-row{display:flex;gap:2px;justify-content:center;margin-bottom:3px}
.dk-kb-key{height:41px;border-radius:4px;background:var(--kb-key-bg);border:1px solid var(--kb-key-border);
  box-shadow:0 1px 2px rgba(0,0,0,.05);color:var(--kb-key-text);font-family:"JetBrains Mono", monospace;
  font-size:var(--kb-fs, 16.5px);font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;
  flex:0 0 auto;position:relative;transition:all .12s ease-out;cursor:default;user-select:none}
.dk-kb-key.special{background:var(--kb-key-special-bg);color:var(--kb-key-special-text);font-size:calc(var(--kb-fs, 16.5px) * 0.8)}
  .dk-kb-key span{line-height:1;display:block}
.dk-kb-key .sub{font-size:calc(var(--kb-fs, 16.5px) * 0.74);color:#919191;margin-top:0;margin-bottom:calc(var(--kb-fs, 16.5px) * -0.12 + 3px);order:-1}
.dk-kb-key .cap{font-size:calc(var(--kb-fs, 16.5px) * 0.74);color:#919191;margin-top:2px}
  .dk-kb-key[data-key="back"] span:not(.cap):not(.sub){font-size:calc(var(--kb-fs, 16.5px) * 0.7)}
.dk-kb-key .finger-dot{position:absolute;top:3px;right:4px;width:5px;height:5px;border-radius:50%;opacity:.6}
.dk-kb-key.hint{border-color:var(--kb-accent);background:color-mix(in srgb,var(--kb-accent) 25%,var(--kb-key-bg));
  box-shadow:0 0 0 3px var(--kb-accent-glow);animation:dkKeyHintPulse 1.1s ease-in-out infinite}
.dk-kb-key.correct{background:color-mix(in srgb,var(--kb-correct) 45%,var(--kb-key-bg));border-color:var(--kb-correct);
  box-shadow:0 2px 8px rgba(92,184,92,.45);animation:dkKeyHit .15s}
.dk-kb-key.wrong{background:color-mix(in srgb,var(--kb-wrong) 45%,var(--kb-key-bg));border-color:var(--kb-wrong);
  box-shadow:0 2px 8px rgba(217,83,79,.45);animation:dkKeyShake .25s}
.dk-kb-key.clickable{cursor:pointer}
@keyframes dkKeyHit{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes dkKeyShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes dkKeyHintPulse{0%,100%{box-shadow:0 0 0 2px var(--kb-accent-glow)}50%{box-shadow:0 0 0 6px var(--kb-accent-glow)}}
.dk-hand-stage{position:absolute;top:0;left:0;right:0;bottom:0;overflow:visible;z-index:2;pointer-events:none}
.dk-hand-img{position:absolute;left:0;top:0;transform-origin:0 0;height:auto;pointer-events:none;user-select:none;display:none}
.dk-hand-img.visible{display:block}
/* —— 拷贝结束，以下为本页键盘区自有样式 —— */
/* 键盘区高度占比(自汉字打字页迁移): 打字区=剩余; kbzone 垂直水平居中 */
.kbzone { flex: 0 0 min(calc(var(--sp-kbpct, 42) * 1%), 46vh); min-height: 0; margin-top: 8px;  /* 上限46vh: 矮窗口时键盘不吞掉打字区(当前行优先) */
  display: flex; align-items: center; justify-content: center; }
.kb-frame { width: 100%; max-width: 980px; margin: 0 auto; border-radius: var(--r-lg); padding: 8px 10px 10px;
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 -6px 40px -18px rgba(0,0,0,.6); }
.kb-cap { text-align: center; font-size: 11px; color: var(--dim); margin: 2px 0 6px; }
.kb-cap b { color: var(--accink); font-weight: 600; }
.sp-kb-fit { overflow: hidden; display: flex; justify-content: center; }
.sp-kb-wrap { position: relative; }
.sp-kb-wrap .dk-kb-key .sp-kl { font-size: calc(var(--kb-fs, 16.5px) * .68); line-height: 1.05;
  margin-bottom: 1px; order: -1; font-family: "Inter", "Noto Sans SC", sans-serif; }
.sp-kb-wrap.v-ym .sp-kl, .sp-kb-wrap.v-sp .sp-kl { color: var(--orange); }
.sp-kb-wrap.v-sm .sp-kl { color: #9db7ff; }
.sp-kb-wrap .dk-kb-key .sp-kc { font-size: calc(var(--kb-fs, 16.5px) * .62); line-height: 1.05; margin-top: 2px;
  color: #9db7ff; font-family: "Inter", "Noto Sans SC", sans-serif; }
.kbzone.hidden { display: none; }

/* 击键放大反馈(iPhone输入法式): 按下的键帽瞬间弹大, 看清按的是哪个键 */
.sp-kb-wrap .dk-kb-key { position: relative; }
.sp-kb-wrap .dk-kb-key.pop { animation: spKeyPop .3s cubic-bezier(.2,.85,.3,1.25); z-index: 6; }
@keyframes spKeyPop {
  0% { transform: scale(1); }
  40% { transform: scale(2.13); box-shadow: 0 14px 38px rgba(0,0,0,.38); }
  100% { transform: scale(1); }
}

/* 韵母/双拼视图: 只显示双拼标签 —— 键位字母隐藏, 短标签放大全尺寸, 长标签(iang·uang)缩档+换行不再被盖 */
.sp-kb-wrap.v-ym .dk-kb-key:has(.sp-kl) .sp-base,
.sp-kb-wrap.v-sp .dk-kb-key:has(.sp-kl) .sp-base { display: none; }
.sp-kb-wrap.v-ym .dk-kb-key .sp-kl,
.sp-kb-wrap.v-sp .dk-kb-key .sp-kl {
  font-size: var(--kb-fs, 16.5px); line-height: 1.1;
  white-space: normal; overflow-wrap: anywhere; text-align: center; padding: 0 2px; font-weight: 600; }
.sp-kb-wrap.v-ym .dk-kb-key .sp-kl.kl-long,
.sp-kb-wrap.v-sp .dk-kb-key .sp-kl.kl-long { font-size: calc(var(--kb-fs, 16.5px) * .78); }

/* 打字区高度档位(键盘大小滑杆联动): 区高不足时减行不减字 —— 先藏上/下预告行, 再藏标题行收紧间距 */
body[data-stagefit="1"] .line.prev, body[data-stagefit="1"] .line.next { display: none; }
body[data-stagefit="2"] .line.prev, body[data-stagefit="2"] .line.next { display: none; }
body[data-stagefit="2"] .paper .meta { display: none; }
body[data-stagefit="2"] .line.now { min-height: 52px; }
body[data-stagefit="2"] .paper { padding: 8px 18px 8px; }
body[data-stagefit="2"] .prog-row { margin-top: 4px; }
body[data-stagefit="2"] .prog-row .tiles { display: none; }   /* 极矮时统计瓦片让位: 高度全部留给当前行(上字母下汉字必须完整) */

/* ================= 显示调整(设置抽屉, 自汉字打字页迁移) ================= */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 2px; border-bottom: 1px dashed var(--line); }
.set-row:last-of-type { border-bottom: none; }
.set-row .sr-l { min-width: 0; }
.set-row .sr-l b { font-size: 13.5px; display: block; }
.set-row .sr-l small { display: block; font-size: 11px; color: var(--faint); margin-top: 3px; line-height: 1.6; }
.set-row .sr-c { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.set-row input[type=range] { width: 140px; accent-color: var(--acc); }
.set-row .sv { font-size: 12.5px; font-weight: 800; min-width: 44px; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--accink); }
/* 开关(胶囊圆点, 与汉字打字页同款手感) */
.sw { width: 44px; height: 25px; border-radius: 999px; background: var(--softline); position: relative;
  cursor: pointer; flex: 0 0 auto; transition: background .18s; border: 1px solid var(--line); }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s; }
.sw.on { background: var(--acc); border-color: var(--acc); }
.sw.on::after { transform: translateX(19px); }

/* ================= 抽屉 ================= */
.mask { position: fixed; inset: 0; z-index: 40; background: rgba(5,7,12,.55); opacity: 0; transition: opacity .25s; }
.mask.show { opacity: 1; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(420px, 94vw);
  background: var(--drawer); border-left: 1px solid var(--line2); transform: translateX(102%);
  visibility: hidden;   /* 移出视口后投影仍会绘制, 6 层叠加致右缘发黑 —— 隐藏即不绘制 */
  transition: transform .28s cubic-bezier(.22,.9,.34,1), visibility .28s;
  display: flex; flex-direction: column;
  box-shadow: -18px 0 60px -20px rgba(0,0,0,.6); }
.drawer.show { transform: none; visibility: visible; }
.dr-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px;
  border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.dr-head b { font-size: 16px; }
.x { border: 0; background: transparent; color: var(--dim); font-size: 26px; cursor: pointer; line-height: 1; padding: 2px 8px; }
.x:hover { color: var(--fg); }
.dr-body { flex: 1; overflow-y: auto; padding: 16px 18px 30px; -webkit-overflow-scrolling: touch; }

/* 方案卡 */
.sc-card { display: flex; align-items: center; padding: 13px 14px; margin-bottom: 10px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--soft); cursor: pointer; transition: border-color .15s, transform .12s; }
.sc-card:hover { border-color: var(--acc); transform: translateX(2px); }
.sc-card.on { border-color: color-mix(in srgb, var(--acc) 70%, transparent); background: color-mix(in srgb, var(--acc) 11%, transparent); box-shadow: 0 0 0 3px var(--glow); }
.sc-card .ico { font-size: 24px; margin-right: 12px; }
.sc-card .nm { flex: 1; min-width: 0; }
.sc-card .nm b { font-size: 15px; display: block; }
.sc-card .nm p { font-size: 11.5px; color: var(--dim); margin-top: 2px; line-height: 1.6; }
.sc-card .ck { color: var(--accink); font-size: 13px; }
.dr-sec { margin: 18px 0 8px; font-size: 13px; font-weight: 700; color: var(--accink); }
.dr-note { font-size: 12.5px; color: var(--dim); line-height: 2; }
.dr-note b { color: var(--fg); }

/* 键盘视图选项 */
.kb-opt { display: flex; align-items: center; padding: 13px 14px; margin-bottom: 10px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--soft); cursor: pointer; }
.kb-opt.on { border-color: color-mix(in srgb, var(--acc) 70%, transparent); background: color-mix(in srgb, var(--acc) 11%, transparent); box-shadow: 0 0 0 3px var(--glow); }
.kb-opt .ki { font-size: 20px; margin-right: 12px; }
.kb-opt b { font-size: 15px; display: block; }
.kb-opt p { font-size: 11.5px; color: var(--dim); margin-top: 2px; }

/* ================= 结算弹层 ================= */
.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(5,7,12,.6); padding: 18px; opacity: 0; transition: opacity .25s; }
.modal[hidden] { display: none; }
.modal.show { opacity: 1; }
.sheet { position: relative; width: min(430px, 100%); border-radius: 22px; padding: 30px 26px 24px; text-align: center;
  background: var(--sheet);
  border: 1px solid var(--line2); box-shadow: 0 30px 90px -20px rgba(0,0,0,.8); overflow: hidden; }
.r-glow { position: absolute; left: 50%; top: -70px; width: 260px; height: 160px; transform: translateX(-50%);
  background: radial-gradient(50% 60% at 50% 50%, var(--glow), transparent 75%); pointer-events: none; }
.stars { font-size: 40px; letter-spacing: 8px; color: var(--gold); text-shadow: 0 0 22px rgba(240,173,78,.45); }
.stars .off { color: var(--ghost); text-shadow: none; }
.stars span { display: inline-block; animation: starpop .5s cubic-bezier(.2,1.6,.4,1) backwards; }
.stars span:nth-child(2) { animation-delay: .12s; } .stars span:nth-child(3) { animation-delay: .24s; }
@keyframes starpop { from { transform: scale(0) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
.r-title { font-size: 22px; font-weight: 800; margin-top: 8px;
  background: linear-gradient(120deg, var(--hero1), var(--hero2) 55%, var(--hero3)); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.r-name { font-size: 12px; color: var(--dim); margin: 6px 0 16px; line-height: 1.7; }
.r-grid { display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.r-grid > div { margin: 4px 16px; }
.r-grid i { display: block; font-style: normal; font-size: 11px; color: var(--faint); letter-spacing: .1em; }
.r-grid b { font-size: 21px; font-weight: 800; }
.r-btns button { margin: 0 5px; }

/* ================= Toast ================= */
.toast { position: fixed; left: 50%; bottom: 92px; transform: translate(-50%, 20px); z-index: 99;
  background: var(--drawer); border: 1px solid var(--line2); color: var(--fg); border-radius: 999px;
  padding: 10px 22px; font-size: 13.5px; opacity: 0; pointer-events: none; transition: all .3s ease;
  box-shadow: 0 14px 40px -12px rgba(0,0,0,.7); max-width: 86vw; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ================= 响应式 ================= */
@media (max-width: 960px) { .journey { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .journey { grid-template-columns: 1fr; }
  .jcard p { min-height: 0; }
  .hero { margin-top: 2vh; }
  .hero-title { letter-spacing: 0; }
  .paper { padding: 10px 10px 8px; }
  .cell { --chs: 20px; margin: 2px 6px; gap: 6px; }
  .line.now { min-height: 52px; }
  .kb-frame { padding: 6px 6px 8px; border-radius: var(--r-md); }
}
@media (max-height: 560px) and (orientation: landscape) {
  .vscroll { padding-top: 8px; }
  .paper { padding: 6px 12px 6px; }
  .line.prev, .line.next { display: none; }
  .line.now { min-height: 52px; }
  .cell { --chs: 18px; }
  .tiles { margin-top: 4px; } .tile { padding: 3px 8px; } .tile b { font-size: 15px; }
  .nav { margin-bottom: 4px; }
  .kb-cap { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .au, .stardots, .demo-chip { animation: none !important; }
  * { transition-duration: .01s !important; }
}

/* ================= 主题包（body[data-theme] 只覆盖变量；极夜=默认 :root） ================= */
/* 迁移主题共享推导层: 新增主题只给核心色, 次级变量(线/底纹/按钮/极光/阴影)由此按核心色推导。
   必须置于所有主题块之前 —— 同特异性下后声明者胜, 老主题显式全量定义不受影响。 */
body[data-theme] {
  --glow: color-mix(in srgb, var(--acc) 24%, transparent);
  --line: color-mix(in srgb, var(--fg) 14%, transparent);
  --line2: color-mix(in srgb, var(--fg) 24%, transparent);
  --soft: color-mix(in srgb, var(--fg) 5%, transparent);
  --softline: color-mix(in srgb, var(--fg) 12%, transparent);
  --ghost: color-mix(in srgb, var(--fg) 7%, transparent);
  --au1: color-mix(in srgb, var(--acc) 18%, transparent);
  --au2: color-mix(in srgb, var(--acc2) 13%, transparent);
  --au3: color-mix(in srgb, var(--acc) 16%, transparent);
  --hero1: var(--fg); --hero2: var(--acc); --hero3: var(--acc2);
  --btn1: var(--acc); --btn2: color-mix(in srgb, var(--acc) 82%, var(--fg)); --btn3: var(--acc2);
  --curglow: color-mix(in srgb, var(--cur1) 35%, transparent);
  --shadow: 0 20px 55px -28px color-mix(in srgb, var(--fg) 32%, transparent);
}
body[data-theme=neon] {
  --bg:#060a18; --panel:#0a1020; --panel2:#0e1626; --glass:rgba(10,16,32,.72);
  --fg:#e8f0ff; --dim:#6d7ba6; --faint:#46527a;
  --acc:#00e5ff; --acc2:#ff2e63; --accink:#7ee7ff; --glow:rgba(0,229,255,.28);
  --au1:rgba(0,229,255,.2); --au2:rgba(255,46,99,.14); --au3:rgba(80,120,255,.2);
  --hero1:#eafcff; --hero2:#00e5ff; --hero3:#ff2e63;
  --btn1:#00c8e0; --btn2:#0090c8; --btn3:#7ee7ff;
  --cur1:#ff2e63; --cur2:#c026d3; --curglow:rgba(255,46,99,.45); --nowlt:#ffe66d;
  --line:rgba(120,180,255,.13); --line2:rgba(120,180,255,.24);
  --soft:rgba(120,180,255,.06); --softline:rgba(120,180,255,.14); --ghost:rgba(120,180,255,.08);
  --shadow:0 24px 70px -28px rgba(0,0,0,.85); --drawer:rgba(8,14,28,.97); --sheet:rgba(10,18,34,.98);
  --orange:#ffd166; --gold:#ffd166;
}
body[data-theme=neon] .dk-kb-host {
  --kb-key-bg:#101a2e; --kb-key-text:#d8e6ff; --kb-key-border:#22385e;
  --kb-key-special-bg:#0c1424; --kb-key-special-text:#6d7ba6;
  --kb-accent:#00e5ff; --kb-accent-glow:rgba(0,229,255,.3);
}

body[data-theme=sunset] {
  --bg:#150e0b; --panel:#1c130e; --panel2:#241811; --glass:rgba(30,19,13,.74);
  --fg:#f7ece0; --dim:#a8917c; --faint:#75614f;
  --acc:#f97316; --acc2:#fbbf24; --accink:#fdba74; --glow:rgba(249,115,22,.3);
  --au1:rgba(249,115,22,.22); --au2:rgba(251,191,36,.16); --au3:rgba(239,68,68,.16);
  --hero1:#fff3e6; --hero2:#fb923c; --hero3:#fbbf24;
  --btn1:#ea580c; --btn2:#d97706; --btn3:#fbbf24;
  --cur1:#f43f5e; --cur2:#ea580c; --curglow:rgba(244,63,94,.45); --nowlt:#fde68a;
  --line:rgba(253,186,116,.13); --line2:rgba(253,186,116,.24);
  --soft:rgba(253,186,116,.06); --softline:rgba(253,186,116,.14); --ghost:rgba(253,186,116,.08);
  --shadow:0 24px 70px -28px rgba(0,0,0,.8); --drawer:rgba(26,16,11,.97); --sheet:rgba(30,19,13,.98);
  --orange:#fbbf24;
}
body[data-theme=sunset] .dk-kb-host {
  --kb-key-bg:#241812; --kb-key-text:#f3e2d0; --kb-key-border:#3f2a1d;
  --kb-key-special-bg:#1d130e; --kb-key-special-text:#a8917c;
  --kb-accent:#f97316; --kb-accent-glow:rgba(249,115,22,.3);
}

body[data-theme=onyx] {
  --bg:#0c0b08; --panel:#14120d; --panel2:#1a1710; --glass:rgba(20,18,12,.74);
  --fg:#f0e6d2; --dim:#9c8f74; --faint:#6b6049;
  --acc:#d4af37; --acc2:#e8c96a; --accink:#e2c56a; --glow:rgba(212,175,55,.28);
  --au1:rgba(212,175,55,.16); --au2:rgba(120,90,30,.14); --au3:rgba(212,175,55,.1);
  --hero1:#faf3df; --hero2:#d4af37; --hero3:#f5e3a8;
  --btn1:#b8952e; --btn2:#8a6d1a; --btn3:#d4af37;
  --cur1:#c0392b; --cur2:#8a6d1a; --curglow:rgba(192,57,43,.45); --nowlt:#ffe08a;
  --line:rgba(212,175,55,.14); --line2:rgba(212,175,55,.26);
  --soft:rgba(212,175,55,.05); --softline:rgba(212,175,55,.13); --ghost:rgba(212,175,55,.07);
  --shadow:0 24px 70px -28px rgba(0,0,0,.85); --drawer:rgba(18,16,11,.97); --sheet:rgba(24,21,14,.98);
  --font-ch: "Songti SC","STSong","SimSun",serif;
}
body[data-theme=onyx] .dk-kb-host {
  --kb-key-bg:#1c1912; --kb-key-text:#eadfc6; --kb-key-border:#3a3323;
  --kb-key-special-bg:#16130d; --kb-key-special-text:#9c8f74;
  --kb-accent:#d4af37; --kb-accent-glow:rgba(212,175,55,.3);
}

body[data-theme=aurora] {
  --bg:#e8f6f3; --panel:#f2faf8; --panel2:#e0f0ec; --glass:rgba(255,255,255,.72);
  --fg:#14524d; --dim:#4f7d78; --faint:#7ba39e;
  --acc:#0ea5a0; --acc2:#6366f1; --accink:#0b8a86; --glow:rgba(14,165,160,.22);
  --au1:rgba(14,165,160,.2); --au2:rgba(99,102,241,.13); --au3:rgba(110,231,200,.2);
  --au-op:.9; --sd-op:0; --veil:rgba(232,246,243,0);
  --hero1:#0f4d49; --hero2:#0ea5a0; --hero3:#6366f1;
  --btn1:#0d9488; --btn2:#0f766e; --btn3:#38bdf8;
  --cur1:#e11d48; --cur2:#be123c; --curglow:rgba(225,29,72,.35); --nowlt:#b45309;
  --line:rgba(20,82,77,.14); --line2:rgba(20,82,77,.24);
  --soft:rgba(20,82,77,.05); --softline:rgba(20,82,77,.12); --ghost:rgba(20,82,77,.07);
  --shadow:0 20px 55px -28px rgba(20,82,77,.3); --drawer:rgba(250,255,254,.97); --sheet:rgba(255,255,255,.98);
  --ok:#15803d; --bad:#dc2626; --pink:#e11d48; --orange:#c2680c;
}
body[data-theme=aurora] .dk-kb-host {
  --kb-key-bg:#ffffff; --kb-key-text:#155e59; --kb-key-border:#cbe5e0;
  --kb-key-special-bg:#eef7f5; --kb-key-special-text:#6fa39d;
  --kb-accent:#0ea5a0; --kb-accent-glow:rgba(14,165,160,.25);
}

body[data-theme=apple] {
  --bg:#f5f5f7; --panel:#ffffff; --panel2:#eeeef2; --glass:rgba(255,255,255,.75);
  --fg:#1d1d1f; --dim:#6e6e73; --faint:#a1a1a6;
  --acc:#0071e3; --acc2:#34c759; --accink:#0a6cd0; --glow:rgba(0,113,227,.2);
  --au1:rgba(0,113,227,.08); --au2:rgba(52,199,89,.07); --au3:rgba(88,86,214,.07);
  --au-op:.9; --sd-op:0; --veil:rgba(245,245,247,0);
  --hero1:#1d1d1f; --hero2:#0071e3; --hero3:#34c759;
  --btn1:#0071e3; --btn2:#005bb8; --btn3:#34c759;
  --cur1:#ff3b30; --cur2:#d70015; --curglow:rgba(255,59,48,.35); --nowlt:#c2680c;
  --line:rgba(0,0,0,.09); --line2:rgba(0,0,0,.16);
  --soft:rgba(0,0,0,.045); --softline:rgba(0,0,0,.1); --ghost:rgba(0,0,0,.06);
  --shadow:0 20px 55px -30px rgba(0,0,0,.25); --drawer:rgba(255,255,255,.97); --sheet:rgba(255,255,255,.98);
  --ok:#17954a; --bad:#e0352b; --pink:#ff3b30; --orange:#c2680c; --gold:#b4830c;
}

body[data-theme=ink] {
  --bg:#f7f2e8; --panel:#fdfaf2; --panel2:#efe7d5; --glass:rgba(252,248,240,.75);
  --fg:#26221c; --dim:#9a8d75; --faint:#b7ab93;
  --acc:#3d6b99; --acc2:#8a6d3a; --accink:#345e88; --glow:rgba(61,107,153,.18);
  --au1:rgba(61,107,153,.1); --au2:rgba(138,109,58,.08); --au3:rgba(179,64,46,.06);
  --au-op:.9; --sd-op:0; --veil:rgba(247,242,232,0);
  --hero1:#26221c; --hero2:#3d6b99; --hero3:#8a6d3a;
  --btn1:#3d6b99; --btn2:#2f5a73; --btn3:#8a6d3a;
  --cur1:#b3402e; --cur2:#8a3a2a; --curglow:rgba(179,64,46,.35); --nowlt:#8a6d1a;
  --line:rgba(120,100,70,.18); --line2:rgba(120,100,70,.3);
  --soft:rgba(120,100,70,.06); --softline:rgba(120,100,70,.15); --ghost:rgba(120,100,70,.08);
  --shadow:0 20px 55px -28px rgba(80,60,30,.3); --drawer:rgba(250,245,232,.97); --sheet:rgba(253,250,244,.98);
  --ok:#4a7c59; --bad:#b3402e; --pink:#b3402e; --orange:#8a6d1a; --gold:#8a6d1a;
  --font-ch: "Kaiti SC","STKaiti","KaiTi","FangSong",serif;
}

body[data-theme=matcha] {
  --bg:#eef5e9; --panel:#f7fbf4; --panel2:#e2eedd; --glass:rgba(255,255,255,.72);
  --fg:#24402c; --dim:#5f8266; --faint:#8fae94;
  --acc:#4a8c3f; --acc2:#0e9488; --accink:#3d7a35; --glow:rgba(74,140,63,.2);
  --au1:rgba(74,140,63,.14); --au2:rgba(14,148,136,.1); --au3:rgba(163,177,72,.14);
  --au-op:.9; --sd-op:0; --veil:rgba(238,245,233,0);
  --hero1:#1f3a27; --hero2:#4a8c3f; --hero3:#0e9488;
  --btn1:#44823a; --btn2:#36702e; --btn3:#0e9488;
  --cur1:#c2410c; --cur2:#9a3412; --curglow:rgba(194,65,12,.35); --nowlt:#92600a;
  --line:rgba(36,64,44,.14); --line2:rgba(36,64,44,.24);
  --soft:rgba(36,64,44,.05); --softline:rgba(36,64,44,.12); --ghost:rgba(36,64,44,.07);
  --shadow:0 20px 55px -28px rgba(36,64,44,.3); --drawer:rgba(247,251,244,.97); --sheet:rgba(255,255,255,.98);
  --bad:#c2410c; --pink:#c2410c; --orange:#92600a; --gold:#92600a;
}

body[data-theme=rose] {
  --bg:#fdf2f6; --panel:#fff8fa; --panel2:#f7e3ec; --glass:rgba(255,255,255,.75);
  --fg:#5b2438; --dim:#a06377; --faint:#c295a4;
  --acc:#d6558a; --acc2:#8b5cf6; --accink:#c0467c; --glow:rgba(214,85,138,.22);
  --au1:rgba(214,85,138,.14); --au2:rgba(139,92,246,.1); --au3:rgba(251,146,60,.1);
  --au-op:.9; --sd-op:0; --veil:rgba(253,242,246,0);
  --hero1:#4d1d30; --hero2:#d6558a; --hero3:#8b5cf6;
  --btn1:#cf4a82; --btn2:#b03a6e; --btn3:#8b5cf6;
  --cur1:#e11d48; --cur2:#be123c; --curglow:rgba(225,29,72,.35); --nowlt:#b45309;
  --line:rgba(91,36,56,.13); --line2:rgba(91,36,56,.22);
  --soft:rgba(91,36,56,.05); --softline:rgba(91,36,56,.12); --ghost:rgba(91,36,56,.07);
  --shadow:0 20px 55px -28px rgba(91,36,56,.3); --drawer:rgba(255,248,250,.97); --sheet:rgba(255,255,255,.98);
  --bad:#e11d48; --pink:#e11d48;
}

body[data-theme=minimal] {
  --bg:#ffffff; --panel:#ffffff; --panel2:#f4f4f5; --glass:rgba(255,255,255,.85);
  --fg:#111111; --dim:#9b9b9e; --faint:#c4c4c7;
  --acc:#111111; --acc2:#111111; --accink:#111111; --glow:rgba(0,0,0,.08);
  --au-op:0; --sd-op:0; --veil:rgba(255,255,255,0);
  --hero1:#111; --hero2:#333; --hero3:#111;
  --btn1:#111; --btn2:#000; --btn3:#333;
  --cur1:#111; --cur2:#000; --curglow:rgba(0,0,0,.3); --nowlt:#000;
  --line:rgba(0,0,0,.1); --line2:rgba(0,0,0,.18);
  --soft:rgba(0,0,0,.04); --softline:rgba(0,0,0,.1); --ghost:rgba(0,0,0,.06);
  --shadow:0 16px 45px -30px rgba(0,0,0,.3); --drawer:rgba(255,255,255,.98); --sheet:rgba(255,255,255,.99);
  --ok:#15803d; --bad:#e11d48; --pink:#e11d48; --orange:#8a5a00; --gold:#8a5a00;
}
body[data-theme=minimal] .cell.cur .ch { color:#fff; }
body[data-theme=ink] .cell .ch, body[data-theme=onyx] .cell .ch { font-family: var(--font-ch); }

/* ================= 迁移主题 20 套(自汉字打字页 v1 主题包移植; 与原 10 套同名同神韵的不再重复) ================= */
body[data-theme=cream] {
  --bg:linear-gradient(150deg,#fdf6ec,#fbe8ee 55%,#e9f3ef); --panel:#fdf9f5; --panel2:#f3e9e6; --glass:rgba(255,255,255,.65);
  --fg:#5b4a54; --dim:#a38a99; --faint:color-mix(in srgb,#a38a99 70%,transparent);
  --acc:#8e46c9; --acc2:#e879a9; --accink:#7a3cb0;
  --ok:#15803d; --bad:#e04848; --gold:#8a6d1a; --orange:#b45309; --pink:#e04848; --nowlt:#8a6d1a;
  --cur1:#c2417a; --cur2:#a93662; --au-op:.85; --sd-op:0; --veil:rgba(253,246,236,0);
  --drawer:rgba(253,249,245,.97); --sheet:rgba(255,255,255,.98);
  --font-ch:"Yuanti SC","PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
}
body[data-theme=starry] {
  --bg:linear-gradient(180deg,#cdd7ff 0%,#e9e6ff 60%,#fdefff 100%); --panel:#f4f4ff; --panel2:#e4e4f7; --glass:rgba(255,255,255,.66);
  --fg:#373a6b; --dim:#7f86b3; --faint:color-mix(in srgb,#7f86b3 70%,transparent);
  --acc:#7a7bff; --acc2:#a78bfa; --accink:#5d5ff0;
  --ok:#15803d; --bad:#e04848; --gold:#b45309; --orange:#b45309; --pink:#e04848; --nowlt:#b45309;
  --cur1:#6366f1; --cur2:#4f46e5; --au-op:.85; --sd-op:0; --veil:rgba(233,230,255,0);
  --drawer:rgba(248,248,255,.97); --sheet:rgba(255,255,255,.98);
}
body[data-theme=press] {
  --bg:repeating-linear-gradient(0deg,#f4ecd8,#f4ecd8 3px,#f1e8d2 3px,#f1e8d2 6px); --panel:#fbf5e6; --panel2:#efe6cf; --glass:rgba(255,250,236,.72);
  --fg:#221d17; --dim:#857a68; --faint:color-mix(in srgb,#857a68 70%,transparent);
  --acc:#1f4d7a; --acc2:#8c2f1e; --accink:#1a4166;
  --ok:#3e6b4f; --bad:#8c2f1e; --gold:#8a6d1a; --orange:#8c2f1e; --pink:#8c2f1e; --nowlt:#8a6d1a;
  --cur1:#8c2f1e; --cur2:#75261a; --au-op:.5; --sd-op:0; --veil:rgba(244,236,216,0);
  --drawer:#f4ecd8; --sheet:#fffaf0;
  --font-ch:"Songti SC","SimSun",Georgia,"Microsoft YaHei","PingFang SC","Noto Sans SC",serif;
}
body[data-theme=nebula] {
  --bg:linear-gradient(180deg,#ffd9f2 0%,#e3deff 55%,#d9f1ff 100%); --panel:#f6f1fc; --panel2:#e9e0f5; --glass:rgba(255,255,255,.68);
  --fg:#5a3a72; --dim:#9d7cbb; --faint:color-mix(in srgb,#9d7cbb 70%,transparent);
  --acc:#b95fd0; --acc2:#6f9bff; --accink:#9a48b3;
  --ok:#15803d; --bad:#e04848; --gold:#b45309; --orange:#b45309; --pink:#e04848; --nowlt:#b45309;
  --cur1:#a855f7; --cur2:#9333ea; --au-op:.85; --sd-op:0; --veil:rgba(240,235,255,0);
  --drawer:rgba(250,246,253,.97); --sheet:rgba(255,255,255,.98);
}
body[data-theme=aqua] {
  --bg:linear-gradient(180deg,#d6f5ff 0%,#aee6ff 60%,#dcf7ff 100%); --panel:#eefaff; --panel2:#d8effc; --glass:rgba(255,255,255,.74);
  --fg:#075d7a; --dim:#4f93ab; --faint:color-mix(in srgb,#4f93ab 70%,transparent);
  --acc:#0d8ecf; --acc2:#22d3ee; --accink:#0a76a8;
  --ok:#15803d; --bad:#e04848; --gold:#b45309; --orange:#b45309; --pink:#e04848; --nowlt:#b45309;
  --cur1:#0284c7; --cur2:#0369a1; --au-op:.85; --sd-op:0; --veil:rgba(220,247,255,0);
  --drawer:rgba(240,250,254,.97); --sheet:rgba(255,255,255,.98);
}
body[data-theme=sakura] {
  --bg:linear-gradient(165deg,#fdf0f4,#fbe4ec 55%,#f3e8f7); --panel:#fdf6f9; --panel2:#f5e5ee; --glass:rgba(255,255,255,.6);
  --fg:#5c3d4e; --dim:#b994ab; --faint:color-mix(in srgb,#b994ab 70%,transparent);
  --acc:#9d5fb8; --acc2:#ef7cab; --accink:#86499e;
  --ok:#15803d; --bad:#e04848; --gold:#8a6d1a; --orange:#c2410c; --pink:#e04848; --nowlt:#8a6d1a;
  --cur1:#db2777; --cur2:#be185d; --au-op:.85; --sd-op:0; --veil:rgba(253,240,244,0);
  --drawer:rgba(253,246,249,.97); --sheet:rgba(255,255,255,.98);
  --font-ch:"Hiragino Mincho ProN","Songti SC","Microsoft YaHei","PingFang SC","Noto Sans SC",serif;
}
body[data-theme=candy] {
  --bg:linear-gradient(120deg,#ffd9ec 0%,#fff2b8 45%,#c9f1ff 100%); --panel:#fff7fb; --panel2:#ffeef6; --glass:rgba(255,255,255,.72);
  --fg:#7a3b68; --dim:#b98aa8; --faint:color-mix(in srgb,#b98aa8 70%,transparent);
  --acc:#f0509a; --acc2:#38bdf8; --accink:#d43d85;
  --ok:#15803d; --bad:#e04848; --gold:#b45309; --orange:#b45309; --pink:#e04848; --nowlt:#b45309;
  --cur1:#ec4899; --cur2:#db2777; --au-op:.8; --sd-op:0; --veil:rgba(255,247,251,0);
  --drawer:rgba(255,249,253,.97); --sheet:rgba(255,255,255,.98);
}
body[data-theme=vapor] {
  --bg:linear-gradient(180deg,#ffd9e8 0%,#e8d5ff 46%,#bfe3ff 53%,#e7f3ff 100%); --panel:#f9f4ff; --panel2:#ece4f9; --glass:rgba(255,255,255,.7);
  --fg:#5a4a8a; --dim:#9a8ac0; --faint:color-mix(in srgb,#9a8ac0 70%,transparent);
  --acc:#c46fd8; --acc2:#6ee3c5; --accink:#a94fc4;
  --ok:#15803d; --bad:#e04848; --gold:#b45309; --orange:#b45309; --pink:#e04848; --nowlt:#b45309;
  --cur1:#a855f7; --cur2:#9333ea; --au-op:.8; --sd-op:0; --veil:rgba(249,244,255,0);
  --drawer:rgba(252,248,255,.97); --sheet:rgba(255,255,255,.98);
}
body[data-theme=meteor] {
  --bg:linear-gradient(180deg,#ffe3ae 0%,#ffc7d4 55%,#d9c8ff 100%); --panel:#fdf4ec; --panel2:#f4e6df; --glass:rgba(255,255,255,.66);
  --fg:#6b4a6e; --dim:#a586a8; --faint:color-mix(in srgb,#a586a8 70%,transparent);
  --acc:#f06fa0; --acc2:#8b7bd8; --accink:#d5568c;
  --ok:#15803d; --bad:#e04848; --gold:#b45309; --orange:#b45309; --pink:#e04848; --nowlt:#b45309;
  --cur1:#ec4899; --cur2:#db2777; --au-op:.8; --sd-op:0; --veil:rgba(255,240,244,0);
  --drawer:rgba(253,246,250,.97); --sheet:rgba(255,255,255,.98);
}
body[data-theme=firefly] {
  --bg:linear-gradient(180deg,#eafff3 0%,#d5f6e3 60%,#c2f0d4 100%); --panel:#f0fbf5; --panel2:#dcefe3; --glass:rgba(255,255,255,.72);
  --fg:#1e5c40; --dim:#5e9a7c; --faint:color-mix(in srgb,#5e9a7c 70%,transparent);
  --acc:#17a06a; --acc2:#0ea5a0; --accink:#148559;
  --ok:#15803d; --bad:#e04848; --gold:#8a6d1a; --orange:#b45309; --pink:#e04848; --nowlt:#8a6d1a;
  --cur1:#059669; --cur2:#047857; --au-op:.85; --sd-op:0; --veil:rgba(234,255,243,0);
  --drawer:rgba(244,253,248,.97); --sheet:rgba(255,255,255,.98);
}
body[data-theme=bubble] {
  --bg:linear-gradient(180deg,#bfe9ff 0%,#8fd3ff 55%,#e6f8ff 100%); --panel:#ecf8ff; --panel2:#d6eefa; --glass:rgba(255,255,255,.74);
  --fg:#0b4f79; --dim:#4f7fa3; --faint:color-mix(in srgb,#4f7fa3 70%,transparent);
  --acc:#ff6f9c; --acc2:#0d8ecf; --accink:#e8578a;
  --ok:#15803d; --bad:#e04848; --gold:#b45309; --orange:#b45309; --pink:#e04848; --nowlt:#b45309;
  --cur1:#0284c7; --cur2:#0369a1; --au-op:.8; --sd-op:0; --veil:rgba(230,248,255,0);
  --drawer:rgba(240,250,255,.97); --sheet:rgba(255,255,255,.98);
}
body[data-theme=snow] {
  --bg:linear-gradient(180deg,#e7efff 0%,#f7faff 58%,#dfe9fb 100%); --panel:#f5f8ff; --panel2:#e4ebf8; --glass:rgba(255,255,255,.75);
  --fg:#3a4a6e; --dim:#7a8ab0; --faint:color-mix(in srgb,#7a8ab0 70%,transparent);
  --acc:#6f9bff; --acc2:#a5b8e8; --accink:#5a82e8;
  --ok:#15803d; --bad:#e04848; --gold:#b45309; --orange:#b45309; --pink:#e04848; --nowlt:#b45309;
  --cur1:#4f7df6; --cur2:#3b6ae0; --au-op:.85; --sd-op:0; --veil:rgba(247,250,255,0);
  --drawer:rgba(247,251,255,.97); --sheet:rgba(255,255,255,.98);
}
body[data-theme=inkwash] {
  --bg:linear-gradient(165deg,#f6f2e9 0%,#efe8d8 60%,#e8dfcc 100%); --panel:#faf6ec; --panel2:#ede5d2; --glass:rgba(255,252,244,.72);
  --fg:#2f2a24; --dim:#a89c86; --faint:color-mix(in srgb,#a89c86 70%,transparent);
  --acc:#b3402e; --acc2:#3d6b99; --accink:#993826;
  --ok:#5c8a6a; --bad:#c0392b; --gold:#8a6d1a; --orange:#b3402e; --pink:#c0392b; --nowlt:#8a6d1a;
  --cur1:#b3402e; --cur2:#993826; --au-op:.6; --sd-op:0; --veil:rgba(246,242,233,0);
  --drawer:rgba(250,246,237,.97); --sheet:rgba(255,252,244,.98);
  --font-ch:"Kaiti SC","KaiTi","STKaiti","Microsoft YaHei","PingFang SC","Noto Sans SC",serif;
}
body[data-theme=sunset2] {
  --bg:linear-gradient(150deg,#ff9a6c,#ff5e8e 45%,#a4508b 85%); --panel:rgba(255,246,240,.35); --panel2:rgba(255,246,240,.28); --glass:rgba(255,255,255,.16);
  --fg:#fff8f4; --dim:rgba(255,245,240,.62); --faint:rgba(255,245,240,.4);
  --acc:#ffde9c; --acc2:#ffffff; --accink:#ffe9c8;
  --ok:#9df0bd; --bad:#ff7575; --gold:#ffd982; --orange:#ffd982; --pink:#ff7575; --nowlt:#ffe9c8;
  --cur1:#7c2d5e; --cur2:#601f4a; --au-op:.4; --sd-op:0; --veil:rgba(90,20,70,.2);
  --drawer:rgba(90,20,70,.92); --sheet:rgba(120,35,95,.94);
  --font-ch:"Songti SC","Microsoft YaHei","PingFang SC","Noto Sans SC",serif;
}
body[data-theme=neon2] {
  --bg:linear-gradient(160deg,#0a0e1a 0%,#0d1226 60%,#12081e 100%); --panel:#0d1226; --panel2:#131a34; --glass:rgba(16,22,40,.55);
  --fg:#e8f0ff; --dim:#5d6b93; --faint:#46527a;
  --acc:#00e5ff; --acc2:#ff2e63; --accink:#7ee7ff;
  --ok:#00ffa3; --bad:#ff2e63; --gold:#ffd23c; --orange:#ffd23c; --pink:#ff2e63; --nowlt:#ffd23c;
  --cur1:#00b8d4; --cur2:#0091ad; --au-op:.6; --sd-op:.3; --veil:rgba(6,8,16,.45);
  --drawer:rgba(10,14,26,.97); --sheet:rgba(16,22,40,.98);
}
body[data-theme=neon2] .dk-kb-host {
  --kb-key-bg:#101830; --kb-key-text:#cfe6ff; --kb-key-border:rgba(0,229,255,.22);
  --kb-key-special-bg:#0c1222; --kb-key-special-text:#5d6b93;
  --kb-accent:#00e5ff; --kb-accent-glow:rgba(0,229,255,.25);
}
body[data-theme=cyber] {
  --bg:#050a06; --panel:#06140a; --panel2:#0a1c0e; --glass:rgba(6,20,10,.55);
  --fg:#b8ffcf; --dim:#3f7a53; --faint:#2d5c3e;
  --acc:#39ff5a; --acc2:#00e5ff; --accink:#7dffa0;
  --ok:#39ff5a; --bad:#ff5a5a; --gold:#ffd23c; --orange:#ffd23c; --pink:#ff5a5a; --nowlt:#ffd23c;
  --cur1:#059669; --cur2:#047857; --au-op:.6; --sd-op:.3; --veil:rgba(3,8,5,.4);
  --drawer:rgba(4,14,7,.97); --sheet:rgba(6,20,10,.98);
  --font-ch:"JetBrains Mono","Microsoft YaHei","PingFang SC","Noto Sans SC",monospace;
}
body[data-theme=cyber] .dk-kb-host {
  --kb-key-bg:#0a2012; --kb-key-text:#9dffb7; --kb-key-border:rgba(57,255,90,.25);
  --kb-key-special-bg:#06140a; --kb-key-special-text:#3f7a53;
  --kb-accent:#39ff5a; --kb-accent-glow:rgba(57,255,90,.25);
}
body[data-theme=glitch] {
  --bg:#0a0a0d; --panel:#101016; --panel2:#16161e; --glass:rgba(16,16,22,.7);
  --fg:#f2f2fa; --dim:#9a9ab2; --faint:#6a6a82;
  --acc:#ff3c78; --acc2:#3cffc0; --accink:#ff6b9d;
  --ok:#3cffc0; --bad:#ff3c3c; --gold:#ffd23c; --orange:#ffd23c; --pink:#ff3c78; --nowlt:#ffd23c;
  --cur1:#ff3c78; --cur2:#d92f66; --au-op:.55; --sd-op:.25; --veil:rgba(5,5,8,.45);
  --drawer:rgba(12,12,17,.97); --sheet:rgba(16,16,22,.98);
  --font-ch:"JetBrains Mono",Consolas,"Microsoft YaHei","PingFang SC","Noto Sans SC",monospace;
}
body[data-theme=glitch] .dk-kb-host {
  --kb-key-bg:#15151d; --kb-key-text:#d8d8e8; --kb-key-border:rgba(255,60,120,.22);
  --kb-key-special-bg:#101016; --kb-key-special-text:#9a9ab2;
  --kb-accent:#ff3c78; --kb-accent-glow:rgba(255,60,120,.25);
}
body[data-theme=magma] {
  --bg:linear-gradient(180deg,#12060a,#1e0906 60%,#0d0405); --panel:#1c0b08; --panel2:#26100b; --glass:rgba(36,12,10,.55);
  --fg:#fff0e6; --dim:#b07a63; --faint:#8a5c4a;
  --acc:#ff7a2f; --acc2:#ffd9a8; --accink:#ffb37a;
  --ok:#9fe870; --bad:#ff4d4d; --gold:#ffd9a8; --orange:#ffd9a8; --pink:#ff4d4d; --nowlt:#ffd9a8;
  --cur1:#c2410c; --cur2:#9a3412; --au-op:.6; --sd-op:.25; --veil:rgba(10,3,3,.45);
  --drawer:rgba(24,7,6,.97); --sheet:rgba(36,12,10,.98);
  --font-ch:"Songti SC","Microsoft YaHei","PingFang SC","Noto Sans SC",serif;
}
body[data-theme=magma] .dk-kb-host {
  --kb-key-bg:#2a100a; --kb-key-text:#ffe8d9; --kb-key-border:rgba(255,122,47,.25);
  --kb-key-special-bg:#1c0b08; --kb-key-special-text:#b07a63;
  --kb-accent:#ff7a2f; --kb-accent-glow:rgba(255,122,47,.25);
}
body[data-theme=grid] {
  --bg:#05060f; --panel:#0a0e20; --panel2:#10152c; --glass:rgba(10,14,32,.6);
  --fg:#e6ecff; --dim:#6a7396; --faint:#4a5278;
  --acc:#5d8bff; --acc2:#46e6a0; --accink:#7ba4ff;
  --ok:#46e6a0; --bad:#ff5f7e; --gold:#ffd23c; --orange:#ffd23c; --pink:#ff5f7e; --nowlt:#ffd23c;
  --cur1:#3b82f6; --cur2:#2563eb; --au-op:.6; --sd-op:.25; --veil:rgba(3,4,10,.45);
  --drawer:rgba(6,9,22,.97); --sheet:rgba(10,14,32,.98);
  --font-ch:"JetBrains Mono","PingFang SC","Microsoft YaHei","Noto Sans SC",monospace;
}
body[data-theme=grid] .dk-kb-host {
  --kb-key-bg:#0d1226; --kb-key-text:#dbe4ff; --kb-key-border:rgba(93,139,255,.25);
  --kb-key-special-bg:#0a0e20; --kb-key-special-text:#6a7396;
  --kb-accent:#5d8bff; --kb-accent-glow:rgba(93,139,255,.25);
}
body[data-theme=beam] {
  --bg:#0a0a0c; --panel:#121216; --panel2:#18181e; --glass:rgba(18,18,22,.6);
  --fg:#f5efdf; --dim:#8a8778; --faint:#67645a;
  --acc:#d4af37; --acc2:#ffd982; --accink:#e8c96a;
  --ok:#a3d977; --bad:#e06060; --gold:#ffd982; --orange:#ffd982; --pink:#e06060; --nowlt:#ffd982;
  --cur1:#a16207; --cur2:#854d0e; --au-op:.55; --sd-op:.2; --veil:rgba(5,5,6,.45);
  --drawer:rgba(12,12,14,.97); --sheet:rgba(18,18,22,.98);
  --font-ch:"Didot","Songti SC","Microsoft YaHei","PingFang SC","Noto Sans SC",serif;
}
body[data-theme=beam] .dk-kb-host {
  --kb-key-bg:#17171c; --kb-key-text:#f5efdf; --kb-key-border:rgba(255,217,130,.22);
  --kb-key-special-bg:#121216; --kb-key-special-text:#8a8778;
  --kb-accent:#ffd982; --kb-accent-glow:rgba(255,217,130,.25);
}
/* 迁移主题: 书法体主题汉字联动 */
body[data-theme=inkwash] .cell .ch, body[data-theme=sakura] .cell .ch,
body[data-theme=press] .cell .ch, body[data-theme=sunset2] .cell .ch,
body[data-theme=magma] .cell .ch, body[data-theme=beam] .cell .ch { font-family: var(--font-ch); }

/* 主题卡 */
.th-card { display: flex; align-items: center; padding: 12px 14px; margin-bottom: 10px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--soft); cursor: pointer; transition: border-color .15s, transform .12s; }
.th-card:hover { border-color: var(--acc); transform: translateX(2px); }
.th-card.on { border-color: color-mix(in srgb, var(--acc) 70%, transparent); background: color-mix(in srgb, var(--acc) 11%, transparent); box-shadow: 0 0 0 3px var(--glow); }
.th-card .ti { font-size: 20px; margin-right: 12px; }
.th-card .tn b { font-size: 15px; display: block; }
.th-card .tn p { font-size: 11.5px; color: var(--dim); margin-top: 2px; }
.th-card .th-dots { margin-left: auto; display: flex; }
.th-card .th-dots i { width: 15px; height: 15px; border-radius: 50%; margin-left: 5px; border: 1px solid rgba(128,128,128,.35); }
.th-card .ck { color: var(--accink); font-size: 13px; margin-left: 8px; }

/* ================= 3.0 新手化组件 ================= */
/* 首页次要链接行 */
.hero-links { margin-top: 12px; font-size: 13px; color: var(--faint); }
.hero-links button { border: 0; background: none; color: var(--dim); font-size: 13px; cursor: pointer; padding: 4px 2px; }
.hero-links button:hover { color: var(--accink); }
.hero-links i { font-style: normal; margin: 0 10px; color: var(--faint); }

/* 新手三步条 */
.steps3-wrap { max-width: 1040px; margin: 5vh auto 0; }
.steps3 { display: flex; }
.s3 { flex: 1 1 0; min-width: 0; margin: 0 8px; padding: 18px 18px 16px; border-radius: var(--r-lg); position: relative;
  background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow); cursor: pointer;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .2s, border-color .2s; }
.s3:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--acc) 55%, transparent); }
.s3 .s3-no { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; margin-bottom: 10px;
  background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--accink);
  border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); }
.s3 b { font-size: 16px; display: block; }
.s3 p { font-size: 12.5px; color: var(--dim); margin-top: 5px; line-height: 1.8; }
.s3 .s3-go { position: absolute; right: 14px; top: 16px; font-size: 12px; color: var(--accink); }
.s3::after { content: ""; position: absolute; right: -14px; top: 50%; width: 12px; height: 2px; background: var(--line2); }
.s3:last-child::after { display: none; }
@media (max-width: 760px) {
  .steps3 { flex-direction: column; }
  .s3 { margin: 0 0 12px; }
  .s3::after { display: none; }
}

/* 课程地图五步分组 */
.stage { margin: 0 0 6px; }
.stage-head { display: flex; align-items: baseline; margin: 18px 6px 8px; }
.stage-head .st-tag { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--accink);
  background: color-mix(in srgb, var(--acc) 13%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent);
  border-radius: 999px; padding: 3px 12px; margin-right: 12px; white-space: nowrap; }
.stage-head .st-tit { font-size: 16px; font-weight: 700; }
.stage-head .st-desc { font-size: 12.5px; color: var(--faint); margin-left: 10px; }
.stage .journey { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .stage .journey { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stage .journey { grid-template-columns: 1fr; } }
#journey { display: block; }

/* 声母/韵母/零声母 总表（第1课） */
.py-table { border-radius: var(--r-md); border: 1px solid var(--softline); background: var(--soft); padding: 12px 14px; margin: 8px 0; }
.py-table .pt-cap { font-size: 12.5px; color: var(--dim); margin-bottom: 8px; }
.py-row { display: flex; flex-wrap: wrap; margin: 0 -3px; }
.py-chip { margin: 3px; padding: 6px 10px 5px; border-radius: 9px; background: var(--panel2);
  border: 1px solid var(--softline); text-align: center; min-width: 44px; }
.py-chip b { display: block; font-size: 16px; font-weight: 800; line-height: 1.25; color: var(--fg); }
.py-chip i { display: block; font-style: normal; font-size: 10.5px; color: var(--faint); line-height: 1.5; white-space: nowrap; }
.py-chip.sp b { color: var(--accink); }                    /* zh/ch/sh 特殊声母 */
.py-chip.yw b { color: var(--orange); }                    /* y/w 开头字母 */
.py-chip.zero b { color: var(--gold); }
.py-g { display: flex; align-items: baseline; margin: 10px 0 4px; }
.py-g em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--accink); white-space: nowrap; margin-right: 10px; }
.py-g span { font-size: 11.5px; color: var(--faint); }
.py-g2 { border-top: 1px dashed var(--softline); margin-top: 10px; padding-top: 8px; }
.py-note { font-size: 12.5px; color: var(--dim); line-height: 1.9; margin-top: 8px; }
.py-note b { color: var(--fg); }

/* 本课你将学会 */
.takeaway { max-width: 860px; margin: 0 auto 14px; padding: 14px 20px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ok) 8%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 28%, transparent); }
.takeaway .tk-t { font-size: 13px; font-weight: 700; color: var(--ok); margin-bottom: 6px; }
.takeaway ul { margin: 0; padding: 0; list-style: none; }
.takeaway li { font-size: 13.5px; color: var(--fg); line-height: 2; }
.takeaway li::before { content: "✓ "; color: var(--ok); font-weight: 700; }

/* 新手引导浮层 */
.g-step { min-height: 190px; text-align: center; padding-top: 26px; }
.g-step .g-ico { font-size: 44px; line-height: 1.2; }
.g-step b { display: block; font-size: 19px; margin: 12px 0 8px; }
.g-step p { font-size: 14px; color: var(--dim); line-height: 2; max-width: 330px; margin: 0 auto; }
.g-step p .kcap { margin: 0 2px; }
.g-dots { text-align: center; margin-top: 4px; }
.g-dots i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--softline); margin: 0 4px; }
.g-dots i.on { background: var(--acc); width: 18px; border-radius: 4px; }

/* 打字页顶栏: 说明高亮 */
.tbtn.lead { color: var(--accink); border-color: color-mix(in srgb, var(--acc) 55%, transparent); }
@media (max-width: 560px) { .s3 { padding: 14px; } .stage-head .st-desc { display: none; } }

/* ================= 3.1 简化版首页（清单式课程） ================= */
.hero { margin-top: 6vh; }
.stage-sep { display: flex; align-items: baseline; margin: 26px 4px 6px; padding-bottom: 6px; border-bottom: 1px solid var(--softline); }
.stage-sep span { font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--accink); }
.stage-sep i { font-style: normal; font-size: 12px; color: var(--faint); margin-left: 10px; }
.lrow { display: flex; align-items: center; padding: 14px 12px; margin: 6px 0; border-radius: var(--r-md);
  background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow); cursor: pointer;
  transition: transform .15s ease, border-color .2s; }
.lrow:hover { transform: translateX(4px); border-color: color-mix(in srgb, var(--acc) 45%, transparent); }
.lrow .ln { width: 44px; height: 44px; border-radius: 12px; margin-right: 14px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800;
  background: var(--soft); border: 1px solid var(--softline); color: var(--accink); }
.lrow .lt { flex: 1; min-width: 0; }
.lrow .lt b { font-size: 15.5px; font-weight: 700; display: block; }
.lrow .lt p { font-size: 12.5px; color: var(--dim); margin-top: 3px; line-height: 1.7;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .lr { text-align: right; margin: 0 10px 0 14px; flex: 0 0 auto; }
.lrow .lr b { display: block; font-size: 14px; color: var(--accink); }
.lrow .lr.ing b { color: var(--fg); }
.lrow .lr b.dn { color: var(--ok); font-weight: 600; }
.lrow .lr span { font-size: 11.5px; color: var(--faint); }
.lrow .la { color: var(--faint); font-size: 18px; flex: 0 0 auto; }
.home-foot { padding: 20px 8px 34px; }
.hf-bar { height: 4px; border-radius: 2px; background: var(--soft); overflow: hidden; margin-bottom: 10px; }
.hf-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--btn1), var(--acc2)); }
.hf-line { display: flex; justify-content: center; flex-wrap: wrap; font-size: 12.5px; color: var(--dim); }
.hf-line b { color: var(--fg); }
.hf-star { color: var(--gold); margin: 0 14px; }
.hf-dim { color: var(--faint); }
@media (max-width: 560px) {
  .lrow { padding: 12px 10px; }
  .lrow .lt p { white-space: normal; }
  .lrow .lr span { display: none; }
}
.lrow.next { border-color: color-mix(in srgb, var(--acc) 55%, transparent); box-shadow: 0 0 0 3px var(--glow), var(--shadow); }
.lrow.next .ln { background: linear-gradient(135deg, var(--btn1), var(--btn2)); color: #fff; border-color: transparent; }
.lrow.next .lr b { color: var(--accink); font-weight: 800; }

/* ================= 五笔训练营键帽标签层(三角布局) ================= */
/* 三视图各司其职: 字根键盘=区位键名+字母+字根, 简码键盘=字母+简码字, 标准键盘=素键 */
.sp-kb-wrap.v-root .dk-kb-key .sp-base, .sp-kb-wrap.v-jian .dk-kb-key .sp-base {
  position: absolute; top: 2px; right: 10px; margin: 0;
  font-size: calc(var(--kb-fs, 16.5px) * .58); font-weight: 600; color: var(--dim); }
.sp-kb-wrap .dk-kb-key[data-key="space"] .sp-kc { position: absolute; bottom: 3px; left: 8px; margin: 0; }
/* v-root: 左上 区位号+键名字(按区分色) */
.sp-kb-wrap.v-root .dk-kb-key .sp-kl {
  position: absolute; top: 2px; left: 3px; margin: 0;
  font-size: calc(var(--kb-fs, 16.5px) * .55); line-height: 1; font-weight: 700; white-space: nowrap;
  font-family: "Inter", "Noto Sans SC", sans-serif; }
.sp-kb-wrap.v-root .dk-kb-key[data-zone="1"] .sp-kl { color: #16a34a; }
.sp-kb-wrap.v-root .dk-kb-key[data-zone="2"] .sp-kl { color: #2563eb; }
.sp-kb-wrap.v-root .dk-kb-key[data-zone="3"] .sp-kl { color: #ea580c; }
.sp-kb-wrap.v-root .dk-kb-key[data-zone="4"] .sp-kl { color: #db2777; }
.sp-kb-wrap.v-root .dk-kb-key[data-zone="5"] .sp-kl { color: #9333ea; }
.sp-kb-wrap.v-root .dk-kb-key .sp-kl.z-learn { color: var(--faint); font-weight: 500; }
/* v-root: 左下 字根分两行完整显示(字号由 JS rowsFontSize 按实际字体量宽内联适配, 不再截断) */
.sp-kb-wrap.v-root .dk-kb-key .sp-kc { position: absolute; bottom: 2px; left: 3px; margin: 0; }
.sp-kb-wrap .dk-kb-key .sp-kc.kl-rows { display: flex; flex-direction: column; align-items: flex-start; }
.sp-kb-wrap .dk-kb-key .sp-kc.kl-rows i { display: flex; gap: 1.5px; font-style: normal; }
.sp-kb-wrap .dk-kb-key .sp-kc.kl-rows b { font-weight: 600; }
/* v-jian: 左下 一级简码字(大号) */
.sp-kb-wrap.v-jian .dk-kb-key .sp-kl {
  position: absolute; bottom: 2px; left: 3px; margin: 0;
  font-size: calc(var(--kb-fs, 16.5px) * .95); line-height: 1.1; font-weight: 700; color: var(--accink);
  font-family: "Inter", "Noto Sans SC", sans-serif; }
/* 字根表抽屉: 五区卡 */
.zk-zone { border-radius: var(--r-md); border: 1px solid var(--softline); background: var(--soft); padding: 12px 14px; margin: 10px 0; }

/* 首页右侧"全部关卡"竖排菜单钮 + 关卡抽屉列表 */
#lv-side { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 40;
  writing-mode: vertical-rl; letter-spacing: 3px; padding: 16px 8px; cursor: pointer;
  border: 1px solid var(--line); border-right: 0; border-radius: 12px 0 0 12px;
  background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--accink); font-size: 13px; font-weight: 600; box-shadow: -4px 6px 24px -12px rgba(0,0,0,.5); }
#lv-side:hover { color: var(--fg); border-color: var(--acc); }
.lvv-course { display: flex; align-items: center; gap: 8px; margin: 16px 0 4px; font-size: 13px; }
.lvv-course b { flex: 1; color: var(--fg); }
.lvv-course i { font-style: normal; font-size: 11px; color: var(--dim); }
.lvv-part { margin: 6px 0 10px; }
.lvv-part > span { display: block; font-size: 12px; color: var(--dim); margin-bottom: 2px; }
#dr-levels-body .lv-g { width: 36px; height: 36px; margin: 3px; border-radius: 9px; }
.zk-zone .zk-h { display: flex; align-items: baseline; margin-bottom: 8px; }
.zk-zone .zk-h b { font-size: 14px; margin-right: 10px; }
.zk-zone .zk-h span { font-size: 11.5px; color: var(--faint); }
.zk-key { display: flex; margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: var(--panel2);
  border: 1px solid var(--softline); }
.zk-key .zk-k { flex: 0 0 66px; font-weight: 800; font-size: 14px; color: var(--accink); }
.zk-key .zk-r { flex: 1; min-width: 0; font-size: 12.5px; color: var(--fg); line-height: 1.7; }
.zk-key .zk-r i { font-style: normal; display: block; font-size: 11px; color: var(--dim); }

/* 结算弹窗按键提示 */
.r-keyhint { text-align: center; margin-top: 12px; font-size: 11.5px; color: var(--faint); letter-spacing: .02em; }
.r-keyhint b { color: var(--accink); font-weight: 700; }

/* ≤420px 窄屏: 顶栏改两行(返回+工具一行, 标题独占一行居中) —— Firefox/Chromium 字体度量差异下 6 按钮也不溢出视口 */
@media (max-width: 420px) {
  #v-type { padding: 8px 8px 8px; }
  .nav { flex-wrap: wrap; row-gap: 6px; margin-bottom: 6px; }
  .nav-title { order: 3; flex: 1 1 100%; min-width: 0; margin: 0; font-size: 12.5px; }
  .tbtn { padding: 5px 8px; font-size: 11.5px; margin-left: 4px; }
  .nav-btn { width: 34px; height: 34px; }
}

/* ===== 顶栏: 关卡选择汉字化 + H5 工具按钮收进菜单 (2026-10-20) ===== */
.nav { position: relative; }
.nav-btn.wide { width: auto; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; }
.nav-btn.menu-btn { display: none; }
@media (max-width: 560px) {
  .nav-btn.menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .nav-btn.wide { padding: 0 10px; font-size: 12px; }
  .nav-tools { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 70;
    flex-direction: column; align-items: stretch; min-width: 132px;
    background: var(--panel2); border: 1px solid var(--line2); border-radius: 14px; padding: 7px;
    box-shadow: 0 14px 34px -12px rgba(0,0,0,.45); }
  .nav-tools.open { display: flex; }
  .nav-tools .tbtn { margin: 2px 0; padding: 9px 12px; font-size: 13px; text-align: center; }
}

/* ===== H5 打字页导航调整(2026-10-22): 紧贴页面顶部 + 选择关卡靠右 ===== */
@media (max-width: 560px) {
  #v-type { padding-top: 0; padding-top: env(safe-area-inset-top, 0px); }
  .nav { margin-top: 0; }
  .nav-btn.wide { order: 2; }        /* 选择关卡移到标题右侧 */
  .nav-btn.menu-btn { order: 3; }    /* ☰ 保持最右 */
}

/* ===== H5 首页系统导航(2026-10-22): 仅手机端显示, 随首页视图显隐 ===== */
#dazi-nav { display: none; }
@media (max-width: 560px) { #dazi-nav { display: block; } }

/* ===== H5 首页导航贴顶修正(2026-10-22): 容器 padding 清零, 留白转移内容区 ===== */
@media (max-width: 560px) {
  #v-home { padding: 0 !important; }
  #v-home .hero, #v-home .path-wrap, #v-home .home-foot { margin-left: 10px; margin-right: 10px; }
}

/* ===== [2026-10-26 H5导航修复] 工具收纳断点 560→768 + 导航强制单行 =====
 * 561~768px 的手机(600/700mm 宽档)此前 7 个工具按钮平铺溢出, 导航挤乱换行;
 * 统一收纳进 ☰, 并 nowrap+标题省略, 任何手机宽度导航单行贴顶(与系统首页口径一致) */
@media (max-width: 768px) {
  .nav { flex-wrap: nowrap; }
  .nav-btn.menu-btn { display: inline-flex; align-items: center; justify-content: center; order: 3; }
  .nav-btn.wide { order: 2; padding: 0 10px; font-size: 12px; }
  .nav-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-tools { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 70;
    flex-direction: column; align-items: stretch; min-width: 132px;
    background: var(--panel2); border: 1px solid var(--line2); border-radius: 14px; padding: 7px;
    box-shadow: 0 14px 34px -12px rgba(0,0,0,.45); }
  .nav-tools.open { display: flex; }
  .nav-tools .tbtn { margin: 2px 0; padding: 9px 12px; font-size: 13px; text-align: center; }
  #v-type { padding-top: 0; padding-top: env(safe-area-inset-top, 0px); }
}

/* =====================================================================
   全站导航贴顶(2026-10-23, 与首页一致): 挂载点 #dazi-nav 移出 #app 至 #page 直下。
   #page 纵向 flex: nav-lite 导航(70px)常驻页面顶部, #app 填满剩余高度;
   打字视图 JS 隐藏 .dnl 时 flex 自动回收 70px, #app 回满屏(show() 原逻辑不变)。
   #app 原有的 position/z-index 职责由 #page 接管(背景层 #bg z-index:0 在其下)。
   ===================================================================== */
#page { position: relative; z-index: 1; display: flex; flex-direction: column; height: var(--app-h); height: 100dvh; }
#app { height: auto; flex: 1; min-height: 0; }