: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;
  touch-action: pan-y;
  overscroll-behavior: none;
}
body {
  margin: 0; min-height: 100vh; width: 100%; overflow-x: hidden; touch-action: pan-y; overscroll-behavior: none; 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: flex; align-items: center; justify-content: center;
}
/* Пока показан экран входа (body.auth-bg) — сам экран "прибит" к
   вьюпорту. Без этого при фокусе на поле Email/Пароль мобильный браузер
   скроллит страницу, чтобы вывести поле над клавиатурой, и это выглядит
   как "экран листается" — а он должен быть полностью статичным: просто
   центрируется заново в уменьшившейся из-за клавиатуры видимой области.
   100dvh — именно динамическая высота вьюпорта, которая знает про
   открытую клавиатуру (обычный vh — нет). */
body.auth-bg {
  position: fixed;
  inset: 0;
  height: 100dvh;
  overflow-y: hidden;
  /* position:fixed сам по себе не убирает остаточное "листание" — Safari
     всё равно распознаёт вертикальный свайп пальцем как жест прокрутки
     (раз html/body разрешают touch-action:pan-y) и в ответ на него
     сворачивает/разворачивает свою адресную строку, отчего видимая
     область чуть меняется — это и ощущается как лёгкое листание, даже
     когда сам контент никуда не скроллится. touch-action:none на время
     экрана входа запрещает браузеру вообще распознавать этот свайп как
     жест — ввод текста в поля (тап + системная клавиатура) не затронут. */
  touch-action: none;
}
/* Декор самого фона (не карточки) на экранах входа/регистрации/сброса
   пароля: цветущая ветка в двух противоположных углах (один и тот же
   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; padding: 40px 20px; 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; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); }
td.num, th.num { text-align: right; }
#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; }

/* Экраны входа/регистрации — декоративное оформление в духе рекламных
   лендингов (по референсу), но в цветах кабинета: бейдж-пилюля, круглая
   эмблема, акцентное слово в заголовке и большая кнопка-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; }