:root {
    /* 部门配色方案 — 每个部门独特的主色+浅底色+渐变 */
    --color-near-modern: #3B82F6;        /* 近现代室 - 皇家蓝：代表近现代工业革命的力量 */
    --color-near-modern-light: #EFF6FF;
    --color-near-modern-grad: linear-gradient(135deg, #3B82F6, #6366F1);

    --color-world: #10B981;              /* 世界室 - 翡翠绿：象征全球视野、和平 */
    --color-world-light: #ECFDF5;
    --color-world-grad: linear-gradient(135deg, #10B981, #06B6D4);

    --color-comprehensive: #F59E0B;      /* 综合室 - 琥珀金：象征综合协调、智慧 */
    --color-comprehensive-light: #FFFBEB;
    --color-comprehensive-grad: linear-gradient(135deg, #F59E0B, #EF4444);

    --color-ancient: #8B5CF6;            /* 古代室 - 紫罗兰：代表古代文明的神秘与厚重 */
    --color-ancient-light: #F5F3FF;
    --color-ancient-grad: linear-gradient(135deg, #8B5CF6, #EC4899);

    --color-committee: #84CC16;          /* 团委 - 青春绿：朝气蓬勃、生机勃发 */
    --color-committee-light: #F7FEE7;
    --color-committee-grad: linear-gradient(135deg, #84CC16, #A3E635);

    --color-graduate: #06B6D4;           /* 研究生部 - 青蓝：代表学术、探索、未来 */
    --color-graduate-light: #ECFEFF;
    --color-graduate-grad: linear-gradient(135deg, #06B6D4, #3B82F6);

    --color-student-union: #F472B6;      /* 研究生会 - 玫瑰粉：青春活力、学生风采 */
    --color-student-union-light: #FDF2F8;
    --color-student-union-grad: linear-gradient(135deg, #F472B6, #A855F7);

    --color-party: #DC2626;              /* 党办 - 党旗红：庄重、严肃 */
    --color-party-light: #FEF2F2;
    --color-party-grad: linear-gradient(135deg, #DC2626, #991B1B);

    /* 任务状态颜色 */
    --status-in-progress: #F59E0B;
    --status-completed: #10B981;

    /* 主题颜色 */
    --primary-color: #e73c3c;
    --primary-hover: #d62c2c;
    --secondary-color: #9e2b2b;
    --secondary-hover: #8a2424;
    --text-color: #1e293b;
    --light-text: #64748b;
    --border-color: #e2e8f0;
    --background-color: #f8fafc;
    --card-background: #fff;
    --success-color: #10B981;
    --warning-color: #F59E0B;
    --error-color: #EF4444;
}

/* 按钮组样式 */
.button-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.button-group .btn {
    white-space: nowrap;
    min-width: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

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

.button-group .btn.primary {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    color: white;
    border: none;
    font-weight: bold;
}

.button-group .btn.primary:hover {
    background: linear-gradient(90deg, var(--primary-hover), var(--secondary-hover));
    box-shadow: 0 4px 8px rgba(231, 60, 60, 0.3);
}

@media (max-width: 768px) {
    .button-group {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }
    
    .button-group .btn {
        width: 100%;
    }
}

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

body {
    font-family: 'Microsoft YaHei', sans-serif;
    background-color: var(--background-color);
    line-height: 1.6;
    color: var(--text-color);
}

header {
    background-color: var(--card-background);
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 3px solid var(--primary-color);
}

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

.header-top h1 {
    margin-bottom: 0;
    color: var(--primary-color);
    font-weight: bold;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
    position: relative;
    padding-left: 40px;
}

.header-top h1::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjZTczYzNjIiBkPSJNNTAgMTBMOTAgOTBIMTBMNTAgMTBaIi8+PHBhdGggZmlsbD0iI2U3M2MzYyIgZD0iTTUwIDMwQzYxLjA0NiAzMCA3MCA0MS43MTYgNzAgNTZDNzAgNzAuMjg0IDYxLjA0NiA4MiA1MCA4MkMzOC45NTQgODIgMzAgNzAuMjg0IDMwIDU2QzMwIDQxLjcxNiAzOC45NTQgMzAgNTAgMzBaIi8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTUwIDQwQzU1LjUyMyA0MCA2MCA0Ny4xNjMgNjAgNTZDNjAgNjQuODM3IDU1LjUyMyA3MiA1MCA3MkM0NC40NzcgNzIgNDAgNjQuODM3IDQwIDU2QzQwIDQ3LjE2MyA0NC40NzcgNDAgNTAgNDBaIi8+PC9zdmc+');
    background-size: contain;
    background-repeat: no-repeat;
}

.user-info {
    display: flex;
    align-items: center;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#currentUser {
    margin-right: 15px;
    font-size: 14px;
}

/* 网络状态样式 */
.network-status-container {
    display: inline-flex;
    align-items: center;
    margin-right: 15px;
    font-size: 14px;
}

.status-online {
    color: var(--success-color);
    font-weight: bold;
    margin-left: 5px;
}

.status-offline {
    color: var(--error-color);
    font-weight: bold;
    margin-left: 5px;
}

h1 {
    color: var(--text-color);
    margin-bottom: 20px;
    text-align: center;
}

.filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    background-color: rgba(231, 60, 60, 0.05);
    padding: 15px;
    border-radius: 8px;
}

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

select {
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: white;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.3s;
}

select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(231, 60, 60, 0.2);
    outline: none;
}

.btn {
    padding: 10px 15px;
    background-color: #f0f0f0;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.btn:hover {
    background-color: #e0e0e0;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn.primary {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    color: white;
    border: none;
    font-weight: bold;
}

.btn.primary:hover {
    background: linear-gradient(90deg, var(--primary-hover), var(--secondary-hover));
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(231, 60, 60, 0.3);
}

.btn.primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(231, 60, 60, 0.2);
}

main {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}

/* 加载动画 */
.loading-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    padding: 30px;
}

.loading-spinner {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 5px solid rgba(231, 60, 60, 0.3);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    animation: spin 1s ease-in-out infinite;
    margin-bottom: 15px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== 卡片基础样式 ===== */
.card {
    background: #fff;
    border-radius: 14px;
    padding: 0;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
    position: relative;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.04);
}

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

/* 卡片顶部渐变色条（通过 data-department 变色） */
.card::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #ccc, #eee);
    border-radius: 14px 14px 0 0;
}

.card .card-content {
    padding: 18px 20px 14px;
}

/* 部门顶部渐变色条 */
.card[data-department="近现代室党支部"]::before { background: var(--color-near-modern-grad); }
.card[data-department="世界室党支部"]::before { background: var(--color-world-grad); }
.card[data-department="综合室党支部"]::before { background: var(--color-comprehensive-grad); }
.card[data-department="古代室党支部"]::before { background: var(--color-ancient-grad); }
.card[data-department="团委"]::before { background: var(--color-committee-grad); }
.card[data-department="研究生部"]::before { background: var(--color-graduate-grad); }
.card[data-department="研究生会"]::before { background: var(--color-student-union-grad); }
.card[data-department="党办"]::before { background: var(--color-party-grad); }

/* 部门标签配色 */
.card[data-department="近现代室党支部"] .dept-tag { background: var(--color-near-modern-light); color: var(--color-near-modern); }
.card[data-department="世界室党支部"] .dept-tag { background: var(--color-world-light); color: var(--color-world); }
.card[data-department="综合室党支部"] .dept-tag { background: var(--color-comprehensive-light); color: var(--color-comprehensive); }
.card[data-department="古代室党支部"] .dept-tag { background: var(--color-ancient-light); color: var(--color-ancient); }
.card[data-department="团委"] .dept-tag { background: var(--color-committee-light); color: var(--color-committee); }
.card[data-department="研究生部"] .dept-tag { background: var(--color-graduate-light); color: var(--color-graduate); }
.card[data-department="研究生会"] .dept-tag { background: var(--color-student-union-light); color: var(--color-student-union); }
.card[data-department="党办"] .dept-tag { background: var(--color-party-light); color: var(--color-party); }

/* ===== 卡片内部结构 ===== */
.task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 8px;
}

.task-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dept-tag {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}

.status-badge.in-progress {
    color: #F59E0B;
    background: #FFFBEB;
}

.status-badge.completed {
    color: #10B981;
    background: #ECFDF5;
}

.department-info {
    color: var(--light-text);
    font-size: 13px;
}

.task-number {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 500;
    margin-left: 4px;
}

.task-title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-color);
    line-height: 1.4;
}

.task-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--light-text);
}

.task-meta-row .meta-icon {
    font-style: normal;
    font-size: 14px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.task-time, .task-detail, .task-budget, .task-remarks {
    font-size: 13.5px;
    color: var(--light-text);
    margin-bottom: 8px;
    line-height: 1.6;
}

.task-detail {
    background: #f8fafc;
    padding: 10px 12px;
    border-radius: 8px;
    border-left: 3px solid #e2e8f0;
    margin: 10px 0;
}

/* ===== 操作按钮 ===== */
.action-buttons {
    display: none;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid #f1f5f9;
    background: #fafbfc;
}

.card:hover .action-buttons {
    display: flex;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--light-text);
    background: #f1f5f9;
    transition: all 0.2s ease;
}

.action-btn:hover {
    background: #e2e8f0;
}

.action-btn.edit:hover {
    color: #3B82F6;
    background: #EFF6FF;
}

.action-btn.delete:hover {
    color: #EF4444;
    background: #FEF2F2;
}

.action-btn.mark-complete:hover {
    color: #10B981;
    background: #ECFDF5;
}

.action-btn.mark-incomplete:hover {
    color: #F59E0B;
    background: #FFFBEB;
}

.action-icon {
    font-style: normal;
    font-size: 15px;
}

/* ===== 已完成任务 ===== */
/* ===== 已完成任务 — 大幅降低视觉权重 ===== */
.card.completed {
    background: #f4f6f8;
    border-color: #e2e8f0;
    opacity: 0.6;
    filter: grayscale(40%);
    transform: scale(0.98);
}

.card.completed:hover {
    opacity: 0.85;
    filter: grayscale(10%);
    transform: scale(0.98) translateY(-2px);
}

.card.completed::before {
    background: #cbd5e1 !important;
    height: 3px;
}

.card.completed .card-content {
    position: relative;
}

/* 右上角完成勾标 */
.card.completed .card-content::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 12px;
    width: 28px;
    height: 28px;
    background: #10B981;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.card.completed .task-title {
    color: #94a3b8;
    text-decoration: line-through;
    text-decoration-color: #cbd5e1;
    text-decoration-thickness: 2px;
}

.card.completed .dept-tag {
    opacity: 0.5;
}

.card.completed .task-detail,
.card.completed .task-time,
.card.completed .task-budget,
.card.completed .task-remarks,
.card.completed .task-meta-row {
    color: #c0c8d4;
}

.card.completed .task-detail {
    background: #eef1f5;
    border-left-color: #dde2e8;
}

/* ===== 卡片布局模式 ===== */
.layout-switcher {
    display: flex;
    gap: 4px;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 8px;
    margin-left: auto;
}

.layout-switcher button {
    padding: 5px 10px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: #94a3b8;
    transition: all 0.2s;
}

.layout-switcher button.active {
    background: white;
    color: var(--text-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 紧凑布局 */
main.layout-compact {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

main.layout-compact .card .card-content {
    padding: 12px 14px 10px;
}

main.layout-compact .task-title {
    font-size: 14px;
    margin-bottom: 6px;
}

main.layout-compact .task-detail {
    display: none;
}

main.layout-compact .task-budget,
main.layout-compact .task-remarks {
    display: none;
}

main.layout-compact .action-buttons {
    padding: 8px 14px 10px;
}

/* 标准布局 - 默认 */
main.layout-standard {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 18px;
}

/* 宽松布局 */
main.layout-expanded {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 900px;
}

main.layout-expanded .card .card-content {
    padding: 22px 28px 18px;
}

main.layout-expanded .task-title {
    font-size: 20px;
}

main.layout-expanded .task-detail {
    font-size: 14.5px;
    padding: 14px 16px;
}

/* ===== 字号切换 ===== */
.fontsize-switcher {
    display: flex;
    gap: 4px;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 8px;
    margin-left: 6px;
}

.fontsize-switcher button {
    padding: 5px 10px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: #94a3b8;
    font-weight: 600;
    transition: all 0.2s;
}

.fontsize-switcher button.active {
    background: white;
    color: var(--text-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 小字号 */
main.fontsize-small .task-title { font-size: 13px; }
main.fontsize-small .task-detail { font-size: 12px; }
main.fontsize-small .task-meta-row { font-size: 12px; }
main.fontsize-small .dept-tag { font-size: 11px; padding: 2px 8px; }
main.fontsize-small .status-badge { font-size: 11px; }
main.fontsize-small .task-budget { font-size: 12px; }
main.fontsize-small .task-remarks { font-size: 12px; }
main.fontsize-small .action-buttons .btn { font-size: 12px; padding: 4px 8px; }

/* 标准字号 — 默认，无需额外覆盖 */

/* 大字号 */
main.fontsize-large .task-title { font-size: 20px; }
main.fontsize-large .task-detail { font-size: 15.5px; }
main.fontsize-large .task-meta-row { font-size: 15px; }
main.fontsize-large .dept-tag { font-size: 14px; padding: 4px 14px; }
main.fontsize-large .status-badge { font-size: 14px; padding: 4px 12px; }
main.fontsize-large .task-budget { font-size: 15px; }
main.fontsize-large .task-remarks { font-size: 15px; }
main.fontsize-large .action-buttons .btn { font-size: 14px; padding: 7px 14px; }

/* 模态框样式 */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    overflow: auto;
}

.modal-content {
    background-color: white;
    margin: 50px auto;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    max-width: 600px;
    width: 90%;
    position: relative;
}

.close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--text-color);
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 16px;
}

.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 16px;
    min-height: 100px;
    resize: vertical;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 30px;
}

.error {
    color: var(--error-color);
    text-align: center;
    padding: 20px;
    background-color: #ffebee;
    border-radius: 4px;
    margin: 20px 0;
}

/* 统计面板样式 */
.stats-panel {
    background-color: #f4f4f5;
    padding: 20px;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

/* 任务统计标题 */
.stats-title {
    color: #333;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
    position: relative;
    padding-left: 15px;
    border-left: 3px solid #e73c3c;
}

/* 统计卡片容器 */
.stats-cards {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    width: 100%;
}

/* 统计卡片 */
.stat-box {
    flex: 1;
    padding: 20px;
    border-radius: 4px;
    text-align: center;
    position: relative;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* 统计卡片顶部边框 */
.stat-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.stat-box.blue::before {
    background: #409EFF;
}

.stat-box.green::before {
    background: #67C23A;
}

.stat-box.orange::before {
    background: #E6A23C;
}

.stat-box.red::before {
    background: #e73c3c;
}

/* 统计数字 */
.stat-box .stat-number {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 8px;
}

.stat-box.blue .stat-number {
    color: #409EFF;
}

.stat-box.green .stat-number {
    color: #67C23A;
}

.stat-box.orange .stat-number {
    color: #E6A23C;
}

.stat-box.red .stat-number {
    color: #e73c3c;
}

/* 统计标签 */
.stat-box .stat-label {
    color: #909399;
    font-size: 14px;
}

/* 图表区域 */
.chart-section {
    background-color: white;
    border-radius: 4px;
    padding: 30px;
    margin: 0 auto 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chart-section h3 {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
    font-weight: bold;
}

.chart-container {
    height: 300px;
    width: 100%;
    max-width: 1000px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-container > * {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

.chart-container canvas {
    max-width: 100%;
    max-height: 100%;
}

/* 响应式布局 */
@media (max-width: 1200px) {
    .chart-section {
        margin: 0 20px 20px;
        width: calc(100% - 40px);
    }
}

@media (max-width: 768px) {
    .stats-panel {
        padding: 15px;
    }

    .stats-cards {
        flex-direction: column;
    }
    
    .stat-box {
        width: 100%;
    }

    .chart-section {
        padding: 20px;
        margin: 0 10px 20px;
        width: calc(100% - 20px);
    }
    
    .chart-container {
        height: 250px;
    }
}

/* 同步按钮样式 */
.sync-buttons {
    display: flex;
    gap: 8px;
    margin: 0 10px;
}

.sync-buttons .btn {
    padding: 5px 10px;
    font-size: 0.9em;
}

#syncToCloudBtn {
    background-color: #4CAF50;
}

#syncToCloudBtn:hover {
    background-color: #45a049;
}

#getFromCloudBtn {
    background-color: #2196F3;
}

#getFromCloudBtn:hover {
    background-color: #0b7dda;
}

/* 同步通知样式 */
.sync-notification {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(46, 204, 113, 0.9);
    color: white;
    padding: 15px 25px;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: none;
    font-weight: bold;
    text-align: center;
    min-width: 300px;
    max-width: 80%;
    transition: all 0.3s ease;
}

.sync-notification.error {
    background-color: rgba(231, 76, 60, 0.9);
}

.sync-notification.warning {
    background-color: rgba(241, 196, 15, 0.9);
    color: #333;
}

.sync-notification.show {
    display: block;
    animation: fadeInOut 3s ease-in-out;
}

@keyframes fadeInOut {
    0% { opacity: 0; transform: translate(-50%, -20px); }
    10% { opacity: 1; transform: translate(-50%, 0); }
    90% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -20px); }
}

/* 思政特色元素 */
.patriotic-quote {
    text-align: center;
    padding: 15px;
    margin: 20px auto;
    max-width: 1400px;
    background: linear-gradient(90deg, rgba(231, 60, 60, 0.1), rgba(231, 60, 60, 0.05));
    border-radius: 8px;
    font-style: italic;
    color: var(--primary-color);
    position: relative;
    font-weight: bold;
}

.patriotic-quote::before,
.patriotic-quote::after {
    content: '"';
    font-size: 24px;
    color: var(--primary-color);
    opacity: 0.5;
}

/* 移动端适配 */
@media (max-width: 768px) {
    html, body {
        height: auto;
        overflow-y: auto;
    }
    
    .sync-notification {
        top: 10px;
        bottom: auto;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        max-width: 400px;
    }
    
    .header-top {
        flex-direction: column;
        align-items: center;
        padding: 8px 0;
        margin-bottom: 5px;
    }
    
    .header-top h1 {
        font-size: 18px;
        padding-left: 30px;
        margin-bottom: 5px;
    }
    
    .header-top h1::before {
        width: 22px;
        height: 22px;
    }
    
    .user-info {
        margin-top: 5px;
        flex-direction: column;
        align-items: center;
        font-size: 12px;
    }
    
    .sync-buttons {
        margin: 5px 0;
    }
    
    .sync-buttons button {
        padding: 5px 8px;
        font-size: 12px;
    }
    
    #logoutBtn {
        padding: 5px 10px;
        font-size: 12px;
        margin-top: 5px;
    }
    
    .patriotic-quote {
        padding: 8px;
        margin: 5px auto;
        font-size: 13px;
    }
    
    .filters {
        flex-direction: column;
        padding: 8px;
        margin-bottom: 5px;
        gap: 8px;
    }
    
    .filter-group, .button-group {
        width: 100%;
        margin: 0;
    }
    
    .filter-group select {
        padding: 6px 8px;
        font-size: 13px;
    }
    
    .button-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }
    
    .button-group .btn {
        padding: 6px 8px;
        font-size: 12px;
        min-width: auto;
    }
    
    .card {
        width: 100%;
        margin-bottom: 10px;
        border-radius: 10px;
    }

    .card .card-content {
        padding: 12px 14px 10px;
    }

    main {
        padding: 10px;
        gap: 10px;
    }

    /* 移动端强制标准布局 */
    main.layout-compact,
    main.layout-expanded {
        grid-template-columns: 1fr;
    }

    .layout-switcher {
        display: none;
    }
    
    /* 移动端折叠按钮样式 */
    .mobile-toggle {
        margin: 5px 0;
        padding: 8px;
        background-color: #f5f5f5;
        border: none;
        border-radius: 4px;
        width: 100%;
        text-align: center;
        font-weight: bold;
        font-size: 13px;
        color: #666;
        cursor: pointer;
        transition: background-color 0.2s;
    }
    
    .mobile-toggle:hover,
    .mobile-toggle.active {
        background-color: #e0e0e0;
    }
    
    /* 任务卡片样式优化 */
    .task-header {
        margin-bottom: 8px;
    }
    
    .task-title {
        font-size: 15px;
        margin-bottom: 8px;
    }
    
    .task-time, .task-detail, .task-budget, .task-remarks {
        font-size: 13px;
        margin-bottom: 5px;
    }
    
    .action-btn {
        padding: 5px 8px;
        font-size: 12px;
    }
    
    /* 网络状态容器 */
    .network-status-container {
        margin: 5px 0;
        font-size: 12px;
    }
}

/* 确保所有页面都可以滚动 */
html, body {
    min-height: 100%;
    overflow-x: hidden;
}

/* 修复登录页面在移动端的显示问题 */
@media (max-height: 700px) {
    body.login-page {
        height: auto;
        min-height: 100%;
        padding-bottom: 30px;
    }
}

/* ===== 搜索框样式 ===== */
.search-input {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    min-width: 200px;
    transition: border-color 0.3s, box-shadow 0.3s;
    outline: none;
}

.search-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(231, 60, 60, 0.1);
}

.search-input::placeholder {
    color: #aaa;
}

/* ===== 本月任务高亮 ===== */
.card.current-month {
    box-shadow: 0 2px 16px rgba(231, 60, 60, 0.15), 0 0 0 1px rgba(231, 60, 60, 0.1);
}

.card.current-month::before {
    background: linear-gradient(90deg, #e73c3c, #f97316, #e73c3c) !important;
    height: 5px;
    animation: shimmer-bar 3s ease-in-out infinite;
}

@keyframes shimmer-bar {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.current-month-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #e73c3c, #c0392b);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    letter-spacing: 0.3px;
    animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ===== 批量操作工具栏 ===== */
.batch-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #fff3e0, #fff8e1);
    border: 1px solid #ffe0b2;
    border-radius: 8px;
    margin: 10px auto;
    max-width: 1400px;
    width: calc(100% - 40px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.batch-toolbar span {
    font-weight: bold;
    color: #e65100;
    min-width: 80px;
}

.batch-btn-complete {
    background-color: var(--success-color) !important;
    color: white !important;
}

.batch-btn-delete {
    background-color: var(--error-color) !important;
    color: white !important;
}

/* 批量模式下的卡片 */
.card .batch-checkbox {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 20px;
    height: 20px;
    accent-color: var(--primary-color);
    cursor: pointer;
    z-index: 2;
}

.card.batch-selected {
    outline: 3px solid var(--primary-color);
    outline-offset: -3px;
    background-color: rgba(231, 60, 60, 0.03);
}

/* 批量操作按钮激活态 */
.btn.active {
    background-color: var(--primary-color);
    color: white;
}

/* ===== 图表网格布局 ===== */
.charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto 20px;
    padding: 0 20px;
}

.chart-section-wide {
    max-width: 1200px;
    margin: 0 auto 20px;
}

@media (max-width: 768px) {
    .search-input {
        min-width: 100%;
        margin-bottom: 8px;
    }

    .batch-toolbar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px;
        width: calc(100% - 20px);
    }

    .charts-grid {
        grid-template-columns: 1fr;
        padding: 0 10px;
    }

    .card .batch-checkbox {
        top: 8px;
        left: 8px;
    }

    .current-month-badge {
        font-size: 10px;
        padding: 1px 6px;
    }
}

/* ===== 逾期任务样式 ===== */
.card.overdue {
    box-shadow: 0 2px 16px rgba(255, 87, 34, 0.18), 0 0 0 1px rgba(255, 87, 34, 0.1);
}

.card.overdue::before {
    background: linear-gradient(90deg, #ff5722, #EF4444) !important;
    height: 5px;
}

.overdue-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #ff5722, #d84315);
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    letter-spacing: 0.5px;
    animation: blink-overdue 1.5s ease-in-out infinite;
}

@keyframes blink-overdue {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ===== 经费预算汇总表 ===== */
.budget-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.budget-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #e73c3c;
    display: inline-block;
}

.budget-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
}

.budget-table thead th {
    background: linear-gradient(135deg, #e73c3c, #c0392b);
    color: white;
    padding: 10px 15px;
    text-align: left;
    font-weight: bold;
    font-size: 14px;
}

.budget-table thead th:first-child {
    border-radius: 6px 0 0 0;
}

.budget-table thead th:last-child {
    border-radius: 0 6px 0 0;
    text-align: right;
}

.budget-table tbody td {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #333;
}

.budget-table tbody td:last-child {
    text-align: right;
    font-weight: bold;
    color: #e73c3c;
}

.budget-table tbody tr:hover {
    background-color: #fef5f5;
}

.budget-table tbody tr:last-child td {
    border-bottom: none;
}

.budget-total {
    text-align: right;
    font-size: 18px;
    color: #e73c3c;
    padding: 12px 15px;
    background: linear-gradient(135deg, #fef5f5, #fff0f0);
    border-radius: 8px;
    margin-top: 5px;
}

/* ===== 第四个统计卡片（红色） ===== */
.stat-box.red {
    border-top: 3px solid #ff5722;
}

.stat-box.red .stat-number {
    color: #ff5722;
}

/* ===== 经费预算金额标签 ===== */
.budget-amount-tag {
    display: inline-block;
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
}

body.dark-mode .budget-amount-tag {
    background: linear-gradient(135deg, #e65100, #bf360c);
}

/* ===== 深色模式切换按钮 ===== */
.dark-mode-toggle {
    background: none;
    border: 2px solid #ddd;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
}

.dark-mode-toggle:hover {
    border-color: #e73c3c;
    transform: rotate(20deg);
}

/* ===== 深色模式 ===== */
body.dark-mode {
    background-color: #1a1a2e;
    color: #e0e0e0;
}

body.dark-mode header {
    background: linear-gradient(135deg, #16213e, #1a1a2e);
    border-bottom-color: #2a2a4a;
}

body.dark-mode .header-top h1 {
    color: #ff6b6b;
}

body.dark-mode .patriotic-quote {
    background: rgba(231, 60, 60, 0.1);
    border-color: #e73c3c33;
    color: #ddd;
}

body.dark-mode .filters {
    background-color: #16213e;
    border-color: #2a2a4a;
}

body.dark-mode .filter-group select,
body.dark-mode .search-input {
    background-color: #0f3460;
    color: #e0e0e0;
    border-color: #2a2a4a;
}

body.dark-mode .btn {
    background-color: #2a2a4a;
    color: #e0e0e0;
    border-color: #3a3a5a;
}

body.dark-mode .btn.primary {
    background-color: #e73c3c;
    color: white;
}

body.dark-mode .card {
    background-color: #16213e;
    border-color: #2a2a4a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

body.dark-mode .card.completed {
    background-color: #111827;
    border-color: #1f2937;
    opacity: 0.5;
    filter: grayscale(50%);
}

body.dark-mode .card.completed:hover {
    opacity: 0.8;
    filter: grayscale(15%);
}

body.dark-mode .card.completed::before {
    background: #374151 !important;
}

body.dark-mode .card.completed .card-content::after {
    background: #059669;
}

body.dark-mode .card.completed .task-detail {
    background: #0d1520;
    border-left-color: #1f2937;
}

body.dark-mode .task-title {
    color: #f0f0f0;
}

body.dark-mode .task-detail {
    background: #0f3460;
    border-left-color: #2a2a4a;
    color: #aaa;
}

body.dark-mode .task-meta-row {
    color: #999;
}

body.dark-mode .task-time,
body.dark-mode .task-budget,
body.dark-mode .task-remarks {
    color: #bbb;
}

body.dark-mode .dept-tag {
    background: rgba(255,255,255,0.08) !important;
}

body.dark-mode .action-buttons {
    background: #0f1b33;
    border-top-color: #1e2d4d;
}

body.dark-mode .action-btn {
    background: #1e2d4d;
    color: #aaa;
}

body.dark-mode .layout-switcher {
    background: #0f3460;
}

body.dark-mode .layout-switcher button {
    color: #777;
}

body.dark-mode .layout-switcher button.active {
    background: #16213e;
    color: #e0e0e0;
}

body.dark-mode .fontsize-switcher {
    background: #0f3460;
}

body.dark-mode .fontsize-switcher button {
    color: #777;
}

body.dark-mode .fontsize-switcher button.active {
    background: #16213e;
    color: #e0e0e0;
}

body.dark-mode .stats-panel {
    background-color: #1a1a2e;
}

body.dark-mode .stat-box {
    background-color: #16213e;
    border-color: #2a2a4a;
}

body.dark-mode .stat-label {
    color: #999;
}

body.dark-mode .chart-section {
    background-color: #16213e;
    border-color: #2a2a4a;
}

body.dark-mode .budget-section {
    background-color: #16213e;
}

body.dark-mode .budget-table thead th {
    background: linear-gradient(135deg, #e73c3c, #c0392b);
}

body.dark-mode .budget-table tbody td {
    color: #ccc;
    border-bottom-color: #2a2a4a;
}

body.dark-mode .budget-table tbody tr:hover {
    background-color: #1e2e4e;
}

body.dark-mode .budget-total {
    background: linear-gradient(135deg, #2a1a1a, #1a1a2e);
}

body.dark-mode .modal-content {
    background-color: #16213e;
    color: #e0e0e0;
    border-color: #2a2a4a;
}

body.dark-mode .modal-content input,
body.dark-mode .modal-content select,
body.dark-mode .modal-content textarea {
    background-color: #0f3460;
    color: #e0e0e0;
    border-color: #2a2a4a;
}

body.dark-mode .batch-toolbar {
    background: linear-gradient(135deg, #2a2a1a, #1a2a2e);
    border-color: #4a4a2a;
}

body.dark-mode .sync-notification {
    background-color: #16213e;
    color: #e0e0e0;
}

body.dark-mode .dark-mode-toggle {
    border-color: #4a4a6a;
    color: #ffd93d;
}

body.dark-mode .mobile-toggle {
    background-color: #2a2a4a;
    color: #ccc;
}

body.dark-mode .action-btn {
    background-color: #2a2a4a;
    color: #ccc;
    border-color: #3a3a5a;
}

body.dark-mode .department-info {
    color: #bbb;
}

body.dark-mode .status-badge.in-progress {
    background-color: rgba(64, 159, 255, 0.2);
    color: #60b0ff;
}

/* ===== 时间线视图 ===== */
.timeline-container {
    max-width: 1400px;
    margin: 20px auto;
    padding: 0 20px;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.timeline-header h2 {
    font-size: 22px;
    color: #333;
    margin: 0;
}

.timeline {
    position: relative;
    padding-left: 40px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #e73c3c, #3498db, #2ecc71);
    border-radius: 2px;
}

.timeline-month {
    position: relative;
    margin-bottom: 25px;
    animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.timeline-month-marker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.timeline-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    position: absolute;
    left: -30px;
    top: 4px;
    z-index: 1;
    border: 3px solid white;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
}

.current-dot {
    background: #e73c3c;
    width: 18px;
    height: 18px;
    left: -32px;
    top: 2px;
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 2px rgba(231, 60, 60, 0.2), 0 0 0 6px rgba(231, 60, 60, 0.1); }
    50% { box-shadow: 0 0 0 4px rgba(231, 60, 60, 0.3), 0 0 0 10px rgba(231, 60, 60, 0.05); }
}

.past-dot {
    background: #95a5a6;
}

.future-dot {
    background: #3498db;
}

.year-round-dot {
    background: #f39c12;
}

.timeline-month-label {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.timeline-month.current .timeline-month-label {
    color: #e73c3c;
    font-size: 20px;
}

.timeline-month.past .timeline-month-label {
    color: #95a5a6;
}

.timeline-count {
    font-size: 13px;
    color: #999;
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 10px;
}

.timeline-tasks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 5px;
}

.timeline-task {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: white;
    border-radius: 8px;
    border-left: 3px solid #3498db;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    font-size: 13px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.timeline-task:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.timeline-task.complete {
    border-left-color: #2ecc71;
    background: #f0fff0;
}

.timeline-task.overdue {
    border-left-color: #ff5722;
    background: #fff5f0;
}

.timeline-task.pending {
    border-left-color: #3498db;
}

.timeline-task-dept {
    font-weight: bold;
    color: #555;
    font-size: 12px;
    white-space: nowrap;
}

.timeline-task-name {
    color: #333;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.timeline-task-status {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 8px;
    white-space: nowrap;
}

.timeline-task-status.complete {
    background: #2ecc71;
    color: white;
}

.timeline-task-status.overdue {
    background: #ff5722;
    color: white;
}

.timeline-task-status.pending {
    background: #3498db;
    color: white;
}

.timeline-empty {
    color: #ccc;
    font-style: italic;
    font-size: 13px;
    padding: 5px 0;
}

/* 深色模式下时间线 */
body.dark-mode .timeline-header {
    background: #16213e;
}

body.dark-mode .timeline-header h2 {
    color: #e0e0e0;
}

body.dark-mode .timeline-month-label {
    color: #e0e0e0;
}

body.dark-mode .timeline-month.past .timeline-month-label {
    color: #777;
}

body.dark-mode .timeline-count {
    background: #2a2a4a;
    color: #aaa;
}

body.dark-mode .timeline-task {
    background: #16213e;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

body.dark-mode .timeline-task-dept {
    color: #aaa;
}

body.dark-mode .timeline-task-name {
    color: #ddd;
}

body.dark-mode .timeline-task.complete {
    background: #1a2a1a;
}

body.dark-mode .timeline-task.overdue {
    background: #2a1a1a;
}

/* ===== 完成庆祝动画画布 ===== */
.confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99999;
    display: none;
}

/* ===== 部门进度环 ===== */
.progress-rings-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    padding: 20px 10px;
}

.progress-ring-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.progress-ring-svg {
    width: 110px;
    height: 110px;
    transform: rotate(-90deg);
}

.progress-ring-bg {
    fill: none;
    stroke: #eee;
    stroke-width: 6;
}

.progress-ring-fill {
    fill: none;
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease-out;
}

.progress-ring-percent {
    fill: #333;
    font-size: 16px;
    font-weight: bold;
    text-anchor: middle;
    dominant-baseline: middle;
    transform: rotate(90deg);
    transform-origin: 50% 46%;
}

.progress-ring-fraction {
    fill: #999;
    font-size: 10px;
    text-anchor: middle;
    dominant-baseline: middle;
    transform: rotate(90deg);
    transform-origin: 50% 58%;
}

.progress-ring-label {
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    max-width: 100px;
    line-height: 1.2;
}

body.dark-mode .progress-ring-bg {
    stroke: #2a2a4a;
}

body.dark-mode .progress-ring-percent {
    fill: #e0e0e0;
}

body.dark-mode .progress-ring-fraction {
    fill: #888;
}

/* ===== 打印报告样式 ===== */
/* ===== 打印选项区 ===== */
.print-options {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 15px 18px;
    margin-bottom: 15px;
}

.print-options-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.print-options-row:last-of-type {
    margin-bottom: 0;
}

.print-options-label {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-color);
    min-width: 72px;
    flex-shrink: 0;
}

.print-options-row label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--light-text);
    cursor: pointer;
    white-space: nowrap;
}

.print-options-row select {
    padding: 4px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    background: white;
}

body.dark-mode .print-options {
    background: #0f3460;
    border-color: #2a2a4a;
}

body.dark-mode .print-options-row label {
    color: #ccc;
}

body.dark-mode .print-options-row select {
    background: #16213e;
    color: #e0e0e0;
    border-color: #2a2a4a;
}

.print-modal-content {
    max-width: 960px;
    max-height: 88vh;
    overflow-y: auto;
}

.print-preview {
    padding: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 10px;
    max-height: 55vh;
    overflow-y: auto;
}

.print-report {
    font-family: 'SimSun', serif;
}

.print-title {
    text-align: center;
    color: #e73c3c;
    font-size: 24px;
    margin-bottom: 5px;
}

.print-date {
    text-align: center;
    color: #666;
    margin-bottom: 20px;
}

.print-summary {
    margin-bottom: 20px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 8px;
}

.print-summary h3,
.print-dept-table h3,
.print-task-table h3 {
    color: #e73c3c;
    margin-bottom: 10px;
    font-size: 16px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.print-dept-table table,
.print-task-table table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.print-dept-table th,
.print-task-table th {
    background: #e73c3c;
    color: white;
    padding: 8px 12px;
    text-align: left;
    font-size: 13px;
}

.print-dept-table td,
.print-task-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    font-size: 13px;
}

.print-dept-table tr:hover,
.print-task-table tr:hover {
    background-color: #fef5f5;
}

/* 打印时的样式 */
@media print {
    body * {
        visibility: hidden;
    }

    .print-report,
    .print-report * {
        visibility: visible !important;
    }

    .print-report {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 20px;
    }

    .print-title {
        color: #333 !important;
    }

    .modal, .form-actions, header, .batch-toolbar, .confetti-canvas {
        display: none !important;
    }
}

/* ===== 快捷键帮助模态框 ===== */
.shortcuts-modal-content {
    max-width: 500px;
}

.shortcuts-modal-content h2 {
    color: #e73c3c;
    margin-bottom: 15px;
    font-size: 20px;
}

.shortcuts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shortcut-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

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

kbd {
    display: inline-block;
    padding: 4px 10px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    color: #333;
    background: linear-gradient(180deg, #f8f8f8, #e8e8e8);
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 0 #bbb;
    min-width: 30px;
    text-align: center;
}

body.dark-mode kbd {
    background: linear-gradient(180deg, #3a3a5a, #2a2a4a);
    border-color: #4a4a6a;
    color: #e0e0e0;
    box-shadow: 0 2px 0 #1a1a2e;
}

body.dark-mode .shortcut-item {
    border-bottom-color: #2a2a4a;
}

body.dark-mode .shortcuts-modal-content h2 {
    color: #ff6b6b;
}

/* ===== 移动端响应式调整 ===== */
@media (max-width: 768px) {
    .timeline-tasks {
        flex-direction: column;
    }

    .timeline-task-name {
        max-width: 150px;
    }

    .progress-rings-container {
        gap: 15px;
    }

    .progress-ring-svg {
        width: 85px;
        height: 85px;
    }

    .progress-ring-label {
        font-size: 11px;
    }

    .print-modal-content {
        max-width: 100%;
    }

    .timeline-header {
        flex-direction: column;
        gap: 10px;
    }

    .dark-mode-toggle {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
}