:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: #07111e; color: #f4f7fb; font-family: Arial, Helvetica, sans-serif; }
.tv main { min-height: 100vh; padding: 24px 42px 22px; display: flex; flex-direction: column; overflow: hidden; }
.tv main > * + * { margin-top: 2.2vh; }
header { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 2px solid #34516d; padding-bottom: 2vh; }
h1 { font-size: 42px; margin: 0; }
.eyebrow { color: #89bff0; letter-spacing: .14em; font-size: 16px; margin: 0 0 8px; }
.connection { text-align: right; font-size: 25px; font-weight: bold; color: #89e5be; }
.connection-INCOMPLETE { color: #ffc857; }
.connection-PAIRING { color: #ffc857; }
.connection-DEGRADED, .connection-ERROR { color: #ff6b6b; }
.connection small { display: block; color: #c5d0dc; font-size: 16px; margin-top: 8px; font-weight: normal; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2vw; flex: 1; min-height: 0; }
.card { background: #102237; border: 2px solid #33516d; border-radius: 16px; padding: 24px; min-width: 0; overflow: hidden; }
.card h2 { font-size: 38px; margin: 0; }
.state { color: #ffc857; font-size: 25px; font-weight: bold; margin: 8px 0 2vh; }
.state-ERROR { border-color: #ff6b6b; }
.state-STALE { border-color: #ffc857; }
dl { margin: 0; }
dt { color: #a6b8ca; font-size: 16px; margin-top: 1.25vh; }
dd { margin: 3px 0 0; font-size: 23px; font-weight: bold; word-break: break-word; overflow-wrap: anywhere; }
.pnl { font-size: 31px; }
.pnl.positive { color: #89e5be; }
.pnl.negative { color: #ff8a8a; }
.pnl.zero { color: #f4f7fb; }
.pnl.unknown { color: #ffc857; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; }
.card-head time { color: #a7b4c6; font-size: 17px; font-weight: bold; }
.horizon { color: #7fa9d2; font-size: 12px; letter-spacing: .14em; font-weight: bold; }
.hero { margin-top: 12px; padding: 18px 0; border-top: 1px solid #29435d; border-bottom: 1px solid #29435d; }
.hero small, .position small { display: block; color: #91a3b7; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.hero strong { display: block; margin-top: 6px; font-size: clamp(29px, 2.6vw, 42px); }
.position { display: flex; justify-content: space-between; align-items: flex-end; padding: 18px 0; }
.position b { font-size: 22px; }
.updated { margin-top: auto; color: #70839a; font-size: 12px; }
.note, footer { color: #b6c5d5; font-size: 15px; }
.note { max-height: 2.4em; overflow: hidden; }
footer { border-top: 1px solid #34516d; padding-top: 1.5vh; }
.pairing { padding: 3vh; border: 2px solid #ffc857; border-radius: 16px; text-align: center; }
.pairing h2 { margin: 0; font-size: 42px; }
#pair-code { display: block; font-size: 72px; letter-spacing: .18em; color: #ffc857; margin: 2vh 0; }
.admin { max-width: 1000px; padding: 36px; margin: auto; }
.admin input, .admin button { font: inherit; padding: 10px; margin: 8px; }
table { width: 100%; border-collapse: collapse; margin-top: 24px; }
th, td { border: 1px solid #33516d; padding: 9px; text-align: left; }
@media (min-width: 1700px) { h1 { font-size: 60px; } .card h2 { font-size: 52px; } .card { padding: 32px; } dd { font-size: 31px; } .pnl { font-size: 40px; } #pair-code { font-size: 96px; } }
@media (max-width: 700px) { .tv main { overflow: auto; padding: 20px; } header { align-items: flex-start; flex-direction: column; } .connection { text-align: left; margin-top: 12px; } .cards { grid-template-columns: 1fr; } }