/* ========== Fenix 2.0 — Premium Fintech ========== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  /* Тёмный с синим уклоном */
  --bg: #0a0f1a;
  --bg-2: #070b14;
  --surface: #131a2b;
  --surface-2: #1a223a;
  --surface-3: #232d4a;

  /* Текст */
  --fg: #ffffff;
  --fg-90: rgba(255, 255, 255, 0.92);
  --fg-70: rgba(255, 255, 255, 0.72);
  --fg-50: rgba(255, 255, 255, 0.52);
  --fg-30: rgba(255, 255, 255, 0.30);
  --fg-15: rgba(255, 255, 255, 0.15);
  --fg-08: rgba(255, 255, 255, 0.08);
  --fg-05: rgba(255, 255, 255, 0.05);

  /* Главный акцент — синий */
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-glow: rgba(59, 130, 246, 0.40);

  /* Совместимость с переменными изумруда (для лидерборда и тостов) */
  --emerald-200: var(--blue-200);
  --emerald-300: var(--blue-300);
  --emerald-400: var(--blue-400);
  --emerald-500: var(--blue-500);
  --emerald-600: var(--blue-600);
  --emerald-glow: var(--blue-glow);

  /* Статусные */
  --green: #34d399;
  --red: #f87171;
  --gold: #fbbf24;
  --gray: #6b7280;

  /* Бордеры */
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.10);

  /* Геометрия */
  --r-xl: 24px;
  --r-lg: 20px;
  --r-md: 16px;
  --r-sm: 12px;
  --r-pill: 100px;

  /* Тени — мягкие, многослойные */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.45), 0 16px 48px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 8px 32px var(--emerald-glow);
  --inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --tab-h: 64px;
}

/* ===== Светлая тема: переопределяем палитру, остальное тянется из переменных ===== */
:root[data-theme="light"] {
  --bg: #eef2f8;
  --bg-2: #e4eaf3;
  --surface: #ffffff;
  --surface-2: #f4f7fb;
  --surface-3: #e9eef6;

  --fg: #0e1726;
  --fg-90: rgba(14, 23, 38, 0.92);
  --fg-70: rgba(14, 23, 38, 0.66);
  --fg-50: rgba(14, 23, 38, 0.48);
  --fg-30: rgba(14, 23, 38, 0.30);
  --fg-15: rgba(14, 23, 38, 0.12);
  --fg-08: rgba(14, 23, 38, 0.06);
  --fg-05: rgba(14, 23, 38, 0.04);

  --border: rgba(14, 23, 38, 0.10);
  --border-strong: rgba(14, 23, 38, 0.16);

  --green: #059669;
  --red: #dc2626;
  --gold: #d97706;

  --shadow-sm: 0 1px 2px rgba(14, 23, 38, 0.08);
  --shadow-md: 0 1px 3px rgba(14, 23, 38, 0.10), 0 8px 24px rgba(14, 23, 38, 0.08);
  --shadow-lg: 0 4px 16px rgba(14, 23, 38, 0.12), 0 16px 48px rgba(14, 23, 38, 0.10);
  --inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
:root[data-theme="light"] body::before {
  background:
    radial-gradient(50% 40% at 85% -5%, rgba(59, 130, 246, 0.10), transparent 60%),
    radial-gradient(45% 35% at 10% 90%, rgba(99, 102, 241, 0.08), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

/* Подложки, набранные белым по тёмному (rgba(255,255,255,.04….08)), на светлом
   фоне становятся невидимыми: пропадают кружки иконок, дорожки прогресс-баров
   и полоски строк. Переливаем их в тёмную заливку той же силы. Правила ниже —
   ровно те места, где белая плашка несла смысл, а не только блик. */
:root[data-theme="light"] .tab:hover { background: rgba(14, 23, 38, 0.05); }
:root[data-theme="light"] .tab-icon { background: rgba(14, 23, 38, 0.07); }
:root[data-theme="light"] .trophy,
:root[data-theme="light"] .bell { background: rgba(14, 23, 38, 0.05); }
:root[data-theme="light"] .trophy:active,
:root[data-theme="light"] .bell:active { background: rgba(14, 23, 38, 0.09); }
:root[data-theme="light"] .captcha-q { background: rgba(14, 23, 38, 0.05); }
:root[data-theme="light"] .amb-task-bar { background: rgba(14, 23, 38, 0.10); }
:root[data-theme="light"] .ref-row { background: rgba(14, 23, 38, 0.04); }

/* Онбординг — брендовый экран с белым текстом и градиентными плитками поверх
   тёмной заливки. В светлой теме он тянул --bg и белые надписи исчезали,
   поэтому держим его тёмным всегда: это заставка, а не часть интерфейса. */
:root[data-theme="light"] .onb { background: #0A0E1C; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0; padding: 0; }

/* Универсальное скрытие. Раньше правила .hidden в чистом виде НЕ БЫЛО — только
   привязанные к конкретным блокам (.modal.hidden, .screen.hidden и т.д.).
   Из-за этого classList.add("hidden") на кнопке не срабатывал: .btn остаётся
   display:flex. Кнопка Taddy висела на экране даже без pub_id в админке.
   !important — потому что у .btn/.modal свои display в более поздних правилах. */
.hidden { display: none !important; }

/* ============================ SVG ICON BASE ============================ */
.ic {
  width: 20px; height: 20px;
  display: inline-block;
  fill: currentColor;
  flex-shrink: 0;
}
.ic-sm { width: 14px; height: 14px; }
.ic-md { width: 22px; height: 22px; }
.ic-lg { width: 28px; height: 28px; }
.ic-xl { width: 36px; height: 36px; }

html, body {
  height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-size: 15px;
  font-feature-settings: "cv11", "ss01", "ss03";
  color: var(--fg);
  background: var(--bg);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

/* Многослойный фон: глубокий градиент + мягкие сине-фиолетовые нимбы для глубины */
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(50% 40% at 85% -5%, rgba(59, 130, 246, 0.22), transparent 60%),
    radial-gradient(45% 35% at 10% 90%, rgba(99, 102, 241, 0.16), transparent 60%),
    radial-gradient(60% 50% at 50% 50%, rgba(15, 23, 42, 0.0), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  z-index: -2;
  pointer-events: none;
}
/* Тонкая «зернистая» вуаль для дороговизны (через градиент) */
body::after {
  content: "";
  position: fixed; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.20) 100%);
  z-index: -1;
  pointer-events: none;
}

#app {
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  overflow: hidden;
}

button { font-family: inherit; cursor: pointer; }

/* Планшеты (iPad, Android-планшеты) и десктоп (Telegram Windows/macOS, Web).
   Там Mini App открывается широким окном, и без ограничения ширины мобильная
   вёрстка растягивается на весь экран: кнопки во всю строку, баланс теряется
   в пустоте. Держим ту же колонку, что и на телефоне, по центру. */
@media (min-width: 620px) {
  .screen {
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
  }
  .tabbar {
    left: 50%; right: auto;
    transform: translateX(-50%);
    width: 100%;
    max-width: 520px;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-radius: 18px 18px 0 0;
  }
}

/* Мышь вместо пальца (десктоп/планшет с трекпадом): на тач-устройствах :hover
   «залипает» после тапа, поэтому включаем его только для точных указателей. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) { filter: brightness(1.08); }
  .tab:hover { background: rgba(255, 255, 255, 0.05); }
}

.screen {
  flex: 1; min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px calc(var(--tab-h) + 24px);
}
.screen.hidden { display: none; }

/* Tabular numerals — для всех денежных значений */
.balance-amount,
.stat-value,
.pg-value,
.ws-value,
.task-reward,
.leader-ads,
.balance-row,
.profile-id,
.hero-sub,
.ref-stats .big {
  font-feature-settings: "tnum", "cv11";
  font-variant-numeric: tabular-nums;
}

/* ============================ HEADER ============================ */

.brand {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  margin-bottom: 22px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(59, 130, 246, 0.08) 0%, rgba(255, 255, 255, 0.012) 60%),
    var(--surface);
  border: 1px solid rgba(96, 165, 250, 0.16);
  box-shadow:
    var(--shadow-md),
    0 6px 22px rgba(59, 130, 246, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  animation: fade-down 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Тонкая градиентная акцент-линия сверху — в стиле balance-card */
.brand::before {
  content: "";
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.55), transparent);
  pointer-events: none;
}
.brand-logo {
  position: relative;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--blue-400) 0%, var(--blue-600) 55%, var(--blue-700) 100%);
  color: #fff;
  border-radius: 15px;
  box-shadow:
    0 8px 22px var(--blue-glow),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.35),
    inset 0 -4px 9px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.brand-logo::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(125% 85% at 28% 0%, rgba(255, 255, 255, 0.40) 0%, transparent 52%);
  pointer-events: none;
}
.brand-logo .ic { width: 25px; height: 25px; position: relative; z-index: 1; }
.brand h1 {
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.05;
  background: linear-gradient(100deg, #ffffff 0%, var(--blue-200) 58%, var(--blue-400) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--fg);
}
.brand-tagline {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--fg-50);
}
.brand-help {
  margin-left: auto;
  width: 30px; height: 30px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--fg-70);
  font-size: 15px; font-weight: 800;
  cursor: pointer;
  transition: filter .15s, transform .15s;
}
.brand-help:active { filter: brightness(1.4); transform: scale(0.92); }
.brand-help .ic { width: 17px; height: 17px; }

/* ============================ SETTINGS (модалка) ============================ */
.set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.set-row:last-of-type { border-bottom: none; }
.set-info { min-width: 0; }
.set-name { font-size: 15px; font-weight: 600; color: var(--fg-90); }
.set-desc { font-size: 12px; color: var(--fg-50); margin-top: 2px; }
.set-langs { display: flex; gap: 6px; flex-shrink: 0; }
.set-lang {
  padding: 7px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--fg-70);
  font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.set-lang.active {
  background: var(--blue-600); border-color: var(--blue-500); color: #fff;
  box-shadow: 0 0 12px var(--blue-glow);
}
/* Переключатель */
.switch { position: relative; display: inline-block; width: 48px; height: 28px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  transition: background .2s;
}
.switch .slider::before {
  content: ""; position: absolute;
  height: 20px; width: 20px; left: 3px; top: 3px;
  background: var(--fg-50);
  border-radius: 50%;
  transition: transform .2s, background .2s;
}
.switch input:checked + .slider { background: var(--blue-600); border-color: var(--blue-500); }
.switch input:checked + .slider::before { transform: translateX(20px); background: #fff; }
@keyframes fade-down {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================ HERO BALANCE ============================ */

.balance-card.card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(59, 130, 246, 0.10) 0%, transparent 40%),
    var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  padding: 28px 22px 22px;
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  margin-bottom: 14px;
  animation: fade-up 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: 0.05s;
  overflow: visible;
}
/* Тонкая полоска-блик сверху */
.balance-card.card::before {
  content: "";
  position: absolute; top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.6), transparent);
  pointer-events: none;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.balance-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px;
  color: var(--fg-50);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
  position: relative;
}

.trophy, .bell {
  cursor: pointer;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  transition: transform 0.15s, background 0.2s;
}
.trophy { color: var(--gold); }
.trophy .ic { filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.55)); }
.bell { color: var(--gold); }
.bell .ic { filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.55)); }
.trophy:active, .bell:active { transform: scale(0.88); background: rgba(255, 255, 255, 0.08); }
.trophy .ic, .bell .ic { width: 22px; height: 22px; }

.balance-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--fg-50);
  display: inline-flex;
  align-items: center;
  text-transform: none;
}
.balance-label .ic { color: var(--fg-70); }

.balance-amount {
  font-size: 56px;
  font-weight: 800;
  text-align: center;
  margin: 20px 0 10px;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--fg);
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.10);
  font-feature-settings: "tnum", "cv11";
  font-variant-numeric: tabular-nums;
}

/* Стат-карточки под балансом */
.balance-card.card .stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0 14px;
}
.stat {
  text-align: center;
  padding: 16px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.stat-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--fg);
  letter-spacing: -0.02em;
  line-height: 1;
  font-family: 'JetBrains Mono', monospace;
}
.stat-label {
  font-size: 11px;
  color: var(--fg-50);
  margin-top: 8px;
  letter-spacing: 0.02em;
}
.stat-timer {
  font-size: 11px;
  color: #f97316;
  font-weight: 600;
  margin-top: 4px;
  min-height: 16px;
}

/* ===================== AD LIMITS (плашки по интеграциям) ===================== */
.ad-limits {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 9px;
  margin: 16px 0 14px;
}
.ad-limit {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;          /* крупнее (было 10/13) — просил больше островки */
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--inner-light);
}
.ad-limit.hidden { display: none; }

/* Огонёк стрика — между пилюлями лимитов. Тап открывает окно серии. */
.streak-fab {
  flex: 0 0 auto;
  position: relative;
  width: 46px;
  align-self: stretch;
  display: grid; place-items: center;
  border-radius: var(--r-lg);
  border: 1px solid rgba(249, 115, 22, 0.35);
  background: linear-gradient(160deg, rgba(249, 115, 22, 0.18), rgba(239, 68, 68, 0.10));
  color: #fb923c;
  cursor: pointer;
  transition: transform .12s ease, filter .2s ease;
}
.streak-fab:active { transform: scale(0.94); }
.streak-fab .ic { width: 22px; height: 22px; filter: drop-shadow(0 0 6px rgba(249,115,22,.5)); }
/* Число дней — маленьким бейджем в углу огонька. */
.streak-fab-days {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: #f97316;
  color: #fff;
  font-size: 11px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  border: 2px solid var(--surface);
}
/* Стрика ещё нет (0) — огонёк тусклый, без бейджа. */
.streak-fab.zero {
  color: var(--fg-30);
  border-color: var(--border);
  background: var(--surface-2);
}
.streak-fab.zero .ic { filter: none; }
.streak-fab.zero .streak-fab-days { display: none; }

/* Окно стрика */
.streak-hero { text-align: center; padding: 8px 0 14px; }
.streak-hero-num {
  font-size: 56px; font-weight: 900; line-height: 1;
  color: #fb923c;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 22px rgba(249, 115, 22, 0.35);
}
.streak-hero-word { margin-top: 4px; font-size: 14px; color: var(--fg-50); font-weight: 600; }
.streak-rows { display: flex; flex-direction: column; gap: 2px; }
.streak-kv {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 14px; color: var(--fg-70);
}
.streak-kv:last-child { border-bottom: none; }
.streak-kv b { color: var(--fg); font-weight: 800; font-variant-numeric: tabular-nums; }
.streak-note { margin-top: 12px; font-size: 12.5px; color: var(--fg-50); line-height: 1.5; text-align: center; }
/* Круглый бейдж с иконкой — как трофей/колокол в карточке баланса. */
.ad-limit-ico {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.14);
  border: 1px solid var(--border);
  color: var(--blue-300);
}
.ad-limit-ico .ic {
  width: 18px; height: 18px;
  filter: drop-shadow(0 0 5px var(--blue-glow));
}
.ad-limit.taddy .ad-limit-ico {
  background: rgba(168, 85, 247, 0.16);
  color: #c4b5fd;
}
.ad-limit.taddy .ad-limit-ico .ic { filter: drop-shadow(0 0 5px rgba(168, 85, 247, 0.45)); }
.ad-limit-mid { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.ad-limit-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-50);
  letter-spacing: 0.02em;
}
.ad-limit-count {
  font-size: 15px;
  color: var(--fg-50);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.01em;
}
.ad-limit-count b {
  color: var(--fg);
  font-weight: 800;
  font-size: 17px;
}
.ad-limit-timer {
  margin-left: auto;
  font-size: 12px;
  color: #f97316;
  font-weight: 700;
  white-space: nowrap;
}
.ad-limit-timer:empty { display: none; }
/* когда лимит выбран/блок — подсветка плашки */
.ad-limit.blocked {
  border-color: rgba(249, 115, 22, 0.35);
  background: rgba(249, 115, 22, 0.08);
}
.ad-limit.blocked .ad-limit-ico {
  background: rgba(249, 115, 22, 0.16);
  color: #f97316;
}
.ad-limit.blocked .ad-limit-ico .ic { filter: none; }

/* ============================ BUTTONS ============================ */

.btn {
  width: 100%;
  height: 54px;
  padding: 0 20px;
  border: 1px solid transparent;
  outline: none;
  border-radius: var(--r-md);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--fg);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 10px;
  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s, opacity 0.2s, filter 0.2s;
  font-family: inherit;
  position: relative;
  overflow: hidden;
}
/* Внутренний блик сверху — даёт «объём» кнопке */
.btn::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent);
  pointer-events: none;
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.40; cursor: not-allowed; }
.btn-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
}
.btn-icon .ic { width: 20px; height: 20px; }
.btn-text { position: relative; z-index: 1; }

/* Primary — насыщенный синий с глубокой тенью */
.btn-watch,
.btn-withdraw,
.btn-bonus {
  background: linear-gradient(135deg, var(--blue-400) 0%, var(--blue-600) 100%);
  color: #fff;
  box-shadow:
    0 10px 28px var(--blue-glow),
    0 2px 6px rgba(37, 99, 235, 0.30),
    inset 0 -2px 6px rgba(0, 0, 0, 0.20);
  font-weight: 800;
  letter-spacing: 0.005em;
}
.btn-watch:active:not(:disabled),
.btn-withdraw:active:not(:disabled),
.btn-bonus:active:not(:disabled) {
  box-shadow:
    0 4px 14px var(--blue-glow),
    inset 0 -1px 3px rgba(0, 0, 0, 0.30);
}

/* Secondary — мягче, но с тем же визуальным языком */
.btn-tasks,
.btn-promo {
  background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 100%);
  color: #fff;
  font-weight: 700;
  box-shadow:
    0 6px 20px rgba(37, 99, 235, 0.22),
    inset 0 -2px 5px rgba(0, 0, 0, 0.18);
}
.btn-tasks:active:not(:disabled),
.btn-promo:active:not(:disabled) {
  filter: brightness(0.92);
}

.btn:last-child { margin-bottom: 0; }

/* ============================ INPUTS ============================ */

.lbl {
  display: block;
  margin: 10px 0 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-50);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.inp {
  width: 100%;
  height: 52px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 0 16px;
  border-radius: var(--r-md);
  font-size: 16px;
  font-family: inherit;
  font-weight: 500;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.inp:focus {
  border-color: var(--emerald-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.inp::placeholder { color: var(--fg-30); }

/* ============================ CARD (общий) ============================ */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 22px;
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  margin-bottom: 14px;
  animation: fade-up 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: 0.1s;
}

.muted { color: var(--fg-50); font-size: 12.5px; line-height: 1.5; }
.hint {
  font-size: 12px;
  color: var(--fg-50);
  margin: 10px 0 14px;
  line-height: 1.6;
}

/* ============================ WITHDRAW ============================ */

.withdraw-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 18px;
}
.withdraw-stat {
  text-align: center;
  padding: 16px 12px;
  background: var(--surface-2);
}
.ws-value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.ws-label {
  font-size: 10px;
  color: var(--fg-50);
  margin-top: 4px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================ PROFILE ============================ */

.profile-card.card { text-align: left; padding: 20px 18px; }

/* Шапка профиля: аватар + имя/ID */
.prof-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.prof-avatar {
  flex-shrink: 0;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--blue-300);
  background: radial-gradient(circle at 50% 35%, rgba(59, 130, 246, 0.28), rgba(59, 130, 246, 0.06) 70%);
  border: 1px solid var(--border-strong);
  box-shadow: 0 6px 20px var(--blue-glow);
}
.prof-avatar .ic { width: 26px; height: 26px; }
.prof-meta { min-width: 0; }

.profile-name {
  font-size: 20px;
  font-weight: 800;
  text-align: left;
  letter-spacing: -0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-id {
  text-align: left;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--fg-50);
  margin: 4px 0 0;
}

.profile-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.pg-cell {
  text-align: center;
  padding: 16px 12px;
  background: var(--surface-2);
}
.pg-value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.pg-value.green { color: var(--emerald-400); }
.pg-label {
  font-size: 10px;
  color: var(--fg-50);
  margin-top: 4px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ref-block {
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.ref-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  color: var(--fg);
}
.ref-title .ic { color: var(--blue-400); }
.ref-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0;
  text-align: center;
}
.ref-stats > div {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 8px;
}
.ref-stats .big {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.ref-stats .green { color: var(--emerald-400); }

.ref-link-row { display: flex; gap: 8px; }
.ref-link-input {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 13px 14px;
  border-radius: var(--r-md);
  font-size: 11px;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-weight: 500;
  outline: none;
}
.copy-btn {
  background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
  color: #fff;
  border: none;
  width: 50px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  box-shadow: 0 4px 14px var(--blue-glow);
  cursor: pointer;
}
.copy-btn .ic { width: 18px; height: 18px; }

/* ============================ TASKS ============================ */

.tasks-list { display: flex; flex-direction: column; gap: 10px; }
.task-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.task-section {
  margin: 18px 4px 4px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-50);
}

/* ============================ ONBOARDING GUIDE ============================ */
.guide-body { max-width: 440px; }
.guide-hero { text-align: center; margin-bottom: 18px; }
.guide-hero-logo {
  width: 60px; height: 60px;
  margin: 0 auto 12px;
  display: grid; place-items: center;
  border-radius: 18px;
  background: linear-gradient(140deg, var(--blue-400) 0%, var(--blue-600) 55%, var(--blue-700) 100%);
  color: #fff;
  box-shadow: 0 10px 28px var(--blue-glow), inset 0 1.5px 0 rgba(255,255,255,0.35);
}
.guide-hero-logo .ic { width: 30px; height: 30px; }
.guide-hero h3 {
  font-size: 22px; font-weight: 900; letter-spacing: -0.03em;
  background: linear-gradient(100deg, #fff 0%, var(--blue-200) 60%, var(--blue-400) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.guide-sub { margin-top: 4px; font-size: 13px; color: var(--fg-50); }
.guide-steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.guide-step {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.guide-ico {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  font-size: 20px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.14);
}
.guide-t { font-weight: 800; font-size: 14.5px; margin-bottom: 3px; }
.guide-d { font-size: 12.5px; line-height: 1.45; color: var(--fg-70); }
.guide-d b { color: var(--blue-300); }

/* ============================ HISTORY ============================ */
.history-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.hist-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.hist-ico { font-size: 18px; flex-shrink: 0; }
.hist-mid { flex: 1; min-width: 0; }
.hist-title { font-size: 13.5px; font-weight: 600; }
.hist-date { font-size: 11px; color: var(--fg-50); margin-top: 2px; }
.hist-amt { font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.hist-amt.pos { color: var(--green); }
.hist-amt.neg { color: var(--red); }

/* ============================ FX ============================ */
.confetti-piece {
  position: fixed; top: 28%; width: 9px; height: 9px; border-radius: 2px;
  pointer-events: none; z-index: 9999; opacity: 0.95;
  animation: confetti-fall 1.2s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
}
@keyframes confetti-fall {
  to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

/* Скелетоны загрузки */
.skel-row {
  height: 56px;
  margin-bottom: 8px;
  border-radius: var(--r-md);
  background: linear-gradient(100deg,
    var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%);
  background-size: 220% 100%;
  animation: skel-shimmer 1.2s linear infinite;
}
@keyframes skel-shimmer {
  from { background-position: 220% 0; }
  to { background-position: -120% 0; }
}
.task-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.task-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  flex: 1;
}
.task-reward {
  background: rgba(59, 130, 246, 0.16);
  color: var(--blue-300);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid rgba(59, 130, 246, 0.30);
}
.task-desc {
  font-size: 13px;
  color: var(--fg-50);
  margin-bottom: 14px;
  line-height: 1.5;
}
.task-do {
  width: 100%;
  height: 44px;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: -0.005em;
  box-shadow: 0 4px 14px var(--blue-glow);
  font-family: inherit;
  transition: transform 0.08s;
}
.task-do:active:not(:disabled) { transform: scale(0.98); }
.task-do.done {
  background: rgba(52, 211, 153, 0.12);
  color: var(--green);
  cursor: default;
  box-shadow: none;
  border: 1px solid rgba(52, 211, 153, 0.22);
}
.freeze-bar {
  margin-top: 10px;
  background: var(--surface-2);
  border-radius: var(--r-pill);
  height: 26px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
}
.freeze-bar-fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--blue-600), var(--blue-400));
  transition: width 0.4s ease;
  min-width: 2%;
}
.freeze-bar-label {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-90);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  pointer-events: none;
}
.freeze-bar-done {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(52, 211, 153, 0.10);
  border: 1px solid rgba(52, 211, 153, 0.20);
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
  text-align: center;
}
.empty {
  text-align: center;
  padding: 60px 24px;
  color: var(--fg-50);
  font-size: 14px;
}

/* ============================ TABBAR ============================ */

.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex;
  gap: 8px;
  /* min-height, а НЕ height: на айфонах с домашней полоской фиксированная
     высота резала подписи пополам — содержимое не помещалось в остаток после
     safe-area. Теперь панель растёт под контент.
     max() гарантирует нижний отступ и там, где safe-area = 0. */
  min-height: calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding: 10px 14px max(10px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  align-items: stretch;
  background: rgba(10, 15, 26, 0.82);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  z-index: 10;
}
.tab {
  flex: 1;
  min-width: 0;            /* без него длинная подпись распирает вкладку */
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 8px 4px;
  color: var(--fg-50);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 14px;
  transition: background 0.25s, color 0.25s, transform 0.1s, box-shadow 0.25s, border-color 0.25s;
  position: relative;
}
.tab-icon {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s;
}
.tab-icon svg { width: 14px; height: 14px; display: block; }
.tab.active {
  background: linear-gradient(135deg, var(--blue-400) 0%, var(--blue-600) 100%);
  border-color: rgba(255, 255, 255, 0.10);
  color: #fff;
  box-shadow:
    0 8px 22px var(--blue-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.tab.active .tab-icon {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.05);
}
.tab:active { transform: scale(0.95); }

/* ============================ TOAST ============================ */

.toast {
  position: fixed;
  bottom: calc(var(--tab-h) + 24px); left: 50%;
  transform: translateX(-50%);
  padding: 13px 22px;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  /* Выше ВСЕГО: игра идёт на 210, модалки языка и капчи на 250. При z-index 100
     тост прятался под ними — человек жал кнопку, получал отказ сервера и не
     видел причины: «ничего не происходит». */
  z-index: 400;
  max-width: 90%;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.toast.hidden { display: none; }
/* Диагностика сбоя рекламы: длинный технический текст — плашкой во всю ширину,
   моноширинным, с переносом длинных строк (иначе не читается на телефоне). */
.toast.toast-long {
  max-width: min(calc(100% - 24px), 520px);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 11.5px;
  font-weight: 500;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.45;
  text-align: left;
  word-break: break-word;
  cursor: pointer;
}
.toast.success {
  color: var(--emerald-300);
  border-color: rgba(59, 130, 246, 0.35);
}
.toast.error {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.35);
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ============================ LOADER ============================ */

.loader {
  position: fixed; inset: 0;
  background: rgba(10, 10, 12, 0.65);
  display: grid; place-items: center;
  z-index: 200;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.loader.hidden { display: none; }
.loader-spinner {
  width: 44px; height: 44px;
  border: 2.5px solid var(--border);
  border-top-color: var(--blue-500);
  border-right-color: var(--blue-500);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================ MAINTENANCE (service mode) ============================ */
.maintenance {
  position: fixed; inset: 0;
  z-index: 500;                 /* поверх всего: лоадера, модалок, табов */
  display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(59, 130, 246, 0.20) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  animation: mnt-fade 0.35s ease both;
}
.maintenance.hidden { display: none; }
@keyframes mnt-fade { from { opacity: 0; } to { opacity: 1; } }

.maintenance-card {
  width: 100%; max-width: 380px;
  text-align: center;
  padding: 40px 26px 32px;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  animation: mnt-pop 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes mnt-pop {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.maintenance-gear {
  width: 92px; height: 92px; margin: 0 auto 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--blue-300);
  background: radial-gradient(circle at 50% 40%, rgba(59, 130, 246, 0.22), rgba(59, 130, 246, 0.04) 70%);
  box-shadow: inset 0 0 0 1px var(--border-strong), 0 8px 30px var(--blue-glow);
}
.maintenance-gear svg { animation: mnt-spin 6s linear infinite; filter: drop-shadow(0 2px 6px var(--blue-glow)); }
@keyframes mnt-spin { to { transform: rotate(360deg); } }

.maintenance-title {
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--fg); margin-bottom: 10px;
}
.maintenance-text {
  font-size: 15px; line-height: 1.5;
  color: var(--fg-70);
  margin-bottom: 20px;
}

.maintenance-dots { display: flex; gap: 7px; justify-content: center; margin-bottom: 26px; }
.maintenance-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue-400);
  animation: mnt-bounce 1.3s ease-in-out infinite;
}
.maintenance-dots span:nth-child(2) { animation-delay: 0.18s; }
.maintenance-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes mnt-bounce {
  0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-6px); }
}

.maintenance-retry {
  appearance: none; border: none; cursor: pointer;
  padding: 13px 30px; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(90deg, var(--blue-600), var(--blue-500));
  box-shadow: 0 6px 20px var(--blue-glow);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.maintenance-retry:active { transform: scale(0.96); box-shadow: 0 3px 12px var(--blue-glow); }

.authgate-debug {
  text-align: left;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px; line-height: 1.5;
  color: var(--fg-70);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px; margin: 0 0 20px;
  white-space: pre-wrap; word-break: break-word;
  max-height: 180px; overflow: auto;
}

/* ============================ AMBASSADOR ============================ */
.amb-card .ref-title { margin-bottom: 8px; }
.amb-label {
  display: block;
  font-size: 12px; color: var(--fg-50);
  margin: 12px 0 5px;
}
.amb-input {
  width: 100%;
  padding: 11px 13px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--fg);
  font-size: 15px;
  font-family: inherit;
}
.amb-input:focus { outline: none; border-color: var(--blue-500); }
textarea.amb-input { resize: vertical; }
.amb-switch {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 4px;
  font-size: 14px; color: var(--fg-90);
  cursor: pointer;
}
.amb-switch input { width: 20px; height: 20px; accent-color: var(--blue-500); }
#amb-content .hidden { display: none; }
.amb-ch-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px;
  margin-bottom: 8px;
}
.amb-ch-head { display: flex; gap: 8px; align-items: center; }
.amb-ch-head .amb-ch-link { flex: 1; }
.amb-ch-del {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--fg-50);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 15px;
}
.amb-ch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.amb-add-ch {
  width: 100%;
  padding: 9px;
  border: 1px dashed var(--border-strong);
  background: transparent;
  color: var(--blue-300);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
/* Список заявок */
.amb-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.amb-item:active { transform: scale(0.985); border-color: var(--blue-500); }
.amb-item-t { font-size: 15px; font-weight: 700; color: var(--fg-90); }
.amb-item-s { font-size: 12px; color: var(--fg-50); margin-top: 3px; }
.amb-item-go { color: var(--fg-30); font-size: 20px; line-height: 1; }
.amb-back {
  display: inline-block;
  font-size: 13px; font-weight: 600;
  color: var(--blue-300);
  cursor: pointer;
  margin-bottom: 10px;
}

/* --- Обязательные поля / ошибки --- */
.amb-req {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: rgba(248, 113, 113, 0.15);
  color: #fca5a5;
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  vertical-align: 1px;
}
.amb-opt {
  display: inline-block; margin-left: 6px;
  font-size: 9px; font-weight: 700; color: var(--fg-30);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.amb-hint-i { float: right; font-size: 11px; color: var(--fg-30); font-weight: 600; }
.amb-hint {
  font-size: 12.5px; color: var(--fg-50); line-height: 1.5;
  margin-bottom: 4px;
}
.amb-input.err {
  border-color: var(--red) !important;
  background: rgba(248, 113, 113, 0.07);
}
.amb-err-box {
  display: none;
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.4);
  color: #fca5a5;
  border-radius: var(--r-sm);
  padding: 11px 13px;
  font-size: 13px; line-height: 1.45;
  margin-bottom: 12px;
}
.amb-err-box.show {
  display: block;
  animation: amb-shake 0.32s ease;
  opacity: 1;
  transition: opacity .35s ease, transform .35s ease;
}
.amb-err-box.show.fade { opacity: 0; transform: translateY(-4px); }
.amb-err-hint { color: rgba(252, 165, 165, 0.65); font-size: 11.5px; }
@keyframes amb-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* --- Бейдж статуса --- */
.amb-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700;
}
.amb-badge.pending  { background: rgba(251, 191, 36, 0.15); color: var(--gold); }
.amb-badge.approved { background: rgba(52, 211, 153, 0.15); color: var(--green); }
.amb-badge.rejected { background: rgba(248, 113, 113, 0.15); color: var(--red); }
.amb-badge.changed  { background: rgba(59, 130, 246, 0.18); color: var(--blue-300); }
.amb-item-pct { font-size: 12px; color: var(--fg-50); margin-left: 6px; }

/* --- Ежедневный промокод амбассадора --- */
.amb-promo {
  background: linear-gradient(135deg, rgba(59,130,246,0.16), rgba(168,85,247,0.12));
  border: 1px solid rgba(59,130,246,0.35);
  border-radius: var(--r-lg);
  padding: 14px;
  margin-bottom: 14px;
  text-align: center;
}
.amb-promo.got {
  background: linear-gradient(135deg, rgba(52,211,153,0.14), rgba(59,130,246,0.10));
  border-color: rgba(52,211,153,0.35);
}
.amb-promo-t { font-size: 14px; font-weight: 700; color: var(--fg-90); }
.amb-promo-d { font-size: 12px; color: var(--fg-50); margin-top: 4px; }
.amb-promo-code {
  margin: 10px 0 6px;
  padding: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--fg);
  background: rgba(0,0,0,0.28);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  /* -webkit- обязателен: в body стоит -webkit-user-select:none, и без префикса
     здесь он побеждал — в Telegram WebView (WebKit/Blink) код нельзя было ни
     выделить, ни скопировать вручную. Голого user-select:all не хватало. */
  user-select: all;
  -webkit-user-select: all;
  -webkit-touch-callout: default;   /* long-tap → меню «Копировать» на iOS */
}
.amb-promo-code:active { transform: scale(0.98); }
.amb-promo-timer { font-size: 12px; color: var(--fg-50); margin-top: 6px; }
.amb-promo-timer b { color: #f97316; font-family: 'JetBrains Mono', monospace; }

/* --- Детали заявки --- */
.amb-d-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.amb-kv {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.amb-kv span { color: var(--fg-50); font-size: 13px; }
.amb-kv b { color: var(--fg-90); }
.amb-kv.accent b { color: var(--blue-300); }
.amb-ch-view {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  margin-bottom: 6px;
}
.amb-ch-view-l { font-size: 13px; color: var(--fg-90); word-break: break-all; }
.amb-ch-view-m { font-size: 11.5px; color: var(--fg-50); margin-top: 3px; }

/* ============================ MODAL (bottom sheet) ============================ */

.modal {
  position: fixed; inset: 0;
  z-index: 150;
  display: grid;
  place-items: end center;
  padding: 0;
}
.modal.hidden { display: none; }
/* Выбор языка должен быть ВЫШЕ лоадера (z-index:200), иначе спиннер перекроет
   кнопки выбора на первом входе и приложение зависнет на загрузке. */
#lang-modal, #captcha-modal { z-index: 250; place-items: center; }
.captcha-q {
  font-size: 32px; font-weight: 900; text-align: center;
  margin: 8px 0 14px; letter-spacing: 0.02em; color: var(--fg);
}
/* Капча теперь SVG-картинка (цифры нарисованы отрезками, текста в разметке нет).
   Даём ей рамку и фон, чтобы читалась как поле для ввода, а не как декор. */
.captcha-q svg {
  display: block;
  width: 100%;
  max-width: 230px;
  height: auto;
  margin: 0 auto;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;          /* не выделяется и не тащится как картинка */
}
.captcha-err { color: #f87171; font-size: 12.5px; min-height: 16px; margin-top: 8px; text-align: center; }
.modal-bg {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.60);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-body {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border-top: 1px solid var(--border-strong);
  border-radius: 24px 24px 0 0;
  padding: 14px 22px calc(22px + env(safe-area-inset-bottom));
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.5);
  max-height: 85vh;
  overflow-y: auto;
  animation: sheet-in 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.modal-body::before {
  content: "";
  display: block;
  width: 36px; height: 4px;
  background: var(--border-strong);
  border-radius: 100px;
  margin: 0 auto 14px;
}
@keyframes sheet-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.modal-header h3 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.close-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--fg-70);
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.close-btn .ic { width: 14px; height: 14px; }

/* ============================ NEWS ============================ */

.news-list { display: flex; flex-direction: column; gap: 10px; }
.news-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.news-item-title {
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.news-item-text {
  font-size: 13px;
  color: var(--fg-50);
  white-space: pre-wrap;
  line-height: 1.55;
}

/* ============================ LEADERBOARD ============================ */

.me-rank {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.06));
  border: 1px solid rgba(59, 130, 246, 0.35);
  border-radius: var(--r-md);
  padding: 12px 16px;
  margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700;
  font-size: 14px;
}
.me-rank.hidden { display: none; }

/* Мест стало тридцать, поэтому список прокручивается внутри окна: иначе
   модалка вырастает выше экрана и до нижних строк не добраться.
   overscroll-behavior не даёт прокрутке "провалиться" на страницу под окном. */
.leader-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 58vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Обводка рисуется тенью и вылезает за границу строки — без внутреннего
     отступа контейнер срезал бы её по краям. */
  padding: 3px;
  scrollbar-width: thin;
}
.leader-list::-webkit-scrollbar { width: 5px; }
.leader-list::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 3px;
}
.leader-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.leader-row.gold {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(251, 191, 36, 0.04));
  border-color: rgba(251, 191, 36, 0.40);
}
.leader-row.silver {
  background: linear-gradient(135deg, rgba(203, 213, 225, 0.14), rgba(203, 213, 225, 0.03));
  border-color: rgba(203, 213, 225, 0.35);
}
.leader-row.bronze {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.16), rgba(217, 119, 6, 0.04));
  border-color: rgba(217, 119, 6, 0.35);
}
/* Обводка призовых мест. Одной рамки в 1px мало: в списке из тридцати строк
   тройка лидеров должна читаться сразу, не вчитываясь в номера. */
.leader-row.gold {
  box-shadow: 0 0 0 1.5px rgba(251, 191, 36, 0.55), 0 6px 18px rgba(251, 191, 36, 0.18);
}
.leader-row.silver {
  box-shadow: 0 0 0 1.5px rgba(203, 213, 225, 0.45), 0 6px 16px rgba(203, 213, 225, 0.12);
}
.leader-row.bronze {
  box-shadow: 0 0 0 1.5px rgba(217, 119, 6, 0.45), 0 6px 16px rgba(217, 119, 6, 0.14);
}
/* Своя строка. Главный вопрос к топу — "а где я"; синяя обводка отвечает на
   него без чтения. Тень отличается от призовых цветом, а не толщиной,
   поэтому первое место остаётся первым, даже если оно же и своё. */
.leader-row.me {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 1.5px var(--blue-500), 0 6px 18px rgba(59, 130, 246, 0.22);
}
.leader-row.me .leader-name::after {
  content: "•";
  color: var(--blue-400);
  margin-left: 6px;
  font-weight: 900;
}
.leader-rank {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-weight: 800;
  font-size: 12px;
  background: var(--surface-3);
  flex-shrink: 0;
}
.leader-row.gold .leader-rank { background: var(--gold); color: #1a1110; }
.leader-row.silver .leader-rank { background: #e2e8f0; color: #1a1110; }
.leader-row.bronze .leader-rank { background: #d97706; color: #fff; }
.leader-name {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.leader-ads {
  font-weight: 800;
  color: var(--emerald-400);
  font-size: 13px;
}

/* ============================ AD MODAL ============================ */

.ad-body {
  text-align: center;
  padding-bottom: 30px;
}
.ad-countdown {
  font-size: 84px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--emerald-200), var(--emerald-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 6px 32px var(--emerald-glow));
  margin: 24px 0 14px;
  letter-spacing: -0.04em;
  line-height: 1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.progress {
  height: 6px;
  background: var(--surface-3);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-top: 12px;
}
.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--emerald-500), var(--emerald-300));
  border-radius: var(--r-pill);
  transition: width 0.5s ease;
  box-shadow: 0 0 8px var(--emerald-glow);
}

/* ===== Амбассадор: прогресс задания на канал ===== */
.amb-task {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.amb-task.done { border-color: rgba(52, 211, 153, 0.4); }
.amb-task-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.amb-task-t { font-size: 13px; font-weight: 700; }
.amb-task-n { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.amb-task-bar {
  height: 6px; margin: 9px 0 7px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px; overflow: hidden;
}
.amb-task-bar > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  border-radius: 99px;
  transition: width .4s ease;
}
.amb-task.done .amb-task-bar > i { background: linear-gradient(90deg, #10b981, #34d399); }
.amb-task-d { font-size: 11.5px; color: var(--fg-50); }


/* ===== Список рефералов (модалка) ===== */
.ref-sum {
  display: flex; gap: 10px; text-align: center;
  padding: 12px 0 14px; border-bottom: 1px solid var(--border);
}
.ref-sum > div { flex: 1; }
.ref-list { max-height: 46vh; overflow-y: auto; margin-top: 6px; }
.ref-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px; margin-bottom: 6px;
  background: rgba(255, 255, 255, .04);
}
.ref-row-main { flex: 1; min-width: 0; }
.ref-row-name {
  display: block; font-weight: 600; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ref-row-sub { display: block; font-size: 11px; color: var(--fg-50); margin-top: 2px; }
.ref-row-earned { font-weight: 700; font-size: 13px; color: #4ade80; white-space: nowrap; }

/* Третичная кнопка: приглушённая поверхность вместо заливки. Нужна там, где
   синяя кнопка спорила бы с основным действием карточки (например «Мои
   рефералы» рядом со «Стать амбассадором»). */
.btn-ghost {
  background: var(--surface-3);
  color: var(--fg-90);
  font-weight: 700;
  border: 1px solid var(--fg-08);
  box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.18);
}
.btn-ghost:active:not(:disabled) {
  background: var(--surface-2);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.28);
}

/* ===== Ежедневный чек-ин: сетка дней ===== */
.streak-sub {
  font-size: 13px; line-height: 1.45; color: var(--fg-70);
  text-align: center; margin: 2px 0 16px;
}
/* 12 колонок: верхний ряд 4 ячейки по 3, нижний 3 ячейки по 4. Так оба ряда
   заполняют ширину целиком и выравниваются сами. Прошлый вариант двигал пятую
   ячейку через margin-left и разъезжался. */
.streak-grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 8px; margin-bottom: 16px;
}
.sk-cell { grid-column: span 3; }
.sk-cell:nth-child(n + 5) { grid-column: span 4; }

.sk-cell {
  position: relative; border-radius: 16px; padding: 14px 4px 11px;
  background: var(--surface-2); text-align: center;
  border: 1.5px solid var(--fg-08);
  transition: transform .15s, box-shadow .2s;
}
/* Пройденный день — приглушён, чтобы взгляд цеплялся за текущий. */
.sk-cell.done {
  background: rgba(34, 197, 94, .10);
  border-color: rgba(34, 197, 94, .35);
}
.sk-cell.done .sk-cell-val { color: #4ade80; }
.sk-cell.today {
  border-color: #fff;
  background: linear-gradient(160deg, var(--blue-400), var(--blue-700));
  box-shadow: 0 8px 24px var(--blue-glow);
  transform: translateY(-2px);
}
.sk-cell.last:not(.today):not(.done) {
  background: linear-gradient(150deg, rgba(34, 211, 238, .18), rgba(99, 102, 241, .22));
  border-color: rgba(99, 102, 241, .45);
}
.sk-cell-badge {
  position: absolute; top: -7px; right: -5px;
  min-width: 21px; height: 21px; padding: 0 6px;
  border-radius: 11px; background: var(--surface-3); color: var(--fg-70);
  font-size: 11px; font-weight: 800; line-height: 21px;
  border: 1.5px solid var(--bg);
}
.sk-cell.done .sk-cell-badge { background: #22c55e; color: #fff; }
.sk-cell.today .sk-cell-badge { background: #ef4444; color: #fff; }
.sk-cell-ico { font-size: 19px; line-height: 1; margin-bottom: 5px; }
.sk-cell-val { font-size: 15px; font-weight: 800; color: var(--fg-90); }
.sk-cell.today .sk-cell-val { color: #fff; }
.sk-cell-day { font-size: 10px; color: var(--fg-50); margin-top: 3px; }
.sk-cell.today .sk-cell-day { color: rgba(255, 255, 255, .85); }

.streak-claim { width: 100%; margin-bottom: 14px; }
.streak-claim.claimed {
  background: var(--surface-3);
  color: var(--fg-50);
  box-shadow: none;
}

/* Общий счётчик реклам — теперь <button> (тап открывает раскладку по сетям).
   Без сброса браузер рисует ему свою рамку и фон: ровно так уже вылезала
   белая кнопка, когда класс не был описан. Наследуемся от .ad-limit. */
.ad-limit-total {
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform .12s, background .2s;
}
.ad-limit-total:active { transform: scale(0.98); background: var(--surface-3); }

/* ===== Лимит реклам: полоса прогресса ===== */
.ad-progress {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  text-align: left;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.ad-progress-track {
  height: 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--fg-08);
  overflow: hidden;          /* заливка не должна вылезать за скруглённые края */
}
.ad-progress-fill {
  height: 100%;
  width: 0;                  /* ставится из JS по факту показов */
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue-400), var(--blue-600));
  box-shadow: 0 0 12px var(--blue-glow);
  transition: width .45s ease;
}
/* Лимит выбран — полоса гаснет, чтобы не выглядела «ещё можно». */
.ad-progress.blocked .ad-progress-fill {
  background: linear-gradient(90deg, var(--fg-30), var(--fg-15));
  box-shadow: none;
}
.ad-progress-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
}
.ad-progress-name { font-size: 12px; color: var(--fg-50); }
.ad-progress-count { font-size: 13px; color: var(--fg-70); white-space: nowrap; }
.ad-progress-count b { color: var(--fg); font-weight: 800; }
.ad-progress:active .ad-progress-track { border-color: var(--fg-30); }

/* ===== Статистика заказчика заданий ===== */
.sp-sum {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
  margin: 4px 0 14px;
}
.sp-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--fg-08);
}
.sp-row:last-child { border-bottom: none; }
.sp-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sp-row-title {
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;      /* длинное название не должно ломать строку статуса */
}
.sp-on, .sp-off {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.sp-on  { color: #4ade80; background: rgba(74, 222, 128, .12); }
.sp-off { color: var(--fg-50); background: var(--fg-08); }
.sp-row-nums {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--fg-50);
}
.sp-row-nums b {
  color: var(--fg);
  font-size: 15px;
  font-weight: 800;
  margin-right: 3px;
  font-variant-numeric: tabular-nums;
}
.sp-row-sub { margin-top: 6px; font-size: 11px; color: var(--fg-50); }
.sp-left { color: var(--fg-70); }

/* Строка ожидания под полосой лимита (появляется только когда ждать надо). */
.ad-progress-wait {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 5px;
  font-size: 11px;
  color: var(--fg-50);
}
.ad-progress-wait .ad-limit-timer {
  color: #fb923c;
  font-weight: 800;
  font-variant-numeric: tabular-nums;   /* цифры не прыгают при обратном отсчёте */
}


/* ===================== БУКС (ручные задания) ===================== */
.bk-card { cursor: pointer; }
.bk-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bk-card-title {
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bk-card-sub { margin-top: 6px; font-size: 13px; color: #4ade80; font-weight: 700; }
.bk-card-reason {
  margin-top: 6px;
  font-size: 11px;
  color: #f87171;
  line-height: 1.4;
}
.bk-badge {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.bk-wait { color: #fbbf24; background: rgba(251, 191, 36, .12); }
.bk-ok   { color: #4ade80; background: rgba(74, 222, 128, .12); }
.bk-bad  { color: #f87171; background: rgba(248, 113, 113, .12); }

/* Модалка задания */
.bk-reward {
  font-size: 30px;
  font-weight: 900;
  color: #4ade80;
  text-align: center;
  margin: 2px 0 12px;
  font-variant-numeric: tabular-nums;
}
.bk-conditions {
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-70);
  background: var(--surface-2);
  border: 1px solid var(--fg-08);
  border-radius: var(--r-lg);
  padding: 12px 14px;
  margin-bottom: 12px;
  white-space: pre-wrap;        /* переносы из условий админа сохраняем */
  word-break: break-word;
}
.bk-hint {
  font-size: 11px;
  color: var(--fg-50);
  text-align: center;
  margin: 10px 0;
  line-height: 1.5;
}
.bk-file-name {
  font-size: 12px;
  color: var(--fg-70);
  text-align: center;
  margin: 8px 0;
  word-break: break-all;
}
.bk-comment {
  width: 100%;
  box-sizing: border-box;       /* иначе padding вылезает за ширину модалки */
  margin: 8px 0;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--fg);
  background: var(--surface-2);
  border: 1px solid var(--fg-08);
  border-radius: var(--r-lg);
  resize: none;
}
.bk-comment:focus { outline: none; border-color: var(--fg-30); }
.bk-status {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--fg-08);
  font-size: 12px;
  color: var(--fg-70);
  text-align: center;
}


/* Подпись вкладки. Стилей у неё не было вовсе, а с четвёртой вкладкой (Букс)
   на каждую осталось ~25% ширины — длинные слова вроде «Заработать» начали
   вылезать за края. Обрезаем многоточием. */
.tab-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}


/* ===================== ЗАКАЗ ЗАДАНИЯ ===================== */
.bk-half { flex: 1 1 0; min-width: 0; }
.bko-label {
  font-size: 11px;
  color: var(--fg-50);
  margin: 12px 0 5px;
  font-weight: 600;
}
.bko-input {
  width: 100%;
  box-sizing: border-box;      /* без него padding распирает модалку */
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--fg);
  background: var(--surface-2);
  border: 1px solid var(--fg-08);
  border-radius: var(--r-lg);
  resize: none;
}
.bko-input:focus { outline: none; border-color: var(--fg-30); }
.bko-row { display: flex; gap: 10px; }
.bko-col { flex: 1 1 0; min-width: 0; }
.bko-kinds {
  display: flex;
  gap: 6px;
  overflow-x: auto;            /* пять типов не влезают в ширину телефона */
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.bko-kind {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 10px;
  min-width: 64px;
  border-radius: var(--r-lg);
  border: 1px solid var(--fg-08);
  background: var(--surface-2);
  color: var(--fg-50);
  font: inherit;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.bko-kind.on {
  border-color: var(--blue-400);
  color: var(--fg);
  background: rgba(59, 130, 246, .12);
}
.bko-kind-ic { font-size: 18px; line-height: 1; }
.bko-kind-t { font-size: 10px; font-weight: 700; }
.bko-quote {
  margin: 14px 0 4px;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--fg-08);
  font-size: 13px;
}
.bko-quote:empty { display: none; }
.bko-q-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--fg-50);
  padding: 3px 0;
}
.bko-q-row b { color: var(--fg); font-variant-numeric: tabular-nums; }
.bko-q-total {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--fg-08);
  color: var(--fg-70);
}
.bko-q-total b { color: #4ade80; font-size: 15px; }
.bko-q-bad { color: #f87171; }
.bko-q-bad b { color: #f87171; }

.bko-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bko-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--fg-08);
}
.bko-row:last-child { border-bottom: none; }
.bko-cancel {
  margin-top: 8px;
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #f87171;
  background: rgba(248, 113, 113, .1);
  border: 1px solid rgba(248, 113, 113, .3);
  border-radius: 999px;
  cursor: pointer;
}
.bko-cancel:disabled { opacity: .5; }


/* Автопросмотр — служебная кнопка админа, нарочно не похожа на обычные:
   её не должно тянуть нажать по привычке. */
.btn-auto {
  background: linear-gradient(135deg, rgba(168, 85, 247, .18), rgba(59, 130, 246, .12));
  border: 1px dashed rgba(168, 85, 247, .5);
  color: #c084fc;
}
.btn-auto.on {
  background: linear-gradient(135deg, rgba(239, 68, 68, .22), rgba(249, 115, 22, .14));
  border-color: rgba(239, 68, 68, .6);
  color: #fca5a5;
}


/* ===================== Кошелёк заказчика ===================== */
.bk-wallet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 16px 12px;
  padding: 14px 16px;
}
.bk-wallet-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bk-wallet-cap {
  font-size: 11px;
  color: var(--fg-50);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.bk-wallet-sum {
  font-size: 22px;
  font-weight: 900;
  color: #4ade80;
  font-variant-numeric: tabular-nums;
}
.bk-topup {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-400), var(--blue-600));
  border: none;
  border-radius: 999px;
  cursor: pointer;
}
.bk-topup:active { transform: scale(0.96); }

.tu-chips { display: flex; gap: 8px; margin-top: 10px; }
.tu-chip {
  flex: 1 1 0;
  padding: 8px 0;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-70);
  background: var(--surface-2);
  border: 1px solid var(--fg-08);
  border-radius: var(--r-lg);
  cursor: pointer;
}
.tu-chip:active { border-color: var(--blue-400); color: var(--fg); }
.tu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--fg-08);
  font-size: 13px;
}
.tu-row:last-child { border-bottom: none; }
.tu-acts { display: flex; gap: 8px; align-items: center; }
.tu-pay, .tu-chk {
  padding: 5px 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
}
.tu-pay { color: #60a5fa; background: rgba(59, 130, 246, .12); border: 1px solid rgba(59, 130, 246, .3); }
.tu-chk { color: #4ade80; background: rgba(74, 222, 128, .1); border: 1px solid rgba(74, 222, 128, .3); }
.tu-chk:disabled { opacity: .5; }


/* ============ Карточка буксового задания (переработана) ============
   Было: строка названия + цена мелким текстом, все карточки одинаково
   плоские и неотличимые. Стало: крупная иконка, название с превью условий
   и цена справа — видно, за что платят, не открывая. */
.bk-card {
  padding: 14px;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color .15s ease, transform .12s ease;
}
.bk-card:active { transform: scale(0.99); border-color: var(--fg-30); }
.bk-card-top { display: flex; gap: 12px; align-items: flex-start; }
.bk-card-ico {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 22px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(59, 130, 246, .18), rgba(59, 130, 246, .06));
  border: 1px solid rgba(59, 130, 246, .25);
}
.bk-card-mid { flex: 1 1 auto; min-width: 0; }
.bk-card-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.3;
  /* Две строки максимум: длинное название иначе растягивает карточку. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bk-card-desc {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg-50);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bk-card-pay {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 900;
  color: #4ade80;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bk-card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--fg-08);
}
.bk-card-left {
  margin-left: auto;
  font-size: 11px;
  color: var(--fg-50);
}
.bk-free { color: #60a5fa; background: rgba(59, 130, 246, .12); }
.bk-card-reason {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(248, 113, 113, .08);
  border: 1px solid rgba(248, 113, 113, .2);
  font-size: 11px;
  line-height: 1.4;
  color: #f87171;
}


/* Статус «на доработку» — отдельный цвет: это не отказ, работу можно
   доделать, и путать его с красным «отклонено» нельзя. */
.bk-redo { color: #fbbf24; background: rgba(251, 191, 36, .14); }

/* ===== Вкладка Букс: разделы и воздух =====
   Было: три кнопки подряд и сразу список — экран читался как свалка.
   Стало: действия сверху, затем подписанный раздел со списком. */
.bk-section {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 16px 10px;
}
.bk-section-t {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--fg-50);
}
.bk-section-n {
  font-size: 11px;
  color: var(--fg-30);
  font-variant-numeric: tabular-nums;
}
#buks-list { padding: 0 16px; }
/* Последняя карточка не должна упираться в таббар. */
#buks-list > :last-child { margin-bottom: 18px; }


/* Бейджи занятости слотов. Синий «свободно» и серый «занято» должны
   различаться с одного взгляда — от этого зависит, пойдёт ли человек
   снимать видео впустую. */
.bk-busy { color: var(--fg-50); background: var(--fg-08); }
.bk-hold { color: #4ade80; background: rgba(74, 222, 128, .14); }
/* Бронь на исходе. Зелёный бейдж читается как «всё хорошо», поэтому под конец
   он меняет цвет и пульсирует — иначе человек досматривает ролик и теряет слот. */
.bk-hold-warn {
  color: #fbbf24;
  background: rgba(251, 191, 36, .16);
  animation: bk-hold-pulse 1.4s ease-in-out infinite;
}
@keyframes bk-hold-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}


/* ===== Кошелёк заказчика: баланс + действия одним блоком ===== */
.bk-wallet {
  display: block;
  margin: 0 16px 4px;
  padding: 16px;
}
.bk-wallet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.bk-wallet-acts {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--fg-08);
}
.bk-act {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-70);
  background: var(--surface-2);
  border: 1px solid var(--fg-08);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-act:active { transform: scale(0.98); }
.bk-act:hover { border-color: var(--fg-30); color: var(--fg); }
.bk-act-ic { font-size: 15px; line-height: 1; opacity: .7; }

/* Рекламный баланс под основной суммой. Приглушённый и мельче: это не
   «ещё деньги», а отдельный кошелёк, который нельзя вывести. */
.balance-ad {
  margin-top: 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #4ade80;
  opacity: .85;
  font-variant-numeric: tabular-nums;
}


/* ===== Карточка заказа в «Мои заказы» =====
   Было: название, статус, цена и кнопка возврата в одной строке — кнопка
   с суммой не помещалась и рвалась на три строки поверх текста. Стало:
   сверху название со статусом, ниже цена, полоса выполнения и кнопка
   во всю ширину. */
.bko-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--fg-08);
}
.bko-item:last-child { border-bottom: none; }
.bko-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bko-item-ico { flex: 0 0 auto; font-size: 17px; line-height: 1; }
.bko-item-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bko-item-price {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #4ade80;
  font-variant-numeric: tabular-nums;
}
.bko-x { color: var(--fg-30); font-weight: 400; margin: 0 2px; }
.bko-bar {
  height: 6px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--fg-08);
  overflow: hidden;
}
.bko-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue-400), var(--blue-600));
  transition: width .4s ease;
}
.bko-item-nums {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
  font-size: 11px;
  color: var(--fg-50);
}
.bko-item-nums b { color: var(--fg-70); font-variant-numeric: tabular-nums; }
.bko-cancel {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #f87171;
  background: rgba(248, 113, 113, .08);
  border: 1px solid rgba(248, 113, 113, .28);
  border-radius: var(--r-lg);
  cursor: pointer;
  /* Кнопка во всю ширину — длинный текст с суммой больше не рвётся. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bko-cancel:active { transform: scale(0.99); }
.bko-cancel:disabled { opacity: .5; }


/* Выбор способа оплаты. Появляется, только когда способов больше одного. */
.tu-provs { display: flex; gap: 8px; }
.tu-prov {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-50);
  background: var(--surface-2);
  border: 1px solid var(--fg-08);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.tu-prov.on {
  border-color: var(--blue-400);
  color: var(--fg);
  background: rgba(59, 130, 246, .12);
}
.tu-prov-ic { font-size: 15px; line-height: 1; }


/* Состав платёжек выбранного способа. */
.tu-prov-hint {
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--fg-50);
}
/* .tu-pay стал <button> — снимаем оформление по умолчанию, чтобы он выглядел
   так же, как выглядела ссылка. */
button.tu-pay {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}


/* Ссылка на оплату под счётом: мелкая, но выделяемая и копируемая по тапу.
   Нужна как запасной путь — WebView Telegram умеет молча не открывать
   внешние адреса, и без неё оплата выглядит как мёртвая кнопка. */
.tu-link {
  margin: 4px 0 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--fg-08);
  font-size: 10px;
  line-height: 1.4;
  color: var(--fg-50);
  word-break: break-all;
  cursor: pointer;
  user-select: all;            /* тап выделяет адрес целиком */
  -webkit-user-select: all;
}


/* ============================ ОНБОРДИНГ ============================
   Показывается один раз при первом запуске. Размеры относительные, а не
   фиксированные 430x840 из макета: мини-аппа открывается и на 320px, и в
   десктопном Telegram, и жёсткая сетка там разъезжается. */
.onb {
  position: fixed;
  inset: 0;
  z-index: 200;                 /* выше таббара и модалок */
  display: flex;
  flex-direction: column;
  background: var(--bg, #0A0E1C);
  overflow: hidden;
}
.onb-glow, .onb-glow2 {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.onb-glow {
  width: 460px; height: 460px; top: -220px; right: -150px;
  background: radial-gradient(circle, rgba(76,125,255,.18), rgba(76,125,255,0) 70%);
}
.onb-glow2 {
  width: 380px; height: 380px; bottom: -180px; left: -140px;
  background: radial-gradient(circle, rgba(255,107,61,.12), rgba(255,107,61,0) 70%);
}
.onb-skip {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: 18px;
  z-index: 3;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-50);
  background: none;
  border: none;
  cursor: pointer;
}

.onb-track {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  width: 500%;                  /* пять слайдов */
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.onb-slide {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 30px 12px;
  gap: 4px;
}
.onb-art {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  position: relative;
}
.onb-halo {
  position: absolute;
  width: 230px; height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,61,.22), rgba(255,107,61,0) 68%);
}
.onb-halo.blue {
  background: radial-gradient(circle, rgba(76,125,255,.24), rgba(76,125,255,0) 68%);
}
.onb-coin {
  position: absolute;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  color: #7A4A00;
  background: radial-gradient(circle at 35% 30%, #FFE39A, #FFC24B 60%, #E39A18);
  box-shadow: 0 5px 16px rgba(255,180,50,.4);
  animation: onb-float 3.6s ease-in-out infinite;
}
.onb-coin:nth-of-type(3) { animation-delay: -1.2s; }
.onb-coin:nth-of-type(4) { animation-delay: -2.4s; }
@keyframes onb-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.onb-flame {
  position: relative;
  width: 96px; height: 96px;
  filter: drop-shadow(0 20px 44px rgba(255,90,30,.5));
  animation: onb-pulse 2.8s ease-in-out infinite;
}
@keyframes onb-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.onb-tile {
  position: relative;
  width: 116px; height: 116px;
  border-radius: 32px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--blue-400), var(--blue-600));
  box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.22);
}
.onb-tile .ic { width: 54px; height: 54px; color: #fff; }
.onb-wm { position: relative; display: flex; align-items: center; gap: 12px; }
.onb-wm svg { width: 44px; height: 44px; }
.onb-wm span { font-size: 36px; font-weight: 900; letter-spacing: 1px; color: #fff; }

/* Карточка-превью внутри слайда */
.onb-card {
  position: relative;
  width: min(262px, 78vw);
  padding: 16px;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 26px 60px rgba(0,0,0,.5);
  text-align: left;
}
.onb-card-l {
  display: block;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--fg-50);
}
.onb-card-b {
  display: block;
  margin: 6px 0 12px;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -1px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.onb-card-bar {
  display: block;
  height: 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.onb-card-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--blue-400), var(--blue-600));
  animation: onb-fill 1.6s cubic-bezier(.22,1,.36,1) .3s forwards;
}
@keyframes onb-fill { to { width: 64%; } }
.onb-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
  width: 100%;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue-400), var(--blue-600));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  /* Стал <button> — без сброса браузер дорисует свою рамку и шрифт. */
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: transform .12s ease, filter .2s ease;
}
.onb-card-btn:active { transform: scale(0.97); }
.onb-card-btn:disabled { cursor: default; filter: saturate(.6) brightness(.9); }

/* Пульс-приглашение: без него кнопка в макете читается как картинка, и человек
   не догадывается, что её можно нажать. Гаснет после первого запуска демо. */
@keyframes onb-invite {
  0%, 100% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.55); }
  50%      { box-shadow: 0 0 0 9px rgba(96, 165, 250, 0); }
}
.onb-card-btn.invite { animation: onb-invite 1.9s ease-out infinite; }

/* Прилетающая награда над карточкой — та же «+$» реакция, что и в приложении. */
.onb-reward {
  position: absolute;
  left: 50%;
  bottom: 54px;
  transform: translateX(-50%);
  font-size: 17px;
  font-weight: 900;
  color: #4ade80;
  text-shadow: 0 2px 12px rgba(74, 222, 128, .5);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.onb-reward.fly { animation: onb-reward-fly 1.25s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes onb-reward-fly {
  0%   { opacity: 0; transform: translate(-50%, 6px)   scale(.85); }
  22%  { opacity: 1; transform: translate(-50%, -6px)  scale(1.06); }
  70%  { opacity: 1; transform: translate(-50%, -26px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -44px) scale(.97); }
}

/* Точки-переключатели: теперь по ним можно перейти к слайду, а не только
   смотреть. Зона нажатия больше самой точки — пальцем в 7px не попасть. */
.onb-dots i {
  cursor: pointer;
  position: relative;
}
.onb-dots i::after {
  content: "";
  position: absolute;
  inset: -11px -7px;
}
.onb-task { display: flex; align-items: center; gap: 11px; }
.onb-task-i {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: var(--surface-2);
}
.onb-task-i .ic { width: 21px; height: 21px; color: var(--blue-400); }
.onb-task-m { flex: 1 1 auto; min-width: 0; }
.onb-task-m b { display: block; font-size: 13px; font-weight: 700; color: #fff; }
.onb-task-m i { display: block; margin-top: 3px; font-size: 10px; font-style: normal; color: var(--fg-50); }
.onb-task-p { flex: 0 0 auto; font-size: 13px; font-weight: 800; color: #4ade80; }
.onb-task-f { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.onb-task-left { margin-left: auto; font-size: 10px; color: var(--fg-50); }

.onb-h {
  font-size: 25px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.4px;
  color: #fff;
}
.onb-o { color: #FF6B3D; }
.onb-b { color: #6E97FF; }
.onb-p {
  margin-top: 12px;
  max-width: 340px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-50);
}
.onb-pill {
  display: inline-flex;
  align-items: center;
  margin-top: 14px;
  padding: 8px 14px;
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 700;
}
.onb-pill.green { color: #4ade80; background: rgba(74,222,128,.12); border: 1px solid rgba(74,222,128,.28); }
.onb-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  padding: 10px 15px;
  border-radius: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.onb-chip-i {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: grid; place-items: center;
  background: #229ED9;
}
.onb-chip-i .ic { width: 13px; height: 13px; color: #fff; }

.onb-foot {
  flex: 0 0 auto;
  padding: 0 28px max(24px, env(safe-area-inset-bottom));
  position: relative;
  z-index: 3;
}
.onb-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 18px; }
.onb-dots i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  transition: width .35s ease, background .35s ease;
}
.onb-dots i.on { width: 22px; border-radius: 4px; background: #FF6B3D; }

/* Низкие экраны: на 640px в высоту слайд не помещался и текст уезжал под
   кнопку. Ужимаем картинку и заголовок, а не режем содержимое. */
@media (max-height: 700px) {
  .onb-slide { padding-top: 40px; }
  .onb-halo { width: 170px; height: 170px; }
  .onb-flame { width: 74px; height: 74px; }
  .onb-tile { width: 92px; height: 92px; border-radius: 26px; }
  .onb-tile .ic { width: 42px; height: 42px; }
  .onb-h { font-size: 21px; }
  .onb-p { margin-top: 8px; font-size: 13px; }
  .onb-card-b { font-size: 28px; margin: 4px 0 10px; }
}

/* Промокод в профиле. Кликабельная карточка-строка: иконка · текст · стрелка.
   Раньше это была широкая кнопка на экране заданий — в профиле уместнее ряд. */
button.promo-card {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .15s ease, transform .12s ease;
}
button.promo-card:active { transform: scale(.99); border-color: var(--fg-30); }
.promo-ico {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 13px;
  display: grid; place-items: center;
  color: var(--gold, #FFC24B);
  background: linear-gradient(160deg, rgba(255,194,75,.18), rgba(255,194,75,.06));
  border: 1px solid rgba(255,194,75,.25);
}
.promo-ico .ic { width: 22px; height: 22px; }
.promo-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.promo-title { font-size: 15px; font-weight: 700; color: var(--fg); }
.promo-sub { font-size: 12px; color: var(--fg-50); }
.promo-arrow { flex: 0 0 auto; width: 18px; height: 18px; color: var(--fg-30); }

/* ===================== Игра «Лови баксы» ===================== */
/* Держим тёмной всегда, как онбординг: это отдельная сцена со своим светом,
   и в светлой теме её белые подписи на светлом фоне пропадали бы. */
.game {
  position: fixed;
  inset: 0;
  z-index: 210;                    /* выше таббара, модалок и онбординга */
  background: radial-gradient(120% 80% at 50% 0%, #16233f 0%, #070b16 60%, #04060d 100%);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;      /* без задержки 300мс и без зума по двойному тапу */
}
/* Два медленно плывущих пятна света. Чистый градиент выглядел мёртвым, а
   плавное движение создаёт ощущение глубины почти без затрат: анимируем
   только transform, то есть работу берёт видеокарта. */
.game::before, .game::after {
  content: "";
  position: absolute;
  width: 70vmax; height: 70vmax;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
.game::before {
  top: -30vmax; left: -25vmax;
  background: radial-gradient(circle, rgba(59,130,246,.20), transparent 62%);
  animation: game-drift-a 18s ease-in-out infinite alternate;
}
.game::after {
  bottom: -34vmax; right: -28vmax;
  background: radial-gradient(circle, rgba(16,185,129,.16), transparent 62%);
  animation: game-drift-b 23s ease-in-out infinite alternate;
}
@keyframes game-drift-a { to { transform: translate(18vmax, 12vmax) scale(1.15); } }
@keyframes game-drift-b { to { transform: translate(-16vmax, -10vmax) scale(1.1); } }

.game-top {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 10px;
}
.game-x {
  width: 38px; height: 38px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border: none; cursor: pointer;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.game-x .ic { width: 18px; height: 18px; }
.game-timer {
  flex: 1 1 auto;
  text-align: center;
  font-size: 26px; font-weight: 900;
  color: #fff;
  font-variant-numeric: tabular-nums;   /* цифры не прыгают при смене секунды */
  text-shadow: 0 2px 18px rgba(96, 165, 250, .45);
}
.game-timer.low { color: #f87171; }
.game-pot {
  flex: 0 0 auto;
  min-width: 104px;
  text-align: right;
  font-size: 20px; font-weight: 900;
  color: #4ade80;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 16px rgba(74,222,128,.55);
  transition: transform .12s ease;
}
/* Короткий скачок при прибавке: без него цифра меняется незаметно. */
.game-pot.bump { transform: scale(1.18); }
.game-pot.neg { color: #f87171; }

.game-field { position: absolute; inset: 0; z-index: 2; }

/* Объект. Появление и исчезновение — короткие, чтобы не мешать попадать. */
/* Объект ПАДАЕТ сверху вниз. Позицию ведёт CSS-анимация, а не JS: браузер
   считает её на видеокарте, поэтому десяток одновременных объектов не роняет
   частоту кадров на слабом телефоне. Длительность падения = время жизни,
   которое прислал сервер, — то самое окно, внутри которого он примет тап. */
.gobj {
  position: absolute;
  top: 0;
  width: 58px; height: 58px;
  margin-left: -29px;              /* x — это центр объекта */
  display: grid; place-items: center;
  font-size: 34px; line-height: 1;
  cursor: pointer;
  will-change: transform;
  animation: gfall linear forwards;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .55));
}
@keyframes gfall {
  from { transform: translateY(-14vh) rotate(-10deg) scale(.92); }
  50%  { transform: translateY(45vh)  rotate(6deg)   scale(1.04); }
  to   { transform: translateY(104vh) rotate(14deg)  scale(.96); }
}
/* Заморозка останавливает падение ровно там, где оно есть. Игровые часы в JS
   встают в тот же момент, поэтому картинка и расписание не расходятся. */
.game-field.frozen .gobj { animation-play-state: paused; }

.gobj.out { animation: gobj-out .18s ease-in forwards; pointer-events: none; }
@keyframes gobj-out { to { transform: scale(1.5); opacity: 0; } }
.gobj-buck {
  color: #4ade80;
  text-shadow: 0 0 14px rgba(74,222,128,.9), 0 0 34px rgba(74,222,128,.45);
}
/* Бомба пульсирует — так её замечают периферийным зрением и не тапают. */
.gobj-bomb {
  text-shadow: 0 0 14px rgba(248,113,113,.9), 0 0 36px rgba(248,113,113,.5);
  animation: gfall linear forwards, gobj-danger .7s ease-in-out infinite;
}
@keyframes gobj-danger { 50% { filter: drop-shadow(0 0 12px rgba(248,113,113,.9)); } }
.gobj-freeze {
  text-shadow: 0 0 14px rgba(96,165,250,1), 0 0 36px rgba(96,165,250,.55);
}

/* Вспышка на месте пойманного объекта. */
.gpop {
  position: absolute; z-index: 3;
  width: 62px; height: 62px; margin: -31px 0 0 -31px;
  border-radius: 50%; pointer-events: none;
  animation: gpop .42s ease-out forwards;
}
@keyframes gpop {
  from { transform: scale(.3); opacity: .9; box-shadow: 0 0 0 2px currentColor inset; }
  to   { transform: scale(2.1); opacity: 0;  box-shadow: 0 0 0 1px currentColor inset; }
}

/* Всплывающая сумма над тапом. */
.gfly {
  position: absolute;
  z-index: 4;
  font-size: 16px; font-weight: 900;
  pointer-events: none;
  animation: gfly 0.75s ease-out forwards;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}
.gfly.pos { color: #4ade80; }
.gfly.neg { color: #f87171; }
@keyframes gfly {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(.8); }
  25%  { opacity: 1; transform: translate(-50%, -14px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -46px) scale(1); }
}

/* Заморозка: иней по краям, чтобы состояние читалось мгновенно. */
.game-frost {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  box-shadow: inset 0 0 90px 20px rgba(96, 165, 250, .55);
  background: rgba(96, 165, 250, .07);
  animation: frost-pulse 1s ease-in-out infinite;
}
@keyframes frost-pulse { 50% { box-shadow: inset 0 0 120px 26px rgba(96, 165, 250, .75); } }

/* Панели старта и итога. */
.game-panel {
  position: absolute;
  z-index: 5;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(340px, 88vw);
  padding: 22px 20px;
  border-radius: var(--r-xl);
  background: rgba(10, 14, 28, .92);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .6);
  text-align: center;
}
.game-h {
  font-size: 22px; font-weight: 900; color: #fff;
  letter-spacing: .5px; margin-bottom: 8px;
}
.game-p { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.62); margin-bottom: 16px; }
.game-res-sum {
  font-size: 34px; font-weight: 900;
  margin: 4px 0 10px;
  font-variant-numeric: tabular-nums;
}
.game-res-sum.pos { color: #4ade80; }
.game-res-sum.neg { color: #f87171; }

/* ===================== Магазин ===================== */
.shop-bal {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; margin-bottom: 12px;
}
.shop-bal-l { font-size: 13px; color: var(--fg-70); }
.shop-bal-v {
  font-size: 24px; font-weight: 900; color: var(--green);
  font-variant-numeric: tabular-nums;
}


.shop-game { padding: 16px 18px; margin-bottom: 14px; }
.shop-game-t { font-size: 15px; font-weight: 800; color: var(--fg); margin-bottom: 6px; }
.shop-game-d { font-size: 12.5px; line-height: 1.5; color: var(--fg-50); margin-bottom: 12px; }
.shop-game .btn { margin-bottom: 0; }

.shop-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--fg-50);
  margin: 4px 4px 8px;
}

/* Активные бусты — плашкой сверху, чтобы было видно, что уже работает. */
.shop-active { margin-bottom: 14px; }
.shop-act {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; margin-bottom: 8px;
  border-radius: var(--r-md);
  background: rgba(74, 222, 128, .12);
  border: 1px solid rgba(74, 222, 128, .28);
  font-size: 13px; color: var(--fg-90);
}
.shop-act b { color: #4ade80; }

/* Карточка товара. Недоступный по цене гасим, но не прячем: человек должен
   видеть, к чему копить. */
.shop-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; margin-bottom: 10px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.shop-item-ico {
  flex: 0 0 auto; width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 14px; font-size: 22px;
  background: var(--surface-2);
}
.shop-item-mid { flex: 1 1 auto; min-width: 0; }
.shop-item-t { display: block; font-size: 14px; font-weight: 700; color: var(--fg); }
.shop-item-d { display: block; font-size: 11.5px; color: var(--fg-50); margin-top: 3px; }
.shop-buy {
  flex: 0 0 auto;
  padding: 9px 14px;
  border: none; cursor: pointer;
  border-radius: var(--r-pill);
  font: inherit; font-size: 13px; font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-400), var(--blue-600));
  white-space: nowrap;
}
.shop-buy:active { transform: scale(0.96); }
.shop-buy:disabled {
  cursor: default;
  background: var(--surface-3);
  color: var(--fg-30);
}

/* Прогресс просмотров до раунда: голое «осталось N» не показывает движения. */
.shop-prog {
  display: block; height: 6px; margin-top: 8px;
  border-radius: 99px; overflow: hidden;
  background: var(--fg-08);
}
.shop-prog > i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--blue-400), var(--blue-600));
  transition: width .35s ease;
}
/* Недостача токенов — под описанием товара, а не вместо цены: цену человек
   должен видеть всегда, чтобы понимать, к чему копить. */
.shop-item-short {
  display: block; margin-top: 4px;
  font-size: 11.5px; font-weight: 700; color: var(--gold);
}

/* Раскладка окна лимита: что и когда освободится. */
.lim-win { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.lim-win-h {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--fg-50); margin-bottom: 8px;
}
.lim-win-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: var(--fg-70); padding: 5px 0;
}
.lim-win-row b { color: var(--fg-90); font-weight: 700; }

/* Действия над заказом: докупка и возврат в одну строку. */
.bko-actions { display: flex; gap: 8px; margin-top: 10px; }
.bko-actions:empty { display: none; }
.bko-actions > button { flex: 1 1 0; margin-top: 0; }
.bko-add {
  padding: 10px 12px;
  border: 1px solid var(--border-strong); cursor: pointer;
  border-radius: var(--r-md);
  font: inherit; font-size: 12.5px; font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-400), var(--blue-600));
}
.bko-add:active { transform: scale(0.97); }
.bko-add:disabled { opacity: .5; cursor: default; }

/* ===== Межстраничное окно с предложением оффервола ===== */
.owp {
  position: fixed; inset: 0; z-index: 260;   /* выше игры и модалок */
  display: grid; place-items: center;
  padding: 24px;
  background: radial-gradient(120% 80% at 50% 0%, #16233f 0%, #070b16 65%, #04060d 100%);
}
.owp-timer, .owp-x {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 16px); right: 16px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .10);
  color: #fff; font-size: 15px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.owp-x { border: none; cursor: pointer; }
.owp-x .ic { width: 18px; height: 18px; }
.owp-x:active { transform: scale(0.9); }

.owp-body { text-align: center; max-width: 340px; }
.owp-ico { font-size: 56px; line-height: 1; margin-bottom: 14px; }
.owp-h { font-size: 22px; font-weight: 900; color: #fff; margin-bottom: 10px; }
.owp-p {
  font-size: 14px; line-height: 1.55;
  color: rgba(255, 255, 255, .66); margin-bottom: 22px;
}

/* Эмодзи в плашке логотипа. У остальных экранов там <svg class="ic"> со своим
   размером, а голый символ наследовал шрифт body и выходил мелким. */
.brand-logo { font-size: 24px; line-height: 1; }


/* ======================== СТАТУС НАД БАЛАНСОМ ======================== */
/* Показывает, чего человек добился (просмотры) или что купил (буст → vip).
   Стоит над подписью "Ваш баланс" — это первое, что видно на экране. */
.tier-row { display: flex; justify-content: center; margin-bottom: 6px; }
.tier-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--fg-50);
}
.tier-chip.bronze {
  border-color: rgba(217, 119, 6, 0.45);
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.18), rgba(217, 119, 6, 0.05));
  color: #f0a868;
}
.tier-chip.silver {
  border-color: rgba(203, 213, 225, 0.45);
  background: linear-gradient(135deg, rgba(203, 213, 225, 0.16), rgba(203, 213, 225, 0.04));
  color: #dbe3ee;
}
.tier-chip.gold {
  border-color: rgba(251, 191, 36, 0.5);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.20), rgba(251, 191, 36, 0.05));
  color: var(--gold);
}
/* VIP светится: это единственный статус, который покупается, и он должен
   быть заметно дороже на вид, чем то, что даётся просмотрами. */
.tier-chip.vip {
  border-color: rgba(251, 191, 36, 0.65);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.30), rgba(244, 114, 182, 0.16));
  color: #ffe9a8;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.28);
}


/* ============================== КЕЙСЫ ============================== */
/* Ширина ячейки задана здесь и читается из JS: анимация должна знать шаг
   ленты точно, иначе выигрыш встанет мимо метки. */
:root { --case-cell: 76px; --case-gap: 8px; }

/* ----- Входы в игру и кейсы ----- */
/* Оформлены как .task-item и прочие карточки апки: одна поверхность, одна
   рамка, мягкая тень. Цветных обводок и свечений здесь нет намеренно —
   в остальном приложении их тоже нет, и две неоновые плашки посреди
   спокойного экрана выглядели чужеродно. Акцент несёт только иконка. */
.hub { display: flex; flex-direction: column; gap: 10px; }
.hub-btn {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  cursor: pointer; text-align: left;
  transition: background 0.15s ease;
}
.hub-btn:active { background: rgba(255, 255, 255, 0.04); }

.hub-ic {
  flex: 0 0 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
}
.hub-ic .ic { width: 22px; height: 22px; color: var(--accent); }

.hub-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hub-t {
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--fg);
}
.hub-d {
  font-size: 12px; color: var(--fg-50); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.hub-badge {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg-50);
}
.hub-badge:empty { display: none; }
.hub-arrow { flex: 0 0 auto; display: grid; place-items: center; }
.hub-arrow .ic { width: 14px; height: 14px; color: var(--fg-50); opacity: 0.5; }

/* Акцент у каждого входа свой, но только на иконке — этого достаточно,
   чтобы отличить их друг от друга, и не создаёт пестроты. */
.hub-game { --accent: var(--blue-400); }
.hub-case { --accent: var(--gold); }

.case-list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  animation: caseOpenIn 0.25s ease-out;
}
/* Плитка кейса: обложка сверху, строка с названием и ценой снизу.
   Водяного знака нет намеренно — именно он в прошлой версии превращал
   витрину в мешанину: фоновый текст спорил с заголовком и иконкой. */
.case-item {
  padding: 0; overflow: hidden;
  border-radius: 18px;
  border: 2px solid var(--accent);
  background: var(--surface);
  cursor: pointer; text-align: left;
  transition: transform 0.15s ease;
}
.case-item:active { transform: scale(0.975); }

.case-item-art {
  position: relative;
  height: 138px;
  display: grid; place-items: center;
  /* Тёплое пятно за предметом и тёмный низ — так плитка читается как
     обложка, а не как плашка с иконкой. */
  background:
    radial-gradient(circle at 50% 62%, var(--glow) 0%, transparent 64%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.35), rgba(2, 6, 23, 0.75));
}
/* Лучи из-за предмета. Дешёвая замена настоящей иллюстрации: даёт объём,
   которого простой иконке не хватает. */
.case-item-art::before {
  content: "";
  position: absolute; width: 150%; height: 150%;
  background: conic-gradient(from 0deg, transparent 0 8%, var(--glow) 9% 11%,
              transparent 12% 20%, var(--glow) 21% 23%, transparent 24% 33%,
              var(--glow) 34% 36%, transparent 37% 45%, var(--glow) 46% 48%,
              transparent 49% 58%, var(--glow) 59% 61%, transparent 62% 70%,
              var(--glow) 71% 73%, transparent 74% 83%, var(--glow) 84% 86%,
              transparent 87% 100%);
  opacity: 0.5;
  mask-image: radial-gradient(circle at 50% 50%, #000 12%, transparent 62%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 12%, transparent 62%);
  animation: caseRays 26s linear infinite;
}
@keyframes caseRays { to { transform: rotate(360deg); } }

.case-item-title {
  position: absolute; top: 12px; left: 8px; right: 8px;
  text-align: center;
  font-size: 22px; font-weight: 900; font-style: italic;
  letter-spacing: -0.02em;
  color: var(--accent);
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.55),
    0 0 18px var(--glow);
  white-space: nowrap; overflow: hidden;
}
.case-item-art .ic {
  width: 58px; height: 58px;
  position: relative; margin-top: 20px;
  color: var(--accent);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6));
}

.case-item-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 12px;
  background: var(--surface-3, rgba(255, 255, 255, 0.04));
  border-top: 1px solid var(--border);
}
.case-item-n {
  font-size: 12.5px; font-weight: 700; color: var(--fg);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Пилюля не сжимается и не переносится: в прошлой версии цена обрезалась
   именно потому, что делила ширину с названием. */
.case-item-p {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px;
  border-radius: 12px;
  font-size: 12px; font-weight: 900;
  background: var(--accent); color: #0b1020;
  white-space: nowrap;
}
.case-item-p .ic { width: 13px; height: 13px; }

.case-item.locked { opacity: 0.45; }
.case-item.locked .case-item-p { background: rgba(255, 255, 255, 0.10); color: var(--fg-50); }

/* Ступени: от бирюзы к золоту у вершины. */
.case-item.c0 { --accent: #34d399; --glow: rgba(52, 211, 153, 0.30); }
.case-item.c1 { --accent: #38bdf8; --glow: rgba(56, 189, 248, 0.30); }
.case-item.c2 { --accent: #60a5fa; --glow: rgba(96, 165, 250, 0.30); }
.case-item.c3 { --accent: #a78bfa; --glow: rgba(167, 139, 250, 0.32); }
.case-item.c4 { --accent: #c084fc; --glow: rgba(192, 132, 252, 0.32); }
.case-item.c5 { --accent: #f472b6; --glow: rgba(244, 114, 182, 0.32); }
.case-item.c6 { --accent: #fbbf24; --glow: rgba(251, 191, 36, 0.38); }

.case-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0;
  color: var(--fg-50); font-size: 12px; font-weight: 700;
  cursor: pointer; margin-bottom: 10px;
}
.case-body {
  margin-top: 10px;
  animation: caseOpenIn 0.25s ease-out;
}
@keyframes caseOpenIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.case-head {
  font-weight: 900; font-size: 14px; letter-spacing: 0.04em;
  margin-bottom: 10px;
}

/* ----- Барабан ----- */
.case-reel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 10px 0;
}
.case-reel-track {
  display: flex;
  gap: var(--case-gap);
  will-change: transform;
}
.case-cell {
  flex: 0 0 var(--case-cell);
  height: var(--case-cell);
  border-radius: 12px;
  display: grid; place-items: center;
  border: 1.5px solid var(--border);
  background: var(--surface-3);
  position: relative;
}
.case-cell .ic { width: 30px; height: 30px; }
.case-cell-v {
  position: absolute; bottom: 5px; left: 0; right: 0;
  text-align: center; font-size: 9px; font-weight: 800;
  letter-spacing: -0.02em;
}
/* Ступени различаем цветом, а не только суммой: на быстрой прокрутке
   цифры не читаются, а цвет виден. */
.case-cell.t0 { opacity: 0.55; }
.case-cell.t0 .case-cell-v { color: var(--fg-50); }
.case-cell.t1 { border-color: rgba(52, 211, 153, 0.45);
  background: linear-gradient(160deg, rgba(52,211,153,.16), rgba(52,211,153,.04)); }
.case-cell.t1 .case-cell-v { color: var(--emerald-400); }
.case-cell.t2 { border-color: rgba(96, 165, 250, 0.5);
  background: linear-gradient(160deg, rgba(96,165,250,.18), rgba(96,165,250,.04)); }
.case-cell.t2 .case-cell-v { color: var(--blue-300); }
.case-cell.t3 { border-color: rgba(167, 139, 250, 0.55);
  background: linear-gradient(160deg, rgba(167,139,250,.24), rgba(167,139,250,.05));
  box-shadow: 0 0 14px rgba(167, 139, 250, 0.25); }
.case-cell.t3 .case-cell-v { color: #c4b5fd; }
.case-cell.t4 { border-color: rgba(251, 191, 36, 0.7);
  background: linear-gradient(160deg, rgba(251,191,36,.30), rgba(251,191,36,.06));
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.35); }
.case-cell.t4 .case-cell-v { color: var(--gold); }
/* Джекпот заметен даже на быстрой прокрутке — за счёт пульсации, а не цвета. */
.case-cell.t4 { animation: caseGlow 1.4s ease-in-out infinite; }
@keyframes caseGlow {
  0%, 100% { box-shadow: 0 0 16px rgba(251, 191, 36, 0.28); }
  50%      { box-shadow: 0 0 26px rgba(251, 191, 36, 0.55); }
}

/* Метка по центру — по ней читается результат. */
.case-reel-mark {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px;
  background: var(--blue-400);
  box-shadow: 0 0 10px var(--blue-400);
  pointer-events: none;
}
.case-reel-mark::before, .case-reel-mark::after {
  content: ""; position: absolute; left: 50%; margin-left: -5px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
}
.case-reel-mark::before { top: 0; border-top: 7px solid var(--blue-400); }
.case-reel-mark::after { bottom: 0; border-bottom: 7px solid var(--blue-400); }
/* Края притушены — иначе лента выглядит обрезанной, а не уходящей вдаль. */
.case-reel-fade {
  position: absolute; top: 0; bottom: 0; width: 44px; pointer-events: none;
}
.case-reel-fade.l { left: 0; background: linear-gradient(90deg, var(--surface-2), transparent); }
.case-reel-fade.r { right: 0; background: linear-gradient(270deg, var(--surface-2), transparent); }

.case-sub {
  margin: 10px 0 12px;
  font-size: 12.5px; color: var(--fg-50); text-align: center;
}
.case-open-btn {
  width: 100%;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff; font-weight: 900; letter-spacing: 0.03em;
  border: none;
}
.case-open-btn:disabled { opacity: 0.5; }

.case-label {
  display: flex; align-items: center; gap: 6px;
  margin: 16px 0 8px;
  font-size: 12px; font-weight: 800; color: var(--fg-50);
  text-transform: uppercase; letter-spacing: 0.06em;
}
/* Витрина призов. Карточки крупные и с воздухом: восемь мелких плашек
   вплотную читаются как таблица, а не как список того, что можно выиграть. */
/* Витрина призов — тем же языком, что и плитки кейсов: цветная рамка,
   свечение и лучи за предметом, залитая пилюля с суммой. Плоские тёмные
   квадраты выглядели как заглушки, а не как то, что можно выиграть. */
/* Витрина призов: сетка карточек. Подсветка сверху, снизу строка —
   название слева, сумма пилюлей справа. */
.case-prizes {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  animation: casePrizeIn 0.2s ease-out;
}
.case-prize {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  background: var(--surface-2);
}
.case-prize-art {
  position: relative;
  height: 92px;
  display: grid; place-items: center;
}
/* Свечение за иконкой — оно и делает карточку «предметом», а не строкой. */
.case-prize-art::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 45%, var(--glow) 0%, transparent 68%);
}
.case-prize .ic {
  width: 40px; height: 40px;
  position: relative;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.45));
}
.case-prize-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 8px 10px;
  background: var(--surface-3);
  border-top: 1px solid var(--border);
}
.case-prize-n {
  font-size: 11.5px; font-weight: 700; color: var(--fg-50);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Сумма — «пилюлей», как ценник: её ищут глазами первой. */
.case-prize-v {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 900;
  background: var(--surface-2);
  color: var(--fg-50);
}

.case-prize.t0 { --glow: rgba(148, 163, 184, 0.12); opacity: 0.7; }
.case-prize.t1 {
  --glow: rgba(52, 211, 153, 0.30);
  border-color: rgba(52, 211, 153, 0.40);
}
.case-prize.t1 .case-prize-v { background: rgba(52, 211, 153, 0.18); color: var(--emerald-400); }
.case-prize.t2 {
  --glow: rgba(96, 165, 250, 0.32);
  border-color: rgba(96, 165, 250, 0.45);
}
.case-prize.t2 .case-prize-v { background: rgba(96, 165, 250, 0.18); color: var(--blue-300); }
.case-prize.t3 {
  --glow: rgba(167, 139, 250, 0.34);
  border-color: rgba(167, 139, 250, 0.50);
}
.case-prize.t3 .case-prize-v { background: rgba(167, 139, 250, 0.18); color: #c4b5fd; }
/* Пятая ступень появилась позже этого дизайна — оформлена в том же ключе. */
.case-prize.t4 {
  --glow: rgba(251, 191, 36, 0.38);
  border-color: rgba(251, 191, 36, 0.60);
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.18);
}
.case-prize.t4 .case-prize-v { background: rgba(251, 191, 36, 0.20); color: var(--gold); }
.case-prize.t4 .ic { color: var(--gold); }

/* Вспышка на выигранной ячейке после остановки. */
/* Смазка на разгоне: лента размывается, пока летит быстро, и становится
   резкой к остановке. Класс снимает JS вместе с окончанием прокрутки. */
.case-reel-track.spinning { filter: blur(1.4px); }
.case-reel.spinning .case-reel-mark {
  box-shadow: 0 0 18px var(--blue-400), 0 0 34px var(--blue-400);
}

.case-cell.won {
  animation: caseWon 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 3;
  z-index: 2;
}
@keyframes caseWon {
  0%, 100% { transform: scale(1); box-shadow: 0 0 12px currentColor; }
  50%      { transform: scale(1.18); box-shadow: 0 0 30px currentColor; }
}
/* Вспышка на всём барабане в момент остановки. */
.case-reel.flash::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.22), transparent 65%);
  animation: caseFlash 0.6s ease-out forwards;
  pointer-events: none;
}
@keyframes caseFlash {
  from { opacity: 1; }
  to   { opacity: 0; }
}


/* ======================= ЭКРАН СОГЛАСИЯ ======================= */
.terms-body { max-height: 90vh; overflow-y: auto; }
.terms-hero { text-align: center; padding: 4px 0 14px; }
.terms-hero-ic {
  width: 62px; height: 62px; margin: 0 auto 12px;
  display: grid; place-items: center;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 40%, rgba(96, 165, 250, 0.38), transparent 70%),
    var(--surface-2);
  border: 1.5px solid rgba(96, 165, 250, 0.45);
  box-shadow: 0 0 26px rgba(96, 165, 250, 0.20);
}
.terms-hero-ic .ic { width: 30px; height: 30px; color: var(--blue-300); }
.terms-hero h3 { margin: 0 0 6px; font-size: 19px; letter-spacing: -0.01em; }
.terms-hero p { margin: 0; color: var(--fg-50); font-size: 13px; }

.terms-points { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; }
/* Пункты появляются по очереди: пять блоков разом читаются как стена текста. */
.terms-point {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  animation: termsIn 0.34s ease-out backwards;
}
.terms-point:nth-child(1) { animation-delay: 0.04s; }
.terms-point:nth-child(2) { animation-delay: 0.10s; }
.terms-point:nth-child(3) { animation-delay: 0.16s; }
.terms-point:nth-child(4) { animation-delay: 0.22s; }
.terms-point:nth-child(5) { animation-delay: 0.28s; }
@keyframes termsIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.terms-point-ic {
  flex: 0 0 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--surface-3);
  border: 1px solid var(--border);
}
.terms-point-ic .ic { width: 15px; height: 15px; color: var(--blue-300); }
.terms-point div { display: flex; flex-direction: column; gap: 3px; }
.terms-point b { font-size: 13px; font-weight: 800; }
.terms-point span { font-size: 12px; color: var(--fg-50); line-height: 1.45; }

.terms-link {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px;
  border-radius: 12px;
  background: none;
  border: 1px dashed var(--border);
  color: var(--fg-50);
  font-size: 12.5px; font-weight: 700;
  cursor: pointer;
  margin-bottom: 12px;
}
.terms-link .ic { width: 14px; height: 14px; }
.terms-link:active { background: var(--surface-2); }

.terms-accept {
  width: 100%;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border: none; color: #fff;
  font-weight: 900; letter-spacing: 0.03em;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.28);
}
.terms-note {
  margin: 10px 0 0;
  text-align: center;
  font-size: 11px; line-height: 1.5;
  color: var(--fg-50);
}


/* ==================== ЛЕНТА, ГАРАНТИЯ, ИСТОРИЯ ==================== */
.case-feed {
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  margin-bottom: 12px;
  padding: 7px 0;
}
.case-feed-track {
  display: flex; gap: 8px;
  /* Лента едет сама: остановившийся список читается как статичная картинка
     и не даёт ощущения, что кейсы открывают прямо сейчас. */
  animation: feedRun 38s linear infinite;
  width: max-content;
}
.case-feed:hover .case-feed-track { animation-play-state: paused; }
@keyframes feedRun {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.feed-item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  font-size: 11.5px; white-space: nowrap;
}
.feed-item .ic { width: 13px; height: 13px; }
.feed-item-n { color: var(--fg-50); font-weight: 700; }
.feed-item-v { font-weight: 900; }
.feed-item.c1 { border-color: rgba(96,165,250,.4); }
.feed-item.c1 .feed-item-v, .feed-item.c1 .ic { color: var(--blue-300); }
.feed-item.c2 { border-color: rgba(167,139,250,.45); }
.feed-item.c2 .feed-item-v, .feed-item.c2 .ic { color: #c4b5fd; }
.feed-item.c3 { border-color: rgba(244,114,182,.45); }
.feed-item.c3 .feed-item-v, .feed-item.c3 .ic { color: #f9a8d4; }
.feed-item.c4, .feed-item.c5, .feed-item.c6 {
  border-color: rgba(251,191,36,.5);
  background: linear-gradient(135deg, rgba(251,191,36,.16), rgba(251,191,36,.04));
}
.feed-item.c4 .feed-item-v, .feed-item.c5 .feed-item-v,
.feed-item.c6 .feed-item-v, .feed-item.c4 .ic,
.feed-item.c5 .ic, .feed-item.c6 .ic { color: var(--gold); }

/* Гарантия. Отдельная карточка со щитом, а не строчка текста: это обещание
   сервиса, и выглядеть оно должно как обещание. */
.case-pity {
  display: flex; align-items: center; gap: 11px;
  margin: 0 0 12px;
  padding: 12px 13px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.case-pity-ic {
  flex: 0 0 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--surface-3);
  border: 1px solid var(--border);
}
.case-pity-ic .ic { width: 17px; height: 17px; color: var(--fg-50); }
.case-pity-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.case-pity-t { font-size: 12px; color: var(--fg-50); line-height: 1.35; }
.case-pity-t b { color: var(--emerald-400); font-weight: 900; }
.case-pity-bar {
  height: 5px; border-radius: 3px;
  background: var(--surface-3);
  overflow: hidden;
}
.case-pity-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #34d399, #10b981);
  transition: width 0.35s ease;
}
/* Готово — карточка загорается целиком, чтобы это нельзя было пропустить. */
.case-pity.ready {
  border-color: rgba(52, 211, 153, 0.55);
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.16), rgba(52, 211, 153, 0.03));
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.16);
}
.case-pity.ready .case-pity-ic {
  border-color: rgba(52, 211, 153, 0.5);
  background: rgba(52, 211, 153, 0.14);
}
.case-pity.ready .case-pity-ic .ic { color: var(--emerald-400); }
.case-pity.ready .case-pity-t { color: var(--emerald-400); font-weight: 800; }

.case-hist { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.hist-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12px;
}
.hist-row-l { color: var(--fg-50); }
.hist-row-v { font-weight: 900; }
.hist-row.win .hist-row-v { color: var(--emerald-400); }
.hist-row.empty .hist-row-v { color: var(--fg-50); }
.hist-sum {
  padding: 10px 12px; border-radius: 10px;
  background: var(--surface-3); border: 1px solid var(--border);
  font-size: 12px; display: flex; justify-content: space-between;
}
.hist-sum b { color: var(--emerald-400); }