/* ArnexADS, панель. Светлая «планшетная» рамка на сером фоне:
   серо-бирюзовая шапка переходит в мятный фон, карточки из матового стекла,
   строки таблиц и списков как белые плашки. Шрифты Outfit (заголовки, цифры)
   и Inter (таблицы). Тёмной темы нет. */
:root{
  --page:#e6e7e9;
  --ink:#1f2a2e; --ink-2:#6b7c82; --ink-3:#9aa8ad;
  --teal:#5f8a93; --teal-2:#8fb1b6; --deep:#3f5f66; --mint:#f2f7f5; --mint-2:#eef4f3; --mint-3:#e4eeeb;
  --line:rgba(31,42,46,.09); --line-soft:rgba(31,42,46,.055);
  --glass:rgba(246,250,248,.74); --glass-line:rgba(255,255,255,.75);
  --shadow:0 10px 30px rgba(60,90,90,.08); --shadow-sm:0 1px 2px rgba(60,90,90,.05),0 4px 14px rgba(60,90,90,.05); --shadow-lg:0 30px 80px rgba(50,70,75,.16),0 2px 6px rgba(50,70,75,.05);
  --accent:var(--deep); --accent-soft:#e2eef0;
  --ok:#2f8f5b; --ok-soft:#e3f3ea; --warn:#b8741a; --warn-soft:#fbeedb; --bad:#d64545; --bad-soft:#fbe5e5; --info:#3f6f7a; --info-soft:#e2eef0;
  --peach:#F4C48C; --lilac:#C88CFF; --forest:#3F5F4B; --steel:#8FA6B0;
  --r-card:22px; --r:14px; --r-sm:12px; --r-pill:100px;
  --display:"Outfit","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{background:var(--page); color-scheme:light; -webkit-text-size-adjust:100%}
html,body{overflow-x:clip; max-width:100%}
body{margin:0; padding:28px 24px 40px; background:var(--page); color:var(--ink); font:14px/1.5 var(--body); -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums}
a{color:inherit; text-decoration:none}
a.lnk{color:var(--ink); border-bottom:1px solid var(--line)} a.lnk:hover{border-color:var(--deep)}
h1{font:300 34px/1.1 var(--display); letter-spacing:-.01em; margin:0; color:#fff}
h2{font:400 16.5px/1.3 var(--display); color:var(--ink); margin:0}
:focus-visible{outline:2px solid var(--deep); outline-offset:2px; border-radius:8px}
[hidden]{display:none!important}
b{font-weight:600}

/* ── Рамка ─────────────────────────────────────────────────────────── */
.shell{position:relative; max-width:1360px; min-height:calc(100vh - 68px); margin:0 auto; border-radius:32px; overflow:hidden; box-shadow:var(--shadow-lg),0 0 0 6px rgba(255,255,255,.55); background:linear-gradient(180deg,#5f8a93 0px,#78a0a7 180px,#a8c4c6 340px,#dbe8e6 470px,#f2f7f5 560px,#f7faf9 100%)}

/* ── Шапка ─────────────────────────────────────────────────────────── */
.top{color:#fff}
header{display:flex; align-items:center; gap:18px; padding:18px 28px 6px}
.brand{display:flex; align-items:center; flex:none}
.brand img{height:30px; width:auto; display:block}
.nav{display:flex; gap:8px; margin-left:auto}
.nav a{display:inline-flex; align-items:center; gap:8px; height:42px; min-width:42px; padding:0 12px; border-radius:var(--r-pill); color:#fff; font-size:13.5px; font-weight:500; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(10px); transition:background .18s var(--ease),color .18s var(--ease),transform .12s var(--ease); white-space:nowrap}
.nav a svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none}
.nav a span{display:none}
.nav a:hover{background:rgba(255,255,255,.26)}
.nav a[aria-current]{background:#fff; color:var(--ink); border-color:#fff; box-shadow:var(--shadow-sm); padding:0 16px 0 12px}
.nav a[aria-current] span{display:inline}
@media (min-width:1240px){.nav a span{display:inline} .nav a{padding:0 16px 0 13px}}
.head-right{margin-left:auto; display:flex; align-items:center; gap:8px}
.nav + .head-right{margin-left:0}
.search{display:flex; align-items:center; gap:8px; height:42px; padding:0 14px; border-radius:var(--r-pill); background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); color:#fff; backdrop-filter:blur(10px); width:220px; transition:background .18s var(--ease),width .2s var(--ease)}
.search:focus-within{background:rgba(255,255,255,.92); color:var(--ink); width:260px}
.search svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; flex:none; opacity:.9}
.search input{flex:1; min-width:0; border:0; background:transparent; color:inherit; font:inherit; font-size:13px; outline:none}
.search input::placeholder{color:currentColor; opacity:.75}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.who{display:inline-flex; align-items:center; gap:10px; margin-left:4px}
.who .av{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:#fff; color:var(--deep); font:500 15px var(--display); box-shadow:var(--shadow-sm)}
.who .nm{display:flex; flex-direction:column; line-height:1.15}
.who .nm b{font-size:13px; font-weight:500} .who .nm small{font-size:11px; opacity:.8}
.icon-btn{appearance:none; width:38px; height:38px; display:grid; place-items:center; cursor:pointer; background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ink-2); box-shadow:var(--shadow-sm); transition:color .18s var(--ease),background .18s var(--ease)}
.icon-btn:hover{color:var(--ink)}
.icon-btn.round{border-radius:50%; width:42px; height:42px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); color:#fff; box-shadow:none; backdrop-filter:blur(10px)}
.icon-btn.round:hover{background:rgba(255,255,255,.3); color:#fff}
.icon-btn svg,.btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none}
.burger{display:none}

/* Заголовок раздела и ключевые цифры на градиенте */
.hero{display:flex; align-items:flex-end; gap:28px; padding:26px 28px 8px; flex-wrap:wrap}
.hero-l{flex:1 1 380px; min-width:0}
.hero-l .crumbs{color:rgba(255,255,255,.8); margin-bottom:8px}
.hero-l .crumbs a:hover{color:#fff} .hero-l .crumbs b{color:#fff}
.ph-sub{color:rgba(255,255,255,.82); font-size:13.5px; margin-top:8px; font-weight:400}
.ph-r{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:14px}
.hero-r{display:flex; gap:34px; align-items:flex-end; margin-left:auto; padding-bottom:6px}
.hs{display:flex; align-items:flex-end; gap:14px}
.hs-num{font:400 34px/1 var(--display); letter-spacing:-.01em; white-space:nowrap; display:flex; align-items:center; gap:8px}
.hs-num .hd{display:inline-grid; place-items:center; width:18px; height:18px; border-radius:5px; font-size:0}
.hs-num .hd svg{width:11px; height:11px; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.hs-num .hd.up{background:#2f8f5b} .hs-num .hd.down{background:#d64545} .hs-num .hd.flat{background:rgba(255,255,255,.35)}
.hs-label{font-size:12px; color:rgba(255,255,255,.78); margin-top:6px; white-space:nowrap}
.spark{width:84px; height:30px; display:block; flex:none; margin-bottom:22px}
.spark rect{fill:rgba(255,255,255,.55)} .spark rect.hi{fill:#fff}

/* Период под заголовком */
.period-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 28px 22px}
.period-bar .range{color:rgba(255,255,255,.85); font-size:12.5px; margin-left:auto; white-space:nowrap}
.seg{display:inline-flex; padding:4px; gap:2px; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.35); border-radius:var(--r-pill); flex-wrap:wrap; backdrop-filter:blur(10px)}
.seg button{appearance:none; border:0; background:transparent; color:#fff; cursor:pointer; font:inherit; font-size:12.5px; font-weight:500; padding:7px 13px; border-radius:var(--r-pill); transition:color .18s var(--ease),background .18s var(--ease); white-space:nowrap}
.seg button:hover{background:rgba(255,255,255,.18)} .seg button[aria-pressed="true"]{background:#fff; color:var(--ink); box-shadow:var(--shadow-sm)}
.seg-select{display:none}
.custom-range{display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.85)}
.custom-range input{font:inherit; font-size:12.5px; color:var(--ink); background:#fff; border:1px solid transparent; border-radius:var(--r-pill); padding:7px 12px}
/* Тот же сегмент внутри карточек и окон */
.card .seg,.modal .seg{background:var(--mint-2); border-color:transparent; backdrop-filter:none}
.card .seg button,.modal .seg button{color:var(--ink-2)} .card .seg button:hover,.modal .seg button:hover{background:rgba(255,255,255,.7); color:var(--ink)}
.card .seg button[aria-pressed="true"],.modal .seg button[aria-pressed="true"]{color:var(--ink)}

/* ── Каркас страницы ───────────────────────────────────────────────── */
.wrap{position:relative; padding:0 28px 60px}
.crumbs{display:flex; gap:6px; font-size:12.5px; color:var(--ink-3)}
.crumbs a:hover{color:var(--ink)} .crumbs b{color:var(--ink-2); font-weight:500}
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:16px}
.c12{grid-column:span 12} .c8{grid-column:span 8} .c6{grid-column:span 6} .c4{grid-column:span 4}
@media (max-width:980px){.c8,.c6,.c4{grid-column:span 12}}

.card{background:var(--glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--glass-line); border-radius:var(--r-card); box-shadow:var(--shadow); overflow:hidden; min-width:0}
.card + .card, .grid + .card, .kpis + .card, .card + .grid, .grid + .grid, .kpis + .grid{margin-top:16px}
.card-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:18px 22px 4px}
.card-r{margin-left:auto; color:var(--ink-3); font-size:12.5px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.card-r a{color:var(--ink-2); background:#fff; padding:6px 12px; border-radius:var(--r-pill); box-shadow:var(--shadow-sm); font-size:12.5px}
.card-r a:hover{color:var(--ink)}
.card-pad{padding:14px 22px 20px}
.card-head + .card-pad{padding-top:12px}

/* Показатели: одна карточка с ячейками */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:16px}
.kpi{background:var(--glass); backdrop-filter:blur(20px); border:1px solid var(--glass-line); border-radius:18px; padding:14px 18px 12px; box-shadow:var(--shadow); min-width:0}
.k-label{color:var(--ink-2); font-size:12.5px; font-weight:400}
.k-val{font:400 28px/1.15 var(--display); letter-spacing:-.01em; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink)}
.k-sub{display:flex; align-items:center; gap:8px; margin-top:6px; color:var(--ink-3); font-size:12px; min-height:20px}
.delta{display:inline-flex; align-items:center; font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:var(--r-pill)}
.delta.up{color:var(--ok); background:var(--ok-soft)} .delta.down{color:var(--bad); background:var(--bad-soft)} .delta.flat{color:var(--ink-3); background:var(--mint-3)}

/* Метки */
.pill{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:500; padding:4px 11px 4px 9px; border-radius:var(--r-pill); background:#fff; color:var(--ink-2); white-space:nowrap; border:1px solid var(--line)}
.pill::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; opacity:.9}
.pill.ok{background:var(--ok-soft); color:var(--ok); border-color:transparent} .pill.bad{background:var(--bad-soft); color:var(--bad); border-color:transparent} .pill.warn{background:var(--warn-soft); color:var(--warn); border-color:transparent} .pill.info{background:var(--info-soft); color:var(--info); border-color:transparent}
.net{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink); padding:3px 10px 3px 7px; border-radius:var(--r-pill); background:var(--mint-2); white-space:nowrap}
.net i{width:8px; height:8px; border-radius:50%; flex:none}
.nets{display:flex; gap:4px; flex-wrap:wrap}
.meta{color:var(--ink-3); font-size:11.5px; margin-top:2px}
.help{color:var(--ink-2); font-size:12.5px; line-height:1.55; margin-top:10px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px}

/* Кнопки */
.btn{appearance:none; cursor:pointer; font:inherit; font-size:13px; font-weight:500; padding:9px 16px; border-radius:var(--r-pill); border:1px solid var(--line); background:#fff; color:var(--ink); display:inline-flex; align-items:center; gap:7px; box-shadow:var(--shadow-sm); transition:border-color .18s var(--ease),transform .12s var(--ease),opacity .18s,background .18s; white-space:nowrap}
.btn:hover{border-color:rgba(63,95,102,.35)} .btn:active{transform:scale(.97)} .btn:disabled{opacity:.55; cursor:default}
.btn.primary{background:var(--deep); border-color:var(--deep); color:#fff; box-shadow:0 8px 20px rgba(63,95,102,.22)}
.btn.primary:hover{background:#365259; transform:translateY(-1px)}
.btn.danger{color:var(--bad)} .btn.danger:hover{border-color:var(--bad)}
.btn.sm{padding:6px 12px; font-size:12px}
.row-btns{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:16px}
.row-btns .msg{font-size:12.5px; color:var(--bad); margin-left:4px}

/* Переключатель */
.sw{display:inline-flex; align-items:center; cursor:pointer; vertical-align:middle}
.sw input{position:absolute; opacity:0; width:0; height:0}
.sw .tr{width:38px; height:22px; border-radius:99px; background:var(--mint-3); position:relative; transition:background .2s var(--ease)}
.sw .tr::after{content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s var(--ease)}
.sw input:checked + .tr{background:var(--ok)} .sw input:checked + .tr::after{transform:translateX(16px)}
.sw input:disabled + .tr{opacity:.5}
.sw input:focus-visible + .tr{outline:2px solid var(--deep); outline-offset:2px}

/* Таблицы: строки как белые плашки */
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -22px; padding:0 22px}
.tbl{width:100%; border-collapse:separate; border-spacing:0 8px; font-size:13px; min-width:560px; margin-top:-8px}
.tbl.narrow{min-width:0}
.tbl th{text-align:left; color:var(--ink-3); font-size:12.5px; font-weight:400; padding:6px 14px 0; white-space:nowrap}
.tbl td{padding:12px 14px; background:#fff; vertical-align:middle; border-top:1px solid rgba(255,255,255,.9); border-bottom:1px solid rgba(60,90,90,.05)}
.tbl td:first-child{border-radius:var(--r) 0 0 var(--r)} .tbl td:last-child{border-radius:0 var(--r) var(--r) 0}
.tbl .num{text-align:right; white-space:nowrap}
.tbl tbody tr.link{cursor:pointer} .tbl tbody tr.link:hover td{background:#f7fbf9}
.tbl th.sortable{cursor:pointer; user-select:none} .tbl th.sortable:hover{color:var(--ink)}
.tbl th.sortable i{display:inline-block; width:0; height:0; margin-left:5px; border:4px solid transparent; border-top-color:currentColor; opacity:.35; vertical-align:middle; transform:translateY(2px)}
.tbl th.sorted i{opacity:1} .tbl th.sorted.asc i{transform:translateY(-2px) rotate(180deg)}
.tbl tfoot td{background:var(--mint-2); font-weight:600; color:var(--ink); border-color:transparent}
.tbl small{color:var(--ink-3); font-weight:400}
.tbl tbody tr.first td{background:var(--accent-soft)}
.pb{display:inline-block; width:56px; height:5px; border-radius:99px; background:var(--mint-3); margin-left:8px; vertical-align:middle; overflow:hidden}
.pb i{display:block; height:100%; background:linear-gradient(90deg,var(--teal),var(--deep)); border-radius:99px}

/* Графики */
.chart-wrap{position:relative; min-width:0; padding-top:6px}
.chart-wrap canvas{display:block; width:100%}
.ctip{position:absolute; display:none; pointer-events:none; background:#fff; border:1px solid var(--line-soft); border-radius:var(--r); padding:10px 13px; box-shadow:var(--shadow); font-size:12px; z-index:5; min-width:160px}
.ctip b{display:block; font:500 13px var(--display); margin-bottom:5px}
.ctip div{display:flex; align-items:center; gap:6px; color:var(--ink-2)} .ctip div span{margin-left:auto; color:var(--ink)}
.ctip i{width:8px; height:8px; border-radius:50%; flex:none}
.legend{display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--ink-2)}
.legend span{display:inline-flex; align-items:center; gap:6px} .legend i{width:9px; height:9px; border-radius:50%}

/* Строки-списки и тревоги: плашки */
.rows{display:flex; flex-direction:column; gap:8px}
.row{display:flex; align-items:center; gap:12px; padding:11px 14px; background:#fff; border-radius:var(--r); border-bottom:1px solid rgba(60,90,90,.05)}
.row .k{color:var(--ink-2); font-size:13px; min-width:0} .row .v{margin-left:auto; font:500 15px var(--display); white-space:nowrap; text-align:right}
.alerts{display:flex; flex-direction:column; gap:8px}
.alert{display:flex; gap:12px; align-items:center; padding:10px 12px; background:#fff; border-radius:var(--r); font-size:13px; border-bottom:1px solid rgba(60,90,90,.05)}
.alert i{width:34px; height:34px; border-radius:50%; flex:none; background:var(--mint-2); display:grid; place-items:center; position:relative}
.alert i::after{content:""; width:8px; height:8px; border-radius:50%; background:var(--ink-3)}
.alert.warn i{background:var(--warn-soft)} .alert.warn i::after{background:var(--warn)}
.alert.error i{background:var(--bad-soft)} .alert.error i::after{background:var(--bad)}
.alert.info i{background:var(--info-soft)} .alert.info i::after{background:var(--info)}
.alert .when{order:3; margin-left:auto; color:var(--ink-2); font-size:11.5px; white-space:nowrap; padding:4px 10px; border-radius:var(--r-pill); background:var(--mint-2)}
.alert > span:last-child{flex:1; min-width:0}
.netcard-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.netcard-head .dot{width:12px; height:12px; border-radius:50%}
.netcard-head h3{margin:0; font:400 19px/1.2 var(--display)}
.statgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; margin:16px 0}
.statgrid > div{background:#fff; border-radius:var(--r); padding:10px 14px}
.statgrid .k-label{font-size:12px} .statgrid .sv{font:400 20px/1.2 var(--display); margin-top:3px}

/* Код тега */
.snippet{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.snippet code{flex:1; min-width:200px; background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:10px 12px; font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--ink); overflow:auto; white-space:pre; user-select:all}

/* Вкладки */
.tabs{display:inline-flex; gap:2px; padding:4px; background:var(--glass); border:1px solid var(--glass-line); border-radius:var(--r-pill); margin:0 0 16px; box-shadow:var(--shadow-sm)}
.tabs button{appearance:none; border:0; background:transparent; color:var(--ink-2); cursor:pointer; font:inherit; font-size:13px; font-weight:500; padding:8px 18px; border-radius:var(--r-pill)}
.tabs button[aria-selected="true"]{background:var(--deep); color:#fff}
.tabs button:hover:not([aria-selected="true"]){color:var(--ink)}

/* Формы */
.f{margin-bottom:12px} .f label{display:block; font-size:12.5px; color:var(--ink-2); margin-bottom:6px; font-weight:500}
.f input,.f select,.f textarea{width:100%; font:inherit; font-size:14px; padding:10px 13px; border-radius:var(--r-sm); border:1px solid #dbe4e2; background:#f7faf9; color:var(--ink); transition:border-color .18s var(--ease),background .18s}
.f textarea{min-height:80px; resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none; border-color:var(--teal); background:#fff}
.f input:disabled,.f select:disabled{color:var(--ink-2); background:var(--mint-2)}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:0 12px} @media (max-width:560px){.f2{grid-template-columns:1fr}}
.filters{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0 12px; align-items:end}
.filters .f{margin-bottom:6px}
.filters .f .btn{margin-bottom:0}
.inline-select{font:inherit; font-size:12.5px; color:var(--ink); background:#f7faf9; border:1px solid #dbe4e2; border-radius:var(--r-pill); padding:6px 10px; max-width:220px}
.inline-select:focus{outline:none; border-color:var(--teal)}

/* Пустые состояния */
.empty{padding:44px 24px; text-align:center; color:var(--ink-2)}
.empty h3{margin:0 0 6px; font:400 18px/1.3 var(--display); color:var(--ink)}
.empty p{margin:0 auto 14px; max-width:460px; font-size:13.5px; line-height:1.6; color:var(--ink-2)}
.empty.err h3{color:var(--bad)}
.empty-s{padding:22px; text-align:center; color:var(--ink-3); font-size:13px}
.skel-list{display:flex; flex-direction:column; gap:10px; padding:4px 0}
.skel{height:18px; border-radius:7px; background:linear-gradient(90deg,rgba(255,255,255,.55) 25%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.55) 75%); background-size:200% 100%; animation:shim 1.4s linear infinite}
.skel:nth-child(2){width:70%} .skel:nth-child(3){width:85%}
@keyframes shim{to{background-position:-200% 0}}
.dlg-text{margin:0; color:var(--ink-2); line-height:1.6}

/* Модальные окна */
.modal{position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:20px; background:rgba(31,42,46,.32); backdrop-filter:blur(8px)}
.modal .box{width:100%; max-width:520px; max-height:88vh; overflow:auto; overscroll-behavior:contain; background:#fff; border-radius:24px; box-shadow:var(--shadow-lg)}
.modal .box.wide{max-width:720px}
.modal .box-head{display:flex; align-items:center; gap:12px; padding:20px 24px 12px}
.modal .box-head h2{font:400 21px/1.2 var(--display); color:var(--ink); flex:1}
.modal .box-head .icon-btn{border-radius:50%; box-shadow:none; background:var(--mint-2); border-color:transparent}
.modal .box-body{padding:8px 24px 24px}
.modal .f input,.modal .f select,.modal .f textarea{background:#f7faf9}

/* Правила места, вкладка «Тег» */
.seg.small{display:inline-flex; margin-bottom:12px}
.seg.small button{padding:6px 12px; font-size:12px}
.rsec{padding:16px 0; border-top:1px solid var(--line-soft)}
.rsec:first-child{padding-top:0; border-top:0}
.rsec h3{margin:0 0 12px; font:500 14px/1.3 var(--display); color:var(--ink)}
.rsec .f{margin-bottom:10px}
.rl-foot{position:sticky; bottom:-24px; margin:6px -24px -24px; padding:14px 24px 18px; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-top:1px solid var(--line-soft)}
.f3{display:grid; grid-template-columns:repeat(3,1fr); gap:0 12px} .f4{display:grid; grid-template-columns:repeat(4,1fr); gap:0 12px}
@media (max-width:560px){.f3{grid-template-columns:1fr} .f4{grid-template-columns:1fr 1fr}}
.inl{display:flex; align-items:center; gap:8px; color:var(--ink-2); font-size:12.5px}
.inl input{width:84px; flex:none} .inl select{flex:1; min-width:0}
.chain{display:flex; align-items:center; gap:3px; flex-wrap:wrap}
.chain .arr{color:var(--ink-3); font-size:12px; padding:0 1px}
.chain.auto .net{color:var(--ink-2)} .chain.auto .net i{opacity:.6} .chain .meta{margin:0 0 0 4px}
.olist,.ulist,.offlist{display:flex; flex-direction:column; gap:8px}
.oitem,.uhead{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--r); background:var(--mint); flex-wrap:wrap}
.oitem .num{width:22px; height:22px; display:grid; place-items:center; font-size:11px; font-weight:600; border-radius:50%; background:var(--deep); color:#fff}
.oitem.off{opacity:.6; background:transparent; border:1px dashed var(--line)} .oitem.off .meta{margin:0 0 0 auto}
.grow{flex:1}
.oitem .btn.sm,.uhead .btn.sm{padding:5px 9px}
.uitem{border-radius:var(--r); background:var(--mint)}
.uitem .uhead{background:transparent}
.uitem .uform{padding:4px 12px 12px; border-top:1px solid rgba(255,255,255,.9)}
.uitem .uform .f{margin-bottom:8px}
.uitem .uform .f input,.uitem .uform .f select{background:#fff}
.offrow{display:grid; grid-template-columns:1fr auto 1fr 1fr auto; gap:8px; align-items:center; color:var(--ink-2); font-size:12.5px}
.offrow input{font:inherit; font-size:13px; color:var(--ink); background:#f7faf9; border:1px solid #dbe4e2; border-radius:var(--r-sm); padding:8px 10px; min-width:0; width:100%}
.offrow input:focus{outline:none; border-color:var(--teal); background:#fff}
.offrow .btn.sm{padding:7px 9px}
@media (max-width:640px){.offrow{grid-template-columns:1fr 1fr} .offrow span{display:none} .offrow .btn{justify-self:end}}
.steps{margin:0; padding-left:20px; color:var(--ink-2); font-size:13px; line-height:1.6}
.steps li{margin-bottom:12px} .steps .snippet{margin-top:6px}
.steps .snippet .meta{margin:0; flex:none}
.lsec{padding:14px 0; border-top:1px solid var(--line-soft)} .lsec:first-child{padding-top:0; border-top:0}
.lsec h3{margin:0 0 10px; font:500 15px/1.3 var(--display); display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
.lmeta{display:flex; gap:14px; flex-wrap:wrap; color:var(--ink-2); font-size:12.5px; margin-bottom:8px} .lmeta b{color:var(--ink)}
.codes{margin-top:10px} .codes summary{cursor:pointer; color:var(--ink-2); font-size:12.5px; user-select:none} .codes summary:hover{color:var(--ink)}
.codes .tbl-wrap{margin-top:6px}

/* Уведомление */
.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,16px); z-index:120; background:#fff; border-radius:99px; padding:10px 18px; font-size:13px; color:var(--ink); box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:opacity .22s var(--ease),transform .22s var(--ease); max-width:calc(100vw - 32px)}
.toast.on{opacity:1; transform:translate(-50%,0)} .toast.bad{color:var(--bad)} .toast.ok{color:var(--ok)}

/* ── Вход ──────────────────────────────────────────────────────────── */
.gate{min-height:calc(100vh - 68px); display:flex; flex-direction:column; align-items:center}
.gate-top{width:100%; padding:22px 28px}
.gate-top img{height:30px; display:block}
.gate form{width:100%; max-width:400px; margin:6vh 20px 40px; background:#fff; border-radius:24px; padding:30px 28px 26px; box-shadow:var(--shadow-lg)}
.gate .brand{margin-bottom:22px} .gate .brand img{height:28px}
.gate h2{font:400 24px/1.15 var(--display); color:var(--ink); margin:0 0 4px}
.gate p{margin:0 0 22px; color:var(--ink-2); font-size:13.5px}
.gate .btn{width:100%; justify-content:center; margin-top:8px; padding:12px}
.gate .msg{margin-top:12px; font-size:13px; color:var(--bad); min-height:18px}
.gate .hint{margin-top:12px; font-size:12px; color:var(--ink-3); text-align:center}

/* ── Планшет и телефон ─────────────────────────────────────────────── */
@media (max-width:1400px){.who .nm{display:none} .search{width:190px}}
@media (max-width:1100px){
  .search{width:150px}
  .hero-r{gap:22px} .hs-num{font-size:30px} .spark{width:64px}
}
@media (max-width:860px){
  body{padding:0}
  .shell{max-width:none; min-height:100vh; border-radius:0; box-shadow:none}
  header{padding:14px 16px 4px; gap:10px; flex-wrap:wrap; position:relative}
  .head-right{gap:6px}
  .search{display:none}
  .head-right > a.icon-btn.round{display:none}
  .burger{display:grid}
  .nav{display:none; width:100%; flex-direction:column; order:10; gap:6px; padding:10px 0 4px; margin:0}
  .nav.open{display:flex}
  .nav a{height:44px; padding:0 14px; justify-content:flex-start; background:rgba(255,255,255,.16)}
  .nav a span{display:inline}
  .nav a[aria-current]{padding:0 14px}
  .hero{padding:18px 16px 4px; gap:16px}
  h1{font-size:28px}
  .hero-r{width:100%; margin-left:0; gap:18px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none} .hero-r::-webkit-scrollbar{display:none}
  .hs{flex:none} .hs-num{font-size:26px} .spark{width:56px; margin-bottom:18px}
  .period-bar{padding:8px 16px 18px}
  .seg{display:none} .seg.small{display:inline-flex} .seg-select{display:block; font:inherit; font-size:13px; color:var(--ink); background:#fff; border:0; border-radius:var(--r-pill); padding:9px 16px; box-shadow:var(--shadow-sm)}
  .period-bar .range{margin-left:0; width:100%}
  .wrap{padding:0 16px 48px}
  .card-head,.card-pad{padding-left:16px; padding-right:16px}
  .tbl-wrap{margin:0 -16px; padding:0 16px}
  .k-val{font-size:22px}
  .kpis{grid-template-columns:repeat(2,1fr); gap:8px}
  .modal{padding:10px} .modal .box{max-height:94vh} .modal .box-head{padding:16px 16px 8px} .modal .box-body{padding:6px 16px 16px}
  .rl-foot{margin:6px -16px -16px; padding:12px 16px 14px; bottom:-16px}
  .uhead .grow{display:none} .uhead .meta{width:100%; margin:0}
  .gate{min-height:100vh} .gate form{margin:4vh 16px 30px; max-width:none; width:auto; align-self:stretch}
}