/* ==========================================================================
   利刃 · 远控中枢 — 设计系统 v1
   锚点:登录页(深海军蓝 + 蓝青)  主按钮:统一暖白渐变
   三套配色:navy / warm / ink — 除登录页外任何页面点一下即换
   硬约束:整页不滚 · 不拉伸 · 文字与按钮不裁切
   ========================================================================== */

/* ---------- 1. 变量 ---------- */
:root{
  --fs: clamp(11px, calc(.34vw + .52vh), 14.2px);
  --fs-sm: max(10px, calc(var(--fs) - 1.4px));
  --fs-xs: max(9.5px, calc(var(--fs) - 2.4px));
  --fs-lg: calc(var(--fs) + 2.2px);
  --row: clamp(30px, 4.1vh, 40px);
  --gap: clamp(6px, .62vw, 12px);
  --pad: clamp(8px, .78vw, 14px);
  --r: 8px;
  --side: clamp(158px, 12.4vw, 212px);
  --top: clamp(40px, 5.4vh, 54px);
  --ff: "PingFang SC","HarmonyOS Sans SC","MiSans","Noto Sans CJK SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono: ui-monospace,"SF Mono",Menlo,Consolas,"Noto Sans Mono CJK SC",monospace;

  /* 暖白渐变主按钮(三套配色共用,是品牌签名) */
  --warm-1:#fffefb; --warm-2:#faf1de; --warm-3:#eedcbc; --warm-txt:#2b2318;
}

/* 深海(登录页锚点) */
html[data-theme="navy"]{
  --bg:#080c16; --bg2:#0a1020;
  --panel:rgba(16,24,40,.92); --panel-2:#0d1526;
  --line:rgba(255,255,255,.075); --line-2:rgba(122,170,255,.20);
  --txt:#e9efFC; --mut:#8796b4; --dim:#5c6c8c;
  --acc:#3b82f6; --acc-2:#38bdf8; --acc-soft:rgba(59,130,246,.14);
  --ok:#38d39f; --bad:#f0574b; --warn:#f0b429;
  --glow:0 10px 34px rgba(8,18,44,.55);
  --body-glow:radial-gradient(1200px 700px at 78% -18%, #12224a 0%, #0a1224 46%, #070a12 100%);
}
/* 暖白 */
html[data-theme="warm"]{
  --bg:#f5efe4; --bg2:#fbf7ef;
  --panel:rgba(255,253,248,.95); --panel-2:#fffdf8;
  --line:#e6dcc9; --line-2:#d8c9ad;
  --txt:#2b2419; --mut:#8d7f6a; --dim:#ab9e88;
  --acc:#b0762f; --acc-2:#d79f52; --acc-soft:rgba(176,118,47,.12);
  --ok:#2f9e6f; --bad:#c2412f; --warn:#b5821a;
  --glow:0 8px 26px rgba(120,96,60,.14);
  --body-glow:radial-gradient(1200px 700px at 78% -18%, #fffdf7 0%, #f7f1e4 52%, #f2ead9 100%);
}
/* 墨刃 */
html[data-theme="ink"]{
  --bg:#07080a; --bg2:#0b0c0f;
  --panel:#111317; --panel-2:#0d0f12;
  --line:#23262c; --line-2:#31353d;
  --txt:#f1f3f6; --mut:#9ba2ad; --dim:#6b7280;
  --acc:#e0453a; --acc-2:#ff7a5c; --acc-soft:rgba(224,69,58,.14);
  --ok:#37c793; --bad:#ef4444; --warn:#e0a828;
  --glow:0 10px 34px rgba(0,0,0,.6);
  --body-glow:radial-gradient(1200px 700px at 78% -18%, #1a1012 0%, #0c0d10 48%, #060708 100%);
}

/* ---------- 2. 基础 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; margin:0; overflow:hidden; }
body{
  font-family:var(--ff); font-size:var(--fs); line-height:1.25; color:var(--txt);
  background:var(--body-glow); background-attachment:fixed;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background-color .22s ease, color .22s ease;
}
/* 全局不出现滚动条 */
*{ scrollbar-width:none; -ms-overflow-style:none; }
*::-webkit-scrollbar{ width:0; height:0; display:none; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button,input,select{ font-family:inherit; }
h1,h2,h3,p{ margin:0; }
.mut{ color:var(--mut); }
.clip{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; display:block; }
.empty{ display:grid; place-items:center; height:100%; min-height:60px; color:var(--mut); font-size:var(--fs-sm); padding:var(--pad); text-align:center; }

/* 主题切换:所有带底色的块都平滑过渡 */
html.theming .card, html.theming .side, html.theming .topbar, html.theming .btn,
html.theming .inp, html.theming .chip, html.theming .tag, html.theming .row{ transition:background-color .22s, color .22s, border-color .22s, box-shadow .22s; }

/* ---------- 3. 外壳 ---------- */
.boot{ position:fixed; inset:0; display:grid; place-content:center; justify-items:center; gap:12px; color:var(--mut); font-size:var(--fs-sm); z-index:60; }
.boot-ring{ width:34px; height:34px; border-radius:50%; border:2px solid var(--line-2); border-top-color:var(--acc); animation:spin .9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.shell{ display:grid; grid-template-columns:var(--side) minmax(0,1fr); height:100vh; overflow:hidden; }

/* 侧栏 */
.side{
  display:flex; flex-direction:column; min-height:0; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
  border-right:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.brand{ display:flex; align-items:center; gap:8px; height:var(--top); padding:0 calc(var(--pad) - 2px); border-bottom:1px solid var(--line); flex:0 0 auto; }
.brand-logo{ width:22px; height:22px; flex:0 0 auto; }
.brand-txt{ display:flex; flex-direction:column; min-width:0; line-height:1.1; }
.brand-txt b{ font-size:var(--fs-lg); letter-spacing:.06em; }
.brand-txt span{ font-size:var(--fs-xs); color:var(--dim); letter-spacing:.04em; }

.nav{ flex:1 1 auto; min-height:0; overflow:hidden; padding:6px 0 2px; }
.nav-group{
  font-size:var(--fs-xs); color:var(--dim); letter-spacing:.12em; text-transform:uppercase;
  padding:calc(var(--gap) * .55) calc(var(--pad) + 2px) 3px;
}
.nav-group:first-child{ padding-top:2px; }
.nav-item{
  display:flex; align-items:center; gap:8px; height:calc(var(--row) - 2px);
  padding:0 calc(var(--pad) + 2px); color:var(--mut); font-size:var(--fs-sm);
  border-left:2px solid transparent; transition:background-color .15s, color .15s, border-color .15s;
  position:relative;
}
.nav-item svg{ width:15px; height:15px; flex:0 0 auto; opacity:.9; }
.nav-item span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-item:hover{ color:var(--txt); background:rgba(255,255,255,.04); }
.nav-item.on{ color:var(--txt); background:var(--acc-soft); border-left-color:var(--acc); font-weight:600; }
.nav-item .soon{
  margin-left:auto; font-style:normal; font-size:var(--fs-xs); color:var(--dim);
  border:1px solid var(--line-2); border-radius:4px; padding:0 3px; line-height:1.3;
}
.side-foot{ flex:0 0 auto; padding:calc(var(--gap) * .8) var(--pad); border-top:1px solid var(--line); display:flex; align-items:center; gap:6px; }
#themebox{ display:flex; gap:6px; }
.tdot{
  width:16px; height:16px; border-radius:50%; cursor:pointer; padding:0;
  border:1.5px solid var(--line-2); background:#0b1020; box-shadow:0 0 0 1px rgba(0,0,0,.28); transition:transform .15s, box-shadow .15s;
}
.tdot[data-t="navy"]{ background:linear-gradient(135deg,#0b1224,#2f6fd0); }
.tdot[data-t="warm"]{ background:linear-gradient(135deg,#fffdf7,#e7d4b2); }
.tdot[data-t="ink"]{ background:linear-gradient(135deg,#111,#e0453a); }
.tdot:hover{ transform:translateY(-1px); }
.tdot.on{ box-shadow:0 0 0 2px var(--acc); }

/* 主区 */
.main{ display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; }
.topbar{
  flex:0 0 auto; height:var(--top); display:flex; align-items:center; justify-content:space-between; gap:var(--gap);
  padding:0 var(--pad); border-bottom:1px solid var(--line); background:rgba(255,255,255,.012);
}
.tb-left{ display:flex; align-items:baseline; gap:8px; min-width:0; }
.tb-left h1{ font-size:var(--fs-lg); font-weight:700; letter-spacing:.02em; white-space:nowrap; }
.crumb{ font-size:var(--fs-xs); color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-right{ display:flex; align-items:center; gap:6px; min-width:0; }
.chips{ display:flex; gap:6px; min-width:0; overflow:hidden; }
.chip{
  display:inline-flex; align-items:center; gap:5px; height:calc(var(--row) - 8px); padding:0 8px;
  font-size:var(--fs-xs); color:var(--mut); background:rgba(255,255,255,.035);
  border:1px solid var(--line); border-radius:6px; white-space:nowrap;
}
.chip b{ color:var(--txt); font-weight:600; }
.chip.off{ color:var(--dim); }
.chip .clip{ max-width:120px; }
.led{ width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 6px var(--ok); flex:0 0 auto; }
.chip.off .led{ background:var(--dim); box-shadow:none; }
.user{ display:flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--mut); white-space:nowrap; padding-left:4px; }
.user i{ width:6px; height:6px; border-radius:50%; background:var(--acc); box-shadow:0 0 6px var(--acc); }

.view{ flex:1 1 auto; min-height:0; min-width:0; display:flex; flex-direction:column; gap:var(--gap); padding:var(--gap); overflow:hidden; }

/* ---------- 4. 通用件 ---------- */
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--glow); display:flex; flex-direction:column; min-height:0; min-width:0; overflow:hidden;
}
.ch{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:calc(var(--gap) * .7) calc(var(--pad) - 2px); border-bottom:1px solid var(--line);
  font-size:var(--fs-sm); font-weight:600; letter-spacing:.02em;
}
.ch span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch em{ font-style:normal; font-size:var(--fs-xs); color:var(--dim); white-space:nowrap; }

.field{ display:flex; align-items:center; gap:6px; min-width:0; }
.field.inline{ flex:0 0 auto; }
.fg{ font-size:var(--fs-xs); color:var(--mut); white-space:nowrap; flex:0 0 auto; letter-spacing:.02em; }
.inp{
  height:var(--row); min-width:0; flex:1 1 auto; padding:0 8px; color:var(--txt);
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:6px;
  font-size:var(--fs-sm); outline:none; transition:border-color .15s, box-shadow .15s, background-color .15s;
}
.inp::placeholder{ color:var(--dim); }
.inp:focus{ border-color:var(--acc); box-shadow:0 0 0 2px var(--acc-soft); }
.inp.tiny{ height:calc(var(--row) - 6px); font-size:var(--fs-xs); flex:0 0 auto; }
select.inp{ appearance:none; padding-right:18px; background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%); background-position:calc(100% - 11px) 55%, calc(100% - 7px) 55%; background-size:4px 4px,4px 4px; background-repeat:no-repeat; cursor:pointer; }
.ck{ width:13px; height:13px; accent-color:var(--acc); cursor:pointer; flex:0 0 auto; margin:0; }

/* 按钮:不裁字、不拉伸、自适应 */
.btn{
  --h:var(--row);
  height:var(--h); min-height:var(--h); max-height:none;
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  padding:0 clamp(7px, .62vw, 13px);
  border-radius:6px; border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  color:var(--txt); font-size:var(--fs-sm); font-weight:500; line-height:1.1; letter-spacing:.01em;
  white-space:nowrap; overflow:visible; cursor:pointer;
  transition:transform .12s ease, box-shadow .16s ease, background-color .16s, border-color .16s, color .16s;
}
.btn:hover{ border-color:var(--line-2); background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.04)); }
.btn:active{ transform:translateY(1px); }
.btn.sm{ --h:calc(var(--row) - 6px); font-size:var(--fs-xs); padding:0 clamp(6px,.5vw,10px); }
.btn.wide{ width:100%; justify-content:flex-start; }
.btn.ghost{ background:transparent; }
.btn.danger{ color:var(--bad); border-color:color-mix(in srgb, var(--bad) 40%, var(--line)); }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }

/* 暖白渐变主按钮 = 品牌签名 */
.btn.primary{
  background:linear-gradient(180deg, var(--warm-1) 0%, var(--warm-2) 56%, var(--warm-3) 100%);
  color:var(--warm-txt); border-color:rgba(255,255,255,.55); font-weight:650;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 4px 14px rgba(0,0,0,.22);
}
.btn.primary:hover{
  background:linear-gradient(180deg, #fffefd 0%, #fcf4e4 52%, #f1e1c4 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 6px 18px rgba(0,0,0,.26); transform:translateY(-1px);
}
.btn.primary:active{ transform:translateY(0); }

/* 标签 */
.tag{
  display:inline-flex; align-items:center; gap:4px; height:calc(var(--row) - 10px); padding:0 7px;
  border-radius:5px; font-size:var(--fs-xs); white-space:nowrap; border:1px solid var(--line);
  color:var(--mut); background:rgba(255,255,255,.03);
}
.tag.ok{ color:var(--ok); border-color:color-mix(in srgb, var(--ok) 42%, transparent); background:color-mix(in srgb, var(--ok) 12%, transparent); }
.tag.off{ color:var(--dim); }
.tag.bad{ color:var(--bad); border-color:color-mix(in srgb, var(--bad) 44%, transparent); background:color-mix(in srgb, var(--bad) 12%, transparent); }
.tag.wait{ color:var(--warn); border-color:color-mix(in srgb, var(--warn) 44%, transparent); background:color-mix(in srgb, var(--warn) 12%, transparent); }
.tag.ok .led{ background:var(--ok); }
.tag.off .led{ background:var(--dim); box-shadow:none; }

/* ---------- 5. 设备页 ---------- */
.toolbar{ flex:0 0 auto; display:flex; align-items:center; gap:var(--gap); flex-wrap:wrap; min-width:0; }
.toolbar .field{ flex:1 1 150px; max-width:280px; }
.toolbar .field .inp{ flex:1 1 auto; }
.tb-actions{ display:flex; align-items:center; gap:6px; margin-left:auto; flex:0 0 auto; }

.tablecard{ flex:1 1 auto; min-height:0; }
.thead{ flex:0 0 auto; border-bottom:1px solid var(--line-2); background:rgba(255,255,255,.02); }
.tbody{ flex:1 1 auto; min-height:0; overflow:hidden; }
.grid{ width:100%; border-collapse:collapse; table-layout:fixed; }
.grid th{
  height:calc(var(--row) - 4px); text-align:left; font-size:var(--fs-xs); font-weight:500;
  color:var(--mut); letter-spacing:.04em; padding:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.grid td{ height:var(--row); padding:0 8px; font-size:var(--fs-sm); vertical-align:middle; overflow:hidden; }
.row{ border-bottom:1px solid var(--line); cursor:pointer; transition:background-color .13s; }
.row:hover{ background:rgba(255,255,255,.045); }
.cell2{ display:flex; flex-direction:column; justify-content:center; min-width:0; line-height:1.25; }
.cell2 b{ font-weight:600; font-size:var(--fs-sm); }
.cell2 i{ font-style:normal; font-size:var(--fs-xs); color:var(--dim); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cell2 b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 设备表格里压成单行:主信息 + 灰色副信息同排,不折行不撑高 */
.grid .cell2{ flex-direction:row; align-items:baseline; gap:7px; }
.grid .cell2 i{ margin-top:0; flex:0 1 auto; }
.grid .cell2 b{ flex:0 0 auto; max-width:64%; }
[hidden]{ display:none !important; }

.note{ color:var(--mut); cursor:text; border-bottom:1px dashed var(--line-2); }
.note:hover{ color:var(--txt); }

.pager{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:var(--gap); font-size:var(--fs-xs); color:var(--mut); }
.pg-btns{ display:flex; align-items:center; gap:6px; }

/* ---------- 6. 控制台 ---------- */
.devstrip{ flex:0 0 auto; display:flex; align-items:center; gap:var(--gap); min-width:0; overflow:hidden; }
.devstrip .field{ flex:0 0 clamp(180px,16vw,260px); }
.strip-chips{ display:flex; gap:5px; min-width:0; overflow:hidden; flex:1 1 auto; }
.console{
  flex:1 1 auto; min-height:0; min-width:0;
  display:grid; grid-template-columns:minmax(0,1.62fr) clamp(186px,13.6vw,232px) minmax(0,1.06fr);
  gap:var(--gap);
}
.c-mirror{ min-width:0; }
.mirror{ flex:1 1 auto; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); padding:var(--gap); }
.phone{
  position:relative; min-width:0; min-height:0; border-radius:7px; border:1px solid var(--line-2);
  background:linear-gradient(180deg,#05070c,#04060a); display:grid; place-items:center; overflow:hidden;
}
.phone img{ width:100%; height:100%; object-fit:contain; display:none; cursor:crosshair; }
.phone.has img{ display:block; }
.phone .ph{ font-size:var(--fs-xs); color:var(--dim); letter-spacing:.06em; }
.phone.has .ph{ position:absolute; left:6px; bottom:4px; opacity:.55; }

.c-matrix{ display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--gap) * .7); min-height:0; min-width:0; }
.mxcol{ display:grid; grid-auto-rows:minmax(0,1fr); gap:calc(var(--gap) * .55); min-height:0; }
.btn.mx{
  min-height:0; height:auto; font-size:var(--fs-xs); padding:2px 4px; line-height:1.15;
  white-space:normal; text-align:center; word-break:keep-all;
}
.btn.mx:hover{ border-color:var(--acc); color:var(--txt); }

.c-right{ display:grid; grid-template-rows:minmax(0,1fr) auto; gap:var(--gap); min-height:0; min-width:0; }
.c-fn{ min-height:0; }
.fngrid{ flex:1 1 auto; min-height:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:minmax(0,1fr); gap:calc(var(--gap) * .6); padding:var(--gap); }
.btn.fn{ min-height:0; height:100%; padding:4px 6px; font-size:var(--fs-sm); white-space:nowrap; line-height:1.2; }
.btn.fn.fin{ font-weight:600; color:var(--acc); border-color:var(--acc-soft); }
.btn.fn:hover{ border-color:var(--acc); }
.fin{
  cursor:pointer; align-items:flex-start; justify-content:center; gap:2px; padding:calc(var(--gap) * .7);
  text-align:left; color:var(--txt); font:inherit; transition:border-color .15s, transform .12s;
}
.fin:hover{ border-color:var(--acc); transform:translateY(-1px); }
.fin b{ font-size:var(--fs-sm); }
.fin i{ font-style:normal; font-size:var(--fs-xs); color:var(--dim); }

.cmdwrap{ flex:0 0 auto; display:flex; flex-direction:column; gap:calc(var(--gap) * .55); min-height:0; }
.cmdbar{ flex:0 0 auto; display:flex; align-items:center; gap:var(--gap); min-width:0; }
.cmdbar .field{ flex:1 1 auto; min-width:0; }
.cmdbar .inp{ width:100%; min-width:0; height:calc(var(--row) - 2px); }
.cmdlog{
  flex:0 0 auto; height:clamp(38px, 5.2vh, 52px); display:flex; align-items:stretch; gap:var(--gap);
  padding:calc(var(--gap) * .55) calc(var(--pad) - 2px); background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.lg-h{ font-size:var(--fs-xs); color:var(--dim); writing-mode:horizontal-tb; flex:0 0 auto; align-self:center; letter-spacing:.06em; }
.lg-body{ flex:1 1 auto; min-width:0; overflow:hidden; font-family:var(--mono); font-size:var(--fs-xs); line-height:1.5; color:var(--mut); }
.lg-line{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- 7. 构建页 ---------- */
.tabbar{ flex:0 0 auto; display:flex; align-items:center; gap:6px; min-width:0; }
.btn.tab{ --h:calc(var(--row) - 2px); border-radius:6px 6px 0 0; border-bottom-color:transparent; color:var(--mut); }
.btn.tab.on{ color:var(--txt); border-color:var(--line-2); border-bottom-color:transparent; background:var(--panel); font-weight:650; }

.build{
  flex:1 1 auto; min-height:0; min-width:0; display:grid; gap:var(--gap);
  grid-template-columns:minmax(0,1.1fr) minmax(0,.92fr) minmax(0,1.16fr);
  grid-template-rows:minmax(0,auto) minmax(0,1fr);
}
.b-config{ grid-column:1; grid-row:1 / span 2; }
.b-targets{ grid-column:2; grid-row:1; max-height:clamp(180px, 46vh, 430px); }
.b-hist{ grid-column:2; grid-row:2; }
.b-log{ grid-column:3; grid-row:1 / span 2; }

.cform{ flex:0 0 auto; display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--gap) * .7) var(--gap); padding:var(--pad); }
.cform .field{ flex-direction:column; align-items:stretch; gap:3px; }
.cform .field .inp{ width:100%; }
.perms{ flex:0 0 auto; padding:0 var(--pad) var(--pad); display:flex; flex-direction:column; gap:5px; min-height:0; }
.permwrap{ display:flex; flex-wrap:wrap; gap:4px 6px; min-height:0; overflow:hidden; }
.perm{ display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-xs); color:var(--mut); padding:2px 7px; border:1px solid var(--line); border-radius:5px; cursor:pointer; white-space:nowrap; }
.perm:hover{ border-color:var(--line-2); color:var(--txt); }
.cfgnote{ flex:1 1 auto; min-height:0; margin-top:calc(var(--gap) * .6); padding:calc(var(--gap) * .6) var(--pad); border-top:1px solid var(--line); display:flex; flex-direction:column; justify-content:flex-start; gap:2px; overflow:hidden; }
.cfgnote .nl{ display:flex; align-items:baseline; gap:8px; font-size:var(--fs-xs); line-height:1.9; min-width:0; }
.cfgnote .nl span{ flex:0 0 auto; color:var(--dim); min-width:56px; }
.cfgnote .nl b{ flex:1 1 auto; min-width:0; font-weight:500; color:var(--mut); font-family:var(--mono); }
.cfgfoot{ margin-top:auto; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:var(--gap); padding:calc(var(--gap) * .7) var(--pad); border-top:1px solid var(--line); }

.tglist{ flex:1 1 auto; min-height:0; overflow:hidden; }
.tglist, .histlist{
  display:flex; flex-direction:column; gap:4px;
  overflow-y:auto; overflow-x:hidden; scrollbar-width:none; -ms-overflow-style:none;
}
.tglist::-webkit-scrollbar, .histlist::-webkit-scrollbar{ width:0; height:0; }
.tglist > *, .histlist > *{ flex:0 0 auto; height:calc(var(--row) + 4px); }
.tglist, .histlist{ -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 16px),rgba(0,0,0,.15) 100%); mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 16px),rgba(0,0,0,.15) 100%); }
.trow{ display:flex; align-items:center; gap:8px; min-height:0; padding:0 calc(var(--pad) - 4px); border-bottom:1px solid var(--line); }
.trow .cell2{ flex:1 1 auto; min-width:0; display:flex; flex-direction:row; align-items:baseline; gap:8px; overflow:hidden; }
.cell2 .nm{ flex:0 1 auto; min-width:0; font-size:var(--fs-sm); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cell2 .mt{ flex:1 1 auto; min-width:0; font-size:var(--fs-xs); color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tacts{ display:flex; gap:4px; flex:0 0 auto; }
.auto{
  flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:calc(var(--gap) * .6) calc(var(--pad) - 4px);
  border-top:1px solid var(--line); background:rgba(255,255,255,.02);
}
.sw{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:var(--fs-xs); color:var(--mut); white-space:nowrap; }
.sw input{ display:none; }
.sw i{ width:28px; height:15px; border-radius:9px; background:var(--line-2); position:relative; transition:background-color .16s; flex:0 0 auto; }
.sw i::after{ content:""; position:absolute; top:2px; left:2px; width:11px; height:11px; border-radius:50%; background:#fff; transition:transform .16s; }
.sw input:checked + i{ background:var(--acc); }
.sw input:checked + i::after{ transform:translateX(13px); }

.lg-line{ white-space:pre-wrap; word-break:break-word; }
.logbox{
  flex:1 1 auto; min-height:0; overflow:hidden; padding:calc(var(--gap) * .7) var(--pad);
  font-family:var(--mono); font-size:var(--fs-xs); line-height:1.55; color:var(--mut);
  background:rgba(0,0,0,.14);
}
.histlist{ flex:1 1 auto; min-height:0; overflow:hidden; }
.hrow{
  display:flex; align-items:center; gap:8px; min-height:0; padding:0 calc(var(--pad) - 4px);
  border-bottom:1px solid var(--line); cursor:pointer; transition:background-color .13s;
}
.hrow:hover{ background:rgba(255,255,255,.045); }
.hrow.on{ background:var(--acc-soft); box-shadow:inset 2px 0 0 var(--acc); }
.hrow .cell2{ flex:1 1 auto; min-width:0; display:flex; flex-direction:row; align-items:baseline; gap:8px; overflow:hidden; }
.hacts{ display:flex; gap:4px; flex:0 0 auto; }

/* ---------- 8. 抽屉 / 弹层 ---------- */
.drawer{ position:fixed; inset:0; z-index:70; display:none; justify-content:flex-end; }
.drawer.open{ display:flex; }
.drawer::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(2px); }
.drawer-card{
  position:relative; width:min(620px,94vw); height:100%; display:flex; flex-direction:column;
  background:var(--panel-2); border-left:1px solid var(--line-2); box-shadow:-24px 0 60px rgba(0,0,0,.5);
  animation:slidein .2s ease;
}
@keyframes slidein{ from{ transform:translateX(24px); opacity:.6; } }
.drawer-head{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:var(--gap); height:var(--top); padding:0 var(--pad); border-bottom:1px solid var(--line); font-weight:650; font-size:var(--fs); }
.drawer-body{ flex:1 1 auto; min-height:0; overflow:auto; padding:var(--pad); font-size:var(--fs-sm); }
.dg{ display:flex; flex-direction:column; gap:calc(var(--gap) * .8); }
.dlist{ display:flex; flex-direction:column; }
.dlist.kv .drow{ justify-content:space-between; gap:var(--gap); grid-template-columns:none; display:flex; }
.drow{ display:grid; gap:8px; padding:5px 0; border-bottom:1px solid var(--line); font-size:var(--fs-sm); }
.drow > span{ min-width:0; }
.drow b{ font-weight:600; color:var(--mut); font-size:var(--fs-xs); }
.ai-out{ margin-top:var(--gap); padding:var(--pad); border:1px solid var(--line-2); border-radius:7px; line-height:1.6; color:var(--mut); white-space:pre-wrap; }

.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px); z-index:90;
  padding:8px 16px; border-radius:7px; background:var(--panel-2); border:1px solid var(--line-2);
  color:var(--txt); font-size:var(--fs-sm); box-shadow:0 14px 36px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; white-space:nowrap;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---------- 9. 窄屏兜底(仍不滚动,只压缩比例) ---------- */
@media (max-width:1280px){
  :root{ --side:clamp(140px, 11.6vw, 176px); }
  .console{ grid-template-columns:minmax(0,1.5fr) clamp(168px,12.6vw,200px) minmax(0,1fr); }
  .build{ grid-template-columns:minmax(0,1.05fr) minmax(0,.9fr) minmax(0,1.05fr); }
}
@media (max-width:1024px){
  .console{ grid-template-columns:minmax(0,1.4fr) clamp(150px,13vw,180px) minmax(0,.95fr); }
  .cform{ grid-template-columns:1fr; }
}
@media (max-height:700px){
  :root{ --row:clamp(24px, 3.2vh, 30px); }
  .cmdlog{ height:52px; }
}

/* ---------- 10. 浅色主题适配(暖白) ---------- */
[data-theme="warm"] .btn{
  background:linear-gradient(180deg,#fffefb 0%, #f8f0e1 100%);
  border-color:#dccdae;
}
[data-theme="warm"] .btn:hover{
  background:linear-gradient(180deg,#ffffff 0%, #f7eddb 100%);
  border-color:#c9b491;
}
[data-theme="warm"] .btn.ghost{ background:transparent; }
[data-theme="warm"] .btn.primary{
  background:linear-gradient(180deg, var(--warm-1) 0%, var(--warm-2) 56%, var(--warm-3) 100%);
  border-color:rgba(43,35,24,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 3px 10px rgba(120,95,55,.22);
}
[data-theme="warm"] .btn.primary:hover{
  background:linear-gradient(180deg,#ffffff 0%, #fcf4e4 52%, #f1e1c4 100%);
  border-color:rgba(43,35,24,.40);
  box-shadow:inset 0 1px 0 #fff, 0 5px 14px rgba(120,95,55,.28); transform:translateY(-1px);
}
[data-theme="warm"] .tdot{ box-shadow:0 0 0 1px rgba(43,35,24,.30); }
[data-theme="warm"] .tdot.on{ box-shadow:0 0 0 2px var(--acc); }

/* ==========================================================================
   控制台整屏视图 — 尺寸基准 1280×608（与验收截图同尺寸）
   全部尺寸写成 calc(N * var(--u))，--u = 截图 1px 对应的实际长度：
   换窗口只整体等比缩放，任何一块都不会被拉宽压扁。
   ========================================================================== */
body.cst-mode .side,
body.cst-mode .topbar{ display:none; }
body.cst-mode .shell{ grid-template-columns:minmax(0,1fr); }
body.cst-mode .view{
  display:flex; align-items:center; justify-content:center;
  padding:0; gap:0; background:#080c16; overflow:hidden;
}

.cst{
  --u: min(calc(100vw * 0.00078125), calc(100vh * 0.001631578947));
  position:relative; flex:0 0 auto;
  width:calc(1280 * var(--u)); height:calc(608 * var(--u));
  background:#0a1421; color:#b3c0d1;
  font-size:calc(9 * var(--u)); line-height:1;
  border-radius:calc(4 * var(--u));
  box-shadow:0 0 0 calc(1 * var(--u)) #152238;
  overflow:hidden;
}
.cst *{ box-sizing:border-box; }

/* ---- 顶部标题行 y0 h18 ---- */
.cbar{
  position:absolute; left:0; top:0; width:calc(1280 * var(--u)); height:calc(18 * var(--u));
  display:flex; align-items:center; gap:calc(5 * var(--u)); padding:0 calc(8 * var(--u));
  background:#0c1728; border-bottom:calc(1 * var(--u)) solid #16243a; overflow:hidden;
}
.cbar .nm{ font-size:calc(11 * var(--u)); line-height:1.3; font-weight:600; color:#e6edf6; letter-spacing:.2px; white-space:nowrap; flex:0 0 auto; max-width:calc(190 * var(--u)); overflow:hidden; text-overflow:ellipsis; }
.cbt{
  height:calc(13 * var(--u)); padding:0 calc(6 * var(--u)); flex:0 0 auto;
  border:calc(1 * var(--u)) solid #23334b; background:#0f1b2c; color:#8fa0b6;
  font-size:calc(8.5 * var(--u)); cursor:pointer; border-radius:calc(2 * var(--u)); line-height:1;
}
.cbt:hover{ color:#79b8ff; border-color:#3b82f6; }
.cbt.on{ background:#1d3554; color:#79b8ff; border-color:#3b82f6; }
.cbar .sel{
  height:calc(13 * var(--u)); flex:0 0 auto; max-width:calc(190 * var(--u));
  background:#0f1b2c; border:calc(1 * var(--u)) solid #23334b; border-radius:calc(2 * var(--u));
  color:#8fa0b6; font-size:calc(8.5 * var(--u)); outline:none; padding:0 calc(3 * var(--u));
}
.cbar .pct{ font-size:calc(8.5 * var(--u)); line-height:1.35; color:#3fb950; font-weight:600; flex:0 0 auto; }
.cbar .tm{ font-size:calc(8 * var(--u)); line-height:1.35; color:#6b7a8f; white-space:nowrap; flex:0 0 auto; }
.cbar .tm b{ color:#9aa9bd; font-weight:500; }
.cbar .sp{ flex:1 1 auto; }
.cbar .fx{
  font-size:calc(8 * var(--u)); color:#8fa0b6; white-space:nowrap; flex:0 0 auto;
  background:#0a1421; border:calc(1 * var(--u)) solid #16243a; border-radius:calc(2 * var(--u));
  padding:0 calc(4 * var(--u)); height:calc(13 * var(--u)); display:inline-flex; align-items:center;
}

/* ---- 设备信息行 y18 h28 ---- */
.cinfo{
  position:absolute; left:0; top:calc(18 * var(--u)); width:calc(1280 * var(--u)); height:calc(28 * var(--u));
  display:flex; align-items:center; gap:calc(7 * var(--u)); padding:0 calc(8 * var(--u));
  background:#0c1728; border-bottom:calc(1 * var(--u)) solid #16243a;
  font-size:calc(8.5 * var(--u)); color:#7d8ea4; white-space:nowrap; overflow:hidden;
}
.cinfo b{ color:#b3c0d1; font-weight:500; line-height:1.35; }
.cinfo .bl{
  color:#3b82f6; font-weight:500; max-width:calc(300 * var(--u)); line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; display:inline-block; vertical-align:middle;
}
.cinfo .sep{ width:calc(1 * var(--u)); height:calc(10 * var(--u)); background:#1e2d44; flex:0 0 auto; }
.cinfo .ren{
  width:calc(190 * var(--u)); height:calc(17 * var(--u)); flex:0 0 auto;
  background:#0a1421; border:calc(1 * var(--u)) solid #1e2d44; border-radius:calc(2 * var(--u));
  color:#6b7a8f; font-size:calc(8 * var(--u)); padding:0 calc(5 * var(--u)); outline:none;
}
.cinfo .ren:focus{ color:#b3c0d1; border-color:#3b82f6; }
.cinfo .ren::placeholder{ color:#5a6a80; }

/* ---- 投屏屏卡 y46 h484 ---- */
.cpane{
  position:absolute; background:#0e1a2b; border:calc(1 * var(--u)) solid #1b2a40;
  border-radius:calc(2 * var(--u));
  padding:calc(5 * var(--u)) calc(4 * var(--u)) calc(26 * var(--u)) calc(4 * var(--u));
}
.cpane.p1{ left:calc(6 * var(--u)); top:calc(46 * var(--u)); width:calc(216 * var(--u)); height:calc(484 * var(--u)); }
.cpane.p2{ left:calc(436 * var(--u)); top:calc(46 * var(--u)); width:calc(214 * var(--u)); height:calc(484 * var(--u)); }
.cpane .ph{
  position:relative; width:100%; height:100%; background:#000; border-radius:calc(1 * var(--u));
  overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:crosshair;
}
.cpane .ph img{ width:100%; height:100%; object-fit:contain; display:block; background:#000; }
.cpane .ph .pbody{
  width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:0 calc(6 * var(--u));
}
.cpane .ph .t1{ font-size:calc(8.5 * var(--u)); color:#c9d1d9; display:block; text-align:center; }
.cpane .ph .t2{ font-size:calc(8 * var(--u)); color:#48566a; display:block; text-align:center; margin-top:calc(3 * var(--u)); }
.cpane .ph.on{ box-shadow:0 0 0 calc(1 * var(--u)) rgba(59,130,246,.45) inset; }

/* ---- 屏下工具条 / 图标条 y532 h24 ---- */
.ctools{
  position:absolute; left:calc(6 * var(--u)); top:calc(532 * var(--u)); width:calc(216 * var(--u)); height:calc(24 * var(--u));
  display:flex; align-items:center; gap:calc(4 * var(--u));
}
.ctools button,.cicons button{
  height:calc(20 * var(--u)); flex:1 1 auto; border:calc(1 * var(--u)) solid #23334b; background:#101d2f;
  color:#8fa0b6; font-size:calc(8.5 * var(--u)); cursor:pointer; border-radius:calc(2 * var(--u));
  display:inline-flex; align-items:center; justify-content:center; gap:calc(3 * var(--u)); padding:0; line-height:1;
}
.ctools button:hover,.cicons button:hover{ color:#79b8ff; border-color:#3b82f6; }
.ctools button.on{ background:#1d3554; color:#79b8ff; border-color:#3b82f6; }
.cicons{
  position:absolute; left:calc(436 * var(--u)); top:calc(532 * var(--u)); width:calc(214 * var(--u)); height:calc(24 * var(--u));
  display:flex; align-items:center; gap:calc(2 * var(--u));
}
.cicons button{ flex:1 1 0; min-width:0; border:0; background:transparent; color:#94a3b8; }
.cicons button:first-child{ background:#16324f; border-radius:calc(3 * var(--u)); color:#79b8ff; }
.cicons button:hover{ background:#1b2a40; }
.cicons svg,.ctools svg{ width:calc(10 * var(--u)); height:calc(10 * var(--u)); flex:0 0 auto; }

/* ---- 按钮列 y55 h492 ---- */
.cbtns{ position:absolute; top:calc(55 * var(--u)); height:calc(492 * var(--u)); display:flex; flex-direction:column; }
.cbtns.b1{ left:calc(224 * var(--u)); width:calc(106 * var(--u)); }
.cbtns.b2{ left:calc(334 * var(--u)); width:calc(102 * var(--u)); }
.cbtns .hd{
  position:relative; flex:0 0 auto; height:calc(15 * var(--u)); display:flex; align-items:center; justify-content:center;
  margin-bottom:calc(2 * var(--u)); background:#0d1929; border-radius:calc(3 * var(--u));
  font-size:calc(9 * var(--u)); color:#9aa9bd; letter-spacing:.5px;
}
.cbtns .hd::before,.cbtns .hd::after{
  content:''; position:absolute; top:calc(3 * var(--u)); width:calc(2 * var(--u)); height:calc(9 * var(--u));
  background:#e5484d; border-radius:calc(1 * var(--u));
}
.cbtns .hd::before{ left:calc(3 * var(--u)); }
.cbtns .hd::after{ right:calc(3 * var(--u)); }
.pbtn{
  width:100%; height:calc(32 * var(--u)); margin-bottom:calc(2 * var(--u)); flex:0 0 auto;
  background:#141f30; border:calc(1 * var(--u)) solid #1e2d44; border-radius:calc(3 * var(--u));
  color:#c2ccda; font-size:calc(9.5 * var(--u)); cursor:pointer; padding:0;
  display:inline-flex; align-items:center; justify-content:center; gap:calc(3 * var(--u));
  white-space:nowrap; overflow:hidden; line-height:1;
  transition:background .1s,color .1s,border-color .1s;
}
.pbtn:hover{ background:#1b2b42; color:#e6edf6; border-color:#2f4468; }
.pbtn.on{ background:#1d3554; color:#79b8ff; border-color:#3b82f6; }
.pbtn svg{ width:calc(9 * var(--u)); height:calc(9 * var(--u)); flex:0 0 auto; opacity:.8; }

/* ---- 数据面板 y46 x650 196×484 ---- */
.cdata{
  position:absolute; left:calc(650 * var(--u)); top:calc(46 * var(--u)); width:calc(196 * var(--u)); height:calc(484 * var(--u));
  display:flex; flex-direction:column;
}
.dgrid2{ display:grid; grid-template-columns:1fr 1fr; gap:calc(3 * var(--u)); margin-top:calc(31 * var(--u)); }
.dgrid2 .pbtn{ height:calc(17 * var(--u)); margin:0; font-size:calc(8.5 * var(--u)); border-radius:calc(2 * var(--u)); }
.cdata .bulk{ height:calc(17 * var(--u)); margin-top:calc(5 * var(--u)); font-size:calc(8.5 * var(--u)); border-radius:calc(2 * var(--u)); }
.crec{
  flex:1 1 0; min-height:0; margin-top:calc(7 * var(--u)); background:#101d2f;
  border:calc(1 * var(--u)) solid #1b2a40; border-radius:calc(4 * var(--u));
  display:flex; flex-direction:column; overflow:hidden;
}
.crec .rh{
  flex:0 0 auto; height:calc(19 * var(--u)); display:flex; align-items:center; gap:calc(4 * var(--u));
  padding:0 calc(6 * var(--u)); font-size:calc(9 * var(--u)); color:#c2ccda; font-weight:600;
  border-bottom:calc(1 * var(--u)) solid #182740;
}
.crec .rh .sp{ flex:1; }
.crec .rb{
  flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:calc(6 * var(--u)); font-size:calc(8.5 * var(--u)); color:#5f6f85; line-height:1.7;
}
.ctag{
  font-style:normal; font-size:calc(8 * var(--u)); padding:0 calc(5 * var(--u)); line-height:calc(13 * var(--u));
  border:calc(1 * var(--u)) solid #2a3b55; border-radius:calc(2 * var(--u)); color:#8fa0b6; font-weight:400;
}
.ctag.green{ color:#3fb950; border-color:#1f5231; background:rgba(63,185,80,.14); }
.ctag.warn{ color:#e3b341; border-color:#5c4a1a; background:rgba(227,179,65,.14); }
.ctag.red{ color:#f85149; border-color:#6b2a26; background:rgba(248,81,73,.14); }

/* ---- AI 分析卡 x856 y50 416×528 ---- */
.cai{
  position:absolute; left:calc(856 * var(--u)); top:calc(50 * var(--u)); width:calc(416 * var(--u)); height:calc(528 * var(--u));
  background:#0f1a2c; border:calc(1 * var(--u)) solid #1b2a40; border-radius:calc(8 * var(--u));
  display:flex; flex-direction:column; overflow:hidden;
}
.cai .ah{ flex:0 0 auto; height:calc(34 * var(--u)); display:flex; align-items:center; gap:calc(6 * var(--u)); padding:0 calc(10 * var(--u)); }
.cai .ah .ai{ display:inline-flex; align-items:center; gap:calc(4 * var(--u)); font-size:calc(10 * var(--u)); color:#c2ccda; font-weight:600; }
.cai .ah svg{ width:calc(11 * var(--u)); height:calc(11 * var(--u)); }
.cai .ah .sp{ flex:1; }
.cai .ah .btn{
  height:calc(17 * var(--u)); padding:0 calc(7 * var(--u)); border:calc(1 * var(--u)) solid #23334b;
  background:#111e31; color:#9aa9bd; font-size:calc(8.5 * var(--u)); cursor:pointer; border-radius:calc(3 * var(--u));
  display:inline-flex; align-items:center; gap:calc(3 * var(--u)); line-height:1; white-space:nowrap;
}
.cai .ah .btn.go{ background:#4c22a8; border-color:#6d3fd4; color:#e9e2ff; }
.cai .ah .btn:hover{ filter:brightness(1.2); }
.cai .ab{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(10 * var(--u)); padding:calc(10 * var(--u)); }
.cai .ab .bot{ width:calc(44 * var(--u)); height:calc(40 * var(--u)); opacity:.85; flex:0 0 auto; }
.cai .ab .tx{ font-size:calc(9 * var(--u)); color:#5f6f85; text-align:center; }
.cai .ab .out{
  flex:1 1 auto; min-height:0; width:100%; overflow:auto; white-space:pre-wrap; word-break:break-word;
  font-size:calc(9 * var(--u)); line-height:1.9; color:#9aa9bd; text-align:left;
  background:#0a1421; border:calc(1 * var(--u)) solid #182740; border-radius:calc(3 * var(--u)); padding:calc(7 * var(--u));
}

/* ---- 底部指令栏 y564 h30 ---- */
.cfoot{
  position:absolute; left:calc(8 * var(--u)); top:calc(564 * var(--u)); width:calc(640 * var(--u)); height:calc(30 * var(--u));
  display:flex; align-items:center; gap:calc(6 * var(--u));
}
.cfoot .inp{
  flex:1 1 auto; height:calc(30 * var(--u)); min-width:0; font-size:calc(9 * var(--u));
  background:#0a1421; border:calc(1 * var(--u)) solid #1e2d44; border-radius:calc(3 * var(--u));
  padding:0 calc(9 * var(--u)); outline:none; color:#b3c0d1;
}
.cfoot .inp::placeholder{ color:#4e5d72; }
.cfoot .inp:focus{ border-color:#3b82f6; }
.cfoot .send{
  height:calc(30 * var(--u)); padding:0 calc(14 * var(--u)); flex:0 0 auto;
  border:calc(1 * var(--u)) solid #23334b; background:#152540; color:#9aa9bd;
  font-size:calc(9 * var(--u)); cursor:pointer; border-radius:calc(3 * var(--u));
}
.cfoot .send:hover{ background:#1b2f4f; color:#e6edf6; border-color:#3b82f6; }
.cst .theme{
  position:absolute; right:calc(10 * var(--u)); top:calc(571 * var(--u)); height:calc(17 * var(--u));
  display:inline-flex; align-items:center; gap:calc(4 * var(--u)); padding:0;
  background:transparent; border:0; color:#8fa0b6; font-size:calc(9 * var(--u)); cursor:pointer;
}
.cst .theme:hover{ color:#79b8ff; }

/* ---- 底部状态条 y594 h14 ---- */
.cstat{
  position:absolute; left:0; top:calc(594 * var(--u)); width:calc(1280 * var(--u)); height:calc(14 * var(--u));
  background:#0a1421; border-top:calc(1 * var(--u)) solid #16243a;
  display:flex; align-items:center; gap:calc(14 * var(--u)); padding:0 calc(10 * var(--u));
  font-size:calc(8 * var(--u)); color:#4e5d72; white-space:nowrap; overflow:hidden;
}

/* ---- ADB 控制屏浮窗（与左右两块屏同尺寸）---- */
.adbm{
  position:absolute; inset:0; z-index:30; display:flex; align-items:center; justify-content:center;
  background:rgba(4,9,17,.74); backdrop-filter:blur(2px);
}
.adbm[hidden]{ display:none; }
.adbm-card{
  width:max-content; background:#0e1a2b; border:calc(1 * var(--u)) solid #24344d;
  border-radius:calc(5 * var(--u)); box-shadow:0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.55);
  display:flex; flex-direction:column; overflow:hidden;
}
.adbm-hd{
  flex:0 0 auto; height:calc(20 * var(--u)); display:flex; align-items:center; gap:calc(6 * var(--u));
  padding:0 calc(7 * var(--u)); background:#0c1728; border-bottom:calc(1 * var(--u)) solid #182740;
  font-size:calc(9 * var(--u)); color:#c2ccda; font-weight:600;
}
.adbm-hd .sp{ flex:1; }
.adbm-hd .x{
  width:calc(14 * var(--u)); height:calc(14 * var(--u)); border:0; background:transparent;
  color:#8fa0b6; font-size:calc(12 * var(--u)); line-height:1; cursor:pointer; padding:0;
}
.adbm-hd .x:hover{ color:#f85149; }
/* 画面区与左右两块屏的可视区同尺寸（206×451），不是缩小版也不是放大版 */
.adbm-body{
  width:calc(206 * var(--u)); height:calc(451 * var(--u)); margin:calc(4 * var(--u)) auto 0;
  background:#000; border-radius:calc(1 * var(--u)); overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:crosshair;
}
.adbm-body img{ width:100%; height:100%; object-fit:contain; display:block; }
.adbm-body .t1{ display:block; text-align:center; font-size:calc(8.5 * var(--u)); color:#c9d1d9; }
.adbm-body .t2{ display:block; text-align:center; font-size:calc(8 * var(--u)); color:#48566a; margin-top:calc(3 * var(--u)); }
.adbm-ft{
  flex:0 0 auto; height:calc(22 * var(--u)); display:flex; align-items:center; gap:calc(6 * var(--u));
  padding:0 calc(8 * var(--u)); font-size:calc(8 * var(--u)); color:#5f6f85;
}
.adbm-ft .sp{ flex:1; }
.adbm-ft .btn{ height:calc(15 * var(--u)); font-size:calc(8 * var(--u)); padding:0 calc(6 * var(--u)); border-radius:calc(2 * var(--u)); }

/* ---------- 补充：数据抽屉表头 / 只读字段 / 右键菜单 / 链接 ---------- */
.dlist-head{ display:flex; gap:var(--gap); padding:2px var(--pad); border-bottom:1px solid var(--line); }
.dlist-head b{ flex:1 1 0; min-width:0; font-size:var(--fs-xs); color:var(--dim); font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rawbox{
  margin:0; padding:var(--pad); border-radius:var(--r); background:var(--panel-2); border:1px solid var(--line);
  font-family:var(--mono); font-size:var(--fs-xs); line-height:1.7; color:var(--mut);
  max-height:52vh; overflow:auto; white-space:pre-wrap; word-break:break-word;
}
.inp.ro{ color:var(--mut); background:color-mix(in srgb, var(--panel-2) 70%, transparent); cursor:default; }
.link{ color:var(--acc); text-decoration:underline; }
.ctxmenu{
  position:fixed; z-index:80; min-width:132px; padding:5px;
  border-radius:8px; background:var(--panel-2); border:1px solid var(--line-2);
  box-shadow:0 14px 36px rgba(0,0,0,.45);
}
.ctxmenu .btn{ justify-content:flex-start; margin:1px 0; }
.ctxmenu .btn[data-danger]{ color:var(--bad); }
.cdnhost{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:var(--gap); }
.cdnhost[hidden]{ display:none; }
#buildMain[hidden]{ display:none; }

/* ---------- 登录页（自包含，不依赖任何旧页面） ---------- */
.login{
  position:fixed; inset:0; z-index:70;
  display:grid; place-items:center;
  background:var(--body-glow);
}
.login[hidden]{ display:none; }
.login-card{
  width:min(372px, 90vw);
  padding:clamp(24px,3.2vh,38px) clamp(22px,2.4vw,32px);
  display:flex; flex-direction:column; align-items:stretch; gap:10px;
  border-radius:10px;
  background:var(--panel);
  border:1px solid var(--line-2);
  box-shadow:var(--glow);
  text-align:center;
}
.login-logo{ width:clamp(52px,7vh,68px); height:clamp(52px,7vh,68px); object-fit:contain; margin:0 auto 2px;
  filter:drop-shadow(0 8px 24px rgba(120,180,255,.28)); }
.login-title{ margin:0; font-size:calc(var(--fs) + 8px); letter-spacing:.34em; font-weight:600; color:var(--txt); text-indent:.34em; }
.login-sub{ margin-bottom:8px; font-size:var(--fs-xs); letter-spacing:.18em; color:var(--dim); text-transform:uppercase; }
.login-f{
  width:100%; padding:11px 13px; border-radius:7px;
  border:1px solid var(--line-2); background:var(--panel-2); color:var(--txt);
  font-family:inherit; font-size:var(--fs); outline:none; transition:border-color .18s, box-shadow .18s;
}
.login-f::placeholder{ color:var(--dim); }
.login-f:focus{ border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft); }
.login-f[hidden]{ display:none; }
.login-err{ min-height:16px; font-size:var(--fs-xs); color:var(--bad); text-align:left; line-height:1.5; }
.login-btn{
  margin-top:2px; padding:11px 14px; border:1px solid transparent; border-radius:7px; cursor:pointer;
  font-family:inherit; font-size:var(--fs); font-weight:600; letter-spacing:.3em; text-indent:.3em;
  color:var(--warm-txt);
  background:linear-gradient(180deg, var(--warm-1), var(--warm-2) 58%, var(--warm-3));
  box-shadow:0 8px 22px rgba(0,0,0,.34);
  transition:filter .18s, transform .12s;
}
.login-btn:hover{ filter:brightness(1.05); }
.login-btn:active{ transform:translateY(1px); }
.login-btn:disabled{ opacity:.6; cursor:not-allowed; }