:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #101416; color: #ecf3f0; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at top right, #17322d 0, #101416 42rem); min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1rem, 4vw, 4rem); background: rgba(16, 20, 22, .92); border-bottom: 1px solid #29413c; backdrop-filter: blur(14px); }
.brand-mark { display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-right: .55rem; border-radius: .55rem; background: #31c48d; color: #08231a; font-weight: 800; }
.brand { font-weight: 700; letter-spacing: .02em; }
.version-badge, .pill { border: 1px solid #2f8067; border-radius: 999px; padding: .35rem .7rem; color: #8ff1c5; font-size: .82rem; }
.version-nav { display: flex; align-items: center; gap: .35rem; padding: .25rem; border: 1px solid #29413c; border-radius: .75rem; background: #151d1d; }
.version-link { padding: .45rem .7rem; border-radius: .5rem; color: #9eada8; font-size: .82rem; text-decoration: none; white-space: nowrap; }
.version-link:hover, .version-link:focus-visible { color: #ecf3f0; background: #20302b; outline: none; }
.version-link.active { color: #08231a; background: #31c48d; font-weight: 700; }
.health { color: #9eada8; font-size: .85rem; }
.page { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 3rem 0 5rem; }
.hero { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: 2rem; }
.eyebrow { margin: 0 0 .4rem; color: #77d5b2; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
h1, h2 { margin: 0; letter-spacing: -.03em; } h1 { font-size: clamp(2rem, 5vw, 4rem); } h2 { font-size: 1.25rem; }
.muted, small { color: #9eada8; } .hero .muted { max-width: 48rem; line-height: 1.6; }
.run-card { min-width: 15rem; padding: 1rem; border: 1px solid #32534a; border-radius: 1rem; background: rgba(23, 50, 45, .55); } .run-card span, .run-card small { display: block; } .run-card strong { display: block; margin: .35rem 0; font-size: 1.05rem; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1rem; } .metrics article, .panel { border: 1px solid #273a36; border-radius: 1rem; background: rgba(20, 28, 29, .88); box-shadow: 0 16px 40px rgba(0,0,0,.15); }
.metrics article { padding: 1.1rem; } .metrics span { color: #a6b9b3; font-size: .83rem; } .metrics strong { display: block; margin: .45rem 0; font-size: 1.8rem; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1rem; }
.panel { padding: 1.25rem; margin-bottom: 1rem; } .panel-heading { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: 1rem; } .key-values { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; } .key-values div { padding: .75rem; border-radius: .7rem; background: #18221f; } .key-values span { display: block; color: #9eada8; font-size: .78rem; } .key-values strong { display: block; margin-top: .25rem; }
.table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th, td { padding: .85rem .65rem; border-bottom: 1px solid #273a36; text-align: left; white-space: nowrap; } th { color: #83b9a7; font-size: .78rem; font-weight: 600; } td { color: #e3efeb; font-size: .88rem; }
.positive { color: #72e6ac; } .negative { color: #ff9a83; } .empty { padding: 2rem; text-align: center; color: #9eada8; }
@media (max-width: 760px) { .topbar, .hero { align-items: start; flex-direction: column; } .metrics, .grid { grid-template-columns: 1fr 1fr; } .run-card { width: 100%; } }
@media (max-width: 480px) { .metrics, .grid, .key-values { grid-template-columns: 1fr; } }