:root {
  --ink: #7a1428; --ink-soft: #6b5847; --paper: #f3e2bc; --paper-card: #fbf4e6;
  --line: #e6d3a8; --amber: #a97d1f; --amber-soft: #f4e6c4; --teal: #4a0e18;
}
* { box-sizing: border-box; }
/* Фон и на <html> тоже — иначе на iOS при вертикальном оттягивании страницы
   (rubber-band) на долю секунды видно белую полосу под ней, а не общий
   градиент. Важно: `background: linear-gradient(...)` как шорткат задаёт
   ТОЛЬКО background-image, а background-color остаётся прозрачным (белым
   по умолчанию) — а область оттягивания на iOS заливается именно
   background-color, не картинкой градиента. Поэтому background-color
   задан отдельно, тем же тоном, что светлый край градиента.
   overflow-x:hidden на обоих — на случай случайного горизонтального
   переполнения на 1-2px. touch-action: pan-y — самое главное: явно
   запрещает браузеру распознавать горизontal-свайп как жест прокрутки
   вообще, а не просто прячет то, что он прокрутил — иначе страницу
   всё равно можно было "дёргать" влево-вправо пальцем. overscroll-behavior:
   none — отключает именно "дёрганье"/растягивание страницы за верх и
   низ (rubber-band bounce): без него экран входа, который и так
   помещается целиком на одном экране, всё равно можно было потянуть
   пальцем вверх-вниз, как будто он не статичный. */
html {
  background-color: #f8ecd3;
  background-image: linear-gradient(160deg, #f8ecd3, #ecd5a0);
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior-x: none;
  overscroll-behavior-y: auto;
  min-height: 100%;
}
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; width: 100%; overflow-x: hidden; overflow-y: auto; touch-action: pan-y; overscroll-behavior-x: none; overscroll-behavior-y: auto; -webkit-overflow-scrolling: touch; color: var(--ink); font-family: -apple-system, "Segoe UI", sans-serif;
  background-color: #f8ecd3;
  background-image: linear-gradient(160deg, #f8ecd3, #ecd5a0);
  background-attachment: fixed; background-repeat: no-repeat; background-size: cover;
  display: block;
}
/* Длинные формы должны увеличивать страницу: на телефонах и во
   встроенных браузерах кнопка регистрации может быть ниже экрана. */
body.auth-bg {
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  overflow-y: auto;
  touch-action: pan-y;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
body.auth-bg .wrap {
  flex-shrink: 0;
  margin-top: auto;
  margin-bottom: auto;
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
}
/* Декор самого фона (не карточки) на экранах входа/регистрации/сброса
   пароля: цветущая ветка в двух противоположных углах (один и тот же
   SVG, второй развёрнут на 180°) — 5 бутонов разного размера, КАЖДЫЙ
   ТОЧНО НА САМОЙ ЛИНИИ ветки (координаты посчитаны по формуле кривой
   Безье, не на глаз - иначе бутоны "висели в воздухе"), с парой
   листьев из той же самой точки (не отдельно). Плюс 30 отдельных
   лепестков одного среднего тона, рассыпанных по всему фону (не только
   по углам) - разного размера и прозрачности для глубины. .auth-decor
   скрыт по умолчанию, показывается только через body.auth-bg
   (включается/выключается в JS, см. showDashboard/logout) — на самом
   кабинете декора нет. */
.auth-decor { opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
body.auth-bg .auth-decor { opacity: 1; }
.auth-decor .bloom {
  position: fixed; pointer-events: none; z-index: 0;
  background-repeat: no-repeat; background-size: contain;
}
.bloom-branch {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20240'%3E%3Cdefs%3E%3ClinearGradient%20id='pk'%20x1='0'%20y1='0'%20x2='1'%20y2='1'%3E%3Cstop%20offset='0%25'%20stop-color='%23fbe4ec'/%3E%3Cstop%20offset='100%25'%20stop-color='%23d98aa8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d='M0%2030%20C50%2020%2070%2070%2055%20130%20C45%20175%2090%20200%20150%20230'%20fill='none'%20stroke='%238a5a2e'%20stroke-width='3'%20stroke-linecap='round'/%3E%3Cpath%20d='M0%200%20C4%20-3%205%20-12%200%20-20%20C-5%20-12%20-4%20-3%200%200%20Z'%20fill='%236f8a45'%20transform='translate(16.7%2028.9)%20rotate(119.9)%20scale(0.8624999999999999)'/%3E%3Cpath%20d='M0%200%20C4%20-3%205%20-12%200%20-20%20C-5%20-12%20-4%20-3%200%200%20Z'%20fill='%236f8a45'%20transform='translate(16.7%2028.9)%20rotate(-110.1)%20scale(0.8624999999999999)'/%3E%3Cpath%20d='M0%200%20C4%20-3%205%20-12%200%20-20%20C-5%20-12%20-4%20-3%200%200%20Z'%20fill='%236f8a45'%20transform='translate(48.8%2048.4)%20rotate(172.0)%20scale(0.75)'/%3E%3Cpath%20d='M0%200%20C4%20-3%205%20-12%200%20-20%20C-5%20-12%20-4%20-3%200%200%20Z'%20fill='%236f8a45'%20transform='translate(48.8%2048.4)%20rotate(-58.0)%20scale(0.75)'/%3E%3Cpath%20d='M0%200%20C4%20-3%205%20-12%200%20-20%20C-5%20-12%20-4%20-3%200%200%20Z'%20fill='%236f8a45'%20transform='translate(59.4%20103.8)%20rotate(209.7)%20scale(0.6375)'/%3E%3Cpath%20d='M0%200%20C4%20-3%205%20-12%200%20-20%20C-5%20-12%20-4%20-3%200%200%20Z'%20fill='%236f8a45'%20transform='translate(59.4%20103.8)%20rotate(-20.3)%20scale(0.6375)'/%3E%3Cpath%20d='M0%200%20C4%20-3%205%20-12%200%20-20%20C-5%20-12%20-4%20-3%200%200%20Z'%20fill='%236f8a45'%20transform='translate(71.3%20180.9)%20rotate(160.6)%20scale(0.5249999999999999)'/%3E%3Cpath%20d='M0%200%20C4%20-3%205%20-12%200%20-20%20C-5%20-12%20-4%20-3%200%200%20Z'%20fill='%236f8a45'%20transform='translate(71.3%20180.9)%20rotate(-69.4)%20scale(0.5249999999999999)'/%3E%3Cpath%20d='M0%200%20C4%20-3%205%20-12%200%20-20%20C-5%20-12%20-4%20-3%200%200%20Z'%20fill='%236f8a45'%20transform='translate(124.1%20216.8)%20rotate(143.0)%20scale(0.41250000000000003)'/%3E%3Cpath%20d='M0%200%20C4%20-3%205%20-12%200%20-20%20C-5%20-12%20-4%20-3%200%200%20Z'%20fill='%236f8a45'%20transform='translate(124.1%20216.8)%20rotate(-87.0)%20scale(0.41250000000000003)'/%3E%3Cg%20fill='url(%23pk)'%3E%3Cg%20transform='translate(16.7%2028.9)%20rotate(4.9)%20scale(1.15)'%3E%3Cellipse%20cx='0'%20cy='-12'%20rx='7'%20ry='14'/%3E%3Cellipse%20cx='0'%20cy='-11'%20rx='6'%20ry='12'%20transform='rotate(-22)'/%3E%3Cellipse%20cx='0'%20cy='-11'%20rx='6'%20ry='12'%20transform='rotate(22)'/%3E%3C/g%3E%3Cg%20transform='translate(48.8%2048.4)%20rotate(57.0)%20scale(1.0)'%3E%3Cellipse%20cx='0'%20cy='-12'%20rx='7'%20ry='14'/%3E%3Cellipse%20cx='0'%20cy='-11'%20rx='6'%20ry='12'%20transform='rotate(-22)'/%3E%3Cellipse%20cx='0'%20cy='-11'%20rx='6'%20ry='12'%20transform='rotate(22)'/%3E%3C/g%3E%3Cg%20transform='translate(59.4%20103.8)%20rotate(94.7)%20scale(0.85)'%3E%3Cellipse%20cx='0'%20cy='-12'%20rx='7'%20ry='14'/%3E%3Cellipse%20cx='0'%20cy='-11'%20rx='6'%20ry='12'%20transform='rotate(-22)'/%3E%3Cellipse%20cx='0'%20cy='-11'%20rx='6'%20ry='12'%20transform='rotate(22)'/%3E%3C/g%3E%3Cg%20transform='translate(71.3%20180.9)%20rotate(45.6)%20scale(0.7)'%3E%3Cellipse%20cx='0'%20cy='-12'%20rx='7'%20ry='14'/%3E%3Cellipse%20cx='0'%20cy='-11'%20rx='6'%20ry='12'%20transform='rotate(-22)'/%3E%3Cellipse%20cx='0'%20cy='-11'%20rx='6'%20ry='12'%20transform='rotate(22)'/%3E%3C/g%3E%3Cg%20transform='translate(124.1%20216.8)%20rotate(28.0)%20scale(0.55)'%3E%3Cellipse%20cx='0'%20cy='-12'%20rx='7'%20ry='14'/%3E%3Cellipse%20cx='0'%20cy='-11'%20rx='6'%20ry='12'%20transform='rotate(-22)'/%3E%3Cellipse%20cx='0'%20cy='-11'%20rx='6'%20ry='12'%20transform='rotate(22)'/%3E%3C/g%3E%3C/g%3E%3Ccircle%20cx='16.7'%20cy='28.9'%20r='2.5'%20fill='%238a5a2e'/%3E%3Ccircle%20cx='48.8'%20cy='48.4'%20r='2.2'%20fill='%238a5a2e'/%3E%3Ccircle%20cx='59.4'%20cy='103.8'%20r='1.9'%20fill='%238a5a2e'/%3E%3Ccircle%20cx='71.3'%20cy='180.9'%20r='1.5'%20fill='%238a5a2e'/%3E%3Ccircle%20cx='124.1'%20cy='216.8'%20r='1.2'%20fill='%238a5a2e'/%3E%3C/svg%3E");
}
.bloom-petal-medium {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2060'%3E%3Cdefs%3E%3ClinearGradient%20id='lpm'%20x1='0'%20y1='0'%20x2='1'%20y2='1'%3E%3Cstop%20offset='0%25'%20stop-color='%23f9d3e1'/%3E%3Cstop%20offset='100%25'%20stop-color='%23cd6f92'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse%20cx='20'%20cy='30'%20rx='14'%20ry='22'%20fill='url(%23lpm)'/%3E%3C/svg%3E");
}
.bloom-1 { width: 165px; height: 195px; top: 8px; left: 5px; opacity: 0.95; }
.bloom-2 { width: 165px; height: 195px; bottom: 8px; right: 5px; opacity: 0.95; transform: rotate(180deg); }
.bloom-3 { width: 16px; height: 24px; top: 75.9%; left: 28.6%; opacity: 0.33; transform: rotate(-36deg); }
.bloom-4 { width: 14px; height: 21px; top: 22.5%; left: 5.0%; opacity: 0.47; transform: rotate(-24deg); }
.bloom-5 { width: 16px; height: 24px; top: 53.7%; left: 11.0%; opacity: 0.42; transform: rotate(70deg); }
.bloom-6 { width: 22px; height: 33px; top: 94.1%; left: 90.9%; opacity: 0.37; transform: rotate(66deg); }
.bloom-7 { width: 22px; height: 33px; top: 24.2%; left: 47.4%; opacity: 0.56; transform: rotate(22deg); }
.bloom-8 { width: 16px; height: 24px; top: 89.3%; left: 74.1%; opacity: 0.34; transform: rotate(6deg); }
.bloom-9 { width: 20px; height: 30px; top: 25.3%; left: 95.3%; opacity: 0.39; transform: rotate(-52deg); }
.bloom-10 { width: 18px; height: 27px; top: 3.9%; left: 8.9%; opacity: 0.36; transform: rotate(55deg); }
.bloom-11 { width: 14px; height: 21px; top: 40.8%; left: 76.5%; opacity: 0.52; transform: rotate(10deg); }
.bloom-12 { width: 20px; height: 30px; top: 23.1%; left: 67.9%; opacity: 0.47; transform: rotate(46deg); }
.bloom-13 { width: 18px; height: 27px; top: 86.6%; left: 44.3%; opacity: 0.44; transform: rotate(-54deg); }
.bloom-14 { width: 22px; height: 33px; top: 69.9%; left: 52.8%; opacity: 0.58; transform: rotate(44deg); }
.bloom-15 { width: 18px; height: 27px; top: 89.2%; left: 28.4%; opacity: 0.33; transform: rotate(48deg); }
.bloom-16 { width: 20px; height: 30px; top: 40.0%; left: 91.6%; opacity: 0.34; transform: rotate(3deg); }
.bloom-17 { width: 20px; height: 30px; top: 70.7%; left: 66.5%; opacity: 0.56; transform: rotate(57deg); }
.bloom-18 { width: 22px; height: 33px; top: 70.1%; left: 89.3%; opacity: 0.39; transform: rotate(-35deg); }
.bloom-19 { width: 18px; height: 27px; top: 62.1%; left: 95.1%; opacity: 0.5; transform: rotate(21deg); }
.bloom-20 { width: 16px; height: 24px; top: 27.1%; left: 28.3%; opacity: 0.36; transform: rotate(-25deg); }
.bloom-21 { width: 14px; height: 21px; top: 54.3%; left: 32.2%; opacity: 0.45; transform: rotate(-24deg); }
.bloom-22 { width: 20px; height: 30px; top: 88.9%; left: 3.1%; opacity: 0.46; transform: rotate(11deg); }
.bloom-23 { width: 22px; height: 33px; top: 63.6%; left: 72.7%; opacity: 0.57; transform: rotate(-57deg); }
.bloom-24 { width: 22px; height: 33px; top: 41.2%; left: 35.2%; opacity: 0.42; transform: rotate(32deg); }
.bloom-25 { width: 20px; height: 30px; top: 7.1%; left: 69.7%; opacity: 0.34; transform: rotate(-53deg); }
.bloom-26 { width: 14px; height: 21px; top: 64.0%; left: 49.2%; opacity: 0.41; transform: rotate(-57deg); }
.bloom-27 { width: 22px; height: 33px; top: 3.7%; left: 50.9%; opacity: 0.35; transform: rotate(23deg); }
.bloom-28 { width: 16px; height: 24px; top: 9.7%; left: 24.0%; opacity: 0.48; transform: rotate(-32deg); }
.bloom-29 { width: 22px; height: 33px; top: 76.6%; left: 16.4%; opacity: 0.41; transform: rotate(-39deg); }
.bloom-30 { width: 20px; height: 30px; top: 37.2%; left: 49.8%; opacity: 0.44; transform: rotate(9deg); }
.bloom-31 { width: 18px; height: 27px; top: 3.5%; left: 84.4%; opacity: 0.51; transform: rotate(52deg); }
.bloom-32 { width: 14px; height: 21px; top: 45.5%; left: 5.3%; opacity: 0.37; transform: rotate(65deg); }
/* Ещё лепестки специально в средней части экрана (там же, где обычно
   стоит сама карточка входа) - чтобы сквозь стеклянную карточку было
   что просвечивать, а не голый градиент. Помягче остальных (ниже
   прозрачность) - они всё равно будут смягчены блюром карточки. */
.bloom-33 { width: 16px; height: 24px; top: 59.4%; left: 16.8%; opacity: 0.26; transform: rotate(-35deg); }
.bloom-34 { width: 12px; height: 18px; top: 63.9%; left: 62.4%; opacity: 0.31; transform: rotate(-62deg); }
.bloom-35 { width: 12px; height: 18px; top: 31.4%; left: 30.3%; opacity: 0.31; transform: rotate(69deg); }
.bloom-36 { width: 16px; height: 24px; top: 49.3%; left: 46.4%; opacity: 0.35; transform: rotate(-69deg); }
.bloom-37 { width: 18px; height: 27px; top: 64.9%; left: 26.2%; opacity: 0.27; transform: rotate(-31deg); }
.bloom-38 { width: 12px; height: 18px; top: 39.9%; left: 68.4%; opacity: 0.23; transform: rotate(-46deg); }
.bloom-39 { width: 16px; height: 24px; top: 46.5%; left: 39.1%; opacity: 0.35; transform: rotate(47deg); }
.bloom-40 { width: 18px; height: 27px; top: 54.7%; left: 83.1%; opacity: 0.23; transform: rotate(5deg); }
.bloom-41 { width: 16px; height: 24px; top: 68.2%; left: 58.3%; opacity: 0.31; transform: rotate(-53deg); }
.bloom-42 { width: 16px; height: 24px; top: 32.1%; left: 31.0%; opacity: 0.38; transform: rotate(-11deg); }
.wrap { max-width: 560px; width: 100%; margin: 0 auto; padding: 40px 20px calc(56px + env(safe-area-inset-bottom, 0px)); position: relative; z-index: 1; }
/* Кабинет проявляется одним фейдом, когда данные и вкладки уже готовы
   (класс .loaded вешается в renderActiveTab) — вместо рывка "пустой
   каркас → имя → контент по кускам" при входе. */
#dashboard { opacity: 0; transition: opacity 0.35s ease; }
#dashboard.loaded { opacity: 1; }
.card { background: var(--paper-card); border: 1px solid var(--line); border-radius: 14px; padding: 24px; margin-bottom: 16px; }
h1 { font-size: 22px; margin: 0 0 16px; }
.brand-title { font-family: Georgia, "Times New Roman", serif; font-weight: 700; white-space: nowrap; letter-spacing: 0.3px; text-align: center; margin-bottom: 6px; font-size: clamp(18px, 6.5vw, 30px); }
.brand-sub { font-size: 16px; color: var(--ink-soft); text-align: center; margin-bottom: 22px; }
.tab-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tab-btn { background: var(--paper-card); border: 1px solid var(--line); color: var(--ink-soft); padding: 8px 14px; border-radius: 20px; cursor: pointer; font-size: 14px; font-weight: 600; }
.tab-btn.active { background: var(--teal); color: #fff; border-color: var(--teal); }
.section-title { font-weight: 600; margin-bottom: 10px; }
input, textarea, select { width: 100%; padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; font-family: inherit; }
select { background: #fff; color: var(--ink); }
button { background: var(--teal); color: #fff; border: none; padding: 10px 18px; border-radius: 8px; font-weight: 600; cursor: pointer; }
.err { color: #a13c3c; font-size: 13px; margin-top: 6px; }
.ok { color: #1f6f5c; font-size: 13px; margin-top: 6px; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 12px; }
.stat { background: var(--amber-soft); border-radius: 10px; padding: 12px 14px; }
.stat .num { font-size: 22px; font-weight: 700; color: var(--amber); }
.stat.stat-hero { grid-column: 1 / -1; padding: 18px 16px; }
.stat.stat-hero .num { font-size: 38px; }
.stat.stat-lg .num { font-size: 22px; }
.stat .lbl { font-size: 12px; color: var(--ink-soft); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
/* Раньше вся таблица была white-space:nowrap с горизонтальной прокруткой
   (.table-wrap overflow-x:auto) — но на мобильном это давало баг: прокрутив
   одну таблицу влево-вправо, а потом полистав страницу вверх к другой
   таблице выше, та оставалась "залипшей" на том же горизонтальном сдвиге
   и не прокручивалась обратно. Раз всё и так помещается по ширине без
   nowrap (email/телефон и т.п. уже переносятся по словам, см. paymentRow),
   прокрутку убираем совсем — переносится обычным образом; числа с
   Intl.NumberFormat("ru-RU") и так используют неразрывный пробел между
   разрядами (fmt()), так что "5 000" не переносится midway. */
.table-wrap { overflow-x: hidden; container-type: inline-size; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); }
td.num, th.num { text-align: right; }

/* Лиды, заказы и оплаты содержат много полей. На узком экране строки
   превращаются в подписанные карточки: данные не сжимаются в 6–7 тонких
   колонок и не требуют горизонтальной прокрутки. */
@media (max-width: 960px) {
  table.responsive-data-table,
  table.responsive-data-table tbody { display: block; width: 100%; }
  table.responsive-data-table thead { display: none; }
  table.responsive-data-table tr { display: block; padding: 7px 10px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.45); }
  table.responsive-data-table td,
  table.responsive-data-table td.num { display: grid; grid-template-columns: minmax(82px, 34%) minmax(0, 1fr); gap: 10px; width: 100%; padding: 7px 0; border-bottom: 1px solid var(--line); text-align: left; overflow-wrap: anywhere; }
  table.responsive-data-table td:last-child { border-bottom: 0; }
  table.responsive-data-table td::before { content: attr(data-label); color: var(--ink-soft); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
  table.responsive-data-table tr.empty-row td { display: block; border: 0; }
  table.responsive-data-table tr.empty-row td::before { display: none; }
}
@container (max-width: 820px) {
  table.responsive-data-table,
  table.responsive-data-table tbody { display: block; width: 100%; }
  table.responsive-data-table thead { display: none; }
  table.responsive-data-table tr { display: block; padding: 7px 10px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.45); }
  table.responsive-data-table td,
  table.responsive-data-table td.num { display: grid; grid-template-columns: minmax(82px, 34%) minmax(0, 1fr); gap: 10px; width: 100%; padding: 7px 0; border-bottom: 1px solid var(--line); text-align: left; overflow-wrap: anywhere; }
  table.responsive-data-table td:last-child { border-bottom: 0; }
  table.responsive-data-table td::before { content: attr(data-label); color: var(--ink-soft); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
  table.responsive-data-table tr.empty-row td { display: block; border: 0; }
  table.responsive-data-table tr.empty-row td::before { display: none; }
}
#logoutBtn { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.text-link { background: none; border: none; color: var(--teal); text-decoration: underline; cursor: pointer; padding: 0; font-size: 14px; font-weight: 600; }
.muted { color: var(--ink-soft); font-size: 14px; }
.ambassadorPeriodBtn { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.ambassadorPeriodBtn.active { background: var(--teal); color: white; border-color: var(--teal); }

/* Экраны входа/регистрации — декоративное оформление в духе рекламных
   лендингов (по референсу), но в цветах кабинета: бейдж-пилюля, круглая
   эмблема, акцентное слово в заголовке и большая кнопка-CTA со стрелкой.
   Никак не задевает обычные кнопки/карточки внутри самого кабинета. */
/* Стеклянная карточка (в духе Apple "Liquid Glass"): почти без тонировки
   (фон едва белый, 0.06), лёгкий блюр (не размывает лепестки за ней в
   кашу — они остаются узнаваемыми формами, не пятном), и ЯРКАЯ, близкая
   к белой рамка — именно рамка держит форму "стекла", а не заливка.
   Раньше рамка была полупрозрачной поверх блюра и из-за этого казалась
   жёлтой (просвечивал тёплый фон) — сделали рамку непрозрачнее, а блюр
   слабее и без saturate (это и "желтило" картинку). -webkit-backdrop-filter
   обязателен для Safari на iOS, без него эффекта не будет вообще. */
.auth-card {
  padding-top: 30px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  box-shadow: 0 8px 24px rgba(122, 20, 40, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.6);
}
.auth-badge-row { text-align: center; }
.auth-badge { display: inline-block; margin-bottom: 14px; color: var(--amber); font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.auth-emblem-wrap { position: relative; width: 96px; height: 96px; margin: 0 auto 16px; z-index: 1; }
.auth-emblem {
  width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #fcf0c8;
  box-shadow: 0 10px 24px rgba(122, 20, 40, 0.3);
}
.auth-card .brand-title { position: relative; z-index: 1; }
.auth-accent { color: var(--amber); }
.btn-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  background: linear-gradient(120deg, var(--teal), #7a1428); border-radius: 999px;
  padding: 14px 20px; font-size: 15px; letter-spacing: 0.3px; text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(122, 20, 40, 0.28);
}
.btn-cta:active { transform: translateY(1px); }
.btn-cta span { font-size: 17px; }

/* ---- Доска рейтинга амбассадоров: бордо + золото, пьедестал на троих ---- */
.lb-wrap {
  border-radius: 24px; overflow: hidden; margin-bottom: 16px; color: #f8ecd3;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(233,196,106,0.28), transparent 60%),
    radial-gradient(80% 50% at 50% 100%, rgba(122,20,40,0.6), transparent 70%),
    linear-gradient(170deg, #5a1222 0%, #2e0710 100%);
  box-shadow: 0 18px 40px rgba(74,14,24,0.35);
}
.lb-head { text-align: center; padding: 22px 16px 6px; }
.lb-crest { font-size: 11px; letter-spacing: 3px; color: #e9c46a; opacity: 0.85; }
.lb-title { font-family: Georgia, "Times New Roman", serif; font-size: 30px; font-weight: 700; letter-spacing: 1px; margin-top: 4px;
  background: linear-gradient(180deg, #fff3cf, #e9c46a 55%, #b8862b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lb-sub { font-size: 12px; color: rgba(248,236,211,0.7); margin-top: 2px; }
.lb-switch { display: inline-flex; gap: 4px; margin-top: 14px; padding: 4px; border-radius: 999px; background: rgba(0,0,0,0.25); border: 1px solid rgba(233,196,106,0.35); }
.lb-switch button { background: transparent; border: none; color: rgba(248,236,211,0.75); font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 999px; cursor: pointer; }
.lb-switch button.active { background: linear-gradient(180deg, #f1d58a, #c99a35); color: #3a0a14; }
.lb-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 6px; padding: 18px 10px 0; }
.lb-pod { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.lb-crown { font-size: 26px; line-height: 1; margin-bottom: 4px; filter: drop-shadow(0 2px 6px rgba(233,196,106,0.6)); }
.lb-medal { position: relative; border-radius: 50%; }
.lb-badge { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%;
  color: #3a0a14; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #3a0a14; }
.lb-pod-name { margin-top: 12px; font-size: 13px; font-weight: 700; line-height: 1.25; max-width: 100%; overflow-wrap: anywhere; }
.lb-pod-1 .lb-pod-name { font-size: 15px; }
.lb-pod-sum { font-size: 15px; font-weight: 800; margin-top: 2px; }
.lb-pod-1 .lb-pod-sum { font-size: 18px; }
.lb-pod-stats { font-size: 11px; color: rgba(248,236,211,0.65); margin-top: 2px; }
.lb-step { width: 100%; margin-top: 10px; border-radius: 14px 14px 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 6px; }
.lb-step span { font-family: Georgia, serif; font-size: 22px; font-weight: 700; color: rgba(58,10,20,0.75); }
.lb-pod-1 .lb-step { height: 78px; }
.lb-pod-2 .lb-step { height: 54px; }
.lb-pod-3 .lb-step { height: 40px; }
.lb-list { background: rgba(0,0,0,0.18); padding: 10px 10px 14px; border-top: 1px solid rgba(233,196,106,0.25); }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-top: 8px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(248,236,211,0.12), rgba(248,236,211,0.05)); border: 1px solid rgba(233,196,106,0.2); }
.lb-row-me { background: linear-gradient(90deg, rgba(233,196,106,0.35), rgba(233,196,106,0.12)); border-color: rgba(233,196,106,0.7); }
.lb-place { width: 30px; font-weight: 800; color: #e9c46a; font-size: 14px; text-align: center; flex: none; }
.lb-row-main { flex: 1; min-width: 0; }
.lb-row-name { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.lb-row-stats { font-size: 11px; color: rgba(248,236,211,0.65); }
.lb-row-sum { font-weight: 800; color: #f1d58a; white-space: nowrap; font-size: 14px; }
.lb-you { margin-left: 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: #3a0a14;
  background: #e9c46a; border-radius: 999px; padding: 1px 7px; vertical-align: middle; }
.lb-empty { text-align: center; padding: 28px 16px; color: rgba(248,236,211,0.75); font-size: 14px; }

/* ---- Эфиры ---- */
.bc-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.bc-item:last-child { border-bottom: none; }
.bc-card { display: flex; gap: 12px; align-items: center; cursor: pointer; }
.bc-thumb { position: relative; flex: none; width: 128px; aspect-ratio: 16 / 9; border-radius: 12px; background: #2e0710 center / cover no-repeat;
  box-shadow: 0 6px 14px rgba(74,14,24,0.25); }
.bc-play { position: absolute; inset: 0; margin: auto; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(74,14,24,0.85); color: #f1d58a; font-size: 14px; padding-left: 3px; border: 2px solid #e9c46a; }
.bc-info { flex: 1; min-width: 0; }
.bc-title { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; overflow-wrap: anywhere; }
.bc-meta { font-size: 12px; color: var(--ink-soft); margin-top: 4px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bc-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); }
.bc-badge.bc-new { background: #7a1428; color: #f8ecd3; }
.bc-badge.bc-done { background: #dff0e8; color: #1f6f5c; }
.bc-progress { height: 4px; border-radius: 4px; background: var(--line); margin-top: 6px; overflow: hidden; }
.bc-progress div { height: 100%; background: linear-gradient(90deg, #c99a35, #e9c46a); }
.bc-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.bc-frame iframe, .bc-frame #bcPlayer { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ==== Стиль «Клуб амбассадоров» (как online.womenmoney.ru/ambassador/club):
   шёлк-бордо, серебро, кремовый фон, Cormorant + Manrope.
   Включается классом body.club — у амбассадоров и на экранах по ссылке-приглашению. ==== */
@font-face { font-family: "ClubSerif"; font-weight: 500 700; font-display: swap; src: url(/club/cormorant.woff2) format("woff2"); }
@font-face { font-family: "ClubSerif"; font-style: italic; font-weight: 500 700; font-display: swap; src: url(/club/cormorant-italic.woff2) format("woff2"); }
@font-face { font-family: "ClubSans"; font-weight: 400 800; font-display: swap; src: url(/club/manrope.woff2) format("woff2"); }
body.club {
  --ink: #2b1f1c; --ink-soft: #5d4c46; --paper-card: #fffaf6; --line: #e8d9cf;
  --amber: #7a1a2d; --amber-soft: #f3e6df; --teal: #7a1a2d;
  --club-h: #4a0f1e; --club-silver: #e6e8ee;
  --club-sil: linear-gradient(135deg, #9aa0aa, #eef0f4 30%, #aeb3bc 55%, #fbfcfd 78%, #9aa0aa);
  --club-silk: linear-gradient(165deg, rgba(74,13,27,.55), rgba(40,5,15,.86)), url(/club/silk-s.webp) center / cover;
  font-family: "ClubSans", system-ui, -apple-system, sans-serif;
  background: #f6efe7; background-image: none;
}
html:has(body.club) { background: #f6efe7; background-image: none; }
body.club .auth-decor { display: none; }
body.club .club-only { display: block; }
.club-only { display: none; }

/* --- экраны входа / выбора / регистрации --- */
body.club.auth-bg { background: #3d0814; background-image: linear-gradient(165deg, rgba(74,13,27,.5), rgba(40,5,15,.85)), url(/club/silk-s.webp); background-size: cover; background-position: center; }
html:has(body.club.auth-bg) { background: #3d0814; }
body.club .auth-card {
  position: relative; overflow: hidden; color: #fff4ee; text-align: center;
  border-radius: 30px; border: none; padding: 26px 22px 24px;
  background: linear-gradient(165deg, rgba(92,16,34,.72), rgba(40,5,15,.9)), url(/club/silk-s.webp) center / cover;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 40px 60px -30px rgba(20,0,6,.9), 0 0 0 1px rgba(230,232,238,.18);
}
body.club .auth-card::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(230,232,238,.32); border-radius: 22px; pointer-events: none; }
body.club .auth-card > * { position: relative; }
body.club .auth-emblem-wrap { display: none; }
body.club .club-hero { margin: 4px -22px 4px; }
body.club .club-hero img { display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, #000 70%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, #000 70%, transparent); mask-composite: intersect;
  filter: drop-shadow(0 16px 24px rgba(30,0,8,.45)); }
body.club .auth-badge { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--club-silver); font: 700 11px/1.3 "ClubSans", sans-serif; letter-spacing: .26em; }
body.club .auth-badge::before, body.club .auth-badge::after { content: ""; width: 32px; height: 1px; background: linear-gradient(90deg, transparent, var(--club-silver)); }
body.club .auth-badge::after { transform: scaleX(-1); }
body.club .brand-title { font: 500 clamp(26px, 7.6vw, 40px)/1.05 "ClubSerif", Georgia, serif; letter-spacing: .01em; color: #fff4ee; margin: 6px 0 4px; }
body.club .auth-accent { font-style: italic; background: linear-gradient(100deg, #f6dfe2, #fff 35%, #e6e8ee 60%, #f6dfe2); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.club .brand-sub { font: 500 italic 21px/1.25 "ClubSerif", Georgia, serif; color: rgba(255,244,238,.92); margin-bottom: 18px; }
body.club .auth-card .muted { color: rgba(255,244,238,.85) !important; }
body.club .auth-card input { background: rgba(255,250,246,.96); border: 1px solid rgba(230,232,238,.6); border-radius: 14px; padding: 13px 16px; color: #2b1f1c; font-family: inherit; }
body.club .auth-card input::placeholder { color: #8d7a73; }
body.club .btn-cta, body.club .auth-card .btn-cta {
  min-height: 56px; border-radius: 999px; background: var(--club-sil) !important; color: #3d0814 !important; border: none !important;
  font: 700 13px/1.2 "ClubSans", sans-serif; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 0 24px rgba(230,232,238,.3) !important;
}
body.club #inviteNoAccountBtn { background: transparent !important; color: #fff4ee !important; box-shadow: inset 0 0 0 1px rgba(230,232,238,.75) !important; }
body.club .auth-card .text-link { color: var(--club-silver); text-decoration: underline; text-decoration-color: rgba(230,232,238,.45); text-underline-offset: 4px; font-weight: 600; }
body.club .auth-card .err { color: #ffc2c2; }
body.club .auth-card .ok { color: #d9f2e6; }
body.club .auth-card #passwordToggleBtn, body.club .auth-card [id$="ToggleBtn"] { background: transparent !important; box-shadow: none !important; }

/* --- кабинет амбассадора --- */
body.club .card:not(.auth-card) { background: #fffaf6; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 24px 40px -34px rgba(74,13,27,.55); }
body.club .section-title { font: 600 24px/1.15 "ClubSerif", Georgia, serif; color: var(--club-h); margin-bottom: 10px; }
body.club #dashboard > .card:first-child {
  position: relative; overflow: hidden; border: none; color: #fff4ee;
  background: var(--club-silk); box-shadow: 0 30px 50px -34px rgba(40,5,15,.9);
}
body.club #dashboard > .card:first-child::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(230,232,238,.3); border-radius: 18px; pointer-events: none; }
body.club #dashboard > .card:first-child > * { position: relative; }
body.club #whoami { font: 600 20px/1.15 "ClubSerif", Georgia, serif; color: #fff4ee; }
body.club #profileToggleBtn div div { color: var(--club-silver) !important; letter-spacing: .04em; }
body.club #dashboard > .card:first-child button { background: transparent !important; color: #fff4ee !important; border: 1px solid rgba(230,232,238,.55) !important; border-radius: 999px; }
body.club .tab-bar { gap: 6px; }
body.club .tab-btn { background: #fffaf6; border: 1px solid var(--line); color: var(--ink-soft); border-radius: 999px; padding: 9px 15px; font: 700 12px/1.2 "ClubSans", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
body.club .tab-btn.active { background: #7a1a2d; border-color: #7a1a2d; color: #fff; box-shadow: 0 10px 20px -12px rgba(74,13,27,.8); }
body.club button { border-radius: 999px; font-family: inherit; }
body.club #tabContent button:not(.text-link):not(.lbPeriodBtn):not(.tab-btn) { background: #7a1a2d; color: #fff; letter-spacing: .04em; }
body.club input, body.club textarea, body.club select { border-radius: 12px; border-color: var(--line); background: #fff; }
body.club .text-link { color: #7a1a2d; }
body.club .stat { background: #f3e6df; border-radius: 18px; }
body.club .stat .num { font-family: "ClubSerif", Georgia, serif; font-weight: 600; font-size: 28px; color: var(--club-h); }
body.club .stat.stat-hero { position: relative; overflow: hidden; background: var(--club-silk); color: #fff4ee; }
body.club .stat.stat-hero .num { font-size: 46px; background: linear-gradient(100deg, #f6dfe2, #fff 35%, #e6e8ee 60%, #f6dfe2); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.club .stat.stat-hero .lbl { color: rgba(255,244,238,.8); }
body.club th { font: 700 10.5px/1.3 "ClubSans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #7a1a2d; }
/* ссылка на игру — главная карточка, серебряная рамка сверху как на сайте */
body.club .card[style*="--amber"] { border: 1px solid transparent !important; border-top-width: 3px !important;
  background: linear-gradient(#fffaf6, #fffaf6) padding-box, linear-gradient(90deg, #7a1a2d, #c9ccd4, #7a1a2d) border-box; }
/* доска рейтинга — серебро вместо золота */
body.club .lb-wrap { background: linear-gradient(165deg, rgba(92,16,34,.62), rgba(40,5,15,.92)), url(/club/silk-s.webp) center / cover; }
body.club .lb-crest { color: var(--club-silver); }
body.club .lb-title { font-family: "ClubSerif", Georgia, serif; font-weight: 500; font-size: 38px; background: linear-gradient(100deg, #f6dfe2, #fff 35%, #e6e8ee 60%, #f6dfe2); -webkit-background-clip: text; background-clip: text; }
body.club .lb-switch { border-color: rgba(230,232,238,.4); }
body.club .lb-switch button.active { background: var(--club-sil); color: #3d0814; }
body.club .lb-place, body.club .lb-row-sum { color: #f1f2f6; }
body.club .lb-row { border-color: rgba(230,232,238,.22); }
body.club .lb-row-me { background: linear-gradient(90deg, rgba(230,232,238,.32), rgba(230,232,238,.1)); border-color: rgba(230,232,238,.7); }
body.club .lb-you { background: var(--club-sil); }
body.club .lb-pod-name, body.club .lb-step span { font-family: "ClubSerif", Georgia, serif; }
body.club .bc-title { font: 600 19px/1.2 "ClubSerif", Georgia, serif; color: var(--club-h); }
body.club .bc-play { color: #fff; border-color: #e6e8ee; }

/* Безопасный просмотр чужого кабинета администратором. Кнопка выхода
   намеренно крупная и остаётся заметной на длинных мобильных страницах. */
.admin-preview-toolbar {
  position: sticky; top: 10px; z-index: 35; display: grid; gap: 10px;
  padding: 16px; margin-bottom: 16px; border-radius: 22px;
  color: #fff4ee; background: var(--club-silk);
  box-shadow: 0 18px 36px -22px rgba(40,5,15,.9);
}
.admin-preview-toolbar .muted { color: rgba(255,244,238,.86) !important; }
body.club #tabContent .admin-preview-exit {
  width: 100%; min-height: 58px; margin: 0; border: 2px solid #fff !important;
  background: #fff !important; color: #651426 !important;
  font-size: 18px; font-weight: 800; letter-spacing: .16em;
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.7);
}