/**
 * workbench.css — 站点外壳 + K 线工作台样式
 *
 * 延续原 index.html 的暗色主题（GitHub Dark 系），但结构重组为
 * 「顶栏 + 左侧导航 + 视图区」，让 K 线工作台能占满主区域。
 *
 * 注：services/web/styles.css 是历史遗留的死文件（index.html 从未 link 过它，
 * 且它描述的是旧版卡片布局），本工作台不启用它，全部样式集中在本文件。
 */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg-0: #0d1117;
  --bg-1: #161b22;
  --bg-2: #21262d;
  --bd: #30363d;
  --bd-soft: #21262d;
  --fg: #f0f6fc;
  --fg-2: #8b949e;
  --fg-3: #6e7681;
  --accent: #f78166;
  --green: #3fb950;
  --red: #f85149;
  --yellow: #d29922;
  --blue: #58a6ff;
  --purple: #bc8cff;
  --r-sm: 6px;
  --r-md: 10px;
}

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', sans-serif;
  background: var(--bg-0);
  color: var(--fg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

/* ── 顶栏 ─────────────────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--bd);
  flex: 0 0 auto;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--yellow));
  display: grid; place-items: center; font-size: 17px;
}
.brand h1 { font-size: 15px; font-weight: 700; letter-spacing: .2px; }
.brand span { font-size: 11px; color: var(--fg-3); }
.topbar-spacer { flex: 1; }
.topbar-note { font-size: 11px; color: var(--fg-3); }

/* ── 主体骨架 ─────────────────────────────────────────────────────────────── */

.shell { flex: 1; display: grid; grid-template-columns: 168px 1fr; min-height: 0; }

.nav {
  border-right: 1px solid var(--bd);
  background: var(--bg-1);
  padding: 12px 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--fg-2); font-size: 13px; cursor: pointer;
  border: none; background: none; text-align: left; width: 100%;
}
.nav-item:hover { background: var(--bg-2); color: var(--fg); }
.nav-item.active { background: var(--bg-2); color: var(--fg); box-shadow: inset 2px 0 0 var(--accent); }

.content { min-width: 0; min-height: 0; overflow: auto; padding: 14px; display: flex; flex-direction: column; }
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.view[hidden] { display: none; }

/* ── 卡片与表格 ───────────────────────────────────────────────────────────── */

.card {
  background: var(--bg-1); border: 1px solid var(--bd);
  border-radius: var(--r-md); padding: 14px; margin-bottom: 12px;
}
.card-title { font-size: 13px; font-weight: 600; margin-bottom: 10px; color: var(--fg); }

.toolrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }

.btn, .tab-btn {
  background: var(--bg-2); border: 1px solid var(--bd); color: var(--fg-2);
  padding: 5px 11px; border-radius: var(--r-sm); font-size: 12px; cursor: pointer;
}
.btn:hover, .tab-btn:hover { color: var(--fg); border-color: var(--fg-3); }
.tab-btn.active { background: var(--accent); border-color: var(--accent); color: #1b1206; font-weight: 600; }

.input {
  background: var(--bg-0); border: 1px solid var(--bd); color: var(--fg);
  padding: 6px 10px; border-radius: var(--r-sm); font-size: 12px; min-width: 160px;
}
.input:focus { outline: none; border-color: var(--accent); }

.table-wrap { overflow: auto; max-height: calc(100vh - 260px); }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th {
  position: sticky; top: 0; background: var(--bg-2); color: var(--fg-3);
  text-align: left; font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--bd);
  font-size: 11px; letter-spacing: .3px;
}
td { padding: 7px 10px; border-bottom: 1px solid var(--bd-soft); }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--bg-2); }
.r { text-align: right; }
.sym { font-weight: 600; }
.dim { color: var(--fg-3); }
.accent { color: var(--accent); font-weight: 600; }
.up { color: var(--green); }
.down { color: var(--red); }
.raw { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--fg-2); white-space: pre-wrap; max-height: 220px; overflow: auto; }

.badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--bd); color: var(--fg-2); }
.badge.warn { border-color: var(--yellow); color: var(--yellow); }
.token-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

/* ── §23 八种状态的占位块 ─────────────────────────────────────────────────── */

.statebox {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 30px 20px; text-align: center;
  border: 1px dashed var(--bd); border-radius: var(--r-md); color: var(--fg-2);
}
.statebox-icon { font-size: 24px; line-height: 1; }
.statebox-title { font-size: 14px; font-weight: 600; color: var(--fg); }
.statebox-hint { font-size: 12px; color: var(--fg-3); max-width: 420px; }
.statebox-actions { margin-top: 6px; display: flex; gap: 8px; }

/* 每一档状态给不同的视觉语言：
   数据不足（partial，黄色实心边）与服务异常（fault，红色斜纹底）必须一眼分得清 */
.statebox.kind-progress { border-style: solid; border-color: var(--bd-soft); }
.statebox.kind-blank    { border-style: dashed; }
.statebox.kind-partial  { border-style: solid; border-color: var(--yellow); background: rgba(210,153,34,.06); }
.statebox.kind-partial .statebox-title { color: var(--yellow); }
.statebox.kind-fault {
  border-style: solid; border-color: var(--red);
  background: repeating-linear-gradient(45deg, rgba(248,81,73,.07) 0 8px, transparent 8px 16px);
}
.statebox.kind-fault .statebox-title { color: var(--red); }
.statebox.kind-locked   { border-style: solid; border-color: var(--purple); background: rgba(188,140,255,.06); }
.statebox.kind-locked .statebox-title { color: var(--purple); }
.statebox.kind-stale    { border-style: dotted; border-color: var(--blue); background: rgba(88,166,255,.05); }
.statebox.kind-stale .statebox-title { color: var(--blue); }

/* ── K 线工作台 ───────────────────────────────────────────────────────────── */

.cw-root {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--bg-1); border: 1px solid var(--bd); border-radius: var(--r-md); overflow: hidden;
  position: relative;
}

.cw-toolbar { border-bottom: 1px solid var(--bd); padding: 8px 10px; background: var(--bg-1); flex: 0 0 auto; }
.cw-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cw-row:last-child { margin-bottom: 0; }
.cw-group { display: flex; gap: 3px; background: var(--bg-0); padding: 2px; border-radius: var(--r-sm); border: 1px solid var(--bd-soft); }
.cw-symbol { display: flex; gap: 6px; }
.cw-input {
  background: var(--bg-0); border: 1px solid var(--bd); color: var(--fg);
  padding: 4px 9px; border-radius: var(--r-sm); font-size: 12px; width: 120px; font-weight: 600;
}
.cw-chip {
  background: transparent; border: 1px solid transparent; color: var(--fg-2);
  padding: 4px 9px; border-radius: 5px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.cw-chip:hover { color: var(--fg); background: var(--bg-2); }
.cw-chip.active { background: var(--bg-2); color: var(--fg); border-color: var(--bd); font-weight: 600; }
.cw-chip.primary { background: var(--accent); color: #1b1206; font-weight: 600; }
.cw-mini { background: none; border: none; color: var(--fg-3); cursor: pointer; font-size: 11px; padding: 0 4px; }
.cw-mini:hover { color: var(--red); }
.cw-source { margin-left: auto; font-size: 11px; color: var(--fg-3); }

.cw-panel { border-top: 1px solid var(--bd-soft); padding-top: 8px; margin-top: 6px; }
.cw-panel[hidden] { display: none; }
.cw-panel-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.cw-ind {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
  background: var(--bg-0); border: 1px solid var(--bd); border-radius: var(--r-sm); padding: 3px 7px;
}
.cw-ind.bad { border-color: var(--yellow); }
.cw-ind em { font-style: normal; }
.cw-ind em.bad { color: var(--yellow); }
.cw-ind em.muted { color: var(--fg-3); }
.cw-param {
  background: var(--bg-1); border: 1px solid var(--bd-soft); color: var(--fg);
  border-radius: 4px; font-size: 11px; padding: 1px 5px; width: 84px;
}
.muted { color: var(--fg-3); font-size: 11px; }

/* 异常横幅：§45.11 的八种情况各自一条，颜色按 severity 分档 */
.cw-banners { flex: 0 0 auto; }
.cw-banner {
  display: flex; align-items: center; gap: 8px; font-size: 11.5px;
  padding: 5px 12px; border-bottom: 1px solid var(--bd-soft);
}
.cw-banner b { font-weight: 600; }
.cw-banner span { color: var(--fg-2); }
.cw-banner.info  { background: rgba(88,166,255,.10); color: var(--blue); }
.cw-banner.warn  { background: rgba(210,153,34,.10); color: var(--yellow); }
.cw-banner.error { background: rgba(248,81,73,.12); color: var(--red); }

.cw-stage { flex: 1; min-height: 260px; position: relative; cursor: crosshair; }
.cw-stage.dragging { cursor: grabbing; }
.cw-canvas { position: absolute; inset: 0; display: block; }
.cw-canvas-overlay { pointer-events: none; }

.cw-legend {
  position: absolute; left: 10px; top: 6px; display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 11px; color: var(--fg-2); pointer-events: none; max-width: calc(100% - 90px);
}
.cw-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.cw-legend-item i { width: 8px; height: 2px; border-radius: 1px; display: inline-block; }
.cw-legend-item em { font-style: normal; color: var(--fg-3); }
.cw-legend-item.warn { color: var(--yellow); }

.cw-tooltip {
  position: absolute; pointer-events: none; z-index: 5;
  background: rgba(22,27,34,.96); border: 1px solid var(--bd); border-radius: var(--r-sm);
  padding: 7px 9px; font-size: 11px; color: var(--fg-2); min-width: 150px;
}
.cw-tooltip .t { color: var(--fg); font-weight: 600; margin-bottom: 3px; }
.cw-tooltip .bad { color: var(--yellow); margin-top: 3px; }
.cw-tooltip[hidden] { display: none; }

.cw-state {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  background: rgba(13,17,23,.94); text-align: center; padding: 20px;
}
.cw-state[hidden] { display: none; }
.cw-state-icon { font-size: 26px; }
.cw-state-title { font-size: 15px; font-weight: 600; }
.cw-state-hint { font-size: 12px; color: var(--fg-3); max-width: 460px; }
.cw-state-actions { margin-top: 8px; display: flex; gap: 8px; }
.cw-state.kind-partial .cw-state-title { color: var(--yellow); }
.cw-state.kind-fault   .cw-state-title { color: var(--red); }
.cw-state.kind-locked  .cw-state-title { color: var(--purple); }
.cw-state.kind-stale   .cw-state-title { color: var(--blue); }

.cw-toast {
  position: absolute; right: 14px; bottom: 14px; z-index: 20;
  background: var(--bg-2); border: 1px solid var(--bd); border-radius: var(--r-sm);
  padding: 7px 12px; font-size: 12px; color: var(--fg);
}
.cw-toast.warn { border-color: var(--yellow); color: var(--yellow); }

/* ── 窄屏 ─────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .nav { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--bd); }
  .nav-item { white-space: nowrap; }
  .cw-source { margin-left: 0; }
}