/* ==========================================================================
   console.css — workbuddyApi 控制台专用样式
   依赖：tokens.css / base.css / components.css
   约束：仍走 token，不硬编码可见色值
   ========================================================================== */

/* ---------- 状态语义色 ----------
   设计说明：shadcn Neutral 主题的红线是「除危险色外零色相」。
   本页要在监控场景区分五档，因此在灰阶体系内做了映射：
     良好 → primary（深灰实心）
     一般 → 琥珀（关注线内但有轻微劣化）
     较差 → muted-foreground（灰调）
     极差 → destructive（红，本身就是"危险"语义）
     不可达 → destructive（红；与极差同为红，靠文字区分）
   如果你更习惯红/黄/绿信号灯，只需覆盖下面这一行即可启用琥珀色：
     --status-poor: #D97706;
   ------------------------------------------------------------------ */
:root {
  --status-good: var(--primary);
  --status-fair: #A16207;
  --status-poor: var(--muted-foreground);
  --status-terrible: var(--destructive);
  --status-offline: var(--destructive);
}
.dark {
  --status-good: var(--primary);
  --status-fair: var(--chart-3);
  --status-poor: var(--muted-foreground);
  --status-terrible: var(--destructive);
  --status-offline: var(--destructive);
}

/* ---------- 状态点 ---------- */

.dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 999px;
  background: var(--status-poor);
  display: inline-block;
}
.dot[data-state="good"] { background: var(--status-good); }
.dot[data-state="fair"] { background: var(--status-fair); }
.dot[data-state="poor"] { background: var(--status-poor); }
.dot[data-state="terrible"] { background: var(--status-terrible); }
.dot[data-state="unreachable"] { background: var(--status-offline); }
.dot[data-state="unknown"] { background: var(--border); }

/* 探测中的呼吸动画 */
.dot[data-pulsing="true"] { animation: dot-pulse 1.4s var(--ease) infinite; }
@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* ---------- 状态判定大卡 ---------- */

.verdict {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 32px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.verdict::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--status-poor);
}
.verdict[data-state="good"]::before { background: var(--status-good); }
.verdict[data-state="fair"]::before { background: var(--status-fair); }
.verdict[data-state="poor"]::before { background: var(--status-poor); }
.verdict[data-state="terrible"]::before { background: var(--status-terrible); }
.verdict[data-state="unreachable"]::before { background: var(--status-offline); }
.verdict[data-state="unknown"]::before { background: var(--border); }

@media (max-width: 860px) {
  .verdict { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; }
}

.verdict-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted-foreground);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.verdict-state {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 8px;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.verdict[data-state="good"] .verdict-state { color: var(--foreground); }
.verdict[data-state="fair"] .verdict-state { color: var(--foreground); }
.verdict[data-state="poor"] .verdict-state { color: var(--foreground); }
.verdict[data-state="terrible"] .verdict-state { color: var(--status-terrible); }
.verdict[data-state="unreachable"] .verdict-state { color: var(--status-offline); }
.verdict[data-state="unknown"] .verdict-state { color: var(--muted-foreground); }
.verdict-state .dot { width: 14px; height: 14px; }
.verdict-desc { font-size: 13.5px; color: var(--muted-foreground); line-height: 1.6; max-width: 42ch; white-space: pre-line; }

.verdict-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.verdict-metric {
  background: var(--card);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.verdict-metric-label { font-size: 12px; color: var(--muted-foreground); }
.verdict-metric-value {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.verdict-metric-value small { font-size: 12px; font-weight: 400; color: var(--muted-foreground); margin-left: 2px; }

/* ---------- 探测延迟条 ---------- */

.probe-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 56px;
  padding: 6px 0;
}
.probe-bar {
  flex: 1 1 0;
  min-width: 3px;
  border-radius: 3px 3px 2px 2px;
  background: var(--status-good);
  opacity: 0.75;
  transition: height 200ms var(--ease), background-color 200ms var(--ease);
  align-self: flex-end;
}
.probe-bar[data-kind="degraded"] { background: var(--status-poor); opacity: 0.6; }
.probe-bar[data-kind="lost"] { background: var(--status-offline); opacity: 0.35; height: 4px !important; }

/* ---------- 连接配置弹窗 ---------- */

.config-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

/* ---------- 键值列表 ---------- */

.kv { display: flex; flex-direction: column; gap: 0; }
.kv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.kv-row:last-child { border-bottom: none; }
.kv-key { color: var(--muted-foreground); font-size: 12.5px; }
.kv-val { font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- 进度条 ---------- */

.progress {
  height: 6px;
  border-radius: 999px;
  background: var(--muted);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
  transition: width 300ms var(--ease);
}

/* ---------- 积分总额卡 ---------- */

.credits-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  padding: 28px 32px;
}
.credits-total {
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.credits-total-unit { font-size: 14px; font-weight: 400; color: var(--muted-foreground); margin-left: 8px; letter-spacing: 0; }
.credits-sub { font-size: 12.5px; color: var(--muted-foreground); margin-top: 10px; }

/* ---------- 加载骨架 ---------- */

.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg,
    var(--muted) 25%,
    color-mix(in srgb, var(--muted) 55%, var(--card)) 37%,
    var(--muted) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}
@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---------- 区块头（带操作） ---------- */

.block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.block-head h3 { font-size: 16px; }
.block-sub { font-size: 12.5px; color: var(--muted-foreground); margin-top: 3px; }

/* ---------- 空/错误态内联 ---------- */

.inline-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.inline-note[data-tone="error"] {
  border-color: color-mix(in srgb, var(--destructive) 35%, transparent);
  background: color-mix(in srgb, var(--destructive) 6%, transparent);
  color: var(--foreground);
}
.inline-note[data-tone="error"] strong { color: var(--destructive); }

/* ---------- 账号表格里的次要信息 ---------- */

.cell-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--muted-foreground);
}