/* ───────────────────────────────────────────────────────────────────────────
   simcloud 管理后台样式

   ★ 全部照《WebUI原型.html》来（docs/02-总代项目/）：
     配色、圆角、阴影、字号、间距都取自原型的 :root 与组件定义，
     不再自行发挥。改样式时先看原型，别在这里发明新值。

   ★ 布局照原型：
     .app = 左侧深色侧栏(.sidebar 228px) + 右侧主列(.maincol)
     主列里：顶栏(.topbar，浅色，sticky) → 免责横幅(.disclaim) → 内容(.content)

   ★ 单文件、无预处理器、无 UI 框架（决策 5：不上 SPA / 不引前端框架）。
     改这里必须重新编译（//go:embed 打进二进制）。
   ─────────────────────────────────────────────────────────────────────────── */

:root{
  --bg:#f3f5fa; --card:#ffffff; --card2:#f8f9fd;
  --bd:#e4e7f0; --bd2:#d3d8e6;
  --tx:#252a3d; --tx2:#565d76; --dim:#8b90a6;
  --red:#e64560; --red2:#fdeef1; --redd:#c93a52;
  --grn:#0d9e77; --grn2:#e7f7f1;
  --amb:#b97e0a; --amb2:#fdf5e3;
  --blu:#2f6bdc; --blu2:#eef4ff;
  --pur:#7a4fd0; --pur2:#f3eeff;
  --side1:#151827; --side2:#1e2236;
  --sh:0 1px 2px rgba(20,25,45,.05),0 1px 3px rgba(20,25,45,.05);
  --sh2:0 8px 24px rgba(20,25,45,.10);
  --mono:Consolas,"SF Mono",Menlo,"Liberation Mono",monospace;
}

*{box-sizing:border-box;margin:0;padding:0}

/*
  ★★ [hidden] 必须带 !important，否则本文件里任何 display 声明都会覆盖它。
  浏览器的 [hidden]{display:none} 来自 UA 样式表，优先级最低：
  只要元素自己（或它匹配的类，如 .mdl{display:...} / .btn{display:inline-flex}）
  写了 display，hidden 就完全失效 —— 表现是"该藏的没藏"。
  踩过一次：重置密码弹层一进页面就铺在屏幕中间，里面是空的密码。
*/
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--tx);
  font:14.5px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
       "Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blu);text-decoration:none}
a:hover{text-decoration:none}
::selection{background:rgba(230,69,96,.18)}
.mono{font-family:var(--mono);font-size:13px}
b{font-weight:700}
.ic{width:16px;height:16px;flex-shrink:0}
.ic.sm{width:13px;height:13px}
.g{color:var(--grn)} .r{color:var(--red)} .y{color:var(--amb)} .b{color:var(--blu)}
.dim{color:var(--dim)}

/* ─── 骨架 ─────────────────────────────────────────────────────────────── */

.app{display:flex;min-height:100vh}
.maincol{flex:1;min-width:0;display:flex;flex-direction:column}

/* ─── 侧边栏（深色，照原型） ────────────────────────────────────────────── */

.sidebar{
  width:228px;flex-shrink:0;
  background:linear-gradient(180deg,var(--side1),var(--side2));
  color:#aeb5cc;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.brand{display:flex;align-items:center;gap:11px;padding:18px 18px 15px}
.logo{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,#e64560,#f5788d);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;
  box-shadow:0 4px 12px rgba(230,69,96,.4);
}
.brand .bt{color:#fff;font-size:15.5px;font-weight:700;letter-spacing:.3px}
.brand .bs{font-size:11.5px;color:#7d849f;margin-top:1px}

.nav{flex:1;overflow-y:auto;padding-bottom:8px}
.nav::-webkit-scrollbar{width:0}
.navgrp{
  font-size:11px;color:#6d7492;padding:14px 20px 5px;
  letter-spacing:1.2px;font-weight:600;
}
/* ★ 用 class 而不是 .nav a：未开通项是 <span>（不可点），也要同样的外观 */
.nav-a{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;margin:1px 10px;border-radius:9px;
  color:#aeb5cc;font-size:13.8px;cursor:pointer;
  transition:background .15s,color .15s;
}
.nav-a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-a.on{
  background:linear-gradient(90deg,rgba(230,69,96,.24),rgba(230,69,96,.08));
  color:#fff;box-shadow:inset 2px 0 0 var(--red);
}
.nav-a.on .ic{color:#f5788d}
.nav-a .ic{color:#7d849f;transition:color .15s}
.nav-a.off{color:#7d849f;cursor:default}
.nav-a.off:hover{background:transparent;color:#7d849f}

/* 侧栏里的阶段标签（P0/P1/P3/P4） */
.tag{
  font-size:10.5px;padding:1px 6px;border-radius:5px;
  margin-left:auto;flex-shrink:0;font-weight:700;letter-spacing:.4px;
}
.tag.p0{background:rgba(13,158,119,.16);color:#4fd0a8}
.tag.p1{background:rgba(47,107,220,.18);color:#7fa5f0}
.tag.p2{background:rgba(47,107,220,.18);color:#7fa5f0}
.tag.p3{background:rgba(122,79,208,.18);color:#b294e8}
.tag.p4{background:rgba(185,126,10,.18);color:#e0b25e}
.tag.p5{background:rgba(122,79,208,.18);color:#b294e8}

.side-foot{
  border-top:1px solid rgba(255,255,255,.07);
  padding:12px 16px;display:flex;align-items:center;gap:10px;
}
.avatar{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;font-size:13px;font-weight:700;
}
.side-foot .avatar{background:#2c3350;color:#aeb5cc}
.side-foot .un{color:#fff;font-size:13.5px;font-weight:600}
.side-foot .ur{font-size:11.5px;color:#7d849f}
/* ★ 2026-11-04 三期（需求 7）：版本号移到用户块上方，右对齐贴在分隔线上方 */
.side-ver{
  padding:0 16px 8px;display:flex;justify-content:flex-end;
}
.side-ver .ver{
  font-size:10.5px;color:#5d6480;
  border:1px solid rgba(255,255,255,.1);border-radius:5px;padding:2px 6px;
}

/* ─── 顶栏（浅色，照原型） ──────────────────────────────────────────────── */

.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:14px;
  height:56px;padding:0 26px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--bd);
}
.tb-left{display:flex;align-items:center;gap:11px;min-width:0}
.tb-ic{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  display:grid;place-items:center;background:var(--red2);color:var(--red);
}
.tb-title{font-size:15.5px;font-weight:700;white-space:nowrap}
.tb-crumb{font-size:11.5px;color:var(--dim);white-space:nowrap}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.tb-user{
  display:flex;align-items:center;gap:8px;
  padding-left:12px;border-left:1px solid var(--bd);
}
.tb-user .avatar{background:linear-gradient(135deg,#e64560,#f5788d);color:#fff}
.tb-user b{font-size:13px;display:block;line-height:1.3}
.tb-user small{font-size:11px;color:var(--dim)}
.icbtn{
  width:32px;height:32px;border-radius:8px;border:1px solid var(--bd);
  background:#fff;display:grid;place-items:center;color:var(--tx2);cursor:pointer;
  transition:border-color .15s,color .15s;
}
.icbtn:hover{border-color:var(--bd2);color:var(--tx)}

/* ─── 免责横幅（决策 21，色值照原型） ───────────────────────────────────── */

.disclaim{
  padding:8px 22px;background:#fff4e5;border-bottom:1px solid #ffd9a0;
  color:#9a5b00;font-size:13px;font-weight:600;letter-spacing:.2px;
  display:flex;align-items:center;gap:8px;line-height:1.6;
}
.disclaim .dc-ic{flex-shrink:0;width:14px;height:14px;color:#e08a00}
.disclaim .dc-txt b{font-weight:800}

/* ─── 内容区 ────────────────────────────────────────────────────────────── */

.content{flex:1;padding:22px 26px 48px;min-width:0}

/* ─── 说明块（核心操作 / 口径说明） ─────────────────────────────────────── */

.note{
  background:#fffaf0;border:1px solid #f0e2b8;border-radius:10px;
  padding:13px 16px;margin-bottom:16px;
}
.note .nt{
  font-weight:700;color:#8a6410;display:flex;align-items:center;gap:7px;
  margin-bottom:5px;font-size:13px;
}
.note ul{margin:5px 0 0 17px;color:#6b6250}
.note li{margin:3px 0;font-size:13.5px}
.note b{color:#7a5410}

.hint{
  background:var(--blu2);border:1px solid #d9e4fb;border-radius:8px;
  padding:9px 12px;font-size:12.5px;color:#43537a;margin-top:12px;line-height:1.7;
}
.hint b{color:var(--blu)}

.errbox{
  background:#fef2f2;border:1px solid #f7c7c7;border-radius:8px;
  padding:11px 13px;font-size:12.5px;color:#a11;
}
.errbox b{color:#c02626}
.errbox .kv{display:flex;gap:8px;margin-top:6px;font-size:13px;line-height:1.9;border:0;padding:0;justify-content:flex-start}
.errbox .kv>span:first-child{color:#b56767;flex-shrink:0;min-width:52px}
.errbox .kv>span:last-child{text-align:left;font-weight:600;color:#8f2b2b;word-break:break-all}
.errbox .etip{margin-top:8px;font-size:13px;line-height:1.7;color:#8f2b2b}

.okbox{
  background:var(--grn2);border:1px solid #bfe6d6;border-radius:8px;
  padding:9px 12px;font-size:12.5px;color:#0a6b52;margin-top:12px;line-height:1.7;
}

/* ─── 卡片 ─────────────────────────────────────────────────────────────── */

.card{
  background:var(--card);border:1px solid var(--bd);border-radius:12px;
  box-shadow:var(--sh);margin-bottom:16px;overflow:hidden;
}
.card:last-child{margin-bottom:0}
.card-hd{
  padding:12px 16px;border-bottom:1px solid var(--bd);
  display:flex;align-items:center;gap:9px;background:#fcfdfe;
}
.card-hd .ct{font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px}
.card-hd .ct .ic{color:var(--dim)}
.card-hd .cs{font-size:12px;color:var(--dim);font-weight:400}
.card-hd .ca{margin-left:auto;display:flex;gap:7px;align-items:center}
.card-bd{padding:16px}
.card-bd.flush{padding:0}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}

/* ── 统计条（.stats > .stat）：对齐④⑤补的样式 ──────────────────────────
   ★ credential 页从 P3 起就在用这组类但样式一直缺失（竖排裸奔）——
   这次四张卡（凭证/会话/开放平台/平台映射/工作台业务卡）统一到这里。 */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.stat{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;box-shadow:var(--sh)}
.stat .ib{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat .ib.b{background:var(--blu2);color:var(--blu)}
.stat .ib.g{background:var(--grn2);color:var(--grn)}
.stat .ib.y{background:var(--amb2);color:var(--amb)}
.stat .ib.r{background:var(--red2);color:var(--redd)}
.stat .l{font-size:12.5px;color:var(--dim);font-weight:600}
.stat .v{font-size:22px;font-weight:800;color:var(--tx);line-height:1.35}
.stat .s{font-size:12px;color:var(--dim);margin-top:2px}
.g2>.card{margin-bottom:0}

/* 键值表 */
.kv{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px dashed #eceef4;font-size:13.5px}
.kv:last-child{border-bottom:0}
.kv>span:first-child{color:var(--dim);flex-shrink:0}
.kv>span:last-child{font-weight:600;color:var(--tx);text-align:right;word-break:break-all}

/* ─── 表格 ─────────────────────────────────────────────────────────────── */

.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{
  background:#f8f9fd;color:#7a8098;font-weight:600;font-size:12px;
  letter-spacing:.3px;padding:8px 7px;text-align:left;
  border-bottom:1px solid var(--bd);white-space:nowrap;
}
tbody td{padding:9px 7px;border-bottom:1px solid #eef0f6;vertical-align:middle;text-align:left}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:#fafbff}
/* ★ 2026-11-05 v0.17.1（桩哥拍板）：**全部左对齐** —— 数值列也左对齐，
   只保留等宽数字（tabular-nums）保证同列字宽一致（小数位不再纵向对齐）。 */
td.num{text-align:left;font-variant-numeric:tabular-nums}
th.num{text-align:left;font-variant-numeric:tabular-nums}
td.ops{text-align:left;white-space:nowrap}
td.ops .btn+ .btn{margin-left:6px}
/* ★ 充电抢行「快捷参数」列：输入框 → 单位 → 彩色按钮，一行两组不换行 */
td.qp-cell{white-space:nowrap}
.qp-group{display:inline-flex;align-items:center;gap:3px;margin-right:8px}
.qp-group:last-child{margin-right:0}
.qp-inp{width:34px!important;padding:3px 4px!important;font-size:12px!important;text-align:left;
  font-variant-numeric:tabular-nums;border-radius:6px!important}
.qp-unit{font-size:11px;color:var(--dim);font-family:var(--mono)}
.qp-group .btn.sm{padding:3px 7px;font-size:11.5px}
/* ★ 2026-11-05 v0.17.1：列多且行内参数常驻 —— 给枪表设最小宽度，
   宽度不够时走 .tbl-wrap 横向滚动，绝不让列被压缩到按钮重叠。
   ★ 2026-11-06 v0.18.2：删枪码/已插列、加 6 个实时指标列 → 1080px 提到 1560px，
   仍是一行不换行（th 已 nowrap，td 内容都是短数值 + cell-sub 单位）。 */
.pile-bd table{min-width:1560px}
/* 实时指标列：数值+单位同排，tabular-nums 保证同列字宽一致 */
td.metric{text-align:left;font-variant-numeric:tabular-nums;white-space:nowrap}
.gun-name-link{white-space:nowrap}
.cell-name{font-weight:600}
.cell-sub{color:var(--dim);font-size:11.5px;font-family:var(--mono)}

/* ── 配额超发（2026-11-07 桩哥口径）──────────────────────────────────────
   两类地方会用到：
     · 表格里「已建 / 授权」数字：客户的配额超过父总代授权时标红
     · 小字「分配 N（超发 M）」：总代已经分给客户的额度超过自己的授权
   服务端已经禁止新发生超发（409 QUOTA_ALLOC_EXCEEDED），这个类只负责让
   历史遗留数据在界面上看得见。 */
.over{color:var(--red)}
.cell-sub.over{color:var(--red);font-weight:600}
.s.over{color:var(--red);font-weight:600}

/* ── 分级树（2026-11-04 三期：平台「全部站点」总代 → 客户 → 站点） ─────────
   ★ 以前 tenants.js 里用了 .child-row 类，但 app.css 从没定义过 —— 又一处
     "类名不存在"的坑。这次按层级把背景、字重、缩进一次性定义清楚。 */
.tree-tg{
  border:0;background:transparent;cursor:pointer;padding:0 6px 0 0;
  font-size:12px;color:var(--dim);line-height:1;vertical-align:middle;
}
.tree-tg:hover{color:var(--fg,#1a1a1a)}
.tree-l1>td{background:#f7f8fc;border-top:1px solid var(--bd)}
.tree-l1 .cell-name{font-size:14.5px}
.tree-l2>td{background:#fcfcfe}
.tree-l2 .cell-name{font-size:13.5px;font-weight:500}
.tree-l3 .cell-name{font-size:13.5px;font-weight:400}
.tree-l3>td{background:#fff}
.tree-ind{vertical-align:middle}
/* ★ 2026-11-07：整行可点展开/收起（按钮除外）—— 悬停微亮提示可点 */
.tree-click{cursor:pointer}
.tree-click:hover>td{background:#eef1f8}
/* ★ 2026-11-07（桩哥需求）：名字后的登录账号「（zhongka1）」—— 比名字弱一级 */
.acct{color:var(--dim);font-weight:400;font-size:.92em}

/* 表格下方的口径说明 */
.tbl-note{
  padding:10px 16px;border-top:1px solid var(--bd);
  background:#fcfdfe;color:var(--dim);font-size:12.5px;line-height:1.7;
}
.tbl-note b{color:var(--tx2)}

.empty{padding:44px 16px;text-align:center;color:var(--dim)}
.empty .et{font-weight:600;color:var(--tx2);margin-bottom:4px}
.empty .ed{font-size:13.5px}

/* ─── 状态 pill ────────────────────────────────────────────────────────── */

/* ★ 2026-11-04（需求 A4）：kv 值格里放徽章（启用中/豁免…）会被 text-align:right
   推到最右，看着像"没对齐"。pill 改成块级就永远靠左。 */
.kv>span:last-child .pill,.mdl .kv>span:last-child .pill{display:flex;width:max-content}
.pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;
  border:1px solid transparent;white-space:nowrap;
}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.pill.on{background:var(--grn2);color:#0a7a5c;border-color:#c2e9d9}
.pill.off{background:var(--red2);color:#c2334e;border-color:#f3ccd4}
.pill.w{background:var(--amb2);color:#a06a05;border-color:#eedfae}
.pill.n{background:#eef0f6;color:#6b7288;border-color:#dfe3ee}
.pill.b{background:var(--blu2);color:var(--blu);border-color:#cfdffa}

/* ─── 按钮（照原型的层级） ──────────────────────────────────────────────── */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--red);color:#fff;border:1px solid var(--red);border-radius:8px;
  padding:6px 12px;font-size:13.5px;font-weight:600;cursor:pointer;
  box-shadow:0 1px 2px rgba(230,69,96,.25);transition:background .15s;
  font-family:inherit;white-space:nowrap;
}
.btn:hover{background:var(--redd);border-color:var(--redd)}
.btn:disabled{opacity:.55;cursor:not-allowed}
/* 危险确认（弹窗里用）：另一种红，与品牌红区分 */
.btn.danger{background:#d64545;border-color:#d64545;color:#fff}
.btn.danger:hover{background:#c03a3a;border-color:#c03a3a}
/* 次要：白底灰字 —— ★ 表格行内的操作一律用它，列表里不出现红实心按钮 */
.btn.sec{background:#fff;color:#454b63;border-color:var(--bd2);box-shadow:none}
.btn.sec:hover{background:#f7f8fc;color:var(--tx)}
/* 幽灵 */
.btn.gho{background:transparent;border-color:transparent;color:var(--tx2);box-shadow:none}
.btn.gho:hover{background:#eef0f6;color:var(--tx)}
/* 正向 */
.btn.grn{background:var(--grn);border-color:var(--grn);box-shadow:0 1px 2px rgba(13,158,119,.25)}
.btn.grn:hover{background:#0b8564;border-color:#0b8564}
/* ★ 2026-11-05 v0.17.1（桩哥需求）：按钮语义化彩色 —— 同一动作全站同色，
   三角色（总管理员/总代/客户）统一。hover 统一加深一档，disabled 沿 .55。 */
/* 查看 / 信息类：二维码、站点详情、日志 */
.btn.info{background:#378ADD;border-color:#378ADD;color:#fff;box-shadow:0 1px 2px rgba(55,138,221,.25)}
.btn.info:hover{background:#2A6FB8;border-color:#2A6FB8}
/* 反向 / 中间态 / 申请类：拔充电抢、暂停站点、出口申请、定时插拔 */
.btn.warn{background:#BA7517;border-color:#BA7517;color:#fff;box-shadow:0 1px 2px rgba(186,117,23,.25)}
.btn.warn:hover{background:#9C610F;border-color:#9C610F}
/* 参数 / 配置类：金额上限设定、设备参数、修改密码 */
.btn.pur{background:#534AB7;border-color:#534AB7;color:#fff;box-shadow:0 1px 2px rgba(83,74,183,.25)}
.btn.pur:hover{background:#433B9C;border-color:#433B9C}
/* 数据 / 容量类：电池容量设定、参数下发 */
.btn.teal{background:#0F6E56;border-color:#0F6E56;color:#fff;box-shadow:0 1px 2px rgba(15,110,86,.25)}
.btn.teal:hover{background:#0B5744;border-color:#0B5744}
/* ★ 2026-11-04 四期（桩哥需求 7）：按钮全局收紧一档，长文案按钮不再显得臃肿 */
.btn.sm{padding:3px 8px;font-size:12px;border-radius:6px}
.btn.block{width:100%;padding:10px;font-size:14.5px}

/* ─── 表单 ─────────────────────────────────────────────────────────────── */

.inp{
  background:#fff;border:1px solid var(--bd2);border-radius:8px;
  padding:7px 11px;font-size:13.5px;color:var(--tx);outline:none;width:100%;
  transition:border .15s,box-shadow .15s;font-family:inherit;
}
.inp:focus{border-color:#f0a4b1;box-shadow:0 0 0 3px rgba(230,69,96,.12)}
select.inp{cursor:pointer}
.fld{display:flex;flex-direction:column;gap:5px}
.fld label{font-size:12px;color:var(--dim);font-weight:600}
.fld label i{color:var(--red);font-style:normal}
.fld .fh{font-size:11.5px;color:var(--dim);line-height:1.5}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.frow{display:flex;gap:8px}
.frow>.inp{flex:1 1 auto;min-width:0}
.factions{
  display:flex;gap:8px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--bd);
}

/* ─── 弹窗（三语义：危险 / 普通 / 只读） ────────────────────────────────── */

.ov{
  position:fixed;inset:0;background:rgba(20,24,38,.42);
  display:flex;align-items:center;justify-content:center;
  z-index:900;padding:24px;animation:fade .16s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}

.mdl{
  background:var(--card);border-radius:12px;width:100%;max-width:520px;
  max-height:88vh;overflow:auto;animation:pop .18s ease;
  box-shadow:0 12px 40px rgba(20,24,38,.18);
}
.mdl-hd{padding:16px 20px 0;display:flex;align-items:flex-start;gap:10px}
.mdl-hd .ti{font-size:15.5px;font-weight:700;color:var(--tx);line-height:1.5}
.mdl-hd .x{
  margin-left:auto;cursor:pointer;color:#9aa1b5;font-size:18px;line-height:1;
  padding:2px 6px;border-radius:6px;background:none;border:0;
}
.mdl-hd .x:hover{background:#f1f2f6;color:#5f6678}
.mdl-bd{padding:12px 20px 4px;font-size:13.5px;line-height:1.85;color:var(--tx2)}
.mdl-bd b{color:var(--tx)}
.mdl-ft{padding:16px 20px 18px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.mdl-ft .btn{min-width:88px;justify-content:center}

/* 弹窗内的影响面清单：★ 危险操作必须列"会发生什么" */
.mdl .impact{
  background:#fef3f3;border:1px solid #f6c9c9;border-radius:8px;
  padding:10px 12px;font-size:12.5px;color:#8f2b2b;line-height:1.8;margin-top:10px;
}
.mdl .impact ul{margin:4px 0 0 16px}
.mdl .impact li{margin:2px 0}
.mdl .info{
  background:#f2f7fd;border:1px solid #cfe0f4;border-radius:8px;
  padding:10px 12px;font-size:12.5px;color:#2b4d7a;line-height:1.8;margin-top:10px;
}
.mdl .lead{font-size:13.5px;line-height:1.85;margin-bottom:4px}
.mdl .kv{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px dashed #eceef4;font-size:13.5px}
.mdl .kv:last-child{border-bottom:0}
.mdl .kv>span:first-child{color:#6d7492}
.mdl .kv>span:last-child{font-weight:600;color:var(--tx);text-align:right;word-break:break-all}
.mdl .fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}

/* 弹窗内的竖排表单（改密码用） */
.cpw-form{display:flex;flex-direction:column;gap:12px;margin-top:8px}

/* 密码明文的展示框（只显示一次） */
.secret-row{display:flex;align-items:center;gap:8px;margin-top:10px}
.secret-val{
  flex:1;font-family:var(--mono);font-size:15px;letter-spacing:.5px;
  background:#f8f9fd;border:1px dashed var(--bd2);border-radius:8px;
  padding:9px 12px;color:var(--tx);word-break:break-all;
}

/* ─── 轻提示 ────────────────────────────────────────────────────────────── */

.toast-host{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%);
  z-index:950;display:flex;flex-direction:column;gap:8px;pointer-events:none;
}
.toast{
  display:flex;align-items:center;gap:8px;
  background:#252b3d;color:#fff;font-size:13.5px;
  padding:10px 18px;border-radius:8px;
  box-shadow:0 8px 24px rgba(20,24,38,.22);animation:pop .18s ease;
}
.toast .ic{width:14px;height:14px;color:#7fe0b8}
.toast.err{background:#8f2b2b}
.toast.err .ic{color:#ffc9c9}
.toast.info{background:#4a4f63}
.toast.info .ic{color:#cfd4e6}

/* ─── 登录页（照原型：浅灰底 + 白卡片 + 红按钮） ────────────────────────── */

.login-body{background:var(--bg)}
.login{display:grid;place-items:center;min-height:100vh;padding:40px 20px}
.login-card{
  width:100%;max-width:404px;background:#fff;border:1px solid var(--bd);
  border-radius:16px;padding:36px;box-shadow:var(--sh2);
}
.lc-brand{display:flex;align-items:center;gap:10px;margin-bottom:24px}
.lc-brand b{font-size:15.5px;font-weight:750;letter-spacing:.3px}
.login-card h2{font-size:19px;margin-bottom:22px;font-weight:700}
.login-card .fld{margin-bottom:16px}
.login-card .errbox{margin-bottom:14px}
.login-card .btn{width:100%;padding:10px;font-size:14.5px;margin-top:4px}
.login-foot{
  margin-top:18px;text-align:center;color:var(--dim);font-size:12px;letter-spacing:.3px;
}

/* ─── 错误页 ────────────────────────────────────────────────────────────── */

.err-page{max-width:520px;margin:48px auto;text-align:center}
.err-status{
  font-family:var(--mono);font-size:44px;font-weight:700;letter-spacing:2px;
  color:#c7d0db;line-height:1;
}
.err-title{margin:14px 0 6px;font-size:19px;font-weight:700}
.err-msg{margin:0;color:var(--tx2);font-size:14.5px}
.err-actions{display:flex;justify-content:center;gap:10px;margin-top:20px}
.err-req{margin-top:24px;color:var(--dim);font-size:12px}
.err-req code{font-family:var(--mono);font-size:12px;color:var(--tx2)}

/* ─── 建站向导：垂直三步导轨（2026-11-04） ───────────────────────────────
   ★ 以前三步是 2 列网格：第一步在左上、第二步在右上（一整坨）、第三步跨两列。
     第二步字段最多，挤在右边看起来跟另外两步不是一件事。改成竖排导轨后
     阅读顺序与操作顺序一致，也不需要在窄屏重新折行。
   ──────────────────────────────────────────────────────────────────────── */

.steps{list-style:none;margin:0 0 4px;padding:0}
.step{display:flex;gap:14px}
.step-rail{width:30px;flex-shrink:0;display:flex;flex-direction:column;align-items:center}
.step-no{
  width:26px;height:26px;border-radius:50%;background:#e64560;color:#fff;
  display:grid;place-items:center;font-size:13.5px;font-weight:700;
  flex-shrink:0;margin-top:14px;box-shadow:0 2px 6px rgba(230,69,96,.28);
}
.step:not(:last-child) .step-rail::after{
  content:"";flex:1;width:2px;background:var(--bd);margin:6px 0;
}
.step-body{flex:1;min-width:0;margin-bottom:14px}

/* ─── 站点设置抽屉（2026-11-04） ─────────────────────────────────────────
   guns 页的站点分组头 / 平台的全部站点列表都打开这一层。
   ──────────────────────────────────────────────────────────────────────── */

.drawer-mask{position:fixed;inset:0;background:rgba(22,26,40,.34);z-index:800}
body.drawer-open{overflow:hidden}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(700px,94vw);
  background:var(--card);border-left:1px solid var(--bd);
  box-shadow:-18px 0 48px rgba(20,24,38,.18);
  z-index:810;display:flex;flex-direction:column;
}
.drawer-hd{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--bd);flex-shrink:0;
}
.dh-t{font-size:15px;font-weight:750}
.dh-s{font-size:12.5px;color:var(--dim);margin-top:2px}
.drawer-bd{padding:16px 18px 40px;overflow:auto;flex:1}
.ops-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ops-actions{display:flex;align-items:center;gap:8px;margin:10px 0;flex-wrap:wrap}
.pnl{
  border:1px solid var(--bd);border-radius:12px;padding:12px 14px;
  margin-top:14px;background:var(--card);
}
.pnl-h{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:13.5px;font-weight:650;margin-bottom:10px;
}
.pnl-h .cs{font-weight:400}
.pnl .fgrid{margin-top:0}

/* ─── 我的充电抢：按站点折叠的分组（2026-11-04） ──────────────────────── */

.stgroups{display:flex;flex-direction:column}
.stgroup{border-bottom:1px solid var(--bd)}
.stgroup:last-child{border-bottom:0}
/* ★ 2026-11-04 四期（桩哥需求 5）：三层底色明显区分
   L1 站点头 深灰蓝 #E9EDF4 + 品牌红左竖条 / L2 设备头 浅灰 #F5F7FA / L3 充电抢行 白底 */
.stgroup-hd{
  display:flex;align-items:center;gap:10px;padding:12px 16px 12px 13px;
  cursor:pointer;user-select:none;
  background:#E9EDF4;border-left:3px solid #e64560;
}
.stgroup-hd:hover{background:#E1E6EF}
.caret{width:12px;flex-shrink:0;color:var(--dim);font-size:13px;text-align:center}
.sg-title{display:flex;align-items:center;gap:8px;font-size:13px}
.stgroup-bd .tbl-wrap{border-top:1px solid var(--bd)}
.sg-fault{
  display:flex;gap:6px;flex-wrap:wrap;align-items:center;
  padding:9px 16px;background:#fdf2f4;border-top:1px solid #f3ccd4;
  color:#a82a44;font-size:13px;line-height:1.7;
}
.sg-fault .dim{color:#b56767}

/* ─── 我的充电抢：设备编码层（2026-11-04 需求 10 三级折叠） ────────────── */

.pile-blk{border-top:1px solid var(--bd)}
.pile-hd{
  display:flex;align-items:center;gap:8px;padding:9px 16px 9px 26px;
  cursor:pointer;user-select:none;background:#F5F7FA;
}
.pile-hd:hover{background:#EEF1F7}
.pile-code{font-size:13.5px;font-weight:650}
.pile-bd .tbl-wrap{border-top:1px solid var(--bd)}
.pile-bd tbody tr td:first-child{padding-left:40px}
.sched-box{padding:12px 16px;border-top:1px dashed var(--bd2);background:#fff}

/* 行内「参数设置」（以前是一张独立的大卡片，要滚到页面底部改） */
.prm-row>td{background:var(--card2)}
.prm-box{
  padding:10px 12px;border:1px dashed var(--bd2);border-radius:10px;
  background:#fff;margin:6px 0;
}
.prm-t{font-size:13px;font-weight:650;margin-bottom:8px}

/* ─── 响应式 ────────────────────────────────────────────────────────────── */

@media(max-width:1080px){
  .g2{grid-template-columns:1fr}
}
@media(max-width:960px){
  /* 原型在 960px 直接隐藏侧栏；我们改成顶部横排，至少还能导航 */
  .app{flex-direction:column}
  .sidebar{
    width:100%;height:auto;position:static;
    flex-direction:column;
  }
  .nav{display:flex;flex-wrap:wrap;gap:4px;padding:0 10px 10px;overflow:visible}
  .navgrp{width:100%;padding:8px 10px 2px}
  .nav-a{margin:0;padding:7px 12px}
  .nav-a .tag{margin-left:6px}
  .side-foot{border-top:1px solid rgba(255,255,255,.07)}
  .content{padding:16px}
  .topbar{padding:0 16px}
  .tb-crumb{display:none}
}
@media(max-width:560px){
  .tb-user{display:none}
  .login-card{padding:26px 20px}
  .disclaim{font-size:12px;padding:6px 14px}
}

/* ── 充电抢二维码弹窗（2026-11-05 桩哥需求：名称点击弹码）────────────────
   结构：全屏遮罩 > 白卡片（深色标题栏 / 桩编号 / 二维码白块 / 扫码提示 / 关闭）
   只有「我的充电抢」页用，样式就近放 guns.js 逻辑旁边维护。 */
.gun-name-link{color:var(--blu);font-weight:500;cursor:pointer;border-bottom:1px dashed transparent;user-select:none}
.gun-name-link:hover{border-bottom-color:var(--blu)}
.qr-mask{position:fixed;inset:0;background:rgba(22,26,40,.45);z-index:900;display:flex;align-items:center;justify-content:center}
.qr-card{background:var(--card);border-radius:12px;width:320px;max-width:calc(100vw - 40px);overflow:hidden;box-shadow:var(--sh2)}
.qr-head{background:var(--side1);color:#fff;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.qr-head .t{font-size:15px;font-weight:500}
.qr-head .x{cursor:pointer;font-size:18px;line-height:1;color:#c9cde0;padding:0 2px;background:none;border:none;font-family:inherit}
.qr-head .x:hover{color:#fff}
.qr-body{padding:16px 20px 8px;text-align:center}
.qr-pile{font-size:13px;color:var(--tx2)}
.qr-pile code{font-family:var(--mono);color:var(--tx)}
.qr-imgwrap{border:1px solid var(--bd);border-radius:8px;padding:12px;margin:12px auto 4px;width:206px;background:#fff}
.qr-imgwrap img{display:block;width:180px;height:180px}
.qr-empty{width:180px;height:180px;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:13px;padding:12px;margin:0 auto}
.qr-tip{font-size:13px;color:var(--tx2);margin-top:2px}
.qr-foot{padding:12px 20px 16px}
.qr-foot .btn{width:100%}
/* ★ 2026-11-05 v0.17.0：设备参数弹框底部（两按钮）改一行式右对齐，等高，
   取消在左（次按钮）/ 保存在右（主按钮）；覆盖上面的 width:100% */
.qr-foot.acts{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding-top:14px;border-top:1px solid var(--bd)}
.qr-foot.acts .btn{width:auto;min-width:92px;height:36px;padding:0 18px;border-radius:8px}