/* 由 index.html 的内联 <style> 提取 —— 修改后请同步提升 HTML 里的 ?v= 版本号 */
:root {
            --card-bg: rgba(255,255,255,0.68);
            --card-bg-hover: rgba(255,255,255,0.82);
            --card-border: rgba(100,180,220,0.18);
            --input-bg: rgba(255,255,255,0.8);
            --text-1: #2d4a5e;
            --text-2: #4a7a94;
            --text-3: #7aa8c0;
            --text-4: #a0c8d8;
            --accent: #5bb8d4;
            --accent-2: #3a9fc0;
        }

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

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #e8f5f9 0%, #d4edfc 50%, #c8e6f5 100%);
            min-height: 100vh;
            color: var(--text-1);
            overflow-x: hidden;            display: flex;
            flex-direction: column;
        }

        /* ===== 左侧边栏 ===== */
        .left-sidebar {
            position: fixed;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            width: 260px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            z-index: 100;
            max-height: calc(100vh - 36px);
            overflow-y: auto;
            scrollbar-width: thin;
        }

        /* ===== 右侧边栏（今日日程，与左侧对称）===== */
        .right-sidebar {
            position: fixed;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            width: 260px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            z-index: 100;
            max-height: calc(100vh - 36px);
            overflow-y: auto;
            scrollbar-width: thin;
        }
        /* 桌面端：左侧日程 widget 隐藏，只显示在右侧栏；移动端：右侧栏隐藏（日程进底部抽屉） */
        @media (min-width: 1101px) {
            .left-sidebar .schedule-widget { display: none; }
            /* 右侧栏只有日程一个 widget，列表加长，整栏滚动 */
            .right-sidebar .sidebar-widget-list { max-height: none; }
        }
        @media (max-width: 1100px) {
            .right-sidebar { display: none; }
        }

        .sidebar-widget {
            background: var(--card-bg);
            backdrop-filter: blur(12px);
            border-radius: 16px;
            border: 1px solid var(--card-border);
            box-shadow: 0 4px 20px rgba(100,180,220,0.1);
            overflow: hidden;
        }

        .sidebar-widget-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 16px;
            background: rgba(100,180,220,0.06);
            border-bottom: 1px solid rgba(100,180,220,0.1);
        }

        .sidebar-widget-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-1);
            cursor: pointer;
            transition: color 0.2s;
            user-select: none;
        }
        .sidebar-widget-title:hover {
            color: var(--accent);
        }

        .sidebar-widget-count {
            font-size: 11px;
            color: var(--text-3);
            background: rgba(100,180,220,0.12);
            padding: 3px 10px;
            border-radius: 10px;
        }

        .sidebar-widget-input {
            padding: 12px 14px;
        }

        .sidebar-widget-input input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid rgba(100,180,220,0.2);
            border-radius: 10px;
            font-size: 13px;
            background: rgba(255,255,255,0.8);
            color: var(--text-1);
            outline: none;
            transition: all 0.2s;
        }

        .sidebar-widget-input input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(91,184,212,0.15);
        }

        .sidebar-widget-list {
            max-height: 200px;
            overflow-y: auto;
            padding: 8px 12px;
        }

        .sidebar-widget-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 10px;
            margin-bottom: 4px;
            background: rgba(255,255,255,0.5);
            transition: all 0.2s;
            cursor: pointer;
        }

        .sidebar-widget-item:hover {
            background: rgba(255,255,255,0.8);
        }

        .sidebar-widget-item.done {
            opacity: 0.6;
        }

        .sidebar-widget-checkbox {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 2px solid rgba(100,180,220,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            flex-shrink: 0;
            transition: all 0.2s;
        }

        .sidebar-widget-checkbox.checked {
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            border-color: transparent;
            color: #fff;
        }

        .sidebar-widget-text {
            flex: 1;
            font-size: 13px;
            color: var(--text-1);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .sidebar-widget-item.done .sidebar-widget-text {
            text-decoration: line-through;
            color: var(--text-4);
        }

        .sidebar-widget-dots {
            display: flex;
            gap: 3px;
        }

        .sidebar-widget-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(100,180,220,0.15);
        }

        .sidebar-widget-dot.active {
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
        }

        .sidebar-widget-delete {
            width: 24px;
            height: 24px;
            border-radius: 6px;
            border: none;
            background: transparent;
            color: var(--text-4);
            font-size: 12px;
            cursor: pointer;
            opacity: 0;
            transition: all 0.2s;
            flex-shrink: 0;
        }

        .sidebar-widget-item:hover .sidebar-widget-delete {
            opacity: 1;
        }

        .sidebar-widget-delete:hover {
            background: rgba(220,80,80,0.12);
            color: #d05050;
        }

        .sidebar-widget-empty {
            text-align: center;
            padding: 20px;
            color: var(--text-4);
            font-size: 13px;
        }

        /* ===== 倒数日 widget ===== */
        .countdown-input-row { display: flex; gap: 6px; align-items: center; }
        .countdown-input-row input[type="text"] { flex: 1; min-width: 0; }
        .countdown-item-days {
            font-size: 12px;
            font-weight: 600;
            color: var(--accent-2);
            flex-shrink: 0;
            margin-left: auto;
            padding-left: 8px;
        }
        /* 侧栏小组件：跳转 / 添加 按钮 */
        .sidebar-widget-actions { display: flex; align-items: center; gap: 8px; }
        .sidebar-expand {
            width: 26px; height: 26px;
            border: none; background: transparent;
            color: var(--text-4);
            border-radius: 8px; font-size: 14px; line-height: 1;
            cursor: pointer; flex-shrink: 0; transition: all 0.2s;
        }
        .sidebar-expand:hover { color: var(--accent); background: rgba(100,180,220,0.12); }
        .sidebar-add-btn {
            width: 26px; height: 26px;
            border: 1px solid var(--card-border);
            background: transparent;
            color: var(--text-3);
            border-radius: 8px; font-size: 15px; line-height: 1;
            cursor: pointer; flex-shrink: 0; transition: all 0.2s;
        }
        .sidebar-add-btn:hover { color: var(--accent); border-color: var(--accent); }

        /* 倒数日添加表单（首页隐藏式） */
        .sidebar-countdown-add {
            display: flex; flex-direction: column; gap: 8px;
            padding: 10px 12px;
            background: rgba(100,180,220,0.04);
            border-bottom: 1px solid rgba(100,180,220,0.1);
        }
        .cd-emoji-row { display: flex; flex-wrap: wrap; gap: 6px; }
        .cd-emoji {
            width: 30px; height: 30px;
            border: 1px solid transparent;
            background: rgba(255,255,255,0.5);
            border-radius: 8px; font-size: 15px;
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            transition: all 0.15s;
        }
        .cd-emoji:hover { background: rgba(91,184,212,0.12); }
        .cd-emoji.active { border-color: var(--accent); background: rgba(91,184,212,0.18); }
        .cd-date-trigger {
            flex: 1; min-width: 0; text-align: left;
            border: 1px solid var(--card-border);
            background: var(--input-bg);
            border-radius: 10px; padding: 9px 12px;
            font-size: 13px; color: var(--text-2);
            cursor: pointer; font-family: inherit;
            transition: border-color 0.2s;
        }
        .cd-date-trigger:hover, .cd-date-trigger.has-date { border-color: var(--accent); color: var(--text-1); }
        .cd-add-actions { display: flex; gap: 8px; justify-content: flex-end; }
        .cd-cancel {
            border: 1px solid var(--card-border); background: transparent;
            color: var(--text-3); padding: 7px 14px; border-radius: 10px;
            font-size: 13px; cursor: pointer; font-family: inherit;
        }
        .cd-cancel:hover { color: var(--text-1); }
        .cd-confirm {
            border: none; background: linear-gradient(135deg, var(--accent), var(--accent-2));
            color: #fff; padding: 7px 16px; border-radius: 10px;
            font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
        }
        .cd-confirm:hover { opacity: 0.9; }

        /* 自定义大号日历弹层 */
        .cal-pop {
            position: fixed; z-index: 9999;
            background: var(--card-bg);
            backdrop-filter: blur(14px);
            border: 1px solid var(--card-border);
            border-radius: 16px;
            box-shadow: 0 10px 36px rgba(100,180,220,0.28);
            padding: 14px; width: 304px;
            user-select: none;
        }
        .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
        .cal-title { font-size: 14px; font-weight: 600; color: var(--text-1); }
        .cal-nav {
            width: 30px; height: 30px; border: none;
            background: rgba(100,180,220,0.12);
            color: var(--text-2); border-radius: 8px;
            font-size: 16px; cursor: pointer; transition: all 0.15s;
        }
        .cal-nav:hover { background: var(--accent); color: #fff; }
        .cal-week { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; margin-bottom: 4px; }
        .cal-week span { text-align: center; font-size: 11px; color: var(--text-3); }
        .cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
        .cal-cell {
            height: 38px; display: flex; align-items: center; justify-content: center;
            font-size: 13px; color: var(--text-1); border-radius: 8px; cursor: pointer;
            transition: background 0.15s;
        }
        .cal-cell.empty { cursor: default; }
        .cal-cell:not(.empty):hover { background: rgba(100,180,220,0.18); }
        .cal-today { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-2); font-weight: 700; }
        .cal-sel { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 700; }

        /* ===== 顶部工具按钮 ===== */
        .top-bar-center {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .tools-pill {
            display: flex;
            gap: 6px;
            background: var(--card-bg);
            padding: 6px 10px;
            border-radius: 28px;
            border: 1px solid rgba(100,180,220,0.15);
        }

        /* 迷你天气 */
        .weather-mini {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: var(--text-2);
            cursor: pointer;
            padding: 8px 16px;
            border-radius: 14px;
            background: rgba(255,255,255,0.6);
            border: 1px solid rgba(100,180,220,0.12);
            transition: all 0.25s;
            min-height: 42px;
        }
        .weather-mini:hover {
            background: rgba(255,255,255,0.85);
            transform: translateY(-1px);
        }
        .weather-mini span:first-child { font-size: 22px; }
        .weather-mini span:nth-child(2) { font-weight: 600; color: var(--text-1); }
        .weather-mini span:nth-child(3) { color: var(--text-3); font-size: 12px; }

        /* 用户按钮 + 下拉菜单 */
        .user-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            color: var(--text-2);
            cursor: pointer;
            padding: 8px 16px;
            border-radius: 14px;
            background: rgba(255,255,255,0.6);
            border: 1px solid rgba(100,180,220,0.12);
            transition: all 0.25s;
            position: relative;
            min-height: 42px;
        }
        .user-btn:hover {
            background: rgba(255,255,255,0.85);
            transform: translateY(-1px);
        }
        .user-btn .arrow { font-size: 10px; color: var(--text-4); }
        .user-dropdown {
            display: none;
            position: absolute;
            top: calc(100% + 6px);
            right: 0;
            min-width: 120px;
            background: rgba(255,255,255,0.96);
            backdrop-filter: blur(16px);
            border-radius: 12px;
            border: 1px solid var(--card-border);
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
            padding: 6px;
            z-index: 300;
        }
        .user-dropdown.show { display: block; }
        .user-dropdown-item {
            display: block;
            padding: 8px 14px;
            font-size: 13px;
            color: var(--text-2);
            text-decoration: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.15s;
        }
        .user-dropdown-item:hover {
            background: rgba(100,180,220,0.1);
            color: var(--text-1);
        }

        .tool-btn {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 1px solid rgba(100,180,220,0.15);
            background: rgba(255,255,255,0.45);
            color: var(--text-1);
            font-size: 19px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .tool-btn:hover {
            background: rgba(255,255,255,0.85);
            border-color: var(--accent);
            transform: translateY(-2px);
            box-shadow: 0 3px 12px rgba(100,180,220,0.18);
        }

        /* 工具按钮的「激活」态。
           原先只有 :active（按下瞬间的伪类），没有 .active 类样式，
           导致 JS 里 classList.add('active') 加了也看不出任何变化。 */
        .tool-btn.active {
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            border-color: var(--accent);
            color: #fff;
            box-shadow: 0 3px 14px rgba(90, 180, 210, 0.35);
        }

        /* ===== 顶部栏 ===== */
        .top-bar {
            position: fixed;
            top: 0; left: 0; right: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            padding: 14px 20px;
            z-index: 50;
        }

        .top-bar-left {
            display: flex;
            gap: 12px;
        }

        /* 主题切换 */
        .theme-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            background: rgba(255,255,255,0.72);
            backdrop-filter: blur(12px);
            border-radius: 12px;
            border: 1px solid var(--card-border);
            box-shadow: 0 4px 16px rgba(100,180,220,0.1);
            font-size: 20px;
            cursor: pointer;
            transition: all 0.25s;
        }

        .theme-btn:hover {
            background: rgba(255,255,255,0.88);
            transform: translateY(-2px);
        }

        /* 节日倒计时 */
        .countdown-card {
            display: flex;
            align-items: center;
            gap: 6px;
            background: rgba(255,255,255,0.72);
            backdrop-filter: blur(12px);
            padding: 8px 14px;
            border-radius: 14px;
            border: 1px solid var(--card-border);
            box-shadow: 0 4px 16px rgba(100,180,220,0.1);
            font-size: 12px;
            cursor: default;
            transition: all 0.25s;
        }

        .countdown-card:hover {
            background: rgba(255,255,255,0.88);
        }

        .countdown-icon { font-size: 18px; }
        .countdown-name { color: var(--text-2); font-weight: 500; }
        .countdown-days { color: var(--text-1); font-weight: 700; font-size: 14px; }

        /* 搜索历史面板 */
        .history-panel {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.95);
            width: 380px;
            max-width: 90vw;
            max-height: 70vh;
            background: rgba(255,255,255,0.95);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.15);
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .history-panel.show {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, -50%) scale(1);
        }

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

        .history-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-1);
        }

        .history-close {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            border: none;
            background: transparent;
            color: var(--text-4);
            font-size: 18px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .history-close:hover {
            background: rgba(220,80,80,0.1);
            color: #d05050;
        }

        .history-search {
            margin-bottom: 12px;
        }

        .history-search-input {
            width: 100%;
            padding: 10px 14px;
            border: 1px solid rgba(100,180,220,0.2);
            border-radius: 10px;
            font-size: 14px;
            background: rgba(255,255,255,0.8);
            color: var(--text-1);
            outline: none;
            transition: all 0.2s;
        }

        .history-search-input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(91,184,212,0.15);
        }

        .history-list {
            flex: 1;
            overflow-y: auto;
            min-height: 0;
        }

        .history-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: rgba(255,255,255,0.6);
            border-radius: 10px;
            margin-bottom: 8px;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid transparent;
        }

        .history-item:hover {
            background: rgba(255,255,255,0.9);
            border-color: rgba(91,184,212,0.3);
        }

        .history-item-icon {
            font-size: 16px;
            opacity: 0.6;
        }

        .history-item-text {
            flex: 1;
            font-size: 14px;
            color: var(--text-1);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .history-item-delete {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            border: none;
            background: transparent;
            color: var(--text-4);
            font-size: 14px;
            cursor: pointer;
            opacity: 0;
            transition: all 0.2s;
        }

        .history-item:hover .history-item-delete {
            opacity: 1;
        }

        .history-item-delete:hover {
            background: rgba(220,80,80,0.12);
            color: #d05050;
        }

        .history-empty {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-4);
            font-size: 14px;
        }

        .history-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid rgba(100,180,220,0.15);
        }

        .history-count {
            font-size: 12px;
            color: var(--text-3);
        }

        .history-clear-btn {
            padding: 8px 14px;
            background: rgba(220,80,80,0.1);
            border: none;
            border-radius: 8px;
            color: #d05050;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .history-clear-btn:hover {
            background: rgba(220,80,80,0.2);
        }

        /* 番茄钟按钮 */
        .pomodoro-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(255,255,255,0.72);
            backdrop-filter: blur(12px);
            padding: 10px 16px;
            border-radius: 16px;
            border: 1px solid var(--card-border);
            box-shadow: 0 4px 16px rgba(100,180,220,0.1);
            font-size: 14px;
            cursor: pointer;
            transition: all 0.25s;
            color: var(--text-1);
        }

        .pomodoro-btn:hover {
            background: rgba(255,255,255,0.88);
            transform: translateY(-2px);
        }

        .pomodoro-btn.active {
            background: linear-gradient(135deg, #ff6b6b, #ee5a5a);
            color: #fff;
            border-color: transparent;
        }

        /* ===== 动态背景 ===== */
        .bg-decoration {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .cloud {
            position: absolute;
            background: rgba(255,255,255,0.45);
            border-radius: 50%;
            filter: blur(35px);
            opacity: 0.40;
        }

        .cloud:nth-child(1) { width: 260px; height: 170px; top: 6%; left: 6%; }
        .cloud:nth-child(2) { width: 320px; height: 200px; top: 58%; right: 6%; }
        .cloud:nth-child(3) { width: 200px; height: 150px; bottom: 28%; left: 38%; }
        .cloud:nth-child(4) { width: 280px; height: 190px; top: 22%; right: 28%; }

        /* 云朵为静态装饰，无动画、不重绘，零 CPU 开销 */

        /* ===== 主内容区 ===== */
        .main {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 1;
            /* 桌面端左右留出侧栏空间（左侧 待办/习惯/倒数日，右侧 今日日程） */
            padding: 70px 286px 150px 286px;
        }

        .time {
            font-size: 78px;
            font-weight: 200;
            letter-spacing: 2px;
            margin-bottom: 4px;
            color: var(--text-1);
            text-shadow: 0 2px 18px rgba(0,0,0,0.08);
        }

        .date {
            font-size: 14px;
            color: var(--text-2);
            margin-bottom: 12px;
            font-weight: 400;
        }

        /* 每日一言 */
        .quote-section {
            margin-bottom: 28px;
            text-align: center;
            max-width: 500px;
            padding: 0 20px;
        }

        .quote-text {
            font-size: 14px;
            color: var(--text-2);
            font-style: italic;
            line-height: 1.6;
            margin-bottom: 6px;
        }

        .quote-author {
            font-size: 12px;
            color: var(--text-4);
        }

        .quote-refresh {
            background: none;
            border: none;
            color: var(--text-4);
            font-size: 12px;
            cursor: pointer;
            margin-top: 8px;
            transition: color 0.2s;
        }

        .quote-refresh:hover {
            color: var(--text-2);
        }

        /* ===== 搜索栏 ===== */
        .search-wrapper {
            position: relative;
            z-index: 30;
            width: 580px;
            max-width: 92vw;
        }

        .search-box {
            display: flex;
            align-items: stretch;
            background: rgba(255,255,255,0.78);
            border-radius: 50px;
            border: 2px solid rgba(100,180,220,0.22);
            box-shadow: 0 6px 28px rgba(100,160,200,0.1);
            transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);
            overflow: hidden;
        }

        .history-btn {
            position: absolute;
            right: -48px;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid rgba(100,180,220,0.22);
            background: rgba(255,255,255,0.72);
            color: var(--text-2);
            font-size: 16px;
            cursor: pointer;
            transition: all 0.25s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .history-btn:hover {
            background: rgba(255,255,255,0.95);
            border-color: rgba(80,160,210,0.42);
            transform: translateY(-50%) scale(1.08);
            box-shadow: 0 4px 16px rgba(100,180,220,0.15);
        }

        .search-box:focus-within {
            background: rgba(255,255,255,0.94);
            border-color: rgba(80,160,210,0.42);
            box-shadow: 0 10px 36px var(--card-border);
            transform: scale(1.01);
        }

        .engine-btn {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 0 16px;
            background: transparent;
            border: none;
            border-right: 1px solid var(--card-border);
            color: var(--text-2);
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s;
            white-space: nowrap;
        }

        .engine-btn:hover { color: #2d6080; }
        .engine-btn .arrow { font-size: 9px; opacity: 0.5; margin-left: 3px; }

        .engine-dropdown {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            background: rgba(255,255,255,0.98);
            border: 1px solid var(--card-border);
            border-radius: 14px;
            padding: 6px;
            min-width: 155px;
            box-shadow: 0 10px 36px var(--card-border);
            z-index: 20;
        }

        .engine-dropdown.show { display: block; }
        /* 菜单打开时整个搜索容器浮到最顶层（避免被抽屉/浮层 z-index 压住），关闭即恢复 */
        .search-wrapper.z-open { z-index: 500; }

        /* 搜索建议下拉 */
        .search-suggest {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            right: 0;
            background: rgba(255,255,255,0.98);
            border: 1px solid var(--card-border);
            border-radius: 14px;
            padding: 6px;
            box-shadow: 0 10px 36px var(--card-border);
            z-index: 25;
            max-height: 320px;
            overflow-y: auto;
        }

        .search-suggest.show { display: block; }

        .suggest-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.15s;
            color: #2a5a78;
            font-size: 14px;
        }

        .suggest-item:hover, .suggest-item.active {
            background: rgba(100,180,220,0.12);
        }

        .suggest-item.active {
            background: var(--card-border);
        }

        .suggest-icon {
            color: var(--text-3);
            font-size: 14px;
        }

        .suggest-text {
            flex: 1;
        }

        .suggest-tag {
            font-size: 11px;
            color: var(--text-4);
            background: rgba(100,180,220,0.1);
            padding: 2px 6px;
            border-radius: 4px;
        }

        .engine-option {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 10px 12px;
            border-radius: 9px;
            cursor: pointer;
            transition: all 0.15s;
            border: none;
            background: none;
            color: #3a6a84;
            width: 100%;
            font-size: 13px;
            text-align: left;
        }

        .engine-option:hover { background: rgba(100,180,220,0.1); }
        .engine-option.active { background: rgba(100,180,220,0.16); color: #1a5070; }
        .engine-option .eicon { font-size: 17px; width: 22px; text-align: center; }

        .search-input {
            flex: 1;
            border: none;
            background: transparent;
            padding: 15px 12px;
            font-size: 15px;
            color: var(--text-1);
            outline: none;
        }

        .search-input::placeholder { color: var(--text-4); }

        .search-submit {
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            border: none;
            padding: 15px 26px;
            color: #fff;
            font-size: 17px;
            cursor: pointer;
            transition: all 0.22s;
        }

        .search-submit:hover { 
            background: linear-gradient(135deg, #4aa8c4, #2a8fb0);
        }

        /* 便签小组件 */
        .notes-section {
            margin-top: 16px;
            width: 580px;
            max-width: 92vw;
        }

        .notes-widget {
            background: var(--card-bg);
            backdrop-filter: blur(12px);
            border-radius: 16px;
            border: 1px solid var(--card-border);
            box-shadow: 0 4px 20px rgba(100,180,220,0.1);
        }

        .notes-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 16px;
            background: rgba(100,180,220,0.06);
            border-bottom: 1px solid rgba(100,180,220,0.1);
        }

        .notes-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-1);
        }

        .notes-clear {
            background: none;
            border: none;
            color: var(--text-3);
            font-size: 11px;
            cursor: pointer;
            transition: color 0.2s;
        }

        .notes-clear:hover {
            color: var(--text-2);
        }

        .notes-box {
            padding: 0;
        }

        .notes-textarea {
            width: 100%;
            min-height: 80px;
            max-height: 600px;
            padding: 14px 16px;
            border: none;
            background: transparent;
            font-size: 13px;
            color: var(--text-1);
            outline: none;
            resize: vertical;
            line-height: 1.55;
        }

        .notes-textarea::placeholder {
            color: var(--text-4);
        }

        .notes-textarea::-webkit-resizer {
            border-width: 0 0 8px 8px;
            border-style: solid;
            border-color: transparent transparent var(--text-4) transparent;
        }

        .notes-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 18px 8px;
            font-size: 10px;
            color: var(--text-4);
            border-top: 1px solid rgba(100,180,220,0.1);
            background: rgba(100,180,220,0.04);
        }

        .notes-grip {
            cursor: ns-resize;
            font-size: 14px;
            letter-spacing: -2px;
            opacity: 0.4;
            user-select: none;
        }
        .notes-grip:hover { opacity: 0.8; }
        .notes-widget { cursor: pointer; transition: box-shadow 0.25s, transform 0.2s; }
        .notes-widget:hover { box-shadow: 0 6px 26px rgba(100,180,220,0.18); transform: translateY(-1px); }
        .notes-expand { cursor: pointer; font-size: 15px; opacity: 0.45; user-select: none; transition: opacity 0.2s, transform 0.2s; }
        .notes-expand:hover { opacity: 0.9; transform: scale(1.15); }

        /* ===== 底部 Dock ===== */
        .dock-wrapper {
            position: fixed;
            bottom: calc(22px + env(safe-area-inset-bottom, 0px));
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
        }

        .dock {
            display: flex;
            align-items: center;
            gap: 9px;
            background: rgba(255,255,255,0.7);
            backdrop-filter: blur(18px);
            padding: 9px 14px;
            border-radius: 22px;
            border: 1px solid var(--card-border);
            box-shadow: 0 6px 28px rgba(100,180,220,0.1);
        }

        .dock-item {
            width: 52px;
            height: 52px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            flex-shrink: 0;
            overflow: visible;
            background: linear-gradient(135deg, #e8f4f8, #d0e8f0);
        }

        .dock-item:hover {
            transform: translateY(-9px) scale(1.14);
            box-shadow: 0 10px 28px rgba(100,180,220,0.22);
        }

        .dock-item .tooltip {
            position: absolute;
            bottom: calc(100% + 14px);
            left: 50%;
            transform: translateX(-50%);
            background: rgba(28,58,78,0.92);
            color: #fff;
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 500;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s;
            z-index: 10;
            box-shadow: 0 4px 12px rgba(28,58,78,0.2);
        }

        .dock-item:hover .tooltip { opacity: 1; }

        .dock-separator {
            width: 1px;
            height: 34px;
            background: rgba(100,180,220,0.22);
            margin: 0 4px;
            flex-shrink: 0;
        }

        .dock-item.settings-btn {
            background: rgba(100,180,220,0.14);
            font-size: 20px;
        }

        .dock-item.settings-btn:hover {
            background: rgba(100,180,220,0.24);
        }

        .dock-item .icon-letter {
            width: 30px;
            height: 30px;
            border-radius: 8px;
            font-size: 18px;
            font-weight: 700;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            text-shadow: 0 1px 2px rgba(0,0,0,0.15);
        }

        .dock-item .shortcut-hint {
            position: absolute;
            bottom: 4px;
            right: 4px;
            font-size: 9px;
            color: var(--text-3);
            background: rgba(255,255,255,0.8);
            padding: 1px 4px;
            border-radius: 3px;
            font-weight: 600;
        }

        /* ===== 番茄钟面板 ===== */
        .pomodoro-panel {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(252,254,255,0.98);
            border: 1px solid var(--card-border);
            border-radius: 24px;
            padding: 32px;
            box-shadow: 0 20px 60px rgba(100,180,220,0.25);
            z-index: 200;
            text-align: center;
            min-width: 300px;
            /* 面板内容超过一屏时可滚动（否则长列表/长文本会被视口切掉且滚不动） */
            max-height: calc(100vh - 48px);
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }

        .pomodoro-panel.show { display: block; }

        .pomodoro-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-1);
            margin-bottom: 24px;
        }

        .pomodoro-timer {
            font-size: 72px;
            font-weight: 200;
            color: #1a3a52;
            margin-bottom: 12px;
            font-variant-numeric: tabular-nums;
        }

        .pomodoro-status {
            font-size: 14px;
            color: var(--text-2);
            margin-bottom: 24px;
        }

        .pomodoro-progress {
            width: 100%;
            height: 6px;
            background: rgba(100,180,220,0.15);
            border-radius: 3px;
            margin-bottom: 24px;
            overflow: hidden;
        }

        .pomodoro-progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--accent), var(--accent-2));
            border-radius: 3px;
            transition: width 1s linear;
        }

        .pomodoro-btns {
            display: flex;
            gap: 12px;
            justify-content: center;
        }

        .pomodoro-btn {
            padding: 12px 28px;
            border-radius: 12px;
            border: none;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
            font-weight: 500;
        }

        .pomodoro-btn.primary {
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            color: #fff;
        }

        .pomodoro-btn.primary:hover {
            box-shadow: 0 6px 20px rgba(90,180,210,0.3);
            transform: translateY(-2px);
        }

        .pomodoro-btn.secondary {
            background: rgba(100,180,220,0.12);
            color: var(--text-2);
        }

        .pomodoro-btn.secondary:hover {
            background: rgba(100,180,220,0.2);
        }

        .pomodoro-presets {
            display: flex;
            gap: 8px;
            justify-content: center;
            margin-top: 20px;
        }

        .pomodoro-preset {
            padding: 8px 14px;
            border-radius: 8px;
            border: 1px solid rgba(100,180,220,0.2);
            background: transparent;
            color: var(--text-2);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .pomodoro-preset:hover, .pomodoro-preset.active {
            background: rgba(100,180,220,0.12);
            border-color: rgba(100,180,220,0.3);
        }

        /* ===== 快捷键帮助 ===== */
        .help-panel {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(252,254,255,0.98);
            border: 1px solid var(--card-border);
            border-radius: 20px;
            padding: 28px 36px;
            box-shadow: 0 20px 60px rgba(100,180,220,0.25);
            z-index: 200;
            max-width: 90vw;
        }

        .help-panel.show { display: block; }

        .help-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-1);
            margin-bottom: 20px;
            text-align: center;
        }

        .help-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .help-item {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .help-key {
            min-width: 40px;
            padding: 6px 10px;
            background: rgba(100,180,220,0.15);
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            color: #3a7a9a;
            text-align: center;
        }

        .help-desc {
            font-size: 13px;
            color: var(--text-2);
        }

        .help-close {
            margin-top: 24px;
            width: 100%;
            padding: 12px;
            background: rgba(100,180,220,0.1);
            border: none;
            border-radius: 10px;
            color: var(--text-2);
            font-size: 13px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .help-close:hover {
            background: var(--card-border);
        }

        /* ===== 侧边栏 ===== */
        .sidebar-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(28,58,78,0.35);
            backdrop-filter: blur(8px);
            z-index: 100;
        }

        .sidebar-overlay.open { display: block; }

        .sidebar {
            position: fixed;
            top: 0; right: -460px;
            width: 420px;
            max-width: 95vw;
            height: 100%;
            background: linear-gradient(180deg, rgba(252,254,255,0.99) 0%, rgba(245,252,255,0.98) 100%);
            backdrop-filter: blur(28px);
            border-left: 1px solid rgba(100,180,220,0.12);
            z-index: 101;
            transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            flex-direction: column;
            box-shadow: -8px 0 40px rgba(28,68,95,0.08);
        }

        .sidebar.open { right: 0; }

        .sidebar-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px 16px;
            border-bottom: 1px solid rgba(100,180,220,0.1);
            background: rgba(255,255,255,0.6);
        }

        .sidebar-header-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .sidebar-header-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .sidebar-title {
            font-size: 17px;
            font-weight: 600;
            color: var(--text-1);
        }

        .sidebar-count {
            font-size: 12px;
            color: var(--text-3);
            font-weight: 400;
            margin-left: 6px;
        }

        .sidebar-close {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            border: none;
            background: rgba(100,180,220,0.1);
            color: var(--text-2);
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .sidebar-close:hover {
            background: rgba(220,80,80,0.12);
            color: #d05050;
        }

        .sidebar-search {
            padding: 14px 20px;
            border-bottom: 1px solid rgba(100,180,220,0.08);
        }

        .sidebar-search-box {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(255,255,255,0.8);
            border: 1px solid rgba(100,180,220,0.15);
            border-radius: 12px;
            padding: 0 14px;
            transition: all 0.2s;
        }

        .sidebar-search-box:focus-within {
            border-color: rgba(80,160,210,0.35);
            background: #fff;
            box-shadow: 0 2px 12px rgba(100,180,220,0.1);
        }

        .sidebar-search-icon {
            color: var(--text-4);
            font-size: 14px;
        }

        .sidebar-search-input {
            flex: 1;
            border: none;
            background: transparent;
            padding: 11px 0;
            font-size: 13px;
            color: #2a5a78;
            outline: none;
        }

        .sidebar-search-input::placeholder { color: #b0d0e0; }

        .sidebar-search-clear {
            display: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: none;
            background: rgba(100,180,220,0.15);
            color: var(--text-3);
            font-size: 11px;
            cursor: pointer;
            align-items: center;
            justify-content: center;
        }

        .sidebar-search-clear.show { display: flex; }
        .sidebar-search-clear:hover { background: rgba(100,180,220,0.25); }

        .sidebar-actions {
            display: flex;
            gap: 8px;
            padding: 14px 20px;
            border-bottom: 1px solid rgba(100,180,220,0.08);
            flex-wrap: wrap;
        }

        .sidebar-action-btn {
            flex: 1;
            min-width: 70px;
            padding: 10px 12px;
            border-radius: 10px;
            border: 1px solid rgba(100,180,220,0.15);
            background: rgba(255,255,255,0.85);
            color: #3a7a9a;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        .sidebar-action-btn:hover {
            background: rgba(100,180,220,0.08);
            border-color: rgba(100,180,220,0.25);
            transform: translateY(-1px);
        }

        .sidebar-action-btn.primary {
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            border-color: transparent;
            color: #fff;
            font-weight: 500;
        }

        .sidebar-action-btn.primary:hover {
            background: linear-gradient(135deg, #4aa8c4, #2a8fb0);
            box-shadow: 0 4px 12px rgba(90,180,210,0.25);
        }

        .sidebar-tabs {
            display: flex;
            padding: 0 20px;
            gap: 4px;
            border-bottom: 1px solid rgba(100,180,220,0.08);
        }

        .sidebar-tab {
            padding: 12px 16px;
            background: none;
            border: none;
            color: var(--text-3);
            font-size: 13px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
        }

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

        .sidebar-tab.active {
            color: var(--accent-2);
            border-bottom-color: var(--accent-2);
        }

        .sidebar-list {
            flex: 1;
            overflow-y: auto;
            padding: 12px 16px;
        }

        .sidebar-list::-webkit-scrollbar { width: 5px; }
        .sidebar-list::-webkit-scrollbar-track { background: transparent; }
        .sidebar-list::-webkit-scrollbar-thumb {
            background: rgba(100,180,220,0.2);
            border-radius: 5px;
        }
        .sidebar-list::-webkit-scrollbar-thumb:hover {
            background: rgba(100,180,220,0.35);
        }

        .sidebar-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 50px 20px;
            text-align: center;
        }

        .sidebar-empty-icon {
            font-size: 48px;
            margin-bottom: 16px;
            opacity: 0.6;
        }

        .sidebar-empty-text {
            color: var(--text-3);
            font-size: 14px;
            margin-bottom: 20px;
        }

        .bookmark-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            border-radius: 14px;
            transition: all 0.2s;
            cursor: grab;
            background: rgba(255,255,255,0.7);
            margin-bottom: 8px;
            border: 1px solid rgba(100,180,220,0.08);
        }

        .bookmark-item:active { cursor: grabbing; }

        .bookmark-item:hover {
            background: rgba(255,255,255,0.95);
            border-color: var(--card-border);
            box-shadow: 0 4px 16px rgba(100,180,220,0.08);
            transform: translateX(-2px);
        }

        .bookmark-item.dragging {
            opacity: 0.4;
            background: rgba(100,180,220,0.15);
            transform: scale(0.98);
        }

        .bookmark-item.drag-over {
            border: 2px dashed var(--accent);
            background: rgba(90,180,210,0.08);
        }

        .bm-icon {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            overflow: hidden;
            background: linear-gradient(135deg, #e8f4f8, #d4eaf2);
            box-shadow: 0 2px 8px rgba(100,180,220,0.1);
        }

        .bm-icon img {
            width: 22px;
            height: 22px;
            object-fit: contain;
        }

        .bm-icon .icon-letter {
            width: 26px;
            height: 26px;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 700;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            text-shadow: 0 1px 2px rgba(0,0,0,0.15);
        }

        .bm-info {
            flex: 1;
            min-width: 0;
        }

        .bm-name {
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 3px;
            color: var(--text-1);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .bm-url {
            font-size: 11px;
            color: var(--text-3);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .bm-actions {
            display: flex;
            gap: 5px;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .bookmark-item:hover .bm-actions { opacity: 1; }

        .bm-act-btn {
            width: 30px;
            height: 30px;
            border-radius: 8px;
            border: none;
            background: rgba(100,180,220,0.1);
            color: var(--text-2);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            transition: all 0.15s;
        }

        .bm-act-btn:hover {
            background: rgba(100,180,220,0.2);
            color: #2a6080;
        }

        .bm-act-btn.del:hover {
            background: rgba(220,80,80,0.12);
            color: #d05050;
        }

        .drag-handle {
            color: #c0d8e8;
            font-size: 12px;
            cursor: grab;
            padding: 4px;
            transition: color 0.2s;
        }

        .bookmark-item:hover .drag-handle { color: #90c0d8; }

        .sync-section {
            padding: 16px 20px;
            border-top: 1px solid rgba(100,180,220,0.1);
            background: rgba(255,255,255,0.4);
        }

        .sync-title { font-size: 11px; color: var(--text-3); margin-bottom: 8px; font-weight: 500; }
        .sync-row { display: flex; gap: 6px; }

        .sync-input {
            flex: 1;
            padding: 10px 12px;
            background: rgba(255,255,255,0.9);
            border: 1px solid rgba(100,180,220,0.15);
            border-radius: 10px;
            color: #2a5a78;
            font-size: 11px;
            outline: none;
            font-family: monospace;
            transition: all 0.2s;
        }

        .sync-input:focus { border-color: rgba(80,160,210,0.35); background: #fff; }
        .sync-input::placeholder { color: #b0d0e0; }

        .sync-btn {
            padding: 10px 14px;
            border-radius: 10px;
            border: 1px solid rgba(100,180,220,0.15);
            background: rgba(255,255,255,0.85);
            color: #3a7a9a;
            font-size: 11px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .sync-btn:hover {
            background: rgba(100,180,220,0.1);
            border-color: rgba(100,180,220,0.25);
        }

        /* ===== 模态框 ===== */
        .modal-overlay {
            display: none;
            position: fixed; top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(28,58,78,0.28);
            backdrop-filter: blur(5px);
            z-index: 200;
            align-items: center;
            justify-content: center;
        }

        .modal-overlay.open { display: flex; }

        .modal {
            background: rgba(252,254,255,0.98);
            border: 1px solid var(--card-border);
            border-radius: 18px;
            padding: 26px;
            width: 90%;
            max-width: 400px;
            box-shadow: 0 16px 50px rgba(100,180,220,0.2);
            animation: modalIn 0.26s ease;
        }

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

        .modal-title { font-size: 16px; font-weight: 600; margin-bottom: 20px; color: var(--text-1); }

        .form-group { margin-bottom: 16px; }
        .form-label { display: block; font-size: 11px; color: var(--text-2); margin-bottom: 5px; }

        .form-input {
            width: 100%;
            padding: 11px 13px;
            background: rgba(255,255,255,0.9);
            border: 1px solid rgba(100,180,220,0.2);
            border-radius: 9px;
            color: #2a5a78;
            font-size: 13px;
            outline: none;
            transition: all 0.2s;
        }

        .form-input:focus { border-color: rgba(80,160,210,0.45); background: #fff; }
        .form-input::placeholder { color: var(--text-4); }
        .form-input:disabled { background: rgba(240,245,250,0.8); cursor: not-allowed; }

        .color-picker { display: flex; gap: 8px; flex-wrap: wrap; }

        .color-opt {
            width: 32px; height: 32px;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.18s;
        }

        .color-opt:hover { transform: scale(1.08); }
        .color-opt.sel { border-color: #3a7a9a; box-shadow: 0 0 0 2px rgba(58,122,154,0.15); }

        .modal-btns { display: flex; gap: 9px; margin-top: 24px; }

        .modal-btn {
            flex: 1;
            padding: 12px;
            border-radius: 10px;
            font-size: 13px;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
        }

        .modal-btn.cancel { background: rgba(100,180,220,0.1); color: var(--text-2); }
        .modal-btn.cancel:hover { background: var(--card-border); }

        .modal-btn.save {
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            color: #fff;
            font-weight: 500;
        }

        .modal-btn.save:hover {
            box-shadow: 0 7px 20px rgba(90,180,210,0.28);
            transform: translateY(-1px);
        }

        /* ===== Toast ===== */
        .toast {
            position: fixed;
            top: 26px;
            left: 50%;
            transform: translateX(-50%) translateY(-90px);
            background: rgba(28,68,95,0.92);
            color: #fff;
            padding: 12px 24px;
            border-radius: 11px;
            font-size: 12px;
            z-index: 500;
            pointer-events: none; /* 关键：隐藏提示条不得拦截鼠标 */
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 8px 26px rgba(28,68,95,0.2);
        }

        .toast.show { transform: translateX(-50%) translateY(0); }

        /* ===== 响应式 ===== */
        /* 手机端顶栏：真正两行 Grid（行1 主题/天气/用户，行2 工具居中），彻底不重叠 */
        @media (max-width: 760px) {
            /* v3.10.15：两侧轨道必须是 minmax(0, 1fr)，不能是 1fr。
               1fr 的隐含最小值是 auto —— 第二行那个横跨三列的工具药丸（min-content 327px）
               会被按比例分摊进两侧轨道，把整条顶栏的最小宽度顶到 375~381px：
               360/320 宽的手机因此整页横向溢出，右侧「📊」按钮与用户菜单被切掉，
               浏览器还会把整页缩到约 0.94 倍（用户看到的就是「工具栏很奇怪」）。
               minmax(0, 1fr) 允许轨道缩到 0，于是溢出压力交给下面几条「先缩谁」的规则。 */
            .top-bar {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
                grid-template-areas: "theme . meta" "tools tools tools";
                align-items: center;
                gap: 6px 8px;
                padding: 8px 10px;
                position: relative;
            }
            .top-bar-left { grid-area: theme; display: flex; align-items: center; }
            /* v3.10.15：这一行加上 min-width:0 —— 否则 .top-bar 这个两行 Grid 的最小宽度
               会被第二行（工具药丸）的 min-content 顶到 381px：360/320 宽的手机整页横向溢出，
               右侧「📊」和用户菜单被切掉、浏览器还会把整页缩到 0.94 倍（看起来就是「工具栏很奇怪」）。 */
            .top-bar-center { grid-area: tools; position: static; transform: none; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-width: 0; }
            /* v3.10.15：min-width:0 才能让这一格在窄屏真正缩下去（否则内容宽度顶住轨道）。 */
            .top-bar-right { grid-area: meta; display: flex; flex-direction: row; align-items: center; gap: 6px; position: relative; z-index: 5; min-width: 0; }
            #topBarUser { display: inline-flex; }
            #topBarUserM { display: none !important; }
            .theme-btn { width: 40px; height: 40px; font-size: 16px; border-radius: 10px; }
            /* v3.10.15：min-width:0 + flex-shrink:1 让药丸在窄屏**先自己横向滚**，
               而不是把整页撑宽；同时把内边距/间距收紧一点（42px 的按钮尺寸和点按目标不变），
               这样 360 宽也能一次看全 7 个按钮，320 宽才需要滑。 */
            .tools-pill { padding: 4px 6px; gap: 2px; display: flex; align-items: center; max-width: 100%; min-width: 0; flex-shrink: 1; overflow-x: auto; scrollbar-width: none; }
            .tools-pill::-webkit-scrollbar { display: none; }
            .tool-btn { width: 42px; height: 42px; font-size: 17px; border-radius: 12px; flex-shrink: 0; }
            .weather-mini { padding: 6px 12px; font-size: 13px; gap: 5px; border-radius: 11px; min-height: auto; white-space: nowrap; }
            .weather-mini span:first-child { font-size: 17px; }
            .weather-mini span:nth-child(2) { font-size: 13px; }
            .weather-mini span:nth-child(3) { display: none; }
            /* v3.10.15：窄屏「先缩天气、保住用户名」——天气胶囊可以一直缩到只剩图标
               （城市名的文字用省略号收尾），用户胶囊宽度保持不变、绝不裁用户名。 */
            .top-bar-right .weather-mini { flex: 0 1 auto; min-width: 0; overflow: hidden; padding: 6px 10px; }
            .top-bar-right .weather-mini span { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
            #topBarUser { min-width: 0; flex: 0 0 auto; }
            .user-btn { max-width: 100%; overflow: hidden; }
            .user-btn { padding: 6px 12px; font-size: 13px; border-radius: 11px; min-height: auto; white-space: nowrap; }
            /* ≤760px 顶栏是**流内**的两行 Grid（position: relative），不再是悬浮条，
               所以这里不需要 112px 去「让开」它 —— 那 112px 会变成时间上方的一整块空白。
               v3.10.14：降到 37px（原来 112px 的三分之一）。
               justify-content 也从 center 改成 flex-start：否则内容比屏幕矮时，
               居中留白会再往上叠一段（844 高的屏实测多出 37px），留白就不再是固定的一小块。 */
            .main { padding-top: 37px; justify-content: flex-start; }
        }

        @media (max-width: 600px) {
            /* 时间 */
            .time { font-size: 40px; }
            /* 手机端收起搜索历史入口（回到 display:none）：
               v3.10.9 曾把它显示在搜索框右端，实测它和「→」提交键重叠（🕐 x336-376 vs → x296-340），
               还把输入框挤到只剩 211px；这里收起，搜索框恢复完整宽度。桌面端不受影响（桌面 🕐 仍在搜索框右侧）。 */
            .history-btn { display: none; }

            /* 搜索框 */
            .search-wrapper { width: 100%; max-width: 100vw; padding: 0 8px; }
            .search-box { border-radius: 28px; }
            .search-input { font-size: 16px; padding: 10px 8px; }
            .search-submit { padding: 0 14px; font-size: 16px; }
            .engine-btn { font-size: 12px; padding: 0 10px; }
            .engine-btn .arrow { display: none; }
            .engine-dropdown { min-width: 140px; font-size: 13px; }
            .engine-option { padding: 10px 14px; font-size: 13px; }
            .search-suggest { max-height: 240px; }

            /* 名言 */
            .quote-section { padding: 0 14px; }
            .quote-text { font-size: 12px; }
            .quote-author { font-size: 11px; }

            /* 便签 */
            .notes-section { width: calc(100% - 16px); max-width: 100%; }
            .notes-textarea { font-size: 14px; min-height: 60px; }

            /* Dock：书签多时横向滚动，不溢出 */
            .dock { gap: 4px; padding: 6px 10px; border-radius: 18px; max-width: calc(100vw - 16px); overflow-x: auto; scrollbar-width: none; }
            .dock::-webkit-scrollbar { display: none; }
            .dock-item { width: 44px; height: 44px; border-radius: 11px; }
            .dock-item .shortcut-hint { display: none; }
            .dock-separator { margin: 0 2px; }

            /* 主区域：顶部留白 37px（原来 112px 的三分之一，v3.10.14）；底部 130px 给 dock 让位 */
            .main { padding: 37px 8px 130px 8px; }

            /* 倒计时 */
            .countdown-card { font-size: 12px; padding: 6px 12px; gap: 4px; }
            .countdown-icon { font-size: 16px; }

            /* 弹窗 */
            .modal-box { width: 92vw; padding: 28px 20px; border-radius: 16px; }
            .modal-box h3 { font-size: 17px; }
            .modal-box input { padding: 10px 12px; font-size: 16px; }
            .modal-box .btn { padding: 12px; font-size: 14px; }

            /* 侧边栏 */
            .sidebar { right: -100vw; width: 100vw; max-width: 100vw; border-radius: 20px 20px 0 0; }
            .sidebar.open { right: 0; }
            .sidebar-tab { padding: 8px 16px; font-size: 13px; }
            .bookmark-item { padding: 10px 12px; }
            .bm-icon { width: 40px; height: 40px; border-radius: 10px; font-size: 14px; }
            .bm-info .bm-name { font-size: 13px; }
            .bm-info .bm-url { font-size: 11px; }

            /* 面板 */
            .pomodoro-panel { width: 92vw; left: 4vw; right: auto; top: 50%; transform: translateY(-50%); border-radius: 16px; padding: 20px 16px; max-height: 86vh; }
            .pomodoro-timer { font-size: 36px; }
            .pomodoro-btns { gap: 6px; }

            /* Toast */
            .toast { padding: 10px 18px; font-size: 11px; border-radius: 8px; top: 18px; }
        }
        /* 手机端：打开待办/习惯/倒数日底部抽屉（桌面端隐藏，仅 ≤1100px 显示） */
        .mobile-widgets-fab { display: none; }
        /* 平板/手机：左侧小组件改为底部抽屉，FAB 打开 */
        @media (max-width: 1100px) {
            .left-sidebar {
                display: flex;
                position: fixed;
                left: 0; right: 0; top: auto; bottom: 0;
                width: 100%;
                transform: translateY(105%);
                flex-direction: row;
                align-items: stretch;
                gap: 10px;
                padding: 12px 10px 18px;
                background: rgba(252,254,255,0.96);
                backdrop-filter: blur(20px);
                border-radius: 18px 18px 0 0;
                border-top: 1px solid var(--card-border);
                box-shadow: 0 -8px 30px rgba(28,68,95,0.15);
                z-index: 150;
                overflow-x: auto;
                overflow-y: auto;
                max-height: 62vh;
                scrollbar-width: none;
                transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            }
            .left-sidebar::-webkit-scrollbar { display: none; }
            .left-sidebar.open { transform: translateY(0); }
            .left-sidebar .sidebar-widget { flex-shrink: 0; width: 260px; }
            /* 抽屉内多张卡片横排：保证云剪贴板小组件搬进来后宽度正常（v3.10.9） */
            .left-sidebar .clip-widget-list { max-height: 34vh; }

            /* 打开小组件抽屉的悬浮按钮（仅手机/平板显示，z-index 高于抽屉以便关闭） */
            .mobile-widgets-fab {
                display: flex;
                position: fixed;
                right: 14px;
                bottom: calc(84px + env(safe-area-inset-bottom, 0px));
                z-index: 165;
                width: 48px; height: 48px;
                border-radius: 50%;
                border: 1px solid rgba(255,255,255,0.4);
                background: linear-gradient(135deg, var(--accent), var(--accent-2));
                color: #fff;
                font-size: 20px;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                box-shadow: 0 6px 20px rgba(90,180,210,0.35);
                transition: transform 0.2s;
            }
            .mobile-widgets-fab:active { transform: scale(0.9); }
        }
        /* 平板（601-1100px）：去掉侧栏留白，内容区放宽 */
        @media (max-width: 1100px) and (min-width: 601px) {
            .main { padding-left: 20px; padding-right: 20px; }
        }

        /* ===== 弹窗通用 ===== */
        .modal-overlay {
            display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.3); z-index: 9999; align-items: center; justify-content: center;
            backdrop-filter: blur(4px);
        }
        .modal-overlay.show { display: flex; }
        .modal-box {
            background: rgba(255,255,255,0.96); border-radius: 20px; padding: 36px 32px;
            width: 340px; box-shadow: 0 20px 60px rgba(0,0,0,0.12);
            border: 1px solid rgba(100,180,220,0.2); position: relative;
        }
        .modal-box h3 { text-align: center; color: var(--text-1); margin-bottom: 4px; font-size: 20px; }
        .modal-box .sub { text-align: center; color: var(--text-3); font-size: 12px; margin-bottom: 20px; }
        .modal-box input {
            width: 100%; padding: 11px 14px; border: 1px solid rgba(100,180,220,0.25);
            border-radius: 10px; font-size: 14px; outline: none; margin-bottom: 10px;
            background: rgba(255,255,255,0.9); color: var(--text-1);
        }
        .modal-box input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91,184,212,0.12); }
        .modal-box .btn {
            width: 100%; padding: 12px; background: linear-gradient(135deg,var(--accent),var(--accent-2));
            border: none; border-radius: 10px; color: #fff; font-size: 15px; font-weight: 600;
            cursor: pointer; transition: all .2s;
        }
        .modal-box .btn:hover { box-shadow: 0 6px 20px rgba(90,180,210,0.3); }
        .modal-box .close-btn {
            position: absolute; top: 10px; right: 14px; border: none; background: none;
            font-size: 18px; color: var(--text-4); cursor: pointer;
        }
        .modal-box .err { color: #c0392b; font-size: 12px; text-align: center; margin-bottom: 8px; min-height: 16px; }
        .modal-box .switch-link { text-align: center; margin-top: 12px; font-size: 12px; color: var(--text-3); cursor: pointer; }
        .modal-box .switch-link:hover { color: var(--accent); }

        /* ===== 动效系统 ===== */
        body { transition: background .5s ease, color .3s ease; }

        /* 页面加载序列
           默认即最终态（opacity:1 / 无位移），动画只在「系统未要求减少动态效果」时接管。
           这样即使动画被系统设置、省电模式或旧浏览器禁用，首页主体也不会永久空白。 */
        .main>*{opacity:1;transform:none;}
        @media (prefers-reduced-motion: no-preference){
            .main>*{opacity:0;transform:translateY(12px);animation:fadeUp .4s ease forwards;}
            .main>*:nth-child(1){animation-delay:.05s}.main>*:nth-child(2){animation-delay:.1s}
            .main>*:nth-child(3){animation-delay:.15s}.main>*:nth-child(4){animation-delay:.2s}
            .main>*:nth-child(5){animation-delay:.25s}.main>*:nth-child(6){animation-delay:.3s}
            .main>*:nth-child(7){animation-delay:.35s}
        }
        @keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

        /* 弹窗动画 */
        .modal-overlay.show,.modal-overlay.open{
            display:flex;animation:modalIn .25s ease;
        }
        @keyframes modalIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
        .modal-box{animation:boxIn .3s cubic-bezier(.34,1.56,.64,1);}
        @keyframes boxIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

        /* 按钮点击 */
        .tool-btn:active,.theme-btn:active{transform:scale(.88);transition:transform .1s;}

        /* 云剪贴板列表行 */
        .cliph-row { border: 1px solid var(--card-border); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; background: rgba(255,255,255,0.45); }
        .cliph-content { font-size: 12px; color: var(--text-1); word-break: break-all; user-select: text; line-height: 1.5; }
        .cliph-ops { display: flex; align-items: center; gap: 6px; justify-content: flex-end; margin-top: 6px; }
        .cliph-content { cursor: pointer; transition: color .15s; }
        .cliph-content:hover { color: var(--accent); }

        /* ===== 云剪贴板：右侧常驻小组件 ===== */
        .clipw-input { display: flex; align-items: center; gap: 6px; }
        .clipw-input input { flex: 1; min-width: 0; }
        .clipw-push { flex: none; border: none; cursor: pointer; font-size: 12px; padding: 7px 12px; border-radius: 10px;
            background: var(--accent); color: #fff; transition: opacity .15s; }
        .clipw-push:hover { opacity: .88; }
        /* 常驻但自身可滚动：列表最高 190px，超出在里面滑（外栏也能滑） */
        #clipWidgetList.clip-widget-list { max-height: 190px; overflow-y: auto; overscroll-behavior: contain; }
        .clipw-row { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; margin-bottom: 4px;
            background: rgba(255,255,255,0.5); transition: background .15s; }
        .clipw-row:hover { background: rgba(100,180,220,0.12); }
        .clipw-main { flex: 1; min-width: 0; cursor: pointer; }  /* 点正文=复制全文 */
        .clipw-text { font-size: 12px; color: var(--text-1); line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .clipw-time { font-size: 10px; color: var(--text-4); margin-top: 3px; }
        .clipw-detail { flex: none; border: 1px solid var(--card-border); background: transparent; color: var(--text-3);
            font-size: 11px; padding: 4px 9px; border-radius: 8px; cursor: pointer; transition: color .15s, border-color .15s; }
        .clipw-detail:hover { color: var(--accent); border-color: var(--accent); }
        .clipw-more { font-size: 11px; color: var(--accent); text-align: center; padding: 7px 0 2px; cursor: pointer; }
        .clipw-more:hover { text-decoration: underline; }
        .clipw-empty { font-size: 12px; color: var(--text-4); text-align: center; padding: 8px 0; }

        /* ===== 云剪贴板：详情（长文可滚动） ===== */
        .clip-panel { text-align: left; width: min(92vw, 520px); }
        .clip-panel .pomodoro-title { text-align: center; }
        #clipHomeList.clip-scroll { margin-top: 14px; max-height: 44vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
        .clip-detail-meta { font-size: 11px; color: var(--text-4); text-align: right; margin: 10px 2px 6px; }
        .clip-detail-body { font-size: 13px; line-height: 1.6; color: var(--text-1); white-space: pre-wrap; word-break: break-word;
            user-select: text; text-align: left; padding: 12px; border: 1px solid var(--card-border); border-radius: 12px;
            background: rgba(255,255,255,0.5); max-height: 40vh; overflow-y: auto; overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch; }

        .weather-mini:active,.user-btn:active{transform:scale(.95);}


        /* 倒数日重复/农历选项 */
        .cd-opts { display: flex; gap: 14px; padding: 4px 2px 0; }
        .cd-opt { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-3); cursor: pointer; user-select: none; }
        .cd-opt input { accent-color: var(--accent); }
        .cd-rep { font-size: 10px; margin-left: 3px; opacity: .8; }

        /* 命令面板 Ctrl+K */
        .cmdk-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(20,40,60,.35); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: none; }
        .cmdk-overlay.show { display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
        .cmdk-box { width: min(560px, 92vw); background: var(--card-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: 0 20px 60px rgba(20,60,90,.28); overflow: hidden; }
        .cmdk-box input { width: 100%; border: none; outline: none; background: transparent; padding: 16px 18px; font-size: 15px; color: var(--text-1); box-sizing: border-box; }
        .cmdk-list { max-height: 320px; overflow-y: auto; border-top: 1px solid var(--card-border); }
        .cmdk-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; }
        .cmdk-item.active { background: rgba(91,184,212,.16); }
        .cmdk-item .ci { width: 20px; text-align: center; }
        .cmdk-item .cl { flex: 1; font-size: 13px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .cmdk-item .cs { font-size: 11px; color: var(--text-4); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .cmdk-empty { padding: 18px; text-align: center; color: var(--text-4); font-size: 13px; }
        .cmdk-hint { padding: 8px 16px; border-top: 1px solid var(--card-border); font-size: 11px; color: var(--text-4); }

        /* 卡片悬停增强 */
        .countdown-card{transition:all .3s ease;padding:10px 18px;border-radius:16px;border:1px solid var(--card-border);background:var(--card-bg);display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--text-1);}
        .countdown-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(100,180,220,.15);}
        .countdown-icon{font-size:20px;}

        /* 名言淡入 */
        .quote-text{transition:opacity .3s;}

        /* Toast 动画 */
        #toast{pointer-events:none;transition:all .35s cubic-bezier(.4,0,.2,1);opacity:0;transform:translateX(-50%) translateY(10px);}
        #toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

        /* 搜索框聚焦 */
        .search-box{transition:all .25s ease;}
        .search-box:focus-within{transform:translateY(-2px);box-shadow:0 8px 30px rgba(100,180,220,.2);}

        /* 便签动画 */
        .notes-textarea{transition:border-color .25s,box-shadow .25s;resize:none;}

        /* 滚动条美化 */
        ::-webkit-scrollbar{width:6px}
        ::-webkit-scrollbar-track{background:transparent}
        ::-webkit-scrollbar-thumb{background:var(--text-4);border-radius:3px}
        ::-webkit-scrollbar-thumb:hover{background:var(--text-3)}

        /* 侧边栏滑动优化 */
        .left-sidebar{transition:transform .25s cubic-bezier(.4,0,.2,1);}

        /* ===== 无障碍：尊重系统「减少动态效果」=====
           开启后所有动画一次性跳到终态、过渡几乎瞬时；配合上面的默认可见，
           即使动画被禁用首页也保持完整可读。 */
        @media (prefers-reduced-motion: reduce) {
            *,*::before,*::after{
                animation-duration:.01ms!important;
                animation-iteration-count:1!important;
                transition-duration:.01ms!important;
                scroll-behavior:auto!important;
            }
            .main>*{opacity:1!important;transform:none!important;}
        }
    


/* ===== 手机端适配（v3.10.9 文本控件 16px 兜底）：iOS 聚焦不放大页面 ===== */
@media (max-width: 600px) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
    textarea, select { font-size: 16px !important; }
}