/* ============================================================
   theme.css — 公共主题变量 & 切换器样式 & 公共组件
   ============================================================ */

/* ── Theme Variables ── */
:root,
:root[data-theme="dark"] {
    --bg: #111d35;
    --surface: rgba(28, 40, 72, 0.82);
    --surface-hover: rgba(38, 56, 100, 0.9);
    --surface-border: rgba(255, 255, 255, 0.09);
    --border: rgba(255, 255, 255, 0.08);
    --navbar-bg: rgba(8, 12, 25, 0.88);
    --navbar-border: rgba(255, 255, 255, 0.08);
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --accent: #a855f7;
    --text-main: #f5f9ff;
    --text-muted: #94a3b8;
    --text-sub: #64748b;
    --card-bg: rgba(255, 255, 255, 0.05);
    --card-border: rgba(255, 255, 255, 0.05);
    --input-bg: rgba(0, 0, 0, 0.3);
    --input-border: rgba(255, 255, 255, 0.1);
    --border-focus: rgba(99, 102, 241, 0.5);
    --panel-bg: rgba(255, 255, 255, 0.05);
    --panel-border: rgba(255, 255, 255, 0.1);
    --success: #34d399;
    --danger: #f87171;
    --yellow: #facc15;
}
:root[data-theme="light"] {
    --bg: #eef2f7;
    --surface: rgba(255, 255, 255, 0.95);
    --surface-hover: rgba(240, 245, 255, 0.98);
    --surface-border: rgba(0, 0, 0, 0.08);
    --border: rgba(0, 0, 0, 0.1);
    --navbar-bg: rgba(255, 255, 255, 0.92);
    --navbar-border: rgba(0, 0, 0, 0.08);
    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --accent: #7c3aed;
    --text-main: #0f172a;
    --text-muted: #475569;
    --text-sub: #64748b;
    --card-bg: rgba(255, 255, 255, 0.9);
    --card-border: rgba(0, 0, 0, 0.08);
    --input-bg: rgba(255, 255, 255, 0.9);
    --input-border: rgba(0, 0, 0, 0.12);
    --border-focus: rgba(79, 70, 229, 0.5);
    --panel-bg: rgba(79, 70, 229, 0.05);
    --panel-border: rgba(79, 70, 229, 0.15);
    --success: #059669;
    --danger: #dc2626;
    --yellow: #b45309;
}
:root[data-theme="emerald"] {
    --bg: #071812;
    --surface: rgba(10, 40, 28, 0.88);
    --surface-hover: rgba(15, 55, 38, 0.95);
    --surface-border: rgba(16, 185, 129, 0.15);
    --border: rgba(16, 185, 129, 0.18);
    --navbar-bg: rgba(4, 12, 8, 0.92);
    --navbar-border: rgba(16, 185, 129, 0.12);
    --primary: #10b981;
    --primary-hover: #059669;
    --accent: #34d399;
    --text-main: #ecfdf5;
    --text-muted: #6ee7b7;
    --text-sub: #4ade80;
    --card-bg: rgba(16, 185, 129, 0.05);
    --card-border: rgba(16, 185, 129, 0.1);
    --input-bg: rgba(0, 0, 0, 0.3);
    --input-border: rgba(16, 185, 129, 0.2);
    --border-focus: rgba(16, 185, 129, 0.5);
    --panel-bg: rgba(16, 185, 129, 0.08);
    --panel-border: rgba(16, 185, 129, 0.2);
    --success: #34d399;
    --danger: #f87171;
    --yellow: #fbbf24;
}
:root[data-theme="coral"] {
    --bg: #150a04;
    --surface: rgba(45, 20, 8, 0.88);
    --surface-hover: rgba(60, 28, 10, 0.95);
    --surface-border: rgba(249, 115, 22, 0.15);
    --border: rgba(249, 115, 22, 0.18);
    --navbar-bg: rgba(10, 5, 2, 0.92);
    --navbar-border: rgba(249, 115, 22, 0.12);
    --primary: #f97316;
    --primary-hover: #ea580c;
    --accent: #fb923c;
    --text-main: #fff7ed;
    --text-muted: #fdba74;
    --text-sub: #fb923c;
    --card-bg: rgba(249, 115, 22, 0.05);
    --card-border: rgba(249, 115, 22, 0.1);
    --input-bg: rgba(0, 0, 0, 0.3);
    --input-border: rgba(249, 115, 22, 0.2);
    --border-focus: rgba(249, 115, 22, 0.5);
    --panel-bg: rgba(249, 115, 22, 0.08);
    --panel-border: rgba(249, 115, 22, 0.2);
    --success: #34d399;
    --danger: #f87171;
    --yellow: #fbbf24;
}
:root[data-theme="rose"] {
    --bg: #130710;
    --surface: rgba(42, 10, 28, 0.88);
    --surface-hover: rgba(58, 14, 38, 0.95);
    --surface-border: rgba(244, 63, 94, 0.15);
    --border: rgba(244, 63, 94, 0.18);
    --navbar-bg: rgba(10, 3, 8, 0.92);
    --navbar-border: rgba(244, 63, 94, 0.12);
    --primary: #f43f5e;
    --primary-hover: #e11d48;
    --accent: #fb7185;
    --text-main: #fff1f2;
    --text-muted: #fda4af;
    --text-sub: #fb7185;
    --card-bg: rgba(244, 63, 94, 0.05);
    --card-border: rgba(244, 63, 94, 0.1);
    --input-bg: rgba(0, 0, 0, 0.3);
    --input-border: rgba(244, 63, 94, 0.2);
    --border-focus: rgba(244, 63, 94, 0.5);
    --panel-bg: rgba(244, 63, 94, 0.08);
    --panel-border: rgba(244, 63, 94, 0.2);
    --success: #34d399;
    --danger: #f87171;
    --yellow: #fbbf24;
}

/* ── Theme Switcher UI ── */
.theme-switcher { position: relative; }

.theme-btn {
    width: 34px; height: 34px; border-radius: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--navbar-border, var(--border));
    color: var(--text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; transition: all 0.2s;
}
.theme-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-main); }
[data-theme="light"] .theme-btn { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); color: #475569; }
[data-theme="light"] .theme-btn:hover { background: rgba(0,0,0,0.08); color: #0f172a; }

.theme-panel {
    display: none; position: absolute; top: calc(100% + 10px); right: 0;
    background: var(--surface); backdrop-filter: blur(20px);
    border: 1px solid var(--surface-border, var(--border)); border-radius: 16px;
    padding: 1rem; width: 210px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.4); z-index: 999;
}
.theme-panel.open { display: block; }
[data-theme="light"] .theme-panel { background: rgba(255,255,255,0.98); }

.theme-panel-title {
    font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 0.7rem;
}

.theme-options { display: flex; flex-direction: column; gap: 0.3rem; }

.theme-option {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.55rem 0.75rem; border-radius: 10px; cursor: pointer;
    transition: background 0.15s; font-size: 0.85rem; font-weight: 600;
    color: var(--text-main); border: 1px solid transparent;
}
.theme-option:hover { background: rgba(255,255,255,0.06); }
[data-theme="light"] .theme-option { color: #0f172a; }
[data-theme="light"] .theme-option:hover { background: rgba(0,0,0,0.05); }
.theme-option.active { border-color: var(--primary); color: var(--primary); }

.theme-swatch {
    width: 22px; height: 22px; border-radius: 6px;
    flex-shrink: 0; border: 2px solid rgba(255,255,255,0.15);
}
.swatch-system  { background: linear-gradient(135deg, #1e293b 50%, #f0f4f8 50%); }
.swatch-dark    { background: linear-gradient(135deg, #111d35, #6366f1); }
.swatch-light   { background: linear-gradient(135deg, #eef2f7, #4f46e5); border-color: rgba(255,255,255,0.5); }
.swatch-emerald { background: linear-gradient(135deg, #071812, #10b981); }
.swatch-coral   { background: linear-gradient(135deg, #150a04, #f97316); }
.swatch-rose    { background: linear-gradient(135deg, #130710, #f43f5e); }

/* ── Logout button ── */
.btn-logout {
    color: #fca5a5;
    border: 1px solid rgba(239,68,68,0.25);
    background: rgba(239,68,68,0.08);
    padding: 0.5rem 1rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: background 0.2s;
    cursor: pointer;
}
.btn-logout:hover { background: rgba(239,68,68,0.15); }
[data-theme="light"] .btn-logout { color: #dc2626; background: rgba(220,38,38,0.06); border-color: rgba(220,38,38,0.25); }
[data-theme="light"] .btn-logout:hover { background: rgba(220,38,38,0.12); }