:root{--bg:#14171c;--panel:#1d2229;--line:#2c333d;--txt:#dfe4ea;--mut:#8b96a5;--red:#e5484d;--amb:#f0b429;--grn:#3ccf7a;--blu:#4f8ff7}
*{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--bg);color:var(--txt);font:13px/1.35 "Segoe UI",Inter,Arial,sans-serif;overflow:hidden}
.hide{display:none!important}
.top{height:44px;display:flex;align-items:center;gap:12px;padding:0 14px;background:#0f1216;border-bottom:1px solid var(--line)}
.top b{font-size:15px;white-space:nowrap}
.pill{padding:3px 9px;border-radius:12px;background:#262c35;color:var(--txt);font-size:12px;white-space:nowrap}
.pill.g{background:#173c2a;color:var(--grn)} .pill.a{background:#3f3112;color:var(--amb)} .pill.r{background:#4a1a1d;color:var(--red);font-weight:700}
.tabs{margin-left:auto;display:flex;gap:4px;align-items:center} .tabs span{padding:6px 12px;border-radius:6px;color:var(--mut);cursor:pointer} .tabs .on{background:#262c35;color:var(--txt)}
.btn{cursor:pointer;user-select:none}
.grid{display:grid;grid-template-columns:400px 1fr 380px;grid-template-rows:1fr 150px;height:calc(100vh - 44px)}
.panel{background:var(--panel);border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px;overflow:auto}
h3{margin:0 0 8px;font-size:12px;letter-spacing:.06em;color:var(--mut);text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
.legend{text-transform:none;letter-spacing:0;font-size:10px} .legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 3px 0 8px}
.card{display:grid;grid-template-columns:118px 1fr;gap:8px;padding:8px;border:1px solid var(--line);border-radius:8px;margin-bottom:8px;background:#20262e;cursor:pointer}
.card.new{border-color:var(--red);box-shadow:0 0 0 1px var(--red) inset} .card.sel{outline:2px solid var(--blu)} .card.work{border-color:var(--amb)} .card.muted{opacity:.7}
.thumb{width:118px;height:66px;border-radius:4px;position:relative;background:#333;overflow:hidden} .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .zoom{position:absolute;right:3px;bottom:3px;width:40px;height:23px;border:1px solid #fff;border-radius:2px;overflow:hidden;background:#000} .thumb .zoom img{width:100%;height:100%;object-fit:cover}
.ct{font-size:12px;min-width:0} .ct b{font-size:13px} .ct .m{color:var(--mut)} .ct .btns{margin-top:5px;display:flex;gap:5px;flex-wrap:wrap}
.btns .btn,.act .btn,.arch-bar .btn{padding:3px 8px;border-radius:5px;font-size:11px;border:1px solid var(--line);color:var(--txt);background:#262c35}
.btn.r{background:#4a1a1d;border-color:var(--red)} .btn.g{background:#173c2a;border-color:var(--grn)}
.score{float:right;font-weight:700;color:var(--red)} .score.a{color:var(--amb)} .score.m{color:var(--mut)}
.focus{position:relative;padding:0;background:#0b0e12;display:flex;flex-direction:column}
.fh{padding:8px 10px;font-size:13px} .fh b{font-size:14px} .fh .m{color:var(--mut)}
.video{position:relative;flex:1;margin:0 10px;background:#000;border-radius:6px;overflow:hidden;min-height:200px}
.video video,.video>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.video .ins{position:absolute;right:12px;top:12px;width:240px;height:135px;border:2px solid #fff;border-radius:4px;overflow:hidden;background:#000} .video .ins img{width:100%;height:100%;object-fit:cover} .video .ins span{position:absolute;left:6px;bottom:4px;font-size:11px;color:#fff;font-weight:700;text-shadow:0 0 3px #000}
.video .lbl{position:absolute;left:12px;top:10px;background:rgba(0,0,0,.6);padding:4px 8px;border-radius:4px;font-size:12px}
.video .lbl2{position:absolute;left:12px;bottom:10px;background:rgba(0,0,0,.6);padding:4px 8px;border-radius:4px;font-size:12px}
.tl{position:relative;margin:8px 10px 0;height:46px;background:#161a20;border:1px solid var(--line);border-radius:6px}
.tl .bar{position:absolute;left:0;right:0;top:20px;height:4px;background:#2c333d}
.tl .pt{position:absolute;top:17px;width:3px;height:10px;background:var(--red);border-radius:1px} .tl .pt.l{background:var(--amb)}
.tl span{position:absolute;top:30px;font-size:10px;color:var(--mut)}
.act{margin:8px 10px 10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .act .btn{padding:8px 14px;font-size:13px} .act .k{color:var(--mut);font-size:11px;margin-left:-4px}
.map{height:420px;background:#1a2129;border:1px solid var(--line);border-radius:6px;position:relative;overflow:hidden}
.cam{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--grn);border:2px solid #0b0e12;transform:translate(-50%,-50%);cursor:pointer}
.cam.r{background:var(--red);box-shadow:0 0 0 6px rgba(229,72,77,.25)} .cam.a{background:var(--amb)} .cam.x{background:#555} .cam.sel{outline:2px solid var(--blu)}
.cam .nm{position:absolute;left:14px;top:-3px;font-size:10px;color:var(--mut);white-space:nowrap}
.hl{display:grid;grid-template-columns:1fr auto auto;gap:4px 10px;font-size:12px;margin-top:4px} .hl .m{color:var(--mut)} .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.bottom{grid-column:1/4;display:grid;grid-template-columns:400px 1fr 380px;padding:0;overflow:hidden} .bottom>div{padding:10px;border-right:1px solid var(--line);overflow:auto}
.spark{display:grid;grid-template-columns:90px 1fr 30px;gap:3px 8px;font-size:11px;color:var(--mut);align-items:center} .sp{height:10px;background:#20262e;border-radius:2px;position:relative} .sp i{position:absolute;top:0;bottom:0;width:2px;background:var(--red)}
.kpi{display:flex;gap:10px} .kpi div{flex:1;background:#20262e;border:1px solid var(--line);border-radius:6px;padding:8px} .kpi b{display:block;font-size:20px} .kpi span{font-size:11px;color:var(--mut)}
.cam-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:min-content;align-content:start;gap:8px;padding:10px;height:calc(100vh - 44px);overflow:auto}
.cam-cell{background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden;cursor:pointer} .cam-cell img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#000} .cam-cell div{padding:4px 6px;font-size:11px;display:flex;justify-content:space-between}
.cam-cell.r{border-color:var(--red)} .cam-cell.a{border-color:var(--amb)} .cam-cell.x{opacity:.5}
.arch-bar{display:flex;gap:14px;align-items:center;padding:10px;border-bottom:1px solid var(--line);flex-wrap:wrap} .arch-bar input,.arch-bar select{background:#262c35;color:var(--txt);border:1px solid var(--line);border-radius:4px;padding:3px 6px}
.tbl{width:100%;border-collapse:collapse;font-size:12px} .tbl th,.tbl td{padding:4px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap} .tbl th{color:var(--mut);font-weight:600;position:sticky;top:0;background:var(--panel)} .tbl tr{cursor:pointer} .tbl tr:hover{background:#20262e}
#tab-arch,#tab-rep{height:calc(100vh - 44px);overflow:auto}
.report{padding:16px;max-width:900px} .report table{border-collapse:collapse;margin:8px 0 16px} .report td,.report th{border:1px solid var(--line);padding:4px 10px;font-size:12px}
@media print{body{background:#fff;color:#000} .top,.arch-bar{display:none} .report td,.report th{border-color:#999}}
/* сборка 2: вход, роли, настройка камеры */
.ro .btns,.ro #f-act,.modal.ro .ed{display:none!important}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50;display:flex;align-items:center;justify-content:center}
.mbox{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px;width:min(1100px,96vw);max-height:96vh;overflow:auto}
.mh{display:flex;justify-content:space-between;align-items:center;font-size:14px}
#cfg-cv{width:100%;display:block;border-radius:4px;cursor:crosshair;background:#000}
.cfg-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px} .cfg-row .btn{padding:5px 10px;border-radius:5px;border:1px solid var(--line);background:#262c35}
.cfg-row .btn.g{background:#173c2a;border-color:var(--grn)} .cfg-row input[type=range]{width:180px;vertical-align:middle}
.m{color:var(--mut)}

/* вер3.2: цель поверх видео и полоса «цель в записи» (без опоры на цвет: форма, текст, жёлтый с чёрной обводкой) */
#f-ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.video .ins,.video .lbl,.video .lbl2{z-index:3} .video .lbl{opacity:.85}
.tl{cursor:pointer}
.tl .seg{position:absolute;top:12px;height:16px;background:repeating-linear-gradient(45deg,#ffe600 0 6px,#000 6px 10px);border:2px solid #ffe600;border-radius:3px}
.tl .ph{position:absolute;top:4px;bottom:4px;width:3px;background:#fff;box-shadow:0 0 0 1px #000}
.tl span{color:#dfe4ea}
.tgt{margin:6px 10px 0;font-size:13px;min-height:18px} .tgt b{color:#ffe600}
.btn.y{padding:3px 10px;border-radius:5px;border:2px solid #ffe600;background:#262c35;margin-left:8px}

/* вер3.3: карты */
#map-sel{background:#262c35;color:var(--txt);border:1px solid var(--line);border-radius:4px;font-size:11px;padding:1px 4px;max-width:170px;text-transform:none;letter-spacing:0}
.mbtn{padding:1px 7px;border-radius:4px;border:1px solid var(--line);background:#262c35;color:var(--txt);font-size:11px;text-transform:none;letter-spacing:0} .mbtn.on{border-color:var(--amb);color:var(--amb)}
.legend .lg{display:inline-flex;width:13px;height:13px;border-radius:50%;margin:0 3px 0 6px;align-items:center;justify-content:center;font-size:9px;color:#000;border:1px solid #000;vertical-align:middle}
.lg.r{background:var(--red)} .lg.a{background:var(--amb)} .lg.g{background:var(--grn)} .lg.x{background:#777}
.map .leaflet-container,.map.leaflet-container{background:#1a2129;font:12px/1.3 "Segoe UI",Arial,sans-serif}
.cam-mk{background:none;border:none}
.cam-mk .mk{width:22px;height:22px;border-radius:50%;background:var(--grn);border:2px solid #000;box-shadow:0 0 0 2px #fff;display:flex;align-items:center;justify-content:center;font:bold 13px/1 Arial;color:#000}
.cam-mk .mk.r{background:var(--red);color:#fff;animation:mkp 1.2s infinite} .cam-mk .mk.a{background:var(--amb)} .cam-mk .mk.x{background:#777;color:#fff}
.cam-mk .mk.ap{border:2px dashed #000;opacity:.9} .cam-mk .mk.sel{outline:3px solid var(--blu);outline-offset:2px}
.cam-mk .mk-nm{position:absolute;left:26px;top:3px;white-space:nowrap;font:bold 11px Arial;color:#fff;text-shadow:0 0 3px #000,0 0 2px #000}
@keyframes mkp{0%{box-shadow:0 0 0 2px #fff,0 0 0 2px rgba(229,72,77,.7)}100%{box-shadow:0 0 0 2px #fff,0 0 0 14px rgba(229,72,77,0)}}
.map-bar,.map-unpl{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:11px} .map-bar .btn,.map-unpl .btn{padding:3px 8px;border-radius:5px;border:1px solid var(--line);background:#262c35;color:var(--txt)}
.map-bar .btn.g{background:#173c2a;border-color:var(--grn)} .map-bar .btn.r{background:#4a1a1d;border-color:var(--red)}
#mapadd input,#mapadd select{background:#262c35;color:var(--txt);border:1px solid var(--line);border-radius:4px;padding:4px 6px}
#mapadd .cfg-row{flex-direction:row} #mapadd .m{font-size:11px}

/* вер3.3: вкладки «Источники» и «Оповещения» */
#tab-src,#tab-ntf{height:calc(100vh - 44px);overflow:auto}
.setup{padding:16px;max-width:1250px} .setup h2{margin:0 0 6px;font-size:18px} .setup h3{margin:0 0 8px;font-size:13px;color:var(--txt);text-transform:none;letter-spacing:0}
.setup .m{color:var(--mut)} .setup p{margin:4px 0 8px}
.srcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:12px;margin-top:10px}
.box{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px}
.box label{display:block;margin:6px 0;font-size:12px;color:var(--mut)} .box label input,.box label select{display:block;width:100%;margin-top:3px}
.box label.ck{color:var(--txt);font-size:13px} .box label.ck input{display:inline;width:auto;margin-right:6px} .box label.ck input[type=number]{display:inline;width:70px}
.setup input,.setup select{background:#262c35;color:var(--txt);border:1px solid var(--line);border-radius:4px;padding:6px 8px;font-size:13px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px} .row{display:flex;gap:8px;align-items:center;margin:8px 0;flex-wrap:wrap}
.setup .btn{padding:6px 12px;border-radius:5px;border:1px solid var(--line);background:#262c35;color:var(--txt)} .setup .btn.g{background:#173c2a;border-color:var(--grn)} .setup .btn.r{background:#4a1a1d;border-color:var(--red)}
.setup details{margin-top:8px;font-size:12px} .setup summary{cursor:pointer;color:var(--blu)} .setup ul,.setup ol{margin:4px 0;padding-left:18px}
.pend{background:#3f3112;border:1px solid var(--amb);color:var(--amb);border-radius:6px;padding:8px 10px;margin:8px 0}
.bar{position:relative;height:18px;background:#20262e;border-radius:4px;overflow:hidden;margin:6px 0} .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--blu)} .bar span{position:absolute;left:8px;top:1px;font-size:11px}
.sres{display:flex;gap:10px;margin-top:8px} .sres img{width:220px;border-radius:4px} .ok{color:var(--grn)} .bad{color:var(--red)}
.grp{margin:10px 0 4px;display:flex;gap:10px;align-items:center} .grp b{font-size:13px}
.stbl{width:100%;border-collapse:collapse;font-size:12px} .stbl td,.stbl th{padding:5px 8px;border-bottom:1px solid var(--line);text-align:left} .stbl th{color:var(--mut);font-weight:600}
.stbl tr.off td{opacity:.45} .sw{cursor:pointer;display:inline-block;width:34px;height:18px;border-radius:9px;background:#555;position:relative;vertical-align:middle} .sw::after{content:'';position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff} .sw.on{background:var(--grn)} .sw.on::after{left:18px}
.tabs span{padding:6px 9px} #p-op{max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.box details{margin:8px 0 10px} .box>.btn{display:inline-block;margin-top:6px}

/* вер3.5: выделение камеры на карте, лупа, реквизиты */
.cam-mk .mk.sel{outline:none;box-shadow:0 0 0 3px #ffe600,0 0 0 6px #000;transform:scale(1.3)}
.cam-mk .mk-ar{position:absolute;left:12px;top:-26px;transform:translateX(-50%);color:#ffe600;font:bold 22px/1 Arial;text-shadow:0 0 3px #000,0 0 3px #000,0 0 2px #000;animation:mkb 1s ease-in-out infinite;pointer-events:none}
@keyframes mkb{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-6px)}}
.cam.sel{outline:none;box-shadow:0 0 0 3px #ffe600,0 0 0 6px #000;z-index:5}
.cam.sel::before{content:'▼';position:absolute;left:50%;top:-24px;transform:translateX(-50%);color:#ffe600;font:bold 18px/1 Arial;text-shadow:0 0 3px #000}
.video .lpw{position:absolute;right:12px;top:12px;z-index:4;background:#000;border:2px solid #ffe600;border-radius:6px;overflow:hidden}
.video .lpw{width:364px} .video .lpw canvas{display:block;width:360px;height:360px;cursor:zoom-in}
.video .lph{display:flex;flex-wrap:wrap;gap:3px;align-items:center;padding:3px 4px;background:#111;font-size:11px} .video .lph #f-lpt{margin-right:auto;color:#ffe600;font-weight:700}
.video .lph .btn{padding:1px 6px;font-size:11px} .video .lph .btn.on{background:#3a3a10;border-color:#ffe600}
.video .lpf{font-size:10px;color:#aaa;padding:2px 6px;background:#111}
.video .ins.lpoff{display:none}
#f-lp.on{border-color:#ffe600;color:#ffe600}
#right{display:flex;flex-direction:column} #right .req{margin-top:auto}
.req{display:flex;gap:10px;align-items:center;padding:8px 2px 2px;border-top:1px solid var(--line);font-size:11px;color:var(--mut);line-height:1.5}
.req img{height:26px;display:block} .req b{color:#dfe3ea} .req a{color:var(--mut)} .req a:hover{color:#fff}