/* ==================================================================
   Trae Gateway · 视觉系统 v3
   取向：暖石灰底 / 低饱和 / 大量留白 / 靠间距与字重分层
   框架：顶部通栏导航（桌面）+ 底部 dock（移动），不再用左侧竖栏
   原则：无发光、无霓虹、无高饱和撞色；所有强调色饱和度压在 40% 以下
   ================================================================== */

/* ---------- 重置 ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

/* ---------- 设计令牌 ---------- */
:root{
  /* 底：暖石灰，逐层提亮，不用纯黑 */
  --bg:#1a1a19;
  --bg-1:#1e1e1d;
  --bg-2:#232322;
  --bg-3:#2a2a28;
  --bg-inset:#161615;

  /* 线：极低对比，只做暗示 */
  --line:#302f2d;
  --line-2:#282826;
  --line-3:#3a3937;

  /* 字：暖白 / 中灰 / 弱灰，全部降亮度 */
  --ink:#ded9d1;
  --ink-2:#a8a29a;
  --ink-3:#7b756d;
  --ink-4:#5d5852;

  /* 主色：柔沙金，压低饱和 */
  --gold:#b9a173;
  --gold-1:#cdb98f;
  --gold-2:#9a845e;
  --gold-a:rgba(185,161,115,.10);
  --gold-b:rgba(185,161,115,.22);

  /* 辅色：雾霭紫，仅用于极少数标记 */
  --violet:#948cb5;
  --violet-1:#a9a1c7;
  --violet-a:rgba(148,140,181,.12);

  /* 语义色：全部降饱和，避免刺眼 */
  --ok:#7fa98b;
  --ok-a:rgba(127,169,139,.12);
  --warn:#c0a273;
  --warn-a:rgba(192,162,115,.12);
  --err:#bb8585;
  --err-a:rgba(187,133,133,.12);

  /* 圆角：统一克制 */
  --r-xs:6px;
  --r-sm:8px;
  --r-md:10px;
  --r-lg:14px;
  --r-xl:18px;

  /* 间距：4 的倍数，节奏统一 */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:22px; --s6:30px; --s7:42px; --s8:58px;

  /* 字号：小阶梯，避免层级混乱 */
  --fs-xs:11px;
  --fs-sm:12px;
  --fs-md:13px;
  --fs-lg:14.5px;
  --fs-xl:17px;
  --fs-2xl:21px;
  --fs-num:27px;

  /* 字重 */
  --fw-1:400; --fw-2:500; --fw-3:600;

  /* 字体 */
  --ff:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
  --ff-mono:"SF Mono",ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;

  /* 阴影：只做层次 */
  --sh-1:0 1px 2px rgba(0,0,0,.24);
  --sh-2:0 8px 28px -10px rgba(0,0,0,.42);
  --sh-3:0 22px 60px -18px rgba(0,0,0,.58);

  /* 布局常量 */
  --nav-h:62px;
  --dock-h:60px;
  --content-max:1120px;
}

/* ---------- 页面底 ---------- */
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ff);
  font-size:var(--fs-md);
  line-height:1.6;
  letter-spacing:.006em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  overflow-x:hidden;
}
/* 一层极淡的顶部渐亮，避免整屏死板 */
body::before{
  content:"";position:fixed;inset:0 0 auto;height:340px;
  pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(185,161,115,.035),transparent 78%);
}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:#33322f;border-radius:10px;
  border:3px solid transparent;background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:#403e3a;background-clip:padding-box}
::selection{background:rgba(185,161,115,.22);color:#f0ece4}

/* ---------- 应用骨架：顶部导航 + 主内容 ---------- */
.app{
  position:relative;z-index:1;
  min-height:100vh;
  display:flex;flex-direction:column;
}

/* ================= 顶部导航 ================= */
.topbar-wrap,
.side{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:var(--s4);
  width:100%;
  padding:0 clamp(14px,3vw,32px);
  height:var(--nav-h);
  border-bottom:1px solid var(--line-2);
  background:rgba(26,26,25,.86);
  backdrop-filter:saturate(1.1) blur(14px);
  -webkit-backdrop-filter:saturate(1.1) blur(14px);
}

/* 品牌 */
.brand{
  display:flex;align-items:center;gap:10px;
  flex:0 0 auto;padding:0;
}
.brand-mark{
  width:28px;height:28px;flex:0 0 28px;
  display:grid;place-items:center;
  border-radius:8px;
  border:1px solid var(--gold-b);
  background:linear-gradient(155deg,rgba(185,161,115,.15),rgba(185,161,115,.02));
}
.brand-mark svg{
  width:15px;height:15px;
  stroke:var(--gold-1);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.brand-txt{min-width:0}
.brand-txt strong{
  display:block;font-size:var(--fs-md);font-weight:var(--fw-3);
  color:var(--ink);letter-spacing:.012em;line-height:1.25;
  white-space:nowrap;
}
.brand-txt span{
  display:block;font-size:9px;letter-spacing:.17em;
  color:var(--ink-4);text-transform:uppercase;line-height:1.35;
  white-space:nowrap;
}

/* 导航条 */
.nav{
  display:flex;align-items:center;gap:2px;
  flex:1 1 auto;min-width:0;
  padding:0 var(--s2);
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
}
.nav::-webkit-scrollbar{display:none}

.nav-item{
  display:flex;align-items:center;gap:7px;
  flex:0 0 auto;
  padding:7px 13px;border-radius:var(--r-sm);
  font-size:var(--fs-md);font-weight:var(--fw-1);
  color:var(--ink-3);
  cursor:pointer;user-select:none;
  white-space:nowrap;
  border:1px solid transparent;
  transition:color .16s ease,background .16s ease,border-color .16s ease;
}
.nav-item svg{
  width:15px;height:15px;flex:0 0 15px;
  stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  opacity:.8;
}
.nav-item .tx{line-height:1}
.nav-item:hover{color:var(--ink-2);background:rgba(255,255,255,.028)}
.nav-item.active{
  color:var(--gold-1);
  background:var(--gold-a);
  border-color:var(--gold-b);
  font-weight:var(--fw-2);
}
.nav-item.active svg{opacity:1}

/* 导航上的数字角标 */
.nav-item .dot{
  display:inline-grid;place-items:center;
  min-width:17px;height:17px;padding:0 5px;
  border-radius:999px;
  font-size:10px;font-weight:var(--fw-3);
  font-variant-numeric:tabular-nums;
  color:var(--gold-1);
  background:rgba(185,161,115,.14);
  border:1px solid var(--gold-b);
  line-height:1;
}

/* 侧栏底部信息条（旧结构兼容：桌面下并入顶栏右侧） */
.side-foot{
  display:flex;align-items:center;gap:var(--s2);
  flex:0 0 auto;
  padding-left:var(--s4);
  border-left:1px solid var(--line-2);
}
.side-foot .row{display:flex;align-items:center;gap:var(--s2)}
.side-foot .mono{
  font-family:var(--ff-mono);font-size:10.5px;
  color:var(--ink-4);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* ================= 主区 ================= */
.main{
  flex:1 1 auto;
  display:flex;flex-direction:column;
  min-width:0;
  width:100%;
  padding-bottom:var(--s8);
}

/* 页头 */
.topbar{
  display:flex;align-items:flex-end;gap:var(--s3);
  width:100%;max-width:var(--content-max);
  margin:0 auto;
  padding:var(--s6) clamp(16px,3vw,32px) var(--s4);
}
.topbar h1{
  margin:0;
  font-size:var(--fs-2xl);font-weight:var(--fw-2);
  letter-spacing:-.012em;line-height:1.25;
  color:var(--ink);
}
.topbar .crumb{
  margin-top:3px;
  font-size:var(--fs-sm);color:var(--ink-3);
  line-height:1.5;letter-spacing:.005em;
}
.topbar .spacer{flex:1 1 auto}

/* 内容区 */
.content{
  width:100%;max-width:var(--content-max);
  margin:0 auto;
  padding:0 clamp(16px,3vw,32px);
  display:flex;flex-direction:column;gap:var(--s4);
}

/* 视图切换 */
.view{display:none;flex-direction:column;gap:var(--s4)}
.view.show{display:flex}

/* ================= 状态标记 ================= */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;
  font-size:var(--fs-xs);font-weight:var(--fw-2);
  border:1px solid var(--line);background:var(--bg-2);
  color:var(--ink-3);
  white-space:nowrap;line-height:1.4;
}
.pill .led{
  width:5px;height:5px;border-radius:50%;flex:0 0 5px;
  background:var(--ink-4);
}
.pill.on{
  color:var(--ok);border-color:rgba(127,169,139,.28);
  background:var(--ok-a);
}
.pill.on .led{background:var(--ok)}

.led{
  width:5px;height:5px;border-radius:50%;flex:0 0 5px;
  background:var(--ink-4);
}

.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:2.5px 8px;border-radius:5px;
  font-size:10.5px;font-weight:var(--fw-2);
  letter-spacing:.015em;line-height:1.5;
  border:1px solid transparent;
  white-space:nowrap;
}
.badge .led{width:4px;height:4px;flex:0 0 4px}
.b-ok{color:var(--ok);background:var(--ok-a);border-color:rgba(127,169,139,.24)}
.b-ok .led{background:var(--ok)}
.b-warn{color:var(--warn);background:var(--warn-a);border-color:rgba(192,162,115,.24)}
.b-warn .led{background:var(--warn)}
.b-err{color:var(--err);background:var(--err-a);border-color:rgba(187,133,133,.24)}
.b-err .led{background:var(--err)}
.b-mut{color:var(--ink-3);background:rgba(255,255,255,.03);border-color:var(--line)}

/* 通用小标签 */
.tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 7px;border-radius:5px;
  font-size:10.5px;font-weight:var(--fw-2);
  border:1px solid var(--line);background:var(--bg-2);
  color:var(--ink-3);line-height:1.5;white-space:nowrap;
}
.tag.ok{color:var(--ok);border-color:rgba(127,169,139,.24);background:var(--ok-a)}
.tag.warn{color:var(--warn);border-color:rgba(192,162,115,.24);background:var(--warn-a)}
.tag.err{color:var(--err);border-color:rgba(187,133,133,.24);background:var(--err-a)}
.tag.gold{color:var(--gold-1);border-color:var(--gold-b);background:var(--gold-a)}

/* ================= 卡片 ================= */
.card{
  background:var(--bg-1);
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  overflow:hidden;
  position:relative;
}
/* accent：只是一条更亮的边与极淡底，不要发光 */
.card.accent{
  border-color:var(--line-3);
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1) 42%);
}

.card-h{
  display:flex;align-items:center;gap:var(--s2);
  padding:var(--s4) var(--s5) var(--s3);
  min-height:44px;
}
.card-h h2{
  margin:0;
  font-size:var(--fs-md);font-weight:var(--fw-3);
  color:var(--ink);letter-spacing:.008em;
  line-height:1.4;white-space:nowrap;
}
.card-h .hint-txt{
  flex:1 1 auto;min-width:0;
  font-size:var(--fs-xs);font-weight:var(--fw-1);
  color:var(--ink-4);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.card-h .spacer{flex:1 1 auto}

.card-b{padding:0 var(--s5) var(--s5)}
.card-b.flush{padding:0 0 2px}
.card-b > .field:first-child,
.card-b > .grid-2:first-child{margin-top:0}

.card-b .sec-title{
  font-size:var(--fs-xs);font-weight:var(--fw-2);
  color:var(--ink-3);letter-spacing:.04em;
  text-transform:uppercase;
  margin:0 0 var(--s3);
}

.card-sec{
  padding:var(--s4) var(--s5);
  border-top:1px solid var(--line-2);
}

/* 卡片内分隔 */
.divider{height:1px;background:var(--line-2);margin:var(--s4) 0}

/* ================= KPI 指标条 ================= */
.kpis{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1px;
  background:var(--line-2);
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.kpi{
  background:var(--bg-1);
  padding:var(--s4) var(--s4) var(--s4);
  min-width:0;
  transition:background .18s ease;
}
.kpi:hover{background:var(--bg-2)}
.kpi .lbl{
  font-size:10.5px;font-weight:var(--fw-1);
  color:var(--ink-4);letter-spacing:.05em;
  text-transform:uppercase;
  line-height:1.4;margin-bottom:7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kpi .val{
  font-size:var(--fs-num);font-weight:var(--fw-2);
  color:var(--ink);
  line-height:1.05;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kpi .sub{
  margin-top:6px;
  font-size:var(--fs-xs);color:var(--ink-4);
  line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kpi.good .val{color:var(--ok)}
.kpi.violet .val{color:var(--violet-1)}
.kpi.gold .val{color:var(--gold-1)}

/* ================= 表单 ================= */
.field{margin-bottom:var(--s4)}
.field:last-child{margin-bottom:0}
.field > label,
.field label.lbl{
  display:block;
  font-size:var(--fs-xs);font-weight:var(--fw-2);
  color:var(--ink-3);
  letter-spacing:.03em;
  margin-bottom:7px;
  line-height:1.5;
}

input[type=text],input[type=password],input[type=number],
input[type=search],input:not([type]),textarea,select{
  width:100%;
  font-family:inherit;font-size:var(--fs-md);
  color:var(--ink);
  background:var(--bg-inset);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:9px 12px;
  line-height:1.55;
  outline:none;
  transition:border-color .16s ease,background .16s ease;
  -webkit-appearance:none;appearance:none;
}
input::placeholder,textarea::placeholder{color:var(--ink-4)}
input:hover,textarea:hover,select:hover{border-color:var(--line-3)}
input:focus,textarea:focus,select:focus{
  border-color:var(--gold-2);
  background:#191918;
}
textarea{resize:vertical;min-height:64px;line-height:1.62;font-family:var(--ff-mono);font-size:var(--fs-sm)}
select{
  cursor:pointer;padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237b756d' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
select option{background:var(--bg-2);color:var(--ink)}

input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:20px;background:transparent;
  padding:0;border:0;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:2px;border-radius:2px;background:var(--line-3);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:13px;height:13px;border-radius:50%;
  background:var(--gold-1);
  border:2.5px solid var(--bg-1);
  margin-top:-5.5px;
  box-shadow:0 1px 4px rgba(0,0,0,.45);
  transition:transform .14s ease;
}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}

/* 复选框：整行对齐 */
label.chk{
  display:flex;align-items:flex-start;gap:9px;
  font-size:var(--fs-sm);color:var(--ink-2);
  cursor:pointer;padding:5px 0;
  line-height:1.55;user-select:none;
}
label.chk input[type=checkbox]{
  width:15px;height:15px;flex:0 0 15px;margin:2px 0 0;
  cursor:pointer;
  -webkit-appearance:none;appearance:none;
  border:1px solid var(--line-3);
  border-radius:4px;
  background:var(--bg-inset);
  position:relative;
  transition:background .14s ease,border-color .14s ease;
}
label.chk input[type=checkbox]:checked{
  background:var(--gold);border-color:var(--gold);
}
label.chk input[type=checkbox]:checked::after{
  content:"";position:absolute;left:4.5px;top:1.5px;
  width:4px;height:8px;
  border:solid #1a1508;border-width:0 1.8px 1.8px 0;
  transform:rotate(42deg);
}
label.chk:hover input[type=checkbox]{border-color:var(--gold-2)}
label.chk span{flex:1;min-width:0}

/* 栅格 */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s4)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--s4)}

.hint{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.72}
.mono{font-family:var(--ff-mono);font-variant-numeric:tabular-nums}

/* 刷新率行 */
.rate-row{display:flex;align-items:center;gap:var(--s3)}
.rate-row input[type=range]{flex:1 1 auto;min-width:0}
.rate-badge{
  flex:0 0 auto;min-width:54px;text-align:center;
  font-family:var(--ff-mono);font-size:var(--fs-sm);
  color:var(--gold-1);background:var(--gold-a);
  border:1px solid var(--gold-b);border-radius:var(--r-xs);
  padding:4px 8px;font-variant-numeric:tabular-nums;
}

/* 复制行 */
.copyrow{
  display:flex;align-items:center;gap:var(--s2);
  padding:9px 12px;
  background:var(--bg-inset);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
}
.copyrow .txt{
  flex:1 1 auto;min-width:0;
  font-family:var(--ff-mono);font-size:var(--fs-sm);
  color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ================= 按钮 ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:inherit;font-size:var(--fs-md);font-weight:var(--fw-2);
  padding:8px 16px;
  border-radius:var(--r-sm);
  border:1px solid var(--gold-2);
  background:rgba(185,161,115,.13);
  color:var(--gold-1);
  cursor:pointer;
  line-height:1.45;
  white-space:nowrap;
  text-decoration:none;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .1s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn svg{
  width:14px;height:14px;flex:0 0 14px;
  stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.btn:hover{background:rgba(185,161,115,.19);border-color:var(--gold-1)}
.btn:active{transform:translateY(.5px);background:rgba(185,161,115,.24)}
.btn:disabled,.btn[disabled]{
  opacity:.42;cursor:not-allowed;transform:none;
}

.btn.ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--ink-2);
}
.btn.ghost:hover{
  background:rgba(255,255,255,.035);
  border-color:var(--line-3);
  color:var(--ink);
}
.btn.ghost:active{background:rgba(255,255,255,.05)}

.btn.sm{padding:5.5px 11px;font-size:var(--fs-sm);border-radius:var(--r-xs)}
.btn.sm svg{width:12px;height:12px;flex:0 0 12px}
.btn.block{width:100%}
.btn.danger,
.btn.danger-btn{
  border-color:rgba(187,133,133,.42);
  background:rgba(187,133,133,.10);
  color:var(--err);
}
.btn.danger:hover,
.btn.danger-btn:hover{
  background:rgba(187,133,133,.17);
  border-color:rgba(187,133,133,.6);
}

.btn-icon{
  display:inline-grid;place-items:center;
  width:32px;height:32px;padding:0;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink-3);
  cursor:pointer;
  transition:color .16s ease,background .16s ease,border-color .16s ease;
}
.btn-icon svg{
  width:15px;height:15px;
  stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.btn-icon:hover{color:var(--ink);background:rgba(255,255,255,.04);border-color:var(--line-3)}

.btn-row{
  display:flex;align-items:center;gap:var(--s2);
  flex-wrap:wrap;
}

/* ================= 空态 ================= */
.empty{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:var(--s2);
  padding:var(--s7) var(--s4);
  text-align:center;
}
.empty p{
  margin:0;font-size:var(--fs-sm);color:var(--ink-4);
  line-height:1.6;
}
.empty-mini{
  padding:var(--s5) var(--s3);
  text-align:center;
  font-size:var(--fs-xs);color:var(--ink-4);
}

/* ================= 账号池 ================= */
.acc-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:var(--s3);
  padding:0 var(--s5) var(--s5);
}
.acc{
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  background:var(--bg-2);
  padding:var(--s4);
  transition:border-color .18s ease,background .18s ease;
}
.acc:hover{border-color:var(--line-3);background:var(--bg-3)}
.acc.off{opacity:.52}

.acc-top{
  display:flex;align-items:center;gap:var(--s2);
  margin-bottom:var(--s3);
}
.acc-name{
  flex:1 1 auto;min-width:0;
  font-size:var(--fs-md);font-weight:var(--fw-3);
  color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.acc-metrics{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s2) var(--s4);
  padding:var(--s3) 0;
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
}
.acc-metrics .metric{
  display:flex;flex-direction:column;gap:2px;
  min-width:0;
}
.acc-metrics .metric .k{
  font-size:10px;color:var(--ink-4);
  letter-spacing:.05em;text-transform:uppercase;
  line-height:1.4;
}
.acc-metrics .metric .v{
  font-size:var(--fs-sm);color:var(--ink-2);
  line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.acc-metrics .metric .v.gold{color:var(--gold-1);font-weight:var(--fw-2)}

.acc-err{
  margin-top:var(--s2);
  padding:7px 10px;
  border-radius:var(--r-xs);
  background:var(--err-a);
  border:1px solid rgba(187,133,133,.20);
  font-size:var(--fs-xs);
  color:var(--err);
  line-height:1.55;
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}

.acc-btns{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-top:var(--s3);
}

/* ================= 条形分布 ================= */
.bars{display:flex;flex-direction:column;gap:9px}
.bar-row{
  display:grid;
  grid-template-columns:minmax(64px,34%) auto 1fr;
  align-items:center;
  gap:var(--s2);
  min-width:0;
}
.bar-name{
  font-size:var(--fs-xs);color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  line-height:1.5;
}
.bar-val{
  font-family:var(--ff-mono);font-size:var(--fs-xs);
  color:var(--ink-3);text-align:right;
  font-variant-numeric:tabular-nums;
  min-width:34px;
  line-height:1.5;
}
.bar-track{
  display:block;height:3px;
  border-radius:3px;
  background:var(--line-2);
  overflow:hidden;
  min-width:36px;
}
.bar-fill{
  display:block;height:100%;
  border-radius:3px;
  background:linear-gradient(90deg,var(--gold-2),var(--gold));
  transition:width .34s cubic-bezier(.22,.8,.3,1);
}
.bar-row.ok .bar-fill{background:linear-gradient(90deg,#5f8a6d,var(--ok))}
.bar-row.err .bar-fill{background:linear-gradient(90deg,#96696a,var(--err))}

/* ================= 延迟分位 ================= */
.lat-box{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--line-2);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  overflow:hidden;
}
.lat-cell{
  background:var(--bg-1);
  padding:10px 11px;
  display:flex;flex-direction:column;gap:3px;
  min-width:0;
}
.lat-cell .k{
  font-size:9.5px;font-weight:var(--fw-2);
  color:var(--ink-4);letter-spacing:.07em;
  text-transform:uppercase;line-height:1.3;
}
.lat-cell .v{
  font-family:var(--ff-mono);font-size:var(--fs-md);
  color:var(--ink-2);
  font-variant-numeric:tabular-nums;
  line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lat-cell .v small{font-size:9px;color:var(--ink-4);margin-left:1px}
.lat-cell.hot .v{color:var(--warn)}
.lat-cell.bad .v{color:var(--err)}

/* ================= 最近调用 ================= */
.rec-list{display:flex;flex-direction:column}
.rec{
  display:flex;align-items:center;gap:var(--s3);
  padding:9px 0;
  border-bottom:1px solid var(--line-2);
  min-width:0;
}
.rec:last-child{border-bottom:0}
.rec-led{
  width:5px;height:5px;flex:0 0 5px;border-radius:50%;
  background:var(--ok);
}
.rec-led.err{background:var(--err)}
.rec-main{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:baseline;gap:var(--s2);
  flex-wrap:wrap;
}
.rec-model{
  font-size:var(--fs-sm);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:100%;
}
.rec-acct{
  font-size:10.5px;color:var(--ink-4);
  font-family:var(--ff-mono);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rec-ms{
  font-family:var(--ff-mono);font-size:var(--fs-xs);
  color:var(--ink-3);flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}
.rec-time{
  font-family:var(--ff-mono);font-size:10.5px;
  color:var(--ink-4);flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}

/* ================= Token 明细 ================= */
.tok-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
  gap:1px;
  background:var(--line-2);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  overflow:hidden;
}
.tok-cell{
  background:var(--bg-1);
  padding:11px 12px;
  min-width:0;
}
.tok-cell .k{
  font-size:9.5px;color:var(--ink-4);
  letter-spacing:.05em;text-transform:uppercase;
  line-height:1.35;margin-bottom:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tok-cell .v{
  font-family:var(--ff-mono);font-size:var(--fs-lg);
  font-weight:var(--fw-2);color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tok-cell .s{
  margin-top:3px;font-size:9px;color:var(--ink-4);
  line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ================= 密钥列表 ================= */
.key-list{display:flex;flex-direction:column}
.chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:999px;
  font-size:11px;font-family:var(--ff-mono);
  border:1px solid var(--line);background:var(--bg-2);
  color:var(--ink-3);white-space:nowrap;
}
.chips,.model-chips{display:flex;flex-wrap:wrap;gap:6px}

/* ================= 调试台输出 ================= */
#pOut{
  min-height:180px;max-height:56vh;overflow:auto;
  padding:14px 16px;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:var(--bg-inset);
  font-family:var(--ff-mono);font-size:var(--fs-sm);
  color:var(--ink-2);
  white-space:pre-wrap;word-break:break-word;
  line-height:1.72;
}

/* ================= 日志 ================= */
.log-box,.logBox{
  max-height:60vh;overflow:auto;
  padding:14px 16px;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:var(--bg-inset);
  font-family:var(--ff-mono);font-size:var(--fs-sm);
  line-height:1.75;color:var(--ink-2);
}
.logline{
  display:flex;gap:10px;
  align-items:baseline;
  padding:2.5px 0;
  word-break:break-word;
  border-bottom:1px solid rgba(255,255,255,.018);
}
.logline .t{
  flex:0 0 62px;min-width:62px;
  color:var(--ink-4);
  font-size:11px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
  white-space:nowrap;
}
.logline .m{flex:1 1 auto;min-width:0;color:inherit}
.logline:last-child{border-bottom:0}
.logline.err{color:var(--err)}
.logline.warn{color:var(--warn)}
.logline.ok{color:var(--ok)}

/* ================= 备份 ================= */
.bk-drop{
  padding:var(--s6) var(--s4);
  text-align:center;
  border:1px dashed var(--line-3);
  border-radius:var(--r-md);
  background:var(--bg-inset);
  transition:border-color .18s ease,background .18s ease,color .18s ease;
  font-size:var(--fs-sm);color:var(--ink-4);
  line-height:1.7;
  cursor:pointer;
}
.bk-drop:hover,.bk-drop.over{
  border-color:var(--gold-2);
  background:var(--gold-a);
  color:var(--gold-1);
}
.bk-drop-s{font-size:var(--fs-xs);color:var(--ink-4);margin-top:4px}
.bk-drop-t{font-size:var(--fs-sm);color:var(--ink-2);font-weight:var(--fw-2)}

.bk-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:999px;
  font-size:var(--fs-xs);
  border:1px solid var(--line);background:var(--bg-2);
  color:var(--ink-3);
}
.bk-chip b{
  color:var(--ink);font-weight:var(--fw-3);
  font-variant-numeric:tabular-nums;
}
.bk-tip{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.74;margin:0 0 var(--s3)}
.bk-result{
  padding:11px 14px;border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-family:var(--ff-mono);
  border:1px solid var(--line);background:var(--bg-inset);
  color:var(--ink-2);
  word-break:break-word;line-height:1.7;
}
.bk-summary{
  display:flex;flex-wrap:wrap;gap:7px;
  margin:0 0 var(--s4);
}
.bk-opts{display:flex;flex-direction:column;gap:0;margin:var(--s3) 0}
.bk-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}

/* ================= 登录 ================= */
.login-wrap{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:var(--s4);
  background:
    radial-gradient(680px 340px at 50% -12%,rgba(185,161,115,.06),transparent 70%),
    var(--bg);
}
.login{
  width:100%;max-width:348px;
  padding:var(--s6) var(--s5) var(--s5);
  border-radius:var(--r-xl);
  border:1px solid var(--line-2);
  background:var(--bg-1);
  box-shadow:var(--sh-3);
  text-align:center;
}
.login .mark{
  width:44px;height:44px;margin:0 auto var(--s4);
  display:grid;place-items:center;
  border-radius:12px;
  border:1px solid var(--gold-b);
  background:linear-gradient(155deg,rgba(185,161,115,.16),rgba(185,161,115,.02));
}
.login .mark svg{
  width:21px;height:21px;
  stroke:var(--gold-1);fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.login h2{
  margin:0 0 6px;
  font-size:var(--fs-xl);font-weight:var(--fw-2);
  color:var(--ink);letter-spacing:.008em;
}
.login p{
  margin:0 0 var(--s5);
  font-size:var(--fs-sm);color:var(--ink-3);
  line-height:1.6;
}
.login .field{margin-bottom:var(--s3)}
.login .btn{margin-top:var(--s2)}

/* ================= 表格 ================= */
.tbl{
  width:100%;border-collapse:collapse;
  font-size:var(--fs-sm);
}
.tbl th{
  text-align:left;
  font-size:10px;font-weight:var(--fw-2);
  color:var(--ink-4);letter-spacing:.06em;
  text-transform:uppercase;
  padding:8px 10px;
  border-bottom:1px solid var(--line-2);
  white-space:nowrap;
}
.tbl td{
  padding:9px 10px;
  border-bottom:1px solid var(--line-2);
  color:var(--ink-2);
  vertical-align:middle;
}
.tbl tr:last-child td{border-bottom:0}
.tbl .mono{font-family:var(--ff-mono)}

/* ================= 滚动容器 ================= */
.scroll-x{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}

/* ================= 响应式 ================= */
@media (max-width:1000px){
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tok-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .side-foot .mono{display:none}
}

@media (max-width:780px){
  .topbar-wrap,.side{
    height:auto;min-height:var(--nav-h);
    flex-wrap:wrap;
    gap:var(--s2) var(--s3);
    padding:10px 14px 0;
    align-items:center;
  }
  .brand{padding-bottom:10px}
  .brand-txt span{display:none}
  .side-foot{display:none}
  /* 导航改成等宽网格，7 项排两行，不再横向溢出被切 */
  .nav{
    order:3;width:100%;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:2px;
    padding:0 0 9px;
    overflow:visible;
  }
  .nav-item{
    justify-content:center;
    padding:7px 4px;
    font-size:11.5px;
    gap:5px;
  }
  .nav-item svg{width:14px;height:14px;flex:0 0 14px}
  .nav-item .dot{min-width:15px;height:15px;font-size:9.5px;padding:0 4px}

  .topbar{
    padding:var(--s5) 14px var(--s3);
    align-items:center;
  }
  .topbar h1{font-size:var(--fs-xl)}
  .topbar .crumb{font-size:var(--fs-xs)}
  .content{padding:0 14px;gap:var(--s3)}

  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{padding:var(--s3)}
  .kpi .val{font-size:22px}
  /* 5 项 2 列会剩一格，让第 5 项横跨收尾，不留空洞 */
  .kpi:nth-child(5){grid-column:1 / -1}
  .kpi:nth-child(5) .val{font-size:20px}

  .tok-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lat-box{grid-template-columns:repeat(2,minmax(0,1fr))}
  .acc-list{grid-template-columns:1fr;padding:0 var(--s4) var(--s4)}
  .card-h{
    padding:var(--s3) var(--s4) var(--s2);
    flex-wrap:wrap;row-gap:var(--s2);
  }
  .card-h .hint-txt{flex:1 1 100%;order:9;white-space:normal}
  .card-h h2{flex:0 0 auto}
  .card-h .btn.sm{padding:5px 10px}
  .card-b{padding:0 var(--s4) var(--s4)}
  .card-sec{padding:var(--s3) var(--s4)}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .login{max-width:100%}

  .main{padding-bottom:var(--s7)}
  .topbar .spacer{display:none}
}

@media (max-width:420px){
  .kpis{grid-template-columns:1fr 1fr}
  .kpi .val{font-size:20px}
  .kpi:nth-child(5){grid-column:1 / -1}
  .acc-metrics{grid-template-columns:1fr 1fr;gap:var(--s2) var(--s3)}
  .acc{padding:var(--s3) var(--s4)}
  .acc-btns .btn.sm{flex:1 1 auto;min-width:calc(33% - 4px);padding:6px 8px}
  .nav-item .tx{font-size:11.5px}
}

/* 减少动效偏好 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    transition-duration:.001ms!important;
  }
}

/* ---------- 间距工具类（替代内联 style） ---------- */
.mt-3{margin-top:var(--s3)}
.mt-4{margin-top:var(--s4)}
.mt-5{margin-top:var(--s5)}
.mb-3{margin-bottom:var(--s3)}
.mb-4{margin-bottom:var(--s4)}
.mb-5{margin-bottom:var(--s5)}

/* 双列块在有间距时的对齐 */
.mt-4.grid-2,.mt-5.grid-2{gap:var(--s4)}
.mt-5.grid-2{gap:var(--s5)}

/* 双列内容区（宽屏并排，窄屏堆叠） */
.cols-2{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:var(--s4);
  align-items:start;
}
@media (max-width:1000px){
  .cols-2{grid-template-columns:1fr}
}

/* ================= 全局提示 toast ================= */
#toast{
  position:fixed;left:50%;bottom:34px;
  transform:translate(-50%,14px);
  z-index:9999;pointer-events:none;
  padding:10px 20px;
  border-radius:999px;
  font-size:var(--fs-md);font-weight:var(--fw-2);
  letter-spacing:.01em;
  background:rgba(36,36,34,.97);
  color:var(--ink);
  border:1px solid var(--line-3);
  box-shadow:var(--sh-3);
  opacity:0;
  transition:opacity .22s ease,transform .22s ease;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  max-width:calc(100vw - 40px);
  text-align:center;
  line-height:1.5;
  white-space:pre-wrap;
}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast.ok{border-color:rgba(127,169,139,.36);color:var(--ok)}
#toast.err{border-color:rgba(187,133,133,.36);color:var(--err)}

/* 通用文字色工具类（原框架有，重写时遗漏） */
.mut{color:var(--ink-3)}
.dim{color:var(--ink-3);font-size:var(--fs-xs)}
.ok{color:var(--ok)}
.err{color:var(--err)}
.warn{color:var(--warn)}
.gold{color:var(--gold-1)}
.row{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.spacer{flex:1 1 auto}

/* 必填标记 */
.req{color:var(--err);margin-left:2px;font-weight:var(--fw-3)}
/* 停用态 pill */
.pill.off{color:var(--ink-4);border-color:var(--line-2);background:var(--bg-2)}
.pill.off .led{background:var(--ink-4)}
/* 金色按钮（生成密钥等主行动） */
.btn.gold{
  border-color:var(--gold-2);
  background:rgba(185,161,115,.16);
  color:var(--gold-1);
}
.btn.gold:hover{background:rgba(185,161,115,.24);border-color:var(--gold-1)}
/* 卡片叠放时的呼吸间距 */
.card + .card{margin-top:var(--s4)}
/* key-list 内的键值行 */
.key-list .k{font-size:10px;color:var(--ink-4);letter-spacing:.05em;text-transform:uppercase}
.key-list .txt{font-family:var(--ff-mono);font-size:var(--fs-sm);color:var(--ink-2)}