/* ============================================================================
 * Стиль админки — ПЕРЕНЕСЁН ИЗ МОКАПА 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)} .bdg2.k{background:rgba(242,109,109,.16);color:var(--red);margin-left:6px}

  .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 .ldest{order:4;flex:1 0 100%;display:flex;gap:8px;align-items:center;font-size:12px;font-weight:500;color:var(--mut);flex-wrap:wrap}
  .lever .ldest select{background:var(--panel2);border:1px solid var(--line2);color:var(--tx);border-radius:7px;padding:6px 8px;font-size:12px;font-family:inherit;cursor:pointer;min-width:160px}
  .lever .ldest button{margin-left:0;order:0}
  .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)}
  .lever select{flex:0 1 190px;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 select:focus{outline:none;border-color:var(--teal)}
  /* действия у счёта в «Обзоре» (19.09): три цели вместо одного тумблера — кнопка с подписью, а не безымянный переключатель */
  .abtn{background:var(--bg2);border:1px solid var(--line2);color:var(--tx);border-radius:8px;padding:5px 9px;font-size:12px;cursor:pointer;margin:2px 6px 2px 0;font-family:inherit;white-space:nowrap}
  .abtn:hover{border-color:var(--teal)} .abtn:disabled{opacity:.5;cursor:default}
  .acct-actions{display:flex;flex-wrap:wrap;gap:2px;margin-top:6px}
  .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;background:var(--panel2);color:var(--mut)}
  /* ⚠ Цвет приходит тоном с бэка (`originTone`), а не выводится из текста:
     «биржа» — наш запас, «клиент» — долг перед человеком. Бесцветный бейдж не
     различал их вовсе, хотя различие несущее. */
  .srct.dispute,.srct.t-neg{background:rgba(242,109,109,.14);color:var(--red)}
  .srct.ok,.srct.t-pos{background:rgba(51,222,147,.14);color:var(--green)}
  .srct.wait,.srct.t-mut{background:var(--panel2);color:var(--mut)}
  /* «Сколько это уже идёт» — единственный цветной кусок meta в мокапе M3. */
  .waiting{color:var(--amber)}
  /* «Заявки» по правкам оператора 09.09: сторона цветом, остаток справа отдельно, Group_id, контекст строки. */
  .sidetag{font-size:10px;font-weight:700;padding:2px 6px;border-radius:5px;text-transform:uppercase;letter-spacing:.02em}
  .sidetag.ok,.sidetag.t-pos{background:rgba(51,222,147,.14);color:var(--green)} .sidetag.dispute,.sidetag.t-neg{background:rgba(242,109,109,.14);color:var(--red)} .sidetag.wait,.sidetag.t-mut{background:var(--panel2);color:var(--mut)}
  .phead .dir.ok{color:var(--green)} .phead .dir.dispute{color:var(--red)}
  .gid{font-size:10px;color:var(--faint);letter-spacing:.02em} .gid b{font-family:var(--mono);font-weight:600;color:var(--mut)}
  .remain{margin-left:auto;text-align:right;min-width:150px} .remain .k{font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.04em} .remain .v{font-family:var(--mono);font-weight:700;font-size:14px}
  .remain .v.done{color:var(--green)} .remain .v.left{color:var(--amber)}
  /* ⚠ КОНТЕКСТ СТРОКИ БЫЛ АМБЕРНЫМ — то есть «покупатель заявил отмену» кричало
     так же, как спор. Теперь он серый: это ФАКТ о ходе, а не тревога. */
  .ctx{font-size:11.5px;color:var(--mut);padding:4px 0 2px} .ctx.bad{color:var(--red)}
  .curchips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
  /* ⚠ Отклонение от штатного пути — главная ось «Заявок» (оператор, 18.09).
     Полоса стоит выше статусов и красится ТОНОМ С БЭКА: экран не выводит
     срочность из текста чипа. */
  .devbar{margin:10px 0 6px}
  .devchips{display:flex;gap:6px;flex-wrap:wrap}
  .devchip{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}
  .devchip:hover{border-color:var(--teal)}
  /* ⚠ ЧИП — ЭТО КОНТРОЛ ОТБОРА, А НЕ ИНДИКАТОР СОСТОЯНИЯ (Polaris: filters —
     органы управления запросом). Покрашенный тоном, он превращал полосу в
     десять красных плашек — и красный переставал значить «нужен человек» уже
     на верхней полосе, до единой строки данных. Срочность несёт ТОЧКА, выбор
     среди родов делает СЧЁТЧИК, а сам чип выглядит как кнопка. */
  .devchip{display:inline-flex;align-items:center;gap:7px}
  .devchip.t-neg::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--red);flex:0 0 auto}
  .devchip.t-pos::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--green);flex:0 0 auto}
  .devchip.on{border-color:var(--teal);color:var(--teal);background:rgba(47,227,207,.12)}
  .devnote{font-size:12px;color:var(--faint)} .devnote.ok{color:var(--green)}
  .devrow{font-size:11.5px;margin-top:3px;display:flex;gap:6px;flex-wrap:wrap;align-items:baseline;color:var(--mut)}
  .devrow.t-neg{color:var(--red)} .devrow.t-mut{color:var(--mut)} .devrow.t-pos{color:var(--green)}
  .devrow .devk{font-weight:700;text-transform:uppercase;font-size:9.5px;letter-spacing:.04em;padding:2px 6px;border-radius:5px;background:var(--panel2);color:inherit;white-space:nowrap}
  /* Чей ход — стоит и там, где отклонений нет: пустое место читалось бы как
     «ждём чего-то и не знаем чего». */
  .waitfor{font-size:11.5px;color:var(--faint);margin-top:3px}
  /* Квитанции на странице ордера — вердиктами (оператор, 18.09). */
  .rcpt{border:1px solid var(--line);border-left:2px solid var(--line2);border-radius:10px;padding:8px 10px;margin-bottom:8px;font-size:12px}
  .rcpt.ok{border-left-color:var(--green)} .rcpt.dispute{border-left-color:var(--red)} .rcpt.wait{border-left-color:var(--amber)}
  .rcpt-top{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
  .rcpt-v{font-weight:700} .rcpt.ok .rcpt-v{color:var(--green)} .rcpt.dispute .rcpt-v{color:var(--red)} .rcpt.wait .rcpt-v{color:var(--amber)}
  .rcpt-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}
  .rcpt-fwd{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px}
  .rcpt-fwd.ok{background:rgba(51,222,147,.14);color:var(--green)}
  .rcpt-fwd.no{background:rgba(242,109,109,.12);color:var(--red)}
  .srow .sidetag{min-width:64px;text-align:center}
  .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)}
  /* ==========================================================================
     «ЗАЯВКИ» — ТАБЛИЦА И ПРАВИЛО ЦВЕТА (калибровка 18.09).

     ⚠ ТРИ ЦВЕТА И НИ ОДНИМ БОЛЬШЕ. У оси `Tone` три значения, а красок в
     консоли четыре — и лишняя, АМБЕР, доставалась НЕЙТРАЛЬНОМУ (`pillClass`
     переводит `neutral` в `wait`). На снимке 18.09 жёлтыми горели «В
     объявлении», «Создана», «Отмечена оплаченной» — заявки, идущие своим
     ходом, кричали наравне со спором. Когда кричит всё, не кричит ничто.

       .t-neg  красный   — нужен человек (Polaris: критический цвет только там,
                           где требуется немедленное действие)
       .t-pos  зелёный   — сошлось и закрыто
       .t-mut  серый     — идёт своим ходом; это НОРМА, и она молчит

     ⚠ БИРЮЗОВЫЙ — АКЦЕНТ ОФОРМЛЕНИЯ, А НЕ СЕМАНТИКА: выбранный фильтр, вкладка,
     фокус, наведение. Он не значит «хорошо» и не встречается в данных.

     ⚠ АМБЕРА НА ЭТОМ ЭКРАНЕ НЕТ ВОВСЕ. Он остаётся в других разделах, где
     означает «истекает срок» и там, где эта ось действительно есть.

     ⚠ ЗАЛИВКА — ОДНА НА СТРОКУ, и она у ОТКЛОНЕНИЯ. Статус описывает, отклонение
     зовёт (Carbon: сводный индикатор берёт наивысший уровень внимания), поэтому
     бейдж статуса всегда на сером фоне, а цвет несёт только его текст.
     ========================================================================== */
  .t-pos{color:var(--green)} .t-neg{color:var(--red)} .t-mut{color:var(--mut)}

  .otbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
  /* ⚠ `table-layout: fixed` — НЕ КОСМЕТИКА. При авторазметке ширины колонок
     решает САМОЕ ДЛИННОЕ содержимое: подпись «покупка · Отменена · биржа:
     Апелляция — не сошлась наша стадия» растягивала колонку статуса, таблица
     уезжала за правый край, и колонка «Ждёт» переставала существовать на
     экране целиком. Фиксированная раскладка отдаёт ширину заголовкам, а
     длинное усекает (Carbon «Overflow content»). */
  .otbl{width:100%;table-layout:fixed;border-collapse:collapse;font-size:12.5px}
  /* Заголовки — набором, а не повтором подписи в каждой ячейке (Carbon). */
  .otbl th{text-align:left;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:10px 10px 9px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;background:var(--panel);z-index:1}
  /* ⚠ ЧИСЛА — ВПРАВО И ТАБЛИЧНЫМИ ЦИФРАМИ: колонку денег сравнивают по разрядам. */
  .otbl th.r,.otbl td.r{text-align:right}
  .otbl td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
  .otbl tbody tr:last-child td{border-bottom:0}
  .orow td.clickable{cursor:pointer}
  .orow:hover td{background:var(--panel2)}
  /* Усечение: одна строка и многоточие; полный текст — подсказкой и в карточке. */
  .otbl td.cut{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mut)}
  /* Колонка сделок забирает остаток ширины: ей нечего беречь, она усекается. */
  .otbl th.c-legs,.otbl td.c-legs{width:auto}
  .otbl .sub{font-size:10.5px;margin-top:2px}
  .c-x{width:26px;padding-right:0 !important}
  /* ⚠ ФИКСИРОВАННАЯ ШИРИНА КОЛОНКИ ЕЩЁ НЕ УДЕРЖИВАЕТ СОДЕРЖИМОЕ: `table-layout:
     fixed` задаёт ширину, а текст без `overflow:hidden` всё равно вылезает за
     край — таблица 1282 px имела 1370 px содержимого, и «оплачено, не
     подтверждено» наезжало на соседнюю колонку. Усечение обязано стоять на
     КАЖДОЙ текстовой колонке, а не только на помеченных. */
  /* ⚠ ШИРИНА — ПО ВАЖНОСТИ ВОПРОСА, А НЕ ПОРОВНУ. Самая широкая колонка у
     ОТКЛОНЕНИЯ: это первое, что читают, и усечённое «биржу не спраши…» заставило
     бы наводить мышь на каждую строку. Направление и статус ужимаются охотно —
     первое читается по стрелке, второй по тону. */
  .c-dev{width:214px;overflow:hidden;white-space:nowrap}
  .c-ref{width:122px;overflow:hidden} .c-dir{width:182px;overflow:hidden}
  .c-sum{width:122px;white-space:nowrap} .c-left{width:104px;white-space:nowrap}
  .c-st{width:178px;overflow:hidden} .c-wait{width:132px;overflow:hidden}
  .c-wait>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .c-dev>.odev{display:inline-block;max-width:156px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
  /* Направление — тоже усечением: пара валют с банком длиннее колонки. */
  .c-dir>.cut{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .oexpand{background:none;border:0;color:var(--mut);cursor:pointer;font-size:12px;line-height:1;padding:2px 4px;font-family:inherit}
  .oexpand:hover{color:var(--teal)} .oexpand.on{color:var(--teal)}
  /* Сводный маркер строки: точка + слово. Точка — не единственный носитель
     смысла (WCAG 1.4.1): рядом всегда стоит слово рода. */
  .odot{display:inline-block;width:7px;height:7px;border-radius:999px;background:currentColor;margin-right:7px;vertical-align:middle}
  .odev{font-weight:700;font-size:11.5px}
  .omore{font-size:10.5px;margin-left:6px}
  .c-ref .num{font-size:11.5px} .c-ref .srct{margin-top:3px;display:inline-block}
  /* ⚠ СТОРОНА РАЗЛИЧАЕТСЯ ЦВЕТОМ ТЕКСТА, А НЕ ЗАЛИВКОЙ (оператор 09.09 просил,
     чтобы покупка и продажа не сливались, — различие остаётся). Залитый тег
     стоял на КАЖДОЙ строке: семь зелёных плашек подряд перестают быть
     признаком и становятся фоном. */
  /* Тег стороны читается КАК ПОДПИСЬ: без заливки, без верхнего регистра —
     иначе семь одинаковых плашек подряд перестают быть признаком. */
  .c-dir .sidetag{margin-top:3px;display:inline-block;font-size:10px;font-weight:600;text-transform:none;letter-spacing:0;background:none;border:0;padding:0}
  .c-dir .sidetag.t-pos{color:var(--green);border-color:rgba(51,222,147,.3)}
  .c-dir .sidetag.t-neg{color:var(--red);border-color:rgba(242,109,109,.3)}
  .c-dir .sidetag.t-mut{color:var(--mut)}
  /* Бейдж статуса: фон серый ВСЕГДА, тон только у текста. */
  .obadge{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:3px 9px;font-size:10.5px;font-weight:600}
  .obadge.t-neg{border-color:rgba(242,109,109,.4)}
  .obadge.push{margin-left:auto}

  /* Раскрытая строка: отклонения целиком и сделки с кнопками. */
  .oexp td{background:var(--bg2);padding:0;border-bottom:1px solid var(--line)}
  .oexpbox{padding:10px 14px 12px 36px;display:flex;flex-direction:column;gap:6px}
  .oleg{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--panel)}
  .olegrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;cursor:pointer;font-size:12px}
  .olegacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
  /* Список сделок заявки (19.09): заголовок со счётчиками; закрытые приглушены и свёрнуты. */
  .olegs-head{font-size:10.5px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase}
  .oleg.closed{opacity:.62}
  .olegs-closed{display:flex;flex-direction:column;gap:6px}

  /* Второстепенные фильтры — за раскрытием; выбранное названо рядом. */
  /* Шапка страницы ордера: состояние ФРАЗОЙ под именем (референс — окно ордера
     биржи), тон — то же трёхцветное правило. */
  .oheadl{min-width:0}
  .ostate{font-size:14px;font-weight:650;margin-top:6px}
  /* Выключенная кнопка называет причину ТЕКСТОМ: подсказку по наведению не
     видит тот, кто просто смотрит на серую кнопку (NN/g «Button States»). */
  .oact{display:flex;flex-direction:column;gap:4px;min-width:0}
  .oacthint{font-size:11px;color:var(--faint);max-width:260px;line-height:1.35}

  .ofiltline{display:flex;align-items:center;gap:10px;margin:8px 0 6px}
  .ofilt{background:none;border:1px solid var(--line2);border-radius:999px;color:var(--mut);font-size:12px;padding:6px 12px;cursor:pointer;font-family:inherit}
  .ofilt:hover{border-color:var(--teal);color:var(--teal)} .ofilt.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); }

  /* ⚠ Ссылка-кнопка входа. В `exchange.css` такая же заперта селектором
     `#v-flow` — идентификатором ВИДА МОКАПА, которого на нашей странице нет;
     ровно так однажды оказался мёртвым весь кабинет трейдера. Здесь класс
     самостоятельный. */
  .linkbtn{background:none;border:0;color:var(--teal);font-size:12px;cursor:pointer;padding:6px 0 0;text-align:left}
  .linkbtn:hover{text-decoration:underline}

  /* ---- Разбор плитки: модалка с рядом по времени --------------------------- */
  /* ⚠ Раскладка КЛАССАМИ, а не инлайном: прод отдаёт `style-src 'self'` без
     `unsafe-inline`, и каждый `style="…"` браузер отбрасывает молча. Высота
     столбца — единственное, что приходит значением, и она ставится через
     CSSOM (`el.style.height`), который политика не блокирует. */
  .kmodal{position:fixed;inset:0;background:rgba(4,7,11,.72);z-index:200;display:flex;align-items:center;justify-content:center;padding:24px}
  .kmodal[hidden]{display:none}
  .kcard{background:var(--panel);border:1px solid var(--line2);border-radius:18px;padding:20px 22px;width:min(860px,100%);max-height:88vh;overflow:auto}
  .khead{display:flex;align-items:center;gap:10px;margin-bottom:12px}
  .khead h3{margin:0;font-size:15px}
  .kx{margin-left:auto;background:none;border:0;color:var(--mut);font-size:18px;cursor:pointer;line-height:1}
  .kx:hover{color:var(--tx)}
  .filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
  .fbtn{background:var(--panel2);border:1px solid var(--line2);color:var(--mut);border-radius:999px;padding:5px 12px;font-size:12px;cursor:pointer}
  .fbtn.on{border-color:var(--teal);color:var(--teal)}
  .ktotal{font-size:26px;font-weight:750}
  /* Столбики: высота приходит с бэка, ширина делится поровну самим flex. */
  .chartwrap{display:flex;align-items:flex-end;gap:3px;height:180px;margin:14px 0 6px;padding:0 2px;border-bottom:1px solid var(--line2)}
  .cbarv{flex:1;min-width:2px;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
  .cbarv i{display:block;background:linear-gradient(180deg,var(--teal),var(--teal-dim));border-radius:3px 3px 0 0;min-height:0}
  /* ⚠ Пустая корзина рисуется полоской у оси: провал между столбиками и есть
     то, ради чего на график смотрят, и пропустив его, мы соврали бы о ритме. */
  .cbarv.empty i{background:var(--line2);height:2px}
  .caxis{display:flex;gap:3px;padding:0 2px;font-size:9.5px;color:var(--faint)}
  /* ⚠ ПОДПИСЬ НЕ ОБРЕЗАЕТСЯ. При тридцати корзинах колонка уже подписи, и
     `overflow:hidden` резал «12 авг» до «12 а» — дата, которую нельзя прочесть,
     хуже отсутствующей. Соседи пустые (прореживание в JS), пересекаться не с
     чем. */
  .caxis span{flex:1;min-width:2px;text-align:center;white-space:nowrap;overflow:visible}
  .cbar{display:grid;grid-template-columns:70px 1fr auto 44px;gap:10px;align-items:center;margin-bottom:6px;font-size:12px}
  .cbar .track{background:var(--panel2);border-radius:999px;height:8px;overflow:hidden}
  .cbar .track i{display:block;height:100%;background:var(--teal);border-radius:999px}
  .cbar .pc{color:var(--faint);text-align:right}

  /* ---- «Учёт» как четыре острова ------------------------------------------ */
  .islands{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .island{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px 20px;min-width:0}
  .island.wide{grid-column:1 / -1}
  .island h3{margin:0 0 4px;font-size:14px}
  .island .big{font-size:28px;font-weight:750;margin:6px 0 2px}
  .island .formula{font-size:11px;color:var(--faint);margin-bottom:12px;line-height:1.5}
  .kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line)}
  .kv:first-of-type{border-top:0}
  .kv .k{color:var(--mut);font-size:12.5px}
  .kv .k small{display:block;color:var(--faint);font-size:11px;margin-top:2px}
  .kv .v{white-space:nowrap}
  .kv.total .k,.kv.total .v{font-weight:700;color:var(--tx)}
  .twocol{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .twocol>div{min-width:0}
  .obl{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:8px 0;border-top:1px solid var(--line);font-size:12.5px}
  .obl .who{font-weight:600}
  .obl .what,.obl .age{color:var(--faint);font-size:11px}
  .obl.overdue .age{color:var(--red)}
  .nested{margin:10px 0 0 14px;padding-left:12px;border-left:2px solid var(--line2)}
  @media (max-width:1180px){.islands{grid-template-columns:1fr}.twocol{grid-template-columns:1fr}}

/* ---- единый чат v2: группы → карточки → чат (спека 03.09) -------------- */
.cg-gtabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:10px}
.cg-grow{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 12px;cursor:pointer;transition:.12s;border-left:3px solid transparent}
.cg-grow:hover{border-color:rgba(47,227,207,.35)}
.cg-grow.on{border-color:var(--teal);background:rgba(47,227,207,.06)}
.cg-grow.cg-esc{border-left-color:var(--red)}
.cg-grow.cg-esc.on{border-color:var(--red)}
.cg-gtop{display:flex;align-items:center;gap:7px}
.cg-gtop .cg-gref{font-weight:700;font-size:13px}
.cg-gtop .tm{font-size:10.5px;color:var(--faint);margin-left:auto}
.cg-gdir{font-size:11.5px;color:var(--mut);margin-top:5px}
.cg-greason{font-size:11.5px;margin-top:5px;color:var(--mut)}
.cg-greason.negative{color:var(--red)}
.cg-greason.positive{color:var(--green)}
.cg-gcounts{font-size:10.5px;color:var(--faint);margin-top:4px}
.cg-ghead{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.cg-ghead h3{margin:0;font-size:15px}
.cg-ghead .cg-gdir{margin-top:2px}
.cg-ghead .cg-glead{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--mut)}
.cg-gesc{background:rgba(255,92,92,.1);border:1px solid rgba(255,92,92,.35);color:var(--red);border-radius:9px;padding:7px 11px;font-size:12px;margin:10px 0;font-weight:600}
.cg-pcard{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:10px;cursor:pointer;border-left:3px solid var(--teal)}
.cg-pcard.on{border-color:var(--teal);box-shadow:0 0 0 1px rgba(47,227,207,.35)}
.cg-pcard .cg-ptop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cg-pcard .cg-ptop b{font-size:13px}
.cg-pcard .cg-pmeta{font-size:11.5px;color:var(--mut);margin-top:4px}
.cg-pcells{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.cg-pcell{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.cg-pcell .k{font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
.cg-pcell .v{font-size:12.5px;font-weight:700;margin-top:3px}
.cg-pcell .v.positive{color:var(--green)}
.cg-pcell .v.negative{color:var(--red)}
.cg-trustbar{height:4px;background:var(--line);border-radius:2px;margin-top:6px;overflow:hidden;width:120px;display:inline-block;vertical-align:middle}
.cg-trustbar i{display:block;height:100%;background:var(--green)}
.cg-trustbar.negative i{background:var(--red)}
.cg-trustbar.neutral i{background:var(--amber)}
.cg-scards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:10px}
.cg-scard{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:10px 12px;cursor:pointer;border-left:3px solid rgba(240,185,11,.7)}
.cg-scard.on{border-color:var(--teal);box-shadow:0 0 0 1px rgba(47,227,207,.35)}
.cg-scard .cg-stop{display:flex;align-items:center;gap:6px}
.cg-scard .cg-stop b{font-size:12.5px}
.cg-scard .cg-stop .tm{margin-left:auto;font-size:10.5px;color:var(--faint)}
.cg-scard .cg-srow{font-size:11.5px;color:var(--mut);margin-top:4px}
.cg-scard .cg-snow{font-size:11.5px;margin-top:6px;font-weight:600}
.cg-scard .cg-snow.negative{color:var(--red)}
.cg-scard .cg-snow.positive{color:var(--green)}
.cg-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:10.5px;color:var(--faint);margin:10px 0 6px}
.cg-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:middle}
.cg-legend .cp i{background:#8a94a6}.cg-legend .ag i{background:var(--teal)}.cg-legend .vn i{background:var(--amber)}.cg-legend .op i{background:var(--green)}
.ochatb .msg.cp{align-self:flex-start;background:rgba(138,148,166,.14);border-left:3px solid #8a94a6}
.ochatb .msg.ag{align-self:flex-start;background:rgba(47,227,207,.1);border-left:3px solid var(--teal)}
.ochatb .msg.vn{align-self:flex-start;background:rgba(240,185,11,.1);border-left:3px solid var(--amber)}
.ochatb .msg.op{align-self:flex-end;background:rgba(51,222,147,.12);border-right:3px solid var(--green)}
.ochatb .msg.ev{align-self:center;background:none;color:var(--faint);font-size:11px}
.ochatb .msg .cg-mwho{display:block;font-size:10.5px;color:var(--faint);margin-bottom:2px}
.ochatb .msg .cg-mat{font-size:10px;color:var(--faint);margin-left:6px}
.ochatb .msg .cg-mbody{white-space:pre-wrap}
.cg-chanpick option:disabled{color:var(--faint)}
.qa .fbtn.danger{color:var(--red);border-color:rgba(255,92,92,.4)}
.qa .fbtn:disabled{opacity:.45;cursor:not-allowed}
.chatgrid .cinbox{max-height:calc(100vh - 300px)}
.cg-marker{font-size:10px;font-weight:800;color:var(--red);background:rgba(255,92,92,.12);border-radius:5px;padding:2px 6px;flex-shrink:0}
.cg-appeal{font-size:10px;font-weight:700;color:var(--red);background:rgba(255,92,92,.12);border-radius:5px;padding:1px 6px}
.cg-scard.cancelled{opacity:.55;border-left-color:var(--line)}
.cg-collapsed{margin-top:8px;border:1px dashed var(--line);background:none;color:var(--faint);font-family:inherit;font-size:11.5px;border-radius:9px;padding:6px 10px;cursor:pointer;width:100%;text-align:left}
.cg-collapsed:hover{color:var(--mut);border-color:var(--mut)}

/* ---- страница ордера (модалка) ------------------------------------------ */
/* ⚠ Окно ордера — ШИРОКОЕ (правки «админка-8/9»). Два класса на одном элементе:
   .kcard задаёт max-width:660px, и одиночный .obox его не перебивал — экран
   оставался узким при верной ширине в правиле. Побеждает составной селектор. */
.kcard.obox{width:min(1680px,98vw);max-width:98vw;max-height:94vh;overflow:auto;font-size:13.5px}
.oright{display:flex;align-items:center;gap:10px}
/* minmax(0,…): у fr-дорожки минимум auto = min-content, и правая колонка (риск в две
   карточки + строка отправки) отжимала левую до ширины одного слова. */
.ogrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:start}
.ochat-send .dinp{min-width:0}
.osec{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px}
.osec h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}
.osec .kvr{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.osec .kvr:last-child{border-bottom:0}
.osec .kvr .k{color:var(--mut)}
.osec .kvr .v{text-align:right;font-weight:600;max-width:60%;overflow-wrap:anywhere}
.osec .kvr .v.positive{color:var(--green)}.osec .kvr .v.negative{color:var(--red)}
.orisk{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.orisk .rb{border:1px solid var(--line);border-radius:10px;padding:10px}
.orisk .rb .rl{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
.orisk .rb .rv{font-size:14px;font-weight:800;margin-top:3px}
.orisk .rb .rv.positive{color:var(--green)}.orisk .rb .rv.negative{color:var(--red)}.orisk .rb .rv.neutral{color:var(--amber)}
.orisk .rb ul{margin:6px 0 0;padding-left:16px;font-size:11.5px;color:var(--mut)}
.orisk .ext{grid-column:1/-1;font-size:11.5px;color:var(--mut)}
.oraw{max-height:340px;overflow:auto;font-size:11px}
.oraw .kvr{display:flex;gap:10px;padding:3px 0;border-bottom:1px solid var(--line)}
.oraw .kvr .k{color:var(--faint);min-width:180px;font-family:ui-monospace,monospace}
.oraw .kvr .v{overflow-wrap:anywhere}
@media (max-width:1000px){.ogrid{grid-template-columns:1fr}}

/* ---- учёт: метрики, казна, трекинг (правки 03.09) ------------------------ */
.mfilters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0 10px}
.mfilters .sendsel{padding:6px 8px}
.cg-atmrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.cg-atmrow .dinp{max-width:180px}
.track{width:100%;height:auto;background:var(--bg2);border:1px solid var(--line);border-radius:12px;margin-top:8px}
.tline{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.tline.ln-cap{stroke:var(--green)}
.tline.ln-turn{stroke:var(--teal);stroke-dasharray:6 4}
.tline.ln-mrg{stroke:var(--amber);stroke-dasharray:2 4}
.tlabel{fill:var(--faint);font-size:11px;font-family:inherit}
.fbtn.ln-cap.on{border-color:var(--green);color:var(--green)}
.fbtn.ln-turn.on{border-color:var(--teal);color:var(--teal)}
.fbtn.ln-mrg.on{border-color:var(--amber);color:var(--amber)}
.cg-islands{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin:12px 0}
.cg-isl{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px}
.cg-isl .formula{font-size:11.5px;color:var(--mut);margin:6px 0 8px;overflow-wrap:anywhere}
.cg-step{display:flex;align-items:center;gap:8px;margin:12px 0 6px;font-size:13px}
.cg-stepn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;background:var(--teal);color:#04211d;font-size:11px;font-weight:800}
.cg-routes{display:flex;gap:8px;flex-wrap:wrap}
.cg-route{display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 12px;color:var(--tx);font-family:inherit;font-size:12.5px;cursor:pointer;text-align:left}
.cg-route.on{border-color:var(--teal);background:rgba(47,227,207,.08)}
.cg-atmdetails{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.cg-atmdetails .dinp{min-width:160px}

/* ---- ME · движок по мокапу (03.09) ---- */
.subtxt.collap{cursor:pointer;display:flex;align-items:center;gap:7px;user-select:none}.subtxt.collap:hover{color:var(--mut)}
.collapbody{margin-bottom:8px}
.tablewrap{overflow-x:auto}
table.declog{width:100%;border-collapse:collapse;font-size:12.5px}table.declog th{text-align:left;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);padding:8px 10px;border-bottom:1px solid var(--line)}table.declog td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.u-ml-auto{margin-left:auto}
.alert .ai.bad{color:var(--red)}
table.declog td.bad{color:var(--red)}
.zmarket{margin:8px 0 14px}
.zcell{display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:#04211d}
.zcell.h{background:rgba(242,109,109,.75);color:#fff}.zcell.w{background:rgba(244,183,64,.7)}.zcell.c{background:rgba(106,168,255,.55);color:#fff}
.zcell.vote{outline:2px solid var(--teal);outline-offset:-2px}
.zcell .zlab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px}
#me-profile .kv .v.up{color:var(--green)}

/* ③ МЕ решение — раскладка мокапа «Баланс · калибровка · полная стратегия».
   Инлайновых стилей в бою нет (CSP), поэтому то, что мокап держал в style="…", — здесь классами. */
.me-sep{border-top:1px solid var(--line2);padding-top:14px;margin-top:16px}
.mupresets{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 10px}
.mp.stub{border-style:dashed;opacity:.75}
.mixlabels{display:flex;justify-content:space-between;font-size:10.5px;color:var(--faint);margin-bottom:6px}
.mixwrap input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:8px;border-radius:999px;outline:none;cursor:pointer}
.mixwrap input[type=range].mu{background:linear-gradient(90deg,var(--green),var(--teal) 42%,var(--amber) 74%,var(--gold))}
.mixwrap input[type=range].nu{background:linear-gradient(90deg,var(--teal),var(--blue) 60%,var(--gold))}
.mixwrap input[type=range]::-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)}
.mixwrap input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--teal);cursor:pointer}
.mixrow .now{font-size:11px;color:var(--faint)} .mixrow .now.positive{color:var(--green)} .mixrow .now.neutral{color:var(--teal)}
.axnote{font-size:11px;color:var(--faint);margin-top:6px;line-height:1.5}
.subtxt.teal{color:var(--teal)}
.derivehead{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line2);font-size:11px;color:var(--teal)}
.kv.stub .v{color:var(--amber)}
.tb.stub{background:rgba(244,183,64,.16);color:var(--amber);border:1px dashed rgba(244,183,64,.5)}
.calrow .calval{font-family:var(--mono);font-size:11.5px;color:var(--mut)}
.calrow .calval.stub{color:var(--amber)}
.calrow .caln small{display:block;font-weight:400;color:var(--faint);font-size:10px;margin-top:1px}
.calrow .calsave{background:var(--panel2);border:1px solid var(--line2);color:var(--tx);border-radius:6px;padding:4px 7px;font-size:10.5px;font-family:inherit;cursor:pointer} .calrow .calsave:hover{border-color:var(--teal)}
.calhdr.six,.calrow.six{grid-template-columns:1.5fr 1fr 1fr 1fr .55fr .6fr}
.calnote{font-size:11px;color:var(--faint);margin:6px 0 2px}
.cfglegend{font-size:11px;margin:-4px 0 10px}
.mecat .cpline{gap:10px;cursor:pointer} .mecat .cpline .tt{flex:1;color:var(--mut)} .mecat .cpline .tt small{display:block;color:var(--faint);font-size:10.5px}
.mecat .cpline .rt2{display:flex;gap:7px;align-items:center} .mecat .cpline .rt2 .num{font-size:11.5px}
.mecat .cpline.ro{cursor:default}
.dirtable{overflow-x:auto} .dirtable td .switch{pointer-events:none} .dirtable td small{display:block;color:var(--faint);font-size:10px}
.switch.none{opacity:.25}

/* доска датчиков «Мониторинга» */
.note.crit{border-color:rgba(255,90,90,.35)}
.sensor.stub .sval{color:var(--amber)} .sensor .snm .tb{margin-left:6px}
.sdot.g{background:var(--green)} .sdot.a{background:var(--amber)} .sdot.r{background:var(--red)}
.mtv.down{color:var(--red)}
#sens-accounts td.ok{color:var(--green)} #sens-accounts td.bad{color:var(--amber)} #sens-accounts .mono{font-family:var(--mono);font-size:11px}
#sens-accounts td .sdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}

/* доска прокси */
#px-tagline{margin:-6px 0 12px}
.kv .v.mono{font-family:var(--mono);font-size:11.5px;white-space:normal;text-align:right}
.dirtable .meta.ok{color:var(--green)} .dirtable .meta.bad{color:var(--red)} .dirtable td .dir{font-weight:600} .dirtable td .meta{font-size:11px;color:var(--faint)}
#cur-directions td .meta{white-space:normal;max-width:220px}

/* Обзор: карточка факторов кликабельна; точка в ячейке таблицы */
#ov-factors-card{cursor:pointer} #ov-factors-card:hover{border-color:rgba(47,227,207,.35)}
#accounts td .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}
#ov-factors .val.bad{color:var(--red)}

/* «Валюты»: тулбар и модал создания */
.rails-bar{flex-wrap:wrap;gap:8px} .rails-bar .dinp{min-width:140px}
.railform{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:8px 0 14px} .railform label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--faint)} .railform button{align-self:end}
.railtpl{max-height:280px;overflow-y:auto;border:1px solid var(--line);border-radius:9px;padding:4px 10px}
.railtpl-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);cursor:pointer;font-size:12.5px} .railtpl-row:last-child{border-bottom:0}
.railtpl-row .tname{font-weight:600;min-width:160px} .railtpl-row .tmarket{color:var(--faint);font-size:11.5px} .railtpl-row .tmarket.positive{color:var(--green)} .railtpl-row .tmarket.negative{color:var(--amber)}
.railtpl-row.exists{opacity:.55}
.railcb{accent-color:var(--teal)}
.railform .rail-newcur{border-left:2px solid var(--teal);padding-left:8px}

/* страница ордера — чат справа, как в окне Bybit */
.ochat .ochatb{max-height:320px;overflow-y:auto;padding:6px 0}
.ochat-send{display:flex;gap:8px;margin-top:8px} .ochat-send .dinp{flex:1}
/* участники: подпись под числом плитки; строка-клик в таблице клиентов */
.ustat .us{font-size:10.5px;color:var(--faint);margin-top:2px}
tr.click{cursor:pointer} tr.click:hover td{background:rgba(47,227,207,.04)}

/* вложения в чатах и кнопка «📎» */
.cg-att{margin:6px 0 2px} .cg-att img{max-width:260px;max-height:200px;border-radius:8px;display:block;border:1px solid var(--line)} .cg-att video{max-width:320px;max-height:220px;border-radius:8px;display:block}
.cg-attlink{display:inline-block;font-size:11.5px;color:var(--teal);margin-top:3px}
.fbtn.attach{cursor:pointer;padding:6px 10px}
#op-riskscan .kv .v.bad{color:var(--red)} #op-riskscan .kv .v.ok{color:var(--green)} #op-riskscan .kv .v.warn{color:var(--amber)}
.osec .kvr .v{font-size:13.5px} .osec h4{font-size:13px}

/* ордера биржи как они есть — вкладка «Заявок» (правки 04.09) */
.vo-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px;font-size:12px}
.vo-bar .vchip{font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--panel2);color:var(--mut);border:1px solid var(--line);cursor:pointer;font-family:inherit}
.vo-bar .vchip.on{border-color:var(--teal);color:var(--teal);background:rgba(47,227,207,.1)}
.vo-bar .vo-sep{width:1px;height:18px;background:var(--line2);margin:0 2px}
.vo-bar .fbtn{margin-left:auto}
.vo-table tr.vo-row{cursor:pointer} .vo-table tr.vo-row:hover td{background:rgba(47,227,207,.05)}
.vo-table td{white-space:nowrap} .vo-table td.faint{color:var(--faint)}

/* Объёмы рынка (07.09): график столбиками, классы вместо inline-стилей (CSP). */
.liqchart-wrap{width:100%;overflow:hidden;margin:10px 0}
.liqchart{width:100%;height:220px;display:block}
/* ⚠ Был `var(--acc)` — токена с таким именем в палитре M3 НЕТ, и график молча
   рисовался запасным синим посреди бирюзовой консоли: «два разных сайта» на
   одном экране. Акцент здесь тот же, что у мини-графиков рынков. */
.liqbar{fill:var(--teal);opacity:.85}
.liqbar.est{fill:var(--mut);opacity:.6}
.liqbar.hot{opacity:1}
.liqaxis{stroke:var(--line2, #333);stroke-width:1}
.liqlabel{fill:var(--mut, #888);font-size:10px}
.liqchips .stchip.dim{opacity:.5}
/* Остановку сбора решает СЕРВЕР (`stalled`), клиент только красит: «сбор не идёт» красным. */
table#liq-table td.bad{color:var(--red)}
/* ⚠ ОБЪЯСНЕНИЕ ПРАВИЛА ПЕРЕНОСИТСЯ, А НЕ РАСТАЛКИВАЕТ ТАБЛИЦУ. При глобальном
   `td{white-space:nowrap}` фраза «на этой доске исчезновение объёмом не считается»
   уводила столбец «чинится» за правый край, а он-то и отвечает на вопрос «что
   крутить» — тот же класс, что таблица счетов, разъезжавшаяся до 2 893 px (19.09). */
table#liq-verdicts td:nth-child(2){white-space:normal;max-width:34ch;line-height:1.35}
table#liq-verdicts td:last-child{white-space:normal;max-width:26ch;font-size:11.5px}
table#liq-verdicts td.warn{color:var(--amber, #d9a441)}
table#liq-verdicts td.ok{color:var(--green)}
table#liq-verdicts td.bad{color:var(--red)}
#liq-totals .row{font-size:12.5px;border-top:1px solid var(--line);padding:6px 0}

/* ── ШАПКА «ОБЪЁМОВ РЫНКА» ПО МОКАПУ 21.09 ───────────────────────────────────
   Четыре числа и состояние сбора до всякой таблицы. Тон приходит с бэка полем
   `tone`: клиент красит, но не решает, что считать тревогой. */
.vtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:10px 0 8px}
.vtile{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:0}
.vtile .k{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.vtile .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:22px;font-weight:700;margin-top:6px;letter-spacing:-.02em}
.vtile .n{font-size:11.5px;color:var(--mut);margin-top:4px;overflow-wrap:anywhere}
.vtile.ok .v{color:var(--green)} .vtile.warn .v{color:var(--amber)} .vtile.bad .v{color:var(--red)}
/* Свежесть и покрытие — одна строка: застывший показатель свежести утверждает свежесть, которой нет. */
.vfresh{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;font-size:12px;color:var(--mut);margin:0 0 10px}
.vfresh.bad{color:var(--red)}
.vfresh .cov{color:var(--faint)}

/* ── СЕТКА МИНИ-ГРАФИКОВ: у каждой карточки СВОЯ шкала (единица — монета доски) ── */
.sparks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.spark{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:9px 11px 7px;cursor:pointer;min-width:0}
.spark:hover{border-color:var(--line2)}
.spark.on{border-color:var(--teal)}
.spark .sh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:11.5px;color:var(--mut)}
.spark .sc{color:var(--tx);font-weight:600;font-size:13px}
.spark .sv{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11.5px;white-space:nowrap}
.sparksvg{width:100%;height:66px;display:block;margin:4px 0 2px}
.sparkline{fill:none;stroke:var(--teal);stroke-width:1.4}
.sparkarea{fill:var(--teal);opacity:.14;stroke:none}
.sparkdot{fill:var(--teal)}
/* Пустой ряд не притворяется ровным потоком: линия гаснет, а подпись говорит словами. */
.spark.flat .sparkline{stroke:var(--line2)} .spark.flat .sparkarea{opacity:0} .spark.flat .sparkdot{fill:var(--line2)}
.spark.stale .sc{color:var(--red)}
.spark .sf{display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:10px;color:var(--faint)}

/* Пилюля доверия к числу (0420): «годится · с оговоркой · не опираться». */
.tp{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--mut);white-space:nowrap}
.tp.ok{color:var(--green);border-color:rgba(51,222,147,.45)}
.tp.warn{color:var(--amber);border-color:rgba(244,183,64,.45)}
.tp.bad{color:var(--red);border-color:rgba(242,109,109,.45)}
.tpgap{margin-left:6px}
table#liq-sellers td.ok{color:var(--green)} table#liq-sellers td.warn{color:var(--amber)}
/* Полоса ВНУТРИ ячейки: `.recbar` рассчитан на flex-строку и в `td` схлопывался в нитку. */
.cellbar{display:inline-block;vertical-align:middle;width:140px;height:8px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);overflow:hidden}
.cellbar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--green))}

/* ── ME · мультиаккаунт: карточки счетов вместо таблицы на девять колонок (19.09) ────────
   ⚠ Таблица держала «готовность рынков», «закрыто венью» и «последнее решение» прозой в
   ячейках при глобальном `td{white-space:nowrap}` — документ разъезжался до 2 893 px при
   окне 1 440, две правые колонки уезжали за край, и что они там есть, тоже не было видно.
   Проза живёт строками с переносом, числа — в шапке карточки. */
.acct{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px;min-width:0}
.acct-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-bottom:6px}
.acct-ref{font-weight:600}
.acct-kv{font-size:12.5px;white-space:nowrap}.acct-kv small{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.acct-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;font-size:12.5px;padding:5px 0;border-top:1px solid var(--line)}
.acct-row small{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding-top:2px}
.acct-row span{white-space:normal;overflow-wrap:anywhere;min-width:0}
/* план флота: раскладка по счетам — тоже проза; прокрутка внутри контейнера, никогда у страницы */
#me-fleet{overflow-x:auto}#me-fleet td{white-space:normal;overflow-wrap:anywhere}

/* ── строка тревоги — одна на «Обзор» и «Состояние» (19.09, №5): статус словами · предмет · текст · возраст · ссылка · действие ──
   Красный — нужен человек (critical); warning читается нейтральным. Амбера здесь нет: он значил бы «истекает срок», такой оси у тревог нет. */
/* ⚠ Действия — ОТДЕЛЬНОЙ СТРОКОЙ ПОД ТЕКСТОМ, а не третьей колонкой: в узкой правой
   колонке «Обзора» две кнопки съедали ширину, и текст тревоги рассыпался по букве в строке. */
.alrow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:start;padding:9px 0;border-bottom:1px solid var(--line)}
.alrow:last-child{border-bottom:0}
.alst{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:6px;white-space:nowrap;background:var(--panel2);color:var(--mut);margin-top:2px}
.alrow.bad .alst{background:rgba(242,109,109,.14);color:var(--red)}
.almid{min-width:0}
.alhead{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11.5px;color:var(--faint);align-items:baseline}
.alhead .alsub{color:var(--tx)}
.altxt{font-size:12.5px;color:var(--tx);overflow-wrap:anywhere}
.alrow .arun{font-size:11.5px;color:var(--faint);margin-top:3px;overflow-wrap:anywhere}
.alact{grid-column:2;display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-start;min-width:0;margin-top:2px}
.alact:empty{display:none}
.alact a.abtn{text-decoration:none;display:inline-block}
/* план подачи спора (19.09, №10): анкета и пакет, как они уйдут арбитру, — моноширинно, без прокрутки страницы */
pre.plan{font-family:var(--mono);font-size:11.5px;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:6px 0 10px;color:var(--tx)}
/* счётчик ожидающих тредов на вкладке «Группы · чат» (19.09, №1): бывший бейдж раздела «Единый чат» */
.os .qcount{margin-left:6px;vertical-align:baseline}.os .qcount:empty{display:none}

/* ── «Работа», шаг 2 (19.09, №1): карточка связки — ПАНЕЛЬЮ рядом с очередью, а не модалкой поверх неё ────
   Оператор работает со сделками из очереди: закрыв модалку, он терял место в списке и открывал следующую
   с нуля. В режиме «список — деталь» (Material 3 list-detail) очередь остаётся слева и кликабельной,
   карточка с действиями и чатом — справа; открытая строка подсвечена. На телефоне панель во всю ширину. */
body.detail-docked #opage.on{position:fixed;inset:0 0 0 auto;width:min(1000px,62vw);padding:0;background:var(--bg);backdrop-filter:none;border-left:1px solid var(--line2);align-items:stretch;justify-content:stretch;box-shadow:-28px 0 56px -36px #000}
body.detail-docked #opage.on .kcard.obox{width:100%;max-width:none;height:100%;max-height:none;border-radius:0;border:0;overflow-y:auto}
/* Очередь в режиме «список — деталь»: четыре колонки — отклонение · заявка · сумма · ждёт; остальное читается в карточке. */
body.detail-docked [data-page="orders"]{padding-right:calc(min(1000px,62vw) + 16px);max-width:none}
/* три колонки: отклонение · заявка · сумма; «ждёт» и остальное — в карточке, сумма забирает остаток ширины */
body.detail-docked [data-page="orders"] .c-dir,body.detail-docked [data-page="orders"] .c-left,body.detail-docked [data-page="orders"] .c-legs,body.detail-docked [data-page="orders"] .c-st,body.detail-docked [data-page="orders"] .c-wait{display:none}
body.detail-docked [data-page="orders"] .c-dev{width:150px}body.detail-docked [data-page="orders"] .c-ref{width:96px}body.detail-docked [data-page="orders"] .c-sum{width:auto}
body.detail-docked [data-page="orders"] .osearch{display:none}
.orow.on td,.orow.on:hover td{background:rgba(47,227,207,.08)}
@media (max-width:900px){body.detail-docked #opage.on{width:100vw;border-left:0}body.detail-docked [data-page="orders"]{padding-right:0}}

/* ── Телефон (≤ 600 px): «Обзор» и «Работа» обязаны помещаться (оператор, 19.09, №28) ──────────────────
   Тревога и карточка бота ведут ссылкой на строку, и оператор приходит сюда с телефона: при 390 px документ
   был 777 px — вдвое шире экрана. Плитки в одну колонку, вкладки переносятся, поиск на всю ширину, таблицы
   прокручиваются внутри своего контейнера, а страница — никогда вбок. */
@media (max-width:600px){
  .wrap{padding:12px 12px 24px}
  .topbar{padding:10px 12px;gap:10px;flex-wrap:wrap}.topbar .sp{gap:8px;font-size:12px}
  .kpis{grid-template-columns:1fr 1fr;gap:8px}
  .card{padding:12px;min-width:0}
  .grid,.islands,.twocol{grid-template-columns:1fr}
  .u-scroll-x,.otbl-wrap,#accounts{overflow-x:auto;max-width:100%}
  .otoolbar{gap:8px}.oseg{flex-wrap:wrap}.os{padding:7px 9px;font-size:12px}
  .osearch{min-width:0;flex:1 1 100%;margin-left:0}
  .devbar{display:flex;flex-wrap:wrap;gap:6px}
  /* Карточка связки — во всю ширину, колонки карточки одна под другой. */
  .kmodal{padding:0}.kcard.obox,.kcard{width:100vw;max-width:100vw;max-height:100vh;border-radius:0}
  .ogrid{grid-template-columns:1fr}
  .khead{flex-wrap:wrap;gap:8px}
  .alrow{grid-template-columns:1fr}.alst{justify-self:start}.alact{grid-column:1}
}
/* ответ кнопки lifecycle — рядом с кнопкой (19.09) */
.abtn-out{font-size:12px;margin:4px 0 2px;overflow-wrap:anywhere}
/* заставка до ответа о сессии (19.09): одна строка по центру, ни формы, ни консоли */
.boot{min-height:100vh;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:13px;letter-spacing:.02em}