/* pre_web shared theme — terminal LIGHT, cyan/yellow/blue/magenta only.
   按 pre_ui VISUAL_STYLE_GUIDE.md (ref commit 9116477) 与
   OPENSOURCE_DESIGN_COMPLIANCE.md 同款规范:
   - 扁平 IDE / cli 范式, 不复刻任何特定平台 (尤其 macOS) 的窗口 chrome
   - 严禁 red/green 字面色 (用户红绿色弱)
   - 字体走开源 monospace 链, 不引用任何专有字体名
   - 容器贴边填满, 严禁 max-width + margin:auto 居中范式
*/

:root {
  /* === 中性面 (surface) === */
  --bg:   #ffffff;
  --bg2:  #f5f5f5;
  --bgh:  #ebebeb;
  --bg3:  #dcdcdc;

  --txt:  #333333;
  --txt2: #666666;
  --dim:  #999999;
  --brd:  #d0d0d0;
  --brdl: #e6e6e6;

  /* === Accent (无红无绿) === */
  --cyan:    #00a3a5;
  --yellow:  #a68f00;
  --blue:    #0225c7;
  --magenta: #c930c7;

  /* === 语义别名 (严禁红绿: 全部映射到 cyan/magenta/yellow/blue + 灰) === */
  --ok:   var(--cyan);
  --err:  var(--magenta);
  --warn: var(--yellow);
  --info: var(--blue);

  --sev-info:     var(--blue);
  --sev-warning:  var(--yellow);
  --sev-critical: var(--magenta);

  /* === 开源字体链 (CSS Fonts L4 ui-monospace 关键字 + SIL OFL 字体).
     不引用 Menlo / Monaco / SF Mono / SF Pro / San Francisco / New York /
     Courier New / Courier 等任何专有字体名. */
  --font-mono: ui-monospace,
               'Cascadia Mono', 'Source Code Pro', 'JetBrains Mono',
               'DejaVu Sans Mono', 'Liberation Mono', Consolas, monospace;
}

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

/* CLAUDE.md #8 强制: 顶级结构元素 (header/nav/main/section/aside) 默认
   0 padding/margin, 防 user-agent default 漏出. */
header, nav, main, section, aside, footer { margin: 0; padding: 0; }

body {
  font-family: var(--font-mono);
  background: var(--bg);
  color: var(--txt);
  font-size: 12px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--cyan); text-decoration: underline; }

code, pre {
  font-family: inherit;
  background: var(--bg2);
}
code { padding: 1px 4px; border-radius: 3px; font-size: 0.92em; }
pre {
  padding: 8px 10px;
  margin: 0;
  overflow-x: auto;
  border: 1px solid var(--brdl);
  border-radius: 3px;
  line-height: 1.5;
  font-size: 12px;
  white-space: pre;
}

hr { border: 0; border-top: 1px solid var(--brdl); margin: 8px 0; }

/* ============================================================
   顶栏 (appbar) — 平直 IDE 风, 拒 macOS 窗口范式.
   平直 1px 下边界, 无圆角无阴影. 左 brand · ctx, 右辅助.
   ============================================================ */
.appbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  background: var(--bg2);
  border-bottom: 1px solid var(--brd);
  user-select: none;
  flex-shrink: 0;
  font-size: 12px;
}
.appbar .brand {
  color: var(--blue);
  font-weight: bold;
  letter-spacing: 0.05em;
  padding-left: 10px;
}
.appbar .ctx {
  color: var(--dim);
  font-size: 11px;
  padding-left: 8px;
  border-left: 1px solid var(--brdl);
}
.appbar > :last-child { padding-right: 10px; }
.appbar .grow { flex: 1; }
.appbar .health {
  font-size: 11px; color: var(--dim);
  padding: 2px 8px;
  border: 1px solid var(--brd);
  border-radius: 2px;
}
.appbar .health.ok   { color: var(--cyan);    border-color: var(--cyan); }
.appbar .health.warn { color: var(--yellow);  border-color: var(--yellow); }
.appbar .health.err  { color: var(--magenta); border-color: var(--magenta); }

.ts { color: var(--dim); font-size: 10px; }

/* === Lang toggle (小型选段, 放在 appbar 右端) === */
.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--brd);
  border-radius: 2px;
  overflow: hidden;
  background: var(--bg);
}
.lang-toggle button {
  background: none; border: 0;
  padding: 2px 8px;
  font-family: inherit;
  font-size: 10px;
  color: var(--txt2);
  cursor: pointer;
}
.lang-toggle button + button { border-left: 1px solid var(--brdl); }
.lang-toggle button.active { background: var(--blue); color: #fff; }
.lang-toggle button:not(.active):hover { background: var(--bgh); color: var(--txt); }

/* ============================================================
   Topbar wrapper — appbar + tab-bar 一起 sticky 常驻, 滚动不滑走
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg2);
}

/* ============================================================
   Tab-bar — 顶部锚点导航, 容器贴边 (sticky 由父 .topbar 接管)
   ============================================================ */
.tab-bar {
  display: flex;
  background: var(--bg2);
  border-bottom: 1px solid var(--brd);
  padding: 0;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.tab {
  padding: 6px 10px;
  cursor: pointer;
  color: var(--dim);
  font-size: 11px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
  user-select: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.tab:hover { color: var(--txt); background: var(--bgh); text-decoration: none; }
.tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  background: var(--bg);
}

/* ============================================================
   状态点 (.td) — 6px 行内圆点, 用于 tab/label 前
   ============================================================ */
.td {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.td-ok  { background: var(--cyan); }
.td-err { background: var(--magenta); }
.td-w   { background: var(--yellow); }
.td-unk { background: var(--dim); }

/* ============================================================
   行内染色 span (终端范式)
   ============================================================ */
.s  { color: var(--cyan); }
.e  { color: var(--magenta); }
.w  { color: var(--yellow); }
.m  { color: var(--dim); }
.c  { color: var(--cyan); }
.mg { color: var(--magenta); }
.b  { color: var(--blue); }
.sd { color: var(--dim); }
.sh { color: var(--magenta); font-weight: bold; }
.ch { color: var(--cyan); }

/* ============================================================
   命令行 prompt 元素
   ============================================================ */
.pa { color: var(--cyan); }
.pt { color: var(--blue); font-weight: bold; }
.cur {
  display: inline-block;
  width: 1ch; height: 1.2em;
  background: var(--txt);
  animation: bk 1s step-end infinite;
  vertical-align: text-bottom;
}
@keyframes bk { 50% { opacity: 0; } }

/* ============================================================
   状态 tag — 文本风 [ok] / [near_limit] (替代 pill 圆角背景)
   ============================================================ */
.status-tag {
  display: inline-block;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--dim);
  white-space: nowrap;
}
.status-tag.s  { color: var(--cyan); }
.status-tag.e  { color: var(--magenta); }
.status-tag.w  { color: var(--yellow); }
.status-tag.b  { color: var(--blue); }
.status-tag.m  { color: var(--dim); }

/* ============================================================
   .ab — 紧凑动作按钮 (cli 风, 比 .btn 小一档)
   ============================================================ */
.ab {
  background: none;
  border: 1px solid var(--brd);
  color: var(--txt2);
  padding: 2px 8px;
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  transition: background .1s, color .1s, border-color .1s;
  text-decoration: none;
  display: inline-block;
}
.ab:hover { background: var(--bgh); color: var(--txt); text-decoration: none; }
.ab.p { color: var(--blue); border-color: var(--blue); }
.ab.p:hover { background: rgba(2,37,199,0.06); }
.ab.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.ab:disabled { opacity: 0.4; cursor: not-allowed; }

/* === 紧凑表单条 .if (单行 input/select/.ab 横排) === */
.if {
  display: flex; gap: 6px;
  align-items: center;
  margin: 4px 0;
  flex-wrap: wrap;
}
.if input, .if select {
  font-family: inherit;
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--brd);
  border-radius: 2px;
  background: var(--bg);
  color: var(--txt);
}
.if input:focus, .if select:focus {
  outline: 1px solid var(--blue);
  border-color: var(--blue);
}

/* ============================================================
   .btn — 大一档动作按钮 (比 .ab 大, 用于 hero CTA)
   ============================================================ */
.btn {
  display: inline-block;
  background: var(--bg);
  border: 1px solid var(--brd);
  color: var(--txt2);
  padding: 4px 12px;
  border-radius: 2px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: all .12s;
  text-decoration: none;
}
.btn:hover { color: var(--txt); border-color: var(--txt2); background: var(--bgh); text-decoration: none; }
.btn.primary { color: var(--blue); border-color: var(--blue); }
.btn.primary:hover { background: rgba(2,37,199,.06); }
.btn.accent { color: var(--magenta); border-color: var(--magenta); }
.btn.accent:hover { background: rgba(201,48,199,.06); }

/* ============================================================
   .term-page / .term-block — cli 文本输出区 (例外: 8-12px 可读 padding)
   ============================================================ */
.term-page { padding: 10px 12px; }
.term-block {
  display: block;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.55;
  border: 1px dashed var(--brdl);
  border-radius: 2px;
  padding: 8px 10px;
  margin: 6px 0;
  background: var(--bg);
  overflow-x: auto;
  white-space: pre;
}

/* ============================================================
   Tables — 终端范式
   ============================================================ */
.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tbl th, .tbl td {
  padding: 5px 10px;
  text-align: left;
  border-bottom: 1px solid var(--brdl);
  vertical-align: top;
}
.tbl th {
  color: var(--dim); font-weight: 500; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.07em;
  background: var(--bg2);
}
.tbl tbody tr:hover { background: var(--bgh); }

/* ============================================================
   List row (.term-row) — 列表项 2 行紧凑 + 反白选中 + 左 cyan border
   按 VISUAL_STYLE_GUIDE.md §6 通用规范
   ============================================================ */
.term-row {
  display: block;
  padding: 4px 10px;
  background: var(--bg2);
  border-bottom: 1px solid var(--brdl);
  border-left: 2px solid transparent;
  color: var(--txt);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}
.term-row .name { font-size: 11px; color: var(--txt); }
.term-row .meta { font-size: 10px; color: var(--dim); margin-top: 2px; }
.term-row:hover { background: var(--bgh); text-decoration: none; }
.term-row.active {
  background: var(--bg);
  border-left-color: var(--cyan);
}
.term-row.active .name { color: var(--cyan); }

/* ============================================================
   Layout helpers (零容器 padding/margin 时使用)
   ============================================================ */
.row { display: flex; gap: 8px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 8px; }
.grow { flex: 1; }
.dim { color: var(--dim); }
.txt2 { color: var(--txt2); }
.right { text-align: right; }
.mono { font-family: inherit; }
.hidden { display: none !important; }

.c-cyan    { color: var(--cyan); }
.c-yellow  { color: var(--yellow); }
.c-blue    { color: var(--blue); }
.c-magenta { color: var(--magenta); }
.c-dim     { color: var(--dim); }

/* ============================================================
   Banner / inline note
   ============================================================ */
.banner {
  background: var(--bg2);
  border-left: 3px solid var(--cyan);
  color: var(--txt2);
  padding: 6px 10px;
  font-size: 11px;
}
.banner.warn { border-left-color: var(--yellow); }
.banner.err  { border-left-color: var(--magenta); }
.banner.info { border-left-color: var(--blue); }