:root { --ink:#172033; --muted:#64748b; --line:#dce3ee; --blue:#2763eb; --pale:#f5f8fc; --warning:#b54708; --danger:#ba1a1a; --success:#087443; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--pale); font:15px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
header { min-height:64px; padding:0 max(24px, calc((100vw - 1200px)/2)); display:flex; gap:28px; align-items:center; justify-content:space-between; background:#101b33; color:white; }
.brand { color:white; text-decoration:none; font-weight:750; letter-spacing:.01em; font-size:18px; }.brand span { font-weight:400; opacity:.8; }
nav { display:flex; align-items:center; gap:20px; } nav a, .link-button { color:#d7e3ff; text-decoration:none; font:inherit; background:transparent; border:0; cursor:pointer; padding:0; }
main { max-width:1200px; margin:0 auto; padding:42px 24px 70px; }.login-main { min-height:100vh; display:grid; place-items:center; padding:24px; }
h1,h2,p { margin-top:0; } h1 { font-size:32px; line-height:1.12; margin-bottom:8px; } h2 { font-size:18px; margin-bottom:4px; } a { color:var(--blue); }.eyebrow { color:var(--blue); font-size:12px; letter-spacing:.12em; font-weight:700; margin-bottom:8px; }.page-heading { display:flex; justify-content:space-between; gap:20px; align-items:start; margin-bottom:26px; }.page-heading p:not(.eyebrow), .panel-heading p, .muted { color:var(--muted); }
.metrics { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom:26px; }.metrics article, .panel, .login-card, .empty { background:white; border:1px solid var(--line); border-radius:12px; box-shadow:0 2px 8px #19233b0a; }.metrics article { padding:20px; }.metrics span { display:block; color:var(--muted); font-size:13px; }.metrics strong { display:block; font-size:31px; margin-top:8px; }.metrics .warning strong, .bad { color:var(--danger); }
.panel { padding:24px; margin-bottom:24px; }.panel-heading { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }.panel-heading p { margin-bottom:18px; font-size:13px; }.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; } th { color:var(--muted); text-align:left; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; } th,td { padding:12px 10px; border-bottom:1px solid var(--line); white-space:nowrap; } tr:last-child td { border-bottom:none; }.failure-row { background:#fff2f0; }.failure-row td:first-child { border-left:3px solid var(--danger); }
.button, button { display:inline-block; padding:9px 14px; border-radius:7px; color:white; background:var(--blue); border:1px solid var(--blue); font:inherit; font-weight:650; cursor:pointer; text-decoration:none; }.button.secondary { color:var(--ink); background:white; border-color:var(--line); }.empty { padding:38px; text-align:center; }.empty .button { margin-top:8px; }
.two-columns { display:grid; grid-template-columns:1fr 1fr; gap:24px; }.form-panel { max-width:620px; }.settings-form, .form-panel form, .login-card form { display:grid; gap:16px; }.inline-form { display:grid; grid-template-columns:1.5fr 1.3fr auto; gap:9px; margin-bottom:18px; }label { display:grid; gap:6px; font-weight:600; } label small { color:var(--muted); font-weight:400; } input { min-width:0; padding:10px 11px; border:1px solid #aebaca; border-radius:7px; font:inherit; color:var(--ink); }.check { display:flex; gap:9px; align-items:center; font-weight:500; }.check input { min-width:auto; }.network-list { padding:0; margin:0; list-style:none; }.network-list li { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line); }.network-list form { margin:0; }.danger-link { color:var(--danger); background:transparent; border:0; padding:0; font-weight:600; }.login-card { width:min(100%, 420px); padding:32px; }.login-card > p:not(.eyebrow) { color:var(--muted); }.flash { max-width:700px; margin:0 auto 22px; padding:12px 14px; border-radius:8px; }.flash.error { color:#8e1616; background:#fff0ee; }.flash.success { color:#075d36; background:#edfff4; }.flash.info { color:#164b9c; background:#eff6ff; }
.alerts { display:grid; gap:12px; }.alert { padding:17px; border:1px solid var(--line); border-left:5px solid var(--blue); border-radius:8px; display:grid; grid-template-columns:1fr auto; gap:12px; }.alert.warning { border-left-color:var(--warning); background:#fffaf0; }.alert.critical { border-left-color:var(--danger); background:#fff4f3; }.alert h2 { font-size:16px; margin:6px 0; }.alert p,.alert small { color:var(--muted); margin:0; font-size:13px; }.alert dl { margin:0; display:grid; grid-template-columns:auto auto; align-content:start; gap:3px 11px; font-size:13px; }.alert dt { color:var(--muted); text-transform:capitalize; }.alert dd { margin:0; font-weight:600; }.badge { display:inline-block; color:white; background:var(--blue); border-radius:999px; padding:2px 8px; font-size:11px; font-weight:700; text-transform:uppercase; }.warning .badge { background:var(--warning); }.critical .badge { background:var(--danger); } code { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.92em; }
@media (max-width:760px) { header { padding:14px 20px; align-items:flex-start; flex-direction:column; gap:10px; } nav { gap:13px; flex-wrap:wrap; }.metrics, .two-columns { grid-template-columns:1fr; }.page-heading, .panel-heading { flex-direction:column; }.inline-form { grid-template-columns:1fr; }.alert { grid-template-columns:1fr; } main { padding:30px 15px; }.panel { padding:17px; } }