* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; background: #0f1420; color: #e8ecf4; }
header { padding: 28px 32px 8px; }
h1 { margin: 0 0 4px; font-size: 30px; }
.tagline { color: #9fb2d8; margin: 0 0 6px; font-size: 16px; }
.meta, .note { color: #7d8db0; font-size: 13px; }
.cards { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px 32px 4px; }
.card { background: #1a2236; border: 1px solid #2b385a; border-radius: 10px; padding: 14px 18px; min-width: 150px; }
.card .v { font-size: 26px; font-weight: 700; }
.card .k { color: #9fb2d8; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.panel { background: #151c2e; border: 1px solid #263354; border-radius: 10px; margin: 16px 32px; padding: 18px 22px; }
.panel h2 { margin-top: 0; font-size: 19px; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { border-bottom: 1px solid #263354; padding: 6px 8px; text-align: left; }
th { color: #9fb2d8; }
.bar-row { display: flex; align-items: center; gap: 10px; margin: 5px 0; font-size: 13px; }
.bar-label { width: 290px; color: #c6d2ea; }
.bar-track { flex: 1; background: #232f4d; height: 16px; border-radius: 4px; position: relative; }
.bar-fill { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.pos { background: #e5534b; } .neg { background: #3fb950; }
.bar-val { width: 130px; color: #9fb2d8; }
.live { display: flex; gap: 22px; flex-wrap: wrap; font-size: 15px; margin-top: 8px; }
input[type=range] { width: 280px; vertical-align: middle; }
footer { padding: 8px 32px 30px; color: #7d8db0; font-size: 13px; }
.yes { color: #ff9d97; font-weight: 700; } .no { color: #8b98b8; }
code { background: #232f4d; padding: 1px 5px; border-radius: 4px; }