:root{--bg: #eef1f4;--panel: #ffffff;--panel2: #e8edf1;--line: #d3dae0;--text: #15222c;--muted: #5b6b77;--accent: #0e7fae;--accent-ink: #ffffff;--green: #1e9e5a;--red: #d33131;--warn: #b86e00;--navy: #0f2f45;--navy-ink: #e8f1f7;--navy-soft: #9db4c4;--shadow: 0 8px 28px rgba(15, 47, 69, .18);color-scheme:light}*{box-sizing:border-box}html,body,#app{min-height:100%}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}h1,h2,h3{font-weight:600}button{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:.4rem .8rem;cursor:pointer;font-size:13px;font-family:inherit;transition:background .12s,border-color .12s,opacity .12s}button:hover{border-color:var(--accent);background:#f4f8fb}button:active{transform:translateY(1px)}button:disabled{opacity:.5;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}button.primary:hover{background:#0b6890;border-color:#0b6890}button.ok{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}button.ok:hover{background:#17824a;border-color:#17824a}button.danger{color:var(--red);border-color:#f1c2c2}button.danger:hover{border-color:var(--red);background:#d3313114}button.ghost{border-color:transparent;background:transparent;color:var(--muted)}button.ghost:hover{color:var(--text);background:var(--panel2)}input,select,textarea{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:.4rem .6rem;font-size:13px;font-family:inherit;transition:border-color .12s,box-shadow .12s}input{width:100%}select{cursor:pointer}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px #0e7fae33}input::placeholder{color:#8a98a3}input[type=date]::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer}input[type=checkbox]{width:auto;accent-color:var(--accent)}.filters{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.1rem;margin-bottom:1rem}.filters label{display:inline-flex;align-items:center;gap:.4rem;color:var(--muted);font-size:13px}.filters input,.filters select{width:auto}.filters input[type=date]{width:160px}.cb{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer}.badge{display:inline-flex;align-items:center;gap:.35rem;font-size:12px}.dot{width:9px;height:9px;border-radius:50%;display:inline-block}.dot.on{background:var(--green);box-shadow:0 0 5px #1e9e5a99}.dot.off{background:var(--red)}.dot.warn{background:#e08a00;box-shadow:0 0 5px #e08a0099}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid #e3e8ec;font-size:13px;vertical-align:middle}th{color:var(--muted);font-weight:600;font-size:12.5px;border-bottom-color:var(--line)}tr.rk{cursor:pointer}tr.rk:hover td{background:#f4f7f9}.muted{color:var(--muted)}.lbl{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}.layout{min-height:100vh;display:flex;flex-wrap:wrap;align-items:stretch}.sidebar{flex:0 0 220px;background:var(--navy);color:var(--navy-ink);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden}.sidebar .brand{padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.08)}.sidebar .brand b{display:block;font-size:17px}.sidebar .brand span{font-size:12px;color:var(--navy-soft)}.sidebar .brand-logo{background:#fff;border-radius:8px;padding:8px 10px;margin-bottom:10px;display:flex;align-items:center;justify-content:center;height:56px;box-sizing:border-box}.sidebar .brand-logo img{max-width:100%;max-height:100%;object-fit:contain}.sidebar .brand.logo b{font-size:15px}.sidebar .menufilter{padding:10px 10px 0}.sidebar .menufilter input{background:#ffffff14;border-color:#ffffff1f;color:var(--navy-ink);font-size:13px;padding:7px 10px}.sidebar .menufilter input::placeholder{color:var(--navy-soft)}.sidebar .menufilter input:focus{border-color:#fff6;box-shadow:none}.sidebar nav{display:flex;flex-direction:column;padding:8px 10px;gap:2px;flex:1 1 auto;min-height:0;overflow-y:auto}.sidebar nav .grp{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--navy-soft);font-weight:700;padding:12px 12px 4px}.sidebar nav button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:8px 12px;border:0;border-radius:9px;background:transparent;color:var(--navy-ink);font-weight:600;font-size:14px}.sidebar nav button:hover{background:#ffffff14}.sidebar nav button.fav{gap:8px}.sidebar nav button.fav .fav-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar nav button.fav[draggable]:active{opacity:.7}.fav-dot{width:8px;height:8px;border-radius:50%;flex:none;background:#7d8f9b}.fav-dot.on{background:var(--green)}.fav-dot.armed{background:#62c2f0}.fav-dot.off{background:#7d8f9b}.fav-dot.alarm{background:var(--red);box-shadow:0 0 0 3px #d3313159}.fav-n{font-size:10.5px;color:var(--navy-soft);border:1px solid rgba(255,255,255,.25);border-radius:4px;padding:0 5px;font-family:inherit;flex:none}.star{background:none;border:0;padding:0 4px;font-size:17px;line-height:1;color:#b7c3cc;cursor:pointer}.star.on,.star:hover{color:#e3a21a}.key-toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%);z-index:120;background:var(--navy);color:#fff;padding:9px 16px;border-radius:10px;box-shadow:var(--shadow);font-size:13.5px;display:flex;gap:8px;align-items:center;white-space:nowrap;max-width:94vw;overflow:hidden;text-overflow:ellipsis}.key-toast.dim{background:var(--panel);color:var(--text);border:1px solid var(--line)}.key-toast kbd{display:inline-block;border:1px solid rgba(255,255,255,.4);border-radius:4px;padding:0 6px;font-family:inherit;font-size:12px}.key-toast.dim kbd{border-color:var(--line);background:var(--paper)}.solo-wrap{position:relative}.solo-hint{position:absolute;left:10px;bottom:8px;font-size:12px;background:#ffffffd9;padding:2px 8px;border-radius:6px}.solo-hint kbd{border:1px solid var(--line);border-radius:4px;padding:0 4px;font-family:inherit}tr.kb-cur td{background:#e6f2f8!important;box-shadow:inset 3px 0 0 var(--accent)}.sidebar nav button.active{background:var(--accent);color:#fff}.sidebar nav button .nav-badge{margin-left:auto}.sidebar .foot{padding:12px 14px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:var(--navy-soft)}.sidebar .foot b{display:block;color:var(--navy-ink);font-size:14px}.sidebar .foot .fbtns{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.sidebar .foot button{background:#ffffff1a;border:0;color:var(--navy-ink);font-weight:600;padding:6px 10px;font-size:12.5px}.sidebar .foot button:hover{background:#ffffff2e}.content{flex:999 1 560px;min-width:0}.nav-badge{display:inline-block;margin-left:6px;background:#e08a00;color:#fff;font-size:11px;font-weight:700;border-radius:10px;padding:0 6px;min-width:18px;text-align:center}.page,.overview,.monitor{padding:20px 26px 40px}.page h2,.overview h1{margin:0 0 14px;font-size:22px}.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}.toolbar .spacer{flex:1}.toolbar input,.toolbar select{width:auto}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;margin-top:1rem}.panel-head{display:flex;justify-content:space-between;align-items:center}.panel h3{margin:.2rem 0}.tbl-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:auto}.tbl-panel th,.tbl-panel td{padding:.6rem .9rem}.tbl-panel tr:last-child td{border-bottom:0}.chip{display:inline-block;padding:2px 8px;border-radius:7px;font-size:12px;font-weight:600;white-space:nowrap}.c-blue{background:#e3f1f8;color:#0b6890}.c-ok{background:#e3f5ea;color:#15733f}.c-warn{background:#fdf0dc;color:#9a5a00}.c-off{background:#f6e0e0;color:#a32222}.c-gray{background:#e3e8ec;color:#5b6b77}.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-align:left;font:inherit;color:var(--text);min-width:0}button.tile{cursor:pointer}button.tile:hover{border-color:var(--accent);background:var(--panel)}.tile .big{font-size:24px;font-weight:800;line-height:1.1;margin-top:2px}.tile .u{font-size:12px;color:var(--muted);margin-top:3px}.tile.warn{border-color:#e08a00}.tile.warn .big{color:var(--warn)}.tile.bad{border-color:var(--red)}.tile.bad .big{color:var(--red)}.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);padding:4px 8px 0;flex-wrap:wrap}.tabs button{background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;padding:9px 12px;font-weight:600;font-size:14px;color:var(--muted)}.tabs button:hover{color:var(--text);background:transparent}.tabs button.active{color:var(--accent);border-bottom-color:var(--accent)}.perm{border:1px solid var(--line);background:var(--panel);border-radius:7px;padding:3px 9px;font-size:12.5px;font-weight:600;color:var(--muted)}.perm.on{background:#e3f5ea;border-color:var(--green);color:#15733f}.back{border:0;background:transparent;color:var(--muted);padding:0 0 8px;font-size:13px}.back:hover{color:var(--accent);background:transparent}.flash{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:.5rem .8rem;margin:0 0 .8rem;font-size:13px}.note{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;font-size:12.5px;color:var(--muted);line-height:1.5}.note b{color:var(--text)}.warnline{color:var(--warn);font-size:13px}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem;cursor:pointer;transition:border-color .15s}.card:hover{border-color:var(--accent)}.card-name{font-size:1.1rem;margin:.3rem 0 .1rem}.card-meta{font-size:12px}.topbar{display:flex;align-items:center;gap:1rem}.topbar h1{margin:.2rem 0}.statusline{min-height:1.2rem;color:var(--accent);font-size:13px;margin:.25rem 0 .5rem}.clip-video{width:100%;max-width:680px;background:#000;border-radius:6px;margin-top:.4rem}.cam-strip{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:.25rem 0 .75rem}.cam-chip{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:.3rem .7rem;cursor:grab;-webkit-user-select:none;user-select:none;font-size:13px}.cam-chip:active{cursor:grabbing;border-color:var(--accent)}.quad{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.layout-bar{float:right;display:inline-flex;gap:.25rem;font-weight:400}.layout-bar button{font-size:12px;padding:.15rem .55rem;border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:5px;cursor:pointer}.layout-bar button:hover{color:var(--accent)}.layout-bar button.active{background:var(--accent);color:#fff;border-color:var(--accent)}.player{position:relative;aspect-ratio:16 / 9;background:#000;border:1px solid var(--line);border-radius:6px;overflow:hidden;color:#fff}.player video{width:100%;height:100%;object-fit:contain;background:#000}.player:fullscreen{aspect-ratio:auto;border:none;border-radius:0}.player:fullscreen video{object-fit:contain}.player-label{position:absolute;left:0;bottom:0;padding:.2rem .5rem;font-size:12px;color:#fff;background:#0000008c;border-top-right-radius:6px}.player-label .slot-num{display:inline-block;min-width:1.1rem;text-align:center;margin-right:.3rem;background:var(--accent);color:#fff;border-radius:4px;font-weight:700}.player-clear{position:absolute;top:.3rem;right:.3rem;padding:.1rem .4rem;font-size:12px;background:#0000008c;color:#fff;border-color:transparent}.player-hint{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:#9db4c4;font-size:13px;pointer-events:none}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}.login-box{display:flex;flex-direction:column;gap:.6rem;width:300px;padding:1.6rem;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--shadow)}.login-box .brand{font-size:1.5rem}.login-logo{display:flex;justify-content:center;align-items:center;height:72px;margin-bottom:4px}.login-logo img{max-height:100%;max-width:100%;object-fit:contain}.login-box h3{margin:0 0 .3rem;color:var(--muted);font-weight:500}.login-box input{padding:.55rem .7rem}.login-err{color:var(--red);font-size:13px}.navuser{color:var(--muted);font-size:13px;margin-right:.5rem}.ok-tag{color:var(--green);font-size:13px}.err-tag{color:var(--red);font-weight:700;font-size:13px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f222c73;display:flex;align-items:center;justify-content:center;z-index:100}.modal-box{display:flex;flex-direction:column;gap:.6rem;width:320px;padding:1.2rem;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:var(--shadow)}.modal-box input{padding:.5rem .6rem}.pager{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem 1rem;margin-bottom:.6rem}.pager-bottom{margin:.8rem 0 0}.pager-nav{display:inline-flex;align-items:center;gap:.4rem}.pager-nav label{display:inline-flex;align-items:center;gap:.35rem;font-size:13px;margin-right:.6rem}.pager .err{color:var(--red);font-size:13px}.filters input.search{width:200px}.live-wrap{display:flex;gap:.6rem;align-items:flex-start}.live-wrap .quad{flex:1;min-width:0}.cam-side{width:250px;flex:none;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.45rem;max-height:78vh;overflow:auto;font-size:13px}.cam-side-head{display:flex;justify-content:space-between;align-items:center;font-weight:600;padding:.1rem .3rem .35rem}.cam-side-close{padding:0 .4rem;border:none;background:transparent;color:var(--muted);font-size:14px}.cam-side-close:hover{color:var(--text)}.cam-side-search{width:100%;margin-bottom:.35rem}.cam-side-hint{font-size:11px;padding:0 .3rem .4rem}.cam-row{display:flex;align-items:center;gap:.45rem;padding:.32rem .35rem;border-radius:6px;cursor:grab;-webkit-user-select:none;user-select:none;border:1px solid transparent}.cam-row:hover{background:var(--panel2);border-color:var(--line)}.cam-row-thumb{flex:0 0 56px;height:34px;border-radius:4px;background:#000;overflow:hidden;display:flex;align-items:center;justify-content:center}.cam-row-thumb img{width:100%;height:100%;object-fit:cover}.cam-row-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}.cam-row-age{font-size:10.5px}.cam-row:active{cursor:grabbing}.cam-row{opacity:.55}.cam-row.shown,.cam-row:hover{opacity:1}.cam-row-slot{flex:none;width:20px;height:20px;border-radius:5px;font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;background:var(--panel2);color:var(--muted)}.cam-row-slot.on{background:var(--accent);color:#fff}.cam-row-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cam-side-foot{padding:.45rem .3rem .1rem;border-top:1px solid var(--line);margin-top:.35rem;font-size:12px}.al-thumb{height:28px;width:46px;object-fit:cover;border-radius:3px;vertical-align:middle;margin-right:4px;background:#000}.imp-banner{background:#f5b942;color:#3a2a00;padding:6px 14px;display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600}.imp-back{margin-left:auto;background:#3a2a00;color:#ffe9b8;border:0;border-radius:6px;padding:4px 10px;cursor:pointer;font-weight:600}.imp-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f222c73;display:flex;align-items:flex-start;justify-content:center;padding-top:12vh;z-index:100}.imp-box{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;width:min(440px,92vw);box-shadow:var(--shadow)}.imp-box h3{margin:0 0 10px}.imp-box input{width:100%;font-size:15px;padding:.55rem .7rem}.imp-list{list-style:none;margin:10px 0 0;padding:0;max-height:46vh;overflow:auto}.imp-list li{padding:8px 10px;border-radius:6px;cursor:pointer;display:flex;justify-content:space-between}.imp-list li:hover{background:var(--panel2)}.imp-list li.imp-grp{cursor:default;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:10px 10px 2px}.imp-list li.imp-grp:hover{background:none}.imp-err{color:var(--red);font-size:13px;margin-top:6px}.imp-hint{color:var(--muted);font-size:11.5px;margin-top:8px}.layout-grid{display:grid;gap:.5rem;flex:1;min-width:0}.live-wrap .layout-grid{flex:1;min-width:0}.layout-grid>*{min-width:0;min-height:0}.layout-grid:fullscreen,.quad:fullscreen{background:#000;width:100vw;height:100vh;aspect-ratio:auto!important;gap:2px;padding:0;margin:0}.layout-grid:fullscreen>*,.quad:fullscreen>*{background:#000;border-radius:0}.layout-grid>.player{aspect-ratio:auto;height:100%}.layout-empty{grid-column:1 / -1;padding:2rem;text-align:center}.layout-select{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:.2rem .4rem;font-size:13px;margin-right:.4rem}.ampel{display:flex;gap:8px;flex-wrap:wrap}.ampel-item{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);white-space:nowrap}.ampel-item i{width:9px;height:9px;border-radius:50%;background:#c8d0d6;display:inline-block}.ampel-item.st-ok i{background:var(--green)}.ampel-item.st-warn i{background:#e08a00}.ampel-item.st-off i{background:var(--red)}.ampel-item.st-ok{color:var(--text)}.print-head{display:none}@media print{.sidebar,.toolbar,.tabs,.tiles,.back,.head button,.imp-banner,.flash{display:none!important}.content,.page{padding:0!important}.tbl-panel{border:0}.print-head{display:block;margin:0 0 10px}body{background:#fff}}@media(max-width:760px){.layout{flex-direction:column;flex-wrap:nowrap}.sidebar{flex:0 0 auto;position:static;height:auto;max-height:none}.sidebar .brand{padding:12px 14px 8px}.sidebar .menufilter{display:none}.sidebar nav{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding:6px 8px;gap:4px}.sidebar nav .grp{display:none}.sidebar nav button{width:auto;white-space:nowrap;padding:6px 10px;font-size:13px}.sidebar .foot{display:flex;align-items:center;gap:8px;padding:8px 12px}.sidebar .foot b{display:inline;margin-right:4px}.sidebar .foot .fbtns{margin:0 0 0 auto}.subtabs{flex-wrap:wrap}.subtabs button{padding:.4rem .55rem}.page,.overview,.monitor{padding:.75rem .6rem 2rem}.topbar{flex-wrap:wrap;gap:.5rem}.panel{padding:.7rem;overflow-x:auto}.panel-head{flex-wrap:wrap;gap:.4rem}.filters{flex-wrap:wrap}.filters label{max-width:100%;box-sizing:border-box}.filters label:has(input.search){width:100%;display:flex;align-items:center;gap:.4rem}.filters input.search{flex:1;width:auto;min-width:0}table{display:block;max-width:100%;overflow-x:auto}.tbl-panel table{display:table}img,video,canvas{max-width:100%}select,input,textarea{max-width:100%;box-sizing:border-box}.toolbar input,.toolbar select{width:100%!important}.filters label:has(select){display:flex;align-items:center;gap:.4rem;max-width:100%}.filters select{min-width:0;flex:1}pre,code{white-space:pre-wrap;word-break:break-word}}