/* ============================================================
   开发者看板 · 样式
   ------------------------------------------------------------
   沿用全站「素纸 · 墨字 · 一线朱」：无卡片壳，靠发丝线切分。
   变量全部来自 app.css，深色模式自动跟随。
   ============================================================ */

.adm { max-width: 1160px; margin: 0 auto; padding: 46px 36px 140px; }

/* ---------- 页头 ---------- */
.adm-head {
  display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap;
  padding-bottom: 22px; border-bottom: 1px solid var(--hair-2);
}
.adm-head .kicker {
  display: block; margin-bottom: 14px;
  font: 400 11px/1 var(--sans); letter-spacing: .14em; color: var(--ink-4);
}
.adm-head .kicker::before {
  content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 9px;
  background: var(--v); vertical-align: 1px;
}
.adm-head h1 {
  margin: 0; font: 600 36px/1.25 var(--serif); letter-spacing: -.012em; color: var(--ink);
}
.adm-head h1 em { font-style: normal; color: var(--v); }
.adm-when { margin-left: auto; font-size: 12.5px; color: var(--ink-4); text-align: right; line-height: 1.9; }
.adm-when b { color: var(--ink-3); font-weight: 400; }

/* ---------- 范围选择：文字页签 + 下划线 ---------- */
.adm-range { display: flex; gap: 22px; }
.adm-range button {
  border: 0; background: none; padding: 4px 0 8px; cursor: pointer;
  font: 400 13.5px/1 var(--sans); color: var(--ink-3);
  border-bottom: 2px solid transparent; transition: color .18s var(--ease), border-color .18s;
}
.adm-range button:hover { color: var(--ink); }
.adm-range button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--v); }

/* ---------- KPI ---------- */
.kpis {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  margin-top: 34px; border-top: 1px solid var(--hair-2);
}
.kpi { padding: 22px 20px 20px 0; }
.kpi + .kpi { padding-left: 20px; border-left: 1px solid var(--hair); }
.kpi b {
  display: block; font: 400 40px/1 var(--serif); letter-spacing: -.01em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kpi.hot b { color: var(--v); }
.kpi span {
  display: block; margin-top: 12px;
  font: 400 12.5px/1.5 var(--sans); color: var(--ink-3);
}
.kpi span i {
  display: block; margin-top: 5px; font-style: normal;
  font: 400 10.5px/1 var(--sans); letter-spacing: .1em; color: var(--ink-4);
}

/* ---------- 区块 ---------- */
.blk { margin-top: 68px; }
.blk-h {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--hair-2);
}
.blk-h h2 {
  margin: 0; font: 600 20px/1.4 var(--serif); color: var(--ink); letter-spacing: -.004em;
}
.blk-h h2::before {
  content: ""; display: inline-block; width: 26px; height: 3px; margin-right: 12px;
  background: var(--v); vertical-align: 5px;
}
.blk-h i { font: 400 12px/1 var(--sans); font-style: normal; color: var(--ink-4); letter-spacing: .04em; }
.blk-h .r { margin-left: auto; font-size: 12px; color: var(--ink-4); }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.cols-3 { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 46px; }

/* ---------- 折线 ---------- */
.chart { margin-top: 26px; }
.chart svg { display: block; width: 100%; height: 260px; overflow: visible; }
.chart .grid-l { stroke: var(--hair); stroke-width: 1; }
.chart .ax { font: 400 10.5px var(--sans); fill: var(--ink-4); }
.chart .ln-pv { fill: none; stroke: var(--v); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .ln-uv { fill: none; stroke: var(--slate); stroke-width: 1.6; stroke-dasharray: 4 3; stroke-linejoin: round; }
.chart .dot-pv { fill: var(--v); }
.chart .ar-pv { fill: var(--v-soft); }
.chart .ar-uv { fill: var(--slate-soft); }
.chart .hi { stroke: var(--hair-2); stroke-width: 1; }
.chart .hi-t { font: 400 11px var(--sans); fill: var(--ink-2); }
.chart-legend { display: flex; gap: 20px; margin-top: 14px; font: 400 12px var(--sans); color: var(--ink-3); }
.chart-legend i { display: inline-block; width: 16px; height: 2px; margin-right: 7px; vertical-align: 3px; }
.chart-legend .a i { background: var(--v); }
.chart-legend .b i { background: var(--slate); }

/* ---------- 横条排行 ---------- */
.rank { margin-top: 8px; }
.rank-r {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: baseline;
  gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair);
}
.rank-r:last-child { border-bottom: 0; }
.rank-r .no {
  font: 400 13px/1.6 var(--serif); color: var(--ink-4); font-variant-numeric: tabular-nums;
}
.rank-r .tx { min-width: 0; }
.rank-r .tx b { display: block; font: 400 14px/1.65 var(--serif); color: var(--ink); }
.rank-r .tx span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-4); }
.rank-r .bar { position: relative; height: 3px; margin-top: 8px; background: var(--hair); }
.rank-r .bar i { position: absolute; inset: 0 auto 0 0; background: var(--v); }
.rank-r .vl {
  font: 400 15px/1.4 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
}
.rank-r .vl small { display: block; margin-top: 3px; font: 400 11px var(--sans); color: var(--ink-4); }

/* ---------- 表 ---------- */
.tbl { width: 100%; border-collapse: collapse; margin-top: 8px; }
.tbl th {
  padding: 12px 10px 10px 0; text-align: left; font: 400 10.5px/1 var(--sans);
  letter-spacing: .1em; color: var(--ink-4); border-bottom: 1px solid var(--hair-2);
}
.tbl td {
  padding: 13px 10px 13px 0; font-size: 13px; color: var(--ink-2);
  border-bottom: 1px solid var(--hair); vertical-align: baseline;
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl .nm { font: 400 14px var(--serif); color: var(--ink); }
.tbl .num { font-variant-numeric: tabular-nums; }
.tbl .mut { color: var(--ink-4); }
.tbl .tag {
  display: inline-block; padding: 1px 6px; border: 1px solid var(--hair-2); border-radius: 2px;
  font-size: 11px; color: var(--ink-3);
}

/* ---------- 动态流 ---------- */
.feed { margin-top: 8px; }
.feed-r {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--hair); font-size: 13px;
}
.feed-r:last-child { border-bottom: 0; }
.feed-r .ty { font: 400 11.5px var(--sans); color: var(--ink-4); letter-spacing: .02em; }
.feed-r .bd { color: var(--ink-2); min-width: 0; }
.feed-r .bd b { font-weight: 400; color: var(--ink); }
.feed-r .tm { font: 400 11.5px var(--mono, monospace); color: var(--ink-4); white-space: nowrap; }

/* 事件类型着色：只有真正"要紧"的动作给朱色 */
.ty.t-pick, .ty.t-dl { color: var(--v); }

/* ---------- 空态 / 加载 / 门禁 ---------- */
.adm-note {
  margin-top: 22px; font-size: 13.5px; color: var(--ink-3); line-height: 1.9;
}
.empty { padding: 40px 0; font-size: 13.5px; color: var(--ink-4); }
.gate {
  max-width: 560px; margin: 90px auto 0; text-align: center;
}
.gate h2 { font: 600 26px/1.5 var(--serif); color: var(--ink); margin: 0 0 16px; }
.gate p { font-size: 14px; line-height: 2; color: var(--ink-3); margin: 0 0 10px; }
.gate .uid {
  display: inline-block; margin-top: 8px; padding: 5px 10px; border-radius: 2px;
  background: var(--paper-2); font: 400 11.5px var(--mono, monospace); color: var(--ink-3);
}
.gate .acts { margin-top: 26px; }

.skel { color: var(--ink-4); font-size: 13.5px; padding: 40px 0; }
.dash { color: var(--ink-4); }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .kpis { grid-template-columns: repeat(3, 1fr); row-gap: 26px; }
  .kpi:nth-child(4) { padding-left: 0; border-left: 0; }
  .cols, .cols-3 { grid-template-columns: 1fr; gap: 52px; }
}
@media (max-width: 720px) {
  .adm { padding: 30px 20px 100px; }
  .adm-head h1 { font-size: 27px; }
  .adm-when { margin-left: 0; text-align: left; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi { padding: 18px 14px 16px 0; }
  .kpi + .kpi { padding-left: 14px; }
  .kpi:nth-child(odd) { padding-left: 0; border-left: 0; }
  .kpi b { font-size: 31px; }
  .chart svg { height: 200px; }
  .feed-r { grid-template-columns: 1fr auto; }
  .feed-r .ty { grid-column: 1 / -1; }
}