:root {
    --bg-color: #fff;
    --text-color: #000;
    --nav-bg: linear-gradient(to bottom, #f5f5f5, #f1f1f1);
    --nav-border: #e5e5e5;
    --nav-text: #222;
    --nav-hover: #e0e0e0;
    --search-bg: #fff;
    --search-border: #dfe1e5;
    --search-shadow: 0 1px 6px rgb(32 33 36 / 28%);
    --modal-bg: #fff;
    --modal-border: #e0e0e0;
    --modal-header-bg: #f5f5f5;
    --modal-text: #333;
    --modal-input-bg: #fff;
    --modal-input-border: #ddd;
    --modal-input-focus: #4d90fe;
    --modal-btn-bg: #4d90fe;
    --modal-btn-hover: #357ae8;
    --context-menu-bg: white;
    --context-menu-border: #ddd;
    --context-menu-hover: #f5f5f5;
    --config-success-bg: #e8f5e9;
    --config-success-border: #4caf50;
    --config-warning-bg: #fff3e0;
    --config-warning-border: #ff9800;
    --sync-info-bg: #f9f9f9;
}

body.dark-theme {
    --bg-color: #1e1e1e;
    --text-color: #f0f0f0;
    --nav-bg: linear-gradient(to bottom, #333333, #2a2a2a);
    --nav-border: #444;
    --nav-text: #f0f0f0;
    --nav-hover: #555;
    --search-bg: #333;
    --search-border: #555;
    --search-shadow: 0 1px 6px rgb(0 0 0 / 50%);
    --modal-bg: #2a2a2a;
    --modal-border: #444;
    --modal-header-bg: #333;
    --modal-text: #f0f0f0;
    --modal-input-bg: #333;
    --modal-input-border: #555;
    --context-menu-bg: #333;
    --context-menu-border: #555;
    --context-menu-hover: #555;
    --config-success-bg: #2e7d32;
    --config-warning-bg: #f57c00;
    --sync-info-bg: #333;
}

/* ===== 基础与通用样式 ===== */
* {
    box-sizing: border-box;
}

html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    line-height: 1.5;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 14px;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: background-color 0.3s, color 0.3s;
}

a {
    color: var(--text-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ===== 导航栏样式 ===== */
.nav-header {
    font-size: 12px;
    height: 28px;
    line-height: 28px;
    flex-shrink: 0;
}

.nav-header__container {
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    padding: 0 10px;
    height: 100%;
    gap: 10px;
}

.nav-header__weather {
    justify-self: start;
    white-space: nowrap;
    color: var(--nav-text);
}

.nav-header__date {
    justify-self: center;
    white-space: nowrap;
    color: var(--nav-text);
}

.nav-header__actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-header__btn {
    color: var(--nav-text);
    cursor: pointer;
    padding: 0 10px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.nav-header__btn:hover {
    background-color: var(--nav-hover);
    text-decoration: none;
}

/* ===== 今日效率评分显示 - 极简风格 ===== */
.nav-header__efficiency {
    justify-self: center;
    margin-left: 10px;
    margin-right: 10px;
    min-width: 0;
    /* 允许收缩 */
}

.efficiency-score-badge {
    cursor: pointer;
    transition: opacity 0.2s;
    display: inline-block;
    min-width: 0;
    /* 允许收缩 */
}

.efficiency-score-badge:hover {
    opacity: 0.7;
}

.efficiency-score-label {
    display: none;
    /* 隐藏标签 */
}

.efficiency-score-value {
    font-size: 14px;
    font-weight: bold;
    color: var(--nav-text);
    white-space: nowrap;
    /* 防止换行 */
    min-width: 0;
    /* 允许收缩 */
}

/* 根据分数动态改变颜色 - 5档热力图颜色（低分绿→高分红） */
.efficiency-score-badge.score-outstanding .efficiency-score-value {
    color: #f44336;
    /* 红色 - 卓越 (≥90分) */
}

.efficiency-score-badge.score-excellent .efficiency-score-value {
    color: #ff9800;
    /* 橙色 - 优秀 (80-89分) */
}

.efficiency-score-badge.score-good .efficiency-score-value {
    color: #ffeb3b;
    /* 黄色 - 良好 (70-79分) */
}

.efficiency-score-badge.score-fair .efficiency-score-value {
    color: #8bc34a;
    /* 浅绿色 - 一般 (60-69分) */
}

.efficiency-score-badge.score-poor .efficiency-score-value {
    color: #607d8b;
    /* 深灰蓝色 - 需改进 (<60分) */
}

/* 移动端隐藏 */
@media (max-width: 768px) {
    .nav-header__efficiency {
        display: none !important;
    }
}

/* ===== 搜索栏样式 ===== */
.search-box {
    margin: 40px auto;
    padding: 0 10px;
    display: flex;
    justify-content: center;
}

.search-form {
    display: flex;
    width: 100%;
    max-width: 584px;
    background: var(--search-bg);
    border: 1px solid transparent;
    border-radius: 24px;
    height: 44px;
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.08);
}

.search-form:hover {
    box-shadow: 0 2px 12px rgba(32, 33, 36, 0.15);
    border-color: rgba(32, 33, 36, 0.1);
}

.search-engine-selector {
    display: flex;
    align-items: center;
    padding-left: 20px;
    cursor: pointer;
}

.search-engine-icon {
    width: 20px;
    height: 20px;
}

.search-input {
    flex: 1;
    border: none !important;
    outline: none !important;
    background: transparent;
    font-size: 16px;
    padding: 0 16px;
    color: var(--text-color);
    box-shadow: none !important;
}

.search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    border-radius: 0 24px 24px 0;
}

.search-btn .icon {
    fill: #4285f4;
}

/* ===== 主要内容区 ===== */
.main-content {
    max-width: 1200px;
    width: 100%;
    margin: 10px auto;
    padding: 0 10px;
    display: flex;
    gap: 5px;
}

.nav-content {
    flex: 1;
    order: 2;
    /* 主内容在右边 */
}

.nav-sidebar {
    width: 300px;
    flex-shrink: 0;
    order: 1;
    /* 侧边栏在左边 */
}

/* 当sidebar隐藏时，限制主内容区宽度 */
.main-content:has(.nav-sidebar[style*="display: none"]) .nav-content {
    max-width: 850px;
    margin: 0 auto;
}

/* ===== 【优化】分类模块样式 ===== */
.category-module {
    margin-bottom: 10px;
}

/* 定义各颜色主题的变量 */
.category-module__box--theme-yellow {
    --theme-border: #f0d680;
    --theme-header-bg: #fffad6;
    --theme-active-bg: #fb3;
    --theme-title-color: #fff;
}

.category-module__box--theme-blue {
    --theme-border: #94d6eb;
    --theme-header-bg: #e0f4ff;
    --theme-active-bg: #33b5e5;
    --theme-title-color: #fff;
}

.category-module__box--theme-red {
    --theme-border: #f0c1c1;
    --theme-header-bg: #fce4e4;
    --theme-active-bg: #f44;
    --theme-title-color: #fff;
}

.category-module__box--theme-green {
    --theme-border: #b2db65;
    --theme-header-bg: #eefbd6;
    --theme-active-bg: #9c0;
    --theme-title-color: #fff;
}

.category-module__box--theme-purple {
    --theme-border: #f4caca;
    --theme-header-bg: #f2e6ff;
    --theme-active-bg: #a6c;
    --theme-title-color: #fff;
}

.category-module__box--theme-cyan {
    --theme-border: #a3e4db;
    --theme-header-bg: #e6f9f7;
    --theme-active-bg: #0aa;
    --theme-title-color: #fff;
}

.category-module__box--theme-gray {
    --theme-border: #cccccc;
    --theme-header-bg: #f5f5f5;
    --theme-active-bg: #999;
    --theme-title-color: #fff;
}

/* 在暗黑模式下，仅覆盖变量的值 */
body.dark-theme .category-module__box--theme-yellow {
    --theme-border: var(--modal-border);
    --theme-header-bg: #2a2a1a;
    --theme-active-bg: var(--modal-header-bg);
    --theme-title-color: #7a7676;
}

body.dark-theme .category-module__box--theme-blue {
    --theme-border: var(--modal-border);
    --theme-header-bg: #1a1f2a;
    --theme-active-bg: var(--modal-header-bg);
    --theme-title-color: #7a7676;
}

body.dark-theme .category-module__box--theme-red {
    --theme-border: var(--modal-border);
    --theme-header-bg: #2a1a1a;
    --theme-active-bg: var(--modal-header-bg);
    --theme-title-color: #7a7676;
}

body.dark-theme .category-module__box--theme-green {
    --theme-border: var(--modal-border);
    --theme-header-bg: #1a2a1a;
    --theme-active-bg: var(--modal-header-bg);
    --theme-title-color: #7a7676;
}

body.dark-theme .category-module__box--theme-purple {
    --theme-border: var(--modal-border);
    --theme-header-bg: #2a1a2a;
    --theme-active-bg: var(--modal-header-bg);
    --theme-title-color: #7a7676;
}

body.dark-theme .category-module__box--theme-cyan {
    --theme-border: var(--modal-border);
    --theme-header-bg: #1a2a2a;
    --theme-active-bg: var(--modal-header-bg);
    --theme-title-color: #7a7676;
}

body.dark-theme .category-module__box--theme-gray {
    --theme-border: var(--modal-border);
    --theme-header-bg: #2a2a2a;
    --theme-active-bg: var(--modal-header-bg);
    --theme-title-color: #7a7676;
}

.category-module__box {
    border: solid 1px var(--theme-border);
    border-radius: 4px;
    overflow: hidden;
}

.category-module__header {
    background: var(--theme-header-bg);
    border-bottom: 1px solid var(--theme-border);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    height: 22px;
    line-height: 22px;
}

.category-module__title-wrapper {
    padding: 0 10px;
    width: 80px;
    text-align: center;
    pointer-events: none;
    /* 禁用所有鼠标事件 */
}

.category-module__title-wrapper--active {
    background: var(--theme-active-bg);
}

.category-module__title {
    color: var(--theme-title-color);
    font-weight: bold;
    font-size: 12px;
    font-family: '宋体', serif;
    pointer-events: none;
    /* 禁用所有鼠标事件 */
}

.category-module__title:hover {
    text-decoration: none;
}

/* 【新增】 使统计模块(侧边栏)的标题可点击 */
.nav-sidebar .category-module__title-wrapper {
    cursor: pointer;
    pointer-events: auto;
    /* 重新启用鼠标事件 */
}

.nav-sidebar .category-module__title {
    cursor: pointer;
    pointer-events: auto;
    /* 重新启用鼠标事件 */
}

.nav-sidebar .category-module__title:hover {
    text-decoration: underline;
    color: var(--theme-title-color) !important;
}


.category-module__content {
    padding: 6px 0;
}

.category-module__links {
    font-size: 14px;
    min-height: 26px;
    line-height: 26px;
}

.category-module__links--grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    font-size: 12px;
    line-height: 1.4;
}

.category-module__link {
    display: inline-block;
    width: auto;
    padding: 4px 6px;
    margin: 2px;
    font-size: 11px;
    line-height: 1.2;
    min-height: 24px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-module__link--small {
    width: auto;
    padding: 4px 1px;
    margin: 0;
    font-size: 11px;
    line-height: 1.2;
    min-height: 20px;
    display: flex;
    justify-content: center;
}

/* 点击排名样式 */
.category-module__link--ranked a {
    color: var(--rank-color) !important;
    font-weight: bold;
}

.category-module__content-empty {
    padding: 10px;
    color: #999;
    font-style: italic;
    font-size: 12px;
}

.category-module__divider {
    width: 100%;
    border: none;
    margin: 10px 0;
    clear: both;
    border-top: 1px solid #ddd;
}

.category-module__box--theme-yellow .category-module__divider {
    border-top-color: #f0d680;
}

.category-module__box--theme-blue .category-module__divider {
    border-top-color: #94d6eb;
}

.category-module__box--theme-red .category-module__divider {
    border-top-color: #f0c1c1;
}

.category-module__box--theme-green .category-module__divider {
    border-top-color: #b2db65;
}

.category-module__box--theme-purple .category-module__divider {
    border-top-color: #f4caca;
}

.category-module__box--theme-cyan .category-module__divider {
    border-top-color: #a3e4db;
}

.category-module__box--theme-gray .category-module__divider {
    border-top-color: #cccccc;
}

body.dark-theme .category-module__divider {
    border-top-color: #555;
}

/* ===== 模态框 (Settings Panel) ===== */
.settings-panel {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.settings-panel__content {
    background: var(--modal-bg);
    border: 1px solid var(--modal-border);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.settings-panel__header {
    padding: 10px 15px;
    border-bottom: 1px solid var(--modal-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--modal-header-bg);
    flex-shrink: 0;
}

.settings-panel__header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--modal-text);
}

.settings-close,
.settings-panel__close {
    font-size: 24px;
    font-weight: bold;
    color: var(--modal-text);
    opacity: 0.7;
    cursor: pointer;
    line-height: 1;
    background: none;
    border: none;
    padding: 0 5px;
}

.settings-close:hover {
    opacity: 1;
}

.settings-panel__body {
    padding: 15px;
    overflow-y: auto;
    flex: 1;
}

.settings-item {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--modal-border);
}

.settings-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.settings-item>label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--modal-text);
}

/* 统一输入框样式 */
.settings-input,
input[type="text"],
input[type="password"],
select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--modal-input-border);
    border-radius: 4px;
    font-size: 14px;
    background-color: var(--modal-input-bg);
    color: var(--text-color);
}

select {
    width: auto;
    min-width: 150px;
}

input:focus,
select:focus {
    outline: none;
    border-color: var(--modal-input-focus);
}

.settings-btn {
    padding: 6px 12px;
    background: var(--modal-btn-bg);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s;
    white-space: nowrap;
    min-width: auto;
}

.settings-btn:hover {
    background: var(--modal-btn-hover);
}

.settings-btn:disabled {
    background: #999;
    cursor: not-allowed;
}

/* ===== 右键菜单样式 ===== */
.context-menu {
    display: none;
    position: absolute;
    background: var(--context-menu-bg);
    border: 1px solid var(--context-menu-border);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10001;
    min-width: 120px;
    user-select: none;
}

/* 【新增】 移动子菜单样式 */
.move-submenu {
    max-height: 300px;
    overflow-y: auto;
}

.context-menu__item {
    padding: 8px 16px;
    cursor: pointer;
    color: var(--text-color);
}

.context-menu__item:hover {
    background-color: var(--context-menu-hover);
}

.context-menu__item:not(:last-child) {
    border-bottom: 1px solid var(--modal-border);
}

/* 【新增】 移动子菜单中禁用的项目样式 */
.move-option-disabled {
    padding: 8px 16px;
    color: #999;
    cursor: default;
}

body:not(.dark-theme) .move-option-disabled {
    background-color: #f5f5f5;
}

body.dark-theme .move-option-disabled {
    background-color: #444;
}


/* ===== 分类管理列表 ===== */
.category-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
}

.category-list-item input {
    flex: 1;
}

.delete-category-btn {
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    line-height: 10px;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
}

.delete-category-btn:hover {
    background: #c0392b;
}

/* 分类排序按钮 */
.category-sort-btns {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.category-sort-btn {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 4px;
    background: rgba(128, 128, 128, 0.08);
    color: var(--modal-text);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-sort-btn:hover:not(:disabled) {
    background: rgba(33, 150, 243, 0.15);
    border-color: rgba(33, 150, 243, 0.4);
    color: #2196f3;
}

.category-sort-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.category-sort-btn--up:hover:not(:disabled) {
    background: rgba(76, 175, 80, 0.15);
    border-color: rgba(76, 175, 80, 0.4);
    color: #4caf50;
}

.category-sort-btn--down:hover:not(:disabled) {
    background: rgba(255, 152, 0, 0.15);
    border-color: rgba(255, 152, 0, 0.4);
    color: #ff9800;
}

/* ===== 分析标签页样式 - 与主 tab 同一行 ===== */
.analysis-tabs {
    display: flex;
    gap: 4px;
    margin-left: auto;
    padding: 3px;
    background: rgba(128, 128, 128, 0.1);
    border-radius: 6px;
    margin-right: 12px;
}

.analysis-tab {
    padding: 6px 16px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 13px;
    color: #888;
    transition: all 0.2s;
    border-radius: 6px;
    flex: 1;
    text-align: center;
}

.analysis-tab:hover {
    color: var(--modal-text);
    background: rgba(128, 128, 128, 0.1);
}

.analysis-tab.active {
    color: var(--modal-text);
    background: rgba(128, 128, 128, 0.18);
    font-weight: 600;
    border: 1px solid rgba(128, 128, 128, 0.25);
}

.analysis-content {
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ===== 分析卡片公共样式 ===== */
.analysis-card {
    padding: 10px 12px;
    background: rgba(128, 128, 128, 0.05);
    border-radius: 6px;
    border: 1px solid rgba(128, 128, 128, 0.2);
    margin-bottom: 10px;
}

.analysis-card:last-child {
    margin-bottom: 0;
}

.analysis-card__title {
    margin: 0 0 8px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--modal-text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.analysis-card__title .emoji {
    font-size: 14px;
}

.analysis-card__desc {
    font-size: 11px;
    color: #666;
    margin-bottom: 8px;
}

/* 紧凑模式 */
.analysis-card--compact {
    padding: 8px 10px;
}

.analysis-card--compact .analysis-card__title {
    font-size: 11px;
    margin-bottom: 6px;
}

/* ===== 【新增】 "查看全部"统计模态框的列表样式 ===== */
.stats-view-all__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(90vh - 150px);
    overflow-y: auto;
    padding-right: 10px;
}

.stats-view-all__item {
    display: grid;
    grid-template-columns: 40px 1fr 140px;
    align-items: center;
    padding: 5px;
    border-bottom: 1px solid var(--modal-input-border);
    gap: 10px;
}

.stats-view-all__item:last-child {
    border-bottom: none;
}

.stats-view-all__rank {
    font-weight: bold;
    color: var(--modal-text);
    font-size: 12px;
}

.stats-view-all__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--modal-text);
}

.stats-view-all__count {
    text-align: right;
    color: #888;
    font-size: 12px;
}

body.dark-theme .stats-view-all__count {
    color: #aaa;
}

/* ===== 统计Modal Header中的Tab样式 - 与子 tab 统一风格 ===== */
.stats-header-tabs {
    display: flex;
    gap: 4px;
    flex: 1;
    margin-right: 12px;
}

.stats-tab {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: #888;
    transition: all 0.2s;
    white-space: nowrap;
}

.stats-tab:hover {
    color: var(--modal-text);
    background: rgba(128, 128, 128, 0.1);
}

.stats-tab--active {
    color: var(--modal-text);
    background: rgba(128, 128, 128, 0.18);
    font-weight: 600;
    border: 1px solid rgba(128, 128, 128, 0.25);
}


/* ===== 状态类 ===== */
.is-hidden {
    display: none !important;
}

.is-visible {
    display: block !important;
}

/* ===== 新版设置面板样式 ===== */

/* 设置区块 */
.settings-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--modal-border);
}

.settings-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.settings-section--sub {
    margin-top: -8px;
    padding: 12px;
    background: rgba(128, 128, 128, 0.05);
    border-radius: 6px;
    border-bottom: none;
}

.settings-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.settings-section__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--modal-text);
}

/* 同步状态徽章 */
.sync-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}

.sync-badge--online {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
}

.sync-badge--offline {
    background: rgba(158, 158, 158, 0.15);
    color: #9e9e9e;
}

/* 设置行 */
.settings-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.settings-row--vertical {
    flex-direction: column;
    align-items: stretch;
}

.settings-row__actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

/* 同步端点显示 */
.sync-endpoint {
    font-size: 12px;
    color: #888;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 同步信息（内联版） */
.sync-info-inline {
    font-size: 11px;
    color: #888;
    margin-top: 6px;
    display: flex;
    gap: 8px;
}

/* 设置选项（开关行） */
.settings-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 13px;
    color: var(--modal-text);
}

.settings-option:first-of-type {
    padding-top: 0;
}

/* 主题切换器 */
.theme-switcher {
    display: flex;
    background: rgba(128, 128, 128, 0.1);
    border-radius: 6px;
    padding: 2px;
}

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

.theme-option input {
    display: none;
}

.theme-option span {
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 4px;
    color: #888;
    transition: all 0.2s;
}

.theme-option input:checked+span {
    background: var(--modal-btn-bg);
    color: #fff;
}

/* Toggle 开关 */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

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

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #ccc;
    transition: 0.2s;
    border-radius: 20px;
}

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

.toggle-switch input:checked+.toggle-slider {
    background-color: #4caf50;
}

.toggle-switch input:checked+.toggle-slider:before {
    transform: translateX(16px);
}

/* ===== 彩色按钮系统 ===== */
.color-btn {
    padding: 6px 14px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
    white-space: nowrap;
}

/* 蓝色按钮 */
.color-btn--blue {
    background: rgba(33, 150, 243, 0.1);
    border-color: rgba(33, 150, 243, 0.25);
    color: #2196f3;
}

.color-btn--blue:hover {
    background: rgba(33, 150, 243, 0.2);
    border-color: rgba(33, 150, 243, 0.4);
}

/* 绿色按钮 */
.color-btn--green {
    background: rgba(76, 175, 80, 0.1);
    border-color: rgba(76, 175, 80, 0.25);
    color: #4caf50;
}

.color-btn--green:hover {
    background: rgba(76, 175, 80, 0.2);
    border-color: rgba(76, 175, 80, 0.4);
}

/* 紫色按钮 */
.color-btn--purple {
    background: rgba(156, 39, 176, 0.1);
    border-color: rgba(156, 39, 176, 0.25);
    color: #9c27b0;
}

.color-btn--purple:hover {
    background: rgba(156, 39, 176, 0.2);
    border-color: rgba(156, 39, 176, 0.4);
}

/* 橙色按钮 */
.color-btn--orange {
    background: rgba(255, 152, 0, 0.1);
    border-color: rgba(255, 152, 0, 0.25);
    color: #ff9800;
}

.color-btn--orange:hover {
    background: rgba(255, 152, 0, 0.2);
    border-color: rgba(255, 152, 0, 0.4);
}

/* 红色按钮 */
.color-btn--red {
    background: rgba(244, 67, 54, 0.1);
    border-color: rgba(244, 67, 54, 0.25);
    color: #f44336;
}

.color-btn--red:hover {
    background: rgba(244, 67, 54, 0.2);
    border-color: rgba(244, 67, 54, 0.4);
}

/* 灰色按钮 */
.color-btn--gray {
    background: rgba(158, 158, 158, 0.1);
    border-color: rgba(158, 158, 158, 0.25);
    color: #757575;
}

.color-btn--gray:hover {
    background: rgba(158, 158, 158, 0.2);
    border-color: rgba(158, 158, 158, 0.4);
}

/* 按钮尺寸变体 */
.color-btn--sm {
    padding: 4px 10px;
    font-size: 11px;
}

.color-btn--block {
    flex: 1;
    text-align: center;
}

/* 保留旧按钮样式兼容 */
.settings-btn--sm {
    padding: 4px 10px;
    font-size: 12px;
}

.settings-btn--block {
    flex: 1;
    text-align: center;
}

/* 小尺寸输入框 */
.settings-input--sm {
    padding: 6px 10px;
    font-size: 12px;
    flex: 1;
    min-width: 0;
}

/* 同步状态文字 */
.sync-status-text {
    font-size: 11px;
    margin-top: 6px;
    min-height: 16px;
}

/* 同步信息 */
.sync-info {
    padding: 10px;
    background: var(--sync-info-bg);
    border-radius: 4px;
    font-size: 12px;
}

/* ===== 加载覆盖层 ===== */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 20000;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.loading-content {
    text-align: center;
}

.loading-spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 4px solid #fff;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 10px;
}

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

}

/* ===== 响应式设计 ===== */
@media (max-width: 768px) {
    .nav-header__container {
        grid-template-columns: 1fr auto;
    }

    .nav-header__weather {
        display: none;
    }

    .nav-header__date {
        display: none;
    }

    /* 移动端调整分类模块网格布局，增加列数 */
    .category-module__links--grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 3px;
        font-size: 11px;
    }

    .category-module__link {
        padding: 3px 6px;
        margin: 1px;
        font-size: 10px;
        min-height: 20px;
    }

    /* 移动端隐藏右侧最近模块 */
    .nav-sidebar {
        display: none;
    }
}