:root{color-scheme:dark;--bg:#0c111b;--panel:#161e2b;--edge:#2b3a51;--text:#e8eef6;--muted:#9baabd;--accent:#4da5ff}*{box-sizing:border-box}body,html{padding:0;margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}button,input{font:inherit}button{cursor:pointer;border:1px solid var(--edge);color:var(--text);background:#24354b;border-radius:9px;padding:10px 15px}button:hover{background:#304865}button:disabled{opacity:.55;cursor:not-allowed}button.active,form button{background:#1265b8;border-color:#3186db}button.secondary{background:transparent}.small,p{color:var(--muted);line-height:1.5}.small{font-size:13px}.center{min-height:100vh;display:grid;place-content:center;padding:20px}.panel{background:var(--panel);border:1px solid var(--edge);padding:22px;border-radius:15px}.auth{width:min(420px,92vw);display:grid;grid-gap:15px;gap:15px}.auth h1{margin:0}.auth label{display:grid;grid-gap:8px;gap:8px}.auth input{background:#0e1520;border:1px solid #44546a;border-radius:8px;padding:12px;color:white}.error{background:#4b1f2b;border:1px solid #b54c5a;border-radius:9px;padding:10px;margin-top:10px;color:#ffdce1}.shell{max-width:1500px;margin:auto;padding:25px}.section-head,.shell header{display:flex;justify-content:space-between;align-items:center;gap:15px}.shell header{margin-bottom:25px}.brand{font-size:23px;font-weight:750}.dashboard{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-gap:20px;gap:20px}.dashboard aside{display:grid;align-content:start;grid-gap:15px;gap:15px}.panel h2{font-size:18px;margin:0 0 14px}.video{background:black;border-radius:8px;width:100%;aspect-ratio:16/9;display:block}.switch{display:flex;gap:7px}.ptz{display:grid;grid-template-columns:repeat(3,55px);justify-content:center;grid-gap:8px;gap:8px}.ptz button{height:52px;font-size:24px;padding:0}.ptz-center{display:grid;place-content:center;font-size:12px;color:var(--muted)}@media(max-width:850px){.dashboard{grid-template-columns:1fr}.shell{padding:14px}.panel{padding:15px}.section-head{flex-wrap:wrap}}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}.device-list{display:grid;grid-gap:12px;gap:12px}.device-item{display:flex;justify-content:space-between;align-items:center;gap:15px;border:1px solid var(--edge);border-radius:10px;padding:14px}.device-item p{margin:5px 0}.device-form{display:grid;grid-gap:13px;gap:13px}.device-form label{display:grid;grid-gap:6px;gap:6px;font-size:14px}.device-form input,.device-form select,.device-form textarea{background:#0e1520;border:1px solid #44546a;border-radius:8px;padding:11px;color:white;min-width:0}.device-form textarea{resize:vertical}@media(max-width:650px){.device-item{align-items:flex-start;flex-direction:column}}.multiview-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}.camera-grid{display:grid;grid-gap:12px;gap:12px;min-width:0}.camera-grid-1{grid-template-columns:1fr}.camera-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.camera-grid-9{grid-template-columns:repeat(3,minmax(0,1fr))}.camera-tile{border:1px solid var(--edge);background:var(--panel);border-radius:12px;min-width:0;overflow:hidden}.tile-selected{outline:2px solid var(--accent)}.tile-footer,.tile-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px}.tile-select{padding:2px;background:transparent;border:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70%}.camera-status{font-size:11px;color:var(--muted);white-space:nowrap}.camera-status.online{color:#6cdda3}.camera-status.offline{color:#f39b93}.tile-empty{aspect-ratio:16/9;display:grid;place-items:center;background:#070c13;padding:16px;color:var(--muted);text-align:center}.camera-tile .panel{border:0;border-radius:0;padding:0;background:transparent}.camera-tile .panel .section-head{padding:6px 10px}.camera-tile .panel .video{border-radius:0}.camera-tile .panel .error{margin:5px}.tile-footer{font-size:12px;color:var(--muted)}.tile-footer button{padding:5px 9px}.pager{margin-top:14px}@media(max-width:700px){.camera-grid-4,.camera-grid-9{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:450px){.camera-grid-4,.camera-grid-9{grid-template-columns:1fr}}