/* 内部测试后台。目标是「一眼看到数据、两下点到操作」，不是好看。
   所以：密度高、留白少、状态用颜色区分、没有动画。 */
* { box-sizing: border-box; }
body {
  margin: 0; font-size: 14px; line-height: 1.55; color: #1f2328; background: #f4f5f7;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
#lab { display: flex; min-height: 100vh; }

#side {
  width: 190px; flex: 0 0 190px; background: #1f2430; color: #c9cfda;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.brand { padding: 14px 16px; color: #fff; font-weight: 600; border-bottom: 1px solid #2c3342; }
.brand small { display: block; font-weight: 400; color: #7d8798; font-size: 11px; margin-top: 2px; }
#side a {
  display: block; padding: 8px 16px; color: #c9cfda; text-decoration: none; font-size: 13px;
  border-left: 3px solid transparent;
}
#side a:hover { background: #262d3b; color: #fff; }
#side a.on { background: #2b3546; color: #fff; border-left-color: #4c8bf5; }
.sidefoot {
  margin-top: auto; padding: 10px 16px; font-size: 11px; color: #7d8798;
  border-top: 1px solid #2c3342; word-break: break-all;
}

main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
header {
  background: #fff; border-bottom: 1px solid #e3e6ea; padding: 10px 18px;
  display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 5;
}
h1 { font-size: 17px; margin: 0; flex: 1; }
#page { padding: 16px 18px 60px; }

#banner:not(:empty) {
  margin: 10px 18px 0; padding: 8px 12px; border-radius: 3px;
  background: #fff4e5; color: #8a5300; border: 1px solid #f0d3a8; font-size: 13px;
}
#banner.bad { background: #fdecea; color: #8a1c14; border-color: #f3bdb7; }

/* --- 控件 --- */
button {
  font: inherit; padding: 5px 12px; border: 1px solid #c3c9d2; background: #fff;
  border-radius: 3px; cursor: pointer; color: #1f2328;
}
button:hover { background: #f0f2f5; }
button.primary { background: #2f6feb; border-color: #2f6feb; color: #fff; }
button.primary:hover { background: #2559c4; }
button.danger { color: #b0261a; border-color: #e0b4ae; }
button:disabled { opacity: .5; cursor: not-allowed; }
input, textarea, select {
  font: inherit; padding: 5px 8px; border: 1px solid #c3c9d2; border-radius: 3px;
  background: #fff; width: 100%; color: #1f2328;
}
textarea { resize: vertical; min-height: 90px; font-family: inherit; }
label { display: block; font-size: 12px; color: #59606b; margin: 8px 0 3px; }

/* --- 卡片与网格 --- */
.card { background: #fff; border: 1px solid #e3e6ea; border-radius: 4px; padding: 12px 14px; margin-bottom: 12px; }
.card > h3 { margin: 0 0 8px; font-size: 14px; }
.grid { display: grid; gap: 10px; }
.g2 { grid-template-columns: 1fr 1fr; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; gap: 12px; align-items: flex-start; }
.muted { color: #6b7280; font-size: 12px; }
.mono { font-family: Consolas, "Courier New", monospace; font-size: 12px; }

.stat { background: #fff; border: 1px solid #e3e6ea; border-radius: 4px; padding: 10px 12px; }
.stat b { display: block; font-size: 22px; line-height: 1.2; }
.stat span { font-size: 12px; color: #6b7280; }

/* --- 表格 --- */
table { width: 100%; border-collapse: collapse; background: #fff; font-size: 13px; }
th, td { text-align: left; padding: 6px 9px; border-bottom: 1px solid #eceef1; vertical-align: top; }
th { background: #f7f8fa; font-weight: 600; color: #4b5563; white-space: nowrap; }
tr:hover td { background: #fafbfc; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- 徽章。颜色是唯一的语义信号，所以每种状态一个色，不复用。 --- */
.b { display: inline-block; padding: 1px 6px; border-radius: 2px; font-size: 11px; border: 1px solid; }
.b.ok { background: #e6f4ea; color: #1a7f37; border-color: #a7d7b4; }
.b.warn { background: #fff4e5; color: #8a5300; border-color: #f0d3a8; }
.b.bad { background: #fdecea; color: #b0261a; border-color: #f3bdb7; }
.b.info { background: #e8f0fe; color: #1a56c4; border-color: #b3ccf5; }
.b.dim { background: #f1f3f5; color: #6b7280; border-color: #dde1e6; }

/* --- 编辑器三栏 --- */
.editor { display: grid; grid-template-columns: 280px 1fr 300px; gap: 12px; align-items: start; }
.editor textarea { min-height: 520px; line-height: 1.9; font-size: 15px; }
.kv { font-size: 12px; }
.kv div { display: flex; gap: 6px; padding: 2px 0; border-bottom: 1px dotted #eceef1; }
.kv div b { flex: 0 0 82px; color: #6b7280; font-weight: 400; }
.kv div span { flex: 1; word-break: break-word; }

#toast {
  position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column;
  gap: 6px; z-index: 50;
}
#toast div {
  background: #1f2430; color: #fff; padding: 7px 12px; border-radius: 3px;
  font-size: 13px; max-width: 460px;
}
#toast div.bad { background: #b0261a; }

.wc-ok { color: #1a7f37; font-weight: 600; }
.wc-bad { color: #b0261a; font-weight: 600; }
pre.raw { background: #f7f8fa; border: 1px solid #e3e6ea; padding: 8px; overflow-x: auto;
  font-size: 12px; max-height: 260px; }
@media (max-width: 1200px) { .editor { grid-template-columns: 1fr; } .g4 { grid-template-columns: repeat(2,1fr); } }