:root {
            /* 1. 字体系统升级 [专家建议] */
            /* 主字体：现代无衬线体，用于 UI 界面 */
            --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            /* 阅读字体：经典衬线体，用于单词卡片，增加“典籍感” */
            --font-serif: 'Merriweather', 'Georgia', serif;

            /* 2. 品牌色升级 (Deep Focus) */
            --primary: #6c5ce7;
            /* 主色调 - 赛博紫 (Cyber Purple) */
            --primary-light: #a29bfe;
            /* 辅色 - 浅紫 (用于背景装饰/选中态) */

            /* 3. 功能状态色 (高饱和度荧光色) */
            --learn: #00b894;
            /* 学习/正确 - 翠绿 */
            --review: #ff7675;
            /* 复习/错误 - 暖橙红 */
            --gold: #fdcb6e;
            /* 奖励/游戏 - 暖金 */
            --neutral: #a29bfe;
            /* 中性/收藏 - 统一浅紫 */

            /* 4. 基础底色 (日间模式默认) */
            --bg: #f0f4f8;
            /* 护眼灰蓝 */
            --card: #ffffff;
            /* 纯白卡片 */
            --text: #2c3e50;
            /* 深蓝灰文字 */
            --sub: #7f8c8d;
            /* 次级文字灰 */

            /* 5. 模块专属色 (保持原有逻辑) */
            --browse: #6c5ce7;
            /* 浏览模式 (与主色统一) */
            --wordle: #9b59b6;
            /* Wordle 游戏紫 */
            --hawkeye: #34495e;
            /* 鹰眼模式深灰 */
            --book: #e67e22;
            /* 词书管理橙 */

            /* 6. 进度条分级色 */
            --prog-low: #ff7675;
            /* Lv.1-3 */
            --prog-mid: #fdcb6e;
            /* Lv.4-6 */
            --prog-high: #00b894;
            /* Lv.7+ */

            /* 7. Wordle 游戏状态色 */
            --w-correct: #6aaa64;
            --w-present: #c9b458;
            --w-absent: #787c7e;

            /* 8. UI 物理属性 */
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
            --radius: 16px;

            --neon-blue: #00f3ff;
            --neon-purple: #bc13fe;
            --cyber-dark: #0a0a12;
            --cyber-panel: rgba(16, 20, 35, 0.95);
        }

        /* ================================================================
   🌙 暗黑模式适配 (Deep Slate / 深岩灰风格)
   [专家建议]：使用蓝灰色调而非纯黑，减少视疲劳
   ================================================================
*/
        [data-theme="dark"] {
            /* 核心底色重构 */
            --bg: #0f172a;
            /* 背景：极深蓝灰 (Slate-900) */
            --card: #1e293b;
            /* 卡片：深岩灰 (Slate-800) */

            /* 文字适配 */
            --text: #f1f5f9;
            /* 主字：亮灰白 (Slate-100) */
            --sub: #94a3b8;
            /* 次字：淡蓝灰 (Slate-400) */

            /* 模块微调 */
            --hawkeye: #38bdf8;
            /* 鹰眼模式改为电光蓝，在黑底更清晰 */

            /* 阴影加深，增加层次感 */
            --shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
        }

        /* ================================================================
   全局字体应用 (请确保这段也在 <style> 中)
   ================================================================
*/
        body {
            font-family: var(--font-main);
            /* 全局应用新字体 */
        }

        /* 针对单词展示区域应用衬线体 */
        .word-text,
        .preview-header,
        .book-title,
        .game-word-display {
            font-family: var(--font-serif);
            letter-spacing: -0.02em;
            /* 微调间距，更精致 */
        }


        /* 基础重置 */
        * {
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background: var(--bg);
            color: var(--text);
            margin: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: background 0.3s, color 0.3s;
            position: relative;
        }

        /* ================================================================
           动态背景装饰 (由两个文件结合优化)
           ================================================================
        */
        .bg-decoration {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
            pointer-events: none;
        }

        .bg-blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(60px);
            opacity: 0.4;
            animation: float 20s infinite ease-in-out;
        }

        .bg-blob.one {
            width: 400px;
            height: 400px;
            background: var(--primary);
            top: -100px;
            left: -100px;
            animation-delay: 0s;
        }

        .bg-blob.two {
            width: 300px;
            height: 300px;
            background: var(--learn);
            bottom: -50px;
            right: -50px;
            animation-delay: -5s;
        }

        .bg-blob.three {
            width: 200px;
            height: 200px;
            background: var(--neutral);
            top: 40%;
            left: 60%;
            animation-delay: -10s;
        }

        @keyframes float {

            0%,
            100% {
                transform: translate(0, 0) scale(1);
            }

            33% {
                transform: translate(30px, -50px) scale(1.1);
            }

            66% {
                transform: translate(-20px, 20px) scale(0.9);
            }
        }

        /* ================================================================
           登录界面样式 (移植自 index.html 并美化)
           ================================================================
        */
        #view-login {
            z-index: 1000;
            background: var(--bg);
            justify-content: center;
            padding: 20px;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: opacity 0.5s ease;
        }

        /* 登录卡片 */
        .login-card {
            background: var(--card);
            width: 100%;
            max-width: 420px;
            padding: 40px 30px;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            text-align: center;
            animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
        }

        .login-header {
            margin-bottom: 30px;
        }

        .login-header h1 {
            color: var(--primary);
            margin: 0 0 10px 0;
            font-size: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .login-tabs {
            display: flex;
            border-bottom: 2px solid rgba(0, 0, 0, 0.05);
            margin-bottom: 25px;
        }

        .login-tab {
            flex: 1;
            padding: 12px;
            cursor: pointer;
            font-weight: bold;
            color: var(--sub);
            transition: 0.2s;
            border-bottom: 2px solid transparent;
        }

        .login-tab.active {
            color: var(--primary);
            border-color: var(--primary);
        }

        .login-tab:hover {
            color: var(--text);
        }

        .login-input {
            width: 100%;
            padding: 14px;
            margin-bottom: 15px;
            border: 2px solid rgba(0, 0, 0, 0.05);
            border-radius: 12px;
            font-size: 1rem;
            outline: none;
            background: var(--bg);
            color: var(--text);
            transition: 0.2s;
        }

        .login-input:focus {
            border-color: var(--primary);
            background: var(--card);
            box-shadow: 0 0 0 4px rgba(78, 140, 255, 0.1);
        }

        .login-btn {
            width: 100%;
            padding: 14px;
            border: none;
            border-radius: 12px;
            background: var(--primary);
            color: white;
            font-weight: bold;
            font-size: 1.1rem;
            cursor: pointer;
            transition: 0.2s;
            box-shadow: 0 4px 15px rgba(78, 140, 255, 0.3);
        }

        .login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(78, 140, 255, 0.4);
        }

        .login-btn:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }

        .guest-link {
            margin-top: 25px;
            display: inline-block;
            color: var(--sub);
            text-decoration: none;
            cursor: pointer;
            font-size: 0.9rem;
            border-bottom: 1px dashed var(--sub);
        }

        .guest-link:hover {
            color: var(--primary);
            border-color: var(--primary);
        }

        /* ================================================================
           主应用容器 (包含 ielts.html 的所有内容)
           ================================================================
        */
        #main-app {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            opacity: 0;
            pointer-events: none;
            transition: 0.5s;
            transform: scale(0.98);
            position: absolute;
            top: 0;
            left: 0;
        }

        #main-app.visible {
            opacity: 1;
            pointer-events: all;
            transform: scale(1);
        }

        /* Header */
        header {
            height: 60px;
            padding: 0 30px;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 100;
            flex-shrink: 0;
            gap: 20px;
        }

        [data-theme="dark"] header {
            background: rgba(30, 30, 30, 0.8);
        }

        .brand {
            font-weight: 800;
            font-size: 1.4rem;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 200px;
            cursor: pointer;
        }

        .nav-right {
            display: flex;
            gap: 15px;
            align-items: center;
        }

        .icon-btn {
            background: none;
            border: none;
            font-size: 1.2rem;
            cursor: pointer;
            color: var(--sub);
            padding: 8px;
            border-radius: 8px;
            transition: 0.2s;
        }

        .icon-btn:hover {
            background: rgba(0, 0, 0, 0.05);
            color: var(--primary);
        }

        /* 用户头像 */
        .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--learn);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            cursor: pointer;
            font-size: 0.9rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: 0.2s;
        }

        .user-avatar:hover {
            transform: scale(1.1);
        }

        /* Search Bar */
        .header-search {
            flex: 1;
            max-width: 500px;
            position: relative;
            display: flex;
            align-items: center;
        }

        .header-search i {
            position: absolute;
            left: 15px;
            color: var(--sub);
            font-size: 0.9rem;
        }

        .header-search input {
            width: 100%;
            padding: 10px 10px 10px 40px;
            border-radius: 20px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            background: rgba(255, 255, 255, 0.5);
            outline: none;
            color: var(--text);
            transition: 0.2s;
        }

        .header-search input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(78, 140, 255, 0.1);
            background: var(--card);
        }

        /* View Container */
        #view-container {
            flex: 1;
            position: relative;
            width: 100%;
            height: calc(100vh - 60px);
            overflow: hidden;
        }

        .view {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            opacity: 0;
            pointer-events: none;
            transition: 0.3s;
            transform: scale(0.98);
        }

        .view.active {
            opacity: 1;
            pointer-events: all;
            transform: scale(1);
        }

        /* ================================================================
           Dashboard 样式 (ielts.html)
           ================================================================
        */
        #view-dashboard {
            justify-content: flex-start;
            padding-top: 30px;
            overflow-y: auto;
        }

        .progress-section {
            width: 90%;
            max-width: 900px;
            margin-bottom: 30px;
            background: var(--card);
            padding: 20px;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }

        .progress-labels {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 0.9rem;
            color: var(--sub);
            font-weight: bold;
        }

        .progress-track {
            width: 100%;
            height: 15px;
            background: rgba(0, 0, 0, 0.05);
            border-radius: 10px;
            overflow: hidden;
            display: flex;
        }

        .p-seg {
            height: 100%;
            transition: width 1s ease-in-out;
            position: relative;
        }

        .p-seg:hover::after {
            content: attr(data-tip);
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
            white-space: nowrap;
            pointer-events: none;
        }

        .progress-legend {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            font-size: 0.8rem;
            color: var(--sub);
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .legend-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }

        /* Book Library Styles */
        .library-section {
            width: 90%;
            max-width: 900px;
            margin-bottom: 30px;
        }

        .lib-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .lib-grid {
            display: flex;
            gap: 15px;
            overflow-x: auto;
            padding-bottom: 10px;
            padding-left: 5px;
            scrollbar-width: thin;
        }

        .book-card {
            min-width: 160px;
            max-width: 160px;
            height: 120px;
            background: var(--card);
            border-radius: 12px;
            padding: 15px;
            box-shadow: var(--shadow);
            border: 2px solid transparent;
            cursor: pointer;
            transition: 0.2s;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
        }

        .book-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        .book-card.active {
            border-color: var(--primary);
            background: #f0f7ff;
        }

        [data-theme="dark"] .book-card.active {
            background: #2c3e50;
        }

        .book-title {
            font-weight: bold;
            font-size: 0.95rem;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            line-height: 1.3;
        }

        .book-meta {
            font-size: 0.8rem;
            color: var(--sub);
        }

        .book-delete {
            position: absolute;
            top: 5px;
            right: 5px;
            color: #ccc;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: none;
            cursor: pointer;
            transition: 0.2s;
            font-size: 0.8rem;
        }

        .book-delete:hover {
            color: white;
            background: var(--review);
        }

        .add-book-card {
            min-width: 60px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border: 2px dashed var(--sub);
            color: var(--sub);
            background: transparent;
            box-shadow: none;
            opacity: 0.6;
        }

        .add-book-card:hover {
            opacity: 1;
            border-color: var(--primary);
            color: var(--primary);
            transform: none;
        }

        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            max-width: 900px;
            width: 90%;
            padding-bottom: 40px;
        }

        .dash-card {
            background: var(--card);
            border-radius: var(--radius);
            padding: 25px;
            box-shadow: var(--shadow);
            text-align: center;
            transition: 0.3s;
            cursor: pointer;
            border: 2px solid transparent;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            min-height: 180px;
        }

        .dash-card:hover {
            transform: translateY(-5px);
        }

        .dash-card.review:hover {
            border-color: var(--review);
        }

        .dash-card.learn:hover {
            border-color: var(--learn);
        }

        .dash-card.neutral:hover {
            border-color: var(--neutral);
        }

        .dash-card.game:hover {
            border-color: var(--gold);
        }

        .dash-card.wordle:hover {
            border-color: var(--wordle);
        }

        .dash-card.hawkeye:hover {
            border-color: var(--hawkeye);
        }

        .dash-icon {
            font-size: 2.5rem;
            margin-bottom: 10px;
            display: inline-block;
        }

        .dash-num {
            font-size: 2rem;
            font-weight: 800;
            display: block;
            margin-bottom: 5px;
        }

        .dash-label {
            font-size: 0.95rem;
            color: var(--sub);
            font-weight: 600;
        }

        .dash-btn {
            margin-top: 10px;
            padding: 8px 20px;
            border-radius: 20px;
            border: none;
            font-weight: bold;
            color: white;
            cursor: pointer;
            width: 80%;
            font-size: 0.95rem;
            transition: 0.2s;
        }

        .dash-btn:hover {
            opacity: 0.9;
            transform: scale(1.02);
        }

        .limit-input-container {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-top: 10px;
            font-size: 0.9rem;
            color: var(--sub);
            background: rgba(0, 0, 0, 0.03);
            padding: 5px 12px;
            border-radius: 20px;
        }

        .limit-input {
            width: 40px;
            border: none;
            background: transparent;
            text-align: center;
            font-weight: bold;
            color: var(--learn);
            font-size: 1rem;
            outline: none;
            border-bottom: 1px solid var(--sub);
        }

        /* ================================================================
           Study View 样式
           ================================================================
        */
        #view-study {
            padding: 20px 0;
        }

        .study-header {
            display: flex;
            gap: 20px;
            align-items: center;
            background: rgba(0, 0, 0, 0.05);
            padding: 8px 20px;
            border-radius: 20px;
            margin-bottom: 20px;
            flex-shrink: 0;
        }

        .card-wrapper {
            flex: 1;
            width: 100%;
            max-width: 600px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 0;
            margin-bottom: 30px;
            perspective: 1000px;
        }

        .flashcard {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: 0.6s;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            background: var(--card);
            cursor: pointer;
        }

        .flashcard.flipped {
            transform: rotateY(180deg);
        }

        .face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 30px;
            box-sizing: border-box;
            overflow-y: auto;
        }

        .back {
            transform: rotateY(180deg);
            background: var(--card);
            border: 2px solid var(--bg);
            border-radius: var(--radius);
        }

        .word-text {
            font-size: 3.5rem;
            font-weight: 800;
            color: var(--text);
            margin-bottom: 15px;
            flex-shrink: 0;
        }

        .word-def {
            font-size: 1.5rem;
            line-height: 1.6;
            color: var(--text);
            overflow-y: auto;
            max-height: 80%;
            width: 100%;
        }

        .controls {
            display: flex;
            gap: 30px;
            align-items: center;
            justify-content: center;
            padding-bottom: 20px;
            flex-shrink: 0;
            z-index: 10;
            min-height: 80px;
        }

        .mc-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            width: 100%;
            margin-top: 20px;
        }

        .mc-btn {
            /* 1. 布局与尺寸 */
            width: 100%;
            height: 100px;
            /* 强制固定高度，确保四个选项一样大 */
            padding: 12px !important;
            border-radius: 12px;

            /* 2. 颜色与边框 */
            border: 2px solid rgba(0, 0, 0, 0.05);
            background: var(--bg);
            color: var(--text);

            /* 3. 交互 */
            cursor: pointer;
            transition: all 0.2s;

            /* 4. 核心修复：多行文本截断 (Line Clamping) */
            display: -webkit-box;
            /* 启用弹性盒模型 */
            -webkit-line-clamp: 4;
            /* 最多显示 4 行 */
            -webkit-box-orient: vertical;
            /* 垂直排列 */
            overflow: hidden;
            /* 超出部分隐藏 */
            text-overflow: ellipsis;
            /* 超出显示省略号... */

            /* 5. 排版微调 */
            font-size: 0.85rem !important;
            /* 稍微调小字号以容纳更多内容 */
            line-height: 1.4;
            /* 增加行间距 */
            text-align: left;
            /* 文字左对齐 */
            white-space: normal;
            /* 允许换行 */
            word-break: break-all;
            /* 防止长单词撑破 */
        }

        /* 悬停与选中状态 */
        .mc-btn:hover {
            border-color: var(--primary);
            background: white;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

        .mc-btn:active {
            transform: scale(0.98);
        }

        .mc-btn.correct {
            background: #e0fcf6;
            border-color: var(--learn);
            color: #00876c;
        }

        .mc-btn.wrong {
            background: #ffecec;
            border-color: var(--review);
            color: #c0392b;
            opacity: 0.7;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }

            100% {
                transform: scale(1);
            }
        }

        @keyframes shake {
            0% {
                transform: translateX(0);
            }

            25% {
                transform: translateX(-5px);
            }

            50% {
                transform: translateX(5px);
            }

            75% {
                transform: translateX(-5px);
            }

            100% {
                transform: translateX(0);
            }
        }

        .shake-anim {
            animation: shake 0.4s ease-in-out;
            border-color: var(--review) !important;
        }

        .spell-hint {
            font-size: 0.9rem;
            color: var(--wordle);
            margin-top: 10px;
            font-weight: bold;
            min-height: 1.2em;
            animation: fadeIn 0.5s;
        }

        .ctrl-btn {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: var(--shadow);
            transition: 0.2s;
            position: relative;
        }

        .ctrl-btn:hover {
            transform: scale(1.1);
        }

        .continue-btn {
            background: var(--learn);
            color: white;
            border: none;
            padding: 15px 40px;
            border-radius: 30px;
            font-size: 1.2rem;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0, 184, 148, 0.3);
            transition: 0.2s;
            animation: fadeIn 0.3s ease;
        }

        .continue-btn:hover {
            transform: translateY(-2px);
        }

        .star-btn {
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 1.8rem;
            background: none;
            border: none;
            cursor: pointer;
            color: #ddd;
            z-index: 20;
            transition: 0.2s;
        }

        .star-btn.active {
            color: var(--gold);
            transform: scale(1.1);
        }

        .spell-input {
            font-size: 1.8rem;
            padding: 10px;
            border: 2px solid var(--sub);
            border-radius: 10px;
            width: 80%;
            text-align: center;
            margin-top: 20px;
            background: var(--bg);
            color: var(--text);
            outline: none;
            transition: 0.2s;
        }

        .spell-input:focus {
            border-color: var(--primary);
        }

        .spell-result-correct {
            color: var(--learn);
            font-weight: bold;
            font-size: 2rem;
        }

        .spell-result-wrong {
            color: var(--review);
            font-weight: bold;
            font-size: 2rem;
            text-decoration: line-through;
        }

        /* 轻量级状态提示 */
        .status-tip {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.8rem;
            z-index: 2000;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .status-tip.show {
            opacity: 1;
        }

        /* ================================================================
           Game Styles (Hangman, Wordle, Hawkeye)
           ================================================================

/* 模态框不再通过点击背景关闭，所以我们需要一个显眼的关闭按钮 */
        .modal-close-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.05);
            color: var(--sub);
            border: none;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: 0.2s;
        }

        .modal-close-btn:hover {
            background: var(--review);
            color: white;
        }

        /* 模态框内容布局调整 */
        .modal-box {
            position: relative;
            /* 为了定位关闭按钮 */
            overflow: hidden;
            /* 其他样式保持不变 */

        }

        /* 忘记密码链接样式 */
        .forgot-pwd-link {
            font-size: 0.85rem;
            color: var(--primary);
            cursor: pointer;
            text-decoration: underline;
            margin-top: 5px;
            display: inline-block;
        }


        /* =================================================================
   📝 最终版：纸白·极简风格 (Paper White Minimalist)
   解决：按键遮挡、配色不适、界面局促
   ================================================================= */

        /* =================================================================
   🎮 游戏界面修复版：完美居中 + 精致说明卡
   ================================================================= */

        /* 1. 视图容器：强制全屏 Flex 居中 */
        #view-game {
            position: absolute;
            /* 铺满父容器 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            /* 🔥 核心修复：居中三件套 */
            display: flex !important;
            flex-direction: column;
            justify-content: center;
            /* 垂直居中 */
            align-items: center;
            /* 水平居中 */

            padding: 20px;
            /* 防止贴边 */
            z-index: 10;
            overflow: hidden;
            /* 防止弹幕撑出滚动条 */
        }

        /* 2. 弹幕层：确保在最底层 */
        .danmaku-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            /* 放在卡片后面 */
            pointer-events: none;
        }

        .danmaku-item {
            position: absolute;
            white-space: nowrap;
            font-family: 'Arial', sans-serif;
            font-weight: 900;
            color: rgba(0, 0, 0, 0.04);
            /* 极淡水印色 */
            user-select: none;
            animation-name: floatLeft;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }

        @keyframes floatLeft {
            from {
                transform: translateX(100vw);
            }

            to {
                transform: translateX(-150%);
            }
        }


        /* 3. 游戏主卡片：加宽版 */
        .game-container {
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.06);
            border-radius: 24px;
            box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.02);

            width: 95%;
            /* 移动端占 95% */
            max-width: 750px;
            /* 🔥 核心修改：从 500px 改为 750px，大幅加宽 */

            max-height: 90vh;
            /*稍微增加高度上限，防止极端情况截断 */
            overflow-y: auto;

            padding: 40px 50px;
            /* 增加内边距，利用宽屏空间 */
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 10;
            margin: auto;
        }

        /* 适配移动端：手机上还是要变回窄一点，不然两边太挤 */
        @media screen and (max-width: 768px) {
            .game-container {
                max-width: 95%;
                /* 手机上回归满宽 */
                padding: 25px 20px;
                /* 手机上减小内边距 */
            }
        }

        /* 4. 顶部导航与按钮 */
        .game-container button.icon-btn {
            color: #95a5a6;
            background: transparent;
            padding: 8px 12px;
            border-radius: 8px;
            transition: 0.2s;
        }

        .game-container button.icon-btn:hover {
            background: rgba(0, 0, 0, 0.04);
            color: var(--primary);
        }

        /* 5. 难度菜单与按钮 */
        .diff-menu {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 10px 0;
            align-items: center;
        }

        .diff-btn {
            width: 100%;
            /* 占满容器宽 */
            background: #ffffff;
            border: 1px solid #edf2f7;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
            padding: 18px 20px;
            border-radius: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 18px;
            transition: 0.2s;
            text-align: left;
        }

        .diff-btn:hover {
            border-color: var(--primary);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
        }

        .diff-icon {
            font-size: 2rem;
            flex-shrink: 0;
        }

        .diff-info {
            font-size: 0.8rem;
            color: #95a5a6;
            margin-top: 4px;
        }

        /* 6. ✨ 新增：玩法说明卡片 (修复草率感) */
        .game-intro-box {
            width: 100%;
            margin-top: 25px;
            padding: 20px;
            background: #f8f9fa;
            /* 淡灰背景区分 */
            border: 1px solid #edf2f7;
            border-radius: 16px;
            text-align: left;
        }

        .intro-header {
            font-size: 0.95rem;
            font-weight: 800;
            color: #2d3436;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .intro-text {
            font-size: 0.85rem;
            color: #636e72;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .intro-tip-capsule {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(108, 92, 231, 0.15);
            padding: 6px 12px;
            border-radius: 10px;
            font-size: 0.8rem;
            color: var(--primary);
            font-weight: 600;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
        }

        /* 7. 游戏进行中样式 (Hangman/Keyboard) */
        /* 1. 挂画区：放大并强制居中 */
        .hangman-svg {
            height: 180px;
            /* 增大高度 (原130px) */
            width: auto;
            margin: 0 auto 30px auto;
            /* 上下留白增加，左右自动居中 */
            display: block;
            /* 块级显示以支持 margin: auto */
            filter: drop-shadow(2px 4px 0 rgba(0, 0, 0, 0.1));
            /* 增加一点悬浮感 */
        }

        /* 绘图线条优化 */
        .hangman-svg line,
        .hangman-svg circle {
            stroke: #2c3e50;
            stroke-width: 4;
            /* 线条稍微加粗 */
            stroke-linecap: round;
            fill: transparent;
        }

        .hangman-svg.danger line,
        .hangman-svg.danger circle {
            stroke: #ff6b6b;
        }

        /* 2. 单词显示区：巨大化 */
        .game-word-display {
            font-family: 'Courier New', monospace;
            font-size: 3rem;
            /* 字号大幅提升 (原2.2rem) */
            letter-spacing: 10px;
            /* 字母间距拉大 */
            font-weight: 800;
            color: #2c3e50;
            margin: 10px 0 35px 0;
            text-align: center;
            /* 文字居中 */
            width: 100%;
            line-height: 1.2;
            border-bottom: none;
            /* 去掉之前的虚线，显得更干净 */
        }

        /* 3. 状态与提示：居中 */
        .game-hint {
            color: #95a5a6;
            font-size: 1.1rem;
            text-align: center;
            /* 居中 */
            margin-bottom: 20px;
            min-height: 1.5em;
            font-weight: 500;
        }

        .game-status {
            text-align: center;
            /* 居中 */
            font-size: 1.2rem;
            font-weight: bold;
            color: var(--sub);
            margin-bottom: 20px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 4. 虚拟键盘：大尺寸、强质感 */
        .keyboard {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            /* 间隙加大 (原6px) */
            width: 100%;
            padding: 0 10px;
            margin-bottom: 10px;
        }

        .key-btn {
            /* 📐 尺寸升级 */
            flex: 1 0 42px;
            /* 基础宽度加大 */
            max-width: 54px;
            /* 最大宽度限制放宽 */
            height: 58px;
            /* 高度显著增加 (原48px) */

            /* 🎨 样式升级 */
            border-radius: 12px;
            background: #f1f2f6;
            border: 1px solid #e1e2e6;
            border-bottom: 5px solid #d1d2d6;
            /* 底部加厚，增加3D立体感 */
            color: #57606f;

            /* 🔡 字体升级 */
            font-size: 1.4rem;
            /* 字母变大 */
            font-weight: 800;

            cursor: pointer;
            transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
            user-select: none;
        }

        /* 悬停效果 */
        .key-btn:hover:not(:disabled) {
            background: #ffffff;
            transform: translateY(-2px);
            border-bottom-width: 7px;
            /* 悬停时浮起 */
        }

        /* 按下效果 (真实的物理反馈) */
        .key-btn:active:not(:disabled) {
            transform: translateY(4px);
            /* 按下去 */
            border-bottom-width: 1px;
            /* 底部变薄 */
            background: #e1e2e6;
        }

        /* 状态色优化 */
        .key-btn.correct {
            background: #e0fcf6;
            color: #00b894;
            border-color: #00b894;
            border-bottom-color: #00876c;
            opacity: 1;
        }

        .key-btn.wrong {
            background: #ffecec;
            color: #d63031;
            border-color: #fab1a0;
            border-bottom-color: #e17055;
            opacity: 0.6;
        }

        /* 下一关按钮：更大气 */
        .game-next-btn {
            margin: 10px auto 0;
            padding: 14px 60px;
            /* 更宽 */
            border-radius: 50px;
            background: var(--primary);
            color: white;
            border: none;
            font-size: 1.1rem;
            font-weight: 800;
            letter-spacing: 1px;
            box-shadow: 0 6px 15px rgba(108, 92, 231, 0.3);
            cursor: pointer;
            transition: 0.2s;
            display: block;
            /* 块级居中 */
        }

        .game-next-btn:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 8px 20px rgba(108, 92, 231, 0.4);
        }

        /* 📱 移动端微调 (防止大按钮换行错乱) */
        @media screen and (max-width: 480px) {
            .key-btn {
                flex: 1 0 32px;
                /* 手机上稍微窄一点 */
                height: 52px;
                /* 高度依然保持手感 */
                font-size: 1.2rem;
            }

            .game-word-display {
                font-size: 2.2rem;
                /* 手机上字号适配 */
                letter-spacing: 6px;
            }

            .hangman-svg {
                height: 150px;
                /* 手机上图画适配 */
            }
        }

        /* Wordle */
        .wordle-board {
            display: flex;
            flex-direction: column;
            gap: 5px;
            margin-bottom: 20px;
            justify-content: center;
            align-items: center;
        }

        .w-row {
            display: grid;
            gap: 5px;
        }

        .w-cell {
            width: 50px;
            height: 50px;
            border: 2px solid rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2rem;
            font-weight: bold;
            text-transform: uppercase;
            background: var(--bg);
            transition: 0.2s;
        }

        .w-cell.active {
            border-color: var(--sub);
            animation: pop 0.1s;
        }

        .w-cell.correct {
            background: var(--w-correct);
            color: white;
            border-color: var(--w-correct);
        }

        .w-cell.present {
            background: var(--w-present);
            color: white;
            border-color: var(--w-present);
        }

        .w-cell.absent {
            background: var(--w-absent);
            color: white;
            border-color: var(--w-absent);
        }

        @keyframes pop {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
            }
        }

        /* Hawkeye */
        .hawk-timer {
            font-size: 3rem;
            font-weight: 800;
            color: var(--hawkeye);
            font-variant-numeric: tabular-nums;
            margin-bottom: 20px;
        }

        .hawk-area {
            min-height: 80px;
            border-bottom: 3px solid var(--hawkeye);
            display: flex;
            gap: 10px;
            justify-content: center;
            align-items: center;
            margin-bottom: 40px;
            width: 100%;
            flex-wrap: wrap;
            padding-bottom: 10px;
        }

        .hawk-pool {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
            max-width: 600px;
        }

        .hawk-tile {
            width: 50px;
            height: 50px;
            background: var(--card);
            border-radius: 8px;
            box-shadow: var(--shadow);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5rem;
            font-weight: bold;
            cursor: pointer;
            user-select: none;
            transition: 0.2s;
            border: 2px solid transparent;
        }

        .hawk-tile:hover {
            transform: translateY(-3px);
            border-color: var(--primary);
        }

        .hawk-tile.used {
            opacity: 0;
            pointer-events: none;
            transform: scale(0.8);
        }

        .hawk-tile.placed {
            background: var(--hawkeye);
            color: white;
        }

        /* Finish & List Views */
        #view-finish {
            justify-content: center;
            background: transparent;
            z-index: 50;
        }

        .finish-card {
            background: var(--card);
            padding: 30px;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            text-align: center;
            max-width: 500px;
            width: 90%;
            display: flex;
            flex-direction: column;
            max-height: 90vh;
            animation: popIn 0.4s;
        }

        .finish-list-box {
            background: var(--bg);
            border-radius: 8px;
            padding: 10px;
            margin: 15px 0;
            max-height: 200px;
            overflow-y: auto;
            text-align: left;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .finish-list-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            font-size: 0.9rem;
        }

        .finish-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 10px;
        }

        #view-list {
            padding: 30px;
            cursor: pointer;
        }

        .list-container {
            width: 90%;
            max-width: 900px;
            height: 100%;
            background: var(--card);
            border-radius: var(--radius);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: var(--shadow);
            cursor: default;
        }

        .list-header {
            padding: 15px 20px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .filter-tabs {
            display: flex;
            gap: 10px;
        }

        .tab-btn {
            padding: 6px 15px;
            border: none;
            background: var(--bg);
            color: var(--sub);
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.9rem;
        }

        .tab-btn.active {
            background: var(--primary);
            color: white;
            font-weight: bold;
        }

        .v-scroll {
            flex: 1;
            overflow-y: auto;
            position: relative;
        }

        .v-phantom {
            position: relative;
            width: 100%;
        }

        .v-content {
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
        }

        .list-item {
            height: 70px;
            padding: 0 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(0, 0, 0, 0.03);
            cursor: pointer;
            user-select: none;
            box-sizing: border-box;
        }

        .list-item:hover {
            background: rgba(0, 0, 0, 0.02);
        }

        .level-tag {
            font-size: 0.75rem;
            padding: 2px 8px;
            border-radius: 4px;
            font-weight: bold;
            min-width: 50px;
            text-align: center;
        }

        .level-new {
            background: #eee;
            color: #777;
        }

        .level-learning {
            background: #e0fcf6;
            color: var(--learn);
        }

        .level-master {
            background: #ffeaa7;
            color: #d35400;
        }

        /* Modals */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 200;
            backdrop-filter: blur(5px);
        }

        .modal-box {
            background: var(--card);
            padding: 30px;
            border-radius: var(--radius);
            width: 320px;
            box-shadow: var(--shadow);
        }

        .modal-large {
            width: 90%;
            max-width: 600px;
            max-height: 80vh;
            overflow-y: auto;
        }

        .browse-btn {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--bg);
            color: var(--text);
            font-size: 1.2rem;
            border: 2px solid transparent;
            box-shadow: var(--shadow);
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: 0.2s;
            position: relative;
        }

        .browse-btn:hover {
            border-color: var(--browse);
            color: var(--browse);
            transform: scale(1.1);
        }

        .browse-btn.active-mode {
            background: var(--browse);
            color: white;
            border-color: var(--browse);
        }

        /* Guide Content */
        .guide-section {
            margin-bottom: 30px;
        }

        .guide-section h4 {
            color: var(--primary);
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            padding-bottom: 8px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .guide-item {
            display: flex;
            gap: 15px;
            margin-bottom: 15px;
            align-items: flex-start;
        }

        .guide-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.05);
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--sub);
            flex-shrink: 0;
        }

        .guide-text h5 {
            margin: 0 0 4px 0;
            font-size: 1rem;
        }

        .guide-text p {
            margin: 0;
            font-size: 0.85rem;
            color: var(--sub);
            line-height: 1.4;
        }

        .diff-menu {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .diff-btn {
            padding: 15px;
            border-radius: 12px;
            border: 2px solid transparent;
            cursor: pointer;
            text-align: left;
            transition: 0.2s;
            background: var(--bg);
            color: var(--text);
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 20px;
        }

        .diff-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            border-color: var(--primary);
        }

        .hidden {
            display: none !important;
        }

        @keyframes popIn {
            from {
                transform: scale(0.95);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        /* --- 在 <style> 中添加或确保以下内容 --- */

        /* 用于控制注册模式下用户名的显示 */
        .hidden-height {
            max-height: 0;
            opacity: 0;
            margin: 0;
            padding: 0;
            border: none;
        }

        .show-height {
            max-height: 80px;
            /* 足够容纳输入框的高度 */
            opacity: 1;
            margin-bottom: 15px;
        }

        /* ================================================================
   👤 新版个人中心 (Profile Card UI 2.0)
   ================================================================ */

        /* 1. 模态框容器调整 */
        #profile-modal .modal-box {
            width: 95%;
            max-width: 480px;
            /* 稍微窄一点，更像手机上的卡片 */
            padding: 0;
            /* 移除内边距，为了让背景图铺满 */
            border-radius: 24px;
            background: var(--card);
            overflow: hidden;
            position: relative;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        /* 2. 顶部背景区 (Header) */
        .profile-header-bg {
            height: 140px;
            background: linear-gradient(135deg, var(--primary), #a29bfe);
            position: relative;
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }

        /* 装饰性波浪/圆弧 */
        .profile-header-curve {
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 40px;
            background: var(--card);
            border-radius: 50% 50% 0 0 / 100% 100% 0 0;
            transform: scaleX(1.5);
        }

        /* 3. 头像容器 (Avatar Wrapper) */
        .profile-avatar-wrapper {
            position: relative;
            width: 100px;
            height: 100px;
            margin-bottom: -40px;
            /* 让头像一半在背景上一半在卡片上 */
            z-index: 10;
            cursor: pointer;
            group: hover;
        }

        .profile-avatar-img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 4px solid var(--card);
            object-fit: cover;
            background: white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
            transition: 0.3s;
        }

        /* 悬停时的相机遮罩 */
        .avatar-edit-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 1.5rem;
            opacity: 0;
            transition: 0.3s;
            border: 4px solid var(--card);
        }

        .profile-avatar-wrapper:hover .avatar-edit-overlay {
            opacity: 1;
        }

        /* 4. 主要内容区 */
        .profile-body {
            padding: 50px 30px 30px 30px;
            text-align: center;
        }

        .profile-name {
            font-size: 1.4rem;
            font-weight: 800;
            color: var(--text);
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .vip-badge {
            background: linear-gradient(90deg, #fdcb6e, #e17055);
            color: white;
            font-size: 0.7rem;
            padding: 2px 8px;
            border-radius: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .profile-email {
            font-size: 0.9rem;
            color: var(--sub);
            margin-bottom: 20px;
        }

        /* 5. 数据统计栏 (Stats Row) */
        .profile-stats {
            display: flex;
            justify-content: space-around;
            background: var(--bg);
            padding: 15px;
            border-radius: 16px;
            margin-bottom: 25px;
        }

        .stat-item {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .stat-val {
            font-size: 1.2rem;
            font-weight: 800;
            color: var(--primary);
        }

        .stat-lbl {
            font-size: 0.8rem;
            color: var(--sub);
        }

        /* 6. 表单与按钮 */
        .profile-form-group {
            text-align: left;
            margin-bottom: 20px;
        }

        .profile-label {
            font-size: 0.85rem;
            font-weight: bold;
            color: var(--text);
            margin-bottom: 8px;
            display: block;
        }

        .action-row {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }

        /* 关闭按钮覆盖 */
        .profile-close-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            z-index: 20;
            backdrop-filter: blur(5px);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .profile-close-btn:hover {
            background: rgba(255, 255, 255, 0.4);
        }



        /* --- 导入预览专用样式 --- */

        .preview-header {
            display: flex;
            gap: 10px;
            padding: 10px 15px;
            background: var(--bg);
            border-radius: 10px;
            margin-bottom: 10px;
            font-size: 0.8rem;
            font-weight: 800;
            color: var(--sub);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .preview-item {
            display: flex;
            gap: 12px;
            align-items: center;
            padding: 12px 15px;
            margin-bottom: 8px;
            border-radius: 12px;
            background: var(--card);
            border: 1px solid rgba(0, 0, 0, 0.03);
            transition: all 0.2s ease;
        }

        .preview-item:hover {
            transform: translateX(5px);
            border-color: var(--primary);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .preview-input-w,
        .preview-input-d {
            border: none !important;
            background: rgba(0, 0, 0, 0.03) !important;
            padding: 10px !important;
            border-radius: 8px !important;
            font-size: 0.9rem !important;
            transition: 0.2s !important;
        }

        .preview-input-w:focus,
        .preview-input-d:focus {
            background: white !important;
            box-shadow: inset 0 0 0 2px var(--primary) !important;
        }

        .preview-input-w {
            flex: 1.2;
            font-weight: 800;
            color: var(--primary);
        }

        .preview-input-d {
            flex: 2;
            color: var(--text);
        }

        .preview-del-btn {
            width: 35px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            color: var(--sub);
            background: transparent;
            transition: 0.2s;
        }

        .preview-del-btn:hover {
            background: rgba(255, 118, 117, 0.1);
            color: var(--review);
            transform: scale(1.1);
        }

        /* ================================================================
   📱 移动端深度适配 (Mobile Responsive)
   ================================================================ */
        @media screen and (max-width: 768px) {

            /* 1. 头部极致精简：隐藏搜索框和多余图标，腾出空间给头像 */
            header {
                padding: 0 12px !important;
                height: 50px !important;
                justify-content: space-between !important;
            }

            .brand {
                font-size: 1rem !important;
                min-width: auto !important;
            }

            /* 核心修改：隐藏中间搜索框和右侧多余按钮 */
            .brand span,
            .header-search,
            .nav-right .icon-btn:not([title="夜间模式"]) {
                display: none !important;
            }

            .nav-right {
                gap: 10px !important;
            }

            /* 2. 底部功能导航栏 (Mobile Bottom Nav) */
            .mobile-bottom-nav {
                display: flex !important;
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 60px;
                background: var(--card);
                border-top: 1px solid rgba(0, 0, 0, 0.05);
                z-index: 999;
                justify-content: space-around;
                align-items: center;
                padding-bottom: env(safe-area-inset-bottom);
            }

            .nav-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                color: var(--sub);
                font-size: 0.7rem;
                gap: 4px;
            }

            .nav-item.active {
                color: var(--primary);
            }

            .nav-item i {
                font-size: 1.2rem;
            }

            /* 3. 其他 UI 组件的手机微调 */
            #view-container {
                height: calc(100vh - 110px) !important;
            }

            .dashboard-grid {
                grid-template-columns: 1fr !important;
                gap: 15px;
                padding-bottom: 30px;
            }

            .login-card,
            .game-container,
            .finish-card {
                width: 95% !important;
                padding: 20px !important;
            }

            .word-text {
                font-size: 2.5rem !important;
            }
        }

        /* 新增：沉浸式搜索模态框样式 */
        #search-modal .modal-box {
            width: 95%;
            max-width: 600px;
            height: 80vh;
            /* 占据屏幕 80% 高度 */
            display: flex;
            flex-direction: column;
            padding: 20px;
        }

        .search-input-wrapper {
            display: flex;
            align-items: center;
            background: var(--bg);
            padding: 10px 15px;
            border-radius: 12px;
            margin-bottom: 15px;
            border: 2px solid transparent;
            transition: 0.3s;
        }

        .search-input-wrapper:focus-within {
            border-color: var(--primary);
            background: var(--card);
            box-shadow: var(--shadow);
        }

        .search-input-wrapper input {
            border: none;
            background: transparent;
            outline: none;
            flex: 1;
            font-size: 1rem;
            color: var(--text);
            margin-left: 10px;
        }

        #search-results-list {
            flex: 1;
            overflow-y: auto;
            padding-right: 5px;
        }

        /* 搜索结果项样式 */
        .search-res-item {
            padding: 12px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.03);
            cursor: pointer;
        }

        .search-res-item:active {
            background: rgba(0, 0, 0, 0.05);
        }


        /* 电脑端隐藏此栏 */
        .mobile-bottom-nav {
            display: none;
        }



        /* 1. 仅在有鼠标的设备上启用“上浮”特效 (防止手机点击后卡住) */
        @media (hover: hover) {
            .dash-card:hover {
                transform: translateY(-5px);
            }

            .book-card:hover {
                transform: translateY(-3px);
            }

            .icon-btn:hover {
                background: rgba(0, 0, 0, 0.05);
            }
        }

        /* 2. 手机端点击时的反馈 (增加按压感) */
        .dash-card:active,
        .book-card:active,
        .login-btn:active,
        .dash-btn:active {
            transform: scale(0.96);
            /* 按下时缩小到 96% */
            opacity: 0.9;
            transition: transform 0.1s;
            /* 动画速度加快 */
        }

        /* === 📱 移动端适配专用补丁 (iOS 刘海屏 & 防放大) === */

        /* 1. 适配 iPhone 刘海屏和底部小黑条 (Safe Area) */
        body {
            padding-top: env(safe-area-inset-top);
            /* 避开顶部刘海 */
            padding-bottom: env(safe-area-inset-bottom);
            /* 避开底部小黑条 */
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
            min-height: 100vh;
            /* 确保背景色铺满全屏 */
        }

        /* 2. 防止 iOS 点击输入框自动放大 (强制字体 >= 16px) */
        /* 注意：这可能会让输入框文字在某些小屏上看起来略大，但能完美解决页面乱跳的问题 */
        input,
        textarea,
        select {
            font-size: 16px !important;
        }

        /* 针对部分输入框的微调，保持视觉协调 */
        .login-input,
        .spell-input {
            font-size: 16px !important;
        }

        @media screen and (max-width: 768px) {

            /* 1. 列表容器：移除表格感，增加间距 */
            /* ================================================================
   📱 移动端优先的卡片式列表设计 (Premium Mobile Cards)
   ================================================================
*/

            /* --- 基础容器设置 (确保背景透出来) --- */
            #view-list .list-container,
            #view-list .v-scroll {
                background: transparent !important;
                /* 移除容器白底，让卡片浮起来 */
                box-shadow: none !important;
                border: none !important;
                padding: 10px 15px;
                /* 容器边缘留白 */
            }

            /* --- 卡片核心样式 --- */
            .list-item {
                /* 布局与盒子模型 */
                position: relative;
                /* 为内部绝对定位元素提供基准 */
                display: flex;
                flex-direction: column;
                /* 移动端默认上下结构 */
                box-sizing: border-box;
                width: 100%;

                /* 卡片外观 (高级感核心) */
                background: var(--card);
                /* 适配日/夜模式背景 */
                border-radius: 16px;
                /* 大圆角 */
                /* 双层柔和阴影：一层负责扩散，一层负责轮廓，营造悬浮感 */
                box-shadow:
                    0 8px 20px -4px rgba(0, 0, 0, 0.08),
                    0 4px 8px -2px rgba(0, 0, 0, 0.04);

                /* 间距与呼吸感 */
                margin: 0 0 15px 0 !important;
                /* 卡片间距 */
                padding: 20px;
                /* 充裕的内部空间 */
                border: 1px solid rgba(0, 0, 0, 0.03);
                /* 极细微的边框增强质感 */

                /* 交互 */
                cursor: pointer;
                user-select: none;
                transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
                -webkit-tap-highlight-color: transparent;
                /* 移除点击高亮色块 */
            }

            /* 暗黑模式下的阴影微调 */
            [data-theme="dark"] .list-item {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
                /* 更深邃的阴影 */
                border: 1px solid rgba(255, 255, 255, 0.05);
            }

            /* 点击时的触感反馈 (按压效果) */
            .list-item:active {
                transform: scale(0.97);
                /* 轻微缩小 */
                box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.1);
                /* 阴影收缩 */
            }

            /* --- 左侧内容区排版 --- */
            .item-left {
                display: flex;
                flex-direction: column;
                width: 100%;
                padding-right: 60px;
                /* 右侧留出空间给标签，防止重叠 */
            }

            /* 单词 (主角) */
            .item-left div:first-child {
                font-family: var(--font-serif);
                /* 使用衬线体增加典雅感 */
                font-size: 1.5rem !important;
                /* 更大 */
                font-weight: 700 !important;
                /* 更粗 */
                color: var(--text);
                margin-bottom: 8px;
                letter-spacing: -0.02em;
            }

            /* 释义 (配角) */
            .item-left div:last-child {
                font-size: 0.95rem !important;
                color: var(--sub);
                line-height: 1.5;
                /* 限制显示两行，超出省略 */
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                white-space: normal !important;
            }

            /* --- 右侧状态区 (绝对定位到右上角) --- */
            .item-right {
                position: absolute;
                top: 20px;
                right: 20px;
                display: flex;
                flex-direction: row-reverse;
                /* 星星在标签右侧 */
                align-items: center;
                gap: 8px;
            }

            /* 收藏星星优化 */
            .item-right .fa-star {
                font-size: 1.2rem;
                /* 稍微放大 */
                filter: drop-shadow(0 2px 4px rgba(253, 203, 110, 0.3));
                /* 给金色星星加点光晕 */
            }

            /* 等级标签微调 */
            .level-tag {
                padding: 4px 10px;
                /*稍微加宽 */
                font-weight: 600;
                letter-spacing: 0.5px;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
                /* 标签立体感 */
            }

            /* ================================================================
   💻 电脑端适配 (当屏幕变大时恢复紧凑列表)
   ================================================================
*/
            @media screen and (min-width: 769px) {

                /* 恢复容器背景 */
                #view-list .list-container {
                    background: var(--card) !important;
                    box-shadow: var(--shadow) !important;
                }

                /* 恢复列表项为横向布局 */
                .list-item {
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-between;

                    /* 移除卡片样式，回归列表样式 */
                    border-radius: 0;
                    box-shadow: none;
                    margin: 0 !important;
                    padding: 0 25px;
                    border: none;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
                    /* 仅保留底部分割线 */
                }

                [data-theme="dark"] .list-item {
                    border: none;
                    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
                }

                /* 恢复点击效果为简单的背景变色 */
                .list-item:active {
                    transform: none;
                }

                .list-item:hover {
                    background: rgba(0, 0, 0, 0.02);
                }

                /* 恢复内容排版 */
                .item-left {
                    padding-right: 0;
                    margin-right: 20px;
                }

                /* 电脑端单词可以稍微小一点，用无衬线体更效率 */
                .item-left div:first-child {
                    font-family: var(--font-main);
                    font-size: 1.1rem !important;
                    margin-bottom: 0;
                }

                /* 电脑端释义单行显示 */
                .item-left div:last-child {
                    white-space: nowrap !important;
                    -webkit-line-clamp: unset;
                }

                /* 恢复右侧状态区为流体布局 */
                .item-right {
                    position: static;
                    flex-direction: row;
                }
            }

            /* 5. 拇指热区优化：增加操作按钮的点击区域 */
            .star-btn {
                padding: 10px !important;
                /* 增大触控面积 [专家建议 2.2.3] */
            }
        }

        /* --- 🚫 修复 iOS 输入框放大 Bug --- */
        input,
        textarea {
            font-size: 16px !important;
            /* [专家建议] 防止 iOS 自动缩放 */
        }

        .ai-modal-box {
            width: 90%;
            max-width: 450px;
            padding: 35px 30px;
            border-radius: 24px;
            background: var(--card);
            text-align: center;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(0, 0, 0, 0.03);
        }

        /* 1. 呼吸图标 */
        .ai-icon-wrapper {
            position: relative;
            width: 70px;
            height: 70px;
            margin: 0 auto 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary), #a29bfe);
            color: white;
            font-size: 2rem;
            box-shadow: 0 10px 20px rgba(108, 92, 231, 0.3);
        }

        .ai-icon-glow {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 2px solid var(--primary);
            opacity: 0;
            animation: ripple 2s infinite;
        }

        @keyframes ripple {
            0% {
                transform: scale(1);
                opacity: 0.6;
            }

            100% {
                transform: scale(1.5);
                opacity: 0;
            }
        }

        .ai-title {
            font-size: 1.5rem;
            font-weight: 800;
            margin-bottom: 5px;
            color: var(--text);
        }

        .ai-subtitle {
            font-size: 0.9rem;
            color: var(--sub);
            margin-bottom: 25px;
        }

        /* 2. 悬浮气泡 (Floating Chips) */
        .ai-chips-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-bottom: 25px;
        }

        .ai-chip {
            padding: 8px 16px;
            background: rgba(108, 92, 231, 0.08);
            color: var(--primary);
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            border: 1px solid transparent;
            user-select: none;
            animation: floatChip 4s ease-in-out infinite;
        }

        /* 给每个气泡不同的浮动延迟，制造错落感 */
        .ai-chip:nth-child(2n) {
            animation-delay: 1s;
            background: rgba(0, 184, 148, 0.08);
            color: var(--learn);
        }

        .ai-chip:nth-child(3n) {
            animation-delay: 2s;
            background: rgba(253, 203, 110, 0.1);
            color: #d35400;
        }

        .ai-chip:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            background: white;
            border-color: currentColor;
        }

        .ai-chip:active {
            transform: scale(0.95);
        }

        @keyframes floatChip {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-4px);
            }
        }

        /* 3. 输入框 */
        .ai-input-wrapper {
            position: relative;
            margin-bottom: 20px;
        }

        .ai-input {
            width: 100%;
            padding: 15px 15px 15px 45px;
            /* 左侧留给图标 */
            border-radius: 16px;
            border: 2px solid rgba(0, 0, 0, 0.05);
            background: var(--bg);
            font-size: 1rem;
            color: var(--text);
            outline: none;
            transition: 0.3s;
            text-align: left;
        }

        .ai-input:focus {
            border-color: var(--primary);
            background: var(--card);
            box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.1);
        }

        .input-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--sub);
            font-size: 1.1rem;
        }

        /* 4. 滑块控制 (Range Slider) */
        .ai-slider-container {
            background: var(--bg);
            padding: 15px 20px;
            border-radius: 16px;
            margin-bottom: 25px;
            text-align: left;
        }

        .slider-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 0.9rem;
            color: var(--sub);
            font-weight: bold;
        }

        .slider-value {
            color: var(--primary);
            font-size: 1rem;
        }

        /* 自定义滑块轨道 */
        .ai-range {
            -webkit-appearance: none;
            width: 100%;
            height: 6px;
            border-radius: 5px;
            background: rgba(0, 0, 0, 0.1);
            outline: none;
            transition: 0.2s;
        }

        /* 自定义滑块圆点 */
        .ai-range::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--primary);
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(108, 92, 231, 0.4);
            border: 2px solid white;
            transition: transform 0.2s;
        }

        .ai-range::-webkit-slider-thumb:hover {
            transform: scale(1.2);
        }

        .slider-ticks {
            display: flex;
            justify-content: space-between;
            margin-top: 5px;
            font-size: 0.75rem;
            color: var(--sub);
            opacity: 0.7;
        }

        /* 5. 提交按钮特效 */
        .ai-submit-btn {
            width: 100%;
            padding: 16px;
            border: none;
            border-radius: 50px;
            /* 胶囊形状 */
            background: linear-gradient(90deg, var(--primary), #a29bfe);
            color: white;
            font-size: 1.1rem;
            font-weight: 800;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: 0.3s;
            box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4);
        }

        .ai-submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(108, 92, 231, 0.5);
        }

        .ai-submit-btn:disabled {
            opacity: 0.7;
            cursor: wait;
            background: var(--sub);
        }

        /* 按钮流光特效 */
        .btn-shine {
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
            transform: skewX(-20deg);
            animation: shine 3s infinite;
        }

        @keyframes shine {
            0% {
                left: -100%;
            }

            20% {
                left: 200%;
            }

            100% {
                left: 200%;
            }
        }

        .ai-status-text {
            margin-top: 15px;
            font-size: 0.9rem;
            font-weight: bold;
            color: var(--primary);
            min-height: 1.2em;
        }

        /* =================================================================
   🪵 MUJI 风格书架系统 (The Study Room)
   ================================================================= */

        /* 模态框容器：米白暖色调 */
        #cloud-lib-modal .modal-box {
            background: #fcfaf7 !important;
            /* 极淡的米色，护眼 */
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1) !important;
            border-radius: 16px !important;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        /* 头部：极简主义 */
        #cloud-lib-modal .modal-box>div:first-child {
            background: #fcfaf7 !important;
            border-bottom: 2px solid #efece5;
            /* 浅浅的分隔线 */
            padding: 25px 30px !important;
        }

        #cloud-lib-modal h3 {
            font-family: 'Merriweather', serif;
            /* 衬线体标题 */
            color: #4a4a4a !important;
            /* 深灰，不是纯黑 */
            font-weight: 800;
            letter-spacing: 1px;
        }

        #cloud-lib-modal p {
            color: #8c8c8c !important;
            /* 亚麻灰副标题 */
        }

        #shelf-scroll-area {
            /* 纯净的墙面色，带一点点纹理感 */
            background-color: #f4f4f4;
            background-image: linear-gradient(#f4f4f4 50%, rgba(0, 0, 0, 0.02) 50%), linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
            background-size: 100% 12px, 20px 100%;
            /* 极淡的墙纸纹理 */
            padding: 60px 40px 0 40px !important;
            /* 顶部留白增加 */
            overflow-x: hidden;
        }

        /* 每一层书架：实木层板 */
        .shelf-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: flex-end;
            /* 🌟 关键：让书本底部对齐 */

            padding: 0 20px 0px 20px;
            /* 底部padding设为0，紧贴层板 */
            margin-bottom: 70px;
            /* 层间距 */
            position: relative;
            min-height: 160px;

            /* 🪵 木板层本身 */
            border-bottom: 16px solid #e3dac9;
            /* 橡木色层板 */
            border-radius: 2px;

            /* 层板的投影 (让它看起来是钉在墙上的) */
            box-shadow:
                0 8px 15px -3px rgba(0, 0, 0, 0.1),
                /* 层板下方的阴影 */
                inset 0 -2px 5px rgba(0, 0, 0, 0.05);
            /* 层板表面的质感 */

            /* 取消之前的 3D 倾斜，让书架正对用户，更像生活场景 */
            transform: none !important;
            background: transparent !important;
            /* 去掉之前的科技背景 */
        }

        /* 📚 书本在书架上的姿态修正 */
        .shelf-row .lib-book {
            margin-bottom: 0px !important;
            /* 紧贴木板 */
            transform-origin: bottom center;
            /* 重心在底部 */

            /* 让书本自然站立，稍微有一点点随机的歪斜感会更真实 (由 JS 控制更好，这里给个基础) */
            /* 我们用 CSS 阴影来模拟书本压在架子上的投影 */
            box-shadow:
                1px 0 0 rgba(255, 255, 255, 0.4) inset,
                /* 顶部高光 */
                5px 5px 10px rgba(0, 0, 0, 0.15) !important;
            /* 向右下方的自然投影 */
        }


        .lib-book {
            /* --- 基础布局 (保持不变) --- */
            width: 42px;
            /* 稍微加宽一点，显得稳重 */
            height: 144px;
            margin: 0 12px;
            position: relative;
            cursor: grab;

            /* --- 核心材质升级 --- */

            /* 1. 哑光背景：叠加噪点纹理，模拟纸张/布面触感 */
            background-color: var(--book-color);
            background-image:
                /* 噪点层 (模拟纸张颗粒) */
                url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.12'/%3E%3C/svg%3E"),
                /* 书脊阴影层 (模拟书脊圆弧) */
                linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, transparent 15%, transparent 85%, rgba(0, 0, 0, 0.15) 100%);

            /* 2. 物理形态：柔和的圆角，去掉生硬的边框线 */
            border-radius: 3px 5px 5px 3px;
            border: none;
            /* 去掉廉价描边 */

            /* 3. 仿书脊包布效果 (左侧的一条深色边) */
            border-left: 4px solid rgba(0, 0, 0, 0.15);

            /* 4. 高级投影：多层柔和阴影，营造“放在桌面上”的实感 */
            box-shadow:
                inset 1px 0 2px rgba(255, 255, 255, 0.2),
                /* 顶部微弱高光 */
                1px 1px 2px rgba(0, 0, 0, 0.1),
                /* 接触面的深阴影 */
                4px 4px 12px rgba(0, 0, 0, 0.15);
            /* 弥散的软阴影 */

            /* 5. 3D 姿态：自然的微倾斜 */
            transform-style: preserve-3d;
            transform: perspective(1000px) rotateY(-6deg);
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

            /* --- 文字排版 --- */
            writing-mode: vertical-rl;
            text-orientation: mixed;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 14px 0;

            /* 字体：使用衬线体 (Serif) 增加人文气息 */
            font-family: 'Georgia', 'Merriweather', 'Songti SC', serif;
            font-size: 0.85rem;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.95);
            /* 米白色文字 */
            letter-spacing: 2px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            /* 文字蚀刻感 */

            user-select: none;
            z-index: 5;
        }

        /* 🏷️ 配套：书上的小标签优化 (像贴上去的纸贴) */
        .lib-book .book-tag-sticker {
            background: #fdfbf7 !important;
            /* 米黄纸色 */
            color: #555 !important;
            /* 深灰字 */
            border: 1px solid rgba(0, 0, 0, 0.1) !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            font-family: sans-serif;
            border-radius: 2px;
            bottom: 15px;
        }

        /* 交互：悬停时轻轻拿起 */
        .lib-book:hover {
            transform: perspective(1000px) rotateY(0deg) translateY(-8px) scale(1.02);
            box-shadow:
                inset 1px 0 2px rgba(255, 255, 255, 0.3),
                0 20px 30px -5px rgba(0, 0, 0, 0.2),
                /* 影子变远变虚 */
                0 8px 10px -5px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }

        /* 底部书桌区域 */
        .desk-zone {
            height: 180px;
            position: relative;
            z-index: 20;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            /* 🪵 深胡桃木纹理 (纯 CSS 模拟) */
            background-color: #8a7b6c;
            background-image:
                repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 12px),
                linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));

            /* 桌子边缘的高光 */
            border-top: 6px solid #6d5e53;
            box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15);
            /* 桌子对书架的遮挡阴影 */
        }

        /* 提示文字 */
        .desk-label {
            color: rgba(255, 255, 255, 0.9);
            /* 柔和白字 */
            font-family: 'Merriweather', serif;
            font-size: 1rem;
            font-weight: normal;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            letter-spacing: 2px;
            opacity: 0.8;
        }

        /* 去掉那根绿色的扫描线，改成更优雅的虚线框提示 */
        .desk-scanner-line {
            display: none;
        }

        /* 拖拽时的高亮状态：桌面亮起，出现虚线框 */
        .desk-highlight {
            position: absolute;
            top: 15px;
            left: 15px;
            right: 15px;
            bottom: 15px;
            border: 2px dashed rgba(255, 255, 255, 0.4);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.05);
            display: none;
            pointer-events: none;
        }

        .desk-zone.active-drag .desk-highlight {
            display: block;
            animation: fadeIn 0.3s;
        }

        /* 修改图标 */
        .desk-zone i {
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 10px;
            /* 让图标像刻在桌子上一样 */
            filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2));
            animation: none !important;
            /* 停止旋转，保持静谧 */
        }

        /* 米色系细滚动条 */
        #shelf-scroll-area::-webkit-scrollbar {
            width: 6px;
        }

        #shelf-scroll-area::-webkit-scrollbar-track {
            background: transparent;
        }

        #shelf-scroll-area::-webkit-scrollbar-thumb {
            background: #dcd6cc;
            border-radius: 3px;
        }

        #shelf-scroll-area::-webkit-scrollbar-thumb:hover {
            background: #c0b8ad;
        }

        /* 📊 容量条专属样式 */
        .quota-banner {
            width: 90%;
            max-width: 900px;
            background: var(--card);
            /* 适配深色模式 */
            padding: 18px 25px;
            border-radius: 16px;
            box-shadow: var(--shadow);
            margin-bottom: 25px;
            /* 与下方书架拉开距离 */
            border: 1px solid rgba(0, 0, 0, 0.03);
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .quota-banner:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
            border-color: var(--primary);
        }

        .quota-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.95rem;
        }

        .quota-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: rgba(108, 92, 231, 0.1);
            color: var(--primary);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .quota-value {
            font-family: 'DIN Alternate', 'Arial', sans-serif;
            /* 数字字体 */
            font-weight: bold;
            color: var(--sub);
        }

        /* 进度条轨道 */
        .quota-track {
            width: 100%;
            height: 10px;
            /* 稍微粗一点 */
            background: rgba(0, 0, 0, 0.05);
            border-radius: 5px;
            overflow: hidden;
        }

        /* 进度条填充 */
        .quota-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--primary), #a29bfe);
            border-radius: 5px;
            transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
            box-shadow: 0 0 10px rgba(108, 92, 231, 0.3);
            /* 发光效果 */
        }

        @media (hover: none) {

            .mc-btn:hover,
            .ctrl-btn:hover,
            .dash-btn:hover {
                transform: none !important;
                box-shadow: none !important;
                background-color: inherit !important;
                /* 防止背景色卡在 hover 态 */
            }

            /* 仅在按下时保留反馈 */
            .mc-btn:active,
            .ctrl-btn:active {
                opacity: 0.7;
                transform: scale(0.96) !important;
            }
        }

        /* 1. 让第一个卡片横跨两列 (PC端) */
        .dashboard-grid {
            grid-template-columns: repeat(2, 1fr);
            /* 保持两列布局 */
            gap: 20px;
        }

        /* 核心任务大卡片 */
        .book-console-card {
            grid-column: span 2;
            /* 在网格中横跨两列 */
            display: flex !important;
            /* 👈 强制启用弹性布局 */
            flex-direction: row !important;
            /* 👈 强制横向排列 (左图右钮) */
            background: white;
            border-radius: 24px;
            border: 1px solid rgba(0, 0, 0, 0.05);
            /* 使用更强的阴影增加立体感 */
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), 0 5px 15px rgba(0, 0, 0, 0.03);
            overflow: hidden;
            min-height: 320px;
            /* 增加最小高度，让整体更大气 */
            flex-wrap: nowrap;
            /* 防止换行 */
        }


        /* (保持您的书本 Cover、Tag、Title、Stats 样式不变，这里省略以节省空间，
    请确保您保留了之前关于 .current-book-cover 等元素的皇家版样式) */


        /* 3. 右侧：田字格操作区 (约占 62%) */
        .console-right {
            flex: 6.2;
            /* 👈 占据 6.2份宽度 */
            padding: 30px;
            display: grid;
            /* 启用网格布局 */
            grid-template-columns: repeat(2, 1fr);
            /* 两等列 */
            grid-template-rows: repeat(2, 1fr);
            /* 两等行 */
            gap: 25px;
            /* 按钮间距 */
            height: auto;
            /* 高度自适应 */
        }

        /* 按钮通用样式 (大幅美化) */
        .console-btn {
            border-radius: 20px;
            /* 更圆润 */
            border: none;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
            position: relative;
            overflow: hidden;
            text-align: center;
            padding: 20px;
            /* 增加内部填充 */
            width: 100%;
            height: 100%;
            /* 撑满格子 */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
        }

        /* 悬停效果：上浮+阴影加深 */
        .console-btn:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
        }

        .console-btn:active {
            transform: scale(0.97);
        }

        /* 图标和文字变大 */
        .c-icon {
            font-size: 2.4rem;
            margin-bottom: 10px;
            transition: transform 0.2s;
        }

        .console-btn:hover .c-icon {
            transform: scale(1.1);
        }

        /* 悬停时图标微放大 */

        .c-label {
            font-size: 1.15rem;
            font-weight: 800;
        }

        .c-sub {
            font-size: 0.85rem;
            opacity: 0.7;
            margin-top: 5px;
            font-weight: 500;
        }

        /* 徽章优化 */
        .c-badge {
            position: absolute;
            top: 12px;
            right: 12px;
            background: var(--review);
            color: white;
            font-size: 0.75rem;
            padding: 3px 10px;
            border-radius: 12px;
            font-weight: 900;
            box-shadow: 0 3px 8px rgba(214, 48, 49, 0.3);
        }

        /* 具体按钮配色 (稍微加深一点背景色，更有质感) */
        .btn-review {
            background: rgba(255, 118, 117, 0.12);
            color: var(--review);
        }

        .btn-learn {
            background: rgba(0, 184, 148, 0.12);
            color: var(--learn);
        }

        .btn-browse {
            background: rgba(108, 92, 231, 0.1);
            color: var(--browse);
        }

        .btn-fav {
            background: rgba(253, 203, 110, 0.18);
            color: #d35400;
        }

        /* 悬停变色保持不变... */
        .btn-review:hover {
            background: var(--review);
            color: white;
        }

        .btn-learn:hover {
            background: var(--learn);
            color: white;
        }

        .btn-browse:hover {
            background: var(--browse);
            color: white;
        }

        .btn-fav:hover {
            background: var(--gold);
            color: white;
        }

        .console-left {
            flex: 3.8;
            /* 底色：护眼米白 */
            background-color: #f9f9fb;

            /* ✨ 核心：利用线性渐变绘制网格 */
            background-image:
                /* 竖线 */
                linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
                /* 横线 */
                linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);

            /* 网格大小：24px 的方格 */
            background-size: 24px 24px;

            /* 四周加一个径向遮罩，让网格在边缘淡出，聚光在中间 */
            mask-image: radial-gradient(circle at center, black 40%, rgba(0, 0, 0, 0.5) 100%);
            -webkit-mask-image: radial-gradient(circle at center, black 40%, rgba(0, 0, 0, 0.1) 100%);

            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            border-right: 1px solid rgba(0, 0, 0, 0.04);
            position: relative;
            min-width: 220px;
            overflow: visible;
        }

        /* 2. 书本主体：保持质朴纸感 */
        .current-book-cover {
            width: 106px;
            height: 150px;
            position: relative;
            z-index: 2;
            margin-bottom: 35px;
            /* 给悬浮阴影留出空间 */
            border-radius: 3px 6px 6px 3px;

            /* 材质：哑光纸感 */
            background-color: #e8e6e1;

            /* 书本自身的内阴影 (保持不变) */
            box-shadow:
                inset 4px 0 6px -2px rgba(0, 0, 0, 0.08),
                inset 0 0 20px rgba(0, 0, 0, 0.02);

            display: flex;
            align-items: center;
            justify-content: center;

            /* 默认悬浮状态 */
            transform: translateY(-12px);
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        /* 悬停交互：轻轻上浮 */
        .console-left:hover .current-book-cover {
            transform: translateY(-20px);
            /* 浮得更高一点 */
        }


        .current-book-cover::before {
            content: '';
            position: absolute;
            z-index: -1;

            /* 定位：在书本正下方较远处 */
            bottom: -30px;
            left: 5%;
            width: 90%;
            height: 15px;
            /* 压扁的椭圆 */

            /* 🎨 样式：柔和的黑色光斑 (模拟悬空投影) */
            background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 0%, transparent 60%);

            /* 高斯模糊，让它像影子一样虚化 */
            filter: blur(6px);

            opacity: 0.8;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        /* 悬停时：影子扩散变淡 (更符合物理规律) */
        .console-left:hover .current-book-cover::before {
            bottom: -40px;
            /* 影子距离更远 */
            width: 80%;
            /* 影子稍微聚拢 */
            opacity: 0.5;
            /* 影子变淡 */
            filter: blur(8px);
            /* 影子更虚 */
        }

        /* 3. 书页纹理 (保持不变) */
        .current-book-cover::after {
            content: '';
            position: absolute;
            top: 2px;
            bottom: 2px;
            right: -5px;
            width: 5px;
            background: repeating-linear-gradient(to right,
                    #fcfcfc, #fcfcfc 1px,
                    #efefef 1px, #efefef 2px);
            border-radius: 0 3px 3px 0;
            box-shadow: inset 1px 0 2px rgba(0, 0, 0, 0.05);
            z-index: -2;
        }

        /* ==================== 文字与排版优化 ==================== */

        /* 封面文字：回归质朴 */
        #hero-book-tag {
            font-size: 2.8rem;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            /* 使用系统默认无衬线体 */
            font-weight: 600;
            /* 使用深碳灰色，而非纯黑 */
            color: #4a4a4a;
            text-shadow: none;
            /* 去除所有特效 */
            filter: none;
        }

        /* 书名文字：干净利落 */
        .current-book-title {
            font-size: 1.3rem;
            font-weight: 700;
            color: #2d3436;
            margin-bottom: 12px;
            line-height: 1.4;
            text-shadow: none;
            max-width: 220px;
        }

        /* 统计胶囊：扁平化 */
        .current-book-stats {
            font-size: 0.85rem;
            color: #636e72;
            background: #f1f2f6;
            border: none;
            /* 去除边框 */
            padding: 6px 16px;
            border-radius: 4px;
            /* 圆角变小 */
            font-weight: 600;
            box-shadow: none;
        }


        /* ================================================================
   📱 [极简版移动端适配] 无印良品风 (Muji Mobile)
   ================================================================ */
        @media screen and (max-width: 768px) {

            /* 1. 大容器：垂直堆叠，阴影更淡 */
            .book-console-card {
                flex-direction: column !important;
                min-height: auto !important;
                height: auto !important;
                margin-bottom: 20px;
                /* 极淡的卡片阴影 */
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
                border: 1px solid rgba(0, 0, 0, 0.02);
            }

            /* 2. 顶部信息栏：纯净背景 */
            .console-left {
                flex: 0 0 auto;
                width: 100%;
                padding: 20px 25px;

                flex-direction: row !important;
                /* 横向布局：左书右字 */
                justify-content: flex-start;
                align-items: center;
                gap: 20px;
                text-align: left;

                border-right: none;
                border-bottom: 1px solid rgba(0, 0, 0, 0.04);
                /* 极淡分割线 */

                /* 🔥 改动：去除光照渐变，使用纯净米白/灰白 */
                background: #f8f9fa;
            }

            /* 3. 书本微缩化：纸张质感 */
            .current-book-cover {
                width: 65px;
                /* 缩小尺寸 */
                height: 95px;
                margin-bottom: 0;
                /* 去掉底部边距 */
                flex-shrink: 0;

                /* 移动端取消悬浮，稳稳放着 */
                transform: translateY(0);

                /* 🔥 改动：极简的内阴影，去掉厚重投影 */
                box-shadow:
                    inset 3px 0 5px -2px rgba(0, 0, 0, 0.08),
                    inset 0 0 10px rgba(0, 0, 0, 0.02);
            }

            /* 隐藏移动端的舞台落地阴影 (保持整洁) */
            .current-book-cover::before {
                display: none;
            }

            /* 调整书页厚度 (右侧白边) */
            .current-book-cover::after {
                width: 3px;
                right: -3px;
            }

            /* 封面文字大小 */
            #hero-book-tag {
                font-size: 1.6rem;
            }

            /* 4. 书名与统计 */
            .current-book-title {
                font-size: 1.2rem;
                line-height: 1.3;
                margin-bottom: 6px;
                max-width: 100%;
            }

            .current-book-stats {
                display: inline-block;
                padding: 3px 10px;
                font-size: 0.75rem;
                background: #f1f2f6;
                /* 浅灰胶囊背景 */
            }

            /* 5. 底部操作区：紧凑田字格 */
            .console-right {
                flex: 0 0 auto;
                width: 100%;
                padding: 15px;
                gap: 10px;
                min-height: 200px;
            }

            /* 按钮微调 */
            .console-btn {
                padding: 10px;
                border-radius: 12px;
            }

            .c-icon {
                font-size: 1.6rem;
                margin-bottom: 4px;
            }

            .c-label {
                font-size: 0.9rem;
            }

            .c-sub {
                font-size: 0.65rem;
            }

            .c-badge {
                top: 6px;
                right: 6px;
                font-size: 0.6rem;
                padding: 2px 5px;
            }
        }

        .entertainment-zone {
            grid-column: span 2;
            /* 横跨两列 */
            background: var(--card);
            border-radius: 24px;
            padding: 20px 30px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            /* 左对齐 */
            min-height: auto;
            /* 覆盖旧样式 */
            box-shadow: var(--shadow);
            border: 1px solid rgba(0, 0, 0, 0.03);
        }

        .zone-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
            width: 100%;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            padding-bottom: 15px;
        }

        .game-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            /* 三等分 */
            gap: 20px;
            width: 100%;
        }

        .game-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            border-radius: 16px;
            background: var(--bg);
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid transparent;
        }

        .game-item:hover {
            background: var(--card);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            border-color: var(--primary);
        }

        .game-icon-box {
            width: 45px;
            height: 45px;
            border-radius: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.4rem;
        }

        .game-title {
            font-weight: 800;
            color: var(--text);
            font-size: 1rem;
        }

        .game-desc {
            font-size: 0.8rem;
            color: var(--sub);
            margin-top: 2px;
        }

        /* 📱 移动端适配 */
        @media screen and (max-width: 768px) {
            .game-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            /* 手机上垂直排列 */
            .entertainment-zone {
                padding: 20px;
            }
        }

        /* ================================================================
   🌙 [新增] 夜间模式深度适配 (Dark Mode Deep)
   解决大按钮在黑夜模式下太亮或看不清的问题
   ================================================================ */
        [data-theme="dark"] .book-console-card {
            background: #1e293b !important;
            /* 深蓝灰底色 */
            border-color: rgba(255, 255, 255, 0.05);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }


        [data-theme="dark"] .console-btn {
            background: rgba(255, 255, 255, 0.03);
            /* 极淡的白透明 */
            box-shadow: none;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        [data-theme="dark"] .console-btn:hover {
            background: rgba(255, 255, 255, 0.08);
        }

        /* 针对特定按钮的夜间微调 */
        [data-theme="dark"] .btn-review {
            color: #ff7675;
        }

        [data-theme="dark"] .btn-learn {
            color: #55efc4;
        }

        /* 荧光绿更显眼 */
        [data-theme="dark"] .btn-browse {
            color: #a29bfe;
        }

        [data-theme="dark"] .btn-fav {
            color: #ffeaa7;
        }

        /* 娱乐区夜间适配 */
        [data-theme="dark"] .entertainment-zone {
            background: #1e293b;
            border-color: rgba(255, 255, 255, 0.05);
        }

        [data-theme="dark"] .game-item {
            background: rgba(255, 255, 255, 0.03);
        }

        [data-theme="dark"] .game-item:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: var(--primary);
        }

        /* 1. 左侧背景：深色底 + 亮色网格 (蓝图风格) */
        [data-theme="dark"] .console-left {
            /* 背景变深色 */
            background: #1e293b !important;

            /* ✨ 亮色网格线 (蓝图效果) */
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) !important;
            background-size: 24px 24px !important;

            /* 右边框微调 */
            border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
        }

        /* 2. 书本主体：从“白纸”变为“深灰纸” */
        [data-theme="dark"] .current-book-cover {
            /* 材质变暗：深岩灰 */
            background-color: #334155;

            /* 阴影调整：加深阴影以适应深色环境 */
            box-shadow:
                inset 4px 0 6px -2px rgba(0, 0, 0, 0.5),
                /* 书脊折痕更深 */
                inset 0 0 20px rgba(0, 0, 0, 0.3);
        }

        /* 3. 书本上的封面文字 */
        [data-theme="dark"] #hero-book-tag {
            color: #94a3b8;
            /* 浅灰色文字，不刺眼 */
        }

        /* 4. 书页纹理 (侧面)：变暗 */
        [data-theme="dark"] .current-book-cover::after {
            /* 使用深灰和更深灰的条纹模拟暗色书页 */
            background: repeating-linear-gradient(to right,
                    #475569, #475569 1px,
                    #334155 1px, #334155 2px);
            box-shadow: inset 1px 0 2px rgba(0, 0, 0, 0.3);
        }

        /* 5. 底部悬浮阴影：改为发光或纯黑 */
        [data-theme="dark"] .current-book-cover::before {
            /* 在深色背景上，纯黑阴影可能看不清，可以用深黑加一点点弥散 */
            background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.8) 0%, transparent 70%);
            opacity: 0.6;
        }

        /* 6. 底部文字修复：变亮 */
        [data-theme="dark"] .current-book-title {
            color: #f1f5f9 !important;
            /* 亮白色标题 */
        }

        [data-theme="dark"] .current-book-stats {
            background: rgba(255, 255, 255, 0.1);
            /* 半透明白底胶囊 */
            color: #cbd5e1;
            /* 亮灰文字 */
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        /* 📱 移动端夜间适配补丁 */
        @media screen and (max-width: 768px) {
            [data-theme="dark"] .console-left {
                background-color: #1e293b !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            }
        }

        [data-theme="dark"] .game-container {
            background-color: #1e293b !important;
            /* 深岩灰，与背景区分 */
            border: 1px solid rgba(255, 255, 255, 0.08);
            /* 增加微发光边框 */
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
            /* 加深阴影，营造悬浮感 */
            color: #e2e8f0;
            /* 全局文字变亮 */
        }

        /* 2. 顶部导航栏按钮：防止看不清 */
        [data-theme="dark"] .game-container button.icon-btn {
            color: #94a3b8;
        }

        [data-theme="dark"] .game-container button.icon-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        /* --- 🦅 鹰眼特训专属适配 --- */

        /* 3. 单词释义 (中间那行解释) */
        [data-theme="dark"] #hawk-def {
            color: #cbd5e1 !important;
            /* 亮灰白，高可读性 */
            font-weight: 500;
        }

        /* 4. 计时器：增加霓虹光晕 */
        [data-theme="dark"] .hawk-timer {
            color: var(--hawkeye);
            /* 保持电光蓝 */
            text-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
            /* 增加科幻感光晕 */
        }

        /* 5. 放置区域的下划线 */
        [data-theme="dark"] .hawk-area {
            border-bottom-color: rgba(255, 255, 255, 0.1);
            /* 变暗，不刺眼 */
        }

        /* 6. 🔠 字母方块 (Tiles)：核心修复，防止和背景混在一起 */
        [data-theme="dark"] .hawk-tile {
            /* 这里的颜色比背景 (#1e293b) 稍亮，形成层次感 */
            background-color: #334155 !important;
            color: #f8fafc !important;

            /* 增加边框和阴影，让方块“立”起来 */
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
        }

        /* 悬停高亮 */
        [data-theme="dark"] .hawk-tile:hover {
            border-color: var(--hawkeye) !important;
            background-color: #475569 !important;
            transform: translateY(-2px);
        }

        /* 已经被放置到上面的方块 (保持高亮色) */
        [data-theme="dark"] .hawk-tile.placed {
            background-color: var(--hawkeye) !important;
            color: #000 !important;
            /* 亮色背景配深色字 */
            border: none !important;
            box-shadow: 0 0 10px rgba(56, 189, 248, 0.5) !important;
        }

        /* --- ⌨️ Hangman/Wordle 键盘适配 (顺便修一下其他游戏) --- */
        [data-theme="dark"] .key-btn {
            background: #334155;
            /* 深色键帽 */
            border-color: #475569;
            border-bottom-color: #1e293b;
            /* 底部阴影更深 */
            color: #e2e8f0;
        }

        [data-theme="dark"] .key-btn:hover:not(:disabled) {
            background: #475569;
        }

        [data-theme="dark"] .key-btn:active:not(:disabled) {
            background: #1e293b;
        }

        /* 字母输入框 (Wordle) */
        [data-theme="dark"] .w-cell {
            background: #0f172a;
            border-color: #334155;
            color: #fff;
        }


        [data-theme="dark"] #game-menu h3 {
            color: var(--gold) !important;
            /* 金色荧光 */
            text-shadow: 0 0 15px rgba(253, 203, 110, 0.4);
        }

        /* Wordle 标题 */
        [data-theme="dark"] #view-wordle div[style*="font-weight:bold"] {
            color: var(--wordle) !important;
            /* 紫色荧光 */
            text-shadow: 0 0 15px rgba(155, 89, 182, 0.4);
        }

        /* Hawkeye 标题 (加强荧光感) */
        [data-theme="dark"] #view-hawkeye div[style*="color:var(--hawkeye)"] {
            text-shadow: 0 0 15px rgba(52, 73, 94, 0.5);
            /* 这里的颜色会自动适配暗色定义 */
        }

        /* --- 3. Hangman 规则说明卡：暗色适配 --- */
        [data-theme="dark"] .game-intro-box {
            background: rgba(255, 255, 255, 0.03) !important;
            /* 极淡透明白 */
            border-color: rgba(255, 255, 255, 0.08) !important;
        }

        [data-theme="dark"] .intro-header {
            color: #e2e8f0 !important;
            /* 亮白标题 */
        }

        [data-theme="dark"] .intro-text {
            color: #94a3b8 !important;
            /* 灰蓝正文 */
        }

        /* 技巧胶囊 */
        [data-theme="dark"] .intro-tip-capsule {
            background: rgba(0, 0, 0, 0.3) !important;
            /* 深色底 */
            border-color: rgba(255, 255, 255, 0.1) !important;
            color: var(--primary-light) !important;
            /* 浅紫色文字 */
        }


        /* ================================================================
   🔦 [Hangman 夜间模式] 荧光修复补丁 (Neon Fix)
   ================================================================ */

        /* 1. 绞刑架 SVG：从“黑色笔迹”变为“电光蓝激光” */
        [data-theme="dark"] .hangman-svg line,
        [data-theme="dark"] .hangman-svg circle {
            /* 使用亮青色/电光蓝 */
            stroke: #00f3ff !important;
            /* 添加发光滤镜，制造霓虹灯管效果 */
            filter: drop-shadow(0 0 4px rgba(0, 243, 255, 0.6));
            /* 稍微降低一点透明度，不刺眼 */
            opacity: 0.9;
        }

        /* 2. 危险状态：当生命垂危时，线条变红光 */
        [data-theme="dark"] .hangman-svg.danger line,
        [data-theme="dark"] .hangman-svg.danger circle {
            stroke: #ff4757 !important;
            filter: drop-shadow(0 0 8px rgba(255, 71, 87, 0.6));
        }


        [data-theme="dark"] .game-word-display {
            color: #ffffff !important;
            /* 文字周围一圈淡淡的白光，增加悬浮感 */
            text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
            letter-spacing: 12px;
            /* 稍微拉大间距，更透气 */
        }

        /* 4. 中间提示词 (释义/词性)：提亮为银灰色 */
        [data-theme="dark"] .game-hint {
            color: #cbd5e1 !important;
            /* 亮灰白 */
            font-weight: 500;
            text-shadow: none;
        }

        /* 5. 游戏状态文字 (如：胜利/失败)：金色荧光 */
        [data-theme="dark"] #game-status {
            color: var(--gold) !important;
            text-shadow: 0 0 10px rgba(253, 203, 110, 0.3);
        }

        [data-theme="dark"] .book-delete {
            /* 1. 背景由“亮白”改为“深黑半透明”，融入卡片背景 */
            background: rgba(0, 0, 0, 0.2) !important;

            /* 2. 图标颜色调整为低调的灰白色 */
            color: rgba(255, 255, 255, 0.3) !important;

            /* 3. 增加一点微弱的边框，提升精致度（可选） */
            border: 1px solid rgba(255, 255, 255, 0.05) !important;
        }

        /* 悬停时的效果：保持醒目的红色，提醒这是危险操作 */
        [data-theme="dark"] .book-delete:hover {
            background: var(--review) !important;
            /* 变红 */
            color: white !important;
            border-color: var(--review) !important;
            opacity: 1;
            transform: scale(1.1);
            /* 稍微放大 */
        }

        .quick-action-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            /* 左右等分 */
            gap: 15px;
            width: 90%;
            max-width: 900px;
            margin-bottom: 25px;
            /* 与下方书库拉开距离 */
        }

        /* 通用卡片基底 */
        .action-card {
            position: relative;
            display: flex;
            align-items: center;
            padding: 18px 20px;
            border-radius: 20px;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            border: 1px solid rgba(0, 0, 0, 0.03);
            box-shadow: var(--shadow);
        }

        /* 悬停动效：上浮 + 投影加深 */
        .action-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        }

        .action-card:active {
            transform: scale(0.98);
        }

        /* --- 🟣 AI 卡片配色 (极光紫) --- */
        .ai-action {
            background: linear-gradient(135deg, #ffffff 0%, #fefaff 100%);
        }

        .ai-action .action-icon-box {
            background: linear-gradient(135deg, #6c5ce7, #a29bfe);
            color: white;
            box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3);
        }

        .ai-action .action-title {
            color: #6c5ce7;
        }

        /* --- 🔵 云书馆卡片配色 (天空蓝) --- */
        .cloud-action {
            background: linear-gradient(135deg, #ffffff 0%, #f0fcff 100%);
        }

        .cloud-action .action-icon-box {
            background: linear-gradient(135deg, #00b894, #00cec9);
            /* 使用清爽的青蓝渐变 */
            color: white;
            box-shadow: 0 4px 12px rgba(0, 184, 148, 0.3);
        }

        .cloud-action .action-title {
            color: #00b894;
        }

        /* --- 内部元素布局 --- */
        .action-icon-box {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.4rem;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .action-text {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .action-title {
            font-size: 1rem;
            font-weight: 800;
            margin-bottom: 3px;
        }

        .action-desc {
            font-size: 0.75rem;
            color: var(--sub);
            opacity: 0.8;
            font-weight: 500;
        }

        .action-arrow {
            font-size: 0.9rem;
            color: #dfe6e9;
            transition: 0.3s;
        }

        .action-card:hover .action-arrow {
            color: var(--sub);
            transform: translateX(3px);
        }

        /* --- 🌙 夜间模式适配 (Dark Mode) --- */
        [data-theme="dark"] .ai-action {
            background: linear-gradient(135deg, #2d2b35 0%, #25232d 100%);
            border: 1px solid rgba(108, 92, 231, 0.2);
        }

        [data-theme="dark"] .cloud-action {
            background: linear-gradient(135deg, #1e2d2b 0%, #1a2524 100%);
            border: 1px solid rgba(0, 184, 148, 0.2);
        }

        [data-theme="dark"] .action-title {
            color: white !important;
        }

        /* 夜间标题变白 */
        [data-theme="dark"] .action-desc {
            color: #b2bec3;
        }

        /* 📱 移动端适配 */
        @media screen and (max-width: 480px) {
            .quick-action-row {
                gap: 10px;
                /* 间距缩小 */
            }

            .action-card {
                padding: 15px;
                /* 内边距缩小 */
                flex-direction: column;
                /* 垂直排列图标和文字 */
                text-align: center;
                justify-content: center;
            }

            .action-icon-box {
                margin-right: 0;
                margin-bottom: 8px;
                width: 42px;
                height: 42px;
                font-size: 1.2rem;
            }

            .action-arrow {
                display: none;
            }

            /* 手机上隐藏箭头，省空间 */
        }

        #hero-sub-new {
            /* 1. 核心布局：胶囊形状 */
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            /* 文字和笔图标的间距 */

            /* 2. 视觉突显：白底绿字 (反色设计) */
            background: #ffffff;
            color: var(--learn);
            /* 使用新词的绿色 */

            /* 3. 尺寸与间距 */
            margin-top: 8px;
            padding: 4px 12px;
            /* 撑开内部空间 */
            border-radius: 20px;
            /* 完全圆角 */

            /* 4. 字体微调 */
            font-size: 0.8rem;
            font-weight: 800;
            /* 加粗更像按钮 */

            /* 5. 物理质感 */
            box-shadow: 0 3px 8px rgba(0, 184, 148, 0.15);
            /* 淡淡的绿色投影 */
            border: 1px solid rgba(0, 184, 148, 0.1);
            /* 极细的描边 */

            /* 6. 交互属性 */
            cursor: pointer;
            /* 鼠标变手型 */
            position: relative;
            z-index: 5;
            /* 确保在最上层 */
            transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        /* 🖱️ 悬停交互：放大并加深投影 */
        #hero-sub-new:hover {
            transform: scale(1.1) translateY(-1px);
            /* 明显放大 */
            box-shadow: 0 6px 12px rgba(0, 184, 148, 0.25);
            background: #fff;
            color: #00a884;
            /* 颜色加深一点 */
        }

        /* 🖱️ 点击瞬间：按压感 */
        #hero-sub-new:active {
            transform: scale(0.95);
            box-shadow: 0 2px 4px rgba(0, 184, 148, 0.1);
        }

        /* 🌙 夜间模式适配 */
        [data-theme="dark"] #hero-sub-new {
            background: rgba(255, 255, 255, 0.1);
            /* 深色下用半透明白 */
            color: #55efc4;
            /* 荧光绿字 */
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: none;
        }

        [data-theme="dark"] #hero-sub-new:hover {
            background: rgba(255, 255, 255, 0.2);
        }



        [data-theme="dark"] #cloud-lib-modal .modal-box {
            background-color: #14100c !important;
            /* 极深的暖黑色 */
            border: 1px solid rgba(255, 255, 255, 0.05);
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8) !important;
        }

        /* 2. 头部：隐入黑暗，文字泛金光 */
        [data-theme="dark"] #cloud-lib-modal .modal-box>div:first-child {
            background-color: #14100c !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        [data-theme="dark"] #cloud-lib-modal h3 {
            color: #d4c5a9 !important;
            /* 古书纸页的泛黄色 */
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
            /* 文字浮起感 */
        }

        [data-theme="dark"] #cloud-lib-modal p {
            color: #8b8070 !important;
            /* 暗淡的灰褐色 */
        }

        /* 关闭按钮适配 */
        [data-theme="dark"] .modal-close-btn {
            background: rgba(255, 255, 255, 0.05);
            color: #a09080;
        }

        [data-theme="dark"] .modal-close-btn:hover {
            background: #8b0000;
            /* 悬停变暗红 */
            color: white;
        }

        /* 3. 书架墙面：核心氛围营造 (油灯光效) */
        [data-theme="dark"] #shelf-scroll-area {
            /* 底色：深邃暗室 */
            background-color: #0f0c0a !important;

            /* 🔥 核心魔法：多层背景模拟油灯光照 */
            background-image:
                /* 第一层：暖黄色的中心光晕 (模拟油灯光源) */
                radial-gradient(circle at 50% 20%, rgba(255, 180, 100, 0.12) 0%, transparent 60%),

                /* 第二层：四周的黑色暗角 (Vignette)，营造聚焦感 */
                radial-gradient(circle at 50% 50%, transparent 40%, #000000 100%),

                /* 第三层：原有的纹理保留，但极其微弱 */
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px) !important;

            background-size: 100% 100%, 100% 100%, 20px 20px, 20px 20px !important;
            background-attachment: local;
            /* 随滚动移动，增加真实感 */
        }

        /* 4. 书架层板：黑胡桃木质感 */
        [data-theme="dark"] .shelf-row {
            /* 变成深红褐色/黑胡桃色 */
            border-bottom-color: #3e2723 !important;

            /* 加深层板下方的阴影，增加立体悬浮感 */
            box-shadow:
                0 15px 25px -5px rgba(0, 0, 0, 0.6),
                inset 0 -2px 10px rgba(0, 0, 0, 0.5);
        }

        /* 5. 书本：旧时光滤镜 */
        [data-theme="dark"] .lib-book {
            /* 降低亮度，增加暖色滤镜，模拟昏暗光线下的书 */
            filter: brightness(0.75) sepia(0.3) contrast(1.1);

            /* 加深书本的投影 */
            box-shadow:
                inset 1px 0 2px rgba(255, 255, 255, 0.1),
                /* 高光变暗 */
                2px 2px 5px rgba(0, 0, 0, 0.5),
                /* 接触阴影 */
                5px 5px 15px rgba(0, 0, 0, 0.6);
            /* 投射阴影 */
        }

        /* 悬停时稍微亮一点，像拿到了灯下 */
        [data-theme="dark"] .lib-book:hover {
            filter: brightness(0.9) sepia(0.2);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
        }

        /* 书本上的小标签 */
        [data-theme="dark"] .lib-book .book-tag-sticker {
            background: #dcd0c0 !important;
            /* 泛黄的旧纸片色 */
            color: #2c2c2c !important;
            border-color: #555 !important;
        }

        /* 6. 底部书桌：红木书案 */
        [data-theme="dark"] .desk-zone {
            /* 深红木色 */
            background-color: #2a1b15 !important;

            /* 桌面纹理叠加 */
            background-image:
                repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 12px),
                /* 桌面的光反射：模拟上方油灯的倒影 */
                radial-gradient(ellipse at center top, rgba(255, 160, 80, 0.1) 0%, transparent 70%) !important;

            /* 桌子边缘 */
            border-top: 6px solid #1a100c !important;
        }

        /* 桌面文字 */
        [data-theme="dark"] .desk-label {
            color: rgba(220, 200, 180, 0.6);
            /* 暗金色文字 */
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
        }

        [data-theme="dark"] .desk-zone i {
            color: rgba(220, 200, 180, 0.5);
        }

        /* 拖拽时的桌面高亮：发光的符文效果 */
        [data-theme="dark"] .desk-highlight {
            border-color: rgba(255, 200, 100, 0.4);
            background: rgba(255, 200, 100, 0.05);
            box-shadow: inset 0 0 20px rgba(255, 140, 0, 0.1);
        }

        /* 7. 滚动条适配：暗色金属质感 */
        [data-theme="dark"] #shelf-scroll-area::-webkit-scrollbar-thumb {
            background: #4a3b32;
        }

        [data-theme="dark"] #shelf-scroll-area::-webkit-scrollbar-thumb:hover {
            background: #5d4a3f;
        }

        /* 1. 针对词书库列表 (.lib-grid) 的滚动条容器 */
        .lib-grid::-webkit-scrollbar {
            height: 6px;
            /* 横向滚动条高度：极细 */
            width: 6px;
            /* 纵向宽度 */
        }

        /* 2. 滚动轨道 (Track)：平时几乎隐形 */
        .lib-grid::-webkit-scrollbar-track {
            background: transparent;
            /* 透明轨道，不遮挡背景 */
            border-radius: 10px;
            /* 两端圆角 */
            margin: 0 10px;
            /* 左右留白，不顶头 */
        }

        /* 3. 滚动滑块 (Thumb)：默认半透明灰色 */
        .lib-grid::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.1);
            /* 极淡的灰色，不抢眼 */
            border-radius: 10px;
            /* 完全圆润 */
            transition: all 0.3s ease;
            /* 颜色变化过渡 */
        }

        /* 4. 鼠标悬停在列表上时：滑块变深，提示可拖动 */
        .lib-grid:hover::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.2);
        }

        /* 5. 鼠标按住滑块时：更深，反馈感 */
        .lib-grid::-webkit-scrollbar-thumb:active {
            background: var(--primary);
            /* 按住变成品牌紫色 */
        }

        /* ----------------------------------------------------
   🌙 暗色模式适配 (Dark Mode Scrollbar)
   ---------------------------------------------------- */

        /* 轨道在暗色下依然透明 */
        [data-theme="dark"] .lib-grid::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.02);
        }

        /* 滑块变成半透明白色，不再是突兀的灰白条 */
        [data-theme="dark"] .lib-grid::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.15);
            /* 幽灵白 */
        }

        [data-theme="dark"] .lib-grid:hover::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.3);
            /* 悬停变亮 */
        }

        [data-theme="dark"] .lib-grid::-webkit-scrollbar-thumb:active {
            background: var(--primary);
            /* 按住变成荧光紫 */
        }

        /* 兼容 Firefox (不支持 webkit 伪类) */
        .lib-grid {
            scrollbar-width: thin;
            /* 细条模式 */
            scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
            /* 滑块色 轨道色 */
        }

        [data-theme="dark"] .lib-grid {
            scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
        }

        :root {
            /* 字体栈：优先使用日语字体，Windows/Mac/iOS 通杀 */
            /* 衬线体 (用于单词、书名，更有文学感) */
            --font-jp-serif: "Hina Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Times New Roman", serif;
            /* 无衬线体 (用于注音、解释，清晰易读) */
            --font-jp-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", "Yu Gothic", sans-serif;
        }

        /* 1. 全局 Ruby (注音) 基础样式 */
        ruby {
            font-family: var(--font-jp-serif);
            /* 汉字用宋体 */
            ruby-position: over;
            /* 强制注音在上方 */
            -webkit-ruby-position: over;
            /* 兼容 Safari */
            letter-spacing: 0.05em;
            /* 汉字间稍微留点空隙 */
            font-weight: normal;
            /* 防止被父级加粗影响美观 */
        }

        /* 2. RT (假名/注音) 样式 */
        rt {
            font-family: var(--font-jp-sans);
            /* 假名用黑体，更清晰 */
            color: var(--sub);
            /* 使用次要颜色，不抢眼 */
            font-size: 0.4em;
            /* 字号设为汉字的 40% */
            font-weight: 400;
            line-height: 1;
            user-select: none;
            /* 防止复制单词时把注音也复制走 */
            opacity: 0.9;
        }

        /* 3. 单词卡片特调 (针对大字号优化) */
        /* 修复：在大卡片中，rt 可能会太贴近汉字 */
        .flashcard .word-text ruby {
            display: inline-flex;
            /* 🔥 核心修复：改为 column-reverse，让注音(rt)跑到汉字上方 */
            flex-direction: column-reverse;
            align-items: center;
            vertical-align: bottom;
            margin: 0 5px;
            /* 稍微增加左右间距 */
        }

        /* 微调注音的位置和大小 */
        .flashcard .word-text rt {
            font-size: 0.35em;
            /* 因为反转了，这里不需要 transform 负值，或者微调 margin */
            margin-bottom: 5px;
            /* 给注音和汉字之间留点空隙 */
            font-weight: normal;
            line-height: 1;
        }

        /* 4. 竖排书封 (文库本风格) */
        /* 只有当书本有 .jp-mode 类时生效 */
        .book-card.jp-mode .book-title {
            writing-mode: vertical-rl;
            /* 从右向左竖排 */
            text-orientation: upright;
            /* 字符直立 (123也会直立) */
            font-family: var(--font-jp-serif);
            letter-spacing: 0.2em;
            /* 竖排字间距要大才好看 */
            line-height: 1.5;

            /* 布局修正：竖排时的居中 */
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            /* 在竖排中，这是水平居中 */
            justify-content: center;
            /* 在竖排中，这是垂直居中 */
            text-align: center;

            /* 溢出处理 */
            overflow: hidden;
            max-height: 110px;
        }

        /* 5. 竖排书封的副标题 (如 "共20词") 还原为横排 */
        .book-card.jp-mode .book-info {
            writing-mode: horizontal-tb;
            margin-top: 5px;
        }

        #search-modal .modal-box {
            width: 90%;
            max-width: 720px;
            /* 宽度从 600px 增加到 720px */
            height: 75vh;
            /* 高度适中，不占满全屏，更有悬浮感 */
            max-height: 850px;
            padding: 0 !important;
            /* 移除默认内边距，由内部布局控制 */
            background: var(--card);
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25) !important;
            /* 深邃的投影 */
            border-radius: 24px;
            overflow: hidden;
            /* 防止圆角溢出 */
            display: flex;
            flex-direction: column;
        }

        /* 2. 头部固定区 (新布局容器) */
        .search-header-area {
            padding: 25px 30px 20px 30px;
            background: var(--bg);
            /* 头部稍微深一点，与结果区区分 */
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            flex-shrink: 0;
        }

        /* 3. 语言切换按钮优化 */
        .lang-switch-row {
            justify-content: flex-start !important;
            /* 左对齐，更符合视线流 */
            margin-bottom: 15px !important;
        }

        .lang-switch-row .dash-btn {
            padding: 6px 18px !important;
            font-size: 0.85rem !important;
            border-radius: 10px !important;
            box-shadow: none !important;
            border: 1px solid transparent;
            transition: 0.2s;
        }

        /* 未选中状态增加淡边框，更有质感 */
        .lang-switch-row .dash-btn[style*="var(--bg)"] {
            border-color: rgba(0, 0, 0, 0.1);
            background: rgba(255, 255, 255, 0.5) !important;
        }

        /* 4. 输入框容器：巨型搜索条 */
        .search-input-wrapper {
            height: 64px;
            /* 增高，显得大气 */
            padding: 0 20px !important;
            background: var(--card) !important;
            border: 2px solid transparent !important;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
            border-radius: 16px !important;
            margin-bottom: 0 !important;
        }

        /* 聚焦时的光晕效果 */
        .search-input-wrapper:focus-within {
            border-color: var(--primary) !important;
            box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.15) !important;
            transform: translateY(-1px);
        }

        /* 5. 输入框文字本体 */
        #modal-search-inp {
            font-size: 1.4rem !important;
            /* 字号加大 */
            font-weight: 600;
            margin-left: 15px !important;
            height: 100%;
            color: var(--text);
        }

        /* 搜索图标放大 */
        .search-input-wrapper i.fa-search {
            font-size: 1.3rem !important;
            opacity: 0.7;
        }

        /* 6. 结果列表区 */
        #search-results-list {
            flex: 1;
            padding: 20px 30px;
            overflow-y: auto;
            background: var(--card);
            /* 纯净背景 */
        }

        /* 7. 底部关闭按钮 (弱化处理) */
        #search-modal .modal-box>button.dash-btn {
            margin: 10px auto 15px auto !important;
            background: transparent !important;
            color: var(--sub) !important;
            border: 1px solid rgba(0, 0, 0, 0.1) !important;
            width: auto !important;
            padding: 8px 40px !important;
            font-size: 0.9rem !important;
        }

        #search-modal .modal-box>button.dash-btn:hover {
            border-color: var(--review) !important;
            color: var(--review) !important;
            background: rgba(255, 118, 117, 0.05) !important;
        }


        [data-theme="dark"] #search-modal .modal-box {
            background: #1e293b !important;
            /* 深岩灰 */
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8) !important;
            /* 更深邃的黑影 */
            border: 1px solid rgba(255, 255, 255, 0.05);
            /* 微光边框 */
        }

        /* 2. 头部区域：区分层次 */
        [data-theme="dark"] .search-header-area {
            background: #0f172a !important;
            /* 极深蓝灰，比下方内容区更暗 */
            border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        }

        /* 3. 输入框：发光感 */
        [data-theme="dark"] .search-input-wrapper {
            background: #1e293b !important;
            border: 1px solid rgba(255, 255, 255, 0.05) !important;
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
            /* 内阴影增加深陷感 */
        }

        [data-theme="dark"] .search-input-wrapper i {
            color: #94a3b8 !important;
            /* 图标变亮灰 */
        }

        [data-theme="dark"] #modal-search-inp {
            color: #f1f5f9 !important;
            /* 文字亮白 */
        }

        [data-theme="dark"] #modal-search-inp::placeholder {
            color: #475569;
            /* 占位符暗灰 */
        }

        /* 4. 结果列表容器 */
        [data-theme="dark"] #search-results-list {
            background: #1e293b !important;
        }

        /* 5. 搜索结果项：悬浮卡片感 */
        [data-theme="dark"] .search-res-item {
            background: #334155 !important;
            /* 比背景稍亮 */
            border: 1px solid rgba(255, 255, 255, 0.05) !important;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
        }

        [data-theme="dark"] .search-res-item:hover {
            border-color: var(--primary) !important;
            background: #475569 !important;
        }

        /* 文字适配 */
        [data-theme="dark"] .search-res-item div[style*="color:var(--text)"] {
            color: #e2e8f0 !important;
        }

        [data-theme="dark"] .search-res-item div[style*="color:var(--sub)"] {
            color: #94a3b8 !important;
        }

        /* 6. 按钮适配 */
        [data-theme="dark"] .lang-switch-row .dash-btn[style*="var(--bg)"] {
            background: rgba(255, 255, 255, 0.05) !important;
            color: #94a3b8 !important;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        /* 底部关闭按钮 */
        [data-theme="dark"] #search-modal .modal-box>button.dash-btn {
            border-color: rgba(255, 255, 255, 0.1) !important;
            color: #94a3b8 !important;
        }

        [data-theme="dark"] #search-modal .modal-box>button.dash-btn:hover {
            background: rgba(255, 255, 255, 0.05) !important;
            color: #f1f5f9 !important;
        }

        /* 移动端适配：防止在手机上太大 */
        @media screen and (max-width: 768px) {
            #search-modal .modal-box {
                width: 100%;
                height: 100%;
                border-radius: 0;
                max-height: none;
            }

            .search-input-wrapper {
                height: 50px;
            }

            #modal-search-inp {
                font-size: 1.1rem !important;
            }
        }

        #search-results-list {
            /* 开启平滑滚动 */
            scroll-behavior: smooth;
            /* 留出一点底部空间，防止最后一个卡片贴底 */
            padding-bottom: 20px;
            /* 确保滚动条在容器内部 */
            overflow-y: overlay;
        }

        /* --- Webkit 核心滚动条样式 (Chrome/Safari/Edge) --- */

        /* 轨道 (Track) */
        #search-results-list::-webkit-scrollbar {
            width: 6px;
            /* 极细宽度 */
            background: transparent;
            /* 轨道透明 */
        }

        /* 滑块 (Thumb) - 日间模式 */
        #search-results-list::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.15);
            /* 淡淡的灰色 */
            border-radius: 10px;
            /* 圆润两头 */
            transition: all 0.3s;
        }

        /* 悬停时加深 */
        #search-results-list::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.3);
        }

        /* --- 🌙 夜间模式：荧光特调 --- */

        /* 滑块 - 夜间模式 */
        [data-theme="dark"] #search-results-list::-webkit-scrollbar-thumb {
            /* 核心颜色：使用主色调 (赛博紫/电光蓝) */
            background: var(--primary);
            /* ✨ 注入灵魂：荧光光晕效果 */
            box-shadow: 0 0 8px var(--primary), inset 0 0 3px rgba(255, 255, 255, 0.5);
            border-radius: 10px;
        }

        /* 悬停时更亮 */
        [data-theme="dark"] #search-results-list::-webkit-scrollbar-thumb:hover {
            background: #a29bfe;
            /* 变亮 */
            box-shadow: 0 0 15px #a29bfe;
            /* 光晕扩散 */
        }

        /* 列表底部的加载提示器样式 */
        .search-loading-indicator {
            text-align: center;
            padding: 15px;
            color: var(--sub);
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            opacity: 0.8;
        }

        data-theme="dark"] .header-search {
            /* 背景：极低透明度的黑色，制造镂空感 */
            background: rgba(0, 0, 0, 0.2) !important;

            /* 边框：使用主色调 (var(--primary)) 作为荧光色 */
            border: 1px solid var(--primary) !important;

            /* 光晕：核心魔法！
       - 第一层 box-shadow: 外部扩散光晕
       - 第二层 inset: 内部玻璃反光感 
    */
            box-shadow: 0 0 15px rgba(108, 92, 231, 0.25),
                inset 0 0 20px rgba(108, 92, 231, 0.05) !important;

            /* 磨砂质感：背景模糊，提升高级感 */
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);

            transition: all 0.3s ease;
        }

        /* 2. 悬停交互：光晕增强 (呼吸感) */
        [data-theme="dark"] .header-search:hover {
            box-shadow: 0 0 25px rgba(108, 92, 231, 0.4),
                inset 0 0 10px rgba(108, 92, 231, 0.1) !important;
            transform: translateY(-1px);
            /* 轻微上浮 */
            border-color: #a29bfe !important;
            /* 边框变亮 */
        }

        /* 3. 图标改造：霓虹灯管效果 */
        [data-theme="dark"] .header-search i {
            color: var(--primary) !important;
            /* 文字阴影制造发光效果 */
            text-shadow: 0 0 8px var(--primary);
            opacity: 1 !important;
        }


        [data-theme="dark"] #header-trigger-inp {
            /* 🔥 核心修复：把背景去掉，让它透出底下的玻璃效果 */
            background: transparent !important;
            border: none !important;
            /* 确保没有边框干扰 */

            color: #fff !important;
            font-weight: 500;
        }

        /* 占位符文字稍微暗一点 */
        [data-theme="dark"] #header-trigger-inp::placeholder {
            color: rgba(255, 255, 255, 0.5) !important;
        }

        #v-scroll-container {
            scroll-behavior: smooth;
            /* 确保滚动条在容器内部，不挤占布局 (仅支持 Webkit 内核) */
            overflow-y: overlay;
        }

        /* --- Webkit 核心滚动条样式 (Chrome/Safari/Edge) --- */

        /* 轨道 (Track) - 设为透明 */
        #v-scroll-container::-webkit-scrollbar {
            width: 6px;
            /* 极细宽度，与搜索框保持一致 */
            background: transparent;
        }

        /* 滑块 (Thumb) - ☀️ 日间模式 */
        #v-scroll-container::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.1);
            /* 极淡的灰色，不抢眼 */
            border-radius: 10px;
            /* 两头圆润 */
            transition: all 0.3s;
        }

        /* 悬停时加深，提示可拖动 */
        #v-scroll-container::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.3);
        }

        /* --- 🌙 夜间模式：赛博荧光特效 --- */

        /* 滑块 - 夜间模式 */
        [data-theme="dark"] #v-scroll-container::-webkit-scrollbar-thumb {
            /* 核心颜色：使用主色调 (跟随主题变色) */
            background: var(--primary);

            /* ✨ 注入灵魂：荧光光晕效果 + 内部高光 */
            box-shadow:
                0 0 8px var(--primary),
                inset 0 0 3px rgba(255, 255, 255, 0.5);

            border-radius: 10px;
        }

        /* 悬停时更亮，光晕扩散 */
        [data-theme="dark"] #v-scroll-container::-webkit-scrollbar-thumb:hover {
            background: #a29bfe;
            /* 变亮紫色 */
            box-shadow: 0 0 15px #a29bfe;
            /* 光晕变大 */
        }

        .game-container {
            overflow-y: overlay !important;
            /* 让滚动条悬浮在内容之上 (Webkit) */
            scroll-behavior: smooth;
        }

        /* --- Webkit 核心滚动条样式 (Chrome/Safari/Edge) --- */

        /* 轨道 (Track) - 完全透明 */
        .game-container::-webkit-scrollbar {
            width: 6px;
            /* 保持极细风格 */
            background: transparent;
        }

        /* 滑块 (Thumb) - ☀️ 日间模式 */
        .game-container::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.1);
            /* 极淡的灰色 */
            border-radius: 10px;
            /* 圆润 */
            transition: all 0.3s;
        }

        /* 悬停时加深 */
        .game-container::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.3);
        }

        /* --- 🌙 夜间模式：赛博荧光特效 --- */

        /* 滑块 - 夜间模式 */
        [data-theme="dark"] .game-container::-webkit-scrollbar-thumb {
            /* 核心颜色：跟随主色调 (紫色/蓝色) */
            background: var(--primary);

            /* ✨ 注入灵魂：荧光光晕 + 内部高光 */
            box-shadow:
                0 0 8px var(--primary),
                inset 0 0 3px rgba(255, 255, 255, 0.5);

            border-radius: 10px;
        }

        /* 悬停时更亮，光晕扩散 */
        [data-theme="dark"] .game-container::-webkit-scrollbar-thumb:hover {
            background: #a29bfe;
            /* 变亮 */
            box-shadow: 0 0 15px #a29bfe;
            /* 光晕变强 */
        }


        #guide-modal .modal-box {
            scroll-behavior: smooth;
            overflow-y: overlay !important;
            /* 确保滚动条悬浮在内容之上 */
        }

        /* --- Webkit 核心滚动条样式 (Chrome/Safari/Edge) --- */

        /* 轨道 (Track) - 透明 */
        #guide-modal .modal-box::-webkit-scrollbar {
            width: 6px;
            background: transparent;
        }

        /* 滑块 (Thumb) - ☀️ 日间模式 */
        #guide-modal .modal-box::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            transition: all 0.3s;
        }

        /* 悬停加深 */
        #guide-modal .modal-box::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.3);
        }

        /* --- 🌙 夜间模式：赛博荧光特效 --- */

        /* 滑块 - 夜间模式 */
        [data-theme="dark"] #guide-modal .modal-box::-webkit-scrollbar-thumb {
            background: var(--primary);
            box-shadow:
                0 0 8px var(--primary),
                inset 0 0 3px rgba(255, 255, 255, 0.5);
            border-radius: 10px;
        }

        /* 悬停更亮 */
        [data-theme="dark"] #guide-modal .modal-box::-webkit-scrollbar-thumb:hover {
            background: #a29bfe;
            box-shadow: 0 0 15px #a29bfe;
        }

        button.dash-btn.added {
            background: var(--learn) !important;
            /* 变绿 */
            color: white !important;
            border-color: transparent !important;
            cursor: default;
            box-shadow: none !important;
        }

        /* =================================================================
   🦅 鹰眼模式 (Hawkeye) - 终极完整版 CSS
   包含：赛博倒计时、机械键帽、凹槽底座、深色模式适配
   ================================================================= */

        /* 1. ⏱️ 倒计时：数字科技感 */
        .hawk-timer {
            font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
            /* 等宽字体，防止数字跳动 */
            font-size: 4rem !important;
            /* 巨大化 */
            font-weight: 800 !important;
            letter-spacing: -2px;
            margin: 10px 0 20px 0;
            text-align: center;

            /* 默认日间色 */
            color: var(--hawkeye);
            /* 增加文字描边，增加厚重感 */
            -webkit-text-stroke: 1px rgba(0, 0, 0, 0.1);
        }

        /* 2. 📖 释义区域：卡片化 */
        #hawk-def {
            font-family: var(--font-main) !important;
            font-size: 1.2rem !important;
            line-height: 1.6;
            font-weight: 600;
            color: var(--text);

            /* 增加一个半透明容器背景 */
            background: rgba(0, 0, 0, 0.03);
            padding: 20px;
            border-radius: 16px;
            width: 90%;
            margin: 0 auto 30px auto;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        /* 3. 📥 答题区 (Answer Slot)：深色凹槽风格 */
        .hawk-area {
            background: rgba(0, 0, 0, 0.03);
            /* 浅灰凹槽 */
            border-radius: 16px;
            padding: 15px;
            min-height: 90px !important;
            /* 撑开高度 */
            margin-bottom: 25px !important;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 8px !important;
            /* 内阴影：营造下陷感 */
            box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.06);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        /* 4. 📤 字母池容器 (Keyboard Base)：键盘底座风格 */
        #hawk-pool {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px !important;
            /* 按键间距 */
            padding: 20px;
            background: #f1f2f6;
            /* 键盘底座浅灰背景 */
            border-radius: 20px;
            box-shadow:
                0 4px 0 #dfe4ea,
                /* 底部厚度 */
                inset 0 2px 5px rgba(255, 255, 255, 0.5);
            /* 顶部高光 */
            margin-top: 20px;
            border: 1px solid #dcdde1;
            max-width: 100%;
            /* 防止撑破容器 */
        }

        /* 5. 🔠 字母方块 (Keycaps)：机械键帽本体 */
        .hawk-tile {
            /* 📐 尺寸 */
            width: 48px !important;
            height: 54px !important;

            /* 🎨 材质：微渐变模拟弧面 */
            background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%) !important;
            color: #2c3e50 !important;

            /* 🧱 物理厚度：底部加粗边框 */
            border: 1px solid #bdc3c7 !important;
            border-bottom: 4px solid #95a5a6 !important;
            /* 机械轴厚度 */
            border-radius: 10px !important;

            /* 🔡 字体 */
            font-family: 'Verdana', sans-serif !important;
            font-size: 1.5rem !important;
            font-weight: 700 !important;
            text-shadow: none !important;

            /* ⚡ 交互 */
            margin: 0 !important;
            /* 由容器gap控制 */
            cursor: pointer;
            transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

            /* 居中 */
            display: flex;
            justify-content: center;
            align-items: center;
            user-select: none;
        }

        /* 🖱️ 悬停 */
        .hawk-tile:hover {
            transform: translateY(-2px);
            background: #fff !important;
            border-bottom-width: 5px !important;
        }

        /* 👇 按压 */
        .hawk-tile:active {
            transform: translateY(3px) !important;
            border-bottom-width: 1px !important;
            /* 压到底 */
            box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1);
            background: #ecf0f1 !important;
        }

        /* -----------------------------------------------------------
   ✅ 状态样式：已选/已用
   ----------------------------------------------------------- */

        /* ✨ 已放置在答题区的高亮样式 */
        .hawk-tile.placed {
            background: var(--hawkeye) !important;
            color: white !important;
            border-color: transparent !important;
            border-bottom: 4px solid rgba(0, 0, 0, 0.2) !important;
            animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        /* 🚫 已使用 (变灰占位，保留虚线框) */
        .hawk-tile.used {
            opacity: 0.4;
            transform: scale(0.95);
            filter: grayscale(100%);
            background: rgba(0, 0, 0, 0.05) !important;
            border: 1px dashed rgba(0, 0, 0, 0.2) !important;
            box-shadow: none !important;
            pointer-events: none;
            color: rgba(0, 0, 0, 0.2) !important;
        }

        /* -----------------------------------------------------------
   🌙 夜间模式适配 (Dark Mode)
   ----------------------------------------------------------- */

        /* 倒计时：电光蓝 + 霓虹光晕 */
        [data-theme="dark"] .hawk-timer {
            color: #00f3ff !important;
            text-shadow: 0 0 20px rgba(0, 243, 255, 0.6);
            -webkit-text-stroke: 0;
        }

        /* 释义卡片 */
        [data-theme="dark"] #hawk-def {
            background: rgba(255, 255, 255, 0.05);
            color: #e0e0e0 !important;
            border-color: rgba(255, 255, 255, 0.1);
        }

        /* 答题区：深色凹槽 */
        [data-theme="dark"] .hawk-area {
            background: rgba(0, 0, 0, 0.3);
            box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
            border-color: rgba(255, 255, 255, 0.05);
        }

        /* 键盘底座：深空灰底盘 */
        [data-theme="dark"] #hawk-pool {
            background: #1e272e;
            box-shadow: 0 4px 0 #0f1519, inset 0 1px 0 rgba(255, 255, 255, 0.1);
            border-color: #2c3e50;
        }

        /* 键帽：深色机械轴 */
        [data-theme="dark"] .hawk-tile {
            background: linear-gradient(145deg, #34495e, #2c3e50) !important;
            color: #ecf0f1 !important;
            border: 1px solid #4b6584 !important;
            border-bottom: 4px solid #1e272e !important;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }

        [data-theme="dark"] .hawk-tile:hover {
            background: #3c556e !important;
            border-color: #5c7aa0 !important;
        }

        [data-theme="dark"] .hawk-tile:active {
            background: #1e272e !important;
            border-bottom-width: 1px !important;
        }

        /* 夜间高亮状态 */
        [data-theme="dark"] .hawk-tile.placed {
            background: #00f3ff !important;
            color: #000 !important;
            box-shadow: 0 0 15px rgba(0, 243, 255, 0.5);
        }

        /* 夜间已用状态 */
        [data-theme="dark"] .hawk-tile.used {
            background: rgba(255, 255, 255, 0.05) !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
            color: rgba(255, 255, 255, 0.1) !important;
        }

        /* -----------------------------------------------------------
   📱 移动端微调 (Mobile Responsive)
   ----------------------------------------------------------- */
        @media screen and (max-width: 768px) {

            /* 缩小倒计时 */
            .hawk-timer {
                font-size: 3rem !important;
                margin: 5px 0 15px 0;
            }

            /* 缩小释义 */
            #hawk-def {
                font-size: 1rem !important;
                padding: 15px;
                width: 100%;
                margin-bottom: 20px;
            }

            /* 缩小按键尺寸 */
            .hawk-tile {
                width: 40px !important;
                height: 48px !important;
                font-size: 1.3rem !important;
                border-bottom-width: 3px !important;
            }

            /* 调整底座间距 */
            #hawk-pool {
                padding: 10px;
                gap: 6px !important;
                margin-top: 10px;
            }

            /* 调整答题区 */
            .hawk-area {
                min-height: 60px !important;
                padding: 10px;
                margin-bottom: 15px !important;
            }
        }

        #hawk-pool .hawk-tile {
            /* 1. 🎨 颜色强制改深：不再是白底 */
            background: #34495e !important;
            /* 深蓝灰 */
            color: #ffffff !important;
            /* 白字 */

            /* 2. 🧱 实体厚度：不再是细边框 */
            border: 1px solid #2c3e50 !important;
            border-bottom: 5px solid #1a252f !important;
            /* 关键：加厚的黑底，制造立体感 */
            border-radius: 8px !important;

            /* 3. 📐 尺寸修正 */
            width: 48px !important;
            height: 54px !important;
            margin: 4px !important;

            /* 4. 去除多余装饰 */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
            text-shadow: none !important;
            font-weight: 800 !important;
        }

        /* 🖱️ 鼠标悬停时的效果 */
        #hawk-pool .hawk-tile:hover {
            background: #46637f !important;
            /* 变亮一点 */
            transform: translateY(-2px);
            /* 浮起来 */
            border-bottom-width: 6px !important;
        }

        /* 👇 按下时的效果 */
        #hawk-pool .hawk-tile:active {
            background: #2c3e50 !important;
            transform: translateY(4px) !important;
            /* 沉下去 */
            border-bottom-width: 1px !important;
            /* 厚度消失 */
        }

        /* 🌙 夜间模式适配 (如果开了深色模式) */
        [data-theme="dark"] #hawk-pool .hawk-tile {
            background: #1e293b !important;
            border-color: #334155 !important;
            border-bottom-color: #0f172a !important;
        }


        .list-item {
            display: flex !important;
            align-items: center !important;
            /* 垂直居中 */
            justify-content: space-between !important;
            /* 左文右星 */
            padding: 0 15px !important;
            /* 两侧留出呼吸感 */
            box-sizing: border-box !important;
        }

        /* 2. 左侧文字区域：自动占据剩余空间 */
        .list-item .item-left {
            flex: 1 !important;
            /* 占满剩下的所有宽度 */
            min-width: 0 !important;
            /* 防止文字过长撑破容器 */
            margin-right: 10px !important;
            /* 给右边星星留点距离 */
            text-align: left !important;
        }

        /* 3. 右侧区域 (星星+徽章)：不许压缩，固定在右边 */
        .list-item .item-right {
            flex: 0 0 auto !important;
            /* 宽度由内容决定，不许被压扁 */
            display: flex !important;
            align-items: center !important;
            justify-content: flex-end !important;
            gap: 8px !important;
            /* 星星和等级标签的间距 */
        }

        /* 4. 修复星星按钮本身的样式 */
        .list-item .star-btn {
            position: static !important;
            /* 禁止绝对定位乱飞 */
            margin: 0 !important;
            padding: 5px !important;
            /* 增加点击热区 */
            transform: none !important;
            display: flex !important;
            align-items: center;
            justify-content: center;
        }

        .detective-hero-banner {
            /* 1. 宽度控制：不再无脑撑满 */
            width: auto;

            /* 2. 限制最大宽度：让它比普通按钮稍宽，但不会宽得离谱 */
            /* 您可以根据感觉微调这个百分比，90%~95% 比较合适 */
            max-width: 97%;

            /* 3. 居中显示 & 下方留白 */
            margin: 0 auto 25px auto;

            /* --- 以下保持原有美化样式 --- */
            min-height: 140px;
            /* 稍微调低一点高度，显得更精致 */
            box-sizing: border-box;

            background: linear-gradient(120deg,
                    rgba(var(--primary-rgb), 0.15) 0%,
                    var(--card-bg) 60%,
                    rgba(var(--primary-rgb), 0.05) 100%);
            border: 2px solid rgba(var(--primary-rgb), 0.3);
            border-radius: 20px;
            /* 更圆润一点，手感更好 */

            display: flex;
            align-items: center;
            padding: 15px 25px;
            /* 稍微减小内边距，显得紧凑 */

            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            box-shadow: 0 8px 25px -8px rgba(var(--primary-rgb), 0.3);
        }

        /* 悬停效果 */
        .detective-hero-banner:hover {
            transform: translateY(-3px) scale(1.01);
            /* 缩小放大倍率 */
            border-color: var(--primary);
            box-shadow: 0 12px 35px -10px rgba(var(--primary-rgb), 0.4);
        }

        /* 左侧动画容器 (同步缩小一点) */
        .detective-lottie-box {
            width: 100px;
            /* 从 120 改小到 90 */
            height: 90px;
            margin-right: 20px;
            flex-shrink: 0;
            filter: drop-shadow(0 5px 15px rgba(var(--primary-rgb), 0.3));
        }

        /* 右侧内容 */
        .detective-content {
            flex: 1;
        }

        .detective-title {
            font-size: 1.9rem;
            /* 字体改小一点点 */
            font-weight: 900;
            margin: 0 0 6px 0;
            background: linear-gradient(45deg, var(--text), var(--primary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .detective-desc {
            font-size: 0.9rem;
            opacity: 0.8;
            margin: 0;
            line-height: 1.4;
            /* 限制描述文字不换行太多 */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* 状态标签位置微调 */
        .detective-status {
            position: absolute;
            top: 15px;
            right: 15px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 5px;
            z-index: 2;
        }

        /* ✨ 新版：今日新案卷标签 (毛玻璃胶囊) */
        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;

            /* 关键：毛玻璃背景 */
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);

            /* 边框和圆角 */
            border: 1px solid rgba(255, 255, 255, 0.4);
            border-radius: 20px;
            /* 胶囊圆角 */

            padding: 6px 14px;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--primary);
            /* 使用主题色文字 */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

            transition: all 0.3s ease;
        }

        /* 鼠标悬停时的小动效 */
        .detective-hero-banner:hover .status-badge {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
        }

        /* 标签里的小红点 (模拟呼吸灯) */
        .badge-dot {
            width: 8px;
            height: 8px;
            background: #ff4757;
            /* 鲜艳的红色 */
            border-radius: 50%;
            box-shadow: 0 0 10px #ff4757;
            animation: pulse-dot 2s infinite;
        }

        @keyframes pulse-dot {
            0% {
                transform: scale(0.95);
                opacity: 0.8;
            }

            50% {
                transform: scale(1.2);
                opacity: 1;
            }

            100% {
                transform: scale(0.95);
                opacity: 0.8;
            }
        }

        /* 下方的人数文字美化 */
        .status-text {
            font-size: 0.8rem;
            color: var(--sub);
            font-weight: 500;
            letter-spacing: 0.5px;
            opacity: 0.9;
            background: rgba(255, 255, 255, 0.5);
            /* 淡淡的背景增加可读性 */
            padding: 2px 8px;
            border-radius: 6px;
        }

        /* 背景装饰纹理 (可选，增加细节) */
        .detective-hero-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: radial-gradient(circle at 20% 80%, rgba(var(--primary-rgb), 0.1) 0%, transparent 40%);
            pointer-events: none;
        }

        /* 2. 游戏模态框布局 */
        .game-layout {
            display: flex;
            height: 100%;
            flex-direction: column;
        }

        /* 主题选择栏 (顶部) */
        .theme-bar {
            display: flex;
            gap: 10px;
            padding: 15px;
            overflow-x: auto;
            border-bottom: 1px solid var(--border);
            background: var(--bg);
        }

        .theme-chip {
            padding: 6px 15px;
            border-radius: 20px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            font-size: 0.9rem;
            cursor: pointer;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: all 0.2s;
            color: var(--sub);
        }

        .theme-chip.active {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
            box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
        }

        .theme-chip.solved {
            opacity: 0.6;
            text-decoration: line-through;
        }

        .game-chat-area {
            flex: 1;
            overflow-y: auto;

            /* 改用极淡的蓝灰色背景，比纯白更有质感 */
            background-color: #f4f6f9;

            /* 增加内边距，让内容不要贴边 */
            padding: 30px;

            /* 滚动条平滑 */
            scroll-behavior: smooth;
        }

        /* 优化消息行 */
        .msg-row {
            margin-bottom: 25px;
            /* 增加每句话的间距 */
            display: flex;
            align-items: flex-end;
            /* 头像沉底对齐 */
            gap: 15px;
            /* 头像和气泡的间距 */
        }

        .msg-row.user {
            flex-direction: row;
            justify-content: flex-end;
        }

        /* 优化气泡样式 */
        .msg-bubble {
            max-width: 70%;
            padding: 14px 20px;
            /* 更大的气泡内边距 */
            border-radius: 20px;
            font-size: 1.05rem;
            /* 字体稍微大一点 */
            line-height: 1.6;
            /* 增加行高，阅读不累 */
            position: relative;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            /* 气泡微阴影 */
        }

        /* AI 气泡颜色 */
        .msg-row.ai .msg-bubble {
            background: #fff;
            color: #333;
            border-bottom-left-radius: 4px;
            /* 小尾巴效果 */
        }

        /* 用户 气泡颜色 (使用你的主题色) */
        .msg-row.user .msg-bubble {
            background: #6c5ce7;
            /* 你的网站紫色 */
            color: #fff;
            border-bottom-right-radius: 4px;
        }

        /* 胜利时的金色气泡 */
        .msg-bubble.win-bubble {
            background: linear-gradient(135deg, #f1c40f, #f39c12);
            color: #fff;
            border: 2px solid #fff;
            box-shadow: 0 4px 15px rgba(243, 156, 18, 0.4);
        }

        /* =========================================
   3. 底部输入栏 - 现代化胶囊设计
   ========================================= */
        .game-input-bar {
            flex-shrink: 0;
            background: #fff;
            padding: 20px 30px;
            /* 宽敞的内边距 */
            border-top: 1px solid #edf2f7;
            display: flex;
            align-items: center;
            gap: 15px;
            z-index: 10;
        }

        /* 输入框本体 */
        #game-input {
            flex: 1;
            height: 50px;
            /* 更高的高度 */
            background: #f8f9fa;
            border: 2px solid transparent;
            /* 默认无边框 */
            border-radius: 50px;
            /* 胶囊圆角 */
            padding: 0 25px;
            font-size: 1rem;
            color: #333;
            transition: all 0.3s ease;
            outline: none;
        }

        /* 输入框聚焦时的特效 */
        #game-input:focus {
            background: #fff;
            border-color: #6c5ce7;
            /* 聚焦变成主题色 */
            box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.1);
            /* 柔和的光晕 */
        }

        /* 发送按钮 */
        .btn-primary {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            /* 圆形按钮 */
            background: linear-gradient(135deg, #6c5ce7, #a29bfe);
            border: none;
            color: white;
            font-size: 1.2rem;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3);
            transition: transform 0.2s, box-shadow 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(108, 92, 231, 0.4);
        }

        .btn-primary:active {
            transform: scale(0.95);
        }


        .token-badge {
            font-size: 0.75rem;
            background: #333;
            color: #fff;
            padding: 2px 8px;
            border-radius: 4px;
            font-family: monospace;
        }

        /* 🏆 排行榜样式 (覆盖在聊天框之上) */
        .rank-overlay {
            position: absolute;
            top: 60px;
            /* 避开Header */
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--card-bg);
            z-index: 20;
            display: none;
            /* 默认隐藏 */
            flex-direction: column;
        }

        .rank-overlay.active {
            display: flex;
        }

        .rank-item {
            display: flex;
            align-items: center;
            padding: 12px 20px;
            border-bottom: 1px solid var(--border);
        }

        .rank-num {
            width: 30px;
            font-weight: bold;
            color: var(--sub);
            font-style: italic;
        }

        .rank-num.top-1 {
            color: #f1c40f;
            font-size: 1.2rem;
        }

        /* 金 */
        .rank-num.top-2 {
            color: #bdc3c7;
            font-size: 1.1rem;
        }

        /* 银 */
        .rank-num.top-3 {
            color: #e67e22;
            font-size: 1.1rem;
        }

        /* 铜 */

        .rank-info {
            flex: 1;
            margin-left: 10px;
        }

        .rank-name {
            font-weight: bold;
            font-size: 0.95rem;
        }

        .rank-date {
            font-size: 0.8rem;
            color: var(--sub);
        }

        .rank-score {
            text-align: right;
            font-family: monospace;
            font-weight: bold;
            color: var(--primary);
        }

        .modal.active {
            display: flex;
            /* 变成弹性布局，从而显示出来 */
        }

        .modal-box {
            display: flex;
            /* 关键：启用弹性布局 */
            flex-direction: column;
            /* 关键：垂直排列 (上-中-下) */
            /* height: 85vh;  <-- 这个你原本的 HTML 里已经写在 style 里了，不用动 */
        }

        #rank-board {
            /* 1. 定位：基于 .game-layout 定位 */
            position: absolute;
            top: 60px;
            /* 避开顶部标题栏 */
            right: 0;
            bottom: 0;
            width: 320px;

            /* 2. 外观 */
            background: rgba(255, 255, 255, 0.98);
            border-left: 1px solid #eee;
            box-shadow: -5px 0 20px rgba(0, 0, 0, 0.05);
            z-index: 999;
            /* 确保层级最高，盖住输入框 */

            /* 3. 🔥 核心修复：默认推到右侧屏幕外 🔥 */
            transform: translateX(100%);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

            /* 内部布局 */
            display: flex;
            flex-direction: column;
        }

        /* 激活状态：滑回来 */
        #rank-board.active {
            transform: translateX(0);
        }

        /* 移动端适配 */
        @media (max-width: 600px) {
            #rank-board {
                width: 100%;
                top: 0;
            }
        }

        /* 2. 让游戏主区域填满剩下的空间 */
        .game-layout {
            flex: 1;
            /* 关键：占满除去标题栏之外的所有空间 */
            display: flex;
            /* 内部也再次启用弹性布局 */
            flex-direction: column;
            /* 垂直排列 */
            min-height: 0;
            /* 防止子元素溢出导致滚动条失效的 CSS Hack */
            position: relative;
            /* 维持你原本的定位设置 */
        }

        /* 3. 聊天区域：自动伸缩，负责滚动 */
        .game-chat-area {
            flex: 1;
            /* 关键：只有它会自动长高，挤占空白 */
            overflow-y: auto;
            /* 内容多了显示滚动条 */
            padding: 15px;
            background-color: #f9f9f9;
            /* 给个浅灰背景，方便看清边界 */
        }

        /* 4. 输入框区域：固定在底部，不准压缩 */
        .game-input-bar {
            flex-shrink: 0;
            /* 关键：禁止被压缩，保证高度固定 */
            padding: 10px 15px;
            background: #fff;
            border-top: 1px solid #eee;
            display: flex;
            /* 让输入框和发送按钮横向排开 */
            gap: 10px;
            /* 按钮和输入框的间距 */
            align-items: center;
        }

        .modal-box.modal-large {
            /* 宽度从 600px 增加到 900px (适配桌面端) */
            max-width: 900px;
            width: 95%;
            /* 移动端占满 95% */

            /* 高度增加，给对话更多空间 */
            height: 90vh;

            /* 更大的圆角，看起来更现代 */
            border-radius: 24px;

            /* 增加深邃的阴影，制造悬浮感 */
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);

            /* 内部布局 */
            display: flex;
            flex-direction: column;
            overflow: hidden;
            /* 防止圆角被内容遮挡 */
            background: #fff;
        }

        .user-avatar-img {
            width: 45px;
            /* 稍微大一点 */
            height: 45px;
            border-radius: 50%;
            /* 圆形 */
            object-fit: cover;
            /* 防止图片变形 */
            border: 2px solid #6c5ce7;
            /* 加个紫色边框，呼应主题 */
            background: #fff;
            /* 防止透明底图很难看 */
            box-shadow: 0 4px 10px rgba(108, 92, 231, 0.2);
        }

        /* 调整用户气泡的小尾巴方向 */
        .msg-row.user .msg-bubble {
            border-bottom-right-radius: 4px;
            /* 保持原样或微调 */
            border-bottom-left-radius: 20px;
            /* 确保左边是圆的 */
            margin-right: 5px;
            /* 气泡和头像稍微拉开点距离 */
        }

        #rank-board {
            /* 1. 绝对定位：必须悬浮起来，不能占位置 */
            position: absolute !important;
            top: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 320px !important;

            /* 2. 视觉样式 */
            background: rgba(255, 255, 255, 0.98) !important;
            border-left: 1px solid #eee !important;
            box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1) !important;
            z-index: 1000 !important;
            /* 确保盖住所有东西 */

            /* 3. 布局 */
            display: flex !important;
            flex-direction: column !important;

            /* 4. 🔥 核心：默认移出屏幕 (藏在右边) */
            transform: translateX(100%) !important;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }

        /* 激活状态：滑回来 */
        #rank-board.active {
            transform: translateX(0) !important;
        }

        /* 移动端适配 */
        @media (max-width: 600px) {
            #rank-board {
                width: 100% !important;
            }
        }

        /* ==================================================
   🌙 暗色模式适配 (匹配你的 Hawk 风格)
   触发条件: [data-theme="dark"]
   ================================================== */

        /* 1. 模态框容器 (采用 hawk-pool 的深空灰底盘) */
        [data-theme="dark"] .modal-box {
            background-color: #1e272e !important;
            /* 深空灰 */
            color: #ecf0f1 !important;
            /* 亮灰白文字 */
            border: 1px solid #2c3e50 !important;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
        }

        /* 2. 顶部标题栏 & 底部输入栏 (稍微深一点，区分层级) */
        [data-theme="dark"] .modal-box>div:first-child,
        /* 顶部 */
        [data-theme="dark"] .game-input-bar {
            /* 底部 */
            background-color: #15191d !important;
            /* 比底盘更深一点 */
            border-color: rgba(255, 255, 255, 0.08) !important;
        }

        /* 3. 聊天主区域 (采用 hawk-area 的深色凹槽感) */
        [data-theme="dark"] .game-chat-area {
            background-color: rgba(0, 0, 0, 0.2) !important;
            /* 微透深色 */
            box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
            /* 内阴影 */
        }

        /* 4. AI 气泡 (匹配 hawk-tile 键帽风格) */
        [data-theme="dark"] .msg-row.ai .msg-bubble {
            background: linear-gradient(145deg, #34495e, #2c3e50) !important;
            color: #ecf0f1 !important;
            border: 1px solid #4b6584 !important;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
        }

        /* 5. 用户气泡 (保留你的紫色，但做暗色适配) */
        [data-theme="dark"] .msg-row.user .msg-bubble {
            background: linear-gradient(145deg, #6c5ce7, #5b4bc4) !important;
            color: #fff !important;
            border: 1px solid #a29bfe !important;
            /* 亮紫色描边 */
            box-shadow: 0 0 10px rgba(108, 92, 231, 0.2) !important;
        }

        /* 6. 输入框 (匹配 hawk-def) */
        [data-theme="dark"] #game-input {
            background: rgba(255, 255, 255, 0.05) !important;
            color: #e0e0e0 !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
        }

        [data-theme="dark"] #game-input:focus {
            background: rgba(255, 255, 255, 0.1) !important;
            border-color: #6c5ce7 !important;
        }

        /* 7. 主题 Chip 按钮 */
        [data-theme="dark"] .theme-chip {
            background: rgba(255, 255, 255, 0.05) !important;
            color: #a4b0be !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
        }

        [data-theme="dark"] .theme-chip.active {
            background: #6c5ce7 !important;
            color: #fff !important;
            border-color: #a29bfe !important;
            box-shadow: 0 0 10px rgba(108, 92, 231, 0.4) !important;
        }

        /* ==================================================
   🏆 排行榜侧边栏 (暗色适配)
   ================================================== */
        [data-theme="dark"] #rank-board {
            background-color: #1e272e !important;
            /* 与底座同色 */
            border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
        }

        /* 榜单标题栏 */
        [data-theme="dark"] #rank-board>div:first-child {
            background-color: #15191d !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
            color: #ecf0f1 !important;
        }

        /* 榜单列表项文字 */
        [data-theme="dark"] .rank-item {
            border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        }

        [data-theme="dark"] .rank-name {
            color: #dfe4ea !important;
            /* 名字变亮 */
        }

        [data-theme="dark"] .rank-date {
            color: #747d8c !important;
            /* 日期变暗 */
        }

        /* ==================================================
   🔥 强制覆盖 JS 内联样式的文字颜色
   (解决“案件已告破”看不清的问题)
   ================================================== */

        /* 胜利标题 (原深绿 -> 亮绿) */
        [data-theme="dark"] .game-chat-area div[style*="color:#2e7d32"] {
            color: #2ed573 !important;
            text-shadow: 0 0 10px rgba(46, 213, 115, 0.3);
        }

        /* 胜利说明 (原深灰 -> 银灰) */
        [data-theme="dark"] .game-chat-area div[style*="color:#555"] {
            color: #ced6e0 !important;
        }

        /* 谜底单词 (原橙色 -> 亮橙) */
        [data-theme="dark"] .game-chat-area span[style*="color:#e67e22"] {
            color: #ffa502 !important;
            text-shadow: 0 0 10px rgba(255, 165, 2, 0.3);
        }

        /* 底部提示框 (原浅绿背景 -> 深色卡片) */
        [data-theme="dark"] .game-chat-area div[style*="background:#f1f8e9"] {
            background: rgba(46, 213, 115, 0.1) !important;
            color: #2ed573 !important;
            border: 1px solid rgba(46, 213, 115, 0.2) !important;
        }


        /* 1. 修复顶部“主题选择条”的白色背景 */
        [data-theme="dark"] .theme-bar {
            background-color: #1e272e !important;
            /* 与模态框同色，融为一体 */
            border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        }

        /* 2. 修复“榜单”按钮 */
        [data-theme="dark"] .action-btn {
            background-color: rgba(255, 255, 255, 0.05) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            color: #ecf0f1 !important;
        }

        [data-theme="dark"] .action-btn:hover {
            background-color: rgba(255, 255, 255, 0.1) !important;
        }

        /* 3. 修复右上角“关闭”按钮 */
        [data-theme="dark"] .modal-close-btn {
            color: #a4b0be !important;
        }

        [data-theme="dark"] .modal-close-btn:hover {
            color: #fff !important;
        }

        /* 4. 优化“主题 Chip”在暗色下的未选中状态 */
        [data-theme="dark"] .theme-chip {
            background-color: rgba(255, 255, 255, 0.03) !important;
            color: #7f8fa6 !important;
            border: 1px solid transparent !important;
        }

        /* 选中状态保持高亮 */
        [data-theme="dark"] .theme-chip.active {
            background-color: #6c5ce7 !important;
            color: #fff !important;
            box-shadow: 0 0 15px rgba(108, 92, 231, 0.4) !important;
        }

        #grand-word-modal {
            z-index: 99999 !important;
            /* 确保层级最高 */
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(8px);
            /* 背景模糊 */
        }

        /* 卡片容器 */
        .grand-card {
            background: #fff;
            width: 85%;
            max-width: 420px;
            border-radius: 24px;
            padding: 35px 30px;
            text-align: center;
            position: relative;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
            display: flex;
            flex-direction: column;
            align-items: center;
            animation: grandPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        [data-theme="dark"] .grand-card {
            background: #1e272e;
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* 单词大标题 */
        .grand-word-title {
            font-size: 2.5rem;
            font-weight: 800;
            color: #2d3436;
            margin-bottom: 5px;
            line-height: 1.2;
        }

        [data-theme="dark"] .grand-word-title {
            color: #ecf0f1;
        }

        /* 读音/假名 */
        .grand-word-sub {
            font-size: 1.2rem;
            color: #6c5ce7;
            font-family: "Noto Serif JP", serif;
            margin-bottom: 25px;
            opacity: 0.9;
        }

        [data-theme="dark"] .grand-word-sub {
            color: #a29bfe;
        }

        /* 释义盒子 */
        .grand-def-box {
            width: 100%;
            background: #f8f9fa;
            padding: 20px;
            border-radius: 16px;
            text-align: left;
            font-size: 1.05rem;
            line-height: 1.6;
            color: #555;
            margin-bottom: 30px;
            border: 1px solid rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;

            /* 🔥🔥🔥 核心修复：防止内容过长撑爆屏幕 🔥🔥🔥 */
            max-height: 300px;
            /* 限制最大高度 (约显示10行) */
            overflow-y: auto;
            /* 内容多了显示滚动条 */
            scrollbar-width: thin;
            /* 滚动条变细 (Firefox) */
        }

        /* 适配暗色模式 */
        [data-theme="dark"] .grand-def-box {
            background: rgba(255, 255, 255, 0.05);
            color: #dfe6e9;
            border-color: rgba(255, 255, 255, 0.1);
        }

        /* 底部按钮组 (Flex布局) */
        .grand-actions-row {
            display: flex;
            gap: 12px;
            width: 100%;
            justify-content: center;
        }

        /* 🤖 AI 按钮 (方形) */
        .btn-grand-ai {
            flex: 0 0 55px;
            /* 固定宽度 */
            height: 55px;
            border-radius: 16px;
            border: 2px solid rgba(108, 92, 231, 0.2);
            background: transparent;
            color: #6c5ce7;
            font-size: 1.4rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .btn-grand-ai:hover {
            background: #6c5ce7;
            color: white;
            transform: translateY(-2px);
        }

        [data-theme="dark"] .btn-grand-ai {
            border-color: #a29bfe;
            color: #a29bfe;
        }

        [data-theme="dark"] .btn-grand-ai:hover {
            background: #a29bfe;
            color: #1e272e;
        }

        /* ➕ 添加按钮 (长条形) */
        .btn-grand-add {
            flex: 1;
            /* 占满剩余空间 */
            height: 55px;
            border-radius: 50px;
            border: none;
            background: #6c5ce7;
            color: white;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 8px 20px rgba(108, 92, 231, 0.3);
            transition: transform 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .btn-grand-add:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(108, 92, 231, 0.4);
        }

        /* 动画定义 */
        @keyframes grandPop {
            0% {
                opacity: 0;
                transform: scale(0.9) translateY(20px);
            }

            100% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        /* 顶部状态栏容器 */
        .user-status-bar {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 8px 15px;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 50px;
            border: 1px solid rgba(0, 0, 0, 0.05);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            margin-right: 10px;
            /* 放在头像左边 */
        }

        [data-theme="dark"] .user-status-bar {
            background: rgba(0, 0, 0, 0.4);
            border-color: rgba(255, 255, 255, 0.1);
        }

        /* 1. 💎 词核 (水晶样式) */
        .lex-core-display {
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 800;
            color: #333;
            font-family: 'Segoe UI', sans-serif;
        }

        [data-theme="dark"] .lex-core-display {
            color: #fff;
        }

        .crystal-icon {
            font-size: 1.2rem;
            /* 水晶渐变色：青色到蓝色 */
            background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            /* 水晶光晕效果 */
            filter: drop-shadow(0 0 3px rgba(79, 172, 254, 0.6));
            animation: crystalPulse 3s infinite ease-in-out;
        }

        @keyframes crystalPulse {

            0%,
            100% {
                filter: drop-shadow(0 0 3px rgba(79, 172, 254, 0.6));
                transform: scale(1);
            }

            50% {
                filter: drop-shadow(0 0 8px rgba(79, 172, 254, 1));
                transform: scale(1.1);
            }
        }

        /* 2. 🎖️ 经验等级 */
        .level-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100px;
        }

        .level-info {
            display: flex;
            justify-content: space-between;
            font-size: 0.75rem;
            color: #666;
            margin-bottom: 2px;
        }

        [data-theme="dark"] .level-info {
            color: #aaa;
        }

        .level-badge {
            font-weight: 900;
            color: #6c5ce7;
        }

        /* 经验条槽 */
        .xp-progress-bar {
            width: 100%;
            height: 6px;
            background: #e0e0e0;
            border-radius: 3px;
            overflow: hidden;
            position: relative;
        }

        [data-theme="dark"] .xp-progress-bar {
            background: rgba(255, 255, 255, 0.1);
        }

        /* 经验条填充 */
        .xp-fill {
            height: 100%;
            background: linear-gradient(90deg, #a8c0ff, #3f2b96);
            width: 0%;
            /* JS控制 */
            border-radius: 3px;
            transition: width 0.5s ease;
        }