:root {
    --bg: #f5f7f6;
    --surface: #ffffff;
    --surface-alt: #edf1ef;
    --text: #17201d;
    --muted: #65716d;
    --border: #d8dfdc;
    --ok: #16865b;
    --ok-soft: #e4f5ed;
    --down: #c9363e;
    --down-soft: #fbeaec;
    --warn: #c17613;
    --warn-soft: #fff3dc;
    --accent: #087c92;
    --accent-dark: #075d6e;
    --shadow: 0 2px 10px rgba(23, 32, 29, .06);
}
* { box-sizing: border-box; }
html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background: var(--bg); }
body { margin: 0; min-width: 320px; }
a { color: inherit; }
button, input, select { font: inherit; letter-spacing: 0; }
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }
.nav-shell { max-width: 1240px; min-height: 62px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand, .login-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 750; text-decoration: none; }
.brand-mark { width: 13px; height: 13px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); flex: 0 0 auto; }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a, .link-button { color: var(--muted); text-decoration: none; font-size: .92rem; font-weight: 600; }
.nav-links a:hover, .link-button:hover { color: var(--text); }
.nav-links form { margin: 0; }
.link-button { border: 0; background: transparent; padding: 0; cursor: pointer; }
.nav-toggle { display: none; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); cursor: pointer; }
.page-shell { width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 34px 0 56px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.page-heading h1 { margin: 3px 0 4px; font-size: 1.75rem; line-height: 1.2; letter-spacing: 0; }
.page-heading p { margin: 0; color: var(--muted); }
.back-link { color: var(--muted); font-size: .88rem; font-weight: 650; text-decoration: none; }
.button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 6px; padding: 8px 14px; background: var(--surface); color: var(--text); text-decoration: none; font-weight: 650; cursor: pointer; white-space: nowrap; }
.button:hover { border-color: #aeb9b4; }
.button.primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.button.primary:hover { background: var(--accent-dark); }
.button.danger { color: #fff; background: var(--down); border-color: var(--down); }
.button.small { min-height: 32px; padding: 5px 9px; font-size: .82rem; }
.button.full { width: 100%; }
.stat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 30px; }
.stat-card { min-height: 94px; padding: 16px; border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); display: flex; flex-direction: column; justify-content: space-between; }
.stat-card span { color: var(--muted); font-size: .83rem; font-weight: 650; }
.stat-card strong { font-size: 1.75rem; line-height: 1; }
.stat-card.ok { border-top-color: var(--ok); }.stat-card.warn { border-top-color: var(--warn); }.stat-card.down, .stat-card.incident { border-top-color: var(--down); }.stat-card.neutral { border-top-color: #7b8581; }
.content-section, .detail-section, .public-list, .public-incidents { margin-top: 24px; padding: 22px 0 0; border-top: 1px solid var(--border); }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-bottom: 15px; }
.section-heading h2 { margin: 0; font-size: 1.05rem; letter-spacing: 0; }.section-heading span { color: var(--muted); font-size: .85rem; }
.table-scroll { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th { color: var(--muted); background: var(--surface-alt); font-size: .76rem; text-align: left; text-transform: uppercase; }
th, td { padding: 12px 13px; border-bottom: 1px solid var(--border); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: color-mix(in srgb, var(--surface-alt) 55%, transparent); }
.monitor-link { font-weight: 700; text-decoration: none; }.monitor-link:hover { color: var(--accent); }
.status-badge { display: inline-flex; align-items: center; gap: 7px; min-height: 27px; border-radius: 999px; padding: 4px 9px; font-size: .78rem; font-weight: 700; white-space: nowrap; background: var(--surface-alt); color: var(--muted); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-up { color: var(--ok); background: var(--ok-soft); }.status-down { color: var(--down); background: var(--down-soft); }.status-failing { color: var(--warn); background: var(--warn-soft); }
.row-actions, .heading-actions { display: flex; align-items: center; gap: 7px; }.row-actions form, .heading-actions form { margin: 0; }
.icon-button { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); cursor: pointer; }
.empty-state { text-align: center; padding: 64px 24px; border: 1px dashed var(--border); border-radius: 8px; }.empty-state h2 { margin: 0 0 8px; font-size: 1.1rem; }.empty-state p, .muted { color: var(--muted); }
.flash { margin-bottom: 18px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }.flash.success { color: var(--ok); background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, var(--border)); }.flash.error { color: var(--down); background: var(--down-soft); border-color: color-mix(in srgb, var(--down) 30%, var(--border)); }
.login-shell { min-height: calc(100vh - 90px); display: grid; place-items: center; }.login-panel { width: min(400px, 100%); padding: 30px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); }.login-panel h1 { margin: 24px 0; font-size: 1.45rem; }.login-panel label { display: block; margin: 16px 0 7px; font-weight: 650; font-size: .88rem; }.login-panel .button { margin-top: 22px; }
input:not([type="checkbox"]), select { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); background: var(--surface); }
input:focus, select:focus { outline: 3px solid color-mix(in srgb, var(--accent) 20%, transparent); border-color: var(--accent); }
.monitor-form { display: grid; gap: 18px; }.form-section { padding: 22px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }.form-section h2 { margin: 0 0 20px; font-size: 1.05rem; }.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }.form-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }.form-grid .wide { grid-column: 1 / -1; }
.monitor-form label { display: block; margin-bottom: 7px; font-size: .86rem; font-weight: 650; }.monitor-form .help-text { margin: 6px 0 0; color: var(--muted); font-size: .78rem; }.monitor-form ul { margin: 6px 0; padding-left: 18px; color: var(--down); font-size: .82rem; }.check-grid { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-bottom: 18px; }.check-grid > div { display: flex; align-items: center; gap: 8px; }.check-grid label { margin: 0; }.form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }.safe-wrap { overflow-wrap: anywhere; }.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }.metric-grid > div { min-height: 88px; padding: 15px; border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; }.metric-grid > div:last-child { border: 0; }.metric-grid span { color: var(--muted); font-size: .8rem; }.metric-grid strong { font-size: 1.2rem; }
.detail-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); }.detail-list > div { padding: 14px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }.detail-list dt { color: var(--muted); font-size: .76rem; }.detail-list dd { margin: 5px 0 0; font-weight: 650; }.incident-banner { margin-top: 22px; padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid color-mix(in srgb, var(--down) 35%, var(--border)); border-left: 4px solid var(--down); border-radius: 6px; background: var(--down-soft); color: var(--down); }.incident-banner div { display: flex; flex-direction: column; gap: 3px; }.incident-banner span { font-size: .85rem; }
.check-bars { height: 76px; display: flex; align-items: end; gap: 3px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); overflow: hidden; }.check-bar { flex: 1 1 8px; max-width: 18px; min-width: 4px; height: 24px; border-radius: 2px 2px 0 0; background: var(--ok); }.check-bar.failure { background: var(--down); }.check-bar.speed2 { height: 34px; }.check-bar.speed3 { height: 44px; }.check-bar.speed4 { height: 54px; }
.danger-zone { margin-top: 38px; padding: 18px; border: 1px solid color-mix(in srgb, var(--down) 30%, var(--border)); border-radius: 8px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }.danger-zone h2 { margin: 0 0 4px; font-size: 1rem; }.danger-zone p { margin: 0; color: var(--muted); font-size: .85rem; }
.public-shell { width: min(820px, 100%); margin: 0 auto; }.public-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }.public-header > span { color: var(--muted); font-size: .82rem; }.overall-status { min-height: 130px; padding: 25px; display: flex; align-items: center; gap: 18px; border-radius: 8px; color: var(--ok); background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--border)); }.overall-status.has-incident { color: var(--down); background: var(--down-soft); border-color: color-mix(in srgb, var(--down) 30%, var(--border)); }.overall-status h1 { margin: 0 0 5px; font-size: 1.35rem; }.overall-status p { margin: 0; color: var(--text); }.large-dot { width: 19px; height: 19px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 7px color-mix(in srgb, currentColor 15%, transparent); }
.public-row { min-height: 70px; padding: 14px 4px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--border); }.public-row > div { display: flex; flex-direction: column; gap: 4px; }.public-row span { color: var(--muted); font-size: .8rem; }.public-incidents article { display: flex; justify-content: space-between; gap: 15px; padding: 13px 0; border-bottom: 1px solid var(--border); }.public-incidents article span { color: var(--muted); font-size: .85rem; }
@media (prefers-color-scheme: dark) {
    :root { --bg: #151917; --surface: #1d2320; --surface-alt: #262d29; --text: #edf2ef; --muted: #a0aca6; --border: #39423d; --ok-soft: #15382b; --down-soft: #3a1c20; --warn-soft: #3a2d18; --accent: #35a7ba; --accent-dark: #258899; --shadow: 0 2px 10px rgba(0,0,0,.18); }
}
@media (max-width: 980px) { .stat-grid { grid-template-columns: repeat(3, 1fr); }.metric-grid { grid-template-columns: repeat(3, 1fr); }.metric-grid > div { border-bottom: 1px solid var(--border); }.detail-list { grid-template-columns: repeat(2, 1fr); }.form-grid.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
    .page-shell { width: min(100% - 28px, 1240px); padding-top: 23px; }.nav-shell { padding: 0 14px; }.nav-toggle { display: block; }.nav-links { display: none; position: absolute; top: 62px; left: 0; right: 0; padding: 16px; flex-direction: column; align-items: stretch; background: var(--surface); border-bottom: 1px solid var(--border); }.nav-links.open { display: flex; }.nav-links a, .link-button { display: block; padding: 8px; text-align: left; }
    .page-heading, .detail-heading { align-items: stretch; flex-direction: column; }.heading-actions { flex-wrap: wrap; }.stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.form-grid, .form-grid.four { grid-template-columns: 1fr; }.metric-grid { grid-template-columns: repeat(2, 1fr); }.detail-list { grid-template-columns: 1fr; }.detail-list > div { border-right: 0; }.danger-zone, .incident-banner, .public-header, .public-incidents article { align-items: stretch; flex-direction: column; }.public-row { align-items: flex-start; }.login-panel { padding: 22px; }
}