/* ═════════════════════════════════════════════════════════════════
   疯狂水世界 · 控制台 — Blue SaaS（参照 qq-farm-bot 主题重构）
   ─────────────────────────────────────────────────────────────────
   设计语言：
   · 蓝色主色 #3b82f6 + 蓝渐变按钮（#60a5fa → #3b82f6）
   · 玻璃拟态卡片 / surface 分层 / 柔和阴影
   · 大圆角（10px）+ 细边框 + 现代 SaaS 观感
   · 亮色蓝色渐变背景 + 精致 hover/动效
   · 保留全部组件 class，仅替换视觉层（功能与布局不变）
   ═════════════════════════════════════════════════════════════════ */

:root{
  /* ── 主题色板（无尽冬日 · 白天浅色） ── */
  --theme-bg:#eef2f9;
  --theme-primary:#0284c7;
  --theme-secondary:#2563eb;
  --theme-gradient:linear-gradient(135deg,#0284c7 0%,#2563eb 50%,#6366f1 100%);
  --app-bg:linear-gradient(180deg,#eef2f9 0%,#e4ebf6 100%);

  --surface-1:rgba(255,255,255,.86);
  --surface-2:#f2f6fd;
  --surface-3:#ffffff;
  --surface-border:rgba(31,74,138,.12);
  --surface-border-strong:rgba(31,74,138,.22);
  --surface-shadow:0 14px 40px rgba(31,58,94,.18);
  --surface-shadow-soft:0 6px 24px rgba(31,58,94,.10);
  --panel-glow:rgba(2,132,199,.10);

  /* ── 疯狂水世界兼容变量（映射到浅色主题） ── */
  --paper:#eef2f9;
  --paper-2:#e4ebf6;
  --paper-3:#f2f6fd;
  --card:rgba(255,255,255,.86);
  --ink:#16233c;
  --ink-2:#5b7194;
  --muted:#5b7194;
  --muted-2:#8496b3;
  --rule:rgba(31,74,138,.12);
  --rule-2:rgba(31,74,138,.08);

  --accent:#0284c7;
  --accent-2:#2563eb;
  --accent-soft:rgba(2,132,199,.10);
  --positive:#0d9464;
  --positive-soft:rgba(13,148,100,.12);
  --warning:#b45309;
  --warning-soft:rgba(180,83,9,.10);
  --danger:#dc2626;
  --danger-soft:rgba(220,38,38,.10);
  --info:#0284c7;

  --sans:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --serif:"Source Serif Pro","Noto Serif SC","Songti SC","SimSun",ui-serif,Georgia,"Times New Roman",serif;
  --mono:Consolas,"Cascadia Code",monospace;

  --fs-10:10px; --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px;
  --fs-16:16px; --fs-18:18px; --fs-22:22px; --fs-28:28px; --fs-36:36px;
  --fs-48:48px; --fs-64:64px;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  --rail-w:218px;
  --radius:14px;
  --dur:180ms;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ═════ 多套主题已移除：统一使用深色电竞风（无尽冬日）═════ */
/* [data-theme] 属性切换仍兼容，但默认 root 已改为深色 */


*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:var(--sans);
  font-size:var(--fs-14);
  line-height:1.55;
  color:var(--ink);
  background:var(--app-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv02","cv03","cv04","cv11";
  overflow:hidden;
}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
a{color:inherit}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(120,150,200,.28);border-radius:99px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(120,150,200,.5);background-clip:content-box}

.mlabel{
  font-size:var(--fs-10);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.mnum{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* App shell */
#app{
  display:grid;
  grid-template-columns:var(--rail-w) 1fr;
  height:100vh;height:100dvh;
}

/* Rail */
.rail{
  background:rgba(255,255,255,.92);
  border-right:1px solid var(--surface-border);
  display:flex;flex-direction:column;
  min-height:0;position:relative;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.rail::after{
  content:'';position:absolute;top:0;right:-3px;bottom:0;width:1px;
  background:var(--rule-2);pointer-events:none;
}
.brand{
  padding:var(--sp-5) var(--sp-4) var(--sp-4);
  border-bottom:1px solid var(--surface-border);
  background:linear-gradient(180deg,color-mix(in srgb,var(--theme-primary) 6%,transparent),transparent);
}
.brand-mark{display:flex;align-items:baseline;gap:var(--sp-2)}
.brand-mark .n{
  font-size:var(--fs-22);font-weight:700;
  line-height:1.1;letter-spacing:-.02em;
  background:var(--theme-gradient);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.brand-sub{
  margin-top:var(--sp-2);font-size:var(--fs-10);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}

.acct-pick{
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--surface-border);
  cursor:pointer;user-select:none;
  transition:background var(--dur) var(--ease);
}
.acct-pick:hover{background:var(--surface-2)}
.acct-pick .row{display:flex;align-items:center;gap:var(--sp-2)}
.acct-pick .who{
  flex:1;min-width:0;font-size:var(--fs-13);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.acct-pick .srv{font-family:var(--mono);font-size:var(--fs-10);color:var(--muted)}
.acct-pick .caret{color:var(--muted);font-size:var(--fs-10);transition:transform var(--dur) var(--ease)}
.acct-pick.open .caret{transform:rotate(180deg)}
.acct-list{
  display:none;padding:var(--sp-2) 0;
  border-top:1px solid var(--rule-2);margin-top:var(--sp-2);
  max-height:280px;overflow-y:auto;
}
.acct-pick.open .acct-list{display:block}
.acct-it{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2);cursor:pointer;border-radius:var(--radius);
  transition:background var(--dur) var(--ease);
}
.acct-it:hover{background:var(--surface-2)}
.acct-it.on{
  background:var(--accent-soft);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent);
}
.acct-it.on .who{color:var(--accent);font-weight:600}
.acct-it.on .srv{color:var(--accent)}
.acct-it .who{
  flex:1;min-width:0;font-size:var(--fs-12);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ── 账号常驻顶栏：不管电脑还是手机，当前账号 + 切换下拉永远钉在页面最上方 ── */
.acct-bar{
  flex:none;position:relative;z-index:60;
  padding:10px var(--sp-6);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--surface-border);
}
/* 栏内的选择器做成卡片，比侧栏时代更醒目 */
.acct-bar .acct-pick{
  max-width:none;margin:0 14px;padding:9px 14px;
  border:1px solid var(--surface-border-strong);border-bottom:1px solid var(--surface-border-strong);
  border-radius:12px;background:var(--surface-1);
  box-shadow:var(--surface-shadow-soft);
  position:relative;
}
.acct-bar .acct-pick:hover{background:var(--surface-1);border-color:var(--accent)}
.acct-bar .acct-pick .who{font-size:var(--fs-14)}
/* 下拉改为浮层：盖在内容上面，不把顶栏撑高 */
.acct-bar .acct-list{
  position:absolute;left:-1px;right:-1px;top:calc(100% + 6px);
  margin-top:0;padding:6px;
  background:var(--surface-1);border:1px solid var(--surface-border);
  border-radius:12px;box-shadow:0 18px 44px rgba(15,23,42,.22);
  max-height:min(340px,60vh);z-index:65;
}

.nav{flex:1;min-height:0;overflow-y:auto;padding:var(--sp-4) 0 var(--sp-5)}
.nav-grp{margin-bottom:var(--sp-5)}
.nav-grp > h4{
  margin:0 0 var(--sp-2);padding:0 var(--sp-4);
  font-size:var(--fs-10);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
}
.nav-it{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:7px var(--sp-3);margin:1px var(--sp-2);cursor:pointer;
  border-radius:8px;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
  font-size:var(--fs-13);color:var(--ink-2);position:relative;
}
.nav-it:hover{background:var(--surface-2);color:var(--ink)}
.nav-it.on{
  background:var(--theme-gradient);
  color:#fff;font-weight:600;
  box-shadow:var(--surface-shadow-soft);
}
.nav-it .idx{
  font-family:var(--mono);font-size:var(--fs-10);
  color:var(--muted-2);min-width:18px;
}
.nav-it.on .idx{color:rgba(255,255,255,.85)}
.nav-it .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-it .cnt{
  font-family:var(--mono);font-size:var(--fs-10);
  color:var(--muted-2);padding:1px 7px;border-radius:999px;
}
.nav-it .cnt.has{background:var(--accent-soft);color:var(--accent)}
.nav-it.on .cnt.has{background:rgba(255,255,255,.22);color:#fff}

.rail-foot{
  padding:var(--sp-3) var(--sp-4);
  border-top:1px solid var(--surface-border);
  font-size:var(--fs-10);color:var(--muted-2);
  line-height:1.5;letter-spacing:.02em;
}

/* Stage */
.stage{
  display:flex;flex-direction:column;
  min-width:0;min-height:0;
  background:var(--paper);position:relative;
}
.masthead{
  padding:var(--sp-5) var(--sp-6) var(--sp-4);
  border-bottom:1px solid var(--surface-border);
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  display:grid;grid-template-columns:auto 1fr auto;
  gap:var(--sp-5);align-items:end;flex:none;
}
.masthead .no{
  font-size:var(--fs-64);
  font-weight:600;line-height:.85;letter-spacing:-.04em;
  background:var(--theme-gradient);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  font-variant-numeric:lining-nums;
}
.masthead .no em{font-style:normal;color:var(--accent);-webkit-text-fill-color:var(--accent)}
.masthead .titles{min-width:0}
.masthead h1{
  margin:0;font-size:var(--fs-28);font-weight:700;
  line-height:1.15;letter-spacing:-.015em;color:var(--ink);
}
.masthead .kicker{
  margin:0 0 var(--sp-2);font-size:var(--fs-10);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-weight:700;
}
.masthead .lede{
  margin:var(--sp-2) 0 0;font-size:var(--fs-13);
  color:var(--muted);line-height:1.55;max-width:64ch;
}
.masthead .tools{
  display:flex;align-items:center;gap:var(--sp-2);
  flex-wrap:wrap;justify-content:flex-end;
}

.tbtn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border:1px solid var(--surface-border-strong);
  background:var(--surface-2);font-size:var(--fs-12);font-weight:500;
  color:var(--ink);border-radius:10px;
  transition:all var(--dur) var(--ease);
  white-space:nowrap;
}
.tbtn:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 16px rgba(34,211,238,.18)}
.tbtn:active{transform:translateY(0)}
.tbtn.primary{
  background:var(--theme-gradient);color:#062029;border-color:transparent;
  font-weight:600;box-shadow:0 4px 16px rgba(34,211,238,.32);
}
.tbtn.primary:hover{box-shadow:0 6px 22px rgba(34,211,238,.45);filter:brightness(1.06)}
.tbtn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 30%,transparent)}
.tbtn.danger:hover{background:var(--danger);color:#fff;border-color:var(--danger);box-shadow:0 4px 16px rgba(248,113,113,.2)}
.tbtn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--muted)}
.tbtn.ghost:hover{background:var(--surface-2);color:var(--ink)}
/* 顶部工具区按钮统一显示边框（账户 chip 之后的商城/刷新/动态等） */
.masthead .tools .tbtn.ghost{border-color:var(--surface-border-strong)}
.masthead .tools .tbtn.ghost:hover{border-color:var(--accent)}
.masthead .tools .tbtn.primary{border-color:color-mix(in srgb,var(--accent) 60%,transparent)}

/* ── 面板二级标签条：主区域顶部常驻，显示当前分类下的面板，点击即切 ── */
.subtabs{
  flex:none;display:flex;gap:6px;align-items:center;
  padding:8px var(--sp-6);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  border-bottom:1px solid var(--surface-border);
  background:color-mix(in srgb,var(--surface-1) 65%,transparent);
  -webkit-overflow-scrolling:touch;
}
.subtabs::-webkit-scrollbar{display:none}
.subtab{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  padding:5px 13px;font-size:var(--fs-12);font-weight:500;
  color:var(--muted);border-radius:999px;cursor:pointer;white-space:nowrap;
  border:1px solid transparent;user-select:none;
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.subtab:hover{color:var(--accent);background:var(--surface-2)}
.subtab.on{
  color:var(--accent);font-weight:600;
  background:var(--accent-soft);
  border-color:color-mix(in srgb,var(--accent) 30%,transparent);
}
.subtab .cnt{
  font-family:var(--mono);font-size:var(--fs-10);line-height:1.4;
  padding:0 6px;border-radius:999px;background:var(--surface-2);color:var(--muted);
}
.subtab.on .cnt.has,
.subtab .cnt.has{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.tbtn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.tbtn.on:hover{background:var(--accent);color:#fff;transform:none}
.pair-rg{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tbtn:disabled{opacity:.4;cursor:not-allowed;transform:none}

.uchip{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:5px 10px;border:1px solid var(--surface-border);
  background:var(--surface-1);border-radius:999px;
  font-size:var(--fs-12);color:var(--ink-2);
  box-shadow:var(--surface-shadow-soft);
}
.uchip .role{
  font-size:var(--fs-10);letter-spacing:.1em;text-transform:uppercase;
  padding:1px 6px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent);font-weight:600;
}
.uchip.admin .role{background:var(--theme-gradient);color:#fff}
.uchip .name{font-weight:500}
.uchip .exp{font-family:var(--mono);font-size:var(--fs-10);color:var(--muted)}

.view{
  flex:1;min-height:0;overflow-y:auto;
  padding:14px;scroll-behavior:smooth;
}
.view-inner{
  max-width:none;margin:0;
  animation:fadeUp 260ms var(--ease);
}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.sect{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp-4);margin:0 0 var(--sp-4);
  padding-bottom:var(--sp-2);border-bottom:1px solid var(--surface-border);
}
.sect h2{margin:0;font-size:var(--fs-18);font-weight:700;letter-spacing:-.005em}
.sect .sub{font-size:var(--fs-12);color:var(--muted);display:flex;gap:var(--sp-2);align-items:center}
.sect + .sect{margin-top:var(--sp-6)}

/* Card */
.card{
  background:var(--surface-1);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--surface-border);
  border-radius:var(--radius);padding:var(--sp-5);
  position:relative;
  box-shadow:var(--card-shadow,0 8px 32px rgba(2,6,18,.38));
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.card:hover{box-shadow:var(--surface-shadow);border-color:var(--surface-border-strong);transform:translateY(-2px)}
.card.tight{padding:var(--sp-4)}

.acard{
  background:var(--surface-1);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--surface-border);
  border-radius:var(--radius);padding:var(--sp-5);
  box-shadow:var(--card-shadow,0 8px 32px rgba(2,6,18,.38));
  border-top:3px solid var(--accent);
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.acard:hover{box-shadow:var(--surface-shadow);transform:translateY(-2px)}
.acard.running{border-top-color:var(--positive)}
.acard.error{border-top-color:var(--danger)}
.acard.starting{border-top-color:var(--warning)}
.acard-head{
  display:grid;grid-template-columns:1fr auto;
  gap:var(--sp-4);align-items:start;margin-bottom:var(--sp-4);
}
.acard-name{
  font-size:var(--fs-28);font-weight:700;
  line-height:1.1;letter-spacing:-.015em;margin:0;color:var(--ink);
}
.acard-meta{
  display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  margin-top:var(--sp-2);font-size:var(--fs-11);color:var(--muted);
}
.acard-meta .sep{color:var(--rule)}
.acard-actions{
  display:flex;gap:var(--sp-2);align-items:center;
  flex-wrap:wrap;justify-content:flex-end;
}

.sdot{
  display:inline-block;width:8px;height:8px;
  border-radius:50%;background:var(--muted-2);margin-right:6px;vertical-align:middle;
}
.sdot.run{background:var(--positive);box-shadow:0 0 0 3px color-mix(in srgb,var(--positive) 20%,transparent)}
.sdot.err{background:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 20%,transparent)}
.sdot.start{background:var(--warning);box-shadow:0 0 0 3px color-mix(in srgb,var(--warning) 20%,transparent)}
.sdot.idle{background:var(--muted-2)}

/* ── 资源概览（战力/人口/金币/钻石）：紧凑数字网格 ──────────────── */
.brief{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;border-top:1px solid var(--rule-2);
  border-bottom:1px solid var(--rule-2);margin:10px 0;
}
.brief > div{padding:10px 12px;border-right:1px solid var(--rule-2)}
.brief > div:last-child{border-right:0}
.brief .k{
  font-size:var(--fs-10);letter-spacing:.06em;
  color:var(--muted);font-weight:500;margin-bottom:4px;
}
.brief .v{
  font-family:var(--mono);font-size:var(--fs-22);font-weight:700;
  line-height:1.15;letter-spacing:-.01em;color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.brief .v small{font-size:var(--fs-12);color:var(--muted);margin-left:2px;font-weight:400}
.brief .note{font-size:var(--fs-10);color:var(--muted-2);margin-top:3px}
/* 窄屏：资源概览 2 列，数字再小一号 */
@media (max-width:560px){
  .brief{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .brief > div{ padding:8px 10px }
  .brief > div:nth-child(2n){ border-right:0 }
  .brief > div:nth-child(-n+2){ border-bottom:1px solid var(--rule-2) }
  .brief .v{ font-size:var(--fs-18) }
}

.chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border:1px solid var(--surface-border);
  background:var(--surface-1);border-radius:999px;
  font-size:var(--fs-10);font-weight:500;color:var(--ink-2);
  letter-spacing:.02em;white-space:nowrap;
}
.chip.mono{font-family:var(--mono);letter-spacing:0}
.chip.ok{background:var(--positive-soft);color:var(--positive);border-color:transparent}
.chip.warn{background:var(--warning-soft);color:var(--warning);border-color:transparent}
.chip.err{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.chip.accent{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.chip.mute{background:var(--surface-2);color:var(--muted);border-color:transparent}
.chip.dark{background:var(--ink);color:#fff;border-color:var(--ink)}

.errbox{
  padding:var(--sp-3) var(--sp-4);
  background:var(--danger-soft);border-left:4px solid var(--danger);
  color:var(--danger);font-size:var(--fs-12);
  margin:var(--sp-3) 0;line-height:1.6;border-radius:8px;
}
.errbox.warn{background:var(--warning-soft);border-left-color:var(--warning);color:var(--warning)}
.errbox.info{background:var(--surface-2);border-left-color:var(--muted);color:var(--ink-2)}
.errbox.ok{background:var(--positive-soft);border-left-color:var(--positive);color:var(--positive)}

/* ── 账号信息栏：紧凑键值对网格（仿游戏后台密集信息排布） ───────────── */
.metabar{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:6px 14px;
  padding:10px 0 2px;
  border-top:1px solid var(--rule-2);
  margin-top:12px;
}
.metabar .m{
  display:flex;align-items:baseline;gap:6px;
  min-width:0;line-height:1.5;
}
.metabar .m .k{
  flex:none;
  font-size:var(--fs-11);
  color:var(--muted);font-weight:500;
  letter-spacing:.02em;
}
.metabar .m .v{
  font-family:var(--mono);font-size:var(--fs-13);color:var(--ink);
  font-variant-numeric:tabular-nums;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 窄屏：信息栏保持多列不堆叠，仅收窄最小列宽 */
@media (max-width:560px){
  .metabar{ grid-template-columns:repeat(auto-fit,minmax(108px,1fr)); gap:4px 10px }
  .metabar .m .k{ font-size:var(--fs-10) }
  .metabar .m .v{ font-size:var(--fs-12) }
}

.tasks{
  display:flex;flex-wrap:wrap;gap:var(--sp-2);
  padding:var(--sp-3) 0;border-top:1px solid var(--rule-2);margin-top:var(--sp-3);
}
.taskchip{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 13px;border:1px solid var(--surface-border);
  background:var(--surface-1);border-radius:999px;
  font-size:var(--fs-13);color:var(--ink-2);
  box-shadow:var(--surface-shadow-soft);
}
.taskchip .n{font-weight:600}
.taskchip .m{font-family:var(--mono);font-size:var(--fs-12);color:var(--muted)}
.taskchip.ok{border-color:color-mix(in srgb,var(--positive) 40%,transparent);color:var(--positive);background:var(--positive-soft)}
.taskchip.err{border-color:color-mix(in srgb,var(--danger) 40%,transparent);color:var(--danger);background:var(--danger-soft)}

.panel{
  margin-top:var(--sp-4);padding-top:var(--sp-4);
  border-top:1px solid var(--surface-border);
  display:none;
}
.panel.open{display:block;animation:fadeUp 220ms var(--ease)}

/* Log */
.logtabs{
  display:flex;gap:6px;flex-wrap:wrap;
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--surface-border);
  margin-bottom:var(--sp-3);
}
.logtab{
  padding:5px 12px;font-size:var(--fs-11);font-weight:500;
  color:var(--muted);border:1px solid transparent;
  border-radius:999px;cursor:pointer;
  transition:all var(--dur) var(--ease);
  display:inline-flex;align-items:center;gap:6px;
}
.logtab:hover{background:var(--surface-2);color:var(--ink)}
.logtab.on{background:var(--theme-gradient);color:#fff;border-color:transparent;box-shadow:var(--surface-shadow-soft)}
.logtab i{font-family:var(--mono);font-style:normal;font-size:var(--fs-10);opacity:.7}
.logtab.empty{opacity:.45}
.logtab.empty:hover{opacity:.8}

.logs{
  background:var(--surface-1);border:1px solid var(--surface-border);
  border-radius:var(--radius);padding:var(--sp-3);
  max-height:420px;overflow-y:auto;
  font-family:var(--mono);font-size:var(--fs-12);
  line-height:1.65;font-variant-numeric:tabular-nums;
  box-shadow:var(--surface-shadow-soft);
}
.logs .l{
  padding:3px 4px;border-bottom:1px solid var(--rule-2);border-radius:6px;
  display:grid;grid-template-columns:64px 1fr;gap:var(--sp-3);
}
.logs .l:hover{background:var(--surface-2)}
.logs .l .t{color:var(--muted-2);font-size:var(--fs-11)}
.logs .l .m{color:var(--ink-2);word-break:break-word;white-space:pre-wrap}
.logs .l.l-error .m{color:var(--danger)}
.logs .l.l-warn .m{color:var(--warning)}
.logs .l.l-info .m{color:var(--ink-2)}
.logs .l.l-debug .m,.logs .l.l-trace .m{color:var(--muted)}
.logs-empty{
  padding:var(--sp-6);text-align:center;color:var(--muted-2);
  font-size:var(--fs-12);font-family:var(--sans);
}

/* Tables & kv */
.kv{
  display:grid;grid-template-columns:max-content 1fr;
  gap:var(--sp-2) var(--sp-4);align-items:baseline;font-size:var(--fs-12);
}
.kv dt{
  color:var(--muted);font-size:var(--fs-10);
  letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding-top:2px;
}
.kv dd{margin:0;color:var(--ink-2);font-family:var(--mono);font-variant-numeric:tabular-nums}
.kv dd.txt{font-family:var(--sans)}

.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-12)}
.tbl th{
  text-align:left;padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-10);letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--muted);border-bottom:1px solid var(--surface-border);
}
.tbl td{
  padding:var(--sp-3);border-bottom:1px solid var(--rule-2);
  color:var(--ink-2);vertical-align:middle;
}
.tbl tr:hover td{background:var(--surface-2)}
.tbl td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.tbl tr:last-child td{border-bottom:0}

/* Factory cards */
.facgrid{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
.faccard{
  border:1px solid var(--surface-border);background:var(--surface-1);
  border-radius:var(--radius);padding:var(--sp-4);
  border-left:4px solid var(--muted-2);
  box-shadow:var(--surface-shadow-soft);
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.faccard:hover{box-shadow:var(--surface-shadow);transform:translateY(-1px)}
.faccard.s-producing{border-left-color:var(--positive)}
.faccard.s-done,.faccard.s-ready{border-left-color:var(--warning)}
.faccard.s-full{border-left-color:var(--info)}
.faccard.s-idle{border-left-color:var(--muted-2)}
.faccard.s-building{border-left-color:var(--accent)}
.faccard.skipped{opacity:.55;border-left-color:var(--danger)}
.fac-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp-3);margin-bottom:var(--sp-3);
  padding-bottom:var(--sp-2);border-bottom:1px solid var(--rule-2);
}
.fac-head h3{
  margin:0;font-size:var(--fs-18);font-weight:700;letter-spacing:-.005em;color:var(--ink);
}
.fac-head h3 .lv{
  font-family:var(--mono);font-size:var(--fs-13);color:var(--muted);
  margin-left:var(--sp-2);font-weight:400;
}
.fac-head .right{display:flex;align-items:center;gap:var(--sp-2)}
.fackv{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-2) var(--sp-5);font-size:var(--fs-14);
}
.fackv .frow{display:grid;grid-template-columns:88px 1fr;gap:var(--sp-2);align-items:baseline}
.fackv .frow.wide{grid-column:1/-1}
.fackv .frow .k{
  color:var(--muted);font-size:var(--fs-12);
  letter-spacing:.1em;text-transform:uppercase;font-weight:600;
}
.fackv .frow .v{color:var(--ink-2);font-family:var(--mono);font-variant-numeric:tabular-nums}
.fackv .frow .v.txt{font-family:var(--sans)}
.facstock{
  margin-top:var(--sp-3);padding-top:var(--sp-3);
  border-top:1px dashed var(--rule);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:var(--sp-2);font-size:var(--fs-13);
}
.facstock .it{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp-2);padding:5px 10px;background:var(--surface-2);border-radius:8px;
}
.facstock .it .n{color:var(--ink-2)}
.facstock .it .q{font-family:var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.facstock .it.full{background:var(--warning-soft);color:var(--warning)}
.facfloor{
  margin-top:var(--sp-4);padding-top:var(--sp-3);
  border-top:1px solid var(--surface-border);
  display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;
  font-size:var(--fs-11);color:var(--muted);
}

/* Quest */
.mtask{
  border:1px solid var(--surface-border);background:var(--surface-1);
  border-radius:var(--radius);padding:var(--sp-5);margin-bottom:var(--sp-4);
  box-shadow:var(--surface-shadow-soft);
}
.mtask-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp-3);margin-bottom:var(--sp-3);flex-wrap:wrap;
}
.mtask-id{font-family:var(--mono);font-size:var(--fs-11);color:var(--muted);letter-spacing:.05em}
.mtask-goal{
  font-size:var(--fs-22);font-weight:700;
  line-height:1.3;letter-spacing:-.01em;margin:var(--sp-2) 0 var(--sp-3);color:var(--ink);
}
.qbar{height:8px;background:var(--surface-2);border-radius:999px;position:relative;margin:var(--sp-3) 0;overflow:hidden}
.qbar > i{
  position:absolute;left:0;top:0;bottom:0;background:var(--theme-gradient);
  border-radius:999px;transition:width 400ms var(--ease);
}
.qbar.done > i{background:linear-gradient(135deg,#4ade80,#16a34a)}
.mtask-line{
  display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  font-size:var(--fs-12);color:var(--muted);
}
.mtask-line .pct{font-family:var(--mono);color:var(--accent);font-weight:600}

.shortage{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}
.shortage .it{
  padding:3px 10px;background:var(--danger-soft);color:var(--danger);
  border-radius:8px;font-family:var(--mono);font-size:var(--fs-11);
}

.nextsteps{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px dashed var(--rule)}
.nextsteps ol{list-style:none;padding:0;margin:var(--sp-2) 0 0;counter-reset:step}
.nextsteps li{
  counter-increment:step;
  display:grid;grid-template-columns:32px 1fr auto;gap:var(--sp-3);
  padding:var(--sp-2) 0;border-bottom:1px solid var(--rule-2);
  font-size:var(--fs-12);align-items:baseline;
}
.nextsteps li::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--mono);font-size:var(--fs-10);
  color:var(--accent);letter-spacing:.05em;
}
.nextsteps li:last-child{border-bottom:0}
.nextsteps li .txt{color:var(--ink-2)}
.nextsteps li .id{font-family:var(--mono);font-size:var(--fs-10);color:var(--muted-2)}

/* Inputs & switches */
.inp{
  padding:8px 12px;border:1px solid var(--surface-border-strong);
  background:var(--paper-2);border-radius:10px;
  font-size:var(--fs-12);color:var(--ink);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
  font-family:var(--sans);
}
.inp:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(56,189,248,.15)}
.inp.mono{font-family:var(--mono)}
.inp::placeholder{color:var(--muted-2)}
textarea.inp{resize:vertical;min-height:64px;line-height:1.55}

.sw{
  display:inline-block;width:34px;height:19px;
  border:none;background:var(--surface-3);
  border-radius:999px;position:relative;cursor:pointer;
  transition:background var(--dur) var(--ease);
  vertical-align:middle;flex:none;box-shadow:inset 0 0 0 1px var(--surface-border);
}
.sw::after{
  content:'';position:absolute;top:2px;left:2px;
  width:15px;height:15px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(15,23,42,.25);
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease);
}
.sw.on{background:var(--theme-gradient)}
.sw.on::after{transform:translateX(15px);background:#fff}
/* 拨动开关容器：往左=关、往右=开 */
.np-switch{display:inline-flex;align-items:center;gap:7px;padding:4px 2px}
.np-switch .sw-lbl{font-size:var(--fs-12);color:var(--ink-2);white-space:nowrap}
.dyn-sw-wrap{display:inline-flex;align-items:center;gap:6px;padding:3px 2px;font-size:var(--fs-11)}
.dyn-sw-wrap .sw-lbl{color:var(--ink-2)}
.dyn-sw{transform:scale(.85);transform-origin:left center;vertical-align:middle}

.fieldrow{
  display:grid;grid-template-columns:1fr auto;gap:var(--sp-3);
  align-items:center;padding:var(--sp-3) 0;
  border-bottom:1px solid var(--rule-2);
}
.fieldrow:last-child{border-bottom:0}
.fieldrow .lbl{font-size:var(--fs-13);font-weight:500;color:var(--ink)}
.fieldrow .desc{font-size:var(--fs-11);color:var(--muted);margin-top:2px;line-height:1.5}
.fieldrow .ctl{display:flex;align-items:center;gap:var(--sp-2)}

/* Modal */
.modal{
  position:fixed;inset:0;background:rgba(15,23,42,.42);
  display:none;align-items:center;justify-content:center;
  /* 必须高于登录遮罩 .auth(z-index:200)：登录页上的「账号续费/忘记密码」
     弹窗才不会被整屏登录页盖住导致看似点击无反应；仍低于 toast(300) */
  z-index:250;padding:var(--sp-4);
  animation:fadeIn 160ms var(--ease);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.modal.open{display:flex}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal .box{
  background:var(--surface-1);border:1px solid var(--surface-border);
  border-radius:var(--radius);width:100%;max-width:520px;
  max-height:88vh;display:flex;flex-direction:column;
  animation:modalIn 220ms var(--ease);
  box-shadow:var(--surface-shadow);
}
@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.modal .box.wide{max-width:820px}
.modal .box.screen{max-width:1080px;height:88vh}
.modal-hd{
  padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--surface-border);
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp-3);flex:none;background:color-mix(in srgb,var(--accent) 4%,transparent);
}
.modal-hd h3{
  margin:0;font-size:var(--fs-22);font-weight:700;letter-spacing:-.01em;color:var(--ink);
}
.modal-hd .x{
  font-size:var(--fs-22);color:var(--muted);cursor:pointer;
  padding:0 var(--sp-2);transition:color var(--dur) var(--ease);
  line-height:1;
}
.modal-hd .x:hover{color:var(--accent)}
.modal-bd{padding:var(--sp-5);overflow-y:auto;overflow-x:hidden;flex:1;min-height:0}
.modal-ft{
  padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--surface-border);
  display:flex;justify-content:flex-end;gap:var(--sp-2);flex-wrap:wrap;
  flex:none;background:var(--surface-2);
}

.mtabs{
  display:flex;gap:0;border-bottom:1px solid var(--surface-border);
  margin:calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-5);
  padding:0 var(--sp-5);overflow-x:auto;background:var(--surface-1);
}
.mtab{
  padding:var(--sp-3) var(--sp-4);font-size:var(--fs-12);font-weight:500;
  color:var(--muted);border-bottom:2px solid transparent;
  cursor:pointer;transition:all var(--dur) var(--ease);white-space:nowrap;
}
.mtab:hover{color:var(--accent)}
.mtab.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}

/* QR viewer */
.qrbox{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);padding:var(--sp-5) 0}
.qrbox .frame{
  width:260px;height:260px;border:1px solid var(--surface-border);
  background:var(--surface-1);display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;border-radius:var(--radius);
  box-shadow:var(--surface-shadow-soft);
}
.qrbox .frame img{width:100%;height:100%;object-fit:contain;display:block}
.qrbox .frame .spin{
  width:24px;height:24px;border:2px solid var(--surface-border);
  border-top-color:var(--accent);border-radius:50%;
  animation:spin 800ms linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.qrbox .frame::before,.qrbox .frame::after{
  content:'';position:absolute;width:20px;height:20px;border:2px solid var(--accent);
}
.qrbox .frame::before{top:8px;left:8px;border-right:0;border-bottom:0;border-radius:4px 0 0 0}
.qrbox .frame::after{bottom:8px;right:8px;border-left:0;border-top:0;border-radius:0 0 4px 0}
/* ★ 扫码线：扫码登录控制台的标志性动效 —— 一条蓝色渐变线自上而下扫过 */
.qrbox .frame .scanline{
  position:absolute;left:8px;right:8px;top:8px;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.85;pointer-events:none;
  animation:scan 2.4s var(--ease) infinite;
}
@keyframes scan{
  0%{transform:translateY(0);opacity:0}
  8%{opacity:.85}
  92%{opacity:.85}
  100%{transform:translateY(236px);opacity:0}
}
.qrbox .frame.done .scanline{display:none}
/* 二维码图片淡入 */
.qrbox .frame img{animation:fadeIn 320ms var(--ease)}
.qrbox .stat{text-align:center;font-size:var(--fs-12);color:var(--muted);min-height:22px}
.qrbox .stat.ok{color:var(--positive);font-weight:500}
.qrbox .stat.err{color:var(--danger);font-weight:500}
.qrbox .stat.pending{color:var(--accent)}
.qrbox .stat .big{
  font-size:var(--fs-48);color:var(--positive);
  line-height:1;display:block;margin-bottom:var(--sp-2);font-weight:700;
}
.qrfoot{
  padding-top:var(--sp-3);border-top:1px dashed var(--rule);
  font-size:var(--fs-10);color:var(--muted-2);text-align:center;
  font-family:var(--mono);letter-spacing:.02em;
}

/* Config */
.cfg-tabs{
  position:sticky;top:calc(var(--sp-5) * -1);
  background:var(--surface-1);z-index:2;
  margin:calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-5);
  padding:0 var(--sp-5);border-bottom:1px solid var(--surface-border);
  display:flex;gap:0;overflow-x:auto;
}
.cfg-tab{
  padding:var(--sp-3) var(--sp-4);font-size:var(--fs-12);font-weight:500;
  color:var(--muted);border-bottom:2px solid transparent;
  cursor:pointer;white-space:nowrap;transition:all var(--dur) var(--ease);
}
.cfg-tab:hover{color:var(--accent)}
.cfg-tab.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.cfg-desc{
  font-size:var(--fs-12);color:var(--ink-2);line-height:1.6;
  padding:var(--sp-3) var(--sp-4);background:var(--accent-soft);
  border-left:3px solid var(--accent);border-radius:8px;margin-bottom:var(--sp-4);
}
.cfg-grid{display:grid;grid-template-columns:1fr;gap:0}

/* Server picker */
.srv-wrap{display:grid;grid-template-columns:180px 1fr;gap:var(--sp-4);min-height:360px}
.srv-tabs{border-right:1px solid var(--surface-border);padding-right:var(--sp-3);overflow-y:auto;max-height:420px}
.srv-tab{
  display:block;width:100%;text-align:left;
  padding:7px var(--sp-3);font-size:var(--fs-12);color:var(--muted);
  cursor:pointer;border-radius:8px;margin-bottom:2px;
  transition:all var(--dur) var(--ease);
}
.srv-tab:hover{color:var(--ink);background:var(--surface-2)}
.srv-tab.on{color:var(--accent);background:var(--accent-soft);font-weight:600;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent)}
.srv-list{overflow-y:auto;max-height:420px}
.srv-row{
  display:grid;grid-template-columns:80px 1fr auto;gap:var(--sp-3);
  padding:var(--sp-3);border-bottom:1px solid var(--rule-2);
  cursor:pointer;align-items:center;border-radius:8px;
  transition:background var(--dur) var(--ease);
}
.srv-row:hover{background:var(--surface-2)}
.srv-row.on{
  background:var(--accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent);
}
.srv-row .no{font-family:var(--mono);font-size:var(--fs-13);font-weight:600;color:var(--accent)}
.srv-row .role{font-size:var(--fs-12);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srv-row .role.empty{color:var(--muted-2);font-style:italic}
.srv-row .tags{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.srv-foot{
  padding:var(--sp-3) var(--sp-4);background:var(--surface-1);
  border:1px solid var(--surface-border);border-radius:var(--radius);
  margin-top:var(--sp-4);font-size:var(--fs-12);color:var(--muted);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);flex-wrap:wrap;box-shadow:var(--surface-shadow-soft);
}
.srv-foot .picked{font-family:var(--mono);color:var(--accent);font-weight:600}

/* Auth */
.auth{
  position:fixed;inset:0;z-index:200;
  background:
    radial-gradient(circle at top left,color-mix(in srgb,var(--accent) 16%,transparent) 0,transparent 28rem),
    var(--app-bg);
  display:none;align-items:center;justify-content:center;padding:var(--sp-5);
  overflow-y:auto;
}
.auth.open{display:flex}
.auth-inner{
  width:100%;max-width:960px;
  display:grid;grid-template-columns:1.1fr 1fr;gap:var(--sp-8);
  align-items:center;
}
.auth-brand .n{
  font-size:clamp(48px,7vw,96px);
  line-height:.95;letter-spacing:-.04em;font-weight:800;
  background:var(--theme-gradient);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;margin:0;
}
.auth-brand .n em{font-style:normal;color:var(--accent);-webkit-text-fill-color:var(--accent)}
.auth-brand .tag{
  margin-top:var(--sp-4);font-size:var(--fs-11);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);font-weight:700;
}
.auth-brand .lede{
  margin-top:var(--sp-5);
  font-size:var(--fs-18);line-height:1.6;color:var(--ink-2);max-width:38ch;
}
.auth-brand .rule{width:60px;height:4px;background:var(--theme-gradient);border-radius:999px;margin:var(--sp-5) 0}
.auth-brand .foot{
  font-size:var(--fs-11);color:var(--muted);line-height:1.7;
  font-family:var(--mono);letter-spacing:.02em;
}
.auth-form{
  background:var(--surface-1);
  border:1px solid var(--surface-border);
  padding:var(--sp-6);border-radius:18px;position:relative;
  box-shadow:var(--surface-shadow);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.auth-form::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:4px;background:var(--theme-gradient);
  border-radius:18px 18px 0 0;
}
.auth-tabs{
  display:flex;gap:var(--sp-4);margin-bottom:var(--sp-5);
  border-bottom:1px solid var(--surface-border);padding-bottom:var(--sp-3);
}
.auth-tab{
  font-size:var(--fs-13);font-weight:600;color:var(--muted);
  cursor:pointer;padding-bottom:2px;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:all var(--dur) var(--ease);
}
.auth-tab:hover{color:var(--accent)}
.auth-tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.auth-form h2{
  margin:0 0 var(--sp-2);font-size:var(--fs-28);font-weight:800;letter-spacing:-.015em;color:var(--ink);
}
.auth-form .hint{font-size:var(--fs-12);color:var(--muted);margin-bottom:var(--sp-5);line-height:1.55}
.auth-form label{
  display:block;font-size:var(--fs-10);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:6px;
}
.auth-form .inp{
  width:100%;padding:11px 13px;font-size:var(--fs-14);
  border:1px solid var(--surface-border-strong);background:var(--paper-2);
}
.auth-form .inp:focus{background:var(--paper-2);border-color:var(--accent);box-shadow:0 0 0 3px rgba(56,189,248,.15)}
.auth-form .fld{margin-bottom:var(--sp-4)}
/* 密码框 + 显隐切换按钮 */
.auth-form .pwd-wrap{ position:relative; display:flex; align-items:center }
.auth-form .pwd-wrap .inp{ width:100%; padding-right:42px }
.auth-form .pwd-toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; font-size:18px;
  padding:4px 6px; opacity:.55; transition:opacity .15s;
}
.auth-form .pwd-toggle:hover{ opacity:1 }
.auth-form .pwd-hint{
  font-size:11px; color:var(--muted); margin-top:5px; line-height:1.5;
}
.auth-form .pwd-hint.hidden{ display:none }
.auth-form .btn{
  width:100%;padding:13px;background:var(--theme-gradient);color:#fff;
  font-size:var(--fs-13);font-weight:700;letter-spacing:.04em;
  border-radius:10px;
  box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 35%,transparent);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
  margin-top:var(--sp-2);
}
.auth-form .btn:hover{background:var(--theme-secondary);transform:translateY(-1px)}
.auth-form .btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.auth-msg{
  padding:var(--sp-3);margin-bottom:var(--sp-4);font-size:var(--fs-12);
  border-left:3px solid var(--danger);border-radius:8px;
  background:var(--danger-soft);color:var(--danger);display:none;
}
.auth-msg.ok{border-left-color:var(--positive);background:var(--positive-soft);color:var(--positive)}
.auth-msg.show{display:block}
.auth-links{
  margin-top:var(--sp-4);padding-top:var(--sp-4);
  border-top:1px dashed var(--rule);
  display:flex;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;
  font-size:var(--fs-11);
}
.auth-links a{
  color:var(--muted);cursor:pointer;text-decoration:none;
  border-bottom:1px solid transparent;transition:all var(--dur) var(--ease);
}
.auth-links a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.auth-claim{
  margin-top:var(--sp-3);padding:var(--sp-3);
  background:var(--accent-soft);border-radius:10px;
  font-size:var(--fs-11);color:var(--accent);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
}
.auth-claim button{
  padding:5px 12px;background:var(--theme-gradient);border:none;
  font-size:var(--fs-11);border-radius:8px;color:#fff;
  transition:all var(--dur) var(--ease);
}
.auth-claim button:hover{background:var(--theme-secondary)}

/* Dynamic dashboard */
.dyn-tabs{
  display:flex;gap:6px;flex-wrap:wrap;
  padding-bottom:var(--sp-3);margin-bottom:var(--sp-4);
  border-bottom:1px solid var(--surface-border);
}
.dyn-tab{
  padding:5px 12px;font-size:var(--fs-11);font-weight:500;
  color:var(--muted);border-radius:999px;cursor:pointer;
  transition:all var(--dur) var(--ease);border:1px solid transparent;
}
.dyn-tab:hover{background:var(--surface-2);color:var(--ink)}
.dyn-tab.on{background:var(--theme-gradient);color:#fff}
.dyn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--sp-4)}
.dyn-card{background:var(--surface-1);border:1px solid var(--surface-border);border-radius:var(--radius);padding:var(--sp-4);box-shadow:var(--surface-shadow-soft)}
.dyn-card h4{
  margin:0 0 var(--sp-3);padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--rule-2);
  font-size:var(--fs-10);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-2);
}
.dyn-card h4 .cat{color:var(--accent)}
.dyn-row{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--sp-3);padding:5px 0;font-size:var(--fs-12);
  border-bottom:1px dotted var(--rule-2);
}
.dyn-row:last-child{border-bottom:0}
.dyn-row .k{color:var(--muted)}
.dyn-row .v{font-family:var(--mono);color:var(--accent);font-variant-numeric:tabular-nums;text-align:right}
/* 带柱状条的动态行 */
.dyn-bar{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:var(--fs-12);border-bottom:1px dotted var(--rule-2)}
.dyn-bar:last-child{border-bottom:0}
.dyn-bar .k{flex:none;width:52px;color:var(--muted)}
.dyn-bar .bc-track{flex:1;height:12px}
.dyn-bar .v{flex:none;min-width:52px;font-family:var(--mono);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.dyn-mat{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:4px;margin-top:var(--sp-2)}
.dyn-mat .it{
  padding:5px 8px;background:var(--surface-2);border-radius:8px;
  font-size:var(--fs-11);display:flex;justify-content:space-between;gap:4px;
}
.dyn-mat .it .n{color:var(--ink-2)}
.dyn-mat .it .q{font-family:var(--mono);color:var(--muted)}
.dyn-mat .it.full{background:var(--warning-soft);color:var(--warning)}
/* 材料库存柱状格 */
.dyn-mat .it-bar{
  padding:5px 8px;background:var(--surface-2);border-radius:8px;
  font-size:var(--fs-11);display:flex;flex-direction:column;gap:3px;
}
.dyn-mat .it-bar .n{color:var(--ink-2);font-size:var(--fs-10)}
.dyn-mat .it-bar .bc-track{height:7px}
.dyn-mat .it-bar .bc-fill.full{background:linear-gradient(135deg,#fca5a5,#ef4444)}
.dyn-mat .it-bar .q{font-family:var(--mono);color:var(--muted);font-size:var(--fs-10);font-variant-numeric:tabular-nums}
.dyn-mat .it-bar.full{background:var(--warning-soft)}

/* Storage panel（资源储量） */
.st-card{
  background:var(--surface-1);border:1px solid var(--surface-border);
  border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);
  box-shadow:var(--surface-shadow-soft);max-width:640px;
  display:grid;gap:2px;
}
.st-row{
  display:grid;grid-template-columns:72px 1fr 160px;gap:var(--sp-3);
  align-items:center;padding:8px 6px;border-bottom:1px dotted var(--rule-2);
}
.st-row:last-child{border-bottom:0}
.st-row .st-name{color:var(--ink-2);font-weight:600}
.st-row .bc-track{height:12px}
.st-row .bc-fill.full{background:linear-gradient(135deg,#fca5a5,#ef4444)}
.st-row .st-q{font-family:var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.st-row.full{background:var(--warning-soft);border-radius:8px;margin:2px 0}
.st-row.full .st-q{color:var(--warning);font-weight:600}
.st-tip{color:var(--muted);font-size:var(--fs-12);max-width:640px}

.dyn-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;background:var(--surface-2);color:var(--muted);
  border-radius:999px;font-size:var(--fs-10);margin:2px 4px 2px 0;
}
.dyn-chip.on{background:var(--positive-soft);color:var(--positive)}

/* New panel */
.np-summary{
  padding:var(--sp-3) var(--sp-4);background:var(--accent-soft);
  border-left:3px solid var(--accent);border-radius:8px;
  font-size:var(--fs-12);color:var(--ink-2);line-height:1.6;margin-bottom:var(--sp-4);
}
.np-notes,.np-err{
  margin:0 0 var(--sp-3);padding-left:var(--sp-4);
  font-size:var(--fs-12);color:var(--ink-2);line-height:1.7;
}
.np-err{color:var(--danger)}
.np-details{margin-top:var(--sp-3);border:1px solid var(--surface-border);border-radius:var(--radius);background:var(--surface-1);overflow:hidden}
.np-details summary{
  padding:var(--sp-2) var(--sp-3);cursor:pointer;font-size:var(--fs-11);
  color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-weight:600;
}
.np-details summary:hover{color:var(--accent)}
.np-details pre{
  margin:0;padding:var(--sp-3);border-top:1px solid var(--rule-2);
  background:var(--surface-2);font-family:var(--mono);font-size:var(--fs-11);
  line-height:1.6;overflow-x:auto;color:var(--ink-2);
  max-height:360px;overflow-y:auto;
}
.np-controls{
  display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;
  padding:var(--sp-3) 0;margin-bottom:var(--sp-3);border-bottom:1px solid var(--rule-2);
}

/* Building */
.bcard{
  border:1px solid var(--surface-border);background:var(--surface-1);
  border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);
  display:grid;grid-template-columns:1fr auto auto;gap:var(--sp-3);
  align-items:center;margin-bottom:var(--sp-2);
  border-left:4px solid var(--muted-2);box-shadow:var(--surface-shadow-soft);
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.bcard:hover{box-shadow:var(--surface-shadow);transform:translateY(-1px)}
.bcard.factory{border-left-color:var(--positive)}
.bcard.building{border-left-color:var(--accent)}
.bcard.ready{border-left-color:var(--warning)}
.bcard .nm{font-size:var(--fs-16);font-weight:700;color:var(--ink)}
.bcard .nm .lv{font-family:var(--mono);font-size:var(--fs-11);color:var(--muted);margin-left:var(--sp-2)}
.bcard .meta{font-size:var(--fs-11);color:var(--muted)}

/* Hero */
.herolist{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-3)}
.herocard{
  border:1px solid var(--surface-border);background:var(--surface-1);
  border-radius:var(--radius);padding:var(--sp-3);box-shadow:var(--surface-shadow-soft);
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.herocard:hover{box-shadow:var(--surface-shadow);transform:translateY(-1px)}
.herocard .nm{font-size:var(--fs-16);font-weight:700;color:var(--ink);margin-bottom:var(--sp-1)}
.herocard .meta{font-size:var(--fs-11);color:var(--muted);font-family:var(--mono)}

/* Utility */
.hidden{display:none !important}
/* 点击复制微交互：等宽 ID 悬浮显虚线下划线，点击后短暂变蓝打勾 */
.copyable{cursor:copy;border-bottom:1px dashed transparent;transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.copyable:hover{border-bottom-color:var(--muted-2)}
.copyable.copied{color:var(--accent);border-bottom-color:var(--accent)}
/* 骨架屏：异步面板加载态，比纯文字「加载中」更精致 */
.skeleton{
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-border) 37%,var(--surface-2) 63%);
  background-size:400% 100%;
  animation:shimmer 1.4s ease infinite;
  border-radius:var(--radius);
  color:transparent !important;
}
.skeleton *{visibility:hidden}
@keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
/* 复制提示浮层 */
.toast{
  position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;
  padding:10px 20px;border-radius:999px;
  font-size:var(--fs-12);letter-spacing:.02em;
  opacity:0;pointer-events:none;z-index:300;
  box-shadow:var(--surface-shadow);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.row{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap}
.row.end{justify-content:flex-end}
.row.between{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:var(--sp-3)}
.mt-3{margin-top:var(--sp-3)} .mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)}
.mb-3{margin-bottom:var(--sp-3)} .mb-4{margin-bottom:var(--sp-4)}
.txt-mute{color:var(--muted)}
.txt-small{font-size:var(--fs-11)}
.txt-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.txt-serif{font-family:var(--serif)}
.hr{height:1px;background:var(--rule);margin:var(--sp-4) 0;border:0}
.hr.dashed{background:transparent;border-top:1px dashed var(--rule)}
.empty{padding:var(--sp-7) var(--sp-4);text-align:center;color:var(--muted-2);font-size:var(--fs-12)}
.empty .big{
  font-size:var(--fs-28);color:var(--accent);font-weight:700;
  margin-bottom:var(--sp-2);letter-spacing:-.01em;
}

/* Responsive */
@media (max-width:1100px){
  .brief{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brief > div:nth-child(2n){border-right:0}
  .brief > div:nth-child(-n+2){border-bottom:1px solid var(--rule-2)}
  .auth-inner{grid-template-columns:1fr;gap:var(--sp-6)}
  .auth-brand .n{font-size:52px}
  .auth-brand .lede{display:none}
}
@media (max-width:820px){
  :root{--rail-w:0px}
  #app{grid-template-columns:1fr}
  .rail{
    position:fixed;top:0;left:0;bottom:0;width:280px;z-index:80;
    transform:translateX(-100%);transition:transform 240ms var(--ease);
    box-shadow:0 0 40px rgba(15,23,42,.18);
  }
  .rail.open{transform:none}
  .masthead{padding:var(--sp-4);grid-template-columns:auto 1fr;gap:var(--sp-3)}
  .masthead .no{font-size:var(--fs-36)}
  .masthead h1{font-size:var(--fs-22)}
  .masthead .tools{grid-column:1/-1;justify-content:flex-start}
  .view{padding:var(--sp-4)}
  .srv-wrap{grid-template-columns:1fr}
  .srv-tabs{
    border-right:0;border-bottom:1px solid var(--surface-border);
    padding-right:0;padding-bottom:var(--sp-2);
    display:flex;gap:2px;overflow-x:auto;max-height:none;
  }
  .srv-tab{border-left:0;border-bottom:2px solid transparent;white-space:nowrap}
  .srv-tab.on{border-left-color:transparent;border-bottom-color:var(--accent)}
  .fackv{grid-template-columns:1fr}
  .acard-head{grid-template-columns:1fr}
  .acard-actions{justify-content:flex-start}
  .mobile-only{display:inline-flex !important}
}
@media (min-width:821px){
  .mobile-only{display:none !important}
}
.mobile-only{display:none}
.rail-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:79;display:none;backdrop-filter:blur(2px)}
.rail-backdrop.open{display:block}

@media print{
  .rail,.masthead .tools,.modal,.auth{display:none !important}
  body{background:#fff;overflow:visible}
  #app{display:block;height:auto}
  .view{overflow:visible;padding:0}
}

/* ── 📡 动态：实时运行日志 ─────────────────────────────── */
#btnLive.on{ background:var(--accent-gradient,linear-gradient(135deg,#60a5fa,#3b82f6)); color:#fff; border-color:transparent; box-shadow:0 4px 14px rgba(59,130,246,.35) }
.live-view{ display:flex; flex-direction:column; gap:14px; height:100%; min-height:0 }
.live-ctl{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap }
.live-title{ display:flex; align-items:center; gap:9px; font-size:var(--fs-14); color:var(--ink); font-weight:600 }
.live-title .pdot{ width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(59,130,246,.18); animation:livePulse 1.6s ease-in-out infinite }
@keyframes livePulse{ 0%,100%{opacity:1} 50%{opacity:.32} }
.live-title .sub{ font-size:var(--fs-12); font-weight:500; color:var(--muted) }
.live-btns{ display:flex; gap:8px; flex-wrap:wrap }
.live-btns .tbtn.on{ background:var(--accent); color:#fff; border-color:transparent }
.live-box{ flex:none; min-height:340px; height:calc(100vh - 250px); overflow:auto; background:var(--paper-2); border:1px solid var(--surface-border); border-radius:10px; padding:12px 14px; font-family:var(--mono); font-size:var(--fs-12); line-height:1.7; box-shadow:inset 0 1px 0 rgba(255,255,255,.03), var(--surface-shadow-soft) }
.live-box .line{ display:flex; gap:9px; padding:1px 0; white-space:nowrap; min-width:max-content }
.live-box .ltime{ color:#8aa0c0; flex:none }
.live-box .ltag{ color:#38bdf8; flex:none; font-weight:600 }
.live-box .lbody{ color:#16233c; overflow:hidden; text-overflow:ellipsis; white-space:pre-wrap }
.live-box .line.info .lbody{ color:#5b7194 }
.live-box .line.warn .lbody{ color:#b45309 }
.live-box .line.error .lbody{ color:#dc2626 }
.live-box::-webkit-scrollbar{ width:9px; height:9px }
.live-box::-webkit-scrollbar-thumb{ background:rgba(148,163,184,.35); border-radius:8px }
.live-box::-webkit-scrollbar-track{ background:transparent }
@media (max-width:820px){
  .live-box{ height:calc(100vh - 300px); min-height:300px }
  .live-ctl{ align-items:flex-start }
}

/* ── 📊 玩法运行统计（横向柱状图+数据） ─────────────── */
.barchart{ display:flex; flex-direction:column; gap:8px; margin-top:14px; padding:14px 16px; border:1px solid var(--surface-border); border-radius:10px; background:var(--surface); box-shadow:var(--surface-shadow-soft) }
.bc-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:2px }
.bc-title{ font-size:var(--fs-13); font-weight:700; color:var(--ink) }
.bc-sub{ font-size:var(--fs-11); color:var(--muted) }
.bc-row{ display:flex; align-items:center; gap:10px }
.bc-label{ flex:none; width:76px; font-size:var(--fs-12); color:var(--ink); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.bc-track{ flex:1; height:14px; background:var(--surface-muted,#e9eef5); border-radius:7px; overflow:hidden }
.bc-fill{ height:100%; border-radius:7px; background:linear-gradient(135deg,#93c5fd,#3b82f6); transition:width .4s ease; min-width:5px }
.bc-fill.ok{ background:linear-gradient(135deg,#6ee7b7,#10b981) }
.bc-fill.err{ background:linear-gradient(135deg,#fca5a5,#ef4444) }
.bc-val{ flex:none; min-width:56px; font-size:var(--fs-12); font-weight:700; color:var(--ink); font-family:var(--mono) }
@media (max-width:820px){
  .bc-label{ width:58px; font-size:var(--fs-11) }
  .bc-row{ gap:7px }
}

/* 工厂面板内：状态标签与提示文字再大一号 */
.faccard .chip{font-size:var(--fs-12)}
.faccard .txt-small{font-size:var(--fs-12)}

/* ── 📱 手机专属适配：内容完整显示、不挤压、不横向溢出 ───────── */
@media (max-width:560px){
  .masthead{ padding:10px 12px; gap:8px }
  .masthead h1{ font-size:var(--fs-18) }
  .masthead .no{ font-size:var(--fs-30) }
  .masthead .titles .en{ font-size:var(--fs-11) }
  .masthead .tools{ gap:6px }
  .view{ padding:12px }
  .sect h2{ font-size:var(--fs-17) }
  .sub{ flex-wrap:wrap; gap:8px }

  /* 通用按钮：手机适中、不占满 */
  .tbtn{ padding:6px 10px; font-size:var(--fs-12); border-radius:8px; gap:4px }
  .tools .tbtn{ padding:6px 8px }

  /* 概览账号信息：2 列紧凑，不再挤 */
  .brief{ grid-template-columns:1fr 1fr }
  .brief > div{ padding:10px 12px }
  .brief .k{ font-size:var(--fs-10) }

  /* 各类网格：手机单列或自适应，杜绝 minmax 大值造成的挤压溢出 */
  .dyn-grid{ grid-template-columns:minmax(0,1fr) }
  .herolist{ grid-template-columns:repeat(auto-fill,minmax(0,1fr)) }
  .grid{ grid-template-columns:repeat(auto-fit,minmax(0,1fr)) }
  .dyn-mat{ grid-template-columns:repeat(auto-fill,minmax(104px,1fr)) }
  .facstock{ grid-template-columns:repeat(auto-fill,minmax(96px,1fr)) }

  /* 卡片内边距收紧，信息密度协调 */
  .card{ padding:12px }
  .faccard{ padding:12px }
  .fackv .frow{ grid-template-columns:74px 1fr; gap:6px }

  /* 控制条/按钮组：换行不溢出 */
  .np-controls{ flex-wrap:wrap; gap:8px }
  .np-controls .inp{ min-width:0; max-width:100% }

  /* 实时日志：控件纵向排、高度自适应 */
  .live-ctl{ flex-direction:column; align-items:stretch; gap:8px }
  .live-btns{ justify-content:flex-start }
  .live-title{ font-size:var(--fs-13) }
  .live-box{ height:calc(100vh - 330px); min-height:260px; font-size:var(--fs-11); padding:10px 12px }

  /* 柱状图：窄屏更紧凑 */
  .barchart{ padding:12px; gap:7px }
  .bc-label{ width:52px; font-size:var(--fs-11) }
  .bc-val{ min-width:44px; font-size:var(--fs-11) }

  /* 弹窗：手机全宽、可滚动 */
  .modal .box{ width:calc(100vw - 20px); max-width:none; max-height:86vh }
  .modal .box.screen{ width:calc(100vw - 20px); height:86vh }

  /* 表格/长内容：横向可滚动，不撑破页面。
     ★ table 默认 display:table，overflow-x 对它不生效 → 宽表会撑破布局。
       窄屏下把 table 变成块级滚动容器，内容保留固有宽度即可横向滑动。 */
  .catlog, table, .facgrid, .facbox, .questbox, .logbox{ overflow-x:auto }
  table.tbl, table.fm-tbl{ display:block !important; max-width:100% !important }
  .dyn-tabs, .srv-tabs{ flex-wrap:nowrap; overflow-x:auto }

  /* 概览账号卡片头部紧凑 */
  .acard-head{ gap:8px }
  .acard-actions{ flex-wrap:wrap; gap:6px }
}
/* Theme picker */
.theme-ov{position:fixed;inset:0;z-index:9999;background:rgba(15,23,42,.45);display:flex;align-items:flex-start;justify-content:center;padding-top:70px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.theme-pop{background:var(--surface-1);border:1px solid var(--surface-border);border-radius:14px;box-shadow:var(--surface-shadow);padding:16px;min-width:260px;max-width:340px}
.theme-pop-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.theme-pop-h strong{font-size:var(--fs-14)}
.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.theme-swat{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border:1px solid var(--surface-border);border-radius:10px;background:var(--surface-2);transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.theme-swat:hover{transform:translateY(-1px)}
.theme-swat.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--panel-glow)}
.theme-swat .dot{width:22px;height:22px;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.theme-swat .nm{font-size:var(--fs-12);color:var(--ink)}

/* Shop panel */
.shop-sel{max-width:220px}
.shop-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.shop-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--surface-2);border:1px solid var(--surface-border);border-radius:10px}
.shop-id{font-family:var(--mono);font-size:var(--fs-12);color:var(--muted);min-width:46px}
.shop-item{flex:1;min-width:0}
.shop-what{font-weight:600;font-size:var(--fs-14);color:var(--ink)}
.shop-meta{font-size:var(--fs-12);color:var(--muted);margin-top:2px}
.shop-ops{display:flex;align-items:center;gap:6px;flex:none}
.shop-num{width:54px;text-align:center}
.shop-buy{flex:none}

/* ── 自动新建：可选项目勾选 ── */
.target-picker{margin-top:6px}
.tg-group{border:1px solid var(--line,#e3e8e4);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.tg-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tg-head strong{flex:1;font-size:13px}
.tg-items{display:flex;flex-wrap:wrap;gap:8px}
.tg-it{display:inline-flex;align-items:center;gap:6px;border:1px solid #d4dad5;border-radius:8px;padding:4px 10px;font-size:13px;cursor:pointer;user-select:none}
.tg-it.on{border-color:#2e9e5b;background:#e8f6ee}
.tg-lv{color:#99a29b;font-size:11px}
.tg-bar{display:flex;align-items:center;gap:10px;margin-top:4px;flex-wrap:wrap}
.tbtn.mini{padding:2px 10px;font-size:12px}

/* ── 主线等 NEW 面板：当前任务 + 卡住原因 ── */
.np-now{border:1px solid var(--line,#e3e8e4);border-radius:10px;padding:10px 12px;margin-bottom:8px;background:#f8faf8}
.np-now-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.np-id{font-weight:700;color:#2e9e5b}
.np-prog{color:#8a938c;font-size:12px}
.np-stuck{border:1px solid #f0c36d;border-radius:10px;padding:10px 12px;margin-bottom:8px;background:#fff8e8}
.np-stuck-why{font-weight:600;color:#9a6b00;font-size:13px}
.np-tips{margin-top:6px}
.np-tips .tip{font-size:12px;color:#7a6a3a;margin-top:2px}

/* ── 阵容面板：现阵 / 期望 / 候选 ── */
.np-fm{border:1px solid var(--line,#e3e8e4);border-radius:10px;padding:10px 12px;margin-bottom:8px;background:#f8faf8}
.fm-tbl{width:100%;border-collapse:collapse;font-size:13px}
.fm-tbl th,.fm-tbl td{border-bottom:1px solid #e8ece9;padding:4px 6px;text-align:left}
.fm-tbl th{color:#8a938c;font-weight:600;font-size:12px}
.fm-planned{font-size:14px;font-weight:600;color:#2e9e5b}

/* ═════════════════════════════════════════════════════════════════
   📱 移动端深度适配（手机 / 小平板）
   目标：不横向溢出、不被刘海/底部条遮挡、输入聚焦不自动放大、
        顶栏操作单手可达、弹窗与二维码完整可见、触控目标足够大。
   ═════════════════════════════════════════════════════════════════ */

/* 全局：移动端基础手感（所有屏幕都适用，且不影响桌面） */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100% }
body{
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
button,.tbtn,.nav-it,.mtab,.auth-tab,.acct-it,.srv-tab,.logtab,.tg-it,.acct-pick{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
/* 长 ID / 等宽串在窄屏允许断行，避免撑破卡片 */
.mono{ overflow-wrap:anywhere; word-break:break-all }
img,video{ max-width:100% }

/* ── ≤820px：平板竖屏 / 大手机，抽屉式侧栏 + 安全区 ── */
@media (max-width:820px){
  #app{ height:100vh; height:100dvh }
  /* 刘海屏安全区：侧栏顶/底 */
  .rail{
    width:286px;
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .rail .brand{ padding-top:calc(var(--sp-5) + env(safe-area-inset-top,0px)) }
  /* 主内容顶/底安全区（账号顶栏现在是最顶部元素，刘海 padding 归它） */
  .acct-bar{ padding-top:calc(10px + env(safe-area-inset-top,0px)) }
  .view{ padding-bottom:calc(var(--sp-4) + env(safe-area-inset-bottom,0px)) }
  /* 实时日志用动态视口高度，工具条收起时不被地址栏挡住 */
  .live-box{ height:calc(100dvh - 300px) }
  /* 抽屉遮罩不穿透底层滚动 */
  .rail-backdrop{ overscroll-behavior:contain }
}

/* ── ≤560px：手机竖屏 ── */
@media (max-width:560px){
  /* 顶栏重排：第一行 [☰ 序号 标题]，第二行操作按钮横向滑动条
     （顶部安全区已由 .acct-bar 承担，这里不再重复加） */
  .masthead{
    grid-template-columns:auto auto 1fr;
    grid-template-areas:"menu no title" "tools tools tools";
    align-items:center;
    gap:8px 10px;
    padding:10px 12px 8px;
  }
  .masthead #btnMenu{ grid-area:menu }
  .masthead .no{ grid-area:no; font-size:var(--fs-22); line-height:1 }
  .masthead .titles{ grid-area:title; min-width:0 }
  .masthead .kicker{ display:none }
  .masthead h1{ font-size:var(--fs-16); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .masthead .lede{ display:none }

  /* 操作按钮：单行横向滑动（不换行占去大半屏），关键操作排最前始终可见 */
  .masthead .tools{
    grid-area:tools;
    flex-wrap:nowrap; justify-content:flex-start;
    gap:6px; overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin:2px -12px 0; padding:2px 12px 4px;
  }
  .masthead .tools::-webkit-scrollbar{ display:none }
  .masthead .tools .tbtn{ flex:none; min-height:34px; padding:6px 12px }
  .masthead .tools #btnAdd{ order:-5 }
  .masthead .tools #btnStart{ order:-4 }
  .masthead .tools #btnStop{ order:-3 }
  .masthead .tools #btnRefresh{ order:-2 }
  .masthead .tools #btnCfg{ order:-1 }
  /* 手机上收起用户胶囊（谁登录在侧栏底部可见），登出仍在滑动条末尾 */
  .masthead .tools .uchip{ display:none }

  /* 账号顶栏：手机上收紧（刘海安全区保留） */
  .acct-bar{ padding:8px 12px; padding-top:calc(8px + env(safe-area-inset-top,0px)) }
  .acct-bar .acct-pick{ padding:8px 12px; border-radius:10px }
  .acct-bar .acct-list{ max-height:min(300px,52vh) }

  /* 面板二级 tab 条：手机上收紧，横向滑动 */
  .subtabs{ padding:6px 12px }
  .subtab{ padding:5px 11px }

  /* ★ 配置弹窗表单：手机上两列改单列（label 在上、控件在下）。
     之前是 1fr auto 两列，右侧 input 带 size 属性的固有宽度（~280px），
     一行放不下就横向溢出，把左侧 label 切掉半拉 —— 截图里的「工厂」tab 错乱就是这么来的 */
  .fieldrow{ grid-template-columns:1fr; gap:8px; align-items:start }
  .fieldrow .ctl{ width:100%; min-width:0 }
  .fieldrow .ctl .inp,
  .fieldrow .ctl input[size]{ flex:1 1 auto; width:100%; min-width:0 }
  .fieldrow .ctl .pair-rg{ width:100% }

  /* 手机上藏掉弹窗/tab 条的滚动条（触屏滑动不需要，蓝条很丑） */
  .mtabs::-webkit-scrollbar,.modal-bd::-webkit-scrollbar,.cfg-tabs::-webkit-scrollbar{ display:none }
  .mtabs,.modal-bd,.cfg-tabs{ scrollbar-width:none }

  /* 内容区 */
  .view{ padding:12px 10px calc(14px + env(safe-area-inset-bottom,0px)) }
  .view-inner{ max-width:100% }

  /* 表单类输入框在手机上用 16px，避免 iOS 聚焦时整页自动放大 */
  .modal-bd .inp, .modal-bd input, .modal-bd select, .modal-bd textarea,
  .auth-form .inp, .np-controls .inp, .shop-row .inp, .live-btns .inp,
  .acard input.inp, .cfgbox input.inp, .cfgbox select, .cfgbox textarea{
    font-size:16px;
  }
  /* 表格里密集的小数字格保持紧凑（极少在手机上聚焦） */
  table .inp, .fm-tbl .inp{ font-size:var(--fs-12) }

  /* 弹窗：贴边满宽 + 安全区，内部滚动 */
  .modal{ padding:0; align-items:flex-end; overflow:hidden }
  .modal .box,
  .modal .box.wide,
  .modal .box.screen{
    width:100%; max-width:none;
    max-height:calc(100dvh - env(safe-area-inset-top,0px) - 8px);
    height:auto;
    border-radius:16px 16px 0 0;
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .modal .box.screen{ height:calc(100dvh - env(safe-area-inset-top,0px) - 8px) }
  .modal-hd{ padding:14px 16px 10px; position:sticky; top:0; z-index:2 }
  .modal-bd{ padding:14px 16px }
  .modal-ft{ padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)) }

  /* 添加账号：二维码框不超屏 */
  .qrbox{ padding:14px 0; gap:12px }
  .qrbox .frame{ width:min(248px,72vw); height:min(248px,72vw) }
  .mtabs{ margin:-14px -16px 14px; padding:0 16px }

  /* 登录 / 注册页：单列、留白收紧、安全区 */
  .auth{ padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px)); align-items:flex-start }
  .auth-inner{ gap:18px; padding-bottom:24px }
  .auth-brand .n{ font-size:40px }
  .auth-brand .tag{ margin-top:10px }
  .auth-brand .rule{ margin:14px 0 }
  .auth-brand .foot{ font-size:var(--fs-10) }
  .auth-form{ padding:20px 18px; border-radius:16px }
  .auth-form .btn{ min-height:46px }

  /* 账号卡片操作：按钮可换行、触控高度足够 */
  .acard-actions .tbtn, .acard-actions button{ min-height:34px }
  .np-summary{ font-size:var(--fs-12); line-height:1.6 }

  /* 实时日志：更小字号、控件纵向 */
  .live-box{ height:calc(100dvh - 330px); min-height:240px }
}

/* ── 超窄屏（≤360px，老款 iPhone SE / 小安卓）：再收一档 ── */
@media (max-width:360px){
  .masthead h1{ font-size:var(--fs-14) }
  .view{ padding-left:8px; padding-right:8px }
  .brief{ grid-template-columns:1fr 1fr }
  .tbtn{ padding:6px 9px }
  .qrbox .frame{ width:min(220px,68vw); height:min(220px,68vw) }
}
/* 「立即执行」结果弹窗：摘要 + 列表 */
.res-summary{ font-size:16px; font-weight:600; padding:10px 12px; margin-bottom:8px; background:var(--bg-2); border-radius:8px; line-height:1.5 }
.np-list{ margin:4px 0 8px; padding-left:20px }
.np-list li{ margin:3px 0; line-height:1.5 }
.np-list li.np-err{ color:#e0555a }
.np-details{ margin-top:8px }
.np-details summary{ cursor:pointer; opacity:.6; font-size:12px; user-select:none }
.np-details pre{ margin-top:6px }