/* ============================================================
   主题系统 theme.css
   - 通过 <html data-theme="dark"|"light"> 切换全站配色
   - 默认暗色主题，与现有风格一致；亮色主题通过更高优先级覆盖变量
   - 加载时机：在 common.css 之后、页面内联样式之前
   ============================================================ */

/* ---------- 亮色主题：变量反转 ---------- */
/* 首页变量 (index.html 的 :root 集合) */
html[data-theme="light"] {
    --bg-deep: #e9eef6;
    --bg-primary: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.92);
    --bg-card-hover: rgba(255, 255, 255, 1);
    --bg-surface: rgba(241, 245, 249, 0.92);
    --bg-input: rgba(226, 232, 240, 0.7);
    --border-subtle: rgba(99, 102, 241, 0.24);
    --border-glow: rgba(99, 102, 241, 0.4);
    --border-light: rgba(15, 23, 42, 0.1);
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --accent: #6366f1;
    --accent-light: #4f46e5;
    --accent-glow: rgba(99, 102, 241, 0.25);
    --cyan-glow: rgba(6, 182, 212, 0.18);
    --emerald-glow: rgba(16, 185, 129, 0.18);
    --purple-glow: rgba(139, 92, 246, 0.18);
    --rose-glow: rgba(244, 63, 94, 0.16);
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 8px 30px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.1);
    --shadow-xl: 0 32px 80px rgba(15, 23, 42, 0.14);
    --shadow-glow-sm: 0 0 20px rgba(99, 102, 241, 0.14);
    --shadow-glow-md: 0 0 40px rgba(99, 102, 241, 0.18);
    --shadow-glow-lg: 0 0 60px rgba(99, 102, 241, 0.22);
}

/* 工具页面变量 (tool-base.css 的 --tool-* 集合) */
html[data-theme="light"] {
    --tool-bg-deep: #e9eef6;
    --tool-bg-primary: #ffffff;
    --tool-bg-card: rgba(255, 255, 255, 0.92);
    --tool-bg-card-hover: #ffffff;
    --tool-bg-surface: rgba(241, 245, 249, 0.92);
    --tool-bg-input: rgba(255, 255, 255, 0.85);
    --tool-border-subtle: rgba(99, 102, 241, 0.24);
    --tool-border-light: rgba(15, 23, 42, 0.1);
    --tool-border-input: rgba(15, 23, 42, 0.14);
    --tool-text-primary: #0f172a;
    --tool-text-secondary: #475569;
    --tool-text-muted: #5b6b82;
    --tool-accent: #6366f1;
    --tool-accent-light: #4f46e5;
    --tool-accent-glow: rgba(99, 102, 241, 0.25);
    --tool-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --tool-shadow-md: 0 8px 30px rgba(15, 23, 42, 0.08);
    --tool-shadow-glow: 0 0 20px rgba(99, 102, 241, 0.16);
}

/* common.css 设计变量 */
html[data-theme="light"] {
    --background-color: #e9eef6;
    --card-background: #ffffff;
    --dark-color: #0f172a;
    --gray-color: #475569;
}

/* ---------- 页面基础 ---------- */
html[data-theme="light"] body,
html[data-theme="light"] .tool-page-body {
    background: var(--bg-deep, var(--tool-bg-deep, #e9eef6));
    color: var(--text-primary, var(--tool-text-primary, #0f172a));
}

html[data-theme="light"] .tool-page-body {
    background: var(--tool-bg-deep);
}

/* ---------- 亮色主题：公共组件反转 ---------- */
/* 工具页公共小组件（tool-base.css 中固化的暗色背景） */
html[data-theme="light"] .result-area {
    background: rgba(6, 182, 212, 0.07);
    border-color: rgba(6, 182, 212, 0.25);
    color: #0e7490;
}

html[data-theme="light"] .css-code {
    background: rgba(241, 245, 249, 0.9);
    border-color: rgba(15, 23, 42, 0.1);
    color: #047857;
}

html[data-theme="light"] .tab-btn {
    border-color: rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .tab-btn.active {
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(99, 102, 241, 0.35);
    color: var(--accent-light, #4f46e5);
}

html[data-theme="light"] .copy-btn-small {
    background: rgba(241, 245, 249, 0.8);
    border-color: rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .color-input {
    border-color: rgba(15, 23, 42, 0.2);
}

html[data-theme="light"] .tool-panel {
    background: var(--tool-bg-card);
}

/* 亮色主题：辅助语义色加深，保证白底可读性 */
html[data-theme="light"] {
    --tool-cyan: #0e7490;
    --tool-emerald: #047857;
    --tool-rose: #be123c;
    --tool-amber: #b45309;
}

html[data-theme="light"] .section-title { color: #334155; }

html[data-theme="light"] .go-back { color: #1d4ed8; }

html[data-theme="light"] .format-label { color: #4f46e5; }

html[data-theme="light"] .file-bar {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.28);
    color: #047857;
}

html[data-theme="light"] .file-bar .btn-change {
    color: #4f46e5;
}

/* ---------- 亮色主题：工具页通用组件兜底 ---------- */
html[data-theme="light"] .tool-panel input,
html[data-theme="light"] .tool-panel textarea,
html[data-theme="light"] .tool-panel select {
    color: #0f172a;
}

html[data-theme="light"] .tool-panel input::placeholder,
html[data-theme="light"] .tool-panel textarea::placeholder {
    color: #94a3b8;
}

html[data-theme="light"] .tool-panel select option {
    background: #ffffff;
    color: #0f172a;
}

html[data-theme="light"] .upload-area {
    background: rgba(241, 245, 249, 0.72);
    border-color: rgba(15, 23, 42, 0.16);
}

html[data-theme="light"] .upload-area:hover {
    background: rgba(238, 242, 255, 0.8);
    border-color: rgba(99, 102, 241, 0.45);
}

html[data-theme="light"] .upload-area p,
html[data-theme="light"] .upload-area .hint,
html[data-theme="light"] .upload-hint {
    color: #5b6b82;
}

html[data-theme="light"] .upload-area p[style*="#64748b"],
html[data-theme="light"] .upload-area p[style*="rgb(100, 116, 139)"] {
    color: #5b6b82 !important;
}

html[data-theme="light"] .option-item label,
html[data-theme="light"] .option-row label,
html[data-theme="light"] .form-group label,
html[data-theme="light"] .form-item label,
html[data-theme="light"] .field label,
html[data-theme="light"] .section-label,
html[data-theme="light"] .pane-label,
html[data-theme="light"] .stats,
html[data-theme="light"] .stats-bar,
html[data-theme="light"] .loading-overlay,
html[data-theme="light"] .info-box {
    color: #475569;
}

html[data-theme="light"] .file-card .file-info,
html[data-theme="light"] .result-card .lbl,
html[data-theme="light"] .info-card .info-label {
    color: #64748b;
}

html[data-theme="light"] .result-card .rc-name,
html[data-theme="light"] .info-card .info-value {
    color: #0f172a;
}

html[data-theme="light"] .mode-tab,
html[data-theme="light"] .diff-tab,
html[data-theme="light"] .eq-type-tab,
html[data-theme="light"] .cat-tab {
    color: #475569;
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(241, 245, 249, 0.7);
}

html[data-theme="light"] .mode-tab.active,
html[data-theme="light"] .diff-tab.active,
html[data-theme="light"] .eq-type-tab.active,
html[data-theme="light"] .cat-tab.active {
    color: #4338ca;
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(99, 102, 241, 0.4);
}

html[data-theme="light"] .eq-formula,
html[data-theme="light"] .step {
    background: rgba(241, 245, 249, 0.9);
    color: #1e293b;
    border-color: rgba(15, 23, 42, 0.1);
}

html[data-theme="light"] .final-answer {
    color: #047857;
    background: rgba(16, 185, 129, 0.1);
}

html[data-theme="light"] .preview-content h1,
html[data-theme="light"] .preview-content h2,
html[data-theme="light"] .preview-content h3 {
    color: #0f172a;
    border-bottom-color: rgba(15, 23, 42, 0.1);
}

html[data-theme="light"] .preview-content blockquote {
    color: #475569;
}

html[data-theme="light"] .toolbar button {
    background: rgba(241, 245, 249, 0.9);
    border-color: rgba(15, 23, 42, 0.12);
    color: #334155;
}

html[data-theme="light"] .toolbar button:hover {
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
}

/* 亮色主题：兜底页面内联的浅色文字（各工具页大量使用 style="color:#94a3b8"）
   注意：浏览器/Vue 会把内联十六进制色序列化成 rgb() 形式，两种写法都要覆盖 */
html[data-theme="light"] .tool-page-body [style*="color:#94a3b8"],
html[data-theme="light"] .tool-page-body [style*="color: #94a3b8"],
html[data-theme="light"] .tool-page-body [style*="color: rgb(148, 163, 184)"],
html[data-theme="light"] .tool-page-body [style*="color:rgb(148,163,184)"] {
    color: #475569 !important;
}

html[data-theme="light"] .tool-page-body [style*="color:#cbd5e1"],
html[data-theme="light"] .tool-page-body [style*="color: #cbd5e1"],
html[data-theme="light"] .tool-page-body [style*="color: rgb(203, 213, 225)"],
html[data-theme="light"] .tool-page-body [style*="color:rgb(203,213,225)"] {
    color: #334155 !important;
}

html[data-theme="light"] .tool-page-body [style*="color:#e2e8f0"],
html[data-theme="light"] .tool-page-body [style*="color: #e2e8f0"],
html[data-theme="light"] .tool-page-body [style*="color: rgb(226, 232, 240)"],
html[data-theme="light"] .tool-page-body [style*="color:rgb(226,232,240)"] {
    color: #1e293b !important;
}

html[data-theme="light"] .tool-page-body [style*="color:#f1f5f9"],
html[data-theme="light"] .tool-page-body [style*="color: #f1f5f9"],
html[data-theme="light"] .tool-page-body [style*="color:#f8fafc"],
html[data-theme="light"] .tool-page-body [style*="color: #f8fafc"],
html[data-theme="light"] .tool-page-body [style*="color: rgb(241, 245, 249)"],
html[data-theme="light"] .tool-page-body [style*="color:rgb(241,245,249)"],
html[data-theme="light"] .tool-page-body [style*="color: rgb(248, 250, 252)"],
html[data-theme="light"] .tool-page-body [style*="color:rgb(248,250,252)"] {
    color: #0f172a !important;
}

/* 浅紫/浅绿等强调色在白底上对比度不足 */
html[data-theme="light"] .tool-page-body [style*="color:#c7d2fe"],
html[data-theme="light"] .tool-page-body [style*="color: #c7d2fe"],
html[data-theme="light"] .tool-page-body [style*="color: rgb(199, 210, 254)"],
html[data-theme="light"] .tool-page-body [style*="color:rgb(199,210,254)"],
html[data-theme="light"] .tool-page-body [style*="color:#a5b4fc"],
html[data-theme="light"] .tool-page-body [style*="color: #a5b4fc"],
html[data-theme="light"] .tool-page-body [style*="color: rgb(165, 180, 252)"],
html[data-theme="light"] .tool-page-body [style*="color:rgb(165,180,252)"] {
    color: #4338ca !important;
}

html[data-theme="light"] .tool-page-body [style*="color:#6ee7b7"],
html[data-theme="light"] .tool-page-body [style*="color: #6ee7b7"],
html[data-theme="light"] .tool-page-body [style*="color: rgb(110, 231, 183)"],
html[data-theme="light"] .tool-page-body [style*="color:rgb(110,231,183)"] {
    color: #047857 !important;
}

/* ---------- 亮色主题：各工具页独有组件 ---------- */
/* 滑块标签/数值：border-gen / pattern-gen / shadow-gen */
html[data-theme="light"] .slider-label {
    color: #475569;
}

html[data-theme="light"] .slider-value {
    color: #4338ca;
}

/* BMI 单位切换 */
html[data-theme="light"] .unit-btn {
    color: #475569;
    border-color: rgba(15, 23, 42, 0.14);
    background: rgba(241, 245, 249, 0.8);
}

html[data-theme="light"] .unit-btn.active {
    color: #4338ca;
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(99, 102, 241, 0.4);
}

/* 世界时钟 */
html[data-theme="light"] .clock-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}
html[data-theme="light"] .clock-card:hover {
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
}
html[data-theme="light"] .clock-card .city-time { color: #0f172a; }

html[data-theme="light"] .clock-card .city-timezone,
html[data-theme="light"] .clock-card .city-date {
    color: #64748b;
}

html[data-theme="light"] .clock-card .city-ampm {
    color: #4f46e5;
}

html[data-theme="light"] .clock-card .city-name {
    color: #1e293b !important;
}

html[data-theme="light"] .time-format-toggle {
    background: rgba(241, 245, 249, 0.9);
    border-color: rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .time-format-toggle button {
    color: #475569;
}

html[data-theme="light"] .time-format-toggle button.active {
    background: rgba(99, 102, 241, 0.16);
    color: #4338ca;
    box-shadow: none;
}

/* 单位换算结果 */
html[data-theme="light"] .result-val {
    color: #0e7490;
}

html[data-theme="light"] .quick-ref h4 {
    color: #475569;
}

/* 图案生成器 / 阴影生成器 */
html[data-theme="light"] .pattern-btn {
    color: #475569;
    background: rgba(241, 245, 249, 0.7);
    border-color: rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .pattern-btn:hover {
    color: #4338ca;
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.3);
}

html[data-theme="light"] .pattern-btn.active {
    color: #4338ca;
    background: rgba(99, 102, 241, 0.14);
    border-color: #6366f1;
}

html[data-theme="light"] .layer-summary {
    color: #475569;
}

html[data-theme="light"] .side-check span {
    color: #475569;
}

/* 边框生成器预览区 */
html[data-theme="light"] .preview-box {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.28), rgba(6, 182, 212, 0.28));
    color: rgba(15, 23, 42, 0.55);
}

/* 二维码样式控制标签 */
html[data-theme="light"] .style-controls .ctrl label {
    color: #475569;
}

/* 语音合成 */
html[data-theme="light"] .voice-card .voice-lang {
    color: #475569;
}

html[data-theme="light"] .control-row label {
    color: #4338ca;
}

/* 琥珀色提示框（translate / screenshot） */
html[data-theme="light"] .note-box {
    color: #b45309;
}

html[data-theme="light"] .note-box p {
    color: #475569;
}

/* 调色板色值标签 */
html[data-theme="light"] .swatch-hex {
    background: #1e293b;
    color: #f8fafc;
}

/* 滤镜生成器 */
html[data-theme="light"] .preview-label,
html[data-theme="light"] .filter-label {
    color: #475569;
}

html[data-theme="light"] .filter-value {
    color: #4338ca;
}

/* 方程求解 */
html[data-theme="light"] .coeff-item label {
    color: #475569;
}

/* 录音计时器 / 日期计算分隔符 */
html[data-theme="light"] .timer-display {
    color: #0f172a;
}

html[data-theme="light"] .date-row .sep {
    color: #64748b;
}

/* 内联琥珀色文字 */
html[data-theme="light"] .tool-page-body [style*="color:#f59e0b"],
html[data-theme="light"] .tool-page-body [style*="color: #f59e0b"],
html[data-theme="light"] .tool-page-body [style*="color: rgb(245, 158, 11)"],
html[data-theme="light"] .tool-page-body [style*="color:rgb(245,158,11)"] {
    color: #b45309 !important;
}

/* 二维码格式切换 */
html[data-theme="light"] .format-tab {
    color: #475569;
    border-color: rgba(15, 23, 42, 0.14);
    background: rgba(241, 245, 249, 0.7);
}

html[data-theme="light"] .format-tab.active {
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(99, 102, 241, 0.4);
    color: #4338ca;
}

/* ---------- 亮色主题：滚动条 ---------- */
html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.3);
}

/* ============================================================
   Header 重新设计（覆盖 common.css 中的 header 样式）
   ============================================================ */
html[data-theme="dark"] header {
    background: rgba(8, 12, 26, 0.82);
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] header.scrolled {
    background: rgba(8, 12, 26, 0.94);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45);
}

html[data-theme="light"] header {
    background: rgba(255, 255, 255, 0.86);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 2px 20px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 6px 26px rgba(15, 23, 42, 0.1);
}

/* 导航链接配色随主题 */
html[data-theme="dark"] .nav-links a {
    color: #cbd5e1;
}

html[data-theme="dark"] .nav-links a:hover {
    color: #a5b4fc;
}

html[data-theme="dark"] .logo {
    color: #e2e8f0;
}

html[data-theme="light"] .nav-links a {
    color: #0f172a;
}

html[data-theme="light"] .nav-links a:hover {
    color: var(--accent, #4f46e5);
}

html[data-theme="light"] .logo {
    color: var(--accent, #4f46e5);
}

/* ---------- 主题切换按钮 ---------- */
.nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(99, 102, 241, 0.3);
    background: rgba(99, 102, 241, 0.1);
    color: var(--accent-light, #818cf8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.theme-toggle:hover {
    transform: rotate(20deg) scale(1.08);
    box-shadow: 0 0 18px rgba(99, 102, 241, 0.4);
    border-color: rgba(99, 102, 241, 0.5);
}

html[data-theme="light"] .theme-toggle {
    background: rgba(99, 102, 241, 0.14);
}

/* 登录按钮在亮/暗主题下可见 */
.user-actions {
    opacity: 1;
}

/* ---------- 亮色主题：Footer 反转 ---------- */
html[data-theme="light"] footer.site-footer,
html[data-theme="light"] footer {
    background: #e9eef6 !important;
    color: rgba(15, 23, 42, 0.85) !important;
    --dark-color: #e9eef6;
}

html[data-theme="light"] .footer-logo {
    filter: none;
    opacity: 1;
}

html[data-theme="light"] .footer-title { color: #0f172a !important; }
html[data-theme="light"] .footer-desc { color: rgba(15, 23, 42, 0.72); }

html[data-theme="light"] .footer-heading,
html[data-theme="light"] .footer-section h3 { color: #0f172a !important; }

html[data-theme="light"] .footer-links a,
html[data-theme="light"] .footer-section a { color: rgba(15, 23, 42, 0.62) !important; }

html[data-theme="light"] .footer-links a:hover,
html[data-theme="light"] .footer-section a:hover {
    color: var(--accent, #4f46e5) !important;
    text-shadow: none !important;
}

html[data-theme="light"] .footer-links a::before,
html[data-theme="light"] .footer-section a::before {
    background: linear-gradient(90deg, #6366f1, #06b6d4);
}

html[data-theme="light"] .footer-copyright,
html[data-theme="light"] .copyright {
    border-top-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .footer-copyright p,
html[data-theme="light"] .copyright p,
html[data-theme="light"] .footer-copyright a,
html[data-theme="light"] .copyright a {
    color: #475569 !important;
}

html[data-theme="light"] .footer-copyright a:hover,
html[data-theme="light"] .copyright a:hover {
    color: rgba(15, 23, 42, 0.75);
}

@media (max-width: 768px) {
    .nav-right {
        gap: 6px;
    }

    .theme-toggle {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
    }
}