:root { color-scheme: dark; font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:#101820; color:#edf2f5; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; }
a { color:#8dccff; text-decoration:none; }
a:hover { text-decoration:underline; }
button,input { font:inherit; }
button { cursor:pointer; }
.topbar { min-height:68px; display:flex; align-items:center; justify-content:space-between; padding:12px clamp(18px,4vw,64px); border-bottom:1px solid #273a47; background:#131f28; gap:18px; }
.brand { display:flex; gap:10px; color:#fff; align-items:center; font-size:1.18rem; font-weight:750; }
.brand:hover { text-decoration:none; }
.topbar nav { display:flex; gap:18px; font-size:.92rem; }
.container { max-width:1420px; padding:28px clamp(18px,4vw,64px) 48px; margin:0 auto; }
h1 { margin:0 0 7px; font-size:clamp(1.65rem,3vw,2.2rem); line-height:1.15; }
h2 { margin:0 0 15px; font-size:1.12rem; }
p { line-height:1.45; }
.intro { margin-bottom:24px; }
.intro p,.admin-heading p,.form-page > p { color:#a7b9c4; margin:0; }
.viewer-layout { display:grid; grid-template-columns:minmax(245px,335px) minmax(0,1fr); gap:20px; }
.directory,.player-section,.panel { background:#182631; border:1px solid #2b3e4b; border-radius:14px; }
.directory { padding:16px; min-width:0; align-self:start; }
.search-label { display:block; font-size:.81rem; color:#c0cbd1; margin-bottom:8px; }
input { width:100%; border:1px solid #395062; background:#0d1921; color:#fff; border-radius:8px; padding:11px 12px; outline-offset:2px; }
input:focus { outline:2px solid #6bbaff; }
.camera-list { display:flex; flex-direction:column; margin-top:12px; gap:7px; max-height:65vh; overflow:auto; }
.camera-item { text-align:left; width:100%; border:1px solid transparent; color:#e9f4fa; background:#223440; border-radius:9px; padding:12px; display:flex; flex-direction:column; gap:5px; }
.camera-item:hover { background:#2e4352; }
.camera-item.active { border-color:#64b8ff; background:#23425b; }
.camera-item[hidden] { display:none; }
.camera-title { font-weight:650; }
.camera-location,.empty,small { color:#a7b9c4; font-size:.84rem; }
.player-section { padding:16px; min-width:0; }
.player-header { display:flex; align-items:start; justify-content:space-between; gap:14px; margin-bottom:15px; }
.player-header h2 { font-size:1.3rem; margin:0 0 4px; }
.player-header p { color:#a7b9c4; margin:0; }
.text-button { white-space:nowrap; font-size:.85rem; }
.video-shell { aspect-ratio:16/9; background:#05090c; border-radius:10px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.video-shell iframe,.video-shell video,.video-shell .camera-image { width:100%; height:100%; border:0; object-fit:contain; }
.player-placeholder { display:flex; flex-direction:column; text-align:center; align-items:center; justify-content:center; gap:14px; padding:22px; color:#a8b8c3; }
.placeholder-icon { display:flex; align-items:center; justify-content:center; height:65px; width:65px; border:2px solid #587489; border-radius:100%; font-size:24px; padding-left:4px; }
.player-note { color:#9cabb6; font-size:.83rem; margin:13px 0 0; }
footer { padding:24px 14px; color:#7e95a4; font-size:.78rem; text-align:center; }
.form-page { max-width:600px; margin:20px auto; }
.form-page > p { margin-bottom:18px; }
.panel { padding:22px; }
.stack { display:flex; flex-direction:column; gap:9px; }
.stack button { margin-top:10px; }
label { font-weight:600; font-size:.87rem; }
.primary,.secondary,.danger { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; border-radius:8px; padding:10px 15px; border:1px solid transparent; }
.primary { background:#85c7ff; color:#091924; font-weight:700; }
.secondary { color:#c8e1f2; background:#2b4352; border-color:#486173; }
.danger { color:#ffc9c9; background:#533338; border-color:#7f454e; }
.primary:hover,.secondary:hover,.danger:hover { filter:brightness(1.1); text-decoration:none; }
.admin-heading { display:flex; justify-content:space-between; align-items:start; gap:18px; margin-bottom:24px; }
.admin-columns { display:grid; grid-template-columns:minmax(260px,420px) minmax(0,1fr); gap:20px; align-items:start; }
.helper { color:#a7b9c4; font-size:.84rem; margin:6px 0; }
.saved-list { display:flex; flex-direction:column; gap:9px; }
.saved-camera { border:1px solid #344b5b; border-radius:9px; padding:13px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.saved-info { display:flex; flex-direction:column; gap:4px; min-width:0; }
.truncate { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:420px; }
.saved-actions { display:flex; align-items:center; gap:7px; }
.action { padding:7px 10px; font-size:.83rem; }
.count { font-size:.81rem; font-weight:normal; background:#2e4150; border-radius:40px; padding:3px 9px; margin-left:5px; }
.notice { border:1px solid #416c54; background:#203b2b; padding:11px 14px; border-radius:8px; }
.notice.error { border-color:#a45454; background:#482f32; }
@media(max-width:820px) { .viewer-layout,.admin-columns { grid-template-columns:1fr; } .camera-list { max-height:260px; } .container { padding-top:20px; } .player-header { flex-wrap:wrap; } }
@media(max-width:480px) { .topbar { flex-direction:column; align-items:start; gap:8px; } .admin-heading { flex-wrap:wrap; } .saved-camera { align-items:start; flex-direction:column; } }