:root { color-scheme: dark; font-family: Inter, "Microsoft YaHei", sans-serif; background: #071522; color: #e7f1f7; }
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; background: #071522; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .22; background-image: linear-gradient(rgba(91, 185, 188, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 185, 188, .10) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(#000, transparent 72%); }
.dashboard { position: relative; width: min(1440px, calc(100% - 48px)); margin: 0 auto; padding: 28px 0 38px; }
.topbar, .page-intro, .panel-heading, .topbar-meta, .brand, .status-key { display: flex; align-items: center; }
.topbar { justify-content: space-between; border-bottom: 1px solid #1d3547; padding-bottom: 22px; }
.brand { gap: 12px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; gap: 4px; width: 38px; padding: 7px; border: 1px solid #45d8cb; background: #0a2a34; }
.brand-mark i { height: 4px; border: 1px solid #45d8cb; }
.brand strong, .brand small { display: block; }.brand strong { font-size: 18px; }.brand small, .eyebrow, .panel-heading p, footer { color: #8da3b5; font-size: 11px; letter-spacing: 1.2px; }
.topbar-meta { gap: 12px; color: #b8c8d4; font-size: 13px; }.divider { height: 16px; border-left: 1px solid #385064; }
.page-intro { justify-content: space-between; padding: 40px 0 26px; }.eyebrow { margin: 0 0 8px; color: #55d8d0; font-weight: 800; }.eyebrow span { display: inline-block; width: 7px; height: 7px; margin-right: 7px; background: #35e5be; border-radius: 50%; }
h1, h2, p { margin-top: 0; }h1 { margin-bottom: 8px; font-size: 36px; letter-spacing: 0; } .page-intro > div > p:last-child { margin: 0; color: #a8bdca; }
.status-key { gap: 8px; padding: 10px 13px; border: 1px solid #27455a; background: #0a1b2a; font-size: 13px; }.status-dot { width: 8px; height: 8px; background: #35e5be; border-radius: 50%; box-shadow: 0 0 12px #35e5be; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.metric-card, .panel { border: 1px solid #20394b; background: rgba(9, 29, 45, .92); }
.metric-card { position: relative; min-height: 140px; padding: 18px; }.metric-card > span:not(.metric-icon) { display: block; margin-top: 13px; color: #9eb4c4; font-size: 13px; }.metric-card strong { display: block; margin: 6px 0; font-size: 30px; }.metric-card small { color: #71899c; font-size: 12px; }
.metric-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid currentColor; font-size: 21px; }.metric-icon--teal { color: #4ce5d5; background: #0a3038; }.metric-icon--green { color: #55de9f; background: #0b3027; }.metric-icon--amber { color: #efb85e; background: #332716; }.metric-icon--blue { color: #77bff5; background: #112c43; }
.dashboard-grid { display: grid; grid-template-columns: 1.1fr 1.4fr; gap: 14px; margin-top: 14px; }.panel { min-height: 330px; padding: 20px; }.panel-heading { justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid #20394b; }.panel-heading p { margin-bottom: 4px; text-transform: uppercase; }.panel-heading h2 { margin: 0; font-size: 18px; }.panel-heading > span { color: #55d8d0; font-size: 13px; }.quiet-label { color: #91a9ba !important; }
.services-panel { grid-row: span 2; }.service-list { display: grid; gap: 0; }.service-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; min-height: 59px; border-bottom: 1px solid #173044; }.service-row:last-child { border: 0; }.service-state { width: 8px; height: 8px; border-radius: 50%; background: #e3666f; }.service-state.online { background: #35e5be; box-shadow: 0 0 10px #35e5be; }.service-name { font-weight: 750; }.service-name small { display: block; margin-top: 3px; color: #738ca0; font-size: 11px; font-weight: 400; }.service-response { color: #a9bbc8; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.chart-panel { min-height: 330px; }.chart-panel canvas { width: 100%; height: 250px; margin-top: 20px; }.backup-panel { min-height: 260px; }.backup-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }.backup-item { padding: 13px; border-left: 2px solid #35e5be; background: #0b2232; }.backup-item.warn { border-left-color: #efb85e; }.backup-item span, .backup-item small { display: block; color: #8fa7b7; font-size: 12px; }.backup-item strong { display: block; margin: 6px 0 3px; font-size: 18px; }
.timezones { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #20394b; padding-top: 17px; gap: 14px; }.timezones span, .timezones small { display: block; color: #8fa7b7; font-size: 11px; }.timezones strong { display: block; margin: 6px 0 3px; font-family: ui-monospace, Consolas, monospace; font-size: 20px; color: #e5f1f4; }
footer { padding-top: 20px; text-align: right; }
@media (max-width: 950px) { .metric-grid { grid-template-columns: repeat(2, 1fr); }.dashboard-grid { grid-template-columns: 1fr; }.services-panel { grid-row: auto; }.topbar-meta { display: none; } }
@media (max-width: 600px) { .dashboard { width: min(100% - 24px, 1440px); padding-top: 18px; }.page-intro { align-items: flex-start; gap: 20px; flex-direction: column; }.metric-grid, .backup-list, .timezones { grid-template-columns: 1fr; } h1 { font-size: 29px; }.metric-card { min-height: 124px; } footer { text-align: left; line-height: 1.6; } }