/* 暗色模式 */
        /* ================================================================
           暗色模式（跟随系统设置）
           通过重新定义 :root 变量来切换全站颜色，
           并覆盖部分需要特殊处理的复杂属性（渐变、阴影等）。
           内含移动端暗色子规则。
           ================================================================ */
        @media (prefers-color-scheme: dark) {
            :root {
                --primary-color: #818cf8;
                --accent-color: #a78bfa;
                --text-color: #e0e0e0;
                --text-secondary: #aaa;
                --text-tertiary: #888;
                --heading-color: #c8d6e5;
                --label-color: #b0b8c4;
                --text-muted: #999;
                --input-bg: rgba(255, 255, 255, 0.08);
                --card-bg-solid: rgba(30, 30, 50, 0.92);
                --card-accent-bg: rgba(118, 75, 162, 0.12);
                --btn-hover-bg: #3a3a52;
                --overlay-bg: rgba(255, 255, 255, 0.06);
                --glass-bg: rgba(30, 30, 50, 0.75);
                --glass-border: rgba(255, 255, 255, 0.08);
                --surface-color: #2a2a3e;
                --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
            }
            body {
                background: linear-gradient(135deg, #0a0a14 0%, #0d1117 50%, #0a0f1e 100%);
            }
            .mode-select {
                background: var(--overlay-bg);
            }
            input[type="date"], input[type="number"], input[type="text"] {
                background: var(--input-bg);
                color: var(--text-color);
                border-color: rgba(255,255,255,0.12);
            }
            input:focus {
                background: rgba(255, 255, 255, 0.14);
            }
            .result {
                background: linear-gradient(135deg, rgba(40,40,60,0.9), rgba(30,30,50,0.7));
                border-color: rgba(255,255,255,0.1);
                box-shadow: inset 0 2px 10px rgba(0,0,0,0.3);
            }
            .checkbox-group {
                background: rgba(255,255,255,0.05);
            }
            .stepper-btn {
                background: rgba(255, 255, 255, 0.08);
                border-color: rgba(129, 140, 248, 0.28);
                color: var(--primary-color);
            }
            .stepper-btn:hover {
                background: rgba(129, 140, 248, 0.18);
                border-color: var(--primary-color);
                color: #d8dafe;
            }
            .btn-reset {
                background: var(--surface-color);
                color: var(--text-secondary);
                border-color: rgba(255,255,255,0.1);
            }
            .btn-reset:hover {
                background: var(--btn-hover-bg);
                color: var(--text-color);
            }
            .helper-text {
                color: #888;
            }
            .ts-time-display {
                color: #999;
            }
            .range-hint {
                color: var(--warning-color);
            }
            .help-toggle {
                background: rgba(255,255,255,0.1);
                border-color: rgba(102, 126, 234, 0.25);
            }
            @supports not (backdrop-filter: blur(1px)) {
                .container,
                .help-panel {
                    background: rgba(30, 30, 50, 0.95);
                }
            }

            /* 移动端暗色模式：覆盖移动端硬编码的亮色背景 */
            @media screen and (max-width: 600px) {
                .container {
                    backdrop-filter: none;
                    -webkit-backdrop-filter: none;
                    background: var(--card-bg-solid);
                }
                .theme-switch-row {
                    backdrop-filter: none;
                    -webkit-backdrop-filter: none;
                    background: transparent;
                }
                .help-panel {
                    backdrop-filter: none;
                    -webkit-backdrop-filter: none;
                    background: var(--card-bg-solid);
                }
            }

            /* 暗色模式补充：分隔线 */
            .live-clock {
                background: rgba(255,255,255,0.06);
            }
            .live-clock .clock-sep {
                background: rgba(255,255,255,0.15);
            }
            .result-divider {
                border-top: 1px solid rgba(255, 255, 255, 0.1);
            }
            .ts-now-section {
                border-top-color: rgba(255, 255, 255, 0.1);
            }
            .math-history-panel {
                border-top-color: rgba(255, 255, 255, 0.1);
            }
        }

        /* 减弱动画偏好 */
        /* ================================================================
           减弱动画偏好（无障碍）
           当用户在系统中开启"减弱动态效果"时，
           禁用所有动画和过渡。
           ================================================================ */
        @media (prefers-reduced-motion: reduce) {
            .blob,
            .blob::before,
            .blob::after {
                animation: none !important;
            }
            .section,
            .result {
                animation: none !important;
            }
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }


        /* ================================================================
           强制主题模式（通过 data-theme 属性覆盖系统偏好）
           ================================================================ */
        /* 强制暗色 */
        html[data-theme="dark"] {
            --primary-color: #818cf8;
            --accent-color: #a78bfa;
            --text-color: #e0e0e0;
            --text-secondary: #aaa;
            --text-tertiary: #888;
            --heading-color: #c8d6e5;
            --label-color: #b0b8c4;
            --text-muted: #999;
            --input-bg: rgba(255, 255, 255, 0.08);
            --card-bg-solid: rgba(30, 30, 50, 0.92);
            --card-accent-bg: rgba(118, 75, 162, 0.12);
            --btn-hover-bg: #3a3a52;
            --overlay-bg: rgba(255, 255, 255, 0.06);
            --glass-bg: rgba(30, 30, 50, 0.75);
            --glass-border: rgba(255, 255, 255, 0.08);
            --surface-color: #2a2a3e;
            --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
        }
        html[data-theme="dark"] body {
            background: linear-gradient(135deg, #0a0a14 0%, #0d1117 50%, #0a0f1e 100%);
        }
        html[data-theme="dark"] .mode-select {
            background: var(--overlay-bg);
        }
        html[data-theme="dark"] input[type="date"],
        html[data-theme="dark"] input[type="number"],
        html[data-theme="dark"] input[type="text"] {
            background: var(--input-bg);
            color: var(--text-color);
            border-color: rgba(255,255,255,0.12);
        }
        html[data-theme="dark"] input:focus {
            background: rgba(255, 255, 255, 0.14);
        }
        html[data-theme="dark"] .result {
            background: linear-gradient(135deg, rgba(40,40,60,0.9), rgba(30,30,50,0.7));
            border-color: rgba(255,255,255,0.1);
            box-shadow: inset 0 2px 10px rgba(0,0,0,0.3);
        }
        html[data-theme="dark"] .checkbox-group {
            background: rgba(255,255,255,0.05);
        }
        html[data-theme="dark"] .stepper-btn {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(129, 140, 248, 0.28);
            color: var(--primary-color);
        }
        html[data-theme="dark"] .stepper-btn:hover {
            background: rgba(129, 140, 248, 0.18);
            border-color: var(--primary-color);
            color: #d8dafe;
        }
        html[data-theme="dark"] .btn-reset {
            background: var(--surface-color);
            color: var(--text-secondary);
            border-color: rgba(255,255,255,0.1);
        }
        html[data-theme="dark"] .btn-reset:hover {
            background: var(--btn-hover-bg);
            color: var(--text-color);
        }
        html[data-theme="dark"] .helper-text {
            color: #888;
        }
        html[data-theme="dark"] .ts-time-display {
            color: #999;
        }
        html[data-theme="dark"] .help-toggle {
            background: rgba(255,255,255,0.1);
            border-color: rgba(102, 126, 234, 0.25);
        }
        html[data-theme="dark"] .help-toggle.open {
            background: var(--primary-color);
            color: #fff;
        }
        /* 实时时钟暗色适配 */
        html[data-theme="dark"] .live-clock {
            background: rgba(255,255,255,0.06);
        }
        html[data-theme="dark"] .live-clock .clock-sep {
            background: rgba(255,255,255,0.15);
        }
        html[data-theme="dark"] .theme-auto-text {
            color: #999;
        }
        html[data-theme="dark"] .theme-auto-label input:checked + .theme-auto-text {
            color: var(--primary-color);
        }
        html[data-theme="dark"] .result-divider {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        html[data-theme="dark"] .ts-now-section {
            border-top-color: rgba(255, 255, 255, 0.1);
        }
        html[data-theme="dark"] .math-history-panel {
            border-top-color: rgba(255, 255, 255, 0.1);
        }


        /* 移动端强制主题：覆盖亮/暗模式的毛玻璃背景 */
        @media screen and (max-width: 600px) {
            html[data-theme="dark"] .container,
            html[data-theme="dark"] .theme-switch-row,
            html[data-theme="dark"] .help-panel {
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }
            html[data-theme="dark"] .container,
            html[data-theme="dark"] .help-panel {
                background: var(--card-bg-solid);
            }
            html[data-theme="dark"] .theme-switch-row {
                background: transparent;
            }
            html[data-theme="light"] .container,
            html[data-theme="light"] .theme-switch-row,
            html[data-theme="light"] .help-panel {
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }
            html[data-theme="light"] .container,
            html[data-theme="light"] .help-panel {
                background: var(--card-bg-solid);
            }
            html[data-theme="light"] .theme-switch-row {
                background: transparent;
            }
        }

        /* 强制亮色（覆盖系统暗色偏好） */
        html[data-theme="light"] {
            --primary-color: #667eea;
            --accent-color: #764ba2;
            --text-color: #333;
            --text-secondary: #666;
            --text-tertiary: #888;
            --heading-color: #2c3e50;
            --label-color: #444;
            --text-muted: #555;
            --input-bg: rgba(255, 255, 255, 0.8);
            --card-bg-solid: rgba(255, 255, 255, 0.9);
            --card-accent-bg: rgba(118, 75, 162, 0.08);
            --btn-hover-bg: #f1f1f1;
            --overlay-bg: rgba(255, 255, 255, 0.5);
            --glass-bg: rgba(255, 255, 255, 0.7);
            --glass-border: rgba(255, 255, 255, 0.5);
            --surface-color: #fff;
            --shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
        }
        html[data-theme="light"] body {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
        }
        html[data-theme="light"] .mode-select {
            background: var(--overlay-bg);
        }
        html[data-theme="light"] input[type="date"],
        html[data-theme="light"] input[type="number"],
        html[data-theme="light"] input[type="text"] {
            background: var(--input-bg);
            color: var(--text-color);
            border-color: rgba(255,255,255,0.6);
        }
        html[data-theme="light"] input:focus {
            background: var(--surface-color);
        }
        html[data-theme="light"] .result {
            background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6));
            border-color: rgba(255,255,255,0.8);
            box-shadow: inset 0 2px 10px rgba(255,255,255,0.5);
        }
        html[data-theme="light"] .checkbox-group {
            background: rgba(255,255,255,0.4);
        }
        html[data-theme="light"] .stepper-btn {
            background: rgba(255,255,255,0.36);
            border-color: rgba(102, 126, 234, 0.25);
            color: var(--accent-color);
        }
        html[data-theme="light"] .stepper-btn:hover {
            background: var(--surface-color);
            border-color: var(--primary-color);
            color: var(--primary-color);
        }
        html[data-theme="light"] .btn-reset {
            background: var(--surface-color);
            color: var(--text-secondary);
            border-color: rgba(0,0,0,0.1);
        }
        html[data-theme="light"] .btn-reset:hover {
            background: var(--btn-hover-bg);
            color: var(--text-color);
        }
        html[data-theme="light"] .helper-text {
            color: var(--text-secondary);
        }
        html[data-theme="light"] .ts-time-display {
            color: var(--text-secondary);
        }
        html[data-theme="light"] .help-toggle {
            background: rgba(255,255,255,0.75);
            border-color: rgba(102, 126, 234, 0.35);
        }
        html[data-theme="light"] .help-toggle.open {
            background: var(--primary-color);
            color: #fff;
        }
        html[data-theme="light"] .live-clock {
            background: rgba(255,255,255,0.35);
        }
        html[data-theme="light"] .live-clock .clock-sep {
            background: rgba(0,0,0,0.15);
        }
        html[data-theme="light"] .theme-auto-text {
            color: var(--text-secondary);
        }
        html[data-theme="light"] .theme-auto-label input:checked + .theme-auto-text {
            color: var(--primary-color);
        }
        html[data-theme="light"] .result-divider {
            border-top: 1px solid rgba(0,0,0,0.1);
        }
        html[data-theme="light"] .ts-now-section {
            border-top-color: rgba(0,0,0,0.1);
        }
        html[data-theme="light"] .math-history-panel {
            border-top-color: rgba(0,0,0,0.1);
        }