* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: #f4f5f7; color: #1f2933; }
.nav { display: flex; align-items: center; gap: 24px; padding: 0 24px; height: 52px; background: #1f2933; color: #fff; }
.nav a { color: #cbd2d9; text-decoration: none; margin-right: 16px; }
.nav a:hover { color: #fff; }
.nav .who { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.container { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
.card { background: #fff; border-radius: 8px; padding: 16px 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.login { max-width: 360px; margin: 80px auto; }
.login label { display: block; margin-bottom: 12px; }
.login input { display: block; width: 100%; padding: 8px; margin-top: 4px; border: 1px solid #cbd2d9; border-radius: 4px; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #e4e7eb; }
th { background: #f0f2f5; font-weight: 600; }
.btn { display: inline-block; padding: 5px 12px; border: 1px solid #9aa5b1; border-radius: 4px; background: #fff; color: #1f2933; cursor: pointer; font-size: 13px; }
.btn:hover { background: #f0f2f5; }
.btn.primary { background: #2f6fed; border-color: #2f6fed; color: #fff; }
.btn.danger { border-color: #d64545; color: #d64545; }
.flash { padding: 10px 14px; border-radius: 4px; margin-bottom: 12px; }
.flash.ok { background: #e3f9e5; color: #1f6f3f; }
.flash.bad { background: #ffe3e3; color: #a61b1b; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; color: #fff; }
.badge.active { background: #2f9e5a; }
.badge.needs_relogin { background: #d64545; }
.badge.disabled { background: #7b8794; }
progress { width: 160px; height: 10px; vertical-align: middle; }
.code { font: 600 32px/1.4 ui-monospace, monospace; letter-spacing: 4px; }
.muted { color: #7b8794; }
.inline { display: inline; }
.big { font-size: 22px; font-weight: 600; margin: 4px 0; }
.chart { width: 100%; height: auto; max-width: 720px; }
.chart-grid { stroke: #e4e7eb; stroke-width: 1; }
.chart-axis { stroke: #9aa5b1; stroke-width: 1; }
.chart-label { fill: #7b8794; font-size: 11px; }
.chart-line { fill: none; stroke: #2f6fed; stroke-width: 1.5; }
.chart-dot { fill: #2f6fed; }