body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; touch-action: manipulation; }
        .navbar-brand { font-weight: bold; color: inherit !important; }
        .comment-delete { visibility: hidden; }
        .card:hover .comment-delete { visibility: visible; }
        
        /* 双色主题全局变量定义 */
        :root {
            --custom-bg-main: #f4f5f7;
            --custom-bg-sidebar: #ffffff;
            --custom-border: #dee2e6;
            --custom-item-bg: #e9ecef;
        }
        
        [data-bs-theme="dark"] {
            /* 降低饱和度的深色模式系统颜色 */
            --bs-primary: #5c8fc4;
            --bs-success: #55a87b;
            --bs-info: #46a2b8;
            --bs-warning: #cc9944;
            --bs-danger: #c45c5c;
            --bs-primary-rgb: 92, 143, 196;
            --bs-success-rgb: 85, 168, 123;
            --bs-info-rgb: 70, 162, 184;
            --bs-warning-rgb: 204, 153, 68;
            --bs-danger-rgb: 196, 92, 92;

            /* 深色模式下定制的层级背景色 */
            --custom-bg-main: #13131a;
            --custom-bg-sidebar: #1a1a24;
            --custom-border: #2d2d3f;
            --custom-item-bg: #252533;
        }

        /* 修复深色模式下各按钮未继承低饱和度变量的问题，统一压暗背景色与高亮包边 */
        [data-bs-theme="dark"] .btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: #4a77a6; --bs-btn-hover-border-color: #4a77a6; --bs-btn-active-bg: #4a77a6; --bs-btn-active-border-color: #4a77a6; }
        [data-bs-theme="dark"] .btn-warning { --bs-btn-bg: var(--bs-warning); --bs-btn-border-color: var(--bs-warning); --bs-btn-color: #13131a; --bs-btn-hover-bg: #a67d38; --bs-btn-hover-border-color: #a67d38; --bs-btn-hover-color: #13131a; --bs-btn-active-bg: #a67d38; --bs-btn-active-border-color: #a67d38; --bs-btn-active-color: #13131a; }
        [data-bs-theme="dark"] .btn-info { --bs-btn-bg: var(--bs-info); --bs-btn-border-color: var(--bs-info); --bs-btn-color: #fff; --bs-btn-hover-bg: #3c8a9e; --bs-btn-hover-border-color: #3c8a9e; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #3c8a9e; --bs-btn-active-border-color: #3c8a9e; --bs-btn-active-color: #fff; }
        [data-bs-theme="dark"] .btn-outline-info { --bs-btn-color: var(--bs-info); --bs-btn-border-color: #3c8a9e; --bs-btn-hover-bg: var(--bs-info); --bs-btn-hover-border-color: var(--bs-info); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--bs-info); --bs-btn-active-border-color: var(--bs-info); --bs-btn-active-color: #fff; }
        [data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: #a0a0aa; --bs-btn-border-color: #4a4a5e; --bs-btn-hover-bg: #2d2d3f; --bs-btn-hover-border-color: #4a4a5e; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #2d2d3f; --bs-btn-active-border-color: #4a4a5e; --bs-btn-active-color: #fff; }
        [data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: #5c8fc4; --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-active-color: #fff; }

        /* 修复不同颜色模式下复选框未选中时边框看不见的问题 */
        .form-check-input {
            border-color: #212529 !important; /* 浅色模式强制深色边框 */
        }
        [data-bs-theme="dark"] .form-check-input {
            border-color: #dee2e6 !important; /* 深色模式强制浅色边框 */
        }

        /* 修复带 bg-body 的 Checkbox 导致选中状态下背景和勾号同色不可见的问题 */
        .form-check-input:checked {
            background-color: var(--bs-primary) !important;
            border-color: var(--bs-primary) !important;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
        }
        
        /* 核心布局控制
           三行 height 兼容写法（CSS 后写覆盖前写，浏览器选最后一个能解析的）：
           - 现代浏览器（Chrome/Firefox/Safari 15.4+）：用 100dvh - 56px 避免移动端地址栏伸缩跳变
           - iOS Safari 15.0~15.3：100dvh 无法解析，跳过中间行，用 -webkit-fill-available
             （注意这是 -webkit- 前缀的别名，等价于 100vh；老 Safari 看不到 100dvh 那行）
           - 极老浏览器：fallback 到 100vh - 56px
           之前只写 100vh + 100dvh，iOS Safari 15.3 上 100dvh 无法解析 → 整个 height 失效
           → flex 容器高度塌陷 → sidebar 被压扁 → 页面错乱（与用户截图症状一致）。 */
        .layout-wrapper {
            display: flex;
            height: calc(100vh - 56px);
            height: -webkit-fill-available;
            height: calc(100dvh - 56px);
            overflow: hidden;
            position: relative;
        }
        
        /* 侧边栏及可调宽控制 */
        .layout-sidebar { 
            width: 260px; 
            min-width: 200px; 
            max-width: 500px; 
            flex-shrink: 0; 
            background-color: var(--custom-bg-sidebar) !important; 
            border-right: 1px solid var(--custom-border); 
            position: relative;
            transition: transform 0.3s ease; 
        }
        .custom-navbar { background-color: var(--custom-bg-sidebar) !important; }
        
        .sidebar-resizer {
            position: absolute;
            top: 0;
            right: 0;
            width: 4px;
            height: 100%;
            cursor: col-resize;
            background-color: transparent;
            z-index: 10;
            transition: background-color 0.2s;
        }
        .sidebar-resizer:hover, .sidebar-resizer.active {
            background-color: #0dcaf0; 
        }

        .layout-main { flex-grow: 1; overflow-y: auto; background-color: var(--custom-bg-main); position: relative; }
        
        /* 侧边栏项目悬浮态 */
        .sidebar-item-link { border-radius: 6px; transition: background-color 0.2s; }
        .sidebar-item-link:hover { background-color: var(--custom-item-bg); }
        
        /* 上传/同步任务管理器浮窗样式 */
        #upload-manager { 
            position: fixed; bottom: 20px; right: 20px; width: 380px; max-width: calc(100vw - 40px); 
            z-index: 9999; 
            background: var(--custom-item-bg); 
            border: 1px solid var(--custom-border); 
            border-radius: 12px; 
            box-shadow: 0 8px 32px rgba(0,0,0,0.4);
            overflow: hidden;
            display: none;
        }
        #upload-manager.show { display: block; }
        #upload-manager.minimized .upload-manager-body { display: none; }
        #upload-manager.minimized { border-radius: 8px; }
        .upload-manager-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 10px 12px; 
            background: var(--custom-bg-main); 
            border-bottom: 1px solid var(--custom-border);
            cursor: pointer;
        }
        .upload-manager-title { font-weight: 600; font-size: 0.85rem; color: var(--custom-text-main); }
        .upload-manager-count { font-size: 0.75rem; color: var(--custom-text-sub); margin-left: 8px; }
        .upload-manager-actions { display: flex; gap: 6px; }
        .upload-manager-btn { 
            background: none; border: none; color: var(--custom-text-sub); 
            cursor: pointer; padding: 2px 6px; font-size: 0.75rem; border-radius: 4px;
        }
        .upload-manager-btn:hover { background: var(--custom-hover-bg); color: var(--custom-text-main); }
        .upload-manager-body { max-height: 320px; overflow-y: auto; padding: 8px; }
        .upload-item { 
            background: var(--custom-bg-main); 
            border: 1px solid var(--custom-border); 
            padding: 10px; 
            margin-bottom: 8px; 
            border-radius: 8px; 
        }
        .upload-item:last-child { margin-bottom: 0; }
        .upload-item.sync-item { border-left: 3px solid #ffc107; }
        .upload-item.upload-item { border-left: 3px solid #0dcaf0; }
        .upload-item.done { opacity: 0.5; }
        .upload-item-progress { height: 4px; margin: 6px 0; }
        .upload-item-actions { display: flex; gap: 8px; justify-content: flex-end; }
        .upload-item-actions button { font-size: 0.7rem; padding: 2px 8px; }
        
        /* 最小化状态下的简化头部 */
        #upload-manager.minimized .upload-manager-header { border-bottom: none; }
        
        /* 移动端适配 */
        @media (max-width: 576px) {
            #upload-manager { bottom: 10px; right: 10px; left: 10px; width: auto; max-width: none; }
            .upload-manager-body { max-height: 50vh; }
        }
        
        /* 任务管理器开关按钮（显示在右下角） */
        #upload-manager-toggle {
            position: fixed; bottom: 20px; right: 20px; 
            width: 56px; height: 56px; border-radius: 50%;
            background: linear-gradient(135deg, #0dcaf0, #0aa2c0);
            color: white; border: none; cursor: pointer;
            box-shadow: 0 4px 16px rgba(13, 202, 240, 0.4);
            z-index: 9998; display: none; align-items: center; justify-content: center;
            font-size: 1.4rem; transition: transform 0.2s, box-shadow 0.2s;
        }
        #upload-manager-toggle:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(13, 202, 240, 0.5); }
        #upload-manager-toggle.has-tasks { display: flex; }
        #upload-manager-toggle .badge { position: absolute; top: -2px; right: -2px; font-size: 0.65rem; }
        
        /* 移动端侧边栏与遮罩适配 */
        @media (max-width: 991.98px) {
            #upload-manager { bottom: 10px; right: 10px; width: calc(100vw - 20px); max-width: none; }
            .layout-sidebar {
                position: absolute;
                height: 100%;
                z-index: 1050;
                transform: translateX(-100%); 
                width: 280px !important; 
            }
            .layout-sidebar.show {
                transform: translateX(0); 
            }
            .sidebar-overlay {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.6);
                z-index: 1040;
                display: none;
                backdrop-filter: blur(2px);
            }
            .sidebar-overlay.show { display: block; }
            .sidebar-resizer { display: none; } 
        }
        /* 强制提升登录弹窗层级，确保它永远在其他弹窗上方 */
        #sparkLoginModal { z-index: 1100 !important; }        
        
        /* 全局搜索遮罩与模态框 */
        #globalSearchOverlay {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background-color: rgba(0, 0, 0, 0.5); z-index: 2000;
            display: none; align-items: center; justify-content: center; backdrop-filter: blur(4px);
        }
        #globalSearchOverlay.show { display: flex; }
        
        /* 搜索内容容器：PC端居中占一半，移动端全屏 */
        .search-dialog {
            display: flex; flex-direction: column;
            width: 50%; max-width: 800px; height: 75vh; border-radius: 12px; overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }
        @media (max-width: 991.98px) {
            .search-dialog { width: 100%; max-width: 100%; height: 100vh; border-radius: 0; }
        }

        /* 颜色变量定义：自动适配浅色/深色主题 */
        :root {
            --search-bg: #ffffff;
            --search-header-bg: #f8f9fa;
            --search-border: #dee2e6;
            --search-text-main: #212529;
            --search-text-sub: #6c757d;
            --search-input-text: #212529;
            --search-hover-bg: #e9ecef;
            --search-icon-empty: #ced4da;
        }
        [data-bs-theme="dark"] {
            --search-bg: #1a1a24;
            --search-header-bg: #202028;
            --search-border: rgba(255,255,255,0.05);
            --search-text-main: #ffffff;
            --search-text-sub: #888888;
            --search-input-text: #ffffff;
            --search-hover-bg: rgba(255,255,255,0.05);
            --search-icon-empty: #3a3a48;
        }

        .search-dialog { background-color: var(--search-bg); }
        .search-header {
            display: flex; align-items: center; padding: 15px 30px;
            border-bottom: 1px solid var(--search-border); background-color: var(--search-header-bg);
        }
        .search-input-wrapper { flex-grow: 1; display: flex; align-items: center; position: relative; }
        .search-input-wrapper i { position: absolute; left: 15px; color: var(--search-text-sub); font-size: 1.4rem; }
        #globalSearchInput {
            width: 100%; background: transparent; border: none; color: var(--search-input-text);
            font-size: 1.15rem; padding: 10px 10px 10px 50px; outline: none;
        }
        #globalSearchInput::placeholder { color: var(--search-text-sub); }
        .search-close-btn { color: var(--search-text-sub); background: none; border: none; font-size: 1.5rem; cursor: pointer; transition: color 0.2s; }
        .search-close-btn:hover { color: var(--search-text-main); }
        .search-tabs { display: flex; padding: 0 30px; border-bottom: 1px solid var(--search-border); background-color: var(--search-header-bg); }
        .search-tab {
            background: none; border: none; color: var(--search-text-sub); padding: 12px 18px;
            cursor: pointer; font-size: 0.9rem; border-bottom: 2px solid transparent; transition: all 0.2s;
        }
        .search-tab:hover { color: var(--search-text-main); }
        .search-tab.active { color: var(--search-text-main); border-bottom-color: #5c8fc4; }
        .search-body { flex-grow: 1; overflow-y: auto; padding: 40px; display: flex; flex-direction: column; }
        .search-empty-state { margin: auto; text-align: center; color: var(--search-text-sub); }
        .search-empty-state i { font-size: 5rem; margin-bottom: 1rem; color: var(--search-icon-empty); }
        .search-results-list { width: 100%; }
        .search-result-item {
            padding: 12px 16px; border-radius: 8px; display: flex; align-items: center;
            cursor: pointer; transition: background 0.2s; color: var(--search-text-sub); text-decoration: none; margin-bottom: 8px;
        }
        .search-result-item:hover { background: var(--search-hover-bg); }
        .search-result-item-title { font-weight: bold; color: var(--search-text-main); margin-bottom: 4px; font-size: 0.95rem; }
        .search-result-icon { margin-right: 15px; font-size: 1.4rem; color: #5c8fc4; width: 24px; text-align: center; }

        /* 侧边栏折叠图标动画 */
        .chevron-icon { transition: transform 0.2s ease-in-out; }
        .category-toggle.collapsed .chevron-icon { transform: rotate(-90deg); }

/* === base.css: extracted from base.html inline styles === */

.folder-toggle-link[aria-expanded="false"] .folder-toggle-icon { transform: rotate(-90deg); }
                    .tree-hover-item { transition: background-color 0.2s; border-radius: 4px; }
                    .tree-hover-item:hover { background-color: var(--custom-item-bg); }