:root{--bg:#08111f;--surface:#111d2d;--line:#2a3a50;--text:#f4f7fb;--muted:#a8b5c7;--green:#39d98a;--amber:#f5b942;--red:#ff6b6b}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}body{overflow:hidden}.app-container{height:100dvh;max-width:1080px;margin:auto;padding:clamp(10px,2vw,24px);display:flex;flex-direction:column;gap:clamp(6px,1.2vw,14px)}.header{display:flex;align-items:center;justify-content:space-between;gap:12px}.header h1{margin:0;color:var(--green);font-size:clamp(1.2rem,3vw,1.8rem);line-height:1.1}.header p{margin:3px 0 0;color:var(--muted);font-size:clamp(.7rem,1.5vw,.85rem)}.admin-button{min-height:40px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);padding:8px 11px;font-weight:700;cursor:pointer}.location-row,.flow-row,.public-summary,.footer{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:clamp(.68rem,1.5vw,.82rem)}.connection-pill{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:99px;padding:3px 8px}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#718096}.dot-green{background:var(--green);box-shadow:0 0 7px var(--green)}.dot-red{background:var(--red)}.dot-yellow{background:var(--amber)}.video-section{min-height:0;background:#000;border:1px solid var(--line);border-radius:12px;overflow:hidden}.video-header{height:32px;padding:0 10px;display:flex;align-items:center;justify-content:space-between;background:var(--surface);font-size:clamp(.7rem,1.5vw,.82rem)}#videoBadge{font-size:.65rem;color:var(--green);font-weight:800}.video-wrapper{position:relative;width:100%;aspect-ratio:16/9;max-height:min(47dvh,560px)}.video-wrapper iframe{width:100%;height:100%;border:0}.video-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;background:#0b1422e8;color:#fff;font-size:.8rem}.spinner{width:20px;height:20px;border:3px solid #ffffff44;border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.status-card{padding:clamp(8px,1.5vw,14px);border:1px solid var(--line);border-radius:12px;background:var(--surface)}.status-card.lancar{border-color:var(--green);background:#0c3028}.status-card.sederhana{border-color:var(--amber);background:#3b2c0d}.status-card.sesak{border-color:var(--red);background:#401b22}.status-line{display:flex;align-items:center;justify-content:space-between;gap:8px}.status-text{font-size:clamp(1.05rem,3vw,1.5rem);font-weight:900}.vehicle-count{font-size:clamp(1.4rem,4vw,2rem);line-height:1}.label{color:var(--muted);font-size:.72rem}.score-pill{color:var(--muted);font-size:.72rem}.score-pill b{color:#fff}.breakdown-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.breakdown-card{min-width:0;padding:clamp(7px,1.4vw,12px) 4px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:9px}.breakdown-card span{display:block;font-size:clamp(1rem,2.5vw,1.35rem)}.breakdown-card b{display:block;font-size:clamp(1rem,2.5vw,1.35rem)}.breakdown-card small{display:block;color:var(--muted);font-size:clamp(.6rem,1.4vw,.75rem)}.flow-row,.public-summary{padding:clamp(7px,1.4vw,11px) 10px;background:var(--surface);border:1px solid var(--line);border-radius:9px}.flow-row b,.public-summary b{color:#fff;font-size:1rem}.public-summary small{color:var(--muted)}.footer{justify-content:center;flex-wrap:wrap;font-size:.66rem}.footer b{color:#fff}.config-notice{padding:7px 10px;border-radius:8px;background:#49350b;color:#ffe7a3;font-size:.75rem;text-align:center}.admin-backdrop[hidden]{display:none}.admin-backdrop{position:fixed;inset:0;z-index:10;background:#0009;display:flex;justify-content:flex-end}.admin-panel{width:min(420px,100%);height:100%;overflow-y:auto;padding:24px;background:var(--surface);border-left:1px solid var(--line);position:relative}.admin-panel h2{margin-top:12px}.admin-panel p{color:var(--muted);font-size:.9rem}.admin-close{position:absolute;right:16px;top:12px;background:none;border:0;color:#fff;font-size:2rem;cursor:pointer}.admin-panel label{display:block;margin:20px 0 6px;font-size:.85rem}.admin-panel input{width:100%;padding:12px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:#fff}.admin-submit{margin-top:12px;width:100%;padding:12px;border:0;border-radius:8px;background:var(--green);font-weight:800}.admin-error{color:var(--red)!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:380px){.app-container{padding:8px;gap:5px}.video-wrapper{max-height:34dvh}.header p{display:none}.footer{font-size:.6rem}}@media(min-width:700px){.main-content{display:grid;grid-template-columns:1.35fr 1fr;gap:10px;align-items:center}.location-row{grid-column:1/-1}.video-section{grid-row:2/6}.status-card{grid-column:2}.breakdown-grid{grid-column:2}.flow-row,.public-summary{grid-column:2}.footer{margin-top:auto}}
:root{--mobile-fix:1}
@media(max-width:699px){.admin-button{position:fixed!important;top:8px!important;right:8px!important;z-index:20!important}.header{padding-right:88px!important}.breakdown-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}.breakdown-card{width:auto!important}}
@media(max-width:699px){.header>div{min-width:0!important}.admin-button{display:block!important;flex:0 0 auto!important;white-space:nowrap}.main-content{min-width:0!important;overflow:hidden!important}.video-wrapper{height:min(34dvh,220px)!important;max-height:none!important;aspect-ratio:auto!important}.breakdown-grid{display:flex!important;min-width:0!important}.breakdown-card{flex:1 1 0!important;width:25%!important;min-width:0!important}.flow-row,.public-summary{min-width:0!important;white-space:nowrap}}
@media(max-width:380px){.app-container{padding:8px;gap:5px}.video-wrapper{height:190px!important}.header p{display:none}.footer{font-size:.6rem}}