/* ============================================================
   Поток — дизайн-система (продакшн-сборка).
   Токены + оболочка + компоненты.
   Копирует design/app.css с дополнительными секциями
   из инлайн-стилей dashboard.html.
   ============================================================ */

/* ── Шрифты ── */
@import url("/static/fonts/fonts.css");

/* ── Переменные (токены) ── */
:root{
  /* Палитра Claude: тёплый коралл/глина (акцент) на тёплых тёмных/кремовых фонах. */
  --f1:#C2613D;--f2:#D97757;--f3:#EBA17E;
  --flow:linear-gradient(110deg,var(--f1) 0%,var(--f2) 50%,var(--f3) 100%);
  --up:#5E9D71;--down:#D1574B;--warn:#D99A4E;
  --r-lg:1.25rem;--r-md:0.875rem;--r-sm:0.625rem;
  --ff-d:"Unbounded",sans-serif;
  --ff-g:"Golos Text",sans-serif;
  --ff-m:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}
[data-theme="dark"]{
  --bg:#1A1916;--bg-2:#211F1B;--surface:#262420;--surface-2:#2E2B26;--surface-3:#38342E;
  --border:#423E37;--border-soft:#2E2B26;--text:#ECEAE1;--muted:#A39C8E;--faint:#736C5F;
  --glass:rgba(255,255,255,.03);--glass-line:rgba(255,255,255,.06);
  --shadow:0 1.5rem 3.75rem -1.75rem rgba(0,0,0,.80);
}
[data-theme="light"]{
  --bg:#F0EEE6;--bg-2:#F6F4EC;--surface:#FFFFFF;--surface-2:#FAF8F1;--surface-3:#EFEBE0;
  --border:#E1DDD1;--border-soft:#ECE8DD;--text:#1F1E1B;--muted:#6E6A5F;--faint:#9C968A;
  --glass:rgba(40,30,20,.02);--glass-line:rgba(40,30,20,.05);
  --shadow:0 1.5rem 3.125rem -1.875rem rgba(60,45,30,.26);
  /* Акценты для светлой темы — чуть глубже, контрастнее на кремовом/белом.
     --flow пересобирается автоматически (var() резолвится в момент использования). */
  --f1:#B85A38;--f2:#CC6A48;--f3:#D98A66;
  --up:#3E8C5B;--down:#C0473B;--warn:#B07A2E;
}

/* ── Сброс ── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

/* ── Body + фоновая аврора ── */
body{
  font-family:var(--ff-g);background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;min-height:100vh;
  line-height:1.45;letter-spacing:0.00625rem;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60vw 40vw at 8% -6%,rgba(217,119,87,.12),transparent 60%),
    radial-gradient(50vw 36vw at 100% 0%,rgba(235,161,126,.10),transparent 55%),
    radial-gradient(40vw 30vw at 60% 110%,rgba(217,154,78,.06),transparent 60%);
}
/* зернистость атмосферы */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Основная сетка приложения ── */
.app{position:relative;z-index:1;display:grid;grid-template-columns:15.5rem 1fr;min-height:100vh}

/* ── Сайдбар ── */
.side{
  position:sticky;top:0;height:100vh;padding:1.375rem 1rem;
  display:flex;flex-direction:column;gap:0.375rem;
  border-right:0.0625rem solid var(--border-soft);background:var(--bg-2);
}
.brand{display:flex;align-items:center;gap:0.75rem;padding:0.375rem 0.5rem 1.375rem}
.brand .mark{
  width:2.375rem;height:2.375rem;border-radius:0.75rem;
  background:transparent;color:var(--f2);
  border:0.09375rem solid color-mix(in srgb,var(--f2) 45%,transparent);
  display:grid;place-items:center;position:relative;
  /* лёгкое свечение вместо заливки */
  box-shadow:0 0 1rem -0.375rem color-mix(in srgb,var(--f2) 65%,transparent);
}
.brand .mark svg{width:1.4375rem;height:1.4375rem}
/* Дельта-знак наследует акцентный цвет рамки (stroke=currentColor в шаблоне). */
.brand .name{font-family:var(--ff-g);font-weight:800;font-size:1.25rem;letter-spacing:0.01875rem}
.nav-label{font-size:0.6875rem;letter-spacing:0.0875rem;text-transform:uppercase;color:var(--faint);padding:0.875rem 0.625rem 0.375rem}
.nav a{
  display:flex;align-items:center;gap:0.75rem;padding:0.625rem 0.75rem;border-radius:var(--r-sm);
  color:var(--muted);text-decoration:none;font-weight:500;font-size:0.90625rem;
  transition:.18s var(--ease);position:relative;
}
.nav a svg{width:1.1875rem;height:1.1875rem;stroke-width:1.7}
.nav a:hover{color:var(--text);background:var(--glass)}
.nav a.active{color:var(--text);background:var(--surface-2)}
.nav a.active::before{
  content:"";position:absolute;left:-1rem;top:0.5625rem;bottom:0.5625rem;width:0.1875rem;
  border-radius:0 0.1875rem 0.1875rem 0;background:var(--flow);
}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:0.625rem;padding-top:0.875rem}
.robot-state{
  display:flex;align-items:center;gap:0.625rem;padding:0.75rem;border-radius:var(--r-md);
  background:var(--surface);border:0.0625rem solid var(--border-soft);
}
.pulse{width:0.5625rem;height:0.5625rem;border-radius:50%;background:var(--up);animation:pulse 2.4s infinite}
/* Робот остановлен: красная статичная точка (без мятной пульсации). */
.pulse.stopped{background:var(--down);box-shadow:none;animation:none}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(94,157,113,.45)}
  70%{box-shadow:0 0 0 0.5625rem rgba(94,157,113,0)}
  100%{box-shadow:0 0 0 0 rgba(94,157,113,0)}
}
.robot-state small{color:var(--faint);font-size:0.6875rem;display:block}
.robot-state span{font-size:0.8125rem;font-weight:600}

/* ── Topbar ── */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{
  display:flex;align-items:center;gap:1rem;padding:1rem 1.75rem;
  border-bottom:0.0625rem solid var(--border-soft);position:sticky;top:0;z-index:5;
  background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(0.875rem);
}
.page-title{font-family:var(--ff-g);font-weight:700;font-size:1.125rem;letter-spacing:0.0125rem}
.page-title small{display:block;font-family:var(--ff-g);font-weight:400;font-size:0.75rem;color:var(--faint);letter-spacing:0.01875rem}
.spacer{flex:1}
.acct{
  display:flex;align-items:center;gap:0.625rem;padding:0.5rem 0.75rem;border-radius:var(--r-md);
  background:var(--surface);border:0.0625rem solid var(--border);cursor:pointer;font-size:0.84375rem;font-weight:500;
}
.acct .dot{width:0.4375rem;height:0.4375rem;border-radius:50%;background:var(--f2)}
.acct svg{width:0.9375rem;height:0.9375rem;color:var(--muted)}
.badge{
  font-family:var(--ff-m);font-size:0.6875rem;font-weight:500;padding:0.3125rem 0.5625rem;border-radius:0.5rem;
  letter-spacing:0.025rem;text-transform:uppercase;
}
.badge.sandbox{
  color:var(--warn);
  background:color-mix(in srgb,var(--warn) 14%,transparent);
  border:0.0625rem solid color-mix(in srgb,var(--warn) 30%,transparent);
}
/* мастер-тумблер автотрейда */
.autotrade{display:flex;align-items:center;gap:0.6875rem;padding:0.4375rem 0.5rem 0.4375rem 0.875rem;border-radius:var(--r-md);background:var(--surface);border:0.0625rem solid var(--border)}
.autotrade .lbl{font-size:0.6875rem;line-height:1.2;color:var(--faint)}
.autotrade .lbl b{display:block;font-size:0.8125rem;color:var(--text);font-weight:600}
.icon-btn{
  width:2.375rem;height:2.375rem;display:grid;place-items:center;border-radius:0.6875rem;
  background:var(--surface);border:0.0625rem solid var(--border);
  color:var(--muted);cursor:pointer;transition:.18s;
}
.icon-btn:hover{color:var(--text);border-color:var(--border)}
.icon-btn svg{width:1.125rem;height:1.125rem}
.icon-btn.bell{position:relative}
.icon-btn.bell::after{
  content:"";position:absolute;top:0.5625rem;right:0.625rem;
  width:0.4375rem;height:0.4375rem;border-radius:50%;
  background:var(--down);border:0.125rem solid var(--surface);
}
.ava{
  width:2.375rem;height:2.375rem;border-radius:0.6875rem;
  background:transparent;
  border:0.09375rem solid color-mix(in srgb,var(--f2) 45%,transparent);
  display:grid;place-items:center;font-weight:700;font-size:0.875rem;
  background-image:var(--flow);-webkit-background-clip:text;background-clip:text;color:transparent;
  box-shadow:0 0 0.875rem -0.4375rem color-mix(in srgb,var(--f2) 60%,transparent);
}
button.ava{cursor:pointer;font-family:inherit;padding:0}
button.ava:hover{border-color:color-mix(in srgb,var(--f2) 70%,transparent)}

/* ── Аватар-меню (топбар) ── */
.ava-menu{position:relative}
.ava-pop{
  position:absolute;top:calc(100% + 0.5rem);right:0;min-width:13rem;z-index:60;
  background:var(--surface-2);border:0.0625rem solid var(--border);border-radius:0.875rem;
  padding:0.375rem;box-shadow:0 1.125rem 2.5rem -0.75rem rgba(0,0,0,.55);
  display:none;
}
.ava-menu.open .ava-pop{display:block;animation:rise .18s var(--ease) forwards}
.ava-pop-user{
  padding:0.5rem 0.75rem 0.625rem;font-size:0.75rem;color:var(--muted);
  border-bottom:0.0625rem solid var(--border-soft);margin-bottom:0.3125rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ava-pop-item{
  display:flex;align-items:center;gap:0.6875rem;width:100%;box-sizing:border-box;
  padding:0.5625rem 0.75rem;border-radius:0.5625rem;border:none;background:none;cursor:pointer;
  color:var(--text);font-family:inherit;font-size:0.84375rem;text-align:left;text-decoration:none;
}
.ava-pop-item:hover{background:var(--surface-3)}
.ava-pop-item svg{width:1.125rem;height:1.125rem;color:var(--f2);flex:0 0 auto}
.ava-pop-item.danger{color:var(--down)}
.ava-pop-item.danger svg{color:var(--down)}
.ava-pop form{margin:0}

/* ── Контент + карточки ── */
.content{padding:1.5rem 1.75rem 3rem;display:flex;flex-direction:column;gap:1.25rem;
  /* Единый контейнер контента в ОТНОСИТЕЛЬНЫХ единицах: ширина = меньшее из
     100% и 67.5rem — на узких экранах занимает всё, на широких ограничена
     ~67.5rem при базовом шрифте 1rem, но масштабируется с font-size/зумом
     (доступность). margin-inline:auto центрирует. Карточки по умолчанию
     занимают ширину контейнера — единый левый/правый край на всех страницах. */
  width:min(100%, 67.5rem);margin-inline:auto}
/* Утилиты ширины карточек (rem вместо разнобоя инлайновых px-max-width):
   .card.narrow — узкие формы (~40rem@16); .card.mid — средние (~51.25rem@16). */
.card.narrow{max-width:40rem}
.card.mid{max-width:51.25rem}
.reveal{opacity:0;transform:translateY(0.875rem);animation:rise .7s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.card{
  background:linear-gradient(180deg,var(--glass),transparent),var(--surface);
  border:0.0625rem solid var(--border-soft);border-radius:var(--r-lg);
  padding:1.25rem;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.card .top-line{
  position:absolute;inset:0 0 auto 0;height:0.0625rem;
  background:linear-gradient(90deg,transparent,var(--glass-line),transparent);
}
.card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;gap:0.75rem}
.card-h h3{font-family:var(--ff-g);font-weight:700;font-size:0.9375rem}
.card-h .link{color:var(--muted);font-size:0.78125rem;text-decoration:none;display:flex;align-items:center;gap:0.25rem}
.card-h .link:hover{color:var(--text)}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.mono{font-family:var(--ff-m)}
.up{color:var(--up)}
.down{color:var(--down)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}

/* ── Компоненты ── */
.btn{
  font-family:var(--ff-g);font-weight:600;font-size:0.84375rem;padding:0.625rem 1rem;
  border-radius:var(--r-md);border:0.0625rem solid var(--border);background:var(--surface);
  color:var(--text);cursor:pointer;transition:.18s var(--ease);
  display:inline-flex;align-items:center;gap:0.5rem;
}
.btn:hover{border-color:var(--muted)}
/* Primary: контур + фирменный градиент в тексте + лёгкое свечение (без заливки). */
.btn.primary{
  background:transparent;
  border:0.09375rem solid color-mix(in srgb,var(--f2) 50%,transparent);
  background-image:var(--flow);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  box-shadow:0 0 1rem -0.4375rem color-mix(in srgb,var(--f2) 65%,transparent);
}
.btn.primary:hover{
  border-color:color-mix(in srgb,var(--f2) 75%,transparent);
  box-shadow:0 0 1.375rem -0.3125rem color-mix(in srgb,var(--f2) 60%,transparent);
}
/* SVG-иконки внутри primary-кнопки не клипуются как текст — задаём цвет явно. */
.btn.primary svg{color:var(--f2)}
.btn.danger{
  color:var(--down);
  border-color:color-mix(in srgb,var(--down) 40%,transparent);
  background:color-mix(in srgb,var(--down) 10%,transparent);
}
.btn svg{width:1rem;height:1rem}
.btn.ghost{background:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--text)}

/* ── Список выбора торгового счёта (раздел «Аккаунт») ── */
.acc-list{display:flex;flex-direction:column;gap:0.5rem}
.acc-row{
  display:flex;align-items:center;gap:0.75rem;padding:0.75rem 0.875rem;cursor:pointer;
  border:0.0625rem solid var(--border-soft);border-radius:var(--r-md);background:var(--surface-2);
  transition:.16s var(--ease);
}
.acc-row:hover{border-color:var(--muted)}
.acc-row.sel{
  border-color:color-mix(in srgb,var(--f2) 55%,transparent);
  background:color-mix(in srgb,var(--f2) 8%,var(--surface-2));
}
.acc-row input[type="radio"]{accent-color:var(--f2);width:1rem;height:1rem}
.acc-main{display:flex;flex-direction:column;gap:0.125rem;font-size:0.875rem}
.acc-main small{font-size:0.75rem}
.seg{display:flex;gap:0.125rem;background:var(--surface-3);padding:0.1875rem;border-radius:0.625rem}
.seg button,.seg a.seg-btn{
  border:0;background:transparent;color:var(--muted);font-family:var(--ff-m);
  font-size:0.75rem;padding:0.375rem 0.75rem;border-radius:0.4375rem;cursor:pointer;transition:.15s;
  text-decoration:none;display:inline-block;
}
.seg button.on,.seg a.seg-btn.on{background:var(--surface);color:var(--text);box-shadow:0 0.125rem 0.5rem -0.25rem rgba(0,0,0,.5)}
.switch{
  --w:2.875rem;width:var(--w);height:1.625rem;border-radius:1.25rem;
  background:var(--surface-3);border:0.0625rem solid var(--border);
  position:relative;cursor:pointer;transition:.25s var(--ease);flex:0 0 auto;
}
.switch::after{
  content:"";position:absolute;top:0.125rem;left:0.125rem;
  width:1.25rem;height:1.25rem;border-radius:50%;background:#fff;transition:.25s var(--ease);
}
.switch.on{background:var(--flow);border-color:transparent}
.switch.on::after{left:1.375rem;box-shadow:0 0 0.75rem rgba(217,119,87,.6)}
.field{display:flex;flex-direction:column;gap:0.4375rem}
.field label{font-size:0.78125rem;color:var(--muted);font-weight:500}
.field input,.field select,.inp{
  font-family:var(--ff-g);font-size:0.875rem;padding:0.6875rem 0.8125rem;border-radius:var(--r-md);
  background:var(--surface-2);border:0.0625rem solid var(--border);color:var(--text);
  outline:none;transition:.18s;
}
.field input:focus,.field select:focus,.inp:focus{
  border-color:var(--f2);box-shadow:0 0 0 0.1875rem color-mix(in srgb,var(--f2) 18%,transparent);
}
.field .hint{font-size:0.71875rem;color:var(--faint)}
.field input[readonly]{color:var(--muted);cursor:default;opacity:.9}

/* Дисклеймер заявки на доступ (Telegram Mini App) */
.tg-disclaimer{
  margin:0.25rem 0 1.25rem;padding:0.875rem 1rem;border-radius:var(--r-md);
  background:var(--surface-2);border:0.0625rem solid var(--border);
  font-size:0.84375rem;line-height:1.55;color:var(--muted);
}
.tg-disclaimer p{margin:0 0 0.625rem}
.tg-disclaimer p:last-child{margin-bottom:0}
.tg-disclaimer b{color:var(--text);font-weight:600}

/* Ползунок (range) под дизайн-систему */
.field input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;height:0.375rem;padding:0;border:0;margin:0.125rem 0;
  border-radius:0.375rem;background:var(--surface-3);cursor:pointer;
}
.field input[type="range"]:focus{outline:none}
.field input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:1.25rem;height:1.25rem;border-radius:50%;
  background:var(--flow);border:0.125rem solid var(--bg-2);box-shadow:0 0 0.625rem rgba(217,119,87,.5);cursor:pointer;
}
.field input[type="range"]::-moz-range-thumb{
  width:1.125rem;height:1.125rem;border-radius:50%;background:var(--f2);border:0.125rem solid var(--bg-2);cursor:pointer;
}
.tag{font-family:var(--ff-m);font-size:0.6875rem;font-weight:500;padding:0.1875rem 0.5rem;border-radius:0.375rem;display:inline-block}
.tag.long{color:var(--up);background:color-mix(in srgb,var(--up) 13%,transparent)}
.tag.short{color:var(--down);background:color-mix(in srgb,var(--down) 13%,transparent)}
.chip{font-size:0.75rem;color:var(--faint);padding:0.3125rem 0.6875rem;border-radius:1.25rem;background:var(--surface-2);border:0.0625rem solid var(--border-soft)}
table.tbl{width:100%;border-collapse:collapse;font-size:0.8125rem}
table.tbl th{
  text-align:left;color:var(--faint);font-weight:500;font-size:0.71875rem;
  text-transform:uppercase;letter-spacing:0.03125rem;padding:0 0.625rem 0.75rem;
}
table.tbl td{padding:0.8125rem 0.625rem;border-top:0.0625rem solid var(--border-soft)}
table.tbl td.num,table.tbl th.num{text-align:right;font-family:var(--ff-m)}
.table-wrap{overflow-x:auto}

/* ── Скроллбары: единый стиль под дизайн (вертикальные и горизонтальные) ── */
*{scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}
::-webkit-scrollbar{width:0.625rem;height:0.625rem}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:0.5rem;border:0.125rem solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--border)}

/* ── Таблица аудита (.atbl) — в дизайн-системе (перенесено из admin_audit.html) ── */
.atbl{width:100%;border-collapse:collapse;font-size:0.78125rem}
.atbl th,.atbl td{text-align:left;padding:0.5rem 0.625rem;border-bottom:0.0625rem solid var(--border-soft);vertical-align:top}
.atbl th{font-family:var(--ff-m);font-size:0.6875rem;text-transform:uppercase;letter-spacing:0.025rem;color:var(--muted)}
.atbl td.mono{font-family:var(--ff-m);color:var(--muted);white-space:nowrap}
.lvl{display:inline-block;padding:0.0625rem 0.4375rem;border-radius:0.375rem;font-size:0.6875rem;font-weight:600}
.lvl.ERROR{background:color-mix(in srgb,var(--down) 20%,transparent);color:var(--down)}
.lvl.WARN{background:color-mix(in srgb,var(--warn) 20%,transparent);color:var(--warn)}
.empty{color:var(--faint);font-size:0.8125rem;padding:0.875rem 0.125rem}

/* Список «ключ: значение» (карточка информации о пользователе) */
.kv{display:flex;flex-direction:column}
.kv > div{display:flex;gap:1rem;padding:0.6875rem 0;border-bottom:0.0625rem solid var(--border-soft)}
.kv > div:last-child{border-bottom:0}
.kv dt{flex:0 0 9.375rem;color:var(--muted);font-size:0.78125rem;font-family:var(--ff-m)}
.kv dd{margin:0;font-size:0.84375rem;color:var(--text);word-break:break-word}

/* Блок действий над пользователем: тумблер уведомления + группа кнопок. */
.user-actions{display:flex;flex-direction:column;gap:0.5625rem;align-items:flex-end}
.notify-row{display:inline-flex;align-items:center;gap:0.5625rem;font-size:0.71875rem;color:var(--muted);cursor:pointer;user-select:none}
.notify-row .switch{--w:2.375rem;width:2.375rem;height:1.3125rem}
.notify-row .switch::after{width:0.9375rem;height:0.9375rem;top:0.125rem;left:0.1875rem}
.notify-row .switch.on::after{left:1.25rem}
.action-btns{display:flex;gap:0.5rem;flex-wrap:wrap;justify-content:flex-end}

/* Отступ между заголовком карточки (.sub-h) и содержимым (таблица/контент).
   .sub-h стилизован инлайн только на части страниц — здесь общий отступ для всех. */
.sub-h{display:flex;align-items:baseline;gap:0.5rem;flex-wrap:wrap;margin-bottom:0.875rem}
/* Подпись поля и заголовок-нота — единый приглушённый стиль */
.lbl{font-size:0.78125rem;color:var(--muted);font-weight:500}
.note-mk{font-size:0.75rem;color:var(--faint);font-weight:400}
/* нейтральный бейдж по умолчанию (роль «пользователь») */
.badge:not(.sandbox):not(.admin){
  color:var(--muted);
  background:var(--surface-3);
  border:0.0625rem solid var(--border-soft);
}
.badge.admin{
  color:var(--f2);
  background:color-mix(in srgb,var(--f2) 14%,transparent);
  border:0.0625rem solid color-mix(in srgb,var(--f2) 30%,transparent);
}
/* статус-метки в таблицах */
.ok{color:var(--up);font-weight:600}
.warn-t{color:var(--warn);font-weight:600}

/* мелкие кнопки действий в таблице пользователей */
.btn.xs{padding:0.3125rem 0.625rem;font-size:0.75rem;border-radius:0.5rem}
.row-actions{display:flex;flex-wrap:wrap;gap:0.375rem;align-items:center}
.row-actions form{display:inline}
/* сетка формы создания пользователя */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11.25rem,1fr));gap:0.75rem}
select.inp{appearance:none;cursor:pointer}
/* чек-лист подготовки (справка) */
.checklist{list-style:none;display:flex;flex-direction:column;gap:0.625rem;margin-top:0.25rem}
.chk-step{display:flex;gap:0.75rem;padding:0.75rem 0.875rem;border-radius:var(--r-md);border:0.0625rem solid var(--border-soft);background:var(--surface-2)}
.chk-step.done{border-color:color-mix(in srgb,var(--up) 35%,transparent);background:color-mix(in srgb,var(--up) 7%,var(--surface-2))}
.chk-mark{flex:0 0 auto;width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:0.8125rem;background:var(--surface-3);color:var(--muted)}
.chk-step.done .chk-mark{background:color-mix(in srgb,var(--up) 18%,transparent);color:var(--up)}
.chk-body b{font-size:0.875rem}
.chk-body p{font-size:0.8125rem;color:var(--muted);line-height:1.55;margin:0.25rem 0 0.5rem}
.chk-link{font-size:0.78125rem;color:var(--f2);text-decoration:none}
.chk-link:hover{text-decoration:underline}
.help-notes{list-style:none;display:flex;flex-direction:column;gap:0.625rem;font-size:0.8125rem;color:var(--muted);line-height:1.6}
.help-notes li{padding-left:0.125rem}

/* онбординг-баннер на «Сводке» */
.welcome{border:0.0625rem solid color-mix(in srgb,var(--f2) 35%,transparent);background:color-mix(in srgb,var(--f2) 7%,var(--surface))}
.welcome-body{display:flex;gap:0.875rem;align-items:flex-start}
.welcome-mark{flex:0 0 auto;width:2.625rem;height:2.625rem;border-radius:0.75rem;border:0.09375rem solid color-mix(in srgb,var(--f2) 45%,transparent);color:var(--f2);display:grid;place-items:center;box-shadow:0 0 1rem -0.375rem color-mix(in srgb,var(--f2) 65%,transparent)}
.welcome-mark svg{width:1.5rem;height:1.5rem}
.welcome-actions{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center}

/* интерактивный тур (справка) */
.tour-dots{display:flex;flex-wrap:wrap;gap:0.4375rem;margin:0.125rem 0 0.875rem}
.tour-dot{width:0.5625rem;height:0.5625rem;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--surface-3);transition:.18s var(--ease)}
.tour-dot:hover{background:var(--muted)}
.tour-dot.active{background:var(--f2);width:1.375rem;border-radius:0.3125rem}
.tour-track{min-height:13.75rem}
.tour-step{display:none}
.tour-step.active{display:block;animation:tourfade .25s var(--ease)}
@keyframes tourfade{from{opacity:0;transform:translateY(0.375rem)}to{opacity:1;transform:none}}
.tour-tag{display:inline-block;font-family:var(--ff-m);font-size:0.6875rem;letter-spacing:0.025rem;text-transform:uppercase;color:var(--f2);background:color-mix(in srgb,var(--f2) 12%,transparent);padding:0.1875rem 0.5625rem;border-radius:0.4375rem}
.tour-title{font-family:var(--ff-g);font-weight:700;font-size:1.125rem;margin:0.625rem 0 0.5rem}
.tour-p{font-size:0.875rem;color:var(--muted);line-height:1.65;margin-bottom:0.625rem;max-width:42.5rem}
.tour-tip{font-size:0.8125rem;color:var(--text);background:var(--surface-2);border:0.0625rem solid var(--border-soft);border-radius:var(--r-sm);padding:0.625rem 0.75rem;margin:0.375rem 0 0.75rem;line-height:1.55}
.tour-progress{height:0.25rem;background:var(--surface-3);border-radius:0.1875rem;overflow:hidden;margin:1rem 0 0.875rem}
.tour-progress-bar{height:100%;background:var(--flow);width:12%;transition:width .25s var(--ease)}
.tour-nav{display:flex;justify-content:space-between;gap:0.625rem}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* чекбокс-строка (настройки стратегии) */
.chk{display:flex;align-items:flex-start;gap:0.625rem;font-size:0.84375rem;color:var(--muted);cursor:pointer;line-height:1.5}
.chk input[type="checkbox"]{margin-top:0.125rem;width:1rem;height:1rem;accent-color:var(--f2);flex:0 0 auto}

/* ── Мобильная навигация (нижний таб-бар) ── */
.mobnav{display:none}
.mobnav{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:color-mix(in srgb,var(--bg-2) 92%,transparent);
  backdrop-filter:blur(1rem);border-top:0.0625rem solid var(--border);
  padding:0.4375rem 0.375rem calc(0.4375rem + env(safe-area-inset-bottom));
}
.mobnav .row{display:flex;justify-content:space-around;align-items:stretch}
.mobnav a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:0.1875rem;
  padding:0.3125rem 0.125rem;color:var(--faint);text-decoration:none;
  font-size:0.625rem;font-weight:500;border-radius:0.625rem;
}
.mobnav a svg{width:1.3125rem;height:1.3125rem;stroke-width:1.8}
.mobnav a.active{color:var(--text)}
.mobnav a.active svg{color:var(--f2)}

/* ── Состояния, тосты, модалки ── */
.skeleton{
  background:linear-gradient(100deg,var(--surface-2) 30%,var(--surface-3) 50%,var(--surface-2) 70%);
  background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:0.5rem;
}
@keyframes shimmer{to{background-position:-200% 0}}
.empty{display:flex;flex-direction:column;align-items:center;gap:0.75rem;padding:2.5rem 1.25rem;text-align:center}
.empty .ic{
  width:3.375rem;height:3.375rem;border-radius:1rem;background:var(--surface-2);
  border:0.0625rem solid var(--border-soft);display:grid;place-items:center;color:var(--faint);
}
.empty .ic svg{width:1.625rem;height:1.625rem}
.empty b{font-size:0.875rem}
.empty p{font-size:0.78125rem;color:var(--faint);max-width:17.5rem}
.offline{
  display:flex;align-items:center;gap:0.625rem;padding:0.625rem 1rem;border-radius:var(--r-md);
  background:color-mix(in srgb,var(--warn) 12%,var(--surface));
  border:0.0625rem solid color-mix(in srgb,var(--warn) 32%,transparent);
  font-size:0.78125rem;color:var(--text);
}
.offline .d{width:0.5rem;height:0.5rem;border-radius:50%;background:var(--warn)}
.toast{
  display:flex;align-items:center;gap:0.6875rem;padding:0.8125rem 1rem;border-radius:var(--r-md);
  background:var(--surface);border:0.0625rem solid var(--border);box-shadow:var(--shadow);
  font-size:0.8125rem;min-width:17.5rem;
}

/* Колокольчик уведомлений в шапке + выпадающая панель */
.bell-menu{position:relative}
.bell-btn{position:relative}
.bell-badge{
  position:absolute;top:-0.125rem;right:-0.125rem;min-width:1rem;height:1rem;padding:0 0.25rem;
  border-radius:0.5625rem;background:var(--f2);color:#fff;font-size:0.625rem;font-weight:700;
  display:grid;place-items:center;line-height:1;box-sizing:border-box;
}
.bell-badge:empty{display:none}
.bell-pop{
  position:absolute;top:calc(100% + 0.5rem);right:0;width:21.5rem;max-width:92vw;
  background:var(--surface);border:0.0625rem solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow);z-index:1100;overflow:hidden;display:none;
}
.bell-menu.open .bell-pop{display:block}
.notif-head{display:flex;justify-content:space-between;align-items:center;gap:0.625rem;padding:0.75rem 0.875rem;border-bottom:0.0625rem solid var(--border)}
.notif-title{font-weight:600;font-size:0.84375rem}
.notif-count{display:inline-grid;place-items:center;min-width:1.0625rem;height:1.0625rem;padding:0 0.3125rem;border-radius:0.5625rem;background:var(--f2);color:#fff;font-size:0.65625rem;font-weight:700;vertical-align:middle}
.notif-actions{display:flex;gap:0.75rem}
.notif-link{background:none;border:0;color:var(--f2);font-size:0.75rem;cursor:pointer;font-weight:600;padding:0}
.notif-link.danger{color:var(--down)}
.notif-list{max-height:23.75rem;overflow-y:auto}
.notif-item{display:flex;gap:0.625rem;padding:0.6875rem 0.875rem;border-bottom:0.0625rem solid var(--border);text-decoration:none;color:var(--text)}
.notif-item:last-child{border-bottom:0}
.notif-item:hover{background:var(--surface-2)}
.notif-dot{width:0.5rem;height:0.5rem;border-radius:50%;background:transparent;margin-top:0.3125rem;flex:0 0 auto}
.notif-item.unread .notif-dot{background:var(--f2)}
.notif-item.unread{background:color-mix(in srgb,var(--f2) 6%,transparent)}
.notif-item-title{font-size:0.8125rem;font-weight:500;line-height:1.35}
.notif-item-sub{font-size:0.75rem;color:var(--muted);margin-top:0.125rem;word-break:break-word}
.notif-when{font-size:0.6875rem;color:var(--faint);margin-top:0.1875rem}
.notif-empty{padding:1.625rem 0.875rem;text-align:center;color:var(--muted);font-size:0.8125rem}
.notif-foot{border-top:0.0625rem solid var(--border)}
.notif-push-btn{display:block;width:100%;text-align:center;padding:0.625rem;font-size:0.78125rem;color:var(--muted);background:none;border:0;border-bottom:0.0625rem solid var(--border);cursor:pointer;font-weight:500}
.notif-push-btn:hover{background:var(--surface-2);color:var(--text)}
.notif-all{display:block;text-align:center;padding:0.6875rem;font-size:0.78125rem;color:var(--f2);text-decoration:none;font-weight:600}
.notif-all:hover{background:var(--surface-2)}

/* Центр уведомлений: фиксированный стек тостов поверх страницы (htmx-цель).
   Не в потоке контента — не сдвигает и не ломает центровку карточек. */
#settings-flash{
  position:fixed;top:1.125rem;left:50%;transform:translateX(-50%);
  z-index:1200;display:flex;flex-direction:column;gap:0.625rem;
  width:min(28.75rem,92vw);pointer-events:none;
}
#settings-flash:empty{display:none}
#settings-flash .toast{
  pointer-events:auto;align-items:flex-start;
  animation:toastIn .24s var(--ease,ease);
}
#settings-flash .toast.err{border-color:color-mix(in srgb,var(--warn) 45%,var(--border))}
#settings-flash .toast.ok{border-color:color-mix(in srgb,var(--up) 40%,var(--border))}
#settings-flash .toast .t-body{min-width:0}
#settings-flash .toast .t-title{font-weight:600;color:var(--text)}
#settings-flash .toast .t-sub{margin-top:0.1875rem;color:var(--muted);font-size:0.78125rem;word-break:break-word}
#settings-flash .toast.fading{opacity:0;transform:translateY(-0.5rem);transition:.4s var(--ease,ease)}
@keyframes toastIn{from{opacity:0;transform:translateY(-0.625rem)}to{opacity:1;transform:none}}
.toast .ic{width:1.875rem;height:1.875rem;border-radius:0.5625rem;display:grid;place-items:center;flex:0 0 auto}
.toast.ok .ic{background:color-mix(in srgb,var(--up) 14%,transparent);color:var(--up)}
.toast.err .ic{background:color-mix(in srgb,var(--down) 14%,transparent);color:var(--down)}
.toast .ic svg{width:1.0625rem;height:1.0625rem}
.modal-card{
  width:23.75rem;max-width:92vw;border-radius:var(--r-lg);
  background:var(--surface);border:0.0625rem solid var(--border);
  box-shadow:var(--shadow);padding:1.375rem;
}
.modal-card .mi{
  width:2.875rem;height:2.875rem;border-radius:0.8125rem;display:grid;place-items:center;
  margin-bottom:0.875rem;background:color-mix(in srgb,var(--down) 13%,transparent);color:var(--down);
}
.modal-card .mi svg{width:1.5rem;height:1.5rem}
.modal-card h3{font-family:var(--ff-g);font-weight:700;font-size:1.0625rem;margin-bottom:0.375rem}
.modal-card p{font-size:0.8125rem;color:var(--muted);line-height:1.5;margin-bottom:1.125rem}
.modal-card .acts{display:flex;gap:0.625rem;justify-content:flex-end}

/* ── Анимация логотипа «поток течёт» ── */
.flow-logo path{stroke-dasharray:60;stroke-dashoffset:60;animation:flowdraw 1.6s var(--ease) forwards}
.flow-logo path:nth-child(2){animation-delay:.12s}
.flow-logo path:nth-child(3){animation-delay:.24s}
.flow-logo circle{opacity:0;animation:flowdot .5s ease 1.1s forwards}
@keyframes flowdraw{to{stroke-dashoffset:0}}
@keyframes flowdot{to{opacity:1}}
.splash{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:3.125rem}
.splash .ldr{width:7.5rem;height:0.1875rem;border-radius:0.1875rem;background:var(--surface-3);overflow:hidden}
.splash .ldr i{display:block;height:100%;width:40%;background:var(--flow);animation:load 1.4s var(--ease) infinite}
@keyframes load{0%{transform:translateX(-120%)}100%{transform:translateX(330%)}}

/* ════════════════════════════════════════════════════════════
   ДАШБОРД: дополнительные компоненты (вынесено из инлайн)
   ════════════════════════════════════════════════════════════ */

/* строка здоровья соединений */
.health{
  display:flex;align-items:center;flex-wrap:wrap;gap:0.5rem 0.5rem;
  padding:0.6875rem 1rem;border-radius:var(--r-md);
  background:var(--surface);border:0.0625rem solid var(--border-soft);
}
.health .st{
  display:flex;align-items:center;gap:0.4375rem;font-size:0.78125rem;color:var(--muted);
  padding-right:0.875rem;border-right:0.0625rem solid var(--border-soft);
}
.health .st:last-of-type{border-right:0}
.health .st .d{
  width:0.5rem;height:0.5rem;border-radius:50%;background:var(--up);
  box-shadow:0 0 0.5rem color-mix(in srgb,var(--up) 80%,transparent);
}
.health .st .d.warn{background:var(--warn);box-shadow:0 0 0.5rem color-mix(in srgb,var(--warn) 80%,transparent)}
/* Состояние неизвестно (мониторинг ещё не подключён) — серая точка, не зелёная. */
.health .st .d.unknown{background:var(--faint);box-shadow:none}
/* Выключено/нет связи — красная точка. */
.health .st .d.stopped{background:var(--down);box-shadow:0 0 0.5rem color-mix(in srgb,var(--down) 70%,transparent)}
.health .st b{color:var(--text);font-weight:500}
.health .st .ms{font-family:var(--ff-m);font-size:0.6875rem;color:var(--faint)}
.kill{
  margin-left:auto;display:inline-flex;align-items:center;gap:0.5rem;
  font-family:var(--ff-g);font-weight:600;font-size:0.8125rem;padding:0.5625rem 0.9375rem;
  border-radius:var(--r-md);cursor:pointer;color:var(--down);
  border:0.0625rem solid color-mix(in srgb,var(--down) 40%,transparent);
  background:color-mix(in srgb,var(--down) 10%,transparent);
}
.kill svg{width:1rem;height:1rem}

/* KPI-плитки */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.kpi h4{font-size:0.78125rem;font-weight:500;color:var(--muted);display:flex;align-items:center;gap:0.4375rem;margin-bottom:0.75rem}
.kpi h4 svg{width:0.9375rem;height:0.9375rem;opacity:.8}
.kpi .val{font-family:var(--ff-m);font-size:1.625rem;font-weight:500;letter-spacing:-0.03125rem}
.kpi .sub{margin-top:0.4375rem;font-size:0.78125rem;color:var(--faint);font-family:var(--ff-m)}
.chg{font-family:var(--ff-m);font-size:0.78125rem;font-weight:500;padding:0.125rem 0.4375rem;border-radius:0.4375rem}
.chg.up{color:var(--up);background:color-mix(in srgb,var(--up) 13%,transparent)}
.chg.down{color:var(--down);background:color-mix(in srgb,var(--down) 13%,transparent)}

/* P&L */
.pnl-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:0.375rem}
.pnl-head .big{font-family:var(--ff-m);font-size:2.375rem;font-weight:500;letter-spacing:-0.0625rem;line-height:1}
.pnl-head .big.up{color:var(--up)}
.chart{margin-top:0.625rem}
.chart svg{width:100%;height:10rem;display:block}

/* Donut-распределение */
.donut-wrap{display:flex;align-items:center;gap:1.375rem}
.donut{
  width:9.25rem;height:9.25rem;border-radius:50%;flex:0 0 auto;position:relative;
  background:conic-gradient(var(--f3) 0 33.33%,var(--f1) 33.33% 66.66%,var(--surface-3) 66.66% 100%);
}
/* Пустой портфель (0): серое кольцо без раскраски на трети. */
.donut.empty{background:var(--surface-3)}
.donut::after{content:"";position:absolute;inset:1.125rem;border-radius:50%;background:var(--surface)}
.donut .c{position:absolute;inset:0;display:grid;place-content:center;text-align:center;z-index:1}
.donut .c b{font-family:var(--ff-m);font-size:1.25rem}
.donut .c small{font-size:0.6875rem;color:var(--faint)}
.legend{display:flex;flex-direction:column;gap:0.6875rem;font-size:0.8125rem;flex:1}
.legend .row{display:flex;align-items:center;gap:0.5625rem}
.legend .sw{width:0.625rem;height:0.625rem;border-radius:0.1875rem}
.legend .row span{color:var(--muted)}
.legend .row b{margin-left:auto;font-family:var(--ff-m);font-weight:500}

/* Слоты активных позиций */
.slots{display:flex;flex-direction:column;gap:0.625rem}
.slot{
  display:grid;grid-template-columns:2.25rem 1.4fr 1fr 1fr auto;
  align-items:center;gap:0.875rem;padding:0.8125rem 0.875rem;
  border-radius:var(--r-md);background:var(--surface-2);border:0.0625rem solid var(--border-soft);
  transition:.18s var(--ease);
}
.slot:hover{border-color:var(--border);transform:translateX(0.125rem)}
.slot .who{
  width:2.25rem;height:2.25rem;border-radius:0.625rem;display:grid;place-items:center;
  font-weight:700;font-size:0.875rem;color:#2B1A10;font-family:var(--ff-d);
}
.slot .name{font-weight:600;font-size:0.875rem}
.slot .name small{display:block;color:var(--faint);font-size:0.71875rem;font-weight:400;font-family:var(--ff-m)}
.slot .pnl{font-family:var(--ff-m);font-size:0.875rem;text-align:right}
.slot .pnl.up{color:var(--up)}
.slot .pnl.down{color:var(--down)}
.slot .time{font-family:var(--ff-m);font-size:0.75rem;color:var(--faint);text-align:right}
.idle{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.875rem}
.chip::before{content:"○ "}

/* Лента сделок */
.feed{display:flex;flex-direction:column}
.fr{
  display:grid;grid-template-columns:1.875rem 1.3fr 1fr 1.4fr auto;
  gap:0.75rem;align-items:center;padding:0.8125rem 0.25rem;
  border-bottom:0.0625rem solid var(--border-soft);font-size:0.8125rem;
}
.fr:last-child{border-bottom:0}
.fr .ic{width:1.875rem;height:1.875rem;border-radius:0.5625rem;display:grid;place-items:center}
.fr .ic.up{background:color-mix(in srgb,var(--up) 13%,transparent);color:var(--up)}
.fr .ic.down{background:color-mix(in srgb,var(--down) 13%,transparent);color:var(--down)}
.fr .ic svg{width:0.9375rem;height:0.9375rem}
.fr .t b{font-weight:600}
.fr .t small{display:block;color:var(--faint);font-size:0.71875rem;font-family:var(--ff-m)}
.fr .meta{font-family:var(--ff-m);font-size:0.71875rem;color:var(--faint)}
.fr .res{text-align:right;font-family:var(--ff-m);font-weight:500}
.fr .res.up{color:var(--up)}
.fr .res.down{color:var(--down)}
.fr .res small{display:block;color:var(--faint);font-weight:400;font-size:0.6875rem}

/* ── Адаптив ── */
@media(max-width:68.75rem){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:47.5rem){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .mobnav{display:block}
  .content{padding:1rem 1rem 5.75rem}
  .topbar{padding:0.875rem 1rem}
  .hide-mobile{display:none!important}
  .grid-2,.grid-3{gap:0.875rem}
  .kpis{grid-template-columns:1fr 1fr}

  /* Таблицы на мобиле: стопка карточек вместо горизонтальной прокрутки.
     Каждая строка — карточка; каждая ячейка — «лейбл: значение» (лейбл из
     data-label на <td>). Так данные умещаются в ширину без искажения. */
  .table-wrap,
  table.tbl tbody, table.atbl tbody{overflow-x:visible}
  table.tbl, table.atbl{display:block;width:100%}
  table.tbl thead, table.atbl thead{
    position:absolute;width:0.0625rem;height:0.0625rem;padding:0;margin:-0.0625rem;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
  }
  table.tbl tbody, table.atbl tbody{display:block}
  table.tbl tr, table.atbl tr{
    display:block;margin-bottom:0.625rem;padding:0.25rem 0.75rem;
    border:0.0625rem solid var(--border-soft);border-radius:0.75rem;background:var(--surface-2)
  }
  table.tbl td, table.atbl td,
  table.tbl td.mono, table.atbl td.mono,
  table.tbl td.num, table.atbl td.num{
    display:flex;justify-content:space-between;align-items:baseline;gap:0.875rem;
    padding:0.5rem 0;border:0;border-top:0.0625rem solid var(--border-soft);
    text-align:right;white-space:normal;word-break:break-word;overflow-wrap:anywhere
  }
  table.tbl tr td:first-child, table.atbl tr td:first-child{border-top:0}
  table.tbl td::before, table.atbl td::before{
    content:attr(data-label);flex:0 0 auto;margin-right:auto;text-align:left;
    color:var(--muted);font-family:var(--ff-m);font-size:0.65625rem;
    text-transform:uppercase;letter-spacing:0.025rem;font-weight:600;white-space:nowrap
  }
  table.tbl td:empty, table.atbl td:empty{display:none}
}

/* ════════════════════════════════════════════════════════════
   AUTH-КАРКАС: центрированная карточка, без сайдбара.
   Используется страницами login, otp, change_password, setup_totp.
   ════════════════════════════════════════════════════════════ */

/* Обёртка на всю высоту с центрированием */
.auth-wrap{
  position:relative;z-index:1;
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:1.5rem 1rem;
}

/* Карточка формы */
.auth-card{
  width:100%;max-width:26.25rem;
  background:linear-gradient(180deg,var(--glass),transparent),var(--surface);
  border:0.0625rem solid var(--border-soft);border-radius:var(--r-lg);
  padding:2.25rem 2rem 2rem;box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.auth-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:0.0625rem;
  background:linear-gradient(90deg,transparent,var(--glass-line),transparent);
}

/* Широкая карточка для setup_totp с QR */
.auth-card--wide{max-width:32.5rem}

/* Логотип-шапка */
.auth-brand{display:flex;justify-content:center;margin-bottom:1.5rem}
.auth-brand .brand{justify-content:center}
.auth-brand .brand .name{font-size:1.375rem}

/* Заголовок страницы */
.auth-title{
  font-family:var(--ff-g);font-weight:700;font-size:1.25rem;
  text-align:center;margin-bottom:0.5rem;
}

/* Подсказка под заголовком */
.auth-hint{
  font-size:0.84375rem;color:var(--muted);text-align:center;
  margin-bottom:1.25rem;line-height:1.5;
}

/* Блок ошибки */
.auth-error{
  background:color-mix(in srgb,var(--down) 12%,var(--surface));
  border:0.0625rem solid color-mix(in srgb,var(--down) 36%,transparent);
  border-radius:var(--r-md);padding:0.6875rem 0.875rem;margin-bottom:1rem;
  font-size:0.84375rem;color:var(--down);line-height:1.4;
}

/* Блок нарушений политики пароля */
.auth-violations{
  background:color-mix(in srgb,var(--warn) 10%,var(--surface));
  border:0.0625rem solid color-mix(in srgb,var(--warn) 32%,transparent);
  border-radius:var(--r-md);padding:0.6875rem 0.875rem;margin-bottom:1rem;
  font-size:0.84375rem;color:var(--warn);line-height:1.6;
}
.auth-violations strong{display:block;margin-bottom:0.375rem}
.auth-violations ul{margin-left:1rem}

/* Кнопка отправки формы */
.auth-submit{width:100%;justify-content:center;margin-top:0.5rem}

/* Альт-действие под формой входа (ссылка на бота для регистрации) */
.auth-alt{
  margin-top:1.125rem;padding-top:1rem;text-align:center;
  border-top:0.0625rem solid var(--border);
  font-size:0.84375rem;color:var(--muted);
}
.auth-alt a{color:var(--f2);font-weight:600;text-decoration:none}
.auth-alt a:hover{text-decoration:underline}

/* Блок подсказки о политике паролей */
.auth-policy{
  margin-top:1.125rem;padding-top:0.875rem;
  border-top:0.0625rem solid var(--border-soft);
  font-size:0.78125rem;color:var(--faint);
}
.auth-policy-title{font-weight:600;color:var(--muted);margin-bottom:0.375rem}
.auth-policy ul{margin-left:1rem;line-height:1.8}

/* TOTP QR-блок */
.totp-setup{
  display:flex;gap:1.25rem;align-items:flex-start;
  margin-bottom:1.25rem;padding:1rem;
  background:var(--surface-2);border:0.0625rem solid var(--border-soft);
  border-radius:var(--r-md);
}
.totp-qr{
  flex:0 0 auto;width:9.25rem;height:9.25rem;
  background:#fff;border-radius:0.75rem;padding:0.5rem;
  display:flex;align-items:center;justify-content:center;
}
.totp-qr img{width:100%;height:100%;display:block;border-radius:0.25rem}
.totp-manual{flex:1;min-width:0}

/* Секрет TOTP — моноширный блок */
.totp-secret{
  font-family:var(--ff-m);font-size:0.8125rem;letter-spacing:0.09375rem;
  padding:0.625rem 0.8125rem;border-radius:var(--r-md);
  background:var(--surface-3);border:0.0625rem solid var(--border);
  color:var(--text);word-break:break-all;line-height:1.6;
  margin-top:0.375rem;
}

/* Адаптив для auth-wrap */
@media(max-width:31.25rem){
  .auth-card,.auth-card--wide{padding:1.75rem 1.25rem 1.5rem}
  .totp-setup{flex-direction:column;align-items:center}
  .totp-manual{width:100%}
}

/* ── Реальная (sandbox) торговля ──────────────────────────────────────────── */
.live-trading{margin:1.125rem 0;padding:1.125rem 1.25rem}
.live-head{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;flex-wrap:wrap}
.live-head h3{margin:0;font-size:1.05rem;display:flex;align-items:center;gap:0.5rem}
.sandbox-badge{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  padding:0.125rem 0.4375rem;border-radius:0.375rem;background:color-mix(in srgb,var(--f2) 16%,transparent);color:var(--f2);border:0.0625rem solid color-mix(in srgb,var(--f2) 35%,transparent)}
.live-state{font-size:.82rem;font-weight:600;padding:0.1875rem 0.625rem;border-radius:62.4375rem}
.live-state.on{background:color-mix(in srgb,var(--up) 16%,transparent);color:var(--up)}
.live-state.off{background:color-mix(in srgb,var(--muted) 16%,transparent);color:var(--muted)}
.live-note{margin:0.75rem 0 0.875rem;font-size:.86rem;line-height:1.5;color:var(--muted,#94a3b8)}
.live-note.muted{opacity:.85}
.live-actions{display:flex;gap:0.625rem;flex-wrap:wrap}
.live-enable{display:flex;flex-direction:column;gap:0.75rem;align-items:flex-start}
.live-confirm{display:flex;align-items:center;gap:0.5625rem;font-size:.85rem;cursor:pointer}
.live-confirm input{width:1rem;height:1rem;accent-color:var(--f2)}

/* ── Лоадер графиков ──────────────────────────────────────────────────────── */
.chart-loading{position:absolute;inset:0;z-index:5;display:flex;gap:0.625rem;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--surface) 72%,transparent);backdrop-filter:blur(0.09375rem);
  font-size:.85rem;color:var(--muted,#94a3b8);border-radius:inherit}
.chart-loading[hidden]{display:none}
.chart-loading .spinner{width:1.125rem;height:1.125rem;border-radius:50%;
  border:0.125rem solid color-mix(in srgb,var(--f2) 30%,transparent);border-top-color:var(--f2);
  animation:chart-spin .7s linear infinite}
@keyframes chart-spin{to{transform:rotate(360deg)}}

/* Cookie-баннер (152-ФЗ: уведомление о сборе cookie) */
.cookie-banner{
  position:fixed;left:50%;bottom:1.125rem;transform:translateX(-50%);z-index:1300;
  display:flex;gap:0.875rem;align-items:center;flex-wrap:wrap;max-width:min(42.5rem,94vw);
  background:var(--surface);border:0.0625rem solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:0.875rem 1.125rem;font-size:0.8125rem;color:var(--muted);line-height:1.5;
}
.cookie-banner span{flex:1 1 15rem}
.cookie-banner__actions{display:flex;gap:0.5rem;flex:0 0 auto;margin-left:auto}
.cookie-banner__actions .btn{white-space:nowrap}
/* КРИТИЧНО: display:flex выше перебивает html-атрибут [hidden] (display:none из
   UA-стилей). Без этого правила баннер виден всегда и не скрывается по «Принять». */
.cookie-banner[hidden]{display:none}
/* Постоянный подвал auth-страниц: ссылка на политику доступна всегда (152-ФЗ). */
.auth-foot{margin-top:1.375rem;text-align:center;font-size:0.71875rem;color:var(--faint)}
.auth-foot a{color:var(--muted)}
.cookie-banner a{color:var(--f2)}
.cookie-banner .btn{flex:0 0 auto}

/* Юридические страницы */
.legal-text{font-size:0.84375rem;line-height:1.65;color:var(--muted)}
.legal-text h2{font-size:0.90625rem;color:var(--text);margin:1.25rem 0 0.5rem;font-family:var(--ff-g)}
.legal-text h3{font-size:0.84375rem;color:var(--text);margin:0.875rem 0 0.375rem;font-family:var(--ff-g)}
/* Абзацы юр-текста: выравнивание по ширине + красная строка 1.25rem */
.legal-text p{margin:0 0 0.625rem;text-align:justify;text-indent:1.25rem;hyphens:auto;-webkit-hyphens:auto}
.legal-text b{color:var(--text)}
.legal-text a{color:var(--f2)}
.legal-text ul{margin:0.375rem 0 0.75rem;padding-left:1.375rem}
.legal-text li{margin:0 0 0.3125rem}
/* Метаданные документа — без красной строки и выключки */
.legal-doc-meta{font-size:0.71875rem;color:var(--muted);opacity:0.85;margin-bottom:1rem;text-indent:0;text-align:left}
/* Юридические страницы: карточка по центру по горизонтали, контент от верха */
.auth-wrap.legal{justify-content:flex-start;padding-top:2.5rem;padding-bottom:2.5rem}
.legal-card{max-width:47.5rem}
/* Таблицы в юр-тексте */
.legal-tbl{width:100%;border-collapse:collapse;margin:0.5rem 0 1rem;font-size:0.78125rem}
.legal-tbl th,.legal-tbl td{border:0.0625rem solid var(--border);padding:0.5rem 0.625rem;text-align:left;vertical-align:top}
.legal-tbl th{color:var(--text);background:color-mix(in srgb,var(--surface) 60%,transparent)}
/* Сноски: надстрочные ссылки и список нормативных ссылок */
.legal-text sup.fn{font-size:0.6875em;line-height:0}
.legal-text sup.fn a{color:var(--f2);text-decoration:none;padding:0 0.0625rem}
.legal-text .footnotes{margin-top:0.75rem;padding-top:0.75rem;border-top:0.0625rem solid var(--border);font-size:0.71875rem;line-height:1.55;padding-left:1.5rem}
.legal-text .footnotes li{margin-bottom:0.375rem;scroll-margin-top:1rem}
.legal-text .fn-back{text-decoration:none;opacity:0.6}
.legal-text sup.fn:target,.legal-text .footnotes li:target{background:color-mix(in srgb,var(--f2) 18%,transparent);border-radius:0.25rem}

/* Раздельные согласия при регистрации */
.consent-row{display:flex;gap:0.625rem;align-items:flex-start;margin-top:0.875rem;font-size:0.78125rem;color:var(--muted);line-height:1.5}
.consent-row span{flex:1;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.consent-row a{color:var(--f2)}
/* Кастомный чекбокс (тёмная тема): квадрат с рамкой, при отметке — заливка
   акцентом и галочка чистым CSS (без data-URI — строгая CSP). */
.consent-row input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;margin-top:0.03125rem;
  width:1.15rem;height:1.15rem;border-radius:0.3rem;
  border:0.09375rem solid var(--border);background:var(--surface);
  cursor:pointer;position:relative;transition:background .15s var(--ease),border-color .15s var(--ease);
}
.consent-row input[type="checkbox"]:hover{border-color:var(--f2)}
.consent-row input[type="checkbox"]:checked{background:var(--f2);border-color:var(--f2)}
.consent-row input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:0.375rem;top:0.15625rem;
  width:0.28125rem;height:0.5625rem;border:solid #fff;
  border-width:0 0.125rem 0.125rem 0;transform:rotate(45deg);
}
.consent-row input[type="checkbox"]:focus-visible{outline:0.125rem solid var(--f2);outline-offset:0.125rem}
/* Дисклеймер: текст по ширине */
.tg-disclaimer p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}

/* Радио-выбор (напр. канал рассылки) */
.rdo-group{display:flex;flex-direction:column;gap:0.5rem;margin-top:0.125rem}
.rdo{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.875rem;color:var(--text);cursor:pointer}
/* Кастомное радио (тёмная тема): круг с рамкой, при выборе — акцентная точка. */
.rdo input[type="radio"]{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:1.15rem;height:1.15rem;border-radius:50%;
  border:0.09375rem solid var(--border);background:var(--surface);
  cursor:pointer;position:relative;transition:border-color .15s var(--ease);
}
.rdo input[type="radio"]:hover{border-color:var(--f2)}
.rdo input[type="radio"]:checked{border-color:var(--f2)}
.rdo input[type="radio"]:checked::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:0.55rem;height:0.55rem;border-radius:50%;background:var(--f2);
}
.rdo input[type="radio"]:focus-visible{outline:0.125rem solid var(--f2);outline-offset:0.125rem}

/* Вкладки-режимы «Исходящая почта» — переключатель на radio (CSS-only, без JS).
   Скрытый radio name=mail_transport и есть отправляемое значение транспорта. */
.mailtab-input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.mailtabs{display:flex;gap:0.25rem;margin-bottom:1.125rem;border-bottom:0.0625rem solid var(--border)}
.mailtab{
  display:inline-flex;align-items:center;gap:0.5rem;cursor:pointer;
  padding:0.5625rem 0.9375rem;font-size:0.84375rem;font-weight:600;color:var(--muted);
  border-bottom:0.125rem solid transparent;margin-bottom:-0.0625rem;transition:.15s var(--ease);
}
.mailtab:hover{color:var(--text)}
.mailtab-badge{font-size:0.6875rem;font-weight:400;color:var(--faint)}
.mail-panel{display:none}
/* активная вкладка + показ её панели по состоянию radio */
#mt-ru:checked ~ .mailtabs label[for="mt-ru"],
#mt-smtp:checked ~ .mailtabs label[for="mt-smtp"]{color:var(--text);border-bottom-color:var(--f2)}
#mt-ru:checked ~ .mailtabs label[for="mt-ru"] .mailtab-badge,
#mt-smtp:checked ~ .mailtabs label[for="mt-smtp"] .mailtab-badge{color:var(--f2)}
#mt-ru:checked ~ #panel-ru,
#mt-smtp:checked ~ #panel-smtp{display:block}
/* доступность: подсветка активной вкладки при фокусе скрытого radio с клавиатуры */
#mt-ru:focus-visible ~ .mailtabs label[for="mt-ru"],
#mt-smtp:focus-visible ~ .mailtabs label[for="mt-smtp"]{outline:0.125rem solid var(--f2);outline-offset:0.125rem;border-radius:0.25rem}

/* Потиповые тумблеры уведомлений (аккаунт → каналы) — ползунок-переключатель. */
.opt-row{display:flex;align-items:center;gap:0.75rem;font-size:0.84375rem;color:var(--text);cursor:pointer;padding:0.375rem 0}
.opt-row input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:2.375rem;height:1.375rem;border-radius:0.75rem;
  background:var(--surface-3);border:0.0625rem solid var(--border);
  position:relative;cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease);
}
.opt-row input[type="checkbox"]::after{
  content:"";position:absolute;top:0.1875rem;left:0.1875rem;
  width:0.9375rem;height:0.9375rem;border-radius:50%;background:#fff;
  transition:transform .2s var(--ease);
}
.opt-row input[type="checkbox"]:checked{background:var(--f2);border-color:var(--f2)}
.opt-row input[type="checkbox"]:checked::after{transform:translateX(1rem)}
.opt-row input[type="checkbox"]:focus-visible{outline:0.125rem solid var(--f2);outline-offset:0.125rem}

/* Статус смены настроек push (аккаунт → каналы). */
.push-status{font-size:0.78125rem;color:var(--muted);min-height:1.1em}

/* Баннер-предложение установить PWA (инжектится из app.js, initInstall). */
.install-banner {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1rem;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: min(40rem, calc(100vw - 2rem));
  padding: 0.75rem 1rem;
  background: var(--surface-2);
  border: 0.0625rem solid var(--border);
  border-radius: 0.875rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
}
.install-banner .ib-ico { font-size: 1.25rem; }
.install-banner .ib-text { flex: 1; font-size: 0.8125rem; color: var(--text); line-height: 1.4; }
.install-banner .ib-action { white-space: nowrap; }
.install-banner .ib-close {
  background: none; border: 0; color: var(--muted);
  font-size: 1.375rem; line-height: 1; cursor: pointer; padding: 0 0.25rem;
}
.install-banner .ib-close:hover { color: var(--text); }
@media (max-width: 47.5rem) {
  .install-banner { bottom: 4.5rem; } /* над мобильным таб-баром */
}