/* ============================================================
   pixapp.io — AUTH + ACCOUNT system
   Canva-style sign-in: social providers, email/password,
   onboarding, account menu, redesigned cabinet.
   Uses the corporate tokens from styles.css (navy/bronze/paper).
   ============================================================ */

:root {
  /* Provider brand colors */
  --pv-vk:    #0077FF;
  --pv-ya:    #FC3F1D;
  --pv-tg:    #28A8E9;
  --pv-sber:  #21A038;
  --pv-tid:   #FFDD2D;
  --pv-tid-ink: #1A1A1A;
  --pv-google:#4285F4;
  --pv-ozon:  #005BFF;
}

/* ============================================================
   MODAL SHELL
   ============================================================ */
.auth-bg {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(14,18,24,.58);
  backdrop-filter: blur(7px) saturate(1.2);
  -webkit-backdrop-filter: blur(7px) saturate(1.2);
  display: grid; place-items: center; padding: 24px;
  animation: authFade .22s var(--ease) both;
  overflow-y: auto;
}
@keyframes authFade { from { opacity: 0; } to { opacity: 1; } }

/* ОБНОВЛЕНО (запрос владельца 2026-08-03, скриншот) — раньше карточка
   модалки была полупрозрачным "стеклом" (var(--glass-bg), ~66% белого)
   прямо над затемнённой подложкой (.auth-bg, тёмная rgba поверх страницы) —
   тёмный фон просвечивал сквозь стекло, и всё окно читалось как грязно-
   серое пятно, а не крисп-белая карточка. Стекло уместно у мелких
   поповеров/меню (те висят над обычным светлым контентом страницы, не над
   тёмной подложкой) — здесь, у полноценного модального ОКНА, сплошной
   --surface. */
.auth-modal {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--glass-shadow);
  width: 100%;
  animation: authPop .28s var(--ease) both;
  overflow: hidden;
}
.auth-modal.embedded { animation: none; box-shadow: var(--sh-md); }
@keyframes authPop { from { transform: translateY(14px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }

/* 520px (было 440px) — запрос владельца 2026-08-06: при 2 колонках .pv-grid
   плитки соцвхода не помещались по 3 в ряд, теперь помещаются (см.
   ".auth-modal.v-a .pv-grid" ниже) без обрезки подписей вроде "Telegram". */
.auth-modal.v-a { max-width: 520px; }
/* Только у Варианта A — у Варианта B (.auth-split, 800px) та же .pv-grid
   стоит в узкой правой половине (~324px контента), 3 колонки там сжали бы
   плитки сильнее, чем сейчас 2 — эта ширина трогает только Вариант A. */
.auth-modal.v-a .pv-grid { grid-template-columns: repeat(3, 1fr); }
.auth-modal.v-b { max-width: 800px; }
.auth-modal.v-c { max-width: 420px; }
.auth-modal.v-upgrade { max-width: 920px; }

.auth-close {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid transparent; background: transparent;
  color: var(--muted); display: grid; place-items: center; cursor: pointer;
  transition: background .15s, color .15s;
}
.auth-close:hover { background: var(--paper-2); color: var(--ink); }

/* Inner padding container */
.auth-pad { padding: 34px 36px 30px; }
.auth-modal.v-c .auth-pad { padding: 40px 38px 32px; }

/* ── Brand / head ── */
.auth-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.auth-brand .logo-mark { width: 30px; height: 30px; font-size: 18px; border-radius: 8px; }
.auth-brand .logo-name { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.auth-brand .logo-name b { color: var(--navy); }

.auth-title { font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: -.02em; line-height: 1.12; color: var(--ink); }
.auth-sub { font-size: 14.5px; color: var(--muted); margin-top: 9px; line-height: 1.5; }
.auth-sub b { color: var(--navy); font-weight: 600; }

/* reason banner (gate context) */
.auth-reason {
  display: flex; align-items: center; gap: 10px;
  background: var(--bronze-tint); border: 1px solid rgba(200,163,92,.34);
  border-radius: 12px; padding: 11px 14px; margin-bottom: 20px;
}
.auth-reason-ic {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: var(--bronze); color: #fff; display: grid; place-items: center;
}
.auth-reason-txt { font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
.auth-reason-txt b { color: var(--bronze); font-weight: 700; }

/* ============================================================
   RETURNING ACCOUNT CHIPS (instant re-entry)
   ============================================================ */
.auth-known { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.auth-known-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 2px;
}
.acct-chip {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border-radius: 13px;
  border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; font-family: var(--sans); text-align: left;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.acct-chip:hover { border-color: var(--navy-line); box-shadow: var(--sh-sm); transform: translateY(-1px); }
.acct-chip-av {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  position: relative;
}
.acct-chip-pv {
  position: absolute; bottom: -2px; right: -2px;
  width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid var(--surface);
  display: grid; place-items: center;
}
.acct-chip-body { flex: 1; min-width: 0; }
.acct-chip-name { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-chip-meta { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-chip-go { color: var(--faint); flex: none; }
.acct-chip:hover .acct-chip-go { color: var(--navy); }

.auth-otheraccount {
  background: none; border: none; cursor: pointer; font-family: var(--sans);
  font-size: 13px; font-weight: 600; color: var(--navy);
  padding: 4px 2px; align-self: flex-start;
}
.auth-otheraccount:hover { text-decoration: underline; }

/* ============================================================
   PROVIDER BUTTONS
   ============================================================ */
.pv-badge {
  display: grid; place-items: center; flex: none;
  border-radius: 7px; color: #fff; font-weight: 800;
  font-family: var(--sans); line-height: 1;
}
.pv-vk   { background: var(--pv-vk); }
.pv-ya   { background: var(--pv-ya); }
.pv-tg   { background: linear-gradient(180deg, #2AABEE, #229ED9); }
.pv-sber { background: var(--pv-sber); }
.pv-tid  { background: var(--pv-tid); color: var(--pv-tid-ink); }
.pv-ozon { background: var(--pv-ozon); }
.pv-google { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
/* Международный/азиатский наборы (запрос владельца 2026-08-03) — фирменные
   цвета провайдеров: Apple — чёрный, LINE — #06C755, Kakao — #FEE500 с
   тёмным глифом (их бренд-гайды). */
.pv-apple { background: #000; }
.pv-line  { background: #06C755; }
.pv-kakao { background: #FEE500; color: #191919; }

/* full-width provider button (Variant A primary, B form) */
.pv-btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  height: 50px; padding: 0 16px; border-radius: 13px;
  border: 1px solid var(--line-strong); background: var(--surface);
  cursor: pointer; font-family: var(--sans); font-size: 14.5px; font-weight: 600;
  color: var(--ink); transition: border-color .15s, box-shadow .15s, background .15s, transform .12s;
}
.pv-btn:hover { border-color: var(--navy-line); box-shadow: var(--sh-sm); transform: translateY(-1px); }
.pv-btn:active { transform: translateY(0); }
.pv-btn .pv-badge { width: 26px; height: 26px; font-size: 12px; }
.pv-btn-arrow { margin-left: auto; color: var(--faint); }

/* hero provider (VK ID as the headline option) */
.pv-btn.pv-hero {
  background: var(--pv-vk); color: #fff; border-color: transparent;
  box-shadow: 0 6px 18px rgba(0,119,255,.28); height: 52px; font-size: 15px;
}
.pv-btn.pv-hero:hover { background: #0a6ee0; box-shadow: 0 8px 22px rgba(0,119,255,.36); }
.pv-btn.pv-hero .pv-badge { background: rgba(255,255,255,.22); color: #fff; }
.pv-btn.pv-hero .pv-btn-arrow { color: rgba(255,255,255,.7); }
/* Hero-кнопка Google (международный/азиатский регионы) — бренд-гайд Google
   Identity требует белую кнопку с цветным G, не перекрашенную заливку. */
.pv-btn.pv-hero.pv-hero-light {
  background: #fff; color: #1f1f1f; border: 1px solid var(--line-strong);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.pv-btn.pv-hero.pv-hero-light:hover { background: #f7f8fa; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.pv-btn.pv-hero.pv-hero-light .pv-badge { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.pv-btn.pv-hero.pv-hero-light .pv-btn-arrow { color: var(--faint); }
/* Бейдж "в прошлый раз" на hero-кнопке (паттерн Google/Canva: подсказать,
   каким способом человек уже входил — повторный вход в один клик). */
.pv-last-badge {
  flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  background: rgba(255,255,255,.2); color: inherit;
  border-radius: 999px; padding: 3px 8px;
}
.pv-hero-light .pv-last-badge { background: var(--navy-tint); color: var(--navy); }

/* "Другие способы входа" — разворот наборов остальных регионов (fail-open:
   неверная гео-догадка/VPN никого не запирает, см. REGION_PROVIDERS). */
.auth-moreways {
  background: none; border: none; cursor: pointer; align-self: center;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--muted);
  padding: 4px 6px; margin-top: 2px;
}
.auth-moreways:hover { color: var(--ink); text-decoration: underline; }

/* Свёрнутая e-mail-форма (прогрессивное раскрытие) — та же плитка, что и
   провайдеры, на всю ширину. */
.auth-email-toggle { width: 100%; justify-content: center; color: var(--ink-soft); }

/* compact grid of providers (2 cols) */
.pv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pv-tile {
  display: flex; align-items: center; gap: 9px;
  height: 46px; padding: 0 12px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: var(--surface);
  cursor: pointer; font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .12s;
  min-width: 0;
}
.pv-tile:hover { border-color: var(--navy-line); box-shadow: var(--sh-sm); transform: translateY(-1px); }
.pv-tile .pv-badge { width: 24px; height: 24px; font-size: 11px; }
.pv-tile span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* circular icon-only providers (Variant C) */
.pv-circ-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pv-circ {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; display: grid; place-items: center;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  position: relative;
}
.pv-circ:hover { border-color: var(--navy-line); box-shadow: var(--sh-md); transform: translateY(-2px); }
.pv-circ .pv-badge { width: 30px; height: 30px; font-size: 13px; }
.pv-circ-tip {
  position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: 11px; font-weight: 600;
  padding: 4px 9px; border-radius: 6px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 4;
}
.pv-circ:hover .pv-circ-tip { opacity: 1; }

/* Telegram plane glyph */
.pv-tg-plane { width: 60%; height: 60%; }

/* ============================================================
   DIVIDER WITH LABEL
   ============================================================ */
.auth-or {
  display: flex; align-items: center; gap: 14px;
  margin: 20px 0; color: var(--faint);
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
}
.auth-or::before, .auth-or::after { content: ""; height: 1px; background: var(--line); flex: 1; }

/* ============================================================
   EMAIL / PASSWORD FORM
   ============================================================ */
.auth-form { display: flex; flex-direction: column; gap: 13px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.auth-input-wrap { position: relative; display: flex; align-items: center; }
.auth-input-wrap > svg { position: absolute; left: 13px; color: var(--faint); pointer-events: none; }
.auth-input {
  width: 100%; height: 48px; padding: 0 14px 0 40px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--surface); color: var(--ink);
  font-family: var(--sans); font-size: 14.5px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.auth-input::placeholder { color: var(--faint); }
.auth-input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(28,58,87,.12); }
.auth-input.no-icon { padding-left: 14px; }
.auth-input.err { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192,57,43,.1); }
.auth-eye {
  position: absolute; right: 8px; width: 32px; height: 32px; border-radius: 8px;
  border: none; background: none; color: var(--muted); cursor: pointer;
  display: grid; place-items: center; transition: color .15s;
}
.auth-eye:hover { color: var(--ink); }

.auth-err-msg {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: #C0392B; font-weight: 600;
  margin-top: -2px;
}
.auth-row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.auth-mini-link {
  background: none; border: none; cursor: pointer; font-family: var(--sans);
  font-size: 12.5px; font-weight: 600; color: var(--navy); padding: 0;
}
.auth-mini-link:hover { text-decoration: underline; }

.auth-submit {
  width: 100%; height: 50px; border-radius: 13px; border: none;
  background: var(--navy); color: #fff; cursor: pointer;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  transition: background .18s, box-shadow .18s, transform .12s;
  box-shadow: var(--sh-md); margin-top: 4px;
}
.auth-submit:hover { background: var(--navy-deep); box-shadow: var(--sh-lg); transform: translateY(-1px); }
.auth-submit:disabled { opacity: .55; pointer-events: none; }
/* .ink — чёрная пилюля (запрос 2026-07-26, GlobalAlertModal) вместо обычного
   синего прямоугольного CTA — простое "OK"-подтверждение, не переход/покупка. */
.auth-submit.ink { background: var(--ink); border-radius: 999px; }
.auth-submit.ink:hover { background: #000; }

/* consent + legal */
.auth-consent {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 4px; cursor: pointer; user-select: none;
}
.auth-consent-box {
  width: 18px; height: 18px; border-radius: 5px; flex: none; margin-top: 1px;
  border: 1.5px solid var(--line-strong); background: var(--surface);
  display: grid; place-items: center; color: #fff; transition: all .15s;
}
.auth-consent.on .auth-consent-box { background: var(--navy); border-color: var(--navy); }
.auth-consent-txt { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.auth-consent-txt a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.auth-switch {
  text-align: center; font-size: 13.5px; color: var(--muted);
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft);
}
.auth-switch button {
  background: none; border: none; cursor: pointer; font-family: var(--sans);
  font-size: 13.5px; font-weight: 700; color: var(--navy); padding: 0 2px;
}
.auth-switch button:hover { text-decoration: underline; }

.auth-trust {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 11.5px; color: var(--faint); margin-top: 16px;
}

/* ============================================================
   VARIANT B — brand split panel
   ============================================================ */
.auth-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 540px; }
.auth-split-brand {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff; padding: 40px 38px;
  display: flex; flex-direction: column;
}
.auth-split-brand::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(200,163,92,.06) 0 2px, transparent 2px 22px);
  pointer-events: none;
}
.auth-split-brand > * { position: relative; z-index: 1; }
.asb-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: auto; }
.asb-logo .logo-mark { background: var(--bronze); color: #16314A; }
.asb-logo .logo-name { font-family: var(--serif); font-size: 19px; color: #fff; font-weight: 600; }
.asb-logo .logo-name b { color: var(--bronze); }
.asb-headline { font-family: var(--serif); font-size: 30px; line-height: 1.12; letter-spacing: -.02em; margin: 30px 0 22px; }
.asb-headline i { color: var(--bronze); font-style: italic; }
.asb-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.asb-item { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; color: #C9D7E2; line-height: 1.45; }
.asb-item-ic {
  width: 22px; height: 22px; border-radius: 50%; flex: none; margin-top: 1px;
  background: rgba(200,163,92,.18); display: grid; place-items: center; color: var(--bronze);
}
.asb-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; padding: 16px 18px; margin-top: auto;
}
.asb-rating { display: flex; align-items: center; gap: 9px; }
.asb-rating-num { font-family: var(--serif); font-size: 22px; font-weight: 600; color: #fff; }
.asb-rating-txt { font-size: 12px; color: #A9C0D4; line-height: 1.4; }

.auth-split-form { padding: 38px 38px 32px; display: flex; flex-direction: column; }

/* ============================================================
   Кнопка "отмена" (переиспользуется в ProviderScreen — см. auth.jsx)
   ============================================================ */
.onb-skip {
  background: none; border: none; cursor: pointer; font-family: var(--sans);
  font-size: 13.5px; font-weight: 600; color: var(--muted); padding: 8px;
}
.onb-skip:hover { color: var(--ink); }

/* ============================================================
   ACCOUNT MENU (nav)
   ============================================================ */
.acct-trigger {
  display: inline-flex; align-items: center; gap: 9px;
  height: 40px; padding: 4px 6px 4px 4px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  font-family: var(--sans); transition: border-color .15s, box-shadow .15s;
}
.acct-trigger:hover { border-color: var(--navy-line); box-shadow: var(--sh-sm); }
.acct-av {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
  font-family: var(--serif); font-size: 14px; font-weight: 600;
}
.acct-trigger-name { font-size: 13.5px; font-weight: 600; color: var(--ink); max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-trigger-chev { color: var(--muted); margin-right: 3px; transition: transform .2s; }
.acct-trigger.open .acct-trigger-chev { transform: rotate(180deg); }

/* Триггер и поповер аккаунта, когда AccountMenu стоит внизу бокового меню
   (запрос владельца 2026-08-03 "боковое меню как у Canva") — на всю
   ширину рейла вместо компактной пилюли, и поповер открывается ВВЕРХ и
   ВПРАВО от триггера (а не вниз-влево, как в шапке): триггер лежит у
   самого низа экрана, вниз открывать некуда. */
.acct-trigger-sidebar {
  width: 100%; border-radius: 12px; height: 46px; justify-content: flex-start;
  padding: 4px 10px 4px 4px;
}
.acct-trigger-sidebar .acct-trigger-name { max-width: none; flex: 1; text-align: left; }
/* Специфичность .acct-pop.acct-pop-sidebar (а не просто .acct-pop-sidebar)
   намеренно — у обоих классов одинаковая специфичность (0,1,0), а .acct-pop
   ниже по файлу и его top:calc(100% + 8px) молча перебивал top:auto здесь
   по порядку объявления в css, поповер открывался вниз и уезжал за экран
   вместо задуманного "вверх от триггера у самого низа рейла" (см. комментарий
   выше). Двойной класс поднимает специфичность выше .acct-pop, порядок в
   файле больше не важен. */
.acct-pop.acct-pop-sidebar {
  top: auto; bottom: calc(100% + 8px); left: 0; right: auto;
}

/* Обычная непрозрачная плашка, БЕЗ liquid-glass (запрос владельца
   2026-08-03: "убрать прозрачность liquid glass" у меню аккаунта) —
   раньше (2026-07-27) её нарочно перевели на --glass-* для единообразия с
   .attach-menu/.auth-modal/.crop-modal/.all-modal, но для самого частого
   поповера в шапке (открывается на каждой сессии) непрозрачный фон читается
   увереннее — баланс/тариф/аккаунт поверх размытого фона легче спутать с
   содержимым страницы под ним. */
.acct-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 80;
  width: 290px; padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--sh-lg);
  animation: authPop .18s var(--ease) both;
}
.acct-pop-head { display: flex; align-items: center; gap: 12px; padding: 12px 12px 14px; }
.acct-pop-av { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-family: var(--serif); font-size: 18px; font-weight: 600; position: relative; }
.acct-pop-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.acct-pop-mail { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.acct-balance {
  display: flex; align-items: center; gap: 11px;
  margin: 2px 6px 8px; padding: 12px 14px;
  border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line-soft);
}
.acct-balance.pro { background: linear-gradient(135deg, var(--navy-tint), var(--bronze-tint)); border-color: rgba(200,163,92,.3); }
.acct-balance-ic { width: 32px; height: 32px; border-radius: 9px; flex: none; background: var(--navy); color: #fff; display: grid; place-items: center; }
.acct-balance.pro .acct-balance-ic { background: var(--bronze); }
.acct-balance-num { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.1; }
.acct-balance-lbl { font-size: 11.5px; color: var(--muted); }
.acct-balance-up {
  margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--navy);
  background: var(--surface); border: 1px solid var(--navy-line); border-radius: 8px;
  padding: 5px 10px; cursor: pointer; font-family: var(--sans); white-space: nowrap;
}
.acct-balance-up:hover { background: var(--navy); color: #fff; }

.acct-menu-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; border-radius: 10px; border: none; background: none;
  color: var(--ink-soft); font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  cursor: pointer; text-align: left; transition: background .12s, color .12s;
}
.acct-menu-item:hover { background: var(--paper-2); color: var(--ink); }
.acct-menu-item svg { color: var(--muted); flex: none; }
.acct-menu-item.danger:hover { background: #FBEEEC; color: #C0392B; }
.acct-menu-item.danger:hover svg { color: #C0392B; }
.acct-menu-sep { height: 1px; background: var(--line-soft); margin: 6px 8px; }

.acct-switch-row { padding: 4px 6px 2px; }
.acct-switch-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding: 6px 8px 4px; }

/* ============================================================
   CABINET (account dashboard)
   ============================================================ */
.cab-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.cab-tab {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 10px;
  border: 1px solid transparent; background: transparent;
  color: var(--ink-soft); font-family: var(--sans); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.cab-tab:hover { background: var(--paper-2); color: var(--ink); }
.cab-tab.active { background: var(--surface); border-color: var(--line); color: var(--navy); box-shadow: var(--sh-sm); }
.cab-tab .cab-tab-count {
  font-size: 11px; font-weight: 700; background: var(--paper-2); color: var(--muted);
  border-radius: 20px; padding: 1px 7px;
}
.cab-tab.active .cab-tab-count { background: var(--navy-tint); color: var(--navy); }

.cab-stat-row { display: flex; gap: 14px; flex-wrap: wrap; }
.cab-stat {
  flex: 1; min-width: 150px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px;
}
.cab-stat-n { font-family: var(--serif); font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.cab-stat-l { font-size: 13px; color: var(--muted); margin-top: 7px; }
.cab-stat-sub { font-size: 11.5px; color: var(--faint); margin-top: 3px; }

/* history list */
.hist-feed { display: flex; flex-direction: column; gap: 10px; }
.hist-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 18px; transition: border-color .15s, box-shadow .15s;
}
.hist-card:hover { border-color: var(--navy-line); box-shadow: var(--sh-sm); }
/* 2026-07-19: было 64×40 (альбомная форма, ratio 1.6) — вертикальный или
   квадратный макет вписывался через object-fit:contain в такую форму лишь
   узкой полоской по центру, что выглядело как "обрезанный прямоугольник"
   (жалоба пользователя), хотя технически кадрирования не было — контейнер
   просто не нейтрален к ориентации. Квадрат одинаково честно показывает
   любую ориентацию целиком и крупнее (72px против прежних 40px по высоте).
   Hover — лёгкий zoom + курсор-подсказка "это превью", чтобы плашка не
   выглядела декоративной картинкой без функции. */
/* .hist-thumb — внешняя рамка, БЕЗ overflow:hidden и БЕЗ transform: если бы
   зум (см. ниже) масштабировал именно этот элемент, он тут же обрезался бы
   своим же overflow:hidden. Обрезка (закруглённые углы, размер) — на
   .hist-thumb-clip внутри, а масштабируется при наведении именно она целиком
   (картинка+фон+рамка вместе), поэтому увеличенное превью честно вылезает
   поверх соседних строк списка, а не обрезается по границе исходных 72×72. */
.hist-thumb {
  width: 72px; height: 72px; flex: none; position: relative;
  cursor: pointer;
}
/* Лицо+оборот (h.hasBack, см. CabHistory) — два квадрата рядом вместо
   одного, каждый той же честной ширины 72px: оборот раньше вообще не
   показывался и не скачивался по отдельности от лица. */
.hist-thumb-double { width: 150px; display: flex; gap: 6px; }
.hist-thumb-double .hist-thumb-clip { width: 72px; flex: none; }
.hist-thumb-clip {
  /* border-radius: 0 (см. .up-img-wrap в styles.css, тот же запрос
     2026-07-24) — миниатюра реального сгенерированного макета в Истории. */
  width: 100%; height: 100%; border-radius: 0; overflow: hidden;
  background: var(--paper-2); border: 1px solid var(--line); display: grid; place-items: center;
  /* Без явного трека грид-ячейка размера "auto" — тянется под контент, то
     есть под НАТУРАЛЬНЫЙ размер картинки, а не под 72×72 контейнера. Из-за
     этого max-height:100% на самой <img> (см. RemoteThumb, pages.jsx) не
     имел определённой базы для расчёта процента и молча игнорировался —
     ограничивалась только ширина, а высота растягивалась на натуральную
     (для высокого макета — сильно больше 72px) и обрезалась overflow:hidden
     ниже по кромке контейнера. Визуально выглядело как "кроп сверху", хотя
     по факту весь макет прогонялся через сервер и клиент нетронутым (см.
     watermark.js fit:"inside") — реальный баг был именно здесь, в вёрстке
     миниатюры. 100% на треках делает ячейку РАВНОЙ контейнеру — тогда
     проценты на <img> внутри считаются корректно, и contain честно
     показывает макет целиком, письмом ("letterbox"), а не обрезком. */
  grid-template-rows: 100%; grid-template-columns: 100%;
  transition: transform .22s var(--ease), border-color .15s, box-shadow .15s;
  /* bottom left, не center — зум растёт вверх-вправо от исходного нижнего
     левого угла картинки, а не во все 4 стороны разом. Список идёт сверху
     вниз, миниатюра — самый левый элемент строки: рост вниз перекрывал бы
     СЛЕДУЮЩУЮ строку и её же кнопку "Повторить" под курсором, рост влево
     упирался бы в край экрана — обе стороны были только помехой (запрос
     2026-07-21: "сверху и справа, чтобы не перекрывать оригиналы"). */
  transform-origin: bottom left;
}
/* Зум по наведению — на САМ клип (не на внешний .hist-thumb), чтобы в
   паре "лицо+оборот" каждая сторона увеличивалась независимо под своим
   курсором, а не обе разом (см. .hist-thumb-double выше) — с общим
   наведением на весь .hist-thumb оба квадрата, стоящие впритык, зумились
   бы одновременно и наезжали друг на друга. .hist-thumb сам остаётся БЕЗ
   overflow:hidden и БЕЗ transform — увеличенный клип честно вылезает
   поверх соседних строк списка, а не обрезается по границе исходного
   72×72. Масштаб ×4.5 (было ×3, +50% по запросу 2026-07-21). */
.hist-thumb-clip:hover {
  transform: scale(4.5);
  border-color: var(--navy-line);
  box-shadow: 0 12px 32px rgba(20,19,15,.28);
  position: relative;
  z-index: 40;
}
.hist-main { flex: 1; min-width: 0; }
.hist-label { font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-meta { font-size: 12.5px; color: var(--muted); margin-top: 3px; display: flex; gap: 12px; flex-wrap: wrap; }

/* brand kit */
.bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 18px; }
.bk-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.bk-card h4 { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
.bk-logo-drop {
  border: 1.5px dashed var(--line-strong); border-radius: 12px;
  height: 120px; display: grid; place-items: center; gap: 8px;
  color: var(--muted); cursor: pointer; transition: all .15s; text-align: center;
}
.bk-logo-drop:hover { border-color: var(--navy); background: var(--navy-tint); color: var(--navy); }
.bk-swatches { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.bk-swatch { width: 48px; height: 48px; border-radius: 11px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); position: relative; cursor: pointer; }
/* Слот первого цвета (запрос владельца 2026-08-06, "подписать активный
   цвет, сделать крупней с обрамлением") — отдельная обёртка ТОЛЬКО у
   первого свотча (подпись сверху), align-items:flex-end на .bk-swatches
   держит низ всех плашек на одном уровне, даже когда одна из них выше
   остальных из-за подписи/увеличенного размера. */
.bk-swatch-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bk-swatch-active-label { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.bk-swatch-active {
  width: 64px; height: 64px; cursor: grab;
  /* "halo": зазор фоном карточки + сплошное кольцо navy — стандартный
     приём "это выбрано", отличимый от обычной inset-обводки остальных
     плашек с первого взгляда. */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 0 0 3px var(--surface), 0 0 0 5px var(--navy);
}
.bk-swatch-active:active { cursor: grabbing; }
.bk-swatch-add { width: 48px; height: 48px; border-radius: 11px; border: 1.5px dashed var(--line-strong); background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; position: relative; }
.bk-swatch-add:hover { border-color: var(--navy); color: var(--navy); }

/* empty / locked states */
.cab-locked {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 80px 24px; gap: 8px;
}
.cab-locked-ic {
  width: 76px; height: 76px; border-radius: 20px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-md);
  display: grid; place-items: center; color: var(--navy);
}

@media (max-width: 720px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-split-brand { display: none; }
  .auth-modal.v-b { max-width: 440px; }
}

/* На узких телефонах (.auth-bg держит 24px паддинг с каждой стороны, см.
   выше) сама 520px-карточка и так сжимается до ширины экрана — 3 колонки
   плиток внутри этой сжатой ширины опять стали бы тесными, ровно то, что и
   правка выше чинила на десктопе. Откат к 2 колонкам ниже ~460px экрана. */
@media (max-width: 460px) {
  .auth-modal.v-a .pv-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   LANGUAGE SWITCHER (глобус в шапке) + гео-подсказка
   (запрос владельца 2026-08-03, см. LangSwitcher/LocaleSuggestionBanner
   в auth.jsx и политику VPN в src/lib/localeStore.js)
   ============================================================ */
.lang-switch-btn { display: inline-flex; align-items: center; gap: 5px; width: auto; padding: 0 9px; }
.lang-switch-code { font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.lang-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 200;
  min-width: 180px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--sh-lg); padding: 6px 0;
  animation: authPop .18s var(--ease) both;
}
.lang-pop-title {
  font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .06em;
  text-transform: uppercase; padding: 6px 14px 8px;
}
.lang-pop-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 9px 14px; border: none; background: none; cursor: pointer;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--ink);
  text-align: left; transition: background .12s;
}
.lang-pop-item:hover { background: var(--paper-2); }
.lang-pop-item.active { color: var(--navy); }

/* Триггер у самого низа бокового меню (запрос владельца 2026-08-03) — та же
   правка, что и у .acct-pop.acct-pop-sidebar выше: открывать вниз некуда,
   поповер уезжает за экран. Двойной класс — специфичность выше .lang-pop,
   порядок объявления в файле больше не важен (тот же баг уже ловили у
   .acct-pop). */
.lang-pop.lang-pop-sidebar {
  top: auto; bottom: calc(100% + 8px); left: 0; right: auto;
}

/* Баннер "Похоже, вам удобнее …" — одноразовое ненавязчивое предложение
   сменить язык, когда гео-подсказка разошлась с показанным интерфейсом
   (НЕ автопереключение — см. VPN-политику в localeStore.js). Снизу, не
   поверх шапки: не мешает начать пользоваться сайтом, игнорировать можно
   бесконечно. */
.locale-suggest {
  position: fixed; bottom: 24px; right: 24px; z-index: 400;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: min(440px, calc(100vw - 48px));
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 14px; box-shadow: var(--sh-lg); padding: 14px 16px;
  animation: authPop .2s var(--ease) both;
}
.locale-suggest-txt { font-size: 13.5px; font-weight: 600; color: var(--ink); flex: 1 1 180px; }

/* ============================================================
   UPGRADE MODAL — план-селектор + таблица сравнения (запрос владельца
   2026-08-03, "как у Canva"), см. UpgradePrompt в auth.jsx.
   ============================================================ */
.upgrade-layout { display: grid; grid-template-columns: 340px 1fr; min-height: 480px; }
.upgrade-left { padding: 40px 34px; display: flex; flex-direction: column; border-right: 1px solid var(--line-soft); }
.upgrade-plan-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.upgrade-plan-card {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: 1.5px solid var(--line-strong); border-radius: 14px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.upgrade-plan-card:hover { border-color: var(--navy-line); }
.upgrade-plan-card.active { border-color: var(--navy); background: var(--navy-tint); }
.upgrade-plan-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.upgrade-plan-radio {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  border: 2px solid var(--line-strong); position: relative; transition: border-color .15s;
}
.upgrade-plan-card.active .upgrade-plan-radio { border-color: var(--navy); }
.upgrade-plan-card.active .upgrade-plan-radio::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--navy);
}
.upgrade-plan-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.upgrade-plan-name { font-size: 15px; font-weight: 700; color: var(--ink); display: flex; align-items: center; }
.upgrade-plan-price { font-size: 13px; color: var(--muted); }
.upgrade-disclaimer { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 14px; text-align: center; }

.upgrade-right { padding: 40px 34px; background: var(--paper-2); display: flex; flex-direction: column; }
.upgrade-table-scroll { overflow-x: auto; }
.upgrade-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.upgrade-table th, .upgrade-table td { padding: 11px 14px; text-align: left; white-space: nowrap; }
.upgrade-table thead th { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--line-strong); }
.upgrade-table thead th.sel { color: var(--navy); }
.upgrade-table tbody tr:nth-child(odd) { background: var(--surface); }
.upgrade-table tbody td { color: var(--ink-soft); border-bottom: 1px solid var(--line-soft); }
.upgrade-table tbody td:first-child { color: var(--ink); font-weight: 500; white-space: normal; }
.upgrade-table td.sel { background: var(--navy-tint); font-weight: 700; color: var(--navy); }

@media (max-width: 760px) {
  .auth-modal.v-upgrade { max-width: 480px; }
  .upgrade-layout { grid-template-columns: 1fr; }
  .upgrade-left { border-right: none; border-bottom: 1px solid var(--line-soft); }
}