/* admin.css —— 管理端补充样式（复用 style.css 的变量与基础类，只补管理端特有的） */

.admin-body { }

/* 管理端卡片里的「危险」按钮 */
.btn.danger {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 45%, transparent);
}
.btn.danger:hover { background: color-mix(in srgb, var(--red) 14%, transparent); }

/* 管理端列表卡片：比工作台的紧凑一点，一屏能多看几个 */
.admin-body .card { padding: 12px 14px; }
.admin-body .card .foot-note { margin-top: 8px; font-size: 11.5px; }

/* 账号清单里的动作按钮行 */
.admin-body .tagrow .btn {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 8px;
}

/* 概览条：5 个数字比默认 4 个更挤，允许横向滚 */
.admin-body .statusbar { gap: 8px; }
.admin-body .statusbar .stat { min-width: 84px; }

/* 桌面看也不至于拉成一条 */
@media (min-width: 720px) {
  .admin-body .app { max-width: 760px; margin: 0 auto; width: 100%; }
  .admin-body .auth { max-width: 460px; margin: 0 auto; }
}

/* 表格化的 meta 行：键名统一灰掉 */
.admin-body .meta .k {
  color: var(--tx3);
  margin-right: 2px;
}
.admin-body .meta .k + * { margin-right: 10px; }

/* ---------- 搜索条（2026-11-02：账号/任务页签顶部） ---------- */
.searchbar { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; }
.searchbar input {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 9px;
  background: var(--bg2); border: 1px solid var(--line2); color: var(--tx);
  font: inherit; font-size: 13.5px;
}
.searchbar input:focus { outline: none; border-color: var(--blue); }
.searchbar .btn { flex: none; }

/* 小按钮（导出 CSV 等） */
.btn.sm { padding: 5px 10px; font-size: 11.5px; }

/* ---------- 数据看板（2026-11-02） ---------- */
.kpirow { display: flex; gap: 10px; }
.kpi { flex: 1; background: var(--card); border: 1px solid var(--line2); border-radius: var(--r2);
  padding: 14px 10px; text-align: center; }
.kpi b { display: block; font-size: 26px; line-height: 1.15; color: var(--tx); }
.kpi span { display: block; font-size: 11px; color: var(--tx3); margin-top: 3px; }
.kpi.bad b { color: var(--red); }

/* 14 天柱状图：纯 CSS，无图表库 */
.chart { display: flex; align-items: flex-end; gap: 3px; height: 110px; margin-top: 6px; }
.chart .col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.chart .bars { flex: 1; display: flex; align-items: flex-end; gap: 1px; width: 100%; }
.chart .b { flex: 1; border-radius: 2px 2px 0 0; min-height: 0; transition: height .2s ease; }
.chart .b.blue { background: var(--blue); }
.chart .b.green { background: var(--green); }
.chart .d { font-size: 8.5px; color: var(--tx3); margin-top: 3px; transform: rotate(-58deg);
  white-space: nowrap; transform-origin: center; }

/* 图例小方块 */
.cnt .lg { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin: 0 4px 0 10px;
  vertical-align: middle; }
.cnt .lg.blue { background: var(--blue); }
.cnt .lg.green { background: var(--green); }

/* 状态分布条 */
.distrow { display: flex; align-items: center; gap: 8px; margin: 7px 0; font-size: 12.5px; }
.distrow .k { width: 62px; color: var(--tx2); flex: none; }
.distbar { flex: 1; height: 8px; background: var(--bg2); border-radius: 4px; overflow: hidden; }
.distbar i { display: block; height: 100%; background: var(--blue); border-radius: 4px; }
.distrow .v { width: 28px; text-align: right; color: var(--tx3); flex: none; }