:root{
  --bg:#0b0e13;--panel:#151a22;--panel2:#1c2330;--text:#f4f7fb;--muted:#9ba7b7;
  --line:#2a3342;--accent:#22c7b8;--accent2:#159b90;--danger:#e55858;--warn:#e7a93b;--ok:#38c172;
}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:inherit}code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px max(18px,calc((100vw - 1220px)/2));background:rgba(11,14,19,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800}.brand-mark{color:var(--accent);font-size:22px}.nav{display:flex;gap:8px;flex-wrap:wrap}.nav a{text-decoration:none;padding:8px 10px;border-radius:9px;color:var(--muted)}.nav a:hover,.nav a.active{background:var(--panel2);color:var(--text)}.container{width:min(1220px,calc(100% - 28px));margin:24px auto 50px}.footer{padding:30px;text-align:center;color:var(--muted);font-size:13px}.page-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin:10px 0 18px}.page-head h1,.panel h1{margin:0 0 7px;font-size:clamp(28px,4vw,42px)}h2{margin-top:0}.muted{color:var(--muted)}.small{font-size:13px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;margin-bottom:18px;box-shadow:0 12px 35px rgba(0,0,0,.16)}.narrow{width:min(520px,100%);margin:60px auto}.login-panel{margin-top:10vh}.alert{padding:12px 14px;border-radius:12px;margin-bottom:14px;border:1px solid var(--line);background:var(--panel2)}.alert.error{border-color:#703b3b;background:#2b1717}.alert.warning{border-color:#725d2e;background:#2a2415}.alert.success{border-color:#285f46;background:#14271e}.alert.info{border-color:#32536c;background:#15232d}form{margin:0}label{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:650;margin-bottom:14px}input,select{width:100%;background:#0f141b;color:var(--text);border:1px solid var(--line);border-radius:11px;padding:12px 13px;font:inherit;outline:none}input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(34,199,184,.12)}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--panel2);color:var(--text);padding:10px 14px;border-radius:11px;text-decoration:none;font:inherit;font-weight:750;cursor:pointer}.button:hover{filter:brightness(1.08)}.button.primary{background:var(--accent);border-color:var(--accent);color:#061210}.button.danger{background:#2d1717;border-color:#703b3b;color:#ffdcdc}.smallbtn{padding:7px 10px;font-size:13px}.camera-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.camera-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden}.video-wrap{position:relative;aspect-ratio:16/9;background:#030405}.video-wrap video{width:100%;height:100%;object-fit:contain;background:#000;display:block}.video-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;background:radial-gradient(circle at center,#121923 0,#050608 70%);padding:18px}.video-placeholder.hidden{display:none}.status-dot{width:9px;height:9px;border-radius:50%;display:inline-block}.status-dot.online{background:var(--ok);box-shadow:0 0 0 4px rgba(56,193,114,.15)}.status-dot.offline{background:var(--danger);box-shadow:0 0 0 4px rgba(229,88,88,.12)}.camera-body{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:15px 16px}.camera-body h2{font-size:18px;margin:0 0 3px}.camera-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}.pill{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:6px 9px;color:var(--muted)}.pill.rec{color:#ffd9d9;border-color:#6d3333;background:#281515}.empty{text-align:center;padding:50px 24px}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.inline-form{display:flex;align-items:end;gap:12px}.inline-form label{flex:1;margin:0}.site-list{margin-top:16px}.site-row,.recording-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--line)}.copybox{display:flex;gap:10px;align-items:center;background:#0c1118;border:1px solid var(--line);padding:10px;border-radius:12px}.copybox code{flex:1}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.span2{grid-column:1/-1}.check{flex-direction:row;align-items:center;font-weight:500}.check input{width:auto}.actions{display:flex;gap:10px;align-items:center}.camera-table-wrap{overflow:auto}.camera-table{width:100%;border-collapse:collapse;min-width:760px}.camera-table th,.camera-table td{text-align:left;padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}.camera-table th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.row-actions{display:flex;gap:8px}.steps{padding-left:22px}.steps li{margin:8px 0}.recording-list{margin-top:10px}
@media(max-width:820px){.camera-grid,.admin-grid,.form-grid{grid-template-columns:1fr}.span2{grid-column:auto}.topbar{align-items:flex-start}.nav{justify-content:flex-end}.camera-body{align-items:flex-start;flex-direction:column}.camera-actions{justify-content:flex-start}.page-head{align-items:flex-start;flex-direction:column}.inline-form.stack-mobile{flex-direction:column;align-items:stretch}.copybox{align-items:stretch;flex-direction:column}}
@media(max-width:560px){.container{width:min(100% - 18px,1220px);margin-top:14px}.topbar{padding:12px 10px;gap:8px;flex-direction:column}.nav{width:100%;overflow:auto;flex-wrap:nowrap}.nav a{white-space:nowrap}.panel{border-radius:14px;padding:16px}.camera-grid{gap:12px}.video-wrap{aspect-ratio:4/3}.camera-body{padding:13px}.narrow{margin:22px auto}}