/* ========================================
   好学伴 - 样式表
   从 时间储蓄罐第一版备份勿改.html 拆分而来
   ======================================== */


/* ========== 公告弹窗全局样式 ========== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    overflow: auto;
}

.modal-content {
    background: white;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-radius: 15px 15px 0 0;
}

.modal-header h3 {
    margin: 0;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
}

.modal-header .close-modal {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 8px;
    border-radius: 50%;
    transition: background 0.3s;
}

.modal-header .close-modal:hover {
    background: rgba(255,255,255,0.4);
}

.modal-body {
    padding: 20px;
    color: #333;
    line-height: 1.6;
}

.form-actions {
    padding: 15px 20px;
    text-align: right;
    border-top: 1px solid #eee;
    border-radius: 0 0 15px 15px;
}

/* ========== CSS 块 1 ========== */

/* 字体优化 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
        }

        :root {
            --primary: #4b6cb7;
            --secondary: #182848;
            --success: #4CAF50;
            --warning: #FF9800;
            --danger: #F44336;
            --light-bg: #f5f7fa;
            --card-bg: #ffffff;
            --text: #333;
            --text-light: #666;
            --border: #e1e8ed;
            --shadow: rgba(0, 0, 0, 0.08);
            --date-bg: #e3f0ff;
            --category-chinese: #4b6cb7;
            --category-math: #5cb85c;
            --category-english: #f0ad4e;
            --category-sports: #d9534f;
            --category-skills: #5bc0de;
            --category-knowledge: #aa66cc;
            --today-bg: #e6f0ff;
            --selected-bg:#fff9e6;
            --gold: #FFD700;
            --gold-light: #FFF9C4;
            --gold-dark: #FFC107;
            --time-bank: #7B68EE;
            --time-bank-light: #E8E0FF;
            /* === 间距 === */
            --spacing-xs: 4px;
            --spacing-sm: 8px;
            --spacing-md: 12px;
            --spacing-lg: 16px;
            --spacing-xl: 24px;
            --spacing-2xl: 32px;
            /* === 圆角 === */
            --radius-sm: 6px;
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-xl: 16px;
            --radius-round: 50%;
            /* === 阴影 === */
            --shadow-sm: 0 2px 5px rgba(0,0,0,0.05);
            --shadow-md: 0 4px 8px rgba(0,0,0,0.08);
            --shadow-lg: 0 8px 16px rgba(0,0,0,0.12);
            --shadow-xl: 0 12px 30px rgba(0,0,0,0.15);
            /* === 过渡 === */
            --transition-fast: 0.15s ease;
            --transition-default: 0.3s ease;
            /* === z-index === */
            --z-dropdown: 100;
            --z-sticky: 200;
            --z-modal-backdrop: 1000;
            --z-modal: 1100;
            --z-toast: 9999;
            /* === 背景 === */
            --bg-hover: #f0f7ff;
            --bg-subtle: #f9fbfd;
            --bg-neutral: #f0f2f5;
            --bg-light: #f8f9fa;
            /* === 文字 === */
            --text-heading: #2c3e50;
            --text-muted: #999;
        }

        body {
            background: linear-gradient(135deg, var(--light-bg) 0%, #e4edf5 100%);
            color: var(--text);
            min-height: 100vh;
            padding: 20px;
        }

        /* 防止快速点击触发浏览器双击缩放（移动端） */
        * {
            -webkit-tap-highlight-color: transparent;
        }
        button, .btn, [role="button"], .task-card, .badge-item, .exchange-item,
        .stat-card, .habit-card, .tm-tpl-card, .tt-course-card, .tm-tab,
        label.switch, .color-swatch, .icon-option, .week-day-btn,
        .habit-ring-progress, .share-date-item, input[type="checkbox"], input[type="radio"] {
            touch-action: manipulation;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
        }

        header {
            text-align: left;
            padding: 0;

            background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            border-radius: 15px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
        }

        header::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
            transform: rotate(30deg);
            border-radius: inherit;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            z-index: 2;
            gap: 20px;
        }

        .header-left {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            flex: 1;
            padding: 15px 30px;
        }

        .title-container {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            flex: 1;
            min-width: 0;
            gap: 8px;
            font-size: clamp(1.2rem, 4vw, 2.8rem);
            font-weight: 700;
            color: white;
        }

        /* 添加分隔符元素 */
        .title-separator {
            color: rgba(255, 255, 255, 0.8);
            font-size: clamp(1.2rem, 4vw, 2rem);
            white-space: nowrap;
        }

        /* 调整h2和h3的基础样式 */
        header h2 {
            font-size: clamp(1.8rem, 5vw, 2.8rem);
            margin: 0;
            display: inline-block;
            color: white;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            min-width: 0;
        }

        header h3 {
            font-size: clamp(1rem, 3vw, 1.4rem);
            margin: 0;
            display: inline-block;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            min-width: 0;
        }

        header h1 i {
            color: #FFD700;
            animation: pulse 2s infinite;
            font-size: 2.5rem;
        }

        /* 确保标题容器能自动收缩 */
        .header-left {
            flex: 1;
            min-width: 0;
        }

        .header-right {
            display: flex;
            align-items: center;
            padding: 15px 30px;
        }

        .account-controls {
            position: relative;
        }

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

        /* 日期导航区域 */
        .date-navigation {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 25px;
            padding: 15px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            align-items: center;
            justify-content: space-between;
        }

        .today-btn {
            background: var(--warning);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 4px 5px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .today-btn:hover {
            background: #e68a00;
        }

        .date-controls {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .nav-btn {
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
        }

        .nav-btn:hover {
            background: var(--secondary);
        }

        .current-date {
            font-weight: 600;
            min-width: 150px;
            text-align: center;
        }

        /* 周视图样式 - 修复宽度问题 */
        .week-days-container {
    background: var(--date-bg);
    border-radius: 12px;
    padding: 2px;
    margin-bottom: 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    overflow-x: hidden; /* 禁止横向滚动 */
}

        .week-days {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    min-width: 0; /* 关键：取消最小宽度限制 */
}

      .day-btn {
    background: rgba(75, 108, 183, 0.1);
    border: 1px solid rgba(75, 108, 183, 0.2);
    border-radius: 8px;
    padding: 8px 2px;
    color: var(--primary);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    min-width: 0;
    margin: 0;
    font-size: 0.85rem;
    align-items: center;     /* 水平居中 */
}

        .day-btn:hover {
            background: rgba(75, 108, 183, 0.2);
        }

        .day-btn.active {
            background: var(--primary);
            color: white;
            font-weight: bold;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .day-btn.today {
            background: var(--warning); /* 与 .today-btn 同色 */
            border: 1px solid #ffcc00;
            font-weight: bold;
            color: #333;
        }

        .day-name {
            font-size: 0.9rem;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .day-date {
            font-size: 1.1rem;
            font-weight: 600;
        }

        /* 月视图样式 */
        .month-view-container {
            display: none;
            background: white;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 8px 16px var(--shadow);
            margin-bottom: 20px;
        }

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

        .calendar-title {
            font-weight: 600;
            color: var(--primary);
            font-size: 1.2rem;
        }

        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
        }

        .calendar-day {
            text-align: center;
            padding: 10px 0;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.9rem;
            position: relative;
            min-height: 50px;
        }

        .calendar-day.header {
            font-weight: bold;
            color: var(--primary);
            cursor: default;
            font-size: 0.85rem;
            padding: 8px 0;
        }

        .calendar-day.inactive {
            color: #ccc;
            cursor: default;
        }

        .calendar-day.today {
            background: #e3f0ff;
            color: var(--primary);
            font-weight: bold;
        }

        .calendar-day.selected {
            background: var(--primary);
            color: white;
            font-weight: bold;
        }

        .calendar-day:hover:not(.header):not(.inactive) {
            background: #f0f7ff;
        }

        .task-dot {
            position: absolute;
            bottom: 3px;
            left: 50%;
            transform: translateX(-50%);
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--success);
        }

        /* 今日统计卡片 - 修复布局 */
        .today-stats {
            display: grid;
            grid-template-columns: repeat(var(--card-columns, 8), 1fr);
            gap: 8px;
            margin: 5px 0;
            position: relative;
            z-index: 2;
            padding: 5px 0;
            width: 100%;
            box-sizing: border-box;
        }

        .stat-card {
            background: var(--card-bg);
            padding: calc(10px - (var(--card-columns, 8) - 4) * 0.4px) calc(5px - (var(--card-columns, 8) - 4) * 0.1px);
            border-radius: 12px;
            box-shadow: 0 4px 8px var(--shadow);
            text-align: center;
            min-width: 0;
            max-width: none;
            flex: 1 1 0%;
            transition: transform 0.3s;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            word-wrap: break-word;
            white-space: normal;
        }

        /* 折叠隐藏的卡片 */
        .stat-card.card-folded { display: none; }

        /* 折叠/展开按钮 —— 极简贴边，与底部边框融为一体 */
        .card-fold-bar {
            grid-column: 1 / -1;
            margin-top: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        /* 两侧渐变细线（充当底边框，向中央淡入） */
        .card-fold-bar::before,
        .card-fold-bar::after {
            content: "";
            flex: 1 1 0;
            height: 1px;
            max-width: 45%;
        }
        .card-fold-bar::before {
            background: linear-gradient(to right, transparent, rgba(0,0,0,0.1));
        }
        .card-fold-bar::after {
            background: linear-gradient(to left, transparent, rgba(0,0,0,0.1));
        }
        .card-fold-btn {
            padding: 2px 12px;
            background: transparent;
            border: none;
            color: #aaa;
            font-size: 0.7rem;
            line-height: 1.4;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: color 0.2s;
            white-space: nowrap;
            flex: 0 0 auto;
        }
        .card-fold-btn:hover {
            color: var(--primary, #4b6cb7);
        }
        .card-fold-btn .fold-icon {
            transition: transform 0.3s ease;
            font-size: 0.62rem;
        }
        .today-stats.card-grid-expanded .fold-icon { transform: rotate(180deg); }

        /* 手机屏幕适配 - 两行显示，一行4个 */


        .stat-card::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--card-accent, var(--primary)), var(--card-accent, var(--secondary)));
        }

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

        .stat-card h3 {
            font-size: calc(1.8rem - (var(--card-columns, 8) - 4) * 0.08rem);
            /* ★ 2026-08-18 颜色跟随 config.color（--card-accent 由卡片设置初始化时写入），
               无专属规则的卡片不再回退默认蓝；老卡片专属规则优先级更高不受影响 */
            color: var(--card-accent, var(--primary));
            margin-bottom: 5px;
        }

        #todayStudyTimeCard h3 { color: #4b6cb7; }
        #sportsTimeCard h3 { color: #e74c3c; }
        #completedTasksCard h3 { color: #2ecc71; }
        #completionRateCard h3 { color: #f39c12; }

.progress-percent {
    font-size: clamp(1rem, 3vw, 1.8rem);
    font-weight: 700;
    color: #f39c12;
    margin: 5px 0 0;
    line-height: 1;
    white-space: nowrap;
    max-width: 100%;
}

#pointsCard h3 {
    font-size: clamp(1rem, 3vw, 1.5rem);
    font-weight: 700;
    color: #3498db;
    margin: 5px 0 0;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
        #statsCard h3 { color: #9b59b6; }
        #badgeWallCard h3 { color: #FFD700; }
        #scoreStatsCard h3 { color: #CD7F32; }
        #pointsCard h3 { color: #3498db; }
        #timeBankCard h3 { color: #1abc9c; }
        #timetableCard h3 { color: #8B4513; }
        #templateManagerCard h3 { color: #8e44ad; }
        #healthCard h3 { color: #e74c3c; }
        #libraryCard h3 { color: #2ecc71; }
        #tempTimerCard h3 { color: #e74c3c; }
        #petCard h3 { color: #ff6b9d; }
        #moreCardsCard h3 { color: #6c757d; }

        .stat-card p {
            font-size: calc(0.85rem - (var(--card-columns, 8) - 4) * 0.02rem);
            color: var(--text-light);
            word-wrap: break-word;
            white-space: normal;
            line-height: 1.3;
        }

        /* 卡片布局设置区（模态框内）
           ★ 2026-09-11 统一风格：原先是「一行一个底色」（手机浅蓝 #f0f7ff /
             电脑浅绿 #f0fff0 / 侧边栏浅紫 #f0f0ff），三种颜色没有含义、看着杂乱
             → 改为同一底色 + 图标区分设备；下拉框原本也没有样式可用
             （旧选择器 .card-layout-row select 与实际结构对不上）→ 补 .card-layout-select */
        .card-layout-settings {
            margin: 0 0 10px 0;
            padding: 12px 14px;
            background: #f7f8fa;
            border: 1px solid #eceef2;
            border-radius: 10px;
        }
        .card-layout-title {
            font-size: 0.85rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
        }
        .card-layout-title i { color: var(--primary, #4b6cb7); margin-right: 6px; }
        .card-layout-device-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px 8px;
            margin-bottom: 6px;
        }
        .card-layout-device-name {
            flex: 0 0 auto;
            min-width: 88px;
            font-size: 0.85rem;
            font-weight: 600;
            color: #444;
            white-space: nowrap;
        }
        .card-layout-device-name i { color: var(--primary, #4b6cb7); margin-right: 6px; }
        .card-layout-unit { font-size: 0.85rem; color: #666; white-space: nowrap; }
        .card-layout-select {
            padding: 4px 8px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 0.85rem;
            background: #fff;
            color: #333;
        }
        .card-layout-divider { height: 1px; background: #e6e9ef; margin: 10px 0; }
        .card-layout-switch {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px 8px;
            margin: 0;
            font-weight: 400;
            cursor: pointer;
        }
        .card-layout-switch-name {
            flex: 0 0 auto;
            min-width: 88px;
            font-size: 0.85rem;
            font-weight: 600;
            color: #444;
            white-space: nowrap;
        }
        .card-layout-switch-name i { color: var(--primary, #4b6cb7); margin-right: 6px; }
        .card-layout-switch-desc { font-size: 0.8rem; color: #666; }

        /* 窄屏（手机）：设备名/开关名独占一行，避免「每行 … 折叠 … 行」被挤断行 */
        @media (max-width: 640px) {
            .card-layout-device-name,
            .card-layout-switch-name {
                flex-basis: 100%;
                min-width: 0;
                margin-bottom: 2px;
            }
            .card-layout-switch-desc { flex-basis: 100%; }
            .card-layout-title { margin-bottom: 6px; }
        }

        /* 提示条：布局提示与卡片提示共用同一种样式
           （原来是「白底灰字」与「灰底蓝边」两种，同级说明却长得不一样） */
        .card-layout-hint,
        #cardVisibilityModal .modal-description {
            margin: 0 0 10px 0;
            padding: 8px 12px;
            background: #f8f9fa;
            border-left: 3px solid var(--primary, #4b6cb7);
            border-radius: 6px;
            font-size: 0.78rem;
            color: #6b7280;
            line-height: 1.5;
        }
        .card-layout-hint i { color: var(--primary, #4b6cb7); margin-right: 5px; }

        .main-content {
            display: flex;
            gap: 25px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        /* 修改侧边栏样式 */
        .sidebar {
            width: 280px;
            min-width: 40px; /* 折叠状态宽度 */
            background: var(--card-bg);
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 8px 16px var(--shadow);
            height: fit-content;
            position: relative;
            transition: all 0.3s ease;
            overflow: hidden;
        }

        /* 折叠状态样式 */
        .sidebar.collapsed {
            width: 40px;
            padding: 15px 5px;
        }

        .sidebar.collapsed .sidebar-header {
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 10px;
            padding: 10px 0;
        }

        .sidebar.collapsed .sidebar-header h2 {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            margin: 0;
            padding: 0;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 0;
        }

        .sidebar.collapsed .sidebar-header h2 i {
            transform: rotate(0);
            margin-bottom: 5px;
        }

        .sidebar.collapsed .add-category-btn {
            position: relative;
            top: 0;
            right: 0;
            margin: 10px auto;
        }

        .sidebar.collapsed .category-list,
        .sidebar.collapsed .add-category-btn {
            display: none;
        }

       /* 修改后 */
.sidebar-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
}
.sidebar-header h2 {
    flex: 1 1 auto;          /* 中间文字占满剩余空间 */
    margin: 0;
    padding: 0 10px;       /* 调整内边距 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;         /* 显示可点击光标 */
    user-select: none;       /* 防止文本被选中 */
}
.add-category-btn {
    flex: 0 0 36px;          /* 固定 36 px 宽，不伸不缩 */
    height: 36px;
    border-radius: 50%;
    margin-left: 8px;        /* 与文字保持 8 px 间距 */
}
        .sidebar h2 {
            color: var(--primary);
            padding-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s;
        }

        .add-category-btn {
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            font-size: 1.2rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            position: absolute;
            top: 10px;
            right: 0;
        }

        .add-category-btn:hover {
            background: var(--secondary);
            transform: rotate(90deg);
        }

        .category-list {
            list-style: none;
        }

        .category-item {
            margin-bottom: 10px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

        .category-header {
            padding: 12px 15px;
            background: #f0f7ff;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
        }

        .category-header:hover {
            background: #e3f0ff;
        }

        .category-header.active {
            background: #d4e5ff;
            font-weight: 600;
            color: var(--primary);
        }

        .category-title {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .category-title i {
            font-size: 1.2rem;
            width: 24px;
            text-align: center;
        }

        .category-actions {
            display: flex;
            gap: 8px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .category-header:hover .category-actions {
            opacity: 1;
        }

        .category-action-btn {
            background: none;
            border: none;
            color: var(--text-light);
            cursor: pointer;
            font-size: 0.9rem;
            padding: 2px 5px;
            border-radius: 4px;
        }

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

        .task-list {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
            background: #fafcff;
        }

        .category-item.active .task-list {
            max-height: 1000px;
        }

        .sub-task {
            padding: 10px 15px 10px 45px;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .sub-task:hover {
            background: #f0f9ff;
        }

        .sub-task-actions {
            display: flex;
            gap: 8px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .sub-task:hover .sub-task-actions {
            opacity: 1;
        }

        .add-task-btn {
            background: var(--success);
            color: white;
            border: none;
            border-radius: 5px;
            padding: 6px 12px;
            font-size: 0.85rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: all 0.3s;
        }

        .add-task-btn:hover {
            background: #3d8b40;
        }

        .tasks-container {
            flex: 1;
            min-width: 300px;
            background: var(--card-bg);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 16px var(--shadow);
            position: relative;
            transition: all 0.3s ease;
        }

        .tasks-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f0f4f8;
        }

        .date-display {
            font-size: 1.1rem;
            color: var(--text-light);
            background: #f0f7ff;
            padding: 8px 15px;
            border-radius: 20px;
            font-weight: 500;
        }

        .add-task-main-btn {
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 8px 15px;
            cursor: pointer;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s;
        }

        .add-task-main-btn:hover {
            background: var(--secondary);
            transform: translateY(-2px);
        }

        .task-list-main {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

                    .task-card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
            display: flex;
            overflow: hidden;
            position: relative;
            transition: all 0.3s ease; /* 改为all，让所有属性都有过渡效果 */
            height: 120px; /* 修改为120px */
            cursor: grab; /* 添加抓取光标 */
          }
         /* 在.task-card样式附近添加 */
.task-card .date-range-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

        .task-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
        }

                .category-bar {
            width: 40px; /* 保持40px不变 */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 0.9rem;
            letter-spacing: 1px;
            padding: 5px 0;
        }

        .category-bar i {
            font-size: 1.2rem;
            margin-bottom: 5px;
        }

        .category-bar .category-text {
            writing-mode: vertical-lr;
            text-orientation: mixed;
            text-align: center;
            max-height: 100%;
            overflow: hidden;
        }

               .card-content {
            flex: 1;
            display: flex;
            height: 100%;
        }

        /* 数据显示区域 - 合并info-section和description-section */
        .data-display-area {
            width: 70%;
            padding: 8px 15px;
            display: flex;
            flex-direction: column;
        }

        .info-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 2px;
            flex-wrap: wrap;
        }

        .task-title {
            font-weight: 700;
            font-size: 1.25rem;
            color: #2c3e50;
        }

        .repeat-info {
            color: #1976d2;
            font-size: 0.85rem;
            background: #e3f2fd;
            padding: 2px 8px;
            border-radius: 12px;
        }

        .plan-time {
            color: #9b59b6;
            font-size: 0.95rem;
            font-weight: 600;
            white-space: nowrap;
        }

        .description-box {
        /* ★ 2026-08-08 宽屏（>768px）恢复昨天版本：内容顶格自动换行，超过 max-height 出现上下滚动条；手机单行省略在媒体查询内保留 */
            flex: 1;
            min-width: 0;   /* flex 收缩防撑爆 */
            background: #f9fbfd;
            border: 1px solid #edf2f7;
            border-radius: 10px;
            padding: 4px 8px;
            font-size: 0.92rem;
            line-height: 1.3;
            overflow-y: auto;   /* 文字显示不完整时上下滚动 */
            color: #555;
            max-height: 70px;
        }

        .task-title {
            font-weight: 700;
            font-size: 1.25rem;
            color: #2c3e50;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .task-title i {
            color: #4b6cb7;
        }

        .time-row {
            display: flex;
            gap: 15px;
            margin-bottom: 3px; /* 减少下边距 */
        }

        .time-group {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        /* 日期范围优化 */
        .date-range-group {
            display: flex;
            flex-direction: column;
            gap: 2px;
            margin-bottom: 3px; /* 减少下边距 */
        }

        .info-label {
            font-size: 0.8rem;
            color: #7f8c8d;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .info-value {
            font-size: 0.95rem;
            font-weight: 600;
            color: #2c3e50;
            padding-left: 0;
        }

        .planned-time .info-value {
            color: #3498db;
        }

        .actual-time .info-value {
            color: #27ae60;
        }

        .date-range .info-value {
            color: #9b59b6;
        }

        .recurring-info {
            background: #e3f2fd;
            color: #1976d2;
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 0.85rem;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 3px; /* 减少上边距 */
        }

            .action-section {
            width: 30%; /* 修改为30% */
            display: flex;
            flex-direction: column;
            gap: 8px; /* 减小间距 */
            padding: 8px;
            border-left: 1px solid #f0f4f8;
            justify-content: center;
            align-items: center;
        }

        .action-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
        }

        .action-btn {
            background: #f0f7ff;
            border: none;
            color: #4b6cb7;
            cursor: pointer;
            font-size: 1.1rem;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .action-btn:hover {
            background: #4b6cb7;
            color: white;
            transform: scale(1.1);
        }

        .timer-section {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

               .timer-display {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #3498db;
            background: #f0f8ff;
            padding: 10px 15px 8px 15px;
            border-radius: 10px;
            text-align: center;
            box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
            cursor: pointer;
            transition: all 0.3s;
            margin-bottom: 1px;
        }
        .timer-value {
            font-size: 1.8rem;
            font-weight: 700;
            font-family: 'Courier New', monospace;
            line-height: 1.15;
        }
        .timer-mode-tag {
            font-size: 0.68rem;
            font-weight: 400;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            opacity: 0.55;
            margin-top: 1px;
            letter-spacing: 0.5px;
        }
        /* ★ 接管机制：远端计时态下 mode-tag 替换为"其他设备已启动计时"提示，提示色醒目 */
        .timer-mode-tag.remote-msg {
            opacity: 1;
            font-weight: 500;
            color: #185fa5;
            font-size: 0.72rem;
            letter-spacing: 0;
            background: #eef4fd;
            border: 1px solid #c5d9f1;
            border-radius: 6px;
            padding: 2px 8px;
            margin-top: 2px;
        }

        .timer-display.countdown-mode {
            color: #e74c3c;
            background: #fff5f5;
        }

        .timer-display.countup-mode {
            color: #3498db;
            background: #f0f8ff;
        }

        .timer-display:hover {
            background: #ffebee;
        }



.timer-controls {
    display: flex;
    flex-wrap: wrap;  /* 远端横幅需独占一行（flex-basis:100%） */
    gap: 10px;  /* 从6px改为8px，按钮间距增大 */
    align-items: center;
    justify-content: center;  /* 新增：按钮居中 */
}

.timer-btn {
    border: none;
    border-radius: 6px;  /* 从50%改为6px，变成圆角矩形 */
    width: 45px;  /* 从30px改为45px，变宽 */
    height: 35px;  /* 从30px改为35px，变高 */
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 16px;  /* 新增：增大图标大小 */
}

.timer-btn i {
    font-size: 16px;  /* 从14px改为16px，图标变大 */
    margin: 0;
}

        .timer-btn.start {
            background: linear-gradient(to bottom, #27ae60, #2ecc71);
            color: white;
        }

        .timer-btn.pause {
            background: linear-gradient(to bottom, #f39c12, #f1c40f);
            color: white;
        }

        .timer-btn.stop {
            background: linear-gradient(to bottom, #e74c3c, #c0392b);
            color: white;
        }

        .timer-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .timer-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        /* 接管机制：远端计时态下由 updateTimerButtons/updateFocusModeButtons 直接控制
   .timer-mode-tag.remote-msg（文字位置替代）+ .remote-timer-btn.takeover（按钮位置替代），
   不再使用独立的 .remote-timer-banner 块。
   .focus-timer-remote-msg 专注模式下替代 mode tabs 显示。*/
        .remote-timer-btn {
            border: none;
            border-radius: 6px;
            padding: 0 12px;
            font-size: 13px;
            cursor: pointer;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            transition: all 0.2s;
            height: 35px;  /* 卡片内与 .timer-btn 同高，整体高度不变 */
            box-sizing: border-box;
        }
        .remote-timer-btn.takeover {
            background: linear-gradient(to bottom, #4b6cb7, #3861a8);
        }
        /* 专注模式接管按钮：放大与 .focus-btn 风格一致 */
        .focus-takeover-btn {
            height: auto;
            padding: 15px 30px;
            font-size: 1.2rem;
            border-radius: 10px;
            min-width: 140px;
        }
        .remote-timer-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
        }
        /* 专注模式接管提示（替代 mode tabs 位置） */
        .focus-timer-remote-msg {
            display: none;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 8px 16px;
            background: #eef4fd;
            border: 1px solid #c5d9f1;
            border-radius: 8px;
            color: #185fa5;
            font-size: 0.95rem;
            font-weight: 500;
            margin: 6px auto;
        }

        .completed-task {
            background: #e2f8e7;
        }

        .completed-task .task-title {
            color: var(--success);
        }

        .completed-task .timer-display {
            color: var(--success);
        }

        .completed-task .timer-btn {
            display: none;
        }
.completed-task .description-box {
    background: #e2f8e7 !important;   /* 与卡片底色保持一致 */
    border-color: rgba(76, 175, 80, .25); /* 可选：让边框也带点绿 */
}
        /* 已完成标签 */
        .completed-label {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #4CAF50;
            color: white;
            border-radius: 8px;
            padding: 8px;
            font-weight: bold;
            grid-column: span 3;
            gap: 8px;
        }

        /* 统计页面 */
        .stats-page {
            display: none;
            background: var(--light-bg);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 16px var(--shadow);
            margin-top: 20px;
        }

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

        .back-btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
            gap: 30px;
        }

        .stat-chart {
            background: var(--card-bg);
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            height: 350px;
        }

        .stat-chart h3 {
            text-align: center;
            margin-bottom: 15px;
            color: var(--primary);
        }

        .chart-container {
            height: calc(100% - 40px);
            position: relative;
        }

        /* ========== 学习热力图 ========== */
        .heatmap-chart {
            grid-column: 1 / -1;
            padding: 20px 24px;
            display: flex;
            flex-direction: column;
            height: 380px;
            overflow: hidden;
        }
        .heatmap-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            flex-wrap: wrap;
            gap: 12px;
            flex-shrink: 0;
        }
        .heatmap-header h3 {
            color: var(--primary);
            margin: 0;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .heatmap-controls {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .heatmap-nav-btn {
            background: var(--card-bg);
            border: 1px solid #ddd;
            border-radius: 6px;
            width: 32px;
            height: 32px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            font-size: 13px;
            transition: all 0.2s;
        }
        .heatmap-nav-btn:hover {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        .heatmap-title {
            font-weight: 700;
            font-size: 1rem;
            color: #333;
            min-width: 90px;
            text-align: center;
        }
        .heatmap-view-toggle {
            display: flex;
            border: 1px solid #ddd;
            border-radius: 6px;
            overflow: hidden;
            margin-left: 8px;
        }
        .heatmap-view-btn {
            padding: 6px 14px;
            border: none;
            background: white;
            cursor: pointer;
            font-size: 13px;
            color: #666;
            transition: all 0.2s;
        }
        .heatmap-view-btn.active {
            background: var(--primary);
            color: white;
        }
        .heatmap-view-btn:hover:not(.active) {
            background: #f0f0f0;
        }

        .heatmap-body {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            min-height: 0;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        /* 月度三连日历 */
        .heatmap-multi-month {
            display: flex;
            gap: 16px;
            width: 100%;
        }
        .heatmap-month-group {
            flex: 1;
            min-width: 0;
            max-width: 240px;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .heatmap-month-label {
            text-align: center;
            font-size: 13px;
            font-weight: 700;
            color: #555;
            padding: 2px 0;
        }
        .heatmap-month-group.current .heatmap-month-label {
            color: var(--primary);
        }
        .heatmap-mini-weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 2px;
            text-align: center;
            font-size: 10px;
            color: #aaa;
            font-weight: 600;
        }
        .heatmap-mini-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 2px;
        }
        .heatmap-mini-cell {
            aspect-ratio: 1;
            border-radius: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: #333;
            cursor: pointer;
            transition: all 0.15s;
            position: relative;
            border: 1px solid #eee;
        }
        .heatmap-mini-cell:hover {
            transform: scale(1.15);
            box-shadow: 0 1px 6px rgba(0,0,0,0.18);
            z-index: 2;
        }
        .heatmap-mini-cell.empty {
            background: transparent;
            border: none;
            cursor: default;
        }
        .heatmap-mini-cell.empty:hover {
            transform: none;
            box-shadow: none;
        }
        .heatmap-mini-cell.today {
            box-shadow: 0 0 0 2px #4b6cb7;
            font-weight: 700;
        }
        .heatmap-mini-cell .cell-tooltip {
            display: none;
            position: absolute;
            bottom: 110%;
            left: 50%;
            transform: translateX(-50%);
            background: #333;
            color: #fff;
            padding: 3px 8px;
            border-radius: 3px;
            font-size: 10px;
            white-space: nowrap;
            pointer-events: none;
            z-index: 10;
        }
        .heatmap-mini-cell:hover .cell-tooltip {
            display: block;
        }

        /* 保留旧样式供年度视图兼容 */
        .heatmap-weekdays {
            display: none;
        }
        .heatmap-grid {
            display: none;
        }
        .heatmap-cell {
            display: none;
        }
        .heatmap-cell.empty {
            display: none;
        }
        .heatmap-cell.today {
            display: none;
        }
        .heatmap-cell .cell-tooltip {
            display: none;
        }

        /* 年度视图 — 每行一个月，从左到右排列1号到月末 */
        .heatmap-yearly {
            display: flex;
            flex-direction: column;
            gap: 2px;
            width: 100%;
            max-width: 660px;
            margin: 0 auto;
        }
        .heatmap-year-row {
            display: flex;
            align-items: center;
            gap: 3px;
        }
        .heatmap-year-label {
            width: 18px;
            font-size: 10px;
            font-weight: 600;
            color: #888;
            text-align: right;
            flex-shrink: 0;
        }
        .heatmap-year-days {
            display: flex;
            gap: 2px;
            flex: 1;
            overflow: hidden;
        }
        .heatmap-year-cell {
            flex: 1 1 0;
            max-width: 14px;
            min-width: 4px;
            height: 12px;
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.15s;
            position: relative;
            border: 1px solid #eee;
        }
        .heatmap-year-cell:hover {
            transform: scale(1.3);
            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
            z-index: 2;
        }
        .heatmap-year-cell .cell-tooltip {
            display: none;
            position: absolute;
            bottom: 120%;
            left: 50%;
            transform: translateX(-50%);
            background: #333;
            color: #fff;
            padding: 3px 8px;
            border-radius: 3px;
            font-size: 10px;
            white-space: nowrap;
            pointer-events: none;
            z-index: 10;
        }
        .heatmap-year-cell:hover .cell-tooltip {
            display: block;
        }

        /* 图例 */
        .heatmap-legend {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-top: 16px;
            font-size: 12px;
            color: #888;
            flex-wrap: wrap;
            flex-shrink: 0;
        }
        .heatmap-legend-cell {
            width: 18px;
            height: 18px;
            border-radius: 3px;
        }
        .heatmap-legend-label {
            font-size: 10px;
            color: #999;
            margin-left: -4px;
            margin-right: 6px;
        }

        /* 响应式 */
        @media (max-width: 768px) {
            .heatmap-chart {
                height: 500px;
            }
            .heatmap-multi-month {
                gap: 6px;
                width: 100%;
            }
            .heatmap-month-group {
                max-width: none;
                min-width: 0;
            }
            .heatmap-mini-grid {
                gap: 1px;
            }
            .heatmap-mini-weekdays {
                gap: 1px;
                font-size: 9px;
            }
            .heatmap-mini-cell {
                font-size: 8px;
                aspect-ratio: 1;
                min-height: 0;
                border-radius: 2px;
            }
            .heatmap-mini-cell.empty {
                display: none;
            }
            .heatmap-month-label {
                font-size: 11px;
            }
            .heatmap-yearly {
                gap: 1px;
            }
            .heatmap-year-label {
                width: 16px;
                font-size: 9px;
            }
            .heatmap-year-cell {
                height: 10px;
            }
            .heatmap-view-toggle {
                margin-left: 0;
            }
            .heatmap-header {
                flex-direction: column;
                align-items: flex-start;
            }
            .heatmap-controls {
                width: 100%;
                justify-content: space-between;
            }
        }
        @media (max-width: 480px) {
            .heatmap-chart {
                height: 460px;
            }
            .heatmap-multi-month {
                gap: 3px;
            }
            .heatmap-mini-grid {
                gap: 1px;
            }
            .heatmap-mini-weekdays {
                font-size: 7px;
                gap: 1px;
            }
            .heatmap-mini-cell {
                font-size: 0;       /* 极小屏隐藏数字，hover tooltip 显示 */
                color: transparent !important;
                border-radius: 1px;
                min-height: 0;
            }
            .heatmap-mini-cell .cell-tooltip {
                font-size: 9px;
            }
            .heatmap-month-label {
                font-size: 9px;
            }
            .heatmap-yearly {
                gap: 1px;
            }
            .heatmap-year-cell {
                height: 8px;
            }
            .heatmap-year-label {
                width: 14px;
                font-size: 8px;
            }
        }

        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 20px 0;
        }

        .print-btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background 0.3s;
        }

        .print-btn:hover {
            background: var(--secondary);
        }

        .data-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin: 20px 0;
            flex-wrap: wrap;
        }

        .data-btn {
            background: #5bc0de;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background 0.3s;
        }

        .data-btn:hover {
            background: #31b0d5;
        }

        .export-btn {
            background: var(--success);
        }

        .export-btn:hover {
            background: #3d8b40;
        }

        .import-btn {
            background: #aa66cc;
        }

        .import-btn:hover {
            background: #9933cc;
        }

        .clear-btn {
            background: var(--danger);
        }

        .clear-btn:hover {
            background: #d32f2f;
        }

        /* 格式选择卡片 hover 效果 */
        .format-option-card:hover {
            border-color: #4b6cb7 !important;
            background: #f5f7fa !important;
        }

        footer {
            text-align: center;
            margin-top: 40px;
            padding: 20px;
            color: var(--text-light);
            font-size: 0.9rem;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 2000;
            justify-content: center;
            align-items: center;
            overflow: auto;
        }

        .modal-content {
            background: white;
            border-radius: 15px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            overflow: hidden;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
        }

        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 48px;
            height: 26px;
        }
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .3s;
            border-radius: 26px;
        }
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .3s;
            border-radius: 50%;
        }
        .toggle-switch input:checked + .toggle-slider {
            background-color: var(--primary, #4a90d9);
        }
        .toggle-switch input:checked + .toggle-slider:before {
            transform: translateX(22px);
        }

        /* 首页宠物小部件 */
        .home-pet-widget {
            position: fixed;
            left: 15px;
            bottom: 80px;
            width: 70px;
            border-radius: 14px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
            padding: 6px;
            z-index: 100;
            cursor: grab;
            transition: box-shadow 0.3s ease, border-color 0.3s ease;
            border: 2px solid rgba(255, 255, 255, 0.4);
            user-select: none;
            -webkit-user-select: none;
            touch-action: none;
        }
        .home-pet-widget:hover {
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
        }
        .home-pet-widget.dragging {
            cursor: grabbing;
            opacity: 0.85;
            transition: none;
        }
        .home-pet-close {
            position: absolute;
            top: -8px;
            right: -8px;
            width: 22px;
            height: 22px;
            background: #e74c3c;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            cursor: pointer;
            z-index: 101;
            box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
            transition: all 0.2s ease;
        }
        .home-pet-close:hover {
            transform: scale(1.1);
            background: #c0392b;
        }
        .home-pet-content {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .home-pet-avatar {
            width: 56px;
            height: 56px;
            margin-bottom: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .home-pet-avatar img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        .home-pet-name {
            font-size: 10px;
            font-weight: 600;
            color: #fff;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 62px;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        }
        .home-pet-status {
            font-size: 9px;
            color: rgba(255, 255, 255, 0.9);
            margin-top: 1px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
        }

        .modal-header {
            background: var(--primary);
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .modal-header h3 {
            font-size: 1.3rem;
        }

        .close-modal {
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
        }

        .modal-body {
            padding: 15px;
            overflow-y: auto;
        }

        #announcementModal .modal-content {
            border-radius: 15px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.2);
            max-width: 560px;
        }

        #announcementModal .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background: linear-gradient(135deg, #3498db, #2980b9);
            border-radius: 15px 15px 0 0;
        }

        #announcementModal .modal-header h3 {
            margin: 0;
            color: white;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.2rem;
        }

        #announcementModal .close-modal {
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            padding: 0 8px;
            border-radius: 5px;
            transition: background 0.2s;
            line-height: 1;
        }

        #announcementModal .close-modal:hover {
            background: rgba(255,255,255,0.3);
        }

        #announcementModal .modal-body {
            padding: 20px;
            text-align: left;
            font-size: 14px;
            line-height: 1.8;
            color: #333;
        }

        /* 公告内容中的图片和列表样式 */
        #announcementContent img {
            max-width: 100%;
            height: auto;
            border-radius: 6px;
            margin: 8px 0;
        }
        #announcementContent ul,
        #announcementContent ol {
            text-align: left;
            padding-left: 20px;
            margin: 8px 0;
        }
        #announcementContent li {
            margin: 4px 0;
        }
        #announcementContent a {
            color: #4b6cb7;
            text-decoration: underline;
        }
        #announcementContent blockquote {
            border-left: 3px solid #ddd;
            padding-left: 12px;
            margin: 8px 0;
            color: #666;
        }

        #announcementModal .form-actions {
            padding: 15px 20px;
            border-top: 1px solid #eee;
            text-align: center;
            background: #fafafa;
            border-radius: 0 0 15px 15px;
        }

        /* 公告未读角标 */
        .announcement-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 22px;
            height: 22px;
            background: #e74c3c;
            color: #fff;
            font-size: .72rem;
            font-weight: 700;
            border-radius: 11px;
            padding: 0 6px;
            animation: badgePopIn .3s ease;
        }
        @keyframes badgePopIn {
            from { transform: scale(0); }
            to { transform: scale(1); }
        }

        /* 公告翻页导航 */
        .announcement-nav {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .announcement-nav button {
            border-radius: 20px;
            padding: 6px 16px;
        }
        .announcement-nav button:disabled {
            opacity: .4;
            cursor: default;
        }
        #announcementCounter {
            font-size: .82rem;
            color: #6b7280;
            min-width: 50px;
            text-align: center;
        }

        .form-group {
            margin-bottom: 10px;
        }
/* 确保任务说明文本区域和下方的存入模板选项有适当的间距 */
.form-group {
    position: relative;
}

#saveTemplateContainer {
    background-color: #f8f9fa;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text);
        }

        .form-control {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 1rem;
        }

        .time-inputs {
            display: flex;
            gap: 10px;
        }

        .time-inputs .form-control {
            flex: 1;
        }

        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid var(--border);
            position: sticky;
            bottom: 0;
            background: white;
            z-index: 10;
        }

        .btn {
            padding: 6px 10px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
        }

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

        .btn-primary:hover {
            background: var(--secondary);
        }

        .btn-danger {
            background: #e74c3c;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 8px 15px;
            cursor: pointer;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s;
        }

        .btn-danger:hover {
            background: #c0392b;
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: #e0e0e0;
            color: var(--text);
        }

        .btn-secondary:hover {
            background: #d0d0d0;
        }

        .btn-outline-primary {
            background: transparent;
            color: var(--primary);
            border: 1px solid var(--primary);
            padding: 8px 16px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
        }

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

        .single-delete-message {
            display: none;
            margin: 20px 0;
            padding: 10px;
            background: #fff0f0;
            border-radius: 8px;
            border-left: 3px solid var(--danger);
        }

      /* 确保警告框在所有内容之上 */
#wheelAlertModal {
    z-index: 4000; /* 高于学习总结模态框的 3000 */
}

/* 常用总结语下拉选择框样式 */
#commonSummarySelect {
    max-width: calc(100% - 120px); /* 减去标签和按钮的宽度，确保不超出页面 */
    white-space: normal;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
}

#commonSummarySelect option {
    white-space: normal;
    word-wrap: break-word;
    max-width: 250px; /* 固定下拉选项的宽度 */
    padding: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 250px;
}

.confirmation-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 2100; /* 提高到 2100 */
    display: none;
    justify-content: center;
    align-items: center;
}

        .confirmation-content {
            background: white;
            border-radius: 15px;
            width: 90%;
            max-width: 400px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            overflow: hidden;
        }

        /* 统计卡片说明弹窗 */
        .stat-info-content {
            max-width: 460px;
        }
        .stat-info-icon {
            width: 64px; height: 64px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 14px;
            font-size: 28px;
        }
        .stat-info-title {
            font-size: 1.2rem;
            font-weight: 700;
            margin: 0 0 18px;
            text-align: center;
        }
        .stat-info-body {
            text-align: left;
            max-height: 50vh;
            overflow-y: auto;
            padding: 0 4px;
        }
        .stat-info-section {
            margin-bottom: 14px;
        }
        .stat-info-section:last-child {
            margin-bottom: 0;
        }
        .stat-info-label {
            font-size: .85rem;
            font-weight: 600;
            color: #475569;
            margin-bottom: 4px;
        }
        .stat-info-text {
            font-size: .82rem;
            color: #64748b;
            line-height: 1.6;
        }
        .stat-info-text b {
            color: #1e293b;
        }
        .stat-card-info {
            position: relative;
        }
        .stat-card-info::before {
            content: 'ⓘ';
            position: absolute;
            top: 6px;
            right: 6px;
            font-size: 11px;
            color: #94a3b8;
            opacity: 0;
            transition: opacity 0.2s;
        }
        .stat-card-info:hover::before {
            opacity: 1;
        }

        /* 清空数据模态框勾选项样式 */
        /* ★ 2026-09-15 修复手机窄屏崩坏：原为 display:flex 横排 ——
           input / .clear-item-name / .clear-item-desc 是三个直接子元素，
           会被当成并排的 flex item（.clear-item-name 的 display:block 在 flex item 上失效），
           窄屏下「学习计划（任务+计时器）」这类长名称逐字竖排、整个弹窗不可读。
           改为 grid：勾选框在左，名称与描述在右侧上下排。 */
        .clear-item-label {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            column-gap: 6px;
            row-gap: 2px;
            align-items: start;
            text-align: left;   /* 弹窗默认居中；清单类内容左对齐才好扫读 */
            padding: 6px 10px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            transition: background 0.15s, border-color 0.15s;
        }
        .clear-item-label:hover {
            background: #fafafa;
            border-color: #bbb;
        }
        .clear-item-label input[type="checkbox"] {
            grid-column: 1;
            grid-row: 1;
            margin: 0;
            margin-top: 2px;
            cursor: pointer;
        }
        .clear-item-name {
            grid-column: 2;
            grid-row: 1;
            font-weight: 600;
            color: #333;
            display: block;
        }
        .clear-item-desc {
            grid-column: 2;
            grid-row: 2;
            display: block;
            font-size: 11px;
            color: #888;
            font-weight: normal;
            line-height: 1.3;
        }

        .confirmation-body {
            padding-top: 10px;
            padding-right: 30px;
            padding-left: 30px;
            text-align: center;
        }

        /* 修复窄屏下勋章弹窗顶部 padding 被覆盖的问题 */
        @media (max-width: 480px) {
            #unlockedBadgeModal .confirmation-body {
                padding: 38px 20px 14px !important;
            }
            #unlockedBadgeModal .confirmation-actions {
                padding: 2px 20px 14px !important;
            }
        }

        .confirmation-actions {
            display: flex;
            justify-content: center;
            gap: 15px;
            padding: 20px;
            border-top: 1px solid var(--border);
        }

        .stop-actions-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 20px;
            border-top: 1px solid var(--border);
        }

        .stop-action-item {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px;
            border: 2px solid;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s;
            background: #fff;
            width: 100%;
            text-align: left;
        }

        .stop-action-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            background: #fff;
        }

        .stop-action-item:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .stop-icon-circle {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .stop-icon-circle i {
            font-size: 1.2rem;
            color: white;
        }

        .stop-icon-green {
            background: #28a745;
        }

        .stop-icon-red {
            background: #dc3545;
        }

        .stop-icon-blue {
            background: #17a2b8;
        }

        .stop-icon-orange {
            background: #fd7e14;
        }

        .stop-border-green {
            border-color: #28a745;
        }

        .stop-border-red {
            border-color: #dc3545;
        }

        .stop-border-blue {
            border-color: #17a2b8;
        }

        .stop-border-orange {
            border-color: #fd7e14;
        }

        .stop-action-item:disabled .stop-icon-circle {
            background: #6c757d;
        }

        .stop-item-content {
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .stop-item-title {
            font-size: 1rem;
            font-weight: 600;
            color: #333;
            line-height: 1.2;
        }

        .stop-item-desc {
            font-size: 0.85rem;
            color: #666;
            margin-top: 4px;
            line-height: 1.3;
        }

        /* 家长控制 ================================ */
        .parent-section {
            margin-bottom: 24px;
        }
        .parent-section-title {
            font-size: 15px; font-weight: 700; color: #333;
            margin: 0 0 6px; display: flex; align-items: center; gap: 8px;
        }
        .parent-section-title i { color: #ff6b9d; }
        .parent-section-desc {
            font-size: 12px; color: #999; margin: 0 0 14px;
        }
        /* 卡片分组 */
        .parent-card-group {
            margin-bottom: 16px;
        }
        .parent-card-group-title {
            font-size: 13px; font-weight: 600; color: #555;
            margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
            padding-left: 4px;
        }
        .parent-card-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }
        /* 单张设置卡片 */
        .parent-card {
            display: flex; align-items: center; justify-content: space-between;
            background: #fff; border: 1px solid #eee;
            border-radius: 10px; padding: 10px 14px;
            cursor: pointer; transition: all 0.2s;
            user-select: none;
        }
        .parent-card:hover {
            border-color: #ff6b9d; box-shadow: 0 2px 8px rgba(255,107,157,0.1);
        }
        .parent-card input { display: none; }
        .parent-card-info { flex: 1; min-width: 0; }
        .parent-card-info span {
            display: block; font-size: 13px; font-weight: 500; color: #333;
        }
        .parent-card-info small {
            display: block; font-size: 11px; color: #aaa; margin-top: 2px;
        }
        .parent-card-toggle {
            width: 42px; height: 24px; border-radius: 12px;
            background: #ddd; position: relative; flex-shrink: 0;
            transition: background 0.3s; margin-left: 10px;
        }
        .parent-card-toggle::after {
            content: ''; position: absolute; top: 2px; left: 2px;
            width: 20px; height: 20px; border-radius: 50%;
            background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
            transition: transform 0.3s;
        }
        .parent-card input:checked + .parent-card-toggle {
            background: #ff6b9d;
        }
        .parent-card input:checked + .parent-card-toggle::after {
            transform: translateX(18px);
        }

        /* 旧开关保留兼容（其他地方可能还在用） */
        .switch {
            position: relative; display: inline-block;
            width: 50px; height: 24px;
        }
        .switch input { opacity: 0; width: 0; height: 0; }
        .slider {
            position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
            background-color: #ccc; transition: .4s; border-radius: 24px;
        }
        .slider:before {
            position: absolute; content: ""; height: 18px; width: 18px;
            left: 3px; bottom: 3px; background-color: white;
            transition: .4s; border-radius: 50%;
        }
        input:checked + .slider { background-color: var(--primary); }
        input:checked + .slider:before { transform: translateX(26px); }

        .password-control-item { display: none; }
        .password-control-label { display: none; }

        .repeat-options {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .repeat-option {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .repeat-inputs {
            display: flex;
            gap: 10px;
            margin-left: 10px;
            align-items: center;
        }

        .repeat-inputs input {
            width: 60px;
            padding: 8px;
            border: 1px solid var(--border);
            border-radius: 5px;
        }

        .delete-options {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin: 20px 0;
        }

        .delete-option {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .single-delete-message {
            display: none;
            margin: 20px 0;
            padding: 10px;
            background: #fff0f0;
            border-radius: 8px;
            border-left: 4px solid var(--danger);
        }

        .required:after {
            content: " *";
            color: var(--danger);
        }

        /* 日期排列修复 */
        .date-row {
            flex-direction: row;
            flex-wrap: nowrap;
        }

        .date-group {
            min-width: auto;
            flex: 1;
        }

        /* 优化后的顶部导航布局 */
        .tasks-header-container {
            display: flex;
            flex-direction: column;
            margin-bottom: 0; /* 移除下边距 */
        }

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

        .date-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #f0f7ff;
            padding: 12px 20px;
            border-radius: 12px;
            margin-bottom: 0; /* 移除下边距 */
        }

        .date-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .current-date-display {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--primary);
        }

        .date-controls {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .week-controls {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .week-toggle {
            background: #e3f0ff;
            border-radius: 6px;
            overflow: hidden;
            display: flex;
        }

        .week-btn {
            padding: 6px 12px;
            background: transparent;
            border: none;
            cursor: pointer;
            font-size: 0.9rem;
            transition: all 0.3s;
        }

        .week-btn.active {
            background: var(--primary);
            color: white;
        }

        .calendar-toggle {
            background: var(--primary);
            color: white;
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
        }

        .calendar-toggle:hover {
            background: var(--secondary);
        }

        .action-buttons-container {
            display: flex;
            gap: 10px;
        }

        /* 加载指示器 */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            transition: opacity 0.3s;
        }

        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #4b6cb7;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .calendar-nav {
            display: flex;
            gap: 10px;
        }

        /* 专注模式样式 */
        #focusModal {
            display: none;
            background: rgba(255, 255, 255, 0.95);
            z-index: 2000;
        }

        .focus-container {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            padding: 20px;
        }

        .focus-task-card {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .focus-task-content {
    width: 90%;
    max-width: 800px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
    padding: 60px 40px 40px;
    position: relative; /* 添加相对定位 */
}

        /* 专注模式顶部按钮样式 */
        .focus-top-left {
            position: absolute;
            top: 15px;
            left: 15px;
            z-index: 10;
            padding: 8px 16px;
            font-size: 0.9rem;
        }

        .focus-top-right {
            position: absolute;
            top: 15px;
            right: 15px;
            z-index: 10;
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .focus-action-btn {
            background: rgba(75, 108, 183, 0.1);
            border: 1px solid rgba(75, 108, 183, 0.2);
            color: var(--primary);
            border-radius: 6px;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 1rem;
        }

        .focus-action-btn:hover {
            background: rgba(75, 108, 183, 0.2);
        }

        /* 音效开关按钮 */
        .focus-sound-toggle {
            background: rgba(75, 108, 183, 0.1);
            border: 1px solid rgba(75, 108, 183, 0.2);
            color: var(--primary);
            border-radius: 6px;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 1rem;
        }
        .focus-sound-toggle:hover {
            background: rgba(75, 108, 183, 0.2);
        }
        .focus-sound-toggle.muted {
            color: #aaa;
            background: rgba(0, 0, 0, 0.05);
            border-color: rgba(0, 0, 0, 0.12);
        }
        .focus-sound-toggle.muted:hover {
            background: rgba(0, 0, 0, 0.1);
        }

        /* 确保任务标题不会被按钮遮挡 */
        .focus-task-title {
            margin-top: 10px;
            position: relative;
            z-index: 5;
        }

        /* 响应式调整：在手机上使专注模式更宽 */


        .focus-task-title {
            font-size: 2.5rem;
            text-align: center;
            margin-bottom: 15px;
            color: var(--primary);
        }

        .focus-timer-display {
            font-size: 5rem;
            font-weight: bold;
            text-align: center;
            font-family: 'Courier New', monospace;
            color: #3498db;
            margin-top: 10px;
            margin-right: 0px;
            margin-bottom: 10px;
            margin-left: 0px;
            background: transparent;
            border: none;
            outline: none;
            cursor: default;
            width: 100%;
        }
        
        .focus-timer-display.countdown-mode {
            color: #e74c3c;
        }
        
        .focus-timer-display.countup-mode {
            color: #3498db;
        }
        
        .focus-timer-display:not([readonly]) {
            cursor: text;
            background: rgba(255, 255, 255, 0.9);
            border: 2px solid #e74c3c;
            border-radius: 10px;
            padding: 10px;
        }
        
        .focus-timer-mode-tabs {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .focus-timer-mode-tab {
            padding: 8px 20px;
            font-size: 1rem;
            border: 2px solid #ddd;
            border-radius: 20px;
            background: white;
            color: #666;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .focus-timer-mode-tab.active {
            border-color: #3498db;
            background: #3498db;
            color: white;
        }
        
        .focus-timer-mode-tab.countdown-active {
            border-color: #e74c3c;
            background: #e74c3c;
            color: white;
        }
        
        .focus-timer-mode-tab.pomodoro-active {
            border-color: #e74c3c;
            background: #e74c3c;
            color: white;
        }
        
        .focus-timer-mode-tab:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .focus-controls {
            display: flex;
            flex-wrap: wrap;  /* 远端横幅需独占一行 */
            justify-content: center;
            gap: 20px;
            margin-top: 10px;
        }

        .focus-btn {
            padding: 15px 30px;
            font-size: 1.2rem;
            border-radius: 10px;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s;
        }

        .focus-btn.start {
            background: linear-gradient(to bottom, #27ae60, #2ecc71);
            color: white;
        }

        .focus-btn.pause {
            background: linear-gradient(to bottom, #f39c12, #f1c40f);
            color: white;
        }

        .focus-btn.stop {
            background: linear-gradient(to bottom, #e74c3c, #c0392b);
            color: white;
        }

        .focus-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

        .focus-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .focus-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            row-gap: 10px;
            column-gap: 20px;
            margin-top: 20px;
        }

        .focus-detail-item {
            padding-top: 5px;
            padding-right: 15px;
            padding-bottom: 5px;
            padding-left: 15px;
			
            background: #f9fbfd;
            border-radius: 10px;
            border: 1px solid #edf2f7;
        }

        .focus-detail-item h4 {
            margin-bottom: 10px;
            color: #4b6cb7;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .focus-detail-item p {
            margin: 0;
            line-height: 1.6;
        }

        .focus-points-section {
            grid-column: 1 / span 2;
        }

        .points-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }

        .points-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px 15px;
            border-radius: 8px;
            min-width: 100px;
            text-align: center;
        }

        .points-positive {
            background: #e8f5e9;
            border: 1px solid #a5d6a7;
        }

        .points-negative {
            background: #ffebee;
            border: 1px solid #ef9a9a;
        }

        .points-label {
            font-size: 0.8rem;
            color: #666;
            margin-bottom: 5px;
        }

        .points-value {
            font-size: 1.1rem;
            font-weight: bold;
        }

        .points-positive .points-value {
            color: #4CAF50;
        }

        .points-negative .points-value {
            color: #c62828;
        }

        /* 图标备选方案 */
        .icon-fallback .fas {
            position: relative;
            visibility: hidden;
        }

        .icon-fallback .fas::before {
            content: attr(data-fallback);
            position: absolute;
            visibility: visible;
            left: 0;
            top: 0;
            font-size: 0.7em;
            background: #f0f0f0;
            padding: 2px;
            border-radius: 3px;
            font-family: Arial, sans-serif;
            font-weight: bold;
        }

        /* 总览视图样式 */
        .overview-grid {
            display: grid;
            gap: 1px;
            background: var(--border);
        }

        .overview-row {
            display: grid;
        }

        .overview-header-row {
            background: #f0f7ff;
            font-weight: bold;
        }

        .overview-time-header {
            padding: 10px;
        }

        .overview-date-header {
            padding: 2px;
            text-align: center;
            font-size: 0.8rem;
        }

        .overview-time-cell {
            padding: 3px 8px;
            background: #f0f7ff;
            font-size: 0.9rem;
        }

        .overview-cell {
            padding: 1px;
            background: white;
            min-height: 32px;
            border: 1px solid #e0e0e0;
            word-wrap: break-word;
            white-space: normal;
            font-size: 0.8rem;
        }

        .overview-task {
            background: #e3f0ff;
            padding: 1px;
            border-radius: 2px;
            font-size: 0.8rem;
            word-wrap: break-word;
            white-space: normal;
            margin: 0;
        }

        .overview-task.completed {
            background: #e2f8e7;
        }

        .overview-task.flexible {
            background: #f0f7ff;
        }

        .overview-task-name {
            font-weight: bold;
        }

        .overview-task-time {
            font-size: 0.7rem;
            color: #666;
        }

        .overview-flexible-header {
            padding: 10px;
            background: #f0f7ff;
            font-size: 0.9rem;
            font-weight: bold;
        }

        /* 总览视图标签样式 */
        .overview-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }

        .overview-tab {
            padding: 8px 15px;
            border: none;
            border-radius: 6px;
            background: #f0f7ff;
            color: var(--primary);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .overview-tab.active {
            background: var(--primary);
            color: white;
        }

        /* 自定义日期选择控件 */
        .custom-date-controls {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }

        /* 总览内容区域 */
        #overviewContent {
            padding: 20px;
            overflow-x: auto;
        }

        /* 灵活安排标题单元格 */
        .overview-flexible-header {
            padding: 10px;
            background: #f0f7ff;
            font-size: 0.9rem;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        /* 恢复第一列宽度 */
        .overview-row {
            /* 第一列宽度由JavaScript动态设置，不在这里固定 */
        }

        /* 确保active类样式生效 */
        .overview-tab {
            padding: 8px 15px;
            border: none;
            border-radius: 6px;
            background: #f0f7ff !important;
            color: var(--primary) !important;
            cursor: pointer;
            transition: all 0.3s ease !important;
        }

        .overview-tab.active {
            background: var(--primary) !important;
            color: white !important;
        }

        /* 祝贺弹窗样式 */
        #congratsModal {
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 3000;
            background: rgba(0, 0, 0, 0.35);
        }

        .congrats-content {
            position: relative;
            background: linear-gradient(160deg, #fffbeb 0%, #fef3c7 100%);
            border-radius: 24px;
            padding: 28px 24px 24px;
            text-align: center;
            max-width: 480px;
            width: 92%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 4px #fbbf24 inset;
            animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            overflow: visible;
        }

        @keyframes popIn {
            0% { transform: scale(0.8); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }

        .congrats-content h2 {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 60%, #b45309 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 800;
            font-size: 1.7rem;
            margin: 0 0 8px;
            line-height: 1.3;
            font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
        }

        .congrats-trophy-wrap {
            position: relative;
            display: inline-block;
            margin: 4px 0 8px;
        }

        .congrats-icon {
            font-size: 64px;
            color: #f59e0b;
            text-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
            animation: bounce 1.5s ease-in-out infinite;
            display: inline-block;
            line-height: 1;
        }

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

        /* 奖杯周围的装饰小星星 */
        .congrats-trophy-wrap::before,
        .congrats-trophy-wrap::after {
            content: "✦";
            position: absolute;
            color: #fbbf24;
            font-size: 18px;
            opacity: 0.7;
        }
        .congrats-trophy-wrap::before {
            top: 0;
            left: -28px;
            animation: sparkle 2s ease-in-out infinite;
        }
        .congrats-trophy-wrap::after {
            top: 6px;
            right: -28px;
            animation: sparkle 2s ease-in-out infinite 0.5s;
        }

        @keyframes sparkle {
            0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.5; }
            50% { transform: scale(1.3) rotate(180deg); opacity: 1; }
        }

        .congrats-message {
            font-size: 1.05rem;
            color: #4b5563;
            margin-bottom: 20px;
            line-height: 1.5;
            font-weight: 500;
        }

        /* 2x2 统计卡片网格 */
        .stats-details {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin: 16px 0 18px;
        }

        .stats-card-item {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 14px;
            padding: 14px 12px;
            display: flex;
            align-items: center;
            gap: 10px;
            border: 1px solid rgba(251, 191, 36, 0.25);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            text-align: left;
        }

        .stats-card-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
        }
        .stats-card-icon.study { background: #fef3c7; color: #d97706; }
        .stats-card-icon.sports { background: #d1fae5; color: #059669; }
        .stats-card-icon.tasks { background: #e0e7ff; color: #4f46e5; }
        .stats-card-icon.rate { background: #fee2e2; color: #dc2626; }

        .stats-card-content {
            flex: 1;
            min-width: 0;
        }

        .stats-card-label {
            font-size: .72rem;
            color: #6b7280;
            margin-bottom: 2px;
            line-height: 1.2;
        }

        .stats-card-value {
            font-size: 1.1rem;
            font-weight: 700;
            color: #d97706;
            line-height: 1.2;
        }

        .stats-card-value.rate-done {
            color: #059669;
        }

        .backup-tip {
            color: #d97706;
            font-weight: 500;
            margin: 14px 0 14px;
            font-size: .9rem;
        }

        .backup-btn {
            background: linear-gradient(135deg, #4b6cb7 0%, #3a5795 100%);
            color: white;
            border: none;
            border-radius: 30px;
            padding: 12px 36px;
            font-size: 1.05rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(75, 108, 183, 0.4);
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .backup-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(75, 108, 183, 0.6);
        }

        .backup-btn i {
            font-size: 1.1rem;
        }

        .close-congrats {
            position: absolute;
            top: 14px;
            right: 14px;
            background: rgba(255, 255, 255, 0.7);
            border: none;
            font-size: 1.2rem;
            color: #9ca3af;
            cursor: pointer;
            transition: all 0.3s;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            z-index: 5;
        }

        .close-congrats:hover {
            color: #374151;
            background: rgba(255, 255, 255, 1);
            transform: rotate(90deg);
        }


        /* 账户管理样式 */
        .account-controls {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 9998;
            /* ★ Bug 4 修复：header 改回 overflow:hidden 后，给 account-controls 留底部空间
               替代原 overflow:visible 提供的溢出空间，防止按钮阴影/hover 效果被裁剪 */
            padding-bottom: 10px;
        }

        .account-selector {
            display: flex;
            gap: 8px;
            align-items: center;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 25px;
            padding: 8px 5px;
            min-width: auto; /* 移除最小宽度限制 */
        }

        .account-selector select {
            background: transparent;
            border: none;
            color: white;
            font-weight: 500;
            outline: none;
            cursor: pointer;
            min-width: 30px;
        }

        .account-selector button {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.3s;
        }

       .account-selector button:hover {
            background: rgba(255, 255, 255, 0.3);
        }





        @media print {
            .timer-controls, .print-btn, .task-actions, .add-task-main-btn,
            .category-actions, .add-category-btn, .stats-btn, .data-buttons {
                display: none;
            }

            body {
                padding: 10px;
                background: white;
            }

            .task-card {
                page-break-inside: avoid;
            }

            .chart-container {
                page-break-before: always;
            }
        }

        /* 统计页面提示信息样式 */
        .stats-message {
            text-align: center;
            padding: 50px;
            background: var(--card-bg);
            border-radius: 15px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            margin: 20px 0;
        }

        .stats-message i {
            font-size: 48px;
            color: var(--primary);
            margin-bottom: 20px;
            display: block;
        }

        .stats-message h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: var(--text);
        }

        .stats-message p {
            font-size: 1rem;
            color: var(--text-light);
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }
         /* 新增样式 */
.repeat-info {
    margin-left: 12px;
    font-size: 0.9rem;
    background: #e3f2fd;
    color: #1976d2;
    padding: 2px 8px;
    border-radius: 12px;
}

.focus-description-section {
    grid-column: span 2; /* 跨两列 */
    margin-top: 5px;
    padding: 15px;
    background: #f9fbfd;
    border-radius: 10px;
    border: 1px solid #edf2f7;
}

.focus-description-content {
    padding: 0;
    max-height: 150px;
    overflow-y: auto;
    line-height: 1.6;
}

/* ToDo列表样式 */
.todo-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.todo-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #edf2f7;
    transition: all 0.3s ease;
}

.todo-item:last-child {
    border-bottom: none;
}

.todo-checkbox {
    margin-right: 10px;
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.todo-text {
    flex: 1;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.todo-item.completed {
    background-color: #f9fafb;
    opacity: 0.8;
}

.todo-item.completed .todo-text {
    text-decoration: line-through;
    color: #9ca3af;
    font-style: italic;
}

.todo-item.completed .todo-checkbox {
    background-color: #4caf50;
}

.focus-action-buttons {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
}

.focus-action-btn {
    background: #f0f7ff;
    border: none;
    color: #4b6cb7;
    cursor: pointer;
    font-size: 1.1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.focus-action-btn:hover {
    background: #4b6cb7;
    color: white;
    transform: scale(1.1);
}

/* ===== 番茄钟状态区快捷设置按钮 ===== */
.pomodoro-inline-settings {
    background: transparent;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    padding: 2px 6px;
    cursor: pointer;
    color: #e74c3c;
    border-radius: 6px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pomodoro-inline-settings:hover {
    background: rgba(231,76,60,0.1);
    transform: scale(1.1);
}

/* ===== 临时计时器模态框 ===== */
#tempTimerModal .temp-timer-container {
    width: 100%; height: 100%; display: flex; flex-direction: column;
    padding: 20px; justify-content: center; align-items: center;
}

#tempTimerModal .temp-timer-modal-content {
    width: 90%;
    max-width: 520px;
    max-height: 640px;
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.06);
    padding: 0;
    overflow: hidden;
    position: relative;
}

/* 顶部导航栏 */
.temp-timer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
}

.temp-timer-back-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.temp-timer-back-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateX(-3px);
}

.temp-timer-title {
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.temp-timer-sound-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.temp-timer-sound-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.temp-timer-sound-btn.muted {
    opacity: 0.6;
}

/* 模式切换 */
.temp-timer-mode-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 16px 20px;
    background: #f1f5f9;
}

.temp-timer-mode-tab {
    flex: 1;
    padding: 10px 12px;
    border-radius: 12px;
    border: none;
    background: white;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.temp-timer-mode-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.temp-timer-mode-tab.active {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}

/* 计时器显示容器 */
.temp-timer-display-container {
    padding: 30px 35px 20px;
    display: flex;
    justify-content: center;
}

.temp-timer-boxes {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    font-family: 'SF Mono', 'Consolas', 'Courier New', monospace;
}

.temp-timer-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90px;
    padding: 28px 12px 24px;
    border-radius: 16px;
    position: relative;
    transition: all 0.3s ease;
}

.temp-timer-arrow {
    position: absolute;
    background: none;
    border: none;
    font-size: 0.8rem;
    cursor: pointer;
    color: inherit;
    opacity: 0;
    transition: all 0.2s ease;
    padding: 4px;
    z-index: 10;
}

.temp-timer-arrow.up {
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
}

.temp-timer-arrow.down {
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
}

.temp-timer-unit.editable .temp-timer-arrow {
    opacity: 1;
}

.temp-timer-arrow:hover {
    transform: translateX(-50%) scale(1.3);
}

.temp-timer-value {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin: 8px 0;
}

.temp-timer-label {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.7;
    margin-top: 2px;
}

.temp-timer-value-input {
    width: 100%;
    height: 100%;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    border: none;
    background: transparent;
    color: inherit;
    outline: none;
    font-family: 'SF Mono', 'Consolas', 'Courier New', monospace;
}

.temp-timer-unit.editable .temp-timer-value-input {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    padding: 4px 0;
}

.temp-timer-colon {
    font-size: 2rem;
    font-weight: 300;
    color: #94a3b8;
    padding-top: 24px;
}

/* 正计时模式颜色 */
.temp-timer-boxes.countup-mode .temp-timer-unit {
    background: rgba(99, 102, 241, 0.08);
    color: #6366f1;
}

.temp-timer-boxes.countup-mode .temp-timer-unit.minutes {
    background: rgba(139, 92, 246, 0.08);
    color: #8b5cf6;
}

.temp-timer-boxes.countup-mode .temp-timer-unit.seconds {
    background: rgba(168, 85, 247, 0.08);
    color: #a855f7;
}

/* 倒计时模式颜色 */
.temp-timer-boxes.countdown-mode .temp-timer-unit {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
}

.temp-timer-boxes.countdown-mode .temp-timer-unit.editable {
    cursor: pointer;
    border: 2px solid rgba(239, 68, 68, 0.3);
}

.temp-timer-boxes.countdown-mode .temp-timer-unit.editable:hover {
    background: rgba(239, 68, 68, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.15);
}

/* 番茄钟模式颜色 */
.temp-timer-boxes.pomodoro-mode .temp-timer-unit {
    background: rgba(99, 102, 241, 0.08);
    color: #6366f1;
}

/* 提示信息 */
.temp-timer-hint {
    text-align: center;
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0 20px 16px;
    padding: 10px 14px;
    background: #f1f5f9;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* 番茄钟状态面板 */
.temp-pomodoro-status {
    margin: 0 20px 16px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
    border-radius: 16px;
    border: 1px solid rgba(99, 102, 241, 0.1);
}

.temp-pomodoro-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.temp-pomodoro-phase-badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.temp-pomodoro-phase-badge.work {
    background: rgba(99, 102, 241, 0.15);
    color: #6366f1;
}

.temp-pomodoro-phase-badge.break {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.temp-pomodoro-count {
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
}

.temp-pomodoro-settings-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    color: #64748b;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.temp-pomodoro-settings-btn:hover {
    background: rgba(99, 102, 241, 0.15);
    color: #6366f1;
}

.temp-pomodoro-progress {
    margin-bottom: 8px;
}

.temp-pomodoro-progress-track {
    height: 8px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    overflow: hidden;
}

.temp-pomodoro-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.temp-pomodoro-hint {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0;
    text-align: center;
}

/* 控制按钮 */
.temp-timer-controls {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 20px;
    background: #f8fafc;
}

.temp-timer-btn {
    flex: 1;
    max-width: 140px;
    padding: 14px 20px;
    border-radius: 14px;
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.temp-timer-btn.start {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
}

.temp-timer-btn.start:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.3);
}

.temp-timer-btn.pause {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.temp-timer-btn.pause:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
}

.temp-timer-btn.resume {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
}

.temp-timer-btn.resume:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

.temp-timer-btn.stop {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.temp-timer-btn.stop:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
}

/* 移动端响应式 */
@media (max-width: 480px) {
    #tempTimerModal .temp-timer-modal-content {
        width: 100%;
        max-width: none;
        border-radius: 0;
        margin: 0;
    }

    .temp-timer-display-container {
        padding: 25px 20px 15px;
    }

    .temp-timer-unit {
        width: 75px;
        padding: 24px 8px 20px;
    }

    .temp-timer-value {
        font-size: 2rem;
        margin: 6px 0;
    }

    .temp-timer-arrow {
        font-size: 0.7rem;
    }

    .temp-timer-arrow.up {
        top: 2px;
        left: 50%;
        transform: translateX(-50%);
    }

    .temp-timer-arrow.down {
        bottom: 2px;
        left: 50%;
        transform: translateX(-50%);
    }

    .temp-timer-arrow:hover {
        transform: translateX(-50%) scale(1.3);
    }

    .temp-timer-colon {
        font-size: 1.5rem;
        padding-top: 20px;
    }

    .temp-timer-boxes {
        gap: 4px;
    }

    .temp-timer-controls {
        gap: 10px;
        padding: 16px 12px;
    }

    .temp-timer-btn {
        max-width: none;
        padding: 12px 16px;
        font-size: 0.85rem;
    }

    .temp-timer-mode-tab {
        font-size: 0.78rem;
        padding: 8px 8px;
    }
}

/* ===== 临时计时器结果弹窗 ===== */
.temp-timer-result-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.temp-timer-result-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.temp-timer-result-content {
    position: relative;
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 24px;
    padding: 40px 36px;
    max-width: 340px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.08);
    animation: modalPop 0.3s ease;
}

@keyframes modalPop {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.temp-timer-result-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.8rem;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
}

.temp-timer-result-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 12px;
}

.temp-timer-result-time {
    font-size: 2.8rem;
    font-weight: 700;
    color: #6366f1;
    margin: 0 0 8px;
    font-family: 'SF Mono', 'Consolas', 'Courier New', monospace;
    letter-spacing: 2px;
}

.temp-timer-result-label {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0 0 28px;
}

.temp-timer-result-btn {
    width: 100%;
    padding: 14px 24px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.temp-timer-result-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

/* 番茄钟设置模态框层级高于其他模态框 */
#pomodoroSettingsModal { z-index: 9999; }

/* ===== 番茄钟快捷设置模态框 ===== */
#pomodoroSettingsModal .pomodoro-settings-content {
    background: #fff; border-radius: 16px; padding: 0; max-width: 360px; width: 90%;
    box-shadow: 0 10px 30px rgba(0,0,0,.15); animation: modalPop .25s ease;
}
#pomodoroSettingsModal .pomodoro-settings-content .pomodoro-settings-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 20px 12px; border-bottom: 1px solid #f0f2f5;
}
#pomodoroSettingsModal .pomodoro-settings-content .pomodoro-settings-header h3 { margin: 0; font-size: 1.05rem; color: #1e293b; }
#pomodoroSettingsModal .pomodoro-settings-content .pomodoro-settings-close {
    background: none; border: none; font-size: 1.5rem; color: #94a3b8; cursor: pointer; line-height: 1;
}
#pomodoroSettingsModal .pomodoro-settings-content .pomodoro-settings-body { padding: 16px 20px; }
#pomodoroSettingsModal .pomodoro-settings-content .pomodoro-settings-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-bottom: 1px solid #f8fafc;
}
#pomodoroSettingsModal .pomodoro-settings-content .pomodoro-settings-row:last-child { border-bottom: none; }
#pomodoroSettingsModal .pomodoro-settings-content .pomodoro-settings-row label { font-size: .88rem; color: #334155; font-weight: 500; }
#pomodoroSettingsModal .pomodoro-settings-content .pomodoro-settings-row input {
    width: 80px; padding: 6px 10px; border: 1.5px solid #e1e8ed; border-radius: 8px;
    font-size: .9rem; text-align: center; color: #1e293b; outline: none;
}
#pomodoroSettingsModal .pomodoro-settings-content .pomodoro-settings-row input:focus { border-color: #e74c3c; }
#pomodoroSettingsModal .pomodoro-settings-content .pomodoro-settings-actions {
    display: flex; gap: 10px; padding: 12px 20px 18px; border-top: 1px solid #f0f2f5;
}
#pomodoroSettingsModal .pomodoro-settings-content .pomodoro-settings-btn {
    flex: 1; padding: 10px; border: none; border-radius: 10px; font-size: .9rem; font-weight: 600; cursor: pointer;
}
#pomodoroSettingsModal .pomodoro-settings-content .pomodoro-settings-btn.save { background: #e74c3c; color: #fff; }
#pomodoroSettingsModal .pomodoro-settings-content .pomodoro-settings-btn.cancel { background: #f0f2f5; color: #64748b; }

/* ========== 移动端一次性修复 ========== */

/* ========== 卡片内部内容横向 100% 修复 ========== */



/* ===== 手机端统计图表不溢出 ===== */


/* 手机端专用样式 */


/* ========== 导入选项样式 ========== */
.import-options {
    margin: 20px 0;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 10px;
    border-left: 4px solid #4b6cb7;
}

.import-option {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.import-option:last-child {
    margin-bottom: 0;
}

.import-option input {
    margin-right: 10px;
}

.import-option label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.import-option i {
    margin-right: 8px;
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

.option-description {
    margin-left: 30px;
    font-size: 0.9rem;
    color: #6c757d;
}
/* 自定义下拉框样式 */
.custom-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 0 0 8px 8px;
}

.dropdown-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    -webkit-user-select: none;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background-color: #f0f7ff;
}

.dropdown-item .category-icon {
    margin-right: 8px;
    width: 16px;
    text-align: center;
}

.dropdown-item .task-name {
    flex: 1;
}

.dropdown-item .category-name {
    color: #999;
    font-size: 0.8rem;
    margin-left: 10px;
}
/* 拖动排序样式 */
.task-card.dragging {
    opacity: 0.8;
    transform: scale(0.7); /* 缩小30% */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    z-index: 1100; /* ★ 2026-08-18 1000→1100：拖拽为操作行为，需高于 header(1050) 避免被顶栏盖住 */
    cursor: grabbing;
}

.task-card.drag-over {
    border: 3px dashed #4b6cb7;
    background-color: #e3f0ff;
    margin: 8px 0;
    box-shadow: 0 4px 12px rgba(75, 108, 183, 0.3);
}
/* 新增：拖动时的插入位置指示线 */
.task-card.drag-insert-above {
    border-top: 4px solid #4b6cb7 !important;
}

.task-card.drag-insert-below {
    border-bottom: 4px solid #4b6cb7 !important;
}

/* 新增：拖动光标样式 */
.task-card {
    cursor: grab;
}

.task-card:active {
    cursor: grabbing;
}
.task-list-main {
    min-height: 500px;
}
/* 放在所有样式之后，确保最终生效 */




/* 勋章墙样式 */
/* ===== 勋章卡片（圆角卡 + 强化色） ===== */
.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 24px;
    margin-top: 24px;
    padding: 4px;
}

.badge-item {
    background: transparent;
    border-radius: 0;
    padding: 0;
    text-align: center;
    box-shadow: none;
    position: relative;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: auto;
    max-height: none;
    overflow: visible;
    display: block;
    cursor: pointer;
    border: none;
}
.badge-item::before { display: none; }

/* 卡片内部容器 */
.bdg-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 24px 16px 20px;
    position: relative;
    overflow: hidden;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.35s ease;
    border: 1px solid rgba(0,0,0,0.06);
}

/* ===== 已解锁 ==== */
.bdg-unlocked .bdg-card {
    background: linear-gradient(160deg, #ffffff 0%, #f8f2ff 35%, #eee2ff 100%);
    border-color: rgba(139, 92, 246, 0.22);
    box-shadow:
        0 6px 24px rgba(139, 92, 246, 0.12),
        0 2px 8px rgba(0,0,0,0.06);
}

/* ---- 等级颜色（加深版）---- */
.bdg-tier-silver.bdg-unlocked .bdg-card {
    background: linear-gradient(160deg, #fafafe 0%, #f4edff 35%, #e8dffc 100%);
    border-color: rgba(167, 139, 250, 0.28);
    box-shadow:
        0 6px 24px rgba(167, 139, 250, 0.16),
        0 0 36px rgba(180, 155, 255, 0.12);
}
.bdg-tier-gold.bdg-unlocked .bdg-card {
    background: linear-gradient(160deg, #fffef5 0%, #fff6e0 35%, #ffedc0 100%);
    border-color: rgba(245, 158, 11, 0.3);
    box-shadow:
        0 6px 28px rgba(245, 158, 11, 0.22),
        0 0 48px rgba(255, 187, 30, 0.16);
}
.bdg-tier-diamond.bdg-unlocked .bdg-card {
    background: linear-gradient(160deg, #f2f8ff 0%, #e4f0ff 35%, #d0e8ff 100%);
    border-color: rgba(59, 130, 246, 0.28);
    box-shadow:
        0 6px 28px rgba(59, 130, 246, 0.22),
        0 0 52px rgba(96, 165, 250, 0.18);
}

/* ===== 未解锁 ===== */
.bdg-locked .bdg-card {
    background: linear-gradient(180deg, #e8ebf0 0%, #dde1e8 100%);
    border: 1.5px solid rgba(0,0,0,0.1);
    box-shadow: 0 2px 14px rgba(0,0,0,0.08);
    opacity: 0.92;
}

/* ---- 光泽动画条 ---- */
.bdg-shine {
    position: absolute;
    top: -40%;
    left: -60%;
    width: 40%;
    height: 180%;
    background: linear-gradient(105deg,
        transparent 40%,
        rgba(255,255,255,0.4) 45%,
        rgba(255,255,255,0.85) 50%,
        rgba(255,255,255,0.4) 55%,
        transparent 60%
    );
    transform: rotate(25deg);
    pointer-events: none;
    z-index: 1;
}
.bdg-unlocked .bdg-card:hover .bdg-shine {
    animation: bdgShine 0.8s forwards;
}
@keyframes bdgShine { from { left: -60%; } to { left: 120%; } }

/* ---- 计数徽章 ---- */
.bdg-count {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #f97316, #ef4444);
    color: #fff;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    box-shadow: 0 2px 8px rgba(249,115,22,0.35);
    border: 2px solid rgba(255,255,255,0.6);
}

/* ---- 图标区域 ---- */
.bdg-icon-wrap {
    position: relative;
    z-index: 2;
    margin-bottom: 14px;
}
.bdg-icon-ring {
    width: 72px; height: 72px;
    border-radius: 50%;
    border: 2.5px solid rgba(139, 92, 246, 0.15);
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 3;
    background: rgba(255,255,255,0.6);
    transition: all 0.35s ease;
}
.bdg-unlocked .bdg-icon-ring {
    background: rgba(255,255,255,0.85);
}
.bdg-unlocked .bdg-icon-ring i {
    font-size: 34px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
}
.bdg-locked .bdg-icon-ring i {
    font-size: 34px;
    opacity: 0.3;
    filter: grayscale(0.85);
}

/* 图标光晕 */
.bdg-icon-glow {
    position: absolute;
    width: 60px; height: 60px;
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(24px);
    opacity: 0.35;
    z-index: 0;
    pointer-events: none;
}

/* 钻石等级加光点 */
.bdg-tier-diamond .bdg-icon-ring::after {
    content: '';
    position: absolute;
    top: -3px; left: 50%;
    transform: translateX(-50%);
    width: 8px; height: 8px;
    background: #2563eb;
    border-radius: 50%;
    box-shadow: 0 0 14px rgba(37,99,235,0.7), 0 0 24px rgba(37,99,235,0.35);
    z-index: 5;
}

/* ---- 信息区 ---- */
.bdg-info { position: relative; z-index: 2; width: 100%; padding: 0 4px; }
.bdg-name {
    color: #1e293b;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: 0.2px;
    line-height: 1.3;
}
.bdg-locked .bdg-name { color: #64748b; }
.bdg-desc {
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.45;
}
.bdg-locked .bdg-desc { color: #94a3b8; }

/* ---- 锁 ---- */
.bdg-lock {
    position: absolute;
    top: 12px; right: 14px;
    z-index: 3;
    color: #94a3b8;
    font-size: 1rem;
}

/* ---- 悬停效果 ---- */
.badge-item:hover { transform: translateY(-6px); }
.bdg-unlocked:hover .bdg-card {
    box-shadow:
        0 12px 36px rgba(139, 92, 246, 0.16),
        0 4px 12px rgba(0,0,0,0.1);
}
.bdg-tier-gold:hover .bdg-card {
    box-shadow:
        0 12px 40px rgba(245, 158, 11, 0.26),
        0 4px 14px rgba(0,0,0,0.12);
}
.bdg-tier-diamond:hover .bdg-card {
    box-shadow:
        0 12px 40px rgba(59, 130, 246, 0.26),
        0 4px 14px rgba(0,0,0,0.12);
}

/* ---- 清除六边形旧 CSS ---- */
.bdg-hex-wrap, .bdg-hex-frame, .bdg-hex-inner,
.bdg-icon-area, .bdg-ribbon, .bdg-locked-mask,
.bdg-unlocked[data-theme] .bdg-hex-frame { display: none; }
.badge-recurring-count { display: none; }
.badge-item.badge-unlocked { border: none; background: none; }
.badge-item.badge-locked { border: none; background: none; opacity: 1; }
.badge-icon { display: none; }
.badge-info h4, .badge-info p { display: none; }
.badge-unlocked, .badge-locked { border: none; background: none; }
.badge-lock-icon { display: none; }


.badge-controls,
.score-controls {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;
    width: 100%;
    overflow-x: hidden;
    padding: 0 5px;
}
/* 解锁勋章弹窗内容重置 - 移除旧样式 */
#unlockedBadgeModal .congrats-badge-content {
    position: relative;
    background: transparent;
    border-radius: 0;
    padding: 0;
    text-align: center;
    max-width: none;
    width: auto;
    box-shadow: none;
    border: none;
    animation: none;
    background-image: none;
}

.badge-ribbon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 24px;
    background: linear-gradient(135deg, #ff8a65 0%, #ff5252 100%);
    color: white;
    font-weight: 600;
    font-size: .8rem;
    border-radius: 0 0 18px 18px;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(255, 82, 82, 0.35);
    z-index: 10;
    white-space: nowrap; /* 强制单行不换行 */
}

.badge-title {
    font-size: 1.9rem;
    font-weight: 800;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 60%, #b45309 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 12px;
    line-height: 1.3;
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
}/* 装饰性虚线分隔 + 菱形 */
.badge-title::after {
    content: "";
    display: block;
    width: 60%;
    height: 1px;
    background: repeating-linear-gradient(to right, #d4a017 0 6px, transparent 6px 12px);
    margin: 14px auto 0;
    position: relative;
}

.badge-icon-container {
    position: relative;
    margin: 28px 0 18px;
    text-align: center;
    display: flex;
    justify-content: center;
}

.badge-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    flex-shrink: 0;
}

.badge-icon {
    display: none; /* 默认隐藏，#unlockedBadgeIcon 单独控制实际图标 */
}

#unlockedBadgeIcon {
    font-size: 80px !important; /* 覆盖 fontawesome 默认的 1em */
    text-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 2;
    line-height: 1;
    display: block;
}

.badge-icon-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(252, 211, 77, 0.55) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 1;
    animation: badgePulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes badgePulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

.badge-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 6px 0 4px;
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
}

.badge-description {
    font-size: .95rem;
    color: #6b7280;
    margin-bottom: 18px;
    line-height: 1.5;
    font-style: normal;
}

/* 底部虚线分隔 + 鼓励语 */
.badge-footer {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px dashed #d4a017;
    color: #6b7280;
    font-size: .85rem;
    line-height: 1.5;
}

#unlockedBadgeModal .confirmation-actions {
    padding: 2px 28px 14px;
    background: transparent;
    text-align: center;
}

/* 解锁勋章提示模态框整体重设计 */
#unlockedBadgeModal {
    background: rgba(0, 0, 0, 0.35); /* 更柔和的遮罩 */
}

#unlockedBadgeModal .confirmation-content {
    background: linear-gradient(160deg, #fffbeb 0%, #fef3c7 50%, #fde68a 100%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 4px #fbbf24 inset;
    max-width: 440px;
    border-radius: 24px;
    padding: 0;
    overflow: visible;
    position: relative;
}

#unlockedBadgeModal .confirmation-body {
    padding: 40px 28px 16px;
    background: transparent;
    text-align: center;
    position: relative;
}

/* 顶部装饰：圆点 + 菱形 */
#unlockedBadgeModal .confirmation-body::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 20px;
    background-image:
        radial-gradient(circle, #fbbf24 2px, transparent 2.5px),
        radial-gradient(circle, #fbbf24 2px, transparent 2.5px),
        radial-gradient(circle, #fbbf24 2px, transparent 2.5px),
        radial-gradient(circle, #fbbf24 2px, transparent 2.5px),
        radial-gradient(circle, #fbbf24 2px, transparent 2.5px);
    background-size: 25% 100%;
    background-position: 0% 50%, 25% 50%, 50% 50%, 75% 50%, 100% 50%;
    background-repeat: no-repeat;
    opacity: 0.4;
    pointer-events: none;
}

#unlockedBadgeModal .confirmation-actions .btn-primary {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: none;
    border-radius: 24px;
    padding: 10px 32px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
    color: white;
}

#unlockedBadgeModal .confirmation-actions .btn-primary:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.5);
}
/* 批量添加勋章表格样式 - 改进版 */
#batchBadgeModal table {
    table-layout: fixed;
}

#batchBadgeModal th:nth-child(1) { width: 15%; }
#batchBadgeModal th:nth-child(2) { width: 15%; }
#batchBadgeModal th:nth-child(3) { width: 12%; }
#batchBadgeModal th:nth-child(4) { width: 12%; }
#batchBadgeModal th:nth-child(5) { width: 20%; }
#batchBadgeModal th:nth-child(6) { width: 10%; }
#batchBadgeModal th:nth-child(7) { width: 14%; }
#batchBadgeModal th:nth-child(8) { width: 2%; }

#batchBadgeTableBody tr:hover {
    background-color: #f8f9fa;
}

#batchBadgeTableBody input,
#batchBadgeTableBody select,
#batchBadgeTableBody textarea {
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
    color: #495057;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    box-sizing: border-box;
    vertical-align: middle;
}

#batchBadgeTableBody input:focus,
#batchBadgeTableBody select:focus,
#batchBadgeTableBody textarea:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

#batchBadgeTableBody .btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    width: 100%;
}

#batchBadgeTableBody .btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

/* 确保所有表单元素对齐 */
#batchBadgeTableBody td {
    vertical-align: middle !important;
}

#batchBadgeTableBody textarea {
    min-height: 36px;
    resize: vertical;
    font-family: inherit;
}
/* ===== 账户下拉 ===== */
.account-controls{position:absolute;top:20px;right:10px;z-index:9998;}
.account-dropdown{position:relative;display:inline-block;}
.account-trigger{background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.25);border-radius:14px;
  color:#fff;padding:3px 6px;cursor:pointer;font-size:.75rem;display:flex;align-items:center;gap:0;min-height:auto;}
.account-trigger:hover{background:rgba(255,255,255,.3);}
#currentAccountName { display: flex; flex-direction: column; align-items: center; line-height: 1; gap: 2px; }
#currentAccountName .account-trigger-avatar { font-size: 40px; line-height: 1; }
#currentAccountName img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
#currentAccountName .account-trigger-label { font-size: .65rem; font-weight: 600; max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-menu{
  position: absolute;
  top: 70px;          /* header 实测高度，自己调 */
  right: 20px;        /* 与 header 右对齐 */
  background: #fff;
  color: #333;
  list-style: none;
  padding: 4px 0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  min-width: 140px;
  z-index: 9999;       /* 保证在最上层，覆盖所有页面 */
  display: none;
}
.account-menu li{padding:8px 12px;cursor:pointer;font-size:.9rem;display:flex;align-items:center;gap:8px;}
.account-menu li:hover{background:#f5f7fa;}
.account-menu li.danger{color:#e74c3c;}
.account-menu hr{margin:4px 0;border:none;border-top:1px solid #e1e8ed;}

/* ===== 账户下拉菜单强化版 ===== */
.acct-menu-section-title {
    padding: 6px 14px 4px;
    font-size: .65rem;
    color: #94a3b8;
    font-weight: 600;
    letter-spacing: .5px;
    pointer-events: none;
}
#accountMenu li.current {
    background: #f0f5ff;
    color: #4B6CB7;
    font-weight: 600;
}
.acct-menu-avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
}
.acct-menu-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.acct-menu-icon {
    width: 18px;
    text-align: center;
}
.accent-add { color: #4B6CB7; font-weight: 600; }
.accent-manage { color: #333; }

/* ===== 账户管理页面 ===== */
#accountManagementPage {
    background: linear-gradient(135deg, #f0f2f5 0%, #e4edf5 100%);
    min-height: 100vh;
}
.acct-mgmt-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 600px;
    margin: 0 auto;
}
.acct-mgmt-card {
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    border: 1px solid #e1e8ed;
    position: relative;
}
.acct-mgmt-card.current {
    border-color: #4B6CB7;
    box-shadow: 0 0 0 1.5px rgba(75,108,183,.1), 0 4px 14px rgba(75,108,183,.08);
}
.acct-mgmt-card.current::after {
    content: "当前";
    position: absolute;
    top: 12px; right: 12px;
    background: #4B6CB7;
    color: #fff;
    font-size: .65rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}
.acct-mgmt-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}
.acct-mgmt-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8f0fe, #d4e4fc);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
    overflow: hidden;
}
.acct-mgmt-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.acct-mgmt-info { flex: 1; min-width: 0; }
.acct-mgmt-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.acct-mgmt-name-text {
    line-height: 1.2;
}
.acct-mgmt-realname {
    font-weight: 400;
    font-size: .72rem;
    color: #94a3b8;
}
.acct-mgmt-default-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #4B6CB7, #6b8fd4);
    color: #fff;
    font-size: .62rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 8px;
    line-height: 1.4;
    letter-spacing: .5px;
}
.acct-mgmt-created {
    margin-left: auto;
    font-size: .68rem;
    font-weight: 400;
    color: #b0b8c4;
    white-space: nowrap;
}
.acct-mgmt-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0 14px;
    margin-left: 64px; /* 对齐头像右侧 */
    font-size: .75rem;
    color: #64748b;
}
.acct-mgmt-tag {
    background: #f1f5f9;
    color: #475569;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 500;
}
.acct-mgmt-info-item {
    color: #64748b;
}
.acct-mgmt-info-item.muted {
    color: #b0b8c4;
}
.acct-mgmt-dot {
    color: #cbd5e1;
    margin: 0 2px;
}
.acct-mgmt-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.acct-mgmt-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid #e1e8ed;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}
.acct-mgmt-btn:hover {
    background: #f5f7fa;
    color: #4B6CB7;
}
.acct-mgmt-btn.danger:hover {
    color: #e74c3c;
    background: rgba(231,76,60,.06);
}
.acct-mgmt-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.acct-mgmt-stat {
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 6px;
    text-align: center;
}
.acct-mgmt-stat-val {
    font-size: 1.1rem;
    font-weight: 700;
    color: #4B6CB7;
}
.acct-mgmt-stat-lbl {
    font-size: .65rem;
    color: #94a3b8;
    margin-top: 2px;
}

/* 添加账户入口按钮 */
.acct-mgmt-add-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px;
    border: 2px dashed #e1e8ed;
    border-radius: 10px;
    background: #fff;
    color: #4B6CB7;
    cursor: pointer;
    font-size: .95rem;
    font-weight: 600;
    transition: all .2s;
    margin-bottom: 20px;
}
.acct-mgmt-add-tile:hover {
    border-color: #4B6CB7;
    background: rgba(75,108,183,.03);
    transform: translateY(-2px);
}
.acct-mgmt-add-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(75,108,183,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.acct-mgmt-add-text { font-size: .95rem; }

/* 账户管理页面头部操作区 */
.acct-mgmt-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.acct-mgmt-header-actions .add-task-main-btn {
    padding: 8px 16px;
    font-size: .85rem;
    border-radius: 20px;
}

/* ===== 账户管理页面：A/B 分区 ===== */
.acct-mgmt-body {
    max-width: 720px;
    gap: 18px;
}
.acct-mgmt-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.acct-mgmt-section-a {
    background: linear-gradient(135deg, #eef4ff 0%, #e4edf8 100%);
    border: 1px solid #d6e2f5;
    border-radius: 14px;
    padding: 14px;
}
.acct-mgmt-section-b {
    background: #fff;
    border: 1px solid #e9eef5;
    border-radius: 14px;
    padding: 14px;
}
.acct-mgmt-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.acct-mgmt-section-title i { color: #4B6CB7; }
.acct-mgmt-section-sub {
    font-size: .72rem;
    font-weight: 400;
    color: #94a3b8;
    margin-left: 4px;
}
.acct-mgmt-tip {
    font-size: .75rem;
    color: #6b7a90;
    line-height: 1.55;
    background: rgba(75,108,183,.05);
    border-left: 3px solid #4B6CB7;
    padding: 8px 10px;
    border-radius: 6px;
}

/* A 区：登录账号卡 */
.acct-mgmt-login-card {
    background: #fff;
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    border: 1px solid #e1e8ed;
}
.acct-login-top {
    display: flex;
    align-items: center;
    gap: 12px;
}
.acct-login-main { flex: 1; min-width: 0; }
.acct-login-username {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.acct-login-id {
    font-size: .68rem;
    font-weight: 400;
    color: #b0b8c4;
}
.acct-login-meta {
    font-size: .72rem;
    color: #94a3b8;
    margin-top: 3px;
}
/* 会员权益行：VIP 徽章 + 到期时间（合并展示） */
.acct-vip-row-val {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.acct-vip-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .76rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f7d774, #e0b030);
    color: #3a2a00;
    box-shadow: 0 2px 6px rgba(224,176,48,.3);
}
.acct-vip-pill.dim {
    background: #eef0f3;
    color: #64748b;
    box-shadow: none;
    font-weight: 600;
}
.acct-vip-pill-icon { font-size: .85rem; line-height: 1; }
.acct-vip-pill-exp { font-size: .72rem; color: #b8860b; }

/* 安全设置行 */
.acct-login-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px dashed #eef2f7;
    font-size: .82rem;
}
.acct-login-row-label {
    color: #475569;
    font-weight: 600;
    min-width: 90px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.acct-login-row-label i { color: #94a3b8; }
.acct-login-row-val {
    flex: 1;
    color: #64748b;
    min-width: 0;
}
.acct-login-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eef2f7;
    display: flex;
    justify-content: flex-end;
}

/* 文本按钮（行内操作） */
.acct-mgmt-btn-text {
    border: none;
    background: transparent;
    color: #4B6CB7;
    cursor: pointer;
    font-size: .78rem;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background .15s;
}
.acct-mgmt-btn-text:hover { background: rgba(75,108,183,.08); }
.acct-mgmt-btn-text.gold { color: #b8860b; }
.acct-mgmt-btn-text.gold:hover { background: rgba(184,134,11,.08); }
.acct-mgmt-btn-text.primary { color: #2e7d32; }
.acct-mgmt-btn-text.primary:hover { background: rgba(46,125,50,.08); }
.acct-mgmt-btn-danger-line {
    border: 1px solid #f3c2c0;
    background: #fff;
    color: #dc3545;
    cursor: pointer;
    font-size: .8rem;
    padding: 6px 14px;
    border-radius: 8px;
    transition: all .15s;
}
.acct-mgmt-btn-danger-line:hover { background: rgba(220,53,69,.06); border-color: #dc3545; }

/* B 区：工具栏 + 档案网格 */
.acct-mgmt-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.acct-mgmt-search {
    position: relative;
    flex: 1;
    min-width: 160px;
}
.acct-mgmt-search i {
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    color: #b0b8c4;
    font-size: .8rem;
    pointer-events: none;
}
.acct-mgmt-search input {
    width: 100%;
    padding: 7px 10px 7px 30px;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    font-size: .82rem;
    background: #fff;
    box-sizing: border-box;
}
.acct-mgmt-search input:focus {
    outline: none;
    border-color: #4B6CB7;
    box-shadow: 0 0 0 2px rgba(75,108,183,.1);
}
.acct-mgmt-sort select {
    padding: 7px 10px;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    font-size: .82rem;
    background: #fff;
    color: #475569;
    cursor: pointer;
}
.acct-mgmt-add-btn {
    padding: 7px 14px !important;
    font-size: .82rem !important;
    border-radius: 8px !important;
    white-space: nowrap;
}
.acct-mgmt-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (max-width: 600px) {
    .acct-mgmt-grid { grid-template-columns: 1fr; }
    .acct-mgmt-body { max-width: 100%; }
}
.acct-mgmt-empty {
    text-align: center;
    color: #b0b8c4;
    font-size: .85rem;
    padding: 28px 10px;
}
.acct-mgmt-current-badge {
    display: inline-flex;
    align-items: center;
    background: #4B6CB7;
    color: #fff;
    font-size: .62rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 8px;
    line-height: 1.4;
}
.acct-mgmt-lastactive {
    font-size: .68rem;
    color: #b0b8c4;
    margin-top: 2px;
}
.acct-mgmt-card-footer {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #eef2f7;
    text-align: center;
}
/* 关闭旧版"当前"角标（与卡内 inline 徽章重复） */
.acct-mgmt-card.current::after { display: none; }

/* ===== 修改昵称/密码 小弹窗 ===== */
.acct-small-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0,0,0,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.acct-small-modal {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 12px 40px rgba(0,0,0,.2);
    overflow: hidden;
}
.acct-small-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #eef2f7;
}
.acct-small-modal-header h3 {
    margin: 0;
    font-size: 1rem;
    color: #1e293b;
}
.acct-small-modal-close {
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 1rem;
    cursor: pointer;
    width: 28px; height: 28px;
    border-radius: 50%;
    transition: background .15s;
}
.acct-small-modal-close:hover { background: #f1f5f9; color: #475569; }
.acct-small-modal-body { padding: 16px 18px; }
.acct-small-form .form-label {
    display: block;
    font-size: .8rem;
    color: #475569;
    margin-bottom: 6px;
    font-weight: 600;
}
.acct-small-form .form-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    font-size: .88rem;
    box-sizing: border-box;
}
.acct-small-form .form-input:focus {
    outline: none;
    border-color: #4B6CB7;
    box-shadow: 0 0 0 2px rgba(75,108,183,.1);
}
.acct-small-hint {
    font-size: .72rem;
    color: #94a3b8;
    margin-top: 8px;
    line-height: 1.5;
}
.acct-small-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid #eef2f7;
}
.acct-small-modal-actions .btn {
    padding: 7px 18px;
    border-radius: 8px;
    font-size: .85rem;
    cursor: pointer;
}

/* ===== 账户编辑模态框 ===== */
.acct-edit-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0,0,0,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.acct-edit-modal-overlay.hidden { display: none; }
.acct-edit-modal-overlay.show { display: flex; }

.acct-edit-modal {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalPop .25s ease;
}
@keyframes modalPop {
    from { opacity: 0; transform: translateY(-10px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.acct-edit-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #e1e8ed;
    flex-shrink: 0;
}
.acct-edit-modal-header h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}
.acct-edit-modal-close {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: none;
    background: #f0f2f5;
    color: #64748b;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}
.acct-edit-modal-close:hover {
    background: #e1e8ed;
    color: #1e293b;
}

.acct-edit-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}
.acct-form-card {
    background: #fff;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    border: none;
    max-width: none;
    margin: 0;
}

/* 表单通用样式 */
.form-group { margin-bottom: 18px; }
.form-group:last-child { margin-bottom: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row .form-group { margin-bottom: 0; }
.form-label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 7px;
}
.form-required { color: #e74c3c; margin-left: 2px; }
.form-optional { color: #94a3b8; font-weight: 400; }
.form-input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e1e8ed;
    border-radius: 10px;
    font-size: .92rem;
    color: #1e293b;
    background: #fff;
    outline: none;
    transition: all .2s;
    font-family: inherit;
}
.form-input:hover {
    border-color: #c8d2dc;
}
.form-input:focus {
    border-color: #4B6CB7;
    box-shadow: 0 0 0 4px rgba(75,108,183,.1);
}
.form-input::placeholder { color: #94a3b8; }
select.form-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}
input[type="date"].form-input {
    padding-right: 10px;
}

.acct-edit-modal-actions {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    background: #fafbfc;
    border-top: 1px solid #e1e8ed;
    flex-shrink: 0;
}
.acct-edit-modal-actions .btn {
    padding: 12px 22px;
    border-radius: 10px;
    border: none;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.acct-edit-modal-actions .btn-primary {
    background: #4B6CB7;
    color: #fff;
}
.acct-edit-modal-actions .btn-primary:hover { background: #3d5a9e; }
.acct-edit-modal-actions .btn-outline {
    background: #fff;
    color: #1e293b;
    border: 1.5px solid #e1e8ed;
}
.acct-edit-modal-actions .btn-outline:hover { background: #f0f2f5; }
.acct-edit-modal-actions .btn-danger {
    background: #e74c3c;
    color: #fff;
}
.acct-edit-modal-actions .btn-danger:hover { background: #c0392b; }

/* 头像选择器 */
.acct-avatar-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.acct-avatar-opt {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: #f0f3f7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    transition: all .15s;
    overflow: hidden;
    position: relative;
}
.acct-avatar-opt img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.acct-avatar-opt:hover { background: #e0e7f3; transform: scale(1.08); }
.acct-avatar-opt.selected {
    border-color: #4B6CB7;
    background: #e8f0ff;
    box-shadow: 0 0 0 3px rgba(75,108,183,.12);
}
.acct-avatar-opt.upload-opt {
    background: #fff;
    border: 2px dashed #e1e8ed;
    color: #94a3b8;
    font-size: 18px;
}
.acct-avatar-opt.upload-opt:hover {
    border-color: #4B6CB7;
    color: #4B6CB7;
    background: rgba(75,108,183,.05);
}
.acct-avatar-opt.has-image {
    border-color: #27ae60;
}
.acct-avatar-remove {
    position: absolute;
    top: -4px; right: -4px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    line-height: 1;
}

/* 主题色选择器 */
.acct-theme-picker {
    display: flex;
    gap: 10px;
}
.acct-theme-dot {
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 2.5px solid transparent;
    transition: all .15s;
}
.acct-theme-dot:hover { transform: scale(1.15); }
.acct-theme-dot.selected {
    border-color: #1e293b;
    box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}

/* ========== 健康管理 ========== */
.hl-body { padding: 14px; }
.hl-overview { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 14px; }
.hl-overview-card { background:#fff; border-radius:10px; padding:10px 4px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.04); border:1px solid #e1e8ed; }
.hl-ov-val { display:block; font-size:1.1rem; font-weight:700; color:#4B6CB7; }
.hl-ov-lbl { display:block; font-size:.6rem; color:#94a3b8; margin-top:2px; }
.hl-tabs { display:flex; gap:4px; overflow-x:auto; margin-bottom:14px; background:#fff; border-radius:10px; padding:4px; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.hl-tab { flex:1; background:transparent; border:none; padding:8px 6px; border-radius:8px; font-size:.75rem; color:#64748b; cursor:pointer; white-space:nowrap; transition:all .15s; }
.hl-tab.active { background:#4B6CB7; color:#fff; font-weight:600; }
.hl-content { flex:1; }
.hl-chart-wrap { background:#fff; border-radius:10px; padding:10px; margin-bottom:14px; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.hl-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hl-stats-grid .hl-chart-wrap { margin-bottom:0; }
.hl-chart-title { margin:0 0 8px; font-size:.8rem; font-weight:700; color:#334155; }

/* 健康管理顶层Tab覆盖 */
#healthPage .hl-body > .tm-type-tabs-bar { margin: 0 0 14px; }
#healthPage .hl-body > .tm-type-tabs-bar .tm-type-tab.active { color: #4B6CB7; }

.hl-form-row { display:flex; gap:10px; margin-bottom:14px; }
.hl-list { display:flex; flex-direction:column; gap:8px; }
.hl-empty { text-align:center; color:#94a3b8; padding:30px 0; font-size:.85rem; }
.hl-record-item { background:#fff; border-radius:10px; padding:12px; box-shadow:0 1px 4px rgba(0,0,0,.04); border:1px solid #e1e8ed; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hl-rec-date { font-size:.75rem; font-weight:700; color:#4B6CB7; min-width:80px; }
.hl-rec-body { flex:1; font-size:.8rem; color:#1e293b; min-width:0; }
.hl-rec-note { width:100%; font-size:.7rem; color:#94a3b8; margin-top:4px; }
.hl-rec-actions { display:flex; gap:4px; }
.hl-rec-btn { width:28px; height:28px; border-radius:50%; border:1px solid #e1e8ed; background:#fff; cursor:pointer; font-size:.8rem; display:flex; align-items:center; justify-content:center; }
.hl-rec-btn.del { color:#e74c3c; }
.hl-rec-btn:hover { background:#f0f2f5; }

/* 牙齿图 */
.hl-teeth-diagram { background:#fff; border-radius:14px; padding:16px; margin-bottom:14px; box-shadow:0 2px 8px rgba(0,0,0,.04); text-align:center; }
.hl-teeth-legend { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; font-size:.7rem; color:#64748b; }
.hl-legend-dot { display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:3px; vertical-align:middle; }

/* 健康孩子信息栏 */
.hl-child-bar { display:flex; align-items:center; justify-content:space-between; background:#fff; border-radius:10px; padding:10px 14px; margin-bottom:12px; box-shadow:0 2px 8px rgba(0,0,0,.04); border:1px solid #e1e8ed; }
.hl-child-age { font-size:.85rem; font-weight:600; color:#4B6CB7; }
.hl-child-edit-btn { background:transparent; border:1px solid #e1e8ed; border-radius:6px; padding:4px 10px; font-size:.7rem; color:#64748b; cursor:pointer; }

/* 健康事件时间轴 */
.hl-timeline { position:relative; padding-left:20px; }
.hl-tl-item { position:relative; padding:8px 0 12px 20px; }
.hl-tl-item:last-child .hl-tl-line { display:none; }
.hl-tl-dot { position:absolute; left:-18px; top:12px; width:12px; height:12px; border-radius:50%; border:2px solid #e1e8ed; background:#fff; z-index:1; }
.hl-tl-latest .hl-tl-dot { border-color:#4B6CB7; box-shadow:0 0 0 3px rgba(75,108,183,.15); }
.hl-tl-line { position:absolute; left:-13px; top:24px; bottom:0; width:2px; background:#e1e8ed; }
.hl-tl-content { background:#fff; border-radius:8px; padding:10px 12px; border:1px solid #e1e8ed; display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:.8rem; color:#1e293b; }
.hl-tl-date { font-weight:700; color:#4B6CB7; min-width:80px; }
.hl-tl-icon { font-size:1rem; }
.hl-tl-type { font-weight:600; }
.hl-tl-detail { color:#64748b; font-size:.75rem; width:100%; }

/* 健康表单 */
.hl-form { padding:0; }

/* ========== 图书馆 ========== */
.lib-body { padding:14px; }

/* ========== 图书馆 Tab 切换（复用 tm-type-tabs-bar 风格） ========== */
#libraryPage .lib-body > .tm-type-tabs-bar { margin:0 0 14px; }
#libraryPage .lib-body > .tm-type-tabs-bar .tm-type-tab { font-size:0.85rem; }
#libraryPage .lib-body > .tm-type-tabs-bar .tm-type-tab.active { color:#5CB85C; }

/* ========== 统计页图表网格 ========== */
.lib-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.lib-chart-title { margin:0 0 8px; font-size:.8rem; font-weight:700; color:#334155; }

/* ========== TOP 5 阅读排行 ========== */
.lib-top5-list { display:flex; flex-direction:column; gap:6px; }
.lib-top5-item { display:flex; align-items:center; gap:10px; padding:8px 10px; background:#f8fafc; border-radius:8px; }
.lib-top5-rank { width:22px; height:22px; border-radius:50%; background:#5CB85C; color:#fff; font-size:.7rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.lib-top5-item:nth-child(1) .lib-top5-rank { background:#F0AD4E; }
.lib-top5-item:nth-child(2) .lib-top5-rank { background:#95a5a6; }
.lib-top5-item:nth-child(3) .lib-top5-rank { background:#cd7f32; }
.lib-top5-title { flex:1; font-size:.82rem; font-weight:600; color:#1e293b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lib-top5-time { font-size:.8rem; font-weight:700; color:#5CB85C; flex-shrink:0; }
.lib-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; }
.lib-stat { background:#fff; border-radius:10px; padding:10px 4px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.04); border:1px solid #e1e8ed; }
.lib-stat-val { display:block; font-size:1.1rem; font-weight:700; color:#5CB85C; }
.lib-stat-lbl { display:block; font-size:.6rem; color:#94a3b8; margin-top:2px; }
.lib-toolbar { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.lib-search { flex:1; min-width:120px; padding:8px 12px; border:1.5px solid #e1e8ed; border-radius:8px; font-size:.85rem; outline:none; }
.lib-search:focus { border-color:#4B6CB7; }
.lib-filter { padding:8px 10px; border:1.5px solid #e1e8ed; border-radius:8px; font-size:.8rem; background:#fff; }
.lib-view-btn { width:34px; height:34px; border:1.5px solid #e1e8ed; border-radius:8px; background:#fff; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; }
.lib-view-btn.active { background:#4B6CB7; color:#fff; border-color:#4B6CB7; }
.lib-books { display:flex; flex-direction:column; gap:8px; }
.lib-empty { text-align:center; color:#94a3b8; padding:30px 0; font-size:.85rem; }
.lib-empty.small { padding:10px 0; font-size:.75rem; }
.lib-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.lib-card { background:#fff; border-radius:12px; padding:10px; box-shadow:0 2px 8px rgba(0,0,0,.04); border:1px solid #e1e8ed; position:relative; cursor:pointer; transition:all .15s; }
.lib-card:hover { transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,.08); }
.lib-card .lib-status-tag { position:absolute; top:6px; right:6px; }
.lib-card-cover { width:100%; height:160px; border-radius:6px; background:#f0f3f7; display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:8px; }
.lib-card-cover img { width:100%; height:100%; object-fit:cover; }
.lib-no-cover { font-size:1.15rem; color:#94a3b8; font-weight:700; text-align:center; line-height:1.3; word-break:break-all; padding:6px; max-width:100%; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.lib-no-cover.large { font-size:1rem; -webkit-line-clamp:4; }

/* ========== 默认图书封面（书本造型） ========== */
.lib-cover-book {
  width:100%; height:100%; display:flex; flex-direction:row;
  background:#f5f2eb; border-radius:4px 6px 6px 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08), inset -2px 0 3px rgba(0,0,0,.04);
  overflow:hidden;
}
.lib-cover-spine {
  width:18px; min-width:18px; flex-shrink:0;
  background: var(--spine, #5B8C5A);
  border-right: 1px solid rgba(0,0,0,.1);
  position:relative;
}
/* 书脊纹理线 */
.lib-cover-spine::after {
  content:''; position:absolute; top:8px; bottom:8px; left:50%; width:1px;
  background:rgba(255,255,255,.15); transform:translateX(-50%);
}
.lib-cover-pages {
  flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:8px 10px; min-width:0; position:relative;
}
/* 书页层次感 */
.lib-cover-pages::before {
  content:''; position:absolute; top:0; right:0; bottom:0; width:4px;
  background:linear-gradient(90deg, rgba(0,0,0,.02), rgba(0,0,0,.06));
  border-radius:0 4px 4px 0;
}
.lib-cover-title {
  font-size:0.75rem; font-weight:800; color:#3d3226; text-align:center;
  line-height:1.25; word-break:break-word; max-width:100%;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}
.lib-cover-author {
  font-size:0.6rem; color:#8c7b6b; margin-top:3px; text-align:center;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* 大型变体（详情页 80x110px） */
.lib-cover-book.large { border-radius:3px 5px 5px 3px; }
.lib-cover-book.large .lib-cover-spine { width:11px; min-width:11px; }
.lib-cover-book.large .lib-cover-pages { padding:4px 6px; }
.lib-cover-book.large .lib-cover-title { font-size:0.6rem; -webkit-line-clamp:6; }
.lib-cover-book.large .lib-cover-author { font-size:0.48rem; margin-top:2px; }
.lib-card-title { font-size:.85rem; font-weight:700; color:#1e293b; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.2; }
.lib-card-author { font-size:.7rem; color:#94a3b8; }
.lib-card-info { flex:1; min-width:0; }
.lib-card-meta { font-size:.65rem; color:#64748b; margin-top:4px; }
.lib-status-tag { display:inline-block; padding:2px 8px; border-radius:10px; font-size:.6rem; font-weight:600; }
.lib-status-unread { background:#e8f0ff; color:#4B6CB7; }
.lib-status-reading { background:#fff3cd; color:#F0AD4E; }
.lib-status-finished { background:#d4edda; color:#5CB85C; }
.lib-table { width:100%; border-collapse:collapse; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.lib-table th { background:#f8fafc; padding:8px 6px; font-size:.7rem; color:#64748b; text-align:left; border-bottom:1px solid #e1e8ed; }
.lib-table td { padding:8px 6px; font-size:.8rem; color:#1e293b; border-bottom:1px solid #f0f2f5; }
.lib-table tr { cursor:pointer; }
.lib-table tr:hover { background:#f8fafc; }
.lib-tbl-cover { width:30px; height:40px; background:#f0f3f7; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:.9rem; overflow:hidden; }
.lib-tbl-cover img { width:100%; height:100%; object-fit:cover; }
.lib-rec-btn { padding:4px 10px; border:1px solid #e1e8ed; border-radius:6px; background:#fff; cursor:pointer; font-size:.75rem; }
.lib-rec-btn.del { color:#e74c3c; border-color:#fdd; }
.lib-rec-btn:hover { background:#f5f7fa; }

/* 图书详情 */
.lib-detail textarea.form-input { resize:vertical; }
.lib-detail-cover { width:120px; height:170px; margin:0 auto 12px; border-radius:8px; background:#f0f3f7; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.lib-detail-cover img { width:100%; height:100%; object-fit:cover; }
.lib-detail h3 { font-size:1.05rem; color:#1e293b; text-align:center; margin-bottom:4px; }
.lib-detail-author { font-size:.8rem; color:#94a3b8; text-align:center; margin-bottom:10px; }
.lib-detail-meta { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:10px; font-size:.75rem; color:#64748b; }
.lib-detail-cat { background:#f0f3f7; padding:2px 8px; border-radius:6px; }
.lib-detail-stats { display:flex; gap:14px; justify-content:center; background:#f8fafc; border-radius:8px; padding:8px; margin-bottom:14px; font-size:.8rem; color:#64748b; }
.lib-detail h4 { font-size:.85rem; color:#1e293b; margin:14px 0 8px; display:flex; align-items:center; gap:8px; }
.lib-detail h4 .add-task-main-btn.small { padding:4px 10px; font-size:.7rem; }
.lib-session-item { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:8px; border-bottom:1px solid #f0f2f5; font-size:.8rem; }
.lib-sess-date { font-weight:600; color:#4B6CB7; min-width:80px; }
.lib-sess-dur { color:#1e293b; }
.lib-sess-count { color:#94a3b8; font-size:.7rem; }
.lib-sess-tag { background:#e8f0ff; color:#4B6CB7; padding:1px 6px; border-radius:8px; font-size:.65rem; }
.lib-sess-review { width:100%; font-size:.75rem; color:#64748b; margin-top:2px; padding-left:90px; }
.lib-detail-notes h4 { margin-top:14px; }
.lib-detail-notes p { font-size:.8rem; color:#64748b; }
.lib-detail-actions { display:flex; gap:10px; margin-top:16px; }
.lib-detail-actions .btn { flex:1; padding:10px; border-radius:8px; border:none; font-weight:600; cursor:pointer; }
.lib-detail-actions .btn-primary { background:#4B6CB7; color:#fff; }
.lib-detail-actions .btn-outline { background:#fff; color:#e74c3c; border:1.5px solid #e1e8ed; }

/* === 图书详情 V2 === */
.lib-detail-v2 { position:relative; }
.lib-detail-edit-btn { position:absolute; top:0; right:0; background:transparent; border:1px solid #e1e8ed; border-radius:8px; padding:6px 10px; font-size:.85rem; cursor:pointer; color:#64748b; }
.lib-detail-fixed { display:flex; gap:16px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid #e1e8ed; }
.lib-detail-cover-v2 { width:80px; height:110px; flex-shrink:0; border-radius:8px; overflow:hidden; background:#f0f2f5; display:flex; align-items:center; justify-content:center; }
.lib-detail-cover-v2 img { width:100%; height:100%; object-fit:cover; }
.lib-detail-info-v2 { flex:1; min-width:0; }
.lib-detail-title-v2 { margin:0 0 4px; font-size:1.1rem; font-weight:700; color:#1e293b; }
.lib-detail-sub-v2 { margin:0 0 8px; font-size:.8rem; color:#64748b; }
.lib-detail-tags-v2 { display:flex; flex-wrap:wrap; gap:6px; }
.lib-tag-v2 { background:#f0f2f5; border-radius:6px; padding:2px 8px; font-size:.7rem; color:#475569; }
.lib-detail-status { padding-top:4px; }
.lib-status-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.lib-status-btns { display:flex; gap:6px; }
.lib-status-btn { background:#f0f2f5; border:1.5px solid transparent; border-radius:8px; padding:6px 14px; font-size:.78rem; cursor:pointer; color:#475569; transition:all .2s; }
.lib-status-btn.active { background:#4B6CB7; color:#fff; border-color:#4B6CB7; }
.lib-readcount { font-size:.78rem; color:#64748b; display:flex; align-items:center; gap:4px; }
.lib-rc-btn { background:#e1e8ed; border:none; border-radius:50%; width:20px; height:20px; font-size:.75rem; cursor:pointer; color:#475569; line-height:18px; }
.lib-progress-bar { height:8px; background:#e1e8ed; border-radius:4px; overflow:hidden; margin-bottom:6px; }
.lib-progress-fill { height:100%; background:linear-gradient(90deg,#4B6CB7,#5CB85C); border-radius:4px; transition:width .3s; }
.lib-progress-text { font-size:.75rem; color:#64748b; margin-bottom:12px; }
.lib-start-btn { display:block; width:100%; margin-bottom:14px; }
.lib-sessions-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.lib-sessions-header h4 { margin:0; font-size:.9rem; color:#1e293b; }
.lib-session-card { background:#f8f9fb; border-radius:10px; padding:10px 12px; margin-bottom:8px; border:1px solid #e1e8ed; position:relative; }
.lib-sess-top { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.8rem; }
.lib-sess-date { font-weight:700; color:#4B6CB7; min-width:70px; }
.lib-sess-dur { color:#1e293b; }
.lib-sess-page { color:#5CB85C; font-weight:600; }
.lib-sess-actions { margin-left:auto; display:flex; gap:4px; }
.lib-sess-review-v2 { font-size:.78rem; color:#475569; margin-top:6px; padding-top:6px; border-top:1px dashed #e1e8ed; line-height:1.5; }
.lib-detail-footer { margin-top:14px; text-align:center; }
.lib-detail-footer .btn-destructive { background:transparent; color:#e74c3c; border:1px solid #e1e8ed; padding:8px 20px; border-radius:8px; cursor:pointer; font-size:.8rem; }

/* 封面图上传 */
.lib-cover-upload { display:flex; flex-direction:column; gap:8px; }
.lib-cover-upload .btn { padding:8px 14px; font-size:.8rem; }
.lib-cover-preview { margin-top:6px; }
.lib-cover-preview img { border-radius:6px; border:1px solid #e1e8ed; }

/* ========== 手机端勋章墙按钮排版 ========== */

/* 图标选择容器样式 */
.icon-selection-container {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
    margin-top: 10px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e9ecef;
}

/* 图标选项样式 */
.icon-option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.2rem;
    color: #555;
    background: white;
    transition: all 0.3s ease;
}

.icon-option:hover {
    border-color: #4b6cb7;
    color: #4b6cb7;
    transform: scale(1.1);
}

.icon-option.selected {
    border-color: #4b6cb7;
    background-color: #e3f0ff;
    color: #4b6cb7;
    transform: scale(1.05);
}

.color-option {
    width: 32px;
    height: 32px;
    border: 3px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.color-option:hover {
    transform: scale(1.2);
}

.color-option.selected {
    border-color: #4b6cb7;
    transform: scale(1.15);
}

/* 响应式调整 */



/* 针对更小屏幕的额外优化 */



/* 针对小屏幕不缩放，保持一致宽度 */


/* 替代方案：使用更紧凑的布局 */



/* 针对小屏幕进一步优化 */


/* 针对超小屏幕优化 */





/* 针对更小屏幕的额外优化 */


/* 针对超小屏幕的优化 */

/* 逾期任务样式 */
.overdue-tag {
    background: #ffebee;
    color: #c62828;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-left: 8px;
    border: 1px solid #ffcdd2;
}

.overdue-task {
    border-left: 4px solid #f44336;
    background: #fff5f5;
}

.overdue-task .category-bar {
    opacity: 0.8;
}
/* 手动设置时间模态框样式 */
#manualTimeModal .time-inputs {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

#manualTimeModal .time-inputs > div {
    display: flex;
    flex-direction: column;
}

#manualTimeModal .time-inputs label {
    font-size: 0.9rem;
    margin-bottom: 5px;
    font-weight: 500;
}







/* ========== 新用户引导弹窗样式 ========== */
.onboarding-modal {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 3000;
    justify-content: center;
    align-items: center;
    overflow: auto;
    animation: onboardingFadeIn 0.3s ease;
}
@keyframes onboardingFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.onboarding-modal-content {
    background: white;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.25);
    max-width: 520px;
    width: 92%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: onboardingSlideUp 0.3s ease;
}
@keyframes onboardingSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.onboarding-header {
    padding: 20px 24px 16px;
    background: linear-gradient(135deg, #4B6CB7 0%, #6B7FD7 100%);
}
.onboarding-progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.onboarding-progress-bar {
    height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    overflow: hidden;
}
.onboarding-progress-fill {
    height: 100%;
    background: white;
    border-radius: 2px;
    transition: width 0.3s ease;
}
.onboarding-progress-text {
    color: rgba(255,255,255,0.9);
    font-size: 0.85rem;
    font-weight: 600;
}
.onboarding-body {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}
.onboarding-footer {
    padding: 16px 24px 20px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 12px;
}
.onboarding-btn {
    flex: 1;
    padding: 14px 20px;
    border-radius: 12px;
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.onboarding-btn-skip {
    background: transparent;
    color: #64748b;
    border: 1.5px solid #cbd5e1;
}
.onboarding-btn-skip:hover {
    background: #f1f5f9;
    color: #475569;
}
.onboarding-btn-primary {
    background: linear-gradient(135deg, #4B6CB7 0%, #6B7FD7 100%);
    color: white;
}
.onboarding-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(75,108,183,0.4);
}
.onboarding-step-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px;
}
.onboarding-step-desc {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0 0 20px;
    line-height: 1.5;
}
.onboarding-step-hint {
    font-size: 0.82rem;
    color: #94a3b8;
    margin: -12px 0 16px;
    line-height: 1.6;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 3px solid #F0AD4E;
}

/* ===== 欢迎页专属样式 ===== */
.onboarding-welcome {
    text-align: center;
    padding: 8px 4px 0;
}
.onboarding-welcome-hero {
    background: linear-gradient(135deg, #4B6CB7 0%, #6B85D4 100%);
    color: #fff;
    margin: -8px -16px 24px;
    padding: 28px 20px 32px;
    border-radius: 0 0 20px 20px;
    position: relative;
    overflow: hidden;
}
.onboarding-welcome-hero::before {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 140px; height: 140px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
}
.onboarding-welcome-hero::after {
    content: "";
    position: absolute;
    bottom: -50px; left: -30px;
    width: 120px; height: 120px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
}
.onboarding-welcome-badge {
    display: inline-block;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    margin-bottom: 14px;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
}
.onboarding-welcome-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 10px;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
}
.onboarding-welcome-tagline {
    font-size: 0.9rem;
    margin: 0;
    opacity: 0.92;
    position: relative;
    z-index: 1;
}
.onboarding-welcome-tagline b {
    color: #FFD54F;
    font-weight: 600;
}
.onboarding-welcome-steps {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 4px;
    padding: 0 4px;
}
.onboarding-welcome-step-card {
    flex: 1;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 4px 10px;
    position: relative;
    text-align: center;
    transition: all 0.2s;
}
.onboarding-welcome-step-card:hover {
    border-color: #4B6CB7;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(75, 108, 183, 0.15);
}
.onboarding-welcome-step-num {
    position: absolute;
    top: -8px; left: -6px;
    width: 22px; height: 22px;
    background: #4B6CB7;
    color: #fff;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(75, 108, 183, 0.3);
}
.onboarding-welcome-step-icon {
    font-size: 1.4rem;
    color: #4B6CB7;
    margin: 4px 0 6px;
}
.onboarding-welcome-step-icon i {
    background: linear-gradient(135deg, #e8edf7 0%, #f0f4fc 100%);
    width: 36px; height: 36px;
    line-height: 36px;
    border-radius: 10px;
    display: inline-block;
}
.onboarding-welcome-step-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2px;
}
.onboarding-welcome-step-desc {
    font-size: 0.7rem;
    color: #94a3b8;
    line-height: 1.3;
}
.onboarding-welcome-step-arrow {
    display: flex;
    align-items: center;
    color: #cbd5e1;
    font-size: 0.8rem;
    flex: 0 0 auto;
    padding: 0 2px;
}
@media (max-width: 480px) {
    .onboarding-welcome-step-arrow { display: none; }
    .onboarding-welcome-steps { flex-wrap: wrap; gap: 8px; }
    .onboarding-welcome-step-card { flex: 1 1 calc(50% - 4px); }
    .onboarding-cards-grid { grid-template-columns: repeat(3, 1fr); }
    .onboarding-card-box { font-size: 0.72rem; }
}
.onboarding-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.onboarding-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.onboarding-form-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 4px;
}
.onboarding-form-required {
    color: #e74c3c;
}
.onboarding-form-input {
    padding: 12px 16px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    font-size: 0.95rem;
    color: #1e293b;
    background: #fff;
    outline: none;
    transition: all 0.2s;
    font-family: inherit;
}
.onboarding-form-input:hover {
    border-color: #cbd5e1;
}
.onboarding-form-input:focus {
    border-color: #4B6CB7;
    box-shadow: 0 0 0 4px rgba(75,108,183,0.1);
}
.onboarding-form-input::placeholder {
    color: #94a3b8;
}
select.onboarding-form-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}
.onboarding-avatar-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.onboarding-avatar-opt {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.15s;
    overflow: hidden;
}
.onboarding-avatar-opt img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.onboarding-avatar-opt:hover {
    background: #e2e8f0;
    transform: scale(1.08);
}
.onboarding-avatar-opt.selected {
    border-color: #4B6CB7;
    background: #e8f0ff;
    box-shadow: 0 0 0 3px rgba(75,108,183,.15);
}
.onboarding-avatar-opt.onboarding-avatar-upload {
    background: #fff;
    border: 2px dashed #cbd5e1;
    color: #94a3b8;
    font-size: 20px;
}
.onboarding-avatar-opt.onboarding-avatar-upload:hover {
    border-color: #4B6CB7;
    color: #4B6CB7;
    background: rgba(75,108,183,.05);
}
.onboarding-templates {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 400px;
    overflow-y: auto;
}
.onboarding-template-category {
    background: #f8fafc;
    border-radius: 12px;
    padding: 14px;
    border: 1px solid #e2e8f0;
}
.onboarding-category-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 600;
    color: #334155;
    margin-bottom: 10px;
}
.onboarding-category-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.onboarding-recommended-tag {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
    margin-left: auto;
}
.onboarding-template-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-left: 28px;
}
.onboarding-template-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    font-size: 0.85rem;
    color: #475569;
    transition: all 0.15s;
}
.onboarding-template-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}
.onboarding-template-checkbox {
    width: 14px;
    height: 14px;
    cursor: pointer;
}
/* 引导步骤：首页卡片布局设置区 */
.onboarding-layout-settings {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 0 0 16px 0;
    padding: 12px 16px;
    background: #f0f4ff;
    border-radius: 10px;
    border: 1px solid #d6e0ff;
}
.onboarding-layout-title {
    flex-basis: 100%;
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}
.onboarding-layout-title i {
    color: var(--primary, #4b6cb7);
    margin-right: 6px;
}
.onboarding-layout-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    flex-basis: 100%;   /* ★ 2026-09-11 每组设备独占一行（容器是 flex-wrap，否则手机/电脑两组会并排） */
}
.onboarding-layout-row label {
    font-size: 0.85rem;
    color: #555;
    white-space: nowrap;
}
.onboarding-layout-name {
    flex: 0 0 auto;
    min-width: 92px;
    font-weight: 600;
    color: #444;
}
.onboarding-layout-name i {
    color: var(--primary, #4b6cb7);
    margin-right: 6px;
}
/* 窄屏（手机）：设备名独占一行，避免「每行 … 折叠 … 行」被挤断行 */
@media (max-width: 640px) {
    .onboarding-layout-name {
        flex-basis: 100%;
        min-width: 0;
        margin-bottom: 2px;
    }
}
.onboarding-layout-row select {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.85rem;
    background: #fff;
}
.onboarding-layout-hint {
    flex-basis: 100%;
    font-size: 0.75rem;
    color: #888;
    margin: 2px 0 0 0;
    padding: 6px 10px;
    background: #fff;
    border-radius: 6px;
    line-height: 1.4;
}
.onboarding-layout-hint i {
    color: var(--primary, #4b6cb7);
    margin-right: 4px;
}
.onboarding-cards {
    max-height: 400px;
    overflow-y: auto;
}
.onboarding-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.onboarding-card-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 6px;
    background: #ffffff;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 6px;
}
.onboarding-card-item:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}
.onboarding-card-item input:checked + .onboarding-card-box {
    background: linear-gradient(135deg, rgba(75,108,183,0.1) 0%, rgba(75,108,183,0.05) 100%);
    border-color: #4B6CB7;
    box-shadow: 0 0 0 3px rgba(75,108,183,0.1);
}
.onboarding-card-checkbox {
    display: none;
}
.onboarding-card-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #475569;
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 8px 4px;
    width: 100%;
    min-height: 60px;
    justify-content: center;
    transition: all 0.2s ease;
}
.onboarding-card-box i {
    font-size: 1.4rem;
}
.onboarding-card-checkmark {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s ease;
}
.onboarding-card-item input:checked + .onboarding-card-box .onboarding-card-checkmark {
    opacity: 1;
    background: #4B6CB7;
}
.onboarding-card-checkmark i {
    font-size: 0.7rem !important;
    color: white;
}
.onboarding-empty {
    text-align: center;
    color: #94a3b8;
    padding: 40px 0;
    font-size: 0.9rem;
}

/* 针对超窄屏幕的特殊处理 */

/* 应用名称和副标题响应式样式 */

/* 开关样式 */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #4b6cb7;
}

input:checked + .slider:before {
    transform: translateX(26px);
}
.week-day-btn{
  width: 32px; height: 32px; border: 1px solid #4b6cb7;
  background: #fff; color: #4b6cb7; border-radius: 4px;
  cursor: pointer; font-size: 14px; line-height: 1;
}
.week-day-btn.active{
  background: #4b6cb7; color: #fff;
}
/* ===== 多科成绩录入页面样式（完全独立，不依赖 .edit-page） ===== */
#multiScoreEditPage { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1200; background: rgba(245,247,250,0.95); padding: 12px; box-sizing: border-box; }
#multiScoreEditPage .stats-header {
    flex: 0 0 auto; width: 100%; background: var(--primary, #4B6CB7); color: #fff;
    padding: 16px 20px; border-radius: 16px 16px 0 0; display: flex;
    justify-content: space-between; align-items: center; box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
#multiScoreEditPage .stats-header h2 { color: #fff; font-size: 1.3rem; margin: 0; }
#multiScoreEditPage .back-btn { background: rgba(255,255,255,0.2); border: none; color: #fff; padding: 6px 14px; border-radius: 20px; cursor: pointer; font-size: .85rem; }
#multiScoreEditPage .page-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 20px 30px;
    -webkit-overflow-scrolling: touch; width: 100%; max-width: 900px; margin: 0 auto;
    background: #fff;
}
#multiScoreEditPage .page-footer {
    flex: 0 0 auto; width: 100%; max-width: 900px; margin: 0 auto;
    padding: 12px 20px; background: #fff; border-top: 1px solid #e2e8f0;
    display: flex; gap: 12px; justify-content: flex-end;
    border-radius: 0 0 16px 16px;
}

/* 科目成绩标题行：标题 + 总分统计勾选 同一行 */
.ms-section-header {
    display: flex; justify-content: flex-start; align-items: center; gap: 8px;
    margin-bottom: 12px; padding-bottom: 4px; border-bottom: 2px solid var(--primary);
}
.ms-section-header h4 { margin: 0; color: var(--primary); }
.ms-section-header .ms-checkbox-label { margin: 0; }

/* 单科排名/薄弱项 标题行：标题 + 添加按钮 同一行 */
.ms-section-label {
    display: flex; justify-content: flex-start; align-items: center; gap: 8px;
    padding: 8px 0 4px; margin-bottom: 4px; font-size: .78rem; font-weight: 700; color: #475569;
}
.ms-section-add-btn {
    padding: 3px 10px; border: 1px dashed #4B6CB7; background: #eff6ff; color: #4B6CB7;
    border-radius: 12px; font-size: .72rem; cursor: pointer;
}
.ms-section-add-btn:hover { background: #4B6CB7; color: #fff; }.ms-subject-row {
    background: #f8fafc; border-radius: 10px; border: 1px solid #e2e8f0;
    padding: 14px 50px 14px 16px; margin-bottom: 12px; position: relative;
}
.ms-subject-header {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ms-subject-index {
    width: 24px; height: 24px; background: #4B6CB7; color: #fff;
    border-radius: 50%; font-size: .75rem; font-weight: 600;
    display: flex; align-items: center; justify-content: center; flex: none;
}
.ms-subject-header .form-input { margin: 0; }
.ms-subject-select { width: 160px; flex: 0 0 auto; min-width: 130px; }

.ms-subject-score-block { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.ms-subject-score-label { font-size: .72rem; color: #64748b; flex: none; }
.ms-subject-score { width: 80px; text-align: center; }
.ms-subject-divider { color: #94a3b8; font-size: .8rem; flex: none; }
.ms-subject-total { width: 80px; text-align: center; }

.ms-subject-target-block { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.ms-subject-target { width: 80px; text-align: center; }

.ms-subject-toggle {
    display: flex; align-items: center; gap: 4px;
    padding: 5px 10px; border: 1px solid #cbd5e1; background: #fff; color: #4B6CB7;
    cursor: pointer; font-size: .72rem; border-radius: 14px; line-height: 1; flex: 0 0 auto;
    transition: all .2s; font-weight: 600;
}
.ms-subject-toggle:hover { border-color: #4B6CB7; background: #eff6ff; }
.ms-subject-toggle.open { background: #4B6CB7; color: #fff; border-color: #4B6CB7; }
.ms-subject-toggle .toggle-arrow { font-size: .65rem; transition: transform .2s; }
.ms-subject-toggle.open .toggle-arrow { transform: rotate(90deg); }

.ms-subject-delete {
    position: absolute; top: 10px; right: 10px;
    width: 28px; height: 28px; border: none; background: #fee2e2; color: #dc2626;
    cursor: pointer; font-size: .85rem; border-radius: 50%; line-height: 1;
    display: flex; align-items: center; justify-content: center; z-index: 1;
}
.ms-subject-delete:hover { background: #fca5a5; color: #fff; }

.ms-subject-advanced { display: none; padding-top: 10px; margin-top: 10px; border-top: 1px dashed #e2e8f0; }
.ms-subject-advanced.show { display: block; }

/* 高级字段行 */
.ms-adv-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.ms-adv-col { flex: 1 1 100px; min-width: 80px; }
.ms-adv-col label { font-size: .68rem; color: #94a3b8; display: block; margin-bottom: 2px; }
.ms-adv-col .form-input { padding: 6px 8px; font-size: .82rem; }

/* 排名行 */
.ms-ranking-row { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.ms-ranking-row .form-input { padding: 5px 8px; font-size: .8rem; }

.ms-row-del {
    padding: 2px 8px; border: none; background: none; color: #ef4444; cursor: pointer;
    font-size: .85rem; flex: none;
}
.ms-row-del:hover { background: #fee2e2; border-radius: 4px; }

/* 薄弱项 */
.ms-weakness-item {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px; margin-bottom: 6px;
}

/* 添加按钮 */
.ms-add-subject-btn {
    width: 100%; padding: 8px; border: 2px dashed #cbd5e1; background: transparent;
    border-radius: 8px; color: #64748b; cursor: pointer; font-size: .85rem; transition: all .2s;
}
.ms-add-subject-btn:hover { border-color: #4B6CB7; color: #4B6CB7; background: #eff6ff; }

/* 总分区域 */
.ms-checkbox-label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: .9rem; font-weight: 600; color: #374151; }
.ms-checkbox-label input[type=checkbox] { width: auto; margin: 0; }
.ms-total-area { background: linear-gradient(135deg, #fef3c7, #fffbeb); border-radius: 12px; padding: 14px; margin-top: 10px; border: 1px solid #fcd34d; }
.ms-total-summary { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 0; flex-wrap: wrap; }
.ms-total-stat { display: flex; align-items: baseline; gap: 4px; }
.ms-total-label { font-size: .75rem; color: #92400e; }
.ms-total-val { font-size: 1.4rem; font-weight: 800; color: #d97706; }
.ms-total-val.rate { font-size: 1.1rem; color: #059669; }
.ms-total-unit { font-size: .8rem; color: #92400e; }
.ms-total-divider { color: #d4a017; font-size: 1.2rem; opacity: .5; }
.ms-total-breakdown { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; background: rgba(255,255,255,.7); border-radius: 8px; margin-top: 8px; }
.ms-breakdown-item { font-size: .78rem; color: #475569; background: #fff; padding: 4px 10px; border-radius: 6px; border: 1px solid #e2e8f0; }
.ms-breakdown-item .subj { font-weight: 600; }
.ms-breakdown-item .score { color: #d97706; font-weight: 600; }
.ms-add-ranking-btn {
    width: 100%; padding: 6px; border: 1px dashed #d4a017; background: rgba(255,255,255,.5);
    border-radius: 6px; color: #92400e; cursor: pointer; font-size: .8rem; margin-top: 6px;
}
.ms-add-ranking-btn:hover { background: #fff; }

.ms-section-label {
    font-size: .78rem; font-weight: 700; color: #475569;
    padding: 8px 0 4px; margin-bottom: 4px;
}

/* 总分卡片 */
.score-card.total-score .score-category-bar { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }

/* ========== 科目删除确认弹窗（应用风格重设计） ========== */
.ms-detach-modal {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 4000;
}

.ms-detach-modal .ms-detach-content {
    max-width: 440px;
    width: calc(100% - 32px);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25), 0 4px 16px rgba(15, 23, 42, 0.1);
    overflow: hidden;
    padding: 0;
    background: #ffffff;
    animation: msDetachIn 0.25s cubic-bezier(.22,.61,.36,1);
}

@keyframes msDetachIn {
    from { transform: translateY(12px) scale(0.96); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

.ms-detach-header {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 60%, #fcd34d 100%);
    padding: 26px 24px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ms-detach-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,0.5) 1.5px, transparent 2px),
        radial-gradient(circle at 88% 78%, rgba(255,255,255,0.45) 1.5px, transparent 2px),
        radial-gradient(circle at 50% 30%, rgba(255,255,255,0.35) 1px, transparent 1.5px);
    background-size: 120px 80px, 100px 90px, 70px 60px;
    background-repeat: repeat;
    opacity: 0.6;
    pointer-events: none;
}

.ms-detach-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 24px;
    box-shadow: 0 6px 16px rgba(217, 119, 6, 0.35);
    position: relative;
    z-index: 1;
}

.ms-detach-title {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #78350f;
    position: relative;
    z-index: 1;
}

.ms-detach-title .ms-detach-subject {
    display: inline-block;
    background: rgba(255, 255, 255, 0.7);
    color: #92400e;
    padding: 2px 12px;
    border-radius: 999px;
    margin: 0 2px;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(120, 53, 15, 0.15);
}

.ms-detach-subtitle {
    margin: 0;
    font-size: 0.85rem;
    color: #92400e;
    opacity: 0.85;
    position: relative;
    z-index: 1;
}

.ms-detach-options {
    padding: 16px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ms-detach-option {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid transparent;
    border-radius: 14px;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    font-family: inherit;
    color: #1e293b;
    position: relative;
}

.ms-detach-option:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.ms-detach-option:active {
    transform: translateY(0);
}

.ms-detach-option-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.ms-detach-option-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ms-detach-option-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
}

.ms-detach-option-desc {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.4;
}

.ms-detach-arrow {
    color: #cbd5e1;
    font-size: 12px;
    transition: transform 0.2s ease, color 0.2s ease;
}

.ms-detach-option:hover .ms-detach-arrow {
    transform: translateX(2px);
    color: #94a3b8;
}

.ms-detach-option--safe {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #bfdbfe;
    color: #1e3a8a;
}
.ms-detach-option--safe .ms-detach-option-icon {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3);
}
.ms-detach-option--safe .ms-detach-option-desc { color: #475569; }
.ms-detach-option--safe:hover {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #93c5fd;
}

.ms-detach-option--danger {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: #fecaca;
    color: #7f1d1d;
}
.ms-detach-option--danger .ms-detach-option-icon {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    box-shadow: 0 3px 8px rgba(220, 38, 38, 0.3);
}
.ms-detach-option--danger .ms-detach-option-desc { color: #b91c1c; opacity: 0.85; }
.ms-detach-option--danger:hover {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-color: #fca5a5;
}

.ms-detach-footer {
    padding: 8px 16px 18px;
    display: flex;
    justify-content: center;
}

.ms-detach-cancel {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 24px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.ms-detach-cancel:hover {
    background: #f1f5f9;
    color: #334155;
}

/* 窄屏适配 */
@media (max-width: 480px) {
    .ms-detach-modal .ms-detach-content {
        max-width: calc(100% - 24px);
    }
    .ms-detach-header { padding: 22px 18px 18px; }
    .ms-detach-icon { width: 48px; height: 48px; font-size: 20px; }
    .ms-detach-title { font-size: 1.05rem; }
}

/* 重新设计的成绩卡片样式 */
.score-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 160px;
    display: flex;
}

.score-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
}

/* 左侧分类条 - 类似任务卡片 */
.score-category-bar {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    letter-spacing: 2px;
}

/* 卡片内容区域 */
.score-card-content {
    flex: 1;
    display: flex;
    height: 100%;
}

/* 中间信息区域 */
.score-data-display-area {
    width: 70%;
    padding: 15px;
    display: flex;
    flex-direction: column;
}

/* 标题区域 */
.score-header {
    margin-bottom: 10px;
}

.score-main-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.score-main-title i {
    color: #4b6cb7;
}

.score-subtitle {
    display: flex;
    gap: 20px;
    color: var(--text-light);
    font-size: 0.9rem;
}

/* 成绩信息区域 */
.score-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 10px;
}

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

.score-info-label {
    font-size: 0.8rem;
    color: #7f8c8d;
    display: flex;
    align-items: center;
    gap: 6px;
}

.score-info-value {
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
}

.score-info-value.target {
    color: #3498db;
}

.score-info-value.average {
    color: #9b59b6;
}

.score-info-value.max {
    color: #e74c3c;
}

.score-info-value.ranking {
    color: #27ae60;
}

/* 右侧圆环区域 */
.score-action-section {
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    border-left: 1px solid #f0f4f8;
    justify-content: center;
    align-items: center;
}

.score-circle-container {
    position: relative;
    width: 80px;
    height: 80px;
}

.score-circle-svg {
    width: 100%;
    height: 100%;
    transform: rotate(0deg);
}

.score-circle-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
}

.score-actual {
    font-size: 1.3rem;
    font-weight: bold;
    color: #2c3e50;
    display: block;
    line-height: 1.2;
}

.score-total {
    font-size: 0.9rem;
    color: var(--text-light);
    display: block;
    line-height: 1.2;
}

.score-performance {
    margin-top: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    padding: 4px 8px;
    border-radius: 12px;
    background: #f8f9fa;
}

.score-performance.excellent {
    color: #4CAF50;
    background: #e8f5e8;
}

.score-performance.good {
    color: #2196F3;
    background: #e3f2fd;
}

.score-performance.average {
    color: #FF9800;
    background: #fff3e0;
}

.score-performance.poor {
    color: #F44336;
    background: #ffebee;
}

/* 响应式设计 */

/* 排名信息样式 */
.ranking-item {
    font-size: 0.85rem;
    margin-bottom: 4px;
    line-height: 1.3;
}

.ranking-item:last-child {
    margin-bottom: 0;
}
/* 为预览模式下的禁用元素添加样式 */
.preview-disabled {
    background-color: #f7f7f7 !important; /* 更浅的背景色 */
    border: 1px solid #ddd !important;    /* 边框颜色 */
    pointer-events: none !important;      /* 禁用鼠标交互 */
    color: #555 !important;               /* 文字颜色 */
    opacity: 0.9;                        /* 稍微降低透明度 */
}
/* 统计页面、成绩分析页面、勋章页面等通用样式 */
.stats-page {
    display: none; /* 通过JavaScript控制显示隐藏 */
    background: var(--light-bg);
    border-radius: 15px;
    padding: 10px;
    box-shadow: 0 8px 16px var(--shadow);
    margin-top: 20px;

    /* --- 添加或确保包含以下关键样式 --- */
    position: relative; /* 或者 absolute，取决于父元素 */
    z-index: 1000;       /* 给一个较高的层级，确保显示在其他内容之上 */
    /* --- 结束添加 --- */

}

/* 防止 .edit-page 全屏覆盖层在初始 hidden 状态下闪现：
   用更高特异性确保 hidden 类胜过 .edit-page 的 display:flex，
   且不影响通过 inline style.display 显示/隐藏的逻辑 */
.edit-page.hidden { display: none; }
.stats-page.hidden { display: none; }

/* ========== 编辑页面通用样式（核心模态框页面化改造）========== */

/* 编辑页内容区（可滚动） */
.page-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
}

/* 编辑页底部操作栏 */
.page-footer {
    position: sticky;
    bottom: 0;
    background: white;
    padding: 12px 16px;
    border-top: 1px solid var(--border, #e0e0e0);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    z-index: 10;
}

.page-footer .btn {
    min-width: 100px;
}

/* 编辑页布局：居中卡片，限制最大宽度，大屏显示应用头尾 */
.edit-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1100;
    background: rgba(245, 247, 250, 0.88);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    box-sizing: border-box;
}

.edit-page .stats-header,
.edit-page .page-body,
.edit-page .page-footer {
    width: 100%;
    max-width: 900px;
}

.edit-page .stats-header {
    flex-shrink: 0;
    padding: 16px 20px;
    margin-bottom: 0;
    margin-top: 0;
    background: var(--primary);
    color: white;
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.edit-page .stats-header h2 {
    color: white;
    font-size: 1.3rem;
    margin: 0;
}

.edit-page .stats-header h2 i {
    color: rgba(255, 255, 255, 0.9);
}

.edit-page .stats-header .back-btn {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s;
}

.edit-page .stats-header .back-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.edit-page .stats-header .back-btn i {
    color: white;
}

.edit-page .page-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
    background: var(--light-bg);
}

.edit-page .page-footer {
    flex-shrink: 0;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

/* 总览视图页面 - 更宽的内容区 */
#overviewPage .stats-header,
#overviewPage .page-body {
    max-width: 1200px;
}
#overviewPage .page-body {
    padding: 0;
    background: white;
}

/* 未保存确认弹窗 */
.unsaved-confirm-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

.unsaved-confirm-box {
    background: white;
    border-radius: 12px;
    padding: 24px;
    max-width: 360px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.unsaved-confirm-box h3 {
    margin: 0 0 12px 0;
    font-size: 1.1rem;
    color: #333;
}

.unsaved-confirm-box p {
    margin: 0 0 20px 0;
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
}

.unsaved-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.unsaved-confirm-actions .btn {
    flex: 1;
    max-width: 160px;
}

/* 批量预览区域（页面内嵌） */
.edit-preview-section {
    margin-top: 20px;
    border-top: 2px solid var(--primary, #4a90d9);
    padding-top: 16px;
}

.edit-preview-section h4 {
    margin: 0 0 12px 0;
    font-size: 1rem;
    color: #333;
}

.edit-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.edit-preview-table th,
.edit-preview-table td {
    padding: 8px 10px;
    border: 1px solid #e0e0e0;
    text-align: left;
}

.edit-preview-table th {
    background: #f5f5f5;
    font-weight: 600;
    white-space: nowrap;
}

.edit-preview-table td {
    background: white;
}

.edit-preview-table .preview-action-btn {
    background: none;
    border: none;
    color: #e74c3c;
    cursor: pointer;
    padding: 4px 6px;
    font-size: 0.85rem;
}

.edit-preview-table .preview-action-btn:hover {
    text-decoration: underline;
}

/* 移动端适配 */


/* ========== 批量添加任务页面（左右分栏） ========== */

/* 整个两栏容器 */
.batch-task-split {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}

/* 左/右两栏 */
.batch-task-left,
.batch-task-right {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    align-self: stretch;
}

.batch-task-left {
    flex: 0 0 42%;
    max-width: 42%;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
}

.batch-task-right {
    flex: 1 1 58%;
    max-width: 58%;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 200px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
}

/* 面板（左侧每个分组） */
.batch-panel {
    background: #fafbfc;
    border: 1px solid #eef0f3;
    border-radius: 10px;
    padding: 14px 14px 12px;
}

.batch-panel-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
}

.batch-panel-title-main {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.batch-panel-title-main i {
    color: var(--primary, #4a90d9);
}

.batch-panel-title-hint {
    color: #909399;
    font-size: 0.78rem;
}

.batch-link-btn {
    background: transparent;
    border: none;
    color: var(--primary, #4a90d9);
    font-size: 0.82rem;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.batch-link-btn:hover {
    background: rgba(74, 144, 217, 0.08);
}

/* 文本输入框 */
.batch-input-textarea {
    width: 100%;
    min-height: 160px;
    padding: 10px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.55;
    resize: vertical;
    font-family: inherit;
    background: white;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.batch-input-textarea:focus {
    outline: none;
    border-color: var(--primary, #4a90d9);
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.12);
}

.batch-input-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap;
    gap: 8px;
}

.batch-input-actions-left {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.batch-action-btn {
    background: white;
    border: 1px solid #dcdfe6;
    color: #4a5560;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.batch-action-btn:hover {
    border-color: var(--primary, #4a90d9);
    color: var(--primary, #4a90d9);
}

.batch-action-btn.batch-action-primary {
    background: var(--primary, #4a90d9);
    color: white;
    border-color: var(--primary, #4a90d9);
}

.batch-action-btn.batch-action-primary:hover {
    background: #3a7bc8;
    color: white;
}

.batch-action-btn.batch-action-danger:hover {
    border-color: #e74c3c;
    color: #e74c3c;
}

.batch-auto-parse-hint {
    color: #909399;
    font-size: 0.78rem;
}

/* 全局设置行 */
.batch-global-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.batch-global-field {
    flex: 1 1 0;
    min-width: 90px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.batch-global-field-grow {
    flex: 1 1 100%;
    min-width: 0;
}

.batch-global-field-row {
    flex-direction: row;
    align-items: center;
}

.batch-global-field > label {
    font-size: 0.8rem;
    color: #606266;
    font-weight: 500;
}

.batch-global-field .form-control {
    height: 34px;
    padding: 4px 10px;
    font-size: 0.9rem;
    border-radius: 6px;
    border: 1px solid #dcdfe6;
    background: white;
    width: 100%;
    box-sizing: border-box;
}

.batch-global-field .form-control:focus {
    outline: none;
    border-color: var(--primary, #4a90d9);
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.12);
}

.batch-global-field select.form-control {
    appearance: auto;
}

.batch-global-hint {
    color: #909399;
    font-size: 0.78rem;
    margin: 4px 0 0 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.batch-global-hint i {
    color: var(--primary, #4a90d9);
}

/* 右侧 - 顶部统计 */
.batch-right-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px dashed #e6e8ec;
}

.batch-right-summary {
    color: #606266;
    font-size: 0.92rem;
}

.batch-right-summary #batchPreviewCount,
.batch-right-summary #batchPreviewCategoryCount {
    color: var(--primary, #4a90d9);
    font-weight: 700;
    margin: 0 2px;
}

.batch-right-divider {
    color: #dcdfe6;
    margin: 0 6px;
}

.batch-reset-btn {
    background: transparent;
    border: 1px solid var(--primary, #4a90d9);
    color: var(--primary, #4a90d9);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.batch-reset-btn:hover {
    background: var(--primary, #4a90d9);
    color: white;
}

/* 预览卡片列表 */
.batch-preview-list {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
    min-height: 0;
}

.batch-preview-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #c0c4cc;
    padding: 40px 20px;
    text-align: center;
    font-size: 0.9rem;
    gap: 10px;
}

.batch-preview-empty i {
    font-size: 2.4rem;
    color: #dcdfe6;
}

/* 单个任务卡片 */
.batch-card {
    background: white;
    border: 1px solid #e6e8ec;
    border-radius: 10px;
    transition: box-shadow 0.2s, transform 0.2s;
}

.batch-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.batch-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #f0f2f5;
}

.batch-card-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px 3px 10px;
    border-radius: 20px;
    color: white;
    font-size: 0.78rem;
    font-weight: 600;
    flex-shrink: 0;
    max-width: 140px;
    cursor: pointer;
    user-select: none;
    position: relative;
}

.batch-card-tag i {
    font-size: 0.8rem;
}

.batch-card-cat-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 95px;
}

.batch-card-tag .batch-card-cat {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    background: transparent;
    color: transparent;
    font-size: 0.78rem;
    padding: 0;
}

.batch-card-cat-label {
    color: white;
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.batch-card-tag-caret {
    font-size: 0.6rem !important;
    margin-left: 2px;
    opacity: 0.85;
    pointer-events: none;
}

.batch-card-tag select option {
    color: #2c3e50;
    background: white;
}

.batch-card-name {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
    border: none;
    background: transparent;
    outline: none;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background 0.2s;
    min-width: 0;
}

.batch-card-name:focus {
    background: #f5f7fa;
}

.batch-card-delete {
    background: transparent;
    border: none;
    color: #c0c4cc;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.batch-card-delete:hover {
    color: #e74c3c;
    background: #fdf2f2;
}

.batch-card-desc {
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    padding: 6px 12px 2px;
    color: #909399;
    font-size: 0.85rem;
    resize: none;
    overflow: hidden;
    min-height: 26px;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.35;
}

.batch-card-desc::placeholder {
    color: #c0c4cc;
    font-style: italic;
}

.batch-card-desc:focus {
    color: #2c3e50;
    background: #fafbfc;
}

.batch-card-fields {
    padding: 4px 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.batch-card-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.batch-card-field {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f7f8fb;
    border: 1px solid #ebeef3;
    border-radius: 6px;
    padding: 1px 6px 1px 8px;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    height: 30px;
    box-sizing: border-box;
}

.batch-card-field.batch-card-field-grow {
    flex: 1 1 auto;
    min-width: 0;
}

.batch-card-field.batch-card-field-time {
    flex: 2 1 auto;
}

.batch-card-field.batch-card-field-dur {
    flex: 1 1 auto;
    min-width: 80px;
}

.batch-card-field.batch-card-field-date {
    flex: 1 1 auto;
}

.batch-card-field i {
    color: #909399;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.batch-card-field select,
.batch-card-field input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.85rem;
    color: #2c3e50;
    padding: 4px 2px;
    flex: 1;
    min-width: 0;
    width: 100%;
    font-family: inherit;
}

.batch-card-field select {
    cursor: pointer;
}

.batch-card-field input[type="time"] {
    min-width: 60px;
}

.batch-card-field input[type="number"] {
    min-width: 40px;
    max-width: 65px;
    text-align: right;
}

.batch-card-field input[type="date"] {
    cursor: pointer;
    color: #2c3e50;
    min-width: 0;
    flex: 1;
    padding: 4px 1px;
}

.batch-card-arrow {
    color: #c0c4cc;
    font-size: 0.78rem;
    flex-shrink: 0;
    padding: 0 1px;
    user-select: none;
}

.batch-card-unit {
    color: #909399;
    font-size: 0.75rem;
    flex-shrink: 0;
    padding-right: 1px;
    user-select: none;
}

.batch-card-sep {
    color: #dcdfe6;
    flex-shrink: 0;
    user-select: none;
}

/* 卡片内重复子选项 */
.batch-card-footer {
    padding: 6px 12px 8px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #f0f2f5;
    background: #fafbfc;
    border-radius: 0 0 10px 10px;
}

.batch-card-toggle {
    background: transparent;
    border: 1px solid #dcdfe6;
    color: #4a5560;
    padding: 3px 10px;
    border-radius: 14px;
    font-size: 0.78rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}

.batch-card-toggle:hover {
    border-color: var(--primary, #4a90d9);
    color: var(--primary, #4a90d9);
}

.batch-card.batch-card-expanded .batch-card-toggle {
    background: var(--primary, #4a90d9);
    color: white;
    border-color: var(--primary, #4a90d9);
}

.batch-card-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 2px;
    font-size: 0.82rem;
    color: #606266;
    flex-wrap: wrap;
}

.batch-card-sub label {
    white-space: nowrap;
}

.batch-card-sub input[type="number"] {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 3px 4px;
    font-size: 0.82rem;
    outline: none;
    width: 46px;
    box-sizing: border-box;
    text-align: center;
}

.batch-card-sub input[type="number"]:focus {
    border-color: var(--primary, #4a90d9);
}

.batch-card-sub .week-day-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 0.8rem;
    border-radius: 50%;
    background: #f0f2f5;
    border: 1px solid transparent;
    cursor: pointer;
    color: #4a5560;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.batch-card-sub .week-day-btn.active {
    background: var(--primary, #4a90d9);
    color: white;
    border-color: var(--primary, #4a90d9);
}

/* 卡片积分行 */
.batch-card-points-row {
    padding: 4px 12px 0;
    gap: 6px;
    flex-wrap: nowrap;
}

.batch-card-points-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.batch-card-points-values {
    display: flex;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.batch-card-pfield {
    display: flex;
    align-items: center;
    gap: 2px;
    background: #f7f8fb;
    border: 1px solid #ebeef3;
    border-radius: 5px;
    padding: 1px 5px;
    flex: 1 1 0;
    min-width: 0;
    height: 26px;
    box-sizing: border-box;
}

.batch-card-pfield span {
    font-size: 0.72rem;
    color: #909399;
    flex-shrink: 0;
    white-space: nowrap;
}

.batch-card-pfield input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.82rem;
    color: #2c3e50;
    width: 100%;
    min-width: 20px;
    padding: 2px 0;
    font-family: inherit;
}

/* 窄屏适配 */


/* 填写规则行内展开 */
.batch-rules-section {
    background: #f7f9fc;
    border: 1px solid #e6eaf0;
    border-radius: 8px;
    margin: 0 0 8px;
    overflow: hidden;
}

.batch-rules-content {
    padding: 10px 14px;
    font-size: 0.85rem;
    line-height: 1.65;
    color: #4a5560;
}

.batch-rules-content p {
    margin: 4px 0;
}

.batch-rules-content b {
    color: var(--primary, #4a90d9);
}

/* 积分奖惩 2x2 网格 */
.batch-points-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: #f7f8fb;
    padding: 10px;
    border-radius: 8px;
}

.batch-points-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.batch-points-cell label {
    font-size: 0.78rem;
    color: #606266;
    font-weight: 500;
}

.batch-points-cell .input-with-buttons {
    height: 30px;
}

/* 标题区域 - 保持原有样式，或根据需要微调间距 */
.score-header {
    /* 保持原有的样式 */
    /* margin-bottom: 10px; */
    /* display: flex; */
    /* flex-direction: column; */
    /* gap: 5px; */
    margin-bottom: 10px; /* 恢复或保持原有间距 */
}

/* 主标题 - 用于包含图标、考试名称和年级学期信息 */
.score-main-title {
    /* 保持原有的样式 */
    /* font-size: 1.4rem; */
    /* font-weight: 700; */
    /* color: #2c3e50; */
    /* margin-bottom: 5px; */
    /* display: flex; */
    /* align-items: center; */
    /* gap: 10px; */
    display: flex; /* 使用 flex 布局 */
    align-items: center; /* 垂直居中对齐 */
    gap: 8px; /* 图标、名称、年级学期之间的间距 */
    margin-bottom: 5px; /* 恢复或保持原有间距 */
}

.score-main-title i {
    /* 保持原有的样式 */
    /* color: #4b6cb7; */
}

/* 新增：包裹考试名称的文本，确保它占据剩余空间或与后面元素对齐 */
.exam-name-text {
    font-size: inherit; /* 继承父级 .score-main-title 的字体大小 */
    font-weight: inherit; /* 继承父级 .score-main-title 的字重 */
    color: inherit; /* 继承父级 .score-main-title 的颜色 */
    flex: 1; /* (可选) 让考试名称文字占据剩余空间，但这可能会把年级学期推到右边很远 */
    /* 如果不想要 flex: 1，就只用下面的 white-space */
    white-space: nowrap; /* 防止考试名称换行 */
}

/* 新增：内联年级学期容器，紧跟在考试名称后面 */
.score-grade-semester-inline {
    display: flex;
    gap: 6px; /* 年级和学期标签之间的间距 */
    /* margin-left: auto; */ /* 移除这行，防止推到最右侧 */
    align-self: center; /* 确保与主标题文字垂直居中对齐 */
}

/* 年级标签样式 - 保持不变 */
.grade-label {
    background-color: #e0e7ff; /* 淡蓝色底色 */
    color: #4f46e5; /* 深蓝色文字 */
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem; /* 较小的字体 */
    font-weight: 500;
    white-space: nowrap; /* 防止标签换行 */
}

/* 学期标签样式 - 保持不变 */
.semester-label {
    background-color: #f0fdf4; /* 淡绿色底色 */
    color: #16a34a; /* 深绿色文字 */
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem; /* 较小的字体 */
    font-weight: 500;
    white-space: nowrap; /* 防止标签换行 */
}

/* 副标题 (考试日期、考试类型) - 保持原有样式 */
.score-subtitle {
    /* 保持原有的样式 */
    /* display: flex; */
    /* gap: 20px; */
    /* color: var(--text-light); */
    /* font-size: 0.9rem; */
    display: flex;
    gap: 15px;
    color: var(--text-light);
    font-size: 0.85rem;
    /* align-self: flex-start; */ /* 可以移除这行，因为 .score-header 不再是 flex-column */
}

/* (如果之前没有定义) 确保卡片内容区域有足够的宽度 */
.score-data-display-area {
    /* 保持原有的样式 */
    /* width: 70%; */
    /* padding: 15px; */
    /* display: flex; */
    /* flex-direction: column; */
    width: 100%; /* 或根据需要调整 */
    padding: 15px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box; /* 确保 padding 不会增加总宽度 */
}
/* 为筛选器容器添加更一致的样式 */
.score-filters {
    background-color: var(--card-bg, #f8f9fa) !important; /* 确保背景色 */
    border-radius: 8px !important; /* 确保圆角 */
    padding: 10px !important; /* 确保内边距 */
    /* 保持 display: flex; gap: 10px; align-items: center; margin-bottom: 20px; */
}

/* 为筛选器中的标签添加样式 */
.score-filters label {
    font-size: 0.9rem; /* 或根据需要调整 */
    color: var(--text-light, #6c757d); /* 使用与页面一致的浅色文字 */
    margin: 0; /* 重置默认margin */
    white-space: nowrap; /* 防止标签换行 */
}

/* 为筛选器中的下拉框添加样式 */
.score-filters select {
    padding: 6px 8px !important; /* 稍微增加内边距 */
    border: 1px solid var(--border-color, #ced4da) !important; /* 使用CSS变量或默认边框色 */
    border-radius: 4px !important; /* 确保圆角 */
    font-size: 0.9rem; /* 与标签保持一致 */
    background-color: var(--input-bg, #fff); /* 使用CSS变量或默认背景色 */
    color: var(--input-text, #212529); /* 使用CSS变量或默认文字色 */
    min-width: 0; /* 允许收缩 */
    flex: 1; /* 允许下拉框伸缩以适应内容或空间 */
    /* max-width: 120px; 可选：限制最大宽度 */
}

/* 为重置按钮添加样式，使其与页面按钮风格一致 */
#resetScoreFilters {
    padding: 6px 12px !important; /* 调整内边距，与页面其他按钮一致 */
    margin-left: 5px !important; /* 紧挨着科目下拉框 */
    background-color: var(--secondary, #6c757d) !important; /* 使用与页面一致的次要按钮颜色 */
    color: white !important; /* 按钮文字颜色 */
    border: none !important; /* 移除默认边框 */
    border-radius: 4px !important; /* 确保圆角 */
    cursor: pointer !important; /* 鼠标悬停指针 */
    font-size: 0.85rem; /* 比主按钮稍小 */
    transition: background-color 0.2s; /* 添加悬停过渡效果 */
}

#resetScoreFilters:hover {
    background-color: #5a6268 !important; /* 悬停时更深的次要按钮颜色 */
}
/* ===== 手机端：一行两筛 ===== */

/* ========= 手机端：日期两栏 + 按钮同排 ========= */


    /* --- 新增：积分兑换页面样式 --- */
    .points-exchange-content {
        padding: 0px;
        width: 100%; /* 占据父级宽度的100% */
        margin: 0; /* 移除左右外边距 */
        box-sizing: border-box; /* 确保padding不会增加总宽度 */
    }

    .tabs {
        display: flex;
        margin-bottom: 20px;
    }

    .tab-btn {
        padding: 10px 20px;
        background: #f0f0f0;
        border: none;
        cursor: pointer;
        border-radius: 5px 5px 0 0;
        margin-right: 5px;
    }

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

    .tab-content {
        display: none;
    }

    .tab-content.active {
        display: block;
    }

    .points-records-table {
        width: 100%;
        border-collapse: collapse;
    }

    .points-records-table th,
    .points-records-table td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    .points-records-table th {
        background-color: #f2f2f2;
    }

    .rewards-header {
        margin-bottom: 20px;
    }

    .rewards-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
    }

    .reward-item .icon {
        font-size: 2em;
        margin-bottom: 10px;
    }

    .reward-item h4 {
        margin: 10px 0 5px 0;
    }

    .reward-item p {
        color: #666;
        font-size: 0.9em;
        margin: 5px 0;
    }

    .reward-item .cost {
        font-weight: bold;
        color: var(--primary);
    }
    /* --- 新增结束 --- */
/* --- 新增：奖励卡片兑换次数徽章样式 --- */
/* ===== 积分兑换奖励卡片 ===== */
.rewards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px 8px;
}

.rwd-card {
    position: relative;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.05);
}
.rwd-bar {
    height: 5px;
    width: 100%;
}
.rwd-body {
    padding: 20px 16px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.rwd-icon-wrap {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    transition: transform 0.3s ease;
}
.rwd-card:hover .rwd-icon-wrap { transform: scale(1.08); }
.rwd-icon-wrap i { font-size: 30px; }
.rwd-name {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
    line-height: 1.3;
}
.rwd-desc {
    font-size: 0.78rem;
    color: #94a3b8;
    margin-bottom: 14px;
    line-height: 1.4;
    min-height: 1.4em;
}
.rwd-cost {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 14px;
}
.rwd-cost span {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--accent, #8b5cf6);
}
.rwd-btn {
    width: 100%;
    padding: 10px 0;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
}
.rwd-btn-buy {
    background: linear-gradient(135deg, var(--accent, #8b5cf6), var(--bar, #7c3aed));
    color: #fff;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}
.rwd-btn-buy:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(139, 92, 246, 0.4);
}
.rwd-btn-locked {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}
.rwd-btn-disabled {
    background: #f1f5f9;
    color: #cbd5e1;
    cursor: not-allowed;
}
.rwd-count {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--accent, #8b5cf6);
    color: #fff;
    border-radius: 50%;
    width: 26px; height: 26px;
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    border: 2px solid #fff;
}
.rwd-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.1);
}

/* ---- 隐藏旧样式 ---- */
.reward-item, .exchange-count-badge, .reward-item::before,
.reward-item .icon, .reward-item h4, .reward-item p,
.reward-item .cost, .reward-item .btn,
.reward-item:hover .icon i { display: none; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }

/* --- 响应式调整 --- */



/* --- 新增：统计卡片设置模态框样式 --- */
/* ★ 2026-08-18 z-index 1000→2000：操作弹窗必须高于 header（1050），否则被顶栏盖住无法操作 */
#cardVisibilityModal {
    display: none; /* 默认隐藏 */
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
}

#cardVisibilityModal .modal-content {
    background-color: var(--card-bg, white);
    margin: 10% auto;
    border: 1px solid var(--border, #ccc);
    border-radius: 12px;
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#cardVisibilityModal .modal-header {
    /* 使用标准 .modal-header 样式，与添加新勋章等弹窗保持一致 */
    border-bottom: none;
}

/* 提示条视觉样式已统一到上方「.card-layout-hint, #cardVisibilityModal .modal-description」
   组合规则里，这里只负责内部排版（图标与文字的对齐） */
#cardVisibilityModal .modal-description p {
    margin: 0;
    font-size: inherit;
    color: inherit;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

#cardVisibilityModal .modal-description i {
    color: var(--primary, #4b6cb7);
}

#cardVisibilityModal .modal-header h3 {
    margin: 0;
}

#cardVisibilityModal .modal-body {
    max-height: 60vh; /* 设置最大高度，可滚动 */
    overflow-y: auto;
    padding-right: 5px; /* 为滚动条留出空间 */
}

#cardVisibilityModal .visibility-options {
    display: flex;
    flex-direction: column;
    gap: 10px; /* 选项之间的间距 */
}

#cardVisibilityModal .visibility-option {
    display: flex;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--border, #ddd);
    border-radius: 4px;
    background-color: var(--light-bg, #f9f9f9); /* 使用主题浅色背景 */
}

#cardVisibilityModal .visibility-option label {
    margin-left: 10px; /* 复选框和文字之间的间距 */
    cursor: pointer;
    flex-grow: 1; /* 让文字占据剩余空间 */
    color: var(--text, #333);
}

#cardVisibilityModal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    border-top: 1px solid var(--border, #ccc);
    padding-top: 15px;
}

#cardVisibilityModal .btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}

#cardVisibilityModal .btn-primary {
    background-color: var(--primary, #007bff);
    color: white;
}

#cardVisibilityModal .btn-secondary {
    background-color: var(--secondary, #6c757d);
    color: white;
}

#cardVisibilityModal .btn:hover {
    opacity: 0.9;
}

#cardVisibilityModal .drag-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;
}

#cardVisibilityModal .drag-area {
    flex: 1;
    border: 2px dashed var(--border, #e0e0e0);
    border-radius: 12px;
    padding: 15px;
    min-height: 150px;
    position: relative;
    transition: all 0.3s ease;
    overflow-y: auto;
}

#cardVisibilityModal .drag-area-title {
    font-size: 0.95rem;
    font-weight: bold;
    color: var(--text, #333);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#cardVisibilityModal .drag-area-title i {
    color: var(--primary, #4b6cb7);
}

#cardVisibilityModal .drag-area-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
    gap: 6px;
}

#cardVisibilityModal .visibility-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    border-radius: 6px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e0e0e0);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 60px;
    min-height: 60px;
    user-select: none;
}

#cardVisibilityModal .visibility-card:hover {
    border-color: var(--primary, #4b6cb7);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

#cardVisibilityModal .visibility-card.in-visible-area {
    border-color: var(--primary, #4b6cb7);
    background: rgba(75, 108, 183, 0.05);
}

#cardVisibilityModal .visibility-card.in-hidden-area {
    border-color: #ddd;
    background: #f9f9f9;
    opacity: 0.85;
}

#cardVisibilityModal .visibility-card-icon {
    font-size: 16px;
    margin-bottom: 3px;
    color: var(--text, #333);
    transition: transform 0.2s ease;
}

#cardVisibilityModal .visibility-card:hover .visibility-card-icon {
    transform: scale(1.1);
}

#cardVisibilityModal .visibility-card-name {
    font-size: 0.6rem;
    color: var(--text, #333);
    text-align: center;
    line-height: 1.2;
    margin-bottom: 3px;
}

#cardVisibilityModal .drag-area-empty {
    text-align: center;
    color: #999;
    
    font-size: 0.85rem;
}

#cardVisibilityModal .visibility-card.dragging {
    opacity: 0.5;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

#cardVisibilityModal .drag-area-grid.drag-over {
    background: rgba(75, 108, 183, 0.08);
    border: 2px dashed var(--primary, #4b6cb7);
    border-radius: 8px;
}

#cardVisibilityModal .visibility-card-enter {
    margin-top: 2px;
    padding: 2px 6px;
    background: var(--primary, #4b6cb7);
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 0.55rem;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    gap: 2px;
}

#cardVisibilityModal .visibility-card-enter:hover {
    background: #3a5f9b;
}

/* === 卡片管理 - 勾选模式（复用 onboarding 勾选风格） === */
#cardVisibilityModal .card-manage-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
    padding: 5px 0;
}
#cardVisibilityModal .card-manage-item {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 10px 6px;
    background: var(--card-bg, #fff);
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 6px;
    user-select: none;
}
#cardVisibilityModal .card-manage-item:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}
#cardVisibilityModal .card-manage-checkbox {
    display: none;
}
#cardVisibilityModal .card-manage-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text, #475569);
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 8px 4px;
    min-height: 60px;
    justify-content: center;
    transition: all 0.2s ease;
}
#cardVisibilityModal .card-manage-checkbox:checked + .card-manage-box {
    background: linear-gradient(135deg, rgba(75,108,183,0.1) 0%, rgba(75,108,183,0.05) 100%);
    border-color: var(--primary, #4B6CB7);
    box-shadow: 0 0 0 3px rgba(75,108,183,0.1);
}
#cardVisibilityModal .card-manage-item.is-unchecked .card-manage-box {
    opacity: 0.55;
}
#cardVisibilityModal .card-manage-box i.card-icon {
    font-size: 1.4rem;
}
#cardVisibilityModal .card-manage-name {
    text-align: center;
    line-height: 1.2;
}
/* 勾选标记 */
#cardVisibilityModal .card-manage-checkmark {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s ease;
}
#cardVisibilityModal .card-manage-checkbox:checked + .card-manage-box .card-manage-checkmark {
    opacity: 1;
    background: var(--primary, #4B6CB7);
}
#cardVisibilityModal .card-manage-checkmark i {
    font-size: 0.7rem;
    color: #fff;
}
/* "进入"按钮 */
#cardVisibilityModal .card-enter-btn {
    margin-top: 2px;
    padding: 2px 8px;
    background: var(--primary, #4b6cb7);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.6rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
#cardVisibilityModal .card-enter-btn:hover { background: #3a5f9b; }

/* === 排序模式 === */
#cardVisibilityModal .card-manage-grid.sort-mode .card-manage-item {
    cursor: default;
}
#cardVisibilityModal .card-manage-grid.sort-mode .card-manage-checkmark,
#cardVisibilityModal .card-manage-grid.sort-mode .card-enter-btn {
    display: none;
}
#cardVisibilityModal .card-manage-grid.sort-mode .card-manage-box {
    opacity: 1 !important;
}
#cardVisibilityModal .card-sort-arrows {
    display: none;
    flex-direction: row;
    gap: 4px;
    margin-top: 4px;
}
#cardVisibilityModal .card-manage-grid.sort-mode .card-sort-arrows {
    display: flex;
}
#cardVisibilityModal .card-sort-arrow {
    padding: 3px 8px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 0.6rem;
    color: var(--text, #475569);
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
#cardVisibilityModal .card-sort-arrow:hover:not(:disabled) {
    background: var(--primary, #4b6cb7);
    color: #fff;
    border-color: var(--primary, #4b6cb7);
}
#cardVisibilityModal .card-sort-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* 手机端五列 */
@media (max-width: 480px) {
    #cardVisibilityModal .card-manage-grid { grid-template-columns: repeat(5, 1fr); }
}

/* --- 新增结束 --- */
/* --- 新增：用于控制卡片显隐的CSS类 --- */
/* 这个类用于隐藏卡片，同时尽量不干扰其原有的flex布局属性 */


/* 星星评分样式 */
.star-rating {
    display: inline-flex;
    gap: 5px;
}

.star-rating .star {
    cursor: pointer;
    font-size: 20px;
    color: #ddd; /* 默认灰色 */
    transition: color 0.2s ease;
}

.star-rating .star:hover, 
.star-rating .star.selected {
    color: #FFD700; /* 选中时的金色 */
}

.star-rating .star:hover ~ .star {
    color: #ddd; /* 确保只高亮悬停及之前的星星 */
}

/* 评分项布局 */
.rating-item {
    display: flex;
    align-items: center;
}

.stat-card.card-hidden {
    display: none !important;
}

/* --- 积分兑换页面标签页美化 --- */
/* 标签容器 */
.points-exchange-content .tabs {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 2px solid #e0e0e0; /* 添加一个底部边框作为分隔 */
    /* 如果希望标签有背景色，可以取消下面一行的注释 */
    /* background-color: #f8f9fa; */
    /* padding: 5px; */ /* 如果添加了背景色，可能需要内边距 */
}

/* 标签按钮基础样式 */
.points-exchange-content .tab-btn {
    /* 渐变背景 */
    background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
    color: #4a6572; /* 默认文字颜色 */
    border: none; /* 移除默认边框 */
    border-bottom: 3px solid transparent; /* 为选中状态的下边框预留空间，初始透明 */
    cursor: pointer;
    padding: 12px 24px; /* 调整内边距，使其更饱满 */
    margin: 0; /* 移除默认外边距，使其紧贴 */
    font-size: 1rem; /* 调整字体大小 */
    font-weight: 500; /* 字体粗细 */
    text-align: center; /* 文字居中 */
    transition: all 0.3s ease; /* 平滑过渡效果 */
    border-radius: 8px 8px 0 0; /* 只有顶部有圆角 */
    position: relative; /* 为可能的装饰效果准备 */
    z-index: 1; /* 确保层级 */
    /* 防止文字选中（可选） */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 标签按钮悬停效果 */
.points-exchange-content .tab-btn:hover:not(.active) {
    background: linear-gradient(135deg, #e2eaf2 0%, #c5d5e4 100%); /* 悬停时的渐变 */
    color: #2b3e4d; /* 悬停时的文字颜色 */
    transform: translateY(-1px); /* 悬停时轻微上移 */
}

/* 选中状态的标签按钮 */
.points-exchange-content .tab-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 与奖励卡片风格一致的渐变 */
    color: white; /* 选中时的文字颜色 */
    border-bottom-color: #764ba2; /* 选中时的下边框颜色，与渐变底部颜色一致 */
    /* 可选：增加选中时的阴影 */
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* 确保在移动端标签也能适应 */

/* --- 统一按钮响应式样式 (仅针对手机) --- */


/* --- 积分记录表格响应式优化 --- */
.points-records-table {
    width: 100%; /* 确保表格占满容器宽度 */
    table-layout: fixed; /* 固定布局，确保列宽按照百分比分配 */
    border-collapse: collapse; /* 合并边框，使表格更紧凑 */
    word-wrap: break-word; /* 允许单元格内容换行 */
    overflow-wrap: break-word;
}

/* 移除水平滚动，确保表格不超出容器 */
#recordsTab {
    overflow-x: hidden;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

/* 确保积分兑换内容容器也不产生横向滚动 */
.points-exchange-content {
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
}

/* 调整列宽分配，按照要求分配各列宽度 */
.points-records-table th:nth-child(1),
.points-records-table td:nth-child(1) {
    width: 15%; /* 任务所属日期 */
    text-align: center;
}
.points-records-table th:nth-child(2),
.points-records-table td:nth-child(2) {
    width: 20%; /* 操作时间 */
    text-align: center;
}
.points-records-table th:nth-child(3),
.points-records-table td:nth-child(3) {
    width: 20%; /* 任务名称 */
    text-align: left;
    /* 允许内容换行 */
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}
.points-records-table th:nth-child(4),
.points-records-table td:nth-child(4) {
    width: 15%; /* 打卡结果 */
    text-align: center;
    white-space: normal;
}
.points-records-table th:nth-child(5),
.points-records-table td:nth-child(5) {
    width: 15%; /* 积分变动 */
    text-align: center;
    font-weight: bold;
    white-space: normal;
}
.points-records-table th:nth-child(6),
.points-records-table td:nth-child(6) {
    width: 15%; /* 余额 */
    text-align: center;
    font-weight: bold;
    white-space: normal;
}

/* 调整样式，确保文字不与线条重叠 */
.points-records-table th,
.points-records-table td {
    font-size: 0.9rem; /* 适当的字体大小 */
    padding: 8px 10px;    /* 适当增大内边距，避免文字与线条重叠 */
    border: 1px solid #e0e0e0; /* 确保边框清晰 */
    vertical-align: top; /* 顶部对齐，便于内容换行显示 */
    white-space: normal; /* 允许内容换行 */
    word-break: break-word; /* 允许长单词换行 */
}

/* 确保表头文字居中，避免与线条重叠 */
.points-records-table th {
    background-color: #f8f9fa;
    text-align: center;
    font-weight: bold;
    padding: 10px;
    white-space: normal; /* 允许表头文字换行，避免溢出 */
    word-break: break-word; /* 允许表头长文字换行 */
}

/* 响应式调整 */

/* --- 积分记录分页样式 --- */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px; /* 按钮之间的间距 */
}

/* ★ 2026-08-14 书架分页：底部容器留白 + 省略号 + 页信息（复用 .pagination-btn 样式） */
.lib-pagination {
    margin: 14px 0 6px;
    flex-wrap: wrap;
}
.pagination-ellipsis {
    margin: 0 4px;
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1;
}
.lib-page-info {
    margin-left: 10px;
    font-size: 0.85rem;
    color: #888;
    white-space: nowrap;
}

.pagination-btn {
    padding: 8px 12px;
    margin: 0 2px; /* 按钮左右外边距 */
    border: 1px solid #ddd; /* 边框 */
    background-color: #f8f9fa; /* 背景色 */
    color: #007bff; /* 文字颜色 */
    cursor: pointer;
    border-radius: 4px; /* 圆角 */
    font-size: 0.9rem; /* 字体大小 */
    transition: background-color 0.2s, color 0.2s; /* 过渡效果 */
}

.pagination-btn:hover:not(:disabled) {
    background-color: #e9ecef; /* 悬停背景色 */
    color: #0056b3; /* 悬停文字颜色 */
}

.pagination-btn:disabled {
    color: #6c757d; /* 禁用时文字颜色 */
    cursor: not-allowed; /* 禁用时鼠标样式 */
    opacity: 0.6; /* 禁用时透明度 */
}

.pagination-btn.page-number.active {
    background-color: #007bff; /* 当前页按钮背景色 */
    color: white; /* 当前页按钮文字颜色 */
    border-color: #007bff; /* 当前页按钮边框色 */
}

.pagination-btn.page-number.active:hover {
    background-color: #0056b3; /* 当前页按钮悬停背景色 */
}
/* --- 新增：任务卡片积分变动标志样式 --- */
.points-change-badge {
    font-size: 0.8em; /* 较小的字体 */
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 4px; /* 轻微圆角 */
    margin-left: 5px; /* 与任务名称保持一点距离 */
    vertical-align: middle; /* 与文字垂直对齐 */
    display: inline-block; /* 确保样式生效 */
    min-width: 20px; /* 设置最小宽度，保持视觉一致性 */
    text-align: center; /* 文字居中 */
    box-sizing: border-box; /* 包含padding和border在宽高内 */
    white-space: nowrap; /* 确保文本不换行，+-号与分值始终在同一行 */
}

.points-gained {
    color: #27ae60; /* 绿色，表示加分 */
    background-color: #d5f5e3; /* 浅绿色背景 */
    border: 1px solid #a8e6a1; /* 可选：添加边框 */
}

.points-lost {
    color: #e74c3c; /* 红色，表示减分 */
    background-color: #fadbd8; /* 浅红色背景 */
    border: 1px solid #e2a7a3; /* 可选：添加边框 */
}
/* --- 新增结束 --- */

/* ===== 时间储蓄罐样式 ===== */
.timebank-main-content {
    display: flex;
    gap: 20px;
    margin: 20px 0;
    align-items: stretch;
    flex-wrap: wrap;
}

.timebank-left-column {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
}

.timebank-jar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.timebank-jar-container svg {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.12));
}

.timebank-right-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 450px;
}

.timebank-cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.timebank-stat-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 4px 8px var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
    min-height: 100px;
}

.timebank-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--shadow);
}

.timebank-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--time-bank-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--time-bank);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.timebank-icon-principal {
    background: rgba(255, 193, 7, 0.15);
    color: #FFC107;
}

.timebank-icon-interest {
    background: rgba(76, 175, 80, 0.15);
    color: var(--success);
}

.timebank-stat-deposit .timebank-stat-icon {
    background: rgba(76, 175, 80, 0.15);
    color: var(--success);
}

.timebank-stat-exchange .timebank-stat-icon {
    background: rgba(33, 150, 243, 0.15);
    color: #1976D2;
}

.timebank-stat-deduction .timebank-stat-icon {
    background: rgba(244, 67, 54, 0.15);
    color: var(--danger);
}

.timebank-stat-label {
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.2;
}

.timebank-stat-value {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--time-bank);
}

.timebank-stat-deposit .timebank-stat-value {
    color: var(--success);
}

.timebank-stat-exchange .timebank-stat-value {
    color: #1976D2;
}

.timebank-stat-deduction .timebank-stat-value {
    color: var(--danger);
}

.timebank-stat-subvalue {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 2px;
}

.timebank-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.timebank-action-btn {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    color: var(--text);
}

.timebank-action-btn:hover {
    background: var(--time-bank-light);
    border-color: var(--time-bank);
    transform: translateY(-2px);
}

.timebank-settings-btn,
.timebank-activity-btn {
    background: var(--time-bank);
    color: white;
    border: none;
}

.timebank-settings-btn:hover,
.timebank-activity-btn:hover {
    background: #6950D8;
}

.stats-header .timebank-settings-btn {
    background: var(--time-bank);
    color: white;
    border: none;
}

.stats-header .timebank-settings-btn:hover {
    background: #6950D8;
}

/* 时间储蓄罐页面顶部标题与设置按钮组合 */
.timebank-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.timebank-header-left h2 {
    margin: 0;
    white-space: nowrap;
}

.timebank-records-section {
    margin-top: 25px;
}

/* 标签页容器 */
.timebank-tabs {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border);
    gap: 5px;
    flex-wrap: wrap;
}

/* 标签按钮 */
.timebank-tab-btn {
    padding: 10px 20px;
    background: var(--time-bank-light);
    color: var(--time-bank);
    border: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.timebank-tab-btn:hover:not(.active) {
    background: #DDD4F5;
}

.timebank-tab-btn.active {
    background: var(--time-bank);
    color: white;
}

/* 标签内容 */
.timebank-tab-content {
    display: none;
    background: var(--card-bg);
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 8px var(--shadow);
}

.timebank-tab-content.active {
    display: block;
}

/* 记录统计摘要 */
.timebank-record-summary {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 8px;
}

.timebank-deposit-summary {
    background: rgba(76, 175, 80, 0.1);
}

.timebank-deduction-summary {
    background: rgba(244, 67, 54, 0.1);
}

.timebank-record-summary .summary-label {
    font-size: 0.9rem;
    color: var(--text-light);
}

.timebank-record-summary .summary-value {
    font-size: 1.1rem;
    font-weight: bold;
}

.timebank-deposit-summary .summary-value {
    color: var(--success);
}

.timebank-deduction-summary .summary-value {
    color: var(--danger);
}

.timebank-record-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.timebank-record-table th {
    background: var(--time-bank-light);
    color: var(--time-bank);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    border-radius: 8px 8px 0 0;
}

.timebank-record-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.timebank-record-table tbody tr:last-child td {
    border-bottom: none;
}

.timebank-record-table tbody tr:hover {
    background: rgba(105, 80, 216, 0.05);
}

.timebank-section {
    margin-top: 25px;
}

.timebank-section h3 {
    color: var(--text);
    font-size: 1.1rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.timebank-exchange-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.exchange-item {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    box-shadow: 0 4px 8px var(--shadow);
    transition: transform 0.2s;
    cursor: pointer;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 100px;
}

.exchange-item:hover {
    transform: translateY(-3px);
}

.exchange-item.available {
    border-color: var(--time-bank);
}

.exchange-item.unavailable {
    opacity: 0.5;
    cursor: not-allowed;
}

.exchange-item-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: rgba(75, 108, 183, 0.15);
    color: var(--time-bank);
}

.exchange-item-name {
    font-weight: bold;
    font-size: 0.95rem;
    color: var(--text);
}

.exchange-item-time {
    font-size: 0.8rem;
    color: var(--text-light);
}

.add-activity-btn {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 16px 12px;
    border: 2px dashed var(--primary);
    color: var(--primary);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 100px;
    transition: all 0.3s;
    box-shadow: 0 4px 8px var(--shadow);
}

.add-activity-btn:hover {
    border-style: solid;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px var(--shadow);
}

.add-activity-btn i {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: rgba(75, 108, 183, 0.15);
}

.add-activity-btn span {
    font-weight: bold;
    font-size: 0.95rem;
}

.exchange-do-btn {
    width: 100%;
    padding: 8px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: var(--time-bank, #1abc9c);
    color: #fff;
    transition: all 0.2s;
    margin-top: 4px;
}
.exchange-do-btn:hover { opacity: 0.9; transform: scale(1.02); }
.exchange-do-btn:disabled {
    background: #ccc; color: #999; cursor: not-allowed;
}

.activity-manage-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: var(--light-bg);
    border-radius: 8px;
    margin-bottom: 8px;
}

.record-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid var(--border);
}

.record-item:last-child {
    border-bottom: none;
}

.record-info {
    flex: 1;
}

.record-date {
    font-size: 0.8rem;
    color: var(--text-light);
}

.record-amount {
    font-weight: bold;
    font-size: 1.1rem;
}

.record-amount.deposit {
    color: var(--success);
}

.record-amount.exchange {
    color: var(--danger);
}

.focus-deposit-section,
.focus-timebank-section {
    grid-column: span 2;
    margin-top: 15px;
    padding: 15px;
    background: var(--time-bank-light);
    border-radius: 10px;
    text-align: center;
}

.focus-deposit-btn {
    background: var(--time-bank);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 25px;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}

.focus-deposit-btn:hover:not(:disabled) {
    background: #6950D8;
}

.focus-deposit-btn:disabled,
.focus-deposit-btn.focus-deposit-btn-done {
    background: #8bc34a;
    cursor: not-allowed;
    opacity: 0.9;
}

#timeBankCard p {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.3;
}


/* 响应式布局：中等屏幕 */


/* 响应式布局：小屏设备（手机） */


/* Toast提示样式 */
.toast-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px 30px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    min-width: 220px;
    text-align: center;
}

.toast-container.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.toast-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 4px;
}

.toast-message {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* ===== 时间储蓄罐样式结束 ===== */

/* ========== CSS 块 2 ========== */

        #scorePreviewBody .form-group{margin-bottom:12px}
        #scorePreviewBody input, #scorePreviewBody textarea, #scorePreviewBody select{
          background:#f7f7f7;
          border:none;
          pointer-events:none; /* 确保所有元素只读 */
        }

/* ========================================
   课程管理模块样式 (CourseManager)
   ======================================== */

/* ---- 视图切换 Tab ---- */
.tt-view-tabs {
    display: flex;
    gap: 4px;
    padding: 0 0 12px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 12px;
}
.tt-view-tab {
    padding: 8px 20px;
    border: none;
    background: none;
    color: var(--text-light);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    border-radius: 4px 4px 0 0;
}
.tt-view-tab:hover {
    color: var(--primary);
    background: var(--bg-hover, rgba(0,0,0,0.04));
}
.tt-view-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* ---- 顶部导航栏 ---- */
.timetable-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}
.timetable-week-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}
.timetable-nav-btn {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--text);
    font-size: 13px;
    transition: all 0.2s;
}
.timetable-nav-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.timetable-today-btn {
    font-weight: 600;
    margin-left: 4px;
}
.tt-sync-btn {
    padding: 6px 12px;
    border: 1px solid var(--primary);
    border-radius: 6px;
    background: #fff;
    color: var(--primary);
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
}
.tt-sync-btn:hover {
    background: var(--primary);
    color: #fff;
}
.timetable-week-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    padding: 0 8px;
    min-width: 180px;
    text-align: center;
}
.tt-mgmt-filter {
    display: flex;
    align-items: center;
    gap: 12px;
}
.tt-mgmt-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

/* ---- 周课程表网格 ---- */
.timetable-grid-wrapper {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--shadow);
    padding: 12px;
    margin-bottom: 20px;
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
    -webkit-overflow-scrolling: touch;
}
.timetable-grid {
    display: grid;
    grid-template-columns: 80px repeat(7, minmax(0, 1fr));
    grid-auto-rows: minmax(56px, auto);
    gap: 4px;
    align-items: start;
    padding: 4px;
    background: var(--bg-gray, #f5f5f5);
    border-radius: 8px;
    overflow: hidden;
}

/* ★ 2026-08-24 显示周末勾选框 */
.tt-show-weekends {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-light);
    cursor: pointer;
    margin-left: 8px;
    user-select: none;
    white-space: nowrap;
}
.tt-show-weekends input {
    accent-color: var(--primary, #4b6cb7);
    cursor: pointer;
}
.timetable-empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-light);
}
.timetable-empty-state i {
    font-size: 48px;
    opacity: 0.3;
    margin-bottom: 12px;
}
.timetable-empty-state p {
    font-size: 14px;
    margin: 0;
}

/* 表头 */
.tt-grid-header {
    display: contents;
}
.tt-corner-cell {
    font-size: 12px;
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}
.tt-day-header {
    text-align: center;
    padding: 6px 0;
    border-radius: 8px;
    background: var(--light-bg);
}
.tt-day-header.tt-today {
    background: var(--today-bg);
}
.tt-day-name {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}
.tt-day-date {
    display: block;
    font-size: 11px;
    color: var(--text-light);
}

/* 时间行 */
.tt-time-row {
    display: contents;
}
.tt-time-label {
    font-size: 11px;
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    white-space: pre-line;
    text-align: center;
    padding: 4px;
    font-weight: 600;
}

/* 节次行左侧标签 */
.tt-section-label {
    padding: 4px 6px;
    text-align: center;
    font-size: 12px;
    color: var(--text);
    background: #fff;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.tt-section-label .tt-section-name {
    font-weight: 600;
    font-size: 13px;
}
.tt-section-label .tt-section-time {
    font-size: 10px;
    color: var(--text-light);
    margin-top: 2px;
}

/* 课外行左侧标签（灰色区分） */
.tt-external-label {
    padding: 4px 6px;
    text-align: center;
    font-size: 12px;
    color: var(--text-light);
    background: var(--bg-gray, #f9f9f9);
    border-radius: 4px;
    border: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.tt-external-label .tt-external-name {
    font-size: 11px;
    color: var(--text-light);
}
.tt-external-label .tt-external-time {
    font-size: 10px;
    color: var(--text-light);
    margin-top: 2px;
}
.tt-day-cell {
    /* ★ 2026-08-20 修复：min-height 0 + overflow hidden + height 100%，
       grid-auto-rows:60px 强制生效，有内容卡片/加号按钮都不会撑破行高 */
    min-height: 0;
    height: 100%;
    border-radius: 8px;
    background: var(--light-bg);
    padding: 4px;
    /* ★ 2026-08-18 方案X：卡片 flex 填满格子（合并格整格填充，不再 absolute 溢出） */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}
.tt-day-cell.tt-today-cell {
    background: var(--today-bg);
}
/* ★ 2026-08-18 方案X：合并格（跨多行的格子）虚线外框强调 */
.tt-day-cell.tt-merged-cell {
    border: 1.5px dashed var(--primary, #4b6cb7);
    box-sizing: border-box;
}

/* 课程事件卡片 */
.tt-event-card {
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 1px 4px var(--shadow);
    padding: 5px 8px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    /* ★ 2026-08-20 重新设计：填满格子且不撑破行高；内容垂直居中规范排布 */
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-left-width: 4px;
    position: relative;
}

/* 注意：status-* 类（下文）特异性相同，会覆盖此处 background/border-color，
   这是设计预期：状态视觉优先于类型区分 */
/* 校内课程卡片 — 背景填充 */
.tt-event-card.tt-school-card {
    background: color-mix(in srgb, var(--card-color, #4b6cb7) 15%, white);
    border: none;
    border-left: 4px solid var(--card-color, #4b6cb7);
    border-radius: 6px;
}

/* 校外课程卡片 — 白色 + 描边 */
.tt-event-card.tt-external-card {
    background: #fff;
    border: 1px solid var(--border);
    border-left: 4px solid var(--card-color, #e67e22);
    border-radius: 6px;
    box-shadow: 0 1px 3px var(--shadow);
}

/* 校外卡片内时间标签 */
.tt-card-time {
    font-size: 10px;
    color: var(--text-light);
    margin-bottom: 2px;
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
    padding: 0 5px;
    line-height: 1.6;
    align-self: flex-start;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 校外卡片课时进度 */
.tt-card-hours {
    font-size: 10px;
    color: var(--text-light);
    margin-top: 4px;
}
.tt-card-progress-bar {
    height: 3px;
    background: var(--border);
    border-radius: 2px;
    margin-top: 2px;
    overflow: hidden;
}
.tt-card-progress-fill {
    height: 100%;
    background: var(--card-color, #e67e22);
    border-radius: 2px;
    transition: width 0.3s;
}

/* 校外卡片打卡按钮 */
.tt-card-checkin {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: var(--card-color, #e67e22);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tt-card-checkin.tt-checked {
    background: var(--success, #2ecc71);
}
.tt-event-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
}
.tt-event-card.status-checked {
    background: rgba(92, 184, 92, 0.08);
    border-color: rgba(92, 184, 92, 0.3);
}
.tt-event-card.status-missed {
    background: rgba(217, 83, 79, 0.06);
    border-color: rgba(217, 83, 79, 0.2);
}
.tt-event-card.status-abandoned {
    opacity: 0.5;
    background: var(--bg-gray, #f5f5f5);
}
.tt-card-name {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 12px;
}
.tt-card-name i {
    font-size: 15px;
    width: 16px;
    flex-shrink: 0;
    text-align: center;
}
.tt-card-loc {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--text-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tt-card-loc i {
    font-size: 11px;
    flex-shrink: 0;
}
.tt-note-icon {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 11px;
    color: var(--primary, #4b6cb7);
    background: rgba(75, 108, 183, 0.12);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 状态指示器小圆点 */
.tt-status-dot {
    position: absolute;
    bottom: 4px;
    right: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: none;
    box-shadow: 0 0 0 2px var(--card-bg, #fff);
}
.tt-status-dot.status-checked {
    display: block;
    background: #5CB85C;
}
.tt-status-dot.status-missed {
    display: block;
    background: #D9534F;
}
.tt-status-dot.status-abandoned {
    display: block;
    background: #999;
}

/* 空闲间隔行 */
.tt-idle-row {
    display: grid;
    grid-template-columns: 80px repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 4px;
}
.tt-idle-bar {
    grid-column: 1 / -1;
    height: 20px;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 6px,
        rgba(0,0,0,0.05) 6px,
        rgba(0,0,0,0.05) 12px
    );
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-light);
    border: 1px dashed var(--border);
}

/* ---- 课程管理视图 ---- */
.tt-mgmt-section {
    margin-bottom: 20px;
}
.tt-mgmt-count {
    font-size: 13px;
    color: var(--text-light);
    font-weight: 400;
}
.tt-course-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
/* ★ 2026-09-07 改造：课程管理内的课程卡片改为横向排列 + 根据屏幕宽度自动换行。
   默认 flex-basis 220px 在 iPad 横屏（~700px 可用区）下能放 3 列，桌面端 4~5 列，移动端 1~2 列。 */
.tt-course-grid > .tt-course-card {
    flex: 1 1 220px;
    min-width: 0;
    box-sizing: border-box;
}
.tt-mgmt-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-light);
}
.tt-mgmt-empty i {
    font-size: 48px;
    opacity: 0.3;
    margin-bottom: 12px;
}
.tt-mgmt-empty p {
    font-size: 14px;
    margin: 0;
}

/* 课时进度条（课程管理视图复用） */
.tt-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
}
.tt-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}
.tt-progress-text {
    font-size: 11px;
    color: var(--text-light);
    white-space: nowrap;
}

/* 课程类型选择器 */
.tt-type-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}
.tt-type-btn {
    flex: 1;
    padding: 10px 12px;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg, #fff);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    color: var(--text);
}
.tt-type-btn.active {
    border-color: var(--primary, #4b6cb7);
    background: var(--primary, #4b6cb7);
    color: #fff;
}
.tt-schedule-slots {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tt-schedule-slot-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.tt-schedule-slot-row select,
.tt-schedule-slot-row input[type="time"] {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
}
.tt-schedule-slot-row select {
    width: 80px;
}
.tt-remove-slot-btn {
    border: none;
    background: none;
    color: var(--text-light);
    cursor: pointer;
    padding: 4px;
    font-size: 16px;
}
.tt-add-slot-btn {
    border: 1px dashed var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-light);
    cursor: pointer;
    font-size: 13px;
    padding: 6px 12px;
    margin-top: 4px;
}
.tt-skip-schedule-btn {
    width: 100%;
    padding: 8px;
    border: 1px dashed var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-light);
    cursor: pointer;
    font-size: 13px;
}

/* 课程卡片 */
.tt-course-card {
    padding: 14px;
    border-radius: 10px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s;
}
.tt-course-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}
.tt-course-card.abandoned {
    opacity: 0.6;
}
.tt-course-card.completed {
    border-color: rgba(92, 184, 92, 0.3);
}
.tt-course-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.tt-course-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.tt-course-info {
    flex: 1;
    min-width: 0;
}
.tt-course-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tt-course-meta {
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: var(--text-light);
    margin-top: 2px;
    flex-wrap: wrap;
}
.tt-badge {
    background: var(--primary);
    color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
}
.tt-course-status {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}
.tt-course-status.active {
    background: rgba(75, 108, 183, 0.12);
    color: var(--primary);
}
.tt-course-status.completed {
    background: rgba(92, 184, 92, 0.12);
    color: #5CB85C;
}
.tt-course-status.abandoned {
    background: rgba(153, 153, 153, 0.12);
    color: #999;
}
.tt-course-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tt-course-valid {
    font-size: 11px;
    color: var(--text-light);
    margin-top: 8px;
}

/* ---- 颜色选择器 ---- */
.tt-color-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.tt-color-option {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
}
.tt-color-option:hover {
    transform: scale(1.1);
}
.tt-color-option.selected {
    border-color: var(--text);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--text);
}

/* ---- 图标选择器 ---- */
.tt-icon-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.tt-icon-option {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    border: 2px solid var(--border);
    transition: all 0.2s;
    color: var(--text-light);
}
.tt-icon-option:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.tt-icon-option.selected {
    border-color: var(--primary);
    background: rgba(75, 108, 183, 0.1);
    color: var(--primary);
}

/* ---- 开关 ---- */
.tt-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tt-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}
.tt-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.tt-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ccc;
    border-radius: 22px;
    transition: 0.3s;
}
.tt-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.3s;
}
.tt-switch input:checked + .tt-slider {
    background: var(--primary);
}
.tt-switch input:checked + .tt-slider:before {
    transform: translateX(18px);
}
.tt-toggle-hint {
    font-size: 12px;
    color: var(--text-light);
}

/* ---- 星期选择器 ---- */
.tt-weekday-picker {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.tt-weekday-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.tt-weekday-chip:hover {
    border-color: var(--primary);
}
.tt-weekday-chip input {
    margin: 0;
}

/* ---- 批量排课时段 ---- */
.tt-schedule-slots-help {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 8px;
    line-height: 1.5;
}
.tt-schedule-slots {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}
.tt-schedule-slot-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-gray, #f9f9f9);
}
.tt-slot-time-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}
.tt-schedule-slot-row .tt-slot-day {
    width: 90px;
    flex-shrink: 0;
}
.tt-schedule-slot-row .tt-slot-start,
.tt-schedule-slot-row .tt-slot-end {
    width: 110px;
    flex-shrink: 0;
}
.tt-schedule-slot-row .tt-slot-separator {
    color: var(--text-light);
    font-size: 12px;
    flex-shrink: 0;
}
.tt-slot-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* 小屏幕：时段操作区折行 */
@media (max-width: 768px) {
    .tt-schedule-slot-row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .tt-slot-time-group {
        flex-wrap: wrap;
        gap: 6px;
    }
    .tt-schedule-slot-row .tt-slot-start,
    .tt-schedule-slot-row .tt-slot-end {
        width: 100px;
        font-size: 13px;
        padding: 6px 8px;
    }
    .tt-schedule-slot-row .tt-slot-day {
        width: 80px;
    }
    .tt-slot-actions {
        width: 100%;
        justify-content: space-between;
        padding-top: 6px;
        border-top: 1px dashed var(--border);
    }
}
.tt-remove-slot-btn {
    background: transparent;
    border: none;
    color: #D9534F;
    cursor: pointer;
    font-size: 14px;
    padding: 6px;
    border-radius: 4px;
    transition: all 0.2s;
    flex-shrink: 0;
}
.tt-remove-slot-btn:hover {
    background: rgba(217, 83, 79, 0.1);
}
.tt-add-slot-btn {
    background: transparent;
    border: 1px dashed var(--primary);
    color: var(--primary);
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.tt-add-slot-btn:hover {
    background: rgba(75, 108, 183, 0.08);
}
.tt-add-slot-btn i {
    margin-right: 4px;
}

/* ---- 批量排课预览 ---- */
.tt-batch-preview {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-gray, #f9f9f9);
}
.tt-preview-header,
.tt-preview-row {
    display: grid;
    grid-template-columns: 40px 100px 60px 100px 1fr 40px;
    gap: 4px;
    padding: 6px 8px;
    align-items: center;
    font-size: 12px;
}
.tt-preview-header {
    background: var(--border);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}
.tt-preview-row {
    border-bottom: 1px solid var(--border);
}
.tt-preview-row.tt-conflict {
    background: rgba(217, 83, 79, 0.08);
}
.tt-conflict-tag {
    color: #D9534F;
    font-size: 10px;
    font-weight: 600;
}
.tt-preview-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-light);
    font-size: 13px;
}

/* ---- 详情模态框 ---- */
.tt-detail-row {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    gap: 12px;
    align-items: center;
}
.tt-detail-label {
    width: 80px;
    color: var(--text-light);
    flex-shrink: 0;
    font-weight: 600;
}

/* ---- 状态标签 ---- */
.tt-status-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}
.tt-status-tag.status-pending {
    background: rgba(75, 108, 183, 0.12);
    color: var(--primary);
}
.tt-status-tag.status-checked {
    background: rgba(92, 184, 92, 0.12);
    color: #5CB85C;
}
.tt-status-tag.status-missed {
    background: rgba(217, 83, 79, 0.12);
    color: #D9534F;
}
.tt-status-tag.status-abandoned {
    background: rgba(153, 153, 153, 0.12);
    color: #999;
}

/* ---- 课程详情模态框 ---- */
#courseDetailModal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 15px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
#courseDetailModal .modal-footer .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    white-space: nowrap;
}

/* ---- 排课事件详情模态框 ---- */
#eventDetailModal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 15px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
#eventDetailModal .modal-footer .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    white-space: nowrap;
}

/* --- 通用模态框底部按钮布局 --- */
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 15px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.modal-footer .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    white-space: nowrap;
}
.tt-cd-header {
    margin-bottom: 16px;
}
.tt-cd-info-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
.tt-cd-info-row span:first-child {
    color: var(--text-light);
    font-weight: 600;
}
.tt-cd-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}
.tt-cd-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin: 16px 0 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.tt-cd-events-table {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
}
.tt-cd-events-header,
.tt-cd-events-row {
    display: grid;
    grid-template-columns: 40px 100px 60px 80px 60px;
    gap: 4px;
    padding: 6px 8px;
    font-size: 12px;
    align-items: center;
}
.tt-cd-events-header {
    background: var(--border);
    font-weight: 600;
    position: sticky;
    top: 0;
}
.tt-cd-events-row {
    border-bottom: 1px solid var(--border);
}
.tt-cd-no-events {
    text-align: center;
    color: var(--text-light);
    padding: 20px;
    font-size: 13px;
}
.tt-cd-checkin-list {
    max-height: 200px;
    overflow-y: auto;
}
.tt-cd-checkin-item {
    display: flex;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.tt-mini-checkin-btn {
    background: #5CB85C;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}
.tt-mini-checkin-btn:hover {
    background: #4cae4c;
}

/* ---- 表单行 ---- */
.form-row {
    display: flex;
    gap: 12px;
}

/* ---- btn-success ---- */
.btn-success {
    background: #5CB85C;
    color: #fff;
    border: none;
}
.btn-success:hover {
    background: #4cae4c;
}
.btn-warning {
    background: #F0AD4E;
    color: #fff;
    border: none;
}
.btn-warning:hover {
    background: #ec971f;
}

/* ---- 响应式 ---- */


/* ===== 计划模版管理页面（新）===== */
.tm-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── 顶部分类标签栏 ── */
.tm-tabs-bar {
    display: flex;
    align-items: flex-start;
    background: var(--card-bg, #fff);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 2px 8px var(--shadow, rgba(0,0,0,0.06));
}
.tm-tabs-scroll {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    width: 100%;
}
.tm-tab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.82rem;
    color: #666;
    background: #f0f2f5;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    border: 1.5px solid transparent;
    user-select: none;
    line-height: 1.3;
}
.tm-tab:hover {
    background: rgba(75,108,183,0.1);
    color: var(--primary, #4b6cb7);
}
.tm-tab.active {
    background: var(--primary, #4b6cb7);
    color: #fff;
    font-weight: 600;
    border-color: var(--primary, #4b6cb7);
}
.tm-tab i {
    font-size: 0.78rem;
}
.tm-tab-add {
    background: transparent;
    border: 1.5px dashed #bbb;
    color: #999;
    padding: 6px 12px;
}
.tm-tab-add:hover {
    border-color: var(--primary, #4b6cb7);
    color: var(--primary, #4b6cb7);
    background: rgba(75,108,183,0.05);
}

/* ── 模板操作栏 ── */
.tm-tpl-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.tm-tpl-action-bar h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--primary, #4b6cb7);
    flex-shrink: 0;
}
.tm-tpl-action-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.tm-action-btn {
    background: #f0f2f5;
    color: #555;
    border: 1px solid #ddd;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: all 0.2s;
}
.tm-action-btn:hover {
    background: rgba(75,108,183,0.1);
    color: var(--primary, #4b6cb7);
    border-color: var(--primary, #4b6cb7);
}
.tm-action-del {
    color: #c62828;
}
.tm-action-del:hover {
    background: rgba(198,40,40,0.1);
    color: #c62828;
    border-color: #c62828;
}
.tm-main {
    width: 100%;
}
.tm-tpl-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tm-tpl-card {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px var(--shadow, rgba(0,0,0,0.06));
    transition: all 0.2s;
}
.tm-tpl-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--shadow, rgba(0,0,0,0.15));
}
.tm-tpl-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 0.85rem;
    gap: 8px;
}
.tm-tpl-cat {
    color: var(--primary, #4b6cb7);
    font-weight: 600;
    padding-top: 6px;
}
.tm-tpl-top-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.tm-tpl-icon-btn {
    background: #f0f7ff;
    border: none;
    color: #4b6cb7;
    cursor: pointer;
    font-size: 1rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.tm-tpl-icon-btn:hover {
    background: #4b6cb7;
    color: #fff;
    transform: scale(1.1);
}
.tm-tpl-icon-del {
    color: #c62828;
    background: #ffebee;
}
.tm-tpl-icon-del:hover {
    background: #c62828;
    color: #fff;
}
.tm-tpl-points {
    color: #888;
}
.tm-tpl-name {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
}
.tm-tpl-desc {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 10px;
    line-height: 1.4;
}
.tm-tpl-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}
.tm-tpl-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    color: #888;
    background: #f0f2f5;
    padding: 3px 9px;
    border-radius: 12px;
}
.tm-tpl-del {
    background: #e74c3c;
}
.tm-tpl-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}
.tm-tpl-empty i {
    font-size: 2.5rem;
    margin-bottom: 12px;
    display: block;
}

/* 隐藏旧侧边栏（已迁移至模版管理页面） */
#sidebar { display: none !important; }

/* 模板管理页面手机端优化 */


/* ========================================
   附件功能样式
   ======================================== */

/* 附件区域容器 */
.attachment-section {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--light-bg);
}

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

.attachment-header label {
    font-weight: 600;
    color: var(--text);
    font-size: 0.9rem;
    margin: 0;
}

/* 添加附件按钮 */
.attachment-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 2px dashed #4B6CB7;
    border-radius: 8px;
    background: transparent;
    color: #4B6CB7;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 36px;
}

.attachment-add-btn:hover {
    background: rgba(75, 108, 183, 0.08);
    border-color: #3a5a9f;
    color: #3a5a9f;
}

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

.attachment-add-btn.disabled {
    border-color: #ccc;
    color: #999;
    cursor: not-allowed;
    background: transparent;
}

/* 格式提示 */
.attachment-format-hint {
    font-size: 0.75rem;
    color: #999;
    margin: 4px 0 8px 0;
    line-height: 1.4;
}

/* 附件列表 */
.attachment-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.attachment-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.75rem;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    transition: all 0.15s;
    cursor: pointer;
    text-align: center;
    position: relative;
}

.attachment-item:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.attachment-icon {
    font-size: 1.8rem;
    color: #4B6CB7;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.attachment-icon.img { color: #4CAF50; }
.attachment-icon.doc { color: #2196F3; }
.attachment-icon.audio { color: #FF9800; }
.attachment-icon.video { color: #E91E63; }
.attachment-icon.archive { color: #9C27B0; }
.attachment-icon.other { color: #607D8B; }

.attachment-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
}

.attachment-name {
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70px;
    font-size: 0.7rem;
}

.attachment-name:hover {
    color: #4B6CB7;
    text-decoration: underline;
}

.attachment-size {
    font-size: 0.65rem;
    color: #999;
}

.attachment-delete-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #fff;
    border: 1px solid #ddd;
    color: #999;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 1px 4px;
    border-radius: 50%;
    transition: all 0.15s;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    z-index: 10;
}

.attachment-delete-btn:hover {
    color: #F44336;
    background: #fff;
    border-color: #F44336;
    transform: scale(1.15);
}

/* 任务卡片中的附件指示器 */
.card-attachment-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: #4B6CB7;
    padding: 2px 8px;
    background: rgba(75, 108, 183, 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
    margin-top: 4px;
}

.card-attachment-indicator:hover {
    background: rgba(75, 108, 183, 0.15);
}

/* 附件查看模态框 */
.attachment-view-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
}

.attachment-view-item:last-child {
    border-bottom: none;
}

.attachment-view-item:hover {
    background: var(--light-bg);
}

.attachment-view-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}

.attachment-view-icon.img { color: #4CAF50; }
.attachment-view-icon.doc { color: #2196F3; }
.attachment-view-icon.audio { color: #FF9800; }
.attachment-view-icon.video { color: #E91E63; }
.attachment-view-icon.archive { color: #9C27B0; }
.attachment-view-icon.other { color: #607D8B; }

.attachment-view-info {
    flex: 1;
    min-width: 0;
}

.attachment-view-name {
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.attachment-view-size {
    font-size: 0.75rem;
    color: #999;
    margin-top: 2px;
}

/* 专注模式附件列表 - 方格缩略图样式 */
.focus-attachment-grid-container {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(75, 108, 183, 0.15);
}

.focus-attachment-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #4B6CB7;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.focus-attachment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 70px);
    gap: 8px;
}

.focus-attachment-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 70px;
    padding: 8px;
    background: rgba(75, 108, 183, 0.05);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.focus-attachment-grid-item:hover {
    background: rgba(75, 108, 183, 0.1);
    border-color: rgba(75, 108, 183, 0.2);
    transform: translateY(-2px);
}

.focus-attachment-grid-icon {
    font-size: 1.4rem;
    margin-bottom: 4px;
}

.focus-attachment-grid-icon.img { color: #4CAF50; }
.focus-attachment-grid-icon.doc { color: #2196F3; }
.focus-attachment-grid-icon.audio { color: #FF9800; }
.focus-attachment-grid-icon.video { color: #E91E63; }
.focus-attachment-grid-icon.archive { color: #9C27B0; }
.focus-attachment-grid-icon.other { color: #607D8B; }

.focus-attachment-grid-name {
    font-size: 0.7rem;
    color: #666;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60px;
    line-height: 1.2;
}

/* 移动端适配 */


.radio-label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #666;
}

.radio-label input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #4b6cb7;
}

.radio-label input[type="radio"]:checked + span {
    color: #4b6cb7;
    font-weight: 500;
}

.focus-timer-mode-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.focus-timer-mode-tab {
    padding: 6px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    background: #f0f2f5;
    color: #666;
    border: none;
}

.focus-timer-mode-tab.active {
    background: #4b6cb7;
    color: white;
}

.focus-timer-mode-tab.countdown-active {
    background: #e74c3c;
    color: white;
}

.focus-timer-mode-tab.pomodoro-active {
    background: #e74c3c;
    color: white;
}

.focus-timer-mode-tab.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.focus-timer-display.countdown-mode {
    color: #e74c3c;
}

.focus-timer-display.countup-mode {
    color: #4b6cb7;
}

/* ---- 专注模式计时器新风格：卡片式三字段 ---- */
.focus-timer-boxes {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.focus-timer-boxes .timer-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 112px;
    border-radius: 18px;
    position: relative;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    border: 2px solid transparent;
    color: #3A5AB8;
}

/* 正计时：蓝色字体 + 清新冷色底（柔和不刺眼） */
.focus-timer-boxes .timer-unit.hours {
    background: rgba(91, 127, 199, 0.14);
    border-color: rgba(91, 127, 199, 0.28);
}

.focus-timer-boxes .timer-unit.minutes {
    background: rgba(123, 180, 200, 0.15);
    border-color: rgba(123, 180, 200, 0.30);
}

.focus-timer-boxes .timer-unit.seconds {
    background: rgba(147, 150, 210, 0.14);
    border-color: rgba(147, 150, 210, 0.28);
}

/* 倒计时：红色字体 + 温暖彩色底（柔和活泼） */
.focus-timer-boxes.countdown-mode .timer-unit.hours {
    background: rgba(232, 108, 108, 0.14);
    border-color: rgba(232, 108, 108, 0.32);
    color: #D9534F;
}

.focus-timer-boxes.countdown-mode .timer-unit.minutes {
    background: rgba(245, 166, 120, 0.15);
    border-color: rgba(245, 166, 120, 0.32);
    color: #D9534F;
}

.focus-timer-boxes.countdown-mode .timer-unit.seconds {
    background: rgba(255, 200, 130, 0.15);
    border-color: rgba(255, 200, 130, 0.32);
    color: #D9534F;
}

/* 倒计时可编辑字段高亮边框 */
.focus-timer-boxes.countdown-mode .timer-unit.hours.editable,
.focus-timer-boxes.countdown-mode .timer-unit.minutes.editable {
    border-color: rgba(217, 83, 79, 0.48);
}

.focus-timer-boxes.countdown-mode .timer-unit.hours.editable:hover,
.focus-timer-boxes.countdown-mode .timer-unit.minutes.editable:hover,
.focus-timer-boxes.countdown-mode .timer-unit.hours.editable:focus-within,
.focus-timer-boxes.countdown-mode .timer-unit.minutes.editable:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(217, 83, 79, 0.14);
    border-color: rgba(217, 83, 79, 0.68);
}

.focus-timer-boxes.countup-mode .timer-unit {
    pointer-events: none;
}

/* 正计时 hover 边框微亮（无指针事件，主要用于视觉完整） */
.focus-timer-boxes .timer-unit.hours,
.focus-timer-boxes .timer-unit.minutes,
.focus-timer-boxes .timer-unit.seconds {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.focus-timer-boxes .timer-value {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "zero" off;
    font-family: 'SF Mono', 'Menlo', 'Consolas', 'PingFang SC', monospace;
    cursor: default;
    outline: none;
    border: none;
    background: transparent;
    color: inherit;
    width: 100%;
    text-align: center;
    padding: 0;
}

.focus-timer-boxes.countdown-mode .timer-unit.hours.editable .timer-value,
.focus-timer-boxes.countdown-mode .timer-unit.minutes.editable .timer-value {
    cursor: text;
}

.focus-timer-boxes .timer-value-input {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "zero" off;
    font-family: 'SF Mono', 'Menlo', 'Consolas', 'PingFang SC', monospace;
    text-align: center;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: inherit;
    padding: 0;
}

.focus-timer-boxes .timer-label {
    font-size: 0.8rem;
    margin-top: 8px;
    font-weight: 500;
    color: inherit;
    opacity: 0.85;
}

.focus-timer-boxes .timer-colon {
    font-size: 2rem;
    font-weight: 700;
    color: #9aa3b2;
    margin-top: 28px;
    line-height: 1;
}

.focus-timer-boxes .timer-arrow {
    display: none;
    position: absolute;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 0.7rem;
    cursor: pointer;
    padding: 8px 16px;
    transition: color 0.2s, transform 0.15s, opacity 0.2s;
    line-height: 1;
    opacity: 0.7;
}

.focus-timer-boxes .timer-arrow:hover {
    opacity: 1;
    transform: scale(1.2);
}

.focus-timer-boxes .timer-arrow.up {
    top: 0;
}

.focus-timer-boxes .timer-arrow.down {
    bottom: 20px;
}

.focus-timer-boxes .timer-unit.editable .timer-arrow {
    display: block;
}

.focus-timer-boxes .timer-unit.editable .timer-value,
.focus-timer-boxes .timer-unit.editable .timer-value-input {
    margin-top: 12px;
}

.focus-timer-boxes .timer-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

.focus-timer-hint {
    text-align: center;
    font-size: 0.75rem;
    color: #999;
    margin: 0 0 16px;
    min-height: 1.2em;
}

/* 响应式：手机上缩小计时器卡片 */



/* ---- 首页主 Tab 切换栏 ---- */
.main-tab-bar {
    display: flex;
    gap: 0;
    background: #f0f2f8;
    border-radius: 10px;
    padding: 4px;
    margin: 10px 0 12px 0;
    align-items: center;
}

.main-tab-btn {
    flex: 1;
    padding: 7px 0;
    border: none;
    background: transparent;
    border-radius: 7px;
    font-size: 0.88rem;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.2s;
    font-weight: 500;
}

.main-tab-btn.active {
    background: #fff;
    color: #4B6CB7;
    box-shadow: 0 2px 6px rgba(75,108,183,0.15);
    font-weight: 600;
}

/* 学习计划标签内嵌排序按钮 */
.task-tab-with-sort {
    position: relative;
    gap: 4px;
}

.task-tab-with-sort .tab-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.task-tab-with-sort .sort-container {
    display: inline-flex;
    align-items: center;
}

.main-tab-bar .sort-btn {
    background: rgba(75, 108, 183, 0.12);
    border: 1px solid rgba(75, 108, 183, 0.3);
    border-radius: 6px;
    padding: 3px 8px;
    color: #4B6CB7;
    cursor: pointer;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    line-height: 1;
}

.main-tab-bar .sort-btn:hover {
    background: rgba(75, 108, 183, 0.22);
    border-color: rgba(75, 108, 183, 0.5);
    transform: scale(1.05);
}

.main-tab-bar .sort-btn:active {
    transform: scale(0.96);
}

.main-tab-btn.active .sort-btn {
    color: #4B6CB7;
}

/* 习惯标签激活时，隐藏学习计划标签内的排序按钮 */
.main-tab-btn:not(.active) .sort-container {
    display: none !important;
}

/* ===== 首页习惯打卡卡片容器 ===== */
/* #habitListBlock 由 JS switchMainTab 管理显示/隐藏，不在此预设 display */

#habitListMain {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0;
    margin: 0;
}

/* ===== 首页习惯打卡卡片（三段式布局）===== */
.habit-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    display: flex;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    height: 120px;
}
.habit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
}
/* 左侧：分类颜色区 */
.habit-card-left {
    width: 40px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 1px;
    padding: 5px 0;
    cursor: default;
}
.habit-card-left i {
    font-size: 1.2rem;
    margin-bottom: 5px;
}
.habit-card-cat-name {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    text-align: center;
    max-height: 100%;
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.95);
    line-height: 1.3;
}
/* 中间：习惯内容 */
.habit-card-middle {
    flex: 1;
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-left: 15px;
    min-width: 0;
    display: flex;
    flex-direction: column;

    gap: 4px;
    cursor: pointer;
}
.habit-card-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 2px;
}

.habit-name {
    font-weight: 700;
    font-size: 1.25rem;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 10px;
}

.habit-name i {
    color: #4b6cb7;
}

.habit-mode-tag,
.habit-weekday-tag,
.habit-cat-tag {
    font-size: 0.85rem;
    padding: 2px 8px;
    border-radius: 12px;
    background: #eef0f7;
    color: #555;
    white-space: nowrap;
}

.habit-weekday-tag { background: #e3f2fd; color: #1976d2; }
.habit-cat-tag     { background: #f3e5f5; color: #6a1b9a; }

.habit-card-desc {
    font-size: 0.92rem;
    color: #555;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
    background: #f9fbfd;
    border: 1px solid #edf2f7;
    border-radius: 10px;
    padding: 4px 8px;
    line-height: 1.3;
    max-height: 70px;
}

.habit-card-points {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.habit-point-reward,
.habit-point-penalty {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    white-space: nowrap;
}

.habit-point-reward {
    color: #2ecc71;
    background: #f0fff4;
}

.habit-point-penalty {
    color: #e74c3c;
    background: #fff5f5;
}

/* 右侧打卡区 */
.habit-card-action {
    flex-shrink: 0;
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    cursor: pointer;
    border-left: 1px solid #f0f4f8;
    transition: background 0.15s;
}

.habit-card-action:hover { background: #f8f9ff; }

.habit-card-action.checked { background: #f0faf0; }
.habit-card-action.failed  { background: #fff5f5; }
.habit-card-action.unchecked {}

.checkin-btn-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #B0B0B0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #B0B0B0;
    font-weight: 700;
    transition: all 0.3s ease;
}

.habit-card-action:hover .checkin-btn-circle {
    transform: scale(1.1);
}

.checked .checkin-btn-circle { border-color: #4CAF50; color: #4CAF50; }

.checkin-done-icon {
    font-size: 1.5rem;
}

.checkin-label {
    font-size: 0.85rem;
    color: #666;
    text-align: center;
    font-weight: 500;
}

.checked .checkin-label { color: #4CAF50; font-weight: 600; }
.failed  .checkin-label { color: #F44336; font-weight: 600; }

.sup-tag {
    display: inline-block;
    background: #FF9800;
    color: #fff;
    font-size: 0.65rem;
    padding: 1px 4px;
    border-radius: 4px;
    margin-left: 2px;
}

/* 圆环进度条 */
@property --ring-progress {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.habit-ring-progress {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    flex-shrink: 0;
}

.habit-ring-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #e8ecf0;
}

.habit-ring-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        var(--ring-color, var(--habit-color, #4b6cb7)) 0deg,
        var(--ring-color, var(--habit-color, #4b6cb7)) var(--ring-progress, 0deg),
        transparent var(--ring-progress, 0deg)
    );
    mask: radial-gradient(transparent 44%, black 46%);
    -webkit-mask: radial-gradient(transparent 44%, black 46%);
}

.habit-ring-fill.animate {
    animation: ring-fill-anim 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes ring-fill-anim {
    from { --ring-progress: var(--ring-start, 0deg); }
    to { --ring-progress: var(--ring-target, 0deg); }
}

.habit-ring-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 78%;
    height: 78%;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.habit-ring-icon {
    font-size: 1.1rem;
    line-height: 1;
    color: var(--habit-color, #4b6cb7);
    font-weight: 600;
}

.habit-ring-count {
    font-size: 0.58rem;
    color: #666;
    font-weight: 500;
    margin-top: -2px;
}

.habit-card-action:hover .habit-ring-inner {
    transform: translate(-50%, -50%) scale(1.05);
    transition: transform 0.2s ease;
}

.habit-card-action.checked .habit-ring-icon {
    color: #4CAF50;
}

.habit-card-action.failed .habit-ring-icon {
    color: #e74c3c;
}

/* ---- 打卡弹窗 ---- */
/* ====== 习惯打卡确认弹窗（卡片式选项） ====== */

/* 习惯信息卡片 */
.checkin-info-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #f0f4ff 0%, #f8f0ff 100%);
    border-bottom: 1px solid #eee;
}
.checkin-info-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #4B6CB7, #6a89d8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(75,108,183,0.3);
}
.checkin-info-text { flex: 1; min-width: 0; }
.checkin-info-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c3e50;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.checkin-info-date {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #888;
    font-size: 0.82rem;
    margin-top: 3px;
}
.checkin-info-date i { font-size: 0.75rem; }

/* 弹窗内容区 */
.checkin-body-inner { padding: 16px 18px 4px; }

/* 提示条 */
.checkin-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.82rem;
    line-height: 1.5;
    margin-bottom: 12px;
}
.checkin-tip i { flex-shrink: 0; margin-top: 2px; }
.tip-warning { background: #fff8e1; color: #e65100; }
.tip-info    { background: #e3f2fd; color: #0277bd; }

/* 分区标签 */
.checkin-section-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.checkin-section-label i { color: #999; font-size: 0.78rem; }

/* 卡片式选项组 */
.checkin-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.checkin-option-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 2px solid #eee;
    background: #fafafa;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}
.checkin-option-card:hover {
    border-color: #c8d6e5;
    background: #f8f9fb;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
}
/* 隐藏原生 radio */
.checkin-option-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* 选项图标 */
.checkin-option-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: #fff;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.icon-completed { background: linear-gradient(135deg, #4CAF50, #66bb6a); box-shadow: 0 2px 6px rgba(76,175,80,0.3); }
.icon-failed    { background: linear-gradient(135deg, #f44336, #ef5350); box-shadow: 0 2px 6px rgba(244,67,54,0.3); }
.icon-cancel    { background: linear-gradient(135deg, #FF9800, #ffa726); box-shadow: 0 2px 6px rgba(255,152,0,0.3); }

/* 选项文字 */
.checkin-option-text { flex: 1; min-width: 0; }
.checkin-option-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #333;
}
.checkin-option-desc {
    font-size: 0.76rem;
    color: #999;
    margin-top: 2px;
}

/* 选中指示器（右侧小圆点） */
.checkin-option-check {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: #ddd;
    transition: all 0.2s ease;
}

/* 选中状态 —— 已完成 */
.checkin-option-card:has(input[value="completed"]:checked),
.checkin-option-card.selected[data-status="completed"] {
    border-color: #4CAF50;
    background: #f1f8f4;
}
.checkin-option-card:has(input[value="completed"]:checked) .checkin-option-check,
.checkin-option-card.selected[data-status="completed"] .checkin-option-check {
    color: #4CAF50;
    font-size: 0.85rem;
}
/* 选中状态 —— 未完成 */
.checkin-option-card:has(input[value="failed"]:checked),
.checkin-option-card.selected[data-status="failed"] {
    border-color: #f44336;
    background: #fef3f2;
}
.checkin-option-card:has(input[value="failed"]:checked) .checkin-option-check,
.checkin-option-card.selected[data-status="failed"] .checkin-option-check {
    color: #f44336;
    font-size: 0.85rem;
}
/* 选中状态 —— 取消打卡 */
.checkin-option-card:has(input[value="cancel"]:checked),
.checkin-option-card.selected[data-status="cancel"] {
    border-color: #FF9800;
    background: #fff8ef;
}
.checkin-option-card:has(input[value="cancel"]:checked) .checkin-option-check,
.checkin-option-card.selected[data-status="cancel"] .checkin-option-check {
    color: #FF9800;
    font-size: 0.85rem;
}

/* 备注区 */
.checkin-note-section { margin-bottom: 4px; }
.checkin-note-input {
    padding: 10px 12px !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
}

/* 底部按钮区 */
.checkin-actions {
    padding: 12px 18px 16px;
    margin-top: 0;
}
.checkin-actions .btn {
    padding: 10px 20px;
    font-size: 0.95rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.checkin-actions .btn-primary {
    background: linear-gradient(135deg, #4B6CB7, #5b7fc7);
    box-shadow: 0 3px 10px rgba(75,108,183,0.3);
}
.checkin-actions .btn-primary:hover {
    background: linear-gradient(135deg, #3a5795, #4B6CB7);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(75,108,183,0.4);
}

/* ---- 习惯弹窗 ---- */
.habit-modal-content {
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
}

.habit-mode-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.habit-mode-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.88rem;
}

/* 图标选择器 */
.habit-icon-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.habit-icon-option {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 2px solid #eee;
    background: #f8f9ff;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.15s;
}

.habit-icon-option:hover { border-color: #9B59B6; color: #9B59B6; }
.habit-icon-option.selected {
    border-color: #9B59B6;
    background: #f3e5f5;
    color: #9B59B6;
}

/* 颜色选择器 */
.habit-color-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.habit-color-option {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}

.habit-color-option:hover { transform: scale(1.15); }
.habit-color-option.selected {
    border-color: #333;
    transform: scale(1.2);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.15);
}

/* 星期选择器 */
.habit-weekday-picker {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.weekday-checkbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.weekday-checkbox input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.weekday-checkbox span {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    color: #666;
    transition: all 0.15s;
    font-weight: 500;
}

.weekday-checkbox input:checked + span {
    background: #4B6CB7;
    border-color: #4B6CB7;
    color: #fff;
}

/* ---- 习惯详情页 ---- */
.habit-detail-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.habit-detail-info-item {
    background: #f8f9ff;
    border-radius: 8px;
    padding: 10px 14px;
}

.info-label {
    display: block;
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 4px;
}

.info-val {
    font-size: 0.92rem;
    font-weight: 600;
    color: #333;
}

.habit-detail-desc {
    background: #f0f2f8;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.88rem;
    color: #555;
    margin-bottom: 16px;
    min-height: 36px;
}

.habit-detail-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.habit-stat-card {
    flex: 1;
    text-align: center;
    background: linear-gradient(135deg, #4B6CB7 0%, #9B59B6 100%);
    color: #fff;
    border-radius: 10px;
    padding: 14px 10px;
}

.habit-stat-val {
    font-size: 1.4rem;
    font-weight: 700;
}

.habit-stat-label {
    font-size: 0.78rem;
    opacity: 0.85;
    margin-top: 4px;
}

.habit-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.habit-detail-checkin-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.habit-detail-checkin-item:last-child {
    border-bottom: none;
}

/* 已归档习惯条目 */
.archived-habit-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f8f9ff;
    border-radius: 8px;
    margin-bottom: 8px;
}

.archived-habit-name {
    flex: 1;
    font-size: 0.9rem;
    color: #555;
}

.btn-restore-habit {
    background: #28a745;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.82rem;
    cursor: pointer;
}

/* ---- 模板管理页 类型 Tab ---- */
.tm-type-tabs-bar {
    display: flex;
    gap: 0;
    background: #f0f2f8;
    border-radius: 10px;
    padding: 4px;
    margin: 10px 16px;
}

.tm-type-tab {
    flex: 1;
    padding: 8px 0;
    border: none;
    background: transparent;
    border-radius: 7px;
    font-size: 0.88rem;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.2s;
    font-weight: 500;
}

.tm-type-tab.active {
    background: #fff;
    color: #4B6CB7;
    box-shadow: 0 2px 6px rgba(75,108,183,0.15);
    font-weight: 600;
}

/* 删除弹窗危险按钮 */
.btn-danger {
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-danger:hover { background: #c82333; }

/* ===== 习惯模板卡片（增强展示所有数据）===== */
.ht-tpl-card {
    position: relative;
    display: flex;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: box-shadow 0.2s;
    cursor: pointer;
    border: 1px solid #f0f0f0;
}
.ht-tpl-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.ht-tpl-color-bar {
    width: 5px;
    min-height: 100%;
    flex-shrink: 0;
}
.ht-tpl-inner {
    flex: 1;
    padding: 14px 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ht-tpl-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ht-tpl-top-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}
.ht-tpl-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #222;
}
.ht-tpl-name i {
    font-size: 1.1rem;
    flex-shrink: 0;
}
.ht-tpl-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}
.ht-tpl-point {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: #f8f9fa;
    color: #555;
}
.ht-tpl-reward { background: #fff8e1; color: #856404; }
.ht-tpl-penalty { background: #fdecea; color: #7d1515; }
.ht-tpl-milestone { background: #f3e8ff; color: #5b21b6; }

/* ========================================
   FAB 扇形菜单（首页右下角快捷操作）
   ======================================== */
.fab-menu {
    position: fixed;
    bottom: 24px;
    right: 16px;
    width: 56px;
    height: 56px;
    z-index: 1100;
}
/* 主按钮 */
.fab-main {
    position: absolute;
    top: 0; left: 0;
    width: 56px; height: 56px;
    border-radius: 50%;
    border: none;
    background: #4B6CB7;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(75,108,183,0.4);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    z-index: 1101;
    transition: background 0.3s ease;
}
.fab-main i {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fab-main:hover { background: #3a5795; }
.fab-menu.open .fab-main { background: #E74C3C; }
.fab-menu.open .fab-main:hover { background: #c0392b; }
.fab-menu.open .fab-main i { transform: rotate(45deg); }

/* 子按钮（扇形展开） */
.fab-sub-btn {
    position: absolute;
    top: 50%; left: 50%;
    width: 58px; height: 58px;
    border-radius: 50%;
    border: none;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    padding: 4px;
    overflow: hidden;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    z-index: 1101;
    /* 收起动画（移除 .open 时生效） */
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
    transition-delay: 0s;
}
.fab-sub-btn span {
    display: inline-block;
    transition: transform 0.2s ease;
}
.fab-sub-btn:hover { filter: brightness(1.1); }
.fab-sub-btn:hover span { transform: scale(1.08); }

/* 展开动画 + 扇形位置（移动端） */
.fab-menu.open .fab-sub-btn {
    opacity: 1;
    pointer-events: auto;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fab-menu.open .fab-sub-1 {
    transform: translate(calc(-50% - 85px), calc(-50% - 85px)) scale(1);
    transition-delay: 0s;
}
.fab-menu.open .fab-sub-2 {
    transform: translate(calc(-50% - 125px), calc(-50% - 25px)) scale(1);
    transition-delay: 0.05s;
}
.fab-menu.open .fab-sub-3 {
    transform: translate(calc(-50% - 85px), calc(-50% + 25px)) scale(1);
    transition-delay: 0.1s;
}

/* 桌面端（≥1024px） */


/* ========================================
   周期弹性任务（periodic_goal）
   ======================================== */

/* 周期任务卡片 —— 与普通卡片一致，仅高度增加以容纳进度条 */
.task-card.periodic-goal {
    min-height: 0; /* 2026-08-08：高度由内容决定（含进度条），去除固定最小高度 */
}

/* 进度条区域（在data-display-area内部） */
.task-card.periodic-goal .periodic-progress-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}
.periodic-progress-bar-wrapper {
    flex: 1;
    height: 8px;
    background: #e8ecf0;
    border-radius: 4px;
    overflow: hidden;
    min-width: 40px;
}
.periodic-progress-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: #4b6cb7;
}
.periodic-progress-bar-fill.completed { background: #4CAF50; }
.periodic-progress-bar-fill.failed { background: #e74c3c; }

.periodic-progress-text {
    font-size: 0.72rem;
    color: #888;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.periodic-progress-text .count { font-weight: 600; color: #555; }
.periodic-progress-text .count.completed { color: #4CAF50; }
.periodic-progress-text .count.failed { color: #e74c3c; }
.periodic-progress-text .days-info { color: #aaa; }
.periodic-progress-text .days-info.completed { color: #4CAF50; }
.periodic-progress-text .days-info.failed { color: #e74c3c; }

/* 周期任务操作区复用普通卡片的 .completed-label / .not-completed-label */

/* 周期任务卡片在移动端 */





.focus-period-overview {
    background: #f8f9fb;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.focus-period-overview .focus-period-bar-wrapper {
    height: 12px;
    background: #e8ecf0;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}
.focus-period-overview .focus-period-bar-fill {
    height: 100%;
    border-radius: 6px;
    background: #4b6cb7;
    transition: width 0.4s ease;
}
.focus-period-overview .focus-period-bar-fill.completed { background: #4CAF50; }
.focus-period-overview .focus-period-bar-fill.failed { background: #e74c3c; }
.focus-period-overview .focus-period-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #666;
}
.focus-period-overview .focus-period-info .period-percent {
    font-weight: 700;
    font-size: 1rem;
    color: #4b6cb7;
}
.focus-period-overview .focus-period-info .period-percent.completed { color: #4CAF50; }
.focus-period-overview .focus-period-info .period-percent.failed { color: #e74c3c; }

/* 完成记录表格 */
.focus-period-records {
    margin-bottom: 16px;
}
.focus-period-records .records-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.focus-period-records table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.focus-period-records th {
    background: #f5f7fa;
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    color: #777;
    border-bottom: 2px solid #e8ecf0;
    white-space: nowrap;
}
.focus-period-records td {
    padding: 8px 10px;
    border-bottom: 1px solid #f0f4f8;
    color: #555;
}
.focus-period-records tr:last-child td { border-bottom: none; }
.focus-period-records .no-records {
    text-align: center;
    padding: 20px;
    color: #bbb;
    font-size: 0.85rem;
}
.period-record-completed {
    color: #28a745;
    font-weight: 500;
}
.period-record-failed {
    color: #dc3545;
    font-weight: 500;
}
.focus-period-records .records-table-wrapper {
    max-height: 132px; /* 默认显示约3行 */
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.focus-period-records .records-table-wrapper.expanded {
    max-height: none !important;
}
.records-expand-wrap {
    margin-top: 8px;
    text-align: center;
}
.records-expand-btn {
    background: none;
    border: 1px solid #d0d5dd;
    color: #777;
    font-size: 0.82rem;
    padding: 5px 18px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.records-expand-btn:hover {
    background: #f5f7fa;
    color: #555;
    border-color: #b0b8c4;
}

/* 番茄钟 sessions 表格 */
.pomodoro-sessions-section table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.pomodoro-sessions-section th {
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
    color: #777;
    border-bottom: 2px solid #e8ecf0;
    white-space: nowrap;
    background: #f5f7fa;
}
.pomodoro-sessions-section td {
    padding: 6px 8px;
    border-bottom: 1px solid #f0f4f8;
    color: #555;
}
.pomodoro-sessions-section tr:last-child td { border-bottom: none; }
.pomodoro-session-active td {
    color: #e74c3c;
    font-weight: 500;
}
.pomodoro-session-total td {
    color: #4b6cb7;
    font-weight: 600;
    background: #f8f9ff;
}

/* 番茄钟 sessions 3行截断 */
.pomodoro-sessions-table-wrapper {
    max-height: 132px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.pomodoro-sessions-table-wrapper.expanded {
    max-height: none !important;
}

/* ========== 分享功能样式 ========== */
.share-btn {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 0.85rem;
}
.share-btn:hover {
    background: var(--secondary);
    transform: scale(1.05);
}
.share-subtabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    justify-content: center;
    padding-top: 20px;
}
.share-subtab {
    padding: 8px 24px;
    border: 2px solid var(--border);
    border-radius: 20px;
    background: white;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    color: #999;
}
.share-subtab.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}
.share-subtab:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.share-subpanel {
    padding: 0 20px;
    max-height: 55vh;
    overflow-y: auto;
}
.share-date-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.share-date-item {
    padding: 10px 6px;
    border: 2px solid var(--border);
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
    user-select: none;
}
.share-date-item .day-name {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 0.75rem;
    color: #999;
}
.share-date-item .day-date {
    display: block;
}
.share-date-item.selected {
    background: #f0f4ff;
    border-color: var(--primary);
    color: var(--primary);
}
.share-date-item.today-date {
    background: #fff9e6;
    border-color: #ffa500;
}
.share-task-list {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
}
.share-task-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9rem;
}
.share-task-item:last-child {
    border-bottom: none;
}
.share-task-item:hover {
    background: #f8f9ff;
}
.share-task-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}
.share-task-item .task-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.share-task-item .task-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.share-task-item .task-meta {
    font-size: 0.78rem;
    color: #999;
}

/* 分享级别选择 */
.share-level-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px;
    border: 2px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    flex: 1;
    transition: all 0.2s;
}
.share-level-option input[type="radio"] {
    display: none;
}
.share-level-option:has(input:checked) {
    border-color: var(--primary);
    background: #f0f4ff;
}
.share-level-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
}
.share-level-desc {
    font-size: 0.75rem;
    color: #999;
}

/* 截图区域 */
#shareScreenshotArea {
    width: 700px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
    padding: 28px;
    border-radius: 20px;
}
.share-screenshot-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--primary);
}
.share-screenshot-logo {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.share-screenshot-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}
.share-screenshot-date {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    margin-bottom: 18px;
}
.share-screenshot-tasks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.share-screenshot-card {
    background: white;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.share-screenshot-card .card-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 4px;
}
.share-screenshot-card .card-meta {
    font-size: 0.8rem;
    color: #999;
}
.share-screenshot-decor {
    position: absolute;
    opacity: 0.06;
    font-size: 5rem;
    color: var(--primary);
}
.share-screenshot-watermark {
    text-align: center;
    margin-top: 18px;
    font-size: 0.75rem;
    color: #bbb;
}
.share-preview-container {
    text-align: center;
}




/* ========== 通用工具类（减少内联style） ========== */
.flex-center     { display: flex; align-items: center; }
.input-with-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}
.input-with-buttons .form-control {
    flex: 1;
    min-width: 0;
    text-align: center;
}
.input-with-buttons button {
    flex-shrink: 0;
    min-width: 32px;
}
.flex-between    { display: flex; justify-content: space-between; align-items: center; }
.flex-gap-sm     { display: flex; align-items: center; gap: 5px; }
.flex-gap-md     { display: flex; align-items: center; gap: 10px; }
.flex-wrap-gap   { display: flex; flex-wrap: wrap; gap: 8px; }
.flex-col-gap    { display: flex; flex-direction: column; gap: 12px; }
.grid-2col       { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.hidden          { display: none; }
.text-center     { text-align: center; }
.text-muted      { color: var(--text-muted); }
.mt-sm           { margin-top: 8px; }
.mt-md           { margin-top: 16px; }
.mb-sm           { margin-bottom: 8px; }
.mb-md           { margin-bottom: 16px; }
.p-sm            { padding: 8px; }
.p-md            { padding: 16px; }
.color-swatch    { width: 30px; height: 30px; border-radius: 4px; cursor: pointer; border: 2px solid transparent; }
.color-swatch.selected { border-color: var(--primary); }
.card-base       { background: var(--card-bg); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.card-compact    { background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

/* ===== @media (max-width: 768px) — Mobile Layout (768px) ===== */
        /* 原 .stat-card 锁死 calc(25% - 6px)（每行4个）已移除，
           现由 --card-columns 变量统一控制列数，见 .today-stats 的 grid 规则 */

        @media (max-width: 768px) {
            .timer-display {
                width: 100%;
                max-width: 100%;
                padding: 8px 8px 6px 8px;
                box-sizing: border-box;
            }
            .timer-value {
                font-size: 1.35rem;
            }
            .timer-mode-tag {
                font-size: 0.6rem;
            }
        }

        @media (max-width: 768px) {
            .focus-container {
                padding: 10px;
            }

            .focus-task-card {
                padding: 10px;
            }

            .focus-task-content {
                width: 100%; /* 手机上占100%宽度 */
                max-width: none; /* 取消最大宽度限制 */
                padding: 60px 20px 20px;
                margin: 0 -10px; /* 使用负外边距增加宽度 */
                border-radius: 0; /* 取消圆角，全屏显示 */
            }
        }

        @media (max-width: 768px) {
            .main-content {
                flex-direction: column;
            }

            .date-navigation {
                flex-direction: column;
                align-items: flex-start;
            }

            .date-controls {
                margin-left: 0;
                margin-top: 2px;
            }

            .week-days {
                flex-wrap: wrap;
            }

            .day-btn {
                min-width: calc(50% - 10px);
                margin-bottom: 10px;
            }

       /* 新卡片响应式样式 - 精简版 */
  .task-card {
    border-radius: 12px;
    margin-bottom: 12px;
  }

  .category-bar {
    width: 40px; /* 恢复为40px宽度 */
    height: auto; /* 高度自适应 */
    padding: 10px 0; /* 调整内边距 */
    justify-content: center; /* 居中显示 */
    font-size: 0.9rem;
    border-radius: 12px 0 0 12px; /* 只保留左侧圆角 */
  }

.data-display-area {
   padding: 10px 12px;
}


.info-row {
    flex-wrap: nowrap;
    margin-bottom: 6px;
}

.task-title {
    font-size: 1.1rem;
    margin-right: 8px;
}

.description-box {
    font-size: 0.9rem;
    line-height: 1.4;
    padding: 6px 8px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    /* 2026-08-08 注：平板（≤768px）多行显示/滚动由下方 L14703 规则管理；手机（≤480px）单行省略由 L14179 保留 */
}




            .stats-grid {
                grid-template-columns: 1fr;
            }

            .stat-chart {
                height: 300px;
            }

            .header-row {
                flex-direction: column;
                gap: 15px;
                align-items: flex-start;
            }

            .action-buttons-container {
                width: 100%;
                justify-content: space-between;
            }

            .date-info {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }

            .week-controls {
                width: 100%;
                justify-content: space-between;
            }

            /* 小屏幕优化 */
            .today-stats {
                gap: 8px;
            }

            .week-days {
                min-width: auto;
            }

            .day-btn {
                min-width: auto;
                flex: 1;
            }

            .sidebar {
                min-width: 100%;
            }

            .tasks-container {
                min-width: 100%;
            }

            .focus-task-content {
                padding: 60px 20px 20px;
            }

            .focus-details {
                grid-template-columns: 1fr;
            }

            .focus-task-title {
                font-size: 1.8rem;
            }

            .focus-timer-display {
                font-size: 3rem;
            }

            /* 祝贺弹窗响应式 */
            .congrats-content {
                padding: 22px 16px 20px;
            }

            .congrats-icon {
                font-size: 50px;
            }

            .congrats-content h2 {
                font-size: 1.4rem;
            }

            .congrats-message {
                font-size: .95rem;
            }

            .stats-card-item {
                padding: 10px 8px;
            }

            .stats-card-icon {
                width: 32px;
                height: 32px;
                font-size: 16px;
                border-radius: 10px;
            }

            .stats-card-value {
                font-size: 1rem;
            }

            .stats-card-label {
                font-size: .68rem;
            }

            .backup-btn {
                padding: 10px 28px;
                font-size: .95rem;
            }

            .congrats-message {
                font-size: 1rem;
            }

            .stats-details p {
                font-size: 1rem;
            }

            .backup-btn {
                padding: 12px 25px;
                font-size: 1.1rem;
            }
        }

@media (max-width: 768px) {

  .today-stats {
    /* 手机端保持 grid 布局，列数由 --card-columns 变量控制（detectDefaultColumns 返回 5） */
    display: grid;
    grid-template-columns: repeat(var(--card-columns, 5), 1fr);
  }

   /* 1. 计划分类标题横向排列 */
  .sidebar.collapsed .sidebar-header h2 {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    flex-direction: row;
    justify-content: center;
    gap: 6px;
    font-size: 1rem;
    white-space: nowrap;
  }
  .sidebar.collapsed .sidebar-header h2 i {
    transform: none;
    margin-bottom: 0;
  }

  /* 周视图一行展示，禁止滚动 - 重新设计 */
.week-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    min-width: 0;
}
.day-btn {
    flex: none;
    min-width: 0;
    padding: 4px 1px;
    font-size: 0.75rem;
    border-radius: 6px;
    margin: 0;
}
.day-name {
    font-size: 0.7rem;
    margin-bottom: 2px;
}
.day-date {
    font-size: 0.9rem;
    font-weight: bold;
}
.day-btn.today {
    background: var(--warning);
    color: white;
}
.day-btn.active {
    background: var(--primary);
    color: white;
}

  /* 3️学习计划板块与顶部对齐 */
  .main-content {
    width: 100%;
    max-width: 100%;
  }
  .tasks-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* 4️⃣ 专注模式计时器按钮缩小 */
  .focus-controls .focus-btn {
    padding: 8px 16px;
    font-size: 1rem;
  }
  .focus-timer-display {
    font-size: 3rem;
  }
  .focus-task-content {
    width: 100vw;                /* 专注卡片也占满 */
    max-width: 100vw;
    border-radius: 0;
    margin-left: -20px;
    margin-right: -20px;
    padding: 60px 15px 15px;     /* 调整内边距，顶部留出空间给按钮 */
  }
}

@media (max-width: 768px) {
  /* 1. 让卡片内容容器占满卡片可用宽度 */
  .card-content {
    width: 100%;
    /* 原有布局是 flex，保持即可 */
  }

  /* 2. 学习任务内容区域（info + description）占满剩余空间 */
  .data-display-area {
    width: 100% !important;   /* 原来 70%，改为 100% 用满 */
    flex: 1 1 0%;
    box-sizing: border-box;
    padding: 8px 12px;        /* 左右留一点点呼吸感 */
  }

  /* 3. 操作区域保持固定宽度，不跟着放大 */
  .action-section {
    width: auto;              /* 原来 30%，改为 auto 按内容撑开即可 */
    min-width: 110px;         /* 给按钮留最小空间 */
    flex-shrink: 0;           /* 防止被挤压 */
  }

  /* 4. info-row 保证自动换行，防止文字溢出 */
  .info-row {
    flex-wrap: wrap;
    word-break: break-word;
  }
}

@media (max-width: 768px) {
  header {
    position: relative;
    padding: 0;
    text-align: left;
  }

  .header-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
  }

  .header-left {
    align-items: flex-start;
    width: auto;
    padding: 15px 15px 15px 15px;
  }

  /* 标题样式 */
  header h2 {
    margin: 0 5px 0 0;
    font-size: 2.2rem;
    color: white;
    font-weight: 700;
    display: inline-block;
  }

  header h3 {
    margin: 0;
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    display: inline-block;
  }

  #subTitle {
    font-size: 0.9rem !important;
    margin: 5px 0 0 0 !important;
  }

  /* 账户控制正常显示 */
  .header-right {
    width: auto;
    justify-content: flex-end;
    padding: 15px 15px 15px 15px;
  }

  .account-controls {
    position: static;
    margin-top: 0;
  }

  .account-trigger {
    background: transparent;
    padding: 2px 4px;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    min-height: auto;
    font-size: .75rem;
  }

  /* 确保下拉浮层仍然在最上层，与桌面端一致的定位 */
  .account-menu {
    position: absolute;
    top: 70px;
    right: 10px;
    left: auto;
    z-index: 9999;
  }
}

@media (max-width: 768px) {
  .sidebar.collapsed {
    min-height: 0;          /* 去掉最小高度限制 */
    padding: 6px 4px;       /* 上下左右内边距全部缩小 */
    height: 44px;           /* 明确给一个紧凑高度 */
  }

  .sidebar.collapsed .sidebar-header {
    line-height: 1;         /* 去掉多余行高 */
  }

  .sidebar.collapsed .sidebar-header h2 {
    font-size: 1.2rem;      /* 文字更小 */
  }

  .sidebar.collapsed .sidebar-header h2 i {
    font-size: 1.2rem;        /* 图标大小也可再缩一点 */
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;          /* 单列布局 */
  }

  .stat-chart {
    min-width: 0 !important;             /* 去掉固定 500px */
    width: 100%;                         /* 撑满父容器 */
    overflow-x: hidden;                  /* 禁止横向滚动 */
  }
}

@media (max-width: 768px) {
  /* 1️缩小任务卡片整体高度 */
  .task-card {
    height: auto !important;
    min-height: 110px; /* 可根据需要再压缩 */
    padding-bottom: 5px;
  }

  /* 2️操作区域整体上移 */
  .action-section {
    padding-top: 0 !important;
    margin-top: -10px; /* 关键：上移按钮区域 */
    gap: 5px !important; /* 缩小按钮间距 */
  }

  /* 3️计时器与按钮紧凑排列 */
  .timer-display {
    font-size: 1.3rem !important;
    padding: 6px 8px !important;
    margin-bottom: 2px !important;
  }

  .timer-controls {
    gap: 4px !important; /* 按钮更紧凑 */
  }

  .timer-btn {
    width: 40px !important;
    height: 32px !important;
    font-size: 14px !important;
  }

  /* 4️⃣ 内容区域底部留白减少 */
  .data-display-area {
    padding-bottom: 2px !important;
  }

  .description-box {
    margin-bottom: 2px !important;
  }
}

@media (max-width: 768px) {
    /* 1️⃣ 隐藏“年月第几周” */
    .current-date-display {
        display: none !important;
    }

    /* 2️⃣ 让标题行变成一行 */
    .header-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 8px;   /* 标题与按钮间距 */
        width: 100%;
    }

    /* 3️⃣ 标题允许收缩，按钮不折行 */
    .header-row h2 {
        flex: 1 1 auto;
        white-space: nowrap;
        margin: 0;
    }

    .add-task-main-btn {
        flex-shrink: 0;
        white-space: nowrap;
        margin-left: 0;   /* 取消原来的 margin-left:auto 影响 */
    }
}

@media (max-width: 768px) {
    .task-list-main {
        gap: 10px !important;   /* 可改成你想要的数值 */
    }
    .task-card {
        margin: 0 !important;   /* 清零任何意外 margin */
        width: 100% !important; /* 确保卡片宽度100% */
        transform: none !important; /* 确保没有缩放效果 */
    }
}

@media (max-width: 768px) {
    /* 1. 容器只保留左右 5px，上下 2px */
    .week-days-container {
        padding: 2px 5px !important;   /* 上下 2px 足够 */
        margin-bottom: 10px;           /* 底部空隙也可减半 */
    }

    /* 2. 关键：把 .week-days 的上下 gap/padding 清零 */
    .week-days {
        gap: 2px !important;           /* 按钮之间只留 2px */
        padding: 0 !important;         /* 去掉它自己的上下 padding */
        align-items: center;           /* 让按钮垂直居中 */
    }

    /* 3. 按钮本身压扁一点（按需） */
    .day-btn {
        padding: 4px 2px !important;   /* 上下 4px 足够 */
        font-size: 0.75rem;
        line-height: 1;                /* 防止行高撑高 */
    }
}

@media (max-width: 768px) {
    .add-task-main-btn {
        width: 50%; /* 设置按钮宽度为父容器的45% */
        padding: 2px; /* 调整内边距 */
        margin: 0 2px; /* 调整按钮之间的间距 */
    }
	 }

@media (max-width: 768px) {
    .badge-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 16px;
    }

    .bdg-card {
        padding: 18px 10px 14px;
        min-height: 170px;
    }

    .bdg-icon-ring {
        width: 56px; height: 56px;
    }

    .bdg-icon-ring i {
        font-size: 28px !important;
    }

    .bdg-name {
        font-size: 0.85rem;
    }

    .bdg-desc {
        font-size: 0.72rem;
    }

    .bdg-icon-ring i {
        font-size: 26px !important;
    }

    .bdg-name {
        font-size: 0.85rem;
    }

    .bdg-desc {
        font-size: 0.72rem;
    }

    /* 响应式下调整绶带大小 */
    .badge-item::before {
        width: 50%;
        height: 12px;
        top: -6px;
    }
}

@media (max-width: 768px) {
  .badge-controls {
    flex-wrap: wrap;          /* 允许换行 */
    gap: 8px 1px;             /* 上下、左右间距 */
    justify-content: left;  /* 居中 */
  }

  .badge-controls .add-task-main-btn {
    flex: 1 1 auto;           /* 允许收缩 */
    min-width: 0;             /* 防止被内容撑开 */
    max-width: 110px;         /* 最大宽度≈4个汉字 */
    padding: 6px 8px;         /* 缩小左右留白 */
    font-size: 0.85rem;       /* 字号稍小 */
    white-space: nowrap;      /* 不换行 */
    overflow: hidden;
    text-overflow: ellipsis;  /* 过长省略号 */
  }
  /* 排序相关样式 */
.sort-container {
    position: relative;
    display: inline-block;
}

.sort-btn {
    background: #6c757d;
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    color: white;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sort-btn:hover {
    background: #5a6268;
    transform: scale(1.05);
}

.sort-dropdown {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1100; /* ★ 2026-08-18 1000→1100：排序为操作行为，需高于 header(1050) */
    min-width: 150px;
    top: 100%;
    left: 0;
}

.sort-option {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9rem;
}

.sort-option:hover {
    background: #f0f7ff;
}

.sort-option:last-child {
    border-bottom: none;
}
@media (max-width: 768px) {
    /* 排序按钮在移动端调整 */
    .sort-btn {
        padding: 4px 8px;
        font-size: 0.8rem;
    }

    .sort-dropdown {
        min-width: 130px;
    }

    .sort-option {
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    /* 现有的移动端样式 */
}
}

@media (max-width: 768px) {
    .icon-selection-container {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        padding: 10px;
    }

    .icon-option {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    /* 任务卡片间距优化 */
    .task-list-main {
        gap: 8px !important;
    }

    .task-card {
        margin-bottom: 6px !important;
        height: 100px !important; /* 稍微降低高度 */
    }

    /* 任务卡片内部间距调整 */
    .data-display-area {
        padding: 6px 10px !important;
    }

    .info-row {
        margin-bottom: 4px !important;
    }

    .task-title {
        font-size: 1.1rem !important;
        margin-right: 6px !important;
    }

    .description-box {
        max-height: 50px !important;   /* ★ 2026-08-08 平板（481-768px）恢复昨天版本：多行截断（单行省略移至 ≤480px 手机专用） */
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
        padding: 4px 6px !important;
    }

    /* 计时器区域优化 */
    .action-section {
        padding: 4px 6px !important;
        gap: 4px !important;
        min-width: 90px !important; /* 确保有足够空间 */
    }

    .timer-display {
        font-size: 1.2rem !important;
        padding: 8px 10px !important;
        margin-bottom: 2px !important;
    }

    .timer-controls {
        gap: 4px !important;
    }

    .timer-btn {
        width: 36px !important;
        height: 28px !important;
        font-size: 12px !important;
    }

    .timer-btn i {
        font-size: 12px !important;
    }

    /* 分类栏调整 */
    .category-bar {
        width: 35px !important;
        font-size: 0.9rem !important;
    }

    /* 统计卡片间距 */
    .today-stats {
        gap: 6px !important;
    }

    .stat-card {
        padding: 8px 4px !important;
    }

    .stat-card h3 {
        font-size: 1.2rem !important;
    }

    .stat-card p {
        font-size: 0.75rem !important;
    }

    /* 周视图日期按钮间距 */
    .week-days-container {
        padding: 2px 3px !important;
        margin-bottom: 8px !important;
    }

    .week-days {
        gap: 2px !important;
    }

    .day-btn {
        padding: 3px 1px !important;
        font-size: 0.7rem !important;
    }

    .day-name {
        font-size: 0.65rem !important;
        margin-bottom: 1px !important;
    }

    .day-date {
        font-size: 0.85rem !important;
    }

    /* 标题区域间距 */
    .header-row {
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .date-row {
        padding: 2px 2px !important;
    }

    /* 按钮间距调整 */
    .action-buttons-container {
        gap: 6px !important;
    }

    .add-task-main-btn {
        padding: 6px 10px !important;
        font-size: 0.85rem !important;
        min-width: 0 !important;
    }

    /* 侧边栏折叠状态优化 */
    .sidebar.collapsed {
        padding: 4px 2px !important;
        height: 40px !important;
    }

    .sidebar.collapsed .sidebar-header h2 {
        font-size: 1rem !important;
        gap: 4px !important;
    }

    /* 专注模式按钮间距 */
    .focus-controls {
        gap: 12px !important;
        margin-top: 20px !important;
    }

    .focus-btn {
        padding: 10px 18px !important;
        font-size: 0.95rem !important;
    }

    .focus-timer-display {
        font-size: 2.5rem !important;
        margin: 20px 0 !important;
    }
}

@media (max-width: 768px) {
  /* 只调整尺寸，不改变布局结构 */
  .container {
    padding: 10px;
  }

  /* 任务卡片不缩放，保持与周视图一致宽度 */
  .task-card {
    margin: 2px 0;
  }

  /* 分类栏尺寸调整 */
  .category-bar {
    font-size: 0.9rem;
  }

  /* 字体尺寸调整 */
  .task-title {
    font-size: 1.1rem;
  }

  .description-box {
    font-size: 0.9rem;
    max-height: 50px;
  }

  /* 计时器按钮尺寸调整 */
  .timer-btn {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }

  .timer-display {
    font-size: 1.2rem;
    padding: 8px 10px;
  }

  /* 统计卡片尺寸调整 */
  .today-stats {
    gap: 8px;
  }

  .stat-card {
    padding: 8px 5px;
  }

  .stat-card h3 {
    font-size: 1.3rem;
  }

  .stat-card p {
    font-size: 0.8rem;
  }

  /* 周视图按钮尺寸调整 */
  .day-btn {
    padding: 6px 2px;
    font-size: 0.8rem;
  }

  .day-name {
    font-size: 0.75rem;
  }

  .day-date {
    font-size: 0.9rem;
  }
}

@media (max-width: 768px) {
  /* 底部按钮容器 - 确保不换行 */
  .data-buttons {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 5px !important;
    margin: 15px 0 !important;
  }

  /* 底部按钮等比例缩小 */
  .data-btn {
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
    flex: 1 !important; /* 等分空间 */
    min-width: 0 !important; /* 允许缩小 */
    max-width: 120px !important; /* 限制最大宽度 */
    text-align: center !important;
  }

  /* 按钮图标缩小 */
  .data-btn i {
    font-size: 0.8rem !important;
    margin-right: 4px !important;
  }

  /* 针对小屏幕进一步缩小 */
  @media (max-width: 480px) {
    .data-buttons {
      gap: 5px !important;
    }

    .data-btn {
      padding: 6px 8px !important;
      font-size: 0.75rem !important;
      max-width: 100px !important;
    }

    .data-btn i {
      font-size: 0.7rem !important;
      margin-right: 3px !important;
    }
  }

  /* 针对超小屏幕优化 */
  @media (max-width: 360px) {
    .data-btn {
      padding: 5px 6px !important;
      font-size: 0.7rem !important;
      max-width: 90px !important;
    }

    /* 可以适当缩短按钮文字 */
    .data-btn .btn-text {
      display: inline-block;
      max-width: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

@media (max-width: 768px) {
  .data-buttons {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 0 2px !important;
    margin: 12px 0 !important;
  }

  .data-btn {
    padding: 6px 8px !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .data-btn i {
    font-size: 0.75rem !important;
    margin-right: 4px !important;
  }
}

@media (max-width: 768px) {
  /* 1. 修复整体容器间距 - 释放两侧空间 */
  body {
    padding: 10px 5px !important; /* 减少左右内边距 */
  }

  .container {
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* 2. 修复任务卡片操作区域显示问题 */
  .task-card {
    width: 100% !important;
    margin: 0 0 8px 0 !important;
  }

  .card-content {
    width: 100% !important;
    overflow: hidden !important; /* 防止内容溢出 */
  }

  .data-display-area {
    width: 65% !important; /* 确保数据显示区域不会挤压操作区域 */
    min-width: 0 !important; /* 允许收缩 */
    flex-shrink: 1 !important;
  }

  .action-section {
    width: 35% !important; /* 确保操作区域有足够空间 */
    min-width: 100px !important; /* 最小宽度保证按钮可见 */
    flex-shrink: 0 !important; /* 防止被挤压 */
  }

  /* 3. 修复标题行和按钮布局 */
  .header-row {
    padding: 0 2px !important; /* 减少内边距 */
    margin-bottom: 10px !important;
  }

  .action-buttons-container {
    gap: 5px !important;
    flex-wrap: nowrap !important;
  }

  .add-task-main-btn {
    padding: 6px 10px !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    flex-shrink: 1 !important; /* 允许按钮收缩 */
  }

  /* 4. 修复周视图容器 */
  .week-days-container {
    margin: 0 -2px 10px -2px !important; /* 负边距释放空间 */
    padding: 2px !important;
  }

  .week-days {
    gap: 1px !important;
  }

  .day-btn {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 4px 1px !important;
  }

  /* 5. 修复底部按钮容器 */
  .data-buttons {
    margin: 15px -2px !important; /* 负边距释放空间 */
    padding: 0 2px !important;
    gap: 5px !important;
  }

  .data-btn {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 8px 5px !important;
    font-size: 0.75rem !important;
  }

  /* 6. 修复侧边栏和任务容器 */
  .main-content {
    gap: 10px !important;
    margin: 0 -2px !important; /* 释放空间 */
  }

  .tasks-container {
    padding: 2px 5px !important; /* 减少内边距 */
    margin: 0 !important;
  }

  /* 7. 修复统计卡片容器 */
  .today-stats {
    margin: 10px -2px !important; /* 负边距释放空间 */
    padding: 0 2px !important;
    gap: 4px !important;
  }

  .stat-card {
    padding: 8px 3px !important;
  }
}

@media (max-width: 768px) {
  /* 分类模态框整体优化 */
  #categoryModal .modal-content {
    max-width: 95% !important;
    margin: 0 auto !important;
  }

  /* 图标选择区域保持8列布局 */
  .icon-selection-container {
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 6px !important;
    padding: 10px !important;
  }

  .icon-option {
    width: 35px !important;
    height: 35px !important;
    font-size: 1rem !important;
  }

  /* 颜色选择区域也相应调整 */
  #colorPicker {
    gap: 6px !important;
  }

  .color-option {
    width: 28px !important;
    height: 28px !important;
  }

  /* 副标题缩小 */
  header #subTitle {
    font-size: 0.9rem !important;
    margin: 4px 0 0 0 !important;
  }

  /* 小屏幕进一步优化 */
  @media (max-width: 480px) {
    .icon-selection-container {
      gap: 4px !important;
      padding: 8px !important;
    }

    .icon-option {
      width: 32px !important;
      height: 32px !important;
      font-size: 0.9rem !important;
    }

    header #subTitle {
      font-size: 0.8rem !important;
    }
  }

  /* 超小屏幕优化 */
  @media (max-width: 360px) {
    .icon-selection-container {
      gap: 2px !important;
      padding: 6px !important;
    }

    .icon-option {
      width: 30px !important;
      height: 30px !important;
      font-size: 0.85rem !important;
    }

    .color-option {
      width: 26px !important;
      height: 26px !important;
    }
  }
}

@media (max-width: 768px) {
  /* 确保任务卡片默认就和周视图一样宽，移除所有缩放效果 */
  .task-card {
    width: 100% !important;
    transform: none !important;
  }

  .task-card .repeat-info { display: none; }
  /* 专注模式里照常显示 */
  .focus-task-title .repeat-info { display: inline; }
  /* 调整时间显示位置和字体 */
  .info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px !important;
  }

  .plan-time {
    font-size: 0.8rem !important;
    color: #666;
    order: 2; /* 确保在任务名称下方 */
    width: 100%;
    margin-top: 2px;
  }

  .task-title {
    order: 1; /* 确保任务名称在上方 */
    width: 100%;
  }

  /* 调整任务卡片整体布局 */
  .data-display-area {
    padding: 8px 10px !important;
  }

  .description-box {
    margin-top: 4px;
    order: 3; /* 确保描述在时间下方 */
  }
}

@media (max-width: 768px) {
  /* 任务卡片高度由内容决定（2026-08-08：去除固定 130px 消除空白） */
  .task-card {
    height: auto !important;
    min-height: 0 !important;
  }

  /* 描述区单行省略（2026-08-08） */
  .description-box {
    max-height: 60px !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
    font-size: 0.9rem !important;
    /* ★ 2026-08-08 平板（≤768px）恢复昨天版本：多行显示，超出滚动（去掉单行省略 nowrap） */
    overflow-y: auto !important;
    padding: 6px 8px !important;
  }

  /* 调整内容区域布局，为描述区域腾出更多空间 */
  .data-display-area {
    padding: 8px 10px !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }

  /* 调整信息行间距 */
  .info-row {
    margin-bottom: 8px !important;
    flex: 0 0 auto; /* 不占用额外空间 */
  }


  .timer-btn {
    width: 34px !important;
    height: 28px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 768px) {
  /* 移动端计划时间显示优化 */
  .plan-time {
    font-size: 0.75rem !important;
    color: #666;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    order: 3; /* 确保在任务名称和重复信息下方 */
    width: 100%;
  }

  /* 调整信息行布局 */
  .info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px !important;
  }

  .task-title {
    order: 1;
    width: 100%;
    margin-right: 0 !important;
  }

  .repeat-info {
    order: 2;
    margin-left: 0 !important;
    margin-top: 2px;
  }

  /* 简化计划时间显示 */
  .plan-time::before {
    content: "⏰ ";
    font-size: 0.7rem;
  }
}

@media (max-width: 768px) {
  /* 专注模式两列布局优化 */
  .focus-details {
    grid-template-columns: 1fr 1fr !important; /* 保持两列布局 */
    gap: 12px !important;
  }

  /* 确保每列都有足够的最小宽度 */
  .focus-detail-item {
    min-width: 0 !important; /* 允许缩小 */
    min-height: 60px; /* 设置最小高度确保一致性 */
    padding: 10px !important;
    word-break: break-word; /* 长文本自动换行 */
  }

  /* 任务分类和计划时间各占一半 */
  .focus-detail-item:nth-child(1),
  .focus-detail-item:nth-child(2) {
    flex: 1;
    min-width: 45%; /* 确保每列至少有45%宽度 */
  }

  /* 任务日期和实际时间各占一半 */
  .focus-detail-item:nth-child(3),
  .focus-detail-item:nth-child(4) {
    flex: 1;
    min-width: 45%;
  }

  /* 描述区域单独占一行 */
  .focus-description-section {
    grid-column: 1 / span 2 !important; /* 跨两列 */
    margin-top: 10px !important;
  }

  .focus-description-content {
    max-height: 100px !important;
    padding: 10px !important;
    font-size: 0.9rem;
  }

  /* 专注模式内容区域内边距调整 */
  .focus-task-content {
    padding: 60px 15px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 -2px !important;
    border-radius: 0 !important;
  }

  /* 计时器显示调整 */
  .focus-timer-display {
    font-size: 2.8rem !important;
    margin: 10px 0 !important;
  }

  /* 按钮布局优化 */
  .focus-controls {
    gap: 8px !important;
    flex-wrap: wrap;
    justify-content: center;
  }

  .focus-btn {
    padding: 10px 15px !important;
    font-size: 0.9rem !important;
    min-width: 80px;
  }

  /* 确保专注模式项目标题和内容适应小屏幕 */
  .focus-detail-item h4 {
    font-size: 0.9rem;
    margin-bottom: 6px;
  }

  .focus-detail-item p {
    font-size: 0.85rem;
    line-height: 1.3;
  }
}

@media (max-width: 768px) {
  header h1 {
    font-size: 2.2rem !important;
  }

  .app-slogan {
    font-size: 1.1rem !important; /* 应用名称的一半大小 */
    margin: 0 0 0 10px !important;
  }

  header #subTitle {
    font-size: 0.8rem !important;
    margin: 2px 0 0 0 !important;
  }

  .title-container {
    flex-direction: row;
  }
}

@media (max-width: 768px) {
    .score-card {
        height: auto;
        flex-direction: column;
    }

    .score-category-bar {
        width: 100%;
        height: 40px;
        writing-mode: horizontal-tb;
        text-orientation: mixed;
    }

    .score-card-content {
        flex-direction: column;
    }

    .score-data-display-area {
        width: 100%;
        padding: 12px;
    }

    .score-action-section {
        width: 100%;
        padding: 12px;
        border-left: none;
        border-top: 1px solid #f0f4f8;
    }

    .score-info-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .score-main-title {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    .edit-page .stats-header {
        padding: 12px;
    }

    .edit-page .stats-header h2 {
        font-size: 1.1rem;
    }

    .edit-page .page-body {
        padding: 12px;
    }

    .edit-page .page-footer {
        padding: 10px 12px;
    }

    .edit-page .form-group label {
        font-size: 0.9rem;
    }

    .edit-page .form-control {
        font-size: 0.95rem;
        min-height: 44px;
    }

    .edit-page {
        padding: 0;
        background: var(--light-bg);
    }

    .edit-page .stats-header,
    .edit-page .page-body,
    .edit-page .page-footer {
        max-width: none;
        border-radius: 0;
    }

    .edit-page .stats-header {
        margin-top: 0;
    }

    .page-footer .btn {
        flex: 1;
    }

    .unsaved-confirm-actions .btn {
        max-width: none;
    }
}

@media (max-width: 768px) {
  /* 最外层：纵向排列，取消原横向 flex */
  .score-filters {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  /* 每个「标签+控件」块：改成横向 flex，占 50% */
  .score-filters > div {
    display: flex !important;
    flex: 1 1 48% !important;          /* 两列留 4% 间隙 */
    flex-direction: column !important;
    gap: 6px !important;
  }

  /* 用伪行包裹：保证真正换行 */
  .score-filters {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    row-gap: 12px;
    column-gap: 4%;
  }
  /* 重置按钮：独占一行，靠右 */
  #resetScoreFilters {
    grid-column: 1 / -1;               /* 横跨两列 */
    justify-self: end;
    width: 80px;
    font-size: 0.9rem;
    padding: 6px 0;
    margin: 0 !important;
  }

  /* 文字/输入同步缩小 */
  .score-filters label   { font-size: 0.8rem; }
  .score-filters select,
  .score-filters input[type="date"] {
    width: 100% !important;
    font-size: 0.9rem;
    padding: 6px 8px;
  }
}

@media (max-width: 768px) {
  /* 最外层：纵向排列，取消横向 flex */
  .score-analysis-filters {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  /* 日期区域：一行两列 */
  .score-analysis-filters > div {
    display: flex !important;
    flex: 1 1 48% !important;   /* 两列留 4% 间隙 */
    flex-direction: column !important;
    gap: 6px !important;
  }

  /* 用 grid 保证真正换行 */
  .score-analysis-filters {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    row-gap: 12px;
    column-gap: 4%;
  }

  /* 按钮区域：独占一行，两按钮同排 */
  .score-analysis-filters::after {
    content: "";
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
  #applyAnalysisDateFilter,
  #resetAnalysisDateFilter {
    width: 80px;
    font-size: 0.9rem;
    padding: 6px 0;
    margin: 0 !important;
  }

  /* 文字/输入缩小 */
  .score-analysis-filters label {
    font-size: 0.8rem;
  }
  .score-analysis-filters input[type="date"] {
    width: 100% !important;
    font-size: 0.9rem;
    padding: 6px 8px;
  }
}

@media (max-width: 768px) {
    .rewards-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 14px;
        padding: 14px 6px;
    }

    .rwd-body {
        padding: 14px 10px 12px;
    }

    .rwd-icon-wrap {
        width: 52px; height: 52px;
    }

    .rwd-icon-wrap i {
        font-size: 24px;
    }

    .rwd-name {
        font-size: 0.9rem;
    }

    .rwd-cost span {
        font-size: 1.1rem;
    }

    .rwd-btn {
        font-size: 0.85rem;
        padding: 8px 0;
    }

    .reward-item h4 {
        font-size: 1.1rem; /* 减小标题 */
    }

    .reward-item p {
        font-size: 0.85rem; /* 减小描述 */
    }

    .reward-item .cost {
        font-size: 0.95rem; /* 减小成本文字 */
    }

    .reward-item .btn {
        padding: 6px 10px; /* 减小按钮内边距 */
        font-size: 0.95rem; /* 减小按钮文字 */
    }
}

@media (max-width: 768px) {
    .points-exchange-content .tab-btn {
        padding: 10px 18px; /* 在小屏幕上稍微减小内边距 */
        font-size: 0.95rem; /* 在小屏幕上稍微减小字体 */
        border-radius: 6px 6px 0 0; /* 在小屏幕上调整圆角 */
    }
}

@media (max-width: 768px) {
    /* 基础按钮样式，应用于所有目标按钮 */
    .back-btn,
    .add-task-main-btn,
    .btn.btn-danger,
    .data-btn {
        /* 统一高度和内边距 */
        padding: 8px 12px;
        height: auto;
        min-height: 36px;

        /* 统一字体大小 */
        font-size: 0.85rem;

        /* 统一布局和对齐 */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;

        /* 统一边框和圆角 */
        border: none;
        border-radius: 8px;

        /* 统一过渡效果 */
        transition: all 0.3s ease;

        /* 确保宽度根据内容自适应，不浪费空间 */
        width: auto;
        min-width: fit-content;
        max-width: none;

        /* 确保按钮内容不换行，保持一行显示 */
        white-space: nowrap;

        /* 移除多余的边距 */
        margin: 0 2px;
    }

    /* 按钮容器样式，确保一行能容纳多个按钮 */
    .badge-controls,
    .score-controls,
    .rewards-header,
    .data-buttons {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        align-items: center;
        justify-content: flex-start;

        /* 移除横向滚动，确保内容适应屏幕 */
        overflow-x: hidden;

        /* 统一容器内边距 */
        padding: 0 5px;
        width: 100%;
    }

    /* 针对具体容器的调整 */
    .badge-controls {
        margin-bottom: 15px;
    }

    .score-controls {
        margin-bottom: 15px;
    }

    .rewards-header {
        margin-bottom: 15px;
    }

    .data-buttons {
        justify-content: center;
        margin: 15px 0;
    }

    /* 确保按钮在容器中均匀分布，且每行至少能容纳3个 */
    .badge-controls > button,
    .score-controls > button,
    .rewards-header > button,
    .data-buttons > button {
        flex: 1 1 auto;
        min-width: 80px;
        max-width: calc(33.333% - 5px);
    }

    /* 特殊调整：返回按钮可能需要单独处理，确保其不占据太多空间 */
    .stats-header .back-btn {
        padding: 6px 10px;
        font-size: 0.8rem;
        min-width: auto;
        max-width: auto;
        flex: none;
    }

    /* 移除特定按钮的内联样式，确保统一 */
    #addBatchBadgeBtn,
    #addBatchTaskBtn,
    #addScoreBtn,
    #scoreAnalysisBtn {
        background-color: inherit;
        background: var(--primary);
    }

    /* 批量添加按钮的特殊颜色 */
    #addBatchBadgeBtn,
    #addBatchTaskBtn,
    #scoreAnalysisBtn {
        background: #5bc0de !important;
    }

    /* 确保清空按钮保持危险颜色 */
    .btn.btn-danger {
        background: #e74c3c !important;
    }
}

@media (max-width: 768px) {
    .points-records-table th,
    .points-records-table td {
        font-size: 0.8rem; /* 小屏幕上适当减小字体 */
        padding: 6px 8px; /* 小屏幕上适当减小内边距 */
    }

    /* 小屏幕上保持一致的列宽占比，确保符合要求 */
    .points-records-table th:nth-child(1),
    .points-records-table td:nth-child(1) {
        width: 15%; /* 任务所属日期 */
    }
    .points-records-table th:nth-child(2),
    .points-records-table td:nth-child(2) {
        width: 20%; /* 操作时间 */
    }
    .points-records-table th:nth-child(3),
    .points-records-table td:nth-child(3) {
        width: 20%; /* 任务名称 */
    }
    .points-records-table th:nth-child(4),
    .points-records-table td:nth-child(4) {
        width: 15%; /* 打卡结果 */
    }
    .points-records-table th:nth-child(5),
    .points-records-table td:nth-child(5) {
        width: 15%; /* 积分变动 */
    }
    .points-records-table th:nth-child(6),
    .points-records-table td:nth-child(6) {
        width: 15%; /* 余额 */
    }
}

@media (max-width: 768px) {
    /* ★ 2026-09-07：课程管理改用 flex-wrap 后移动端自动 1 列，无需强制 grid-template-columns:1fr */
    .timetable-grid {
        min-width: 600px;
    }
    .tt-preview-header,
    .tt-preview-row {
        grid-template-columns: 30px 80px 50px 80px 1fr 30px;
        font-size: 11px;
    }
    .tt-cd-events-header,
    .tt-cd-events-row {
        grid-template-columns: 30px 80px 50px 70px 50px;
        font-size: 11px;
    }
}

@media (max-width: 768px) {
    .focus-timer-boxes {
        gap: 6px;
        margin: 12px 0 6px;
    }

    .focus-timer-boxes .timer-unit {
        width: 78px;
        height: 86px;
        border-radius: 14px;
    }

    .focus-timer-boxes .timer-value,
    .focus-timer-boxes .timer-value-input {
        font-size: 2.4rem;
        letter-spacing: 1px;
    }

    .focus-timer-boxes .timer-label {
        font-size: 0.7rem;
        margin-top: 6px;
    }

    .focus-timer-boxes .timer-colon {
        font-size: 1.5rem;
        margin-top: 20px;
    }

    .focus-timer-boxes .timer-arrow {
        font-size: 0.6rem;
        padding: 6px 12px;
    }

    .focus-timer-boxes .timer-arrow.up {
        top: 0;
    }

    .focus-timer-boxes .timer-arrow.down {
        bottom: 14px;
    }

    .focus-timer-boxes .timer-unit.editable .timer-value,
    .focus-timer-boxes .timer-unit.editable .timer-value-input {
        margin-top: 10px;
    }

    .focus-timer-hint {
        font-size: 0.7rem;
    }
}

@media (max-width: 768px) {
    .task-card.periodic-goal {
        min-height: 0 !important; /* 2026-08-08：高度由内容决定 */
        height: auto !important;
    }
    .task-card.periodic-goal .data-display-area {
        justify-content: flex-start !important;
    }
    .task-card.periodic-goal .description-box {
        order: 2 !important;
    }
    .task-card.periodic-goal .card-attachment-indicator {
        order: 3 !important;
    }
    .task-card.periodic-goal .periodic-progress-area {
        order: 4 !important;
    }
}

/* ===== @media (max-width: 480px) — Small Mobile (480px) ===== */
   @media (max-width: 480px) {
  .today-stats {
    gap: 4px;
  }

  .stat-card {
    min-width: 0; /* 允许 grid 轨道收缩以适配 --card-columns 指定的列数 */
    padding: 8px 3px;
  }

  .stat-card h3 {
    font-size: 1.4rem;
  }

  .stat-card p {
    font-size: 0.75rem;
  }

  .stat-card::after {
    height: 3px;
  }

  /* 手机端单独调整header元素边距 */
  .header-content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .header-left {
    padding: 5px 15px 5px 5px;
    width: auto;
  }

  .header-right {
    padding: 5px 5px 5px 15px;
    width: auto;
    justify-content: flex-end;
  }

  /* 修复标题样式 - 针对实际使用的h2和h3标签 */
  header h2 {
    font-size: 2.2rem;
    margin-bottom: 0;
    display: inline-block;
  }

  header h3 {
    font-size: 1.1rem;
    margin-bottom: 0;
    display: inline-block;
  }

  /* 确保账户控制正常显示 */
  .account-trigger {
    background: transparent;
    padding: 2px 4px;
    border: none;
    align-items: center;
    min-height: auto;
  }
}

@media (max-width: 480px) {
    .badge-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .task-card {
        height: auto !important; /* 2026-08-08：高度由内容决定，去除固定 95px */
    }

    .action-section {
        min-width: 85px !important;
    }

    .timer-display {
        font-size: 1.1rem !important;
        padding: 6px 8px !important;
    }

    .timer-btn {
        width: 32px !important;
        height: 26px !important;
    }

    .today-stats {
        gap: 4px !important;
    }

    .stat-card h3 {
        font-size: 1.1rem !important;
    }

    .stat-card p {
        font-size: 0.7rem !important;
    }
}

@media (max-width: 480px) {
  .timer-btn {
    width: 28px;
    height: 28px;
  }

  .timer-display {
    font-size: 1.1rem;
    padding: 6px 8px;
  }

  .stat-card h3 {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  body {
    padding: 8px 3px !important;
  }

  .data-display-area {
    width: 60% !important;
  }

  .action-section {
    width: 40% !important;
    min-width: 90px !important;
  }

  .add-task-main-btn {
    padding: 5px 5px !important;
    font-size: 0.75rem !important;
  }

  .data-btn {
    padding: 6px 4px !important;
    font-size: 0.7rem !important;
  }
}

@media (max-width: 480px) {
  .task-card {
    height: auto !important; /* 2026-08-08：高度由内容决定，去除固定 150px 消除空白 */
    min-height: 0 !important;
  }

  .description-box {
    max-height: 75px !important;
    min-height: 0 !important; /* 2026-08-08：单行省略，无需最小高度 */
    /* ★ 2026-08-08 手机（≤480px）保留单行省略（用户需求：一行显示仅针对手机） */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 480px) {
  /* 超小屏幕进一步优化 */
  .plan-time {
    font-size: 0.7rem !important;
  }

  /* 可选：隐藏重复信息以节省空间 */
  .repeat-info {
    display: none;
  }

}

@media (max-width: 480px) {
  /* 超小屏幕专注模式优化 */
  .focus-task-content {
    padding: 60px 5px 20px !important;
  }

  .focus-task-title {
    font-size: 1.4rem !important;
    margin-bottom: 15px !important;
  }

  .focus-timer-display {
    font-size: 2.2rem !important;
  }

  .focus-controls {
    gap: 5px !important;
  }

  .focus-btn {
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
    min-width: 70px;
  }

  /* 进一步调整两列布局 */
  .focus-details {
    gap: 8px !important;
  }

  .focus-detail-item {
    padding: 8px !important;
    min-height: 55px;
  }

  .focus-detail-item h4 {
    font-size: 0.85rem;
  }

  .focus-detail-item p {
    font-size: 0.8rem;
  }

  /* 隐藏重复信息节省空间 */
  .focus-task-title .repeat-info {
    display: none;
  }
}

@media (max-width: 480px) {
  header h1 {
    font-size: 1.8rem !important;
  }

  .app-slogan {
    font-size: 0.9rem !important; /* 应用名称的一半大小 */
    margin: 0 0 0 8px !important;
  }

  header #subTitle {
    font-size: 0.75rem !important;
    margin: 2px 0 0 0 !important;
  }

  .title-container {
    flex-direction: row;
    align-items: center !important;
    font-size: clamp(1rem, 3.5vw, 2rem);
  }
}

@media (max-width: 480px) {
    .rewards-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* 在更小屏幕上进一步减小卡片最小宽度 */
        gap: 12px; /* 进一步减小间距 */
        padding: 10px; /* 进一步减小内边距 */
    }

    .icon i {
        font-size: 2rem; /* 进一步减小图标 */
    }

    .reward-item h4 {
        font-size: 1rem; /* 进一步减小标题 */
    }

    .reward-item .cost {
        font-size: 0.9rem; /* 进一步减小成本文字 */
    }
}

@media (max-width: 480px) {
    .task-card.periodic-goal {
        min-height: 0 !important; /* 2026-08-08：高度由内容决定（含进度条） */
    }
}

/* ===== 图书馆 Tab 响应式 (600px) ===== */
@media (max-width: 600px) {
    .lib-stats-grid { grid-template-columns:1fr; }
    .hl-stats-grid { grid-template-columns:1fr; }
}

/* ===== 图书馆统计卡片响应式 ===== */
@media (max-width: 480px) {
    .lib-stats { grid-template-columns:repeat(2,1fr); gap:6px; }
    .lib-stat { padding:8px 4px; }
    .lib-stat-val { font-size:.95rem; }
}

/* ===== @media (max-width: 350px) — Tiny Mobile (350px) ===== */
@media (max-width: 350px) {
    .stat-card h3 {
        font-size: 1.2rem;
    }
    .stat-card p {
        font-size: 0.7rem;
    }
}

/* ===== @media (max-width: 360px) — Tiny Mobile (360px) ===== */
@media (max-width: 360px) {
  body {
    padding: 5px 2px !important;
  }

  .data-display-area {
    width: 55% !important;
  }

  .action-section {
    width: 45% !important;
    min-width: 85px !important;
  }

  /* 如果按钮文字仍然太长，可以缩短 */
  .add-task-main-btn span {
    display: none; /* 隐藏文字，只显示图标 */
  }

  .add-task-main-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    justify-content: center !important;
  }
}

@media (max-width: 360px) {
  .task-card {
    height: auto !important; /* 2026-08-08：高度由内容决定，去除固定 160px 消除空白 */
    min-height: 0 !important;
  }

  .description-box {
    max-height: 80px !important;
    min-height: 0 !important; /* 2026-08-08：单行省略，无需最小高度 */
  }
}

@media (max-width: 360px) {
  .focus-details {
    grid-template-columns: 1fr !important; /* 在极窄屏幕上改为单列 */
  }

  .focus-detail-item:nth-child(1),
  .focus-detail-item:nth-child(2),
  .focus-detail-item:nth-child(3),
  .focus-detail-item:nth-child(4) {
    grid-column: 1 !important;
    min-width: 100% !important;
  }

  .focus-description-section {
    grid-column: 1 !important;
  }
}

@media (max-width: 360px) {
  header h1 {
    font-size: 1.6rem !important;
  }

  .app-slogan {
    font-size: 0.8rem !important; /* 应用名称的一半大小 */
  }

  header #subTitle {
    font-size: 0.7rem !important;
    margin: 1px 0 0 0 !important;
  }
}

@media (max-width: 360px) {
    .task-card.periodic-goal {
        min-height: 0 !important; /* 2026-08-08：高度由内容决定（含进度条） */
    }
}

/* ===== @media (max-width: 600px) — Tablet (600px) ===== */
@media (max-width: 600px) {
  header h1 {
    font-size: 2rem !important;
  }

  .app-slogan {
    font-size: 1rem !important; /* 应用名称的一半大小 */
    margin: 0 0 0 8px !important;
  }
}

@media (max-width: 600px) {
    .tm-body { padding: 8px; gap: 12px; }
    .tm-tabs-bar { padding: 8px 10px; border-radius: 10px; }
    .tm-tabs-scroll { gap: 6px; }
    .tm-tab {
        padding: 5px 10px;
        font-size: 0.78rem;
        border-radius: 14px;
        border-width: 1.5px;
    }
    .tm-tab i { font-size: 0.72rem; }
    .tm-tab-add { padding: 5px 9px; }
    .tm-tpl-action-bar { margin-bottom: 10px; gap: 8px; }
    .tm-tpl-action-bar h3 { font-size: 0.95rem; }
    .tm-tpl-list { gap: 8px; }
    .tm-tpl-card { padding: 12px 14px; }
    .tm-tpl-name { font-size: 1rem; }
    .tm-tpl-desc { font-size: 0.82rem; }
}

@media (max-width: 600px) {
    .attachment-item {
        min-width: 100%;
        max-width: 100%;
    }
    .attachment-name {
        max-width: 140px;
    }
    .attachment-view-name {
        max-width: 200px;
    }
    
    .focus-attachment-grid {
        grid-template-columns: repeat(auto-fill, 60px);
        gap: 6px;
    }
    
    .focus-attachment-grid-item {
        height: 60px;
        padding: 6px;
    }
    
    .focus-attachment-grid-icon {
        font-size: 1.2rem;
    }
    
    .focus-attachment-grid-name {
        font-size: 0.65rem;
        max-width: 50px;
    }
}

@media (max-width: 600px) {
    .share-date-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .share-tabs button {
        font-size: 0.85rem;
        padding: 10px 6px;
    }
}

/* ===== @media (max-width: 900px) — Large Tablet (900px) ===== */
@media (max-width: 900px) {
    .batch-task-split {
        flex-direction: column;
    }
    .batch-task-left,
    .batch-task-right {
        flex: 1 1 100%;
        max-width: 100%;
        width: 100%;
        position: static;
    }
    .batch-preview-list {
        max-height: none;
    }
    .batch-card-row {
        flex-wrap: wrap;
    }
}

@media (max-width: 900px) {
    .timebank-left-column {
        width: 160px;
    }

    .timebank-right-column {
        min-width: 360px;
    }

    .timebank-stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .timebank-stat-label {
        font-size: 0.75rem;
    }

    .timebank-stat-value {
        font-size: 1rem;
    }
}

/* ===== @media (max-width: 640px) — Tablet (640px) ===== */
@media (max-width: 640px) {
    .timebank-main-content {
        flex-direction: column;
        align-items: stretch;
    }

    .timebank-left-column {
        width: 100%;
        margin-bottom: 16px;
    }

    .timebank-jar-container svg {
        max-height: 180px;
    }

    .timebank-right-column {
        min-width: 0;
        width: 100%;
    }

    .timebank-cards-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .timebank-stat-card {
        padding: 12px 8px;
        min-height: 90px;
    }

    .timebank-stat-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .timebank-stat-label {
        font-size: 0.7rem;
    }

    .timebank-stat-value {
        font-size: 0.95rem;
    }

    .timebank-exchange-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .exchange-item {
        padding: 12px 8px;
        min-height: 90px;
    }

    .exchange-item-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .exchange-item-name {
        font-size: 0.85rem;
    }

    .exchange-item-time {
        font-size: 0.75rem;
    }

    .add-activity-btn {
        padding: 12px 8px;
        min-height: 90px;
    }

    .add-activity-btn i {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .add-activity-btn span {
        font-size: 0.85rem;
    }
}

/* ===== @media (min-width: 1024px) — Desktop (1024px+) ===== */
@media (min-width: 1024px) {
    .fab-menu { bottom: 40px; right: 40px; width: 72px; height: 72px; }
    .fab-main { width: 72px; height: 72px; font-size: 2.8rem; }
    .fab-sub-btn { width: 74px; height: 74px; font-size: 14px; }
    .fab-menu.open .fab-sub-1 {
        transform: translate(calc(-50% - 110px), calc(-50% - 110px)) scale(1);
    }
    .fab-menu.open .fab-sub-2 {
        transform: translate(calc(-50% - 160px), calc(-50% - 35px)) scale(1);
    }
    .fab-menu.open .fab-sub-3 {
        transform: translate(calc(-50% - 110px), calc(-50% + 35px)) scale(1);
    }
}

/* ========== 补充工具类 ========== */
.flex-1          { flex: 1; }
.flex-wrap       { flex-wrap: wrap; }
.cursor-pointer  { cursor: pointer; }
.font-semibold   { font-weight: 600; }
.font-bold       { font-weight: 700; }
.text-sm         { font-size: 0.9rem; }
.text-xs         { font-size: 0.82rem; }
.m-0             { margin: 0; }
.mb-lg           { margin-bottom: 20px; }
.w-full          { width: 100%; }

/* ========================================
   电子宠物模块样式
   ======================================== */
.pet-page {
    /* 不再单独定义布局，继承 .stats-page 的圆角+阴影+padding */
}
.pet-header-actions {
    display: flex;
    gap: 10px;
}

/* 宠物栏 */
.pet-slot-section {
    background: linear-gradient(135deg, #fff8e7 0%, #fff 100%);
    padding: 16px;
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.pet-slot-title {
    margin: 0 0 4px;
    font-size: 16px;
    color: #8b6f4e;
}
.pet-slot-hint {
    margin: 0 0 12px;
    font-size: 12px;
    color: #a89677;
}
.pet-slot-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.pet-slot {
    width: 90px;
    height: 100px;
    border-radius: 12px;
    background: #f8f8f8;
    border: 2px dashed #ddd;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.pet-slot:hover {
    transform: translateY(-2px);
    border-color: #ff6b9d;
}
.pet-slot-selected {
    background: #e3f2fd !important;
    border: 2px solid #4fc3f7 !important;
    box-shadow: 0 4px 12px rgba(79, 195, 247, 0.3);
}
.pet-slot-sick {
    border-color: #ff9800 !important;
    background: #fff3e0 !important;
}
.pet-slot-deceased {
    opacity: 0.75;
    border-color: #999 !important;
    background: #f0f0f0 !important;
    filter: grayscale(0.85);
}
.pet-slot-deceased:hover {
    transform: none;
    border-color: #999 !important;
    box-shadow: none;
}
.pet-slot-deceased .pet-slot-name {
    color: #999;
}
.pet-slot-deceased .pet-slot-avatar {
    background: #e6e6e6;
}
.pet-slot-empty {
    cursor: default;
    color: #ccc;
}
.pet-slot-add {
    background: #fff8e7 !important;
    border: 2px dashed #ff6b9d !important;
    color: #ff6b9d;
}
.pet-slot-add i {
    font-size: 28px;
}
/* 无宠物时的空状态领养卡片 */
.pet-empty-add-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 30px 20px;
    background: linear-gradient(135deg, #fff8e7 0%, #fff0f5 100%);
    border: 2px dashed #ff6b9d;
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    cursor: pointer;
    transition: all 0.3s;
}
.pet-empty-add-card:hover {
    background: linear-gradient(135deg, #fff0f5 0%, #ffe0ec 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255, 107, 157, 0.2);
}
.pet-empty-add-icon {
    font-size: 48px;
    color: #ff6b9d;
    opacity: 0.6;
}
.pet-empty-add-text {
    font-size: 15px;
    color: #999;
    text-align: center;
}
.pet-empty-add-btn {
    background: linear-gradient(135deg, #ff6b9d, #ff8e53);
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 10px 28px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.pet-empty-add-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 107, 157, 0.4);
}
.pet-slot-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 4px;
    background: #fff;
}
.pet-slot-name {
    font-size: 12px;
    color: #555;
    text-align: center;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pet-slot-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ff9800;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
}
.pet-slot-badge-dead {
    background: #888;
}

/* 主舞台 */
.pet-main-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.pet-main-stage {
    flex: 1;
    min-width: 320px;
    background: linear-gradient(135deg, #4fc3f7 0%, #29b6f6 50%, #66bb6a 100%);
    border-radius: 20px;
    padding: 20px;
    color: #fff;
    position: relative;
    min-height: 380px;
}
.pet-stage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.pet-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pet-nickname {
    font-size: 22px;
    font-weight: bold;
}
.pet-edit-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
}
.pet-edit-btn:hover {
    background: rgba(255,255,255,0.4);
}
/* stage header right (bg dots + music) */
.pet-stage-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pet-bg-dots {
    display: flex;
    gap: 8px;
    align-items: center;
    background: rgba(255,255,255,0.2);
    padding: 6px 10px;
    border-radius: 20px;
}
.pet-bg-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.pet-bg-dot:hover {
    transform: scale(1.2);
}
.pet-bg-dot-active {
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.6), 0 2px 4px rgba(0,0,0,0.25);
}
.pet-stage-music {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    background: rgba(255,255,255,0.15);
    padding: 4px 10px;
    border-radius: 12px;
}
.pet-stage-image-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    margin: 8px 0;
}
.pet-stage-image {
    width: 300px;
    height: 300px;
    max-width: 100%;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.pet-stage-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
/* 宠物聊天气泡 */
.pet-chat-bubble {
    position: absolute;
    top: -10px;
    right: 10px;
    max-width: 240px;
    background: #fff;
    color: #333;
    padding: 10px 14px;
    border-radius: 16px 16px 4px 16px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 5;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.pet-chat-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 16px;
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #fff;
}
.pet-bubble-in { opacity: 1; transform: translateY(0); }
.pet-bubble-out { opacity: 0; transform: translateY(10px); }
.pet-img-sick {
    filter: grayscale(0.5) brightness(0.85);
}
.pet-sick-overlay {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255,152,0,0.9);
    color: #fff;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 13px;
    z-index: 2;
}
.pet-stage-mood {
    text-align: center;
    font-size: 14px;
    background: rgba(255,255,255,0.2);
    padding: 8px 16px;
    border-radius: 16px;
    margin-top: 12px;
}
/* 主舞台底部互动按钮 - 玻璃拟态设计 */
.pet-stage-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 18px;
    padding: 6px;
}
.pet-stage-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 6px 10px;
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.pet-stage-action::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 60%);
    pointer-events: none;
}
.pet-stage-action:hover {
    transform: translateY(-4px) scale(1.04);
    background: rgba(255,255,255,0.32);
    border-color: rgba(255,255,255,0.55);
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.pet-stage-action:active { transform: translateY(-1px) scale(1.0); }
.pet-stage-action-disabled,
.pet-stage-action:disabled {
    opacity: 0.4;
    cursor: not-allowed !important;
    filter: grayscale(0.6);
}
.pet-stage-action-disabled:hover,
.pet-stage-action:disabled:hover {
    transform: none;
    box-shadow: none;
}
.pet-stage-action .pet-act-ico { font-size: 26px; position: relative; z-index: 1; }
.pet-stage-action .pet-act-label { font-size: 13px; font-weight: 600; position: relative; z-index: 1; }
.pet-stage-action .pet-act-cost {
    font-size: 10px;
    color: #fff;
    background: rgba(0,0,0,0.35);
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 2px;
    position: relative;
    z-index: 1;
    font-weight: 600;
}
.pet-stage-action .pet-act-cost { font-size: 11px; color: #888; }
.pet-stage-action[data-action="feed"] .pet-act-ico { color: #e65100; }
.pet-stage-action[data-action="wash"] .pet-act-ico { color: #01579b; }
.pet-stage-action[data-action="play"] .pet-act-ico { color: #1b5e20; }
.pet-stage-action[data-action="sleep"] .pet-act-ico { color: #4a148c; }
.pet-empty-stage {
    text-align: center;
    color: #fff;
    padding: 60px 20px;
}
.pet-empty-stage i {
    font-size: 60px;
    opacity: 0.5;
    margin-bottom: 12px;
}

/* 开关 */
.pet-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}
.pet-switch input {
    display: none;
}
.pet-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.3);
    border-radius: 20px;
    transition: 0.3s;
}
.pet-switch-slider:before {
    content: "";
    position: absolute;
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.3s;
}
.pet-switch input:checked + .pet-switch-slider {
    background: rgba(255,255,255,0.6);
}
.pet-switch input:checked + .pet-switch-slider:before {
    transform: translateX(16px);
}

/* 侧边栏：档案 + 属性 */
.pet-side-panel {
    width: 340px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.pet-profile {
    border: 1px solid var(--pet-border, #f48fb1);
    border-radius: 20px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}
.pet-profile::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 120px; height: 120px;
    background: radial-gradient(circle, var(--pet-accent, #ff6b9d) 0%, transparent 70%);
    opacity: 0.12;
    border-radius: 50%;
    pointer-events: none;
}
.pet-profile-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}
.pet-profile-avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pet-light, #fce4ec), var(--pet-chip, #f8bbd0));
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 12px var(--pet-glow, rgba(236,64,122,0.25));
    flex-shrink: 0;
    border: 3px solid #fff;
}
.pet-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pet-profile-head-info { flex: 1; min-width: 0; }
.pet-profile-name-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 4px;
}
.pet-profile-name {
    font-size: 18px; font-weight: 700; color: #333;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pet-profile-gender {
    font-size: 18px; font-weight: 700;
}
.pet-profile-type {
    font-size: 12px;
    background: var(--pet-light, #fce4ec);
    color: var(--pet-accent, #ec407a);
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-block;
    font-weight: 500;
}
.pet-profile-edit-btn {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1.5px solid var(--pet-accent, #ff6b9d);
    background: #fff;
    color: var(--pet-accent, #ff6b9d);
    cursor: pointer; font-size: 14px; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pet-profile-edit-btn:hover {
    background: var(--pet-accent, #ff6b9d);
    color: #fff;
    transform: rotate(15deg);
}
.pet-profile-desc {
    background: linear-gradient(135deg, var(--pet-light, #fce4ec), rgba(255,255,255,0));
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13px;
    color: #666;
    line-height: 1.7;
    font-style: italic;
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
}
.pet-profile-desc i {
    color: var(--pet-accent, #ff6b9d); opacity: 0.35; margin-right: 4px;
}
.pet-profile-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}
.pet-profile-chip {
    display: inline-block;
    background: var(--pet-chip, #f8bbd0);
    color: var(--pet-chip-color, #ad1457);
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 500;
}
.pet-profile-empty {
    font-size: 12px; color: #ccc; font-style: italic;
}
.pet-profile-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}
.pet-profile-info-item {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: #666;
    background: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.pet-profile-info-item i { color: var(--pet-accent, #ff6b9d); font-size: 11px; }
.pet-profile-row {
    display: none; /* 隐藏旧版单行 */
}
.pet-profile-tags { display: none; }
.pet-tag { display: none; }
.pet-profile-footer {
    text-align: right;
    position: relative;
    z-index: 1;
}
.pet-btn-release {
    background: #fff;
    border: 1.5px solid #e0e0e0;
    color: #999;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.pet-btn-release:hover {
    border-color: #ef5350;
    color: #ef5350;
    background: #fff5f5;
}
/* 喂养指南按钮（放在释放宠物左侧） */
.pet-btn-guide {
    background: #fff;
    border: 1.5px solid #d6e9f8;
    color: #4fc3f7;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-right: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.pet-btn-guide:hover {
    border-color: #4fc3f7;
    background: #e3f4fd;
    color: #2196f3;
}
.pet-form-hint { margin: 4px 0 0; font-size: 11px; color: #999; }
.pet-sick-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff3e0;
    padding: 12px 16px;
    border-radius: 12px;
    gap: 12px;
    flex-wrap: wrap;
}
.pet-sick-tip { 
    color: #e65100; 
    font-weight: 600; 
    font-size: 14px; 
    padding-top: 10px;
    border-top: 1px dashed #eee;
}
.pet-attrs {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.pet-attr-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    gap: 8px;
}
.pet-attr-icon {
    width: 18px;
    text-align: center;
}
.pet-attr-label {
    width: 36px;
    font-size: 13px;
    color: #666;
}
.pet-attr-bar {
    flex: 1;
    height: 10px;
    background: #f0f0f0;
    border-radius: 5px;
    overflow: hidden;
}
.pet-attr-fill {
    height: 100%;
    transition: width 0.4s;
    border-radius: 5px;
}
.pet-attr-val {
    width: 30px;
    text-align: right;
    font-size: 12px;
    color: #888;
}

/* 等级进度条 */
.pet-level-section {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.pet-level-bar {
    display: block;
    margin-bottom: 8px;
}
.pet-level-section {
    background: linear-gradient(160deg, #fff, var(--pet-light, #fce4ec));
    border: 1px solid var(--pet-border, #f48fb1);
    border-radius: 16px;
    padding: 14px 16px;
    margin-top: 8px;
    box-shadow: 0 4px 14px var(--pet-glow, rgba(236,64,122,0.10));
}
.pet-lv-track {
    display: flex;
    height: 36px;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}
.pet-lv-seg {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    position: relative;
    transition: all 0.3s;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    border-right: 1px solid rgba(255,255,255,0.3);
    background: #e8e8e8;
}
.pet-lv-seg:last-child { border-right: none; }
.pet-lv-seg-filled {
    background: linear-gradient(180deg, var(--pet-accent, #ff6b9d), var(--pet-chip, #f8bbd0)) !important;
}
.pet-lv-seg-current {
    background: linear-gradient(180deg, var(--pet-accent, #ff6b9d), var(--pet-chip, #f8bbd0)) !important;
    box-shadow: inset 0 0 16px rgba(255,255,255,0.5), 0 0 12px var(--pet-glow, rgba(236,64,122,0.4));
    z-index: 1;
    transform: scaleY(1.05);
}
@keyframes lvSegPulse {
    0%, 100% { filter: brightness(1.0); }
    50% { filter: brightness(1.2); }
}
.pet-lv-progress {
    height: 8px;
    background: rgba(0,0,0,0.06);
    border-radius: 4px;
    margin-top: 10px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
}
.pet-lv-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--pet-chip, #f8bbd0), var(--pet-accent, #ff6b9d), var(--pet-accent, #ff6b9d));
    border-radius: 4px;
    transition: width 0.5s ease;
    box-shadow: 0 0 8px var(--pet-glow, rgba(236,64,122,0.5));
}
.pet-exp-text {
    text-align: center;
    margin-top: 12px;
    font-size: 13px;
    color: #666;
}

/* 操作按钮 */
.pet-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    background: #f3e5f5;
    padding: 16px;
    border-radius: 16px;
}
.pet-action-btn {
    flex: 1;
    min-width: 120px;
    padding: 14px 12px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}
.pet-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.pet-action-feed   { background: #ffe0b2; color: #e65100; }
.pet-action-wash   { background: #b3e5fc; color: #01579b; }
.pet-action-play   { background: #c8e6c9; color: #1b5e20; }
.pet-action-sleep  { background: #e1bee7; color: #4a148c; }
.pet-action-revive { background: #ffcdd2; color: #b71c1c; }
.pet-deceased-hint {
    text-align: center;
    color: #888;
    padding: 20px;
    width: 100%;
    font-style: italic;
}

/* 弹窗 */
.pet-modal-mask {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.pet-modal {
    background: #fff;
    border-radius: 16px;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.pet-modal-sm {
    max-width: 380px;
}
.pet-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
}
.pet-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    line-height: 1;
}
.pet-modal-close:hover { color: #333; }
.pet-modal-body {
    padding: 20px;
    overflow-y: auto;
}
.pet-modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}
.pet-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.pet-btn-primary { background: #ff6b9d; color: #fff; }
.pet-btn-primary:hover { background: #e91e63; }
.pet-btn-secondary { background: #f0f0f0; color: #666; }
.pet-btn-secondary:hover { background: #e0e0e0; }

/* ===== 升级祝贺弹窗 ===== */
.pet-levelup-mask {
    background: rgba(0,0,0,0.6);
    animation: pet-fade-in 0.3s ease;
}
.pet-levelup-mask.pet-levelup-fadeout {
    animation: pet-fade-out 0.3s ease forwards;
}
@keyframes pet-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes pet-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
.pet-levelup-card {
    background: linear-gradient(160deg, #fff7e6 0%, #fff0f5 40%, #e8f4fd 100%);
    border-radius: 24px;
    max-width: 360px;
    width: 90%;
    padding: 32px 24px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(255,107,157,0.3), 0 8px 20px rgba(0,0,0,0.15);
    animation: pet-levelup-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes pet-levelup-pop {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.pet-levelup-confetti {
    position: absolute;
    top: -30px;
    animation: pet-confetti-fall 3s linear forwards;
    pointer-events: none;
    z-index: 0;
}
@keyframes pet-confetti-fall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(450px) rotate(720deg); opacity: 0; }
}
.pet-levelup-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ff6b9d, #ff8e53);
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    padding: 8px 24px;
    border-radius: 30px;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(255,107,157,0.4);
    position: relative;
    z-index: 1;
}
.pet-levelup-img-wrap {
    width: 180px;
    height: 180px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    position: relative;
    z-index: 1;
}
.pet-levelup-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.pet-levelup-title {
    font-size: 26px;
    color: #333;
    margin: 0 0 8px;
    position: relative;
    z-index: 1;
}
.pet-levelup-name {
    font-size: 18px;
    color: #ff6b9d;
    font-weight: 600;
    margin: 0 0 4px;
    position: relative;
    z-index: 1;
}
.pet-levelup-sub {
    font-size: 14px;
    color: #888;
    margin: 0 0 20px;
    position: relative;
    z-index: 1;
}
.pet-levelup-close {
    background: linear-gradient(135deg, #ff6b9d, #ff8e53);
    color: #fff;
    border: none;
    padding: 12px 40px;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 12px rgba(255,107,157,0.3);
}
.pet-levelup-close:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(255,107,157,0.5);
}

/* ===== 喂养指南 ===== */
.pet-guide-body {
    max-height: 60vh;
    overflow-y: auto;
    padding: 16px 20px !important;
}
.pet-guide-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}
.pet-guide-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.pet-guide-section h3 {
    font-size: 16px;
    color: #333;
    margin: 0 0 12px;
    padding: 0;
}
.pet-guide-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #555;
    line-height: 1.7;
}
.pet-guide-item:last-child {
    margin-bottom: 0;
}
.pet-guide-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-top: 1px;
}
.pet-guide-item strong {
    color: #333;
}
.pet-guide-item em {
    font-style: normal;
    color: #ff6b9d;
    font-weight: 600;
}
.pet-guide-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin: 8px 0 12px;
}
.pet-guide-table th {
    background: #f8f9fa;
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #e0e0e0;
    white-space: nowrap;
}
.pet-guide-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f0f0f0;
    color: #555;
    line-height: 1.6;
}
.pet-guide-table tr:hover td {
    background: #fafafa;
}
.pet-guide-note {
    font-size: 12px;
    color: #ff9800;
    margin: 8px 0 0;
    padding: 8px 12px;
    background: #fff8e1;
    border-radius: 8px;
    line-height: 1.6;
}

/* ===== 积分审核（js/pages/points-review.js）：.pr-* 命名空间 =====
   2026-09-14 重做：原实现全部用内联样式硬编码（橙色头部 + #fff8e1 黄底统计卡），
   与全站设计语言（--primary 蓝紫 / --border / --card-bg / --shadow）脱节。
   现结构色一律走全站变量，语义色复用 --success/--danger/--warning。 */
.pr-modal {
    max-width: 680px;
    width: 92%;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;          /* 覆盖 .modal-content 的 overflow-y，改由 .pr-body 内部滚动 */
}
.pr-modal .modal-header { flex: 0 0 auto; }
.pr-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    background: var(--light-bg);   /* 浅底 + 白卡，建立层次 */
}

/* --- 顶部统计 --- */
.pr-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 8px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px var(--shadow);
}
.pr-stat { text-align: center; min-width: 0; }
.pr-stat-num {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.pr-num-pending { color: var(--warning); }
.pr-num-handled { color: var(--success); }
.pr-num-points { color: #e6a700; }
.pr-stat-label {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 2px;
    white-space: nowrap;
}
.pr-num-types {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: center;
    padding-top: 4px;
    font-size: 11px;
    font-weight: 600;
}
.pr-mini {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    line-height: 1.7;
    white-space: nowrap;
}
.pr-mini-task { background: rgba(75, 108, 183, 0.12); color: var(--primary); }
.pr-mini-habit { background: rgba(123, 104, 238, 0.14); color: var(--time-bank); }

/* --- 批量操作条 --- */
.pr-batch {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.pr-batch-btn {
    flex: 1 1 0;
    min-width: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.pr-batch-approve {
    background: var(--success);
    color: #fff;
    border: 1px solid var(--success);
}
.pr-batch-approve:hover { background: #3f9a43; border-color: #3f9a43; }
.pr-batch-reject {
    background: var(--card-bg);
    color: var(--danger);
    border: 1px solid #f0b4b0;      /* 危险操作用描边，降低视觉权重 */
}
.pr-batch-reject:hover { background: #fdecea; }
.pr-batch-hint {
    flex-basis: 100%;
    font-size: 12px;
    color: var(--text-light);
    text-align: center;
}

/* --- 条目卡 --- */
.pr-list { padding-bottom: 4px; }
.pr-item {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px 12px 16px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px var(--shadow);
    transition: box-shadow 0.2s ease, opacity 0.2s ease;
}
.pr-item::before {                  /* 左侧色条区分来源 */
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
}
.pr-item--habit::before { background: var(--time-bank); }
.pr-item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }

/* 本次已处理回执态 */
.pr-item--done { opacity: 0.88; background: #fafbfc; }
.pr-item--approved::before { background: var(--success); }
.pr-item--rejected::before { background: #c4c9d1; }
.pr-item--rejected .pr-name { color: var(--text-light); font-weight: 500; }

.pr-item-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 6px;
}
.pr-item-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}
.pr-type {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.pr-type--task { background: rgba(75, 108, 183, 0.12); color: var(--primary); }
.pr-type--habit { background: rgba(123, 104, 238, 0.14); color: var(--time-bank); }
.pr-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    word-break: break-word;
}
.pr-points {
    font-size: 17px;
    font-weight: 700;
    color: #e6a700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* 已拒绝：分值作废，灰掉 + 删除线，避免「已拒绝却还显示 +5」的误导 */
.pr-points--void {
    color: #b9bfc9;
    text-decoration: line-through;
}
.pr-meta {
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.5;
    margin-bottom: 10px;
}
.pr-dot { color: #c8ccd4; }

/* --- 操作行 --- */
.pr-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pr-score {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}
.pr-score-input {
    width: 62px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: var(--text);
}
.pr-score-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(75, 108, 183, 0.15);
}
.pr-score-unit { font-size: 12px; color: var(--text-light); }
.pr-btns {
    display: flex;
    gap: 8px;
    margin-left: auto;
}
.pr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.pr-btn-approve { background: var(--success); color: #fff; }
.pr-btn-approve:hover { background: #3f9a43; }
.pr-btn-reject {
    background: var(--card-bg);
    color: var(--danger);
    border-color: #f0b4b0;
}
.pr-btn-reject:hover { background: #fdecea; }

/* --- 处理回执 / 空状态 / 底部 --- */
.pr-done {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}
.pr-done--ok { color: var(--success); }
.pr-done--no { color: var(--text-light); }
.pr-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(76, 175, 80, 0.08);
    border: 1px solid rgba(76, 175, 80, 0.3);
    color: #2e7d32;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
}
.pr-banner i { font-size: 18px; }
.pr-empty {
    text-align: center;
    padding: 36px 16px;
}
.pr-empty-icon {
    display: block;
    font-size: 42px;
    color: var(--success);
    margin-bottom: 12px;
}
.pr-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}
.pr-empty-text { font-size: 13px; color: var(--text-light); }
.pr-footer {
    flex: 0 0 auto;
    justify-content: space-between;
    align-items: center;
}
.pr-progress { font-size: 12px; color: var(--text-light); }

/* --- 移动端 --- */
@media (max-width: 640px) {
    .pr-modal { width: 94%; max-height: 90vh; }
    .pr-summary { grid-template-columns: repeat(2, 1fr); row-gap: 12px; }
    .pr-actions { flex-direction: column; align-items: stretch; }
    .pr-btns { margin-left: 0; }
    .pr-btn { flex: 1 1 0; padding: 10px; }
    .pr-score { justify-content: flex-start; }
    .pr-footer {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 8px;
    }
    .pr-footer .btn { width: 100%; }
    .pr-progress { text-align: center; }
}

/* 历史遗留（当前无引用，暂留兼容） */
.action-card {
    cursor: pointer;
    transition: all 0.3s ease;
}
.action-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 分类Tab */
.pet-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}
.pet-tab {
    padding: 6px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    background: #fff;
    font-size: 13px;
    color: #888;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.pet-tab:hover { border-color: #ff6b9d; color: #ff6b9d; }
.pet-tab-active { background: #ff6b9d; color: #fff; border-color: #ff6b9d; }

/* 图鉴网格 */
.pet-codex-grid { overflow-y: auto; max-height: 50vh; }

/* 图鉴卡片 */
.pet-codex-card {
    display: inline-block;
    width: calc(33.33% - 12px);
    margin: 6px;
    padding: 12px;
    border: 2px solid #eee;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    vertical-align: top;
}
.pet-codex-card:hover {
    border-color: #ff6b9d;
    transform: translateY(-2px);
}
.pet-codex-owned { border-color: #66bb6a; background: #e8f5e9; cursor: not-allowed; }
.pet-codex-locked { opacity: 0.6; cursor: not-allowed; }
.pet-codex-img {
    width: 80px;
    height: 80px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: #f8f8f8;
    overflow: hidden;
}
.pet-codex-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pet-codex-name {
    font-weight: bold;
    margin-bottom: 4px;
}
.pet-codex-status {
    font-size: 12px;
    color: #888;
}
/* 领养卡片上的领养按钮 */
.pet-codex-adopt-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 6px 0;
    background: linear-gradient(135deg, #ff6b9d, #ff8e53);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.pet-codex-adopt-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 2px 8px rgba(255,107,157,0.4);
}
.pet-codex-adopt-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ===== 宠物详情弹窗 ===== */
.pet-detail-hero {
    text-align: center;
    padding: 16px 0;
    background: linear-gradient(135deg, #fce4ec 0%, #f3e5f5 100%);
    border-radius: 12px;
    margin-bottom: 16px;
}
.pet-detail-hero-img {
    width: 140px;
    height: 140px;
    margin: 0 auto;
    border-radius: 50%;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.pet-detail-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pet-detail-info {
    margin-bottom: 16px;
}
.pet-detail-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 12px;
}
.pet-detail-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    font-size: 13px;
    color: #555;
    border-bottom: 1px solid #f0f0f0;
}
.pet-detail-meta-label {
    min-width: 70px;
    color: #999;
    font-size: 12px;
}
.pet-detail-personality {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}
.pet-detail-tag {
    display: inline-block;
    background: linear-gradient(135deg, #ff6b9d, #ff8e53);
    color: #fff;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}
.pet-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}
.pet-detail-info-tag {
    display: inline-block;
    background: #e3f2fd;
    color: #1565c0;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}
.pet-detail-status {
    padding: 10px 14px;
    border-radius: 8px;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}
.pet-detail-owned { background: #e8f5e9; color: #2e7d32; }
.pet-detail-free { background: #e8f5e9; color: #2e7d32; }
.pet-detail-cost { background: #fff3e0; color: #e65100; }
.pet-detail-section-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #ff6b9d;
}
.pet-detail-gallery {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 16px;
    -webkit-overflow-scrolling: touch;
}
.pet-detail-gallery::-webkit-scrollbar { height: 4px; }
.pet-detail-gallery::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
.pet-detail-gallery-item {
    flex-shrink: 0;
    text-align: center;
    border: 2px solid #eee;
    border-radius: 10px;
    padding: 6px;
    transition: all 0.2s;
    cursor: pointer;
}
.pet-detail-gallery-item:hover {
    border-color: #ff6b9d;
    background: #fff5f7;
}
.pet-detail-gallery-img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background: #f8f8f8;
    overflow: hidden;
}
.pet-detail-gallery-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pet-detail-gallery-label {
    font-size: 10px;
    color: #999;
    margin-top: 4px;
}
.pet-detail-adopt-btn {
    display: block;
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #ff6b9d, #ff8e53);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.pet-detail-adopt-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(255,107,157,0.4);
}

.pet-confirm-img {
    width: 120px;
    height: 120px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #f8f8f8;
    overflow: hidden;
}
.pet-confirm-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pet-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    margin-top: 8px;
    box-sizing: border-box;
}
.pet-gender-row {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    font-size: 14px;
}
.pet-form-row {
    margin-bottom: 12px;
}
.pet-form-row label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    color: #666;
}
.pet-memory-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    max-height: 240px;
    overflow-y: auto;
}
.pet-memory-list li {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
    display: flex;
    gap: 12px;
    font-size: 13px;
}
.pet-memory-time {
    color: #999;
    min-width: 130px;
}
.pet-memory-text {
    flex: 1;
}
.pet-memory-empty {
    text-align: center;
    color: #999;
    font-style: italic;
}
.pet-memory-ellipsis {
    justify-content: center !important;
    color: #aaa;
    font-style: italic;
    font-size: 12px;
    padding: 10px 0 !important;
    background: linear-gradient(to right, transparent, #f7f7f7 20%, #f7f7f7 80%, transparent);
    border: none !important;
}

/* 响应式 */
@media (max-width: 768px) {
    .pet-main-row {
        flex-direction: column;
    }
    .pet-side-panel {
        width: 100%;
    }
    .pet-slot {
        width: 70px;
        height: 80px;
    }
    .pet-slot-avatar {
        width: 44px;
        height: 44px;
    }
    .pet-stage-image {
        width: 240px;
        height: 240px;
    }
    .pet-stage-actions { grid-template-columns: repeat(2, 1fr); }
    .pet-codex-card {
        width: calc(50% - 12px);
    }
}
@media (max-width: 480px) {
    .pet-page { padding: 12px; }
    .pet-slot-bar { gap: 6px; }
    .pet-slot { width: 56px; height: 70px; }
    .pet-slot-avatar { width: 36px; height: 36px; }
    .pet-slot-name { font-size: 10px; }
    .pet-empty-add-card { padding: 24px 16px; }
    .pet-empty-add-icon { font-size: 36px; }
    .pet-empty-add-text { font-size: 13px; }
    .pet-stage-image { width: 200px; height: 200px; }
    .pet-nickname { font-size: 18px; }
    .pet-bg-dot { width: 22px; height: 22px; }
    .pet-stage-action .pet-act-ico { font-size: 18px; }
    .pet-stage-action .pet-act-label { font-size: 12px; }
    .pet-detail-hero-img { width: 100px; height: 100px; }
    .pet-detail-gallery-img { width: 48px; height: 48px; }
    .pet-detail-gallery-item { padding: 4px; }
    .pet-codex-card { width: calc(100% - 12px); }
}

@media (max-width: 520px) {
    #petSettingsModal .modal-content {
        max-width: 98% !important;
        width: 98% !important;
        margin: 5px auto !important;
    }
    #petSettingsModal .modal-body {
        padding: 10px !important;
        max-height: 85vh !important;
    }
}

@media (max-width: 420px) {
    #petSettingsModal .modal-content {
        max-width: 99% !important;
        width: 99% !important;
        margin: 2px auto !important;
    }
}

.pet-interaction-card {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 8px;
}

.pet-interaction-card i {
    width: 24px;
    text-align: center;
    font-size: 16px;
}

.pet-interaction-label {
    width: 40px;
    font-size: 14px;
    font-weight: 500;
}

.pet-interaction-grid {
    display: flex;
    gap: 16px;
    font-size: 13px;
    flex: 1;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.pet-interaction-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pet-interaction-key {
    font-weight: 500;
    width: 28px;
}

.pet-interaction-sign {
    font-weight: 600;
}

.pet-interaction-input {
    width: 55px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 3px 8px;
    text-align: center;
    font-size: 13px;
}

@media (max-width: 520px) {
    .pet-interaction-card {
        flex-wrap: wrap;
        padding: 10px;
        gap: 8px;
    }

    .pet-interaction-card i {
        width: 20px;
        font-size: 14px;
    }

    .pet-interaction-label {
        width: 36px;
        font-size: 13px;
    }

    .pet-interaction-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        width: 100%;
    }

    .pet-interaction-item {
        justify-content: flex-start;
    }

    .pet-interaction-key {
        width: 26px;
        font-size: 12px;
    }

    .pet-interaction-input {
        width: 50px;
        font-size: 12px;
        padding: 2px 6px;
    }
}


/* ========== 大转盘样式 ========== */
        #wheelPage .wheel-content * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        #wheelPage {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        #wheelPage .wheel-content {
            max-width: 1000px;
            width: 100%;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            padding: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .wheel-title-container {
            width: 100%;
            margin-bottom: 20px;
            text-align: center;
        }

        .wheel-title-input {
            color: #2c3e50;
            text-align: center;
            font-size: 2.5rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
            background: transparent;
            border: 2px dashed transparent;
            border-radius: 10px;
            padding: 5px 15px;
            outline: none;
            width: 100%;
            max-width: 600px;
            transition: all 0.3s ease;
            font-weight: bold;
        }

        .wheel-title-input:focus {
            border-color: #3498db;
            background: rgba(255, 255, 255, 0.3);
        }

        .wheel-title-input::placeholder {
            color: #95a5a6;
        }

        .wheel-mode-selector {
            display: flex;
            gap: 20px;
            margin: 15px 0;
            flex-wrap: wrap;
            justify-content: center;
        }

        .wheel-mode-btn {
            padding: 12px 25px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 600;
        }

        .wheel-mode-btn.active {
            box-shadow: 0 0 15px rgba(75, 108, 183, 0.3);
        }

        .wheel-container {
            position: relative;
            width: 400px;
            height: 400px;
            margin: 20px auto;
            display: block;
        }

        #wheel {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            transition: transform 0s;
        }

        /* 跑马灯容器 */
        .horse-race-container {
            display: none;
            position: relative;
            width: 100%;
            max-width: 600px;
            height: 200px;
            margin: 20px auto;
            overflow: hidden;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            background: #2c3e50;
        }

        .horse-race-track {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            display: flex;
            transition: transform 0.1s linear;
        }

        .horse-race-item {
            width: 150px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            font-weight: bold;
            font-size: 1.5rem;
            text-align: center;
            padding: 15px;
            box-sizing: border-box;
            border-right: 2px solid rgba(255, 255, 255, 0.1);
            position: relative;
            transition: all 0.3s ease;
        }

        .horse-race-item.highlight {
            box-shadow: inset 0 0 30px rgba(255, 215, 0, 0.7);
            background: rgba(255, 215, 0, 0.1);
            z-index: 2;
            transform: scale(1.05);
        }

        .horse-race-item::after {
            content: '';
            position: absolute;
            top: 10px;
            left: 10px;
            right: 10px;
            bottom: 10px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 10px;
            pointer-events: none;
        }

        .horse-race-pointer {
            position: absolute;
            top: 0%;
            left: 50%;
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-top: 50px solid #e74c3c;
            transform: translate(-50%, -50%);
            z-index: 10;
            filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
        }

        /* 新指针样式 - 带三角形箭头 */
        #wheelPage .pointer {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #wheelPage .pointer-arrow {
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 30px solid #e74c3c;
            position: relative;
            z-index: 2;
        }

        #wheelPage .pointer-stem {
            width: 6px;
            height: 180px;
            background: #e74c3c;
            position: relative;
            top: -1px;
        }

        /* 新指针样式 */
        .new-pointer {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 8px;
            height: 180px;
            background: #e74c3c;
            transform-origin: center center;
            transform: translate(-50%, -50%) rotate(0deg);
            z-index: 10;
            border-radius: 4px 4px 0 0;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
            transition: none;
        }

        /* 添加三角形箭头 */
        .new-pointer::after {
            content: '';
            position: absolute;
            top: -15px;
            left: -10px;
            width: 0;
            height: 0;
            border-left: 14px solid transparent;
            border-right: 14px solid transparent;
            border-bottom: 20px solid #e74c3c;
            z-index: 11;
        }

        #wheelPage .spin-btn {
            padding: 15px 40px;
            font-size: 1.3rem;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 600;
            margin: 20px 0;
            width: 80%;
            max-width: 300px;
        }

        #wheelPage button {
            padding: 12px 25px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 600;
        }

        #wheelPage .template-btn {
            background: var(--primary);
            color: white;
        }

        #wheelPage button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        #wheelPage button:active {
            transform: translateY(1px);
        }

        /* 标签页样式 */
        .wheel-tabs-container {
            width: 100%;
            max-width: 800px;
            margin-top: 20px;
            background: white;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .wheel-tabs-header {
            display: flex;
            margin-bottom: 15px;
            border-bottom: 2px solid #eee;
        }

        .wheel-tab-btn {
            padding: 10px 20px;
            font-size: 1rem;
            background: #f0f0f0;
            border: none;
            cursor: pointer;
            border-radius: 5px 5px 0 0;
            margin-right: 5px;
            color: #7f8c8d;
            font-weight: 500;
            transition: all 0.2s ease;
        }

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

        .wheel-tab-content {
            display: none;
        }

        .wheel-tab-content.active {
            display: block;
        }

        /* 选项列表样式 */
        #wheelPage #options-list {
            display: flex;
            flex-wrap: wrap;
       
            max-height: 200px;
            overflow-y: auto;
            padding: 10px;
            border: 1px solid #eee;
            border-radius: 10px;
            margin-bottom: 20px;
        }

        /* 新的选项标签样式 */
        .option-tag {
            display: inline-flex;
            align-items: center;
            position: relative;
            background: #fff;
            border: 1px solid #e1e8ed;
            border-radius: 8px;
            padding: 8px 28px 8px 14px;
            animation: wheelFadeIn 0.3s ease;
            font-size: 13px;
            color: #333;
            font-weight: 500;
            transition: all 0.2s ease;
            margin: 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }

        .option-tag:hover {
            background: #f8f9fa;
            border-color: var(--primary);
            box-shadow: 0 2px 6px rgba(75,108,183,0.15);
        }

        .tag-text {
            color: #333;
        }

        /* 删除按钮样式 */
        .delete-tag {
            position: absolute;
            top: 50%;
            right: 8px;
            transform: translateY(-50%);
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #f0f0f0;
            color: #999;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 12px;
            line-height: 1;
            transition: all 0.2s ease;
            border: none;
        }

        .delete-tag:hover {
            background: #e74c3c;
            color: #fff;
        }

        .wheel-controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            width: 100%;
        }

        /* 模板列表样式 */
        .wheel-templates-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 12px;
            max-height: 300px;
            overflow-y: auto;
            padding: 12px;
            border: 1px solid #e1e8ed;
            border-radius: 10px;
            margin-bottom: 20px;
            background: #fafafa;
        }

        .template-tag {
            display: flex;
            flex-direction: column;
            position: relative;
            background: #fff;
            border: 1px solid #e1e8ed;
            border-radius: 10px;
            padding: 14px;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 1px 4px rgba(0,0,0,0.04);
            min-height: 80px;
            justify-content: center;
        }

        .template-tag:hover {
            border-color: var(--primary);
            background: #fff;
            box-shadow: 0 4px 12px rgba(75,108,183,0.15);
            transform: translateY(-2px);
        }

        .template-name {
            font-size: 14px;
            color: #333;
            font-weight: 600;
            margin-bottom: 6px;
            word-break: break-word;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .template-options {
            font-size: 12px;
            color: #888;
            word-break: break-word;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 最多显示两行 */
            -webkit-box-orient: vertical;
        }

        /* 模板预览模态框样式 */
        .modal-header-actions {
            display: flex;
            gap: 8px;
            margin-right: 10px;
        }
        .modal-header-actions .btn-sm {
            padding: 4px 12px;
            font-size: 0.75rem;
        }
        .wheel-template-preview-name {
            font-size: 1.2rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e0e0e0;
        }
        .wheel-template-preview-content ul {
            list-style: none;
            padding: 0;
            margin: 0;
            max-height: 300px;
            overflow-y: auto;
        }
        .wheel-template-preview-content li {
            padding: 8px 12px;
            background: #f8f9fa;
            border-radius: 6px;
            margin-bottom: 6px;
            border-left: 3px solid var(--primary, #4b6cb7);
            font-size: 0.9rem;
        }

        /* 模板编辑模态框样式 */
        .wheel-template-edit-form {
            width: 100%;
        }
        .wheel-template-edit-name-row,
        .wheel-template-edit-content-row {
            margin-bottom: 15px;
        }
        .wheel-template-edit-name-row label,
        .wheel-template-edit-content-row label {
            display: block;
            font-weight: 500;
            color: #555;
            margin-bottom: 6px;
            font-size: 0.9rem;
        }
        .wheel-template-edit-name-row .form-control,
        .wheel-template-edit-content-row .form-control {
            width: 100%;
            box-sizing: border-box;
        }

        #wheelPage .templates-controls {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

        /* 模态框样式 */
        #wheelPage .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 100;
            justify-content: center;
            align-items: center;
        }

        #wheelPage .modal-content {
            background: white;
            border-radius: 15px;
            padding: 30px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            animation: wheelModalAppear 0.4s ease;
        }

        #wheelPage .modal-title {
            text-align: center;
            margin-bottom: 20px;
            color: #2c3e50;
        }

        #wheelPage #option-textarea {
            width: 100%;
            height: 150px;
            padding: 15px;
            border: 2px solid #3498db;
            border-radius: 10px;
            font-size: 1.1rem;
            resize: none;
            margin-bottom: 20px;
        }

        #wheelPage .modal-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

        #wheelPage .modal-btn {
            padding: 10px 25px;
            border-radius: 8px;
        }

        #wheelPage .confirm-btn {
            background: #2ecc71;
            color: white;
        }

        #wheelPage .cancel-btn {
            background: #e74c3c;
            color: white;
        }

        #wheelPage .save-template-btn {
            background: linear-gradient(to right, #9b59b6, #1abc9c);
            color: white;
        }

        /* 结果弹窗样式 */
        #wheelResultModal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 100;
            justify-content: center;
            align-items: center;
        }

        #wheelResultModal .result-content {
            background: white;
            border-radius: 15px;
            padding: 40px;
            text-align: center;
            max-width: 500px;
            width: 90%;
            animation: wheelResultAppear 0.5s ease;
        }

        #wheelResultModal .result-title {
            color: #9b59b6;
            margin-bottom: 10px;
            font-size: 2rem;
        }

        #wheelResultModal .result-subtitle {
            font-size: 1.5rem;
            color: #7f8c8d;
            margin: 10px 0;
        }

        #wheelResultModal .result-text {
            font-size: 2.5rem;
            color: #e74c3c;
            font-weight: bold;
            margin: 20px 0;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 10px;
        }

        /* 模板名称输入框 */
        .template-name-input {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 2px solid #3498db;
            border-radius: 8px;
            font-size: 1rem;
        }

        /* 自定义提示框样式 */
        #wheelAlertModal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 100;
            justify-content: center;
            align-items: center;
        }

        #wheelAlertModal .alert-content {
            background: white;
            border-radius: 15px;
            padding: 30px;
            text-align: center;
            max-width: 400px;
            width: 90%;
            animation: wheelModalAppear 0.4s ease;
        }

        #wheelAlertModal .alert-message {
            font-size: 1.2rem;
            margin-bottom: 25px;
            color: #2c3e50;
        }

        /* 动画 */
        @keyframes wheelFadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes wheelModalAppear {
            from { opacity: 0; transform: scale(0.8); }
            to { opacity: 1; transform: scale(1); }
        }

        @keyframes wheelResultAppear {
            from { opacity: 0; transform: scale(0.5) rotate(-10deg); }
            to { opacity: 1; transform: scale(1) rotate(0); }
        }

        /* 卡片高亮动画 */
        @keyframes wheelHighlightPulse {
            0% { transform: scale(1); box-shadow: 0 0 0px rgba(255, 215, 0, 0.7); }
            50% { transform: scale(1.15); box-shadow: 0 0 25px rgba(255, 215, 0, 0.9); }
            100% { transform: scale(1); box-shadow: 0 0 0px rgba(255, 215, 0, 0.7); }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .wheel-container {
                width: 300px;
                height: 300px;
            }

            .wheel-title-input {
                font-size: 2rem;
            }

        #wheelPage .spin-btn {
                font-size: 1.2rem;
                padding: 12px 30px;
            }

            .new-pointer {
                height: 140px;
            }

            .new-pointer::after {
                top: -12px;
                border-left: 12px solid transparent;
                border-right: 12px solid transparent;
                border-bottom: 16px solid #e74c3c;
            }

            .wheel-templates-list {
                justify-content: center;
            }

            .template-tag {
                width: calc(33.333% - 8px); /* 平板尺寸调整 */
            }

            .horse-race-container {
                height: 150px;
            }

            .horse-race-item {
                width: 130px;
                font-size: 1.3rem;
            }

            /* 解决小屏幕模板文字溢出 */
            .template-name, .template-options {
                white-space: normal;
                overflow: visible;
                text-overflow: clip;
            }

            /* 翻牌模式响应式 */
            .card-flip-container {
                height: 250px;
            }
        #wheelPage .card {
                width: 100px;
                height: 130px;
            }
        }

        @media (max-width: 480px) {
            .wheel-container {
                width: 250px;
                height: 250px;
            }

            .wheel-title-input {
                font-size: 1.8rem;
                padding: 5px 10px;
            }

        #wheelPage button {
                width: 100%;
                max-width: none;
            }

            .wheel-controls {
                flex-direction: row;
                flex-wrap: wrap;
            }

        #wheelPage .controls button {
                flex: 1;
                min-width: 120px;
                padding: 10px;
                font-size: 1rem;
            }

            .option-tag {
                min-width: 100px;
                padding: 8px 25px 8px 12px;
            }

            .new-pointer {
                height: 120px;
                width: 6px;
            }

            .new-pointer::after {
                top: -10px;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-bottom: 14px solid #e74c3c;
            }

        #wheelPage .modal-buttons {
                flex-wrap: wrap;
            }

        #wheelPage .modal-buttons button {
                flex: 1;
                min-width: 120px;
            }

            .template-tag {
                width: calc(50% - 6px); /* 手机上一行显示两个模板 */
            }

            .horse-race-container {
                height: 120px;
            }

            .horse-race-item {
                width: 110px;
                font-size: 1.1rem;
            }

            .wheel-mode-selector {
                flex-direction: column;
                gap: 10px;
            }

            /* 解决小屏幕模板文字溢出 */
            .template-tag {
                padding: 8px 12px;
            }

            .template-name {
                font-size: 0.9rem;
                white-space: normal;
                overflow: visible;
                text-overflow: clip;
                -webkit-line-clamp: 2; /* 移动设备上最多显示两行 */
            }

            .template-options {
                font-size: 0.7rem;
                white-space: normal;
                overflow: visible;
                text-overflow: clip;
                -webkit-line-clamp: 2; /* 移动设备上最多显示两行 */
            }

            /* 翻牌模式响应式 */
            .card-flip-container {
                height: 200px;
            }
        #wheelPage .card {
                width: 80px;
                height: 100px;
            }
        #wheelPage .card .card-front {
                font-size: 0.9rem;
            }
        }

        /* =================== 翻牌模式样式 =================== */
        .card-flip-container {
            display: none;
            width: 100%;
            max-width: 800px;
            height: 350px;
            margin: 20px auto;
            perspective: 1000px;
        }

        .card-flip-inner {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            padding: 10px;
            overflow: hidden; /* 禁止滚动 */
        }

        #wheelPage .card {
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.6s, box-shadow 0.3s, z-index 0.3s;
            cursor: pointer;
            z-index: 1;
            transform-origin: center; /* 确保缩放中心在中心 */
            border-radius: 12px; /* 使卡片外边框也有圆角 */
            border: 2px solid transparent; /* 为高亮边框做准备 */
        }

        #wheelPage .card.flipped {
            transform: rotateY(180deg);
        }

        #wheelPage .card.winner {
            transform: scale(1.1) rotateY(180deg);
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
            z-index: 10;
        }

        /* 增强高亮效果 - 更明显的视觉反馈 */
        #wheelPage .card.highlight {
            animation: wheelHighlightPulse 0.3s ease-out forwards;
            z-index: 2;
            border: 2px solid gold;
        }

        #wheelPage .card.highlight .card-back {
            box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
        }

        #wheelPage .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.2rem;
            font-weight: bold;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            padding: 10px;
            box-sizing: border-box;
            transition: all 0.3s ease;
        }

        #wheelPage .card-front {
            background: linear-gradient(135deg, #3498db, #2ecc71);
            color: white;
            transform: rotateY(180deg);
        }

        #wheelPage .card-back {
            background: linear-gradient(135deg, #9b59b6, #e74c3c);
            color: white;
        }

        .card-back::before {
            content: "?";
            font-size: 3rem;
            color: rgba(255, 255, 255, 0.8);
        }

        .card-flip-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #95a5a6;
            font-size: 1.5rem;
            text-align: center;
        }

        /* =================== 发牌模式样式 =================== */
        .card-deal-container {
            display: none;
            position: relative;
            width: 100%;
            max-width: 800px;
            height: 450px;
            margin: 20px auto;
            border-radius: 15px;
            background: linear-gradient(135deg, #3a7bd5, #00d2ff);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            padding: 20px;
            box-sizing: border-box;
            /* 添加相对定位 */
            position: relative;
        }

        #wheelPage .card-deck-area {
            position: absolute;
            top: 50%;
            left: 50px;
            transform: translateY(-50%);
            width: 120px;
            height: 170px;
            z-index: 5;
        }

        #wheelPage .card-stack {
            position: relative;
            width: 100%;
            height: 100%;
        }

        #wheelPage .card-stack .card {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 0.5s;
            cursor: pointer;
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            background: linear-gradient(135deg, #9b59b6, #e74c3c);
        }

        .card-stack .card::before {
            content: "?";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 3rem;
            color: rgba(255, 255, 255, 0.8);
            backface-visibility: hidden;
        }

        #wheelPage .card-table {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            padding: 20px 20px 20px 180px;
            box-sizing: border-box;
            /* 添加滚动条 */
            overflow: auto;
            /* 允许顶部对齐 */
            align-content: flex-start;
        }

        #wheelPage .card-table .card {
            position: relative;
            width: 120px;
            height: 170px;
            transform-style: preserve-3d;
            transition: transform 0.5s, box-shadow 0.3s;
            cursor: pointer;
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            opacity: 0; /* 初始不可见 */
            transform: translateY(20px);
        }

        #wheelPage .card-table .card.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* 修复：使用!important确保优先级 */
        #wheelPage .card-table .card.visible.flipped {
            transform: translateY(0) rotateY(180deg) !important;
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
            z-index: 10;
        }

        #wheelPage .card-table .card .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.2rem;
            font-weight: bold;
            text-align: center;
            padding: 10px;
            box-sizing: border-box;
        }

        #wheelPage .card-table .card .card-back {
            background: linear-gradient(135deg, #9b59b6, #e74c3c);
            color: white;
        }

        .card-table .card .card-back::before {
            content: "?";
            font-size: 3rem;
            color: rgba(255, 255, 255, 0.8);
        }

        #wheelPage .card-table .card .card-front {
            background: linear-gradient(135deg, #3498db, #2ecc71);
            color: white;
            transform: rotateY(180deg);
        }

        .card-deal-placeholder {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 1.5rem;
            text-align: center;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 15px;
            z-index: 2;
        }

        /* 新增：发牌动画效果 */
        #wheelPage .card-clone {
            position: absolute;
            transform-style: preserve-3d;
            z-index: 20;
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: all 0.5s ease-out;
            /* 添加关键样式 */
            display: block;
            opacity: 1;
        }

        #wheelPage .card-clone .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.2rem;
            font-weight: bold;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            padding: 10px;
            box-sizing: border-box;
        }

        #wheelPage .card-clone .card-back {
            background: linear-gradient(135deg, #9b59b6, #e74c3c);
            color: white;
        }

        .card-clone .card-back::before {
            content: "?";
            font-size: 3rem;
            color: rgba(255, 255, 255, 0.8);
        }





/* ========== 大转盘页面样式覆盖（与应用风格统一） ========== */
#wheelPage {
    background: var(--light-bg) !important;
    padding: 25px !important;
    min-height: auto !important;
    border-radius: 15px !important;
    box-shadow: 0 8px 16px var(--shadow) !important;
    margin-top: 20px !important;
}
#wheelPage .stats-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
}
#wheelPage .stats-header h2 {
    font-size: 1.5rem !important;
    margin: 0 !important;
    color: #333 !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
#wheelPage .stats-header h2 i {
    color: var(--primary) !important;
}
#wheelPage .back-btn {
    background: var(--primary) !important;
    color: white !important;
    border: none !important;
    padding: 10px 15px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
}
#wheelPage .back-btn:hover {
    background: #3a5a99 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(75,108,183,0.3) !important;
}
#wheelPage .wheel-content {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
#wheelPage .wheel-title-input {
    color: #2c3e50 !important;
    border-radius: 8px !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    max-width: 600px !important;
    margin: 0 auto 20px !important;
    display: block !important;
    padding: 10px 16px !important;
    outline: none !important;
}
#wheelPage .wheel-title-input:focus {
    border-color: #4b6cb7 !important;
}
#wheelPage .wheel-mode-selector {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    margin: 0 0 20px !important;
    flex-wrap: wrap !important;
}
#wheelPage .wheel-mode-btn {
    padding: 8px 16px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
}
#wheelPage .wheel-mode-btn.active {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}
#wheelPage .spin-btn {
    padding: 12px 30px !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin: 20px auto !important;
    display: block !important;
    box-shadow: 0 4px 10px rgba(75,108,183,0.3) !important;
}
#wheelPage .spin-btn:hover { background: #3a5a99 !important; }
#wheelPage .spin-btn:disabled { opacity: 0.5; cursor: not-allowed; }
#wheelPage .wheel-tabs-container {
    background: #fff !important;
    border-radius: 12px !important;
    padding: 0 !important;
    margin-top: 20px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    width: 100% !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
#wheelPage .wheel-tabs-header {
    display: flex !important;
    border-bottom: 2px solid #f0f0f0 !important;
    background: transparent !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    overflow: hidden !important;
}
#wheelPage .wheel-tab-btn {
    flex: 1 !important;
    background: #f0f0f0 !important;
    border: none !important;
    padding: 14px !important;
    cursor: pointer !important;
    color: #888 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
    border-radius: 5px 5px 0 0 !important;
    margin-right: 5px !important;
}
#wheelPage .wheel-tab-btn.active {
    background: var(--primary) !important;
    color: #fff !important;
}
#wheelPage .wheel-tab-content {
    padding: 16px !important;
    display: none !important;
    background: #fff !important;
}
#wheelPage .wheel-tab-content.active { display: block !important; }
#wheelPage .wheel-controls {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    margin-top: 16px !important;
    padding: 0 !important;
}
#wheelPage .wheel-add-btn,
#wheelPage .wheel-clear-btn {
    padding: 8px 20px !important;
    font-size: 13px !important;
}

/* 选项标签覆盖样式 */
#wheelPage .option-tag {
    background: #fff !important;
    border: 1px solid #e1e8ed !important;
    border-radius: 8px !important;
    padding: 8px 28px 8px 14px !important;
    font-size: 13px !important;
    color: #333 !important;
    margin: 4px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
#wheelPage .option-tag:hover {
    background: #f8f9fa !important;
    border-color: var(--primary) !important;
    box-shadow: 0 2px 6px rgba(75,108,183,0.15) !important;
}
#wheelPage .delete-tag {
    width: 18px !important;
    height: 18px !important;
    right: 8px !important;
    background: #f0f0f0 !important;
    color: #999 !important;
}
#wheelPage .delete-tag:hover {
    background: #e74c3c !important;
    color: #fff !important;
}

/* 模板卡片覆盖样式 */
#wheelPage .wheel-templates-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 12px !important;
    max-height: 300px !important;
    padding: 12px !important;
    border: 1px solid #e1e8ed !important;
    background: #fafafa !important;
}
#wheelPage .template-tag {
    flex-direction: column !important;
    background: #fff !important;
    border: 1px solid #e1e8ed !important;
    border-radius: 10px !important;
    padding: 14px !important;
    min-height: 80px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}
#wheelPage .template-tag:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 4px 12px rgba(75,108,183,0.15) !important;
    transform: translateY(-2px) !important;
}
#wheelPage .template-name {
    font-size: 14px !important;
    color: #333 !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
}
#wheelPage .template-options {
    font-size: 12px !important;
    color: #888 !important;
}

/* 模态框层级提升 */
#wheelOptionModal, #wheelSaveTemplateModal, #wheelConfirmModal { z-index: 9999 !important; }
#wheelResultModal { z-index: 99999 !important; }
#wheelAlertModal { z-index: 99999 !important; }

/* 隐藏页面级外层 */
#wheelPage.stats-page.hidden { display: none !important; }

/* ============================================
   大转盘手机端响应式（在所有 !important 覆盖之后，确保胜出）
   ============================================ */
@media (max-width: 768px) {
    /* 返回首页按钮：与电子宠物一致 */
    #wheelPage .back-btn {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
        white-space: nowrap;
        min-width: 0 !important;
        width: auto !important;
    }
    #wheelPage .stats-header h2 {
        font-size: 1.2rem !important;
    }
    #wheelPage .stats-header {
        gap: 8px;
    }

    /* 模式选择器：横向排列，按钮自然宽度 */
    #wheelPage .wheel-mode-selector {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center !important;
    }
    #wheelPage .wheel-mode-btn {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
    }
    #wheelPage .wheel-mode-btn i {
        font-size: 0.85rem !important;
    }

    /* 选项模板：一行两张 */
    #wheelPage .wheel-templates-list {
        grid-template-columns: repeat(2, 1fr) !important;
        max-height: 360px !important;
    }

    /* 指针箭头居中：border 总宽 24 - 指针宽 8 = 16, 一半 -8 */
    .new-pointer::after {
        left: -8px !important;
    }
}

@media (max-width: 480px) {
    /* 模式按钮：更紧凑 */
    #wheelPage .wheel-mode-selector {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        justify-content: center !important;
    }
    #wheelPage .wheel-mode-btn {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        padding: 6px 8px !important;
        font-size: 0.78rem !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        line-height: 1.2 !important;
    }
    #wheelPage .wheel-mode-btn i {
        font-size: 0.8rem !important;
    }

    /* 添加/清空选项按钮：横向一行 */
    #wheelPage .wheel-controls {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }
    #wheelPage .wheel-add-btn,
    #wheelPage .wheel-clear-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        padding: 8px 6px !important;
        font-size: 0.8rem !important;
        white-space: nowrap;
    }
    #wheelPage .wheel-add-btn i,
    #wheelPage .wheel-clear-btn i {
        font-size: 0.85rem;
    }

    /* 选项模板：一行两张 */
    #wheelPage .wheel-templates-list {
        grid-template-columns: repeat(2, 1fr) !important;
        max-height: 400px !important;
        padding: 8px !important;
        gap: 8px !important;
    }
    #wheelPage .template-tag {
        width: auto !important;
        padding: 10px !important;
        min-height: 70px !important;
    }

    /* 指针箭头居中：border 总宽 20 - 指针宽 6 = 14, 一半 -7 */
    .new-pointer::after {
        left: -7px !important;
    }
}

/* 成绩详情预览弹窗的操作按钮 - 统一白底半透明图标按钮 */
.score-preview-action {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: background 0.2s;
}
.score-preview-action:hover {
    background: rgba(255, 255, 255, 0.3);
}
#btnPreviewDel:hover { background: rgba(231, 76, 60, 0.8); }

/* ========== 头像分类标签栏 ========== */
.avatar-tab-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    background: #f1f5f9;
    border-radius: 10px;
    padding: 4px;
    overflow-x: auto;
}
.avatar-tab {
    flex: 1;
    min-width: 44px;
    padding: 6px 10px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: .75rem;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
    text-align: center;
}
.avatar-tab:hover { color: #334155; background: rgba(75,108,183,.08); }
.avatar-tab.active {
    background: #4B6CB7;
    color: #fff;
    font-weight: 600;
}

/* 头像网格区域（3行限高可滚动） */
.avatar-grid-wrap {
    max-height: 170px;
    overflow-y: auto;
    padding: 2px 0;
    scrollbar-width: thin;
}
.avatar-grid-wrap::-webkit-scrollbar { width: 4px; }
.avatar-grid-wrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.avatar-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
}

/* 账户管理版头像网格（选项42px） */
.acct-avatar-grid-wrap {
    max-height: 155px;
    overflow-y: auto;
    padding: 2px 0;
    scrollbar-width: thin;
}
.acct-avatar-grid-wrap::-webkit-scrollbar { width: 4px; }
.acct-avatar-grid-wrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* 上传Tab中的预览区域 */
.avatar-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px;
}
.avatar-upload-preview {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 2px dashed #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    transition: all .15s;
}
.avatar-upload-preview:hover {
    border-color: #4B6CB7;
    background: rgba(75,108,183,.05);
}
.avatar-upload-preview img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.avatar-upload-preview.has-image {
    border-style: solid;
    border-color: #27ae60;
}
.avatar-upload-plus {
    font-size: 24px;
    color: #94a3b8;
}
.avatar-upload-hint {
    font-size: .7rem;
    color: #94a3b8;
    text-align: center;
}
.avatar-upload-remove {
    font-size: .7rem;
    color: #e74c3c;
    cursor: pointer;
}

/* ========== 圆形头像裁剪弹窗 ========== */
.avatar-crop-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.85);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.avatar-crop-container {
    position: relative;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.6), 0 0 0 3px rgba(255,255,255,.3);
}
.avatar-crop-image {
    position: absolute;
    top: 0; left: 0;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
}
.avatar-crop-image:active { cursor: grabbing; }
.avatar-crop-toolbar {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 280px;
}
.avatar-crop-zoom-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.avatar-crop-zoom-label {
    color: #94a3b8;
    font-size: .75rem;
    flex-shrink: 0;
}
.avatar-crop-zoom-slider {
    flex: 1;
    -webkit-appearance: none;
    height: 4px;
    border-radius: 2px;
    background: #475569;
    outline: none;
}
.avatar-crop-zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #4B6CB7;
    cursor: pointer;
}
.avatar-crop-actions {
    display: flex;
    gap: 12px;
    width: 100%;
}
.avatar-crop-btn {
    flex: 1;
    padding: 10px 0;
    border-radius: 10px;
    border: none;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.avatar-crop-btn-cancel {
    background: rgba(255,255,255,.15);
    color: #fff;
}
.avatar-crop-btn-cancel:hover { background: rgba(255,255,255,.25); }
.avatar-crop-btn-confirm {
    background: #4B6CB7;
    color: #fff;
}
.avatar-crop-btn-confirm:hover { background: #3d5a9b; }

/* ============================================
   汉字笔顺模块样式
   ============================================ */

/* 卡片颜色 */
#hanziStrokeCard h3 { color: #e8590c; }

/* --- 搜索区 --- */
.stroke-search-area {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 15px 20px;
    max-width: 500px;
    margin: 0 auto;
}

/* --- 标签区 --- */
.stroke-tags-area {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 36px;
}

.stroke-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 500;
    background: #f0f0f0;
    color: #333;
    cursor: pointer;
    user-select: none;
    border: 1.5px solid transparent;
    transition: all 0.15s;
}

.stroke-tag:hover {
    background: #ffe0e0;
    border-color: #ffb3b3;
}

.stroke-tag-active {
    background: #d32f2f;
    color: #fff;
    border-color: #b71c1c;
}

.stroke-search-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 25px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.stroke-search-wrapper:focus-within {
    border-color: #e8590c;
}

.stroke-search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 12px 20px;
    font-size: 18px;
    background: transparent;
    min-width: 0;
}

.stroke-search-input::placeholder {
    color: #bbb;
    font-size: 15px;
}

.stroke-search-btn {
    width: 48px;
    height: 48px;
    border: none;
    background: #e8590c;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.stroke-search-btn:hover { background: #d04e0a; }

/* --- 田字格 --- */
.stroke-grid-container {
    display: flex;
    justify-content: center;
    padding: 10px 20px 20px;
}

.tian-zi-ge {
    position: relative;
    width: min(300px, calc(100vw - 60px));
    aspect-ratio: 1 / 1;
    background: #fffdf5;
    border: 3px solid #333;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin: 0 auto;
}

/* 田字格虚线十字 */
.tian-zi-ge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    border-left: 1.5px dashed #d0d0d0;
    z-index: 1;
    pointer-events: none;
}

.tian-zi-ge::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 0;
    border-top: 1.5px dashed #d0d0d0;
    z-index: 1;
    pointer-events: none;
}

.tian-zi-ge-inner {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tian-zi-ge-inner svg {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
}

/* 让 SVG 内容居中 */
.tian-zi-ge-inner svg {
    margin: 0 auto;
}

/* 笔画信息 */
.stroke-info {
    position: absolute;
    bottom: 8px;
    right: 10px;
    font-size: 13px;
    color: #999;
    z-index: 3;
    pointer-events: none;
}

/* --- 笔画控制按钮 --- */
.stroke-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 10px 20px 15px;
    max-width: 500px;
    margin: 0 auto;
}

.stroke-ctrl-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 25px;
    background: #fff;
    color: #555;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.stroke-ctrl-btn:hover:not(:disabled) {
    border-color: #e8590c;
    color: #e8590c;
    background: #fff5f0;
}

.stroke-ctrl-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.stroke-ctrl-pause {
    padding: 10px 24px;
    font-weight: 600;
}

/* --- 书写练习按钮 --- */
.stroke-quiz-area {
    display: flex;
    justify-content: center;
    padding: 0 20px 30px;
}

.stroke-quiz-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 40px;
    border: none;
    border-radius: 28px;
    background: linear-gradient(135deg, #e8590c, #f76707);
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(232, 89, 12, 0.35);
    transition: all 0.2s;
}

.stroke-quiz-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(232, 89, 12, 0.45);
}

.stroke-quiz-btn:active {
    transform: translateY(0);
}

/* --- 汉字信息卡片 --- */
.char-info-card {
    margin: 12px 20px 20px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.char-info-pinyin {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid #f5f5f5;
}

.pinyin-label {
    font-size: 13px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.pinyin-label i {
    color: #d32f2f;
    font-size: 14px;
}

.pinyin-value {
    font-size: 22px;
    font-weight: 700;
    color: #d32f2f;
    letter-spacing: 1px;
}

.char-info-words {
    padding: 14px 20px;
}

.char-info-words .words-label {
    font-size: 13px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
}

.char-info-words .words-label i {
    color: #e68a00;
    font-size: 14px;
}

.words-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.word-chip {
    display: inline-block;
    padding: 6px 14px;
    background: #fff8f0;
    border: 1px solid #ffe0b2;
    border-radius: 20px;
    font-size: 14px;
    color: #e65100;
    cursor: default;
    transition: all 0.2s;
    user-select: none;
}

.word-chip:hover {
    background: #ff9800;
    color: #fff;
    border-color: #ff9800;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
}

.no-data {
    color: #ccc;
    font-size: 14px;
}

/* --- 书写练习弹窗 --- */
.quiz-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-modal-content {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    width: 92%;
    max-width: 420px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: quizFadeIn 0.25s ease;
}

@keyframes quizFadeIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

.quiz-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.quiz-modal-header h3 {
    font-size: 18px;
    color: #333;
    margin: 0;
}

.quiz-close-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 20px;
    color: #888;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.quiz-close-btn:hover { background: #e74c3c; color: #fff; }

.quiz-grid-container {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.quiz-tian-zi-ge {
    width: min(320px, calc(100vw - 60px));
    aspect-ratio: 1 / 1;
}

.quiz-message {
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 16px;
    min-height: 24px;
    line-height: 24px;
}

.quiz-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* --- 响应式适配 --- */
@media (max-width: 480px) {
    .stroke-controls {
        gap: 8px;
    }

    .stroke-ctrl-btn {
        padding: 8px 14px;
        font-size: 13px;
    }

    .stroke-quiz-btn {
        padding: 12px 32px;
        font-size: 15px;
    }
}

/* ==================== 模板组合编辑页面样式 ==================== */
#comboEditPage .combo-item {
    padding: 15px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 15px;
}
#comboEditPage .combo-item-basic {
    margin-bottom: 10px;
}
#comboEditPage .combo-item-advanced {
    padding-top: 10px;
    border-top: 1px dashed #ddd;
    margin-top: 10px;
}
#comboEditPage .combo-item-advanced label {
    font-weight: 500;
    color: #666;
    font-size: 0.85rem;
}
#comboEditPage .combo-item-advanced .form-control {
    font-size: 0.85rem;
}
#comboEditPage .week-day-btn {
    padding: 4px 12px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}
#comboEditPage .week-day-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
#comboEditPage .combo-item-toggle-advanced {
    font-size: 0.85rem;
}
#comboEditPage .combo-item-delete {
    font-size: 0.85rem;
}

/* ==================== 模板组合编辑页面 - 项目序号和类型 ==================== */
#comboEditPage .combo-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

#comboEditPage .combo-item-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: bold;
}

#comboEditPage .combo-item-type {
    font-size: 0.85rem;
    color: #666;
    background: #f5f5f5;
    padding: 2px 8px;
    border-radius: 4px;
}

/* ==================== 模板组合卡片预览样式 ==================== */
.combo-card-preview {
    cursor: pointer;
    transition: box-shadow 0.2s;
}

.combo-card-preview:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.combo-card-action {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eee;
    text-align: right;
}

/* ==================== 模板复制弹窗 - 分类筛选 ==================== */
.combo-copy-cat-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.combo-copy-cat-btn {
    padding: 4px 12px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.combo-copy-cat-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.combo-copy-cat-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* ==================== 模板组合预览弹窗样式 ==================== */
.combo-preview-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--primary);
}

.combo-preview-header h2 {
    margin: 0 0 5px 0;
    color: #333;
    font-size: 1.4rem;
}

.combo-preview-header p {
    margin: 0;
    color: #666;
    font-size: 0.9rem;
}

.combo-preview-section {
    margin-bottom: 20px;
}

.combo-preview-section h4 {
    margin: 0 0 12px 0;
    color: var(--primary);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.combo-preview-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.combo-preview-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: #f9f9f9;
    border-radius: 6px;
}

.combo-preview-num {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: bold;
    flex-shrink: 0;
}

.combo-preview-info {
    flex: 1;
}

.combo-preview-name {
    font-weight: bold;
    color: #333;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.combo-preview-cat {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.1);
    padding: 1px 6px;
    border-radius: 3px;
    margin-right: 8px;
}

.combo-preview-desc {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 6px;
}

.combo-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.8rem;
    color: #888;
}

/* ==================== 模板复制弹窗 - 勾选框样式 ==================== */
.combo-copy-tpl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.combo-copy-tpl-card {
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.combo-copy-tpl-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.combo-copy-tpl-card.selected {
    border-color: var(--primary);
    background: rgba(75, 108, 183, 0.05);
}

.combo-copy-check-wrap {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
    padding: 0;
    width: 24px;
    height: 24px;
    position: relative;
}

.combo-copy-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 2;
}

.combo-copy-check-mark {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    background: #fff;
    position: relative;
    transition: all 0.2s;
}

.combo-copy-checkbox:checked + .combo-copy-check-mark {
    background: var(--primary);
    border-color: var(--primary);
}

.combo-copy-checkbox:checked + .combo-copy-check-mark::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ==================== 模板组合 - 重复频率二级输入区域 ==================== */
.combo-repeat-extra {
    padding: 8px 10px;
    background: #f9f9f9;
    border-radius: 5px;
    margin-top: 5px;
}

.combo-repeat-extra label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.85rem;
    color: #555;
}

.combo-repeat-weekly-multi .week-day-btn,
.combo-repeat-extra .week-day-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.combo-repeat-weekly-multi .week-day-btn:hover,
.combo-repeat-extra .week-day-btn:hover {
    border-color: var(--primary);
}

.combo-repeat-weekly-multi .week-day-btn.active,
.combo-repeat-extra .week-day-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* ========== 登录/注册表单卡片样式（2026-09-10 起容器改为弹窗 #authModal，配色接入设计变量） ========== */
/* 旧 #authOverlay 全屏遮罩已废弃（HTML 中已移除），以下 .auth-overlay 规则保留仅为兼容，
   新入口见文件末尾的 .landing-* / .auth-modal 样式块 */
.auth-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 未登录（落地页/登录弹窗显示）时锁定页面滚动（由 js/core/bootstrap.js 的 setAuthLocked 控制） */
body.auth-locked {
    overflow: hidden;
}
.auth-overlay.hidden { display: none; }

.auth-container {
    background: #fff;
    border-radius: 16px;
    padding: 40px 32px;
    width: 90%;
    max-width: 380px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.auth-header {
    text-align: center;
    margin-bottom: 28px;
}
.auth-header h2 {
    font-size: 22px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
}
.auth-header p {
    font-size: 13px;
    color: #999;
    margin: 0;
}
.auth-field {
    margin-bottom: 16px;
}
.auth-field label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
    font-weight: 500;
}
.auth-field input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.auth-field input:focus {
    border-color: var(--primary);
}
.auth-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    margin-top: 8px;
}
.auth-btn:hover { opacity: 0.9; }
.auth-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.auth-switch {
    text-align: center;
    margin-top: 16px;
    font-size: 13px;
    color: #999;
}
.auth-switch a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}
.auth-msg {
    text-align: center;
    margin-top: 12px;
    font-size: 13px;
    min-height: 20px;
}
.auth-msg.error { color: #e74c3c; }
.auth-msg.success { color: #27ae60; }

/* ========== 错字本（2026-08-08） ========== */
/* ★ 2026-09-02 顶部统计条 .wc-stats/.wc-stat 样式已移除（数量改显示在下方 Tab 徽标） */
.wc-tab-count {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    margin-left: 4px;
    border-radius: 9px;
    background: #f5ede1;
    color: #d35400;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    vertical-align: 1px;
}
.wc-tab-on .wc-tab-count {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.wc-add-area {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
}
/* ★ 2026-08-08 重新设计：输入框带边框圆角、按钮独立样式（不再复用 stroke-search-*） */
.wc-add-input {
    flex: 1;
    border: 2px solid #f0c8a0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 16px;
    background: #fff;
    outline: none;
    min-width: 0;
}
.wc-add-input:focus { border-color: #e67e22; }
.wc-add-input::placeholder { color: #bbb; font-size: 15px; }
.wc-add-btn {
    border: none;
    background: #e67e22;
    color: #fff;
    padding: 0 20px;
    border-radius: 10px;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}
.wc-add-btn:hover { background: #d35400; }
.wc-add-btn:active { transform: scale(0.97); }

.wc-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
}
.wc-tab {
    padding: 6px 16px;
    border-radius: 16px;
    border: 1px solid #ddd;
    background: #fff;
    color: #666;
    font-size: 0.85rem;
    cursor: pointer;
}
.wc-tab-on { background: #e67e22; border-color: #e67e22; color: #fff; }
.wc-tab-spacer { flex: 1; }
.wc-sort-btn {
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid #ddd;
    background: #fff;
    color: #888;
    font-size: 0.75rem;
    cursor: pointer;
}
.wc-sort-on { background: #fdf0e0; border-color: #e67e22; color: #d35400; }
.wc-clear-btn {
    border: none;
    background: transparent;
    color: #bbb;
    font-size: 0.9rem;
    cursor: pointer;
}
.wc-clear-btn:hover { color: #e74c3c; }

.wc-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 10px;
    padding: 12px;
}
.wc-card {
    background: #fff;
    border: 1px solid #f0e0c8;
    border-radius: 12px;
    padding: 10px 6px;
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: transform .1s;
}
.wc-card:active { transform: scale(.97); }
.wc-card-char {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.2;
    color: #333;
    position: relative;
}
.wc-wrong-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    background: #e74c3c;
    color: #fff;
    font-size: 0.62rem;
    padding: 1px 5px;
    border-radius: 8px;
    font-weight: 400;
}
.wc-card-pin { font-size: 0.75rem; color: #999; margin-bottom: 2px; }
.wc-card-meta { font-size: 0.65rem; color: #bbb; margin-top: 2px; }
.wc-mv-btn {
    margin-top: 6px;
    border: 1px solid #ddd;
    background: #fff;
    color: #777;
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: 10px;
    cursor: pointer;
}
.wc-mv-btn:hover { border-color: #e67e22; color: #d35400; }
.wc-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #bbb;
    padding: 40px 0;
    font-size: 0.9rem;
}
.wc-empty-icon {
    font-size: 2.2rem;
    color: #f0c8a0;
    margin-bottom: 8px;
}

/* 复习弹窗 */
.wc-review-pinyin { font-size: 0.85rem; color: #999; margin-left: 6px; }
.wc-review-detail {
    text-align: center;
    color: #999;
    font-size: 0.8rem;
    padding: 2px 0 6px;
}
.wc-review-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0;
}
.wc-judge-btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    font-size: 0.85rem;
    cursor: pointer;
}
.wc-judge-ok { background: #2ecc71; color: #fff; }
.wc-judge-no { background: #e74c3c; color: #fff; }
.wc-quiz-hint {
    text-align: center;
    font-size: 0.85rem;
    color: #666;
    padding: 6px 0;
}
.wc-quiz-hint .wc-mv-btn { margin: 4px 6px 0; }
.wc-review-words {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px 4px;
    font-size: 0.8rem;
}
.wc-word-chip {
    background: #fdf0e0;
    color: #a06a28;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.78rem;
}

/* 笔顺页"加入错字本"按钮 */
.wc-stroke-add-btn {
    background: #fff8f0 !important;
    color: #d35400 !important;
    border: 1px solid #f0c8a0;
}
.wc-btn-added {
    background: #f0f0f0 !important;
    color: #aaa !important;
    border-color: #e0e0e0 !important;
    cursor: default;
}

/* ★ 2026-08-08 卡片单个删除按钮 */
.wc-del-btn {
    margin-top: 4px;
    border: 1px solid #f0c0c0;
    background: #fff;
    color: #d98080;
    font-size: 0.68rem;
    padding: 2px 10px;
    border-radius: 10px;
    cursor: pointer;
}
.wc-del-btn:hover { background: #e74c3c; color: #fff; border-color: #e74c3c; }

/* ★ 2026-08-08 复习弹窗按钮两行布局 + 模态框删除按钮 + 已掌握禁用态 */
.wc-review-actions { flex-direction: column; align-items: center; }
.wc-review-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.wc-review-del-btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #f0c0c0;
    background: #fff;
    color: #d98080;
    font-size: 0.85rem;
    cursor: pointer;
}
.wc-review-del-btn:hover { background: #e74c3c; color: #fff; border-color: #e74c3c; }
.wc-judge-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

/* ========== 便签条（2026-08-08，UI v2 重新设计） ========== */
/* 模态框输入区：清爽分隔线 + 等高控件 */
.sn-input-area {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 2px 14px;
    border-bottom: 1px solid #f2f2f0;
    margin-bottom: 14px;
}
.sn-input {
    flex: 1;
    border: 1.5px solid #e8e4dc;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 15px;
    background: #fafaf8;
    outline: none;
    min-width: 0;
    transition: border-color .15s, background .15s;
}
.sn-input:focus { border-color: #f0b429; background: #fff; }
.sn-input::placeholder { color: #c0bdb6; }
.sn-add-btn {
    border: none;
    background: linear-gradient(135deg, #f7b733, #f39c12);
    color: #fff;
    padding: 0 18px;
    height: 42px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(243,156,18,.25);
    transition: transform .1s, box-shadow .15s;
}
.sn-add-btn:hover { box-shadow: 0 3px 10px rgba(243,156,18,.35); }
.sn-add-btn:active { transform: scale(.97); }
.sn-cancel-btn {
    border: 1px solid #e0dcd2;
    background: #fff;
    color: #777;
    height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}
.sn-list { display: flex; flex-direction: column; gap: 12px; }
.sn-empty { text-align: center; color: #c0bdb6; padding: 44px 0 30px; font-size: 0.9rem; }
.sn-empty-icon { font-size: 2.4rem; margin-bottom: 10px; color: #f0d9a8; }

/* 便签卡片：左侧彩色边条（便签视觉锚点）+ 内容区弹性 + 操作区紧凑 */
/* ★ 2026-08-08 UI v4：无边框，靠阴影区分 */
.sn-card {
    display: flex;
    gap: 10px;
    background: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 1px 4px rgba(60,50,30,.08);
    transition: box-shadow .15s, transform .1s;
}
.sn-card:active { transform: scale(.995); }
.sn-card-converted {
    background: #fbfbf9;
    box-shadow: none;
}
.sn-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
/* 内容：最多三行预览，不足三行按真实高度 */
.sn-content {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.95rem;
    color: #3d3d38;
    line-height: 1.6;
    word-break: break-all;
}
.sn-time { font-size: 0.72rem; color: #b5b2aa; margin-top: 8px; }
.sn-time i { margin-right: 3px; }

/* ★ 2026-08-08 UI v3：左侧转为计划（竖向）/ 中间内容日期 / 右侧编辑删除（竖向） */
.sn-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* ★ 2026-08-08 UI v4：转为计划按钮纯竖向（拆字 span + flex column，跨浏览器一致） */
.sn-convert-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: none;
    background: linear-gradient(135deg, #ff9f43, #f77f00);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 10px 6px;
    border-radius: 9px;
    cursor: pointer;
    width: 34px;
    min-height: 92px;
    box-shadow: 0 1px 4px rgba(247,127,0,.2);
    transition: box-shadow .15s, transform .1s;
}
.sn-convert-btn span { display: block; line-height: 1.3; }
.sn-convert-btn:hover { box-shadow: 0 2px 8px rgba(247,127,0,.3); }
.sn-convert-btn:active { transform: scale(.96); }
.sn-converted {
    background: #ecece8 !important;
    color: #a0a09a !important;
    box-shadow: none !important;
    cursor: default;
}
.sn-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
}
.sn-act-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #e6e2d8;
    background: #fff;
    color: #9a968c;
    border-radius: 9px;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}
.sn-act-btn:hover { color: #4a463c; border-color: #c9c4b8; background: #fafaf7; }
.sn-act-btn.sn-del:hover { color: #e74c3c; border-color: #f0b4ac; background: #fef6f5; }

/* ==================== 回收站（2026-08-09） ==================== */
.rb-tip {
    margin: 12px 16px 0;
    padding: 8px 14px;
    background: #E6F1FB;
    color: #185FA5;
    border-radius: 8px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rb-toolbar {
    margin: 12px 16px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.rb-btn {
    border: 1px solid #d3d1c7;
    background: #fff;
    color: #444441;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: all .15s;
}
.rb-btn:hover { background: #fafaf7; border-color: #b4b2a9; }
.rb-btn-restore { color: #0F6E56; border-color: #9fe1cb; background: #f0faf6; }
.rb-btn-restore:hover { background: #e1f5ee; border-color: #5dcaa5; }
.rb-btn-purge { color: #A32D2D; border-color: #f0b4ac; background: #fef6f5; }
.rb-btn-purge:hover { background: #fcebeb; border-color: #f09595; }
.rb-list { margin: 0 16px 24px; }
.rb-group {
    background: #fff;
    border: 1px solid #eae7df;
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
}
.rb-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #faf9f5;
    border-bottom: 1px solid #eeece4;
    font-size: 14px;
    font-weight: 500;
    color: #444441;
}
.rb-group-label { flex: 1; }
.rb-group-actions { display: flex; gap: 8px; }
.rb-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #f3f1ea;
}
.rb-item:last-child { border-bottom: none; }
.rb-item-main { flex: 1; min-width: 0; }
.rb-item-title {
    font-size: 14px;
    color: #2c2c2a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rb-item-time {
    font-size: 12px;
    color: #888780;
    margin-top: 2px;
}
.rb-item-actions { display: flex; gap: 8px; flex-shrink: 0; }
.rb-empty {
    text-align: center;
    padding: 60px 20px;
    color: #888780;
}
.rb-empty-icon { font-size: 40px; color: #d3d1c7; margin-bottom: 12px; }
.rb-empty p { margin: 4px 0; font-size: 15px; }
.rb-empty-sub { font-size: 13px; color: #b4b2a9; }
.rb-error { color: #A32D2D; }

/* ==================== 回收站类型 Tab（2026-08-09） ==================== */
.rb-type-tabs {
    margin: 10px 16px 0;
    display: flex;
    flex-wrap: wrap;   /* ★ 2026-08-09 改为自动换行，类型多时换行显示而非横向溢出 */
    gap: 8px;
}
.rb-type-tab {
    flex-shrink: 0;
    border: 1px solid #e0ddd3;
    background: #fff;
    color: #5f5e5a;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.rb-type-tab i { font-size: 12px; }
.rb-type-tab:hover { border-color: #b4b2a9; background: #faf9f5; }
.rb-type-tab.active {
    background: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

/* ==================== 回收站任务附属信息（2026-08-11） ==================== */
.rb-item-sub {
    font-size: 12px;
    color: #0F6E56;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.rb-item-sub i { font-size: 11px; }
.rb-item-sub-sep { color: #d3d1c7; }
.rb-item-sub-note { color: #b4b2a9; font-size: 11px; }

/* ==================== 总览 A4 纸张（2026-08-11 重构） ==================== */
.overview-paper-stage {
    padding: 18px 16px 30px;
    overflow: auto;
    background: #e9e7e2;
    min-height: 60vh;
}
.overview-paper-scale {
    margin: 0 auto;
    transform-origin: top left;
}
.overview-paper {
    display: flex;
    flex-direction: column;
    gap: 14mm;
}
.overview-sheet {
    background: #fff;
    box-shadow: 0 2px 14px rgba(0,0,0,.18);
    padding: 14mm 16mm 20mm;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}
.overview-sheet.portrait  { width: 210mm; min-height: 297mm; }
.overview-sheet.landscape { width: 297mm; min-height: 210mm; }

/* ---- 纸张页头（★ 2026-08-11 标题居中显示） ---- */
.ov-sheet-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-bottom: .6pt solid #bbb;
    padding-bottom: 2.5mm;
    margin-bottom: 5mm;
}
.ov-sheet-title { font-size: 15pt; font-weight: bold; color: #222; }
.ov-sheet-sub { font-size: 9.5pt; color: #666; margin-top: 1mm; }

/* ---- 纸张页脚 ---- */
.ov-sheet-footer {
    position: absolute;
    bottom: 6mm; left: 16mm; right: 16mm;
    display: flex;
    justify-content: space-between;
    font-size: 8.5pt;
    color: #999;
    border-top: .4pt solid #eee;
    padding-top: 1.5mm;
}

/* ---- 通用网格 ---- */
.ov-grid {
    display: grid;
    width: 100%;
    border: .5pt solid #c9c9c9;
    border-collapse: collapse;
}
.ov-cell {
    border: .5pt solid #d8d8d8;
    padding: 1.4mm 1.8mm;
    font-size: 8.5pt;
    min-height: 9mm;
    box-sizing: border-box;
    overflow: hidden;
    word-break: break-all;
}
.ov-cell.ov-head {
    background: #f4f4f4;
    font-weight: bold;
    text-align: center;
    font-size: 8.5pt;
    color: #333;
}
.ov-cell.ov-time { text-align: center; color: #777; background: #fafafa; font-size: 8pt; }

/* 任务块（周/自定义网格内） */
.ov-task-block {
    font-size: 8pt;
    line-height: 1.35;
    margin-bottom: 1mm;
    border-left: 1.2mm solid #4b6cb7;
    padding-left: 1.2mm;
}
.ov-task-block.completed { color: #999; border-left-color: #4CAF50; }
.ov-task-block .t-name { font-weight: bold; color: #333; }
.ov-task-block.completed .t-name { color: #999; }
.ov-task-block .t-time { color: #888; font-size: 7.5pt; }
.ov-section-title {
    font-size: 10.5pt;
    font-weight: bold;
    color: #333;
    margin: 5mm 0 2mm;
}

/* ---- 日视图时间轴 ---- */
.ov-day-axis { display: flex; }
.ov-day-timecol {
    width: 20mm;
    flex-shrink: 0;
}
.ov-day-timecol .ov-cell { border-right: .8pt solid #bbb; }
.ov-day-body {
    flex: 1;
    position: relative;
    border-left: .5pt solid #d8d8d8;
}
.ov-day-slot {
    border-bottom: .4pt dashed #e5e5e5;
    box-sizing: border-box;
    position: relative;
}
.ov-day-slot.has-task { background: #f7f9fd; border-bottom: .4pt solid #d8d8d8; }
.ov-day-task {
    font-size: 8pt;
    margin: .8mm 1.5mm;
    border-left: 1.2mm solid #4b6cb7;
    padding-left: 1.2mm;
    line-height: 1.3;
}
.ov-day-task .t-name { font-weight: bold; color: #222; }
.ov-day-task .t-time { color: #888; font-size: 7.5pt; }

/* ---- 月历 ---- */
.ov-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); border: .5pt solid #c9c9c9; }
.ov-cal-cell {
    border: .4pt solid #e0e0e0;
    min-height: 16mm;
    padding: 1.2mm;
    font-size: 8pt;
    box-sizing: border-box;
    overflow: hidden;
}
.ov-cal-cell .d-num { font-weight: bold; color: #444; font-size: 8.5pt; }
.ov-cal-cell.inactive { background: #fafafa; }
.ov-cal-cell.today .d-num { color: #185FA5; }
.ov-cal-cell .t-item {
    font-size: 7pt;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: .5mm;
}

/* ---- 缩放控件 ---- */
#overviewZoomSelect { font-size: 13px; }

/* ---- 日视图打卡表：完成情况列（2026-08-11） ---- */
.ov-cell.ov-check {
    text-align: center;
    font-size: 12pt;
    color: #333;
}
.ov-cell.ov-check.done { color: #4CAF50; }

/* ==================== 月视图打勾表（2026-08-11） ==================== */
.ov-month-grid { display: grid; border: .5pt solid #c9c9c9; }
.ov-month-cell {
    border: .4pt solid #e0e0e0;
    padding: .8mm 1mm;
    font-size: 7pt;
    box-sizing: border-box;
    min-height: 7mm;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ov-month-cell.ov-month-head { background: #f4f4f4; font-weight: bold; font-size: 8pt; }
.ov-month-cell.ov-month-corner { font-size: 7.5pt; color: #555; }
.ov-month-cell.ov-month-task { justify-content: flex-start; gap: 1mm; padding: .3mm 1mm; font-weight: 500; }
.ov-month-task-color {
    width: 1.2mm; align-self: stretch;
    border-radius: 1px;
    flex-shrink: 0;
}
.ov-month-task-name {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 7pt;
}
.ov-month-cell.ov-month-check { padding: 0; font-size: 8pt; color: #999; }
.ov-month-cell.ov-month-check.done { background: #e8f5e9; color: #2e7d32; font-weight: bold; }
/* ★ 2026-08-12 无安排斜线：当天该任务无需打卡，斜线划掉（与 done 互斥） */
/* ★ 2026-09-13 改用内联 SVG 画线（原 CSS linear-gradient + calc() 写法保留在下方注释里）。
   原因：PDF/图片导出走 html2canvas 光栅化，而 html2canvas 不支持渐变色标里的 calc()，
   会把斜线渲染成一条粗灰带（屏幕正常、导出异常）。SVG 不受该限制，线宽恒定，
   屏幕与导出完全一致。由 overview.js 的 _checkCellHtml() 输出 <svg class="ov-na-strike">。 */
.ov-month-cell.ov-month-check.na { position: relative; overflow: hidden; }
.ov-na-strike {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%; display: block;
    pointer-events: none;                 /* 不遮挡格子的点击/交互 */
}
/* 旧写法（仅屏幕正常，导出会变成粗灰带，勿再启用）：
.ov-month-cell.ov-month-check.na {
    background: linear-gradient(to bottom right, transparent calc(50% - 0.7pt), #c9c9c9 calc(50% - 0.7pt), #c9c9c9 calc(50% + 0.7pt), transparent calc(50% + 0.7pt));
} */
.ov-month-cell.ov-month-add { padding: 3mm; background: #faf9f5; }
.ov-month-cell.ov-month-add button {
    padding: 2mm 8mm;
    border: .5pt dashed #b4b2a9;
    background: #fff;
    color: #5f5e5a;
    border-radius: 999px;
    cursor: pointer;
    font-size: 8pt;
}
.ov-month-cell.ov-month-add button:hover { background: #f0faf6; border-color: #5dcaa5; color: #0F6E56; }
.ov-month-remove {
    background: none; border: none; color: #999; cursor: pointer; font-size: 9pt; padding: 0 1mm;
}
.ov-month-remove:hover { color: #e74c3c; }

/* 添加非模板任务弹窗列表 */
.ov-month-modal-list { padding: 8px 16px; max-height: 55vh; overflow-y: auto; }
.ov-month-modal-item {
    display: block;
    padding: 5px 0;
    border-bottom: .4pt solid #eee;
    font-size: 13px;
    cursor: pointer;
}
.ov-month-modal-item:last-child { border-bottom: none; }
.ov-month-modal-item input[type=checkbox] { margin-right: 6px; vertical-align: middle; }

/* ==================== 月视图打勾表（2026-08-11 学科列竖排合并） ==================== */
.ov-month-cell.ov-month-cat {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-weight: bold;
    font-size: 11pt;
    color: #fff;
    /* background/color 由 inline style 设置（每个学科不同色） */
    padding: 2mm 0;
    letter-spacing: 1pt;
}
.ov-month-cell.ov-month-task {
    justify-content: flex-start;
    gap: 1mm;
    padding: .3mm 1.5mm;
    font-weight: 500;
    /* background 由 inline style 设置（学科色 12% 透明） */
}

/* ==================== 月视图添加非模板任务弹窗（2026-08-11 提升层级） ==================== */
.ov-month-modal { z-index: 100000 !important; }

/* ==================== 周视图打勾表（2026-08-11 同月视图模式） ==================== */
.ov-month-cell.ov-month-head { flex-direction: column; line-height: 1.35; }
.ov-month-cell.ov-month-desc {
    justify-content: flex-start;
    font-size: 7pt;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==================== 任务名/内容 3 行换行省略（2026-08-11） ==================== */
.ov-month-task-name,
.ov-month-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    white-space: normal;
    word-break: break-all;
    line-height: 1.35;
}

/* ==================== 添加非模板任务弹窗（2026-08-11 工具栏+去重提示） ==================== */
.ov-month-modal-toolbar {
    padding: 10px 16px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #555;
}
.ov-month-modal-toolbar label { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.ov-month-modal-toolbar input[type=checkbox] { vertical-align: middle; }
.ov-month-modal-cat {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 4px;
}
.ov-month-modal-dup { color: #f39c12; font-size: 11px; margin-left: 4px; }

/* ==================== 4 视图任务名/内容 3 行换行（2026-08-11 终极覆盖） ==================== */
.ov-month-task-name,
.ov-month-desc {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    white-space: normal !important;
    word-break: break-all !important;
    line-height: 1.35 !important;
}
.ov-month-task-name { flex: 1; }

/* ==================== PDF 节省纸张（2026-08-11 修正：恢复 A4 min-height，防导出拉伸变形） ==================== */
/* ★ 动态分页已按行实际高度装满 A4 内容区；sheet 保持 A4 高度使 PDF 1:1 输出不变形 */
.overview-sheet.portrait  { width: 210mm; min-height: 297mm; }
.overview-sheet.landscape { width: 297mm; min-height: 210mm; }

/* ==================== 总览打印区块（2026-08-12 勾选渲染，放最后一页） ==================== */
.ov-sec-wrap { margin-top: 6mm; }
.ov-sec-holder { width: 178mm; }
.ov-sec {
    border: .5pt solid #d8d8d8;
    border-radius: 2mm;
    padding: 3mm 4mm;
    margin-bottom: 3mm;
    background: #fcfcfb;
}
.ov-sec:last-child { margin-bottom: 0; }
.ov-sec-title {
    font-size: 9.5pt;
    font-weight: bold;
    color: #333;
    border-bottom: .4pt solid #e0e0e0;
    padding-bottom: 1.2mm;
    margin-bottom: 2mm;
}
.ov-sec-row {
    font-size: 8.5pt;
    color: #444;
    line-height: 1.6;
    display: flex;
    gap: 6mm;
    flex-wrap: wrap;
}
.ov-sec-cats { margin-top: 1mm; gap: 4mm; }
.ov-sec-line {
    border-bottom: .5pt solid #bbb;
    height: 5mm;
    margin-top: 2.5mm;
}
.ov-sec-sign {
    margin-top: 3mm;
    font-size: 8.5pt;
    color: #555;
}
.ov-sec-star { color: #BA7517; letter-spacing: 1.5mm; font-size: 10pt; }
.ov-sec-note { font-size: 7.5pt; color: #aaa; margin-top: 1mm; }

/* 标题可编辑提示 */
.ov-sheet-title-editable {
    cursor: text;
    border-bottom: .5pt dashed transparent;
    padding: 0 1mm;
    border-radius: 1mm;
    min-width: 2em;
}
.ov-sheet-title-editable:hover {
    border-bottom-color: #b4b2a9;
    background: #fafaf7;
}
.ov-sheet-title-editable[contenteditable="true"] {
    border-bottom-color: #185FA5;
    background: #E6F1FB;
    outline: none;
}

/* 统计/亮点留白填空线（2026-08-12：打印后手动填写，不预填应用数据） */
.ov-sec-blank {
    display: inline-block;
    border-bottom: .5pt solid #888;
    min-width: 12mm;
    height: 5mm;
    vertical-align: bottom;
}

/* ==================== 统一"学习总结"模块（2026-08-12） ==================== */
.ov-sec-summary-head {
    font-size: 11pt;
    font-weight: bold;
    color: #222;
    margin-bottom: 2mm;
}
.ov-sec-summary-stars {
    font-size: 8.5pt;
    color: #444;
    line-height: 1.6;
    display: flex;
    gap: 3mm;
    flex-wrap: nowrap;
    margin-top: 1mm;
    margin-bottom: 1mm;
}
.ov-sec-summary-stars > span {
    white-space: nowrap;
    flex-shrink: 0;
}

/* ==================== 打印任务去留 ×（2026-08-12 所有视图任务名上的移除按钮） ==================== */
.ov-month-remove {
    background: none; border: none; color: #bbb; cursor: pointer; font-size: 10pt;
    padding: 0 1mm; flex-shrink: 0; line-height: 1; margin-left: auto;
}
.ov-month-remove:hover { color: #e74c3c; }
.ov-month-task { flex-wrap: nowrap; }
.ov-cell-name { display: flex; align-items: center; gap: 2px; }
.ov-cell-name .ov-month-remove { margin-left: 0; font-size: 9pt; }

/* ==================== 儿童记账本 v2 专业版（2026-08-14 UI 重构） ==================== */
/* 设计系统：翡翠绿主色 #0e9f6e / 浅灰底 #f5f6f8 / 白卡圆角 16px / 收入红 #e5484d 支出绿 #0e9f6e */
#moneyBookPage { overflow-y: auto; background: #f5f6f8; }
#mbContent { padding-bottom: 76px; }

/* ---------- 通用按钮 ---------- */
.mb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: none; border-radius: 12px; padding: 11px 18px; font-size: 14px; cursor: pointer;
    transition: transform .1s, opacity .15s; font-family: inherit;
}
.mb-btn:active { transform: scale(.96); }
.mb-btn-primary { background: #0e9f6e; color: #fff; }
.mb-btn-primary:hover { opacity: .9; }
.mb-btn-info { background: #185fa5; color: #fff; }
.mb-btn-warn { background: #d97706; color: #fff; }
.mb-btn-danger { background: #e5484d; color: #fff; }
.mb-btn-ghost { background: #fff; color: #3a3f45; border: 1px solid #e4e7eb; }
.mb-btn-mini { padding: 6px 12px; font-size: 12px; border-radius: 9px; }
.mb-btn-parent { background: #fff; color: #3a3f45; border: 1px solid #e4e7eb; padding: 7px 13px; font-size: 12px; border-radius: 10px; }
.mb-full { width: 100%; }

/* ---------- 主页：结余大卡 ---------- */
.mb-hero {
    background: linear-gradient(135deg, #0b8a60, #10b981 60%, #34d399);
    border-radius: 20px; padding: 20px 22px 18px; color: #fff; margin: 12px 12px 0;
    box-shadow: 0 8px 24px rgba(11,138,96,.28); position: relative; overflow: hidden;
}
.mb-hero::after { content: ''; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.08); }
.mb-hero-label { font-size: 12px; opacity: .85; }
.mb-hero-amount { font-size: 34px; font-weight: 700; letter-spacing: .5px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.mb-hero-stats { display: flex; gap: 12px; margin-top: 16px; position: relative; z-index: 1; }
.mb-hero-stat { flex: 1; background: rgba(255,255,255,.16); border-radius: 12px; padding: 9px 10px; }
.mb-hero-stat .mb-hs-label { font-size: 11px; opacity: .8; }
.mb-hero-stat .mb-hs-val { font-size: 14px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ---------- 账户资产横滑卡 ---------- */
.mb-wallet-scroll { display: flex; gap: 8px; overflow-x: auto; padding: 12px 12px 4px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.mb-wallet-scroll::-webkit-scrollbar { display: none; }
/* ★ 2026-08-17 账户/目标等高紧凑卡（64px 统一高度，横向图标+信息） */
.mb-wallet-card {
    flex: 0 0 152px; scroll-snap-align: start; background: #fff; border-radius: 14px; padding: 9px 11px;
    box-shadow: 0 2px 10px rgba(15,23,42,.05); cursor: pointer; display: flex; align-items: center; gap: 9px;
    position: relative; height: 64px; box-sizing: border-box;
}
.mb-wallet-card.mb-goal-card { border-top: 3px solid #7c3aed; }
.mb-wallet-icon {
    width: 34px; height: 34px; border-radius: 10px; background: var(--mbc-50, #e8f5ef);
    display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--mbc, #0e9f6e); flex-shrink: 0;
}
.mb-wallet-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mb-wallet-name { font-size: 11.5px; color: #8a8f98; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-wallet-bal { font-size: 15px; font-weight: 500; color: #23272d; font-variant-numeric: tabular-nums; }
.mb-wallet-bal.mb-total { color: #0e9f6e; }
.mb-neg { color: #e5484d !important; }
.mb-wallet-warn { font-size: 10px; color: #e5484d; background: #fdecec; border-radius: 5px; padding: 1px 5px; display: inline-block; }
/* 目标卡紧凑：名称行内嵌金额、细进度条、小字还差 */
.mb-wallet-card .mb-goal-name { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; font-size: 11.5px; color: #8a8f98; font-weight: 400; }
.mb-wallet-card .mb-goal-amt { font-size: 12.5px; font-weight: 500; color: #7c3aed; flex-shrink: 0; }
.mb-wallet-card .mb-goal-bar { height: 3px; background: #f3e8ff; border-radius: 2px; overflow: hidden; margin-top: 2px; }
.mb-wallet-card .mb-goal-bar i { display: block; height: 100%; background: #7c3aed; border-radius: 2px; transition: width .4s; }
.mb-wallet-card .mb-goal-pct { font-size: 10px; color: #7c3aed; }
.mb-total-card { background: linear-gradient(135deg, #0e9f6e, #34d399); border-top: none; }
.mb-total-card .mb-wallet-name, .mb-total-card .mb-wallet-bal { color: #fff; }

/* ---------- 借贷提醒条 ---------- */
.mb-loan-banner {
    background: #fff7e6; border: 1px solid #f5d78e; border-radius: 12px; padding: 9px 14px;
    margin: 8px 12px 4px; font-size: 12px; color: #8a6d1a; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
}
.mb-loan-banner span { display: inline-flex; align-items: center; gap: 5px; }
.mb-loan-banner em { color: #e5484d; font-style: normal; font-weight: 600; }

/* ---------- 流水列表 ---------- */
.mb-section-title { font-size: 13px; color: #8a8f98; padding: 14px 14px 6px; display: flex; justify-content: space-between; align-items: center; }
.mb-record-list { background: #fff; border-radius: 16px; margin: 0 12px; box-shadow: 0 2px 10px rgba(15,23,42,.04); overflow: hidden; }
.mb-day-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 4px; color: #9aa0a8; font-size: 11px; }
.mb-day-tot { color: #b8bcc4; }
.mb-record-item { display: flex; align-items: center; gap: 11px; padding: 11px 14px; cursor: pointer; transition: background .12s; }
.mb-record-item:hover { background: #f8fafb; }
.mb-record-item + .mb-record-item { border-top: 1px solid #f2f3f5; }
.mb-rec-icon { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; background: var(--mbc-50, #f0f1f3); color: var(--mbc, #5b6068); }
.mb-rec-main { flex: 1; min-width: 0; }
.mb-rec-name { font-size: 14px; color: #23272d; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mb-rec-desc { font-size: 11px; color: #9aa0a8; margin-top: 2px; }
.mb-rec-amount { font-size: 15px; font-weight: 700; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.mb-income { color: #e5484d; }
.mb-expense { color: #0e9f6e; }
.mb-transfer { color: #185fa5; }
.mb-person-tag { background: #eaf2fb; color: #185fa5; border-radius: 5px; padding: 1px 6px; font-size: 10px; }
.mb-note { color: #b8bcc4; font-size: 11px; }
.mb-empty { text-align: center; color: #9aa0a8; padding: 44px 12px; font-size: 13px; }
.mb-empty i { font-size: 36px; display: block; margin-bottom: 10px; color: #d3d6db; }

/* ---------- 筛选条 ---------- */
.mb-filter-bar { display: flex; gap: 8px; padding: 10px 12px; }
.mb-filter-bar select {
    flex: 1; border: 1px solid #e4e7eb; border-radius: 10px; padding: 8px 10px; font-size: 12px;
    background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M1 1l4 4 4-4" stroke="%239aa0a8" fill="none" stroke-width="1.5"/></svg>') no-repeat right 10px center;
    background-size: 10px 6px; appearance: none; -webkit-appearance: none; color: #3a3f45; padding-right: 26px;
}

/* ★ 2026-08-17 首页明细改版：5 个分类条目（今天/本周/本月/本年/全部） */
.mb-range-list { background: #fff; border-radius: 16px; margin: 0 12px; box-shadow: 0 2px 10px rgba(15,23,42,.04); overflow: hidden; }
.mb-range-item { display: flex; align-items: center; gap: 12px; padding: 13px 14px; cursor: pointer; }
.mb-range-item + .mb-range-item { border-top: 1px solid #f2f3f5; }
.mb-range-item:active { background: #fafafa; }
.mb-range-icon {
    width: 44px; height: 44px; border-radius: 12px; background: #e8f5ef; color: #0e9f6e;
    display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0;
}
.mb-range-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mb-range-title { font-size: 14px; font-weight: 600; color: #23272d; }
.mb-range-sub { font-size: 11.5px; color: #9aa0a8; }
.mb-range-nums { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 12.5px; }
.mb-range-exp { color: #27ae60; font-weight: 500; }
.mb-range-inc { color: #e74c3c; font-weight: 500; }
.mb-range-arrow { color: #d3d6db; font-size: 13px; }

/* 二级流水页：顶栏 + 快速跳转 chips */
.mb-list-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px 4px; }
.mb-list-back { border: none; background: none; font-size: 16px; color: #3a3f45; cursor: pointer; padding: 4px 6px; }
.mb-list-title { flex: 1; font-size: 15px; font-weight: 600; color: #23272d; }
.mb-range-chips { display: flex; gap: 6px; padding: 6px 12px 2px; overflow-x: auto; }
.mb-range-chips::-webkit-scrollbar { display: none; }
.mb-range-chip {
    flex-shrink: 0; border: 1px solid #e4e7eb; background: #fff; border-radius: 16px; padding: 5px 13px;
    font-size: 12px; color: #5b6068; cursor: pointer; font-family: inherit;
}
.mb-range-chip.active { border-color: #0e9f6e; background: #e8f5ef; color: #0e9f6e; font-weight: 600; }

/* 二级流水页：年/月组展开收拢 */
.mb-group-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #f8faf9; cursor: pointer; }
.mb-group-ic { font-size: 11px; color: #9aa0a8; width: 12px; }
.mb-group-name { font-size: 13px; font-weight: 600; color: #3a3f45; }
.mb-group-tot { margin-left: auto; font-size: 12px; color: #9aa0a8; }

/* ---------- 分页 ---------- */
.mb-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; padding: 14px 12px; }
.mb-page-info { font-size: 12px; color: #9aa0a8; margin-left: 6px; }

/* ---------- 底部 Tab 导航 ---------- */
.mb-tabbar {
    position: sticky; bottom: 0; display: flex; align-items: flex-end; background: rgba(255,255,255,.96);
    border-top: 1px solid #eef0f3; padding: 6px 4px 8px; backdrop-filter: blur(8px); z-index: 50;
}
.mb-tab-item { flex: 1; border: none; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: #8a8f98; cursor: pointer; padding: 4px 0; font-family: inherit; }
.mb-tab-item.active { color: #0e9f6e; font-weight: 600; }
.mb-tab-item i { font-size: 17px; }
.mb-tab-add {
    flex: 1; border: none; background: none; display: flex; justify-content: center; cursor: pointer; padding: 0;
}
/* ★ 2026-08-17 中央按钮改为"记一笔"文字按钮（胶囊形、比底部其他导航稍大） */
.mb-tab-add span {
    min-width: 66px; height: 34px; border-radius: 18px; background: #0e9f6e; color: #fff;
    font-size: 14px; font-weight: 500; letter-spacing: 1px;
    display: flex; align-items: center; justify-content: center; margin-top: -8px;
    box-shadow: 0 4px 12px rgba(11,138,96,.35); transition: transform .12s;
}
.mb-tab-add:active span { transform: scale(.94); }
.mb-vip-tag { color: #d97706; font-style: normal; font-size: 9px; }

/* ---------- 弹窗/面板 ---------- */
.mb-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 3000; display: none; align-items: flex-end; justify-content: center; }
.mb-overlay-center { align-items: center; padding: 20px; }
.mb-sheet {
    background: #f5f6f8; border-radius: 22px 22px 0 0; width: 100%; max-width: 480px; max-height: 92vh;
    overflow-y: auto; box-shadow: 0 -8px 32px rgba(15,23,42,.16); animation: mbSheetUp .22s ease;
}
@keyframes mbSheetUp { from { transform: translateY(40px); opacity: .5; } to { transform: translateY(0); opacity: 1; } }
.mb-sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 0; }
.mb-sheet-head h3 { font-size: 15px; color: #23272d; margin: 0; font-weight: 600; }
.mb-sheet-close { border: none; background: #eef0f3; border-radius: 50%; width: 28px; height: 28px; font-size: 14px; color: #8a8f98; cursor: pointer; }
.mb-modal {
    background: #fff; border-radius: 16px; width: 100%; max-width: 420px; max-height: 88vh; overflow-y: auto;
    box-shadow: 0 10px 40px rgba(15,23,42,.2); animation: mbModalIn .18s ease;
}
@keyframes mbModalIn { from { transform: scale(.96); opacity: .6; } to { transform: scale(1); opacity: 1; } }
.mb-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px 0; }
.mb-modal-header h3 { font-size: 15px; color: #23272d; margin: 0; font-weight: 600; }
.mb-modal-close { border: none; background: #eef0f3; border-radius: 50%; width: 28px; height: 28px; font-size: 14px; color: #8a8f98; cursor: pointer; }
.mb-modal-body { padding: 4px 18px 18px; }
.mb-modal-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 4px 18px 18px; }

/* ---------- 记账面板 ---------- */
.mb-type-switch { display: flex; background: #eef0f3; border-radius: 12px; padding: 4px; gap: 4px; }
.mb-type-btn { flex: 1; border: none; border-radius: 9px; padding: 9px; font-size: 14px; background: transparent; color: #8a8f98; cursor: pointer; font-family: inherit; }
.mb-type-btn.active { background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,.08); font-weight: 600; }
.mb-type-income.active { color: #e5484d; }
.mb-type-expense.active { color: #0e9f6e; }
.mb-amount-display { text-align: center; font-size: 40px; font-weight: 700; color: #23272d; padding: 14px 0 6px; font-variant-numeric: tabular-nums; }
.mb-amount-display.mb-amt-income { color: #e5484d; }
.mb-amount-display.mb-amt-expense { color: #0e9f6e; }
.mb-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 14px 6px; max-height: 142px; overflow-y: auto; }
.mb-cat-item { display: flex; flex-direction: column; align-items: center; gap: 3px; border: none; background: none; cursor: pointer; padding: 2px 0; font-family: inherit; }
.mb-cat-item span {
    width: 40px; height: 40px; border-radius: 50%; background: #f0f1f3; display: flex; align-items: center;
    justify-content: center; font-size: 17px; transition: transform .12s; border: 2px solid transparent;
}
.mb-cat-item b { font-size: 10px; line-height: 1.3; color: #5b6068; font-weight: 400; }
.mb-cat-item.active span { border-color: #0e9f6e; background: #e8f5ef; transform: scale(1.06); }
.mb-cat-item.active b { color: #0e9f6e; font-weight: 600; }
.mb-quick-chips { display: flex; gap: 6px; padding: 8px 14px; overflow-x: auto; }
.mb-quick-chips::-webkit-scrollbar { display: none; }
.mb-quick-chip { flex-shrink: 0; border: 1px solid #e4e7eb; background: #fff; border-radius: 16px; padding: 5px 13px; font-size: 12px; color: #3a3f45; cursor: pointer; font-family: inherit; }
.mb-quick-chip:hover { border-color: #0e9f6e; color: #0e9f6e; }
.mb-meta-row { display: flex; gap: 8px; padding: 6px 14px; flex-wrap: wrap; }
.mb-meta-chip {
    flex: 1; min-width: 92px; display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #e4e7eb;
    border-radius: 10px; padding: 8px 11px; font-size: 12px; color: #5b6068; cursor: pointer; font-family: inherit;
}
.mb-meta-chip:hover { border-color: #0e9f6e; }
/* ★ 2026-08-24 修复：记账本日期选择改为可见 input[type=date]（移动端点击直接弹原生日期选择器）
   原实现用隐藏 input(opacity:0) + showPicker()/click()，iOS Safari 等移动端不弹框 */
.mb-date-chip {
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    min-height: 38px;
    line-height: normal;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
}
.mb-date-chip::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .6;
}
.mb-meta-chip i { color: #9aa0a8; font-size: 12px; }
.mb-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 8px 14px 2px; }
.mb-key { border: none; background: #fff; border-radius: 11px; padding: 12px 0; font-size: 20px; font-weight: 500; color: #23272d; cursor: pointer; font-family: inherit; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
.mb-key:active { background: #eef0f3; }
.mb-key-func { background: #eef0f3; color: #8a8f98; font-size: 16px; }
.mb-save-btn { margin: 10px 14px 14px; background: #0e9f6e; color: #fff; border: none; border-radius: 12px; padding: 13px 0; font-size: 15px; font-weight: 600; cursor: pointer; width: calc(100% - 28px); font-family: inherit; }
.mb-save-btn:active { transform: scale(.98); }

/* ★ 2026-08-17 周期账（P0-4） */
.mb-recur-row { padding: 4px 14px 0; }
.mb-recur-row .mb-meta-chip { flex: 0 0 auto; min-width: 0; }
.mb-meta-chip.mb-chip-on { border-color: #0e9f6e; background: #e8f5ef; color: #0e9f6e; font-weight: 600; }
.mb-meta-chip.mb-chip-on i { color: #0e9f6e; }
.mb-weekday-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mb-wd-chip { border: 1px solid #e4e7eb; background: #fff; border-radius: 16px; padding: 6px 13px; font-size: 12px; color: #5b6068; cursor: pointer; font-family: inherit; }
.mb-wd-chip.on { border-color: #0e9f6e; background: #e8f5ef; color: #0e9f6e; font-weight: 600; }
.mb-manage-main { flex: 1; min-width: 0; }
.mb-manage-sub { display: block; font-size: 11.5px; color: #9aa0a8; margin-top: 2px; }

/* ★ 2026-08-17 图标选择器（P1-8） */
.mb-emoji-picker {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; background: #fff; border: 1px solid #e4e7eb;
    border-radius: 12px; padding: 8px; margin: 4px 0 0; max-height: 190px; overflow-y: auto; box-shadow: 0 4px 14px rgba(15,23,42,.12); z-index: 30;
}
.mb-emoji-picker button { border: none; background: none; font-size: 19px; padding: 4px 0; border-radius: 8px; cursor: pointer; line-height: 1.2; }
.mb-emoji-picker button:hover { background: #eef7f2; transform: scale(1.15); }
.mb-emoji-input { cursor: pointer; }

/* ---------- 表单（转账/借贷/目标/设置等） ---------- */
.mb-form { display: flex; flex-direction: column; gap: 8px; padding: 12px 18px 6px; }
.mb-form label { font-size: 12px; color: #8a8f98; margin-top: 4px; }
.mb-form input[type="text"], .mb-form input[type="number"], .mb-form input[type="date"], .mb-form select {
    border: 1px solid #e4e7eb; border-radius: 11px; padding: 10px 12px; font-size: 14px; background: #fff; color: #23272d; width: 100%; box-sizing: border-box; font-family: inherit;
}
.mb-form input:focus, .mb-form select:focus { outline: none; border-color: #0e9f6e; box-shadow: 0 0 0 3px rgba(14,159,110,.12); }
.mb-tip { font-size: 12px; color: #8a8f98; background: #eef0f3; border-radius: 10px; padding: 8px 12px; margin: 8px 14px; line-height: 1.6; }

/* ---------- 统计页 ---------- */
.mb-stats-hero { background: #fff; border-radius: 16px; margin: 12px 12px 0; padding: 16px; box-shadow: 0 2px 10px rgba(15,23,42,.05); display: flex; align-items: center; gap: 16px; }
.mb-ring { position: relative; width: 92px; height: 92px; flex-shrink: 0; }
.mb-ring svg { transform: rotate(-90deg); }
.mb-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mb-ring-center b { font-size: 17px; font-weight: 700; color: #23272d; }
.mb-ring-center span { font-size: 10px; color: #9aa0a8; }
.mb-stats-hero-info { flex: 1; }
.mb-stats-hero-info .mb-sh-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; }
.mb-sh-income { color: #e5484d; font-weight: 600; }
.mb-sh-expense { color: #0e9f6e; font-weight: 600; }
.mb-sh-bal { color: #23272d; font-weight: 700; }
.mb-chart-card { background: #fff; border-radius: 16px; margin: 10px 12px 0; padding: 12px; box-shadow: 0 2px 10px rgba(15,23,42,.04); }
.mb-cat-rank { background: #fff; border-radius: 16px; margin: 10px 12px; padding: 6px 14px; box-shadow: 0 2px 10px rgba(15,23,42,.04); }
.mb-rank-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.mb-rank-item + .mb-rank-item { border-top: 1px solid #f2f3f5; }
.mb-rank-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; background: #f0f1f3; }
.mb-rank-main { flex: 1; min-width: 0; }
.mb-rank-name { font-size: 13px; color: #23272d; }
.mb-rank-bar { height: 5px; background: #eef0f3; border-radius: 3px; margin-top: 5px; overflow: hidden; }
.mb-rank-bar i { display: block; height: 100%; background: #0e9f6e; border-radius: 3px; }
.mb-rank-amt { font-size: 13px; font-weight: 600; color: #23272d; font-variant-numeric: tabular-nums; }
.mb-rank-pct { font-size: 11px; color: #9aa0a8; width: 40px; text-align: right; }

/* ---------- 存钱目标 ---------- */
.mb-goal-item { background: #fff; border-radius: 16px; padding: 15px; margin: 8px 12px; box-shadow: 0 2px 10px rgba(15,23,42,.05); }
.mb-goal-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mb-goal-icon { width: 36px; height: 36px; border-radius: 11px; background: #f3e8ff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.mb-goal-name { font-size: 14px; color: #23272d; flex: 1; font-weight: 600; }
.mb-goal-done { color: #d97706; font-style: normal; font-size: 11px; }
.mb-goal-amount { font-size: 13px; color: #8a8f98; font-variant-numeric: tabular-nums; }
.mb-goal-bar { height: 7px; background: #eef0f3; border-radius: 4px; overflow: hidden; margin: 9px 0 2px; }
.mb-goal-bar i { display: block; height: 100%; background: #7c3aed; border-radius: 4px; transition: width .4s; }
.mb-goal-pct { font-size: 11px; color: #7c3aed; }
.mb-goal-ops { display: flex; gap: 8px; margin-top: 10px; }
.mb-page-title { font-size: 17px; color: #23272d; margin: 14px 14px 4px; display: flex; align-items: center; gap: 8px; font-weight: 600; }

/* ---------- 家长视图 ---------- */
.mb-parent-tabs { display: flex; gap: 6px; padding: 12px 12px 4px; overflow-x: auto; }
.mb-parent-tabs::-webkit-scrollbar { display: none; }
.mb-parent-tab { border: none; background: #fff; border-radius: 10px; padding: 8px 15px; font-size: 13px; color: #8a8f98; cursor: pointer; box-shadow: 0 1px 3px rgba(15,23,42,.05); white-space: nowrap; font-family: inherit; }
.mb-parent-tab.active { background: #0e9f6e; color: #fff; font-weight: 600; }
.mb-parent-toolbar { padding: 10px 12px 4px; }
.mb-parent-subtitle { font-size: 12px; color: #9aa0a8; padding: 12px 14px 4px; }
.mb-manage-list { background: #fff; border-radius: 16px; margin: 6px 12px; box-shadow: 0 2px 10px rgba(15,23,42,.04); overflow: hidden; }
.mb-manage-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; flex-wrap: wrap; }
.mb-manage-row + .mb-manage-row { border-top: 1px solid #f2f3f5; }
.mb-manage-avatar { width: 30px; height: 30px; border-radius: 9px; background: #f0f1f3; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.mb-manage-name { flex: 1; font-size: 13px; color: #23272d; min-width: 70px; }
.mb-manage-rel { font-size: 12px; color: #8a8f98; }
.mb-sys-tag { color: #b8bcc4; font-style: normal; font-size: 10px; }
.mb-overdue { border-left: 3px solid #e5484d; }
/* ★ 2026-08-17 分类行点击进入编辑模态框（无按钮，行即入口） */
.mb-manage-row-click { cursor: pointer; transition: background .12s; }
.mb-manage-row-click:hover { background: #f7f9f8; }
.mb-manage-arrow { color: #c8ccd2; font-size: 12px; flex-shrink: 0; }
.mb-parent-op { display: flex; gap: 6px; }

/* ---------- 人员选择器 ---------- */
.mb-picker-body { padding: 6px 18px 18px; }
.mb-picker-self { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px dashed #c8ccd2; border-radius: 11px; cursor: pointer; margin: 10px 0; font-size: 14px; color: #23272d; }
.mb-picker-self:hover { border-color: #0e9f6e; color: #0e9f6e; }
.mb-picker-section-title { font-size: 12px; color: #9aa0a8; margin: 12px 0 8px; }
.mb-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
.mb-picker-item { display: flex; flex-direction: column; align-items: center; gap: 4px; background: #f5f6f8; border-radius: 12px; padding: 10px 4px; cursor: pointer; font-size: 12px; color: #23272d; border: none; font-family: inherit; }
.mb-picker-item:hover { background: #e8f5ef; color: #0e9f6e; }
.mb-picker-avatar { font-size: 22px; }
.mb-picker-add { margin-top: 12px; text-align: center; border: 1px dashed #0e9f6e; color: #0e9f6e; border-radius: 11px; padding: 10px; cursor: pointer; font-size: 13px; }
.mb-rel-group { display: flex; flex-wrap: wrap; gap: 6px; }
.mb-rel-btn { border: 1px solid #e4e7eb; background: #fff; border-radius: 9px; padding: 8px 12px; cursor: pointer; font-size: 12px; color: #3a3f45; font-family: inherit; }
.mb-rel-btn.active { border-color: #0e9f6e; background: #e8f5ef; color: #0e9f6e; }
.mb-avatar-group { display: flex; flex-wrap: wrap; gap: 6px; }
.mb-avatar-opt { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid #e4e7eb; border-radius: 9px; cursor: pointer; font-size: 17px; }
.mb-avatar-opt.active { border-color: #0e9f6e; background: #e8f5ef; }
.mb-person-row { display: flex; align-items: center; gap: 10px; }
.mb-person-current { flex: 1; font-size: 13px; color: #23272d; background: #f5f6f8; border-radius: 10px; padding: 9px 12px; }

/* ---------- 快捷操作行（主页：转账/借贷） ---------- */
.mb-quick-actions { display: flex; gap: 10px; padding: 12px 12px 0; }
.mb-quick-act { flex: 1; background: #fff; border: 1px solid #e4e7eb; color: #3a3f45; box-shadow: 0 1px 4px rgba(15,23,42,.04); }
.mb-quick-act i { color: #0e9f6e; }

/* ---------- 记账面板 4 档类型 + 转账/借贷内嵌（2026-08-15） ---------- */
.mb-type-switch-4 .mb-type-btn { font-size: 13px; padding: 9px 2px; }
/* ★ 2026-08-17 记一笔面板等高度：动态区固定高度 + 统一三行结构（分类/转账/借贷不互相挤压） */
#mbDynArea { min-height: 190px; }
#mbDynArea::-webkit-scrollbar { display: none; }
.mb-dyn-row { display: flex; align-items: center; gap: 8px; padding: 4px 14px; }
.mb-dyn-row .mb-acc-select { flex: 1; min-width: 0; }
.mb-dyn-label { font-size: 11px; color: #9aa0a8; flex-shrink: 0; white-space: nowrap; }
/* ★ 2026-08-24 借贷动态区：到期日+记账日 并排一行（各自带 label 不挤压） */
.mb-date-row .mb-acc-select { flex: 1; min-width: 0; }
.mb-dyn-hint {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
    margin: 6px 14px 4px; border-radius: 10px; background: #f7f9f8; color: #b8bcc4; font-size: 10.5px;
}
.mb-dyn-hint i { font-size: 10px; }
/* 借贷内嵌方向切换（横向排列独占一行，账户/人员/到期日在下行） */
.mb-type-switch-ln { flex: 1; display: flex; gap: 4px; padding: 4px; }
.mb-type-switch-ln .mb-type-btn { flex: 1; padding: 7px 0; font-size: 12px; white-space: nowrap; }
.mb-dyn-hidden { display: none !important; }
.mb-type-transfer.active, .mb-type-loan.active { color: #185fa5; }
.mb-transfer-row { align-items: center; }
.mb-acc-select {
    flex: 1; min-width: 0; border: 1px solid #e4e7eb; border-radius: 11px; padding: 9px 10px;
    font-size: 13px; background: #fff; color: #23272d; font-family: inherit; appearance: none; -webkit-appearance: none;
}
.mb-arrow { color: #9aa0a8; font-size: 16px; flex-shrink: 0; }
.mb-person-chip { min-width: 0; flex: 1.6; }

/* ---------- 记一笔：统一备注输入框（2026-08-16） ---------- */
.mb-note-input {
    width: calc(100% - 28px); margin: 2px 14px 6px; box-sizing: border-box;
    border: 1px solid #e4e7eb; border-radius: 11px; padding: 10px 12px;
    font-size: 13px; background: #fff; color: #23272d; font-family: inherit;
}
.mb-note-input:focus { outline: none; border-color: #0e9f6e; box-shadow: 0 0 0 3px rgba(14,159,110,.12); }

/* ---------- 首页资金卡两行网格（2026-08-16） ---------- */
.mb-sum-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    padding: 12px 12px 2px;
}
.mb-sum-card {
    background: #fff; border-radius: 14px; padding: 12px 14px;
    box-shadow: 0 2px 10px rgba(15,23,42,.05); display: flex; flex-direction: column; gap: 4px;
}
.mb-sum-label { font-size: 12px; color: #8a8f98; }
.mb-sum-income { font-size: 16px; font-weight: 700; color: #e5484d; font-variant-numeric: tabular-nums; }
.mb-sum-expense { font-size: 16px; font-weight: 700; color: #0e9f6e; font-variant-numeric: tabular-nums; }
.mb-sum-budget-val { font-size: 14px; font-weight: 700; color: #d97706; font-variant-numeric: tabular-nums; }
.mb-budget-bar { height: 5px; background: #eef0f3; border-radius: 3px; margin-top: 3px; overflow: hidden; }
.mb-budget-bar i { display: block; height: 100%; background: #f39c12; border-radius: 3px; transition: width .4s; }
/* 第二行两卡（结余/总资产）：占 3 列网格的前两格 */
.mb-sum-bal-card, .mb-sum-assets-card { grid-column: span 1; }
.mb-sum-bal { font-size: 16px; font-weight: 700; color: #23272d; font-variant-numeric: tabular-nums; }
.mb-sum-assets { font-size: 16px; font-weight: 700; color: #0e9f6e; font-variant-numeric: tabular-nums; }
.mb-sum-bal-card, .mb-sum-assets-card { position: relative; }
.mb-sum-bal-card::before, .mb-sum-assets-card::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; }
.mb-sum-bal-card::before { background: #0e9f6e; }
.mb-sum-assets-card::before { background: #7c3aed; }

/* ★ 2026-08-17 首页顶部大卡片（两行三段式）：左 2×2 四格 + 右预算环形 */
.mb-hero-card {
    background: #fff; border-radius: 16px; margin: 12px 12px 2px; padding: 13px 14px 11px;
    box-shadow: 0 2px 10px rgba(15,23,42,.05); display: flex; gap: 12px; align-items: stretch;
}
.mb-hero-grid { flex: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: space-between; min-width: 0; }
.mb-hero-cell { background: #f8faf9; border-radius: 12px; padding: 8px 11px; display: flex; flex-direction: column; gap: 2px; }
.mb-hero-cell.mb-hero-bal { background: #e8f5ef; }
.mb-hero-label { font-size: 10.5px; color: #9aa0a8; }
.mb-hero-cell.mb-hero-bal .mb-hero-label { color: #0f6e56; }
.mb-hero-val { font-size: 15.5px; font-weight: 500; color: #23272d; font-variant-numeric: tabular-nums; }
.mb-hero-income { color: #e5484d; }
.mb-hero-expense { color: #0e9f6e; }
.mb-hero-cell.mb-hero-bal .mb-hero-val { color: #0e9f6e; }
.mb-hero-ring {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border-left: 1px solid #f2f3f5; padding-left: 10px; min-width: 0;
}
.mb-hero-ring svg { flex-shrink: 0; }
.mb-hero-ring-sub { font-size: 10.5px; color: #9aa0a8; }

/* 禁用按钮置灰（达成目标） */
.mb-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* 目标原路退回说明 */
.mb-refund-note {
    background: #f5f6f8; border-radius: 10px; padding: 10px 12px;
    font-size: 13px; color: #3a3f45; line-height: 1.9;
}

/* ★ 2026-08-18 侧边栏模式（宽屏≥1024px + 用户开启）：
   header 顶栏 fixed 全宽（盖过侧栏顶部）；
   卡片固定左侧（顶部 2×2 统计 + 下方功能页卡，图标与文字左右排列、可滚动）；
   .container 右移 210 + 下移 header 高度 */
body.sb-mode .container { padding-left: 262px; padding-top: 117px; }
/* ★ 2026-08-18 顶栏保持原位置与原宽度（x=20 宽 1240，左右各留 20px 间距），
   仅改为 fixed 保持顶部可见；样式（渐变/圆角15/阴影/内部布局）全部继承原 header 规则不变 */
/* ★ 2026-08-18 层级规范（side-bar 模式）：
     普通展示内容（stats-page 1000 / 首页卡片 2~50）  <  header 1050  <  操作/录入页面（edit-page 1100、multiScore 1200、modal 2000+）
   顶栏只盖普通展示页，绝不能盖数据录入/操作类页面（添加任务/成绩/总览等），故 z-index 用 1050 而非 9999 */
body.sb-mode .container > header {
    position: fixed;
    top: 0;
    left: 20px;
    right: 20px;
    width: auto;
    /* ★ 2026-08-18 由 9999 降至 1050：高于展示内容（1000）、低于操作页（edit-page 1100） */
    z-index: 1050;
}
/* body 直接子的全屏页面（.container 之外若存在）也右移 */
body.sb-mode > .stats-page { margin-left: 262px; }
body.sb-mode .container > .today-stats {
    position: fixed;
    /* 左边距与 header 顶栏一致（20px），视觉对齐 */
    left: 20px;
    /* 从 header 顶栏下方开始，与应用顶部对齐 */
    top: 117px;
    bottom: 20px;
    /* ★ 2026-09-10 由 210px 加宽到 232px：卡片改为「图标方块导航条」后需要更多横向空间
       （左侧 20 + 232 = 252，.container padding-left 262 → 留 10px 间隙） */
    width: 232px;
    margin: 0;
    padding: 14px 10px;
    z-index: 45;
    /* flex 行换行布局：统计卡 50% 宽自动 2×2 顶部，功能卡 100% 宽单独占行竖排；
       align-items:flex-start 防 cross-axis 拉伸；overflow-y:auto 超出滚动 */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    overflow-y: auto;
    background: var(--card-bg, #fff);
    box-shadow: 2px 0 12px rgba(15, 23, 42, .08);
}
/* 侧栏内卡片：flex:0 0 auto 防止被 main-axis grow 拉伸挤压（原 .stat-card 有 flex:1 1 0%）；
   图标+文字左右排列（横向更省空间） */
body.sb-mode .container > .today-stats .stat-card {
    min-height: 0;
    padding: 8px 10px;
    width: 100%;
    flex: 0 0 auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
}
body.sb-mode .container > .today-stats .stat-card p { margin: 0; flex: 1; font-size: 0.75rem; line-height: 1.2; }
body.sb-mode .container > .today-stats .stat-card h3 { margin: 0; font-size: 1.05rem; line-height: 1.2; }
/* 顶部 4 个统计卡 2×2 紧凑小卡（stat-card-info）：标签(p) 左 + 值(h3) 右
   ★ 2026-09-10 保持原布局不变，不参与下方导航条改造 */
body.sb-mode .container > .today-stats .stat-card-info { width: calc(50% - 4px); }
body.sb-mode .container > .today-stats .stat-card-info h3 { font-size: 1rem; }
/* 常规模式：统计卡 p 内 <br> 隐藏（文字一行），仅侧边栏模式显示两行 */
.stat-card-info p br { display: none; }
body.sb-mode .container > .today-stats .stat-card-info p { font-size: 0.62rem; line-height: 1.1; white-space: nowrap; }
body.sb-mode .container > .today-stats .stat-card-info p br { display: inline; }

/* ============================================================
   ★ 2026-09-10 侧边栏「图标方块导航条」（老板选定方案 C）
   从「统计图表」往下的功能卡片（.stat-card:not(.stat-card-info)）改为导航条：
       [图标方块] 模块名 ……………………………… [数值徽章]
   · 图标方块底色 = 该模块专属色（--card-accent，card-visibility.js 从 config.color 写入）13% 透明度。
     ★ 不用 color-mix()，改用 ::before 铺色 + opacity，兼容老版 iPad Safari。
   · 不分组，完全按卡片设置里的顺序排列（用户可自行拖动排序）。
   · 顶部 4 个统计卡（.stat-card-info）保持原布局，见上方规则。
   · 对照 demo：docs/侧边栏导航条方案对比.html 的「方案 C」。
   全部包在 min-width:1024px 里（与 CardLayout.SB_MIN_WIDTH 一致），窄屏天然不生效。
   ============================================================ */
@media (min-width: 1024px) {
    /* 1) 导航项：一条可点的行，不再是白底卡片 */
    body.sb-mode .container > .today-stats .stat-card:not(.stat-card-info) {
        height: 41px;
        padding: 0 8px;
        gap: 9px;
        /* 容器 gap 是 8px（为顶部统计卡的 2×2 准备的，不能改）；
           这里用 -6px 底边距把它抵消成 2px 视觉行距，节奏与 demo 的 43px 一致 */
        margin: 0 0 -6px;
        border: 1px solid transparent;
        border-radius: 10px;
        background: transparent;
        box-shadow: none;
        transition: background .16s, border-color .16s, box-shadow .16s;
    }
    /* 去掉卡片底部的彩色渐变条（导航条不需要） */
    body.sb-mode .container > .today-stats .stat-card:not(.stat-card-info)::after { display: none; }

    /* 2) 图标方块：h3 本身就是方块；::before 铺一层 13% 的模块专属色 */
    body.sb-mode .container > .today-stats .stat-card:not(.stat-card-info) h3 {
        order: -1;
        flex: 0 0 auto;
        position: relative;
        width: 27px;
        height: 27px;
        margin: 0;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12.5px;
        line-height: 1;
        overflow: hidden;
        transition: transform .16s;
    }
    body.sb-mode .container > .today-stats .stat-card:not(.stat-card-info) h3::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--card-accent, var(--primary, #4b6cb7));
        opacity: .13;
    }
    body.sb-mode .container > .today-stats .stat-card:not(.stat-card-info) h3 i {
        position: relative;
        z-index: 1;
        font-size: 12.5px;
        color: var(--card-accent, var(--primary, #4b6cb7));
    }

    /* 3) 模块名 */
    body.sb-mode .container > .today-stats .stat-card:not(.stat-card-info) p {
        flex: 1;
        min-width: 0;
        margin: 0;
        font-size: 12.5px;
        line-height: 1.3;
        color: #3a4453;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 4) 悬停 / 当前项（当前项由 .sb-active 标记，见 card-layout.js）
       ★ 不用 translateX：容器 overflow-y:auto，横移会触发横向滚动条 */
    body.sb-mode .container > .today-stats .stat-card:not(.stat-card-info):hover { background: #f6f9fd; }
    body.sb-mode .container > .today-stats .stat-card:not(.stat-card-info):hover h3 { transform: scale(1.07); }
    body.sb-mode .container > .today-stats .stat-card:not(.stat-card-info).sb-active {
        background: #fff;
        border-color: rgba(75, 108, 183, .38);
        box-shadow: 0 3px 10px rgba(75, 108, 183, .16);
    }
    body.sb-mode .container > .today-stats .stat-card:not(.stat-card-info).sb-active p {
        color: #2f4d86;
        font-weight: 600;
    }

    /* 5) 积分奖励卡特例：它的 h3 里放的是「积分数值」而不是图标 →
         数值改成右侧蓝色胶囊徽章，图标方块改由 p::before 顶上。
         ★ 只改样式不动 DOM，常规（非侧边栏）模式完全不受影响 */
    body.sb-mode .container > .today-stats #pointsCard p {
        order: -1;
        display: flex;
        align-items: center;
        gap: 9px;
    }
    body.sb-mode .container > .today-stats #pointsCard p::before {
        content: "\f06b";                       /* fa-gift */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        flex: 0 0 auto;
        width: 27px;
        height: 27px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12.5px;
        line-height: 1;
        color: #3498db;
        background: rgba(52, 152, 219, .13);
    }
    body.sb-mode .container > .today-stats #pointsCard h3 {
        order: 0;
        flex: 0 0 auto;
        width: auto;
        height: auto;
        margin: 0 0 0 auto;
        padding: 1px 8px;
        border-radius: 999px;
        background: rgba(52, 152, 219, .13);
        color: #2b7fc4;
        font-size: 11.5px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        overflow: visible;
    }
    body.sb-mode .container > .today-stats #pointsCard h3::before { display: none; }

    /* 6) 底部「收起 / 展开全部」：也在侧栏里，跟着收一收 */
    body.sb-mode .container > .today-stats > #moreCardsCard,
    body.sb-mode .container > .today-stats > .card-fold-bar { width: 100%; }
    body.sb-mode .container > .today-stats > .card-fold-bar { margin: 6px 0 0; }
    body.sb-mode .container > .today-stats .card-fold-btn { font-size: 11px; }
}
/* 窄屏兜底：<1024 时还原（JS 也会移除 class，双保险） */
@media (max-width: 1023px) {
    body.sb-mode .container { padding-left: 0 !important; padding-top: 0 !important; }
    body.sb-mode .container > header { position: relative; left: auto; right: auto; top: auto; width: auto; z-index: auto; }
    body.sb-mode > .stats-page { margin-left: 0 !important; }
    body.sb-mode .container > .today-stats {
        position: static;
        left: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        margin: 5px 0;
        padding: 5px 0;
        display: grid;
        grid-template-columns: repeat(var(--card-columns, 8), 1fr) !important;
        overflow: visible;
        box-shadow: none;
    }
    body.sb-mode .container > .today-stats .stat-card,
    body.sb-mode .container > .today-stats .stat-card-info {
        width: auto;
        flex: 1 1 0%;
        display: block;
        text-align: center;
    }
    body.sb-mode .container > .today-stats .stat-card p,
    body.sb-mode .container > .today-stats .stat-card h3 { margin: 0 0 5px; }
}

/* ★ 2026-08-18 课程表固定格子课表：时间节点/空格置入/选择课程/时间设置 */
.tt-slot-no { display: block; font-size: 12px; font-weight: 700; color: #3a3f45; }
.tt-slot-range { display: block; font-size: 10px; color: #9aa0a8; font-weight: 400; margin-top: 2px; }
.tt-add-cell {
    /* ★ 2026-08-20 修复：min-height 74px → 0，与课程卡片等高（填满 60px 格子），
       避免"空白格子比置入后卡片高"导致的大小不一致 */
    flex: 1; min-height: 0; height: 100%; display: flex; align-items: center; justify-content: center;
    border: 1px dashed #c8ccd2; border-radius: 8px; color: #c8ccd2; cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.tt-add-cell:hover { border-color: var(--primary, #4b6cb7); color: var(--primary, #4b6cb7); background: rgba(75, 108, 183, .05); }
.tt-add-cell i { font-size: 16px; }
.tt-pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.tt-pick-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border: 1px solid #e4e7eb; border-radius: 10px; cursor: pointer; transition: background .12s, border-color .12s;
}
.tt-pick-item:hover { background: #f5f8ff; border-color: var(--primary, #4b6cb7); }
.tt-pick-name { flex: 1; font-size: 14px; color: #23272d; }
.tt-pick-hours { font-size: 12px; color: #9aa0a8; }
.tt-pick-tip { margin: 10px 0 0; font-size: 12px; color: #9aa0a8; text-align: center; }
.tt-pick-tip b { color: #4b6cb7; }
/* 时间节点设置弹窗 */
.tt-slot-editor-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.tt-slot-editor-row { display: flex; align-items: center; gap: 6px; }
.tt-slot-editor-row input[type="text"] { flex: 0 0 70px; }
.tt-slot-editor-row input[type="time"] { flex: 1; min-width: 0; }
.tt-slot-editor-row input {
    border: 1px solid #e4e7eb; border-radius: 8px; padding: 7px 8px; font-size: 13px; font-family: inherit; color: #23272d;
}
.tt-se-dash { color: #9aa0a8; flex-shrink: 0; }
.tt-se-del { border: none; background: none; color: #e5484d; cursor: pointer; padding: 6px 8px; border-radius: 8px; flex-shrink: 0; }
.tt-se-del:hover { background: #fdecec; }
/* ★ 2026-08-18 方案X：合并行数输入（rowSpan） */
.tt-se-rs-wrap { display: flex; align-items: center; gap: 4px; flex-shrink: 0; color: #9aa0a8; font-size: 12px; }
.tt-se-rs { width: 44px !important; flex: 0 0 44px !important; text-align: center; }
.tt-se-rs-label { white-space: nowrap; }
.tt-se-add { width: 100%; border: 1px dashed #c8ccd2; background: none; border-radius: 10px; padding: 9px; color: #5b6068; cursor: pointer; font-size: 13px; font-family: inherit; }
.tt-se-add:hover { border-color: var(--primary, #4b6cb7); color: var(--primary, #4b6cb7); }
.tt-se-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.tt-se-cancel, .tt-se-save { border: none; border-radius: 10px; padding: 9px 20px; font-size: 13px; cursor: pointer; font-family: inherit; }
.tt-se-cancel { background: #eef0f3; color: #5b6068; }
.tt-se-save { background: var(--primary, #4b6cb7); color: #fff; }
.tt-se-tip { margin: 10px 0 0; font-size: 12px; color: #9aa0a8; line-height: 1.6; }
.tt-slots-btn { margin-left: 8px; }

/* ★ 2026-08-18 课程时间设置：周几复选框（勾选的天渲染节次格子） */
/* ★ 2026-08-18 合并方案：顶部星期名切换（编辑对象） */
.tt-day-tab-group { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.tt-day-tab {
    flex: 1; min-width: 36px; text-align: center; padding: 7px 2px; border-radius: 9px;
    border: 1px solid #e4e7eb; background: #fff; cursor: pointer; transition: all .15s;
    font-size: 12px; color: #5b6068; font-family: inherit;
}
.tt-day-tab:hover { border-color: var(--primary, #4b6cb7); color: var(--primary, #4b6cb7); }
.tt-day-tab.active { background: var(--primary, #4b6cb7); border-color: var(--primary, #4b6cb7); color: #fff; font-weight: 600; }
/* 编辑区容器 */
.tt-se-editor { border: 1px solid #e4e7eb; border-radius: 12px; padding: 10px 12px; background: #f7f9f8; margin-bottom: 12px; }
.tt-se-editor-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.tt-se-editor-head b { color: #23272d; }
.tt-se-count { font-size: 11px; color: #9aa0a8; }
/* 新增行蓝框标出 */
.tt-slot-editor-row[data-isnew="1"] input { border-color: #85b7eb; background: #e6f1fb; }
/* 应用范围（下方勾选） */
.tt-se-apply-title { font-size: 12px; color: #5b6068; margin: 4px 0 6px; }
.tt-se-apply-title i { margin-right: 4px; color: #9aa0a8; }
.tt-se-apply-group { display: flex; gap: 6px; flex-wrap: wrap; }
.tt-se-apply {
    flex: 1; min-width: 40px; display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 6px 2px; border-radius: 9px; border: 1px solid #e4e7eb; background: #fff;
    cursor: pointer; user-select: none; transition: border-color .15s;
}
.tt-se-apply:hover { border-color: var(--primary, #4b6cb7); }
.tt-se-apply input[type="checkbox"] { width: 13px; height: 13px; margin: 0; cursor: pointer; accent-color: var(--primary, #4b6cb7); }
.tt-se-apply span { font-size: 12px; color: #5b6068; }
/* ★ 2026-09-02 节次模板设置弹窗（全局模板 + 按天适用勾选） */
.tt-section-template { padding: 12px; }
.tt-apply-section, .tt-section-list { margin-bottom: 16px; }
.tt-section-title { font-weight: 600; margin-bottom: 8px; font-size: 14px; }
.tt-apply-days { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-apply-day { display: flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; }
.tt-slot-editor-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.tt-section-tip { font-size: 12px; color: #999; margin-top: 8px; }
/* 批量排课节次下拉宽度 */
.tt-slot-section { max-width: 132px; flex-shrink: 0; }

/* ★ 2026-08-18 点格置入：每周重复选项 + 截止日期 */
.tt-pick-options { margin-top: 12px; border-top: 1px dashed #e4e7eb; padding-top: 10px; }
.tt-pick-repeat {
    display: flex; align-items: center; gap: 6px; font-size: 13px; color: #3a3f45; cursor: pointer;
    user-select: none; margin-bottom: 8px;
}
.tt-pick-repeat input[type="checkbox"] { width: 14px; height: 14px; margin: 0; accent-color: var(--primary, #4b6cb7); }
.tt-pick-until-row { display: flex; align-items: center; gap: 8px; }
.tt-pick-until-label { font-size: 12px; color: #8a8f98; flex-shrink: 0; }
.tt-pick-until-row input[type="date"] {
    flex: 1; border: 1px solid #e4e7eb; border-radius: 8px; padding: 7px 8px;
    font-size: 13px; font-family: inherit; color: #23272d; background: #fff;
}

/* ★ 2026-09-03 批量排课选择器样式 */
.tt-pick-type {
    font-size: 11px; color: #9aa0a8; background: #f0f2f5; padding: 2px 8px; border-radius: 8px; flex-shrink: 0;
}
.tt-pick-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.tt-pick-cancel, .tt-pick-save {
    border: none; border-radius: 10px; padding: 9px 20px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.tt-pick-cancel { background: #eef0f3; color: #5b6068; }
.tt-pick-save { background: var(--primary, #4b6cb7); color: #fff; }
.tt-pick-save:hover { opacity: .9; }

.tt-bpick-container { display: flex; flex-direction: column; }
.tt-bpick-row {
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
    padding: 8px; border: 1px solid #e4e7eb; border-radius: 10px; background: #fbfcfd;
}
.tt-bpick-row select,
.tt-bpick-row input[type="time"] {
    border: 1px solid #e4e7eb; border-radius: 8px; padding: 6px 8px; font-size: 13px;
    font-family: inherit; color: #23272d; background: #fff;
}
.tt-bpick-day { flex-shrink: 0; }
.tt-bpick-time { display: flex; align-items: center; gap: 4px; flex: 1; }
.tt-bpick-time select,
.tt-bpick-time input[type="time"] { flex: 1; min-width: 0; }
.tt-bpick-del {
    border: none; background: none; color: #e5484d; cursor: pointer; padding: 6px 8px;
    border-radius: 8px; flex-shrink: 0; font-size: 14px;
}
.tt-bpick-del:hover { background: #fdecec; }
.tt-bpick-preview {
    margin-top: 8px; padding: 10px; border: 1px solid #e4e7eb; border-radius: 10px; background: #f8f9fa;
    max-height: 200px; overflow-y: auto;
}
.tt-slot-section {
    border: 1px solid #e4e7eb; border-radius: 8px; padding: 6px 8px; font-size: 13px;
    font-family: inherit; color: #23272d; background: #fff; flex-shrink: 0;
}


/* ==========================================================
   ★ 落地页（未登录时的功能介绍页）+ 登录弹窗
   2026-09-10 新增。原「全屏遮罩式登录」(#authOverlay) 保留兼容，
   实际入口改为：落地页 → 点右上角「登录」→ 居中弹窗(#authModal)。
   显隐唯一开关 = <html> 上的 .hxb-authed 类（见 index.html <head> 内联脚本）。
   所有类名统一 landing- 前缀，避免与本文件既有类名冲突。
   ========================================================== */

/* ---------- 0. 显隐总开关 ---------- */
.landing-page {
    display: none;                      /* 默认不显示，只由下面的 html 类规则打开 */
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 99999;                     /* 与旧 .auth-overlay 同级，盖住 .container */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    background: #fff;
    color: var(--text);
}
html:not(.hxb-authed) .landing-page { display: block; }
/* 未登录时不显示「加载中」遮罩（它 z-index 9999 虽低，但 DOM 在落地页之后，会压在上面） */
html:not(.hxb-authed) .loading-overlay { display: none; }
/* iOS Safari 加固：body 的 overflow:hidden 不足以阻止根元素滚动，
   这里把根元素也一起锁住，保证落地页出现时底下的应用界面不会被滑出来看到 */
html:not(.hxb-authed),
html:not(.hxb-authed) body {
    overflow: hidden;
    height: 100%;
}

/* ---------- 1. 顶部导航 ---------- */
.landing-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
}
.landing-nav-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 12px clamp(16px, 4vw, 40px);
    display: flex;
    align-items: center;
    gap: 16px;
}
.landing-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}
.landing-brand-mark {
    width: 38px; height: 38px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    font-size: 17px;
    box-shadow: var(--shadow-sm);
}
.landing-brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.landing-brand-text strong { font-size: 16px; font-weight: 700; color: var(--text-heading); letter-spacing: .5px; }
.landing-brand-text small { font-size: 11px; color: var(--text-muted); }

.landing-nav-links {
    display: flex;
    gap: 22px;
    margin-left: auto;
}
.landing-nav-links a {
    font-size: 14px;
    color: var(--text-light);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.landing-nav-links a:hover { color: var(--primary); }

.landing-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.landing-nav-links + .landing-nav-actions { margin-left: 0; }

/* ---------- 2. 通用按钮 ---------- */
.landing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast),
                background var(--transition-fast), color var(--transition-fast);
}
.landing-btn-lg { padding: 14px 28px; font-size: 15px; border-radius: 10px; }
.landing-btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, #35508f 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(75, 108, 183, 0.32);
}
.landing-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(75, 108, 183, 0.42); }
.landing-btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}
.landing-btn-ghost:hover { background: var(--bg-hover); border-color: var(--primary); color: var(--primary); }
.landing-btn-outline {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
}
.landing-btn-outline:hover { background: var(--primary); color: #fff; }
.landing-btn-outline-light {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
}
.landing-btn-outline-light:hover { background: rgba(255, 255, 255, 0.26); }

/* ★ 渐变背景（Hero / 底部 CTA）上的主按钮改用「白底 + 主色字」，
   否则蓝底按钮压在蓝色渐变上对比度不足 */
.landing-hero-actions .landing-btn-primary,
.landing-cta-actions .landing-btn-primary {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.landing-hero-actions .landing-btn-primary:hover,
.landing-cta-actions .landing-btn-primary:hover {
    background: #f2f6ff;
    color: var(--secondary);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.26);
}

/* ---------- 3. 主视觉（全宽大图打底 + 左侧文案） ----------
   ★ 注意：style.css 里有全局 `header` 规则（渐变背景 / 圆角15px / 阴影 / overflow:hidden）
     和 `header::before` 装饰层（position:absolute 且铺满 200%），它属于定位元素，
     会盖在静态子元素之上 → 必须给内容容器 position:relative + z-index 才能正常点击。
     应用里原有的 .header-content 就是这么做的，这里同理。
   2026-09-10 改版：三设备物料大图铺满整个首屏作背景，文案与按钮压在左侧，
   左侧叠一层渐变蒙版保证可读性（原「左文右图 + 免费胶囊 + 底部小字」的堆叠版已废弃）。 */
.landing-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: clamp(430px, 38vw, 560px);
    color: #fff;
    padding: clamp(46px, 6.5vw, 88px) clamp(16px, 4vw, 40px);
    background:
        radial-gradient(115% 92% at 84% 20%, rgba(125, 157, 224, 0.46), rgba(125, 157, 224, 0) 55%),
        linear-gradient(116deg, #16233f 0%, #27406a 48%, #3d5c96 100%);
    /* 覆盖全局 header 的圆角/阴影（落地页是全宽通栏，不要圆角卡片效果） */
    border-radius: 0;
    box-shadow: none;
}
/* 关掉全局 `header::before` 白色光晕装饰层（174-196 行）：
   它会被放进来的真实大图盖住，留着会导致「占位时看得见、换图后消失」的不一致。
   光晕效果改由上面 .landing-hero 自己的 background 承担。 */
.landing-hero::before { display: none; }
.landing-hero-inner {
    position: relative;                 /* ★ 必须：压在 header::before / 蒙版之上，否则按钮点不动 */
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
    /* 文字只占左 48%，右侧 52% 让位给三设备大图（与 .hero-devices 的 50% 宽度对齐，互不重叠）。
       ★ 不要用 padding-right: 52% —— flex 项的百分比 padding 是按「父容器宽度」算的，
         不是按自身宽度，会把文字列压窄到算不准（实测 h1 被挤成 3 行）。 */
    display: grid;
    grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
    align-items: center;
}
.landing-hero-text { max-width: 100%; min-width: 0; }
/* ★ 文字投影：万一老板设计的大图左侧偏亮，白色文案依然清晰。
   这条比「把蒙版加到很黑」更划算 —— 蒙版加黑会把右侧三台设备一起压暗。 */
.landing-hero-eyebrow,
.landing-hero-text h1,
.landing-hero-sub {
    text-shadow: 0 2px 16px rgba(8, 16, 34, 0.5);
}
.landing-hero-eyebrow {
    display: inline-block;
    font-size: 12px;
    letter-spacing: .5px;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 5px 14px;
    margin-bottom: 18px;
}
.landing-hero-text h1 {
    /* ★ 必须加 !important：style.css 里全局 `header h1 { font-size: 2.2rem !important }`
       （见 15036 / 15757 / 15887 / 15909 行）会漏进这片 <header>，不加就被压成 2rem/2.2rem。
       字号跟随文字列宽度收放，保证「帮孩子把「每天要做的事」」始终排得下一行。 */
    font-size: clamp(26px, 3.4vw, 42px) !important;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 18px;
}
.landing-hero-sub {
    font-size: clamp(14px, 1.6vw, 16px);
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.86);
    max-width: 100%;
    text-wrap: balance;                 /* 两行时均匀断行，避免末行只剩一两个字 */
    margin-bottom: 26px;
}
.landing-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 3b. 首屏背景层：三设备物料大图（现在是 CSS 占位，换成 <img> 后自动接管） ----------
   ★ 换成真图：把 index.html 里 .hero-devices 整块替换成
     <img src="screenshots/hero-devices.png" alt="...">  → 脚本加 .has-img，占位自动隐藏。
   ★ 图片锚点固定在右侧（object-position:100%），保证右侧三台设备永远不被裁掉；
     多出来的部分只裁左侧空白区（那片反正被蒙版压着）。 */
.landing-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.landing-hero-media-inner {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    height: 100%;
}
.landing-hero-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 100% 50%;
    display: block;
}
.landing-hero-media.has-img .hero-devices { display: none; }

/* 左侧可读性蒙版：保证文案压在图上依然清晰（右侧完全透明，不遮设备） */
.landing-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* 左侧压暗保文字，中段快速收干净，尽量不压暗右侧的三台设备 */
    background: linear-gradient(90deg,
        rgba(14, 23, 44, 0.94) 0%,
        rgba(14, 23, 44, 0.82) 26%,
        rgba(14, 23, 44, 0.56) 46%,
        rgba(14, 23, 44, 0.24) 60%,
        rgba(14, 23, 44, 0) 74%);
}

/* --- 占位设备组（纯 CSS 画的三联示意图，仅用于老板出图前预览版式） --- */
.hero-devices {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: min(50%, 600px);
    aspect-ratio: 1.75 / 1;
}
.hero-dev {
    position: absolute;
    background: #fff;
    border-radius: 9px;
    box-shadow: 0 22px 50px rgba(8, 18, 42, 0.42), 0 3px 10px rgba(8, 18, 42, 0.24);
}
.hero-dev::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(155deg, rgba(255,255,255,.42), rgba(255,255,255,0) 40%);
}
/* 桌面浏览器 */
.hero-dev-browser {
    left: 0; top: 10%; width: 70%;
    aspect-ratio: 1.55 / 1;
    z-index: 1;
    overflow: hidden;
    display: flex; flex-direction: column;
}
.hd-bar { height: 6%; flex: none; background: #eef1f7; display: flex; align-items: center; gap: 4px; padding: 0 2%; }
.hd-dot { width: 1.3%; aspect-ratio: 1 / 1; border-radius: 50%; background: #c6cede; flex: none; }
.hd-url { height: 36%; flex: 1; max-width: 44%; margin-left: 1.5%; border-radius: 99px; background: #dde3ee; }
.hd-screen { flex: 1; display: flex; background: #fbfcff; overflow: hidden; min-height: 0; }
.hd-side {
    width: 25%; background: #f2f5fb; border-right: 1px solid #e6ebf5; padding: 9px 7px;
    display: flex; flex-direction: column; gap: 6px;
}
.hd-side span { height: 6%; border-radius: 99px; background: #dbe3f1; flex: none; }
.hd-side span:first-child { background: #a9bde6; width: 72%; }
.hd-main { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hd-title { height: 7%; width: 44%; flex: none; border-radius: 99px; background: #c7d5ee; }
.hd-cards { display: flex; gap: 7px; flex: 0 0 26%; }
.hd-cards i { flex: 1; border-radius: 5px; background: #eaf0fa; }
.hd-cards i:first-child { background: #dbe7fb; }
.hd-bars { display: flex; align-items: flex-end; gap: 6px; flex: 1; min-height: 0; }
.hd-bars b { flex: 1; background: linear-gradient(180deg, #8aa6e3, #4b6cb7); border-radius: 3px 3px 0 0; }
.hd-bars b:nth-child(1) { height: 38%; }
.hd-bars b:nth-child(2) { height: 64%; }
.hd-bars b:nth-child(3) { height: 48%; }
.hd-bars b:nth-child(4) { height: 82%; }
.hd-bars b:nth-child(5) { height: 58%; }
.hd-bars b:nth-child(6) { height: 95%; }
/* 平板 */
.hero-dev-tablet {
    right: 1%; top: 0; width: 32%;
    aspect-ratio: .74 / 1;
    z-index: 2;
    border: 5px solid #212a3b; border-radius: 13px;
    padding: 8px;
    background: #fbfcff;
    display: flex; flex-direction: column; gap: 8px;
}
.hd-cam { position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 16px; height: 3px; border-radius: 99px; background: #3a465c; }
.hd-tab-head { height: 5%; width: 52%; flex: none; border-radius: 99px; background: #c7d5ee; }
.hd-tab-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 7px; min-height: 0; }
.hd-tab-grid i { border-radius: 6px; background: #e6ecf9; }
.hd-tab-grid i:nth-child(1) { background: #dbe7fb; }
.hd-tab-grid i:nth-child(4) { background: #dbe7fb; }
.hd-tab-grid i:nth-child(5) { grid-column: span 2; background: #dbe7fb; }
/* 手机 */
.hero-dev-phone {
    right: 16%; bottom: 0; width: 18%;
    aspect-ratio: .49 / 1;
    z-index: 3;
    border: 4px solid #212a3b; border-radius: 14px;
    padding: 11px 7px 8px;
    background: #fbfcff;
    display: flex; flex-direction: column; gap: 5px;
}
.hd-notch { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); width: 34%; height: 4px; border-radius: 99px; background: #212a3b; }
.hd-ph-head { height: 4%; width: 56%; flex: none; border-radius: 99px; background: #c7d5ee; }
.hd-ph-row { flex: 0 0 12%; border-radius: 5px; background: #eef3fb; }
.hd-ph-row.hd-a { background: #dbe7fb; }
.hd-ph-big { flex: 1; min-height: 0; border-radius: 7px; background: linear-gradient(135deg, #8aa6e3, #4b6cb7); }

/* --- 窄屏：改为「文案在上、大图通栏在下」，图片完整显示不裁切 --- */
@media (max-width: 900px) {
    .landing-hero {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        padding-bottom: 0;
    }
    /* 竖屏时大图在文案下方：蒙版只压暗上半屏的文字区，不碰下方大图 */
    .landing-hero-scrim {
        background: linear-gradient(180deg,
            rgba(14, 23, 44, 0.88) 0%,
            rgba(14, 23, 44, 0.64) 28%,
            rgba(14, 23, 44, 0.22) 46%,
            rgba(14, 23, 44, 0) 58%);
    }
    .landing-hero-inner { order: 1; grid-template-columns: 1fr; text-align: center; }
    .landing-hero-text { margin: 0 auto; }
    /* 竖屏时标题不再跟视口宽度线性缩放，改成按屏宽分档，避免过大／过小 */
    .landing-hero-text h1 { font-size: clamp(26px, 4.6vw, 34px) !important; }
    .landing-hero-sub { margin-left: auto; margin-right: auto; }
    .landing-hero-actions { justify-content: center; }
    .landing-hero-media { position: relative; inset: auto; order: 2; }
    .landing-hero-media-inner { max-width: 620px; height: auto; padding: 26px 0; }
    .landing-hero-media img { height: auto; object-fit: contain; }
    .hero-devices { position: relative; top: auto; right: auto; transform: none; width: 100%; }
    .hero-dev-tablet { border-width: 4px; }
    .hero-dev-phone { border-width: 3px; }
}

/* ---------- 4. 截图占位框 ----------
   ★ 替换成真截图：在 .landing-shot 内部插入
     <img src="screenshots/xxx.png" alt="模块名">
     · 横图（宽 ≥ 高）：保持 16:9 / 16:10 铺满，与原设计一致
     · 竖图（高 > 宽）：自动改用竖框完整显示，不裁切（规则见第 12 节）
   放图后脚本会给容器加 .has-img，自动隐藏下面的占位文字。 */
.landing-shot {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    padding-bottom: 62.5%;              /* 兜底：老版 Safari 不支持 aspect-ratio */
    height: 0;
    display: block;
    border: 2px dashed #c9d4e6;
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, #f5f8ff 0%, #eef3fb 100%);
    color: #7a8ba6;
    overflow: hidden;
}
@supports (aspect-ratio: 16 / 10) {
    .landing-shot { aspect-ratio: 16 / 10; padding-bottom: 0; height: auto; }
}
.landing-shot > i,
.landing-shot > span,
.landing-shot > small {
    position: absolute;
    left: 0; right: 0;
    text-align: center;
}
.landing-shot > i { top: 50%; transform: translateY(-190%); font-size: 30px; opacity: .8; }
.landing-shot > span { top: 50%; transform: translateY(-15%); font-size: 14px; font-weight: 600; color: #5f7191; }
.landing-shot > small { top: 50%; transform: translateY(120%); font-size: 11.5px; color: #9aa9c0; }
.landing-shot img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-lg);
}
/* （2026-09-10 已废弃）.landing-shot-hero —— 首屏占位框改为全宽大图，见第 3b 节 */

/* ---------- 5. 区块通用 ---------- */
.landing-section {
    padding: clamp(44px, 6vw, 84px) clamp(16px, 4vw, 40px);
    scroll-margin-top: 72px;            /* 锚点跳转时避开 sticky 导航 */
}
.landing-section-alt { background: var(--bg-subtle); }
.landing-section-head {
    max-width: 1180px;
    margin: 0 auto clamp(28px, 4vw, 48px);
    text-align: center;
}
.landing-section-head h2 {
    font-size: clamp(20px, 2.6vw, 28px);
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 12px;
}
.landing-section-head p {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-light);
    max-width: 620px;
    margin: 0 auto;
}

/* ---------- 6. 功能总览 ---------- */
.landing-grid {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 14px;
}
/* 12 张卡在各断点排成整齐的行数（避免 auto-fill 出现 7+5 这种不整齐的分布） */
@media (min-width: 1024px) { .landing-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 768px) and (max-width: 1023px) { .landing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.landing-mini {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.landing-mini:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #cfdcf2; }
.landing-mini i { font-size: 22px; }
/* ★ 2026-09-10：卡片改为可点击的 <a>，名称下方加一句功能简介 */
.landing-mini { text-decoration: none; cursor: pointer; padding: 16px 12px 14px; gap: 7px; }
.landing-mini-name { display: block; font-size: 13px; color: var(--text); font-weight: 600; text-align: center; }
.landing-mini-desc {
    display: block;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--text-light);
    font-weight: 400;
    text-align: center;
}
.landing-mini:hover .landing-mini-name,
.landing-mini:hover .landing-mini-desc { color: var(--primary); }
.landing-mini:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- 7. 模块详解（每个模块一个独立区块，左右交替） ---------- */
.landing-module {
    max-width: 1080px;
    margin: 0 auto clamp(40px, 6vw, 76px);
    display: grid;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    gap: clamp(20px, 4vw, 60px);
    align-items: center;
}
.landing-module:last-child { margin-bottom: 0; }
.landing-module-reverse .landing-module-media { order: 2; }
.landing-module-reverse .landing-module-body { order: 1; }
.landing-module-media { min-width: 0; }
.landing-module-body { min-width: 0; }
.landing-module-index {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--primary);
    background: var(--bg-hover);
    border-radius: 6px;
    padding: 3px 9px;
    margin-bottom: 12px;
}
.landing-module-body h3 {
    font-size: clamp(18px, 2.2vw, 23px);
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 10px;
}
.landing-module-lead {
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--text-light);
    margin-bottom: 16px;
}
.landing-points { list-style: none; }
.landing-points li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--text);
}
.landing-points li:last-child { margin-bottom: 0; }
.landing-points li > i {
    position: absolute;
    left: 0;
    top: 4px;
    font-size: 11px;
    color: #fff;
    width: 17px; height: 17px;
    border-radius: 50%;
    background: var(--primary);
    display: flex; align-items: center; justify-content: center;
}

/* ---------- 8. （已废弃）Hero「基础功能永久免费」标语 ----------
   2026-09-10：与下方免费权益条内容重复，已从 Hero 移除，统一由权益条表达。 */

/* ---------- 9. 免费权益条 ---------- */
.landing-perks {
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border);
    padding: 26px clamp(16px, 4vw, 40px);
}
.landing-perks-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2.4vw, 30px);
}
.landing-perk { display: flex; align-items: center; gap: 13px; min-width: 0; }
.landing-perk > i {
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 12px;
    background: rgba(75, 108, 183, 0.1);
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.landing-perk-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.landing-perk-text strong { font-size: 15px; font-weight: 700; color: var(--text-heading); }
.landing-perk-text span { font-size: 12.5px; color: var(--text-light); }

/* ---------- 10. 成长流程图（每步内部并列，不是单一箭头串联） ---------- */
.landing-flow {
    max-width: 900px;
    margin: 0 auto;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: clamp(22px, 3.4vw, 40px) clamp(18px, 3vw, 36px);
}
.landing-flow-step { display: flex; flex-direction: column; gap: 13px; }
.landing-flow-head { display: flex; align-items: center; gap: 12px; }
.landing-flow-num {
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 14px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.landing-flow-headtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.landing-flow-headtext strong { font-size: 15px; font-weight: 700; color: var(--text-heading); }
.landing-flow-headtext span { font-size: 12.5px; color: var(--text-light); }
.landing-flow-nodes { display: flex; flex-wrap: wrap; gap: 11px; padding-left: 42px; }
.landing-flow-node {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 17px;
    border-radius: var(--radius-md);
    background: rgba(75, 108, 183, 0.07);
    border: 1px solid rgba(75, 108, 183, 0.22);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-heading);
}
.landing-flow-node > i { font-size: 14px; color: var(--primary); }
.landing-flow-arrow {
    width: 2px;
    height: 30px;
    margin: 6px 0 6px 14px;
    background: linear-gradient(180deg, rgba(75, 108, 183, 0.16), rgba(75, 108, 183, 0.6));
    position: relative;
}
.landing-flow-arrow::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 0;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid var(--primary);
}

/* ---------- 11. 紧凑版配图 + 模块区块压缩（24 个模块，控制整页长度） ---------- */
.landing-shot-compact {
    aspect-ratio: 16 / 9;
    padding-bottom: 56.25%;
    max-height: 170px;
}
@supports (aspect-ratio: 16 / 9) {
    .landing-shot-compact { aspect-ratio: 16 / 9; padding-bottom: 0; height: auto; max-height: 170px; }
}
.landing-shot-compact > i { font-size: 26px; transform: translateY(-165%); }
.landing-shot-compact > span { font-size: 13px; transform: translateY(-10%); }
.landing-shot-compact > small { font-size: 11px; transform: translateY(115%); }

/* ---------- 12. 截图自适应：横图、竖图都完整显示，不再裁切 ----------
   由 index.html 末尾的内联脚本读图片原始宽高，写入 --shot-nw / --shot-nh，
   并给容器加 .has-img（有图）与 .is-portrait（竖图）。
   原理：容器比例 = 图片真实比例，宽度铺满该列但用 max-width 反推「高度上限」，
        于是横图、竖图都等比完整显示，不会像 object-fit:cover 那样裁掉上下边。
   --shot-maxh = 各类框的高度上限：模块横图 200 / 模块竖图 296 / Hero 竖图 340。
   没有放图的占位框不受影响，仍按原 16:9 / 16:10 显示。 */
.landing-shot.has-img > i,
.landing-shot.has-img > span,
.landing-shot.has-img > small { display: none; }

.landing-shot.has-img {
    aspect-ratio: var(--shot-nw, 16) / var(--shot-nh, 10);
    width: 100%;
    max-width: calc(var(--shot-maxh, 320px) * var(--shot-nw, 16) / var(--shot-nh, 10));
    height: auto;
    max-height: none;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0;
}
.landing-shot.has-img img { object-fit: contain; }
.landing-shot-compact.has-img { --shot-maxh: 200px; }
.landing-shot-compact.has-img.is-portrait { --shot-maxh: 296px; }

.landing-module { margin-bottom: clamp(26px, 3.4vw, 50px); scroll-margin-top: 84px; }
.landing-module-body h3 { font-size: 20px; }
/* 从上方卡片跳转过来时，短暂高亮目标区块 */
.landing-module.is-flash { border-radius: var(--radius-lg); animation: landingFlash 1.3s ease-out; }
@keyframes landingFlash {
    0%, 100% { background: transparent; }
    20% { background: rgba(75, 108, 183, 0.08); }
}

/* ---------- 12. 行动号召 ---------- */
.landing-cta {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: #fff;
    padding: clamp(38px, 5vw, 64px) clamp(16px, 4vw, 40px);
    scroll-margin-top: 72px;
}
.landing-cta-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}
.landing-cta-text h2 { font-size: clamp(18px, 2.4vw, 26px); font-weight: 700; margin-bottom: 10px; }
.landing-cta-text p { font-size: 13.5px; line-height: 1.8; color: rgba(255, 255, 255, 0.82); }
.landing-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 9. 页脚 ---------- */
.landing-footer {
    padding: 30px clamp(16px, 4vw, 40px) 40px;
    text-align: center;
    background: #fff;
    border-top: 1px solid var(--border);
}
.landing-footer p { font-size: 13px; color: var(--text-light); }
.landing-footer-sub { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

/* ---------- 10. 登录 / 注册弹窗 ---------- */
.auth-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 100000;                    /* 必须高于落地页 99999 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.auth-modal.hidden { display: none; }
.auth-modal-backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(24, 40, 72, 0.55);
}
.auth-modal-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    animation: hxbAuthModalIn 0.22s ease-out;
}
.auth-modal-close {
    position: absolute;
    top: 10px; right: 12px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border: none;
    background: transparent;
    color: #b0b7c3;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.auth-modal-close:hover { background: var(--bg-neutral); color: var(--text); }
@keyframes hxbAuthModalIn {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-modal-card { animation: none; }
}

/* ---------- 11. 响应式 ---------- */
@media (max-width: 1023px) {
    .landing-nav-links { display: none; }
    .landing-hero-inner { grid-template-columns: 1fr; }
    .landing-hero-media { order: 2; }
    .landing-hero-text { order: 1; }
    .landing-hero-sub { max-width: none; }
    .landing-module { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
}
@media (max-width: 767px) {
    /* 手机上取消 H1 的强制换行，让它按可用宽度自然折行，避免出现「每天要做 / 的事」这种断法 */
    /* ★ 标题里的 <br> 要保留：它是文案本身的断句（前半句/后半句），
       隐藏后小屏会断在「变 / 成看得见的进步」这种难看的位置。 */
    .landing-hero-text h1 br { display: inline; }
    .landing-brand-text small { display: none; }
    .landing-nav-actions { gap: 8px; }
    .landing-btn { padding: 9px 14px; font-size: 13px; }
    .landing-btn-lg { padding: 12px 20px; font-size: 14px; width: 100%; }
    .landing-hero-actions .landing-btn { flex: 1 1 46%; }
    .landing-cta-actions { width: 100%; }
    .landing-cta-actions .landing-btn { flex: 1 1 46%; }
    /* 手机上 2 列排布：3 列会把「一句话简介」挤成三行，2 列每格约 170px 更好读 */
    .landing-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .landing-mini { padding: 14px 8px 12px; gap: 6px; }
    .landing-mini i { font-size: 19px; }
    .landing-mini-name { font-size: 12.5px; }
    .landing-mini-desc { font-size: 11px; line-height: 1.5; }
    /* 免费权益条：手机上改为单列 */
    .landing-perks { padding: 20px clamp(16px, 4vw, 40px); }
    .landing-perks-inner { grid-template-columns: 1fr; gap: 14px; }
    /* 成长流程图：手机上取消节点缩进，节点占满可读宽度 */
    .landing-flow { padding: 20px 16px; }
    .landing-flow-nodes { padding-left: 0; gap: 9px; }
    .landing-flow-node { padding: 10px 14px; font-size: 13px; }
    .landing-flow-arrow { margin-left: 14px; }
    /* Hero 免费标语 / 首屏占位框已废弃（2026-09-10 改为全宽大图） */
    /* 紧凑配图再压一点 */
    .landing-shot-compact { max-height: 150px; }
    /* 有图时在手机上再收一点，避免占满一屏 */
    .landing-shot-compact.has-img { --shot-maxh: 170px; }
    .landing-shot-compact.has-img.is-portrait { --shot-maxh: 220px; }
    /* Hero：手机上收紧文案，给下方大图让出屏幕 */
    .landing-hero-eyebrow { font-size: 11.5px; padding: 4px 12px; margin-bottom: 13px; }
    .landing-hero-sub { margin-bottom: 20px; }
    /* 模块区块改为上下堆叠：图在上、文在下（顺序统一，不再左右交替） */
    .landing-module,
    .landing-module-reverse { grid-template-columns: 1fr; gap: 18px; }
    .landing-module .landing-module-media,
    .landing-module-reverse .landing-module-media { order: 1; }
    .landing-module .landing-module-body,
    .landing-module-reverse .landing-module-body { order: 2; }
}
@media (max-width: 480px) {
    .landing-hero-actions .landing-btn { flex: 1 1 100%; }
    .landing-cta-actions .landing-btn { flex: 1 1 100%; }
    .auth-modal-card { padding: 32px 20px; }
}
/* 超小屏（iPhone SE 320/360）：首屏标题再降一档，「帮孩子把「每天要做的事」」才排得下一行 */
@media (max-width: 374px) {
    .landing-hero-text h1 { font-size: 24px !important; }
}


/* ============================================================
   ★ 2026-09-15 VIP 锁定卡片（方案 E · 锁位②：卡面置灰 + 卡片右上角悬浮小锁）
   目的：VIP 过期 / 未开通时，受 VIP 保护的首页卡片一眼可辨，避免「点进去才被拦」的无效点击。
   ★ 纯视觉层 —— 点击 / 拦截逻辑零改动：点锁定卡仍走
     page-cards.js 的 _vip() → VipGuard.allowOpen() → 原有 VIP 解锁弹窗。
   ★ 打/撤 .vip-locked 的逻辑在 js/core/vip-guard.js 的 applyCardLocks()。
   ★★ 千万不要用 filter:grayscale() 一次性置灰：滤镜会把小锁的琥珀 / 石板色
      一起吃掉，「已过期」和「未开通」就再也分不出来了 → 必须逐元素改色。
   对照 demo：docs/VIP锁卡片设计/方案对比.html（方案 E）
   ============================================================ */

/* ---------- 1. 卡面置灰 ---------- */
.stat-card.vip-locked { background: #F4F6F9; box-shadow: 0 3px 7px rgba(15, 23, 42, .055); }
.stat-card.vip-locked::after { background: linear-gradient(90deg, #CCD5DF, #E7EBF0) !important; }
/* ★ 卡片图标色由 12 条 ID 选择器写死（#petCard h3{color:#ff6b9d} 等），优先级高于类选择器，
   必须 !important 才能覆盖 */
.stat-card.vip-locked h3,
.stat-card.vip-locked h3 i,
.stat-card.vip-locked h3 .num { color: #AEB9C6 !important; }
.stat-card.vip-locked p { color: #98A5B3 !important; }
/* 上浮幅度减半（原 -5px）：不再给出「还能点」的暗示 */
.stat-card.vip-locked:hover { transform: translateY(-2px); }

/* ---------- 2. 状态色（锁是灰卡上唯一有颜色的元素，色要够深才看得见） ---------- */
.stat-card.vip-locked[data-vip="none"]    { --lk: #6B7C90; }   /* 未开通：石板灰 */
.stat-card.vip-locked[data-vip="expired"] { --lk: #EF9103; }   /* 已过期：琥珀橙 */

/* ---------- 3. 右上角小锁 ---------- */
/* ★ pointer-events:none —— 锁纯装饰，点击一律穿透到卡片，
     由原有 _vip() 拦截并弹出原有 VIP 弹窗（交互逻辑零改动）。
   ★ 卡片带 overflow:hidden → 锁会被卡片圆角裁掉右上一点，呈「贴角标」观感（有意为之）。 */
.stat-card .lk-float {
    display: none;
    position: absolute; top: 0; right: 0; z-index: 2;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: #fff; color: var(--lk, #6B7C90);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .3), 0 0 0 1px rgba(15, 23, 42, .06);
    pointer-events: none;
}
.stat-card.vip-locked .lk-float { display: flex; width: 12px; height: 12px; font-size: 8px; }
.stat-card .lk-float svg { width: 1em; height: 1em; display: block; }

/* ---------- 4. 给锁让位：卡内内容整体下移 4px ---------- */
/* 真实 index.html 实测：手机 5 列时卡片只有 68.8×56.56，上内边距仅 8px，
   而 12px 的锁必然吃掉标签上沿（实测 5 字标签被压 5.6×4px）。
   把「标签 + 图标行」整体下移 4px 后实测零压字（4 字 / 5 字标签都验过）。
   ★ 用 transform 而不是 padding：transform 不参与布局 → 卡片高度 100% 不变。
     （padding 方案实测在 8 列断点下高度会差 -0.78px：基础内边距是
      calc(10px - (列数-4) * 0.4px) = 8.4px 而非 8px，加减同样数值并不等值。） */
.stat-card.vip-locked p,
.stat-card.vip-locked h3 { transform: translateY(4px); }

/* ---------- 5. 侧边栏导航条模式（≥1024 且开启侧栏） ---------- */
/* 卡片变成 41px 横排一行（图标方块左 / 名称中 / 数值徽章右），右上角本来就是空白 →
   锁放右上角无需让位，且不能下移（会与左侧图标方块错位）。
   置灰改为「图标方块 + 名称转灰」（横条本身是透明底色，没有卡面可灰）。 */
@media (min-width: 1024px) {
    body.sb-mode .container > .today-stats .stat-card.vip-locked p,
    body.sb-mode .container > .today-stats .stat-card.vip-locked h3 { transform: none; }
    body.sb-mode .container > .today-stats .stat-card.vip-locked { background: transparent; box-shadow: none; }
    /* 图标方块那层 13% 的模块专属色也一起转灰（见上方 ::before 铺色方案） */
    body.sb-mode .container > .today-stats .stat-card.vip-locked h3::before { background: #8A98A8; }
    /* 侧栏横条只有 41px 高，锁改到行的右端竖中位置（锁本身是 .stat-card 的直接子节点，
       不在 h3 里 → 别写成 h3 .lk-float） */
    body.sb-mode .container > .today-stats .stat-card.vip-locked .lk-float { top: 50%; right: 0; transform: translateY(-50%); }
    /* 积分奖励行：右侧是数值胶囊徽章 → 让出 14px 给锁，避免压住数字 */
    body.sb-mode .container > .today-stats .stat-card.vip-locked#pointsCard h3 { margin-right: 14px; }
}

/* ==================================================================
   ★ 2026-09-15 「数据管理」页（#dataManagerPage）
   —— 原底部 .data-buttons 的备份 / 导入 / 清空 三个入口已搬进本页
      （入口沿用原 id，事件绑定零改动）。
   —— 以下 .dm-* 类名均为新增，不与现有样式冲突。
   ================================================================== */
#dataManagerPage {
    overflow-y: auto;
    background: #f5f6f8;
    border-radius: 0;
    box-shadow: none;
    padding: 0 12px 28px;
}
.dm-wrap { max-width: 720px; margin: 0 auto; }

/* ---- ① 数据概况 hero ---- */
.dm-hero {
    background: #fff;
    border-radius: 16px;
    padding: 16px 16px 14px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
    margin: 12px 0 16px;
}
.dm-hero-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dm-avatar {
    width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #607D8B, #8CA0AE);
    color: #fff; font-size: 19px;
}
.dm-hero-who { min-width: 0; flex: 1 1 auto; }
.dm-hero-name { font-size: 16px; font-weight: 700; color: #24303F; line-height: 1.3; }
.dm-hero-sub { font-size: 12px; color: #8A98A8; margin-top: 2px; }
.dm-pill {
    margin-left: auto; flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
    background: #E8F5EC; color: #2E7D4F;
}
.dm-pill--warn { background: #FFF4E5; color: #B26A00; }

.dm-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dm-metric { background: #F7F9FB; border-radius: 12px; padding: 10px 8px; text-align: center; }
.dm-metric-num { font-size: 17px; font-weight: 700; color: #24303F; letter-spacing: -.2px; }
.dm-metric-num small { font-size: 11px; font-weight: 600; color: #8A98A8; margin-left: 1px; }
.dm-metric-label { font-size: 11px; color: #8A98A8; margin-top: 3px; }
.dm-metric.is-skeleton .dm-metric-num { color: #C7D0DA; }

.dm-hero-foot {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-top: 12px; padding-top: 12px; border-top: 1px dashed #EDF0F4;
    font-size: 12px; color: #7C8B9B;
}
.dm-hero-foot i { color: #A8B6C4; }
.dm-hero-foot .dm-foot-time { color: #4B5B6B; font-weight: 600; }
.dm-hero-foot .dm-foot-tail { margin-left: auto; color: #A3B0BD; font-size: 11px; }
.dm-hero-foot--never .dm-foot-time { color: #D9822B; }

/* ---- 小标题 ---- */
.dm-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700; color: #55636F;
    margin: 18px 2px 8px;
}
.dm-title i { color: #9AA9B8; font-size: 12px; }
.dm-title .dm-title-hint { margin-left: auto; font-size: 11px; font-weight: 500; color: #A3B0BD; }
@media (max-width: 560px) { .dm-title .dm-title-hint { display: none; } }

/* ---- ② 数据操作行卡 ---- */
.dm-actions { display: flex; flex-direction: column; gap: 10px; }
.dm-action {
    display: flex; align-items: center; gap: 12px;
    background: #fff; border-radius: 14px; padding: 13px 14px;
    box-shadow: 0 1px 6px rgba(15, 23, 42, .05);
    cursor: pointer; border: 1px solid transparent;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    -webkit-tap-highlight-color: transparent;
}
.dm-action:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(15, 23, 42, .09); }
.dm-action:active { transform: scale(.99); }
.dm-action:focus-visible { outline: 2px solid #607D8B; outline-offset: 2px; }
.dm-action-icon {
    width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.dm-action-main { min-width: 0; flex: 1 1 auto; }
.dm-action-name { font-size: 14.5px; font-weight: 700; color: #24303F; display: flex; align-items: center; gap: 6px; }
.dm-action-desc { font-size: 11.5px; color: #8A98A8; margin-top: 3px; line-height: 1.45; }
.dm-action-arrow { color: #C3CDD8; font-size: 13px; flex: 0 0 auto; }
.dm-action-tag {
    font-size: 11px; font-weight: 600;
    padding: 3px 8px; border-radius: 999px; background: #F2F5F8; color: #7C8B9B;
}
.dm-action-tag--warn { background: #FFF4E5; color: #B26A00; }

.dm-action--backup .dm-action-icon { background: #E8F5EC; color: #2E9E5B; }
.dm-action--import .dm-action-icon { background: #EFEAFB; color: #7E57C2; }
.dm-action--clear  .dm-action-icon { background: #FDECEC; color: #E05252; }
.dm-action--clear .dm-action-name { color: #C0392B; }
.dm-action--clear:hover { border-color: #F6D5D5; }

/* ---- ③ 数据明细 ---- */
.dm-breakdown {
    background: #fff; border-radius: 14px; padding: 2px 14px;
    box-shadow: 0 1px 6px rgba(15, 23, 42, .05);
}
.dm-brow { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid #F2F5F8; }
.dm-brow:last-child { border-bottom: none; }
.dm-brow-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; }
.dm-brow-name { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: #55636F; }
.dm-brow-num { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: #24303F; }
.dm-brow-num small { font-size: 10.5px; font-weight: 600; color: #9AA9B8; margin-left: 1px; }
.dm-brow.is-zero .dm-brow-name, .dm-brow.is-zero .dm-brow-num { color: #C3CDD8; }

/* ---- ④ 说明块 ---- */
.dm-danger-note {
    display: flex; gap: 9px; align-items: flex-start;
    background: #FFF7F6; border: 1px solid #FBDFDC; border-radius: 12px;
    padding: 12px 13px; margin-top: 18px;
    font-size: 11.5px; line-height: 1.65; color: #A8534A;
}
.dm-danger-note i { color: #E07B70; margin-top: 2px; }
.dm-danger-note b { color: #8E3B32; }
.dm-note {
    display: flex; gap: 9px; align-items: flex-start;
    background: #F0F4F9; border-radius: 12px; padding: 12px 13px;
    margin-top: 12px;
    font-size: 11.5px; line-height: 1.65; color: #6D7C8B;
}
.dm-note i { color: #93A5B7; margin-top: 2px; }
.dm-note b { color: #4B5B6B; }

@media (min-width: 1024px) {
    .dm-metrics { gap: 12px; }
}

/* ==================================================================
   ★ 2026-09-15 修复「清空数据」弹窗手机窄屏崩坏（与搬迁无关的现存缺陷）
   ① 已有修复：.clear-item-label 由 flex 改 grid（见文件上方定义处）
   ② 本段：清单容器 #clearDataChecklist 的内联样式是 `1fr 1fr` 两列，
      内联样式媒体查询盖不住 → 必须 !important；窄屏改单列，
      否则每列仅约 130px，名称逐字竖排、整个弹窗不可读。
   ================================================================== */
@media (max-width: 560px) {
    #clearDataChecklist { grid-template-columns: 1fr !important; gap: 6px !important; }
}

/* ==================================================================
   ★★ 2026-09-16 新增：旧版本备份「导入前预检」UI
       用于 index.html 的 #legacyImportPrecheck —— 让老客户在导入前
       看清"数据来自旧版本、要导给哪个孩子"，并提示该档案已有多少数据。
       类名统一用 lgimp- 前缀，保证不与既有样式冲突
       （项目红线：禁单字母/极短类名，曾因 .ic.f 撞 .f{min-height:62px} 出事故）。
   ================================================================== */
.lgimp-precheck { margin: 6px 0 4px; text-align: left; }
.lgimp-tip {
    display: flex; align-items: flex-start; gap: 8px;
    background: #FFF8E1; border: 1px solid #FFE082; border-radius: 10px;
    padding: 11px 13px; font-size: 14px; line-height: 1.7; color: #6B5300;
}
.lgimp-tip i { margin-top: 3px; color: #F39C12; font-size: 15px; flex: 0 0 auto; }
.lgimp-title { margin: 13px 0 8px; font-size: 14px; font-weight: 600; color: #333; }
.lgimp-list { display: flex; flex-direction: column; gap: 8px; max-height: 186px; overflow-y: auto; padding-right: 2px; }
.lgimp-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border: 2px solid #e3e7ee; border-radius: 10px;
    background: #fff; cursor: pointer; transition: border-color .15s, background .15s;
}
.lgimp-item:hover { border-color: #b9c6dd; }
.lgimp-item.is-on { border-color: #4b6cb7; background: #f2f6ff; }
.lgimp-item input { margin: 0; flex: 0 0 auto; }
.lgimp-avatar {
    width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
    background: #4b6cb7; color: #fff; font-size: 14px; font-weight: 600;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.lgimp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lgimp-meta { flex: 1; min-width: 0; }
.lgimp-name { font-size: 14px; font-weight: 600; color: #333; }
.lgimp-self {
    font-size: 11px; color: #4b6cb7; background: #eaf0fb;
    border-radius: 4px; padding: 1px 6px; margin-left: 6px; font-weight: 500;
}
.lgimp-stat { font-size: 12px; color: #8a94a6; margin-top: 3px; }
.lgimp-warn { margin-top: 10px; font-size: 13px; line-height: 1.65; color: #C0392B; }
.lgimp-merge { margin-top: 10px; font-size: 13px; line-height: 1.65; color: #58657a; background: #f5f7fb; border-radius: 8px; padding: 8px 11px; }
@media (max-width: 560px) {
    .lgimp-list { max-height: 150px; }
    .lgimp-tip { font-size: 13px; padding: 9px 11px; }
}