:root { --ink:#172033; --muted:#6e798c; --blue:#1167d8; --navy:#0d1b31; --paper:#fff; --wash:#f4f7fb; --line:#e2e8f0; --green:#1a9b59; --amber:#d8941b; --shadow:0 12px 38px rgba(25,39,65,.09); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--wash); font:16px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input { font:inherit; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.sidebar { position:fixed; inset:0 auto 0 0; width:250px; display:flex; flex-direction:column; padding:1.4rem; color:white; background:var(--navy); }
.brand { display:flex; align-items:center; gap:.7rem; padding:.2rem .2rem 1.7rem; }
.brand > span { width:40px; height:40px; display:grid; place-items:center; border-radius:13px 13px 13px 4px; background:linear-gradient(145deg,#1684ff,#0a4ca6); font-weight:900; }
.brand strong { font-size:1.05rem; }
.sidebar nav { display:grid; gap:.35rem; }
.sidebar nav a { display:flex; gap:.75rem; align-items:center; padding:.75rem .85rem; border-radius:.7rem; color:rgba(255,255,255,.66); text-decoration:none; font-size:.9rem; font-weight:750; }
.sidebar nav a:hover,.sidebar nav a.active { color:white; background:rgba(255,255,255,.09); }
.sidebar nav span { width:1.2rem; color:#67b4ff; text-align:center; }
.mode-card { margin-top:auto; padding:1rem; border:1px solid rgba(255,255,255,.1); border-radius:.9rem; background:rgba(255,255,255,.05); }
.mode-card strong,.mode-card small { display:block; }
.mode-card small { margin:.35rem 0 0 1.1rem; color:rgba(255,255,255,.55); font-size:.72rem; }
.pulse { display:inline-block; width:.58rem; height:.58rem; margin-right:.5rem; border-radius:50%; background:#4ee28d; box-shadow:0 0 0 5px rgba(78,226,141,.12); }
main { margin-left:250px; padding:2.2rem clamp(1rem,4vw,4rem) 5rem; }
header { max-width:1280px; margin:0 auto 2rem; display:flex; justify-content:space-between; align-items:end; gap:2rem; }
.eyebrow { margin:0 0 .3rem; color:var(--blue); font-size:.74rem; font-weight:900; text-transform:uppercase; letter-spacing:.12em; }
h1,h2 { margin:0; line-height:1.15; letter-spacing:-.035em; }
h1 { font-size:clamp(2rem,4vw,3rem); }
h2 { font-size:1.35rem; }
.header-actions { display:flex; gap:.65rem; }
.header-actions a,.header-actions button { min-height:42px; padding:.6rem .85rem; border:1px solid var(--line); border-radius:.65rem; background:white; color:var(--ink); text-decoration:none; cursor:pointer; font-weight:750; }
.header-actions button { color:white; border-color:var(--blue); background:var(--blue); }
section { max-width:1280px; margin:0 auto 1.4rem; padding:1.4rem; border:1px solid var(--line); border-radius:1rem; background:var(--paper); box-shadow:var(--shadow); scroll-margin-top:1.5rem; }
.section-title { margin-bottom:1.2rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.section-title p { margin:.25rem 0 0; color:var(--muted); font-size:.82rem; }
.status { padding:.42rem .7rem; border-radius:999px; font-size:.75rem; font-weight:850; }
.status.checking { color:#8b5c0d; background:#fff5d9; }
.status.live { color:#13703e; background:#e8f7ee; }
.status.fallback { color:#525e70; background:#edf0f4; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.85rem; }
.metric-grid article { padding:1.1rem; border:1px solid var(--line); border-radius:.8rem; background:#fbfcfe; }
.metric-grid span,.metric-grid small { display:block; color:var(--muted); font-size:.76rem; }
.metric-grid strong { display:block; margin:.25rem 0; font-size:2rem; line-height:1.1; }
.guardrail { margin-top:1rem; display:flex; gap:.8rem; padding:1rem; border-left:4px solid var(--green); border-radius:.5rem; background:#effaf4; }
.guardrail > span { color:var(--green); font-weight:900; }
.guardrail p { margin:.2rem 0 0; color:#547061; font-size:.82rem; }
.search { width:min(280px,100%); display:flex; align-items:center; gap:.4rem; padding:.5rem .7rem; border:1px solid var(--line); border-radius:.65rem; }
.search:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px rgba(17,103,216,.1); }
.search input { width:100%; border:0; outline:0; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; min-width:760px; }
th,td { padding:.85rem .7rem; border-bottom:1px solid var(--line); text-align:left; font-size:.82rem; }
th { color:var(--muted); background:#fafbfd; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }
td strong,td small { display:block; }
td small { color:var(--muted); }
.record { color:var(--blue); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.74rem; }
.pill { display:inline-flex; padding:.28rem .55rem; border-radius:999px; color:#245f43; background:#eaf7ef; font-size:.7rem; font-weight:850; }
.service-list { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.service-item { padding:1rem; border:1px solid var(--line); border-radius:.8rem; }
.service-item h3 { margin:0 0 .35rem; font-size:.95rem; }
.service-item p { margin:0; color:var(--muted); font-size:.78rem; }
.service-item strong { display:block; margin-top:.7rem; color:var(--blue); font-size:.8rem; }
.source-list { display:grid; gap:.65rem; }
.source-item { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.85rem; border:1px solid var(--line); border-radius:.75rem; }
.source-item span { color:var(--muted); font-size:.8rem; }
.source-item a { color:var(--blue); font-size:.82rem; font-weight:800; text-decoration:none; }
@media (max-width:960px) { .metric-grid{grid-template-columns:repeat(2,1fr)} .service-list{grid-template-columns:repeat(2,1fr)} }
@media (max-width:700px) { .sidebar{position:static;width:auto;padding:1rem}.sidebar nav{grid-template-columns:repeat(4,1fr);overflow:auto}.sidebar nav a{justify-content:center}.sidebar nav a span{display:none}.mode-card{display:none}main{margin:0;padding:1.2rem 1rem 3rem}header{align-items:stretch;flex-direction:column}.header-actions{flex-wrap:wrap}.metric-grid,.service-list{grid-template-columns:1fr}.section-title{align-items:stretch;flex-direction:column}.search{width:100%} }