/* ═══════════ FLAT DARK · 扁平深灰 ═══════════ */
:root{
  --bg:#eef3fa;          /* 页面底色（渐变层盖在上面） */
  --surface:rgba(255,255,255,.94);
  --surface-2:rgba(15,23,42,.045);  /* 悬浮/次级 */
  --line:rgba(15,23,42,.12);
  --line-2:rgba(15,23,42,.08);
  --ink:#0f172a;
  --ink-2:#475467;
  --ink-3:#94a3b8;
  --accent:#0d9488;
  --accent-d:#0f766e;
  --accent-l:rgba(13,148,136,.10);
  --warn:#b45309;
  --err:#dc2626;
  --font-body:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,"PingFang SC","Microsoft YaHei",monospace;
  --font-num:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,"PingFang SC",monospace;
  --font-mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  color:var(--ink);
  font:14px/1.5 var(--font-body);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  background:#f4f7fb;
}
/* ── 动态渐变：只放在右下角 ── */
.glow{
  position:fixed;right:-8vmax;bottom:-10vmax;width:34vmax;height:34vmax;z-index:0;
  border-radius:50%;pointer-events:none;filter:blur(38px);opacity:.62;
  background:radial-gradient(circle at 38% 34%,
    #7dd3fc 0%, #a5b4fc 24%, #f0abfc 46%, #fbcfe8 62%, #fde68a 74%, transparent 84%);
  animation:glowmove 20s ease-in-out infinite alternate;
}
@keyframes glowmove{
  0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  100%{transform:translate3d(-2vmax,-2vmax,0) scale(1.1) rotate(12deg)}
}
  100%{transform:translate3d(-4vmax,-4vmax,0) scale(1.14) rotate(16deg)}
}
.shell{position:relative;z-index:1}
.shell{height:100vh;display:flex;flex-direction:column;overflow:hidden}

/* ── 顶栏：默认隐藏 ── */
#topzone{position:fixed;top:0;left:0;right:0;height:6px;z-index:59}
.top{
  position:fixed;top:0;left:9px;right:9px;z-index:60;height:48px;
  border-radius:0;border-top:0;
  display:flex;align-items:center;gap:12px;padding:0 11px;
  background:rgba(255,255,255,.86);border:1px solid var(--line);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  transform:translateY(-100%);opacity:0;
  transition:transform .24s cubic-bezier(.22,.8,.28,1),opacity .24s;
}
.top.on{transform:translateY(0);opacity:1}
.brand{display:flex;align-items:center;gap:10px}

.brand b{font-size:15px;font-weight:600;color:var(--ink);font-family:var(--font-num);letter-spacing:-.01em}
.brand svg{flex:none;display:block;overflow:visible}
.brand i{font-style:normal;color:var(--ink-3);font-size:10px;margin-left:7px;letter-spacing:.14em}
.sp{flex:1}
.pill{
  display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 7px;border-radius:4px;
  background:var(--accent-l);color:#0f766e;font-size:12px;font-weight:500;
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.btn{
  height:28px;padding:0 9px;border-radius:4px;cursor:pointer;font-size:12.5px;font-weight:500;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);transition:.14s;
}
.btn:hover{background:rgba(15,23,42,.07);border-color:rgba(15,23,42,.18);color:var(--ink)}
.btn:active{transform:translateY(.5px)}

/* ── 栅格 ── */
.main{
  flex:1;min-height:0;display:grid;grid-template-columns:minmax(296px,20.8%) minmax(0,1fr);
  gap:9px;padding:9px;overflow:hidden;
}
@media(max-width:1180px){.main{grid-template-columns:1fr}}
.col{min-height:0;display:flex;flex-direction:column;gap:12px;overflow:hidden}

/* ── 卡片 ── */
.panel{
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  backdrop-filter:blur(30px) saturate(170%);-webkit-backdrop-filter:blur(30px) saturate(170%);
}
.panel.half{flex:1 1 0;min-height:0}
.panel.full{flex:1 1 auto}
.p-head{
  display:flex;align-items:center;gap:5px;height:41px;padding:0 11px;flex:none;
  border-bottom:1px solid var(--line-2);
}
.p-head h2{font-size:13.5px;font-weight:600;color:var(--ink);font-family:var(--font-num);letter-spacing:.01em}
/* Z13-TOPBAR-AGENT：已连接状态无背景、最右对齐 */
.pill#statPill{
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 2px !important;
  margin-left:auto !important;   /* 推到最右 */
  color:#64748b !important;
}
.pill#statPill .dot{background:#22c55e !important}
/* Z13-TOPBAR-CENTER：三个图标在顶栏水平居中 */
.top-actions{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:14px;
}
/* Z13-ICON-UNIFORM：三个图标统一 20px 深色 */
.btn-icon img, .btn-agent img{ width:24px !important; height:24px !important; opacity:1 !important; margin:0 auto }   /* Z13-ICON-24 */
/* Z13-ICON-ONLY：三个按钮全部纯图标，无文字无边框无背景 */
.btn-icon, .btn-agent{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  padding:0 5px !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
}
.btn-icon:hover, .btn-agent:hover{ background:none !important; opacity:.75 }
.btn-icon:active, .btn-agent:active{ transform:scale(.94) }
/* Z13-AGENT-PLAIN：纯图标，无边框、无背景色 */
/* Z13-LOGOUT-RED：退出按钮红色 */
.btn-out-red{
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  color:#dc2626 !important;
  border-color:rgba(220,38,38,.28) !important;
}
.btn-out-red:hover{ background:rgba(220,38,38,.06) !important; color:#b91c1c !important }
.btn-agent{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  padding:0 6px !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  color:#64748b !important;
}
.btn-agent:hover{ background:none !important; color:#0f172a !important }
.btn-agent.on{ background:none !important; color:#15803d !important }   /* 选中只变色 */
.p-head h2 span{color:var(--ink-3);font-weight:500;margin-left:7px;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase}
.p-head .sp{flex:1}
.count{font-size:12px;color:var(--ink-3);font-weight:500;font-family:var(--font-num)}
.searchwrap{position:relative;display:inline-flex;align-items:center}
.sicon{position:absolute;left:10px;width:13px;height:13px;color:var(--ink-3);pointer-events:none;transition:color .16s}

.search{
  width:212px;height:30px;padding:0 46px 0 30px;border-radius:7px;
  border:1px solid rgba(15,23,42,.09);
  background:linear-gradient(180deg,rgba(15,23,42,.030),rgba(15,23,42,.010));
  color:var(--ink);outline:none;font-size:12.5px;font-family:var(--font-body);
  letter-spacing:-.01em;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.055);
  transition:width .22s cubic-bezier(.22,.8,.28,1),border-color .18s,box-shadow .18s,background .18s;
}
.search::placeholder{color:var(--ink-3);opacity:.75;transition:opacity .16s}
.search:hover{border-color:rgba(15,23,42,.18)}
.search:focus{
  width:262px;background:#fff;border-color:rgba(13,148,136,.55);
  box-shadow:0 0 0 3px rgba(13,148,136,.10),inset 0 1px 2px rgba(15,23,42,.04);
}
.search:focus::placeholder{opacity:.45}

.sclear{
  position:absolute;right:8px;width:16px;height:16px;border:0;padding:0;border-radius:50%;
  display:none;place-items:center;cursor:pointer;background:rgba(15,23,42,.08);color:var(--ink-2);
  transition:.14s;
}
.sclear svg{width:10px;height:10px}
.sclear:hover{background:rgba(15,23,42,.10);color:var(--ink)}
.searchwrap.has .sclear{display:grid}
.searchwrap.has .skbd,.searchwrap:focus-within .skbd{opacity:0;transform:scale(.9)}
.skbd{
  position:absolute;right:7px;display:inline-flex;align-items:center;justify-content:center;
  height:18px;min-width:26px;padding:0 5px;border-radius:4px;
  font-size:9.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-3);
  background:rgba(15,23,42,.045);border:1px solid rgba(15,23,42,.07);
  pointer-events:none;transition:opacity .16s,transform .16s;
}
.search::placeholder{color:var(--ink-3)}
.search:focus{border-color:var(--accent-d);box-shadow:0 0 0 3px rgba(20,184,166,.14)}

/* ── 四格：纯文字 + 发丝竖线 ── */
.statrow{display:grid;grid-template-columns:1fr 1fr;padding:7px 11px 3px;flex:none;row-gap:3px;column-gap:0}
.st{position:relative;padding:3px 5px 3px 11px;background:none;border:0;border-radius:0}
.st:nth-child(odd){padding-left:0}
.st:nth-child(odd)::before{display:none}
.st::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:var(--line)}
.st .v{font-size:19px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--ink);font-family:var(--font-num)}
/* Z13-STAT-BLACK：统计卡文字与数字统一黑色 */
.st .k{color:#0f172a !important;font-weight:600 !important}
.st .v{color:#0f172a !important}
.st.hi .v{color:#0f172a !important}
/* Z13-STAT-CLICK：点击反馈 + 选中态 */
.st{transition:transform .12s ease, background .18s ease}
.st:active{transform:scale(.96)}
.st:hover{background:rgba(15,23,42,.035);border-radius:8px}
.st.on{background:rgba(34,197,94,.10);border-radius:8px;box-shadow:inset 0 0 0 1px rgba(34,197,94,.35)}
.st.on .v{color:#15803d !important}
.st.on .k{color:#15803d !important}
.st.hi .v{color:var(--accent)}
.st .k{margin-top:4px;font-size:10.5px;color:var(--ink-3);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── HERO ── */
.hero{padding:0 11px 7px;flex:none}
.hero .num{display:flex;align-items:baseline;gap:8px}
.hero .num b{font-size:42px;font-weight:700;line-height:1.02;letter-spacing:-.045em;color:var(--ink);font-family:var(--font-num)}