*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0b0f14;--panel:#141b24;--panel-2:#1c2530;--text:#e6edf3;--muted:#8b98a5;--accent:#3fa9f5;--rec:#ff4545;--radius:10px}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}button{background:var(--panel-2);color:var(--text);cursor:pointer;border:1px solid #2b3642;border-radius:8px;padding:7px 14px;font-size:14px}button:hover{background:#243040}button.active{background:var(--accent);border-color:var(--accent);color:#04121f;font-weight:600}button.danger{color:#ff8f8f;background:#3a1519;border-color:#6c2830}button:disabled{opacity:.5;cursor:default}input,select{background:var(--panel);color:var(--text);border:1px solid #2b3642;border-radius:8px;width:100%;padding:9px 12px;font-size:15px}input:focus,select:focus{border-color:var(--accent);outline:none}.error{color:#ff8f8f;padding:8px 0}.empty{color:var(--muted);text-align:center;padding:48px 16px}.ok{color:#6fdd8b}.warn{color:#ffc857}.app{flex-direction:column;height:100%;display:flex}header{padding:10px max(16px, env(safe-area-inset-left));background:var(--panel);border-bottom:1px solid #202a36;align-items:center;gap:16px;display:flex}.brand{white-space:nowrap;font-size:17px;font-weight:700}header nav{flex:1;gap:6px;display:flex}.header-right{align-items:center;gap:10px;display:flex}main{flex:1;padding:14px;overflow-y:auto}.login-wrap{place-items:center;height:100%;display:grid}.login-card{background:var(--panel);text-align:center;border-radius:16px;flex-direction:column;gap:14px;width:min(90vw,340px);padding:36px 32px;display:flex}.login-logo{font-size:42px}.login-card h1{margin-bottom:8px;font-size:22px}.login-card button{background:var(--accent);color:#04121f;padding:10px;font-weight:600}.live-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:12px;display:grid}.tile{border-radius:var(--radius);aspect-ratio:16/9;cursor:pointer;background:#000;border:2px solid #0000;position:relative;overflow:hidden}.tile-rec{border-color:var(--rec)}.video-holder,.video-holder video{object-fit:contain;background:#000;width:100%;height:100%}.tile-label{background:linear-gradient(#0000,#000000bf);justify-content:space-between;align-items:center;padding:6px 10px;font-size:13px;display:flex;position:absolute;bottom:0;left:0;right:0}.rec-badge{color:var(--rec);font-size:12px;font-weight:700;animation:1.2s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.35}}.fullscreen-view{flex-direction:column;gap:10px;height:100%;display:flex}.fullscreen-bar{align-items:center;gap:14px;display:flex}.fullscreen-bar .cam-name{font-weight:600}.fullscreen-video{border-radius:var(--radius);background:#000;flex:1;overflow:hidden}.clips-toolbar{gap:10px;margin-bottom:10px;display:flex}.clips-toolbar select{width:auto}.clips-page h2{color:var(--muted);margin:18px 0 8px;font-size:15px}.clip-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;display:grid}.clip-card{background:var(--panel);border-radius:var(--radius);cursor:pointer;overflow:hidden}.clip-card:hover{outline:2px solid var(--accent)}.clip-card img{aspect-ratio:16/9;object-fit:cover;background:#000;width:100%;display:block}.clip-meta{flex-direction:column;padding:8px 10px;font-size:13px;display:flex}.clip-meta span{color:var(--muted);font-size:12px}.modal{z-index:50;background:#000000b3;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal-body{background:var(--panel);border-radius:14px;flex-direction:column;gap:12px;width:min(96vw,960px);max-height:92vh;padding:14px;display:flex;overflow-y:auto}.modal-bar{justify-content:space-between;align-items:center;gap:10px;font-size:14px;display:flex}.modal-bar div{gap:8px;display:flex}.modal video{background:#000;border-radius:8px;width:100%}.cam-list{flex-direction:column;gap:8px;display:flex}.cam-row{background:var(--panel);border-radius:var(--radius);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.cam-row code{color:var(--muted);margin-left:6px;font-size:12px}.cam-sub{color:var(--muted);margin-top:3px;font-size:13px}.cam-actions{gap:8px;display:flex}.add-btn{margin-top:12px}.form label{color:var(--muted);flex-direction:column;gap:5px;font-size:13px;display:flex}.form label.check{color:var(--text);flex-direction:row;align-items:center;gap:8px}.form label.check input{width:auto}.recorder-opts{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.form-actions{justify-content:flex-end;gap:10px;margin-top:6px;display:flex}.form h2{font-size:17px}@media (width<=640px){header{flex-wrap:wrap}.recorder-opts{grid-template-columns:1fr}}