:root{--bg: #0b0e13;--surface: #161c26;--surface-hover: #1c2430;--border: #334155;--text: #f1f5f9;--muted: #a8b4c9;--accent: #3b82f6;--accent-dim: #2563eb;--accent-soft: rgba(59, 130, 246, .18);--danger: #f87171;--radius: 14px;--font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--safe-top: env(safe-area-inset-top, 0px);--safe-right: env(safe-area-inset-right, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--touch-min: 48px;--text-base: 1.0625rem;--line-relaxed: 1.55}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;min-height:100vh;min-height:100dvh;font-family:var(--font);font-size:var(--text-base);line-height:var(--line-relaxed);background:radial-gradient(ellipse 130% 90% at 50% -15%,#1a2332 0%,var(--bg) 58%);color:var(--text);-webkit-tap-highlight-color:rgba(59,130,246,.15)}.btn:focus-visible,.tabs button:focus-visible,a:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}button,input,select{font-family:inherit}a{color:var(--accent)}.app-shell{max-width:1400px;margin:0 auto;padding:1.5rem 1.75rem 3.5rem;padding-top:max(1.5rem,var(--safe-top));padding-left:max(1.25rem,var(--safe-left));padding-right:max(1.25rem,var(--safe-right));padding-bottom:max(2.75rem,var(--safe-bottom))}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:1.1rem;flex-wrap:wrap;margin-bottom:1.75rem;padding-bottom:1rem;border-bottom:1px solid rgba(51,65,85,.65)}.brand{display:flex;align-items:center;gap:.75rem;min-width:0}.header-logo{height:54px;width:auto;max-width:min(220px,42vw);object-fit:contain;flex-shrink:0;mix-blend-mode:screen}.brand-text{font-size:1.4rem;font-weight:700;letter-spacing:.01em;color:var(--text);white-space:nowrap}.tabs{display:flex;gap:.4rem;background:var(--surface);padding:.35rem;border-radius:12px;border:1px solid var(--border)}.tabs button{border:none;background:transparent;color:var(--muted);padding:.65rem 1.25rem;min-height:var(--touch-min);border-radius:10px;cursor:pointer;font-weight:600;font-size:1.05rem}.tabs button.active{background:var(--accent);color:#fff}.btn{border:1px solid var(--border);background:var(--surface);color:var(--text);padding:.65rem 1.2rem;min-height:var(--touch-min);border-radius:10px;cursor:pointer;font-size:1rem;font-weight:600}.btn:hover{border-color:var(--accent)}.btn-primary{background:var(--accent);border-color:var(--accent-dim);color:#fff}.btn-primary:hover{filter:brightness(1.08)}.btn-danger{border-color:#b91c1c;background:#ef444433;color:#fecaca}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.live-section{margin-bottom:1rem}.grid-cams{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:1rem;align-items:stretch}.cam-tile-card{display:flex;flex-direction:column;padding:0;min-width:0;overflow:hidden}.cam-tile-video-wrap{position:relative;width:100%;aspect-ratio:16 / 9;background:#000;border-radius:10px 10px 0 0;overflow:hidden}.cam-tile-video-wrap .cam-tile{margin:0}.cam-tile--mosaic{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;aspect-ratio:unset;border-radius:0}.cam-tile-video-wrap .cam-tile--mosaic video{object-fit:cover}.cam-tile-click{display:block;width:100%;height:100%;border:none;padding:0;margin:0;cursor:pointer;background:transparent;border-radius:0;outline:none}button.cam-tile-click{-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;color:inherit}.cam-tile-click:focus-visible{outline:3px solid #93c5fd;outline-offset:-3px}.cam-tile-footer{padding:.65rem .75rem .75rem;display:flex;flex-direction:column;gap:.45rem;flex:1}.cam-name-row{display:flex;align-items:center;gap:.35rem;min-height:2rem}.cam-name-text{font-weight:600;font-size:1.05rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cam-name-input{flex:1;min-width:0;padding:.35rem .5rem;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:.9rem}.btn-tiny{padding:.25rem .5rem;font-size:.75rem}.btn-sm{padding:.45rem .75rem;min-height:40px;font-size:.95rem;font-weight:600}.btn-icon-rename{border:none;background:#ffffff0f;color:var(--muted);width:2rem;height:2rem;border-radius:6px;cursor:pointer;font-size:.95rem;line-height:1;flex-shrink:0}.btn-icon-rename:hover{background:#3b82f640;color:var(--text)}.cam-tile-actions{display:flex;flex-wrap:wrap;gap:.35rem}.cred-warning-tile{margin:0;font-size:.72rem;padding:.35rem .45rem}.cam-add-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;min-height:120px;padding:1rem;cursor:pointer;border:2px dashed rgba(139,151,171,.45);background:#ffffff05;color:var(--muted);font:inherit;text-align:center;border-radius:var(--radius);transition:border-color .15s ease,background .15s ease,color .15s ease}.cam-add-tile:hover{border-color:var(--accent);background:#3b82f614;color:var(--text)}.cam-add-icon{font-size:2rem;font-weight:300;line-height:1;color:var(--accent)}.cam-add-label{font-weight:600;font-size:.95rem;color:var(--text)}.cam-add-hint{font-size:.75rem;opacity:.85}.live-empty-hint{margin-top:.75rem;text-align:center}.modal-add-cam{max-width:480px;width:100%;max-height:90vh;overflow-y:auto}.modal-add-title{margin:0 0 .35rem;font-size:1.15rem}.modal-add-lead{margin:0 0 1rem;font-size:.85rem;color:var(--muted);line-height:1.4}.modal-add-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;justify-content:flex-end}.modal-edit{max-width:520px;width:100%;max-height:90vh;overflow-y:auto}.check-row{display:flex;align-items:flex-start;gap:.5rem;font-size:.875rem;color:var(--muted);cursor:pointer;margin:.5rem 0 0}.check-row input{margin-top:.2rem}.verify-ok{color:#86efac;font-size:.9rem;white-space:pre-line}.verify-err{color:#fecaca;font-size:.9rem;white-space:pre-line}.rtsp-hint{margin:0 0 1rem;padding:.75rem 1rem;background:#00000040;border-radius:8px;border:1px solid var(--border);font-size:.85rem;color:var(--muted)}.rtsp-hint summary{cursor:pointer;color:var(--text);font-weight:500}.rtsp-hint ul,.rtsp-hint-ol{margin:.5rem 0 0;padding-left:1.25rem}.rtsp-hint-ol li{margin-bottom:.5rem}.rtsp-hint code{font-size:.8rem;background:var(--bg);padding:.1rem .35rem;border-radius:4px}.wizard-steps{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;font-size:.8rem;color:var(--muted)}.wizard-step{padding:.25rem .5rem;border-radius:6px}.wizard-step.active{background:#3b82f640;color:#93c5fd;font-weight:600}.wizard-sep{opacity:.5}.auth-summary-box{background:#00000059;border:1px solid var(--border);border-radius:8px;padding:.75rem 1rem;margin-bottom:1rem;font-size:.85rem}.auth-summary-box>div{display:flex;flex-direction:column;gap:.2rem;margin-bottom:.5rem}.auth-summary-box>div:last-child{margin-bottom:0}.auth-summary-label{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.03em}.auth-summary-val{word-break:break-all;font-family:ui-monospace,monospace}.inline-code{font-size:.85em;background:var(--bg);padding:.1rem .35rem;border-radius:4px}.hls-err-hint{margin:.5rem 0 0;padding:.5rem .65rem;font-size:.8rem;line-height:1.35;color:#fecaca;background:#7f1d1d59;border:1px solid rgba(248,113,113,.4);border-radius:6px}.cam-tile .cam-hls-err{position:absolute;left:.35rem;right:.35rem;bottom:2.25rem;margin:0;max-height:4.5rem;overflow:auto;z-index:2}.cred-warning{margin:0 0 .5rem;padding:.45rem .6rem;font-size:.78rem;line-height:1.35;color:#fde68a;background:#78350f73;border:1px solid rgba(251,191,36,.45);border-radius:6px}.modal-expand-backdrop{align-items:center;justify-content:center;padding:max(.5rem,var(--safe-left));padding-right:max(.5rem,var(--safe-right));padding-top:max(.75rem,var(--safe-top));padding-bottom:max(.75rem,var(--safe-bottom))}.modal-expand-cam.modal{display:flex;flex-direction:column;max-height:min(92dvh,92vh);width:min(920px,96vw);overflow:hidden}.modal-expand-hd{flex-shrink:0}.modal-expand-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:.75rem 1rem 1.25rem;display:flex;flex-direction:column;gap:.75rem;background:var(--surface)}.expand-controls{display:flex;flex-direction:column;gap:.85rem;flex-shrink:0}.expand-video-wrap{background:#000;border-radius:8px;overflow:hidden;aspect-ratio:16/9;width:100%;flex-shrink:0}.expand-video-wrap video{width:100%;height:100%;display:block;object-fit:contain}.expand-toolbar{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:0;justify-content:center}.expand-tb-btn{display:flex;flex-direction:column;align-items:center;gap:.2rem;min-width:5.5rem;padding:.5rem .65rem;font-size:1.1rem;border-radius:10px;border:1px solid var(--border);background:#ffffff0a;color:var(--text);cursor:pointer;transition:background .15s ease}.expand-tb-btn:hover:not(:disabled){background:#3b82f633}.expand-tb-btn:disabled{opacity:.5;cursor:not-allowed}.expand-tb-btn span{font-size:.88rem;font-weight:600;color:var(--text);opacity:.92}.expand-tb-btn.active{border-color:#ef4444;background:#ef444426}.expand-ptz{margin-top:0;padding:.75rem .65rem;border:1px solid var(--border);border-radius:10px;background:#0003}.expand-ptz-label{display:block;font-size:1rem;color:var(--text);margin-bottom:.55rem;font-weight:700}.expand-ptz-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.35rem;max-width:200px;margin:0 auto;align-items:center;justify-items:center}.ptz-btn{min-width:3rem;min-height:2.5rem;font-size:1.1rem;padding:.25rem;-webkit-user-select:none;user-select:none;touch-action:none}.ptz-stop{font-size:.85rem}.expand-ptz-hint{margin:.65rem 0 0;font-size:.9rem;line-height:var(--line-relaxed);color:var(--muted)}.ctrl-err-msg{margin:.75rem 0 0;padding:.65rem .85rem;font-size:.95rem;line-height:var(--line-relaxed);color:#fecaca;background:#7f1d1d59;border:1px solid rgba(248,113,113,.35);border-radius:6px;white-space:pre-wrap}.save-file-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:max(1rem,var(--safe-top)) max(1rem,var(--safe-right)) max(1rem,var(--safe-bottom)) max(1rem,var(--safe-left));background:#000000bf}.save-file-panel{width:min(100%,420px);max-height:min(90dvh,100%);overflow:auto}.save-file-actions{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end;margin-top:.65rem}@media(max-width:720px){.save-file-actions{flex-direction:column;align-items:stretch}.save-file-actions .btn{width:100%;min-height:var(--touch-min)}}.cam-tile{position:relative;aspect-ratio:16/9;background:#000}.cam-tile video{width:100%;height:100%;object-fit:contain;display:block}.cam-label{position:absolute;left:0;right:0;bottom:0;padding:.5rem .75rem;background:linear-gradient(transparent,#000000d9);font-size:.8rem;font-weight:600;display:flex;justify-content:space-between;align-items:center}.cam-expand{position:absolute;top:.5rem;right:.5rem;z-index:3}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d1;z-index:100;display:flex;align-items:center;justify-content:center;padding:1rem}.modal{width:min(1200px,100%);max-height:90vh;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}.modal-hd{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.15rem;border-bottom:1px solid var(--border);gap:.75rem}.modal-hd strong{font-size:1.1rem;font-weight:700}.modal-body{flex:1;min-height:0;background:#000}.modal-body video{width:100%;height:auto;max-height:75vh;display:block;margin:0 auto}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}.login-card{width:100%;max-width:440px;padding:2.25rem 2rem}.login-brand{text-align:center;margin-bottom:1.25rem;background:transparent}.login-logo{display:block;max-width:100%;width:min(320px,88vw);height:auto;margin:0 auto;object-fit:contain;mix-blend-mode:screen}.login-heading{margin:0 0 .5rem;font-size:1.65rem;font-weight:700;text-align:center;letter-spacing:.01em}form+.login-heading{margin-top:1.5rem}.login-lead{margin:0;color:var(--muted);font-size:1.05rem;text-align:center;line-height:var(--line-relaxed)}.rec-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem 1rem;margin-bottom:.5rem}.rec-filters .field{margin-bottom:0;min-width:200px;flex:1 1 180px}.rec-filters input[type=datetime-local]{width:100%;max-width:100%}.rec-filters-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding-bottom:.15rem}.rec-filters-hint{margin:0 0 1rem;font-size:.95rem;color:var(--muted);line-height:var(--line-relaxed)}.rec-bulk-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.65rem 1rem;margin-bottom:1rem;padding:.65rem .75rem;border-radius:var(--radius);border:1px solid var(--border);background:#ffffff08}.rec-bulk-count{font-size:1rem;font-weight:600;color:var(--text)}.rec-bulk-actions{display:flex;flex-wrap:wrap;gap:.45rem}.rec-col-select{width:2.5rem;text-align:center;vertical-align:middle}.rec-row-checkbox{width:1.35rem;height:1.35rem;cursor:pointer;accent-color:var(--accent)}.rec-preview-modal.panel{width:min(960px,100%);max-width:100%;padding:0;overflow:hidden}.rec-preview-modal .modal-hd{padding:.75rem 1rem}.rec-preview-video-wrap{background:#000;border-radius:0 0 var(--radius) var(--radius)}.rec-preview-video{width:100%;max-height:min(70vh,720px);display:block;vertical-align:middle}.field{margin-bottom:1rem}.field label{display:block;font-size:.98rem;font-weight:600;color:var(--text);margin-bottom:.45rem}.field input,.field select,.field textarea{width:100%;padding:.75rem .85rem;min-height:var(--touch-min);border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:1rem}.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--accent);outline-offset:0;border-color:var(--accent)}.error-msg{color:var(--danger);font-size:1rem;font-weight:600;margin-top:.5rem}.panel{padding:1.25rem 1.35rem}.form-row{display:flex;gap:.75rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:1rem}.form-row .field{flex:1;min-width:200px;margin-bottom:0}.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}table{width:100%;border-collapse:collapse;font-size:.98rem}th,td{text-align:left;padding:.75rem .85rem;border-bottom:1px solid var(--border)}th{color:var(--text);font-weight:700;font-size:.95rem;background:#0003}.actions{display:flex;gap:.35rem;flex-wrap:wrap}.badge{display:inline-block;padding:.35rem .65rem;border-radius:8px;font-size:.9rem;font-weight:600;background:var(--accent-soft);color:#bfdbfe}.empty-hint{color:var(--muted);font-size:1.05rem;padding:2.25rem 1rem;text-align:center;line-height:var(--line-relaxed)}.clip-form{display:grid;gap:.75rem;margin-top:.75rem}.clip-form .field{margin:0}@media(max-width:900px){.grid-cams{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:.85rem}.modal-expand-cam.modal{width:100%;max-height:min(92dvh,100%);margin:0 auto}.expand-video-wrap{max-height:min(52dvh,85vw)}.expand-toolbar{gap:.4rem}.expand-tb-btn{min-width:min(5.5rem,28vw);min-height:var(--touch-min);padding:.45rem .4rem}.rec-preview-video{max-height:min(55dvh,480px)}}@media(max-width:720px){.top-bar{flex-direction:column;align-items:stretch;gap:.85rem;margin-bottom:1.15rem}.brand{justify-content:center;text-align:center}.header-logo{height:42px;max-width:min(180px,70vw)}.brand-text{font-size:1.25rem}.tabs{width:100%;justify-content:stretch;padding:.2rem}.tabs button{flex:1;padding:.7rem .85rem;min-height:var(--touch-min);font-size:1rem}.top-bar>.btn{align-self:center;min-width:8rem;min-height:var(--touch-min)}.panel{padding:.85rem .9rem}.grid-cams{grid-template-columns:1fr;gap:.85rem}.cam-add-tile{min-height:140px;min-height:max(140px,28vw)}.cam-tile-actions{gap:.45rem}.cam-tile-actions .btn-sm{flex:1 1 calc(50% - .25rem);min-height:var(--touch-min);justify-content:center}.modal-backdrop{padding:max(.5rem,var(--safe-left));padding-right:max(.5rem,var(--safe-right));padding-top:max(.75rem,var(--safe-top));padding-bottom:max(.75rem,var(--safe-bottom));align-items:flex-end}.modal,.modal-add-cam,.modal-edit{max-height:min(92dvh,100%);width:100%;border-radius:var(--radius) var(--radius) 0 0;margin-top:auto}.modal-backdrop:has(.rec-preview-modal),.modal-backdrop:has(.clip-form){align-items:center;justify-content:center}.rec-preview-modal.panel{max-height:min(92dvh,100%);width:100%;border-radius:var(--radius);margin-top:0}.modal-backdrop:has(.modal-expand-cam),.modal-expand-backdrop{align-items:center;justify-content:center;padding-bottom:var(--safe-bottom)}.modal-expand-cam.modal{border-radius:var(--radius);max-height:min(94dvh,100%)}.modal-add-actions{flex-direction:column;align-items:stretch}.modal-add-actions .btn{min-height:var(--touch-min);width:100%}.rec-filters{flex-direction:column;align-items:stretch}.rec-filters .field{min-width:0;flex:none;width:100%}.rec-filters-actions{flex-direction:column;width:100%}.rec-filters-actions .btn{width:100%;min-height:var(--touch-min)}.actions{flex-direction:column;align-items:stretch}.actions .btn{width:100%;min-height:var(--touch-min)}table{font-size:.95rem}th,td{padding:.65rem .55rem}.wizard-steps{flex-wrap:wrap;justify-content:center;text-align:center}.expand-ptz-grid{max-width:none;width:min(220px,85vw)}.ptz-btn{min-width:3.25rem;min-height:3rem}}@media(max-width:480px){.app-shell{padding-left:max(.75rem,var(--safe-left));padding-right:max(.75rem,var(--safe-right))}.login-page{padding:max(.75rem,var(--safe-left));align-items:flex-start;padding-top:max(2rem,var(--safe-top))}.login-card{padding:1.35rem 1.1rem}.login-logo{width:min(280px,85vw)}.login-heading{font-size:1.45rem}input[type=text],input[type=password],input[type=email],input[type=number],input[type=datetime-local],select,textarea{font-size:16px}.btn{min-height:var(--touch-min);padding:.55rem 1rem}.btn-sm{min-height:42px;font-size:.85rem}.cam-expand{min-width:var(--touch-min);min-height:var(--touch-min);display:inline-flex;align-items:center;justify-content:center}.btn-icon-rename{width:var(--touch-min);height:var(--touch-min)}.modal-hd{flex-wrap:wrap;gap:.5rem}.modal-hd strong{font-size:1rem;word-break:break-word;max-width:100%}}@media(hover:hover){.btn:hover{filter:brightness(1.03)}.cam-add-tile:hover{filter:none}}