/* Общие ассеты панели: навигация с группами, тосты, состояния занятости. */

/* ---- навигация (единая, с выпадающими группами) ---- */
.topnav { display:flex; align-items:center; gap:4px; padding:10px 18px; border-bottom:1px solid var(--line);
          background:var(--card); position:sticky; top:0; z-index:50; flex-wrap:wrap; }
.topnav .brand { font-weight:600; font-size:15px; margin-right:10px; }
.topnav a, .topnav .grp > .lbl { color:var(--muted); font-size:13px; text-decoration:none;
          padding:6px 10px; border-radius:8px; display:inline-block; cursor:pointer; white-space:nowrap; }
.topnav a:hover, .topnav .grp:hover > .lbl { color:var(--txt); background:rgba(255,255,255,.05); }
.topnav a.active { color:var(--accent); }
.topnav .grp { position:relative; }
.topnav .grp.has-active > .lbl { color:var(--accent); }
.topnav .grp .menu { display:none; position:absolute; top:100%; left:0; background:var(--card);
          border:1px solid var(--line); border-radius:10px; padding:6px; min-width:150px;
          box-shadow:0 10px 26px rgba(0,0,0,.45); }
.topnav .grp:hover .menu { display:block; }
.topnav .grp .menu a { display:block; padding:7px 10px; }
.topnav .spacer { margin-left:auto; }
.topnav .email { color:var(--muted); font-size:12px; }
.topnav .nbadge { font-size:11px; padding:2px 8px; border-radius:9px; }
.topnav .nbadge.on { background:rgba(46,204,113,.15); color:var(--green); }
.topnav .nbadge.off { background:rgba(231,76,60,.15); color:var(--red); }

/* ---- занятость кнопок ---- */
button.busy, button:disabled { opacity:.55; cursor:default; }

/* ---- широкие таблицы не ломают страницу (U6) ---- */
.tw { overflow-x:auto; }

/* ---- тумблер (switch, U14) — старые страницы ---- */
.switch { position:relative; display:inline-block; width:44px; height:24px; }
.switch input { opacity:0; width:0; height:0; }
.switch .slider { position:absolute; inset:0; background:#3a4150; border-radius:24px; transition:.15s; cursor:pointer; }
.switch .slider:before { content:''; position:absolute; height:18px; width:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.15s; }
.switch input:checked + .slider { background:var(--green); }
.switch input:checked + .slider:before { transform:translateX(20px); }

/* ---- разделитель независимых блоков настроек (U13) ---- */
.sep-head { margin:28px 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
            border-top:1px solid var(--line); padding-top:18px; }
.own-save { font-size:11px; padding:2px 8px; border-radius:9px; background:rgba(243,156,18,.14); color:var(--amber); margin-left:6px; }

/* ---- меню действий строки (kebab, U8) — старые страницы ---- */
.kebab { padding:6px 10px; }
.rowmenu { position:absolute; right:8px; top:100%; z-index:30; background:var(--card); border:1px solid var(--line);
           border-radius:8px; padding:6px; display:flex; flex-direction:column; gap:4px;
           box-shadow:0 10px 26px rgba(0,0,0,.5); min-width:132px; }
.rowmenu.hidden { display:none; }
.rowmenu button { text-align:left; width:100%; }


/* ============================================================================
   СВЕТЛАЯ ДИЗАЙН-СИСТЕМА (HeroUI-подобная). Всё под .ds, чтобы не задевать
   ещё не переведённые страницы (у них свои inline-стили). Токены — новые имена,
   с прежними (--bg/--card/--muted…) не конфликтуют.
   ============================================================================ */
:root{
  --x-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>");
  --ground:#F1F2F6; --surface:#FFFFFF; --surface-2:#F4F5F8;
  --border:#E8E9EE; --border-2:#DFE1E7;
  --ink:#11181C; --ink-soft:#6B7280; --ink-faint:#98A0AE;
  --primary:#006FEE; --primary-hover:#0059D1; --primary-flat:rgba(0,111,238,.11);
  --success:#17C964; --success-ink:#0C7B41; --success-flat:rgba(23,201,100,.16);
  --warning:#F5A524; --warning-ink:#9A5B06; --warning-flat:rgba(245,165,36,.18);
  --danger:#F31260;  --danger-ink:#C20E43;  --danger-flat:rgba(243,18,96,.11);
  --r-card:16px; --r-btn:12px; --r-chip:8px; --r-input:12px;
  --shadow-card:0 1px 2px rgba(16,24,40,.04), 0 10px 28px -14px rgba(16,24,40,.16);
  --shadow-pop:0 2px 8px rgba(16,24,40,.07), 0 16px 40px -10px rgba(16,24,40,.22);
  --font-ui:-apple-system,"Segoe UI Variable Display","Segoe UI",system-ui,Roboto,sans-serif;
  --font-mono:ui-monospace,"Cascadia Code","JetBrains Mono",Consolas,monospace;
}

body.ds{ margin:0; background:var(--ground); color:var(--ink); font-family:var(--font-ui);
         font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
.ds *{ box-sizing:border-box; }
.ds a{ color:inherit; text-decoration:none; }
.ds .tnum{ font-variant-numeric:tabular-nums; }
.ds .mono{ font-family:var(--font-mono); }
.ds .muted{ color:var(--ink-soft); }
.ds .spacer{ flex:1; }
.ds .hidden{ display:none !important; }

/* ---- каркас ---- */
.ds .app{ display:grid; grid-template-columns:248px 1fr; min-height:100vh; }
.ds .main{ min-width:0; display:flex; flex-direction:column; }

/* ---- сайдбар ---- */
.ds .sidebar{ background:var(--surface); border-right:1px solid var(--border); display:flex;
              flex-direction:column; position:sticky; top:0; height:100vh; }
.ds .brand{ display:flex; align-items:center; gap:10px; padding:20px 20px 16px; }
.ds .brand .logo{ width:32px; height:32px; border-radius:9px; background:var(--primary); display:grid;
                  place-items:center; color:#fff; box-shadow:0 4px 10px -2px rgba(0,111,238,.5); }
.ds .brand b{ font-size:16px; font-weight:700; letter-spacing:-.01em; }
.ds .brand .env{ margin-left:auto; font-size:11px; color:var(--ink-soft); background:var(--surface-2);
                 padding:2px 8px; border-radius:999px; border:1px solid var(--border); }
.ds .nav{ padding:6px 12px; overflow-y:auto; flex:1; }
.ds .nav .grp{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
               color:var(--ink-faint); padding:14px 10px 6px; }
.ds .nav a{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:10px;
            color:var(--ink-soft); font-weight:500; margin-bottom:2px; transition:background .12s,color .12s; }
.ds .nav a svg{ width:18px; height:18px; flex:0 0 auto; }
.ds .nav a:hover{ background:var(--surface-2); color:var(--ink); }
.ds .nav a.active{ background:var(--primary-flat); color:var(--primary); font-weight:600; }
.ds .nav a .count{ margin-left:auto; font-size:11px; font-weight:600; color:var(--ink-soft);
                   background:var(--surface-2); border-radius:999px; padding:1px 7px; }
.ds .nav a.active .count{ background:#fff; color:var(--primary); }
.ds .side-foot{ padding:12px; border-top:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.ds .side-foot .ava{ width:32px; height:32px; border-radius:999px; background:#DCEBFF; color:var(--primary);
                     display:grid; place-items:center; font-weight:700; font-size:13px; flex:0 0 auto; }
.ds .side-foot .who{ font-size:13px; font-weight:600; line-height:1.2; min-width:0; }
.ds .side-foot .who small{ display:block; color:var(--ink-soft); font-weight:400; font-size:11px;
                           overflow:hidden; text-overflow:ellipsis; }
.ds .side-foot a{ color:var(--ink-faint); }
.ds .side-foot a:hover{ color:var(--danger-ink); }
.ds .nav-toggle{ display:none; }  /* гамбургер — только в мобильной вёрстке */

/* ---- топбар ---- */
.ds .topbar{ display:flex; align-items:center; gap:14px; padding:18px 28px 14px; position:sticky; top:0;
             background:linear-gradient(var(--ground),rgba(241,242,246,.86)); backdrop-filter:blur(6px); z-index:5; flex-wrap:wrap; }
.ds .topbar h1{ font-size:22px; font-weight:800; letter-spacing:-.02em; margin:0; }
.ds .seg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:11px; padding:3px; gap:2px; }
.ds .seg button, .ds .seg a{ border:0; background:transparent; font:inherit; font-size:13px; font-weight:500;
             color:var(--ink-soft); padding:5px 12px; border-radius:8px; cursor:pointer; transition:.12s; }
.ds .seg button.on, .ds .seg a.on{ background:#fff; color:var(--ink); font-weight:600;
             box-shadow:0 1px 2px rgba(16,24,40,.06),0 2px 6px -2px rgba(16,24,40,.12); }

/* ---- чипы/бейджи ---- */
.ds .chip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:5px 10px;
           border-radius:999px; line-height:1; white-space:nowrap; }
.ds .chip .dot, .ds .pill .dot{ width:7px; height:7px; border-radius:999px; }
.ds .chip.warn,.ds .pill.warn{ background:var(--warning-flat); color:var(--warning-ink); }
.ds .chip.ok,.ds .pill.ok{ background:var(--success-flat); color:var(--success-ink); }
.ds .chip.info,.ds .pill.info{ background:var(--primary-flat); color:var(--primary); }
.ds .chip.bad,.ds .pill.bad{ background:var(--danger-flat); color:var(--danger-ink); }
.ds .chip.neutral,.ds .pill.neutral{ background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--border); }
/* Flex-капсула. Центрируем текст по cap-height (единая метрика шрифта, одинаково для «в сети»
   и «прогрев»), а не по чернилам: text-box-trim там, где браузер умеет; иначе — обычный флекс-центр. */
.ds .pill{ display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 10px; font-size:12px;
           font-weight:600; border-radius:999px; line-height:1; white-space:nowrap; vertical-align:middle;
           text-box-trim:trim-both; text-box-edge:cap alphabetic; text-box:trim-both cap alphabetic; }
.ds .chip{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 12px; border-radius:999px;
           line-height:1; white-space:nowrap; vertical-align:middle;
           text-box-trim:trim-both; text-box-edge:cap alphabetic; text-box:trim-both cap alphabetic; }
.ds .pill .dot, .ds .chip .dot{ width:6px; height:6px; border-radius:999px; flex:0 0 auto; background:currentColor; }

/* ---- контент ---- */
.ds .content{ padding:6px 28px 40px; display:flex; flex-direction:column; gap:20px; }
.ds .sec-title{ font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
                color:var(--ink-faint); margin:6px 2px -6px; }
.ds .note{ color:var(--ink-soft); font-size:12px; padding:2px 2px 0; }
.ds .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-card); }

/* ---- KPI ---- */
.ds .kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.ds .kpi{ padding:18px 18px 16px; }
.ds .kpi .k-top{ display:flex; align-items:center; gap:8px; color:var(--ink-soft); font-size:13px; font-weight:500; }
.ds .kpi .k-top svg{ width:16px; height:16px; color:var(--ink-faint); }
.ds .kpi .k-num{ font-size:32px; font-weight:800; letter-spacing:-.02em; margin:8px 0 6px; line-height:1; }
.ds .kpi .k-num.good{ color:var(--success-ink); }
.ds .kpi .k-num.bad{ color:var(--danger-ink); }
.ds .kpi .k-num.warn{ color:var(--warning-ink); }
.ds .kpi .k-sub{ font-size:12px; color:var(--ink-soft); }
.ds .kpi.link{ cursor:pointer; transition:border-color .12s, box-shadow .12s, transform .12s; }
.ds .kpi.link:hover{ border-color:#CFE0FA; box-shadow:var(--shadow-pop); transform:translateY(-1px); }
.ds .kpi.link .k-top{ color:var(--primary); }
.ds .kpi.link .k-top::after{ content:"→"; margin-left:auto; color:var(--primary); font-weight:700; }

/* ---- графики ---- */
.ds .charts{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.ds .chart{ padding:16px 16px 10px; }
.ds .chart .c-title{ font-size:13px; color:var(--ink-soft); font-weight:500; }
.ds .chart .c-num{ font-size:24px; font-weight:800; letter-spacing:-.02em; margin:2px 0 8px; }
.ds .chart svg.spark{ width:100%; height:56px; display:block; }
.ds .chart .c-foot{ font-size:11px; color:var(--ink-faint); margin-top:4px; }

/* ---- таблицы (панель с шапкой) ---- */
.ds .panel-head{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.ds .panel-head h3{ margin:0; font-size:15px; font-weight:700; }
.ds .panel-head .count{ font-size:12px; color:var(--ink-soft); font-weight:500; }
.ds .search{ display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid var(--border);
             border-radius:var(--r-input); padding:7px 11px; min-width:220px; }
.ds .search svg{ width:16px; height:16px; color:var(--ink-faint); flex:0 0 auto; }
.ds .search input{ border:0; background:transparent; font:inherit; font-size:13px; color:var(--ink); width:100%; outline:none; }
.ds .search input::placeholder{ color:var(--ink-faint); }
/* type=search нужен, чтобы браузер не считал поле логином; снимаем родную рамку WebKit
   и оставляем только крестик очистки — он тут к месту */
.ds .search input[type=search]{ -webkit-appearance:none; appearance:none; }
.ds .search input[type=search]::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none;
  width:13px; height:13px; cursor:pointer; opacity:.45;
  background:currentColor; -webkit-mask:var(--x-mask) center/contain no-repeat; mask:var(--x-mask) center/contain no-repeat; }
.ds .search input[type=search]::-webkit-search-cancel-button:hover{ opacity:.8; }
.ds table{ width:100%; border-collapse:collapse; }
.ds thead th{ text-align:left; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
              color:var(--ink-faint); padding:11px 16px; border-bottom:1px solid var(--border); white-space:nowrap; }
.ds thead th.r, .ds tbody td.r{ text-align:right; }
.ds tbody td{ padding:13px 16px; border-bottom:1px solid var(--border); vertical-align:middle; }
.ds tbody tr:last-child td{ border-bottom:0; }
.ds tbody tr:hover{ background:#FAFBFC; }
.ds .mgr{ display:flex; align-items:center; gap:11px; }
.ds .mgr .ava{ position:relative; width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
               font-weight:700; font-size:13px; flex:0 0 auto; overflow:hidden; }
.ds .mgr b{ font-weight:600; }
.ds .mgr small{ display:block; color:var(--ink-soft); font-size:12px; }
.ds .health{ font-weight:700; font-variant-numeric:tabular-nums; }
.ds .proxy{ font-size:12px; color:var(--ink-soft); }
.ds .proxy .yes{ color:var(--success-ink); }
.ds .row-act{ display:flex; align-items:center; gap:6px; justify-content:flex-end; }
/* компактные кнопки внутри таблиц — чтобы действия не распирали строку */
.ds td .btn{ padding:6px 10px; font-size:12px; }
.ds .rowmenu{ position:absolute; right:0; top:calc(100% + 4px); z-index:40; min-width:160px; padding:6px;
              background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-pop);
              display:flex; flex-direction:column; gap:2px; }
.ds .rowmenu button{ width:100%; justify-content:flex-start; }

/* ---- кнопки ---- */
.ds .btn{ display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:13px; font-weight:600;
          border-radius:var(--r-btn); padding:8px 14px; cursor:pointer; border:1px solid transparent;
          transition:.12s; line-height:1; white-space:nowrap; }
.ds .btn svg{ width:15px; height:15px; }
.ds .btn.primary{ background:var(--primary); color:#fff; box-shadow:0 4px 12px -3px rgba(0,111,238,.5); }
.ds .btn.primary:hover{ background:var(--primary-hover); }
.ds .btn.ghost{ background:transparent; color:var(--ink-soft); border-color:var(--border-2); }
.ds .btn.ghost:hover{ background:var(--surface-2); color:var(--ink); }
.ds .btn.flat{ background:var(--primary-flat); color:var(--primary); }
.ds .btn.flat:hover{ background:rgba(0,111,238,.18); }
.ds .btn.danger{ background:var(--danger); color:#fff; box-shadow:0 4px 12px -3px rgba(243,18,96,.5); }
.ds .btn.danger-flat{ background:var(--danger-flat); color:var(--danger-ink); }
.ds .btn.icon{ padding:8px; color:var(--ink-faint); border-color:transparent; }
.ds .btn.icon:hover{ background:var(--surface-2); color:var(--ink); }
.ds .btn:disabled{ opacity:.55; cursor:default; }

/* ---- формы ---- */
.ds .lbl{ display:block; font-size:12px; color:var(--ink-soft); margin:12px 0 5px; font-weight:500; }
.ds .inp, .ds textarea.inp, .ds select.inp{ width:100%; font:inherit; font-size:13px; color:var(--ink);
          background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-input); padding:9px 12px; outline:none; }
.ds .inp:focus, .ds textarea.inp:focus, .ds select.inp:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-flat); background:#fff; }
.ds textarea.inp{ resize:vertical; min-height:80px; }
.ds input[type=file]{ padding:7px 11px; }
.ds input[type=file]::file-selector-button{ font:inherit; font-size:13px; font-weight:600; cursor:pointer;
          border:1px solid var(--border-2); background:var(--surface); color:var(--ink); padding:6px 12px;
          border-radius:8px; margin-right:10px; transition:.12s; }
.ds input[type=file]::file-selector-button:hover{ border-color:var(--primary); color:var(--primary); }
.ds .hint{ font-size:12px; color:var(--ink-soft); margin-top:6px; }
.ds .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ds .grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.ds .switch2{ position:relative; width:42px; height:24px; border-radius:999px; background:var(--border-2);
              transition:.15s; cursor:pointer; flex:0 0 auto; display:inline-block; }
.ds .switch2.on{ background:var(--primary); }
.ds .switch2::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:999px;
              background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:.15s; }
.ds .switch2.on::after{ left:21px; }

/* ---- настройки: карточка с паддингом, инфо-блок, свитч, разделители ---- */
.ds .card.pad{ padding:20px; }
.ds h3{ margin:0 0 6px; font-size:15px; font-weight:700; }
.ds .explain{ background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:12px 14px;
              font-size:13px; color:var(--ink-soft); margin-bottom:16px; line-height:1.6; }
.ds .explain b{ color:var(--ink); }
.ds .explain a, .ds .hint a{ color:var(--primary); }
.ds .sub{ color:var(--ink-soft); font-size:12px; font-weight:400; }
/* flex:none обязателен: переключатель почти всегда стоит в flex-строке рядом с длинным пояснением,
   а flex-элементы по умолчанию сжимаются — width для них не пол, а пожелание. Без этого тумблер
   расплющивался тем сильнее, чем длиннее текст рядом. */
.ds .switch{ position:relative; display:inline-block; flex:none; width:42px; height:24px; }
.ds .switch input{ opacity:0; width:0; height:0; }
.ds .switch .slider{ position:absolute; inset:0; background:var(--border-2); border-radius:999px; transition:.15s; cursor:pointer; }
.ds .switch .slider::before{ content:''; position:absolute; width:18px; height:18px; left:3px; top:3px;
              background:#fff; border-radius:50%; transition:.15s; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.ds .switch input:checked + .slider{ background:var(--primary); }
.ds .switch input:checked + .slider::before{ transform:translateX(18px); }
.ds .sep-head{ margin:28px 2px 6px; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint);
               border-top:1px solid var(--border); padding-top:20px; }
.ds .own-save{ font-size:11px; padding:2px 8px; border-radius:999px; background:var(--warning-flat);
               color:var(--warning-ink); margin-left:6px; font-weight:600; }
@media(max-width:640px){ .ds .grid2, .ds .grid3{ grid-template-columns:1fr; } }

/* ---- конкуренты: баннер-предупреждение, блок списка, пузыри переписки ---- */
.ds .warnbar{ background:var(--warning-flat); color:var(--warning-ink); padding:11px 14px; border-radius:10px;
              margin-bottom:16px; font-size:13px; }
.ds .warnbar a{ color:var(--warning-ink); text-decoration:underline; }
.ds .listbox{ border:1px solid var(--border); border-radius:12px; padding:14px; margin-bottom:12px; }
.ds .m{ max-width:70%; padding:8px 12px; border-radius:12px; white-space:pre-wrap; margin:4px 0; font-size:13px; line-height:1.45; }
.ds .m.in{ background:var(--surface-2); }
.ds .m.out{ background:var(--primary-flat); color:var(--primary); margin-left:auto; }

/* ---- пагинатор ---- */
.ds .pager{ display:flex; gap:12px; align-items:center; padding:14px 18px; font-size:13px; color:var(--ink-soft); }
.ds .pager a{ color:var(--primary); font-weight:600; }
.ds .pager .off{ opacity:.4; }
.ds .pager{ flex-wrap:wrap; border-top:1px solid var(--border); }
.ds .pager:empty{ display:none; }               /* пустая навигация не оставляет полосу */
.ds .pager .pinfo{ margin-right:auto; }
.ds .pager .pdots{ color:var(--ink-faint); }
.ds .pager .btn{ min-width:34px; padding:6px 10px; }
.ds .pager .btn[disabled]{ opacity:.4; pointer-events:none; }

/* ---- модалки (показ по умолчанию flex; скрытие классом .hidden) ---- */
.ds .modal{ position:fixed; inset:0; background:rgba(17,24,28,.45); backdrop-filter:blur(2px);
            display:flex; align-items:center; justify-content:center; z-index:60; padding:20px; }
.ds .modal-card{ background:var(--surface); border:1px solid var(--border); border-radius:18px;
                 box-shadow:var(--shadow-pop); width:100%; max-width:560px; max-height:88vh; overflow-y:auto; }
.ds .modal-head{ display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--border); }
.ds .modal-head h3{ margin:0; font-size:16px; font-weight:700; }
.ds .modal-body{ padding:18px 20px; }

/* ---- сообщения (инлайн-статус форм) ---- */
.ds .msg{ margin-top:12px; padding:10px 12px; border-radius:10px; font-size:13px; }
.ds .msg.ok{ background:var(--success-flat); color:var(--success-ink); }
.ds .msg.err{ background:var(--danger-flat); color:var(--danger-ink); }
.ds .msg.warn{ background:var(--warning-flat); color:var(--warning-ink); }

/* ---- вкладки-сегменты, поля-группы, аватар-фото, очередь ---- */
.ds fieldset{ border:1px solid var(--border); border-radius:12px; padding:14px; margin-top:14px; }
.ds legend{ color:var(--ink-soft); font-size:12px; padding:0 6px; font-weight:600; }
.ds .ava-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ds .qlink{ color:var(--primary); cursor:pointer; font-weight:600; }
.ds .qitem{ border-bottom:1px solid var(--border); padding:10px 0; display:flex; gap:10px; align-items:flex-start; }
.ds .qitem:last-child{ border-bottom:0; }
.ds .qitem .body{ flex:1; min-width:0; }
.ds code{ font-family:var(--font-mono); background:var(--surface-2); border:1px solid var(--border);
          border-radius:6px; padding:1px 6px; font-size:12px; }

/* ---- адаптив ---- */
@media(max-width:1040px){ .ds .kpis, .ds .charts{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:900px){
  .ds .app{ grid-template-columns:1fr; }
  /* сайдбар сверху узкой полосой: бренд + гамбургер; меню свёрнуто и разворачивается по кнопке */
  .ds .sidebar{ position:sticky; top:0; z-index:30; height:auto; flex-direction:column;
                box-shadow:0 6px 20px -12px rgba(16,24,40,.25); }
  .ds .brand{ padding:12px 16px; }
  .ds .nav-toggle{ display:grid; place-items:center; width:40px; height:40px; margin-left:12px; flex:0 0 auto;
                   border:1px solid var(--border); border-radius:10px; background:var(--surface-2);
                   color:var(--ink); cursor:pointer; }
  .ds .nav-toggle svg{ width:20px; height:20px; }
  .ds .brand .env{ margin-left:auto; }
  /* свёрнуто по умолчанию, раскрывается при .open */
  .ds .sidebar .nav, .ds .sidebar .side-foot{ display:none; }
  .ds .sidebar.open .nav{ display:block; animation:navdrop .16s ease; }
  .ds .sidebar.open .side-foot{ display:flex; margin-top:2px; }
  .ds .nav{ padding:6px 12px 10px; }
  .ds .nav .grp{ display:block; padding-top:10px; }
  .ds .nav a{ padding:11px 12px; margin-bottom:1px; }
}
@keyframes navdrop{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;} }

/* ---- тосты (единые, светлые — работают и на новых, и на старых страницах) ---- */
#toast-wrap{ position:fixed; top:16px; right:16px; z-index:1000; display:flex; flex-direction:column; gap:8px; }
.toast{ padding:11px 15px; border-radius:11px; font-size:13px; color:var(--ink,#11181C); background:#fff;
        border:1px solid var(--border,#E8E9EE); box-shadow:0 10px 30px -8px rgba(16,24,40,.28); max-width:360px;
        animation:toastin .18s ease; }
.toast.ok{ border-color:rgba(23,201,100,.5); }
.toast.err{ border-color:rgba(243,18,96,.5); }
@keyframes toastin{ from{opacity:0; transform:translateY(-6px);} to{opacity:1;} }