/* Office TV board: sized in vw/vh so it fills any 16:9 screen with no scrolling. */
:root{--bg:#070f16;--line:#24424a;--txt:#e8f2f3;--muted:#8fa9ae;--green:#34d6a1;--gold:#efc66c;--silver:#c8d8e8}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;cursor:none}
body{background:radial-gradient(90% 90% at 30% 40%,#0f3a31 0%,#08161c 50%,var(--bg) 100%);color:var(--txt);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.tv{height:100vh;display:flex;flex-direction:column;padding:3.2vh 3.4vw 2.4vh}
.tv-top{display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;align-items:center;gap:1.2vw}
.mark{width:3.6vw;height:3.6vw;background:var(--green);clip-path:polygon(50% 0,90% 50%,50% 100%,10% 50%)}
.brand b{display:block;font-size:2.4vw;letter-spacing:.18em;color:var(--green)}
.brand small{display:block;font-size:1.3vw;color:var(--muted)}
.clock{text-align:right}
.clock strong{display:block;font-size:3.6vw;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.clock small{font-size:1.2vw;color:var(--muted)}
.tv-main{flex:1;display:flex;gap:2.4vw;margin-top:3vh;min-height:0}
.board{flex:1.75;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:1.4vw;background:rgba(16,33,44,.72);padding:1.6vh 2.2vw}
.board-head{display:flex;justify-content:space-between;color:var(--muted);font-size:1.15vw;text-transform:uppercase;letter-spacing:.12em;padding-bottom:1vh;border-bottom:1px solid var(--line)}
#rows{flex:1;display:flex;flex-direction:column}
.row{flex:1;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #1d3740}
.row:last-child{border-bottom:0}
.row .name{font-size:2.5vw;font-weight:600;color:#cfe3e1}
.row .num{font-size:5vw;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.close-note{margin-top:1.2vh;padding:.9vh 1vw;border-radius:.6vw;background:#2a2516;border:1px solid #5c4a22;color:var(--gold);font-size:1.4vw;font-weight:600}
.notice{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.notice b{font-size:3.2vw;color:var(--gold)}
.notice span{font-size:1.6vw;color:var(--muted);margin-top:1vh}
.side{flex:1;display:flex;flex-direction:column;gap:2vh}
.tile{flex:1;border:1px solid var(--line);border-radius:1.4vw;background:rgba(16,33,44,.72);padding:1.6vh 1.8vw;display:flex;flex-direction:column;justify-content:center}
.tile small{font-size:1.15vw;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.tile strong{font-size:3.6vw;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:.6vh}
.gold{color:var(--gold)}.silver{color:var(--silver)}
.status{display:flex;align-items:center;gap:1vw}
.status small{font-size:1.05vw;color:var(--muted)}
.badge{font-size:1vw;font-weight:700;letter-spacing:.1em;border-radius:.5vw;padding:.6vh .8vw;white-space:nowrap}
.badge.ok{background:#143a31;color:#6ce5ba;border:1px solid #2c6e58}
.badge.warn{background:#42351b;color:#ffd992;border:1px solid #745622}
.badge.calm{background:#1a2a36;color:#b9cdd6;border:1px solid #35505e}
.tv-foot{display:flex;justify-content:space-between;margin-top:2vh;color:#6f8c92;font-size:1.05vw}
#host{color:var(--green)}
@media (max-aspect-ratio:4/3){.tv-main{flex-direction:column}.side{flex-direction:row}.row .num{font-size:8vw}.row .name{font-size:4vw}.tile strong{font-size:4vw}}