/* ==================================================================
   Trae Gateway · 监控模块样式 v3
   与 app.css 共用设计令牌：柔和配色、细线、大留白
   ================================================================== */

/* ---------- 指标条 ---------- */
.metric-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--line-2);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  overflow:hidden;
  margin-bottom:var(--s5);
}
.ms-cell{
  background:var(--bg-1);
  padding:12px 13px;
  min-width:0;
  transition:background .18s ease;
}
.ms-cell:hover{background:var(--bg-2)}
.ms-k{
  font-size:9.5px;font-weight:var(--fw-2);
  color:var(--ink-4);letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.35;margin-bottom:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ms-v{
  font-size:19px;font-weight:var(--fw-2);
  color:var(--ink);
  line-height:1.15;letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ms-s{
  margin-top:4px;
  font-size:9.5px;color:var(--ink-4);
  line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ms-cell.gold .ms-v{color:var(--gold-1)}
.ms-cell.ok .ms-v{color:var(--ok)}
.ms-cell.err .ms-v{color:var(--err)}
.ms-cell.violet .ms-v{color:var(--violet-1)}

/* ---------- LIVE 标记 ---------- */
.live-dot{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 8px;border-radius:999px;
  font-size:9.5px;font-weight:var(--fw-3);
  letter-spacing:.1em;
  color:var(--ok);
  background:var(--ok-a);
  border:1px solid rgba(127,169,139,.22);
  white-space:nowrap;line-height:1.5;
}
.live-dot i{
  width:4px;height:4px;border-radius:50%;
  background:var(--ok);
  animation:liveBlink 2.6s ease-in-out infinite;
}
@keyframes liveBlink{
  0%,100%{opacity:1}
  55%{opacity:.32}
}

/* ---------- 分段控件 ---------- */
.seg{
  display:inline-flex;
  border:1px solid var(--line);
  border-radius:var(--r-xs);
  overflow:hidden;
  background:var(--bg-inset);
  flex:0 0 auto;
}
.seg button{
  font-family:inherit;
  font-size:10.5px;font-weight:var(--fw-2);
  letter-spacing:.03em;
  padding:4.5px 9px;
  border:0;background:transparent;
  color:var(--ink-4);
  cursor:pointer;
  line-height:1.4;
  transition:background .15s ease,color .15s ease;
  white-space:nowrap;
}
.seg button:hover{color:var(--ink-2);background:rgba(255,255,255,.032)}
.seg button.on{background:var(--gold-a);color:var(--gold-1)}
.seg button + button{border-left:1px solid var(--line-2)}

/* ---------- 图表容器 ---------- */
.chart-wrap{
  position:relative;
  padding:var(--s2) 0 0;
}
svg#chart,svg#tokChart,svg.chart{
  display:block;width:100%;
  overflow:visible;
}

/* 网格线 */
.grid-line{
  stroke:#2b2b29;stroke-width:1;
  shape-rendering:crispEdges;
}
/* 坐标文字 */
.axis-txt{
  fill:var(--ink-4);
  font-family:var(--ff-mono);
  font-size:9.5px;
  letter-spacing:.02em;
}

/* 主线 */
.ln-req{
  fill:none;stroke:var(--gold);
  stroke-width:1.6;
  stroke-linejoin:round;stroke-linecap:round;
}
.ln-ok{
  fill:none;stroke:var(--ok);
  stroke-width:1.2;
  stroke-linejoin:round;stroke-linecap:round;
  opacity:.85;
}
.ln-fail{
  fill:none;stroke:var(--err);
  stroke-width:1.2;
  stroke-linejoin:round;stroke-linecap:round;
  opacity:.85;
}
/* 峰值 / 均值参考线 */
.ln-peak{
  stroke:var(--warn);stroke-width:1;
  stroke-dasharray:4 5;opacity:.42;fill:none;
}
.ln-avg{
  stroke:var(--violet);stroke-width:1;
  stroke-dasharray:1.5 4.5;
  stroke-linecap:round;
  opacity:.52;fill:none;
}
/* 面积 */
.area-req{fill:url(#gReq);stroke:none}
/* 最新点 */
.dot-last{
  fill:var(--gold-1);
  stroke:var(--bg-1);
  stroke-width:1.5;
}

/* 悬停热区 */
.hit{fill:transparent;cursor:crosshair}
.hit:hover + .hov,.hov.on{opacity:1}

/* 悬浮提示 */
.chart-tip{
  position:absolute;z-index:8;pointer-events:none;
  padding:7px 10px;
  border-radius:var(--r-xs);
  border:1px solid var(--line-3);
  background:rgba(32,32,31,.97);
  box-shadow:var(--sh-2);
  font-family:var(--ff-mono);font-size:10.5px;
  color:var(--ink-2);line-height:1.66;
  white-space:nowrap;
  opacity:0;transition:opacity .12s ease;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.chart-tip.on{opacity:1}
.chart-tip b{color:var(--ink);font-weight:var(--fw-3)}
.chart-tip .k{color:var(--ink-4)}

/* ---------- 图例 ---------- */
.legend,
.chart-legend{
  display:flex;flex-wrap:wrap;
  gap:var(--s2) var(--s4);
  padding:var(--s3) 0 0;
  font-size:10.5px;
  color:var(--ink-3);
}
.legend span,
.chart-legend span{
  display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;
  line-height:1.5;
}
.lg{
  display:inline-block;
  width:12px;height:2px;border-radius:2px;
  flex:0 0 12px;
  background:var(--ink-4);
}
.lg-req{background:var(--gold);height:2px}
.lg-ok{background:var(--ok)}
.lg-fail{background:var(--err)}
.lg-peak{
  background:repeating-linear-gradient(90deg,var(--warn) 0 3px,transparent 3px 6px);
  height:1.5px;
}
.lg-avg{
  background:repeating-linear-gradient(90deg,var(--violet) 0 1.5px,transparent 1.5px 5px);
  height:1.5px;
}

/* ---------- 小块标题 ---------- */
.sec-title{
  font-size:9.5px;font-weight:var(--fw-2);
  color:var(--ink-4);
  letter-spacing:.07em;
  text-transform:uppercase;
  margin:0 0 var(--s3);
  line-height:1.4;
}

/* ---------- 响应式 ---------- */
@media (max-width:1000px){
  .metric-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:780px){
  .metric-strip{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:var(--s4)}
  .ms-v{font-size:17px}
  .ms-cell{padding:10px 11px}
  .seg button{padding:4px 7px;font-size:10px}
  .legend,.chart-legend{gap:6px var(--s3);font-size:10px}
}

/* ---------- Token 吞吐图 ---------- */
.sec-head{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.sec-sub{font-size:10.5px;color:var(--fg-dim);letter-spacing:.04em}
.tok-legend{display:flex;gap:14px;margin:2px 0 4px;font-size:10.5px;color:var(--fg-dim)}
.tok-legend span{display:inline-flex;align-items:center;gap:5px}
.lg-tin,.lg-tout,.lg-tot{width:9px;height:9px;border-radius:2px;display:inline-block}
.lg-tin{background:#8a8378}
.lg-tout{background:#d8c79b}
.lg-tot{background:linear-gradient(90deg,#b9a173,#e6d9b8,#b9a173)}
svg.chart.sm{height:158px}
@media(max-width:560px){svg.chart.sm{height:140px}}

/* Token 吞吐图：容器贴身、悬停提示对齐 */
.tok-wrap{padding:0}
.tok-wrap .chart-tip{font-size:10px;line-height:1.6}
.tok-legend{gap:12px;margin:0 0 2px}
.tok-legend .lg{width:10px;height:10px;border-radius:2px;flex:0 0 10px}
.empty-txt{fill:var(--fg-dim)}