* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #f4f6fa; color: #1f2937;
  font: 14px/1.6 -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; }
a { cursor: pointer; }
.muted { color: #8a94a6; }
.xs { font-size: 11px; }
.sm { font-size: 12px; }
.right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* 登录 */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1e3a8a, #0f172a); }
.login-card { width: 340px; background: #fff; border-radius: 14px; padding: 26px 24px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.login-card .brand { font-size: 20px; margin-bottom: 10px; }
.hint { color: #6b7280; font-size: 13px; margin: 4px 0 14px; }
.err { color: #dc2626; font-size: 13px; margin: 8px 0 0; }

/* 顶栏 */
.top { display: flex; align-items: center; gap: 18px; padding: 10px 20px; background: #0f172a; color: #e5e7eb; position: sticky; top: 0; z-index: 20; }
.brand { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.logo { display: inline-flex; width: 24px; height: 24px; border-radius: 7px; background: #3b82f6; color: #fff;
  align-items: center; justify-content: center; font-weight: 700; }
.top nav { display: flex; gap: 4px; flex-wrap: wrap; }
.top nav a { padding: 6px 12px; border-radius: 8px; color: #cbd5e1; text-decoration: none; font-size: 13px; }
.top nav a:hover { background: #1e293b; color: #fff; }
.top nav a.on { background: #3b82f6; color: #fff; }
.top-right { margin-left: auto; display: flex; gap: 12px; align-items: center; font-size: 12px; }
.top-right .link { color: #93c5fd; }

main { padding: 18px; max-width: 1500px; margin: 0 auto; }
.bar { display: flex; align-items: center; gap: 12px; margin: 0 2px 12px; }
.bar h2 { font-size: 17px; margin: 0; }
.bar .right select { margin-left: 6px; }

/* 卡片 */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.card { background: #fff; border-radius: 12px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(16,24,40,.06); }
.card .k { font-size: 12px; color: #6b7280; }
.card .v { font-size: 24px; font-weight: 600; line-height: 1.3; }
.card .v.sm { font-size: 18px; }
.card .s { font-size: 11px; color: #9ca3af; }
.card.warn .v { color: #dc2626; }

/* 面板 */
.panel { background: #fff; border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(16,24,40,.06); }
.panel .ph { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.panel .ph small { font-weight: 400; color: #9ca3af; font-size: 12px; }
.panel .pad { padding: 4px 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } .top nav { display: none; } }
.chart { width: 100%; height: 300px; }
.chart.sm { height: 240px; }

/* 分段控件 */
.seg { margin-left: auto; display: flex; gap: 2px; background: #f1f5f9; border-radius: 8px; padding: 2px; }
.seg a { padding: 3px 10px; border-radius: 6px; font-size: 12px; color: #475569; }
.seg a.on { background: #fff; color: #1d4ed8; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* 表格 */
.tbl-wrap { overflow-x: auto; max-height: 560px; overflow-y: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.tbl th { position: sticky; top: 0; background: #f8fafc; text-align: left; font-weight: 600; color: #475569;
  padding: 7px 8px; border-bottom: 1px solid #e5e7eb; white-space: nowrap; z-index: 1; }
table.tbl td { padding: 6px 8px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
table.tbl tr:hover td { background: #f8fbff; }
table.tbl th.r, table.tbl td.r { text-align: right; }
table.tbl td.b { font-weight: 600; }
td.uri { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.nowrap, th.nowrap { white-space: nowrap; }
.empty { text-align: center; color: #9ca3af; padding: 22px 0; }
.green { color: #16a34a; } .orange { color: #ea580c; } .red { color: #dc2626; }
.tag { display: inline-block; padding: 0 5px; border-radius: 4px; font-size: 11px; margin-right: 4px; }
.tag.red { background: #fee2e2; color: #b91c1c; }

/* 控件 */
.inp, select { padding: 6px 10px; border: 1px solid #d7dce5; border-radius: 8px; font-size: 13px; background: #fff; color: #1f2937; }
.inp { width: 100%; margin-bottom: 8px; }
.inp.sm { width: auto; margin-bottom: 0; }
select.sm { font-size: 12px; }
.btn { display: inline-block; padding: 6px 12px; border: 1px solid #d7dce5; background: #fff; border-radius: 8px;
  font-size: 13px; cursor: pointer; text-decoration: none; color: #1f2937; white-space: nowrap; }
.btn:hover { border-color: #93c5fd; }
.btn.primary { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.btn.block { width: 100%; }
.btn.sm { padding: 4px 9px; font-size: 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.pager { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 12px; }

/* 列表视图（图表/列表切换） */
.ptbar{display:flex;align-items:center;justify-content:space-between;margin:8px 0}
.ptbar .muted{font-size:12px}
.tblwrap{max-height:520px;overflow:auto;border:1px solid #eef1f5;border-radius:6px}
.tbl tfoot td{position:sticky;bottom:0;background:#f7f9fc;font-weight:600}
.tbl td.warn,.tbl .warn{color:#d97706}

/* 概览：时间范围、实时卡片、对比勾选 */
.bar .lbl{color:#6b7280;font-size:12px;margin-right:4px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:12px 0}
.grid4 .card .v .unit{font-size:12px;color:#6b7280;margin-left:2px}
.bar .chk{font-size:12px;color:#374151;display:inline-flex;align-items:center;gap:3px;margin-left:8px;cursor:pointer}
input[type=date].inp{width:132px}
@media (max-width:900px){.grid4{grid-template-columns:repeat(2,1fr)}}

/* 控件不要被挤成竖排 */
.seg{white-space:nowrap}
.seg a{white-space:nowrap}
.bar .right{flex-wrap:wrap;gap:6px;justify-content:flex-end}

/* 访问趋势独占整行：图表加高 */
.chart.tall{height:360px}

/* 表格里可点击的名称：蓝色链接样式，一眼看出能点 */
.tbl a.link{color:#2563eb;cursor:pointer;text-decoration:none}
.tbl a.link:hover{color:#1d4ed8;text-decoration:underline}
.tbl a.link:visited{color:#2563eb}

/* 轻提示：右下角浮层，支持多行（
 换行） */
.ss-toast{position:fixed;right:20px;bottom:20px;max-width:520px;background:#0f172a;color:#fff;
  padding:12px 16px;border-radius:10px;font-size:13px;line-height:1.6;white-space:pre-line;
  box-shadow:0 8px 28px rgba(15,23,42,.35);opacity:0;transform:translateY(8px);
  transition:opacity .18s ease,transform .18s ease;pointer-events:none;z-index:99}
.ss-toast.show{opacity:1;transform:translateY(0)}
/* 未接入标记 */
.tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;font-size:11px;
  background:#fff7ed;color:#c2410c;border:1px solid #fed7aa;vertical-align:middle}

.tag.ok { background: #dcfce7; color: #15803d; }
.tag.off { background: #f1f5f9; color: #64748b; }
.cb { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.cb code { background: #f6f8fa; border: 1px solid #e5e7eb; border-radius: 6px; padding: 6px 8px; font-size: 12px; word-break: break-all; flex: 1 1 auto; }