@charset "UTF-8";
/* ==========================================================================
   Split Builder с живым превью (dark glassmorphism)
   ========================================================================== */

:root {
  /* --- DARK THEME (по умолчанию) --- */
  --bg:           #0a0f24;
  --bg-2:         #0c1330;
  --surface:      rgba(20, 26, 61, .60);
  --surface-2:    rgba(27, 34, 75, .80);
  --surface-3:    rgba(35, 43, 90, .90);
  --line:         rgba(255,255,255,.06);
  --line-2:       rgba(255,255,255,.10);
  --text:         #eef0fb;
  --text-2:       #cdd4f5;
  --muted:        #9099c2;
  --muted-2:      #6a73a0;
  --primary:      #818cf8;
  --primary-2:    #a5b4fc;
  --primary-soft: rgba(129,140,248,.18);
  --primary-soft-2: rgba(129,140,248,.32);
  --accent:       #22d3ee;
  --accent-2:     #2563eb;
  --accent-2-soft: rgba(37,99,235,.22);
  --cta-1:        #903ae2;
  --cta-2:        #5853bf;
  --cta-shadow:   rgba(144,58,226,.40);
  --magic:        #c084fc;
  --magic-soft:   rgba(168,85,247,.20);
  --success:      #34d399;
  --warning:      #fbbf24;
  --danger:       #f87171;
  --r:    14px;
  --r-lg: 20px;
  --shadow-glow: 0 14px 50px rgba(0,0,0,.45);

  /* Декоративные слои фона — выносим в переменные, чтоб переопределить в light */
  --bg-radial-1: radial-gradient(900px 600px at 10% 6%,   rgba(99,102,241,.42), transparent 55%);
  --bg-radial-2: radial-gradient(900px 600px at 90% 18%,  rgba(56,189,248,.30), transparent 55%);
  --bg-radial-3: radial-gradient(700px 600px at 100% 50%, rgba(168,85,247,.22), transparent 60%);
  --bg-radial-4: radial-gradient(700px 500px at 50% 95%,  rgba(34,211,238,.26), transparent 55%);
}

/* --- LIGHT THEME --- */
:root[data-theme="light"] {
  --bg:           #f5f7fc;
  --bg-2:         #ffffff;
  --surface:      rgba(255, 255, 255, .80);
  --surface-2:    rgba(240, 244, 252, .85);
  --surface-3:    rgba(228, 234, 250, .92);
  --line:         rgba(15, 23, 42, .10);
  --line-2:       rgba(15, 23, 42, .18);
  --text:         #1a1f3a;
  --text-2:       #364069;
  --muted:        #4a5578;       /* потемнее для контраста на светлом */
  --muted-2:      #6a7592;
  --primary:      #6366f1;
  --primary-2:    #4f46e5;
  --primary-soft: rgba(99,102,241,.12);
  --primary-soft-2: rgba(99,102,241,.22);
  --accent:       #0891b2;     /* потемнее cyan для контраста на светлом */
  --accent-2:     #1d4ed8;
  --accent-2-soft: rgba(29,78,216,.14);
  --cta-1:        #7c3aed;
  --cta-2:        #5b21b6;
  --cta-shadow:   rgba(124,58,237,.35);
  --magic:        #9333ea;
  --magic-soft:   rgba(168,85,247,.14);
  --shadow-glow:  0 8px 32px rgba(99,102,241,.16);

  --bg-radial-1: radial-gradient(900px 600px at 10% 6%,   rgba(99,102,241,.16),  transparent 55%);
  --bg-radial-2: radial-gradient(900px 600px at 90% 18%,  rgba(56,189,248,.14),  transparent 55%);
  --bg-radial-3: radial-gradient(700px 600px at 100% 50%, rgba(168,85,247,.10),  transparent 60%);
  --bg-radial-4: radial-gradient(700px 500px at 50% 95%,  rgba(34,211,238,.12),  transparent 55%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background:
    var(--bg-radial-1),
    var(--bg-radial-2),
    var(--bg-radial-3),
    var(--bg-radial-4),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 15px; line-height: 1.5;
  min-height: 100%;
  /* overflow-x: clip — не создаёт scroll container, в отличие от hidden,
     поэтому не ломает position: sticky у потомков (sidebar) */
  overflow-x: clip;
}
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: var(--text); font-family: inherit; }

/* Decorative blobs */
.bg-blob {
  position: fixed; z-index: 0;
  width: 600px; height: 600px; border-radius: 50%;
  filter: blur(120px); opacity: .35;
  pointer-events: none;
}
.blob-1 { background: rgba(99,102,241,.55); top: -200px; left: -160px; }
.blob-2 { background: rgba(37,99,235,.48); top: 30%; right: -250px; }
.blob-3 { background: rgba(34,211,238,.45); bottom: -200px; left: 30%; }
:root[data-theme="light"] .blob-1 { background: rgba(99,102,241,.18); }
:root[data-theme="light"] .blob-2 { background: rgba(37,99,235,.16); }
:root[data-theme="light"] .blob-3 { background: rgba(34,211,238,.16); }
:root[data-theme="light"] .bg-blob { opacity: .25; filter: blur(160px); }

/* Light overrides for hard-coded dark surfaces */
:root[data-theme="light"] .topbar { background: rgba(255,255,255,.70); }
:root[data-theme="light"] .footbar { background: rgba(255,255,255,.88); }
:root[data-theme="light"] .footbar.need-topup {
  background: linear-gradient(0deg, rgba(248,113,113,.08), rgba(255,255,255,.92));
}
:root[data-theme="light"] .modal { background: rgba(255,255,255,.98); }
:root[data-theme="light"] .modal-backdrop { background: rgba(15,23,42,.40); }
:root[data-theme="light"] .toast { background: var(--surface-2); color: var(--text); border-color: var(--line-2); }
:root[data-theme="light"] .toast.success { background: #d1fae5; color: #065f46; border-color: rgba(16,185,129,.40); }
:root[data-theme="light"] .toast.warn    { background: #fef3c7; color: #92400e; border-color: rgba(245,158,11,.40); }
:root[data-theme="light"] .toast.error   { background: #fee2e2; color: #991b1b; border-color: rgba(239,68,68,.40); }

/* Inset highlights (light line on dark) — на светлой теме не нужны */
:root[data-theme="light"] .block,
:root[data-theme="light"] .data-card,
:root[data-theme="light"] .preview-card {
  box-shadow: 0 4px 16px rgba(15,23,42,.06);
}

/* Data cards (history/team) — поярче фон + подсвеченный head чтоб разделы не сливались */
:root[data-theme="light"] .data-card {
  background: rgba(255, 255, 255, .95);
  border-color: rgba(15, 23, 42, .08);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .04), 0 1px 0 rgba(15, 23, 42, .02) inset;
}
:root[data-theme="light"] .data-card-head {
  background: linear-gradient(180deg, rgba(241, 245, 255, .80), rgba(248, 250, 254, .60));
  border-bottom: 1px solid rgba(99, 102, 241, .10);
}
:root[data-theme="light"] .data-card-title {
  color: var(--text);
  font-weight: 700;
}

/* Таблицы — зебра + контрастные заголовки */
:root[data-theme="light"] .data-table th {
  background: rgba(99, 102, 241, .08);
  color: #4a5578;
  font-weight: 600;
  border-bottom: 1px solid rgba(99, 102, 241, .14);
}
:root[data-theme="light"] .data-table tbody tr:nth-child(even) td {
  background: rgba(99, 102, 241, .035);
}
:root[data-theme="light"] .data-table tbody tr:hover td {
  background: rgba(99, 102, 241, .10);
}
:root[data-theme="light"] .data-table td {
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}
:root[data-theme="light"] .data-table .muted {
  color: #5f6b8e;
}

/* Block cards (форма заказа) — тоже распознаваемее */
:root[data-theme="light"] .block {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(15, 23, 42, .08);
}

/* Coming soon — серая палитра для светлой темы */
:root[data-theme="light"] .coming-soon-card {
  background: rgba(226, 232, 245, .95);
  border: 1px solid rgba(15, 23, 42, .10);
  filter: none; /* без opacity-фильтра — текст становится читаемым */
}
:root[data-theme="light"] .coming-soon-card .cs-icon {
  background: rgba(99, 102, 241, .12);
  color: rgba(79, 70, 229, .75);
}
:root[data-theme="light"] .coming-soon-card .cs-name    { color: rgba(15, 23, 42, .80); font-weight: 700; }
:root[data-theme="light"] .coming-soon-card .cs-sub     { color: rgba(15, 23, 42, .60); }
:root[data-theme="light"] .coming-soon-card .cs-price   { color: #c2410c; font-weight: 700; }
:root[data-theme="light"] .coming-soon-card .cs-eta     { color: rgba(15, 23, 42, .55); }
:root[data-theme="light"] .coming-soon-card .cs-example { color: #c2410c; font-weight: 500; }
/* Ribbon — warm-orange (peach → orange) */
:root[data-theme="light"] .cs-ribbon {
  background: linear-gradient(135deg, #fb923c, #ea580c);
  color: #fff;
  box-shadow: 0 2px 8px rgba(234,88,12,.30);
}

/* Combobox dropdown */
:root[data-theme="light"] .combobox-dropdown { background: rgba(255,255,255,.98); }

/* Status pill backgrounds — лучше читаются с более насыщенным фоном */
:root[data-theme="light"] .status-pill.done    { color: #047857; background: rgba(16,185,129,.16); }
:root[data-theme="light"] .status-pill.working { color: #b45309; background: rgba(245,158,11,.18); }
:root[data-theme="light"] .status-pill.notPay  { color: #b91c1c; background: rgba(239,68,68,.16); }
:root[data-theme="light"] .status-pill.pending { color: #b45309; background: rgba(245,158,11,.18); }
body > *:not(.bg-blob):not(.topbar):not(.footbar):not(.toast):not(.modal-backdrop) { position: relative; z-index: 1; }

/* TOPBAR */
.topbar {
  background: rgba(10,15,36,.65);
  backdrop-filter: blur(16px) saturate(1.6);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.topbar-inner {
  max-width: 1320px; margin: 0 auto;
  padding: 12px 20px;
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; /* безопасный фолбэк: если что-то не помещается — wrap */
}
.brand { flex-shrink: 0; }
.topnav { flex-shrink: 0; }
.topbar-right { flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand-mark {
  width: 32px; height: 32px;
  display: block;
  object-fit: contain;
}
.brand-text { font-weight: 600; }
.brand-text em { font-style: normal; color: var(--muted); font-weight: 500; }

.topnav { display: flex; gap: 4px; margin-left: 8px; }
.topnav-item {
  padding: 8px 14px; border-radius: 999px;
  color: var(--muted); text-decoration: none; font-weight: 500;
  cursor: pointer; transition: background .15s, color .15s;
  white-space: nowrap;
}
.topnav-item:hover { background: var(--surface); color: var(--text); }
.topnav-item.active { background: var(--surface); color: var(--text); border: 1px solid var(--line-2); }

/* Точка «на этой вкладке ждут вашего действия» (сейчас — неотвеченное
   приглашение в команду, класс вешает header.php).
   Только псевдоэлемент: подпись пункта меню ставится через textContent
   (data-i18n), и вложенный <span> стёрло бы первой же сменой языка.
   Пульсация конечная — точка остаётся, а мигание не раздражает весь сеанс. */
.topnav-item.has-alert { position: relative; }
.topnav-item.has-alert::after {
  content: "";
  position: absolute; top: 5px; right: 7px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--bg), 0 0 10px var(--danger);
  animation: navAlertDot 1.8s ease-in-out 4;
}
@keyframes navAlertDot {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.5); opacity: .7; }
}

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.lang-switch {
  background: var(--surface); padding: 3px; border-radius: 999px;
  display: flex; border: 1px solid var(--line);
}
.lang-btn {
  border: 0; background: transparent; color: var(--muted);
  padding: 5px 12px; border-radius: 999px; font-weight: 600; font-size: 12px;
}
.lang-btn.active { background: var(--surface-2); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.3); }

/* Theme toggle */
.theme-toggle {
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-grid; place-items: center; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--line-2); background: var(--surface-2); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-icon { display: none; }
:root .theme-icon-moon { display: block; }                /* dark mode: показываем луну (→ переключит в light) */
:root[data-theme="light"] .theme-icon-sun { display: block; } /* light mode: показываем солнце (→ переключит в dark) */
:root[data-theme="light"] .theme-icon-moon { display: none; }

.balance-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 8px 6px 12px;
  color: var(--text);
}
/* Кликабельная область пополнения (иконка + сумма). Сохраняет gap pill'а. */
.balance-open {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; border-radius: 999px;
  transition: opacity .15s;
  -webkit-tap-highlight-color: transparent;
}
.balance-open:hover { opacity: .82; }
.balance-open:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.balance-icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: linear-gradient(135deg, #903ae2, #5853bf);
  color: white;
}
.balance-icon svg { width: 16px; height: 16px; }
.balance-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.balance-label { font-size: 11px; color: var(--muted); }
.balance-value { font-weight: 700; font-size: 14px; }
.balance-value em { font-style: normal; color: var(--muted); margin-left: 1px; }
.balance-refresh {
  border: 0; background: transparent; cursor: pointer;
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%; color: var(--muted);
  transition: color .15s, background .15s, transform .25s;
}
.balance-refresh:hover { color: var(--accent); background: var(--surface-2); }
.balance-refresh svg { width: 14px; height: 14px; }
.balance-refresh.spin { animation: spin .8s linear infinite; }
@keyframes spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }

/* Встроенная кнопка пополнения в balance-pill */
.balance-topup {
  border: 0; cursor: pointer;
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  /* Brand gradient — повторяет цвета лого WhiteGen */
  background: linear-gradient(135deg, #38bdf8, #2563eb);
  color: white;
  box-shadow: 0 2px 10px rgba(56,189,248,.45);
  transition: filter .15s, transform .15s, box-shadow .15s;
}
.balance-topup:hover {
  filter: brightness(1.08); transform: scale(1.06);
  box-shadow: 0 3px 14px rgba(56,189,248,.60);
}
.balance-topup svg { width: 14px; height: 14px; }

/* User-menu — chip + dropdown ─────────────────────────────────────────── */
.user-menu { position: relative; }
.user-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px 4px 4px; color: var(--text);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.user-chip:hover { background: var(--surface-2); border-color: var(--primary); }
.user-chip-chevron {
  width: 12px; height: 12px; color: var(--muted);
  transition: transform .15s;
}
.user-chip[aria-expanded="true"] .user-chip-chevron { transform: rotate(180deg); }

.user-menu-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 200px; z-index: 60;
  /* Сплошной фон (без --surface прозрачности) + блюр для подложки */
  background: rgba(20, 26, 61, .96);
  border: 1px solid var(--line);
  border-radius: 12px; padding: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  animation: userMenuFadeIn .15s ease-out;
}
.user-menu-dropdown[hidden] { display: none; }
@keyframes userMenuFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.user-menu-head { border-bottom: 1px solid var(--line); margin-bottom: 4px; padding-bottom: 4px; }
.user-menu-email {
  padding: 8px 10px 6px; font-size: 12px; color: var(--muted);
  word-break: break-all; line-height: 1.4;
}
.user-menu-email:empty { display: none; }
.user-menu-id {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 10px; background: transparent; border: 0; border-radius: 8px;
  cursor: pointer; transition: background .12s; text-align: left; font-family: inherit;
}
.user-menu-id:hover { background: var(--surface-2); }
.user-menu-id-label {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; flex-shrink: 0;
  color: var(--muted-2); text-transform: uppercase;
}
.user-menu-id-value { flex: 1; font-size: 12.5px; color: var(--text-2); }
.user-menu-id svg { width: 13px; height: 13px; color: var(--muted); flex-shrink: 0; transition: color .12s; }
.user-menu-id:hover svg { color: var(--primary-2); }
.user-menu-id.copied svg, .user-menu-id.copied .user-menu-id-value { color: var(--success); }
.user-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 8px;
  background: transparent; border: 0; color: var(--text);
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer; transition: background .12s, color .12s;
  text-align: left; text-decoration: none;
}
.user-menu-item:hover { background: var(--surface-2); }
.user-menu-item.active { background: var(--primary-soft); color: var(--primary-2); }
.user-menu-item.active svg { color: var(--primary-2); }
.user-menu-item svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--muted); }
.user-menu-logout:hover { color: #f87171; }
.user-menu-logout:hover svg { color: #f87171; }
:root[data-theme="light"] .user-menu-dropdown {
  background: rgba(255, 255, 255, .98);
  border-color: rgba(0,0,0,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.user-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #0a0f24; font-weight: 700; display: grid; place-items: center; font-size: 12px;
}
.user-name {
  font-size: 13px; font-weight: 500;
  max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 10px; padding: 9px 16px;
  font-weight: 500; font-size: 14px;
  transition: filter .15s, transform .15s, box-shadow .15s;
  background: transparent; color: var(--text);
  white-space: nowrap;
  text-decoration: none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--cta-1), var(--cta-2));
  color: white;
  box-shadow: 0 6px 18px var(--cta-shadow);
}
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-primary:disabled, .btn-primary[disabled] {
  background: var(--surface-2); color: var(--muted-2);
  box-shadow: none; cursor: not-allowed; transform: none;
}
.btn-block { width: 100%; padding: 12px; font-weight: 600; }
.btn-warn {
  background: linear-gradient(135deg, var(--warning), #fb923c);
  color: #1a1300; box-shadow: 0 6px 18px rgba(251,191,36,.4);
}

/* LAYOUT */
.layout {
  max-width: 1400px; margin: 0 auto;
  padding: 28px 24px 110px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
}
.builder { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.preview-wrap { height: 100%; }

/* Sticky footbar */
.footbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: rgba(10,15,36,.88);
  backdrop-filter: blur(14px) saturate(1.4);
  border-top: 1px solid var(--line);
  z-index: 40;
}
.footbar-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.footbar-summary { display: flex; align-items: center; gap: 18px; min-width: 0; flex: 1; }
.fs-line { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; min-width: 0; overflow: hidden; }
.fs-label { font-weight: 600; color: var(--text); }
.fs-divider { color: var(--muted-2); }
.fs-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-total { display: flex; flex-direction: column; align-items: center; line-height: 1.1; min-width: 110px; }
.fs-total-value { font-size: 20px; font-weight: 700; }
.fs-total-after { font-size: 11px; color: var(--muted); margin-top: 3px; }
.fs-total-after.warn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(248,113,113,.12); color: #f87171;
  padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.fs-total-after.warn .ba-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #f87171;
  box-shadow: 0 0 0 3px rgba(248,113,113,.20);
}
.footbar-actions { display: flex; gap: 8px; }
.footbar.need-topup { background: linear-gradient(0deg, rgba(248,113,113,.06), rgba(10,15,36,.90)); }

/* Sidebar (правая) — степ-лист */
.pc-side-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding: 0 0 10px; border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.side-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.side-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px; border-radius: 10px;
  cursor: pointer; transition: background .15s;
  position: relative;
}
.side-item::after {
  content: ""; position: absolute; left: 25px; top: 38px; bottom: -2px;
  width: 1px; background: var(--line);
}
.side-item:last-child::after { display: none; }
.side-item:hover { background: var(--surface-2); }
.side-item.active { background: var(--primary-soft); }
.side-item.done .side-num { background: var(--primary); color: white; }
.side-item.done .side-num::before { content: "\2713"; }
.side-item.done .side-num > * { display: none; }
.side-item.active .side-num { background: var(--primary); color: white; box-shadow: 0 0 0 3px var(--primary-soft); }
.side-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-2); color: var(--muted-2);
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
  flex: 0 0 28px;
  transition: background .15s, color .15s, box-shadow .15s;
  position: relative; z-index: 1;
}
.side-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.side-name { font-weight: 500; font-size: 14px; }
.side-summary {
  font-size: 12px; color: var(--muted); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 220px;
}
.side-summary:empty::before { content: "\2014"; color: var(--muted-2); }

/* BLOCK (glass card) */
.block {
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255,255,255,.05);
  scroll-margin-top: 88px;
}
.block-head { margin-bottom: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.block-head h2 { font-size: 19px; letter-spacing: -.012em; font-weight: 600; }
.block-head .block-hint { color: var(--muted); font-size: 13px; }
.block-head .example-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent); text-decoration: none;
  font-size: 13px; font-weight: 500;
  padding: 4px 10px; border-radius: 8px;
  background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.20);
  transition: background .15s, border-color .15s;
}
.block-head .example-link:hover { background: rgba(34,211,238,.18); border-color: var(--accent); }
.tier-pill-example {
  margin-left: auto; align-self: center;
  font-size: 10.5px; color: var(--accent);
  text-decoration: none; opacity: .8;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(34,211,238,.08);
  transition: opacity .15s, background .15s;
  white-space: nowrap;
}
.tier-pill-example:hover { opacity: 1; background: rgba(34,211,238,.20); }
.tier-pill.disabled .tier-pill-example { display: none; }

/* Copy-from panel (top) */
.copy-panel {
  background: linear-gradient(135deg, rgba(34,211,238,.10), rgba(99,102,241,.10));
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.copy-panel-icon {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px;
  background: var(--surface-2); color: var(--accent);
  display: grid; place-items: center;
}
.copy-panel-icon svg { width: 16px; height: 16px; }
.copy-panel-body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.copy-panel-title { font-weight: 600; font-size: 13.5px; }
.copy-panel-hint { font-size: 12px; color: var(--muted); }
.copy-panel select {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 10px; font-size: 12.5px; max-width: 100%;
}
.copy-panel select:focus { outline: 0; border-color: var(--primary); }
.copy-panel select option { background: var(--bg-2); color: var(--text); }
.copy-panel .copy-panel-cb { min-width: 260px; max-width: 100%; }
.copy-panel .copy-panel-cb .combobox-trigger { font-size: 12.5px; padding: 8px 28px 8px 12px; }

/* Categories — grid */
.cat-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.cat-pill {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  text-align: left; cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s, background .15s;
  color: var(--text); position: relative;
}
.cat-pill:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(99,102,241,.20);
}
.cat-pill.selected {
  border-color: var(--primary);
  background: linear-gradient(135deg, var(--primary-soft), rgba(37,99,235,.12));
  box-shadow: 0 8px 24px rgba(99,102,241,.30);
}
.cat-pill-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--primary-2);
}
.cat-pill-icon svg { width: 18px; height: 18px; }
.cat-pill.selected .cat-pill-icon { background: linear-gradient(135deg, var(--primary), var(--accent-2)); color: white; }
.cat-pill-name { font-weight: 600; font-size: 14px; }
.cat-pill-price { margin-top: auto; font-size: 12px; color: var(--muted); }
.cat-pill-price strong { color: var(--text); font-weight: 700; }

/* Custom featured card */
.cat-custom-card {
  margin-top: 12px;
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(135deg, var(--magic-soft), rgba(99,102,241,.10));
  border: 1px dashed var(--magic);
  border-radius: var(--r-lg);
  padding: 16px 20px;
  cursor: pointer; color: var(--text);
  transition: background .15s, border-color .15s, transform .15s;
  width: 100%; text-align: left;
}
.cat-custom-card:hover {
  background: linear-gradient(135deg, rgba(168,85,247,.26), rgba(99,102,241,.14));
  border-style: solid;
}
.cat-custom-card.selected {
  border-color: var(--magic); border-style: solid;
  box-shadow: 0 8px 24px rgba(168,85,247,.30);
}
.cat-custom-icon {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px;
  background: linear-gradient(135deg, #a855f7, var(--primary));
  color: white; display: grid; place-items: center;
}
.cat-custom-icon svg { width: 20px; height: 20px; }
.cat-custom-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.cat-custom-pre {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--magic);
}
.cat-custom-title { font-weight: 700; font-size: 15px; }
.cat-custom-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.cat-custom-price {
  font-weight: 700; font-size: 15px;
  display: flex; flex-direction: column; align-items: flex-end;
}
.cat-custom-price small { font-size: 11px; font-weight: 500; color: var(--muted); }

/* Coming Soon */
.coming-soon-title {
  margin-top: 16px; margin-bottom: 10px;
  font-size: 13px; color: var(--muted); font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.coming-soon-title::before, .coming-soon-title::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.coming-soon-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.coming-soon-card {
  position: relative;
  background: rgba(20, 25, 50, .30);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: var(--r);
  padding: 16px;
  display: flex; align-items: center; gap: 14px;
  min-height: 100px;
  cursor: not-allowed;
  filter: saturate(.5);
  isolation: isolate;
}
.coming-soon-card .cs-icon {
  background: rgba(255,255,255,.03);
  color: rgba(251,191,36,.5);
}
.coming-soon-card .cs-name { color: rgba(231,236,255,.45); }
.coming-soon-card .cs-sub { color: rgba(147,197,253,.4); }
.coming-soon-card .cs-price { color: rgba(253,230,138,.5); }
.coming-soon-card .cs-eta { color: rgba(144,153,194,.5); }
.coming-soon-card .cs-example { color: rgba(254,243,199,.5); }

.cs-ribbon-wrap {
  position: absolute;
  top: 0; right: 0;
  width: 120px; height: 120px;
  overflow: hidden;
  clip-path: inset(0);
  pointer-events: none;
  border-top-right-radius: var(--r);
  z-index: 2;
}
.coming-soon-card .cs-icon {
  flex: 0 0 40px; width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  color: #fbbf24;
}
.coming-soon-card .cs-icon svg { width: 26px; height: 26px; }
.coming-soon-card .cs-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.coming-soon-card .cs-name { font-weight: 700; font-size: 15px; color: var(--text); }
.coming-soon-card .cs-sub { font-size: 12.5px; color: #93c5fd; }
.coming-soon-card .cs-price { font-weight: 700; font-size: 14px; color: #fde68a; margin-top: 4px; }
.coming-soon-card .cs-eta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.coming-soon-card .cs-example { margin-top: 4px; font-size: 12px; color: #fef3c7; text-decoration: none; }
.cs-ribbon {
  position: absolute; top: 28px; right: -32px;
  width: 150px; padding: 4px 0;
  background: linear-gradient(135deg, rgba(120,90,40,.85), rgba(95,70,30,.85));
  color: rgba(254,243,199,.85); font-weight: 700; font-size: 9.5px;
  text-align: center; text-transform: uppercase; letter-spacing: .08em;
  transform: rotate(45deg);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  white-space: nowrap;
}

/* Tier row — фиксировано 3 в ряд на десктопе чтобы карточки не «лепились».
   Адаптив переключает на 2 и 1 в нижних брейкпойнтах. */
.tier-row {
  display: flex; flex-direction: column; gap: 18px;
}
/* Карточки внутри одной группы (одностраничные / многостраничные) */
.tier-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Заголовок группы тарифов (Одностраничный / Многостраничный) — иконка-чип + градиентный текст */
.tier-group-title {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 -2px;
  font-size: 14px; font-weight: 800; letter-spacing: .01em;
}
.tier-group-title .tgt-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  background: linear-gradient(135deg, rgba(34,211,238,.16), rgba(37,99,235,.16));
  border: 1px solid rgba(34,211,238,.28);
  color: var(--accent);
}
.tier-group-title .tgt-icon svg { width: 15px; height: 15px; }
.tier-group-title .tgt-text {
  color: var(--accent); /* фолбэк, если background-clip не поддержан */
  background: linear-gradient(135deg, var(--accent), var(--primary));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tier-group-title::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.tier-pill {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r); padding: 18px;
  text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 8px;
  color: var(--text);
  transition: border-color .15s, background .15s, box-shadow .15s;
  position: relative;
}
.tier-pill:hover { border-color: var(--primary); }
.tier-pill.selected {
  border-color: var(--primary);
  background: linear-gradient(135deg, var(--primary-soft), rgba(37,99,235,.12));
  box-shadow: 0 6px 18px rgba(99,102,241,.25);
}
.tier-pill.disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }
.tier-pill-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tier-pill-name { font-weight: 700; font-size: 15px; }
.tier-pill-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px;
  background: linear-gradient(135deg, #f59e0b, #ec4899); /* orange → pink */
  color: white; box-shadow: 0 2px 10px rgba(236,72,153,.40);
}
.tier-pill-badge.new { background: linear-gradient(135deg, var(--accent), var(--primary)); box-shadow: 0 2px 10px rgba(34,211,238,.40); }
.tier-pill-badge:empty { display: none; }
.tier-pill-desc { font-size: 12px; color: var(--muted); line-height: 1.4; }
.tier-pill-price {
  margin-top: 6px; font-weight: 700; font-size: 18px; color: var(--text);
  display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
}
.tier-pill-price small { font-size: 11px; color: var(--muted); font-weight: 500; margin-left: 4px; }

/* Tier row адаптив — переключение раньше чем основной 700px-брейкпойнт,
   т.к. на 700–880px 3 колонки слишком тесные. На <440 — 1fr (см. ниже).  */
@media (max-width: 880px) {
  .tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Telegram code-login modal */
.tg-login-modal { max-width: 460px; }

/* Change-password modal */
.pwd-modal { max-width: 420px; }
/* Заголовок в столбик (override flex-row у .modal-head) */
.pwd-modal .modal-head {
  display: block;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.pwd-modal .modal-title { font-size: 19px; font-weight: 700; line-height: 1.25; margin: 0 0 6px; color: var(--text); }
.pwd-modal .modal-sub { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.45; }
.pwd-form { display: flex; flex-direction: column; gap: 14px; }
.pwd-form .field { gap: 7px; }
.pwd-form .auth-input {
  width: 100%; padding: 11px 14px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  font-size: 14px; transition: border-color .15s;
}
.pwd-form .auth-input:focus { outline: none; border-color: var(--primary); }
.pwd-error {
  font-size: 13px; color: #f87171;
  background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.30);
  border-radius: 8px; padding: 8px 12px;
}
.pwd-modal .modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
}
/* Шапка — иконка + title + sub в столбик, центрировано (override базового
   .modal-head layout если в нём есть flex/grid). */
.tg-login-head {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding-top: 8px;
}
.tg-login-head .modal-title { margin: 0; }
.tg-login-head .modal-sub   { margin: 0; }
.tg-login-icon {
  width: 64px; height: 64px; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #229ED9, #1c7eb3);
  color: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(34,158,217,.40);
}
.tg-login-icon svg { width: 32px; height: 32px; transform: translate(-1px, 1px); }
.tg-login-steps {
  display: flex; flex-direction: column; gap: 18px;
  padding: 4px 0;
}
.tg-login-step { display: flex; gap: 14px; align-items: flex-start; }
.tg-login-step-n {
  flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(99,102,241,.18);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  border: 1px solid rgba(99,102,241,.30);
}
.tg-login-step-body { flex: 1; min-width: 0; }
.tg-login-step-title { font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: 4px; }
.tg-login-step-sub { font-size: 13px; color: var(--muted); line-height: 1.45; margin-bottom: 10px; }
.tg-login-step-sub b { color: var(--text); font-weight: 600; }
/* Это <button>, а не <a>: адрес с логин-токеном не должен лежать в разметке.
   Отсюда сброс дефолтов кнопки (border/appearance/font/cursor) — без него
   элемент едет по шрифту и обзаводится рамкой. */
.tg-login-bot-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 18px;
  background: linear-gradient(135deg, #229ED9, #1c7eb3);
  color: white; border-radius: 12px;
  border: 0; -webkit-appearance: none; appearance: none;
  font-family: inherit; cursor: pointer;
  text-decoration: none; font-weight: 600; font-size: 14px;
  box-shadow: 0 4px 14px rgba(34,158,217,.40);
  transition: transform .12s, box-shadow .12s;
}
.tg-login-bot-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(34,158,217,.55); }
/* Пока заявка не создана, вести кнопке некуда: гасим, иначе клик уходит в пустоту. */
.tg-login-bot-btn:disabled { opacity: .5; cursor: default; box-shadow: none; transform: none; }
/* Не кликабельно: код только для сверки глазами, вводить его некуда. */
.tg-login-code-box {
  background: rgba(99,102,241,.08);
  border: 1px dashed rgba(99,102,241,.30);
  border-radius: 12px; padding: 16px;
  text-align: center;
}
.tg-login-code {
  font-size: 28px; font-weight: 800; color: var(--primary);
  letter-spacing: .08em; margin-bottom: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.tg-login-code-hint { font-size: 11px; color: var(--muted); }
/* Статус — плашка, а не тонкая строка: отказ и успех должны быть видны сразу. */
.tg-login-status {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 12px 14px;
  border-radius: 12px; font-size: 14px; line-height: 1.45;
  background: rgba(99,102,241,.06);
  border: 1px solid rgba(99,102,241,.18);
}
.tg-login-status-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px;
  background: var(--primary); animation: tgPulse 1.4s ease-in-out infinite;
}
.tg-login-status-text { color: var(--muted); }
.tg-login-status.success { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.45); }
.tg-login-status.error   { background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.45); }
.tg-login-status.success .tg-login-status-dot { background: #10b981; animation: none; }
.tg-login-status.error   .tg-login-status-dot { background: #ef4444; animation: none; }
.tg-login-status.success .tg-login-status-text { color: #059669; font-weight: 700; font-size: 15px; }
.tg-login-status.error   .tg-login-status-text { color: #dc2626; font-weight: 700; font-size: 15px; }
/* Крестик в углу: привычный способ закрыть окно. */
.tg-login-modal { position: relative; }
.tg-login-x {
  position: absolute; top: 10px; right: 12px;
  width: 34px; height: 34px; line-height: 1;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--muted); font-size: 26px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.tg-login-x:hover { background: rgba(148,163,184,.18); color: var(--text); }
/* Кнопка закрытия внизу — с рамкой, чтобы читалась как кнопка. */
.tg-login-cancel {
  width: 100%; padding: 11px 18px; border-radius: 12px;
  border: 1px solid rgba(148,163,184,.45);
  background: transparent; color: var(--text);
  font-weight: 600; font-size: 14px; cursor: pointer;
}
.tg-login-cancel:hover { background: rgba(148,163,184,.14); }
/* Низ модалки: у .modal-foot нет общего правила (оно есть только у модалок
   пароля и пополнения), из-за этого кнопка закрытия прилипала к статусу. */
.tg-login-modal .modal-foot { margin-top: 16px; }
.tg-login-modal .modal-body { gap: 14px; }
@keyframes tg-login-pulse {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

.empty-hint {
  background: var(--surface-2); color: var(--muted);
  border: 1px dashed var(--line-2); border-radius: var(--r);
  padding: 22px; text-align: center; font-size: 14px;
}

/* Section groups in params */
.section-group { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 88px; }
.section-group + .section-group { margin-top: 34px; }
.section-group-title {
  font-size: 13px; color: var(--muted); font-weight: 600;
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
}
.section-group-title svg { width: 14px; height: 14px; color: var(--primary-2); }

/* Params grid */
.params-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.params-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; scroll-margin-top: 100px; border-radius: 10px; transition: background .2s; }

/* Invalid state — поле не заполнено при submit.
   Без рамки/фона: подсвечиваем label красным + границу control'а, плюс shake. */
.field.invalid {
  animation: field-shake .35s ease-out;
}
.field.invalid .field-label { color: #f87171; }
.field.invalid .combobox-trigger,
.field.invalid .field-input,
.field.invalid .field-textarea {
  border-color: rgba(248, 113, 113, .55);
}
@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
:root[data-theme="light"] .field.invalid .field-label { color: #dc2626; }
:root[data-theme="light"] .field.invalid .combobox-trigger,
:root[data-theme="light"] .field.invalid .field-input,
:root[data-theme="light"] .field.invalid .field-textarea {
  border-color: rgba(220, 38, 38, .55);
}
.field-label {
  font-size: 13px; font-weight: 500; color: var(--text);
  display: flex; align-items: center; gap: 6px;
}
.field-label em {
  font-style: normal; font-size: 11px; font-weight: 500;
  color: var(--muted); padding: 1px 6px; border-radius: 4px;
  background: var(--surface-2);
}
.field-label-hint { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.field-input, .field-select, .field-textarea {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px;
  width: 100%; color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.field-input::placeholder, .field-textarea::placeholder { color: var(--muted-2); }
.field-input:focus, .field-select:focus, .field-textarea:focus {
  outline: 0; border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}
.field-textarea { min-height: 110px; resize: vertical; }

.counter {
  display: inline-flex; align-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; width: max-content;
}
.counter button {
  background: transparent; border: 0; padding: 8px 14px;
  color: var(--muted); font-size: 18px; font-weight: 600;
}
.counter button:hover { background: var(--surface-3); color: var(--text); }
.counter input {
  width: 64px; text-align: center; border: 0;
  padding: 8px 0; font-weight: 600;
  background: transparent;
  appearance: textfield; -moz-appearance: textfield;
}
.counter input::-webkit-outer-spin-button,
.counter input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.counter input:focus { outline: 0; }

.pillbar { display: flex; flex-wrap: wrap; gap: 6px; }
.pillbar-item {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; font-size: 13px;
  transition: border-color .12s, background .12s, color .12s;
}
.pillbar-item:hover { border-color: var(--primary); color: var(--primary-2); }
.pillbar-item.active {
  background: linear-gradient(135deg, var(--primary), var(--accent-2));
  border-color: transparent; color: white;
}

/* Combobox */
.combobox { position: relative; }
.combobox-trigger {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 36px 10px 12px;
  color: var(--text); width: 100%; cursor: pointer; text-align: left;
  font-size: 14px; position: relative;
  transition: border-color .15s, box-shadow .15s;
}
.combobox-trigger::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-65%) rotate(45deg);
}
.combobox-trigger.placeholder { color: var(--muted-2); }
.combobox.open .combobox-trigger { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.combobox-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: rgba(20,26,61,.95); backdrop-filter: blur(16px);
  border: 1px solid var(--line-2);
  border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.5);
  padding: 6px; z-index: 30; display: none;
}
.combobox.open .combobox-dropdown { display: block; }
.combobox-search {
  width: 100%; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px;
  color: var(--text); margin-bottom: 6px; font-size: 13px;
}
.combobox-search:focus { outline: 0; border-color: var(--primary); }
.combobox-list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.combobox-item { padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.combobox-item:hover { background: var(--surface-2); }
.combobox-item.active { background: var(--primary-soft); color: var(--primary-2); }

/* File upload */
.file-upload {
  background: var(--surface-2); border: 1px dashed var(--line-2);
  border-radius: var(--r); padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.file-upload-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 8px; }
.file-upload-btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); padding: 8px 14px; border-radius: 8px;
  font-size: 13px; cursor: pointer;
}
.file-upload-btn:hover { background: var(--surface-3); }
.file-list { display: flex; flex-direction: column; gap: 6px; }
.file-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 10px; font-size: 13px;
}
.file-item .file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item .file-size { color: var(--muted); font-size: 12px; }
.file-item .file-rm {
  background: transparent; border: 0; color: var(--muted);
  width: 20px; height: 20px; display: grid; place-items: center;
  cursor: pointer; border-radius: 4px;
}
.file-item .file-rm:hover { background: var(--surface-2); color: var(--danger); }

/* Brief actions */
.brief-actions {
  display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; align-items: center;
}
.brief-actions-label { font-size: 12px; color: var(--muted); margin-right: 4px; }
.brief-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.brief-btn:hover { border-color: var(--primary); color: var(--primary-2); }

/* Flags-grid (CSP + Cookies) — 2 col на десктопе, 1 col на мобиле */
.flags-grid {
  display: grid; gap: 10px;
  grid-template-columns: 1fr 1fr;
  margin-top: 16px;
}
/* Один чекбокс (cookies) — на всю ширину, чтобы справа не было пустоты */
.flags-grid.solo { grid-template-columns: 1fr; }

/* Check row */
.check-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line);
  cursor: pointer;
}
.check-row input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--primary); margin-top: 2px;
}
.check-row .cr-body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.check-row .cr-title { font-weight: 500; font-size: 13.5px; line-height: 1.3; }
.check-row .cr-hint { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* Help icon + tooltip */
.help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--line);
  font-size: 10px; font-weight: 700; line-height: 1;
  cursor: help; position: relative; vertical-align: middle;
  transition: background .15s, color .15s, border-color .15s;
}
.help:hover { background: var(--primary); color: white; border-color: var(--primary); }
.help-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  /* Tooltip всегда тёмный (как у Stripe/Linear) — независимо от темы страницы */
  background: #1e293b;
  color: #f1f5f9;
  border: 1px solid rgba(255,255,255,.08);
  padding: 10px 12px;
  border-radius: 10px;
  width: 280px; max-width: calc(100vw - 32px);
  font-size: 12px; font-weight: 400; line-height: 1.5;
  text-align: left; text-transform: none; letter-spacing: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .15s;
  z-index: 100; pointer-events: none;
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
.help-tip::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  margin-left: -6px; border: 6px solid transparent;
  border-top-color: #1e293b;
}
.help:hover .help-tip { opacity: 1; visibility: visible; }
.cr-title .help { margin-left: 8px; }
.section-group-title .help { margin-left: 8px; }

/* Inline-warning под полем (Google Ads не поддерживает язык и т.п.) */
.field-warning {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: 6px; padding: 8px 10px;
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.28);
  border-radius: 8px;
  font-size: 12.5px; color: #fbbf24; line-height: 1.4;
}
.field-warning svg { width: 14px; height: 14px; color: #f59e0b; flex-shrink: 0; margin-top: 1px; }
:root[data-theme="light"] .field-warning {
  background: rgba(245,158,11,.12); border-color: rgba(180,83,9,.40);
  color: #92400e;
}
:root[data-theme="light"] .field-warning svg { color: #b45309; }

/* ============================================================
   Universal tooltip — [data-tip] на любой кнопке/иконке.
   Использовать вместо нативного title для красивых подсказок.
   ============================================================ */
[data-tip] { position: relative; }
[data-tip]::before, [data-tip]::after {
  position: absolute; left: 50%; transform: translateX(-50%) translateY(2px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s, transform .15s;
  z-index: 200;
}
[data-tip]::before {
  content: attr(data-tip);
  bottom: calc(100% + 8px);
  background: #1e293b; color: #f1f5f9;
  padding: 6px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 500; line-height: 1;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
[data-tip]::after {
  content: ''; bottom: calc(100% + 2px);
  width: 0; height: 0;
  border: 6px solid transparent; border-top-color: #1e293b;
}
[data-tip]:hover::before, [data-tip]:hover::after,
[data-tip]:focus-visible::before, [data-tip]:focus-visible::after {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
/* Variant: tooltip снизу элемента (если сверху не хватает места) */
[data-tip][data-tip-pos="bottom"]::before { bottom: auto; top: calc(100% + 8px); }
[data-tip][data-tip-pos="bottom"]::after  { bottom: auto; top: calc(100% + 2px); border-top-color: transparent; border-bottom-color: #1e293b; }
/* Variant: tooltip выровнен по правому краю кнопки (для крайних правых элементов в таблицах) */
[data-tip][data-tip-align="end"]::before {
  left: auto; right: 0;
  transform: translateX(0) translateY(2px);
}
[data-tip][data-tip-align="end"]::after {
  left: auto; right: 14px; margin-left: 0;
  transform: translateX(0) translateY(2px);
}
[data-tip][data-tip-align="end"]:hover::before,
[data-tip][data-tip-align="end"]:hover::after,
[data-tip][data-tip-align="end"]:focus-visible::before,
[data-tip][data-tip-align="end"]:focus-visible::after {
  transform: translateX(0) translateY(0);
}
/* Auto-align "end" для action-кнопок в data-table — они всегда у правого края */
.data-table .actions [data-tip]::before {
  left: auto; right: 0; transform: translateY(2px);
}
.data-table .actions [data-tip]::after {
  left: auto; right: 14px; margin-left: 0; transform: translateY(2px);
}
.data-table .actions [data-tip]:hover::before,
.data-table .actions [data-tip]:hover::after {
  transform: translateY(0);
}

/* Notice block */
.tier-notice {
  display: flex; align-items: flex-start; gap: 14px;
  background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(34,211,238,.08));
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 16px 18px; margin-bottom: 22px;
}
.tier-notice-icon { font-size: 28px; line-height: 1; flex: 0 0 auto; }
.tier-notice-body { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.tier-notice-intro { font-weight: 600; font-size: 14px; color: var(--text); line-height: 1.45; }
.tier-notice-intro b { color: var(--primary-2); font-weight: 700; }
.tier-notice-body p { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0; }
.tier-notice-warning { color: #fca5a5; font-size: 13px; line-height: 1.55; }
.tier-notice-note { font-size: 12.5px; color: var(--muted); line-height: 1.5; padding: 6px 0 6px 10px; border-left: 2px solid var(--primary-2); }
.tier-notice-note b { color: var(--text); font-weight: 600; }

/* Ограничение тира — amber-плашка для стандартных тиров (нельзя кастомную структуру) */
.tier-notice-limitation {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 12px; border-radius: 10px;
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.28);
  color: #fbbf24;
  font-size: 12.5px; line-height: 1.5; font-weight: 500;
  margin-top: 2px;
}
.tier-notice-limitation::before {
  content: "\26A0"; font-size: 14px; line-height: 1.2; flex-shrink: 0;
}
:root[data-theme="light"] .tier-notice-limitation {
  background: rgba(245,158,11,.12); border-color: rgba(180,83,9,.35);
  color: #92400e;
}

/* Среднее время на готовый сайт — компактная плашка с иконкой */
.tier-notice-eta {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(99,102,241,.12); border: 1px solid rgba(99,102,241,.25);
  color: var(--primary); font-size: 12.5px; font-weight: 600;
  margin-top: 2px;
}
.tier-notice-eta-icon { font-size: 14px; line-height: 1; }
:root[data-theme="light"] .tier-notice-eta {
  background: rgba(99,102,241,.10); border-color: rgba(79,70,229,.30);
  color: #4338ca;
}

/* Auto-resize textarea */
.field-textarea-auto {
  min-height: 80px; max-height: 500px;
  resize: none; overflow-y: auto;
  transition: border-color .15s;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.field-textarea-auto::-webkit-scrollbar { width: 8px; }
.field-textarea-auto::-webkit-scrollbar-track { background: transparent; }
.field-textarea-auto::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.15);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.field-textarea-auto::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.28); }
.field-textarea-auto.over { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(239,68,68,.18); }
.brief-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 6px;
}
.brief-meta-hint { color: var(--muted); font-size: 12px; }
.char-counter {
  font-size: 12px; color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.char-counter.warn { color: var(--warning); }
.char-counter.over { color: var(--danger); font-weight: 700; }

/* Счётчик под однострочным полем (напр. «Своя тематика») */
.field-meta { display: flex; justify-content: flex-end; margin-top: 4px; }
/* Перебор по длине — подсвечиваем само поле, а не только цифру счётчика.
   Оформление то же, что у брифа (.field-textarea-auto.over), чтобы состояние читалось одинаково. */
.field-input.over {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .18);
}

/* Code collapse */
.code-collapse {
  margin-top: 16px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r);
}
.code-collapse > summary {
  cursor: pointer; padding: 14px 18px;
  font-weight: 500; color: var(--muted);
  display: flex; align-items: center; gap: 8px; list-style: none;
}
.code-collapse > summary::-webkit-details-marker { display: none; }
.code-collapse > summary::before { content: "\203A"; font-size: 22px; line-height: 0; display: inline-block; transition: transform .2s; }
.code-collapse[open] > summary::before { transform: rotate(90deg); }
.code-collapse > .code-body { padding: 0 18px 18px; display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.code-collapse .full { grid-column: 1 / -1; }
.code-collapse textarea { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; min-height: 70px; }

/* code-body when used standalone (без details wrapper) — для sec-extra */
.block > .code-body { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.block > .code-body .full { grid-column: 1 / -1; }
.block > .code-body textarea { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; min-height: 70px; }

/* ==========================================================================
   PREVIEW (right column)
   ========================================================================== */
.preview-wrap { position: relative; min-width: 0; }
.preview-sticky { position: sticky; top: 96px; }

.preview-card {
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255,255,255,.05);
  display: flex; flex-direction: column; gap: 14px;
}
.pc-header { display: flex; align-items: center; justify-content: space-between; }
.pc-tag {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--primary-2); font-weight: 700;
}
.pc-id { font-size: 13px; color: var(--muted-2); font-weight: 700; }
.pc-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: linear-gradient(135deg, var(--primary-soft), rgba(37,99,235,.12));
  display: grid; place-items: center;
  color: var(--primary-2);
  transition: background .25s, color .25s;
}
.pc-icon.empty { background: var(--surface-2); color: var(--muted-2); }
.pc-icon svg { width: 30px; height: 30px; }
.pc-title {
  font-size: 22px; font-weight: 700;
  letter-spacing: -.01em; line-height: 1.2;
}
.pc-tier {
  font-size: 13px; color: var(--muted);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pc-tier .tier-tag {
  background: linear-gradient(135deg, var(--primary), var(--accent-2));
  color: white; font-weight: 600;
  padding: 2px 8px; border-radius: 6px; font-size: 11px; letter-spacing: .03em; text-transform: uppercase;
}

.pc-divider { height: 1px; background: var(--line); margin: 4px -4px; }
.pc-rows { display: flex; flex-direction: column; gap: 8px; }
.pc-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  font-size: 13px;
}
.pc-row .pck { color: var(--muted); flex: 0 0 auto; }
.pc-row .pcv { font-weight: 500; text-align: right; word-break: break-word; color: var(--text); }
.pc-row .pcv.empty { color: var(--muted-2); font-weight: 400; font-style: italic; }

.pc-total { display: flex; flex-direction: column; gap: 6px; }
.pc-total-row { display: flex; justify-content: space-between; align-items: baseline; }
.pc-total-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 600;
}
.pc-total-value {
  font-size: 28px; font-weight: 700;
  background: linear-gradient(135deg, var(--primary-2), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pc-sub { font-size: 12px; color: var(--muted); }
.pc-sub.warn-row {
  justify-content: center;
  background: rgba(248,113,113,.12);
  border-radius: 999px;
  padding: 4px 12px;
}
.pc-sub.warn-row #pcAfter {
  display: inline-flex; align-items: center; gap: 6px;
  color: #f87171; font-weight: 600; font-size: 12.5px;
}
.pc-sub.warn-row #pcAfter .ba-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #f87171;
  box-shadow: 0 0 0 3px rgba(248,113,113,.20);
}

/* TOAST */
.toast {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--surface-3); color: white;
  padding: 12px 18px; border-radius: 10px;
  font-size: 14px; font-weight: 500; border: 1px solid var(--line-2);
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 100;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { background: #064e3b; border-color: rgba(16,185,129,.4); }
.toast.warn { background: #78350f; border-color: rgba(245,158,11,.4); color: #fef3c7; }
.toast.error { background: #7f1d1d; border-color: rgba(239,68,68,.4); }

/* ==========================================================================
   PAGES (history / team)
   ========================================================================== */
.page-head {
  max-width: 1400px; margin: 0 auto;
  padding: 32px 24px 16px;
  display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.page-head h1 { font-size: 28px; letter-spacing: -.015em; }
.page-head p { color: var(--muted); margin-top: 4px; }
.page-body { max-width: 1400px; margin: 0 auto; padding: 0 24px 40px; display: flex; flex-direction: column; gap: 20px; }

.data-card {
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-glow);
}
.data-card-head {
  padding: 14px 18px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
.data-card-title { font-weight: 600; font-size: 15px; flex: 1; min-width: 0; }
.data-card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Приглашение в команду.
   Это единственный блок на странице, который ЖДЁТ ответа, а выглядел он ровно
   как соседние справочные карточки и терялся в ряду. Поэтому: акцентная рамка,
   цветная шапка, полоса слева и конечная пульсация при открытии страницы.
   Пульсация конечная намеренно — бесконечная мигалка на странице, где человек
   читает условия про общий баланс, мешает читать. */
.team-invite-card {
  position: relative;
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary-soft-2), 0 14px 40px -18px var(--primary);
  animation: teamInviteAttn 2.1s ease-in-out 3;
}
.team-invite-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
}
.team-invite-card .data-card-head {
  background: var(--primary-soft);
  border-bottom-color: var(--primary-soft-2);
}
.team-invite-card .data-card-title { color: var(--text); }
/* Та же красная точка, что в меню: человек пришёл сюда по ней и сразу видит,
   что привело. Рисуем кружком, а не символом конверта — шрифтовой глиф
   отрисовывался бледным квадратиком и в тему не попадал. */
.team-invite-card .data-card-title::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 10px var(--danger);
  margin-right: 9px;
  vertical-align: middle;
  position: relative; top: -1px;
}
/* Светлая тема переопределяет .data-card целиком (фон, рамку, тень) правилом
   с большей специфичностью, чем одиночный класс, — поэтому выделение приходится
   повторить здесь. Проверено в браузере: без этого блока border-color, фон шапки
   и box-shadow возвращались к общим, и плашка на светлой теме ничем не отличалась
   от соседней справочной карточки. */
:root[data-theme="light"] .team-invite-card {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary-soft-2), 0 12px 32px -16px rgba(99, 102, 241, .75);
}
:root[data-theme="light"] .team-invite-card .data-card-head {
  background: linear-gradient(180deg, rgba(99, 102, 241, .14), rgba(99, 102, 241, .06));
  border-bottom-color: rgba(99, 102, 241, .22);
}

@keyframes teamInviteAttn {
  0%, 100% { box-shadow: 0 0 0 1px var(--primary-soft-2), 0 14px 40px -18px var(--primary); }
  50%      { box-shadow: 0 0 0 5px var(--primary-soft),   0 16px 46px -14px var(--primary); }
}
/* Кому анимация мешает — тот её не увидит, выделение остаётся статическим. */
@media (prefers-reduced-motion: reduce) {
  .team-invite-card { animation: none; }
  .topnav-item.has-alert::after { animation: none; }
}
.data-table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td {
  padding: 10px 12px; text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px; vertical-align: middle;
}
.data-table .traffic-stack { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.data-table .traffic-stack .ts-source { font-weight: 500; font-size: 13px; color: var(--text); }
.data-table .traffic-stack .ts-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.data-table .traffic-stack .geo-chip { padding: 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.data-table th {
  background: rgba(255,255,255,.03);
  color: var(--muted); font-weight: 500; font-size: 12px;
  white-space: nowrap;
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: rgba(255,255,255,.03); }
.data-table td.num, .data-table th.num { font-variant-numeric: tabular-nums; text-align: right; }
.data-table td.actions { white-space: nowrap; text-align: right; }
.data-table .muted { color: var(--muted); font-size: 12.5px; }
.data-table .order-id { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.data-table .order-id::before { content: "#"; color: var(--muted-2); }

/* Date label: highlight today/yesterday, dim older */
.date-label { font-weight: 600; font-size: 13px; line-height: 1.2; }
.date-label.date-today     { color: #34d399; }
.date-label.date-yesterday { color: var(--primary-2); }
.date-label.date-old       { color: var(--muted); font-weight: 500; font-size: 12px; font-variant-numeric: tabular-nums; }

/* Tag-input (chips for IDs) */
.tag-select {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px; min-height: 44px;
  display: flex; flex-wrap: wrap; gap: 6px;
  cursor: text; transition: border-color .15s, box-shadow .15s;
}
.tag-select:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.tag-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary-soft); color: var(--primary-2);
  padding: 3px 10px 3px 6px; border-radius: 6px;
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
/* Отклонённое значение. Красным и с причиной в подсказке: раньше такие просто
   исчезали из поля, и человек не узнавал, что часть введённого не отправилась.
   Клик по метке возвращает значение в поле — чаще всего это опечатка. */
.tag-chip.bad {
  background: rgba(248, 113, 113, .14);
  border-color: var(--danger);
  color: var(--danger);
  cursor: pointer;
  text-decoration: line-through;
  text-decoration-color: rgba(248, 113, 113, .5);
}
.tag-chip.bad:hover { background: rgba(248, 113, 113, .22); }
.tag-chip button {
  order: -1;
  background: transparent; border: 0; color: var(--primary-2);
  width: 16px; height: 16px; display: inline-grid; place-items: center;
  font-size: 14px; line-height: 1; opacity: .7; cursor: pointer;
  padding: 0;
}
.tag-chip button:hover { opacity: 1; }
.tag-input {
  border: 0; outline: 0; flex: 1; min-width: 80px; padding: 4px;
  background: transparent; color: var(--text); font-size: 13px;
}
.tag-input::placeholder { color: var(--muted-2); }

.status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600;
  padding: 2px 9px; border-radius: 999px;
  white-space: nowrap;
}
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill.done    { color: #34d399; background: rgba(52,211,153,.12); }
.status-pill.working { color: #fbbf24; background: rgba(251,191,36,.12); }
.status-pill.new     { color: var(--primary-2); background: var(--primary-soft); }
.status-pill.notPay  { color: #f87171; background: rgba(248,113,113,.12); }
.status-pill.cancelled { color: var(--muted); background: rgba(255,255,255,.04); }
.status-pill.pending { color: #fbbf24; background: rgba(251,191,36,.12); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border-radius: 8px;
  background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--line);
  cursor: pointer; text-decoration: none;
  transition: background .12s, color .12s, border-color .12s, transform .1s;
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); border-color: var(--line-2); }
.icon-btn:active { transform: scale(.95); }
.icon-btn svg { width: 14px; height: 14px; }
.icon-btn.primary { color: var(--accent); border-color: rgba(34,211,238,.30); }
.icon-btn.primary:hover { background: rgba(34,211,238,.14); border-color: var(--accent); color: var(--accent); }
.icon-btn.danger { color: #fca5a5; border-color: rgba(248,113,113,.30); }
.icon-btn.danger:hover { background: rgba(248,113,113,.14); border-color: #f87171; color: #f87171; }
.icon-btn + .icon-btn { margin-left: 5px; }

.row-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text);
  font-size: 12.5px; cursor: pointer; text-decoration: none;
  transition: background .12s, border-color .12s;
}
.row-btn:hover { background: var(--surface-3); border-color: var(--line-2); }
.row-btn.primary {
  background: linear-gradient(135deg, var(--cta-1), var(--cta-2));
  background-clip: padding-box;
  border-color: transparent; color: white;
}
.row-btn.primary:hover { filter: brightness(1.1); }

/* Brand-blue вариант — для топап-связанных действий (transfer, bulk top up) */
.row-btn.brand {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  background-clip: padding-box; /* без этого градиент протекает под transparent border */
  border-color: transparent; color: white;
}
.row-btn.brand:hover { filter: brightness(1.1); }
.row-btn.danger { color: #fca5a5; border-color: rgba(248,113,113,.30); background: rgba(248,113,113,.06); }
.row-btn.danger:hover { background: rgba(248,113,113,.18); border-color: #f87171; color: #fecaca; }
/* На светлой теме делаем насыщеннее — иначе бледный розовый теряется на белом фоне */
:root[data-theme="light"] .row-btn.danger {
  color: #b91c1c; border-color: rgba(220,38,38,.35); background: rgba(220,38,38,.06);
  font-weight: 600;
}
:root[data-theme="light"] .row-btn.danger:hover {
  background: rgba(220,38,38,.12); border-color: #dc2626; color: #991b1b;
}

.empty-state {
  padding: 60px 20px; text-align: center; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.empty-state h3 + p { margin-top: -2px; }
.empty-state .btn { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; text-decoration: none; }
.empty-state-icon {
  width: 64px; height: 64px; display: inline-grid; place-items: center;
  background: var(--surface-2); border-radius: 50%; margin-bottom: 14px; color: var(--muted-2);
}
.empty-state-icon svg { width: 30px; height: 30px; }
.empty-state h3 { font-size: 16px; color: var(--text); margin-bottom: 6px; }
.empty-state p { font-size: 13px; max-width: 400px; margin: 0 auto; }

/* Плашка «вы участник чужой команды». Компактная строка вместо пустого
   состояния: участник видит её ВСЕГДА, пока состоит в команде, и большой блок
   с иконкой на 60px отступов занимал весь экран ради одной кнопки. */
.team-member-note {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 14px 18px;
}
.team-member-note-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.team-member-note-txt b { font-size: 14px; color: var(--text); font-weight: 600; }
.team-member-note-txt span { font-size: 12.5px; color: var(--muted); }

/* Кнопка выхода. .btn-ghost своего оформления не имеет вовсе, и на тёмной
   карточке она терялась — её «еле нашли». Даём видимую рамку в цвете опасности,
   но не заливку: действие редкое и не должно спорить с «Пополнить всем поровну». */
.btn-leave {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 8px 16px;
  font-weight: 600;
  transition: background .15s, color .15s;
}
.btn-leave:hover { background: var(--danger); color: #fff; }
.btn-leave:disabled { opacity: .5; cursor: default; }
@media (max-width: 700px) {
  .team-member-note { flex-direction: column; align-items: stretch; }
  .btn-leave { width: 100%; }
}

.toolbar {
  background: var(--surface);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 10px 12px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.toolbar-input {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 12px; font-size: 13px;
  color: var(--text); min-width: 200px;
}
.toolbar-input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.toolbar-select {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 12px; font-size: 13px; color: var(--text);
}
.toolbar-select option { background: rgba(20,26,61,.95); color: var(--text); }
.toolbar-label { color: var(--muted); font-size: 13px; }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px); z-index: 90; display: none;
  align-items: center; justify-content: center; padding: 20px;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: rgba(20,26,61,.95); backdrop-filter: blur(20px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg); padding: 22px; width: 100%; max-width: 460px;
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.modal-head h3 { font-size: 18px; font-weight: 600; }
.modal-close {
  background: transparent; border: 0; color: var(--muted);
  width: 28px; height: 28px; border-radius: 6px;
  display: grid; place-items: center; cursor: pointer; font-size: 20px;
}
.modal-close:hover { background: var(--surface-2); color: var(--text); }
.modal-body { display: flex; flex-direction: column; gap: 12px; }
.modal-stack { display: flex; flex-direction: column; gap: 16px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.modal-info {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--muted);
  display: flex; justify-content: space-between; gap: 8px;
}
.modal-info strong { color: var(--text); font-weight: 600; }

/* Amount presets — быстрые кнопки сумм в модалках Transfer/Bulk */
.amount-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.preset-btn {
  border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text);
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.preset-btn:hover { background: var(--surface-3); border-color: var(--line-2); color: var(--text); }
.preset-btn-max {
  background: rgba(56,189,248,.12); color: #38bdf8;
  border-color: rgba(56,189,248,.25);
}
.preset-btn-max:hover { background: rgba(56,189,248,.22); border-color: #38bdf8; color: #38bdf8; }
:root[data-theme="light"] .preset-btn-max { background: rgba(37,99,235,.10); color: #1d4ed8; border-color: rgba(37,99,235,.30); }
:root[data-theme="light"] .preset-btn-max:hover { background: rgba(37,99,235,.18); color: #1d4ed8; }

.geo-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface-2); color: var(--text);
  padding: 1px 8px; border-radius: 4px;
  font-size: 12px; font-weight: 600; border: 1px solid var(--line);
}
.user-cell { display: inline-flex; align-items: center; gap: 8px; }
.user-cell-avatar {
  flex: 0 0 26px;
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #0a0f24; font-weight: 700; display: grid; place-items: center; font-size: 11px;
}
.user-cell-info { display: flex; flex-direction: column; line-height: 1.25; gap: 2px; }
.user-cell-nick { font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.user-cell-id { font-size: 11px; color: var(--muted-2); margin-top: 1px; letter-spacing: .02em; }
/* Бейдж «команда» для заказов участников в общей истории */
.team-badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(99,102,241,.18); color: var(--primary);
  border: 1px solid rgba(99,102,241,.30);
}
/* Слегка приглушаем аватарку командного заказа чтобы свои выделялись */
.user-cell.team-order .user-cell-avatar { opacity: .85; }
/* Участник команды в статусе pending: мягкое размытие скрытых значений. */
.user-cell-nick.masked,
.num.masked { filter: blur(3px); opacity: .7; user-select: none; letter-spacing: .05em; }
.op-in { color: #34d399; font-weight: 600; }
.op-out { color: #fbbf24; font-weight: 600; }
/* На светлом фоне те же цвета дают контраст 1,7:1 и 1,8:1 при норме 4,5:1 —
   текст читается с трудом. Берём те же оттенки, но затемнённые. */
:root[data-theme="light"] .op-in  { color: #047857; }
:root[data-theme="light"] .op-out { color: #a16207; }

/* Подсказка, что таблицу можно прокрутить вбок. Включается КЛАССОМ, который
   ставит team.js, замерив ширину (wgSyncScrollHints).
   Чисто фоновым приёмом (две прослойки с background-attachment) не вышло:
   «крышка» должна быть непрозрачной, чтобы гасить тень, а фон карточки у нас
   полупрозрачный — тень просвечивала и горела всегда, в том числе на таблицах,
   которые прокручивать некуда. Поймано прогоном 18.10.2026. */
.data-table-wrap.can-scroll-x {
  background: linear-gradient(to left, var(--surface-3), transparent 32px) right center / 32px 100% no-repeat;
}

/* ==========================================================================
   RESPONSIVE — два чистых брейкпойнта:
   - 1100px: nav уходит во вторую строку, sidebar стекается, layout 1col
   - 700px: компактный мобильный режим (sticky off, мелкие элементы)
   - 440px: tiny (скрыть Пополнить/brand-text/user-name)
   ========================================================================== */

/* Промежуточный — для топбара начинает работать с 1100px */
@media (max-width: 1100px) {
  /* Layout: 1 колонка, sidebar стекается */
  .layout { grid-template-columns: 1fr; }
  .preview-sticky { position: static; }
  .preview-wrap { height: auto; }

  /* Топбар: nav во вторую строку, центрирован */
  .topbar-inner { gap: 8px 14px; padding: 10px 18px; }
  .topnav {
    order: 99;            /* после всех остальных */
    flex-basis: 100%;     /* во всю ширину = принудительный wrap */
    justify-content: stretch;
    margin-left: 0;
  }
  .topnav-item { flex: 1; text-align: center; padding: 7px 10px; font-size: 13px; }
}

/* Скрываем "WhiteGen" текст уже с 960px — оставляем только логотип-знак */
@media (max-width: 960px) {
  .brand-text { display: none; }
  .brand-mark { width: 28px; height: 28px; }
}

@media (max-width: 700px) {
  /* Хедер не sticky на мобиле — не ест место */
  .topbar { position: static; }

  /* Pages (history/team) */
  .page-head { padding: 20px 16px 12px; }
  .page-head h1 { font-size: 22px; }
  .page-body { padding: 0 16px 40px; gap: 14px; }
  .data-card-head { padding: 12px 14px; }

  /* Modal — меньше padding на мобиле */
  .modal-backdrop { padding: 12px; }
  .modal { padding: 18px; border-radius: 14px; }
  .modal-head h3 { font-size: 16px; }

  /* Custom card — поджимается на мобиле */
  .cat-custom-card { padding: 14px 16px; gap: 14px; }
  .cat-custom-title { font-size: 16px; }
  .cat-custom-price { font-size: 15px; }
  .cat-custom-price strong { font-size: 18px; }

  /* Pillbar items wrap nicer на мобиле */
  .pillbar { gap: 4px; }
  .pillbar-item { padding: 5px 10px; font-size: 12px; }

  /* Brief actions — кнопки в одну строку */
  .brief-actions { flex-wrap: wrap; gap: 6px; }
  .brief-actions-label { font-size: 12px; }
  .brief-btn { padding: 5px 10px; font-size: 12px; }

  .topbar-inner { padding: 8px 12px; gap: 6px 10px; }
  .topbar-right { gap: 6px; }
  .lang-switch { padding: 2px; }
  .lang-btn { padding: 4px 8px; font-size: 11.5px; }
  .balance-pill { padding: 4px 6px 4px 10px; gap: 6px; }
  .balance-icon { width: 24px; height: 24px; }
  .balance-icon svg { width: 14px; height: 14px; }
  .balance-value { font-size: 13px; }
  .balance-label { display: none; }
  .balance-refresh { width: 22px; height: 22px; }
  .balance-topup { width: 24px; height: 24px; }
  .balance-topup svg { width: 12px; height: 12px; }
  .user-chip { padding: 3px 8px 3px 3px; gap: 6px; }
  .user-avatar { width: 24px; height: 24px; font-size: 11px; }
  .user-name { max-width: 70px; font-size: 12px; }
  .topnav-item { padding: 5px 8px; font-size: 12.5px; }

  /* Контент */
  .layout { padding: 16px 16px 100px; gap: 16px; }
  .block { padding: 18px; }
  .params-grid { grid-template-columns: 1fr; }
  .code-collapse > .code-body { grid-template-columns: 1fr; }
  .block > .code-body { grid-template-columns: 1fr; }
  .flags-grid { grid-template-columns: 1fr; }
  .preview-card { padding: 18px; }

  /* Copy-panel — вертикально */
  .copy-panel { flex-direction: column; align-items: stretch; gap: 8px; }
  .copy-panel-icon { display: none; }
  .copy-panel .copy-panel-cb { min-width: 0; width: 100%; }

  /* History toolbar */
  .toolbar { padding: 10px; gap: 8px; }
  .toolbar-input { flex: 1 1 100%; min-width: 0; }
  .toolbar-label { display: none; }
  .toolbar-select { flex: 1 1 auto; }
  #resultCount { margin-left: auto !important; font-size: 12px !important; white-space: nowrap; }

  /* Footbar — $X + кнопка, "Итого · ..." скрыто */
  .footbar-inner { padding: 10px 14px; gap: 10px; }
  .fs-line { display: none; }
  .footbar-summary { flex: 0 0 auto; gap: 8px; }
  .fs-total { min-width: 70px; align-items: center; text-align: center; }
  .fs-total-value { font-size: 18px; }
  .footbar-actions { flex: 1; }
  .footbar-actions .btn { width: 100%; padding: 10px 14px; }
}

@media (max-width: 440px) {
  /* .brand-text + .brand-mark уже скрыты/уменьшены через @max-width:960 */
  .balance-topup { display: none; } /* + скрыт на 440, баланс кликабельный */
  .user-name { display: none; }
  .balance-label { display: none; }
  .tier-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .balance-pill { padding: 4px 6px 4px 8px; gap: 4px; }
  .balance-icon { width: 22px; height: 22px; }
  .user-chip { padding: 2px; }
  .user-avatar { width: 24px; height: 24px; }
  .topnav-item { font-size: 12px; padding: 5px 6px; }
  /* На узком экране пункт сжимается до 6px по бокам — точку подбираем ближе
     к углу и чуть меньше, иначе она наезжает на подпись. */
  .topnav-item.has-alert::after { top: 3px; right: 3px; width: 6px; height: 6px; }
}

/* Самые узкие — iPhone SE / Galaxy Fold */
@media (max-width: 380px) {
  .cat-grid { grid-template-columns: 1fr; } /* категории в 1 столбик */
  .layout { padding: 12px 12px 100px; }
  .block { padding: 14px; }
  .page-head { padding: 16px 12px 10px; }
  .page-body { padding: 0 12px 30px; }
  .modal { padding: 14px; }
  .topbar-inner { padding: 6px 10px; }
  /* Brief actions ужимаем сильнее */
  .brief-btn { padding: 4px 8px; font-size: 11px; }
}

/* ============================================================
   Topbar — minimal (для страницы оплаты и аналогичных «фокус»-страниц)
   ============================================================ */
.topbar-minimal .topbar-inner {
  justify-content: space-between;
}
.topbar-minimal .topbar-right {
  display: flex; align-items: center; gap: 8px;
}

/* ============================================================
   Top-up modal
   ============================================================ */
/* Модалка центрируется, не превышает 90vh, body скроллится внутри. Backdrop без скролла — нет дублирования. */
.modal-backdrop { align-items: center; padding: 20px; overflow: hidden; }
.modal-backdrop.open { display: flex; }

.topup-modal {
  max-width: 520px; max-height: 90vh;
  display: flex; flex-direction: column;
  padding: 22px;
}
.topup-modal .modal-head, .topup-modal .modal-foot { flex-shrink: 0; }
.topup-modal .modal-body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  /* небольшой паддинг справа чтобы scrollbar не примыкал к контенту */
  padding-right: 4px; margin-right: -4px;
}
.topup-modal .modal-head {
  align-items: flex-start; gap: 14px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line); margin-bottom: 18px;
}
.topup-modal .modal-icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--primary));
  display: grid; place-items: center; color: #fff;
}
.topup-modal .modal-icon svg { width: 22px; height: 22px; }
.topup-modal .modal-title { font-size: 18px; font-weight: 700; margin: 0 0 4px; line-height: 1.2; color: var(--text); }
.topup-modal .modal-sub { font-size: 13px; color: var(--muted); margin: 0; }
.topup-modal .modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.topup-modal .btn { padding: 9px 16px; font-size: 14px; }

/* Сумма */
.topup-amount-row {
  display: grid; grid-template-columns: 1fr; gap: 10px; align-items: stretch;
}
.topup-amount-input {
  position: relative; display: flex; align-items: stretch;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.topup-amount-input:focus-within {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}
.topup-amount-currency {
  display: grid; place-items: center; padding: 0 14px; font-size: 18px; font-weight: 700;
  color: var(--muted); background: rgba(99,102,241,.08); border-right: 1px solid var(--line);
}
.topup-amount-input input {
  flex: 1; border: 0; background: transparent; color: var(--text);
  font-size: 18px; font-weight: 600; padding: 12px 14px; outline: none;
  font-family: inherit;
}
.topup-amount-presets {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.amount-preset {
  padding: 9px 0; font-size: 13px; font-weight: 600; border-radius: 8px;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line);
  cursor: pointer; transition: all .15s; font-family: inherit;
}
.amount-preset:hover { background: rgba(99,102,241,.12); border-color: var(--primary); color: var(--primary); }
.topup-amount-hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.topup-amount-hint.err { color: #f87171; }

/* ============================================================
   Crypto picker — кастомный dropdown с иконками и поиском
   ============================================================ */
.cpicker { position: relative; }
.cpicker-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; min-height: 52px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); cursor: pointer; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.cpicker-toggle:hover { border-color: var(--primary); }
.cpicker.open .cpicker-toggle,
.cpicker-toggle:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.18); }
.cpicker-toggle-content { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-align: left; }
.cpicker-placeholder { color: var(--muted); font-size: 14px; }
.cpicker-chevron {
  width: 16px; height: 16px; color: var(--muted); flex-shrink: 0;
  transition: transform .2s;
}
.cpicker.open .cpicker-chevron { transform: rotate(180deg); }

/* Toggle "содержимое" — иконка + лейбл монеты + сеть */
.cpicker-icon {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; overflow: hidden;
}
.cpicker-icon svg { width: 28px; height: 28px; display: block; }
.cpicker-text { display: flex; align-items: baseline; gap: 6px; flex: 1; min-width: 0; }
.cpicker-label { font-size: 15px; font-weight: 700; color: var(--text); }
.cpicker-sub {
  font-size: 11px; font-weight: 600; color: var(--primary);
  padding: 2px 6px; background: rgba(99,102,241,.14); border-radius: 4px;
  text-transform: uppercase; letter-spacing: .4px;
}

/* Panel — выпадающий список (DESKTOP: inline в потоке модалки, чтобы не было двойного скролла) */
.cpicker-panel {
  margin-top: 6px;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 320px;
  animation: cpicker-fade-down .15s ease-out;
}
/* hidden-атрибут должен работать даже при display:flex */
.cpicker-panel[hidden] { display: none !important; }
:root[data-theme="light"] .cpicker-panel { background: rgba(255,255,255,.98); }

@keyframes cpicker-fade-down {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Bottom-sheet вариант для мобильных — раскрытие снизу, full-width, поверх модалки */
@media (max-width: 560px) {
  .cpicker-panel {
    position: fixed; left: 0; right: 0; top: auto; bottom: 0;
    margin-top: 0;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
    max-height: 70vh;
    z-index: 200;
    box-shadow: 0 -8px 30px rgba(0,0,0,.45);
    animation: cpicker-slide-up .22s ease-out;
  }
  /* Затемнение позади bottom-sheet */
  .cpicker.open::before {
    content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.5);
    z-index: 199; animation: cpicker-fade-in .22s ease-out;
  }
  /* Drag-handle сверху bottom-sheet */
  .cpicker-panel::before {
    content: ""; display: block; width: 36px; height: 4px; border-radius: 2px;
    background: var(--line-2); margin: 8px auto 4px;
  }
}
@keyframes cpicker-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes cpicker-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cpicker-search {
  position: relative; padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.cpicker-search svg {
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--muted);
}
.cpicker-search input {
  width: 100%; padding: 8px 10px 8px 32px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); font-family: inherit; font-size: 13px;
}
.cpicker-search input:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(99,102,241,.18);
}

.cpicker-list {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; padding: 6px 0;
}
.cpicker-list::-webkit-scrollbar { width: 6px; }
.cpicker-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.cpicker-list::-webkit-scrollbar-thumb:hover { background: var(--muted); }

.cpicker-item {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: transparent; border: 0; cursor: pointer;
  color: var(--text); font-family: inherit; transition: background .12s;
  text-align: left;
}
.cpicker-item:hover { background: rgba(99,102,241,.10); }
.cpicker-item.selected {
  background: rgba(99,102,241,.16);
}
.cpicker-item .cpicker-min {
  font-size: 11px; color: var(--muted); font-weight: 500;
  margin-left: auto; flex-shrink: 0;
}

.cpicker-empty {
  padding: 24px 14px; text-align: center; color: var(--muted); font-size: 13px;
}

.topup-method-info {
  margin-top: 10px; padding: 10px 12px; border-radius: 8px;
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(34,211,238,.08));
  border: 1px solid rgba(99,102,241,.2); font-size: 13px;
}
.topup-method-info-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.topup-method-info-row strong { color: var(--text); font-weight: 700; }
.topup-method-info-sub { color: var(--muted); font-size: 12px; }

.topup-info-box {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: 8px;
  background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.25);
  font-size: 12.5px; color: var(--muted); line-height: 1.45;
}
.topup-info-box svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }

/* ============================================================
   Pay page — отдельная страница оплаты (crypto-processor style)
   ============================================================ */
.pay-wrap {
  max-width: 560px; margin: 30px auto; padding: 0 16px 60px;
}
.pay-card {
  background: rgba(20,26,61,.85); backdrop-filter: blur(20px);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: 28px; box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
:root[data-theme="light"] .pay-card { background: rgba(255,255,255,.96); }

/* Шапка карточки: ID заявки + status badge */
.pay-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.pay-head-eyebrow {
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .8px; font-weight: 600; margin-bottom: 4px;
}
.pay-head-id { font-size: 14px; color: var(--text); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.pay-head-id code {
  font-family: 'SF Mono', Monaco, 'Consolas', monospace;
  background: var(--surface-2); padding: 2px 8px; border-radius: 6px;
  font-size: 12px; color: var(--primary); border: 1px solid var(--line);
}
.pay-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text); text-decoration: none; font-size: 13px; font-weight: 500;
  transition: all .15s;
}
.pay-back:hover { background: rgba(99,102,241,.12); border-color: var(--primary); }
.pay-back svg { width: 14px; height: 14px; }

/* Status badge */
.pay-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
}
.pay-status .dot {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 4px currentColor; opacity: .2;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: .2; }
  50% { opacity: .4; }
}
.pay-status.active  { background: rgba(245,158,11,.12); color: #f59e0b; }
.pay-status.paid    { background: rgba(34,197,94,.14);  color: #22c55e; }
.pay-status.expired { background: rgba(248,113,113,.12); color: #f87171; }
.pay-status.paid .dot, .pay-status.expired .dot { animation: none; }

/* Eyebrow «Шаг 2 из 2» — над заголовком */
.pay-step {
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 1.2px; font-weight: 600; margin-bottom: 6px;
  opacity: .75;
}

/* Tail (последние символы адреса) — выделен цветом и жирностью, БЕЗ подложки */
.pay-addr-tail {
  color: var(--primary);
  font-weight: 700;
  white-space: nowrap; display: inline-block;
  background: none; padding: 0; border-radius: 0;
}

/* Payment block: QR слева + вертикальный стек pills справа */
.pay-payment {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: stretch;
  margin-bottom: 14px;
}
.pay-qr-box {
  background: #fff; padding: 10px; border-radius: 12px;
  width: 180px; height: 180px; flex-shrink: 0;
  display: grid; place-items: center; overflow: hidden;
  align-self: start;
}
.pay-qr-box > div { width: 160px; height: 160px; }
.pay-qr-box canvas, .pay-qr-box img { display: block; width: 160px !important; height: 160px !important; }

.pay-fields {
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
}

/* Pill: clickable button (адрес / сумма) с copy справа */
.pay-field {
  display: grid; grid-template-rows: auto auto; gap: 6px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text); font-family: inherit; cursor: pointer;
  transition: all .15s; width: 100%; text-align: left;
}
.pay-field:hover { background: rgba(99,102,241,.10); border-color: var(--primary); }
.pay-field.done  { background: rgba(34,197,94,.14); border-color: #22c55e; }

.pay-field-label {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 10.5px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .6px; font-weight: 600;
}
.pay-field-method {
  text-transform: none; letter-spacing: 0; font-weight: 500;
  color: var(--accent); font-size: 10.5px;
}

.pay-field-value {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 15px; font-weight: 600; color: var(--text);
  overflow-wrap: anywhere; word-break: normal;
  line-height: 1.4; min-width: 0;
}
.pay-field-value .mono { font-family: 'SF Mono', Monaco, 'Consolas', monospace; letter-spacing: -.2px; }
.pay-field-value > span:first-child { flex: 1; min-width: 0; }
.pay-field svg {
  width: 16px; height: 16px; color: var(--primary); flex-shrink: 0;
}
.pay-field.done svg { color: #22c55e; }

/* Compact inline hint — одна строка info с иконкой слева */
.pay-hint-inline {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 14px; border-radius: 10px;
  background: rgba(99,102,241,.06); border: 1px solid rgba(99,102,241,.18);
  font-size: 12.5px; color: var(--muted); line-height: 1.5;
  margin-bottom: 14px;
}
.pay-hint-inline svg {
  width: 15px; height: 15px; color: var(--primary); flex-shrink: 0; margin-top: 2px;
}

/* Status + Timer одна плашка снизу payment блока */
.pay-status-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.pay-status-timer {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: #22c55e;
  font-variant-numeric: tabular-nums; letter-spacing: .5px;
}
.pay-status-timer svg { width: 15px; height: 15px; }
.pay-status-timer.expired { color: #f87171; }
.pay-status-timer.paid    { color: #22c55e; }

/* Share hint — subtle, с кнопкой share справа */
.pay-share-hint {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 10px;
  background: rgba(34,211,238,.06); border: 1px solid rgba(34,211,238,.18);
  font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 18px;
}
.pay-share-hint > svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; align-self: start; margin-top: 2px; }
.pay-share-text strong { color: var(--text); font-weight: 600; display: block; margin-bottom: 2px; }

.pay-share-btn {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 8px 14px; border-radius: 8px;
  background: var(--accent); color: #fff; border: 0;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s;
  white-space: nowrap;
}
.pay-share-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.pay-share-btn.done  { background: #22c55e; }
.pay-share-btn svg { width: 14px; height: 14px; color: currentColor; }

/* Mobile — кнопка переезжает в новую строку под текст */
@media (max-width: 560px) {
  .pay-share-hint {
    grid-template-columns: auto 1fr;
  }
  .pay-share-btn {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

/* Support */
.pay-support {
  display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.pay-support-label { font-size: 13px; color: var(--muted); font-weight: 500; }
.pay-support a {
  color: var(--primary); text-decoration: none; font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; gap: 5px;
}
.pay-support a:hover { text-decoration: underline; }

/* Paid actions */
.pay-paid-actions {
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  padding: 24px; margin-bottom: 22px;
  background: linear-gradient(135deg, rgba(34,197,94,.14), rgba(34,197,94,.04));
  border: 1px solid rgba(34,197,94,.3); border-radius: 14px;
  text-align: center;
}
/* hidden-атрибут должен работать даже при наличии display: flex */
.pay-paid-actions[hidden] { display: none !important; }
.topup-method-info[hidden] { display: none !important; }
.pay-paid-actions h3 { font-size: 18px; color: #22c55e; font-weight: 700; margin: 0; }
.pay-paid-actions p { font-size: 13px; color: var(--muted); margin: 0; }
.pay-paid-actions .btn { margin-top: 6px; }

/* ============================================================
   Страница оплаты — mobile (≤560px)
   ============================================================ */
@media (max-width: 560px) {
  .pay-wrap { margin: 14px auto; padding: 0 10px 40px; }
  .pay-card { padding: 18px 14px; border-radius: 14px; }

  /* Шапка карточки */
  .pay-head { padding-bottom: 14px; margin-bottom: 14px; gap: 10px; }
  .pay-step { font-size: 10px; }
  .pay-head-eyebrow { font-size: 10px; }
  .pay-head-id { font-size: 12.5px; }
  .pay-head-id code { font-size: 10.5px; padding: 1px 6px; }
  .pay-status { font-size: 11px; padding: 4px 9px; gap: 6px; }

  /* Payment block: QR сверху по центру, fields снизу */
  .pay-payment { grid-template-columns: 1fr; gap: 12px; }
  .pay-qr-box { margin: 0 auto; }
  .pay-field { padding: 10px 12px; }
  .pay-field-value { font-size: 13.5px; }
  .pay-field-label { font-size: 10px; }
  .pay-field-method { font-size: 10px; }

  /* Hint: чуть тише */
  .pay-hint-inline { font-size: 11.5px; padding: 8px 12px; }

  /* Status + Timer bar: компактнее */
  .pay-status-bar { padding: 8px 12px; gap: 8px; }
  .pay-status-timer { font-size: 13px; }

  /* Share-hint: на мобиле кнопка переезжает вниз */
  .pay-share-hint { padding: 10px 12px; font-size: 12px; }

  /* Support: вертикально */
  .pay-support { flex-direction: column; gap: 6px; padding: 12px 14px; text-align: center; }
  .pay-support-label { font-size: 12px; }

  /* Минимальная шапка тоже — компактнее */
  .topbar-minimal .topbar-inner { padding: 6px 10px; gap: 8px; flex-wrap: wrap; }
  .topbar-minimal .topbar-right { gap: 6px; }
  .topbar-minimal .pay-back { padding: 6px 10px; font-size: 12px; }
  .topbar-minimal .pay-back span { display: none; }   /* оставляем только иконку «стрелка» */
  .topbar-minimal .lang-switch { transform: scale(.9); transform-origin: right center; }
}

/* ============================================================
   Вход / регистрация — auth-формы
   ============================================================ */
.auth-wrap {
  max-width: 440px; margin: 56px auto; padding: 0 16px 60px;
  display: flex; flex-direction: column; align-items: center;
}
.auth-card {
  width: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 32px 30px; box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
:root[data-theme="light"] .auth-card { background: rgba(255,255,255,.96); }

.auth-head { margin-bottom: 24px; text-align: center; }
.auth-title {
  font-size: 24px; font-weight: 700; color: var(--text);
  margin: 0 0 8px; line-height: 1.2;
}
.auth-sub {
  font-size: 14px; color: var(--muted); margin: 0; line-height: 1.5;
}

.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-label {
  font-size: 13px; color: var(--text); font-weight: 600;
}
.auth-label-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.auth-forgot {
  font-size: 12px; color: var(--primary); text-decoration: none; font-weight: 500;
}
.auth-forgot:hover { text-decoration: underline; }

.auth-input-wrap { position: relative; }
.auth-input {
  width: 100%; padding: 11px 14px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); font-family: inherit; font-size: 14px;
  transition: all .15s;
}
.auth-input:focus {
  outline: none; border-color: var(--primary);
  background: var(--surface); box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}
.auth-input.invalid {
  border-color: #f87171; background: rgba(248,113,113,.06);
}
.auth-input.invalid:focus { box-shadow: 0 0 0 3px rgba(248,113,113,.18); }

.auth-eye {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 7px;
  background: transparent; border: 0; color: var(--muted);
  cursor: pointer; display: grid; place-items: center; padding: 0;
  transition: color .15s;
}
.auth-eye:hover, .auth-eye.active { color: var(--primary); }
.auth-eye svg { width: 16px; height: 16px; }
.auth-input-wrap .auth-input { padding-right: 44px; }

.auth-hint  { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.auth-error { font-size: 12px; color: #f87171; font-weight: 500; margin-top: 2px; }

.auth-check {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start;
  cursor: pointer; user-select: none;
  font-size: 12.5px; color: var(--muted); line-height: 1.5;
  margin-top: 4px;
}
.auth-check input { position: absolute; opacity: 0; pointer-events: none; }
.auth-check-mark {
  width: 18px; height: 18px; border-radius: 5px;
  background: var(--surface-2); border: 1.5px solid var(--line);
  display: grid; place-items: center; flex-shrink: 0;
  transition: all .15s; margin-top: 1px;
  position: relative;
}
.auth-check-mark::after {
  content: ""; width: 9px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px); opacity: 0; transition: opacity .12s;
}
.auth-check input:checked + .auth-check-mark {
  background: var(--primary); border-color: var(--primary);
}
.auth-check input:checked + .auth-check-mark::after { opacity: 1; }
.auth-check input:focus-visible + .auth-check-mark {
  box-shadow: 0 0 0 3px rgba(99,102,241,.25);
}
.auth-check-error .auth-check-mark { border-color: #f87171; }
.auth-check-text a { color: var(--primary); text-decoration: none; font-weight: 500; }
.auth-check-text a:hover { text-decoration: underline; }

.auth-submit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px 16px; border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  color: #fff; border: 0; font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all .15s;
  margin-top: 4px;
  /* Класс вешается и на <a> (кнопка «Открыть дашборд» после подтверждения
     почты), а ссылка тянет из браузера подчёркивание. */
  text-decoration: none;
}
.auth-submit:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(99,102,241,.3); }
.auth-submit:active { transform: translateY(0); }
.auth-submit svg { width: 16px; height: 16px; }
.auth-submit.loading { opacity: .65; cursor: wait; }
.auth-submit.loading svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0;
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 1px; font-weight: 600;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.auth-tg {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 16px; border-radius: 10px;
  background: rgba(34,158,217,.10); border: 1px solid rgba(34,158,217,.28);
  color: #229ED9; font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.auth-tg:hover { background: rgba(34,158,217,.18); border-color: #229ED9; transform: translateY(-1px); }
.auth-tg svg { width: 18px; height: 18px; }
.auth-tg.loading { opacity: .7; cursor: wait; }
.auth-tg.loading svg { animation: spin .8s linear infinite; }

.auth-footer {
  text-align: center; margin-top: 22px;
  font-size: 13px; color: var(--muted);
}
.auth-footer a {
  color: var(--primary); text-decoration: none; font-weight: 600; margin-left: 4px;
}
.auth-footer a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .auth-wrap { margin: 28px auto; }
  .auth-card { padding: 24px 20px; border-radius: 14px; }
  .auth-title { font-size: 20px; }
  .auth-sub { font-size: 13px; }
}

/* ============================================================
   404 — error page
   ============================================================ */
.err-wrap {
  max-width: 480px; margin: 80px auto; padding: 0 16px 60px;
  display: flex; flex-direction: column; align-items: center;
}
.err-card {
  width: 100%; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 40px 30px; box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
:root[data-theme="light"] .err-card { background: rgba(255,255,255,.96); }

.err-code {
  font-size: clamp(72px, 14vw, 120px); font-weight: 700; line-height: 1;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px; letter-spacing: -3px;
}
.err-title {
  font-size: 22px; font-weight: 700; color: var(--text);
  margin: 0 0 10px; line-height: 1.2;
}
.err-text {
  font-size: 14px; color: var(--muted); margin: 0 0 26px; line-height: 1.55;
}
.err-cta {
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.err-cta .auth-submit {
  max-width: 280px; text-decoration: none;
}
.err-support {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 500;
  padding: 6px 12px; border-radius: 8px; transition: color .15s;
}
.err-support:hover { color: var(--primary); }

@media (max-width: 480px) {
  .err-wrap { margin: 40px auto; }
  .err-card { padding: 28px 20px; }
  .err-title { font-size: 18px; }
}

/* ============================================================
   Verify email banner — sticky под топбаром, amber-warning
   ============================================================ */
.verify-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(0deg, rgba(245,158,11,.10), rgba(245,158,11,.04));
  border-bottom: 1px solid rgba(245,158,11,.22);
  color: #fbbf24; font-size: 13px;
}
.verify-banner[hidden] { display: none; }
.verify-banner svg { width: 16px; height: 16px; flex-shrink: 0; }
.verify-banner-text { flex: 1; min-width: 0; line-height: 1.4; }
.verify-banner-text strong { color: #fbbf24; font-weight: 600; margin-right: 6px; }
.verify-banner-text span { color: var(--muted); font-weight: 400; }
.verify-banner-resend {
  flex-shrink: 0; padding: 6px 14px; border-radius: 8px;
  background: rgba(245,158,11,.18); color: #fbbf24;
  border: 1px solid rgba(245,158,11,.32);
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.verify-banner-resend:hover { background: rgba(245,158,11,.28); }
.verify-banner-resend:disabled { opacity: .5; cursor: not-allowed; }
.verify-banner-resend.done { background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.32); color: #22c55e; }

/* Плашка со ссылкой на альтернативную версию интерфейса */
.oldver-banner {
  background: linear-gradient(0deg, rgba(124,108,255,.10), rgba(124,108,255,.04));
  border-bottom: 1px solid rgba(124,108,255,.22);
  font-size: 13px;
}
/* фон во всю ширину, контент — по контейнеру страницы (как .page-body) */
.oldver-banner-inner {
  display: flex; align-items: center; gap: 12px;
  max-width: 1400px; margin: 0 auto; padding: 9px 24px;
}
.oldver-banner-text { flex: 1; min-width: 0; line-height: 1.45; color: var(--muted); }
.oldver-banner-link {
  color: var(--primary-2); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid currentColor; white-space: nowrap;
}
.oldver-banner-link:hover { opacity: .85; }
.oldver-banner-close {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: transparent; border: none; color: var(--muted); cursor: pointer; transition: all .15s;
}
.oldver-banner-close:hover { background: var(--surface-2); color: var(--text); }
.oldver-banner-close svg { width: 15px; height: 15px; }
:root[data-theme="light"] .verify-banner {
  background: linear-gradient(0deg, rgba(245,158,11,.10), rgba(245,158,11,.04));
  border-bottom-color: rgba(180,83,9,.30);
  color: #92400e;
}
:root[data-theme="light"] .verify-banner-text strong { color: #92400e; }
:root[data-theme="light"] .verify-banner-resend {
  background: rgba(245,158,11,.16); color: #92400e;
  border-color: rgba(180,83,9,.32);
}

@media (max-width: 540px) {
  .verify-banner { flex-wrap: wrap; padding: 10px 12px; gap: 8px; font-size: 12.5px; }
  .verify-banner-resend { width: 100%; padding: 7px 14px; }
}

.auth-success { text-align: center; padding: 16px 0 8px; }
.auth-success svg { margin-bottom: 6px; }
.auth-success h3 { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.auth-success p { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.5; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   Draft autosave indicator — под sidebar «Детали заказа»
   Inline-блок внутри .preview-sticky, едет вместе со sticky панелью.
   ============================================================ */
.preview-draft {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 10px; padding: 7px 14px; border-radius: 10px;
  background: rgba(34,197,94,.04);
  border: 1px solid rgba(34,197,94,.12);
  color: var(--muted);
  font-size: 11.5px; font-weight: 500; letter-spacing: .1px;
  user-select: none;
  animation: previewDraftFadeIn .25s ease-out;
}
.preview-draft[hidden] { display: none; }
/* Кнопка сброса черновика — заметная red-pill (иконка + «Очистить»/«Clear»). */
.preview-draft-clear {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 4px; padding: 4px 10px;
  background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.38); border-radius: 7px;
  color: #ef4444; cursor: pointer;
  font-size: 11px; font-weight: 600; letter-spacing: .2px;
  transition: background .15s, border-color .15s, transform .1s;
}
.preview-draft-clear svg { width: 13px; height: 13px; color: currentColor; opacity: 1; }
.preview-draft-clear:hover { background: rgba(239,68,68,.2); border-color: rgba(239,68,68,.6); }
.preview-draft-clear:active { transform: scale(.96); }
.preview-draft-clear:focus-visible { outline: 2px solid #ef4444; outline-offset: 1px; }
.preview-draft-clear-label { white-space: nowrap; }

/* Subtle info-hint plate сверху страницы (история, etc.) */
.page-hint {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 14px; border-radius: 10px;
  background: rgba(99,102,241,.06);
  border: 1px solid rgba(99,102,241,.16);
  color: var(--muted);
  font-size: 12.5px; line-height: 1.5;
  margin-bottom: 14px;
}
.page-hint svg { width: 15px; height: 15px; color: var(--primary); flex-shrink: 0; margin-top: 2px; }
.preview-draft > svg { width: 11px; height: 11px; flex-shrink: 0; color: #22c55e; opacity: .8; } /* только галочка (прямой потомок); иконка корзины в кнопке наследует красный */
@keyframes previewDraftFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
:root[data-theme="light"] .preview-draft {
  background: rgba(34,197,94,.06);
  border-color: rgba(34,197,94,.18);
}

/* Mobile: sidebar становится `position: static` и переезжает в обычный flow.
   indicator показываем как есть — нормально читается. */

/* ──────────────────────── Реферальная программа ──────────────────────── */
/* Констрейнт-обёртка для секций вне .page-body (как page-head/page-body). */
.ref-section { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 720px) { .ref-section { padding: 0 16px; } }

.ref-hero {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 24px; margin-bottom: 16px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--primary-soft), rgba(34,211,238,.10));
  border: 1px solid var(--line-2);
}
.ref-hero-icon {
  width: 52px; height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px; background: var(--primary-soft-2); color: var(--primary-2);
}
.ref-hero-icon svg { width: 26px; height: 26px; }
.ref-hero-percent { font-size: 30px; font-weight: 700; color: var(--text); line-height: 1; }
.ref-hero-percent span { color: var(--primary-2); }
.ref-hero-text { font-size: 13px; color: var(--muted); margin-top: 5px; max-width: 540px; line-height: 1.5; }

.ref-links { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.ref-link {
  display: flex; flex-direction: column; gap: 6px; text-align: left; width: 100%;
  padding: 12px 14px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--line);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.ref-link:hover { border-color: var(--primary-soft-2); }
.ref-link.copied { border-color: var(--success); }
.ref-link-label { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.ref-link-row { display: flex; align-items: center; gap: 10px; }
.ref-link-value { flex: 1; font-size: 13px; color: var(--text-2); word-break: break-all; }
.ref-link-copy { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); transition: color .15s; }
.ref-link:hover .ref-link-copy { color: var(--primary-2); }
.ref-link.copied .ref-link-copy { color: var(--success); }

.ref-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.ref-metric {
  padding: 16px 18px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
}
.ref-metric-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.ref-metric-value { font-size: 24px; font-weight: 700; color: var(--text); line-height: 1; }
.ref-metric-value.accent { color: var(--success); }

.ref-withdraw {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px; flex-wrap: wrap;
}
.ref-withdraw-amount { font-size: 22px; font-weight: 700; color: var(--text); }
.ref-withdraw-hint { font-size: 12.5px; color: var(--muted); margin-top: 3px; max-width: 380px; line-height: 1.5; }
#refWithdrawBtn { min-width: 200px; }
#refWithdrawBtn:disabled { opacity: .5; cursor: not-allowed; }

.ref-support {
  display: flex; align-items: center; gap: 16px;
  margin-top: 16px; padding: 16px 20px;
  border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
}
.ref-support-icon {
  width: 42px; height: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--accent-2-soft); color: var(--accent);
}
.ref-support-icon svg { width: 22px; height: 22px; }
.ref-support-body { flex: 1; min-width: 0; }
.ref-support-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.ref-support-text { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.ref-support-btn {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 9px 16px; border-radius: 10px;
  background: var(--primary-soft); border: 1px solid var(--primary-soft-2);
  color: var(--primary-2); font-size: 13px; font-weight: 500;
  text-decoration: none; transition: background .15s, border-color .15s;
}
.ref-support-btn:hover { background: var(--primary-soft-2); }
.ref-support-btn svg { width: 15px; height: 15px; }

@media (max-width: 720px) {
  .ref-stats { grid-template-columns: repeat(2, 1fr); }
  .ref-hero { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ref-withdraw { flex-direction: column; align-items: stretch; }
  #refWithdrawBtn { width: 100%; }
  .ref-support { flex-direction: column; align-items: flex-start; }
  .ref-support-btn { width: 100%; justify-content: center; }
}

/* ──────────── «Ваш ID» на странице команды (быстро передать тимлиду) ──────────── */
.team-myid {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
}
.team-myid-label { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.team-myid-hint { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
/* Код приглашения — вторая строка под подсказкой. Кнопка, но выглядит как
   подсказка: это не действие страницы, а значение, которое хочется скопировать. */
.team-myid-code {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 5px; padding: 3px 9px;
  background: var(--primary-soft); border: 1px solid var(--line-2);
  border-radius: 999px; cursor: pointer;
  font-size: 12.5px; color: var(--muted);
  transition: background .15s, border-color .15s, color .15s;
}
.team-myid-code:hover { background: var(--primary-soft-2); color: var(--text); }
.team-myid-code .mono { font-weight: 600; letter-spacing: .04em; color: var(--text); }
.team-myid-code.copied { border-color: var(--success); color: var(--success); }
.team-myid-codes { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* «Сменить» намеренно тише кода рядом: это редкое действие, а не то, к чему
   зовут. Подчёркивание вместо рамки — чтобы не спорить с кнопкой копирования. */
.team-myid-rotate {
  background: none; border: 0; padding: 0;
  font-size: 12px; color: var(--muted); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  transition: color .15s;
}
.team-myid-rotate:hover { color: var(--text); }
.team-myid-rotate:disabled { opacity: .5; cursor: default; text-decoration: none; }
.team-myid-chip {
  display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 10px 16px; border-radius: 12px;
  background: var(--primary-soft); border: 1px solid var(--primary-soft-2);
  color: var(--primary-2); cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.team-myid-chip:hover { background: var(--primary-soft-2); }
.team-myid-chip .mono { font-size: 16px; font-weight: 600; letter-spacing: .02em; }
.team-myid-chip svg { width: 16px; height: 16px; flex-shrink: 0; }
.team-myid-chip.copied { border-color: var(--success); color: var(--success); }
@media (max-width: 720px) {
  .team-myid { flex-direction: column; align-items: stretch; }
  .team-myid-chip { justify-content: center; }
}


/* Пошаговая инструкция на странице команды (team.php). */
.team-howto { margin: 0; padding: 12px 18px 16px 38px; display: grid; gap: 9px;
              font-size: 13px; line-height: 1.55; color: var(--text); }
.team-howto li::marker { color: var(--primary); font-weight: 700; }

/* Инструкция «Как добавить участника»: сворачивается, когда команда не пустая. */
.team-howto-card > summary { cursor: pointer; list-style: none; }
.team-howto-card > summary::-webkit-details-marker { display: none; }
.team-howto-card > summary::after {
  content: ""; width: 8px; height: 8px; margin-left: auto; flex-shrink: 0;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .18s ease;
}
.team-howto-card[open] > summary::after { transform: rotate(-135deg); }
.team-howto-card:not([open]) > summary { border-bottom: 0; }
.team-copy-bot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-left: 6px; padding: 0; vertical-align: -6px;
  border: 1px solid var(--line); border-radius: 6px; background: transparent;
  color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s;
}
.team-copy-bot:hover { color: var(--primary); border-color: var(--primary); }
.team-copy-bot.copied { color: #16a34a; border-color: #16a34a; }
.team-copy-bot svg { width: 13px; height: 13px; }

/* Строка со ссылкой на бота под инструкцией. */
.team-howto-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 18px 16px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px; font-size: 13px;
}
.team-howto-foot-label { color: var(--muted); }
/* Цвет ссылок берём из переменной темы: без него браузер рисует свой тёмно-синий,
   который на тёмном фоне (тема по умолчанию) почти не читается. В тёмной --primary
   светлый (#818cf8), в светлой насыщенный (#6366f1) — обе темы закрыты одним правилом. */
.team-howto a, .team-bot-link { color: var(--primary); }
.team-howto a:hover, .team-bot-link:hover { color: var(--primary-2); }
.team-bot-link { font-weight: 600; text-decoration: none; }
.team-bot-link:hover { text-decoration: underline; }