/* ============================================================
 *  后台主题变量
 *  默认主题：海洋青绿（ocean）
 *  切换方式：body 加 .theme-xxx 类，localStorage 持久化
 *  新增主题：只需添加 .theme-xxx { --theme-xxx: ... } 块
 * ============================================================ */

/* ---------- 默认主题：海洋青绿 ---------- */
:root {
    --theme-primary: #0891b2;
    --theme-primary-dark: #059669;
    --theme-primary-rgb: 8,145,178;
    --theme-gradient: linear-gradient(135deg, #0891b2 0%, #059669 100%);
    --theme-bg: #f0f5f4;
    --theme-light-bg: rgba(8,145,178,.08);
}

/* ---------- 极光紫主题 ---------- */
.theme-purple {
    --theme-primary: #667eea;
    --theme-primary-dark: #764ba2;
    --theme-primary-rgb: 102,126,234;
    --theme-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --theme-bg: #f2f5fa;
    --theme-light-bg: rgba(102,126,234,.08);
}

/* ---------- 深林墨绿主题 ---------- */
.theme-forest {
    --theme-primary: #34d399;
    --theme-primary-dark: #059669;
    --theme-primary-rgb: 52,211,153;
    --theme-gradient: linear-gradient(135deg, #34d399 0%, #059669 100%);
    --theme-bg: #f0f7f4;
    --theme-light-bg: rgba(52,211,153,.08);
}

/* ---------- 落日主题 ---------- */
.theme-sunset {
    --theme-primary: #f59e0b;
    --theme-primary-dark: #ef4444;
    --theme-primary-rgb: 245,158,11;
    --theme-gradient: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    --theme-bg: #fef7f0;
    --theme-light-bg: rgba(245,158,11,.08);
}

/* ---------- body 背景色由变量控制 ---------- */
body.layui-layout-body {
    background: var(--theme-bg) !important;
}

/* ============================================================
 *  主题切换器 UI
 * ============================================================ */
.theme-switcher { position: relative; }
.theme-switcher .dropdown-toggle { display:flex; align-items:center; gap:6px; padding:8px 16px; border-radius:8px; font-size:14px; color:#666; cursor:pointer; transition:all .2s; text-decoration:none; }
.theme-switcher .dropdown-toggle:hover { background:#f5f5f5; color:#333; }
.theme-switcher .theme-options { position:absolute; top:100%; right:0; margin-top:8px; background:#fff; border-radius:10px; box-shadow:0 8px 32px rgba(0,0,0,.15); min-width:140px; display:none; z-index:200; overflow:hidden; padding:6px 0; }
.theme-switcher .theme-options.show { display:block; }
.theme-switcher .theme-options a { display:flex; align-items:center; gap:10px; padding:10px 16px; color:#4b5563; font-size:13px; cursor:pointer; transition:all .15s; text-decoration:none; white-space:nowrap; }
.theme-switcher .theme-options a:hover { background:#f9fafb; }
.theme-switcher .theme-options a.active { color:var(--theme-primary); font-weight:600; }
.theme-switcher .theme-options a span { width:22px; height:22px; border-radius:50%; flex-shrink:0; border:2px solid rgba(0,0,0,.08); }
.theme-switcher .theme-options a.active span { border-color:var(--theme-primary); box-shadow:0 0 0 2px rgba(var(--theme-primary-rgb),.25); }