:root{color:#eaf5f1;font-synthesis:none;text-rendering:optimizelegibility;background:#07100f;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 10% 5%,#123c32 0,#0000 32rem),#07100f;min-width:320px;min-height:100vh;margin:0}button{font:inherit}.login-shell{place-items:center;min-height:100vh;padding:24px;display:grid}.login-card{background:#0a1815f5;border:1px solid #23463d;border-radius:22px;width:min(440px,100%);padding:clamp(24px,6vw,38px);box-shadow:0 26px 80px #00000061}.login-card h1{font-size:clamp(30px,7vw,43px)}.login-lead,.login-security{color:#9fb5ae}.login-card form{gap:9px;margin-top:26px;display:grid}.login-card label{color:#c9d9d4;margin-top:8px;font-size:13px;font-weight:700}.login-card input{color:#f1faf7;background:#07110f;border:1px solid #315b50;border-radius:11px;outline:none;width:100%;padding:12px 13px}.login-card input:focus{border-color:#58d1ae;box-shadow:0 0 0 3px #58d1ae29}.login-card input:disabled{opacity:.65}.login-submit{color:#04110d;cursor:pointer;background:#67d7b6;border:1px solid #48c7a4;border-radius:11px;margin-top:13px;padding:12px 16px;font-weight:800}.login-submit:hover:not(:disabled){background:#8de6cc}.login-submit:disabled{cursor:wait;opacity:.6}.login-error,.session-error{color:#faa;margin:8px 0 0}.login-security{margin:18px 0 0;font-size:12px}.login-checking{text-align:center}.app-shell{width:min(1180px,100% - 32px);margin:0 auto;padding:34px 0 56px}.app-header,.viewer-header,.viewer-footer{justify-content:space-between;align-items:center;gap:24px;display:flex}.app-header{margin-bottom:24px}.eyebrow,.section-label{color:#67d7b6;letter-spacing:.13em;text-transform:uppercase;margin:0 0 8px;font-size:12px;font-weight:800}h1,h2,p{margin-top:0}h1{letter-spacing:-.055em;margin-bottom:10px;font-size:clamp(32px,6vw,58px)}.lead{color:#a7bdb6;max-width:700px;margin-bottom:0}.vite-badge{color:#c8c0ff;background:#17142f;border:1px solid #6457b5;border-radius:999px;flex:none;padding:9px 13px}.session-summary{align-items:center;gap:12px;display:flex}.session-summary div{text-align:right;gap:3px;display:grid}.session-summary span{color:#9fb5ae;font-size:12px}.session-summary button{color:#d6e6e1;cursor:pointer;background:#10231f;border:1px solid #315b50;border-radius:10px;padding:9px 12px}.session-summary button:hover{background:#6f3030;border-color:#d28080}.session-error{background:#5c222273;border:1px solid #7e3b3b;border-radius:10px;margin:-10px 0 18px;padding:10px 12px}.viewer{background:#0a1815f0;border:1px solid #23463d;border-radius:22px;overflow:hidden;box-shadow:0 26px 80px #00000052}.viewer-header{padding:22px}.viewer-header h2{margin-bottom:7px;font-size:26px}.viewer-header p:last-child{color:#9ab0aa;margin-bottom:0}.mode-switcher{gap:8px;display:flex}.mode-switcher button,.preview-toggle{color:#d6e6e1;cursor:pointer;background:#10231f;border:1px solid #315b50;border-radius:11px;padding:10px 14px}.mode-switcher button:hover,.mode-switcher button.active,.preview-toggle:hover{color:#fff;background:#1c735e;border-color:#48c7a4}.video-stage{aspect-ratio:16/9;background:#030706;min-height:330px}.video-stage iframe{border:0;width:100%;height:100%;display:block}.video-placeholder{text-align:center;color:#aac0ba;place-content:center;justify-items:center;height:100%;padding:30px;display:grid}.video-placeholder strong{color:#eef8f5;margin:16px 0 8px;font-size:22px}.video-placeholder p{max-width:560px;margin-bottom:0}.vue-mark{color:#6ee7b1;background:#0f2a22;border:1px solid #42b883;border-radius:20px;place-items:center;width:70px;height:70px;font-size:34px;font-weight:900;display:grid}.viewer-footer{color:#a8bdb7;padding:15px 22px;font-size:14px}.status-dot{background:#53dbaa;border-radius:50%;width:9px;height:9px;margin-right:7px;display:inline-block;box-shadow:0 0 14px #53dbaa}.api-state{background:#0a1815f0;border:1px solid #23463d;border-radius:18px;padding:30px}.api-state strong{font-size:22px}.api-state p{color:#9fb5ae;margin:8px 0 18px}.api-state-error{border-color:#7e3b3b}.dashboard-toolbar{background:#0a1815f0;border:1px solid #23463d;border-radius:16px;justify-content:space-between;align-items:center;gap:18px;margin-bottom:16px;padding:12px 14px;display:flex}.grid-controls,.toolbar-actions,.grid-size-buttons{align-items:center;gap:10px;display:flex}.grid-controls>span{color:#9fb5ae;font-size:13px}.grid-size-buttons button,.back-button,.action-button{color:#d6e6e1;cursor:pointer;background:#10231f;border:1px solid #315b50;border-radius:9px;padding:8px 11px}.grid-size-buttons button:hover,.grid-size-buttons button.active,.back-button:hover,.action-button:hover{color:#fff;background:#1c735e;border-color:#48c7a4}.camera-grid{gap:12px;display:grid}.camera-grid-1{grid-template-columns:1fr}.camera-grid-4{grid-template-columns:repeat(2,1fr)}.camera-grid-6,.camera-grid-9{grid-template-columns:repeat(3,1fr)}.camera-grid-16{grid-template-columns:repeat(4,1fr)}.camera-tile{background:#07110f;border:1px solid #23463d;border-radius:15px;min-width:0;overflow:hidden;box-shadow:0 14px 36px #00000038}.camera-tile:hover{border-color:#48c7a4}.camera-tile-action{width:100%;color:inherit;text-align:left;background:0 0;display:block}.camera-tile-video{aspect-ratio:16/9;background:#020504;position:relative;overflow:hidden}.camera-tile-video iframe{pointer-events:none;border:0;width:100%;height:100%;display:block;position:absolute;inset:0}.camera-grid-1 .camera-tile-video iframe{pointer-events:auto}.camera-tile-placeholder{color:#7e938d;place-content:center;justify-items:center;gap:8px;height:100%;display:grid}.camera-tile-placeholder>span{font-size:30px}.camera-tile-placeholder strong{font-size:13px}.camera-open-overlay{z-index:1;cursor:pointer;background:0 0;border:0;width:100%;position:absolute;inset:0}.camera-open-overlay:focus-visible{outline-offset:-3px;outline:3px solid #67d7b6}.camera-tile-footer{width:100%;color:inherit;cursor:pointer;text-align:left;background:0 0;border:0;justify-content:space-between;align-items:center;gap:12px;padding:11px 13px;display:flex}.camera-tile-footer div{gap:3px;min-width:0;display:grid}.camera-tile-footer strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.camera-tile-footer div span,.camera-state{color:#8da39d;font-size:11px}.camera-state{flex:none}.camera-online .camera-state{color:#62d6b5}.camera-offline{border-color:#4e3030}.camera-offline .camera-state{color:#dc8585}.camera-disabled{opacity:.68}.camera-grid-1 .camera-tile{border-radius:22px}.camera-grid-1 .camera-tile-footer{padding:15px 18px}.camera-grid-1 .camera-tile-footer strong{font-size:18px}.grid-pagination{justify-content:space-between;align-items:center;gap:16px;margin:12px 2px 0;display:flex}.grid-note{color:#8da39d;margin:0;font-size:13px}.grid-pagination nav{color:#a7bdb6;align-items:center;gap:10px;font-size:13px;display:flex}.grid-pagination button{color:#d6e6e1;cursor:pointer;background:#10231f;border:1px solid #315b50;border-radius:9px;padding:7px 10px}.grid-pagination button:disabled{opacity:.45;cursor:not-allowed}.explanation-grid{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px;display:grid}.explanation-grid article{background:#0a1714b3;border:1px solid #1f3933;border-radius:17px;padding:20px}.explanation-grid span{color:#58c9aa;font-size:12px;font-weight:800}.explanation-grid h2{margin:8px 0}.explanation-grid p{color:#9fb5ae;margin-bottom:0}@media (width<=760px){.app-shell{width:min(100% - 20px,1180px);padding-top:22px}.app-header,.viewer-header,.viewer-footer{flex-direction:column;align-items:flex-start}.session-summary{justify-content:space-between;width:100%}.session-summary div{text-align:left}.video-stage{min-height:230px}.explanation-grid{grid-template-columns:1fr}.dashboard-toolbar,.grid-controls,.toolbar-actions{flex-direction:column;align-items:stretch}.grid-size-buttons{grid-template-columns:repeat(5,1fr);display:grid}.camera-grid-6,.camera-grid-9,.camera-grid-16{grid-template-columns:repeat(2,1fr)}.camera-tile-footer{flex-direction:column;align-items:flex-start}.grid-pagination{flex-direction:column;align-items:stretch}.grid-pagination nav{justify-content:space-between}}@media (width<=480px){.camera-grid-4,.camera-grid-6,.camera-grid-9,.camera-grid-16{grid-template-columns:1fr}}