*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;color:#111;background:#f5f7f5}@media (prefers-color-scheme: dark){body{color:#e8e8e8;background:#111411}}.app{display:flex;flex-direction:column;height:100dvh;overflow:hidden}.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:.5px solid rgba(0,0,0,.1);background:#fff;flex-shrink:0;z-index:10}@media (prefers-color-scheme: dark){.topbar{background:#161a16;border-color:#ffffff14}}.logo{display:flex;align-items:center;gap:10px}.logo-badge{width:30px;height:30px;background:#1a6b3a;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.logo-title{font-size:14px;font-weight:600;color:#111}.logo-sub{font-size:10px;color:#666}@media (prefers-color-scheme: dark){.logo-title{color:#e8e8e8}.logo-sub{color:#888}}.topbar-right{display:flex;align-items:center;gap:10px}.live-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.live-label{font-size:11px;color:#888}.clock{font-size:12px;color:#999;font-variant-numeric:tabular-nums}.metrics-row{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:.5px solid rgba(0,0,0,.1);flex-shrink:0;background:#fff}@media (prefers-color-scheme: dark){.metrics-row{background:#161a16;border-color:#ffffff14}}.metric-card{padding:10px 14px;border-right:.5px solid rgba(0,0,0,.08)}.metric-card:last-child{border-right:none}@media (prefers-color-scheme: dark){.metric-card{border-color:#ffffff12}}.metric-label{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:#888;margin-bottom:3px}.metric-val{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;color:#111}.metric-val--danger{color:#dc2626}@media (prefers-color-scheme: dark){.metric-val{color:#e8e8e8}}.metric-sub{font-size:10px;color:#888;margin-top:2px}.metric-badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;padding:2px 6px;border-radius:4px;margin-top:4px}.badge-up{background:#dcfce7;color:#166534}.badge-dn{background:#fee2e2;color:#991b1b}.badge-warn{background:#fef9c3;color:#854d0e}.body{display:grid;grid-template-columns:1fr 270px;flex:1;overflow:hidden}.main{display:flex;flex-direction:column;overflow:hidden;border-right:.5px solid rgba(0,0,0,.1)}@media (prefers-color-scheme: dark){.main{border-color:#ffffff14}}.filter-bar{display:flex;gap:4px;padding:7px 12px;border-bottom:.5px solid rgba(0,0,0,.08);flex-shrink:0;background:#fff;flex-wrap:wrap}@media (prefers-color-scheme: dark){.filter-bar{background:#161a16;border-color:#ffffff12}}.filter-btn{font-size:10px;padding:3px 9px;border-radius:4px;border:.5px solid rgba(0,0,0,.15);background:transparent;cursor:pointer;color:#555;transition:all .12s}.filter-btn:hover{background:#0000000a}.filter-btn.active{background:#1a6b3a;color:#fff;border-color:#1a6b3a}@media (prefers-color-scheme: dark){.filter-btn{color:#aaa;border-color:#ffffff1f}.filter-btn:hover{background:#ffffff0f}}.map-section{position:relative;flex:1;overflow:hidden;background:#eef3ee;min-height:200px}@media (prefers-color-scheme: dark){.map-section{background:#161a16}}.map-legend{position:absolute;bottom:10px;left:10px;background:#fff;border:.5px solid rgba(0,0,0,.1);border-radius:6px;padding:6px 10px;display:flex;flex-direction:column;gap:4px}@media (prefers-color-scheme: dark){.map-legend{background:#1e231e;border-color:#ffffff14}}.legend-item{display:flex;align-items:center;gap:6px;font-size:10px;color:#666}.legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.chart-section{padding:10px 14px 12px;border-top:.5px solid rgba(0,0,0,.08);background:#fff;flex-shrink:0}@media (prefers-color-scheme: dark){.chart-section{background:#161a16;border-color:#ffffff12}}.section-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#888;margin-bottom:8px}.sidebar{display:flex;flex-direction:column;overflow:hidden;background:#fff}@media (prefers-color-scheme: dark){.sidebar{background:#161a16}}.sidebar-header{padding:10px 14px;border-bottom:.5px solid rgba(0,0,0,.08);flex-shrink:0}@media (prefers-color-scheme: dark){.sidebar-header{border-color:#ffffff12}}.sidebar-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#888}.gate-list{overflow-y:auto;flex:1}.gate-item{display:flex;align-items:center;gap:9px;padding:8px 14px;border-bottom:.5px solid rgba(0,0,0,.06);cursor:pointer;background:transparent;border-left:none;border-right:none;border-top:none;width:100%;text-align:left;transition:background .1s}.gate-item:hover{background:#00000008}.gate-item.active{background:#1a6b3a14}@media (prefers-color-scheme: dark){.gate-item{border-color:#ffffff0d}.gate-item:hover{background:#ffffff0a}.gate-item.active{background:#1a6b3a24}}.gate-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.gate-info{flex:1;min-width:0;display:flex;flex-direction:column}.gate-name{font-size:11px;font-weight:500;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gate-ruas{font-size:10px;color:#888}.gate-vol{font-size:11px;font-weight:500;font-variant-numeric:tabular-nums;color:#333;flex-shrink:0}@media (prefers-color-scheme: dark){.gate-name{color:#e0e0e0}.gate-ruas{color:#666}.gate-vol{color:#bbb}}.detail-panel{padding:12px 14px;border-top:.5px solid rgba(0,0,0,.08);flex-shrink:0}@media (prefers-color-scheme: dark){.detail-panel{border-color:#ffffff12}}.detail-panel--empty{font-size:11px;color:#aaa}.detail-ruas-badge{display:inline-block;font-size:10px;padding:2px 7px;border-radius:4px;margin-bottom:5px;font-weight:500}.detail-name{font-size:13px;font-weight:600;color:#111;margin-bottom:5px}@media (prefers-color-scheme: dark){.detail-name{color:#e8e8e8}}.status-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:2px 8px;border-radius:20px;margin-bottom:10px}.status-chip--lancar{background:#dcfce7;color:#166534}.status-chip--padat{background:#fef9c3;color:#854d0e}.status-chip--macet{background:#fee2e2;color:#991b1b}.status-chip__dot{width:6px;height:6px;border-radius:50%}.detail-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:10px}.detail-stat{background:#0000000a;border-radius:6px;padding:7px 9px}@media (prefers-color-scheme: dark){.detail-stat{background:#ffffff0d}}.detail-stat__label{font-size:10px;color:#888}.detail-stat__val{font-size:15px;font-weight:600;color:#111;font-variant-numeric:tabular-nums}.detail-stat__unit{font-size:9px;color:#aaa}@media (prefers-color-scheme: dark){.detail-stat__val{color:#e8e8e8}}.detail-density-label{font-size:10px;color:#888;margin-bottom:4px}.detail-density-label strong{color:#333}@media (prefers-color-scheme: dark){.detail-density-label strong{color:#ccc}}.progress-bar{height:5px;background:#00000014;border-radius:3px;overflow:hidden}@media (prefers-color-scheme: dark){.progress-bar{background:#ffffff1a}}.progress-bar__fill{height:100%;border-radius:3px;transition:width .5s ease}.donut-section{padding:10px 14px 12px;border-top:.5px solid rgba(0,0,0,.08);flex-shrink:0}@media (prefers-color-scheme: dark){.donut-section{border-color:#ffffff12}}.donut-legend{display:flex;flex-wrap:wrap;gap:5px 10px;margin-bottom:8px}.donut-legend__item{display:flex;align-items:center;gap:4px;font-size:10px;color:#777}.donut-legend__swatch{width:8px;height:8px;border-radius:2px;flex-shrink:0}