:root{--bg:#0f1419;--bg2:#161b22;--bg3:#1c2330;--border:#2a3140;--fg:#e6edf3;--muted:#8b949e;--acc:#12b886;--warn:#f59f00;--crit:#e03131;--info:#4dabf7;--ok:#2f9e44}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--info);text-decoration:none}a:hover{text-decoration:underline}
.center{display:flex;align-items:center;justify-content:center;height:100vh}.muted{color:var(--muted)}.small{font-size:12px}.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.nav{display:flex;align-items:center;gap:6px;padding:0 16px;height:52px;background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5}
.nav .logo{font-weight:700;letter-spacing:.3px;margin-right:12px;color:var(--acc)}.nav a{color:var(--fg);padding:6px 10px;border-radius:6px}.nav a.active,.nav a:hover{background:var(--bg3);text-decoration:none}
.nav .sp{flex:1}.nav select,.nav button{background:var(--bg3);color:var(--fg);border:1px solid var(--border);border-radius:6px;padding:5px 8px}
.page{padding:18px 20px;max-width:1500px;margin:0 auto}h1{font-size:20px;margin:0 0 14px}h2{font-size:15px;margin:22px 0 10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:14px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.grid{display:grid;gap:12px}.grid.c4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.stat{padding:12px 14px}.stat .v{font-size:26px;font-weight:600}.stat .l{color:var(--muted);font-size:12px}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--border);vertical-align:middle}th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.3px}
tr.click{cursor:pointer}tr.click:hover{background:var(--bg3)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.ok{color:var(--ok)}.warn{color:var(--warn)}.crit{color:var(--crit)}.info{color:var(--info)}
.b-ok{background:var(--ok)}.b-warn{background:var(--warn)}.b-crit{background:var(--crit)}.b-info{background:var(--info)}.b-mute{background:#3b4452}
.badge{display:inline-block;padding:1px 7px;border-radius:10px;font-size:11px;font-weight:600;background:var(--bg3);border:1px solid var(--border)}
.badge.crit{background:#3b1416;border-color:#7a1f23}.badge.warn{background:#3d2a05;border-color:#8a5e08}.badge.ok{background:#12351c;border-color:#1f6b33}.badge.info{background:#12283d;border-color:#1f4f7a}
button,.btn{background:var(--bg3);color:var(--fg);border:1px solid var(--border);border-radius:6px;padding:6px 12px;cursor:pointer;font:inherit}button:hover{border-color:var(--muted)}
button.primary{background:var(--acc);border-color:var(--acc);color:#04120c;font-weight:600}button.danger{border-color:var(--crit);color:#ff8787}button:disabled{opacity:.5;cursor:default}
input,select,textarea{background:var(--bg);color:var(--fg);border:1px solid var(--border);border-radius:6px;padding:6px 9px;font:inherit;width:100%}label{display:block;font-size:12px;color:var(--muted);margin:8px 0 3px}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 14px}.form .full{grid-column:1/-1}
.matrix{overflow-x:auto}.matrix td.cell{text-align:center;padding:4px}.cell .c{display:inline-block;min-width:64px;padding:3px 6px;border-radius:6px;font-size:12px;color:#fff}
.c.ok{background:#1f6b33}.c.degraded{background:#8a1c1c}.c.nodata{background:#3b4452;color:#aab}.c.unknown{background:#3b4452}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px;width:100%;max-width:760px;max-height:92vh;overflow:auto}
.modal h3{margin:0 0 12px}.modal h3.modal-h{cursor:move;touch-action:none;user-select:none;padding-right:28px}.modal.dragging{opacity:.96;box-shadow:0 10px 40px rgba(0,0,0,.5)}.modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.tabs{display:flex;gap:4px;margin-bottom:12px;border-bottom:1px solid var(--border)}.tabs a{padding:8px 12px;color:var(--muted);border-bottom:2px solid transparent}.tabs a.active{color:var(--fg);border-color:var(--acc)}
.chart{margin:8px 0 18px}.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;margin:4px 0}.legend .sw{display:inline-block;width:12px;height:3px;vertical-align:middle;margin-right:5px}
.toast{position:fixed;bottom:18px;right:18px;background:var(--bg3);border:1px solid var(--border);padding:10px 14px;border-radius:8px;z-index:30;max-width:400px}
.login{max-width:380px;margin:12vh auto;text-align:center}.login h1{font-size:28px;color:var(--acc)}.login .gbtn{display:inline-block;background:#fff;color:#222;padding:10px 18px;border-radius:6px;font-weight:600;margin-top:16px}
pre{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px;overflow:auto;font-size:12px;max-height:420px}
.hops{font-family:ui-monospace,Menlo,monospace;font-size:12px}.hops span{display:inline-block;background:var(--bg3);padding:1px 6px;border-radius:4px;margin:2px}
.uplot{background:transparent}.u-legend{color:var(--fg)}
@media (max-width:700px){.nav{flex-wrap:wrap;height:auto;padding:6px 8px}.page{padding:10px}}

tr.folder td{background:var(--bg3);cursor:pointer;padding:5px 8px}tr.folder:hover td{background:#222a38}.caret{display:inline-block;width:14px;color:var(--muted);cursor:pointer;user-select:none}th.click{cursor:pointer}th.click:hover{color:var(--fg)}button.small{padding:2px 7px;font-size:12px}
.hops-t{table-layout:fixed;width:100%}.hops-t th,.hops-t td{padding:4px 6px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hops-t .n{width:26px}.hops-t .ip{width:135px}.hops-t .as{width:42%}.hops-t .num{width:44px;text-align:right}.hops-t .ptr{color:var(--muted)}.hops-t td.asn .badge{max-width:100%}.badge.asn{background:#12283d;border-color:#1f4f7a;white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}.modal.wide{max-width:1180px;width:96vw}.badge.asn .asname{color:var(--muted);font-weight:400}tr.hop-bad td{background:#2a1416}tr.hop-warn td{background:#2a2312}.hops .badge{margin:1px 0}
.utip{position:absolute;z-index:10;pointer-events:none;background:rgba(22,27,34,.96);border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:12px;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.4)}.utip .tt-t{color:var(--muted);margin-bottom:3px}.utip .sw{display:inline-block;width:10px;height:3px;vertical-align:middle;margin-right:6px}.badge.owner{background:#232a36;border-color:#3a4250;color:#c9d1d9;max-width:240px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.bgp-wrap{display:flex;gap:14px;align-items:flex-start}.bgp-side{width:280px;flex:none}.bgp-asn{padding:6px 8px;border-radius:6px;cursor:pointer;margin:4px 0}.bgp-asn:hover,.bgp-asn.active{background:var(--bg3)}.bgp-graph svg{display:block}.bgp-node{cursor:pointer}.bgp-node:hover rect{filter:brightness(1.25)}.bgp-edge:hover{opacity:1!important;stroke-width:4}.bgp-tip{min-width:180px}.bgp-tip .warn{color:var(--warn)}.bgp-legend{margin:6px 0 10px}
@media (max-width:900px){.bgp-wrap{flex-direction:column}.bgp-side{width:100%}}
.probe-picks{max-height:160px;overflow:auto;border:1px solid var(--border);border-radius:6px;padding:4px 8px}


/* ---- live map (MapLibre) ---- */
.lm-wrap{margin-top:8px}.lm-loading{color:var(--muted);padding:20px}
.lm{position:relative;height:calc(100vh - 140px);min-height:480px;border:1px solid #2b323f;border-radius:10px;overflow:hidden;background:#0d1015;font-family:Inter,"SF Pro Text",Roboto,system-ui,sans-serif;font-weight:300}
.lm:fullscreen{height:100vh;border:none;border-radius:0}
.lm .lm-map,.lm .lm-map.maplibregl-map{position:absolute!important;top:0;left:0;right:0;bottom:0;width:100%!important;height:100%!important}
.lm .maplibregl-ctrl-attrib{background:rgba(13,16,21,.8);color:#7a889b;font-size:10px}.lm .maplibregl-ctrl-attrib a{color:#7a889b}
.lm-ctl{position:absolute;top:18px;right:18px;display:flex;gap:6px;z-index:3;align-items:center}.lm-tp{background:rgba(22,27,34,.92);border:1px solid var(--border);border-radius:8px;padding:3px 8px}.lm-tp select,.lm-tp input{background:var(--bg);color:var(--fg)}
.lm-seg{display:flex;border:1px solid #1f2937;border-radius:8px;overflow:hidden;background:rgba(22,25,31,.72);backdrop-filter:blur(8px)}.lm-seg button{border:none;border-radius:0;background:transparent;color:#7a889b;padding:5px 10px;font-size:12px}.lm-seg button.on{background:#232936;color:#e6edf3}
.lm-btn{background:#16191f;border:1px solid #2b323f;color:#c9d1d9;border-radius:6px;padding:4px 9px;font-size:14px;line-height:1}
.lm-stats{position:absolute;top:18px;left:18px;z-index:3;background:rgba(22,25,31,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid #1f2937;border-radius:10px;padding:10px 14px;font-size:12px;color:#e6edf3;min-width:160px;box-shadow:0 4px 16px rgba(0,0,0,.35)}.lm-stats .k{color:#7a889b;display:inline-block;width:64px}
.lm-panel{position:absolute;bottom:40px;left:18px;z-index:4;background:rgba(22,25,31,.86);backdrop-filter:blur(8px);border:1px solid #1f2937;border-radius:8px;padding:12px 14px;min-width:280px;max-width:380px;color:#e6edf3;font-size:13px}
.lm-panel .lm-x{position:absolute;top:6px;right:8px;background:none;border:none;color:#7a889b;font-size:16px;padding:0 4px}.lm-ph{margin-bottom:8px;font-size:14px}
.lm-kv td{padding:2px 6px 2px 0;font-size:12px}.lm-kv td:first-child{color:#7a889b;white-space:nowrap}
.lm-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.lm-chart{margin-top:8px}.lm-chart .uplot{background:transparent}
.lm-foot{position:absolute;bottom:0;left:0;right:0;z-index:3;padding:4px 12px;font-size:11px;color:#7a889b;background:rgba(13,16,21,.85);border-top:1px solid #2b323f}
.lm-ws{display:inline-block;width:12px;color:#ffb300}
.lm-svg{display:block;background:#0d1015;cursor:grab}.svg-land path{fill:#16191f;stroke:#2b323f;stroke-width:1}.svg-lbl{paint-order:stroke;stroke:#101318;stroke-width:.25em;stroke-linejoin:round;font-family:Inter,system-ui,sans-serif}.lm-note{color:#ffb300}
.lm-seg .cnt{color:#7a889b;font-size:10px}.lm-xchart{margin-top:4px}.lm-xchart .u-legend{display:none}.lm-xd{max-width:360px}.lm-btn{background:rgba(22,25,31,.72);backdrop-filter:blur(8px);border-color:#1f2937}
.page.wide{max-width:none;padding:8px 12px;height:calc(100vh - 52px);display:flex;flex-direction:column;overflow:hidden}body.has-imp .page.wide{height:calc(100vh - 88px)}.page.wide>div{display:flex;flex-direction:column;flex:1;min-height:0}.page.wide .lm-wrap{flex:1;min-height:0;margin-top:8px}.page.wide .lm{height:100%;min-height:0}
.lm-btn.on{border-color:#00ffaa;color:#00ffaa}
.lm-stats .hint{color:#ffb300;margin-bottom:6px;max-width:220px;white-space:normal}
.lm-stats .lg{margin-top:6px;color:#7a889b;font-size:11px}.lm-stats .lg i{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 4px 0 6px;vertical-align:middle}.lm-lrow{display:flex;align-items:center;gap:4px;margin:3px 0}.lm-lrow .lm-acts{margin-left:auto}.lm-lrow button.small{padding:1px 6px;font-size:11px;margin-left:3px}
.lm-tip{position:absolute;z-index:5;pointer-events:none;background:rgba(22,25,31,.94);border:1px solid #1f2937;border-radius:8px;padding:6px 10px;font-size:12px;color:#e6edf3;white-space:nowrap}.lm-tip .muted{color:#7a889b}.lm-tip .warn{color:#ffb300}
details summary{cursor:pointer;color:var(--muted)}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:14px}.cmp-col{min-width:0}.cmp-h{font-weight:600;margin-bottom:6px}.lm-grp{display:inline-flex;gap:2px;margin-left:6px}@media (max-width:900px){.cmp{grid-template-columns:1fr}}
.cmp .hops-t .ip{width:150px}.cmp .hops-t .as{width:40%}.cmp-body{max-height:60vh;overflow:auto}

/* ---------- навігація: шухляда на мобільному ---------- */
.burger{display:none;background:none;border:none;color:var(--fg);font-size:22px;padding:4px 8px}
.drawer{display:contents}.drawer-ctl{display:contents}.nav-bg{display:none}
@media (max-width:900px){
  .burger{display:inline-block}
  .nav{height:52px;flex-wrap:nowrap;padding:0 10px}
  .drawer{display:none;position:fixed;top:52px;left:0;bottom:0;width:min(84vw,320px);background:var(--bg2);border-right:1px solid var(--border);z-index:40;flex-direction:column;padding:10px;gap:4px;overflow:auto}
  .drawer a{display:block;padding:12px 14px;font-size:16px;border-radius:8px}
  .drawer-ctl{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid var(--border)}
  .drawer-ctl select,.drawer-ctl button{width:100%;padding:10px;font-size:15px}
  body.nav-open .drawer{display:flex}body.nav-open .nav-bg{display:block;position:fixed;inset:52px 0 0 0;background:rgba(0,0,0,.5);z-index:35}
}
/* ---------- загальне для малих екранів ---------- */
@media (max-width:700px){
  .page{padding:10px}h1{font-size:18px}h2{font-size:13px}
  .card{padding:12px;overflow-x:auto}                       /* таблиці — горизонтальний скрол пальцем */
  table{min-width:520px}.matrix table{min-width:0}.lm-kv{min-width:0}
  .matrix td:first-child,.matrix th:first-child{position:sticky;left:0;background:var(--bg2);z-index:1}
  input,select,textarea,button{font-size:16px}              /* iOS не зумить поля при фокусі */
  .form{grid-template-columns:1fr}
  .modal-bg{padding:0;align-items:stretch}.modal,.modal.wide{max-width:100%;width:100%;max-height:100%;height:100%;border-radius:0;padding:14px}
  .modal .actions{position:sticky;bottom:0;background:var(--bg2);padding-top:10px}
  .stat .v{font-size:22px}.grid.c4{grid-template-columns:repeat(2,1fr)}
  .tabs{overflow-x:auto}.row{gap:8px}
  .chart .uplot{max-width:100%}
  /* BGP */
  .bgp-wrap{flex-direction:column}.bgp-side{width:100%}
  .bgp-graph{padding:6px;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;max-height:70vh}
  .bgp-graph svg{display:block}
  .bgp-zoom{position:sticky;bottom:6px;left:6px;display:inline-flex;gap:4px;align-items:center;background:rgba(22,27,34,.9);border:1px solid var(--border);border-radius:8px;padding:4px;margin-top:6px;z-index:2}
  .bgp-tip{display:none!important}
  /* карта */
  .page.wide{padding:0}.page.wide .lm-wrap{margin:0}.page.wide .lm{border:none;border-radius:0}
  .lm-stats{top:10px;left:10px;padding:6px 8px;font-size:11px;min-width:0}.lm-stats .k{width:52px}.lm-stats .lg{display:none}
  .lm-ctl{top:10px;right:10px;gap:4px}.lm-seg button{padding:6px 8px;font-size:12px}.lm-btn{padding:6px 8px}
  .lm-foot{display:none}
  .lm-panel{left:0;right:0;bottom:0;max-width:none;min-width:0;border-radius:12px 12px 0 0;max-height:60vh;overflow:auto;padding:12px 14px 20px}
  .lm-tip{display:none!important}
  .cmp{grid-template-columns:1fr}
  .hops-t .ptr{max-width:120px}
}
tr.hop-silent td{color:var(--muted);font-style:italic}tr.hop-silent td.num{color:var(--muted)}.ping-out{font-size:12px;line-height:1.5}
.rel-form{margin-top:10px}.rel-field{display:inline-flex;flex-direction:column;gap:2px;margin:0 14px 8px 0;vertical-align:top}
.imp-bar{display:flex;align-items:center;gap:6px;padding:8px 16px;background:#3d2a05;border-bottom:1px solid #8a5e08;color:#ffd8a8;font-size:13px;position:sticky;top:0;z-index:6}body.has-imp .nav{top:36px}
.nav select{max-width:220px;width:auto}.nav select:last-of-type{max-width:80px}
.bgp-zoom button{min-width:40px;padding:6px 8px}.bgp-graph svg{display:block}
@media (max-width:900px){body.has-imp .drawer{top:88px}body.has-imp .nav-bg{top:88px}.imp-bar{flex-wrap:wrap;font-size:12px}}
.modal{position:relative}.modal-x{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--muted);font-size:20px;line-height:1;padding:2px 6px}.modal-x:hover{color:var(--fg)}
.demo-stub{max-width:640px;margin:40px auto;text-align:center}.demo-stub p{color:var(--muted);font-size:15px}
.lm-rev{border-top:1px solid #1f2937;margin-top:6px;padding-top:4px}.lm-src select.small{padding:2px 6px;font-size:12px}
.chk-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--border)}.chk-row:last-child{border-bottom:none}.chk-grp{display:inline-flex;align-items:center;gap:6px}.chk-grp>.muted{min-width:34px;font-size:12px}button.chk{padding:7px 12px;font-size:13px;min-width:56px}button.chk.dis{opacity:.35;cursor:not-allowed;border-style:dashed}
.badge.ix{background:#2b2140;border-color:#7048e8;color:#d0bfff;font-weight:600}
.rel-group{margin:10px 0 6px;padding:8px 10px;border:1px dashed var(--border);border-radius:8px}.rel-group>b{display:block;margin-bottom:4px}
.lm-more{margin-top:4px}.lm-more summary{cursor:pointer;list-style:none}.lm-more summary::before{content:'▸ '}.lm-more[open] summary::before{content:'▾ '}
.snmp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(460px,1fr));gap:12px}.snmp-card{margin:0}@media(max-width:700px){.snmp-grid{grid-template-columns:1fr}}
body.wide .page{max-width:none}.snmp-grid.c1{grid-template-columns:1fr}.snmp-grid.c2{grid-template-columns:repeat(2,1fr)}.snmp-grid.c3{grid-template-columns:repeat(3,1fr)}.snmp-grid.c4{grid-template-columns:repeat(4,1fr)}@media(max-width:1100px){.snmp-grid.c3,.snmp-grid.c4{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.snmp-grid.c2,.snmp-grid.c3,.snmp-grid.c4{grid-template-columns:1fr}}
body.bgp-fullpage header,body.bgp-fullpage nav,body.bgp-fullpage .drawer{display:none}body.bgp-fullpage #app{padding:0;max-width:none}.bgp-full svg{display:block}.bgp-speed{pointer-events:none;font-family:ui-monospace,monospace;paint-order:stroke;stroke:#0d1117;stroke-width:3px;stroke-linejoin:round}
.subtabs{display:flex;gap:6px;margin-top:10px}.snmp-card .chart{cursor:crosshair}table.live td{vertical-align:middle}table.live .bar{height:10px;background:#1c2330;border-radius:5px;overflow:hidden}table.live .bar i{display:block;height:100%;width:0;background:#3fb950;transition:width .4s}
.bgp-sessions tr.grp td{background:var(--bg3);padding:5px 8px}.bgp-sessions tr.grp.click:hover td{background:#222a38}.bgp-sessions td.nb{border-bottom:none}.bgp-sessions tr.pair-top td{border-bottom:none}.bgp-sessions .caret{margin-right:6px}
.tbar{display:inline-block;width:70%;height:6px;background:var(--bg3);border-radius:3px;vertical-align:middle;margin-right:6px}.tbar i{display:block;height:100%;background:var(--acc);border-radius:3px}
.sankey{display:block;max-width:100%}.sankey .sk-link{transition:fill-opacity .15s}.sankey .sk-node rect{stroke:rgba(255,255,255,.12)}.sankey text{pointer-events:none}
/* 0.27: папки графіків SNMP */
.folders button{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.snmp-card .devname{margin-top:-10px;margin-bottom:6px}
.snmp-card.dragging{opacity:.4}.snmp-card .drag-handle{cursor:grab;user-select:none;font-size:15px;line-height:1}.snmp-card .drag-handle:active{cursor:grabbing}

.card:empty{display:none}

tr.hl-as td{background:rgba(63,185,80,.10)}table.stats th{font-weight:600;text-align:left}table.stats td,table.stats th{padding:3px 8px}

/* завантаження: смужка прогресу вгорі (запити до API), пригасання сторінки при оновленні на місці, спінер при перемиканні розділу */
#progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;opacity:0;transition:opacity .25s;background:linear-gradient(90deg,transparent 0%,var(--acc) 50%,transparent 100%);background-size:40% 100%;background-repeat:no-repeat;animation:argus-prog 1.1s linear infinite}
#progress.on{opacity:1}
@keyframes argus-prog{from{background-position:-40% 0}to{background-position:140% 0}}
.page.busy{opacity:.55;pointer-events:none;transition:opacity .15s}
.loading-page{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:40vh;color:var(--muted)}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--acc);animation:argus-spin .8s linear infinite}
@keyframes argus-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){#progress,.spinner{animation-duration:2.5s}}
/* 15a: вердикти оператора на вході автокарантину / ручному поверненні в LID 1 */
.vd-need{margin-top:8px;padding:8px 10px;border:1px solid var(--warn);border-left-width:4px;border-radius:6px;background:rgba(245,159,0,.12)}
.vd-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
button.vd-ok{color:var(--ok)}button.vd-no{color:#ff8787}button.vd-ok.vd-on{border-color:var(--ok);font-weight:700}button.vd-no.vd-on{border-color:var(--crit);font-weight:700}
/* 15c: політика Telegram-каналів (Налаштування) */
.np-ch{border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin-top:12px;background:var(--bg)}
.np-head{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.np-hint{margin-top:6px;line-height:1.4}
.np-seg{display:inline-flex;border:1px solid var(--border);border-radius:6px;overflow:hidden}
.np-seg button{border:0;border-radius:0;padding:5px 14px;background:var(--bg3)}.np-seg button+button{border-left:1px solid var(--border)}
.np-seg button.on{background:var(--acc);color:#04120c;font-weight:600}
.np-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:4px 18px;margin-top:8px}
.np-lv{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:4px}
.np-chk{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--fg);margin:5px 0 0}.np-chk input{width:auto;margin:0}
.np-grid input[type=number]{max-width:120px}
.np-test{margin-top:10px}
pre.np-msg{white-space:pre-wrap;margin:0 0 8px}
/* 17a: ArgusDNS — вкладка «DNS» (iframe зі SSO) і кнопка «Відкрити ArgusDNS» */
.dns-bar{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:4px 2px 8px}.dns-title{font-size:14px}
.dns-ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-left:auto}.dns-more{display:none}
.dns-frame{flex:1;min-height:0;width:100%;border:1px solid var(--border);border-radius:8px;background:var(--bg2)}
.nav button.dns-open{border-color:var(--acc);color:var(--acc);padding:5px 9px}.dns-open-tx{display:none}   /* у шапці — лише ↗ з підказкою: меню й так ширше за екран на ≤1500 px; текст — у висувному меню (≤900) і на широких екранах */
@media (max-width:900px),(min-width:1700px){.dns-open-tx{display:inline}}
button.dns-journal{white-space:nowrap}
@media (max-width:700px){.dns-bar{padding:6px 8px}.dns-more{display:inline-block;margin-left:auto}.dns-ctl{display:none;width:100%;margin-left:0}.dns-bar.open .dns-ctl{display:flex}.dns-frame{border:0;border-radius:0}}

/* 17b: прив'язка ArgusDNS у картці org (Адмін) і списки never / manual_only у картці автокарантину A10 */
.dns-bind{margin-top:14px}.dns-bind label{display:block;margin:6px 0 4px}
.dns-bind-force{display:flex;gap:6px;align-items:center;margin-top:6px}.dns-bind-force input{margin:0}
#dns-bind-msg{margin-top:6px}#dns-bind-msg:empty{display:none}
details.a10-lists{margin-top:8px;border:1px solid var(--border);border-radius:8px;padding:8px 12px;background:var(--bg)}
details.a10-lists>summary{cursor:pointer}
.a10-list{margin-top:10px;overflow-x:auto}.a10-list+.a10-list{padding-top:10px;border-top:1px dashed var(--border)}
.a10-list-cfg td{background:rgba(127,127,127,.06)}
@media (max-width:700px){.a10-list input{width:100%!important}}

/* 18a: API-токен ArgusDNS у картці org (блок під slug), результат «Перевірити», підказка над iframe вкладки DNS */
.dns-token{margin-top:12px;padding-top:10px;border-top:1px dashed var(--border)}
#dns-token-msg{margin-top:6px}#dns-token-msg:empty{display:none}
.dns-check{margin-top:8px;padding:7px 10px;border:1px solid var(--border);border-left-width:4px;border-radius:6px;background:var(--bg);line-height:1.45;overflow-wrap:anywhere}
.dns-check.ok{border-left-color:var(--ok)}.dns-check.crit{border-left-color:var(--crit)}.dns-check.warn{border-left-color:var(--warn)}
.dns-check-part{white-space:normal}
.dns-check-mm{margin-top:2px;overflow-wrap:anywhere}
.dns-token-hint{padding:4px 10px 6px;margin:0 0 6px;border-left:3px solid var(--warn);color:var(--warn);background:rgba(245,159,0,.08);border-radius:4px}.dns-token-hint a{color:inherit;text-decoration:underline}
@media (max-width:700px){.dns-token input{width:100%!important}}
/* 18c: стан з'єднання ArgusDNS (шапка, вкладка DNS, картка org) + розділ «DNS за 24 год» у картці абонента A10 + список наглядів */
.adns-strip{padding:5px 10px;border:1px solid var(--border);border-left-width:4px;border-radius:6px;background:var(--bg);line-height:1.45;overflow-wrap:anywhere}
.adns-strip.adns-s-ok{border-left-color:var(--ok)}.adns-strip.adns-s-stale{border-left-color:var(--warn)}.adns-strip.adns-s-none,.adns-strip.adns-s-na{border-left-color:var(--border);color:var(--muted)}
.adns-strip.adns-s-fail{border-left-color:var(--crit);background:rgba(224,49,49,.10)}
#dns-health-strip{margin:0 0 6px}
.adns-org-health{display:flex;gap:6px;align-items:flex-start;margin-top:10px}.adns-org-health #dns-health{flex:1;min-width:0}.adns-org-health button{flex:none;padding:3px 8px}
.nav button.dns-open{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}.nav button.dns-open .adns-dot{margin:0 0 0 6px;width:8px;height:8px;flex:none}.nav button.dns-open .dns-open-tx{margin-left:4px}
.a10-dns{margin-top:10px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg)}
.a10-dns-evs{margin-top:6px}.a10-dns-ev{padding:2px 0;overflow-wrap:anywhere}
.a10-dns-q summary{cursor:pointer;color:var(--muted);margin-top:6px}
.a10-dns-qw{overflow:auto;max-height:340px;margin-top:2px}.a10-dns-qw table{margin-top:0!important}.a10-dns-qw th{position:sticky;top:0;background:var(--bg);z-index:1}
.a10-dnsw table{margin-top:2px}
#sub-cpe{display:inline-flex;align-items:center}
.a10-dns-gap{padding:5px 10px;border:1px solid var(--border);border-left:4px solid var(--warn);border-radius:6px;background:rgba(245,159,0,.12);line-height:1.45}   /* 18d: dns_capture_gap */
@media (max-width:700px){.a10-dns{padding:6px 8px}.a10-dns-qw table{min-width:600px}.a10-dns-qw td:first-child{white-space:nowrap;word-break:normal!important}}