:root{color:#1c2329;background:#fff;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;--green: #075c38;--green-soft: #edf7f1;--charcoal: #1c2329;--muted: #657078;--border: #d9dde0;--offline: #788087}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}.login-shell{min-height:100vh;padding:24px;display:grid;place-items:center;background:#f5f8f6}.login-card{width:min(100%,420px);padding:38px;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:0 18px 60px #1d282e1a}.login-eyebrow{color:var(--green);font-size:.76rem;font-weight:750;letter-spacing:.13em}.login-card h1{margin:8px 0 10px;font-size:2rem;letter-spacing:-.04em}.login-card>p{margin:0 0 26px;color:var(--muted);line-height:1.5}.login-card label{display:block;margin-bottom:8px;font-size:.88rem;font-weight:650}.login-card input{width:100%;min-height:50px;padding:0 14px;border:1px solid #aeb5ba;border-radius:8px;font:inherit}.login-card input:focus{outline:3px solid rgba(7,92,56,.2);border-color:var(--green)}.login-card button{width:100%;min-height:50px;margin-top:16px;border:0;border-radius:8px;color:#fff;background:var(--green);font-weight:700;cursor:pointer}.login-card button:disabled{opacity:.65}.login-error{margin-top:10px;color:#91302a;font-size:.86rem}.login-private,.login-loading{color:var(--muted);font-size:.82rem}.login-private{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:8px}.login-private svg{width:17px;height:17px;fill:none;stroke:var(--green);stroke-width:1.8}button,video{font:inherit}button{-webkit-tap-highlight-color:transparent}.app-shell{width:min(1260px,calc(100% - 64px));min-height:100vh;margin:0 auto;padding:28px 0 34px;display:grid;grid-template-rows:auto 1fr auto}.topbar{min-height:54px;display:flex;align-items:flex-start;justify-content:space-between;gap:24px}.topbar h1{margin:0;font-size:clamp(1.75rem,3vw,2.2rem);line-height:1.12;letter-spacing:-.035em;font-weight:720}.status{min-height:36px;display:inline-flex;align-items:center;color:var(--green);font-size:1rem;font-weight:590;white-space:nowrap}.status-dot{width:10px;height:10px;margin-right:10px;border-radius:50%;background:currentColor}.status[data-status=connecting]{color:#856512}.status[data-status=connecting] .status-dot{animation:pulse 1.3s ease-in-out infinite}.status[data-status=offline]{color:var(--offline)}.viewer{align-self:center;padding:20px 0 30px}.video-shell{position:relative;width:100%;aspect-ratio:16 / 9;overflow:hidden;border:1px solid #cfd4d7;border-radius:13px;background:#f4f6f7;box-shadow:0 18px 50px #1d282e1f,0 3px 12px #1d282e14}.video-shell video{display:block;width:100%;height:100%;object-fit:contain;background:#101417}.video-shell:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;border:0;border-radius:0;background:#000}.video-shell:fullscreen video{object-fit:contain}.video-shell:not([data-state=live]) video{visibility:hidden}.timestamp{position:absolute;left:20px;bottom:18px;padding:6px 11px;border-radius:8px;color:#fff;background:#14191c9e;font-size:.94rem;font-weight:560;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.offline-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;color:var(--charcoal)}.offline-state>svg{width:56px;height:56px;margin-bottom:20px;color:#737c82;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}.offline-state h2{margin:0;font-size:clamp(1.25rem,3vw,1.75rem);line-height:1.2;letter-spacing:-.02em}.offline-state p{margin:10px 0 0;color:var(--muted);font-size:.98rem}.retry-button{min-width:132px;min-height:46px;margin-top:20px;padding:0 22px;border:1px solid var(--green);border-radius:8px;color:#fff;background:var(--green);font-size:.96rem;font-weight:650;cursor:pointer}.controls{display:flex;justify-content:center;gap:18px;margin-top:24px}.control-button{min-height:58px;padding:0 24px;display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid #9fa7ac;border-radius:8px;color:var(--charcoal);background:#fff;font-size:.96rem;font-weight:590;cursor:pointer;transition:border-color .16s ease,color .16s ease,background .16s ease,transform .16s ease}.control-button:hover{border-color:var(--green);color:var(--green);background:var(--green-soft)}.control-button:active{transform:translateY(1px)}.control-button[aria-pressed=true]{border-color:var(--green);color:var(--green)}.ptz-panel{width:min(520px,100%);margin:22px auto 0;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid var(--border);border-radius:12px;background:#fbfcfb}.ptz-panel h2{margin:0;font-size:1rem}.ptz-panel p{margin:5px 0 0;color:var(--muted);font-size:.84rem}.ptz-pad{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,38px)}.ptz-button{display:grid;place-items:center;border:1px solid #9fa7ac;color:var(--green);background:#fff;cursor:pointer}.ptz-button:hover:not(:disabled){border-color:var(--green);background:var(--green-soft)}.ptz-button:disabled{opacity:.45;cursor:wait}.ptz-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ptz-up{grid-column:2;grid-row:1;border-radius:8px 8px 3px 3px}.ptz-left{grid-column:1;grid-row:2;border-radius:8px 3px 3px 8px}.ptz-right{grid-column:3;grid-row:2;border-radius:3px 8px 8px 3px}.ptz-down{grid-column:2;grid-row:3;border-radius:3px 3px 8px 8px}.arrow-icon-up{transform:rotate(180deg)}.arrow-icon-left{transform:rotate(90deg)}.arrow-icon-right{transform:rotate(-90deg)}.control-button svg,.privacy-note svg{flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.control-button svg{width:26px;height:26px}.retry-button:focus-visible,.control-button:focus-visible{outline:3px solid rgba(7,92,56,.3);outline-offset:3px}.privacy-note{min-height:52px;padding-top:20px;display:flex;align-items:center;justify-content:center;gap:10px;border-top:1px solid var(--border);color:var(--muted);font-size:.93rem}.privacy-note svg{width:20px;height:20px;color:var(--green)}@keyframes pulse{0%,to{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}@media(max-width:700px){.app-shell{width:min(100% - 32px,560px);padding:22px 0 24px}.topbar{min-height:48px;align-items:center}.topbar h1{font-size:1.65rem}.status{min-height:34px;padding:0 12px;border:1px solid #b9d8c8;border-radius:8px;background:#f7fbf8;font-size:.9rem}.status-local{display:none}.status-dot{width:8px;height:8px;margin-right:7px}.viewer{align-self:start;padding-top:20px}.video-shell{border-radius:11px;box-shadow:0 10px 30px #1d282e1a}.timestamp{left:12px;bottom:10px;padding:5px 8px;font-size:.8rem}.offline-state{padding:18px}.offline-state>svg{width:38px;height:38px;margin-bottom:10px}.offline-state h2{font-size:1.12rem}.offline-state p{display:none}.retry-button{min-height:40px;margin-top:14px}.controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}.control-button{min-width:0;min-height:92px;padding:12px 6px;flex-direction:column;gap:8px;font-size:.78rem;line-height:1.2;text-align:center}.control-button svg{width:25px;height:25px;color:var(--green)}.privacy-note{min-height:48px;padding-top:18px;font-size:.81rem}.ptz-panel{padding:14px 16px}.ptz-panel p{max-width:170px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}