:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#10151d;color:#e9eef5}body{margin:0}header{padding:24px 4%;border-bottom:1px solid #303b4b;display:flex;justify-content:space-between;align-items:center}h1{font-size:23px;margin:0}header small{color:#91a4ba}main{max-width:1500px;margin:auto;padding:24px 4%}button,input,select{font:inherit;border:1px solid #435066;border-radius:6px;padding:9px;background:#1c2735;color:inherit}button{cursor:pointer;background:#254c76}button:hover{background:#326495}label{display:inline-flex;flex-direction:column;gap:5px;font-size:13px;color:#adbed0}section{margin-bottom:30px}.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:end}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:18px}.card{background:#192330;border:1px solid #303b4b;border-radius:10px;overflow:hidden}.card .info{padding:14px;display:flex;justify-content:space-between;gap:8px;align-items:center}.card small{color:#b0c4db}video{width:100%;background:#05080d;aspect-ratio:16/9}.history{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-top:18px}#clips{max-height:480px;overflow:auto}#clips button{display:block;width:100%;text-align:left;margin-bottom:7px;background:#1c2735}#clips button.active{border-color:#78bfff}#message{color:#ffd084;min-height:24px;margin:10px 0}.muted{color:#9aaec4}dialog{max-width:560px;width:85%;border:1px solid #465873;border-radius:12px;background:#192330;color:inherit}dialog form{display:grid;gap:16px}dialog::backdrop{background:#0009}.bar{height:30px;display:flex;background:#192330;margin-top:12px;position:relative;border-radius:4px}.marker{position:absolute;height:100%;background:#477dad;min-width:2px;border:0;border-radius:0;padding:0}.marker.motion{background:#e0a64b}#play-caption{padding:12px}a{color:#9ccfff}@media(max-width:800px){.history{grid-template-columns:1fr}header small{display:none}}
nav{display:flex;gap:8px;flex-wrap:wrap}nav a{padding:9px 14px;text-decoration:none;border-radius:6px}nav a[aria-current="page"]{background:#254c76;color:#fff}.config-list{display:grid;gap:12px;margin-top:18px}.config-list .info{flex-wrap:wrap}.config-list strong{min-width:180px}@media(max-width:700px){header{align-items:flex-start;gap:16px;flex-direction:column}}
.group-management{margin-top:32px}.group-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;margin-top:20px}.camera-group{border:2px dashed #435066;border-radius:10px;padding:16px;min-height:160px;background:#192330}.camera-group.drop-active{border-color:#8dc9ff;background:#243e59}.camera-group h3{margin:0 auto 0 0}.group-members{margin-top:18px;display:grid;gap:8px}.group-member{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px;background:#101923;border-radius:6px;cursor:grab}.config-list .card{cursor:grab}button:disabled{opacity:.6;cursor:default}
body[data-page=live]{height:100dvh;display:flex;flex-direction:column;overflow:hidden}body[data-page=live] header{padding:8px 12px;gap:8px;flex-shrink:0}body[data-page=live] h1{font-size:18px}body[data-page=live] nav a{padding:6px 10px}body[data-page=live] main{max-width:none;margin:0;padding:6px;flex:1;min-height:0;display:flex;flex-direction:column}body[data-page=live] #message:empty{display:none}body[data-page=live] #message{margin:0;min-height:0}body[data-page=live] main>section{flex:1;min-height:0;display:flex;flex-direction:column;margin:0}.live-toolbar{align-items:center;justify-content:space-between;flex-shrink:0}.live-toolbar label{flex-direction:row;align-items:center}body[data-page=live] .grid{flex:1;min-height:0;margin-top:6px;gap:6px;grid-template-columns:repeat(var(--columns,1),minmax(0,1fr));grid-template-rows:repeat(var(--rows,1),minmax(0,1fr))}body[data-page=live] .card{min-width:0;min-height:0;display:flex;flex-direction:column;border-radius:5px}body[data-page=live] video{flex:1;min-height:0;height:0;aspect-ratio:auto;object-fit:contain}body[data-page=live] .info{padding:4px 8px;font-size:12px;flex-shrink:0;min-height:20px}body[data-page=live] .info strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}body[data-page=live] .info small{white-space:nowrap}@media(max-width:700px){body[data-page=live] header{flex-direction:row;align-items:center;flex-wrap:wrap}body[data-page=live] header h1 small{display:none}}

#camera-preview video{display:block;max-height:36vh;object-fit:contain;border-radius:6px}#camera-preview video[hidden]{display:none}#preview-status{margin:8px 0 0;font-size:13px}#editor{max-height:90dvh;overflow:auto}

#preview-stage{position:relative}#zone-overlay{position:absolute;pointer-events:none}#zone-overlay.drawing{pointer-events:auto;touch-action:none;cursor:crosshair}#zone-overlay rect{fill:#44b8ff33;stroke:#67c7ff;stroke-width:.004}#zone-overlay rect.draft{stroke:#ffd084}#motion-controls{display:grid;gap:12px;border:1px solid #435066;border-radius:6px}#motion-controls p{margin:0;font-size:13px}.zone-row{display:flex;gap:12px;align-items:center;margin-top:8px}.zone-row input{width:75px}

#zone-overlay polygon,#zone-overlay polyline{fill:#44b8ff33;stroke:#67c7ff;stroke-width:.004}#zone-overlay .draft{stroke:#ffd084;fill:#ffd08422}#zone-overlay circle{fill:#ffd084;stroke:#10151d;stroke-width:.002}

#zone-overlay .excluded{fill:#ff676733;stroke:#ff8585;stroke-dasharray:.012 .006}.zone-row{flex-wrap:wrap}

.storage-settings{padding:16px;border:1px solid #435066;border-radius:8px;margin:20px 0}.storage-settings input{width:min(65vw,520px)}#storage-message{color:#ffd084}

#folder-browser{max-width:800px}#browser-path{width:min(65vw,500px)}#folder-list{display:grid;gap:6px;max-height:40vh;overflow:auto;margin:16px 0}#folder-list button{text-align:left;background:#1c2735}.browser-actions{margin-top:18px}#folder-browser>p{font-size:13px}

#filesystem-selector{max-width:100%;width:100%}#folder-browser>label{display:flex}#filesystem-space{margin:10px 0 18px}

#onvif-controls{display:grid;gap:12px;border:1px solid #435066;border-radius:6px}#onvif-controls p{font-size:13px;margin:4px 0}#onvif-endpoint{min-width:0}.discovered-device{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid #435066;border-radius:6px;padding:12px;margin:10px 0}.discovered-device p{margin:5px 0}.onvif-profile{border:1px solid #435066;border-radius:6px;padding:10px;margin:10px 0;overflow-wrap:anywhere}#onvif-result{overflow-wrap:anywhere}

#zone-overlay .zone-vertex{pointer-events:all;cursor:grab;touch-action:none}#zone-overlay .zone-vertex:active{cursor:grabbing}#zone-overlay .vertex-hit{fill:transparent;stroke:none}#zone-overlay .vertex-dot{pointer-events:none;fill:#ffd084;stroke:#10151d;stroke-width:.003}

[hidden]{display:none!important}.sign-in{max-width:360px;padding-top:12vh}.sign-in form{display:grid;gap:18px}header nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.account-name{font-size:12px;color:#adbed0}.user-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:14px 0;padding:14px;background:#192330;border-radius:8px}.user-row strong{flex:1}.camera-choice{display:flex;flex-direction:row;align-items:center;margin:10px 0}#view-cameras{max-height:40vh;overflow:auto}body[data-role=user] .config-list .card{cursor:default}

#snippet-tool{padding:20px;border:1px solid #435066;border-radius:12px;background:#151e2a}#trim-preview{display:block;max-height:50vh;object-fit:contain}#trim-track{position:relative;height:84px;margin:12px 16px;touch-action:none;background:#0b1018;border-radius:6px}#trim-filmstrip{display:flex;height:100%;overflow:hidden;border-radius:6px;opacity:.65;pointer-events:none}#trim-filmstrip video{width:16.6667%;min-width:0;height:100%;object-fit:cover}#trim-selection{position:absolute;top:0;bottom:0;border:3px solid #ffd084;background:#ffd08425;box-sizing:border-box;cursor:grab;touch-action:none}#trim-selection:active{cursor:grabbing}.trim-handle{position:absolute;top:-5px;bottom:-5px;width:28px;padding:0;transform:translateX(-50%);border:2px solid #ffe0a0;background:#997124;color:white;cursor:ew-resize;touch-action:none;z-index:2}.trim-handle:focus-visible{outline:3px solid #fff;outline-offset:3px}#trim-playhead{position:absolute;top:0;bottom:0;width:2px;background:#fff;pointer-events:none;z-index:3}.trim-summary{display:flex;justify-content:space-between;gap:12px;font-size:13px;margin:10px 0;color:#b7c8dc}#trim-duration{color:#ffd084}#snippet-form{display:grid;gap:12px;margin-top:16px}#snippet-library{display:grid;gap:12px}#snippet-library .card{padding:16px}

#editor{width:96vw;max-width:1800px;max-height:94dvh;box-sizing:border-box;padding:20px}#zone-workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}#camera-preview{min-width:0}#camera-preview video{height:72dvh;max-height:900px;aspect-ratio:auto;background:#05080d}#zone-workspace #motion-controls{box-sizing:border-box;max-height:78dvh;overflow:auto;min-width:0;margin:0}#zone-workspace .zone-row>input{width:min(100%,180px)}@media(max-width:1000px){#zone-workspace{grid-template-columns:1fr}#camera-preview video{height:62dvh;max-height:750px}#zone-workspace #motion-controls{max-height:none}}@media(max-width:600px){#editor{width:98vw;padding:12px}#camera-preview video{height:52dvh}}