/* ============================================================
 * 前台深色模式  style/dark.css
 * 两种触发方式：
 *   1) 手动：body 加 class="dark"（JS 切换按钮写入 localStorage）
 *   2) 自动：访客系统开启深色且未手动选择过（body 无 light 类）
 * 注意：需在 main.css / mobile.css 之后加载
 * ============================================================ */

/* ---------- 手动切换 ---------- */
body.dark{--bg:#0d1117;--card-bg:#161b22;--text:#c9d1d9;--text-light:#8b98a9;--border:#21262d;--shadow:0 2px 12px rgba(0,0,0,.4);}
body.dark{
.header{box-shadow:0 2px 12px rgba(0,0,0,.4);}
.brand-item,.article-list,.city-list a,.news-article,.news-related,.news-header,.news-headline,.news-item,.news-side-card,.news-empty,.fault-card,.master-card,.apply-card{background:#161b22;}
.nav a{background:#1c2128;color:#9da7b3;}
.nav a.active{background:var(--primary);color:#fff;}
.price-table th,.price-table td{border-color:#21262d;}
.price-table th,.step{background:#1c2128;}
.item-tag,.sv-tag{background:#0d2137;color:#58a6ff;}
.area-tag{background:#21262d;color:#9da7b3;}
.news-cats a,.news-pagination a{background:#1c2128;color:#9da7b3;}
.article-item{border-color:#21262d;}
.form-control,.form-select,select,textarea,input[type=text],input[type=number]{background:#0d1117;color:#c9d1d9;border-color:#30363d;}
.cat-section .item-intro,.brand-list .item-intro{color:#8b98a9;}
.footer{color:#8b98a9;}
.footer a{color:#8b98a9;}
}

/* ---------- 跟随系统（未手动选择时） ---------- */
@media (prefers-color-scheme:dark){
body:not(.light){--bg:#0d1117;--card-bg:#161b22;--text:#c9d1d9;--text-light:#8b98a9;--border:#21262d;--shadow:0 2px 12px rgba(0,0,0,.4);}
body:not(.light){
.header{box-shadow:0 2px 12px rgba(0,0,0,.4);}
.brand-item,.article-list,.city-list a,.news-article,.news-related,.news-header,.news-headline,.news-item,.news-side-card,.news-empty,.fault-card,.master-card,.apply-card{background:#161b22;}
.nav a{background:#1c2128;color:#9da7b3;}
.nav a.active{background:var(--primary);color:#fff;}
.price-table th,.price-table td{border-color:#21262d;}
.price-table th,.step{background:#1c2128;}
.item-tag,.sv-tag{background:#0d2137;color:#58a6ff;}
.area-tag{background:#21262d;color:#9da7b3;}
.news-cats a,.news-pagination a{background:#1c2128;color:#9da7b3;}
.article-item{border-color:#21262d;}
.form-control,.form-select,select,textarea,input[type=text],input[type=number]{background:#0d1117;color:#c9d1d9;border-color:#30363d;}
.cat-section .item-intro,.brand-list .item-intro{color:#8b98a9;}
.footer{color:#8b98a9;}
.footer a{color:#8b98a9;}
}
}

/* 深色切换按钮 */
.dm-toggle{position:fixed;right:16px;bottom:80px;z-index:999;width:42px;height:42px;border-radius:50%;border:none;background:#161b22;color:#e6edf3;box-shadow:0 2px 10px rgba(0,0,0,.35);cursor:pointer;font-size:17px;text-align:center;line-height:42px;transition:transform .2s;padding:0;}
.dm-toggle:hover{transform:scale(1.1);}
@media(min-width:769px){.dm-toggle{bottom:24px;}}

/* ---------- 主题选择面板（配色复用 CSS 变量，自动适配深色） ---------- */
.dm-panel{display:none;position:fixed;right:16px;bottom:76px;z-index:1001;width:232px;background:var(--card-bg,#fff);color:var(--text,#333);border:1px solid var(--border,#e8ecf0);border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.18);padding:14px;font-size:13px;}
.dm-panel-title{font-weight:600;font-size:14px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;}
.dm-close{cursor:pointer;color:var(--text-light,#999);font-size:18px;line-height:1;padding:0 4px;}
.dm-close:hover{color:var(--text,#333);}
.dm-row{margin-bottom:10px;}
.dm-row:last-child{margin-bottom:0;}
.dm-label{color:var(--text-light,#888);font-size:12px;margin-bottom:6px;}
.dm-modes{display:flex;gap:6px;}
.dm-mode{flex:1;border:1px solid var(--border,#e0e4ea);background:var(--bg,#f7f8fa);border-radius:8px;padding:6px 0;font-size:12px;cursor:pointer;color:var(--text,#555);}
.dm-mode.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.dm-colors{display:flex;gap:8px;flex-wrap:wrap;}
.dm-color{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;transition:transform .15s;}
.dm-color.active{border-color:var(--text,#333);transform:scale(1.15);}
@media(max-width:768px){.dm-panel{bottom:132px;}}