:root {
  color-scheme: light;
  /* ─── Base surfaces ─────────────────────────── */
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-soft: #f7f9fc;
  --surface-strong: #eef4ff;
  --surface-blue: #eef4ff;
  --elevated: #ffffff;
  /* ─── Text ─────────────────────────────────── */
  --text: #273247;
  --text-strong: #1a2237;
  --muted: #7181a2;
  --muted-2: #99a7bf;
  --on-primary: #ffffff;
  /* ─── Lines / dividers ─────────────────────── */
  --line: #e2e7f0;
  --line-strong: #d4dceb;
  /* ─── Accent palette (переопределяется темой) */
  --primary: #3478ff;
  --primary-strong: #175ee8;
  --primary-soft: #e9f0ff;
  --accent-rgb: 52,120,255;
  /* Aliases для обратной совместимости — их читает много старого CSS */
  --blue: var(--primary);
  --blue-strong: var(--primary-strong);
  --blue-soft: var(--primary-soft);
  /* ─── Design-system button tokens ─────────────
     Кнопки НЕ завязаны на --profile-accent. Профильный
     розовый/золотой остаётся только декором (кольца, точки,
     тонкие акценты), но не перекрашивает `primary`. */
  --btn-primary-bg: #3478ff;
  --btn-primary-bg-hover: #2b6bef;
  --btn-primary-fg: #ffffff;
  --btn-secondary-bg: #f2f4f8;
  --btn-secondary-bg-hover: #e6eaf1;
  --btn-secondary-fg: #1f2a44;
  --btn-secondary-border: #dee3ec;
  --btn-outline-fg: #2b6bef;
  --btn-outline-border: #bfd2f8;
  --btn-outline-bg-hover: rgba(52,120,255,.06);
  --btn-ghost-fg: #4a5a78;
  --btn-ghost-bg-hover: rgba(20,30,60,.05);
  --btn-success-fg: #2f7a34;
  --btn-success-bg: #ecf9ee;
  --btn-success-border: #c8ecc9;
  --btn-warning-fg: #b26b09;
  --btn-warning-bg: #fff5e2;
  --btn-warning-border: #f4d99a;
  --btn-danger-fg: #ffffff;
  --btn-danger-bg: #d94854;
  --btn-danger-bg-hover: #c93b47;
  --btn-danger-outline-fg: #c23744;
  --btn-danger-outline-border: #f2b8bd;
  --btn-danger-outline-bg-hover: rgba(217,72,84,.08);
  --btn-disabled-bg: #eef1f6;
  --btn-disabled-fg: #97a1b4;
  --btn-focus-ring: 0 0 0 3px rgba(52,120,255,.28);
  /* ─── Semantic layer tokens (для тем и кнопок) ── */
  --surface-raised: #ffffff;
  --border: var(--line);
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --button-primary: var(--btn-primary-bg);
  --button-primary-hover: var(--btn-primary-bg-hover);
  /* ─── Semantic ─────────────────────────────── */
  --success: #43bd4f;
  --success-soft: #edf9ee;
  --danger: #ff4d55;
  --danger-soft: #fff0f1;
  --warning: #f6a623;
  --warning-soft: #fff6e8;
  --green: var(--success);
  --green-soft: var(--success-soft);
  --red: var(--danger);
  --red-soft: var(--danger-soft);
  --amber: var(--warning);
  --amber-soft: var(--warning-soft);
  /* ─── States ───────────────────────────────── */
  --hover-tint: rgba(52,120,255,.08);
  --active-tint: rgba(52,120,255,.14);
  --focus-ring: 0 0 0 3px rgba(52,120,255,.22);
  --disabled-bg: #f0f2f7;
  --disabled-fg: #a5adbe;
  /* ─── Overlays & shadows ───────────────────── */
  --overlay: rgba(20,30,55,.42);
  --overlay-strong: rgba(19,26,44,.6);
  --shadow-sm: 0 1px 2px rgba(20,30,60,.04);
  --shadow-md: 0 6px 18px rgba(34,54,96,.08);
  --shadow-lg: 0 18px 50px rgba(34,54,96,.14);
  --shadow: var(--shadow-lg);
  --sidebar: 232px;
  /* Inter теперь реально подключён через Google Fonts (см. index.html) — ставим
     его первым, а "Segoe UI Variable" оставляем как бонус для Windows 11, где
     он есть системно и выглядит чуть острее. */
  font-family: Inter, "Segoe UI Variable Text", "Segoe UI Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-width: 320px; min-height: 100vh; margin: 0; background: var(--bg); color: var(--text); font-weight: 500; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, textarea, select { font: inherit; font-weight: 500; letter-spacing: 0; }
h1, h2, h3, strong { font-weight: 650; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(52, 120, 255, 0.2); outline-offset: 2px; }
textarea { resize: vertical; }
code { font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace; letter-spacing: 0; }
.hidden { display: none !important; }
.auth-shell.hidden { visibility: hidden !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
svg { width: 20px; height: 20px; }

.brand { display: inline-flex; align-items: center; gap: 10px; color: #263147; text-decoration: none; font-size: 18px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.brand b { color: var(--blue); font-weight: 700; }
.brand-symbol { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: var(--blue); box-shadow: 0 7px 16px rgba(52, 120, 255, 0.22); flex: 0 0 auto; }
.brand-symbol svg { width: 21px; height: 21px; stroke-width: 2.3; }
.brand-symbol.large { width: 52px; height: 52px; }
.brand-symbol.large svg { width: 29px; height: 29px; }

.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; background: #f1f5fd; }
.auth-wrap { width: min(100%, 540px); text-align: center; animation: auth-in 440ms cubic-bezier(.16,1,.3,1) both; }
.brand-auth { margin-bottom: 38px; font-size: 23px; }
.brand-auth .brand-symbol { width: 42px; height: 42px; }
.auth-card { min-height: 344px; display: grid; align-items: center; padding: 42px 40px 34px; background: var(--surface); border: 1px solid rgba(226, 231, 240, 0.8); border-radius: 8px; box-shadow: 0 24px 70px rgba(39, 66, 124, 0.1); text-align: left; }
.auth-panel { width: 100%; animation: panel-in 280ms cubic-bezier(.16,1,.3,1) both; }
.auth-heading { text-align: center; margin-bottom: 30px; }
.auth-heading.compact { margin-bottom: 24px; }
.auth-heading h1 { margin: 14px 0 6px; font-size: clamp(28px, 6vw, 36px); line-height: 1.15; font-weight: 500; color: #153a82; }
.auth-heading p { margin: 0; color: #7890c0; font-size: 16px; line-height: 1.5; }
.auth-icon { margin: 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--blue); background: var(--blue-soft); }
.auth-icon.success { color: var(--green); background: var(--green-soft); }
.field-label { display: block; margin: 0 0 8px 2px; font-size: 13px; font-weight: 600; color: var(--muted); }
.field-control { height: 52px; display: flex; align-items: center; gap: 11px; padding: 0 15px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe; color: #b1bfd6; transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease; }
.field-control:focus-within { border-color: var(--blue); background: var(--surface); box-shadow: 0 0 0 4px rgba(52, 120, 255, 0.09); }
.field-control svg { width: 19px; height: 19px; flex: 0 0 auto; }
.field-control input { width: 100%; height: 100%; border: 0; outline: 0; color: var(--text); background: transparent; }
.field-control input::placeholder, textarea::placeholder { color: #b3bfd2; }
/* ─────────────────────────────────────────────────────────────
   Единая база кнопок (Толик design-system v2)
   Референсы Бобика: outline «Добавить», neutral «Пополнить»,
   status-pill «Команда активна». Без градиентов, без размашистых
   теней, компактно, читаемо. Розовый profile-accent НЕ трогает
   primary — это только декоративный акцент профиля.
   ───────────────────────────────────────────────────────────── */
.button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-primary);
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease,
              box-shadow 160ms ease, transform 120ms ease, opacity 160ms ease;
}
.button svg { width: 16px; height: 16px; flex: 0 0 auto; }
.button:hover { transform: none; }
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: 0; box-shadow: var(--btn-focus-ring); }
.button:disabled, .button.disabled {
  cursor: not-allowed;
  color: var(--btn-disabled-fg);
  background: var(--btn-disabled-bg);
  border-color: transparent;
  box-shadow: none;
  opacity: 1;
  transform: none;
}

/* primary — сплошной синий, никаких градиентов и heavy-shadow */
.button.primary {
  color: var(--btn-primary-fg);
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  box-shadow: 0 1px 2px rgba(52,120,255,.16);
}
.button.primary:hover {
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
  box-shadow: 0 2px 6px rgba(52,120,255,.20);
}

/* secondary — нейтральный светло-серый, как «Пополнить» */
.button.secondary {
  color: var(--btn-secondary-fg);
  background: var(--btn-secondary-bg);
  border-color: var(--btn-secondary-border);
}
.button.secondary:hover {
  background: var(--btn-secondary-bg-hover);
  border-color: var(--btn-secondary-border);
}

/* outline — прозрачный + синяя обводка, как «Добавить» */
.button.outline {
  color: var(--btn-outline-fg);
  background: transparent;
  border-color: var(--btn-outline-border);
}
.button.outline:hover {
  background: var(--btn-outline-bg-hover);
  border-color: var(--btn-primary-bg);
}

/* ghost — для второстепенных действий, только текст+иконка */
.button.ghost {
  color: var(--btn-ghost-fg);
  background: transparent;
  border-color: transparent;
}
.button.ghost:hover {
  color: var(--text-primary);
  background: var(--btn-ghost-bg-hover);
}

/* success — светло-зелёный, тёмный текст */
.button.success {
  color: var(--btn-success-fg);
  background: var(--btn-success-bg);
  border-color: var(--btn-success-border);
}
.button.success:hover {
  background: color-mix(in oklab, var(--btn-success-bg) 82%, var(--btn-success-border));
  border-color: var(--btn-success-fg);
}

/* warning — светло-оранжевый, тёмный текст */
.button.warning {
  color: var(--btn-warning-fg);
  background: var(--btn-warning-bg);
  border-color: var(--btn-warning-border);
}
.button.warning:hover {
  background: color-mix(in oklab, var(--btn-warning-bg) 82%, var(--btn-warning-border));
  border-color: var(--btn-warning-fg);
}

/* danger — сплошной красный, только для удаления/отмены */
.button.danger {
  color: var(--btn-danger-fg);
  background: var(--btn-danger-bg);
  border-color: var(--btn-danger-bg);
}
.button.danger:hover {
  background: var(--btn-danger-bg-hover);
  border-color: var(--btn-danger-bg-hover);
}
.button.danger-outline {
  color: var(--btn-danger-outline-fg);
  background: transparent;
  border-color: var(--btn-danger-outline-border);
}
.button.danger-outline:hover {
  background: var(--btn-danger-outline-bg-hover);
  border-color: var(--btn-danger-outline-fg);
}

/* telegram — фирменный синий Telegram, оставлен для одной кнопки */
.button.telegram {
  color: #fff;
  background: #229ed9;
  border-color: #229ed9;
}
.button.telegram:hover {
  background: #1a8dc4;
  border-color: #1a8dc4;
}

/* size-модификаторы */
.button.sm { min-height: 32px; padding: 0 10px; font-size: 13px; border-radius: 7px; gap: 6px; }
.button.sm svg { width: 14px; height: 14px; }
.button.lg { min-height: 44px; padding: 0 18px; font-size: 15px; }
.button.wide { width: 100%; }

/* loading — не меняет ширину, только opacity+спиннер вместо иконки */
.button.is-loading { pointer-events: none; }
.button.is-loading > *:not(.btn-spinner) { opacity: .45; }
.button.is-loading::before {
  content: "";
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: btn-spin 720ms linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Status-pill: компактная плашка «Команда активна» с цветной точкой */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 12px 4px 10px;
  border-radius: 7px;
  border: 1px solid var(--btn-success-border);
  background: var(--btn-success-bg);
  color: var(--btn-success-fg);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.status-pill .status-pill-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  flex: 0 0 auto;
}
.status-pill.online .status-pill-dot { animation: pill-breath 2.2s ease-in-out infinite; }
.status-pill.pending { color: var(--btn-warning-fg); background: var(--btn-warning-bg); border-color: var(--btn-warning-border); }
.status-pill.error   { color: var(--btn-danger-outline-fg); background: rgba(217,72,84,.10); border-color: var(--btn-danger-outline-border); }
.status-pill.offline { color: var(--muted); background: color-mix(in oklab, var(--surface) 88%, var(--muted) 12%); border-color: var(--border); }
@keyframes pill-breath {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 15%, transparent); }
  50%      { transform: scale(1.08); box-shadow: 0 0 0 6px color-mix(in oklab, currentColor 35%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .status-pill.online .status-pill-dot { animation: none; }
  .button, .button:hover, .button:active { transition-duration: 0s; transform: none; }
}
.auth-submit { width: 100%; height: 50px; margin-top: 18px; }
.remember-option { display: flex; align-items: center; gap: 9px; margin-top: 12px; color: #52617a; cursor: pointer; font-size: 11px; }
.remember-option input { position: absolute; opacity: 0; pointer-events: none; }
.remember-option > span { width: 19px; height: 19px; display: grid; place-items: center; border: 1px solid #ccd6e6; border-radius: 5px; color: transparent; background: var(--surface); transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease; }
.remember-option > span svg { width: 13px; height: 13px; }
.remember-option input:checked + span { color: #fff; border-color: var(--blue); background: var(--blue); transform: scale(1.04); }
.remember-option b { font-weight: 550; }
.auth-submit.compact-submit { height: 44px; margin-top: 10px; }
.telegram-icon { color: #229ed9; background: #eaf7fd; }
.otp-control input { text-align: center; font-family: "Cascadia Mono", Consolas, monospace; font-size: 23px; font-weight: 700; }
.text-button, .back-button { border: 0; background: none; cursor: pointer; color: var(--blue); }
.text-button { display: block; margin: 18px auto 0; font-size: 14px; }
.back-button { display: inline-flex; align-items: center; gap: 7px; padding: 0; margin-bottom: 14px; }
.back-button svg { width: 17px; }
.form-error { margin: 10px 2px 0; padding: 10px 12px; border-radius: 6px; color: #ba2f36; background: var(--red-soft); font-size: 13px; line-height: 1.45; }
.issued-token { width: 100%; min-height: 58px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #cbdcff; border-radius: 8px; background: var(--surface-blue); color: var(--blue-strong); cursor: pointer; }
.issued-token code { flex: 1; min-width: 0; overflow-wrap: anywhere; text-align: left; font-size: 14px; }
.issued-token svg { flex: 0 0 auto; }
.notice { display: flex; gap: 9px; align-items: flex-start; margin-top: 14px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.notice svg { width: 17px; height: 17px; color: var(--green); flex: 0 0 auto; }
.auth-foot { margin: 22px 0 0; color: #8b9ab7; font-size: 12px; }
.admin-auth-label { display: block; margin: 12px 0 -8px; color: var(--blue); font-size: 9px; font-weight: 750; letter-spacing: .16em; text-align: center; }
.admin-password-label { margin-top: 14px; }
.admin-security-note { margin-top: 16px; }
.password-requirements { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 13px; color: #7183a5; font-size: 10px; }
.password-requirements span { display: inline-flex; align-items: center; gap: 5px; }
.password-requirements svg { width: 13px; height: 13px; color: var(--green); }

.app-shell { min-height: 100vh; background: var(--bg); }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--sidebar); display: flex; flex-direction: column; padding: 26px 18px 20px; background: var(--surface); border-right: 1px solid var(--line); }
.sidebar-brand { height: 58px; padding: 0 12px; font-size: 17px; }
.side-nav { display: grid; gap: 5px; margin-top: 36px; }
.nav-item { border: 0; background: transparent; cursor: pointer; }
.side-nav .nav-item { min-height: 42px; display: flex; align-items: center; gap: 12px; padding: 0 13px; border-radius: 7px; color: #354057; text-align: left; transition: color 170ms ease, background 170ms ease, transform 170ms ease; }
.side-nav .nav-item:hover { color: var(--blue); background: #f5f8ff; }
.side-nav .nav-item.active { color: var(--blue); background: var(--blue-soft); }
.side-nav .nav-item svg { width: 19px; height: 19px; }
.side-nav .nav-item span { font-size: 14px; font-weight: 500; }
.sidebar-footer { display: grid; gap: 10px; margin-top: auto; }
.side-metric { padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); }
.side-metric > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; }
.side-metric strong { font-size: 16px; }
.side-metric-payouts { position: relative; display: grid; gap: 7px; padding: 11px 12px 12px; overflow: hidden; transition: border-color .24s ease, background-color .24s ease, box-shadow .24s ease, transform .24s ease; }
.side-metric-payouts::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--line-strong); transition: background-color .24s ease; }
.side-metric-head { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 7px; }
.side-metric-icon { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: var(--surface); }
.side-metric-icon svg { width: 13px; height: 13px; }
.side-metric-title { color: var(--muted); font-size: 10px; font-weight: 600; line-height: 1.2; }
.side-metric-state-dot { --metric-dot: var(--line-strong); width: 6px; height: 6px; border-radius: 50%; background: var(--metric-dot); box-shadow: 0 0 0 2px color-mix(in oklab, var(--metric-dot) 14%, transparent); animation: side-metric-breathe 3.2s ease-in-out infinite; }
.side-metric-value-line { display: flex; align-items: baseline; gap: 6px; padding-left: 31px; }
.side-metric-value-line strong { color: var(--text-strong); font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; }
.side-metric-value-line span { color: var(--muted); font-size: 9px; font-weight: 600; }
.side-metric-caption { padding-left: 31px; color: var(--muted); font-size: 9px; line-height: 1.3; }
.side-metric-payouts.has-active { border-color: color-mix(in oklab, var(--primary) 30%, var(--line)); background: color-mix(in oklab, var(--primary) 6%, var(--surface-soft)); box-shadow: 0 8px 20px color-mix(in oklab, var(--primary) 10%, transparent); }
.side-metric-payouts.has-active::before { background: var(--primary); }
.side-metric-payouts.has-active .side-metric-icon { color: var(--primary); border-color: color-mix(in oklab, var(--primary) 28%, var(--line)); background: color-mix(in oklab, var(--primary) 10%, var(--surface)); }
.side-metric-payouts.has-active .side-metric-state-dot { --metric-dot: var(--primary); }
.side-metric-rate { position: relative; display: grid; gap: 7px; overflow: hidden; border-color: var(--line); }
.side-metric-rate::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--line-strong); }
.side-metric-rate-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.side-metric-rate-head > span { min-width: 0; color: color-mix(in srgb, var(--text) 72%, var(--muted)); font-size: 11.5px; font-weight: 600; line-height: 16px; }
@keyframes side-metric-breathe {
  0%, 100% { opacity: .72; transform: scale(1); box-shadow: 0 0 0 2px color-mix(in oklab, var(--metric-dot) 12%, transparent); }
  50% { opacity: 1; transform: scale(1.08); box-shadow: 0 0 0 4px color-mix(in oklab, var(--metric-dot) 5%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .side-metric-state-dot { animation: none; } }
.secure-caption { display: flex; align-items: center; gap: 6px; padding: 7px 2px 0; color: #8290aa; font-size: 11px; }
.secure-caption svg { width: 14px; height: 14px; color: var(--green); }

.workspace { min-height: 100vh; margin-left: var(--sidebar); }
.topbar { position: sticky; top: 0; z-index: 20; height: 76px; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 0 34px; background: color-mix(in oklab, var(--surface) 92%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.mobile-brand { display: none; }
.topbar-context { min-width: 0; margin-right: auto; display: flex; align-items: center; gap: 15px; }
.topbar-status { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
/* Живой индикатор соединения:
   - оффлайн: спокойный оранжевый (ждём/переподключение);
   - online: зелёное мягкое дыхание — расширяющееся полупрозрачное кольцо.
   Анимируется только сама точка/кольцо через transform+opacity,
   текст и панель НЕ трогаются. Отключается при prefers-reduced-motion. */
.status-dot {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--amber) 22%, transparent);
  flex: 0 0 auto;
}
.status-dot.online { background: var(--green); box-shadow: 0 0 0 0 color-mix(in oklab, var(--green) 35%, transparent); }
.status-dot.online::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--green) 45%, transparent);
  animation: connection-breath 2.2s cubic-bezier(.22,1,.36,1) infinite;
  pointer-events: none;
}
@keyframes connection-breath {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.9);  opacity: 0; }
  100% { transform: scale(1.9);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .status-dot.online::after { animation: none; opacity: 0; }
}
.moscow-clock { display: inline-flex; align-items: center; gap: 7px; padding-left: 15px; border-left: 1px solid var(--line); color: #52617c; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.moscow-clock svg { width: 15px; height: 15px; color: var(--blue); }
.sim-switch { min-height: 38px; display: inline-flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; color: #61708d; background: var(--surface); cursor: pointer; font-size: 11px; font-weight: 650; white-space: nowrap; transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
.sim-switch:hover { transform: translateY(-1px); border-color: #c5d4f2; }
.sim-switch:focus-visible { outline: 0; box-shadow: var(--btn-focus-ring); }
.mini-track { position: relative; width: 36px; height: 20px; flex: 0 0 36px; padding: 2px; overflow: hidden; box-sizing: border-box; border-radius: 999px; background: #cad2df; box-shadow: inset 0 1px 2px rgba(31,43,67,.14); transition: background 220ms ease, box-shadow 220ms ease; }
.mini-track i { display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(31,43,67,.24); transition: transform 260ms cubic-bezier(.2,.9,.2,1); will-change: transform; }
.sim-switch.enabled { color: var(--blue); border-color: #bfd2f8; background: var(--surface-blue); }
.sim-switch:is(.enabled, [aria-pressed="true"]) .mini-track { background: var(--blue); }
.sim-switch:is(.enabled, [aria-pressed="true"]) .mini-track i { transform: translateX(16px); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.workspace-switch-link {
  min-height: 40px;
  padding: 0 12px;
  gap: 7px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.workspace-switch-link svg { width: 16px; height: 16px; }
.icon-button { width: 40px; height: 40px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: #667798; cursor: pointer; transition: color 170ms ease, border-color 170ms ease, background 170ms ease, transform 170ms ease; }
.icon-button:hover { color: var(--blue); border-color: #bfd0f7; background: var(--blue-soft); }
.icon-button.small { width: 36px; height: 36px; }
.icon-button.loading svg { animation: spin 800ms linear infinite; }
.account-chip { min-width: 218px; height: 50px; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 7px; border: 1px solid #edf0f5; border-radius: 8px; background: var(--surface-soft); }
.account-avatar { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 7px; color: var(--blue); background: #e7edfa; font-size: 12px; font-weight: 700; overflow: hidden; flex: 0 0 auto; }
/* Раньше в шапке сайта вообще не было <img> — только текст с инициалами, поэтому
   аватарка из Telegram могла показаться в профиле, но никогда не в шапке. */
.account-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.account-avatar img:not([src]), .account-avatar img[src=""] { display: none; }
.account-chip > span:last-child { min-width: 0; display: grid; }
.account-chip strong, .account-chip small { max-width: 155px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-chip strong { font-size: 13px; }
.account-chip small { margin-top: 2px; color: var(--muted); font-size: 11px; }

.content { width: min(100%, 1220px); margin: 0 auto; padding: 38px 34px 80px; }
.view { display: none; animation: view-in 300ms cubic-bezier(.16,1,.3,1) both; transform-origin: top center; }
.view.active { display: block; }
.page-heading { min-height: 80px; display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; margin-bottom: 26px; }
.page-heading.compact { min-height: auto; }
.eyebrow { display: block; margin-bottom: 7px; color: var(--blue); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0; }
.page-heading h1, .profile-head h1 { margin: 0; color: #283349; font-size: clamp(26px, 3vw, 34px); line-height: 1.2; font-weight: 600; }
.page-heading p, .profile-head p { margin: 7px 0 0; color: var(--muted); font-size: 14px; }

/* ─── Search-switch v3 (Толик) ───────────────────────────────
   Один компонент, один статус. Никаких двух конкурирующих
   надписей «Поиск выключен / В работе». Track 44×24, thumb
   18×18, минимальная фикс-ширина статуса — чтобы текст
   «Выключен / В работе» не менял размер компонента. */
.search-switch {
  height: 36px;
  min-width: 200px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--border, var(--line));
  border-radius: 8px;
  background: var(--surface-raised, var(--surface));
  color: var(--text-primary, var(--text));
  cursor: pointer;
  transition: background 160ms cubic-bezier(.22,1,.36,1),
              border-color 160ms cubic-bezier(.22,1,.36,1),
              color 160ms cubic-bezier(.22,1,.36,1);
}
.search-switch:hover { background: color-mix(in oklab, var(--surface-raised, var(--surface)) 88%, var(--text-primary, var(--text)) 12%); }
.search-switch:focus-visible { outline: 0; box-shadow: var(--btn-focus-ring); }
.search-switch:disabled, .search-switch.is-loading { cursor: not-allowed; opacity: .78; }
.search-switch .ss-ico { display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--muted); }
.search-switch .ss-ico svg { width: 16px; height: 16px; }
.search-switch .ss-name { font-size: 13px; font-weight: 600; color: var(--text-primary, var(--text)); }
.search-switch .ss-status {
  min-width: 74px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: var(--btn-danger-outline-fg);
  background: color-mix(in oklab, var(--btn-danger-outline-fg) 12%, transparent);
  transition: color 160ms cubic-bezier(.22,1,.36,1), background 160ms cubic-bezier(.22,1,.36,1);
}
.search-switch.enabled .ss-status {
  color: var(--btn-success-fg);
  background: color-mix(in oklab, var(--btn-success-fg) 14%, transparent);
}
.search-switch.paused .ss-status {
  color: var(--btn-warning-fg);
  background: color-mix(in oklab, var(--btn-warning-fg) 14%, transparent);
}
.search-switch.is-loading .ss-status::after {
  content: "";
  display: inline-block;
  vertical-align: -2px;
  margin-left: 6px;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: btn-spin 720ms linear infinite;
}
/* Дорожка и бегунок раньше были плоскими одним цветом — добавил лёгкий градиент,
   мягкую внутреннюю тень для объёма и кольцо вокруг бегунка, чтобы переключатель
   выглядел не как заглушка, а как настоящий iOS-style тумблер. */
/* Trap: настоящий iOS-стиль switch, 44×24 track, 18×18 thumb */
.search-switch .ss-track {
  position: relative;
  width: 44px; height: 24px;
  flex: 0 0 44px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--btn-danger-outline-fg) 34%, transparent);
  transition: background 200ms cubic-bezier(.22,1,.36,1);
}
.search-switch .ss-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.10);
  transition: transform 200ms cubic-bezier(.22,1,.36,1);
}
.search-switch.enabled .ss-track { background: var(--btn-success-fg); }
.search-switch.enabled .ss-thumb { transform: translateX(20px); }
.search-switch.paused  .ss-track { background: var(--btn-warning-fg); }
.search-switch.paused  .ss-thumb { transform: translateX(20px); }
/* Переключатель поиска/выплат переехал с главной страницы в топбар — на его прежнее
   место в топбаре переехал SIM TOKEN (теперь в настройках). В топбаре ему нужны
   компактные размеры вместо исходных 300×52. */
/* topbar-context: тумблер компактный уже в базе */

.metrics-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 38px; }
.metric { min-height: 126px; display: flex; flex-direction: column; padding: 18px 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
.metric:hover { transform: translateY(-2px); border-color: #cad6eb; box-shadow: 0 10px 28px rgba(41,61,100,.07); }
.metric.primary { background: var(--surface-blue); border-color: #d5e2ff; }
.metric > span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 600; }
.metric > span svg { width: 17px; height: 17px; color: var(--blue); }
.metric strong { margin-top: auto; font-size: clamp(23px, 2.5vw, 30px); line-height: 1.1; font-weight: 600; }
.metric small { margin-top: 7px; color: var(--muted); font-size: 11px; }
.progression-panel { margin: -16px 0 34px; padding: 20px 22px 17px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.progression-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.progression-head h2 { margin: 4px 0 3px; font-size: 18px; }
.progression-head p { margin: 0; color: var(--muted); font-size: 12.5px; }
.progression-summary { display: flex; align-items: center; gap: 14px; }
.progression-summary > span { display: grid; gap: 2px; text-align: right; }
.progression-summary small { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .02em; }
.progression-summary strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.progression-summary > b { min-width: 105px; padding: 7px 9px; border-radius: 6px; background: var(--surface-soft); color: var(--muted); font-size: 11.5px; text-align: center; }
.progression-summary > b.positive { color: #278b33; background: var(--green-soft); }
.progression-summary > b.negative { color: #b64047; background: var(--red-soft); }
.progression-chart { height: 162px; display: grid; grid-template-columns: repeat(7, minmax(56px, 1fr)); gap: 12px; margin-top: 18px; padding-top: 4px; border-top: 1px solid #edf0f5; }
.progression-day { min-width: 0; display: grid; grid-template-rows: 24px 82px 19px 18px; align-items: end; text-align: center; }
.progression-day > span { overflow: hidden; color: #647796; font-size: 11px; font-weight: 550; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.progression-track { position: relative; height: 76px; border-radius: 5px 5px 2px 2px; background: #f3f6fb; overflow: hidden; }
.progression-track i { position: absolute; inset: auto 0 0; height: 3%; display: block; border-top: 2px solid #3478ff; background: #dbe7ff; transform-origin: bottom; animation: bar-rise 520ms cubic-bezier(.16,1,.3,1) both; }
.progression-track .bar-level-1 { height: 10%; }
.progression-track .bar-level-2 { height: 20%; }
.progression-track .bar-level-3 { height: 30%; }
.progression-track .bar-level-4 { height: 40%; }
.progression-track .bar-level-5 { height: 50%; }
.progression-track .bar-level-6 { height: 60%; }
.progression-track .bar-level-7 { height: 70%; }
.progression-track .bar-level-8 { height: 80%; }
.progression-track .bar-level-9 { height: 90%; }
.progression-track .bar-level-10 { height: 100%; }
.progression-day strong { color: #40506b; font-size: 12px; font-weight: 650; text-transform: capitalize; }
.progression-day small { overflow: hidden; color: var(--muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 14px; }
.section-heading h2, .settings-copy h2 { margin: 0; font-size: 19px; font-weight: 600; }
.section-heading p, .settings-copy p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.home-payout-heading { align-items: center; }
.home-payout-tabs { display: inline-flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.home-payout-tab { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 0; border-radius: 6px; color: #7888a5; background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; transition: color 180ms ease, background-color 220ms ease, transform 160ms ease; }
.home-payout-tab:active { transform: scale(.97); }
.home-payout-tab.active { color: var(--text); background: #edf1f7; }
.home-payout-tab > i:not([data-lucide]) { width: 7px; height: 7px; border-radius: 50%; background: #aab4c5; }
.home-payout-tab.active > i:not([data-lucide]) { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); animation: live-pulse 1.8s infinite; }
.home-payout-tab svg { width: 15px; height: 15px; }
.live-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid #cfeeda; border-radius: 6px; color: #278a32; background: var(--green-soft); font-size: 10px; font-weight: 700; }
.live-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: live-pulse 1.8s infinite; }
.count-chip { min-width: 36px; height: 30px; display: grid; place-items: center; padding: 0 10px; border-radius: 6px; color: var(--blue); background: var(--blue-soft); font-size: 13px; font-weight: 700; }

.payout-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.payout-grid.all-mode { grid-template-columns: minmax(0, 1fr); gap: 9px; }
.home-payout-row { position: relative; min-width: 0; display: grid; grid-template-columns: 40px minmax(150px, .75fr) minmax(180px, 1fr) minmax(190px, 1.15fr) auto auto 18px; align-items: center; gap: 14px; min-height: 72px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); animation: row-in 360ms cubic-bezier(.16,1,.3,1) both; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.home-payout-row:hover, .home-payout-row:focus-visible { transform: translateY(-1px); border-color: #cbd7ea; box-shadow: 0 8px 22px rgba(38,54,88,.065); outline: none; }
.home-payout-state { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 7px; color: #b67815; background: var(--amber-soft); }
.home-payout-state.completed { color: #2f9a39; background: var(--green-soft); }
.home-payout-state.canceled, .home-payout-state.expired, .home-payout-state.refunded, .home-payout-state.verification_failed { color: #cf4148; background: var(--red-soft); }
.home-payout-state svg { width: 18px; height: 18px; }
.home-payout-primary, .home-payout-payment, .home-payout-owner { min-width: 0; display: grid; gap: 4px; }
.home-payout-primary strong { font-size: 14px; }
.home-payout-primary small, .home-payout-payment code, .home-payout-owner code { overflow: hidden; color: var(--muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.home-payout-payment strong, .home-payout-owner strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; }
.home-payout-id { color: #6c7d9b; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.home-payout-cancel { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid #f0c9cc; border-radius: 6px; color: #bf363d; background: #fff7f7; cursor: pointer; font: inherit; font-size: 10.5px; font-weight: 700; transition: transform 160ms ease, border-color 180ms ease, background-color 180ms ease; }
.home-payout-cancel:hover { border-color: #e79ba0; background: var(--red-soft); }
.home-payout-cancel:active { transform: scale(.96); }
.home-payout-cancel:disabled { color: #9a6818; border-color: #efd6a4; background: var(--amber-soft); cursor: wait; }
.home-payout-cancel svg { width: 14px; height: 14px; }
.home-payout-cancel:disabled svg { animation: spin 1s linear infinite; }
.home-payout-open { width: 16px; height: 16px; color: var(--muted-2); }
.payout-card { position: relative; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 6px 22px rgba(38,54,88,.045); transition: transform 260ms cubic-bezier(.16,1,.3,1), box-shadow 260ms ease, border-color 260ms ease, opacity 260ms ease; overflow: hidden; }
.payout-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(38,54,88,.08); }
.payout-card.entering, .history-item.entering, .token-card.entering { animation: row-in 440ms cubic-bezier(.16,1,.3,1) both; }
.payout-card.removing { opacity: 0; transform: translateY(-6px) scale(.98); }
.payout-card.action-pending::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.58); backdrop-filter: blur(1px); }
.payout-top, .history-head, .token-row, .admin-user-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bank-tag { display: inline-flex; align-items: center; gap: 7px; color: #35415a; font-size: 13px; font-weight: 650; text-transform: capitalize; }
.bank-tag svg { width: 18px; height: 18px; color: var(--blue); }
.payout-state { padding: 5px 8px; border-radius: 5px; color: #2e8737; background: var(--green-soft); font-size: 10px; font-weight: 650; }
.payout-state.canceling { color: #a4670b; background: var(--amber-soft); }
.payout-card.is-canceling { border-color: #efd6a4; box-shadow: 0 10px 28px rgba(173,115,22,.08); }
.payout-deadline { display: flex; align-items: center; gap: 10px; margin: -20px -20px 17px; padding: 11px 20px; border-bottom: 1px solid #dbe5f6; color: #405270; background: #f4f7fd; }
.payout-deadline > svg { width: 17px; height: 17px; color: var(--blue); flex: 0 0 auto; }
.payout-deadline div { min-width: 0; display: grid; gap: 2px; }
.payout-deadline span { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.payout-deadline strong { font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.35; text-align: right; }
.amount-line { padding: 18px 0 14px; border-bottom: 1px solid var(--line); }
.amount-line strong { font-size: 27px; font-weight: 600; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 15px 0; }
.detail-cell { min-width: 0; display: grid; gap: 5px; }
.detail-cell > span { color: var(--muted); font-size: 10px; }
.detail-cell strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.align-right { text-align: right; justify-items: end; }
.copy-inline { max-width: 100%; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: #3d4b67; cursor: pointer; }
.copy-inline code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.copy-inline svg { width: 14px; height: 14px; color: var(--blue); flex: 0 0 auto; }
.token-line { display: grid; gap: 6px; padding: 11px 12px; border-radius: 6px; background: var(--surface-soft); }
.token-caption { color: var(--muted); font-size: 10px; }
.token-line code { overflow: hidden; text-overflow: ellipsis; color: #496184; font-size: 11px; }
.token-balance { color: #536583; font-size: 11px; line-height: 1.45; }
.token-balance.linked { color: #31703a; }
.token-balance.disconnected { color: #9a6717; }
.card-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 13px; }
.card-actions > :only-child { grid-column: 1 / -1; }
.card-actions .confirm-payout { grid-column: 1 / -1; }
.cancel-progress { color: #98610e; border-color: #efd6a4; background: var(--amber-soft); cursor: wait; opacity: 1 !important; }
.cancel-progress svg, .operation-alert > svg { animation: spin 1s linear infinite; }
.operation-alert { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 11px 12px; border: 1px solid #eedcaf; border-radius: 7px; color: #8a5d16; background: #fffaf0; }
.operation-alert.error { color: #a93239; border-color: #f1cbce; background: #fff5f5; }
.operation-alert > svg { width: 17px; height: 17px; flex: 0 0 auto; }
.operation-alert.error > svg { animation: none; }
.operation-alert div { min-width: 0; display: grid; gap: 3px; }
.operation-alert strong { font-size: 11px; }
.operation-alert span { overflow-wrap: anywhere; font-size: 10px; line-height: 1.45; }

/* Empty-state — token-based. Раньше был rgba(255,255,255,.6) — в тёмной теме
   получался мутный светло-серый прямоугольник с плохим контрастом и слишком
   высокий (190px), доминировал над всей страницей выплат. Теперь: фон surface,
   бордер line, компактнее, текст читаемый в любой теме. */
.empty-state { min-height: 132px; display: grid; place-items: center; padding: 22px 20px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); background: var(--surface); text-align: center; box-shadow: var(--shadow-sm); }
.empty-state > div { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.empty-state strong { display: block; color: var(--text); font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; }
.empty-state p { max-width: 380px; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.empty-state svg { width: 28px; height: 28px; color: var(--primary); opacity: .7; }

.filter-row { display: inline-flex; max-width: 100%; gap: 3px; margin-bottom: 18px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow-x: auto; }
.filter { min-height: 34px; padding: 0 14px; border: 0; border-radius: 6px; color: #7e8eae; background: transparent; cursor: pointer; font-size: 12px; font-weight: 600; white-space: nowrap; transition: background-color 220ms cubic-bezier(.16,1,.3,1), color 220ms ease, transform 160ms ease; }
.filter:active { transform: scale(.96); }
.filter.active { color: var(--text); background: #eef1f6; animation: filter-pop 260ms cubic-bezier(.16,1,.3,1) both; }
@keyframes filter-pop { from { transform: scale(.94); } to { transform: scale(1); } }
.history-list, .token-list, .admin-users { display: grid; gap: 10px; }
.history-item { display: grid; grid-template-columns: minmax(180px, .85fr) 1.5fr minmax(180px, .8fr); align-items: center; gap: 18px; min-height: 74px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.history-head { justify-content: flex-start; }
.history-head strong { font-size: 14px; }
.state-badge { min-width: 78px; margin-left: auto; padding: 6px 9px; border-radius: 5px; text-align: center; font-size: 10px; font-weight: 650; transition: background-color 260ms ease, color 260ms ease; }
.state-badge.completed { color: #278c31; background: var(--green-soft); animation: state-pop 420ms cubic-bezier(.16,1,.3,1) both; }
.state-badge.canceled, .state-badge.expired, .state-badge.verification_failed { color: #cb3940; background: var(--red-soft); }
.state-badge.processing, .state-badge.active, .state-badge.verification, .state-badge.manual_verification, .state-badge.canceling { color: #b67612; background: var(--amber-soft); animation: soft-pulse 1.8s ease-in-out infinite; }
@keyframes state-pop { 0% { transform: scale(.85); opacity: .4; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
.history-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 18px; color: var(--muted); font-size: 11px; }
.history-meta code { color: #40506d; }
.history-token { min-width: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.history-token code { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: #4f6287; white-space: nowrap; }

.inline-import { margin-bottom: 18px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: hidden; transition: border-color 220ms ease, box-shadow 220ms ease, padding 280ms cubic-bezier(.16,1,.3,1); }
.inline-import:hover { border-color: #d6dfed; }
.inline-import.expanded { padding: 8px 8px 16px; border-color: #cddcf8; box-shadow: 0 10px 26px rgba(49,91,173,.07); }
.token-import-toggle { width: 100%; min-height: 54px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; padding: 8px 10px; border: 0; border-radius: 7px; color: var(--text); background: transparent; cursor: pointer; text-align: left; transition: background 180ms ease; }
.token-import-toggle:hover { background: #f6f8fc; }
.inline-import.expanded .token-import-toggle { background: var(--surface-blue); }
.token-import-icon { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #d7e3fa; border-radius: 7px; color: var(--blue); background: #f4f7fe; }
.token-import-icon svg { width: 18px; height: 18px; }
.token-import-copy { min-width: 0; display: grid; gap: 3px; }
.token-import-copy strong { font-size: 13px; }
.token-import-copy small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.token-import-chevron { width: 17px; height: 17px; color: #7f8da8; transition: transform 300ms cubic-bezier(.16,1,.3,1); }
.inline-import.expanded .token-import-chevron { transform: rotate(180deg); }
.token-import-body { max-height: 0; margin: 0 10px; overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(-7px); transition: max-height 380ms cubic-bezier(.16,1,.3,1), margin-top 280ms ease, opacity 180ms ease, transform 280ms cubic-bezier(.16,1,.3,1); }
/* При раскрытии контейнер больше не режет содержимое, но без ручного
   ресайза — фикс-высота, единый формат по требованию владельца. Форма
   раскрывается на 220px, textarea имеет фиксированную высоту, кнопка
   «Добавить» всегда видна. */
.inline-import.expanded .token-import-body { max-height: 240px; overflow: visible; margin-top: 12px; opacity: 1; pointer-events: auto; transform: translateY(0); }
#token-import-value { min-height: 84px; height: 84px; max-height: 84px; resize: none; box-sizing: border-box; }
.token-import-body > label { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.token-import-body > label span { font-size: 12px; font-weight: 600; }
.token-import-body > label small { color: var(--muted); font-size: 10px; }
.token-import-body > div { display: flex; align-items: stretch; gap: 10px; }
.inline-import textarea { flex: 1; min-height: 76px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 7px; outline: 0; color: var(--text); background: #fbfcfe; }
.inline-import textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(52,120,255,.08); }
.inline-import .button { align-self: stretch; }
.tokens-toolbar { display: flex; justify-content: flex-end; margin: -6px 0 14px; }
.token-card { padding: 15px 17px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: hidden; transition: opacity 220ms ease, transform 220ms ease, max-height 220ms ease, margin 220ms ease, padding 220ms ease; }
.token-card.dismissing { opacity: 0; transform: scale(.96); max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
.token-main { min-width: 0; display: grid; gap: 5px; }
.token-main strong { font-size: 13px; }
.token-finance { color: #647695; font-size: 10px; line-height: 1.5; }
.token-status { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.token-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); }
.token-status.active i, .token-status.searching i, .token-status.in_line i { background: var(--green); }
.token-status.error i, .token-status.invalid i { background: var(--red); }
.token-status.canceling i { background: var(--amber); }
.token-card > .button { margin-top: 12px; }
.token-error { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; padding: 9px 10px; border-radius: 6px; color: #b0353c; background: var(--red-soft); overflow-wrap: anywhere; font-size: 10px; line-height: 1.45; }
.token-error svg { width: 15px; height: 15px; flex: 0 0 auto; }

.settings-form { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: hidden; }
.settings-section { min-height: 126px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 24px; border-bottom: 1px solid var(--line); }
.settings-copy { display: flex; align-items: flex-start; gap: 14px; max-width: 600px; }
.settings-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; color: var(--blue); background: var(--blue-soft); }
.settings-icon svg { width: 19px; height: 19px; }
.number-control { width: 120px; display: grid; gap: 6px; }
.number-control span, .amount-grid span, .form-field > span { color: var(--muted); font-size: 11px; font-weight: 600; }
.number-control input, .amount-grid input, .form-field input, .form-field textarea { width: 100%; min-height: 44px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; outline: 0; color: var(--text); background: #fbfcfe; box-shadow: inset 0 1px 2px rgba(20,30,55,.03); transition: border-color 150ms ease, box-shadow 150ms ease; }
.form-field textarea { min-height: 110px; padding-top: 11px; line-height: 1.5; }
.number-control input:focus, .amount-grid input:focus, .form-field input:focus, .form-field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(52,120,255,.1); }
/* У полей "Диапазон суммы" и других number-инпутов при наведении браузер показывал
   стрелочки +/- (спиннер), которые дёргали разметку поля и подтормаживали курсор
   рядом с ними. Стрелочки визуально не нужны — значение всё равно вводится с клавиатуры. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.amount-grid { width: min(100%, 350px); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.amount-grid label, .form-field { display: grid; gap: 6px; }
.bank-settings-section { align-items: stretch; flex-direction: column; }
.bank-settings-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.bank-scope-toggle { min-width: 270px; min-height: 42px; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 3px; padding: 4px; border: 1px solid #dbe2ee; border-radius: 7px; color: #77859e; background: #f3f6fa; cursor: pointer; transition: border-color 200ms ease, background 200ms ease; }
.bank-scope-toggle > span { display: grid; place-items: center; min-height: 32px; padding: 0 12px; border-radius: 5px; font-size: 10px; font-weight: 650; text-align: center; transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.bank-scope-toggle:not(.selective) > span:first-child,
.bank-scope-toggle.selective > span:last-child { color: var(--blue); background: var(--surface); box-shadow: 0 1px 5px rgba(45,65,103,.12); }
.bank-scope-toggle:hover { border-color: #c8d5e9; }
.bank-picker { display: grid; gap: 11px; padding-top: 18px; border-top: 1px solid #edf0f5; animation: panel-in 240ms cubic-bezier(.16,1,.3,1) both; }
.bank-search { height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfe; color: #8998b1; }
.bank-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(52,120,255,.07); }
.bank-search > svg { width: 17px; height: 17px; }
.bank-search input { flex: 1; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; }
.bank-search button { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; color: #8090aa; background: transparent; cursor: pointer; }
.bank-search button svg { width: 15px; height: 15px; }
.bank-picker-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 10px; }
.bank-picker-meta button { padding: 0; border: 0; color: var(--blue); background: none; cursor: pointer; font-size: 10px; font-weight: 600; }
.bank-list { max-height: 250px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; overflow-y: auto; padding-right: 3px; }
.bank-option { min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); cursor: pointer; transition: border-color 160ms ease, background 160ms ease; }
.bank-option:hover { border-color: #c8d8f5; background: #fafcff; }
.bank-option:has(input:checked) { border-color: #b9cff8; background: var(--surface-blue); }
.bank-option input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--blue); }
.bank-option span { min-width: 0; display: grid; gap: 2px; }
.bank-option strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.bank-option small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.bank-loading { grid-column: 1 / -1; padding: 18px; color: var(--muted); background: var(--surface-soft); border-radius: 7px; font-size: 11px; text-align: center; }
.form-actions { min-height: 76px; display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding: 16px 24px; background: var(--surface-soft); }
.form-actions > span { color: var(--muted); font-size: 11px; }

.trademo-link-section { display: grid; gap: 17px; background: var(--surface); transition: gap .52s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .35s ease; }
.trademo-link-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.trademo-link-head .settings-copy h2 { color: var(--text-strong); font-size: 16px; font-weight: 620; line-height: 1.3; }
.trademo-link-head .settings-copy p { max-width: 720px; margin-top: 4px; color: var(--muted); font-size: 12.5px; font-weight: 500; line-height: 1.5; }
.trademo-head-actions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.trademo-panel-toggle { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: var(--surface-soft); cursor: pointer; transition: color .22s ease, border-color .22s ease, background-color .22s ease; }
.trademo-panel-toggle:hover { color: var(--primary); border-color: color-mix(in oklab, var(--primary) 34%, var(--line)); background: color-mix(in oklab, var(--primary) 7%, var(--surface)); }
.trademo-panel-toggle svg { width: 16px; height: 16px; transition: transform .42s cubic-bezier(.16,1,.3,1); }
.trademo-panel-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.trademo-link-details { min-height: 0; display: grid; grid-template-rows: 1fr; opacity: 1; overflow: hidden; visibility: visible; transition: grid-template-rows .58s cubic-bezier(.16,1,.3,1), opacity .34s ease, visibility 0s linear; }
.trademo-link-details-inner { min-height: 0; display: grid; gap: 17px; overflow: hidden; transform: translateY(0); transition: transform .58s cubic-bezier(.16,1,.3,1); }
.trademo-link-section.is-collapsed { gap: 0; }
.trademo-link-section.is-collapsed .trademo-link-details { grid-template-rows: 0fr; opacity: 0; visibility: hidden; pointer-events: none; transition: grid-template-rows .58s cubic-bezier(.16,1,.3,1), opacity .26s ease .05s, visibility 0s linear .58s; }
.trademo-link-section.is-collapsed .trademo-link-details-inner { transform: translateY(-4px); }
.trademo-link-section.is-linked .settings-icon.trademo { color: var(--green); border-color: color-mix(in oklab, var(--green) 28%, var(--line)); background: color-mix(in oklab, var(--green) 10%, var(--surface)); }
.trademo-link-section.connection-success { border-color: color-mix(in oklab, var(--green) 30%, var(--line)); box-shadow: 0 8px 24px color-mix(in oklab, var(--green) 7%, transparent); }
.settings-icon.trademo { color: #285fc7; background: #eaf1ff; }
.integration-state { min-width: 116px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: var(--surface-soft); font-size: 11px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.integration-state > i { width: 7px; height: 7px; border-radius: 50%; background: #9aa8bd; }
.integration-state.connected { color: #278c31; border-color: #cce9cf; background: #f1faf2; }
.integration-state.connected > i { background: var(--green); box-shadow: 0 0 0 3px rgba(67,189,79,.12); }
.integration-state.warning { color: #ae7119; border-color: #f0ddbd; background: #fff8ec; }
.integration-state.warning > i { background: var(--amber); }
.trademo-profile-summary { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 8px; padding: 10px; border: 1px solid #dfe6f1; border-radius: 8px; background: #f7f9fc; }
.trademo-profile-summary > div { min-width: 0; display: grid; gap: 4px; padding: 10px 12px; border-right: 1px solid #e2e7ef; }
.trademo-profile-summary > div:last-child { border-right: 0; }
.trademo-profile-summary span { color: var(--muted); font-size: 10px; font-weight: 600; text-transform: uppercase; }
.trademo-profile-summary strong { overflow: hidden; color: var(--text-strong); font-size: 14px; font-weight: 620; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.trademo-profile-summary small { overflow: hidden; color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.trademo-link-form { display: grid; gap: 9px; }
.trademo-link-form label { display: grid; gap: 6px; }
.trademo-link-form label > span { color: var(--muted-strong); font-size: 11px; font-weight: 600; }
.trademo-link-form textarea { width: 100%; min-height: 58px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 7px; outline: 0; background: var(--surface); color: var(--text); font-family: Inter, "Segoe UI Variable Text", sans-serif; font-size: 12.5px; font-weight: 500; line-height: 1.5; resize: none; transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
.trademo-link-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(52,120,255,.08); }
.trademo-link-form > p { margin: 0; color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.5; }
.trademo-link-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 3px; }
.integration-connected { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid color-mix(in oklab, var(--green) 28%, var(--line)); border-radius: 7px; color: var(--green); background: color-mix(in oklab, var(--green) 8%, var(--surface)); }
.integration-success-mark { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; color: var(--green); background: transparent; }
.integration-success-mark svg { width: 23px; height: 23px; stroke-width: 1.9; }
.integration-connected.is-new .integration-success-mark { animation: trademo-check-settle .48s cubic-bezier(.16,1,.3,1) both; }
.integration-connected.is-new { animation: trademo-success-in .46s cubic-bezier(.16,1,.3,1) both; }
@keyframes trademo-check-settle { from { opacity: 0; transform: scale(.78); } to { opacity: 1; transform: scale(1); } }
@keyframes trademo-success-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.integration-connected > div { display: grid; gap: 3px; }
.integration-connected strong { color: var(--text-strong); font-size: 12.5px; font-weight: 620; line-height: 1.35; }
.integration-connected span { color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.45; }
.trademo-account-controls { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.insurance-editor { width: min(100%, 292px); display: grid; gap: 7px; }
.insurance-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.insurance-editor-head > span { color: #4d5c76; font-size: 10px; font-weight: 680; }
.insurance-editor-head > small { display: inline-flex; align-items: center; gap: 4px; color: #319544; font-size: 9px; font-weight: 680; transition: color 180ms ease; }
.insurance-editor.editing .insurance-editor-head > small { color: var(--blue); }
.insurance-input-row { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 7px; }
.insurance-input-row input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #d9e0eb; border-radius: 7px; outline: 0; color: var(--text); background: #f6f8fb; font-size: 12px; font-weight: 650; transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
.insurance-input-row input:not([readonly]) { border-color: #a9c4f8; background: var(--surface); box-shadow: 0 0 0 3px rgba(52,120,255,.08); }
.insurance-input-row input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(52,120,255,.11); }
.insurance-saved-value { height: 42px; display: flex; align-items: center; padding: 0 12px; border: 1px solid #e0e6ef; border-radius: 7px; color: #35435a; background: #f7f9fc; font-size: 12px; font-weight: 700; animation: insurance-fold-in 220ms cubic-bezier(.16,1,.3,1) both; }
.insurance-editor:not(.editing) .insurance-input-row input { display: none; }
.insurance-editor.editing .insurance-saved-value { display: none; }
.insurance-input-row .icon-button { width: 42px; height: 42px; }
.insurance-confirm { color: #fff; border-color: var(--blue); background: var(--blue); }
.insurance-confirm:hover { color: #fff; border-color: #245fda; background: #245fda; }
.insurance-confirm.loading svg { animation: spin 800ms linear infinite; }
.insurance-edit { color: var(--blue); border-color: #c8d7f4; background: var(--surface-blue); }
.insurance-help { color: var(--muted); font-size: 9px; line-height: 1.45; }
.onboarding-insurance { width: 100%; margin-top: 12px; }
@keyframes insurance-fold-in { from { opacity: 0; transform: translateY(-4px) scaleY(.92); } to { opacity: 1; transform: translateY(0) scaleY(1); } }
.integration-error { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid #f2caca; border-radius: 7px; color: #b43139; background: #fff4f4; font-size: 10px; line-height: 1.5; }
.integration-error svg { width: 15px; height: 15px; flex: 0 0 auto; }

.profile-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.avatar-wrap { position: relative; width: 68px; height: 68px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; color: var(--blue); background: var(--blue-soft); overflow: hidden; font-size: 20px; font-weight: 700; }
.avatar-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-wrap img:not([src]), .avatar-wrap img[src=""] { display: none; }
/* Раньше у всех пользователей без загруженной аватарки из Telegram был один и тот же
   синий кружок с инициалами — теперь у каждого свой цвет (выбирается стабильно по
   его ID, см. avatarTone() в app.js), чтобы аватарки визуально различались. */
.avatar-tone-0 { color: #2f5fd6; background: linear-gradient(135deg, #dbe6ff 0%, #c3d6ff 100%); }
.avatar-tone-1 { color: #b8580a; background: linear-gradient(135deg, #ffe8cf 0%, #ffd6a8 100%); }
.avatar-tone-2 { color: #1f8f5f; background: linear-gradient(135deg, #d3f5e6 0%, #b3ecd2 100%); }
.avatar-tone-3 { color: #a12d67; background: linear-gradient(135deg, #ffe0ee 0%, #ffc2dc 100%); }
.avatar-tone-4 { color: #6b3fc9; background: linear-gradient(135deg, #ece2ff 0%, #d9c6ff 100%); }
.avatar-tone-5 { color: #0e8f9a; background: linear-gradient(135deg, #d3f4f6 0%, #ade9ec 100%); }
.avatar-tone-6 { color: #b02a2a; background: linear-gradient(135deg, #ffe0e0 0%, #ffc2c2 100%); }
.avatar-tone-7 { color: #7a7a1f; background: linear-gradient(135deg, #f4f4cf 0%, #e9e9a3 100%); }
.level-panel { padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.level-topline { display: flex; justify-content: space-between; gap: 20px; }
.level-topline div { display: grid; gap: 4px; }
.level-topline span { color: var(--muted); font-size: 11px; }
.level-topline strong { font-size: 17px; }
.progress-track { height: 7px; margin: 17px 0 10px; border-radius: 4px; background: #e8edf5; overflow: hidden; }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--blue); transition: width 700ms cubic-bezier(.2,.8,.2,1); }
.level-panel p { margin: 0; color: var(--muted); font-size: 11px; }
.telegram-mode-panel { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px; margin-top: 12px; padding: 17px 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.telegram-mode-panel > div { min-width: 0; display: grid; gap: 3px; }
.telegram-mode-panel > div > span { color: var(--muted); font-size: 10px; font-weight: 600; }
.telegram-mode-panel strong { font-size: 13px; }
.telegram-mode-panel small { color: #71809a; font-size: 10px; line-height: 1.45; }
.profile-section { margin-top: 28px; }
.badge-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.achievement { min-height: 102px; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); text-align: center; }
.achievement > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: var(--green-soft); }
.achievement > span svg { width: 18px; }
.achievement strong { font-size: 11px; }
.achievement.locked { opacity: .58; }
.achievement.locked > span { color: var(--muted); background: #eef1f6; }
.mobile-logout { margin-top: 20px; }
.admin-section { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.agent-editor { display: grid; grid-template-columns: minmax(260px,.9fr) minmax(320px,1.1fr); gap: 24px; margin-bottom: 18px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.agent-editor-intro { display: flex; align-items: center; gap: 15px; }
.agent-editor-intro > div { min-width: 0; }
.agent-editor-intro h3 { margin: 0 0 4px; font-size: 16px; }
.agent-editor-intro p { margin: 0; color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.55; }
.agent-avatar-preview { position: relative; width: 66px; height: 66px; display: grid; place-items: center; flex: 0 0 66px; overflow: hidden; border: 1px solid #cbd9f1; border-radius: 8px; color: var(--blue); background: var(--blue-soft); }
.agent-avatar-preview > img { position: absolute; inset: 0; width: 100%; height: 100%; display: none; object-fit: cover; }
.agent-avatar-preview.has-image > img { display: block; }
.agent-avatar-preview > span { display: grid; place-items: center; }
.agent-avatar-preview svg { width: 25px; height: 25px; stroke-width: 2.1; }
.agent-editor-fields { display: grid; grid-template-columns: minmax(180px,1fr) auto; gap: 10px 14px; align-items: end; }
.agent-name-field { display: grid; gap: 6px; }
.agent-name-field > span { color: #4d5c76; font-size: 11px; font-weight: 650; }
.agent-name-field input { min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; outline: 0; background: var(--surface); transition: border-color 180ms ease, box-shadow 180ms ease; }
.agent-name-field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(52,120,255,.08); }
.agent-avatar-actions { display: flex; gap: 7px; }
.agent-avatar-actions .button { min-height: 42px; white-space: nowrap; }
.agent-editor-submit { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 2px; }
.agent-editor-submit > span { color: var(--muted); font-size: 10px; font-weight: 500; }
.agent-editor-submit .button { min-height: 38px; }
.admin-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 14px; }
.admin-stat { padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.admin-stat strong { display: block; font-size: 22px; }
.admin-stat span { color: var(--muted); font-size: 10px; }
.admin-user { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.admin-user-head > div { min-width: 0; display: grid; gap: 3px; }
.admin-user-head span, .admin-user-meta { color: var(--muted); font-size: 11px; }
.admin-status { padding: 5px 8px; border-radius: 5px; background: #eef1f6; }
.admin-status.approved { color: #278c31; background: var(--green-soft); }
.admin-status.rejected { color: #c73b42; background: var(--red-soft); }
.admin-user-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 11px; }
.admin-actions { display: flex; gap: 8px; margin-top: 12px; }
.admin-accounts { display: grid; gap: 6px; margin-top: 11px; }
.admin-account-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); }
.admin-account-token { flex: 0 1 auto; min-width: 0; }
.admin-account-info { min-width: 0; flex: 1; display: grid; gap: 2px; }
.admin-account-info small { color: var(--muted); font-size: 10px; }
.admin-account-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.icon-button.danger { color: var(--red); }
.icon-button.danger:hover { color: #fff; border-color: var(--red); background: var(--red); }
.admin-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(340px, 1.1fr); gap: 22px; align-items: start; }
.admin-subtitle { margin: 0 0 10px; font-size: 14px; }
.admin-inbox { display: grid; gap: 16px; }
.admin-conversation { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.conversation-head, .message-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.conversation-head > div { display: grid; gap: 3px; }
.conversation-head span { color: var(--muted); font-size: 10px; }
.conversation-head > b { padding: 4px 7px; border-radius: 5px; color: var(--blue); background: var(--blue-soft); font-size: 9px; }
.conversation-messages { display: grid; gap: 7px; margin: 10px 0; }
.admin-reply { display: flex; gap: 7px; }
.admin-reply input { min-width: 0; min-height: 40px; flex: 1; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; outline: 0; }

.chat-widget { position: fixed; right: 26px; bottom: 24px; z-index: 70; pointer-events: none; }
.chat-launcher { position: relative; width: 58px; height: 58px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #fff; background: var(--blue); box-shadow: 0 14px 34px rgba(52,120,255,.3); cursor: pointer; transition: transform 220ms cubic-bezier(.16,1,.3,1), box-shadow 220ms ease, opacity 160ms ease; }
.chat-launcher, .chat-popover { pointer-events: auto; }
.chat-launcher:hover { transform: translateY(-3px) scale(1.035); box-shadow: 0 18px 40px rgba(52,120,255,.36); }
.chat-launcher svg { width: 27px; height: 27px; stroke-width: 2.2; }
.chat-widget.open .chat-launcher { opacity: 0; pointer-events: none; transform: scale(.84); }
.chat-widget-count { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px; border: 2px solid #fff; border-radius: 10px; color: #fff; background: var(--red); font-size: 9px; }
.chat-popover { width: min(430px, calc(100vw - 28px)); height: min(680px, calc(100vh - 86px)); border: 1px solid #e3e8f0; border-radius: 10px; background: var(--surface); box-shadow: 0 24px 70px rgba(35,51,82,.2); overflow: hidden; transform-origin: right bottom; animation: chat-open 280ms cubic-bezier(.16,1,.3,1) both; }
.chat-welcome { position: relative; height: 100%; display: flex; flex-direction: column; padding: 28px 22px 18px; background: #fbfcff; }
.chat-close { position: absolute; top: 17px; right: 17px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; color: #7d8ba4; background: transparent; cursor: pointer; }
.chat-close:hover { color: var(--blue); background: var(--blue-soft); }
.chat-close svg { width: 18px; height: 18px; }
.chat-brand-mark { position: relative; width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; color: #fff; background: #0756dc; box-shadow: 0 9px 24px rgba(7,86,220,.2); }
.chat-brand-mark > img { position: absolute; inset: 0; width: 100%; height: 100%; display: none; object-fit: cover; }
.chat-brand-mark.has-image > img { display: block; }
.chat-brand-mark > span { display: grid; place-items: center; }
.chat-brand-mark svg { width: 24px; height: 24px; }
.chat-brand-mark.small { width: 34px; height: 34px; flex: 0 0 auto; box-shadow: none; }
.chat-brand-mark.small svg { width: 17px; height: 17px; }
.chat-welcome-copy { margin-top: 24px; }
.chat-welcome-copy h2 { margin: 0 0 8px; color: #243047; font-size: 24px; font-weight: 650; }
.chat-welcome-copy p { margin: 0; color: #687894; font-size: 14px; font-weight: 500; line-height: 1.65; }
.chat-availability { margin-top: auto; padding: 17px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); box-shadow: 0 8px 24px rgba(38,57,92,.06); }
.chat-availability > div { display: flex; align-items: flex-start; gap: 10px; }
.chat-availability > div > i,
.chat-availability > div > .online-status { margin-top: 5px; }
.chat-availability span { display: grid; gap: 4px; }
.chat-availability strong { font-size: 13px; }
.chat-availability small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.chat-availability button { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 0; border: 0; color: var(--blue); background: none; cursor: pointer; font-size: 12px; font-weight: 650; }
.chat-availability button svg { width: 15px; height: 15px; }
.chat-conversation { height: 100%; display: grid; grid-template-rows: 68px 1fr auto; background: #e9eef3; }
.chat-widget-head { display: grid; grid-template-columns: 32px 34px 1fr 32px; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid #edf0f5; background: var(--surface); }
.chat-widget-head button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; color: #6e7e98; background: transparent; cursor: pointer; }
.chat-widget-head button:hover { color: var(--blue); background: var(--blue-soft); }
.chat-widget-head button svg { width: 18px; height: 18px; }
.chat-widget-head > span:nth-child(3) { min-width: 0; display: grid; gap: 2px; }
.chat-widget-head strong { overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.chat-widget-head small { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 520; }
.chat-widget-head small i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
/* ── OnlineStatus (единый компонент, дыхание только у кольца) ────
   Живой зелёный индикатор возле «Мы в сети». Работает и на
   приветственном экране (.chat-availability), и внутри диалога
   (.chat-widget-head small). Центр статичен, кольцо расширяется
   через transform+opacity — текст «Мы в сети» неподвижен. */
.online-status {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  flex: 0 0 auto;
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--green) 30%, transparent);
}
.online-status::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--green) 45%, transparent);
  animation: online-status-breath 2.2s cubic-bezier(.22,1,.36,1) infinite;
  pointer-events: none;
  will-change: transform, opacity;
}
.online-status[data-state="pending"] { background: var(--amber); }
.online-status[data-state="pending"]::after { animation: none; opacity: 0; }
.online-status[data-state="error"]   { background: var(--red); }
.online-status[data-state="error"]::after { animation: none; opacity: 0; }
.online-status[data-state="reconnect"] { background: var(--primary); }
.online-status[data-state="reconnect"]::after { animation: none; opacity: 0; }
@keyframes online-status-breath {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .online-status::after { animation: none; opacity: 0; }
}
/* ─────────────────────────────────────────────────────────
   Chat feed в стиле Telegram Desktop/Web
   Обои через SVG data-URI, полупрозрачный слой над base color.
   ───────────────────────────────────────────────────────── */
:root {
  --chat-bg: #eef2f7;
  --chat-bg-strong: #d8dfe9;
  --chat-pattern-color: rgba(46, 82, 148, 0.10);
  --chat-incoming-bg: #ffffff;
  --chat-incoming-fg: var(--text-primary);
  --chat-outgoing-bg: #3478ff;
  --chat-outgoing-fg: #ffffff;
  --chat-time-in:  color-mix(in oklab, var(--text-secondary) 92%, transparent);
  --chat-time-out: rgba(255,255,255,.78);
}
.chat-feed, .chat-dialog-feed {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 18px 14px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  /* pan-y один блокировал pinch-to-zoom на мобилках — юзеры жаловались что
     не могут разглядеть мелкий шрифт. pinch-zoom разрешает масштабирование
     двумя пальцами, вертикальный скролл всё равно работает. */
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  background-color: var(--chat-bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><g fill='none' stroke='%232e5294' stroke-width='1.1' stroke-linecap='round' stroke-opacity='0.42'><circle cx='24' cy='24' r='10'/><path d='M62 20 l14 -6 l14 6 l0 14 l-14 6 l-14 -6z'/><path d='M112 22 l16 0 M120 14 l0 16'/><path d='M20 66 q10 -12 22 0 t22 0'/><circle cx='96' cy='68' r='11'/><path d='M84 108 l24 0 l0 20 l-24 0z' /><path d='M40 120 l14 -14 l14 14'/></g></svg>");
  background-repeat: repeat;
  background-size: 140px 140px;
}
.chat-connection-event { max-width: 88%; display: flex; align-items: center; gap: 9px; margin: 6px auto 12px; padding: 6px 12px; border-radius: 12px; color: color-mix(in oklab, var(--text) 78%, var(--muted)); background: color-mix(in oklab, var(--surface) 88%, transparent); box-shadow: 0 1px 3px rgba(34,52,79,.06); font-size: 11.5px; animation: message-in 260ms cubic-bezier(.16,1,.3,1) both; }
.chat-connection-event p { margin: 0; font-size: 11px; font-weight: 500; line-height: 1.4; }
.chat-connection-event strong { color: var(--text-primary); font-weight: 600; }
.chat-connection-avatar { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 22px; overflow: hidden; border-radius: 50%; color: var(--primary); background: var(--surface); font-size: 9px; font-weight: 700; }
.chat-connection-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Пузырь. `.outgoing` — исходящее (то, что написал текущий зритель), synий фон.
   `.incoming` — входящее, нейтральный светлый. Углы: у пузыря отправителя
   срезан угол, ближайший к нему (нижний правый у исходящего, нижний левый
   у входящего). Раньше .user/.admin означало «кто автор», теперь фронт
   выставляет .outgoing/.incoming в зависимости от точки зрения. Старые
   .user/.admin оставлены как совместимость и мапятся ниже. */
.chat-message {
  position: relative;
  max-width: 72%;
  padding: 8px 12px 6px;
  border: 0;
  border-radius: 12px;
  background: var(--chat-incoming-bg);
  color: var(--chat-incoming-fg);
  box-shadow: 0 1px 2px rgba(30,45,80,.10);
  animation: message-in 220ms cubic-bezier(.22,1,.32,1) both;
  overflow-wrap: anywhere;
}
.chat-message + .chat-message { margin-top: 2px; }
.chat-message.outgoing {
  margin-left: auto;
  background: var(--chat-outgoing-bg);
  color: var(--chat-outgoing-fg);
  border-bottom-right-radius: 4px;
}
.chat-message.incoming {
  margin-right: auto;
  background: var(--chat-incoming-bg);
  color: var(--chat-incoming-fg);
  border-bottom-left-radius: 4px;
}
/* legacy маппинг для пользовательского виджета: user (сам) = outgoing, admin = incoming */
.chat-feed .chat-message.user { margin-left: auto; background: var(--chat-outgoing-bg); color: var(--chat-outgoing-fg); border-bottom-right-radius: 4px; }
.chat-feed .chat-message.admin { margin-right: auto; background: var(--chat-incoming-bg); color: var(--chat-incoming-fg); border-bottom-left-radius: 4px; }
/* legacy маппинг для админ-панели: admin (сам) = outgoing, user = incoming */
.chat-dialog-feed .chat-message.admin { margin-left: auto; margin-right: 0; background: var(--chat-outgoing-bg); color: var(--chat-outgoing-fg); border-bottom-right-radius: 4px; border-bottom-left-radius: 12px; }
.chat-dialog-feed .chat-message.user { margin-right: auto; margin-left: 0; background: var(--chat-incoming-bg); color: var(--chat-incoming-fg); border-bottom-left-radius: 4px; border-bottom-right-radius: 12px; }
.chat-message.compact { max-width: 100%; margin: 0; padding: 9px 10px; }

.message-head { display: none; }
.chat-message p, .chat-message .msg-text {
  margin: 0;
  direction: ltr;
  unicode-bidi: plaintext;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.42;
  text-align: left;
}
.chat-message .msg-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  float: right;
  margin: 6px 0 0 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  user-select: none;
  color: var(--chat-time-in);
}
.chat-message.outgoing .msg-meta,
.chat-feed .chat-message.user .msg-meta,
.chat-dialog-feed .chat-message.admin .msg-meta { color: var(--chat-time-out); }
.chat-message .msg-status { display: inline-flex; align-items: center; transition: color 160ms cubic-bezier(.22,1,.36,1); }
.chat-message .msg-status svg { width: 14px; height: 14px; transition: color 160ms cubic-bezier(.22,1,.36,1), transform 160ms cubic-bezier(.22,1,.36,1); }
.chat-message .msg-status.status-read svg { color: #a4d3ff; }
.chat-message.outgoing .msg-status.status-read svg,
.chat-feed .chat-message.user .msg-status.status-read svg,
.chat-dialog-feed .chat-message.admin .msg-status.status-read svg { color: #cfe8ff; }
.chat-message .msg-status.status-error svg { color: #ff9aa1; }

.chat-day-separator {
  position: sticky;
  top: 5px;
  z-index: 3;
  display: flex;
  justify-content: center;
  margin: 12px 0 9px;
  pointer-events: none;
  animation: message-in 260ms cubic-bezier(.16,1,.3,1) both;
}

.chat-day-separator span {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 12px;
  color: color-mix(in srgb, var(--text) 74%, var(--muted));
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
  backdrop-filter: blur(8px);
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
}
/* Плавная анимация перехода часы → одна галочка → две. Применяется
   только при СМЕНЕ класса статуса — рендер чата с тем же статусом
   не перезапускает её (см. renderChatBubble: сообщения перерисовываются
   только когда сигнатура изменилась). */
.chat-message .msg-status svg { animation: msg-status-in 180ms cubic-bezier(.22,1,.36,1) both; }
@keyframes msg-status-in {
  from { opacity: 0; transform: scale(.72); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-message .msg-status svg { animation: none; }
}
.chat-empty { min-height: 100%; display: grid; place-items: center; padding: 24px; color: var(--muted); text-align: center; }
.chat-empty div { display: grid; justify-items: center; gap: 7px; }
.chat-empty svg { width: 26px; height: 26px; color: var(--blue); }
.chat-empty strong { color: var(--text); font-size: 14px; font-weight: 700; }
.chat-empty p { max-width: 280px; margin: 0; font-size: 11.5px; font-weight: 520; line-height: 1.55; }
.chat-compose { display: grid; grid-template-columns: 1fr 42px; align-items: end; gap: 8px; padding: 11px 12px 13px; border-top: 1px solid #dbe2ea; background: #f8fafc; }
.chat-compose textarea { min-height: 46px; max-height: 126px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 9px; outline: 0; overflow-y: hidden; scrollbar-width: none; background: var(--surface); font-size: 14px; font-weight: 520; line-height: 1.45; resize: none; }
.chat-compose textarea::-webkit-scrollbar, .chat-dialog-compose textarea::-webkit-scrollbar { display: none; width: 0; height: 0; }
.chat-compose textarea:focus, .admin-reply input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(52,120,255,.08); }
.chat-compose button { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; color: #fff; background: var(--blue); cursor: pointer; }
.chat-compose button svg { width: 17px; height: 17px; }

.bottom-nav { display: none; }
/* Раньше фон за модалками был просто плоской тёмной заливкой — добавил лёгкий
   цветной радиальный градиент в тон бренду, чтобы окно подтверждения выплаты,
   выбора банка и первичной настройки выглядели наряднее, а не как голый оверлей. */
/* z-index 220 — выше `.notification-drawer` (180) и `.drawer-scrim` (170),
   иначе confirmAction() открывается ПОД drawer'ом и всё уходит в blur. */
.modal-backdrop { position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: 20px; background: rgba(15,23,42,.58); backdrop-filter: blur(4px) saturate(1.05); -webkit-backdrop-filter: blur(4px) saturate(1.05); animation: fade-in 180ms ease both; }
.modal-card, .onboarding-card { width: min(100%, 440px); padding: 30px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, #fff 0%, #fbfcff 100%); box-shadow: 0 28px 64px rgba(20,30,55,.22), 0 2px 0 rgba(255,255,255,.6) inset; animation: modal-in 260ms cubic-bezier(.2,.8,.2,1) both; }
.modal-card { text-align: center; }
.modal-card h2, .onboarding-card h2 { margin: 13px 0 7px; color: var(--text-strong); font-size: 22px; font-weight: 650; letter-spacing: -.01em; }
.modal-card > p, .onboarding-head p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.modal-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--blue); background: linear-gradient(150deg, var(--blue-soft) 0%, #fff 120%); box-shadow: 0 0 0 6px rgba(52,120,255,.08); }
.modal-card .modal-icon { margin: 0 auto; }
.modal-icon.warning { color: var(--amber); background: linear-gradient(150deg, var(--amber-soft) 0%, #fff 120%); box-shadow: 0 0 0 6px rgba(212,142,29,.08); }
.modal-icon.success { color: var(--green); background: linear-gradient(150deg, var(--green-soft) 0%, #fff 120%); box-shadow: 0 0 0 6px rgba(67,189,79,.08); }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 22px; }
.modal-actions.stacked { grid-template-columns: 1fr; }
.search-start-card { width: min(100%, 500px); text-align: left; overflow: hidden; }
.search-start-card > .eyebrow, .search-start-card > h2, .search-start-card > p { display: block; text-align: center; }
.search-start-orbit { position: relative; width: 62px; height: 62px; display: grid; place-items: center; margin: 0 auto 17px; border-radius: 50%; color: var(--blue); background: #f1f6ff; }
.search-start-orbit::before, .search-start-orbit::after { content: ""; position: absolute; inset: -5px; border: 1px solid rgba(52,120,255,.22); border-radius: 50%; animation: search-orbit-pulse 1.8s ease-out infinite; }
.search-start-orbit::after { animation-delay: .65s; }
.search-start-orbit > span { position: absolute; inset: -7px; border: 2px solid transparent; border-top-color: var(--blue); border-right-color: rgba(52,120,255,.35); border-radius: 50%; animation: search-orbit-spin 1.1s linear infinite; }
.search-start-orbit > span:nth-child(2) { inset: 6px; animation-direction: reverse; animation-duration: 1.6s; opacity: .45; }
.search-start-orbit svg { width: 25px; height: 25px; }
.search-start-card.success .search-start-orbit { color: #2e9e39; background: #edf9ef; }
.search-start-card.success .search-start-orbit > span { border-top-color: #43bd4f; animation: none; }
.search-start-card.failed .search-start-orbit { color: var(--red); background: var(--red-soft); }
.search-start-card.failed .search-start-orbit > span { border-top-color: var(--red); animation: none; }
.search-start-steps { display: grid; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.search-start-steps li { display: grid; grid-template-columns: 38px 1fr 22px; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fafbfd; transition: border-color 220ms ease, background 220ms ease, transform 220ms ease; }
.search-start-steps li > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; color: #8da0bd; background: #f0f3f8; }
.search-start-steps li > span svg { width: 18px; height: 18px; }
.search-start-steps li > div { display: grid; gap: 2px; }
.search-start-steps li strong { color: var(--text); font-size: 12.5px; font-weight: 700; }
.search-start-steps li small { color: var(--muted); font-size: 10px; }
.search-start-steps .stage-state { width: 18px; height: 18px; color: #bdc6d5; }
.search-start-steps li.active { transform: translateX(3px); border-color: #b8cef8; background: #f4f8ff; }
.search-start-steps li.active > span, .search-start-steps li.active .stage-state { color: var(--blue); background: var(--blue-soft); }
.search-start-steps li.active .stage-state { animation: search-orbit-spin .9s linear infinite; }
.search-start-steps li.done { border-color: #cce9cf; background: #f5fbf6; }
.search-start-steps li.done > span, .search-start-steps li.done .stage-state { color: #35a740; background: #eaf7ec; }
.search-start-steps li.failed { border-color: #f1c7ca; background: #fff7f7; }
.search-start-steps li.failed > span, .search-start-steps li.failed .stage-state { color: var(--red); background: var(--red-soft); }
.search-blocked { display: grid; gap: 9px; margin-top: 13px; padding: 12px; border: 1px solid #f0c7ca; border-radius: 8px; background: #fff8f8; }
.search-blocked-head { display: flex; align-items: center; gap: 9px; }
.search-blocked-head > svg { width: 19px; height: 19px; color: var(--red); }
.search-blocked-head > div { display: grid; gap: 1px; }
.search-blocked-head strong { font-size: 12px; }
.search-blocked-head small { color: var(--muted); font-size: 9.5px; }
.search-blocked-list { max-height: 145px; display: grid; gap: 6px; overflow-y: auto; }
.search-blocked-item { display: grid; gap: 2px; padding: 8px 9px; border-radius: 6px; background: #fff; }
.search-blocked-item code { overflow-wrap: anywhere; color: #34435f; font-size: 10px; }
.search-blocked-item small { color: #b33f46; font-size: 9.5px; line-height: 1.4; }
.search-review { display: grid; gap: 10px; margin-top: 13px; padding: 12px; border: 1px solid #ecd69f; border-radius: 8px; background: #fffbf1; }
.search-review-head { display: flex; align-items: center; gap: 9px; }
.search-review-head > svg { width: 19px; height: 19px; color: #b87911; }
.search-review-head > div { display: grid; gap: 2px; }
.search-review-head strong { color: #5b431c; font-size: 12px; }
.search-review-head small { color: #8a7045; font-size: 9.5px; line-height: 1.4; }
.search-review-list { max-height: 230px; display: grid; gap: 7px; overflow-y: auto; }
.search-review-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid #eee2c5; border-radius: 7px; background: var(--surface); }
.search-review-copy { min-width: 0; display: grid; gap: 3px; }
.search-review-copy code { overflow: hidden; color: #34435f; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.search-review-copy small { color: #8a7045; font-size: 9.5px; }
.search-review-actions { display: flex; gap: 6px; }
.search-review-actions .button { min-height: 31px; padding: 0 10px; font-size: 9.5px; }
.search-review-actions .button svg { width: 14px; height: 14px; }
.search-start-actions { margin-top: 14px; }
@keyframes search-orbit-spin { to { transform: rotate(360deg); } }
@keyframes search-orbit-pulse { 0% { opacity: .7; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.35); } }
.confirmation-sheet { width: min(calc(100vw - 32px), 680px); max-height: min(92vh, 840px); padding: 26px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 24px 64px rgba(20,30,55,.2); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; animation: modal-in 300ms cubic-bezier(.16,1,.3,1) both; }
.confirmation-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.confirmation-head h2 { margin: 0; color: var(--text-strong); font-size: 22px; font-weight: 650; letter-spacing: -.01em; }
.confirmation-head p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.confirmation-deadline { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 14px; margin: 20px 0; padding: 14px 16px; border: 1px solid #d6e2f7; border-radius: 10px; background: linear-gradient(180deg, #f7faff 0%, #eef4ff 100%); }
.confirmation-deadline > span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.confirmation-deadline > span svg { width: 16px; height: 16px; color: var(--blue); }
.confirmation-deadline strong { grid-column: 1; color: #31415e; font-size: 15px; font-variant-numeric: tabular-nums; }
.confirmation-deadline small { grid-column: 2; grid-row: 1 / span 2; color: var(--blue); font-family: "Cascadia Mono", Consolas, monospace; font-size: 14px; font-weight: 700; }
.confirmation-field { min-width: 0; display: grid; gap: 9px; margin-top: 18px; text-align: left; }
.confirmation-field > span { font-size: 12px; font-weight: 650; }
.confirmation-field > small { color: var(--muted); font-size: 10px; }
.select-shell { height: 48px; display: grid; grid-template-columns: 20px 1fr 16px; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; transition: border-color 180ms ease, box-shadow 180ms ease; }
.select-shell:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(52,120,255,.08); }
.select-shell > svg { width: 17px; height: 17px; color: var(--blue); }
.select-shell > svg:last-child { color: var(--muted); pointer-events: none; }
.select-shell select { width: 100%; height: 100%; border: 0; outline: 0; appearance: none; color: var(--text); background: transparent; cursor: pointer; }
.confirmation-proof, .confirmation-email { display: grid; gap: 12px; margin-top: 18px; }
.proof-drop { min-height: 122px; display: grid; place-items: center; align-content: center; gap: 6px; padding: 18px; border: 1px dashed #b9c8e2; border-radius: 7px; color: var(--blue); background: #f8faff; cursor: pointer; text-align: center; transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; }
.proof-drop:hover { transform: translateY(-1px); border-color: var(--blue); background: var(--surface-blue); }
.proof-drop > svg { width: 25px; height: 25px; }
.proof-drop strong { color: #34435f; font-size: 13px; }
.proof-drop span { color: var(--muted); font-size: 10px; }
.proof-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.proof-list { display: grid; gap: 7px; }
.proof-item { min-width: 0; display: grid; grid-template-columns: 32px 1fr 34px; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); }
.proof-item > span:first-child { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; color: var(--blue); background: var(--blue-soft); }
.proof-item svg { width: 16px; height: 16px; }
.proof-item div { min-width: 0; display: grid; gap: 2px; }
.proof-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.proof-item small { color: var(--muted); font-size: 9px; }
.proof-remove { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; color: var(--red); background: transparent; cursor: pointer; }
.confirmation-method { display: flex; align-items: center; gap: 8px; color: #33425d; font-size: 13px; font-weight: 650; }
.confirmation-method svg { width: 19px; height: 19px; color: var(--blue); }
.confirmation-email > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.mailbox-result { display: grid; gap: 9px; padding-top: 5px; }
.mailbox-result > span { color: var(--muted); font-size: 10px; }
.confirmation-status { margin-top: 14px; padding: 10px 12px; border-radius: 7px; color: #217c2a; background: var(--green-soft); font-size: 11px; line-height: 1.5; }
.confirmation-status.error { color: #ae3037; background: var(--red-soft); }

.verification-sheet { width: min(100%, 540px); max-height: min(90vh, 760px); overflow-y: auto; padding: 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 28px 64px rgba(20,30,55,.22); animation: modal-in 280ms cubic-bezier(.16,1,.3,1) both; }
.verification-stage { min-height: 112px; display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 18px; margin-top: 20px; padding: 18px; border: 1px solid #d9e4f6; border-radius: 8px; background: #f6f9ff; text-align: left; transition: border-color 220ms ease, background 220ms ease; }
.verification-stage.success { border-color: #c9e8cc; background: #f2fbf3; }
.verification-stage.failed { border-color: #f0ced1; background: #fff5f5; }
.verification-stage.warning { border-color: #f3d59a; background: #fffaf0; }
.verification-orbit { position: relative; width: 58px; height: 58px; display: grid; place-items: center; color: var(--blue); }
.verification-orbit > span { position: absolute; inset: 0; border: 2px solid transparent; border-top-color: var(--blue); border-right-color: rgba(52,120,255,.35); border-radius: 50%; animation: verification-spin 1.05s linear infinite; }
.verification-orbit > span:nth-child(2) { inset: 7px; border-top-color: transparent; border-right-color: transparent; border-bottom-color: #69b99a; animation-duration: 1.45s; animation-direction: reverse; }
.verification-orbit > svg { width: 22px; height: 22px; animation: verification-breathe 1.8s ease-in-out infinite; }
.verification-stage.success .verification-orbit > span, .verification-stage.failed .verification-orbit > span { animation-play-state: paused; border-color: transparent; }
.verification-stage.warning .verification-orbit > span { animation-play-state: paused; border-color: transparent; }
.verification-stage.success .verification-orbit { color: var(--green); }
.verification-stage.failed .verification-orbit { color: var(--red); }
.verification-stage.warning .verification-orbit { color: #c77d18; }
.verification-stage-copy { min-width: 0; }
.verification-attempt { display: inline-flex; align-items: center; min-height: 22px; margin-bottom: 7px; padding: 0 8px; border: 1px solid #cddcf5; border-radius: 5px; color: #52709e; background: #eef4ff; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.verification-stage-copy strong { display: block; color: #26334d; font-size: 15px; font-weight: 700; }
.verification-stage-copy p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.verification-facts { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: 12px; }
.verification-facts > div { min-width: 0; display: grid; gap: 5px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); }
.verification-facts span { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.verification-facts code, .verification-facts strong { overflow: hidden; color: #2a3752; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.verification-captcha { display: grid; gap: 12px; margin-top: 16px; text-align: left; }
.verification-captcha > label { display: grid; gap: 4px; }
.verification-captcha > label span { color: #293650; font-size: 13px; font-weight: 700; }
.verification-captcha > label small { color: var(--muted); font-size: 10px; }
.captcha-image-frame { min-height: 112px; display: grid; place-items: center; padding: 14px; border: 1px solid #d6e2f7; border-radius: 8px; background: #f7faff; }
.captcha-image-frame img { display: block; max-width: 100%; max-height: 116px; image-rendering: auto; }
.captcha-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.captcha-entry input { min-width: 0; height: 44px; padding: 0 13px; border: 1px solid var(--line); border-radius: 7px; outline: 0; color: var(--text); background: var(--surface); font: 700 15px/1 "Cascadia Mono", Consolas, monospace; }
.captcha-entry input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(52,120,255,.09); }
.captcha-entry .button { height: 44px; white-space: nowrap; }
.verification-result { display: grid; justify-items: center; gap: 7px; margin-top: 16px; padding: 18px; border: 1px solid #c9e8cc; border-radius: 8px; background: #f2fbf3; text-align: center; }
.verification-result.failed { border-color: #f0ced1; background: #fff5f5; }
.verification-result-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: #e4f6e6; }
.verification-result.failed .verification-result-icon { color: var(--red); background: #fde6e8; }
.verification-result-icon svg { width: 20px; height: 20px; }
.verification-result strong { color: #25324b; font-size: 15px; }
.verification-result p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.verification-result code { padding: 5px 8px; border-radius: 5px; color: #365277; background: #edf3fc; font-size: 11px; }
.verification-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.verification-footer > span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.verification-footer > span svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--blue); }
.verification-footer .button { flex: 0 0 auto; }
.verification-footer-actions { display: flex; flex: 0 0 auto; gap: 8px; }
@keyframes verification-spin { to { transform: rotate(360deg); } }
@keyframes verification-breathe { 0%, 100% { transform: scale(.92); opacity: .72; } 50% { transform: scale(1.08); opacity: 1; } }

@media (max-width: 600px) {
  .verification-sheet { padding: 20px 16px; border-radius: 12px 12px 0 0; }
  .verification-stage { grid-template-columns: 52px 1fr; gap: 13px; padding: 14px; }
  .verification-orbit { width: 48px; height: 48px; }
  .verification-facts { grid-template-columns: 1fr 1fr; }
  .verification-facts > div:last-child { grid-column: 1 / -1; }
  .captcha-entry { grid-template-columns: 1fr; }
  .captcha-entry .button { width: 100%; }
  .verification-footer { align-items: stretch; flex-direction: column; }
  .verification-footer-actions { display: grid; grid-template-columns: 1fr; }
  .verification-footer .button { width: 100%; }
}

/* Реквизиты выплаты: спокойная рабочая панель вместо декоративной имитации карты. */
.payout-requisites { min-width: 0; display: grid; margin: 16px 0 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface-soft); }
.payout-requisites-head { min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 13px 14px; border-bottom: 1px solid var(--line); }
.payout-requisites-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; color: var(--blue); background: var(--surface); }
.payout-requisites-icon svg { width: 18px; height: 18px; }
.payout-requisites-bank { min-width: 0; display: grid; gap: 3px; }
.payout-requisites small { color: var(--muted); font-size: 9px; font-weight: 650; text-transform: uppercase; }
.payout-requisites-bank strong { overflow: hidden; color: var(--text); font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.payout-requisites-amount { padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--text); background: var(--surface); font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.payout-requisites-number { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 36px; align-items: center; gap: 12px; padding: 13px 14px; }
.payout-requisites-number > div { min-width: 0; display: grid; gap: 5px; }
.payout-requisites-number code { min-width: 0; overflow: hidden; color: var(--text); font: 700 18px/1.25 "Cascadia Mono", Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.payout-requisites-copy { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 7px; color: var(--blue); background: var(--surface); cursor: pointer; transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease; }
.payout-requisites-copy svg { width: 16px; height: 16px; }
.payout-requisites-copy:hover { border-color: var(--blue); background: var(--blue-soft); transform: translateY(-1px); }
.payout-requisites-copy:active { transform: none; }

/* ── Отклик на копирование (карта, почта, токены) — пульс кнопки + кольцо + смена
   иконки на галочку на пару секунд, чтобы сам факт копирования было заметно, а не
   только тост снизу ───────────────────────────────────────────────────────────── */
.copy-flash { position: relative; animation: copy-pop 480ms cubic-bezier(.16,1,.3,1); }
@keyframes copy-pop { 0% { transform: scale(1); } 42% { transform: scale(1.12); } 100% { transform: scale(1); } }
.copy-flash::after {
  content: ""; position: absolute; inset: -7px; border-radius: inherit;
  border: 2px solid var(--green); opacity: 0; pointer-events: none;
  animation: copy-ring 700ms ease-out;
}
@keyframes copy-ring { 0% { opacity: .85; transform: scale(.82); } 100% { opacity: 0; transform: scale(1.3); } }
.payout-requisites-copy.copy-flash { color: #217c2a; background: var(--green-soft); border-color: #b9e8bf; }
.copy-field.copy-flash, .issued-token.copy-flash { color: #217c2a; background: var(--green-soft); border-color: #b9e8bf; }
button.copy-flash.button { color: #217c2a; background: var(--green-soft); border-color: #b9e8bf; }

/* ── Иконки банков вместо голого <select> ─────────────────────────────────────── */
#confirmation-bank-search-wrap { width: 100%; min-width: 0; border-color: var(--line); border-radius: 7px; background: var(--surface-soft); }
#confirmation-bank-search-wrap input { min-width: 0; width: 100%; font-size: 12px; }
#confirmation-bank-picker.bank-picker { min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 188px; overflow-x: hidden; overflow-y: auto; padding: 2px 5px 2px 0; border-top: 0; overscroll-behavior: contain; scrollbar-gutter: stable; }
.bank-chip { position: relative; min-width: 0; min-height: 52px; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); cursor: pointer; text-align: left; transition: transform 180ms cubic-bezier(.16,1,.3,1), border-color 180ms ease, box-shadow 180ms ease, background 180ms ease; }
.bank-chip:hover { transform: translateY(-1px); border-color: #bfcff0; box-shadow: 0 6px 16px rgba(38,54,88,.08); }
.bank-chip:disabled { cursor: default; opacity: .75; }
.bank-chip:disabled:hover { transform: none; box-shadow: none; }
.bank-chip.selected { border-color: var(--blue); background: var(--surface-blue); box-shadow: 0 0 0 3px rgba(52,120,255,.12); animation: bank-pick 260ms cubic-bezier(.16,1,.3,1) both; }
.bank-chip-icon { position: relative; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); overflow: hidden; }
.bank-chip-icon img { width: 100%; height: 100%; object-fit: contain; }
.bank-chip-fallback { display: grid; place-items: center; width: 100%; height: 100%; color: var(--blue-strong); background: var(--blue-soft); font-size: 13px; font-weight: 750; }
.bank-chip-icon.has-logo .bank-chip-fallback { display: none; }
.bank-chip-icon.has-logo.logo-failed img { display: none; }
.bank-chip-icon.has-logo.logo-failed .bank-chip-fallback { display: grid; }
.bank-chip-name { min-width: 0; display: -webkit-box; overflow: hidden; color: var(--text); font-size: 10.5px; font-weight: 650; line-height: 1.3; text-align: left; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.bank-chip-mail { position: absolute; top: 5px; right: 5px; width: 11px; height: 11px; color: var(--blue); }
.bank-chip-empty { grid-column: 1 / -1; padding: 14px; color: var(--muted); font-size: 11px; text-align: center; }
@keyframes bank-pick { 0% { transform: scale(.96); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }

/* ── Плашка текущего статуса выплаты в модалке ("ожидает оплаты" / "успешна" и т.д.) ── */
.confirmation-state-pill { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 6px 11px; border-radius: 999px; font-size: 11px; font-weight: 650; }
.confirmation-state-pill svg { width: 13px; height: 13px; }
.confirmation-state-pill.tone-amber { color: #a4670b; background: var(--amber-soft); }
.confirmation-state-pill.tone-amber svg { animation: live-pulse 1.6s ease-in-out infinite; }
.confirmation-state-pill.tone-success { color: #217c2a; background: var(--green-soft); }
.confirmation-state-pill.tone-neutral { color: var(--muted); background: var(--surface-soft); }
#payout-confirmation-modal.read-only #confirmation-mini-card { animation: none; }

/* ── История выплат: карточка кликабельна, ведёт в детали заявки ─────────────────── */
.history-item.clickable { cursor: pointer; padding-right: 40px; transition: transform 200ms cubic-bezier(.16,1,.3,1), box-shadow 200ms ease, border-color 200ms ease; }
.history-item.clickable:hover, .history-item.clickable:focus-visible { transform: translateY(-2px); border-color: #c8d8f5; box-shadow: 0 10px 26px rgba(38,54,88,.08); outline: none; }
.history-open-hint { position: absolute; top: 50%; right: 14px; width: 16px; height: 16px; color: var(--muted-2); transform: translateY(-50%); }
.history-item { position: relative; }
.copy-field { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 9px; margin-top: 17px; padding: 10px 12px; border: 1px solid #cedcff; border-radius: 7px; color: var(--blue-strong); background: var(--surface-blue); cursor: pointer; }
.copy-field code { min-width: 0; flex: 1; overflow-wrap: anywhere; text-align: left; font-size: 12px; }
.onboarding-card { width: min(100%, 620px); text-align: left; }
.onboarding-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 26px; }
.onboarding-head h2 { margin-top: 0; }
.onboarding-head .eyebrow { letter-spacing: .07em; }
.onboarding-head .modal-icon { flex: 0 0 auto; }
.onboarding-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 14px 0 4px; }
.onboarding-trademo { margin: 16px 0 18px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #f7f9fc; }
.onboarding-option { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 10px; cursor: pointer; }
.onboarding-option > input { position: absolute; opacity: 0; pointer-events: none; }
.onboarding-check { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #cbd5e5; border-radius: 6px; color: transparent; background: var(--surface); transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease; }
.onboarding-check svg { width: 15px; height: 15px; stroke-width: 3; }
.onboarding-option > input:checked + .onboarding-check { color: #fff; border-color: var(--blue); background: var(--blue); transform: scale(1.03); }
.onboarding-option > input:focus-visible + .onboarding-check { outline: 3px solid rgba(52,120,255,.18); outline-offset: 2px; }
.onboarding-option > span:last-child { display: grid; gap: 4px; }
.onboarding-option strong { font-size: 13px; }
.onboarding-option small, .onboarding-trademo-link > small { color: var(--muted); font-size: 10.5px; line-height: 1.5; }
.onboarding-trademo-link { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); animation: panel-in 240ms cubic-bezier(.16,1,.3,1) both; }

.payout-methods-section { align-items: flex-start; flex-direction: column; }
.payout-methods-section > .settings-copy { width: 100%; }
.payout-option-grid { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.payout-option { min-width: 0; min-height: 62px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: var(--surface); text-align: left; cursor: pointer; transition: transform 180ms cubic-bezier(.2,.8,.2,1), border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; }
.payout-option:hover { transform: translateY(-1px); border-color: #c8d6ee; box-shadow: 0 5px 16px rgba(40,69,120,.06); }
.payout-option[aria-pressed="true"] { border-color: #b9cdf2; background: #f4f8ff; }
.payout-option-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; color: #73839f; background: #f1f4f8; transition: color 180ms ease, background-color 180ms ease; }
.payout-option-icon svg { width: 17px; height: 17px; }
.payout-option[aria-pressed="true"] .payout-option-icon { color: var(--blue); background: #e5efff; }
.payout-option > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.payout-option strong { overflow: hidden; font-size: 11px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.payout-option small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.option-state { min-width: 38px; padding: 5px 6px; border-radius: 5px; color: #7b8799; background: #eef1f5; font-size: 8px; font-weight: 750; text-align: center; }
.payout-option[aria-pressed="true"] .option-state { color: #245fbf; background: #dce9ff; }

.toast { position: fixed; z-index: 150; right: 24px; bottom: 24px; max-width: min(360px, calc(100vw - 32px)); padding: 12px 15px; border: 1px solid #c8e9cb; border-radius: 7px; color: #24752c; background: #f3fbf4; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 180ms ease, transform 220ms ease; font-size: 13px; }
.toast.visible { opacity: 1; transform: translateY(0); }
.toast.error { color: #b92e35; border-color: #f2c8ca; background: #fff5f5; }
.notification-button { position: relative; }
.notification-count { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; border: 2px solid #fff; border-radius: 9px; color: #fff; background: var(--red); font-size: 9px; font-weight: 700; }
.searching-indicator { position: relative; color: var(--blue); border-color: #bfd0f7; background: var(--blue-soft); }
.searching-indicator:hover { color: #fff; background: var(--blue); border-color: var(--blue); }
.searching-indicator .searching-pulse { position: absolute; inset: -3px; border-radius: 10px; border: 2px solid var(--blue); opacity: 0; animation: searching-pulse 1.6s ease-out infinite; pointer-events: none; }
.searching-indicator:hover .searching-pulse { border-color: #fff; }
.searching-count { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; border: 2px solid #fff; border-radius: 9px; color: #fff; background: var(--blue); font-size: 9px; font-weight: 700; }
@keyframes searching-pulse {
  0% { transform: scale(0.9); opacity: 0.55; }
  70% { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}
.notification-drawer { position: fixed; inset: 0 0 0 auto; z-index: 180; width: min(420px, 94vw); padding: 24px; border-left: 1px solid var(--line); background: var(--surface); box-shadow: -20px 0 60px rgba(30,48,84,.14); animation: drawer-in 340ms cubic-bezier(.16,1,.3,1) both; overflow-y: auto; }
.drawer-scrim { position: fixed; inset: 0; z-index: 170; background: rgba(28,39,60,.24); backdrop-filter: blur(3px); animation: fade-in 180ms ease both; }
.drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 20px; }
.drawer-head h2 { margin: 0; font-size: 23px; }
.notification-list { display: grid; gap: 9px; }
.notification-item { position: relative; display: flex; gap: 11px; padding: 13px 38px 13px 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); animation: notification-in 220ms ease; transition: opacity 200ms ease, transform 200ms ease, max-height 200ms ease, margin 200ms ease, padding 200ms ease; overflow: hidden; }
.notification-item.unread { border-color: #cbdcff; background: #f7faff; }
.notification-item.dismissing { opacity: 0; transform: translateX(18px) scale(.97); max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
.notification-dismiss { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; color: var(--muted-2); background: transparent; cursor: pointer; opacity: .55; transition: opacity 150ms ease, color 150ms ease, background 150ms ease; }
.notification-dismiss svg { width: 13px; height: 13px; }
/* :hover never fires on touch screens, so the button used to stay invisible
   there — it now sits visible at reduced opacity and brightens on hover/tap. */
.notification-item:hover .notification-dismiss, .notification-dismiss:focus-visible, .notification-dismiss:active { opacity: 1; }
.notification-dismiss:hover { color: var(--red); background: var(--red-soft); }
@keyframes notification-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.notification-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; color: var(--blue); background: var(--blue-soft); }
.notification-icon svg { width: 17px; height: 17px; }
.notification-item.error .notification-icon { color: var(--red); background: var(--red-soft); }
.notification-item.success .notification-icon { color: var(--green); background: var(--green-soft); }
.notification-item.broadcast .notification-icon { color: #a4670b; background: var(--amber-soft); }
.notification-item > div { min-width: 0; }
.notification-item strong { display: block; font-size: 12px; }
.notification-item p { margin: 4px 0; overflow-wrap: anywhere; color: var(--muted); font-size: 11px; line-height: 1.45; }
.notification-item time { color: var(--muted-2); font-size: 9px; }
.drawer-empty { min-height: 320px; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--muted); text-align: center; }
.drawer-empty svg { width: 28px; height: 28px; }
.drawer-empty strong { color: var(--text); }
.drawer-empty span { max-width: 260px; font-size: 11px; line-height: 1.5; }
.boot-screen { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; background: #f1f5fd; transition: opacity 320ms ease, visibility 320ms ease; }
.boot-screen.dismissed { opacity: 0; visibility: hidden; transform: scale(1.02); }
.boot-screen .brand-symbol.large { animation: boot-pulse 1.7s ease-in-out infinite; }
.boot-screen strong { margin-top: 14px; font-size: 20px; animation: boot-fade-up 480ms 80ms ease both; }
.boot-screen > span:not(.brand-symbol) { margin-top: 5px; color: var(--muted); font-size: 12px; animation: boot-fade-up 480ms 160ms ease both; }
@keyframes boot-pulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(52,120,255,0)); } 50% { transform: scale(1.08); filter: drop-shadow(0 0 14px rgba(52,120,255,.35)); } }
@keyframes boot-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.boot-line { position: relative; width: 150px; height: 3px; margin-top: 22px; border-radius: 2px; background: #dae4f5; overflow: hidden; }
.boot-line::after { content: ""; position: absolute; width: 45%; height: 100%; background: var(--blue); animation: boot 1.1s ease-in-out infinite; }

@keyframes auth-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes panel-in { from { opacity: 0; transform: translateX(14px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes view-in { from { opacity: 0; transform: translateY(10px) scale(.995); } to { opacity: 1; transform: none; } }
@keyframes row-in { from { opacity: 0; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes bar-rise { from { transform: scaleY(0); opacity: .4; } to { transform: scaleY(1); opacity: 1; } }
@keyframes message-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes chat-open { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
/* iOS-подобный spring easing — плавный, без рывка в конце. `.4,0,1,1` из
   старого варианта — это по сути линейно ускоряющееся движение (ease-in),
   поэтому в браузере закрытие «дёргалось». Меняем на выразительный
   material-standard-decelerate для входа и symmetric spring для выхода. */
@keyframes drawer-in  { from { opacity: 0; transform: translate3d(28px,0,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes fade-in    { from { opacity: 0; } }
@keyframes fade-out   { to   { opacity: 0; } }
@keyframes modal-in   { from { opacity: 0; transform: translate3d(0,10px,0) scale(.985); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
@keyframes modal-out  { to   { opacity: 0; transform: translate3d(0,6px,0) scale(.985); } }
@keyframes drawer-out { to   { opacity: 0; transform: translate3d(24px,0,0); } }

/* Раньше закрытие модалок/шторки уведомлений было мгновенным (display:none без
   перехода) — экран будто "дёргался". Класс .closing проигрывает обратную
   анимацию перед тем, как элемент скрывается через .hidden (см. closeModal() в app.js). */
.modal-backdrop, .notification-drawer,
.modal-backdrop .modal-card, .modal-backdrop .confirmation-sheet,
.modal-backdrop .token-settings-sheet, .modal-backdrop .verification-sheet,
.modal-backdrop .onboarding-card { will-change: transform, opacity; backface-visibility: hidden; }

.modal-backdrop.closing { animation: fade-out 220ms cubic-bezier(.32,.72,.35,1) both; }
.modal-backdrop.closing .confirmation-sheet,
.modal-backdrop.closing .modal-card,
.modal-backdrop.closing .token-settings-sheet,
.modal-backdrop.closing .verification-sheet,
.modal-backdrop.closing .onboarding-card {
  animation: modal-out 260ms cubic-bezier(.32,.72,.35,1) both;
}
.notification-drawer.closing { animation: drawer-out 300ms cubic-bezier(.32,.72,.35,1) both; }
.drawer-scrim.closing { animation: fade-out 240ms cubic-bezier(.32,.72,.35,1) both; }

/* Уважаем пользовательскую настройку "уменьшить движение" — критично для
   iOS Safari + системных настроек accessibility, чтобы не подкидывало
   сердце людям, у которых стоит reduce-motion. */
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop, .modal-backdrop.closing, .notification-drawer,
  .notification-drawer.closing, .drawer-scrim.closing,
  .modal-backdrop .modal-card, .modal-backdrop .confirmation-sheet,
  .modal-backdrop .token-settings-sheet, .modal-backdrop .verification-sheet,
  .modal-backdrop .onboarding-card {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
  }
}
.drawer-scrim.closing { animation: fade-out 180ms ease both; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes live-pulse { 50% { opacity: .35; } }
@keyframes soft-pulse { 50% { transform: scale(.985); opacity: .86; } }
@keyframes boot { from { transform: translateX(-110%); } to { transform: translateX(330%); } }

/* ── Auth: guided steps, waiting state and the success animation ─────────── */
.register-telegram-label { margin-top: 14px; }
.auth-icon.warning { color: var(--amber); background: var(--amber-soft); }
.auth-steps { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.auth-steps li { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); }
.auth-steps li > span { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; color: var(--blue); background: var(--blue-soft); font-size: 12px; font-weight: 700; }
.auth-steps li.done > span { color: #278c31; background: var(--green-soft); }
.auth-steps li.done { border-color: #cceecf; background: var(--green-soft); }
.auth-steps li.current { border-color: #bfd2f8; background: var(--surface-blue); }
.auth-steps li > span svg { width: 15px; height: 15px; }
.auth-steps strong { display: block; font-size: 13px; }
.auth-steps small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.auth-steps.compact-steps li { padding: 9px 11px; }
.approval-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 16px; }
.approval-track i { height: 4px; border-radius: 3px; background: var(--line-strong); }
.approval-track i.done { background: var(--green); }
.approval-track i.pending { background: linear-gradient(90deg, var(--blue) 0 40%, var(--line-strong) 40% 100%); background-size: 220% 100%; animation: track-slide 1600ms ease-in-out infinite; }
.link-expected { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.link-expected b { color: var(--text); }

.login-success { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: rgba(241, 245, 253, .92); backdrop-filter: blur(8px); opacity: 1; transition: opacity 320ms ease; }
.login-success.leaving { opacity: 0; }
.login-success-card { display: grid; justify-items: center; gap: 10px; padding: 40px 44px; border: 1px solid rgba(226,231,240,.9); border-radius: 12px; background: var(--surface); box-shadow: 0 30px 80px rgba(39,66,124,.14); text-align: center; animation: success-pop 460ms cubic-bezier(.16,1,.3,1) both; }
.login-success-card strong { font-size: 20px; color: #153a82; }
.login-success-card > span { color: var(--muted); font-size: 13px; }
.success-ring { position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--green-soft); }
.success-ring svg { width: 52px; height: 52px; }
.success-ring .ring-pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--green); opacity: 0; }
.login-success.playing .ring-pulse { animation: ring-pulse 1200ms cubic-bezier(.16,1,.3,1) 240ms 1 both; }
.success-circle { fill: none; stroke: var(--green); stroke-width: 2.4; stroke-dasharray: 145; stroke-dashoffset: 145; }
.success-check { fill: none; stroke: var(--green); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 44; stroke-dashoffset: 44; }
.login-success.playing .success-circle { animation: draw-circle 520ms cubic-bezier(.65,0,.45,1) both; }
.login-success.playing .success-check { animation: draw-check 340ms cubic-bezier(.65,0,.45,1) 420ms both; }
.success-line { width: 128px; height: 3px; margin-top: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--green-soft), var(--green), var(--green-soft)); background-size: 220% 100%; animation: track-slide 1400ms linear infinite; }

@keyframes draw-circle { to { stroke-dashoffset: 0; } }
@keyframes draw-check { to { stroke-dashoffset: 0; } }
@keyframes ring-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes success-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes track-slide { 0% { background-position: 120% 0; } 100% { background-position: -20% 0; } }

/* ── Admin shell ─────────────────────────────────────────────────────────── */
.admin-shell { min-height: 100vh; background: var(--bg); }
.admin-sidebar .brand-symbol { background: #153a82; box-shadow: 0 7px 16px rgba(21,58,130,.24); }
.nav-badge { min-width: 20px; height: 20px; display: grid; place-items: center; margin-left: auto; padding: 0 6px; border-radius: 10px; color: #fff; background: var(--red); font-size: 10px; font-weight: 700; }
.bottom-nav.admin-bottom-nav { grid-template-columns: repeat(6, 1fr); }
.admin-content { width: min(100%, 1320px); }
.admin-overview-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 18px; }
.admin-panel { padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.admin-panel .section-heading { margin-bottom: 16px; }
.admin-mini-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.admin-mini-stats .admin-stat { padding: 11px; background: var(--surface-soft); }
.admin-mini-stats .admin-stat strong { font-size: 18px; }
.text-button.inline { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 12px; font-weight: 600; }
.text-button.inline svg { width: 15px; height: 15px; }

.admin-users { display: grid; gap: 12px; }
.admin-users.compact { gap: 9px; }
.admin-user.compact { padding: 13px; background: var(--surface-soft); }
.admin-status.pending { color: #a86a08; background: var(--amber-soft); }
.admin-status.banned { color: #c73b42; background: var(--red-soft); }
.match-reason { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; color: var(--blue); font-size: 11px; font-weight: 600; }
.match-reason svg { width: 14px; height: 14px; }
.token-fingerprint { display: inline-flex; align-items: center; gap: 7px; margin-top: 11px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: var(--surface-soft); font-size: 11px; }
.token-fingerprint svg { width: 14px; height: 14px; color: var(--blue); }
.matched-tokens { display: grid; gap: 6px; margin-top: 10px; }
.admin-actions { flex-wrap: wrap; }
.admin-actions .button { min-height: 36px; padding: 0 12px; font-size: 12px; }
.admin-user-limits { margin-top: 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); overflow: hidden; }
.admin-user-limits summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; min-height: 44px; padding: 9px 12px; cursor: pointer; list-style: none; transition: background 160ms ease, color 160ms ease; }
.admin-user-limits summary::-webkit-details-marker { display: none; }
.admin-user-limits summary:hover { background: var(--blue-soft); }
.admin-limit-title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.admin-limit-title svg { width: 16px; height: 16px; color: var(--blue); }
.admin-limit-title strong { font-size: 12px; }
.admin-user-limits summary small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.admin-limit-chevron { width: 16px; height: 16px; color: var(--muted); transition: transform 180ms ease; }
.admin-user-limits[open] .admin-limit-chevron { transform: rotate(180deg); }
.admin-limit-form { display: grid; grid-template-columns: minmax(180px, 320px) auto; align-items: end; gap: 10px; padding: 12px; border-top: 1px solid var(--line); background: var(--surface); }
.admin-limit-form label { display: grid; gap: 6px; min-width: 0; }
.admin-limit-form label span { color: var(--muted); font-size: 10px; font-weight: 650; }
.admin-limit-form input { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-soft); color: var(--text); font: inherit; font-size: 12px; font-weight: 600; outline: none; transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.admin-limit-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(52, 120, 255, .12); background: var(--surface); }
.admin-limit-save { min-height: 38px; padding: 0 14px; }

.recent-chat { width: 100%; display: flex; align-items: center; gap: 11px; padding: 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); cursor: pointer; text-align: left; transition: border-color 170ms ease, background 170ms ease, transform 170ms ease; }
.recent-chat:hover { border-color: #bfd0f7; background: var(--blue-soft); transform: translateY(-1px); }
.recent-chat + .recent-chat { margin-top: 8px; }
.recent-chat-copy { min-width: 0; flex: 1; display: grid; gap: 2px; }
.recent-chat-copy strong { font-size: 13px; }
.recent-chat-copy small, .thread-copy small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.recent-chat-meta, .thread-meta { display: grid; justify-items: end; gap: 4px; flex: 0 0 auto; color: var(--muted-2); font-size: 10px; }
.recent-chat-meta b, .thread-meta b { min-width: 18px; padding: 2px 5px; border-radius: 9px; color: #fff; background: var(--red); font-size: 10px; text-align: center; }
.thread-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 8px; overflow: hidden; color: var(--blue); background: #e7edfa; font-size: 12px; font-weight: 700; }
.thread-avatar.has-image { background: #eef1f6; }
.thread-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Admin chats: full-height thread list + open dialog ──────────────────── */
.admin-chats-view.active { display: flex; flex-direction: column; }
body.admin-chats-open .admin-content { padding-bottom: 30px; }
.chat-workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(280px, 350px) minmax(0, 1fr); gap: 16px; height: calc(100vh - 190px); min-height: 540px; }
.chat-threads { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.thread-list { min-height: 0; display: grid; align-content: start; gap: 6px; overflow-y: auto; }
.thread { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; cursor: pointer; text-align: left; transition: background 160ms ease, border-color 160ms ease; }
.thread:hover { background: var(--surface-soft); }
.thread.active { border-color: #bfd2f8; background: var(--surface-blue); }
.thread-copy { min-width: 0; flex: 1; display: grid; gap: 2px; }
.thread-copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.chat-dialog { position: relative; min-width: 0; min-height: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: hidden; }
.chat-dialog-empty { height: 100%; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 30px; color: var(--muted); text-align: center; }
.chat-dialog-empty strong { color: var(--text); font-size: 16px; }
.chat-dialog-empty p { max-width: 320px; margin: 0; font-size: 13px; line-height: 1.55; }
.empty-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: var(--blue); background: var(--blue-soft); }
.empty-icon svg { width: 24px; height: 24px; }
.chat-dialog-body { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
.chat-dialog-head { min-width: 0; display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.chat-dialog-head > div:not(.chat-dialog-actions) { min-width: 0; display: grid; gap: 2px; }
.chat-dialog-head strong, .chat-dialog-head small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-dialog-head strong { font-size: 14px; }
.chat-dialog-head small { color: var(--muted); font-size: 11px; }
.chat-dialog-back { display: none; }
.chat-dialog-actions { margin-left: auto; }
.chat-dialog-actions .admin-actions { margin-top: 0; justify-content: flex-end; }
.chat-dialog-actions .button { min-height: 32px; padding: 0 10px; font-size: 11px; }
.chat-dialog-feed { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; padding: 22px 24px; overflow-y: auto; background: #e7edf3; scroll-behavior: smooth; }
.chat-dialog-feed .chat-message { max-width: min(72%, 680px); }
.chat-dialog-feed .chat-message.user { margin-right: auto; margin-left: 0; border-bottom-right-radius: 12px; border-bottom-left-radius: 4px; background: var(--surface); }
.chat-dialog-feed .chat-message.admin { margin-right: 0; margin-left: auto; border-bottom-right-radius: 4px; border-bottom-left-radius: 12px; background: #d9ecff; }
.chat-dialog-compose { min-width: 0; display: flex; align-items: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); background: #f8fafc; }
.chat-dialog-compose textarea { flex: 1; min-width: 0; min-height: 48px; max-height: 150px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; outline: 0; overflow-y: hidden; scrollbar-width: none; color: var(--text); background: var(--surface); font-size: 14px; font-weight: 520; line-height: 1.45; resize: none; }
.chat-dialog-compose textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(52,120,255,.08); }

/* ── Search inputs shared by admin and cabinet ───────────────────────────── */
.inline-search { height: 44px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; color: #b1bfd6; }
.inline-search:focus-within { border-color: var(--blue); background: var(--surface); box-shadow: 0 0 0 3px rgba(52,120,255,.08); }
.inline-search input { width: 100%; height: 100%; border: 0; outline: 0; color: var(--text); background: transparent; }
.inline-search input::-webkit-search-cancel-button { display: none; }
.inline-search svg { width: 17px; height: 17px; flex: 0 0 auto; }
.inline-search button { display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.inline-search.wide { width: 100%; }
/* Поиск по выплатам в топбаре, рядом со значком уведомлений — раньше искать
   можно было только по токенам на отдельной странице. */
.topbar-search { height: 40px; width: 220px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; color: #b1bfd6; transform-origin: right center; animation: search-pop 180ms ease; }
.topbar-search.hidden { display: none; }
.topbar-search:focus-within { border-color: var(--blue); background: var(--surface); box-shadow: 0 0 0 3px rgba(52,120,255,.08); }
.topbar-search input { width: 100%; height: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 13px; }
.topbar-search input::-webkit-search-cancel-button { display: none; }
.topbar-search svg { width: 16px; height: 16px; flex: 0 0 auto; }
#payout-search-toggle[aria-pressed="true"] { color: var(--blue); border-color: #bfd0f7; background: var(--surface-blue); }
@keyframes search-pop { from { opacity: 0; transform: scaleX(.85); } to { opacity: 1; transform: scaleX(1); } }
@media (max-width: 760px) {
  .topbar-search { position: fixed; inset: 62px 14px auto; width: auto; z-index: 25; }
}
.admin-search { display: flex; gap: 10px; margin-bottom: 16px; }
.admin-search .button { flex: 0 0 auto; min-height: 44px; }
.admin-search-note { margin: -6px 0 14px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.token-search { margin-bottom: 12px; }
.token-search-note { margin: -4px 0 14px; color: var(--muted); font-size: 12px; }
.filter-hint { display: flex; align-items: center; gap: 7px; margin: -8px 0 18px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.filter-hint svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--blue); }

/* ── Broadcast composer ──────────────────────────────────────────────────── */
.broadcast-form { display: grid; gap: 16px; max-width: 780px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.broadcast-audience { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.audience-option { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); cursor: pointer; transition: border-color 170ms ease, background 170ms ease; }
.audience-option:has(input:checked) { border-color: #bfd2f8; background: var(--surface-blue); }
.audience-option input { width: 17px; height: 17px; accent-color: var(--blue); }
.audience-option strong { display: block; font-size: 13px; }
.audience-option small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.form-field > span small { margin-left: 5px; color: var(--muted-2); font-weight: 500; text-transform: none; }
.broadcast-preview { display: grid; gap: 9px; }
.preview-label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 600; }
.preview-label svg { width: 15px; height: 15px; }
.preview-bubble { display: grid; gap: 5px; padding: 15px 16px; border: 1px solid #cbdcff; border-radius: 8px 8px 8px 2px; background: var(--surface-blue); }
.preview-bubble b { color: #153a82; font-size: 13px; }
.preview-bubble code { color: var(--blue); font-size: 10px; letter-spacing: .08em; }
.preview-divider { height: 1px; margin: 4px 0; background: #c3d6fb; }
.preview-bubble strong { font-size: 13px; }
.preview-bubble p { margin: 0; color: #3d4a63; font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── Owner security summary ──────────────────────────────────────────────── */
.security-panel { margin-top: 18px; }
.security-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.security-list li { display: flex; align-items: flex-start; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); }
.security-list svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--blue); }
.security-list strong { display: block; font-size: 13px; }
.security-list small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.5; }

/* ── Cabinet: per-token overrides ────────────────────────────────────────── */
.token-settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.token-settings-summary { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--muted); font-size: 12px; }
.token-settings-summary svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--blue); }
.button.small { min-height: 34px; padding: 0 12px; font-size: 12px; }
.button.small svg { width: 15px; height: 15px; }
.token-settings-sheet { width: min(100%, 560px); max-height: calc(100vh - 40px); display: grid; gap: 16px; overflow-y: auto; text-align: left; }
.token-settings-sheet .confirmation-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.token-settings-sheet h2 { margin: 6px 0 4px; }
.token-settings-sheet h3 { margin: 0; font-size: 14px; }
.token-settings-chip { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid #cbdcff; border-radius: 7px; background: var(--surface-blue); color: var(--blue-strong); }
.token-settings-chip svg { width: 16px; height: 16px; flex: 0 0 auto; }
.token-settings-chip code { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.token-settings-sheet .modal-actions { justify-content: flex-end; }

/* ── Cabinet: entry point into the owner panel ───────────────────────────── */
.admin-entry { display: flex; align-items: center; gap: 13px; margin-top: 20px; padding: 15px 17px; border: 1px solid #cbdcff; border-radius: 8px; background: var(--surface-blue); color: var(--text); text-decoration: none; transition: transform 170ms ease, box-shadow 170ms ease; }
.admin-entry:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(52,120,255,.14); }
.admin-entry > i:last-child { margin-left: auto; color: var(--blue); }
.admin-entry-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 9px; color: #fff; background: var(--blue); }
.admin-entry strong { display: block; font-size: 14px; }
.admin-entry small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }

@media (max-width: 1000px) {
  :root { --sidebar: 202px; }
  .metrics-band { grid-template-columns: repeat(2,1fr); }
  .payout-grid { grid-template-columns: 1fr; }
  .home-payout-row { grid-template-columns: 40px minmax(140px, .8fr) minmax(170px, 1fr) minmax(170px, 1fr) auto 18px; }
  .home-payout-id { display: none; }
  .history-item { grid-template-columns: 1fr 1.4fr; }
  .history-token { grid-column: 1 / -1; }
  .badge-grid { grid-template-columns: repeat(2,1fr); }
  .admin-grid { grid-template-columns: 1fr; }
  .agent-editor { grid-template-columns: 1fr; }
  .admin-overview-grid { grid-template-columns: 1fr; }
  .admin-mini-stats { grid-template-columns: repeat(2, 1fr); }
  .chat-workspace { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .sidebar { display: none; }
  .workspace { margin-left: 0; padding-bottom: 76px; }
  .topbar { height: 104px; align-items: flex-start; padding: 11px 14px 0; }
  .mobile-brand { display: inline-flex; margin-right: auto; font-size: 15px; }
  .mobile-brand .brand-symbol { width: 30px; height: 30px; }
  .mobile-brand .brand-symbol svg { width: 18px; }
  .topbar-status, .account-chip, #logout-button { display: none; }
  .workspace-switch-link { width: 40px; min-width: 40px; padding: 0; justify-content: center; }
  .workspace-switch-link span { display: none; }
  .topbar-context { position: absolute; inset: auto 14px 8px; height: 34px; margin: 0; justify-content: space-between; }
  .moscow-clock { padding-left: 0; border-left: 0; }
  .topbar-context .search-switch { margin-left: auto; }
  .content { padding: 24px 14px 34px; }
  .page-heading { min-height: 0; display: grid; gap: 18px; margin-bottom: 22px; }
  .page-heading h1, .profile-head h1 { font-size: 26px; }
  .settings-section .sim-switch { width: 100%; justify-content: center; }
  .metrics-band { grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 30px; }
  .metric { min-height: 108px; padding: 14px; }
  .metric strong { font-size: 21px; }
  .payout-grid { grid-template-columns: 1fr; }
  .home-payout-heading { align-items: stretch; flex-direction: column; }
  .home-payout-tabs { width: 100%; }
  .home-payout-tab { flex: 1; justify-content: center; }
  .home-payout-row { grid-template-columns: 36px minmax(0, 1fr) 16px; gap: 10px; padding: 12px; }
  .home-payout-state { width: 34px; height: 34px; }
  .home-payout-payment, .home-payout-owner { grid-column: 2 / -1; padding-top: 7px; border-top: 1px solid #edf0f5; }
  .home-payout-cancel { grid-column: 2 / -1; width: 100%; min-height: 38px; }
  .home-payout-open { grid-column: 3; grid-row: 1; }
  .history-item { grid-template-columns: 1fr; gap: 9px; }
  .history-token { grid-column: auto; }
  .token-import-body > div { display: grid; }
  .inline-import .button { min-height: 44px; }
  .settings-section { align-items: stretch; flex-direction: column; padding: 20px; }
  .trademo-link-head { align-items: stretch; flex-direction: column; }
  .integration-state { align-self: flex-start; }
  .trademo-profile-summary { grid-template-columns: 1fr; }
  .trademo-profile-summary > div { border-right: 0; border-bottom: 1px solid #e2e7ef; }
  .trademo-profile-summary > div:last-child { border-bottom: 0; }
  .trademo-link-actions { display: grid; grid-template-columns: 1fr; }
  .trademo-link-actions .button { width: 100%; }
  .trademo-account-controls { align-items: stretch; flex-direction: column; }
  .insurance-editor { width: 100%; }
  .trademo-account-controls .button { width: 100%; }
  .payout-option-grid { grid-template-columns: 1fr; }
  .telegram-mode-panel { grid-template-columns: 40px 1fr; }
  .telegram-mode-panel .button { grid-column: 1 / -1; width: 100%; }
  .bank-settings-head { align-items: stretch; flex-direction: column; }
  .bank-scope-toggle { width: 100%; min-width: 0; }
  .bank-list { grid-template-columns: 1fr 1fr; }
  .number-control, .amount-grid { width: 100%; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .form-actions .button { width: 100%; }
  .admin-summary { grid-template-columns: 1fr 1fr; }
  .agent-editor-fields { grid-template-columns: 1fr; }
  .agent-avatar-actions, .agent-editor-submit { grid-column: 1; }
  .page-heading .count-chip { width: auto; justify-self: start; }
  .token-row { align-items: flex-start; flex-direction: column; }
  .token-main { width: 100%; }
  .token-main .copy-inline { width: 100%; justify-content: flex-start; }
  .token-status { margin-top: 3px; }
  .progression-panel { margin-top: -10px; padding: 17px 14px 14px; }
  .progression-head { display: grid; gap: 12px; }
  .progression-summary { justify-content: space-between; }
  .progression-summary > span { text-align: left; }
  .progression-chart { grid-template-columns: repeat(7, minmax(38px, 1fr)); gap: 6px; }
  .progression-day { grid-template-rows: 22px 82px 19px; }
  .progression-day small { display: none; }
  .bottom-nav { position: fixed; inset: auto 0 0; z-index: 50; height: calc(66px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5,1fr); padding: 6px 4px env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: rgba(255,255,255,.97); backdrop-filter: blur(14px); }
  .bottom-nav .nav-item { min-width: 0; display: grid; place-content: center; justify-items: center; gap: 3px; border-radius: 6px; color: #8795ad; }
  .bottom-nav .nav-item.active { color: var(--blue); background: var(--blue-soft); }
  .bottom-nav svg { width: 19px; height: 19px; }
  .bottom-nav small { max-width: 100%; overflow: hidden; font-size: 9px; text-overflow: ellipsis; }
  .toast { right: 16px; bottom: 82px; }
  .onboarding-card { max-height: calc(100vh - 28px); overflow-y: auto; padding: 21px; }
  .onboarding-grid { grid-template-columns: 1fr; }
  .chat-widget { right: 14px; bottom: calc(78px + env(safe-area-inset-bottom)); }
  .chat-popover { height: min(620px, calc(100dvh - 106px - env(safe-area-inset-bottom))); }
  .chat-feed { padding: 14px; }
  .chat-message { max-width: 88%; }
  .admin-metrics { grid-template-columns: 1fr 1fr; }
  .admin-mini-stats { grid-template-columns: 1fr 1fr; }
  .admin-search { display: grid; }
  .admin-search .button { width: 100%; }
  .broadcast-form { padding: 18px; }
  .broadcast-audience { grid-template-columns: 1fr; }
  .admin-actions .button { flex: 1 0 auto; }
  .admin-user-limits summary { grid-template-columns: minmax(0, 1fr) 18px; }
  .admin-user-limits summary small { grid-column: 1 / -1; white-space: normal; }
  .admin-limit-form { grid-template-columns: 1fr; }
  .admin-limit-save { width: 100%; }
  /* Mobile chats behave like a stack: the list, then the open dialog. */
  .chat-workspace { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 216px); min-height: 420px; }
  .chat-workspace.dialog-open .chat-threads { display: none; }
  .chat-workspace:not(.dialog-open) .chat-dialog { display: none; }
  .chat-dialog-back { display: inline-grid; }
  .chat-dialog-head .chat-dialog-actions { display: none; }
  .login-success-card { padding: 32px 26px; }
  .token-settings-row { align-items: stretch; flex-direction: column; gap: 10px; }
  .token-settings-row .button { width: 100%; }
}

@media (max-width: 520px) {
  .auth-shell { padding: 22px 14px; }
  .brand-auth { margin-bottom: 24px; }
  .auth-card { min-height: 0; padding: 30px 20px 24px; }
  .auth-heading h1 { font-size: 29px; }
  .metrics-band { grid-template-columns: 1fr 1fr; }
  .metric.rate-metric { grid-column: 1 / -1; }
  .detail-grid { gap: 12px 8px; }
  .card-actions { grid-template-columns: 1fr; }
  .card-actions > * { grid-column: auto !important; }
  .filter-row { width: 100%; }
  .filter { flex: 1 0 auto; }
  .amount-grid { grid-template-columns: 1fr; }
  .badge-grid { grid-template-columns: 1fr 1fr; }
  .modal-backdrop { padding: 12px; align-items: end; }
  .modal-card, .onboarding-card { padding: 22px 18px; }
  .confirmation-sheet { max-height: calc(100vh - 18px); padding: 21px 17px; border-radius: 8px 8px 0 0; }
  .confirmation-deadline { grid-template-columns: 1fr; }
  .confirmation-deadline small { grid-column: 1; grid-row: auto; }
  .payout-requisites-head { grid-template-columns: 34px minmax(0, 1fr); }
  .payout-requisites-icon { width: 34px; height: 34px; }
  .payout-requisites-amount { grid-column: 2; justify-self: start; }
  .payout-requisites-number code { font-size: clamp(13px, 4.2vw, 18px); }
  #confirmation-bank-picker.bank-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 174px; }
  .bank-list { grid-template-columns: 1fr; }
  .chat-widget { right: 10px; }
  .chat-popover { width: calc(100vw - 20px); }
  .chat-welcome { padding: 24px 18px 16px; }
  .agent-editor { padding: 16px; }
  .agent-editor-intro { align-items: flex-start; }
  .agent-avatar-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .agent-editor-submit { align-items: stretch; flex-direction: column; }
  .agent-editor-submit .button { width: 100%; }
  .token-settings-sheet { max-height: calc(100vh - 18px); padding: 21px 17px; border-radius: 8px 8px 0 0; }
  .token-settings-sheet .modal-actions { display: grid; }
  .bottom-nav.admin-bottom-nav small { font-size: 8px; }
  .auth-steps li { padding: 9px 10px; }
  .success-ring { width: 70px; height: 70px; }
  .success-ring svg { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Beeline verification settings use the same calm import surface as tokens. */
.rucaptcha-panel,
.phone-pool-panel,
.proxy-pool-panel {
  margin-top: 20px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #cfdcf5;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(38, 74, 135, .045);
}

.rucaptcha-panel > .section-heading,
.phone-pool-panel > .section-heading,
.proxy-pool-panel > .section-heading {
  min-height: 54px;
  margin: 0;
  padding: 10px 15px;
  border-bottom: 1px solid #dbe5f7;
  background: #edf3ff;
}

.rucaptcha-panel > .section-heading h2,
.phone-pool-panel > .section-heading h2,
.proxy-pool-panel > .section-heading h2 {
  font-size: 15px;
  font-weight: 750;
}

.rucaptcha-panel > .section-heading p,
.phone-pool-panel > .section-heading p,
.proxy-pool-panel > .section-heading p {
  margin-top: 3px;
  color: #7283a5;
  font-size: 11px;
  font-weight: 600;
}

.rucaptcha-panel .status-chip,
.phone-pool-panel .count-chip,
.proxy-pool-panel .count-chip {
  flex: 0 0 auto;
  min-width: 36px;
  border: 1px solid #d2def4;
  background: rgba(255, 255, 255, .8);
  color: #4770bc;
}

.rucaptcha-panel .status-chip.success {
  border-color: #b9e5c0;
  background: #effaf1;
  color: #26963a;
}

.secret-editor,
.phone-pool-form,
.proxy-pool-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: 12px;
  row-gap: 7px;
  align-items: center;
  padding: 14px 15px;
}

.secret-editor > label,
.phone-pool-form > label,
.proxy-pool-form > label {
  display: contents;
}

.secret-editor label > span,
.phone-pool-form label > span,
.proxy-pool-form label > span {
  grid-column: 1 / -1;
  grid-row: 1;
  color: #35415a;
  font-size: 12px;
  font-weight: 700;
}

.secret-editor label > small,
.phone-pool-form label > small,
.proxy-pool-form label > small {
  grid-column: 1 / -1;
  grid-row: 3;
  min-height: 17px;
  color: #8291ad;
  font-size: 11px;
  font-weight: 600;
}

.secret-input {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  min-height: 48px;
  overflow: hidden;
  border: 1px solid #d8e1f0;
  border-radius: 8px;
  background: #fbfcff;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.secret-input:focus-within {
  border-color: var(--blue);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(52, 120, 255, .1);
}

.secret-input input {
  flex: 1;
  min-width: 0;
  height: 46px;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 14px;
  color: var(--text);
  font: 600 14px/1 Inter, sans-serif;
}

.phone-pool-form textarea,
.proxy-pool-form textarea {
  grid-column: 1;
  grid-row: 2;
  box-sizing: border-box;
  width: 100%;
  height: 76px;
  min-height: 76px;
  resize: vertical;
  border: 1px solid #d8e1f0;
  border-radius: 8px;
  outline: 0;
  background: #fbfcff;
  padding: 10px 12px;
  color: var(--text);
  font: 600 13px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.phone-pool-form textarea:focus,
.proxy-pool-form textarea:focus {
  border-color: var(--blue);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(52, 120, 255, .1);
}

.phone-pool-form textarea::placeholder,
.proxy-pool-form textarea::placeholder,
.secret-input input::placeholder {
  color: #afbad0;
}

.secret-actions {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  gap: 8px;
  align-items: center;
}

.phone-pool-form > .button,
.proxy-pool-form > .button {
  grid-column: 2;
  grid-row: 2;
  min-width: 142px;
  height: 44px;
  align-self: center;
  justify-content: center;
}

.rucaptcha-panel > .form-error,
.phone-pool-panel > .form-error,
.proxy-pool-panel > .form-error {
  margin: -6px 15px 12px;
}

.phone-pool-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0 15px 14px;
}

.phone-pool-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 36px 36px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafbfe;
}

.phone-pool-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--blue-soft);
  color: var(--blue);
}

.phone-pool-item strong,
.phone-pool-item small { display: block; overflow: hidden; text-overflow: ellipsis; }
.phone-pool-item small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.phone-pool-item.proxy-checking .phone-pool-icon svg { animation: spin .85s linear infinite; }
.phone-pool-item.proxy-valid .phone-pool-icon { background: #edf9ef; color: #34a348; }
.empty-inline { display: flex; gap: 9px; align-items: center; padding: 16px; border: 1px dashed #d7e0ef; border-radius: 8px; color: var(--muted); background: #fbfcfe; }

.phone-pool-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 15px 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.phone-page-summary {
  display: grid;
  min-width: 118px;
  gap: 2px;
}

.phone-page-summary strong {
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 650;
  line-height: 16px;
}

.phone-page-summary small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 550;
  line-height: 14px;
}

.phone-page-controls,
.phone-page-numbers {
  display: flex;
  align-items: center;
  gap: 6px;
}

.phone-page-button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 30, 60, .035);
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.phone-page-button:hover:not(:disabled):not(.active) {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(35, 75, 145, .1);
}

.phone-page-button.active {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 5px 13px rgba(52, 120, 255, .2);
  cursor: default;
}

.phone-page-button:disabled {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--muted-2);
  cursor: not-allowed;
  box-shadow: none;
  opacity: .62;
}

.phone-page-button svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.phone-page-ellipsis {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 34px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 1px;
  user-select: none;
}

@media (max-width: 720px) {
  .secret-editor,
  .phone-pool-form,
  .proxy-pool-form {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    padding: 14px;
  }
  .secret-editor label > span,
  .phone-pool-form label > span,
  .proxy-pool-form label > span { grid-column: 1; grid-row: 1; }
  .secret-input,
  .phone-pool-form textarea,
  .proxy-pool-form textarea { grid-column: 1; grid-row: 2; }
  .secret-editor label > small,
  .phone-pool-form label > small,
  .proxy-pool-form label > small { grid-column: 1; grid-row: 3; }
  .secret-actions {
    grid-column: 1;
    grid-row: 4;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .phone-pool-form > .button,
  .proxy-pool-form > .button {
    grid-column: 1;
    grid-row: 4;
    width: 100%;
    min-width: 0;
    height: 42px;
  }
  .phone-pool-list { padding: 0 14px 14px; }
  .phone-pool-pagination {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
    margin: 0 14px 14px;
  }
  .phone-page-summary {
    display: flex;
    justify-content: space-between;
    min-width: 0;
  }
  .phone-page-controls { justify-content: center; }
  .phone-page-button { width: 32px; height: 32px; }
  .phone-page-ellipsis { width: 16px; height: 32px; }
}

/* ============================================================
   NEW-08-2026 · дополнительные блоки, ПЕРЕНЕСЁННЫЕ из styles.css.
   Раньше жили в styles.css, но index.html подключает только trademo.css,
   поэтому все эти правила игнорировались браузером и профиль/шкала/ачивки
   «съезжали». Поместил в конец trademo.css — теперь работает.
   ============================================================ */

/* auto-verification блок в настройках */
.settings-panel { margin: 18px 0; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 1px 2px rgba(20,30,60,.03); }
.settings-panel .settings-section { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 0; border: 0; background: transparent; }
.auto-verify-panel .settings-icon.violet {
  color: var(--on-primary);
  background: linear-gradient(145deg, var(--primary), var(--primary-strong));
  box-shadow: 0 5px 14px rgba(var(--accent-rgb), .18);
}
.rucaptcha-user-panel .settings-icon.amber { background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #fff; }
.auto-verify-switch[aria-pressed="true"] .mini-track {
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  box-shadow: inset 0 1px 2px rgba(var(--accent-rgb), .24);
}
.auto-verify-indicator { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: linear-gradient(135deg, rgba(var(--accent-rgb), .11), rgba(var(--accent-rgb), .055)); border: 1px solid rgba(var(--accent-rgb), .30); color: var(--text); animation: auto-verify-glow 2.6s ease-in-out infinite; }
.auto-verify-indicator.hidden { display: none; }
.auto-verify-indicator .indicator-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .16); }
.auto-verify-indicator strong { display: block; font-size: 14px; }
.auto-verify-indicator small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.auto-verify-indicator svg { width: 20px; height: 20px; color: var(--primary); }
@keyframes auto-verify-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); } 50% { box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .10); } }

.settings-panel.auto-verify-panel {
  padding: 0;
  overflow: hidden;
}

.auto-verify-panel .verification-setting-block {
  padding: 18px 20px;
}

.auto-verify-panel .verification-setting-block + .verification-setting-block {
  border-top: 1px solid var(--line);
}

.auto-verify-panel .auto-verify-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  min-height: 0;
  margin: 0;
}

.auto-verify-panel .settings-copy {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  max-width: none;
  min-width: 0;
}

.auto-verify-panel .settings-copy > div {
  min-width: 0;
}

.auto-verify-panel .settings-copy h2 {
  margin: 1px 0 3px;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
}

.auto-verify-panel .settings-copy p {
  margin: 0;
  max-width: 920px;
  color: color-mix(in srgb, var(--muted) 82%, var(--text));
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
}

.auto-verify-panel .settings-icon {
  width: 40px;
  height: 40px;
  border-radius: 9px;
}

.auto-verify-panel .settings-icon.amber {
  color: #d98b08;
  background: color-mix(in srgb, #f59e0b 12%, var(--surface));
  border: 1px solid color-mix(in srgb, #f59e0b 22%, var(--line));
}

.auto-verify-panel .auto-verify-switch {
  min-width: 130px;
  justify-content: center;
}

.auto-verify-panel .auto-verify-indicator {
  margin: 14px 0 0 54px;
}

/* Кнопка-значок авто-выплат в topbar */
.auto-verify-badge { position: relative; isolation: isolate; color: var(--primary); }
.auto-verify-badge.hidden { display: none; }
.auto-verify-badge .auto-verify-pulse { position: absolute; z-index: -1; inset: -3px; border-radius: 10px; border: 2px solid rgba(var(--accent-rgb), .38); pointer-events: none; transform-origin: center; animation: auto-verify-badge-pulse 2s cubic-bezier(.22,1,.36,1) infinite; }
@keyframes auto-verify-badge-pulse { 0% { transform: scale(.92); opacity: .72; } 68%, 100% { transform: scale(1.18); opacity: 0; } }

/* Диалог выбора после 3 неудачных попыток */
.verification-decision { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon copy" "actions actions"; gap: 14px 16px; margin-top: 16px; padding: 18px; border: 1px solid #fca5a5; border-radius: 14px; background: linear-gradient(135deg, #fff1f2, #fef2f2); }
.verification-decision.hidden { display: none; }
.verification-decision-icon { grid-area: icon; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fee2e2; color: #dc2626; }
.verification-decision > div:nth-child(2) { grid-area: copy; }
.verification-decision strong { display: block; font-size: 15px; color: #991b1b; }
.verification-decision p { margin: 4px 0 0; font-size: 13.5px; color: #7f1d1d; }
.verification-decision-actions { grid-area: actions; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 520px) { .verification-decision-actions { flex-direction: column-reverse; } .verification-decision-actions .button { width: 100%; } }

/* Импорт списка вручную или из TXT остаётся компактным даже с тремя действиями. */
.phone-pool-form .phone-pool-actions {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  max-width: 390px;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
.phone-pool-form .phone-pool-actions .button {
  width: auto;
  min-width: 0;
  min-height: 40px;
  padding-inline: 13px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .phone-pool-form .phone-pool-actions {
    grid-column: 1 / -1;
    grid-row: 4;
    max-width: none;
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {
  .phone-pool-form .phone-pool-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .phone-pool-form .phone-pool-actions .button { width: 100%; }
  .phone-pool-form .phone-pool-actions .danger-outline { grid-column: 1 / -1; }
}

/* Achievements — ПЕРЕОПРЕДЕЛЕНИЕ (специфичность выше через .badge-grid .achievement).
   Раньше без этого блока grid показывал только 34px-иконку + маленький текст. */
.achievement-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; padding: 14px; border-radius: 12px; background: linear-gradient(135deg, rgba(124,92,255,.06), rgba(56,189,248,.05)); border: 1px solid rgba(124,92,255,.18); }
.achievement-stats > div { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.achievement-stats span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.achievement-stats strong { font-size: 16px; color: var(--text); font-weight: 700; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.badge-grid .achievement { min-height: 0; align-content: initial; justify-items: initial; text-align: left; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 4px; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.badge-grid .achievement:not(.locked) { border-color: rgba(124,92,255,.28); }
.badge-grid .achievement:not(.locked):hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(124,92,255,.14); }
.badge-grid .achievement > span { grid-row: 1 / 3; grid-column: 1; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, #7c5cff, #a855f7); color: #fff; }
.badge-grid .achievement.locked > span { background: #f1f1f5; color: #9aa0b0; }
.badge-grid .achievement > span svg { width: 22px; height: 22px; }
.badge-grid .achievement strong { grid-column: 2; grid-row: 1; font-size: 13.5px; color: var(--text); line-height: 1.2; }
.badge-grid .achievement small { grid-column: 2; grid-row: 2; color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.badge-grid .achievement.locked { opacity: .66; }
@media (max-width: 540px) { .badge-grid { grid-template-columns: 1fr; } }

/* Profile customization form */
.profile-customization { margin-top: 22px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.customization-form { display: grid; gap: 16px; margin-top: 14px; }
.customization-form .form-field { display: grid; gap: 6px; }
.customization-form .form-field > span { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.customization-form input { height: 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 0 14px; font: inherit; color: var(--text); transition: border-color .18s ease, box-shadow .18s ease; }
.customization-form input:focus { outline: none; border-color: var(--profile-accent, #7c5cff); box-shadow: 0 0 0 3px rgba(124,92,255,.12); }
.customization-swatches, .customization-themes { display: flex; flex-direction: column; gap: 8px; }
.customization-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.swatch-row { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: 0 1px 3px rgba(30,40,70,.12); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.swatch:hover { transform: scale(1.08); }
.swatch.active { border-color: var(--text-strong); box-shadow: 0 0 0 3px rgba(124,92,255,.2), 0 0 0 2px #fff inset; }
.swatch.aurora { background: linear-gradient(135deg, #7c5cff, #38bdf8); }
.swatch.ember  { background: linear-gradient(135deg, #ff7a45, #fb923c); }
.swatch.ice    { background: linear-gradient(135deg, #38bdf8, #93c5fd); }
.swatch.gold   { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.swatch.rose   { background: linear-gradient(135deg, #f472b6, #fb7185); }
.swatch.mint   { background: linear-gradient(135deg, #34d399, #4ade80); }
.theme-row { display: flex; gap: 8px; flex-wrap: wrap; }
.theme-pill { display: inline-flex; gap: 6px; align-items: center; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .18s ease; }
.theme-pill svg { width: 14px; height: 14px; }
.theme-pill:hover { border-color: var(--profile-accent, #7c5cff); color: var(--profile-accent, #7c5cff); }
.theme-pill.active { border-color: var(--profile-accent, #7c5cff); background: rgba(124,92,255,.08); color: var(--profile-accent, #7c5cff); }
.profile-customization .form-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; }
.profile-customization .form-actions > span { color: var(--muted); font-size: 12px; }

/* Прогресс-бар «производится проверка» в тонах сайта */
.verification-progress { display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; align-items: center; margin-top: 16px; padding: 16px 18px; border: 1px solid rgba(124,92,255,.24); border-radius: 14px; background: linear-gradient(135deg, rgba(124,92,255,.06), rgba(56,189,248,.05)); }
.verification-progress.hidden { display: none; }
.verification-progress-track { display: flex; gap: 6px; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle at center, rgba(124,92,255,.15), rgba(124,92,255,0)); position: relative; }
.verification-progress-track::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 2px solid rgba(124,92,255,.24); border-top-color: #7c5cff; border-right-color: #38bdf8; animation: spin-verify 1.1s linear infinite; }
@keyframes spin-verify { to { transform: rotate(360deg); } }
.verification-progress-dot { width: 5px; height: 5px; border-radius: 50%; background: #7c5cff; opacity: .35; animation: dot-verify 1.3s ease-in-out infinite; }
.verification-progress-dot.dot-b { animation-delay: .18s; background: #a855f7; }
.verification-progress-dot.dot-c { animation-delay: .36s; background: #38bdf8; }
@keyframes dot-verify { 0%,100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }
.verification-progress-copy strong { display: block; font-size: 14.5px; color: var(--text); }
.verification-progress-copy small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; letter-spacing: .02em; }

/* Лог попыток — «Первая проверка — платёж не создан» и так далее */
.verification-log { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.verification-log.hidden { display: none; }
.verification-log-item { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); transition: border-color .2s ease, box-shadow .2s ease; }
.verification-log-item.ok { border-color: rgba(52,211,153,.35); background: linear-gradient(135deg, rgba(52,211,153,.08), rgba(52,211,153,.02)); }
.verification-log-item.fail { border-color: rgba(248,113,113,.35); background: linear-gradient(135deg, rgba(248,113,113,.08), rgba(248,113,113,.02)); }
.verification-log-item .log-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.verification-log-item.ok .log-icon { color: #10b981; border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.08); }
.verification-log-item.fail .log-icon { color: #ef4444; border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.08); }
.verification-log-item .log-icon svg { width: 18px; height: 18px; }
.verification-log-item strong { display: block; font-size: 13.5px; color: var(--text-strong, var(--text)); letter-spacing: -.005em; margin-bottom: 4px; }
.verification-log-item small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-top: 3px; }
.verification-log-item code { display: inline-block; padding: 2px 8px; border-radius: 6px; background: rgba(124,92,255,.08); color: var(--profile-accent, #7c5cff); font-family: "Cascadia Mono", Consolas, monospace; font-size: 11.5px; }
.verification-log-item .log-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Кнопка «Проверить выплату» при включённой авто-проверке превращается в
   статусный чип. auto-spin крутит иконку — визуальный сигнал, что процесс
   идёт сам, а не ждёт нажатия. */
.button.verify-auto-chip { background: rgba(234,179,8,.12); color: #ca8a04; border: 1px solid rgba(234,179,8,.35); cursor: not-allowed; }
.button.verify-auto-chip:hover { background: rgba(234,179,8,.14); }
.button.auto-spin i { animation: verify-spin 1.5s linear infinite; }
@keyframes verify-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Слот кнопки авто-проверки — вертикальный стек кнопки + текущей стадии.
   verify-stage-badge — жёлтый чип с текущей стадией (готовим сессию /
   решаем капчу / ждём SMS). verify-done-badge — зелёный чип после success,
   пока карточка ещё видна, до auto-confirm.
   Раньше юзер видел только вечную крутилку без объяснения, что происходит. */
.verify-slot { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }
.verify-slot .button { width: 100%; }
.verify-stage-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px;
  background: rgba(234,179,8,.10); color: #92650a;
  border: 1px solid rgba(234,179,8,.28);
  font-size: 12px; font-weight: 500; line-height: 1.3;
  white-space: normal; word-break: break-word;
}
.verify-stage-badge i { flex-shrink: 0; width: 14px; height: 14px; }
.verify-stage-badge i.spin { animation: verify-spin 1.5s linear infinite; }
.verify-done-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px;
  background: rgba(16,185,129,.10); color: #047857;
  border: 1px solid rgba(16,185,129,.32);
  font-size: 12px; font-weight: 600; line-height: 1.3;
  white-space: normal; word-break: break-word;
}
.verify-done-badge i { flex-shrink: 0; width: 14px; height: 14px; }

/* Плашка «бот хочет отменить выплату» — включается когда юзер поставил
   тумблер manual-cancel-confirmation и бэк поставил pendingCancelConfirmation
   для этой выплаты. Кнопки внутри дают явное решение — отменить или оставить. */
.operation-alert.cancel-confirm {
  background: rgba(234,179,8,.10);
  border: 1px solid rgba(234,179,8,.35);
  color: #92650a;
  border-radius: 10px; padding: 12px 14px;
  display: flex; gap: 10px; align-items: flex-start;
}
.operation-alert.cancel-confirm > i { flex-shrink: 0; margin-top: 2px; color: #ca8a04; }
.operation-alert.cancel-confirm strong { display: block; margin-bottom: 4px; }
.operation-alert.cancel-confirm span   { display: block; font-size: 12.5px; line-height: 1.4; }
.cancel-confirm-actions {
  display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap;
}
.cancel-confirm-actions .button { flex: 1; min-width: 140px; }
.verification-log-item .log-row { display: grid; grid-template-columns: 108px 1fr; gap: 6px 12px; align-items: baseline; }
.verification-log-item .log-field { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.verification-log-item .log-value { font-size: 13px; color: var(--text); line-height: 1.4; word-break: break-word; }
@media (max-width: 480px) { .verification-log-item .log-row { grid-template-columns: 1fr; gap: 2px; } }

/* Общая типографика — свежий rhythm на всём приложении */
html { font-feature-settings: "cv11", "ss01", "cv02", "cv04"; }
h1, h2, h3 { letter-spacing: -.018em; }
.button { font-weight: 600; letter-spacing: .005em; }
.eyebrow { font-weight: 600; letter-spacing: .11em; text-transform: uppercase; font-size: 11px; }
.page-heading h1 { line-height: 1.15; }
.metric strong { letter-spacing: -.02em; }
.settings-copy h2 { letter-spacing: -.015em; }

/* ============================================================
   ITERATION-3 · Settings hub с 3 подстраницами, красивые контролы,
   мягкие переходы вкладок и списков, сворачиваемый депозит,
   переработанный профиль (статистика по центру, ачивки снизу).
   ============================================================ */

/* Табы «Проверка / Интеграции / Общее» */
.settings-tabs { display: flex; gap: 6px; padding: 6px; margin: 0 0 16px; border-radius: 14px; background: var(--surface-soft); border: 1px solid var(--line); box-shadow: inset 0 1px 2px rgba(20,30,60,.03); }
.settings-tab { flex: 1; display: inline-flex; gap: 8px; align-items: center; justify-content: center; padding: 10px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: color .22s ease, background .28s ease, transform .18s ease, box-shadow .28s ease; }
.settings-tab svg { width: 16px; height: 16px; }
.settings-tab:hover { color: var(--text); }
.settings-tab.active { color: var(--blue-strong); background: var(--surface); box-shadow: 0 4px 14px rgba(52,120,255,.08), 0 0 0 1px rgba(52,120,255,.12); transform: translateY(-1px); }
.settings-tab.active svg { color: var(--blue); }

/* Мягкое появление групп при смене подвкладки */
.settings-group.stagger-in { animation: settings-stagger-in 340ms cubic-bezier(.16,1,.3,1) both; }
@keyframes settings-stagger-in { from { opacity: 0; transform: translate3d(0,10px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }

/* Unified card look — все секции настроек */
.settings-panel, .settings-section, .profile-customization, .rucaptcha-panel, .phone-pool-panel, .proxy-pool-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 6px 18px rgba(20,30,60,.04); padding: 22px; margin: 12px 0; }
.settings-panel:hover, .settings-section:hover { border-color: rgba(52,120,255,.18); box-shadow: 0 10px 26px rgba(52,120,255,.06); transition: border-color .25s ease, box-shadow .25s ease; }

/* Старая базовая .button переопределяла новую v2-систему (градиенты,
   translateY, тяжёлые тени) — из-за неё primary снова стал крупным и
   «мигающим» на hover. Единая система теперь только в блоке выше
   (Design-system button tokens + .button base + variants). */

/* Красивые поля — единый focus, крупнее шрифт, ровные высоты */
.secret-input, .customization-form input, .settings-form input[type="number"], .number-control input, .amount-grid input, textarea { border-radius: 10px; border: 1px solid var(--line); background: var(--surface); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.secret-input { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px 0 12px; height: 46px; }
.secret-input input { flex: 1; height: 100%; border: 0; outline: 0; background: transparent; padding: 0; font-size: 14.5px; letter-spacing: -.005em; }
.secret-input:focus-within, .customization-form input:focus, .settings-form input:focus, .number-control input:focus, textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(52,120,255,.12); }
.secret-input .icon-button.small { width: 34px; height: 34px; padding: 0; border-radius: 8px; color: var(--muted); background: transparent; border: 0; display: grid; place-items: center; transition: color .2s ease, background .2s ease; }
.secret-input .icon-button.small:hover { color: var(--blue); background: var(--blue-soft); }
.secret-input .icon-button.small svg { width: 16px; height: 16px; }
/* Прозрачный (маскированный) режим — сам input бледнеет когда пароль скрыт */
.secret-input input[type="password"] { color: var(--muted); letter-spacing: .3em; font-family: "Cascadia Mono", Consolas, monospace; }

.secret-editor { display: grid; grid-template-columns: 1fr auto; gap: 14px 16px; align-items: end; }
.secret-editor > label { display: grid; gap: 6px; }
.secret-editor > label > span { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.secret-editor > label > small { font-size: 12px; color: var(--muted); }
.secret-editor .secret-actions { display: flex; gap: 8px; align-self: end; }
@media (max-width: 620px) { .secret-editor { grid-template-columns: 1fr; } .secret-editor .secret-actions { flex-direction: column-reverse; } .secret-editor .secret-actions .button { width: 100%; } }

/* Сворачиваемый блок «Страховой депозит» */
.insurance-editor { border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); overflow: hidden; transition: box-shadow .22s ease; }
.insurance-editor:hover { box-shadow: 0 4px 12px rgba(52,120,255,.06); }
.insurance-toggle { width: 100%; min-height: 42px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 9px 11px; border: 0; background: transparent; color: var(--text); font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; }
.insurance-toggle-title { display: inline-flex; gap: 6px; align-items: center; }
.insurance-toggle-title svg { width: 13px; height: 13px; color: var(--blue); }
.insurance-toggle-value { font-size: 11px; }
.insurance-toggle-chevron { width: 14px; height: 14px; }
.insurance-toggle-value { color: var(--blue-strong); font-weight: 700; font-variant-numeric: tabular-nums; }
.insurance-toggle-chevron { transition: transform .28s cubic-bezier(.16,1,.3,1); color: var(--muted); }
.insurance-editor:not(.collapsed) .insurance-toggle-chevron { transform: rotate(180deg); color: var(--blue); }
.insurance-body { max-height: 400px; opacity: 1; padding: 3px 11px 11px; transition: max-height .35s cubic-bezier(.16,1,.3,1), opacity .28s ease, padding .28s ease; }
.insurance-editor.collapsed .insurance-body { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }

/* Заменяем «колхозный» save-кнопку на всех secret-editor — уже покрыто выше */

/* Payout cards и smooth stagger при смене фильтра */
.payout-card.entering, .history-item.entering, .token-card.entering { animation: card-stagger-in 540ms cubic-bezier(.22,1,.32,1) both; }
/* Мягкое свечение вокруг только что появившейся выплаты — визуальный якорь
   для глаз, чтобы новая карточка не «щёлкала» в лист, а плавно проступала
   вместе с Telegram-нотификацией. Свечение затухает вместе с окончанием
   входной анимации. */
.payout-card.entering { position: relative; }
.payout-card.entering::before { content: ""; position: absolute; inset: -2px; border-radius: 10px; box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 32%, transparent), 0 18px 40px color-mix(in oklab, var(--primary) 22%, transparent); opacity: 0; animation: payout-glow 900ms cubic-bezier(.22,1,.32,1) both; pointer-events: none; }
@keyframes payout-glow { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes card-stagger-in { from { opacity: 0; transform: translate3d(0,14px,0) scale(.98); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
.view.active > .metrics-band, .view.active > .page-heading { animation: settings-stagger-in 300ms cubic-bezier(.16,1,.3,1) both; }

/* Drawer уведомлений — плавнее чем было */
.notification-drawer { animation-duration: 420ms; animation-timing-function: cubic-bezier(.22,1,.36,1); }
.drawer-scrim { animation-duration: 260ms; animation-timing-function: cubic-bezier(.22,1,.36,1); }

/* Профиль: статистика достижений по центру + новый вид ачивок */
.achievement-stats { max-width: 560px; margin: 24px auto 20px; padding: 22px 28px; border-radius: 20px; background: linear-gradient(135deg, var(--blue-soft) 0%, rgba(124,92,255,.06) 100%); border: 1px solid rgba(52,120,255,.18); box-shadow: 0 10px 30px rgba(52,120,255,.08); grid-template-columns: repeat(3, 1fr); }
.achievement-stats > div { padding: 6px 8px; border-right: 1px solid rgba(52,120,255,.14); }
.achievement-stats > div:last-child { border-right: 0; }
.achievement-stats span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.achievement-stats strong { font-size: 20px; letter-spacing: -.015em; color: var(--blue-strong); font-variant-numeric: tabular-nums; }

/* Новый вид достижений — крупнее иконка, тёплая карточка */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.badge-grid .achievement { position: relative; padding: 18px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); grid-template-columns: 48px 1fr; column-gap: 14px; }
.badge-grid .achievement:not(.locked) { border-color: rgba(52,120,255,.22); background: linear-gradient(180deg, var(--surface) 0%, rgba(52,120,255,.03) 100%); }
.badge-grid .achievement:not(.locked)::before { content: ""; position: absolute; inset: 0; border-radius: 16px; padding: 1px; background: linear-gradient(135deg, var(--blue) 0%, transparent 70%); mask: linear-gradient(#fff, #fff) content-box, linear-gradient(#fff, #fff); mask-composite: exclude; opacity: .35; pointer-events: none; }
.badge-grid .achievement > span { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--blue) 0%, var(--blue-strong) 100%); box-shadow: 0 6px 16px rgba(52,120,255,.24); }
.badge-grid .achievement.locked > span { background: var(--surface-soft); box-shadow: none; color: var(--muted-2); }
.badge-grid .achievement > span svg { width: 24px; height: 24px; }
.badge-grid .achievement strong { font-size: 14px; font-weight: 700; }
.badge-grid .achievement small { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* Профиль: секция «Оформление» — сама тоже card */
.profile-customization { padding: 22px 24px; }
.profile-customization .section-heading { margin-top: 0; }
.customization-form { gap: 18px; }
.swatch { box-shadow: 0 2px 8px rgba(20,30,60,.12); }
.swatch.active { box-shadow: 0 0 0 3px rgba(52,120,255,.28), 0 0 0 2px #fff inset, 0 4px 10px rgba(20,30,60,.14); border-color: var(--blue-strong); }
.theme-pill.active { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-strong); }
.theme-pill svg { color: currentColor; }

/* Общая типографика подкрутка */
body { font-size: 14.5px; }
.page-heading .eyebrow { font-size: 11.5px; }
.page-heading h1 { font-size: 26px; }
.page-heading p { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.settings-copy p { font-size: 13px; color: var(--muted); }
.settings-copy h2 { font-size: 16.5px; }
.section-heading h2 { font-size: 17px; letter-spacing: -.01em; }
.section-heading p { color: var(--muted); font-size: 13px; }

/* accent-aware focus ring */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(52,120,255,.22); outline-offset: 2px; }

/* Dark/midnight/forest темы — переопределяем базовый цвет ввода/чек-марки */
:root[data-profile-theme="dark"] input, :root[data-profile-theme="midnight"] input, :root[data-profile-theme="forest"] input,
:root[data-profile-theme="dark"] textarea, :root[data-profile-theme="midnight"] textarea, :root[data-profile-theme="forest"] textarea { color: var(--text); background: var(--surface); }
:root[data-profile-theme="dark"] .settings-panel, :root[data-profile-theme="midnight"] .settings-panel, :root[data-profile-theme="forest"] .settings-panel { box-shadow: 0 8px 24px rgba(0,0,0,.32); }
:root[data-profile-theme="dark"] .achievement-stats, :root[data-profile-theme="midnight"] .achievement-stats { background: linear-gradient(135deg, var(--surface) 0%, var(--surface-soft) 100%); border-color: var(--line); }

/* ============================================================
   ITERATION-5 · Полная система тем через токены. Всё, что было
   hardcoded (#fff, #273247, #d4dceb и т.д.), уехало в переменные;
   темы Dark / Midnight / Forest переопределяют весь набор одним
   пакетом, применение — через data-profile-theme на root. Accent
   выбирается отдельно через data-profile-accent.
   ============================================================ */

:root[data-profile-theme="light"] {
  color-scheme: light;
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-soft: #f7f9fc;
  --surface-strong: #eef4ff;
  --elevated: #ffffff;
  --text: #273247;
  --text-strong: #1a2237;
  --muted: #7181a2;
  --muted-2: #99a7bf;
  --line: #e2e7f0;
  --line-strong: #d4dceb;
  --disabled-bg: #f0f2f7;
  --disabled-fg: #a5adbe;
  --overlay: rgba(20,30,55,.42);
  --shadow-md: 0 6px 18px rgba(34,54,96,.08);
  --shadow-lg: 0 18px 50px rgba(34,54,96,.14);
}

:root[data-profile-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0d18;
  --surface: #141728;
  --surface-soft: #1a1e33;
  --surface-strong: #202547;
  --elevated: #1e2340;
  --text: #eef1ff;
  --text-strong: #ffffff;
  --muted: #98a1c1;
  --muted-2: #6b7595;
  --line: #262b45;
  --line-strong: #333857;
  --disabled-bg: #1a1d30;
  --disabled-fg: #55597a;
  --overlay: rgba(0,0,4,.72);
  --shadow-md: 0 8px 20px rgba(0,0,0,.28);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.44);
  --hover-tint: rgba(255,255,255,.06);
  --active-tint: rgba(255,255,255,.10);
}

:root[data-profile-theme="midnight"] {
  color-scheme: dark;
  --bg: #050614;
  --surface: #0e1130;
  --surface-soft: #131842;
  --surface-strong: #1c2255;
  --elevated: #171d48;
  --text: #e7e9ff;
  --text-strong: #ffffff;
  --muted: #98a4d6;
  --muted-2: #6874aa;
  --line: #232864;
  --line-strong: #2e3580;
  --disabled-bg: #131842;
  --disabled-fg: #4a5288;
  --overlay: rgba(2,2,10,.78);
  --shadow-md: 0 10px 26px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.6);
  --hover-tint: rgba(160,175,255,.08);
  --active-tint: rgba(160,175,255,.14);
}

:root[data-profile-theme="forest"] {
  color-scheme: dark;
  --bg: #0c1810;
  --surface: #132a1e;
  --surface-soft: #193627;
  --surface-strong: #204533;
  --elevated: #1b3729;
  --text: #eaf5ec;
  --text-strong: #ffffff;
  --muted: #a3c5b0;
  --muted-2: #71937d;
  --line: #264c37;
  --line-strong: #305e45;
  --disabled-bg: #193627;
  --disabled-fg: #5d7a68;
  --overlay: rgba(0,10,4,.78);
  --shadow-md: 0 10px 24px rgba(0,10,4,.32);
  --shadow-lg: 0 24px 60px rgba(0,10,4,.5);
  --hover-tint: rgba(190,240,205,.08);
  --active-tint: rgba(190,240,205,.14);
}

/* ── Btn + chat токены для тёмных тем: перегружаем один раз, а не по каждой
   теме отдельно. --primary остаётся синим (не завязан на profile-accent), но
   secondary/outline/ghost перекрашиваются под тёмную поверхность.       */
:root[data-profile-theme="dark"],
:root[data-profile-theme="midnight"],
:root[data-profile-theme="forest"] {
  --btn-primary-bg: #4c8bff;
  --btn-primary-bg-hover: #3a7bf3;
  --btn-primary-fg: #ffffff;
  --btn-secondary-bg: color-mix(in oklab, var(--surface) 82%, #ffffff 18%);
  --btn-secondary-bg-hover: color-mix(in oklab, var(--surface) 70%, #ffffff 30%);
  --btn-secondary-fg: var(--text-strong);
  --btn-secondary-border: var(--line-strong);
  --btn-outline-fg: #7fb0ff;
  --btn-outline-border: color-mix(in oklab, #7fb0ff 30%, var(--line-strong));
  --btn-outline-bg-hover: rgba(76,139,255,.10);
  --btn-ghost-fg: var(--muted);
  --btn-ghost-bg-hover: rgba(255,255,255,.06);
  --btn-success-fg: #7ed596;
  --btn-success-bg: rgba(47,122,52,.20);
  --btn-success-border: rgba(126,213,150,.35);
  --btn-warning-fg: #ffc470;
  --btn-warning-bg: rgba(178,107,9,.22);
  --btn-warning-border: rgba(255,196,112,.35);
  --btn-danger-fg: #ffffff;
  --btn-danger-bg: #c53948;
  --btn-danger-bg-hover: #b02f3d;
  --btn-danger-outline-fg: #ff8a91;
  --btn-danger-outline-border: rgba(255,138,145,.45);
  --btn-danger-outline-bg-hover: rgba(255,138,145,.12);
  --btn-disabled-bg: color-mix(in oklab, var(--surface) 82%, #ffffff 8%);
  --btn-disabled-fg: color-mix(in oklab, var(--muted) 60%, transparent);
  --btn-focus-ring: 0 0 0 3px rgba(76,139,255,.35);
  --surface-raised: var(--surface-strong);
  --border: var(--line);
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --button-primary: var(--btn-primary-bg);
  --button-primary-hover: var(--btn-primary-bg-hover);
  --chat-bg: color-mix(in oklab, var(--bg) 65%, var(--surface));
  --chat-bg-strong: var(--surface-strong);
  --chat-pattern-color: rgba(160, 180, 220, 0.12);
  --chat-incoming-bg: var(--surface-strong);
  --chat-incoming-fg: var(--text-strong);
  --chat-outgoing-bg: #2f6cd8;
  --chat-outgoing-fg: #ffffff;
  --chat-time-in:  color-mix(in oklab, var(--muted) 92%, transparent);
  --chat-time-out: rgba(255,255,255,.78);
}
/* Тёмный вариант обоев чата — с более светлыми штрихами, чтобы паттерн
   был виден на глубоком фоне (light-вариант тонкий синий на молочном). */
:root[data-profile-theme="dark"] .chat-feed,
:root[data-profile-theme="midnight"] .chat-feed,
:root[data-profile-theme="forest"] .chat-feed,
:root[data-profile-theme="dark"] .chat-dialog-feed,
:root[data-profile-theme="midnight"] .chat-dialog-feed,
:root[data-profile-theme="forest"] .chat-dialog-feed {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><g fill='none' stroke='%23a0b4dc' stroke-width='1.1' stroke-linecap='round' stroke-opacity='0.32'><circle cx='24' cy='24' r='10'/><path d='M62 20 l14 -6 l14 6 l0 14 l-14 6 l-14 -6z'/><path d='M112 22 l16 0 M120 14 l0 16'/><path d='M20 66 q10 -12 22 0 t22 0'/><circle cx='96' cy='68' r='11'/><path d='M84 108 l24 0 l0 20 l-24 0z' /><path d='M40 120 l14 -14 l14 14'/></g></svg>");
}

/* ─── Accents ─── */
/* profile-accent теперь ТОЛЬКО декоративный (кольца, тонкие акценты профиля,
   иконки достижений). Не трогает --primary и --button-primary — синие
   кнопки остаются синими вне зависимости от выбранного акцента. */
:root { --profile-accent: #7c5cff; --profile-accent-strong: #5f3bff; --profile-accent-soft: #eee9ff; --profile-focus-ring: 0 0 0 3px rgba(124,92,255,.24); }
/* Декоративные зоны профиля (progress-bar уровня, achievement-stats,
   аватар-кольцо, XP-планка, level-panel) — реагируют на выбранный акцент,
   но primary-кнопки и топбар остаются нейтральными. Это дают ощущение
   «акцент работает», не разливая розовый по всему приложению. */
:root[data-profile-accent] .progress-track span,
:root[data-profile-accent] .level-panel .progress-track span,
:root[data-profile-accent] .swatch.active,
:root[data-profile-accent] .badge-grid .achievement:not(.locked) .icon-round,
:root[data-profile-accent] .achievement-stats strong,
:root[data-profile-accent] .avatar-wrap { --accent-current: var(--profile-accent); }
:root[data-profile-accent] .progress-track span { background: var(--profile-accent); }
:root[data-profile-accent] .achievement-stats strong { color: var(--profile-accent-strong); }
:root[data-profile-accent] .badge-grid .achievement:not(.locked) { border-color: color-mix(in oklab, var(--profile-accent) 32%, var(--border)); }
:root[data-profile-accent] .swatch.active { border-color: var(--profile-accent-strong); box-shadow: 0 0 0 3px color-mix(in oklab, var(--profile-accent) 30%, transparent); }
:root[data-profile-accent="aurora"] { --profile-accent: #7c5cff; --profile-accent-strong: #5f3bff; --profile-accent-soft: #eee9ff; --profile-focus-ring: 0 0 0 3px rgba(124,92,255,.24); }
:root[data-profile-accent="ember"]  { --profile-accent: #ff7a45; --profile-accent-strong: #e35c22; --profile-accent-soft: #ffece1; --profile-focus-ring: 0 0 0 3px rgba(255,122,69,.28); }
:root[data-profile-accent="ice"]    { --profile-accent: #38bdf8; --profile-accent-strong: #1c9edb; --profile-accent-soft: #e2f4fc; --profile-focus-ring: 0 0 0 3px rgba(56,189,248,.28); }
:root[data-profile-accent="gold"]   { --profile-accent: #f59e0b; --profile-accent-strong: #d47c00; --profile-accent-soft: #fff2d5; --profile-focus-ring: 0 0 0 3px rgba(245,158,11,.28); }
:root[data-profile-accent="rose"]   { --profile-accent: #ec4899; --profile-accent-strong: #c72a76; --profile-accent-soft: #fce1ee; --profile-focus-ring: 0 0 0 3px rgba(236,72,153,.28); }
:root[data-profile-accent="mint"]   { --profile-accent: #10b981; --profile-accent-strong: #0a8a63; --profile-accent-soft: #d9f5e8; --profile-focus-ring: 0 0 0 3px rgba(16,185,129,.28); }

/* Primary-soft на тёмных темах — на светлом акценте слишком яркий, делаем полупрозрачным */
:root[data-profile-theme="dark"]     [data-profile-accent] .primary-soft-swap,
:root[data-profile-theme="midnight"] [data-profile-accent] .primary-soft-swap,
:root[data-profile-theme="forest"]   [data-profile-accent] .primary-soft-swap { --primary-soft: rgba(124,92,255,.18); }

/* ─── Component-level fallbacks — читают токены, не хардкод ─── */
body, html { background: var(--bg); color: var(--text); }
.sidebar, .topbar, .content, .workspace, .app-shell { background: var(--bg); color: var(--text); }
.settings-tab { color: var(--muted); }
.settings-tab.active { background: var(--surface); color: var(--primary-strong); box-shadow: 0 4px 14px var(--hover-tint), 0 0 0 1px var(--line); }
.theme-pill { color: var(--text); background: var(--surface); border-color: var(--line); }
.theme-pill:hover { border-color: var(--primary); color: var(--primary-strong); background: var(--hover-tint); }
.theme-pill.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-strong); }
.settings-panel, .settings-section, .profile-customization, .rucaptcha-panel, .phone-pool-panel, .proxy-pool-panel { background: var(--surface); border-color: var(--line); color: var(--text); }
.modal-card, .onboarding-card, .confirmation-sheet, .verification-sheet, .token-settings-sheet, .notification-drawer, .chat-popover, .chat-welcome { background: var(--surface); color: var(--text); border-color: var(--line); }
.modal-backdrop { background: var(--overlay); }
.metric, .home-payout-row, .payout-card, .history-item, .token-card, .phone-pool-item, .badge-grid .achievement { background: var(--surface); border-color: var(--line); color: var(--text); }
.account-chip { background: var(--surface-soft); border: 1px solid var(--line); color: var(--text); }
.level-panel, .telegram-mode-panel, .admin-entry { background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.sim-switch { background: var(--surface); border-color: var(--line); color: var(--muted); }
.sim-switch.enabled { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-strong); }
.settings-tabs { background: var(--surface-soft); border-color: var(--line); }
input, textarea, select { background: var(--surface); color: var(--text); border-color: var(--line); }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input:focus, textarea:focus, select:focus { border-color: var(--primary); box-shadow: var(--focus-ring); }
button:disabled, .button:disabled, input:disabled { background: var(--disabled-bg); color: var(--disabled-fg); cursor: not-allowed; box-shadow: none; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.icon-button { color: var(--muted); background: transparent; }
.icon-button:hover { background: var(--hover-tint); color: var(--text); }
.status-chip { background: var(--surface-soft); color: var(--muted); border: 1px solid var(--line); }
.status-chip.success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.status-chip.warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.status-chip.danger  { background: var(--danger-soft);  color: var(--danger);  border-color: transparent; }
code, pre { background: var(--surface-soft); color: var(--text); }

/* Old hard-coded «синий» hover-акценты тоже подчиняются акценту */
.sim-switch:hover { border-color: var(--primary); }
.button.secondary { background: var(--surface-soft); color: var(--text); border-color: var(--line); }
.button.secondary:hover { border-color: var(--primary); color: var(--primary-strong); background: var(--hover-tint); }

/* ============================================================
   ITERATION-6 · Layout-фиксы: header не перекрывает контент,
   ачивки и статистика не наезжают, empty-state с нормальным
   контрастом. Всё через токены — правило распространяется на
   все страницы, а не только на профиль/выплаты.
   ============================================================ */
.view { padding-top: 4px; }
.page-heading { scroll-margin-top: 90px; }
.profile-head { padding-top: 6px; margin-bottom: 22px; }

/* Achievement stats — сам вне badge-grid, отдельная центрированная карточка */
.achievement-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 620px; margin: 8px auto 24px; padding: 20px 26px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.achievement-stats > div { display: flex; flex-direction: column; gap: 4px; text-align: center; padding: 0 10px; border-right: 1px solid var(--line); }
.achievement-stats > div:last-child { border-right: 0; }
.achievement-stats span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.achievement-stats strong { font-size: 20px; letter-spacing: -.015em; color: var(--text); font-variant-numeric: tabular-nums; }
:root[data-profile-accent] .achievement-stats strong { color: var(--primary-strong); }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 4px; align-items: stretch; }
.badge-grid .achievement { align-self: stretch; }

/* Section spacing на профиле — фиксированный ритм между блоками */
.view[data-view="profile"] .profile-customization { margin-top: 22px; }
.view[data-view="profile"] .section-heading.profile-section { margin-top: 28px; }
.view[data-view="profile"] .admin-entry { margin-top: 24px; }

/* Empty-state получит темный фон в тёмных темах автоматически через var(--surface),
   но защитим от старого styles.css: */
.empty-state { background: var(--surface) !important; color: var(--muted) !important; border-color: var(--line) !important; }
.empty-state strong { color: var(--text) !important; }

/* Top-progress «бегущая стрелка» — тонкая полоса + светящаяся головка. Появляется
   когда идёт запрос к /api/bootstrap (F5 или нажатие «Обновить»), уезжает мягко
   через .done. Цвет всегда — акцент активной темы. Ничего не блокирует, никогда
   не блокирует клики. */
#top-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 400; pointer-events: none; opacity: 0; transition: opacity .4s ease; overflow: hidden; }
#top-progress::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--primary) 12%, var(--primary-strong) 50%, var(--primary) 88%, transparent); transform: translateX(-100%); }
#top-progress.active { opacity: 1; }
#top-progress.active::before { animation: top-progress-run 1.4s cubic-bezier(.4,0,.2,1) infinite; }
#top-progress.done { opacity: 0; transition: opacity .5s cubic-bezier(.22,1,.36,1); }
#top-progress.done::before { animation: top-progress-finish .5s cubic-bezier(.22,1,.36,1) forwards; }
.top-progress-arrow { position: absolute; top: -3px; height: 9px; width: 60px; background: radial-gradient(closest-side, var(--primary) 20%, transparent 70%); filter: blur(4px); opacity: .9; animation: top-progress-arrow-run 1.4s cubic-bezier(.4,0,.2,1) infinite; }
#top-progress:not(.active) .top-progress-arrow { display: none; }
@keyframes top-progress-run     { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes top-progress-arrow-run { 0% { left: -60px; } 100% { left: 100%; } }
@keyframes top-progress-finish   { 0% { transform: translateX(-40%); } 100% { transform: translateX(120%); } }

/* Boot-screen — плавнее уход при первом рендере */
.boot-screen { transition: opacity .5s cubic-bezier(.22,1,.36,1), visibility 0s linear .5s; }
.boot-screen.hiding { opacity: 0; visibility: hidden; }

/* Полупрозрачные overlays под темы — вместо чистого #fff/rgba(255,...) */
:root[data-profile-theme="dark"] .modal-card::before,
:root[data-profile-theme="midnight"] .modal-card::before,
:root[data-profile-theme="forest"] .modal-card::before { display: none; }

/* Табы и активные состояния сохраняют читаемость на любой теме */
.settings-tab, .theme-pill, .filter, .payout-option { transition: background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease; }
.filter { color: var(--muted); background: transparent; }
.filter.active { background: var(--surface-soft); color: var(--text); }
.payout-option { background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.payout-option[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-strong); }
.payout-option .option-state { color: var(--muted); }
.payout-option[aria-pressed="true"] .option-state { color: var(--primary-strong); }

/* ============================================================
   ITERATION-4 · Дизайн-аудит и точечные фиксы:
   - layout auto-verify / rucaptcha секций (не съезжает)
   - все белые поля/сайдбары уходят в тему (использую --surface вместо #fff)
   - placeholder RuCaptcha без разъезда, eye-off вместо прозрачности
   - скрытие поиска у обычных юзеров
   - ачивки: иконки прописаны в preload, размер 24px
   - шкала уровней остаётся читаемой на тёмных темах
   ============================================================ */

/* Скрываем поиск полностью — обычным юзерам он не нужен, а Бобик
   попросил убрать. Иконка/поле объявлены как hidden на HTML-уровне
   plus этим правилом гарантируем что ни один класс их не покажет. */
#payout-search-toggle, #payout-search-wrap { display: none !important; }

/* Auto-verify и RuCaptcha панели — не даём внутренним .settings-section
   унаследовать padding/margin/border из глобального .settings-section,
   иначе внутри карточки-обёртки получалась двойная рамка и заголовок
   с иконкой съезжали. */
.settings-panel > .settings-section,
.settings-panel > .settings-section:first-child { min-height: 0; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none; background: transparent; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.settings-panel > .settings-section .settings-copy { flex: 1 1 260px; min-width: 0; max-width: none; }
.settings-panel > .settings-section .settings-copy h2 { margin: 0; font-size: 16px; line-height: 1.25; }
.settings-panel > .settings-section .settings-copy p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.settings-panel > .settings-section .settings-icon { flex: 0 0 auto; }
.settings-panel > .settings-section .sim-switch { flex-shrink: 0; align-self: center; }
.settings-panel .secret-editor { margin-top: 6px; }
.settings-panel .form-error { margin: 6px 0 0; }

/* Placeholder ключа RuCaptcha не должен разъезжаться моно-шрифтом с
   letter-spacing — раньше в password-режиме поле выглядело как «в в е д и те».
   Убрал моно и трекинг. Точки браузера сами по себе выглядят как обычно. */
.secret-input input[type="password"] { color: var(--text); letter-spacing: normal; font-family: inherit; }
.secret-input input[type="password"]::placeholder { color: var(--muted); letter-spacing: normal; font-family: inherit; }

/* Все белые фоны — уходят в тему. Раньше `.sim-switch`, `.home-payout-row`,
   `.payout-card`, `.chat-popover`, sidebar и т.д. hardcoded background: var(--surface).
   На тёмных темах они оставались белыми — «экран чёрный, поля белые».
   Переводим на var(--surface). Оставляем только те `#fff`, которые
   гарантированно должны быть на цветном заливе (например текст на blue-кнопке). */
:root[data-profile-theme="dark"], :root[data-profile-theme="midnight"], :root[data-profile-theme="forest"] {
  color-scheme: dark;
}
:root[data-profile-theme="dark"] .sidebar, :root[data-profile-theme="midnight"] .sidebar, :root[data-profile-theme="forest"] .sidebar,
:root[data-profile-theme="dark"] .topbar,  :root[data-profile-theme="midnight"] .topbar,  :root[data-profile-theme="forest"] .topbar,
:root[data-profile-theme="dark"] .content, :root[data-profile-theme="midnight"] .content, :root[data-profile-theme="forest"] .content { background: var(--bg); color: var(--text); }
:root[data-profile-theme="dark"] .sim-switch, :root[data-profile-theme="midnight"] .sim-switch, :root[data-profile-theme="forest"] .sim-switch,
:root[data-profile-theme="dark"] .home-payout-row, :root[data-profile-theme="midnight"] .home-payout-row, :root[data-profile-theme="forest"] .home-payout-row,
:root[data-profile-theme="dark"] .payout-card, :root[data-profile-theme="midnight"] .payout-card, :root[data-profile-theme="forest"] .payout-card,
:root[data-profile-theme="dark"] .chat-popover, :root[data-profile-theme="midnight"] .chat-popover, :root[data-profile-theme="forest"] .chat-popover,
:root[data-profile-theme="dark"] .modal-card, :root[data-profile-theme="midnight"] .modal-card, :root[data-profile-theme="forest"] .modal-card,
:root[data-profile-theme="dark"] .notification-drawer, :root[data-profile-theme="midnight"] .notification-drawer, :root[data-profile-theme="forest"] .notification-drawer,
:root[data-profile-theme="dark"] .token-card, :root[data-profile-theme="midnight"] .token-card, :root[data-profile-theme="forest"] .token-card,
:root[data-profile-theme="dark"] .history-item, :root[data-profile-theme="midnight"] .history-item, :root[data-profile-theme="forest"] .history-item,
:root[data-profile-theme="dark"] .account-chip, :root[data-profile-theme="midnight"] .account-chip, :root[data-profile-theme="forest"] .account-chip,
:root[data-profile-theme="dark"] .metric, :root[data-profile-theme="midnight"] .metric, :root[data-profile-theme="forest"] .metric,
:root[data-profile-theme="dark"] .level-panel, :root[data-profile-theme="midnight"] .level-panel, :root[data-profile-theme="forest"] .level-panel,
:root[data-profile-theme="dark"] .telegram-mode-panel, :root[data-profile-theme="midnight"] .telegram-mode-panel, :root[data-profile-theme="forest"] .telegram-mode-panel,
:root[data-profile-theme="dark"] .phone-pool-item, :root[data-profile-theme="midnight"] .phone-pool-item, :root[data-profile-theme="forest"] .phone-pool-item,
:root[data-profile-theme="dark"] .settings-tabs, :root[data-profile-theme="midnight"] .settings-tabs, :root[data-profile-theme="forest"] .settings-tabs,
:root[data-profile-theme="dark"] .settings-tab.active, :root[data-profile-theme="midnight"] .settings-tab.active, :root[data-profile-theme="forest"] .settings-tab.active,
:root[data-profile-theme="dark"] .customization-form input, :root[data-profile-theme="midnight"] .customization-form input, :root[data-profile-theme="forest"] .customization-form input,
:root[data-profile-theme="dark"] .secret-input, :root[data-profile-theme="midnight"] .secret-input, :root[data-profile-theme="forest"] .secret-input,
:root[data-profile-theme="dark"] .insurance-editor, :root[data-profile-theme="midnight"] .insurance-editor, :root[data-profile-theme="forest"] .insurance-editor,
:root[data-profile-theme="dark"] .achievement-stats, :root[data-profile-theme="midnight"] .achievement-stats, :root[data-profile-theme="forest"] .achievement-stats,
:root[data-profile-theme="dark"] .brand-symbol, :root[data-profile-theme="midnight"] .brand-symbol, :root[data-profile-theme="forest"] .brand-symbol { background: var(--surface); color: var(--text); border-color: var(--line); }
/* Тексты внутри - через currentColor / --text */
/* Тёмные темы: .theme-pill.active раньше получал белый --blue-soft →
   выбранная тема выглядела как белая плашка с невидимым текстом.
   Теперь активный чип — полупрозрачный тинт primary поверх surface. */
:root[data-profile-theme="dark"] .theme-pill.active,
:root[data-profile-theme="midnight"] .theme-pill.active,
:root[data-profile-theme="forest"] .theme-pill.active {
  background: color-mix(in oklab, var(--btn-primary-bg) 22%, var(--surface));
  border-color: var(--btn-primary-bg);
  color: var(--text-strong);
}
/* Активный пункт бокового меню — тоже не белая заливка, а мягкий тинт. */
:root[data-profile-theme="dark"] .side-nav .nav-item.active,
:root[data-profile-theme="midnight"] .side-nav .nav-item.active,
:root[data-profile-theme="forest"] .side-nav .nav-item.active,
:root[data-profile-theme="dark"] .bottom-nav .nav-item.active,
:root[data-profile-theme="midnight"] .bottom-nav .nav-item.active,
:root[data-profile-theme="forest"] .bottom-nav .nav-item.active {
  color: #7fb0ff;
  background: color-mix(in oklab, var(--btn-primary-bg) 18%, transparent);
}
:root[data-profile-theme="dark"] .side-nav .nav-item:hover,
:root[data-profile-theme="midnight"] .side-nav .nav-item:hover,
:root[data-profile-theme="forest"] .side-nav .nav-item:hover {
  background: rgba(255,255,255,.06);
  color: var(--text-strong);
  transform: none;
}
:root[data-profile-theme="dark"] .settings-tab, :root[data-profile-theme="midnight"] .settings-tab, :root[data-profile-theme="forest"] .settings-tab,
:root[data-profile-theme="dark"] .theme-pill, :root[data-profile-theme="midnight"] .theme-pill, :root[data-profile-theme="forest"] .theme-pill,
:root[data-profile-theme="dark"] .settings-copy p, :root[data-profile-theme="midnight"] .settings-copy p, :root[data-profile-theme="forest"] .settings-copy p,
:root[data-profile-theme="dark"] h1, :root[data-profile-theme="midnight"] h1, :root[data-profile-theme="forest"] h1,
:root[data-profile-theme="dark"] h2, :root[data-profile-theme="midnight"] h2, :root[data-profile-theme="forest"] h2,
:root[data-profile-theme="dark"] h3, :root[data-profile-theme="midnight"] h3, :root[data-profile-theme="forest"] h3,
:root[data-profile-theme="dark"] label > span, :root[data-profile-theme="midnight"] label > span, :root[data-profile-theme="forest"] label > span,
:root[data-profile-theme="dark"] input, :root[data-profile-theme="midnight"] input, :root[data-profile-theme="forest"] input,
:root[data-profile-theme="dark"] textarea, :root[data-profile-theme="midnight"] textarea, :root[data-profile-theme="forest"] textarea,
:root[data-profile-theme="dark"] .button.secondary, :root[data-profile-theme="midnight"] .button.secondary, :root[data-profile-theme="forest"] .button.secondary { color: var(--text); }
:root[data-profile-theme="dark"] .button.secondary, :root[data-profile-theme="midnight"] .button.secondary, :root[data-profile-theme="forest"] .button.secondary { background: var(--surface-soft); border-color: var(--line); }
/* .metric.primary — светло-голубая, но на dark должна темнеть */
:root[data-profile-theme="dark"] .metric.primary, :root[data-profile-theme="midnight"] .metric.primary, :root[data-profile-theme="forest"] .metric.primary { background: linear-gradient(135deg, rgba(52,120,255,.14) 0%, var(--surface) 100%); }

/* Body / html фон тоже реагирует */
html, body { background: var(--bg); }

/* ============================================================
   DESIGN PASS 7 · TradeMo graphite
   Один финальный слой для темы, акцента, чата, настроек и токенов.
   Он намеренно расположен последним: старые итерации больше не могут
   вернуть белые поля или жёстко заданный синий цвет.
   ============================================================ */

/* Выбранный акцент теперь управляет интерактивным слоем всего кабинета. */
:root[data-profile-accent="aurora"] { --profile-accent: #4f86ff; --profile-accent-strong: #2f6fe8; --profile-accent-soft: #e8f0ff; --accent-rgb: 79,134,255; }
:root[data-profile-accent="ember"]  { --profile-accent: #ff8248; --profile-accent-strong: #e2672e; --profile-accent-soft: #fff0e7; --accent-rgb: 255,130,72; }
:root[data-profile-accent="ice"]    { --profile-accent: #43bff2; --profile-accent-strong: #249bd0; --profile-accent-soft: #e5f7fd; --accent-rgb: 67,191,242; }
:root[data-profile-accent="gold"]   { --profile-accent: #f2ac2f; --profile-accent-strong: #ce8614; --profile-accent-soft: #fff5dd; --accent-rgb: 242,172,47; }
:root[data-profile-accent="rose"]   { --profile-accent: #ee6b9a; --profile-accent-strong: #d3487c; --profile-accent-soft: #fde9f0; --accent-rgb: 238,107,154; }
:root[data-profile-accent="mint"]   { --profile-accent: #38c992; --profile-accent-strong: #1d9e70; --profile-accent-soft: #e2f8ef; --accent-rgb: 56,201,146; }

:root[data-profile-accent] {
  --primary: var(--profile-accent);
  --primary-strong: var(--profile-accent-strong);
  --primary-soft: var(--profile-accent-soft);
  --btn-primary-bg: var(--profile-accent);
  --btn-primary-bg-hover: var(--profile-accent-strong);
  --btn-outline-fg: var(--profile-accent-strong);
  --btn-outline-border: rgba(var(--accent-rgb), .46);
  --btn-outline-bg-hover: rgba(var(--accent-rgb), .10);
  --btn-focus-ring: 0 0 0 3px rgba(var(--accent-rgb), .24);
  --hover-tint: rgba(var(--accent-rgb), .09);
  --active-tint: rgba(var(--accent-rgb), .16);
  --focus-ring: 0 0 0 3px rgba(var(--accent-rgb), .20);
  --chat-outgoing-bg: var(--profile-accent-strong);
}

/* Dark = спокойный графит из референса TradeMo, а не чёрное полотно. */
:root[data-profile-theme="dark"] {
  --bg: #1b2232;
  --surface: #252e42;
  --surface-soft: #2b354b;
  --surface-strong: #303b53;
  --elevated: #344057;
  --text: #f2f4f8;
  --text-strong: #ffffff;
  --muted: #a4aec2;
  --muted-2: #7f8aa2;
  --line: #354158;
  --line-strong: #43506a;
  --disabled-bg: #2a3347;
  --disabled-fg: #69758d;
  --overlay: rgba(8,12,20,.68);
  --shadow-md: 0 8px 20px rgba(7,11,20,.18);
  --shadow-lg: 0 24px 64px rgba(7,11,20,.32);
  --chat-bg: #20283a;
  --chat-bg-strong: #2b354b;
  --chat-incoming-bg: #313c55;
  --chat-incoming-fg: #f4f6fb;
  --chat-time-in: #aeb8cc;
}

:root[data-profile-theme="dark"][data-profile-accent],
:root[data-profile-theme="midnight"][data-profile-accent],
:root[data-profile-theme="forest"][data-profile-accent] {
  --primary-soft: rgba(var(--accent-rgb), .16);
  --btn-primary-bg: var(--profile-accent-strong);
  --btn-primary-bg-hover: color-mix(in oklab, var(--profile-accent-strong) 84%, #ffffff);
  --btn-outline-fg: color-mix(in oklab, var(--profile-accent) 82%, #ffffff);
  --btn-outline-border: rgba(var(--accent-rgb), .42);
  --btn-outline-bg-hover: rgba(var(--accent-rgb), .12);
  --btn-focus-ring: 0 0 0 3px rgba(var(--accent-rgb), .30);
  --focus-ring: 0 0 0 3px rgba(var(--accent-rgb), .26);
}

/* Читаемая типографика без скачка веса при смене состояния поля. */
body { font-weight: 500; line-height: 1.45; }
h1, h2, h3, strong { font-weight: 650; letter-spacing: 0; }
.page-heading h1 { font-weight: 650; }
.page-heading p, .settings-copy p, .token-card small, .profile-customization p { color: var(--muted); font-weight: 500; }
button, input, textarea, select { font-weight: 550; letter-spacing: 0; }
.secret-input input,
.secret-input input[type="password"],
.secret-input input[type="text"] { font-family: inherit; font-size: 14px; font-weight: 550; letter-spacing: 0; }

/* Компактные TradeMo-кнопки: иконка 16px, спокойная заливка, без мигания. */
.button { min-height: 36px; padding: 0 13px; border-radius: 7px; font-size: 13px; font-weight: 600; transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 100ms ease; }
.button svg { width: 16px; height: 16px; stroke-width: 1.8; }
.button.primary { box-shadow: 0 2px 7px rgba(var(--accent-rgb), .18); }
.button.primary:hover { box-shadow: 0 3px 10px rgba(var(--accent-rgb), .22); }
.button:active { transform: translateY(1px); }
.icon-button, .chat-compose button, .chat-dialog-compose button { transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.brand-symbol { background: transparent !important; border: 0 !important; box-shadow: none; }
.brand-logo { display: block; width: 30px; height: 30px; object-fit: contain; }
.brand-symbol.large .brand-logo { width: 46px; height: 46px; }
.massmo-nav-mark { width: 18px; height: 18px; object-fit: contain; flex: 0 0 auto; }
.token-import-icon .massmo-nav-mark { width: 22px; height: 22px; }

/* Акцент должен быть заметен во всех интерактивных узлах. */
.brand b, .eyebrow, .nav-item.active, .settings-tab.active, .settings-tab.active svg,
.theme-pill.active, .token-import-icon, .inline-search:focus-within > svg,
.progression-summary b, .achievement-stats strong { color: var(--primary); }
.brand-symbol, .chat-launcher, .chat-compose button, .chat-dialog-compose button,
.progress-track > span, .level-panel .progress-track > span { background: var(--primary); }
.side-nav .nav-item.active, .bottom-nav .nav-item.active,
.settings-tab.active, .theme-pill.active { background: var(--primary-soft); color: var(--text-strong); }
.side-nav .nav-item.active, .settings-tab.active, .theme-pill.active { border-color: rgba(var(--accent-rgb), .38); }
.account-avatar, .avatar-wrap, .swatch.active { border-color: var(--primary); }

/* Настройки: компактная иерархия вместо тяжёлых вложенных плит. */
.settings-tabs { gap: 4px; padding: 4px; border-radius: 8px; background: var(--surface-soft); box-shadow: none; }
.settings-tab { min-height: 40px; padding: 0 14px; border: 1px solid transparent; border-radius: 7px; transform: none !important; }
.settings-panel,
.settings-section,
.profile-customization,
.rucaptcha-panel,
.phone-pool-panel,
.proxy-pool-panel { margin: 10px 0; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: none; }
.settings-panel:hover, .settings-section:hover { border-color: var(--line-strong); box-shadow: none; }
.settings-icon { border-radius: 7px; }
.payout-options { gap: 8px; }
.payout-option { min-height: 58px; border-radius: 7px; background: var(--surface-soft); }
.payout-option[aria-pressed="true"] { background: var(--primary-soft); border-color: rgba(var(--accent-rgb), .58); color: var(--text-strong); }
.payout-option[aria-pressed="true"] .option-state { color: var(--primary); }
.sim-switch.enabled { background: var(--primary-soft); border-color: rgba(var(--accent-rgb), .6); color: var(--text-strong); }
.sim-switch.enabled .mini-track { background: var(--primary); }
.number-control input, .amount-grid input { background: var(--surface-soft); border-color: var(--line); }
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }

/* Токены: единое поле поиска, без белых боковин и отдельной плитки лупы. */
.inline-import { border-radius: 8px; background: var(--surface); border-color: var(--line); box-shadow: none; }
.token-import-toggle { grid-template-columns: 38px minmax(0, 1fr); border-radius: 7px; }
.token-import-toggle:hover, .inline-import.expanded .token-import-toggle { background: var(--surface-soft); }
.token-import-icon { color: var(--primary); background: var(--primary-soft); border-color: rgba(var(--accent-rgb), .28); }
.token-import-chevron { display: none !important; }
.inline-search,
.inline-search.wide,
.token-search { width: 100%; min-height: 44px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--surface-soft); box-shadow: none; overflow: hidden; }
.inline-search:focus-within { color: var(--primary); border-color: rgba(var(--accent-rgb), .72); background: var(--surface-soft); box-shadow: var(--focus-ring); }
.inline-search > svg { width: 17px; height: 17px; color: currentColor; }
.inline-search input,
.inline-search input[type="search"] { min-width: 0; padding: 0; border: 0 !important; outline: 0; color: var(--text) !important; background: transparent !important; box-shadow: none !important; appearance: none; -webkit-appearance: none; }
.inline-search input::-webkit-search-decoration,
.inline-search input::-webkit-search-cancel-button,
.inline-search input::-webkit-search-results-button,
.inline-search input::-webkit-search-results-decoration { display: none; -webkit-appearance: none; }
.inline-search button { width: 28px; height: 28px; border-radius: 6px; }
.token-card { border-radius: 8px; background: var(--surface); box-shadow: none; }
.token-card:hover { border-color: var(--line-strong); box-shadow: 0 8px 22px rgba(8,13,24,.10); }

/* Чат: ни одной белой рамки или белой подложки в тёмных темах. */
.chat-popover { border-radius: 8px; border-color: var(--line); background: var(--surface); box-shadow: var(--shadow-lg); }
.chat-welcome, .chat-conversation, .chat-widget-head, .chat-dialog-head { color: var(--text); background: var(--surface); border-color: var(--line); }
.chat-feed, .chat-dialog-feed { color: var(--text); background-color: var(--chat-bg); }
.chat-compose, .chat-dialog-compose { padding: 10px 11px; border-top: 1px solid var(--line); background: var(--surface); }
.chat-compose textarea, .chat-dialog-compose textarea { min-height: 44px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: var(--surface-soft); box-shadow: none; }
.chat-compose textarea:focus, .chat-dialog-compose textarea:focus { border-color: rgba(var(--accent-rgb), .72); background: var(--surface-soft); box-shadow: var(--focus-ring); }
.chat-compose button, .chat-dialog-compose button { width: 42px; height: 42px; border: 1px solid rgba(var(--accent-rgb), .42); border-radius: 7px; color: #fff; background: var(--primary); box-shadow: 0 3px 10px rgba(var(--accent-rgb), .18); }
.chat-message.outgoing, .chat-feed .chat-message.user, .chat-dialog-feed .chat-message.admin { background: var(--chat-outgoing-bg); color: var(--chat-outgoing-fg); }
.chat-message.incoming, .chat-feed .chat-message.admin, .chat-dialog-feed .chat-message.user { background: var(--chat-incoming-bg); color: var(--chat-incoming-fg); }
:root[data-profile-theme="dark"] .chat-popover,
:root[data-profile-theme="midnight"] .chat-popover,
:root[data-profile-theme="forest"] .chat-popover,
:root[data-profile-theme="dark"] .chat-compose,
:root[data-profile-theme="midnight"] .chat-compose,
:root[data-profile-theme="forest"] .chat-compose,
:root[data-profile-theme="dark"] .chat-dialog-compose,
:root[data-profile-theme="midnight"] .chat-dialog-compose,
:root[data-profile-theme="forest"] .chat-dialog-compose { background: var(--surface) !important; border-color: var(--line) !important; }
:root[data-profile-theme="dark"] .chat-compose textarea,
:root[data-profile-theme="midnight"] .chat-compose textarea,
:root[data-profile-theme="forest"] .chat-compose textarea,
:root[data-profile-theme="dark"] .chat-dialog-compose textarea,
:root[data-profile-theme="midnight"] .chat-dialog-compose textarea,
:root[data-profile-theme="forest"] .chat-dialog-compose textarea { color: var(--text) !important; background: var(--surface-soft) !important; border-color: var(--line) !important; }

/* Уведомления: массовое удаление получает каскадное затухание и схлопывание. */
.notification-list { overflow: hidden; }
.notification-item.bulk-dismissing { animation: notification-bulk-out 260ms cubic-bezier(.4,0,.2,1) var(--dismiss-delay, 0ms) both; pointer-events: none; }
@keyframes notification-bulk-out {
  0% { opacity: 1; transform: translateX(0) scale(1); max-height: 140px; margin-block: 0; }
  65% { opacity: 0; transform: translateX(22px) scale(.985); max-height: 140px; margin-block: 0; }
  100% { opacity: 0; transform: translateX(22px) scale(.985); max-height: 0; margin-block: -5px; padding-block: 0; border-width: 0; }
}
.notification-item.unread { border-color: rgba(var(--accent-rgb), .42); background: var(--primary-soft); }
.notification-icon { color: var(--primary); background: var(--primary-soft); }

@media (prefers-reduced-motion: reduce) {
  .notification-item.bulk-dismissing { animation-duration: 1ms; animation-delay: 0ms; }
}

/* Центр уведомлений открывается как единая сцена: сначала мягко проявляется
   фон, затем входит панель, после чего карточки спокойно собираются сверху
   вниз. Управляемые классы не дают повторному клику оборвать переход. */
.notification-drawer {
  opacity: 0;
  transform: translate3d(34px, 0, 0);
  animation: none;
  transition:
    opacity 360ms cubic-bezier(.22, 1, .36, 1),
    transform 520ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 520ms cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.notification-drawer.open {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.notification-drawer.closing {
  opacity: 0;
  transform: translate3d(26px, 0, 0);
  animation: none;
  transition-duration: 280ms, 380ms, 380ms;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.drawer-scrim {
  opacity: 0;
  animation: none;
  transition: opacity 420ms cubic-bezier(.22, 1, .36, 1), backdrop-filter 420ms ease;
  will-change: opacity;
}
.drawer-scrim.open { opacity: 1; }
.drawer-scrim.closing {
  opacity: 0;
  animation: none;
  transition-duration: 300ms;
}
.notification-drawer.opening .notification-item {
  animation: drawer-notification-in 460ms cubic-bezier(.22, 1, .36, 1) var(--drawer-item-delay, 0ms) both;
}
.notification-drawer.opening .drawer-empty {
  animation: drawer-notification-in 460ms 90ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes drawer-notification-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .notification-drawer, .drawer-scrim,
  .notification-drawer.opening .notification-item,
  .notification-drawer.opening .drawer-empty {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}

@media (max-width: 760px) {
  .settings-panel, .settings-section, .profile-customization { padding: 15px; }
  .settings-tabs { overflow-x: auto; scrollbar-width: none; }
  .settings-tab { min-width: 118px; }
  .chat-popover { border-radius: 8px; }
}

/* DESIGN PASS 8: eliminate legacy light surfaces in dark themes. */
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) {
  --muted: #aeb8ca;
  --muted-strong: #cbd2df;
}

:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .brand b { color: var(--text-strong); }
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .brand { color: var(--text-strong) !important; }
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .side-nav .nav-item,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .bottom-nav .nav-item { color: var(--muted); }
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .side-nav .nav-item:hover,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .bottom-nav .nav-item:hover { color: var(--text-strong); background: rgba(var(--accent-rgb), .08); }
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .side-nav .nav-item.active,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .bottom-nav .nav-item.active {
  color: var(--primary) !important;
  background: rgba(var(--accent-rgb), .14) !important;
  border-color: rgba(var(--accent-rgb), .34) !important;
}

:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .progression-track,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .progress-track { background: var(--surface-strong); }
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .progression-track i { border-top-color: var(--primary); background: rgba(var(--accent-rgb), .38); }
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .home-payout-tab.active { color: var(--text-strong); background: rgba(var(--accent-rgb), .14); }
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .payout-deadline { color: var(--text); border-color: var(--line); background: var(--surface-strong); }
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .payout-state { color: #8bd69b; background: rgba(75,184,91,.14); }

:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .integration-state,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .insurance-saved-value,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .payout-option-icon,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .option-state,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .bank-scope-toggle,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .bank-search,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .thread-avatar,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .audience-option,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .preview-bubble {
  color: var(--text);
  border-color: var(--line);
  background: var(--surface-soft);
  box-shadow: none;
}

:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .bank-scope-toggle:not(.selective) > span:first-child,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .bank-scope-toggle.selective > span:last-child,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .payout-option[aria-pressed="true"] .payout-option-icon,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .payout-option[aria-pressed="true"] .option-state,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .audience-option:has(input:checked) {
  color: var(--primary);
  border-color: rgba(var(--accent-rgb), .44);
  background: rgba(var(--accent-rgb), .14);
  box-shadow: none;
}

:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .integration-state.connected { color: #8bd69b; border-color: rgba(75,184,91,.34); background: rgba(75,184,91,.12); }
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .integration-state.warning { color: #efbd71; border-color: rgba(226,163,65,.36); background: rgba(226,163,65,.12); }
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .preview-bubble b,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .preview-bubble p { color: var(--text); }
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .count-chip { color: var(--primary); border: 1px solid rgba(var(--accent-rgb), .30); background: rgba(var(--accent-rgb), .14); }

:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .rucaptcha-panel > .section-heading,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .phone-pool-panel > .section-heading,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .proxy-pool-panel > .section-heading { border-color: var(--line); background: var(--surface-soft); }

.rucaptcha-panel .settings-copy h2 { font-size: 16px; font-weight: 650; }
.rucaptcha-panel .settings-copy p { font-size: 12.5px; font-weight: 500; }
.rucaptcha-panel .secret-input input { font-weight: 550; }

:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .chat-feed,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .chat-dialog-feed { border-color: transparent; background-color: var(--chat-bg) !important; }
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .chat-message { border-color: transparent; }

/* Midnight keeps its blue identity, but its layers must remain readable. */
:root[data-profile-theme="midnight"] {
  --bg: #171e2d;
  --surface: #222b3e;
  --surface-soft: #2a354a;
  --surface-strong: #323e55;
  --elevated: #394660;
  --text: #f3f5f9;
  --text-strong: #ffffff;
  --muted: #b4bfd0;
  --muted-2: #8f9bb0;
  --line: #3b4860;
  --line-strong: #4b5a74;
  --disabled-bg: #2a3448;
  --disabled-fg: #78859c;
  --overlay: rgba(10, 15, 24, .72);
  --shadow-md: 0 8px 22px rgba(8, 13, 23, .24);
  --shadow-lg: 0 24px 64px rgba(8, 13, 23, .38);
  --hover-tint: rgba(176, 194, 224, .10);
  --active-tint: rgba(176, 194, 224, .16);
  --chat-bg: #1c2535;
  --chat-bg-strong: #2e3a52;
  --chat-incoming-bg: #303d56;
  --chat-incoming-fg: #f4f6fa;
  --chat-pattern-color: rgba(180, 198, 230, .14);
}

:root[data-profile-theme="midnight"] .brand,
:root[data-profile-theme="midnight"] .brand b { color: var(--text-strong) !important; }
:root[data-profile-theme="midnight"] .sidebar,
:root[data-profile-theme="midnight"] .topbar,
:root[data-profile-theme="midnight"] .content,
:root[data-profile-theme="midnight"] .app-shell { background: var(--bg); }
:root[data-profile-theme="midnight"] .topbar-status,
:root[data-profile-theme="midnight"] .page-heading p,
:root[data-profile-theme="midnight"] .section-heading p,
:root[data-profile-theme="midnight"] .settings-copy p,
:root[data-profile-theme="midnight"] .token-card small,
:root[data-profile-theme="midnight"] .account-chip small { color: var(--muted); }
:root[data-profile-theme="midnight"] .button.secondary,
:root[data-profile-theme="midnight"] .icon-button,
:root[data-profile-theme="midnight"] .sim-switch { color: var(--text); }
:root[data-profile-theme="midnight"] .button.secondary,
:root[data-profile-theme="midnight"] .sim-switch { background: var(--surface-soft); border-color: var(--line); }
:root[data-profile-theme="midnight"] .metric.primary,
:root[data-profile-theme="midnight"] .settings-tab.active,
:root[data-profile-theme="midnight"] .theme-pill.active,
:root[data-profile-theme="midnight"] .home-payout-tab.active { background: rgba(var(--accent-rgb), .16); }

/* DESIGN PASS 9: compact personal RuCaptcha editor.
   This scoped layout wins over the legacy admin secret-editor rules without
   changing the phone/proxy pool forms that still use their older grid. */
.rucaptcha-user-panel {
  padding: 14px 16px;
}

.rucaptcha-user-panel > .rucaptcha-section,
.rucaptcha-user-panel > .rucaptcha-section:first-child {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(440px, 510px);
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
}

.rucaptcha-user-panel .settings-copy {
  align-items: center;
  gap: 12px;
}

.rucaptcha-user-panel .settings-copy h2 {
  font-size: 15px;
  line-height: 1.25;
}

.rucaptcha-user-panel .settings-copy p {
  max-width: 560px;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.4;
}

.rucaptcha-user-panel .secret-editor,
.rucaptcha-user-panel .secret-editor.inline {
  width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto;
  grid-template-rows: auto;
  align-items: end;
  gap: 0 8px;
}

.rucaptcha-user-panel .secret-editor > label {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 40px auto;
  gap: 3px;
}

.rucaptcha-user-panel .secret-editor > label > span,
.rucaptcha-user-panel .secret-editor > label > small {
  grid-column: auto;
  grid-row: auto;
  min-height: 0;
  margin: 0;
  letter-spacing: 0;
  text-transform: none;
}

.rucaptcha-user-panel .secret-editor > label > span {
  font-size: 10.5px;
  font-weight: 600;
}

.rucaptcha-user-panel .secret-editor > label > small {
  overflow: hidden;
  margin-top: 11px;
  font-size: 10.5px;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rucaptcha-user-panel .secret-input {
  grid-column: auto;
  grid-row: auto;
  min-height: 40px;
  border-color: var(--line);
  background: var(--surface-soft);
}

.rucaptcha-user-panel .secret-input input {
  height: 38px;
  padding: 0 11px;
  font-size: 12.5px;
}

.rucaptcha-user-panel .secret-input input:focus,
.rucaptcha-user-panel .secret-input input:focus-visible {
  border-color: transparent;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

.rucaptcha-user-panel .secret-input .icon-button.small {
  width: 34px;
  height: 34px;
  margin-right: 2px;
}

.rucaptcha-user-panel .secret-actions {
  grid-column: auto;
  grid-row: auto;
  align-self: center;
  gap: 7px;
  padding-top: 15px;
}

.rucaptcha-user-panel .secret-actions .button {
  min-height: 34px;
  padding-inline: 11px;
  white-space: nowrap;
}

.rucaptcha-user-panel .form-error {
  grid-column: 1 / -1;
  margin: 6px 0 0;
}

@media (max-width: 980px) {
  .rucaptcha-user-panel > .rucaptcha-section,
  .rucaptcha-user-panel > .rucaptcha-section:first-child {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .rucaptcha-user-panel .secret-editor,
  .rucaptcha-user-panel .secret-editor.inline {
    max-width: 620px;
  }
}

@media (max-width: 620px) {
  .rucaptcha-user-panel {
    padding: 13px;
  }

  .rucaptcha-user-panel .secret-editor,
  .rucaptcha-user-panel .secret-editor.inline {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .rucaptcha-user-panel .secret-actions {
    padding-top: 0;
    flex-direction: row;
  }

  .rucaptcha-user-panel .secret-actions .button {
    width: auto;
  }
}

/* DESIGN PASS 10: one consistent Inter text system across the application. */
html,
body {
  font-family: Inter, "Segoe UI Variable Text", "Segoe UI Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  text-rendering: optimizeLegibility;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  line-height: 18px;
}

button,
a,
[role="button"] {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Tokens import is a disclosure: keep its affordance visible in both states. */
.token-import-toggle {
  grid-template-columns: 38px minmax(0, 1fr) 20px;
}

.token-import-chevron {
  display: block !important;
  width: 18px;
  height: 18px;
  justify-self: end;
  color: var(--muted);
  stroke-width: 1.8;
  transform: rotate(0deg);
  transition: color 160ms ease, transform 280ms cubic-bezier(.16, 1, .3, 1);
}

.token-import-toggle:hover .token-import-chevron {
  color: var(--text-strong);
}

.inline-import.expanded .token-import-chevron {
  transform: rotate(180deg);
}

/* Compact USDT mark beside the live sidebar rate. */
.usdt-rate-value {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.usdt-rate-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  object-fit: contain;
}

.usdt-rate-value strong {
  min-width: 0;
  line-height: 18px;
}

/* DESIGN PASS 11: explicit refresh feedback, local save confirmation and compact toasts. */
#refresh-button.loading svg,
#admin-refresh-top.loading svg {
  animation: refresh-turn 720ms linear infinite;
  transform-origin: center;
}

@keyframes refresh-turn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.settings-save-state {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  transition: color 220ms ease;
}

.settings-save-check {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  opacity: 0;
  transform: scale(.72);
  color: var(--success);
}

.settings-save-check svg { width: 100%; height: 100%; overflow: visible; }
.settings-save-check circle,
.settings-save-check path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.settings-save-check circle { stroke-dasharray: 76; stroke-dashoffset: 76; }
.settings-save-check path { stroke-dasharray: 18; stroke-dashoffset: 18; }
.settings-save-state.success { color: var(--success); }
.settings-save-state.success .settings-save-check { animation: save-check-pop 520ms cubic-bezier(.16,1,.3,1) both; }
.settings-save-state.success .settings-save-check circle { animation: save-check-draw 480ms cubic-bezier(.65,0,.35,1) forwards; }
.settings-save-state.success .settings-save-check path { animation: save-check-draw 320ms 210ms cubic-bezier(.65,0,.35,1) forwards; }

@keyframes save-check-pop {
  0% { opacity: 0; transform: scale(.62); }
  62% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes save-check-draw { to { stroke-dashoffset: 0; } }

.toast {
  z-index: 360;
  min-width: 250px;
  min-height: 54px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 13px 10px 10px;
  border-color: color-mix(in srgb, var(--success) 30%, var(--line));
  border-radius: 8px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 96%, var(--success) 4%);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .18), 0 2px 8px rgba(15, 23, 42, .08);
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(.97);
  transition: none;
  overflow: hidden;
}

.toast::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--success);
  transform: scaleY(0);
  transform-origin: bottom;
}

.toast-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--success);
  background: var(--success-soft);
}
.toast-icon svg { width: 17px; height: 17px; }
.toast-message { min-width: 0; color: var(--text); font-size: 12px; font-weight: 600; line-height: 1.45; }
.toast.error { color: var(--text); border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); background: color-mix(in srgb, var(--surface) 96%, var(--danger) 4%); }
.toast.error::after { background: var(--danger); }
.toast.error .toast-icon { color: var(--danger); background: var(--danger-soft); }
.toast.visible { animation: toast-card-in 380ms cubic-bezier(.16,1,.3,1) both; }
.toast.visible::after { animation: toast-accent-in 420ms 80ms cubic-bezier(.16,1,.3,1) both; }
.toast.leaving { animation: toast-card-out 260ms cubic-bezier(.4,0,1,1) both; }

@keyframes toast-card-in {
  0% { opacity: 0; transform: translate3d(0, 16px, 0) scale(.97); }
  66% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes toast-card-out { to { opacity: 0; transform: translate3d(0, 10px, 0) scale(.98); } }
@keyframes toast-accent-in { to { transform: scaleY(1); } }

.achievements-section { margin-top: 28px; }
.achievements-section .section-heading.profile-section { margin: 0 0 12px; }
.achievements-section .achievement-stats {
  width: 100%;
  max-width: none;
  margin: 0 0 18px;
  padding: 15px 18px;
  border-radius: 8px;
  box-shadow: none;
}

@media (max-width: 620px) {
  .settings-save-state { justify-content: center; }
  .achievements-section .achievement-stats { grid-template-columns: 1fr; gap: 0; }
  .achievements-section .achievement-stats > div { padding: 10px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .achievements-section .achievement-stats > div:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #refresh-button.loading svg,
  #admin-refresh-top.loading svg,
  .settings-save-state.success .settings-save-check,
  .settings-save-state.success .settings-save-check circle,
  .settings-save-state.success .settings-save-check path,
  .toast.visible,
  .toast.visible::after,
  .toast.leaving { animation-duration: 1ms !important; animation-delay: 0s !important; }
}

/* DESIGN PASS 12: calm TradeMo connection flow and a fully themed onboarding card. */
.onboarding-card {
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.onboarding-card .onboarding-head h2,
.onboarding-card .onboarding-option strong {
  color: var(--text-strong);
}

.onboarding-card .onboarding-head p,
.onboarding-card .onboarding-option small,
.onboarding-card .form-field > span,
.onboarding-card .form-field > small,
.onboarding-card .insurance-help {
  color: var(--muted);
}

.onboarding-card .form-field > span,
.onboarding-card .insurance-editor-head > span {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

.onboarding-card input,
.onboarding-card textarea {
  color: var(--text);
  border-color: var(--line);
  background: var(--surface-soft);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

.onboarding-card input::placeholder,
.onboarding-card textarea::placeholder {
  color: var(--muted-2);
  opacity: 1;
}

.onboarding-trademo {
  border-color: var(--line);
  background: var(--surface-soft);
}

.onboarding-trademo-link {
  border-top-color: var(--line);
}

.onboarding-check {
  border-color: var(--line-strong);
  background: var(--surface);
}

.onboarding-insurance {
  box-sizing: border-box;
  border-color: var(--line);
  background: var(--surface);
  padding: 11px 12px 12px;
  gap: 8px;
  overflow: hidden;
}

.onboarding-insurance .insurance-editor-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px 12px;
  padding-inline: 1px;
}

.onboarding-insurance .insurance-editor-head > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.onboarding-insurance .insurance-editor-head > small {
  min-width: 0;
  max-width: 170px;
  justify-self: end;
  text-align: right;
  white-space: normal;
  overflow-wrap: anywhere;
}

.onboarding-insurance .insurance-input-row {
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 42px;
}

.onboarding-insurance .insurance-help {
  display: block;
  min-width: 0;
  padding-inline: 1px;
  overflow-wrap: anywhere;
}

.onboarding-insurance .insurance-input-row input {
  border-color: var(--line-strong);
  background: var(--surface-soft);
}

.onboarding-insurance .insurance-confirm {
  color: #fff;
  border-color: var(--primary);
  background: var(--primary);
}

.onboarding-insurance .insurance-editor-head > small {
  color: var(--primary);
  font-size: 10px;
  font-weight: 600;
}

@media (max-width: 420px) {
  .onboarding-insurance .insurance-editor-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .onboarding-insurance .insurance-editor-head > small {
    max-width: 100%;
    justify-self: start;
    text-align: left;
  }
}

.trademo-link-section .button,
.trademo-link-section button,
.onboarding-card .button,
.onboarding-card button {
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .trademo-link-section,
  .trademo-link-details,
  .trademo-link-details-inner,
  .trademo-panel-toggle svg,
  .integration-connected.is-new,
  .integration-connected.is-new .integration-success-mark {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}

/* DESIGN PASS 13: first-paint theme integrity, WebView polish and unread badges. */
.boot-screen {
  color: var(--text);
  background: var(--bg);
}

.boot-line {
  background: var(--surface-strong);
}

.boot-line::after {
  background: var(--primary);
}

.notification-count,
.chat-widget-count,
.searching-count {
  box-sizing: border-box;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  color: #fff;
  background: #398bd2;
  box-shadow: 0 2px 7px rgba(20, 70, 125, .28);
  font-family: Inter, "Segoe UI Variable Text", "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 16px;
  text-align: center;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.notification-count { top: -6px; right: -7px; }
.chat-widget-count { top: -4px; right: -4px; }

/* Every legacy light-only surface receives a theme-token equivalent. */
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) body,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .auth-shell,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .boot-screen {
  color: var(--text);
  background: var(--bg);
}

:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .modal-card,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .onboarding-card,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .chat-welcome,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .chat-compose,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .chat-dialog-compose,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .notification-item,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .token-import-toggle,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .trademo-profile-summary,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .proof-drop,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .captcha-image-frame,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .verification-stage,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .verification-result,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .search-start-steps li,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .search-blocked-item,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .search-review-item,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .empty-inline,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .phone-pool-item,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .proxy-pool-item {
  color: var(--text);
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
}

:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .field-control,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .inline-import textarea,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .number-control input,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .amount-grid input,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .form-field input,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .form-field textarea,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .bank-scope-toggle,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .bank-search,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .select-shell,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .inline-search,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .topbar-search,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .insurance-input-row input,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .captcha-entry input,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .secret-input,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .secret-input input {
  color: var(--text);
  border-color: var(--line);
  background: var(--surface-soft);
  box-shadow: none;
}

:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .modal-card,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .onboarding-card {
  background-image: none;
  box-shadow: var(--shadow-lg);
}

:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .modal-icon,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .search-start-orbit {
  color: var(--primary);
  background: rgba(var(--accent-rgb), .14);
}

:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .modal-icon.warning {
  color: #efbd71;
  background: rgba(246, 166, 35, .14);
}

:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .modal-icon.success {
  color: #8bd69b;
  background: rgba(67, 189, 79, .14);
}

:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .notification-item.unread,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .search-start-steps li.active {
  color: var(--text);
  border-color: rgba(var(--accent-rgb), .38);
  background: rgba(var(--accent-rgb), .12);
}

:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .operation-alert,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .search-review,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .verification-stage.warning {
  color: #efbd71;
  border-color: rgba(246, 166, 35, .34);
  background: color-mix(in srgb, var(--surface) 86%, rgba(246, 166, 35, .28));
}

:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .operation-alert.error,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .integration-error,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .search-blocked,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .search-start-steps li.failed,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .verification-stage.failed,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .verification-result.failed,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .verification-decision {
  color: #ff9ca4;
  border-color: rgba(255, 77, 85, .34);
  background: color-mix(in srgb, var(--surface) 88%, rgba(255, 77, 85, .26));
}

:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .payout-card.action-pending::after {
  background: color-mix(in srgb, var(--bg) 68%, transparent);
}

:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .chat-welcome-copy h2,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .chat-welcome-copy p,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .search-blocked-item code,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .search-review-copy code {
  color: var(--text);
}

@media (max-width: 760px) {
  .bottom-nav {
    height: auto;
    min-height: calc(68px + env(safe-area-inset-bottom));
    grid-auto-rows: 62px;
    padding: 4px max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left));
    border-color: var(--line);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    box-shadow: 0 -8px 28px rgba(20, 30, 55, .08);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
  }

  .bottom-nav .nav-item {
    width: 100%;
    min-width: 0;
    height: 58px;
    gap: 4px;
    padding: 5px 2px;
    color: var(--muted);
    background: transparent;
    transform: none !important;
    transition: color 160ms ease, background-color 160ms ease, opacity 160ms ease;
  }

  .bottom-nav .nav-item svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: currentColor;
    stroke: currentColor;
  }

  .bottom-nav .nav-item small {
    display: block;
    width: 100%;
    max-width: none;
    overflow: hidden;
    color: inherit;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 12px;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
  }

  .bottom-nav .nav-item.active {
    color: var(--primary) !important;
    background: var(--primary-soft) !important;
  }

  .auto-verify-panel,
  .auto-verify-panel .settings-section,
  .auto-verify-panel .auto-verify-section {
    min-height: 0 !important;
    height: auto !important;
  }

  .auto-verify-panel .auto-verify-section {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 14px !important;
  }

  .auto-verify-panel .verification-setting-block {
    padding: 16px;
  }

  .auto-verify-panel .settings-copy,
  .auto-verify-panel .settings-copy > div {
    min-width: 0;
  }

  .auto-verify-panel .settings-copy p {
    overflow-wrap: anywhere;
  }

  .auto-verify-panel .auto-verify-switch {
    width: auto;
    min-width: 118px;
    justify-self: start;
    align-self: start;
    margin-left: 54px;
  }

  .auto-verify-panel .auto-verify-indicator {
    margin-left: 54px;
  }
}

@media (max-width: 480px) {
  .auto-verify-panel .verification-setting-block {
    padding: 14px;
  }

  .auto-verify-panel .settings-copy {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
  }

  .auto-verify-panel .settings-icon {
    width: 36px;
    height: 36px;
  }

  .auto-verify-panel .auto-verify-switch,
  .auto-verify-panel .auto-verify-indicator {
    margin-left: 48px;
  }

  .auto-verify-panel .auto-verify-indicator {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .auto-verify-panel .auto-verify-indicator > svg {
    display: none;
  }
}

@media (hover: hover) and (pointer: fine) and (max-width: 760px) {
  .bottom-nav .nav-item:hover {
    color: var(--primary);
    background: var(--hover-tint);
    transform: none !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .bottom-nav .nav-item:hover {
    color: var(--muted);
    background: transparent;
    transform: none !important;
  }

  .bottom-nav .nav-item.active:hover {
    color: var(--primary) !important;
    background: var(--primary-soft) !important;
  }
}

@media (max-width: 390px) {
  .bottom-nav .nav-item small { font-size: 9px; }
  .bottom-nav.admin-bottom-nav .nav-item small { font-size: 8px; }
}

/* STATUS ICON PASS
   Success, warning and error signs share one visual grammar. Containers keep
   their local dimensions, while the symbol weight, border and tint stay
   consistent across light, dark, midnight and forest themes. */
:where(
  .auth-icon,
  .modal-icon,
  .integration-success-mark,
  .home-payout-state,
  .notification-icon,
  .toast-icon,
  .verification-result-icon,
  .verification-decision-icon,
  .verification-log-item .log-icon,
  .phone-pool-icon
) > svg {
  stroke-width: 1.9;
}

.operation-alert > svg,
.token-error > svg {
  stroke-width: 1.9;
}

:where(
  .auth-icon.success,
  .modal-icon.success,
  .home-payout-state.completed,
  .notification-item.success .notification-icon,
  .toast:not(.error) .toast-icon,
  .verification-result:not(.failed) .verification-result-icon,
  .verification-log-item.ok .log-icon,
  .phone-pool-item.proxy-valid .phone-pool-icon
) {
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 30%, var(--line));
  background: color-mix(in srgb, var(--surface) 90%, var(--success) 10%);
  box-shadow: none;
}

:where(
  .auth-icon.warning,
  .modal-icon.warning,
  .notification-item.broadcast .notification-icon,
  .operation-alert:not(.error),
  .home-payout-state:not(.completed):not(.canceled):not(.expired):not(.refunded):not(.verification_failed)
) {
  color: var(--warning);
  border: 1px solid color-mix(in srgb, var(--warning) 32%, var(--line));
  background: color-mix(in srgb, var(--surface) 90%, var(--warning) 10%);
  box-shadow: none;
}

:where(
  .home-payout-state.canceled,
  .home-payout-state.expired,
  .home-payout-state.refunded,
  .home-payout-state.verification_failed,
  .notification-item.error .notification-icon,
  .toast.error .toast-icon,
  .operation-alert.error,
  .token-error,
  .verification-result.failed .verification-result-icon,
  .verification-decision-icon,
  .verification-log-item.fail .log-icon
) {
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line));
  background: color-mix(in srgb, var(--surface) 90%, var(--danger) 10%);
  box-shadow: none;
}

/* The connected-profile mark is deliberately unframed: it must read as a
   clean status sign rather than another button or a heavy filled badge. */
.integration-success-mark {
  border: 0;
  color: var(--success);
  background: transparent;
  box-shadow: none;
}

:where(
  .integration-success-mark,
  .auth-icon.success,
  .modal-icon.success,
  .verification-result-icon,
  .verification-decision-icon
) > svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) :where(
  .auth-icon.success,
  .modal-icon.success,
  .home-payout-state.completed,
  .notification-item.success .notification-icon,
  .toast:not(.error) .toast-icon,
  .verification-result:not(.failed) .verification-result-icon,
  .verification-log-item.ok .log-icon,
  .phone-pool-item.proxy-valid .phone-pool-icon
) {
  color: #8bd69b;
  border-color: color-mix(in srgb, #8bd69b 34%, var(--line));
  background: color-mix(in srgb, var(--surface) 88%, #43bd4f 12%);
}

:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) :where(
  .auth-icon.warning,
  .modal-icon.warning,
  .notification-item.broadcast .notification-icon,
  .operation-alert:not(.error),
  .home-payout-state:not(.completed):not(.canceled):not(.expired):not(.refunded):not(.verification_failed)
) {
  color: #efbd71;
  border-color: color-mix(in srgb, #efbd71 34%, var(--line));
  background: color-mix(in srgb, var(--surface) 88%, #f6a623 12%);
}

:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) :where(
  .home-payout-state.canceled,
  .home-payout-state.expired,
  .home-payout-state.refunded,
  .home-payout-state.verification_failed,
  .notification-item.error .notification-icon,
  .toast.error .toast-icon,
  .operation-alert.error,
  .token-error,
  .verification-result.failed .verification-result-icon,
  .verification-decision-icon,
  .verification-log-item.fail .log-icon
) {
  color: #ff9ca4;
  border-color: color-mix(in srgb, #ff9ca4 34%, var(--line));
  background: color-mix(in srgb, var(--surface) 88%, #ff4d55 12%);
}

:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .integration-success-mark {
  color: #8bd69b;
  border: 0;
  background: transparent;
}

/* DESIGN PASS 14: compact settings footer in Telegram WebView. */
@media (max-width: 760px) {
  .content {
    padding-bottom: calc(108px + env(safe-area-inset-bottom));
  }

  .settings-form .form-actions,
  .profile-customization .form-actions {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 13px 12px 15px;
  }

  .settings-form .settings-save-state,
  .profile-customization .settings-save-state {
    width: 100%;
    min-width: 0;
    min-height: 20px;
    justify-content: center;
    gap: 6px;
    padding: 0 8px;
    font-size: 10.5px;
    font-weight: 550;
    line-height: 1.35;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .settings-form .settings-save-check,
  .profile-customization .settings-save-check {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }

  .settings-form .form-actions .button,
  .profile-customization .form-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 0 12px;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 650;
    line-height: 18px;
    white-space: nowrap;
  }

  .settings-form .form-actions .button svg,
  .profile-customization .form-actions .button svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
  }

  .chat-widget {
    right: 12px;
    bottom: calc(82px + env(safe-area-inset-bottom));
  }

  .chat-launcher {
    width: 50px;
    height: 50px;
    box-shadow: 0 9px 24px rgba(var(--accent-rgb), .26);
  }

  .chat-launcher svg {
    width: 24px;
    height: 24px;
  }
}

/* DESIGN PASS 16: compact token cards and accent-aware topbar controls. */
.token-card {
  display: grid;
  grid-template-rows: auto auto;
  gap: 0;
  min-height: 0;
  padding: 14px 16px;
}

.token-card .token-row {
  align-items: flex-start;
  gap: 16px;
}

.token-card .token-settings-row {
  align-items: center;
  gap: 12px;
  margin-top: 11px;
  padding-top: 11px;
}

.token-card .token-settings-summary {
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  line-height: 18px;
}

.token-card .token-settings-summary svg {
  color: var(--primary);
}

.token-card .token-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 7px;
}

.token-card .token-actions-row .button,
.token-card .token-actions-row .icon-button {
  width: auto;
  min-width: 0;
  min-height: 34px;
  margin: 0;
}

.token-card .token-actions-row .icon-button {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}

.search-switch .ss-ico {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--primary);
  background: var(--primary-soft);
}

.search-switch .ss-ico svg {
  width: 15px;
  height: 15px;
}

.notification-button,
.searching-indicator {
  color: var(--primary);
  border-color: rgba(var(--accent-rgb), .34);
  background: var(--primary-soft);
}

.notification-button:hover,
.searching-indicator:hover {
  color: var(--on-primary);
  border-color: var(--primary);
  background: var(--primary);
}

.searching-indicator .searching-pulse {
  border-color: var(--primary);
}

.searching-count {
  border-color: var(--surface);
  background: var(--primary);
}

@media (max-width: 760px) {
  .token-card {
    padding: 13px;
  }

  .token-card .token-row {
    gap: 7px;
  }

  .token-card .token-settings-row {
    align-items: stretch;
    gap: 9px;
    margin-top: 10px;
    padding-top: 10px;
  }

  .token-card .token-actions-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 38px;
    gap: 7px;
  }

  .token-card .token-actions-row .button {
    width: 100%;
    min-height: 38px;
    padding-inline: 9px;
    font-size: 11px;
    line-height: 15px;
    white-space: normal;
  }

  .token-card .token-actions-row .icon-button {
    width: 38px;
    height: 38px;
    min-height: 38px;
    flex-basis: 38px;
  }
}

@media (max-width: 390px) {
  .token-card .token-actions-row {
    grid-template-columns: minmax(0, 1fr) 38px;
  }

  .token-card .token-actions-row .button[data-token-settings] {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .token-card .token-actions-row .icon-button {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 370px) {
  .settings-form .form-actions .button,
  .profile-customization .form-actions .button {
    font-size: 12px;
  }
}

/* DESIGN PASS 17: loader that stays readable on wide monitors and Telegram WebView. */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 500;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
  color: var(--text);
  background: var(--bg);
  opacity: 1;
  transform: none;
  overflow: hidden;
  transition: opacity 440ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 440ms;
}

.boot-screen.hiding,
.boot-screen.dismissed {
  opacity: 0;
  visibility: hidden;
  transform: none;
  pointer-events: none;
}

.boot-screen-inner {
  width: min(390px, calc(100vw - 44px));
  display: grid;
  justify-items: center;
  text-align: center;
  animation: boot-content-in 520ms cubic-bezier(.22, 1, .36, 1) both;
}

.boot-brand-mark {
  position: relative;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--primary);
  background: transparent;
  box-shadow: none;
}

.boot-brand-mark::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-radius: 50%;
  background: var(--primary-soft);
  box-shadow: 0 10px 28px rgba(var(--accent-rgb), .12);
}

.boot-brand-mark img {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  display: block;
}

.boot-brand-orbit {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(var(--accent-rgb), .28);
  border-radius: 50%;
  pointer-events: none;
  animation: boot-ring-pulse 2s cubic-bezier(.22, 1, .36, 1) infinite;
}

.boot-screen .boot-title {
  margin-top: 24px;
  color: var(--text-strong);
  font-family: Inter, "Segoe UI Variable Text", "Segoe UI", sans-serif;
  font-size: clamp(23px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  animation: boot-fade-up 480ms 80ms ease both;
}

.boot-title b {
  color: var(--primary);
  font-weight: 700;
}

.boot-status {
  margin-top: 9px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 550;
  line-height: 20px;
  animation: boot-fade-up 480ms 150ms ease both;
}

.boot-progress {
  position: relative;
  width: min(100%, 312px);
  height: 4px;
  margin-top: 25px;
  border-radius: 999px;
  background: var(--surface-strong);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .08);
  overflow: hidden;
  animation: boot-fade-up 480ms 220ms ease both;
}

.boot-progress > i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: inherit;
  background: var(--primary);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .32);
  animation: boot-progress-run 1.25s cubic-bezier(.65, 0, .35, 1) infinite;
}

.boot-caption {
  margin-top: 12px;
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  animation: boot-fade-up 480ms 280ms ease both;
}

.boot-screen.boot-error .boot-brand-mark {
  color: var(--danger);
  border-color: rgba(255, 77, 85, .28);
  background: var(--danger-soft);
  box-shadow: none;
}

.boot-screen.boot-error .boot-brand-orbit,
.boot-screen.boot-error .boot-progress,
.boot-screen.boot-error .boot-caption {
  display: none;
}

.boot-screen.boot-error .boot-status {
  width: min(100%, 360px);
  overflow-wrap: anywhere;
}

.boot-screen.boot-error .button {
  margin-top: 22px;
}

@keyframes boot-content-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes boot-ring-pulse {
  0% { opacity: 0; transform: scale(.78); }
  28% { opacity: .7; }
  100% { opacity: 0; transform: scale(1.18); }
}

@keyframes boot-progress-run {
  0% { transform: translateX(-115%); }
  55% { transform: translateX(105%); }
  100% { transform: translateX(255%); }
}

@media (max-width: 520px) {
  .boot-screen-inner { width: min(310px, calc(100vw - 44px)); }
  .boot-brand-mark { width: 66px; height: 66px; }
  .boot-brand-mark img { width: 36px; height: 36px; }
  .boot-screen .boot-title { margin-top: 21px; font-size: 22px; }
  .boot-status { margin-top: 7px; font-size: 13px; }
  .boot-progress { width: min(100%, 250px); margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-screen-inner,
  .boot-brand-orbit,
  .boot-title,
  .boot-status,
  .boot-progress,
  .boot-progress > i,
  .boot-caption {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* AUTH SHELL: registration and login keep the original calm blue identity.
   Profile theme/accent starts affecting the interface only after authentication. */
.auth-shell {
  --primary: #3478ff;
  --primary-strong: #175ee8;
  --primary-soft: #e9f0ff;
  --blue: #3478ff;
  --blue-strong: #175ee8;
  --blue-soft: #e9f0ff;
  --btn-primary-bg: #3478ff;
  --btn-primary-bg-hover: #2b6bef;
  --btn-outline-fg: #2b6bef;
  --btn-outline-border: #bfd2f8;
  --btn-outline-bg-hover: rgba(52, 120, 255, .07);
  --btn-focus-ring: 0 0 0 3px rgba(52, 120, 255, .24);
  --focus-ring: 0 0 0 3px rgba(52, 120, 255, .20);
  --accent-rgb: 52, 120, 255;
  color: #273247;
  background: #eef4ff;
}

.auth-shell .brand,
.auth-shell .auth-heading h1 {
  color: #153a82;
}

.auth-shell .brand b,
.auth-shell .text-button,
.auth-shell .back-button {
  color: #3478ff;
}

.auth-shell .auth-card {
  color: #273247;
  border-color: #dce6f7;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(39, 66, 124, .12);
}

.auth-shell .field-control {
  color: #a7b6cf;
  border-color: #dce4f1;
  background: #fbfcfe;
}

.auth-shell .field-control:focus-within {
  border-color: #3478ff;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(52, 120, 255, .09);
}

/* DESIGN PASS 15: readable typography on desktop and Telegram WebView.
   Inter is loaded as a variable font, so intermediate weights stay crisp
   instead of being synthesized differently by Chromium and WebView. */
html,
body,
button,
input,
textarea,
select {
  font-family: Inter, "Segoe UI Variable Text", "Segoe UI Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: var(--text);
  font-weight: 500;
}

.button,
.text-button,
.icon-button,
.nav-item,
.settings-tab,
.home-payout-tab,
.theme-pill,
.workspace-switch-link {
  font-weight: 620;
}

.workspace-switch-link {
  min-width: max-content;
  color: var(--text-strong);
  font-size: 13px;
  line-height: 18px;
}

.workspace-switch-link span {
  display: inline-block;
  color: inherit;
  font-size: inherit;
  font-weight: 650;
  line-height: inherit;
}

.side-metric-payouts {
  gap: 8px;
  padding: 12px 12px 13px;
}

.side-metric-title {
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  font-size: 12px;
  font-weight: 650;
  line-height: 16px;
}

.side-metric > span {
  color: color-mix(in srgb, var(--text) 72%, var(--muted));
  font-size: 11.5px;
  font-weight: 600;
  line-height: 16px;
}

.side-metric-value-line {
  gap: 7px;
}

.side-metric-value-line strong {
  font-size: 20px;
  font-weight: 720;
  line-height: 22px;
}

.side-metric-value-line span {
  color: color-mix(in srgb, var(--text) 72%, var(--muted));
  font-size: 11px;
  font-weight: 620;
  line-height: 15px;
}

.side-metric-caption {
  color: color-mix(in srgb, var(--text) 68%, var(--muted));
  font-size: 11px;
  font-weight: 550;
  line-height: 15px;
}

.secure-caption,
.account-chip small,
.metric small,
.progression-summary small,
.progression-day > span,
.progression-day small,
.section-heading p,
.settings-copy p,
.home-payout-primary small,
.home-payout-payment code,
.home-payout-owner code,
.home-payout-id,
.payout-deadline span,
.detail-cell > span,
.token-caption,
.token-line code,
.phone-pool-item small,
.phone-page-summary small,
.verification-log-item .log-field,
.rucaptcha-user-panel .secret-editor > label > span,
.rucaptcha-user-panel .secret-editor > label > small,
.onboarding-card .form-field > span,
.onboarding-card .insurance-editor-head > span {
  font-size: 11.5px;
  font-weight: 550;
  line-height: 16px;
}

.eyebrow,
.admin-auth-label,
.payout-state,
.live-badge,
.status-chip,
.count-chip {
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
}

.home-payout-tab,
.home-payout-cancel,
.insurance-toggle,
.sim-switch {
  font-size: 12px;
  line-height: 16px;
}

.detail-cell strong,
.copy-inline code,
.token-finance,
.token-status,
.bank-tag,
.settings-save-state {
  font-weight: 600;
}

.settings-save-state {
  color: color-mix(in srgb, var(--text) 68%, var(--muted));
  font-size: 12px;
  line-height: 16px;
}

.form-actions > .settings-save-state {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .side-metric-title,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .side-metric-value-line span,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .side-metric-caption,
:root:is([data-profile-theme="dark"], [data-profile-theme="midnight"], [data-profile-theme="forest"]) .settings-save-state {
  color: color-mix(in srgb, var(--text) 76%, var(--muted));
}

@media (max-width: 760px) {
  .bottom-nav .nav-item small {
    font-size: 10px;
    font-weight: 650;
    line-height: 13px;
  }

  .bottom-nav.admin-bottom-nav .nav-item small {
    font-size: 9.5px;
  }

  .settings-form .settings-save-state,
  .profile-customization .settings-save-state {
    font-size: 11.5px;
    font-weight: 600;
    line-height: 16px;
  }
}

@media (max-width: 390px) {
  .bottom-nav .nav-item small {
    font-size: 9.5px;
  }

  .bottom-nav.admin-bottom-nav .nav-item small {
    font-size: 9px;
  }
}