/* ══════════════════════════════════════════════════════════════════════════
   ТЕМЫ v3
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Цвета, которые держались в правилах, а не в палитре ──────────────────
   Семь мест в слое оформления задавали фиолетовый прямо в объявлении:
   градиент карточки, поле поиска, калькулятор, значок шапки, кнопка «＋»,
   свечение в тайле иконки и атмосферные пятна. Пока тем было две, это
   работало — обе они и были фиолетовыми. Любая новая тема получала синий
   фон с фиолетовыми карточками поверх.

   Здесь эти семь значений становятся переменными, а правила переписываются
   на них. Смысл не в чистоте: после этого новая тема стоит одного блока
   палитры вместо правок по всему файлу.

   Тема Fate не затронута — она переопределяет те же правила селектором
   body.theme-fate, а он весит больше. */
:root {
  --surf-1: rgba(30, 33, 54, .84);   /* верх градиента поверхности */
  --surf-2: rgba(20, 23, 38, .90);   /* низ */
  --acc-1:  #8b7cff;                 /* светлый край акцентного пятна */
  --acc-2:  #6152d9;                 /* тёмный край */
  --ico-1:  rgba(124, 109, 250, .30);
  --ico-2:  rgba(124, 109, 250, .06);
  --atmo-1: rgba(124, 109, 250, .34);
  --atmo-2: rgba(56, 189, 248, .20);
  --atmo-3: rgba(245, 193, 90, .11);
}
body.theme-light {
  --acc-1:  #6366f1;
  --acc-2:  #4f46e5;
  --ico-1:  rgba(99, 102, 241, .16);
  --ico-2:  rgba(99, 102, 241, .04);
  --atmo-1: rgba(99, 102, 241, .20);
  --atmo-2: rgba(56, 189, 248, .14);
  --atmo-3: transparent;
}

.row {
  background: linear-gradient(178deg, var(--surf-1) 0%, var(--surf-2) 100%);
}
.search-input {
  background: linear-gradient(180deg, var(--surf-1), var(--surf-2));
}
.calc-card {
  background: linear-gradient(168deg, var(--surf-1) 0%, var(--surf-2) 92%);
}
.row-ico {
  background:
    radial-gradient(130% 130% at 28% 18%, var(--ico-1), var(--ico-2) 70%),
    var(--s2);
}
.add-btn { background: linear-gradient(160deg, var(--acc-1), var(--acc-2)); }
/* Значок шапки раньше брал чуть иной тёмный край (#5b4bd6 против #6152d9).
   Разница между ними меньше, чем разброс подсветки телефона, поэтому пара
   здесь одна на оба места — вместо четырёх переменных в каждой теме. */
.hdr-ico,
body.theme-light .hdr-ico {
  background: linear-gradient(150deg, var(--acc-1), var(--acc-2));
}
body::before {
  background:
    radial-gradient(38% 30% at 20% 16%, var(--atmo-1), transparent 68%),
    radial-gradient(34% 26% at 80% 28%, var(--atmo-2), transparent 66%),
    radial-gradient(30% 26% at 58% 74%, var(--atmo-3), transparent 66%);
}

/* ── Светлое семейство на палитре ─────────────────────────────────────────
   Десять правил светлой темы держали индиго прямо в объявлении: свечение
   под значком шапки, градиент названия, кнопка калькулятора, подсветка
   тайла, оттенок теней и рамок. Сакура наследует структуру светлой темы —
   и вместе с ней получала синие пятна поверх розового каталога.

   Правила переписаны на переменные и адресованы всему светлому семейству,
   а не одной Сакуре: у обычной светлой значения те же самые, что и были,
   а следующая светлая тема будет стоить блока палитры.

   --tint и --sh-tint хранят тройки чисел, а не цвета: они подставляются
   внутрь rgba() с разной прозрачностью в семи местах, и держать семь
   готовых цветов вместо одной тройки смысла нет. */
body.theme-light {
  --tint:      30, 34, 78;         /* холодная синь под тенями и рамками */
  --sh-tint:   76, 62, 160;        /* рассеянная тень */
  --acc-glow:  rgba(99, 102, 241, .35);
  --badge-bg:  #eef2ff;
}
body.theme-sakura {
  --tint:      120, 40, 70;
  --sh-tint:   160, 60, 100;
  --acc-glow:  rgba(219, 39, 119, .30);
  --badge-bg:  #fff0f6;
}

body.theme-light .hdr {
  box-shadow: 0 1px 0 rgba(var(--tint), .07),
              0 10px 26px -20px rgba(var(--sh-tint), .55);
}
body.theme-light .hdr-ico { box-shadow: 0 4px 16px var(--acc-glow); }
body.theme-light .hdr-h {
  background: linear-gradient(92deg, var(--t1) 30%, var(--pd) 100%);
  -webkit-background-clip: text; background-clip: text;
}
body.theme-light .tab.on {
  box-shadow: 0 1px 0 rgba(var(--tint), .05),
              0 6px 16px -10px rgba(var(--sh-tint), .5);
}
body.theme-light .search-input {
  border-color: rgba(var(--tint), .09);
  box-shadow: inset 0 1px 0 var(--rim), 0 4px 12px -8px rgba(var(--sh-tint), .35);
}
body.theme-light .calc-card { border-color: rgba(var(--tint), .07); }
body.theme-light .calc-badge { background: var(--badge-bg); color: var(--p); }
body.theme-light .calc-add-btn {
  background: linear-gradient(135deg, var(--acc-1), var(--acc-2));
  box-shadow: 0 4px 14px var(--acc-glow);
}
body.theme-light .row { border-color: rgba(var(--tint), .05); }
body.theme-light .row:active {
  box-shadow: inset 0 1px 0 var(--rim), 0 1px 2px rgba(var(--sh-tint), .10);
}
body.theme-light .row-ico {
  background: radial-gradient(130% 130% at 28% 18%, var(--ico-1), var(--ico-2) 70%),
              var(--bg-card);
}

/* ── Главная кнопка и цветные плашки ──────────────────────────────────────
   «Оформить заказ» — кнопка, ради которой приложение открывают, — держала
   фиолетовый прямо в правиле и оставалась фиолетовой во всех темах, включая
   Fate. Там же оказались три плашки светлой темы: номер шага в правилах,
   значок ранга в профиле и кнопка реферальной ссылки.

   Подкраску разделов это не трогает: разные тона у соседних разделов —
   намеренная работа, а не забытый цвет. */
:root       { --acc-glow: rgba(124, 109, 250, .35); }
body.theme-midnight { --acc-glow: rgba(56, 189, 248, .35); }
body.theme-orchid   { --acc-glow: rgba(217, 70, 239, .38); }
body.theme-fate {
  --acc-1: #c9293f;
  --acc-2: #8e1a2e;
  --acc-glow: rgba(184, 37, 60, .42);
}

.sh-btn,
body.theme-light .sh-btn {
  background: linear-gradient(135deg, var(--acc-1), var(--acc-2));
  box-shadow: 0 6px 22px var(--acc-glow);
}
body.theme-light .rb-num,
body.theme-light .profile-tier-badge,
body.theme-light .ref-btn {
  background: var(--badge-bg);
  color: var(--price-color);
  border-color: var(--p-ring);
}

/* ── Полночь ──────────────────────────────────────────────────────────────
   Синь глубже базовой тёмной, акцент уведён в холодный голубой. Красный
   для ошибок взят розовее обычного: на синеве кирпичный читается как
   грязное пятно, а не как тревога. */
body.theme-midnight {
  --bg:          #050810;
  --bg-2:        #080d1a;
  --bg-card:     #0d1526;
  --s1:          #101a30;
  --s2:          #16213c;
  --s3:          #1e2c4e;

  --ln:          rgba(125, 211, 252, .10);
  --ln2:         rgba(125, 211, 252, .19);
  --ln-strong:   rgba(56, 189, 248, .45);
  --rim:         rgba(190, 230, 255, .09);
  --rim-strong:  rgba(190, 230, 255, .18);

  --p:           #38bdf8;
  --pd:          #0ea5e9;
  --p-soft:      rgba(56, 189, 248, .15);
  --p-ring:      rgba(56, 189, 248, .34);
  --glow:        rgba(56, 189, 248, .35);
  --brand:       #38bdf8;

  --t1:          #e9f3ff;
  --t2:          #93a9c6;
  --t3:          #64748b;
  --price-color: #a5dcff;
  --price-bg:    rgba(56, 189, 248, .13);

  --gr:          #34d399;
  --gr-soft:     rgba(52, 211, 153, .14);
  --rd:          #fb7185;
  --hdr-bg:      rgba(5, 8, 16, .90);

  --gold:        #f5c15a;
  --gold-2:      #ffd98a;
  --gold-soft:   rgba(245, 193, 90, .13);
  --gold-ring:   rgba(245, 193, 90, .34);

  --sh-card:     0 1px 2px rgba(0,0,0,.6), 0 14px 32px -16px rgba(0,0,0,.92);
  --sh-lift:     0 2px 5px rgba(0,0,0,.55), 0 22px 46px -20px rgba(0,0,0,.97);
  --sh-pop:      0 10px 34px rgba(0,0,0,.6);

  --surf-1: rgba(19, 30, 52, .84);
  --surf-2: rgba(11, 19, 36, .90);
  --acc-1:  #5cc9fb;
  --acc-2:  #0284c7;
  --ico-1:  rgba(56, 189, 248, .30);
  --ico-2:  rgba(56, 189, 248, .06);
  --atmo-1: rgba(56, 189, 248, .30);
  --atmo-2: rgba(99, 102, 241, .20);
  --atmo-3: rgba(45, 212, 191, .10);
}
body.theme-midnight {
  background-color: #050810;
  background-image:
    radial-gradient(120% 58% at 50% -10%, rgba(56,189,248,.20), transparent 62%),
    radial-gradient(72%  42% at 100% 6%,  rgba(99,102,241,.14), transparent 60%),
    radial-gradient(60%  38% at 0%   16%, rgba(45,212,191,.07), transparent 60%),
    linear-gradient(180deg, #071021 0%, #050810 58%);
}

/* ── Орхидея ──────────────────────────────────────────────────────────────
   Сливовая чернота и фуксия. Красный здесь чистый (#ef4444), а не розовый:
   рядом с фуксией розовый перестаёт читаться как ошибка. Золото уведено в
   янтарь — на пурпуре оно звонче холодного. */
body.theme-orchid {
  --bg:          #0a0510;
  --bg-2:        #100a1c;
  --bg-card:     #180f28;
  --s1:          #1d1230;
  --s2:          #251740;
  --s3:          #322055;

  --ln:          rgba(240, 171, 252, .11);
  --ln2:         rgba(240, 171, 252, .20);
  --ln-strong:   rgba(217, 70, 239, .46);
  --rim:         rgba(250, 210, 255, .10);
  --rim-strong:  rgba(250, 210, 255, .19);

  --p:           #d946ef;
  --pd:          #a21caf;
  --p-soft:      rgba(217, 70, 239, .16);
  --p-ring:      rgba(217, 70, 239, .36);
  --glow:        rgba(217, 70, 239, .38);
  --brand:       #d946ef;

  --t1:          #f8eefc;
  --t2:          #bda6cb;
  --t3:          #8b7699;
  --price-color: #f0abfc;
  --price-bg:    rgba(217, 70, 239, .14);

  --gr:          #4ade80;
  --gr-soft:     rgba(74, 222, 128, .14);
  --rd:          #ef4444;
  --hdr-bg:      rgba(10, 5, 16, .90);

  --gold:        #fbbf24;
  --gold-2:      #fcd34d;
  --gold-soft:   rgba(251, 191, 36, .14);
  --gold-ring:   rgba(251, 191, 36, .36);

  --sh-card:     0 1px 2px rgba(0,0,0,.6), 0 14px 32px -16px rgba(20,0,30,.92);
  --sh-lift:     0 2px 5px rgba(0,0,0,.55), 0 22px 46px -20px rgba(20,0,30,.97);
  --sh-pop:      0 10px 34px rgba(20,0,30,.65);

  --surf-1: rgba(40, 25, 64, .86);
  --surf-2: rgba(24, 15, 40, .92);
  --acc-1:  #e879f9;
  --acc-2:  #a21caf;
  --ico-1:  rgba(217, 70, 239, .32);
  --ico-2:  rgba(217, 70, 239, .06);
  --atmo-1: rgba(217, 70, 239, .32);
  --atmo-2: rgba(139, 92, 246, .22);
  --atmo-3: rgba(251, 191, 36, .08);
}
body.theme-orchid {
  background-color: #0a0510;
  background-image:
    radial-gradient(120% 58% at 50% -10%, rgba(217,70,239,.22), transparent 62%),
    radial-gradient(70%  40% at 100% 8%,  rgba(139,92,246,.16), transparent 60%),
    radial-gradient(62%  38% at 0%   20%, rgba(251,191,36,.06), transparent 60%),
    linear-gradient(180deg, #130a20 0%, #0a0510 58%);
}

/* ── Сакура ───────────────────────────────────────────────────────────────
   Светлая тёплая. Идёт вместе с классом theme-light, поэтому вся структура
   светлой темы уже на месте, а здесь только палитра.

   Текст не чёрный, а тёмно-сливовый: чистый чёрный на кремовом выглядит
   вырезанным из другого макета. Деньги, как и в светлой, подаются плашкой
   с густой охрой — розовый на розовом потерялся бы. */
body.theme-sakura {
  --bg:          #fdf3f5;
  --bg-2:        #fff8f9;
  --bg-card:     #ffffff;
  --s1:          #ffffff;
  --s2:          #fdf0f3;
  --s3:          #f8e2e8;

  --ln:          rgba(120, 40, 70, .13);
  --ln2:         rgba(120, 40, 70, .21);
  --ln-strong:   rgba(219, 39, 119, .45);
  --rim:         rgba(255, 255, 255, .95);
  --rim-strong:  #ffffff;

  --p:           #db2777;
  --pd:          #be185d;
  --p-soft:      rgba(219, 39, 119, .10);
  --p-ring:      rgba(219, 39, 119, .30);
  --glow:        rgba(219, 39, 119, .22);
  --brand:       #db2777;

  --t1:          #3b1220;
  --t2:          #7a5464;
  --t3:          #9c7a88;
  --price-color: #9d174d;
  --price-bg:    rgba(219, 39, 119, .09);

  --gr:          #047857;
  --gr-soft:     rgba(4, 120, 87, .11);
  --rd:          #b91c1c;
  --hdr-bg:      rgba(255, 248, 249, .92);

  --gold:        #8a5a12;
  --gold-2:      #6b4408;
  --gold-soft:   rgba(245, 193, 90, .32);
  --gold-ring:   rgba(158, 108, 12, .30);

  /* Тени подкрашены в розовый по той же причине, по какой в светлой теме
     они фиолетовые: серая тень на тёплом фоне читается как грязь. */
  --sh-1:        0 1px 2px rgba(90, 30, 55, .07);
  --sh-2:        0 1px 3px rgba(90, 30, 55, .07), 0 6px 18px rgba(90, 30, 55, .08);
  --sh-pop:      0 10px 34px rgba(90, 30, 55, .18);
  --sh-card:     0 1px 2px rgba(90, 30, 55, .05), 0 10px 24px -12px rgba(160, 60, 100, .28);
  --sh-lift:     0 2px 6px rgba(90, 30, 55, .07), 0 22px 44px -18px rgba(160, 60, 100, .36);

  /* Значок шапки и кнопка «＋» в светлой теме были прибиты к индиго прямо
     в правиле. Без этой пары Сакура получила бы синий значок над розовым
     каталогом. */
  --acc-1:  #f472b6;
  --acc-2:  #db2777;
  --ico-1:  rgba(219, 39, 119, .16);
  --ico-2:  rgba(219, 39, 119, .04);
  --atmo-1: rgba(244, 114, 182, .24);
  --atmo-2: rgba(251, 191, 36, .14);
  --atmo-3: rgba(167, 139, 250, .12);
}
body.theme-sakura {
  background-color: #fbe9ee;
  background-image:
    radial-gradient(120% 58% at 50% -10%, rgba(244, 114, 182, .26), transparent 64%),
    radial-gradient(75%  42% at 100% 2%,  rgba(251, 191, 36, .16),  transparent 62%),
    radial-gradient(65%  45% at 0%   22%, rgba(167, 139, 250, .14), transparent 64%),
    linear-gradient(180deg, #fffafb 0%, #fdf1f4 45%, #f9e6ec 100%);
}
body.theme-sakura .sheet { background: #fffafb; }

/* ── Выбор оформления ─────────────────────────────────────────────────────
   Отдельный лист со своей подложкой: у корзины подложка прибита к
   closeCart() прямо в разметке, и делить одну на двоих значило бы городить
   развилку в обработчике. */
.th-overlay {
  display: none; position: fixed; inset: 0; z-index: 210;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.th-overlay.on { display: block; animation: fdi .2s ease; }

.th-sheet {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 220;
  background: var(--bg-card);
  border-top: 1px solid var(--ln2);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -10px 44px rgba(0,0,0,.6);
  padding: 0 18px calc(22px + env(safe-area-inset-bottom, 0px));
  max-height: 88vh; overflow-y: auto;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
}
.th-sheet.on { transform: translateY(0); }
body.theme-light .th-sheet { background: #ffffff; box-shadow: 0 -10px 40px rgba(0,0,0,.15); }
body.theme-sakura .th-sheet { background: #fffafb; }

.th-head { font-size: 19px; font-weight: 800; letter-spacing: -.4px; color: var(--t1); }
.th-sub { font-size: 12.5px; color: var(--t2); margin: 4px 0 16px; line-height: 1.4; }

.th-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.th-card {
  border: none; cursor: pointer; text-align: left;
  padding: 0; overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--s1);
  box-shadow: inset 0 0 0 1px var(--ln), var(--sh-1);
  transition: transform .14s var(--ease), box-shadow .18s var(--ease);
  font-family: inherit;
}
.th-card:active { transform: scale(.97); }
.th-card.on { box-shadow: inset 0 0 0 2px var(--p), 0 0 0 4px var(--p-soft), var(--sh-2); }

/* Макет вместо кружка: видно и фон, и карточку на нём, и акцент. По трём
   точкам в ряд тему не узнать — по маленькому экрану приложения узнать
   можно. */
.th-prev { height: 74px; padding: 9px; position: relative; }
.th-prev-bar {
  height: 9px; border-radius: 3px; width: 52%;
  opacity: .9;
}
.th-prev-row {
  margin-top: 8px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; gap: 6px; padding: 0 7px;
}
.th-prev-ico { width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; }
.th-prev-lines { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.th-prev-lines i { display: block; height: 4px; border-radius: 2px; opacity: .55; }
.th-prev-lines i:last-child { width: 58%; opacity: .32; }
.th-prev-pill { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; }

.th-name {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 9px 11px 11px;
  font-size: 13px; font-weight: 700; color: var(--t1);
  letter-spacing: -.01em;
}
.th-check { width: 15px; height: 15px; color: var(--p); flex-shrink: 0; opacity: 0; }
.th-card.on .th-check { opacity: 1; }

/* Знак ограниченной темы: она есть не у всех, и об этом честнее сказать
   значком, чем спрятать тему совсем. Спрятанное невозможно объяснить. */
.th-lock { font-size: 10px; font-weight: 700; color: var(--gold);
           letter-spacing: .06em; text-transform: uppercase; }