:root { color-scheme: dark; --bg: #0b0d0e; --panel: #121617; --line: #293033; --muted: #8d9997; --text: #edf2ef; --accent: #a9e66f; --warm: #f2b56b; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 80% 0%, #1b2a1c 0, transparent 34rem), var(--bg); color: var(--text); font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, sans-serif; }
a { color: inherit; text-decoration: none; }
.topbar { border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; padding: 22px clamp(22px, 5vw, 76px); }
.brand { font-weight: 750; letter-spacing: -.04em; font-size: 20px; }.brand span { color: var(--muted); font-weight: 450; }
.topbar-meta { color: var(--muted); font-size: 12px; }.status-dot { background: var(--accent); border-radius: 50%; display: inline-block; height: 7px; margin-right: 6px; width: 7px; }.divider { padding: 0 8px; color: #4a5553; }
.shell { margin: 0 auto; max-width: 1340px; padding: clamp(52px, 8vw, 110px) clamp(22px, 5vw, 76px) 70px; }
.hero { display: grid; gap: 50px; grid-template-columns: 1.25fr .75fr; align-items: end; margin-bottom: 80px; }.eyebrow { color: var(--accent); font-size: 11px; letter-spacing: .14em; margin: 0 0 12px; text-transform: uppercase; }.hero h1 { font-size: clamp(48px, 7vw, 92px); letter-spacing: -.075em; line-height: .95; margin: 0; max-width: 820px; }.hero h1 em { color: var(--warm); font-style: normal; }.lede { color: var(--muted); font-size: 18px; margin: 28px 0 0; max-width: 580px; }
.hero-card, .panel, .metric { background: rgba(18, 22, 23, .82); border: 1px solid var(--line); border-radius: 16px; }.hero-card { padding: 26px; }.card-label { color: var(--muted); font-size: 12px; margin: 0 0 28px; text-transform: uppercase; letter-spacing: .1em; }.hero-card strong { color: var(--accent); font-size: 24px; letter-spacing: -.04em; }.hero-card p:not(.card-label) { color: var(--muted); margin: 12px 0 24px; }.text-link { color: var(--warm); font-size: 13px; }
.grid-layout { display: grid; gap: 18px; grid-template-columns: 1.2fr .8fr; }.panel { padding: 25px; }.panel-heading { align-items: start; display: flex; justify-content: space-between; margin-bottom: 22px; }.panel h2 { font-size: 26px; letter-spacing: -.05em; margin: 0; }.count { color: var(--muted); font-size: 13px; }.panel-copy { color: var(--muted); margin: -4px 0 28px; }.service-list { display: grid; gap: 9px; }.service { align-items: center; border: 1px solid #252d2e; border-radius: 10px; display: flex; gap: 13px; justify-content: space-between; padding: 13px 14px; }.service:hover { border-color: #516057; }.service-main { min-width: 0; }.service-name { display: block; font-weight: 650; }.service-description { color: var(--muted); display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.service-meta { color: var(--muted); font-size: 11px; text-align: right; white-space: nowrap; }.healthy { color: var(--accent); }.loading { color: var(--muted); padding: 24px 0; }
label { color: var(--muted); display: block; font-size: 12px; margin-bottom: 8px; }textarea { background: #0c1010; border: 1px solid #33403d; border-radius: 10px; color: var(--text); display: block; font: inherit; min-height: 150px; padding: 14px; resize: vertical; width: 100%; }textarea:focus { border-color: var(--accent); outline: 2px solid rgba(169, 230, 111, .15); }button { background: var(--accent); border: 0; border-radius: 9px; color: #10150e; cursor: pointer; font-weight: 750; margin-top: 13px; padding: 12px 16px; }button span { padding-left: 10px; }.answer { border-left: 2px solid var(--warm); color: #c8d2ce; margin-top: 24px; padding: 2px 0 2px 16px; }.answer small { color: var(--muted); display: block; margin-top: 12px; }
.lower-grid { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); margin-top: 18px; }.metric { display: flex; flex-direction: column; padding: 20px; }.metric-value { font-size: 32px; letter-spacing: -.06em; }.metric-label { color: var(--muted); font-size: 12px; margin-top: 5px; }.metric.action { color: var(--warm); justify-content: space-between; }.metric.action span { font-size: 20px; }
@media (max-width: 800px) { .hero, .grid-layout { grid-template-columns: 1fr; }.hero { margin-bottom: 45px; }.lower-grid { grid-template-columns: repeat(2, 1fr); }.topbar-meta { display: none; } }