/* ============================================================================
   词老大英语 · 单元页（36.html）视觉主题
   ----------------------------------------------------------------------------
   风格：皮克斯式 3D 渲染 / 柔光棚拍 / 圆润玩具质感 / 电影感层次
   约束：纯视觉层，不改任何 JS 与 DOM 结构，不改变交互逻辑与信息架构。

   ⚠️ 关键红线（改样式前必读）
   1. .word-card 的 display 由 JS 内联切换（当前卡 block / 其它卡 none），
      任何 display 覆盖都不许用 !important，否则会把隐藏卡片全部显形。
   2. #word-nav 的开合由 JS 内联 left:0 / -200px 控制 → 面板宽度必须 ≤190px。
   3. .word-letters 内 .word-cursor 的 left 由 JS 按 getBoundingClientRect 计算，
      不要给 .word-letters / 字母 span 加 transform，否则光标会错位。
   4. .word-card 上已有 transform（body.loaded），不要再叠加 transform/filter，
      以免影响将来可能挂在卡内的 fixed 元素。
   ========================================================================== */

/* ==========================================================================
   0. 端侧分流
   --------------------------------------------------------------------------
   本主题只在桌面端（≥768px）生效；移动端（<768px）整体回退 comm/words.css
   原始样式（旧样式在 ≤768/≤480 断点本就有紧凑的音块与音标档位）。
   文件末尾「18. 移动端微调」是回退后仅剩的移动端覆盖（缩小音标胶囊）。
   ========================================================================== */
@media (min-width: 768px) {
/* ---------------------------------------------------------------------------
   1. 设计令牌
   ------------------------------------------------------------------------ */
:root {
    /* 墨色与文字 */
    --px-ink: #12354f;
    --px-ink-2: #25455e;
    --px-ink-3: #3c5f77;
    --px-muted: #7d95a6;

    /* 品牌绿（沿用站点主色，不换品牌） */
    --px-brand: #28977e;
    --px-brand-lt: #46bd9f;
    --px-brand-dk: #1b7261;
    --px-brand-tint: rgba(40, 151, 126, 0.12);

    /* 场景光：冷调薄荷 + 暖调奶油（皮克斯式冷暖互补棚光） */
    --px-sky: #e9f7f3;
    --px-sky-2: #dff1fb;
    --px-cream: #fdf3e6;
    --px-warm: #ff9f43;
    --px-warm-lt: #ffc861;
    --px-coral: #ff7b6b;
    --px-grape: #9b7bf0;
    --px-lemon: #ffd35c;

    /* 语义色 */
    --px-ok: #2fb673;
    --px-err: #e8563f;

    /* 圆角阶梯：玩具感的胖圆角 */
    --px-r-xs: 12px;
    --px-r-sm: 16px;
    --px-r-md: 22px;
    --px-r-lg: 30px;
    --px-r-xl: 38px;
    --px-r-pill: 999px;

    /* 动效：柔软落定 + 回弹按压 */
    --px-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --px-ease-press: cubic-bezier(0.18, 0.72, 0.28, 1.24);

    /* 阴影语法：接触影 + 环境影 + 顶部高光 */
    --px-hl: inset 0 1px 0 rgba(255, 255, 255, 0.92);
    --px-shadow-slab:
        var(--px-hl),
        inset 0 -3px 0 -1px rgba(18, 53, 79, 0.045),
        0 30px 60px -26px rgba(16, 74, 63, 0.42),
        0 12px 26px -16px rgba(16, 74, 63, 0.26),
        0 0 0 1px rgba(16, 74, 63, 0.055);
    --px-shadow-chip:
        var(--px-hl),
        0 10px 20px -12px rgba(18, 53, 79, 0.42),
        0 0 0 1px rgba(18, 53, 79, 0.06);
}

/* ---------------------------------------------------------------------------
   2. 舞台：电影感底色 + 柔和光斑 + 极细胶片颗粒
   ------------------------------------------------------------------------ */
html {
    background:
        radial-gradient(120% 90% at 50% -10%, #ffffff 0%, rgba(255, 255, 255, 0) 46%),
        linear-gradient(168deg, #eaf8f4 0%, #eef6fb 42%, #fdf5ea 100%);
    background-attachment: fixed;
    min-height: 100%;
}

body {
    background: transparent;
    color: var(--px-ink-2);
    padding: 18px 0 48px;
    font-family: system-ui, -apple-system, 'Segoe UI', 'PingFang SC',
        'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

/* 背景光斑：四团柔光，模拟棚拍灯位 */
body::before {
    content: '';
    position: fixed;
    inset: -12%;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(34% 28% at 10% 6%, rgba(70, 189, 159, 0.46), transparent 68%),
        radial-gradient(28% 24% at 92% 8%, rgba(255, 196, 88, 0.52), transparent 68%),
        radial-gradient(40% 34% at 84% 92%, rgba(96, 166, 240, 0.34), transparent 70%),
        radial-gradient(30% 26% at 12% 88%, rgba(255, 143, 122, 0.30), transparent 70%);
    filter: blur(6px);
}

/* 胶片颗粒：0.045 不透明度，只增质感不抢内容 */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 140px 140px;
}

/* 顶栏改为悬浮胶囊，给内容让出呼吸位 */
body.has-topbar { padding-top: 78px; }

/* ---------------------------------------------------------------------------
   3. 顶栏（nav.js 注入）
   ------------------------------------------------------------------------ */
.topbar {
    left: 10px;
    right: 10px;
    top: 8px;
    height: 50px;
    border-radius: var(--px-r-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(246, 252, 251, 0.88));
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow:
        var(--px-hl),
        0 14px 30px -18px rgba(16, 74, 63, 0.55),
        0 0 0 1px rgba(16, 74, 63, 0.05);
}

.topbar .topbar-name {
    color: var(--px-ink);
    font-weight: 700;
    letter-spacing: 0.3px;
}

.topbar .topbar-logo img {
    border-radius: 10px;
    filter: drop-shadow(0 3px 5px rgba(16, 74, 63, 0.22));
}

.topbar .topbar-qr > img {
    border-radius: 9px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 3px 8px -3px rgba(16, 74, 63, 0.4);
}

.topbar .topbar-user {
    border-radius: var(--px-r-pill);
    padding: 7px 15px;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(180deg, var(--px-brand-lt), #2a9c82);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 3px 0 var(--px-brand-dk), 0 8px 16px -8px rgba(27, 114, 97, 0.7);
}

.topbar .topbar-user:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 0 var(--px-brand-dk), 0 12px 20px -10px rgba(27, 114, 97, 0.8);
}

.topbar .topbar-user:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--px-brand-dk), 0 4px 10px -6px rgba(27, 114, 97, 0.6);
}

.topbar .topbar-user .topbar-user-icon { color: #fff; }

.topbar .topbar-qr-big {
    border-radius: var(--px-r-sm);
    box-shadow: 0 20px 40px -18px rgba(16, 74, 63, 0.6), 0 0 0 1px rgba(16, 74, 63, 0.08);
    border: 3px solid #fff;
}

/* ---------------------------------------------------------------------------
   4. 加载动画：暗场 + 聚光 + 糖果进度条
   ------------------------------------------------------------------------ */
.loader-container {
    background:
        radial-gradient(58% 46% at 50% 34%, #35a288 0%, #1e765f 52%, #10453a 100%);
}

.loader-container::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(75% 60% at 50% 42%, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.34) 100%);
}

.loading-text {
    font-size: 30px;
    letter-spacing: 3px;
    color: #fffdf7;
    text-shadow:
        0 1px 0 #ffffff,
        0 3px 0 #1a6a56,
        0 14px 30px rgba(0, 0, 0, 0.42),
        0 0 34px rgba(255, 220, 160, 0.32);
    animation: pxBreathe 2.6s var(--px-ease) infinite;
}

@keyframes pxBreathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.035); }
}

.progress-container {
    width: 268px;
    height: 14px;
    border-radius: var(--px-r-pill);
    background: rgba(3, 34, 28, 0.58);
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.18);
    overflow: hidden;
}

.progress-bar {
    border-radius: var(--px-r-pill);
    background: linear-gradient(90deg, #ffe6ad 0%, var(--px-warm-lt) 42%, var(--px-warm) 100%);
    box-shadow:
        0 0 16px rgba(255, 190, 90, 0.8),
        inset 0 2px 0 rgba(255, 255, 255, 0.75),
        inset 0 -3px 0 rgba(180, 100, 10, 0.22);
}

.progress-percentage {
    margin-top: 14px;
    font-size: 13px;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.82);
}

/* ---------------------------------------------------------------------------
   5. 单词卡片：玩具厚板（核心）
   ------------------------------------------------------------------------ */
#word-container {
    padding: 0 12px;
}

.word-card {
    position: relative; /* 供卡片右上角的 PK 角标定位（无 fixed 后代，安全） */
    width: 100%;
    max-width: 940px;
    margin: 0 auto 26px;
    padding: 24px 24px 22px;
    border-radius: var(--px-r-lg);
    background-image:
        radial-gradient(130% 74% at 4% -14%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 58%),
        linear-gradient(180deg, #ffffff 0%, #fbfdfd 46%, #eef6f4 100%);
    border: 2px solid #ffffff;
    box-shadow: var(--px-shadow-slab);
}

/* ---------------------------------------------------------------------------
   6. 配图：棚拍台座 + 落地接触影
   ------------------------------------------------------------------------ */
.word-media1 {
    /* 台座尺寸加载前钉死（=512*512 方图按 max-height 的定格尺寸）：
       图片加载时容器一格不动，只做原位淡入，不再从左上角放大 */
    width: 290px;
    height: 290px;
    margin: 0 auto 12px;
    padding: 0; /* 图片统一 512*512 后台座被完全盖住，不再露出内衬背景 */
    border-radius: var(--px-r-md);
    /* 背景改纯白：原绿色渐变的设计前提是「图片完全盖住台座」，
       遇到非正方形图（如垃圾桶）盖不满时右侧/底部会露出绿色雾块，
       观感像贴了块脏色 —— 统一纯白，图片外区域与卡片融为一体 */
    background: #ffffff;
   /* box-shadow: 0 14px 26px -20px rgba(16, 74, 63, 0.5);*/
}

/* 图片由 absolute 改回常规流：高度回归自然比例，不再被容器硬撑 */
.word-image {
    position: static;
    /* 覆盖 functions.js 内联的 width:100%：按图片真实比例收缩，台座才能贴住它 */
    width: auto !important;
    max-width: 100%;
    height: auto;
    top: auto;
    left: auto;
    max-height: 290px;
    object-fit: contain;
    border-radius: var(--px-r-md);
    filter: drop-shadow(0 14px 18px rgba(14, 62, 53, 0.28));
}

/* 台座已被图片完全覆盖，接触影失去落点，隐藏 */
.word-media1::after {
    display: none;
}

/* ---------------------------------------------------------------------------
   7. 单词与元信息
   ------------------------------------------------------------------------ */
.word-header {
    /* 保持 relative：JS 把 PK 按钮内联 top:-5px;right:-5px 插在 header 右上角，
       这是原始产品设计位（词头区域顶部留白，不压配图）。
       桌面端 header 由 flex 容器身份成为 BFC 避让左浮动配图，relative 不影响 BFC。 */
    position: relative;
    display: block;
    margin-bottom: 14px;
    padding-bottom: 0;
    text-align: center;
}

/* 去掉原来那条横贯卡片的生硬蓝线 */
.word-header::after { display: none; }

.word-and-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.word-text {
    font-size: clamp(2.5rem, 6vw, 3.6rem);
    line-height: 1.16;
    color: var(--px-ink);
    background: transparent;
    padding: 0 4px 6px;
    border-radius: 0;
    letter-spacing: 0.5px;

}

.word-letters { padding-bottom: 4px; }

/* 音节拆分：柔和的辅助墨色，弱于主词 */
.word-syllable {
    color: var(--px-muted, #7d95a6);
    letter-spacing: 3px;
    font-size: 1.15em;
}

.word-letters .letter-hidden { transform: translateY(-6px) scale(0.92); }

.word-cursor {
    width: 4px;
    border-radius: var(--px-r-pill);
    background-color: var(--px-brand);
    box-shadow: 0 0 12px rgba(70, 189, 159, 0.9);
}

.meta-info { gap: 12px; }

.phonetic-translation-container { gap: 12px; }

/* 音标胶囊：糖果壳 */
.phonetic-pills-container { gap: 12px; }

.phonetic-pill {
    gap: 9px;
    padding: 7px 10px 7px 7px;
    border-radius: var(--px-r-pill);
    background: linear-gradient(180deg, #ffffff 0%, #edf6fa 100%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: var(--px-shadow-chip);
    transition: transform 0.24s var(--px-ease), box-shadow 0.24s var(--px-ease);
}

.phonetic-pill:hover {
    transform: translateY(-2px);
    box-shadow:
        var(--px-hl),
        0 14px 24px -12px rgba(18, 53, 79, 0.5),
        0 0 0 1px rgba(18, 53, 79, 0.06);
}

.pill-label {
    width: 26px;
    height: 26px;
    font-size: 13px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -2px 0 rgba(0, 0, 0, 0.16),
        0 4px 10px -3px rgba(18, 53, 79, 0.45);
}

.uk-label { background: linear-gradient(180deg, #63b0f6, #2f7fd6); }
.us-label { background: linear-gradient(180deg, #ff8f80, #dd5346); }

.pill-phonetic {
    font-size: 1rem;
    font-weight: 700;
    color: var(--px-ink-2);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.pill-audio-wrapper {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 26%, #ffffff, #e6f2f8);
    box-shadow:
        inset 0 1px 0 #ffffff,
        0 3px 8px -2px rgba(18, 53, 79, 0.35);
}

.pill-audio-icon { width: 20px; height: 20px; }

.pill-audio-wrapper::before,
.pill-audio-wrapper::after { border-color: rgba(70, 189, 159, 0.55); }

/* 释义：奶油色小挂牌 */
.translation {
    padding: 8px 22px;
    border-radius: var(--px-r-pill);
    font-size: 1.06rem;
    font-weight: 700;
    color: #8a5410;
    background: linear-gradient(180deg, #fffdf6 0%, #ffe9c6 100%);
    box-shadow:
        inset 0 1px 0 #ffffff,
        inset 0 -3px 0 rgba(196, 138, 40, 0.1),
        0 8px 18px -12px rgba(196, 138, 40, 0.7),
        0 0 0 1px rgba(255, 196, 110, 0.5);
}

/* 助记牌 */
.mnemonic {
    padding: 10px 18px;
    border-radius: var(--px-r-md);
    background: linear-gradient(180deg, #fff8ec 0%, #ffe6c4 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: var(--px-shadow-chip);
}

.mnemonic-label {
    border-radius: var(--px-r-pill);
    background: linear-gradient(180deg, var(--px-warm-lt), var(--px-warm));
    color: #5a3200;
}

/* ---------------------------------------------------------------------------
   8. 例句 / 短文（会员区）
   ------------------------------------------------------------------------ */
.sentences-container { margin-top: 6px; }

.sentence-item {
    padding: 12px 16px;
    margin-bottom: 10px;
    border-radius: var(--px-r-sm);
    background: linear-gradient(180deg, #ffffff 0%, #f3f9f8 100%);
    box-shadow:
        var(--px-hl),
        0 10px 20px -16px rgba(16, 74, 63, 0.55),
        0 0 0 1px rgba(16, 74, 63, 0.055);
}

.sentence-item:hover {
    background: linear-gradient(180deg, #ffffff 0%, #e9f6f2 100%);
    box-shadow:
        var(--px-hl),
        0 14px 24px -16px rgba(16, 74, 63, 0.6),
        0 0 0 1px rgba(40, 151, 126, 0.16);
}

.sentence-number {
    width: 22px;
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    background: linear-gradient(180deg, var(--px-brand-lt), var(--px-brand));
    box-shadow: 0 3px 8px -2px rgba(27, 114, 97, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.sentence-text {
    font-size: 15.5px;
    font-weight: 500;
    color: var(--px-ink-2);
}

.sentence-translation { color: var(--px-muted); }

.sentence-trans-toggle { color: var(--px-muted); }
.sentence-trans-toggle:hover { color: var(--px-brand); }

/* 例句里被挖空的目标词：玩具黄色贴纸 */
.sentence-word-highlight {
    padding: 0 4px;
    border-radius: 7px;
    color: #7a4a06;
    background: linear-gradient(180deg, #fff1ad, #ffd95e);
    box-shadow: inset 0 -2px 0 rgba(180, 120, 10, 0.16);
}

.sentence-word-clickable { border-radius: 6px; }

.sentence-word-clickable:hover {
    background-color: rgba(70, 189, 159, 0.26);
    box-shadow: 0 2px 0 rgba(27, 114, 97, 0.3);
}

/* 短文卡 */
.passage-header {
    border-radius: var(--px-r-md) !important;
    background: linear-gradient(180deg, var(--px-brand-lt), #23866f) !important;
    box-shadow:
        var(--px-hl),
        0 4px 0 var(--px-brand-dk),
        0 16px 26px -18px rgba(27, 114, 97, 0.8);
}

.passage-text {
    border-left: 5px solid var(--px-brand-lt) !important;
    border-radius: var(--px-r-sm) !important;
    background: linear-gradient(180deg, #ffffff, #f4faf9) !important;
    box-shadow: var(--px-hl), 0 0 0 1px rgba(16, 74, 63, 0.055);
}

.passage-translation {
    border-radius: var(--px-r-sm) !important;
    border: 1px solid rgba(16, 74, 63, 0.08) !important;
    background: #fbfdfd !important;
    color: var(--px-ink-3) !important;
}

/* 朗读图标按钮：糖果圆钮（44px 触摸目标） */
.tts-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 26%, #ffffff, #e8f4f8);
    box-shadow: var(--px-shadow-chip);
    transition: transform 0.2s var(--px-ease-press), box-shadow 0.2s var(--px-ease);
}

.tts-icon-btn:hover { transform: translateY(-2px); }
.tts-icon-btn:active { transform: translateY(1px) scale(0.96); }
.tts-icon { width: 24px; height: 24px; }

.sentence-line .sentence-play-btn { margin-top: 0; }
/* 串词成句：播放按钮内联挂在短文开头，与文字同排、不占独立布局宽 */
.passage-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 0 10px 0 0;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   9. 拼读区：控制按钮 + 字母积木
   ------------------------------------------------------------------------ */
.phoneme-mapping { gap: 12px; }

.control-bar {
    gap: 12px;
    margin: 4px 0 6px;
    flex-wrap: wrap;
    padding: 0 4px;
}

.control-center { gap: 12px; flex-wrap: wrap; justify-content: center; }

/* 积木式主按钮：底唇 + 按压下沉（min-height 保证 44px 触摸目标） */
.control-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 22px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--px-r-pill);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #fff !important;
    background: linear-gradient(180deg, var(--px-brand-lt), #27997f);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 4px 0 var(--px-brand-dk),
        0 14px 22px -12px rgba(27, 114, 97, 0.85);
    transition: transform 0.18s var(--px-ease-press), box-shadow 0.18s var(--px-ease-press);
}

.control-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 6px 0 var(--px-brand-dk),
        0 18px 26px -14px rgba(27, 114, 97, 0.9);
}

.control-btn:active {
    transform: translateY(3px);
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.22),
        0 1px 0 var(--px-brand-dk),
        0 4px 10px -6px rgba(27, 114, 97, 0.7);
}

/* 洗脑模式：暖橙 */
.control-btn.crazy-btn {
    background: linear-gradient(180deg, #ffb163, #f0821f);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 4px 0 #c05f0d,
        0 14px 22px -12px rgba(192, 95, 13, 0.85);
}

.control-btn.crazy-btn:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 6px 0 #c05f0d,
        0 18px 26px -14px rgba(192, 95, 13, 0.9);
}

.control-btn.crazy-btn:active {
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.22),
        0 1px 0 #c05f0d,
        0 4px 10px -6px rgba(192, 95, 13, 0.7);
}

/* 训练 / 词形义 / 例句测试按钮：统一到品牌绿玩具语言 */
.control-btn.train-btn,
.control-btn.suite-btn,
.control-btn.test-btn {
    background: linear-gradient(180deg, var(--px-brand-lt), #27997f);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 4px 0 var(--px-brand-dk),
        0 14px 22px -12px rgba(27, 114, 97, 0.85);
    border-radius: var(--px-r-pill);
    padding: 10px 20px;
}

.control-btn.train-btn:hover,
.control-btn.suite-btn:hover,
.control-btn.test-btn:hover {
    background: linear-gradient(180deg, #55c9ab, #2aa288);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 6px 0 var(--px-brand-dk),
        0 18px 26px -14px rgba(27, 114, 97, 0.9);
    transform: translateY(-2px);
}

.control-btn.train-btn.active,
.control-btn.test-btn.active {
    background: linear-gradient(180deg, #ffc061, #f0921f);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 3px 0 #c05f0d,
        0 12px 20px -12px rgba(192, 95, 13, 0.8);
}

/* 字母积木 */
.pairs-container {
    gap: 10px;
    padding: 8px 0 20px;
    flex-wrap: wrap;
}

.mapping-pair {
    min-width: 64px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--px-r-sm);
    background: linear-gradient(180deg, #ffffff 0%, #eef6fa 100%);
    box-shadow: var(--px-shadow-chip);
    transition: transform 0.22s var(--px-ease), box-shadow 0.22s var(--px-ease);
}

/* 旧的顶部高光条与新的内高光重复，去掉 */
.mapping-pair::before { display: none; }

.mapping-pair:hover {
    background: linear-gradient(180deg, #ffffff 0%, #e4f4f0 100%);
    transform: translateY(-3px);
    box-shadow:
        var(--px-hl),
        0 16px 26px -12px rgba(16, 74, 63, 0.5),
        0 0 0 1px rgba(40, 151, 126, 0.18);
}

/* 当前音块：抬起 + 暖光聚焦 */
.mapping-pair.active {
    background: linear-gradient(180deg, #fffaf0 0%, #ffe4b8 100%);
    transform: translateY(-5px) scale(1.045);
    box-shadow:
        inset 0 1px 0 #ffffff,
        0 16px 26px -12px rgba(214, 140, 40, 0.75),
        0 0 0 2px rgba(255, 186, 96, 0.95),
        0 0 30px rgba(255, 196, 110, 0.45);
}

.grapheme {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--px-ink);
    text-shadow: 0 1px 0 #ffffff, 0 2px 0 rgba(18, 53, 79, 0.12);
}

.phoneme {
    margin-top: 2px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #d97a1c;
}

/* 音块的播放角标：裸播图标（display 由 JS 内联切换，这里只改外观）。
   不加底色和阴影——小圆钮原带白色圆底+投影，会盖住本块的音素文字。 */
.video-icon {
    bottom: -19px;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    font-size: 14px;
    color: var(--px-brand);
    background: none;
    box-shadow: none;
}

.video-icon i { filter: none; }

/* ---------------------------------------------------------------------------
   10. 视频：影院画框
   ------------------------------------------------------------------------ */
.word-media {
    max-width: 620px;
    margin: 8px auto 0;
    padding: 8px;
    border-radius: var(--px-r-md);
    background: linear-gradient(180deg, #ffffff, #eef6f4);
    box-shadow: var(--px-shadow-chip);
}

.word-video {
    border: none;
    border-radius: var(--px-r-sm);
    background: #0d2430;
    box-shadow:
        0 18px 34px -20px rgba(13, 36, 48, 0.85),
        0 0 0 1px rgba(18, 53, 79, 0.12);
    filter: none;
}

.word-video:hover {
    box-shadow:
        0 24px 42px -20px rgba(13, 36, 48, 0.9),
        0 0 0 2px rgba(70, 189, 159, 0.5);
}

/* ---------------------------------------------------------------------------
   11. PK 按钮
   ------------------------------------------------------------------------ */
.pk-btn {
    border-radius: var(--px-r-pill) !important;
    background: linear-gradient(180deg, #ff8f80, #e4574a) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 4px 0 #b83c31,
        0 14px 22px -12px rgba(184, 60, 49, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
}

/* PK 定位恢复由 JS 内联值控制（以 .word-header 为基准，原始产品设计位）。
   之前用 !important 改锚到 .word-card 会把按钮压在配图角上，观感不和谐，已撤销。 */

/* ---------------------------------------------------------------------------
   12. 单词表：侧边拉手 + 抽屉
   ------------------------------------------------------------------------ */
#nav-trigger {
    width: 26px;
    height: 100px;
    border-radius: 0 var(--px-r-sm) var(--px-r-sm) 0;
    background: linear-gradient(180deg, var(--px-brand-lt), var(--px-brand-dk));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        6px 8px 20px -8px rgba(16, 74, 63, 0.65);
}

#nav-trigger::before {
    font-size: 12px;
    letter-spacing: 3px;
    color: #fff;
}

#nav-trigger:hover {
    background: linear-gradient(180deg, #57cbad, var(--px-brand));
}

/* ⚠️ 宽度必须 ≤190px：JS 收起时写死 left:-200px */
#word-nav {
    max-width: 190px;
    padding: 16px 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-radius: 0 var(--px-r-md) var(--px-r-md) 0;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-left: none;
    box-shadow:
        var(--px-hl),
        0 26px 50px -22px rgba(16, 74, 63, 0.6);
}

.nav-header {
    padding: 0 14px 12px;
    border-bottom: none;
    margin-bottom: 8px;
}

.nav-header span {
    font-size: 16px;
    font-weight: 800;
    color: var(--px-brand-dk);
}

#word-count-badge {
    border-radius: var(--px-r-pill);
    background: linear-gradient(180deg, var(--px-brand-lt), var(--px-brand));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 8px -2px rgba(27, 114, 97, 0.7);
}

#close-nav {
    border-radius: 50%;
    color: var(--px-muted);
    background: #f1f6f5;
    transition: all 0.25s var(--px-ease);
}

#close-nav:hover {
    color: #fff;
    background: var(--px-coral);
    transform: rotate(90deg);
}

.nav-toggle-bar {
    margin: 0 10px 10px;
    padding: 10px 12px;
    border-radius: var(--px-r-sm);
    border-bottom: none;
    background: linear-gradient(180deg, #f7fbfa, #eef7f5);
    box-shadow: inset 0 0 0 1px rgba(16, 74, 63, 0.05);
}

.toggle-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--px-ink-3);
}

.toggle-slider {
    border: none;
    background: #dbe6ea;
    box-shadow: inset 0 2px 5px rgba(16, 74, 63, 0.18);
}

.toggle-slider:before {
    box-shadow: 0 2px 6px rgba(16, 74, 63, 0.35);
    color: var(--px-muted);
}

.toggle-switch input:checked + .toggle-slider {
    background: linear-gradient(180deg, var(--px-brand-lt), var(--px-brand));
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.18);
}

.nav-items { max-height: 56vh; padding: 0 8px; }

.nav-item {
    display: flex;
    align-items: center;
    min-height: 42px;
    margin-bottom: 4px;
    padding: 9px 12px;
    border-radius: var(--px-r-xs);
    font-size: 14px;
    font-weight: 500;
    color: var(--px-ink-3);
    transition: all 0.2s var(--px-ease);
}

.nav-item:hover {
    background: rgba(70, 189, 159, 0.16);
    color: var(--px-brand-dk);
}

.nav-item.active {
    background: linear-gradient(180deg, var(--px-brand-lt), #27997f) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 3px 0 var(--px-brand-dk),
        0 10px 18px -10px rgba(27, 114, 97, 0.8);
}

/* ---------------------------------------------------------------------------
   13. 底部 Dock 与测试子菜单（仅微信小程序显示，保持一致语言）
   ------------------------------------------------------------------------ */
.sidebar {
    height: 66px;
    padding: 0 10px;
    border-radius: var(--px-r-md) var(--px-r-md) 0 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow:
        var(--px-hl),
        0 -14px 34px -18px rgba(16, 74, 63, 0.5);
}

.side-item .icon { color: #9db4c0; }
.side-item:hover .icon,
.side-item.active .icon { color: var(--px-brand); }
.side-item:hover .text,
.side-item.active .text { color: var(--px-brand-dk); }

.side-item.active::after {
    height: 4px;
    border-radius: var(--px-r-pill);
    background: linear-gradient(90deg, var(--px-brand-lt), var(--px-brand-dk));
}

.sub-menu {
    border-radius: var(--px-r-lg) var(--px-r-lg) 0 0;
    background: linear-gradient(180deg, #ffffff, #f4faf9);
    box-shadow: 0 -20px 44px -20px rgba(16, 74, 63, 0.55);
}

.sub-menu .side-item1,
.sub-menu .side-item2,
.sub-menu .side-item3,
.sub-menu .side-item4 {
    border-radius: var(--px-r-sm);
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: linear-gradient(180deg, #ffffff, #eff7f5);
    color: var(--px-ink-2);
    box-shadow: var(--px-shadow-chip);
}

.sub-menu .side-item1 i,
.sub-menu .side-item2 i,
.sub-menu .side-item3 i,
.sub-menu .side-item4 i { color: var(--px-brand); }

.sub-menu .side-item1:hover,
.sub-menu .side-item2:hover,
.sub-menu .side-item3:hover,
.sub-menu .side-item4:hover {
    background: linear-gradient(180deg, #ffffff, #e3f5f0);
    border-color: rgba(70, 189, 159, 0.5);
    color: var(--px-brand-dk);
    box-shadow: 0 16px 26px -14px rgba(27, 114, 97, 0.6);
}

.close-btn { background: #eef4f3; color: var(--px-muted); }
.close-btn:hover { background: #ffe3de; color: var(--px-err); }

/* ---------------------------------------------------------------------------
   14. 训练抽屉与答题卡
   ------------------------------------------------------------------------ */
.train-sheet {
    border-radius: var(--px-r-lg) var(--px-r-lg) 0 0;
    background: linear-gradient(180deg, #ffffff 0%, #f3faf8 100%);
    box-shadow: 0 -24px 54px -22px rgba(16, 74, 63, 0.6);
}

.train-sheet-handle {
    width: 46px;
    height: 5px;
    border-radius: var(--px-r-pill);
    background: rgba(18, 53, 79, 0.16);
}

.train-sheet-title { color: var(--px-ink); font-weight: 800; }
.train-sheet-sub { color: var(--px-muted); }

.train-sheet-card {
    border-radius: var(--px-r-md);
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: linear-gradient(180deg, #ffffff, #f1f8f7);
    box-shadow: var(--px-shadow-chip);
    transition: transform 0.22s var(--px-ease), box-shadow 0.22s var(--px-ease);
}

.train-sheet-card:hover {
    transform: translateY(-3px);
    box-shadow:
        var(--px-hl),
        0 18px 30px -14px rgba(27, 114, 97, 0.55),
        0 0 0 1px rgba(70, 189, 159, 0.35);
}

.train-sheet-card-title { color: var(--px-ink); font-weight: 700; }
.train-sheet-card-desc { color: var(--px-muted); }

.train-sheet-cancel {
    border-radius: var(--px-r-pill);
    color: var(--px-ink-3);
    background: #eef4f3;
    box-shadow: inset 0 0 0 1px rgba(16, 74, 63, 0.06);
}

.train-sheet-mask {
    background: linear-gradient(180deg, rgba(6, 32, 28, 0.40) 0%, rgba(6, 32, 28, 0.62) 100%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

#toggleMenu {
    border-radius: var(--px-r-sm);
    background: linear-gradient(180deg, #ffffff, #eff7f5);
    box-shadow: var(--px-shadow-chip);
}

/* 答题卡 */
.test-card {
    border-radius: var(--px-r-md);
    background: linear-gradient(180deg, #ffffff, #f4faf9);
    box-shadow: var(--px-shadow-chip);
}

.test-sentence-wrap {
    border-radius: var(--px-r-sm);
    background: linear-gradient(180deg, #ffffff, #eef7f6);
    box-shadow: inset 0 0 0 1px rgba(16, 74, 63, 0.06);
}

.test-sentence { color: var(--px-ink-2); font-weight: 600; }

.test-hint {
    border-radius: var(--px-r-pill);
    color: #8a5410;
    background: rgba(255, 214, 140, 0.4);
}

.test-option {
    border-radius: var(--px-r-sm);
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: linear-gradient(180deg, #ffffff, #f1f8f7);
    box-shadow: var(--px-shadow-chip);
    transition: transform 0.2s var(--px-ease), box-shadow 0.2s var(--px-ease);
}

.test-option:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        var(--px-hl),
        0 16px 26px -14px rgba(27, 114, 97, 0.5),
        0 0 0 1px rgba(70, 189, 159, 0.4);
}

.test-option.correct {
    background: linear-gradient(180deg, #d8f6e6, #a8e8c8) !important;
    box-shadow: 0 6px 0 #4aa87a, 0 14px 24px -14px rgba(47, 182, 115, 0.8) !important;
}

.test-option.wrong {
    background: linear-gradient(180deg, #ffe1dc, #ffc4ba) !important;
    box-shadow: 0 6px 0 #c6483a, 0 14px 24px -14px rgba(232, 86, 63, 0.8) !important;
}

.test-sound-switch-track {
    background: #dbe6ea;
    box-shadow: inset 0 2px 5px rgba(16, 74, 63, 0.18);
}

.test-sound-switch.on .test-sound-switch-track {
    background: linear-gradient(180deg, var(--px-brand-lt), var(--px-brand));
}

/* ---------------------------------------------------------------------------
   15. 查词弹窗 / 有道词典弹窗
   ------------------------------------------------------------------------ */
.word-lookup-popup {
    border-radius: var(--px-r-lg);
    border: 2px solid #ffffff;
    background: linear-gradient(180deg, #ffffff 0%, #f6fbfa 100%);
    box-shadow:
        var(--px-hl),
        0 36px 70px -28px rgba(16, 74, 63, 0.6),
        0 10px 24px -14px rgba(16, 74, 63, 0.35);
}

.word-lookup-word {
    color: var(--px-ink);
    text-shadow: 0 1px 0 #ffffff, 0 3px 0 rgba(18, 53, 79, 0.1);
}

.word-lookup-phonetic { color: #d97a1c; }

.word-lookup-translation {
    border-radius: var(--px-r-xs);
    color: var(--px-ink-2);
    background: linear-gradient(180deg, #fffdf6, #ffeecd);
}

.word-lookup-audio-btn {
    border-radius: var(--px-r-pill);
    background: linear-gradient(180deg, var(--px-brand-lt), #27997f);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 3px 0 var(--px-brand-dk),
        0 12px 20px -12px rgba(27, 114, 97, 0.8);
}

.word-lookup-close {
    border-radius: 50%;
    background: #eef4f3;
    color: var(--px-muted);
}

.word-lookup-close:hover { background: #ffe3de; color: var(--px-err); }

.yd-head {
    border-radius: var(--px-r-md) var(--px-r-md) 0 0;
    background: linear-gradient(180deg, #f4fbf9, #ffffff);
}

.yd-acc {
    border-radius: var(--px-r-xs);
    background: linear-gradient(180deg, #ffffff, #f2f8f7);
    box-shadow: inset 0 0 0 1px rgba(16, 74, 63, 0.06);
}

.yd-acc-tag { border-radius: var(--px-r-pill); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12); }

.yd-spk {
    border-radius: 50%;
    background: radial-gradient(circle at 34% 26%, #ffffff, #e8f4f8);
    box-shadow: var(--px-shadow-chip);
}

.yd-ex-item {
    border-radius: var(--px-r-xs);
    background: linear-gradient(180deg, #ffffff, #f5faf9);
    box-shadow: inset 0 0 0 1px rgba(16, 74, 63, 0.055);
}

.yd-toggle {
    border-radius: var(--px-r-pill);
    color: var(--px-brand-dk);
    background: rgba(70, 189, 159, 0.14);
}

/* 视频模态框 */
.video-modal .modal-content {
    border-radius: var(--px-r-md);
    border: 3px solid #ffffff;
    box-shadow: 0 40px 80px -30px rgba(8, 46, 39, 0.75);
}

/* ---------------------------------------------------------------------------
   16. 响应式：≥900px 走「左图右词」双栏，窄屏回归单栏
   ------------------------------------------------------------------------ */
@media (min-width: 900px) {
    .word-card {
        padding: 30px 32px 26px;
        border-radius: var(--px-r-xl);
    }

    /* 用浮动实现双栏：卡片本身是 display:block（JS 控制），不能改成 flex/grid */
    .word-card > .word-media1 {
        float: left;
        /* 尺寸用基础规则的固定 290px 方形：加载前后一格不动，float 只负责左锚定 */
        margin: 4px 32px 14px 0;
    }

    .word-card > .word-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 300px;
        margin-bottom: 10px;
    }

    /* 清除浮动，让拼读区与视频横跨整卡 */
    .word-card > .phoneme-mapping,
    .word-card > .word-media { clear: both; }

    .word-card > .word-media { max-width: 680px; }

    .phonetic-pills-container { gap: 14px; }
}

/* 中等窄屏：收紧留白 */
@media (max-width: 899px) {
    .word-card {
        padding: 20px 16px 18px;
        border-radius: var(--px-r-lg);
    }

    .word-media1 {
        width: 230px;  /* 与图片 max-height:230px 同步钉死 */
        height: 230px;
    }

    .word-image { max-height: 230px; }

    .word-text { font-size: clamp(2.2rem, 8vw, 3rem); }

    /* PK 角标挂在 header 右上角（top:-5px，竖直占位约 30px）。
       用 padding（而非 margin，会与 header 外边距塌陷失效）把单词整体下移让出这条竖直带：
       正常词只是略微下移，长词（如 grandpa (grandfather)，字母按空格换行成两行）
       第一行也不会钻到按钮底下 */
    .word-and-icon { padding-top: 34px; }

    /* 允许单词盒收缩换行：flex 项默认 min-width:auto 顶穿容器且不换行，
       word-break:break-word 因此失效（原始样式即有此问题） */
    .word-and-icon .word-text { min-width: 0; max-width: 100%; }
}
} /* end of @media (min-width: 768px) 桌面端皮克斯主题 */

/* ---------------------------------------------------------------------------
   18. 移动端主题（≤767.98px：与桌面同一套皮克斯语言，紧凑版）
   --------------------------------------------------------------------------
   目标：手机上不再回退旧蓝白样式，而是拿到同一套玩具质感；同时把各区块
   压紧（缩 padding / 字号 / 间距），保证——
   ① 英/美两枚音标胶囊恒在一行；
   ② 字母-音素积木恒在一行（超长词靠缩小自身让位，不换行）；
   ③ 收藏 / 评测 / 连拼 / 洗脑模式 / 训练按钮恒在一行。
   红线沿用文件头：不动 .word-card 的 display；#word-nav 宽度 ≤190px；
   不给 .word-letters / 字母 span 加 transform；padding-top 不写 !important。
   收藏按钮的内联黑色（JS 写死 background-color:#1a1a1a !important）与桌面
   端一致保留，不做覆盖。
   ------------------------------------------------------------------------ */
@media (max-width: 767.98px) {
/* --- 移动端设计令牌（与桌面同源，阴影更收敛） --- */
:root {
    --px-ink: #12354f;
    --px-ink-2: #25455e;
    --px-ink-3: #3c5f77;
    --px-muted: #7d95a6;

    --px-brand: #28977e;
    --px-brand-lt: #46bd9f;
    --px-brand-dk: #1b7261;

    --px-warm: #ff9f43;
    --px-warm-lt: #ffc861;
    --px-coral: #ff7b6b;

    --px-r-xs: 10px;
    --px-r-sm: 14px;
    --px-r-md: 18px;
    --px-r-lg: 24px;
    --px-r-pill: 999px;

    --px-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --px-ease-press: cubic-bezier(0.18, 0.72, 0.28, 1.24);

    --px-hl: inset 0 1px 0 rgba(255, 255, 255, 0.92);
    --px-shadow-slab:
        var(--px-hl),
        inset 0 -2px 0 -1px rgba(18, 53, 79, 0.045),
        0 18px 36px -24px rgba(16, 74, 63, 0.42),
        0 8px 18px -12px rgba(16, 74, 63, 0.24),
        0 0 0 1px rgba(16, 74, 63, 0.055);
    --px-shadow-chip:
        var(--px-hl),
        0 6px 14px -8px rgba(18, 53, 79, 0.42),
        0 0 0 1px rgba(18, 53, 79, 0.06);
}

/* --- 舞台底色（与桌面同一套棚拍光） --- */
html {
    background:
        radial-gradient(120% 90% at 50% -10%, #ffffff 0%, rgba(255, 255, 255, 0) 46%),
        linear-gradient(168deg, #eaf8f4 0%, #eef6fb 42%, #fdf5ea 100%);
    background-attachment: fixed;
    min-height: 100%;
}

body {
    background: transparent;
    color: var(--px-ink-2);
    padding: 10px 0 26px;
    font-family: system-ui, -apple-system, 'Segoe UI', 'PingFang SC',
        'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

body::before {
    content: '';
    position: fixed;
    inset: -12%;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(34% 28% at 10% 6%, rgba(70, 189, 159, 0.40), transparent 68%),
        radial-gradient(28% 24% at 92% 8%, rgba(255, 196, 88, 0.44), transparent 68%),
        radial-gradient(40% 34% at 84% 92%, rgba(96, 166, 240, 0.30), transparent 70%),
        radial-gradient(30% 26% at 12% 88%, rgba(255, 143, 122, 0.26), transparent 70%);
    filter: blur(6px);
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 140px 140px;
}

/* --- 顶栏：悬浮胶囊（让位量级与 nav.css 一致方向，不加 !important） --- */
.topbar {
    left: 8px;
    right: 8px;
    top: 6px;
    height: 46px;
    border-radius: var(--px-r-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(246, 252, 251, 0.88));
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow:
        var(--px-hl),
        0 10px 22px -14px rgba(16, 74, 63, 0.5),
        0 0 0 1px rgba(16, 74, 63, 0.05);
}

body.has-topbar { padding-top: 58px; }

.topbar .topbar-name { color: var(--px-ink); font-weight: 700; }

.topbar .topbar-logo img {
    border-radius: 9px;
    filter: drop-shadow(0 2px 4px rgba(16, 74, 63, 0.2));
}

.topbar .topbar-user {
    border-radius: var(--px-r-pill);
    padding: 6px 13px;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(180deg, var(--px-brand-lt), #2a9c82);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 3px 0 var(--px-brand-dk), 0 8px 14px -8px rgba(27, 114, 97, 0.7);
}

.topbar .topbar-user:active { transform: translateY(2px); }
.topbar .topbar-user .topbar-user-icon { color: #fff; }

/* --- 加载动画（与桌面同一套暗场聚光） --- */
.loader-container {
    background:
        radial-gradient(58% 46% at 50% 34%, #35a288 0%, #1e765f 52%, #10453a 100%);
}

.loading-text {
    font-size: 24px;
    letter-spacing: 2px;
    color: #fffdf7;
    text-shadow:
        0 1px 0 #ffffff,
        0 3px 0 #1a6a56,
        0 10px 22px rgba(0, 0, 0, 0.42);
}

.progress-container {
    width: 220px;
    height: 12px;
    border-radius: var(--px-r-pill);
    background: rgba(3, 34, 28, 0.58);
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.progress-bar {
    border-radius: var(--px-r-pill);
    background: linear-gradient(90deg, #ffe6ad 0%, var(--px-warm-lt) 42%, var(--px-warm) 100%);
    box-shadow: 0 0 14px rgba(255, 190, 90, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.75);
}

.progress-percentage {
    margin-top: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.82);
}

/* --- 单词卡片：玩具厚板（紧凑档） --- */
#word-container { padding: 0 8px; }

.word-card {
    width: 100%;
    max-width: 940px;
    margin: 0 auto 12px;
    padding: 14px 12px 12px;
    border-radius: var(--px-r-lg);
    background-image:
        radial-gradient(130% 74% at 4% -14%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 58%),
        linear-gradient(180deg, #ffffff 0%, #fbfdfd 46%, #eef6f4 100%);
    border: 2px solid #ffffff;
    box-shadow: var(--px-shadow-slab);
}

/* --- 配图台座 --- */
.word-media1 {
    width: 170px;  /* 与图片 max-height:170px 同步钉死，加载时只淡入不放大 */
    height: 170px;
    margin: 0 auto 8px;
    padding: 0; /* 图片统一 512*512 后台座被完全盖住，不再露出内衬背景 */
    border-radius: var(--px-r-md);
    /* 同桌面：纯白，防非正方形图盖不满台座时露出绿色雾块 */
    background: #ffffff;
    /*box-shadow: 0 10px 20px -16px rgba(16, 74, 63, 0.5);*/
}

/* 图片回归常规流（桌面同款），高度按小屏收敛 */
.word-image {
    position: static;
    width: auto !important; /* 覆盖 functions.js 内联 width:100%，台座贴住图片 */
    max-width: 100%;
    height: auto;
    top: auto;
    left: auto;
    max-height: 170px;
    object-fit: contain;
    border-radius: var(--px-r-sm);
    filter: drop-shadow(0 10px 12px rgba(14, 62, 53, 0.26));
}

.word-media1::after {
    display: none; /* 台座已被图片完全覆盖，接触影失去落点 */
}

/* --- 词头与元信息 --- */
.word-header {
    display: block;
    margin-bottom: 8px;
    padding-bottom: 0;
    text-align: center;
}

.word-header::after { display: none; }

/* PK 角标挂在 header 右上角（内联 top:-5px;right:-5px），
   用 padding（非 margin，防外边距塌陷）把单词下移让出竖直带 */
.word-and-icon {
    justify-content: center;
    margin-bottom: 6px;
    padding-top: 30px;
}

.word-and-icon .word-text { min-width: 0; max-width: 100%; }

.word-text {
    font-size: clamp(1.7rem, 9vw, 2.3rem);
    line-height: 1.16;
    color: var(--px-ink);
    background: transparent;
    padding: 0 4px 4px;
    letter-spacing: 0.5px;
}

.word-letters { padding-bottom: 2px; }

.word-cursor {
    width: 3px;
    border-radius: var(--px-r-pill);
    background-color: var(--px-brand);
    box-shadow: 0 0 10px rgba(70, 189, 159, 0.9);
}

.meta-info { gap: 6px; }

.phonetic-translation-container { gap: 6px; }

/* --- 音标胶囊：糖果壳（恒一行，字号随屏收敛） --- */
.phonetic-pills-container {
    flex-wrap: nowrap;
    gap: 5px;
    max-width: 100%;
}

.phonetic-pill {
    gap: 4px;
    padding: 3px 7px 3px 4px;
    border-radius: var(--px-r-pill);
    background: linear-gradient(180deg, #ffffff 0%, #edf6fa 100%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: var(--px-shadow-chip);
}

.pill-label {
    width: 18px;
    height: 18px;
    font-size: 10px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -2px 0 rgba(0, 0, 0, 0.16),
        0 3px 8px -3px rgba(18, 53, 79, 0.45);
}

.uk-label { background: linear-gradient(180deg, #63b0f6, #2f7fd6); }
.us-label { background: linear-gradient(180deg, #ff8f80, #dd5346); }

.pill-phonetic {
    font-size: 0.72em;
    font-weight: 700;
    color: var(--px-ink-2);
    letter-spacing: 0;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.pill-audio-wrapper {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 26%, #ffffff, #e6f2f8);
    box-shadow:
        inset 0 1px 0 #ffffff,
        0 2px 6px -2px rgba(18, 53, 79, 0.35);
}

.pill-audio-icon { width: 13px; height: 13px; }

.pill-audio-wrapper::before,
.pill-audio-wrapper::after { border-color: rgba(70, 189, 159, 0.55); }

/* --- 释义 / 助记牌 --- */
.translation {
    padding: 5px 16px;
    border-radius: var(--px-r-pill);
    font-size: 0.95rem;
    font-weight: 700;
    color: #8a5410;
    background: linear-gradient(180deg, #fffdf6 0%, #ffe9c6 100%);
    box-shadow:
        inset 0 1px 0 #ffffff,
        inset 0 -2px 0 rgba(196, 138, 40, 0.1),
        0 6px 14px -10px rgba(196, 138, 40, 0.7),
        0 0 0 1px rgba(255, 196, 110, 0.5);
}

.mnemonic {
    padding: 7px 12px;
    border-radius: var(--px-r-md);
    background: linear-gradient(180deg, #fff8ec 0%, #ffe6c4 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: var(--px-shadow-chip);
}

.mnemonic-label {
    border-radius: var(--px-r-pill);
    background: linear-gradient(180deg, var(--px-warm-lt), var(--px-warm));
    color: #5a3200;
}

/* --- 例句 / 短文（紧凑档） --- */
.sentences-container { margin-top: 2px; }

.sentence-item {
    padding: 8px 10px;
    margin-bottom: 8px;
    border-radius: var(--px-r-sm);
    background: linear-gradient(180deg, #ffffff 0%, #f3f9f8 100%);
    box-shadow:
        var(--px-hl),
        0 6px 14px -12px rgba(16, 74, 63, 0.55),
        0 0 0 1px rgba(16, 74, 63, 0.055);
}

.sentence-number {
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 10px;
    background: linear-gradient(180deg, var(--px-brand-lt), var(--px-brand));
    box-shadow: 0 2px 6px -2px rgba(27, 114, 97, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.sentence-text {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--px-ink-2);
}

.sentence-translation { color: var(--px-muted); }
.sentence-trans-toggle { color: var(--px-muted); }

.sentence-word-highlight {
    padding: 0 4px;
    border-radius: 6px;
    color: #7a4a06;
    background: linear-gradient(180deg, #fff1ad, #ffd95e);
    box-shadow: inset 0 -2px 0 rgba(180, 120, 10, 0.16);
}

.passage-header {
    border-radius: var(--px-r-md) !important;
    background: linear-gradient(180deg, var(--px-brand-lt), #23866f) !important;
    box-shadow:
        var(--px-hl),
        0 3px 0 var(--px-brand-dk),
        0 12px 20px -14px rgba(27, 114, 97, 0.8);
}

.passage-text {
    border-left: 4px solid var(--px-brand-lt) !important;
    border-radius: var(--px-r-sm) !important;
    background: linear-gradient(180deg, #ffffff, #f4faf9) !important;
    box-shadow: var(--px-hl), 0 0 0 1px rgba(16, 74, 63, 0.055);
}

.passage-translation {
    border-radius: var(--px-r-sm) !important;
    border: 1px solid rgba(16, 74, 63, 0.08) !important;
    background: #fbfdfd !important;
    color: var(--px-ink-3) !important;
}

/* 朗读圆钮：36px 触摸档 */
.tts-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 26%, #ffffff, #e8f4f8);
    box-shadow: var(--px-shadow-chip);
}

.tts-icon { width: 19px; height: 19px; }

.sentence-line .sentence-play-btn { margin-top: 0; }
/* 串词成句：播放按钮内联挂在短文开头（移动端同规则，占据更小） */
.passage-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 0 8px 0 0;
    vertical-align: middle;
}

/* 移动端短文正文与译文统一改小一档字号 */
.passage-text { font-size: 15px !important; line-height: 1.7 !important; }
.passage-translation { font-size: 12.5px !important; }

/* --- 拼读区：控制按钮（恒一行，糖果积木紧凑档） --- */
.phoneme-mapping { gap: 5px; }

/* nav.css 在 ≤480 有 flex-wrap:wrap 的旧兜底，这里统一收回为不换行 */
.control-bar {
    flex-wrap: nowrap;
    gap: 6px;
    margin: 2px 0 3px;
    padding: 0;
}

.control-center {
    flex-wrap: nowrap;
    gap: 5px;
    justify-content: center;
}

.control-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--px-r-pill);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;   /* 按钮文字绝不折行（折行=按钮变高=两行观感） */
    color: #fff !important;
    background: linear-gradient(180deg, var(--px-brand-lt), #27997f);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 3px 0 var(--px-brand-dk),
        0 10px 16px -10px rgba(27, 114, 97, 0.85);
    transition: transform 0.18s var(--px-ease-press), box-shadow 0.18s var(--px-ease-press);
}

.control-btn:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.22),
        0 1px 0 var(--px-brand-dk);
}

/* 洗脑模式：暖橙 */
.control-btn.crazy-btn {
    background: linear-gradient(180deg, #ffb163, #f0821f);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 3px 0 #c05f0d,
        0 10px 16px -10px rgba(192, 95, 13, 0.85);
}

.control-btn.crazy-btn:active {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.22),
        0 1px 0 #c05f0d;
}

/* 训练 / 词形义 / 例句测试按钮：与桌面同一套玩具语言（0-2-0 提权压住 nav.css ≤480 旧档） */
.control-btn.train-btn,
.control-btn.suite-btn,
.control-btn.test-btn {
    background: linear-gradient(180deg, var(--px-brand-lt), #27997f);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 3px 0 var(--px-brand-dk),
        0 10px 16px -10px rgba(27, 114, 97, 0.85);
    border-radius: var(--px-r-pill);
    padding: 5px 10px;
    font-size: 12.5px;
    min-height: 32px;
}

.control-btn.train-btn.active,
.control-btn.test-btn.active {
    background: linear-gradient(180deg, #ffc061, #f0921f);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 2px 0 #c05f0d,
        0 8px 14px -10px rgba(192, 95, 13, 0.8);
}

/* --- 字母-音素积木：恒一行（超长词靠缩小自身让位） --- */
.pairs-container {
    flex-wrap: nowrap;
    gap: 3px;
    padding: 6px 0 20px;
}

.mapping-pair {
    flex-shrink: 1;
    min-width: 0;
    padding: 4px 5px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--px-r-xs);
    background: linear-gradient(180deg, #ffffff 0%, #eef6fa 100%);
    box-shadow: var(--px-shadow-chip);
    transition: transform 0.22s var(--px-ease), box-shadow 0.22s var(--px-ease);
}

.mapping-pair::before { display: none; }

.mapping-pair:hover {
    background: linear-gradient(180deg, #ffffff 0%, #e4f4f0 100%);
    transform: translateY(-2px);
    box-shadow:
        var(--px-hl),
        0 10px 18px -10px rgba(16, 74, 63, 0.5),
        0 0 0 1px rgba(40, 151, 126, 0.18);
}

.mapping-pair.active {
    background: linear-gradient(180deg, #fffaf0 0%, #ffe4b8 100%);
    transform: translateY(-2px) scale(1.03);
    box-shadow:
        inset 0 1px 0 #ffffff,
        0 10px 18px -10px rgba(214, 140, 40, 0.75),
        0 0 0 2px rgba(255, 186, 96, 0.95),
        0 0 20px rgba(255, 196, 110, 0.45);
}

.grapheme {
    font-size: 0.82em;
    font-weight: 800;
    color: var(--px-ink);
    white-space: nowrap;
    border-bottom: 1px dashed rgba(18, 53, 79, 0.28);
    text-shadow: 0 1px 0 #ffffff;
}

.phoneme {
    margin-top: 1px;
    font-size: 0.62em;
    font-weight: 700;
    color: #d97a1c;
    white-space: nowrap;
}

/* 音块播放角标：裸播图标（display 仍由 JS 内联切换），无底色无阴影不遮音素 */
.video-icon {
    bottom: -17px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    font-size: 12px;
    color: var(--px-brand);
    background: none;
    box-shadow: none;
}

/* --- 视频：影院画框 --- */
.word-media {
    max-width: 100%;
    margin: 6px auto 0;
    padding: 6px;
    border-radius: var(--px-r-md);
    background: linear-gradient(180deg, #ffffff, #eef6f4);
    box-shadow: var(--px-shadow-chip);
}

.word-video {
    border: none;
    border-radius: var(--px-r-sm);
    background: #0d2430;
    box-shadow: 0 12px 24px -16px rgba(13, 36, 48, 0.85), 0 0 0 1px rgba(18, 53, 79, 0.12);
}

/* --- PK 按钮（小屏收紧：base pk.css 是 8px/20px + 14px 字号，太大） --- */
.pk-btn {
    padding: 4px 12px;
    font-size: 11.5px;
    gap: 4px;
    border-radius: var(--px-r-pill) !important;
    background: linear-gradient(180deg, #ff8f80, #e4574a) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 3px 0 #b83c31,
        0 10px 16px -10px rgba(184, 60, 49, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
}

.pk-btn i {
    font-size: 12px;
}

/* --- 单词表：侧边拉手 + 抽屉（宽度红线 ≤190px） --- */
#nav-trigger {
    width: 22px;
    height: 90px;
    border-radius: 0 var(--px-r-sm) var(--px-r-sm) 0;
    background: linear-gradient(180deg, var(--px-brand-lt), var(--px-brand-dk));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        5px 6px 16px -8px rgba(16, 74, 63, 0.65);
}

#nav-trigger::before {
    font-size: 11px;
    letter-spacing: 2px;
    color: #fff;
}

#word-nav {
    max-width: 190px;
    padding: 12px 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-radius: 0 var(--px-r-md) var(--px-r-md) 0;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-left: none;
    box-shadow:
        var(--px-hl),
        0 18px 36px -18px rgba(16, 74, 63, 0.6);
}

.nav-header {
    padding: 0 12px 10px;
    border-bottom: none;
    margin-bottom: 6px;
}

.nav-header span {
    font-size: 15px;
    font-weight: 800;
    color: var(--px-brand-dk);
}

#word-count-badge {
    border-radius: var(--px-r-pill);
    background: linear-gradient(180deg, var(--px-brand-lt), var(--px-brand));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 6px -2px rgba(27, 114, 97, 0.7);
}

#close-nav {
    border-radius: 50%;
    color: var(--px-muted);
    background: #f1f6f5;
}

.nav-toggle-bar {
    margin: 0 8px 8px;
    padding: 8px 10px;
    border-radius: var(--px-r-sm);
    border-bottom: none;
    background: linear-gradient(180deg, #f7fbfa, #eef7f5);
    box-shadow: inset 0 0 0 1px rgba(16, 74, 63, 0.05);
}

.toggle-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--px-ink-3);
}

.toggle-slider {
    border: none;
    background: #dbe6ea;
    box-shadow: inset 0 2px 5px rgba(16, 74, 63, 0.18);
}

.toggle-switch input:checked + .toggle-slider {
    background: linear-gradient(180deg, var(--px-brand-lt), var(--px-brand));
}

.nav-items { max-height: 50vh; padding: 0 6px; }

.nav-item {
    display: flex;
    align-items: center;
    min-height: 36px;
    margin-bottom: 3px;
    padding: 7px 10px;
    border-radius: var(--px-r-xs);
    font-size: 13px;
    font-weight: 500;
    color: var(--px-ink-3);
}

.nav-item:hover {
    background: rgba(70, 189, 159, 0.16);
    color: var(--px-brand-dk);
}

.nav-item.active {
    background: linear-gradient(180deg, var(--px-brand-lt), #27997f) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 2px 0 var(--px-brand-dk),
        0 8px 14px -8px rgba(27, 114, 97, 0.8);
}

/* --- 答题卡（训练抽屉内，同套语言） --- */
.test-card {
    border-radius: var(--px-r-md);
    background: linear-gradient(180deg, #ffffff, #f4faf9);
    box-shadow: var(--px-shadow-chip);
}

.test-sentence-wrap {
    border-radius: var(--px-r-sm);
    background: linear-gradient(180deg, #ffffff, #eef7f6);
    box-shadow: inset 0 0 0 1px rgba(16, 74, 63, 0.06);
}

.test-sentence { color: var(--px-ink-2); font-weight: 600; }

.test-hint {
    border-radius: var(--px-r-pill);
    color: #8a5410;
    background: rgba(255, 214, 140, 0.4);
}

.test-option {
    border-radius: var(--px-r-sm);
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: linear-gradient(180deg, #ffffff, #f1f8f7);
    box-shadow: var(--px-shadow-chip);
}

.test-option.correct {
    background: linear-gradient(180deg, #d8f6e6, #a8e8c8) !important;
    box-shadow: 0 4px 0 #4aa87a, 0 10px 18px -12px rgba(47, 182, 115, 0.8) !important;
}

.test-option.wrong {
    background: linear-gradient(180deg, #ffe1dc, #ffc4ba) !important;
    box-shadow: 0 4px 0 #c6483a, 0 10px 18px -12px rgba(232, 86, 63, 0.8) !important;
}

.test-sound-switch-track {
    background: #dbe6ea;
    box-shadow: inset 0 2px 5px rgba(16, 74, 63, 0.18);
}

.test-sound-switch.on .test-sound-switch-track {
    background: linear-gradient(180deg, var(--px-brand-lt), var(--px-brand));
}

/* 训练抽屉 */
.train-sheet {
    border-radius: var(--px-r-lg) var(--px-r-lg) 0 0;
    background: linear-gradient(180deg, #ffffff 0%, #f3faf8 100%);
    box-shadow: 0 -18px 40px -18px rgba(16, 74, 63, 0.6);
}

.train-sheet-title { color: var(--px-ink); font-weight: 800; }
.train-sheet-sub { color: var(--px-muted); }

.train-sheet-card {
    border-radius: var(--px-r-md);
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: linear-gradient(180deg, #ffffff, #f1f8f7);
    box-shadow: var(--px-shadow-chip);
}

.train-sheet-card-title { color: var(--px-ink); font-weight: 700; }
.train-sheet-card-desc { color: var(--px-muted); }

.train-sheet-mask {
    background: linear-gradient(180deg, rgba(6, 32, 28, 0.40) 0%, rgba(6, 32, 28, 0.62) 100%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* 查词弹窗 / 有道词典弹窗 */
.word-lookup-popup {
    border-radius: var(--px-r-lg);
    border: 2px solid #ffffff;
    background: linear-gradient(180deg, #ffffff 0%, #f6fbfa 100%);
    box-shadow:
        var(--px-hl),
        0 24px 48px -22px rgba(16, 74, 63, 0.6),
        0 8px 18px -12px rgba(16, 74, 63, 0.35);
}

.word-lookup-word {
    color: var(--px-ink);
    text-shadow: 0 1px 0 #ffffff;
}

.word-lookup-phonetic { color: #d97a1c; }

.word-lookup-translation {
    border-radius: var(--px-r-xs);
    color: var(--px-ink-2);
    background: linear-gradient(180deg, #fffdf6, #ffeecd);
}

.word-lookup-audio-btn {
    border-radius: var(--px-r-pill);
    background: linear-gradient(180deg, var(--px-brand-lt), #27997f);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 2px 0 var(--px-brand-dk),
        0 8px 14px -10px rgba(27, 114, 97, 0.8);
}

.word-lookup-close {
    border-radius: 50%;
    background: #eef4f3;
    color: var(--px-muted);
}

/* --- 底部 Dock 与测试子菜单（小程序环境，同套语言） --- */
.sidebar {
    height: 60px;
    padding: 0 8px;
    border-radius: var(--px-r-md) var(--px-r-md) 0 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow:
        var(--px-hl),
        0 -10px 24px -14px rgba(16, 74, 63, 0.5);
}

.side-item .icon { color: #9db4c0; }
.side-item:hover .icon,
.side-item.active .icon { color: var(--px-brand); }
.side-item:hover .text,
.side-item.active .text { color: var(--px-brand-dk); }

.side-item.active::after {
    height: 3px;
    border-radius: var(--px-r-pill);
    background: linear-gradient(90deg, var(--px-brand-lt), var(--px-brand-dk));
}

.sub-menu {
    border-radius: var(--px-r-lg) var(--px-r-lg) 0 0;
    background: linear-gradient(180deg, #ffffff, #f4faf9);
    box-shadow: 0 -14px 32px -16px rgba(16, 74, 63, 0.55);
}

.sub-menu .side-item1,
.sub-menu .side-item2,
.sub-menu .side-item3,
.sub-menu .side-item4 {
    border-radius: var(--px-r-sm);
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: linear-gradient(180deg, #ffffff, #eff7f5);
    color: var(--px-ink-2);
    box-shadow: var(--px-shadow-chip);
}

.sub-menu .side-item1 i,
.sub-menu .side-item2 i,
.sub-menu .side-item3 i,
.sub-menu .side-item4 i { color: var(--px-brand); }

.close-btn { background: #eef4f3; color: var(--px-muted); }

#toggleMenu {
    border-radius: var(--px-r-sm);
    background: linear-gradient(180deg, #ffffff, #eff7f5);
    box-shadow: var(--px-shadow-chip);
}

/* --- ≤480px：再收一档（音标 / 积木 / 按钮同步缩小，比例保持一致） --- */
@media (max-width: 480px) {
    .word-card { padding: 12px 10px 10px; margin-bottom: 10px; }

    .word-text { font-size: clamp(1.55rem, 8.6vw, 2.1rem); }


    .phonetic-pills-container { gap: 4px; }

    .phonetic-pill { padding: 3px 6px 3px 3px; gap: 3px; }

    .pill-phonetic { font-size: 0.68em; }

    .pairs-container { gap: 2px; padding: 5px 0 18px; }

    .mapping-pair { padding: 3px 4px; }

    .grapheme { font-size: 0.76em; }

    .phoneme { font-size: 0.58em; }

    .control-bar { gap: 5px; }

    .control-center { gap: 4px; }

    .control-btn {
        min-height: 30px;
        padding: 4px 8px;
        font-size: 12px;
    }

    .control-btn.train-btn,
    .control-btn.suite-btn,
    .control-btn.test-btn {
        min-height: 30px;
        padding: 4px 8px;
        font-size: 12px;
    }
}

/* --- ≤360px：终档（再小就压按钮字号与内边距，五枚按钮仍一行放得下；
       实测 320px 需要 ≈244px < 内容宽 ≈284px，连拼无需去掉） --- */
@media (max-width: 360px) {
    .control-bar { gap: 4px; }

    .control-center { gap: 3px; }

    .control-btn {
        min-height: 28px;
        padding: 3px 6px;
        font-size: 11px;
    }

    .control-btn.train-btn,
    .control-btn.suite-btn,
    .control-btn.test-btn {
        min-height: 28px;
        padding: 3px 6px;
        font-size: 11px;
    }
}
} /* end of @media (max-width: 767.98px) 移动端皮克斯主题 */


/* ---------------------------------------------------------------------------
   17. 可访问性与动效偏好
   ------------------------------------------------------------------------ */
.tts-icon-btn:focus-visible,
.control-btn:focus-visible,
.pk-btn:focus-visible,
.nav-item:focus-visible,
.test-option:focus-visible,
.train-sheet-card:focus-visible,
.pill-audio-wrapper:focus-visible,
#nav-trigger:focus-visible,
#close-nav:focus-visible,
.topbar .topbar-user:focus-visible {
    outline: 3px solid rgba(70, 189, 159, 0.6);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .loading-text { animation: none; }
    .word-media,
    .mapping-pair,
    .phonetic-pill,
    .control-btn,
    .train-sheet-card,
    .test-option { transition: none !important; }

    .mapping-pair:hover,
    .mapping-pair.active,
    .phonetic-pill:hover,
    .control-btn:hover,
    .train-sheet-card:hover { transform: none !important; }
}

/* =========================================================================
   2026-10-07 单词主字号九档阶梯（重建）
   —— 与 tmp/train_sheet_redesign/scale_metrics.json 实测真值逐档对齐：
      320→21 / 370→23 / 410→25 / 450→26 / 590→27 / 780→28 / 1000→29 /
      1260→30 / 1500→57.6（基线沿用桌面 clamp，不写死）
   —— 用 !important 压过本文件 2145 行 @media(max-width:480px) 的迟到覆盖。
   ========================================================================= */
@media (max-width: 369px) { .word-text { font-size: 21px !important; } }
@media (min-width: 370px) and (max-width: 409px) { .word-text { font-size: 23px !important; } }
@media (min-width: 410px) and (max-width: 449px) { .word-text { font-size: 25px !important; } }
@media (min-width: 450px) and (max-width: 589px) { .word-text { font-size: 26px !important; } }
@media (min-width: 590px) and (max-width: 779px) { .word-text { font-size: 27px !important; } }
@media (min-width: 780px) and (max-width: 999px) { .word-text { font-size: 28px !important; } }
@media (min-width: 1000px) and (max-width: 1259px) { .word-text { font-size: 29px !important; } }
@media (min-width: 1260px) and (max-width: 1499px) { .word-text { font-size: 30px !important; } }

/* —— 抽屉圆角收口：训练抽屉四角统一（去掉「上圆下直」的残留） —— */
.train-sheet {
    border-radius: var(--px-r-lg) !important;
}
.train-sheet-card {
    border-radius: var(--px-r-md) !important;
}