:root{color-scheme:dark;--bg:#101412;--line:#3c4940;--muted:#a6b7a8;--lime:#dbf99c}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#eff5ed;font:13px/1.4 'Segoe UI',Arial,sans-serif}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,.tile:focus-visible{outline:3px solid var(--lime);outline-offset:-3px}.toolbar{height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px;background:#172019;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:9px;font-size:18px;letter-spacing:-.5px;white-space:nowrap}.brand>span{display:grid;place-items:center;width:28px;height:28px;color:#233518;background:var(--lime);border-radius:8px}.brand b{font-weight:600}.brand em{color:var(--lime);font-style:normal}.tip{font-size:11px;color:var(--muted)}.tools{display:flex;gap:9px}.tools button{min-height:34px;border:1px solid #4f6247;color:#d7eacb;background:#263221;border-radius:7px;padding:7px 11px;white-space:nowrap}.tools button[hidden]{display:none}#monitor{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;height:calc(100dvh - 88px);min-height:320px;gap:2px;background:var(--line);padding:2px}.tile{position:relative;min-width:0;min-height:0;overflow:hidden;background:#050807;cursor:pointer;display:flex;flex-direction:column}.tile-head{height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 11px;background:#050805;font:12px Consolas,monospace;gap:10px}.tile-head strong{font-weight:600}.state{display:flex;align-items:center;gap:6px;color:#b5bea9;font:10px 'Segoe UI',Arial,sans-serif}.state i{width:5px;height:5px;border-radius:50%;background:#b8a372}.state[data-state=live]{color:var(--lime)}.state[data-state=live] i{background:var(--lime)}.state[data-state=offline]{color:#ffc2aa}.state[data-state=offline] i{background:#ffc2aa}.stage{flex:1;min-height:0;position:relative;background:#000}.stage video{display:block;width:100%;height:100%;object-fit:contain;background:#000}.cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:18px;text-align:center;background:radial-gradient(ellipse,#1e2d21,#090d0a);pointer-events:none}.cover[hidden]{display:none}.cover b{font-weight:500;font-size:16px;color:#c9d9c1}.cover p{color:#8ea18b;font-size:11px;max-width:260px;margin:8px 0}.tile-mark{position:absolute;right:10px;bottom:8px;border-radius:5px;background:#101910a8;color:#d9e8d1;padding:4px 7px;font-size:15px;pointer-events:none}.tile:hover{box-shadow:inset 0 0 0 2px #dbf99c77}footer{height:30px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 15px;color:#899b85;font-size:10px;background:#172019}body.focused #monitor{display:block;position:fixed;inset:58px 0 0;height:calc(100dvh - 58px);padding:0;min-height:0;z-index:20}body.focused .tile{display:none}body.focused .tile.selected{display:flex;height:100%;width:100%;cursor:default}body.focused footer{display:none}body.focused .toolbar{position:fixed;inset:0 0 auto;z-index:30}body.focused .tip{display:none}@media(max-width:650px){.toolbar{padding:0 10px;height:54px}.brand{font-size:16px}.tip{display:none}.tools button{font-size:11px;min-height:36px;padding:7px 9px}.tools{gap:6px}#monitor{height:calc(100dvh - 84px);min-height:260px}.tile-head{height:28px;padding:0 7px;font-size:11px}.state{font-size:9px;gap:4px}.cover{padding:10px}.cover b{font-size:12px}.cover p{font-size:10px}.tile-mark{right:6px;bottom:5px;font-size:13px}footer{font-size:8px;padding:0 8px}body.focused #monitor{top:54px;height:calc(100dvh - 54px)}}

.pertamina-logo{display:block;width:38px;height:32px;object-fit:contain;background:#fff;border-radius:5px;padding:3px;flex-shrink:0}@media(max-width:650px){.brand{font-size:15px;gap:7px}.pertamina-logo{width:31px;height:28px;padding:2px}}