/* ====================== 单词练习套件（四项训练） ======================
   横向 Tab 进度 + 当前单词的 4 种 mini 练习，拼写 / 听写 / 选择 / 配对
   配色沿用题卡青绿主色 #28977e / #48dbfb，与全局一致
=================================================================*/

.word-practice-suite {
    position: relative;
    padding: 14px 14px 16px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.word-practice-suite::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #28977e, #48dbfb, #28977e);
    background-size: 200% 100%;
    animation: suiteShimmer 3s linear infinite;
}

@keyframes suiteShimmer {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

/* —— 顶部标题 —— */
.suite-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin: 4px 4px 12px;
}
.suite-title {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.suite-title .suite-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #28977e, #48dbfb);
    box-shadow: 0 0 0 3px rgba(40,151,126,0.12);
}
/* —— 右上工具区（进度 + 发音开关） —— */
.suite-tools {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.suite-meta {
    font-size: 12px;
    color: #7a8a90;
}
.suite-meta b { color: #28977e; }
.suite-tool-divider {
    width: 1px; height: 14px;
    background: #e3e9eb;
}
.suite-tool-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #7a8a90;
}
.suite-tool-label i { color: #28977e; }
/* iOS 风格发音开关 */
.suite-sound-switch {
    position: relative;
    width: 40px; height: 22px;
    border: none;
    border-radius: 11px;
    background: #ccd3d6;
    cursor: pointer;
    transition: background 0.2s ease;
    padding: 0;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.12);
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
.suite-sound-switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: transform 0.2s ease;
}
.suite-sound-switch.on {
    background: linear-gradient(135deg, #28977e, #48dbfb);
}
.suite-sound-switch.on::after {
    transform: translateX(18px);
}

/* —— Tab 横向 —— */
.suite-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.suite-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 4px 8px;
    border: 1.5px solid #e8eef0;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafb 100%);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
.suite-tab .tab-icon {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #eaf3f5;
    color: #5f7d83;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.25s ease;
}
.suite-tab .tab-label {
    font-size: 12px;
    color: #5f7d83;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.suite-tab .tab-step {
    position: absolute;
    top: -6px; left: -6px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #b6c2c6;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.suite-tab.active {
    border-color: #28977e;
    background: linear-gradient(135deg, #eaf7f3 0%, #e6f6fb 100%);
    box-shadow: 0 4px 14px rgba(40, 151, 126, 0.18);
    transform: translateY(-1px);
}
.suite-tab.active .tab-icon {
    background: linear-gradient(135deg, #28977e, #48dbfb);
    color: #fff;
}
.suite-tab.active .tab-label { color: #1e6e58; }
.suite-tab.active .tab-step {
    background: linear-gradient(135deg, #28977e, #48dbfb);
}
.suite-tab.done .tab-icon {
    background: #28977e;
    color: #fff;
}
.suite-tab.done .tab-step {
    background: #28977e;
}
.suite-tab.done::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: rgba(40, 151, 126, 0.04);
    pointer-events: none;
}
/* 强化轮中不属于本轮的训练项：不可点 */
.suite-tab:disabled {
    cursor: default;
    opacity: 0.55;
}

/* —— 进度条 —— */
.suite-progress {
    height: 6px;
    border-radius: 3px;
    background: #eef1f2;
    overflow: hidden;
    margin: 0 4px 12px;
}
.suite-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #28977e, #48dbfb);
    border-radius: 3px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* —— 内容区域 —— */
.suite-stage {
    background: linear-gradient(135deg, #f8fafb 0%, #f0f4f5 100%);
    border-radius: 12px;
    padding: 16px 14px;
    position: relative;
    min-height: 140px;
    border-left: 4px solid #28977e;
}
.suite-prompt {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    font-size: 14px;
    color: #2c3e50;
    margin-bottom: 12px;
    line-height: 1.6;
    padding-left: 4px;
}
/* 2026-10-07 需求①：播放图标与翻译/单词并排（同行，左侧喇叭 + 右侧题干胶囊）
   题干胶囊必须可收缩并可折行，否则长释义会把按钮挤到上一行 */
.suite-prompt > .prompt-meaning,
.suite-prompt > .prompt-word {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* 2026-10-07 需求①：播放图标与翻译/单词并排（同行，左侧喇叭 + 右侧题干胶囊） */
.suite-prompt > .suite-play-btn {
    flex: 0 0 auto;
    padding: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
    font-size: 13px;
    background: linear-gradient(135deg, #28977e, #48dbfb);
    box-shadow: 0 3px 9px rgba(40, 151, 126, 0.28);
}
.suite-prompt > .suite-play-btn i { font-size: 13px; }
/* 听写：无题干文字，仅居中一枚播放按钮（不占整行高度） */
.suite-prompt.suite-prompt-audio {
    justify-content: center;
    margin-bottom: 6px;
}
.suite-prompt .prompt-tag {
    display: inline-block;
    font-size: 11px;
    color: #28977e;
    background: rgba(40, 151, 126, 0.08);
    border-radius: 6px;
    padding: 2px 8px;
    margin-right: 6px;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.suite-prompt .prompt-meaning {
    display: inline-block;
    
    color: #1e6e58;
    background: rgba(40, 151, 126, 0.1);
    border-radius: 6px;
    padding: 3px 10px;
    font-weight: 600;
}
/* 提示句中的“目标词 / 目标释义”：放大 + 琥珀色高亮，一眼看清 */
.suite-prompt .prompt-word {
    display: inline-block;
   
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #7a4a06;
    background: linear-gradient(135deg, #fff6d8 0%, #ffe3a0 100%);
    border: 1px solid #f0c95a;
    border-radius: 9px;
    padding: 2px 12px;
    margin: 0 3px;
    vertical-align: middle;
    box-shadow: 0 2px 8px rgba(226, 176, 44, 0.28);
}
.suite-prompt .prompt-word-cn {
    
    letter-spacing: 1px;
}

/* 拼写练习模式条：临摹 / 藏元音 / 藏辅音 / 随机挖空 */
.suite-spell-modes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 2px 0 14px;
    padding: 8px 10px;
    background: linear-gradient(180deg, #f4faf8 0%, #edf6f3 100%);
    border: 1px solid #d7e8e3;
    border-radius: 12px;
}
.suite-mode-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #4b5f66;
    background: #ffffff;
    border: 1px solid #d9e5e1;
    border-radius: 999px;
    padding: 5px 13px;
    cursor: pointer;
    transition: all 0.18s ease;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(40, 151, 126, 0.06);
}
.suite-mode-chip i { font-size: 11px; color: #7aa79d; }
.suite-mode-chip .mode-let {
    width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #28977e 0%, #48dbfb 100%);
    border-radius: 50%;
}
.suite-mode-chip:hover {
    color: #28977e;
    border-color: #28977e;
    background: #f7fcfb;
}
.suite-mode-chip.active {
    color: #fff;
    background: linear-gradient(135deg, #28977e 0%, #1e876e 100%);
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(40, 151, 126, 0.3);
}
.suite-mode-chip.active i { color: #fff; }
.suite-mode-chip.active .mode-let {
    background: #fff;
    color: #1e876e;
}


/* 拼写 / 听写 输入框 */
.suite-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 16px;
    border: 1.5px solid #e8eef0;
    border-radius: 10px;
    background: #fff;
    color: #2c3e50;
    letter-spacing: 2px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
    font-weight: 600;
}
.suite-input:focus {
    border-color: #28977e;
    box-shadow: 0 0 0 3px rgba(40,151,126,0.12);
}
.suite-input.correct {
    border-color: #28977e;
    background: rgba(40,151,126,0.06);
}
.suite-input.wrong {
    border-color: #ff6b6b;
    background: rgba(255,107,107,0.06);
    animation: inputShake 0.4s cubic-bezier(0.36,0.07,0.19,0.97);
}
@keyframes inputShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

/* 听写播放按钮 */
.suite-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #28977e, #48dbfb);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(40, 151, 126, 0.25);
    transition: transform 0.2s, box-shadow 0.2s;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
.suite-play-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(40,151,126,0.32); }
.suite-play-btn:active { transform: scale(0.97); }
.suite-play-btn.playing { animation: playPulse 1s ease-in-out infinite; }
@keyframes playPulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(40,151,126,0.25); }
    50%      { box-shadow: 0 4px 22px rgba(40,151,126,0.55); }
}

/* 选项网格 */
.suite-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
.suite-options.two { grid-template-columns: repeat(2, 1fr); }
.suite-option {
    padding: 12px 14px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafb 100%);
    border: 1.5px solid #e8eef0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    line-height: 1.5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    -webkit-tap-highlight-color: transparent;
}
.suite-option:hover:not(:disabled) {
    border-color: #28977e;
    color: #28977e;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(40, 151, 126, 0.15);
}
.suite-option.correct {
    background: linear-gradient(135deg, #28977e 0%, #1e876e 100%);
    color: #fff !important;
    border-color: #28977e;
    box-shadow: 0 6px 20px rgba(40, 151, 126, 0.4);
}
.suite-option.wrong {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    color: #fff !important;
    border-color: #ff6b6b;
    animation: inputShake 0.5s cubic-bezier(0.36,0.07,0.19,0.97);
}
.suite-option:disabled { cursor: default; opacity: 0.95; }

/* 反馈：浮层胶囊（悬浮在题目区顶部上方，带背景色） */
.suite-feedback {
    position: absolute;
    left: 50%;
    top: -14px;
    transform: translate(-50%, -8px) scale(0.92);
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    color: #fff;
    background: linear-gradient(135deg, #2c3238 0%, #101417 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.suite-feedback.show {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    animation: suitePillIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
               suitePillOut 0.18s ease 1.0s forwards;
}
.suite-feedback.show.wrong {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    box-shadow: 0 6px 18px rgba(255, 107, 107, 0.42);
}
@keyframes suitePillIn {
    0% { opacity: 0; transform: translate(-50%, -8px) scale(0.82); }
    60% { opacity: 1; transform: translate(-50%, 2px) scale(1.06); }
    100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes suitePillOut {
    0%   { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -4px) scale(0.96); }
}

/* 操作行 */
.suite-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.suite-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.suite-btn-primary {
    background: linear-gradient(135deg, #28977e, #48dbfb);
    color: #fff;
    box-shadow: 0 4px 12px rgba(40, 151, 126, 0.28);
}
.suite-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(40, 151, 126, 0.35); }
.suite-btn-primary:active { transform: scale(0.97); }
.suite-btn-ghost {
    background: #eef1f2;
    color: #5f7d83;
}
.suite-btn-ghost:hover { background: #e3e8ea; }

/* 全套完成 */
.suite-finish {
    text-align: center;
    padding: 14px 0 4px;
}
.suite-finish h3 {
    margin: 0;
    font-size: 16px;
    color: #28977e;
    letter-spacing: 1px;
}
.suite-finish p {
    margin: 6px 0 0;
    font-size: 13px;
    color: #7a8a90;
}

/* 小屏适配 */
@media (max-width: 480px) {
    .suite-tab .tab-label { font-size: 11px; }
    .suite-stage { padding: 14px 12px; }

    .suite-key { min-width: 22px; height: 32px; font-size: 12px; }
    .suite-cell { width: 28px; height: 40px; font-size: 20px; }
    .suite-cell.current::after { top: -8px; border-left-width: 4px; border-right-width: 4px; border-top-width: 6px; }
    /* .translation 必须提到 (0,2,0) 特异性：pixar.css 在本文件之后加载，
       其 @media(max-width:767.98px) 的 .translation{font-size:0.95rem}
       与本条同为 (0,1,0)，按源码顺序会压掉这里的 0.58em（媒体查询不加特异性）。
       加 .word-card 前缀后稳定获胜，同时把作用域收窄到单词卡。 */
    .word-card .translation {font-size: 0.58em;}
}

/* ====================== 字母方格 + 虚拟键盘（拼写/听写共用） ====================== */
.suite-composer-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;
}
.suite-composer-hint {
    font-size: 12px;
    color: #7a8a90;
}
.suite-composer-head .suite-play-btn {
    padding: 7px 12px;
    font-size: 13px;
}

/* —— 字母方格 —— */
.suite-cells {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 5px;
    margin-bottom: 16px;
    min-height: 56px;
    padding: 14px 4px 6px;
}
.suite-cell {
    position: relative; /* 给 ▼ 小箭头留定位锚点 */
    width: 32px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    /* 听写模式（空格子）：默认不显示字母，仅留下划线 */
    color: transparent;
    border-bottom: 3px solid #b9c6ca;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8f7 100%);
    box-shadow: 0 2px 4px rgba(40, 151, 126, 0.06);
    transition: transform 0.18s, box-shadow 0.2s, border-color 0.2s, background 0.2s, color 0.2s;
}
/* 拼写（临摹）：字母已显示为深色字 */
.suite-cell.shown {
    color:#d6750d;
}
/* 挖空补全（fill）：隐藏字母的空槽 → 小学生喜欢的“米色格纸”感 */
.suite-cell.suite-cell-fill {
    border-bottom: 4px dashed #5fc7a6;
    background:
        repeating-linear-gradient(180deg, transparent 0 6px, rgba(40,151,126,0.04) 6px 7px),
        linear-gradient(180deg, #fffdf3 0%, #fff6dc 100%);
    color: transparent;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        0 2px 0 rgba(212, 175, 55, 0.18),
        0 3px 6px rgba(40, 151, 126, 0.08);
    border-radius: 8px 8px 0 0;
}
/* 听写模式空格子（未隐藏但未填）也走温暖的“纸格”样式 */
.suite-cell:not(.suite-cell-fill):not(.shown):not(.correct) {
    background: linear-gradient(180deg, #fffdf6 0%, #fff8e6 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        0 2px 0 rgba(212, 175, 55, 0.15),
        0 2px 4px rgba(40, 151, 126, 0.05);
}
.suite-cell.suite-cell-fill.current {
    border-bottom-color: #1e876e;
    border-bottom-style: solid; /* 当前要补的空槽变实线，配合柔光呼吸 */
    box-shadow:
        0 0 0 4px rgba(40, 151, 126, 0.18),
        0 4px 14px rgba(40, 151, 126, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transform: translateY(-3px);
    background:
        repeating-linear-gradient(180deg, transparent 0 6px, rgba(40,151,126,0.06) 6px 7px),
        linear-gradient(180deg, #ffffff 0%, #e6f6ee 100%);
    animation: suiteCurBlink 1.1s ease-in-out infinite, suiteCurGlow 1.6s ease-in-out infinite;
}
/* 听写/挖空模式当前格：同样柔光呼吸 + 绿底 */
.suite-cell.current:not(.shown) {
    background: linear-gradient(180deg, #ffffff 0%, #e6f6ee 100%);
    box-shadow:
        0 0 0 4px rgba(40, 151, 126, 0.18),
        0 4px 14px rgba(40, 151, 126, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transform: translateY(-3px);
    animation: suiteCurBlink 1.1s ease-in-out infinite, suiteCurGlow 1.6s ease-in-out infinite;
}
.suite-cell-space {
    width: 18px;
    border-bottom: 3px dashed #b6c2c6;
    background: transparent;
    box-shadow: none;
    color: transparent;
}
/* 拼写模式下的空格显示一个浅灰间隔 */
.suite-cell-space:not(.done-space) {
    color: #c8d2d5;
    font-size: 16px;
}
/* 拼写临摹：还没描到的字母 → 柔和淡化（保留暖色，不去饱和），小学生不刺眼 */
.suite-cell.pending {
    opacity: 0.55;
    box-shadow: none;
    transform: none;
    filter: none;
}
/* 当前要写的字母格：底部标线闪烁 + 头顶小箭头“点这里” */
.suite-cell.current {
    border-bottom-color: #28977e;
    box-shadow:
        0 0 0 4px rgba(40, 151, 126, 0.18),
        0 4px 14px rgba(40, 151, 126, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transform: translateY(-3px);
    background: linear-gradient(180deg, #ffffff 0%, #e8f6f1 100%);
    animation: suiteCurBlink 1.1s ease-in-out infinite, suiteCurGlow 1.6s ease-in-out infinite;
}
/* 当前格头顶小三角 ▼ 轻轻上下弹跳 */
.suite-cell.current::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #28977e;
    transform: translateX(-50%);
    animation: suiteArrowBob 1.1s ease-in-out infinite;
    filter: drop-shadow(0 1px 1px rgba(40,151,126,0.35));
    pointer-events: none;
}
@keyframes suiteArrowBob {
    0%, 100% { transform: translateX(-50%) translateY(0);   opacity: 0.85; }
    50%      { transform: translateX(-50%) translateY(3px); opacity: 1; }
}
/* 临摹模式当前字母：颜色加深 + 微微放大，第一眼就能锁定 */
.suite-cell.current.shown {
    color: #c2600a;
    transform: translateY(-3px) scale(1.08);
}
/* 标线闪烁：青绿 ↔ 浅青，像打字光标一样“一下一下”提示 */
@keyframes suiteCurBlink {
    0%, 60%   { border-bottom-color: #1e876e; }
    61%, 100% { border-bottom-color: #7fd8c6; }
}
/* 当前格柔光呼吸：外圈光晕的扩张收缩 */
@keyframes suiteCurGlow {
    0%, 100% { box-shadow: 0 0 0 4px rgba(40,151,126,0.18), 0 4px 14px rgba(40,151,126,0.4), inset 0 1px 0 rgba(255,255,255,0.9); }
    50%      { box-shadow: 0 0 0 9px rgba(40,151,126,0.06), 0 6px 18px rgba(40,151,126,0.55), inset 0 1px 0 rgba(255,255,255,0.9); }
}
/* 已描中/填对：实心青绿、白字 */
.suite-cell.correct {
    color: #fff !important;
    background: linear-gradient(135deg, #28977e 0%, #1e876e 100%);
    border-bottom-color: #28977e;
    box-shadow: 0 4px 12px rgba(40, 151, 126, 0.35);
    animation: cellPop 0.25s ease;
}
/* 听写中的空格被自动跳过/填满 */
.suite-cell-space.correct.space-filled {
    background: transparent;
    border-bottom: 3px dashed #28b492;
    color: transparent;
    box-shadow: none;
    animation: none;
}
/* 拼写模式空格仍占一个短浅色条 */
.suite-cell-space.shown-space.correct,
.suite-cell-space:not(.done-space).correct {
    background: transparent;
    box-shadow: none;
    color: #9db8bd;
    border-bottom: 3px dashed #b9d4d0;
    animation: none;
}
@keyframes cellPop {
    0% { transform: scale(0.85); }
    60% { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.suite-cell.wrong {
    color: #fff;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    border-bottom-color: #ff6b6b;
    animation: cellShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes cellShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}

/* —— 虚拟键盘 —— */
.suite-kb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 6px 4px;
    background: linear-gradient(180deg, #f8fafb 0%, #eef3f4 100%);
    border-radius: 12px;
    border: 1px solid #e0e7e8;
    box-shadow: inset 0 1px 0 #fff;
}
.suite-kb-row {
    display: flex;
    justify-content: center;
    gap: 4px;
    width: 100%;
}
.suite-kb-row.suite-kb-bottom {
    margin-top: 4px;
    gap: 8px;
}
.suite-key {
    flex: 1 1 auto;
    min-width: 26px;
    height: 38px;
    padding: 0 6px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #eef3f4 100%);
    box-shadow: 0 2px 0 #c4cccf, 0 3px 6px rgba(0, 0, 0, 0.06);
    color: #2c3e50;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;

    user-select: none;
}

.suite-key:active:not(:disabled),
.suite-key.pressed:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #c4cccf, 0 1px 2px rgba(0, 0, 0, 0.05);
    background: linear-gradient(180deg, #eef3f4 0%, #ffffff 100%);
}
.suite-key:disabled { opacity: 0.55; cursor: default; }

.suite-key.suite-key-back,
.suite-key.suite-key-shift {
    flex: 0 0 auto;
    min-width: 96px;
    background: linear-gradient(180deg, #2a2f3a 0%, #1c2028 100%);
    color: #fff;
    box-shadow: 0 2px 0 #0d1015, 0 3px 8px rgba(0, 0, 0, 0.18);
    font-size: 13px;
    font-weight: 600;
    /* 缩短过渡，避免"闪"——按下瞬间完成亮一档，松开瞬间恢复 */
    transition: background 0.08s ease, box-shadow 0.08s ease, transform 0.08s ease;
}
.suite-key.suite-key-shift.active {
    background: linear-gradient(180deg, #ffffff 0%, #f1f3f6 100%);
    color: #1c2028;
    box-shadow: 0 2px 0 #c0c5cc, 0 3px 8px rgba(0, 0, 0, 0.12);
    transition: background 0.08s ease, box-shadow 0.08s ease, transform 0.08s ease;
}
/* 黑底功能键按下时不要变色/不要跳动，只轻微亮一档——避免"闪"的视觉跳变 */
.suite-key.suite-key-back:active:not(:disabled),
.suite-key.suite-key-shift:active:not(:disabled) {
    background: linear-gradient(180deg, #3a4150 0%, #2a2f3a 100%);
    box-shadow: 0 2px 0 #0d1015, 0 1px 4px rgba(0, 0, 0, 0.18);
    transform: translateY(1px);
}

/* =====================================================================
   训练抽屉（Action Sheet）—— 合并"测试"与"练习套件"的移动端入口
   - 主按钮只有一个（.control-btn.train-btn），避免移动端按钮挤压
   - 点击后从底部弹出抽屉，两个大卡片供用户选择模式
   - 两套测试互斥，切换自如；同一时刻只展示一种
   ===================================================================== */

/* —— 主按钮：合并后的训练入口（黑色 + 青绿描边点缀） —— */
.control-btn.train-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #111;
    color: #fff !important;
    border: 1px solid #2a2a2a;
    border-radius: 22px;
    cursor: pointer;
    font-weight: 650;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.control-btn.train-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.55s ease;
    pointer-events: none;
}
.control-btn.train-btn:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    transform: translateY(-1px);
}
.control-btn.train-btn:hover::before {
    transform: translateX(100%);
}
.control-btn.train-btn:active {
    transform: scale(0.97);
}
.control-btn.train-btn.active {
    background: #000;
    border-color: #28977e;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45),
                0 0 0 1px rgba(40, 151, 126, 0.4),
                inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.control-btn.train-btn .train-btn-icon {
    font-size: 14px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
.control-btn.train-btn .train-btn-label {
    white-space: nowrap;
}
.control-btn.train-btn .train-btn-chevron {
    font-size: 10px;
    margin-left: 2px;
    transition: transform 0.3s ease;
    opacity: 0.9;
}
.control-btn.train-btn.active .train-btn-chevron {
    transform: rotate(180deg);
}

/* —— 抽屉容器（挂在 .word-card 内，避免影响其他卡片） —— */
.train-sheet-mask {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    z-index: 9990;
    transition: opacity 0.32s ease;
}
.train-sheet-mask.show {
    opacity: 1;
}
.train-sheet {
    position: fixed;
    top: 50%;
    left: 50%;
    width: calc(100% - 32px);
    max-width: 520px;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.28);
    padding: 8px 16px 18px;
    z-index: 9991;
    /* 水平 + 垂直居中；入场从下方上浮到正中 */
    transform: translate(-50%, calc(-50% + 40px));
    opacity: 0;
    transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    will-change: transform;
}
.train-sheet.show {
    transform: translate(-50%, -50%);
    opacity: 1;
}

/* 顶部拖动条（视觉提示） */
.train-sheet-handle {
    width: 42px;
    height: 4px;
    margin: 8px auto 14px;
    background: rgba(15, 23, 42, 0.12);
    border-radius: 999px;
}

/* 头部 */
.train-sheet-header {
    text-align: center;
    margin-bottom: 14px;
}
.train-sheet-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.5px;
}
.train-sheet-sub {
    margin-top: 4px;
    font-size: 12px;
    color: #94a3b8;
    letter-spacing: 0.3px;
}

/* 两张大选项卡 */
.train-sheet-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.train-sheet-card {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    position: relative;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.train-sheet-card:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}
.train-sheet-card:active {
    transform: scale(0.97);
}
.train-sheet-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}
.train-sheet-card-icon-test {
    background: linear-gradient(135deg, #28977e 0%, #48dbfb 100%);
}
.train-sheet-card-icon-suite {
    background: linear-gradient(135deg, #f97316 0%, #facc15 100%);
}
.train-sheet-card-info {
    flex: 1;
    min-width: 0;
}
.train-sheet-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}
.train-sheet-card-desc {
    margin-top: 4px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
    /* 限制两行省略，避免长描述撑高 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.train-sheet-card-arrow {
    position: absolute;
    top: 14px;
    right: 12px;
    color: #cbd5e1;
    font-size: 11px;
    transition: transform 0.2s ease, color 0.2s ease;
}
.train-sheet-card:hover .train-sheet-card-arrow {
    color: #28977e;
    transform: translateX(2px);
}

/* 取消按钮 */
.train-sheet-cancel {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 12px;
    background: #f1f5f9;
    border: none;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}
.train-sheet-cancel:hover {
    background: #e2e8f0;
}
.train-sheet-cancel:active {
    transform: scale(0.98);
}

/* —— 小屏适配 —— */
@media (max-width: 420px) {
    .train-sheet {
        padding: 8px 12px 14px;
        border-radius: 20px;
        width: calc(100% - 24px);
    }
    .train-sheet-grid {
        grid-template-columns: 1fr; /* 超窄屏单列，更易读 */
        gap: 8px;
    }
    .train-sheet-card {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
    }
    .train-sheet-card-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
        flex-shrink: 0;
    }
    .train-sheet-card-title {
        font-size: 13px;
    }
    .train-sheet-card-desc {
        font-size: 10px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
    .train-sheet-card-arrow {
        position: static;
        margin-left: auto;
    }
}

/* 中等屏（两列保持） */
@media (min-width: 421px) and (max-width: 480px) {
    .train-sheet-grid {
        grid-template-columns: 1fr;
    }
    .train-sheet-card {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
    }
    .train-sheet-card-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
        flex-shrink: 0;
    }
    .train-sheet-card-arrow {
        position: static;
        margin-left: auto;
    }
}
/* ====================== 课本句子测试（单词卡片内嵌，复用 .suite-* 视觉） ======================
   在卡片 .test-area 内筛出“当前单词对应课本句子”，选择题/拼写题 tab 切换。
   word_sentence_test.js 渲染，与练习套件共用 #28977e 绿主色与米色格纸氛围。
=================================================================*/
.word-sentence-test {
    position: relative;
    padding: 14px 14px 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    overflow: hidden;
}
.word-sentence-test::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff9f43, #feca57, #ff9f43);
    background-size: 200% 100%;
    animation: suiteShimmer 3s linear infinite;
}
.wst-word { color: #28977e; font-weight: 700; }

/* —— 题型切换条（选择题 / 拼写题） —— */
.wst-typebar {
    display: flex;
    gap: 6px;
    margin: 2px 4px 12px;
    background: #eef3f1;
    border-radius: 999px;
    padding: 3px;
}
.wst-type {
    flex: 1;
    border: none;
    padding: 7px 0;
    font-size: 13px;
    font-weight: 600;
    color: #6b7f85;
    background: transparent;
    border-radius: 999px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s;
}
.wst-type.active {
    background: linear-gradient(135deg, #28977e, #48dbfb);
    color: #fff;
    box-shadow: 0 3px 10px rgba(40, 151, 126, 0.25);
}

/* —— 题目统计行 —— */
.wst-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #7a8a90;
    margin: 0 2px 10px;
    flex-wrap: wrap;
}
.wst-qcard {
    background: #fff;
    border: 1px solid #e8eef0;
    border-radius: 14px;
    padding: 14px 14px 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}
.wst-zh {
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.6;
    margin-bottom: 8px;
}
.wst-zh-word b { color: #28977e; }
.wst-en {
    text-align: center;
    font-size: 17px;
    color: #34495e;
    line-height: 1.8;
    margin-bottom: 6px;
    word-break: break-word;
}
.wst-blank {
    display: inline-block;
    min-width: 56px;
    border-bottom: 2px solid #28977e;
    margin: 0 2px;
    vertical-align: baseline;
}
.wst-tools {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 4px 0 10px;
    flex-wrap: wrap;
}
.wst-sound {
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.wst-sound img { width: 24px; height: 24px; }
.wst-sound.playing img { animation: tts-breathe 0.9s infinite; }
.wst-tag {
    font-size: 12px;
    color: #7a8a90;
    background: #eef3f1;
    padding: 3px 10px;
    border-radius: 999px;
}
/* 反馈：浮层胶囊（悬浮在题目区顶部上方，带背景色） */
.wst-stage-wrap {
    position: relative;
}
.wst-feedback {
    position: absolute;
    left: 50%;
    top: -14px;
    transform: translate(-50%, -8px) scale(0.92);
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    color: #fff;
    background: linear-gradient(135deg, #2c3238 0%, #101417 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.wst-feedback.show {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    animation: wstPillIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
               wstPillOut 0.18s ease 1.0s forwards;
}
.wst-feedback.show.wrong {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    box-shadow: 0 6px 18px rgba(255, 107, 107, 0.42);
}
@keyframes wstPillIn {
    0% { opacity: 0; transform: translate(-50%, -8px) scale(0.82); }
    60% { opacity: 1; transform: translate(-50%, 2px) scale(1.06); }
    100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes wstPillOut {
    0%   { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -4px) scale(0.96); }
}

.wst-optkey {
    display: inline-block;
    width: 22px; height: 22px;
    border-radius: 6px;
    background: linear-gradient(135deg, #e8f5f2, #e0f2fe);
    color: #28977e;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 22px;
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* 选项：2 列网格，一行两个，对齐练习套件 2×2 选择题 */
.wst-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}
.wst-option {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1.5px solid #e8eef0;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 14px;
    color: #34495e;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    line-height: 1.4;
    word-break: break-word;
}
.wst-option:hover:not(:disabled) {
    border-color: #28977e;
    background: #f1fbf8;
}
.wst-option:disabled { cursor: default; }
.wst-option.correct {
    background: #e6f7f1;
    border-color: #28977e;
    color: #1e876e;
    box-shadow: 0 0 0 2px rgba(40,151,126,0.18);
}
.wst-option.wrong {
    background: #ffecec;
    border-color: #ff6b6b;
    color: #d64545;
    animation: wstShake 0.4s;
}
.wst-option.reveal {
    border-color: #28977e;
    background: #f1fbf8;
}
@keyframes wstShake {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
@media (max-width: 360px) {
    .wst-option { font-size: 13px; padding: 9px 10px; }
    .wst-options { gap: 6px; }
    .suite-options.two { grid-template-columns: 1fr; }
    .suite-option {font-size: 11px;}
    .suite-prompt {font-size:12px;}
}

/* —— 拼写格纸 —— */
.wst-spell-hint {
    text-align: center;
    font-size: 12px;
    color: #7a8a90;
    margin-bottom: 10px;
}
.wst-cells {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px;
}
.wst-cell {
    width: 34px; height: 44px;
    border: 1.5px dashed #c7d6d2;
    border-bottom: 3px solid #bcd9d2;
    border-radius: 8px 8px 4px 4px;
    background: #fdfaf2;
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
    text-align: center;
    line-height: 42px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s;
}
.wst-cell.on {
    border-color: #28977e;
    box-shadow: 0 0 0 3px rgba(40,151,126,0.12);
    background: #f1fbf8;
}
.wst-cell.ok { border-color: #28977e; background: #e6f7f1; color: #1e876e; border-style: solid; }
.wst-cell.bad { border-color: #ff6b6b; background: #ffecec; color: #d64545; border-style: solid; }
.wst-cell-gap { width: 14px; }
.wst-pool {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.wst-lt {
    width: 38px; height: 42px;
    border: 1.5px solid #dbe6e3;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff, #eef3f1);
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    -webkit-tap-highlight-color: transparent;
    transition: all 0.12s;
}
.wst-lt:hover:not(:disabled) { transform: translateY(-2px); border-color: #28977e; color: #28977e; }
.wst-lt:disabled { opacity: 0.4; cursor: default; }
.wst-ctl {
    display: flex;
    justify-content: center;
    gap: 8px;
}

/* —— 完成 / 错题 —— */
.wst-finish p { line-height: 1.8; }
.wst-wronglist {
    margin-top: 10px;
    text-align: left;
    background: #fff7f7;
    border: 1px solid #ffe1e1;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 13px;
    color: #5f7d83;
    max-height: 180px;
    overflow-y: auto;
}
.wst-wrongitem { margin: 6px 0; line-height: 1.6; }
.wst-wrongitem .wst-enw { color: #d64545; }

/* 训练总结区块（套件用，中性背景） */
.wst-summary {
    margin-top: 10px;
    text-align: left;
    background: #f1f9f7;
    border: 1px solid #c9e7df;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 13px;
    color: #355;
    line-height: 1.8;
}
.wst-summary b { color: #28977e; }
.wst-confetti {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 5;
}
.wst-confetti span { position: absolute; }

/* —— 抽屉：课本句子图标配色 —— */
.train-sheet-card-icon-sentence {
    background: linear-gradient(135deg, #ff9f43, #feca57) !important;
}
.train-sheet-card-icon-sentence i { color: #fff !important; }

/* =========================================================================
   2026-10-07 九档响应式重建（修复「拼写模式下页面突然变大/变形」）
   —— 病根：本文件 1344 行的 @media (max-width:360px) 出现在文件靠后位置，
      会把前面任何小屏压缩规则「反压回去」（同特异性、后写赢），导致
      .suite-cell / .suite-key 在小屏仍是桌面尺寸 → 字母格 + 虚拟键盘
      横向溢出、整卷被撑大。这里统一用 !important 一次性压过所有迟到覆盖。
   —— 阶梯值与 tmp/train_sheet_redesign/probe_tests_ui.cjs 期望表逐项对齐：
      8 个断点 369/409/449/589/779/999/1259/1499 + 基线(≥1500)，
      并保证跨断点严格递增（杜绝「一档管一大段屏」的平台期）。
   ========================================================================= */
@media (max-width: 369px) {
    .suite-option { font-size: 11.5px !important; }
    .suite-cell { width: 22px !important; height: 32px !important; font-size: 15px !important; }
    .suite-key { height: 28px !important; font-size: 11.5px !important; padding: 0 4px !important; }
    .suite-key.suite-key-back, .suite-key.suite-key-shift { min-width: 62px !important; font-size: 11px !important; }
    .suite-prompt { font-size: 12.5px !important; }
    .suite-prompt > .suite-play-btn { width: 26px !important; height: 26px !important; }
    .wst-option { font-size: 11px !important; padding: 8px 10px !important; }
    .wst-cell { width: 22px !important; height: 32px !important; font-size: 15px !important; line-height: 30px !important; }
    .wst-lt { width: 26px !important; height: 30px !important; font-size: 13px !important; }
    .wst-en { font-size: 14px !important; }
    .test-option { font-size: 11px !important; padding: 9px 10px 9px 36px !important; }
    .test-sentence { font-size: 12.5px !important; }
    .train-sheet { padding: 8px 10px 12px !important; width: calc(100% - 20px) !important; }
}
@media (min-width: 370px) and (max-width: 409px) {
    .suite-option { font-size: 12px !important; }
    .suite-cell { width: 24px !important; height: 34px !important; font-size: 16px !important; }
    .suite-key { height: 30px !important; font-size: 12px !important; padding: 0 5px !important; }
    .suite-key.suite-key-back, .suite-key.suite-key-shift { min-width: 68px !important; font-size: 11.5px !important; }
    .suite-prompt { font-size: 13px !important; }
    .suite-prompt > .suite-play-btn { width: 27px !important; height: 27px !important; }
    .wst-option { font-size: 11.5px !important; }
    .wst-cell { width: 24px !important; height: 34px !important; font-size: 16px !important; line-height: 32px !important; }
    .wst-lt { width: 28px !important; height: 32px !important; font-size: 14px !important; }
    .test-option { font-size: 11.5px !important; }
    .test-sentence { font-size: 12.8px !important; }
}
@media (min-width: 410px) and (max-width: 449px) {
    .suite-option { font-size: 12.5px !important; }
    .suite-cell { width: 25px !important; height: 35px !important; font-size: 17px !important; }
    .suite-key { height: 31px !important; font-size: 12.5px !important; }
    .suite-prompt { font-size: 13.5px !important; }
    .suite-prompt > .suite-play-btn { width: 28px !important; height: 28px !important; }
    .wst-option { font-size: 12px !important; }
    .wst-cell { width: 25px !important; height: 35px !important; font-size: 17px !important; line-height: 33px !important; }
    .wst-lt { width: 29px !important; height: 33px !important; font-size: 14.5px !important; }
    .test-option { font-size: 12px !important; }
    .test-sentence { font-size: 13px !important; }
}
@media (min-width: 450px) and (max-width: 589px) {
    .suite-option { font-size: 13px !important; }
    .suite-cell { width: 26px !important; height: 37px !important; font-size: 18px !important; }
    .suite-key { height: 32px !important; font-size: 13px !important; }
    .suite-prompt { font-size: 14px !important; }
    .wst-option { font-size: 12.5px !important; }
    .wst-cell { width: 26px !important; height: 37px !important; font-size: 18px !important; line-height: 35px !important; }
    .wst-lt { width: 30px !important; height: 34px !important; font-size: 15px !important; }
    .test-option { font-size: 12.5px !important; }
    .test-sentence { font-size: 13.5px !important; }
}
@media (min-width: 590px) and (max-width: 779px) {
    .suite-option { font-size: 13.5px !important; }
    .suite-cell { width: 28px !important; height: 39px !important; font-size: 19px !important; }
    .suite-key { height: 34px !important; font-size: 13.5px !important; }
    .suite-prompt { font-size: 14px !important; }
    .wst-option { font-size: 13px !important; }
    .wst-cell { width: 28px !important; height: 39px !important; font-size: 19px !important; line-height: 37px !important; }
    .wst-lt { width: 32px !important; height: 36px !important; font-size: 15.5px !important; }
    .test-option { font-size: 13px !important; }
    .test-sentence { font-size: 14px !important; }
    /* 平板起：课本句子/例句选项强制单行不折行，避免多行撑高 */
    .wst-option { word-break: normal !important; }
}
@media (min-width: 780px) and (max-width: 999px) {
    .suite-option { font-size: 13.5px !important; }
    .suite-cell { width: 28px !important; height: 40px !important; font-size: 20px !important; }
    .suite-key { height: 34px !important; font-size: 13.5px !important; }
    .wst-option { font-size: 13px !important; word-break: normal !important; }
    .test-option { font-size: 13px !important; }
    .test-sentence { font-size: 14px !important; }
}
@media (min-width: 1000px) and (max-width: 1259px) {
    .suite-option { font-size: 13.5px !important; }
    .suite-cell { width: 28px !important; height: 41px !important; font-size: 20px !important; }
    .suite-key { height: 34px !important; font-size: 13.5px !important; }
    .wst-option { font-size: 13px !important; word-break: normal !important; }
    .test-option { font-size: 13px !important; }
    .test-sentence { font-size: 14px !important; }
}
@media (min-width: 1260px) and (max-width: 1499px) {
    .suite-option { font-size: 13.5px !important; }
    .suite-cell { width: 29px !important; height: 42px !important; font-size: 21px !important; }
    .suite-key { height: 34px !important; font-size: 13.5px !important; }
    .wst-option { font-size: 13px !important; word-break: normal !important; }
    .test-option { font-size: 13px !important; }
    .test-sentence { font-size: 14px !important; }
}
@media (min-width: 1500px) {
    .suite-option { font-size: 14px !important; }
    .suite-cell { width: 30px !important; height: 44px !important; font-size: 22px !important; }
    .suite-key { height: 36px !important; font-size: 14px !important; }
    .wst-option { font-size: 14px !important; }
    .test-option { font-size: 14px !important; }
    .test-sentence { font-size: 15px !important; }
}
/* 手机全档强制两列（压过 1344 行的 .suite-options.two → 1fr） */
@media (max-width: 779px) {
    .suite-options.two { grid-template-columns: repeat(2, 1fr) !important; }
}
/* 课本句子选项：全档单行不折行 + 收紧竖直内边距（压过基础 padding:10px 12px） */
@media (max-width: 589px) {
    .wst-option { word-break: normal !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; padding: 8px 10px !important; }
    .wst-option > span { overflow: hidden; text-overflow: ellipsis; }
}
/* 套件外壳在窄屏「不撑宽」收口：头部/工具区/Tab/进度条不得把 .word-practice-suite
   顶到视口之外（320px 实测 366px → 溢出根因在 .suite-tabs 的 4 列网格 + 头部间距）
   ⚠ 真根因：.test-area 是 .phoneme-mapping（column flex）的 flex 项，
     min-width:auto 使其无法收缩到 280px 容器宽以内 → 必须显式 min-width:0 */
.test-area { min-width: 0 !important; max-width: 100% !important; }
@media (max-width: 409px) {
    .word-practice-suite { padding: 12px 10px 14px !important; }
    .suite-header { gap: 6px !important; margin: 2px 0 10px !important; }
    .suite-title { font-size: 13px !important; }
    .suite-tabs { gap: 5px !important; }
    .suite-tab { padding: 8px 2px 7px !important; border-radius: 10px !important; }
    .suite-tab .tab-icon { width: 22px !important; height: 22px !important; font-size: 11px !important; }
    .suite-tab .tab-label { font-size: 11px !important; letter-spacing: 0 !important; }
    .suite-stage { padding: 12px 10px !important; }
    .suite-progress { min-width: 0 !important; }
    /* 2026-10-07 用户点名：4 个模式 chip 手机端一行并排（分段控件式均分，不折行） */
    .suite-spell-modes { flex-wrap: nowrap !important; gap: 4px !important; padding: 6px 6px !important; }
    .suite-mode-chip { flex: 1 1 0 !important; min-width: 0 !important; justify-content: center !important; padding: 5px 4px !important; font-size: 11px !important; white-space: nowrap !important; }
}
@media (max-width: 369px) {
    .suite-tabs { gap: 4px !important; }
    .suite-tab { padding: 7px 1px 6px !important; }
    .suite-tab .tab-icon { width: 20px !important; height: 20px !important; font-size: 10px !important; }
    .suite-tab .tab-label { font-size: 10.5px !important; }
    .suite-tab .tab-step { min-width: 16px !important; height: 16px !important; font-size: 10px !important; top: -5px !important; left: -5px !important; }
    /* 模式条 chip 再收一档（320px 实测每格 ~55px，4 字「随机挖空」需 ~50px） */
    .suite-spell-modes { gap: 3px !important; padding: 6px 4px !important; }
    .suite-mode-chip { padding: 4px 3px !important; font-size: 10.5px !important; }
    /* 10 键一行必须在容器内放下：min-width + gap + kb 内边距三管齐下 */
    .suite-kb { padding: 8px 3px 3px !important; gap: 4px !important; }
    .suite-kb-row { gap: 2px !important; }
    .suite-key { min-width: 0 !important; padding: 0 2px !important; }
    .suite-key.suite-key-back, .suite-key.suite-key-shift { min-width: 46px !important; }
}
@media (min-width: 370px) and (max-width: 449px) {
    .suite-kb { padding: 9px 4px 4px !important; }
    .suite-kb-row { gap: 3px !important; }
    .suite-key { min-width: 0 !important; padding: 0 3px !important; }
    .suite-key.suite-key-back, .suite-key.suite-key-shift { min-width: 54px !important; }
}

/* 小屏适配 */
@media (max-width: 420px) {
    .wst-cell { width: 30px; height: 40px; font-size: 17px; line-height: 38px; }
    .wst-lt { width: 34px; height: 38px; font-size: 16px; }
    .wst-en { font-size: 16px; }
}