/* ============================================================================
 * Стиль админки — ПЕРЕНЕСЁН ИЗ МОКАПА M3 (docs/UI-HANDOFF-MOCKUPS.md §7).
 *
 * ⚠ ЭТО НЕ «ВДОХНОВЛЕНО МОКАПОМ», А ЕГО ИСХОДНИК. Приёмка идёт бок о бок (§2):
 * порядок блоков, подписи, токены, радиусы, состояния. Я однажды уже взял из
 * спеки только палитру и наложил её на старую разметку — получилось «два
 * разных сайта», и оператор был прав. Поэтому CSS взят целиком, а не пересказан.
 *
 * ⚠ ДЕМО-ЛЕСА МОКАПА СЮДА НЕ ЕДУТ (§9), но их стили остаются безвредными:
 * правило без разметки ничего не красит. Вычищать их до появления всех девяти
 * разделов значило бы удалять то, что понадобится через экран.
 *
 * Источник: артефакт M3 `e4b4c07c-8c6e-4f60-bfc4-0613094a113d`.
 * ==========================================================================*/


  :root{
    --bg:#06090e;--bg2:#0A0E15;--panel:#101724;--panel2:#0D131D;--line:#1A2230;--line2:#26303F;
    --teal:#2FE3CF;--teal-dim:#1E9D92;--green:#33DE93;--amber:#F4B740;--red:#F26D6D;--blue:#6AA8FF;--gold:#f4d27a;
    --tx:#E7EEF5;--mut:#8B99A9;--faint:#586576;
    --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;--mono:"SF Mono",ui-monospace,Menlo,monospace;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--font);-webkit-font-smoothing:antialiased;font-size:14px}
  .num{font-variant-numeric:tabular-nums;font-family:var(--mono)} .mut{color:var(--mut)} .faint{color:var(--faint)}
  .layout{min-height:100vh}

  .side{background:var(--bg2);border-right:1px solid var(--line);padding:16px 11px;position:fixed;top:0;left:0;height:100vh;width:62px;z-index:50;display:flex;flex-direction:column;gap:4px;overflow:hidden;transition:width .18s ease}
  .side:hover{width:214px;box-shadow:14px 0 44px -14px rgba(0,0,0,.65)}
  .side .sfoot{transition:opacity .15s} .side:not(:hover) .sfoot{opacity:0}
  .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;padding:6px 6px 16px;white-space:nowrap;overflow:hidden}
  .logo{width:26px;height:26px;border-radius:8px;background:linear-gradient(150deg,var(--teal),var(--teal-dim));position:relative;box-shadow:0 0 16px rgba(47,227,207,.4)}
  .logo::after{content:"";position:absolute;inset:7px 7px auto 7px;height:4px;border-radius:2px;background:#04120f;box-shadow:0 6px 0 #04120f}
  .nav{display:flex;flex-direction:column;gap:2px}
  .nav button{display:flex;align-items:center;gap:10px;background:none;border:0;color:var(--mut);font-size:13px;font-weight:500;padding:9px 9px;border-radius:9px;cursor:pointer;text-align:left;width:100%;font-family:inherit;white-space:nowrap;overflow:hidden}
  .nav button:hover{background:var(--panel2);color:var(--tx)}
  .nav button.on{background:rgba(47,227,207,.1);color:var(--teal)}
  .side:not(:hover) .nav button{font-size:0;justify-content:center;padding-left:0;padding-right:0;gap:0}
  .side:not(:hover) .nav button .ic{font-size:17px}
  .side:not(:hover) .nav button .bdg{display:none}
  .nav .ic{width:18px;text-align:center}
  .nav .bdg{margin-left:auto;background:var(--red);color:#fff;font-size:10px;font-weight:700;border-radius:999px;padding:1px 6px}
  .sfoot{margin-top:auto;font-size:11px;color:var(--faint);padding:10px 8px;border-top:1px solid var(--line)}

  .main{padding:0 0 40px;margin-left:62px}
  .topbar{position:sticky;top:0;z-index:10;background:rgba(6,9,14,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:14px 24px;display:flex;align-items:center;gap:16px}
  .topbar h1{margin:0;font-size:19px;font-weight:730;letter-spacing:-.02em}
  .health-inline{display:flex;align-items:center;gap:12px;margin-left:8px;font-size:12px;color:var(--mut)}
  .hpill{display:inline-flex;align-items:center;gap:6px}
  /* ⚠ Вердикт КЛИКАБЕЛЕН: «сбой в работе» без причины отправляет оператора в базу. */
  .hpill.tap{cursor:pointer;border-radius:8px;padding:3px 8px;border:1px solid transparent}
  .hpill.tap:hover{border-color:var(--line);background:var(--panel2,rgba(255,255,255,.04))}
  .hpop{position:absolute;top:52px;right:24px;z-index:40;max-width:520px;background:var(--panel);
    border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:0 18px 44px rgba(0,0,0,.45)}
  .hpop .hr{padding:7px 0;border-bottom:1px solid var(--line)}
  .hpop .hr:last-child{border-bottom:0}
  .hpop .hh{font-size:12px;color:var(--mut);margin-bottom:6px}
  .dot{width:7px;height:7px;border-radius:50%} .dot.g{background:var(--green);box-shadow:0 0 7px var(--green)} .dot.a{background:var(--amber);box-shadow:0 0 7px var(--amber)} .dot.r{background:var(--red);box-shadow:0 0 7px var(--red)} .dot.b{background:var(--blue)}
  .topbar .sp{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:13px;color:var(--mut)}
  .opav{width:32px;height:32px;border-radius:9px;background:linear-gradient(150deg,var(--teal),var(--teal-dim));color:#04120f;font-weight:800;display:flex;align-items:center;justify-content:center}

  .wrap{padding:20px 28px;max-width:1340px;margin:0 auto}
  .grid{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}
  @media(max-width:1100px){.grid{grid-template-columns:1fr}}
  /*
    ⚠ КОЛОНКА СЕТКИ ПО УМОЛЧАНИЮ НЕ УЖЕ СВОЕГО СОДЕРЖИМОГО, и на 1180 это
    выносило страницу за экран (scrollWidth 1281 при окне 1180). `1fr` — это
    `minmax(auto, 1fr)`: широкая таблица не даёт левой колонке сжаться и
    выталкивает правую, вместе с рычагами и тревогами.

    У мокапа этого не видно, потому что в его таблицах короткие демо-значения; у
    нас в тех же колонках стоят настоящие суммы («1 950 150.00 RUB»). Обёртки
    `overflow-x:auto` без этой строки не работают вовсе — прокручиваться нечему,
    пока колонка растёт вслед за содержимым.
  */
  .grid > *{min-width:0}

  .kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
  @media(max-width:1100px){.kpis{grid-template-columns:repeat(3,1fr)}}
  .kpi{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
  .kpi .k{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
  .kpi .v{font-size:22px;font-weight:750;margin-top:6px;letter-spacing:-.02em}
  .kpi .s{font-size:11.5px;color:var(--mut);margin-top:4px}
  .up{color:var(--green)} .down{color:var(--red)}

  .card{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:16px;margin-bottom:16px}
  .card h3{margin:0;font-size:14px;font-weight:700}
  .card .cs{font-size:12px;color:var(--faint);margin-bottom:12px}
  .chead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .tag{font-size:11px;color:var(--mut);border:1px solid var(--line2);border-radius:7px;padding:3px 8px}

  .recon{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
  .recon .big{font-size:24px;font-weight:750}
  .recbar{flex:1;min-width:160px;height:12px;border-radius:6px;background:var(--panel2);overflow:hidden;position:relative;border:1px solid var(--line)}
  .recbar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--teal))}

  table{width:100%;border-collapse:collapse;font-size:13px}
  th{text-align:left;color:var(--faint);font-weight:500;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;padding:8px 10px;border-bottom:1px solid var(--line)}
  td{padding:11px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
  tr:last-child td{border-bottom:0}
  tr.click{cursor:pointer} tr.click:hover td{background:var(--panel2)}
  .pill{font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:999px;display:inline-flex;align-items:center;gap:5px}
  .pill.wait{background:rgba(244,183,64,.14);color:var(--amber)} .pill.ok{background:rgba(51,222,147,.14);color:var(--green)} .pill.info{background:rgba(47,227,207,.12);color:var(--teal)} .pill.dispute{background:rgba(242,109,109,.14);color:var(--red)} .pill.done{background:var(--panel2);color:var(--mut)}
  .bdg2{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px} .bdg2.m{background:rgba(244,210,122,.16);color:var(--gold)} .bdg2.b{background:rgba(106,168,255,.16);color:var(--blue)}

  .frow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)} .frow:last-of-type{border-bottom:0}
  .frow .fn{font-size:13px;font-weight:600} .frow .fs{font-size:11px;color:var(--faint)}
  .frow .rt{margin-left:auto;text-align:right} .frow .rt .val{font-family:var(--mono);font-size:12px}
  .switch{width:34px;height:19px;border-radius:999px;background:var(--green);position:relative;cursor:pointer;flex:none;margin-left:10px} .switch.off{background:var(--line2)} .switch::after{content:"";position:absolute;top:2px;right:2px;width:15px;height:15px;border-radius:50%;background:#fff} .switch.off::after{right:auto;left:2px}

  .alert{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12.5px} .alert:last-child{border-bottom:0}
  .alert .ai{width:20px;flex:none;text-align:center}
  .alert b{color:var(--tx)} .alert small{color:var(--faint);display:block;font-size:11px}

  .inbox{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer} .inbox:last-of-type{border-bottom:0}
  .inbox:hover{opacity:.85}
  .src{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:12px;flex:none;font-weight:800}
  .src.by{background:#0d1a2a;color:#F7A600} .src.ex{background:rgba(47,227,207,.12);color:var(--teal)} .src.tr{background:rgba(244,210,122,.14);color:var(--gold)}
  .inbox .txt{font-size:12.5px;min-width:0} .inbox .txt b{font-weight:600} .inbox .txt small{display:block;color:var(--faint);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
  .unread{margin-left:auto;background:var(--teal);color:#04120f;font-size:10px;font-weight:800;border-radius:999px;padding:1px 7px}

  .lever{display:flex;align-items:center;gap:10px;padding:11px 12px;background:var(--panel2);border:1px solid var(--line);border-radius:11px;margin-bottom:8px;font-size:13px;font-weight:600}
  .lever.kill{border-color:rgba(242,109,109,.35)}
  .lever button{margin-left:auto;border:1px solid var(--line2);background:none;color:var(--tx);border-radius:8px;padding:7px 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
  .lever.kill button{border-color:rgba(242,109,109,.5);color:var(--red)}
  /*
    ⚠ РЫЧАГ У НАС НЕСЁТ ТРИ ВЕЩИ, А В МОКАПЕ ДВЕ, и это ломало страницу.
    В M3 рычаг — «подпись + кнопка» и умещается всегда. У нас между ними стоит
    состояние рубильника словами («выключено — релиз держится, отпускает
    человек»), а имя раньше было СЫРЫМ КЛЮЧОМ: неразрывный
    `client_crypto_payout_enabled` не давал строке сузиться, ряд становился шире
    колонки, и страница уезжала за экран (scrollWidth 1461 при окне 1440) —
    вместе с кнопкой, которой этот рубильник выключают.

    Правило мокапа не трогаем: сужается и переносится НАША добавка, а кнопка
    остаётся на своём месте и не переносится.
  */
  .lever{flex-wrap:wrap}
  .lever .lname{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
  .lever button{order:2}
  .lever .chip{order:3;flex:1 0 100%;font-size:11px;font-weight:500;color:var(--mut);line-height:1.45}
  .lever .chip.on{color:var(--green)} .lever .chip.off{color:var(--faint)}
  .lever button{flex:0 0 auto;white-space:nowrap}
  /* Поля формы настройки («ME · движок»): классы, не инлайн — CSP без unsafe-inline. */
  .lever input{flex:1 1 150px;min-width:0;background:var(--bg2);border:1px solid var(--line2);color:var(--tx);border-radius:8px;padding:7px 10px;font-size:12px;font-family:var(--mono)}
  .lever input:focus{outline:none;border-color:var(--teal)}
  .note{background:var(--panel2);border:1px solid var(--line);border-left:2px solid var(--teal);border-radius:10px;padding:10px 12px;font-size:11.5px;color:var(--mut);margin-top:10px} .note b{color:var(--tx)}
  .kpi{cursor:pointer;position:relative} .kpi:hover{border-color:var(--line2)} .kpi::after{content:"›";position:absolute;top:12px;right:12px;color:var(--faint);font-size:14px}
  .kmodal{position:fixed;inset:0;background:rgba(4,7,12,.6);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:60;padding:24px}
  .kmodal.on{display:flex}
  .kcard{width:100%;max-width:660px;background:var(--panel);border:1px solid var(--line2);border-radius:18px;padding:20px;box-shadow:0 40px 90px -30px #000;max-height:88vh;overflow-y:auto}
  .khead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px} .khead h3{margin:0;font-size:16px;font-weight:730} .kx{background:none;border:0;color:var(--faint);font-size:20px;cursor:pointer}
  .filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:12px 0 14px}
  .fbtn{border:1px solid var(--line2);background:var(--bg2);color:var(--mut);border-radius:8px;padding:7px 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit} .fbtn.on{border-color:var(--teal);color:var(--teal)}
  .dinp{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:7px 10px;color:var(--tx);font-size:12px;font-family:var(--mono);width:110px}
  .kchart{display:flex;align-items:flex-end;gap:3px;height:130px;padding:10px 0 0}
  .kchart .bar{flex:1;background:linear-gradient(180deg,var(--teal),var(--teal-dim));border-radius:3px 3px 0 0;min-height:3px;opacity:.85} .kchart .bar:hover{opacity:1;background:linear-gradient(180deg,var(--green),var(--teal))}
  .kaxis{display:flex;justify-content:space-between;font-size:10px;color:var(--faint);margin-top:6px;border-top:1px solid var(--line);padding-top:6px}
  .cbar{display:flex;align-items:center;gap:10px;margin:9px 0} .cbar .nm{width:70px;font-size:12.5px;font-weight:500} .cbar .track{flex:1;height:8px;background:var(--panel2);border-radius:4px;overflow:hidden} .cbar .track i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--green))} .cbar .val{width:76px;text-align:right;font-family:var(--mono);font-size:12.5px} .cbar .pc{width:38px;text-align:right;font-family:var(--mono);font-size:11px;color:var(--faint)}
  .chartwrap{position:relative;height:186px;margin-top:12px;cursor:crosshair}
  svg.line{width:100%;height:100%;display:block}
  .line .gl{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
  .line .area{fill:url(#grad);stroke:none}
  .line .ln{fill:none;stroke:var(--teal);stroke-width:2;vector-effect:non-scaling-stroke}
  .line .guide{stroke:var(--line2);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
  .line .pt{fill:var(--teal);stroke:var(--bg);stroke-width:2}
  .line .ylab{fill:var(--faint);font-size:9px;font-family:var(--mono)}
  .tooltip{position:absolute;background:var(--panel);border:1px solid var(--line2);border-radius:9px;padding:6px 11px;pointer-events:none;transform:translate(-50%,calc(-100% - 12px));white-space:nowrap;box-shadow:0 12px 26px -12px #000;display:none;z-index:5;text-align:center}
  .tooltip .tv{font-weight:700;font-family:var(--mono);font-size:13px} .tooltip .tt{color:var(--faint);font-size:10px;margin-top:1px}
  .subtabs{display:flex;gap:5px;background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:4px;margin:6px 0 16px;flex-wrap:wrap}
  .subtab{flex:1;text-align:center;font-size:12.5px;font-weight:600;color:var(--mut);padding:8px 6px;border-radius:8px;cursor:pointer;border:0;background:none;font-family:inherit;min-width:70px}
  .subtab.on{background:rgba(47,227,207,.1);color:var(--teal)}
  /* Строка вкладок раздела «Учёт»: чипы слева, подпись периода справа (M3). */
  .pnlbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .pnlbar .subtabs{flex:1 1 auto;margin-bottom:0}
  .pnlnote{font-size:11px;color:var(--faint);margin-left:auto}
  /*
    ⚠ ВОДОПАД И ПЛИТКИ УЖЕ БЫЛИ ПЕРЕНЕСЕНЫ (.wf/.wfrow/.wl/.wbar/.wv и .pk) — и
    не имели НИ ОДНОГО пользователя в разметке. Здесь чуть не появилась вторая
    их редакция: тот же класс «построено, но никто не зовёт», только в стилях,
    где расхождение видно не сразу, а как «на одном экране полосы другие».
  */
  .wgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .wgrid .b{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px} .wgrid .b .kk{font-size:10.5px;color:var(--faint)} .wgrid .b .vv{font-size:18px;font-weight:750;margin-top:4px}
  .subtxt{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:16px 0 8px}
  .savedad{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:var(--mono);font-size:12px;display:flex;align-items:center;gap:8px}
  .page{display:none} .page.on{display:block}
  .otoolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
  .vtoggle,.oseg{display:flex;gap:4px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:4px}
  .vt,.os{background:none;border:0;color:var(--mut);font-size:12.5px;font-weight:600;padding:8px 12px;border-radius:7px;cursor:pointer;font-family:inherit} .vt.on,.os.on{background:rgba(47,227,207,.1);color:var(--teal)}
  .osearch{margin-left:auto;background:var(--panel);border:1px solid var(--line2);border-radius:9px;padding:9px 13px;color:var(--tx);font-size:13px;min-width:230px}
  .ust{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
  .uchip{font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:7px;background:var(--panel2);color:var(--faint);border:1px solid var(--line)} .uchip.done{background:rgba(51,222,147,.12);color:var(--green);border-color:transparent}
  .chatbtn{background:none;border:1px solid var(--line2);border-radius:8px;padding:6px 9px;color:var(--mut);cursor:pointer;font-size:12px} .chatbtn:hover{border-color:var(--teal);color:var(--teal)}
  .cardsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:14px}
  .glass{background:rgba(20,28,40,.5);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:16px;cursor:pointer;box-shadow:0 20px 50px -30px #000,inset 0 1px 0 rgba(255,255,255,.05);transition:.15s}
  .glass:hover{border-color:rgba(47,227,207,.35);transform:translateY(-2px)}
  .gfoot{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
  .gicon{width:28px;height:28px;border-radius:8px;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer} .gicon:hover{border-color:var(--teal)}
  .omodal{position:fixed;inset:0;background:rgba(4,7,12,.6);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:70;padding:24px} .omodal.on{display:flex}
  .ocard{width:100%;max-width:640px;max-height:90vh;overflow-y:auto;padding:20px}
  .msg{font-size:12px;padding:7px 10px;border-radius:10px;line-height:1.4;max-width:85%} .msg.them{background:var(--panel);border:1px solid var(--line);align-self:flex-start} .msg.us{background:linear-gradient(120deg,rgba(51,222,147,.18),rgba(47,227,207,.12));align-self:flex-end} .msg.bot{background:rgba(47,227,207,.08);border:1px solid rgba(47,227,207,.25);color:#bdeee7;align-self:flex-start} .msg b{color:var(--teal)}
  .ochatb{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:11px;display:flex;flex-direction:column;gap:7px;max-height:190px;overflow-y:auto}
  .chan{display:flex;gap:6px;flex-wrap:wrap} .chan .c{border:1px solid var(--line2);background:var(--bg2);border-radius:8px;padding:7px 11px;font-size:12px;color:var(--mut);cursor:pointer} .chan .c.on{border-color:var(--teal);color:var(--teal);background:rgba(47,227,207,.08)}
  .perrow{display:flex;align-items:center;gap:8px;font-size:12.5px;margin:8px 0}
  .srct{font-size:9px;font-weight:700;padding:2px 5px;border-radius:5px}
  .sfilterbar{margin-bottom:16px}
  .axistoggle{display:inline-flex;gap:4px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:3px;margin-bottom:10px}
  .ax{background:none;border:0;color:var(--mut);font-size:12px;font-weight:600;padding:7px 12px;border-radius:7px;cursor:pointer;font-family:inherit} .ax.on{background:rgba(47,227,207,.1);color:var(--teal)}
  .stchips{display:flex;gap:6px;flex-wrap:wrap}
  .stchip{border:1px solid var(--line2);background:var(--bg2);color:var(--mut);border-radius:999px;padding:6px 12px;font-size:12px;cursor:pointer;font-family:inherit} .stchip.on{border-color:var(--teal);color:var(--teal);background:rgba(47,227,207,.08)}
  .pgroup{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:4px;margin-bottom:12px}
  .phead{display:flex;align-items:center;gap:12px;padding:12px;border-radius:11px;cursor:pointer} .phead:hover{background:var(--panel2)}
  .phead .dir{font-weight:700;font-size:13.5px} .phead .meta{font-size:11.5px;color:var(--faint);margin-top:2px}
  .srow{display:flex;align-items:center;gap:11px;padding:10px 12px 10px 30px;border-top:1px solid var(--line);font-size:12.5px;cursor:pointer} .srow:hover{background:var(--panel2)}
  .slink{color:var(--teal);font-size:12px;cursor:pointer}
  .mini{background:none;border:1px solid var(--line2);border-radius:7px;padding:5px 8px;font-size:11px;color:var(--mut);cursor:pointer} .mini:hover{border-color:var(--teal);color:var(--teal)}
  .scard{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.18);border:1px solid var(--line);border-radius:9px;padding:8px 10px} .scard:hover{border-color:var(--teal)}
  .tsc{font-size:10px;font-weight:700;border:1px solid currentColor;border-radius:6px;padding:1px 6px;white-space:nowrap}
  .acctag{cursor:pointer;padding:2px 6px;border-radius:6px;border:1px solid var(--line2);white-space:nowrap} .acctag:hover{border-color:var(--teal);color:var(--teal)}
  .kb{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px} .kb.m{background:rgba(244,210,122,.16);color:var(--gold)} .kb.b{background:rgba(106,168,255,.16);color:var(--blue)} .kb.i{background:rgba(47,227,207,.14);color:var(--teal)}
  .ut{background:none;border:0;color:var(--mut);font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:7px;cursor:pointer;font-family:inherit} .ut.on{background:rgba(47,227,207,.1);color:var(--teal)}
  .ustats{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 16px}
  .ustat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 17px;min-width:92px}
  .ustat .uk{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
  .ustat .uv{font-size:21px;font-weight:750;margin-top:5px}
  .mixwrap{margin:2px 0 6px}
  .mixlabels{display:flex;justify-content:space-between;font-size:10.5px;color:var(--faint);margin-bottom:9px;gap:12px}
  #memix{width:100%;-webkit-appearance:none;appearance:none;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--green),var(--teal) 42%,var(--amber) 74%,var(--gold));outline:none;cursor:pointer}
  #memix::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--teal);cursor:pointer;box-shadow:0 2px 9px rgba(0,0,0,.45)}
  #memix::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--teal);cursor:pointer}
  .mp{font-size:11.5px;padding:6px 12px;border-radius:8px;border:1px solid var(--line2);background:#12161d;color:var(--ink2);cursor:pointer;font-family:inherit;transition:.12s}
  .mp:hover{border-color:var(--teal);color:var(--ink)}
  .mp .mpm{font-family:var(--mono);font-size:9.5px;color:var(--faint);margin-left:4px}
  .mp.on{background:var(--teal);color:#0A0B0D;border-color:var(--teal);font-weight:600}
  .mp.on .mpm{color:#0A0B0D}
  .mp.auto.on{background:var(--gold);border-color:var(--gold);color:#0A0B0D}
  .audit{border:1px solid var(--line2);border-radius:11px;background:#0E1116;padding:12px 14px;margin-top:10px;font-size:12px;line-height:1.55}
  .audit .ah{font-weight:600;color:var(--ink);margin-bottom:6px}
  .audit .apill{display:inline-block;font-family:var(--mono);font-size:10px;padding:2px 8px;border-radius:6px;margin:0 4px 4px 0}
  .apill.ok{background:rgba(51,222,147,.13);color:var(--green)}
  .apill.bad{background:rgba(255,90,90,.13);color:var(--red)}
  .apill.warn{background:rgba(244,183,64,.13);color:var(--gold)}
  .audit .aq{margin-top:8px;padding:8px 10px;border-left:2px solid var(--gold);background:rgba(244,183,64,.05);border-radius:0 7px 7px 0;color:var(--ink2)}
  .audit .aq b{color:var(--gold)}
  .mixrow{display:flex;align-items:center;gap:12px;margin:13px 0 6px}
  .mixbadge{font-family:var(--mono);font-weight:750;font-size:15px;background:rgba(47,227,207,.12);color:var(--teal);padding:4px 12px;border-radius:8px;white-space:nowrap}
  .subtxt.collap{cursor:pointer;display:flex;align-items:center;gap:7px;user-select:none} .subtxt.collap:hover{color:var(--mut)}
  .subtxt.collap .chev{transition:transform .15s;display:inline-block;font-size:10px}
  .subtxt.collap.closed .chev{transform:rotate(-90deg)}
  .caltable{font-size:12px;margin-bottom:4px}
  .calhdr,.calrow{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr .55fr;gap:6px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
  .calhdr{font-size:9.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
  .calrow .caln{font-weight:600;font-size:11.5px}
  .calinp{width:100%;background:var(--panel2);border:1px solid var(--line2);border-radius:6px;color:var(--tx);font-family:var(--mono);font-size:11.5px;padding:5px 6px;-moz-appearance:textfield}
  .calinp:focus{border-color:var(--teal);outline:none}
  .cals{font-size:10px;color:var(--faint);text-align:right}
  .cpsub{margin-top:6px;padding:8px 10px;background:var(--panel2);border:1px solid var(--line2);border-radius:9px}
  .cpttl{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin-bottom:4px}
  .cpline{display:flex;justify-content:space-between;padding:5px 0;font-size:12px;border-bottom:1px solid var(--line)} .cpline:last-child{border-bottom:0}
  .kvc .ed{opacity:.35;font-size:10px;transition:opacity .15s} .kvc:hover .ed{opacity:1;color:var(--teal)} .kvc:hover{background:rgba(47,227,207,.04)}
  .scopebar{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 10px}
  .scopebar select{background:var(--panel2);border:1px solid var(--line2);color:var(--tx);border-radius:7px;padding:6px 8px;font-size:11px;font-family:inherit;cursor:pointer;flex:1;min-width:110px} .scopebar select:focus{border-color:var(--teal);outline:none}
  .tb{font-size:9px;font-weight:700;padding:2px 6px;border-radius:5px;white-space:nowrap;letter-spacing:.02em}
  .tb.db{background:rgba(51,222,147,.16);color:var(--green)} .tb.env{background:rgba(106,168,255,.16);color:var(--blue)} .tb.flag{background:rgba(47,227,207,.14);color:var(--teal)} .tb.code{background:rgba(244,183,64,.16);color:var(--amber)}
  .cnt{font-size:10px;color:var(--faint);background:var(--panel2);border:1px solid var(--line2);border-radius:999px;padding:1px 7px;margin-left:4px}
  .setgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
  #mecfg{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
  .mecat{break-inside:avoid}
  @media(max-width:820px){.setgrid,#mecfg{grid-template-columns:1fr}}
  .pager{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:12px 0 2px}
  .pgb{background:var(--panel2);border:1px solid var(--line2);color:var(--tx);border-radius:7px;min-width:30px;height:30px;padding:0 8px;font-size:12px;font-family:inherit;cursor:pointer} .pgb:hover{border-color:var(--teal)} .pgb.on{background:rgba(47,227,207,.12);border-color:var(--teal);color:var(--teal)}
  .pgi{font-size:11px;color:var(--faint);margin-left:auto}
  .psim{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--faint);margin-top:12px;cursor:pointer;user-select:none} .psim input{accent-color:var(--teal);cursor:pointer}
  .bankchips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px;align-items:center}
  .shbadge{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-family:var(--mono);color:var(--teal);background:rgba(47,227,207,.1);border:1px solid rgba(47,227,207,.3);border-radius:5px;padding:2px 6px;cursor:help;white-space:nowrap}
  .bchip{background:var(--panel2);border:1px solid var(--line2);color:var(--mut);border-radius:7px;padding:5px 11px;font-size:11.5px;font-family:inherit;cursor:pointer} .bchip:hover{border-color:var(--teal)} .bchip.on{background:rgba(47,227,207,.12);border-color:var(--teal);color:var(--teal)}
  .tb.cur{background:rgba(106,168,255,.16);color:var(--blue)}
  .cfgscope{font-size:11px;color:var(--faint);background:var(--panel2);border:1px solid var(--line2);border-radius:9px;padding:8px 12px;margin-bottom:12px;grid-column:1/-1}
  .fexp{font-size:12px;line-height:1.65;background:var(--panel2);border:1px solid var(--line2);border-left:2px solid var(--teal);border-radius:9px;padding:11px 13px;margin-bottom:12px}
  .fexp b{color:var(--teal);font-family:var(--mono);font-weight:600}
  .liqhdr{display:grid;grid-template-columns:70px 74px 1fr 96px;gap:8px;font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);padding:0 8px 5px}
  .liqmap{display:flex;flex-direction:column;gap:3px;max-height:340px;overflow-y:auto}
  .liqrow{display:grid;grid-template-columns:70px 74px 1fr 96px;gap:8px;align-items:center;padding:5px 8px;border-radius:7px;background:var(--panel2);font-size:12px}
  .lqpos{font-size:11px;color:var(--faint)} .lqrate{font-weight:750} .lqvol{color:var(--mut);font-size:11px}
  .lqheat{border-radius:6px;padding:4px 6px;text-align:center;font-size:11px;font-family:var(--mono);white-space:nowrap}
  .liqleg{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--faint);margin:10px 0 2px} .lqg{width:18px;height:12px;border-radius:3px;display:inline-block;margin-left:6px}
  .zonewrap{position:relative;margin:26px 0 4px}
  .zonebar{display:flex;gap:2px;height:24px;border-radius:6px;overflow:hidden}
  .zcell{flex:1}
  .zpin{position:absolute;top:-21px;transform:translateX(-50%);font-size:9.5px;font-weight:700;text-align:center;line-height:1.05;white-space:nowrap}
  .zpin.h{color:var(--red)} .zpin.c{color:var(--blue)}
  .zscale{display:flex;justify-content:space-between;font-size:10px;color:var(--faint);margin-top:6px}
  .maccrot{font-size:12px;margin:14px 0 4px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line2);border-radius:9px;padding:10px 12px}
  .zt{font-size:11px;padding:2px 8px;border-radius:6px;white-space:nowrap} .zt.h{background:rgba(242,109,109,.14);color:var(--red)} .zt.c{background:rgba(106,168,255,.14);color:var(--blue)}
  .zband{position:absolute;top:0;height:24px;border:2px solid var(--teal);border-radius:6px;pointer-events:none;box-shadow:0 0 0 3px rgba(47,227,207,.12)}
  .ct{background:none;border:0;color:var(--mut);font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:7px;cursor:pointer;font-family:inherit} .ct.on{background:rgba(47,227,207,.1);color:var(--teal)}
  tr.flagged{background:rgba(244,183,64,.06)} tr.flagged:hover{background:rgba(244,183,64,.1)}
  .flagb{color:var(--amber);cursor:help}
  .pipe{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin:6px 0 4px}
  .pstep{flex:1;min-width:170px;display:flex;gap:9px;align-items:flex-start;background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:11px 13px}
  .pstep b{font-size:13px;display:block} .pstep small{font-size:10.5px;color:var(--faint);display:block;margin-top:3px}
  .pstep .dot{margin-top:5px;flex-shrink:0}
  .parr{align-self:center;color:var(--faint);font-size:18px}
  .dot.r{background:var(--red)}
  @media(max-width:900px){.parr{display:none}}
  .ordacc{border:1px solid var(--line);border-radius:11px;margin-bottom:7px;overflow:hidden} .ordacc.on{border-color:var(--teal)}
  .ordhead{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;font-size:12.5px;background:var(--panel2)} .ordhead:hover{background:var(--panel)}
  .ordhead .chev{transition:transform .15s;font-size:10px;color:var(--faint);flex-shrink:0}
  .ordbody{padding:2px 14px 12px}
/* ---- Единый чат (deal-ops inbox, Telegram-familiar) ---- */
/* Счётчик у заголовка очереди: пусто, когда ждать нечего. */
.qcount{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--panel2);color:var(--faint);margin-left:6px}
.qcount.on{background:rgba(244,183,64,.16);color:var(--amber)}
/* Подсказка в правой колонке, пока ветка не выбрана. */
.panehint{display:flex;align-items:center;justify-content:center;min-height:180px}
.chatgrid{display:grid;grid-template-columns:352px 1fr;gap:16px;align-items:start}
@media(max-width:900px){.chatgrid{grid-template-columns:1fr}}
.csearch{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;color:var(--tx);font-size:13px;margin-bottom:10px}
.ctabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:10px;padding-bottom:0}
.ctab{border:0;background:none;color:var(--faint);font-family:inherit;font-size:12.5px;font-weight:600;padding:8px 11px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;display:flex;align-items:center;gap:6px}
.ctab.on{color:var(--teal);border-bottom-color:var(--teal)}
.ctab .cnt{background:var(--teal);color:#04211d;font-size:10px;font-weight:800;border-radius:999px;padding:1px 6px;min-width:17px;text-align:center}
.ctab.on .cnt{background:var(--teal)}
.cinbox{display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 260px);overflow-y:auto;padding-right:2px}
.convrow{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 12px;cursor:pointer;transition:.12s;position:relative}
.convrow:hover{border-color:rgba(47,227,207,.35)}
.convrow.on{border-color:var(--teal);background:rgba(47,227,207,.06)}
.convtop{display:flex;align-items:center;gap:7px}
.convtop .pty{font-weight:700;font-size:13px}
.convtop .tm{font-size:10.5px;color:var(--faint);margin-left:auto}
.convlast{font-size:11.5px;color:var(--faint);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:20px}
.sbadge{font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:5px;letter-spacing:.02em;flex-shrink:0}
.sbadge.by{background:rgba(240,185,11,.15);color:#F0B90B}
.sbadge.ex{background:rgba(47,227,207,.14);color:var(--teal)}
.sbadge.wa{background:rgba(37,211,102,.16);color:#25D366}
.sbadge.tg{background:rgba(51,144,236,.16);color:#3390EC}
.unread{background:var(--teal);color:#04211d;font-size:10px;font-weight:800;border-radius:999px;padding:1px 6px;min-width:17px;text-align:center;flex-shrink:0}
.pin{position:absolute;right:11px;bottom:10px;font-size:11px;opacity:.5}
.cpane{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:16px}
.claimbar{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--mut);background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:7px 11px;margin:10px 0}
.claimbar.mine{border-color:rgba(51,222,147,.35)}
.sides{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin:10px 0}
.sidecard{border:1px solid var(--line);background:var(--bg2);border-radius:11px;padding:9px 11px;cursor:pointer;transition:.12s;position:relative}
.sidecard:hover{border-color:rgba(47,227,207,.35)}
.sidecard.on{border-color:var(--teal);background:rgba(47,227,207,.07)}
.sidecard .srole{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint)}
.sidecard .snm{font-weight:700;font-size:13px;margin:4px 0 5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sidecard .slast{font-size:10.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidelink{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--teal);margin:2px 0 -2px}
.linkchip2{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:700;color:var(--teal);background:rgba(47,227,207,.1);border:1px solid rgba(47,227,207,.28);border-radius:6px;padding:1px 6px}
.aibanner{background:rgba(47,227,207,.08);border:1px solid rgba(47,227,207,.25);border-radius:10px;padding:9px 12px;font-size:11.5px;color:#bdeee7;display:flex;align-items:center;gap:9px;margin:10px 0}
.aibanner b{color:var(--teal)}
.aipanel{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
@media(max-width:520px){.aipanel{grid-template-columns:1fr}}
.aicell{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:11.5px;color:var(--tx)}
.aicell .ak{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin-bottom:4px}
.sendrow{display:flex;gap:8px;margin-top:12px;align-items:stretch}
.sendsel{background:var(--bg2);border:1px solid var(--line);border-radius:8px;color:var(--teal);font-size:11.5px;font-weight:600;padding:0 8px;font-family:inherit;cursor:pointer}
.qa{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.chanauto{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.cauto{display:flex;align-items:center;gap:6px;border:1px solid var(--line2);background:var(--bg2);border-radius:8px;padding:6px 10px;font-size:11.5px;color:var(--mut)}
.cauto .cd{width:7px;height:7px;border-radius:50%;background:var(--faint)}
.cauto.on{border-color:var(--teal);color:var(--teal)}.cauto.on .cd{background:var(--teal)}
.cauto.active{border-color:var(--amber);color:var(--amber)}.cauto.active .cd{background:var(--amber);box-shadow:0 0 7px var(--amber);animation:cpulse 1.1s infinite}
.cauto.sent .cd{background:var(--green);box-shadow:0 0 6px var(--green)}.cauto.sent{color:var(--green);border-color:rgba(51,222,147,.35)}
.cauto.na{opacity:.4;border-style:dashed}
.cauto .st{font-size:10px;opacity:.85}
@keyframes cpulse{0%,100%{opacity:1}50%{opacity:.35}}
.miti{font-size:9.5px;font-weight:700;color:var(--teal);border:1px solid rgba(47,227,207,.3);border-radius:6px;padding:2px 7px;margin-left:auto}
.linkchip{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--teal);background:rgba(47,227,207,.08);border:1px solid rgba(47,227,207,.25);border-radius:8px;padding:4px 9px;cursor:pointer;margin-top:8px}

/* ---- Учёт / P&L page ---- */
.pnlkpi{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
@media(max-width:820px){.pnlkpi{grid-template-columns:repeat(2,1fr)}}
.pk{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:13px 14px}
.pk .pkk{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint)}
.pk .pkv{font-size:21px;font-weight:750;margin-top:6px;font-family:var(--mono)}
.pk .pks{font-size:10.5px;color:var(--faint);margin-top:3px}
.wf{display:flex;flex-direction:column;gap:7px;margin:8px 0 4px}
.wfrow{display:flex;align-items:center;gap:10px;font-size:12.5px}
.wfrow .wl{width:220px;color:var(--mut);flex-shrink:0}
.wfrow .wbar{flex:1;height:22px;border-radius:6px;position:relative;background:var(--bg2);overflow:hidden;min-width:60px}
.wfrow .wbar i{position:absolute;top:0;bottom:0;left:0;border-radius:6px}
.wfrow .wv{width:96px;text-align:right;font-family:var(--mono);font-weight:700;flex-shrink:0}
.ptable{width:100%;border-collapse:collapse}
.ptable th{font-size:9.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--faint);text-align:right;padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.ptable th:first-child{text-align:left}
.ptable td{padding:9px 8px;border-bottom:1px solid var(--line);font-size:12.5px;text-align:right;font-family:var(--mono)}
.ptable td:first-child{text-align:left;font-family:inherit}
.ptable tr.grp td{background:var(--bg2);font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);padding:5px 8px;font-family:inherit}
.ptable tr.tot td{font-weight:700;border-top:1px solid var(--line2);border-bottom:0}
.invcard{display:flex;align-items:flex-start;gap:11px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:11px 13px;margin-bottom:8px}
.invcard .iid{font-family:var(--mono);font-weight:700;font-size:11px;color:var(--teal);min-width:56px}
.invcard .idesc{font-size:12px;color:var(--mut);flex:1;line-height:1.45}
.invcard .idesc b{color:var(--tx)}
.invcard .ist{font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px;white-space:nowrap;align-self:center}
.invcard .ist.ok{background:rgba(51,222,147,.14);color:var(--green)}
.invcard .ist.warn{background:rgba(244,183,64,.14);color:var(--amber)}
.pnlrole{font-size:9.5px;font-weight:700;padding:1px 7px;border-radius:5px;margin-left:6px}
.pnlrole.m{background:rgba(47,227,207,.14);color:var(--teal)}
.pnlrole.b{background:rgba(51,144,236,.16);color:#3390EC}
.pnlrole.i{background:rgba(244,183,64,.14);color:var(--amber)}
.pnlrole.p{background:rgba(51,222,147,.14);color:var(--green)}

/* ---- Мониторинг page ---- */
.montiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
@media(max-width:820px){.montiles{grid-template-columns:repeat(2,1fr)}}
.montile{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:13px 14px;border-left:3px solid var(--green)}
.montile.warn{border-left-color:var(--amber)}
.montile.crit{border-left-color:var(--red)}
.montile .mtk{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint)}
.montile .mtv{font-size:20px;font-weight:750;margin-top:5px;font-family:var(--mono)}
.montile .mts{font-size:10.5px;color:var(--faint);margin-top:3px}
.sensor{display:flex;align-items:center;gap:11px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:10px 13px;margin-bottom:8px;flex-wrap:wrap}
.sensor .sdot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.sensor .sdot.g{background:var(--green);box-shadow:0 0 7px var(--green)}
.sensor .sdot.a{background:var(--amber);box-shadow:0 0 7px var(--amber)}
.sensor .sdot.r{background:var(--red);box-shadow:0 0 7px var(--red)}
.sensor .snm{font-weight:700;font-size:13px;min-width:170px}
.sensor .schk{font-size:11.5px;color:var(--faint);flex:1;min-width:180px}
.sensor .schk b{color:var(--mut)}
.sensor .sval{font-family:var(--mono);font-size:11px;color:var(--mut);white-space:nowrap;text-align:right;min-width:120px}
.arearow{display:flex;align-items:center;gap:11px;padding:11px 2px;border-bottom:1px solid var(--line);font-size:13px}
.arearow .adot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.arearow .adot.g{background:var(--green);box-shadow:0 0 7px var(--green)}
.arearow .adot.a{background:var(--amber);box-shadow:0 0 7px var(--amber)}
.arearow .anm{font-weight:600;flex:1}
.arearow .acnt{font-family:var(--mono);font-size:12px;color:var(--faint)}
.alertrow{display:flex;align-items:flex-start;gap:11px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:11px;padding:11px 13px;margin-bottom:8px}
.alertrow.crit{border-left-color:var(--red)}
.alertrow.info{border-left-color:var(--teal)}
.alertrow .alv{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:6px;white-space:nowrap;background:rgba(244,183,64,.14);color:var(--amber)}
.alertrow.crit .alv{background:rgba(242,109,109,.14);color:var(--red)}
.alertrow.info .alv{background:rgba(47,227,207,.12);color:var(--teal)}
.alertrow .alx{flex:1;font-size:12.5px}
.alertrow .alx .arun{font-size:11px;color:var(--faint);margin-top:3px}
.alertrow .alt{font-size:10.5px;color:var(--faint);white-space:nowrap}

/* ---- Прокси page ---- */
.pxprov{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:4px}
@media(max-width:700px){.pxprov{grid-template-columns:1fr}}
.pxcard{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:14px}
.pxcard.on{border-color:var(--teal);background:rgba(47,227,207,.05)}
.pxcard .pxn{font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pxcard .pxtag{font-size:9px;font-weight:700;padding:2px 7px;border-radius:5px;background:rgba(51,222,147,.14);color:var(--green)}
.pxcard .pxtag.alt{background:var(--bg2);color:var(--faint)}
.pxcard .pxd{font-size:11.5px;color:var(--faint);margin-top:7px;line-height:1.55}
.pxcard .pxd b{color:var(--mut)}
.wlp{font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px;white-space:nowrap}
.wlp.ok{background:rgba(51,222,147,.14);color:var(--green)}
.wlp.pend{background:rgba(244,183,64,.14);color:var(--amber)}
.wlp.no{background:var(--bg2);color:var(--faint)}
.step{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step .sn{width:24px;height:24px;border-radius:50%;background:var(--bg2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--teal);flex-shrink:0}
.step .st{flex:1;font-size:12.5px;line-height:1.5}
.step .st b{color:var(--tx)}
.step .sa{font-size:9px;font-weight:700;padding:2px 8px;border-radius:6px;align-self:center;white-space:nowrap}
.step .sa.auto{background:rgba(47,227,207,.12);color:var(--teal)}
.step .sa.man{background:rgba(244,183,64,.14);color:var(--amber)}

/* ---- Обменник page ---- */
.kyccell{font-size:11px;font-weight:700;padding:3px 9px;border-radius:6px;display:inline-block;cursor:pointer;border:1px solid transparent}
.kyccell.no{background:var(--bg2);color:var(--faint)}
.kyccell.ver{background:rgba(47,227,207,.14);color:var(--teal)}
.kyccell.sum{background:rgba(51,144,236,.16);color:#3390EC}
.kyccell.man{background:rgba(244,183,64,.14);color:var(--amber)}
.provsel{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 2px}
.provsel .pv{border:1px solid var(--line2);background:var(--bg2);color:var(--mut);border-radius:8px;padding:6px 12px;font-size:12px;cursor:pointer;font-family:inherit}
.provsel .pv.on{border-color:var(--teal);color:var(--teal);background:rgba(47,227,207,.08)}
.rzcard{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:14px;margin-bottom:12px}
.rzwin{display:flex;align-items:center;gap:10px;background:linear-gradient(120deg,rgba(51,222,147,.12),rgba(47,227,207,.06));border:1px solid rgba(51,222,147,.28);border-radius:11px;padding:12px 14px;margin-bottom:8px}
.rzwin .rzt{font-size:11px;color:var(--faint)}
.rzwin .rzn{font-weight:750;font-size:15px}
.rzwin .rztx{font-family:var(--mono);font-size:11px;color:var(--teal);margin-left:auto;white-space:nowrap}
.rvst{font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px;white-space:nowrap}
.rvst.pub{background:rgba(51,222,147,.14);color:var(--green)}
.rvst.mod{background:rgba(244,183,64,.14);color:var(--amber)}
.rvst.no{background:var(--bg2);color:var(--faint)}


/* ============================================================================
 * Экран входа — единственное, чего в мокапе M3 нет: он начинается с уже
 * открытой консоли.
 *
 * ⚠ СОБРАН ИЗ ТЕХ ЖЕ ТОКЕНОВ, А НЕ ОСТАВЛЕН БЕЗ СТИЛЯ. Первая редакция
 * перенесла оболочку и забыла вход — оператор увидел голую форму на чёрном и
 * справедливо прочитал это как сломанный сайт. Страница входа — первое, что
 * видит человек, и «неоформлено, потому что в мокапе не было» здесь не довод.
 * ==========================================================================*/

/*
 * ⚠ `[hidden]` ОБЯЗАН ПОБЕЖДАТЬ, И БЕЗ ЭТОГО ВХОД НЕ ЗАКРЫВАЛСЯ. Атрибут
 * `hidden` — это всего лишь `display:none` от браузера с низшей
 * специфичностью, а `.loginwrap{display:flex}` его перебивает. Внешне это
 * выглядело как «кнопка Войти ничего не делает»: вход проходил, консоль
 * появлялась ПОД формой, а форма занимала весь экран.
 *
 * Правило общее, а не для одного класса: любой элемент, которому мы дали
 * `display`, ломался бы так же, и ловить это по одному значит ловить вечно.
 */
[hidden] { display: none !important }

.loginwrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px }
.logincard { width: 100%; max-width: 380px; border-radius: 18px; padding: 22px }
.logincard input {
  display: block; width: 100%; margin: 9px 0;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 12px; color: var(--tx); font: inherit;
}
.logincard input:focus { outline: none; border-color: var(--teal) }
.loginbtn {
  width: 100%; margin-top: 6px; padding: 11px 16px; border: 0; border-radius: 10px;
  background: linear-gradient(120deg, var(--green), var(--teal)); color: #052018;
  font: inherit; font-weight: 700; cursor: pointer;
  box-shadow: 0 14px 30px -12px rgba(47, 227, 207, .6);
}
.line.bad { color: var(--red); margin-top: 8px; font-size: 12.5px }

/* Заголовки разделов внутри страниц — мокап использует .card h3, но наши блоки
   пришли с <h2>; выравниваем, чтобы они не выпадали из языка. */
.wrap h2 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint); font-weight: 600; margin: 20px 0 9px;
}
.wrap h2:first-child { margin-top: 0 }

/* ===========================================================================
 * СОБСТВЕННЫЕ ПРИМИТИВЫ КОНСОЛИ — то, чему в мокапе нет соответствия.
 *
 * ⚠ ЭТО УЖЕ НЕ «ПЕРЕХОДНЫЙ МОСТ». Мост был обещанием переписать разделы, и
 * обещание выполнено: «Обзор», «Заявки», «Чат», «Пользователи», «Учёт/PnL» и
 * «Мониторинг» собраны на языке M3, а `card()`, `kv()` и `moneyEl()` переписаны
 * внутри — то есть девять мест вызова переехали разом, не расходясь.
 *
 * ⚠ ОСТАВШЕЕСЯ ОСТАВЛЕНО ПО ПРИЧИНЕ, А НЕ ПО ЗАБЫВЧИВОСТИ:
 *   `.cardgrid` — сетка карточек. Имя своё намеренно: мокапный `.grid` это
 *                 КАРКАС СТРАНИЦЫ (1fr 340px), и мост однажды его перебил —
 *                 строки заявок раскладывались колонками вместо стопки.
 *   `.reqcard`  — класс МОКАПА, у которого В МОКАПЕ правила нет: там он держится
 *                 на инлайновом `style`. Тиражировать инлайн нельзя, он не
 *                 переживёт правки темы, поэтому правило живёт здесь.
 *   `.line`     — строка сообщения с тоном (`line ok` / `line bad`). У мокапа
 *                 нет эквивалента: `.frow` это ряд значения, `.note` — врезка.
 *   `.k` `.money` `.mono` `.row` `.title` — остатки, ещё живущие в служебных
 *                 блоках. Их немного, и каждый уйдёт вместе со своим блоком.
 *
 * ⚠ `.muted` УБРАН ЦЕЛИКОМ: он был дублем мокапного `.faint` — то же значение
 * под другим именем, то есть ровно та причина, по которой мост и заводился.
 * ========================================================================= */

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums }
.row { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin: 5px 0 }
.line { margin: 6px 0; font-size: 12.5px }
.line.bad { color: var(--red) }
.line.ok { color: var(--green) }
.line.flat { color: var(--tx) }
.k { color: var(--faint); font-size: 12px }
.money { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600 }
.money.ok { color: var(--green) }
.money.bad { color: var(--red) }
.money.flat { color: var(--tx) }
.reqcard` — КЛАСС МОКАПА, У КОТОРОГО В МОКАПЕ ПРАВИЛА НЕТ. Его разметка
 * держится на инлайновом `style="padding:2px 14px"`, то есть на самом мокапе
 * этот блок оформлен наполовину. Тиражировать дефект нельзя: инлайн не
 * переживёт ни одной правки темы. Правило даётся здесь, имя сохраняется —
 * переименовав, мы развели бы наш словарь с мокапом ради оформления.
 */
.reqcard { background: var(--bg2); border: 1px solid var(--line);
  border-radius: 12px; padding: 2px 14px; margin-top: 4px; }
.title { font-weight: 700; font-size: 14px; letter-spacing: -.01em }
.cardgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) }

/* ============================================================================
 * УТИЛИТАРНЫЙ СЛОЙ — БЫВШИЕ ИНЛАЙНОВЫЕ СТИЛИ.
 *
 * ⚠ ЭТО НЕ ВКУСОВЩИНА, А ТРЕБОВАНИЕ БОЕВОЙ ПОЛИТИКИ. Прод отдаёт
 * `style-src 'self'` без `unsafe-inline`, то есть КАЖДЫЙ `style="…"` там
 * молча не применяется: браузер пишет «Applying inline style violates…» и
 * рисует элемент без этих правил. Экраны, сверенные 1:1 на превью без
 * политики, в бою разъезжались именно здесь — 64 атрибута на трёх страницах.
 *
 * ⚠ ПРАВИЛА ПЕРЕНЕСЕНЫ ДОСЛОВНО, БЕЗ ПЕРЕИМЕНОВАНИЙ И ОБЪЕДИНЕНИЙ. Соблазн
 * дать им семантические имена велик, но эти экраны уже приняты по мокапам:
 * любое «заодно причешем» здесь — это непроверенное изменение вёрстки под
 * видом рефакторинга. Совпадение снято сличением снимков до и после.
 * ==========================================================================*/

.u-fs11-w500 { font-size:11px; font-weight:500; }
.u-grow-auto { flex:1; width:auto; }
.u-pb14 { padding-bottom:14px; }
.u-scroll-x { overflow-x:auto; }

/* Продолжение утилитарного слоя: классы вместо `element.style.cssText`.
 * Та же причина — постоянная ошибка CSP в консоли обесценивает настоящие. */
.u-order-side { font-weight: 700; margin: 12px 0 4px; font-size: 13.5px; }
.u-order-amt { font-size: 18px; font-weight: 750; }
.u-empty { text-align: center; padding: 40px; color: var(--faint); }