/* Hide raw template until Vue mounts — prevents {{mustache}} flash */
        [v-cloak] { display: none !important; }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --app-max-width: 1080px;
            --content-max-width: 760px;
            --shell-max-width: 920px;
            --bg: #f3f6fb;
            --surface: #ffffff;
            --surface-elevated: rgba(255,255,255,0.84);
            --surface-soft: #f8faff;
            --border: #dde5f0;
            --line: #dde5f0;
            --hover: #eef4fc;
            --text: #182132;
            --muted: #7d8aa3;
            --blue: #4b84f3;
            --green: #2bc866;
            --amber: #f0a020;
            --red: #f05050;
            --purple: #8b6cf6;
            --mastered-color: #8b5cf6;
            --mastered-color-2: #a78bfa;
            --deck-track: #dbe5f2;
            --card-back: #1a3a5c;
            --r: 22px;
            --shadow-sm: 0 6px 18px rgba(20,32,61,0.06);
            --shadow-md: 0 16px 40px rgba(20,32,61,0.1);
            --shadow-lg: 0 28px 64px rgba(20,32,61,0.14);
            /* 时段氛围 — 默认下午 */
            --ambient-bg: transparent;
            --fox-glow: rgba(255,140,66,0.15);
            /* ── 层次体系 ── */
            --shadow-card: 0 2px 8px rgba(79,143,247,0.06), 0 8px 24px rgba(20,32,61,0.04);
            --shadow-glow-blue: 0 4px 20px rgba(79,143,247,0.12);
            --shadow-glow-orange: 0 4px 20px rgba(255,140,66,0.12);
            --section-gap: 24px;
            --shell-ambient-top: rgba(79,132,243,0.18);
            --shell-ambient-mid: rgba(139,108,246,0.1);
            --shell-ambient-bottom: rgba(240,160,32,0.08);
            --app-shell-bg: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(248,250,255,0.9) 100%);
            --app-shell-border: rgba(255,255,255,0.62);
            --app-shell-shadow: 0 22px 64px rgba(20,32,61,0.12), 0 6px 18px rgba(20,32,61,0.05);
            --shell-header-bg: linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.62));
            --shell-nav-bg: rgba(255,255,255,0.72);
            --overlay-scrim-bg: rgba(8,13,24,0.5);
            --overlay-scrim-top: rgba(79,132,243,0.18);
            --overlay-scrim-bottom: rgba(139,108,246,0.1);
            --overlay-panel-bg: linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(248,250,255,0.96) 100%);
            --overlay-panel-border: rgba(255,255,255,0.64);
            --overlay-panel-shadow: 0 24px 72px rgba(15,23,42,0.22), 0 10px 24px rgba(15,23,42,0.08);
            --overlay-section-bg: rgba(255,255,255,0.54);
            --overlay-section-border: rgba(15,23,42,0.08);
            /* ── Mastery 色盲友好配色（蓝色系渐变，旧变量保留兼容词表角标） ── */
            --mastery-1: #B0D4F1;  /* L1 旧蓝 */
            --mastery-2: #64B5F6;  /* L2 旧蓝 */
            --mastery-3: #1E88E5;  /* L3 旧蓝 */
            --mastery-4: #0D47A1;  /* L4 旧蓝 */
            /* ── 词汇能力图谱配色 ── */
            --mastery-l0: #cbd5e1;  /* L0 未学 浅灰 */
            --mastery-l1: #90a4b8;  /* L1 认识 灰蓝 */
            --mastery-l2: #3b82f6;  /* L2 理解 蓝色 */
            --mastery-l3: #22c55e;  /* L3 会读 绿色 */
            --mastery-l4: #f59e0b;  /* L4 会用 金色 */
            /* ── Today 页视觉升级系统 ── */
            --shadow-float:  0 24px 48px rgba(15,23,42,0.07), 0 4px 12px rgba(15,23,42,0.04);
            --shadow-card-v2: 0 8px 24px rgba(15,23,42,0.05), 0 2px 6px rgba(15,23,42,0.03);
            --shadow-subtle-v2: 0 2px 8px rgba(15,23,42,0.04);
            --shadow-inset: inset 0 1px 2px rgba(15,23,42,0.06);
            --shadow-glow-blue-v2: 0 8px 24px rgba(79,143,247,0.15);
            --shadow-glow-green: 0 8px 24px rgba(43,200,102,0.12);
            --border-card: 1px solid rgba(15,23,42,0.10);
            --border-subtle: 1px solid rgba(15,23,42,0.06);
            --border-accent: 1.5px solid rgba(79,143,247,0.20);
            --border-success: 1.5px solid rgba(43,200,102,0.20);
            --radius-lg: 24px;
            --radius-md: 16px;
            --radius-sm: 10px;
            --radius-full: 999px;
            --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
            --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
            --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
            --duration-fast: 0.15s;
            --duration-normal: 0.25s;
            --duration-slow: 0.4s;
        }
        [data-theme="dark"] {
            --mastery-1: #78B8E8;
            --mastery-2: #5DA8E5;
            --mastery-3: #42A5F5;
            --mastery-4: #2979FF;
            --mastery-l0: #475569;
            --mastery-l1: #7a8fa0;
            --mastery-l2: #60a5fa;
            --mastery-l3: #4ade80;
            --mastery-l4: #fbbf24;
            --shell-ambient-top: rgba(91,156,247,0.22);
            --shell-ambient-mid: rgba(164,139,250,0.14);
            --shell-ambient-bottom: rgba(56,189,248,0.09);
            --app-shell-bg: linear-gradient(180deg, rgba(12,20,34,0.82) 0%, rgba(16,24,40,0.92) 100%);
            --app-shell-border: rgba(148,163,184,0.14);
            --app-shell-shadow: 0 28px 80px rgba(0,0,0,0.4), 0 8px 18px rgba(0,0,0,0.2);
            --shell-header-bg: linear-gradient(180deg, rgba(16,24,40,0.84), rgba(16,24,40,0.72));
            --shell-nav-bg: rgba(15,23,42,0.78);
            --overlay-scrim-bg: rgba(3,7,18,0.64);
            --overlay-scrim-top: rgba(91,156,247,0.18);
            --overlay-scrim-bottom: rgba(125,164,255,0.09);
            --overlay-panel-bg: linear-gradient(180deg, rgba(14,20,32,0.9) 0%, rgba(18,26,40,0.96) 100%);
            --overlay-panel-border: rgba(148,163,184,0.16);
            --overlay-panel-shadow: 0 28px 84px rgba(0,0,0,0.5), 0 10px 24px rgba(0,0,0,0.28);
            --overlay-section-bg: rgba(255,255,255,0.04);
            --overlay-section-border: rgba(148,163,184,0.14);
            /* ── Today 页视觉升级系统（暗色） ── */
            --shadow-float:  0 24px 48px rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.15);
            --shadow-card-v2: 0 8px 24px rgba(0,0,0,0.2), 0 2px 6px rgba(0,0,0,0.1);
            --shadow-subtle-v2: 0 2px 8px rgba(0,0,0,0.15);
            --shadow-inset: inset 0 1px 2px rgba(0,0,0,0.2);
            --shadow-glow-blue-v2: 0 8px 24px rgba(79,143,247,0.2);
            --shadow-glow-green: 0 8px 24px rgba(43,200,102,0.15);
            --border-card: 1px solid rgba(255,255,255,0.08);
            --border-subtle: 1px solid rgba(255,255,255,0.04);
            --border-accent: 1.5px solid rgba(79,143,247,0.25);
            --border-success: 1.5px solid rgba(43,200,102,0.25);
        }

        html { height: 100%; background: var(--bg); }
        body { min-height: 100%; touch-action: manipulation; }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC',
                         'Microsoft YaHei', 'Segoe UI', Roboto, Arial, sans-serif;
            color: var(--text);
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            position: relative;
            z-index: 0;
            background: transparent;
        }
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            background:
                /* noise texture — subtle grain like Linear/Notion */
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"),
                radial-gradient(circle at 16% -6%, var(--shell-ambient-top), transparent 34%),
                radial-gradient(circle at 84% 2%, var(--shell-ambient-mid), transparent 30%),
                radial-gradient(circle at 52% 44%, rgba(255,255,255,0.42), transparent 34%),
                radial-gradient(circle at 50% 110%, var(--shell-ambient-bottom), transparent 42%),
                linear-gradient(180deg, #f5f8fe 0%, var(--bg) 24%, #e8eef8 62%, #f1f5fb 100%);
        }
        [data-theme="dark"] body::before {
            background:
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
                radial-gradient(circle at 16% -6%, var(--shell-ambient-top), transparent 32%),
                radial-gradient(circle at 84% 2%, var(--shell-ambient-mid), transparent 28%),
                radial-gradient(circle at 50% 18%, rgba(17,24,39,0.16), transparent 44%),
                linear-gradient(180deg, #0b1220 0%, #0c1524 100%);
        }
        #app {
            width: 100%;
            max-width: var(--app-max-width);
            margin: 0 auto;
            position: relative;
            isolation: isolate;
        }
        /* PC: #app 浮卡效果 — 手机不加（全屏贴边） */
        @media (min-width: 640px) {
            #app {
                margin-top: 16px;
                margin-bottom: 16px;
                border-radius: 24px;
                min-height: calc(100vh - 32px);
                background: transparent;
                border: none;
                box-shadow: none;
                overflow-x: hidden;
                overflow-y: visible;
            }
            #app::before {
                content: '';
                position: absolute;
                inset: 0;
                z-index: -1;
                pointer-events: none;
                border-radius: inherit;
                box-shadow: var(--app-shell-shadow);
                background: var(--app-shell-bg);
                border: 1px solid var(--app-shell-border);
                backdrop-filter: blur(22px);
                -webkit-backdrop-filter: blur(22px);
            }
            [data-theme="dark"] #app::before {
                box-shadow: var(--app-shell-shadow);
                background: var(--app-shell-bg);
            }
            /* 底栏保持独立悬浮，不贴死在 #app 壳层上 */
            .btm-nav {
                width: min(calc(100% - 32px), var(--shell-max-width));
                max-width: none;
                border-radius: 22px;
                bottom: max(12px, calc(12px + env(safe-area-inset-bottom)));
                padding: 6px 12px;
            }
            .btm-nav-label { font-size: 11px; }
            .btm-nav-item { border-radius: 16px; }
        }

        /* ── Safe-area padding (iOS notch / Android cutout / home indicator) ── */
        /* env() falls back to 0 on desktop, so this is safe everywhere        */
        .hd {
            background: var(--shell-header-bg);
            border: 1px solid rgba(255,255,255,0.44);
            border-bottom: 1px solid rgba(15,23,42,0.06);
            box-shadow: 0 14px 30px rgba(15,23,42,0.05);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            padding: calc(10px + env(safe-area-inset-top)) 20px 0;
            display: flex;
            flex-direction: column;
            width: min(100%, var(--shell-max-width));
            margin: 10px auto 0;
            border-radius: 24px 24px 18px 18px;
        }
        [data-theme="dark"] .hd {
            background: var(--shell-header-bg);
            border-color: rgba(148,163,184,0.14);
            border-bottom-color: rgba(148,163,184,0.08);
            box-shadow: none;
        }
        /* Row 1: title + action buttons — never wraps */
        .hd-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding-bottom: 12px;
        }
        .hd-brand {
            display: none; /* hidden on desktop, shown on mobile */
            align-items: center;
            gap: 8px;
            padding-bottom: 6px;
        }
        .hd-brand-icon {
            width: 28px; height: 28px; border-radius: 7px;
            image-rendering: -webkit-optimize-contrast;
        }
        .hd-brand-name {
            font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em;
            background: linear-gradient(135deg, #4f8ff7 0%, #8b6cf6 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .hd-brand-slogan {
            font-size: 0.72rem; color: var(--muted); font-weight: 500;
            margin-left: auto;
        }
        .hd-title {
            font-size: 1.04rem;
            font-weight: 800;
            white-space: nowrap;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            letter-spacing: -0.02em;
        }
        .hd-title-slogan {
            font-size: 0.72rem; font-weight: 600; color: var(--muted);
            margin-left: 6px;
            opacity: 0.88;
        }
        .hd-account-btn {
            flex-shrink: 0; cursor: pointer;
            border: none; border-radius: 99px;
            background: transparent; padding: 0;
            display: flex; align-items: center; justify-content: center;
            transition: transform 0.15s;
            -webkit-tap-highlight-color: transparent;
        }
        .hd-account-btn:hover { transform: scale(1.08); }
        .hd-account-btn:active { transform: scale(1.08); }
        .hd-account-btn:hover .hd-account-avatar { box-shadow: 0 0 0 2.5px rgba(79, 143, 247, 0.35); }
        .hd-account-avatar {
            width: 32px; height: 32px; border-radius: 50%;
            background: linear-gradient(135deg, var(--blue), #7e74f6);
            color: #fff;
            font-size: 0.8rem; font-weight: 700; letter-spacing: 0;
            display: flex; align-items: center; justify-content: center;
            transition: box-shadow 0.15s;
            box-shadow: 0 10px 24px rgba(79, 143, 247, 0.22);
        }
        .hd-account-login {
            font-size: 0.75rem; font-weight: 600; color: var(--blue);
            padding: 5px 12px; white-space: nowrap;
            border: 1.5px solid rgba(79, 143, 247, 0.4);
            border-radius: 99px;
        }
        /* Mobile: show brand-row account, hide PC one */
        @media (max-width: 640px) {
            .hd-account-btn-pc { display: none; }
        }
        /* PC: hide mobile brand-row account (brand row already hidden) */
        @media (min-width: 641px) {
            #accountBtnMobile { display: none; }
        }
        @media (max-width: 640px) {
            .hd-brand { display: flex; }
            .hd-title { display: none; }
        }
        @media (min-width: 641px) {
            .hd-brand { display: none; }
            .hd-title { display: flex; align-items: center; gap: 8px; }
            .hd-title::before {
                content: ''; display: inline-block;
                width: 24px; height: 24px;
                background: url('icons/apple-touch-icon.png') center/contain no-repeat;
                border-radius: 6px;
                flex-shrink: 0;
            }
        }
        /* Row 3: stats chips — always one line, scrollable */
        .chips {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            flex-wrap: nowrap;
            padding: 10px 0 14px;
            border-top: 1px solid var(--border);
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .chips::-webkit-scrollbar { display: none; }
        .chip {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 6px 12px;
            border-radius: 99px;
            font-size: 0.72rem;
            font-weight: 700;
            white-space: nowrap;
            flex-shrink: 0;
            border: 1px solid rgba(125, 138, 163, 0.1);
        }
        .chip-new    { background: rgba(79, 143, 247, 0.1);   color: var(--blue); }
        .chip-learn  { background: rgba(245, 158, 11, 0.1);  color: var(--amber); }
        .chip-review { background: rgba(43, 200, 102, 0.1);  color: var(--green); }
        .chip-master { background: rgba(139, 108, 246, 0.1); color: var(--purple); }
        .chip-difficult { background: rgba(240, 80, 80, 0.1); color: var(--red); }
        .chip-fav { background: rgba(245, 158, 11, 0.1); color: #b45309; }
        .chip-streak { background: rgba(240, 80, 80, 0.08);     color: var(--red); }
        .chip-daily  { background: rgba(245, 158, 11, 0.08);   color: var(--amber); }

        /* ── Unified progress bar ────────────────────────────── */
        .uni-progress {
            padding: 10px 14px 14px;
            border-top: 1px solid var(--border);
            max-width: var(--content-max-width);
            margin: 0 auto;
            width: 100%;
            box-sizing: border-box;
        }
        .uni-bar-wrap { flex: 1; cursor: pointer; min-width: 0; }
        .uni-quick-btn {
            width:32px; height:32px; flex-shrink:0;
            display:flex; align-items:center; justify-content:center;
            border-radius:9px; font-size:1rem; text-decoration:none;
            transition:background .12s;
         min-height: 44px; min-width: 44px; }
        .uni-quick-btn:hover { background: rgba(79, 143, 247, 0.08); }
        .uni-quick-btn:active { background: rgba(79, 143, 247, 0.08); }
        .uni-bar {
            height: 10px; border-radius: 999px; overflow: hidden;
            background: rgba(79, 143, 247, 0.08);
            display: flex; /* mastered first = fills from left */
        }
        .uni-seg { height: 100%; transition: width .5s ease; }
        .uni-mastered { background: var(--purple); }
        .uni-mature   { background: var(--green); }
        .uni-young    { background: #14b8a6; }
        .uni-learning { background: var(--amber); }
        .uni-label {
            display: flex; align-items: center; gap: 6px;
            margin-top: 7px; font-size: 0.7rem; color: var(--muted);
        }
        .uni-label span { white-space: nowrap; }
        .uni-streak-inline { color: var(--amber); font-weight: 700; cursor: pointer; }
        .uni-mastered-count { color: var(--muted); font-weight: 600; }
        .uni-review-badge { color: var(--green); font-weight: 600; }
        .level-badge {
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--muted);
            white-space: nowrap;
        }
        .hd-btns { display: flex; gap: 4px; align-items: center; overflow-x: auto; flex-shrink: 1; min-width: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: auto; }
        .hd-btns::-webkit-scrollbar { display: none; }
        .btn-hd {
            background: rgba(255, 255, 255, 0.78);
            border: 1px solid var(--border);
            padding: 9px 12px;
            min-height: 44px;
            border-radius: 12px;
            cursor: pointer;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--muted);
            transition: all 0.18s;
            white-space: nowrap;
            -webkit-tap-highlight-color: transparent;
            box-shadow: 0 4px 10px rgba(20,32,61,0.04);
        }
        .btn-hd:hover {
            background: rgba(79, 143, 247, 0.08);
            border-color: rgba(79, 143, 247, 0.18);
            color: var(--blue);
        }
        .btn-hd:active { transform: scale(0.93); }
        .btn-hd.active {
            background: rgba(79, 143, 247, 0.12);
            border-color: rgba(79, 143, 247, 0.2);
            color: var(--blue);
            box-shadow: 0 8px 18px rgba(79, 143, 247, 0.12);
        }
        .btn-hd.danger:hover { background: rgba(240, 80, 80, 0.08); color: var(--red); }
        .btn-hd-labeled { display: inline-flex; align-items: center; gap: 4px; }
        .btn-hd-icon { font-size: 0.82rem; line-height: 1; flex-shrink: 0; }
        .btn-hd-text { font-size: 0.72rem; font-weight: 600; }

        /* ── More dropdown menu ──────────────── */
        .hd-more-wrap { position: relative; display: inline-flex; }
        .hd-more-dropdown {
            position: absolute; top: 100%; right: 0; z-index: 200;
            min-width: 140px; margin-top: 4px; padding: 4px 0;
            background: var(--surface); border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0,0,0,.12); border: 1px solid var(--border);
        }
        .hd-more-item {
            display: flex; align-items: center; gap: 8px; width: 100%;
            padding: 8px 14px; border: none; background: none; cursor: pointer;
            font-size: 0.82rem; color: var(--text); white-space: nowrap;
        }
        .hd-more-item:hover { background: rgba(79, 143, 247, 0.06); }
        .hd-more-item:active { background: rgba(79, 143, 247, 0.06); }

        /* ── Mode bar (below card) ───────────── */
        .mode-bar {
            display: flex; gap: 8px;
            justify-content: center;
            padding: 12px 14px 4px;
            flex-shrink: 0;
        }
        .mode-btn {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 99px;
            padding: 8px 20px;
            font-size: 0.78rem; font-weight: 700;
            color: var(--muted); cursor: pointer;
            transition: all 0.18s;
            box-shadow: 0 6px 14px rgba(20,32,61,0.05);
            -webkit-tap-highlight-color: transparent;
        }
        .mode-btn:hover { color: var(--blue); }
        .mode-btn:active { color: var(--blue); }
        .mode-btn.active {
            color: var(--blue);
            background: rgba(79, 143, 247, 0.1);
            box-shadow: 0 2px 8px rgba(79, 143, 247, 0.1);
        }
        .mode-btn-play.active {
            color: #8b5cf6;
            background: rgba(139, 92, 246, 0.1);
            box-shadow: 0 2px 8px rgba(139,92,246,.10);
        }

        /* ── Deck selector bar (inside .hd — inherits 18px horizontal padding) ─ */
        .deck-row {
            display: flex; align-items: center; gap: 0;
            position: relative;
        }
        .deck-bar {
            background: transparent;
            padding: 4px 0 10px;
            display: flex;
            gap: 8px;
            overflow-x: auto;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
            flex: 1; min-width: 0;
            mask-image: linear-gradient(to right, black calc(100% - 36px), transparent 100%);
            -webkit-mask-image: linear-gradient(to right, black calc(100% - 36px), transparent 100%);
        }
        .deck-bar::-webkit-scrollbar { display: none; }
        .deck-fav-btn {
            flex-shrink: 0;
            display: flex; align-items: center; gap: 4px;
            padding: 8px 14px 8px 12px;
            margin-bottom: 6px;
            border-radius: 99px;
            border: 1.5px solid rgba(245, 158, 11, 0.3);
            background: rgba(245, 158, 11, 0.06);
            font-size: 0.8rem; font-weight: 800;
            color: var(--amber, #f59e0b);
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.18s;
            box-shadow: var(--shadow-sm);
            -webkit-tap-highlight-color: transparent;
        }
        .deck-fav-btn:hover {
            border-color: var(--amber, #f59e0b);
            box-shadow: 0 2px 12px rgba(245, 158, 11, 0.25);
        }
        .deck-fav-btn:active {
            border-color: var(--amber, #f59e0b);
            box-shadow: 0 2px 12px rgba(245, 158, 11, 0.25);
        }
        .deck-quick-links { display:flex; gap:2px; flex-shrink:0; margin-left:2px; }
        .deck-quick-btn {
            width:34px; height:34px; display:flex; align-items:center; justify-content:center;
            border-radius:10px; font-size:1rem; text-decoration:none;
            color: var(--text); transition:background .12s;
         min-height: 44px; min-width: 44px; }
        .deck-quick-btn:hover { background: rgba(79, 143, 247, 0.08); }
        .deck-quick-btn:active { background: rgba(79, 143, 247, 0.08); }
        .deck-fav-btn.active {
            color: #fff;
            background: var(--amber, #f59e0b);
            border-color: var(--amber, #f59e0b);
            box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
        }
        .deck-fav-count {
            font-size: 0.72rem; font-weight: 800;
            background: rgba(245, 158, 11, 0.15);
            padding: 1px 7px; border-radius: 99px;
            min-width: 18px; text-align: center;
        }
        .deck-fav-btn.active .deck-fav-count {
            background: rgba(255,255,255,0.25); color: #fff;
        }
        .deck-btn {
            background: var(--surface);
            border: 1.5px solid var(--border);
            padding: 8px 16px;
            border-radius: 99px;
            cursor: pointer;
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--muted);
            white-space: nowrap;
            transition: all 0.18s;
            flex-shrink: 0;
            box-shadow: 0 6px 14px rgba(20,32,61,0.05);
            -webkit-tap-highlight-color: transparent;
        }
        .deck-btn:hover {
            color: var(--blue);
            box-shadow: 0 10px 22px rgba(20,32,61,0.08);
            border-color: rgba(79, 143, 247, 0.25);
        }
        .deck-more-btn {
            background: transparent;
            border: 1px dashed rgba(79, 143, 247, 0.26);
            padding: 8px 14px;
            border-radius: 99px;
            cursor: pointer;
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--blue);
            white-space: nowrap;
            transition: background 0.18s, border-color 0.18s, transform 0.18s;
            flex-shrink: 0;
            margin-bottom: 6px;
        }
        .deck-more-btn:hover {
            background: rgba(79, 143, 247, 0.06);
            border-color: rgba(79, 143, 247, 0.38);
        }
        .deck-more-btn:active {
            background: rgba(79, 143, 247, 0.06);
            border-color: rgba(79, 143, 247, 0.38);
        }
        .deck-btn:active { transform: scale(0.96); }
        .deck-btn.active {
            color: #fff;
            background: var(--blue);
            border-color: var(--blue);
            box-shadow: 0 4px 18px rgba(79, 143, 247, 0.45);
            transform: translateY(-1px);
            font-weight: 700;
        }

        /* ── Mini learning path strip (in-study) ─────────────── */
        .lp-mini-strip {
            display: flex; align-items: center; justify-content: center;
            padding: 0 20px; gap: 0; flex-shrink: 0;
            margin-bottom: 10px;
        }
        .lp-mini-node { display: flex; flex-direction: column; align-items: center; gap: 2px; }
        .lp-mini-circ {
            width: 22px; height: 22px; border-radius: 50%;
            border: 1.5px solid rgba(221, 229, 240, 0.8);
            background: var(--surface);
            color: var(--muted); font-size: 0.6rem; font-weight: 600;
            display: flex; align-items: center; justify-content: center;
            transition: all .35s cubic-bezier(.4,0,.2,1);
        }
        .lp-mini-lbl {
            font-size: 0.54rem; font-weight: 500; color: var(--muted);
            white-space: nowrap; letter-spacing: 0.01em;
            transition: color .3s;
        }
        .lp-mini-node.active .lp-mini-circ {
            border-color: var(--blue); background: var(--blue); color: #fff;
            box-shadow: 0 0 0 3px rgba(79, 143, 247, 0.12);
        }
        .lp-mini-node.active .lp-mini-lbl { color: var(--blue); font-weight: 600; }
        .lp-mini-seg {
            flex: 1; height: 2px; background: rgba(221, 229, 240, 0.6);
            border-radius: 99px;
            min-width: 28px; max-width: 56px; margin: 0 5px; margin-bottom: 14px;
            transition: background .35s;
        }
        .lp-mini-seg.filled { background: var(--green); }
        .lp-header-row {
            display: flex; align-items: center; justify-content: space-between;
            padding: 6px 0 0; gap: 8px; width: 100%;
        }
        .lp-mini-strip-wrap { flex: 1; display: flex; justify-content: center; min-width: 0; }
        .lp-quick-links { display: flex; gap: 5px; flex-shrink: 0; }
        .lp-quick-pill {
            display: flex; align-items: center; gap: 3px;
            height: 28px; padding: 0 9px;
            border-radius: 20px; font-size: 0.72rem; font-weight: 600;
            color: var(--muted); text-decoration: none;
            background: rgba(0,0,0,0.04); transition: background .12s, color .12s;
            white-space: nowrap;
        }
        [data-theme="dark"] .lp-quick-pill { background: rgba(255,255,255,0.07); }
        .lp-quick-pill:hover, .lp-quick-pill:active { background: rgba(79,143,247,0.1); color: var(--blue); }
        .lp-round-label {
            font-size: 0.78rem; font-weight: 700;
            color: var(--blue); letter-spacing: 0.04em;
            white-space: nowrap; flex-shrink: 0;
        }
        .lp-mini-node.done .lp-mini-circ {
            border-color: var(--green); background: var(--green); color: #fff;
        }
        .lp-mini-node.done .lp-mini-lbl { color: var(--green); font-weight: 600; }

        /* (removed: lp-stepper — unified results card progress dots replace it) */
        /* Next-step CTA on practice done */
        .prac-next-step {
            display: flex; align-items: center; gap: 16px;
            width: 100%; max-width: 400px;
            padding: 18px 22px; border-radius: 20px; border: none;
            background: linear-gradient(135deg, #34d058 0%, #22c55e 40%, #16a34a 100%);
            color: #fff; cursor: pointer; text-align: left;
            box-shadow: 0 4px 20px rgba(34,197,94,0.25), 0 1px 3px rgba(0,0,0,0.06);
            transition: transform 0.2s cubic-bezier(.32,.72,0,1), box-shadow 0.25s;
            animation: pracFadeUp .5s .5s ease both, pracNextGlow 2.5s 1.5s ease-in-out 3;
            -webkit-tap-highlight-color: transparent;
            position: relative;
            overflow: hidden;
        }
        .prac-next-step::before {
            content: '';
            position: absolute; inset: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
            transform: translateX(-100%);
            animation: pracNextShimmer 2s 2s ease-in-out 2;
        }
        @keyframes pracNextShimmer {
            to { transform: translateX(100%); }
        }
        @keyframes pracNextGlow {
            0%, 100% { box-shadow: 0 4px 20px rgba(34,197,94,0.25), 0 1px 3px rgba(0,0,0,0.06); }
            50% { box-shadow: 0 6px 32px rgba(34,197,94,0.4), 0 2px 6px rgba(0,0,0,0.08); }
        }
        .prac-next-step:hover  { box-shadow: 0 8px 32px rgba(34,197,94,0.38); transform: translateY(-2px); }
        .prac-next-step:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(34,197,94,0.2); }
        .prac-next-step-icon { font-size: 1.6rem; flex-shrink: 0; line-height: 1; }
        .prac-next-step-text { flex: 1; display: flex; flex-direction: column; gap: 4px; }
        .prac-next-step-title { font-size: 0.95rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
        .prac-next-step-hint  { font-size: 0.74rem; opacity: 0.85; line-height: 1.35; }
        .prac-next-step-arrow { font-size: 1.2rem; flex-shrink: 0; opacity: 0.8; transition: transform 0.2s cubic-bezier(.32,.72,0,1); }
        .prac-next-step:hover .prac-next-step-arrow { transform: translateX(4px); }
        .prac-reading-cta-wrap {
            display: flex; flex-direction: column; align-items: center;
            gap: 10px; width: 100%; animation: pracFadeUp .5s .45s ease both;
        }
        .prac-reading-cta-label {
            font-size: 0.72rem; font-weight: 600; color: var(--green);
            text-transform: uppercase; letter-spacing: 0.06em;
            opacity: 0.9;
        }
        /* Reading overlay step bar */
        .reading-lp-wrap {
            padding: 8px 20px 2px;
            background: rgba(255, 255, 255, 0.5);
            border-bottom: 0.5px solid rgba(221, 229, 240, 0.4);
        }
        .reading-stepper {
            display: flex; align-items: center; justify-content: center;
            gap: 0; padding: 8px 0 8px;
        }
        .reading-stepper .lp-circle  { width: 28px; height: 28px; font-size: 0.72rem; border-width: 2px; }
        .reading-stepper .lp-label   { font-size: 0.62rem; }
        .reading-stepper .lp-line    { min-width: 28px; max-width: 44px; height: 2px; margin-bottom: 18px; }

        /* ── Done screen ─────────────────────── */
        @keyframes doneEnter {
            from { opacity:0; transform: translateY(18px) scale(.97); }
            to   { opacity:1; transform: none; }
        }
        @keyframes emojiBounce {
            0%   { transform: scale(0.4) rotate(-15deg); opacity:0; }
            55%  { transform: scale(1.18) rotate(6deg);  opacity:1; }
            75%  { transform: scale(0.92) rotate(-3deg); }
            90%  { transform: scale(1.04); }
            100% { transform: scale(1) rotate(0deg); }
        }
        @keyframes badgePop {
            from { transform: scale(.7); opacity:0; }
            to   { transform: scale(1); opacity:1; }
        }
        .done-scr {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 34px 20px 48px;
            gap: 0;
            overflow-y: auto;
            animation: doneEnter .45s cubic-bezier(.22,1,.36,1) both;
            max-width: var(--content-max-width);
            margin: 0 auto;
            width: 100%;
        }
        .done-header   { display: flex; flex-direction: column; align-items: center; gap: 7px; margin-bottom: 14px; }
        .done-emoji    { font-size: 2.8rem; line-height: 1; animation: emojiBounce .65s cubic-bezier(.22,1,.36,1) both; }
        .done-title    { font-size: 1.56rem; font-weight: 800; letter-spacing: -0.02em; }
        .done-subtitle { font-size: 0.88rem; color: var(--muted); margin-top: 2px; line-height: 1.55; max-width: 34ch; }
        /* Session stats bar — 4 columns */
        .done-session-stats {
            display: flex; align-items: center; justify-content: center;
            gap: 0; width: 100%; max-width: 380px;
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 16px; padding: 12px 0; margin-bottom: 10px;
        }
        .done-ss-item { flex: 1; text-align: center; }
        .done-ss-val { font-size: 1.2rem; font-weight: 800; color: var(--text); line-height: 1.2; }
        .done-ss-label { font-size: 0.68rem; color: var(--muted); font-weight: 600; margin-top: 2px; }
        .done-ss-divider { width: 1px; height: 28px; background: var(--border); flex-shrink: 0; }
        [data-theme="dark"] .done-session-stats { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
        /* Primary action glows on enter */
        .done-action-primary { animation: doneEnter .5s .25s cubic-bezier(.22,1,.36,1) both; }
        .done-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1px;
            width: 100%;
            max-width: 380px;
            background: rgba(200,206,218,0.7);
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid rgba(200,206,218,0.88);
            margin-bottom: 14px;
            box-shadow: var(--shadow-sm);
        }
        .done-stat {
            display: flex; flex-direction: column; align-items: center; gap: 3px;
            background: var(--surface);
            padding: 16px 8px;
        }
        .done-stat-val   { font-size: 1.6rem; font-weight: 700; color: var(--blue); line-height: 1.1; }
        .done-stat-label { font-size: 0.66rem; color: var(--muted); opacity: 0.8; }
        /* (removed: done-meta-row, done-forecast, done-stage, done-graduated — unified results card replaces these) */
        .fav-star { font-size:0.85rem; }
        .fav-star.active { color:#f59e0b; }
        .fav-item { display:flex; align-items:center; gap:8px; padding:10px 18px;
            border-bottom:1px solid var(--border); }
        .fav-item:last-child { border-bottom:none; }
        .fav-item-word { font-weight:700; flex-shrink:0; }
        .fav-item-zh { flex:1; color:var(--muted); font-size:0.85rem; }
        .fav-item-remove { background:none; border:none; color:var(--muted); cursor:pointer; font-size:0.85rem; }
        .fav-practice-btn { width:100%; padding:12px; border-radius:12px; background:var(--blue);
            color:#fff; font-weight:600; border:none; cursor:pointer; font-size:0.9rem; }
        /* Action cards */
        .done-actions {
            display: flex; flex-direction: column; gap: 10px;
            width: 100%; max-width: 380px;
            margin-bottom: 30px;
        }
        .done-action {
            display: flex; align-items: center; gap: 14px;
            padding: 18px 20px; border-radius: 18px;
            border: none; cursor: pointer; text-align: left; width: 100%;
            transition: transform 0.12s, box-shadow 0.18s;
            -webkit-tap-highlight-color: transparent;
        }
        .done-action:active { transform: scale(0.98) !important; box-shadow: none !important; }
        .done-action-icon  { font-size: 1.35rem; flex-shrink: 0; line-height: 1; }
        .done-action-text  { flex: 1; display: flex; flex-direction: column; gap: 3px; }
        .done-action-title { font-size: 0.9rem; font-weight: 700; line-height: 1.25; }
        .done-action-hint  { font-size: 0.72rem; opacity: 0.72; line-height: 1.35; }
        .done-action-arrow { font-size: 1.05rem; flex-shrink: 0; opacity: 0.55; transition: transform 0.15s; }
        .done-action:hover .done-action-arrow { transform: translateX(3px); }
        .done-action-primary {
            background: linear-gradient(135deg, #8b6cf6, #7c3aed);
            color: #fff;
            box-shadow: 0 4px 16px rgba(139,92,246,0.25);
        }
        .done-action-primary:hover  { box-shadow: 0 6px 22px rgba(139,92,246,0.35); transform: translateY(-1px); }
        .done-action-tertiary {
            background: var(--surface); color: var(--text);
            border: 1.5px solid var(--border);
        }
        .done-action-tertiary .done-action-arrow { color: var(--muted); opacity: 1; }
        .done-action-tertiary:hover { border-color: rgba(79, 143, 247, 0.4); box-shadow: var(--shadow-sm); }
        /* (removed: done-action-hard, done-extra, done-share-pill — unified results card replaces these) */
        .share-svg { vertical-align: middle; flex-shrink: 0; }
        /* ── Sync button ── */
        .sync-svg { vertical-align: middle; flex-shrink: 0; transition: transform .3s; }
        .btn-hd.syncing .sync-svg { animation: syncSpin .8s linear infinite; }
        .btn-hd.sync-ok { background: rgba(43, 200, 102, 0.1) !important; color: var(--green) !important; }
        @keyframes syncSpin { to { transform: rotate(360deg); } }
        /* Practice done footer buttons */
        .prac-done-footer {
            display: flex; gap: 10px; width: 100%; margin-top: 8px;
            animation: pracFadeUp .5s .55s ease both;
        }
        .prac-foot-share {
            flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px;
            padding: 14px 18px; border-radius: 14px;
            border: 1.5px solid var(--border); color: var(--muted); background: transparent;
            font-size: 0.88rem; font-weight: 600; cursor: pointer;
            transition: border-color 0.18s, color 0.18s;
            -webkit-tap-highlight-color: transparent;
        }
        .prac-foot-share:hover { border-color: var(--blue); color: var(--blue); }
        .prac-foot-share:active { transform: scale(0.95); }
        .prac-foot-retry {
            flex: 1;
            padding: 14px; border-radius: 14px;
            border: 1.5px solid var(--blue); background: transparent; color: var(--blue);
            font-size: 0.9rem; font-weight: 600; cursor: pointer;
            transition: .18s;
            -webkit-tap-highlight-color: transparent;
        }
        .prac-foot-retry:hover { background: rgba(79,143,247,0.06); }
        .prac-foot-retry:active { transform: scale(0.97); }
        .prac-foot-back {
            flex: 1;
            background: linear-gradient(135deg, #5b9cf7, #4f8ff7);
            color: #fff; border: none;
            padding: 14px; border-radius: 14px;
            font-size: 0.95rem; font-weight: 700; cursor: pointer;
            box-shadow: 0 4px 16px rgba(79, 143, 247, 0.25);
            transition: box-shadow 0.18s, transform 0.12s;
            -webkit-tap-highlight-color: transparent;
        }
        .prac-foot-back:hover  { box-shadow: 0 6px 22px rgba(79,143,247,0.35); transform: translateY(-1px); }
        .prac-foot-back:active { transform: scale(0.97); box-shadow: none; }
        /* Confetti burst for perfect score */
        @keyframes pracConfetti {
            0%   { opacity: 1; transform: translateY(0) scale(1); }
            100% { opacity: 0; transform: translateY(-60px) scale(1.6); }
        }
        .prac-confetti {
            position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
            font-size: 1.8rem; pointer-events: none;
            animation: pracConfetti 1.2s .3s ease-out both;
        }

        /* ── Card area ───────────────────────── */
        .card-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 22px 20px 24px;
            max-width: var(--content-max-width);
            margin: 0 auto;
            width: 100%;
        }

        /* ── List view ───────────────────────── */
        .wl-wrap { width: 100%; overflow-y: auto; flex: 1; }
        .wl-summary {
            display: flex; gap: 8px; align-items: center; justify-content: center;
            padding: 10px 12px; margin-bottom: 12px;
            background: rgba(79, 143, 247, 0.06);
            border-radius: var(--r); font-size: 0.82rem; color: var(--muted);
        }
        .wl-summary strong { color: var(--text); font-weight: 700; }
        .wl-summary-divider { color: var(--border); }
        .wl-section { margin-bottom: 20px; }
        .wl-section-title {
            font-size: .69rem; font-weight: 700; color: var(--muted);
            text-transform: uppercase; letter-spacing: .08em;
            padding: 0 2px 7px; border-bottom: 1px solid var(--border);
        }
        .wl-row {
            padding: 10px 8px; border-radius: 10px; cursor: pointer;
            transition: background .15s;
            border-bottom: 1px solid rgba(221, 229, 240, 0.5);
        }
        .wl-row:last-child { border-bottom: none; }
        .wl-row:hover { background: rgba(79, 143, 247, 0.04); }
        .wl-row.open {
            background: var(--surface); border-bottom-color: transparent;
            margin-bottom: 3px; box-shadow: var(--shadow-sm);
        }
        .wl-row-head { display: flex; align-items: center; gap: 9px; }
        .wl-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
        .wl-dot-new    { background: #22c55e; }
        .wl-dot-learn  { background: #f97316; }
        .wl-dot-review { background: #3b82f6; }
        .wl-word { font-weight: 700; color: var(--text); flex-shrink: 0; min-width: 76px; font-size: .9rem; }
        .wl-mastery { flex-shrink: 0; font-size: 0.65rem; line-height: 1; }
        .wl-mastery-1 { color: var(--mastery-1); }
        .wl-mastery-2 { color: var(--mastery-2); }
        .wl-mastery-3 { color: var(--mastery-3); }
        .wl-mastery-4 { color: var(--mastery-4); font-size: 0.6rem; }
        .wl-zh-short { flex: 1; color: var(--muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .wl-chevron { color: #c0c8d8; font-size: .78rem; flex-shrink: 0; transition: transform .2s; line-height: 1; }
        .wl-row.open .wl-chevron { transform: rotate(90deg); color: var(--blue); }
        .wl-detail {
            margin-top: 8px; padding: 9px 10px; border-radius: 7px;
            background: var(--bg);
            display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px;
        }
        .wl-ipa { font-family: 'SF Mono', Menlo, monospace; color: var(--muted); font-size: .78rem; }
        .wl-pos-badge {
            background: linear-gradient(135deg, #4f8ff7 0%, #8b6cf6 100%);
            border-radius: 4px;
            padding: 1px 7px; font-size: .7rem; color: white; font-weight: 600;
        }
        .wl-zh-full { color: var(--text); font-size: .88rem; width: 100%; margin-top: 2px; font-weight: 500; }
        .wl-example-text { color: var(--muted); font-size: .76rem; font-style: italic; width: 100%; margin-top: 4px; }

        /* progress */
        .prog-row {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }
        .prog-track {
            flex: 1; height: 4px;
            background: rgba(221, 229, 240, 0.45);
            border-radius: 99px;
            overflow: hidden;
        }
        .prog-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--green) 0%, var(--blue) 100%);
            border-radius: 99px;
            transition: width 0.6s cubic-bezier(.25,.46,.45,.94);
        }
        .prog-text {
            font-size: 0.72rem;
            font-weight: 500;
            color: var(--muted);
            min-width: 44px;
            text-align: right;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }
        /* Session progress row (above card) */
        .goal-row { width: 100%; margin-bottom: 2px; }
        .goal-detail {
            font-size: 0.78rem; color: var(--muted);
            display: flex; align-items: center; gap: 4px;
            padding: 0 2px 6px;
        }
        .goal-detail strong { color: var(--blue); font-weight: 700; }
        .goal-dot { color: var(--border); }
        /* Ring styles (used by done screen) */
        .goal-ring-bg  { fill: none; stroke: rgba(221, 229, 240, 0.5); stroke-width: 3; }
        .goal-ring-fill { fill: none; stroke-width: 3; stroke-linecap: round;
            transition: stroke-dashoffset .7s cubic-bezier(.25,.46,.45,.94); }
        .goal-ring-center {
            position: absolute; inset: 0; display: flex; align-items: center;
            justify-content: center; font-size: 0.68rem; font-weight: 700; color: var(--text);
            font-variant-numeric: tabular-nums;
        }
        /* (removed: done-goal — unified results card replaces) */

        /* card wrapper */
        .card-wrap {
            width: 100%;
            perspective: 1400px;
            margin-bottom: 18px;
            will-change: transform;
        }
        .card-wrap.shaking  { animation: do-shake  0.45s ease; }
        .card-wrap.bouncing { animation: do-bounce 0.35s ease; }
        /* Already Knew — card sweeps right off screen with slight tilt */
        .card-wrap.shredding .card {
            animation: do-shred 0.42s cubic-bezier(.4,0,.6,1) forwards;
            transition: none;
        }
        @keyframes do-shred {
            0%   { transform: scale(1)    translateX(0)     rotate(0deg);   opacity: 1; }
            16%  { transform: scale(1.04) translateX(-8px)  rotate(-.6deg); opacity: 1; }
            55%  { transform: scale(.97)  translateX(52px)  rotate(2.8deg); opacity: .65; }
            100% { transform: scale(.88)  translateX(115%)  rotate(7deg);   opacity: 0; }
        }
        /* Next card rises in with a gentle lift — depth of a fresh card being placed */
        .card-wrap.entering .card {
            animation: do-enter 0.36s cubic-bezier(.22,1,.36,1) forwards;
        }
        @keyframes do-enter {
            0%   { opacity: 0; transform: translateY(14px) scale(.96); }
            65%  { opacity: 1; transform: translateY(-3px) scale(1.01); }
            100% { opacity: 1; transform: none; }
        }

        /* (removed: done-caught-up, dw-forecast — unified results card replaces) */

        /* ── Session arc animations (Round 3) ───────────────────── */
        @keyframes deckReveal {
            0%   { opacity: 0; transform: translateY(28px) scale(.94) rotateX(8deg); }
            60%  { opacity: 1; transform: translateY(-4px) scale(1.01) rotateX(-1deg); }
            100% { opacity: 1; transform: none; }
        }
        .card-wrap.session-start .card {
            animation: deckReveal .55s cubic-bezier(.22,1,.36,1) both;
        }
        /* (removed: done-goal-ring — unified results card replaces) */

        /* ── Swipe gesture overlays (Round 1) ────────────────────── */
        .swipe-hint-left, .swipe-hint-right, .swipe-hint-down {
            position: absolute; inset: 0; border-radius: var(--r);
            pointer-events: none; opacity: 0; z-index: 2;
        }
        .swipe-hint-left  { background: linear-gradient(135deg, rgba(240,80,80,.18) 0%, transparent 60%); }
        .swipe-hint-right { background: linear-gradient(225deg, rgba(43,200,102,.18) 0%, transparent 60%); }
        .swipe-hint-down  { background: linear-gradient(180deg, rgba(240,160,32,.18) 0%, transparent 60%); }
        .swipe-label {
            position: absolute; font-size: 1.05rem; font-weight: 800; letter-spacing: .06em;
            padding: 5px 13px; border-radius: 8px; border: 2.5px solid currentColor;
            opacity: 0; pointer-events: none; z-index: 10;
        }
        .swipe-label-again { color: var(--red);   top: 22px; left: 18px;  transform: rotate(-15deg); }
        .swipe-label-good  { color: var(--green); top: 22px; right: 18px; transform: rotate(15deg); }
        .swipe-label-hard  { color: var(--amber); top: 22px; left: 50%; transform: translateX(-50%); }

        @keyframes do-shake {
            0%,100% { transform: translateX(0); }
            15%     { transform: translateX(-8px); }
            30%     { transform: translateX(8px); }
            50%     { transform: translateX(-5px); }
            70%     { transform: translateX(5px); }
            85%     { transform: translateX(-2px); }
        }
        @keyframes do-bounce {
            0%,100% { transform: scale(1); }
            40%     { transform: scale(1.045); }
            70%     { transform: scale(0.985); }
        }

        .card {
            position: relative;
            width: 100%;
            height: 320px;
            transform-style: preserve-3d;
            transition: transform 0.5s cubic-bezier(.4,0,.2,1);
            cursor: pointer;
            outline: none;
            will-change: transform;
        }
        .card.flipped  { transform: rotateY(180deg); }
        .card.instant  { transition: none; }   /* suppress flip-back anim when advancing cards */
        .card:focus-visible {
            outline: 2px solid var(--blue);
            outline-offset: 4px;
            border-radius: var(--r);
        }

        .face {
            position: absolute; inset: 0;
            backface-visibility: hidden;
            border-radius: var(--r);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 28px 24px 24px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 8px 32px rgba(0,0,0,0.06);
        }
        .face.front {
            background: var(--surface);
            border: 1px solid var(--border);
        }
        .face.back  {
            background: linear-gradient(148deg, #1e3d6e 0%, #101d38 100%);
            color: #fff;
            transform: rotateY(180deg);
        }

        /* front face elements */
        .pos-tag {
            position: absolute; top: 16px; right: 16px;
            background: rgba(79, 143, 247, 0.08); color: var(--blue);
            font-size: 0.64rem; font-weight: 600;
            text-transform: uppercase;
            padding: 3px 10px; border-radius: 99px;
            letter-spacing: 0.03em;
        }
        /* Stage badge on card front */
        .front-stage {
            position: absolute; top: 16px; left: 16px;
            font-size: 0.62rem; font-weight: 600;
            padding: 3px 9px; border-radius: 99px;
        }
        .fs-learning{ background: rgba(245, 158, 11, 0.12);  color: var(--amber); }
        .fs-young   { background: rgba(43, 200, 102, 0.12);  color: var(--green); }
        .fs-mature  { background: rgba(139, 108, 246, 0.12); color: var(--purple); }
        .fs-relearn { background: rgba(240, 80, 80, 0.12);    color: var(--red); }
        .front-word {
            font-size: 2.6rem;
            font-weight: 700;
            letter-spacing: -0.5px;
            text-align: center;
            line-height: 1.1;
            background: linear-gradient(135deg, #4f8ff7 0%, #8b6cf6 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .front-ipa {
            font-size: 0.88rem;
            color: var(--muted);
            margin-top: 8px;
            letter-spacing: 0.03em;
            min-height: 1.3em;
            opacity: 0.75;
        }
        .front-ipa.fetching {
            color: #ccd;
            animation: blink 1.4s ease-in-out infinite;
        }
        @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
        .audio-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            background: rgba(79, 143, 247, 0.07);
            border: none;
            border-radius: 99px;
            padding: 8px 22px;
            margin-top: 0;
            cursor: pointer;
            font-size: 0.82rem;
            color: var(--muted);
            transition: background 0.18s, color 0.18s, transform 0.12s;
            min-height: 38px;
            -webkit-tap-highlight-color: transparent;
         min-height: 44px; min-width: 44px; }
        .audio-btn:hover { background: rgba(79, 143, 247, 0.12); color: var(--blue); }
        .audio-btn:active { transform: scale(0.96); }
        .audio-btn.playing {
            color: var(--green);
            background: rgba(43, 200, 102, 0.1);
            animation: audioPlayPulse 1.6s ease-in-out infinite;
        }
        @keyframes audioPlayPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(43, 200, 102, 0.3); }
            50%       { box-shadow: 0 0 0 5px rgba(43, 200, 102, 0); }
        }
        .front-hint {
            position: absolute; bottom: 13px;
            font-size: 0.72rem; color: #c0c8d8;
        }

        /* leech tag on front face (6+ lapses — interference-prone word) */
        .front-leech {
            position: absolute; top: 12px; right: 12px;
            font-size: 0.62rem; font-weight: 700;
            padding: 2px 8px; border-radius: 99px;
            background: rgba(240, 80, 80, 0.15);
            color: var(--red);
        }

        /* context hint on front face (hard words: againCount >= 2) */
        .front-context {
            font-size: 0.79rem; color: var(--muted); font-style: italic;
            opacity: 0.8; max-width: 290px; line-height: 1.5;
            text-align: center; margin: 6px auto 0; padding: 0 8px;
        }

        /* back face elements */
        .stage-tag {
            position: absolute; top: 12px; left: 12px;
            font-size: 0.66rem; font-weight: 700;
            padding: 2px 8px; border-radius: 99px;
        }
        .st-new     { background: rgba(59,130,246,.25);  color: #93c5fd; }
        .st-learning{ background: rgba(245,158,11,.25);  color: #fcd34d; }
        .st-young   { background: rgba(34,197,94,.25);   color: #86efac; }
        .st-mature  { background: rgba(139,92,246,.25);  color: #c4b5fd; }
        .st-relearn { background: rgba(239,68,68,.25);   color: #fca5a5; }

        /* ── Card back layout ──────────────────────────────────── */
        /* ① word + IPA inline header */
        .back-header {
            display: flex; align-items: baseline;
            justify-content: center; gap: 8px;
            margin-bottom: 2px;
        }
        .back-word {
            font-size: 1rem; font-weight: 700;
            color: rgba(255,255,255,.68);
            letter-spacing: 0.04em;
        }
        .back-ipa {
            font-family: 'SF Mono', 'Fira Mono', Menlo, monospace;
            font-size: 0.76rem;
            color: rgba(255,255,255,.54);   /* ↑ was .40 — more legible */
            letter-spacing: 0.02em;
        }
        /* ② full form (abbreviations) */
        .back-fullform {
            font-size: 0.76rem;
            color: rgba(255,255,255,.48);
            text-align: center;
            margin-bottom: 4px;
            letter-spacing: 0.01em;
            padding: 0 12px;
        }
        /* ③ Chinese meaning — hero */
        .back-zh {
            font-size: 2.1rem; font-weight: 800;
            text-align: center; line-height: 1.2;
            margin-top: 2px; margin-bottom: 6px;
        }
        .back-zh-enriching {
            font-size: 1.1rem; font-weight: 500;
            color: var(--accent, #6366f1); opacity: .7;
            animation: pulse 1.4s ease-in-out infinite;
        }
        .back-zh-empty { font-size: 1.4rem; opacity: .3; }
        @keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:.9} }
        /* ④ pos badge + English definition — same row */
        .back-def-row {
            display: flex; align-items: flex-start;
            justify-content: center; flex-wrap: wrap;
            gap: 6px; padding: 0 16px;
        }
        .back-pos {
            display: inline-flex; align-items: center;
            background: rgba(255,255,255,.16);
            border-radius: 99px; padding: 2px 9px;
            font-size: 0.68rem; font-weight: 700;
            letter-spacing: 0.02em; flex-shrink: 0;
            margin-top: 1px;
        }
        .back-def {
            font-size: 0.78rem;                /* ↑ was .75rem */
            color: rgba(255,255,255,.68);      /* ↑ was .50 — significantly more readable */
            font-style: italic;
            text-align: left; line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2; line-clamp: 2;
            -webkit-box-orient: vertical; overflow: hidden;
        }
        /* ⑤ example sentences with separator */
        .back-examples {
            width: 100%;
            border-top: 1px solid rgba(255,255,255,.1);
            margin-top: 10px; padding-top: 9px;
            display: flex; flex-direction: column; gap: 8px;  /* ↑ was 6px */
            padding-left: 8px; padding-right: 8px;
        }
        .back-example {
            font-size: 0.8rem;
            color: rgba(255,255,255,.72);
            font-style: italic; text-align: center;
            display: -webkit-box;
            -webkit-line-clamp: 2; line-clamp: 2;
            -webkit-box-orient: vertical; overflow: hidden;
            line-height: 1.55;
        }
        /* Second example: indented + lighter to signal secondary status */
        .back-example2 {
            font-size: 0.74rem;
            color: rgba(255,255,255,.5);       /* ↑ was .45 */
            font-style: italic; text-align: left;
            display: -webkit-box;
            -webkit-line-clamp: 2; line-clamp: 2;
            -webkit-box-orient: vertical; overflow: hidden;
            line-height: 1.5;
            padding-left: 12px;
            border-left: 2px solid rgba(255,255,255,.14);
        }
        .back-note {
            font-size: 0.64rem; color: rgba(255,255,255,.44); /* ↑ was .38 */
            text-align: center; margin-top: 4px;
            padding: 0 12px; line-height: 1.4;
        }
        /* Word family chips on card back */
        .back-family { display:flex; align-items:center; flex-wrap:wrap; gap:4px;
            margin-top:6px; justify-content:center; }
        .back-family-label { font-size:0.63rem; color:rgba(255,255,255,.45); font-weight:600; margin-right:2px; }
        .back-family-word { font-size:0.7rem; padding:2px 8px; border-radius:99px;
            background:rgba(255,255,255,.12); color:rgba(255,255,255,.75); font-weight:500; }

        /* ── Card back depth: register · synonyms · time-since · history (Round 2) ── */
        .back-register { display:inline-flex; align-items:center; gap:5px; font-size:.62rem;
            font-weight:700; letter-spacing:.04em; padding:2px 9px; border-radius:99px; margin-top:4px; }
        .back-register-formal    { background:rgba(139,92,246,.22); color:#c4b5fd; }
        .back-register-informal  { background:rgba(245,158,11,.22);  color:#fcd34d; }
        .back-register-slang     { background:rgba(239,68,68,.22);   color:#fca5a5; }
        .back-register-technical { background:rgba(20,184,166,.22);  color:#5eead4; }
        .back-synonyms { display:flex; align-items:center; flex-wrap:wrap; gap:5px;
            margin-top:6px; justify-content:center; padding:0 8px; }
        .back-syn-label { font-size:.6rem; color:rgba(255,255,255,.4); font-weight:700;
            letter-spacing:.05em; text-transform:uppercase; }
        .back-syn-chip  { font-size:.68rem; padding:2px 9px; border-radius:99px;
            background:rgba(255,255,255,.1); color:rgba(255,255,255,.7); font-weight:500;
            cursor:pointer; -webkit-tap-highlight-color:transparent; }
        .back-syn-chip:active { background:rgba(255,255,255,.2); }
        .back-time-since { position:absolute; bottom:10px; right:12px;
            font-size:.56rem; color:rgba(255,255,255,.28); letter-spacing:.03em; }
        .back-diff { position:absolute; bottom:10px; left:12px;
            display:flex; align-items:center; gap:3px; }
        .back-diff-dot { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.22); }
        .back-diff-dot.again { background:rgba(240,80,80,.55); }
        .back-diff-dot.good  { background:rgba(43,200,102,.5); }

        /* Target-word highlight inside example sentences (SLA: noticing) */
        .ex-hl {
            font-weight: 700;
            color: #fff;
            font-style: normal;
            text-decoration: underline;
            text-underline-offset: 2px;
            text-decoration-thickness: 1px;
            text-decoration-color: rgba(255,255,255,.55);
        }

        /* controls */
        .controls {
            position: absolute;
            top: 0; left: 0; right: 0;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            opacity: 0;
            pointer-events: none;
            transition: opacity .2s;
        }
        .controls.visible {
            opacity: 1;
            pointer-events: auto;
        }
        /* Pre-flip bar: "Already Knew" button + hint text */
        /* ── Word progress (mastery) indicator ─── */
        .wp-bar-wrap {
            opacity: 0; pointer-events: none; transition: opacity .2s;
            padding: 0 4px; margin-bottom: 8px;
        }
        .wp-bar-wrap.visible { opacity: 1; pointer-events: auto; }
        .wp-row { display: flex; align-items: center; gap: 8px; justify-content: center; }
        .wp-bar {
            width: 100px; height: 7px; border-radius: 4px;
            background: rgba(125, 138, 163, 0.15);
            overflow: hidden; flex-shrink: 0;
        }
        .wp-fill { height: 100%; border-radius: 4px; transition: width .5s ease, background .5s ease; }
        .wp-label { font-size: 0.7rem; color: var(--muted); white-space: nowrap; font-weight: 500; }
        .wp-delta {
            font-size: 0.7rem; font-weight: 700; white-space: nowrap;
            animation: wp-pop .4s ease;
        }
        .wp-up { color: var(--green); }
        .wp-down { color: var(--red); }
        @keyframes wp-pop {
            0% { transform: scale(0.5); opacity: 0; }
            60% { transform: scale(1.3); }
            100% { transform: scale(1); opacity: 1; }
        }

        .post-flip-easy {
            position: absolute;
            top: 82px; left: 0; right: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 6px 12px;
            gap: 5px;
            opacity: 0;
            pointer-events: none;
            transition: opacity .2s;
        }
        .post-flip-easy.visible { opacity: 1; pointer-events: auto; }
        .post-flip-easy .cb-easy {
            height: 38px;
            min-height: unset;
            min-width: 150px;
            padding: 0 22px;
            flex-direction: row;
            justify-content: center;
            gap: 5px;
            font-size: 0.82rem;
            font-weight: 500;
            letter-spacing: 0.01em;
            border-radius: 10px;
            border: 1px solid rgba(139, 108, 246, 0.22);
            background: rgba(139, 108, 246, 0.05);
            box-shadow: none;
         min-height: 44px; }
        .post-flip-easy .cb-easy:hover {
            background: rgba(139, 108, 246, 0.11);
            border-color: rgba(139, 108, 246, 0.35);
        }
        .easy-sub-hint {
            text-align: center;
            font-size: 0.62rem;
            color: var(--muted);
            letter-spacing: 0.02em;
            line-height: 1;
        }
        /* Keyboard shortcut hint: shown above controls, desktop only */
        .key-hint-bar {
            text-align: center;
            color: var(--muted);
            font-size: 0.72rem;
            height: 18px;
            line-height: 18px;
            margin-bottom: 2px;
            opacity: 0;
            pointer-events: none;
            transition: opacity .2s;
        }
        .key-hint-bar.visible { opacity: 1; }
        /* Hide keyboard hints on touch/mobile screens */
        @media (pointer: coarse), (max-width: 600px) {
            .key-hint-bar { display: none; }
        }
        .cb {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 12px 6px;
            border: 1.5px solid transparent;
            border-radius: 14px;
            cursor: pointer;
            font-weight: 600;
            gap: 3px;
            transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, background 0.15s;
            min-height: 62px;
            box-shadow: none;
            -webkit-tap-highlight-color: transparent;
        }
        .cb:hover  { transform: translateY(-2px); }
        .cb:active { transform: scale(0.96); box-shadow: none !important; }
        /* Again — soft, understated, no blame */
        .cb-again {
            background: rgba(240, 80, 80, 0.07);
            color: var(--red);
            border-color: rgba(240, 80, 80, 0.1);
        }
        .cb-again:hover {
            background: rgba(240, 80, 80, 0.13);
            border-color: rgba(240, 80, 80, 0.22);
            box-shadow: 0 2px 8px rgba(240, 80, 80, 0.1);
        }
        /* Hard — moderate emphasis */
        .cb-hard {
            background: rgba(245, 158, 11, 0.08);
            color: var(--amber);
            border-color: rgba(245, 158, 11, 0.12);
        }
        .cb-hard:hover {
            background: rgba(245, 158, 11, 0.14);
            border-color: rgba(245, 158, 11, 0.24);
            box-shadow: 0 2px 8px rgba(245, 158, 11, 0.1);
        }
        /* Good — hero button, bold and rewarding */
        .cb-good {
            background: rgba(43, 200, 102, 0.13);
            color: var(--green);
            border-color: rgba(43, 200, 102, 0.2);
            box-shadow: 0 1px 4px rgba(43, 200, 102, 0.08);
        }
        .cb-good:hover {
            background: rgba(43, 200, 102, 0.2);
            border-color: rgba(43, 200, 102, 0.32);
            box-shadow: 0 3px 10px rgba(43, 200, 102, 0.14);
        }
        .cb-good .cb-label { font-size: 0.92rem; }
        /* Easy */
        .cb-easy  { background: rgba(139, 108, 246, 0.1); color: var(--purple); }
        .cb-label    { font-size: 0.86rem; }
        .cb-interval { font-size: 0.68rem; opacity: 0.55; font-weight: 500; }

        .controls-wrap {
            position: relative;
            width: 100%;
            min-height: 140px;  /* room for answer btns (64px) + easy btn (48px) + gaps */
            overflow: hidden;
            flex-shrink: 0;
        }
        .key-hint {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: var(--muted);
            font-size: 0.76rem;
            opacity: 0;
            pointer-events: none;
            transition: opacity .2s;
        }
        .key-hint.visible {
            opacity: 1;
            pointer-events: auto;
        }

        /* toast */
        .toast-anchor {
            position: fixed;
            /* Push well below header + deck-bar on all devices (incl. iPhone safe-area) */
            top: calc(170px + env(safe-area-inset-top, 0px));
            left: 50%;
            transform: translateX(-50%);
            z-index: 300;
            pointer-events: none;
        }
        .toast {
            padding: 10px 24px;
            border-radius: 99px;
            font-weight: 600;
            font-size: 0.84rem;
            color: #fff;
            white-space: nowrap;
            box-shadow: 0 4px 20px rgba(0,0,0,0.12);
            letter-spacing: 0.01em;
        }
        .t-good  { background: var(--green); }
        .t-bad   { background: var(--red); }
        .t-bonus { background: var(--purple); }
        .t-info  { background: rgba(0,0,0,0.75); }
        [data-theme="dark"] .t-info { background: rgba(255,255,255,0.18); }

        .toast-enter-active, .toast-leave-active { transition: opacity .25s, transform .25s; }
        .toast-enter    { opacity: 0; transform: translateY(-8px); }
        .toast-leave-to { opacity: 0; transform: translateY(-8px); }

        /* SRS mastery-score delta pill (shown after card rating / practice answer) */

        /* footer */
        .ft {
            background: var(--surface);
            border-top: none;
            box-shadow: 0 -1px 0 var(--border);
            padding: 10px 18px;
            text-align: center;
        }
        .ft-row {
            display: flex;
            justify-content: center;
            gap: 20px;
            font-size: 0.78rem;
            color: var(--muted);
            margin-bottom: 6px;
        }
        .ft-compact { padding: 6px 18px; }
        .ft-compact .ft-row { margin-bottom: 4px; }
        .ft-row strong { color: var(--text); }
        /* Floating combo indicator */
        /* ── Mini Fox Feedback (Learn tab) ─────────────────────────── */
        .fox-fb {
            position: fixed;
            bottom: calc(env(safe-area-inset-bottom, 0px) + 74px);
            left: 50%; transform: translateX(-50%);
            z-index: 300; pointer-events: none;
            display: flex; align-items: center; gap: 6px;
            padding: 7px 16px 7px 10px; border-radius: 99px;
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(0, 0, 0, 0.06);
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            max-width: 88vw;
        }
        .fox-fb-face {
            font-size: 1.15rem; flex-shrink: 0;
            animation: fox-fb-pop 0.3s ease-out;
        }
        .fox-fb-msg {
            font-size: 0.82rem; font-weight: 600;
            color: var(--text); white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis;
        }
        /* mood tints */
        .fox-fb-encouraging { border-color: rgba(43, 200, 102, 0.4); }
        .fox-fb-proud       { border-color: rgba(139, 108, 246, 0.4); }
        .fox-fb-combo       { border-color: rgba(245, 158, 11, 0.4); }
        .fox-fb-wrong       { border-color: rgba(240, 80, 80, 0.3); }
        .fox-fb-celebrating { border-color: rgba(245, 158, 11, 0.4); }
        .fox-fb-info        { border-color: var(--border); }

        .fox-fb-encouraging .fox-fb-msg { color: var(--green); }
        .fox-fb-proud .fox-fb-msg       { color: var(--purple); }
        .fox-fb-combo .fox-fb-msg       { color: #f59e0b; }
        .fox-fb-wrong .fox-fb-msg       { color: var(--red); }
        .fox-fb-celebrating .fox-fb-msg { color: #f59e0b; }

        [data-theme="dark"] .fox-fb {
            background: rgba(30, 40, 58, 0.92);
            border-color: rgba(255, 255, 255, 0.08);
            box-shadow: 0 2px 16px rgba(0,0,0,0.3);
        }
        @keyframes fox-fb-pop { 0% { transform: scale(0.6); } 100% { transform: scale(1); } }
        .fox-fb-enter-active { transition: opacity .25s, transform .25s; }
        .fox-fb-leave-active { transition: opacity .2s, transform .2s; }
        .fox-fb-enter  { opacity: 0; transform: translateX(-50%) translateY(8px); }
        .fox-fb-leave-to { opacity: 0; transform: translateX(-50%) translateY(8px); }
        .ft-privacy { font-size: 0.68rem; }
        .ft-privacy a { color: var(--muted); text-decoration: none; }
        .ft-privacy a:hover { color: var(--blue); }
        .ft-privacy-bottom {
            text-align: center;
            padding: 20px 0 max(16px, env(safe-area-inset-bottom, 16px));
        }
        .xp-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .xp-label {
            font-size: 0.68rem;
            color: var(--muted);
            white-space: nowrap;
        }
        .xp-track {
            flex: 1;
            height: 6px;
            background: rgba(221, 229, 240, 0.6);
            border-radius: 99px;
            overflow: hidden;
        }
        .xp-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--purple), #6184f7);
            border-radius: 99px;
            transition: width 0.6s cubic-bezier(.4,0,.2,1);
        }
        .xp-next {
            font-size: 0.68rem;
            color: var(--muted);
            white-space: nowrap;
        }

        /* ── Force-refresh button ────────────────────────── */
        #upd-zone, .profile-footer {
            padding: 16px 0 calc(72px + env(safe-area-inset-bottom));
            text-align: center;
        }
        .brand-tagline {
            margin-top: 10px;
            font-size: 0.64rem;
            color: var(--muted);
            opacity: 0.45;
            letter-spacing: 0.04em;
        }
        [data-theme="dark"] .brand-tagline { opacity: 0.62; }
        .seo-footer-links {
            display: flex; flex-wrap: wrap; justify-content: center;
            gap: 12px 16px; margin-top: 12px;
        }
        .seo-footer-links a {
            font-size: 0.72rem; color: var(--muted); text-decoration: none;
            opacity: 0.6; transition: opacity 0.15s;
        }
        .seo-footer-links a:hover { opacity: 1; color: var(--blue); }

        /* ── Bottom navigation bar ──────────────────────── */
        .btm-nav {
            position: fixed; bottom: env(safe-area-inset-bottom, 0px); left: 50%;
            transform: translateX(-50%);
            z-index: 100;
            display: flex;
            background: var(--shell-nav-bg);
            border: 1px solid rgba(255,255,255,0.32);
            padding: 6px 8px;
            box-shadow: 0 18px 40px rgba(20,32,61,0.16);
            width: min(calc(100% - 16px), var(--shell-max-width));
            max-width: none;
            border-radius: 22px;
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }
        .btm-nav-item {
            flex: 1;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            gap: 2px;
            background: none; border: none; cursor: pointer;
            color: var(--muted);
            padding: 10px 0 8px;
            min-height: 48px;
            transition: color 0.15s, background 0.15s, transform 0.15s;
            -webkit-tap-highlight-color: transparent;
            font-family: inherit;
            border-radius: 14px;
        }
        .btm-nav-item:hover { background: rgba(79, 143, 247, 0.06); }
        .btm-nav-item.active {
            color: var(--blue);
            background: rgba(79, 143, 247, 0.1);
            box-shadow: inset 0 0 0 1px rgba(79, 143, 247, 0.16);
        }
        .btm-nav-item:active { transform: scale(0.92); }
        .btm-nav-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
        .btm-nav-item.active .btm-nav-icon { stroke-width: 2.2; }
        .btm-nav-label { font-size: 10px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
        /* 离线时需要网络的 tab 变灰 */
        .btm-nav-item.nav-offline { opacity: 0.4; }
        .btm-nav-item.nav-offline .btm-nav-label::after {
          content: ' ⚡';
          font-size: 8px;
        }

        /* ── Tab icon animations ──────────────────────────── */
        /* Today: calendar flip + bounce */
        /* Scale 0.55->1.55 bounce — validated in nav-anim-demo.html, clearly visible at 22px */
        @keyframes nav-today-pop {
          0%   { transform: scale(1); }
          15%  { transform: scale(0.78) rotate(-6deg); }
          45%  { transform: scale(1.28) rotate(4deg); }
          65%  { transform: scale(0.92) rotate(-2deg); }
          80%  { transform: scale(1.07); }
          100% { transform: scale(1) rotate(0deg); }
        }
        @keyframes nav-learn-pop {
          0%   { transform: scale(1) rotate(0deg); }
          20%  { transform: scale(0.78) rotate(-18deg); }
          50%  { transform: scale(1.26) rotate(8deg); }
          70%  { transform: scale(0.93) rotate(-4deg); }
          85%  { transform: scale(1.06); }
          100% { transform: scale(1) rotate(0deg); }
        }
        @keyframes nav-dict-pop {
          0%   { transform: scale(1) rotate(0deg); }
          18%  { transform: scale(0.78) rotate(-22deg); }
          42%  { transform: scale(1.24) rotate(16deg); }
          60%  { transform: scale(0.94) rotate(-7deg); }
          78%  { transform: scale(1.07) rotate(3deg); }
          100% { transform: scale(1) rotate(0deg); }
        }
        @keyframes nav-speak-pop {
          0%   { transform: scale(1) translateY(0); }
          18%  { transform: scale(0.8) translateY(3px); }
          42%  { transform: scale(1.26) translateY(-5px); }
          62%  { transform: scale(0.93) translateY(2px); }
          78%  { transform: scale(1.07) translateY(-1px); }
          100% { transform: scale(1) translateY(0); }
        }
        @keyframes nav-reading-pop {
          0%   { transform: scale(1) rotate(0deg); }
          15%  { transform: scale(0.82) translateX(-3px); }
          40%  { transform: scale(1.22) translateX(3px); }
          60%  { transform: scale(0.96) translateX(-1px); }
          80%  { transform: scale(1.05) translateX(1px); }
          100% { transform: scale(1) translateX(0); }
        }
        @keyframes nav-speak-ripple {
          0%   { transform: scale(0.5); opacity: 0.9; }
          100% { transform: scale(2.6); opacity: 0; }
        }
        /* Animations on HTML <span> wrapper, NOT SVG — SVG transform in Blink is unreliable */
        .btm-nav-icon-wrap {
            display: flex; align-items: center; justify-content: center;
            width: 24px; height: 24px;
            will-change: transform;
            transform-origin: center center;
        }
        .btm-nav-item.nav-tap-today   .btm-nav-icon-wrap { animation: nav-today-pop   0.5s cubic-bezier(0.34,1.56,0.64,1) both; }
        .btm-nav-item.nav-tap-learn   .btm-nav-icon-wrap { animation: nav-learn-pop   0.5s cubic-bezier(0.34,1.56,0.64,1) both; }
        .btm-nav-item.nav-tap-dict    .btm-nav-icon-wrap { animation: nav-dict-pop    0.5s cubic-bezier(0.34,1.56,0.64,1) both; }
        .btm-nav-item.nav-tap-speak   .btm-nav-icon-wrap { animation: nav-speak-pop   0.5s cubic-bezier(0.34,1.56,0.64,1) both; }
        .btm-nav-item.nav-tap-reading .btm-nav-icon-wrap { animation: nav-reading-pop 0.5s cubic-bezier(0.34,1.56,0.64,1) both; }
        @keyframes nav-label-pop {
          0%   { transform: scale(1); }
          45%  { transform: scale(1.25); }
          100% { transform: scale(1); }
        }
        .btm-nav-item[class*="nav-tap-"] .btm-nav-label { animation: nav-label-pop 0.45s ease both; }
        .btm-nav-item.nav-tap-speak .btm-nav-icon-wrap::before {
          content: ''; position: absolute; width: 22px; height: 22px;
          border-radius: 50%; border: 1.5px solid currentColor;
          animation: nav-speak-ripple 0.6s ease-out forwards; pointer-events: none;
        }
        .btm-nav-item { position: relative; overflow: visible; }
        /* Dict tab always-on brand color */
        .btm-nav-dict { color: var(--blue) !important; }
        .btm-nav-dict:not(.active) { opacity: 0.75; }
        [data-theme="dark"] .btm-nav-dict:not(.active) { opacity: 0.8; }
        [data-theme="dark"] .btm-nav {
            border-color: rgba(148,163,184,0.12);
            border-top: 1px solid rgba(255,255,255,0.08);
            box-shadow: 0 22px 48px rgba(0,0,0,0.34);
        }
        [data-theme="dark"] .btm-nav-item.active {
            background: rgba(79,143,247,0.14);
            box-shadow: inset 0 0 0 1px rgba(79,143,247,0.18);
        }

        /* ── Tab content wrappers ───────────────────────── */
        /* 每个 tab 容器：填满视口，不超出 */
        .tab-content {
            display: flex; flex-direction: column;
            isolation: isolate; /* 防止 3D transform stacking context 穿透 */
            width: 100%;
            min-width: 0;
        }
        /* 学习 tab：恰好填满视口（header 高度由 JS 动态设置，这里用 min-height 兜底） */
        .tab-learn   {
            min-height: calc(100vh - 56px - env(safe-area-inset-bottom));
            padding-bottom: calc(56px + env(safe-area-inset-bottom));
        }
        /* Dict tab: fixed-height container so dict-body scrolls, not the page */
        .tab-dict    { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
        .tab-speak   { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
        .tab-today   { width:100%; background: var(--bg); }
        .tab-dict, .tab-speak { background: var(--bg); }

        /* ── Reading Tab ───────────────────────────────── */
        .tab-reading {
            height: 100vh; height: 100dvh;
            display: flex; flex-direction: column;
            overflow: hidden;
            background: var(--bg);
        }
        /* 操作按钮行 */
        .rtab-actions {
            display: flex; gap: 10px;
            padding: 12px 16px 4px;
            max-width: var(--shell-max-width, 920px);
            margin: 0 auto; width: 100%; box-sizing: border-box;
        }
        .rtab-action-btn {
            flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
            padding: 10px 12px; border-radius: 12px;
            border: 1.5px solid var(--border); background: var(--surface);
            font-size: 0.85rem; font-weight: 600; color: var(--text);
            cursor: pointer; transition: all 0.15s;
        }
        .rtab-action-btn:active { transform: scale(0.97); }
        .rtab-action-primary {
            background: linear-gradient(135deg, #4f8ff7, #6ca6ff);
            color: #fff; border-color: transparent;
            box-shadow: 0 2px 8px rgba(79,143,247,0.25);
        }
        .rtab-action-icon { font-size: 1rem; }
        [data-theme="dark"] .rtab-action-btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: var(--text); }
        [data-theme="dark"] .rtab-action-primary { background: linear-gradient(135deg, #4f8ff7, #6ca6ff); color: #fff; border-color: transparent; }

        .rtab-panel-wrap {
            flex: 1;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding-bottom: calc(72px + env(safe-area-inset-bottom));
        }

        /* Reading Tab — flex column，与 tab-speak 一致 */

        /* 面板 — 宽度与 Speak tab 对齐（shell-max-width） */
        .rtab-panel {
            padding: 12px 16px;
            max-width: var(--shell-max-width, 920px);
            margin: 0 auto;
            width: 100%;
            box-sizing: border-box;
        }

        /* 文章卡片 */
        .rtab-card {
            background: #ffffff;
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 14px 16px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: background 0.15s, transform 0.1s;
            -webkit-tap-highlight-color: transparent;
        }
        .rtab-card:active { transform: scale(0.97); }
        [data-theme="dark"] .rtab-card { background: rgba(255,255,255,0.06); }
        .rtab-card-title {
            font-size: 0.94rem;
            font-weight: 700;
            color: var(--text);
            line-height: 1.35;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 6px;
        }
        .rtab-card-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
            flex-wrap: wrap;
        }
        .rtab-card-date {
            font-size: 0.72rem;
            color: var(--muted);
        }
        .rtab-card-source {
            font-size: 0.68rem;
            padding: 2px 7px;
            border-radius: 6px;
            font-weight: 600;
        }
        .rtab-card-source.src-plugin {
            background: rgba(79, 143, 255, 0.12);
            color: var(--blue);
        }
        .rtab-card-source.src-ai {
            background: rgba(0, 230, 184, 0.14);
            color: var(--accent, #00E6B8);
        }
        .rtab-card-deck {
            font-size: 0.68rem;
            font-weight: 700;
            color: var(--purple, #8b6cf6);
            background: rgba(139,108,246,0.1);
            padding: 2px 6px;
            border-radius: 4px;
        }
        .rtab-card-user {
            font-size: 0.72rem;
            color: var(--blue);
            font-weight: 600;
        }
        .rtab-card-views {
            font-size: 0.70rem;
            color: var(--muted);
        }
        .rtab-card-preview {
            font-size: 0.78rem;
            color: var(--muted);
            line-height: 1.45;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* 状态 */
        .rtab-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 40vh;
            padding: 24px;
            text-align: center;
            color: var(--muted);
            font-size: 0.86rem;
        }
        .rtab-loading {
            display: flex;
            justify-content: center;
            padding: 48px 0;
        }

        /* 阅读广场分页 */
        .rtab-pager {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-top: 16px;
        }
        .rtab-page-btn {
            flex: 0 0 auto;
            min-width: 102px;
            padding: 12px 14px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: none;
            color: var(--blue);
            font-size: 0.84rem;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            transition: background 0.15s, border-color 0.15s, transform 0.1s;
        }
        .rtab-page-btn:hover { background: rgba(79, 143, 255, 0.06); }
        .rtab-page-btn:active {
            background: rgba(79, 143, 255, 0.06);
            transform: scale(0.98);
        }
        .rtab-page-btn:disabled {
            opacity: 0.45;
            cursor: not-allowed;
            transform: none;
        }
        .rtab-page-indicator {
            flex: 1;
            text-align: center;
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--muted);
        }
        .rtab-page-summary {
            margin-top: 10px;
            text-align: center;
            font-size: 0.74rem;
            color: var(--muted);
        }
        @media (max-width: 520px) {
            .rtab-pager {
                gap: 10px;
            }
            .rtab-page-btn {
                min-width: 88px;
                padding: 11px 12px;
            }
            .rtab-page-indicator {
                font-size: 0.74rem;
            }
        }

        /* ── Speak tab (练口语) ─────────────────────────── */
        .speak-hd {
            flex-shrink: 0;
            background: transparent;
            padding: calc(14px + env(safe-area-inset-top)) 16px 12px;
            display: flex;
            justify-content: center;
        }
        .speak-seg {
            display: inline-flex;
            background: var(--surface-elevated);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 4px;
            gap: 3px;
            box-shadow: var(--shadow-sm);
        }
        .speak-seg-btn {
            padding: 6px 20px; border-radius: 8px; border: none; background: none;
            font-size: 0.85rem; font-weight: 600; color: var(--muted); cursor: pointer;
            transition: all 0.2s; font-family: inherit;
        }
        .speak-seg-btn.active {
            background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        [data-theme="dark"] .speak-seg-btn.active { box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
        .speak-body {
            flex: 1;
            overflow-y: auto;
            padding: 12px 16px calc(76px + env(safe-area-inset-bottom) + 24px);
            -webkit-overflow-scrolling: touch;
        }
        /* Pick screen */
        .speak-pick { text-align: center; padding-top: 40px; }
        .speak-pick-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; }
        .speak-pick-desc { font-size: 0.85rem; color: var(--muted); margin-bottom: 24px; }
        .speak-source-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 24px; }
        .speak-pill {
            padding: 8px 16px; border-radius: 20px; border: 1.5px solid var(--border);
            background: var(--surface); color: var(--text); font-size: 0.82rem; font-weight: 500;
            cursor: pointer; transition: all 0.15s; font-family: inherit;
        }
        .speak-pill.active { border-color: var(--blue); background: var(--blue); color: #fff; }
        .speak-start-btn {
            padding: 14px 40px; border-radius: 14px; border: none;
            background: var(--blue); color: #fff; font-size: 1rem; font-weight: 600;
            cursor: pointer; transition: transform 0.1s; font-family: inherit;
        }
        .speak-start-btn:hover { filter: brightness(1.08); }
        .speak-start-btn:active { transform: scale(0.96); }
        .speak-start-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(79,143,247,0.45); }
        .speak-start-btn:disabled { opacity: 0.4; cursor: not-allowed; }
        .speak-empty { font-size: 0.85rem; color: var(--muted); margin-top: 16px; }
        /* Session card */
        .speak-session { display: flex; flex-direction: column; gap: 16px; }
        /* Exit button */
        .speak-exit-btn {
            position: absolute; right: 0; top: 0; width: 32px; height: 32px;
            border-radius: 50%; border: none; background: var(--hover); color: var(--muted);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; transition: all 0.15s; z-index: 2;
         min-height: 44px; min-width: 44px; }
        .speak-exit-btn:active { transform: scale(0.9); }
        /* Dot stepper */
        .speak-stepper { display: flex; justify-content: center; gap: 6px; padding: 4px 0 8px; align-items: center; }
        .speak-dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: var(--hover); transition: all 0.2s;
        }
        .speak-dot.current { width: 10px; height: 10px; background: var(--blue); animation: speak-pulse 1.2s ease-in-out infinite; }
        .speak-dot.passed { background: #34c759; }
        .speak-dot.failed { background: #ff3b30; }
        .speak-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 22px;
            padding: 28px 22px;
            text-align: center;
            box-shadow: var(--shadow-md);
        }
        [data-theme="dark"] .speak-card { box-shadow: 0 2px 12px rgba(0,0,0,0.2); }
        .speak-card.entering { animation: speakCardIn 0.28s ease-out; }
        @keyframes speakCardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
        .speak-card-type {
            display: inline-block;
            padding: 5px 10px;
            border-radius: 999px;
            font-size: 0.68rem;
            font-weight: 700;
            background: var(--hover);
            color: var(--muted);
            margin-bottom: 18px;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }
        .speak-word { font-size: 1.95rem; font-weight: 800; margin-bottom: 6px; letter-spacing: -0.03em; }
        .speak-ipa { font-size: 0.92rem; color: var(--muted); margin-bottom: 6px; font-family: serif; }
        .speak-zh { font-size: 0.96rem; color: var(--muted); line-height: 1.5; }
        .speak-sentence { font-size: 1.15rem; font-weight: 500; line-height: 1.6; margin-bottom: 8px; }
        .speak-sentence-word { font-size: 0.82rem; color: var(--muted); }
        /* Phase 1: Listen */
        .speak-phase-listen { display: flex; justify-content: center; margin-top: 24px; padding: 12px 0; }
        .speak-listen-main {
            display: flex; align-items: center; gap: 8px; padding: 14px 32px;
            border-radius: 24px; border: none; background: var(--blue); color: #fff;
            font-size: 1rem; font-weight: 600; cursor: pointer; font-family: inherit;
            transition: all 0.2s; box-shadow: 0 4px 16px rgba(0,122,255,0.25);
        }
        .speak-listen-main:active { transform: scale(0.96); }
        .speak-listen-main.playing { animation: speak-pulse 1.2s ease-in-out infinite; }
        .speak-listen-main.loading { opacity: 0.7; }
        .speak-listen-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid #fff; border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }
        /* Phase 2: Speak */
        .speak-phase-speak {
            display: flex; flex-direction: column; align-items: center; gap: 8px;
            margin-top: 20px; padding-top: 8px; padding-bottom: 4px;
            animation: speakPhaseIn 0.3s ease-out;
        }
        @keyframes speakPhaseIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
        /* 倒计时 */
        .speak-countdown { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 0 8px; }
        .speak-countdown-num { font-size: 3rem; font-weight: 800; color: var(--blue); line-height: 1; animation: spkCd 0.7s ease-in-out; }
        @keyframes spkCd { 0%{transform:scale(1.4);opacity:0} 40%{transform:scale(1);opacity:1} 100%{opacity:1} }
        .speak-countdown-label { font-size: 0.82rem; color: var(--muted); }
        /* 录音状态 */
        .speak-recording-label { font-size: 0.82rem; color: var(--red); font-weight: 600; margin: 4px 0 8px; text-align: center; align-self: center; }
        .speak-stop-early { padding: 8px 22px; border-radius: 20px; border: 1.5px solid var(--red); background: rgba(255,59,48,0.08); color: var(--red); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all 0.15s; }
        .speak-stop-early:active { transform: scale(0.96); }
        /* 评估中：声波动画 */
        .speak-scoring-wave { display: flex; align-items: center; justify-content: center; gap: 4px; height: 32px; margin: 10px auto 6px; }
        .speak-scoring-wave-sm { height: 22px; gap: 3px; margin: 6px auto 4px; }
        .speak-scoring-bar { display: inline-block; width: 4px; border-radius: 2px; background: var(--blue); animation: scoring-wave 1.2s ease-in-out infinite; }
        .speak-scoring-wave-sm .speak-scoring-bar { width: 3px; }
        .speak-scoring-bar:nth-child(1) { height: 8px; animation-delay: 0s; }
        .speak-scoring-bar:nth-child(2) { height: 16px; animation-delay: 0.15s; }
        .speak-scoring-bar:nth-child(3) { height: 24px; animation-delay: 0.3s; }
        .speak-scoring-bar:nth-child(4) { height: 16px; animation-delay: 0.45s; }
        .speak-scoring-bar:nth-child(5) { height: 8px; animation-delay: 0.6s; }
        .speak-scoring-wave-sm .speak-scoring-bar:nth-child(1) { height: 5px; }
        .speak-scoring-wave-sm .speak-scoring-bar:nth-child(2) { height: 10px; }
        .speak-scoring-wave-sm .speak-scoring-bar:nth-child(3) { height: 16px; }
        .speak-scoring-wave-sm .speak-scoring-bar:nth-child(4) { height: 10px; }
        .speak-scoring-wave-sm .speak-scoring-bar:nth-child(5) { height: 5px; }
        @keyframes scoring-wave {
            0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
            50% { transform: scaleY(1); opacity: 1; }
        }
        .speak-scoring-replay { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 5px 12px; border-radius: 99px; border: 1.5px solid var(--border); background: var(--surface); color: var(--muted); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.15s; }
        .speak-scoring-replay:hover { background: var(--hover); color: var(--text); }
        .speak-scoring-replay:active { transform: scale(0.95); background: var(--hover); }
        [data-theme="dark"] .speak-scoring-replay { border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.55); }
        [data-theme="dark"] .speak-scoring-replay:hover { color: rgba(255,255,255,0.85); }
        /* GPT 发音建议卡片 */
        .speak-advice { display: flex; gap: 7px; align-items: flex-start; padding: 10px 13px; border-radius: 10px; font-size: 0.84rem; line-height: 1.55; margin-top: 10px; text-align: left; max-width: 320px; }
        .speak-advice-pass { background: rgba(52,199,89,0.08); color: #1a8c3f; border: 1px solid rgba(52,199,89,0.2); }
        .speak-advice-fail { background: rgba(0,122,255,0.06); color: var(--text); border: 1px solid rgba(0,122,255,0.15); }
        [data-theme="dark"] .speak-advice-pass { background: rgba(52,199,89,0.12); color: #4cd964; }
        [data-theme="dark"] .speak-advice-fail { background: rgba(79,143,247,0.1); color: var(--text); }
        .speak-advice-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
        .speak-phase-speak-hint {
            font-size: 0.82rem; color: var(--blue); font-weight: 600;
            margin-bottom: 12px; text-align: center;
        }
        .speak-listen-mini {
            width: 30px; height: 30px; margin-top: 12px;
            border-radius: 50%; border: 1.5px solid var(--border); background: transparent;
            color: var(--muted); display: flex; align-items: center; justify-content: center;
            cursor: pointer; transition: all 0.15s; opacity: 0.65;
        }
        .speak-listen-mini:active { transform: scale(0.9); }
        .speak-listen-mini:disabled { opacity: 0.3; cursor: not-allowed; }
        /* Mode toggle */
        .speak-mode-toggle {
            display: flex; gap: 2px; background: var(--hover); border-radius: 8px; padding: 3px;
        }
        .speak-mode-toggle.compact { position: absolute; right: 16px; bottom: 16px; }
        .speak-mode-btn {
            padding: 6px 8px; border-radius: 6px; border: none; background: none;
            color: var(--muted); cursor: pointer; transition: all 0.15s; display: flex; align-items: center;
        }
        .speak-mode-btn.active { background: var(--surface); color: var(--blue); box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
        /* Record button */
        .speak-record-zone { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 16px; }
        .speak-record-zone.compact { flex-direction: row; gap: 12px; padding: 12px 16px; }
        .speak-record-btn {
            width: 64px; height: 64px; border-radius: 50%; border: none;
            background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center;
            cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 16px rgba(0,122,255,0.25);
        }
        .speak-record-btn.recording { background: #ff3b30; box-shadow: 0 4px 16px rgba(255,59,48,0.3); animation: speak-pulse 1.2s ease-in-out infinite; }
        .speak-record-zone.compact .speak-record-btn { width: 48px; height: 48px; }
        @keyframes speak-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
        .speak-live-text { font-size: 0.85rem; color: var(--muted); font-style: italic; min-height: 20px; }
        /* Audio vis bars */
        .speak-vis-bars { display: flex; align-items: flex-end; gap: 4px; height: 36px; align-self: center; }
        .speak-vis-bar { width: 5px; background: var(--red); border-radius: 3px; min-height: 6px; transition: height 0.07s; }
        #spkBar0, #cvBar0 { height: 8px; }
        #spkBar1, #cvBar1 { height: 14px; }
        #spkBar2, #cvBar2 { height: 20px; }
        #spkBar3, #cvBar3 { height: 14px; }
        #spkBar4, #cvBar4 { height: 8px; }
        /* Text input mode */
        .speak-text-zone { display: flex; gap: 8px; margin-top: 16px; align-items: center; }
        .speak-text-zone.compact { padding: 12px 16px; }
        .speak-text-input {
            flex: 1; padding: 12px 16px; border-radius: 12px; border: 1.5px solid var(--border);
            background: var(--surface); color: var(--text); font-size: 16px; font-family: inherit;
            outline: none; transition: border-color 0.15s;
        }
        .speak-text-input:focus { border-color: var(--blue); }
        .speak-text-submit {
            width: 44px; height: 44px; border-radius: 12px; border: none;
            background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center;
            cursor: pointer; transition: transform 0.1s; flex-shrink: 0;
        }
        .speak-text-submit:active { transform: scale(0.92); }
        .speak-text-submit:disabled { opacity: 0.4; }
        /* Score result */
        .speak-result { text-align: center; margin-top: 16px; padding: 16px; border-radius: 12px; background: var(--hover); }
        .speak-result.passed { background: rgba(52,199,89,0.1); }
        .speak-result.failed { background: rgba(255,59,48,0.1); }
        .speak-result-score { font-size: 2rem; font-weight: 800; }
        .speak-result.passed .speak-result-score { color: #34c759; }
        .speak-result.failed .speak-result-score { color: #ff3b30; }
        .speak-result-label { font-size: 0.9rem; font-weight: 600; margin-top: 2px; }
        .speak-result.passed .speak-result-label { color: #34c759; }
        .speak-result.failed .speak-result-label { color: #ff3b30; }
        .speak-encouragement { font-size: 0.82rem; color: var(--muted); margin-top: 2px; font-style: italic; }
        .speak-result-heard { font-size: 0.8rem; color: var(--muted); margin-top: 6px; }
        .speak-result-error { font-size: 0.82rem; color: #ff3b30; margin-top: 6px; }
        /* Nav buttons */
        .speak-nav { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
        .speak-nav-btn {
            padding: 12px 28px; border-radius: 12px; border: none; font-size: 0.9rem;
            font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: inherit;
        }
        .speak-nav-btn.primary { background: var(--blue); color: #fff; }
        .speak-nav-btn.secondary { background: var(--hover); color: var(--text); }
        .speak-nav-btn:active { transform: scale(0.95); }
        .auto-advance-badge { display: inline-block; margin-left: 6px; font-size: 0.72rem; opacity: 0.7; background: rgba(255,255,255,0.2); border-radius: 8px; padding: 1px 6px; }
        /* ── Shadow intro card ─────────────────────────────── */
        .shadow-intro {
            background: linear-gradient(135deg, rgba(79,143,247,0.08), rgba(139,108,246,0.08));
            border-radius: 16px; padding: 20px; margin-bottom: 24px; text-align: center;
        }
        .shadow-intro-flow {
            display: flex; align-items: center; justify-content: center; gap: 8px;
            margin-bottom: 10px; font-size: 1.1rem;
        }
        .shadow-intro-step { font-weight: 600; }
        .shadow-intro-arrow { color: var(--muted); font-size: 0.9rem; }
        .shadow-intro-text { font-size: 0.82rem; color: var(--muted); line-height: 1.6; }
        /* Pill word count badge */
        .speak-pill-count {
            display: inline-block; min-width: 18px; height: 18px; line-height: 18px;
            border-radius: 9px; background: rgba(0,0,0,0.06); font-size: 0.7rem;
            margin-left: 5px; padding: 0 5px; text-align: center;
        }
        .speak-pill.active .speak-pill-count { background: rgba(255,255,255,0.25); color: #fff; }
        /* Score badge */
        .speak-score-badge {
            width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 8px;
            display: flex; align-items: center; justify-content: center;
            animation: scorePop 0.3s ease-out;
        }
        .speak-score-badge.passed { background: rgba(52,199,89,0.12); }
        .speak-score-badge.failed { background: rgba(255,59,48,0.12); }
        @keyframes scorePop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        /* Word comparison (word type) */
        .speak-word-compare {
            display: flex; flex-direction: column; align-items: center;
            gap: 10px; margin-top: 12px;
        }
        /* 有识别结果时的行布局 */
        .speak-wc-heard-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
        .speak-wc-label { font-size: 0.82rem; color: var(--muted); }
        .speak-wc-heard-text { font-size: 1.05rem; font-weight: 700; }
        .speak-wc-heard-text.wc-ok   { color: #34c759; }
        .speak-wc-heard-text.wc-fail { color: #ff3b30; }
        /* 未识别提示 */
        .speak-wc-no-speech { font-size: 0.82rem; color: var(--muted); text-align: center; line-height: 1.5; }
        .speak-wc-replay {
            display: inline-flex; align-items: center; gap: 5px;
            padding: 6px 14px; border-radius: 16px; border: 1.5px solid var(--border);
            background: var(--surface); color: var(--muted);
            font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.15s;
        }
        .speak-wc-replay:active { transform: scale(0.95); }
        /* Result replay button */
        .speak-result-replay {
            display: inline-flex; align-items: center; gap: 4px;
            margin-top: 10px; padding: 6px 14px; border-radius: 16px;
            border: 1.5px solid var(--border); background: var(--surface);
            color: var(--muted); font-size: 0.78rem; font-weight: 500;
            cursor: pointer; transition: all 0.15s; font-family: inherit;
        }
        .speak-result-replay:active { transform: scale(0.95); }
        /* No speech recognition */
        .speak-no-sr {
            padding: 16px; border-radius: 12px;
            background: rgba(255,59,48,0.08); color: #ff3b30;
            font-size: 0.85rem; text-align: center; margin-bottom: 16px;
        }
        /* Scoring state — phase text */
        .speak-scoring-text {
            font-size: 0.82rem; color: var(--blue); font-weight: 600; margin-top: 4px;
            animation: scoring-text-in 0.3s ease-out;
        }
        @keyframes scoring-text-in {
            from { opacity: 0; transform: translateY(4px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .prac-ra-scoring-text {
            font-size: 0.82rem; color: var(--blue); font-weight: 600;
            animation: scoring-text-in 0.3s ease-out;
        }
        @keyframes speak-fade-pulse {
            0%, 100% { opacity: 1; } 50% { opacity: 0.4; }
        }
        /* ── Word-by-word comparison ───────────────────────── */
        .speak-comparison {
            margin-top: 12px; padding: 12px; border-radius: 10px;
            background: var(--surface); text-align: left;
        }
        .speak-cmp-correct { line-height: 2; margin-bottom: 8px; }
        .speak-cmp-word {
            display: inline-block; padding: 2px 5px; margin: 2px;
            border-radius: 4px; font-size: 0.92rem; font-weight: 500;
        }
        .speak-cmp-word.cmp-match { color: #34c759; background: rgba(52,199,89,0.1); }
        .speak-cmp-word.cmp-close { color: #f0a020; background: rgba(240,160,32,0.1); }
        .speak-cmp-word.cmp-miss { color: #ff3b30; background: rgba(255,59,48,0.1); text-decoration: underline wavy; }
        .speak-cmp-heard {
            font-size: 0.8rem; color: var(--muted);
            border-top: 1px solid var(--border); padding-top: 8px;
        }
        /* ── Done screen (redesigned) ──────────────────────── */
        .speak-done { text-align: center; padding-top: 24px; }
        .speak-done-headline { font-size: 1.3rem; font-weight: 700; margin-bottom: 20px; color: var(--text); }
        .speak-done-ring-wrap { display: flex; justify-content: center; margin-bottom: 20px; }
        .speak-done-ring {
            width: 120px; height: 120px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            background: conic-gradient(var(--blue) calc(var(--pct) * 1%), rgba(79, 143, 247, 0.12) 0);
            transition: background 0.6s;
        }
        .speak-done-pct {
            background: var(--bg); width: 96px; height: 96px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.6rem; font-weight: 800; color: var(--blue);
        }
        .speak-done-pct small { font-size: 0.8rem; font-weight: 600; }
        .speak-done-stats {
            display: flex; gap: 32px; justify-content: center; margin-bottom: 24px;
        }
        .speak-done-stat { text-align: center; }
        .speak-done-stat-num { display: block; font-size: 1.5rem; font-weight: 800; }
        .speak-done-stat-num.passed-num { color: #34c759; }
        .speak-done-stat-num.failed-num { color: #ff3b30; }
        .speak-done-stat-label { font-size: 0.78rem; color: var(--muted); font-weight: 500; }
        .speak-done-list { max-width: 360px; margin: 0 auto; }
        .speak-done-item {
            display: flex; justify-content: space-between; align-items: center;
            padding: 8px 12px; border-radius: 8px; margin-bottom: 4px;
            background: var(--surface); font-size: 0.85rem;
            cursor: pointer; transition: background 0.15s;
            animation: speakDoneFadeUp 0.3s ease-out both;
            animation-delay: calc(0.1s + var(--i, 0) * 0.05s);
        }
        .speak-done-item:active { opacity: 0.7; }
        .speak-done-item.failed { background: rgba(255,59,48,0.08); }
        .speak-done-word { font-weight: 500; flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 8px; }
        .speak-done-s { font-weight: 700; color: var(--blue); flex-shrink: 0; }
        .speak-done-item.failed .speak-done-s { color: #ff3b30; }
        .speak-done-actions {
            margin-top: 24px; display: flex; flex-direction: column;
            align-items: center; gap: 10px;
        }
        /* Done confetti */
        .speak-done-confetti {
            position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
            font-size: 2rem; pointer-events: none;
            animation: pracConfetti 1.2s 0.3s ease-out both;
        }
        /* Done animations */
        .speak-done-anim { animation: speakDoneFadeUp 0.4s ease-out both; }
        @keyframes speakDoneFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        /* ── Shadow dark mode overrides ───────────────────── */
        [data-theme="dark"] .speak-result.passed { background: rgba(52,199,89,0.15); }
        [data-theme="dark"] .speak-result.failed { background: rgba(255,59,48,0.15); }
        [data-theme="dark"] .shadow-intro { background: linear-gradient(135deg, rgba(79,143,247,0.15), rgba(139,108,246,0.15)); }
        [data-theme="dark"] .speak-cmp-word.cmp-match { background: rgba(52,199,89,0.18); }
        [data-theme="dark"] .speak-cmp-word.cmp-close { background: rgba(240,160,32,0.18); }
        [data-theme="dark"] .speak-cmp-word.cmp-miss { background: rgba(255,59,48,0.18); }
        [data-theme="dark"] .speak-done-item.failed { background: rgba(255,59,48,0.12); }
        [data-theme="dark"] .speak-record-btn { box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
        [data-theme="dark"] .speak-pill-count { background: rgba(255,255,255,0.1); }
        [data-theme="dark"] .speak-listen-main { box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
        [data-theme="dark"] .speak-score-badge { box-shadow: none; }
        [data-theme="dark"] .speak-wc-expected { background: rgba(52,199,89,0.12); }
        [data-theme="dark"] .speak-wc-heard { background: rgba(255,59,48,0.12); }
        /* Loading */
        .speak-loading { text-align: center; padding-top: 60px; color: var(--muted); font-size: 0.9rem; }
        .speak-loading-spinner {
            width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--blue);
            border-radius: 50%; animation: spin 0.7s linear infinite; margin: 0 auto 16px;
        }
        /* Conversation progress bar */
        .speak-progress { position: relative; height: 6px; background: var(--hover); border-radius: 3px; margin-bottom: 8px; }
        .speak-progress-bar { height: 100%; background: var(--blue); border-radius: 3px; transition: width 0.3s; }
        .speak-progress-text { position: absolute; right: 0; top: -20px; font-size: 0.75rem; color: var(--muted); }
        /* Conversation bubbles */
        .speak-convo-active { display: flex; flex-direction: column; height: 100%; }
        .speak-convo-header { margin-bottom: 12px; }
        .speak-convo-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
        .speak-convo-chat { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }
        .speak-bubble { max-width: 85%; padding: 12px 16px; border-radius: 16px; position: relative; }
        .speak-bubble.ai { align-self: flex-start; background: var(--hover); border-bottom-left-radius: 4px; }
        .speak-bubble.user { align-self: flex-end; background: rgba(0,122,255,0.1); border-bottom-right-radius: 4px; }
        .speak-bubble.current { box-shadow: 0 0 0 2px var(--blue); }
        .speak-bubble-role { font-size: 0.7rem; font-weight: 600; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.03em; }
        .speak-bubble-text { font-size: 0.92rem; line-height: 1.5; }
        .speak-bubble-prompt { color: var(--blue); font-weight: 500; }
        .kw-hl { color: var(--blue); font-weight: 600; }
        .speak-replay-btn {
            position: absolute; right: 8px; top: 8px; width: 28px; height: 28px;
            border-radius: 50%; border: none; background: var(--surface); color: var(--muted);
            display: flex; align-items: center; justify-content: center; cursor: pointer;
            opacity: 0.6; transition: opacity 0.15s;
         min-height: 44px; min-width: 44px; }
        .speak-replay-btn:hover { opacity: 1; }
        .speak-replay-btn:active { opacity: 1; }
        .speak-convo-input { position: relative; padding: 8px 0; }
        .speak-convo-result { padding: 8px 0; }
        /* Role selection cards */
        .speak-roles { text-align: center; padding-top: 32px; }
        .speak-roles-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; }
        .speak-roles-scenario { font-size: 0.88rem; color: var(--muted); margin-bottom: 24px; line-height: 1.5; }
        .speak-roles-label { font-size: 0.82rem; font-weight: 600; color: var(--muted); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
        .speak-roles-cards { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
        .speak-role-card {
            padding: 20px 24px; border-radius: 16px; border: 2px solid var(--border);
            background: var(--surface); cursor: pointer; transition: all 0.2s;
            min-width: 140px; text-align: center;
        }
        .speak-role-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
        .speak-role-card:active { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
        .speak-role-name { font-size: 1.1rem; font-weight: 700; margin-bottom: 6px; }
        .speak-role-desc { font-size: 0.8rem; color: var(--muted); line-height: 1.4; }

        /* ── Dictionary tab ─────────────────────────────── */
        .dict-hd {
            flex-shrink: 0; /* fixed header, dict-body scrolls below */
            background: transparent;
            padding: calc(14px + env(safe-area-inset-top)) 16px 12px;
            width: min(100%, var(--shell-max-width));
            margin: 0 auto;
        }
        .dict-hd-title {
            font-size: 1.14rem;
            font-weight: 800;
            margin-bottom: 12px;
            letter-spacing: -0.02em;
        }
        .dict-search-wrap {
            display: flex; align-items: center; gap: 8px;
            background: var(--surface-elevated);
            border: 1.5px solid var(--border);
            border-radius: 16px;
            padding: 11px 15px;
            transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
            box-shadow: var(--shadow-sm);
        }
        .dict-search-wrap:focus-within {
            border-color: rgba(79,143,247,0.36);
            box-shadow: 0 0 0 4px rgba(79,143,247,0.1);
        }
        .dict-search-icon { width: 18px; height: 18px; flex-shrink: 0; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; }
        .dict-input {
            flex: 1; border: none; background: transparent;
            font-size: 16px; color: var(--text);
            outline: none; font-family: inherit;
        }
        .dict-input::placeholder { color: var(--muted); opacity: 0.6; }
        .dict-clear-x {
            background: rgba(125,138,163,0.15);
            border: none; width: 20px; height: 20px; border-radius: 50%;
            font-size: 0.7rem; color: var(--muted); cursor: pointer;
            display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        }
        .dict-body {
            flex: 1;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            padding: 2px 0 calc(30px + 76px + env(safe-area-inset-bottom));
            width: min(100%, var(--shell-max-width));
            margin: 0 auto;
        }
        .dict-section { padding: 18px 16px 0; }
        .dict-section-hd {
            display: flex; align-items: center; justify-content: space-between;
            font-size: 0.78rem; font-weight: 700; color: var(--muted);
            text-transform: uppercase; letter-spacing: 0.04em;
            margin-bottom: 8px;
        }
        .dict-clear-btn { background: none; border: none; font-size: 0.72rem; color: var(--blue); cursor: pointer; }
        .dict-item {
            display: flex; align-items: center; gap: 12px;
            padding: 15px 16px;
            border: 1px solid var(--border);
            border-radius: 16px;
            background: var(--surface);
            box-shadow: var(--shadow-sm);
            cursor: pointer;
            transition: background 0.1s, transform 0.12s, border-color 0.12s;
            -webkit-tap-highlight-color: transparent;
            margin-bottom: 10px;
        }
        [data-theme="dark"] .dict-item { border-color: rgba(255,255,255,0.08); }

        /* ── dark: 词根区 ── */
        [data-theme="dark"] .dict-root-section { background: rgba(0,230,184,0.05); border-color: rgba(0,230,184,0.15); }
        [data-theme="dark"] .dict-root-value { background: rgba(0,230,184,0.1); }
        [data-theme="dark"] .dict-root-word-chip { border-color: rgba(0,230,184,0.2); }
        [data-theme="dark"] .dict-root-word-chip:hover { background: rgba(0,230,184,0.1); border-color: rgba(0,230,184,0.4); }
        .dict-root-word-chip:active { background: rgba(0,230,184,0.1); border-color: rgba(0,230,184,0.4); }

        /* ── dark: 中文总释义 ── */
        [data-theme="dark"] .dict-zh-summary { border-bottom-color: rgba(255,255,255,0.1); }

        /* ── dark: 近义词 chip hover ── */
        [data-theme="dark"] .dict-syn-chip:hover { background: rgba(79,143,247,0.12); }
        .dict-syn-chip:active { background: rgba(79,143,247,0.12); }
        [data-theme="dark"] .back-syn-chip:hover { background: rgba(79,143,247,0.12); }

        /* ── dark: 阅读Tab — 文章来源标签 ── */
        [data-theme="dark"] .rtab-card-source.src-plugin { background: rgba(79,143,255,0.15); }
        [data-theme="dark"] .rtab-card-source.src-ai { background: rgba(0,230,184,0.12); }

        /* ── dark: 阅读Tab — 加载更多按钮 ── */
        [data-theme="dark"] .rtab-page-btn:hover { background: rgba(79,143,255,0.1); }
        [data-theme="dark"] .rtab-page-btn:active { background: rgba(79,143,255,0.1); }

        .dict-item:active { background: rgba(79,143,247,0.05); }
        .dict-item:hover { transform: translateY(-1px); border-color: rgba(79,143,247,0.2); }
        .dict-item.active  {
            background: rgba(79,143,247,0.06);
            border-color: rgba(79,143,247,0.2);
        }
        /* Left: word info column */
        .dict-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
        .dict-item-main { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
        .dict-item-word { font-weight: 700; font-size: 1rem; color: var(--text); }
        .dict-item-ipa  { font-size: 0.76rem; color: var(--muted); font-style: italic; }
        .dict-item-sub  { display: flex; align-items: center; gap: 5px; }
        .dict-item-zh   { font-size: 0.82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        /* Right: fav button */
        .dict-item-fav {
            background: none; border: none; font-size: 1.1rem; line-height: 1;
            color: var(--muted); cursor: pointer; padding: 6px; flex-shrink: 0;
            min-width: 36px; min-height: 36px; display: flex; align-items: center; justify-content: center;
            border-radius: 8px; transition: background 0.15s, color 0.15s;
        }
        .dict-item-fav:active { background: rgba(245,158,11,0.1); }
        .dict-item-fav.active { color: var(--amber); }
        .dict-empty { text-align: center; color: var(--muted); padding: 48px 20px; font-size: 0.88rem; display: flex; flex-direction: column; align-items: center; gap: 8px; }
        .dict-empty-icon { font-size: 2rem; opacity: 0.5; }
        .dict-empty-hint { font-size: 0.78rem; opacity: 0.7; }
        .dict-suggest-wrap { margin-top: 16px; }
        .dict-suggest-title { font-size: 0.78rem; color: var(--muted); margin-bottom: 8px; }
        .dict-suggest-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
        .dict-suggest-chip {
            padding: 6px 14px; border-radius: 99px; border: 1.5px solid rgba(79,143,247,0.2);
            background: rgba(79,143,247,0.06); color: var(--blue); font-size: 0.82rem; font-weight: 600;
            cursor: pointer; transition: all 0.15s;
        }
        .dict-suggest-chip:hover { background: rgba(79,143,247,0.12); border-color: var(--blue); }
        [data-theme="dark"] .dict-suggest-chip { background: rgba(79,143,247,0.1); border-color: rgba(79,143,247,0.25); }
        [data-theme="dark"] .dict-suggest-chip:hover { background: rgba(79,143,247,0.18); }

        /* ── Dict list toolbar: tabs + blur toggle ── */
        .dict-list-toolbar {
            display: flex; align-items: center; justify-content: space-between;
            padding: 6px 16px 2px; gap: 8px;
        }
        .dict-list-tabs {
            display: flex; gap: 2px; background: rgba(0,0,0,0.04); border-radius: 10px; padding: 3px;
        }
        [data-theme="dark"] .dict-list-tabs { background: rgba(255,255,255,0.06); }
        .dict-list-tab {
            background: none; border: none; cursor: pointer; font-family: inherit;
            font-size: 0.82rem; font-weight: 600; color: var(--muted);
            padding: 6px 14px; border-radius: 8px; transition: all 0.15s;
            display: flex; align-items: center; gap: 4px;
        }
        .dict-list-tab.active {
            background: var(--surface); color: var(--text);
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        [data-theme="dark"] .dict-list-tab.active { background: rgba(255,255,255,0.1); }
        .dict-tab-count {
            font-size: 0.68rem; font-weight: 700; min-width: 18px; text-align: center;
            background: rgba(79,143,247,0.1); color: var(--blue); border-radius: 99px;
            padding: 1px 5px; line-height: 1.4;
        }
        .dict-list-tab.active .dict-tab-count { background: rgba(79,143,247,0.15); }
        .dict-blur-toggle {
            display: flex; align-items: center; gap: 4px; background: none; border: none;
            cursor: pointer; font-family: inherit; font-size: 0.72rem; font-weight: 600;
            color: var(--muted); padding: 5px 10px; border-radius: 8px;
            transition: all 0.15s; white-space: nowrap;
        }
        .dict-blur-toggle:active { background: rgba(79,143,247,0.08); }
        .dict-blur-toggle.active { color: var(--blue); background: rgba(79,143,247,0.08); }
        .dict-blur-toggle svg { flex-shrink: 0; }

        /* ── Dict item with play button (learn mode) ── */
        .dict-item-learn { gap: 8px; }
        .dict-item-play {
            display: flex; align-items: center; justify-content: center;
            width: 36px; height: 36px; min-width: 36px; border-radius: 50%;
            padding: 4px;
            background: rgba(79,143,247,0.08); border: none; cursor: pointer;
            color: var(--blue); transition: background 0.15s, transform 0.1s;
            flex-shrink: 0;
        }
        .dict-item-play:active { background: rgba(79,143,247,0.18); transform: scale(0.92); }
        [data-theme="dark"] .dict-item-play { background: rgba(79,143,247,0.12); }

        /* ── Dict load more button ── */
        .dict-load-more {
            display: block; width: calc(100% - 32px); margin: 4px 16px 8px;
            padding: 10px; border: 1.5px dashed var(--border); border-radius: 12px;
            background: none; color: var(--blue); font-size: 0.82rem; font-weight: 600;
            cursor: pointer; font-family: inherit; transition: background 0.15s;
        }
        .dict-load-more:active { background: rgba(79,143,247,0.06); }
        [data-theme="dark"] .dict-load-more { border-color: rgba(255,255,255,0.12); }

        /* ── Photo Import ───────────────────────────────────── */
        .photo-import-entry {
            display: flex; align-items: center; gap: 12px;
            padding: 14px 16px; margin: 0 0 10px;
            background: linear-gradient(135deg, rgba(79,143,247,0.06), rgba(139,108,246,0.05));
            border: 1.5px dashed rgba(79,143,247,0.3);
            border-radius: 14px; cursor: pointer;
            transition: all 0.15s ease;
            -webkit-tap-highlight-color: transparent;
            min-height: 44px;
        }
        .photo-import-entry:active {
            transform: scale(0.98);
            background: rgba(79,143,247,0.1);
        }
        .photo-import-entry-icon {
            width: 44px; height: 44px;
            display: flex; align-items: center; justify-content: center;
            background: rgba(79,143,247,0.1);
            border-radius: 12px; color: var(--blue); flex-shrink: 0;
        }
        .photo-import-entry-text {
            flex: 1; min-width: 0;
            display: flex; flex-direction: column; gap: 2px;
        }
        .photo-import-entry-title {
            font-size: 0.93rem; font-weight: 700; color: var(--blue);
        }
        .photo-import-entry-desc {
            font-size: 0.79rem; color: var(--muted); line-height: 1.3;
        }
        [data-theme="dark"] .photo-import-entry {
            background: linear-gradient(135deg, rgba(79,143,247,0.08), rgba(139,108,246,0.06));
            border-color: rgba(79,143,247,0.22);
        }
        [data-theme="dark"] .photo-import-entry-icon {
            background: rgba(79,143,247,0.15);
        }

        /* Photo Import: error state */
        .photo-import-error {
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            padding: 36px 20px; gap: 12px; text-align: center;
        }
        .photo-import-error-icon { font-size: 1.8rem; }
        .photo-import-error-text {
            font-size: 0.88rem; color: var(--red); font-weight: 600;
            line-height: 1.5; max-width: 260px;
        }
        .photo-import-error-actions {
            display: flex; gap: 10px; margin-top: 4px;
        }
        .photo-import-error-retry {
            padding: 10px 20px; border-radius: 99px;
            background: rgba(79,143,247,0.1); border: none;
            color: var(--blue); font-size: 0.85rem; font-weight: 700;
            cursor: pointer; min-height: 44px; font-family: inherit;
        }
        .photo-import-error-retry:active { opacity: 0.7; }
        .photo-import-error-dismiss {
            padding: 10px 20px; border-radius: 99px;
            background: none; border: 1.5px solid var(--border);
            color: var(--muted); font-size: 0.85rem; font-weight: 700;
            cursor: pointer; min-height: 44px; font-family: inherit;
        }
        .photo-import-error-dismiss:active { opacity: 0.7; }
        [data-theme="dark"] .photo-import-error-retry {
            background: rgba(79,143,247,0.15);
        }
        [data-theme="dark"] .photo-import-error-dismiss {
            border-color: rgba(255,255,255,0.12);
        }

        /* Photo Import: loading */
        .photo-import-loading {
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            padding: 48px 20px; gap: 14px;
        }
        .photo-import-spinner {
            width: 36px; height: 36px;
            border: 3px solid var(--border);
            border-top-color: var(--blue);
            border-radius: 50%;
            animation: dictSpin 0.7s linear infinite;
        }
        .photo-import-loading-text {
            font-size: 0.9rem; font-weight: 700; color: var(--text);
        }
        .photo-import-loading-hint {
            font-size: 0.78rem; color: var(--muted);
        }
        .photo-import-loading-cancel {
            margin-top: 8px; padding: 10px 24px; border-radius: 99px;
            background: none; border: 1.5px solid var(--border);
            color: var(--muted); font-size: 0.82rem; font-weight: 700;
            cursor: pointer; min-height: 44px; font-family: inherit;
        }
        .photo-import-loading-cancel:active { opacity: 0.7; }
        [data-theme="dark"] .photo-import-spinner {
            border-color: rgba(255,255,255,0.12);
            border-top-color: var(--blue);
        }
        [data-theme="dark"] .photo-import-loading-cancel {
            border-color: rgba(255,255,255,0.12);
        }

        /* Photo Import: results panel */
        .photo-import-results {
            margin: 0 0 12px;
            border: 1px solid var(--border);
            border-radius: 16px;
            background: var(--surface);
            overflow: hidden;
            animation: photoResultsEnter 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        @keyframes photoResultsEnter {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .photo-import-results-header {
            display: flex; align-items: center; gap: 8px;
            padding: 14px 14px 10px;
            border-bottom: 1px solid var(--border);
        }
        .photo-import-results-title {
            flex: 1; font-size: 0.92rem; font-weight: 700; color: var(--text);
        }
        .photo-import-results-count {
            font-size: 0.78rem; font-weight: 600; color: var(--blue);
            flex-shrink: 0;
        }
        .photo-import-header-btn {
            padding: 8px 14px; border-radius: 99px;
            background: rgba(79,143,247,0.08); border: none;
            color: var(--blue); font-size: 0.75rem; font-weight: 700;
            cursor: pointer; min-height: 44px; font-family: inherit;
        }
        .photo-import-header-btn:active { opacity: 0.7; }
        .photo-import-close-btn {
            width: 44px; height: 44px;
            display: flex; align-items: center; justify-content: center;
            background: none; border: none; cursor: pointer;
            color: var(--muted); border-radius: 8px;
            font-size: 1.1rem; font-family: inherit;
            margin: -6px -6px -6px 0;
        }
        .photo-import-close-btn:active { background: rgba(0,0,0,0.05); }

        /* Photo Import: toolbar */
        .photo-import-toolbar {
            display: flex; align-items: center; justify-content: flex-end;
            padding: 8px 14px 4px;
        }
        .photo-import-toggle-btn {
            background: none; border: none;
            color: var(--blue); font-size: 0.78rem; font-weight: 700;
            cursor: pointer; padding: 6px 10px; border-radius: 8px;
            font-family: inherit; min-height: 44px;
        }
        .photo-import-toggle-btn:active { background: rgba(79,143,247,0.08); }

        /* Photo Import: word list */
        .photo-import-list {
            max-height: min(45vh, 320px); overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            padding: 0 4px;
        }
        .photo-import-item {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 10px; min-height: 44px;
            border-bottom: 1px solid rgba(0,0,0,0.04);
            cursor: pointer; transition: background 0.12s;
            border-radius: 10px; margin: 0 2px;
        }
        .photo-import-item:last-child { border-bottom: none; }
        .photo-import-item:active { background: rgba(79,143,247,0.05); }
        .photo-import-item-selected {
            background: rgba(79,143,247,0.06);
        }
        .photo-import-item-saved {
            opacity: 0.5; pointer-events: none; cursor: default;
        }

        /* Checkbox */
        .photo-import-check {
            width: 22px; height: 22px; flex-shrink: 0;
            border: 2px solid var(--border);
            border-radius: 6px;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.15s;
            color: transparent;
        }
        .photo-import-check.checked {
            background: var(--blue);
            border-color: var(--blue);
            color: #fff;
        }
        .photo-import-item-body {
            flex: 1; min-width: 0;
            display: flex; flex-direction: column; gap: 2px;
        }
        .photo-import-item-wordrow {
            display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
        }
        .photo-import-item-word {
            font-weight: 700; font-size: 0.95rem; color: var(--text);
        }
        .photo-import-item-pos {
            font-size: 0.68rem; font-weight: 600; color: var(--blue);
            padding: 1px 7px; border-radius: 20px;
            background: rgba(79,143,247,0.08);
        }
        .photo-import-item-zh {
            font-size: 0.82rem; color: var(--muted);
        }
        .photo-import-badge-saved {
            font-size: 0.68rem; font-weight: 700; color: #2bc866;
            padding: 2px 8px; border-radius: 99px;
            background: rgba(43,200,102,0.1); white-space: nowrap; flex-shrink: 0;
        }

        /* Photo Import: footer */
        .photo-import-footer {
            display: flex; gap: 10px;
            padding: 12px 14px;
            border-top: 1px solid var(--border);
        }
        .photo-import-cancel-btn {
            flex: 0 0 auto; padding: 13px 20px;
            border-radius: 14px; border: 1.5px solid var(--border);
            background: var(--surface); color: var(--text);
            font-size: 0.88rem; font-weight: 700;
            cursor: pointer; min-height: 44px; font-family: inherit;
        }
        .photo-import-cancel-btn:active { opacity: 0.7; }
        .photo-import-confirm-btn {
            flex: 1; padding: 13px 20px;
            border-radius: 14px; border: none;
            background: linear-gradient(135deg, #4f8ff7, #6ca6ff);
            color: #fff; font-size: 0.88rem; font-weight: 700;
            cursor: pointer; min-height: 44px; font-family: inherit;
            box-shadow: 0 4px 16px rgba(79,143,247,0.25);
            transition: opacity 0.15s, transform 0.1s;
        }
        .photo-import-confirm-btn:disabled {
            opacity: 0.4; cursor: default; box-shadow: none;
        }
        .photo-import-confirm-btn:not(:disabled):active {
            transform: scale(0.98);
        }

        /* Photo Import: hover states (desktop) */
        @media (hover: hover) {
            .photo-import-item:not(.photo-import-item-saved):hover {
                background: rgba(79,143,247,0.04);
            }
            .photo-import-header-btn:hover {
                background: rgba(79,143,247,0.14);
            }
            .photo-import-confirm-btn:not(:disabled):hover {
                box-shadow: 0 6px 20px rgba(79,143,247,0.35);
                transform: translateY(-1px);
            }
            .photo-import-entry:hover {
                background: rgba(79,143,247,0.08);
                border-color: rgba(79,143,247,0.4);
            }
        }

        /* Photo Import: dark mode */
        [data-theme="dark"] .photo-import-results {
            border-color: rgba(255,255,255,0.1);
            background: var(--surface);
        }
        [data-theme="dark"] .photo-import-results-header {
            border-bottom-color: rgba(255,255,255,0.08);
        }
        [data-theme="dark"] .photo-import-header-btn {
            background: rgba(79,143,247,0.15);
        }
        [data-theme="dark"] .photo-import-close-btn:active {
            background: rgba(255,255,255,0.06);
        }
        [data-theme="dark"] .photo-import-item {
            border-bottom-color: rgba(255,255,255,0.04);
        }
        [data-theme="dark"] .photo-import-item:active {
            background: rgba(255,255,255,0.04);
        }
        [data-theme="dark"] .photo-import-item-selected {
            background: rgba(79,143,247,0.12);
        }
        [data-theme="dark"] .photo-import-check {
            border-color: rgba(255,255,255,0.18);
        }
        [data-theme="dark"] .photo-import-item-pos {
            background: rgba(79,143,247,0.15);
        }
        [data-theme="dark"] .photo-import-badge-saved {
            background: rgba(43,200,102,0.12);
        }
        [data-theme="dark"] .photo-import-footer {
            border-top-color: rgba(255,255,255,0.08);
        }
        [data-theme="dark"] .photo-import-cancel-btn {
            background: rgba(255,255,255,0.06);
            border-color: rgba(255,255,255,0.12);
        }

        /* ── Blur Chinese definition ── */
        .dict-zh-blurred {
            filter: blur(5px); -webkit-filter: blur(5px);
            transition: filter 0.2s; cursor: pointer; user-select: none; -webkit-user-select: none;
        }
        @media (hover: hover) {
            .dict-zh-blurred:hover { filter: blur(0); -webkit-filter: blur(0); }
        }
        .dict-loading { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); padding: 40px 20px; font-size: 0.85rem; }
        .dict-loading-spinner { width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--blue); border-radius: 50%; animation: dictSpin 0.7s linear infinite; flex-shrink: 0; }
        @keyframes dictSpin { to { transform: rotate(360deg); } }
        /* Dict detail panel */
        /* Dict detail back nav */
        .dict-detail-nav { display:flex; align-items:center; margin-bottom:14px }
        .dict-detail-back {
            display:inline-flex; align-items:center; gap:4px;
            background:none; border:none; cursor:pointer;
            font-size:.85rem; font-weight:600; color:var(--blue);
            padding:0; font-family:inherit;
        }
        .dict-detail-back svg { width:18px; height:18px; stroke:var(--blue); fill:none; stroke-width:2.5; stroke-linecap:round; }
        /* Learning status badge in detail */
        .dict-detail-status {
            display:inline-flex; align-items:center; gap:5px;
            font-size:.72rem; font-weight:600; color:var(--muted);
            background:rgba(79, 143, 247, 0.08);
            padding:3px 10px; border-radius:99px; margin-bottom:10px;
        }
        /* Chinese def loading shimmer */
        .dict-detail-zh-loading { color:var(--muted); font-style:normal; font-size:.9rem }
        .dict-detail {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 22px;
            margin: 16px;
            padding: 22px;
            box-shadow: var(--shadow-md);
            animation: rdContentFadeIn 0.3s ease;
        }
        .dict-detail-hd { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
        .dict-detail-word { font-size: 1.2rem; font-weight: 700; }
        .dict-detail-ipa { font-size: 0.82rem; color: var(--muted); margin-top: 2px; }
        .dict-detail-pos { font-size: 0.72rem; color: white; background: linear-gradient(135deg, #4f8ff7 0%, #8b6cf6 100%); padding: 2px 8px; border-radius: 6px; }
        .dict-detail-btns { margin-left: auto; display: flex; gap: 8px; }
        .dict-detail-btn {
            background: none; border: 1.5px solid var(--border); border-radius: 50%;
            width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
            cursor: pointer; font-size: 0.95rem; color: var(--muted); transition: border-color 0.15s, color 0.15s;
         min-height: 44px; min-width: 44px; }
        .dict-detail-btn:hover { border-color: var(--blue); color: var(--blue); }
        .dict-detail-btn:active { border-color: var(--blue); color: var(--blue); }
        .dict-detail-btn.fav-active { color: var(--amber); border-color: var(--amber); }
        .dict-detail-zh { font-size: 0.95rem; color: var(--text); margin-bottom: 10px; }
        .dict-detail-def { font-size: 0.85rem; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }
        .dict-detail-ex { font-size: 0.85rem; color: var(--text); font-style: italic; padding: 8px 12px; background: rgba(79,143,247,0.04); border-radius: 10px; line-height: 1.5; margin-bottom: 6px; }
        .dict-detail-decks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
        .dict-detail-deck-tag { font-size: 0.7rem; padding: 3px 10px; border-radius: 99px; background: rgba(79,143,247,0.08); color: var(--blue); }
        .dict-detail-close { position: absolute; right: 12px; top: 12px; }

        /* ── Profile tab ────────────────────────────────── */
        .prof-hd {
            padding: calc(16px + env(safe-area-inset-top)) 20px 14px;
            background: var(--bg);
        }
        .prof-title { font-size: 1.2rem; font-weight: 700; }
        .prof-body {
            flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
            padding: 0 16px calc(24px + 56px + env(safe-area-inset-bottom));
            display: flex; flex-direction: column; gap: 14px;
        }
        .prof-card {
            background: var(--surface); border-radius: 16px;
            padding: 24px; text-align: center;
            box-shadow: var(--shadow-sm);
        }
        .prof-avatar {
            width: 56px; height: 56px; border-radius: 50%;
            background: var(--blue); color: #fff;
            font-size: 1.4rem; font-weight: 700;
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 10px;
        }
        .prof-name { font-size: 1.05rem; font-weight: 700; }
        .prof-meta { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
        .prof-stats {
            display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
        }
        .prof-stat-card {
            background: var(--surface); border-radius: 14px;
            padding: 14px; text-align: center;
            box-shadow: var(--shadow-sm);
        }
        .prof-stat-val { font-size: 1.3rem; font-weight: 700; color: var(--blue); }
        .prof-stat-label { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
        .prof-section {
            background: var(--surface); border-radius: 14px;
            overflow: hidden; box-shadow: var(--shadow-sm);
        }
        .prof-row {
            display: flex; align-items: center; gap: 10px;
            padding: 13px 16px; position: relative;
            border-bottom: 0.5px solid rgba(221, 229, 240, 0.5);
            cursor: pointer; transition: background 0.1s;
        }
        .prof-row:last-child { border-bottom: none; }
        .prof-row:active { background: rgba(79, 143, 247, 0.04); }
        .prof-row-label { font-size: 0.88rem; font-weight: 500; flex: 1; }
        .prof-row-val { font-size: 0.82rem; color: var(--muted); }
        .prof-row-arrow { color: var(--muted); font-size: 0.9rem; }
        /* Theme segment control */
        .theme-seg { display:flex; border:1.5px solid var(--border); border-radius:8px; overflow:hidden; flex-shrink:0; }
        .theme-seg-btn { flex:1; padding:5px 10px; border:none; background:none; font-size:0.73rem; font-weight:600; color:var(--muted); cursor:pointer; border-right:1px solid var(--border); transition:background .15s,color .15s; white-space:nowrap; }
        .theme-seg-btn:last-child { border-right:none; }
        .theme-seg-btn.active { background:var(--blue); color:#fff; }
        /* Rename inline in settings */
        .rename-inline { padding:10px 16px 12px; display:none; border-top:1px solid var(--border); }
        .rename-inline.open { display:block; }
        .rename-inline-row { display:flex; gap:8px; align-items:center; }
        .rename-inline .rename-input { flex:1; }
        .rename-inline-submit { padding:6px 14px; border-radius:8px; background:var(--blue); color:#fff; font-weight:700; font-size:13px; border:none; cursor:pointer; white-space:nowrap; }
        .rename-inline-cancel  { padding:6px 10px; border-radius:8px; background:none; color:var(--muted); font-size:13px; border:1px solid var(--border); cursor:pointer; }
        .prof-toggle {
            width: 44px; height: 24px; border-radius: 99px; position: relative;
            background: var(--border); transition: background 0.2s; cursor: pointer;
            border: none; }
        .prof-toggle.on { background: var(--blue); }
        .prof-toggle::after {
            content: ''; position: absolute; top: 2px; left: 2px;
            width: 20px; height: 20px; border-radius: 50%;
            background: #fff; transition: transform 0.2s;
        }
        .prof-toggle.on::after { transform: translateX(20px); }
        /* Auth form */
        .prof-auth {
            background: var(--surface); border-radius: 16px;
            padding: 24px; box-shadow: var(--shadow-sm);
        }
        .prof-auth-tabs { display: flex; gap: 0; margin-bottom: 20px; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--border); }
        .prof-auth-tab {
            flex: 1; padding: 9px; border: none; background: transparent;
            font-size: 0.85rem; font-weight: 600; cursor: pointer; color: var(--muted);
            transition: background 0.15s, color 0.15s; font-family: inherit;
        }
        .prof-auth-tab.active { background: var(--blue); color: #fff; }
        .prof-auth-input {
            width: 100%; padding: 10px 14px; border: 1.5px solid var(--border);
            border-radius: 10px; font-size: 16px; color: var(--text);
            background: var(--bg); margin-bottom: 10px; font-family: inherit;
            outline: none; transition: border-color 0.15s; box-sizing: border-box;
        }
        .prof-auth-input:focus { border-color: var(--blue); }
        .prof-auth-submit {
            width: 100%; padding: 11px; border: none; border-radius: 10px;
            background: var(--blue); color: #fff; font-size: 0.9rem; font-weight: 600;
            cursor: pointer; margin-top: 4px; font-family: inherit;
            transition: opacity 0.15s;
        }
        .prof-auth-submit:disabled { opacity: 0.5; cursor: default; }
        .prof-auth-submit:active { opacity: 0.85; }
        .prof-auth-error { color: var(--red); font-size: 0.8rem; margin-top: 8px; text-align: center; }
        .prof-auth-google {
            display: flex; align-items: center; justify-content: center; gap: 8px;
            width: 100%; padding: 10px; border: 1.5px solid var(--border);
            border-radius: 10px; background: var(--surface); cursor: pointer;
            font-size: 0.85rem; font-weight: 500; color: var(--text);
            margin-top: 12px; font-family: inherit; transition: border-color 0.15s;
        }
        .prof-auth-google:hover { border-color: var(--blue); }
        .prof-logout-btn {
            width: 100%; padding: 11px; border: 1.5px solid var(--red);
            border-radius: 10px; background: transparent; color: var(--red);
            font-size: 0.88rem; font-weight: 600; cursor: pointer; font-family: inherit;
        }

        /* ══════════════════════════════════════════════════════════════════════
           AUTH & SETTINGS — 全局样式（auth modal + settings drawer）
           ══════════════════════════════════════════════════════════════════════ */
        .auth-modal,
        .settings-drawer {
            /* Map CSS variables */
            --card: var(--surface);
            --ink: var(--text);
            --pri: var(--blue);
            --pri2: #4780de;  /* blue 90% + black 10% — iOS 15 safe */
            --pri-light: rgba(79,143,247,0.08);
            --line: var(--border);
            --line2: #b6beca;  /* border 80% + text 20% */
            --muted2: var(--muted);
            --ok: var(--green);
            --err: var(--red);
            --warn: var(--amber);
        }
        .auth-modal .card{
            width:100%;
            background:var(--card);
            border-radius:20px;
            overflow:visible;
        }
        .auth-modal .card-body{padding:24px 28px}
        /* Auth panel */
        .auth-modal #p-authPanel .card-body{padding:28px 32px}
        @media (max-width: 480px) {
            .auth-modal .card-body{padding:20px}
            .auth-modal #p-authPanel .card-body{padding:24px 20px}
        }
        .auth-modal .auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}
        .auth-modal .auth-brand-logo{
            width:38px;height:38px;border-radius:9px;
            background:linear-gradient(135deg,#2383e2,#8b5cf6);
            display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0
        }
        .auth-modal .auth-brand-name{font-size:16px;font-weight:700;letter-spacing:-.2px;
            background:linear-gradient(135deg,#4f8ff7 0%,#8b6cf6 100%);
            -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
        .auth-modal .auth-title{font-size:22px;font-weight:700;margin:0 0 6px;letter-spacing:-.3px}
        .auth-modal .auth-sub{font-size:14px;color:var(--muted2);line-height:1.5;margin:0 0 18px}
        .auth-modal .g-primary-wrap{display:flex;justify-content:center;margin-bottom:16px;min-height:44px}
        .auth-modal .g-divider{
            display:flex;align-items:center;gap:12px;margin:0 0 14px;
            color:var(--muted);font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase
        }
        .auth-modal .g-divider::before,.auth-modal .g-divider::after{content:'';flex:1;height:1px;background:var(--line)}
        .auth-modal .tabs{display:flex;border-bottom:1.5px solid var(--line);margin-bottom:14px;position:relative}
        .auth-modal .tab{
            border:0;background:transparent;color:var(--muted2);padding:8px 16px 10px;
            font-size:14px;font-weight:600;cursor:pointer;transition:color .15s;position:relative;font-family:inherit
        }
        .auth-modal .tab.active{color:var(--pri)}
        .auth-modal .tab.active::after{
            content:'';position:absolute;bottom:-1.5px;left:0;right:0;
            height:2px;background:var(--pri);border-radius:2px 2px 0 0
        }
        .auth-modal .tab-slider{display:none}
        .auth-modal .panels{position:relative}
        .auth-modal .panel{display:none;animation:panelIn .2s ease}
        .auth-modal .panel.active{display:block}
        @keyframes panelIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
        .auth-modal label{
            display:flex;justify-content:space-between;align-items:center;
            margin:10px 0 5px;font-size:13px;font-weight:600
        }
        .auth-modal .tiny{font-size:12px;color:var(--muted);font-weight:500}
        .auth-modal .input-wrap{position:relative}
        .auth-modal input[type="text"],
        .auth-modal input[type="password"]{
            width:100%;padding:10px 38px 10px 12px;border-radius:8px;
            border:1px solid var(--line2);background:var(--bg);
            font-size: 16px;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s;
            font-family:inherit
        }
        .auth-modal input[type="text"]:focus,
        .auth-modal input[type="password"]:focus{
            border-color:var(--pri);
            box-shadow:0 0 0 3px var(--pri-light);
            background:var(--card)
        }
        .auth-modal input.invalid{border-color:var(--err);box-shadow:0 0 0 3px rgba(240, 80, 80, 0.1)}
        .auth-modal input.valid{border-color:rgba(43, 200, 102, 0.6)}
        .auth-modal .toggle-eye{
            position:absolute;right:10px;top:50%;transform:translateY(-50%);
            border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;transition:color .15s
        }
        .auth-modal .toggle-eye:hover{color:var(--ink)}
        .toggle-eye:active{color:var(--ink)}
        .auth-modal .strength-bar{height:3px;border-radius:2px;background:var(--line);margin-top:6px;overflow:hidden}
        .auth-modal .strength-fill{height:100%;width:0;border-radius:2px;transition:width .3s ease,background .3s ease}
        .auth-modal .strength-fill.s1{width:33%;background:var(--err)}
        .auth-modal .strength-fill.s2{width:66%;background:var(--warn)}
        .auth-modal .strength-fill.s3{width:100%;background:var(--ok)}
        .auth-modal .inline{font-size:12px;margin-top:5px;min-height:1em;line-height:1.35;transition:opacity .2s}
        .auth-modal .inline.ok{color:var(--ok)}.auth-modal .inline.err{color:var(--err)}.auth-modal .inline.warn{color:var(--warn)}
        .auth-modal .cta{
            margin-top:20px;width:100%;border:0;border-radius:8px;padding:11px 16px;
            color:#fff;background:var(--pri);font-weight:600;cursor:pointer;font-size:15px;
            letter-spacing:.1px;font-family:inherit;
            transition:opacity .15s,transform .1s,box-shadow .15s;
            display:flex;align-items:center;justify-content:center;gap:8px
        }
        .auth-modal .cta:hover:not(:disabled){opacity:.9}
        .auth-modal .cta:active:not(:disabled){transform:scale(.99)}
        .auth-modal .cta:disabled{opacity:.5;cursor:not-allowed}
        .auth-modal .spinner{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
        .auth-modal .cta.loading .spinner{display:block}
        .auth-modal .cta.loading .btn-text{opacity:.8}
        .auth-modal .msg{
            margin-top:14px;padding:10px 12px;border-radius:8px;font-size:13px;
            display:none;align-items:center;gap:8px;animation:msgIn .2s ease
        }
        .auth-modal .msg.ok{display:flex;background:rgba(43, 200, 102, 0.1);color:var(--ok);border:1px solid rgba(43, 200, 102, 0.25)}
        .auth-modal .msg.err{display:flex;background:rgba(240, 80, 80, 0.08);color:var(--err);border:1px solid rgba(240, 80, 80, 0.25)}
        .auth-modal .msg-icon{font-size:14px;flex-shrink:0}
        @keyframes msgIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
        @keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
        .auth-modal .shake{animation:shake .4s ease}
        .settings-drawer .rename-input{
            flex:1;min-width:120px;padding:6px 10px;border-radius:8px;
            border:1px solid var(--line2);background:var(--bg);
            color:var(--ink);font-size: 16px;outline:none;font-family:inherit;
        }
        .settings-drawer .rename-input:focus{border-color:var(--pri);box-shadow:0 0 0 2px var(--pri-light)}
        /* Offline panel */
        .auth-modal .offline-panel{display:flex;align-items:center;gap:14px;padding:24px 28px}
        .auth-modal .offline-icon{font-size:26px;flex-shrink:0}
        .auth-modal .offline-body{flex:1;min-width:0}
        .auth-modal .offline-title{font-size:15px;font-weight:700;margin-bottom:3px}
        .auth-modal .offline-desc{color:var(--muted2);font-size:13px;line-height:1.4}
        /* Settings card */
        .settings-drawer .settings-card{margin-top:12px}
        .settings-drawer .settings-group-label{
            font-size:11px;font-weight:700;color:var(--muted);
            text-transform:uppercase;letter-spacing:.06em;
            padding:18px 16px 6px;
        }
        /* 分组之间用一条全宽线，不用 border-top/bottom 叠加 */
        .settings-drawer .settings-group-sep{height:1px;background:var(--line);margin:8px 0 0}
        .settings-drawer .prof-row{min-height:44px;display:flex;align-items:center;gap:10px;padding:0 16px;cursor:pointer;transition:background .12s}
        /* 同一分组内各行之间用 border-bottom（分隔相邻行，不影响 label） */
        .settings-drawer .prof-row + .prof-row{border-top:1px solid var(--line)}
        .settings-drawer .prof-row.prof-row-danger .prof-row-icon{filter:none}
        .settings-drawer .prof-row.prof-row-danger .prof-row-label{color:var(--err,#ef4444)}
        .settings-drawer .settings-version{text-align:center;font-size:11px;color:var(--muted,#9ca3af);padding:12px 0 8px;letter-spacing:.3px}
        /* 收藏列表相关 */
        .today-deck-fav-list-btn{flex-shrink:0;font-size:11px;padding:3px 8px;border-radius:6px;border:1px solid var(--accent);color:var(--accent);background:transparent;cursor:pointer;white-space:nowrap}
        .today-deck-fav-list-btn:hover{background:var(--accent);color:#fff}
        .fav-item{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line)}
        .fav-item-main{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px}
        .fav-item-word{font-weight:600;font-size:15px;cursor:pointer;color:var(--text)}
        .fav-item-word:hover{color:var(--accent)}
        .fav-item-zh{font-size:12px;color:var(--muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .fav-item-remove{flex-shrink:0;width:24px;height:24px;border:none;background:none;color:var(--muted);cursor:pointer;font-size:14px;border-radius:4px}
        .fav-item-remove:hover{background:var(--err,#ef4444);color:#fff}
        .fav-load-more{text-align:center;padding:12px;font-size:13px;color:var(--accent);cursor:pointer;border-top:1px solid var(--line)}
        .fav-load-more:hover{background:var(--hover,rgba(0,0,0,.04))}
        .settings-drawer .prof-row-icon{font-size:16px;flex-shrink:0;width:22px;text-align:center}
        .settings-drawer .prof-row-sub{display:none}
        /* Toast */
        .p-toast{
            position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(60px);
            background:var(--ink,var(--text));color:var(--card,var(--surface));padding:10px 18px;border-radius:8px;
            font-size:13px;font-weight:500;opacity:0;transition:all .25s ease;
            z-index:200;pointer-events:none;white-space:nowrap
        }
        .p-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
        /* Report */
        @keyframes rptFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
        @keyframes rptScaleIn{from{opacity:0}to{opacity:1}}
        @keyframes countUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
        @keyframes pulseGlow{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 6px var(--pri-light)}}
        @keyframes floatBadge{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
        @media(max-width:520px){
            .auth-modal #p-authPanel .card-body{padding:24px 20px}
            .auth-modal .offline-panel{padding:20px}
        }

        /* ── Dark mode ────────────────────────────────────── */
        @media (prefers-color-scheme: dark) {
            :root:not([data-theme]) {
                --bg: #0e1525;
                --surface: #182032;
                --border: #2a3548;
                --text: #e4e9f1;
                --muted: #8694ab;
                --blue: #5b9cf7;
                --green: #3fd87a;
                --amber: #f5be30;
                --red: #f56868;
                --purple: #a48bfa;
                --mastered-color: #b794ff;
                --mastered-color-2: #d8b4fe;
                --deck-track: #2a3548;
                --shadow-sm: 0 1px 3px rgba(0,0,0,0.15);
                --shadow-md: 0 4px 16px rgba(0,0,0,0.2);
                --shadow-lg: 0 8px 32px rgba(0,0,0,0.25);
            }
            /* Card front */
            html:not([data-theme]) .face.front {
                background: var(--surface);
                border-color: var(--border);
            }
            /* Practice */
            html:not([data-theme]) .prac-card         { box-shadow: 0 4px 20px rgba(0,0,0,0.25); border-color: var(--border); }
            html:not([data-theme]) .prac-spell-input  { background: var(--surface); border-color: var(--border); }
            html:not([data-theme]) .prac-submit-btn   { box-shadow: 0 4px 14px rgba(0,0,0,0.3); }
            html:not([data-theme]) .prac-cmp-next-btn { box-shadow: 0 4px 14px rgba(0,0,0,0.3); }
            html:not([data-theme]) .prac-foot-back    { box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
            /* Word list */
            html:not([data-theme]) .wl-row:hover      { background: rgba(96,165,250,.06); }
            /* Deck bar */
            html:not([data-theme]) .deck-btn          { box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
            html:not([data-theme]) .deck-btn.active   { box-shadow: 0 4px 22px rgba(79, 143, 247, 0.55); }
            /* Reading overlay */
            html:not([data-theme]) .reading-lp-wrap   { background: rgba(255, 255, 255, 0.6); }
            html:not([data-theme]) .rd-popup          { background: rgba(255, 255, 255, 0.95); box-shadow: 0 -4px 24px rgba(0,0,0,.25); }
            html:not([data-theme]) .reading-done-btn  { box-shadow: 0 4px 18px rgba(0,0,0,0.3); }
            html:not([data-theme]) .prac-next-step    { box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
            html:not([data-theme]) .reading-hist-item { box-shadow: none; }
            html:not([data-theme]) .reading-hist-item:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.2); }
        }

        /* ── Dark mode (explicit toggle — mirrors media query) ─────────── */
        [data-theme="dark"] :root,
        [data-theme="dark"]:root {
            --bg: #0c1524;
            --surface: #172133;
            --surface-elevated: rgba(23,33,51,0.84);
            --surface-soft: #1a2740;
            --border: #29374e;
            --line: #29374e;
            --hover: #202c43;
            --text: #e6ecf5;
            --muted: #8a99b2;
            --blue: #5b9cf7;
            --green: #3fd87a;
            --amber: #f5be30;
            --red: #f56868;
            --purple: #a48bfa;
            --mastered-color: #b794ff;
            --mastered-color-2: #d8b4fe;
            --deck-track: #2a3548;
            --shadow-sm: 0 8px 22px rgba(0,0,0,0.22);
            --shadow-md: 0 18px 42px rgba(0,0,0,0.3);
            --shadow-lg: 0 30px 70px rgba(0,0,0,0.34);
            --shadow-card: 0 2px 8px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.12);
            --shadow-glow-blue: 0 4px 20px rgba(91,156,247,0.15);
            --shadow-glow-orange: 0 4px 20px rgba(255,140,66,0.15);
        }
        /* Explicit light mode override, prevents OS-level dark media query from leaking into manual light mode */
        [data-theme="light"]:root {
            --bg: #f3f6fb;
            --surface: #ffffff;
            --surface-elevated: rgba(255,255,255,0.84);
            --surface-soft: #f8faff;
            --border: #dde5f0;
            --line: #dde5f0;
            --hover: #eef4fc;
            --text: #182132;
            --muted: #7d8aa3;
            --blue: #4b84f3;
            --green: #2bc866;
            --amber: #f0a020;
            --red: #f05050;
            --purple: #8b6cf6;
            --mastered-color: #8b5cf6;
            --mastered-color-2: #a78bfa;
            --deck-track: #dbe5f2;
            --shadow-sm: 0 6px 18px rgba(20,32,61,0.06);
            --shadow-md: 0 16px 40px rgba(20,32,61,0.1);
            --shadow-lg: 0 28px 64px rgba(20,32,61,0.14);
        }
        [data-theme="dark"] .prac-card         { box-shadow: 0 4px 20px rgba(0,0,0,0.25); border-color: var(--border); }
        [data-theme="dark"] .prac-spell-input  { background: var(--surface); border-color: var(--border); }
        [data-theme="dark"] .prac-submit-btn   { box-shadow: 0 4px 14px rgba(0,0,0,0.3); }
        [data-theme="dark"] .prac-cmp-next-btn { box-shadow: 0 4px 14px rgba(0,0,0,0.3); }
        [data-theme="dark"] .prac-foot-back    { box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
        [data-theme="dark"] .wl-row:hover      { background: rgba(96,165,250,.06); }
        [data-theme="dark"] .deck-btn          { box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
        [data-theme="dark"] .deck-btn.active   { box-shadow: 0 4px 22px rgba(79, 143, 247, 0.55); }
        [data-theme="dark"] .reading-hd         { border-bottom-color: rgba(255,255,255,0.08); }
        [data-theme="dark"] .reading-close     { background: rgba(255,255,255,0.08); }
        [data-theme="dark"] .reading-close:hover { background: rgba(255,255,255,0.12); }
        [data-theme="dark"] .reading-toolbar   { border-bottom-color: rgba(255,255,255,0.06); background: rgba(13, 20, 33, 0.88); }
        [data-theme="dark"] .reading-lp-wrap   { background: rgba(30,30,30,0.60); }
        [data-theme="dark"] .rd-popup          { background: rgba(30,30,30,0.95); box-shadow: 0 -4px 24px rgba(0,0,0,.25); }
        [data-theme="dark"] .reading-done-btn  { box-shadow: 0 4px 18px rgba(0,0,0,0.3); }
        [data-theme="dark"] .prac-next-step    { box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
        [data-theme="dark"] .reading-hist-item { box-shadow: none; }
        [data-theme="dark"] .reading-hist-item:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.2); }

        /* ── Dark mode: action bar buttons ───────────────── */
        [data-theme="dark"] .btn-hd {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.06);
            box-shadow: none;
            color: rgba(255,255,255,0.5);
        }
        [data-theme="dark"] .btn-hd:hover {
            background: rgba(79, 143, 247, 0.12);
            border-color: rgba(79, 143, 247, 0.15);
        }
        [data-theme="dark"] .btn-hd.active {
            background: rgba(79, 143, 247, 0.15);
            border-color: rgba(79, 143, 247, 0.3);
            box-shadow: 0 4px 14px rgba(79, 143, 247, 0.2);
        }

        /* ── Dark mode: mode bar buttons (Switch to list / Auto Play) ── */
        [data-theme="dark"] .mode-btn {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.06);
            box-shadow: none;
        }
        [data-theme="dark"] .mode-btn.active {
            background: rgba(79, 143, 247, 0.15);
            border-color: rgba(79, 143, 247, 0.25);
        }
        [data-theme="dark"] .mode-btn-play.active {
            background: rgba(139, 92, 246, 0.15);
            border-color: rgba(139, 92, 246, 0.25);
        }

        /* ── Dark mode: learning path step indicators ──── */
        [data-theme="dark"] .lp-mini-circ {
            border-color: rgba(255, 255, 255, 0.15);
            background: rgba(255,255,255,0.04);
        }
        [data-theme="dark"] .lp-mini-seg {
            background: rgba(255, 255, 255, 0.08);
        }
        [data-theme="dark"] .lp-mini-lbl {
            color: rgba(255,255,255,0.4);
        }
        /* ── Dark mode: progress bar ─────────────────── */
        [data-theme="dark"] .prog-track {
            background: rgba(255, 255, 255, 0.08);
        }

        /* ── Dark mode: card front border ────────────── */
        [data-theme="dark"] .face.front {
            background: var(--surface);
            border-color: rgba(255, 255, 255, 0.08);
        }

        /* ── Dark mode: more dropdown ────────────────── */
        [data-theme="dark"] .hd-more-dropdown {
            background: var(--surface);
            border-color: rgba(255, 255, 255, 0.1);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
        }
        [data-theme="dark"] .hd-more-item:hover {
            background: rgba(79, 143, 247, 0.1);
        }

        /* ── Small mobile (≤ 390px) ──────────────────────── */
        @media (max-width: 390px) {
            .hd         {
                padding: calc(10px + env(safe-area-inset-top)) 14px 0;
                margin-top: 6px;
                border-radius: 20px 20px 16px 16px;
            }
            .hd-top     { padding-bottom: 8px; }
            .hd-title   { font-size: 0.92rem; }
            .chip       { font-size: 0.68rem; padding: 4px 8px; }
            .level-badge{ font-size: 0.7rem; }
            .btn-hd     { padding: 4px 8px; font-size: 0.76rem; }
            .btn-hd-text { font-size: 0.65rem; }
            .btn-hd-icon { font-size: 0.75rem; }
            .deck-btn   { font-size: 0.76rem; padding: 5px 12px; }
            .card       { height: 292px; }
            .front-word { font-size: 2.1rem; }
            .back-zh    { font-size: 1.75rem; }
            .cb         { min-height: 56px; padding: 10px 4px; border-radius: 12px; }
            .cb-label   { font-size: 0.8rem; }
            .cb-interval{ font-size: 0.62rem; }
            .controls   { gap: 7px; }
            .controls-wrap { min-height: 120px; }
            .card-area  { padding: 14px 14px 18px; }
            .back-example{ font-size: 0.74rem; }
            .done-stat-val { font-size: 1.8rem; }
            .prac-ring-wrap { width: 110px; height: 110px; }
            .prac-ring-pct { font-size: 1.8rem; }
            .prac-done-title { font-size: 1.15rem; }
            .prac-stat-pill { font-size: 0.75rem; padding: 5px 10px; }
            .dict-item { padding: 14px 14px; }
        }

        /* ── Regular mobile (391–599px) ──────────────────── */
        @media (min-width: 391px) and (max-width: 599px) {
            .card { height: 308px; }
        }

        /* ── Tablet / iPad (≥ 600px) ─────────────────────── */
        @media (min-width: 600px) {
            .card-area  { max-width: 680px; }
            .card       { height: 350px; }
            .front-word { font-size: 3rem; }
            .back-zh    { font-size: 2.4rem; }
            .back-example { font-size: 0.85rem; }
            .cb         { padding: 14px 10px; min-height: 72px; border-radius: 16px; }
            .cb-label   { font-size: 0.95rem; }
            .cb-interval{ font-size: 0.72rem; }
            .controls   { gap: 14px; }
            .controls-wrap { min-height: 140px; }
            .prog-track { height: 8px; }
            .xp-track   { height: 8px; }
            .done-stat-val { font-size: 2.4rem; }
            .done-title { font-size: 1.9rem; }
            .prac-ring-wrap { width: 150px; height: 150px; }
            .prac-ring-pct { font-size: 2.6rem; }
            .prac-ring-emoji { font-size: 1.5rem; }
            .prac-done-title { font-size: 1.5rem; }
            .prac-done-subtitle { font-size: 0.92rem; }
            .prac-review-section { max-width: 480px; margin: 0 auto; }
            .prac-done-footer { max-width: 440px; margin: 0 auto; }
        }

        /* ── iPad Pro / Desktop (≥ 900px) ────────────────── */
        @media (min-width: 900px) {
            .card-area  { max-width: 720px; }
            .card       { height: 360px; }
            .front-word { font-size: 3.2rem; }
            .back-zh    { font-size: 2.5rem; }
        }

        /* ── Add-to-Home-Screen prompts ───────────────────────────────── */

        /* Android install banner (bottom bar) */
        #pwa-android {
            display: none;
            position: fixed;
            bottom: 0; left: 0; right: 0;
            z-index: 9999;
            padding: 14px 18px max(14px, env(safe-area-inset-bottom));
            background: var(--surface);
            box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
            border-radius: 20px 20px 0 0;
            align-items: center;
            gap: 14px;
            animation: slideUp 0.35s ease;
        }
        #pwa-android.show { display: flex; }
        #pwa-android .pwa-icon {
            width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
        }
        #pwa-android .pwa-text { flex: 1; }
        #pwa-android .pwa-text strong { display: block; font-size: 0.97rem; color: #1e2533; }
        #pwa-android .pwa-text span   { font-size: 0.8rem; color: #64748b; }
        #pwa-install-btn {
            padding: 9px 18px;
            background: linear-gradient(135deg,#2563EB,#6D28D9);
            color: #fff; border: none; border-radius: 20px;
            font-size: 0.9rem; font-weight: 600; cursor: pointer;
            white-space: nowrap;
        }
        #pwa-dismiss-android {
            background: none; border: none; font-size: 1.3rem; cursor: pointer;
            color: #94a3b8; padding: 4px 6px; flex-shrink: 0;
        }
        /* Desktop: floating card instead of full-width bottom bar */
        @media (min-width: 768px) {
            #pwa-android {
                left: auto; right: 24px; bottom: 24px;
                border-radius: 16px; max-width: 380px;
                box-shadow: 0 4px 24px rgba(0,0,0,0.12);
            }
        }

        /* iOS guide overlay (full-screen) */
        #pwa-ios {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 9999;
            background: rgba(0,0,0,0.55);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            align-items: flex-end;
            justify-content: center;
        }
        #pwa-ios.show { display: flex; animation: fadeInBg 0.3s ease; }

        #pwa-ios-card {
            background: #fff;
            border-radius: 24px 24px 0 0;
            padding: 24px 24px max(24px, env(safe-area-inset-bottom));
            width: 100%; max-width: 480px;
            animation: slideUp 0.38s cubic-bezier(0.34,1.3,0.64,1);
        }
        #pwa-ios-card .pwa-header {
            display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
        }
        #pwa-ios-card .pwa-header img {
            width: 56px; height: 56px; border-radius: 14px;
            box-shadow: 0 4px 12px rgba(37,99,235,0.3);
        }
        #pwa-ios-card .pwa-header-text h3 {
            font-size: 1.1rem; font-weight: 700; color: #1e2533;
        }
        #pwa-ios-card .pwa-header-text p {
            font-size: 0.82rem; color: #64748b; margin-top: 2px;
        }
        #pwa-ios-card .pwa-steps {
            background: #f8faff; border-radius: 16px;
            padding: 16px 18px; margin-bottom: 18px;
        }
        #pwa-ios-card .pwa-step {
            display: flex; align-items: center; gap: 12px;
            padding: 10px 0;
        }
        #pwa-ios-card .pwa-step + .pwa-step {
            border-top: 1px solid #e9eef6;
        }
        #pwa-ios-card .step-num {
            width: 28px; height: 28px; border-radius: 50%;
            background: linear-gradient(135deg,#2563EB,#6D28D9);
            color: #fff; font-size: 0.82rem; font-weight: 700;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        #pwa-ios-card .step-text { font-size: 0.9rem; color: #2d3748; line-height: 1.4; }
        #pwa-ios-card .step-text em { font-style: normal; font-weight: 600; color: #2563EB; }
        #pwa-ios-card .step-icon {
            margin-left: auto; font-size: 1.3rem; flex-shrink: 0;
        }
        #pwa-dismiss-ios {
            width: 100%;
            padding: 13px;
            background: #f1f5f9; border: none; border-radius: 14px;
            color: #475569; font-size: 0.95rem; font-weight: 600;
            cursor: pointer;
        }

        @keyframes slideUp {
            from { transform: translateY(100%); opacity: 0; }
            to   { transform: translateY(0);    opacity: 1; }
        }
        @keyframes fadeInBg {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        /* ── Practice Mode ───────────────────────────────────────────────── */
        .prac-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 16px 20px 24px;
            max-width: 600px;
            margin: 0 auto;
            width: 100%;
            gap: 16px;
        }

        /* Progress bar row */
        .prac-progress {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
        }
        .prac-prog-track {
            flex: 1; height: 6px;
            background: rgba(0,0,0,0.06);
            border-radius: 99px;
            overflow: hidden;
        }
        .prac-prog-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--blue), var(--purple));
            border-radius: 99px;
            transition: width 0.6s cubic-bezier(.25,.46,.45,.94);
        }
        .prac-prog-fill.prac-prog-review {
            background: linear-gradient(90deg, var(--amber), #f59e0b);
        }
        .prac-prog-text {
            font-size: 0.75rem; font-weight: 600; color: var(--muted);
            min-width: 38px; text-align: right; white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }
        .prac-review-label {
            font-size: 0.68rem; font-weight: 700; color: var(--amber);
            text-transform: uppercase; letter-spacing: 0.03em;
            margin-right: 4px;
        }
        .prac-score {
            font-size: 0.78rem; font-weight: 700; color: var(--purple);
            min-width: 40px; text-align: right; white-space: nowrap;
            font-variant-numeric: tabular-nums;
            background: rgba(139,108,246,0.08);
            padding: 3px 8px; border-radius: 99px;
        }

        /* Question card */
        .prac-card {
            width: 100%;
            background: var(--surface);
            border-radius: 20px;
            padding: 32px 24px 28px;
            box-shadow: 0 2px 16px rgba(0,0,0,0.06);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            border: 1px solid var(--border);
            text-align: center;
            min-height: 180px;
        }
        /* Question type pill — color-coded by cognitive demand */
        .prac-type-label {
            font-size: 0.62rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            padding: 4px 14px;
            border-radius: 99px;
            background: rgba(79,143,247,0.10);
            color: var(--blue);
        }
        .prac-type-label.type-spelling,
        .prac-type-label.type-dictation {
            background: rgba(245,158,11,0.12);
            color: #b45309;
        }
        .prac-type-label.type-cloze {
            background: rgba(34,197,94,0.10);
            color: var(--green);
        }
        .prac-type-label.type-truefalse {
            background: rgba(139,108,246,0.10);
            color: var(--purple);
        }
        .prac-type-label.type-matching {
            background: rgba(20,184,166,0.10);
            color: #0d9488;
        }
        .prac-word {
            font-size: 2.4rem;
            font-weight: 800;
            color: var(--text);
            letter-spacing: -0.5px;
            line-height: 1.15;
        }
        .prac-zh       { font-size: 1.5rem; font-weight: 700; color: var(--text); line-height: 1.35; }
        .prac-ipa      { font-size: 0.88rem; color: var(--muted); letter-spacing: 0.02em; }
        .prac-example  { font-size: 0.84rem; color: var(--muted); font-style: italic; max-width: 94%; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.55; }
        .prac-hint     { font-size: 0.84rem; color: var(--muted); line-height: 1.5; }
        .prac-partial  { font-family: 'SF Mono', Menlo, 'Courier New', monospace; font-size: 1.2rem; color: var(--blue); letter-spacing: 4px; font-weight: 700; display: inline-block; padding: 4px 2px; }
        .prac-audio-prompt { margin: 6px 0; }
        .prac-zh-hint  { font-size: 1.05rem; color: var(--muted); font-weight: 600; }

        /* True/False pair display */
        .prac-tf-pair  { display: flex; flex-direction: column; align-items: center; gap: 4px; }
        .prac-tf-eq    { font-size: 1.4rem; color: var(--muted); font-weight: 300; line-height: 1; }

        /* Multiple-choice options */
        .prac-options  { width: 100%; display: flex; flex-direction: column; gap: 10px; }
        .prac-opt {
            width: 100%;
            padding: 16px 20px;
            border-radius: 16px;
            border: 1.5px solid var(--border);
            background: var(--surface);
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--text);
            cursor: pointer;
            text-align: left;
            transition: border-color 0.18s, background 0.18s, transform 0.1s, box-shadow 0.18s;
            line-height: 1.4;
            min-height: 52px;
            display: flex; justify-content: space-between; align-items: center;
            -webkit-tap-highlight-color: transparent;
        }
        .prac-opt:hover:not(:disabled) {
            border-color: rgba(79,143,247,0.5);
            background: rgba(79,143,247,0.04);
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        .prac-opt:active:not(:disabled) { transform: scale(0.98); box-shadow: none; }
        .prac-opt:disabled { cursor: default; }
        .prac-opt:focus, .prac-opt:focus-visible { outline: none; box-shadow: none; border-color: var(--border); background: var(--surface); }
        .prac-opt.correct  { border-color: var(--green) !important; background: rgba(34,197,94,0.10) !important; color: var(--green) !important; font-weight: 700; animation: prac-pop 0.32s ease; box-shadow: 0 0 0 3px rgba(34,197,94,0.12) !important; }
        .prac-opt.wrong    { border-color: var(--red)   !important; background: rgba(239,68,68,0.10)   !important; color: var(--red)   !important; animation: prac-shake 0.32s ease; box-shadow: 0 0 0 3px rgba(239,68,68,0.12) !important; }
        .prac-opt-icon { font-size: 1rem; font-weight: 800; flex-shrink: 0; margin-left: 8px; }
        .prac-opt-play { margin-right: 6px; font-size: 0.9rem; opacity: 0.7; cursor: pointer; flex-shrink: 0; }

        /* True/False buttons */
        .prac-tf-btns { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .prac-tf-btn {
            padding: 18px 12px;
            border-radius: 16px;
            border: 1.5px solid var(--border);
            background: var(--surface);
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.18s;
        }
        .prac-tf-true  { color: var(--green); border-color: rgba(34,197,94,0.3); }
        .prac-tf-false { color: var(--red); border-color: rgba(239,68,68,0.3); }
        .prac-tf-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
        .prac-tf-btn:active:not(:disabled){ transform: scale(0.97); }
        .prac-tf-btn:disabled { cursor: default; transform: none; box-shadow: none; }
        .prac-tf-btn:focus, .prac-tf-btn:focus-visible { outline: none; box-shadow: none; }
        /* truefalse reveal — show correct zh when answer is false */
        .prac-tf-zh-wrong { color: var(--red); text-decoration: line-through; opacity: 0.7; }
        .prac-tf-reveal { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 14px; border-radius: 10px; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2); animation: prac-pop 0.3s ease; }
        .prac-tf-reveal-arrow { color: var(--green); font-size: 1rem; }
        .prac-tf-reveal-label { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
        .prac-tf-reveal-zh { font-size: 1rem; font-weight: 600; color: var(--green); }
        .prac-tf-btn { display: flex; align-items: center; justify-content: center; gap: 8px; -webkit-tap-highlight-color: transparent; }
        .prac-tf-btn.correct { border-color: var(--green) !important; background: rgba(34,197,94,0.10) !important; color: var(--green) !important; animation: prac-pop 0.32s ease; box-shadow: 0 0 0 3px rgba(34,197,94,0.12) !important; }
        .prac-tf-btn.wrong   { border-color: var(--red)   !important; background: rgba(239,68,68,0.10)   !important; color: var(--red)   !important; animation: prac-shake 0.32s ease; box-shadow: 0 0 0 3px rgba(239,68,68,0.12) !important; }
        /* On touch-only devices, suppress sticky :hover after tap */
        @media (hover: none) {
            .prac-opt:hover:not(:disabled)    { border-color: var(--border); background: var(--surface); }
            .prac-tf-btn:hover:not(:disabled) { border-color: var(--border); background: var(--surface); transform: none; box-shadow: none; }
        }

        /* ── Read-aloud practice ─────────────────────────── */
        .prac-type-label.type-readaloud { background: rgba(245,158,11,0.12); color: #b45309; }
        .prac-ra-word { font-size: 2rem; font-weight: 700; letter-spacing: 0.02em; margin: 8px 0 4px; }
        .prac-ra-ipa  { font-size: 1rem; color: var(--muted); margin-bottom: 10px; }
        .prac-ra-play-btn {
            background: none;
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 8px 14px;
            font-size: 0.88rem;
            color: var(--text);
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .prac-ra-play-btn:hover { background: var(--surface-hover, var(--surface)); }
        .prac-ra-play-btn.playing {
            border-color: var(--blue);
            color: var(--blue);
            background: rgba(79, 143, 247, 0.08);
        }
        /* 声波波纹：3根小竖条 */
        .prac-ra-soundwave { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
        .prac-ra-soundwave span { display: block; width: 2px; border-radius: 2px; background: currentColor; }
        .prac-ra-soundwave span:nth-child(1) { height: 6px;  animation: sw 0.8s ease infinite 0s; }
        .prac-ra-soundwave span:nth-child(2) { height: 10px; animation: sw 0.8s ease infinite 0.15s; }
        .prac-ra-soundwave span:nth-child(3) { height: 6px;  animation: sw 0.8s ease infinite 0.3s; }
        @keyframes sw { 0%,100%{transform:scaleY(0.4)} 50%{transform:scaleY(1)} }

        /* ── Single-card read-aloud layout (两阶段) ────────── */
        .prac-ra-card {
            width: 100%;
            box-sizing: border-box;
            padding: 32px 24px 28px;
            border-radius: 20px;
            background: var(--card-bg, var(--surface));
            border: 1px solid var(--border);
            box-shadow: 0 2px 16px rgba(0,0,0,0.06);
            min-height: 180px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .prac-ra-header {
            display: flex;
            align-items: baseline;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: center;
        }
        .prac-ra-word {
            font-size: 2.2rem;
            font-weight: 700;
            letter-spacing: 0.01em;
        }
        .prac-ra-ipa {
            font-size: 1rem;
            color: var(--muted);
            font-weight: 500;
        }
        
        /* Phase 1: Listen */
        .prac-ra-listen {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
        }
        .prac-ra-listen-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .prac-ra-listen-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 20px;
            border-radius: 12px;
            border: 1.5px solid var(--blue);
            background: rgba(79,143,247,0.08);
            color: var(--blue);
            font-size: 0.95rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.15s;
        }
        .prac-ra-listen-btn:active { transform: scale(0.97); }
        .prac-ra-listen-btn.playing { background: rgba(79,143,247,0.15); }
        .prac-ra-slow-btn {
            padding: 10px 12px;
            border-radius: 10px;
            border: 1.5px solid var(--border);
            background: none;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.15s;
        }
        .prac-ra-slow-btn.active {
            background: rgba(79,143,247,0.1);
            border-color: var(--blue);
            color: var(--blue);
        }
        
        /* Phase 2: Recording */
        .prac-ra-recording {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }
        /* VAD 状态区：固定高度容器，防止录音/静音切换时布局抖动 */
        .prac-ra-vad-status {
            position: relative; width: 100%; height: 24px;
        }
        .prac-ra-vad-status .prac-ra-rec-label,
        .prac-ra-vad-status .prac-ra-vad-hint {
            position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
            text-align: center; transition: opacity 0.2s ease;
        }
        .prac-ra-vad-status .prac-ra-rec-label.is-hidden { opacity: 0; pointer-events: none; }
        .prac-ra-vad-status .prac-ra-vad-hint { opacity: 0; pointer-events: none; }
        .prac-ra-vad-status .prac-ra-vad-hint.is-visible { opacity: 1; pointer-events: auto; }
        .prac-ra-rec-label {
            font-size: 0.85rem;
            color: #ef4444;
            font-weight: 600;
        }
        .prac-ra-vad-hint {
            font-size: 0.82rem;
            color: var(--muted);
            font-weight: 600;
        }
        .prac-ra-done-btn {
            padding: 12px 28px;
            border-radius: 12px;
            border: none;
            background: linear-gradient(135deg, #22c55e, #16a34a);
            color: #fff;
            font-size: 0.95rem;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 6px 16px rgba(34,197,94,0.25);
        }
        .prac-ra-done-btn:active { transform: scale(0.97); }
        .prac-ra-relisten {
            padding: 8px 14px;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: none;
            font-size: 0.8rem;
            color: var(--muted);
            cursor: pointer;
        }
        
        /* Phase 3: Scoring */
        .prac-ra-scoring {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding: 20px;
        }
        
        /* Phase 4: Result */
        .prac-ra-result {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }
        .prac-ra-score-badge {
            font-size: 2.5rem;
            font-weight: 800;
            line-height: 1;
        }
        .prac-ra-score-badge.is-excellent { color: var(--green); }
        .prac-ra-score-badge.is-good { color: var(--blue); }
        .prac-ra-score-badge.is-fair { color: #f59e0b; }
        .prac-ra-score-badge.is-poor { color: var(--red); }
        .prac-ra-score-label {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text);
        }
        .prac-ra-heard {
            font-size: 0.85rem;
            color: var(--muted);
            background: var(--surface);
            padding: 6px 12px;
            border-radius: 8px;
        }
        .prac-ra-relisten-sm {
            padding: 8px 12px;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: none;
            font-size: 0.9rem;
            cursor: pointer;
        }

        /* 波形：高度过渡，非 recording 时收起 */
        .prac-ra-wave-area {
            height: 0;
            overflow: hidden;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            gap: 4px;
            transition: height 0.25s ease;
        }
        .prac-ra-wave-area.active { height: 40px; }
        .prac-ra-bar {
            width: 4px;
            background: var(--accent, #4f8ff7);
            border-radius: 2px;
            height: 16px;
        }
        .prac-ra-wave-area.active .prac-ra-bar {
            animation: pracRaWave 0.6s ease-in-out infinite;
        }
        .prac-ra-bar:nth-child(1) { animation-delay: 0s; }
        .prac-ra-bar:nth-child(2) { animation-delay: 0.1s; }
        .prac-ra-bar:nth-child(3) { animation-delay: 0.2s; }
        .prac-ra-bar:nth-child(4) { animation-delay: 0.3s; }
        .prac-ra-bar:nth-child(5) { animation-delay: 0.4s; }
        @keyframes pracRaWave {
            0%, 100% { transform: scaleY(1); }
            50% { transform: scaleY(2.2); }
        }

        /* 进度条：opacity 过渡，消除抖动 */
        .prac-ra-progress {
            height: 4px;
            transition: opacity 0.2s;
        }
        .prac-ra-progress-track {
            background: var(--border);
            border-radius: 2px;
            height: 100%;
        }
        .prac-ra-progress-fill {
            background: var(--accent, #4f8ff7);
            height: 100%;
            border-radius: 2px;
            transition: width 0.1s linear;
        }

        /* Footer 状态区 */
        .prac-ra-footer {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }
        .prac-ra-start {
            width: 100%;
            padding: 14px;
            border-radius: 14px;
            border: none;
            background: linear-gradient(135deg, #4f8ff7, #8b6cf6);
            color: #fff;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 10px 22px rgba(79,143,247,0.26);
            transition: opacity 0.15s ease, transform 0.12s ease;
        }
        .prac-ra-start:active { transform: scale(0.98); }
        .prac-ra-recording-hint {
            font-size: 0.84rem;
            color: #ef4444;
            font-weight: 700;
        }
        .prac-ra-stop {
            width: 100%;
            padding: 12px;
            border-radius: 14px;
            border: 1.5px solid rgba(239,68,68,0.24);
            background: rgba(239,68,68,0.08);
            color: #ef4444;
            font-size: 0.9rem;
            font-weight: 700;
            cursor: pointer;
        }

        /* Scoring spinner */
        .prac-ra-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid var(--border);
            border-top-color: var(--accent, #4f8ff7);
            border-radius: 50%;
            animation: pracRaSpin 0.6s linear infinite;
        }
        @keyframes pracRaSpin { to { transform: rotate(360deg); } }

        /* Result */
        .prac-ra-score-row {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .prac-ra-score {
            font-size: 2rem;
            font-weight: 800;
            line-height: 1;
        }
        .prac-ra-score.is-excellent { color: var(--green); }
        .prac-ra-score.is-good { color: var(--blue); }
        .prac-ra-score.is-fair { color: #f59e0b; }
        .prac-ra-score.is-poor { color: var(--red); }
        .prac-ra-heard {
            font-size: 0.88rem;
            color: var(--muted);
        }
        .prac-ra-advice {
            font-size: 0.82rem;
            line-height: 1.55;
            color: var(--muted);
        }
        .prac-ra-actions {
            display: flex;
            justify-content: center;
            gap: 10px;
        }
        .prac-ra-next {
            padding: 11px 24px;
            border-radius: 12px;
            border: none;
            background: linear-gradient(135deg, #4f8ff7, #8b6cf6);
            color: #fff;
            font-size: 0.9rem;
            font-weight: 700;
            cursor: pointer;
            transition: opacity 0.15s;
        }
        .prac-ra-next:active { opacity: 0.85; }
        .prac-ra-retry {
            min-width: 140px;
            padding: 11px 18px;
            border-radius: 12px;
            border: 1.5px solid var(--border);
            background: none;
            color: var(--text);
            font-size: 0.9rem;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.15s ease;
        }
        .prac-ra-retry:hover { background: var(--surface-hover, var(--surface)); }
        .prac-ra-error {
            font-size: 0.88rem;
            line-height: 1.55;
            color: var(--red);
            text-align: center;
        }

        /* Spelling */
        .prac-spell-wrap {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 12px;
            align-items: stretch;
        }
        .prac-spell-input {
            width: 100%;
            padding: 16px 20px;
            border-radius: 16px;
            border: 1.5px solid var(--border);
            background: var(--bg);
            font-size: 1.15rem;
            font-weight: 600;
            color: var(--text);
            outline: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
            text-align: center;
            letter-spacing: 0.06em;
            font-family: inherit;
        }
        .prac-spell-input::placeholder { color: var(--muted); opacity: 0.55; font-weight: 500; letter-spacing: 0.02em; }
        .prac-spell-input:focus  { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(79,143,247,0.12); background: var(--surface); }
        .prac-spell-input.correct{ border-color: var(--green); background: rgba(34,197,94,0.06); box-shadow: 0 0 0 4px rgba(34,197,94,0.12); }
        .prac-spell-input.wrong  { border-color: var(--red);   background: rgba(239,68,68,0.06); box-shadow: 0 0 0 4px rgba(239,68,68,0.12); }
        .prac-spell-input:disabled { cursor: default; opacity: 0.85; }
        .prac-submit-btn {
            padding: 15px 20px;
            background: linear-gradient(135deg, #5b9cf7, #4f8ff7);
            color: #fff;
            border: none;
            border-radius: 16px;
            font-size: 0.96rem;
            font-weight: 700;
            cursor: pointer;
            transition: opacity 0.18s, transform 0.12s, box-shadow 0.2s;
            box-shadow: 0 4px 14px rgba(79,143,247,0.25);
            letter-spacing: 0.02em;
        }
        .prac-submit-btn:hover  { box-shadow: 0 6px 20px rgba(79,143,247,0.35); transform: translateY(-1px); }
        .prac-submit-btn:active { opacity: 0.88; transform: scale(0.97); box-shadow: none; }
        .prac-correct-ans { font-size: 0.86rem; color: var(--muted); text-align: center; }
        .prac-correct-ans strong { color: var(--green); }
        /* Enhanced wrong-answer comparison for spelling/cloze/dictation */
        .prac-spell-cmp {
            display: flex; flex-direction: column; gap: 10px;
            padding: 16px 18px; border-radius: 16px; width: 100%;
            background: rgba(239,68,68,0.04);
            border: 1px solid rgba(239,68,68,0.12);
            animation: prac-pop 0.3s ease;
        }
        .prac-cmp-row { display: flex; align-items: center; gap: 10px; }
        .prac-cmp-label { font-size: 0.66rem; font-weight: 700; color: var(--muted); min-width: 50px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.04em; }
        .prac-cmp-wrong-text { font-size: 1rem; font-weight: 600; color: var(--red); text-decoration: line-through; opacity: 0.68; }
        .prac-cmp-correct-text { font-size: 1.35rem; font-weight: 800; letter-spacing: 0.04em; }
        .prac-cmp-audio-btn {
            display: inline-flex; align-items: center; justify-content: center;
            width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
            border: 1px solid rgba(79,143,247,0.20);
            background: rgba(79,143,247,0.08);
            color: var(--blue); font-size: 0.82rem; cursor: pointer; padding: 0;
            transition: background 0.15s, transform 0.1s;
         min-height: 44px; min-width: 44px; }
        .prac-cmp-audio-btn:hover  { background: rgba(79,143,247,0.16); transform: scale(1.08); }
        .prac-cmp-audio-btn:active { transform: scale(0.92); }
        .prac-cmp-audio-btn.playing { background: rgba(79,143,247,0.20); }
        .prac-cmp-ch-ok  { color: var(--green); }
        .prac-cmp-ch-bad { color: var(--red); text-decoration: underline; text-decoration-style: wavy; }
        .prac-cmp-sentence {
            font-size: 0.84rem; color: var(--text); opacity: 0.72; line-height: 1.55;
            font-style: italic; padding-top: 10px; margin-top: 2px;
            border-top: 1px solid rgba(239,68,68,0.10);
        }
        .prac-cmp-next-btn {
            margin-top: 6px; width: 100%; padding: 14px 18px; border-radius: 14px;
            border: none; cursor: pointer;
            background: linear-gradient(135deg, #5b9cf7, #4f8ff7); color: #fff;
            font-size: 0.94rem; font-weight: 700;
            display: flex; align-items: center; justify-content: center; gap: 6px;
            transition: transform 0.1s, opacity 0.15s, box-shadow 0.18s;
            box-shadow: 0 4px 14px rgba(79,143,247,0.22);
            letter-spacing: 0.01em;
        }
        .prac-cmp-next-btn:hover  { box-shadow: 0 6px 20px rgba(79,143,247,0.32); transform: translateY(-1px); }
        .prac-cmp-next-btn:active { transform: scale(0.97); opacity: 0.88; box-shadow: none; }
        .prac-skip-btn {
            display: block; margin: 16px auto 0; padding: 8px 28px;
            border: none; border-radius: 99px;
            background: transparent; color: var(--muted);
            font-size: 0.8rem; font-weight: 600;
            cursor: pointer; opacity: 0.6;
            transition: opacity 0.15s;
            -webkit-tap-highlight-color: transparent;
        }
        .prac-skip-btn:hover { opacity: 0.9; }
        .prac-skip-btn:active { opacity: 1; }

        /* Card slide transition */
        .prac-q-enter-active { transition: opacity 0.25s cubic-bezier(.4,0,.2,1), transform 0.25s cubic-bezier(.4,0,.2,1); }
        .prac-q-leave-active { transition: opacity 0.16s ease, transform 0.16s ease; }
        .prac-q-enter        { opacity: 0; transform: translateX(24px) scale(0.98); }
        .prac-q-leave-to     { opacity: 0; transform: translateX(-18px) scale(0.98); }

        /* Correct/wrong micro-animations */
        @keyframes prac-pop {
            0%   { transform: scale(1); }
            45%  { transform: scale(1.04); }
            100% { transform: scale(1); }
        }
        @keyframes prac-shake {
            0%, 100% { transform: translateX(0); }
            25%       { transform: translateX(-5px); }
            75%       { transform: translateX(5px); }
        }

        /* Practice done screen */
        .prac-done {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 16px;
            padding: 28px 20px 20px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        /* Practice done — score ring */
        .prac-ring-wrap {
            position: relative;
            width: 140px; height: 140px;
            animation: pracFadeUp .5s ease both;
        }
        @keyframes pracFadeUp {
            from { opacity: 0; transform: translateY(18px) scale(0.92); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        .prac-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
        .prac-ring-bg { fill: none; stroke: var(--border); stroke-width: 7; }
        .prac-ring-fill { fill: none; stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1); }
        .prac-ring-center {
            position: absolute; inset: 0;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
        }
        .prac-ring-pct { font-size: 2.4rem; font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
        .prac-ring-emoji { font-size: 1.15rem; margin-top: 2px; }
        .pct-green { color: var(--green); }
        .pct-amber { color: var(--amber); }
        .pct-red   { color: var(--red);   }
        /* Practice done — title + subtitle */
        .prac-done-title { font-size: 1.3rem; font-weight: 800; animation: pracFadeUp .5s .15s ease both; letter-spacing: -0.01em; }
        .prac-done-subtitle { font-size: 0.84rem; color: var(--muted); line-height: 1.5; animation: pracFadeUp .5s .25s ease both; }
        /* Practice done — stat pills */
        .prac-done-stats { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; animation: pracFadeUp .5s .3s ease both; }
        .prac-stat-pill {
            display: flex; align-items: center; gap: 6px;
            padding: 7px 15px; border-radius: 99px;
            font-size: 0.8rem; font-weight: 600;
            border: none; background: var(--surface); box-shadow: var(--shadow-sm);
        }
        .prac-stat-pill.good { color: var(--green); background: rgba(34,197,94,0.08); }
        .prac-stat-pill.bad  { color: var(--red);   background: rgba(239,68,68,0.08); }
        .prac-stat-pill.srs  { color: var(--blue);  background: rgba(79,143,247,0.08); }
        /* Practice done — review cards */
        .prac-review-section {
            width: 100%; text-align: left; padding-top: 18px;
            animation: pracFadeUp .5s .5s ease both;
        }
        .prac-review-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
        .prac-review-hd-text { font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
        .prac-review-hd-count { font-size: 0.72rem; font-weight: 700; background: rgba(239,68,68,0.10); color: var(--red); padding: 2px 8px; border-radius: 99px; }
        .prac-review-card {
            padding: 14px 16px; margin-bottom: 10px;
            border-radius: 14px; border: 1px solid var(--border);
            background: var(--surface);
            display: flex; flex-direction: column; gap: 6px;
            transition: box-shadow 0.18s;
        }
        .prac-review-card:hover { box-shadow: var(--shadow-sm); }
        .prac-review-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
        .prac-review-word { font-size: 1.02rem; font-weight: 700; color: var(--text); }
        .prac-review-pos  { font-size: 0.68rem; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; }
        .prac-review-ipa  { font-size: 0.78rem; color: var(--muted); font-style: italic; }
        .prac-review-audio {
            margin-left: auto; border: none; background: none; cursor: pointer;
            font-size: 1rem; padding: 4px 8px; border-radius: 8px;
            transition: .15s; color: var(--muted);
            -webkit-tap-highlight-color: transparent;
        }
        .prac-review-audio:hover { color: var(--blue); background: rgba(79,143,247,0.08); }
        .prac-review-zh   { font-size: 0.9rem; color: var(--blue); font-weight: 600; }
        .prac-review-ex   { font-size: 0.82rem; color: var(--muted); line-height: 1.55; font-style: italic; }
        /* ── Matching question ─────────────────────────────────────────── */
        .prac-match-wrap { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .prac-match-col  { display: flex; flex-direction: column; gap: 8px; }
        .prac-match-item {
            width: 100%; min-height: 50px; padding: 12px 10px;
            border-radius: 14px; border: 1.5px solid var(--border);
            background: var(--surface); color: var(--text);
            font-size: 0.86rem; font-weight: 600; cursor: pointer;
            text-align: center; line-height: 1.35;
            transition: border-color 0.18s, background 0.18s, opacity 0.35s, box-shadow 0.18s;
            -webkit-tap-highlight-color: transparent;
        }
        .prac-match-item:hover:not(:disabled)  { border-color: var(--blue); background: rgba(79,143,247,0.06); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
        .prac-match-item:focus, .prac-match-item:focus-visible { outline: none; box-shadow: none; }
        .prac-match-item.sel  { border-color: var(--blue); background: rgba(79,143,247,0.12); color: var(--blue); box-shadow: 0 0 0 3px rgba(79,143,247,0.10); }
        .prac-match-item.elim { opacity: 0.2; cursor: default; border-color: var(--green); background: rgba(34,197,94,0.08); pointer-events: none; }
        .prac-match-item.shake { animation: prac-shake 0.35s ease; border-color: var(--red) !important; background: rgba(239,68,68,0.10) !important; }

        /* ── IPA-to-word ───────────────────────────────────────────────── */
        .prac-ipa-big {
            font-size: 2.2rem; letter-spacing: .05em;
            color: var(--blue); margin: 16px 0 8px; font-weight: 500;
        }
        /* ── Word-bank-cloze chips ─────────────────────────────────────── */
        .prac-wb-chips {
            display: flex; flex-wrap: wrap; gap: 10px;
            justify-content: center; padding: 12px 16px;
            max-width: 480px; margin: 0 auto;
        }
        .prac-wb-chip {
            padding: 10px 22px; border-radius: 24px;
            border: 2px solid var(--blue);
            background: rgba(79, 143, 247, 0.08);
            color: var(--text); font-size: 1rem; font-weight: 600;
            cursor: pointer; transition: transform .12s, background .15s;
            -webkit-tap-highlight-color: transparent;
        }
        .prac-wb-chip:not(:disabled):hover { transform: translateY(-2px); background: rgba(79,143,247,0.15); }
        .prac-wb-chip.correct { border-color: var(--green); background: rgba(34,197,94,0.12); }
        .prac-wb-chip.wrong   { border-color: var(--red);   background: rgba(239,68,68,0.12); }
        /* ── Word-order zones ──────────────────────────────────────────── */
        .prac-wo-wrap { width: 100%; max-width: 480px; margin: 0 auto; padding: 0 16px; display: flex; flex-direction: column; gap: 10px; }
        .prac-wo-zone {
            min-height: 56px; border-radius: 12px;
            border: 2px dashed var(--border);
            padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start;
            transition: border-color .2s;
        }
        .prac-wo-answer { border-style: solid; border-color: var(--blue); }
        .prac-wo-answer.correct { border-color: var(--green); }
        .prac-wo-answer.wrong   { border-color: var(--red);   }
        .prac-wo-placeholder { color: var(--muted); font-size: .9rem; align-self: center; padding: 2px 0; }
        .prac-wo-token {
            padding: 7px 14px; border-radius: 8px;
            border: 1.5px solid var(--border);
            background: var(--surface); color: var(--text);
            font-size: .95rem; cursor: pointer; transition: transform .1s, background .12s;
            -webkit-tap-highlight-color: transparent;
        }
        .prac-wo-token:not(:disabled):hover { transform: scale(1.05); background: rgba(79,143,247,0.08); }
        .type-wbcloze   { color: #a855f7; }
        .type-wordorder { color: #f97316; }
        .type-ipa       { color: var(--blue); }
        [data-theme="dark"] .type-wbcloze   { color: #c084fc; }
        [data-theme="dark"] .type-wordorder { color: #fb923c; }

        /* Practice start button (done screen + header) */
        .btn-practice {
            background: linear-gradient(135deg, #8b6cf6, #7c3aed);
            color: #fff;
            border: none;
            padding: 14px 32px;
            border-radius: 14px;
            font-size: 0.94rem;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 4px 16px rgba(139,92,246,0.24);
            transition: box-shadow 0.18s, transform 0.12s;
            letter-spacing: 0.01em;
            -webkit-tap-highlight-color: transparent;
        }
        .btn-practice:hover  { box-shadow: 0 6px 22px rgba(139,92,246,0.35); transform: translateY(-1px); }
        .btn-practice:active { transform: scale(0.97); box-shadow: none; }

        /* ── Reading overlay ───────────────────────────────────────── */
        .reading-overlay {
            position: fixed; inset: 0; z-index: 200;
            background: var(--bg);
            display: flex; flex-direction: column;
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
            animation: rdSlideUp 0.35s cubic-bezier(.32,.72,0,1);
        }
        @keyframes rdSlideUp {
            from { transform: translateY(40px); opacity: 0; }
            to   { transform: translateY(0);    opacity: 1; }
        }
        .reading-hd {
            display: flex; align-items: center; justify-content: space-between;
            padding: 16px 20px; flex-shrink: 0;
            border-bottom: 0.5px solid rgba(0,0,0,0.06);
        }
        .reading-hd-title { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
        .reading-close {
            background: rgba(0,0,0,0.05);
            border: none; font-size: 1rem; width: 30px; height: 30px;
            border-radius: 50%; cursor: pointer; color: var(--muted);
            display: flex; align-items: center; justify-content: center;
            transition: background 0.15s, color 0.15s;
            line-height: 1;
         min-height: 44px; min-width: 44px; }
        .reading-close:hover { background: rgba(0,0,0,0.08); color: var(--text); }
        .reading-body {
            --reading-pad-x: 22px;
            flex: 1; overflow-y: auto;
            padding: 24px var(--reading-pad-x) 60px;
            -webkit-overflow-scrolling: touch;
            display: flex; flex-direction: column; gap: 16px;
            scroll-behavior: smooth;
        }
        .reading-loading {
            display: flex; flex-direction: column; align-items: center;
            gap: 14px; padding: 72px 0 48px; text-align: center;
            animation: rdContentFadeIn .4s ease both;
        }
        @keyframes rdContentFadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .reading-spinner {
            width: 32px; height: 32px; border: 2.5px solid var(--border);
            border-top-color: var(--blue); border-radius: 50%;
            animation: spin 0.8s cubic-bezier(.4,.15,.6,.85) infinite; margin-bottom: 4px;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        .reading-loading-quote {
            font-size: 0.85rem; color: var(--muted); line-height: 1.5;
            font-style: italic; max-width: 320px; text-align: center;
            padding: 0 8px;
        }
        .reading-loading-quote-author {
            font-size: 0.75rem; font-style: normal; font-weight: 600;
            color: var(--blue); opacity: 0.8;
        }
        .quote-fade-enter-active, .quote-fade-leave-active {
            transition: opacity 0.4s ease, transform 0.4s ease;
        }
        .quote-fade-enter { opacity: 0; transform: translateY(8px); }
        .quote-fade-leave-to { opacity: 0; transform: translateY(-8px); }
        .reading-loading-icon-wrap {
            width: 56px; height: 56px;
            background: rgba(79,143,247,0.08);
            border-radius: 16px;
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 4px;
        }
        .reading-loading-main { font-size: 1rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
        .reading-loading-sub  { font-size: 0.82rem; color: var(--muted); line-height: 1.4; }
        .reading-loading-preview {
            display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
            max-width: 320px; margin-top: 8px;
        }
        .reading-loading-chip {
            display: inline-block;
            font-size: 0.72rem; font-weight: 600; color: var(--blue);
            background: rgba(79,143,247,0.08);
            padding: 3px 10px; border-radius: 12px;
            animation: rdChipAppear .3s ease both;
        }
        .reading-loading-more {
            color: var(--muted);
            background: var(--surface);
        }
        @keyframes rdChipAppear {
            from { opacity: 0; transform: scale(0.8); }
            to   { opacity: 1; transform: scale(1); }
        }
        /* History */
        .reading-hist-btn {
            background: none; border: none; cursor: pointer;
            color: var(--muted); font-size: 0.8rem; padding: 6px 12px;
            border-radius: 8px; white-space: nowrap;
            transition: background 0.15s, color 0.15s;
        }
        .reading-hist-btn:hover  { background: rgba(125, 138, 163, 0.1); color: var(--text); }
        .reading-hist-btn.active { color: var(--blue); background: rgba(79, 143, 247, 0.08); }
        .reading-hist-empty {
            text-align: center; color: var(--muted); font-size: 0.88rem; padding: 64px 0;
            line-height: 1.6;
        }
        .reading-hist-item {
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 16px; padding: 16px 18px; cursor: pointer;
            transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
        }
        .reading-hist-item:hover { border-color: rgba(79, 143, 247, 0.4); box-shadow: 0 2px 12px rgba(0,0,0,0.06); transform: translateY(-1px); }
        .reading-hist-item:active { transform: scale(0.98); }
        .reading-hist-title {
            font-size: 0.92rem; font-weight: 600; color: var(--text);
            margin-bottom: 6px; line-height: 1.4;
            overflow: hidden; display: -webkit-box;
            -webkit-line-clamp: 1; -webkit-box-orient: vertical;
        }
        .reading-hist-meta {
            display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
        }
        .reading-hist-date   { font-size: 0.77rem; color: var(--muted); font-variant-numeric: tabular-nums; }
        .reading-hist-deck   {
            font-size: 0.68rem; background: var(--blue); color: #fff;
            padding: 2px 8px; border-radius: 20px; font-weight: 700; letter-spacing: 0.01em;
        }
        .reading-hist-wcount { font-size: 0.77rem; color: var(--muted); margin-left: auto; }
        .reading-hist-preview {
            font-size: 0.85rem; color: var(--text); line-height: 1.6;
            overflow: hidden; display: -webkit-box;
            -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        }
        /* ── URL Import Panel ───────────────────────────────────── */
        .url-import-panel {
            background: var(--surface); border: 1.5px solid var(--border);
            border-radius: 16px; padding: 20px; margin-bottom: 16px;
            animation: rdContentFadeIn .3s ease both;
        }
        .url-import-title {
            font-size: 0.95rem; font-weight: 700; color: var(--text);
            margin-bottom: 4px;
        }
        .url-import-desc {
            font-size: 0.8rem; color: var(--muted); margin-bottom: 14px;
            line-height: 1.5;
        }
        .url-import-input-row {
            display: flex; gap: 8px; align-items: stretch;
        }
        .url-import-input {
            flex: 1; min-width: 0;
            padding: 11px 14px; border: 1.5px solid var(--border);
            border-radius: 12px; font-size: 0.88rem; color: var(--text);
            background: var(--bg); outline: none;
            transition: border-color 0.2s;
        }
        .url-import-input:focus {
            border-color: var(--blue);
        }
        .url-import-input::placeholder {
            color: var(--muted); opacity: 0.7;
        }
        .url-import-submit {
            padding: 10px 18px; border: none; border-radius: 12px;
            background: linear-gradient(135deg, #4f8ff7, #6ca6ff);
            color: #fff; font-size: 0.85rem; font-weight: 700;
            cursor: pointer; white-space: nowrap;
            transition: opacity 0.2s, transform 0.15s;
        }
        .url-import-submit:active { transform: scale(0.96); }
        .url-import-submit:disabled {
            opacity: 0.45; cursor: not-allowed;
        }
        .url-import-loading {
            display: flex; flex-direction: column; align-items: center;
            gap: 10px; padding: 18px 0;
        }
        .url-import-spinner {
            width: 32px; height: 32px;
            border: 3px solid var(--border);
            border-top-color: var(--blue);
            border-radius: 50%;
            animation: urlImportSpin 0.8s linear infinite;
        }
        @keyframes urlImportSpin {
            to { transform: rotate(360deg); }
        }
        .url-import-phase {
            font-size: 0.88rem; font-weight: 600; color: var(--text);
            animation: urlImportPhasePulse 1.5s ease-in-out infinite;
        }
        @keyframes urlImportPhasePulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.55; }
        }
        .url-import-url-preview {
            font-size: 0.75rem; color: var(--muted);
            max-width: 260px; overflow: hidden; text-overflow: ellipsis;
            white-space: nowrap;
        }
        .url-import-error {
            display: flex; align-items: flex-start; gap: 6px;
            margin-top: 10px; padding: 10px 14px;
            background: rgba(240, 80, 80, 0.08);
            border-radius: 10px;
            font-size: 0.82rem; color: var(--red); line-height: 1.5;
        }
        .url-import-error-icon { flex-shrink: 0; }
        .reading-hist-source-badge {
            font-size: 0.68rem; background: rgba(79, 143, 247, 0.12); color: var(--blue);
            padding: 2px 8px; border-radius: 20px; font-weight: 600;
        }
        /* ── URL Import Dark Mode ────────────────────────────────── */
        [data-theme="dark"] .url-import-panel {
            background: rgba(255,255,255,0.04);
            border-color: rgba(255,255,255,0.1);
        }
        [data-theme="dark"] .url-import-input {
            background: rgba(255,255,255,0.06);
            border-color: rgba(255,255,255,0.12);
            color: var(--text);
        }
        [data-theme="dark"] .url-import-error {
            background: rgba(240, 80, 80, 0.12);
        }
        [data-theme="dark"] .reading-hist-source-badge {
            background: rgba(79, 143, 247, 0.18);
        }

        /* ── Reading Import Overlay (standalone) ─────────────── */
        .reading-import-overlay {
            position: fixed; inset: 0; z-index: 210;
            background: var(--bg);
            display: flex; flex-direction: column;
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
            animation: rdSlideUp 0.35s cubic-bezier(.32,.72,0,1);
        }
        .reading-import-hd {
            display: flex; align-items: center; justify-content: space-between;
            padding: 14px 20px; flex-shrink: 0;
            border-bottom: 0.5px solid rgba(0,0,0,0.06);
        }
        .reading-import-hd-title {
            font-size: 1.05rem; font-weight: 700; color: var(--text);
            letter-spacing: -0.01em;
        }
        .reading-import-body {
            flex: 1; min-height: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 24px 22px 60px;
            display: flex; flex-direction: column; gap: 20px;
        }
        .reading-import-body .url-import-panel {
            border: none; padding: 0; background: none;
        }
        .reading-import-recent-title {
            font-size: 0.82rem; font-weight: 700; color: var(--muted);
            text-transform: uppercase; letter-spacing: 0.03em;
            margin-bottom: 8px;
        }
        .reading-import-recent-item {
            display: flex; align-items: center; justify-content: space-between;
            padding: 14px 16px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s;
            margin-bottom: 8px;
        }
        .reading-import-recent-item:active {
            background: var(--hover);
        }
        .reading-import-recent-name {
            font-size: 0.88rem; font-weight: 600; color: var(--text);
            flex: 1; min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            margin-right: 12px;
        }
        .reading-import-recent-date {
            font-size: 0.75rem; color: var(--muted);
            flex-shrink: 0;
        }
        @media (min-width: 768px) {
            .reading-import-body { max-width: 520px; margin: 0 auto; width: 100%; }
        }
        /* Dark mode */
        [data-theme="dark"] .reading-import-hd {
            border-bottom-color: rgba(255,255,255,0.08);
        }
        [data-theme="dark"] .reading-import-recent-item {
            background: rgba(255,255,255,0.04);
            border-color: rgba(255,255,255,0.1);
        }
        [data-theme="dark"] .reading-import-recent-item:active {
            background: rgba(255,255,255,0.08);
        }

        .reading-error {
            display: flex; flex-direction: column; align-items: center;
            gap: 12px; padding: 56px 0; text-align: center;
            animation: rdContentFadeIn .4s ease both;
        }
        .reading-error-icon { font-size: 2.4rem; line-height: 1; }
        .reading-error-msg  { font-size: 0.9rem; color: var(--red); line-height: 1.6; max-width: 280px; }
        .reading-regen {
            padding: 11px 24px; border: 1.5px solid var(--border);
            color: var(--muted); background: var(--surface); border-radius: 12px;
            font-weight: 600; cursor: pointer; font-size: 0.85rem;
            transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.15s;
        }
        .reading-regen:hover { border-color: var(--blue); color: var(--blue); background: rgba(79, 143, 247, 0.05); }
        .reading-regen:active { transform: scale(0.96); }
        /* Header button row */
        .reading-hd-btns { display: flex; align-items: center; gap: 8px; }
        /* Bilingual toggle bar (below title) */
        .reading-bilingual-bar {
            display: contents;
        }
        /* Bilingual toggle button */
        .reading-bilingual-btn {
            display: inline-flex; align-items: center; gap: 6px;
            background: var(--surface); border: 1.5px solid var(--border);
            border-radius: 20px; padding: 7px 16px; cursor: pointer;
            color: var(--muted); font-size: 0.82rem; font-weight: 600;
            transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
            white-space: nowrap;
            -webkit-tap-highlight-color: transparent;
        }
        .reading-bilingual-btn:hover  { border-color: var(--blue); color: var(--text); }
        .reading-bilingual-btn:active { transform: scale(0.95); }
        .reading-bilingual-btn.active {
            border-color: var(--blue); background: rgba(79,143,247,0.10);
            color: var(--blue); box-shadow: 0 2px 10px rgba(79,143,247,0.15);
        }
        .rdb-icon  { font-size: 1.05rem; line-height: 1; }
        .rdb-label { font-size: 0.78rem; }
        /* Article text */
        /* ── 阅读正文 ── */
        .reading-article {
            font-size: 1.08rem;
            line-height: 1.9;
            color: var(--text);
            letter-spacing: 0.005em;
            /* 移动端英文用无衬线更清晰，减少渲染卡顿 */
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
            animation: rdContentFadeIn .5s .1s ease both;
            /* 禁用 justify：移动端窄屏 justify 会产生难看的字间距 */
            text-align: left;
        }
        .rd-para {
            margin-bottom: 1.5em;
            line-height: 1.9;
            /* 首段不缩进，后续段落保持一致 */
        }
        .rd-para:first-child { margin-top: 0; }
        .rd-para:last-child { margin-bottom: 0; }
        .art-timestamp { color: var(--muted); font-size: 0.78em; font-weight: 600; margin-right: 6px; }
        /* All words are subtly interactive */
        .rd-word {
            cursor: pointer; border-radius: 3px;
            transition: background 0.15s, color 0.15s;
            /* Vertical padding expands tap target on large-screen / touch devices
               where line-height is tall and words are easy to miss */
            padding: 3px 2px; margin: -3px 0;
            display: inline-block;
        }
        .rd-word:hover { background: rgba(79,143,247,0.10); }
        .rd-word:active { background: rgba(79,143,247,0.18); }
        /* Key vocab words — highlighted */
        .vocab-hl {
            font-weight: 700;
            color: var(--blue);
            font-style: normal;
            cursor: pointer;
            text-decoration: none;
            background: rgba(79,143,247,0.08);
            border-radius: 4px;
            padding: 1px 3px;
            margin: 0 -1px;
            transition: background 0.15s, box-shadow 0.15s;
        }
        .vocab-hl:hover { background: rgba(79,143,247,0.16); box-shadow: 0 1px 4px rgba(79,143,247,0.15); }
        .vocab-hl:active { background: rgba(79,143,247,0.22); }
        /* ── 文章标题 ── */
        .reading-story-title {
            font-size: 1.45rem;
            font-weight: 800;
            color: var(--text);
            line-height: 1.3;
            margin: 0 0 20px 0;
            padding-bottom: 20px;
            border-bottom: none;
            font-style: normal;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            letter-spacing: -0.02em;
            position: relative;
            animation: rdContentFadeIn .4s ease both;
        }
        .reading-story-title::after {
            content: '';
            position: absolute; bottom: 0; left: 0;
            width: 36px; height: 2.5px;
            background: linear-gradient(90deg, var(--blue), rgba(79,143,247,0.0));
            border-radius: 2px;
        }
        /* ── 工具栏 — 更轻薄，不压缩阅读区 ── */
        .reading-toolbar {
            position: sticky; top: 0; z-index: 10;
            display: flex; align-items: center; gap: 8px;
            margin: 0 calc(-1 * var(--reading-pad-x));
            padding: 8px var(--reading-pad-x) 10px;
            background: rgba(245, 247, 250, 0.92);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 0.5px solid rgba(0,0,0,0.05);
            animation: rdContentFadeIn .4s ease both;
        }
        .reading-toolbar::before {
            content: ''; position: absolute; top: -24px; left: 0; right: 0;
            height: 24px; background: var(--bg);
        }
        .reading-audio-btn {
            display: inline-flex; align-items: center; gap: 5px;
            padding: 7px 14px; border-radius: 99px;
            background: rgba(79,143,247,0.08);
            border: 1px solid rgba(79,143,247,0.18);
            color: var(--blue); font-size: .78rem; font-weight: 600;
            cursor: pointer; transition: background .15s, transform .1s;
            -webkit-tap-highlight-color: transparent;
            white-space: nowrap;
        }
        .reading-audio-btn:hover { background: rgba(79,143,247,0.14); }
        .reading-audio-btn:active { transform: scale(.96); }
        .reading-audio-btn:disabled { opacity: .5; cursor: default; }
        .reading-audio-btn.ra-restart {
            background: var(--surface);
            border-color: var(--border);
            color: var(--muted);
        }
        .reading-audio-btn.ra-restart:hover { border-color: var(--blue); color: var(--blue); }
        .ra-icon { font-size: .9rem; }
        .ra-spinner {
            width: 14px; height: 14px; border-radius: 50%;
            border: 2px solid rgba(79,143,247,0.25);
            border-top-color: var(--blue);
            animation: ra-spin .8s linear infinite;
        }
        @keyframes ra-spin { to { transform: rotate(360deg); } }
        /* ── 点击提示 — 更低调，不争版面 ── */
        .reading-tap-hint {
            font-size: 0.72rem;
            color: var(--muted);
            text-align: center;
            padding: 5px 10px;
            opacity: 0.7;
            line-height: 1.4;
            /* 去掉背景框，不占视觉权重 */
            background: none;
            border: none;
            border-radius: 0;
        }
        /* Bilingual view */
        .rd-bi-pair {
            display: flex; flex-direction: column; gap: 6px;
            padding: 14px 16px; border-radius: 14px;
            border-left: 3px solid var(--blue);
            background: var(--surface);
            margin-bottom: 10px;
            transition: box-shadow 0.2s;
        }
        .rd-bi-pair:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
        .rd-bi-en {
            font-size: 1.02rem; line-height: 1.75; color: var(--text);
            margin: 0; letter-spacing: 0.005em;
        }
        .rd-bi-zh {
            font-size: 0.86rem; line-height: 1.55; color: var(--muted);
            margin: 0; font-style: normal;
        }
        /* Word list chips */
        /* ── 本文词汇列表 ── */
        .reading-word-list {
            padding: 18px 0 0;
            border-top: 1px solid var(--border);
            animation: rdContentFadeIn .5s .2s ease both;
        }
        .reading-wl-label {
            font-size: 0.7rem; font-weight: 700; color: var(--muted);
            margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.08em;
            display: flex; align-items: center; gap: 8px;
        }
        .reading-wl-label::before {
            content: ''; flex: 1; height: 1px;
            background: var(--border);
        }
        .reading-wl-chips {
            display: flex; flex-wrap: wrap; gap: 7px;
        }
        .reading-wl-chip {
            display: inline-flex; align-items: baseline; gap: 5px;
            background: rgba(79,143,247,0.06);
            border: 1px solid rgba(79,143,247,0.15);
            border-radius: 20px; padding: 5px 12px; font-size: 0.8rem;
            transition: border-color 0.15s, background 0.15s;
        }
        .reading-wl-chip:hover {
            background: rgba(79,143,247,0.12);
            border-color: rgba(79,143,247,0.3);
        }
        .reading-wl-chip strong { color: var(--blue); font-weight: 700; }
        .reading-wl-chip span   { color: var(--muted); font-size: 0.75rem; }
        /* Actions row (regen + done) */
        .reading-actions {
            display: flex; flex-direction: column; gap: 10px;
            animation: rdContentFadeIn .5s .3s ease both;
        }
        .reading-done-btn {
            width: 100%; padding: 17px 20px; border-radius: 18px; border: none;
            cursor: pointer;
            background: linear-gradient(135deg, #34d058 0%, #22c55e 40%, #16a34a 100%);
            color: #fff;
            display: flex; align-items: center; gap: 14px; text-align: left;
            transition: transform 0.2s cubic-bezier(.32,.72,0,1), box-shadow 0.25s;
            box-shadow: 0 4px 18px rgba(34,197,94,0.25);
            -webkit-tap-highlight-color: transparent;
        }
        .reading-done-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(34,197,94,0.35); }
        .reading-done-btn:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(34,197,94,0.18); }
        .reading-done-btn-icon  { font-size: 1.5rem; flex-shrink: 0; line-height: 1; }
        .reading-done-btn-text  { flex: 1; display: flex; flex-direction: column; gap: 3px; }
        .reading-done-btn-title { font-size: 0.95rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
        .reading-done-btn-hint  { font-size: 0.73rem; opacity: 0.88; line-height: 1.35; }
        .reading-done-btn-arrow { font-size: 1.2rem; flex-shrink: 0; opacity: 0.85; transition: transform 0.2s cubic-bezier(.32,.72,0,1); }
        .reading-done-btn:hover .reading-done-btn-arrow { transform: translateX(4px); }
        /* ── Mastery Quiz overlay (D5) ────────────────────────── */
        .mastery-quiz-overlay {
            position: absolute; inset: 0; z-index: 20;
            background: rgba(0,0,0,0.5);
            display: flex; align-items: center; justify-content: center;
            padding: 16px;
        }
        .mastery-quiz-card {
            background: var(--surface);
            border-radius: 20px;
            padding: 24px 20px;
            max-width: 420px; width: 100%;
            box-shadow: var(--shadow-lg);
        }
        .mastery-quiz-header {
            display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
        }
        .mastery-quiz-badge {
            background: var(--blue); color: #fff;
            font-size: 0.72rem; font-weight: 700;
            padding: 3px 10px; border-radius: 20px;
        }
        .mastery-quiz-title {
            font-weight: 700; font-size: 0.95rem; color: var(--text);
        }
        .mastery-quiz-sentence {
            background: var(--surface-soft);
            border-radius: 14px; padding: 14px 16px;
            font-size: 0.92rem; line-height: 1.65; color: var(--text);
            margin-bottom: 12px;
        }
        .mq-hl { color: var(--blue); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(75,132,243,0.3); }
        .mastery-quiz-prompt {
            font-size: 0.82rem; color: var(--muted); margin-bottom: 14px; line-height: 1.5;
        }
        .mastery-quiz-options {
            display: flex; flex-direction: column; gap: 8px;
        }
        .mastery-quiz-opt {
            width: 100%; padding: 12px 16px; border-radius: 14px;
            border: 1.5px solid var(--border);
            background: var(--surface); color: var(--text);
            font-size: 0.88rem; text-align: left; cursor: pointer;
            min-height: 44px;
            transition: border-color 0.2s, background 0.2s;
        }
        .mastery-quiz-opt:hover:not(:disabled) { border-color: var(--blue); background: rgba(75,132,243,0.05); }
        .mastery-quiz-opt.mq-correct { border-color: var(--green); background: rgba(43,200,102,0.1); color: var(--green); font-weight: 600; }
        .mastery-quiz-opt.mq-wrong { border-color: var(--red); background: rgba(240,80,80,0.08); color: var(--red); }
        .mastery-quiz-opt.mq-dim { opacity: 0.45; }
        .mastery-quiz-opt:disabled { cursor: default; }
        .mastery-quiz-feedback {
            margin-top: 14px; display: flex; align-items: center; justify-content: space-between;
        }
        .mq-fb-correct { color: var(--green); font-weight: 700; font-size: 0.9rem; }
        .mq-fb-wrong { color: var(--red); font-size: 0.82rem; }
        .mastery-quiz-next {
            background: var(--blue); color: #fff; border: none;
            padding: 10px 22px; border-radius: 12px; font-weight: 600;
            font-size: 0.85rem; cursor: pointer; flex-shrink: 0;
            min-height: 44px;
            transition: transform 0.15s;
        }
        .mastery-quiz-next:hover { transform: scale(1.04); }
        .mastery-quiz-next:active { transform: scale(0.97); }
        /* dark mode */
        [data-theme="dark"] .mastery-quiz-card { background: #1a2233; }
        [data-theme="dark"] .mastery-quiz-sentence { background: rgba(255,255,255,0.06); }
        [data-theme="dark"] .mastery-quiz-opt { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
        [data-theme="dark"] .mastery-quiz-opt:hover:not(:disabled) { background: rgba(75,132,243,0.12); border-color: var(--blue); }
        /* ── Word reveal panel (bottom of reading overlay) ─────── */
        .rd-popup {
            flex-shrink: 0;
            display: flex; flex-direction: column; gap: 10px;
            padding: 14px 18px;
            padding-bottom: calc(14px + env(safe-area-inset-bottom));
            background: rgba(255,255,255,0.92);
            backdrop-filter: saturate(180%) blur(20px);
            -webkit-backdrop-filter: saturate(180%) blur(20px);
            border-top: 0.5px solid rgba(79,143,247,0.20);
            box-shadow: 0 -4px 24px rgba(0,0,0,.08);
        }
        .rd-popup-row1 {
            display: flex; align-items: center; gap: 10px;
        }
        .rd-popup-left {
            flex: 1; min-width: 0;
            display: flex; flex-direction: column; gap: 4px;
        }
        .rd-popup-word {
            font-weight: 800; font-size: 1.1rem; color: var(--text);
            min-width: 0; letter-spacing: -0.01em;
            word-break: break-word;
        }
        .rd-popup-word.rd-popup-vocab { color: var(--blue); }
        .rd-popup-deck-tags {
            display: flex; flex-wrap: wrap; gap: 4px;
        }
        .rd-deck-tag {
            font-size: 0.6rem; font-weight: 600; line-height: 1;
            padding: 2px 6px; border-radius: 4px;
            background: rgba(79,143,247,0.08);
            color: var(--blue); white-space: nowrap;
        }
        .rd-popup-actions {
            display: flex; align-items: center; gap: 6px; flex-shrink: 0;
        }
        .rd-popup-body {
            display: flex; flex-direction: column; gap: 3px;
        }
        .rd-popup-pos {
            font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
            color: var(--blue); background: rgba(79,143,247,0.10);
            border-radius: 4px; padding: 1px 6px;
            display: inline-block; align-self: flex-start; line-height: 1.7;
        }
        .rd-popup-meaning {
            font-size: 0.92rem; color: var(--muted);
            line-height: 1.5; min-width: 0;
            word-break: break-word;
        }
        .rd-popup-fav {
            background: none; border: none; cursor: pointer;
            font-size: 1.15rem; padding: 4px 6px; flex-shrink: 0; color: var(--muted);
            border-radius: 8px; transition: color 0.15s;
        }
        .rd-popup-fav.active { color: #f59e0b; }
        .rd-popup-fav:hover { color: #f59e0b; }
        .rd-popup-audio {
            background: rgba(79, 143, 247, 0.1);
            border: none; cursor: pointer;
            font-size: 1.05rem; padding: 6px 8px; flex-shrink: 0;
            border-radius: 8px; transition: background 0.15s, transform 0.12s;
        }
        .rd-popup-audio:hover { background: rgba(79, 143, 247, 0.18); }
        .rd-popup-audio:active { transform: scale(0.9); }
        .rd-popup-shadow {
            background: rgba(16, 185, 129, 0.10);
            border: none; cursor: pointer;
            font-size: 1.05rem; padding: 6px 8px; flex-shrink: 0;
            border-radius: 8px; transition: background 0.15s, transform 0.12s;
        }
        .rd-popup-shadow:hover { background: rgba(16, 185, 129, 0.18); }
        .rd-popup-shadow:active { transform: scale(0.9); }
        .rd-popup-close {
            background: rgba(125, 138, 163, 0.1);
            border: none; cursor: pointer;
            color: var(--muted); font-size: 0.9rem; padding: 6px 8px; width: 28px; height: 28px;
            flex-shrink: 0; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            transition: background 0.15s, color 0.15s;
         min-height: 44px; min-width: 44px; }
        .rd-popup-close:hover { background: rgba(125, 138, 163, 0.18); color: var(--text); }
        /* Transition for popup */
        .rd-popup-enter-active, .rd-popup-leave-active { transition: transform 0.22s cubic-bezier(.32,.72,0,1), opacity 0.22s; }
        .rd-popup-enter, .rd-popup-leave-to { transform: translateY(100%); opacity: 0; }
        .btn-reading {
            width: 100%; padding: 15px;
            background: linear-gradient(135deg, #34d058, #16a34a);
            color: #fff; border: none; border-radius: 16px;
            font-size: 0.95rem; font-weight: 700; cursor: pointer; margin-top: 4px;
            box-shadow: 0 4px 18px rgba(22,163,74,0.22);
            transition: box-shadow 0.25s, transform 0.2s cubic-bezier(.32,.72,0,1);
            -webkit-tap-highlight-color: transparent;
            letter-spacing: -0.01em;
        }
        .btn-reading:hover  { box-shadow: 0 8px 28px rgba(22,163,74,0.35); transform: translateY(-2px); }
        .btn-reading:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(22,163,74,0.15); }

        /* ── Reading: small screen ────────────────────────────── */
        @media (max-width: 390px) {
            .reading-body       { --reading-pad-x: 18px; padding: 20px var(--reading-pad-x) 32px; }
            .reading-article    { font-size: 1.02rem; line-height: 1.78; }
            .rd-bi-en           { font-size: 0.93rem; }
            .rd-bi-zh           { font-size: 0.82rem; }
            .reading-bilingual-btn { padding: 5px 10px; }
            .rdb-label          { display: none; }  /* show icon only on tiny screens */
            .reading-story-title { font-size: 1.15rem; }
            .reading-wl-chips { gap: 6px; }
            .reading-wl-chip { padding: 4px 10px; font-size: 0.76rem; }
        }
        /* ── Reading: desktop / wide screen ─────────────────── */
        @media (min-width: 680px) {
            .reading-body       { --reading-pad-x: 40px; max-width: 680px; margin: 0 auto; padding: 32px var(--reading-pad-x) 48px; }
            .reading-article    { font-size: 1.18rem; line-height: 1.9; }
            .rd-bi-pair         { padding: 14px 20px; border-radius: 16px; }
            .rd-bi-en           { font-size: 1.05rem; }
            .rd-bi-zh           { font-size: 0.93rem; }
            .reading-hd         { max-width: 680px; margin: 0 auto; }
            .reading-stepper    { max-width: 680px; margin: 0 auto; }
            .reading-story-title { font-size: 1.4rem; }
        }
        /* ── Responsive adjustments for practice ─────────────── */
        @media (max-width: 390px) {
            .prac-area     { padding: 14px 16px 16px; gap: 12px; }
            .prac-word     { font-size: 2rem; }
            .prac-zh       { font-size: 1.25rem; }
            .prac-opt      { font-size: 0.86rem; padding: 13px 14px; }
            .prac-tf-btn   { font-size: 0.92rem; padding: 15px 8px; }
            .prac-card     { padding: 22px 18px 20px; gap: 12px; }
            .prac-spell-input { padding: 14px 16px; font-size: 1.05rem; }
            .prac-submit-btn  { padding: 14px 16px; }
            .prac-partial  { font-size: 1.05rem; letter-spacing: 3px; }
        }
        /* ── Skeleton loading screen ─────────────────────────────────────── */
        @keyframes skelShimmer {
            0%   { background-position: -200% 0; }
            100% { background-position:  200% 0; }
        }
        .card-skeleton {
            width: 100%; max-width: 480px; min-height: 320px;
            border-radius: var(--r); background: var(--surface);
            display: flex; flex-direction: column; align-items: center;
            padding: 0 24px 32px;
        }
        .skel-line {
            border-radius: 8px; flex-shrink: 0;
            /* Light mode: dark shimmer on white surface */
            background: linear-gradient(90deg,
                rgba(0,0,0,.06) 25%,
                rgba(0,0,0,.11) 50%,
                rgba(0,0,0,.06) 75%);
            background-size: 200% 100%;
            animation: skelShimmer 1.4s ease-in-out infinite;
        }
        /* Dark mode: light shimmer on dark surface */
        @media (prefers-color-scheme: dark) {
            html:not([data-theme]) .skel-line {
                background: linear-gradient(90deg,
                    rgba(255,255,255,.06) 25%,
                    rgba(255,255,255,.13) 50%,
                    rgba(255,255,255,.06) 75%);
                background-size: 200% 100%;
            }
        }
        [data-theme="dark"] .skel-line {
            background: linear-gradient(90deg,
                rgba(255,255,255,.06) 25%,
                rgba(255,255,255,.13) 50%,
                rgba(255,255,255,.06) 75%);
            background-size: 200% 100%;
        }
        .skel-word { height: 50px; width: 52%; margin-top: 68px; }
        .skel-ipa  { height: 16px; width: 28%; margin-top: 14px; }
        .skel-zh   { height: 28px; width: 38%; margin-top: 26px; }
        .skel-ex   { height: 13px; width: 82%; margin-top: 30px; }
        .skel-ex2  { height: 13px; width: 64%; margin-top: 10px; }

        /* Skeleton bottom buttons */
        .skel-buttons { display: flex; gap: 10px; padding: 0 20px; justify-content: center; flex-shrink: 0; }
        .skel-btn { height: 48px; border-radius: 14px; flex: 1; max-width: 140px; }

        /* Skeleton brand row */
        .skel-brand { display: flex; align-items: center; gap: 10px; }
        .skel-circle { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }

        /* Skeleton toolbar row */
        .skel-toolbar { display: flex; gap: 8px; padding: 6px 18px; flex-shrink: 0; }
        .skel-icon { width: 32px; height: 32px; border-radius: 50%; }

        /* Skeleton progress bar */
        .skel-progress { height: 6px; border-radius: 3px; margin: 0 18px 4px; }

        /* Pre-loader fade-out */
        @keyframes skelFadeOut {
            from { opacity: 1; }
            to   { opacity: 0; }
        }
        #pre-loader.fade-out {
            animation: skelFadeOut 0.3s ease forwards;
            pointer-events: none;
        }

        /* ── Practice exit button (in progress row) ─────────────────────── */
        .prac-exit-btn {
            background: rgba(0,0,0,0.05);
            border: none; cursor: pointer;
            color: var(--muted); font-size: 0.82rem; padding: 5px 7px;
            line-height: 1; flex-shrink: 0; border-radius: 50%;
            width: 26px; height: 26px;
            display: flex; align-items: center; justify-content: center;
            transition: color 0.2s, background 0.2s, transform 0.15s;
            -webkit-tap-highlight-color: transparent;
         min-height: 44px; min-width: 44px; }
        .prac-exit-btn:hover { color: var(--red); background: rgba(239,68,68,0.08); }
        .prac-exit-btn:active { transform: scale(0.9); }

        /* ── Clickable chips ─────────────────────────────────────────────── */
        .chip-btn {
            cursor: pointer;
            border: none;
            transition: filter 0.15s, transform 0.1s;
        }
        .chip-btn:hover  { filter: brightness(0.93); }
        .chip-btn:active { transform: scale(0.95); }
        /* Number pop when chip value changes (no out-in: old disappears instantly, new pops) */
        .chip-num-enter-active { animation: chipPop 0.38s ease-out; }
        .chip-num-leave-active { display: none; }
        @keyframes chipPop {
            0%   { transform: scale(0.7); opacity: 0; }
            60%  { transform: scale(1.4); opacity: 1; }
            100% { transform: scale(1);   opacity: 1; }
        }

        /* ── Onboarding overlay ─────────────────────────────────────────── */
        .ob-overlay {
            position: fixed; inset: 0; z-index: 400;
            background: var(--bg);
            display: flex; flex-direction: column;
            padding-top: env(safe-area-inset-top);
            animation: rdSlideUp 0.32s cubic-bezier(.32,.72,0,1);
        }
        .ob-hd {
            display: flex; align-items: center; justify-content: flex-end;
            padding: 10px 16px; flex-shrink: 0;
        }
        .ob-skip {
            background: none; border: none; font-size: 0.8rem; font-weight: 600;
            color: var(--muted); cursor: pointer; padding: 6px 10px;
            border-radius: 8px; transition: color 0.15s;
        }
        .ob-skip:hover { color: var(--text); }
        .ob-body {
            flex: 1; overflow-y: auto; padding: 0 20px 20px;
            -webkit-overflow-scrolling: touch;
            display: flex; flex-direction: column; gap: 24px;
        }
        .ob-hero {
            display: flex; flex-direction: column; align-items: center;
            text-align: center; gap: 6px; padding: 8px 0 0;
        }
        .ob-logo    { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
        .ob-brand   { font-size: 1.8rem; font-weight: 900; color: var(--text); letter-spacing: -0.02em; }
        .ob-tagline { font-size: 0.82rem; color: var(--muted); max-width: 280px; }

        /* ── Three-phase learning pipeline ─────────────────────────────── */
        .ob-pipeline { display: flex; flex-direction: column; gap: 0; }
        .ob-phase {
            display: flex; align-items: flex-start; gap: 14px;
            padding: 14px 16px;
            background: var(--surface); border: 1px solid var(--border);
            position: relative;
        }
        .ob-phase:first-child { border-radius: 16px 16px 0 0; }
        .ob-phase:last-child  { border-radius: 0 0 16px 16px; }
        .ob-phase:not(:last-child) { border-bottom: none; }
        .ob-phase-icon {
            width: 40px; height: 40px; border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.3rem; flex-shrink: 0;
        }
        .ob-phase-icon.phase1 { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
        .ob-phase-icon.phase2 { background: linear-gradient(135deg, #fef3c7, #fde68a); }
        .ob-phase-icon.phase3 { background: linear-gradient(135deg, #d1fae5, #a7f3d0); }
        [data-theme="dark"] .ob-phase-icon.phase1 { background: linear-gradient(135deg, #1e3a5f, #1e40af40); }
        [data-theme="dark"] .ob-phase-icon.phase2 { background: linear-gradient(135deg, #78350f60, #92400e40); }
        [data-theme="dark"] .ob-phase-icon.phase3 { background: linear-gradient(135deg, #064e3b60, #065f4640); }
        .ob-phase-text { flex: 1; min-width: 0; }
        .ob-phase-title {
            font-size: 0.92rem; font-weight: 700; color: var(--text);
            display: flex; align-items: center; gap: 6px;
        }
        .ob-phase-num {
            font-size: 0.65rem; font-weight: 800; color: var(--blue);
            background: var(--blue-bg, rgba(99,102,241,0.1));
            padding: 1px 6px; border-radius: 4px;
        }
        .ob-phase-desc {
            font-size: 0.8rem; color: var(--muted); margin-top: 3px; line-height: 1.5;
        }
        .ob-phase-arrow {
            display: flex; justify-content: center;
            color: var(--muted); font-size: 0.7rem; opacity: 0.5;
            margin: -1px 0; position: relative; z-index: 1;
        }

        /* ── Learning curve SVG ─────────────────────────────────────────── */
        .ob-curve-wrap {
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 16px; padding: 16px 16px 12px; text-align: center;
        }
        .ob-curve-title {
            font-size: 0.88rem; font-weight: 700; color: var(--text); margin-bottom: 10px;
        }
        .ob-curve-svg { width: 100%; max-width: 340px; height: auto; }
        .ob-curve-legend {
            display: flex; justify-content: center; gap: 18px; margin-top: 8px;
            font-size: 0.72rem; color: var(--muted);
        }
        .ob-curve-legend span { display: flex; align-items: center; gap: 5px; }
        .ob-curve-legend i {
            display: inline-block; width: 16px; height: 3px; border-radius: 2px;
        }
        .ob-curve-legend i.forget { background: #ef4444; opacity: 0.7; }
        .ob-curve-legend i.srs    { background: #8b6cf6; }

        /* ── AI guide section ──────────────────────────────────────────── */
        .ob-ai {
            display: flex; align-items: flex-start; gap: 12px;
            background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(99,102,241,0.06));
            border: 1px solid rgba(139,92,246,0.18);
            border-radius: 16px; padding: 14px 16px;
        }
        [data-theme="dark"] .ob-ai {
            background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(99,102,241,0.08));
            border-color: rgba(139,92,246,0.25);
        }
        .ob-ai-icon {
            font-size: 1.4rem; flex-shrink: 0; margin-top: 1px;
        }
        .ob-ai-text { flex: 1; }
        .ob-ai-title {
            font-size: 0.88rem; font-weight: 700; color: var(--text);
        }
        .ob-ai-desc {
            font-size: 0.78rem; color: var(--muted); margin-top: 3px; line-height: 1.55;
        }
        .ob-ai-chips {
            display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
        }
        .ob-ai-chip {
            font-size: 0.7rem; font-weight: 600;
            color: #7c3aed; background: rgba(139,92,246,0.1);
            padding: 3px 8px; border-radius: 6px;
        }
        [data-theme="dark"] .ob-ai-chip {
            color: #c4b5fd; background: rgba(139,92,246,0.18);
        }
        .ob-ai-action {
            margin-top: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            border: none;
            border-radius: 10px;
            padding: 9px 12px;
            font-size: 0.78rem;
            font-weight: 700;
            color: #fff;
            background: linear-gradient(135deg, #4f8ff7, #7c3aed);
            box-shadow: 0 6px 16px rgba(79,143,247,0.28);
            cursor: pointer;
            transition: transform .14s ease, filter .14s ease;
        }
        .ob-ai-action:hover { filter: brightness(1.05); transform: translateY(-1px); }
        .ob-ai-action:active { transform: scale(0.98); }

        .ob-footer {
            flex-shrink: 0;
            padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
            border-top: 1px solid var(--border); background: var(--bg);
        }
        .ob-cta {
            width: 100%; padding: 16px;
            background: linear-gradient(135deg, #8b6cf6, #7c3aed);
            color: #fff; border: none; border-radius: 16px;
            font-size: 1.05rem; font-weight: 700; cursor: pointer;
            box-shadow: 0 4px 20px rgba(139,92,246,0.22);
            transition: transform 0.12s, box-shadow 0.18s;
        }
        .ob-cta:hover  { transform: translateY(-1px); box-shadow: 0 6px 26px rgba(139,92,246,0.32); }
        .ob-cta:active { transform: scale(0.98); box-shadow: none; }
        .ob-panel {
            display: flex; flex-direction: column;
            flex: 1; width: 100%; overflow: hidden;
        }
        @media (min-width: 700px) {
            .ob-overlay {
                align-items: center; justify-content: center;
                background: rgba(15,23,42,0.55);
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
                animation: none;
                padding-top: 0;
            }
            .ob-panel {
                flex: none;
                width: 100%; max-width: 520px;
                max-height: 85vh;
                background: var(--bg);
                border-radius: 24px;
                overflow: hidden;
                box-shadow: 0 24px 64px rgba(0,0,0,0.28);
                animation: rdSlideUp 0.32s cubic-bezier(.32,.72,0,1);
            }
            .ob-footer { padding-bottom: 20px; }
        }

        /* ── Daily Welcome ───────────────────────────────────────────────── */
        .dw-overlay {
            position: fixed; inset: 0; z-index: 410;
            display: flex; align-items: center; justify-content: center;
            background: rgba(15,23,42,0.35);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            padding: 24px 20px;
            animation: fadeIn 0.22s ease;
        }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        .dw-card {
            width: 100%; max-width: 400px;
            background: var(--surface);
            border-radius: 24px;
            padding: 32px 28px 26px;
            box-shadow: 0 16px 48px rgba(0,0,0,0.16);
            position: relative;
            animation: scaleIn 0.28s cubic-bezier(.32,.72,0,1);
        }
        @keyframes scaleIn {
            from { opacity: 0; transform: scale(0.92) translateY(14px); }
            to   { opacity: 1; transform: scale(1)    translateY(0);    }
        }
        .dw-close {
            position: absolute; top: 16px; right: 16px;
            background: none; border: none;
            font-size: 0.82rem; color: var(--muted); cursor: pointer;
            padding: 4px 8px; border-radius: 6px; transition: color 0.15s;
        }
        .dw-close:hover { color: var(--text); }
        .dw-streak { text-align: center; padding: 4px 0 18px; }
        .dw-streak-emoji { font-size: 2.8rem; line-height: 1; margin-bottom: 10px; }
        .dw-streak-num {
            font-size: 2.2rem; font-weight: 900; color: var(--text);
            letter-spacing: -0.03em; line-height: 1;
        }
        .dw-streak-sub {
            font-size: 0.88rem; color: var(--muted); margin-top: 8px; line-height: 1.45;
        }
        .dw-divider { height: 1px; background: var(--border); margin: 0 0 18px; }
        .dw-quote-wrap { padding: 0 2px 20px; }
        .dw-quote-text {
            font-size: 0.9rem; color: var(--text); line-height: 1.65;
            font-style: italic; letter-spacing: 0.01em;
        }
        .dw-quote-author {
            font-size: 0.78rem; color: var(--muted); margin-top: 10px;
            text-align: right; font-weight: 600;
        }
        .dw-cta {
            width: 100%; padding: 14px;
            background: linear-gradient(135deg, #8b6cf6, #7c3aed);
            color: #fff; border: none; border-radius: 14px;
            font-size: 0.95rem; font-weight: 700; cursor: pointer;
            box-shadow: 0 4px 16px rgba(139,92,246,0.22);
            transition: transform 0.12s, box-shadow 0.18s;
        }
        .dw-cta:hover  { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(139,92,246,0.32); }
        .dw-cta:active { transform: scale(0.98); box-shadow: none; }

        /* ── Progress Summary (after daily welcome) ──────────────────────── */
        .ps-overlay {
            position: fixed; inset: 0; z-index: 410;
            display: flex; align-items: center; justify-content: center;
            background: rgba(15,23,42,0.35);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            padding: 24px 20px;
            animation: fadeIn 0.22s ease;
        }
        .ps-card {
            width: 100%; max-width: 400px;
            background: var(--surface);
            border-radius: 24px;
            padding: 28px 24px 22px;
            box-shadow: 0 16px 48px rgba(0,0,0,0.16);
            position: relative;
            animation: scaleIn 0.28s cubic-bezier(.32,.72,0,1);
            max-height: 85vh; overflow-y: auto;
        }
        .ps-close {
            position: absolute; top: 14px; right: 14px;
            background: none; border: none;
            font-size: 0.82rem; color: var(--muted); cursor: pointer;
            padding: 4px 8px; border-radius: 6px; transition: color 0.15s;
        }
        .ps-close:hover { color: var(--text); }
        .ps-title {
            font-size: 1.05rem; font-weight: 800; color: var(--text);
            text-align: center; margin-bottom: 20px;
        }
        .ps-stats-grid {
            display: grid; grid-template-columns: repeat(2, 1fr);
            gap: 10px; margin-bottom: 20px;
        }
        .ps-stat {
            background: var(--bg); border-radius: 14px;
            padding: 14px 12px; text-align: center;
        }
        .ps-stat-val {
            font-size: 1.6rem; font-weight: 800; color: var(--blue); line-height: 1.1;
        }
        .ps-stat-val.green { color: var(--green); }
        .ps-stat-val.amber { color: var(--amber, #f59e0b); }
        .ps-stat-val.purple { color: var(--purple, #8b5cf6); }
        .ps-stat-label {
            font-size: 0.68rem; color: var(--muted); margin-top: 4px;
            font-weight: 600;
        }
        .ps-stage-section { margin-bottom: 20px; }
        .ps-stage-title {
            font-size: 0.72rem; font-weight: 700; color: var(--muted);
            text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px;
        }
        .ps-bar-wrap { display: flex; flex-direction: column; gap: 8px; }
        .ps-bar-row { display: flex; align-items: center; gap: 8px; }
        .ps-bar-label {
            font-size: 0.75rem; color: var(--text); font-weight: 600;
            min-width: 58px; text-align: right;
        }
        .ps-bar-track {
            flex: 1; height: 10px; background: var(--bg);
            border-radius: 5px; overflow: hidden;
        }
        .ps-bar-fill {
            height: 100%; border-radius: 5px;
            transition: width 0.6s cubic-bezier(.25,.46,.45,.94);
        }
        .ps-bar-fill.new      { background: var(--blue); }
        .ps-bar-fill.learning { background: var(--amber, #f59e0b); }
        .ps-bar-fill.young    { background: #14b8a6; }
        .ps-bar-fill.mature   { background: var(--green); }
        .ps-bar-fill.mastered { background: var(--purple, #8b5cf6); }
        .ps-bar-num {
            font-size: 0.72rem; color: var(--muted); font-weight: 700;
            min-width: 30px; font-variant-numeric: tabular-nums;
        }
        .ps-today-section {
            background: linear-gradient(135deg,
                rgba(79, 143, 247, 0.06),
                rgba(139, 108, 246, 0.04));
            border-radius: 14px; padding: 14px 16px; margin-bottom: 20px;
        }
        .ps-today-title {
            font-size: 0.72rem; font-weight: 700; color: var(--muted);
            text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px;
        }
        .ps-today-row {
            display: flex; justify-content: space-between; align-items: center;
        }
        .ps-today-item { text-align: center; }
        .ps-today-val {
            font-size: 1.2rem; font-weight: 800; color: var(--text); line-height: 1;
        }
        .ps-today-sub {
            font-size: 0.62rem; color: var(--muted); margin-top: 3px;
        }
        .ps-cta {
            width: 100%; padding: 14px;
            background: linear-gradient(135deg, #3b82f6, #2563eb);
            color: #fff; border: none; border-radius: 14px;
            font-size: 0.95rem; font-weight: 700; cursor: pointer;
            box-shadow: 0 4px 16px rgba(59,130,246,0.22);
            transition: transform 0.12s, box-shadow 0.18s;
        }
        .ps-cta:hover  { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(59,130,246,0.32); }
        .ps-cta:active { transform: scale(0.98); box-shadow: none; }

        /* ── AI Advice Panel (startup overlay) ─────────────────────────── */
        .aap-card { text-align: left; }
        .aap-title {
            font-size: 1.15rem;
            font-weight: 700;
            margin-bottom: 6px;
        }
        .aap-greeting {
            font-size: 0.92rem;
            font-weight: 600;
            color: var(--text-secondary, #555);
            line-height: 1.5;
            margin-bottom: 14px;
            padding: 0 2px;
        }
        .aap-action-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 16px;
        }
        .aap-action-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            border-radius: 12px;
            border: 1px solid var(--border);
            background: var(--surface);
            cursor: pointer;
            transition: transform 0.12s, box-shadow 0.18s;
        }
        .aap-action-item:active { transform: scale(0.98); }
        .aap-action-item.high {
            border-color: rgba(79,143,247,0.3);
            background: rgba(79,143,247,0.04);
        }
        .aap-action-icon { font-size: 1.3rem; flex-shrink: 0; }
        .aap-action-body { flex: 1; min-width: 0; }
        .aap-action-tool {
            font-size: 0.72rem;
            font-weight: 700;
            color: #4f8ff7;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin-bottom: 2px;
        }
        .aap-action-advice {
            font-size: 0.84rem;
            line-height: 1.5;
            color: var(--text);
        }
        .aap-action-arrow {
            font-size: 1.2rem;
            color: var(--text-tertiary, #999);
            flex-shrink: 0;
        }
        [data-theme="dark"] .aap-action-item.high {
            border-color: rgba(79,143,247,0.25);
            background: rgba(79,143,247,0.08);
        }

        /* ── 小狐狸每日问候弹窗（与 Today 页小狐狸同一身份）─────────────── */
        .fox-welcome-overlay {
            position: fixed; inset: 0; z-index: 410;
            display: flex; align-items: center; justify-content: center;
            background: rgba(15,23,42,0.35);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            padding: 24px 20px;
            animation: fadeIn 0.22s ease;
        }
        .fox-welcome-card {
            width: 100%; max-width: 340px;
            background: var(--surface);
            border-radius: 24px;
            padding: 28px 24px 22px;
            box-shadow: 0 16px 48px rgba(0,0,0,0.16);
            position: relative;
            animation: scaleIn 0.28s cubic-bezier(.32,.72,0,1);
            text-align: center;
            /* 和 Today 页一样的橙色光晕背景 */
            overflow: hidden;
        }
        .fox-welcome-card::before {
            content: '';
            position: absolute;
            top: -40px; right: -40px;
            width: 160px; height: 160px;
            background: radial-gradient(circle, rgba(255,180,100,0.12) 0%, transparent 70%);
            pointer-events: none;
            animation: foxGlow 4s ease-in-out infinite;
        }
        .fox-welcome-close {
            position: absolute; top: 14px; right: 14px;
            background: none; border: none;
            font-size: 0.82rem; color: var(--muted); cursor: pointer;
            padding: 4px 8px; border-radius: 6px; transition: color 0.15s;
            z-index: 1;
        }
        .fox-welcome-close:hover { color: var(--text); }
        .fox-welcome-hero {
            display: flex; flex-direction: column; align-items: center;
            margin-bottom: 20px;
            position: relative;
            z-index: 1;
        }
        /* 复用 Today 页小狐狸头像样式 */
        .fox-welcome-avatar {
            width: 72px; height: 72px;
            background: linear-gradient(145deg, #fff8f0, #ffe8d6);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            position: relative;
            margin-bottom: 16px;
            box-shadow: 
                0 6px 20px rgba(255,140,66,0.25),
                inset 0 -2px 4px rgba(255,140,66,0.1);
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .fox-welcome-avatar.celebrating {
            animation: foxCelebrate 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
        }
        .fox-welcome-avatar.excited {
            animation: foxExcited 1.2s ease-in-out infinite;
        }
        @keyframes foxExcited {
            0%, 100% { transform: scale(1) rotate(0deg); }
            25% { transform: scale(1.05) rotate(-3deg); }
            75% { transform: scale(1.05) rotate(3deg); }
        }
        .fox-welcome-face {
            font-size: 2.4rem;
            line-height: 1;
            filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1));
            /* 眨眼动画 */
            animation: foxBlink 4s ease-in-out infinite;
        }
        .fox-welcome-avatar.celebrating .fox-welcome-face {
            animation: none;
        }
        .fox-welcome-blush {
            position: absolute; bottom: 14px; left: 50%;
            transform: translateX(-50%);
            width: 40px; height: 10px;
            background: radial-gradient(ellipse, rgba(255,130,130,0.5) 0%, transparent 70%);
            pointer-events: none;
        }
        .fox-welcome-bubble {
            background: linear-gradient(135deg, rgba(255,140,66,0.06) 0%, rgba(255,180,100,0.02) 100%);
            border: 1px solid rgba(255,140,66,0.12);
            border-radius: 18px;
            padding: 16px 20px;
            position: relative;
            max-width: 280px;
        }
        .fox-welcome-bubble::before {
            content: '';
            position: absolute; top: -7px; left: 50%;
            transform: translateX(-50%);
            border: 7px solid transparent;
            border-bottom-color: rgba(255,140,66,0.06);
            border-top: none;
        }
        .fox-welcome-msg {
            font-size: 0.94rem; line-height: 1.6;
            color: var(--text); white-space: pre-line;
            font-weight: 500;
        }
        .fox-welcome-stats {
            display: flex; justify-content: center; gap: 24px;
            margin-bottom: 20px;
            position: relative;
            z-index: 1;
        }
        .fws-item {
            text-align: center;
            min-width: 64px;
            padding: 10px 8px;
            background: var(--bg);
            border-radius: 14px;
        }
        .fws-val {
            font-size: 1.5rem; font-weight: 800; color: var(--blue);
            line-height: 1.1;
        }
        .fws-val.streak { color: #f97316; font-size: 1.3rem; }
        .fws-label {
            font-size: 0.68rem; color: var(--muted);
            font-weight: 600; margin-top: 4px;
        }
        .fox-welcome-cta {
            width: 100%; padding: 14px;
            /* 橙色渐变，和小狐狸颜色呼应 */
            background: linear-gradient(135deg, #ff8c42, #f97316);
            color: #fff; border: none; border-radius: 14px;
            font-size: 0.95rem; font-weight: 700; cursor: pointer;
            box-shadow: 0 4px 16px rgba(249,115,22,0.25);
            transition: transform 0.12s, box-shadow 0.18s;
            position: relative;
            z-index: 1;
        }
        .fox-welcome-cta:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 22px rgba(249,115,22,0.35);
        }
        .fox-welcome-cta:active { transform: scale(0.98); box-shadow: none; }
        [data-theme="dark"] .fox-welcome-card::before {
            background: radial-gradient(circle, rgba(255,140,66,0.08) 0%, transparent 70%);
        }
        [data-theme="dark"] .fox-welcome-avatar {
            background: linear-gradient(145deg, #3d2814, #5a3a1f);
            box-shadow: 
                0 6px 20px rgba(255,140,66,0.15),
                inset 0 -2px 4px rgba(255,140,66,0.05);
        }
        [data-theme="dark"] .fox-welcome-bubble {
            background: linear-gradient(135deg, rgba(255,140,66,0.08) 0%, rgba(255,180,100,0.03) 100%);
            border-color: rgba(255,140,66,0.15);
        }

        /* ── Share panel (desktop fallback) ─────────────────────────────── */
        .sp-overlay {
            position: fixed; inset: 0; z-index: 600;
            background: rgba(0,0,0,0.3);
            backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
            display: flex; align-items: center; justify-content: center;
            padding: 20px;
        }
        .sp-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 22px;
            width: 100%; max-width: 400px;
            display: flex; flex-direction: column; gap: 14px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.12);
            animation: slideUp 0.22s cubic-bezier(0.34,1.3,0.64,1);
        }
        .sp-title {
            font-size: 0.85rem; font-weight: 700;
            color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase;
        }
        .sp-text {
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 10px 12px;
            font-size: 0.84rem; line-height: 1.55;
            color: var(--text);
            white-space: pre-wrap; word-break: break-word;
            max-height: 120px; overflow-y: auto;
        }
        .sp-url {
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 8px 12px;
            font-size: 0.8rem; color: var(--blue);
            word-break: break-all;
            font-family: 'SF Mono', Menlo, monospace;
        }
        .sp-btns {
            display: flex; gap: 8px; flex-wrap: wrap;
        }
        .sp-btn {
            flex: 1; min-width: 0;
            padding: 9px 14px;
            border-radius: 99px;
            border: 1px solid var(--border);
            background: none;
            font-size: 0.8rem; font-weight: 600;
            color: var(--muted); cursor: pointer;
            transition: all 0.18s;
        }
        .sp-btn:hover { border-color: var(--blue); color: var(--blue); }
        .sp-btn.primary {
            background: var(--blue); border-color: var(--blue);
            color: #fff;
        }
        .sp-btn.primary:hover { opacity: 0.88; }
        .sp-btn.copied { border-color: var(--green); color: var(--green); }
        .sp-close {
            position: absolute; top: 14px; right: 14px;
            background: none; border: none; font-size: 1.1rem;
            color: var(--muted); cursor: pointer; line-height: 1;
        }

        /* ── Word list modal ─────────────────────────────────────────────── */
        .wl-overlay {
            position: fixed; inset: 0; z-index: 500;
            background: rgba(0,0,0,0.3);
            display: flex; align-items: flex-end;
            -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
        }
        .wl-sheet {
            width: 100%; max-height: 82vh;
            background: var(--surface);
            border-radius: 24px 24px 0 0;
            display: flex; flex-direction: column;
            box-shadow: 0 -4px 24px rgba(0,0,0,0.10);
            overflow: hidden;
        }
        .wl-header {
            display: flex; align-items: center; gap: 10px;
            padding: 16px 18px 12px;
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }
        .wl-title {
            flex: 1; font-size: 1.05rem; font-weight: 700; color: var(--text);
        }
        .wl-count {
            font-size: 0.82rem; color: var(--muted); font-weight: 600;
        }
        .wl-close {
            background: none; border: none; cursor: pointer;
            color: var(--muted); font-size: 1.25rem; padding: 2px 6px;
            line-height: 1; border-radius: 8px; transition: color 0.15s;
        }
        .wl-close:hover { color: var(--text); }
        .wl-hard-btn { font-size: 0.72rem; font-weight: 600; padding: 4px 10px; border-radius: 8px;
            background: rgba(240, 80, 80, 0.1);
            color: var(--red, #dc2626); border: 1px solid rgba(240, 80, 80, 0.3);
            cursor: pointer; white-space: nowrap; }
        .wl-list {
            overflow-y: auto; flex: 1;
            padding: 8px 0 env(safe-area-inset-bottom, 12px);
        }
        .wl-empty {
            text-align: center; color: var(--muted);
            padding: 40px 20px; font-size: 0.95rem;
        }
        .wl-item {
            display: flex; align-items: baseline; gap: 10px;
            padding: 10px 18px;
            border-bottom: 1px solid var(--border);
            transition: background 0.12s;
        }
        .wl-item:last-child { border-bottom: none; }
        .wl-item:hover { background: var(--surface); }
        .wl-en   { font-weight: 700; font-size: 1rem; color: var(--text); min-width: 0; }
        .wl-pos  { font-size: 0.72rem; color: var(--muted); flex-shrink: 0; }
        .wl-zh   { font-size: 0.88rem; color: var(--blue); flex: 1; min-width: 0; }
        .wl-stage-badge {
            font-size: 0.68rem; font-weight: 700; padding: 2px 7px;
            border-radius: 99px; flex-shrink: 0; white-space: nowrap;
        }
        .wl-badge-new     { background: rgba(79, 143, 247, 0.15);   color: var(--blue); }
        .wl-badge-learning{ background: rgba(245, 158, 11, 0.15);  color: var(--amber); }
        .wl-badge-relearn { background: rgba(240, 80, 80, 0.15);    color: var(--red); }
        .wl-badge-young   { background: rgba(43, 200, 102, 0.15);  color: var(--green); }
        .wl-badge-mature  { background: rgba(43, 200, 102, 0.18);  color: var(--green); }
        .wl-badge-mastered{ background: rgba(139, 108, 246, 0.15); color: var(--purple); }


        /* ── AI Talk (free conversation) ──────────────────────────────────── */
        /* 推荐用语 */
        .talk-suggest-phrase { padding: 8px 14px; border-radius: 12px; background: rgba(79,143,247,0.06); border: 1px solid rgba(79,143,247,0.15); font-size: 0.82rem; color: var(--text); margin-bottom: 8px; cursor: pointer; line-height: 1.5; position: relative; }
        .talk-suggest-phrase em { font-style: italic; color: var(--blue); font-weight: 600; }
        .talk-suggest-close { position: absolute; right: 10px; top: 8px; color: var(--muted); font-size: 0.7rem; }
        [data-theme="dark"] .talk-suggest-phrase { background: rgba(79,143,247,0.1); border-color: rgba(79,143,247,0.2); }
        /* AI 气泡操作按钮 */
        .talk-bubble-actions { margin-top: 6px; display: flex; align-items: center; gap: 6px; }
        .talk-bubble-play-btn { padding: 2px 8px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 0.72rem; cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; touch-action: manipulation; min-height: 26px; }
        .talk-bubble-play-btn:hover { color: var(--blue); border-color: var(--blue); }
        .talk-bubble-play-btn:active { background: rgba(79,143,247,0.08); }
        .talk-bubble-play-btn.playing { color: var(--blue); border-color: var(--blue); background: rgba(79,143,247,0.08); }
        [data-theme="dark"] .talk-bubble-play-btn:active { background: rgba(79,143,247,0.15); }
        [data-theme="dark"] .talk-bubble-play-btn.playing { background: rgba(79,143,247,0.15); }
        .talk-translate-btn { padding: 2px 8px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 0.72rem; cursor: pointer; transition: color 0.2s, border-color 0.2s; touch-action: manipulation; min-height: 26px; }
        .talk-translate-btn:hover { color: var(--blue); border-color: var(--blue); }
        .talk-bubble-zh { margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: rgba(79,143,247,0.06); font-size: 0.82rem; color: var(--muted); line-height: 1.5; }
        [data-theme="dark"] .talk-bubble-zh { background: rgba(79,143,247,0.1); }

        .talk-active { display: flex; flex-direction: column; height: 100%; max-height: calc(100vh - 200px); }
        .talk-header { padding: 0 0 10px; }
        .talk-scenario-pill { font-size: 0.78rem; color: var(--muted); background: var(--hover); border-radius: 20px; padding: 4px 10px; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .talk-progress { display: flex; gap: 5px; margin-top: 8px; }
        .talk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: background 0.3s, transform 0.3s, box-shadow 0.3s; }
        .talk-dot.done { background: var(--blue); }
        .talk-dot.active { background: var(--blue); box-shadow: 0 0 0 3px rgba(0,122,255,0.2); transform: scale(1.2); }

        /* Chat */
        .talk-chat { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 0 8px; scroll-behavior: smooth; overscroll-behavior: contain; }
        .talk-bubble { max-width: 88%; padding: 10px 13px; border-radius: 16px; font-size: 0.9rem; line-height: 1.5; }
        .talk-bubble.ai   { background: var(--surface); border: 1px solid var(--border); align-self: flex-start; border-bottom-left-radius: 4px; }
        .talk-bubble.user { background: linear-gradient(135deg, #4f8ff7 0%, #8b6cf6 100%); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
        /* C2: emotion tint on AI bubbles */
        .talk-bubble--excited.ai { background: rgba(43,200,102,0.06); border-color: rgba(43,200,102,0.18); }
        .talk-bubble--curious.ai { background: rgba(79,143,247,0.06); border-color: rgba(79,143,247,0.18); }
        .talk-bubble--skeptical.ai { background: rgba(245,158,11,0.06); border-color: rgba(245,158,11,0.18); }
        .talk-bubble--amused.ai { background: rgba(139,108,246,0.06); border-color: rgba(139,108,246,0.18); }
        .talk-bubble--thoughtful.ai { background: rgba(127,138,163,0.06); border-color: rgba(127,138,163,0.18); }
        [data-theme="dark"] .talk-bubble--excited.ai { background: rgba(43,200,102,0.08); border-color: rgba(43,200,102,0.2); }
        [data-theme="dark"] .talk-bubble--curious.ai { background: rgba(79,143,247,0.08); border-color: rgba(79,143,247,0.2); }
        [data-theme="dark"] .talk-bubble--skeptical.ai { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.2); }
        [data-theme="dark"] .talk-bubble--amused.ai { background: rgba(139,108,246,0.08); border-color: rgba(139,108,246,0.2); }
        [data-theme="dark"] .talk-bubble--thoughtful.ai { background: rgba(127,138,163,0.08); border-color: rgba(127,138,163,0.2); }
        .talk-bubble-name { font-size: 0.7rem; font-weight: 700; opacity: 0.55; margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.04em; }
        .talk-bubble-text { word-break: break-word; }
        .talk-bubble-feedback { font-size: 0.78rem; margin-top: 5px; opacity: 0.85; font-style: italic; }
        .talk-bubble.user .talk-bubble-feedback { color: rgba(255,255,255,0.85); }
        .talk-bubble-badges { display: flex; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
        .talk-kw-badge { background: rgba(52,199,89,0.15); color: #1a8c3f; border: 1px solid rgba(52,199,89,0.3); border-radius: 10px; padding: 1px 8px; font-size: 0.72rem; font-weight: 600; }
        .talk-bubble.user .talk-kw-badge { background: rgba(255,255,255,0.25); color: #fff; border-color: rgba(255,255,255,0.4); }

        /* 新通话态布局 */
        .talk-ready-shell { display: flex; flex-direction: column; gap: 12px; max-width: 440px; margin: 0 auto; text-align: left; }
        .talk-ready-kicker { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
        .talk-ready-title { font-size: 1.2rem; font-weight: 800; color: var(--text); line-height: 1.25; }
        .talk-role-card--ready { background: linear-gradient(180deg, rgba(79,143,247,0.08), rgba(79,143,247,0.02)); border-color: rgba(79,143,247,0.18); margin-bottom: 0; }
        .talk-ready-vocab { display: flex; flex-direction: column; gap: 8px; }
        .talk-ready-vocab-label { font-size: 0.8rem; color: var(--muted); }
        .talk-ready-vocab-chips { display: flex; flex-wrap: wrap; gap: 6px; }
        .talk-role-goal { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: 12px; background: rgba(249,115,22,0.08); border: 1px solid rgba(249,115,22,0.18); }
        .talk-role-goal .goal-label { font-size: 0.74rem; font-weight: 700; color: #c2410c; }
        .talk-role-goal .goal-text { font-size: 0.88rem; color: var(--text); line-height: 1.45; }
        [data-theme="dark"] .talk-role-goal { background: rgba(249,115,22,0.12); border-color: rgba(249,115,22,0.22); }
        [data-theme="dark"] .talk-role-goal .goal-label { color: #fb923c; }
        .talk-ready-note { font-size: 0.82rem; color: var(--muted); line-height: 1.5; }

        .talk-live-shell { display: flex; flex-direction: column; gap: 12px; min-height: calc(100vh - 210px); padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
        /* topbar removed — see .talk-turn-pill below for turn indicator */

        .talk-turn-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,0.96), var(--surface)); border: 1px solid rgba(79,143,247,0.12); box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08); }
        .talk-turn-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
        .talk-turn-persona { display: flex; align-items: center; gap: 12px; min-width: 0; }
        .talk-turn-avatar { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #4f8ff7, #78a8ff); color: #fff; font-size: 1rem; font-weight: 800; flex-shrink: 0; }
        .talk-turn-name { font-size: 0.95rem; font-weight: 700; color: var(--text); }
        .talk-turn-role { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
        .talk-status-chip { padding: 7px 11px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; color: var(--text); background: rgba(15,23,42,0.06); white-space: nowrap; }
        .talk-status-chip.speaking { color: #155eef; background: rgba(79,143,247,0.12); }
        .talk-status-chip.ready { color: #9a3412; background: rgba(249,115,22,0.14); }
        .talk-status-chip.listening { color: #b42318; background: rgba(255,59,48,0.12); }
        .talk-status-chip.thinking { color: #7a2e98; background: rgba(139,108,246,0.12); }
        .talk-turn-text { font-size: 1.05rem; line-height: 1.65; color: var(--text); min-height: 5.2em; user-select: text; -webkit-user-select: text; cursor: text; }
        /* Inline feedback after each turn */
        .talk-inline-feedback { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-radius: 14px; background: rgba(79,143,247,0.06); border: 1px solid rgba(79,143,247,0.12); animation: speakPhaseIn 0.3s ease-out; }
        .talk-inline-feedback .feedback-tip { font-size: 0.82rem; color: var(--text); line-height: 1.5; }
        .talk-inline-feedback .feedback-words { display: flex; gap: 6px; flex-wrap: wrap; }
        .talk-inline-feedback .word-used { background: rgba(76,175,80,0.15); color: #4caf50; border-radius: 8px; padding: 2px 8px; font-size: 0.78rem; font-weight: 600; }
        [data-theme="dark"] .talk-inline-feedback { background: rgba(79,143,247,0.1); border-color: rgba(79,143,247,0.18); }
        [data-theme="dark"] .talk-inline-feedback .word-used { color: #66bb6a; background: rgba(76,175,80,0.2); }

        .talk-inline-alert { padding: 10px 12px; border-radius: 14px; background: rgba(255,59,48,0.08); color: #b42318; font-size: 0.82rem; line-height: 1.45; }
        .talk-action-row { display: flex; gap: 10px; flex-wrap: nowrap; align-items: stretch; }
        .talk-primary-btn, .talk-secondary-btn { min-height: 46px; border-radius: 16px; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: transform 0.18s, box-shadow 0.18s, background 0.18s, color 0.18s, border-color 0.18s; touch-action: manipulation; }
        .talk-primary-btn { flex: 1; min-width: 160px; padding: 12px 16px; border: none; background: linear-gradient(135deg, #4f8ff7, #6ca6ff); color: #fff; box-shadow: 0 8px 22px rgba(79,143,247,0.24); }
        .talk-primary-btn.recording { background: linear-gradient(135deg, #ff5a4f, #ff857b); box-shadow: 0 8px 22px rgba(255,90,79,0.22); }
        .talk-primary-btn:disabled { opacity: 0.7; cursor: default; box-shadow: none; }
        .talk-secondary-btn { padding: 12px 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); min-width: 110px; flex-shrink: 0; }
        .talk-primary-btn:active, .talk-secondary-btn:active { transform: scale(0.98); }
        .talk-primary-btn:focus-visible, .talk-secondary-btn:focus-visible, .talk-history-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(79,143,247,0.24); }
        .talk-recording-stage { display: flex; flex-direction: column; gap: 10px; align-items: center; padding-top: 4px; }
        .talk-stage-note { font-size: 0.8rem; line-height: 1.5; color: var(--muted); }

        .talk-helper-card, .talk-history-sheet { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 14px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04); }
        .talk-helper-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
        .talk-helper-label { font-size: 0.8rem; font-weight: 700; color: var(--text); }
        .talk-helper-sub { font-size: 0.74rem; color: var(--muted); margin-top: 2px; }
        .talk-helper-progress { font-size: 0.82rem; font-weight: 800; color: var(--blue); }

        .talk-history-sheet { padding: 0; overflow: hidden; }
        .talk-history-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px; border: none; border-bottom: 1px solid var(--border); background: transparent; font-size: 0.86rem; font-weight: 700; color: var(--text); cursor: pointer; text-align: left; touch-action: manipulation; }
        .talk-history-list { display: flex; flex-direction: column; gap: 10px; max-height: 280px; overflow-y: auto; padding: 0 14px 14px; }
        .talk-history-preview { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 14px; }
        .talk-history-preview-item { display: flex; gap: 8px; align-items: baseline; font-size: 0.82rem; line-height: 1.5; color: var(--muted); }
        .talk-history-preview-who { flex-shrink: 0; font-weight: 700; color: var(--text); }
        .talk-history-preview-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

        /* D1: level badge on role card */
        .talk-level-badge { display: inline-block; margin-top: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
        .talk-level { display: inline-block; padding: 4px 12px; border-radius: 99px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.03em; }
        .talk-level--beginner { background: rgba(43,200,102,0.12); color: #1a8c3f; }
        .talk-level--intermediate { background: rgba(245,158,11,0.12); color: #b37800; }
        .talk-level--advanced { background: rgba(240,80,80,0.12); color: #c0392b; }
        [data-theme="dark"] .talk-level--beginner { background: rgba(43,200,102,0.15); color: #2bc866; }
        [data-theme="dark"] .talk-level--intermediate { background: rgba(245,158,11,0.15); color: #f59e0b; }
        [data-theme="dark"] .talk-level--advanced { background: rgba(240,80,80,0.15); color: #f05050; }

        /* E3: Review timeline */
        .talk-review-timeline { display: flex; flex-direction: column; gap: 6px; }
        .talk-review-line { font-size: 0.88rem; line-height: 1.5; }
        .talk-review-ai { color: var(--muted); padding: 4px 0; }
        .talk-review-emotion { margin-right: 2px; }
        .talk-review-user { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; cursor: pointer; transition: background 0.15s; }
        .talk-review-user:hover { background: rgba(79,143,247,0.04); }
        [data-theme="dark"] .talk-review-user { background: rgba(255,255,255,0.04); }
        [data-theme="dark"] .talk-review-user:hover { background: rgba(255,255,255,0.07); }
        .talk-review-user-text { color: var(--text); }
        .talk-review-you { font-size: 0.72rem; font-weight: 700; color: var(--blue); text-transform: uppercase; margin-right: 6px; }
        .talk-review-has-rewrite { margin-left: 4px; font-size: 0.78rem; }
        .talk-review-panel { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
        .talk-review-compare { display: flex; align-items: flex-start; gap: 8px; }
        .talk-review-original, .talk-review-native { flex: 1; }
        .talk-review-label { font-size: 0.7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; margin-bottom: 3px; }
        .talk-review-original .talk-review-text { color: var(--muted); text-decoration: line-through; font-size: 0.86rem; }
        .talk-review-native .talk-review-text { color: var(--blue); font-weight: 600; font-size: 0.86rem; }
        .talk-review-arrow { color: var(--muted); font-size: 1.1rem; margin-top: 16px; flex-shrink: 0; }
        .talk-review-note { font-size: 0.8rem; color: var(--muted); margin-top: 8px; font-style: italic; }
        .talk-review-redo { margin-top: 8px; }
        .talk-review-redo-btn { padding: 8px 16px; border-radius: 99px; border: 1.5px solid var(--blue); background: transparent; color: var(--blue); font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: background 0.15s; }
        .talk-review-redo-btn:hover { background: rgba(79,143,247,0.08); }
        .talk-review-redo-btn--recording { border-color: var(--red); color: var(--red); animation: talkRedoPulse 1s ease infinite; }
        @keyframes talkRedoPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
        .talk-review-redo-result { margin-top: 8px; padding: 10px; border-radius: 10px; background: rgba(79,143,247,0.04); }
        [data-theme="dark"] .talk-review-redo-result { background: rgba(79,143,247,0.08); }

        /* E3: details toggle for goodPoints/improvements */
        .talk-summary-details { border: 1px solid var(--border); border-radius: 12px; padding: 0; }
        .talk-summary-details[open] { padding: 0 12px 12px; }
        .talk-summary-details-toggle { padding: 12px; font-size: 0.85rem; font-weight: 600; color: var(--muted); cursor: pointer; list-style: none; }
        .talk-summary-details-toggle::-webkit-details-marker { display: none; }
        .talk-summary-details-toggle::before { content: '▸ '; }
        .talk-summary-details[open] .talk-summary-details-toggle::before { content: '▾ '; }

        .talk-summary--coach { display: flex; flex-direction: column; gap: 14px; text-align: left; max-width: var(--shell-max-width); margin: 0 auto; padding: 0 16px; }
        .talk-summary-hero { padding: 16px; border-radius: 18px; background: linear-gradient(180deg, rgba(79,143,247,0.10), rgba(79,143,247,0.03)); border: 1px solid rgba(79,143,247,0.14); }
        .talk-summary-kicker { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue); margin-bottom: 8px; }
        .talk-summary-takeaway { font-size: 1rem; line-height: 1.6; color: var(--text); font-weight: 600; }
        .talk-hint-tooltip--inline { margin-top: 8px; }
        /* .talk-exit-btn--top removed — End button now in action bar */

        @media (max-width: 640px) {
          /* topbar removed */
          .talk-turn-head { flex-direction: column; align-items: flex-start; }
          .talk-status-chip { align-self: flex-start; }
          /* talk-action-row 不再需要 column — 新版三列布局 */
          .talk-primary-btn, .talk-secondary-btn { width: 100%; }
          .talk-turn-card { padding: 16px; border-radius: 20px; }
          .talk-turn-text { min-height: 0; }
          .talk-summary-score { flex-direction: column; gap: 10px; }
          .talk-summary-scores { gap: 12px; }
          .talk-score-svg { width: 60px; height: 60px; }
          .talk-score-ring-inner { width: 60px; height: 60px; }
          .talk-score-ring-num { font-size: 1.05rem; }
        }

        /* 随机场景快速开始 */
        .talk-quick-start { width: 100%; padding: 14px 16px; border-radius: 14px; border: 2px dashed var(--blue); background: rgba(79,143,247,0.06); color: var(--blue); font-size: 1rem; font-weight: 700; cursor: pointer; margin-bottom: 16px; transition: background 0.2s, border-color 0.2s; touch-action: manipulation; }
        .talk-quick-start:hover { background: rgba(79,143,247,0.12); }
        .talk-quick-start:disabled { opacity: 0.4; cursor: not-allowed; }
        [data-theme="dark"] .talk-quick-start { background: rgba(79,143,247,0.1); }
        [data-theme="dark"] .talk-quick-start:hover { background: rgba(79,143,247,0.18); }

        /* ── Talk Scene Selection ─────────────────────────────── */
        /* Design tokens: section gap 20px, label 0.72rem/700, body 0.85rem, border-radius 12px */

        /* Unified section spacing */
        .ts-section { margin-bottom:20px; }
        .ts-section-label { font-size:0.72rem; font-weight:700; color:var(--muted); margin-bottom:10px; text-transform:uppercase; letter-spacing:0.04em; }

        /* Tabs */
        .ts-tabs { display:flex; gap:4px; margin-bottom:10px; background:var(--surface); border-radius:10px; padding:3px; border:1px solid var(--border); }
        .ts-tab { flex:1; padding:8px 4px; border:none; background:transparent; border-radius:8px; font-size:0.78rem; font-weight:600; color:var(--muted); cursor:pointer; transition:all 0.15s; }
        .ts-tab.active { background:var(--blue); color:#fff; }
        [data-theme="dark"] .ts-tabs { background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.08); }

        /* Scene grid: 2 columns */
        .ts-scene-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
        .ts-scene-card { display:flex; align-items:center; gap:10px; padding:12px; background:var(--surface); border-radius:12px; border:1.5px solid transparent; cursor:pointer; transition:all 0.15s; text-align:left; }
        .ts-scene-card:active { transform:scale(0.97); }
        .ts-scene-card:hover { border-color:rgba(79,143,247,0.25); }
        .ts-scene-card.selected { border-color:var(--blue); background:rgba(79,143,247,0.06); box-shadow:0 0 0 2px rgba(79,143,247,0.15); }
        .ts-scene-emoji { font-size:1.4rem; flex-shrink:0; }
        .ts-scene-name { font-size:0.82rem; font-weight:600; color:var(--text); line-height:1.35; flex:1; min-width:0; }
        .ts-scene-meta { display:flex; align-items:center; gap:4px; flex-shrink:0; }
        .ts-scene-diff { font-size:0.68rem; font-weight:700; color:var(--muted); background:rgba(125,138,163,0.1); padding:2px 6px; border-radius:6px; }
        .ts-scene-done { font-size:0.72rem; color:var(--green); font-weight:700; }
        [data-theme="dark"] .ts-scene-card { background:rgba(255,255,255,0.05); }
        [data-theme="dark"] .ts-scene-card:hover { border-color:rgba(79,143,247,0.35); }
        [data-theme="dark"] .ts-scene-card.selected { background:rgba(79,143,247,0.12); }
        [data-theme="dark"] .ts-scene-diff { background:rgba(255,255,255,0.08); }
        .ts-start-row { margin-top: 12px; }

        /* Custom scene */
        .ts-custom-row { display:flex; gap:8px; }
        .ts-custom-input { flex:1; padding:11px 12px; border:1.5px solid var(--border); border-radius:12px; font-size:0.85rem; background:var(--surface); color:var(--text); box-sizing:border-box; min-width:0; }
        .ts-custom-input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 2px rgba(79,143,247,0.12); }
        .ts-custom-go { width:48px; height:48px; border-radius:12px; border:none; background:var(--blue); color:#fff; font-size:1.1rem; font-weight:700; cursor:pointer; flex-shrink:0; transition:all 0.15s; touch-action:manipulation; }
        .ts-custom-go:active { transform:scale(0.95); }
        .ts-custom-go:disabled { opacity:0.4; cursor:not-allowed; }
        [data-theme="dark"] .ts-custom-input { background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.1); }

        /* Footer */
        .ts-footer { padding-top:4px; }
        .ts-empty { font-size:0.82rem; color:var(--muted); margin-bottom:12px; }
        .ts-error { font-size:0.82rem; color:var(--red); margin-bottom:12px; }
        .ts-history-btn { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:11px; border:1.5px solid var(--border); border-radius:12px; background:var(--surface); color:var(--muted); font-size:0.82rem; font-weight:600; cursor:pointer; transition:all 0.15s; }
        .ts-history-btn:hover { border-color:var(--blue); color:var(--blue); }
        [data-theme="dark"] .ts-history-btn { background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.08); }

        /* ── V7: Speak Hero Card + Compact Styles ────────────── */

        /* Hero Card (shared by Shadow + Talk) */
        .spk-hero {
            background: linear-gradient(135deg, rgba(79,143,247,0.10), rgba(79,143,247,0.04));
            border: 1.5px solid rgba(79,143,247,0.20);
            border-radius: 16px;
            padding: 18px 16px 16px;
            margin-bottom: 16px;
            text-align: center;
        }
        .spk-hero-badge {
            font-size: 0.92rem;
            font-weight: 800;
            color: var(--text);
            margin-bottom: 4px;
        }
        .spk-hero-desc {
            font-size: 0.78rem;
            color: var(--muted);
            margin-bottom: 12px;
        }
        .spk-hero-words {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            justify-content: center;
            margin-bottom: 14px;
        }
        .spk-hero-pill {
            background: rgba(79,143,247,0.10);
            color: var(--blue);
            padding: 4px 10px;
            border-radius: 8px;
            font-size: 0.78rem;
            font-weight: 600;
        }
        .spk-hero-pill--more {
            background: transparent;
            color: var(--muted);
            padding: 4px 6px;
        }
        .spk-hero-btn {
            width: 100%;
            padding: 14px 20px;
            border: none;
            border-radius: 14px;
            background: linear-gradient(135deg, #4f8ff7, #6ca6ff);
            color: #fff;
            font-size: 0.95rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.15s;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            box-shadow: 0 4px 16px rgba(79,143,247,0.25);
        }
        .spk-hero-btn:active { transform: scale(0.97); filter: brightness(0.92); }
        [data-theme="dark"] .spk-hero {
            background: linear-gradient(135deg, rgba(79,143,247,0.12), rgba(79,143,247,0.04));
            border-color: rgba(79,143,247,0.25);
        }
        [data-theme="dark"] .spk-hero-pill { background: rgba(79,143,247,0.15); }

        /* Divider between hero and free practice */
        .spk-divider {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 8px 0 16px;
            font-size: 0.72rem;
            font-weight: 600;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .spk-divider::before,
        .spk-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--border);
        }
        [data-theme="dark"] .spk-divider::before,
        [data-theme="dark"] .spk-divider::after {
            background: rgba(255,255,255,0.08);
        }

        /* Compact stats bar (Shadow bottom) */
        .spk-stats-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 12px;
            align-items: center;
            padding: 10px 14px;
            border-radius: 12px;
            background: var(--surface);
            font-size: 0.72rem;
            font-weight: 600;
            color: var(--muted);
            margin-top: 4px;
        }
        .spk-stat { white-space: nowrap; }
        .spk-stat--warn { color: var(--amber); }
        [data-theme="dark"] .spk-stats-bar { background: rgba(255,255,255,0.04); }

        /* Compact recent chips (Talk) */
        .ts-recent-compact {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
            margin-bottom: 16px;
        }
        .ts-recent-label {
            font-size: 0.72rem;
            font-weight: 700;
            color: var(--muted);
            margin-right: 2px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .ts-recent-chip {
            padding: 6px 12px;
            border-radius: 99px;
            border: 1px solid var(--border);
            background: var(--surface);
            font-size: 0.78rem;
            font-weight: 500;
            color: var(--text);
            cursor: pointer;
            transition: all 0.15s;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }
        .ts-recent-chip:hover { background: var(--hover); border-color: var(--blue); }
        .ts-recent-chip:active { background: rgba(79,143,247,0.08); border-color: var(--blue); }
        [data-theme="dark"] .ts-recent-chip { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
        [data-theme="dark"] .ts-recent-chip:hover { background: rgba(255,255,255,0.08); }

        /* Random button in tabs row */
        .ts-tab--random {
            flex: 0 0 auto;
            padding: 8px 10px;
            font-size: 0.92rem;
        }

        /* Talk Priming Panel */
        .talk-priming-panel { padding: 24px 16px; text-align: center; }
        .talk-priming-title { font-size: 18px; font-weight: 600; margin-bottom: 20px; color: var(--text-primary); }
        .talk-priming-words { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 24px; }
        .talk-priming-word-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 16px; min-width: 100px; }
        .talk-priming-word { font-size: 16px; font-weight: 600; color: var(--primary); }
        .talk-priming-zh { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
        .talk-priming-start-btn { background: var(--primary); color: #fff; border: none; border-radius: 12px; padding: 12px 32px; font-size: 16px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; touch-action: manipulation; }
        .talk-priming-start-btn:active { opacity: 0.8; }
        [data-theme="dark"] .talk-priming-word-card { background: var(--card-bg-dark, #1e1e1e); border-color: var(--border-color-dark, #333); }

        /* Micro Quiz — light 模式翻卡后微测 */
        .micro-quiz-panel {
            position: fixed;
            bottom: 0; left: 0; right: 0;
            background: var(--card-bg, #fff);
            border-top: 2px solid var(--primary);
            padding: 20px 16px calc(32px + env(safe-area-inset-bottom));
            z-index: 200;
            border-radius: 16px 16px 0 0;
            box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
        }
        .micro-quiz-title { font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; }
        .micro-quiz-word { font-size: 24px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
        .micro-quiz-sub { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }
        .micro-quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .micro-quiz-option {
            padding: 12px 8px; border: 1.5px solid var(--border-color);
            border-radius: 10px; background: var(--bg-secondary, #f5f5f5);
            font-size: 14px; cursor: pointer; transition: all 0.15s;
            color: var(--text-primary); min-height: 44px;
        }
        .micro-quiz-option:active { transform: scale(0.97); }
        .micro-quiz-option.micro-quiz-correct { border-color: #22c55e; background: rgba(34,197,94,0.08); }
        .micro-quiz-option.micro-quiz-wrong { border-color: #ef4444; background: rgba(239,68,68,0.08); }
        .micro-quiz-feedback { margin-top: 12px; font-size: 14px; font-weight: 600; text-align: center; }
        .micro-quiz-feedback.correct { color: #22c55e; }
        .micro-quiz-feedback.wrong { color: #ef4444; }
        [data-theme="dark"] .micro-quiz-panel { background: var(--card-bg-dark, #1e1e1e); }
        [data-theme="dark"] .micro-quiz-option { background: var(--bg-secondary-dark, #2a2a2a); border-color: var(--border-color-dark, #444); }
        .micro-quiz-progress { font-size: 12px; color: var(--text-secondary); text-align: right; margin-bottom: 4px; font-weight: 600; }

        /* L2 积压提示 banner */
        .l2-backlog-banner {
            display: flex; flex-direction: column; align-items: center;
            background: linear-gradient(135deg, rgba(234,179,8,0.12), rgba(249,115,22,0.08));
            border: 1px solid rgba(234,179,8,0.3);
            border-radius: 12px; padding: 12px 16px; margin: 8px 16px;
            text-align: center; gap: 2px;
        }
        .l2-backlog-icon { font-size: 20px; }
        .l2-backlog-text { font-size: 14px; font-weight: 600; color: var(--text-primary); }
        .l2-backlog-sub { font-size: 12px; color: var(--text-secondary); }
        [data-theme="dark"] .l2-backlog-banner {
            background: linear-gradient(135deg, rgba(234,179,8,0.08), rgba(249,115,22,0.06));
            border-color: rgba(234,179,8,0.2);
        }

        /* 场景选择 */
        .talk-categories { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
        .talk-cat-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s; font-size: 0.85rem; color: var(--text); touch-action: manipulation; }
        .talk-cat-btn:hover, .talk-cat-btn.selected { border-color: var(--blue); background: rgba(79,143,247,0.08); color: var(--blue); }
        .talk-cat-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(79,143,247,0.35); }
        .talk-cat-icon { font-size: 1.6rem; }
        .talk-custom-input { width: 100%; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 16px; background: var(--surface); color: var(--text); margin-top: 4px; box-sizing: border-box; }
        .talk-custom-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(79,143,247,0.2); }

        /* 角色卡 */
        .talk-role-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 16px; }
        .talk-role-scene { font-size: 0.78rem; color: var(--muted); margin-bottom: 10px; }
        .talk-role-row { display: flex; gap: 12px; }
        .talk-role-col { flex: 1; }
        .talk-role-label { font-size: 0.7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
        .talk-role-name { font-size: 0.95rem; font-weight: 600; color: var(--text); }
        .talk-role-desc { font-size: 0.8rem; color: var(--muted); margin-top: 2px; }

        /* 两行反馈 */
        .talk-feedback-row { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; background: rgba(79,143,247,0.06); border-radius: 8px; margin-top: 6px; font-size: 0.78rem; }
        .talk-feedback-natural { color: var(--text); }
        .talk-feedback-natural em { color: var(--blue); font-style: normal; font-weight: 600; }
        .talk-feedback-words { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
        .talk-word-used { background: rgba(52,199,89,0.18); color: #15803d; border-radius: 8px; padding: 1px 7px; font-weight: 600; }
        .talk-word-used::before { content: '\2713 '; }
        .talk-word-todo { background: rgba(0,0,0,0.05); color: var(--muted); border-radius: 8px; padding: 1px 7px; }
        .talk-word-todo::before { content: '\25CB '; }

        /* 总结卡 */
        .talk-summary { padding: 4px 0; }
        .talk-summary-score { display: flex; gap: 16px; margin-bottom: 16px; }
        .talk-score-item { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; text-align: center; }
        .talk-score-num { font-size: 1.4rem; font-weight: 700; color: var(--blue); }
        .talk-score-label { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
        .talk-summary-section { margin-bottom: 12px; }
        .talk-summary-title { font-size: 0.75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
        .talk-summary-item { font-size: 0.85rem; color: var(--text); line-height: 1.5; padding: 4px 0; border-bottom: 1px solid var(--border); }
        .talk-summary-item:last-child { border-bottom: none; }
        .talk-summary-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
        .talk-summary-btn { flex: 1; min-width: 100px; padding: 10px 8px; border-radius: 10px; font-size: 0.82rem; font-weight: 600; cursor: pointer; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); transition: border-color 0.2s, background 0.2s, color 0.2s; text-align: center; touch-action: manipulation; }
        .talk-summary-btn:hover { border-color: var(--blue); color: var(--blue); background: rgba(79,143,247,0.06); }
        .talk-summary-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(79,143,247,0.35); }
        .talk-summary-btn.primary { background: var(--blue); color: #fff; border-color: var(--blue); font-size: 1rem; padding: 14px 24px; font-weight: 700; box-shadow: 0 6px 20px rgba(75,132,243,0.25); }
        .talk-summary-btn.primary:hover { background: #3a7de0; }
        .talk-summary-btn:not(.primary) { font-size: 0.78rem; padding: 10px 12px; opacity: 0.85; }

        /* ── 三维评分环 ── */
        .talk-summary-scores { display: flex; justify-content: center; gap: 20px; margin-bottom: 18px; }
        .talk-score-ring { display: flex; flex-direction: column; align-items: center; position: relative; }
        .talk-score-svg { width: 72px; height: 72px; }
        .talk-score-ring-inner { position: absolute; top: 0; left: 0; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }
        .talk-score-ring-num { font-size: 1.25rem; font-weight: 800; color: var(--text); }
        .talk-score-ring-label { font-size: 0.68rem; font-weight: 600; color: var(--muted); margin-top: 4px; text-align: center; }

        /* ── 词汇进展条 ── */
        .talk-summary-word-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 10px 12px; background: var(--hover); border-radius: 10px; }
        .talk-word-bar-label { font-size: 0.72rem; font-weight: 600; color: var(--muted); flex-shrink: 0; }
        .talk-word-bar-track { flex: 1; height: 6px; border-radius: 3px; background: rgba(0,0,0,0.08); overflow: hidden; }
        .talk-word-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--green), #2dd87b); transition: width 0.8s ease; }
        .talk-word-bar-num { font-size: 0.82rem; font-weight: 700; color: var(--green); flex-shrink: 0; }
        [data-theme="dark"] .talk-word-bar-track { background: rgba(255,255,255,0.1); }

        /* ── 值得记住的表达 ── */
        .talk-key-phrases { margin-bottom: 14px; }
        .talk-keyphrase-card { padding: 10px 12px; border-radius: 10px; background: rgba(79,143,247,0.06); border-left: 3px solid var(--blue); margin-bottom: 8px; }
        .talk-keyphrase-phrase { font-size: 0.9rem; font-weight: 700; color: var(--text); margin-bottom: 3px; }
        .talk-keyphrase-meaning { font-size: 0.78rem; color: var(--muted); }
        .talk-keyphrase-example { font-size: 0.78rem; color: var(--blue); font-style: italic; margin-top: 4px; }
        [data-theme="dark"] .talk-keyphrase-card { background: rgba(79,143,247,0.1); }

        /* ── 语法重点 ── */
        .talk-grammar-focus { margin-bottom: 14px; }
        .talk-grammar-card { padding: 10px 12px; border-radius: 10px; background: rgba(139,108,246,0.06); border-left: 3px solid var(--purple); font-size: 0.84rem; color: var(--text); line-height: 1.55; }
        [data-theme="dark"] .talk-grammar-card { background: rgba(139,108,246,0.12); }

        /* ── goodPoints / improvements 增强 ── */
        .talk-summary-feedback { margin-bottom: 14px; }
        .talk-summary-item--good { padding-left: 10px; border-left: 3px solid var(--green); margin-bottom: 6px; border-bottom: none; }
        .talk-summary-item--improve { padding-left: 10px; border-left: 3px solid var(--amber); margin-bottom: 6px; border-bottom: none; }

        /* ── 未用词使用建议 ── */
        .talk-unused-section { margin-bottom: 14px; }
        .talk-unused-tips { display: flex; flex-direction: column; gap: 8px; }
        .talk-unused-tip-card { padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,0.03); border: 1px solid var(--border); }
        .talk-unused-tip-word { font-size: 0.85rem; font-weight: 700; color: var(--amber); margin-bottom: 3px; }
        .talk-unused-tip-text { font-size: 0.78rem; color: var(--text); line-height: 1.5; }
        [data-theme="dark"] .talk-unused-tip-card { background: rgba(255,255,255,0.04); }

        /* ═══ V8: Compact Talk Summary ═══ */
        .talk-summary--compact {
            display: flex; flex-direction: column; align-items: center;
            max-width: 400px; margin: 0 auto; padding: 0 16px;
        }
        /* Hero zone */
        .ts-hero-compact { text-align: center; padding: 20px 0 8px; }
        .ts-hero-ring { position: relative; width: 130px; height: 130px; margin: 0 auto 12px; }
        .ts-hero-ring svg { width: 130px; height: 130px; }
        .ts-ring-bg { fill: none; stroke: var(--border); stroke-width: 6; opacity: 0.25; }
        .ts-ring-fill { fill: none; stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1s ease; }
        .ts-ring-fill--S { stroke: var(--green); }
        .ts-ring-fill--A { stroke: var(--blue); }
        .ts-ring-fill--B { stroke: var(--amber); }
        .ts-ring-fill--C { stroke: var(--red); }
        .ts-hero-center {
            position: absolute; inset: 0; display: flex; flex-direction: column;
            align-items: center; justify-content: center;
        }
        .ts-hero-num { font-size: 2rem; font-weight: 800; color: var(--text); line-height: 1; }
        .ts-hero-grade { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-top: 2px; }
        .ts-hero-label { font-size: 0.78rem; color: var(--muted); font-weight: 600; margin-bottom: 10px; }
        .ts-hero-takeaway { font-size: 0.92rem; color: var(--text); line-height: 1.55; max-width: 320px; margin: 0 auto; }
        /* Key phrase chips */
        .ts-keyphrase-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
        .ts-keyphrase-chip {
            padding: 5px 14px; border-radius: 99px; font-size: 0.8rem; font-weight: 600;
            background: rgba(79,143,247,0.08); color: var(--blue); white-space: nowrap;
        }
        [data-theme="dark"] .ts-keyphrase-chip { background: rgba(79,143,247,0.15); }
        /* Action buttons */
        .ts-actions-compact { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
        .ts-actions-compact .talk-summary-btn.primary {
            width: 100%; padding: 14px 20px; border-radius: 16px; font-size: 0.95rem; font-weight: 700;
            background: linear-gradient(135deg, #4f8ff7, #6ca6ff); color: #fff; border: none;
            box-shadow: 0 4px 16px rgba(79,143,247,0.25); cursor: pointer;
        }
        .ts-actions-compact .talk-summary-btn.primary:active { transform: scale(0.97); }
        .ts-actions-row { display: flex; gap: 10px; }
        .ts-actions-row .talk-summary-btn {
            flex: 1; padding: 10px 14px; border-radius: 12px; font-size: 0.85rem; font-weight: 600;
            background: none; border: 1.5px solid var(--border); color: var(--text); cursor: pointer;
        }
        .ts-actions-row .talk-summary-btn:active { background: var(--hover); }
        [data-theme="dark"] .ts-actions-row .talk-summary-btn { border-color: rgba(255,255,255,0.12); }
        /* Details toggle */
        .ts-details-section { width: 100%; margin-top: 28px; border-top: 1px solid var(--border); padding-top: 4px; }
        .ts-details-toggle {
            display: flex; align-items: center; justify-content: center; gap: 6px;
            padding: 14px 0; font-size: 0.85rem; color: var(--muted); font-weight: 600;
            cursor: pointer; width: 100%; background: none; border: none;
        }
        .ts-details-toggle:active { color: var(--text); }
        .ts-details-chevron { display: inline-block; transition: transform 0.2s; font-size: 0.7rem; }
        .ts-details-chevron.open { transform: rotate(180deg); }
        /* Details body */
        .ts-details-body { display: flex; flex-direction: column; gap: 16px; padding: 0 0 20px; text-align: left; }
        .ts-subscores-row { display: flex; justify-content: center; gap: 24px; padding: 8px 0; }
        .ts-subscore-item { text-align: center; min-width: 64px; }
        .ts-subscore-num { font-size: 1.15rem; font-weight: 800; color: var(--text); }
        .ts-subscore-label { font-size: 0.7rem; color: var(--muted); font-weight: 600; margin-top: 2px; }
        /* Full review button in details */
        .ts-review-btn {
            display: flex; align-items: center; justify-content: center; gap: 6px;
            padding: 12px 20px; border-radius: 12px; font-size: 0.85rem; font-weight: 600;
            border: 1.5px solid var(--blue); color: var(--blue); background: rgba(79,143,247,0.04);
            cursor: pointer; margin-top: 4px;
        }
        .ts-review-btn:active { background: rgba(79,143,247,0.1); }
        [data-theme="dark"] .ts-review-btn { background: rgba(79,143,247,0.08); }
        /* Review overlay */
        .talk-review-overlay {
            position: fixed; inset: 0; z-index: 997; background: var(--bg, #f3f6fb);
            display: flex; flex-direction: column; animation: dpFadeIn 0.2s ease;
        }
        [data-theme="dark"] .talk-review-overlay { background: var(--bg, #0f1923); }
        .talk-review-header {
            display: flex; align-items: center; padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px; border-bottom: 1px solid var(--border);
            gap: 12px; flex-shrink: 0;
        }
        .talk-review-header-title { flex: 1; font-size: 0.95rem; font-weight: 700; }
        .talk-review-close-btn {
            width: 36px; height: 36px; border-radius: 50%; border: none;
            background: var(--hover); color: var(--text); font-size: 1.1rem;
            display: flex; align-items: center; justify-content: center; cursor: pointer;
        }
        .talk-review-close-btn:active { background: var(--border); }
        [data-theme="dark"] .talk-review-close-btn { background: rgba(255,255,255,0.08); }
        .talk-review-body { flex: 1; overflow-y: auto; padding: 16px; min-height: 0; }
        @media (max-width: 420px) {
            .ts-hero-ring { width: 110px; height: 110px; }
            .ts-hero-ring svg { width: 110px; height: 110px; }
            .ts-hero-num { font-size: 1.7rem; }
            .ts-subscores-row { gap: 16px; }
            .ts-actions-row .talk-summary-btn { padding: 12px 14px; min-height: 44px; }
        }

        /* Typing animation */
        .talk-typing { display: flex; gap: 4px; align-items: center; height: 18px; }
        .talk-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: talkDot 1.2s ease-in-out infinite; }
        .talk-typing span:nth-child(2) { animation-delay: 0.2s; }
        .talk-typing span:nth-child(3) { animation-delay: 0.4s; }
        @keyframes talkDot { 0%,80%,100%{transform:scale(0.6);opacity:0.4} 40%{transform:scale(1);opacity:1} }
        @media (prefers-reduced-motion: reduce) {
          .talk-typing span { animation: none; opacity: 0.5; }
          .talk-ready-ring { animation: none; }
          .talk-tracker-chip, .talk-dot, .talk-cat-btn, .talk-summary-btn, .talk-hint-chip, .talk-mic-btn, .talk-exit-btn, .talk-mic-circle, .talk-skip-btn, .talk-speed-btn { transition: none; }
          .talk-mic-circle:not(.recording), .talk-tracker-chip:not(.used) { animation: none; }
        }

        /* Hints */
        .talk-hints-bar { display: flex; align-items: center; gap: 6px; padding: 8px 0 4px; flex-wrap: wrap; }
        .talk-hints-label { font-size: 0.78rem; color: var(--muted); flex-shrink: 0; }
        .talk-hint-chip { padding: 4px 11px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; touch-action: manipulation; }
        .talk-hint-chip:hover { border-color: var(--blue); color: var(--blue); background: rgba(79,143,247,0.06); }
        .talk-hint-chip:active, .talk-hint-chip.active { background: rgba(0,122,255,0.08); border-color: var(--blue); color: var(--blue); }
        .talk-hint-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(79,143,247,0.35); }
        .talk-hint-tooltip { display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px; padding: 7px 12px; font-size: 0.84rem; cursor: pointer; animation: speakPhaseIn 0.2s ease-out; }
        .talk-tooltip-close { margin-left: auto; color: var(--muted); font-size: 0.75rem; }

        /* Input / Recording */
        .talk-input-area { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0 4px; }
        .talk-mic-btn { display: flex; align-items: center; gap: 9px; padding: 13px 28px; border-radius: 28px; border: none; background: linear-gradient(135deg,#4f8ff7,#8b6cf6); color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer; box-shadow: 0 4px 18px rgba(79,143,247,0.35); transition: transform 0.2s, box-shadow 0.2s; touch-action: manipulation; }
        .talk-mic-btn:hover { box-shadow: 0 6px 24px rgba(79,143,247,0.45); }
        .talk-mic-btn:active { transform: scale(0.96); }
        .talk-mic-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(79,143,247,0.5), 0 4px 18px rgba(79,143,247,0.35); }
        /* Large circular mic button for AI Talk */
        .talk-mic-circle { position: relative; width: 80px; height: 80px; border-radius: 50%; border: none; background: linear-gradient(135deg, #4f8ff7, #6ca6ff); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 28px rgba(79,143,247,0.3); transition: transform 0.18s, box-shadow 0.18s, background 0.18s; touch-action: manipulation; margin: 0 auto; flex-shrink: 0; }
        .talk-mic-circle-icon { font-size: 32px; line-height: 1; }
        .talk-mic-circle:not(.recording) { animation: talk-mic-pulse 2s ease-in-out infinite; }
        .talk-mic-circle.recording { background: linear-gradient(135deg, #e53935, #ff6f60); box-shadow: 0 8px 28px rgba(229,57,53,0.3); animation: none; }
        .talk-mic-circle:active { transform: scale(0.94); }
        .talk-mic-circle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(79,143,247,0.4), 0 8px 28px rgba(79,143,247,0.3); }
        @keyframes talk-mic-pulse { 0%,100% { box-shadow: 0 8px 28px rgba(79,143,247,0.3); } 50% { box-shadow: 0 8px 28px rgba(79,143,247,0.3), 0 0 0 12px rgba(79,143,247,0.1); } }
        [data-theme="dark"] .talk-mic-circle:not(.recording) { box-shadow: 0 8px 28px rgba(79,143,247,0.2); }
        [data-theme="dark"] .talk-mic-circle.recording { box-shadow: 0 8px 28px rgba(229,57,53,0.2); }

        /* Skip button */
        .talk-skip-btn { padding: 8px 16px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); color: var(--muted); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; touch-action: manipulation; flex-shrink: 0; }
        .talk-skip-btn:hover { border-color: var(--blue); color: var(--blue); background: rgba(79,143,247,0.06); }
        .talk-skip-btn:active { transform: scale(0.96); }

        .talk-input-hint { font-size: 0.75rem; color: var(--muted); }
        .talk-recording-area { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0 4px; }
        .talk-rec-label { font-size: 0.82rem; color: var(--red); font-weight: 600; }
        .talk-evaluating { display: flex; flex-direction: column; align-items: center; padding: 12px 0; }

        /* Exit — Secondary button */
        .talk-exit-btn { margin-top: 8px; align-self: center; padding: 8px 18px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; touch-action: manipulation; }
        .talk-exit-btn:hover { background: var(--hover); border-color: var(--blue); color: var(--blue); }
        .talk-exit-btn:active { transform: scale(0.97); }
        .talk-exit-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(79,143,247,0.35); }
        [data-theme="dark"] .talk-exit-btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: var(--text); }
        [data-theme="dark"] .talk-exit-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(91,156,247,0.5); color: #5b9cf7; }

        /* Preview words on setup */
        .talk-preview-words { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0 4px; }
        .talk-preview-pill { background: var(--hover); border-radius: 12px; padding: 3px 10px; font-size: 0.8rem; color: var(--muted); }
        .talk-preview-more { font-size: 0.78rem; color: var(--muted); align-self: center; }

        /* Done words */
        .talk-done-words { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 10px; }
        .talk-done-words-label { width: 100%; text-align: center; font-size: 0.78rem; color: var(--muted); margin-bottom: 4px; }

        [data-theme="dark"] .talk-bubble.ai { background: var(--card-bg); }
        [data-theme="dark"] .talk-turn-card { background: linear-gradient(180deg, rgba(24,32,50,0.98), rgba(18,24,39,0.98)); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28); }
        [data-theme="dark"] .talk-helper-card,
        [data-theme="dark"] .talk-history-sheet,
        [data-theme="dark"] .talk-live-turn { background: var(--card-bg); }
        [data-theme="dark"] .talk-inline-alert { background: rgba(255,59,48,0.14); color: #ffb4ae; }
        [data-theme="dark"] .talk-status-chip.speaking { color: #8bb7ff; background: rgba(79,143,247,0.18); }
        [data-theme="dark"] .talk-status-chip.ready { color: #ffb46b; background: rgba(249,115,22,0.18); }
        [data-theme="dark"] .talk-status-chip.listening { color: #ff9f99; background: rgba(255,59,48,0.18); }
        [data-theme="dark"] .talk-status-chip.thinking { color: #cab8ff; background: rgba(139,108,246,0.18); }
        [data-theme="dark"] .talk-summary-hero { background: linear-gradient(180deg, rgba(79,143,247,0.18), rgba(79,143,247,0.06)); border-color: rgba(79,143,247,0.2); }
        [data-theme="dark"] .talk-kw-badge { background: rgba(52,199,89,0.12); color: #4cd964; }

        /* Shadow sentence card improvements */
        .speak-sentence-zh { margin-top: 8px; font-size: 0.82rem; color: var(--muted); text-align: center; }
        .speak-sentence-key { font-weight: 700; color: var(--blue); }
        .speak-sentence-dash { opacity: 0.5; }
        mark.shadow-kw-hl { background: rgba(79,143,247,0.18); color: var(--blue); border-radius: 3px; padding: 0 2px; font-weight: 700; }
        [data-theme="dark"] mark.shadow-kw-hl { background: rgba(79,143,247,0.25); }

        /* Shadow 手动跟读按钮 */
        .speak-go-record-btn { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 13px 32px; border-radius: 28px; border: none; background: linear-gradient(135deg, #4f8ff7, #8b6cf6); color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer; box-shadow: 0 4px 18px rgba(79,143,247,0.35); transition: transform 0.15s; }
        .speak-go-record-btn:active { transform: scale(0.96); }
        .speak-phase-listen { display: flex; flex-direction: column; align-items: center; }

        /* ── AI Talk 词汇追踪器 ──────────────────────────────────────────── */
        .talk-word-tracker { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 4px; }
        .talk-tracker-chip { display: flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--hover); color: var(--muted); font-size: 0.78rem; font-weight: 600; transition: background 0.3s, border-color 0.3s, color 0.3s; cursor: pointer; }
        .talk-tracker-chip.used { background: rgba(76,175,80,0.15); border-color: #4caf50; color: #4caf50; }
        .talk-tracker-chip:not(.used) { animation: word-pulse 2s ease-in-out infinite; }
        @keyframes word-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(0.98); } }
        [data-theme="dark"] .talk-tracker-chip.used { color: #66bb6a; background: rgba(76,175,80,0.18); border-color: #66bb6a; }
        .tracker-check { font-size: 0.72rem; font-weight: 800; }

        /* ── AI Talk 反馈改进提示 ─────────────────────────────────────────── */
        .talk-bubble-feedbackex { margin-top: 4px; font-size: 0.76rem; opacity: 0.8; }
        .talk-bubble.user .talk-bubble-feedbackex { color: rgba(255,255,255,0.8); }

        /* ── 自动开录提示 ──────────────────────────────────────────────── */
        .talk-autorecord-hint { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 12px 0; color: var(--muted); font-size: 0.82rem; }
        .talk-autorecord-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: talkDot 0.8s ease-in-out infinite; }

        /* ── AI Talk 思考倒计时 ──────────────────────────────────────────── */
        .talk-ready-ring { width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--blue); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 800; color: var(--blue); margin-bottom: 10px; animation: talkRingPulse 1s ease-in-out infinite; }
        @keyframes talkRingPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.08);opacity:0.75} }
        .talk-mic-ready { background: rgba(79,143,247,0.12) !important; color: var(--blue) !important; border: 1.5px solid var(--blue) !important; box-shadow: none !important; }
        [data-theme="dark"] .talk-mic-ready { background: rgba(79,143,247,0.18) !important; }

        /* ── Shadow 开始页重设计 ──────────────────────────────────────── */
        .shadow-pick-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
        .shadow-pick-title { font-size: 1.05rem; font-weight: 700; color: var(--text); }
        .shadow-pick-today { font-size: 0.78rem; color: var(--green); font-weight: 600; }

        .shadow-source-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
        .shadow-source-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--card-bg); cursor: pointer; text-align: left; transition: all 0.18s; }
        .shadow-source-card:active { transform: scale(0.97); }
        .shadow-source-card.active { border-color: var(--blue); background: rgba(79,143,247,0.08); }
        [data-theme="dark"] .shadow-source-card.active { background: rgba(79,143,247,0.14); }
        .shadow-src-icon { font-size: 1.15rem; }
        .shadow-src-name { font-size: 0.82rem; font-weight: 700; color: var(--text); }
        .shadow-src-count { font-size: 1.1rem; font-weight: 800; color: var(--blue); }
        .shadow-src-desc { font-size: 0.7rem; color: var(--muted); margin-top: 1px; }

        /* 预览词 */
        .shadow-preview-block { margin-bottom: 14px; }
        .shadow-preview-label { display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
        .shadow-preview-meta { font-weight: 400; }
        .shadow-preview-chips { display: flex; flex-direction: column; gap: 6px; }
        .shadow-preview-chip { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: var(--hover); }
        .shadow-chip-srs-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
        .srs-new       { background: var(--muted); }
        .srs-learning  { background: var(--blue); }
        .srs-hard      { background: var(--red); }
        .srs-review    { background: var(--accent); }
        .srs-mastered  { background: var(--green); }
        .shadow-chip-word { font-size: 0.88rem; font-weight: 700; color: var(--text); min-width: 70px; }
        .shadow-chip-zh   { font-size: 0.78rem; color: var(--muted); flex: 1; }
        .shadow-chip-done { font-size: 0.7rem; font-weight: 700; color: var(--green); margin-left: auto; }
        .shadow-preview-more { font-size: 0.75rem; color: var(--muted); padding: 4px 10px; text-align: center; }
        .shadow-srs-legend { display: flex; gap: 12px; margin-top: 6px; justify-content: flex-end; }
        .shadow-srs-legend span { display: flex; align-items: center; gap: 4px; font-size: 0.68rem; color: var(--muted); }

        /* ── Shadow 录音状态重设计 ────────────────────────────────────── */
        /* 整个 speak zone 录音时加红色边框 */
        .speak-phase-speak.is-recording { border: 2px solid rgba(255,59,48,0.35); border-radius: 16px; background: rgba(255,59,48,0.03); padding: 12px; }
        [data-theme="dark"] .speak-phase-speak.is-recording { background: rgba(255,59,48,0.06); }

        /* 准备区域（可点击）*/
        .spk-ready-area { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; padding: 12px 0; }
        .spk-countdown-num { font-size: 2.5rem; font-weight: 700; color: var(--blue); animation: countdownPop 0.7s ease-out; }
        @keyframes countdownPop { 0%{transform:scale(1.6);opacity:0.3} 100%{transform:scale(1);opacity:1} }
        .spk-ready-label { font-size: 0.82rem; color: var(--muted); }

        /* 参考文本（录音中）*/
        .spk-ref-text { text-align: center; margin-bottom: 10px; }
        .spk-ref-target { display: block; font-size: 1.05rem; font-weight: 700; color: var(--text); }
        .spk-ref-ipa    { display: block; font-size: 0.78rem; color: var(--blue); margin-top: 2px; }

        /* 大波形 */
        .spk-vis-lg { height: 44px; gap: 5px; margin: 6px 0; }
        .spk-vis-lg .speak-vis-bar { width: 6px; min-height: 10px; border-radius: 3px; background: rgba(255,59,48,0.8); }

        /* VAD 状态区：固定高度容器，防止录音/静音切换时布局抖动 */
        .spk-vad-status { position: relative; width: 100%; height: 28px; margin: 4px 0; }
        .spk-vad-status .spk-rec-label,
        .spk-vad-status .spk-vad-bar-wrap {
            position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
            transition: opacity 0.2s ease;
        }
        .spk-vad-status .spk-rec-label.is-hidden { opacity: 0; pointer-events: none; }
        .spk-vad-status .spk-vad-bar-wrap { opacity: 0; pointer-events: none; }
        .spk-vad-status .spk-vad-bar-wrap.is-visible { opacity: 1; pointer-events: auto; }
        .spk-rec-label { font-size: 0.75rem; color: var(--red); text-align: center; opacity: 0.85; }
        .spk-vad-bar-wrap { width: 100%; text-align: center; }
        .spk-vad-bar-label { font-size: 0.72rem; color: var(--muted); margin-bottom: 4px; }
        .spk-vad-bar-track { height: 4px; background: var(--hover); border-radius: 4px; overflow: hidden; }
        .spk-vad-bar-fill { height: 100%; background: #f97316; border-radius: 4px; transition: width 0.1s linear; }
        [data-theme="dark"] .spk-vad-bar-track { background: rgba(255,255,255,0.1); }

        /* 说完了按钮 — 更大更显眼 */
        .spk-done-btn { margin-top: 10px; padding: 10px 28px; border-radius: 24px; border: none; background: var(--red); color: #fff; font-size: 0.92rem; font-weight: 700; cursor: pointer; box-shadow: 0 3px 12px rgba(255,59,48,0.3); }
        .spk-done-btn:active { transform: scale(0.96); }

        /* 重听按钮 */
        .speak-listen-mini { display: flex; align-items: center; gap: 4px; }

        /* ── Shadow 今日积累条 ────────────────────────────────────────── */
        .shadow-streak { font-size: 0.8rem; font-weight: 700; color: var(--orange, #f97316); }
        .shadow-today-bar { display: flex; align-items: center; justify-content: space-around; background: var(--hover); border-radius: 12px; padding: 10px 8px; margin-bottom: 14px; }
        .shadow-today-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
        .shadow-today-num { font-size: 1.3rem; font-weight: 800; color: var(--text); }
        .shadow-today-num.green { color: var(--green); }
        .shadow-today-num.blue  { color: var(--blue); }
        .shadow-today-label { font-size: 0.68rem; color: var(--muted); }
        .shadow-today-divider { width: 1px; height: 28px; background: var(--border); }
        .shadow-done-today { margin-top: 8px; font-size: 0.8rem; color: var(--muted); text-align: center; }

        /* ── Shadow 首页重排（首屏显示完整）─────────────────────────── */
        .shp-toprow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
        .shp-title-group { display: flex; align-items: center; gap: 6px; }
        .shp-title  { font-size: 1rem; font-weight: 700; color: var(--text); }
        .shp-streak { font-size: 0.78rem; font-weight: 700; color: #f97316; }
        .shp-today-inline { display: flex; align-items: center; gap: 4px; font-size: 0.78rem; font-weight: 600; }
        .shp-today-inline .shp-green { color: var(--green); }
        .shp-today-inline .shp-blue  { color: var(--blue); }
        .shp-sep { color: var(--border); }

        /* Source pills */
        .shp-pills { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; scrollbar-width: none; }
        .shp-pills::-webkit-scrollbar { display: none; }
        .shp-pill { display: flex; align-items: center; gap: 4px; white-space: nowrap; padding: 5px 10px; border-radius: 20px; border: 1.5px solid var(--border); background: var(--card-bg); font-size: 0.78rem; font-weight: 600; cursor: pointer; flex-shrink: 0; transition: all 0.15s; }
        .shp-pill em { font-style: normal; color: var(--blue); font-weight: 800; }
        .shp-pill.active { border-color: var(--blue); background: rgba(79,143,247,0.10); }

        /* Preview tags */
        .shp-preview { margin-bottom: 12px; }
        .shp-preview-label { font-size: 0.72rem; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
        .shp-preview-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
        .shp-tag { display: flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 12px; background: var(--hover); font-size: 0.78rem; font-weight: 600; color: var(--text); }
        .shp-tag b { color: var(--green); font-size: 0.68rem; }
        .shp-tag-more { color: var(--muted); font-weight: 400; }
        .shp-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
        .shp-legend { display: flex; flex-wrap: wrap; gap: 8px; }
        .shp-legend span { display: flex; align-items: center; gap: 3px; font-size: 0.66rem; color: var(--muted); }

        /* Bottom bar */
        .shp-bottom { margin-top: 4px; }
        .shp-spec { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--muted); margin-bottom: 10px; justify-content: center; }
        .shp-start-btn { width: 100%; }

        /* ── Shadow 首页 v2（平衡版）──────────────────────────────────── */
        .shp-toprow { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
        .shp-title-group { display:flex; align-items:center; gap:8px; }
        .shp-title  { font-size:1.05rem; font-weight:700; color:var(--text); }
        .shp-streak { font-size:0.8rem; font-weight:700; color:#f97316; }
        .shp-today-chip { font-size:0.76rem; font-weight:600; color:var(--muted); }
        .shp-deck-row { margin-bottom: 12px; }
        .shp-deck-chip {
            display: inline-flex; align-items: center; gap: 4px;
            font-size: 0.78rem; font-weight: 600;
            color: var(--blue); background: rgba(79,143,247,0.08);
            border-radius: 20px; padding: 4px 10px 4px 8px;
            cursor: pointer; transition: background 0.15s;
            -webkit-tap-highlight-color: transparent;
        }
        .shp-deck-chip:active { background: rgba(79,143,247,0.16); }
        .shp-deck-chip-arrow { opacity: 0.5; font-size: 0.85rem; }
        .shp-blue { color:var(--blue); }

        /* Shadow Dimension chips */
        .sdim-chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
        .sdim-chip { display:inline-flex; align-items:center; gap:4px; padding:7px 12px; border-radius:10px; border:1.5px solid var(--border); background:var(--surface); font-size:0.8rem; font-weight:600; color:var(--text); cursor:pointer; transition:all 0.15s; min-height:36px; -webkit-tap-highlight-color:transparent; }
        .sdim-chip:active { transform:scale(0.96); }
        .sdim-chip.active { border-color:var(--blue); background:rgba(79,143,247,0.1); color:var(--blue); }
        .sdim-chip-icon { font-size:1rem; }
        [data-theme="dark"] .sdim-chip { background:rgba(255,255,255,0.06); }
        [data-theme="dark"] .sdim-chip.active { background:rgba(79,143,247,0.2); }

        .sdim-empty { padding:14px; text-align:center; font-size:0.85rem; color:var(--muted); background:var(--surface); border-radius:12px; margin-bottom:12px; }
        [data-theme="dark"] .sdim-empty { background:rgba(255,255,255,0.04); }

        /* Manual selection */
        .sdim-manual { margin-bottom:12px; }
        .sdim-manual-search { width:100%; padding:10px 14px; border:1.5px solid var(--border); border-radius:10px; font-size:0.88rem; background:var(--surface); color:var(--text); outline:none; margin-bottom:8px; }
        .sdim-manual-search:focus { border-color:var(--blue); }
        [data-theme="dark"] .sdim-manual-search { background:rgba(255,255,255,0.06); }
        .sdim-manual-count { font-size:0.78rem; color:var(--muted); margin-bottom:8px; }
        .sdim-manual-max { color:var(--red); font-weight:700; margin-left:6px; }
        .sdim-manual-list { max-height:200px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
        .sdim-manual-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; cursor:pointer; transition:background 0.15s; }
        .sdim-manual-item:active, .sdim-manual-item.checked { background:rgba(79,143,247,0.06); }
        .sdim-manual-item input[type="checkbox"] { flex-shrink:0; width:18px; height:18px; accent-color:var(--blue); }
        .sdim-manual-word { font-size:0.88rem; font-weight:600; color:var(--text); }
        .sdim-manual-zh { font-size:0.78rem; color:var(--muted); margin-left:auto; }
        [data-theme="dark"] .sdim-manual-item.checked { background:rgba(79,143,247,0.12); }

        /* Legacy source toggle */
        .sdim-legacy-sources { margin-bottom:14px; }
        .sdim-legacy-toggle { font-size:0.78rem; color:var(--muted); cursor:pointer; padding:8px 0; }
        .sdim-legacy-toggle::-webkit-details-marker { display:none; }
        .sdim-legacy-sources[open] .sdim-legacy-toggle { margin-bottom:8px; }

        /* Source 2列卡片 */
        .shp-source-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
        .shp-source-card { display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-radius:14px; border:1.5px solid var(--border); background:var(--card-bg); cursor:pointer; text-align:left; transition:all 0.18s; }
        .shp-source-card:active { transform:scale(0.97); }
        .shp-source-card.active { border-color:var(--blue); background:rgba(79,143,247,0.09); }
        [data-theme="dark"] .shp-source-card.active { background:rgba(79,143,247,0.15); }
        .shp-card-top { display:flex; align-items:center; justify-content:space-between; }
        .shp-card-icon { font-size:1.1rem; }
        .shp-card-count { font-size:1rem; font-weight:800; color:var(--blue); }
        .shp-card-name { font-size:0.82rem; font-weight:700; color:var(--text); }
        .shp-card-desc { font-size:0.68rem; color:var(--muted); }

        /* Preview tags */
        .shp-preview { margin-bottom:12px; }
        .shp-preview-label { font-size:0.72rem; font-weight:700; color:var(--muted); margin-bottom:7px; }
        .shp-preview-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
        .shp-tag { display:flex; align-items:center; gap:4px; padding:4px 9px; border-radius:14px; background:var(--hover); font-size:0.8rem; font-weight:600; color:var(--text); }
        .shp-tag b { color:var(--green); font-size:0.68rem; margin-left:1px; }
        .shp-tag-more { color:var(--muted); font-weight:400; }
        .shp-dot { display:inline-block; width:6px; height:6px; border-radius:50%; flex-shrink:0; }
        .shp-legend { display:flex; flex-wrap:wrap; gap:8px; }
        .shp-legend span { display:flex; align-items:center; gap:3px; font-size:0.67rem; color:var(--muted); }

        /* Spec bar */
        .shp-spec { text-align:center; font-size:0.75rem; color:var(--muted); margin-top:2px; }

        /* ── Shadow 发音教练卡（v2: 结构化矫正指导）──────────────────── */
        .shadow-coach-card { background: rgba(255,59,48,0.04); border: 1.5px solid rgba(255,59,48,0.18); border-radius: 14px; padding: 14px; margin-top: 10px; display: flex; flex-direction: column; gap: 12px; }
        [data-theme="dark"] .shadow-coach-card { background: rgba(255,59,48,0.07); border-color: rgba(255,59,48,0.25); }

        /* 问题概述 + 识别结果合并 */
        .coach-problem-header { display: flex; align-items: flex-start; gap: 6px; }
        .coach-problem-icon { font-size: 1rem; flex-shrink: 0; line-height: 1.4; }
        .coach-problem-body { flex: 1; min-width: 0; }
        .coach-problem-text { font-size: 0.85rem; font-weight: 700; color: var(--text); line-height: 1.4; }
        .coach-heard-inline { font-size: 0.78rem; color: var(--muted); margin-top: 3px; }
        .coach-heard-word { color: var(--red); font-weight: 700; }

        /* 嘴型矫正步骤 + 口腔图 */
        .coach-mouth-guide { background: var(--hover); border-radius: 12px; padding: 12px 14px; }
        [data-theme="dark"] .coach-mouth-guide { background: rgba(255,255,255,0.05); }
        .coach-mouth-title { font-size: 0.78rem; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
        .coach-mouth-content { display: flex; gap: 12px; align-items: flex-start; }
        .coach-mouth-diagram { flex-shrink: 0; width: 96px; background: var(--pm-bg); border-radius: 12px; padding: 6px; border: 1px solid var(--pm-border); }
        .coach-mouth-steps { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
        .coach-mouth-step { font-size: 0.84rem; color: var(--text); line-height: 1.5; }
        .coach-mouth-step::marker { color: var(--blue); font-weight: 700; }
        .coach-mouth-fallback { font-size: 0.84rem; color: var(--text); line-height: 1.5; }

        /* ── 口腔截面 SVG（暖色插图风格）── */
        .pm-svg { width: 100%; height: auto; display: block; overflow: visible; }
        .pm-pulse { animation: pm-glow 2s ease-in-out infinite; }
        @keyframes pm-glow { 0%,100% { opacity: 0.2; } 50% { opacity: 0.55; } }

        :root {
          --pm-bg: #fef7f3; --pm-border: rgba(255,180,160,0.2);
          --pm-palate: rgba(255,210,195,0.45); --pm-gum: rgba(255,170,150,0.55);
          --pm-cavity: #fff9f6; --pm-lip: #e8a090;
          --pm-teeth: #ffffff; --pm-teeth-s: #e4d8d0;
          --pm-tongue: #ff7eb3; --pm-tongue-hi: #ffb8d4;
          --pm-dot: #ff6b35; --pm-dot-glow: rgba(255,107,53,0.3);
          --pm-air: #4ecdc4; --pm-voice: #a78bfa; --pm-round: #ff7eb3;
        }
        [data-theme="dark"] {
          --pm-bg: rgba(255,200,180,0.04); --pm-border: rgba(255,180,160,0.08);
          --pm-palate: rgba(255,170,150,0.12); --pm-gum: rgba(255,150,130,0.18);
          --pm-cavity: rgba(255,248,244,0.04); --pm-lip: rgba(232,160,144,0.5);
          --pm-teeth: rgba(255,255,255,0.6); --pm-teeth-s: rgba(255,255,255,0.1);
          --pm-tongue: #ff7eb3; --pm-tongue-hi: #ffb8d4;
          --pm-dot: #ff8c4c; --pm-dot-glow: rgba(255,140,76,0.25);
          --pm-air: #4ecdc4; --pm-voice: #b794f4; --pm-round: #ff7eb3;
        }

        /* 母语干扰提示 */
        .coach-l1-tip { display: flex; align-items: flex-start; gap: 6px; padding: 8px 10px; background: rgba(245,158,11,0.08); border-radius: 10px; }
        [data-theme="dark"] .coach-l1-tip { background: rgba(245,158,11,0.1); }
        .coach-l1-icon { font-size: 0.9rem; flex-shrink: 0; line-height: 1.5; }
        .coach-l1-text { font-size: 0.8rem; color: var(--text); line-height: 1.5; }

        /* 练习词 */
        .coach-drill-section { display: flex; flex-direction: column; gap: 2px; }
        .coach-drill-header { font-size: 0.72rem; color: var(--muted); font-weight: 600; }
        .coach-drill-word { font-size: 1rem; font-weight: 800; color: var(--blue); }
        .coach-drill-explain { font-size: 0.78rem; color: var(--muted); }

        /* 旧版兼容 */
        .coach-phoneme-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; background: rgba(255,59,48,0.12); color: var(--red); font-size: 0.8rem; font-weight: 700; font-family: monospace; }

        /* 合并操作区：对比播放 + 重试 */
        .coach-actions-merged { display: flex; flex-direction: column; gap: 8px; }
        .coach-compare-row { display: flex; gap: 6px; }
        .coach-cmp-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--card-bg); font-size: 0.78rem; font-weight: 600; cursor: pointer; color: var(--text); }
        .coach-cmp-btn.playing { border-color: var(--blue); color: var(--blue); }
        .coach-cmp-btn--user.playing { border-color: var(--red); color: var(--red); }
        .coach-actions { display: flex; gap: 8px; }
        .coach-btn-listen { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 10px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--card-bg); font-size: 0.82rem; font-weight: 600; cursor: pointer; color: var(--text); }
        .coach-btn-retry  { padding: 10px 14px; border-radius: 12px; border: none; background: linear-gradient(135deg, #ff3b30, #ff6b35); color: #fff; font-size: 0.88rem; font-weight: 700; cursor: pointer; box-shadow: 0 3px 12px rgba(255,59,48,0.3); width: 100%; }
        .coach-btn-retry:active { transform: scale(0.97); }

        /* 重试时固定教练卡 */
        .shadow-pinned-coach { margin: 8px 0; padding: 12px 14px; background: rgba(255,149,0,0.06); border: 1.5px solid rgba(255,149,0,0.2); border-radius: 12px; display: flex; flex-direction: column; gap: 8px; }
        [data-theme="dark"] .shadow-pinned-coach { background: rgba(255,149,0,0.08); border-color: rgba(255,149,0,0.3); }
        .pinned-steps-title { font-size: 0.75rem; font-weight: 700; color: var(--amber); margin-bottom: 6px; }
        .pinned-content { display: flex; gap: 10px; align-items: flex-start; }
        .pinned-diagram { flex-shrink: 0; width: 72px; background: var(--pm-bg); border-radius: 10px; padding: 4px; border: 1px solid var(--pm-border); }
        .pinned-steps-list { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
        .pinned-steps-list li { font-size: 0.8rem; color: var(--text); line-height: 1.45; }
        .pinned-steps-list li::marker { color: var(--amber); font-weight: 700; }
        .pinned-phonemes { display: flex; gap: 5px; flex-wrap: wrap; }
        .pinned-tip { font-size: 0.8rem; color: var(--text); line-height: 1.5; }
        .pinned-l1 { font-size: 0.78rem; color: var(--muted); line-height: 1.45; }

        /* 首页薄弱音素 */
        .shp-weak-phonemes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
        .shp-weak-label { font-size: 0.72rem; color: var(--muted); }
        .shp-weak-hint  { font-size: 0.68rem; color: var(--muted); }

        /* ── Shadow P1/P2 补充样式 ──────────────────────────────────────── */

        /* IPA 音节分隔增强 */
        .speak-ipa-rich { letter-spacing: 0; }
        .ipa-dot { color: var(--muted); margin: 0 2px; font-weight: 400; }
        .ipa-primary   { font-weight: 800; color: var(--blue); font-style: normal; }
        .ipa-secondary { font-weight: 600; color: var(--text); font-style: normal; opacity: 0.75; }

        /* 听发音行（听 + 慢速 并排）*/
        .shadow-listen-row { display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 10px; }
        .shadow-slow-btn { padding: 7px 11px; border-radius: 20px; border: 1.5px solid var(--border); background: var(--card-bg); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
        .shadow-slow-btn.active { border-color: var(--blue); background: rgba(79,143,247,0.1); color: var(--blue); }

        /* 进步轨迹 */
        .shadow-score-trail { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 8px; padding: 6px 10px; background: var(--hover); border-radius: 10px; font-size: 0.8rem; }
        .trail-label { color: var(--muted); font-size: 0.72rem; }
        .trail-score { display: inline-block; padding: 1px 6px; border-radius: 8px; background: var(--surface); font-weight: 700; }
        .trail-score.trail-best { background: rgba(52,199,89,0.15); color: var(--green); }
        .trail-arrow { color: var(--muted); font-size: 0.72rem; }
        .trail-gain { font-weight: 800; color: var(--green); margin-left: 4px; }
        .trail-gain::before { content: '+'; }

        /* 完成页最大进步词 */
        .shadow-done-best-progress { margin: 8px 0; padding: 8px 12px; background: rgba(52,199,89,0.08); border: 1.5px solid rgba(52,199,89,0.2); border-radius: 12px; font-size: 0.82rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .best-trail { color: var(--muted); font-size: 0.78rem; }
        .best-gain { font-weight: 800; color: var(--green); }
        .best-gain::before { content: '+'; }

        /* ── Shadow rhythm rebuild ───────────────────────────────────────── */
        .tab-speak {
            --shadow-space-1: 8px;
            --shadow-space-2: 12px;
            --shadow-space-3: 16px;
            --shadow-space-4: 24px;
            --shadow-space-5: 32px;
            --shadow-max-width: var(--shell-max-width, 920px);
        }
        .shadow-start,
        .shadow-session,
        .shadow-done-shell {
            width: 100%;
            max-width: var(--shadow-max-width);
            margin: 0 auto;
        }
        .shadow-start {
            text-align: left;
            padding-top: 10px;
        }
        .shadow-start-wrap {
            position: relative;
            padding-bottom: calc(108px + env(safe-area-inset-bottom));
        }
        .shadow-start-shell {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .shadow-start-head,
        .shadow-start-select,
        .shadow-launch,
        .shadow-done-summary,
        .shadow-done-details {
            background: var(--surface);
            border: none;
            border-radius: 14px;
            box-shadow: none;
        }
        .shadow-start-head {
            padding: 16px 16px 14px;
        }
        .shadow-start-intro {
            margin-top: 8px;
        }
        .shadow-start-copy {
            margin: 0;
            font-size: 0.78rem;
            line-height: 1.5;
            color: var(--muted);
        }
        .shadow-start-select {
            padding: 14px 16px;
        }
        .shadow-start-section-label,
        .shadow-done-detail-label {
            display: block;
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0;
            text-transform: none;
            color: var(--muted);
            margin-bottom: 10px;
        }
        .shadow-launch {
            padding: 14px 16px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .shadow-launch-cta {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding-top: 0;
        }
        .shadow-start-sticky {
            position: sticky;
            bottom: calc(8px + env(safe-area-inset-bottom));
            z-index: 4;
            margin-top: 10px;
        }
        .shadow-launch-cta-sticky {
            padding: 12px 14px;
            border-radius: 14px;
            background: rgba(255,255,255,0.92);
            border: none;
            box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }
        .shadow-start-btn {
            width: 100%;
            margin-top: 0;
            padding: 14px 20px;
            border-radius: 12px;
            box-shadow: none;
        }
        .shp-toprow {
            margin-bottom: 0;
            gap: 12px;
            align-items: flex-start;
        }
        .shp-title-group {
            gap: 10px;
            flex-wrap: wrap;
        }
        .shp-title {
            font-size: 1rem;
            letter-spacing: -0.01em;
        }
        .shp-streak {
            padding: 2px 7px;
            border-radius: 999px;
            background: rgba(249,115,22,0.10);
            font-size: 0.72rem;
        }
        .shp-today-chip {
            display: inline-flex;
            align-items: center;
            border-radius: 999px;
            padding: 4px 8px;
            background: var(--hover);
            font-size: 0.72rem;
        }
        .shp-deck-row {
            margin-top: 8px;
            margin-bottom: 0;
        }
        .shp-deck-chip {
            padding: 4px 10px 4px 8px;
            border: none;
            background: rgba(79,143,247,0.08);
            font-size: 0.72rem;
        }
        .shp-source-grid {
            gap: 12px;
            margin-bottom: 0;
        }
        .shp-source-card {
            min-height: 110px;
            gap: 6px;
            padding: 14px 14px 13px;
            border-radius: 18px;
            background: var(--surface);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
        }
        .shp-source-card.active {
            transform: translateY(-1px);
            box-shadow: 0 8px 20px rgba(79,143,247,0.15);
        }
        .shp-card-top {
            margin-bottom: 6px;
        }
        .shp-card-icon {
            font-size: 1.18rem;
        }
        .shp-card-count {
            font-size: 1.02rem;
        }
        .shp-card-name {
            font-size: 0.88rem;
        }
        .shp-card-desc {
            font-size: 0.74rem;
            line-height: 1.45;
        }
        .shp-preview {
            margin-bottom: 0;
        }
        .shp-preview-label {
            margin-bottom: 10px;
        }
        .shp-preview-tags {
            gap: 6px;
            margin-bottom: 8px;
        }
        .shp-tag {
            padding: 4px 8px;
            border-radius: 8px;
            font-size: 0.76rem;
        }
        .shp-legend {
            gap: 10px 12px;
        }
        .shp-weak-phonemes {
            margin-bottom: 0;
            padding: 10px 12px;
            border-radius: 16px;
            background: rgba(245,158,11,0.08);
        }
        .shp-spec {
            margin-top: 0;
            margin-bottom: 0;
            justify-content: center;
        }
        .shadow-session {
            display: flex;
            flex-direction: column;
            gap: var(--shadow-space-4);
            padding-top: 6px;
        }
        .shadow-session-meta {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .shadow-session-meta-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        .shadow-session-source {
            display: inline-flex;
            align-items: center;
            padding: 7px 12px;
            border-radius: 999px;
            background: rgba(79,143,247,0.08);
            border: 1px solid rgba(79,143,247,0.14);
            color: var(--blue);
            font-size: 0.78rem;
            font-weight: 700;
        }
        .shadow-exit-btn {
            position: static;
            flex-shrink: 0;
        }
        .shadow-stepper {
            padding: 0;
        }
        .shadow-session-stage {
            display: flex;
            flex-direction: column;
            gap: var(--shadow-space-3);
        }
        .shadow-stage-card {
            padding: 32px 24px 28px;
            border-radius: 24px;
            background: var(--surface);
            border: 1px solid var(--border);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
        }
        .shadow-stage-card .speak-card-type {
            margin-bottom: 20px;
        }
        .shadow-stage-card .speak-word {
            font-size: clamp(2rem, 6vw, 2.45rem);
            margin-bottom: 8px;
        }
        .shadow-stage-card .speak-ipa {
            margin-bottom: 10px;
            font-size: 0.98rem;
        }
        .shadow-stage-card .speak-zh,
        .shadow-stage-card .speak-sentence-zh {
            font-size: 0.92rem;
            line-height: 1.55;
        }
        .shadow-stage-card .speak-sentence {
            font-size: clamp(1.16rem, 4vw, 1.34rem);
            line-height: 1.75;
            margin-bottom: 12px;
        }
        .shadow-stage-card .speak-phase-listen {
            margin-top: 28px;
            padding: 0;
            flex-direction: column;
            gap: 12px;
        }
        .shadow-listen-row {
            width: 100%;
            gap: 10px;
            margin-bottom: 0;
        }
        .speak-listen-main {
            flex: 1;
            justify-content: center;
            padding: 15px 22px;
            border-radius: 18px;
        }
        .shadow-slow-btn {
            min-height: 52px;
            padding: 0 14px;
            border-radius: 16px;
        }
        .speak-go-record-btn {
            width: 100%;
            justify-content: center;
            margin-top: 0;
            padding: 15px 20px;
            border-radius: 18px;
        }
        .shadow-stage-card .speak-phase-speak {
            margin-top: 24px;
            padding-top: 0;
            gap: 12px;
        }
        .spk-ready-area,
        .spk-ref-text {
            width: 100%;
        }
        .spk-ready-area {
            padding: 18px 12px;
            border-radius: 18px;
            background: rgba(79,143,247,0.06);
        }
        .spk-ref-text {
            margin-bottom: 14px;
            padding: 12px;
            border-radius: 16px;
            background: var(--hover);
        }
        .spk-done-btn {
            margin-top: 14px;
            min-width: 144px;
        }
        .shadow-session-feedback {
            margin-top: 0;
            padding: 20px 18px 18px;
            border-radius: 20px;
            border: 1px solid var(--border);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        }
        .shadow-session-feedback .speak-nav {
            flex-direction: column;
            align-items: stretch;
        }
        .shadow-session-feedback .speak-nav-btn {
            width: 100%;
        }
        .shadow-pinned-coach {
            margin: 0;
        }
        .shadow-done-shell {
            display: flex;
            flex-direction: column;
            gap: 18px;
            padding-top: 14px;
        }
        .shadow-done-summary {
            padding: 24px 20px 20px;
        }
        .speak-done-headline {
            margin-bottom: 18px;
        }
        .speak-done-ring-wrap {
            margin-bottom: 18px;
        }
        .speak-done-stats {
            gap: 18px;
            margin-bottom: 0;
        }
        .shadow-done-actions {
            margin-top: 0;
        }
        .shadow-done-actions .speak-nav-btn {
            width: 100%;
            max-width: 100%;
            min-height: 48px;
        }
        .shadow-done-details {
            padding: 18px 16px 16px;
        }
        .speak-done-list {
            max-width: none;
            margin: 0;
        }
        .speak-done-item {
            margin-bottom: 8px;
            padding: 12px 14px;
            border-radius: 14px;
            border: 1px solid rgba(221, 229, 240, 0.88);
        }
        .speak-done-item:last-child {
            margin-bottom: 0;
        }
        .shadow-done-today {
            margin-top: 12px;
        }
        .shadow-done-best-progress {
            margin: 14px 0 0;
        }
        [data-theme="dark"] .shadow-start-head,
        [data-theme="dark"] .shadow-start-select,
        [data-theme="dark"] .shadow-launch,
        [data-theme="dark"] .shadow-done-summary,
        [data-theme="dark"] .shadow-done-details {
            box-shadow: none;
        }
        [data-theme="dark"] .shadow-launch-cta-sticky {
            background: rgba(22,24,30,0.94);
            box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2);
        }
        [data-theme="dark"] .shadow-stage-card,
        [data-theme="dark"] .shadow-session-feedback {
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
        }
        @media (min-width: 720px) {
            .speak-body {
                padding-left: 24px;
                padding-right: 24px;
            }
            .shadow-start-shell,
            .shadow-session,
            .shadow-done-shell {
                max-width: var(--shell-max-width, 920px);
            }
            .shadow-stage-card {
                padding: 32px 32px 28px;
            }
            .shadow-start-sticky {
                bottom: 16px;
            }
            .shadow-session-feedback .speak-nav {
                flex-direction: row;
            }
            .shadow-done-actions {
                flex-direction: row;
                justify-content: center;
            }
            .shadow-done-actions .speak-nav-btn {
                width: auto;
                min-width: 220px;
            }
        }
        @media (max-width: 420px) {
            .shp-source-grid {
                grid-template-columns: 1fr;
            }
            .shadow-start-wrap {
                padding-bottom: calc(116px + env(safe-area-inset-bottom));
            }
            .shadow-listen-row {
                flex-direction: column;
            }
            .shadow-slow-btn,
            .speak-listen-main {
                width: 100%;
            }
            .speak-done-stats {
                gap: 12px;
            }
        }

/* ── 词典升级样式 v26 ─────────────────────────────────────────── */
.dict-detail-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:10px; }
.dict-detail-main-info { flex:1; min-width:0; }
.dict-detail-word-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dict-detail-word { font-size:1.6rem; font-weight:800; color:var(--text); line-height:1.1; }
.dict-detail-baseform, .dict-item-baseform { color:var(--muted); font-size:0.85em; margin-left:2px; font-weight:400; }
.dict-detail-pos-badge { padding:2px 8px; border-radius:8px; background:rgba(79,143,247,0.12); color:var(--blue); font-size:0.75rem; font-weight:700; align-self:center; }
.dict-detail-ipa-rich { margin-top:4px; font-size:0.9rem; color:var(--muted); }
.dict-inflections { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.dict-infl-chip { font-size:0.75rem; color:var(--muted); background:rgba(120,120,120,0.08); padding:1px 7px; border-radius:6px; line-height:1.5; }
[data-theme="dark"] .dict-infl-chip { background:rgba(255,255,255,0.08); }
.dict-detail-action-btns { display:flex; gap:6px; flex-shrink:0; margin-left:8px; }
.dict-icon-btn { width:36px; height:36px; border-radius:10px; border:1.5px solid var(--border); background:var(--card-bg); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1rem; transition:all 0.15s;  min-height: 44px; min-width: 44px; }
.dict-icon-btn:active { transform:scale(0.93); }
.dict-fav-active { color:#f59e0b; border-color:#f59e0b; background:rgba(245,158,11,0.08); }
.dict-srs-bar { margin-bottom:12px; }
.dict-srs-label { display:flex; align-items:center; gap:6px; margin-bottom:4px; font-size:0.75rem; }
.dict-srs-stage { font-weight:700; }
.dict-srs-next { color:var(--muted); }
.dict-srs-track { height:4px; background:var(--hover); border-radius:4px; overflow:hidden; }
.dict-srs-fill { height:100%; border-radius:4px; transition:width 0.6s ease; }
.dict-detail-loading { display:flex; gap:4px; padding:12px 0; }
.dict-loading-dot { width:6px; height:6px; border-radius:50%; background:var(--blue); animation:dictDotPulse 1.2s ease-in-out infinite; }
.dict-loading-dot:nth-child(2) { animation-delay:0.2s; }
.dict-loading-dot:nth-child(3) { animation-delay:0.4s; }
@keyframes dictDotPulse { 0%,80%,100%{opacity:0.3;transform:scale(0.8)} 40%{opacity:1;transform:scale(1)} }
.dict-zh-summary { font-size:0.9rem; font-weight:700; color:var(--text); margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.dict-local-examples { margin-bottom:12px; }
.dict-local-ex-label { font-size:0.72rem; font-weight:700; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.03em; }
.dict-senses { display:flex; flex-direction:column; gap:14px; margin-bottom:14px; }
.dict-sense-pos-tag { display:inline-block; padding:2px 10px; border-radius:20px; background:rgba(139,92,246,0.1); color:#8b5cf6; font-size:0.72rem; font-weight:700; margin-bottom:8px; }
.dict-sense-item { display:flex; gap:8px; margin-bottom:8px; }
.dict-sense-num { width:18px; height:18px; border-radius:50%; background:var(--hover); color:var(--muted); font-size:0.68rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
.dict-sense-body { flex:1; }
.dict-sense-en { font-size:0.85rem; color:var(--text); margin-bottom:4px; }
.dict-sense-example { font-size:0.78rem; color:var(--muted); padding:5px 8px; background:var(--hover); border-radius:8px; margin:4px 0; }
.ex-quote { font-style:italic; }
.ex-zh { display:block; margin-top:2px; color:var(--text); font-style:normal; opacity:0.75; }
.dict-syn-chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.dict-syn-mini { padding:1px 6px; border-radius:8px; background:var(--hover); font-size:0.7rem; color:var(--blue); cursor:pointer; }
.dict-detail-zh-simple { font-size:1rem; font-weight:600; color:var(--text); margin-bottom:8px; }
.dict-detail-ex-simple { font-size:0.82rem; color:var(--muted); padding:6px 10px; background:var(--hover); border-radius:8px; margin-bottom:6px; }
.dict-synonyms { margin-bottom:14px; }
.dict-synonyms-label { font-size:0.72rem; font-weight:700; color:var(--muted); margin-bottom:6px; }
.dict-synonyms-chips { display:flex; flex-wrap:wrap; gap:6px; }
.dict-syn-chip { padding:4px 10px; border-radius:14px; border:1.5px solid var(--border); background:var(--card-bg); font-size:0.78rem; font-weight:600; color:var(--blue); cursor:pointer; transition:all 0.15s; }
.dict-syn-chip:hover { border-color:var(--blue); background:rgba(79,143,247,0.08); }
        .dict-syn-chip:active { border-color:var(--blue); background:rgba(79,143,247,0.08); }
.dict-antonyms { margin-bottom:14px; }
.dict-antonyms-label { font-size:0.72rem; font-weight:700; color:var(--muted); margin-bottom:6px; }
.dict-antonyms-chips { display:flex; flex-wrap:wrap; gap:6px; }
.dict-ant-chip { padding:4px 10px; border-radius:14px; border:1.5px solid var(--border); background:var(--card-bg); font-size:0.78rem; font-weight:600; color:var(--red); cursor:pointer; transition:all 0.15s; }
.dict-ant-chip:hover { border-color:var(--red); background:rgba(240,80,80,0.08); }
.dict-ant-chip:active { border-color:var(--red); background:rgba(240,80,80,0.08); }
[data-theme="dark"] .dict-ant-chip:hover { background:rgba(240,80,80,0.12); }
[data-theme="dark"] .dict-ant-chip:active { background:rgba(240,80,80,0.12); }
/* 词根加载中 */
.dict-root-loading { display:flex; align-items:center; gap:4px; margin:8px 0 4px; }
.dict-root-load-dot { width:5px; height:5px; border-radius:50%; background:var(--muted); opacity:0.4; animation:dict-dot-blink 1.2s infinite; }
.dict-root-load-dot:nth-child(2) { animation-delay:0.2s; }
.dict-root-load-dot:nth-child(3) { animation-delay:0.4s; }
.dict-root-load-label { font-size:0.72rem; color:var(--muted); margin-left:4px; }
@keyframes dict-dot-blink { 0%,80%,100%{opacity:0.2} 40%{opacity:0.8} }

/* 词根区 */
.dict-root-section { margin-bottom:14px; padding:10px 12px; border-radius:10px; background:rgba(0,230,184,0.06); border:1px solid rgba(0,230,184,0.18); }
.dict-root-header { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-bottom:7px; }
.dict-root-icon { font-size:0.85rem; }
.dict-root-label { font-size:0.7rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.03em; }
.dict-root-value { font-size:0.82rem; font-weight:700; color:var(--accent); padding:1px 6px; border-radius:5px; background:rgba(0,230,184,0.12); }
.dict-root-meaning { font-size:0.78rem; color:var(--text); font-style:italic; }
.dict-root-origin { font-size:0.72rem; color:var(--muted); }
.dict-root-family { display:flex; align-items:center; flex-wrap:wrap; gap:5px; }
.dict-root-family-label { font-size:0.7rem; font-weight:700; color:var(--muted); white-space:nowrap; }
.dict-root-word-chip { padding:3px 9px; border-radius:12px; border:1.5px solid rgba(0,230,184,0.3); background:transparent; font-size:0.77rem; font-weight:600; color:var(--accent); cursor:pointer; transition:all 0.15s; }
.dict-root-word-chip:hover { border-color:var(--accent); background:rgba(0,230,184,0.1); }
        .dict-root-word-chip:active { border-color:var(--accent); background:rgba(0,230,184,0.1); }

.dict-practice-row { display:flex; gap:8px; margin-top:14px; }
.dict-prac-btn { flex:1; padding:10px; border-radius:12px; border:1.5px solid var(--border); background:var(--card-bg); font-size:0.82rem; font-weight:700; cursor:pointer; transition:all 0.15s; }
.dict-prac-shadow { border-color:var(--blue); color:var(--blue); background:rgba(79,143,247,0.06); }
.dict-prac-card { border-color:#8b5cf6; color:#8b5cf6; background:rgba(139,92,246,0.06); }
.dict-prac-btn:active { transform:scale(0.97); }
/* dict-item-pos/net — standalone (search result row) */
.dict-item-pos { padding:1px 7px; border-radius:20px; background:rgba(79,143,247,0.1); color:var(--blue); font-size:0.68rem; font-weight:700; white-space:nowrap; }
.dict-item-net { font-size:0.68rem; color:var(--muted); }
.dict-item.active { background: rgba(79,143,247,0.06); }
.dict-loading-bar { font-size:0.72rem; color:var(--muted); padding:4px 12px; text-align:center; }

/* ── Shadow Quick Panel 全局浮层 v26 ────────────────────────────── */
.sqp-backdrop {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: flex-end;
}
.sqp-panel {
  width: 100%; max-width: var(--content-max-width, 760px); max-height: 88vh; overflow-y: auto;
  background: var(--bg); border-radius: 20px 20px 0 0;
  padding: 0 0 max(20px, env(safe-area-inset-bottom, 20px));
  box-shadow: 0 -8px 40px rgba(0,0,0,0.25);
  margin: 0 auto;
}
/* Transition */
.sqp-slide-enter-active, .sqp-slide-leave-active { transition: transform 0.3s cubic-bezier(0.32,0.72,0,1); }
.sqp-slide-enter-from, .sqp-slide-leave-to { transform: translateY(100%); }

/* Header */
.sqp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.sqp-title { display: flex; align-items: center; gap: 6px; font-size: 0.95rem; font-weight: 700; color: var(--text); }
.sqp-mic-icon { font-size: 1rem; }
.sqp-close-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 10px; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--card-bg);
  font-size: 0.78rem; font-weight: 600; color: var(--muted);
  cursor: pointer;
}

/* Word block */
.sqp-word-block { padding: 20px 24px 12px; text-align: center; }
.sqp-word { font-size: 1.7rem; font-weight: 800; color: var(--text); line-height: 1.25; word-break: break-word; }
.sqp-ipa { font-size: 0.9rem; color: var(--muted); margin-top: 6px; }
.sqp-zh  { font-size: 0.85rem; color: var(--muted); margin-top: 4px; }

/* Body */
.sqp-body { padding: 12px 24px 24px; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.sqp-stage-shell {
  min-height: 120px;
  border-radius: 22px;
  border: 1px solid rgba(128,128,128,0.12);
  background: rgba(128,128,128,0.04);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 18px 14px;
  transition: min-height 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
/* Expand stage area when recording/scoring/result for more visual room */
.sqp-stage-shell.is-recording,
.sqp-stage-shell.is-scoring,
.sqp-stage-shell.is-result { min-height: 148px; }
.sqp-wave-wrap {
  width: 100%;
  max-width: 180px;
  height: 48px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  transition: height 0.25s ease;
}
.sqp-stage-shell.is-recording .sqp-wave-wrap,
.sqp-stage-shell.is-playing .sqp-wave-wrap { height: 64px; }
.sqp-wave-bar {
  width: 10px;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(79,143,247,0.85), rgba(139,108,246,0.75));
  transform-origin: center bottom;
  transition: height 0.1s linear, opacity 0.25s ease, transform 0.25s ease;
  opacity: 0.7;
}
.sqp-wave-bar:nth-child(2),
.sqp-wave-bar:nth-child(4) { height: 24px; }
.sqp-wave-bar:nth-child(3) { height: 38px; }
/* Ready: static, muted bars — no animation to avoid misleading "active" feel */
.sqp-stage-shell.is-ready .sqp-wave-bar {
  opacity: 0.25;
  transform: scaleY(0.6);
}
/* Playing / Scoring: gentle idle wave to show activity */
.sqp-stage-shell.is-scoring .sqp-wave-bar,
.sqp-stage-shell.is-playing .sqp-wave-bar {
  animation: sqpWaveIdle 1.2s ease-in-out infinite;
}
.sqp-stage-shell.is-scoring .sqp-wave-bar:nth-child(2),
.sqp-stage-shell.is-playing .sqp-wave-bar:nth-child(2) { animation-delay: .12s; }
.sqp-stage-shell.is-scoring .sqp-wave-bar:nth-child(3),
.sqp-stage-shell.is-playing .sqp-wave-bar:nth-child(3) { animation-delay: .24s; }
.sqp-stage-shell.is-scoring .sqp-wave-bar:nth-child(4),
.sqp-stage-shell.is-playing .sqp-wave-bar:nth-child(4) { animation-delay: .36s; }
.sqp-stage-shell.is-scoring .sqp-wave-bar:nth-child(5),
.sqp-stage-shell.is-playing .sqp-wave-bar:nth-child(5) { animation-delay: .48s; }
@keyframes sqpWaveIdle {
  0%, 100% { transform: scaleY(0.78); opacity: 0.65; }
  50% { transform: scaleY(1.15); opacity: 1; }
}
.sqp-stage-shell.is-recording {
  border-color: rgba(239, 68, 68, 0.24);
  background: rgba(239, 68, 68, 0.05);
}
.sqp-stage-shell.is-recording .sqp-wave-bar {
  background: linear-gradient(180deg, #fb7185, #ef4444);
  opacity: 0.95;
  animation: none;
}
.sqp-stage-shell.is-result .sqp-wave-bar {
  opacity: 0.36;
}
.sqp-stage-status {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
  max-width: 280px;
}
.sqp-stage-status-recording {
  color: #ef4444;
  font-weight: 700;
}
.sqp-feedback-shell {
  min-height: 220px;
  max-height: 300px;
  border-radius: 20px;
  border: 1px solid rgba(128,128,128,0.12);
  background: rgba(128,128,128,0.04);
  box-shadow: var(--shadow-sm);
  overflow-y: auto;
}
.sqp-feedback-pane {
  min-height: 218px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.sqp-feedback-pane-scoring {
  align-items: center;
  text-align: center;
}
.sqp-ready-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.sqp-record-ref {
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--hover);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--text);
  text-align: center;
  word-break: break-word;
}
.sqp-stop-btn {
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  border: 1.5px solid rgba(239,68,68,0.24);
  background: rgba(239,68,68,0.08);
  color: #ef4444;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}
.sqp-result-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sqp-result-copy {
  flex: 1;
  min-width: 0;
}
.sqp-result-body {
  justify-content: flex-start;
  height: 100%;
}

/* Listen phase */
.sqp-listen-ring {
  width: 72px; height: 72px; border-radius: 50%;
  border: 2.5px solid var(--border); background: var(--card-bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); transition: all 0.3s;
}
.sqp-listen-ring.active {
  border-color: var(--blue); color: var(--blue);
  box-shadow: 0 0 0 8px rgba(79,143,247,0.12);
  animation: sqpPulse 1.5s ease-in-out infinite;
}
@keyframes sqpPulse { 0%,100%{box-shadow:0 0 0 8px rgba(79,143,247,0.12)} 50%{box-shadow:0 0 0 16px rgba(79,143,247,0.04)} }
.sqp-listen-label { font-size: 0.8rem; color: var(--muted); }

/* Ready phase */
.sqp-ready-hint { font-size: 0.78rem; color: var(--muted); text-align: center; opacity: 0.7; margin-top: 2px; }
.sqp-record-btn {
  width: 100%; padding: 14px; border-radius: 14px;
  background: linear-gradient(135deg, #4f8ff7, #8b6cf6);
  color: #fff; font-size: 1rem; font-weight: 700;
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: opacity 0.15s;
}
.sqp-record-btn:active { opacity: 0.85; }
.sqp-relisten-btn {
  font-size: 0.82rem; color: var(--blue); background: rgba(79,143,247,0.07);
  border: 1.5px solid rgba(79,143,247,0.2); border-radius: 20px;
  cursor: pointer; padding: 7px 16px; font-weight: 600; transition: all 0.15s;
  align-self: center;
}
.sqp-relisten-btn:active { background: rgba(79,143,247,0.14); }
.sqp-relisten-btn.playing {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}
.sqp-relisten-btn:disabled {
  cursor: default;
  opacity: 1;
}

/* Recording phase */
.sqp-recording-ring {
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(239,68,68,0.1); border: 2.5px solid #ef4444;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; position: relative;
}
.sqp-rec-pulse {
  position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid rgba(239,68,68,0.4);
  animation: sqpRecPulse 1s ease-in-out infinite;
}
@keyframes sqpRecPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.15);opacity:0.5} }
.sqp-recording-label { font-size: 0.85rem; color: #ef4444; font-weight: 600; }
.sqp-vad-status { position: relative; width: 100%; height: 24px; margin: 4px 0; }
.sqp-vad-status .sqp-vad-bar-wrap { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; }
.sqp-vad-status .sqp-vad-bar-wrap.is-visible { opacity: 1; pointer-events: auto; }
.sqp-vad-bar-wrap { width: 100%; }
.sqp-vad-bar-label { font-size: 0.7rem; color: var(--muted); margin-bottom: 4px; text-align: center; }
.sqp-vad-bar-track { height: 4px; background: var(--hover); border-radius: 4px; overflow: hidden; }
.sqp-vad-bar-fill { height: 100%; background: #f97316; border-radius: 4px; transition: width 0.1s linear; }

/* Scoring */
.sqp-scoring-dots { display: flex; gap: 6px; }
.sqp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); animation: dictDotPulse 1.2s ease-in-out infinite; }
.sqp-dot:nth-child(2) { animation-delay: 0.2s; }
.sqp-dot:nth-child(3) { animation-delay: 0.4s; }
.sqp-scoring-label { font-size: 0.85rem; color: var(--muted); }

/* Result */
.sqp-result-body { gap: 12px; }
.sqp-score-ring {
  width: 90px; height: 90px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 3px solid; gap: 0;
}
.sqp-score-ring.sqp-pass { border-color: #22c55e; background: rgba(34,197,94,0.08); }
.sqp-score-ring.sqp-fail { border-color: #f97316; background: rgba(249,115,22,0.08); }
.sqp-score-num { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.sqp-pass .sqp-score-num { color: #22c55e; }
.sqp-fail .sqp-score-num { color: #f97316; }
.sqp-score-grade { font-size: 0.75rem; font-weight: 700; opacity: 0.7; }
.sqp-advice { font-size: 0.85rem; color: var(--muted); text-align: center; max-width: 280px; }

/* Coach card */
.sqp-coach-card {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  background: rgba(249,115,22,0.07); border: 1.5px solid rgba(249,115,22,0.25);
  display: flex; flex-direction: column; gap: 6px;
}
.sqp-coach-phonemes { display: flex; gap: 6px; flex-wrap: wrap; }
.sqp-phoneme-badge {
  padding: 2px 10px; border-radius: 20px;
  background: rgba(249,115,22,0.15); color: #f97316;
  font-size: 0.8rem; font-weight: 700; font-family: monospace;
}
.sqp-coach-tip { font-size: 0.8rem; color: var(--text); }
.sqp-drill-tip { font-size: 0.78rem; color: var(--muted); }

/* Result buttons */
.sqp-result-btns { display: flex; gap: 8px; width: 100%; margin-top: auto; }
.sqp-retry-btn {
  flex: 1; padding: 12px; border-radius: 12px;
  border: 1.5px solid var(--border); background: var(--card-bg);
  font-size: 0.85rem; font-weight: 700; cursor: pointer; color: var(--text);
}
.sqp-done-btn {
  flex: 1; padding: 12px; border-radius: 12px;
  background: linear-gradient(135deg, #4f8ff7, #8b6cf6);
  color: #fff; font-size: 0.85rem; font-weight: 700;
  border: none; cursor: pointer;
}
[data-theme="dark"] .sqp-stage-shell,
[data-theme="dark"] .sqp-feedback-shell {
  box-shadow: 0 18px 40px rgba(0,0,0,0.22);
}
@media (max-width: 420px) {
  .sqp-body { padding: 12px 18px 20px; }
  .sqp-stage-shell { min-height: 110px; }
  .sqp-stage-shell.is-recording, .sqp-stage-shell.is-scoring, .sqp-stage-shell.is-result { min-height: 136px; }
  .sqp-feedback-shell { min-height: 210px; max-height: 292px; }
  .sqp-feedback-pane { min-height: 208px; padding: 16px 16px 14px; }
  .sqp-result-top { align-items: flex-start; }
}

/* 学习卡片音频按钮行（🔊 + 🎙 并排） */
.card-audio-row {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 14px;
}
/* 卡片内 🎙 按钮（inline，非 absolute） */
.quick-shadow-btn {
  width: 38px; height: 38px; border-radius: 99px;
  border: 1.5px solid var(--border); background: var(--card-bg);
  font-size: 1rem; display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0.75; transition: opacity 0.15s, transform 0.15s;
  flex-shrink: 0;
 min-height: 44px; min-width: 44px; }
.quick-shadow-btn:active { opacity: 1; transform: scale(0.93); }

        /* ══ AI Talk 新布局：对话优先 ══ */
        .talk-live-shell--chat {
          display: flex;
          flex-direction: column;
          height: calc(100vh - 56px - env(safe-area-inset-top));
          height: calc(100dvh - 56px - env(safe-area-inset-top));
          min-height: 280px;
          overflow: hidden;  /* iOS 15 fallback */
          overflow: clip;    /* 现代浏览器：不破坏 sticky */
          position: relative;
          /* 为底部导航栏腾出空间 */
          padding-bottom: calc(56px + env(safe-area-inset-bottom));
        }
        .talk-chat-main {
          flex: 1;
          min-height: 0; /* 关键：让 flex-1 + overflow 生效 */
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          overscroll-behavior: contain;
          padding: 10px 10px 160px;
          display: flex;
          flex-direction: column;
          gap: 8px;
          background: var(--surface);
          border-radius: 10px;
          margin: 0;
        }
        .talk-bubble {
          max-width: 85%;
          padding: 10px 14px;
          border-radius: 16px;
          font-size: 0.92rem;
          line-height: 1.5;
        }
        .talk-bubble.ai {
          align-self: flex-start;
          background: var(--hover);
          border-bottom-left-radius: 4px;
        }
        .talk-bubble.user {
          align-self: flex-end;
          background: var(--blue);
          color: #fff;
          border-bottom-right-radius: 4px;
        }
        .talk-bubble.typing {
          opacity: 0.7;
        }
        .talk-bubble-name {
          font-size: 0.72rem;
          font-weight: 600;
          color: var(--muted);
          margin-bottom: 2px;
        }
        .talk-bubble.user .talk-bubble-name {
          color: rgba(255,255,255,0.7);
        }
        .talk-feedback-row {
          margin-top: 6px;
          padding-top: 6px;
          border-top: 1px solid rgba(0,0,0,0.08);
          font-size: 0.78rem;
        }
        .talk-bubble.user .talk-feedback-row {
          border-top-color: rgba(255,255,255,0.15);
        }
        .talk-feedback-natural {
          color: var(--muted);
          margin-bottom: 4px;
        }
        .talk-bubble.user .talk-feedback-natural {
          color: rgba(255,255,255,0.8);
        }
        .talk-word-used {
          display: inline-block;
          background: rgba(76,175,80,0.15);
          color: #4caf50;
          padding: 2px 8px;
          border-radius: 10px;
          font-size: 0.72rem;
          margin-right: 4px;
        }
        .talk-bubble.user .talk-word-used {
          background: rgba(255,255,255,0.2);
          color: #fff;
        }

        /* 目标词紧凑行 */
        .talk-words-bar {
          display: flex;
          align-items: center;
          gap: 6px;
          padding: 6px 10px;
          background: var(--surface);
          border-radius: 8px;
          flex-wrap: wrap;
          margin: 6px 0;
          flex-shrink: 0;
        }
        .talk-words-label {
          font-size: 0.75rem;
          color: var(--muted);
          font-weight: 600;
        }
        .talk-word-chip {
          padding: 3px 10px;
          border-radius: 12px;
          border: 1px solid var(--border);
          font-size: 0.78rem;
          color: var(--muted);
          cursor: pointer;
          transition: all 0.2s;
        }
        .talk-word-chip.used {
          background: rgba(76,175,80,0.12);
          border-color: #4caf50;
          color: #4caf50;
        }
        .talk-word-chip:not(.used):hover {
          border-color: var(--blue);
          color: var(--blue);
        }
        .talk-words-progress {
          margin-left: auto;
          font-size: 0.75rem;
          color: var(--muted);
          font-weight: 600;
        }
        .talk-hint-bar {
          padding: 4px 10px;
          background: rgba(79,143,247,0.08);
          border-radius: 6px;
          font-size: 0.78rem;
          color: var(--text);
          margin-bottom: 4px;
          cursor: pointer;
          flex-shrink: 0;
        }
        .talk-hint-close {
          float: right;
          color: var(--muted);
        }

        /* 操作区 — 移动端在底部导航上方，桌面端居中限宽 */
        /* ── Action bar: 固定布局，避免跳动 ── */
        .talk-action-bar {
          flex-shrink: 0;
          position: sticky;
          bottom: 0;
          z-index: 10;
          padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
          background: var(--card-bg);
          border-radius: 16px 16px 0 0;
          box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
        }
        /* 状态文字行：固定高度，内容淡入淡出 */
        .talk-action-status {
          height: 22px;
          overflow: hidden;
          margin-bottom: 4px;
        }
        .talk-status-text {
          text-align: center;
          font-size: 0.72rem;
          color: var(--muted);
          line-height: 22px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .talk-status-error { color: var(--red); }
        .talk-status-recording { color: var(--red); font-weight: 600; }
        .talk-status-tip { color: var(--blue); cursor: pointer; }
        .talk-status-tip em { font-style: italic; }
        /* 淡入淡出过渡 */
        .talk-fade-enter-active, .talk-fade-leave-active {
          transition: opacity 0.15s;
        }
        .talk-fade-enter, .talk-fade-leave-to {
          opacity: 0;
        }
        /* 波形区域：固定高度，录音时显示 */
        .talk-vis-zone {
          height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transition: opacity 0.2s;
          pointer-events: none;
        }
        .talk-vis-zone.active {
          opacity: 1;
        }
        /* 三列按钮行 */
        .talk-action-row {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0;
          height: 68px;
        }
        .talk-action-left, .talk-action-right {
          flex: 1;
          display: flex;
          align-items: center;
          min-width: 0;
        }
        .talk-action-left { justify-content: flex-end; gap: 4px; padding-right: 12px; }
        .talk-action-right { justify-content: flex-start; gap: 4px; padding-left: 12px; }
        .talk-action-center { flex-shrink: 0; }
        /* 图标按钮（重播/速度） */
        .talk-btn-icon {
          width: 40px; height: 40px;
          border-radius: 50%;
          border: 1.5px solid var(--border);
          background: var(--surface);
          color: var(--muted);
          font-size: 1rem;
          cursor: pointer;
          display: flex; align-items: center; justify-content: center;
          transition: all 0.15s;
          padding: 0;
          flex-shrink: 0;
        }
        .talk-btn-icon:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
        .talk-btn-icon:disabled { opacity: 0.35; cursor: not-allowed; }
        .talk-btn-icon--speed { font-size: 0.72rem; font-weight: 700; }
        /* 文字按钮（结束/自动/继续） */
        .talk-btn-text {
          padding: 6px 12px;
          border-radius: 14px;
          border: 1.5px solid var(--border);
          background: var(--surface);
          color: var(--muted);
          font-size: 0.75rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.15s;
          white-space: nowrap;
        }
        .talk-btn-text:hover { border-color: var(--blue); color: var(--blue); }
        .talk-btn-text--end { border-color: rgba(240,80,80,0.3); color: var(--red); }
        .talk-btn-text--end:hover { border-color: var(--red); background: rgba(240,80,80,0.06); }
        /* 主麦克风按钮 */
        .talk-btn-mic {
          width: 60px; height: 60px;
          border-radius: 50%;
          border: none;
          background: linear-gradient(135deg, #4f8ff7, #6ca6ff);
          color: #fff;
          font-size: 1.4rem;
          font-weight: 700;
          cursor: pointer;
          box-shadow: 0 4px 16px rgba(79,143,247,0.25);
          transition: all 0.2s;
          display: flex; align-items: center; justify-content: center;
          flex-shrink: 0;
          padding: 0;
          position: relative;
          overflow: visible;
        }
        .talk-btn-mic:not(.disabled):not(.recording):hover {
          transform: scale(1.05);
          box-shadow: 0 6px 24px rgba(79,143,247,0.3);
        }
        .talk-btn-mic:active:not(.disabled) { transform: scale(0.95); }
        .talk-btn-mic.recording {
          background: linear-gradient(135deg, #e53935, #ff6f60);
          box-shadow: 0 4px 16px rgba(229,57,53,0.25);
          animation: talk-rec-pulse 1.5s ease-in-out infinite;
        }
        @keyframes talk-rec-pulse {
          0%, 100% { box-shadow: 0 4px 16px rgba(229,57,53,0.25); }
          50% { box-shadow: 0 4px 24px rgba(229,57,53,0.45); }
        }
        .talk-btn-mic.disabled {
          background: var(--hover);
          color: var(--muted);
          box-shadow: none;
          cursor: not-allowed;
        }
        .talk-btn-mic--countdown {
          animation: talk-countdown-pulse 1s ease-in-out infinite;
        }
        .talk-btn-mic--countdown .talk-countdown-num {
          font-size: 20px;
          font-weight: 700;
        }
        @keyframes talk-countdown-pulse {
          0%, 100% { transform: scale(1); opacity: 1; }
          50% { transform: scale(1.06); opacity: 0.85; }
        }
        @media (prefers-reduced-motion: reduce) {
          .talk-btn-mic--countdown, .talk-btn-mic.recording { animation: none; }
        }
        .talk-btn-mic--interrupt {
          opacity: 0.6;
          background: linear-gradient(135deg, rgba(79,143,247,0.5), rgba(108,166,255,0.5));
          box-shadow: none;
        }
        .talk-btn-mic--interrupt:hover, .talk-btn-mic--interrupt:active {
          opacity: 1;
          background: linear-gradient(135deg, #4f8ff7, #6ca6ff);
        }
        .talk-btn-mic--summary {
          background: linear-gradient(135deg, #8b6cf6, #a78bfa);
          box-shadow: 0 4px 16px rgba(139,108,246,0.25);
        }
        /* 音频兜底播放条 */
        .talk-tap-play-bar {
          display: block;
          width: 100%;
          margin-top: 6px;
          padding: 8px;
          border-radius: 10px;
          border: none;
          background: rgba(79,143,247,0.1);
          color: var(--blue);
          font-size: 0.8rem;
          font-weight: 600;
          cursor: pointer;
          text-align: center;
          transition: background 0.15s;
        }
        .talk-tap-play-bar:active { background: rgba(79,143,247,0.2); }

        /* 暗黑模式 */
        [data-theme="dark"] .talk-chat-main {
          background: var(--card-bg);
        }
        [data-theme="dark"] .talk-bubble.ai {
          background: rgba(255,255,255,0.06);
        }
        [data-theme="dark"] .talk-words-bar {
          background: var(--card-bg);
        }
        [data-theme="dark"] .talk-action-bar {
          background: var(--surface);
          box-shadow: 0 -2px 12px rgba(0,0,0,0.3);
        }
        [data-theme="dark"] .talk-btn-icon {
          background: rgba(255,255,255,0.06);
          border-color: rgba(255,255,255,0.12);
        }
        [data-theme="dark"] .talk-btn-text {
          background: rgba(255,255,255,0.06);
          border-color: rgba(255,255,255,0.12);
        }
        [data-theme="dark"] .talk-tap-play-bar {
          background: rgba(79,143,247,0.15);
        }
        /* 桌面端：#app 有 16px 上下 margin，100dvh 会溢出 */
        @media (min-width: 640px) {
          .talk-live-shell--chat {
            height: calc(100vh - 56px - 32px);   /* 旧浏览器 fallback */
            height: calc(100dvh - 56px - 32px);  /* 减去 #app margin 32px */
          }
        }
/* ══ AI Talk 选择页 UI 规范化 ══ */
.speak-section-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  text-align: left;
  margin: 0 0 10px;
  padding: 0;
}
.talk-section-hint {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
}

/* ── 离线/弱网横幅 ── */
.offline-banner {
  position: sticky;
  top: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 16px;
  background: linear-gradient(135deg, #374151, #4b5563);
  color: #e5e7eb;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}
.offline-banner--weak {
  background: linear-gradient(135deg, #92400e, #b45309);
  color: #fef3c7;
}
.offline-banner-icon { font-size: 0.85rem; flex-shrink: 0; }
.offline-banner-text { min-width: 0; }
.offline-bar-enter-active, .offline-bar-leave-active {
  transition: transform 0.25s, opacity 0.25s;
}
.offline-bar-enter, .offline-bar-leave-to {
  transform: translateY(-100%);
  opacity: 0;
}
[data-theme="dark"] .offline-banner {
  background: linear-gradient(135deg, #1f2937, #374151);
  color: #d1d5db;
}
[data-theme="dark"] .offline-banner--weak {
  background: linear-gradient(135deg, #78350f, #92400e);
}
/* 离线功能提示卡片 */
.offline-feature-notice {
  text-align: center;
  padding: 24px 20px;
  margin: 12px 16px;
  background: rgba(107,114,128,0.06);
  border-radius: 14px;
  border: 1.5px dashed rgba(107,114,128,0.2);
}
.offline-feature-notice--compact {
  padding: 10px 16px;
  margin: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}
.offline-feature-icon { font-size: 1.2rem; }
.offline-feature-notice--compact .offline-feature-icon { font-size: 0.9rem; }
.offline-feature-text {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.4;
}
.offline-feature-hint {
  font-size: 0.75rem;
  color: var(--blue);
  margin-top: 8px;
  font-weight: 500;
}
[data-theme="dark"] .offline-feature-notice {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}

/* ── Talk 未登录 Gate ── */
.talk-login-gate {
  display: flex; flex-direction: column; align-items: center;
  padding: 56px 24px 48px; text-align: center;
}
.talk-login-gate-icon { font-size: 3rem; margin-bottom: 14px; }
.talk-login-gate-title { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.talk-login-gate-desc { font-size: 0.88rem; color: var(--muted); margin-bottom: 24px; max-width: 260px; line-height: 1.5; }
.talk-login-gate-btn {
  padding: 12px 32px; border-radius: 14px; border: none;
  background: var(--blue); color: #fff;
  font-size: 0.95rem; font-weight: 700; cursor: pointer;
  min-height: 48px; min-width: 180px;
  transition: opacity 0.15s;
}
.talk-login-gate-btn:hover { opacity: 0.88; }

/* 分类按钮优化 */
.talk-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
@media (max-width: 420px) {
  .talk-categories { grid-template-columns: repeat(2, 1fr); }
}
.talk-cat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 6px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
}
.talk-cat-btn:hover {
  border-color: var(--blue);
  background: rgba(79,143,247,0.06);
}
.talk-cat-btn.selected {
  border-color: var(--blue);
  background: rgba(79,143,247,0.1);
  color: var(--blue);
  font-weight: 600;
}
.talk-cat-icon { font-size: 1.4rem; line-height: 1; }

/* 自定义输入框 */
.talk-custom-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-size: 16px;
  background: var(--surface);
  color: var(--text);
  box-sizing: border-box;
}
.talk-custom-input::placeholder {
  color: var(--muted);
  opacity: 0.7;
}
.talk-custom-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(79,143,247,0.12);
}

/* 预览词汇 */
.talk-preview-words {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 12px;
  background: var(--hover);
  border-radius: 10px;
  margin: 12px 0;
}
.talk-preview-pill {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 0.78rem;
  color: var(--text);
  font-weight: 500;
}
.talk-preview-more {
  font-size: 0.75rem;
  color: var(--muted);
}

/* 开始按钮 — Primary CTA */
.speak-start-btn {
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #4f8ff7, #6ca6ff);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(79,143,247,0.25);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
  touch-action: manipulation;
}
.speak-start-btn:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: 0 6px 20px rgba(79,143,247,0.32);
}
.speak-start-btn:active:not(:disabled) {
  transform: scale(0.97);
}
.speak-start-btn:disabled {
  background: var(--hover);
  color: var(--muted);
  box-shadow: none;
  cursor: not-allowed;
}
[data-theme="dark"] .speak-start-btn {
  background: linear-gradient(135deg, #5b9cf7, #78b0ff);
  box-shadow: 0 4px 20px rgba(91,156,247,0.3);
}
[data-theme="dark"] .speak-start-btn:hover:not(:disabled) {
  box-shadow: 0 6px 24px rgba(91,156,247,0.38);
}
[data-theme="dark"] .speak-start-btn:disabled {
  background: var(--hover);
  color: var(--muted);
  box-shadow: none;
}

/* Role Card 优化 */
.talk-ready-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 420px;
  margin: 0 auto;
  text-align: left;
}
.talk-ready-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}
.talk-ready-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
  margin-top: -4px;
}
.talk-role-card--ready {
  background: linear-gradient(180deg, rgba(79,143,247,0.06), transparent);
  border: 1.5px solid rgba(79,143,247,0.15);
  border-radius: 14px;
  padding: 14px 16px;
}
.talk-role-scene {
  font-size: 0.82rem;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.4;
}
.talk-role-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.talk-role-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.talk-role-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}
.talk-role-desc {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
}
.talk-role-goal {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(249,115,22,0.06);
  border: 1px solid rgba(249,115,22,0.15);
}
.talk-role-goal .goal-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #ea580c;
}
.talk-role-goal .goal-text {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.45;
}
.talk-ready-vocab-label {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 6px;
}
.talk-ready-note {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.5;
  text-align: center;
}

/* 轮次药丸 — 浮动在对话区右上角 */
.talk-turn-pill {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,0.06);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  pointer-events: none;
}
[data-theme="dark"] .talk-turn-pill {
  background: rgba(255,255,255,0.08);
}
/* Streak badge */
.talk-streak-badge{margin-left:4px;color:#f59e0b;font-weight:700;animation:talk-streak-pop .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes talk-streak-pop{from{opacity:0;transform:scale(0.5)}to{opacity:1;transform:none}}

/* Word pop animation */
.talk-word-chip.just-used{animation:talk-word-pop .6s cubic-bezier(.34,1.56,.64,1);border-color:#4caf50;background:rgba(76,175,80,0.2);box-shadow:0 0 12px rgba(76,175,80,0.3)}
@keyframes talk-word-pop{0%{transform:scale(1)}30%{transform:scale(1.35)}100%{transform:scale(1)}}

/* Recording vis-zone: speech-active color */
.talk-vis-zone.speech .speak-vis-bar{background:var(--blue) !important;box-shadow:0 0 6px rgba(79,143,247,0.3)}
[data-theme="dark"] .talk-vis-zone.speech .speak-vis-bar{background:rgba(79,143,247,0.8) !important}

/* Recording button double ring */
.talk-btn-mic.recording::before,.talk-btn-mic.recording::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(229,57,53,0.3);animation:talk-ring-expand 2s ease-out infinite;pointer-events:none}
.talk-btn-mic.recording::after{inset:-12px;animation-delay:0.7s}
@keyframes talk-ring-expand{0%{transform:scale(0.8);opacity:0.6}100%{transform:scale(1.3);opacity:0}}

/* Celebration toast */
.talk-celebration-toast{padding:10px 20px;background:linear-gradient(135deg,rgba(43,200,102,0.12),rgba(79,143,247,0.08));border:1px solid rgba(43,200,102,0.2);border-radius:14px;font-size:0.85rem;font-weight:600;color:var(--text);text-align:center;animation:talk-celebrate-in .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes talk-celebrate-in{from{opacity:0;transform:translateY(10px) scale(0.9)}to{opacity:1;transform:none}}
[data-theme="dark"] .talk-celebration-toast{background:linear-gradient(135deg,rgba(43,200,102,0.08),rgba(79,143,247,0.06));border-color:rgba(43,200,102,0.15)}

/* Quick-reply chips */
.talk-quick-replies{display:flex;align-items:center;gap:8px;padding:4px 0;flex-wrap:wrap}
.talk-quick-label{font-size:0.75rem;color:var(--muted);flex-shrink:0}
.talk-quick-chip{padding:6px 14px;border-radius:99px;border:1.5px solid rgba(79,143,247,0.25);background:rgba(79,143,247,0.04);font-size:0.8rem;font-weight:600;color:var(--blue);cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent;min-height:36px}
.talk-quick-chip:hover{background:rgba(79,143,247,0.1);border-color:rgba(79,143,247,0.5)}
.talk-quick-chip:active{transform:scale(0.96);background:var(--blue);color:#fff;border-color:var(--blue)}
.talk-quick-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-theme="dark"] .talk-quick-chip{background:rgba(79,143,247,0.08);border-color:rgba(79,143,247,0.2)}
[data-theme="dark"] .talk-quick-chip:active{background:rgba(79,143,247,0.7)}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
.talk-streak-badge,.talk-word-chip.just-used,.talk-btn-mic.recording::before,.talk-btn-mic.recording::after,.talk-celebration-toast{animation:none !important}
}
/* End 按钮 — 操作区内 */
.talk-btn-end {
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s;
}
.talk-btn-end:active {
  border-color: var(--red, #ff3b30);
  color: var(--red, #ff3b30);
}
/* Speed 按钮 — 操作区内 */
.talk-btn-speed {
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  min-height: 36px;
  -webkit-tap-highlight-color: transparent;
}
/* Tip 关闭按钮 */
.talk-tip-close {
  float: right;
  color: var(--muted);
  opacity: 0.6;
  cursor: pointer;
  margin-left: 8px;
}
/* 点击播放兜底按钮 */
.talk-btn-tap-play {
  padding: 10px 18px;
  border-radius: 14px;
  border: 1.5px solid var(--blue, #4f8ff7);
  background: rgba(79,143,247,0.08);
  color: var(--blue, #4f8ff7);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  animation: bubbleIn 0.25s ease-out;
}
.talk-btn-tap-play:active { opacity: 0.7; transform: scale(0.97); }

/* 对话气泡优化 */
.talk-chat-main {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 160px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #f0f4fa;
  border-radius: 14px;
  margin-bottom: 10px;
}
.talk-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 0.9rem;
  line-height: 1.55;
  animation: bubbleIn 0.25s ease-out;
}
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.talk-bubble.ai {
  align-self: flex-start;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  border-bottom-left-radius: 6px;
}
.talk-bubble.user {
  align-self: flex-end;
  background: linear-gradient(135deg, #4f8ff7, #5a9bff);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.talk-bubble-name {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(24,33,50,0.7);
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.talk-bubble.user .talk-bubble-name {
  color: rgba(255,255,255,0.75);
}
.talk-bubble-text {
  word-wrap: break-word;
}
.talk-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--blue);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: talkCursorBlink 0.8s step-end infinite;
}
@keyframes talkCursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.talk-feedback-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.06);
  font-size: 0.76rem;
}
.talk-bubble.user .talk-feedback-row {
  border-top-color: rgba(255,255,255,0.12);
}

/* 旧底部操作区样式已移除 — 新版在 .talk-action-bar 重构块 */

/* 暗黑模式补充 */
/* topbar removed — turn pill dark mode handled above */
[data-theme="dark"] .talk-chat-main { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .talk-bubble.ai { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.06); box-shadow: none; }
[data-theme="dark"] .talk-bubble-name { color: rgba(230,236,245,0.65); }
/* talk-action-bar dark mode 已在重构块定义 */
[data-theme="dark"] .talk-feedback-row { background: rgba(79,143,247,0.08); }
[data-theme="dark"] .talk-role-card--ready { background: linear-gradient(180deg, rgba(79,143,247,0.1), transparent); border-color: rgba(79,143,247,0.2); }
[data-theme="dark"] .talk-role-goal { background: rgba(249,115,22,0.1); border-color: rgba(249,115,22,0.2); }
[data-theme="dark"] .talk-role-goal .goal-label { color: #fb923c; }
[data-theme="dark"] .talk-preview-words { background: var(--card-bg); }
[data-theme="dark"] .talk-preview-pill { background: var(--hover); border-color: transparent; }

/* Settings Drawer */
.settings-drawer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    visibility: hidden;
    pointer-events: none;
}
.settings-drawer.open {
    visibility: visible;
    pointer-events: auto;
}
.settings-drawer .settings-drawer-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.settings-drawer.open .settings-drawer-overlay {
    opacity: 1;
}
.settings-drawer .settings-drawer-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 80vh;
    max-width: 920px;
    margin: 0 auto;
    background: var(--card);
    border-radius: 20px 20px 0 0;
    padding: 0 16px 24px;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.25s ease;
}
.settings-drawer.open .settings-drawer-content {
    transform: translateY(0);
}
.settings-drawer .settings-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    font-size: 1rem;
    font-weight: 700;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
    position: sticky;
    top: 0;
    background: var(--card);
}
/* 用户信息区 */
.settings-user-info {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}
.settings-user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f8ff7, #8b6cf6);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.settings-user-info-body {
    flex: 1;
    min-width: 0;
}
.settings-user-name {
    font-size: 1.1rem;
    font-weight: 600;
}
.settings-user-level {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}
.sul-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    color: var(--muted);
    letter-spacing: .3px;
    transition: color .2s, border-color .2s;
}
.sul-badge.sul-active {
    background: transparent;
}
.sul-pct {
    font-weight: 500;
    margin-left: 2px;
    font-size: 0.65rem;
    opacity: .85;
}
.sul-mastered {
    font-size: 0.68rem;
    color: var(--muted);
    margin-left: 2px;
}
.settings-user-push-level {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    font-size: 0.72rem;
    color: var(--muted);
}
.supl-icon {
    font-size: 0.75rem;
    flex-shrink: 0;
}
.supl-text b {
    font-weight: 700;
}
.supl-hint {
    font-size: 0.65rem;
    opacity: .7;
    margin-left: 3px;
}
.supl-levels {
    display: flex;
    gap: 6px;
    margin-left: 2px;
}
.supl-level-btn {
    padding: 6px 12px;
    border-radius: 99px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    touch-action: manipulation;
    min-width: 40px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.supl-level-btn--active {
    border-color: transparent;
    color: #fff;
}
.supl-level-btn:not(.supl-level-btn--active):hover {
    background: var(--hover);
}
[data-theme="dark"] .supl-level-btn {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .supl-level-btn:not(.supl-level-btn--active):hover {
    background: rgba(255,255,255,0.1);
}
.settings-user-guest {
    cursor: pointer;
}
.settings-user-guest .settings-user-avatar {
    background: var(--hover);
    color: var(--muted);
}
.settings-user-guest .settings-user-name {
    color: var(--blue);
}
.settings-user-arrow {
    font-size: 1.2rem;
    color: var(--muted);
}
.settings-drawer .settings-drawer-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--hover);
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    color: var(--muted);
 min-height: 44px; min-width: 44px; }

[data-theme="dark"] .settings-drawer .settings-drawer-overlay {
    background: rgba(0,0,0,0.6);
}

/* ========== AI Talk 最近练习预览 ========== */
.talk-recent-section {
    margin-bottom: 20px;
    padding: 14px;
    background: var(--surface);
    border-radius: var(--r, 16px);
    border: 1px solid var(--border);
}
.talk-recent-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.talk-recent-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
}
.talk-recent-more {
    background: none;
    border: none;
    color: var(--blue);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
}
.talk-recent-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.talk-recent-card {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bg);
    cursor: pointer;
    transition: background 0.15s;
}
.talk-recent-card:active {
    background: var(--border);
}
.talk-recent-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.talk-recent-scene {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
}
.talk-recent-score {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted);
    min-width: 28px;
    text-align: center;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(137, 147, 168, 0.1);
}
.talk-recent-score.good {
    color: var(--green);
    background: rgba(43, 200, 102, 0.1);
}
.talk-session-badge.active {
    font-size: 0.7rem;
    font-weight: 600;
    color: #f59e0b;
    background: rgba(245,158,11,0.12);
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
}
.talk-history-actions-inline {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}
.talk-history-turns {
    font-size: 0.75rem;
    color: var(--muted);
}
[data-theme="dark"] .talk-session-badge.active {
    color: #fbbf24;
    background: rgba(251,191,36,0.15);
}
.talk-recent-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.talk-recent-date {
    font-size: 0.78rem;
    color: var(--muted);
}
.talk-recent-replay {
    background: none;
    border: 1px solid var(--blue);
    color: var(--blue);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}
.talk-recent-replay:active {
    background: var(--blue);
    color: #fff;
}
[data-theme="dark"] .talk-recent-card {
    background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .talk-recent-card:active {
    background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .talk-recent-score {
    background: rgba(137, 147, 168, 0.15);
}
[data-theme="dark"] .talk-recent-score.good {
    background: rgba(43, 200, 102, 0.15);
}

/* ========== AI Talk 历史记录 ========== */
.talk-history-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.talk-history-btn:hover {
    border-color: var(--blue);
    color: var(--blue);
}
.talk-history-icon {
    font-size: 1.1rem;
}

/* Talk history panel styles migrated to pages/talk-history.html */

/* ══════════════════════════════════════════════════════════════════════
   Today Tab
   ══════════════════════════════════════════════════════════════════════ */
.today-dashboard {
    width: 100%;
    max-width: var(--shell-max-width);
    margin: 0 auto;
    padding: calc(14px + env(safe-area-inset-top)) 16px calc(80px + env(safe-area-inset-bottom));
    background: var(--ambient-bg);
    display: flex;
    flex-direction: column;
    gap: 16px;
    --today-panel-bg: linear-gradient(165deg, rgba(255,255,255,0.88) 0%, rgba(248,250,255,0.92) 100%);
    --today-panel-bg-strong: linear-gradient(165deg, rgba(255,255,255,0.94) 0%, rgba(250,251,253,0.98) 100%);
    --today-panel-border: rgba(15,23,42,0.10);
    --today-panel-border-soft: rgba(15,23,42,0.07);
    --today-panel-shadow: 0 20px 44px rgba(15,23,42,0.05);
    --today-inline-surface: rgba(255,255,255,0.7);
    --today-inline-border: rgba(15,23,42,0.09);
    /* 卡片面背景（毛玻璃渐变） */
    --today-card-bg: linear-gradient(165deg, rgba(255,255,255,0.92) 0%, rgba(248,250,255,0.88) 100%);
}
.today-dashboard > * { min-width: 0; }
[data-theme="dark"] .today-dashboard {
    --today-panel-bg: linear-gradient(165deg, rgba(14,20,32,0.94) 0%, rgba(18,26,40,0.9) 100%);
    --today-panel-bg-strong: linear-gradient(165deg, rgba(16,22,34,0.98) 0%, rgba(22,30,46,0.96) 100%);
    --today-panel-border: rgba(148,163,184,0.16);
    --today-panel-border-soft: rgba(148,163,184,0.12);
    --today-panel-shadow: var(--shadow-float);
    --today-inline-surface: rgba(255,255,255,0.05);
    --today-inline-border: rgba(148,163,184,0.14);
    --today-card-bg: linear-gradient(165deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
}
/* ═══ 时段氛围变体 ═══════════════════════════════════════════════════ */
/* 早晨 5:00-11:59 — 暖橙微光 */
.today-dashboard.morning {
    --ambient-bg: linear-gradient(180deg, rgba(255,180,100,0.08) 0%, transparent 40%);
    --fox-glow: rgba(255,200,100,0.2);
}
/* 下午 12:00-17:59 — 默认，不覆盖 */
.today-dashboard.afternoon {
    --ambient-bg: transparent;
}
/* 傍晚 18:00-23:29 — 淡紫渐变 */
.today-dashboard.evening {
    --ambient-bg: linear-gradient(180deg, rgba(139,108,246,0.06) 0%, transparent 40%);
    --fox-glow: rgba(139,108,246,0.15);
}
/* 深夜 23:30-4:59 — 深蓝静谧 */
.today-dashboard.night {
    --ambient-bg: linear-gradient(180deg, rgba(30,58,138,0.1) 0%, transparent 40%);
    --fox-glow: rgba(100,150,255,0.12);
}
/* 时段色调渐染到卡片 */
.today-dashboard.morning { --today-card-bg: linear-gradient(165deg, rgba(255,247,237,0.85), rgba(255,255,255,0.9)); }
.today-dashboard.evening { --today-card-bg: linear-gradient(165deg, rgba(245,243,255,0.85), rgba(255,255,255,0.9)); }
.today-dashboard.night   { --today-card-bg: linear-gradient(165deg, rgba(240,245,255,0.85), rgba(255,255,255,0.9)); }
/* 暗黑模式时段：保持暗色基底 + 微弱色调 */
[data-theme="dark"] .today-dashboard.morning { --today-card-bg: linear-gradient(165deg, rgba(255,200,120,0.06) 0%, rgba(255,255,255,0.02) 100%); }
[data-theme="dark"] .today-dashboard.evening { --today-card-bg: linear-gradient(165deg, rgba(139,108,246,0.06) 0%, rgba(255,255,255,0.02) 100%); }
[data-theme="dark"] .today-dashboard.night   { --today-card-bg: linear-gradient(165deg, rgba(100,150,255,0.06) 0%, rgba(255,255,255,0.02) 100%); }

/* ── Day 1 欢迎视图 ───────────────────────────────────────────── */
.today-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 20px 24px;
    background: var(--today-card-bg, var(--surface));
    border: var(--border-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-float);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: foxEnter 0.5s var(--ease-spring) both;
}
.today-welcome-fox {
    position: relative;
    margin-bottom: 16px;
}
.today-welcome-emoji {
    font-size: 3rem;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1));
    display: block;
    animation: welcomeBounce 1.2s var(--ease-spring) 0.3s both;
}
@keyframes welcomeBounce {
    0% { transform: scale(0) rotate(-10deg); opacity: 0; }
    60% { transform: scale(1.15) rotate(3deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
.today-welcome-msg {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 24px;
    white-space: pre-line;
    max-width: 280px;
}
.today-welcome-cta {
    width: 100%;
    max-width: 280px;
    padding: 14px 24px;
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--blue), #9B6EFF);
    color: #fff;
    font-size: 1.02rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-glow-blue-v2);
    transition: all var(--duration-normal) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
    margin-bottom: 10px;
}
.today-welcome-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(79,143,247,0.25); }
.today-welcome-cta:active { transform: scale(0.98); }
.today-welcome-skip {
    width: 100%;
    max-width: 280px;
    padding: 12px 24px;
    border: var(--border-card);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-smooth);
    -webkit-tap-highlight-color: transparent;
    margin-bottom: 20px;
}
.today-welcome-skip:hover { border-color: rgba(79,143,247,0.2); background: rgba(79,143,247,0.04); }
.today-welcome-skip:active { transform: scale(0.98); }
.today-welcome-promise {
    font-size: 0.82rem;
    color: var(--muted);
    font-weight: 500;
}
[data-theme="dark"] .today-welcome {
    background: var(--today-card-bg, rgba(255,255,255,0.04));
    box-shadow: var(--shadow-float);
    border-top: 1px solid rgba(255,255,255,0.06);
}
[data-theme="dark"] .today-welcome-skip {
    border-color: rgba(255,255,255,0.1);
    color: var(--text);
}

/* ── Skeleton loading ──────────────────────────────────────────── */
.today-skeleton {
    display: flex; flex-direction: column; gap: 12px;
    padding: 20px;
    background: var(--today-card-bg, var(--surface));
    border: var(--border-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card-v2);
}
.skel-bar {
    height: 14px;
    border-radius: 7px;
    background: rgba(15,23,42,0.06);
    animation: skelPulse 1.4s ease-in-out infinite;
}
.skel-bar--short { width: 60%; }
.skel-bar--mid { width: 80%; }
.skel-bar--full { width: 100%; }
.skel-bar--btn { height: 48px; border-radius: var(--radius-md); width: 100%; }
.skel-row { display: flex; gap: 8px; align-items: center; }
.skel-dot { width: 36px; height: 36px; border-radius: 50%; background: rgba(15,23,42,0.06); animation: skelPulse 1.4s ease-in-out infinite; flex-shrink: 0; }
@keyframes skelPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
[data-theme="dark"] .skel-bar { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .skel-dot { background: rgba(255,255,255,0.06); }

/* ── Topic active indicator (Learn/Practice/Shadow/Talk tabs) ── */
.topic-active-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    margin: 0 0 8px;
    background: rgba(79,143,247,0.08);
    border: 1px solid rgba(79,143,247,0.15);
    border-radius: var(--radius-sm, 10px);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--blue);
    animation: topicBadgeIn 0.25s var(--ease-out, ease) both;
}
@keyframes topicBadgeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.topic-active-indicator-label { flex: 1; min-width: 0; }
.topic-active-indicator-clear {
    background: none; border: none; color: var(--muted); cursor: pointer;
    font-size: 0.8rem; padding: 2px 4px; border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.topic-active-indicator-clear:hover { color: var(--red, #f05050); background: rgba(240,80,80,0.08); }
[data-theme="dark"] .topic-active-indicator {
    background: rgba(79,143,247,0.12);
    border-color: rgba(79,143,247,0.2);
}

/* ── Global focus-visible ──────────────────────────────────────── */
.today-dashboard button:focus-visible,
.today-dashboard a:focus-visible,
.today-dashboard [tabindex]:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* ── Brand header ─────────────────────────────────────────────────── */
.today-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    padding: 2px 2px 0;
    min-width: 0;
}
.today-brand-streak {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 10px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, rgba(249,115,22,0.1), rgba(234,179,8,0.08));
    border: 1px solid rgba(249,115,22,0.18);
    box-shadow: 0 2px 8px rgba(249,115,22,0.1);
    font-size: 0.78rem; font-weight: 700; color: #ea580c;
    white-space: nowrap;
    transition: box-shadow var(--duration-fast) var(--ease-smooth);
}
[data-theme="dark"] .today-brand-streak {
    background: linear-gradient(135deg, rgba(249,115,22,0.14), rgba(234,179,8,0.1));
    border-color: rgba(249,115,22,0.2);
    box-shadow: 0 2px 8px rgba(249,115,22,0.12);
    color: #fdba74;
}
.today-brand-icon {
    width: 30px; height: 30px; border-radius: var(--radius-sm);
    image-rendering: -webkit-optimize-contrast;
    box-shadow: 0 8px 20px rgba(79,143,247,0.15), 0 0 0 2px rgba(79,143,247,0.08);
    animation: brandPulse 3s ease-in-out infinite;
}
@keyframes brandPulse {
    0%, 100% { box-shadow: 0 8px 20px rgba(79,143,247,0.15), 0 0 0 2px rgba(79,143,247,0.08); }
    50% { box-shadow: 0 8px 24px rgba(79,143,247,0.2), 0 0 0 3px rgba(79,143,247,0.12); }
}
.today-brand-name {
    font-size: 1.02rem; font-weight: 760; letter-spacing: -0.02em;
    color: var(--text);
    min-width: 0;
}
.today-brand-slogan {
    font-size: 0.72rem; color: var(--muted); font-weight: 500;
}
/* Brand bar right: user status */
.today-brand-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 4px;
    border-radius: 999px;
    background: var(--today-inline-surface);
    border: 1px solid var(--today-panel-border-soft);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 18px rgba(15,23,42,0.04);
}
.today-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(79,143,247,0.18), rgba(139,108,246,0.16));
    border: 1px solid rgba(79,143,247,0.14);
    color: var(--blue); font-weight: 700; font-size: 0.82rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
}
.today-login-btn {
    min-height: 36px;
    padding: 0 14px;
    font-size: 0.78rem; font-weight: 700;
    border-radius: 999px; border: 1px solid var(--today-inline-border);
    color: var(--blue); background: rgba(79,143,247,0.05); cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.today-settings-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid transparent;
    padding: 0;
    cursor: pointer;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    position: relative;
    z-index: 5;
}
.today-login-btn:hover,
.today-settings-btn:hover {
    background: rgba(79,143,247,0.08);
    border-color: rgba(79,143,247,0.14);
    color: var(--blue);
}
.today-greeting-streak,
.today-greeting-score {
    font-size: 0.78rem; font-weight: 600; margin-left: 8px;
    white-space: nowrap;
}
[data-theme="dark"] .today-brand-right { box-shadow: none; }
[data-theme="dark"] .today-avatar {
    background: linear-gradient(135deg, rgba(79,143,247,0.22), rgba(139,108,246,0.18));
    border-color: rgba(125,164,255,0.2);
    color: #dbeafe;
}
[data-theme="dark"] .today-login-btn {
    background: rgba(79,143,247,0.12);
    border-color: rgba(125,164,255,0.16);
    color: #dbeafe;
}
[data-theme="dark"] .today-settings-btn { color: rgba(255,255,255,0.72); }

.today-deck-shell,
.today-focus-nudge-shell,
.today-focus-cluster {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: var(--today-card-bg);
    border: var(--border-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card-v2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: box-shadow var(--duration-normal) var(--ease-smooth),
                border-color var(--duration-normal) var(--ease-smooth);
}
[data-theme="dark"] .today-deck-shell,
[data-theme="dark"] .today-focus-nudge-shell,
[data-theme="dark"] .today-focus-cluster {
    box-shadow: var(--shadow-card-v2);
    border-top: 1px solid rgba(255,255,255,0.10);
}

/* ── Deck info card ──────────────────────────────────────────────── */
.today-deck-card {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,0.54);
    border: 1px solid var(--today-inline-border);
    border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 0;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-smooth),
                border-color var(--duration-fast) var(--ease-smooth),
                box-shadow var(--duration-fast) var(--ease-smooth),
                transform var(--duration-fast) var(--ease-smooth);
    box-shadow: var(--shadow-subtle-v2);
}
.today-deck-card:hover {
    border-color: rgba(79,143,247,0.15);
    box-shadow: var(--shadow-card-v2), 0 0 0 1px rgba(79,143,247,0.06);
}
.today-deck-card:active { background: rgba(79,143,247,0.08); transform: scale(0.98); }
[data-theme="dark"] .today-deck-card {
    background: rgba(255,255,255,0.03);
    border-color: var(--today-inline-border);
    box-shadow: var(--shadow-subtle-v2);
}
.today-deck-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.68);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
[data-theme="dark"] .today-deck-card-icon {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.08);
}
.today-deck-card-body { flex: 1; min-width: 0; }
.today-deck-card-name { font-size: 0.92rem; font-weight: 700; display: flex; align-items: center; gap: 6px; line-height: 1.3; }
.today-deck-card-level { font-size: 0.64rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(79,143,247,0.08); color: var(--blue); }
.today-deck-card-meta { font-size: 0.73rem; color: var(--muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-deck-card-switch { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.today-deck-card-hint { font-size: 0.64rem; color: var(--muted); font-weight: 700; white-space: nowrap; letter-spacing: 0.02em; text-transform: uppercase; }
.today-deck-card-arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(15,23,42,0.05);
    color: var(--muted);
    transition: transform 0.2s, background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.today-deck-card-arrow.open { transform: rotate(180deg); background: rgba(79,143,247,0.12); color: var(--blue); }
[data-theme="dark"] .today-deck-card-arrow { background: rgba(255,255,255,0.06); }

.today-deck-picker {
    background: rgba(255,255,255,0.72);
    border: 1px solid var(--today-inline-border);
    border-radius: var(--radius-md);
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
    max-height: 420px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--shadow-float);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
[data-theme="dark"] .today-deck-picker { background: rgba(15,23,42,0.85); border-color: var(--today-inline-border); box-shadow: var(--shadow-float); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.today-deck-group + .today-deck-group { border-top: 1px solid rgba(128,128,128,0.06); }
.today-deck-group-title { padding: 12px 14px 8px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.today-deck-pick-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; transition: background 0.12s; min-height: 54px; border-left: none; }
.today-deck-pick-item + .today-deck-pick-item { border-top: 1px solid rgba(128,128,128,0.06); }
.today-deck-pick-item:active { background: rgba(79,143,247,0.08); }
.today-deck-pick-item.active {
    background: rgba(79,143,247,0.08);
    box-shadow: inset 0 0 0 1px rgba(79,143,247,0.16);
}
[data-theme="dark"] .today-deck-pick-item.active {
    background: rgba(79,143,247,0.12);
    box-shadow: inset 0 0 0 1px rgba(125,164,255,0.16);
}
/* 收藏词库突出 */
.today-deck-pick-fav { background: rgba(245,158,11,0.04); }
.today-deck-pick-fav:active { background: rgba(245,158,11,0.08); }
.today-deck-pick-item.active.today-deck-pick-fav { background: rgba(245,158,11,0.08); box-shadow: inset 0 0 0 1px rgba(245,158,11,0.18); }
[data-theme="dark"] .today-deck-pick-fav { background: rgba(245,158,11,0.06); }
[data-theme="dark"] .today-deck-pick-item.active.today-deck-pick-fav { background: rgba(245,158,11,0.1); box-shadow: inset 0 0 0 1px rgba(245,158,11,0.22); }
.today-deck-pick-fav-badge { font-size: 0.6rem; font-weight: 600; padding: 1px 6px; border-radius: 5px; background: rgba(245,158,11,0.1); color: #d97706; }
[data-theme="dark"] .today-deck-pick-fav-badge { background: rgba(245,158,11,0.15); }
.today-deck-pick-icon { font-size: 1.2rem; margin-top: 2px; flex-shrink: 0; }
.today-deck-pick-body { flex: 1; min-width: 0; }
.today-deck-pick-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.today-deck-pick-name { font-size: 0.84rem; font-weight: 650; }
.today-deck-pick-level { font-size: 0.6rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,0.04); color: var(--muted); }
.today-deck-pick-level.dp-lv-easy { background: rgba(34,197,94,0.1); color: #16a34a; }
.today-deck-pick-level.dp-lv-mid { background: rgba(79,143,247,0.1); color: var(--blue); }
.today-deck-pick-level.dp-lv-hard { background: rgba(245,158,11,0.1); color: #d97706; }
.today-deck-pick-level.dp-lv-special { background: rgba(139,108,246,0.1); color: #7c3aed; }
.today-deck-pick-meta { font-size: 0.7rem; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-deck-pick-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(79,143,247,0.1);
    color: var(--blue);
    font-weight: 800;
    margin-top: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.today-deck-picker .today-deck-fav-list-btn {
    min-height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(79,143,247,0.16);
    background: rgba(79,143,247,0.06);
    color: var(--blue);
    font-size: 0.68rem;
    font-weight: 700;
}
[data-theme="dark"] .today-deck-picker .today-deck-fav-list-btn {
    background: rgba(79,143,247,0.12);
    border-color: rgba(79,143,247,0.18);
}
        .today-deck-more-wrap { padding-top: 8px; }
        .today-deck-more-btn { width:100%;padding:11px 12px;background:transparent;border:1px dashed var(--today-inline-border);border-radius:14px;color:var(--muted);font-size:.8rem;font-weight:700;cursor:pointer;transition:color .15s,border-color .15s,background .15s }
        .today-deck-more-btn:hover { color:var(--blue); border-color:rgba(79,143,247,0.2); background:rgba(79,143,247,0.04); }
/* Mini 进度条 */
.today-deck-pick-bar { height: 4px; background: rgba(79,143,247,0.08); border-radius: 999px; margin-top: 7px; overflow: hidden; }
.today-deck-pick-bar-fill { height: 100%; background: var(--blue); border-radius: 2px; transition: width 0.3s; }
[data-theme="dark"] .today-deck-pick-bar { background: rgba(79,143,247,0.12); }
[data-theme="dark"] .today-deck-card-level { background: rgba(79,143,247,0.15); }
[data-theme="dark"] .today-deck-pick-level { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .today-deck-pick-level.dp-lv-easy { background: rgba(34,197,94,0.15); }
[data-theme="dark"] .today-deck-pick-level.dp-lv-mid { background: rgba(79,143,247,0.15); }
[data-theme="dark"] .today-deck-pick-level.dp-lv-hard { background: rgba(245,158,11,0.15); }
[data-theme="dark"] .today-deck-pick-level.dp-lv-special { background: rgba(139,108,246,0.15); }

/* ══ 学习洞察卡 ═══════════════════════════════════════════════════════ */
.today-insights {
    background: var(--card-bg, rgba(255,255,255,0.05));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 16px; padding: 16px; margin-bottom: 14px;
}
.today-insights-title {
    font-size: 0.9rem; font-weight: 700; margin-bottom: 12px;
    color: var(--text, #111);
}
.today-insight-row {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 0; border-top: 1px solid var(--border, rgba(0,0,0,0.06));
}
.today-insight-row:first-of-type { border-top: none; padding-top: 0; }
.today-insight-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.today-insight-body { flex: 1; min-width: 0; }
.today-insight-label {
    font-size: 0.8rem; font-weight: 700; color: var(--text, #111);
    margin-bottom: 6px;
}
.today-insight-phonemes { display: flex; gap: 8px; flex-wrap: wrap; }
.today-insight-phoneme {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 20px;
    background: rgba(255, 100, 50, 0.1); color: #e54;
    font-weight: 700; font-size: 0.85rem; cursor: pointer;
    transition: background 0.2s;
}
.today-insight-phoneme:active { background: rgba(255, 100, 50, 0.2); }
.today-insight-phoneme-rate { font-size: 0.7rem; font-weight: 600; opacity: 0.7; }
.today-insight-words { display: flex; gap: 6px; flex-wrap: wrap; }
.today-insight-word {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 10px; border-radius: 14px;
    background: rgba(79, 143, 255, 0.1); color: var(--blue, #4f8fff);
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: background 0.2s;
}
.today-insight-word:active { background: rgba(79, 143, 255, 0.2); }
.today-insight-word-count { font-size: 0.7rem; opacity: 0.6; }
.today-insight-hint { font-size: 0.7rem; color: var(--muted, #999); margin-top: 5px; }
.today-insight-text { font-size: 0.82rem; color: var(--text-secondary, #666); line-height: 1.5; }
[data-theme="dark"] .today-insight-phoneme { background: rgba(255, 100, 50, 0.15); color: #ff8866; }
[data-theme="dark"] .today-insight-word { background: rgba(79, 143, 255, 0.15); }

/* ══ Hero 统计卡 ═══════════════════════════════════════════════════════ */
.today-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px;
    margin-top: var(--section-gap);
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(79,143,247,0.08) 0%, rgba(139,108,246,0.06) 100%);
    border: 1px solid rgba(79,143,247,0.1);
    border-radius: 24px;
    box-shadow: var(--shadow-glow-blue);
    animation: heroEnter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes heroEnter {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.today-hero-main { flex: 1; }
.today-hero-number {
    font-size: 3.2rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    line-height: 1.1;
    margin-bottom: 4px;
    background: linear-gradient(135deg, #4f8ff7, #8b6cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.today-hero-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 6px;
}
.today-hero-narrative {
    font-size: 0.78rem;
    color: var(--blue);
    font-weight: 500;
}
.today-hero-ring { position: relative; width: 90px; height: 90px; flex-shrink: 0; }
.milestone-ring { width: 90px; height: 90px; transform: rotate(-90deg); }
.milestone-ring-bg { fill: none; stroke: var(--hover); stroke-width: 6; }
.milestone-ring-fill { 
    fill: none; 
    stroke: url(#milestoneGradient); 
    stroke-width: 6; 
    stroke-linecap: round; 
    stroke-dasharray: 263.89; 
    transition: stroke-dashoffset 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.milestone-ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.milestone-ring-pct { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.milestone-ring-target { font-size: 0.65rem; color: var(--muted); font-weight: 600; }
[data-theme="dark"] .today-hero {
    background: linear-gradient(135deg, rgba(79,143,247,0.14) 0%, rgba(139,108,246,0.1) 100%);
    border-color: rgba(79,143,247,0.15);
    box-shadow: 0 4px 24px rgba(79,143,247,0.08);
}

/* ══ Hero Snapshot Strip (single-line lightweight) ════════════════════ */
.today-hero-strip {
    display: flex; align-items: center; justify-content: flex-start;
    flex-wrap: wrap; gap: 8px;
    padding: 0 2px; margin-bottom: 0;
    max-height: none;
    background: transparent;
    border: none;
    border-radius: 0;
    font-size: 0.82rem; font-weight: 600; color: var(--muted);
}
.hs-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 36px;
    padding: 7px 12px;
    white-space: nowrap;
    background: var(--today-inline-surface);
    border: 1px solid var(--today-panel-border-soft);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-subtle-v2);
    transition: box-shadow var(--duration-fast) var(--ease-smooth);
}
.hs-item b { font-weight: 800; color: var(--text); }
.hs-sep { display: none; }
/* Hero strip — new user variant */
.today-hero-strip--new {
    gap: 10px;
}
.hs-welcome-icon { font-size: 1.8rem; flex-shrink: 0; }
.hs-welcome-title { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.hs-welcome-sub { font-size: 0.78rem; color: var(--muted); font-weight: 500; margin-top: 2px; }
/* Dark mode */
[data-theme="dark"] .today-hero-strip {
    background: transparent;
    border-color: transparent;
}
[data-theme="dark"] .hs-item b { color: var(--text); }
[data-theme="dark"] .hs-item {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
}

/* ══ 阶段流可视化 ═══════════════════════════════════════════════════════ */
.stage-flow {
    margin-bottom: 20px;
    padding: 18px 18px;
    background: var(--surface);
    border: 1px solid rgba(128,128,128,0.06);
    border-radius: 18px;
    box-shadow: 0 1px 4px rgba(20,32,61,0.03);
}
[data-theme="dark"] .stage-flow {
    background: rgba(30,42,65,0.4);
    border-color: rgba(255,255,255,0.04);
}
.stage-flow-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 12px;
}
.stage-flow-bar {
    display: flex;
    height: 28px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--hover);
    margin-bottom: 10px;
}
.stage-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    /* 注：flex 过渡会触发 layout，但仅在数据加载时一次性执行，可接受 */
}
.stage-pill-count {
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    opacity: 0.9;
}
.stage-pill--new { background: linear-gradient(135deg, #94a3b8, #cbd5e1); }
.stage-pill--learning { background: linear-gradient(135deg, #f97316, #fb923c); }
.stage-pill--young { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
.stage-pill--mature { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
.stage-pill--mastered { background: linear-gradient(135deg, #22c55e, #4ade80); }
.stage-flow-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.stage-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--muted);
}
.stage-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.stage-dot--new { background: #94a3b8; }
.stage-dot--learning { background: #f97316; }
.stage-dot--young { background: #3b82f6; }
.stage-dot--mature { background: #8b5cf6; }
.stage-dot--mastered { background: #22c55e; }

/* ══ 学习足迹卡 ═══════════════════════════════════════════════════════ */
.streak-journey {
    margin: 0;
    padding: 20px;
    background: var(--today-card-bg, var(--surface));
    border: var(--border-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card-v2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-align: center;
    position: relative;
    transition: box-shadow var(--duration-normal) var(--ease-smooth),
                border-color var(--duration-normal) var(--ease-smooth);
}
[data-theme="dark"] .streak-journey {
    background: var(--today-card-bg, rgba(30,42,65,0.45));
    border-color: rgba(255,255,255,0.08);
    box-shadow: var(--shadow-card-v2);
    border-top: 1px solid rgba(255,255,255,0.10);
}
/* 颜色主题 */
.sj-green { --sj-accent: #22c55e; --sj-accent-soft: rgba(34,197,94,0.12); --sj-accent-mid: rgba(34,197,94,0.35); }
.sj-orange { --sj-accent: #f97316; --sj-accent-soft: rgba(249,115,22,0.12); --sj-accent-mid: rgba(249,115,22,0.35); }
.sj-gold { --sj-accent: #eab308; --sj-accent-soft: rgba(234,179,8,0.12); --sj-accent-mid: rgba(234,179,8,0.35); }
.sj-blue { --sj-accent: #3b82f6; --sj-accent-soft: rgba(59,130,246,0.12); --sj-accent-mid: rgba(59,130,246,0.35); }
.sj-purple { --sj-accent: #8b5cf6; --sj-accent-soft: rgba(139,92,246,0.12); --sj-accent-mid: rgba(139,92,246,0.35); }

/* Header: icon + big number */
.sj-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 6px;
}
.sj-icon { font-size: 1.2rem; }
.sj-number {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--sj-accent);
    line-height: 1;
    letter-spacing: -0.02em;
}
.sj-number--first {
    font-size: 1.8rem;
    color: var(--muted);
    opacity: 0.5;
}

/* Message */
.sj-message {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 18px;
    opacity: 0.85;
}

/* 7-day dots */
.sj-week {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}
.sj-dot-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.sj-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--hover, rgba(128,128,128,0.08));
    border: 2px solid rgba(128,128,128,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
}
.sj-dot--done {
    background: var(--sj-accent-soft);
    border-color: var(--sj-accent-mid);
}
.sj-dot--done .sj-dot-check {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--sj-accent);
}
.sj-dot--intense-2 {
    background: var(--sj-accent-mid);
}
.sj-dot--intense-3 {
    background: var(--sj-accent);
    border-color: var(--sj-accent);
}
.sj-dot--intense-3 .sj-dot-check {
    color: #fff;
}
/* Today dot: pulsing ring */
.sj-dot--today {
    border-color: var(--sj-accent);
    box-shadow: 0 0 0 0 var(--sj-accent-mid);
    animation: sjPulse 2s ease-in-out infinite;
}
.sj-dot--today-done {
    background: var(--sj-accent);
    border-color: var(--sj-accent);
    animation: none;
    box-shadow: 0 2px 8px var(--sj-accent-mid);
}
.sj-dot--today-done::after {
    content: '✓';
    font-size: 0.75rem;
    font-weight: 800;
    color: #fff;
}
@keyframes sjPulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--sj-accent-mid); }
    50% { box-shadow: 0 0 0 6px transparent; }
}
.sj-dot-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--muted);
}

/* Cumulative stats row (7d+ users) */
.sj-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 14px;
    font-size: 0.75rem;
    color: var(--muted);
}
.sj-stat { font-weight: 700; }
.sj-stat-sep { opacity: 0.4; }

/* Milestone progress bar */
.sj-milestone {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sj-mile-bar {
    flex: 1;
    height: 6px;
    background: rgba(128,128,128,0.1);
    border-radius: 3px;
    overflow: hidden;
}
.sj-mile-fill {
    height: 100%;
    min-width: 8%;
    background: var(--sj-accent);
    border-radius: 3px;
    transition: width 0.6s ease;
}
.sj-mile-text {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--sj-accent);
    white-space: nowrap;
}

/* Dark mode refinements */
[data-theme="dark"] .sj-dot {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .sj-dot--done {
    background: var(--sj-accent-soft);
    border-color: var(--sj-accent-mid);
}
[data-theme="dark"] .sj-message { opacity: 0.9; }

/* 累计输出统计 */
.sj-output-stats {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.sj-output-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: 0.82rem;
}
.sj-output-icon { font-size: 0.9rem; }
.sj-output-label { color: var(--text-secondary, #666); }
.sj-output-count { font-weight: 700; color: var(--sj-accent); }
.sj-output-unit { color: var(--text-tertiary, #999); font-size: 0.75rem; }
.sj-output-hint {
    font-size: 0.72rem;
    color: var(--text-tertiary, #999);
    margin-top: 4px;
    text-align: center;
}
[data-theme="dark"] .sj-output-stats { border-top-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .sj-output-label { color: rgba(255,255,255,0.6); }
[data-theme="dark"] .sj-output-unit { color: rgba(255,255,255,0.4); }



/* ── 移动端响应式 ─────────────────────────────────────────────────────── */
@media (max-width: 380px) {
    .today-hero { padding: 18px 16px; gap: 14px; }
    .today-hero-number { font-size: 2.6rem; }
    .today-hero-ring { width: 72px; height: 72px; }
    .milestone-ring { width: 72px; height: 72px; }
    .today-stats-row { grid-template-columns: repeat(2, 1fr); }
    .stage-pill-count { font-size: 0.65rem; }
    .fox-cockpit { padding: 12px; border-radius: 22px; }
    .fox-cockpit .fox-wrap { width: 76px; height: 76px; }
    .fox-cockpit-top { gap: 12px; }
    .fox-cockpit .dp-cta-wrap { padding: 10px; border-radius: 16px; }
    .fox-cockpit .dp-cta { padding: 12px 16px; border-radius: 14px; font-size: 0.98rem; }
    .today-deck-shell,
    .today-focus-nudge-shell,
    .today-focus-cluster { padding: 10px; border-radius: 20px; }
    .today-deck-card { padding: 10px 12px; }
    .today-deck-card-icon { width: 36px; height: 36px; font-size: 1.1rem; border-radius: 12px; }
    .today-deck-card-name { font-size: 0.86rem; }
    .today-deck-card-meta { white-space: normal; font-size: 0.7rem; }
    .hs-item { min-height: 32px; padding: 5px 10px; font-size: 0.78rem; }
    .vp-panel { padding: 16px; border-radius: 20px; }

    .streak-journey { padding: 16px; border-radius: 20px; }
    .sj-number { font-size: 1.5rem; }
    .dp-step-dot { width: 34px; height: 34px; }
    .dp-step-line { width: 14px; }
}

@media (max-width: 760px) {
    .fox-cockpit-meta {
        flex-direction: column;
        align-items: flex-start;
    }
    .fox-cockpit-meta-note {
        max-width: none;
        text-align: left;
    }
}

@media (min-width: 860px) {
    /* ── Desktop: 仪表盘双栏布局 ── */
    .today-dashboard {
        display: grid;
        grid-template-columns: 1.15fr 1fr;
        gap: 20px;
        grid-auto-flow: dense;
    }
    .today-dashboard > * { grid-column: 1 / -1; }
    /* 下半区双栏：词汇能力（左）+ 学习足迹（右） */
    .vp-panel { grid-column: 1; }
    .streak-journey { grid-column: 2; align-self: start; }

    .today-focus-cluster {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(240px, 0.9fr);
        align-items: start;
    }
    .today-focus-cluster > .topic-filter-row,
    .today-focus-cluster > .topic-picker,
    .today-focus-cluster > .user-level-row {
        grid-column: 1 / -1;
    }
    /* Desktop 间距微调 */
    .today-dashboard { padding-left: 24px; padding-right: 24px; }
    .fox-cockpit { border-radius: 28px; }
    .today-deck-shell,
    .today-focus-nudge-shell,
    .today-focus-cluster { padding: 16px; }
    .vp-panel { padding: 24px; }
    .streak-journey { padding: 24px; }
}

/* ── Desktop hover 交互增强 ── */
@media (hover: hover) {
    .today-deck-shell:hover,
    .today-focus-cluster:hover {
        box-shadow: var(--shadow-float);
        border-color: rgba(79,143,247,0.1);
    }
    .vp-panel:hover {
        box-shadow: var(--shadow-float);
        border-color: rgba(79,143,247,0.08);
    }
    .streak-journey:hover {
        box-shadow: var(--shadow-float);
        border-color: rgba(79,143,247,0.08);
    }
    .today-quick-pill:hover {
        transform: translateY(-1px);
    }
    .topic-pick-item:hover {
        border-color: rgba(79,143,247,0.2);
        background: rgba(79,143,247,0.05);
    }
    .topic-pick-item:active { transform: scale(0.97); }
    .user-level-test-btn:hover {
        background: rgba(79,143,247,0.12);
        border-color: rgba(79,143,247,0.2);
    }
    [data-theme="dark"] .today-deck-shell:hover,
    [data-theme="dark"] .today-focus-cluster:hover {
        border-color: rgba(79,143,247,0.15);
    }
    [data-theme="dark"] .vp-panel:hover,
    [data-theme="dark"] .streak-journey:hover {
        border-color: rgba(79,143,247,0.12);
    }
    [data-theme="dark"] .topic-pick-item:hover {
        background: rgba(79,143,247,0.12);
        border-color: rgba(79,143,247,0.2);
    }
}

/* ── Header: greeting + cumulative stats (legacy, hidden) ───────────── */
.today-header {
    display: none; /* replaced by today-hero */
    margin-bottom: 20px;
}
.today-greeting-text {
    font-size: 1rem;
    font-weight: 400;
    color: var(--muted);
    margin-bottom: 14px;
}
.today-cum-row {
    display: flex;
    gap: 12px;
}
.today-cum-item {
    flex: 1;
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 10px;
    text-align: center;
}
.today-cum-val {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}
.today-cum-label {
    font-size: 0.72rem;
    color: var(--muted);
    font-weight: 500;
}
.today-cum-score .today-cum-val {
    color: var(--blue);
}

/* ── AI Coach card ─────────────────────────────────────────────────── */
.today-coach {
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 20px;
}
.today-coach-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.today-coach-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
}
.today-coach-body {
    font-size: 0.84rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
}
.today-coach-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.today-coach-action {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--hover);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.today-coach-action:active {
    background: var(--border);
}
.today-coach-action-text {
    flex: 1;
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.4;
}
.today-coach-arrow {
    color: var(--muted);
    font-size: 1.1rem;
    font-weight: 600;
}

/* ── Quick-access pills ────────────────────────────────────────────── */
.today-quick-row {
    display: flex;
    gap: 10px;
    margin: 0;
}
.today-quick-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-height: 44px;
    padding: 0 16px;
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    background: var(--today-card-bg, var(--surface));
    border: var(--border-card);
    justify-content: center;
    transition: background var(--duration-fast) var(--ease-smooth),
                border-color var(--duration-fast) var(--ease-smooth),
                box-shadow var(--duration-fast) var(--ease-smooth),
                transform 0.12s var(--ease-smooth);
    box-shadow: var(--shadow-subtle-v2);
}
.today-quick-pill:hover {
    border-color: rgba(79,143,247,0.15);
    box-shadow: var(--shadow-card-v2);
}
.today-quick-pill:active {
    transform: scale(0.98);
    background: var(--hover);
}
.today-quick-score {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--blue);
    background: rgba(79, 143, 247, 0.1);
    padding: 2px 7px;
    border-radius: 8px;
}
[data-theme="dark"] .today-quick-pill {
    background: var(--today-card-bg, rgba(255,255,255,0.04));
    border-color: rgba(255,255,255,0.08);
    box-shadow: var(--shadow-subtle-v2);
}
[data-theme="dark"] .today-quick-pill:hover {
    border-color: rgba(79,143,247,0.2);
}

/* ── Lifetime stats (cross-deck) ─────────────────────────────────── */
.today-lifetime { margin-top: var(--section-gap); padding-top: 0; border-top: none; }
.today-lifetime-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 16px; }
.today-lifetime-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.today-lifetime-item {
    text-align: center; padding: 14px 6px;
    background: var(--surface);
    border: 1px solid rgba(128,128,128,0.06);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(20,32,61,0.02);
    transition: transform 0.12s;
}
.today-lifetime-item:active { transform: scale(0.97); }
[data-theme="dark"] .today-lifetime-item {
    background: rgba(30,42,65,0.4);
    border-color: rgba(255,255,255,0.04);
}
.today-lifetime-val { font-size: 1.2rem; font-weight: 700; color: var(--blue); margin-bottom: 4px; }
.today-lifetime-label { font-size: 0.68rem; color: var(--muted); font-weight: 500; }
@media (max-width: 520px) { .today-lifetime-grid { grid-template-columns: repeat(3, 1fr); } .today-lifetime-val { font-size: 1.05rem; } }

/* ── Tab footer ──────────────────────────────────────────────────── */
.tab-footer { padding: 28px 16px calc(72px + env(safe-area-inset-bottom)); text-align: center; }

/* ── Learning path (timeline) ─────────────────────────────────────── */
.today-path {
    margin-bottom: 20px;
}
.today-path-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}
.today-path-xp { font-size: 0.78rem; font-weight: 700; color: var(--blue); margin-left: auto; }

/* ══ Fox Cockpit 驾驶舱 — Fox + Daily Path + CTA 三合一 ════════════════ */
.fox-cockpit {
    background: var(--today-panel-bg-strong);
    border: 1px solid var(--today-panel-border);
    border-radius: 28px;
    padding: 14px;
    margin-bottom: 0;
    box-shadow: var(--today-panel-shadow);
    overflow: hidden;
    position: relative;
    transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
    animation: foxEnter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* 背景光晕（复用 fox glow） */
.fox-cockpit::before {
    content: '';
    position: absolute;
    top: -36%;
    right: -6%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,180,100,0.14) 0%, rgba(255,180,100,0.06) 28%, transparent 72%);
    pointer-events: none;
    animation: foxGlow 4s ease-in-out infinite;
}
/* ── Fox Coach Line (compact coach summary) ── */
.fox-coach-line {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: 14px;
    padding: 4px;
    margin: -4px -4px 12px;
    transition: background 0.2s ease;
}
.fox-cockpit.clickable .fox-coach-line:active {
    background: rgba(255,160,80,0.06);
}
/* ── Fox Avatar — 品牌核心视觉锚点 ── */
.fox-coach-avatar {
    position: relative;
    flex-shrink: 0;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* 光晕底盘（::before = aura） */
.fox-coach-avatar::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,160,80,0.16) 0%, rgba(255,160,80,0.04) 60%, transparent 100%);
    animation: foxAuraBreathe 3.5s ease-in-out infinite;
    pointer-events: none;
}
/* 情绪光环（::after = ring） */
.fox-coach-avatar::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,160,80,0.22);
    animation: foxRingPulse 4s ease-in-out infinite;
    pointer-events: none;
    transition: border-color 0.5s ease, box-shadow 0.5s ease, opacity 0.5s ease;
}
@keyframes foxAuraBreathe {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.08); opacity: 1; }
}
@keyframes foxRingPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.04); }
}
/* 按压反馈 — 弹性按下 */
.fox-coach-line:active .fox-coach-avatar {
    transform: scale(0.85);
}
/* ── Fox Emoji — 品牌角色 ── */
.fox-coach-emoji {
    font-size: 1.7rem;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(255,140,66,0.3));
    display: inline-block;
    position: relative;
    z-index: 1;
    animation: foxIdle 4s ease-in-out infinite;
}
/* 空闲呼吸动画 — 有机感，带微倾 */
@keyframes foxIdle {
    0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
    30% { transform: translateY(-2px) scale(1.03) rotate(-1.5deg); }
    60% { transform: translateY(-1px) scale(1.02) rotate(1deg); }
}
/* 点击动画（覆盖空闲，优先级更高） */
.fox-coach-emoji.anim-bounce { animation: foxMsgBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fox-coach-emoji.anim-shake  { animation: foxMsgShake 0.4s ease; }
.fox-coach-emoji.anim-tilt   { animation: foxMsgTilt 0.5s ease; }
.fox-coach-emoji.anim-nod    { animation: foxMsgNod 0.6s ease; }
.fox-coach-emoji.anim-wiggle { animation: foxMsgWiggle 0.5s ease; }
.fox-coach-emoji.anim-jump   { animation: foxMsgJump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ── Mood-Reactive 光晕 + 光环 ─────────────────────────── */
/* celebrating — 彩虹 */
.fox-cockpit.mood-celebrating .fox-coach-avatar::before {
    background: radial-gradient(circle, rgba(34,197,94,0.22) 0%, rgba(79,143,247,0.08) 60%, transparent 100%);
    animation: foxAuraBreathe 1.5s ease-in-out infinite;
}
.fox-cockpit.mood-celebrating .fox-coach-avatar::after {
    border-color: rgba(34,197,94,0.4);
    box-shadow: 0 0 12px rgba(34,197,94,0.15);
    animation: foxRingExpand 2s ease-out infinite;
}
@keyframes foxRingExpand {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.5); opacity: 0; }
}
/* excited / combo — 金橙脉冲 */
.fox-cockpit.mood-excited .fox-coach-avatar::before,
.fox-cockpit.mood-combo .fox-coach-avatar::before {
    background: radial-gradient(circle, rgba(255,180,0,0.22) 0%, rgba(249,115,22,0.06) 60%, transparent 100%);
    animation: foxAuraBreathe 1.2s ease-in-out infinite;
}
.fox-cockpit.mood-excited .fox-coach-avatar::after,
.fox-cockpit.mood-combo .fox-coach-avatar::after {
    border-color: rgba(255,180,0,0.4);
    box-shadow: 0 0 10px rgba(255,180,0,0.12);
}
/* focused / determined — 蓝色沉稳 */
.fox-cockpit.mood-focused .fox-coach-avatar::before,
.fox-cockpit.mood-determined .fox-coach-avatar::before {
    background: radial-gradient(circle, rgba(79,143,247,0.18) 0%, rgba(79,143,247,0.04) 60%, transparent 100%);
}
.fox-cockpit.mood-focused .fox-coach-avatar::after,
.fox-cockpit.mood-determined .fox-coach-avatar::after {
    border-color: rgba(79,143,247,0.35);
    box-shadow: 0 0 8px rgba(79,143,247,0.1);
}
/* proud — 紫色荣耀 */
.fox-cockpit.mood-proud .fox-coach-avatar::before {
    background: radial-gradient(circle, rgba(139,92,246,0.2) 0%, rgba(139,92,246,0.04) 60%, transparent 100%);
}
.fox-cockpit.mood-proud .fox-coach-avatar::after {
    border-color: rgba(139,92,246,0.35);
    box-shadow: 0 0 10px rgba(139,92,246,0.12);
}
/* legend — 金色光环 + 闪烁 */
.fox-cockpit.mood-legend .fox-coach-avatar::before {
    background: radial-gradient(circle, rgba(234,179,8,0.25) 0%, rgba(234,179,8,0.06) 60%, transparent 100%);
    animation: foxAuraBreathe 1.5s ease-in-out infinite;
}
.fox-cockpit.mood-legend .fox-coach-avatar::after {
    border-color: rgba(234,179,8,0.45);
    box-shadow: 0 0 14px rgba(234,179,8,0.18);
    animation: foxLegendShimmer 2s ease-in-out infinite;
}
@keyframes foxLegendShimmer {
    0%, 100% { opacity: 0.6; border-color: rgba(234,179,8,0.45); }
    50% { opacity: 1; border-color: rgba(255,215,0,0.6); }
}
/* sleepy — 暗淡缓慢 */
.fox-cockpit.mood-sleepy .fox-coach-avatar::before {
    background: radial-gradient(circle, rgba(147,130,220,0.1) 0%, transparent 70%);
    animation: foxAuraBreathe 5s ease-in-out infinite;
}
.fox-cockpit.mood-sleepy .fox-coach-avatar::after {
    border-color: rgba(128,128,128,0.1);
    animation: none;
    opacity: 0.3;
}
.fox-cockpit.mood-sleepy .fox-coach-emoji {
    animation: foxIdle 6s ease-in-out infinite;
    filter: drop-shadow(0 2px 6px rgba(255,140,66,0.15)) brightness(0.9);
}
/* reminder — 提醒脉冲 */
.fox-cockpit.mood-reminder .fox-coach-avatar::before {
    background: radial-gradient(circle, rgba(245,158,11,0.2) 0%, transparent 70%);
    animation: foxAuraBreathe 1s ease-in-out infinite;
}
.fox-cockpit.mood-reminder .fox-coach-avatar::after {
    border-color: rgba(245,158,11,0.4);
    animation: foxRingPing 1.5s ease-out infinite;
}
@keyframes foxRingPing {
    0% { transform: scale(1); opacity: 0.6; box-shadow: 0 0 0 rgba(245,158,11,0.3); }
    70% { transform: scale(1.2); opacity: 0; box-shadow: 0 0 12px rgba(245,158,11,0); }
    100% { transform: scale(1); opacity: 0; }
}
/* welcoming — 温暖 */
.fox-cockpit.mood-welcoming .fox-coach-avatar::before {
    background: radial-gradient(circle, rgba(255,160,80,0.22) 0%, rgba(255,100,150,0.06) 60%, transparent 100%);
}
.fox-cockpit.mood-welcoming .fox-coach-avatar::after {
    border-color: rgba(255,140,66,0.35);
    box-shadow: 0 0 10px rgba(255,140,66,0.12);
}
/* curious / thinking — 蓝色好奇 */
.fox-cockpit.mood-curious .fox-coach-avatar::before,
.fox-cockpit.mood-thinking .fox-coach-avatar::before {
    background: radial-gradient(circle, rgba(100,150,255,0.16) 0%, transparent 70%);
}
.fox-cockpit.mood-curious .fox-coach-avatar::after,
.fox-cockpit.mood-thinking .fox-coach-avatar::after {
    border-color: rgba(100,150,255,0.3);
}
/* playful — 多彩弹跳 */
.fox-cockpit.mood-playful .fox-coach-avatar::before {
    background: radial-gradient(circle, rgba(255,107,107,0.15) 0%, rgba(79,143,247,0.08) 60%, transparent 100%);
    animation: foxAuraBreathe 1.2s ease-in-out infinite;
}
.fox-cockpit.mood-playful .fox-coach-avatar::after {
    border-color: rgba(255,107,107,0.3);
    box-shadow: 0 0 8px rgba(255,107,107,0.1);
}

/* ── Dark Mode Fox 增强 ─────────────────────────────────── */
[data-theme="dark"] .fox-coach-avatar::before {
    background: radial-gradient(circle, rgba(255,160,80,0.2) 0%, rgba(255,160,80,0.06) 60%, transparent 100%);
}
[data-theme="dark"] .fox-coach-avatar::after {
    border-color: rgba(255,160,80,0.28);
}
[data-theme="dark"] .fox-coach-emoji {
    filter: drop-shadow(0 2px 8px rgba(255,140,66,0.4));
}
[data-theme="dark"] .fox-cockpit.clickable .fox-coach-line:active {
    background: rgba(255,160,80,0.08);
}
/* dark + celebrating */
[data-theme="dark"] .fox-cockpit.mood-celebrating .fox-coach-avatar::before {
    background: radial-gradient(circle, rgba(34,197,94,0.25) 0%, transparent 70%);
}
[data-theme="dark"] .fox-cockpit.mood-celebrating .fox-coach-avatar::after {
    border-color: rgba(34,197,94,0.45);
    box-shadow: 0 0 16px rgba(34,197,94,0.2);
}
/* dark + legend */
[data-theme="dark"] .fox-cockpit.mood-legend .fox-coach-avatar::before {
    background: radial-gradient(circle, rgba(234,179,8,0.3) 0%, transparent 70%);
}
[data-theme="dark"] .fox-cockpit.mood-legend .fox-coach-avatar::after {
    border-color: rgba(234,179,8,0.5);
    box-shadow: 0 0 18px rgba(234,179,8,0.22);
}
/* dark + excited/combo */
[data-theme="dark"] .fox-cockpit.mood-excited .fox-coach-avatar::after,
[data-theme="dark"] .fox-cockpit.mood-combo .fox-coach-avatar::after {
    box-shadow: 0 0 14px rgba(255,180,0,0.18);
}

/* ── Hover 交互提示（仅桌面） ── */
@media (hover: hover) {
    .fox-cockpit.clickable .fox-coach-line:hover {
        background: rgba(255,160,80,0.04);
    }
    .fox-cockpit.clickable .fox-coach-line:hover .fox-coach-avatar::after {
        opacity: 1;
        border-color: rgba(255,160,80,0.35);
    }
    [data-theme="dark"] .fox-cockpit.clickable .fox-coach-line:hover {
        background: rgba(255,160,80,0.06);
    }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .fox-coach-emoji,
    .fox-coach-avatar::before,
    .fox-coach-avatar::after {
        animation: none !important;
    }
}
.fox-coach-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 6px;
}
/* 气泡弹入动画 */
.fox-coach-body.pop {
    animation: foxBubblePop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes foxBubblePop {
    0% { transform: scale(0.95); opacity: 0.7; }
    60% { transform: scale(1.02); }
    100% { transform: scale(1); opacity: 1; }
}
.fox-coach-msg {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.45;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.fox-coach-msg.fading {
    opacity: 0;
    transform: translateY(-4px);
}
.fox-action-btn--inline {
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    background: rgba(79,143,247,0.1);
    border: 1px solid rgba(79,143,247,0.15);
    color: var(--blue);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-smooth),
                box-shadow var(--duration-fast) var(--ease-smooth);
}
.fox-action-btn--inline:hover {
    background: rgba(79,143,247,0.16);
    box-shadow: 0 2px 8px rgba(79,143,247,0.12);
}
[data-theme="dark"] .fox-coach-msg { color: var(--text); }
[data-theme="dark"] .fox-action-btn--inline {
    background: rgba(79,143,247,0.15);
    border-color: rgba(79,143,247,0.2);
}
/* Keep legacy .fox-cockpit-meta for backward compat but hidden when coach-line is present */
.fox-cockpit-meta {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.fox-cockpit-meta-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}
.fox-cockpit-deck-chip,
.fox-cockpit-level-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.fox-cockpit-deck-chip {
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(255,255,255,0.75);
    color: var(--text);
}
.fox-cockpit-level-chip {
    background: rgba(79,143,247,0.08);
    border: 1px solid rgba(79,143,247,0.12);
    color: var(--blue);
}
.fox-cockpit-meta-note {
    max-width: 230px;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--muted);
    text-align: right;
}
.fox-cockpit-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 1;
}
.fox-cockpit .fox-wrap {
    width: 88px; height: 88px;
    flex-shrink: 0;
}
.fox-cockpit .fox-bubble {
    flex: 1;
    min-width: 0;
    padding: 2px 0;
}
.fox-cockpit .fox-message {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
    font-size: 0.99rem;
    font-weight: 650;
    margin-bottom: 8px;
}
.fox-cockpit .fox-xp {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(249,115,22,0.08);
    color: #ea580c;
}
.fox-cockpit .fox-action-btn {
    width: 100%;
    margin: 10px 0 0;
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(79,143,247,0.18);
}
/* 进度条在驾驶舱内 */
.fox-cockpit .dp-progress {
    margin: 0 0 12px;
    padding: 12px 10px 0;
    border-top: 1px solid rgba(15,23,42,0.06);
}
/* CTA 在驾驶舱内 */
.fox-cockpit .dp-cta-wrap {
    margin: 0;
    padding: 14px;
    border-radius: 20px;
    background: rgba(255,255,255,0.44);
    border: 1px solid var(--today-inline-border);
    position: relative;
    z-index: 1;
}
.fox-cockpit .dp-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    padding: 14px 18px;
    border-radius: 16px;
}
.fox-cockpit .dp-cta-remaining {
    margin-top: 8px;
    font-size: 0.76rem;
}
/* Throttle banner 在驾驶舱内 */
.fox-cockpit .dp-throttle-banner {
    margin: 0 0 10px;
}
/* Mood 联动：驾驶舱边框/背景色随情绪变化 */
.fox-cockpit.mood-celebrating {
    border-color: rgba(34,197,94,0.18);
    box-shadow: 0 18px 38px rgba(34,197,94,0.08);
}
.fox-cockpit.mood-excited, .fox-cockpit.mood-combo {
    border-color: rgba(249,115,22,0.18);
    box-shadow: 0 18px 38px rgba(249,115,22,0.09);
}
.fox-cockpit.mood-determined, .fox-cockpit.mood-focused {
    border-color: rgba(79,143,247,0.18);
    box-shadow: 0 18px 38px rgba(79,143,247,0.08);
}
.fox-cockpit.mood-legend {
    border-color: rgba(234,179,8,0.18);
    box-shadow: 0 18px 38px rgba(234,179,8,0.1);
}
.fox-cockpit.mood-proud {
    border-color: rgba(139,92,246,0.18);
    box-shadow: 0 18px 38px rgba(139,92,246,0.08);
}
.fox-cockpit.mood-sleepy {
    border-color: rgba(128,128,128,0.1);
    box-shadow: none;
}
/* Dark mode */
[data-theme="dark"] .fox-cockpit {
    background: var(--today-panel-bg-strong);
    border-color: var(--today-panel-border);
    box-shadow: var(--shadow-float);
    border-top: 1px solid rgba(255,255,255,0.06);
}
[data-theme="dark"] .fox-cockpit::before {
    background: radial-gradient(circle, rgba(255,180,100,0.1) 0%, rgba(255,180,100,0.04) 30%, transparent 72%);
}
[data-theme="dark"] .fox-cockpit-deck-chip {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.06);
    color: var(--text);
}
[data-theme="dark"] .fox-cockpit-level-chip {
    background: rgba(79,143,247,0.14);
    border-color: rgba(79,143,247,0.14);
}
[data-theme="dark"] .fox-cockpit .fox-xp {
    background: rgba(249,115,22,0.12);
    color: #fdba74;
}
[data-theme="dark"] .fox-cockpit .fox-action-btn { box-shadow: none; }
[data-theme="dark"] .fox-cockpit .dp-progress { border-top-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .fox-cockpit .dp-cta-wrap {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .fox-cockpit.mood-celebrating { border-color: rgba(34,197,94,0.2); box-shadow: var(--shadow-float), 0 0 32px rgba(34,197,94,0.08); }
[data-theme="dark"] .fox-cockpit.mood-excited, [data-theme="dark"] .fox-cockpit.mood-combo { border-color: rgba(249,115,22,0.18); box-shadow: var(--shadow-float), 0 0 32px rgba(249,115,22,0.06); }
[data-theme="dark"] .fox-cockpit.mood-determined, [data-theme="dark"] .fox-cockpit.mood-focused { border-color: rgba(79,143,247,0.18); box-shadow: var(--shadow-float), 0 0 32px rgba(79,143,247,0.06); }
[data-theme="dark"] .fox-cockpit.mood-legend { border-color: rgba(234,179,8,0.2); box-shadow: var(--shadow-float), 0 0 32px rgba(234,179,8,0.08); }
[data-theme="dark"] .fox-cockpit.mood-proud { border-color: rgba(139,92,246,0.18); box-shadow: var(--shadow-float), 0 0 32px rgba(139,92,246,0.06); }

/* ══ Fox Companion 小狐狸陪伴区（legacy, kept for non-today contexts） ══ */
.fox-companion {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(255,140,66,0.1) 0%, rgba(255,180,100,0.04) 100%);
    border: 1.5px solid rgba(255,140,66,0.22);
    border-radius: 22px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-glow-orange);
    animation: foxEnter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
@keyframes foxEnter {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
/* 背景光晕效果 */
.fox-companion::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -15%;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(255,180,100,0.18) 0%, transparent 70%);
    pointer-events: none;
    animation: foxGlow 4s ease-in-out infinite;
}
@keyframes foxGlow {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}
/* .fox-avatar 已迁移至 .fox-wrap（V3 升级后废弃） */
/* 庆祝跳跃（已迁移至 mood-celebrating） */
/* 脸红效果增强 */
.fox-blush {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 10px;
    background: radial-gradient(ellipse, rgba(255,130,130,0.6) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    animation: blushFade 0.5s ease forwards;
}
@keyframes blushFade {
    to { opacity: 1; }
}
/* .fox-avatar.happy — 已废弃（V3 用 foxActiveMood override 替代） */

/* ══ 状态微表情（简化版：大部分静态，只有特殊状态动）════════════════ */

/* 深夜困倦：静态低透明度 + 偶尔慢呼吸 */
.fox-companion.sleepy .fox-face {
    transform: scale(0.98);
    opacity: 0.9;
}
/* .fox-companion.sleepy .fox-avatar — 已迁移至 .mood-sleepy */

/* 兴奋冲刺（60%+）：轻微放大 + 光晕（不循环） */
.fox-companion.excited .fox-face {
    transform: scale(1.05);
}
/* .fox-companion.excited .fox-avatar — 已迁移至 .mood-excited */

/* 专注进行（30-60%）：静态，保持眨眼 */
.fox-companion.focused .fox-face {
    /* 保持默认眨眼动画 */
}

/* 期待（进度 > 0）：静态轻微歪头 */
.fox-companion.hopeful .fox-face {
    transform: rotate(5deg);
}

/* 待复习提醒：静态，光晕提示 */
.fox-companion.reminder .fox-face {
    /* 保持默认 */
}
/* .fox-companion.reminder .fox-avatar — 已迁移至 .mood-reminder */

/* 新用户欢迎：静态友好 */
.fox-companion.welcoming .fox-face {
    transform: scale(1.02);
}

/* 连续打卡（3天+）：静态微扬 */
.fox-companion.proud .fox-face {
    transform: translateY(-2px) scale(1.03);
}

/* 学霸（7天+）：静态 + 光环 */
.fox-companion.legend .fox-face {
    transform: scale(1.05);
}
/* .fox-companion.legend .fox-avatar — 已迁移至 .mood-legend */

/* 庆祝（唯一保持动画的状态）*/
@keyframes foxLegend {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-5deg) scale(1.02); }
    75% { transform: rotate(5deg) scale(1.02); }
}

/* 可点击提示 */
.fox-companion.clickable {
    cursor: pointer;
}
.fox-companion.clickable:hover .fox-wrap {
    transform: scale(1.05);
}
.fox-companion.clickable:active .fox-wrap {
    transform: scale(0.95);
}

/* ══ 学习状态联动动画（应用于 .fox-avatar）══════════════════════════ */

/* 答对 - 弹跳 */
.fox-avatar.fox-correct {
    animation: foxCorrect 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes foxCorrect {
    0%, 100% { transform: scale(1) translateY(0); }
    40% { transform: scale(1.15) translateY(-8px); }
    60% { transform: scale(0.95) translateY(2px); }
}

/* 答错 - 摇头 */
.fox-avatar.fox-wrong {
    animation: foxWrong 0.4s ease-in-out;
}
@keyframes foxWrong {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-10deg); }
    40% { transform: rotate(10deg); }
    60% { transform: rotate(-8deg); }
    80% { transform: rotate(5deg); }
}

/* 连击 3+ - 兴奋摇摆 + 光环 */
.fox-avatar.fox-combo {
    animation: foxComboAnim 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes foxComboAnim {
    0%, 100% { transform: scale(1) rotate(0); box-shadow: 0 4px 12px rgba(139, 108, 246, 0.2); }
    25% { transform: scale(1.2) rotate(-12deg); box-shadow: 0 0 25px rgba(255, 200, 100, 0.5); }
    50% { transform: scale(1.1) rotate(0); box-shadow: 0 0 30px rgba(139, 108, 246, 0.6); }
    75% { transform: scale(1.2) rotate(12deg); box-shadow: 0 0 25px rgba(255, 200, 100, 0.5); }
}

/* 完成每日目标 - 旋转庆祝 */
.fox-avatar.fox-complete {
    animation: foxCompleteAnim 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes foxCompleteAnim {
    0% { transform: scale(1) rotate(0); }
    30% { transform: scale(1.3) rotate(180deg); }
    60% { transform: scale(1.1) rotate(360deg); }
    100% { transform: scale(1) rotate(360deg); }
}

/* 气泡弹入动画 */
.fox-bubble.pop {
    animation: bubblePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bubblePop {
    0% { transform: scale(0.8); opacity: 0.5; }
    60% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}
.fox-bubble {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
    will-change: transform, opacity;
}
.fox-message {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.45;
    margin-bottom: 5px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.fox-message.fading {
    opacity: 0;
    transform: translateX(-6px);
}
.fox-xp {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #f97316;
    padding: 3px 10px;
    background: rgba(249,115,22,0.1);
    border-radius: 12px;
    position: relative;
    transition: opacity 0.5s ease;
}
.fox-xp-fading {
    opacity: 0;
    pointer-events: none;
}
/* Fox Action Button */
.fox-action-btn {
    display: block;
    width: calc(100% - 4px);
    margin: 8px 2px 0;
    padding: 10px 14px;
    background: linear-gradient(135deg, #4f8ff7, #6ca6ff);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    animation: fox-btn-in 0.25s ease;
    min-height: 44px;
}
@keyframes fox-btn-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
[data-theme="dark"] .fox-action-btn {
    background: linear-gradient(135deg, #3a7de0, #5290f0);
}
/* XP 脉冲用 transform 实现 — 高性能 */
.fox-xp::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 16px;
    background: rgba(249,115,22,0.15);
    z-index: -1;
    opacity: 0;
    animation: xpPulse 2s ease-in-out infinite;
}
@keyframes xpPulse {
    0%, 100% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1); opacity: 1; }
}
/* Fox mood states — 细腻的状态过渡 */
.fox-companion.sleepy .fox-face { 
    filter: grayscale(0.2) drop-shadow(0 2px 3px rgba(0,0,0,0.1));
    animation: foxSleepy 3s ease-in-out infinite;
}
@keyframes foxSleepy {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}
.fox-companion.hopeful .fox-avatar { 
    box-shadow: 
        0 4px 20px rgba(79,143,247,0.25),
        inset 0 -2px 4px rgba(79,143,247,0.1);
}
.fox-companion.hopeful::before {
    background: radial-gradient(circle, rgba(79,143,247,0.12) 0%, transparent 70%);
}
.fox-companion.focused .fox-avatar { 
    box-shadow: 
        0 4px 20px rgba(139,108,246,0.28),
        inset 0 -2px 4px rgba(139,108,246,0.1);
}
.fox-companion.focused::before {
    background: radial-gradient(circle, rgba(139,108,246,0.12) 0%, transparent 70%);
}
.fox-companion.excited .fox-avatar { 
    box-shadow: 
        0 6px 24px rgba(255,140,66,0.4),
        inset 0 -2px 4px rgba(255,140,66,0.15);
    animation: excitedBounce 1.5s ease-in-out infinite;
}
@keyframes excitedBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
.fox-companion.celebrating {
    background: linear-gradient(135deg, rgba(76,175,80,0.12) 0%, rgba(139,195,74,0.06) 100%);
    border-color: rgba(76,175,80,0.35);
    position: relative;
}
/* 庆祝脉冲用伪元素 + transform — 高性能 */
.fox-companion.celebrating::after {
    content: '';
    position: absolute;
    inset: -6px;
    border: 2px solid rgba(76,175,80,0.3);
    border-radius: 26px;
    opacity: 0;
    animation: celebratePulse 1.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes celebratePulse {
    0% { transform: scale(0.95); opacity: 0.8; }
    100% { transform: scale(1.05); opacity: 0; }
}
.fox-companion.celebrating::before {
    background: radial-gradient(circle, rgba(76,175,80,0.15) 0%, transparent 70%);
    animation: foxGlow 2s ease-in-out infinite;
}
/* ══ Fox message-triggered animations ══ */
.fox-avatar.anim-bounce { animation: foxMsgBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fox-avatar.anim-shake  { animation: foxMsgShake 0.4s ease; }
.fox-avatar.anim-tilt   { animation: foxMsgTilt 0.5s ease; }
.fox-avatar.anim-nod    { animation: foxMsgNod 0.6s ease; }
.fox-avatar.anim-wiggle { animation: foxMsgWiggle 0.5s ease; }
.fox-avatar.anim-jump   { animation: foxMsgJump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes foxMsgBounce { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-8px)} 60%{transform:translateY(-3px)} }
@keyframes foxMsgShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-3px)} 40%{transform:translateX(3px)} 60%{transform:translateX(-2px)} 80%{transform:translateX(2px)} }
@keyframes foxMsgTilt { 0%,100%{transform:rotate(0)} 50%{transform:rotate(8deg)} }
@keyframes foxMsgNod { 0%,100%{transform:translateY(0)} 30%{transform:translateY(3px)} 60%{transform:translateY(0)} 80%{transform:translateY(2px)} }
@keyframes foxMsgWiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-5deg)} 75%{transform:rotate(5deg)} }
@keyframes foxMsgJump { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-10px) scale(1.05)} }
@media (prefers-reduced-motion: reduce) {
    .fox-avatar.anim-bounce,.fox-avatar.anim-shake,.fox-avatar.anim-tilt,
    .fox-avatar.anim-nod,.fox-avatar.anim-wiggle,.fox-avatar.anim-jump { animation: none !important; }
}

.fox-companion.celebrating .fox-avatar {
    background: linear-gradient(145deg, #e8f5e9, #c8e6c9);
    box-shadow: 
        0 6px 24px rgba(76,175,80,0.35),
        inset 0 -2px 4px rgba(76,175,80,0.15);
}
/* Dark mode */
[data-theme="dark"] .fox-companion {
    background: linear-gradient(135deg, rgba(255,140,66,0.16) 0%, rgba(255,140,66,0.06) 100%);
    border-color: rgba(255,140,66,0.3);
    box-shadow: 0 4px 24px rgba(255,140,66,0.1), 0 0 40px rgba(255,140,66,0.04);
}
[data-theme="dark"] .fox-companion::before {
    background: radial-gradient(circle, rgba(255,180,100,0.1) 0%, transparent 70%);
}
[data-theme="dark"] .fox-avatar {
    background: linear-gradient(145deg, rgba(255,220,180,0.18), rgba(255,200,150,0.12));
    box-shadow: 
        0 4px 20px rgba(255,140,66,0.25),
        inset 0 -2px 4px rgba(255,140,66,0.1);
}
[data-theme="dark"] .fox-xp {
    background: rgba(249,115,22,0.15);
}
[data-theme="dark"] .fox-companion.celebrating {
    background: linear-gradient(135deg, rgba(76,175,80,0.18) 0%, rgba(76,175,80,0.08) 100%);
    border-color: rgba(76,175,80,0.35);
}
[data-theme="dark"] .fox-companion.celebrating .fox-avatar {
    background: linear-gradient(145deg, rgba(76,175,80,0.25), rgba(76,175,80,0.15));
    box-shadow: 
        0 6px 24px rgba(76,175,80,0.3),
        inset 0 -2px 4px rgba(76,175,80,0.1);
}

/* ══ Today Tasks V2 降噪版 ═══════════════════════════════════════════ */
.today-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 14px;
    margin-top: var(--section-gap);
    padding-left: 2px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}
.today-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
}
[data-theme="dark"] .today-section-title::after {
    background: linear-gradient(90deg, rgba(255,255,255,0.08), transparent);
}
/* 主任务 */
.today-primary-task {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid rgba(79,143,247,0.1);
    border-left: 3.5px solid var(--blue);
    border-radius: 16px;
    cursor: pointer;
    margin-bottom: 12px;
    box-shadow: var(--shadow-card);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
[data-theme="dark"] .today-primary-task {
    background: rgba(30,42,65,0.6);
    border-color: rgba(91,156,247,0.15);
    border-left-color: var(--blue);
}
.today-primary-task:active { transform: scale(0.98); }
.tpt-icon { font-size: 1.6rem; }
.tpt-body { flex: 1; min-width: 0; }
.tpt-name { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.tpt-meta { font-size: 0.78rem; color: var(--muted); margin-bottom: 8px; }
.tpt-bar { height: 6px; background: rgba(79,143,247,0.08); border-radius: 3px; overflow: hidden; position: relative; }
.tpt-fill { height: 100%; background: linear-gradient(90deg, #4f8ff7, #8b6cf6); border-radius: 3px; transition: width 0.6s cubic-bezier(0.4,0,0.2,1); position: relative; overflow: hidden; }
.tpt-fill::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 2s ease-in-out infinite;
}
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.today-primary-task.tpt-done .tpt-fill::after { display: none; }
.tpt-arrow { font-size: 1.4rem; color: var(--muted); }
.tpt-check { font-size: 1.2rem; color: var(--accent, #00E6B8); font-weight: 700; }
.today-primary-task.tpt-done {
    opacity: 1;
    background: rgba(43,200,102,0.04);
    border-color: rgba(43,200,102,0.12);
    border-left-color: var(--green);
    box-shadow: none;
}
[data-theme="dark"] .today-primary-task.tpt-done {
    background: rgba(43,200,102,0.06);
    border-color: rgba(43,200,102,0.15);
    border-left-color: var(--green);
}
.today-primary-task.tpt-done .tpt-fill { background: var(--green); }
@media (hover: hover) {
    .today-primary-task:hover {
        border-color: rgba(79,143,247,0.25);
        box-shadow: var(--shadow-glow-blue);
        transform: translateY(-2px);
    }
}
/* 次要任务 */
.today-secondary-tasks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}
.tst-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--hover);
    border: 1px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.15s, transform 0.12s, box-shadow 0.15s, border-color 0.15s;
}
.tst-item:active { transform: scale(0.97); }
.tst-icon {
    font-size: 1.1rem;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(79,143,247,0.06);
    flex-shrink: 0;
}
.tst-name { font-size: 0.85rem; font-weight: 600; flex: 1; }
.tst-count { font-size: 0.75rem; color: var(--blue); font-weight: 700; }
.tst-check-inline { font-size: 0.75rem; color: var(--green, #2bc866); font-weight: 700; }
/* Per-type color accents */
.tst-item--practice { border-left: 3px solid rgba(139,108,246,0.4); }
.tst-item--shadow   { border-left: 3px solid rgba(43,200,102,0.4); }
.tst-item--read     { border-left: 3px solid rgba(249,115,22,0.4); }
.tst-item--talk     { border-left: 3px solid rgba(236,72,153,0.4); }
.tst-item--practice .tst-icon { background: rgba(139,108,246,0.08); }
.tst-item--shadow .tst-icon   { background: rgba(43,200,102,0.08); }
.tst-item--read .tst-icon     { background: rgba(249,115,22,0.08); }
.tst-item--talk .tst-icon     { background: rgba(236,72,153,0.08); }
/* Done state */
.tst-item.tst-done { opacity: 1; background: rgba(43,200,102,0.04); border-color: rgba(43,200,102,0.15); }
.tst-item.tst-done .tst-name { color: var(--muted); }
.tst-item.tst-done .tst-icon::after { content: ' ✓'; color: var(--accent, #00E6B8); }
/* Dark mode */
[data-theme="dark"] .tst-item { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .tst-icon { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .tst-item--practice { border-left-color: rgba(139,108,246,0.5); }
[data-theme="dark"] .tst-item--shadow   { border-left-color: rgba(43,200,102,0.5); }
[data-theme="dark"] .tst-item--read     { border-left-color: rgba(249,115,22,0.5); }
[data-theme="dark"] .tst-item--talk     { border-left-color: rgba(236,72,153,0.5); }
[data-theme="dark"] .tst-item.tst-done { background: rgba(43,200,102,0.06); border-color: rgba(43,200,102,0.2); }
/* Hover effects (PC) */
@media (hover: hover) {
    .tst-item:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(20,32,61,0.06); }
    .tst-item--practice:hover { background: rgba(139,108,246,0.06); border-color: rgba(139,108,246,0.15); }
    .tst-item--shadow:hover   { background: rgba(43,200,102,0.06); border-color: rgba(43,200,102,0.15); }
    .tst-item--read:hover     { background: rgba(249,115,22,0.06); border-color: rgba(249,115,22,0.15); }
    .tst-item--talk:hover     { background: rgba(236,72,153,0.06); border-color: rgba(236,72,153,0.15); }
}
/* 更多练习折叠 */
.today-more-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    font-size: 0.82rem;
    color: var(--muted);
    cursor: pointer;
}
.today-more-arrow { transition: transform 0.2s; }
.today-more-arrow.open { transform: rotate(180deg); }
.today-more-tasks {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
.tmt-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    background: var(--hover);
    border-radius: 12px;
    font-size: 0.82rem;
    cursor: pointer;
}
.tmt-item:active { opacity: 0.7; }
.tmt-icon { font-size: 1rem; }
.tmt-name { font-weight: 500; }
/* dark mode: primary task 无需额外 shadow */
/* 深夜模式提示 */
.today-night-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    color: var(--muted);
    font-size: 0.85rem;
    cursor: pointer;
    border: none;
    background: var(--hover);
    border-radius: 14px;
    margin-bottom: 16px;
    transition: background 0.15s;
}
.today-night-hint:hover { background: rgba(128,128,128,0.08); }

/* ══ 里程碑庆祝弹窗 ═════════════════════════════════════════════════ */
.milestone-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: mmFadeIn 0.3s ease;
}
@keyframes mmFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.milestone-modal {
    background: var(--surface);
    border-radius: 24px;
    padding: 32px 28px;
    text-align: center;
    max-width: 320px;
    width: 90%;
    animation: mmScaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mmScaleIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.mm-confetti { font-size: 2rem; margin-bottom: 12px; animation: mmConfetti 0.6s ease; }
@keyframes mmConfetti {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.mm-badge { font-size: 3rem; margin-bottom: 8px; }
.mm-title { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.mm-number {
    font-size: 3rem;
    font-weight: 800;
    background: linear-gradient(135deg, #4f8ff7, #8b6cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.mm-label { font-size: 0.9rem; color: var(--muted); margin-bottom: 16px; }
.mm-fox {
    font-size: 0.9rem;
    color: var(--text);
    padding: 12px;
    background: var(--hover);
    border-radius: 12px;
    margin-bottom: 20px;
}
.mm-buttons { display: flex; gap: 10px; }
.mm-share, .mm-continue {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: transform 0.15s;
}
.mm-share:active, .mm-continue:active { transform: scale(0.96); }
.mm-share { background: var(--hover); color: var(--text); }
.mm-continue { background: linear-gradient(135deg, #4f8ff7, #8b6cf6); color: white; }

/* ══ Today Tasks 旧版（DEPRECATED — 保留兼容，新代码勿用）═══════════ */
/* TODO: 下次大版本更新时清理这些旧样式 */
.today-tasks {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.today-task {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 18px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    /* 高性能动画属性 */
    transition: 
        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    /* 序列入场动画 */
    animation: taskSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.today-task:nth-child(1) { animation-delay: 0.05s; }
.today-task:nth-child(2) { animation-delay: 0.1s; }
.today-task:nth-child(3) { animation-delay: 0.15s; }
.today-task:nth-child(4) { animation-delay: 0.2s; }
.today-task:nth-child(5) { animation-delay: 0.25s; }
.today-task:nth-child(6) { animation-delay: 0.3s; }
@keyframes taskSlideIn {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
}
/* 点击涟漪效果 — 用 transform 实现，高性能 */
.today-task::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(79,143,247,0.15) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}
.today-task:active::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transition: none;
}
@media (hover: hover) {
    .today-task:hover {
        border-color: var(--blue);
        box-shadow: 0 4px 16px rgba(79,143,247,0.12);
        transform: translateY(-2px);
    }
    .today-task:hover .today-task-icon {
        transform: scale(1.08);
    }
    .today-task:hover .today-task-arrow {
        transform: translateX(3px);
        color: var(--blue);
    }
}
.today-task:active {
    transform: scale(0.98);
    transition-duration: 0.1s;
}
.today-task-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: var(--hover);
    border-radius: 14px;
    flex-shrink: 0;
    transition: 
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.2s ease,
        box-shadow 0.2s ease;
}
.today-task-body {
    flex: 1;
    min-width: 0;
}
.today-task-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.today-task-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    transition: color 0.2s ease;
}
.today-task-count {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--blue);
    font-variant-numeric: tabular-nums;
}
.today-task-bar {
    height: 7px;
    background: var(--hover);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
/* 进度条光泽效果 */
.today-task-fill {
    height: 100%;
    border-radius: 4px;
    position: relative;
    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.today-task-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent);
    border-radius: 4px 4px 0 0;
}
/* 进度条流光动画 */
.today-task:not(.done) .today-task-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 2.5s ease-in-out infinite;
}
@keyframes shimmer {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}
.today-task-status {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.today-task-check {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4caf50, #66bb6a);
    color: #fff;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 
        0 4px 12px rgba(76,175,80,0.35),
        inset 0 -2px 4px rgba(0,0,0,0.1);
    animation: checkPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes checkPop {
    0% { transform: scale(0) rotate(-45deg); }
    50% { transform: scale(1.25) rotate(5deg); }
    70% { transform: scale(0.95) rotate(-2deg); }
    100% { transform: scale(1) rotate(0deg); }
}
.today-task-arrow {
    font-size: 22px;
    color: var(--muted);
    font-weight: 300;
    transition: 
        transform 0.2s ease,
        color 0.2s ease;
}
/* Current task highlight */
.today-task.current {
    border-color: var(--blue);
    box-shadow: 
        0 4px 16px rgba(79,143,247,0.15),
        inset 0 0 0 1px rgba(79,143,247,0.1);
    animation: taskSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both, currentGlow 2s ease-in-out infinite;
}
@keyframes currentGlow {
    0%, 100% { box-shadow: 0 4px 16px rgba(79,143,247,0.15), inset 0 0 0 1px rgba(79,143,247,0.1); }
    50% { box-shadow: 0 4px 24px rgba(79,143,247,0.22), inset 0 0 0 1px rgba(79,143,247,0.15); }
}
.today-task.current .today-task-icon {
    background: rgba(79,143,247,0.12);
    box-shadow: 0 2px 8px rgba(79,143,247,0.2);
}
/* Done state */
.today-task.done {
    background: var(--surface-elevated);
    animation: taskSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.today-task.done::after { display: none; }
.today-task.done .today-task-icon {
    background: rgba(76,175,80,0.12);
}
.today-task.done .today-task-name {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-color: rgba(76,175,80,0.4);
}
.today-task.done .today-task-bar {
    opacity: 0.4;
}
.today-task.done .today-task-fill::before { display: none; }
/* Task colors — 更丰富的渐变 */
.today-task--learn .today-task-fill { 
    background: linear-gradient(90deg, #4f8ff7 0%, #6ca6ff 50%, #78a8ff 100%); 
}
.today-task--learn.current .today-task-icon { 
    background: rgba(79,143,247,0.15);
    box-shadow: 0 2px 8px rgba(79,143,247,0.2);
}
.today-task--learn::after { background: radial-gradient(circle, rgba(79,143,247,0.15) 0%, transparent 70%); }

.today-task--review .today-task-fill { 
    background: linear-gradient(90deg, #f0a020 0%, #ffb840 50%, #ffc040 100%); 
}
.today-task--review.current .today-task-icon { 
    background: rgba(240,160,32,0.15);
    box-shadow: 0 2px 8px rgba(240,160,32,0.2);
}
.today-task--review::after { background: radial-gradient(circle, rgba(240,160,32,0.15) 0%, transparent 70%); }

.today-task--practice .today-task-fill { 
    background: linear-gradient(90deg, #8b6cf6 0%, #9d7ffa 50%, #a78bfa 100%); 
}
.today-task--practice.current .today-task-icon { 
    background: rgba(139,108,246,0.15);
    box-shadow: 0 2px 8px rgba(139,108,246,0.2);
}
.today-task--practice::after { background: radial-gradient(circle, rgba(139,108,246,0.15) 0%, transparent 70%); }

.today-task--shadow .today-task-fill { 
    background: linear-gradient(90deg, #22c55e 0%, #34d06a 50%, #4ade80 100%); 
}
.today-task--shadow.current .today-task-icon { 
    background: rgba(34,197,94,0.15);
    box-shadow: 0 2px 8px rgba(34,197,94,0.2);
}
.today-task--shadow::after { background: radial-gradient(circle, rgba(34,197,94,0.15) 0%, transparent 70%); }

.today-task--read .today-task-fill { 
    background: linear-gradient(90deg, #f97316 0%, #fa8728 50%, #fb923c 100%); 
}
.today-task--read.current .today-task-icon { 
    background: rgba(249,115,22,0.15);
    box-shadow: 0 2px 8px rgba(249,115,22,0.2);
}
.today-task--read::after { background: radial-gradient(circle, rgba(249,115,22,0.15) 0%, transparent 70%); }

.today-task--talk .today-task-fill { 
    background: linear-gradient(90deg, #ec4899 0%, #f06aa8 50%, #f472b6 100%); 
}
.today-task--talk.current .today-task-icon { 
    background: rgba(236,72,153,0.15);
    box-shadow: 0 2px 8px rgba(236,72,153,0.2);
}
.today-task--talk::after { background: radial-gradient(circle, rgba(236,72,153,0.15) 0%, transparent 70%); }

/* Dark mode */
[data-theme="dark"] .today-task {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .today-task::after {
    background: radial-gradient(circle, rgba(79,143,247,0.2) 0%, transparent 70%);
}
[data-theme="dark"] .today-task.done {
    background: rgba(255,255,255,0.05);
}
[data-theme="dark"] .today-task-icon {
    background: rgba(255,255,255,0.06);
}
[data-theme="dark"] .today-task.current {
    border-color: rgba(79,143,247,0.5);
    box-shadow: 
        0 4px 20px rgba(79,143,247,0.25),
        inset 0 0 0 1px rgba(79,143,247,0.15);
}
[data-theme="dark"] .today-task-fill::after {
    background: linear-gradient(to bottom, rgba(255,255,255,0.2), transparent);
}
/* Reduced motion — 完整覆盖所有动画元素 */
@media (prefers-reduced-motion: reduce) {
    .today-task,
    .today-task-icon,
    .today-task-fill,
    .today-task-check,
    .today-task::after,
    .fox-companion,
    .fox-companion::before,
    .fox-companion::after,
    .fox-face,
    .fox-avatar,
    .fox-xp,
    .fox-xp::before,
    .fox-blush,
    .fox-message,
    .fox-bubble {
        animation: none !important;
        transition: none !important;
    }
    .today-task-fill::before,
    .fox-xp::before,
    .fox-companion::after { display: none; }
}

.today-path-steps {
    border-left: 3px solid var(--border);
    margin-left: 18px;
    padding-left: 0;
}
.today-path-steps.gamified {
    border-left: 3px dashed var(--border);
}
.today-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 14px;
    margin-bottom: 10px;
    margin-left: 20px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.today-step:last-child { margin-bottom: 0; }
.today-step:active { background: var(--hover); }

.today-step-icon {
    position: absolute;
    left: -38px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--surface);
    border: 2.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    z-index: 2;
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.today-step-icon.done {
    background: linear-gradient(135deg, #4f8ff7, #8b6cf6);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 3px 12px rgba(79,143,247,0.35);
}
.today-step-check { font-weight: 900; font-size: 1rem; }
.today-step-badge {
    position: absolute; top: -6px; right: -6px;
    font-size: 0.65rem;
    animation: badgePop 0.4s ease;
}
@keyframes badgePop { 0%{transform:scale(0)} 60%{transform:scale(1.3)} 100%{transform:scale(1)} }

/* Current step pulse */
.today-step.current .today-step-icon {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(79,143,247,0.15);
    animation: currentPulse 2s ease-in-out infinite;
}
@keyframes currentPulse { 0%,100%{box-shadow:0 0 0 4px rgba(79,143,247,0.15)} 50%{box-shadow:0 0 0 8px rgba(79,143,247,0.08)} }

.today-step-body { flex: 1; min-width: 0; }
.today-step-name { font-size: 0.88rem; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.today-step-meta { font-size: 0.72rem; color: var(--muted); }

/* XP badge */
.today-step-xp { display: inline-block; font-size: 0.68rem; font-weight: 700; color: var(--blue); margin-top: 3px; animation: xpSlide 0.4s ease; }
@keyframes xpSlide { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

/* Progress ring */
.today-step-ring { position: relative; width: 40px; height: 40px; flex-shrink: 0; }
.progress-ring { width: 40px; height: 40px; transform: rotate(-90deg); }
.progress-ring-bg { fill: none; stroke: var(--hover); stroke-width: 3; }
.progress-ring-fill { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100.53; transition: stroke-dashoffset 0.6s ease; }
.today-step-ring-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 700; color: var(--muted); }

/* ── Step colors (ring + done state) ──────────────────────────────── */
.today-step--learn .progress-ring-fill { stroke: var(--blue); }
.today-step--learn.done { border-color: rgba(75, 132, 243, 0.3); background: rgba(75, 132, 243, 0.06); }

.today-step--review .progress-ring-fill { stroke: #f0a020; }
.today-step--review.done { border-color: rgba(240, 160, 32, 0.3); background: rgba(240, 160, 32, 0.06); }

.today-step--practice .progress-ring-fill { stroke: #8b6cf6; }
.today-step--practice.done { border-color: rgba(139, 108, 246, 0.3); background: rgba(139, 108, 246, 0.06); }

.today-step--shadow .progress-ring-fill { stroke: var(--green); }
.today-step--shadow.done { border-color: rgba(43, 200, 102, 0.3); background: rgba(43, 200, 102, 0.06); }

.today-step--read .progress-ring-fill { stroke: #f97316; }
.today-step--read.done { border-color: rgba(249, 115, 22, 0.3); background: rgba(249, 115, 22, 0.06); }

.today-step--talk .progress-ring-fill { stroke: #ec4899; }
.today-step--talk.done { border-color: rgba(236, 72, 153, 0.3); background: rgba(236, 72, 153, 0.06); }

[data-theme="dark"] .today-step-icon.done { box-shadow: 0 3px 12px rgba(79,143,247,0.25); }

/* ── Overall progress ──────────────────────────────────────────────── */
.today-overall {
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 20px;
}
.today-overall-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
}
.today-overall-pct {
    font-size: 1rem;
    font-weight: 700;
    color: var(--blue);
}
.today-overall-bar {
    width: 100%;
    height: 10px;
    background: var(--hover);
    border-radius: 5px;
    overflow: hidden;
}
.today-overall-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--blue), #9B6EFF);
    border-radius: 5px;
    transition: width 0.5s ease;
}

/* ── Daily Path (自适应学习路径) ──────────────────────────────────── */

/* 限速 banner */
.dp-throttle-banner {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px; margin: 12px 0 4px;
    background: rgba(255, 165, 0, 0.12);
    border-radius: 12px; font-size: 0.85rem; color: var(--text);
}
[data-theme="dark"] .dp-throttle-banner { background: rgba(255,165,0,0.15); }
.dp-throttle-icon { font-size: 1.1rem; flex-shrink: 0; }
.dp-throttle-text { flex: 1; line-height: 1.4; }

/* 五步进度条 */
.dp-progress {
    display: flex; align-items: flex-start; justify-content: center;
    gap: 0; margin: 16px 0 8px; padding: 0 8px;
}
.dp-step {
    display: flex; flex-direction: column; align-items: center;
    gap: 4px; cursor: pointer; min-width: 44px; padding: 4px 0;
    -webkit-tap-highlight-color: transparent;
}
.dp-step-dot {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface); border: 2.5px solid var(--border);
    font-size: 1.1rem; transition: all 0.3s ease;
}
.dp-step.active .dp-step-dot {
    border-color: var(--blue); background: rgba(79,143,255,0.1);
    box-shadow: 0 0 0 4px rgba(79,143,255,0.15);
    transform: scale(1.08);
}
.dp-step.done .dp-step-dot {
    border-color: var(--green); background: var(--green); color: #fff;
}
.dp-step-check { font-size: 0.95rem; font-weight: 700; line-height: 1; }
.dp-step-emoji { font-size: 1rem; line-height: 1; }
.dp-step-label {
    font-size: 0.7rem; color: var(--muted); white-space: nowrap;
    transition: color 0.3s;
}
.dp-step.active .dp-step-label { color: var(--blue); font-weight: 600; }
.dp-step.done .dp-step-label { color: var(--green); }
.dp-step:not(.done):hover .dp-step-dot {
    transform: scale(1.12);
    box-shadow: 0 0 0 6px rgba(79,143,247,0.1);
    border-color: rgba(79,143,247,0.3);
}
.dp-step:focus-visible .dp-step-dot { outline: 2px solid var(--blue); outline-offset: 2px; }

.dp-step-line {
    width: 20px; height: 2.5px; background: var(--border);
    margin-top: 22px; flex-shrink: 0; border-radius: 2px;
    transition: background 0.3s;
}
.dp-step-line.filled { background: var(--green); }
[data-theme="dark"] .dp-step-dot { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .dp-step.active .dp-step-dot { background: rgba(79,143,255,0.18); }

/* 主 CTA */
.dp-cta-wrap { text-align: center; margin: 16px 0 8px; }
.dp-cta {
    display: inline-block; padding: 14px 48px;
    border: none; border-radius: var(--radius-md); font-size: 1.05rem; font-weight: 700;
    cursor: pointer; min-height: 52px; min-width: 200px;
    transition: all var(--duration-normal) var(--ease-out); letter-spacing: 0.3px;
    -webkit-tap-highlight-color: transparent;
}
.dp-cta:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.dp-cta--start, .dp-cta--continue {
    background: linear-gradient(135deg, var(--blue), #9B6EFF);
    color: #fff; box-shadow: 0 4px 16px rgba(79,143,255,0.3);
}
.dp-cta--start:hover, .dp-cta--continue:hover {
    box-shadow: var(--shadow-glow-blue-v2);
    transform: translateY(-1px);
}
.dp-cta--start:active, .dp-cta--continue:active {
    transform: scale(0.98); box-shadow: 0 2px 8px rgba(79,143,255,0.2);
}
.dp-cta--done {
    background: var(--surface); color: var(--green);
    border: 2px solid var(--green); cursor: default;
}
.dp-cta-sub { margin-top: 8px; font-size: 0.82rem; color: var(--muted); }
.dp-cta-remaining { margin-top: 6px; font-size: 0.78rem; color: var(--muted); }
.dp-login-nudge {
    display: flex; align-items: center; gap: 6px; justify-content: center;
    margin: 8px 0 2px; padding: 6px 14px; border-radius: 10px;
    background: rgba(79,143,247,0.08); color: var(--blue);
    font-size: 0.78rem; font-weight: 600; cursor: pointer;
    transition: background 0.15s;
}
.dp-login-nudge:hover { background: rgba(79,143,247,0.15); }
.dp-login-nudge-icon { font-size: 0.85rem; }
[data-theme="dark"] .dp-login-nudge { background: rgba(79,143,247,0.12); }
[data-theme="dark"] .dp-login-nudge:hover { background: rgba(79,143,247,0.2); }
.dp-mode-badge {
    display: inline-block; padding: 2px 10px;
    background: rgba(79,143,255,0.1); color: var(--blue);
    border-radius: 8px; font-size: 0.78rem; font-weight: 600;
}
[data-theme="dark"] .dp-mode-badge { background: rgba(79,143,255,0.2); }


/* ── Voice Gate 语音门控 ──────────────────────────────────────── */
.vg-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.45); display: flex;
    align-items: flex-end; justify-content: center;
    animation: fadeIn 0.2s ease;
}
.vg-sheet {
    width: 100%; max-width: 420px; background: var(--bg, #fff);
    border-radius: 20px 20px 0 0; padding: 24px 20px calc(20px + env(safe-area-inset-bottom));
    animation: slideUp 0.3s ease;
}
.vg-title {
    font-size: 1.1rem; font-weight: 800; text-align: center;
    color: var(--text, #182132); margin-bottom: 6px;
}
.vg-subtitle {
    font-size: 0.82rem; color: var(--muted, #7d8aa3);
    text-align: center; margin-bottom: 18px;
}
.vg-btn {
    display: flex; align-items: center; gap: 14px;
    padding: 16px; margin-bottom: 10px; width: 100%;
    background: var(--surface, #fff); border-radius: 14px;
    cursor: pointer; transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
    border: 1.5px solid transparent; text-align: left;
    min-height: 56px;
}
.vg-btn:active { background: rgba(79,143,247,0.08); }
.vg-btn--active:hover { border-color: rgba(43,200,102,0.4); }
.vg-btn--silent:hover { border-color: rgba(125,138,163,0.4); }
.vg-btn-icon { font-size: 1.5rem; flex-shrink: 0; }
.vg-btn-body { flex: 1; min-width: 0; }
.vg-btn-name { font-size: 0.95rem; font-weight: 700; color: var(--text, #182132); }
.vg-btn-desc { font-size: 0.78rem; color: var(--muted, #7d8aa3); margin-top: 2px; }
.vg-cancel {
    display: block; width: 100%; padding: 14px; margin-top: 4px;
    background: none; border: none; color: var(--muted, #7d8aa3);
    font-size: 0.92rem; cursor: pointer; border-radius: 12px;
}
.vg-cancel:active { background: var(--surface, #f5f5f5); }
[data-theme="dark"] .vg-sheet { background: var(--bg, #1a1a2e); }
[data-theme="dark"] .vg-btn { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .vg-btn:active { background: rgba(79,143,247,0.15); }

/* 三档模式选择弹窗 */
.dp-mode-overlay {
    position: fixed; inset: 0; z-index: 999;
    background: rgba(0,0,0,0.45); display: flex;
    align-items: flex-end; justify-content: center;
    animation: fadeIn 0.2s ease;
}
.dp-mode-sheet {
    width: 100%; max-width: 420px; background: var(--bg);
    border-radius: 20px 20px 0 0; padding: 24px 20px calc(20px + env(safe-area-inset-bottom));
    animation: slideUp 0.3s ease;
}
.dp-mode-title {
    font-size: 1.05rem; font-weight: 700; margin-bottom: 16px;
    text-align: center; color: var(--text);
}
.dp-mode-option {
    display: flex; align-items: center; gap: 14px;
    padding: 16px; margin-bottom: 8px;
    background: var(--surface); border-radius: 14px;
    cursor: pointer; transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.dp-mode-option:active { background: rgba(79,143,255,0.1); }
.dp-mode-emoji { font-size: 1.6rem; flex-shrink: 0; }
.dp-mode-name { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.dp-mode-desc { font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
.dp-mode-cancel {
    display: block; width: 100%; padding: 14px; margin-top: 8px;
    background: none; border: none; color: var(--muted);
    font-size: 0.92rem; cursor: pointer; border-radius: 12px;
}
.dp-mode-cancel:active { background: var(--surface); }
.dp-mode-recommend {
    text-align: center; font-size: 0.82rem; color: var(--accent, #4f8fff);
    margin-bottom: 12px; padding: 6px 12px; border-radius: 8px;
    background: rgba(79,143,255,0.08);
}
[data-theme="dark"] .dp-mode-recommend { background: rgba(79,143,255,0.15); }
[data-theme="dark"] .dp-mode-sheet { background: var(--bg); }
[data-theme="dark"] .dp-mode-option { background: rgba(255,255,255,0.06); }

@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* 成就卡 */
/* ── DP 统一结果卡 v3 (三段式: Celebrate → Inform → Navigate) ─── */
.dp-achieve-overlay {
    position: fixed; inset: 0; z-index: 998;
    background: rgba(0,0,0,0.5); display: flex;
    align-items: center; justify-content: center;
    animation: dpFadeIn 0.25s ease; padding: 20px;
}
.dp-achieve-card {
    width: 100%; max-width: 360px; background: var(--bg);
    border-radius: 24px; padding: 28px 24px 24px; text-align: center;
    animation: dpScaleIn 0.35s cubic-bezier(0.34,1.56,0.64,1);
    max-height: 85dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
[data-theme="dark"] .dp-achieve-card { background: var(--bg); }

/* ═══ ZONE 1: CELEBRATE ═══ */
.res-celebrate { margin-bottom: 12px; }
/* Fox */
.res-fox-wrap { display: flex; justify-content: center; margin-bottom: 4px; }
.res-fox-wrap .fox-wrap { width: 72px; height: 72px; }
/* Hero ring */
.res-hero { position: relative; display: inline-block; margin: 0 auto 8px; }
.res-hero-ring {
    position: relative; width: 110px; height: 110px; margin: 0 auto;
}
.res-hero-ring svg { width: 100%; height: 100%; }
.res-ring-bg {
    fill: none; stroke: var(--border); stroke-width: 8;
}
.res-ring-fill {
    fill: none; stroke-width: 8; stroke-linecap: round;
    transition: stroke-dashoffset 1s cubic-bezier(0.34,1.56,0.64,1);
}
/* Grade ring colors */
.res-hero-ring--S .res-ring-fill { stroke: var(--green); }
.res-hero-ring--A .res-ring-fill { stroke: var(--blue); }
.res-hero-ring--B .res-ring-fill { stroke: var(--amber); }
.res-hero-ring--C .res-ring-fill { stroke: var(--red); }
/* Ring center (number + grade) */
.res-hero-center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.res-hero-num {
    font-size: 1.6rem; font-weight: 800; color: var(--text); line-height: 1.1;
}
.res-hero-unit { font-size: 0.9rem; font-weight: 700; }
.res-hero-grade {
    font-size: 0.72rem; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; margin-top: 2px;
}
.res-hero-ring--S .res-hero-grade { color: var(--green); }
.res-hero-ring--A .res-hero-grade { color: var(--blue); }
.res-hero-ring--B .res-hero-grade { color: var(--amber); }
.res-hero-ring--C .res-hero-grade { color: var(--red); }
/* Hero label */
.res-hero-label {
    font-size: 0.78rem; color: var(--muted); font-weight: 600;
    margin-top: 4px; text-align: center;
}
/* Pending spinner */
.res-hero-ring--pending .res-ring-bg { stroke: var(--border); }
.res-hero-spinner {
    width: 28px; height: 28px; border: 3px solid var(--border);
    border-top-color: var(--blue); border-radius: 50%;
    animation: resSpinner 0.8s linear infinite;
}
@keyframes resSpinner { to { transform: rotate(360deg); } }
/* allDone 大 emoji */
.res-alldone-emoji {
    font-size: 3rem; line-height: 1.2; margin: 4px 0 8px;
}
/* Badges: streak + XP */
.res-badges {
    display: flex; justify-content: center; gap: 8px;
    margin: 8px 0 6px; flex-wrap: wrap;
}
.res-badge {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 10px; border-radius: 99px;
    font-size: 0.75rem; font-weight: 700;
    background: rgba(240,160,32,0.1); color: var(--amber);
}
.res-badge--xp {
    background: rgba(139,108,246,0.1); color: var(--purple);
}
/* Celebrate message */
.res-celeb-msg {
    font-size: 1rem; color: var(--text); font-weight: 600;
    line-height: 1.5; margin-bottom: 4px;
}
/* Dark mode zone 1 */
[data-theme="dark"] .res-ring-bg { stroke: rgba(255,255,255,0.1); }
[data-theme="dark"] .res-badge { background: rgba(240,160,32,0.15); }
[data-theme="dark"] .res-badge--xp { background: rgba(139,108,246,0.15); }
[data-theme="dark"] .res-hero-spinner { border-color: rgba(255,255,255,0.1); border-top-color: var(--blue); }

/* ═══ ZONE 2: INFORM ═══ */
.res-inform { margin-bottom: 14px; }
/* Stat items grid */
.res-stat-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 8px; margin-bottom: 10px;
}
.res-stat-item {
    background: var(--surface); border-radius: 12px;
    padding: 10px 6px; text-align: center;
    animation: resStatIn 0.35s ease both;
}
@keyframes resStatIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.res-stat-icon { font-size: 1.1rem; margin-bottom: 2px; }
.res-stat-val {
    font-size: 1.15rem; font-weight: 800; color: var(--text); line-height: 1.3;
}
.res-stat-label {
    font-size: 0.7rem; color: var(--muted); font-weight: 600;
    margin-top: 1px; letter-spacing: 0.3px;
}
[data-theme="dark"] .res-stat-item { background: rgba(255,255,255,0.05); }
/* Wrong words (expandable) */
.res-wrong { margin-bottom: 10px; text-align: left; }
.res-wrong-hd {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 0; cursor: pointer; font-size: 0.82rem;
    color: var(--muted); -webkit-tap-highlight-color: transparent;
}
.res-wrong-arrow {
    display: inline-block; transition: transform 0.2s; font-size: 0.7rem;
}
.res-wrong-arrow.open { transform: rotate(90deg); }
.res-wrong-list { display: flex; flex-direction: column; gap: 6px; }
.res-wrong-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px; background: var(--surface); border-radius: 10px;
    font-size: 0.85rem; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}
.res-wrong-item:active { background: var(--hover); }
.res-wrong-word { font-weight: 600; color: var(--text); }
.res-wrong-def { color: var(--muted); font-size: 0.8rem; text-align: right; max-width: 55%; }
[data-theme="dark"] .res-wrong-item { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .res-wrong-item:active { background: rgba(255,255,255,0.1); }
/* allDone hero: XP + streak */
.dp-achieve-hero-row {
    display: flex; justify-content: center; gap: 24px; margin-bottom: 14px;
}
.dp-achieve-hero-item { text-align: center; }
.dp-achieve-hero-val {
    display: block; font-size: 1.4rem; font-weight: 800; color: var(--text); line-height: 1.3;
}
.dp-achieve-hero-label {
    font-size: 0.72rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
}
/* 今日总结 */
.dp-achieve-summary {
    background: var(--surface); border-radius: 14px;
    padding: 14px 16px; margin: 0 0 14px; text-align: left;
}
.dp-achieve-summary-title {
    font-size: 0.78rem; font-weight: 600; color: var(--muted);
    margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;
}
.dp-achieve-summary-items {
    display: flex; flex-wrap: wrap; gap: 6px 14px;
    font-size: 0.85rem; color: var(--text); line-height: 1.7;
}
.dp-achieve-summary-ups {
    margin-top: 8px; color: var(--green); font-weight: 600; font-size: 0.88rem;
}
.dp-achieve-summary-new {
    margin-top: 4px; color: var(--accent, #4f8fff); font-weight: 600; font-size: 0.85rem;
}
[data-theme="dark"] .dp-achieve-summary { background: rgba(255,255,255,0.05); }
/* Skeleton shimmer (Talk pending) */
.dp-achieve-skeleton {
    height: 14px; border-radius: 6px; overflow: hidden;
    background: rgba(0,0,0,0.06); margin-bottom: 6px;
}
.dp-achieve-skeleton span {
    display: block; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.04) 40%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.04) 60%, transparent 100%);
    animation: dpShimmer 1.5s ease infinite;
}
.dp-achieve-skeleton--short { width: 60%; }
@keyframes dpShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }
[data-theme="dark"] .dp-achieve-skeleton { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .dp-achieve-skeleton span {
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 60%, transparent 100%);
}

/* ═══ ZONE 3: NAVIGATE ═══ */
.res-navigate { text-align: center; }
/* Path progress dots */
.res-progress { margin-bottom: 14px; }
.res-progress-steps {
    display: flex; align-items: center; justify-content: center; gap: 0;
}
.res-progress-dot {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface); border: 2px solid var(--border);
    font-size: 0.85rem; flex-shrink: 0;
    transition: all 0.3s ease;
}
.res-progress-dot.done {
    background: var(--green); border-color: var(--green);
}
.res-progress-check {
    color: #fff; font-size: 0.75rem; font-weight: 800;
}
.res-progress-icon { font-size: 0.8rem; }
.res-progress-line {
    width: 20px; height: 3px; border-radius: 99px;
    background: var(--border); flex-shrink: 0;
    transition: background 0.3s ease;
}
.res-progress-line.filled { background: var(--green); }
.res-progress-label {
    font-size: 0.75rem; color: var(--muted); margin-top: 6px; font-weight: 600;
}
[data-theme="dark"] .res-progress-dot { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
[data-theme="dark"] .res-progress-dot.done { background: var(--green); border-color: var(--green); }
[data-theme="dark"] .res-progress-line { background: rgba(255,255,255,0.1); }
/* Next step preview */
.res-preview {
    font-size: 0.82rem; color: var(--muted); text-align: center;
    margin-bottom: 10px; line-height: 1.5;
}
/* Primary CTA */
.res-cta-primary {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 14px 18px;
    background: linear-gradient(135deg, var(--blue), rgba(155,110,255,0.9));
    color: #fff; border: none; border-radius: 16px;
    font-size: 0.95rem; font-weight: 600; cursor: pointer;
    min-height: 52px; text-align: left; font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 16px rgba(79,143,255,0.3);
}
.res-cta-primary:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(79,143,255,0.2); }
.res-cta-icon { font-size: 1.3rem; flex-shrink: 0; }
.res-cta-body { flex: 1; }
.res-cta-title { font-weight: 700; }
.res-cta-hint { font-size: 0.78rem; opacity: 0.8; margin-top: 2px; }
.res-cta-arrow { font-size: 1.2rem; opacity: 0.7; }
/* Hard drill CTA */
.res-cta-hard {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 14px; margin-top: 10px; border-radius: 14px;
    border: 1.5px solid rgba(240,80,80,0.2); background: rgba(240,80,80,0.06);
    cursor: pointer; font-family: inherit; transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
    text-align: left; font-size: 0.88rem; color: var(--text);
}
.res-cta-hard:active { background: rgba(240,80,80,0.12); }
.res-cta-hard .res-cta-hint { opacity: 1; color: var(--red); }
[data-theme="dark"] .res-cta-hard { background: rgba(240,80,80,0.1); border-color: rgba(240,80,80,0.25); }
/* Secondary CTA (standalone back) */
.res-cta-secondary {
    display: block; margin: 10px auto 0; padding: 10px 24px;
    background: none; color: var(--muted); border: 1.5px solid var(--border);
    border-radius: 12px; font-size: 0.85rem; font-weight: 600;
    cursor: pointer; min-height: 44px; font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s;
}
.res-cta-secondary:active { background: var(--hover); color: var(--text); }
[data-theme="dark"] .res-cta-secondary { border-color: rgba(255,255,255,0.12); }
[data-theme="dark"] .res-cta-secondary:active { background: rgba(255,255,255,0.06); }
/* Rest CTA */
.res-cta-rest {
    display: block; margin: 12px auto 0;
    padding: 10px 20px; background: none;
    color: var(--muted); border: none;
    font-size: 0.85rem; cursor: pointer; min-height: 44px;
    -webkit-tap-highlight-color: transparent; font-family: inherit;
}
.res-cta-rest:active { color: var(--text); }
/* 回首页（allDone） */
.dp-achieve-home-cta {
    display: inline-block; padding: 14px 48px;
    background: var(--green); color: #fff;
    border: none; border-radius: 16px;
    font-size: 1rem; font-weight: 700; cursor: pointer;
    min-height: 52px; min-width: 200px;
    box-shadow: 0 4px 16px rgba(43,200,102,0.3);
    -webkit-tap-highlight-color: transparent; font-family: inherit;
}
.dp-achieve-home-cta:active { transform: scale(0.97); }
/* V6: 路径完成推荐按钮 */
.dp-achieve-rec-cta {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 14px 18px; margin-bottom: 10px;
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: 14px; cursor: pointer; text-align: left;
    font-size: 0.9rem; color: var(--text); min-height: 52px;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s, box-shadow 0.15s; font-family: inherit;
}
.dp-achieve-rec-cta:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(79,143,255,0.15); }
.dp-achieve-rec-icon { font-size: 1.3rem; flex-shrink: 0; }
.dp-achieve-rec-text { flex: 1; line-height: 1.45; }
[data-theme="dark"] .dp-achieve-rec-cta { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }

/* ═══ V7: 结果页升级 — mastery preview / talk detail / allDone step results / progress pulse ═══ */

/* Mastery upgrade words preview */
.res-mastery-preview { margin-bottom: 10px; text-align: left; }
.res-mastery-title {
    font-size: 0.72rem; font-weight: 700; color: var(--green);
    margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px;
}
.res-mastery-words { display: flex; gap: 6px; flex-wrap: wrap; }
.res-mastery-word {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 12px; border-radius: 99px;
    font-size: 0.82rem; font-weight: 600;
    background: rgba(43,200,102,0.08); color: var(--green);
    animation: resStatIn 0.35s ease both;
}
[data-theme="dark"] .res-mastery-word { background: rgba(43,200,102,0.15); }

/* Talk detail expandable */
.res-talk-detail { margin-bottom: 10px; text-align: left; }
.res-talk-detail-toggle {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 0; cursor: pointer;
    font-size: 0.82rem; font-weight: 600; color: var(--blue);
    -webkit-tap-highlight-color: transparent;
}
.res-talk-detail-body { padding: 8px 0; }
.res-talk-scores {
    display: flex; gap: 12px; justify-content: center; margin-bottom: 10px;
}
.res-talk-score-item {
    text-align: center; flex: 1;
    background: var(--surface); border-radius: 12px; padding: 10px 6px;
}
.res-talk-score-val { font-size: 1.2rem; font-weight: 800; color: var(--text); line-height: 1.3; }
.res-talk-score-label { font-size: 0.7rem; color: var(--muted); font-weight: 600; margin-top: 2px; }
[data-theme="dark"] .res-talk-score-item { background: rgba(255,255,255,0.05); }
.res-talk-phrases { display: flex; flex-direction: column; gap: 4px; }
.res-talk-phrase {
    font-size: 0.82rem; color: var(--text); padding: 4px 0; line-height: 1.5;
}

/* allDone step results (V7 — per-step summary with numbers) */
.dp-achieve-step-results { display: flex; flex-direction: column; gap: 8px; }
.dp-achieve-step-result {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.85rem; color: var(--text); line-height: 1.55;
}
.dp-achieve-step-icon { font-size: 1.05rem; flex-shrink: 0; width: 24px; text-align: center; }
.dp-achieve-step-line { flex: 1; }

/* Progress dot pulse animation for just-completed step */
.res-progress-dot--current {
    animation: dotPulse 1.5s ease-in-out infinite;
}
@keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(43,200,102,0.4); }
    50% { box-shadow: 0 0 0 8px rgba(43,200,102,0); }
}

/* V6: 静音模式开关（模式选择弹窗内） */
.dp-mode-silent {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px; margin-top: 8px;
    border-top: 1px solid var(--border);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dp-mode-silent-icon { font-size: 1.2rem; flex-shrink: 0; }
.dp-mode-silent-label { font-weight: 600; font-size: 0.9rem; color: var(--text); white-space: nowrap; }
.dp-mode-silent-desc { flex: 1; font-size: 0.78rem; color: var(--muted); }
.dp-mode-silent-toggle {
    width: 44px; height: 26px; border-radius: 13px;
    background: rgba(0,0,0,0.12); position: relative;
    transition: background 0.2s; flex-shrink: 0;
}
.dp-mode-silent-toggle.on { background: var(--green, #2bc866); }
.dp-mode-silent-knob {
    position: absolute; top: 3px; left: 3px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.dp-mode-silent-toggle.on .dp-mode-silent-knob { transform: translateX(18px); }
[data-theme="dark"] .dp-mode-silent-toggle { background: rgba(255,255,255,0.15); }

/* V6: Shadow 静音拼写卡 */
.shadow-silent-card {
    display: flex; flex-direction: column; align-items: center;
    padding: 32px 20px 24px; position: relative;
}
.shadow-silent-badge {
    font-size: 0.78rem; font-weight: 600; color: var(--muted);
    margin-bottom: 18px; letter-spacing: 0.5px;
}
.shadow-silent-word {
    font-size: 2rem; font-weight: 700; color: var(--text);
    margin-bottom: 6px; letter-spacing: 0.02em;
}
.shadow-silent-ipa {
    font-size: 0.92rem; color: var(--muted); margin-bottom: 8px;
    font-family: 'Lucida Sans Unicode', sans-serif;
}
.shadow-silent-zh {
    font-size: 1rem; color: var(--muted); margin-bottom: 6px;
}
.shadow-silent-ex {
    font-size: 0.85rem; color: var(--muted); opacity: 0.8;
    margin-bottom: 16px; text-align: center; max-width: 320px;
    font-style: italic; line-height: 1.5;
}
.shadow-silent-progress {
    font-size: 0.78rem; color: var(--muted); margin-bottom: 16px;
}
.shadow-silent-input {
    width: 100%; max-width: 300px; padding: 12px 16px;
    border: 1.5px solid var(--border); border-radius: 12px;
    background: var(--surface); color: var(--text);
    font-size: 1.1rem; text-align: center; outline: none;
    -webkit-appearance: none;
}
.shadow-silent-input:focus { border-color: var(--accent, #4f8fff); }
.shadow-silent-btn {
    margin-top: 12px; padding: 12px 48px;
    background: var(--accent, #4f8fff); color: #fff;
    border: none; border-radius: 12px;
    font-size: 1rem; font-weight: 600; cursor: pointer;
    min-height: 48px; min-width: 160px;
    -webkit-tap-highlight-color: transparent;
}
.shadow-silent-btn:active { transform: scale(0.97); }
[data-theme="dark"] .shadow-silent-input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }

/* V6: Talk 文字输入区 */
.talk-text-input-area {
    display: flex; gap: 8px; align-items: flex-end;
    padding: 8px 0;
}
.talk-text-input {
    flex: 1; padding: 10px 14px;
    border: 1.5px solid var(--border); border-radius: 14px;
    background: var(--surface); color: var(--text);
    font-size: 0.95rem; resize: none; outline: none;
    font-family: inherit; line-height: 1.5;
    -webkit-appearance: none;
}
.talk-text-input:focus { border-color: var(--accent, #4f8fff); }
.talk-text-send-btn {
    padding: 10px 18px; min-height: 44px;
    background: var(--accent, #4f8fff); color: #fff;
    border: none; border-radius: 14px;
    font-size: 0.9rem; font-weight: 600; cursor: pointer;
    white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.talk-text-send-btn:disabled { opacity: 0.4; cursor: default; }
.talk-text-send-btn:active:not(:disabled) { transform: scale(0.96); }
[data-theme="dark"] .talk-text-input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }

@keyframes dpScaleIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes dpFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Vocabulary Proficiency panel (vp-panel) ───────────────────── */
.vp-panel {
    margin: 0;
    padding: 20px;
    background: var(--today-card-bg, var(--surface));
    border: var(--border-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card-v2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    transition: box-shadow var(--duration-normal) var(--ease-smooth),
                border-color var(--duration-normal) var(--ease-smooth);
}
[data-theme="dark"] .vp-panel {
    background: var(--today-card-bg, rgba(255,255,255,0.04));
    border-color: rgba(255,255,255,0.08);
    box-shadow: var(--shadow-card-v2);
    border-top: 1px solid rgba(255,255,255,0.10);
}
.mastery-panel-empty {
    text-align: center; padding: 16px 0 8px;
}
.mastery-panel-empty-icon { font-size: 2rem; margin-bottom: 10px; }
.mastery-panel-empty-title { font-weight: 700; font-size: 0.95rem; color: var(--text); margin-bottom: 6px; }
.mastery-panel-empty-sub { font-size: 0.82rem; color: var(--muted); line-height: 1.55; }
/* ── 今日进步摘要（紧凑行） ── */
.vp-today-summary {
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(128,128,128,0.06);
}
[data-theme="dark"] .vp-today-summary { border-bottom-color: rgba(255,255,255,0.06); }
.vp-today-label {
    font-size: 0.85rem; font-weight: 600; color: var(--muted);
    display: block; text-align: center;
}
/* ── 3 行进度条 ── */
.vp-bars { display: flex; flex-direction: column; gap: 10px; }
.vp-bar-row {
    display: flex; align-items: center; gap: 8px; min-height: 44px;
}
.vp-bar-icon { font-size: 0.82rem; flex-shrink: 0; width: 18px; text-align: center; }
.vp-bar-name {
    font-size: 0.8rem; font-weight: 600; color: var(--text);
    min-width: 48px; flex-shrink: 0;
}
.vp-bar-track {
    flex: 1; height: 14px; background: rgba(0,0,0,0.04);
    border-radius: 7px; overflow: hidden; min-width: 60px;
    box-shadow: var(--shadow-inset);
}
[data-theme="dark"] .vp-bar-track { background: rgba(255,255,255,0.06); }
.vp-bar-fill {
    height: 100%; border-radius: 7px;
    transition: width 0.5s var(--ease-out);
    background-image: linear-gradient(180deg,
        rgba(255,255,255,0.25) 0%,
        transparent 50%,
        rgba(0,0,0,0.05) 100%
    );
    background-blend-mode: overlay;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.08);
}
.vp-bar-count {
    font-size: 0.88rem; font-weight: 700; color: var(--text);
    min-width: 28px; text-align: right; flex-shrink: 0;
}
.vp-bar-cta {
    background: linear-gradient(135deg, #4f8ff7, #6ca6ff); color: #fff;
    border: none; border-radius: 10px;
    padding: 5px 12px; font-size: 0.75rem; font-weight: 700;
    cursor: pointer; flex-shrink: 0; min-height: 30px;
    box-shadow: 0 2px 8px rgba(79,143,247,0.25);
    transition: opacity 0.2s, transform 0.12s;
}
.vp-bar-cta:active { opacity: 0.85; transform: scale(0.97); }
[data-theme="dark"] .vp-bar-cta { box-shadow: 0 2px 8px rgba(79,143,247,0.15); }
/* ── 待解锁行 ── */
.vp-unlock-row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0;
}
.vp-unlock-icon { font-size: 0.82rem; flex-shrink: 0; width: 18px; text-align: center; }
.vp-unlock-text {
    font-size: 0.78rem; color: var(--muted); font-weight: 500;
}
/* ── 底部小字 ── */
.vp-footer {
    font-size: 0.75rem; color: var(--muted); text-align: center;
    margin-top: 14px; padding-top: 10px;
    border-top: 1px solid rgba(128,128,128,0.06);
}
[data-theme="dark"] .vp-footer { border-top-color: rgba(255,255,255,0.06); }

/* ── VP Level Section (inside vp-panel) ── */
.vp-level-section {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(128,128,128,0.06);
}
[data-theme="dark"] .vp-level-section { border-top-color: rgba(255,255,255,0.06); }
.vp-level-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
    transition: color var(--duration-fast);
}
.vp-level-toggle:hover { color: var(--blue); }
.vp-level-chevron {
    transition: transform var(--duration-fast) var(--ease-smooth);
    font-size: 0.7rem;
}
.vp-level-chevron.open { transform: rotate(180deg); }
.vp-level-detail {
    padding: 8px 0 0;
}
/* ── Today Done Badge ── */
.today-done-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: center;
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: var(--radius-sm);
    background: rgba(43,200,102,0.08);
    border: 1px solid rgba(43,200,102,0.15);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--green);
}
[data-theme="dark"] .today-done-badge {
    background: rgba(43,200,102,0.1);
    border-color: rgba(43,200,102,0.2);
}

/* ── Celebration (enhanced) ────────────────────────────────────────── */
.today-celebrate {
    text-align: center;
    padding: 32px 20px;
    background: linear-gradient(135deg, rgba(43,200,102,0.06) 0%, rgba(79,143,247,0.04) 100%);
    border: 1px solid rgba(43,200,102,0.15);
    border-radius: var(--r);
    margin-top: 16px;
    box-shadow: 0 4px 20px rgba(43,200,102,0.08);
    position: relative;
    overflow: hidden;
}
[data-theme="dark"] .today-celebrate {
    background: linear-gradient(135deg, rgba(43,200,102,0.1) 0%, rgba(79,143,247,0.06) 100%);
    border-color: rgba(43,200,102,0.2);
    box-shadow: 0 4px 24px rgba(43,200,102,0.1);
}
/* Compact mode (after achievement card dismissed) */
.today-celebrate--compact { padding: 16px 20px; }
.today-celebrate-compact-row {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-bottom: 10px;
}
.today-celebrate-compact-text { font-size: 1rem; font-weight: 700; color: var(--text); }
.today-celebrate-emoji {
    font-size: 3rem;
    margin-bottom: 10px;
    animation: celebrateBounce 0.6s ease;
}
@keyframes celebrateBounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}
.today-celebrate-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}
.today-celebrate-sub {
    font-size: 0.84rem;
    color: var(--muted);
}
.today-celebrate-stats {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 20px 0 16px;
}
.today-celebrate-stat {
    flex: 1;
    max-width: 100px;
    background: var(--surface);
    border: 1px solid rgba(43,200,102,0.1);
    border-radius: 14px;
    padding: 14px 10px;
    box-shadow: 0 2px 8px rgba(43,200,102,0.05);
}
[data-theme="dark"] .today-celebrate-stat {
    background: rgba(43,200,102,0.08);
    border-color: rgba(43,200,102,0.12);
}
.today-celebrate-stat-val {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--blue);
}
.today-celebrate-stat-label {
    font-size: 0.7rem;
    color: var(--muted);
    margin-top: 2px;
}
.today-celebrate-extras {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
}
.today-celebrate-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    background: var(--hover);
    transition: background 0.15s;
}
.today-celebrate-link:active {
    opacity: 0.8;
}

/* ── Responsive breakpoints ───────────────────────────────────────── */
@media (max-width: 520px) {
    .today-dashboard {
        padding: calc(14px + env(safe-area-inset-top)) 12px calc(76px + env(safe-area-inset-bottom));
        gap: 10px;
    }
    .today-brand-icon { width: 28px; height: 28px; }
    .today-brand-name { font-size: 1rem; }
    .today-brand-right {
        gap: 6px;
        padding: 3px;
    }
    .today-cum-row {
        gap: 8px;
    }
    .today-cum-item {
        padding: 10px 6px;
        border-radius: 12px;
    }
    .today-cum-val {
        font-size: 1.1rem;
    }
    .today-greeting-text {
        font-size: 0.92rem;
    }
    .today-step {
        padding: 12px 10px;
        gap: 10px;
        margin-left: 16px;
    }
    .today-step-icon {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
        left: -30px;
    }
    .today-path-steps {
        margin-left: 14px;
    }
    .today-step-ring { width: 36px; height: 36px; }
    .progress-ring { width: 36px; height: 36px; }
    .today-avatar,
    .today-settings-btn { width: 34px; height: 34px; }
    .today-login-btn { min-height: 34px; padding: 0 12px; }
    .today-greeting-streak, .today-greeting-score { font-size: 0.72rem; margin-left: 6px; }
    .fox-cockpit-top {
        align-items: flex-start;
        gap: 12px;
    }
    .fox-cockpit .fox-wrap { width: 76px; height: 76px; }
    .fox-cockpit .dp-progress { padding: 10px 4px 0; }
    .today-deck-shell,
    .today-focus-nudge-shell,
    .today-focus-cluster { padding: 10px; border-radius: 20px; }
    .today-deck-card { padding: 11px 12px; }
    .today-deck-card-icon { width: 40px; height: 40px; font-size: 1.18rem; }
    .today-deck-card-meta { white-space: normal; }
    .hs-item { min-height: 32px; padding: 5px 10px; font-size: 0.78rem; }
    .vp-panel { padding: 16px; border-radius: 20px; }
    .streak-journey { padding: 16px; border-radius: 20px; }
    .today-quick-pill { min-height: 40px; padding: 0 12px; font-size: 0.78rem; border-radius: 14px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   LOGIN GATE OVERLAY（上下文感知登录引导）
   ══════════════════════════════════════════════════════════════════════════════ */
.login-gate-overlay {
    position: fixed; inset: 0; z-index: 998;
    background: rgba(0,0,0,0.45);
    display: flex; align-items: flex-end; justify-content: center;
    animation: loginGateFadeIn 0.2s ease;
}
.login-gate-sheet {
    width: 100%; max-width: 420px;
    background: var(--surface); border-radius: 20px 20px 0 0;
    padding: 28px 24px calc(24px + env(safe-area-inset-bottom, 0px));
    text-align: center; position: relative;
    animation: loginGateSlideUp 0.3s ease-out;
}
@media (min-width: 640px) {
    .login-gate-overlay { align-items: center; }
    .login-gate-sheet { border-radius: 20px; max-height: 80vh; }
}
@keyframes loginGateSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes loginGateFadeIn { from { opacity: 0; } to { opacity: 1; } }
.login-gate-close {
    position: absolute; top: 12px; right: 16px;
    background: none; border: none; font-size: 1.2rem;
    color: var(--muted); cursor: pointer;
    min-height: 44px; min-width: 44px;
}
.login-gate-icon { font-size: 2.5rem; margin-bottom: 12px; }
.login-gate-title { font-size: 1.15rem; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.login-gate-desc { font-size: 0.88rem; color: var(--text-2); line-height: 1.5; margin-bottom: 16px; }
.login-gate-benefits { list-style: none; padding: 0; margin: 0 0 20px; text-align: left; }
.login-gate-benefits li {
    font-size: 0.85rem; color: var(--text); padding: 6px 0;
    display: flex; align-items: center; gap: 8px;
}
.login-gate-cta {
    width: 100%; padding: 14px; border: none; border-radius: 14px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer;
    min-height: 50px;
}
.login-gate-cta:active { transform: scale(0.98); opacity: 0.9; }
.login-gate-later {
    display: block; width: 100%; margin-top: 12px; padding: 10px;
    background: none; border: none; color: var(--muted);
    font-size: 0.85rem; cursor: pointer; min-height: 44px;
}
[data-theme="dark"] .login-gate-overlay { background: rgba(0,0,0,0.6); }

/* ── My Articles 登录提示 ── */
.rtab-login-prompt {
    display: flex; flex-direction: column; align-items: center;
    padding: 48px 24px; text-align: center;
}
.rtab-login-icon { font-size: 2.5rem; margin-bottom: 12px; }
.rtab-login-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.rtab-login-desc { font-size: 0.85rem; color: var(--muted); margin-bottom: 20px; }
.rtab-login-btn {
    padding: 10px 28px; border-radius: 12px; border: none;
    background: var(--blue); color: #fff;
    font-size: 0.9rem; font-weight: 600; cursor: pointer;
    min-height: 44px;
}

/* ── Onboarding 注册卡片 ── */
.ob-register {
    display: flex; align-items: center; gap: 14px;
    padding: 16px; margin: 0 16px 8px;
    border: 1px solid var(--border); border-radius: 16px;
    background: var(--surface);
}
.ob-register-icon { font-size: 1.5rem; flex-shrink: 0; }
.ob-register-body { flex: 1; min-width: 0; }
.ob-register-title { font-size: 0.88rem; font-weight: 700; color: var(--text); }
.ob-register-desc { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.ob-register-btn {
    flex-shrink: 0; padding: 8px 16px; border-radius: 10px; border: none;
    background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff;
    font-size: 0.8rem; font-weight: 700; cursor: pointer; min-height: 44px;
}

/* ── Onboarding 词汇诊断 ── */
.ob-diag { background: var(--surface2); border-radius: 16px; padding: 20px; margin: 20px 16px 0; }
.ob-diag-title { font-weight: 700; font-size: 0.95rem; color: var(--text); margin-bottom: 6px; }
.ob-diag-sub { font-size: 0.82rem; color: var(--text2); margin-bottom: 16px; line-height: 1.5; }
.ob-diag-actions { display: flex; align-items: center; gap: 12px; }
.ob-diag-btn {
    background: var(--accent); color: #000; border: none; border-radius: 10px;
    padding: 10px 24px; font-weight: 700; font-size: 0.88rem; cursor: pointer; min-height: 44px;
}
.ob-diag-skip { background: none; border: none; color: var(--muted); font-size: 0.8rem; cursor: pointer; }
.ob-diag-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.ob-diag-prog-bar { flex: 1; height: 4px; background: var(--surface3); border-radius: 2px; }
.ob-diag-prog-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.3s; }
.ob-diag-prog-num { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.ob-diag-word { font-size: 1.5rem; font-weight: 800; color: var(--text); text-align: center; margin: 12px 0 4px; }
.ob-diag-prompt { font-size: 0.8rem; color: var(--muted); text-align: center; margin-bottom: 14px; }
.ob-diag-options { display: flex; flex-direction: column; gap: 8px; }
.ob-diag-opt {
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 12px 14px; font-size: 0.85rem; color: var(--text); cursor: pointer;
    transition: all 0.15s; text-align: left; min-height: 44px;
}
.ob-diag-opt:disabled { cursor: default; }
.ob-diag-opt.correct { background: rgba(0,230,184,0.15); border-color: var(--accent); color: var(--accent); font-weight: 700; }
.ob-diag-opt.wrong { background: rgba(239,68,68,0.1); border-color: #ef4444; color: #ef4444; }
.ob-diag-res-emoji { font-size: 2rem; text-align: center; margin-bottom: 8px; }
.ob-diag-res-title { font-size: 1.1rem; font-weight: 700; color: var(--text); text-align: center; margin-bottom: 12px; }
.ob-diag-res-stats { display: flex; gap: 16px; justify-content: center; margin-bottom: 10px; }
.ob-diag-stat { text-align: center; }
.ob-diag-stat-n { display: block; font-size: 1.8rem; font-weight: 800; color: var(--accent); }
.ob-diag-stat-l { font-size: 0.75rem; color: var(--muted); }
.ob-diag-res-sub { font-size: 0.8rem; color: var(--text2); text-align: center; }
[data-theme="dark"] .ob-diag-btn { color: #000; }

/* ══════════════════════════════════════════════════════════════════════════════
   AUTH MODAL (全局)
   ══════════════════════════════════════════════════════════════════════════════ */
.auth-modal-overlay {
    position: fixed;
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: 999;
    background: rgba(0,0,0,0.18);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    animation: loginGateFadeIn 0.2s ease;
}
.auth-modal-overlay::before {
    content: ''; position: absolute; top: 0; bottom: 0;
    width: 100%; max-width: var(--shell-max-width, 920px);
    left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.32);
    pointer-events: none;
}
.auth-modal {
    background: var(--surface); border-radius: 20px;
    max-width: 440px; width: 100%; max-height: 92vh;
    overflow-y: auto; position: relative; padding: 0;
    box-shadow: 0 16px 48px rgba(0,0,0,0.2);
    -webkit-overflow-scrolling: touch;
}
/* 移动端：全屏底部弹出，更大空间 */
@media (max-width: 480px) {
    .auth-modal-overlay {
        padding: 0;
        align-items: flex-end;
    }
    .auth-modal {
        max-width: none;
        width: 100%;
        max-height: calc(100vh - env(safe-area-inset-top, 0px) - 40px);
        border-radius: 20px 20px 0 0;
        animation: loginGateSlideUp 0.3s ease-out;
    }
    .auth-modal .card {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}
.auth-modal-close {
    position: absolute; top: 12px; right: 12px;
    background: none; border: none; font-size: 1.2rem;
    color: var(--muted); cursor: pointer; z-index: 1;
    min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
.auth-modal-close:hover { background: var(--hover); }
.auth-modal .card { border: none; box-shadow: none; margin: 0; height: auto !important; }
/* 场景文案区（功能门控触发时显示） */
.auth-modal .auth-context{
    display:flex;align-items:center;gap:12px;
    padding:12px 14px;margin-bottom:14px;
    background:var(--pri-light);border-radius:12px;
}
.auth-modal .auth-context-icon{font-size:28px;flex-shrink:0}
.auth-modal .auth-context-body{flex:1;min-width:0}
.auth-modal .auth-context-title{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:2px}
.auth-modal .auth-context-desc{font-size:13px;color:var(--muted2);line-height:1.4}
[data-theme="dark"] .auth-modal {
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
[data-theme="dark"] .auth-modal-overlay { background: rgba(0,0,0,0.3); }
[data-theme="dark"] .auth-modal-overlay::before { background: rgba(0,0,0,0.4); }

/* ══════════════════════════════════════════════════════════════════════════
   Global Shell + Overlay Family Refresh
   ══════════════════════════════════════════════════════════════════════════ */
.overlay-scrim {
    background: var(--overlay-scrim-bg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
    isolation: isolate;
}
.overlay-scrim::before,
.overlay-scrim::after {
    content: '';
    position: absolute;
    inset: auto;
    pointer-events: none;
}
.overlay-scrim::before {
    top: -14%;
    right: -10%;
    width: min(56vw, 560px);
    height: min(56vw, 560px);
    border-radius: 50%;
    background: radial-gradient(circle, var(--overlay-scrim-top) 0%, transparent 68%);
    opacity: 0.95;
}
.overlay-scrim::after {
    left: -12%;
    bottom: -18%;
    width: min(52vw, 520px);
    height: min(52vw, 520px);
    border-radius: 50%;
    background: radial-gradient(circle, var(--overlay-scrim-bottom) 0%, transparent 72%);
    opacity: 0.8;
}
.overlay-panel-shell {
    background: var(--overlay-panel-bg);
    border: 1px solid var(--overlay-panel-border);
    box-shadow: var(--overlay-panel-shadow);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.overlay-panel-shell::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.auth-modal-overlay.overlay-scrim {
    background: var(--overlay-scrim-bg);
}
.auth-modal-overlay.overlay-scrim::before {
    top: -12%;
    left: 50%;
    right: auto;
    width: min(70vw, 760px);
    height: min(70vw, 760px);
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, var(--overlay-scrim-top) 0%, transparent 68%);
}
.auth-modal-overlay.overlay-scrim::after {
    left: auto;
    right: -10%;
    bottom: -20%;
    width: min(44vw, 420px);
    height: min(44vw, 420px);
    border-radius: 50%;
    background: radial-gradient(circle, var(--overlay-scrim-bottom) 0%, transparent 72%);
}
.auth-modal.overlay-panel-shell {
    background: var(--overlay-panel-bg);
    border-radius: 30px;
    max-width: 460px;
    box-shadow: var(--overlay-panel-shadow);
    border: 1px solid var(--overlay-panel-border);
}
.auth-modal .card {
    background: transparent;
}

.settings-drawer .settings-drawer-overlay.overlay-scrim {
    background: var(--overlay-scrim-bg);
}
.settings-drawer .settings-drawer-content.overlay-panel-shell {
    left: 50%;
    right: auto;
    top: max(20px, calc(env(safe-area-inset-top, 0px) + 20px));
    bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 20px));
    width: min(calc(100% - 32px), 760px);
    max-width: 760px;
    max-height: none;
    margin: 0;
    padding: 0 20px 22px;
    border-radius: 30px;
    background: var(--overlay-panel-bg);
    border: 1px solid var(--overlay-panel-border);
    box-shadow: var(--overlay-panel-shadow);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translate(-50%, 22px) scale(0.98);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(.22,1,.36,1), opacity 0.24s ease, box-shadow 0.24s ease;
}
.settings-drawer.open .settings-drawer-content.overlay-panel-shell {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
}
.settings-drawer .settings-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(15,23,42,0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0));
    position: sticky;
    top: 0;
    z-index: 2;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.settings-drawer-title-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.settings-drawer-eyebrow {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}
.settings-drawer-title {
    font-size: 1.12rem;
    font-weight: 760;
    letter-spacing: -0.02em;
    color: var(--text);
}
.settings-drawer .settings-drawer-close,
.auth-modal-close {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.32);
    background: rgba(255,255,255,0.34);
    color: var(--muted);
}
.settings-section-card {
    position: relative;
    background: var(--overlay-section-bg);
    border: 1px solid var(--overlay-section-border);
    border-radius: 24px;
    padding: 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.settings-account-hero {
    padding: 18px;
    background:
        radial-gradient(circle at top right, rgba(79,143,247,0.12), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.06)),
        var(--overlay-section-bg);
}
.settings-account-hero + .settings-section-card {
    margin-top: 14px;
}
.settings-account-hero .settings-user-info {
    align-items: flex-start;
    gap: 16px;
    padding: 0;
    margin: 0;
    border-bottom: none;
}
.settings-account-hero--guest {
    cursor: pointer;
}
.settings-account-hero--guest .settings-user-info {
    align-items: center;
}
.settings-user-avatar {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    box-shadow: 0 14px 28px rgba(79,143,247,0.18);
}
.settings-user-name {
    font-size: 1.02rem;
    font-weight: 760;
    letter-spacing: -0.02em;
}
.settings-guest-hint {
    margin-top: 6px;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--muted);
}
.settings-user-level {
    gap: 6px;
    margin-top: 8px;
}
.sul-badge {
    padding: 3px 8px;
    border-radius: 999px;
    border-width: 1px;
    background: rgba(255,255,255,0.28);
}
.sul-mastered {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(249,115,22,0.1);
    color: #c2410c;
}
.settings-user-push-level {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    font-size: 0.76rem;
}
.supl-levels {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: 0;
}
.supl-level-btn {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border-width: 1px;
    background: rgba(255,255,255,0.36);
}
.settings-section-heading {
    margin-bottom: 12px;
}
.settings-section-title {
    font-size: 0.94rem;
    font-weight: 760;
    color: var(--text);
    letter-spacing: -0.01em;
}
.settings-section-subtitle {
    margin-top: 4px;
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--muted);
}
.settings-section-card .settings-group-label {
    padding: 0;
    margin: 14px 0 8px;
}
.settings-section-card .settings-group-sep {
    height: 1px;
    margin: 14px 0;
    background: rgba(15,23,42,0.08);
}
.settings-section-card .prof-row {
    min-height: 52px;
    padding: 0 4px;
    border-radius: 16px;
}
.settings-section-card .prof-row + .prof-row {
    border-top: 1px solid rgba(15,23,42,0.08);
}
.settings-section-card .prof-row:active {
    background: rgba(79,143,247,0.06);
}
.settings-section-card .prof-row-label {
    font-size: 0.9rem;
    font-weight: 620;
}
.settings-section-card .prof-row-arrow {
    font-size: 1rem;
}
.settings-section-card .rename-inline {
    padding: 12px 4px 4px;
    border-top: 1px solid rgba(15,23,42,0.08);
}
.settings-section-card .rename-inline-submit {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 12px;
}
.settings-section-card .rename-inline-cancel {
    min-height: 38px;
    padding: 0 12px;
    border-radius: 12px;
}
.settings-section-card .theme-seg {
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,0.08);
    background: rgba(255,255,255,0.32);
}
.settings-section-card .theme-seg-btn {
    min-height: 38px;
    padding: 0 12px;
    font-size: 0.74rem;
    font-weight: 700;
    border-right: 1px solid rgba(15,23,42,0.08);
}
.settings-section-card .theme-seg-btn.active {
    background: linear-gradient(135deg, rgba(79,143,247,0.92), rgba(108,166,255,0.92));
}
.settings-section-card .prof-toggle {
    background: rgba(15,23,42,0.14);
}
.settings-section-card .prof-toggle::after {
    box-shadow: 0 2px 8px rgba(15,23,42,0.16);
}
.settings-danger-section {
    margin-top: 14px;
    background: rgba(240,80,80,0.06);
    border-color: rgba(240,80,80,0.14);
}
.settings-danger-section .prof-row {
    border-top: none;
}
.settings-version {
    padding: 16px 0 4px;
}

[data-theme="dark"] .settings-drawer .settings-drawer-header {
    border-bottom-color: rgba(148,163,184,0.12);
    background: linear-gradient(180deg, rgba(15,23,42,0.36), rgba(15,23,42,0));
}
[data-theme="dark"] .settings-drawer .settings-drawer-close,
[data-theme="dark"] .auth-modal-close {
    background: rgba(255,255,255,0.04);
    border-color: rgba(148,163,184,0.14);
}
[data-theme="dark"] .settings-section-card {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="dark"] .settings-account-hero {
    background:
        radial-gradient(circle at top right, rgba(79,143,247,0.18), transparent 44%),
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0)),
        var(--overlay-section-bg);
}
[data-theme="dark"] .settings-user-avatar {
    box-shadow: none;
}
[data-theme="dark"] .sul-badge {
    background: rgba(255,255,255,0.04);
}
[data-theme="dark"] .sul-mastered {
    background: rgba(249,115,22,0.14);
    color: #fdba74;
}
[data-theme="dark"] .settings-section-card .settings-group-sep,
[data-theme="dark"] .settings-section-card .prof-row + .prof-row,
[data-theme="dark"] .settings-section-card .rename-inline {
    border-top-color: rgba(148,163,184,0.12);
    background-color: transparent;
}
[data-theme="dark"] .settings-section-card .settings-group-sep {
    background: rgba(148,163,184,0.12);
}
[data-theme="dark"] .settings-section-card .theme-seg {
    background: rgba(255,255,255,0.04);
    border-color: rgba(148,163,184,0.12);
}
[data-theme="dark"] .settings-section-card .theme-seg-btn {
    border-right-color: rgba(148,163,184,0.12);
}
[data-theme="dark"] .settings-section-card .theme-seg-btn.active {
    background: linear-gradient(135deg, rgba(79,143,247,0.86), rgba(108,166,255,0.9));
}
[data-theme="dark"] .settings-section-card .prof-toggle {
    background: rgba(255,255,255,0.14);
}
[data-theme="dark"] .settings-danger-section {
    background: rgba(240,80,80,0.08);
    border-color: rgba(240,80,80,0.18);
}

@media (min-width: 960px) {
    .settings-drawer .settings-drawer-content.overlay-panel-shell {
        width: min(calc(100% - 48px), 820px);
        max-width: 820px;
        display: grid;
        grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
        grid-template-areas:
            "header header"
            "hero primary"
            "secondary primary"
            "danger meta";
        align-items: start;
        align-content: start;
        gap: 12px 14px;
        padding: 0 18px 18px;
    }
    .settings-drawer .settings-drawer-content.overlay-panel-shell > * {
        min-width: 0;
    }
    .settings-drawer .settings-drawer-header {
        grid-area: header;
        margin-bottom: 0;
        padding: 16px 0 12px;
    }
    .settings-account-hero {
        grid-area: hero;
        padding: 16px;
    }
    .settings-primary-section {
        grid-area: primary;
        align-self: start;
    }
    .settings-secondary-section {
        grid-area: secondary;
        align-self: start;
    }
    .settings-danger-section {
        grid-area: danger;
        margin-top: 0;
    }
    .settings-version {
        grid-area: meta;
        align-self: end;
        justify-self: end;
        padding: 0 2px 4px;
        text-align: right;
    }
    .settings-account-hero + .settings-section-card {
        margin-top: 0;
    }
    .settings-section-card {
        padding: 14px;
        border-radius: 22px;
    }
    .settings-section-heading {
        margin-bottom: 10px;
    }
    .settings-section-subtitle {
        display: none;
    }
    .settings-user-avatar {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }
    .settings-user-level {
        gap: 5px;
        margin-top: 6px;
    }
    .sul-badge {
        font-size: 0.64rem;
        padding: 2px 7px;
    }
    .sul-mastered {
        min-height: 26px;
        padding: 0 9px;
        font-size: 0.7rem;
    }
    .settings-user-push-level {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        align-items: center;
        gap: 6px 8px;
        margin-top: 10px;
    }
    .supl-levels {
        gap: 6px;
    }
    .supl-level-btn {
        min-height: 30px;
        padding: 0 10px;
    }
    .settings-section-card .settings-group-label {
        margin: 10px 0 6px;
        font-size: 0.68rem;
    }
    .settings-section-card .settings-group-sep {
        margin: 10px 0;
    }
    .settings-section-card .prof-row {
        min-height: 46px;
    }
    .settings-section-card .rename-inline {
        padding: 10px 4px 4px;
    }
    .settings-section-card .theme-seg-btn {
        min-height: 34px;
        padding: 0 10px;
    }
}

@media (max-width: 640px) {
    .settings-drawer .settings-drawer-content.overlay-panel-shell {
        left: 0;
        right: 0;
        top: max(8px, calc(env(safe-area-inset-top, 0px) + 8px));
        bottom: 0;
        width: 100%;
        max-width: none;
        max-height: calc(100dvh - max(8px, calc(env(safe-area-inset-top, 0px) + 8px)));
        padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
        border-radius: 28px 28px 0 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        transform: translateY(100%);
    }
    .settings-drawer.open .settings-drawer-content.overlay-panel-shell {
        transform: translateY(0);
    }
    .settings-drawer .settings-drawer-header {
        padding-top: 16px;
    }
    .settings-section-card {
        padding: 14px;
        border-radius: 22px;
    }
    .settings-account-hero .settings-user-info {
        gap: 14px;
    }
    .settings-user-avatar {
        width: 50px;
        height: 50px;
        border-radius: 16px;
    }
    .settings-user-push-level {
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .auth-modal.overlay-panel-shell {
        max-width: none;
        width: 100%;
        border-radius: 28px 28px 0 0;
    }
    .auth-modal-close {
        top: 14px;
        right: 14px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Fox SVG Emotional System
   ══════════════════════════════════════════════════════════════════════════ */

.fox-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 双层表情切换：默认隐藏，active 时显示 */
.fox-eyes-wrap use,
.fox-mouth-wrap use {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.fox-eyes-wrap use.fox-expr-active,
.fox-mouth-wrap use.fox-expr-active {
  opacity: 1;
}

/* 眨眼动画（用 g 包裹） */
.fox-avatar:not(.celebrating):not(.excited) .fox-eyes-wrap {
  animation: foxSvgBlink 4s ease-in-out infinite;
}

@keyframes foxSvgBlink {
  0%, 45%, 55%, 100% { transform: scaleY(1); transform-origin: center 45px; }
  50% { transform: scaleY(0.1); transform-origin: center 45px; }
}

/* 耳朵微动 */
.fox-ears-wrap {
  transform-origin: center bottom;
}
/* .fox-avatar.excited/.celebrating ear twich — 已迁移至 mood-* */

@keyframes foxEarTwitch {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

/* 腮红渐入 */
.fox-blush-svg {
  opacity: 0;
  animation: foxBlushIn 0.3s ease forwards;
}

@keyframes foxBlushIn {
  to { opacity: 0.5; }
}

/* 特效动画 */
.fox-svg use[href*="effect-zzz"] {
  animation: foxZzz 2s ease-in-out infinite;
}

@keyframes foxZzz {
  0%, 100% { opacity: 0.4; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-8px); }
}

.fox-svg use[href*="effect-halo"] {
  animation: foxHaloGlow 2s ease-in-out infinite;
}

@keyframes foxHaloGlow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.fox-svg use[href*="effect-sparkle"] {
  animation: foxSparkle 1s ease-in-out infinite;
}

@keyframes foxSparkle {
  0%, 100% { opacity: 0.5; transform: scale(0.9) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.1) rotate(15deg); }
}

.fox-svg use[href*="effect-exclaim"] {
  animation: foxExclaim 0.3s ease-out;
}

@keyframes foxExclaim {
  0% { opacity: 0; transform: scale(0.5) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.fox-svg use[href*="effect-question"] {
  animation: foxQuestion 2s ease-in-out infinite;
}

@keyframes foxQuestion {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

/* 节日装饰微动 */
.fox-svg use[href*="acc-"] {
  animation: foxAccFloat 3s ease-in-out infinite;
}

@keyframes foxAccFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* 点击弹跳 */
.fox-avatar.happy .fox-svg {
  animation: foxClickBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes foxClickBounce {
  0% { transform: scale(1); }
  30% { transform: scale(0.9); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* 庆祝模式增强 — 已迁移至 mood-celebrating */

/* Dark mode 适配 */
[data-theme="dark"] .fox-blush-svg {
  opacity: 0.3 !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fox-eyes-wrap,
  .fox-ears-wrap,
  .fox-svg use[href*="effect-"],
  .fox-svg use[href*="acc-"],
  .fox-avatar.happy .fox-svg {
    animation: none !important;
  }
}


/* ═══════════════════════════════════════════════════════
   Fox V3 — 25 种 mood CSS 效果 (提取自 fox-css-effects-demo.html)
   ═══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
   Fox Container
   ═══════════════════════════════════════════════════════ */
.fox-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fox-emoji {
  font-size: 44px;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  line-height: 1;
}

.fox-wrap:hover .fox-emoji { transform: scale(1.12); }
.fox-wrap:active .fox-emoji { transform: scale(0.9); }

/* ═══════════════════════════════════════════════════════
   SHARED KEYFRAMES
   ═══════════════════════════════════════════════════════ */
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.12); opacity: 1; }
}
@keyframes ring-expand {
  0% { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes rainbow-spin {
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════
   1. IDLE — 柔和呼吸光晕
   ═══════════════════════════════════════════════════════ */
.mood-idle .fox-aura {
  position: absolute; inset: -8px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,108,246,0.15) 0%, transparent 70%);
  animation: breathe 3s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════
   2. EXCITED — 金色脉冲 + 弹跳
   ═══════════════════════════════════════════════════════ */
.mood-excited .fox-emoji { animation: bounce 0.6s cubic-bezier(0.34,1.56,0.64,1) infinite alternate; }
.mood-excited .fox-aura {
  position: absolute; inset: -12px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,215,0,0.25) 0%, rgba(255,165,0,0.08) 50%, transparent 70%);
  animation: pulse-gold 1.2s ease-in-out infinite;
}
.mood-excited .fox-ring {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(255,215,0,0.3);
  animation: ring-expand 1.5s ease-out infinite;
}
@keyframes bounce { 0% { transform: translateY(0); } 100% { transform: translateY(-6px); } }
@keyframes pulse-gold { 0%,100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.25); opacity: 1; } }

/* ═══════════════════════════════════════════════════════
   3. CELEBRATING — 彩虹旋转光环
   ═══════════════════════════════════════════════════════ */
.mood-celebrating .fox-emoji { animation: celebrate-bounce 0.4s ease infinite alternate; }
.mood-celebrating .fox-aura {
  position: absolute; inset: -16px; border-radius: 50%;
  background: conic-gradient(from 0deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #9b59b6, #ff6b6b);
  opacity: 0.2; animation: rainbow-spin 3s linear infinite; filter: blur(8px);
}
.mood-celebrating .fox-ring {
  position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid transparent;
  background: conic-gradient(from 0deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #9b59b6, #ff6b6b) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: rainbow-spin 2s linear infinite; opacity: 0.6;
}
@keyframes celebrate-bounce { 0% { transform: translateY(0) rotate(-3deg); } 100% { transform: translateY(-4px) rotate(3deg); } }

/* ═══════════════════════════════════════════════════════
   4. SAD — 蓝色阴郁 + 雨滴
   ═══════════════════════════════════════════════════════ */
.mood-sad .fox-emoji { animation: sad-droop 2s ease-in-out infinite; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)) saturate(0.7); }
.mood-sad .fox-aura {
  position: absolute; inset: -10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(100,149,237,0.2) 0%, transparent 70%);
  animation: sad-pulse 3s ease-in-out infinite;
}
.mood-sad .rain {
  position: absolute; top: -10px; left: 50%; width: 2px; height: 8px;
  background: linear-gradient(to bottom, transparent, rgba(100,149,237,0.6)); border-radius: 1px;
  animation: rain-fall 1s linear infinite;
}
.mood-sad .rain:nth-child(3) { left: 30%; animation-delay: -0.3s; animation-duration: 1.2s; }
.mood-sad .rain:nth-child(4) { left: 70%; animation-delay: -0.6s; animation-duration: 0.9s; }
.mood-sad .rain:nth-child(5) { left: 45%; animation-delay: -0.8s; }
@keyframes sad-droop { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(3px) rotate(-2deg); } }
@keyframes sad-pulse { 0%,100% { opacity: 0.3; } 50% { opacity: 0.6; } }
@keyframes rain-fall { 0% { top: -10px; opacity: 0; } 20% { opacity: 1; } 100% { top: 80px; opacity: 0; } }

/* ═══════════════════════════════════════════════════════
   5. SLEEPY — ZZZ + 暗淡
   ═══════════════════════════════════════════════════════ */
.mood-sleepy .fox-emoji { animation: sleepy-float 4s ease-in-out infinite; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)) brightness(0.85); }
.mood-sleepy .fox-aura {
  position: absolute; inset: -8px; border-radius: 50%;
  background: radial-gradient(circle, rgba(147,130,220,0.12) 0%, transparent 70%);
  animation: breathe 4s ease-in-out infinite;
}
.mood-sleepy .zzz {
  position: absolute; right: -4px; font-weight: 700; color: rgba(147,130,220,0.7);
  animation: zzz-float 2.5s ease-in-out infinite; z-index: 3;
}
.mood-sleepy .zzz:nth-child(3) { top: 12px; font-size: 10px; animation-delay: 0s; right: 0; }
.mood-sleepy .zzz:nth-child(4) { top: 2px; font-size: 13px; animation-delay: 0.4s; right: -8px; }
.mood-sleepy .zzz:nth-child(5) { top: -10px; font-size: 17px; animation-delay: 0.8s; right: -14px; }
@keyframes sleepy-float { 0%,100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(2px) rotate(3deg); } 75% { transform: translateY(-1px) rotate(-2deg); } }
@keyframes zzz-float { 0%,100% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px) translateX(8px); } }

/* ═══════════════════════════════════════════════════════
   6. PROUD — 金色光柱
   ═══════════════════════════════════════════════════════ */
.mood-proud .fox-emoji { animation: proud-lift 2s ease-in-out infinite; }
.mood-proud .fox-aura {
  position: absolute; inset: -14px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,215,0,0.2) 0%, rgba(255,165,0,0.05) 60%, transparent 70%);
  animation: proud-glow 2s ease-in-out infinite;
}
.mood-proud .light-beam {
  position: absolute; bottom: 0; left: 50%; width: 40px; height: 90px; margin-left: -20px;
  background: linear-gradient(to top, rgba(255,215,0,0.15), transparent);
  clip-path: polygon(30% 100%, 70% 100%, 90% 0%, 10% 0%);
  animation: beam-pulse 2s ease-in-out infinite; z-index: 1;
}
@keyframes proud-lift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes proud-glow { 0%,100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.1); } }
@keyframes beam-pulse { 0%,100% { opacity: 0.3; } 50% { opacity: 0.7; } }

/* ═══════════════════════════════════════════════════════
   7. FOCUSED — 蓝色聚焦
   ═══════════════════════════════════════════════════════ */
.mood-focused .fox-aura {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(79,143,255,0.25);
  background: radial-gradient(circle, rgba(79,143,255,0.08) 0%, transparent 70%);
  animation: focus-lock 2s ease-in-out infinite;
}
.mood-focused .fox-ring {
  position: absolute; inset: -2px; border-radius: 50%;
  border: 1.5px dashed rgba(79,143,255,0.2);
  animation: rainbow-spin 8s linear infinite;
}
@keyframes focus-lock { 0%,100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.05); opacity: 0.8; } }

/* ═══════════════════════════════════════════════════════
   8. WELCOMING — 温暖 + 心形
   ═══════════════════════════════════════════════════════ */
.mood-welcoming .fox-emoji { animation: welcome-wave 1s ease-in-out infinite alternate; }
.mood-welcoming .fox-aura {
  position: absolute; inset: -14px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,154,108,0.2) 0%, rgba(255,107,107,0.08) 50%, transparent 70%);
  animation: warm-pulse 2s ease-in-out infinite;
}
.mood-welcoming .heart {
  position: absolute; font-size: 12px; z-index: 3;
  animation: heart-float 2s ease-out infinite;
}
.mood-welcoming .heart:nth-child(3) { right: -8px; top: 10px; animation-delay: 0s; }
.mood-welcoming .heart:nth-child(4) { left: -6px; top: 5px; animation-delay: 0.7s; font-size: 10px; }
.mood-welcoming .heart:nth-child(5) { right: 0; top: -4px; animation-delay: 1.3s; font-size: 9px; }
@keyframes welcome-wave { 0% { transform: rotate(-5deg); } 100% { transform: rotate(5deg); } }
@keyframes warm-pulse { 0%,100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.15); } }
@keyframes heart-float {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  20% { opacity: 1; transform: translateY(-5px) scale(1); }
  100% { opacity: 0; transform: translateY(-30px) scale(0.6); }
}

/* ═══════════════════════════════════════════════════════
   9. LEGEND — 终极光效
   ═══════════════════════════════════════════════════════ */
.mood-legend .fox-emoji {
  animation: legend-hover 2s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(255,215,0,0.4)) drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}
.mood-legend .fox-aura {
  position: absolute; inset: -20px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,215,0,0.2), rgba(255,165,0,0.15), rgba(139,108,246,0.15), rgba(255,215,0,0.2));
  animation: rainbow-spin 4s linear infinite; filter: blur(10px);
}
.mood-legend .fox-ring {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(255,215,0,0.35);
  animation: ring-expand 2s ease-out infinite;
}
.mood-legend .fox-ring-2 {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid rgba(255,215,0,0.2);
  animation: ring-expand 2s ease-out infinite 1s;
}
.mood-legend .sparkle {
  position: absolute; width: 4px; height: 4px; background: #FFD700; border-radius: 50%; z-index: 3;
  animation: sparkle-orbit 3s linear infinite;
}
.mood-legend .sparkle:nth-child(5) { animation-delay: 0s; }
.mood-legend .sparkle:nth-child(6) { animation-delay: -1s; width: 3px; height: 3px; }
.mood-legend .sparkle:nth-child(7) { animation-delay: -2s; width: 3px; height: 3px; background: #8B6CF6; }
@keyframes legend-hover { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes sparkle-orbit {
  0% { transform: rotate(0deg) translateX(44px) rotate(0deg); opacity: 0.3; }
  25% { opacity: 1; } 50% { opacity: 0.3; } 75% { opacity: 1; }
  100% { transform: rotate(360deg) translateX(44px) rotate(-360deg); opacity: 0.3; }
}

/* ═══════════════════════════════════════════════════════
   10. THINKING — 思考气泡
   ═══════════════════════════════════════════════════════ */
.mood-thinking .fox-emoji { animation: think-tilt 3s ease-in-out infinite; }
.mood-thinking .fox-aura {
  position: absolute; inset: -8px; border-radius: 50%;
  background: radial-gradient(circle, rgba(79,143,255,0.1) 0%, transparent 70%);
  animation: breathe 3s ease-in-out infinite;
}
.mood-thinking .thought-dot {
  position: absolute; background: rgba(255,255,255,0.25); border-radius: 50%; z-index: 3;
  animation: thought-pop 2s ease-in-out infinite;
}
.mood-thinking .thought-dot:nth-child(3) { width: 5px; height: 5px; right: -2px; top: 20px; animation-delay: 0s; }
.mood-thinking .thought-dot:nth-child(4) { width: 7px; height: 7px; right: -10px; top: 10px; animation-delay: 0.3s; }
.mood-thinking .thought-dot:nth-child(5) { width: 10px; height: 10px; right: -16px; top: -2px; animation-delay: 0.6s; }
@keyframes think-tilt { 0%,100% { transform: rotate(0); } 30% { transform: rotate(6deg); } 70% { transform: rotate(-2deg); } }
@keyframes thought-pop { 0%,100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 0.6; transform: scale(1); } }

/* ═══════════════════════════════════════════════════════
   11. SURPRISED — 震动闪光
   ═══════════════════════════════════════════════════════ */
.mood-surprised .fox-emoji { animation: surprise-shake 0.3s ease-in-out infinite; font-size: 48px; }
.mood-surprised .fox-aura {
  position: absolute; inset: -18px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%);
  animation: flash-loop 2s ease-out infinite;
}
.mood-surprised .bang {
  position: absolute; top: -8px; right: -4px; font-size: 16px; font-weight: 900; color: #FFD700; z-index: 3;
  animation: bang-pop 1.5s ease-out infinite;
}
@keyframes surprise-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes flash-loop { 0% { opacity: 0.8; transform: scale(0.8); } 30% { opacity: 0; transform: scale(1.8); } 100% { opacity: 0; } }
@keyframes bang-pop { 0%,100% { opacity: 0; transform: scale(0.5); } 15% { opacity: 1; transform: scale(1.2); } 30%,70% { opacity: 1; transform: scale(1); } }

/* ═══════════════════════════════════════════════════════
   12. HOPEFUL — 紫色柔光 + 星尘
   ═══════════════════════════════════════════════════════ */
.mood-hopeful .fox-emoji { animation: hopeful-lift 3s ease-in-out infinite; }
.mood-hopeful .fox-aura {
  position: absolute; inset: -12px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,108,246,0.18) 0%, rgba(79,143,255,0.08) 50%, transparent 70%);
  animation: hopeful-glow 3s ease-in-out infinite;
}
.mood-hopeful .stardust {
  position: absolute; width: 2px; height: 2px; background: #c4b5fd; border-radius: 50%; z-index: 3;
  animation: stardust-rise 3s ease-out infinite;
}
.mood-hopeful .stardust:nth-child(3) { left: 15px; bottom: 10px; animation-delay: 0s; }
.mood-hopeful .stardust:nth-child(4) { left: 55px; bottom: 5px; animation-delay: 0.8s; width: 3px; height: 3px; }
.mood-hopeful .stardust:nth-child(5) { left: 35px; bottom: 15px; animation-delay: 1.5s; }
.mood-hopeful .stardust:nth-child(6) { left: 65px; bottom: 8px; animation-delay: 2.1s; }
@keyframes hopeful-lift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes hopeful-glow { 0%,100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.1); } }
@keyframes stardust-rise {
  0% { opacity: 0; transform: translateY(0); }
  20% { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(-40px) translateX(5px); }
}

/* ═══════════════════════════════════════════════════════
   13. REMINDER — 橙色提醒
   ═══════════════════════════════════════════════════════ */
.mood-reminder .fox-emoji { animation: reminder-nudge 2s ease-in-out infinite; }
.mood-reminder .fox-aura {
  position: absolute; inset: -8px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,165,0,0.15) 0%, transparent 70%);
  animation: reminder-blink 1.5s ease-in-out infinite;
}
.mood-reminder .ping {
  position: absolute; top: -4px; right: -4px; width: 10px; height: 10px;
  background: #FF6B35; border-radius: 50%; z-index: 3;
  animation: ping-dot 1.5s ease-in-out infinite;
}
.mood-reminder .ping::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(255,107,53,0.4); animation: ring-expand 1.5s ease-out infinite;
}
@keyframes reminder-nudge { 0%,100% { transform: rotate(0); } 10% { transform: rotate(8deg); } 20% { transform: rotate(-6deg); } 30% { transform: rotate(4deg); } 40%,100% { transform: rotate(0); } }
@keyframes reminder-blink { 0%,100% { opacity: 0.3; } 50% { opacity: 0.7; } }
@keyframes ping-dot { 0%,100% { transform: scale(1); } 50% { transform: scale(1.2); } }

/* ═══════════════════════════════════════════════════════
   14. ENCOURAGING — 绿色温暖光 + 竖大拇指
   ═══════════════════════════════════════════════════════ */
.mood-encouraging .fox-emoji { animation: encourage-nod 1.5s ease-in-out infinite; }
.mood-encouraging .fox-aura {
  position: absolute; inset: -10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(107,203,119,0.2) 0%, rgba(76,175,80,0.05) 60%, transparent 70%);
  animation: encourage-glow 2s ease-in-out infinite;
}
.mood-encouraging .thumbs {
  position: absolute; top: -6px; right: -8px; font-size: 16px; z-index: 3;
  animation: thumbs-pop 2s ease-out infinite;
}
@keyframes encourage-nod { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-3px); } 60% { transform: translateY(1px); } }
@keyframes encourage-glow { 0%,100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.1); } }
@keyframes thumbs-pop {
  0% { opacity: 0; transform: scale(0.3) rotate(-20deg); }
  20% { opacity: 1; transform: scale(1.1) rotate(5deg); }
  35% { transform: scale(1) rotate(0); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* ═══════════════════════════════════════════════════════
   15. CURIOUS — 歪头 + 问号光点
   ═══════════════════════════════════════════════════════ */
.mood-curious .fox-emoji { animation: curious-tilt 2.5s ease-in-out infinite; }
.mood-curious .fox-aura {
  position: absolute; inset: -8px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,215,0,0.1) 0%, transparent 70%);
  animation: breathe 3s ease-in-out infinite;
}
.mood-curious .q-mark {
  position: absolute; top: -6px; right: -6px; font-size: 18px; font-weight: 800;
  color: rgba(255,215,0,0.7); z-index: 3;
  animation: q-bob 2s ease-in-out infinite;
}
.mood-curious .sparkle-small {
  position: absolute; width: 3px; height: 3px; background: rgba(255,215,0,0.5); border-radius: 50%; z-index: 3;
}
.mood-curious .sparkle-small:nth-child(4) { top: 8px; left: -4px; animation: twinkle 1.5s ease infinite; }
.mood-curious .sparkle-small:nth-child(5) { bottom: 12px; right: -6px; animation: twinkle 1.5s ease infinite 0.5s; }
@keyframes curious-tilt { 0%,100% { transform: rotate(0); } 40% { transform: rotate(12deg); } 70% { transform: rotate(-3deg); } }
@keyframes q-bob { 0%,100% { transform: translateY(0) rotate(0); opacity: 0.5; } 50% { transform: translateY(-4px) rotate(10deg); opacity: 1; } }
@keyframes twinkle { 0%,100% { opacity: 0.2; transform: scale(0.6); } 50% { opacity: 0.8; transform: scale(1.2); } }

/* ═══════════════════════════════════════════════════════
   16. PLAYFUL — 跳跃旋转 + 彩色火花
   ═══════════════════════════════════════════════════════ */
.mood-playful .fox-emoji { animation: playful-jump 1.2s cubic-bezier(0.34,1.56,0.64,1) infinite; }
.mood-playful .fox-aura {
  position: absolute; inset: -10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,107,0.12) 0%, rgba(255,215,0,0.08) 50%, transparent 70%);
}
.mood-playful .confetti {
  position: absolute; width: 4px; height: 4px; border-radius: 1px; z-index: 3;
  animation: confetti-burst 1.8s ease-out infinite;
}
.mood-playful .confetti:nth-child(3) { background: #ff6b6b; top: 20px; left: 10px; animation-delay: 0s; }
.mood-playful .confetti:nth-child(4) { background: #ffd93d; top: 15px; right: 8px; animation-delay: 0.3s; width: 3px; height: 6px; }
.mood-playful .confetti:nth-child(5) { background: #6bcb77; top: 25px; left: 60px; animation-delay: 0.6s; }
.mood-playful .confetti:nth-child(6) { background: #4d96ff; top: 10px; left: 35px; animation-delay: 0.9s; width: 5px; height: 3px; }
.mood-playful .confetti:nth-child(7) { background: #9b59b6; top: 18px; right: 20px; animation-delay: 1.2s; }
@keyframes playful-jump {
  0%, 100% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(-10px) rotate(-8deg); }
  50% { transform: translateY(-12px) rotate(5deg); }
  70% { transform: translateY(-4px) rotate(-2deg); }
}
@keyframes confetti-burst {
  0% { opacity: 0; transform: translateY(0) rotate(0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-35px) translateX(var(--dx, 10px)) rotate(180deg); }
}
.mood-playful .confetti:nth-child(3) { --dx: -15px; }
.mood-playful .confetti:nth-child(4) { --dx: 12px; }
.mood-playful .confetti:nth-child(5) { --dx: -8px; }
.mood-playful .confetti:nth-child(6) { --dx: 5px; }
.mood-playful .confetti:nth-child(7) { --dx: -20px; }

/* ═══════════════════════════════════════════════════════
   17. COMBO / HYPER — 火焰光效 + 连击感
   ═══════════════════════════════════════════════════════ */
.mood-combo .fox-emoji {
  animation: combo-pulse 0.3s ease infinite alternate;
  filter: drop-shadow(0 0 8px rgba(255,96,17,0.5)) drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}
.mood-combo .fox-aura {
  position: absolute; inset: -14px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,96,17,0.3) 0%, rgba(255,50,0,0.1) 50%, transparent 70%);
  animation: fire-flicker 0.4s ease-in-out infinite alternate;
}
.mood-combo .flame {
  position: absolute; bottom: -5px; z-index: 1; font-size: 20px;
  animation: flame-dance 0.5s ease infinite alternate;
}
.mood-combo .flame:nth-child(3) { left: 10px; animation-delay: 0s; font-size: 16px; }
.mood-combo .flame:nth-child(4) { left: 30px; animation-delay: 0.15s; font-size: 22px; }
.mood-combo .flame:nth-child(5) { right: 10px; animation-delay: 0.3s; font-size: 18px; }
@keyframes combo-pulse { 0% { transform: scale(1); } 100% { transform: scale(1.06); } }
@keyframes fire-flicker { 0% { opacity: 0.5; transform: scale(1); } 100% { opacity: 0.9; transform: scale(1.15); } }
@keyframes flame-dance { 0% { transform: translateY(0) scaleX(1); } 100% { transform: translateY(-6px) scaleX(0.85); } }

/* ═══════════════════════════════════════════════════════
   18. SHY — 缩小 + 粉色腮红光
   ═══════════════════════════════════════════════════════ */
.mood-shy .fox-emoji { animation: shy-shrink 2s ease-in-out infinite; }
.mood-shy .fox-aura {
  position: absolute; inset: -8px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,182,193,0.2) 0%, transparent 70%);
  animation: shy-blush 2s ease-in-out infinite;
}
.mood-shy .blush-dot {
  position: absolute; border-radius: 50%; z-index: 3;
  background: rgba(255,105,135,0.35); animation: blush-appear 2s ease-in-out infinite;
}
.mood-shy .blush-dot:nth-child(3) { width: 10px; height: 6px; left: 12px; top: 44px; }
.mood-shy .blush-dot:nth-child(4) { width: 10px; height: 6px; right: 12px; top: 44px; animation-delay: 0.2s; }
@keyframes shy-shrink { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(0.92) rotate(-3deg); } }
@keyframes shy-blush { 0%,100% { opacity: 0.3; } 50% { opacity: 0.7; } }
@keyframes blush-appear { 0%,100% { opacity: 0.2; } 40%,60% { opacity: 0.6; } }

/* ═══════════════════════════════════════════════════════
   19. DETERMINED — 坚定聚焦 + 闪电
   ═══════════════════════════════════════════════════════ */
.mood-determined .fox-emoji { animation: determined-steady 2s ease-in-out infinite; }
.mood-determined .fox-aura {
  position: absolute; inset: -10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,165,0,0.15) 0%, rgba(255,96,17,0.05) 60%, transparent 70%);
  animation: determined-glow 1.5s ease-in-out infinite;
}
.mood-determined .bolt {
  position: absolute; top: -8px; right: -2px; font-size: 18px; z-index: 3;
  animation: bolt-flash 2s ease infinite;
}
.mood-determined .focus-line {
  position: absolute; height: 2px; border-radius: 1px; z-index: 1;
  background: rgba(255,165,0,0.3); animation: speed-line 1.5s ease-out infinite;
}
.mood-determined .focus-line:nth-child(4) { width: 20px; left: -16px; top: 35px; animation-delay: 0s; }
.mood-determined .focus-line:nth-child(5) { width: 15px; left: -12px; top: 48px; animation-delay: 0.4s; }
.mood-determined .focus-line:nth-child(6) { width: 18px; right: -14px; top: 40px; animation-delay: 0.7s; }
@keyframes determined-steady { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes determined-glow { 0%,100% { opacity: 0.3; } 50% { opacity: 0.6; } }
@keyframes bolt-flash { 0%,60%,100% { opacity: 0.3; } 30% { opacity: 1; transform: scale(1.2); } }
@keyframes speed-line { 0% { opacity: 0; transform: translateX(10px); } 30% { opacity: 0.6; } 100% { opacity: 0; transform: translateX(-20px); } }

/* ═══════════════════════════════════════════════════════
   20. GRATEFUL — 暖金光 + 感恩光环
   ═══════════════════════════════════════════════════════ */
.mood-grateful .fox-emoji { animation: grateful-bow 3s ease-in-out infinite; }
.mood-grateful .fox-aura {
  position: absolute; inset: -14px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,215,0,0.15) 0%, rgba(255,183,77,0.08) 50%, transparent 70%);
  animation: grateful-glow 3s ease-in-out infinite;
}
.mood-grateful .sparkle-soft {
  position: absolute; font-size: 10px; z-index: 3;
  animation: soft-float 3s ease-in-out infinite;
}
.mood-grateful .sparkle-soft:nth-child(3) { top: -4px; left: 8px; animation-delay: 0s; }
.mood-grateful .sparkle-soft:nth-child(4) { top: 2px; right: 4px; animation-delay: 1s; }
.mood-grateful .sparkle-soft:nth-child(5) { bottom: 8px; left: 4px; animation-delay: 2s; }
@keyframes grateful-bow { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(2px) rotate(3deg); } }
@keyframes grateful-glow { 0%,100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.08); } }
@keyframes soft-float {
  0%,100% { opacity: 0.2; transform: translateY(0); }
  50% { opacity: 0.7; transform: translateY(-6px); }
}

/* ═══════════════════════════════════════════════════════
   21. MISCHIEVOUS — 调皮抖动 + 捣蛋星
   ═══════════════════════════════════════════════════════ */
.mood-mischievous .fox-emoji { animation: mischief-wiggle 1s ease-in-out infinite; }
.mood-mischievous .fox-aura {
  position: absolute; inset: -8px; border-radius: 50%;
  background: radial-gradient(circle, rgba(155,89,182,0.15) 0%, transparent 70%);
  animation: breathe 2s ease-in-out infinite;
}
.mood-mischievous .sweat {
  position: absolute; top: 6px; left: 2px; font-size: 10px; z-index: 3;
  animation: sweat-drop 2s ease infinite;
}
.mood-mischievous .hehe {
  position: absolute; bottom: -2px; right: -10px; font-size: 9px; z-index: 3;
  color: rgba(155,89,182,0.7); font-weight: 600; font-style: italic;
  animation: hehe-fade 2.5s ease infinite;
}
@keyframes mischief-wiggle {
  0%,100% { transform: rotate(0); }
  15% { transform: rotate(-10deg) translateX(-2px); }
  30% { transform: rotate(8deg) translateX(2px); }
  45% { transform: rotate(-5deg); }
  60%,100% { transform: rotate(0); }
}
@keyframes sweat-drop { 0%,100% { opacity: 0; } 40%,60% { opacity: 0.7; } }
@keyframes hehe-fade { 0%,100% { opacity: 0; } 50% { opacity: 0.8; } }

/* ═══════════════════════════════════════════════════════
   22. ZEN — 冥想光环 + 呼吸同步
   ═══════════════════════════════════════════════════════ */
.mood-zen .fox-emoji { animation: zen-breathe 5s ease-in-out infinite; }
.mood-zen .fox-aura {
  position: absolute; inset: -16px; border-radius: 50%;
  background: radial-gradient(circle, rgba(100,200,180,0.12) 0%, rgba(139,108,246,0.06) 50%, transparent 70%);
  animation: zen-expand 5s ease-in-out infinite;
}
.mood-zen .zen-ring {
  position: absolute; inset: -10px; border-radius: 50%;
  border: 1px solid rgba(100,200,180,0.15);
  animation: zen-expand 5s ease-in-out infinite;
}
.mood-zen .zen-ring-2 {
  position: absolute; inset: -18px; border-radius: 50%;
  border: 1px solid rgba(100,200,180,0.08);
  animation: zen-expand 5s ease-in-out infinite 0.5s;
}
@keyframes zen-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes zen-expand { 0%,100% { transform: scale(0.95); opacity: 0.3; } 50% { transform: scale(1.1); opacity: 0.6; } }

/* ═══════════════════════════════════════════════════════
   23. NOSTALGIC — 复古暖色 + 胶片感
   ═══════════════════════════════════════════════════════ */
.mood-nostalgic .fox-emoji {
  animation: nostalgic-sway 4s ease-in-out infinite;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)) sepia(0.3) brightness(0.95);
}
.mood-nostalgic .fox-aura {
  position: absolute; inset: -12px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,183,77,0.15) 0%, rgba(188,143,96,0.08) 50%, transparent 70%);
  animation: nostalgic-glow 4s ease-in-out infinite;
}
.mood-nostalgic .note {
  position: absolute; font-size: 12px; z-index: 3;
  animation: note-drift 4s ease-in-out infinite;
}
.mood-nostalgic .note:nth-child(3) { right: -8px; top: 8px; animation-delay: 0s; }
.mood-nostalgic .note:nth-child(4) { left: -6px; top: 15px; animation-delay: 1.5s; font-size: 10px; }
@keyframes nostalgic-sway { 0%,100% { transform: rotate(0); } 50% { transform: rotate(2deg); } }
@keyframes nostalgic-glow { 0%,100% { opacity: 0.3; } 50% { opacity: 0.5; } }
@keyframes note-drift {
  0%,100% { opacity: 0; transform: translateY(0) rotate(0); }
  30% { opacity: 0.5; }
  70% { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(-25px) translateX(8px) rotate(15deg); }
}

/* ═══════════════════════════════════════════════════════
   24. FRUSTRATED — 红色抖动 + 冒烟
   ═══════════════════════════════════════════════════════ */
.mood-frustrated .fox-emoji { animation: frustrated-shake 0.15s ease-in-out infinite; }
.mood-frustrated .fox-aura {
  position: absolute; inset: -10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,50,50,0.15) 0%, transparent 70%);
  animation: frustrated-glow 1s ease-in-out infinite;
}
.mood-frustrated .steam {
  position: absolute; font-size: 14px; z-index: 3; opacity: 0.5;
  animation: steam-rise 2s ease-out infinite;
}
.mood-frustrated .steam:nth-child(3) { top: -2px; left: 10px; animation-delay: 0s; }
.mood-frustrated .steam:nth-child(4) { top: -4px; right: 10px; animation-delay: 0.5s; }
@keyframes frustrated-shake { 0%,100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
@keyframes frustrated-glow { 0%,100% { opacity: 0.3; } 50% { opacity: 0.6; } }
@keyframes steam-rise {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  30% { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-20px) scale(1.2); }
}

/* ═══════════════════════════════════════════════════════
   25. AMAZED — 光芒四射 + 放大瞳孔感
   ═══════════════════════════════════════════════════════ */
.mood-amazed .fox-emoji {
  animation: amazed-grow 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(139,108,246,0.3));
}
.mood-amazed .fox-aura {
  position: absolute; inset: -18px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,108,246,0.2) 0%, rgba(79,143,255,0.1) 40%, transparent 70%);
  animation: amazed-burst 2s ease-in-out infinite;
}
.mood-amazed .ray {
  position: absolute; top: 50%; left: 50%; width: 2px; height: 20px; border-radius: 1px;
  background: linear-gradient(to top, transparent, rgba(139,108,246,0.4)); z-index: 1;
  transform-origin: bottom center; animation: ray-spin 3s linear infinite;
}
.mood-amazed .ray:nth-child(3) { transform: rotate(0deg) translateY(-30px); }
.mood-amazed .ray:nth-child(4) { transform: rotate(45deg) translateY(-30px); }
.mood-amazed .ray:nth-child(5) { transform: rotate(90deg) translateY(-30px); }
.mood-amazed .ray:nth-child(6) { transform: rotate(135deg) translateY(-30px); }
.mood-amazed .ray:nth-child(7) { transform: rotate(180deg) translateY(-30px); }
.mood-amazed .ray:nth-child(8) { transform: rotate(225deg) translateY(-30px); }
.mood-amazed .ray:nth-child(9) { transform: rotate(270deg) translateY(-30px); }
.mood-amazed .ray:nth-child(10) { transform: rotate(315deg) translateY(-30px); }
@keyframes amazed-grow { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes amazed-burst { 0%,100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.15); } }
@keyframes ray-spin { to { transform: rotate(calc(var(--base-angle, 0deg) + 360deg)) translateY(-30px); } }

/* ═══════════════════════════════════════════════════════
   Fox V3 — Emoji 粒子尺寸约束（Android 兼容）
   ═══════════════════════════════════════════════════════ */
.fox-wrap .flame,
.fox-wrap .heart,
.fox-wrap .note,
.fox-wrap .thumbs,
.fox-wrap .bang {
  font-size: 14px;
  line-height: 1;
  display: inline-block;
  width: 18px;
  height: 18px;
  overflow: hidden;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════
   Fox Mood — 移动端降级 & prefers-reduced-motion
   ═══════════════════════════════════════════════════════ */

/* 无障碍：关闭所有动画，保留静态光晕 */
@media (prefers-reduced-motion: reduce) {
  .fox-wrap *,
  .fox-wrap .fox-emoji,
  .fox-wrap .fox-aura,
  .fox-wrap .fox-ring,
  .fox-wrap .fox-ring-2 {
    animation: none !important;
    transition: none !important;
  }
}

/* 移动端：隐藏超量粒子，减少动画负担 */
@media (max-width: 480px) {
  .fox-wrap .rain:nth-child(5),
  .fox-wrap .stardust:nth-child(5),
  .fox-wrap .stardust:nth-child(6),
  .fox-wrap .confetti:nth-child(5),
  .fox-wrap .confetti:nth-child(6),
  .fox-wrap .ray:nth-child(7),
  .fox-wrap .ray:nth-child(8) { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   Celebration Overlay
   ══════════════════════════════════════════════════════════════════ */
.celebration-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7);
  will-change: opacity;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
/* PC: backdrop-filter */
@media (min-width: 769px) and (hover: hover) {
  .celebration-overlay { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: rgba(0,0,0,0.5); }
}
/* 平板 + 手机: 不用 backdrop-filter（性能） */
@media (max-width: 768px) {
  .celebration-overlay { backdrop-filter: none; }
}

/* 光晕脉冲 */
.celeb-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, var(--celeb-glow-color, rgba(255,200,0,0.3)) 0%, transparent 70%);
  animation: celeb-glow-pulse 1.5s ease-in-out;
}
@keyframes celeb-glow-pulse {
  0% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0.6; transform: scale(1); }
}

/* 等级主题色 */
.celeb-S { --celeb-glow-color: rgba(255,200,0,0.35); --celeb-particle-colors: #FFD700,#FFA500,#FFEC8B; }
.celeb-A { --celeb-glow-color: rgba(100,200,100,0.25); --celeb-particle-colors: #4CAF50,#42A5F5,#AB47BC; }
.celeb-B { --celeb-glow-color: rgba(100,140,255,0.2); --celeb-particle-colors: #42A5F5,#7E57C2; }
.celeb-C { --celeb-glow-color: rgba(180,140,255,0.15); --celeb-particle-colors: #CE93D8,#E0E0E0; }

/* 中心布局 */
.celeb-center { display: flex; flex-direction: column; align-items: center; z-index: 1; }

/* 狐狸主角 */
.celeb-fox {
  font-size: 100px; line-height: 1;
  animation: celeb-fox-enter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 0 20px var(--celeb-glow-color, rgba(255,200,0,0.4)));
}
/* S 级弹跳 */
.celeb-S .celeb-fox { animation: celeb-fox-enter 0.6s cubic-bezier(0.34,1.56,0.64,1), celeb-fox-bounce 0.4s 0.6s ease; }
@keyframes celeb-fox-enter { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes celeb-fox-bounce { 0%,100% { transform: scale(1); } 50% { transform: scale(1.2); } }

/* 等级徽章 */
.celeb-grade-badge {
  font-size: 48px; font-weight: 900; margin-top: 8px;
  background: linear-gradient(135deg, var(--celeb-glow-color), #fff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  animation: celeb-badge-in 0.5s 0.2s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes celeb-badge-in { from { transform: translateY(-30px) scale(0.5); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

/* 分数 */
.celeb-score { font-size: 36px; font-weight: 800; color: #fff; margin-top: 4px;
  animation: celeb-fade-in 0.4s 0.3s both; }
.celeb-score-pct { font-size: 20px; opacity: 0.8; }

/* meta（轮次/词数等） */
.celeb-meta { font-size: 14px; color: rgba(255,255,255,0.7); margin-top: 4px;
  animation: celeb-fade-in 0.4s 0.35s both; }

/* Talk summary loading in celebration */
.celeb-talk-loading {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 8px 0; animation: celeb-fade-in 0.4s 0.2s both;
}
.celeb-talk-spinner {
  width: 32px; height: 32px; border: 3px solid rgba(255,255,255,0.2);
  border-top-color: rgba(255,255,255,0.8); border-radius: 50%;
  animation: celebSpinnerRotate 0.8s linear infinite;
}
@keyframes celebSpinnerRotate { to { transform: rotate(360deg); } }
.celeb-talk-loading-text {
  font-size: 0.82rem; color: rgba(255,255,255,0.7); font-weight: 600;
}

/* 话术气泡 */
.celeb-msg {
  margin-top: 16px; padding: 10px 20px;
  background: rgba(255,255,255,0.15); border-radius: 20px;
  color: #fff; font-size: 16px; max-width: 300px; text-align: center;
  animation: celeb-fade-in 0.5s 0.4s both;
}
@keyframes celeb-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* 跳过提示 */
.celeb-skip {
  position: absolute; bottom: 40px; color: rgba(255,255,255,0.4); font-size: 12px;
  animation: celeb-fade-in 0.3s 1s both;
}

/* S 级屏幕微震 */
.celeb-S { animation: celeb-shake 0.4s 0.3s ease; }
@keyframes celeb-shake {
  0%,100% { transform: translate(0); }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(2px, -1px); }
  75% { transform: translate(-1px, 2px); }
}

/* 粒子 */
.celeb-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.celeb-particle {
  position: absolute; left: 50%; top: 45%;
  animation: celeb-particle-fly 0.9s ease-out forwards;
  will-change: transform, opacity;
}
@keyframes celeb-particle-fly {
  0% { transform: translate(0,0) scale(0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(var(--s,1)) rotate(var(--rot,180deg)); opacity: 0; }
}

/* Vue transition */
.celeb-enter-active { transition: opacity 0.3s ease; }
.celeb-leave-active { transition: opacity 0.4s ease; pointer-events: none; }
.celeb-enter, .celeb-leave-to { opacity: 0; }

/* 手机 (≤480px) */
@media (max-width: 480px) {
  .celeb-fox { font-size: 80px; }
  .celeb-grade-badge { font-size: 36px; }
  .celeb-score { font-size: 28px; }
  .celeb-msg { font-size: 14px; max-width: 260px; padding: 8px 16px; }
}

/* reduced-motion: 关闭粒子+震动，只保留 fade */
@media (prefers-reduced-motion: reduce) {
  .celeb-glow, .celeb-fox, .celeb-grade-badge, .celeb-score, .celeb-msg,
  .celeb-meta, .celeb-skip { animation: none !important; }
  .celeb-particle { display: none; }
  .celeb-S { animation: none !important; }
  .celebration-overlay { transition: opacity 0.3s; }
}

/* ── Shadow 对比播放器 ─────────────────────────────────────────── */
.shadow-compare-player {
  margin: 12px 0 8px;
  padding: 12px;
  background: rgba(0,0,0,0.04);
  border-radius: 14px;
}
.shadow-cmp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.shadow-cmp-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 20px;
  border: none;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}
.shadow-cmp-btn:active { transform: scale(0.95); }
.shadow-cmp-btn--std {
  background: rgba(0,122,255,0.1);
  color: #007AFF;
}
.shadow-cmp-btn--std.playing {
  background: rgba(0,122,255,0.2);
}
.shadow-cmp-btn--user {
  background: rgba(255,149,0,0.12);
  color: #FF9500;
}
.shadow-cmp-btn--user.playing {
  background: rgba(255,149,0,0.25);
  animation: pulse-record 1s ease-in-out infinite;
}
@keyframes pulse-record { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
.shadow-cmp-vs {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-tertiary, #999);
  letter-spacing: 0.05em;
}

/* Shadow card header */
.shadow-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.shadow-card-badge {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.02em;
}
.badge-listen {
  background: rgba(0,122,255,0.1);
  color: #007AFF;
}
.badge-record {
  background: rgba(255,59,48,0.1);
  color: #FF3B30;
}
.shadow-card-type-tag {
  font-size: 0.72rem;
  color: var(--text-tertiary, #999);
  font-weight: 500;
}
[data-theme="dark"] .shadow-compare-player { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .shadow-cmp-btn--std { background: rgba(0,122,255,0.18); }
[data-theme="dark"] .shadow-cmp-btn--user { background: rgba(255,149,0,0.18); }

/* Practice Read Aloud — 合并 card 内联信息 */
.prac-ra-inline-word { font-size: 1.8rem; font-weight: 700; margin: 8px 0 4px; }
.prac-ra-inline-ipa { font-size: 0.9rem; color: var(--muted); margin-bottom: 4px; }
.prac-ra-inline-zh { font-size: 0.85rem; color: var(--text-secondary, #666); }
[data-theme="dark"] .prac-ra-inline-zh { color: var(--text-secondary, #aaa); }

/* Practice Read Aloud — 对比播放器 */
.prac-ra-compare { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 12px 0; }
.prac-ra-cmp-btn { display: inline-flex; align-items: center; gap: 5px; padding: 8px 16px; border-radius: 20px; border: none; font-weight: 600; font-size: 0.82rem; cursor: pointer; }
.prac-ra-cmp-btn.std { background: rgba(0,122,255,0.1); color: #007AFF; }
.prac-ra-cmp-btn.user { background: rgba(255,149,0,0.12); color: #FF9500; }
.prac-ra-cmp-btn.playing { opacity: 0.7; animation: pulse-record 1s ease-in-out infinite; }
.prac-ra-vs { font-size: 0.72rem; font-weight: 700; color: var(--text-tertiary, #999); letter-spacing: 0.05em; }
[data-theme="dark"] .prac-ra-cmp-btn.std { background: rgba(0,122,255,0.18); }
[data-theme="dark"] .prac-ra-cmp-btn.user { background: rgba(255,149,0,0.18); }

/* V6: Today 页路径完成后推荐 */
.dp-post-rec-wrap { margin-top: 14px; text-align: center; }
.dp-post-rec-label { font-size: 0.75rem; color: var(--muted); margin-bottom: 8px; }
.dp-post-rec-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 14px; border: 1.5px solid rgba(79,143,255,0.3);
  background: rgba(79,143,255,0.07); color: var(--blue, #4F8FFF);
  font-size: 0.88rem; font-weight: 600; cursor: pointer; width: 100%;
  justify-content: center; transition: all 0.2s;
}
.dp-post-rec-btn:active { transform: scale(0.97); background: rgba(79,143,255,0.14); }
[data-theme="dark"] .dp-post-rec-btn { background: rgba(79,143,255,0.1); border-color: rgba(79,143,255,0.25); }

/* ═══════════════════════════════════════════════════════════════════════
   Product Intro (3-slide) — Premium Onboarding Experience
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Overlay with ambient glow ── */
.ob-v2-overlay{position:fixed;inset:0;background:var(--bg);z-index:10000;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 20px 32px;padding-top:calc(20px + env(safe-area-inset-top));padding-bottom:calc(32px + env(safe-area-inset-bottom));overflow-y:auto;animation:ob-fade-in .5s cubic-bezier(.4,0,.2,1)}
.ob-v2-overlay::before{content:'';position:absolute;top:-20%;right:-20%;width:60vw;height:60vw;border-radius:50%;background:radial-gradient(circle,rgba(79,143,247,0.06) 0%,transparent 70%);pointer-events:none;animation:ob-glow-drift 8s ease-in-out infinite alternate}
.ob-v2-overlay::after{content:'';position:absolute;bottom:-10%;left:-15%;width:50vw;height:50vw;border-radius:50%;background:radial-gradient(circle,rgba(43,200,102,0.04) 0%,transparent 70%);pointer-events:none;animation:ob-glow-drift 10s ease-in-out 2s infinite alternate-reverse}
@keyframes ob-fade-in{from{opacity:0}to{opacity:1}}
@keyframes ob-glow-drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(30px,-20px) scale(1.1)}}

/* Skip button */
.ob-intro-skip{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;z-index:10001;background:none;border:1.5px solid transparent;color:var(--muted);font-size:0.82rem;font-weight:600;cursor:pointer;padding:8px 16px;border-radius:99px;transition:all .2s ease;-webkit-tap-highlight-color:transparent}
.ob-intro-skip:hover{background:rgba(0,0,0,0.04);border-color:var(--border)}
.ob-intro-skip:active{transform:scale(0.95)}

/* Slides container */
.ob-intro-slides{flex:1;display:flex;align-items:center;justify-content:center;width:100%;max-width:420px;position:relative}

/* Single slide */
.ob-intro-slide{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;animation:ob-slide-enter .45s cubic-bezier(.4,0,.2,1)}
@keyframes ob-slide-enter{from{opacity:0;transform:translateX(24px) scale(0.98)}to{opacity:1;transform:none}}

/* ── Slide 0: Brand ── */
.ob-intro-brand{display:flex;align-items:center;gap:12px;margin-bottom:4px;animation:ob-brand-pop .6s cubic-bezier(.34,1.56,.64,1) .1s both}
@keyframes ob-brand-pop{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:none}}
.ob-intro-brand-logo{width:52px;height:52px;border-radius:16px;box-shadow:0 4px 20px rgba(79,143,247,0.15)}
.ob-intro-brand-name{font-size:1.35rem;font-weight:800;color:var(--text);letter-spacing:-0.02em}

/* Fox mascot with float + shadow */
.ob-intro-fox{font-size:4.5rem;margin:16px 0;position:relative;animation:ob-fox-float 3s ease-in-out infinite}
.ob-intro-fox::after{content:'';position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:48px;height:8px;border-radius:50%;background:rgba(0,0,0,0.06);filter:blur(4px);animation:ob-fox-shadow 3s ease-in-out infinite}
@keyframes ob-fox-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes ob-fox-shadow{0%,100%{transform:translateX(-50%) scaleX(1);opacity:0.6}50%{transform:translateX(-50%) scaleX(0.7);opacity:0.3}}

/* Typography */
.ob-intro-title{font-size:1.3rem;font-weight:800;color:var(--text);line-height:1.3;letter-spacing:-0.01em}
.ob-intro-desc{font-size:0.88rem;color:var(--muted);line-height:1.65;max-width:320px;animation:ob-text-up .5s cubic-bezier(.4,0,.2,1) .2s both}
@keyframes ob-text-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── Slide 1: Feature cards with staggered entry ── */
.ob-intro-features{display:flex;flex-direction:column;gap:12px;margin:20px 0 4px;width:100%;max-width:340px}
.ob-intro-feat{display:flex;align-items:center;gap:16px;text-align:left;padding:16px 20px;background:var(--surface);border-radius:18px;border:1px solid rgba(0,0,0,0.04);box-shadow:0 2px 12px rgba(0,0,0,0.04),0 0 0 0 rgba(79,143,247,0);transition:all .25s cubic-bezier(.4,0,.2,1);cursor:default}
.ob-intro-feat:nth-child(1){animation:ob-feat-in .4s cubic-bezier(.4,0,.2,1) .05s both}
.ob-intro-feat:nth-child(2){animation:ob-feat-in .4s cubic-bezier(.4,0,.2,1) .15s both}
.ob-intro-feat:nth-child(3){animation:ob-feat-in .4s cubic-bezier(.4,0,.2,1) .25s both}
@keyframes ob-feat-in{from{opacity:0;transform:translateY(16px) scale(0.97)}to{opacity:1;transform:none}}
.ob-intro-feat:active{transform:scale(0.98);box-shadow:0 2px 12px rgba(0,0,0,0.04),0 0 0 3px rgba(79,143,247,0.1)}
.ob-intro-feat-icon{font-size:1.7rem;flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(79,143,247,0.06);border-radius:14px}
.ob-intro-feat-text{font-size:0.88rem;font-weight:600;color:var(--text);line-height:1.45}

/* ── CTA & Next buttons ── */
.ob-intro-cta{width:100%;max-width:320px;padding:16px 24px;border:none;border-radius:16px;background:linear-gradient(135deg,#4f8ff7 0%,#6ca6ff 50%,#88b8ff 100%);background-size:200% auto;color:#fff;font-size:1rem;font-weight:700;cursor:pointer;box-shadow:0 6px 24px rgba(79,143,247,0.3),0 2px 8px rgba(79,143,247,0.15);transition:all .2s cubic-bezier(.4,0,.2,1);-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden;animation:ob-cta-glow 3s ease infinite}
@keyframes ob-cta-glow{0%,100%{box-shadow:0 6px 24px rgba(79,143,247,0.3),0 2px 8px rgba(79,143,247,0.15)}50%{box-shadow:0 6px 32px rgba(79,143,247,0.4),0 2px 12px rgba(79,143,247,0.2)}}
.ob-intro-cta::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);transform:skewX(-25deg);transition:left .6s ease}
.ob-intro-cta:active{transform:scale(0.97);box-shadow:0 3px 12px rgba(79,143,247,0.25)}
.ob-intro-cta:hover::before{left:120%}
.ob-intro-next{margin-top:16px;background:none;border:1.5px solid var(--blue);color:var(--blue);padding:13px 36px;border-radius:14px;font-size:0.92rem;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);-webkit-tap-highlight-color:transparent;min-height:48px}
.ob-intro-next:hover{background:rgba(79,143,247,0.06)}
.ob-intro-next:active{background:var(--blue);color:#fff;transform:scale(0.97)}
/* ── Level selection in onboarding ── */
.ob-level-options{display:flex;flex-direction:column;gap:8px;width:100%;max-width:320px;margin:0 auto}
.ob-level-btn{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;border:1.5px solid rgba(127,127,127,0.2);border-radius:12px;background:rgba(255,255,255,0.05);color:var(--text);font-size:0.88rem;font-weight:500;cursor:pointer;transition:all 0.2s;-webkit-tap-highlight-color:transparent;text-align:left}
.ob-level-btn:hover{border-color:var(--blue);background:rgba(79,143,247,0.05)}
.ob-level-btn.selected{border-color:var(--blue);background:rgba(79,143,247,0.1);box-shadow:0 2px 12px rgba(79,143,247,0.15)}
.ob-level-tag{display:inline-flex;align-items:center;justify-content:center;min-width:36px;padding:4px 8px;border-radius:8px;background:var(--blue);color:#fff;font-size:0.78rem;font-weight:700;letter-spacing:0.02em}
.ob-level-name{font-size:0.85rem}
[data-theme="dark"] .ob-level-btn{border-color:rgba(255,255,255,0.1);background:rgba(255,255,255,0.03)}
[data-theme="dark"] .ob-level-btn:hover{background:rgba(79,143,247,0.08)}
[data-theme="dark"] .ob-level-btn.selected{background:rgba(79,143,247,0.15);border-color:var(--blue)}
.ob-intro-test-link{margin-top:12px;background:none;border:none;color:var(--muted);font-size:0.82rem;font-weight:500;cursor:pointer;padding:10px 16px;border-radius:8px;transition:all .2s;position:relative;-webkit-tap-highlight-color:transparent}
.ob-intro-test-link::after{content:'';position:absolute;bottom:6px;left:16px;right:16px;height:1px;background:var(--muted);opacity:0.3;transition:opacity .2s}
.ob-intro-test-link:hover{color:var(--blue)}
.ob-intro-test-link:hover::after{background:var(--blue);opacity:0.4}
.ob-intro-test-link:active{transform:scale(0.97)}

/* Dot indicators */
.ob-intro-dots{display:flex;gap:8px;padding:28px 0 16px}
.ob-intro-dot{width:8px;height:8px;border-radius:50%;background:var(--border);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-tap-highlight-color:transparent}
.ob-intro-dot.active{background:var(--blue);width:24px;border-radius:4px;box-shadow:0 0 8px rgba(79,143,247,0.3)}
.ob-intro-dot:active{transform:scale(0.85)}

/* ── Dark mode: Intro ── */
[data-theme="dark"] .ob-v2-overlay::before{background:radial-gradient(circle,rgba(79,143,247,0.04) 0%,transparent 70%)}
[data-theme="dark"] .ob-v2-overlay::after{background:radial-gradient(circle,rgba(43,200,102,0.02) 0%,transparent 70%)}
[data-theme="dark"] .ob-intro-skip:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.1)}
[data-theme="dark"] .ob-intro-brand-logo{box-shadow:0 4px 20px rgba(0,0,0,0.3)}
[data-theme="dark"] .ob-intro-fox::after{background:rgba(255,255,255,0.03)}
[data-theme="dark"] .ob-intro-feat{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.06);box-shadow:0 2px 12px rgba(0,0,0,0.15)}
[data-theme="dark"] .ob-intro-feat:active{box-shadow:0 2px 12px rgba(0,0,0,0.15),0 0 0 3px rgba(79,143,247,0.15)}
[data-theme="dark"] .ob-intro-feat-icon{background:rgba(79,143,247,0.1)}
[data-theme="dark"] .ob-intro-next{border-color:rgba(79,143,247,0.5);color:rgba(79,143,247,0.9)}
[data-theme="dark"] .ob-intro-next:hover{background:rgba(79,143,247,0.08)}
[data-theme="dark"] .ob-intro-next:active{background:rgba(79,143,247,0.8);color:#fff}
[data-theme="dark"] .ob-intro-cta{box-shadow:0 6px 24px rgba(79,143,247,0.2),0 2px 8px rgba(0,0,0,0.2)}
[data-theme="dark"] .ob-intro-test-link::after{background:rgba(255,255,255,0.2)}
[data-theme="dark"] .ob-intro-dot.active{box-shadow:0 0 8px rgba(79,143,247,0.2)}

/* ═══════════════════════════════════════════════════════════════════════
   Placement Test — Premium Quiz Experience
   ═══════════════════════════════════════════════════════════════════════ */

/* Overlay */
.pt-overlay{position:fixed;inset:0;background:var(--bg);z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;padding-top:calc(20px + env(safe-area-inset-top));padding-bottom:calc(20px + env(safe-area-inset-bottom));overflow-y:auto;animation:ob-fade-in .35s cubic-bezier(.4,0,.2,1)}
.pt-close{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;z-index:10001;width:40px;height:40px;border-radius:50%;border:none;background:rgba(0,0,0,0.05);color:var(--muted);font-size:1.05rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;-webkit-tap-highlight-color:transparent}
.pt-close:hover{background:rgba(0,0,0,0.1);transform:rotate(90deg)}
.pt-close:active{transform:rotate(90deg) scale(0.9)}

/* Intro phase */
.pt-intro{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;max-width:360px;animation:ob-slide-enter .4s cubic-bezier(.4,0,.2,1)}
.pt-intro-fox{font-size:3.8rem;margin-bottom:4px;animation:ob-fox-float 3s ease-in-out infinite}
.pt-intro-title{font-size:1.35rem;font-weight:800;color:var(--text);letter-spacing:-0.01em}
.pt-intro-desc{font-size:0.88rem;color:var(--muted);line-height:1.6}
.pt-intro-info{display:inline-flex;align-items:center;gap:6px;font-size:0.78rem;color:var(--muted);opacity:0.7;margin-top:4px;padding:6px 14px;border-radius:99px;background:rgba(0,0,0,0.03)}
.pt-start-btn{width:100%;max-width:300px;padding:16px 24px;border:none;border-radius:16px;background:linear-gradient(135deg,#4f8ff7 0%,#6ca6ff 50%,#88b8ff 100%);background-size:200% auto;color:#fff;font-size:1rem;font-weight:700;cursor:pointer;box-shadow:0 6px 24px rgba(79,143,247,0.3),0 2px 8px rgba(79,143,247,0.15);margin-top:20px;transition:all .2s ease;-webkit-tap-highlight-color:transparent;min-height:52px}
.pt-start-btn:active{transform:scale(0.97);box-shadow:0 3px 12px rgba(79,143,247,0.25)}

/* Loading spinner */
.pt-loading-spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;margin-top:24px}

/* Testing phase — Quiz */
.pt-quiz{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:420px;animation:ob-slide-enter .35s cubic-bezier(.4,0,.2,1)}
.pt-progress-wrap{width:100%;display:flex;align-items:center;gap:10px}
.pt-progress-bar{flex:1;height:6px;background:var(--border);border-radius:99px;overflow:hidden;position:relative}
.pt-progress-fill{height:100%;background:linear-gradient(90deg,#4f8ff7,#6ca6ff);border-radius:99px;transition:width .4s cubic-bezier(.4,0,.2,1);position:relative}
.pt-progress-fill::after{content:'';position:absolute;right:0;top:-1px;width:12px;height:8px;border-radius:99px;background:rgba(255,255,255,0.5);filter:blur(2px)}
.pt-progress-count{font-size:0.72rem;font-weight:700;color:var(--muted);white-space:nowrap;letter-spacing:0.02em}
.pt-level-tag{font-size:0.7rem;font-weight:700;color:var(--blue);background:rgba(79,143,247,0.08);padding:4px 14px;border-radius:99px;margin-top:4px;letter-spacing:0.04em;animation:ob-tag-pop .25s cubic-bezier(.34,1.56,.64,1)}
@keyframes ob-tag-pop{from{opacity:0;transform:scale(0.7)}to{opacity:1;transform:none}}
.pt-word{font-size:2.2rem;font-weight:800;color:var(--text);margin:8px 0 2px;letter-spacing:-0.02em;animation:pt-word-in .3s cubic-bezier(.4,0,.2,1)}
@keyframes pt-word-in{from{opacity:0;transform:translateY(8px) scale(0.97)}to{opacity:1;transform:none}}
.pt-ipa{font-size:0.82rem;color:var(--muted);font-family:serif;margin-bottom:2px}
.pt-prompt{font-size:0.78rem;color:var(--muted);margin-bottom:4px;font-weight:500}
.pt-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.pt-opt{padding:16px 12px;border:1.5px solid var(--border);border-radius:16px;background:var(--surface);font-size:0.88rem;font-weight:600;color:var(--text);cursor:pointer;min-height:52px;transition:all .2s cubic-bezier(.4,0,.2,1);-webkit-tap-highlight-color:transparent;text-align:center;line-height:1.35;position:relative;overflow:hidden}
.pt-opt:hover{border-color:rgba(79,143,247,0.25);background:rgba(79,143,247,0.03)}
.pt-opt:active{transform:scale(0.96)}
.pt-opt.correct{border-color:var(--green);background:rgba(43,200,102,0.1);color:var(--green);animation:pt-opt-correct .35s cubic-bezier(.4,0,.2,1)}
@keyframes pt-opt-correct{0%{transform:scale(0.96)}40%{transform:scale(1.03)}100%{transform:none}}
.pt-opt.wrong{border-color:var(--red);background:rgba(240,80,80,0.1);color:var(--red);animation:pt-opt-wrong .4s ease}
@keyframes pt-opt-wrong{0%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}100%{transform:none}}
.pt-opt.dimmed{opacity:0.35}
.pt-opt:disabled{cursor:default}

/* Result phase — celebration */
.pt-result{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;max-width:360px;animation:ob-slide-enter .4s cubic-bezier(.4,0,.2,1)}
.pt-result-fox{font-size:3.2rem;margin-bottom:4px;animation:pt-result-pop .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes pt-result-pop{from{opacity:0;transform:scale(0.5) rotate(-10deg)}to{opacity:1;transform:none}}
.pt-result-title{font-size:1.15rem;font-weight:700;color:var(--text)}
.pt-result-level{font-size:3.5rem;font-weight:800;color:var(--blue);letter-spacing:0.04em;position:relative;animation:pt-level-reveal .5s cubic-bezier(.34,1.56,.64,1) .2s both}
.pt-result-level::after{content:'';position:absolute;inset:-8px -16px;border-radius:20px;background:rgba(79,143,247,0.06);z-index:-1;animation:pt-level-glow 2s ease-in-out infinite alternate}
@keyframes pt-level-reveal{from{opacity:0;transform:scale(0.5)}to{opacity:1;transform:none}}
@keyframes pt-level-glow{from{transform:scale(1);opacity:1}to{transform:scale(1.05);opacity:0.6}}
.pt-result-level-name{font-size:0.95rem;font-weight:600;color:var(--muted)}
.pt-result-desc{font-size:0.85rem;color:var(--muted);margin-top:4px;line-height:1.5}
.pt-result-score{font-size:0.82rem;color:var(--muted);opacity:0.7;padding:4px 12px;border-radius:99px;background:rgba(0,0,0,0.03)}
.pt-apply-btn{width:100%;max-width:300px;padding:15px 24px;border:none;border-radius:16px;background:linear-gradient(135deg,#4f8ff7 0%,#6ca6ff 50%,#88b8ff 100%);background-size:200% auto;color:#fff;font-size:0.95rem;font-weight:700;cursor:pointer;box-shadow:0 6px 20px rgba(79,143,247,0.25),0 2px 8px rgba(79,143,247,0.12);margin-top:16px;transition:all .2s ease;-webkit-tap-highlight-color:transparent;min-height:52px}
.pt-apply-btn:active{transform:scale(0.97)}
.pt-dismiss-btn{background:none;border:none;color:var(--muted);font-size:0.82rem;font-weight:500;cursor:pointer;padding:10px 20px;margin-top:4px;border-radius:8px;transition:all .15s;-webkit-tap-highlight-color:transparent;min-height:44px}
.pt-dismiss-btn:hover{background:rgba(0,0,0,0.03)}
.pt-dismiss-btn:active{transform:scale(0.97)}

/* Sentence cloze question */
.pt-sentence{font-size:0.92rem;color:var(--text);line-height:1.65;text-align:center;padding:12px 16px;background:var(--hover);border-radius:14px;margin:4px 0 8px}
/* Chinese prompt word (zh-to-word) */
.pt-word-zh{font-size:1.5rem}
/* Level breakdown bars */
.pt-level-breakdown{width:100%;max-width:320px;display:flex;flex-direction:column;gap:8px;margin:8px 0 4px}
.pt-breakdown-row{display:flex;align-items:center;gap:8px}
.pt-breakdown-label{font-size:0.78rem;font-weight:700;color:var(--muted);width:28px;text-align:right;flex-shrink:0}
.pt-breakdown-bar-wrap{flex:1;height:8px;background:var(--border);border-radius:99px;overflow:hidden}
.pt-breakdown-bar{height:100%;border-radius:99px;background:var(--amber);transition:width .5s cubic-bezier(.4,0,.2,1)}
.pt-breakdown-bar.good{background:var(--green)}
.pt-breakdown-pct{font-size:0.72rem;font-weight:600;color:var(--muted);width:40px;text-align:right;flex-shrink:0}
.pt-breakdown-skip{color:var(--muted);opacity:0.5;font-style:italic}
/* V2 Spelling-recall */
.pt-spelling-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;margin:8px 0 4px}
.pt-spelling-hint{font-size:1.1rem;font-weight:700;letter-spacing:3px;color:var(--muted);font-family:monospace}
.pt-spelling-input{width:100%;max-width:280px;padding:14px 16px;border:2px solid var(--border);border-radius:14px;font-size:1rem;font-weight:600;color:var(--text);background:var(--surface);text-align:center;outline:none;transition:border-color .2s;min-height:48px}
.pt-spelling-input:focus{border-color:var(--blue)}
.pt-spelling-input.correct{border-color:var(--green);background:rgba(43,200,102,0.06)}
.pt-spelling-input.wrong{border-color:var(--red);background:rgba(240,80,80,0.06)}
.pt-spelling-submit{padding:10px 28px;border:none;border-radius:99px;background:linear-gradient(135deg,#4f8ff7,#6ca6ff);color:#fff;font-size:0.85rem;font-weight:700;cursor:pointer;min-height:44px;transition:all .15s}
.pt-spelling-submit:active{transform:scale(0.96)}
.pt-spelling-submit:disabled{opacity:0.5;cursor:default}
.pt-spelling-pos{font-size:0.78rem;color:var(--muted);font-weight:600;margin:-2px 0 2px}
.pt-spelling-answer{font-size:0.92rem;font-weight:700;color:var(--green);margin-top:4px}
/* V2 Usage-judgment */
.pt-judgment-sentence{font-size:0.92rem;color:var(--text);line-height:1.65;text-align:center;padding:12px 16px;background:var(--hover);border-radius:14px;margin:4px 0 8px}
.pt-judgment-highlight{color:var(--blue);font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.pt-judgment-meaning{font-size:0.88rem;color:var(--text);text-align:center;margin:4px 0 12px}
.pt-judgment-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0}
.pt-judgment-btn{padding:14px 12px;border:1.5px solid var(--border);border-radius:16px;background:var(--surface);font-size:0.88rem;font-weight:700;color:var(--text);cursor:pointer;min-height:52px;transition:all .2s;text-align:center}
.pt-judgment-btn:active{transform:scale(0.96)}
.pt-judgment-btn.correct{background:rgba(43,200,102,0.08);border-color:rgba(43,200,102,0.35);color:var(--green)}
.pt-judgment-btn.wrong{background:rgba(240,80,80,0.08);border-color:rgba(240,80,80,0.35);color:var(--red)}
.pt-judgment-btn:disabled{cursor:default}
/* V2 Type breakdown (result page) */
.pt-type-breakdown{display:flex;flex-direction:column;gap:6px;margin:12px 0 8px;padding:10px 14px;background:var(--hover);border-radius:14px}
.pt-type-row{display:flex;align-items:center;gap:8px}
.pt-type-label{font-size:0.72rem;font-weight:600;color:var(--muted);width:80px;flex-shrink:0}
.pt-type-bar-wrap{flex:1;height:8px;background:var(--border);border-radius:99px;overflow:hidden}
.pt-type-bar{height:100%;border-radius:99px;background:var(--blue);transition:width .5s cubic-bezier(.4,0,.2,1)}
.pt-type-bar-spell{background:var(--green)}
.pt-type-bar-judge{background:var(--purple)}
.pt-type-pct{font-size:0.72rem;font-weight:600;color:var(--muted);width:32px;text-align:right;flex-shrink:0}
[data-theme="dark"] .pt-sentence{background:rgba(255,255,255,0.04)}
[data-theme="dark"] .pt-breakdown-bar-wrap{background:rgba(255,255,255,0.08)}
[data-theme="dark"] .pt-spelling-input{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.1)}
[data-theme="dark"] .pt-spelling-input.correct{background:rgba(43,200,102,0.08);border-color:rgba(43,200,102,0.3)}
[data-theme="dark"] .pt-spelling-input.wrong{background:rgba(240,80,80,0.08);border-color:rgba(240,80,80,0.3)}
[data-theme="dark"] .pt-judgment-sentence{background:rgba(255,255,255,0.04)}
[data-theme="dark"] .pt-judgment-btn{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.08)}
[data-theme="dark"] .pt-judgment-btn.correct{background:rgba(43,200,102,0.1);border-color:rgba(43,200,102,0.3)}
[data-theme="dark"] .pt-judgment-btn.wrong{background:rgba(240,80,80,0.1);border-color:rgba(240,80,80,0.3)}
[data-theme="dark"] .pt-type-breakdown{background:rgba(255,255,255,0.04)}
[data-theme="dark"] .pt-type-bar-wrap{background:rgba(255,255,255,0.08)}

/* Fox nudge banner */
.pt-nudge{display:flex;align-items:flex-start;gap:12px;padding:14px 14px 14px 16px;margin:0;background:linear-gradient(180deg,rgba(79,143,247,0.07),rgba(79,143,247,0.03));border:1px solid rgba(79,143,247,0.14);border-radius:18px;animation:ob-feat-in .4s cubic-bezier(.4,0,.2,1);transition:all .2s ease}
.pt-nudge:hover{border-color:rgba(79,143,247,0.2);background:linear-gradient(180deg,rgba(79,143,247,0.08),rgba(79,143,247,0.04))}
.pt-nudge-fox{font-size:1.35rem;flex-shrink:0;animation:ob-fox-float 3s ease-in-out infinite;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:14px;background:rgba(79,143,247,0.08)}
.pt-nudge-body{flex:1;min-width:0}
.pt-nudge-text{font-size:0.82rem;font-weight:550;color:var(--text);line-height:1.5}
.pt-nudge-btn{margin-top:10px;padding:0 18px;border:none;border-radius:99px;background:linear-gradient(135deg,#4f8ff7,#6ca6ff);color:#fff;font-size:0.78rem;font-weight:700;cursor:pointer;transition:all .15s;min-height:40px;-webkit-tap-highlight-color:transparent;box-shadow:0 10px 20px rgba(79,143,247,0.18)}
.pt-nudge-btn:active{transform:scale(0.96)}
.pt-nudge-dismiss{width:44px;height:44px;border-radius:14px;border:1px solid transparent;background:rgba(15,23,42,0.04);color:var(--muted);font-size:0.92rem;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s;-webkit-tap-highlight-color:transparent}
.pt-nudge-dismiss:hover{background:rgba(15,23,42,0.07);border-color:rgba(15,23,42,0.06)}
.pt-nudge-dismiss:active{transform:scale(0.9)}

/* ── Dark mode: Placement Test ── */
[data-theme="dark"] .pt-close{background:rgba(255,255,255,0.07)}
[data-theme="dark"] .pt-close:hover{background:rgba(255,255,255,0.12)}
[data-theme="dark"] .pt-intro-info{background:rgba(255,255,255,0.04)}
[data-theme="dark"] .pt-progress-fill::after{background:rgba(255,255,255,0.2)}
[data-theme="dark"] .pt-level-tag{background:rgba(79,143,247,0.12)}
[data-theme="dark"] .pt-opt{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.08)}
[data-theme="dark"] .pt-opt:hover{border-color:rgba(79,143,247,0.3);background:rgba(79,143,247,0.08)}
[data-theme="dark"] .pt-opt.correct{background:rgba(43,200,102,0.12);border-color:rgba(43,200,102,0.35)}
[data-theme="dark"] .pt-opt.wrong{background:rgba(240,80,80,0.12);border-color:rgba(240,80,80,0.35)}
[data-theme="dark"] .pt-result-level::after{background:rgba(79,143,247,0.08)}
[data-theme="dark"] .pt-result-score{background:rgba(255,255,255,0.04)}
[data-theme="dark"] .pt-start-btn{box-shadow:0 6px 24px rgba(79,143,247,0.2),0 2px 8px rgba(0,0,0,0.2)}
[data-theme="dark"] .pt-apply-btn{box-shadow:0 6px 20px rgba(79,143,247,0.2),0 2px 8px rgba(0,0,0,0.2)}
[data-theme="dark"] .pt-dismiss-btn:hover{background:rgba(255,255,255,0.04)}
[data-theme="dark"] .pt-nudge{background:linear-gradient(180deg,rgba(79,143,247,0.12),rgba(79,143,247,0.05));border-color:rgba(79,143,247,0.16)}
[data-theme="dark"] .pt-nudge:hover{background:linear-gradient(180deg,rgba(79,143,247,0.14),rgba(79,143,247,0.06));border-color:rgba(79,143,247,0.2)}
[data-theme="dark"] .pt-nudge-fox{background:rgba(79,143,247,0.14)}
[data-theme="dark"] .pt-nudge-btn{box-shadow:none}
[data-theme="dark"] .pt-nudge-dismiss{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.06)}
[data-theme="dark"] .pt-nudge-dismiss:hover{background:rgba(255,255,255,0.06)}
[data-theme="dark"] .pt-loading-spinner{border-color:rgba(255,255,255,0.1);border-top-color:var(--blue)}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
.ob-v2-overlay,.ob-v2-overlay::before,.ob-v2-overlay::after,.ob-intro-slide,.ob-intro-brand,.ob-intro-fox,.ob-intro-fox::after,.ob-intro-desc,.ob-intro-feat,.ob-intro-cta,.ob-intro-cta::before,.ob-intro-dot,.pt-overlay,.pt-intro,.pt-intro-fox,.pt-quiz,.pt-level-tag,.pt-word,.pt-opt,.pt-opt.correct,.pt-opt.wrong,.pt-result,.pt-result-fox,.pt-result-level,.pt-result-level::after,.pt-nudge,.pt-nudge-fox,.pt-loading-spinner{animation:none !important;transition-duration:0.01ms !important}
}

/* ── SRS Tooltip (首次翻卡提示) ──────────────────────────────────── */
.srs-tooltip{
  position:relative; z-index:60;
  display:flex; justify-content:center;
  margin:-8px 0 8px;
  padding-bottom:env(safe-area-inset-bottom,0px);
  margin-bottom:56px;
  animation:fadeIn 0.25s ease;
}
.srs-tooltip-inner{
  background:#fff;
  border-radius:14px;
  box-shadow:0 4px 20px rgba(0,0,0,0.12);
  padding:14px 18px;
  max-width:340px; width:100%;
}
.srs-tooltip-title{
  font-size:0.85rem; font-weight:700;
  color:var(--text,#182132);
  margin-bottom:8px;
}
.srs-tooltip-items{
  display:flex; flex-direction:column; gap:5px;
  font-size:0.8rem; color:var(--muted,#7d8aa3);
  line-height:1.45;
}
.srs-tooltip-items strong{
  color:var(--text,#182132);
}
.srs-tooltip-close{
  display:block; width:100%;
  margin-top:10px; padding:8px 0;
  border:none; border-radius:10px;
  background:var(--blue,#4f8ff7); color:#fff;
  font-size:0.82rem; font-weight:700;
  cursor:pointer;
}
[data-theme="dark"] .srs-tooltip-inner{background:var(--card);box-shadow:0 4px 20px rgba(0,0,0,0.3)}
[data-theme="dark"] .srs-tooltip-title{color:var(--text)}
[data-theme="dark"] .srs-tooltip-items{color:var(--muted)}
[data-theme="dark"] .srs-tooltip-items strong{color:var(--text)}

/* ═══════════════════════════════════════════════════════════════════════
   Level & Topic — flashcard badge + session summary + topic picker + level progress
   ═══════════════════════════════════════════════════════════════════════ */
/* P0: Card front badge */
.front-meta-row{display:flex;gap:6px;justify-content:center;margin-bottom:8px;flex-wrap:wrap}
.card-level-badge{font-size:.72rem;font-weight:700;border-radius:12px;padding:2px 10px;letter-spacing:.02em}
.lv-0{background:rgba(80,200,80,.12);color:#3a9e3a;border:1px solid rgba(80,200,80,.3)}
.lv-1{background:rgba(79,143,247,.12);color:var(--blue);border:1px solid rgba(79,143,247,.3)}
.lv-2{background:rgba(255,160,50,.12);color:#d47800;border:1px solid rgba(255,160,50,.3)}
.lv-3{background:rgba(150,80,220,.12);color:#8040c0;border:1px solid rgba(150,80,220,.3)}
.lv-4{background:rgba(209,75,110,.12);color:#d14b6e;border:1px solid rgba(209,75,110,.3)}
.lv-5{background:rgba(92,46,168,.12);color:#5c2ea8;border:1px solid rgba(92,46,168,.3)}
.card-topic-tag{font-size:.72rem;font-weight:600;border-radius:12px;padding:2px 10px;background:var(--card);border:1px solid var(--border);color:var(--muted)}
[data-theme="dark"] .lv-0{color:#6fd46f}
[data-theme="dark"] .lv-1{color:#79b3f7}
[data-theme="dark"] .lv-2{color:#ffb05a}
[data-theme="dark"] .lv-3{color:#c080ff}
[data-theme="dark"] .lv-4{color:#ff8aa7}
[data-theme="dark"] .lv-5{color:#b694ff}

/* P1a: Session summary in done-view */
/* (removed: session-summary — unified results card replaces) */

/* P1b: Topic filter picker */
.topic-filter-row{display:flex;align-items:center;gap:8px;justify-content:flex-start;margin:0;min-width:0}
.topic-filter-row--active{justify-content:space-between}
.topic-filter-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:12px 14px;background:rgba(255,255,255,0.44);border:1px solid var(--today-inline-border);border-radius:18px;font-size:.82rem;color:var(--text);cursor:pointer;text-align:left;transition:background .15s,border-color .15s,color .15s,transform .15s}
.topic-filter-btn:hover{background:rgba(79,143,247,.06);border-color:rgba(79,143,247,.18)}
.topic-filter-btn.is-open{background:rgba(79,143,247,.08);border-color:rgba(79,143,247,.18)}
.topic-filter-btn-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.topic-filter-btn-kicker{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.topic-filter-btn-value{font-size:.84rem;font-weight:650;line-height:1.35;color:var(--text)}
.topic-filter-btn-meta{display:flex;align-items:center;gap:8px;flex-shrink:0;min-width:0}
.topic-filter-level-summary{display:inline-flex;align-items:center;gap:8px;min-width:0;padding:6px 10px;border-radius:999px;background:rgba(79,143,247,.08);border:1px solid rgba(79,143,247,.12)}
.topic-filter-level-name{font-size:.76rem;font-weight:650;color:var(--text);white-space:nowrap}
.topic-filter-chevron{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:rgba(15,23,42,.04);font-size:.82rem;color:var(--muted);transition:background .15s,color .15s}
.topic-filter-btn:hover .topic-filter-chevron{background:rgba(79,143,247,.12);color:var(--blue)}
.topic-active-badge{display:inline-flex;align-items:center;min-height:44px;background:rgba(79,143,247,.1);border:1px solid rgba(79,143,247,.22);border-radius:16px;padding:0 14px;font-size:.8rem;font-weight:700;color:var(--blue);max-width:calc(100% - 52px)}
.topic-clear-btn{width:44px;height:44px;border-radius:12px;border:1px solid transparent;background:rgba(15,23,42,.04);font-size:1rem;cursor:pointer;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,color .15s}
.topic-clear-btn:hover{background:rgba(15,23,42,.07);border-color:rgba(15,23,42,.06)}
.topic-picker{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;padding:6px;background:rgba(255,255,255,0.34);border:1px solid var(--today-inline-border);border-radius:18px;margin:0}
.topic-pick-item{background:rgba(255,255,255,0.56);border:1px solid rgba(15,23,42,0.06);border-radius:14px;padding:8px 14px;font-size:.8rem;font-weight:650;cursor:pointer;display:flex;align-items:center;gap:5px;color:var(--text);min-height:44px;transition:background .15s,border-color .15s,color .15s,transform .1s}
.topic-pick-item.selected{background:rgba(79,143,247,.12);border-color:rgba(79,143,247,.28);color:var(--blue);box-shadow:inset 0 0 0 1px rgba(79,143,247,.14)}
.topic-pick-count{font-size:.7rem;color:var(--muted);font-weight:400}
[data-theme="dark"] .topic-filter-btn{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.08)}
[data-theme="dark"] .topic-filter-btn:hover{background:rgba(79,143,247,.12);border-color:rgba(79,143,247,.2)}
[data-theme="dark"] .topic-filter-btn.is-open{background:rgba(79,143,247,.14);border-color:rgba(79,143,247,.22)}
[data-theme="dark"] .topic-filter-btn-kicker{color:rgba(219,234,254,.68)}
[data-theme="dark"] .topic-filter-btn-value{color:#eef2ff}
[data-theme="dark"] .topic-filter-level-summary{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .topic-filter-level-name{color:#eef2ff}
[data-theme="dark"] .topic-filter-chevron{background:rgba(255,255,255,.06);color:rgba(219,234,254,.74)}
[data-theme="dark"] .topic-filter-btn:hover .topic-filter-chevron{background:rgba(79,143,247,.18);color:#dbeafe}
[data-theme="dark"] .topic-active-badge{background:rgba(79,143,247,.18);border-color:rgba(79,143,247,.2)}
[data-theme="dark"] .topic-clear-btn{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.06)}
[data-theme="dark"] .topic-clear-btn:hover{background:rgba(255,255,255,0.06)}
[data-theme="dark"] .topic-picker{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.08)}
[data-theme="dark"] .topic-pick-item{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.06)}
[data-theme="dark"] .topic-pick-item.selected{background:rgba(79,143,247,.18);border-color:rgba(79,143,247,.24)}

/* 学习等级行 */
.user-level-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;margin:0;background:rgba(255,255,255,0.38);border:1px solid var(--today-inline-border);border-radius:18px}
.user-level-info{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.user-level-label{font-size:.66rem;color:var(--muted);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.user-level-badge{display:inline-block;padding:4px 9px;border-radius:999px;font-size:.68rem;font-weight:700;color:#fff;letter-spacing:.04em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.user-level-name{font-size:.8rem;font-weight:650;color:var(--text)}
.user-level-test-btn{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--today-inline-border);background:rgba(79,143,247,.06);font-size:.74rem;font-weight:700;color:var(--blue);cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.user-level-test-btn:active{transform:scale(.96);background:rgba(79,143,247,.08)}
[data-theme="dark"] .user-level-row{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .user-level-test-btn{background:rgba(79,143,247,.14);border-color:rgba(79,143,247,.18);color:#dbeafe}

@media (max-width: 640px){
.pt-nudge{padding:14px}
.topic-filter-row .topic-filter-btn{width:100%;flex-direction:column;align-items:flex-start}
.topic-filter-btn-meta{width:100%;justify-content:space-between}
.user-level-row{flex-direction:column;align-items:flex-start}
.user-level-test-btn{width:100%}
}

/* P2: Level progress panel */
.level-progress-panel{background:var(--today-card-bg, var(--card));border:var(--border-card);border-radius:var(--radius-lg);padding:20px;margin:12px 0;box-shadow:var(--shadow-card-v2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lpp-title{font-size:.82rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px}
.lpp-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.lpp-label{font-size:.8rem;font-weight:700;width:24px;text-align:center}
.lpp-bar-wrap{flex:1;height:8px;background:var(--border);border-radius:4px;overflow:hidden}
.lpp-bar-fill{height:100%;border-radius:4px;transition:width .5s ease}
.lpp-stat{font-size:.72rem;color:var(--muted);min-width:48px;text-align:right}
.lpp-pct{font-size:.72rem;font-weight:700;color:var(--text);min-width:32px;text-align:right}