* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif; background:#EEF1F6; color:#1A2333; font-size:14px; }
a { text-decoration:none; color:#0B4FD8; }

/* 顶栏 */
.topbar { display:flex; align-items:center; background:#0B1F4B; color:#fff; padding:0 24px; height:56px; }
.brand { font-size:17px; font-weight:600; margin-right:32px; white-space:nowrap; }
.topnav { display:flex; flex:1; }
.topnav a { color:#C9D6F2; padding:0 18px; line-height:56px; font-size:14px; }
.topnav a:hover { color:#fff; background:#14306E; }
.topnav a.active { color:#fff; background:#0B4FD8; font-weight:600; }
.topbar-right { display:flex; align-items:center; gap:16px; }
.active-app { font-size:12px; color:#9FB6E8; }
.logout { color:#FFD9D9; font-size:13px; }
.logout:hover { color:#fff; }

.container { padding:16px 24px; }

/* 消息 */
.flash { padding:10px 16px; border-radius:6px; margin-bottom:14px; color:#fff; font-weight:500; }
.flash-ok { background:#0E9F5D; }
.flash-err { background:#D8262C; }

/* 卡片 */
.card { background:#fff; border-radius:8px; box-shadow:0 1px 3px rgba(11,31,75,.12); margin-bottom:16px; }
.card-head { padding:12px 20px; border-radius:8px 8px 0 0; color:#fff; font-weight:600; font-size:15px; }
.card-head.blue { background:#0B4FD8; }
.card-head.orange { background:#F26B0F; }
.card-head.green { background:#0E9F5D; }
.card-head.purple { background:#7A2FD8; }
.card-head.slate { background:#3A4A66; }
.card-body { padding:16px 20px; }

/* 表格 */
table.data { width:100%; border-collapse:collapse; table-layout:auto; }
table.data th, table.data td { text-align:center; padding:9px 8px; border-bottom:1px solid #E3E8F0; }
table.data th { background:#F4F6FA; color:#3A4A66; font-weight:600; }
table.data tr:hover td { background:#F8FAFE; }

/* 按钮 */
.btn { display:inline-block; border:none; cursor:pointer; border-radius:5px; padding:7px 16px; font-size:13px; color:#fff; background:#0B4FD8; margin-right:8px; }
.btn:hover { filter:brightness(1.1); }
.btn.green { background:#0E9F5D; }
.btn.orange { background:#F26B0F; }
.btn.red { background:#D8262C; }
.btn.purple { background:#7A2FD8; }
.btn.gray { background:#5A6A85; }
.btn.sm { padding:4px 10px; font-size:12px; }

/* 表单 */
input[type=text], input[type=password], input[type=number], input[type=datetime-local], textarea, select {
  border:1px solid #C6CFDE; border-radius:5px; padding:7px 10px; font-size:13px; font-family:inherit; background:#fff; color:#1A2333;
}
input:focus, textarea:focus, select:focus { outline:none; border-color:#0B4FD8; box-shadow:0 0 0 2px rgba(11,79,216,.15); }
textarea { resize:vertical; }
label.flabel { display:block; font-weight:600; margin:12px 0 6px; color:#3A4A66; }
.form-row { display:flex; gap:16px; flex-wrap:wrap; }
.form-row > div { flex:1; min-width:220px; }

/* JSON 展示 */
.result-json { background:#101828; color:#D3E1FF; border-radius:6px; padding:14px; font-family:Consolas,Menlo,monospace; font-size:12px; overflow:auto; white-space:pre-wrap; word-break:break-all; max-height:480px; }

/* 徽标 */
.badge { display:inline-block; padding:2px 10px; border-radius:10px; font-size:12px; color:#fff; }
.badge.green { background:#0E9F5D; }
.badge.red { background:#D8262C; }
.badge.orange { background:#F26B0F; }
.badge.purple { background:#7A2FD8; }
.badge.gray { background:#8A97AB; }
.badge.blue { background:#0B4FD8; }

/* 颜色变量（给内联 style 用） */
:root {
  --primary:#0B4FD8; --orange:#F26B0F; --green:#0E9F5D; --purple:#7A2FD8; --red:#D8262C; --gray:#5A6A85;
  --bg:#fff; --border:#C6CFDE; --text:#1A2333; --text-muted:#8A97AB;
}

/* 按钮禁用 */
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* 表单行（card-body 内的 .row） */
.card-body .row { margin-bottom:10px; display:flex; flex-direction:column; gap:4px; }
.card-body .row > label { font-size:12px; color:#5A6A85; font-weight:600; }
.card-body .row input, .card-body .row select, .card-body .row textarea { width:100%; }
.hint { font-size:12px; color:#8A97AB; margin-top:4px; }
.hint code { background:#F4F6FA; padding:1px 6px; border-radius:3px; color:#0B4FD8; }

/* 分组 pill */
.group-pill { display:inline-block; font-size:11px; padding:1px 8px; border-radius:999px; color:#fff; margin-right:4px; }
.group-pill.blue { background:#0B4FD8; }
.group-pill.green { background:#0E9F5D; }
.group-pill.orange { background:#F26B0F; }
.group-pill.red { background:#D8262C; }
.group-pill.purple { background:#7A2FD8; }
.group-pill.gray { background:#5A6A85; }

/* 统计小卡片（仪表盘第二行） */
.stat-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:14px; margin-bottom:14px; }
.stat-row .stat { background:#fff; border-radius:8px; padding:16px; box-shadow:0 1px 3px rgba(11,31,75,.08); border-top:3px solid #0B4FD8; }
.stat-row .stat .num { font-size:26px; font-weight:700; color:#1A2333; font-family:Consolas,Menlo,monospace; }
.stat-row .stat .lbl { font-size:12px; color:#8A97AB; margin-top:4px; }
.stat-row .stat.blue  { border-top-color:#0B4FD8; }
.stat-row .stat.green { border-top-color:#0E9F5D; }
.stat-row .stat.orange{ border-top-color:#F26B0F; }
.stat-row .stat.red   { border-top-color:#D8262C; }
.stat-row .stat.purple{ border-top-color:#7A2FD8; }

/* 图表容器 */
.chart-box { padding:12px; }
.chart-box svg { width:100%; height:220px; }
.chart-legend { display:flex; gap:14px; margin-top:8px; font-size:12px; color:#3A4A66; flex-wrap:wrap; }
.chart-legend .lg { display:flex; align-items:center; gap:4px; }
.chart-legend .dot { width:10px; height:10px; border-radius:2px; display:inline-block; }

/* 提示条 */
.alert { border-radius:6px; padding:12px 16px; margin-bottom:14px; color:#fff; }
.alert.red { background:#D8262C; }
.alert.orange { background:#F26B0F; }
.alert.green { background:#0E9F5D; }
.alert .title { font-weight:600; margin-bottom:4px; }

/* 首页卡片 */
.dash-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:16px; }
.dash-card { border-radius:8px; color:#fff; padding:20px; display:block; }
.dash-card .t1 { font-size:16px; font-weight:600; margin-bottom:6px; }
.dash-card .t2 { font-size:12px; opacity:.85; }
.dash-card.blue { background:#0B4FD8; }
.dash-card.orange { background:#F26B0F; }
.dash-card.green { background:#0E9F5D; }
.dash-card.purple { background:#7A2FD8; }
.dash-card:hover { filter:brightness(1.08); }

/* 分页 */
.pager { margin-top:14px; }
.pager a, .pager span { display:inline-block; padding:5px 12px; margin-right:6px; border-radius:5px; background:#fff; border:1px solid #C6CFDE; font-size:13px; }
.pager span.cur { background:#0B4FD8; color:#fff; border-color:#0B4FD8; }

/* 筛选条 */
.filter-bar { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-bottom:14px; }
.filter-bar label { font-size:12px; color:#5A6A85; display:block; margin-bottom:4px; }

.footer { text-align:center; color:#8A97AB; font-size:12px; padding:18px; }

/* 登录/初始化 */
.auth-box { max-width:420px; margin:60px auto; }
.auth-box .card-head { text-align:center; }

.mono { font-family:Consolas,Menlo,monospace; font-size:12px; }
.text-muted { color:#8A97AB; font-size:12px; }
.mt { margin-top:14px; }
details { margin-top:12px; }
summary { cursor:pointer; color:#0B4FD8; font-weight:600; font-size:13px; }