*{box-sizing:border-box} :root{font-family:"Segoe UI",Arial,sans-serif;color:#18354f;background:#eef3f8;font-synthesis:none}body{margin:0;min-height:100vh;display:flex;flex-direction:column}button{font:inherit;cursor:pointer}button:hover{background:#e9f1f9}button:focus-visible,select:focus-visible{outline:3px solid #287cde;outline-offset:2px}button:disabled{opacity:.5}.connection{text-align:right;font-size:12px;color:#6b8093}.connection time{display:block;font-size:12px;color:#6b8093;margin-top:2px}main{padding:18px 30px 0;display:flex;flex-direction:column;flex:1;min-height:0}.dashboard{display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,24vw,360px);gap:20px;flex:1;min-height:0}.map-card{background:#fff;border:1px solid #d4dfeb;border-radius:12px;display:flex;flex-direction:column;min-height:0;overflow:hidden;box-shadow:0 4px 18px #15395708}#map{width:100%;flex:1;min-height:250px;background:#f8fbfd}#map .block-axes line{stroke:#c8d7e5;stroke-width:1}#map .block-axes text{fill:#4e6a82;font:600 16px "Segoe UI",sans-serif}#map .tv-part{stroke:#fff;stroke-width:1.2}#map .part-label{font:600 11px "Segoe UI",sans-serif;fill:#27445e;paint-order:stroke;stroke:#f8fbfd;stroke-width:3px;stroke-linejoin:round}.sector-grid{fill:none;stroke:#52728c;stroke-width:2;stroke-dasharray:9 7;opacity:.55}.sector-label{fill:#27445e;font:700 27px "Segoe UI",sans-serif;paint-order:stroke;stroke:#fff;stroke-width:7px;stroke-linejoin:round}.legend{display:flex;justify-content:center;flex-wrap:wrap;gap:14px 24px;padding:14px;border-top:1px solid #e0e8f0;font-size:14px}.legend span{display:flex;align-items:center;gap:8px}.legend i{width:12px;height:12px;border-radius:3px}aside{display:flex;flex-direction:column;gap:12px}.metric{background:#fff;border:1px solid #dce4ed;border-radius:10px;padding:16px 18px;position:relative;color:#203149}.metric>span{display:block;color:#5a6b81;font-size:12px;font-weight:500}.metric strong{font-size:clamp(24px,1.65vw,32px);font-weight:600;display:block;margin:8px 0 6px;line-height:1.2;letter-spacing:-.025em;font-variant-numeric:tabular-nums}.metric small{display:block;font-size:11px;color:#738299;line-height:1.45}.metric.highlight{background:#fff;color:#203149;border-color:#dce4ed}.metric .bar{height:4px;background:#e9eef5;border-radius:5px;margin-top:12px;overflow:hidden}.metric .bar i{display:block;height:100%;background:#25a66b}.map-note{font-size:12px;color:#71869a;line-height:1.5;margin:2px 4px}footer{padding:12px 30px 14px;display:flex;justify-content:space-between;align-items:center;gap:20px}footer p{font-size:12px;color:#6b8093;margin:0}#progress-track{height:4px;width:160px;flex-shrink:0;background:#d2deea;border-radius:5px;overflow:hidden}#progress{height:100%;background:#287cde;transform-origin:left;transform:scaleX(0)}#error{padding:12px 16px;border:1px solid #dca94d;background:#fff6df;color:#734a0c;border-radius:8px;margin-bottom:12px}button[aria-pressed="true"]{background:#e2edf8;border-color:#287cde}.offline #connection{color:#8a5b0c}
@media(min-width:1000px) and (min-height:650px){body{height:100vh;overflow:hidden}}@media(min-width:2200px){.tv-toolbar button{font-size:20px}.metric>span{font-size:17px}.metric small{font-size:15px}.metric strong{font-size:42px}.legend{font-size:22px;padding:20px}main{padding:26px 45px 0}.metric{padding:24px}.map-note,footer p{font-size:18px}.connection{font-size:20px}.connection time{font-size:23px}}
@media(max-width:1000px){.dashboard{grid-template-columns:1fr}aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.map-note{grid-column:1/-1}#map{height:55vw;min-height:320px;flex:none}main{padding:14px}.legend{font-size:12px;gap:10px}}
@media(max-width:520px){.connection{font-size:10px}.connection time{font-size:12px}.metric{padding:14px}.metric strong{font-size:25px}#map{min-height:280px}footer{align-items:start}#progress-track{width:65px;margin-top:5px}}

/* Same header as the production control. */
.header-wrap{font-family:Inter,"Segoe UI",Arial,sans-serif}
.header-wrap{position:relative;border-bottom:1px solid rgba(255,255,255,.06);box-shadow:0 2px 8px rgba(19,34,59,.12);flex-shrink:0}.header-glow{position:absolute;inset:0;background:radial-gradient(640px 360px at 85% -30%,rgba(64,120,210,.5),transparent 62%),linear-gradient(118deg,rgba(19,34,59,.98) 0%,rgba(25,48,83,.98) 68%,rgba(31,58,99,.98) 100%)}.header-conteudo{position:relative;z-index:1;padding:14px 32px;display:flex;justify-content:space-between;align-items:center;gap:16px}.header-brand{display:flex;align-items:center;gap:16px;min-width:0}.header-logo{display:block;height:34px;width:114px;flex-shrink:0;background:url("./tv-logo.png") center/contain no-repeat}.header-divider{width:1px;height:28px;background:rgba(255,255,255,.16);flex-shrink:0}.header-title{font-size:22px;font-weight:700;color:#fff;line-height:1.2;letter-spacing:-.025em}.header-actions{display:flex;align-items:center;gap:12px}.hbtn{display:inline-flex;align-items:center;gap:7px;text-decoration:none;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);color:#fff;padding:8px 14px;border-radius:10px;font-size:12.5px;font-weight:600;transition:background .18s,border-color .18s}.hbtn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32)}.hbtn:focus-visible{outline:3px solid #b9d7ff;outline-offset:2px}
.header-actions{flex-direction:row}.header-brand>div:last-child{min-width:0}.header-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:768px){.header-conteudo{padding:10px 12px;flex-wrap:wrap;gap:10px}.header-brand{gap:10px;flex:1 1 auto}.header-logo{height:28px;width:94px}.header-divider{height:22px}.header-title{font-size:17px}.header-actions{width:100%}.hbtn{flex:1;justify-content:center;min-height:44px}}

/* Activity and stage buttons follow the Porto TV tabs. */
.tv-toolbar{display:flex;flex-direction:column;gap:10px;padding:12px 30px;background:#eef3f8;border-bottom:1px solid #d6e0eb}
.tv-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%}
.tv-tabs button,.tv-stage-tabs button{font-weight:500;border:1px solid #d9e2ed;border-radius:8px;background:#fff;color:#52657d;transition:background .15s,border-color .15s}
.tv-tabs button{font-size:16px;padding:12px 16px}
.tv-tabs button:hover,.tv-stage-tabs button:hover{background:#e6eef9}
.tv-tabs button.active,.tv-stage-tabs button.active{background:#2563eb;border-color:#2563eb;color:white}
.tv-stage-row{display:flex;align-items:center;gap:14px;min-width:0}
.tv-filter-title{font:500 10px "Consolas",monospace;letter-spacing:.12em;text-transform:uppercase;color:#748194;flex-shrink:0}
.tv-stage-tabs{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.tv-stage-tabs button{font-size:13px;padding:9px 14px;min-height:36px}
@media(min-width:2200px){.tv-toolbar{padding:16px 45px;gap:14px}.tv-tabs button{font-size:24px;padding:16px 20px}.tv-stage-tabs button{font-size:20px;padding:12px 18px}.tv-filter-title{font-size:15px}}
@media(max-width:768px){.tv-toolbar{padding:10px 14px;gap:8px}.tv-tabs{gap:6px}.tv-tabs button{font-size:13px;padding:10px 6px;min-height:44px}.tv-stage-row{align-items:flex-start;gap:8px}.tv-filter-title{padding-top:13px}.tv-stage-tabs{gap:6px}.tv-stage-tabs button{font-size:12px;padding:8px 10px;min-height:40px}}
@media(max-width:520px){.tv-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.tv-stage-tabs{flex:1}.tv-stage-tabs button{flex:1 1 110px}}