@font-face{font-family:IBM Plex Thai;src:url(/fonts/IBMPlexSansThai-Regular.ttf) format("truetype");font-weight:400;font-display:swap}@font-face{font-family:IBM Plex Thai;src:url(/fonts/IBMPlexSansThai-Medium.ttf) format("truetype");font-weight:500 700;font-display:swap}:root{--bg-0: #0f1013;--bg-1: #16181d;--bg-2: #1d2026;--bg-3: #262a31;--line: #2b2f37;--line-strong: #3b404a;--text: #ecebe6;--text-2: #a9a8a1;--text-3: #73736e;--accent: #e2714e;--accent-hover: #ef8663;--accent-ink: #1a0d08;--accent-soft: rgba(226, 113, 78, .16);--live: #4fbf7a;--warn: #e3b24a;--danger: #e25c5c;--idle: #6b7079;--focus: #f6c453;--overlay: rgba(8, 9, 11, .72);--lh-thai: 1.65;--lh-ui: 1.45;--s1: 4px;--s2: 8px;--s3: 12px;--s4: 16px;--s5: 24px;--r-sm: 6px;--r: 10px;--r-lg: 14px;--control-h: 40px;--t: .15s ease;--rail-w: 300px;color-scheme:dark}@media(pointer:coarse){:root{--control-h: 44px}}body[data-tv]{--control-h: 52px;font-size:20px}@media(min-width:1280px){:root{--rail-w: 360px}}*,*:before,*:after{box-sizing:border-box}html{font-size:clamp(14px,.35vw + 10px,18px);-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg-0);color:var(--text);font-family:IBM Plex Thai,Tahoma,system-ui,sans-serif;font-size:1rem;line-height:var(--lh-thai);font-synthesis:none;text-rendering:optimizeLegibility;overflow-x:hidden}h1,h2,h3{margin:0;font-weight:500;line-height:1.35}h1{font-size:1.6rem}h2{font-size:1.15rem}h3{font-size:1rem;color:var(--text-2)}p{margin:0}small,.muted{color:var(--text-2);font-size:.88rem}.center{text-align:center}code{font:.85rem ui-monospace,Consolas,monospace;background:var(--bg-3);padding:2px 6px;border-radius:var(--r-sm);overflow-wrap:anywhere}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}body[data-tv] :focus-visible{outline-width:4px;box-shadow:0 0 0 7px #f6c45347}.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}button,input,select{font:inherit;line-height:var(--lh-ui);color:inherit}button{cursor:pointer;border:0;background:none;padding:0}button:disabled{cursor:default;opacity:.45}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--control-h);padding:0 var(--s4);border-radius:var(--r);background:var(--bg-3);border:1px solid var(--line-strong);font-weight:500;transition:background var(--t),border-color var(--t)}.btn:hover:not(:disabled){background:var(--line-strong)}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn.primary:hover:not(:disabled){background:var(--accent-hover)}.btn.danger{border-color:var(--danger);color:var(--danger)}.btn.small{min-height:calc(var(--control-h) - 8px);padding:0 var(--s3);font-size:.92rem}.btn.muted{color:var(--text-2)}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--control-h);height:var(--control-h);border-radius:var(--r);color:var(--text-2);flex:none;transition:background var(--t),color var(--t)}.icon-btn:hover:not(:disabled){background:var(--bg-3);color:var(--text)}.text-btn{color:var(--accent);font-weight:500;padding:var(--s1) var(--s2);border-radius:var(--r-sm)}.text-btn:hover{background:var(--accent-soft)}input:not([type=checkbox]):not([type=file]),select{min-height:var(--control-h);padding:0 var(--s3);border-radius:var(--r);background:var(--bg-2);border:1px solid var(--line-strong);width:100%;min-width:0}input::placeholder{color:var(--text-3)}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a9a8a1' stroke-width='1.8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}select option{background:var(--bg-2)}input[type=checkbox]{width:20px;height:20px;margin:0;accent-color:var(--accent);flex:none}label{display:flex;flex-direction:column;gap:var(--s1);font-size:.92rem;color:var(--text-2)}label.check{flex-direction:row;align-items:center;gap:var(--s2);color:var(--text)}.form{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:end}.form>.notice,.form>details,.form>.row,.form>small{grid-column:1 / -1}.stack{display:flex;flex-direction:column;gap:var(--s3)}.row{display:flex;align-items:center;gap:var(--s2);min-width:0}.row.wrap{flex-wrap:wrap}.row.between{justify-content:space-between}.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3) var(--s4)}.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;background:var(--bg-3);color:var(--text-2);font-size:.8rem;font-weight:500;white-space:nowrap}.badge.live{background:#4fbf7a26;color:var(--live)}.badge.warn{background:#e3b24a26;color:var(--warn)}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--idle);margin:0 4px 1px 0}.dot.online{background:var(--live)}.dot.pending,.dot.auth_expired,.dot.needs_credentials{background:var(--warn)}.dot.error,.dot.offline{background:var(--danger)}.form-error{color:var(--danger);font-size:.9rem}.notice{display:flex;gap:var(--s2);padding:var(--s3);border-radius:var(--r);background:var(--bg-3);border:1px solid var(--line-strong);font-size:.92rem}.notice.warning{border-color:#e3b24a80;color:var(--warn)}.notice svg{flex:none;margin-top:3px}details{border:1px solid var(--line);border-radius:var(--r);padding:var(--s2) var(--s3)}details[open]{padding-bottom:var(--s3)}summary{cursor:pointer;font-weight:500;padding:var(--s1) 0;list-style:none}summary:before{content:"›";display:inline-block;width:1em;transition:transform var(--t);color:var(--text-2)}details[open] summary:before{transform:rotate(90deg)}details>.form,details>.stack{margin-top:var(--s3)}.tabs{display:flex;gap:var(--s1);border-bottom:1px solid var(--line);margin-bottom:var(--s4)}.tabs button{padding:var(--s2) var(--s3);color:var(--text-2);border-bottom:2px solid transparent;font-weight:500}.tabs button[aria-selected=true]{color:var(--text);border-bottom-color:var(--accent)}.events{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}.events li{display:flex;justify-content:space-between;gap:var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--line);font-size:.92rem}.captcha{max-width:100%;border-radius:var(--r-sm);background:#fff}.brand{display:inline-flex;align-items:center;gap:var(--s2);font-weight:500;letter-spacing:0}.brand-symbol{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:8px;background:var(--accent);color:var(--accent-ink)}.app{display:grid;grid-template-rows:auto 1fr;height:100dvh}.topbar{display:flex;align-items:center;gap:var(--s3);height:48px;padding:0 var(--s4);background:var(--bg-1);border-bottom:1px solid var(--line)}.spacer{flex:1}.clock{font-variant-numeric:tabular-nums;color:var(--text-2)}@media(max-width:639px){.clock,.topbar .badge.live,.topbar .badge:not(.warn){display:none}}.workspace{display:grid;grid-template-columns:minmax(0,1fr);min-height:0;overflow:auto}@media(min-width:1000px){.workspace{grid-template-columns:minmax(0,1fr) var(--rail-w);overflow:hidden}}.monitor{display:flex;flex-direction:column;min-height:0;min-width:0;padding:var(--s3);gap:var(--s3);outline:none}.monitor.is-expanded{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;background:var(--bg-0)}.monitor-bar{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}.segmented{display:inline-flex;background:var(--bg-2);border:1px solid var(--line-strong);border-radius:var(--r);padding:3px;gap:2px}.segmented button{min-height:calc(var(--control-h) - 8px);padding:0 var(--s3);border-radius:calc(var(--r) - 3px);color:var(--text-2);font-weight:500;white-space:nowrap;transition:background var(--t),color var(--t)}.segmented button[aria-checked=true]{background:var(--accent);color:var(--accent-ink)}.pager{display:inline-flex;align-items:center;gap:var(--s1);margin-left:auto}.monitor-bar>.icon-btn{margin-left:calc(-1 * var(--s1))}.pager-label{min-width:7ch;text-align:center;font-variant-numeric:tabular-nums}.interval{display:inline-flex;flex-direction:row;align-items:center;gap:var(--s2);margin-left:var(--s2);color:var(--text-2);font-size:.9rem}.interval [role=timer]{min-width:4ch;text-align:right;font-variant-numeric:tabular-nums}.interval select{width:auto;min-height:calc(var(--control-h) - 8px)}.grid{flex:1;min-height:0;display:grid;gap:var(--s3)}.grid.four,.grid.one{grid-template-columns:1fr}@media(orientation:landscape)and (min-width:640px)and (max-width:999px){.grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:1000px){.grid.four{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}.grid.one{grid-template-rows:minmax(0,1fr)}}.tile{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:border-color var(--t)}.tile:focus-within{border-color:var(--focus);box-shadow:inset 0 0 0 2px var(--focus)}.tile.empty{align-items:center;justify-content:center;color:var(--text-3);border-style:dashed;min-height:120px}.tile-video{position:relative;flex:1;min-height:0;background:#000;aspect-ratio:16 / 9}@media(min-width:1000px){.tile-video{aspect-ratio:auto}}.player{position:absolute;top:0;right:0;bottom:0;left:0}.player video{width:100%;height:100%;object-fit:contain;display:block;background:#000}.player-problem video{opacity:0}.player-state{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);padding:var(--s4);text-align:center;color:var(--text-2);background:#000}.player-state strong{color:var(--text)}.player-state p{font-size:.9rem;max-width:34ch}.player-state svg{color:var(--text-3)}.player-state .btn{margin-top:var(--s2)}.transport{position:absolute;right:var(--s2);top:var(--s2);z-index:2;font-size:.7rem;color:var(--text-3);letter-spacing:0}.tile-open{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;border-radius:0}.pill{position:absolute;left:var(--s2);top:var(--s2);z-index:3;display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;background:#0000008c;color:var(--text-2);font-size:.78rem;font-weight:500;pointer-events:none}.pill i{width:7px;height:7px;border-radius:50%;background:var(--idle)}.pill.live{color:var(--text)}.pill.live i{background:var(--live);box-shadow:0 0 0 3px #4fbf7a40}.tile-audio{position:absolute;right:var(--s2);bottom:var(--s2);z-index:3;width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#0000008c;color:var(--text)}.tile-audio[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}.tile-caption{display:flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s2) var(--s1) var(--s3);min-height:36px}.tile-caption .model{color:var(--text-3);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inline-camera-name{flex:1;min-width:0;position:relative}.inline-camera-name input:not([type=checkbox]),.readonly-camera-name{display:block;width:calc(100% + var(--s2));min-height:30px;padding:0 var(--s2);margin-left:calc(-1 * var(--s2));border:1px solid transparent;border-radius:var(--r-sm);background:transparent;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inline-camera-name input:not([type=checkbox]):hover{border-color:var(--line-strong)}.inline-camera-name input:not([type=checkbox]):focus{background:var(--bg-2);border-color:var(--line-strong)}.name-feedback,.name-error{display:block;font-size:.75rem;color:var(--text-3)}.name-error{color:var(--danger)}.rail{display:flex;flex-direction:column;min-height:0;background:var(--bg-1);border-top:1px solid var(--line)}@media(min-width:1000px){.rail{border-top:0;border-left:1px solid var(--line)}}.rail-toggle{display:none;width:100%;min-height:var(--control-h);padding:0 var(--s4);text-align:left;font-weight:500;position:sticky;top:0;background:var(--bg-1);z-index:2}.rail-toggle:after{content:"›";float:right;color:var(--text-2)}.rail-body{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s3);overflow-y:auto;min-height:0}@media(max-width:999px){.rail-toggle{display:block}.rail:not(.open) .rail-body{display:none}}.search{flex:1;flex-direction:row;align-items:center;position:relative}.search svg{position:absolute;left:10px;color:var(--text-3);pointer-events:none}.search input{padding-left:32px}.rail .row select{width:auto;max-width:40%}.picker-list{display:flex;flex-direction:column;gap:2px}.picker-page{display:flex;align-items:center;justify-content:space-between;padding:var(--s2) var(--s1) var(--s1);margin-top:var(--s2);color:var(--text-3);font-size:.8rem;font-weight:500;border-bottom:1px solid var(--line)}.picker-row{display:flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s2);border-radius:var(--r);transition:background var(--t)}.picker-row:hover{background:var(--bg-2)}.picker-row.on-screen{background:var(--accent-soft)}.picker-row.dragging{opacity:.5}.picker-body{flex:1;min-width:0;display:flex;flex-direction:column}.picker-body small{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.picker-row .icon-btn{width:28px;height:28px;border-radius:var(--r-sm)}.picker-row .grip{cursor:grab;color:var(--text-3)}@media(max-width:1279px){.picker-row .grip{display:none}}.detail{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s3);min-height:0;overflow-y:auto;background:var(--bg-1);border-left:1px solid var(--line);outline:none}@media(max-width:999px){.detail{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;border:0}}.detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2)}.detail-head h2{overflow-wrap:anywhere}.detail-video{position:relative;aspect-ratio:16 / 9;background:#000;border-radius:var(--r);overflow:hidden;flex:none}.detail .row select{width:auto}.detail .status{margin-left:auto;font-size:.88rem;color:var(--text-2);white-space:nowrap}.detail-edit .form{grid-template-columns:1fr}.ptz{display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(3,56px);gap:var(--s1);justify-content:center;margin:var(--s2) auto 0}.ptz button{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r);background:var(--bg-3);border:1px solid var(--line-strong);touch-action:none;-webkit-user-select:none;user-select:none}.ptz button.pressed{background:var(--accent);color:var(--accent-ink)}.ptz-up{grid-area:1 / 2}.ptz-left{grid-area:2 / 1}.ptz-right{grid-area:2 / 3}.ptz-down{grid-area:3 / 2}.ptz-center{grid-area:2 / 2;border-radius:50%!important}.ptz-center i{width:14px;height:14px;border-radius:50%;background:var(--text-2)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;background:var(--overlay);display:flex;align-items:center;justify-content:center;padding:var(--s4)}.modal{width:min(100%,520px);max-height:calc(100dvh - 2 * var(--s4));display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:0 12px 32px #00000073;outline:none}.modal.wide{width:min(100%,760px)}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:var(--s3) var(--s3) var(--s3) var(--s4);border-bottom:1px solid var(--line)}.modal-body{padding:var(--s4);overflow-y:auto;min-height:0}.toast{position:fixed;left:50%;bottom:calc(var(--s4) + env(safe-area-inset-bottom));transform:translate(-50%);z-index:50;display:flex;align-items:center;gap:var(--s2);max-width:min(92vw,520px);padding:var(--s2) var(--s2) var(--s2) var(--s4);border-radius:var(--r);background:var(--bg-3);border:1px solid var(--line-strong);box-shadow:0 12px 32px #00000073}.toast.ok svg:first-child{color:var(--live)}.toast.error svg:first-child{color:var(--danger)}.toast .icon-btn{width:32px;height:32px}.auth{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:var(--s4)}.auth-card{width:min(100%,420px);display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5);background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-lg)}.auth-card.center{align-items:center}.auth-card .badge{align-self:flex-start}.auth-card h1{margin-bottom:var(--s2)}.share-cameras{max-height:220px;overflow:auto;gap:var(--s1)}.share-cameras label{cursor:pointer}.share-cameras input[type=checkbox]{width:18px;height:18px;flex:none}.share-link{display:block;padding:var(--s2);word-break:break-all;-webkit-user-select:all;user-select:all;background:var(--bg-2);border-radius:var(--r)}.lite .topbar strong{white-space:nowrap}.lite .topbar .clock{display:inline}.lite-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3);padding:var(--s4);min-height:0;overflow:auto;align-content:start}.lite-grid.one{align-content:stretch}.lite-grid .tile-video{cursor:pointer}.lite-grid .tile-caption .name{font-weight:500}.lite-empty{text-align:center;padding:var(--s5)}@media(orientation:landscape)and (min-width:640px),(min-width:700px){.lite-grid:not(.one){grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:1000px){.lite-grid.one .tile-video{aspect-ratio:auto}}body[data-tv] .tile-caption{min-height:44px}body[data-tv] .pill{font-size:.9rem}