/* =========================================================
   充电避峰助手 · UI 设计系统 v2
   设计 DNA：新能源绿 + 充电蓝 · 温暖专业 · 毛玻璃质感
   保留全部历史 class，仅升级视觉；含深色模式与动效
   ========================================================= */
:root{
  /* —— 色彩 token —— */
  --bg:#eef2f6;
  --surface:#ffffff;
  --card:#ffffff;
  --ink:#15212c;
  --sub:#647585;
  --brand:#0BA678;          /* 主品牌：清新绿 */
  --brand-2:#0E9D6B;        /* 渐变深绿 */
  --brand-soft:#E3F7F0;     /* 品牌浅底 */
  --accent:#2D9CDB;         /* 充电蓝（强调/链接） */
  --valley:#2D9CDB;         /* 谷 */
  --flat:#18A558;           /* 平 */
  --peak:#F5921B;           /* 峰 */
  --sharp:#E5484D;          /* 尖 */
  --danger:#E5484D;
  --danger-bg:#FDECEC;
  --line:#e7edf2;
  --line-strong:#d6dee6;
  /* —— 阴影 token（多层细腻）—— */
  --shadow-sm:0 1px 2px rgba(16,32,48,.05), 0 2px 6px rgba(16,32,48,.04);
  --shadow:0 6px 18px rgba(16,32,48,.07), 0 2px 5px rgba(16,32,48,.05);
  --shadow-lg:0 14px 38px rgba(16,32,48,.14);
  /* —— 圆角 / 节奏 —— */
  --r:16px; --r-sm:11px; --r-pill:999px;
  --ease:cubic-bezier(.2,0,0,1);
  --dur:.22s;
}
/* ===== 夜间模式（深色主题） ===== */
:root[data-theme="dark"]{
  --bg:#0b121a;
  --surface:#111c27;
  --card:#13202c;
  --ink:#e9eff5;
  --sub:#94a6b6;
  --brand:#2fd6a0;
  --brand-2:#16b884;
  --brand-soft:#102820;
  --accent:#5cb8ec;
  --valley:#5cb8ec;
  --flat:#4cc777;
  --peak:#ffb15c;
  --sharp:#ff7a7f;
  --danger:#ff7a7f;
  --danger-bg:#371e21;
  --line:#223140;
  --line-strong:#2c3e4e;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 8px 22px rgba(0,0,0,.5);
  --shadow-lg:0 16px 44px rgba(0,0,0,.62);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--brand-soft);color:var(--brand-2)}
/* 滚动条美化 */
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
*::-webkit-scrollbar-track{background:transparent}

#app{max-width:520px;margin:0 auto;background:
   radial-gradient(1200px 360px at 50% -120px, rgba(11,166,120,.10), transparent 60%),
   var(--bg);
  min-height:100vh;padding-bottom:24px}

/* ===================== 顶栏 ===================== */
.topbar{position:sticky;top:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 14px;
  background:color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;letter-spacing:-.01em;
  background:linear-gradient(120deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.logo-badge{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-size:16px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  box-shadow:0 4px 10px rgba(11,166,120,.35)}
.tabs{display:flex;gap:6px;align-items:center}
.tab{border:none;background:var(--bg);color:var(--sub);padding:7px 15px;border-radius:var(--r-pill);
  font-size:14px;font-weight:700;cursor:pointer;transition:all var(--dur) var(--ease)}
.tab:hover{color:var(--brand)}
.tab.active{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  box-shadow:0 4px 12px rgba(11,166,120,.32)}

/* ===================== 面板 / 卡片 ===================== */
.panel{display:none;padding:12px}
.panel.active{display:block;animation:fadeUp .3s var(--ease) both}
.card{position:relative;background:var(--card);border-radius:var(--r);padding:15px;margin-bottom:12px;
  box-shadow:var(--shadow);border:1px solid var(--line);overflow:hidden}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--brand),var(--accent));opacity:.9}
.card-title{font-weight:800;font-size:15px;margin-bottom:9px;padding-left:11px;position:relative;letter-spacing:-.01em}
.card-title::before{content:"";position:absolute;left:0;top:1px;bottom:1px;width:4px;border-radius:4px;
  background:linear-gradient(180deg,var(--brand),var(--brand-2))}
.hint{color:var(--sub);font-size:13px;margin:4px 0 10px;line-height:1.6}

/* ===================== 按钮 ===================== */
.row{display:flex;gap:8px;margin:8px 0;align-items:center}
.grow{flex:1}
.btn{border:none;border-radius:13px;padding:13px 16px;font-size:15px;font-weight:700;cursor:pointer;
  transition:all var(--dur) var(--ease);letter-spacing:.01em;font-family:inherit}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  box-shadow:0 6px 16px rgba(11,166,120,.30)}
.btn.primary:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 9px 22px rgba(11,166,120,.38)}
.btn.primary:active{transform:translateY(0) scale(.985);filter:brightness(.96)}
.btn.ghost{background:var(--bg);color:var(--brand);border:1px solid var(--line-strong);font-weight:700}
.btn.ghost:hover{background:var(--brand-soft);border-color:var(--brand)}
.btn.ghost:active{transform:scale(.985)}
.btn.small{padding:9px 13px;font-size:13px;border-radius:11px}
.btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,var(--line))}
.btn.danger:hover{background:var(--danger-bg)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 40%,transparent)}

/* ===================== 档案 KV ===================== */
.kv{display:flex;justify-content:space-between;align-items:center;padding:9px 2px;border-bottom:1px dashed var(--line);font-size:14px}
.kv:last-of-type{border-bottom:none}
.kv span{color:var(--sub);display:flex;align-items:center;gap:7px}
.kv span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);opacity:.6}
.kv b{font-weight:700}

.listen{background:var(--brand-soft);color:var(--brand-2);padding:11px 13px;border-radius:12px;margin-top:8px;font-size:14px;
  display:flex;align-items:center;gap:9px;font-weight:600}
.listen::before{content:"🎙";font-size:18px;animation:pulse 1.4s var(--ease) infinite}
.hidden{display:none!important}

/* ===================== 表单 / 输入 ===================== */
.lbl{display:block;font-size:13px;color:var(--sub);margin-bottom:6px;font-weight:600}
input[type=range]{width:100%;accent-color:var(--brand)}
input,select,textarea{font-family:inherit;color:var(--ink)}
input:not([type=range]):not([type=checkbox]):not([type=password]),
select,textarea{
  width:100%;box-sizing:border-box;padding:11px 13px;border:1.5px solid var(--line-strong);
  border-radius:12px;font-size:15px;background:var(--surface);transition:border-color var(--dur),box-shadow var(--dur)}
input:not([type=range]):not([type=checkbox]):not([type=password]):focus,
select:focus,textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}

/* 建档字段 */
.fld{display:block;margin:11px 0}
.fld-name{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:6px}
.fld-name .unit{font-style:normal;font-weight:600;font-size:12px;color:var(--brand);background:var(--brand-soft);
  padding:2px 8px;border-radius:7px;margin-left:6px}
.fld input,.fld select{width:100%;box-sizing:border-box;padding:12px 13px;border:1.5px solid var(--line-strong);
  border-radius:12px;font-size:15px;background:var(--surface);transition:border-color var(--dur),box-shadow var(--dur)}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.fld-hint{display:block;font-size:12px;color:var(--sub);margin-top:5px;line-height:1.5}
/* 派生值卡片 */
.derived{background:var(--brand-soft);border:1px dashed var(--brand);border-radius:12px;padding:11px 13px;
  font-size:13px;color:var(--ink);margin:2px 0 10px;line-height:1.6}
.derived b{color:var(--brand-2);font-size:15px}
.derived.warn{background:var(--danger-bg);border-color:var(--danger);color:var(--danger)}
.derived.warn b{color:var(--danger)}
.mini-btn{border:none;background:var(--brand-soft);color:var(--brand);border-radius:9px;padding:7px 12px;
  font-size:12.5px;font-weight:700;cursor:pointer;transition:all var(--dur) var(--ease)}
.mini-btn:hover{filter:brightness(.97);transform:translateY(-1px)}
.mini-btn:active{transform:scale(.96)}
.mini-btn.del{background:var(--danger-bg);color:var(--danger)}
.mini-btn.del:hover{filter:brightness(.98)}

/* ===================== 预警横幅 ===================== */
.alert-banner{background:var(--danger-bg);border:1px solid var(--danger);color:#9b1c1c;border-radius:var(--r);
  padding:14px 15px;margin-bottom:12px;font-weight:600;box-shadow:var(--shadow-sm);animation:fadeUp .3s var(--ease) both}
:root[data-theme="dark"] .alert-banner{color:#ffb3b3}
.alert-banner .ahead{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800}
.alert-banner .abody{font-weight:500;font-size:14px;margin-top:7px;color:#7a1414;line-height:1.55}
:root[data-theme="dark"] .alert-banner .abody{color:#ffc9c9}

/* ===================== 司机端「下一步」行动横幅 ===================== */
/* 下一步横幅 — 科技 HUD 风格（与弹窗统一） */
.nextstep{position:relative;display:flex;gap:13px;align-items:center;
  border-radius:14px;padding:15px 16px 15px 18px;margin-bottom:12px;overflow:hidden;
  background:rgba(13,22,30,.9);color:#eafff7;font-weight:700;
  border:1px solid var(--ns,#0BA678);
  box-shadow:0 10px 30px rgba(0,0,0,.35),inset 4px 0 0 var(--ns,#0BA678),0 0 0 1px rgba(255,255,255,.04) inset;
  animation:fadeUp .35s var(--ease) both}
.nextstep::before{content:"";position:absolute;inset:0;border-radius:14px;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,var(--ns,#0BA678),transparent 55%,#2D9CDB 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.nextstep::after{content:"";position:absolute;top:7px;left:7px;width:13px;height:13px;pointer-events:none;
  border-left:2px solid var(--ns,#0BA678);border-top:2px solid var(--ns,#0BA678);border-top-left-radius:5px;opacity:.9}
.nextstep .ns-icon{font-size:24px;line-height:1;flex:0 0 auto;
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:12px;
  background:rgba(255,255,255,.07);border:1px solid var(--ns,#0BA678);
  box-shadow:0 0 16px rgba(11,182,120,.25);animation:pop .5s var(--ease) both}
.nextstep .ns-body{min-width:0}
.nextstep .ns-title{font-size:11px;opacity:.8;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ns,#0BA678)}
.nextstep .ns-text{font-size:15px;margin-top:4px;line-height:1.55;color:#eafff7}
.nextstep.charge{--ns:#19C37D}
.nextstep.pass{--ns:#F2B705}
.nextstep.skip{--ns:#FF8A3D}
.nextstep.wait{--ns:#3DA5FF}
.nextstep.end{--ns:#4FB0FF}
.nextstep.drive{--ns:#0BA678}

/* ===================== 充电计划卡片 ===================== */
#resultBox .card{animation:fadeUp .35s var(--ease) both}
.plan-stop{position:relative;border:1px solid var(--line-strong);border-left:5px solid var(--line-strong);
  border-radius:13px;padding:13px;margin-bottom:10px;background:var(--card);box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);animation:fadeUp .35s var(--ease) both}
.plan-stop:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.plan-stop.peak{border-left-color:var(--peak);background:linear-gradient(90deg,rgba(245,146,27,.07),transparent 60%)}
.plan-stop.sharp{border-left-color:var(--sharp);background:linear-gradient(90deg,rgba(229,72,77,.08),transparent 60%)}
.plan-stop.good{border-left-color:var(--flat);background:linear-gradient(90deg,rgba(24,165,88,.08),transparent 60%)}
.plan-head{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:15px;gap:8px}
.badge{font-size:11.5px;padding:3px 11px;border-radius:var(--r-pill);color:#fff;font-weight:700;letter-spacing:.04em;
  box-shadow:0 2px 6px rgba(0,0,0,.12)}
.badge.valley{background:linear-gradient(135deg,#3aa9e6,var(--valley))}
.badge.flat{background:linear-gradient(135deg,#22b863,var(--flat))}
.badge.peak{background:linear-gradient(135deg,#ffa53d,var(--peak))}
.badge.sharp{background:linear-gradient(135deg,#ff6b70,var(--sharp))}
.decision{font-size:13.5px;margin:8px 0 4px;color:var(--sub);line-height:1.55}
.decision b{color:var(--ink)}
.plan-metrics{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.metric{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 11px;flex:1;min-width:62px}
.metric b{display:block;font-size:16px;font-weight:800;color:var(--brand-2);line-height:1.2}
.metric{font-size:11.5px;color:var(--sub);font-weight:600}
.note{font-size:13px;margin-top:8px;color:var(--sub);line-height:1.55}
.note.rest{color:var(--brand-2);font-weight:700;background:var(--brand-soft);border-radius:9px;padding:7px 10px}
.note.schedule{color:var(--brand-2);font-weight:700;background:var(--brand-soft);border-radius:9px;padding:7px 10px}
.note.warn{color:var(--danger);font-weight:700;background:var(--danger-bg);border-radius:9px;padding:7px 10px}
.arrow{text-align:center;color:var(--sub);font-size:12.5px;margin:3px 0;font-weight:600;letter-spacing:.04em;opacity:.8}

/* 电价时段提示卡 */
.vf-tip{margin:9px 0;padding:9px 12px;border-radius:10px;font-size:13px;font-weight:700;line-height:1.6;
  background:linear-gradient(120deg,#FFF8E1,#FDF1CE);border:1px solid #FFE082;color:#7A5B00}
:root[data-theme="dark"] .vf-tip{background:#3a2f12;border-color:#6b581f;color:#f0d58a}
:root[data-theme="dark"] .note.schedule,:root[data-theme="dark"] .note.rest{background:#11261f;color:#7fd9b5}
:root[data-theme="dark"] .plan-stop.peak{background:linear-gradient(90deg,rgba(255,177,92,.12),transparent 60%);border-color:#7a5a1f}
:root[data-theme="dark"] .plan-stop.sharp{background:linear-gradient(90deg,rgba(255,122,127,.14),transparent 60%);border-color:#7a2f2f}
:root[data-theme="dark"] .plan-stop.good{background:linear-gradient(90deg,rgba(76,199,119,.12),transparent 60%);border-color:#2f6b45}
:root[data-theme="dark"] .badge{box-shadow:0 2px 6px rgba(0,0,0,.4)}

/* ===================== 地图 ===================== */
#map{width:100%;height:300px;border-radius:12px;background:#eef1f4;border:1px solid var(--line);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.05)}
:root[data-theme="dark"] #map{background:#1b2a38;border-color:#2c3e4e}
.map-search{display:flex;gap:8px;margin:8px 0 10px}
.map-search input{flex:1;box-sizing:border-box;padding:11px 13px;border:1.5px solid var(--line-strong);
  border-radius:12px;font-size:14px;background:var(--surface);transition:border-color var(--dur),box-shadow var(--dur)}
.map-search input:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.search-pin{font-size:20px;line-height:26px;text-align:center;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}

/* ===================== 管理端 ===================== */
.admin-tabs{display:flex;gap:6px;margin:8px 0 14px;flex-wrap:wrap}
.atab{border:none;background:var(--bg);color:var(--sub);padding:8px 13px;border-radius:var(--r-pill);
  font-size:13px;font-weight:700;cursor:pointer;transition:all var(--dur) var(--ease)}
.atab:hover{color:var(--brand)}
.atab.active{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  box-shadow:0 4px 12px rgba(11,166,120,.30)}
table.admin{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;animation:fadeUp .35s var(--ease) both}
table.admin th,table.admin td{border-bottom:1px solid var(--line);padding:9px 9px;text-align:left;vertical-align:top}
table.admin tr:last-child td{border-bottom:none}
table.admin th{background:linear-gradient(180deg,var(--brand-soft),transparent);color:var(--brand-2);font-weight:800;
  font-size:12px;letter-spacing:.02em}
table.admin tbody tr{transition:background var(--dur)}
table.admin tbody tr:nth-child(even){background:color-mix(in srgb,var(--bg) 55%,transparent)}
table.admin tbody tr:hover{background:var(--brand-soft)}
.form-row{display:flex;gap:8px;margin:7px 0;flex-wrap:wrap;align-items:center}
.form-row input,.form-row select{flex:1;min-width:90px;padding:10px 12px;border:1.5px solid var(--line-strong);
  border-radius:11px;font-size:14px;background:var(--surface);transition:border-color var(--dur),box-shadow var(--dur)}
.form-row input:focus,.form-row select:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.form-row .unit{font-size:12px;color:var(--sub);align-self:center;white-space:nowrap;font-weight:600}
.seg-label{flex:1;min-width:120px;font-size:13px;color:var(--sub);align-self:center;font-weight:600}

/* 管理端编辑器 */
.editor{animation:fadeUp .3s var(--ease) both}
.editor .fld{margin:9px 0}

/* 管理端锁定按钮 */
.admin-lock{float:right;border:none;background:var(--bg);color:var(--sub);border-radius:9px;padding:4px 10px;
  font-size:12px;cursor:pointer;font-weight:700;transition:all var(--dur) var(--ease)}
.admin-lock:hover{background:var(--brand-soft);color:var(--brand)}
.admin-lock:active{transform:scale(.96)}

/* 省费看板 */
.dash-stat{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}
.dash-stat .metric{flex:1;min-width:44%;text-align:center;background:var(--bg);border:1px solid var(--line);
  border-radius:12px;padding:12px;transition:transform var(--dur) var(--ease),box-shadow var(--dur)}
.dash-stat .metric:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.dash-stat .metric b{font-size:21px;display:block;color:var(--brand-2);font-weight:800}
.dash-rate{font-size:14px;font-weight:800;color:var(--brand-2);margin:8px 0;padding:10px 12px;border-radius:10px;
  background:var(--brand-soft)}
.dash-rate.bad{color:var(--danger);background:var(--danger-bg)}
.dash-empty{color:var(--sub);font-size:13px;text-align:center;padding:24px 12px;line-height:1.6}

/* ===================== 自动播报开关 ===================== */
.switch{position:relative;display:inline-block;width:46px;height:26px;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;cursor:pointer;inset:0;background:#cbd5df;border-radius:99px;transition:var(--dur)}
.switch .slider:before{content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;border-radius:50%;
  transition:var(--dur);box-shadow:0 2px 5px rgba(0,0,0,.25)}
.switch input:checked + .slider{background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.switch input:checked + .slider:before{transform:translateX(20px)}
.switch input:focus-visible + .slider{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 40%,transparent)}

/* ===================== Toast ===================== */
.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(8px);background:rgba(16,28,40,.94);
  color:#fff;padding:11px 18px;border-radius:var(--r-pill);font-size:14px;z-index:999;opacity:0;
  transition:opacity .2s,transform .2s;box-shadow:var(--shadow-lg);backdrop-filter:blur(6px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===================== 管理端密码弹窗 ===================== */
.pw-modal{position:fixed;inset:0;background:rgba(8,14,20,.5);backdrop-filter:blur(4px);z-index:950;
  display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s var(--ease) both}
.pw-box{background:var(--card);border-radius:18px;padding:22px;max-width:340px;width:100%;box-shadow:var(--shadow-lg);
  animation:pop .26s var(--ease) both}
.pw-title{font-weight:800;font-size:17px;margin-bottom:5px;letter-spacing:-.01em}
.pw-tip{color:var(--sub);font-size:13px;margin:0 0 14px;line-height:1.5}
.pw-input{width:100%;box-sizing:border-box;padding:13px;border:1.5px solid var(--line-strong);border-radius:12px;
  font-size:15px;margin-bottom:8px;background:var(--surface);transition:border-color var(--dur),box-shadow var(--dur)}
.pw-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.pw-err{color:var(--danger);font-size:13px;min-height:18px;margin-bottom:4px;font-weight:600}
.pw-cancel{display:block;width:100%;border:none;background:none;color:var(--sub);font-size:13px;margin-top:12px;
  cursor:pointer;padding:6px;font-weight:600}
.pw-cancel:hover{color:var(--ink)}

/* ===================== 主题切换按钮 ===================== */
.theme-toggle{border:none;background:var(--bg);font-size:17px;cursor:pointer;padding:6px 9px;border-radius:50%;
  line-height:1;transition:all var(--dur) var(--ease)}
.theme-toggle:hover{background:var(--brand-soft);transform:rotate(-12deg) scale(1.08)}
.theme-toggle:active{transform:scale(.92)}

/* 页脚 */
.foot{text-align:center;color:var(--sub);font-size:12px;padding:18px 16px;line-height:1.6}

/* ===================== 动效 ===================== */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.18);opacity:.7}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
/* ============ 科技感 Modal（HUD 风格） ============ */
.modal-overlay{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:18px;
  background:radial-gradient(120% 120% at 50% 0%,rgba(11,182,120,.18),transparent 55%),
             radial-gradient(120% 120% at 100% 100%,rgba(45,156,219,.16),transparent 55%),
             rgba(6,12,18,.74);
  backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%);
  opacity:0;transition:opacity .25s ease}
.modal-overlay.show{opacity:1}
.modal-tech{position:relative;width:100%;max-width:380px;
  background:linear-gradient(180deg,rgba(14,24,32,.96),rgba(9,16,24,.98));
  border:1px solid rgba(11,182,120,.35);border-radius:18px;padding:22px 20px 20px;color:#e8f6f0;overflow:hidden;
  max-height:calc(100vh - 36px);display:flex;flex-direction:column;
  box-shadow:0 0 0 1px rgba(45,156,219,.18) inset,0 18px 60px rgba(0,0,0,.55),0 0 40px rgba(11,182,120,.18);
  transform:translateY(14px) scale(.96);opacity:0;filter:blur(6px);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s ease,filter .3s ease}
.modal-overlay.show .modal-tech{transform:none;opacity:1;filter:none}
.modal-tech::before{content:"";position:absolute;inset:0;border-radius:18px;padding:1px;
  background:linear-gradient(135deg,var(--brand),var(--accent),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.modal-tech-corner{position:absolute;width:15px;height:15px;border:2px solid var(--brand);opacity:.85}
.modal-tech-corner.tl{top:8px;left:8px;border-right:0;border-bottom:0;border-top-left-radius:6px}
.modal-tech-corner.tr{top:8px;right:8px;border-left:0;border-bottom:0;border-top-right-radius:6px}
.modal-tech-corner.bl{bottom:8px;left:8px;border-right:0;border-top:0;border-bottom-left-radius:6px}
.modal-tech-corner.br{bottom:8px;right:8px;border-left:0;border-top:0;border-bottom-right-radius:6px}
.modal-tech-scan{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--brand),transparent);opacity:.55;animation:scan 3.4s linear infinite}
@keyframes scan{0%{transform:translateY(0)}100%{transform:translateY(440px)}}
@media (prefers-reduced-motion:reduce){.modal-tech-scan{display:none}}
.modal-tech-close{position:absolute;top:10px;right:12px;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#cfe;font-size:18px;line-height:1;cursor:pointer;transition:.2s;z-index:3}
.modal-tech-close:hover{background:rgba(255,80,80,.25);border-color:rgba(255,120,120,.6);color:#fff}
.modal-tech-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.modal-tech-dot{width:9px;height:9px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.modal-tech-title{margin:0;font-size:18px;font-weight:800;letter-spacing:.5px;color:#eafff7;text-shadow:0 0 12px rgba(11,182,120,.55)}
.modal-tech-body{position:relative;z-index:1;overflow-y:auto;flex:1 1 auto;min-height:0;margin-top:2px;overscroll-behavior:contain}
.modal-tech-body .fld{margin:12px 0}
.modal-tech-body .fld-name{color:#bfeede;font-weight:600}
.modal-tech-body .fld-hint{color:#7fa89b}
.modal-tech-body .unit{color:var(--accent);font-style:normal}
.modal-tech-body input,.modal-tech-body select{width:100%;padding:11px 12px;margin-top:6px;border-radius:10px;
  background:#0f2029!important;border:1px solid rgba(45,156,219,.5)!important;color:#f2fff9!important;font-size:14px;outline:none;transition:.2s}
.modal-tech-body input::placeholder{color:#9fc3b6!important}
.modal-tech-body input:focus,.modal-tech-body select:focus{border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(11,182,120,.22),0 0 14px rgba(11,182,120,.25);background:rgba(11,182,120,.06)}
.modal-tech-body select option{background:#0f2029!important;color:#f2fff9!important}
.modal-tech-body .derived{margin-top:8px;padding:10px 12px;border-radius:10px;font-size:13px;
  background:rgba(45,156,219,.10);border:1px solid rgba(45,156,219,.25);color:#cdeefb}
.modal-tech-body .derived.warn{background:rgba(235,87,87,.12);border-color:rgba(235,87,87,.4);color:#ffd9d9}
.modal-tech-body .hint{color:#8fb3a8}
.modal-tech-body .btn.primary{width:100%;margin-top:16px;padding:13px;font-size:15px;font-weight:800;letter-spacing:1px;
  background:linear-gradient(135deg,var(--brand),var(--accent));color:#04130d;border:0;border-radius:12px;
  box-shadow:0 8px 24px rgba(11,182,120,.35),0 0 0 1px rgba(255,255,255,.1) inset;transition:.2s}
.modal-tech-body .btn.primary:hover{filter:brightness(1.08);box-shadow:0 10px 30px rgba(11,182,120,.5);transform:translateY(-1px)}
.modal-tech-body .btn.primary:active{transform:translateY(0)}
.modal-tech-body input[type=range]{-webkit-appearance:none;appearance:none;height:6px;padding:0;
  background:linear-gradient(90deg,var(--brand),var(--accent));border-radius:6px;border:0}
.modal-tech-body input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:#eafff7;border:2px solid var(--brand);box-shadow:0 0 10px var(--brand);cursor:pointer}
.modal-tech-body img{max-width:100%;border-radius:12px;display:block;margin:8px auto}
.modal-tech-body input[type=file]{padding:8px}

/* ============ 全局科技 HUD 升级（深色主题下生效，与弹窗/横幅统一） ============ */
:root[data-theme="dark"] #app{
  background:
    radial-gradient(1100px 380px at 50% -140px, rgba(11,182,120,.14), transparent 60%),
    radial-gradient(900px 320px at 100% 0%, rgba(45,156,219,.12), transparent 55%),
    var(--bg);
}
:root[data-theme="dark"] .topbar{
  background:rgba(11,21,30,.82);
  border-bottom:1px solid rgba(45,156,219,.22);
}
:root[data-theme="dark"] .card{
  background:linear-gradient(180deg,rgba(18,30,41,.92),rgba(13,22,31,.96));
  border:1px solid rgba(45,156,219,.16);
  box-shadow:0 12px 32px rgba(0,0,0,.5),0 0 0 1px rgba(11,182,120,.05) inset;
}
:root[data-theme="dark"] .card::after{
  content:"";position:absolute;inset:0;border-radius:var(--r);padding:1px;pointer-events:none;
  background:linear-gradient(135deg,var(--brand),transparent 52%,var(--accent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.45;
}
:root[data-theme="dark"] .plan-stop{
  background:linear-gradient(180deg,rgba(18,30,41,.9),rgba(13,22,31,.95));
  border:1px solid rgba(45,156,219,.14);
  box-shadow:0 8px 22px rgba(0,0,0,.42);
}
:root[data-theme="dark"] .plan-stop.peak{background:linear-gradient(90deg,rgba(245,146,27,.16),transparent 62%);border-left-color:var(--peak);border-color:rgba(245,146,27,.28)}
:root[data-theme="dark"] .plan-stop.sharp{background:linear-gradient(90deg,rgba(229,72,77,.18),transparent 62%);border-left-color:var(--sharp);border-color:rgba(229,72,77,.3)}
:root[data-theme="dark"] .plan-stop.good{background:linear-gradient(90deg,rgba(24,165,88,.16),transparent 62%);border-left-color:var(--flat);border-color:rgba(24,165,88,.3)}
:root[data-theme="dark"] .badge{box-shadow:0 2px 8px rgba(0,0,0,.45)}
:root[data-theme="dark"] .metric{background:rgba(255,255,255,.04);border:1px solid rgba(45,156,219,.18)}
:root[data-theme="dark"] .metric b{color:var(--brand)}
:root[data-theme="dark"] table.admin{border:1px solid rgba(45,156,219,.22)}
:root[data-theme="dark"] table.admin th{background:linear-gradient(180deg,rgba(11,182,120,.2),transparent);color:var(--brand);border-bottom:1px solid rgba(45,156,219,.22)}
:root[data-theme="dark"] table.admin tbody tr:nth-child(even){background:rgba(255,255,255,.035)}
:root[data-theme="dark"] table.admin tbody tr:hover{background:rgba(11,182,120,.14)}
:root[data-theme="dark"] .dash-stat .metric{background:rgba(255,255,255,.04);border:1px solid rgba(45,156,219,.18)}
:root[data-theme="dark"] .dash-stat .metric b{color:var(--brand)}
:root[data-theme="dark"] .dash-rate{background:rgba(11,182,120,.12);border:1px solid rgba(11,182,120,.25)}
/* 输入框深色玻璃（页面级） */
:root[data-theme="dark"] input:not([type=range]):not([type=checkbox]):not([type=password]),
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea{background:rgba(13,22,30,.72);border:1px solid rgba(45,156,219,.28);color:#eafff7}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder{color:#6f8e84}
:root[data-theme="dark"] .fld input,
:root[data-theme="dark"] .fld select{background:rgba(13,22,30,.72);border-color:rgba(45,156,219,.28);color:#eafff7}
:root[data-theme="dark"] .map-search input{background:rgba(13,22,30,.72);border-color:rgba(45,156,219,.28);color:#eafff7}
:root[data-theme="dark"] .form-row input,
:root[data-theme="dark"] .form-row select{background:rgba(13,22,30,.72);border-color:rgba(45,156,219,.28);color:#eafff7}
/* 地图深色 */
:root[data-theme="dark"] #map{background:#0d1822;border-color:rgba(45,156,219,.25)}
/* 开关深色 */
:root[data-theme="dark"] .switch .slider{background:rgba(45,156,219,.32)}
/* 密码弹窗深色玻璃 */
:root[data-theme="dark"] .pw-box{background:linear-gradient(180deg,rgba(18,30,41,.97),rgba(13,22,31,.98));border:1px solid rgba(45,156,219,.25);color:#e8f6f0}
:root[data-theme="dark"] .pw-input{background:rgba(13,22,30,.72);border-color:rgba(45,156,219,.28);color:#eafff7}
:root[data-theme="dark"] .pw-title{color:#eafff7}
:root[data-theme="dark"] .kv{border-bottom:1px dashed rgba(255,255,255,.08)}
:root[data-theme="dark"] .listen{background:rgba(11,182,120,.14);color:var(--brand)}