:root{color-scheme:light;font-family:Inter,Segoe UI,Arial,sans-serif;background:#e8eff6;color:#132e46;font-variant-numeric:tabular-nums}
*{box-sizing:border-box}body{margin:0;padding:1.5vh 1.8vw;min-height:100vh}
header,.brand,.controls,.period,footer{display:flex;align-items:center;justify-content:space-between;gap:1.2vw;min-width:0}
header{background:#fff;border:1px solid #b8cadb;border-radius:14px;padding:10px 1.2vw;min-height:104px}
.brand{justify-content:flex-start;flex:0 1 30%;min-width:240px}.brand>div{min-width:0}
.brand img{width:4.8vw;min-width:50px;height:64px;object-fit:contain;background:#fff;padding:3px}
.eyebrow{font-size:clamp(10px,.72vw,16px);letter-spacing:.12em;color:#435c72;margin:0}
h1{font-size:clamp(20px,1.6vw,36px);margin:5px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
h2{font-size:clamp(16px,1.13vw,26px);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
button{font:inherit;color:#173d5b;border:1px solid #8ca8bf;border-radius:9px;background:#edf5fc;padding:9px 13px;cursor:pointer}
button:focus-visible{outline:3px solid #006aad;outline-offset:3px}.controls{flex-shrink:0}#clock{color:#334e65;font-size:clamp(14px,1vw,23px);white-space:nowrap}
.weather{flex:1 1 560px;max-width:780px;min-width:0;height:82px;border-left:1px solid #dbe5ee;padding-left:1vw}
.weather-heading{display:flex;justify-content:space-between;gap:10px;font-size:clamp(11px,.75vw,17px);white-space:nowrap}
#weatherStatus{color:#435c72;overflow:hidden;text-overflow:ellipsis;font-size:clamp(10px,.65vw,14px)}
.weather-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;height:60px;margin-top:5px}
.weather-day{min-width:0;border-right:1px solid #e4ebf2;padding-right:5px;display:grid;gap:2px;align-content:start}.weather-day:last-child{border:0}
.weather-day-label{font-size:clamp(11px,.73vw,16px);color:#435c72}.weather-temp{font-size:clamp(14px,.95vw,22px)}
.weather-condition{font-size:clamp(10px,.65vw,14px);color:#435c72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#connection{color:#11603e;height:1.4em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(12px,.9vw,20px);margin:1vh 0}#connection.warning{color:#784500}#connection.error{color:#a22222}
.period{color:#435c72;font-size:clamp(11px,.8vw,18px);margin-bottom:1vh;height:1.5em}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1vw}
article{min-width:0;background:#fff;border:1px solid #b8cadb;border-radius:14px;padding:clamp(12px,1vw,22px);overflow:hidden}
.metrics article{background:#e5f5ec;border-top:4px solid #16834f}.metrics article:nth-child(2){background:#e4f1ff;border-top-color:#2679bd}.metrics article:nth-child(3){background:#f0eaff;border-top-color:#7f52b1}.metrics article:nth-child(4){background:#fff0dc;border-top-color:#bf7000}
article p{margin:0 0 .7vh;font-size:clamp(13px,.95vw,22px);color:#334e65}strong{font-weight:650}
.metrics strong{font-size:clamp(27px,2.4vw,58px);display:block;letter-spacing:-.03em;white-space:nowrap}
small,.caption{display:block;font-size:clamp(11px,.73vw,17px);color:#435c72;margin-top:6px}
.charts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1vw;margin-top:1.3vh}
/* Fixed panel and row tracks: names, last pages and empty states cannot resize the board. */
.charts>article{height:clamp(340px,44vh,560px);display:grid;grid-template-rows:28px 26px minmax(0,1fr) 24px;align-content:start}
.charts>article>.caption{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.representatives{display:grid;grid-template-rows:repeat(6,minmax(0,1fr));gap:0;min-height:0;align-content:start}
.rep-row{min-width:0;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid #edf1f5;overflow:hidden}
.rep-heading{display:grid;grid-template-columns:minmax(0,1fr) 9ch;align-items:baseline;gap:10px;font-size:clamp(12px,.85vw,20px)}
.rep-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.rep-sales{text-align:right;white-space:nowrap}
.rep-track{height:4px;background:#edf2f7;border-radius:3px;margin-top:8px}.rep-fill{height:100%;background:#287fb9;border-radius:3px}
.rep-row.negative .rep-fill{background:#bd4939}.rep-row.negative .rep-sales{color:#a22222}
.rep-pagination{display:flex;align-items:end;min-width:0}.rep-pagination .caption{margin:0;font-size:clamp(10px,.67vw,15px);white-space:nowrap}
.months{display:grid;grid-template-rows:repeat(12,minmax(0,1fr));min-height:0;grid-row:3 / 5;padding-top:2px}
.month{display:grid;grid-template-columns:3ch minmax(0,1fr) 9ch;align-items:center;gap:9px;min-width:0;font-size:clamp(11px,.78vw,18px)}
.month-label{color:#435c72}.month-value{text-align:right;white-space:nowrap}.bar-space{position:relative;height:12px;background:#f0f4f8;border-radius:3px}
.bar{position:absolute;top:0;height:100%;background:#287fb9;border-radius:3px}.baseline{position:absolute;top:-2px;height:16px;border-left:1px solid #879eb2}
.month.negative .bar{background:#bd4939}.month.negative .month-value{color:#a22222}
.charges{display:grid;grid-template-columns:1fr 1fr 2fr;gap:1vw;margin-top:1.3vh}.charges strong{font-size:clamp(24px,1.8vw,42px)}
.carriers{background:#f5f9fd;border:1px solid #b8cadb;border-radius:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 15px;padding:1vw;font-size:clamp(11px,.82vw,20px);align-content:center}.carrier{display:flex;justify-content:space-between;gap:10px;white-space:nowrap}
footer{font-size:clamp(10px,.72vw,17px);color:#435c72;margin-top:1vh}
.pairing{max-width:780px;margin:10vh auto;padding:35px;background:#fff;border:1px solid #b8cadb;border-radius:18px;font-size:20px;line-height:1.6}.pair-code{font-size:44px;letter-spacing:.08em;color:#125d91}
[hidden]{display:none!important}
@media(max-width:1200px){header{flex-wrap:wrap}.brand{flex:1}.weather{order:3;flex-basis:100%;max-width:none;border-left:0;padding:8px 0 0;height:90px;border-top:1px solid #dbe5ee}.charts{grid-template-columns:repeat(2,minmax(0,1fr))}.rep-heading{font-size:15px}.month{font-size:14px}}
@media(max-width:650px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.charts{grid-template-columns:1fr}.charges{grid-template-columns:1fr 1fr}.carriers{grid-column:1/-1}.period,footer{height:auto;flex-wrap:wrap}.brand img{width:50px}.eyebrow{font-size:9px}.controls{gap:8px}#clock{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}