/* ===== styles.css ===== */
/* ===========================================================
   日语酱 · 设计系统 v3 「Aurora Glass」
   极光渐变背景 + 玻璃浮层 + 弹性动效
   所有动画只跑 transform / opacity，吃满 120Hz ProMotion
   =========================================================== */

/* ---------------- 设计令牌 ---------------- */
:root{
  /* 色板 */
  --ink: #1c1930;
  --ink-2: #6e6a88;
  --ink-3: #9b96b0;
  --pink: #ff7eb3;
  --pink-l: #ffb3d1;
  --violet: #a78bfa;
  --cyan: #67e8f9;
  --mint: #6ee7b7;
  --amber: #fbbf24;
  --rose: #fb7185;
  --ok: #34d399;
  --danger: #fb7185;

  /* 渐变 */
  --g-main: linear-gradient(135deg, #ff7eb3 0%, #a78bfa 100%);
  --g-soft: linear-gradient(135deg, rgba(255,126,179,.16), rgba(167,139,250,.16));
  --g-cyan: linear-gradient(135deg, #67e8f9, #6ee7b7);
  --g-warm: linear-gradient(135deg, #fbbf24, #fb7185);

  /* 表面 */
  --bg: #f7f4ff;
  --bg-2: #efeafc;
  --surface: rgba(255, 255, 255, .74);
  --surface-solid: #ffffff;
  --surface-2: rgba(255, 255, 255, .52);
  --line: rgba(28, 25, 48, .07);
  --line-2: rgba(255, 255, 255, .65);
  --blur: 22px;

  /* 阴影：多层叠加才有"浮起来"的质感 */
  --sh-1: 0 1px 2px rgba(28,25,48,.05), 0 4px 12px rgba(28,25,48,.06);
  --sh-2: 0 2px 6px rgba(28,25,48,.06), 0 12px 28px rgba(28,25,48,.09);
  --sh-3: 0 4px 12px rgba(28,25,48,.08), 0 24px 56px rgba(28,25,48,.13);
  --sh-glow: 0 10px 30px rgba(255,126,179,.32), 0 4px 12px rgba(167,139,250,.24);

  /* 圆角 */
  --r-xl: 30px;
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 13px;
  --r-pill: 999px;

  /* 动效 */
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);
  --e-out: cubic-bezier(.22, 1, .36, 1);
  --e-inout: cubic-bezier(.65, 0, .35, 1);
  --t-fast: .16s;
  --t-mid: .3s;
  --t-slow: .5s;

  --top-h: 58px;
  --tab-h: 66px}

/* 深色 */
@media (prefers-color-scheme: dark) {html:not([data-theme="light"]){
    --ink: #f4f2ff; --ink-2: #a9a3c2; --ink-3: #7d7796;
    --bg: #0d0a18; --bg-2: #16112a;
    --surface: rgba(32, 27, 54, .72);
    --surface-solid: #1b1630;
    --surface-2: rgba(255, 255, 255, .05);
    --line: rgba(255, 255, 255, .09);
    --line-2: rgba(255, 255, 255, .10);
    --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);
    --sh-2: 0 2px 6px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.45);
    --sh-3: 0 4px 12px rgba(0,0,0,.5), 0 24px 56px rgba(0,0,0,.55)}
}/* 皮肤：只换主色与极光色，保持质感统一 */
html[data-skin="star"]{ --pink: #8b9cff; --pink-l: #b9c3ff; --violet: #c084fc; --g-main: linear-gradient(135deg,#8b9cff,#c084fc); --sh-glow: 0 10px 30px rgba(139,156,255,.34), 0 4px 12px rgba(192,132,252,.26)}html[data-skin="matcha"]{ --pink: #4ade80; --pink-l: #a7f3c8; --violet: #34d399; --g-main: linear-gradient(135deg,#4ade80,#34d399); --sh-glow: 0 10px 30px rgba(74,222,128,.32), 0 4px 12px rgba(52,211,153,.24)}html[data-skin="sunset"]{ --pink: #fb923c; --pink-l: #fdba74; --violet: #f472b6; --g-main: linear-gradient(135deg,#fb923c,#f472b6); --sh-glow: 0 10px 30px rgba(251,146,60,.32), 0 4px 12px rgba(244,114,182,.24)}html[data-skin="ocean"]{ --pink: #38bdf8; --pink-l: #7dd3fc; --violet: #818cf8; --g-main: linear-gradient(135deg,#38bdf8,#818cf8); --sh-glow: 0 10px 30px rgba(56,189,248,.32), 0 4px 12px rgba(129,140,248,.24)}/* ---------------- 基础 ---------------- */
*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent}html, body{ height: 100%}body{
  margin: 0;
  font-family: -apple-system, "SF Pro SC", "PingFang SC", "Hiragino Sans", "Noto Sans JP", "Microsoft YaHei", sans-serif;
  line-height: 1.5;
  letter-spacing: .01em;
  overscroll-behavior-y: none;
  
  text-rendering: optimizeLegibility}/* 极光背景：四团缓慢漂移的光斑 */
#aurora{
  position: fixed; inset: -20% -20% -20% -20%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38% 30% at 18% 12%, rgba(255,126,179,.55), transparent 62%),
    radial-gradient(34% 28% at 86% 8%, rgba(167,139,250,.52), transparent 60%),
    radial-gradient(40% 32% at 78% 82%, rgba(103,232,249,.42), transparent 62%),
    radial-gradient(36% 30% at 8% 78%, rgba(110,231,183,.40), transparent 62%);
  filter: blur(22px) saturate(1.2);
  animation: aurora 26s var(--e-inout) infinite alternate}
@keyframes aurora {
}body::before{ position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, transparent 40%, var(--bg) 100%)}
@media (prefers-color-scheme: dark) {html:not([data-theme="light"]) #aurora{ opacity: .5}
}button, input, select, textarea{ font: inherit; color: inherit}h3{ margin: 0 0 10px}.dim{ line-height: 1.62}.hidden{ display: none !important}.en{ font-size: 11px; opacity: .7}.num{ font-variant-numeric: tabular-nums}/* ---------------- 顶栏 ---------------- */
#topbar{
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: calc(var(--top-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 16px 0;
  display: flex; align-items: center; justify-content: space-between;
  transition: height var(--t-mid) var(--e-out), background var(--t-mid);
  background: transparent}#topbar.solid{
  /* 不透明 + 无 backdrop-filter：iOS 上毛玻璃=顶部虚化条，且滚动/切换开销大 */
  background: color-mix(in srgb, var(--bg) 97%, var(--surface-solid));
  border-bottom: 1px solid var(--line)}.tb-title{
  display: block;
  background: var(--g-main); -webkit-background-clip: text; background-clip: text; color: transparent}.tb-sub{ display: block; color: var(--ink-3); margin-top: 1px; transition: opacity var(--t-fast)}#topbar.solid .tb-sub{ opacity: .75}.tb-right{ display: flex; gap: 9px; align-items: center}/* 通用图标按钮 */
.icon-btn{
  border: 1px solid var(--line-2); background: var(--surface);
  border-radius: var(--r-sm); padding: 8px 11px; font-size: 15px;
  box-shadow: var(--sh-1); cursor: pointer; position: relative; overflow: hidden;
  transition: transform var(--t-fast) var(--e-spring), box-shadow var(--t-fast)}/* ---------------- 主体 ---------------- */
#main{
  padding: calc(var(--top-h) + env(safe-area-inset-top) + 10px) 16px
           calc(var(--tab-h) + env(safe-area-inset-bottom) + 26px);
  max-width: 580px; margin: 0 auto;
  min-height: 100dvh;                 /* 每个 tab 的页面高度一致，切页不再跳 */
  box-sizing: border-box}html, body{ overscroll-behavior-y: none}/* 禁止整页下拉回弹 */
.view.active{ min-height: 88vh; min-height: calc(100dvh - 160px)}/* 每个 tab 至少占满一屏，不再有高矮不一 */
.view{ display: none}.view.active{ display: block}.view.active > *{ animation: rise .52s var(--e-out) both}.view.active > *:nth-child(1){ animation-delay: .02s}.view.active > *:nth-child(2){ animation-delay: .07s}.view.active > *:nth-child(3){ animation-delay: .12s}.view.active > *:nth-child(4){ animation-delay: .17s}.view.active > *:nth-child(5){ animation-delay: .22s}.view.active > *:nth-child(6){ animation-delay: .27s}.view.active > *:nth-child(n+7){ animation-delay: .31s}
@keyframes rise {
}/* 逐个入场的列表项 */
.stagger > *{ animation: rise .5s var(--e-out) both}/* ---------------- 卡片 ---------------- */
.card{
  position: relative;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); padding: 17px; margin-bottom: 15px;
  box-shadow: var(--sh-2)}/* 顶部高光，玻璃感的关键 */
.card::after{
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 34%);
  opacity: .9; mix-blend-mode: overlay}/* ---------------- 按钮 ---------------- */
.btn{
  position: relative; overflow: hidden;
  border: 0; border-radius: var(--r-md); padding: 13px 20px; font-size: 14.5px; letter-spacing: .01em;
  background: var(--surface-solid); color: var(--ink); box-shadow: var(--sh-1);
  cursor: pointer;
  transition: transform var(--t-fast) var(--e-spring), box-shadow var(--t-fast), filter var(--t-fast)}.btn.primary::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.42) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: sheen 3.6s var(--e-inout) infinite}
@keyframes sheen {0%, 62%{ transform: translateX(-120%)}92%, 100%{ transform: translateX(120%)} }.btn.ok{ background: linear-gradient(135deg, #34d399, #6ee7b7); color: #06301f}.btn.danger{ background: linear-gradient(135deg, #fb7185, #fda4af); color: #43060f}.btn.ghost{ box-shadow: var(--sh-1)}.btn.small{ padding: 9px 15px; border-radius: var(--r-sm)}.row-between{ display: flex; align-items: center; justify-content: space-between; gap: 10px}/* 水波纹 */
.ripple{
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,.55); transform: scale(0); opacity: .7;
  animation: ripple .58s var(--e-out) forwards}
@keyframes ripple { }.chip{
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 11px; box-shadow: 0 2px 8px rgba(167,139,250,.3)}.chip.soft{ border: 1px solid var(--line); box-shadow: none}/* ---------------- 首页舞台 ---------------- */
.stage{
  position: relative; height: 300px; margin-bottom: 16px; border-radius: var(--r-xl);
  overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--sh-3);
  background:
    radial-gradient(120% 80% at 50% 6%, rgba(255,255,255,.9), rgba(255,255,255,.25) 55%, transparent 78%),
    linear-gradient(165deg, rgba(255,126,179,.30), rgba(167,139,250,.28) 52%, rgba(103,232,249,.24))}
@media (prefers-color-scheme: dark) {html:not([data-theme="light"]) .stage{
    background: radial-gradient(120% 80% at 50% 6%, rgba(255,255,255,.10), transparent 60%),
                linear-gradient(165deg, rgba(255,126,179,.20), rgba(167,139,250,.22) 52%, rgba(103,232,249,.16))}
}#live2d-canvas{ width: 100%; height: 100%; display: block; touch-action: none}.live2d-tip{
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--ink-2); font-size: 13px; pointer-events: none}.bubble{
  position: absolute; left: 14px; top: 14px; max-width: 64%;
  padding: 10px 15px; border-radius: 18px 18px 18px 5px;
  background: var(--surface-solid); border: 1px solid var(--line-2);
  font-size: 12.5px; line-height: 1.5; box-shadow: var(--sh-2); z-index: 3;
  animation: bubbleIn .55s var(--e-spring)}
@keyframes bubbleIn { }.char-btn{
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  border: 1px solid var(--line-2); width: 44px; height: 44px; border-radius: 16px;
  font-size: 19px; background: var(--surface); box-shadow: var(--sh-2); cursor: pointer;
  transition: transform var(--t-fast) var(--e-spring)}/* 舞台上的浮动数据条 */
.float-stats{
  position: absolute; left: 14px; bottom: 14px; z-index: 3; display: flex; gap: 7px}.fs-chip{
  display: flex; flex-direction: column; align-items: center; min-width: 54px;
  background: color-mix(in srgb, var(--surface-solid) 86%, transparent);
  border: 1px solid var(--line-2); box-shadow: var(--sh-1)}.fs-chip b{ font-size: 15px; line-height: 1.1; font-variant-numeric: tabular-nums}.fs-chip span{ font-size: 9.5px; color: var(--ink-3)}/* ---------------- 任务环 ---------------- */
.task-head{ display: flex; gap: 18px; align-items: center}.ring-wrap{ position: relative; width: 112px; height: 112px; flex: none}.ring{ width: 112px; height: 112px; transform: rotate(-90deg)}.ring-bg{ fill: none; stroke: var(--line); stroke-width: 9}.ring-fg{
  fill: none; stroke: var(--pink); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 327; stroke-dashoffset: 327;
  transition: stroke-dashoffset 1s var(--e-out);
  filter: drop-shadow(0 0 8px rgba(255,126,179,.75))}.ring-label{ position: absolute; inset: 0; display: grid; place-content: center; text-align: center}.ring-label b{ font-size: 24px; font-variant-numeric: tabular-nums}.ring-label span{ font-size: 9.5px; color: var(--ink-3); display: block; letter-spacing: .08em}.task-info h3{ margin-bottom: 6px}.task-info p{ margin: 4px 0}.task-info b{ color: var(--pink); font-variant-numeric: tabular-nums}.task-actions{ display: flex; gap: 11px; margin-top: 16px}/* ---------------- 磁贴 ---------------- */
.grid2{ display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-bottom: 15px}.tile{
  position: relative; overflow: hidden; text-align: left; cursor: pointer;
  border: 1px solid var(--line-2); padding: 16px;
  background: var(--surface); box-shadow: var(--sh-2);
  display: flex; flex-direction: column; gap: 4px;
  transition: transform var(--t-fast) var(--e-spring), box-shadow var(--t-fast)}.tile-ico{ font-size: 24px; line-height: 1; margin-bottom: 2px}.tile em{ font-style: normal; color: var(--ink-3)}.tile::before{
  content: ""; position: absolute; right: -30%; top: -40%; width: 90%; height: 140%;
  background: var(--g-soft); border-radius: 50%; filter: blur(6px); opacity: .8}/* ---------------- 番茄钟 ---------------- */
.pomo-card{ display: flex; align-items: center; justify-content: space-between; gap: 12px}.pomo-time{ font-variant-numeric: tabular-nums;
  background: var(--g-main); -webkit-background-clip: text; background-clip: text; color: transparent}.pomo-right{ text-align: center; display: flex; flex-direction: column; gap: 7px; align-items: center}.tip-text{ margin: 0}/* ---------------- 分段控件 ---------------- */
.seg{
  display: flex; gap: 5px; padding: 5px; margin-bottom: 14px;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-pill);
  box-shadow: var(--sh-1); overflow-x: auto; scrollbar-width: none}.seg::-webkit-scrollbar{ display: none}.seg-btn{
  border: 0; background: transparent; padding: 9px 15px;
  font-size: 13px; color: var(--ink-2); white-space: nowrap; cursor: pointer;
  transition: color var(--t-fast), transform var(--t-fast) var(--e-spring)}.seg-btn.active{ box-shadow: var(--sh-glow)}.seg.small{ padding: 4px; margin-bottom: 12px}.seg.small .seg-btn{ padding: 7px 13px; font-size: 12.5px}/* ---------------- 课次卡片 ---------------- */
.lesson-list{ display: grid; grid-template-columns: 1fr 1fr; gap: 11px}.lesson-item{
  position: relative; overflow: hidden; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: 14px; box-shadow: var(--sh-1);
  transition: transform var(--t-fast) var(--e-spring), box-shadow var(--t-fast)}.lesson-item .li-no{ letter-spacing: -.01em}.lesson-item .li-meta{ color: var(--ink-3); margin-top: 3px; line-height: 1.45}.lesson-item .li-bar{ height: 5px; border-radius: var(--r-pill); background: var(--line); margin-top: 9px; overflow: hidden}.lesson-item .li-bar i{
  display: block; height: 100%; width: 0; border-radius: var(--r-pill);
  background: var(--g-main); transition: width .8s var(--e-out)}/* ---------------- 单词行 ---------------- */
.wrow{
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: 12px 13px; margin-bottom: 9px; box-shadow: var(--sh-1);
  transition: transform .28s var(--e-out), opacity .28s var(--e-out)}/* 左滑露出的收藏底 */
.wrow .swipe-bg{
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end;
  padding-right: 20px; font-size: 19px; background: var(--g-main); color: #fff}.wr-main{ flex: 1; min-width: 0; position: relative; z-index: 1}.wr-jp{ letter-spacing: .01em}.wr-zh{ color: var(--ink-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}.wr-zh i{ font-style: normal; opacity: .65}.wr-btn{
  position: relative; z-index: 1; padding: 7px 10px; font-size: 14px;
  box-shadow: none; background: var(--surface-2)}/* 搜索框 */
.search{
  width: 100%; padding: 14px 16px; margin-bottom: 12px;
  border-radius: var(--r-md); border: 1px solid var(--line-2);
  background: var(--surface); box-shadow: var(--sh-1); font-size: 15px;
  transition: box-shadow var(--t-mid), border-color var(--t-mid)}.search:focus{
  outline: none; border-color: var(--pink)}#word-count{ margin-bottom: 12px !important}/* ---------------- 翻转卡 ---------------- */
.deck-head{ display: flex; align-items: center; gap: 11px; margin-bottom: 13px}.deck-title{ font-size: 15px; flex: 1}.deck-pos{ font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums}.flash{ position: relative; perspective: 1400px; margin-bottom: 16px}.flash-face{
  position: absolute; inset: 0; border-radius: var(--r-xl); padding: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 1px solid var(--line-2); box-shadow: var(--sh-3); overflow: hidden;
  transition: transform .68s var(--e-out)}.flash-face::before{
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.55), transparent 40%);
  mix-blend-mode: overlay}.flash-front{ background: linear-gradient(155deg, #ffffff, #ffe9f3 60%, #eadcff)}.flash-back{ background: linear-gradient(155deg, #ffffff, #e2f6ff 60%, #e6fff4); transform: rotateY(180deg)}
@media (prefers-color-scheme: dark) {html:not([data-theme="light"]) .flash-front{ background: linear-gradient(155deg, #241d3d, #33264d 60%, #3a2c56)}html:not([data-theme="light"]) .flash-back{ background: linear-gradient(155deg, #1d2438, #223047 60%, #1f3a3a)}
}.flash.flipped .flash-front{ transform: rotateY(180deg)}.flash.flipped .flash-back{ transform: rotateY(360deg)}.flash-kana{ letter-spacing: .02em}.flash-kanji{ color: var(--ink-2); min-height: 28px}.flash-zh{ text-align: center; line-height: 1.35}.flash-meta{ display: flex; gap: 8px; margin-top: 2px}.flash-note{ text-align: center; max-width: 90%}.flash-hint{ position: absolute; bottom: 14px; font-size: 11px; color: var(--ink-3)}.speak{ position: absolute; right: 15px; top: 15px}.deck-actions{ display: flex; flex-wrap: wrap; gap: 10px}.deck-actions .btn{ flex: 1 1 auto; min-width: 0; padding: 13px 10px}/* 滑卡手势反馈（右滑=认识 / 左滑=不认识） */
.flash.swipe-right .flash-face{ box-shadow: 0 0 0 3px rgba(52, 211, 153, .6), var(--sh-3)}.flash.swipe-left .flash-face{ box-shadow: 0 0 0 3px rgba(251, 113, 133, .6), var(--sh-3)}/* 课程列表里的按课测验成绩徽章 */
.li-score{
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: var(--r-pill);
  font-size: 10.5px; color: #fff; background: var(--g-main);
  vertical-align: 1px; box-shadow: var(--sh-1)}/* 整句听写的「再听一次」 */
#btn-type-play{ margin-top: 9px}/* ---------------- 听力 ---------------- */
.listen-stage{ text-align: center; padding: 16px 0 8px}.big-speak{
  border: 0; width: 128px; height: 128px; border-radius: 50%; cursor: pointer;
  background: var(--g-main); color: #fff; font-size: 36px;
  box-shadow: var(--sh-glow); display: grid; place-items: center; gap: 2px; margin: 0 auto;
  transition: transform var(--t-fast) var(--e-spring)}.big-speak span{ opacity: .95}.big-speak.playing{ animation: pulse 1.15s var(--e-inout) infinite}
@keyframes pulse {55%{ box-shadow: var(--sh-glow), 0 0 0 22px rgba(255,126,179,0)}
}.listen-repeat{ margin-top: 14px; min-height: 28px; color: var(--ink-2); letter-spacing: .1em}.speed{ display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums}.listen-foot{ margin-top: 10px}/* ---------------- 选项 ---------------- */
.options{ display: flex; flex-direction: column; gap: 11px; margin-top: 14px}.opt{
  position: relative; overflow: hidden; text-align: left; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--r-md);
  padding: 15px 16px; box-shadow: var(--sh-1);
  transition: transform var(--t-fast) var(--e-spring), background var(--t-fast), border-color var(--t-fast);
  animation: rise .42s var(--e-out) both}.opt:nth-child(1){ animation-delay: .02s}.opt:nth-child(2){ animation-delay: .07s}.opt:nth-child(3){ animation-delay: .12s}.opt:nth-child(4){ animation-delay: .17s}.opt.right{
  background: linear-gradient(135deg, #34d399, #6ee7b7); color: #042f20;
  border-color: transparent; animation: pop .45s var(--e-spring)}.opt.wrong{
  background: linear-gradient(135deg, #fb7185, #fda4af); color: #45060f;
  border-color: transparent; animation: shake .5s var(--e-out)}.opt small{ display: block; opacity: .78; margin-top: 5px}
@keyframes pop {42%{ transform: scale(1.045)} }
@keyframes shake {0%, 100%{ transform: translateX(0)}18%{ transform: translateX(-8px)}38%{ transform: translateX(7px)}58%{ transform: translateX(-5px)}78%{ transform: translateX(3px)}
}/* ---------------- 连词成句 ---------------- */
.order-area{ margin-top: 14px}.order-built{
  min-height: 60px; display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
  padding: 12px; border-radius: var(--r-md); margin-bottom: 12px;
  border: 1.5px dashed var(--line-2); background: var(--surface-2)}.order-pool{ display: flex; flex-wrap: wrap; gap: 9px}.chunk{
  position: relative; overflow: hidden; border: 0; cursor: pointer;
  padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--g-main); color: #fff; box-shadow: var(--sh-1);
  transition: transform var(--t-fast) var(--e-spring), filter var(--t-fast)}.chunk.built{ background: linear-gradient(135deg, #34d399, #6ee7b7); color: #042f20}.chunk.miss{ background: linear-gradient(135deg, #fb7185, #fda4af); color: #45060f}.chunk:disabled{ cursor: default}/* ---------------- 语法 ---------------- */
.gram-list{ display: flex; flex-direction: column; gap: 11px}.gram-item{
  position: relative; overflow: hidden; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: 14px 15px; box-shadow: var(--sh-1);
  transition: transform var(--t-fast) var(--e-spring), box-shadow var(--t-fast)}.gram-item h4{ margin: 0 0 5px; line-height: 1.45}.gram-item .gi-lesson{
  display: inline-block; font-size: 10.5px; color: var(--pink);
  background: color-mix(in srgb, var(--pink) 12%, transparent);
  padding: 2px 9px; border-radius: var(--r-pill); margin-bottom: 7px}.gram-detail{ margin-top: 12px; line-height: 1.7; animation: rise .42s var(--e-out)}.gram-detail .gd-row{ margin: 8px 0}.gram-detail .gd-k{
  display: inline-block; color: #fff; background: var(--g-main);
  font-size: 10.5px; padding: 2px 8px; border-radius: var(--r-pill); margin-right: 6px}.gram-detail .ex{
  background: var(--surface-2); border-left: 3px solid var(--pink);
  border-radius: 12px; padding: 11px 13px; margin: 9px 0}.gram-detail .ex .jp{ cursor: pointer; font-size: 14.5px}.gram-detail .ex .zh{ color: var(--ink-2); font-size: 12px; margin-top: 5px}/* ---------------- 测试 ---------------- */
.quiz-menu{ display: flex; flex-direction: column; gap: 11px}.quiz-item{ display: flex; gap: 14px; align-items: center; margin: 0; cursor: pointer}.qi-ico{
  width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; flex: none;
  font-size: 22px; color: #fff;
  background: var(--g-main); box-shadow: var(--sh-glow)}.quiz-item h3{ margin: 0}.quiz-item p{ margin: 4px 0 0}.quiz-head{ display: flex; align-items: center; gap: 12px; margin-bottom: 14px}.quiz-bar{ flex: 1; height: 9px; border-radius: var(--r-pill); background: var(--line); overflow: hidden}.quiz-bar i{
  display: block; height: 100%; width: 0; border-radius: var(--r-pill);
  background: var(--g-main); box-shadow: 0 0 12px rgba(255,126,179,.7);
  transition: width .45s var(--e-out)}#quiz-count{ font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums}.quiz-q{
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: 26px 18px; text-align: center; line-height: 1.5;
  box-shadow: var(--sh-2); min-height: 108px; display: grid; place-items: center}.quiz-result{ text-align: center; padding: 14px 0 0; animation: rise .5s var(--e-out)}.qr-score{
  font-size: 46px; letter-spacing: -.02em;
  background: var(--g-main); -webkit-background-clip: text; background-clip: text; color: transparent}.quiz-result .btn{ margin: 7px 5px}/* ---------------- 口语跟读 ---------------- */
.speak-card{ text-align: center}.speak-target{ line-height: 1.5; letter-spacing: .01em}.speak-zh{ font-size: 13px; margin-top: 6px}.speak-btns{ display: flex; gap: 9px; justify-content: center; margin: 16px 0 12px; flex-wrap: wrap}.rec-meter{ height: 11px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; margin: 8px 0 14px}.rec-meter i{
  display: block; height: 100%; width: 0; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--ok), var(--amber), var(--danger));
  transition: width .06s linear}.speak-score{ margin-top: 6px}.sc-total{ line-height: 1.05; letter-spacing: -.03em;
  background: var(--g-main); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: pop .5s var(--e-spring)}.sc-total small{ font-size: 16px; margin-left: 4px; -webkit-text-fill-color: var(--ink-3)}.sc-word{ font-size: 14.5px; margin: 4px 0 8px}.sc-parts{ display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-2)}.speak-next{ margin-top: 14px}/* ---------------- 选择器 ---------------- */
.picker{ display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 12px}.pick{
  position: relative; overflow: hidden; cursor: pointer; text-align: left;
  border: 1.5px solid var(--line-2); background: var(--surface); border-radius: var(--r-md);
  padding: 10px 14px;
  transition: transform var(--t-fast) var(--e-spring), border-color var(--t-fast), box-shadow var(--t-fast)}.pick b{ display: block}.pick span{ color: var(--ink-3)}.pick i{ display: inline-block; width: 18px; height: 18px; border-radius: 50%; margin-right: 7px; vertical-align: -3px}.pick.on{ border-color: var(--pink)}.pick .del{
  position: absolute; right: 4px; top: 4px; font-size: 10px; line-height: 1;
  padding: 3px 6px; border-radius: 9px; background: var(--surface-2); color: var(--ink-3)}#btn-add-char{ border-style: dashed}#btn-add-char b{ color: var(--pink)}/* 结算页统计 */
.sheet .stats{ margin: 12px 0 4px}.sheet .stat{ background: var(--surface-2)}/* ---------------- 我的 ---------------- */
.stats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 10px 0 16px}.stat{
  text-align: center; background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--r-md); padding: 12px 4px}.stat b{ display: block; font-variant-numeric: tabular-nums;
  background: var(--g-main); -webkit-background-clip: text; background-clip: text; color: transparent}.stat span{ color: var(--ink-3)}.heat{ display: grid; grid-template-columns: repeat(35, 1fr); gap: 3.5px; margin: 8px 0}.heat i{ aspect-ratio: 1; border-radius: 3.5px; background: var(--line); transition: transform var(--t-fast) var(--e-spring)}.heat i.l1{ background: color-mix(in srgb, var(--pink) 28%, transparent)}.heat i.l2{ background: color-mix(in srgb, var(--pink) 55%, transparent)}.heat i.l3{ background: var(--pink)}.heat i.l4{ background: var(--violet); box-shadow: 0 0 8px color-mix(in srgb, var(--violet) 60%, transparent)}.set-row{
  display: flex; align-items: center; gap: 11px; padding: 12px 0;
  border-bottom: 1px solid var(--line)}.set-row:last-child{ border-bottom: 0}.set-row > span{ flex: none; width: 92px; color: var(--ink-2)}.set-row input[type=range]{ flex: 1; accent-color: var(--pink); height: 26px}.set-row input[type=checkbox]{ width: 21px; height: 21px; accent-color: var(--pink)}.set-row select, .set-row input[type=time]{
  flex: 1; padding: 9px 11px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface-solid)}.set-row b{ width: 32px; text-align: right; color: var(--pink); font-variant-numeric: tabular-nums}textarea{
  width: 100%; border-radius: var(--r-md); border: 1px solid var(--line-2);
  background: var(--surface-solid); padding: 13px; resize: vertical; font-size: 13.5px; margin: 9px 0}textarea:focus{ outline: none; border-color: var(--pink)}.about p{ margin: 7px 0}/* ---------------- 底部导航 ---------------- */
#tabbar{
  position: fixed; inset: auto 0 0 0; z-index: 40;
  height: calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(6, 1fr);
  background: color-mix(in srgb, var(--bg) 98%, var(--surface-solid));
  border-top: 1px solid var(--line-2)}#tabbar::before{ position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 52px; height: 4px; border-radius: var(--r-pill); background: var(--line-2);
  opacity: .8}.tab{
  position: relative; border: 0; background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  cursor: pointer;
  transition: color var(--t-mid) var(--e-out)}.tab span{ transition: transform .34s var(--e-spring)}.tab em{ font-style: normal; letter-spacing: .02em}.tab.active span{ transform: translateY(-4px) scale(1.2)}.tab.active::after{
  content: ""; position: absolute; bottom: 7px; width: 20px; height: 3px;
  border-radius: var(--r-pill); background: var(--g-main); box-shadow: 0 0 10px var(--pink);
  animation: tabIn .38s var(--e-spring)}
@keyframes tabIn { }/* ---------------- 底部抽屉 ---------------- */
.sheet-mask{
  position: fixed; inset: 0; z-index: 60; background: rgba(12, 8, 24, .38);
  opacity: 0; transition: opacity var(--t-mid) var(--e-out)}.sheet-mask.on{ opacity: 1}.sheet{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  background: var(--surface-solid); border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 10px 20px calc(26px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(0,0,0,.22); margin: 0 auto}.sheet.on{ transform: none}.sheet-grip{ width: 40px; height: 5px; border-radius: var(--r-pill); background: var(--line); margin: 0 auto 14px}/* ---------------- toast / fx ---------------- */
.toast{
  position: fixed; left: 50%; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 20px);
  transform: translate(-50%, 24px) scale(.94); z-index: 90; pointer-events: none;
  background: color-mix(in srgb, var(--ink) 92%, transparent); color: var(--bg);
  padding: 11px 19px; border-radius: var(--r-pill); font-size: 13.5px;
  opacity: 0; max-width: 84vw; text-align: center; box-shadow: var(--sh-3);
  transition: opacity .3s var(--e-out), transform .42s var(--e-spring)}.toast.show{ opacity: 1; transform: translate(-50%, 0) scale(1)}#fx{ position: fixed; inset: 0; pointer-events: none; z-index: 80}/* 骨架屏 */
.skeleton{
  background: linear-gradient(100deg, var(--line) 30%, color-mix(in srgb, var(--line) 40%, transparent) 50%, var(--line) 70%);
  background-size: 220% 100%; border-radius: var(--r-md); height: 54px; margin-bottom: 9px;
  animation: shimmer 1.3s linear infinite}
@keyframes shimmer {from{ background-position: 160% 0}to{ background-position: -60% 0} }/* 每日任务 */
.task-row{
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 11px 2px; border-bottom: 1px solid var(--line);
  transition: transform var(--t-fast) var(--e-spring), opacity var(--t-mid)}.task-row:last-child{ border-bottom: 0}.task-row.done{ opacity: .62}.tr-ico{ font-size: 19px; width: 24px; text-align: center; flex: none}.tr-main{ flex: 1; min-width: 0}.tr-bar{ height: 5px; border-radius: var(--r-pill); background: var(--line); margin-top: 6px; overflow: hidden}.tr-bar i{ display: block; height: 100%; border-radius: var(--r-pill); background: var(--g-main); transition: width .7s var(--e-out)}.tr-num{ color: var(--ink-3); font-variant-numeric: tabular-nums; flex: none}/* 版本徽章 */
.tb-ver{
  display: inline-block; margin-left: 7px; padding: 2px 7px; border-radius: var(--r-pill);
  font-size: 9.5px; color: #fff; background: var(--g-main);
  vertical-align: 3px; letter-spacing: .02em}/* 搜索抽屉 */
.gs-list{ max-height: 58vh; overflow-y: auto; -webkit-overflow-scrolling: touch; margin-top: 4px}.gs-h{ color: var(--pink); letter-spacing: .06em;
  margin: 14px 0 8px}.gs-list .gram-item{ margin-bottom: 9px}/* ===========================================================
   特效层 v0.6
   @property 动画渐变 / @starting-style / View Transitions
   =========================================================== */

/* 可动画的自定义属性（现代浏览器才支持，不支持就静态降级） */
@property --angle{ syntax: '<angle>'; initial-value: 0deg; inherits: false}
@property --glow { syntax: '<number>'; initial-value: 0; inherits: false; }/* 特效画布 */
#fx-layer{
  position: fixed; inset: 0; z-index: 30; pointer-events: none}/* ---------- 连击边缘光 ---------- */
body::after{
  content: ""; position: fixed; inset: 0; z-index: 75; pointer-events: none;
  border-radius: 0; opacity: 0;
  transition: opacity .45s var(--e-out);
  box-shadow: inset 0 0 0 0 transparent}html[data-combo="1"] body::after{ opacity: .55; box-shadow: inset 0 0 42px 2px rgba(255,126,179,.5)}html[data-combo="2"] body::after{
  opacity: .85;
  box-shadow: inset 0 0 62px 6px rgba(255,126,179,.62), inset 0 0 120px 22px rgba(167,139,250,.45);
  animation: edgePulse 1.5s var(--e-inout) infinite}html[data-combo="3"] body::after{
  opacity: 1;
  box-shadow: inset 0 0 78px 10px rgba(255,126,179,.7), inset 0 0 150px 34px rgba(167,139,250,.55),
              inset 0 0 220px 60px rgba(103,232,249,.35);
  animation: edgePulse .9s var(--e-inout) infinite}
@keyframes edgePulse {0%,100%{ filter: brightness(1)}50%{ filter: brightness(1.35)} }/* 连击时顶栏标题也发光 */
html[data-combo="2"] .tb-title, html[data-combo="3"] .tb-title{ filter: drop-shadow(0 0 10px rgba(255,126,179,.8))}html[data-combo="3"] .ring-fg{ filter: drop-shadow(0 0 14px var(--pink))}/* ---------- 屏抖 ---------- */
body.shake-1{ animation: shakeS .42s var(--e-out)}body.shake-2{ animation: shakeL .5s var(--e-out)}
@keyframes shakeS {
}
@keyframes shakeL {
}.flash.tilting .flash-face{ box-shadow: var(--sh-3), 0 0 0 1px rgba(255,255,255,.4)}.flash-face::after{
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 50%),
              rgba(255,255,255,.85), rgba(255,255,255,.12) 34%, transparent 62%);
  mix-blend-mode: soft-light}.flash.tilting .flash-face::after{ opacity: 1}/* ---------- 聚光跟随 ---------- */
.tile, .lesson-item, .gram-item, .quiz-item, .stat{ position: relative; overflow: hidden}.tile.spot::after, .lesson-item.spot::after, .gram-item.spot::after,
.quiz-item.spot::after, .stat.spot::after{
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255,255,255,.55), transparent 62%);
  mix-blend-mode: soft-light}/* ---------- 飘心 ---------- */
.fly-heart{
  position: fixed; z-index: 92; pointer-events: none; color: #ff5c93;
  text-shadow: 0 0 12px rgba(255,92,147,.85);
  animation: flyHeart 1.3s var(--e-out) forwards}
@keyframes flyHeart {22%{ opacity: 1; transform: translate(-50%, -16px) scale(1.15)}
}/* ---------- 星级展开 ---------- */
.star-row{ display: flex; justify-content: center; gap: 10px; margin: 6px 0 2px}.star-row .star{
  font-size: 32px; color: var(--line); opacity: 0;
  transform: scale(.2) rotate(-40deg);
  animation: starPop .55s var(--e-spring) forwards;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.18))}.star-row .star.on{
  color: #ffc93c;
  text-shadow: 0 0 18px rgba(255,201,60,.9)}
@keyframes starPop {62%{ opacity: 1; transform: scale(1.25) rotate(6deg)}
}/* ---------- 声波条 ---------- */
.big-speak{ position: relative}.wave-bars{
  position: absolute; left: 50%; bottom: -40px; transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 5px; height: 26px; opacity: 0;
  transition: opacity .3s}.wave-bars.on{ opacity: 1}.wave-bars i{
  width: 5px; height: 100%; border-radius: var(--r-pill);
  background: var(--g-main); transform-origin: bottom;
  transform: scaleY(.3)}/* ---------- View Transitions ---------- */
/* 切页淡入（只改透明度，不动位移：位移在真机上表现为「跳动」） */
.view.active{ animation: viewIn .18s var(--e-out)}
@keyframes viewIn { }/* 真机修复：去掉子元素逐个上浮动画（切页时整屏抖动的主因） */
.view.active > *{ animation: none !important}
@media (prefers-reduced-motion: no-preference) {::view-transition-old(root){ animation: vtOut .2s var(--e-out) both}::view-transition-new(root){ animation: vtIn .34s var(--e-out) both}
}
@keyframes vtOut { }
@keyframes vtIn { }

/* ---------- @starting-style：抽屉/吐司的原生入场 ---------- */
@supports (selector(:has(*))) {.sheet{ transition: transform .44s var(--e-out), overlay .44s allow-discrete, display .44s allow-discrete}
  @starting-style {
  }
}/* ---------- 按钮/选项的描边流光 ---------- */
.btn.primary, .big-speak, .qi-ico{
  background-image: var(--g-main);
  background-size: 200% 200%;
  animation: gradShift 6s var(--e-inout) infinite}
@keyframes gradShift {0%, 100%{ background-position: 0% 50%}50%{ background-position: 100% 50%}
}/* 答对冲击波（挂在选项上） */
.shock{
  position: absolute; left: 50%; top: 50%; width: 12px; height: 12px;
  margin: -6px 0 0 -6px; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(255,255,255,.95);
  animation: shockOut .62s var(--e-out) forwards}
@keyframes shockOut {
}/* 完成任务的对勾描线 */
.task-row.done .tr-ico{ animation: checkPop .5s var(--e-spring)}
@keyframes checkPop {0%{ transform: scale(.4) rotate(-25deg); opacity: .3}60%{ transform: scale(1.3) rotate(6deg)}100%{ transform: scale(1) rotate(0); opacity: 1}
}/* 打字机光标 */
.bubble::after{
  content: ""; display: inline-block; width: 2px; height: 12px;
  margin-left: 2px; vertical-align: -2px; background: var(--pink);
  animation: caret .8s steps(1) infinite}
@keyframes caret {0%, 50%{ opacity: 1}51%, 100%{ opacity: 0} }/* View Transition 期间不要叠加逐项入场动画 */
html.vt .view.active > *{ animation: none !important}html.vt .view.active > *{ opacity: 1}/* 输入型题型 */
.type-area{ margin-top: 14px}.type-area .search{ margin-bottom: 10px}.type-area .btn{ width: 100%}#type-hint{ text-align: center; margin: 10px 0 0; min-height: 20px}.type-ok{ color: var(--ok)}.type-bad{ color: var(--danger)}#type-input:disabled{ opacity: .6}/* 卡片上的收藏按钮 */
.deck-star{ position: absolute; left: 15px; top: 15px}/* 声调曲线 */
.pitch{ display: block; margin: 2px auto 0; overflow: visible}.pitch .pline{ fill: none; stroke: var(--pink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round}.pitch .pdrop{ stroke: var(--ink-3); stroke-width: 1.4; stroke-dasharray: 2 2}.pitch circle{ fill: var(--pink)}.pitch text{ font-size: 9.5px; fill: var(--ink-3)}.pitch.small .pline{ stroke-width: 2}.pitch.small circle{ r: 2}.flash-pitch{ display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: 2px; min-height: 34px}.pitch-tag{ font-size: 10.5px; color: var(--ink-3); letter-spacing: .02em}.sheet .pitch{ margin: 8px auto 2px}/* 长列表：屏外元素跳过渲染（200 行词表滚起来更顺） */
#word-rows .wrow{ content-visibility: auto; contain-intrinsic-size: auto 66px}/* ===========================================================
   v0.9：手动主题 / 字号缩放 / 大屏适配
   =========================================================== */
html{ color-scheme: light dark}html[data-theme="light"]{
  color-scheme: light;
  --ink: #1c1930; --ink-2: #6e6a88; --ink-3: #9b96b0;
  --bg: #f7f4ff; --bg-2: #efeafc;
  --surface: rgba(255,255,255,.74); --surface-solid: #ffffff; --surface-2: rgba(255,255,255,.52);
  --line: rgba(28,25,48,.07); --line-2: rgba(255,255,255,.65);
  --sh-1: 0 1px 2px rgba(28,25,48,.05), 0 4px 12px rgba(28,25,48,.06);
  --sh-2: 0 2px 6px rgba(28,25,48,.06), 0 12px 28px rgba(28,25,48,.09);
  --sh-3: 0 4px 12px rgba(28,25,48,.08), 0 24px 56px rgba(28,25,48,.13)}html[data-theme="dark"]{
  color-scheme: dark;
  --ink: #f4f2ff; --ink-2: #a9a3c2; --ink-3: #7d7796;
  --bg: #0d0a18; --bg-2: #16112a;
  --surface: rgba(32,27,54,.72); --surface-solid: #1b1630; --surface-2: rgba(255,255,255,.05);
  --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.10);
  --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);
  --sh-2: 0 2px 6px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.45);
  --sh-3: 0 4px 12px rgba(0,0,0,.5), 0 24px 56px rgba(0,0,0,.55)}html[data-theme="dark"] #aurora{ opacity: .5}html[data-theme="dark"] .card::after{ opacity: .25}html[data-theme="dark"] .flash-front{ background: linear-gradient(155deg, #241d3d, #33264d 60%, #3a2c56)}html[data-theme="dark"] .flash-back{ background: linear-gradient(155deg, #1d2438, #223047 60%, #1f3a3a)}html[data-theme="dark"] .stage{
  background: radial-gradient(120% 80% at 50% 6%, rgba(255,255,255,.10), transparent 60%),
              linear-gradient(165deg, rgba(255,126,179,.20), rgba(167,139,250,.22) 52%, rgba(103,232,249,.16))}html[data-theme="light"] #aurora{ opacity: 1}html[data-theme="light"] .card::after{ opacity: .9}/* 字号：全部用 rem，改 html 的 font-size 即可整体缩放 */
html{ font-size: 16px}html[data-fs="s"]{ font-size: 14.5px}html[data-fs="l"]{ font-size: 17.5px}html[data-fs="xl"]{ font-size: 19px}body{ font-size: 1rem}.dim{ font-size: .82rem}.btn{ font-size: .91rem}.btn.small{ font-size: .82rem}.icon-btn{ font-size: .94rem}.tb-sub{ font-size: .66rem}.tab span{ font-size: 1.25rem}.wr-jp{ font-size: 1.04rem}.wr-zh{ font-size: .79rem}.opt{ font-size: .94rem}.opt small{ font-size: .72rem}.quiz-item h3{ font-size: .97rem}.flash-kanji{ font-size: 1.38rem}.flash-zh{ font-size: 1.69rem}.flash-note{ font-size: .75rem}.lesson-item .li-no{ font-size: .94rem}.lesson-item .li-meta{ font-size: .69rem}.gram-item h4{ font-size: .97rem}.gram-detail{ font-size: .82rem}.listen-repeat{ font-size: 1.32rem}.big-speak span{ font-size: .72rem}.speak-target{ font-size: 1.63rem}.sc-total{ font-size: 3.25rem}.stat b{ font-size: 1.32rem}.stat span{ font-size: .66rem}.task-info p{ font-size: .85rem}.tr-main b{ font-size: .88rem}.tr-num{ font-size: .75rem}.tile span{ font-size: .94rem}.tile em{ font-size: .72rem}.pomo-time{ font-size: 1.75rem}.search{ font-size: .94rem}.pick b{ font-size: .88rem}.pick span{ font-size: .69rem}.gs-h{ font-size: .72rem}.chunk{ font-size: .91rem}.type-area .search{ font-size: .94rem}/* 特大字号下允许收缩，避免文字溢出容器 */
.btn, .tile, .task-actions{ min-width: 0}.task-actions .btn{ min-width: 0; overflow: hidden; text-overflow: ellipsis}.tile span, .tile em{ max-width: 100%; overflow: hidden; text-overflow: ellipsis}html[data-fs="xl"] .task-actions{ flex-wrap: wrap}html[data-fs="xl"] .task-actions .btn{ flex: 1 1 100%}

/* iPad / 大屏 */
@media (min-width: 760px) {.options{ display: grid; grid-template-columns: 1fr 1fr}
}
/* 更大的平板：iPad Pro 13" M4/M5 (1032×1376)、iPad Pro 12.9 / Air 13" (1024×1366)、横屏 */
@media (min-width: 1000px) {#main{ max-width: 1060px; padding-left: 34px; padding-right: 34px}.lesson-list{ grid-template-columns: repeat(4, 1fr)}.grid2{ grid-template-columns: repeat(4, 1fr)}.sheet{ max-width: 860px}.quiz-q{ font-size: 1.6rem}.flash-kana{ font-size: 3.1rem}
}
/* 横屏（手机横握） */
@media (orientation: landscape) and (max-height: 560px) {.stage{ height: 210px}.flash{ height: 220px}#main{ padding-top: calc(var(--top-h) + env(safe-area-inset-top) + 4px)}
}/* 汉字表 */
.kanji-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 6px}
@media (min-width: 760px) {.kanji-grid{ grid-template-columns: repeat(7, 1fr)} }.kj{
  border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--r-md);
  padding: 10px 4px 8px; cursor: pointer; box-shadow: var(--sh-1); text-align: center;
  transition: transform var(--t-fast) var(--e-spring), box-shadow var(--t-fast)}.kj b{ display: block; font-size: 1.55rem; line-height: 1.2}.kj span{ display: block; font-size: .6rem; color: var(--ink-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}.kj-head{ display: flex; gap: 16px; align-items: center; margin-bottom: 6px}.kj-big{
  font-size: 3.2rem; line-height: 1;
  background: var(--g-main); -webkit-background-clip: text; background-clip: text; color: transparent}.kj-rows{ margin: 10px 0 4px}.kj-row{ display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .88rem}.kj-row:last-child{ border-bottom: 0}.kj-row span{ flex: none; width: 46px; color: var(--ink-3); font-size: .8rem}/* 本课例句串读 */
.ex-item{
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: 12px 14px 11px; margin-bottom: 9px; box-shadow: var(--sh-1)}.ex-jp{ font-size: 1.04rem; line-height: 1.6; cursor: pointer}.ex-jp:active{ opacity: .6}.ex-no{ display: inline-block; width: 1.5em; color: var(--pink); font-style: normal}.ex-sp{ opacity: .45; font-size: .85em}.ex-zh{ font-size: .82rem; margin-top: 4px; padding-left: 1.5em}/* 添加到主屏引导 */
.steps{ margin: 6px 0 0; padding-left: 1.35em}.steps li{ font-size: .86rem; line-height: 1.75; color: var(--ink-2)}.steps li b{ color: var(--ink)}/* 词卡背面的真实例句 */
.fex-item{ text-align: left; margin: 2px 0 8px; padding: 7px 10px; background: var(--surface-2); border-radius: var(--r-sm)}.fex-jp{ font-size: .84rem; cursor: pointer; line-height: 1.5}.fex-jp:active{ opacity: .6}.fex-zh{ font-size: .74rem; color: var(--ink-3); margin-top: 2px}/* 备份提醒横幅 */
#backup-note{ display: flex; flex-direction: column; gap: 10px; border: 1px solid #ffb84d66; background: color-mix(in srgb, #fff3dc 78%, transparent)}#backup-note p{ margin: 0; font-size: .86rem; color: #7a5a1e; line-height: 1.6}#backup-note .btn{ align-self: flex-start}/* 跟读评分分块反馈 */
.sc-marks{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; justify-content: center}.sc-marks i{ font-style: normal; font-size: .74rem; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); line-height: 1.5}/* 新手引导 */
.ob{ position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 22px;
  background: rgba(18, 10, 34, .45)}.ob.hidden{ display: none}.ob-card{ width: min(92vw, 420px); background: var(--surface-solid); border-radius: 26px; padding: 26px 22px 18px;
  box-shadow: var(--sh-3); animation: ob-in .45s var(--e-spring); text-align: center}
@keyframes ob-in {from{ transform: translateY(30px) scale(.92); opacity: 0}to{ transform: none; opacity: 1} }.ob-dots{ display: flex; gap: 8px; justify-content: center; margin-bottom: 16px}.ob-dots i{ width: 8px; height: 8px; border-radius: 99px; background: var(--line-2); transition: all .3s var(--e-spring)}.ob-dots i.on{ width: 26px; background: var(--pink)}.ob-body{ position: relative; min-height: 264px; display: flex; align-items: center}.ob-step{ position: absolute; inset: 0; opacity: 0; transform: translateX(40px); pointer-events: none;
  transition: opacity .35s, transform .35s var(--e-spring); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px}.ob-step.active{ opacity: 1; transform: none; pointer-events: auto}.ob-emoji{ font-size: 4rem; margin-bottom: 6px}.ob-step h2{ margin: 0 0 4px}.ob-step p{ margin: 0 0 8px}.ob-foot{ display: flex; gap: 10px; margin-top: 10px}.ob-foot .btn{ flex: 1}/* 新版本提示条 */
.upbar{ position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 50%; transform: translateX(-50%);
  z-index: 90; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--surface-solid); border: 1px solid var(--line-2); border-radius: 999px; box-shadow: var(--sh-3);
  animation: ob-in .4s var(--e-spring); font-size: .86rem; max-width: 92vw}.upbar.hidden{ display: none}/* ---------------- 按课测试：范围选择器（v0.26） ---------------- */
.scope-card{ padding-bottom: 15px}.scope-grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; margin: 12px 0 8px}.scope-btn{
  padding: 9px 0; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2);
  font-size: 12.5px; font-variant-numeric: tabular-nums;
  transition: transform var(--t-fast) var(--e-spring), background var(--t-fast), color var(--t-fast)}.scope-btn.on{ background: var(--g-main); color: #fff; border-color: transparent; box-shadow: var(--sh-glow)}.quiz-scope{ margin: -2px 0 12px; font-size: 12px}html[data-fs="l"] .scope-btn, html[data-fs="xl"] .scope-btn{ font-size: 13.5px; padding: 11px 0}/* 课次详情的按钮排（原来没有样式，按钮挤在一起） */
.lesson-actions{ display: flex; flex-wrap: wrap; gap: 11px; margin: 16px 0 4px}.lesson-actions .btn{ flex: 1 1 auto; min-width: 146px}html[data-fs="xl"] .lesson-actions .btn{ flex: 1 1 100%}/* ---------------- 我的 / 记录：放宽间距（用户反馈「太紧凑、文字框贴在一起」） ---------------- */
#view-mine .card > .btn, #view-record .card > .btn{ margin: 5px 0 10px}.btn-row{ display: flex; flex-wrap: wrap; gap: 10px; margin: 13px 0 6px}.btn-row > .btn{ flex: 1 1 auto; min-width: 146px}#view-mine .card > .btn-row > .btn, #view-record .card > .btn-row > .btn{ margin: 0}#view-mine .card, #view-record .card{ padding: 19px 18px; margin-bottom: 17px}#view-mine .card h3:not(:first-child), #view-record .card h3:not(:first-child){
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line)}#view-mine .set-row{ padding: 14px 0; gap: 13px}#view-mine .picker{ gap: 11px; margin-bottom: 14px}#view-mine .pick{ padding: 12px 15px}#view-mine textarea{ margin: 11px 0 13px}#view-mine .about p{ margin: 9px 0}#view-mine .card > p.dim{ margin: 9px 0 12px}#view-mine .card > p.dim:last-child{ margin-bottom: 0}

/* ---------------- 无障碍 / 性能 ---------------- */
@media (prefers-reduced-motion: reduce) {*, *::before, *::after{
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important}#aurora{ animation: none}
}html[data-motion="off"] #aurora,
html[data-motion="off"] .btn.primary::after{ animation: none}html[data-motion="off"] .view.active > *{ animation: none}/* ================= 小窝（满屏像素世界 · 悬浮玻璃 UI） ================= */
#view-world.active{ padding: 0}.world-stage{ position: relative; width: 100%; height: 60vh; min-height: 320px; overflow: hidden; background: linear-gradient(#232a44, #141a30)}#view-world.active .world-stage{ overscroll-behavior: contain; position: fixed; left: 0; right: 0; top: 56px; bottom: 64px; z-index: 20; height: auto; min-height: 0; border-radius: 0}#world-cv{ margin-inline: auto; display: block; width: auto; height: 100%; max-width: 100%; image-rendering: pixelated; image-rendering: crisp-edges;
  background: #1c2238; touch-action: none; cursor: pointer; overscroll-behavior: contain}/* 顶部信息胶囊 */
.world-hud{ position: absolute; left: 10px; right: 10px; top: 10px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 4}.world-hud .chip{ background: rgba(255,255,255,.82); color: #2a2440;
  border: 1px solid rgba(255,255,255,.6); box-shadow: 0 3px 14px rgba(20,16,40,.28)}.world-grow{ position: absolute; left: 10px; right: 10px; top: 90px; z-index: 4; display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.6);
  border-radius: 999px; box-shadow: 0 3px 14px rgba(20,16,40,.25)}.world-grow i{ display: block; height: 6px; border-radius: 999px; background: linear-gradient(90deg, #ff7eb3, #a78bfa, #6fd3f7); width: 0; transition: width .4s; flex: 0 0 auto}.world-grow span{ font-size: 11.5px; color: #2a2440; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}.world-tip{ position: absolute; left: 12px; right: 12px; top: 122px; z-index: 4; font-size: 11.5px; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.8); pointer-events: none; line-height: 1.5}/* 底部控制条：横向可滑，不换行 */
.world-ctl{ position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 4; display: flex; gap: 6px;
  overflow-x: auto; overflow-y: hidden; padding: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch}.world-ctl::-webkit-scrollbar{ display: none}.world-ctl2{ bottom: 46px}.world-ctl3{ bottom: 84px}.world-ctl .btn{ flex: 0 0 auto; min-height: 0; border-radius: 999px;
  box-sizing: border-box; white-space: nowrap;
  background: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 3px 12px rgba(20,16,40,.24)}.world-ctl .btn.primary{ background: linear-gradient(135deg, #ff7eb3, #a78bfa); border-color: transparent; color: #fff}.world-ctl .chip{ flex: 0 0 auto; height: 32px; line-height: 30px; padding: 0 10px; box-sizing: border-box}.chip.soft{ color: #4b4570}/* 无障碍：设置里的开关点按区域太小（自动巡检发现 21px） */
#set-anim, #set-notify, #set-notify-sw{ width: 26px; height: 26px; min-width: 26px}input[type="checkbox"]{ min-width: 24px; min-height: 24px}#world-sfx{ bottom: 124px}/* 题干可点击重播（听力题不再只能听一遍） */
.quiz-q.can-replay{ cursor: pointer}.q-replay{ margin-top: 10px; font-size: 12.5px; color: var(--pink); opacity: .9}.q-replay::after{ content: ''}/* 语法：中国人易错点 / 单词：中日同形异义警告 */
.gd-row.gd-cn{ background: rgba(255, 214, 150, .22); border-radius: 10px; padding: 6px 8px; margin-top: 6px}.gd-row.gd-cn .gd-k{ color: #c2410c}.wr-warn{ font-size: 12px; color: #b45309; margin-top: 2px}html[data-theme="dark"] .wr-warn{ color: #fbbf24}/* 句型判断错题本 */
.jd-list{ display: flex; flex-direction: column; gap: 8px}.jd-row{ display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line, #e8e5ef); border-radius: 12px; background: #fff}.jd-main{ flex: 1; min-width: 0}.jd-wrong{ font-size: 14px; color: #c2434f; text-decoration: line-through; word-break: break-all}.jd-base{ font-size: 14px; color: #2f7a56; word-break: break-all}.jd-why{ font-size: 12px; margin-top: 2px; line-height: 1.5}.jd-act{ display: flex; gap: 4px; align-items: center}/* 句型判断 · 近 5 周正确率趋势 */
.jd-trend{ display: flex; align-items: flex-end; gap: 3px; height: 46px; margin: 4px 0 10px}.jd-trend i{ flex: 1; min-height: 3px; background: #d9d4e6; border-radius: 2px 2px 0 0}.jd-trend i.g{ background: linear-gradient(#8fd0ae, #5fb98a)}.jd-trend i.y{ background: linear-gradient(#f0d98a, #dcb95c)}.jd-trend i.r{ background: linear-gradient(#f0a3ac, #d9707c)}.jd-trend i.off{ background: #efedf5}.jd-day{ font-size: 12px; line-height: 1.6; margin-bottom: 8px; min-height: 16px}.jd-day-row{ border-top: 1px dashed var(--line, #eeeaf3); padding-top: 3px; margin-top: 3px}/* 句型判断 · 按类型正确率 */
.jd-cats{ display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px}.jd-cat{ font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #f1eef8; color: #5b5470}.jd-cat.g{ background: #e2f3e9; color: #2f7a56}.jd-cat.y{ background: #fbf3dc; color: #8a6f22}.jd-cat.r{ background: #fbe6e9; color: #b6455a}.jd-weak{ display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 4px 0 6px; color: #5b5470}.jd-weak b{ color: #b6455a}.jd-goal{ width: 100%; margin-top: 6px; font-size: 12px; color: #6b5f8a; background: #f6f3fc; border-radius: 10px; padding: 6px 9px}.jd-goal.done{ background: #e7f6ee; color: #2f7a56}.qa-body{ font-size: 13px; line-height: 1.7; color: #5b5470}.qa-body .qa-row{ display: flex; justify-content: space-between; gap: 8px; border-top: 1px dashed var(--line, #eeeaf3); padding-top: 4px; margin-top: 4px}.qa-body b.ok{ color: #2f7a56}.qa-body b.bad{ color: #b6455a}

/* 横屏精简：小高度横屏下优先把画面做大 */
@media (orientation: landscape) and (max-height: 560px) {.world-tip, #world-info, #world-grow{ display: none !important}.world-grow{ margin: 2px 10px; padding: 1px 10px; font-size: 12px}.world-hud{ gap: 5px; padding: 4px 8px}.world-hud .chip{ font-size: 11px; padding: 2px 8px}.world-ctl .btn{ height: 28px; line-height: 28px; padding: 0 10px; font-size: 13px}
}/* ================================================================
   杂志／书本主题（v0.67）：纸张底 + 书脊 + 页边 + 衬线排印 + 朱色
   —— 只改视觉，不动任何功能与 DOM 结构
   ================================================================ */
:root{
  --paper: #fbf8f1;
  --paper-2: #f4efe3;
  --paper-line: #e6ddc9;
  --rule: #ddd3bd;
  --serif: "Songti SC", "Source Han Serif SC", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, "STSong", serif;
  --vermilion: #b0453a;
  --vermilion-soft: #c8665a;
  --book-ink: #2b2620;
  --book-ink-2: #6d6355}/* 纸底 + 极细纸纹（纯 CSS，无任何图片） */
body{
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(0deg, rgba(120,100,70,.028) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120,100,70,.022) 0 1px, transparent 1px 4px),
    radial-gradient(120% 60% at 50% 0%, #fffdf8 0%, var(--paper) 45%, var(--paper-2) 100%);
  color: var(--book-ink)}#aurora, #fx{ opacity: .25}/* 保留特效层，但压淡以贴合纸感 */
#app{ position: relative}/* 书脊：屏幕左侧一道暗影 + 高光，制造"翻开的书" */
#app::before{
  content: ""; position: fixed; left: 0; top: 0; bottom: 0; width: 14px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, rgba(90,70,45,.16), rgba(90,70,45,.05) 55%, transparent);
  box-shadow: 1px 0 0 rgba(255,255,255,.6)}/* 页边：右侧微微卷边阴影 */
#app::after{
  content: ""; position: fixed; right: 0; top: 0; bottom: 0; width: 10px; z-index: 3; pointer-events: none;
  background: linear-gradient(270deg, rgba(90,70,45,.12), transparent)}/* 顶栏／底栏：像书页的页眉页脚 */
#topbar{
  background: linear-gradient(180deg, rgba(251,248,241,.98), rgba(251,248,241,.86));
  border-bottom: 1px solid var(--rule)}#tb-title, h1, h2, h3{
  font-family: var(--serif);
  letter-spacing: .04em;
  color: var(--book-ink)}.tab{ color: var(--book-ink-2)}.tab.active{ color: var(--vermilion)}/* 卡片＝书页上的栏目 */
.card{
  background: rgba(255,253,248,.86);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 6px 18px rgba(120,95,60,.07);
  position: relative}.card::before{                                       /* 栏目左侧朱色细线 */
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px;
  background: linear-gradient(180deg, var(--vermilion-soft), rgba(176,69,58,.15));
  border-radius: 2px}.dim{ color: var(--book-ink-2)}/* 按钮：印章／书签质感 */
.btn{ font-family: var(--serif); letter-spacing: .06em; border-radius: 4px}.chip{
  background: rgba(244,239,227,.9); border: 1px solid var(--rule); color: var(--book-ink-2);
  border-radius: 3px; font-family: var(--serif)}.chip.soft{ background: rgba(251,248,241,.75)}/* 统计数字用衬线，像书里的数字排版 */
.stat b, .num, b{ font-variant-numeric: tabular-nums}.stats .stat b, .kpi b{ font-family: var(--serif)}/* 列表项：细线分隔 + 序号感 */
.row, .list-item, .item, .line{ border-color: var(--paper-line) !important}li, .steps li{ border-color: var(--paper-line)}/* 段落首行缩进（正文感） */
.dim + .dim, .note{ line-height: 1.75}/* 页脚页码装饰：底栏上方一条细线与页码字样 */
#tabbar::before{
  content: "— 日 语 酱 · 学 习 手 帐 —";
  position: absolute; left: 0; right: 0; top: -18px; text-align: center;
  font-family: var(--serif); font-size: 9px; letter-spacing: .35em; color: rgba(109,99,85,.5)}/* 眼镜娘头像（内联 SVG，无外部图片） */

/* 我的页：眼镜开关行 */
.setting-row{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--paper-line)}.setting-row:last-child{ border-bottom: 0}.switch{ width: 46px; height: 26px; border-radius: 99px; background: var(--rule); position: relative; transition: background .2s; flex: none}.switch i{ position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .2s}.switch.on{ background: var(--vermilion)}.switch.on i{ left: 23px}/* —— 版式修补 —— */
#tabbar{ position: relative}/* 页脚小字要相对底栏定位 */
#tabbar::before{ top: -16px}#live2d-box{ position: absolute; inset: 0}/* 人物区铺满 hero 卡片 */
.stage, #live2d-box{ background: transparent}.stage{
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 8px 22px rgba(120,95,60,.08)}#live2d-box .live2d-tip{ font-family: var(--serif); color: var(--book-ink-2); letter-spacing: .1em}/* 人物卡里的三个数据块改成书页统计样式 */
.stage .chip, .stage .stat, .stage b{ font-family: var(--serif)}/* 内置眼镜娘：主页角色与选择器 */
.chara-drawn{ position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); display: none}.chara-drawn svg{ display: block; filter: drop-shadow(0 10px 18px rgba(90,70,45,.18))}#megane-picker{ display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px}#megane-picker .pick{
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px;
  background: rgba(255,253,248,.9); border: 1px solid var(--rule); border-radius: 4px;
  font-family: var(--serif); cursor: pointer}#megane-picker .pick.on{ border-color: var(--vermilion)}#megane-picker .pick svg{ display: block}#megane-picker .pick .pick-n{ font-size: 12px; color: var(--book-ink)}#megane-picker .pick .pick-t{ font-size: 9.5px; color: var(--book-ink-2); letter-spacing: .02em}#megane-picker .pick .live-tag{ font-size: 11px; color: var(--book-ink-2); padding: 16px 0; letter-spacing: .12em}/* 首页四宫格 / 快捷卡：改成书页纸卡 */
.tile, .quick, .nav-card, .grid-card, .home-tile{
  background: rgba(255,253,248,.9) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 4px !important;
  box-shadow: 0 6px 18px rgba(120,95,60,.07) !important}.tile h3, .quick h3, .nav-card h3, .grid-card h3, .home-tile h3{ font-family: var(--serif)}.tile .dim, .quick .dim, .nav-card .dim, .grid-card .dim, .home-tile .dim{ font-family: var(--serif); letter-spacing: .04em}/* 进度环 / 百分比文字用衬线 */
#home-ring, .ring-num, .pct{ font-family: var(--serif)}/* 顶部气泡：改成书页便笺 */
.bubble, .say-bubble, .live2d-bubble{
  background: rgba(255,253,248,.96) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 4px 4px 4px 2px !important;
  box-shadow: 0 6px 16px rgba(120,95,60,.10) !important;
  font-family: var(--serif) !important;
  color: var(--book-ink) !important}/* ================================================================
   吉卜力风主题（v0.74）：暖色 · 柔和 · 圆角 · 手绘感
   —— 覆盖此前的书本主题，整套 UI 统一
   ================================================================ */
:root{
  --g-sky1: #cfe8f0;  --g-sky2: #e6f2ea;  --g-cream: #f8efd8;  --g-cream2: #f2e4c4;
  --g-leaf: #7fb79a;  --g-leaf-d: #5c8f73;  --g-bark: #6b5740;  --g-ink: #46392a;
  --g-accent: #e8a978; --g-accent-d: #cf8b58;
  --paper: #fbf6ea; --paper-2: #f4ead2; --paper-line: rgba(107,87,64,.14);
  --rule: rgba(107,87,64,.16); --vermilion: #d98f68; --vermilion-soft: #e8b596;
  --book-ink: #46392a; --book-ink-2: #7b6a52}body{
  color: var(--g-ink) !important}body::before{ content: none !important}#app::before, #app::after{ display: none !important}/* 去掉书脊/页边 */
#topbar{
  background: linear-gradient(180deg, rgba(255,252,243,.94), rgba(255,252,243,.72)) !important;
  border-bottom: 1px solid var(--paper-line) !important;
  box-shadow: 0 2px 10px rgba(107,87,64,.05)}#tabbar{
  background: rgba(255,252,243,.95) !important;
  border-top: 1px solid var(--paper-line) !important}#tabbar::before{ content: none !important}/* 去掉页脚小字 */
.tab.active{ color: var(--g-leaf-d) !important}.card, .tile, .stage, .jd-row, .qa-body{
  background: rgba(255,253,246,.94) !important;
  border: 1px solid var(--paper-line) !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 26px rgba(107,87,64,.08), 0 1px 0 rgba(255,255,255,.7) inset !important}.card::before{ display: none !important}/* 去掉书页朱线 */
h1, h2, h3, #tb-title{ font-family: var(--serif) !important; color: var(--g-ink) !important}.btn{ border-radius: 999px !important; font-family: var(--serif) !important}.btn.primary{
  background: linear-gradient(180deg, #93c6a8, var(--g-leaf-d)) !important;
  border: 0 !important; color: #fbfdf9 !important;
  box-shadow: 0 5px 0 rgba(70,110,86,.45) !important}.btn.ghost{ background: rgba(255,253,246,.92) !important; border: 1px solid var(--paper-line) !important; color: var(--g-ink) !important}.chip, .chip.soft{
  background: rgba(255,255,255,.7) !important;
  border: 1px solid var(--paper-line) !important;
  border-radius: 999px !important; color: var(--g-bark) !important}.stage{
  border-radius: 26px !important}.bubble, .live2d-bubble{
  background: rgba(255,253,246,.96) !important;
  border: 1px solid var(--paper-line) !important;
  border-radius: 18px 18px 18px 6px !important;
  color: var(--g-ink) !important}.tile{ border-radius: 18px !important}.tile-ico{ filter: saturate(.92)}.ring-fg, #ring-fg{ stroke: var(--g-leaf) !important}.heat i, .heat span{ border-radius: 6px !important}.seg-btn.active{ background: var(--g-leaf) !important; color: #fff !important; border-radius: 999px !important}.seg-btn{ border-radius: 999px !important}/* —— 精简布局：只保留关键区块（隐藏，不删除，功能照旧）—— */
#view-home .grid2,                 /* 首页四宫格快捷入口（课程/聴解/演習/音読） */
#view-home #daily-tasks,           /* 每日の課題 */
#view-home .pomo-card,             /* 番茄钟 */
#view-home .card:has(.daily-tip),  /* 学習の栞 */
#view-record .card:has(#btn-report),   /* 学習週報 */
#view-record .grid2,               /* 誤答本 / 栞 入口 */
#view-record .card:has(.rec-streak),   /* 堅持 */
/* 已放行：#view-record .card:has(.heat) —— 它内含「生成周报卡片」按钮，误藏会让人找不到周报 */     /* 热力图（保留统计数据即可） */
#card-qa,                          /* 我的：品質検査 */
#card-install                      /* 我的：装到主屏 */{ display: none !important}/* 精简后首页更聚焦：課題卡片稍大一点 */
#view-home .task-card{ padding: 18px !important}#view-home .task-head{ gap: 14px !important}/* 统一强调色：把所有紫红/粉紫渐变改成暖绿奶油配色 */
.big-speak, #btn-play, .btn.primary, .cta, .quiz-cta{
  background: linear-gradient(180deg, #9ccfae, var(--g-leaf-d)) !important;
  color: #fbfdf9 !important; border: 0 !important;
  box-shadow: 0 6px 16px rgba(92,143,115,.28) !important}.ring-fg, #ring-fg, .heat .on, .heat i.on{ stroke: var(--g-leaf) !important; background: var(--g-leaf) !important}.tab.active, .tab.active em{ color: var(--g-leaf-d) !important}.tb-ver, .chip.soft{ background: rgba(255,255,255,.7) !important; color: var(--g-bark) !important}.opt, .option, .choices button, #quiz-options .opt{
  background: rgba(255,253,246,.96) !important;
  border: 1px solid var(--paper-line) !important; border-radius: 16px !important}.opt.on, .option.on, #quiz-options .opt.on{ border-color: var(--g-leaf) !important; box-shadow: 0 0 0 2px rgba(127,183,154,.35) inset !important}.progress i, .bar i{ background: linear-gradient(90deg, #a8d8bb, var(--g-leaf)) !important}/* ============ 对标主流 App：细节收紧（v0.76） ============ */
#tabbar{ height: 60px !important; padding-bottom: env(safe-area-inset-bottom)}#tabbar .tab{ gap: 3px}#tabbar .tab span{ display: flex; align-items: center; justify-content: center}#tabbar .tab em{ letter-spacing: .02em}#tabbar .tab.active::after{
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 22px}#tabbar .tab{ position: relative}/* 头部：只留标题 + 2 个圆形动作按钮 */
#topbar{ padding: 10px 16px 8px !important}.tb-title{ letter-spacing: .02em}#topbar .icon-btn, #topbar .char-btn{
  width: 38px; height: 38px; border-radius: 50% !important;
  background: rgba(255,253,246,.92) !important; border: 1px solid var(--paper-line) !important;
  box-shadow: 0 4px 12px rgba(107,87,64,.07) !important;
  display: flex; align-items: center; justify-content: center}#btn-zoom svg{ width: 21px; height: 21px; color: var(--g-bark)}/* 卡片间距与层级统一：16px 外边距、20px 圆角、二级卡片更浅 */
.card{ margin: 12px 16px !important; padding: 16px !important; border-radius: 20px !important}.card .card{ margin: 0 !important; box-shadow: none !important; background: rgba(255,255,255,.55) !important}h3{ margin-bottom: 8px; letter-spacing: .01em}.stat b, .fs-chip b{ font-family: var(--serif)}.fs-chip{ border-radius: 999px !important; padding: 5px 10px !important; font-size: 11px !important}/* 主按钮：更接近主流 App 的饱满感（48px 高 / 唯一强调） */
.btn.primary, .big-speak{ min-height: 48px; border-radius: 16px !important; font-size: 15px !important}.task-actions .btn{ flex: 1}/* ============ 角色切换 UI 精简（v0.77） ============ */
/* 隐藏：皮肤色块、导入文件、版权说明、添加角色按钮 */
#skin-picker, #char-file, .picker + p.dim{ display: none !important}#card-install{ display: none !important}#char-picker{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)) !important;
  gap: 8px !important;
  max-height: 340px;
  overflow-y: auto;
  padding: 4px !important;
  background: transparent !important;
  border: 0 !important}#char-picker > *{
  display: flex !important; flex-direction: column; align-items: center; gap: 4px;
  background: rgba(255,253,246,.9) !important;
  border: 1px solid var(--paper-line) !important;
  box-shadow: none !important;
  font-size: 10.5px !important; line-height: 1.25 !important;
  text-align: center; cursor: pointer;
  transition: transform .12s, border-color .12s, box-shadow .12s}#char-picker > *.active, #char-picker > *[aria-selected="true"]{
  border-color: var(--g-leaf-d) !important;
  box-shadow: 0 0 0 2px rgba(92,143,115,.28) !important}#char-picker img, #char-picker canvas, #char-picker svg{ object-fit: contain; background: linear-gradient(180deg,#e9f4f6,#f7f1de)}#char-picker .char-name, #char-picker b{ color: var(--g-ink)}/* 标题行更紧凑 */
.card h3 + .picker{ margin-top: 6px}/* ============ 关键修复：底部导航栏固定定位（此前被挤到视口外，手机上完全看不见） ============ */
#tabbar{
  position: fixed !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  top: auto !important;
  z-index: 60 !important;
  display: flex !important;
  height: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  background: rgba(255,252,243,.97) !important;
  border-top: 1px solid rgba(107,87,64,.14) !important}#tabbar .tab{ flex: 1 1 0 !important}/* 内容给导航栏留出空间，避免最后一张卡片被挡 */
#main, .main, #app{ padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px))}#view-home, #view-course, #view-listen, #view-quiz, #view-record, #view-mine{
  padding-bottom: 8px}

/* ============ 大屏 iPhone 适配（14 Pro Max 430×932 / 18 Pro Max 440×956 等） ============ */
@media (min-width: 420px) and (min-height: 880px) {.card{ margin: 12px 18px !important; padding: 18px !important}.tb-title{ font-size: 23px !important}.stage{ min-height: 360px}.btn.primary, .big-speak{ min-height: 52px; font-size: 16px !important}
}
/* 刘海/灵动岛：顶部也留出安全区 */
@supports (padding: env(safe-area-inset-top)) {#topbar{ padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important}
}/* ============ UI 精修（v0.79） ============ */
/* ① 人物区块：去掉浮在角色上的三个胶囊（連続/習得済/復習待ち） */
.float-stats{ display: none !important}/* 人物区块更干净：底部留白多一点，角色居中 */
.stage{ padding-bottom: 10px}/* ② 换装按钮：磨砂玻璃 + 线性图标 + 文字，替代原来的 👗 emoji */
.char-btn, #btn-char{
  position: absolute !important; right: 14px !important; bottom: 14px !important;
  width: auto !important; height: 40px !important; min-width: 40px;
  padding: 0 14px !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px;
  background: rgba(255,253,246,.82) !important;
  border: 1px solid rgba(107,87,64,.16) !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 18px rgba(107,87,64,.12), 0 1px 0 rgba(255,255,255,.8) inset !important;
  font-family: var(--serif) !important; font-size: 12.5px !important; color: var(--g-bark) !important;
  letter-spacing: .08em;
  transition: transform .14s ease, box-shadow .14s ease}.char-btn svg, #btn-char svg{ width: 17px; height: 17px}/* ③ 顶部动作按钮统一线性图标风格 */
#topbar .icon-btn, #topbar .char-btn, #btn-zoom, #btn-theme, #btn-streak{
  width: 40px !important; height: 40px !important; border-radius: 999px !important;
  background: rgba(255,253,246,.9) !important;
  border: 1px solid rgba(107,87,64,.14) !important;
  box-shadow: 0 4px 14px rgba(107,87,64,.08) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 0 !important;                     /* 隐藏原始 emoji 文字 */
  color: var(--g-bark) !important}#topbar .icon-btn svg, #btn-zoom svg, #btn-theme svg, #btn-streak svg{ width: 20px; height: 20px}/* ④ 角色切换 UI：文字体系统一、不截断、缩略图更规整 */
#char-picker{ grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)) !important; gap: 10px !important}#char-picker > *{
  min-height: 104px;
  padding: 10px 6px !important;
  border-radius: 16px !important;
  font-family: var(--serif) !important}#char-picker b, #char-picker .char-name{
  font-size: 11.5px !important; color: var(--g-ink) !important;
  line-height: 1.3 !important;
  white-space: normal !important; overflow-wrap: anywhere; word-break: break-word;
  max-height: 2.7em; overflow: hidden}#char-picker span, #char-picker small{ font-size: 9.5px !important; color: var(--book-ink-2) !important; letter-spacing: 0}#char-picker img, #char-picker canvas, #char-picker svg{ width: 58px !important; height: 58px !important; border-radius: 12px}/* 卡片标题与次级说明统一字号 */
.card h3{ font-size: 15.5px !important; letter-spacing: .02em}.set-row{ font-size: 13.5px !important; color: var(--g-ink) !important}.chip{ font-size: 11px !important}/* ============ v0.80：播放按钮简约化 / 记录页间距 / 切换更快 ============ */
/* 播放：去掉大绿色方块，改成圆形磨砂 + 线性喇叭图标 */
.big-speak, #btn-play{
  width: 76px !important; height: 76px !important; min-height: 76px !important;
  border-radius: 50% !important; padding: 0 !important;
  background: rgba(255,253,246,.95) !important;
  border: 1px solid rgba(107,87,64,.16) !important;
  box-shadow: 0 8px 22px rgba(107,87,64,.14), 0 1px 0 rgba(255,255,255,.8) inset !important;
  color: var(--g-leaf-d) !important;
  font-size: 0 !important;                      /* 隐藏文字，只留图标 */
  display: flex !important; align-items: center !important; justify-content: center !important}.big-speak::before, #btn-play::before{
  content: ""; display: block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 9.5h3.2L12 5.2v13.6L7.2 14.5H4z'/><path fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' d='M15.5 9.2a4.2 4.2 0 0 1 0 5.6M18 6.8a7.6 7.6 0 0 1 0 10.4'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 9.5h3.2L12 5.2v13.6L7.2 14.5H4z'/><path fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' d='M15.5 9.2a4.2 4.2 0 0 1 0 5.6M18 6.8a7.6 7.6 0 0 1 0 10.4'/></svg>") center/contain no-repeat}/* 记录页：正确率胶囊与「重练错句」区块拉开距离、重做样式 */
#jd-card{ margin-top: 16px !important}#jd-card .row-between{ padding-bottom: 12px; border-bottom: 1px solid var(--paper-line); margin-bottom: 12px}#jd-card .jd-weak, #jd-card .jd-cats{ margin-top: 10px; padding-top: 10px}#jd-card .jd-weak:empty, #jd-card .jd-cats:empty{ display: none}#view-record .chip, #view-record .chip.soft{ margin-bottom: 6px}/* 记录页「错题重练」按钮做成描边小胶囊 */
#jd-card .btn.primary.small, #jd-retry{
  border-radius: 999px !important; padding: 7px 16px !important;
  font-size: 12.5px !important; box-shadow: 0 3px 0 rgba(70,110,86,.35) !important}/* 顶部/分段切换指示条：过渡更快更利落 */
.seg-btn, .tab, .tab em, .seg-btn.active{ transition-duration: .14s !important}.seg-btn.active{ transition: background .14s ease, color .14s ease !important}#tabbar .tab.active::after{ transition: none !important}/* 练习页：听力与题型合并为一个入口的分段（保留分段但更紧凑） */
#practice-seg{ margin: 10px 16px 6px !important}/* ============ Y2K 主题（v0.81）：粉→青渐变胶囊，替换原来的绿色区块 ============ */
:root{
  --y2k-a: #f472b6;      /* 粉 */
  --y2k-b: #818cf8;      /* 紫蓝 */
  --y2k-c: #22d3ee;      /* 青 */
  --y2k-ink: #2c2340}/* 主按钮 / 播放按钮 / CTA：渐变胶囊 + 柔光 */
.btn.primary, .big-speak, #btn-play, .cta, .quiz-cta, .btn.primary.small{
  background: linear-gradient(100deg, var(--y2k-a) 0%, var(--y2k-b) 55%, var(--y2k-c) 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 22px rgba(244,114,182,.30), 0 1px 0 rgba(255,255,255,.55) inset !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.08);
  letter-spacing: .04em}/* 次级按钮：白底 + 渐变描边 */
.btn.ghost, .btn.ghost.small{
  background: rgba(255,255,255,.9) !important;
  border: 1.5px solid transparent !important;
  background-image: linear-gradient(#fff,#fff), linear-gradient(100deg,var(--y2k-a),var(--y2k-c)) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  border-radius: 999px !important;
  color: var(--y2k-ink) !important}/* 播放按钮：圆形渐变环 + 白色内芯（简约） */
.big-speak, #btn-play{
  width: 78px !important; height: 78px !important; min-height: 78px !important;
  background: linear-gradient(100deg, var(--y2k-a), var(--y2k-c)) !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(129,140,248,.28) !important}.big-speak::before, #btn-play::before{ width: 32px; height: 32px}/* 分段切换选中态：迷你渐变胶囊 */
.seg-btn.active{ background: linear-gradient(100deg, var(--y2k-a), var(--y2k-c)) !important; color: #fff !important; border-radius: 999px !important}/* tab 选中：渐变文字 + 渐变指示条 */
.tab.active em{ background: linear-gradient(100deg, var(--y2k-a), var(--y2k-c)); -webkit-background-clip: text; background-clip: text; color: transparent !important}/* 卡片与舞台：柔和粉青渐变，贴合 Y2K */
.stage{
  background: linear-gradient(165deg, #ffe6f3 0%, #f5f7ff 46%, #e0f8fb 100%) !important}.card, .tile{ background: linear-gradient(180deg, rgba(255,253,255,.97), rgba(246,252,255,.92)) !important}/* 进度环与图表用渐变主色 */
.ring-fg, #ring-fg{ stroke: url(#y2kGrad) var(--y2k-b) !important}/* 尺寸：主按钮统一 50px 高、字号 15px，避免过大 */
.btn.primary, .cta, .quiz-cta{ min-height: 50px !important; font-size: 15px !important; padding: 0 22px !important}.btn.ghost{ min-height: 50px !important; font-size: 14.5px !important}/* ================================================================
   v0.83-UI 重设计（基于你确认的基线）
   ================================================================ */
/* 台词条：移到模型区块外，绝不遮挡人物 */
#view-home .bubble, .stage .bubble{ display: none !important}#home-say{
  margin: 10px 16px 0;
  padding: 11px 14px;
  border: 1px solid rgba(107,87,64,.14);
  box-shadow: 0 4px 14px rgba(107,87,64,.07);
  font-size: 13.5px; line-height: 1.5; color: var(--g-ink)}/* 顶部动作按钮：统一线性风格 */
#topbar .icon-btn, #btn-search, #btn-skin{
  width: 40px !important; height: 40px !important; border-radius: 999px !important;
  background: rgba(255,253,246,.92) !important;
  border: 1px solid rgba(107,87,64,.14) !important;
  box-shadow: 0 4px 14px rgba(107,87,64,.08) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 0 !important; color: var(--g-bark)}#topbar .icon-btn svg{ width: 20px; height: 20px}#btn-streak{ width: auto !important; padding: 0 12px !important; gap: 5px; font-size: 12.5px !important}#btn-streak svg{ width: 15px; height: 15px}/* 底部 tab：线性图标 + 渐变选中 */
#tabbar{ height: 62px !important}#tabbar .tab span svg{ width: 23px; height: 23px; display: block}#tabbar .tab em{ font-size: 10.5px}/* 卡片：统一 20 圆角 / 柔和阴影 / 一致间距 */
.card{ border-radius: 20px !important; margin: 12px 16px !important; padding: 16px !important;
  background: linear-gradient(180deg, rgba(255,253,255,.97), rgba(246,252,255,.93)) !important;
  border: 1px solid rgba(107,87,64,.13) !important;
  box-shadow: 0 8px 22px rgba(107,87,64,.07) !important}/* 角色区块：更聚焦 */
.stage{ border-radius: 24px !important; min-height: 42vh}/* ============ v0.83-ui2：降低区块配色艳丽度 ============ */
.card, .tile{
  background: rgba(255,253,249,.96) !important;
  border: 1px solid rgba(107,87,64,.12) !important;
  box-shadow: 0 6px 18px rgba(107,87,64,.06) !important}body{ background: linear-gradient(180deg,#f7eef4 0%, #f5f4fb 45%, #eef7fa 100%) fixed !important}.stage{ background: linear-gradient(165deg,#fbeef4 0%, #f4f6fd 48%, #e9f6f9 100%) !important}.btn.primary, .cta, .quiz-cta{
  background: linear-gradient(100deg,#e79cc4 0%, #a9a6e6 55%, #8fd3e8 100%) !important;
  box-shadow: 0 6px 16px rgba(180,140,190,.24) !important}#tabbar .tab.active em{ background: linear-gradient(100deg,#d98cb8,#7fc6dd); -webkit-background-clip: text; background-clip: text; color: transparent}#tabbar .tab.active::after{ background: linear-gradient(90deg,#e2a4c6,#96cfe4) !important}.big-speak, #btn-play{ background: linear-gradient(100deg,#e6a8c8,#9fd6e6) !important; box-shadow: 0 8px 20px rgba(180,150,190,.22) !important}#home-say{ background: rgba(255,253,249,.9) !important}/* ============ v0.83-ui3：中文字形优先（修「汉字显示成日文/繁体字形」） ============ */
html{ -webkit-text-size-adjust: 100%}html, body, button, input, select, textarea, h1, h2, h3, h4, p, span, em, b, div, li, td, th{
  font-family: "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Songti SC",
               "Microsoft YaHei", "Noto Sans SC", -apple-system, BlinkMacSystemFont,
               "Helvetica Neue", Arial, sans-serif !important;
  font-language-override: "ZHS";
  font-variant-east-asian: normal;
  font-feature-settings: "locl" 0}/* ============ v0.83-ui4：统一字重/字号规范（修「粗细不一样」） ============ */
:root{
  --fw-body: 400;   /* 正文、说明 */
  --fw-mid: 500;    /* 按钮、tab、标签 */
  --fw-strong: 600; /* 标题、数值、强调 */
}html, body{
  font-synthesis-weight: none;
  
  
  text-rendering: optimizeLegibility}/* 禁止浏览器伪粗体（这是"同一层级看起来粗细不同"的主因） */
*{ font-synthesis: none; font-synthesis-weight: none}/* 字号阶梯统一（避免同级文字大小不一） */
body{ font-size: 14px !important; line-height: 1.55}p, li{ font-size: 13.5px !important}small, .hint, .dim, .sub{ font-size: 11.5px !important}h3{ font-size: 15px !important}button, .btn{ font-size: 14px !important}.tab em{ font-size: 10.5px !important}.chip, .tag{ font-size: 11px !important}/* 按钮字号与规范对齐（消除 15px/14px 混用） */
.btn.primary, .cta, .quiz-cta, .btn.ghost, .btn{ font-size: 14px !important}/* 备份守护条 / 诊断卡 */
#backup-guard{ border-radius: 16px !important; padding: 13px 14px !important}#backup-guard .btn.primary{ min-height: 40px !important; font-size: 13.5px !important}#diag-card pre{ font-family: ui-monospace, Menlo, Consolas, monospace}/* ===== theme-v2.css ===== */
/* ================================================================
   设计系统 v2（独立样式层，不修改既有规则，只做统一与增强）
   ① 一种卡片 + 三种变体   ② 内高光 + 阴影分级   ③ 统一 22px 圆角
   ④ 间距阶梯化            ⑤ tab 胶囊选中态      ⑥ 按压反馈
   ⑦ 等宽数字              ⑧ 深色模式变量
   ================================================================ */
:root{
  /* 圆角与间距阶梯 */
  --r-card: 22px;
  --r-pill: 999px;
  --r-inner: 14px;
  --sp-card-x: 16px;     /* 卡片内边距 */
  --sp-card-y: 12px;     /* 卡片之间 */
  --sp-title: 6px;       /* 标题与内容之间 */
  /* 阴影分两级 */
  --sh-1: 0 2px 8px rgba(107,87,64,.06);                       /* 贴页面 */
  --sh-2: 0 10px 26px rgba(107,87,64,.12);                     /* 浮层 */
  --hl: inset 0 1px 0 rgba(255,255,255,.72);                   /* 顶部内高光 */
  /* 语义色 */
  --c-normal-bg: rgba(255,253,249,.97);
  --c-normal-line: rgba(107,87,64,.12);
  --c-accent-a: #e79cc4;
  --c-accent-b: #a9a6e6;
  --c-accent-c: #8fd3e8;
  --c-alert-bg: rgba(255,242,240,.97);
  --c-alert-line: rgba(206,94,88,.34);
  --c-alert-ink: #b3453f;
  --c-ok-ink: #4a6b4f}
/* 深色模式：单独一套变量（修"深色下发脏"） */
@media (prefers-color-scheme: dark) {html[data-theme="auto"]{
    --c-normal-bg: rgba(38,34,32,.92);
    --c-normal-line: rgba(255,255,255,.10);
    --c-alert-bg: rgba(64,32,30,.9);
    --c-alert-line: rgba(255,140,130,.32);
    --sh-1: 0 2px 8px rgba(0,0,0,.28);
    --sh-2: 0 10px 26px rgba(0,0,0,.38);
    --hl: inset 0 1px 0 rgba(255,255,255,.06)}
}html[data-theme="dark"], html.dark, body.dark{
  --c-normal-bg: rgba(38,34,32,.92);
  --c-normal-line: rgba(255,255,255,.10);
  --c-alert-bg: rgba(64,32,30,.9);
  --c-alert-line: rgba(255,140,130,.32);
  --sh-1: 0 2px 8px rgba(0,0,0,.28);
  --sh-2: 0 10px 26px rgba(0,0,0,.38);
  --hl: inset 0 1px 0 rgba(255,255,255,.06)}html[data-theme="dark"] body, html.dark body, body.dark{
  background: linear-gradient(180deg,#211d1c 0%, #1d1c22 45%, #1a2226 100%) fixed !important;
  color: #ece7e2}html[data-theme="dark"] .card, html.dark .card, body.dark .card,
html[data-theme="dark"] .tile, html.dark .tile, body.dark .tile{
  background: var(--c-normal-bg) !important;
  border-color: var(--c-normal-line) !important;
  color: #ece7e2}html[data-theme="dark"] .dim, html[data-theme="dark"] small, html.dark .dim, html.dark small{ color: #b6aea6 !important}/* ① 一种卡片 + 三种变体 ------------------------------------------------ */
.card, .tile{
  border-radius: var(--r-card) !important;
  margin: var(--sp-card-y) var(--sp-card-x) !important;
  padding: var(--sp-card-x) !important;
  background: var(--c-normal-bg) !important;
  border: 1px solid var(--c-normal-line) !important;
  box-shadow: var(--sh-1), var(--hl) !important}/* 强调变体：加一点点渐变与更深阴影 */
.card.accent, .card.is-accent{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,247,255,.95)) !important;
  box-shadow: var(--sh-2), var(--hl) !important}/* 警示变体 */
.card.alert, .card.is-alert, #backup-guard{
  background: var(--c-alert-bg) !important;
  border-color: var(--c-alert-line) !important;
  box-shadow: var(--sh-1), var(--hl) !important}/* 浮层（抽屉/弹窗）用二级阴影 */
.sheet, .modal, .drawer, .popover{ box-shadow: var(--sh-2) !important; border-radius: var(--r-card) var(--r-card) 0 0 !important}/* ③ 圆角统一（人物区块也 22px） */
.stage, #view-home .stage{ border-radius: var(--r-card) !important}#home-say{ border-radius: var(--r-inner) !important}button, .btn, .chip, .seg-btn{ border-radius: var(--r-pill)}/* ④ 间距阶梯：标题下方固定 6px，段落间距 8px */
.card > h3, .card h3{ margin: 0 0 var(--sp-title) !important}.card p{ margin: 0 0 8px !important}.card p:last-child{ margin-bottom: 0 !important}/* ⑤ tab 选中态：浅渐变胶囊底 */
#tabbar .tab{ position: relative; border-radius: var(--r-pill); transition: background .18s ease, transform .12s ease}#tabbar .tab.active{
  background: linear-gradient(180deg, rgba(231,156,196,.16), rgba(143,211,232,.16)) !important}#tabbar .tab.active::after{ height: 3px !important; border-radius: 3px}button, .btn, .card, .tile, .cs-card{ transition: transform .12s ease, box-shadow .18s ease, background .18s ease}/* ⑦ 等宽数字（防止数字跳动） */
.num, .val, .stat-num, .pct, #streak-num, .ring-label, .metric, .big-num{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1}/* ⑨ 人物区块角标进度环 */
#stage-ring{
  position: absolute; right: 14px; top: 14px; z-index: 5;
  width: 52px; height: 52px; pointer-events: none;
  display: flex; align-items: center; justify-content: center}#stage-ring svg{ position: absolute; inset: 0; transform: rotate(-90deg)}#stage-ring .rg-bg{ stroke: rgba(107,87,64,.13)}#stage-ring .rg-fg{ stroke: url(#ringGradV2); stroke-linecap: round; transition: stroke-dashoffset .6s ease}#stage-ring b{ font-size: 12px; color: var(--g-ink); font-variant-numeric: tabular-nums}html[data-theme="dark"] #stage-ring b{ color: #ece7e2}/* ⑩ 换装按钮：半透明悬浮 */
#btn-char, .char-btn{
  background: rgba(255,255,255,.42) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: var(--sh-1) !important}/* ⑪ 模型加载骨架屏 */
#stage-skeleton{
  position: absolute; inset: 0; z-index: 4; display: none;
  align-items: center; justify-content: center;
  background: linear-gradient(100deg, rgba(255,255,255,.35) 25%, rgba(255,255,255,.62) 37%, rgba(255,255,255,.35) 63%);
  background-size: 400% 100%;
  animation: sk 1.2s ease-in-out infinite}#stage-skeleton.on{ display: flex}#stage-skeleton i{
  width: 120px; height: 12px; border-radius: 6px; display: block;
  background: rgba(107,87,64,.12)}
@keyframes sk {0%{ background-position: 100% 0 }100%{ background-position: 0 0 } }/* ⑭ 设置页角色区折叠 */
#char-picker.collapsed{ max-height: 148px !important; overflow: hidden !important; position: relative}#char-picker.collapsed::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  background: linear-gradient(180deg, rgba(255,253,249,0), var(--c-normal-bg))}#picker-toggle{
  margin: 8px 16px 0; width: calc(100% - 32px);
  padding: 10px; border-radius: var(--r-pill); font-size: 13px;
  border: 1px solid var(--c-normal-line); background: var(--c-normal-bg); color: var(--g-ink)}html[data-theme="dark"] #picker-toggle{ color: #ece7e2}/* ⑫ 空状态 */
.empty-state{ text-align: center; padding: 22px 12px}.empty-state .em-ico{ font-size: 30px}.empty-state .em-t{ font-size: 14px; margin: 6px 0 4px}.empty-state .em-d{ font-size: 12px; color: var(--book-ink-2); margin-bottom: 12px}/* ---- 修正：提高优先级压住旧规则的圆角/字号，并全局启用等宽数字 ---- */
html body .card, html body .tile, html body #view-home .card, html body #view-mine .card,
html body #view-record .card, html body #view-course .card, html body #view-listen .card{
  border-radius: 22px !important}html body .card, html body .tile{ box-shadow: var(--sh-1), var(--hl) !important}html body{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1}html body .num, html body .val, html body b, html body strong, html body .stat-num, html body .pct{
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1}/* ---- 修「点击人物区块页面跳动」 ----
   根因：台词文字变化导致 1~2 行高度差，把下方人物区块顶动。
   做法：台词条固定最小高度并垂直居中；人物区块尺寸锁定。 */
#home-say{
  min-height: 46px !important;
  max-height: 46px !important;
  display: flex !important; align-items: center !important;
  overflow: hidden !important;
  padding: 0 14px !important;
  transition: none !important}#home-say > *{ margin: 0 !important}#view-home .bubble{ min-height: 46px !important; max-height: 46px !important; overflow: hidden !important}.stage, #view-home .stage{
  height: 44vh !important;
  min-height: 44vh !important;
  max-height: 44vh !important;
  contain: layout paint}#stage-skeleton{ pointer-events: none}/* ---- 修「底部导航图标出框」 ----
   根因：选中胶囊比导航栏还高、往上溢出；指示条也伸在栏外。
   做法：栏内边距固定 + 每个 tab 限制在栏高内，胶囊改成栏内小圆角块，去掉伸出的小横线。 */
html body #tabbar{
  height: 64px !important;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: stretch !important;
  overflow: hidden !important}html body #tabbar .tab{
  box-sizing: border-box !important;
  border-radius: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important}html body #tabbar .tab span{ display: flex !important; align-items: center !important; justify-content: center !important}html body #tabbar .tab.active{
  background: linear-gradient(180deg, rgba(231,156,196,.20), rgba(143,211,232,.20)) !important}html body #tabbar .tab.active::after{ display: none !important}/* ---- 修「底部导航被切掉」（上一版我把安全区算漏了） ----
   正解：栏高 = 内容(56px) + 安全区；底部内边距同时加安全区。 */
html body #tabbar{
  height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  min-height: 0 !important;
  padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
  overflow: visible !important}html body #tabbar .tab{
  height: 48px !important;
  max-height: 48px !important;
  min-height: 48px !important;
  padding: 4px 4px 3px !important;
  overflow: visible !important}html body #tabbar .tab span{ height: 22px !important}html body #tabbar .tab span svg{ width: 21px !important; height: 21px !important}html body #tabbar .tab em{ font-size: 10px !important; line-height: 1 !important; margin-top: 3px !important}/* ================================================================
   字重终极修正（放在最后，覆盖之前所有相关规则）
   根因：① 我全局加了 -webkit-font-smoothing: antialiased → 文字被"变细"且各元素程度不同
        ② 500（Medium）在 iOS 上字面映射不稳定 → 同一层级渲染粗细不一
   方案：只用 400 / 600 两档（PingFang SC 都有真实字面），并移除 antialiased。
   ================================================================ */
html body, html body *{
  -webkit-font-smoothing: auto !important;
  -moz-osx-font-smoothing: auto !important;
  font-synthesis: none !important;          /* 禁伪粗体 */
  font-synthesis-weight: none !important}/* ================================================================
   强调色统一：所有"选中/激活"的填充都用与「开始学习」相同的渐变
   （原来练习页的模式切换、部分选中态是高饱和的粉/青，显得艳丽）
   ================================================================ */
:root{
  --accent-fill: linear-gradient(100deg, #e79cc4 0%, #a9a6e6 55%, #8fd3e8 100%);
  --accent-fill-soft: linear-gradient(100deg, rgba(231,156,196,.22) 0%, rgba(169,166,230,.22) 55%, rgba(143,211,232,.22) 100%)}/* 分段切换的选中态（练习页「听力训练 / 题型练习」等） */
html body .seg-btn.active,
html body #view-listen .seg-btn.active,
html body .seg button.active,
html body .tabs .tab.active,
html body .mode-btn.active,
html body .chip.on,
html body .chip.active{
  background: var(--accent-fill) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px rgba(180,140,190,.26) !important}/* 次级/未选中：淡渐变，不再纯白刺眼 */
html body .seg-btn, html body #view-listen .seg-btn, html body .seg button{
  background: rgba(255,253,249,.9) !important;
  border: 1px solid var(--c-normal-line) !important;
  color: var(--tx-1) !important}/* 任何"高饱和蓝/绿"的遗留填充统一压到同一条渐变（含内联样式） */
html body [style*="#6fb7f0"], html body [style*="#86cdf7"], html body [style*="#26356b"],
html body [style*="#3f5ec2"], html body [style*="rgb(111, 183, 240)"]{
  background: var(--accent-fill) !important}/* 进度条、环、强调线也统一 */
html body #quiz-progress i, html body #rec-week .bar i, html body #stage-ring .rg-fg{
  stroke: none}html body #quiz-progress i, html body #rec-week .bar i{
  background: var(--accent-fill) !important}/* 选中/激活的通用软底（tab、列表项） */
html body #tabbar .tab.active{ background: var(--accent-fill-soft) !important}/* 统一线性图标（替换 emoji） */
.lic{ display: inline-flex; align-items: center; justify-content: center;
  width: 1.15em; height: 1.15em; margin-right: .32em; vertical-align: -0.18em}.lic svg{ width: 100%; height: 100%}/* ===== practice-v3.css ===== */
/* ================================================================
   练习页改版 + 文字颜色统一（独立样式层）
   · 修「看起来字重不一致」：真正原因是次要文字淡化程度五花八门
   · 练习页：选项行紧凑化、播放按钮改胶囊、进度条替代圆点
   ================================================================ */
/* ---------- ① 文字颜色统一（这才是"粗细不一致"的真因） ---------- */
:root{
  --tx-1: #3f3730;                 /* 主文字 */
  --tx-2: #6f6659;                 /* 次要文字（统一一个值） */
  --tx-3: #948a7c;                 /* 最弱（仅用于极次要提示） */
}html body, html body p, html body span, html body div, html body li, html body b, html body strong{
  color: var(--tx-1)}html body .dim, html body small, html body .sub, html body .hint, html body .tb-sub,
html body .desc, html body .muted, html body [class*="subtitle"]{
  color: var(--tx-2) !important;
  opacity: 1 !important;            /* 干掉五花八门的 opacity 淡化 */
}html body [style*="opacity: .5"], html body [style*="opacity:.5"],
html body [style*="opacity: 0.5"], html body [style*="opacity:0.5"]{
  opacity: 1 !important; color: var(--tx-2) !important}html body .card h3 + p, html body .card > p:first-of-type{ color: var(--tx-2) !important}
/* 深色模式下的同一套层级 */
@media (prefers-color-scheme: dark) {html[data-theme="auto"] body{ --tx-1: #ece7e2; --tx-2: #b6aea6; --tx-3: #8d857d}
}html[data-theme="dark"] body, html.dark body{ --tx-1: #ece7e2; --tx-2: #b6aea6; --tx-3: #8d857d}/* ---------- ② 练习页：更方便学习的布局 ---------- */
/* 顶部两个模式按钮：更紧凑的等宽分段 */
html body #view-listen .seg-btn, html body #view-listen .seg button{
  min-height: 44px !important;
  border-radius: 999px !important;
  font-size: 13.5px !important}/* 播放按钮：改成胶囊（原来圆形里文字被挤成两行） */
html body .big-speak, html body #btn-play{
  width: auto !important; min-width: 132px !important; height: 54px !important; min-height: 54px !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 9px !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  background: linear-gradient(100deg, #e79cc4 0%, #a9a6e6 55%, #8fd3e8 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(180,140,190,.28) !important}html body .big-speak::before, html body #btn-play::before{
  position: static !important; width: 22px !important; height: 22px !important; flex: 0 0 22px}/* 选项行：紧凑列表（原来是四个超高卡片，一屏看不全） */
html body #view-listen .card > div[role="button"],
html body #view-listen .options > *, html body #view-listen .opt{
  min-height: 58px !important;
  padding: 11px 14px !important;
  border-radius: 16px !important;
  display: flex !important; flex-direction: column !important; justify-content: center !important;
  background: var(--c-normal-bg) !important;
  border: 1px solid var(--c-normal-line) !important;
  box-shadow: var(--sh-1) !important;
  margin-bottom: 9px !important}html body #view-listen .opt b, html body #view-listen .opt strong{ font-size: 15.5px !important}html body #view-listen .opt span, html body #view-listen .opt small{ font-size: 12px !important; color: var(--tx-2) !important}/* 选项反馈色：正确/错误 */
html body .opt.correct, html body .option.correct, html body [data-state="correct"]{
  background: rgba(226,244,231,.95) !important; border-color: rgba(74,140,96,.42) !important}html body .opt.wrong, html body .option.wrong, html body [data-state="wrong"]{
  background: rgba(253,235,233,.95) !important; border-color: rgba(206,94,88,.42) !important}/* 进度：把一排小圆点换成细进度条（由 ui-v2.js 注入 #quiz-progress） */
#quiz-progress{
  height: 6px; border-radius: 3px; background: rgba(107,87,64,.12);
  margin: 12px 16px 4px; overflow: hidden}#quiz-progress i{ display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg,#e79cc4,#8fd3e8); transition: width .3s ease}#quiz-meta{
  display: flex; justify-content: space-between; align-items: center;
  margin: 0 16px 10px; font-size: 12px; color: var(--tx-2)}#quiz-meta b{ color: var(--tx-1)}/* ---- 修：播放按钮出现两个喇叭 / 进度条未开始就显示 0/0 ---- */
html body .big-speak > svg, html body .big-speak > img, html body .big-speak > span > svg,
html body #btn-play > svg, html body #btn-play > img{
  display: none !important;          /* 只保留 ::before 的图标 */
}html body .big-speak, html body #btn-play{ font-size: 14px !important}/* 未开始答题时不显示进度条与计数 */
#quiz-progress.empty, #quiz-meta.empty{ display: none !important}/* 顺手：把小圆点也隐藏掉（已有进度条） */
html body #view-listen .dots, html body #view-listen .dots-row,
html body #view-listen [class*="dots"]{ display: none !important}/* 播放按钮排版美化：单图标 + 文字，水平居中，间距统一 */
:root:root body .big-speak, :root:root body #btn-play{
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 5px !important; padding: 0 20px !important; min-height: 50px !important;
  border-radius: 999px !important; white-space: nowrap !important}:root:root body .big-speak .lic, :root:root body #btn-play .lic{
  width: 21px !important; height: 21px !important; margin: 0 !important; flex: 0 0 21px}:root:root body .big-speak .lbl, :root:root body #btn-play .lbl{
  font-size: 14px !important; letter-spacing: .02em}/* ===== pages-v3.css ===== */
/* ================================================================
   v3：记录页 / 设置页 重新排版（独立样式层）
   ================================================================ */
/* ---------- 记录页 ---------- */
/* 顶部三块数据瓦片 */
#rec-tiles{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px;
  margin: 12px 16px 0}#rec-tiles .tile{
  margin: 0 !important; padding: 13px 10px !important; border-radius: 18px !important;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--c-normal-bg) !important; border: 1px solid var(--c-normal-line) !important;
  box-shadow: var(--sh-1) !important}#rec-tiles .tile b{ font-size: 21px; line-height: 1.1}#rec-tiles .tile span{ font-size: 11px; color: var(--tx-2)}/* 近 7 天柱状图 */
#rec-week{ margin: 12px 16px 0}#rec-week .wk-head{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px}#rec-week .wk-head h3{ margin: 0 !important}#rec-week .wk-head span{ font-size: 11.5px; color: var(--tx-2)}#rec-week .bars{ display: flex; align-items: flex-end; gap: 7px; height: 78px}#rec-week .bar{ flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end}#rec-week .bar i{
  display: block; width: 100%; border-radius: 7px 7px 4px 4px; min-height: 4px;
  background: linear-gradient(180deg, #e79cc4, #8fd3e8)}#rec-week .bar em{ font-size: 10px; color: var(--tx-2); font-style: normal}#rec-week .bar.today i{ box-shadow: 0 0 0 2px rgba(231,156,196,.35)}/* 快捷操作行（错题本 / 收藏） */
#rec-actions{ margin: 12px 16px 0; display: grid; gap: 9px}#rec-actions button{
  display: flex; align-items: center; justify-content: space-between;
  min-height: 54px; padding: 0 16px; border-radius: 18px;
  background: var(--c-normal-bg); border: 1px solid var(--c-normal-line);
  box-shadow: var(--sh-1); font-size: 14px; color: var(--tx-1)}#rec-actions button span.n{ font-size: 13px; color: var(--tx-2); font-variant-numeric: tabular-nums}/* 热力图默认折叠 */
#rec-heat-toggle{ margin: 12px 16px 0; width: calc(100% - 32px); min-height: 46px;
  border-radius: 999px; border: 1px solid var(--c-normal-line); background: var(--c-normal-bg);
  font-size: 13px; color: var(--tx-1)}#view-record .heat-collapsed{ display: none !important}/* ---------- 设置页 ---------- */
/* 分组标题 */
.set-group{
  margin: 20px 16px 6px; font-size: 12px; color: var(--tx-2);
  letter-spacing: .08em}.set-group:first-child{ margin-top: 12px}/* 设置行：左标签 右控件，统一 52px 高、分隔线 */
html body #view-mine .set-row, html body #view-mine .row-between, html body #view-mine label.row{
  min-height: 52px !important;
  padding: 0 2px !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 12px;
  border-bottom: 1px solid var(--c-normal-line)}html body #view-mine .card > *:last-child{ border-bottom: 0 !important}html body #view-mine select, html body #view-mine .select{
  min-width: 118px; min-height: 38px; border-radius: 12px; text-align: center;
  border: 1px solid var(--c-normal-line); background: var(--c-normal-bg); color: var(--tx-1);
  font-size: 13.5px}/* 滑块行：数值右对齐等宽 */
html body #view-mine input[type="range"]{ flex: 1; max-width: 58%; accent-color: #d98cb8}html body #view-mine .range-val, html body #view-mine output{
  min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; color: var(--tx-1); font-size: 13.5px}/* 当前角色一行 */
#rec-role-row{
  display: flex; align-items: center; gap: 12px; min-height: 62px;
  margin: 12px 16px 0; padding: 10px 14px; border-radius: 18px;
  background: var(--c-normal-bg); border: 1px solid var(--c-normal-line); box-shadow: var(--sh-1)}#rec-role-row .rname{ flex: 1; font-size: 14px}#rec-role-row .rname small{ display: block; color: var(--tx-2); font-size: 11px; margin-top: 2px}#rec-role-row button{
  min-height: 38px; padding: 0 16px; border-radius: 999px; font-size: 13px;
  background: linear-gradient(100deg,#e79cc4,#8fd3e8); color: #fff; border: 0}/* ================================================================
   最终（只追加，不动既有规则）：iOS 系统默认字体 + 全局统一字重
   用 :root:root 提高优先级，确保压过之前所有 !important 规则。
   ================================================================ */
:root:root body,
:root:root body *,
:root:root body *::before,
:root:root body *::after{
  font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI",
               "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-synthesis: none !important;
  -webkit-font-smoothing: auto !important;
  -moz-osx-font-smoothing: auto !important;
  font-variant-numeric: normal !important;
  font-feature-settings: normal !important;
  letter-spacing: normal}/* ================================================================
   统一渐变底：所有区块都带「重练错句」同族的粉→青渐变
   大面积用浅色版（保证文字可读），按钮/强调保持满色版。
   ================================================================ */
:root:root{
  --grad-full: linear-gradient(100deg, #e79cc4 0%, #a9a6e6 55%, #8fd3e8 100%);
  --grad-soft: linear-gradient(135deg, #fdf1f7 0%, #f4f3fd 48%, #ebf9fd 100%);
  --grad-soft-2: linear-gradient(135deg, #fbeaf4 0%, #f1f0fc 50%, #e6f7fc 100%)}/* 卡片 / 瓦片 / 操作行 / 设置卡：全部套渐变底 */
:root:root body .card,
:root:root body .tile,
:root:root body #rec-tiles .tile,
:root:root body #rec-actions button,
:root:root body #rec-role-row,
:root:root body #rec-heat-toggle,
:root:root body #picker-toggle,
:root:root body #home-say,
:root:root body .set-group + * ,
:root:root body #view-listen .opt,
:root:root body #diag-card,
:root:root body #backup-guard,
:root:root body #view-course .card > div,
:root:root body #view-mine .card{
  background: var(--grad-soft) !important;
  background-image: var(--grad-soft) !important}/* 稍微强调一点的层次（顶部数据瓦片与主卡片） */
:root:root body #rec-tiles .tile,
:root:root body .card.is-accent{
  background-image: var(--grad-soft-2) !important}/* 按钮 / 选中态 / 强调块：满色渐变 */
:root:root body .btn.primary,
:root:root body .big-speak,
:root:root body #btn-play,
:root:root body #rec-role-row button,
:root:root body .seg-btn.active,
:root:root body #view-listen .seg-btn.active{
  background-image: var(--grad-full) !important;
  color: #fff !important}/* 保持已统一的阴影 */
:root:root body .card,
:root:root body .tile,
:root:root body #rec-actions button{
  box-shadow: 0 2px 8px rgba(107,87,64,.06), inset 0 1px 0 rgba(255,255,255,.72) !important}/* ================================================================
   实体按键立体系统（所有可交互元素统一）
   原理：底部 3px 实边模拟"按键厚度" + 顶部内高光 + 外投影
        按下时整体下沉 3px、实边消失 → 真实的物理按压感
   ================================================================ */
:root:root{
  --key-edge: rgba(150,116,146,.42);        /* 主按键的"厚度"色 */
  --key-edge-soft: rgba(107,87,64,.16);     /* 次要按键的厚度色 */
  --key-shadow: 0 6px 14px rgba(150,116,146,.20)}/* 主按钮（渐变实色） */
:root:root body .btn.primary,
:root:root body .btn.primary.small,
:root:root body .cta,
:root:root body .quiz-cta,
:root:root body .big-speak,
:root:root body #btn-play,
:root:root body #rec-role-row button,
:root:root body .seg-btn.active,
:root:root body #view-listen .seg-btn.active,
:root:root body #switch-block button.on,
:root:root body #tabbar .tab.active{
  background-image: linear-gradient(100deg, #e79cc4 0%, #a9a6e6 55%, #8fd3e8 100%) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 3px 0 var(--key-edge), var(--key-shadow), inset 0 1px 0 rgba(255,255,255,.55) !important;
  transition: transform .09s ease, box-shadow .09s ease, background-image .2s ease !important}/* 次要按钮（浅底描边） */
:root:root body .btn.ghost,
:root:root body .btn.ghost.small,
:root:root body button:not(.btn):not(.tab):not(.cs-card),
:root:root body #picker-toggle,
:root:root body #rec-heat-toggle,
:root:root body #tabbar .tab,
:root:root body .seg-btn:not(.active),
:root:root body #view-listen .seg-btn:not(.active),
:root:root body #rec-actions button,
:root:root body #view-listen .opt{
  background-image: linear-gradient(180deg, #ffffff 0%, #fdf7fb 100%) !important;
  color: var(--tx-1) !important;
  border: 1px solid rgba(107,87,64,.13) !important;
  box-shadow: 0 2px 0 var(--key-edge-soft), 0 4px 10px rgba(107,87,64,.07), inset 0 1px 0 rgba(255,255,255,.9) !important;
  transition: transform .09s ease, box-shadow .09s ease !important}/* 底部导航整体也做出"浮起"的厚度 */
:root:root body #tabbar{
  box-shadow: 0 -2px 10px rgba(107,87,64,.06), inset 0 1px 0 rgba(255,255,255,.85) !important}/* 顶部圆形按钮 / 换装按钮：同样做实体边（统一立体感） */
:root:root body #topbar .icon-btn,
:root:root body #topbar .icon-btn:active,

/* ================================================================
   导航栏回退（恢复原样）：
   去掉落体立体、选中胶囊、3D 实边等装饰；
   仅保留"安全区高度"这一个必要修复（否则 iOS 上图标会被切）。
   ================================================================ */
:root:root body #tabbar{
  background: rgba(255,253,249,.94) !important;
  border-top: 1px solid rgba(107,87,64,.10) !important}:root:root body #tabbar .tab{
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  color: var(--book-ink-2) !important}:root:root body #tabbar .tab.active{
  background-image: none !important;
  box-shadow: none !important}:root:root body #tabbar .tab.active em{ color: #c98bb0 !important}:root:root body #tabbar .tab.active span svg{ stroke: #c98bb0}:root:root body #tabbar .tab.active::after{ display: none !important}/* 保留：安全区高度（防止 iOS 上图标被切） */
:root:root body #tabbar{
  height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: stretch !important}/* ================================================================
   宽度对齐：所有区块与人物区块左右齐平（原来卡片左右各多 16px 显得窄）
   容器（main）已有 16px 内边距，所以卡片横向外边距归零即可对齐。
   ================================================================ */
:root:root body .card,
:root:root body .tile,
:root:root body #home-say,
:root:root body #rec-tiles,
:root:root body #rec-week,
:root:root body #rec-actions,
:root:root body #rec-role-row,
:root:root body #rec-heat-toggle,
:root:root body #picker-toggle,
:root:root body #quiz-progress,
:root:root body #quiz-meta,
:root:root body #card-stack,
:root:root body #card-stack-hint,
:root:root body .set-group{
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important}/* 纵向间距保持统一的 12px */
:root:root body #view-home .card,
:root:root body #view-course .card,
:root:root body #view-listen .card,
:root:root body #view-record .card,
:root:root body #view-mine .card{
  margin-top: 12px !important;
  margin-bottom: 12px !important}:root:root body #home-say{ margin-top: 10px !important; margin-bottom: 12px !important}/* ================================================================
   渐变区块优化：加深渐变以承载白字 + 统一尺寸/圆角/内高光
   ================================================================ */
:root:root{
  --grad-full: linear-gradient(100deg, #d98ab8 0%, #8f8ce0 52%, #62c0dd 100%);
  --grad-full-soft: linear-gradient(100deg, #e2a0c6 0%, #a9a6e6 52%, #8fd3e8 100%)}/* 主按钮 / 播放 / 选中分段 / 更换角色：统一用加深渐变 + 白字 */
:root:root body .btn.primary,
:root:root body .btn.primary.small,
:root:root body .cta,
:root:root body .quiz-cta,
:root:root body .big-speak,
:root:root body #btn-play,
:root:root body #rec-role-row button,
:root:root body .seg-btn.active,
:root:root body #view-listen .seg-btn.active,
:root:root body #switch-block button.on{
  background-image: var(--grad-full) !important;
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.10);
  border: 0 !important;
  min-height: 46px;
  border-radius: 999px !important;
  box-shadow: 0 3px 0 rgba(126,92,140,.34), 0 6px 16px rgba(140,120,180,.24), inset 0 1px 0 rgba(255,255,255,.35) !important}/* 这些区块里的线性图标跟随白色（currentColor） */
:root:root body .btn.primary svg, :root:root body .big-speak svg, :root:root body #btn-play svg,
:root:root body .seg-btn.active svg, :root:root body #rec-role-row button svg, :root:root body .lic svg{
  stroke: currentColor}/* 未选中的分段：保持浅底深字，形成层次 */
:root:root body .seg-btn:not(.active){
  background-image: linear-gradient(180deg, #ffffff, #fbf6fb) !important;
  color: var(--tx-1) !important;
  min-height: 46px}/* 次级渐变（浅）用于非关键强调，自动配深字（由 JS 判定为半透明不处理） */
:root:root body #quiz-progress i, :root:root body #rec-week .bar i{ background-image: var(--grad-full-soft) !important}/* ================================================================
   白名单：只有这些"渐变按钮"用白字（不再用 JS 猜，避免误伤卡片）
   ================================================================ */
:root:root body .btn.primary,
:root:root body .btn.primary.small,
:root:root body .cta,
:root:root body .quiz-cta,
:root:root body .big-speak,
:root:root body #btn-play,
:root:root body #rec-role-row button,
:root:root body .seg-btn.active,
:root:root body #view-listen .seg-btn.active,
:root:root body #switch-block button.on,
:root:root body .btn.primary * ,
:root:root body .seg-btn.active *{
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.10) !important}/* 明确不让卡片/正文被刷白 */
:root:root body .card, :root:root body .card * ,
:root:root body .seg-btn:not(.active), :root:root body .seg-btn:not(.active) *{
  color: inherit;
  text-shadow: none !important}:root:root body .card{ color: var(--tx-1) !important}:root:root body .card .dim, :root:root body .card small, :root:root body .card p{ color: var(--tx-2) !important}/* 顶栏只留搜索（隐藏 换肤 / 连续打卡） */
:root:root body #btn-skin,
:root:root body #btn-streak{ display: none !important}/* ================================================================
   修复①：筛选胶囊（课别/全部单词/…）——选中态给渐变底（白字才有依托），未选中深字
   ================================================================ */
:root:root body .chip,
:root:root body [class*="chip"],
:root:root body .filters button,
:root:root body .seg-row button{
  color: var(--tx-1) !important;
  background-image: linear-gradient(180deg, #ffffff, #fbf6fb) !important;
  border: 1px solid rgba(107,87,64,.13) !important;
  box-shadow: 0 2px 0 rgba(107,87,64,.14), 0 3px 8px rgba(107,87,64,.06) !important;
  min-height: 40px;
  border-radius: 999px !important}:root:root body .chip.on,
:root:root body .chip.active,
:root:root body [class*="chip"].on,
:root:root body [class*="chip"].active,
:root:root body .filters button.on,
:root:root body .filters button.active{
  background-image: linear-gradient(100deg, #d98ab8 0%, #8f8ce0 52%, #62c0dd 100%) !important;
  color: #fff !important;
  border-color: transparent !important}/* 兜底：任何"白名单误刷成白字但底色是浅色"的胶囊，强制回深字 */
:root:root body .chip:not(.on):not(.active),
:root:root body [class*="chip"]:not(.on):not(.active){ color: var(--tx-1) !important}/* ================================================================
   修「顶部一大块空白」：隐藏/空掉的卡片不再占位
   ================================================================ */
:root:root body #backup-guard:empty,
:root:root body #view-home > .card:empty,
:root:root body #view-home > div:empty:not(.stage){
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important}/* 首页顶部与第一块之间的间距收紧 */
:root:root body #view-home{ padding-top: 0 !important}:root:root body #view-home > *:first-child{ margin-top: 10px !important}/* —— 防跳根因：内容区恒定最小高度 —— */
:root:root body main, :root:root body #view-home{ min-height: calc(100vh + 80px) !important}/* —— 闪烁根因修复：台词条永不塌陷（空着也占位），其他空卡片照旧不占位 —— */
:root:root body #home-say{
  display: flex !important; align-items: center !important;
  height: 46px !important; min-height: 46px !important; max-height: 46px !important;
  overflow: hidden !important}:root:root body #view-home > div:empty:not(.stage):not(#home-say){
  display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; min-height: 0 !important}/* ================================================================
   无障碍与动效偏好（商用基线）
   ================================================================ */
/* 键盘/辅助设备焦点可见 */
:root:root body :focus-visible{
  outline: 2px solid #8f8ce0 !important;
  outline-offset: 2px !important;
  border-radius: 12px}:root:root body button:focus:not(:focus-visible){ outline: none !important}
/* 尊重"减少动态效果" */
@media (prefers-reduced-motion: reduce) {*{ animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; scroll-behavior: auto !important}
}/* 触控目标 ≥44px（主流可点性标准） */
:root:root body #tabbar .tab{ min-height: 44px !important}:root:root body .seg-btn, :root:root body .chip{ min-height: 44px !important}:root:root body #topbar .icon-btn{ min-width: 44px !important; min-height: 44px !important}/* 文字选中色与系统一致 */
:root:root body ::selection{ background: rgba(143,140,224,.28)}/* 长按不弹系统菜单（更像原生 app） */
:root:root body{ -webkit-touch-callout: none}:root:root body input, :root:root body textarea{ -webkit-touch-callout: default}/* 角色加载失败兜底面板 */
:root:root body #model-fallback{
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(180deg, rgba(255,253,249,.96), rgba(248,246,255,.96));
  border-radius: 22px; padding: 20px; text-align: center}:root:root body #model-fallback .mf-ico{ width: 46px; height: 46px; color: #b98bb4}:root:root body #model-fallback .mf-ico svg{ width: 100%; height: 100%}:root:root body #model-fallback .mf-t{ font-size: 15px; color: var(--tx-1)}:root:root body #model-fallback .mf-d{ font-size: 12px; color: var(--tx-2); margin-bottom: 8px}:root:root body #model-fallback .mf-b{ display: flex; gap: 8px}/* ================================================================
   设计令牌（统一管理间距/圆角/字号/时长/层级，商用版基线）
   ================================================================ */
:root:root{
  /* 间距阶梯（4 的倍数，全局唯一来源） */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  /* 圆角阶梯 */
  --rd-sm: 12px; --rd-md: 16px; --rd-lg: 22px; --rd-pill: 999px;
  /* 字号阶梯 */
  --fs-cap: 10.5px; --fs-sm: 11.5px; --fs-body: 13.5px; --fs-btn: 14px; --fs-title: 15.5px; --fs-h1: 23px;
  /* 动画时长（统一手感） */
  --t-fast: .09s; --t-base: .18s; --t-slow: .34s;
  /* 层级 */
  --z-base: 1; --z-sticky: 55; --z-sheet: 80; --z-toast: 95;
  /* 阴影两级（已有 --sh-1/--sh-2，这里补充层级化名称） */
  --sh-card: var(--sh-1); --sh-float: var(--sh-2)}/* 令牌落地示例（后续新增样式一律用令牌） */
:root:root body .card{ padding: var(--sp-4) !important; margin: var(--sp-3) 0 !important}:root:root body .card h3{ font-size: var(--fs-title) !important; margin-bottom: var(--sp-1) !important}:root:root body .btn, :root:root body button{ font-size: var(--fs-btn)}/* 角色载入提示（覆盖在人物区块上，就绪即消失） */
:root:root body #load-hint{
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: none; align-items: center; gap: 8px; z-index: 12;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255,253,249,.92); border: 1px solid rgba(107,87,64,.14);
  box-shadow: var(--sh-1); font-size: 12px; color: var(--tx-2)}:root:root body #load-hint.on{ display: inline-flex}:root:root body #load-hint .lh-dot{
  width: 8px; height: 8px; border-radius: 50%; background: #b98bb4;
  animation: lhPulse 1s ease-in-out infinite}
@keyframes lhPulse {0%,100%{ opacity: .35; transform: scale(.85)}50%{ opacity: 1; transform: scale(1)} }/* 离线提示条 */
:root:root body #offline-bar{
  position: fixed; left: 0; right: 0; top: 0; z-index: var(--z-toast);
  display: none; align-items: center; justify-content: center;
  height: 26px; font-size: var(--fs-sm); color: #6f6659;
  background: linear-gradient(90deg, #f6e6f2, #e8e6fb 55%, #e2f3f8);
  border-bottom: 1px solid rgba(107,87,64,.10)}:root:root body #offline-bar.on{ display: flex}/* 今日任务卡里的连续天数徽标 */
:root:root body #streak-inline{
  margin-left: auto; padding: 3px 10px; border-radius: var(--rd-pill);
  font-size: var(--fs-sm); color: #a9739a;
  background: linear-gradient(100deg, rgba(231,156,196,.22), rgba(169,166,230,.22));
  border: 1px solid rgba(169,140,190,.20)}:root:root body #streak-inline.hot{ color: #fff; background-image: var(--grad-full); border-color: transparent}:root:root body #view-home .card h3{ display: flex !important; align-items: center !important; width: 100%}/* 引导式空状态 */
:root:root body #rec-guide{ text-align: left}:root:root body #rec-guide .eg-t{ font-size: var(--fs-title); color: var(--tx-1); margin-bottom: var(--sp-1)}:root:root body #rec-guide .eg-d{ font-size: var(--fs-body); color: var(--tx-2); line-height: 1.6; margin-bottom: var(--sp-3)}:root:root body #rec-guide .eg-sub{ display: flex; gap: var(--sp-3); margin-top: var(--sp-3); font-size: var(--fs-sm); color: #a9739a}:root:root body #rec-guide .eg-sub span{ text-decoration: underline; text-underline-offset: 3px}:root:root body .eg-hint{ margin-left: auto; font-size: var(--fs-sm); color: #b3a89b}/* 自建单词详情弹层 */
:root:root body #word-sheet-fb{
  position: fixed; inset: 0; z-index: var(--z-sheet);
  display: flex; align-items: center; justify-content: center;
  background: rgba(60,52,44,.28)}:root:root body #word-sheet-fb .ws-card{
  width: calc(100% - 56px); max-width: 360px; border-radius: var(--rd-lg);
  background: var(--paper, #fffdf9); padding: 22px 20px 18px;
  box-shadow: 0 18px 44px rgba(78,60,48,.22); text-align: center}:root:root body #word-sheet-fb .ws-jp{ font-size: 22px; color: var(--tx-1); line-height: 1.45}:root:root body #word-sheet-fb .ws-zh{ font-size: 14px; color: var(--tx-2); margin-top: 6px}:root:root body #word-sheet-fb .ws-meta{ display: flex; gap: 8px; justify-content: center; margin: 12px 0 4px; flex-wrap: wrap}:root:root body #word-sheet-fb .ws-btns{ display: flex; gap: 9px; justify-content: center; margin-top: 14px}/* 成就徽章 */
:root:root body #ach-card{ padding: var(--sp-4) !important}:root:root body .ach-head{ display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-3)}:root:root body .ach-t{ font-size: var(--fs-title); color: var(--tx-1)}:root:root body .ach-c{ font-size: var(--fs-sm); color: var(--tx-2)}:root:root body .ach-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2)}:root:root body .ach{ text-align: center; opacity: .45}:root:root body .ach.got{ opacity: 1}:root:root body .ach-ico{ font-size: 22px; line-height: 1.2}:root:root body .ach.got .ach-ico{ filter: none}:root:root body .ach-name{ font-size: var(--fs-cap); color: var(--tx-1); margin-top: 2px}:root:root body .ach-bar{ height: 4px; border-radius: 999px; background: rgba(107,87,64,.12); margin: 5px 2px 3px; overflow: hidden}:root:root body .ach-bar i{ display: block; height: 100%; border-radius: 999px; background-image: var(--grad-full)}:root:root body .ach-p{ font-size: 10px; color: var(--tx-2)}/* 本周学习报告 */
:root:root body #week-card{ padding: var(--sp-4) !important}:root:root body .wk-head{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-3)}:root:root body .wk-t{ font-size: var(--fs-title); color: var(--tx-1)}:root:root body .wk-range{ font-size: var(--fs-sm); color: var(--tx-2)}:root:root body .wk-nums{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-3)}:root:root body .wk-nums > div{ text-align: center}:root:root body .wk-nums b{ display: block; font-size: 20px; color: var(--tx-1)}:root:root body .wk-nums span{ font-size: var(--fs-cap); color: var(--tx-2)}:root:root body .wk-chart{ display: flex; align-items: flex-end; gap: 6px; height: 78px; padding: 0 2px}:root:root body .wk-col{ flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%}:root:root body .wk-col i{ display: block; width: 100%; max-width: 26px; border-radius: 6px 6px 3px 3px; background: rgba(107,87,64,.13); transition: height var(--t-slow) ease}:root:root body .wk-col.on i{ background-image: var(--grad-full)}:root:root body .wk-col em{ font-style: normal; font-size: var(--fs-cap); color: var(--tx-2); margin-top: 4px}:root:root body .wk-foot{ margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--tx-2)}/* 首次使用引导 */
:root:root body #guide-mask{
  position: fixed; inset: 0; z-index: var(--z-toast);
  display: flex; align-items: center; justify-content: center;
  background: rgba(60,52,44,.34); padding: 24px}:root:root body #guide-mask .gd-card{
  width: 100%; max-width: 360px; border-radius: var(--rd-lg); padding: 24px 20px 18px;
  background: linear-gradient(180deg, #fffdfa, #fdf7fb); box-shadow: 0 20px 50px rgba(78,60,48,.26)}:root:root body #guide-mask .gd-hi{ font-size: 19px; color: var(--tx-1); text-align: center}:root:root body #guide-mask .gd-sub{ font-size: var(--fs-sm); color: var(--tx-2); text-align: center; margin: 4px 0 16px}:root:root body #guide-mask .gd-list{ display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px}:root:root body #guide-mask .gd-row{ display: flex; gap: 12px; align-items: flex-start}:root:root body #guide-mask .gd-ico{ font-size: 20px; line-height: 1.3}:root:root body #guide-mask .gd-row b{ display: block; font-size: var(--fs-body); color: var(--tx-1)}:root:root body #guide-mask .gd-row span{ font-size: var(--fs-sm); color: var(--tx-2); line-height: 1.5}:root:root body #guide-mask .btn{ width: 100%; margin-bottom: 8px}/* ================================================================
   按钮文字垂直居中（之前 46px 最小高度把文字顶到了上方）
   ================================================================ */
:root:root body .btn,
:root:root body button.btn,
:root:root body #btn-report,
:root:root body #btn-ics,
:root:root body .btn.primary,
:root:root body .btn.ghost,
:root:root body .btn.ok,
:root:root body .btn.small{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.1 !important;
  text-align: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important}/* 卡片头部里的按钮不要被拉满行高 */
:root:root body .card .row-between .btn,
:root:root body .jd-head .btn{ min-height: 40px !important}/* 暗色：诊断卡内任何"浅底"元素统一改深（含 JS 内联的背景色） */
html[data-theme="dark"] #diag-card [style*="background"],
html[data-theme="dark"] #diag-trace,
html[data-theme="dark"] #diag-card pre,
html[data-theme="dark"] #diag-card code,
html[data-theme="dark"] #diag-card .diag-log,
html[data-theme="dark"] #diag-card > div{
  background: rgba(255,255,255,.06) !important;
  color: #d8d2cb !important}html[data-theme="dark"] #diag-card [style*="background"] *,
html[data-theme="dark"] #diag-trace *{
  color: #d8d2cb !important}/* 课程列表成绩徽章 */
:root:root body #course-body .lesson-item{ position: relative}:root:root body .lesson-score{
  position: absolute; top: 10px; right: 12px;
  padding: 2px 8px; border-radius: var(--rd-pill);
  font-size: var(--fs-cap); color: #8a8073;
  background: rgba(107,87,64,.08); border: 1px solid rgba(107,87,64,.10)}:root:root body .lesson-score.mid{ color: #a9739a; background: rgba(169,115,154,.12); border-color: rgba(169,115,154,.18)}:root:root body .lesson-score.good{ color: #fff; background-image: var(--grad-full); border-color: transparent}/* ================================================================
   长列表性能：屏幕外的列表项交给浏览器跳过渲染（滚动更顺、首屏更快）
   ================================================================ */
:root:root body #course-body .lesson-item,
:root:root body #char-picker > *,
:root:root body #view-course .gram-item,
:root:root body #lesson-body .wrow{
  content-visibility: auto;
  contain-intrinsic-size: auto 96px}/* 角色列表项更矮一些 */
:root:root body #char-picker > *{ contain-intrinsic-size: auto 84px}/* 列表容器本身也做布局隔离，减少整页重排 */
:root:root body #course-body, :root:root body #char-picker{ contain: layout style}

/* ================================================================
   播放动效不遮挡文字：把"放大脉冲"改成"光晕呼吸"（尺寸不变 → 不会压住下方文字）
   ================================================================ */
@keyframes playGlow {0%, 100%{ box-shadow: 0 3px 0 rgba(126,92,140,.34), 0 6px 16px rgba(140,120,180,.24), inset 0 1px 0 rgba(255,255,255,.35)}
}:root:root body .big-speak.playing,
:root:root body #btn-play.playing{
  animation: playGlow 1.1s ease-in-out infinite !important;
  transform: none !important}/* 注：不再动 z-index —— 之前把「再听一次」压到选项下面导致点不动 */

/* 听音题：题目文字靠右（原来在按钮正下方居中，现在挪到右边） */
:root:root body #quiz-play #quiz-q{
  text-align: right !important;
  padding-right: 10px !important;
  margin-top: -6px !important}/* 题干里的小字（副标题/提示）也跟着右对齐，避免错位 */
:root:root body #quiz-play #quiz-q div,
:root:root body #quiz-play #quiz-q .dim,
:root:root body #quiz-play #quiz-q .q-replay{ text-align: right !important}/* 首次语言选择 */
:root:root body #lang-mask{
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(60,52,44,.38); padding: 24px}:root:root body #lang-mask .lang-card{
  width: 100%; max-width: 340px; border-radius: 22px; padding: 24px 20px;
  background: linear-gradient(180deg, #fffdfa, #fdf7fb);
  box-shadow: 0 20px 50px rgba(78,60,48,.28); text-align: center}:root:root body #lang-mask .lang-hi{ font-size: 19px; color: #3f3730}:root:root body #lang-mask .lang-sub{ font-size: 12.5px; color: #8a8073; margin: 6px 0 16px}:root:root body #lang-mask .lang-opt{
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 100%; min-height: 48px; margin-bottom: 8px;
  border-radius: 999px; border: 1px solid rgba(107,87,64,.14);
  background: #fffdfa; color: #3f3730; font-size: 14px}:root:root body #lang-mask .lang-go{
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 100%; min-height: 50px; margin-top: 8px;
  border: 0; border-radius: 999px; color: #fff; font-size: 14px;
  background-image: linear-gradient(100deg, #d98ab8 0%, #8f8ce0 52%, #62c0dd 100%);
  box-shadow: 0 3px 0 rgba(126,92,140,.32)}/* 语法详情的英文解释块 */
:root:root body .gd-en{
  margin: 6px 0 10px; padding: 10px 12px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(169,166,230,.10), rgba(143,140,224,.06));
  border: 1px solid rgba(143,140,224,.18)}:root:root body .gd-en .gd-k{
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #8f8ce0; margin-bottom: 4px}:root:root body .gd-en .gd-en-body{ font-size: 13px; line-height: 1.65; color: var(--tx-1)}:root:root body .gd-en .gd-en-form{ font-size: 12px; color: var(--tx-2); margin-top: 6px}/* 课程页「本课试卷」按钮 */
:root:root body .p4-lesson-paper{
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 100%; min-height: 46px; margin: 10px 0 4px;
  border: 0 !important; border-radius: 999px; color: #fff !important; font-size: 13.5px;
  background-image: linear-gradient(100deg, #d98ab8 0%, #8f8ce0 52%, #62c0dd 100%);
  box-shadow: 0 3px 0 rgba(126,92,140,.30), 0 6px 16px rgba(150,130,190,.22) !important}/* 课程详细讲解弹层 */
:root:root body #ld-mask{
  position: fixed; inset: 0; z-index: 210; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(60,52,44,.36)}:root:root body #ld-mask .ld-card{
  width: 100%; max-height: 86vh; overflow: auto; border-radius: 22px 22px 0 0;
  background: #fffdfa; padding: 18px 18px calc(24px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(78,60,48,.24)}:root:root body .ld-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px}:root:root body .ld-head b{ font-size: 16px; color: var(--tx-1); line-height: 1.4}:root:root body .ld-x{ background: transparent !important; border: 0 !important; color: #b3a89b !important; font-size: 16px; min-height: 28px !important; padding: 0 4px !important}:root:root body .ld-goal{ font-size: 12.5px; color: var(--tx-2); line-height: 1.6; margin-bottom: 10px}:root:root body .ld-sec{ margin: 12px 0}:root:root body .ld-k{ font-size: 11.5px; letter-spacing: .04em; color: #a9739a; margin-bottom: 6px}:root:root body .ld-row, :root:root body .ld-w{ padding: 7px 0; border-bottom: 1px dashed rgba(107,87,64,.10)}:root:root body .ld-jp{ font-size: 14px; color: var(--tx-1)}:root:root body .ld-kanji{ color: #a9739a; font-size: 13px}:root:root body .ld-zh{ font-size: 12px; color: var(--tx-2); margin-top: 2px; line-height: 1.5}:root:root body .ld-name{ font-size: 13px; color: #8f8ce0}:root:root body .ld-caution{
  margin-top: 12px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.6;
  background: rgba(231,156,196,.12); color: var(--tx-1); border: 1px solid rgba(231,156,196,.24)}/* JLPT 分级浏览 */
:root:root body #lv-bar{ margin: 8px 0 12px}:root:root body #lv-bar .lv-k{ font-size: 11.5px; letter-spacing: .04em; color: #a9739a; margin: 0 2px 8px}:root:root body #lv-bar .lv-row{ display: flex !important}:root:root body .lv-card{
  flex: 1; display: flex !important; flex-direction: column; align-items: center; justify-content: center !important;
  gap: 1px; min-height: 74px; border-radius: 16px; background: #fffdfa;
  border: 1px solid rgba(107,87,64,.14); color: #5b5048}:root:root body .lv-card b{ color: #8f8ce0}:root:root body .lv-card .lv-n{ color: #8a8073}:root:root body .lv-card em{ font-size: 10.5px; color: #b3a89b; font-style: normal}:root:root body #lv-mask{
  position: fixed; inset: 0; z-index: 215; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(60,52,44,.36)}:root:root body #lv-mask .lv-sheet{
  width: 100%; max-height: 86vh; display: flex; flex-direction: column;
  border-radius: 22px 22px 0 0; background: #fffdfa; padding: 16px 16px calc(18px + env(safe-area-inset-bottom))}:root:root body #lv-mask .lv-tabs{ display: flex !important; gap: 8px; margin: 10px 0}:root:root body #lv-mask .lv-tab{
  flex: 1; min-height: 38px; border-radius: 999px; border: 1px solid rgba(107,87,64,.14);
  background: #fffdfa; color: #6b6057; font-size: 12.5px}:root:root body #lv-mask .lv-tab.on{ background-image: linear-gradient(100deg,#d98ab8,#8f8ce0); color: #fff; border-color: transparent}:root:root body #lv-mask .lv-body{ overflow: auto}:root:root body .lv-item{ padding: 8px 2px; border-bottom: 1px dashed rgba(107,87,64,.10)}:root:root body .lv-jp{ font-size: 14px; color: var(--tx-1)}:root:root body .lv-kanji{ color: #a9739a}:root:root body .lv-zh{ font-size: 11.5px; color: var(--tx-2); margin-top: 2px}/* 级卡防溢出（审计发现 3 个元素出屏） */
:root:root body .lv-card{ min-width: 0 !important; overflow: hidden; padding: 0 4px !important}:root:root body .lv-card .lv-n{ font-size: 9.5px !important; white-space: normal; word-break: break-all; line-height: 1.25; max-width: 100%}:root:root body .lv-card b{ font-size: 16px !important}:root:root body #lv-bar .lv-row{ gap: 6px !important}/* --- home 多邻国风：首页统一设计语言 --- */
:root:root body #view-home{ padding-top: 10px !important}:root:root body #view-home .card, :root:root body #view-home [class*="card"]{
  border-radius: 20px !important;
  border: 1px solid rgba(107,87,64,.08) !important;
  box-shadow: 0 2px 0 rgba(107,87,64,.07), 0 8px 18px rgba(78,60,48,.05) !important}:root:root body #home-say{
  font-size: 15.5px !important; color: #3f3730 !important;
  background: linear-gradient(135deg, rgba(88,204,143,.14), rgba(124,108,224,.12)) !important;
  border-radius: 16px !important; padding: 12px 14px !important; margin: 8px 2px 16px !important}:root:root body #view-home button:not(.tab){
  border-radius: 14px !important;
  box-shadow: 0 3px 0 rgba(107,87,64,.16)}:root:root body #btn-start, :root:root body #btn-learn-new{
  background-image: linear-gradient(100deg, #58cc8f 0%, #3fa96f 100%) !important;
  color: #fff !important; border: 0 !important;
  box-shadow: 0 4px 0 #2c8a56 !important}/* --- record/mine 统一：与首页/课程/练习一致 --- */
:root:root body #view-record .card, :root:root body #view-mine .card,
:root:root body #view-record [class*=card], :root:root body #view-mine [class*=card]{
  border-radius: 20px !important;
  border: 1px solid rgba(107,87,64,.08) !important;
  box-shadow: 0 2px 0 rgba(107,87,64,.07), 0 8px 18px rgba(78,60,48,.05) !important}:root:root body #view-record button:not(.tab), :root:root body #view-mine button:not(.tab){
  border-radius: 14px !important; min-height: 46px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important}/* 主按钮绿色 */
:root:root body #btn-week-report, :root:root body #btn-ach, :root:root body #btn-report,
:root:root body [data-act="week"], :root:root body [data-act="ach"]{
  background-image: linear-gradient(100deg, #58cc8f 0%, #3fa96f 100%) !important;
  color: #fff !important; border: 0 !important;
  box-shadow: 0 4px 0 #2c8a56 !important}/* 角色网格重叠修复：限宽 + 换行 + 小字 */
:root:root body #view-mine .model-btn, :root:root body #view-mine [class*="model"],
:root:root body #view-mine .char-btn, :root:root body #view-mine [class*="char"]{
  min-width: 0 !important; max-width: 100% !important; overflow: hidden !important;
  white-space: normal !important; word-break: break-all; font-size: 11px !important;
  line-height: 1.3 !important; padding: 8px 6px !important;
  display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center !important;
  gap: 2px; text-align: center}/* --- tabbar 统一：圆角悬浮导航 + 高亮色 --- */
:root:root body #tabbar{
  border-radius: 24px 24px 0 0 !important;
  background: rgba(255,253,250,.96) !important;
  box-shadow: 0 -6px 24px rgba(78,60,48,.10) !important}:root:root body #tabbar .tab{ border-radius: 16px !important; margin: 6px 2px !important}:root:root body #tabbar .tab em{ font-size: 11px !important}:root:root body #tabbar .tab.active{ background: rgba(88,204,143,.16) !important; color: #3fa96f !important}/* 记录页卡片内部排版 */
:root:root body #view-record .card{ padding: 16px 14px !important}:root:root body #week-card, :root:root body #ach-card{ margin-bottom: 12px !important}:root:root body #view-record h3, :root:root body #view-record h4{ color: #3f3730 !important}/* 角色网格 v2：英文长名防重叠（按钮之间留缝 + 允许折行 + 不互相挤压） */
:root:root body #view-mine .model-btn, :root:root body #view-mine [class*="model"],
:root:root body #view-mine .char-btn, :root:root body #view-mine [class*="char"]{
  gap: 3px !important; margin: 0 !important;
  min-height: 58px !important; height: auto !important;
  text-overflow: ellipsis}:root:root body #view-mine button{ gap: 2px}/* 角色名省略：名字再长也不压到下一区块 */
:root:root body #view-mine [class*="model"] span,
:root:root body #view-mine [class*="char"] span,
:root:root body #view-mine .model-name,
:root:root body #view-mine .char-name{
  display: block !important; max-width: 100% !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important}/* 角色选择按钮：名字单行省略，不压下一区块 */
:root:root body #char-picker .pick{
  max-width: 100% !important; overflow: hidden !important;
  min-width: 0 !important; height: auto !important}:root:root body #char-picker .pick span{
  display: block !important; max-width: 100% !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  line-height: 1.25 !important}/* ===== study-v2.css ===== */
/* ============================================================
 * study-v2.css —— 全新课程模块（多邻国风格）
 * 设计语言：大圆角立体卡、明快分级色、粗进度条、白色空间
 * ============================================================ */

/* ---------- 宿主容器 ---------- */
#study-root{ padding: 4px 2px calc(40px + env(safe-area-inset-bottom)); min-height: 100%}#study-root *{ box-sizing: border-box}/* ---------- 头部问候 ---------- */
.sv-hero{ margin: 6px 2px 14px}.sv-hero h2{ margin: 0; font-size: 22px; color: #3f3730}.sv-hero p{ margin: 4px 0 0; font-size: 13px; color: #8a8073}/* ---------- 进度摘要 ---------- */
.sv-stats{ display: flex; gap: 8px; margin: 0 2px 16px}.sv-stat{
  flex: 1; background: #fff; border-radius: 16px; padding: 12px 10px; text-align: center;
  border: 1px solid rgba(107,87,64,.08); box-shadow: 0 2px 8px rgba(78,60,48,.05)}.sv-stat b{ display: block; font-size: 18px; color: #6f6cc0}.sv-stat span{ font-size: 11px; color: #a49a8c}/* ---------- 级别选择（主界面） ---------- */
.sv-levels{ display: flex; flex-direction: column; gap: 14px; margin: 4px 2px 0}.sv-level{
  display: block; width: 100%; text-align: left; border: 0 !important; padding: 0 !important;
  background: transparent !important; cursor: pointer}.sv-level-card{
  border-radius: 20px; padding: 18px 18px 20px; color: #fff; position: relative; overflow: hidden;
  box-shadow: 0 5px 0 rgba(0,0,0,.18), 0 10px 24px rgba(0,0,0,.10)}.sv-lv-N5{ background: linear-gradient(135deg, #58cc8f 0%, #3fa96f 100%); box-shadow: 0 5px 0 #2c8a56, 0 10px 24px rgba(58,160,110,.25)}.sv-lv-N4{ background: linear-gradient(135deg, #ffc53d 0%, #f0a428 100%); box-shadow: 0 5px 0 #cf8815, 0 10px 24px rgba(240,164,40,.25)}.sv-lv-N3{ background: linear-gradient(135deg, #a78bfa 0%, #7c6ce0 100%); box-shadow: 0 5px 0 #5d4ec4, 0 10px 24px rgba(124,108,224,.28)}.sv-lv-badge{
  display: inline-block; background: rgba(255,255,255,.28); border-radius: 999px;
  padding: 3px 12px; font-size: 13px; letter-spacing: .04em}.sv-lv-name{ display: block; font-size: 24px; margin-top: 10px}.sv-lv-sub{ display: block; font-size: 12.5px; opacity: .92; margin-top: 3px}.sv-lv-meta{ display: block; font-size: 11.5px; opacity: .85; margin-top: 10px}.sv-lv-bar{ height: 10px; border-radius: 999px; background: rgba(0,0,0,.16); margin-top: 10px; overflow: hidden}.sv-lv-bar i{ display: block; height: 100%; border-radius: 999px; background: #fff}/* ---------- 级别内部：单元列表 ---------- */
.sv-back{
  display: flex !important; align-items: center !important; gap: 6px; min-height: 40px;
  background: transparent !important; border: 0 !important; color: #6f6cc0 !important;
  font-size: 14px; padding: 0 2px !important; margin-bottom: 6px}.sv-section-title{ font-size: 17px; color: #3f3730; margin: 14px 2px 10px}.sv-unit{
  display: flex !important; align-items: center !important; gap: 12px; width: 100%;
  text-align: left; min-height: 76px; border-radius: 18px; border: 1px solid rgba(107,87,64,.10) !important;
  background: #fff !important; padding: 12px 14px !important; margin-bottom: 10px;
  box-shadow: 0 2px 0 rgba(107,87,64,.08)}.sv-unit-ico{
  width: 46px; height: 46px; border-radius: 14px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff}.sv-ico-word{ background: linear-gradient(135deg, #58cc8f, #3fa96f)}.sv-ico-gram{ background: linear-gradient(135deg, #a78bfa, #7c6ce0)}.sv-unit-main{ flex: 1; min-width: 0}.sv-unit-name{ font-size: 15.5px; color: #3f3730}.sv-unit-desc{ font-size: 12px; color: #a49a8c; margin-top: 3px}.sv-unit-arrow{ color: #c9c0b4; font-size: 18px}/* ---------- 学习卡片（单词 / 语法逐个学） ---------- */
.sv-stage{ display: flex; flex-direction: column; gap: 14px; margin-top: 8px}.sv-prog{ height: 12px; border-radius: 999px; background: #e8e3da; overflow: hidden}.sv-prog i{ display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg,#58cc8f,#3fa96f); transition: width .25s ease}.sv-card{
  background: #fff; border-radius: 24px; padding: 26px 20px; text-align: center;
  border: 1px solid rgba(107,87,64,.08); box-shadow: 0 2px 0 rgba(107,87,64,.10), 0 8px 20px rgba(78,60,48,.06);
  min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center}.sv-card .sv-pos{
  display: inline-block; font-size: 11px; color: #58a07e; background: rgba(88,204,143,.14);
  border-radius: 999px; padding: 3px 12px; margin-bottom: 14px}.sv-card .sv-word{ font-size: 32px; color: #3f3730; line-height: 1.3}.sv-card .sv-kana{ font-size: 17px; color: #8a8073; margin-top: 8px}.sv-card .sv-zh{ font-size: 17px; color: #5b5048; margin-top: 16px}.sv-card .sv-en{ font-size: 13px; color: #a49a8c; margin-top: 5px}.sv-card .sv-ex{
  margin-top: 22px; padding: 12px 14px; border-radius: 14px;
  font-size: 14.5px; color: #5b5048; line-height: 1.7; text-align: center; width: 100%}.sv-card .sv-ex b{ color: #6f6cc0}.sv-audio{
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: 8px; min-height: 48px; padding: 0 22px !important; margin: 18px auto 0;
  border-radius: 999px !important; border: 2px solid #58cc8f !important;
  color: #3fa96f !important; font-size: 15px}.sv-nav{ display: flex; gap: 10px}.sv-nav button{
  flex: 1; display: flex !important; align-items: center !important; justify-content: center !important;
  min-height: 56px; border-radius: 16px; font-size: 15.5px}.sv-btn-ghost{ border: 2px solid rgba(107,87,64,.16) !important}.sv-btn-main{
  border: 0 !important; color: #fff !important; background: #58cc8f !important;
  box-shadow: 0 4px 0 #3fa96f}.sv-done{ text-align: center; padding: 30px 10px}.sv-done .sv-trophy{ font-size: 64px}.sv-done h3{ font-size: 22px; color: #3f3730; margin: 10px 0 6px}.sv-done p{ font-size: 13.5px; color: #8a8073; margin-bottom: 18px}/* ---------- 语法卡 ---------- */
.sv-gram-title{ font-size: 21px; color: #6f6cc0; line-height: 1.4; margin-bottom: 4px}.sv-gram-usage{ font-size: 13.5px; color: #5b5048; margin-top: 6px}.sv-gram-form{
  margin-top: 12px; font-size: 13px; color: #fff; background: #a78bfa;
  border-radius: 999px; padding: 5px 16px; display: inline-block}.sv-gram-explain{ margin-top: 16px; font-size: 14px; color: #5b5048; line-height: 1.75; text-align: left; width: 100%}.sv-gram-explain-en{ font-size: 13px; color: #a49a8c; line-height: 1.65; margin-top: 8px; text-align: left; width: 100%; padding-left: 10px; border-left: 3px solid #e4dcf8}.sv-gram-examples{ width: 100%; margin-top: 14px; text-align: left}.sv-gram-examples .sv-ex{ margin-top: 8px}.sv-tag{ display: inline-block; font-size: 11px; color: #7c6ce0; background: rgba(167,139,250,.15); border-radius: 999px; padding: 2px 10px}/* ---------- 空态 ---------- */
.sv-empty{ text-align: center; padding: 40px 16px; color: #a49a8c; font-size: 14px}

/* ---------- 深色适配 ---------- */
@media (prefers-color-scheme: dark) {.sv-stat, .sv-unit, .sv-card{ background: #2a2622; border-color: rgba(255,255,255,.06)}.sv-hero h2, .sv-section-title, .sv-unit-name, .sv-card .sv-word, .sv-done h3{ color: #ece7df}.sv-hero p, .sv-stat span, .sv-unit-desc, .sv-card .sv-kana, .sv-card .sv-en, .sv-done p, .sv-card .sv-zh, .sv-gram-usage, .sv-gram-explain, .sv-card .sv-ex{ color: #b8ae9f}.sv-card .sv-ex{ background: #322d28}.sv-gram-explain-en{ border-left-color: #4a4070}.sv-btn-ghost{ background: #2a2622 !important; color: #b8ae9f !important; border-color: rgba(255,255,255,.14) !important}.sv-audio{ background: #2a2622 !important}
}/* ===== study-v2-override.css ===== */
/* ============================================================
 * study-v2-override.css —— 高优先级覆写（app 全局样式会吃掉普通选择器）
 * 所有关键视觉属性都用 :root:root body + !important，与 practice-v4 同级
 * ============================================================ */

/* ---------- 级别卡：渐变色块（修复被覆盖成白块） ---------- */
:root:root body #study-root .sv-level{
  background: transparent !important; border: 0 !important; padding: 0 !important;
  box-shadow: none !important; display: block !important; width: 100% !important;
  min-height: 0 !important; margin: 0 0 14px !important; text-align: left !important}:root:root body #study-root .sv-level-card{
  display: block !important; border-radius: 22px !important; padding: 18px 20px 20px !important;
  color: #fff !important; position: relative !important; overflow: hidden !important;
  background-image: none !important}:root:root body #study-root .sv-level-card.sv-lv-N5{
  background-image: linear-gradient(135deg, #58cc8f 0%, #3fa96f 100%) !important;
  background-color: #3fa96f !important;
  box-shadow: 0 5px 0 #2c8a56, 0 10px 24px rgba(58,160,110,.22) !important}:root:root body #study-root .sv-level-card.sv-lv-N4{
  background-image: linear-gradient(135deg, #ffc53d 0%, #f0a428 100%) !important;
  background-color: #f0a428 !important;
  box-shadow: 0 5px 0 #cf8815, 0 10px 24px rgba(240,164,40,.22) !important}:root:root body #study-root .sv-level-card.sv-lv-N3{
  background-image: linear-gradient(135deg, #a78bfa 0%, #7c6ce0 100%) !important;
  background-color: #7c6ce0 !important;
  box-shadow: 0 5px 0 #5d4ec4, 0 10px 24px rgba(124,108,224,.24) !important}:root:root body #study-root .sv-lv-badge{
  display: inline-block !important; background: rgba(255,255,255,.30) !important;
  color: #fff !important; border-radius: 999px !important; padding: 3px 12px !important;
  font-size: 12.5px !important; letter-spacing: .04em !important;
  width: auto !important; height: auto !important; margin: 0 !important}:root:root body #study-root .sv-lv-name{
  display: block !important; font-size: 21px !important;
  color: #fff !important; margin: 10px 0 0 !important; line-height: 1.3 !important}:root:root body #study-root .sv-lv-sub{
  display: block !important; font-size: 12.5px !important; color: rgba(255,255,255,.94) !important;
  margin: 4px 0 0 !important; line-height: 1.5 !important}:root:root body #study-root .sv-lv-meta{
  display: block !important; font-size: 11.5px !important; color: rgba(255,255,255,.88) !important;
  margin: 12px 0 0 !important}:root:root body #study-root .sv-lv-bar{
  display: block !important; height: 9px !important; border-radius: 999px !important;
  background: rgba(0,0,0,.18) !important; margin: 8px 0 0 !important; overflow: hidden !important;
  width: 100% !important}:root:root body #study-root .sv-lv-bar i{
  display: block !important; height: 100% !important; border-radius: 999px !important;
  background: #fff !important; min-width: 6px !important}/* ---------- 顶部三统计 ---------- */
:root:root body #study-root .sv-stats{ display: flex !important; gap: 8px !important; margin: 0 0 16px !important}:root:root body #study-root .sv-stat{
  flex: 1 !important; display: block !important; background: #fff !important;
  border-radius: 16px !important; padding: 12px 8px !important; text-align: center !important;
  border: 1px solid rgba(107,87,64,.08) !important; box-shadow: 0 2px 8px rgba(78,60,48,.05) !important;
  min-height: 0 !important}:root:root body #study-root .sv-stat b{ display: block !important; font-size: 18px !important; color: #6f6cc0 !important}:root:root body #study-root .sv-stat span{ display: block !important; font-size: 11px !important; color: #a49a8c !important; margin-top: 2px !important}/* ---------- hero ---------- */
:root:root body #study-root .sv-hero{ margin: 4px 2px 14px !important}:root:root body #study-root .sv-hero h2{ font-size: 21px !important; color: #3f3730 !important; margin: 0 !important; line-height: 1.3 !important}:root:root body #study-root .sv-hero p{ font-size: 12.5px !important; color: #8a8073 !important; margin: 5px 0 0 !important; line-height: 1.5 !important}/* ---------- 级别内单元 ---------- */
:root:root body #study-root .sv-section-title{ font-size: 15.5px !important; color: #3f3730 !important; margin: 16px 2px 9px !important}:root:root body #study-root .sv-unit{
  display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important;
  text-align: left !important; min-height: 72px !important; border-radius: 18px !important;
  border: 1px solid rgba(107,87,64,.10) !important; background: #fff !important;
  padding: 12px 14px !important; margin: 0 0 10px !important;
  box-shadow: 0 2px 0 rgba(107,87,64,.08) !important; color: #3f3730 !important}:root:root body #study-root .sv-unit-ico{
  width: 44px !important; height: 44px !important; border-radius: 13px !important; flex: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 19px !important; color: #fff !important}:root:root body #study-root .sv-ico-word{ background-image: linear-gradient(135deg, #58cc8f, #3fa96f) !important; background-color: #3fa96f !important}:root:root body #study-root .sv-ico-gram{ background-image: linear-gradient(135deg, #a78bfa, #7c6ce0) !important; background-color: #7c6ce0 !important}:root:root body #study-root .sv-unit-main{ flex: 1 !important; min-width: 0 !important}:root:root body #study-root .sv-unit-name{ display: block !important; font-size: 15px !important; color: #3f3730 !important}:root:root body #study-root .sv-unit-desc{ display: block !important; font-size: 11.5px !important; color: #a49a8c !important; margin-top: 3px !important; line-height: 1.45 !important}:root:root body #study-root .sv-unit-arrow{ color: #c9c0b4 !important; font-size: 18px !important; flex: none !important}/* ---------- 学习卡片 ---------- */
:root:root body #study-root .sv-prog{ height: 11px !important; border-radius: 999px !important; background: #e8e3da !important; overflow: hidden !important; margin-bottom: 14px !important}:root:root body #study-root .sv-prog i{ display: block !important; height: 100% !important; border-radius: 999px !important; background-image: linear-gradient(90deg, #58cc8f, #3fa96f) !important; background-color: #3fa96f !important}:root:root body #study-root .sv-card{
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
  background: #fff !important; border-radius: 24px !important; padding: 26px 20px !important; text-align: center !important;
  border: 1px solid rgba(107,87,64,.08) !important;
  box-shadow: 0 2px 0 rgba(107,87,64,.10), 0 8px 20px rgba(78,60,48,.06) !important;
  min-height: 280px !important; height: auto !important}:root:root body #study-root .sv-card .sv-word{ font-size: 30px !important; color: #3f3730 !important; line-height: 1.3 !important}:root:root body #study-root .sv-card .sv-kana{ font-size: 16px !important; color: #8a8073 !important; margin-top: 7px !important}:root:root body #study-root .sv-card .sv-zh{ font-size: 17px !important; color: #5b5048 !important; margin-top: 14px !important}:root:root body #study-root .sv-card .sv-en{ font-size: 12.5px !important; color: #a49a8c !important; margin-top: 5px !important}:root:root body #study-root .sv-card .sv-pos{
  display: inline-block !important; font-size: 11px !important; color: #3fa96f !important;
  background: rgba(88,204,143,.16) !important; border-radius: 999px !important; padding: 3px 12px !important; margin-bottom: 12px !important}:root:root body #study-root .sv-card .sv-ex{
  margin-top: 18px !important; padding: 12px 14px !important; border-radius: 14px !important;
  background: #faf7f2 !important; font-size: 14px !important; color: #5b5048 !important;
  line-height: 1.7 !important; text-align: center !important; width: 100% !important}:root:root body #study-root .sv-audio{
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  min-height: 46px !important; padding: 0 20px !important; margin: 16px auto 0 !important;
  border-radius: 999px !important; border: 2px solid #58cc8f !important; background: #fff !important;
  color: #3fa96f !important; font-size: 14.5px !important; width: fit-content !important}/* ---------- 导航按钮 ---------- */
:root:root body #study-root .sv-nav{ display: flex !important; gap: 10px !important; margin-top: 14px !important}:root:root body #study-root .sv-nav button{
  flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important;
  min-height: 54px !important; border-radius: 16px !important; font-size: 15px !important}:root:root body #study-root .sv-btn-ghost{ border: 2px solid rgba(107,87,64,.16) !important; background: #fff !important; color: #8a8073 !important}:root:root body #study-root .sv-btn-main{
  border: 0 !important; color: #fff !important; background-color: #58cc8f !important;
  background-image: linear-gradient(135deg, #58cc8f, #3fa96f) !important;
  box-shadow: 0 4px 0 #3fa96f !important}/* ---------- 语法卡 ---------- */
:root:root body #study-root .sv-gram-title{ font-size: 20px !important; color: #6f6cc0 !important; line-height: 1.4 !important}:root:root body #study-root .sv-gram-usage{ font-size: 13px !important; color: #5b5048 !important; margin-top: 6px !important; line-height: 1.6 !important}:root:root body #study-root .sv-gram-form{
  display: inline-block !important; margin-top: 12px !important; font-size: 12.5px !important; color: #fff !important;
  background-color: #a78bfa !important; background-image: linear-gradient(135deg, #a78bfa, #7c6ce0) !important;
  border-radius: 999px !important; padding: 5px 16px !important}:root:root body #study-root .sv-gram-explain{ margin-top: 16px !important; font-size: 13.5px !important; color: #5b5048 !important; line-height: 1.75 !important; text-align: left !important; width: 100% !important}:root:root body #study-root .sv-gram-explain-en{
  font-size: 12.5px !important; color: #8a8073 !important; line-height: 1.65 !important;
  margin-top: 10px !important; text-align: left !important; width: 100% !important;
  padding-left: 10px !important; border-left: 3px solid #e4dcf8 !important}:root:root body #study-root .sv-gram-examples{ width: 100% !important; margin-top: 12px !important; text-align: left !important}:root:root body #study-root .sv-tag{
  display: inline-block !important; font-size: 11px !important; color: #7c6ce0 !important;
  background: rgba(167,139,250,.16) !important; border-radius: 999px !important; padding: 2px 10px !important}/* ---------- 返回 / 完成页 ---------- */
:root:root body #study-root .sv-back{
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  min-height: 38px !important; background: transparent !important; border: 0 !important;
  color: #6f6cc0 !important; font-size: 14px !important;
  padding: 0 4px !important; margin-bottom: 8px !important; box-shadow: none !important; width: fit-content !important}:root:root body #study-root .sv-done{ text-align: center !important; padding: 26px 10px !important}:root:root body #study-root .sv-trophy{ font-size: 58px !important}:root:root body #study-root .sv-done h3{ font-size: 20px !important; color: #3f3730 !important; margin: 10px 0 6px !important}:root:root body #study-root .sv-done p{ font-size: 13px !important; color: #8a8073 !important; margin-bottom: 16px !important}:root:root body #study-root .sv-empty{ text-align: center !important; padding: 36px 16px !important; color: #a49a8c !important; font-size: 14px !important}/* 强制白字：所有级别卡的标题/副标题/进度文字 */
:root:root body #study-root .sv-level-card,
:root:root body #study-root .sv-level-card .sv-lv-name,
:root:root body #study-root .sv-level-card .sv-lv-sub,
:root:root body #study-root .sv-level-card .sv-lv-meta,
:root:root body #study-root .sv-level-card .sv-lv-badge,
:root:root body #study-root .sv-level-card span{
  color: #fff !important}/* 位置计数（重度用户：随时知道学到哪） */
:root:root body #study-root .sv-count{
  font-size: 12px !important; color: #a49a8c !important;
  margin: -4px 0 10px !important; letter-spacing: .02em !important}/* ===== study-v2-search.css ===== */
/* ============================================================
 * study-v2-search.css —— 搜索框 / 全表列表 / 详情页补充样式
 * ============================================================ */

/* 搜索框 */
:root:root body #study-root .sv-searchbar{ margin: 0 0 12px !important}:root:root body #study-root .sv-searchbar input{
  width: 100% !important; min-height: 46px !important; border-radius: 14px !important;
  border: 1px solid rgba(107,87,64,.14) !important;
  padding: 0 14px !important; font-size: 14px !important;
  box-shadow: 0 2px 0 rgba(107,87,64,.06) !important;
  -webkit-appearance: none; appearance: none}:root:root body #study-root .sv-searchbar input::placeholder{ color: #b3a89b !important; font-size: 13px !important}/* 列表行：单词 / 语法 */
:root:root body #study-root .sv-row{
  display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 6px !important;
  width: 100% !important; text-align: left !important; min-height: 52px !important;
  padding: 11px 14px !important; margin: 0 0 8px !important; border-radius: 14px !important;
  border: 1px solid rgba(107,87,64,.10) !important; background: #fff !important;
  box-shadow: 0 1px 0 rgba(107,87,64,.06) !important; color: #3f3730 !important}:root:root body #study-root .sv-row b{
  font-size: 15.5px !important}:root:root body #study-root .sv-row i{
  font-size: 12.5px !important; font-style: normal !important}:root:root body #study-root .sv-row em{
  font-size: 12.5px !important; font-style: normal !important;
  width: 100% !important; margin-top: 2px !important; line-height: 1.4 !important}:root:root body #study-root .sv-row:active{ transform: translateY(1px)}/* 详情页里的相关语法标题 */
:root:root body #study-root .sv-section-title{ margin-top: 16px !important}

/* 深色适配 */
@media (prefers-color-scheme: dark) {:root:root body #study-root .sv-searchbar input{ background: #2a2622 !important; color: #ece7df !important; border-color: rgba(255,255,255,.10) !important}:root:root body #study-root .sv-row{ background: #2a2622 !important; border-color: rgba(255,255,255,.08) !important}:root:root body #study-root .sv-row b{ color: #ece7df !important}:root:root body #study-root .sv-row i{ color: #b8ae9f !important}:root:root body #study-root .sv-row em{ color: #a9a3e8 !important}
}/* ===== practice-v4.css ===== */
/* ============================================================================
 * practice-v4.css —— 重写练习模块的样式
 *   复用既有设计令牌（--sp-* / --rd-* / --fs-* / --grad-full / --tx-*）
 *   重点：题干与选项不重叠；播放按钮不缩放（不会压住文字）
 * ==========================================================================*/

:root:root body #p4-root{
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-6) + env(safe-area-inset-bottom))}/* ---------- 顶部 ---------- */
:root:root body .p4-head{ display: flex; align-items: baseline; justify-content: space-between; margin: var(--sp-2) 0 var(--sp-3)}/* ---------- 题型选择 ---------- */
:root:root body .p4-modes{ display: flex; flex-direction: column; gap: var(--sp-2)}:root:root body .p4-mode{ flex-direction: column; gap: 3px;
  box-shadow: var(--sh-1) !important}/* ---------- 答题顶栏与进度 ---------- */
:root:root body .p4-bar{ display: flex; align-items: center; justify-content: space-between; margin: var(--sp-2) 0 var(--sp-2)}:root:root body .p4-back{ box-shadow: none !important}/* ---------- 题干 ---------- */
:root:root body .p4-q{
  padding: var(--sp-4) 0 var(--sp-3); text-align: center;
  font-size: 19px; color: var(--tx-1); line-height: 1.7; word-break: break-word}/* ---------- 播放按钮：只做光晕，不缩放（不会压住下方文字） ---------- */
:root:root body .p4-play{
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  margin: var(--sp-1) auto var(--sp-4) !important; padding: 0 22px !important;
  min-height: 48px !important; border-radius: 999px !important; border: 0 !important;
  color: #fff !important; font-size: var(--fs-btn) !important;
  background-image: var(--grad-full) !important;
  box-shadow: 0 3px 0 rgba(126,92,140,.32), 0 8px 20px rgba(150,130,190,.26) !important}:root:root body .p4-play.p4-glow{ animation: p4Glow 1s ease-in-out infinite !important}
@keyframes p4Glow {0%,100%{ box-shadow: 0 3px 0 rgba(126,92,140,.32), 0 8px 20px rgba(150,130,190,.26)}50%{ box-shadow: 0 3px 0 rgba(126,92,140,.32), 0 12px 30px rgba(160,130,210,.46)}
}:root:root body .p4-q-audio{ display: flex; flex-direction: column; align-items: center; gap: var(--sp-2)}/* ---------- 选项 ---------- */
:root:root body .p4-opts{ display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2)}:root:root body .p4-opt{ flex-direction: column !important;
  width: 100%}:root:root body .p4-opt .p4-opt-sub{ font-size: var(--fs-sm); color: var(--tx-2); margin-top: 2px}:root:root body .p4-opt.ok{ background-image: linear-gradient(100deg, #bfe8c8, #d6f0dd) !important}:root:root body .p4-opt.bad{ background-image: linear-gradient(100deg, #f6d6dc, #fbe4e8) !important}:root:root body .p4-opt[disabled]{ opacity: .96}/* ---------- 输入型 ---------- */
:root:root body .p4-input{
  width: 100%; min-height: 54px; padding: 0 var(--sp-4);
  font-size: 17px; color: var(--tx-1);
  border-radius: var(--rd-md); border: 1px solid rgba(107,87,64,.18);
  background: #fffdfa}:root:root body .p4-input:focus{ outline: 2px solid #8f8ce0; outline-offset: 1px}:root:root body .p4-submit.ok{ background-image: linear-gradient(100deg, #9ed7ae, #c8ebd4) !important}:root:root body .p4-submit.bad{ background-image: linear-gradient(100deg, #e8aeb8, #f3c9d1) !important}/* ---------- 结算 ---------- */
:root:root body .p4-result{ text-align: center; padding: var(--sp-6) var(--sp-4)}:root:root body .p4-rscore{ font-size: 46px; color: var(--tx-1); line-height: 1.2}:root:root body .p4-rpct{ font-size: var(--fs-body); color: var(--tx-2); margin: var(--sp-2) 0 var(--sp-5)}:root:root body .p4-again, :root:root body .p4-menu{
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 100%; min-height: 50px; margin-bottom: var(--sp-2);
  border-radius: 999px !important; font-size: var(--fs-btn) !important}:root:root body .p4-again{ border: 0 !important; color: #fff !important; background-image: var(--grad-full) !important; box-shadow: 0 3px 0 rgba(126,92,140,.32) !important}:root:root body .p4-menu{ border: 1px solid rgba(107,87,64,.15) !important; background: #fffdfa !important; color: var(--tx-1) !important}/* 暗色 */
html[data-theme="dark"] #p4-root .p4-mode,
html[data-theme="dark"] #p4-root .p4-opt{ background-image: none !important; background-color: rgba(255,255,255,.06) !important; color: #ece7e2 !important}html[data-theme="dark"] #p4-root .p4-q,
html[data-theme="dark"] #p4-root .p4-title,
html[data-theme="dark"] #p4-root .p4-count{ color: #ece7e2 !important}html[data-theme="dark"] #p4-root .p4-input{ background: rgba(255,255,255,.06); color: #ece7e2}/* 按级别组卷 */
:root:root body .p4-levels{ margin: 12px 0 10px}:root:root body .p4-lk{ letter-spacing: .04em}:root:root body .p4-lrow{ display: flex !important}:root:root body .p4-lv{
  flex: 1; display: flex !important; flex-direction: column; align-items: center; justify-content: center !important;
  gap: 2px; background: #fffdfa}:root:root body .p4-lv span{ font-size: 10.5px}/* --- v4.1 排版调优：向主流学习 app 靠齐（一次一题 / 大字 / 等距选项 / 清晰层级） --- */
:root:root body .p4-bar{
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 8px; margin-bottom: 6px}:root:root body .p4-count{ font-size: 12px; color: var(--tx-2); letter-spacing: .02em}:root:root body .p4-score{ font-size: 12px; color: #8f8ce0}:root:root body .p4-back{
  font-size: 12.5px; color: #8a8073 !important; background: transparent !important; border: 0 !important;
  min-height: 30px !important; padding: 0 2px !important}:root:root body .p4-prog{ height: 4px; border-radius: 999px; background: rgba(107,87,64,.08); overflow: hidden; margin-bottom: 16px}:root:root body .p4-prog i{ display: block; height: 100%; border-radius: 999px;
  background-image: linear-gradient(90deg, #d98ab8, #8f8ce0); transition: width .3s ease}:root:root body .p4-q{
  font-size: 20px !important; line-height: 1.5 !important; color: var(--tx-1) !important;
  text-align: center !important; margin: 10px 0 6px !important}:root:root body .p4-q .p4-ico{ font-size: 40px}:root:root body .p4-sub2{ font-size: 12px !important; color: var(--tx-2) !important; text-align: center; margin-top: 6px}:root:root body .p4-passage{
  font-size: 15px; line-height: 1.85; color: var(--tx-1);
  padding: 14px 16px; border-radius: 14px; background: #fffdfa;
  border: 1px solid rgba(107,87,64,.10); margin: 8px 0 10px}:root:root body .p4-opts{ display: flex !important; flex-direction: column !important; gap: 10px !important; margin-top: 16px}:root:root body .p4-opt{
  min-height: 54px !important; padding: 14px 16px !important;
  display: flex !important; align-items: center !important; justify-content: flex-start !important;
  text-align: left !important; font-size: 15px !important; line-height: 1.45;
  border-radius: 14px !important; border: 1px solid rgba(107,87,64,.14) !important;
  background: #fffdfa !important; color: var(--tx-1) !important;
  box-shadow: 0 1px 2px rgba(78,60,48,.04)}:root:root body .p4-opt-sub{ font-size: 11.5px; color: var(--tx-2); margin-left: 6px}:root:root body .p4-opt.ok{ border-color: rgba(90,180,140,.55) !important; background: rgba(226,247,238,.75) !important}:root:root body .p4-opt.bad{ border-color: rgba(226,120,120,.55) !important; background: rgba(253,236,236,.75) !important}:root:root body .p4-opts-2{ flex-direction: row !important}:root:root body .p4-opts-2 .p4-opt{ flex: 1; justify-content: center !important; text-align: center !important; min-height: 58px !important}:root:root body .p4-play{
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: 6px; width: fit-content; margin: 4px auto 0; min-height: 40px; padding: 0 18px !important;
  border-radius: 999px !important; border: 1px solid rgba(143,140,224,.30) !important;
  background: rgba(143,140,224,.08) !important; color: #6f6cc0 !important; font-size: 13px}:root:root body .p4-shown{
  font-size: 19px !important; text-align: center; color: var(--tx-1);
  margin: 14px 0 4px; padding: 16px; border-radius: 14px; background: #fffdfa;
  border: 1px dashed rgba(107,87,64,.16)}:root:root body .p4-built{
  min-height: 56px; display: flex !important; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 10px; border-radius: 14px; background: #fffdfa; border: 1px dashed rgba(107,87,64,.16)}:root:root body .p4-pool{ display: flex !important; flex-wrap: wrap; gap: 8px; margin: 14px 0}:root:root body .p4-chunk{
  min-height: 42px; padding: 0 14px !important; border-radius: 999px !important;
  border: 1px solid rgba(107,87,64,.16) !important; background: #fffdfa !important;
  color: var(--tx-1) !important; font-size: 14px}:root:root body .p4-submit{
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 100%; min-height: 52px; margin-top: 8px; border: 0 !important; border-radius: 999px !important;
  color: #fff !important; font-size: 15px;
  background-image: linear-gradient(100deg, #d98ab8 0%, #8f8ce0 52%, #62c0dd 100%);
  box-shadow: 0 3px 0 rgba(126,92,140,.30) !important}:root:root body .p4-result{ text-align: center; padding: 18px 8px}/* --- v4.2 多邻国风：级别按钮配色 + 分组卡片（与课程页 study-v2 统一） --- */
:root:root body .p4-levels{ margin: 14px 0 12px}:root:root body .p4-lk{ font-size: 13px; color: #3f3730; margin-bottom: 10px}:root:root body .p4-lrow{ gap: 10px !important}:root:root body .p4-lv{
  min-height: 74px !important; border-radius: 18px !important; border: 0 !important;
  color: #fff !important; font-size: 17px !important;
  box-shadow: 0 5px 0 rgba(0,0,0,.16), 0 8px 18px rgba(0,0,0,.08)}:root:root body .p4-lv[data-lv="N5"]{ background-image: linear-gradient(135deg, #58cc8f, #3fa96f) !important; box-shadow: 0 5px 0 #2c8a56, 0 8px 18px rgba(58,160,110,.22)}:root:root body .p4-lv[data-lv="N4"]{ background-image: linear-gradient(135deg, #ffc53d, #f0a428) !important; box-shadow: 0 5px 0 #cf8815, 0 8px 18px rgba(240,164,40,.22)}:root:root body .p4-lv[data-lv="N3"]{ background-image: linear-gradient(135deg, #a78bfa, #7c6ce0) !important; box-shadow: 0 5px 0 #5d4ec4, 0 8px 18px rgba(124,108,224,.22)}:root:root body .p4-lv span{ color: rgba(255,255,255,.9) !important}/* 分组卡片 */
:root:root body .p4-groups{ display: flex !important; flex-direction: column !important; gap: 14px !important; margin-top: 6px}:root:root body .p4-group{
  background: #fffdfa; border: 1px solid rgba(107,87,64,.10); border-radius: 20px; padding: 16px 14px;
  box-shadow: 0 2px 0 rgba(107,87,64,.07)}:root:root body .p4-gtitle{ font-size: 16px !important; color: #3f3730; display: flex; align-items: baseline; gap: 8px}:root:root body .p4-gen{ font-size: 11px; color: #a49a8c; letter-spacing: .03em; text-transform: uppercase}:root:root body .p4-gdesc{ font-size: 12px; color: #a49a8c; margin: 4px 0 12px}:root:root body .p4-gitems{ display: flex !important; flex-direction: column !important; gap: 8px !important}:root:root body .p4-mode{
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  width: 100%; min-height: 58px !important; padding: 10px 14px !important;
  border-radius: 14px !important; border: 1px solid rgba(107,87,64,.12) !important;
  background: #fff !important; text-align: left !important}:root:root body .p4-mode b{ font-size: 15px !important; color: #3f3730 !important}:root:root body .p4-mode span{ display: block; font-size: 11.5px; color: #a49a8c; margin-top: 2px; max-width: 260px}:root:root body .p4-tip{ font-size: 12px !important; color: #a49a8c !important; text-align: center; margin-top: 14px; line-height: 1.6}:root:root body .p4-head{ margin-bottom: 4px}:root:root body .p4-title{ font-size: 22px !important; color: #3f3730 !important}:root:root body .p4-sub{ font-size: 12.5px; color: #a49a8c; margin-left: 8px}