/* cards.css - 霓虹拼读单词卡公共样式
   背景/卡片翻转/玻璃拟态/霓虹文字/掌握状态/开关/图例/拼读动画
   所有每日单词页面共享,样式修改只需改本文件 */
        /* 全局科技背景 */
        body {
            background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
            background-attachment: fixed;
            position: relative;
            overflow-x: hidden;
        }
        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:
                radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.15) 0%, transparent 50%);
            pointer-events: none;
            z-index: 0;
        }

        /* 卡片翻转动画 */
        .card-container {
            perspective: 1000px;
        }
        .card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            transform-style: preserve-3d;
        }
        .card-container.flipped .card-inner {
            transform: rotateY(180deg);
        }
        .card-front, .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 20px;
        }
        .card-back {
            transform: rotateY(180deg);
        }

        /* 玻璃拟态卡片 */
        .glass-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }
        .card-container:hover .glass-card {
            border-color: rgba(96, 165, 250, 0.5);
            box-shadow: 0 0 20px rgba(96, 165, 250, 0.3), 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        /* 霓虹文字 */
        .neon-text {
            text-shadow: 0 0 10px rgba(96, 165, 250, 0.8), 0 0 20px rgba(96, 165, 250, 0.4);
        }
        .neon-purple {
            text-shadow: 0 0 10px rgba(168, 85, 247, 0.8), 0 0 20px rgba(168, 85, 247, 0.4);
        }

        /* 掌握状态 */
        .mastered .card-front {
            border-color: rgba(16, 185, 129, 0.6) !important;
            box-shadow: 0 0 20px rgba(16, 185, 129, 0.3) !important;
        }
        .mastered .card-front::after {
            content: "✓ 已掌握";
            position: absolute;
            top: 14px;
            right: 14px;
            color: #10b981;
            font-weight: 600;
            font-size: 14px;
            text-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
        }

        /* 开关样式 */
        .toggle-switch {
            position: relative;
            width: 52px;
            height: 28px;
        }
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: 0.3s;
            border-radius: 28px;
        }
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 22px;
            width: 22px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            transition: 0.3s;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }
        input:checked + .toggle-slider {
            background: linear-gradient(90deg, #3b82f6, #a855f7);
            border-color: transparent;
            box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
        }
        input:checked + .toggle-slider:before {
            transform: translateX(24px);
        }

        /* 图例说明 */
        .legend-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 6px;
            vertical-align: middle;
        }

        /* 逐字母拼读动画 */
        .phoneme-part {
            display: inline-block;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            transform-origin: center bottom;
        }
        /* 同一个单词的拼读分段不许从单词中间断行，只允许在词间空格处换行（长短语如 be worried about）。
           只作用于卡片正面：导图节点宽度固定，nowrap 会撑破节点，那边故意不加 */
        .card-front .phoneme-word {
            white-space: nowrap;
        }
        .phoneme-highlight {
            transform: scale(1.25) translateY(-2px);
            filter: brightness(1.6);
            text-shadow: 0 0 12px currentColor, 0 0 24px currentColor;
        }
        /* 音标行的分段：与字母行同一个 data-index，拼读时两边一起亮。
           .phoneme-highlight 是通用类，但 transform 吃不到 inline 元素上，所以这里得自己声明 inline-block 与过渡 */
        .ph-seg {
            display: inline-block;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            transform-origin: center bottom;
        }
        /* 合写段（两个以上字母只读一个音，如 baseball 的 eb、skipping 的 pp）：虚线下划线点出来，悬停有说明 */
        .phoneme-part.merged { border-bottom: 2px dotted rgba(148, 163, 184, .8); }
        /* 哑音字母：词库里有字母却没有对应音标（chilies / prize 结尾的 e）。灰掉并划掉，
           拼读点亮到它时把划线放开——读到这一格没声音，正好是“它不发音”这件事本身 */
        .phoneme-part.silent {
            color: #64748b;
            opacity: .8;
            text-decoration: line-through;
            text-decoration-thickness: 2px;
            text-decoration-color: rgba(100, 116, 139, .9);
        }
        .phoneme-part.silent.phoneme-highlight {
            color: #e2e8f0;
            opacity: 1;
            text-decoration: none;
        }

        /* 整体复读高亮 */
        .word-display {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            transform-origin: center;
        }
        .whole-word-highlight {
            transform: scale(1.15);
            filter: brightness(1.8);
            text-shadow: 0 0 18px currentColor, 0 0 36px currentColor;
        }

        /* 返回首页入口（顶部导航左侧） */
        .back-home {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 6px 14px;
            border-radius: 9999px;
            font-size: 1rem;
            color: rgb(148 163 184);
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.12);
            text-decoration: none;
            transition: all 0.25s ease;
            white-space: nowrap;
        }
        .back-home:hover {
            color: #fff;
            background: rgba(96, 165, 250, 0.18);
            border-color: rgba(96, 165, 250, 0.6);
            box-shadow: 0 0 14px rgba(96, 165, 250, 0.35);
        }

        /* 日期徽章（由 cards.js 根据页面文件名生成） */
        .page-date {
            padding: 3px 10px;
            border-radius: 9999px;
            font-size: 0.875rem;
            color: rgb(103 232 249);
            background: rgba(34, 211, 238, 0.1);
            border: 1px solid rgba(34, 211, 238, 0.3);
            white-space: nowrap;
        }

        /* 单元徽章（单日页跟在日期徽章后，由 cards.js 查 days.js 的 DAY_UNITS 生成） */
        .page-unit {
            padding: 3px 10px;
            border-radius: 9999px;
            font-size: 0.875rem;
            color: rgb(196 181 253);
            background: rgba(167, 139, 250, 0.12);
            border: 1px solid rgba(167, 139, 250, 0.35);
            white-space: nowrap;
        }

        /* 卡片右上角的单元角标：仅多日/全部合集（含 ≥2 个单元）时渲染 */
        .card-unit {
            position: absolute;
            top: 12px;
            right: 14px;
            z-index: 1;
            padding: 2px 8px;
            border-radius: 9999px;
            font-size: 0.75rem;
            color: rgb(196 181 253);
            background: rgba(167, 139, 250, 0.14);
            border: 1px solid rgba(167, 139, 250, 0.35);
            pointer-events: none;
        }
        /* 来源日进度镜像：合集页里照一下单日那栏已经掌握/毕业（只读，不可点）。
           右上角已被单元徽占掉，所以这枚放左上 */
        .card-from {
            position: absolute;
            top: 12px;
            left: 14px;
            z-index: 1;
            padding: 2px 8px;
            border-radius: 9999px;
            font-size: 0.75rem;
            color: rgb(110 231 183);
            background: rgba(16, 185, 129, 0.12);
            border: 1px solid rgba(16, 185, 129, 0.32);
            pointer-events: none;
        }
        .card-from.grad {
            color: rgb(103 232 249);
            background: rgba(34, 211, 238, 0.12);
            border-color: rgba(34, 211, 238, 0.32);
        }

        /* 顶栏日期切换（统一入口 day.html?d=…） */
        .day-switch {
            padding: 5px 10px;
            border-radius: 9999px;
            font-size: 0.95rem;
            color: rgb(226 232 240);
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.14);
            cursor: pointer;
            max-width: 170px;
        }
        .day-switch:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(103, 232, 249, 0.45); }
        .day-switch option { background: rgb(15, 23, 42); color: rgb(226 232 240); }

        /* ===== 扩展记忆思维导图（关联单词） ===== */
        /* 默认隐藏，由 cards.js 切换 .mm-open 显示（不依赖 Tailwind 的 .hidden，避免样式加载顺序问题） */
        .mm-overlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 999;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: rgba(2, 6, 23, 0.78);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
        }
        .mm-overlay.mm-open {
            display: flex;
        }
        .mm-panel {
            width: min(1200px, 100%);
            max-height: 94vh;
            overflow-y: auto;
            padding: 20px 26px 16px;
            border-radius: 20px;
            background: rgba(15, 23, 42, 0.92);
            border: 1px solid rgba(148, 163, 184, 0.25);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
        }
        .mm-head {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }
        .mm-head h3 { font-size: 1.35rem; font-weight: 700; }
        .mm-title { display: flex; align-items: baseline; gap: 10px; flex: 1; flex-wrap: wrap; }
        .mm-word { font-size: 1.15rem; font-weight: 700; color: rgb(226 232 240); }
        .mm-phon { font-size: 1rem; }
        .mm-say, .mm-close {
            cursor: pointer;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 10px;
            color: rgb(203 213 225);
            font-size: 1rem;
            padding: 4px 10px;
            transition: all 0.2s ease;
            margin-left: auto;
        }
        .mm-say:hover, .mm-close:hover { background: rgba(96, 165, 250, 0.22); color: #fff; }
        .mm-body { padding: 6px 0 2px; }
        .mm-svg { display: block; width: 100%; height: auto; }
        .mm-foot { padding-top: 8px; font-size: 0.85rem; color: rgb(100 116 139); text-align: center; }
        .mm-empty { padding: 60px 0; text-align: center; color: rgb(148 163 184); font-size: 1.05rem; }

        /* 连线 */
        .mm-edge { fill: none; stroke-width: 2.5; opacity: 0.55; }
        .mm-edge.mm-family { stroke: #34d399; }
        .mm-edge.mm-root { stroke: #22d3ee; }
        .mm-edge.mm-syn { stroke: #a78bfa; }
        .mm-edge.mm-ant { stroke: #fb923c; }
        .mm-edge.mm-look { stroke: #f472b6; }

        /* 节点通用 */
        .mm-center, .mm-group, .mm-leaf {
            box-sizing: border-box;
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            border-radius: 12px;
            text-align: center;
            overflow: hidden;
        }
        .mm-center {
            padding: 6px;
            background: rgba(30, 41, 59, 0.95);
            border: 2px solid rgba(96, 165, 250, 0.75);
            box-shadow: 0 0 24px rgba(96, 165, 250, 0.35);
        }
        .mm-center strong { font-size: 30px; line-height: 1.15; color: #fff; }
        .mm-center span { font-size: 15px; color: rgb(148 163 184); }
        .mm-group {
            font-size: 19px;
            font-weight: 600;
            color: rgb(226 232 240);
            background: rgba(15, 23, 42, 0.92);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        .mm-group b { font-size: 14px; opacity: 0.75; margin-left: 5px; }
        .mm-leaf {
            padding: 5px 8px;
            background: rgba(255, 255, 255, 0.045);
            border: 1px solid rgba(148, 163, 184, 0.28);
            color: rgb(148 163 184);
        }
        .mm-leaf strong { font-size: 21px; line-height: 1.15; }
        .mm-leaf span { font-size: 13px; line-height: 1.2; opacity: 0.8; }
        .mm-leaf.can-pivot { cursor: pointer; color: rgb(226 232 240); }
        .mm-leaf.can-pivot:hover { transform: translateY(-2px); box-shadow: 0 0 16px rgba(255, 255, 255, 0.18); }

        /* 分支颜色 */
        .mm-family { border-color: rgba(52, 211, 153, 0.6) !important; }
        .mm-root { border-color: rgba(34, 211, 238, 0.6) !important; }
        .mm-syn { border-color: rgba(167, 139, 250, 0.6) !important; }
        .mm-ant { border-color: rgba(251, 146, 60, 0.6) !important; }
        .mm-look { border-color: rgba(244, 114, 182, 0.6) !important; }
        .mm-leaf.mm-family strong { color: #6ee7b7; }
        .mm-leaf.mm-root strong { color: #67e8f9; }
        .mm-leaf.mm-syn strong { color: #c4b5fd; }
        .mm-leaf.mm-ant strong { color: #fdba74; }
        .mm-leaf.mm-look strong { color: #f9a8d4; }

        /* 母词串记：母词部分标红，其余字母白色，前附音标、前缀 ✓ 释义 */
        .mm-edge.mm-chain { stroke: #ef4444; }
        .mm-group.mm-chain { border-color: rgba(239, 68, 68, 0.65) !important; color: #fca5a5; }
        .mm-leaf.mm-chain { border-color: rgba(148, 163, 184, 0.3) !important; padding-right: 22px; }
        .mm-leaf.mm-chain strong { color: rgb(241 245 249); font-size: 22px; }
        .mm-leaf.mm-chain strong em,
        .mm-center strong em {
            font-style: normal;
            font-weight: 800;
            color: #f87171;
            text-shadow: 0 0 10px rgba(248, 113, 113, 0.45);
        }
        .mm-leaf.mm-chain strong i {
            font-style: normal;
            font-size: 12px;
            font-weight: 400;
            color: rgb(148 163 184);
            margin-right: 6px;
        }
        .mm-leaf.mm-chain span { color: rgb(203 213 225); }

        /* 导图标题里的母词徽章 */
        .mm-mother-tag {
            padding: 3px 10px;
            border-radius: 9999px;
            font-size: 13px;
            color: rgb(252 165 165);
            background: rgba(239, 68, 68, 0.14);
            border: 1px solid rgba(239, 68, 68, 0.4);
            white-space: nowrap;
        }

        /* 容器不够宽时导图整体换成纵向分支列表（手机 + 平板竖屏） */
        .mm-list { padding-top: 2px; max-width: 780px; margin: 0 auto; }
        .ml-center {
            margin: 4px 0 14px;
            padding: 10px 12px;
            border-radius: 14px;
            text-align: center;
            background: rgba(30, 41, 59, 0.95);
            border: 2px solid rgba(96, 165, 250, 0.75);
        }
        .ml-center strong { display: block; font-size: 26px; line-height: 1.2; color: #fff; }
        .ml-center span { font-size: 14px; color: rgb(148 163 184); }
        .ml-group { margin-bottom: 14px; }
        .ml-title {
            display: inline-block;
            margin-bottom: 8px;
            padding: 2px 10px;
            border-radius: 9999px;
            font-size: 15px;
            font-weight: 600;
            color: rgb(226 232 240);
            background: rgba(15, 23, 42, 0.92);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        .ml-title b { font-size: 13px; opacity: 0.75; margin-left: 5px; }
        .mm-list .mm-leaf {
            height: auto;
            flex-direction: row;
            justify-content: flex-start;
            gap: 8px;
            text-align: left;
            padding: 8px 26px 8px 10px;
            margin-bottom: 7px;
        }
        .mm-list .mm-leaf strong { font-size: 19px; }
        .mm-list .mm-leaf span { font-size: 13px; }
        .mm-list .mm-leaf.mm-chain strong { font-size: 21px; }
        .mm-list .mm-leaf.mm-chain strong i { font-size: 13px; }

        /* ===== 扩展生词本（从一个词带出的其他词） ===== */
        /* 导航里的入口 */
        .ext-btn {
            cursor: pointer;
            padding: 6px 14px;
            border-radius: 9999px;
            font-size: 1rem;
            color: rgb(253 224 71);
            background: rgba(250, 204, 21, 0.1);
            border: 1px solid rgba(250, 204, 21, 0.32);
            transition: all 0.25s ease;
            white-space: nowrap;
        }
        .ext-btn:hover {
            color: #fff;
            background: rgba(250, 204, 21, 0.2);
            border-color: rgba(250, 204, 21, 0.6);
            box-shadow: 0 0 14px rgba(250, 204, 21, 0.3);
        }
        /* 串读本页按钮：与扩展本区分开用青色，朗读中保持点亮态 */
        .read-btn {
            cursor: pointer;
            padding: 6px 14px;
            border-radius: 9999px;
            font-size: 1rem;
            color: rgb(165 243 252);
            background: rgba(34, 211, 238, 0.1);
            border: 1px solid rgba(34, 211, 238, 0.32);
            transition: all 0.25s ease;
            white-space: nowrap;
        }
        .read-btn:hover {
            color: #fff;
            background: rgba(34, 211, 238, 0.2);
            border-color: rgba(34, 211, 238, 0.6);
            box-shadow: 0 0 14px rgba(34, 211, 238, 0.3);
        }
        .read-btn.on {
            color: #062630;
            background: linear-gradient(90deg, #67e8f9, #a5f3fc);
            border-color: rgba(165, 243, 252, 0.9);
            box-shadow: 0 0 18px rgba(103, 232, 249, 0.55);
            font-weight: 700;
        }
        .read-btn.hidden { display: none; }
        /* 串读设置项：贴着按钮放，字号压小，不跟主控件抢视觉 */
        .read-cfg {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 0.85rem;
            color: rgb(148 163 184);
            white-space: nowrap;
        }
        .read-cfg label {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
        }
        .read-cfg select {
            cursor: pointer;
            padding: 3px 6px;
            border-radius: 8px;
            font-size: 0.85rem;
            color: rgb(165 243 252);
            background: rgba(34, 211, 238, 0.08);
            border: 1px solid rgba(34, 211, 238, 0.25);
        }
        .read-cfg input[type="checkbox"] {
            width: 15px;
            height: 15px;
            accent-color: #22d3ee;
        }
        /* 自己带 display 的类必须同时管住 hidden，否则 Tailwind 的 .hidden 谁在后面不一定 */
        .read-cfg.hidden { display: none; }
        /* 正读到的那张卡：两面都打一圈青光（卡片是 3D 翻转的，影子得加在实际可见的面上） */
        .card-container.reading-now .card-front,
        .card-container.reading-now .card-back {
            box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.85), 0 0 34px rgba(103, 232, 249, 0.45);
        }
        .card-container.reading-now .word-display {
            color: #a5f3fc;
            text-shadow: 0 0 18px rgba(103, 232, 249, 0.7);
        }
        /* 节点右上角星标：收藏/移出扩展本 */
        .mm-star {
            position: absolute;
            top: 2px;
            right: 5px;
            z-index: 2;
            cursor: pointer;
            font-size: 15px;
            line-height: 1.3;
            color: rgba(148, 163, 184, 0.45);
            text-shadow: 0 0 6px rgba(2, 6, 23, 0.9);
            transition: all 0.18s ease;
        }
        .mm-star:hover { color: rgb(253 224 71); transform: scale(1.25); }
        .mm-star.on { color: rgb(250 204 21); text-shadow: 0 0 10px rgba(250, 204, 21, 0.6); }
        /* 串读时当前朗读的叶子 */
        .mm-leaf.mm-now {
            border-color: rgba(250, 204, 21, 0.9) !important;
            background: rgba(250, 204, 21, 0.14);
            box-shadow: 0 0 18px rgba(250, 204, 21, 0.35);
        }
        /* 串读 / 整族入本按钮 */
        .mm-chainread, .mm-chainadd {
            cursor: pointer;
            padding: 4px 12px;
            border-radius: 10px;
            font-size: 1rem;
            color: rgb(252 165 165);
            background: rgba(239, 68, 68, 0.14);
            border: 1px solid rgba(239, 68, 68, 0.45);
            transition: all 0.2s ease;
            white-space: nowrap;
        }
        .mm-chainread:hover { color: #fff; background: rgba(239, 68, 68, 0.28); }
        .mm-chainread.on { color: #fff; background: rgba(239, 68, 68, 0.42); box-shadow: 0 0 14px rgba(239, 68, 68, 0.45); }
        .mm-chainadd { color: rgb(253 224 71); background: rgba(250, 204, 21, 0.12); border-color: rgba(250, 204, 21, 0.4); }
        .mm-chainadd:hover { color: #fff; background: rgba(250, 204, 21, 0.26); }
        /* 导图头部右侧按钮区（串读/入本/关闭）靠右排开 */
        .mm-head .mm-say { margin-left: auto; }
        .mm-head .mm-close { margin-left: 0; }
        /* 扩展本列表面板 */
        .eb-tip { font-size: 0.85rem; color: rgb(100 116 139); }
        .eb-row {
            display: grid;
            grid-template-columns: 26px minmax(120px, 1.1fr) minmax(96px, 1fr) minmax(140px, 1.6fr) minmax(90px, 0.8fr) 30px;
            align-items: center;
            gap: 12px;
            padding: 9px 34px 9px 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.07);
            font-size: 1.05rem;
        }
        .eb-row:hover { background: rgba(255, 255, 255, 0.04); }
        .eb-row .mm-star { position: static; font-size: 17px; }
        .eb-word { font-weight: 700; color: rgb(226 232 240); cursor: pointer; }
        .eb-word:hover { color: rgb(125 211 252); }
        .eb-phon { color: rgb(148 163 184); font-size: 0.95rem; }
        .eb-mean { color: rgb(165 243 252); }
        .eb-from { font-size: 0.85rem; color: #f87171; }
        .eb-del {
            cursor: pointer;
            background: transparent;
            border: 1px solid transparent;
            border-radius: 8px;
            color: rgb(100 116 139);
            font-size: 0.95rem;
            padding: 2px 6px;
        }
        .eb-del:hover { color: #fff; background: rgba(239, 68, 68, 0.3); }
        .eb-switch {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 14px;
            font-size: 1rem;
            color: rgb(203 213 225);
            cursor: pointer;
        }
        .eb-switch input {
            width: 17px;
            height: 17px;
            accent-color: rgb(250 204 21);
            cursor: pointer;
        }
        .eb-clear {
            cursor: pointer;
            background: transparent;
            border: none;
            color: rgb(100 116 139);
            font-size: 0.85rem;
            text-decoration: underline;
        }
        .eb-clear:hover { color: rgb(248 113 113); }

        /* 窄屏（手机）适配：放在文件末尾，避免被上面的基础规则同优先级覆盖 */
        @media (max-width: 900px) {
            .mm-body { overflow-x: auto; }
            .mm-svg { min-width: 880px; }
            .mm-panel { padding: 14px 14px 10px; }
            .mm-head { gap: 8px 12px; padding-bottom: 8px; }
            /* 手机上“🧠 关联扩展”标题重复，隐藏后头部从 4 行压回 2 行 */
            .mm-head h3 { display: none; }
            .mm-head .mm-say { margin-left: 0; }
            .mm-head .mm-mother-tag { font-size: 12px; padding: 2px 8px; }
            .mm-title { gap: 6px 8px; }
            .mm-head .mm-say, .mm-head .mm-close { padding: 3px 8px; }
            .mm-head .mm-chainread, .mm-head .mm-chainadd { padding: 3px 9px; font-size: 0.9rem; }
            .eb-row {
                grid-template-columns: 22px minmax(80px, 1fr) minmax(120px, 1.4fr) 26px;
                gap: 8px;
                padding: 8px 4px;
                font-size: 0.95rem;
            }
            .eb-phon { display: none; }
            .eb-from { grid-column: 2 / 4; font-size: 0.8rem; }
        }

        /* ===== 进度存储健康提醒 + 备份/恢复面板 ===== */
        .store-btn {
            margin-left: 10px;
            padding: 3px 10px;
            border-radius: 9999px;
            font-size: 0.85rem;
            color: rgb(148 163 184);
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.14);
            cursor: pointer;
            transition: color .2s, border-color .2s;
        }
        .store-btn:hover { color: rgb(103 232 249); border-color: rgba(103, 232, 249, 0.45); }
        /* 存不住时顶栏按钮也变红，不至于只有告警条一个提示 */
        .store-btn.warn { color: #fca5a5; border-color: rgba(248, 113, 113, .55); }
        /* 超半个月没备份：右上角点个红点（只在确实有进度可丢时亮），存不住进度那台设备不另外打扰 */
        .store-btn.stale { position: relative; color: rgb(203 213 225); }
        .store-btn.stale::after {
            content: '';
            position: absolute; top: -3px; right: -3px;
            width: 9px; height: 9px; border-radius: 50%;
            background: #f87171; box-shadow: 0 0 0 2px rgba(15, 23, 42, .9);
            animation: stalePulse 2.4s ease-in-out infinite;
        }
        @keyframes stalePulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
        /* 备份面板：拖进来的高亮提示与隐藏的 file input（.hidden 得本身管得住，否则盖不住） */
        .sp-box.dragging {
            border-color: rgba(103, 232, 249, .8);
            box-shadow: 0 0 0 3px rgba(103, 232, 249, .25), 0 24px 60px rgba(0, 0, 0, .5);
        }
        .sp-file { display: none; }

        .store-bar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px 14px;
            max-width: 72rem;
            margin: 0 auto 10px;
            padding: 12px 16px;
            border-radius: 14px;
            background: linear-gradient(135deg, rgba(127, 29, 29, .5), rgba(15, 23, 42, .5));
            border: 1px solid rgba(248, 113, 113, .5);
            color: rgb(254 202 202);
            font-size: 0.95rem;
            line-height: 1.6;
        }
        .store-bar.hidden { display: none; }
        .store-bar .sb-txt { flex: 1 1 100%; }
        .store-bar .sb-acts { align-self: flex-end; }
        .store-bar code, .sp-info code {
            background: rgba(0, 0, 0, .35);
            padding: 1px 6px;
            border-radius: 6px;
            font-size: .9em;
        }
        .sb-acts { display: flex; gap: 8px; flex: 0 0 auto; }
        .sb-btn {
            padding: 6px 14px;
            border-radius: 9999px;
            font-size: .92rem;
            font-weight: 600;
            color: rgb(15 23 42);
            background: rgb(103 232 249);
            border: none;
            cursor: pointer;
        }
        .sb-btn:hover { filter: brightness(1.08); }
        .sb-btn.ghost { background: transparent; color: rgb(203 213 225); border: 1px solid rgba(255, 255, 255, .24); font-weight: 400; }
        .sb-btn.good { background: rgb(110 231 183); }

        .sp-overlay {
            position: fixed;
            inset: 0;
            z-index: 90;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 18px;
            background: rgba(2, 6, 23, .78);
            backdrop-filter: blur(4px);
        }
        .sp-box {
            width: min(720px, 100%);
            max-height: 88vh;
            overflow: auto;
            padding: 18px 20px;
            border-radius: 18px;
            background: linear-gradient(160deg, rgba(30, 41, 59, .98), rgba(15, 23, 42, .98));
            border: 1px solid rgba(103, 232, 249, .35);
            box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
            color: rgb(226 232 240);
        }
        .sp-head { display: flex; align-items: center; justify-content: space-between; font-size: 1.15rem; margin-bottom: 6px; }
        .sp-x { background: none; border: none; color: rgb(148 163 184); font-size: 1.1rem; cursor: pointer; }
        .sp-x:hover { color: white; }
        .sp-info { font-size: .9rem; color: rgb(148 163 184); margin-bottom: 10px; line-height: 1.7; }
        .sp-bad { color: #fca5a5; margin-left: 6px; }
        .sp-text {
            width: 100%;
            min-height: 140px;
            padding: 10px 12px;
            border-radius: 12px;
            background: rgba(2, 6, 23, .7);
            border: 1px solid rgba(255, 255, 255, .16);
            color: rgb(203 213 225);
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: .82rem;
            line-height: 1.5;
            resize: vertical;
        }
        .sp-text:focus { outline: none; border-color: rgba(103, 232, 249, .6); }
        .sp-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
        .sp-msg { min-height: 22px; margin: 10px 0 0; font-size: .92rem; color: rgb(110 231 183); }
        .sp-msg.bad { color: rgb(252 165 165); }
        .sp-tip { margin: 8px 0 0; font-size: .85rem; color: rgb(148 163 184); line-height: 1.7; }
        @media (max-width: 640px) {
            .store-bar { font-size: .88rem; padding: 10px 12px; }
            .sp-acts .sb-btn { flex: 1 1 46%; }
        }

        /* ===== 测试模式：多题型与页内虚拟键盘 ===== */
        .quiz-area {
            max-width: 780px;
            margin: 0 auto;
            padding: 32px 28px;
            text-align: center;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }
        .quiz-title { font-size: 1.6rem; font-weight: 700; color: #e2e8f0; margin-bottom: 6px; }
        .quiz-tip { font-size: .95rem; color: rgb(148 163 184); margin-bottom: 18px; }
        .quiz-types { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 18px; }
        .qtype {
            cursor: pointer; padding: 7px 14px; border-radius: 9999px; font-size: .95rem; white-space: nowrap;
            color: rgb(203 213 225); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
            transition: all 0.2s ease;
        }
        .qtype:hover { background: rgba(139, 92, 246, 0.18); border-color: rgba(139, 92, 246, 0.45); color: #fff; }
        .qtype.on {
            font-weight: 700; color: #fff; border-color: transparent;
            background: linear-gradient(90deg, #6366f1, #a855f7); box-shadow: 0 0 16px rgba(139, 92, 246, 0.4);
        }
        .quiz-prompt {
            display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 10px;
            min-height: 52px; margin-bottom: 6px; font-size: 1.7rem; font-weight: 600; color: #e2e8f0;
        }
        .qp-cn { color: #c4b5fd; }
        .qp-en { color: #67e8f9; letter-spacing: .5px; }
        .qp-pos { font-size: 1rem; font-style: italic; color: rgb(148 163 184); }
        .qp-tip { width: 100%; font-size: .9rem; font-weight: 400; color: rgb(100 116 139); }
        .quiz-meta { margin-bottom: 14px; font-size: .9rem; color: rgb(100 116 139); }

        /* 拼写题的作答条：不是输入框，所以不会有系统键盘 */
        .quiz-strip {
            position: relative; display: flex; align-items: center; justify-content: center;
            max-width: 560px; min-height: 62px; margin: 14px auto 6px; padding: 10px 18px;
            border-radius: 14px; background: rgba(2, 6, 23, 0.45); border: 2px solid rgba(148, 163, 184, 0.25);
            font-size: 1.9rem; letter-spacing: 3px; color: #a5f3fc; word-break: break-all;
        }
        .quiz-strip.has { border-color: rgba(103, 232, 249, 0.6); }
        .quiz-strip-ph { font-size: 1.05rem; letter-spacing: 0; color: rgb(71 85 105); }
        .quiz-caret { width: 2px; height: 1.5em; margin-left: 4px; background: #67e8f9; animation: quizBlink 1.1s steps(1) infinite; }
        @keyframes quizBlink { 50% { opacity: 0; } }

        .quiz-tiles { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 14px 0 6px; }
        .qtile {
            min-width: 38px; padding: 8px 6px; border-radius: 9px;
            font-size: 1.35rem; font-weight: 700; text-transform: lowercase; color: #e2e8f0;
            background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14);
        }
        .qtile.ok { color: #6ee7b7; background: rgba(16, 185, 129, 0.18); border-color: rgba(52, 211, 153, 0.55); }
        .qtile.bad { color: #fca5a5; background: rgba(239, 68, 68, 0.16); border-color: rgba(248, 113, 113, 0.5); }

        .quiz-gap { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 16px 0 6px; font-size: 2rem; font-weight: 700; }
        .qletter { padding: 4px 3px; color: #cbd5e1; }
        .qblank {
            display: inline-flex; align-items: center; justify-content: center;
            width: 34px; height: 44px; margin: 0 2px; color: #a5f3fc; border-bottom: 3px solid rgba(103, 232, 249, 0.7);
        }
        .qblank.filled { border-bottom-color: #a78bfa; }
        .qblank.ok { color: #6ee7b7; border-bottom-color: #34d399; }
        .qblank.bad { color: #fca5a5; border-bottom-color: #f87171; }
        .qspace { width: 16px; }

        .quiz-built {
            display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
            max-width: 600px; min-height: 56px; margin: 12px auto; padding: 8px;
            border-radius: 12px; background: rgba(2, 6, 23, 0.4); border: 2px dashed rgba(148, 163, 184, 0.22);
        }
        .qbuilt-tile { cursor: pointer; background: rgba(103, 232, 249, 0.14); border-color: rgba(103, 232, 249, 0.4); }
        .quiz-pool { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-bottom: 10px; }
        .qpool-tile { cursor: pointer; transition: all 0.15s ease; }
        .qpool-tile:hover:not(.used) { transform: translateY(-3px); border-color: rgba(103, 232, 249, 0.6); }
        .qpool-tile.used { opacity: 0.22; pointer-events: none; }
        .qmini { cursor: pointer; background: none; border: none; font-size: .9rem; color: #67e8f9; text-decoration: underline; }

        .quiz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0 8px; }
        .qopt {
            cursor: pointer; padding: 14px 12px; border-radius: 12px; font-size: 1.15rem; color: #e2e8f0;
            background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); transition: all 0.18s ease;
        }
        .qopt:hover:not(:disabled) { background: rgba(139, 92, 246, 0.18); border-color: rgba(139, 92, 246, 0.5); color: #fff; }
        .qopt:disabled { cursor: default; }
        .qopt.right { font-weight: 700; color: #6ee7b7; background: rgba(16, 185, 129, 0.2); border-color: rgba(52, 211, 153, 0.6); }
        .qopt.wrong { color: #fca5a5; background: rgba(239, 68, 68, 0.18); border-color: rgba(248, 113, 113, 0.55); animation: quizShake 0.32s; }

        .quiz-match { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0 8px; }
        .qcol { display: flex; flex-direction: column; gap: 10px; }
        .qpair {
            cursor: pointer; padding: 11px 10px; border-radius: 11px; font-size: 1rem; line-height: 1.35; color: #e2e8f0;
            background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); transition: all 0.18s ease;
        }
        .qcol:last-child .qpair { font-size: .92rem; color: #cbd5e1; }
        .qpair.sel { color: #a5f3fc; background: rgba(103, 232, 249, 0.14); border-color: #67e8f9; }
        .qpair.ok { color: #6ee7b7; background: rgba(16, 185, 129, 0.2); border-color: rgba(52, 211, 153, 0.6); }
        .qpair.bad { color: #fca5a5; background: rgba(239, 68, 68, 0.18); border-color: rgba(248, 113, 113, 0.6); animation: quizShake 0.32s; }
        .qpair.gone { opacity: 0.25; pointer-events: none; }
        @keyframes quizShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

        /* 虚拟键盘：跟题目同屏排版，不做固定定位，免得盖住题干 */
        .quiz-keys {
            display: flex; flex-direction: column; gap: 7px;
            margin: 14px auto 6px; touch-action: manipulation; user-select: none; -webkit-user-select: none;
        }
        /* 自己带了 display 的元素必须同时管住 hidden，否则与 Tailwind 的 .hidden 谁后谁生效不一定 */
        .quiz-keys.hidden { display: none; }
        .qrow { display: flex; gap: 6px; justify-content: center; }
        .qkey {
            flex: 1 1 0; min-width: 0; min-height: 46px; border-radius: 9px; cursor:pointer;
            font-size: 1.15rem; font-weight: 600; color: #dbeafe;
            background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.13);
            transition: background 0.12s ease, transform 0.06s ease;
        }
        .qkey:hover { background: rgba(103, 232, 249, 0.16); }
        .qkey:active { transform: translateY(2px); background: rgba(103, 232, 249, 0.3); }
        .qrow-foot .qkey { flex: 0 0 auto; font-size: .95rem; }
        .qkey.fn { background: rgba(148, 163, 184, 0.14); }
        .qkey.space { flex: 1 1 auto; min-width: 110px; }
        .qkey.go { padding: 0 18px; font-weight: 700; color: #062a20; border-color: transparent; background: linear-gradient(90deg, #34d399, #6ee7b7); }
        /* 这一题用得到的字母键：只描一圈淡边，不动尺寸也不动底色（底色是“按下了”的地盘） */
        .qkey.hint { box-shadow: inset 0 0 0 1px rgba(103, 232, 249, .5), 0 0 7px rgba(103, 232, 249, .16); color: #a5f3fc; }

        .quiz-result { min-height: 26px; margin: 10px 0 4px; font-size: 1.05rem; font-weight: 600; color: rgb(148 163 184); }
        .quiz-result.good { color: #6ee7b7; }
        .quiz-result.bad { color: #fca5a5; }
        .quiz-result.warn { color: #fcd34d; }
        .quiz-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; margin-top: 14px; }
        .quiz-btn {
            cursor: pointer; padding: 11px 24px; border-radius: 11px; font-size: 1.05rem; color: #e2e8f0;
            background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.14); transition: all 0.2s ease;
        }
        .quiz-btn:hover { background: rgba(255, 255, 255, 0.18); }
        .quiz-btn.primary { font-weight: 700; color: #fff; border: none; background: linear-gradient(90deg, #3b82f6, #a855f7); }
        .quiz-btn.ghost { padding: 11px 16px; font-size: .98rem; color: #67e8f9; background: transparent; border-color: rgba(103, 232, 249, 0.3); }
        .quiz-score { width: 100%; font-size: 1rem; color: rgb(148 163 184); }
        .quiz-score b { font-size: 1.25rem; color: #22d3ee; }
        .quiz-stats { margin-top: 10px; font-size: .92rem; color: rgb(100 116 139); }
        .quiz-reset { margin-left: 10px; cursor: pointer; font-size: .85rem; color: rgb(100 116 139); background: none; border: none; text-decoration: underline; }
        .quiz-reset:hover { color: #f87171; }
        /* 今日新词上限的下拉：跟统计行同在一排，字号比统计行略大一点方便手指点 */
        .quiz-limit {
            margin-left: 10px; padding: 2px 6px; font-size: .85rem;
            color: rgb(148 163 184); background: rgba(255, 255, 255, .06);
            border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; cursor: pointer;
        }
        .quiz-limit:hover { color: rgb(103 232 249); border-color: rgba(103, 232, 249, .45); }
        .quiz-limit option { background: #0f172a; color: rgb(226 232 240); }

        /* ===== 答题手感：得分行 / 波次进度 / 粒子 / 成绩单 ===== */
        /* 粒子、横幅、成绩单都以面板为坐标系，超出部分直接裁掉，不然撑出横向滚动条 */
        .quiz-area { position: relative; overflow: hidden; }
        /* 本波进度贴在面板顶边上：占不占版面高度，手机上那一屏空间是挤出来的 */
        .quiz-wave { position: absolute; top: 0; left: 0; right: 0; height: 4px; overflow: hidden; background: rgba(255, 255, 255, .08); border-radius: 20px 20px 0 0; }
        .quiz-wave i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #22d3ee, #a855f7); box-shadow: 0 0 10px rgba(168, 85, 247, .7); transition: width .35s ease; }
        .quiz-score { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; }
        .qcombo {
            padding: 2px 10px; border-radius: 9999px; font-size: .92rem; font-weight: 700; color: rgb(100 116 139);
            background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); transition: all .2s ease;
        }
        .qcombo.on { color: #fdba74; background: rgba(249, 115, 22, .16); border-color: rgba(251, 146, 60, .55); box-shadow: 0 0 12px rgba(249, 115, 22, .35); }
        .qbest { font-size: .9rem; color: rgb(148 163 184); }
        .qtog {
            cursor: pointer; padding: 3px 11px; border-radius: 9999px; font-size: .88rem; color: rgb(148 163 184);
            background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
        }
        .qtog:hover { color: #e2e8f0; border-color: rgba(148, 163, 184, .5); }
        /* 开关关掉只变样式不变文案长度：文案一长，手机上整行就要顶成两行，统计行被挤到屏外 */
        .qtog.off { opacity: .55; text-decoration: line-through; }
        #testScore.pop { animation: quizPop .42s ease; }
        @keyframes quizPop { 35% { transform: scale(1.5); color: #fde68a; } }

        .qfx { position: absolute; left: 50%; top: 45%; width: 0; height: 0; pointer-events: none; z-index: 5; }
        .qcol { position: relative; }        /* 配对题往列里抛粒子 */
        .qfx span { position: absolute; left: 0; top: 0; opacity: 0; animation: quizFly 1.1s ease-out forwards; }
        @keyframes quizFly {
            0% { opacity: 1; transform: translate(-50%, -50%) scale(.4); }
            70% { opacity: 1; }
            100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.15) rotate(var(--rot)); }
        }
        .qfx-banner {
            position: absolute; left: 50%; top: 38%; z-index: 6; pointer-events: none; transform: translate(-50%, -50%);
            font-size: 2.4rem; font-weight: 800; white-space: nowrap; color: #fdba74; text-shadow: 0 0 18px rgba(249, 115, 22, .8);
            /* 垫一层药丸底：飘在题目上时能看出是叠加的提示，不像没清干净的残留 */
            padding: 6px 22px; border-radius: 9999px; background: rgba(2, 6, 23, .62);
            border: 1px solid rgba(249, 115, 22, .35); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
            animation: quizBanner 1.5s ease-out forwards;
        }
        .qfx-banner.gold { color: #fde68a; text-shadow: 0 0 22px rgba(250, 204, 21, .85); }
        @keyframes quizBanner {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
            22% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
            35% { transform: translate(-50%, -50%) scale(1); }
            78% { opacity: 1; }
            100% { opacity: 0; transform: translate(-50%, -92%) scale(1); }
        }
        .qfx-shake { animation: quizShake .38s; }
        /* 按一下就闪即收：写成静态背景的话，按过的键会一直亮着，整块键盘变成“足迹图” */
        .qkey.hit { animation: quizHit .22s ease-out; }
        @keyframes quizHit {
            0% { background: rgba(103, 232, 249, .42); transform: translateY(2px); }
            100% { background: rgba(103, 232, 249, 0); transform: translateY(0); }
        }

        /* 波次成绩单：盖在题目区上，点任意处继续 */
        .qfx-report {
            position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center;
            padding: 16px; cursor: pointer; border-radius: 20px; background: rgba(2, 6, 23, .74);
            backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: quizFadeIn .2s ease;
        }
        .qr-card { animation: quizRise .26s ease; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 420px; padding: 22px 20px; border-radius: 18px; background: rgba(15, 23, 42, .94); border: 1px solid rgba(148, 163, 184, .28); box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
        .qr-rank { font-size: 3rem; font-weight: 800; line-height: 1; color: #6ee7b7; text-shadow: 0 0 22px rgba(52, 211, 153, .6); }
        .qr-title { font-size: 1.05rem; font-weight: 700; color: #e2e8f0; }
        .qr-rows { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; font-size: .92rem; color: rgb(148 163 184); }
        .qr-rows b { font-size: 1.05rem; color: #a5f3fc; }
        .qr-tip { font-size: .9rem; color: #c4b5fd; }
        @keyframes quizFadeIn { from { opacity: 0; } }
        @keyframes quizRise { from { opacity: 0; transform: translateY(14px) scale(.96); } }
        /* 回顾态的正确拼写一块块浮现，比一整行字直接拍在脸上好读 */
        .quiz-tiles .qtile { animation: quizTileIn .34s ease backwards; }
        .quiz-tiles .qtile:nth-child(2) { animation-delay: .05s; }
        .quiz-tiles .qtile:nth-child(3) { animation-delay: .1s; }
        .quiz-tiles .qtile:nth-child(4) { animation-delay: .15s; }
        .quiz-tiles .qtile:nth-child(5) { animation-delay: .2s; }
        .quiz-tiles .qtile:nth-child(6) { animation-delay: .25s; }
        .quiz-tiles .qtile:nth-child(7) { animation-delay: .3s; }
        .quiz-tiles .qtile:nth-child(n+8) { animation-delay: .35s; }
        @keyframes quizTileIn { from { opacity: 0; transform: translateY(9px) scale(.85); } }
        /* 晕动症设置下只保留结果文字，动画全部关掉（粒子会自动被 JS 清掉，不会堆在面板里） */
        @media (prefers-reduced-motion: reduce) {
            .qfx span, .qfx-banner, .qfx-shake, .qfx-report, .qr-card, .quiz-tiles .qtile, #testScore.pop, .qcombo { animation: none !important; }
        }
        @media (max-width: 640px) {
            .quiz-area { padding: 22px 14px; }
            /* 手机竖屏要一屏装下题干 + 键盘 + 按钮，面板自己的标题和说明先让位 */
            .quiz-title, .quiz-tip { display: none; }
            body.quiz-on main { padding-top: 14px; padding-bottom: 20px; }
            .quiz-types { gap: 6px; margin-bottom: 12px; }
            .qtype { padding: 6px 11px; font-size: .88rem; }
            .quiz-prompt { font-size: 1.4rem; }
            .quiz-strip { font-size: 1.5rem; letter-spacing: 2px; }
            .quiz-gap { font-size: 1.5rem; }
            .qkey { min-height: 42px; font-size: 1rem; }
            .quiz-opts { grid-template-columns: 1fr; }
            .qpair { padding: 9px 8px; font-size: .92rem; }
            /* 得分行不能因为多了连击/纪录/提示开关就撑成两行，纪录 chips 在手机上先让位，两颗开关压到最小号 */
            .quiz-score { gap: 4px 6px; font-size: .92rem; }
            .qbest { display: none; }
            .qcombo, .qtog { font-size: .82rem; padding: 2px 8px; }
            .qfx-banner { font-size: 1.7rem; top: 31%; padding: 4px 15px; }
            .qr-card { padding: 16px 14px; gap: 6px; }
            .qr-rank { font-size: 2.2rem; }
        }

        /* ===== 顶栏：窄屏下不能一直吸顶 ===== */
        /* 顶栏自己就比屏幕高时，sticky 等于把它钉在视口上盖住整页，下边的题目根本够不着，
           所以手机/iPad 竖屏让它跟着页面滚走，桌面宽度仍然吸顶（那里它只有一行高） */
        @media (max-width: 900px) {
            header.site-head { position: static; }
        }
        /* 测试模式收起只在卡片模式有用的项：大标题、释义开关、两个筛选、扩展本、进度与备份、发音图例。
           选择器带上 header + 类，才能压过 Tailwind 运行时注入的 .flex / .ext-btn */
        header.quiz-head .quiz-off { display: none; }

        /* ===== 串读设置折叠：窄屏折进 ⚙ 弹层，≥1100px 保持平铺 ===== */
        /* 弹层从 ⚙ 下方浮出、不占顶栏宽度（顶栏没有 overflow:hidden，不会被裁） */
        .cfg-wrap { position: relative; display: inline-flex; align-items: center; gap: 10px; }
        .cfg-btn {
            display: inline-flex; align-items: center; justify-content: center;
            width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
            border: 1px solid rgba(34, 211, 238, .25); background: rgba(34, 211, 238, .08);
            color: #a5f3fc; font-size: 1rem; line-height: 1;
        }
        .cfg-btn:hover { background: rgba(34, 211, 238, .2); }
        /* 弹层用 fixed + JS 算 left/top（见 placeCfgPop）：⚙ 在窄屏里会被挤到任意一行，
           靠 CSS 一个方向锁定总有一侧会顶出屏幕 */
        .read-cfg.cfg-pop {
            display: none; position: fixed; left: 0; top: 0; z-index: 60;
            flex-direction: column; align-items: stretch; gap: 9px; min-width: 196px;
            max-width: calc(100vw - 16px);
            padding: 12px 14px; border-radius: 12px;
            background: rgba(15, 23, 42, .97); border: 1px solid rgba(148, 163, 184, .25);
            box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
        }
        .read-cfg.cfg-pop.open { display: flex; }
        .read-cfg.cfg-pop label { justify-content: space-between; gap: 12px; }
        /* 桌面宽度回到老样子：三个下拉平铺、⚙ 不出现，肌肉记忆不变（写在折叠态之后才盖得住） */
        @media (min-width: 1100px) {
            .cfg-btn { display: none; }
            .read-cfg.cfg-pop {
                display: inline-flex; position: static; flex-direction: row; align-items: center;
                min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; gap: 10px; z-index: auto;
            }
        }
        /* 自己带 display 的类必须同时管住 .hidden：Tailwind 运行时注入的样式表在本文件之后，同权重会打架。
           这条放最后，测试模式收起顶栏时才压得过上面的 .open 与平铺态 */
        .cfg-btn.hidden, .read-cfg.cfg-pop.hidden { display: none; }