/* ============================================================
   风格模板（一键切换）+ 尺寸自适应（PC / 平板 / 手机 / 小程序）
   ------------------------------------------------------------
   用法：<html data-theme="neon|aurora|light|mono|gold">
         <html data-density="compact|standard|loose">
         <html data-font="s|m|l">
         <body data-preview="pc|tablet|mobile|mini">
   所有风格只覆盖 CSS 变量，业务代码零改动。
   ============================================================ */

/* ---------- 1. 深邃霓虹（默认） ---------- */
:root, [data-theme="neon"] {
  --bg:#0d0b12; --bg-2:#141019; --panel:#17131f; --panel-2:#1e1729; --card:#1b1526;
  --border:#2b2238; --border-hi:#3a2d4d;
  --txt:#eae6f2; --txt-2:#9a8fb0; --txt-3:#6f6486;
  --accent:#e83e8c; --accent-2:#ff4fa7;
  --grad:linear-gradient(135deg,#e83e8c,#a03be8);
  --grad-btn:linear-gradient(135deg,#ff4fa7,#c237c9);
  --ok:#2ecc8f; --warn:#ff9f43; --err:#ff5b6e; --info:#4da3ff;
  --shadow:0 8px 30px rgba(0,0,0,.45);
  --radius:14px; --pad:20px; --fs:14px;
}

/* ---------- 2. 极光蓝 ---------- */
[data-theme="aurora"] {
  --bg:#070d18; --bg-2:#0b1424; --panel:#0e1a2c; --panel-2:#132338; --card:#101d31;
  --border:#1d3350; --border-hi:#2a4a6e;
  --txt:#e6f2ff; --txt-2:#8fa9c7; --txt-3:#5f7899;
  --accent:#22d3ee; --accent-2:#60a5fa;
  --grad:linear-gradient(135deg,#22d3ee,#3b82f6);
  --grad-btn:linear-gradient(135deg,#38bdf8,#2563eb);
  --ok:#34d399; --warn:#fbbf24; --err:#fb7185; --info:#60a5fa;
  --shadow:0 8px 30px rgba(0,20,40,.5);
}

/* ---------- 3. 晨曦浅色 ---------- */
[data-theme="light"] {
  --bg:#f5f6fa; --bg-2:#eef0f7; --panel:#ffffff; --panel-2:#f3f4fa; --card:#ffffff;
  --border:#e3e6ef; --border-hi:#cfd4e4;
  --txt:#1c2033; --txt-2:#5b6379; --txt-3:#8b92a8;
  --accent:#7c4dff; --accent-2:#a06bff;
  --grad:linear-gradient(135deg,#7c4dff,#4d8bff);
  --grad-btn:linear-gradient(135deg,#8b5cf6,#6366f1);
  --ok:#16a34a; --warn:#d97706; --err:#dc2626; --info:#2563eb;
  --shadow:0 6px 24px rgba(30,40,80,.10);
}
[data-theme="light"] .topbar{background:rgba(255,255,255,.92)}
[data-theme="light"] .modal-mask{background:rgba(20,25,45,.45)}
[data-theme="light"] .stat-value{color:var(--txt)}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:#c8cddd}

/* ---------- 4. 极简黑白 ---------- */
[data-theme="mono"] {
  --bg:#ffffff; --bg-2:#fafafa; --panel:#ffffff; --panel-2:#f4f4f4; --card:#ffffff;
  --border:#e2e2e2; --border-hi:#c9c9c9;
  --txt:#111111; --txt-2:#5c5c5c; --txt-3:#909090;
  --accent:#111111; --accent-2:#333333;
  --grad:linear-gradient(135deg,#222,#000);
  --grad-btn:linear-gradient(135deg,#333,#111);
  --ok:#0f766e; --warn:#9a6700; --err:#b42318; --info:#334155;
  --shadow:0 4px 18px rgba(0,0,0,.08);
  --radius:6px;
}
[data-theme="mono"] .topbar{background:rgba(255,255,255,.94)}
[data-theme="mono"] .func-card:hover{transform:none;border-color:var(--accent)}
[data-theme="mono"] .status-pill{border-radius:4px}

/* ---------- 5. 商务金 ---------- */
[data-theme="gold"] {
  --bg:#12100b; --bg-2:#1a1710; --panel:#1c1912; --panel-2:#241f16; --card:#201c14;
  --border:#3a3222; --border-hi:#514631;
  --txt:#f5efe1; --txt-2:#b7ab92; --txt-3:#8a7f68;
  --accent:#d4af37; --accent-2:#e8c866;
  --grad:linear-gradient(135deg,#d4af37,#8a6d1f);
  --grad-btn:linear-gradient(135deg,#e8c866,#b8912c);
  --ok:#7fb069; --warn:#e0a458; --err:#d9684f; --info:#9bb8d4;
  --shadow:0 8px 30px rgba(0,0,0,.5);
}

/* ---------- 语义色映射到通用变量（兼容既有样式） ---------- */
:root{ --pink:var(--accent); --pink-2:var(--accent-2); --magenta:var(--accent);
  --green:var(--ok); --orange:var(--warn); --red:var(--err); --blue:var(--info); }

/* ---------- 密度 / 字号 ---------- */
[data-density="compact"]{ --radius:10px; --pad:14px; }
[data-density="compact"] .func-card,[data-density="compact"] .stat-card,[data-density="compact"] .law-card{padding:14px}
[data-density="compact"] th,[data-density="compact"] td{padding:8px 10px}
[data-density="loose"]{ --radius:18px; --pad:26px; }
[data-density="loose"] .func-card,[data-density="loose"] .stat-card,[data-density="loose"] .law-card{padding:26px}
[data-density="loose"] th,[data-density="loose"] td{padding:14px 16px}
[data-font="s"]{ --fs:13px; } [data-font="m"]{ --fs:14px; } [data-font="l"]{ --fs:15.5px; }
body{font-size:var(--fs)}
.main{padding:var(--pad) var(--pad) 90px}

/* ---------- 尺寸预览：平板 / 手机 / 小程序 ---------- */
.dev-preview{max-width:100%;margin:0 auto}
.dev-bar{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:8px 14px;
  background:var(--panel-2);border:1px solid var(--border);border-radius:10px;
  font-size:12px;color:var(--txt-2);
}
.dev-bar .btn{margin-left:auto}
.dev-screen{
  border:1px solid var(--border-hi);border-radius:18px;overflow:hidden;background:var(--bg);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
body[data-preview="tablet"] .dev-preview{max-width:768px}
body[data-preview="mobile"] .dev-preview{max-width:390px}
body[data-preview="mini"]   .dev-preview{max-width:375px}
.mini-nav{
  display:flex;align-items:center;justify-content:space-between;padding:10px 14px;
  background:var(--panel);border-bottom:1px solid var(--border);font-size:12.5px;color:var(--txt-2);
}
.mini-nav b{color:var(--txt);font-weight:600}
.mini-tab{
  display:flex;border-top:1px solid var(--border);background:var(--panel);padding:6px 0 10px;
}
.mini-tab span{flex:1;text-align:center;font-size:10.5px;color:var(--txt-3)}
.mini-tab span:first-child{color:var(--accent)}
.dev-body{padding:14px;background:var(--bg)}
body[data-preview="mini"] .dev-body .page-hero{border-radius:12px;padding:14px}
body[data-preview="mini"] .dev-body .card-grid-4,
body[data-preview="mini"] .dev-body .card-grid,
body[data-preview="mini"] .dev-body .admin-grid{grid-template-columns:1fr}
body[data-preview="mobile"] .dev-body .card-grid-4,
body[data-preview="mobile"] .dev-body .card-grid,
body[data-preview="mobile"] .dev-body .admin-grid{grid-template-columns:1fr}
body[data-preview="tablet"] .dev-body .card-grid-4{grid-template-columns:repeat(2,1fr)}

/* ---------- 风格选择卡片（切换器） ---------- */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.theme-card{
  border:2px solid var(--border);border-radius:12px;padding:12px;cursor:pointer;transition:.18s;background:var(--panel-2);
}
.theme-card:hover{border-color:var(--accent)}
.theme-card.cur{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.theme-card .tc-name{font-size:13px;margin-top:8px;display:flex;align-items:center;justify-content:space-between}
.theme-swatch{height:52px;border-radius:8px;display:flex;overflow:hidden;border:1px solid rgba(128,128,128,.25)}
.theme-swatch i{flex:1}
.theme-swatch i:last-child{flex:2}