@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/PressStart2P.ttf') format('truetype');
}

:root {
  --tg-theme-bg-color: #ffffff;
  --tg-theme-text-color: #000000;
  --tg-theme-hint-color: #999999;
  --tg-theme-link-color: #2563eb;
  --tg-theme-button-color: #2563eb;
  --tg-theme-button-text-color: #ffffff;
  --tg-theme-secondary-bg-color: #f0f0f0;
  --tg-theme-header-bg-color: #ffffff;
  --tg-theme-accent-text-color: #2563eb;
  --tg-theme-section-bg-color: #f0f0f0;
  --tg-theme-destructive-text-color: #ff3b30;
  --border-color: rgba(255,255,255,.08);
  --card-shadow: 0 2px 8px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.06);
  --card-shadow-hover: 0 4px 16px rgba(61,235,255,.12), 0 2px 4px rgba(0,0,0,.08);
  --text-secondary: var(--tg-theme-hint-color);
  /* Fixed accent palette */
  --accent: #3DEBFF;
  --accent-text: #041016;
  --accent-soft: rgba(61,235,255,.10);
  --accent-border: rgba(61,235,255,.22);
  --accent-glow: rgba(61,235,255,.35);
  --accent2: #F6C453;
  --accent2-soft: rgba(246,196,83,.10);
  --accent2-border: rgba(246,196,83,.22);
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  /* Safe-area + TG viewport */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tg-vh: var(--tg-viewport-height, 100vh);
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }


html, body{
  width:100%;
  height:100%;
  overscroll-behavior-y: none;
}
html {
  background-color: #040C15;
  position: relative;
}
/* Full-screen lockout pages — paint the entire browser chrome the same color */
html.page-blocked, html.page-blocked body {
  background-color: #3b0404 !important;
  background: #3b0404 !important;
}
html.page-maintenance, html.page-maintenance body {
  background-color: #050f2a !important;
  background: #050f2a !important;
}
html.page-maintenance-light, html.page-maintenance-light body {
  background-color: #EEF2FA !important;
  background: #EEF2FA !important;
}
/* html bg is set directly via JS applyTheme() — document.documentElement.style.backgroundColor */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  color: var(--tg-theme-text-color);
  overflow: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
  user-select: none;
  -webkit-user-select: none;
}
/* Allow text selection inside inputs and textareas */
input, textarea {
  user-select: text;
  -webkit-user-select: text;
}
/* Allow admins to copy text in admin screens */
#screen-admin, #screen-admin-page, #screen-admin *, #screen-admin-page * {
  user-select: text;
  -webkit-user-select: text;
}
/* Каждый активный экран — собственный scroll-контейнер (работает в Telegram WebApp на iOS/Android) */
.screen { display:none; }
.screen.active {
  display: block;
  position: fixed !important;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 16px 18px;
  padding-top: calc(var(--safe-top) + 8px + 16px);
  padding-bottom: calc(var(--safe-bottom, 0px) + 24px);
  box-sizing: border-box;
}
/* Suppress all transitions during theme switch to prevent border/shadow flash on cards */
body.theme-switching, body.theme-switching * { transition: none !important; }
/* Force-restart all animations on a screen after display:none → display:block */
.anim-force-restart,
.anim-force-restart *,
.anim-force-restart *::before,
.anim-force-restart *::after { animation: none !important; }

/* Direction-aware screen transitions */
.screen.screen-enter { animation: screenSlideIn .22s cubic-bezier(.25,.46,.45,.94) both; }
.screen.screen-back  { animation: screenSlideBack .22s cubic-bezier(.25,.46,.45,.94) both; }
@keyframes screenSlideIn  { from{opacity:0;transform:translateX(10px) translateY(4px)} to{opacity:1;transform:none} }
@keyframes screenSlideBack{ from{opacity:0;transform:translateX(-10px) translateY(4px)} to{opacity:1;transform:none} }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ── Universal press transitions (120ms standard) ── */
/* Note: .cat-card, .product-card, .order-card excluded — they have their own transition:all .22s */
.gift-card, .pack-card,
.payment-method-option, .support-card, .faq-item {
  transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}
.btn-go, .new-ticket-btn, .cancel-order-btn, .order-action-btn {
  transition: transform 120ms ease, opacity 120ms ease;
}

/* ── Trust line (catalog screen) — тускло-белый ── */
.trust-line {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding: 6px 0 2px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: rgba(255,255,255,.28);
  font-weight: 500;
  letter-spacing: .01em;
}
.trust-item-icon {
  font-size: 12px;
  opacity: .45;
}

/* Header */
.header { text-align:center; padding:14px 0 10px; position:relative; z-index:5; }
.header h1 { font-size:22px; font-weight:800; color:var(--tg-theme-text-color); letter-spacing:-.3px; line-height:1.2; }
.header p { font-size:12px; color:var(--text-secondary); margin-top:3px; font-weight:400; letter-spacing:0; }
/* Catalog header — row layout with icons */
.header-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 0 10px; position:relative; z-index:5; }
.header-center { flex:1; min-width:0; text-align:center; }
.header-center h1 { font-size:15px; font-weight:700; color:var(--tg-theme-text-color); letter-spacing:-.2px; line-height:1.2; white-space:nowrap; }
.header-center p { font-size:12px; color:var(--text-secondary); margin-top:3px; font-weight:400; letter-spacing:0; }
.header-icons-left { display:flex; gap:8px; flex-shrink:0; min-width:40px; }
.header-icons { display:flex; gap:8px; flex-shrink:0; }
.header-icon {
  width:40px; height:40px; border-radius:12px;
  background: rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; cursor:pointer; transition:all .15s cubic-bezier(.25,.46,.45,.94);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.header-icon:hover { background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.14); }
.header-icon:active { transform:scale(.96); opacity:.8; }

/* Categories */
.categories { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cat-card {
  background: rgba(15,26,43,.65);
  border-radius: var(--radius-lg);
  padding: 12px 8px 14px;
  text-align: center;
  cursor: pointer;
  transition: all .22s cubic-bezier(.25,.46,.45,.94);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  aspect-ratio: 1 / 1;
}
.cat-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(61,235,255,.14) 0%, rgba(246,196,83,.08) 40%, transparent 70%);
  opacity:0; transition:opacity .22s ease; pointer-events:none;
}
.cat-card:hover::before { opacity:1; }
.cat-card:hover { border-color:var(--accent-border); box-shadow:var(--card-shadow-hover); }
.cat-card:active { transform:scale(.985); box-shadow:0 1px 4px rgba(0,0,0,.08); opacity:.92; }
/* Disabled section card — visible but dimmed, shows 🚫 badge */
.cat-card--disabled {
  opacity: .42;
  filter: grayscale(.65);
}
.cat-card--disabled::after {
  content: '🚫';
  position: absolute;
  top: 7px;
  right: 7px;
  font-size: 14px;
  line-height: 1;
  filter: none;
  opacity: .85;
}
.cat-card--disabled:hover { border-color: rgba(255,255,255,.08); box-shadow: var(--card-shadow); }
.cat-card--disabled:active { transform: scale(.985); opacity: .42; }
.cat-card .emoji { font-size:42px; display:block; margin-bottom:12px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.08)); }
.cat-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  width: 144%;
  height: auto;
  max-width: 320px;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.40));
  transition: transform .22s cubic-bezier(.25,.46,.45,.94), filter .22s ease;
}
.cat-card:hover .cat-icon {
  transform: translate(-50%, -63%) scale(1.06);
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.45));
}
.cat-card:active .cat-icon {
  transform: translate(-50%, -60%) scale(.94);
}
.cat-card .name {
  position: relative;
  z-index: 2;
  font-size:15px; font-weight:700; color:var(--tg-theme-text-color); letter-spacing:-.1px;
}
.cat-card .desc { font-size:11px; color:var(--text-secondary); margin-top:3px; font-weight:400; position: relative; z-index: 2; }

/* Products */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); gap:10px; margin-top:14px; }
.product-card {
  background: var(--tg-theme-secondary-bg-color);
  border-radius: var(--radius-md); padding: 16px 8px; text-align: center;
  cursor: pointer; transition: transform .18s cubic-bezier(.25,.46,.45,.94); font-size: 13px;
  border:1px solid var(--border-color);
  box-shadow: var(--card-shadow);
}
.product-card:hover { border-color:var(--accent-border); box-shadow:var(--card-shadow-hover); }
.product-card:active { transform:scale(.985); box-shadow:0 1px 3px rgba(0,0,0,.06); opacity:.92; }
.product-card.selected { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-border), var(--card-shadow); background:var(--accent-soft); }
.product-card .p-title { font-weight:700; font-size:14px; color:var(--tg-theme-text-color); }
.product-card .p-price { color:var(--accent); margin-top:6px; font-size:13px; font-weight:600; }
.product-card .p-emoji { font-size:32px; display:block; margin-bottom:8px; }

@media (max-width: 480px) {
  .cat-icon { width: 140%; max-width: 260px; }
  .cat-card { padding: 10px 6px 12px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .gift-grid    { grid-template-columns: repeat(2, 1fr); }
  .product-card { padding: 18px 10px; }
  .product-card .p-emoji { font-size: 36px; margin-bottom: 10px; }
  .product-card .p-title { font-size: 15px; }
  .product-card .p-price { font-size: 14px; margin-top: 8px; }
}

.gift-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); gap:10px; margin-top:14px; }

/* Gift card micro-hierarchy — larger gifts get stronger glow, small gifts are subtler */
.product-card.gift-top {
  border-color: rgba(255,198,77,.35);
  box-shadow: 0 4px 18px rgba(255,198,77,.18), inset 0 0 0 1px rgba(255,198,77,.10), var(--card-shadow);
}
.product-card.gift-low {
  opacity: .82;
  border-color: rgba(61,235,255,.08);
}
.product-card.gift-low:hover, .product-card.gift-low:active { opacity: 1; }

.section-title { font-size:14px; font-weight:700; margin:18px 0 8px; color:var(--tg-theme-text-color); text-transform:uppercase; letter-spacing:.3px; }
.section-hint { font-size:12px; color:var(--text-secondary); margin-bottom:10px; }

/* Input rows */
.custom-input-row {
  display:flex; gap:10px; align-items:center;
  background: var(--tg-theme-secondary-bg-color);
  border-radius:var(--radius-md); padding:12px 16px; margin-top:12px;
  border:1px solid var(--border-color);
  box-shadow: var(--card-shadow);
  transition: border-color .2s;
}
.custom-input-row:focus-within { border-color:var(--accent-border); }
.custom-input-row input {
  flex:1; border:none; background:transparent; font-size:16px;
  color:var(--tg-theme-text-color); outline:none; font-weight:500;
}
.custom-input-row input::placeholder { color:var(--text-secondary); font-weight:400; }
.custom-input-row .label { font-size:13px; color:var(--text-secondary); white-space:nowrap; font-weight:500; }
.custom-input-row .btn-go {
  background:var(--accent); color:var(--accent-text);
  border:none; border-radius:var(--radius-sm); padding:9px 18px; font-size:13px; font-weight:700; cursor:pointer;
  transition:all .15s; box-shadow:0 2px 6px rgba(37,99,235,.2);
}
.custom-input-row .btn-go:hover { box-shadow:0 4px 12px rgba(37,99,235,.3); }
.custom-input-row .btn-go:active { opacity:.7; transform:scale(.95); }
/* Stars custom — standalone input (без инлайновой кнопки) */
.custom-input-standalone {
  background: var(--tg-theme-secondary-bg-color);
  border-radius:var(--radius-md); padding:12px 16px; margin-top:12px;
  border:1px solid var(--border-color);
  box-shadow: var(--card-shadow);
  transition: border-color .2s;
}
.custom-input-standalone:focus-within { border-color:var(--accent-border); }
.custom-input-standalone input {
  width:100%; border:none; background:transparent; font-size:16px;
  color:var(--tg-theme-text-color); outline:none; font-weight:500;
}
/* Stars CTA button — full-width gold */
.btn-stars-cta {
  display: block; width: 100%; margin-top: 16px;
  padding: 16px 24px; border: none; border-radius: 16px;
  background: linear-gradient(180deg, #FFD966 0%, #FFC020 50%, #F5A800 100%);
  color: #1a1200; font-size: 16px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    0 6px 28px rgba(255,180,0,.50),
    0 2px 6px rgba(0,0,0,.20);
  transition: transform .12s, box-shadow .12s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}
/* Top sheen */
.btn-stars-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 42%;
  background: linear-gradient(to bottom, rgba(255,255,255,.18), transparent);
  border-radius: 16px 16px 0 0;
  pointer-events: none;
}
/* Shimmer sweep */
.btn-stars-cta::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.22) 50%, transparent 100%);
  will-change: transform, opacity;
  animation: ctaBtnShimmer 3.5s ease-in-out infinite;
  pointer-events: none;
}
.btn-stars-cta:active {
  transform: translateY(2px) scale(.985);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 2px 10px rgba(255,180,0,.40),
    0 1px 2px rgba(0,0,0,.20);
}

.inline-price-display {
  margin-top:12px; padding:14px 16px; background:var(--accent-soft);
  border-radius:var(--radius-md); font-size:16px; font-weight:700; color:var(--accent);
  text-align:center; border:1px solid var(--accent-border);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* ── Stars-custom — золотая тема ── */

/* Иконка звезды в hint */
.hint-star-icon {
  width: 14px; height: 14px;
  vertical-align: -2px;
  opacity: .7;
}

/* 1. Заголовок — тёплый золотой градиент */
body[data-theme="stars"] #stars-custom-title {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: #E8C35A;
  text-shadow: 0 0 12px rgba(212,175,55,.15);
}

/* Обёртка инпута с кастомным placeholder */
.custom-input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
.custom-input-wrap input {
  width: 100%;
}
.custom-input-placeholder {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255,198,77,.38);
  transition: opacity .15s;
}
.custom-input-placeholder .hint-star-icon {
  width: 68px; height: 68px;
  object-fit: contain;
  opacity: .6;
  flex-shrink: 0;
  transform: translateX(-22px) translateY(1px);
}
/* Скрываем когда инпут в фокусе или заполнен */
.custom-input-wrap input:focus ~ .custom-input-placeholder,
.custom-input-wrap input:not(:placeholder-shown) ~ .custom-input-placeholder {
  opacity: 0;
}

/* 2. Карточка ввода — полностью непрозрачная, чтобы фон не просвечивал при iOS-композиции */
body[data-theme="stars"] .custom-input-row,
body[data-theme="stars"] .custom-input-standalone {
  background: linear-gradient(135deg, #0d1a2e 0%, #0a1525 100%) !important;
  border: 1px solid rgba(255,198,77,.30) !important;
  box-shadow:
    0 4px 24px rgba(0,0,0,.40),
    0 0 0 1px rgba(255,198,77,.06) inset,
    inset 0 1px 0 rgba(255,198,77,.10) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  -webkit-tap-highlight-color: transparent;
  padding: 18px 20px !important;
  transition: border-color .2s, box-shadow .2s !important;
}

/* 3. Поле ввода — прозрачный, фон карточки просвечивает */
body[data-theme="stars"] .custom-input-row input,
body[data-theme="stars"] .custom-input-standalone input {
  color: rgba(255,235,180,.95);
  -webkit-text-fill-color: rgba(255,235,180,.95);
  background: transparent !important;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 0 0 999px transparent !important;
  border-radius: 0;
  padding: 4px 0 8px;
  border: none;
  border-bottom: 1.5px solid rgba(255,198,77,.20);
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: -.5px;
  text-align: center;
  transition: border-color .2s;
  outline: none !important;
  width: 100%;
}
body[data-theme="stars"] .custom-input-row input::placeholder,
body[data-theme="stars"] .custom-input-standalone input::placeholder {
  color: rgba(255,198,77,.20);
  font-size: 32px;
  font-weight: 300;
}
body[data-theme="stars"] .custom-input-row:focus-within,
body[data-theme="stars"] .custom-input-standalone:focus-within {
  border-color: rgba(255,198,77,.55) !important;
  box-shadow:
    0 4px 28px rgba(0,0,0,.40),
    0 0 0 1px rgba(255,198,77,.12) inset,
    0 0 20px rgba(255,198,77,.06) !important;
}
body[data-theme="stars"] .custom-input-row:focus-within input,
body[data-theme="stars"] .custom-input-standalone:focus-within input {
  border-bottom-color: rgba(255,198,77,.60);
  box-shadow: inset 0 0 0 999px transparent !important;
  outline: none !important;
}
body[data-theme="stars"] .custom-input-row .label {
  color: rgba(255,198,77,.45);
}

/* 4. Кнопка OK — матовый металлический золотой */
body[data-theme="stars"] .custom-input-row .btn-go {
  background: linear-gradient(180deg, #e8c35a 0%, #b8860b 100%);
  color: #1a0e00;
  font-weight: 800;
  letter-spacing: .03em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 2px 8px rgba(0,0,0,.40);
  border: none;
}
body[data-theme="stars"] .custom-input-row .btn-go:active {
  transform: scale(.96);
  filter: brightness(.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), inset 0 -1px 0 rgba(0,0,0,.30);
}

/* Иконка звезды внутри поля — скрыта, не используется */
.custom-input-star-icon {
  display: none !important;
}

/* 5. Hint */
body[data-theme="stars"] .stars-custom-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
}
body[data-theme="stars"] .stars-custom-hint-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,198,77,.45);
  letter-spacing: .3px;
}
body[data-theme="stars"] .hint-star-icon {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  opacity: .7;
}

/* inline-price-display — золотая премиальная карточка */
body[data-theme="stars"] .inline-price-display {
  background: linear-gradient(135deg, rgba(255,198,77,.10) 0%, rgba(255,140,0,.06) 100%);
  border: 1px solid rgba(255,198,77,.28);
  border-left: 3px solid rgba(255,198,77,.70);
  border-radius: 12px;
  color: rgba(255,225,130,.95);
  font-size: 20px !important;
  font-weight: 700;
  padding: 16px 20px;
  box-shadow:
    0 4px 20px rgba(0,0,0,.25),
    0 0 16px rgba(255,198,77,.06);
  letter-spacing: -.2px;
}
/* price-display: враппер узкий, PNG абсолютный — не влияет на layout */
/* margin-left/right/top сброшены !important — перебивают inline-стили из JS */
#stars-price-display .stars-pack-icon-wrap {
  display: inline-block !important;
  width: 30px !important;
  height: 0 !important;
  position: relative !important;
  overflow: visible !important;
  flex-shrink: 0;
  align-self: center;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: -14px !important;
}
#stars-price-display .stars-pack-icon-img,
#stars-price-display .stars-pack-icon-img--3,
#stars-price-display .stars-pack-icon-img--4 {
  position: absolute !important;
  width: 70px !important;
  height: 70px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(calc(-50% - 8px), calc(-50% + 0.3px)) !important;
  object-fit: contain !important;
  display: block !important;
}
#stars-price-display .stars-pack-icon-img--1 {
  position: absolute !important;
  width: 70px !important;
  height: 70px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(calc(-50% - 8px), calc(-50% + 1.8px)) !important;
  object-fit: contain !important;
  display: block !important;
}
#stars-price-display .stars-pack-icon-img--2 {
  position: absolute !important;
  width: 70px !important;
  height: 70px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(calc(-50% - 10px), calc(-50% + 0.8px)) !important;
  object-fit: contain !important;
  display: block !important;
}

/* Recipient */
/* Segmented control — pill-переключатель */
.recipient-toggle {
  display:flex; border-radius:var(--radius-md); margin-top:16px;
  background: rgba(15,26,43,.70);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--card-shadow);
  position: relative;
  padding: 3px;
  gap: 0;
}
.segment-pill {
  position: absolute;
  top: 3px; bottom: 3px;
  width: calc(50% - 3px);
  left: 3px;
  /* верх светлее, низ темнее — ощущение металла */
  background: linear-gradient(180deg, #f3cf6a 0%, #d9b24a 100%);
  border-radius: calc(var(--radius-md) - 3px);
  /* тень вниз (слой) + внешний блик + внутренний блик сверху */
  box-shadow:
    0 2px 8px rgba(0,0,0,.30),
    0 1px 0 rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.28);
  transition: left 220ms cubic-bezier(.34,1.2,.64,1);
  pointer-events: none;
  z-index: 0;
}
.segment-pill.to-other {
  left: calc(50%);
}
.recipient-toggle button {
  flex:1; padding:11px 13px; border:none; background:transparent;
  font-size:14px; font-weight:500; cursor:pointer;
  color: rgba(255,255,255,.40);
  transition: color .2s ease;
  position: relative; z-index: 1;
  border-radius: calc(var(--radius-md) - 3px);
}
.recipient-toggle button.active {
  color: #1A0F00;
  font-weight: 700;
}
/* Поле ввода — тонкая рамка, мягкий focus */
.recipient-input { margin-top:12px; position: relative; }
.recipient-input input {
  width:100%; padding:13px 40px 13px 16px; border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-md); font-size:15px;
  background: rgba(15,26,43,.60);
  color:var(--tg-theme-text-color); outline:none; transition: border-color .2s, box-shadow .2s;
  box-shadow: var(--card-shadow);
  -webkit-appearance: none; box-sizing: border-box;
}
.recipient-input input::placeholder { color:var(--text-secondary); }
.recipient-input input:focus {
  border-color: rgba(255,198,77,.45);
  box-shadow: 0 0 0 2px rgba(255,198,77,.12);
}
.recipient-hint {
  font-size: 11px; color: var(--text-secondary); opacity: .70;
  margin: 5px 0 0 2px; padding: 0;
}
.username-check-icon {
  position: absolute; right: 14px; top: 17px;
  font-size: 14px; color: rgba(100,220,100,.85);
  transition: opacity .2s;
}
/* Saved recipients dropdown */
#saved-recipients-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: rgba(13, 24, 41, 0.97);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  z-index: 300;
  overflow: hidden;
}
.sr-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  transition: background .15s;
}
.sr-item:not(:last-child) {
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.sr-item:hover, .sr-item:active {
  background: rgba(61,235,255,.08);
}
.sr-name {
  font-size: 14px;
  color: rgba(255,255,255,.9);
}
.sr-delete {
  background: none;
  border: none;
  color: rgba(255,255,255,.3);
  font-size: 13px;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.sr-delete:hover {
  color: var(--danger);
  background: rgba(239,68,68,.12);
}

/* fade+slide анимация поля ввода */
#recipient-other-input {
  transition: opacity .2s ease, transform .2s ease;
}
#recipient-other-input.hidden {
  opacity: 0; transform: translateY(-8px); pointer-events: none; display: block !important;
  visibility: hidden;
}
#recipient-other-input.visible {
  opacity: 1; transform: translateY(0); visibility: visible;
}
.recipient-display {
  margin-top:12px; padding:14px 16px; background: rgba(15,26,43,.60);
  border-radius:var(--radius-md); font-size:14px; color:var(--tg-theme-text-color);
  border:1px solid rgba(255,255,255,.10); box-shadow: var(--card-shadow);
}
.recipient-display .label { color:var(--text-secondary); font-size:12px; margin-bottom:4px; font-weight:500; }
/* @username в режиме "Себе" — яркий */
#self-username { color: var(--accent); font-weight: 700; font-size: 15px; }
/* Знак @ имеет другие метрики глифа — сдвигаем вниз на 1px для выравнивания с буквами */
.at-chr { display: inline-block; position: relative; top: 1px; }

/* ── Recipient / Steam account preview card ── */
.user-preview {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(15,26,43,.65);
  border: 1px solid var(--accent-border, rgba(61,235,255,.18));
  border-radius: var(--radius-md, 14px);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 0 12px rgba(61,235,255,.06);
}
.user-preview.hidden { opacity: 0; transform: translateY(-6px); pointer-events: none; display: none !important; }
.user-preview.loading { opacity: .55; }
.user-preview__avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(61,235,255,.12);
  border: 1.5px solid rgba(61,235,255,.25);
  flex-shrink: 0;
  object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: var(--accent);
  overflow: hidden;
}
.user-preview__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.user-preview__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.user-preview__name { font-weight: 700; color: var(--tg-theme-text-color, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-preview__username { font-size: 12px; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-preview__not-found { color: var(--text-secondary, #8899aa); font-style: italic; }
.user-preview__avatar--unknown {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
  color: rgba(255,255,255,.5);
}

/* (steam-calc styles moved to .steam-calc-widget block above) */

/* Summary */
.summary-card {
  background: linear-gradient(170deg, rgba(61,235,255,.16) 0%, rgba(15,26,43,.52) 50%, rgba(37,99,235,.07) 100%);
  border-radius: var(--radius-lg);
  padding: 18px; margin-top: 16px;
  border: 1px solid rgba(61,235,255,.14);
  box-shadow: 0 8px 28px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.18),
              inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.12);
  position: relative; overflow: hidden;
}
/* Мягкий золотой halo позади цены — ощущение ценности */
.summary-card::after {
  content: '';
  position: absolute;
  bottom: -20px; right: -20px;
  width: 200px; height: 140px;
  background: radial-gradient(ellipse at center, rgba(255,198,77,.08) 0%, transparent 65%);
  pointer-events: none;
}
/* Secondary rows (ID, date) — dimmer */
.summary-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; font-size: 14px; }
.summary-row .label { color: var(--text-secondary); font-weight: 400; }
/* Название товара — тёплый приглушённый, не спорит с ценой */
.summary-row .value { font-weight: 600; color: rgba(255,230,180,.72); display: flex; align-items: center; gap: 4px; }
/* Dim secondary rows */
.summary-row.row-secondary .label,
.summary-row.row-secondary .value { color: rgba(255,255,255,.38); font-size: 12px; }
/* PNG иконка звезды внутри summary-card — компактный размер */
.summary-card .stars-pack-icon-wrap {
  width: 18px;
  height: 18px;
  display: inline-block;
  position: relative;
  top: 1px;
}
.summary-card .stars-pack-icon-img {
  width: 55px;
  height: 55px;
}
/* Число в строке товара (Stars count) — чуть жирнее */
.summary-row .value .stars-count { font-weight:800; color: rgba(255,230,180,.88); }
/* Stars слово — мельче и тусклее */
.summary-row .value .stars-label { font-size:12px; font-weight:500; color: rgba(255,230,180,.50); margin-left:2px; vertical-align:1px; }
.summary-total {
  border-top: 1px solid rgba(61,235,255,.12);
  margin-top: 14px; padding-top: 14px;
}
/* Итого — главный якорь экрана, glow */
.summary-total .label { font-weight: 600; color: rgba(255,255,255,.70) !important; }
.summary-total .value {
  font-size: 22px; color: var(--accent); font-weight: 800; letter-spacing: -.3px;
  text-shadow: 0 0 16px rgba(61,235,255,.40), 0 0 32px rgba(61,235,255,.18);
}
/* shimmer на цене для крупных паков (35k+) — используем готовый .shimmer-text-gold */
.summary-total .value .price-shimmer {
  display: inline;
  background: linear-gradient(90deg, #FFC64D 0%, #FFC64D 35%, #fff8e0 50%, #FFC64D 65%, #FFC64D 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  will-change: background-position;
  animation: shimmerPass 9s ease-in-out infinite;
}
/* Зелёная рамка на валидном нике */
.recipient-input input.valid {
  border-color: rgba(100,220,100,.35);
}
/* Красный hint при ошибке */
.recipient-hint.error {
  color: rgba(255,100,100,.85);
  opacity: 1;
}
/* Radial gold glow снизу экрана получателя — усиленный */
#screen-recipient::after {
  content: '';
  position: fixed;
  bottom: 60px; left: 50%;
  transform: translateX(-50%);
  width: 340px; height: 220px;
  background: radial-gradient(ellipse at center, rgba(255,198,77,.055) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
/* Segment pill — ещё глубже: сильнее тень + outer glow */
.segment-pill {
  box-shadow:
    0 3px 10px rgba(0,0,0,.35),
    0 1px 0 rgba(255,255,255,.10),
    inset 0 1px 0 rgba(255,255,255,.32),
    0 0 0 1px rgba(255,198,77,.15);
}

/* ── Экраны с CTA внизу — flex-column, кнопка прижата к низу ── */
/* Steam / Получатель / Оплата / Stars custom — fixed внизу, скрываются при открытой клавиатуре */
#stars-custom-cta-wrap,
#steam-cta-wrap,
#recipient-cta-wrap,
#payment-cta-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 18px calc(var(--safe-bottom, 0px) + 16px);
  background: none;
  z-index: 200;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0ms;
}
#stars-custom-cta-wrap .btn-stars-cta {
  margin-top: 0;
}
html.kb-open #stars-custom-cta-wrap,
html.kb-open #steam-cta-wrap,
html.kb-open #recipient-cta-wrap,
html.kb-open #payment-cta-wrap {
  opacity: 0;
  pointer-events: none;
}
/* Отступ снизу у экранов под fixed кнопкой */
#screen-stars-custom.active {
  padding-bottom: calc(var(--safe-bottom, 0px) + 80px);
}
#screen-steam.active {
  padding-bottom: calc(var(--safe-bottom, 0px) + 80px);
}
#screen-recipient.active {
  padding-bottom: calc(var(--safe-bottom, 0px) + 80px);
}
#screen-payment.active {
  padding-bottom: calc(var(--safe-bottom, 0px) + 80px);
}
/* stars-packs и admin покрываются общим .screen.active — специфика не нужна */
.recipient-pay-btn {
  width: 100%;
  padding: 16px 24px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  /* Золотой текст */
  color: #1a0e00;
  /* Золотой градиент — главный акцент */
  background: linear-gradient(180deg, #f5d478 0%, #d4962a 55%, #bf841a 100%);
  /* Блик сверху + глубокая тень + золотое свечение */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 4px 20px rgba(212,150,42,.55),
    0 8px 32px rgba(180,120,20,.30),
    0 0 0 1px rgba(212,150,42,.45);
  transition: transform 130ms ease, box-shadow 130ms ease, filter 130ms ease;
  position: relative;
  overflow: hidden;
}
/* Внутренний блик — стекло сверху */
.recipient-pay-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 48%;
  background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, transparent 100%);
  border-radius: 14px 14px 0 0;
  pointer-events: none;
}
/* Shimmer sweep — одна пробежка при появлении */
.recipient-pay-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  will-change: transform, opacity;
  animation: ctaBtnShimmer 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ctaBtnShimmer {
  0%   { transform: skewX(-20deg) translateX(-200%); opacity: 0; }
  15%  { opacity: 1; }
  40%  { transform: skewX(-20deg) translateX(340%); opacity: 0; }
  100% { transform: skewX(-20deg) translateX(340%); opacity: 0; }
}
.recipient-pay-btn:active {
  transform: scale(.983);
  filter: brightness(.93);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    0 2px 12px rgba(212,150,42,.65),
    0 0 0 1px rgba(212,150,42,.55);
}
.recipient-pay-btn:disabled {
  background: linear-gradient(180deg, rgba(245,212,120,.25) 0%, rgba(212,150,42,.20) 100%);
  box-shadow: none;
  color: rgba(255,255,255,.35);
  cursor: not-allowed;
  transform: none;
  filter: none;
}

/* Pay methods */
.pay-methods { display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.pay-method {
  display:flex; align-items:center; gap:14px; padding:15px 16px;
  background: linear-gradient(135deg, rgba(61,235,255,.12), rgba(15,26,43,.45)); border-radius:var(--radius-md); cursor:pointer;
  transition:all .22s cubic-bezier(.25,.46,.45,.94); border:1.5px solid var(--border-color);
  box-shadow: var(--card-shadow);
}
.pay-method:hover { border-color: rgba(255,198,77,.30); }
.pay-method:active { transform:scale(.98); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.pay-method.selected {
  border-color: rgba(255,198,77,.55);
  background: linear-gradient(135deg, rgba(255,198,77,.10), rgba(15,26,43,.55));
  box-shadow: 0 0 0 1px rgba(255,198,77,.20), 0 4px 20px rgba(255,198,77,.10);
}
.pay-method .pm-icon { font-size:26px; }
.pay-method .pm-icon-img { width:42px; height:42px; object-fit:contain; border-radius:8px; display:block; position:relative; left:-3px; }
.pay-method .pm-name { font-size:15px; font-weight:600; color:var(--tg-theme-text-color); }
.pay-method.selected .pm-name { color: rgba(255,230,180,.95); }
.pay-method .pm-check {
  margin-left:auto; width:22px; height:22px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:transparent; transition:all .22s cubic-bezier(.34,1.2,.64,1);
  flex-shrink:0;
}
.pay-method.selected .pm-check {
  background: linear-gradient(180deg, #f5d478 0%, #d4962a 100%);
  border-color: rgba(255,198,77,.60);
  color: #1a0e00;
  box-shadow: 0 2px 8px rgba(212,150,42,.50), inset 0 1px 0 rgba(255,255,255,.30);
  transform: scale(1.08);
}

/* ── Экран оплаты — subtle animated gold drift ── */
@keyframes paymentGoldDrift {
  0%, 100% { opacity: .038; transform: scale(1) translateY(0); }
  50%       { opacity: .055; transform: scale(1.12) translateY(-10px); }
}
#screen-payment::before {
  content: '';
  position: fixed; inset: 0;
  background: radial-gradient(ellipse 100% 30% at 50% 100%, rgba(255,198,77,1) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
  animation: paymentGoldDrift 10s ease-in-out infinite;
}
#screen-payment > * { position: relative; z-index: 1; }


/* Subtitle перед способами оплаты */
#payment-method-label {
  font-size: 11px !important;
  color: rgba(255,255,255,.35) !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500 !important;
  margin-top: 20px !important;
  margin-bottom: 10px !important;
}

/* ── Кнопка "Оплатить" ── */
.payment-pay-btn {
  width: 100%;
  padding: 16px 24px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #1a0e00;
  background: linear-gradient(180deg, #f5d478 0%, #d4962a 55%, #bf841a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 4px 20px rgba(212,150,42,.55),
    0 8px 32px rgba(180,120,20,.30),
    0 0 0 1px rgba(212,150,42,.45);
  transition: transform 130ms ease, box-shadow 130ms ease, filter 130ms ease;
  position: relative;
  overflow: hidden;
}
/* Внутренний блик — стекло сверху */
.payment-pay-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 48%;
  background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, transparent 100%);
  border-radius: 14px 14px 0 0;
  pointer-events: none;
}
/* Shimmer sweep */
.payment-pay-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  will-change: transform, opacity;
  animation: ctaBtnShimmer 3.5s ease-in-out infinite;
  pointer-events: none;
}
.payment-pay-btn:active {
  transform: scale(.983);
  filter: brightness(.93);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    0 2px 12px rgba(212,150,42,.65),
    0 0 0 1px rgba(212,150,42,.55);
}
/* Подпись под кнопкой */
.payment-secure-note {
  text-align: center; margin-top: 7px;
  font-size: 11px; color: rgba(255,255,255,.22); letter-spacing: .02em;
}

/* ── Цена в итоге — усиленный weight, золотая в stars-теме ── */
.summary-total .value {
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: .5px;
  text-shadow: 0 0 18px rgba(61,235,255,.40), 0 0 36px rgba(61,235,255,.18) !important;
}
body[data-theme="stars"] .summary-total .value {
  color: #FFC64D !important;
  text-shadow: 0 0 18px rgba(255,198,77,.45), 0 0 36px rgba(255,198,77,.22) !important;
}
body[data-theme="stars"] #payment-method-label {
  color: rgba(255,198,77,.50) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  padding-bottom: 8px;
  margin-bottom: 12px !important;
}
body[data-theme="stars"] #payment-summary .summary-total .label {
  color: rgba(200,165,90,.55) !important;
}
/* Tier glow — drop-shadow работает на золотом тексте */
.summary-total[data-tier="sm"] .value {
  filter: drop-shadow(0 0 6px rgba(255,198,77,.50)) !important;
}
.summary-total[data-tier="md"] .value {
  filter: drop-shadow(0 0 10px rgba(255,198,77,.65)) drop-shadow(0 0 4px rgba(255,198,77,.40)) !important;
}
.summary-total[data-tier="lg"] .value {
  filter: drop-shadow(0 0 14px rgba(255,198,77,.85)) drop-shadow(0 0 6px rgba(255,198,77,.55)) !important;
}
/* Для shimmer (color:transparent) — drop-shadow на самом .price-shimmer */
.summary-total[data-tier="lg"] .value .price-shimmer {
  filter: drop-shadow(0 0 14px rgba(255,198,77,.85)) drop-shadow(0 0 6px rgba(255,220,120,.60)) !important;
}
/* Убрать filter с родителя если внутри shimmer (иначе двойное применение) */
.summary-total[data-tier="lg"] .value:has(.price-shimmer) {
  filter: none !important;
}

/* ── Невыбранные радио-кружки — hollow ring, почти невидимы ── */
/* Невыбранный круг — желтоватый контур */
.pay-method:not(.selected) .pm-check {
  border-width: 1.5px !important;
  border-color: rgba(255,198,77,.30) !important;
  background: transparent !important;
  opacity: .55;
}

/* ── Result screen ───────────────────────────────────────────── */
#screen-result {
  background: radial-gradient(ellipse 110% 55% at 50% -5%, rgba(61,235,255,.06) 0%, transparent 65%);
}
#screen-result.active { display:flex !important; align-items:center; justify-content:center; overflow:hidden !important; }

.result-card {
  position:relative; text-align:center;
  padding:52px 32px 64px; width:100%; max-width:360px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; overflow:visible;
}

/* Breathing ambient glow */
.result-glow {
  position:absolute; top:-80px; left:50%; transform:translateX(-50%);
  width:420px; height:420px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(61,235,255,.22) 0%, rgba(61,235,255,.07) 38%, transparent 65%);
  transition:background .5s;
  animation:result-glow-breathe 3.5s ease-in-out infinite;
}
.result-card.result--error .result-glow {
  background:radial-gradient(circle, rgba(239,68,68,.22) 0%, rgba(239,68,68,.07) 38%, transparent 65%);
}
@keyframes result-glow-breathe {
  0%,100% { opacity:.65; transform:translateX(-50%) scale(1); }
  50%      { opacity:1;   transform:translateX(-50%) scale(1.14); }
}

/* Icon area */
.result-icon-wrap {
  position:relative; width:124px; height:124px; margin-bottom:34px; flex-shrink:0;
}

/* Outermost halo — wide, very faint */
.result-icon-ring {
  position:absolute; inset:-18px; border-radius:50%;
  border:1px solid rgba(61,235,255,.09);
  animation:result-outer-ring 3.2s ease-in-out infinite;
  pointer-events:none;
}
.result-card.result--error .result-icon-ring {
  border-color:rgba(239,68,68,.12);
  animation:result-outer-ring-err 2.6s ease-in-out infinite;
}
@keyframes result-outer-ring {
  0%,100% { opacity:.4; transform:scale(1); }
  50%      { opacity:.9; transform:scale(1.05); }
}
@keyframes result-outer-ring-err {
  0%,100% { opacity:.35; transform:scale(1); }
  50%      { opacity:.8; transform:scale(1.05); }
}

/* Middle ring — glowing border */
.result-icon-wrap::before {
  content:''; position:absolute; inset:-5px; border-radius:50%; z-index:1;
  border:1.5px solid var(--accent-border);
  box-shadow:0 0 0 4px rgba(61,235,255,.055), 0 0 32px rgba(61,235,255,.28);
  animation:result-mid-ring 3.2s .6s ease-in-out infinite;
  pointer-events:none;
}
.result-card.result--error .result-icon-wrap::before {
  border-color:rgba(239,68,68,.32);
  box-shadow:0 0 0 4px rgba(239,68,68,.05), 0 0 32px rgba(239,68,68,.25);
  animation:result-mid-ring-err 2.6s .6s ease-in-out infinite;
}
@keyframes result-mid-ring {
  0%,100% { box-shadow:0 0 0 4px rgba(61,235,255,.04), 0 0 20px rgba(61,235,255,.18); }
  50%      { box-shadow:0 0 0 8px rgba(61,235,255,.08), 0 0 48px rgba(61,235,255,.38); }
}
@keyframes result-mid-ring-err {
  0%,100% { box-shadow:0 0 0 4px rgba(239,68,68,.04), 0 0 20px rgba(239,68,68,.16); }
  50%      { box-shadow:0 0 0 8px rgba(239,68,68,.08), 0 0 48px rgba(239,68,68,.32); }
}

/* Icon circle */
.result-icon-inner {
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  font-size:58px; line-height:1; border-radius:50%;
  background:linear-gradient(145deg,
    rgba(61,235,255,.18) 0%,
    rgba(61,235,255,.08) 55%,
    rgba(0,120,160,.14) 100%);
  border:1.5px solid rgba(61,235,255,.28);
  box-shadow:
    0 0 56px rgba(61,235,255,.2),
    0 0 18px rgba(61,235,255,.14),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.18);
  animation:result-icon-in .55s cubic-bezier(.34,1.56,.64,1) both;
}
.result-card.result--error .result-icon-inner {
  background:linear-gradient(145deg,
    rgba(239,68,68,.18) 0%,
    rgba(239,68,68,.08) 55%,
    rgba(180,30,30,.14) 100%);
  border-color:rgba(239,68,68,.3);
  box-shadow:
    0 0 56px rgba(239,68,68,.2),
    0 0 18px rgba(239,68,68,.12),
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(0,0,0,.18);
}

/* Title with gradient text */
.result-title {
  font-size:30px; font-weight:800; letter-spacing:-.5px; margin-bottom:10px;
  background:linear-gradient(130deg, #ffffff 10%, #9ef8ff 55%, #F6C453 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:result-text-in .48s .15s cubic-bezier(.34,1.4,.64,1) both;
}
.result-card.result--error .result-title {
  background:linear-gradient(130deg, #ffffff 15%, #fca5a5 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.result-desc {
  font-size:14px; color:var(--text-secondary); line-height:1.7; max-width:270px;
  animation:result-text-in .48s .24s cubic-bezier(.34,1.4,.64,1) both;
}
.result-card.result--error .result-desc { color:rgba(252,165,165,.78); }

/* Thin decorative divider */
.result-divider {
  width:52px; height:1.5px; border-radius:1px; margin:26px 0 0;
  background:linear-gradient(90deg, transparent, rgba(61,235,255,.35), transparent);
  animation:result-text-in .48s .31s cubic-bezier(.34,1.4,.64,1) both;
  flex-shrink:0;
}
.result-card.result--error .result-divider {
  background:linear-gradient(90deg, transparent, rgba(239,68,68,.28), transparent);
}

/* Premium CTA button */
.result-back-btn {
  margin-top:26px; padding:17px 36px; border:none; border-radius:100px;
  background:linear-gradient(135deg, #3DEBFF 0%, #00cce0 52%, #009dc4 100%);
  color:#030d14; font-size:16px; font-weight:700;
  cursor:pointer; letter-spacing:.02em;
  width:100%; max-width:292px; position:relative; overflow:hidden;
  box-shadow:
    0 10px 36px rgba(61,235,255,.32),
    0 3px 10px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,80,100,.25);
  animation:result-text-in .5s .38s cubic-bezier(.34,1.4,.64,1) both;
  transition:opacity .15s, transform .18s, box-shadow .18s;
}
/* Shimmer sweep */
.result-back-btn::before {
  content:''; position:absolute; top:0; left:-130%; width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  animation:result-btn-shimmer 3.2s 1.4s ease-in-out infinite;
  pointer-events:none; border-radius:inherit;
}
@keyframes result-btn-shimmer {
  0%    { left:-130%; }
  32%   { left:160%; }
  100%  { left:160%; }
}
.result-back-btn:active {
  opacity:.82; transform:scale(.955);
  box-shadow:0 4px 18px rgba(61,235,255,.2), 0 2px 6px rgba(0,0,0,.3);
}

/* Particles */
.result-particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.result-particle {
  position:absolute; border-radius:50%;
  width:var(--sz,5px); height:var(--sz,5px);
  opacity:0; animation:result-particle-fly var(--dur,1.2s) var(--delay,0s) ease-out forwards;
}

/* Keyframes */
@keyframes result-icon-in {
  from { transform:scale(.3); opacity:0; }
  to   { transform:scale(1);  opacity:1; }
}
@keyframes result-text-in {
  from { transform:translateY(18px); opacity:0; }
  to   { transform:translateY(0);    opacity:1; }
}
@keyframes result-particle-fly {
  0%   { transform:translate(0,0) scale(1); opacity:.95; }
  100% { transform:translate(var(--tx,0px),var(--ty,-100px)) scale(0); opacity:0; }
}
@keyframes result-shake {
  0%,100% { transform:translateX(0); }
  18%     { transform:translateX(-7px); }
  36%     { transform:translateX(7px); }
  54%     { transform:translateX(-5px); }
  72%     { transform:translateX(5px); }
  88%     { transform:translateX(-2px); }
}
.result-card.result--error .result-icon-wrap {
  animation:result-shake .55s .15s cubic-bezier(.36,.07,.19,.97) both;
}

/* ── Result screen — Light theme ─────────────────────── */
body.theme-light #screen-result {
  background: radial-gradient(ellipse 110% 55% at 50% -5%, rgba(0,160,200,.09) 0%, transparent 65%);
}
body.theme-light #screen-result.active { overflow:hidden !important; }

/* Ambient glow — success */
body.theme-light .result-glow {
  background: radial-gradient(circle, rgba(0,170,210,.20) 0%, rgba(0,170,210,.07) 40%, transparent 65%);
  opacity:.75;
}
/* Ambient glow — error */
body.theme-light .result-card.result--error .result-glow {
  background: radial-gradient(circle, rgba(220,38,38,.16) 0%, rgba(220,38,38,.05) 40%, transparent 65%);
}

/* Outer halo ring — success */
body.theme-light .result-icon-ring {
  border-color: rgba(0,150,190,.18);
  animation: result-outer-ring 3.2s ease-in-out infinite;
}
/* Outer halo ring — error */
body.theme-light .result-card.result--error .result-icon-ring {
  border-color: rgba(220,38,38,.20);
}

/* Middle ring — success (static, no neon pulse) */
body.theme-light .result-icon-wrap::before {
  border-color: rgba(0,155,195,.38);
  box-shadow: 0 0 0 4px rgba(0,155,195,.06), 0 0 18px rgba(0,155,195,.14);
  animation: none;
}
/* Middle ring — error */
body.theme-light .result-card.result--error .result-icon-wrap::before {
  border-color: rgba(220,38,38,.32);
  box-shadow: 0 0 0 4px rgba(220,38,38,.06), 0 0 18px rgba(220,38,38,.12);
  animation: none;
}

/* Icon circle — success */
body.theme-light .result-icon-inner {
  background: linear-gradient(145deg,
    rgba(220,248,255,1) 0%,
    rgba(200,242,252,1) 55%,
    rgba(180,232,248,1) 100%);
  border: 1.5px solid rgba(0,155,195,.35);
  box-shadow:
    0 4px 28px rgba(0,155,195,.15),
    0 1px 8px rgba(0,155,195,.10),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(0,100,140,.08);
}
/* Icon circle — error */
body.theme-light .result-card.result--error .result-icon-inner {
  background: linear-gradient(145deg,
    rgba(255,237,237,1) 0%,
    rgba(254,226,226,1) 55%,
    rgba(252,215,215,1) 100%);
  border: 1.5px solid rgba(220,38,38,.28);
  box-shadow:
    0 4px 28px rgba(220,38,38,.12),
    0 1px 8px rgba(220,38,38,.08),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(180,0,0,.05);
}

/* Title — success */
body.theme-light .result-title {
  background: linear-gradient(130deg, #0a3d57 10%, #007fa0 55%, #c08800 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
/* Title — error */
body.theme-light .result-card.result--error .result-title {
  background: linear-gradient(130deg, #1a1a1a 20%, #b91c1c 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Description */
body.theme-light .result-desc {
  color: rgba(0,0,0,.52);
}
body.theme-light .result-card.result--error .result-desc {
  color: rgba(185,28,28,.72);
}

/* Divider */
body.theme-light .result-divider {
  background: linear-gradient(90deg, transparent, rgba(0,155,195,.42), transparent);
}
body.theme-light .result-card.result--error .result-divider {
  background: linear-gradient(90deg, transparent, rgba(220,38,38,.30), transparent);
}

/* ── Processing steps ── */
.proc-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 28px;
}
.proc-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.pstep-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.pstep-lbl {
  font-size: 11px;
  color: rgba(255,255,255,.35);
  white-space: nowrap;
  transition: color .3s;
}
.pstep-line {
  flex: 1;
  height: 2px;
  min-width: 32px;
  max-width: 64px;
  background: rgba(255,255,255,.1);
  margin-bottom: 21px;
  transition: background .3s;
}
.proc-step.pstep--done .pstep-dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(61,235,255,.4);
}
.proc-step.pstep--done .pstep-lbl { color: var(--accent); }
.proc-step.pstep--active .pstep-dot {
  background: transparent;
  border-color: var(--accent);
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(61,235,255,.18), 0 0 12px rgba(61,235,255,.25);
  animation: pstep-pulse 1.4s ease-in-out infinite;
}
.proc-step.pstep--active .pstep-lbl { color: var(--tg-theme-text-color); font-weight: 700; }
.pstep-line.pline--done { background: var(--accent); }
@keyframes pstep-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(61,235,255,.18), 0 0 12px rgba(61,235,255,.25); }
  50%       { box-shadow: 0 0 0 5px rgba(61,235,255,.08), 0 0 18px rgba(61,235,255,.35); }
}

.processing-cancel-btn {
  margin-top: 28px;
  width: 100%;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid rgba(239,68,68,.25);
  background: rgba(239,68,68,.08);
  color: #f87171;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, opacity .2s;
}
.processing-cancel-btn:active { opacity: .75; }
.processing-cancel-btn:disabled { opacity: .45; cursor: default; }

.spinner {
  display:inline-block; width:20px; height:20px;
  border:2.5px solid var(--border-color);
  border-top-color:var(--accent);
  border-radius:50%; animation:spin .7s cubic-bezier(.5,.15,.5,.85) infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* Profile */
/* ===== Profile Avatar ===== */
.profile-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8px;
  margin-bottom: 6px;
  position: relative;
}
/* Ambient glow behind avatar — separate layer so it doesn't clip */
.profile-avatar-wrap::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(61,235,255,.22) 0%,
    rgba(37,99,235,.14) 38%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(12px);
}
.profile-avatar {
  width: 100px; height: 100px; border-radius: 50%;
  background: linear-gradient(145deg,
    rgba(61,235,255,.75) 0%,
    rgba(37,99,235,.90) 45%,
    rgba(183,116,255,.70) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; font-weight: 800;
  box-shadow:
    0 0 0 2.5px rgba(61,235,255,.35),
    0 0 0 5px rgba(61,235,255,.10),
    0 8px 28px rgba(37,99,235,.45),
    0 2px 8px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.15);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  z-index: 1;
}
/* Initials span — above shimmer pseudo-element */
.profile-avatar-initials {
  position: relative;
  z-index: 2;
  font-size: 40px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.30);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
/* Real photo img — fills the circle, above all pseudo-elements */
.profile-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  z-index: 3;
}
/* Inner light shimmer */
.profile-avatar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 60% 55% at 35% 25%,
      rgba(255,255,255,.28) 0%,
      transparent 55%),
    radial-gradient(ellipse at center,
      rgba(61,235,255,.12) 0%,
      transparent 70%);
  z-index: 1;
  pointer-events: none;
}
/* Subtle bottom glow under avatar */
.profile-avatar::after {
  content: '';
  position: absolute;
  bottom: -18px; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 20px;
  background: radial-gradient(ellipse, rgba(61,235,255,.30) 0%, transparent 70%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
}
.profile-name {
  text-align: center;
  font-size: 24px; font-weight: 800;
  margin-top: 18px; margin-bottom: 5px;
  color: var(--tg-theme-text-color);
  letter-spacing: -.3px;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  position: relative; z-index: 1;
}
.profile-username {
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,.55);
  font-weight: 500;
  letter-spacing: .03em;
  margin-bottom: 28px;
  position: relative; z-index: 1;
}
#screen-profile .header h1 { font-size:18px; font-weight:700; letter-spacing:.04em; color:rgba(255,255,255,.55); }
.profile-card {
  background: linear-gradient(160deg,
    rgba(61,235,255,.11) 0%,
    rgba(15,26,43,.65) 50%,
    rgba(37,99,235,.09) 100%);
  border-radius:var(--radius-lg);
  padding:4px 18px; margin-bottom:14px;
  border:1px solid rgba(61,235,255,.20);
  box-shadow: var(--card-shadow);
}
.profile-setting {
  display:flex; justify-content:space-between; align-items:center;
  padding:15px 0; border-bottom:1px solid var(--border-color);
}
.profile-setting:last-child { border-bottom:none; }
.profile-setting .label { font-size:15px; color:var(--tg-theme-text-color); font-weight:500; }
.profile-setting--sub { padding:10px 0 10px 16px; border-bottom:1px solid var(--border-color); opacity:0.85; }
.profile-setting--sub .label { font-size:14px; }
.profile-menu-btn {
  background:
    linear-gradient(160deg,
      rgba(255,255,255,.055) 0%,
      rgba(61,235,255,.08) 0%,
      rgba(15,26,43,.55) 60%,
      rgba(37,99,235,.06) 100%);
  border-radius: var(--radius-md);
  padding: 14px 16px 14px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: transform 160ms cubic-bezier(.25,.46,.45,.94),
              box-shadow 160ms ease,
              border-color 160ms ease,
              background 160ms ease;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow:
    var(--card-shadow),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.12);
  position: relative;
  overflow: hidden;
}
/* Subtle top-edge highlight line */
.profile-menu-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.10) 40%, rgba(61,235,255,.14) 60%, transparent 100%);
  pointer-events: none;
}
.profile-menu-btn:hover {
  border-color: rgba(61,235,255,.22);
  background:
    linear-gradient(160deg,
      rgba(61,235,255,.13) 0%,
      rgba(15,26,43,.60) 55%,
      rgba(37,99,235,.10) 100%);
  box-shadow:
    var(--card-shadow-hover),
    0 0 0 1px rgba(61,235,255,.10),
    inset 0 1px 0 rgba(255,255,255,.10);
  transform: translateY(-1px);
}
.profile-menu-btn:active {
  transform: scale(.975);
  background:
    linear-gradient(160deg,
      rgba(61,235,255,.16) 0%,
      rgba(15,26,43,.65) 55%,
      rgba(37,99,235,.12) 100%);
  box-shadow:
    0 2px 8px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08);
  border-color: rgba(61,235,255,.28);
  transition-duration: 80ms;
}
/* Icon wrap — mini circle */
.profile-menu-btn .icon-wrap {
  width: 34px; height: 34px;
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(61,235,255,.18) 0%, rgba(37,99,235,.22) 100%);
  border: 1px solid rgba(61,235,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow:
    0 2px 8px rgba(37,99,235,.20),
    inset 0 1px 0 rgba(255,255,255,.14);
  transition: box-shadow 160ms ease;
}
.profile-menu-btn:hover .icon-wrap {
  box-shadow:
    0 3px 12px rgba(61,235,255,.28),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.profile-menu-btn .text {
  flex: 1;
  font-size: 15px; font-weight: 600;
  color: var(--tg-theme-text-color);
  letter-spacing: -.01em;
}
.profile-menu-btn .arrow {
  font-size: 18px;
  color: rgba(255,255,255,.30);
  transition: transform 180ms ease, color 180ms ease;
  line-height: 1;
}
.profile-menu-btn:hover .arrow {
  color: rgba(61,235,255,.75);
  transform: translateX(3px);
}

/* Toggle */
.toggle-switch {
  position:relative; width:50px; height:30px;
  background:var(--border-color); border-radius:15px; cursor:pointer;
  transition: background 150ms ease, box-shadow 150ms ease;
}
.toggle-switch.active {
  background: linear-gradient(180deg, #4fa3ff 0%, #1a6fd4 100%);
  box-shadow:
    0 0 0 1px rgba(79,163,255,.30),
    0 2px 12px rgba(79,163,255,.28),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.toggle-switch .knob {
  position:absolute; top:3px; left:3px; width:24px; height:24px;
  background:#fff; border-radius:50%;
  transition: left 150ms cubic-bezier(.34,1.56,.64,1), box-shadow 150ms ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.toggle-switch.active .knob {
  left:23px;
  box-shadow:
    0 2px 6px rgba(0,0,0,.20),
    0 0 8px rgba(79,163,255,.35);
}

/* Theme toggle knob icon */
.theme-knob-icon {
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
  transition: opacity 150ms ease;
  user-select: none;
}
/* Emoji set via JS textContent in applyTheme() — no CSS ::before needed */
.theme-toggle-switch .knob {
  display: flex; align-items: center; justify-content: center;
}
/* Active state — amber/yellow gradient for light theme */
.theme-toggle-switch.active {
  background: linear-gradient(180deg, #f8c950 0%, #e8a317 100%);
  box-shadow:
    0 0 0 1px rgba(248,201,80,.35),
    0 2px 12px rgba(248,201,80,.30),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.theme-toggle-switch.active .knob {
  box-shadow:
    0 2px 6px rgba(0,0,0,.20),
    0 0 8px rgba(248,201,80,.45);
}

/* ===== Light theme overrides ===== */
/* ══════════════════════════════════════════════════════
   PILAXED LIGHT THEME — Full Redesign
   Clean · Soft · Glassy · Deep (shadows, not glow)
══════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────
   LIGHT THEME ANIMATIONS
   Philosophy: depth through shadow, not glow.
   No neon. Subtle movement, slow timing.
   ────────────────────────────────────────────────────── */

/* 1. Selected card "breath" — barely visible shadow pulse */
@keyframes lightCardBreath {
  0%, 100% { box-shadow: 0 2px 8px rgba(100,60,200,.07), 0 8px 28px rgba(100,60,200,.10); }
  50%       { box-shadow: 0 4px 14px rgba(100,60,200,.12), 0 12px 36px rgba(100,60,200,.16); }
}
@keyframes lightCardBreathGreen {
  0%, 100% { box-shadow: 0 2px 8px rgba(20,120,70,.07), 0 8px 28px rgba(20,120,70,.10); }
  50%       { box-shadow: 0 4px 14px rgba(20,120,70,.12), 0 12px 36px rgba(20,120,70,.16); }
}
@keyframes lightCardBreathGold {
  0%, 100% { box-shadow: 0 2px 8px rgba(160,120,20,.07), 0 8px 26px rgba(160,120,20,.10); }
  50%       { box-shadow: 0 4px 14px rgba(160,120,20,.13), 0 12px 34px rgba(160,120,20,.17); }
}
@keyframes lightCardBreathBlue {
  0%, 100% { box-shadow: 0 2px 8px rgba(30,80,200,.07), 0 8px 26px rgba(30,80,200,.10); }
  50%       { box-shadow: 0 4px 14px rgba(30,80,200,.13), 0 12px 34px rgba(30,80,200,.17); }
}

/* 2. Background slow breathe — opacity pulse on bg-layer overlay */
@keyframes lightBgBreathe {
  0%, 100% { opacity: 0.04; }
  50%       { opacity: 0.09; }
}

/* 3. Light shimmer for banner titles — dark accent sweep, no neon */
@keyframes lightShimmerGold {
  0%   { background-position: 150% center; }
  100% { background-position: -50% center; }
}
@keyframes lightShimmerBlue {
  0%   { background-position: 150% center; }
  100% { background-position: -50% center; }
}
@keyframes lightShimmerPurple {
  0%   { background-position: 150% center; }
  100% { background-position: -50% center; }
}
@keyframes lightShimmerGreen {
  0%   { background-position: 150% center; }
  100% { background-position: -50% center; }
}

/* 4. Falling gold stars — small ✦ drift down across banner */
@keyframes starsFall1 {
  0%   { transform: translateY(-18px) rotate(0deg);   opacity: 0; }
  10%  { opacity: .55; }
  85%  { opacity: .40; }
  100% { transform: translateY(90px) rotate(25deg);   opacity: 0; }
}
@keyframes starsFall2 {
  0%   { transform: translateY(-12px) rotate(0deg);   opacity: 0; }
  12%  { opacity: .45; }
  80%  { opacity: .30; }
  100% { transform: translateY(80px) rotate(-20deg);  opacity: 0; }
}
@keyframes starsFall3 {
  0%   { transform: translateY(-20px) rotate(10deg);  opacity: 0; }
  8%   { opacity: .60; }
  88%  { opacity: .35; }
  100% { transform: translateY(95px) rotate(-10deg);  opacity: 0; }
}
/* Gifts — хаотичное падение подарков, 5 разных траекторий */
@keyframes giftFall1 {
  0%   { transform: translateY(-20px) translateX(0px)   rotate(-8deg);  opacity: 0; }
  8%   { opacity: .65; }
  90%  { opacity: .50; }
  100% { transform: translateY(110px) translateX(12px)  rotate(18deg);  opacity: 0; }
}
@keyframes giftFall2 {
  0%   { transform: translateY(-16px) translateX(0px)   rotate(12deg);  opacity: 0; }
  10%  { opacity: .55; }
  88%  { opacity: .40; }
  100% { transform: translateY(100px) translateX(-14px) rotate(-22deg); opacity: 0; }
}
@keyframes giftFall3 {
  0%   { transform: translateY(-22px) translateX(0px)   rotate(5deg);   opacity: 0; }
  6%   { opacity: .70; }
  85%  { opacity: .45; }
  100% { transform: translateY(115px) translateX(8px)   rotate(-15deg); opacity: 0; }
}
@keyframes giftFall4 {
  0%   { transform: translateY(-14px) translateX(0px)   rotate(-15deg); opacity: 0; }
  12%  { opacity: .50; }
  92%  { opacity: .35; }
  100% { transform: translateY(105px) translateX(-10px) rotate(28deg);  opacity: 0; }
}
@keyframes giftFall5 {
  0%   { transform: translateY(-18px) translateX(0px)   rotate(20deg);  opacity: 0; }
  9%   { opacity: .60; }
  87%  { opacity: .42; }
  100% { transform: translateY(108px) translateX(16px)  rotate(-8deg);  opacity: 0; }
}

/* 5. Cat mascot on banner — gentle float */
@keyframes catFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg);  }
  30%       { transform: translateY(-5px) rotate(.8deg); }
  65%       { transform: translateY(-3px) rotate(-.5deg); }
}
/* 6. Pack item soft gold pulse (idle glow) */
@keyframes starsPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,.08), 0 0 0 0 rgba(220,175,40,.00); }
  50%       { box-shadow: 0 10px 28px rgba(180,140,20,.12), 0 0 0 3px rgba(220,175,40,.06); }
}
/* 7. Choice-button shimmer border sweep */
@keyframes starsChoiceBorderGlow {
  0%, 100% { border-color: rgba(230,185,77,.22); box-shadow: 0 6px 18px rgba(0,0,0,.07); }
  50%       { border-color: rgba(230,185,77,.48); box-shadow: 0 8px 24px rgba(200,155,30,.13); }
}

/* ── Kill dark-theme ambient animations in light ── */
body.theme-light .hero-glow                              { animation: none !important; opacity: 0 !important; }
body.theme-light .hero-mascot                            { animation: none !important; }
body.theme-light[data-theme="stars"] #screen-stars::before,
body.theme-light[data-theme="stars"] #screen-stars::after { animation: none !important; display: none !important; }
body.theme-light[data-theme="stars"] #stars-sky          { display: none !important; }
/* Stars twinkle & particles — suppress */
body.theme-light[data-theme="stars"] #stars-grid,
body.theme-light[data-theme="stars"] #stars-grid::before,
body.theme-light[data-theme="stars"] #stars-grid::after  { animation: none !important; }
body.theme-light[data-theme="stars"] .stars-pack-item    { animation: none !important; }
/* Premium featured shimmer — suppress dark shimmer, use light breath instead */
body.theme-light[data-theme="premium"] .product-card.premium-featured::after { animation: none !important; display: none !important; }
/* Gifts emerald drift — suppress in light theme */
body.theme-light[data-theme="gifts"] #gifts-bg { display: none !important; }
body.theme-light[data-theme="gifts"] #screen-gifts::after  { animation: none !important; display: none !important; }

/* ── Light shimmer on banner titles — replaces neon shimmerPass ── */
/* NOTE: background & background-size MUST NOT have !important — otherwise CSS animation
   cannot override background-position (animated property). High specificity beats dark rules. */
/* Stars: warm amber-gold sweep */
body.theme-light[data-theme="stars"] #screen-stars .pixel-title .shimmer-text-gold {
  background: linear-gradient(90deg, #8a6010 0%, #8a6010 25%, #c69222 45%, #d4a830 55%, #8a6010 75%, #8a6010 100%);
  background-size: 250% auto;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter: none !important;
  animation: lightShimmerGold 8s ease-in-out infinite !important;
}
/* Steam: deep blue sweep */
body.theme-light[data-theme="steam"] #screen-steam .pixel-title .shimmer-text-blue {
  background: linear-gradient(90deg, #1a3a7a 0%, #1a3a7a 25%, #2060c8 45%, #4a8ae0 55%, #1a3a7a 75%, #1a3a7a 100%);
  background-size: 250% auto;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter: none !important;
  animation: lightShimmerBlue 8s ease-in-out infinite !important;
}
/* Premium: deep violet sweep */
body.theme-light[data-theme="premium"] #screen-premium .pixel-title .shimmer-text-purple {
  background: linear-gradient(90deg, #4a1278 0%, #4a1278 25%, #8a3ff0 45%, #a870ff 55%, #4a1278 75%, #4a1278 100%);
  background-size: 250% auto;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter: none !important;
  animation: lightShimmerPurple 8s ease-in-out infinite !important;
}
/* Gifts: forest green sweep */
body.theme-light[data-theme="gifts"] #screen-gifts .pixel-title .shimmer-text-emerald {
  background: linear-gradient(90deg, #0a4a28 0%, #0a4a28 25%, #1a8050 45%, #28b870 55%, #0a4a28 75%, #0a4a28 100%);
  background-size: 250% auto;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter: none !important;
  animation: lightShimmerGreen 8s ease-in-out infinite !important;
}

/* ── lightCardBreath on selected cards ── */
body.theme-light[data-theme="premium"] .product-card.selected {
  animation: lightCardBreath 4s ease-in-out infinite !important;
}
body.theme-light[data-theme="gifts"] .product-card.selected {
  animation: lightCardBreathGreen 4s ease-in-out infinite !important;
}
body.theme-light[data-theme="stars"] .stars-pack-item.selected,
body.theme-light[data-theme="stars"] .stars-pack-item:focus-visible {
  animation: lightCardBreathGold 4s ease-in-out infinite !important;
}
body.theme-light[data-theme="steam"] .pay-method.selected {
  animation: lightCardBreathBlue 4s ease-in-out infinite !important;
}

/* ── lightBgBreathe on #bg-layer — subtle opacity pulse (safest: doesn't affect child filters) ── */
body.theme-light[data-theme="stars"] #bg-layer,
body.theme-light[data-theme="premium"] #bg-layer,
body.theme-light[data-theme="gifts"] #bg-layer,
body.theme-light[data-theme="steam"] #bg-layer {
  animation: lightBgBreathe 18s ease-in-out infinite !important;
}

/* ── Transition: no 'all' in light — box-shadow must animate freely ── */
body.theme-light .product-card {
  transition: transform .12s ease !important;
}
body.theme-light .stars-pack-item {
  transition: transform .12s ease !important;
}
body.theme-light .pay-method {
  transition: border-color .22s ease, background .22s ease, transform .12s ease !important;
}

/* ── Hover: no scale in light theme — only shadow lift ── */
body.theme-light .product-card:hover {
  transform: none !important;
}
body.theme-light .stars-pack-item:hover {
  transform: none !important;
}

/* ── 1. Root tokens & body background ── */
body.theme-light {
  --tg-theme-bg-color: #f5f7fb;
  --tg-theme-text-color: #1f2430;
  --tg-theme-hint-color: #6b7280;
  --tg-theme-secondary-bg-color: rgba(255,255,255,.85);
  --tg-theme-header-bg-color: rgba(245,247,251,.95);
  --border-color: rgba(0,0,0,.06);
  --card-shadow: 0 10px 30px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --card-shadow-hover: 0 14px 38px rgba(37,99,235,.12), 0 3px 8px rgba(0,0,0,.06);
  --text-secondary: #6b7280;
  --accent-soft: rgba(37,99,235,.08);
  --accent-border: rgba(37,99,235,.20);
  background: #f4f6fb;
}
/* ── Processing screen — light theme ── */
body.theme-light .spinner {
  border-color: rgba(0,0,0,.10);
  border-top-color: #2563eb;
}
body.theme-light .pstep-dot {
  border-color: rgba(0,0,0,.18);
  background: rgba(0,0,0,.04);
}
body.theme-light .pstep-lbl {
  color: rgba(0,0,0,.38);
}
body.theme-light .pstep-line {
  background: rgba(0,0,0,.12);
}
body.theme-light .proc-step.pstep--done .pstep-dot {
  background: #2563eb;
  border-color: #2563eb;
  box-shadow: 0 0 8px rgba(37,99,235,.40);
}
body.theme-light .proc-step.pstep--done .pstep-lbl { color: #2563eb; }
body.theme-light .proc-step.pstep--active .pstep-dot {
  background: transparent;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15), 0 0 12px rgba(37,99,235,.22);
  animation: pstep-pulse-light 1.4s ease-in-out infinite;
}
body.theme-light .proc-step.pstep--active .pstep-lbl { color: #1f2430; font-weight: 700; }
body.theme-light .pstep-line.pline--done { background: #2563eb; }
@keyframes pstep-pulse-light {
  0%, 100% { box-shadow: 0 0 0 3px rgba(37,99,235,.15), 0 0 12px rgba(37,99,235,.22); }
  50%       { box-shadow: 0 0 0 5px rgba(37,99,235,.08), 0 0 18px rgba(37,99,235,.30); }
}
body.theme-light .processing-cancel-btn {
  background: rgba(220,38,38,.06);
  border-color: rgba(220,38,38,.20);
  color: #dc2626;
}

/* html bg set via JS applyTheme — document.documentElement.style.backgroundColor */
body.theme-light #bg-layer { opacity: 0.04; }
body.theme-light .screen { background: transparent; }

/* ── 2. Universal card glass style ── */
/* All cards: white glass, blur, deep shadow — NO glow in light theme */
body.theme-light .cat-card,
body.theme-light .stars-pack-item,
body.theme-light .product-card,
body.theme-light .pack-card,
body.theme-light .profile-card,
body.theme-light .order-card,
body.theme-light .stat-card,
body.theme-light .referral-card,
body.theme-light .support-card,
body.theme-light .quick-btn {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── Category cards — glass with per-category halo ── */
/* Cat cards — light theme */
body.theme-light .cat-card {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
/* Скрываем тёмные overlay-слои */
body.theme-light .cat-card::before { display: none !important; }
body.theme-light .cat-card::after  { display: none !important; }

/* Stars — тёплый золотой */
body.theme-light #cat-stars {
  background: linear-gradient(145deg, #fffbeb, #fff8d6) !important;
  border-color: rgba(255,198,60,.35) !important;
  box-shadow: 0 8px 20px rgba(255,198,60,.15), 0 0 0 1px rgba(255,198,60,.12) inset !important;
}
body.theme-light #cat-stars:hover {
  border-color: rgba(255,198,60,.55) !important;
  box-shadow: 0 12px 28px rgba(255,198,60,.22), 0 0 0 1px rgba(255,198,60,.20) inset !important;
}
body.theme-light #cat-stars .name { color: #92600a !important; }
body.theme-light #cat-stars .desc { color: rgba(146,96,10,.55) !important; }

/* Steam — холодный голубой */
body.theme-light #cat-steam {
  background: linear-gradient(145deg, #eff6ff, #e0eeff) !important;
  border-color: rgba(26,111,255,.25) !important;
  box-shadow: 0 8px 20px rgba(26,111,255,.12), 0 0 0 1px rgba(26,111,255,.10) inset !important;
}
body.theme-light #cat-steam:hover {
  border-color: rgba(26,111,255,.45) !important;
  box-shadow: 0 12px 28px rgba(26,111,255,.18), 0 0 0 1px rgba(26,111,255,.18) inset !important;
}
body.theme-light #cat-steam .name { color: #1a4fc4 !important; }
body.theme-light #cat-steam .desc { color: rgba(26,79,196,.50) !important; }

/* Premium — лавандовый */
body.theme-light #cat-premium {
  background: linear-gradient(145deg, #f5f0ff, #ede0ff) !important;
  border-color: rgba(160,90,255,.25) !important;
  box-shadow: 0 8px 20px rgba(160,90,255,.12), 0 0 0 1px rgba(160,90,255,.10) inset !important;
}
body.theme-light #cat-premium:hover {
  border-color: rgba(160,90,255,.45) !important;
  box-shadow: 0 12px 28px rgba(160,90,255,.18), 0 0 0 1px rgba(160,90,255,.18) inset !important;
}
body.theme-light #cat-premium .name { color: #6d28d9 !important; }
body.theme-light #cat-premium .desc { color: rgba(109,40,217,.50) !important; }

/* Gifts — мятно-зелёный */
body.theme-light #cat-gifts {
  background: linear-gradient(145deg, #f0fdf4, #e0fced) !important;
  border-color: rgba(52,211,120,.25) !important;
  box-shadow: 0 8px 20px rgba(52,211,120,.12), 0 0 0 1px rgba(52,211,120,.10) inset !important;
}
body.theme-light #cat-gifts:hover {
  border-color: rgba(52,211,120,.45) !important;
  box-shadow: 0 12px 28px rgba(52,211,120,.18), 0 0 0 1px rgba(52,211,120,.18) inset !important;
}
body.theme-light #cat-gifts .name { color: #059669 !important; }
body.theme-light #cat-gifts .desc { color: rgba(5,150,105,.50) !important; }

/* Icons — цветная тень без чёрного */
body.theme-light #cat-stars   .cat-icon { filter: drop-shadow(0 6px 14px rgba(255,198,60,.40)); }
body.theme-light #cat-steam   .cat-icon { filter: drop-shadow(0 6px 14px rgba(26,111,255,.35)); }
body.theme-light #cat-premium .cat-icon { filter: drop-shadow(0 6px 14px rgba(160,90,255,.35)); }
body.theme-light #cat-gifts   .cat-icon { filter: drop-shadow(0 6px 14px rgba(52,211,120,.35)); }
body.theme-light #cat-stars:hover   .cat-icon { filter: drop-shadow(0 10px 20px rgba(255,198,60,.55)); }
body.theme-light #cat-steam:hover   .cat-icon { filter: drop-shadow(0 10px 20px rgba(26,111,255,.45)); }
body.theme-light #cat-premium:hover .cat-icon { filter: drop-shadow(0 10px 20px rgba(160,90,255,.45)); }
body.theme-light #cat-gifts:hover   .cat-icon { filter: drop-shadow(0 10px 20px rgba(52,211,120,.45)); }

/* ── 3. Hero banner (catalog main screen) ── */
body.theme-light .hero-banner {
  border-color: rgba(37,99,235,.12);
  /* Полностью скрываем тёмное фоновое изображение */
  background-image: none !important;
}
body.theme-light .hero-banner.hero-home {
  background: linear-gradient(135deg, #e8f0ff, #eef3ff) !important;
  border: 1px solid rgba(37,99,235,.14) !important;
  box-shadow:
    0 4px 16px rgba(37,99,235,.08),
    0 1px 4px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.80) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Title was forced to cyan #3DEBFF with glow — override for light */
body.theme-light .hero-home .hero-home-line1,
body.theme-light .hero-home .hero-home-line1.pixel-title {
  color: #6a7ca5 !important;
  filter: none !important;
  text-shadow: none !important;
}
body.theme-light .hero-home .hero-home-line2,
body.theme-light .hero-home .hero-home-line2.pixel-title {
  color: rgba(106,124,165,.60) !important;
  filter: none !important;
  text-shadow: none !important;
}
/* Remove dark-theme decorations: grid overlay + bottom shine */
body.theme-light .hero-banner::before { display: none; }
body.theme-light .hero-banner::after  { display: none; }
/* ── Suppress ALL banner text glow in light theme (shimmer spans, pixel-title) ── */
body.theme-light .hero-banner .pixel-title,
body.theme-light .hero-banner .pixel-title * {
  filter: none !important;
  text-shadow: none !important;
}
/* Stars shimmer — keep gradient text, kill the drop-shadow glow */
body.theme-light[data-theme="stars"] #screen-stars .pixel-title .shimmer-text-gold {
  filter: none !important;
}
/* Gifts shimmer — dark forest green gradient (animation handled by lightShimmerGreen block above) */
body.theme-light[data-theme="gifts"] #screen-gifts .pixel-title .shimmer-text-emerald {
  filter: none !important;
}
/* Banner — light mint glass with left-side depth */
body.theme-light[data-theme="gifts"] #screen-gifts .hero-banner {
  background:
    linear-gradient(100deg, rgba(10,50,30,.06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 50%, rgba(40,164,106,.10) 0%, transparent 65%),
    radial-gradient(ellipse at 20% 80%, rgba(20,120,70,.06) 0%, transparent 55%),
    linear-gradient(135deg, #f0fff8 0%, #e8fdf2 60%, #dffaec 100%) !important;
  border-color: rgba(40,164,106,.18) !important;
  box-shadow: 0 4px 24px rgba(40,164,106,.08), inset 0 1px 0 rgba(255,255,255,.70) !important;
}

/* ── 4. Pack & Product cards inside sections ── */
body.theme-light .stars-pack-item {
  background: rgba(255,255,255,.92);
  border-color: rgba(255,200,80,.25);
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
}
body.theme-light .stars-pack-price { color: #c69222; text-shadow: none; }
body.theme-light .product-card {
  background: rgba(255,255,255,.92);
  border-color: rgba(0,0,0,.06);
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
}
body.theme-light .product-card:hover {
  border-color: rgba(37,99,235,.20);
  box-shadow: 0 12px 32px rgba(37,99,235,.10);
}
body.theme-light .pack-card {
  background: rgba(255,255,255,.92);
  border-color: rgba(0,0,0,.06);
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
}

/* ── 5. Portal screens — light tinted backgrounds ── */
body.theme-light[data-theme="stars"] {
  background: radial-gradient(600px 300px at 50% 0%, rgba(255,198,77,.18), transparent),
              linear-gradient(180deg, #fffbf0 0%, #f5f0e0 100%);
}
/* opacity controlled by lightBgBreathe animation — no static override */
body.theme-light[data-theme="stars"] .stars-pack-item {
  background: rgba(255,255,255,.92);
  border-color: rgba(255,200,80,.25);
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
}
body.theme-light[data-theme="stars"] .stars-pack-price { color: #c69222; text-shadow: none; }

/* ═══════════════════════════════════════════════════════
   ★  STARS — LIGHT THEME  PREMIUM REDESIGN
   ═══════════════════════════════════════════════════════ */

/* ── Page background — warm golden radial ── */
body.theme-light[data-theme="stars"] {
  background:
    radial-gradient(ellipse 70% 40% at 50% -5%, rgba(255,210,80,.22) 0%, transparent 65%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(255,230,130,.10) 0%, transparent 70%),
    linear-gradient(180deg, #fffdf5 0%, #fffaec 50%, #fff6dc 100%) !important;
}

/* ── Hero banner — rich golden glass ── */
body.theme-light[data-theme="stars"] .hero-banner.hero-v1 {
  background:
    radial-gradient(ellipse 55% 80% at 18% 50%, rgba(255,230,100,.28) 0%, transparent 60%),
    radial-gradient(ellipse 45% 70% at 82% 45%, rgba(255,185,50,.18) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(255,200,60,.10) 0%, transparent 70%),
    linear-gradient(155deg, #fffef0 0%, #fff9d8 45%, #fff3b8 100%) !important;
  border: 1px solid rgba(220,175,55,.32) !important;
  box-shadow:
    0 12px 36px rgba(200,155,30,.14),
    0 2px 8px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(220,175,55,.12) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  overflow: hidden;
  position: relative;
}

/* ::before/::after на баннере Stars — скрыты, дождь делает JS */
body.theme-light[data-theme="stars"] .hero-banner.hero-v1::before,
body.theme-light[data-theme="stars"] .hero-banner.hero-v1::after {
  display: none !important;
}

/* ── Hero title — rich amber-gold shimmer ── */
body.theme-light[data-theme="stars"] .hero-title {
  background: linear-gradient(135deg, #9a6b08, #d4950f, #e8b820, #c69222) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter: none !important;
}
body.theme-light[data-theme="stars"] .hero-subtitle {
  color: rgba(100,70,10,.68) !important;
  opacity: 1 !important;
}

/* ── Cat mascot — gentle float animation ── */
body.theme-light[data-theme="stars"] .hero-banner .hero-mascot {
  animation: catFloat 4.5s ease-in-out infinite !important;
  filter: drop-shadow(0 8px 20px rgba(200,155,20,.35)) drop-shadow(0 2px 6px rgba(180,130,0,.20)) !important;
}

/* ── No dark starfield on light bg ── */
body.theme-light[data-theme="stars"] #stars-sky { display: none !important; }

/* ── Suppress dark HUD pseudo-elements on pack items ── */
body.theme-light[data-theme="stars"] .stars-pack-item::before,
body.theme-light[data-theme="stars"] .stars-pack-item::after { display: none; }

/* ── Pack items — warm cream gold, animated idle glow ── */
body.theme-light[data-theme="stars"] .stars-pack-item {
  background: linear-gradient(145deg, #fffef8, #fffbec) !important;
  border: 1px solid rgba(220,175,55,.32) !important;
  box-shadow: 0 8px 24px rgba(180,135,20,.10), 0 2px 6px rgba(0,0,0,.04) !important;
  animation: starsPulse 3.5s ease-in-out infinite !important;
}
body.theme-light[data-theme="stars"] .stars-pack-item:nth-child(2) { animation-delay: .8s !important; }
body.theme-light[data-theme="stars"] .stars-pack-item:nth-child(3) { animation-delay: 1.6s !important; }
body.theme-light[data-theme="stars"] .stars-pack-item:nth-child(4) { animation-delay: 2.4s !important; }
body.theme-light[data-theme="stars"] .stars-pack-item:nth-child(5) { animation-delay: 3.0s !important; }
body.theme-light[data-theme="stars"] .stars-pack-item:nth-child(6) { animation-delay: .4s !important; }
body.theme-light[data-theme="stars"] .stars-pack-item:hover {
  border-color: rgba(220,175,55,.60) !important;
  box-shadow: 0 14px 36px rgba(200,155,20,.18), 0 2px 8px rgba(0,0,0,.05) !important;
  transform: translateY(-2px) !important;
  animation: none !important;
}
body.theme-light[data-theme="stars"] .stars-pack-item:active {
  transform: scale(.98) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
  animation: none !important;
}

/* ── Pack icon — golden glow halo ── */
body.theme-light[data-theme="stars"] .stars-pack-icon-wrap {
  filter: drop-shadow(0 4px 10px rgba(220,170,20,.55)) !important;
  transition: filter .25s ease !important;
}
body.theme-light[data-theme="stars"] .stars-pack-item:hover .stars-pack-icon-wrap {
  filter: drop-shadow(0 6px 16px rgba(220,170,20,.75)) !important;
}

/* ── Pack name & price ── */
body.theme-light[data-theme="stars"] .stars-pack-name {
  color: #1f2430 !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}
body.theme-light[data-theme="stars"] .stars-pack-price {
  color: #c69222 !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}
body.theme-light[data-theme="stars"] .stars-pack-item[data-tier="sm"] .stars-pack-price,
body.theme-light[data-theme="stars"] .stars-pack-item[data-tier="md"] .stars-pack-price,
body.theme-light[data-theme="stars"] .stars-pack-item[data-tier="lg"] .stars-pack-price { filter: none !important; }

/* ── Choice buttons — animated border shimmer ── */
body.theme-light[data-theme="stars"] .stars-choice-btn {
  background: linear-gradient(145deg, #fffef8, #fffbec) !important;
  border: 1px solid rgba(230,185,77,.22) !important;
  box-shadow: 0 6px 18px rgba(180,135,20,.08) !important;
  color: #1f2430 !important;
  animation: starsChoiceBorderGlow 3s ease-in-out infinite !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
body.theme-light[data-theme="stars"] .stars-choice-btn:nth-child(2) {
  animation-delay: 1.5s !important;
}
body.theme-light[data-theme="stars"] .stars-choice-btn:hover {
  border-color: rgba(230,185,77,.58) !important;
  box-shadow: 0 10px 28px rgba(200,155,30,.16) !important;
  transform: translateY(-2px) !important;
  animation: none !important;
}
body.theme-light[data-theme="stars"] .stars-choice-title { color: #1f2430 !important; }
body.theme-light[data-theme="stars"] .stars-choice-desc  { color: #92600a !important; opacity: .70 !important; }
body.theme-light[data-theme="stars"] .stars-choice-arrow {
  color: #c69222 !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 4px rgba(200,155,20,.40)) !important;
}
/* Section title labels */
body.theme-light[data-theme="stars"] .section-title { color: rgba(140,95,15,.75); }
/* Custom amount input container */
body.theme-light[data-theme="stars"] .custom-input-standalone {
  background: #ffffff !important;
  border: 1px solid rgba(230,185,77,.30) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.06) !important;
}
body.theme-light[data-theme="stars"] .custom-input-standalone input {
  background: #ffffff;
  color: #1f2430 !important;
  -webkit-text-fill-color: #1f2430 !important;
  border-bottom: 1px solid rgba(230,185,77,.25);
}
body.theme-light[data-theme="stars"] .custom-input-standalone input::placeholder {
  color: rgba(100,70,10,.40) !important;
}
/* Inline price display (below custom input) */
body.theme-light[data-theme="stars"] .inline-price-display {
  background: rgba(255,220,100,.10);
  border: 1px solid rgba(230,185,77,.28);
  color: #c69222;
}
/* btn-stars-cta (custom screen continue button) */
body.theme-light[data-theme="stars"] .btn-stars-cta {
  background: linear-gradient(180deg, #FFD55A 0%, #F5B800 50%, #E0A500 100%);
  box-shadow: 0 4px 14px rgba(200,148,30,.30), inset 0 1px 0 rgba(255,255,255,.30);
  color: #1a1000;
}
/* Recipient toggle (Self / Other segmented control) */
body.theme-light[data-theme="stars"] .recipient-toggle {
  background: rgba(255,248,220,.80);
  border: 1px solid rgba(230,185,77,.25);
}
body.theme-light[data-theme="stars"] .recipient-toggle button { color: rgba(60,40,10,.45); }
body.theme-light[data-theme="stars"] .recipient-toggle button.active { color: #1a1000; }
body.theme-light[data-theme="stars"] .segment-pill {
  background: linear-gradient(135deg, rgba(240,185,50,.50), rgba(255,220,80,.30));
}
/* Recipient input field */
body.theme-light[data-theme="stars"] .recipient-input input {
  background: #fffef8;
  border: 1px solid rgba(230,185,77,.28);
  color: #1f2430;
}
body.theme-light[data-theme="stars"] .recipient-input input::placeholder { color: #9aa3af; }
body.theme-light[data-theme="stars"] .recipient-input input:focus {
  border-color: rgba(230,185,77,.55);
  box-shadow: 0 0 0 2px rgba(230,185,77,.12);
}
/* Summary card (payment screen product info) */
body.theme-light[data-theme="stars"] .summary-card {
  background: #ffffff;
  border: 1px solid rgba(230,185,77,.20);
  box-shadow: 0 6px 18px rgba(0,0,0,.07);
}
body.theme-light[data-theme="stars"] .summary-row { border-bottom-color: rgba(0,0,0,.06); }
body.theme-light[data-theme="stars"] .summary-row .label { color: #6b7280; }
body.theme-light[data-theme="stars"] .summary-row .value { color: #1f2430; font-weight: 600; }
body.theme-light[data-theme="stars"] .summary-row.summary-total .value {
  color: #c69222;
  font-size: 18px;
  font-weight: 800;
  text-shadow: none;
  filter: none !important;
}
/* Price shimmer — gold tones on light bg */
body.theme-light[data-theme="stars"] .price-shimmer {
  background: linear-gradient(90deg, #c69222 0%, #c69222 35%, #f0c040 50%, #c69222 65%, #c69222 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Payment method cards */
body.theme-light[data-theme="stars"] .pay-method {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  color: #1f2430;
}
body.theme-light[data-theme="stars"] .pay-method:hover {
  border-color: rgba(230,185,77,.35);
  box-shadow: 0 6px 20px rgba(200,155,30,.10);
}
body.theme-light[data-theme="stars"] .pay-method.selected {
  background: linear-gradient(135deg, #ffffff, #fffaed);
  border: 1px solid #E6B94D;
  box-shadow: 0 4px 16px rgba(200,155,30,.14);
}
body.theme-light[data-theme="stars"] .pm-name  { color: #1f2430; }
body.theme-light[data-theme="stars"] .pm-check { color: #c69222; }
/* Payment method section label */
body.theme-light[data-theme="stars"] #payment-method-label { color: rgba(140,95,15,.70) !important; }

/* ── Screen decorations for sub-screens (recipient / payment / stars-packs / stars-custom) ── */
/* Dark-theme gold glow on recipient — tone down for light */
body.theme-light[data-theme="stars"] #screen-recipient::after {
  background: radial-gradient(ellipse at center, rgba(255,198,77,.06) 0%, transparent 70%) !important;
}
/* Dark-theme payment radial glow — suppress heavy neon, replace with soft warm */
body.theme-light[data-theme="stars"] #screen-payment::before {
  background: radial-gradient(ellipse 100% 30% at 50% 100%, rgba(255,200,70,.08) 0%, transparent 65%) !important;
  animation: none !important;
  opacity: .6 !important;
}

/* ── Falling stars on sub-screens via body pseudo ── */
/* stars-packs */
/* ── Stars custom input — light theme overrides ── */
body.theme-light[data-theme="stars"] .custom-input-row,
body.theme-light[data-theme="stars"] .custom-input-standalone {
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(200,155,30,.35) !important;
  box-shadow: 0 4px 20px rgba(180,130,10,.12), 0 0 0 1px rgba(200,155,30,.08) inset !important;
  backdrop-filter: none !important;
}
body.theme-light[data-theme="stars"] .custom-input-row input,
body.theme-light[data-theme="stars"] .custom-input-standalone input {
  color: #5a3c00 !important;
  -webkit-text-fill-color: #5a3c00 !important;
  border-bottom-color: rgba(180,130,10,.25) !important;
  box-shadow: inset 0 0 0 999px transparent !important;
}
body.theme-light[data-theme="stars"] .custom-input-row input::placeholder,
body.theme-light[data-theme="stars"] .custom-input-standalone input::placeholder {
  color: rgba(140,100,10,.30) !important;
}
body.theme-light[data-theme="stars"] .custom-input-row:focus-within,
body.theme-light[data-theme="stars"] .custom-input-standalone:focus-within {
  border-color: rgba(200,155,30,.60) !important;
  box-shadow: 0 4px 24px rgba(180,130,10,.18), 0 0 0 1px rgba(200,155,30,.15) inset !important;
}
body.theme-light[data-theme="stars"] .custom-input-row:focus-within input,
body.theme-light[data-theme="stars"] .custom-input-standalone:focus-within input {
  border-bottom-color: rgba(180,130,10,.55) !important;
}
body.theme-light[data-theme="stars"] .custom-input-row .label {
  color: rgba(120,85,10,.55) !important;
}
body.theme-light[data-theme="stars"] .stars-custom-hint-label {
  color: rgba(140,100,10,.55) !important;
}
body.theme-light[data-theme="stars"] .custom-input-placeholder {
  color: rgba(180,130,10,.30) !important;
}
body.theme-light[data-theme="stars"] #stars-custom-title {
  color: #8a6010 !important;
  text-shadow: none !important;
}

body.theme-light[data-theme="stars"] #screen-stars-packs::before,
body.theme-light[data-theme="stars"] #screen-stars-custom::before,
body.theme-light[data-theme="stars"] #screen-recipient::before,
body.theme-light[data-theme="stars"] #screen-payment > .stars-light-deco {
  pointer-events: none !important;
}

/* Subtle top shimmer line on sub-screen headers */
body.theme-light[data-theme="stars"] #screen-stars-packs .header,
body.theme-light[data-theme="stars"] #screen-recipient .header,
body.theme-light[data-theme="stars"] #screen-payment .header {
  background: linear-gradient(180deg, rgba(255,235,140,.18) 0%, transparent 100%) !important;
  border-bottom: 1px solid rgba(220,175,55,.14) !important;
}
body.theme-light[data-theme="stars"] #screen-stars-custom .header {
  background: transparent !important;
  border-bottom: none !important;
}

/* Stars-packs screen — floating deco row at top (animation removed) */
body.theme-light[data-theme="stars"] #screen-stars-packs::before {
  display: none !important;
}

/* Stars-custom screen (animation removed) */
body.theme-light[data-theme="stars"] #screen-stars-custom::before {
  display: none !important;
}

/* Payment screen */
body.theme-light[data-theme="stars"] #screen-payment::after {
  content: "✦    ✦      ✦    ✦" !important;
  display: block !important;
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  text-align: center !important;
  font-size: 9px !important;
  letter-spacing: 18px !important;
  color: rgba(200,160,20,.25) !important;
  padding-top: 4px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: starsFall2 4.2s ease-in-out infinite 1.1s !important;
}

/* Recipient screen — already has ::after used for glow, use ::before */
body.theme-light[data-theme="stars"] #screen-recipient::before {
  content: "  ✦    ✦      ✦  ✦  " !important;
  display: block !important;
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  text-align: center !important;
  font-size: 10px !important;
  letter-spacing: 15px !important;
  color: rgba(200,160,20,.28) !important;
  padding-top: 5px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: starsFall3 5.5s ease-in-out infinite 0.4s !important;
}

body.theme-light[data-theme="premium"] {
  background: radial-gradient(600px 300px at 50% 0%, rgba(168,85,247,.16), transparent),
              linear-gradient(180deg, #faf8ff 0%, #f2eeff 100%);
}
/* opacity controlled by lightBgBreathe animation — no static override */
body.theme-light[data-theme="premium"] .product-card {
  background: rgba(255,255,255,.92);
  border-color: rgba(180,120,255,.25);
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
}
body.theme-light[data-theme="premium"] .p-price { color: #9b5cff; text-shadow: none; }
body.theme-light[data-theme="premium"] .p-title { color: #1f2430; text-shadow: none; }
body.theme-light[data-theme="gifts"] {
  background: radial-gradient(600px 300px at 50% 0%, rgba(52,211,153,.16), transparent),
              linear-gradient(180deg, #f2fff8 0%, #e8f9f0 100%);
}
/* opacity controlled by lightBgBreathe animation — no static override */
body.theme-light[data-theme="gifts"] .product-card {
  background: rgba(255,255,255,.92);
  border-color: rgba(80,200,140,.30);
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
}
body.theme-light[data-theme="gifts"] .p-price { color: #2ebd7a; text-shadow: none; }
body.theme-light[data-theme="gifts"] .p-title { color: #1f2430; text-shadow: none; }
body.theme-light[data-theme="steam"] {
  background: radial-gradient(600px 300px at 50% 0%, rgba(74,182,255,.16), transparent),
              linear-gradient(180deg, #f2f8ff 0%, #e8f2ff 100%);
}
/* opacity controlled by lightBgBreathe animation — no static override */
/* Steam inputs — handled by premium polish block below */
body.theme-light[data-theme="steam"] .recipient-input {
  background: transparent;
}

/* ── 6. CTA buttons — clean gradients, no glow ── */
body.theme-light[data-theme="stars"] .stars-custom-btn,
body.theme-light[data-theme="stars"] .recipient-pay-btn,
body.theme-light[data-theme="stars"] .payment-pay-btn {
  background: linear-gradient(180deg, #F7CF63, #E3B33C);
  box-shadow: 0 10px 20px rgba(226,178,60,.35);
  color: #1a1000;
}
body.theme-light[data-theme="steam"] .steam-next-btn,
body.theme-light[data-theme="steam"] .recipient-pay-btn,
body.theme-light[data-theme="steam"] .payment-pay-btn {
  background: linear-gradient(135deg, #7aa8ff, #4f79ff);
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  color: #fff;
}
body.theme-light[data-theme="premium"] .recipient-pay-btn,
body.theme-light[data-theme="premium"] .payment-pay-btn {
  background: linear-gradient(135deg, #c48bff, #8a5cff);
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  color: #fff;
}
body.theme-light[data-theme="gifts"] .recipient-pay-btn,
body.theme-light[data-theme="gifts"] .payment-pay-btn {
  background: linear-gradient(135deg, #7ce7b5, #37b87d);
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  color: #fff;
}

/* ── 7. Text colours — no glow, proper hierarchy ── */
body.theme-light .header h1 { color: #1f2430; }
body.theme-light #screen-profile .header h1,
body.theme-light #screen-settings .header h1 { color: rgba(31,36,48,.55); }
body.theme-light .profile-name { color: #1f2430; }
body.theme-light .profile-username { color: rgba(31,36,48,.58); text-shadow: none; }
body.theme-light .section-header h2 { color: #2a2f36; font-weight: 600; }
body.theme-light .stars-pack-name { color: #1f2430; text-shadow: none; }
body.theme-light .stars-pack-price { color: #c69222; text-shadow: none; }
body.theme-light .stars-pack-desc  { color: #6b7280; text-shadow: none; }
body.theme-light .p-title          { color: #1f2430; text-shadow: none; }
body.theme-light .p-price          { color: #6b7280; text-shadow: none; }
body.theme-light .trust-item       { color: rgba(15,23,42,.55); opacity: 1; font-weight: 500; }
body.theme-light .trust-item-icon  { opacity: .65; }
/* cat-card подписи (label под иконкой) */
body.theme-light .cat-card .cat-label,
body.theme-light .cat-card .cat-name,
body.theme-light .cat-card span:not(.cat-card--disabled *) { color: #8a94a6; }

/* ── 8. Navigation ── */
body.theme-light .app-footer {
  background: rgba(245,247,251,.94);
  border-top: 1px solid rgba(0,0,0,.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.theme-light .nav-btn       { color: #9aa3af; }
body.theme-light .nav-btn.active { color: var(--accent); }

/* ── 9. Profile & settings cards ── */
body.theme-light .profile-card {
  background: rgba(255,255,255,.92);
  border-color: rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
}
body.theme-light .profile-avatar-wrap::before { display: none; }
body.theme-light .profile-avatar {
  box-shadow:
    0 0 0 2.5px rgba(37,99,235,.22),
    0 8px 24px rgba(37,99,235,.18),
    0 2px 8px rgba(0,0,0,.10);
}
body.theme-light .profile-avatar::after { display: none; }
body.theme-light .profile-name { color: #1f2430; text-shadow: none; }
body.theme-light .profile-username { color: rgba(31,36,48,.50); }
body.theme-light .profile-menu-btn {
  background: rgba(255,255,255,.88);
  border-color: rgba(0,0,0,.07);
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.9);
  color: #1f2430;
}
body.theme-light .profile-menu-btn::before { display: none; }
body.theme-light .profile-menu-btn:hover {
  background: rgba(255,255,255,.98);
  border-color: rgba(37,99,235,.18);
  box-shadow: 0 4px 14px rgba(37,99,235,.10), 0 1px 3px rgba(0,0,0,.06);
}
body.theme-light .profile-menu-btn:active {
  background: rgba(245,248,255,.98);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
body.theme-light .profile-menu-btn .icon-wrap {
  background: linear-gradient(145deg, rgba(37,99,235,.10) 0%, rgba(61,235,255,.08) 100%);
  border-color: rgba(37,99,235,.12);
  box-shadow: 0 2px 6px rgba(37,99,235,.10);
}
body.theme-light .profile-menu-btn .text { color: #1f2430; }
body.theme-light .profile-menu-btn .arrow { color: rgba(31,36,48,.28); }
body.theme-light #screen-profile::before,
body.theme-light #screen-settings::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(37,99,235,.06) 0%, rgba(37,99,235,.025) 40%, transparent 70%);
}

/* ── 10. Other cards ── */
body.theme-light .order-card,
body.theme-light .stat-card,
body.theme-light .referral-card {
  background: rgba(255,255,255,.82);
  border-color: rgba(0,0,0,.06);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
body.theme-light .support-card {
  background: rgba(255,255,255,.82);
  border-color: rgba(0,0,0,.06);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
body.theme-light .quick-btn {
  background: rgba(255,255,255,.80);
  border-color: rgba(0,0,0,.06);
}
body.theme-light .banner-card { border-color: rgba(0,0,0,.07); }

/* ── Recipient user-preview card — light (general) ── */
body.theme-light .user-preview {
  background: rgba(255,255,255,.95);
  border-color: rgba(0,0,0,.10);
  box-shadow: 0 2px 12px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,1);
}
body.theme-light .user-preview__avatar {
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.22);
  color: #2563eb;
}
body.theme-light .user-preview__name    { color: #0f172a; }
body.theme-light .user-preview__username { color: #2563eb; }
body.theme-light .user-preview__not-found { color: #94a3b8; }

/* Stars (gold) theme */
body.theme-light[data-theme="stars"] .user-preview {
  background: rgba(255,251,235,.96);
  border-color: rgba(180,130,30,.18);
  box-shadow: 0 2px 12px rgba(180,130,30,.10), inset 0 1px 0 rgba(255,255,255,1);
}
body.theme-light[data-theme="stars"] .user-preview__avatar {
  background: rgba(217,119,6,.10);
  border-color: rgba(217,119,6,.25);
  color: #b45309;
}
body.theme-light[data-theme="stars"] .user-preview__username { color: #b45309; }

/* Premium (purple/violet) theme */
body.theme-light[data-theme="premium"] .user-preview {
  background: rgba(250,245,255,.96);
  border-color: rgba(147,51,234,.16);
  box-shadow: 0 2px 12px rgba(147,51,234,.09), inset 0 1px 0 rgba(255,255,255,1);
}
body.theme-light[data-theme="premium"] .user-preview__avatar {
  background: rgba(147,51,234,.10);
  border-color: rgba(147,51,234,.24);
  color: #7c3aed;
}
body.theme-light[data-theme="premium"] .user-preview__username { color: #7c3aed; }

/* Gifts (green/emerald) theme */
body.theme-light[data-theme="gifts"] .user-preview {
  background: rgba(240,253,244,.96);
  border-color: rgba(22,163,74,.16);
  box-shadow: 0 2px 12px rgba(22,163,74,.09), inset 0 1px 0 rgba(255,255,255,1);
}
body.theme-light[data-theme="gifts"] .user-preview__avatar {
  background: rgba(22,163,74,.10);
  border-color: rgba(22,163,74,.24);
  color: #15803d;
}
body.theme-light[data-theme="gifts"] .user-preview__username { color: #15803d; }

/* ── Legal / static pages — light ── */
body.theme-light .legal-content { color: #374151; }
body.theme-light .legal-content h2 { color: #0f172a; }
body.theme-light .legal-content h3 { color: #1e3a8a; opacity: 1; }
body.theme-light .legal-content li  { color: #4b5563; }
body.theme-light .legal-toc {
  background: linear-gradient(145deg, rgba(239,246,255,1) 0%, rgba(224,236,255,.8) 100%);
  border-color: rgba(37,99,235,.18);
  box-shadow: 0 2px 12px rgba(37,99,235,.07), inset 0 1px 0 rgba(255,255,255,.9);
}
body.theme-light .legal-toc-title { color: #3b82f6; opacity: 1; }
body.theme-light .legal-toc a { color: #2563eb; }
body.theme-light .legal-toc a:hover { color: #1d4ed8; }

/* ── Support info cards (tickets-faq-card) — light ── */
body.theme-light .tickets-faq-card {
  background: linear-gradient(145deg, rgba(239,246,255,1) 0%, rgba(255,255,255,.95) 100%);
  border-color: rgba(37,99,235,.14);
  box-shadow: 0 2px 12px rgba(37,99,235,.08), 0 1px 3px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,1);
}
body.theme-light .tickets-faq-card:active {
  background: linear-gradient(145deg, rgba(219,234,254,1) 0%, rgba(239,246,255,.9) 100%);
  border-color: rgba(37,99,235,.30);
  box-shadow: 0 2px 10px rgba(37,99,235,.15);
}
body.theme-light .tfc-arrow { color: #2563eb; opacity: .7; }
body.theme-light .tfc-title { color: #0f172a; }
body.theme-light .tfc-sub   { color: #64748b; }

/* ── 11. Toggle & language buttons ── */
body.theme-light .toggle-switch { background: rgba(0,0,0,.12); }
body.theme-light .lang-btn { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.09); }
body.theme-light .lang-btn.active {
  background: linear-gradient(135deg, rgba(37,99,235,.16), rgba(37,99,235,.26));
  border-color: rgba(37,99,235,.32);
}

/* ── 12. Modals & overlays ── */
body.theme-light .subscription-overlay { background: rgba(180,192,215,.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.theme-light .subscription-modal { background: rgba(245,248,255,.97); border-color: rgba(0,0,0,.08); box-shadow: 0 20px 50px rgba(0,0,0,.12); }
body.theme-light .subscription-modal .title { color: #0f172a; }
body.theme-light .subscription-modal .desc  { color: #64748b; }
body.theme-light .subscription-check-btn { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.09); color: #475569; }

/* Light overrides for full-screen subscription */
body.theme-light .sub-fs-overlay {
  background: radial-gradient(ellipse 130% 55% at 50% -8%, rgba(210,228,255,.99) 0%, rgba(232,240,255,.99) 55%, #eef3ff 100%);
}
body.theme-light .sub-fs-halo { background: radial-gradient(ellipse, rgba(37,99,235,.1) 0%, transparent 62%); }
body.theme-light .sub-fs-grid { background-image: radial-gradient(circle, rgba(37,99,235,.07) 1px, transparent 1px); }
body.theme-light .sub-fs-ring-1 { border-color: rgba(37,99,235,.22); }
body.theme-light .sub-fs-ring-2 { border-color: rgba(37,99,235,.1); }
body.theme-light .sub-fs-icon-circle {
  background: linear-gradient(145deg, rgba(37,99,235,.12) 0%, rgba(61,235,255,.1) 100%);
  border-color: rgba(37,99,235,.22);
  box-shadow: 0 0 36px rgba(37,99,235,.12), inset 0 1px 0 rgba(255,255,255,.8);
}
body.theme-light .sub-fs-title {
  background: linear-gradient(145deg, #0f172a 0%, #1d4ed8 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
body.theme-light .sub-fs-desc { color: rgba(15,23,42,.45); }
body.theme-light .sub-fs-btn-ghost { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); color: rgba(15,23,42,.5); }
body.theme-light .sub-fs-btn-ghost:hover { background: rgba(37,99,235,.07); border-color: rgba(37,99,235,.2); color: rgba(15,23,42,.8); }
body.theme-light .sub-fs-tag {
  color: #1d4ed8;
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.22);
}
body.theme-light .sub-fs-icon-circle svg { filter: drop-shadow(0 2px 8px rgba(37,99,235,.22)); }
body.theme-light .sub-fs-halo-ring { background: radial-gradient(circle, rgba(37,99,235,.12) 0%, transparent 65%); }
body.theme-light .sub-fs-particles span:nth-child(5) { background: rgba(37,99,235,.2); }

/* ════════════════════════════════════════════
   MAINTENANCE — LIGHT THEME
   Triggered by JS adding .maint-light class
   directly on the overlay element — no body
   class dependency, works 100% reliably
════════════════════════════════════════════ */

/* Layer 1: base — milky cold gradient */
.maint-light.maint-overlay-bg {
  background: radial-gradient(ellipse 90% 70% at 50% 38%,
    #dce8f8 0%, #e8eef8 45%, #EEF2FA 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Layer 2: vignette — subtle edge darkening */
.maint-light .maint-bg-radial {
  background: radial-gradient(ellipse 85% 70% at 50% 42%,
    transparent 30%,
    rgba(16,24,60,.03) 65%,
    rgba(16,24,60,.07) 100%);
}

/* Layer 3: 1% noise — matte texture */
.maint-light .maint-bg-noise { opacity: .012; filter: none; }

/* Particles — quiet blue dots */
.maint-light .maint-particle {
  background: rgba(46,107,255,.22);
  box-shadow: 0 0 6px 2px rgba(46,107,255,.08);
}

/* Glow spot behind mascot */
.maint-light .maint-glow-ring {
  width: 220px;
  height: 160px;
  background: radial-gradient(ellipse 100% 100% at 50% 50%,
    rgba(221,232,255,.90) 0%,
    rgba(230,224,255,.55) 40%,
    transparent 72%);
  filter: blur(36px);
}

/* Mascot — natural shadow */
.maint-light .maint-icon-img {
  filter:
    drop-shadow(0 6px 18px rgba(46,107,255,.14))
    drop-shadow(0 2px 4px rgba(16,24,40,.10));
}

/* Content panel */
.maint-light .maint-modal-glass {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Title: deep navy */
.maint-light .maint-modal-glass .title {
  color: #101828;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(16,24,40,.06);
}

/* Description: mid graphite */
.maint-light .maint-modal-glass .desc {
  color: #475467;
  line-height: 2.1;
}

/* Terminal chip wrapper */
.maint-light .maint-tagline {
  background: rgba(16,24,40,.04);
  border: 1px solid rgba(16,24,40,.08);
  border-radius: 12px;
  padding: 7px 14px;
  width: auto;
  max-width: 280px;
}

/* Terminal prefix ">" */
.maint-light .maint-terminal-prefix {
  color: #2E6BFF;
  text-shadow: none;
}

/* Terminal typewriter text */
.maint-light .maint-terminal-text {
  color: #1D2939;
  letter-spacing: .04em;
  text-shadow: none;
}

/* Cursor: cobalt, soft blink */
.maint-light .maint-terminal-cursor {
  background: #2E6BFF;
  box-shadow: none;
  animation: maintCursorBlinkLight 850ms steps(1) infinite;
}
@keyframes maintCursorBlinkLight {
  0%   { opacity: 1; }
  50%  { opacity: .15; }
  100% { opacity: 1; }
}

/* Tagline */
.maint-light #maint-tagline { color: rgba(16,24,40,.30); }
body.theme-light .custom-alert-overlay { background: rgba(195,205,225,.58); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body.theme-light .custom-alert-box  {
  background: rgba(255,255,255,.97);
  border-color: rgba(0,0,0,.07);
  box-shadow: 0 16px 48px rgba(0,0,0,.12);
}
body.theme-light .custom-alert-title   { color: #1f2430; }
body.theme-light .custom-alert-message { color: #6b7280; }

/* ── 13. Toast notifications — muted, light-friendly ── */
body.theme-light .toast-success { background: linear-gradient(135deg, rgba(34,197,94,.14), rgba(16,185,129,.08)); border-color: rgba(34,197,94,.24); }
body.theme-light .toast-error   { background: linear-gradient(135deg, rgba(239,68,68,.14), rgba(220,38,38,.08)); border-color: rgba(239,68,68,.24); }
body.theme-light .toast-info    { background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(37,99,235,.06)); border-color: rgba(37,99,235,.20); }
body.theme-light .toast-warning { background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(245,158,11,.08)); border-color: rgba(245,158,11,.24); }
body.theme-light .toast         { box-shadow: 0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06); }
body.theme-light .toast-msg     { color: #1f2430; }

/* ══════════════════════════════════════════════════════
   LIGHT THEME — STARS PREMIUM POLISH
══════════════════════════════════════════════════════ */

/* ── Fix #1: CTA bottom bars — transparent (no background) ── */

/* ── Fix #2: Recipient display — label style (all themes) ── */
.recipient-display .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
#self-username { font-size: 16px; }
body[data-theme="stars"] #self-username { color: #FFC64D; }

/* ── Fix #3: Recipient display — white card in light theme (Variant A) ── */
body.theme-light .recipient-display {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04) !important;
}
body.theme-light .recipient-display .label { color: rgba(0,0,0,.45) !important; }
body.theme-light[data-theme="stars"] .recipient-display { border-color: rgba(230,185,77,.22); }
body.theme-light[data-theme="stars"] #self-username { color: #c69222; font-weight: 700; }

/* ── Fix #3b: Recipient input field — white + gold focus ── */
body.theme-light .recipient-input {
  background: transparent;
}
body.theme-light .recipient-input input {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  color: #1C1C1E !important;
}
body.theme-light .recipient-input input:focus {
  border-color: #E6B94D !important;
  box-shadow: 0 0 0 2px rgba(230,185,77,.14) !important;
  outline: none !important;
}
body.theme-light .recipient-input input::placeholder { color: rgba(0,0,0,.35) !important; }
body.theme-light .recipient-input input.valid { border-color: rgba(34,197,94,.45) !important; }

/* ── Fix #4: CTA button — richer gold, clean press + disabled ── */
body.theme-light[data-theme="stars"] .recipient-pay-btn,
body.theme-light[data-theme="stars"] .payment-pay-btn {
  background: linear-gradient(180deg, #F7CF63 0%, #E8A825 60%, #D49520 100%);
  box-shadow: 0 4px 14px rgba(200,148,30,.30), inset 0 1px 0 rgba(255,255,255,.25);
  color: #1a0e00;
  border-radius: 16px;
}
body.theme-light[data-theme="stars"] .recipient-pay-btn:active,
body.theme-light[data-theme="stars"] .payment-pay-btn:active {
  transform: scale(.983);
  filter: brightness(.93);
  box-shadow: 0 2px 8px rgba(200,148,30,.25);
}
body.theme-light[data-theme="stars"] .recipient-pay-btn:disabled,
body.theme-light[data-theme="stars"] .payment-pay-btn:disabled {
  background: linear-gradient(180deg, rgba(240,200,100,.40) 0%, rgba(210,160,50,.35) 100%);
  box-shadow: none;
  color: rgba(80,50,0,.35);
  cursor: not-allowed;
  transform: none;
  filter: none;
}

/* ── Fix #5: Pack list — unified height 60px, gap 12px, price 15px ── */
body.theme-light[data-theme="stars"] .stars-pack-list {
  gap: 12px;
  margin-top: 16px;
}
body.theme-light[data-theme="stars"] .stars-pack-item {
  min-height: 60px;
  padding: 14px 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
  border-radius: 16px;
}
body.theme-light[data-theme="stars"] .stars-pack-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
body.theme-light[data-theme="stars"] .stars-pack-price {
  font-size: 15px !important;
  font-weight: 700;
  color: #c69222 !important;
  text-shadow: none;
  filter: none !important;
}

/* ── Fix #6: Hero banner — readable subtitle, proper shadow ── */
body.theme-light[data-theme="stars"] .hero-subtitle {
  color: rgba(80,55,5,.65) !important;
  opacity: 1 !important;
  font-size: 13px;
}
body.theme-light[data-theme="stars"] .hero-banner.hero-v1 {
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  margin-bottom: 8px;
}

/* ── Fix #7: Payment methods — unified radius 16px, gold selected ── */
body.theme-light[data-theme="stars"] .pay-methods { gap: 12px; }
body.theme-light[data-theme="stars"] .pay-method {
  border-radius: 16px;
  min-height: 56px;
}
body.theme-light[data-theme="stars"] .pay-method.selected {
  background: linear-gradient(135deg, #ffffff 0%, #fffaed 100%);
  border: 1.5px solid #E6B94D;
  box-shadow: 0 4px 14px rgba(200,155,30,.12);
}
body.theme-light[data-theme="stars"] .pay-method.selected .pm-check {
  background: linear-gradient(180deg, #F7CF63, #D49520);
  border-color: rgba(230,185,77,.60);
  color: #1a0e00;
  box-shadow: 0 2px 6px rgba(200,148,30,.30);
}
body.theme-light[data-theme="stars"] .pm-name { color: #1C1C1E; }

/* ── Fix #8: Custom amount input — white, clean, gold focus ── */
body.theme-light[data-theme="stars"] .custom-input-standalone {
  background: #ffffff !important;
  border: 1.5px solid rgba(0,0,0,.10) !important;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
  padding: 12px 16px !important;
}
body.theme-light[data-theme="stars"] .custom-input-standalone:focus-within {
  border-color: #E6B94D !important;
  box-shadow: 0 0 0 2px rgba(230,185,77,.14), 0 2px 8px rgba(0,0,0,.05) !important;
}
body.theme-light[data-theme="stars"] .custom-input-standalone input {
  color: #1C1C1E !important;
  -webkit-text-fill-color: #1C1C1E !important;
  border-bottom: none;
}
body.theme-light[data-theme="stars"] .custom-input-standalone input::placeholder {
  color: rgba(0,0,0,.35) !important;
}
/* Info pill — lighter weight than before */
body.theme-light[data-theme="stars"] .inline-price-display {
  background: rgba(230,185,77,.08);
  border: 1px solid rgba(230,185,77,.22);
  border-radius: 12px;
  color: #c69222;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
}

/* ══════════════════════════════════════════════════════
   LIGHT THEME — SHARED BASE (all portal screens)
══════════════════════════════════════════════════════ */

/* ── Recipient toggle — cream base, no dark navy ── */
body.theme-light .recipient-toggle {
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
}
body.theme-light .recipient-toggle button { color: rgba(0,0,0,.40); }
body.theme-light .recipient-toggle button.active { color: #1C1C1E; }
body.theme-light .segment-pill {
  background: rgba(0,0,0,.08);
  box-shadow: 0 1px 4px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.40);
}

/* ── Summary card — white glass ── */
body.theme-light .summary-card {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.09) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.09), 0 2px 6px rgba(0,0,0,.05) !important;
}
body.theme-light .summary-card::after { display: none !important; }
body.theme-light .summary-row { border-bottom-color: rgba(0,0,0,.06) !important; }
body.theme-light .summary-row .label { color: rgba(0,0,0,.50) !important; font-weight: 500 !important; }
body.theme-light .summary-row .value { color: #1C1C1E !important; font-weight: 600 !important; }

/* ── Pay methods — white cards for all light portals ── */
body.theme-light .pay-method {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 4px 14px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  color: #1C1C1E;
  border-radius: 16px;
  min-height: 56px;
}
body.theme-light .pay-method:hover { border-color: rgba(0,0,0,.14); }
body.theme-light .pm-name { color: #1C1C1E; }


/* ══════════════════════════════════════════════════════
   LIGHT THEME — STEAM SECTION
══════════════════════════════════════════════════════ */

/* ── Segment pill — blue for steam ── */
body.theme-light[data-theme="steam"] .segment-pill {
  background: linear-gradient(180deg, #6ab4ff 0%, #3a7fe8 100%);
  box-shadow: 0 2px 8px rgba(58,127,232,.35), inset 0 1px 0 rgba(255,255,255,.30);
}
body.theme-light[data-theme="steam"] .recipient-toggle button.active { color: #ffffff; }

/* ── Calc widget (conversion card) — white + blue border ── */
body.theme-light[data-theme="steam"] .steam-calc-widget {
  background: #ffffff;
  border: 1px solid rgba(100,160,255,.25);
  box-shadow: 0 4px 14px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
  border-radius: 16px;
}
body.theme-light[data-theme="steam"] .steam-rate-row {
  border-bottom-color: rgba(0,0,0,.06);
}
body.theme-light[data-theme="steam"] .steam-rate-title { color: rgba(0,0,0,.50); }
body.theme-light[data-theme="steam"] .steam-rate-cur   { color: rgba(0,0,0,.50); }
body.theme-light[data-theme="steam"] .steam-rate-value { color: #1C1C1E; font-weight: 600; }
body.theme-light[data-theme="steam"] .steam-total-row .steam-rate-value {
  color: #3a7fe8;
  font-size: 18px;
  font-weight: 800;
}

/* ── Login input ── */
body.theme-light[data-theme="steam"] .recipient-input {
  background: transparent;
}
body.theme-light[data-theme="steam"] .recipient-input input {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  color: #1C1C1E !important;
  -webkit-text-fill-color: #1C1C1E !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
}
body.theme-light[data-theme="steam"] .recipient-input input::placeholder {
  color: rgba(15,23,42,.28) !important;
  font-weight: 400 !important;
}
body.theme-light[data-theme="steam"] .recipient-input input:focus {
  border-color: #5B7CFF !important;
  box-shadow: 0 0 0 4px rgba(91,124,255,.15) !important;
}

/* ── Amount input row ── */
body.theme-light[data-theme="steam"] .custom-input-row {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
}
body.theme-light[data-theme="steam"] .custom-input-row:focus-within {
  border-color: #4a90e8 !important;
  box-shadow: 0 0 0 2px rgba(74,144,232,.14), 0 2px 8px rgba(0,0,0,.05) !important;
}
body.theme-light[data-theme="steam"] .custom-input-row input {
  color: #1C1C1E !important;
  -webkit-text-fill-color: #1C1C1E !important;
  background: transparent !important;
}
body.theme-light[data-theme="steam"] .custom-input-row input::placeholder {
  color: rgba(15,23,42,.28) !important;
  font-weight: 400 !important;
}
body.theme-light[data-theme="steam"] .custom-input-row .label,
body.theme-light[data-theme="steam"] #steam-currency-symbol { color: rgba(0,0,0,.45); }

/* ── ДАЛЕЕ / pay buttons — premium blue ── */
body.theme-light[data-theme="steam"] .steam-next-btn,
body.theme-light[data-theme="steam"] .recipient-pay-btn,
body.theme-light[data-theme="steam"] .payment-pay-btn {
  background: linear-gradient(180deg, #6ab4ff 0%, #3a7fe8 60%, #2060c8 100%);
  box-shadow: 0 4px 14px rgba(58,127,232,.30), inset 0 1px 0 rgba(255,255,255,.20);
  color: #ffffff;
  border-radius: 16px;
}
body.theme-light[data-theme="steam"] .steam-next-btn:active,
body.theme-light[data-theme="steam"] .recipient-pay-btn:active,
body.theme-light[data-theme="steam"] .payment-pay-btn:active {
  transform: scale(.983);
  filter: brightness(.93);
}
body.theme-light[data-theme="steam"] .steam-next-btn:disabled,
body.theme-light[data-theme="steam"] .recipient-pay-btn:disabled,
body.theme-light[data-theme="steam"] .payment-pay-btn:disabled {
  background: linear-gradient(180deg, rgba(100,180,255,.40) 0%, rgba(60,120,220,.35) 100%);
  box-shadow: none;
  color: rgba(0,50,150,.30);
  cursor: not-allowed;
  transform: none; filter: none;
}

/* ── Payment methods — blue tint when selected ── */
/* box-shadow NOT !important — lightCardBreathBlue animation must be able to override */
body.theme-light[data-theme="steam"] .pay-method.selected {
  background: rgba(91,124,255,.08) !important;
  border: 1.5px solid rgba(91,124,255,.30) !important;
  box-shadow: 0 4px 14px rgba(91,124,255,.10);
}
body.theme-light[data-theme="steam"] .pay-method.selected .pm-name {
  color: #0F172A !important;
}
body.theme-light[data-theme="steam"] .pay-method.selected .pm-check {
  background: linear-gradient(180deg, #6ab4ff 0%, #2060c8 100%) !important;
  border-color: rgba(91,124,255,.50) !important;
  color: #ffffff !important;
  transform: scale(1.02) !important;
  box-shadow: 0 3px 8px rgba(58,127,232,.28), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
body.theme-light[data-theme="steam"] .pm-check {
  border-color: rgba(15,23,42,.15) !important;
  background: transparent !important;
}

/* ── Payment summary — contrast hierarchy (beats dark !important) ── */
body.theme-light[data-theme="steam"] #payment-summary .summary-row .label {
  color: rgba(15,23,42,.55) !important;
  font-weight: 500 !important;
}
body.theme-light[data-theme="steam"] #payment-summary .summary-row .value {
  color: rgba(15,23,42,.82) !important;
  font-weight: 600 !important;
}
body.theme-light[data-theme="steam"] #payment-summary .summary-total .label {
  color: rgba(15,23,42,.55) !important;
}
/* ── Summary card — blue total ── */
body.theme-light[data-theme="steam"] .summary-row.summary-total .value {
  color: #3a7fe8;
  font-size: 18px;
  font-weight: 800;
  filter: none !important;
}

/* ── Suppress heavy dark animations ── */
body.theme-light[data-theme="steam"] #screen-steam::before { display: none; }

/* ══════════════════════════════════════════════════════
   LIGHT THEME — STEAM DEEP POLISH
══════════════════════════════════════════════════════ */

/* ── Amount field minimum hint ── */
/* ── Steam info button & modal ─────────────────────────── */
.section-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title-row .section-title {
  flex: 1;
  margin: 0;
}
.steam-info-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px 5px 6px;
  margin: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(79,163,255,.18) 0%, rgba(42,130,232,.10) 100%);
  border: 1px solid rgba(110,184,255,.35);
  box-shadow: 0 0 10px rgba(79,163,255,.15), inset 0 1px 0 rgba(255,255,255,.08);
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  font-family: inherit;
  transition: border-color .18s, box-shadow .18s, background .18s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  text-align: left;
  vertical-align: middle;
  outline: none;
}
.steam-info-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6eb8ff 0%, #2a82e8 100%);
  box-shadow: 0 0 7px rgba(110,184,255,.5);
  flex-shrink: 0;
  overflow: hidden;
}
.steam-info-btn__icon svg {
  display: block;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
.steam-info-btn__label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(110,184,255,.9);
  letter-spacing: .01em;
  white-space: nowrap;
  line-height: 1;
}
.steam-info-btn:active {
  border-color: rgba(110,184,255,.6);
  box-shadow: 0 0 16px rgba(79,163,255,.3), inset 0 1px 0 rgba(255,255,255,.1);
  background: linear-gradient(135deg, rgba(79,163,255,.26) 0%, rgba(42,130,232,.16) 100%);
}

/* Overlay backdrop */
.steam-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  opacity: 0;
  transition: opacity .22s ease;
}
.steam-info-overlay.visible {
  opacity: 1;
}
.steam-info-overlay .steam-info-modal {
  transform: translateY(32px);
  transition: transform .22s ease;
}
.steam-info-overlay.visible .steam-info-modal {
  transform: translateY(0);
}
/* Modal sheet */
.steam-info-modal {
  width: 100%;
  max-width: 480px;
  background: #0e1c2e;
  border: 1px solid rgba(79,163,255,.18);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,.5), 0 -1px 0 rgba(79,163,255,.1);
  overflow: visible;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.steam-info-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(79,163,255,.1);
  flex-shrink: 0;
}
.steam-info-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(79,163,255,.10);
  border: 1px solid rgba(79,163,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.steam-info-title {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.steam-info-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(239,68,68,.15);
  border: 1px solid rgba(239,68,68,.30);
  color: #f87171;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: background .15s;
}
.steam-info-close span { display: flex; align-items: center; justify-content: center; line-height: 1; }
.steam-info-close:hover { background: rgba(239,68,68,.28); color: #fca5a5; }
.steam-info-close:active { background: rgba(239,68,68,.35); }
.steam-info-body {
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  box-sizing: border-box;
}
/* Placeholder until real content is added */
.steam-info-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 0;
  color: rgba(255,255,255,.35);
}
.steam-info-placeholder-icon { font-size: 36px; }
.steam-info-placeholder-text { font-size: 14px; }

/* ── Modal content sections ── */
.steam-info-section {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.steam-info-section > * {
  margin-bottom: 10px;
}
.steam-info-section > *:last-child {
  margin-bottom: 0;
}
.steam-info-section-icon {
  font-size: 22px;
  line-height: 1;
}
.steam-info-section-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(110,184,255,.85);
}
.steam-info-section-text {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.8);
}
.steam-info-section-text strong {
  color: #fff;
  font-weight: 700;
}
/* Countries grid */
.steam-info-countries {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.steam-info-country {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 4px 7px;
  border-radius: 12px;
  background: rgba(79,163,255,.1);
  border: 1px solid rgba(79,163,255,.2);
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  text-align: center;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.steam-info-country .flag-icon {
  width: 28px;
  height: 21px;
  border-radius: 3px;
  flex-shrink: 0;
  display: block;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
/* Divider */
.steam-info-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79,163,255,.2), transparent);
  margin: 4px 0;
}
/* Warning section */
.steam-info-warn .steam-info-section-title {
  color: rgba(255,185,80,.9);
}
.steam-info-warn {
  background: rgba(255,160,50,.06);
  border: 1px solid rgba(255,160,50,.15);
  border-radius: 14px;
  padding: 14px;
}

/* Light theme */
body.theme-light .steam-info-modal {
  background: #f0f6ff;
  border-color: rgba(79,163,255,.25);
}
body.theme-light .steam-info-title { color: #0f172a; }
body.theme-light .steam-info-close { background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.25); color: #dc2626; }
body.theme-light .steam-info-placeholder { color: rgba(0,0,0,.3); }
body.theme-light .steam-info-country { background: rgba(42,100,200,.08); border-color: rgba(42,100,200,.18); color: #1a2a4a; }
body.theme-light .steam-info-section-text { color: rgba(15,23,42,.75); }
body.theme-light .steam-info-section-text strong { color: #0f172a; }
body.theme-light .steam-info-warn { background: rgba(200,120,0,.05); border-color: rgba(200,120,0,.15); }

.steam-amount-hint {
  font-size: 12px;
  margin-top: 6px;
  padding: 0 4px;
  color: var(--text-secondary);
}
body.theme-light[data-theme="steam"] .steam-amount-hint {
  color: rgba(15,23,42,.40);
}
body[data-theme="steam"] .steam-amount-hint {
  color: rgba(120,175,220,.45);
}
/* ── Stars custom input — minimum hint below field ── */
.stars-custom-hint {
  font-size: 12px;
  margin-top: 6px;
  padding: 0 4px;
  color: var(--text-secondary);
}
body.theme-light[data-theme="stars"] .stars-custom-hint {
  color: rgba(140,95,15,.50);
}
body[data-theme="stars"] .stars-custom-hint {
  color: rgba(255,198,77,.45);
}
.stars-custom-hint .hint-star-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  margin-left: -18px;
  position: relative;
  margin-top: -17px;
  margin-bottom: -17px;
}

/* Иконка звезды в hint «Минимум: 50» — те же размеры что в pack items */
#stars-input-hint .stars-pack-icon-wrap {
  vertical-align: -8px;
  position: relative;
  top: 0.5px;
  left: -2px;
}
#stars-input-hint .stars-pack-icon-img {
  width: 49px;
  height: 49px;
}

/* ── Steam banner — light version (blue tinted cream) ── */
body.theme-light[data-theme="steam"] .hero-steam {
  background:
    radial-gradient(ellipse at 70% 50%, rgba(91,124,255,.12) 0%, transparent 65%),
    radial-gradient(ellipse at 20% 80%, rgba(58,127,232,.08) 0%, transparent 55%),
    linear-gradient(135deg, #f0f5ff 0%, #e8efff 60%, #dde8ff 100%);
  border-color: rgba(91,124,255,.20);
  box-shadow: 0 4px 24px rgba(91,124,255,.10), inset 0 1px 0 rgba(255,255,255,.70);
}
/* Title — dark blue gradient text (animation handled by lightShimmerBlue block above) */
body.theme-light[data-theme="steam"] #screen-steam .pixel-title .shimmer-text-blue {
  filter: none !important;
}
/* Subtitle — dark secondary instead of light blue */
body.theme-light[data-theme="steam"] #screen-steam .hero-subtitle {
  color: rgba(15,23,42,.55) !important;
  opacity: 1 !important;
  font-size: 13px;
}

/* ── Currency suffix ₽ — inline with thin divider (matches dark pattern in light) ── */
body.theme-light[data-theme="steam"] .custom-input-row .label,
body.theme-light[data-theme="steam"] #steam-currency-symbol {
  color: rgba(15,23,42,.45) !important;
  background: transparent !important;
  border-left: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 14px !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
}
body.theme-light[data-theme="steam"] .custom-input-row:focus-within .label,
body.theme-light[data-theme="steam"] .custom-input-row:focus-within #steam-currency-symbol {
  border-left-color: rgba(91,124,255,.20) !important;
  color: rgba(15,23,42,.55) !important;
}

/* ── Steam info button — light theme ── */
body.theme-light[data-theme="steam"] .steam-info-btn {
  background: linear-gradient(135deg, rgba(58,127,232,.12) 0%, rgba(42,130,232,.07) 100%);
  border-color: rgba(58,127,232,.3);
  box-shadow: 0 0 8px rgba(58,127,232,.1), inset 0 1px 0 rgba(255,255,255,.6);
}
body.theme-light[data-theme="steam"] .steam-info-btn__label {
  color: rgba(42,100,200,.85);
}

/* ── Conversion widget — total cost row (beats !important dark rules) ── */
body.theme-light[data-theme="steam"] #steam-total-cost {
  border-top-color: rgba(0,0,0,.08) !important;
  color: rgba(15,23,42,.55) !important;
}
body.theme-light[data-theme="steam"] .total-label-txt {
  color: rgba(15,23,42,.55) !important;
}
body.theme-light[data-theme="steam"] .total-amount-txt {
  color: #3a7fe8 !important;
  text-shadow: none !important;
  font-size: 19px;
  font-weight: 800;
}
/* Rate info line "1 USD = N RUB" */
body.theme-light[data-theme="steam"] #steam-rate-info {
  color: rgba(15,23,42,.38) !important;
}

/* ── Section title labels (login / amount labels) ── */
body.theme-light[data-theme="steam"] .section-title {
  color: rgba(15,23,42,.45) !important;
  border-bottom-color: rgba(0,0,0,.06) !important;
  text-transform: none;
  letter-spacing: normal;
  font-size: 13px;
  font-weight: 600;
}

/* ── Payment method cards — beat dark-theme !important (navy → white) ── */
body.theme-light[data-theme="steam"] .pay-method {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04) !important;
}
body.theme-light[data-theme="steam"] .pay-method:hover {
  border-color: rgba(74,144,232,.25) !important;
}
body.theme-light[data-theme="steam"] .pm-name {
  color: #0F172A !important;
}
/* ── "СПОСОБ ОПЛАТЫ" label — readable in light ── */
body.theme-light[data-theme="steam"] #payment-method-label {
  color: rgba(15,23,42,.52) !important;
  border-bottom-color: rgba(0,0,0,.07) !important;
  font-size: 11px !important;
  letter-spacing: .10em !important;
}

/* ══════════════════════════════════════════════════════
   LIGHT THEME — PREMIUM SECTION
══════════════════════════════════════════════════════ */

/* ── Segment pill — purple softer ── */
body.theme-light[data-theme="premium"] .segment-pill {
  background: linear-gradient(180deg, #d4a8ff 0%, #a270f0 100%);
  box-shadow: 0 3px 10px rgba(138,92,255,.30), 0 1px 3px rgba(138,92,255,.15), inset 0 1px 0 rgba(255,255,255,.35);
}
body.theme-light[data-theme="premium"] .recipient-toggle button.active { color: #ffffff; }
/* ── Tabs track — light purple tint, unified feel ── */
body.theme-light[data-theme="premium"] .recipient-toggle {
  background: rgba(155,92,255,.12) !important;
  border-color: rgba(155,92,255,.22) !important;
}
body.theme-light[data-theme="premium"] .recipient-toggle button {
  color: rgba(60,20,90,.50) !important;
}

/* ── Product cards — lighter than bg, float with soft shadow ── */
body.theme-light[data-theme="premium"] .product-card {
  background: #faf8ff !important;
  border: 1px solid rgba(160,100,255,.10) !important;
  box-shadow:
    0 2px 8px rgba(100,60,200,.07),
    0 8px 28px rgba(100,60,200,.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 16px !important;
}
body.theme-light[data-theme="premium"] .product-card:hover {
  border-color: rgba(155,92,255,.22) !important;
  box-shadow:
    0 2px 8px rgba(100,60,200,.08),
    0 10px 32px rgba(100,60,200,.11) !important;
  transform: none !important;
}
body.theme-light[data-theme="premium"] .product-card:active {
  transform: scale(.985) !important;
  box-shadow: 0 1px 6px rgba(100,60,200,.07) !important;
}
/* Selected — barely lighter surface + clear purple border + breath */
body.theme-light[data-theme="premium"] .product-card.selected {
  background: #ffffff !important;
  border: 1.5px solid rgba(138,80,255,.38) !important;
  animation: lightCardBreath 4s ease-in-out infinite !important;
}
/* Featured (12 мес) — same as base card, selected state handles highlight */
body.theme-light[data-theme="premium"] .product-card.premium-featured {
  background: #faf8ff !important;
  border: 1px solid rgba(160,100,255,.10) !important;
  box-shadow:
    0 2px 8px rgba(100,60,200,.07),
    0 8px 28px rgba(100,60,200,.08) !important;
}
body.theme-light[data-theme="premium"] .product-card.premium-featured::after {
  display: none !important;
}
body.theme-light[data-theme="premium"] .product-card.premium-featured::before {
  content: none !important;
  display: none !important;
}
/* ── Period text ("💎 3 мес" etc) — legible dark violet ── */
body.theme-light[data-theme="premium"] .product-card .p-title {
  color: rgba(45,10,80,.62) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
}
/* ── Price — unchanged, keep as-is ── */
body.theme-light[data-theme="premium"] .product-card .p-price {
  color: #7b3fe0 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  letter-spacing: -.2px !important;
  filter: none !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
}
/* ── Grid spacing — more air between cards ── */
body.theme-light[data-theme="premium"] .product-grid { gap: 16px; }

/* ── Banner — light purple tinted cream ── */
body.theme-light[data-theme="premium"] .hero-premium,
body.theme-light[data-theme="premium"] #screen-premium .hero-banner {
  background:
    radial-gradient(ellipse at 70% 50%, rgba(168,85,247,.10) 0%, transparent 65%),
    radial-gradient(ellipse at 20% 80%, rgba(140,60,255,.06) 0%, transparent 55%),
    linear-gradient(135deg, #f8f4ff 0%, #f2ecff 60%, #ede4ff 100%);
  border-color: rgba(168,85,247,.18);
  box-shadow: 0 4px 24px rgba(168,85,247,.08), inset 0 1px 0 rgba(255,255,255,.70);
}
body.theme-light[data-theme="premium"] #screen-premium .hero-subtitle {
  color: rgba(60,20,90,.60) !important;
  opacity: 1 !important;
  font-size: 13px;
}
/* Title — dark violet gradient text (animation handled by lightShimmerPurple block above) */
body.theme-light[data-theme="premium"] #screen-premium .pixel-title .shimmer-text-purple {
  filter: none !important;
}

/* ── Recipient display — purple accent ── */
body.theme-light[data-theme="premium"] .recipient-display {
  border-color: rgba(180,120,255,.22);
}
body.theme-light[data-theme="premium"] #self-username {
  color: #9b5cff;
  font-weight: 700;
}
body.theme-light[data-theme="premium"] .recipient-input input {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.10);
  color: #1C1C1E;
}
body.theme-light[data-theme="premium"] .recipient-input input:focus {
  border-color: #9b5cff;
  box-shadow: 0 0 0 2px rgba(155,92,255,.14);
}
/* ── "ПОЛУЧАТЕЛЬ" label — slightly darker ── */
body.theme-light[data-theme="premium"] .recipient-display .label {
  color: rgba(60,20,90,.55) !important;
}
/* ── Recipient screen — selected-product-info contrast ── */
body.theme-light[data-theme="premium"] #selected-product-info .summary-row .label {
  color: rgba(60,20,90,.50) !important;
  font-weight: 500 !important;
}
body.theme-light[data-theme="premium"] #selected-product-info .summary-row .value {
  color: rgba(60,20,90,.82) !important;
  font-weight: 600 !important;
}

/* ── CTA buttons — smooth violet gradient ── */
body.theme-light[data-theme="premium"] .recipient-pay-btn,
body.theme-light[data-theme="premium"] .payment-pay-btn {
  background: linear-gradient(180deg, #c896ff 0%, #a968ff 35%, #8f4ff5 70%, #7a3ae0 100%);
  box-shadow: 0 4px 18px rgba(138,92,255,.26), inset 0 1px 0 rgba(255,255,255,.22);
  color: #ffffff;
  border-radius: 16px;
}
body.theme-light[data-theme="premium"] .recipient-pay-btn:active,
body.theme-light[data-theme="premium"] .payment-pay-btn:active {
  transform: scale(.983); filter: brightness(.93);
}
body.theme-light[data-theme="premium"] .recipient-pay-btn:disabled,
body.theme-light[data-theme="premium"] .payment-pay-btn:disabled {
  background: linear-gradient(180deg, rgba(180,120,255,.40) 0%, rgba(130,80,220,.35) 100%);
  box-shadow: none; color: rgba(80,0,150,.30);
  cursor: not-allowed; transform: none; filter: none;
}


/* ── Payment methods — white cards, purple selected ── */
body.theme-light[data-theme="premium"] .pay-method {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04) !important;
}
body.theme-light[data-theme="premium"] .pay-method:hover {
  border-color: rgba(155,92,255,.25) !important;
}
body.theme-light[data-theme="premium"] .pm-name {
  color: #1C1C1E !important;
}
body.theme-light[data-theme="premium"] .pay-method.selected {
  background: rgba(155,92,255,.12) !important;
  border: 1.5px solid rgba(155,92,255,.36) !important;
  box-shadow: 0 4px 14px rgba(138,92,255,.12) !important;
}
body.theme-light[data-theme="premium"] .pay-method.selected .pm-name {
  color: #1C1C1E !important;
}
body.theme-light[data-theme="premium"] .pay-method.selected .pm-check {
  background: linear-gradient(180deg, #c48bff 0%, #6e3fe0 100%) !important;
  border-color: rgba(155,92,255,.50) !important;
  color: #ffffff !important;
  transform: scale(1.02) !important;
  box-shadow: 0 3px 8px rgba(138,92,255,.28), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
body.theme-light[data-theme="premium"] .pm-check {
  border-color: rgba(15,23,42,.15) !important;
  background: transparent !important;
}
/* ── "СПОСОБ ОПЛАТЫ" label — premium light ── */
body.theme-light[data-theme="premium"] #payment-method-label {
  color: rgba(60,20,90,.50) !important;
  border-bottom-color: rgba(0,0,0,.07) !important;
}
/* ── Payment summary — contrast hierarchy ── */
body.theme-light[data-theme="premium"] #payment-summary .summary-row .label {
  color: rgba(60,20,90,.48) !important;
  font-weight: 500 !important;
}
body.theme-light[data-theme="premium"] #payment-summary .summary-row .value {
  color: rgba(30,8,60,.88) !important;
  font-weight: 600 !important;
}
body.theme-light[data-theme="premium"] #payment-summary .summary-total .label {
  color: rgba(60,20,90,.52) !important;
}

/* ── Summary card — purple total ── */
body.theme-light[data-theme="premium"] .summary-row.summary-total .value {
  color: #9b5cff;
  font-size: 18px;
  font-weight: 800;
  filter: none !important;
}

/* ══════════════════════════════════════════════════════
   LIGHT THEME — GIFTS SECTION
══════════════════════════════════════════════════════ */

/* ── Suppress heavy dark background animation ── */
body.theme-light[data-theme="gifts"] #gifts-bg { display: none; }

/* ── Segment pill — green ── */
body.theme-light[data-theme="gifts"] .segment-pill {
  background: linear-gradient(180deg, #5ed49a 0%, #28a46a 100%);
  box-shadow: 0 2px 8px rgba(40,164,106,.35), inset 0 1px 0 rgba(255,255,255,.30);
}
body.theme-light[data-theme="gifts"] .recipient-toggle button.active { color: #ffffff; }

/* ── Gift product cards — light green, float above bg ── */
body.theme-light[data-theme="gifts"] .product-card {
  background: #f4fff9 !important;
  border: 1px solid rgba(40,164,106,.12) !important;
  box-shadow:
    0 2px 8px rgba(20,120,70,.06),
    0 8px 26px rgba(20,120,70,.07) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 16px !important;
}
body.theme-light[data-theme="gifts"] .product-card::before {
  display: none !important;
}
body.theme-light[data-theme="gifts"] .product-card > * {
  position: static !important;
  z-index: unset !important;
}
body.theme-light[data-theme="gifts"] .product-card:hover {
  border-color: rgba(40,164,106,.25) !important;
  box-shadow:
    0 2px 8px rgba(20,120,70,.07),
    0 10px 30px rgba(20,120,70,.10) !important;
  transform: none !important;
}
body.theme-light[data-theme="gifts"] .product-card:active {
  transform: scale(.985) !important;
  box-shadow: 0 1px 6px rgba(20,120,70,.07) !important;
}
body.theme-light[data-theme="gifts"] .product-card.selected {
  background: #edfff6 !important;
  border: 1.5px solid rgba(46,189,122,.40) !important;
  animation: lightCardBreathGreen 4s ease-in-out infinite !important;
}
body.theme-light[data-theme="gifts"] .product-card.selected::after {
  display: none !important;
}
body.theme-light[data-theme="gifts"] .product-card.gift-top {
  border-color: rgba(40,164,106,.16) !important;
}
body.theme-light[data-theme="gifts"] .product-card.gift-low {
  opacity: 1 !important;
  border-color: rgba(40,164,106,.08) !important;
}
/* ── Price — clear green, bolder ── */
body.theme-light[data-theme="gifts"] .product-card .p-price {
  color: #1e9e62 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
  filter: none !important;
}
/* ── Stars/title text — dark, legible ── */
body.theme-light[data-theme="gifts"] .product-card .p-title {
  color: rgba(10,40,25,.65) !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
}
/* ── Emoji — clean, no heavy drop-shadow ── */
body.theme-light[data-theme="gifts"] .product-card .p-emoji {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.12)) !important;
}
body.theme-light[data-theme="gifts"] .product-card:hover .p-emoji,
body.theme-light[data-theme="gifts"] .product-card:active .p-emoji {
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.16)) !important;
  transform: none !important;
}
body.theme-light[data-theme="gifts"] .gift-grid { gap: 16px; }

/* ── Recipient display — green accent ── */
body.theme-light[data-theme="gifts"] .recipient-display {
  border-color: rgba(80,200,140,.22);
}
body.theme-light[data-theme="gifts"] #self-username {
  color: #2ebd7a;
  font-weight: 700;
}
body.theme-light[data-theme="gifts"] .recipient-input input {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.10);
  color: #1C1C1E;
}
body.theme-light[data-theme="gifts"] .recipient-input input:focus {
  border-color: #2ebd7a;
  box-shadow: 0 0 0 2px rgba(46,189,122,.14);
}

/* ── CTA buttons — green ── */
body.theme-light[data-theme="gifts"] .recipient-pay-btn,
body.theme-light[data-theme="gifts"] .payment-pay-btn {
  background: linear-gradient(180deg, #5ed49a 0%, #28a46a 60%, #1a8052 100%);
  box-shadow: 0 4px 14px rgba(40,164,106,.30), inset 0 1px 0 rgba(255,255,255,.20);
  color: #ffffff;
  border-radius: 16px;
}
body.theme-light[data-theme="gifts"] .recipient-pay-btn:active,
body.theme-light[data-theme="gifts"] .payment-pay-btn:active {
  transform: scale(.983); filter: brightness(.93);
}
body.theme-light[data-theme="gifts"] .recipient-pay-btn:disabled,
body.theme-light[data-theme="gifts"] .payment-pay-btn:disabled {
  background: linear-gradient(180deg, rgba(80,200,140,.40) 0%, rgba(30,128,82,.35) 100%);
  box-shadow: none; color: rgba(0,80,40,.30);
  cursor: not-allowed; transform: none; filter: none;
}


/* ── Banner subtitle — secondary, darker than bg ── */
body.theme-light[data-theme="gifts"] #screen-gifts .hero-subtitle {
  color: rgba(8,45,25,.62) !important;
  opacity: 1 !important;
  font-size: 13px;
}
/* ── Recipient display label ── */
body.theme-light[data-theme="gifts"] .recipient-display .label {
  color: rgba(10,50,30,.55) !important;
}
/* ── Segment pill — stronger floating shadow ── */
body.theme-light[data-theme="gifts"] .segment-pill {
  box-shadow: 0 4px 12px rgba(40,164,106,.38), 0 2px 4px rgba(40,164,106,.18), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
/* ── Payment method cards — white, beat dark !important ── */
body.theme-light[data-theme="gifts"] .pay-method {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04) !important;
}
body.theme-light[data-theme="gifts"] .pay-method:hover {
  border-color: rgba(46,189,122,.25) !important;
}
body.theme-light[data-theme="gifts"] .pm-name {
  color: #1C1C1E !important;
}
body.theme-light[data-theme="gifts"] .pay-method.selected {
  background: rgba(46,189,122,.12) !important;
  border: 1.5px solid rgba(46,189,122,.38) !important;
  box-shadow: 0 4px 14px rgba(40,164,106,.12) !important;
}
body.theme-light[data-theme="gifts"] .pay-method.selected .pm-name {
  color: #1C1C1E !important;
}
body.theme-light[data-theme="gifts"] .pay-method.selected .pm-check {
  background: linear-gradient(180deg, #5ed49a 0%, #1a8052 100%) !important;
  border-color: rgba(46,189,122,.50) !important;
  color: #ffffff !important;
  transform: scale(1.02) !important;
  box-shadow: 0 3px 8px rgba(40,164,106,.28), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
body.theme-light[data-theme="gifts"] .pm-check {
  border-color: rgba(15,23,42,.15) !important;
  background: transparent !important;
}
/* ── "СПОСОБ ОПЛАТЫ" label — gifts light ── */
body.theme-light[data-theme="gifts"] #payment-method-label {
  color: rgba(10,50,30,.50) !important;
  border-bottom-color: rgba(0,0,0,.07) !important;
}
/* ── Payment summary labels ── */
body.theme-light[data-theme="gifts"] #payment-summary .summary-row .label {
  color: rgba(10,50,30,.48) !important;
  font-weight: 500 !important;
}
body.theme-light[data-theme="gifts"] #payment-summary .summary-row .value {
  color: rgba(5,30,15,.88) !important;
  font-weight: 600 !important;
}
body.theme-light[data-theme="gifts"] #payment-summary .summary-total .label {
  color: rgba(10,50,30,.52) !important;
}
/* ── Selected product info (recipient screen) ── */
body.theme-light[data-theme="gifts"] #selected-product-info .summary-row .label {
  color: rgba(10,50,30,.50) !important;
  font-weight: 500 !important;
}
body.theme-light[data-theme="gifts"] #selected-product-info .summary-row .value {
  color: rgba(5,30,15,.82) !important;
  font-weight: 600 !important;
}

/* ── Summary card — green total ── */
body.theme-light[data-theme="gifts"] .summary-row.summary-total .value {
  color: #1e9e62;
  font-size: 18px;
  font-weight: 800;
  filter: none !important;
  text-shadow: none !important;
}

/* ══════════════════════════════════════════════════════
   LIGHT THEME — COMPREHENSIVE GLOW KILL (v181)
   Remove all neon glow: text-shadow, box-shadow glow,
   filter glow. Keep only structural shadows.
══════════════════════════════════════════════════════ */

/* Kill ALL text-shadow in light theme */
body.theme-light * {
  text-shadow: none !important;
}
/* Restore only the subtle price text-shadow we intentionally use */
body.theme-light[data-theme="premium"] .product-card .p-price {
  text-shadow: none !important;
}

/* Kill neon filter glow on ALL elements in light theme */
body.theme-light .hero-glow { opacity: 0 !important; display: none !important; }
body.theme-light [class*="glow"] { box-shadow: none !important; }

/* Kill glow on Stars pack items — dark theme has neon box-shadow */
body.theme-light .stars-pack-item {
  box-shadow: 0 8px 24px rgba(0,0,0,.07) !important;
}
body.theme-light[data-theme="stars"] .stars-pack-item {
  box-shadow: 0 8px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04) !important;
}
/* box-shadow animated by lightCardBreathGold — no !important so animation wins */
body.theme-light[data-theme="stars"] .stars-pack-item.selected {
  box-shadow: 0 4px 14px rgba(160,120,20,.13), 0 12px 34px rgba(160,120,20,.17);
}

/* Kill neon box-shadow on CTA buttons — keep structural depth */
body.theme-light .steam-next-btn {
  background: linear-gradient(180deg, #4fa3ff 0%, #1A6FFF 50%, #1558d6 100%) !important;
  box-shadow: 0 4px 14px rgba(25,120,230,.28), 0 2px 6px rgba(0,0,0,.10),
              inset 0 1px 0 rgba(255,255,255,.35) !important;
  color: #fff !important;
}
body.theme-light .steam-next-btn::after {
  animation: ctaBtnShimmer 3.5s ease-in-out infinite !important;
}

/* Kill neon on hero-mascot-wrap glow */
body.theme-light .hero-mascot-wrap::before {
  animation: none !important;
  opacity: 0 !important;
}

/* Kill segment pill neon glow */
body.theme-light .segment-pill {
  box-shadow: 0 2px 8px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.20) !important;
}
/* Per-category pill shadow (override the universal one above where category is richer) */
body.theme-light[data-theme="stars"] .segment-pill {
  box-shadow: 0 2px 8px rgba(200,155,30,.18), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
body.theme-light[data-theme="steam"] .segment-pill {
  box-shadow: 0 2px 8px rgba(58,127,232,.18), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
body.theme-light[data-theme="premium"] .segment-pill {
  box-shadow: 0 3px 10px rgba(138,92,255,.20), inset 0 1px 0 rgba(255,255,255,.30) !important;
}
body.theme-light[data-theme="gifts"] .segment-pill {
  box-shadow: 0 2px 8px rgba(40,164,106,.18), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

/* Kill cat-card icon neon drop-shadows — keep subtle depth only */
body.theme-light .cat-card .cat-icon { filter: none !important; }
body.theme-light #cat-stars   .cat-icon { filter: drop-shadow(0 4px 8px rgba(200,155,30,.18)) !important; }
body.theme-light #cat-steam   .cat-icon { filter: drop-shadow(0 4px 8px rgba(58,127,232,.18)) !important; }
body.theme-light #cat-premium .cat-icon { filter: drop-shadow(0 4px 8px rgba(138,92,255,.15)) !important; }
body.theme-light #cat-gifts   .cat-icon { filter: drop-shadow(0 4px 8px rgba(40,164,106,.15)) !important; }

/* Kill lang button neon glow in light theme */
body.theme-light .lang-btn.active {
  box-shadow: none !important;
  background: linear-gradient(135deg, rgba(37,99,235,.15), rgba(37,99,235,.08)) !important;
  border-color: rgba(37,99,235,.30) !important;
  color: #1a3a8a !important;
}
body.theme-light .lang-btn:not(.active) {
  color: rgba(30,35,50,.55) !important;
  border-color: rgba(0,0,0,.10) !important;
  background: rgba(0,0,0,.03) !important;
}

/* ══════════════════════════════════════════════════════
   STEAM BUTTON FIXES (v181)
   - Entrance animation for both themes
   - Desktop (PC): sticky bottom instead of fixed
   - Light theme shimmer ensure
══════════════════════════════════════════════════════ */

/* Entrance animation keyframes */
@keyframes steamBtnAppear {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Entrance animation — на кнопку внутри, не на wrap (wrap имеет transform для keyboard avoid) */
#steam-cta-wrap .steam-next-btn {
  animation: steamBtnAppear 0.35s cubic-bezier(.25,.46,.45,.94) both;
}


/* Ensure shimmer runs in light theme on steam-next-btn::after */
body.theme-light .steam-next-btn::after {
  animation: ctaBtnShimmer 3.5s ease-in-out infinite !important;
}

/* ══════════════════════════════════════════════════════
   COLOR SPLIT FIX (v181)
   Main catalog screen: eliminate seam between hero
   banner and categories section (both themes).
══════════════════════════════════════════════════════ */
body.theme-light #screen-catalog {
  background: transparent !important;
}
/* Remove margin-bottom gap on hero-home to prevent html bg bleed-through */
body.theme-light .hero-banner.hero-home {
  margin-bottom: 4px !important;
}
/* Dark theme: ensure catalog body bg covers full screen seamlessly */
#screen-catalog {
  background: transparent;
}
/* Dark hero banner: soften bottom edge so it blends into body bg */
#screen-catalog .hero-banner.hero-home {
  box-shadow:
    0 16px 40px rgba(0,0,0,.25),
    0 4px 10px rgba(0,0,0,.15);
}

/* ══════════════════════════════════════════════════════
   SIZE / FONT CONSISTENCY (v181)
   Light theme must NOT change dimensions — only colors.
   Remove any font-size / padding overrides in light theme
   that differ from dark base values.
══════════════════════════════════════════════════════ */

/* Subtitle font-size — match Stars (13px) in all light theme banners */
body.theme-light[data-theme="steam"] #screen-steam .hero-subtitle,
body.theme-light[data-theme="premium"] #screen-premium .hero-subtitle,
body.theme-light[data-theme="gifts"] #screen-gifts .hero-subtitle {
  font-size: 13px !important;
}

/* Language */
.lang-selector { display:flex; gap:8px; }
.lang-btn {
  display:flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:var(--radius-sm);
  background: rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.10); cursor:pointer; font-size:13px;
  font-weight:700; transition:background .15s, color .15s, border-color .15s, box-shadow .15s;
  color:var(--tg-theme-text-color);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  letter-spacing:.04em;
}
.lang-btn.active {
  background: linear-gradient(135deg, rgba(61,235,255,.22), rgba(37,99,235,.28));
  color: #fff;
  border-color: rgba(61,235,255,.55);
  box-shadow:
    0 0 0 1px rgba(61,235,255,.20),
    0 2px 14px rgba(61,235,255,.22),
    inset 0 1px 0 rgba(255,255,255,.12);
}
.lang-btn:not(.active) {
  color: rgba(255,255,255,.55);
  border-color: rgba(255,255,255,.08);
}
.flag-icon {
  width:20px; height:15px;
  border-radius:2px;
  flex-shrink:0;
  display:inline-block;
  vertical-align:middle;
  box-shadow:0 1px 3px rgba(0,0,0,.30);
}

/* Profile / Settings screen background glow */
#screen-profile::before, #screen-settings::before {
  content: '';
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 520px; height: 480px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%,
      rgba(61,235,255,.08) 0%,
      rgba(37,99,235,.05) 45%,
      transparent 70%),
    radial-gradient(ellipse 40% 30% at 20% 80%,
      rgba(37,99,235,.04) 0%,
      transparent 60%),
    radial-gradient(ellipse 40% 30% at 80% 70%,
      rgba(183,116,255,.03) 0%,
      transparent 60%);
  pointer-events: none;
  z-index: 0;
}
#screen-profile > *, #screen-settings > * {
  position: relative;
  z-index: 1;
}

/* Documents submenu */
.documents-submenu {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 300ms cubic-bezier(.4,0,.2,1),
    opacity 240ms ease;
}
.documents-submenu-inner {
  overflow: hidden;
  padding-top: 0;
  transition: padding-top 300ms cubic-bezier(.4,0,.2,1);
}
.documents-submenu.open {
  grid-template-rows: 1fr;
  opacity: 1;
}
.documents-submenu.open .documents-submenu-inner {
  padding-top: 2px;
}
.profile-menu-btn--sub {
  margin-left: 14px !important;
  margin-bottom: 8px !important;
  font-size: 14px !important;
  padding: 13px 16px !important;
  border-color: rgba(61,235,255,.10) !important;
  background: linear-gradient(135deg, rgba(61,235,255,.07), rgba(15,26,43,.40)) !important;
}
.profile-menu-btn--sub .text { font-size:14px !important; }
.documents-arrow {
  transition: transform 260ms cubic-bezier(.4,0,.2,1), color 180ms ease !important;
}
.documents-arrow.open {
  transform: rotate(90deg);
  color: rgba(61,235,255,.85);
}

/* Legal / Stats / Referral content pages */
.legal-content {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  padding: 4px 0 24px;
  max-width: 640px;
  margin: 0 auto;
}
/* Table of contents */
.legal-toc {
  background: rgba(61,235,255,.06);
  border: 1px solid rgba(61,235,255,.12);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
}
.legal-toc-title {
  font-size: 11px; font-weight: 700; opacity: .55;
  margin-bottom: 8px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--tg-theme-text-color);
}
.legal-toc a {
  display: block; font-size: 13px; color: var(--accent);
  text-decoration: none; padding: 3px 0;
}
.legal-toc a:hover { text-decoration: underline; }
.legal-content h2 {
  font-size: 15px;
  font-weight: 700;
  color: var(--tg-theme-text-color);
  margin: 20px 0 8px;
}
.legal-content p { margin-bottom: 12px; }
.legal-content h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--tg-theme-text-color);
  margin: 16px 0 6px;
  opacity: 0.85;
}
.legal-content ul {
  margin: 0 0 12px 0;
  padding-left: 18px;
}
.legal-content li {
  margin-bottom: 5px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}
.stats-content, .referral-content {
  padding: 4px 0 32px;
}

/* Orders */
.order-card {
  background: linear-gradient(160deg, rgba(61,235,255,.14) 0%, rgba(15,26,43,.50) 55%, rgba(37,99,235,.06) 100%);
  border-radius: var(--radius-lg);
  padding: 12px 14px; margin-bottom: 10px; cursor: pointer;
  transition: all .2s cubic-bezier(.25,.46,.45,.94);
  border: 1px solid var(--border-color);
  box-shadow: var(--card-shadow), inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.10);
  display: flex; align-items: center; gap: 12px;
}
.order-card:hover { border-color: var(--accent-border); box-shadow: var(--card-shadow-hover), inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.10); }
.order-card:active { transform: scale(.985); opacity: .92; }
/* Icon container — category image or emoji fallback */
.order-card-icon {
  font-size: 24px; flex-shrink: 0; line-height: 1;
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, rgba(61,235,255,.10) 0%, rgba(37,99,235,.14) 100%);
  border: 1px solid rgba(61,235,255,.12);
  box-shadow: 0 2px 10px rgba(37,99,235,.16), inset 0 1px 0 rgba(255,255,255,.08);
  overflow: hidden;
}
/* Category image inside icon container */
.order-cat-img {
  width: 96px; height: 96px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.order-card-body { flex: 1; min-width: 0; }
.order-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.order-cat-label { font-weight: 600; font-size: 14px; color: var(--tg-theme-text-color); }
.order-card-bottom { display: flex; justify-content: space-between; align-items: center; }
.order-date-label { font-size: 11px; color: var(--text-secondary); font-weight: 400; }
/* Price — slightly larger, brighter, subtle text glow */
.order-price-label {
  font-size: 14px; font-weight: 700;
  color: rgba(255,255,255,.92);
  text-shadow: 0 0 12px rgba(61,235,255,.30);
}
/* Status badges (capsule pill style) */
.order-status-badge {
  font-size: 11px; font-weight: 700; padding: 3px 10px;
  border-radius: 100px; letter-spacing: .2px; white-space: nowrap;
}
.order-status-badge.delivered {
  background: rgba(34,197,94,.18); color: #4ade80;
  box-shadow: 0 0 8px rgba(34,197,94,.22);
}
.order-status-badge.pending,
.order-status-badge.created {
  background: rgba(251,191,36,.18); color: #fbbf24;
  box-shadow: 0 0 8px rgba(251,191,36,.20);
}
.order-status-badge.failed {
  background: rgba(239,68,68,.18); color: #f87171;
  box-shadow: 0 0 8px rgba(239,68,68,.20);
}
.order-status-badge.paid {
  background: rgba(99,102,241,.18); color: #a5b4fc;
  box-shadow: 0 0 8px rgba(99,102,241,.20);
}
/* Legacy .order-status classes (used in order-detail) */
.order-status {
  padding: 4px 12px; border-radius: 100px;
  font-size: 11px; font-weight: 700; letter-spacing: .2px;
}
.order-status.delivered { background: rgba(34,197,94,.16); color: #4ade80; box-shadow: 0 0 8px rgba(34,197,94,.22); }
.order-status.pending   { background: rgba(245,158,11,.16); color: #fbbf24; box-shadow: 0 0 8px rgba(251,191,36,.20); }
.order-status.failed    { background: rgba(239,68,68,.16);  color: #f87171; box-shadow: 0 0 8px rgba(239,68,68,.20); }
.order-status.paid      { background: rgba(99,102,241,.16); color: #a5b4fc; box-shadow: 0 0 8px rgba(99,102,241,.20); }
.order-action-btn {
  margin-top: 12px; padding: 11px 14px;
  background: linear-gradient(135deg,#7c3aed 0%,#4f46e5 100%);
  color: #fff; border: 1px solid rgba(124,58,237,.30); border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 700; cursor: pointer; width: 100%;
  transition: all .15s; box-shadow: 0 4px 14px rgba(124,58,237,.35);
}
.order-action-btn:hover { box-shadow: 0 6px 20px rgba(124,58,237,.45); }
.order-action-btn:active { opacity: .85; transform: scale(.982); }
.load-more-btn {
  padding:14px; background: linear-gradient(135deg, rgba(61,235,255,.12), rgba(15,26,43,.45));
  border:1px solid var(--border-color); border-radius:var(--radius-md); font-size:14px;
  cursor:pointer; width:100%; margin-top:10px; color:var(--tg-theme-text-color); font-weight:600;
  transition:all .15s; box-shadow: var(--card-shadow);
}
.load-more-btn:hover { border-color:var(--accent-border); }
.load-more-btn:active { opacity:.7; }

/* Reviews */
.reviews-header {
  text-align:center; padding:30px 20px; background: linear-gradient(135deg, rgba(61,235,255,.12), rgba(15,26,43,.45));
  border-radius:var(--radius-lg); margin-bottom:16px; border:1px solid var(--border-color);
  box-shadow: var(--card-shadow);
}
.reviews-rating-big { font-size:52px; font-weight:800; color:var(--accent); letter-spacing:-1px; }
.reviews-stars { font-size:24px; margin:10px 0; }
.reviews-count { font-size:14px; color:var(--text-secondary); font-weight:400; }
.review-card {
  background: linear-gradient(135deg, rgba(61,235,255,.12), rgba(15,26,43,.45)); border-radius:var(--radius-lg);
  padding:16px 18px; margin-bottom:12px; border:1px solid var(--border-color);
  box-shadow: var(--card-shadow);
}
.review-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.review-username { font-size:14px; font-weight:700; color:var(--tg-theme-text-color); }
.review-date { font-size:12px; color:var(--text-secondary); }
.review-stars { font-size:16px; margin-bottom:8px; }
.review-comment { font-size:14px; line-height:1.6; color:var(--tg-theme-text-color); }

.review-stars-input { display:flex; gap:14px; justify-content:center; margin:28px 0; }
.review-star {
  font-size:44px; cursor:pointer; transition:all .2s cubic-bezier(.25,.46,.45,.94);
  user-select:none; filter:grayscale(1) opacity(.3);
}
.review-star:active { transform:scale(1.2); }
.review-star.filled { filter:none; transform:scale(1.05); }
.review-textarea {
  width:100%; padding:14px 16px; border:1px solid var(--border-color);
  border-radius:var(--radius-md); font-size:15px; background: linear-gradient(135deg, rgba(61,235,255,.12), rgba(15,26,43,.45));
  color:var(--tg-theme-text-color); outline:none; resize:vertical;
  min-height:100px; font-family:inherit; transition:all .2s;
  box-shadow: var(--card-shadow);
}
.review-textarea::placeholder { color:var(--text-secondary); }
.review-textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.char-counter { text-align:right; font-size:12px; color:var(--text-secondary); margin-top:6px; }

/* Support */
#screen-support {
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(61,235,255,.06) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(37,99,235,.07) 0%, transparent 70%);
}
.ticket-card {
  background: linear-gradient(160deg,
    rgba(61,235,255,.13) 0%,
    rgba(37,99,235,.09) 50%,
    rgba(15,26,43,.55) 100%);
  border-radius: var(--radius-lg);
  padding: 16px 18px; margin-bottom: 12px; cursor: pointer;
  transition: all .2s cubic-bezier(.25,.46,.45,.94);
  border: 1px solid rgba(61,235,255,.14);
  box-shadow: 0 4px 18px rgba(0,0,0,.22), 0 1px 4px rgba(0,0,0,.10),
              inset 0 1px 0 rgba(61,235,255,.10);
}
.ticket-card:hover {
  border-color: var(--accent-border);
  box-shadow: 0 6px 24px rgba(61,235,255,.12), 0 2px 6px rgba(0,0,0,.14),
              inset 0 1px 0 rgba(61,235,255,.14);
}
.ticket-card:active { transform: scale(.98); }
.ticket-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.ticket-subject { font-size:15px; font-weight:700; color:var(--tg-theme-text-color); text-shadow: 0 0 12px rgba(61,235,255,.12); }
.ticket-status { padding: 4px 12px; border-radius: 100px; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.ticket-status.open { background: rgba(34,197,94,.14); color: var(--success); box-shadow: 0 0 8px rgba(34,197,94,.20); }
.ticket-status.closed { background: rgba(239,68,68,.12); color: var(--danger); box-shadow: 0 0 8px rgba(239,68,68,.16); }
.ticket-date { font-size:12px; color:var(--text-secondary); }
.ticket-footer { display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.ticket-delete-btn {
  background: none; border: none; cursor: pointer; padding: 4px 6px;
  color: var(--danger); opacity: .55; font-size: 16px; line-height: 1;
  border-radius: 6px; transition: opacity .2s, background .2s;
}
.ticket-delete-btn:hover { opacity: 1; background: rgba(239,68,68,.12); }
.ticket-delete-btn:active { transform: scale(.9); }
/* Admin ticket chat — chat-messages embedded in scrollable admin panel (not full-screen) */
.adm-chat-messages {
  flex: unset !important;
  min-height: 160px;
  max-height: 58vh;
  overflow-y: auto;
  margin-bottom: 8px;
}
/* ── Admin ticket: full-screen flex layout (like support chat) ── */
#screen-admin-page.adm-ticket-mode.active {
  display: flex !important;
  flex-direction: column;
  overflow: hidden !important;
  padding: 0 !important;
}
#screen-admin-page.adm-ticket-mode .header {
  flex-shrink: 0;
  padding: calc(var(--safe-top, 0px) + 8px + 16px) 18px 12px;
}
#screen-admin-page.adm-ticket-mode #admin-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 12px 18px 0;
  display: flex;
  flex-direction: column;
}
#screen-admin-page.adm-ticket-mode .adm-chat-messages {
  flex: 1 !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-bottom: 0;
}

/* Date separator inside admin ticket chat (kept for legacy) */
.adm-date-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0 4px;
}
.adm-date-sep span {
  font-size: 11px;
  color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 2px 10px;
  letter-spacing: .02em;
}
.adm-ticket-bottom {
  flex-shrink: 0;
  padding: 7px 18px calc(var(--safe-bottom, 0px) + 8px);
  border-top: 1px solid rgba(255,255,255,.07);
}
/* Compact input bar inside admin ticket bottom panel */
.adm-ticket-bottom .chat-input-bar { gap: 6px; }
.adm-ticket-bottom .chat-input-bar textarea {
  padding: 7px 11px;
  font-size: 13px;
  min-height: 34px;
}
.adm-ticket-bottom .chat-send-btn {
  padding: 0 11px;
  font-size: 14px;
  min-width: 38px;
}
.adm-ticket-bottom .chat-attach-btn {
  padding: 0 9px;
  font-size: 15px;
  min-width: 36px;
}
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px 20px;
  /* fill whatever space is available in the parent scroll container */
  min-height: 60vh;
  box-sizing: border-box;
  color: var(--text-secondary);
}
.empty-state .icon { font-size: 56px; margin-bottom: 16px; opacity: .6; }
.empty-state .text { font-size: 15px; font-weight: 400; line-height: 1.5; }
/* Stats screen — no header bars, give full height */
#stats-content .empty-state { min-height: 70vh; }
/* Orders screen — filter-bar (~44px) + search (~52px) + padding eat ~116px */
#orders-list .empty-state { min-height: calc(100vh - 220px); }
.retry-btn { margin-top:16px; padding:10px 24px; background:var(--accent); color:var(--accent-text); border:none; border-radius:var(--radius-md); font-size:14px; font-weight:600; cursor:pointer; }
.new-ticket-btn {
  padding: 14px;
  background: linear-gradient(135deg, #3DEBFF 0%, #2563eb 100%);
  color: #041016; border: none; border-radius: var(--radius-md);
  font-size: 15px; font-weight: 700; cursor: pointer; width: 100%; margin-bottom: 16px;
  transition: all .15s;
  box-shadow: 0 4px 16px rgba(61,235,255,.28), 0 2px 6px rgba(37,99,235,.20);
  display: block; box-sizing: border-box;
}
.new-ticket-btn:hover { box-shadow: 0 6px 22px rgba(61,235,255,.38), 0 3px 8px rgba(37,99,235,.28); }
.new-ticket-btn:active { opacity: .8; transform: scale(.98); }
.new-ticket-btn:disabled {
  background: linear-gradient(135deg, #3DEBFF 0%, #2563eb 100%) !important;
  color: #041016 !important;
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  -webkit-text-fill-color: #041016;
}
/* Review button (new-ticket-btn inside order detail) — secondary, less saturated */
#order-detail-content .new-ticket-btn {
  padding: 11px 14px;
  background: linear-gradient(135deg, rgba(61,235,255,.14) 0%, rgba(37,99,235,.20) 100%);
  color: rgba(255,255,255,.88);
  border: 1px solid rgba(61,235,255,.22);
  font-size: 14px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(37,99,235,.12), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.12);
}
#order-detail-content .new-ticket-btn:hover {
  background: linear-gradient(135deg, rgba(61,235,255,.20) 0%, rgba(37,99,235,.28) 100%);
  border-color: rgba(61,235,255,.35);
  box-shadow: 0 4px 12px rgba(37,99,235,.18), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.12);
}
#order-detail-content .new-ticket-btn:active { opacity: .8; transform: scale(.98); }

/* Cancel order button */
.cancel-order-btn {
  padding: 13px 14px;
  background: transparent;
  color: var(--danger);
  border: 1.5px solid rgba(239,68,68,.35);
  border-radius: var(--radius-md);
  font-size: 15px; font-weight: 600;
  cursor: pointer; width: 100%; margin-bottom: 16px;
  transition: background 150ms ease, border-color 150ms ease, transform 120ms ease, box-shadow 150ms ease;
  display: block; box-sizing: border-box;
  letter-spacing: -.01em;
}
.cancel-order-btn:hover {
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.55);
  box-shadow: 0 2px 10px rgba(239,68,68,.15);
}
.cancel-order-btn:active { transform: scale(.98); opacity:.8; }
.cancel-order-btn:disabled {
  opacity: .65; cursor: default; transform: none;
  pointer-events: none;
  position: relative;
}
/* Spinning indicator when cancel is processing */
.cancel-order-btn:disabled::before {
  content: '';
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid rgba(239,68,68,.30);
  border-top-color: var(--danger);
  border-radius: 50%;
  animation: btnSpin .7s linear infinite;
  vertical-align: middle;
  margin-right: 7px;
}
@keyframes btnSpin {
  to { transform: rotate(360deg); }
}
body.theme-light .cancel-order-btn {
  border-color: rgba(239,68,68,.30);
  color: #dc2626;
}
body.theme-light .cancel-order-btn:hover {
  background: rgba(239,68,68,.06);
  border-color: rgba(239,68,68,.50);
}

/* Chat — full-screen messenger layout */
#screen-support-chat {
  display: none;
  flex-direction: column;
  padding: 0;
}
#screen-support-chat.active {
  display: flex !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--vv-height, 100%);
  z-index: 10;
  overflow: hidden !important;
  padding: 0 !important;
}
#screen-support-chat .header {
  flex-shrink: 0;
  padding: 12px 18px 10px;
}
.chat-messages {
  flex: 1;
  min-height: 0; /* critical: allows flex-child to shrink below content size, enabling overflow-y scroll */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 0;
}
/* Prevent individual messages from shrinking — scroll instead */
.chat-messages > * {
  flex-shrink: 0;
}
.chat-footer {
  flex-shrink: 0;
  padding: 8px 12px calc(var(--safe-bottom, 0px) + 12px);
  background: transparent;
}
/* Кнопка "Закрыть тикет" — прозрачный фон, сливается с футером */
.chat-footer #user-close-ticket-btn {
  background: transparent;
  box-shadow: none;
}
.chat-message {
  position: relative;
  padding: 10px 14px 24px;
  border-radius: var(--radius-lg);
  max-width: 75%;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}
.chat-message.user {
  align-self: flex-end;
  background: linear-gradient(to right, var(--accent), #1d4ed8);
  color: var(--accent-text);
  border-bottom-right-radius: 4px;
  box-shadow: 0 3px 12px rgba(37,99,235,.28);
}
.chat-message.admin {
  align-self: flex-start;
  background: rgba(20,38,60,.72);
  color: var(--tg-theme-text-color);
  border-bottom-left-radius: 4px;
  border: 1px solid rgba(61,235,255,.14);
  box-shadow: 0 2px 10px rgba(0,0,0,.18), inset 0 1px 0 rgba(61,235,255,.08);
}
/* Photo-only message */
.chat-msg-photo {
  position: relative;
  display: table;
  line-height: 0;
  border-radius: 14px;
  overflow: hidden;
  max-width: 72vw;
  flex-shrink: 0;
}
.chat-msg-photo.user  { align-self: flex-end; }
.chat-msg-photo.admin { align-self: flex-start; }
.chat-photo-media {
  display: block;
  max-width: 240px;
  max-height: 320px;
  width: auto;
  height: auto;
  cursor: pointer;
}
.chat-msg-photo-time {
  position: absolute; bottom: 5px; right: 8px;
  background: rgba(0,0,0,.52);
  border-radius: 8px; padding: 1px 6px;
  color: #fff; font-size: 10px; line-height: 1.4;
}
/* Text+photo bubble — Telegram-style: overflow:hidden on bubble clips image cleanly */
.chat-message.has-media {
  padding: 0;
  overflow: hidden;
  width: 75%; /* fixed width so image always fills full bubble width */
}
.chat-message.has-media .chat-msg-img-wrap {
  width: 100%;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  line-height: 0;
}
.chat-message.has-media .chat-msg-img-wrap .chat-img,
.chat-message.has-media .chat-msg-img-wrap video {
  display: block; margin: 0;
  width: 100%; height: auto;
  max-width: 100% !important;  /* override base .chat-img max-width: 220px */
  max-height: none !important; /* no height cap — show full image */
  object-fit: fill !important; /* stretch to fill bubble width exactly */
  border-radius: 0 !important;
  border: none !important; box-shadow: none !important;
}
/* has-media: text full-width block, time own row below — Telegram-style */
.chat-message.has-media .chat-msg-text {
  display: block;
  padding: 6px 14px 2px;
  word-break: break-word;
}
/* has-media timestamp: block below text, right-aligned, NOT absolutely positioned */
.chat-message.has-media .chat-message-time--media {
  position: static;
  right: auto;
  bottom: auto;
  display: block;
  text-align: right;
  padding: 2px 14px 8px;
}
/* Message timestamps — absolutely positioned bottom-right of bubble */
.chat-message-time {
  position: absolute;
  bottom: 6px;
  right: 10px;
  font-size: 11px;
  color: rgba(255,255,255,.38);
  line-height: 1;
  pointer-events: none;
}
.chat-message.user .chat-message-time {
  color: rgba(4,16,22,.4);
}
/* Inline spacer at end of text — reserves space on last line for timestamp */
.chat-time-spacer {
  display: inline-block;
  width: 46px;
  height: 14px;
  vertical-align: bottom;
}
/* Floating date chip — appears on scroll, auto-hides after 2.5s */
.chat-date-chip {
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10,20,35,.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,.72);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 12px;
  z-index: 20;
  pointer-events: none;
  white-space: nowrap;
  text-transform: capitalize;
  opacity: 0;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity .3s ease, transform .3s ease;
  border: 1px solid rgba(255,255,255,.08);
}
.chat-date-chip.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.chat-input-bar { display:flex; gap:8px; align-items:flex-end; }
.chat-input-bar textarea {
  flex:1; padding:10px 14px;
  border: 1px solid rgba(61,235,255,.16);
  border-radius:var(--radius-md); font-size:15px;
  background: linear-gradient(135deg, rgba(61,235,255,.11), rgba(15,26,43,.52));
  color:var(--tg-theme-text-color); outline:none; resize:none;
  font-family:inherit; min-height:44px; max-height:140px; overflow-y:hidden;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: var(--card-shadow);
}
.chat-input-bar textarea::placeholder { color:var(--text-secondary); }
.chat-input-bar textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.chat-send-btn {
  padding:0 16px;
  align-self: stretch;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--accent) 0%, #1d8fa0 100%);
  color:var(--accent-text);
  border:none; border-radius:var(--radius-md); font-size:16px; cursor:pointer;
  transition:all .15s;
  box-shadow: 0 3px 12px rgba(61,235,255,.28);
  flex-shrink:0;
}
.chat-send-btn:hover { box-shadow: 0 4px 16px rgba(61,235,255,.38); }
.chat-send-btn:active { opacity:.8; transform:scale(.95); }

/* Ticket order selector */
.ticket-order-select {
  width:100%; padding:13px 40px 13px 16px;
  border: 1px solid rgba(61,235,255,.16);
  border-radius:var(--radius-md); font-size:15px;
  background: linear-gradient(135deg, rgba(61,235,255,.10), rgba(15,26,43,.50));
  color:var(--tg-theme-text-color); outline:none; cursor:pointer;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
  appearance:none; -webkit-appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233DEBFF' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; box-sizing:border-box;
  margin-top: 4px;
}
.ticket-order-select:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft), inset 0 1px 2px rgba(0,0,0,.12); }
.ticket-order-select option { background: #0d1f35; color: #e8f4ff; }

/* Ticket attachments */
.chat-attach-btn {
  padding:0 12px; background:transparent; color:var(--text-secondary);
  border:1px solid var(--border-color); border-radius:var(--radius-md);
  font-size:18px; cursor:pointer; transition:all .15s; line-height:1;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; align-self: stretch;
}
.chat-attach-btn:hover { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.chat-attach-btn:active { opacity:.7; transform:scale(.95); }
/* Multi-file attachment preview grid */
.chat-attachment-previews {
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px;
}
.chat-attachment-previews:empty { display:none; margin-bottom:0; }
.chat-attachment-item {
  position: relative; flex-shrink: 0;
  width: 72px; height: 72px;
  border-radius: 12px; overflow: hidden;
  background: rgba(255,255,255,.07);
  /* shimmer skeleton while image loads */
  background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.05) 75%);
  background-size: 200% 100%;
  animation: _thumb-skeleton 1.4s ease infinite;
}
@keyframes _thumb-skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* JS adds .loaded after onload — stop skeleton */
.chat-attachment-item.loaded {
  animation: none;
  background: #111;
}
.chat-attachment-item img.chat-attach-thumb,
.chat-attachment-item video.chat-video-preview {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: filter .22s ease;
}
/* Non-image file icon */
.chat-attach-file-icon {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  color: rgba(255,255,255,.7);
  font-size: 11px; font-weight: 700;
  letter-spacing: .5px;
  background: rgba(61,235,255,.12);
  border: 1px solid rgba(61,235,255,.2);
  border-radius: 12px;
}
.chat-attachment-item .remove-attach {
  position: absolute; top: 4px; right: 4px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  color: #fff;
  border-radius: 50%; width: 18px; height: 18px; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; line-height: 1;
  transition: background .15s;
}
.chat-attachment-item .remove-attach:hover { background: var(--danger); }
/* Upload status — blur + shimmer bar while uploading, red outline on error */
.chat-attachment-item.is-uploading img.chat-attach-thumb,
.chat-attachment-item.is-uploading video.chat-video-preview {
  filter: blur(1.5px) brightness(.65);
}
.chat-attachment-item.has-error img.chat-attach-thumb,
.chat-attachment-item.has-error video.chat-video-preview {
  outline: 2px solid #ef4444;
  outline-offset: -2px;
  filter: brightness(.7);
}
/* Shimmer progress bar at bottom of thumb while uploading */
.attach-progress-bar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: rgba(255,255,255,.12);
  pointer-events: none;
}
.attach-progress-bar::after {
  content: '';
  position: absolute; top: 0; left: -55%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(61,235,255,.95), transparent);
  animation: _attach-shimmer 1.1s ease-in-out infinite;
}
@keyframes _attach-shimmer {
  0%   { left: -55%; }
  100% { left: 110%; }
}
/* Chat image — natural proportions, no crop */
.chat-img {
  display: block; margin-top: 4px; cursor: pointer;
  max-width: 220px; max-height: 300px;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
/* Inside media-only bubble: fill bubble edge-to-edge, no extra border */
.chat-message.media-only .chat-img {
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--radius-lg) !important;
  margin: 0 !important;
  max-width: 240px;
  max-height: 320px;
}
.chat-video {
  max-width:200px; border-radius:var(--radius-md);
  margin-top:4px; display:block;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
  background:#000;
}
.chat-video-preview {
  width:56px; height:56px; object-fit:cover; border-radius:6px; flex-shrink:0;
  background:#000;
}

/* ── Image Lightbox ── */
.img-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
  animation: _lb-in .18s ease;
  touch-action: none;
}
@keyframes _lb-in { from { opacity:0; } to { opacity:1; } }
.img-lightbox img {
  max-width: 96vw; max-height: 88vh;
  object-fit: contain; border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  user-select: none; -webkit-user-drag: none;
}
.img-lightbox-close {
  position: absolute; top: 16px; right: 16px;
  background: rgba(255,255,255,.15); border: none; color: #fff;
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 16px; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  backdrop-filter: blur(6px); z-index: 1;
  transition: background .15s;
}
.img-lightbox-close:hover { background: rgba(255,255,255,.28); }

/* Ticket enhancements */
.skeleton-ticket { height:80px; margin-bottom:12px; border-radius:14px; }

.ticket-preview {
  font-size:13px; color:var(--text-secondary);
  margin:4px 0 2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  line-height:1.4;
}

.ticket-hint {
  background: linear-gradient(135deg, rgba(61,235,255,.10), rgba(37,99,235,.07));
  border: 1px solid rgba(61,235,255,.22);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 13px; color: rgba(255,255,255,.72);
  margin: 10px 0 8px; line-height: 1.55;
  box-shadow: inset 0 1px 0 rgba(61,235,255,.08);
}

.ticket-extra-field { margin-bottom:12px; }
.ticket-extra-label { font-size:13px; color:var(--text-secondary); margin-bottom:6px; display:block; }
.ticket-extra-input {
  width:100%; padding:11px 14px;
  border: 1px solid rgba(61,235,255,.16);
  border-radius:var(--radius-md);
  font-size:14px;
  background: linear-gradient(135deg, rgba(61,235,255,.10), rgba(15,26,43,.50));
  color:var(--tg-theme-text-color);
  outline:none; box-sizing:border-box;
  font-family:inherit;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
}
.ticket-extra-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft), inset 0 1px 2px rgba(0,0,0,.12); }

/* ── Ticket extra fields card ───────────────────────────────────── */
.tec-card {
  border-radius: 14px;
  padding: 14px 14px 10px;
  margin: 10px 0 6px;
  position: relative;
  overflow: hidden;
  background: var(--tec-bg, rgba(61,235,255,.05));
  border: 1px solid var(--tec-border, rgba(61,235,255,.15));
}
.tec-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--tec-color, var(--accent));
  opacity: .8;
}
.tec-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
}
.tec-header-icon { font-size: 14px; line-height: 1; }
.tec-header-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tec-color, var(--accent));
}
.tec-field { margin-bottom: 10px; }
.tec-field:last-child { margin-bottom: 0; }
.tec-field-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.38);
  margin-bottom: 5px;
  letter-spacing: 0.02em;
}
.tec-field-input {
  width: 100%;
  padding: 10px 13px;
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  font-size: 14px;
  color: var(--tg-theme-text-color);
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.tec-field-input::placeholder { color: rgba(255,255,255,.22); }
.tec-field-input:focus {
  border-color: var(--tec-color, var(--accent));
  box-shadow: 0 0 0 3px var(--tec-glow, rgba(61,235,255,.12));
}

/* ── Session expired overlay ────────────────────────────────────── */
.session-expired-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(5,12,25,.92);
  backdrop-filter: blur(12px);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.seo-box {
  text-align: center;
  max-width: 280px;
}
.seo-icon { font-size: 48px; margin-bottom: 16px; }
.seo-title { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.seo-desc { font-size: 14px; color: rgba(255,255,255,.55); line-height: 1.5; margin-bottom: 24px; }
.seo-btn {
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  border: none;
  background: var(--accent);
  color: #000;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

/* ── Ticket chat meta-card (structured fields inside chat) ─────── */
.tcm-wrap { display:flex; margin:4px 0 2px; padding:0 8px; }
.tcm-wrap.user { justify-content:flex-end; }
.tcm-wrap.admin { justify-content:flex-start; }
.tcm-card {
  max-width: 82%;
  min-width: 200px;
  border-radius: 14px 4px 14px 14px;
  overflow: hidden;
  border: 1px solid var(--tcm-border, rgba(61,235,255,.22));
  background: rgba(6,14,26,.85);
  box-shadow: 0 2px 16px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.tcm-card.admin { border-radius: 4px 14px 14px 14px; }
.tcm-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  background: var(--tcm-header-bg, rgba(61,235,255,.1));
  border-bottom: 1px solid var(--tcm-border, rgba(61,235,255,.12));
}
.tcm-cat-icon { font-size: 12px; line-height: 1; }
.tcm-cat-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tcm-color, var(--accent));
}
.tcm-rows { padding: 8px 11px 4px; display:flex; flex-direction:column; gap:5px; }
.tcm-row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.tcm-row-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--tcm-color, var(--accent));
  opacity: 0.6;
  white-space: nowrap;
  flex-shrink: 0;
}
.tcm-row-value {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  word-break: break-word;
  text-align: right;
  line-height: 1.3;
}
.tcm-footer {
  display: flex;
  justify-content: flex-end;
  padding: 2px 11px 6px;
}
.tcm-time {
  font-size: 11px;
  color: rgba(255,255,255,.3);
}

/* Full-width tcm card in admin ticket chat */
.tcm-wrap.adm-full { width: 100%; padding: 0; }
.tcm-wrap.adm-full .tcm-card { max-width: 100%; width: 100%; border-radius: 12px; }

/* Full-width tcm card in user support chat */
#screen-support-chat .tcm-wrap { padding: 0; justify-content: stretch; }
#screen-support-chat .tcm-card { max-width: 100%; border-radius: 12px; }

.tickets-faq {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  width: 100%;
}
.tickets-faq-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(61,235,255,.06) 0%, rgba(15,26,43,.4) 100%);
  border: 1px solid rgba(61,235,255,.14);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.tickets-faq-card:active {
  background: linear-gradient(135deg, rgba(61,235,255,.12) 0%, rgba(15,26,43,.5) 100%);
  border-color: rgba(61,235,255,.3);
  box-shadow: 0 0 12px rgba(61,235,255,.08);
}
.tickets-faq-card--static { cursor: default; }
.tfc-icon { font-size: 22px; flex-shrink: 0; line-height: 1; }
.tfc-body { flex: 1; min-width: 0; }
.tfc-title { font-size: 13px; font-weight: 600; color: var(--tg-theme-text-color); line-height: 1.35; }
.tfc-sub { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.tfc-arrow { font-size: 22px; color: var(--accent); flex-shrink: 0; line-height: 1; opacity: .8; }

#submit-ticket-btn:disabled { opacity:0.45; cursor:not-allowed; transform:none !important; }

/* ══════════════════════════════════════════════════════════════
   ADMIN PANEL — PREMIUM REDESIGN
   Design language: dark glass + cyan accent, editorial typography
══════════════════════════════════════════════════════════════ */

/* ── CSS custom props for admin only ── */
:root {
  --adm-glass:      rgba(255,255,255,.04);
  --adm-glass-hi:   rgba(255,255,255,.07);
  --adm-border:     rgba(255,255,255,.09);
  --adm-border-hi:  rgba(61,235,255,.28);
  --adm-radius:     16px;
  --adm-radius-sm:  10px;
  --adm-shadow:     0 2px 12px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.18);
  --adm-shadow-hi:  0 6px 24px rgba(61,235,255,.14), 0 2px 6px rgba(0,0,0,.2);
  --adm-accent:     #3DEBFF;
  --adm-gold:       #F6C453;
  --adm-success:    #22c55e;
  --adm-danger:     #ef4444;
  --adm-warn:       #f59e0b;
}

/* ── Screen header override for admin ── */
#screen-admin .header h1,
#screen-admin-page .header h1 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.3px;
}

/* ════════════════════════════
   ADMIN MENU — main screen
════════════════════════════ */

/* Zone group wrapper */
.admin-menu-group {
  margin-bottom: 6px;
}

/* Zone label — chip style */
.admin-menu-group-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--adm-accent);
  background: rgba(61,235,255,.08);
  border: 1px solid rgba(61,235,255,.15);
  border-radius: 20px;
  padding: 4px 12px;
  margin-bottom: 8px;
}

/* Menu item card */
.admin-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--adm-glass);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .18s;
  box-shadow: var(--adm-shadow);
}
.admin-menu-item:active {
  transform: scale(.977);
  background: var(--adm-glass-hi);
}

/* Icon bubble */
.admin-menu-item .ami-icon-wrap {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 12px;
  background: var(--adm-glass-hi);
  border: 1px solid var(--adm-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
/* legacy .ami-icon (plain emoji, no wrap) */
.admin-menu-item .ami-icon { font-size: 22px; flex-shrink: 0; }

.admin-menu-item .ami-text { flex: 1; min-width: 0; }
.admin-menu-item .ami-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--tg-theme-text-color);
  letter-spacing: -.1px;
}
.admin-menu-item .ami-desc {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-menu-item .ami-arrow {
  font-size: 17px;
  color: var(--adm-border-hi);
  flex-shrink: 0;
  opacity: .7;
}

/* ════════════════════════════
   STAT CARDS — Dashboard
════════════════════════════ */
.adm-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.adm-stats-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 20px;
}
.admin-stat-card {
  background: var(--adm-glass);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  padding: 16px 14px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--adm-shadow);
}
.admin-stat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--adm-accent), transparent);
  opacity: .45;
}
.admin-stat-card.asc-warn::before { background: linear-gradient(90deg, var(--adm-warn), transparent); }
.admin-stat-card.asc-danger::before { background: linear-gradient(90deg, var(--adm-danger), transparent); }
.admin-stat-card.asc-success::before { background: linear-gradient(90deg, var(--adm-success), transparent); }
.admin-stat-card.asc-gold::before { background: linear-gradient(90deg, var(--adm-gold), transparent); }

.admin-stat-icon {
  font-size: 18px;
  margin-bottom: 8px;
  display: block;
  opacity: .8;
}
.admin-stat-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.admin-stat-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--tg-theme-text-color);
  letter-spacing: -.5px;
  line-height: 1;
}
.admin-stat-value.asv-accent { color: var(--adm-accent); }
.admin-stat-value.asv-gold   { color: var(--adm-gold); }
.admin-stat-value.asv-green  { color: var(--adm-success); }
.admin-stat-value.asv-red    { color: var(--adm-danger); }

/* ── Total stats row — wide card ── */
.adm-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--adm-border);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: var(--adm-shadow);
}
.adm-kpi-cell {
  background: var(--adm-glass);
  padding: 16px 12px;
  text-align: center;
}
.adm-kpi-cell-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.adm-kpi-cell-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--tg-theme-text-color);
  letter-spacing: -.4px;
}

/* ── Category breakdown ── */
.adm-cat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--adm-border);
}
.adm-cat-row:last-child { border-bottom: none; }
.adm-cat-left { display: flex; align-items: center; gap: 10px; }
.adm-cat-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--adm-glass-hi);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.adm-cat-name { font-size: 14px; font-weight: 700; color: var(--tg-theme-text-color); }
.adm-cat-count { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }
.adm-cat-revenue { font-size: 14px; font-weight: 700; color: var(--adm-accent); }

/* ════════════════════════════
   SECTION — content block
════════════════════════════ */
.admin-section { margin-bottom: 24px; }

/* Section title with left accent bar */
.admin-section-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 10px;
  padding-left: 10px;
  position: relative;
}
.admin-section-title::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 14px;
  background: var(--adm-accent);
  border-radius: 2px;
}

/* Card base — used for settings, toggles, inputs */
.adm-card {
  background: var(--adm-glass);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  overflow: hidden;
  box-shadow: var(--adm-shadow);
  margin-bottom: 12px;
}

/* Unified input/select style for admin filter forms */
.adm-input {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius-sm);
  color: #fff;
  padding: 9px 12px;
  font-size: 13px;
  width: 100%;
  outline: none;
  transition: border-color .15s;
  -webkit-appearance: none;
  appearance: none;
}
.adm-input:focus {
  border-color: var(--adm-border-hi);
}
.adm-input option {
  background: #0d1b2a;
  color: #fff;
}

/* ════════════════════════════
   TOGGLE ROW
════════════════════════════ */
.admin-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--adm-glass);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  margin-bottom: 8px;
  box-shadow: var(--adm-shadow);
}
.admin-toggle-row .toggle-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--tg-theme-text-color);
  letter-spacing: -.1px;
}
.admin-toggle-row .toggle-hint {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.4;
}

/* Toggle switch */
.toggle-switch {
  position: relative; width: 50px; height: 28px; cursor: pointer; flex-shrink: 0;
}
.toggle-switch input { display: none; }
.toggle-slider {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,.12); border-radius: 14px; transition: background .25s ease;
}
.toggle-slider::before {
  content: ''; position: absolute;
  width: 22px; height: 22px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.toggle-switch input:checked + .toggle-slider { background: var(--adm-success); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(22px); }

/* ════════════════════════════
   SETTING ITEM (text/url inputs)
════════════════════════════ */
.admin-setting-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--adm-border);
}
.admin-setting-item:last-child { border-bottom: none; }

/* When used standalone (not inside .adm-card) */
.admin-setting-item.standalone {
  background: var(--adm-glass);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  margin-bottom: 8px;
  box-shadow: var(--adm-shadow);
}
.admin-setting-item .setting-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.admin-setting-item input,
.admin-setting-item textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius-sm);
  font-size: 14px;
  background: rgba(255,255,255,.05);
  color: var(--tg-theme-text-color);
  outline: none;
  font-family: inherit;
  transition: border-color .18s, box-shadow .18s;
}
.admin-setting-item textarea { resize: vertical; min-height: 64px; }
.admin-setting-item input:focus,
.admin-setting-item textarea:focus {
  border-color: var(--adm-accent);
  box-shadow: 0 0 0 3px rgba(61,235,255,.12);
}
.admin-setting-item .setting-status { font-size: 11px; margin-top: 5px; font-weight: 600; }
.admin-setting-item .setting-status.set   { color: var(--adm-success); }
.admin-setting-item .setting-status.empty { color: var(--text-secondary); }

/* ════════════════════════════
   PRICE ROW
════════════════════════════ */
.admin-price-row {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--adm-border);
}
.admin-price-row:last-child { border-bottom: none; }
.admin-price-row .price-label {
  font-size: 13px;
  color: var(--tg-theme-text-color);
  font-weight: 600;
  min-width: 90px; flex-shrink: 0;
  white-space: nowrap;
}
.admin-price-row input {
  flex: 1; min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius-sm);
  font-size: 14px;
  font-weight: 600;
  background: rgba(255,255,255,.05);
  color: var(--tg-theme-text-color);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.admin-price-row input:focus {
  border-color: var(--adm-accent);
  box-shadow: 0 0 0 2px rgba(61,235,255,.12);
}
.admin-price-row input::placeholder { color: var(--text-secondary); opacity: .6; }
.adm-col-head {
  flex: 1; min-width: 0;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px;
  color: rgba(255,255,255,.35);
  text-align: center;
}

/* Save icon button */
.admin-save-btn {
  padding: 8px 14px;
  background: rgba(61,235,255,.15);
  color: var(--adm-accent);
  border: 1px solid rgba(61,235,255,.25);
  border-radius: var(--adm-radius-sm);
  font-size: 13px; font-weight: 700;
  cursor: pointer; flex-shrink: 0; line-height: 1;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.admin-save-btn:active { opacity: .7; transform: scale(.95); }

/* ════════════════════════════
   USER CARD
════════════════════════════ */
.admin-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--adm-glass);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  margin-bottom: 8px;
  box-shadow: var(--adm-shadow);
  cursor: pointer;
  transition: border-color .15s;
}
.admin-user-card:active { transform: scale(.98); }

.adm-user-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(61,235,255,.25), rgba(61,235,255,.08));
  border: 1px solid rgba(61,235,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800;
  color: var(--adm-accent);
  flex-shrink: 0;
}
.admin-user-info { flex: 1; min-width: 0; }
.admin-user-name {
  font-size: 14px; font-weight: 700;
  color: var(--tg-theme-text-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-user-id { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.admin-user-btn {
  padding: 7px 12px;
  border: none; border-radius: var(--adm-radius-sm);
  font-size: 11px; font-weight: 700; cursor: pointer;
  transition: all .15s; flex-shrink: 0;
}
.admin-user-btn:active { transform: scale(.93); }
.admin-user-btn.block-btn   { background: rgba(239,68,68,.12);  color: var(--adm-danger); border: 1px solid rgba(239,68,68,.2); }
.admin-user-btn.unblock-btn { background: rgba(34,197,94,.12);  color: var(--adm-success); border: 1px solid rgba(34,197,94,.2); }

/* ════════════════════════════
   STATUS BADGE
════════════════════════════ */
.status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .02em;
}
.status-badge.on  { background: rgba(34,197,94,.14);  color: var(--adm-success); }
.status-badge.off { background: rgba(239,68,68,.12);  color: var(--adm-danger); }

/* ════════════════════════════
   VISUAL GROUP (collapsible)
════════════════════════════ */
.admin-visual-group {
  background: var(--adm-glass);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  padding: 14px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .18s;
  box-shadow: var(--adm-shadow);
}
.admin-visual-group:active { transform: scale(.98); }
.admin-visual-group.expanded { border-color: var(--adm-border-hi); }
.admin-visual-group .group-header {
  display: flex; align-items: center; justify-content: space-between;
}
.admin-visual-group .group-name { font-size: 14px; font-weight: 700; color: var(--tg-theme-text-color); }
.admin-visual-group .group-count { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.admin-visual-group .group-items { margin-top: 14px; display: none; }
.admin-visual-group.expanded .group-items { display: block; }

/* ════════════════════════════
   FRAGMENT STATUS CARD
════════════════════════════ */
.fragment-status-card {
  background: var(--adm-glass);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  overflow: hidden;
  box-shadow: var(--adm-shadow);
  margin-bottom: 12px;
}
.fragment-status-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--adm-border);
  font-size: 13px;
}
.fragment-status-row:last-child { border-bottom: none; }
.fragment-status-row .fs-label { color: var(--text-secondary); font-weight: 500; }
.fragment-status-row .fs-value { font-weight: 700; color: var(--tg-theme-text-color); }

/* Hint/note block below a card */
.adm-hint-block {
  font-size: 12px;
  color: rgba(255,255,255,.38);
  line-height: 1.6;
  padding: 8px 4px 0;
}

/* ════════════════════════════
   FILTER TABS (withdrawals, etc.)
════════════════════════════ */
.adm-filter-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  background: var(--adm-glass);
  border: 1px solid var(--adm-border);
  color: rgba(255,255,255,.55);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.adm-filter-btn.active {
  background: rgba(61,235,255,.12);
  border-color: rgba(61,235,255,.35);
  color: var(--adm-accent);
}
.adm-filter-btn:active { opacity: .75; }

/* ════════════════════════════
   ADMIN TEXTAREA
════════════════════════════ */
.admin-textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 12px;
  resize: vertical;
  min-height: 64px;
  font-family: inherit;
  transition: border-color .15s;
}
.admin-textarea:focus {
  outline: none;
  border-color: rgba(61,235,255,.4);
}
.admin-textarea::placeholder { color: rgba(255,255,255,.3); }

/* ════════════════════════════
   GLOBAL SAVE BUTTON (sticky)
════════════════════════════ */
.admin-global-save {
  position: sticky; bottom: 0;
  padding: 12px 0 6px;
  background: var(--tg-theme-bg-color);
  border-top: 1px solid var(--adm-border);
  z-index: 10;
}
.admin-global-save button {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, var(--adm-accent) 0%, #1da8ff 100%);
  color: #041016;
  border: none; border-radius: var(--adm-radius);
  font-size: 15px; font-weight: 800; letter-spacing: -.1px;
  cursor: pointer; transition: opacity .15s;
  box-shadow: 0 4px 18px rgba(61,235,255,.3);
}
.admin-global-save button:active { opacity: .82; transform: scale(.985); }
.admin-global-save button:disabled { opacity: .4; box-shadow: none; }

/* ── AI Config Premium Design ─────────────────────────────────────────────── */
.ai-hero-card {
  position: relative;
  background: linear-gradient(135deg, rgba(139,92,246,.18) 0%, rgba(96,165,250,.12) 100%);
  border: 1px solid rgba(139,92,246,.30);
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 12px;
  overflow: hidden;
}
.ai-hero-glow {
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(139,92,246,.35) 0%, transparent 70%);
  pointer-events: none;
}
.ai-hero-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ai-hero-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(139,92,246,.25), rgba(96,165,250,.20));
  border: 1px solid rgba(139,92,246,.35);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ai-hero-text { flex: 1; min-width: 0; }
.ai-hero-title {
  font-size: 16px; font-weight: 700;
  color: var(--adm-text);
  line-height: 1.2;
}
.ai-hero-sub {
  font-size: 12px;
  color: rgba(167,139,250,.85);
  margin-top: 2px;
}
.ai-hero-badge {
  margin-top: 12px;
  font-size: 12px;
  color: var(--adm-text-secondary);
  line-height: 1.4;
  padding-top: 10px;
  border-top: 1px solid rgba(139,92,246,.15);
}
/* AI toggle */
.ai-toggle-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.ai-toggle-switch input { opacity: 0; width: 0; height: 0; }
.ai-toggle-slider {
  position: absolute; inset: 0; cursor: pointer;
  background: rgba(255,255,255,.12); border-radius: 26px;
  transition: background .2s;
  border: 1px solid rgba(255,255,255,.15);
}
.ai-toggle-slider::before {
  content: ''; position: absolute;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; left: 3px; bottom: 2px;
  transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.ai-toggle-switch input:checked + .ai-toggle-slider { background: linear-gradient(135deg,#7c3aed,#6d28d9); border-color: rgba(124,58,237,.5); }
.ai-toggle-switch input:checked + .ai-toggle-slider::before { transform: translateX(20px); }

/* AI Fields Card */
.ai-fields-card {
  background: var(--adm-glass);
  border: 1px solid var(--adm-border);
  border-radius: 18px;
  padding: 4px 16px 16px;
  margin-bottom: 12px;
}
.ai-field-group { padding-top: 16px; }
.ai-field-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--adm-text-secondary);
  margin-bottom: 8px;
}
.ai-field-icon { font-size: 14px; }
.ai-field-unit {
  font-size: 10px; opacity: .6; margin-left: 2px;
  text-transform: none; letter-spacing: 0;
}
.ai-field-input {
  width: 100%; padding: 10px 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  color: var(--adm-text); font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.ai-field-input:focus {
  outline: none;
  border-color: rgba(139,92,246,.55);
  box-shadow: 0 0 0 3px rgba(139,92,246,.12);
}
.ai-field-textarea {
  width: 100%; padding: 10px 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  color: var(--adm-text); font-size: 13px; line-height: 1.6;
  font-family: inherit; resize: vertical; min-height: 120px;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.ai-field-textarea:focus {
  outline: none;
  border-color: rgba(139,92,246,.55);
  box-shadow: 0 0 0 3px rgba(139,92,246,.12);
}
.ai-field-hint {
  margin-top: 6px; font-size: 11px;
  color: var(--adm-text-secondary); line-height: 1.5;
}
.ai-code {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  background: rgba(139,92,246,.15);
  color: #c4b5fd;
  padding: 1px 5px; border-radius: 4px;
  border: 1px solid rgba(139,92,246,.20);
}
.ai-field-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  margin-top: 16px;
}

/* AI Coming Soon Card */
.ai-coming-card {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
  opacity: .65;
}
.ai-coming-icon { font-size: 22px; flex-shrink: 0; }
.ai-coming-body { flex: 1; min-width: 0; }
.ai-coming-title { font-size: 13px; font-weight: 600; color: var(--adm-text); }
.ai-coming-desc { font-size: 11px; color: var(--adm-text-secondary); margin-top: 2px; line-height: 1.4; }
.ai-coming-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: #a78bfa; background: rgba(139,92,246,.15);
  border: 1px solid rgba(139,92,246,.25);
  padding: 3px 8px; border-radius: 20px; flex-shrink: 0;
}

/* ════════════════════════════
   BACK BUTTON
════════════════════════════ */
.admin-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; margin-bottom: 16px;
  background: var(--adm-glass);
  border: 1px solid var(--adm-border);
  border-radius: 20px;
  color: var(--text-secondary);
  font-size: 13px; font-weight: 600;
  cursor: pointer; transition: border-color .15s, color .15s; line-height: 1;
}
.admin-back-btn:active { opacity: .75; transform: scale(.97); }

/* ════════════════════════════
   ACTION BUTTONS
════════════════════════════ */
.admin-action-btn {
  display: block; width: 100%;
  padding: 13px 16px;
  border-radius: var(--adm-radius);
  font-size: 14px; font-weight: 700;
  cursor: pointer; transition: opacity .15s;
  margin-bottom: 8px; text-align: center; line-height: 1.3;
  border: 1px solid transparent;
}
.admin-action-btn:active { opacity: .78; transform: scale(.98); }
.admin-action-danger  { background: rgba(239,68,68,.1); color: var(--adm-danger); border-color: rgba(239,68,68,.2); }
.admin-action-success { background: rgba(34,197,94,.1); color: var(--adm-success); border-color: rgba(34,197,94,.2); }

/* ════════════════════════════
   ORDER ACTIONS
════════════════════════════ */
.admin-order-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px;
}
.admin-order-actions .tg-btn {
  padding: 10px 8px; font-size: 13px; font-weight: 600; text-align: center;
}

/* ════════════════════════════
   MAINTENANCE BADGE (admin dashboard)
════════════════════════════ */
.adm-maintenance-badge {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.2);
  border-radius: var(--adm-radius);
  margin-bottom: 16px;
  font-size: 13px; font-weight: 600; color: var(--adm-danger);
}

/* ════════════════════════════
   EXPORT BUTTONS
════════════════════════════ */
.adm-export-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 16px;
  background: var(--adm-glass);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--tg-theme-text-color);
  transition: border-color .15s;
  width: 100%; text-align: left;
  box-shadow: var(--adm-shadow);
}
.adm-export-btn:active { transform: scale(.98); opacity: .8; }
.adm-export-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(61,235,255,.1);
  border: 1px solid rgba(61,235,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.adm-export-text { flex: 1; }
.adm-export-title { font-size: 14px; font-weight: 700; }
.adm-export-desc  { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

/* ════════════════════════════
   BACKUP CARD
════════════════════════════ */
.adm-backup-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--adm-border);
}
.adm-backup-item:last-child { border-bottom: none; }
.adm-backup-icon { font-size: 22px; flex-shrink: 0; opacity: .7; }
.adm-backup-info { flex: 1; min-width: 0; }
.adm-backup-name { font-size: 12px; font-weight: 700; color: var(--tg-theme-text-color); word-break: break-all; }
.adm-backup-meta { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

/* ════════════════════════════
   LIGHT THEME OVERRIDES
════════════════════════════ */
.theme-light {
  --adm-glass:    rgba(0,0,0,.03);
  --adm-glass-hi: rgba(0,0,0,.055);
  --adm-border:   rgba(0,0,0,.09);
  --adm-border-hi:rgba(37,99,235,.35);
  --adm-shadow:   0 2px 10px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --adm-shadow-hi:0 4px 16px rgba(37,99,235,.14);
}

/* ── Admin panel is ALWAYS dark — override light theme tokens back to dark ── */
.theme-light #admin-page {
  background: #07101D !important;
  color: #fff !important;
  /* Restore dark admin glass/border/shadow */
  --adm-glass:     rgba(255,255,255,.04);
  --adm-glass-hi:  rgba(61,235,255,.08);
  --adm-border:    rgba(255,255,255,.09);
  --adm-border-hi: rgba(61,235,255,.28);
  --adm-shadow:    0 2px 10px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.20);
  --adm-shadow-hi: 0 4px 16px rgba(61,235,255,.14);
  /* Restore dark global tokens so all admin children use dark colours */
  --tg-theme-bg-color:           #07101D;
  --tg-theme-text-color:         #ffffff;
  --tg-theme-hint-color:         rgba(255,255,255,.45);
  --tg-theme-secondary-bg-color: rgba(255,255,255,.04);
  --tg-theme-header-bg-color:    rgba(7,16,29,.95);
  --border-color:                rgba(255,255,255,.09);
  --text-secondary:              rgba(255,255,255,.45);
  --accent-soft:                 rgba(61,235,255,.08);
  --accent-border:               rgba(61,235,255,.22);
}

/* ── Visuals admin panel ── */
.visual-slot-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 14px;
  transition: border-color .2s, background .2s;
}
.visual-slot-card:hover {
  border-color: rgba(167,139,250,.3);
  background: rgba(167,139,250,.03);
}
.visual-slot-card--empty {
  border-style: dashed;
  border-color: rgba(255,255,255,.12);
}
.visual-slot-card--empty:hover {
  border-color: rgba(167,139,250,.4);
  background: rgba(167,139,250,.05);
}
.visual-slot-header {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px;
}
.visual-slot-icon-wrap {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 9px; background: rgba(167,139,250,.1);
  border: 1px solid rgba(167,139,250,.2);
  display: flex; align-items: center; justify-content: center;
}
.visual-slot-icon { font-size: 18px; line-height: 1; }
.visual-slot-info { flex: 1; }
.visual-slot-label {
  font-size: 14px; font-weight: 600;
  color: var(--tg-theme-text-color); margin-bottom: 3px;
}
.visual-slot-desc {
  font-size: 11px; color: var(--text-secondary); line-height: 1.4;
}
.visual-slot-preview {
  width: 100%; border-radius: 10px; overflow: hidden;
  background: rgba(0,0,0,.2); margin-bottom: 10px;
  min-height: 90px; display: flex; align-items: center; justify-content: center;
}
.visual-preview-img {
  width: 100%; max-height: 200px; object-fit: cover;
  border-radius: 10px; display: block;
}
.visual-preview-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 5px; padding: 22px 16px;
  color: var(--text-secondary); font-size: 12px; text-align: center;
}
.visual-preview-empty--upload {
  cursor: pointer; transition: color .15s;
}
.visual-preview-empty--upload:hover { color: rgba(167,139,250,.9); }
.visual-slot-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.visual-slot-upload-btn { flex: 1; margin-bottom: 0 !important; }
.visual-slot-status {
  margin-top: 8px; font-size: 12px; border-radius: 6px; padding: 6px 10px;
}
.visual-slot-status.uploading { background: rgba(251,191,36,.12); color: #fbbf24; }
.visual-slot-status.success   { background: rgba(34,197,94,.12);  color: var(--success); }
.visual-slot-status.error     { background: rgba(239,68,68,.12);  color: var(--danger); }

/* ── Visuals: group label ── */
.adm-visuals-group-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; color: var(--adm-accent);
  margin-bottom: 10px; padding-left: 2px;
}

/* ── Visuals: sections 2-column grid ── */
.adm-visuals-sections-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.visual-section-card {
  background: var(--sec-bg, rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.09);
  border-top: 3px solid var(--sec-color, var(--adm-accent));
  border-radius: var(--radius-md);
  padding: 12px 10px 10px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .2s, background .2s;
}
.visual-section-card:hover {
  background: rgba(255,255,255,.06);
}
.visual-section-card-header {
  display: flex; align-items: center; gap: 8px;
}
.visual-section-icon {
  font-size: 22px; line-height: 1;
}
.visual-section-label {
  font-size: 14px; font-weight: 700;
  color: var(--sec-color, var(--tg-theme-text-color));
}
.visual-section-preview {
  margin-bottom: 0 !important;
  min-height: 70px !important;
  border-radius: 8px !important;
}
.visual-section-upload-btn {
  width: 100%;
}
.visual-section-group {
  background: var(--sec-bg, rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid var(--sec-color, var(--adm-accent));
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 12px;
}
.visual-section-group-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.visual-state-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; padding: 2px 8px;
  border-radius: 20px;
}

/* Maintenance banner */
.maintenance-banner {
  background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.25);
  border-radius:var(--radius-md); padding:14px 16px; margin-bottom:16px;
  display:flex; align-items:center; gap:12px;
}
.maintenance-banner .mb-icon { font-size:28px; }
.maintenance-banner .mb-text { font-size:14px; font-weight:600; color:var(--warning); }
.maintenance-banner.active { background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.25); }
.maintenance-banner.active .mb-text { color:var(--danger); }

/* ══════════════════════════════════════════
   MAINTENANCE OVERLAY — PREMIUM REDESIGN
══════════════════════════════════════════ */

/* Background depth layers */
.maint-bg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
/* Layer 2: radial vignette — centre brighter, edges darker */
.maint-bg-radial {
  background: radial-gradient(ellipse 80% 65% at 50% 42%,
    rgba(18,40,90,.0) 0%,
    rgba(5,10,32,.55) 70%,
    rgba(3,7,22,.88) 100%);
}
/* Layer 3: noise texture via SVG data-URI — very subtle */
.maint-bg-noise {
  opacity: .018;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Floating particles */
.maint-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.maint-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(100,160,255,.55);
  box-shadow: 0 0 6px 2px rgba(100,160,255,.25);
  animation: maintParticleDrift linear infinite;
}
.maint-particle:nth-child(1) { width:3px; height:3px; left:15%; top:80%; animation-duration:14s; animation-delay:0s;   opacity:.35; }
.maint-particle:nth-child(2) { width:2px; height:2px; left:72%; top:85%; animation-duration:18s; animation-delay:-5s;  opacity:.25; }
.maint-particle:nth-child(3) { width:4px; height:4px; left:38%; top:90%; animation-duration:22s; animation-delay:-9s;  opacity:.20; background:rgba(140,100,255,.55); box-shadow:0 0 6px 2px rgba(140,100,255,.25); }
.maint-particle:nth-child(4) { width:2px; height:2px; left:58%; top:75%; animation-duration:16s; animation-delay:-3s;  opacity:.30; }
.maint-particle:nth-child(5) { width:3px; height:3px; left:82%; top:88%; animation-duration:20s; animation-delay:-11s; opacity:.22; background:rgba(120,180,255,.55); box-shadow:0 0 6px 2px rgba(120,180,255,.25); }
.maint-particle:nth-child(6) { width:2px; height:2px; left:28%; top:82%; animation-duration:25s; animation-delay:-7s;  opacity:.18; }
@keyframes maintParticleDrift {
  0%   { transform: translateY(0) translateX(0);   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-420px) translateX(30px); opacity: 0; }
}

/* Icon wrapper + glow ring + float animation */
.maint-icon-wrap {
  position: relative;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
/* Radial glow blob behind mascot */
.maint-glow-ring {
  position: absolute;
  width: 180px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(ellipse 100% 100% at 50% 50%,
    rgba(60,90,220,.28) 0%,
    rgba(80,50,200,.12) 45%,
    transparent 75%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
  animation: maintGlowPulse 4s ease-in-out infinite;
}
@keyframes maintGlowPulse {
  0%,100% { opacity: .75; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.12); }
}
.maint-icon-img {
  position: relative;
  z-index: 1;
  width: 100px;
  height: 100px;
  object-fit: contain;
  animation: maintFloat 3.6s ease-in-out infinite;
  filter:
    drop-shadow(0 8px 22px rgba(60,100,255,.30))
    drop-shadow(0 2px 6px rgba(0,0,0,.40));
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}
@keyframes maintFloat {
  0%,100% { transform: translateY(0px) rotate(-1deg); }
  50%      { transform: translateY(-10px) rotate(1deg); }
}

/* Title — main text after mascot */
.maint-modal-glass .title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: rgba(255,255,255,.95);
  text-shadow: 0 0 28px rgba(100,140,255,.35), 0 2px 8px rgba(0,0,0,.5);
  margin-bottom: 14px;
  line-height: 1.2;
}

/* Description — calm, readable, secondary */
.maint-modal-glass .desc {
  font-size: 15px;
  font-weight: 400;
  color: rgba(255,255,255,.55);
  line-height: 2;
  margin-bottom: 24px;
  max-width: 280px;
  text-align: center;
}

/* ── Terminal status line ── */
.maint-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 0;
  margin-bottom: 36px;
  min-height: 20px;
  max-width: 320px;
  width: 100%;
}
/* The ">" prefix — static, always visible */
.maint-terminal-prefix {
  font-size: 13px;
  font-weight: 600;
  color: #7BA8E8;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
  text-shadow: 0 0 8px rgba(120,168,232,.35);
}
/* Typewriter text area */
.maint-terminal-text {
  font-size: 13px;
  font-weight: 500;
  color: #9FB3D9;
  letter-spacing: .05em;
  line-height: 1;
  text-shadow: 0 0 8px rgba(120,160,255,.25);
  min-width: 1px;
}
/* Blinking cursor "|" */
.maint-terminal-cursor {
  display: inline-block;
  width: 2px;
  height: 13px;
  background: #7BA8E8;
  border-radius: 1px;
  margin-left: 2px;
  vertical-align: middle;
  flex-shrink: 0;
  animation: maintCursorBlink 900ms steps(1) infinite;
  box-shadow: 0 0 5px rgba(120,168,232,.5);
}
@keyframes maintCursorBlink {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

/* ── Section-disabled modal (reused .subscription-overlay class) ── */
.subscription-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.subscription-modal {
  background: rgba(10,20,40,.97); border-radius: var(--radius-xl);
  padding: 32px 26px; text-align: center; max-width: 300px; width: 100%;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 20px 50px rgba(0,0,0,.6);
  animation: modalPop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalPop { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
.subscription-modal .icon { font-size: 52px; margin-bottom: 14px; }
.subscription-modal .title { font-size: 20px; font-weight: 800; margin-bottom: 8px; color: var(--tg-theme-text-color); }
.subscription-modal .desc  { font-size: 14px; color: var(--text-secondary); margin-bottom: 22px; line-height: 1.6; }
.subscription-check-btn {
  padding: 13px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md); font-size: 14px; font-weight: 600;
  cursor: pointer; width: 100%; color: rgba(255,255,255,.65); transition: all .2s;
}
.subscription-check-btn:active { opacity: .7; }

/* ── Section Disabled — premium redesign ── */
.sd-overlay {
  background: rgba(2,6,18,.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.sd-modal {
  position: relative;
  background: linear-gradient(150deg, rgba(12,24,50,.99) 0%, rgba(6,14,32,.99) 100%);
  border: 1px solid rgba(61,235,255,.16);
  border-radius: 26px;
  padding: 44px 28px 32px;
  text-align: center;
  max-width: 308px; width: 100%;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(61,235,255,.05),
    0 32px 80px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(61,235,255,.08);
  animation: sdModalIn .38s cubic-bezier(.34,1.5,.64,1) both;
}
/* Dot-grid texture */
.sd-modal::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(61,235,255,.045) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none; z-index: 0;
}
/* Top glow blob */
.sd-glow-bg {
  position: absolute; top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 240px; height: 180px;
  background: radial-gradient(ellipse, rgba(61,235,255,.10) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
/* Icon */
.sd-icon-wrap {
  position: relative;
  width: 86px; height: 86px;
  margin: 0 auto 26px;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.sd-icon-wrap::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61,235,255,.13) 0%, rgba(61,235,255,.03) 55%, transparent 100%);
}
.sd-ring {
  position: absolute; border-radius: 50%;
  border: 1.5px solid rgba(61,235,255,.22);
  animation: sdRingPulse 2.8s ease-in-out infinite;
}
.sd-ring-1 { inset: 0; }
.sd-ring-2 {
  inset: -14px;
  border-color: rgba(61,235,255,.10);
  animation-delay: .5s;
}
.sd-icon-emoji {
  font-size: 42px; line-height: 1;
  position: relative; z-index: 1;
  filter: drop-shadow(0 0 18px rgba(61,235,255,.35));
}
/* Texts */
.sd-title {
  font-size: 22px; font-weight: 800;
  color: var(--tg-theme-text-color, #e8f4ff);
  margin-bottom: 10px;
  letter-spacing: -.4px;
  position: relative; z-index: 1;
}
.sd-desc {
  font-size: 14px; line-height: 1.65;
  color: rgba(180,210,240,.55);
  margin-bottom: 30px;
  position: relative; z-index: 1;
}
/* Button */
.sd-btn {
  position: relative; z-index: 1;
  width: 100%; padding: 15px;
  background: linear-gradient(135deg, rgba(61,235,255,.18) 0%, rgba(61,235,255,.09) 100%);
  border: 1px solid rgba(61,235,255,.30);
  border-radius: var(--radius-md);
  font-size: 15px; font-weight: 700;
  color: rgba(61,235,255,.95);
  cursor: pointer; letter-spacing: .3px;
  transition: background .18s, box-shadow .18s, transform .12s;
  box-shadow: 0 0 18px rgba(61,235,255,.08);
  overflow: hidden;
}
.sd-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(61,235,255,.14), transparent);
  opacity: 0; transition: opacity .18s;
}
.sd-btn:active { transform: scale(.97); }
.sd-btn:active::after { opacity: 1; }
/* Animations */
@keyframes sdModalIn {
  from { opacity: 0; transform: scale(.87) translateY(14px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
@keyframes sdRingPulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(1.10); opacity: .4; }
}
/* Light theme */
body.theme-light .sd-overlay { background: rgba(200,215,240,.70); }
body.theme-light .sd-modal {
  background: linear-gradient(150deg, rgba(244,249,255,.99), rgba(233,243,255,.98));
  border-color: rgba(37,99,235,.14);
  box-shadow: 0 32px 80px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.9);
}
body.theme-light .sd-modal::before {
  background-image: radial-gradient(circle, rgba(37,99,235,.045) 1px, transparent 1px);
}
body.theme-light .sd-glow-bg {
  background: radial-gradient(ellipse, rgba(37,99,235,.08) 0%, transparent 70%);
}
body.theme-light .sd-icon-wrap::before {
  background: radial-gradient(circle, rgba(37,99,235,.11) 0%, transparent 100%);
}
body.theme-light .sd-ring { border-color: rgba(37,99,235,.20); }
body.theme-light .sd-ring-2 { border-color: rgba(37,99,235,.09); }
body.theme-light .sd-icon-emoji { filter: none; }
body.theme-light .sd-title { color: #0f172a; }
body.theme-light .sd-desc { color: #64748b; }
body.theme-light .sd-btn {
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(37,99,235,.06));
  border-color: rgba(37,99,235,.24);
  color: #1d4ed8;
  box-shadow: 0 0 18px rgba(37,99,235,.06);
}

/* ══════════════════════════════════════════
   SUBSCRIPTION — FULL-SCREEN PREMIUM
══════════════════════════════════════════ */
.sub-fs-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999; display: flex; align-items: stretch; justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 130% 55% at 50% -8%, rgba(4,22,58,.98) 0%, rgba(2,8,22,.99) 60%, #010610 100%);
  animation: subFsIn .35s ease;
}
@keyframes subFsIn { from{opacity:0} to{opacity:1} }

/* Cyan atmospheric halo */
.sub-fs-halo {
  position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
  width: 560px; height: 420px;
  background: radial-gradient(ellipse, rgba(61,235,255,.15) 0%, transparent 62%);
  pointer-events: none; z-index: 1;
}
/* Dot grid */
.sub-fs-grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(61,235,255,.065) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 75% 75% at 50% 35%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 35%, black 20%, transparent 75%);
}
/* Floating particles */
.sub-fs-particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.sub-fs-particles span { position: absolute; border-radius: 50%; opacity: 0; animation: subFsParticle 6s ease-in-out infinite; }
.sub-fs-particles span:nth-child(1){ width:3px;height:3px;background:var(--accent);   left:7%;  top:78%; animation-delay:0s; }
.sub-fs-particles span:nth-child(2){ width:2px;height:2px;background:var(--accent2);  left:86%; top:62%; animation-delay:1.1s; }
.sub-fs-particles span:nth-child(3){ width:3px;height:3px;background:var(--accent);   left:16%; top:42%; animation-delay:2.2s; }
.sub-fs-particles span:nth-child(4){ width:2px;height:2px;background:var(--accent2);  left:77%; top:82%; animation-delay:3.3s; }
.sub-fs-particles span:nth-child(5){ width:4px;height:4px;background:rgba(255,255,255,.28);left:53%;top:22%;animation-delay:.6s; }
.sub-fs-particles span:nth-child(6){ width:2px;height:2px;background:var(--accent);   left:36%; top:90%; animation-delay:2.7s; }
.sub-fs-particles span:nth-child(7){ width:3px;height:3px;background:var(--accent2);  left:91%; top:38%; animation-delay:4.1s; }
.sub-fs-particles span:nth-child(8){ width:2px;height:2px;background:var(--accent);   left:24%; top:58%; animation-delay:1.6s; }
@keyframes subFsParticle {
  0%  { opacity:0; transform:translateY(0) scale(1); }
  25% { opacity:.9; }
  100%{ opacity:0; transform:translateY(-55px) scale(.15); }
}

/* Content column */
.sub-fs-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; max-width: 340px;
  padding: calc(env(safe-area-inset-top,0px) + 28px) 32px calc(env(safe-area-inset-bottom,0px) + 44px);
  text-align: center;
}

/* Icon wrapper */
.sub-fs-icon-wrap {
  position: relative; width: 122px; height: 122px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 30px;
}
.sub-fs-halo-ring {
  position: absolute; inset: -26px; border-radius: 50%;
  background: radial-gradient(circle, rgba(61,235,255,.17) 0%, transparent 65%);
  animation: subFsPulse 3s ease-in-out infinite;
}
.sub-fs-ring-1 {
  position: absolute; inset: -7px; border-radius: 50%;
  border: 1.5px solid rgba(61,235,255,.3);
  animation: subFsRingAnim 3s ease-in-out infinite;
}
.sub-fs-ring-2 {
  position: absolute; inset: -16px; border-radius: 50%;
  border: 1px solid rgba(61,235,255,.1);
  animation: subFsRingAnim 3s ease-in-out infinite .55s;
}
@keyframes subFsPulse    { 0%,100%{opacity:.45;transform:scale(1)} 50%{opacity:1;transform:scale(1.1)} }
@keyframes subFsRingAnim { 0%,100%{opacity:.25;transform:scale(1)} 50%{opacity:.85;transform:scale(1.06)} }
.sub-fs-icon-circle {
  width: 122px; height: 122px; border-radius: 50%;
  background: linear-gradient(145deg, rgba(61,235,255,.16) 0%, rgba(37,99,235,.22) 100%);
  border: 1.5px solid rgba(61,235,255,.28);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 44px rgba(61,235,255,.22), 0 0 90px rgba(61,235,255,.07), inset 0 1px 0 rgba(255,255,255,.12);
}
.sub-fs-icon-circle svg { filter: drop-shadow(0 0 14px rgba(61,235,255,.55)); }

/* Tag */
.sub-fs-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--accent2); background: rgba(246,196,83,.1); border: 1px solid rgba(246,196,83,.22);
  border-radius: 20px; padding: 4px 13px; margin-bottom: 16px;
}
/* Title */
.sub-fs-title {
  font-size: 32px; font-weight: 900; letter-spacing: -.6px; line-height: 1.12;
  margin: 0 0 12px;
  background: linear-gradient(145deg, #ffffff 0%, rgba(61,235,255,.82) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
/* Description */
.sub-fs-desc {
  font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.42); margin: 0 0 38px;
}
/* Actions */
.sub-fs-actions { width: 100%; display: flex; flex-direction: column; gap: 10px; }

/* Primary button */
.sub-fs-btn-primary {
  position: relative; overflow: hidden;
  padding: 16px 20px;
  background: linear-gradient(135deg, #3DEBFF 0%, #2563eb 100%);
  color: #010d1f; border: none; border-radius: var(--radius-md);
  font-size: 16px; font-weight: 800; letter-spacing: .15px;
  cursor: pointer; width: 100%;
  transition: transform .18s, box-shadow .18s;
  box-shadow: 0 6px 30px rgba(61,235,255,.38), 0 2px 8px rgba(0,0,0,.4);
}
.sub-fs-btn-primary:active { transform: scale(.96); box-shadow: 0 2px 14px rgba(61,235,255,.2); }
.sub-fs-shine {
  position: absolute; top: 0; left: -100%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  animation: subFsShine 2.8s ease-in-out infinite; pointer-events: none;
}
@keyframes subFsShine {
  0%,100%{ left:-100%; opacity:0; } 10%{ opacity:1; } 55%{ left:160%; opacity:0; }
}
/* Ghost button */
.sub-fs-btn-ghost {
  padding: 14px 20px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-md);
  font-size: 15px; font-weight: 600; cursor: pointer; width: 100%;
  color: rgba(255,255,255,.48); transition: all .2s;
}
.sub-fs-btn-ghost:hover { background: rgba(61,235,255,.08); border-color: rgba(61,235,255,.22); color: rgba(255,255,255,.78); }
.sub-fs-btn-ghost:active { opacity: .65; transform: scale(.97); }

/* ══════════════════════════════════════════
   MAINTENANCE FULL-SCREEN PAGE
   Placed AFTER .subscription-overlay so same-specificity rules win
══════════════════════════════════════════ */
.maint-overlay-bg {
  /* Dark theme default — standalone, no dependency on .subscription-overlay */
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: radial-gradient(ellipse 90% 70% at 50% 40%,
    rgba(12,28,70,1) 0%, rgba(6,14,38,1) 50%, #030818 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Both themes use the same dark overlay — no light override */
.maint-overlay-bg .maint-modal-glass {
  position: relative;
  z-index: 2;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  max-width: none;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(48px + env(safe-area-inset-top, 0px)) 36px calc(48px + env(safe-area-inset-bottom, 0px));
  animation: none;
  /* slight upward shift so mascot lands near screen centre-top */
  padding-top: calc(max(env(safe-area-inset-top, 0px), 24px) + 8vh);
}

/* Stars pack list (vertical) */
.stars-pack-list { display:flex; flex-direction:column; gap:10px; margin-top:14px; touch-action: pan-y; }
.stars-pack-item {
  display:flex; align-items:center; gap:14px; padding:15px 18px;
  background: #0D1829;
  border-radius:var(--radius-md); cursor:pointer;
  transition:transform .18s cubic-bezier(.25,.46,.45,.94);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
  touch-action: pan-y;
}
.stars-pack-item:hover { border-color:var(--accent-border); box-shadow:var(--card-shadow-hover); }
.stars-pack-item:active { transform:scale(.98); opacity:.85; }
.stars-pack-icon { font-size:24px; flex-shrink:0; }
.stars-pack-name { flex:1; font-size:15px; font-weight:700; color:var(--tg-theme-text-color); }
.stars-pack-price { font-size:14px; color:var(--accent); font-weight:700; white-space:nowrap; }
.stars-pack-icon-wrap {
  display: inline-block;
  width: 24px;
  height: 24px;
  overflow: visible;
  position: relative;
  vertical-align: -8px;
  flex-shrink: 0;
}
.stars-pack-icon-img {
  width: 75px;
  height: 75px;
  object-fit: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.stars-pack-icon-img--4 {
  transform: translate(calc(-50% + 2px), calc(-50% - 2px));
}

/* Steam calc widget */
/* Steam user check card */
.steam-user-card {
  margin-top:10px; padding:12px 14px;
  background: rgba(15,26,43,.5);
  border-radius:var(--radius-md); border:1px solid var(--border-color);
  min-height:44px;
}
.steam-user-loading {
  display:flex; align-items:center; justify-content:center;
  color:var(--text-secondary); font-size:13px;
}
.steam-user-info {
  display:flex; align-items:center; gap:12px;
}
.steam-user-avatar {
  width:44px; height:44px; border-radius:10px;
  object-fit:cover; flex-shrink:0;
  border:2px solid var(--accent-border);
}
.steam-user-details { flex:1; min-width:0; }
.steam-user-name {
  font-size:15px; font-weight:700;
  color:var(--tg-theme-text-color);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.steam-user-status {
  font-size:12px; color:var(--success); font-weight:600; margin-top:2px;
}
.steam-user-error {
  display:flex; align-items:center; justify-content:center;
  color:var(--danger); font-size:13px; font-weight:600;
}

.steam-calc-widget {
  margin-top:16px; padding:16px 18px; background: linear-gradient(135deg, rgba(61,235,255,.12), rgba(15,26,43,.45));
  border-radius:var(--radius-lg); border:1px solid var(--border-color); text-align:center;
  box-shadow: var(--card-shadow);
}
.steam-calc-loading { color:var(--text-secondary); font-size:14px; font-style:italic; }
.steam-rate-title { font-size:13px; color:var(--text-secondary); margin-bottom:10px; font-weight:600; }
.steam-rate-row { display:flex; align-items:center; padding:7px 0; }
.steam-rate-cur { font-size:14px; color:var(--tg-theme-text-color); font-weight:700; min-width:40px; text-align:left; }
.steam-rate-value { margin-left:auto; font-size:15px; font-weight:800; color:var(--accent); }

/* Stars choice */
.stars-choice { display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.stars-choice-btn {
  display:flex; align-items:center; gap:16px; padding:20px 18px;
  background: linear-gradient(135deg, rgba(61,235,255,.12), rgba(15,26,43,.45)); border-radius:var(--radius-lg); cursor:pointer;
  transition:all .22s cubic-bezier(.25,.46,.45,.94); border:1px solid var(--border-color); position:relative;
  box-shadow: var(--card-shadow);
}
.stars-choice-btn:hover { border-color:var(--accent-border); box-shadow:var(--card-shadow-hover); }
.stars-choice-btn:active { transform:scale(.98); opacity:.85; }
.stars-choice-icon { font-size:36px; flex-shrink:0; }
.stars-choice-icon-img { width:60px; height:60px; object-fit:contain; flex-shrink:0; }
.stars-choice-text { flex:1; display:flex; flex-direction:column; }
.stars-choice-title { font-size:16px; font-weight:700; color:var(--tg-theme-text-color); }
.stars-choice-desc { font-size:13px; color:var(--text-secondary); margin-top:3px; }
.stars-choice-arrow { margin-left:auto; font-size:22px; color:var(--text-secondary); flex-shrink:0; }

/* ===== Stats screen ===== */
.stats-loading {
  display: flex; justify-content: center; align-items: center;
  padding: 60px 0;
}
.stats-spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(61,235,255,.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Stats screen background ── */
#screen-stats {
  background:
    radial-gradient(ellipse 80% 50% at 50% 20%, rgba(61,235,255,.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(37,99,235,.05) 0%, transparent 55%);
}

/* Summary card */
.stat-summary-card {
  background: linear-gradient(160deg, rgba(61,235,255,.16) 0%, rgba(15,26,43,.58) 55%, rgba(37,99,235,.07) 100%);
  border: 1px solid rgba(61,235,255,.18);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 24px;
  box-shadow:
    0 8px 28px rgba(0,0,0,.26),
    0 2px 8px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.12);
}
.stat-summary-row {
  display: flex; align-items: stretch; gap: 0;
}
.stat-summary-item {
  flex: 1; text-align: center;
}
.stat-summary-divider {
  width: 1px;
  background: rgba(255,255,255,.12);
  margin: 0 16px;
  flex-shrink: 0;
}
/* Numbers — bigger, brighter, glow */
.stat-summary-value {
  font-size: 29px; font-weight: 800;
  color: rgba(255,255,255,.97);
  letter-spacing: -.5px;
  line-height: 1.1;
  text-shadow: 0 0 14px rgba(61,235,255,.35);
}
/* Amount gets accent color + stronger glow */
.stat-summary-item:last-child .stat-summary-value {
  color: var(--accent);
  text-shadow: 0 0 16px rgba(61,235,255,.45), 0 0 32px rgba(61,235,255,.18);
}
/* Labels — dimmer to reinforce hierarchy */
.stat-summary-label {
  font-size: 11px; color: rgba(255,255,255,.38);
  margin-top: 6px; font-weight: 500; letter-spacing: .02em;
}

/* Category cards grid */
.stat-categories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.stat-cat-card {
  border-radius: var(--radius-lg);
  padding: 18px 16px 16px;
  border: 1px solid var(--border-color);
  box-shadow:
    0 6px 20px rgba(0,0,0,.22),
    0 1px 4px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.10);
  position: relative;
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
/* Interactive press */
.stat-cat-card:active {
  transform: scale(.98);
  box-shadow:
    0 10px 28px rgba(0,0,0,.28),
    0 2px 8px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.10);
}

/* Per-category colour themes — stronger gradient, deeper bottom */
.stat-cat-stars {
  background: linear-gradient(160deg, rgba(246,196,83,.20) 0%, rgba(15,26,43,.60) 60%, rgba(246,196,83,.05) 100%);
  border-color: rgba(246,196,83,.28);
}
.stat-cat-steam {
  background: linear-gradient(160deg, rgba(94,164,255,.20) 0%, rgba(15,26,43,.60) 60%, rgba(94,164,255,.05) 100%);
  border-color: rgba(94,164,255,.28);
}
.stat-cat-premium {
  background: linear-gradient(160deg, rgba(168,85,247,.22) 0%, rgba(15,26,43,.60) 60%, rgba(168,85,247,.06) 100%);
  border-color: rgba(168,85,247,.30);
}
.stat-cat-gifts {
  background: linear-gradient(160deg, rgba(52,211,153,.20) 0%, rgba(15,26,43,.60) 60%, rgba(52,211,153,.05) 100%);
  border-color: rgba(52,211,153,.28);
}

/* Card header row: icon + name + badge */
.stat-cat-header {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 14px;
}
.stat-cat-icon { font-size: 18px; flex-shrink: 0; }
.stat-cat-name {
  font-size: 13px; font-weight: 700;
  color: var(--tg-theme-text-color);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Badge — clearer capsule, slightly lighter */
.stat-cat-badge {
  font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.10);
  padding: 2px 8px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.12);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Main big value — larger, glow in category color */
.stat-cat-main-value {
  font-size: 33px; font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1;
  margin-bottom: 6px;
}
.stat-cat-stars .stat-cat-main-value  { color: #f6c453; text-shadow: 0 0 14px rgba(246,196,83,.40); }
.stat-cat-steam .stat-cat-main-value  { color: #5ea4ff; text-shadow: 0 0 14px rgba(94,164,255,.40); }
.stat-cat-premium .stat-cat-main-value { color: #c084fc; text-shadow: 0 0 14px rgba(168,85,247,.40); }
.stat-cat-gifts .stat-cat-main-value  { color: #34d399; text-shadow: 0 0 14px rgba(52,211,153,.40); }

/* Sub-label — dimmest level */
.stat-cat-main-label {
  font-size: 10px; color: rgba(255,255,255,.35);
  font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase;
}

/* Light theme adjustments */
body.theme-light .stat-summary-card {
  background: rgba(255,255,255,.88);
  border-color: rgba(37,99,235,.18);
  box-shadow: 0 6px 20px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.90);
}
body.theme-light .stat-summary-value { color: #0d1b2a; text-shadow: none; }
body.theme-light .stat-summary-item:last-child .stat-summary-value { color: var(--accent); text-shadow: none; }
body.theme-light .stat-summary-label { color: rgba(0,0,0,.40); }
body.theme-light .stat-cat-stars  { background: rgba(246,196,83,.12); border-color: rgba(246,196,83,.30); }
body.theme-light .stat-cat-steam  { background: rgba(94,164,255,.10); border-color: rgba(94,164,255,.25); }
body.theme-light .stat-cat-premium{ background: rgba(168,85,247,.10); border-color: rgba(168,85,247,.22); }
body.theme-light .stat-cat-gifts  { background: rgba(52,211,153,.10); border-color: rgba(52,211,153,.22); }
body.theme-light .stat-cat-name   { color: #0d1b2a; }
body.theme-light .stat-cat-badge  { color: rgba(0,0,0,.45); background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.10); }
body.theme-light .stat-cat-main-label { color: rgba(0,0,0,.35); }
body.theme-light .stat-cat-stars .stat-cat-main-value,
body.theme-light .stat-cat-steam .stat-cat-main-value,
body.theme-light .stat-cat-premium .stat-cat-main-value,
body.theme-light .stat-cat-gifts .stat-cat-main-value { text-shadow: none; }

.text-center { text-align:center; }
.mt-8 { margin-top:8px; }
.mt-12 { margin-top:12px; }
.mt-16 { margin-top:16px; }
.mb-12 { margin-bottom:12px; }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(37,99,235,.2); border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:rgba(37,99,235,.35); }

/* Selection color */
::selection { background:rgba(37,99,235,.15); color:var(--tg-theme-text-color); }

/* ===== Home UX blocks (lightweight) ===== */

/* ===== Home Hero (v1 Pixel Premium) ===== */
.hero-banner{
  margin: 12px 0 14px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 520px at 15% 0%, var(--accent-glow), transparent 60%),
    radial-gradient(800px 520px at 90% 15%, var(--accent2-soft), transparent 55%),
    linear-gradient(135deg, rgba(15,26,43,.70), rgba(15,26,43,.30)),
    url('/assets/cryptobot-preview.webp') center/cover no-repeat;
  border-radius: 20px;
  box-shadow:
    0 16px 48px rgba(0,0,0,.38),
    0 0 0 1px rgba(61,235,255,.08) inset;
  overflow:hidden;
  position:relative;
}

.hero-banner::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity:.10;
  pointer-events:none;
}

.hero-banner::after{
  content:'';
  position:absolute;
  bottom:-2px; left:10%; right:10%; height:2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(61,235,255,.50),
    rgba(246,196,83,.35),
    transparent
  );
  filter: blur(1px);
  pointer-events:none;
}

.hero-inner{
  position:relative;
  z-index:2;
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:flex-start;
  padding: 0px 16px;
}

.hero-copy{
  flex: 1 1 0;
  min-width: 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero-kicker{
  font-size: 11px;
  letter-spacing: .22em;
  font-weight: 800;
  opacity: .85;
  margin-bottom: 6px;
  color: rgba(61,235,255,.90);
}

.pixel-title{
  font-weight: 950;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-shadow:
    0 2px 0 rgba(0,0,0,.25),
    0 0 18px rgba(61,235,255,.18);
}

.hero-title{
  background: linear-gradient(90deg, rgba(255,255,255,.97), rgba(61,235,255,.90), rgba(246,196,83,.88));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub{
  margin-top: 7px;
  font-size: 14px;
  font-weight: 700;
  opacity: .95;
  line-height: 1.35;
}

.hero-subtitle{
  margin-top: 6px;
  font-size: 12px;
  opacity: .65;
  line-height: 1.4;
  letter-spacing: .01em;
}

/* Mini hero banner (category promo) */
.hero-banner.hero-mini{
  margin: 10px 0 12px;
  border-radius: 18px;
}
.hero-banner.hero-mini .hero-inner{
  padding: 12px 14px;
}
.hero-mini-text{
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .1px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 2px 0 rgba(0,0,0,.25), 0 0 18px var(--accent-soft);
}


/* Mini hero mascot (Stars) */
.hero-banner.hero-mini .hero-inner{justify-content:space-between; align-items:center;}

.hero-mascot-wrap{
  flex: 0 0 auto;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

/* Animated portal glow behind mascot — GPU-only: opacity+transform, no filter animation */
.hero-mascot-wrap::before{
  content:"";
  position:absolute;
  inset:auto;
  width: 140px;
  height: 140px;
  right: -10px;
  bottom: -22px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 55%),
    radial-gradient(circle at 50% 55%, var(--accent-soft), transparent 62%);
  filter: blur(14px);  /* static blur — no repaint cost */
  will-change: opacity, transform;
  animation: portalGlowPulse 2.8s ease-in-out infinite;
}

.hero-mascot{
  width: clamp(96px, 22vw, 140px);
  height: auto;
  image-rendering: pixelated;
  opacity: .98;
  transform: translateY(1px);
  /* static drop-shadow — cheaper than animating filter */
  filter:
    drop-shadow(0 10px 22px rgba(0,0,0,.45))
    drop-shadow(0 0 20px var(--accent-soft));
  /* glow pulse is on ::after pseudo-element (opacity only) */
}
/* mascot glow pulse — separate GPU layer, opacity-only animation */
.hero-mascot-wrap::after{
  content:"";
  position:absolute;
  inset:auto;
  width: 120px;
  height: 80px;
  right: 0;
  bottom: -10px;
  background: radial-gradient(ellipse at 50% 60%, var(--accent-soft), transparent 70%);
  filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  animation: mascotGlowPulse 2.8s ease-in-out infinite;
}
/* portalGlowPulse — opacity + transform only (no filter change = no repaint) */
@keyframes portalGlowPulse{
  0%,100%{opacity:.42; transform: scale(.92);}
  50%    {opacity:.90; transform: scale(1.08);}
}
/* mascotGlowPulse — opacity only on the glow layer */
@keyframes mascotGlowPulse{
  0%,100%{opacity:0;}
  50%    {opacity:.70;}
}

/* Keep banner compact on very small screens */
@media (max-width: 360px){
  .hero-banner.hero-mini .hero-inner{gap: 10px;}
  .hero-mascot{width: 96px; transform: translateY(8px);}
  .hero-mascot-wrap::before{width: 120px; height: 120px; right:-6px; bottom:-18px;}
  .screen{ padding: 16px 14px; }
}

/* Mobile fixes */
@media (max-width: 380px){
  .hero-inner{gap:6px; padding:16px 10px}
  .pixel-title{font-size:18px}
  .hero-mascot-wrap{flex-basis:82px}
  .hero-mascot{width:82px}
}
.pill span:first-child{filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));}
.quick-actions{
  margin-top: 6px;
}
.quick-title{
  font-size:13px;
  font-weight:800;
  opacity:.9;
  margin: 4px 2px 10px;
}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quick-btn{
  padding:12px 12px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(15,26,43,.55);
  display:flex;align-items:center;justify-content:space-between;
  transition:transform .08s ease, filter .15s ease, box-shadow .15s ease;
  cursor:pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.16);
}
.quick-btn:hover{background:rgba(15,26,43,.70); border-color:rgba(255,255,255,.12)}
.quick-btn:active{transform:scale(.98); opacity:.9}
.quick-left{display:flex;align-items:center;gap:10px}
.quick-emoji{font-size:18px}
.quick-label{font-size:13px;font-weight:800}
.quick-arrow{opacity:.55;font-size:18px;line-height:1}
.static-page{
  padding: 0 0 8px;
}
.static-block{
  border:1px solid var(--border-color);
  background:rgba(15,26,43,.30);
  border-radius:18px;
  padding:14px 14px;
  margin: 10px 0;
}
.static-q{font-weight:900;font-size:13px;margin-bottom:6px}
.static-a{font-size:13px;opacity:.88;line-height:1.4}
/* ── FAQ screen: compact layout, no scroll ── */
#screen-faq.active {
  padding-top: calc(var(--safe-top, 0px) + 6px) !important;
  padding-bottom: calc(var(--safe-bottom, 0px) + 6px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}
#screen-faq .static-block {
  margin: 6px 0;
  padding: 12px 15px;
  background: linear-gradient(135deg, rgba(61,235,255,.07) 0%, rgba(10,18,30,.65) 100%);
  border: 1px solid rgba(61,235,255,.14);
  border-left: 3px solid rgba(61,235,255,.60);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
}
#screen-faq .static-q {
  font-size: 13px;
  margin-bottom: 4px;
  color: var(--accent);
  font-weight: 800;
  letter-spacing: .01em;
}
#screen-faq .static-a { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.72); }
.step-row{display:flex;gap:12px;align-items:flex-start}
.step-num{
  width:28px;height:28px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
  background:rgba(37,99,235,.18);
  border:1px solid rgba(37,99,235,.25);
}
.step-title{font-weight:900;font-size:13px;margin-bottom:4px}
.step-text{font-size:13px;opacity:.88;line-height:1.4}

/* Categories header */
.categories-header{
  display:flex; align-items:center; justify-content:space-between;
  margin: 14px 2px 10px;
}
.categories-header-title{
  font-size:15px; font-weight:800; letter-spacing:-.2px;
}
.categories-header-link{
  font-size:12px; font-weight:600; color:var(--accent); opacity:.8;
  cursor:pointer; transition:opacity .15s;
}
.categories-header-link:active{opacity:.5}

/* ── Home screen layout ── */
#screen-catalog {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Home hero banner animations ── */
@keyframes heroBannerFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mascotFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-5px); }
}
@keyframes textShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* Shimmer span — градиент по контуру букв */
.shimmer-text {
  display: inline;
  background: linear-gradient(
    90deg,
    #2AC8F0 0%,
    #2AC8F0 30%,
    #ffffff 50%,
    #2AC8F0 70%,
    #2AC8F0 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  will-change: background-position;
  animation: shimmerPass 4s ease-in-out infinite;
}
@keyframes shimmerPass {
  0%   { background-position: 150% center; }
  100% { background-position: -50% center; }
}
@keyframes shimmerSweep {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ── Home hero banner redesign ── */
#screen-catalog .hero-banner.hero-home {
  margin: 0 0 10px;
  position: relative;
  overflow: hidden;
  min-height: 80px;
  display: flex;
  align-items: center;
  padding: 0;
  background:
    radial-gradient(ellipse 70% 120% at 20% 50%, rgba(61,235,255,.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 100% at 85% 50%, rgba(150,90,255,.08) 0%, transparent 55%),
    linear-gradient(135deg, rgba(10,20,40,.90) 0%, rgba(8,16,32,.85) 100%);
  border-color: rgba(61,235,255,.14);
  box-shadow:
    0 8px 32px rgba(0,0,0,.35),
    0 0 0 1px rgba(61,235,255,.07) inset;
  animation: heroBannerFadeIn 0.6s cubic-bezier(.25,.46,.45,.94) both;
}

/* текстовый блок */
.hero-home-content {
  position: relative;
  z-index: 2;
  padding: 16px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-home .hero-home-line1,
.hero-home .hero-home-line1.pixel-title,
.hero-banner.hero-v1.hero-home .pixel-title {
  font-size: 13px !important;
  white-space: nowrap !important;
  line-height: 1.5 !important;
  margin-bottom: 4px;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: #3DEBFF !important;
  filter: drop-shadow(0 0 8px rgba(61,235,255,.80)) drop-shadow(0 0 20px rgba(37,99,235,.55));
  animation: none !important;
}
.hero-home .hero-home-line2,
.hero-home .hero-home-line2.pixel-title {
  font-size: 5px !important;
  white-space: nowrap !important;
  line-height: 1.5 !important;
  opacity: 0.75;
}

/* маскот выглядывает справа — видны лицо, звезда и рука */
.hero-home-mascot {
  position: absolute;
  right: -10px;
  bottom: -4px;
  height: 130%;
  width: auto;
  max-width: 50%;
  object-fit: contain;
  object-position: center top;
  z-index: 1;
  /* 2. Float — покачивание */
  will-change: transform;
  animation: mascotFloat 3s ease-in-out infinite;
  /* маска: плавное исчезание только по правому краю */
  -webkit-mask-image: linear-gradient(to right, black 70%, transparent 100%);
  mask-image: linear-gradient(to right, black 70%, transparent 100%);
  pointer-events: none;
}

/* Categories label */
#screen-catalog .categories-header {
  margin: 8px 2px 6px;
}

/* Categories grid — square cards, small gap */
#screen-catalog .categories {
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}
#screen-catalog .cat-card {
  aspect-ratio: 10 / 9;
  border-radius: var(--radius-lg);
}

/* ── Per-category card theming ─────────────────────── */
/* Stars — золото */
#cat-stars {
  background: linear-gradient(145deg, #1a1300 0%, #0e1a08 40%, #0a1220 100%);
  border-color: rgba(255,198,60,.18);
  box-shadow: 0 4px 20px rgba(0,0,0,.30), 0 0 0 1px rgba(255,198,60,.10) inset;
}
#cat-stars::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255,198,60,.12) 0%, transparent 70%);
  pointer-events: none;
}
#cat-stars:hover {
  border-color: rgba(255,198,60,.38);
  box-shadow: 0 6px 28px rgba(255,198,60,.18), 0 0 0 1px rgba(255,198,60,.22) inset;
}
#cat-stars .name { color: #FFD76B; }
#cat-stars .desc { color: rgba(255,210,100,.55); }

/* Steam — синий */
#cat-steam {
  background: linear-gradient(145deg, #001020 0%, #001830 40%, #000e20 100%);
  border-color: rgba(26,111,255,.20);
  box-shadow: 0 4px 20px rgba(0,0,0,.30), 0 0 0 1px rgba(26,111,255,.10) inset;
}
#cat-steam::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(26,111,255,.14) 0%, transparent 70%);
  pointer-events: none;
}
#cat-steam:hover {
  border-color: rgba(26,111,255,.40);
  box-shadow: 0 6px 28px rgba(26,111,255,.20), 0 0 0 1px rgba(26,111,255,.24) inset;
}
#cat-steam .name { color: #6aaeff; }
#cat-steam .desc { color: rgba(100,170,255,.55); }

/* Premium — фиолетовый */
#cat-premium {
  background: linear-gradient(145deg, #0e0020 0%, #160030 40%, #0a0018 100%);
  border-color: rgba(160,90,255,.20);
  box-shadow: 0 4px 20px rgba(0,0,0,.30), 0 0 0 1px rgba(160,90,255,.10) inset;
}
#cat-premium::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(160,90,255,.14) 0%, transparent 70%);
  pointer-events: none;
}
#cat-premium:hover {
  border-color: rgba(160,90,255,.40);
  box-shadow: 0 6px 28px rgba(160,90,255,.22), 0 0 0 1px rgba(160,90,255,.24) inset;
}
#cat-premium .name { color: #c084ff; }
#cat-premium .desc { color: rgba(190,130,255,.55); }

/* Gifts — зелёный */
#cat-gifts {
  background: linear-gradient(145deg, #001a0a 0%, #002010 40%, #001008 100%);
  border-color: rgba(52,211,120,.18);
  box-shadow: 0 4px 20px rgba(0,0,0,.30), 0 0 0 1px rgba(52,211,120,.10) inset;
}
#cat-gifts::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(52,211,120,.12) 0%, transparent 70%);
  pointer-events: none;
}
#cat-gifts:hover {
  border-color: rgba(52,211,120,.38);
  box-shadow: 0 6px 28px rgba(52,211,120,.18), 0 0 0 1px rgba(52,211,120,.22) inset;
}
#cat-gifts .name { color: #34d399; }
#cat-gifts .desc { color: rgba(52,211,120,.55); }

/* Усиленные drop-shadow на иконках в цвет категории */
#cat-stars .cat-icon    { filter: drop-shadow(0 8px 22px rgba(255,198,60,.35)) drop-shadow(0 3px 8px rgba(0,0,0,.50)); }
#cat-steam .cat-icon    { filter: drop-shadow(0 8px 22px rgba(26,111,255,.35)) drop-shadow(0 3px 8px rgba(0,0,0,.50)); }
#cat-premium .cat-icon  { filter: drop-shadow(0 8px 22px rgba(160,90,255,.35)) drop-shadow(0 3px 8px rgba(0,0,0,.50)); }
#cat-gifts .cat-icon    { filter: drop-shadow(0 8px 22px rgba(52,211,120,.35)) drop-shadow(0 3px 8px rgba(0,0,0,.50)); }

#cat-stars:hover .cat-icon    { filter: drop-shadow(0 12px 28px rgba(255,198,60,.50)) drop-shadow(0 3px 8px rgba(0,0,0,.50)); }
#cat-steam:hover .cat-icon    { filter: drop-shadow(0 12px 28px rgba(26,111,255,.50)) drop-shadow(0 3px 8px rgba(0,0,0,.50)); }
#cat-premium:hover .cat-icon  { filter: drop-shadow(0 12px 28px rgba(160,90,255,.50)) drop-shadow(0 3px 8px rgba(0,0,0,.50)); }
#cat-gifts:hover .cat-icon    { filter: drop-shadow(0 12px 28px rgba(52,211,120,.50)) drop-shadow(0 3px 8px rgba(0,0,0,.50)); }

/* Footer */
#screen-catalog .app-footer {
  padding: 4px 0 6px;
  font-size: 11px;
}

/* Support card */
.support-card{
  margin-top:14px;
  padding:16px 16px;
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(15,26,43,.55);
  display:flex; align-items:center; gap:14px;
  cursor:pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.16);
  transition: all .15s ease;
}
.support-card:active{transform:scale(.98); opacity:.9}
.support-card-icon{
  width:44px; height:44px; border-radius:var(--radius-md);
  background: rgba(61,235,255,.10);
  border:1px solid rgba(61,235,255,.15);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.support-card-text{flex:1; min-width:0}
.support-card-title{font-size:14px; font-weight:700}
.support-card-desc{font-size:12px; opacity:.50; margin-top:2px}
.support-card-arrow{font-size:18px; opacity:.40; flex-shrink:0}

/* App footer */
.app-footer{
  text-align:center;
  padding: 18px 0 calc(var(--safe-bottom) + 6px);
  font-size:12px; opacity:.25; font-weight:500;
  letter-spacing:.02em;
}

/* ── Accessibility ────────────────────────────────────── */

/* Screen-reader only (visually hidden but accessible) */
.sr-only{
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}

/* Visible focus ring for keyboard navigation */
*:focus-visible{
  outline:2px solid var(--accent,#6c5ce7);
  outline-offset:2px;
  border-radius:4px;
}
/* Programmatic focus on headings (accessibility, tabindex=-1) — no visible outline */
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible{
  outline:none;
}

/* Remove focus outline for mouse users */
*:focus:not(:focus-visible){
  outline:none;
}

/* Reduced motion for users who prefer it */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
    scroll-behavior:auto!important;
  }
  .spinner{animation:none!important;}
  .hero-glow{animation:none!important;}
  /* Restore banner animations regardless of OS setting */
  .shimmer-text{
    animation: shimmerPass 4s ease-in-out infinite !important;
    animation-iteration-count: infinite !important;
  }
  .shimmer-text-gold{
    animation: shimmerPass 4s ease-in-out infinite !important;
    animation-iteration-count: infinite !important;
  }
  .shimmer-text-blue{
    animation: shimmerPass 4s ease-in-out infinite !important;
    animation-iteration-count: infinite !important;
  }
  .shimmer-text-purple{
    animation: shimmerPass 4s ease-in-out infinite !important;
    animation-iteration-count: infinite !important;
  }
  .shimmer-text-emerald{
    animation: shimmerPass 4s ease-in-out infinite !important;
    animation-iteration-count: infinite !important;
  }
  #steam-title {
    animation: steamShimmer 12s ease-in-out infinite !important;
    animation-iteration-count: infinite !important;
  }
  #stars-sky::before{
    animation: starsTwinkle 3s ease-in-out infinite alternate !important;
    animation-iteration-count: infinite !important;
  }
  #stars-sky::after{
    animation: starsTwinkle2 4s ease-in-out infinite alternate !important;
    animation-iteration-count: infinite !important;
  }
  .hero-home-mascot{
    animation: mascotFloat 3s ease-in-out infinite !important;
    animation-iteration-count: infinite !important;
  }
  #screen-catalog .hero-banner.hero-home{
    animation: heroBannerFadeIn 0.6s cubic-bezier(.25,.46,.45,.94) both !important;
  }
  /* Карточки паков — shimmer фон */
  body[data-theme="stars"] .stars-pack-item{
    animation: packShimmerBg 18s ease infinite !important;
    animation-iteration-count: infinite !important;
  }
  /* Золотые партиклы на фоне */
  body[data-theme="stars"] #stars-grid::after{
    animation: particleFloat1 20s ease-in-out infinite !important;
    animation-iteration-count: infinite !important;
  }
  /* Кнопка "К оплате" — бегущий блик */
  .recipient-pay-btn::after{
    animation: ctaBtnShimmer 3.5s ease-in-out infinite !important;
    animation-iteration-count: infinite !important;
  }
  /* Кнопка "Оплатить" — бегущий блик */
  .payment-pay-btn::after{
    animation: ctaBtnShimmer 3.5s ease-in-out infinite !important;
    animation-iteration-count: infinite !important;
  }
  /* Кнопка "Далее" Steam — бегущий блик */
  .steam-next-btn::after{
    animation: ctaBtnShimmer 3.5s ease-in-out infinite !important;
    animation-iteration-count: infinite !important;
  }
  /* Glow вокруг маскотов */
  .hero-mascot-wrap::before{
    animation: portalGlowPulse 2.8s ease-in-out infinite !important;
    animation-iteration-count: infinite !important;
  }
  .hero-mascot{
    animation: mascotGlowPulse 2.8s ease-in-out infinite !important;
    animation-iteration-count: infinite !important;
  }
  /* Drift-эффект фона экрана оплаты */
  #screen-payment::before{
    animation: paymentGoldDrift 10s ease-in-out infinite !important;
    animation-iteration-count: infinite !important;
  }
  /* Цена большого пака */
  .summary-total .value .price-shimmer{
    animation: shimmerPass 9s ease-in-out infinite !important;
    animation-iteration-count: infinite !important;
  }
  /* Золотой shimmer-text */
  .shimmer-text-gold{
    animation: shimmerPass 4s ease-in-out infinite !important;
    animation-iteration-count: infinite !important;
  }
  /* Splash screen — анимации должны работать всегда */
  .splash-mascot {
    animation: splashMascotIn .7s cubic-bezier(.34,1.56,.64,1) both,
               splashFloat 3.5s ease-in-out .7s infinite !important;
    animation-duration: .7s, 3.5s !important;
    animation-iteration-count: 1, infinite !important;
  }
  .splash-progress-bar {
    animation: splashProgressSweep 1.8s ease-in-out infinite !important;
    animation-duration: 1.8s !important;
    animation-iteration-count: infinite !important;
  }
  .splash-glow {
    animation: splashGlowPulse 2.8s ease-in-out infinite !important;
    animation-duration: 2.8s !important;
    animation-iteration-count: infinite !important;
  }
  .splash-bg-glow {
    animation: splashBgGlowPulse 4s ease-in-out infinite !important;
    animation-duration: 4s !important;
    animation-iteration-count: infinite !important;
  }
  .splash-brand, .splash-tagline {
    animation: splashFadeUp .5s ease both !important;
    animation-duration: .5s !important;
    animation-iteration-count: 1 !important;
  }
  #splash-screen {
    transition-duration: .5s !important;
  }
  /* Screen slide transitions — always active with full animation */
  .screen.screen-enter {
    animation: screenSlideIn .22s cubic-bezier(.25,.46,.45,.94) both !important;
    animation-duration: .22s !important;
    animation-iteration-count: 1 !important;
  }
  .screen.screen-back {
    animation: screenSlideBack .22s cubic-bezier(.25,.46,.45,.94) both !important;
    animation-duration: .22s !important;
    animation-iteration-count: 1 !important;
  }
  /* Skeleton loading shimmer — always animate */
  .skeleton {
    animation: skeletonShimmer 1.4s infinite !important;
    animation-duration: 1.4s !important;
    animation-iteration-count: infinite !important;
  }
  /* Product cards — restore press transition so :active scale is visible */
  .product-card {
    transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease !important;
  }
  body[data-theme="premium"] .product-card {
    transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease !important;
  }
  /* Premium 12-month featured shimmer — restore */
  body[data-theme="premium"] .product-card.premium-featured::after {
    animation: premiumFeaturedShimmer 13s ease-in-out infinite !important;
    animation-duration: 13s !important;
    animation-iteration-count: infinite !important;
  }
  /* Toast notifications — keep full animation */
  .toast {
    animation: toastIn .38s cubic-bezier(.34,1.56,.64,1) both !important;
  }
  .toast.toast-hiding {
    animation: toastOut .28s cubic-bezier(.4,0,1,1) forwards !important;
  }
  /* Maintenance overlay — restore float & glow */
  .maint-icon-img {
    animation: maintFloat 3.6s ease-in-out infinite !important;
    animation-duration: 3.6s !important;
    animation-iteration-count: infinite !important;
  }
  .maint-glow-ring {
    animation: maintGlowPulse 4s ease-in-out infinite !important;
    animation-duration: 4s !important;
    animation-iteration-count: infinite !important;
  }
  .maint-particle {
    animation: maintParticleDrift linear infinite !important;
    animation-iteration-count: infinite !important;
  }
}


/* =========================
   Portal Themes (Pilaxed)
   Each section gets its own accent + background, inspired by portal colors
   ========================= */

:root {
  --bg-base: #07101D;
  --panel-bg: rgba(15,26,43,.65);
  --panel-border: rgba(255,255,255,.08);
  --pixel-shadow: 0 10px 30px rgba(0,0,0,.35);
  --scanline: rgba(255,255,255,.04);
}

/* Default (home / neutral) */
body {
  background-color: transparent;
}
/* Stars theme: disable grain overlay — mix-blend-mode:overlay + white dots = lightening on iOS redraw */
body[data-theme="stars"]::before {
  display: none !important;
}

/* Background gradient layer — real DOM element */
#bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(61,235,255,.18), transparent 60%),
    radial-gradient(900px 500px at 90%   0%, rgba(246,196,83,.12), transparent 55%),
    radial-gradient(900px 700px at 50% 100%, rgba(37,99,235,.14),  transparent 55%);
  transition: background 0.4s ease;
}
body[data-theme="stars"] #bg-layer {
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(255,198,77,.13), transparent 70%),
    radial-gradient(800px 600px at 95%   0%, rgba(255,138,0,.10),  transparent 65%),
    radial-gradient(700px 500px at 50%  55%, rgba(255,198,77,.03), transparent 70%),
    radial-gradient(1000px 750px at 50% 110%, rgba(61,235,255,.07), transparent 60%);
}
body[data-theme="premium"] #bg-layer {
  background:
    radial-gradient(ellipse 85% 55% at 15% -10%, rgba(183,116,255,.18), transparent 68%),
    radial-gradient(800px 550px at 95%   0%, rgba(255,79,216,.12),  transparent 65%),
    radial-gradient(1000px 750px at 50% 110%, rgba(61,235,255,.06), transparent 60%);
}
body[data-theme="gifts"] #bg-layer {
  background:
    radial-gradient(ellipse 80% 50% at 50% 45%, rgba(13,80,55,.45) 0%, transparent 65%),
    radial-gradient(900px 520px at 15% -10%, rgba(45,255,160,.14), transparent 58%),
    radial-gradient(700px 420px at 90%   5%, rgba(0,229,255,.09),  transparent 55%),
    radial-gradient(1000px 600px at 50% 110%, rgba(45,200,120,.12), transparent 60%),
    linear-gradient(180deg, #040B09 0%, #071412 45%, #0B1F1A 100%);
}
body[data-theme="steam"] #bg-layer {
  background:
    radial-gradient(ellipse 85% 55% at 15% -10%, rgba(74,182,255,.18),  transparent 68%),
    radial-gradient(800px 550px at 95%   0%, rgba(102,255,227,.10), transparent 65%),
    radial-gradient(1000px 750px at 50% 110%, rgba(183,116,255,.06), transparent 60%);
}

/* Звёздное небо — мерцающие точки */
@keyframes starsTwinkle {
  0%   { opacity: .15; transform: scale(1);    }
  20%  { opacity: .90; transform: scale(1.3);  }
  40%  { opacity: .25; transform: scale(1);    }
  60%  { opacity: .70; transform: scale(1.15); }
  80%  { opacity: .10; transform: scale(1);    }
  100% { opacity: .50; transform: scale(1.2);  }
}
@keyframes starsTwinkle2 {
  0%   { opacity: .60; transform: scale(1);    }
  25%  { opacity: .10; transform: scale(0.85); }
  50%  { opacity: .85; transform: scale(1.25); }
  75%  { opacity: .20; transform: scale(1);    }
  100% { opacity: .55; transform: scale(1.1);  }
}
@keyframes starsTwinkle3 {
  0%   { opacity: .05; transform: scale(1);    }
  30%  { opacity: .60; transform: scale(1.4);  }
  60%  { opacity: .08; transform: scale(1);    }
  100% { opacity: .45; transform: scale(1.2);  }
}
#stars-sky {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: none;
}
body[data-theme="stars"] #stars-sky {
  display: block;
}
#stars-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at  8%  12%, rgba(255,220,100,1), transparent),
    radial-gradient(1px   1px   at 22%   5%, rgba(255,240,180,1), transparent),
    radial-gradient(1px   1px   at 37%  28%, rgba(255,255,255,1), transparent),
    radial-gradient(1.5px 1.5px at 55%   8%, rgba(255,210,80,1),  transparent),
    radial-gradient(1px   1px   at 68%  19%, rgba(255,240,160,1), transparent),
    radial-gradient(1px   1px   at 82%   4%, rgba(255,255,230,1), transparent),
    radial-gradient(1px   1px   at 91%  33%, rgba(255,230,140,1), transparent),
    radial-gradient(1.5px 1.5px at 14%  42%, rgba(255,245,180,1), transparent),
    radial-gradient(1px   1px   at  3%  67%, rgba(255,230,130,1), transparent),
    radial-gradient(1px   1px   at 30%  72%, rgba(255,240,170,1), transparent),
    radial-gradient(1px   1px   at 85%  62%, rgba(255,220,120,1), transparent),
    radial-gradient(1px   1px   at 50%  93%, rgba(255,250,210,1), transparent),
    radial-gradient(1px   1px   at 77%  85%, rgba(255,230,150,1), transparent),
    radial-gradient(1.5px 1.5px at 95%  90%, rgba(255,210,90,1),  transparent),
    radial-gradient(1px   1px   at 42%  50%, rgba(255,255,220,1), transparent),
    radial-gradient(1px   1px   at 63%  35%, rgba(255,240,160,1), transparent),
    radial-gradient(1px   1px   at 25%  55%, rgba(255,220,130,1), transparent),
    radial-gradient(1px   1px   at 78%  22%, rgba(255,245,190,1), transparent);
  animation: starsTwinkle 4s ease-in-out infinite alternate;
  animation-delay: 0s;
}
#stars-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px   1px   at 46%  15%, rgba(255,255,240,1), transparent),
    radial-gradient(1.5px 1.5px at 73%  48%, rgba(255,215,80,1),  transparent),
    radial-gradient(1px   1px   at 60%  78%, rgba(255,240,180,1), transparent),
    radial-gradient(1px   1px   at 18%  88%, rgba(255,255,230,1), transparent),
    radial-gradient(1px   1px   at 40%  60%, rgba(255,230,140,1), transparent),
    radial-gradient(1.5px 1.5px at 10%  50%, rgba(255,220,100,1), transparent),
    radial-gradient(1px   1px   at 88%  75%, rgba(255,210,90,1),  transparent),
    radial-gradient(1px   1px   at 33%  20%, rgba(255,245,200,1), transparent),
    radial-gradient(1px   1px   at 52%  42%, rgba(255,235,155,1), transparent),
    radial-gradient(1px   1px   at 97%  55%, rgba(255,250,210,1), transparent),
    radial-gradient(1px   1px   at 16%  75%, rgba(255,225,120,1), transparent);
  animation: starsTwinkle2 5.5s ease-in-out infinite alternate;
  animation-delay: -2s;
}

/* Улучшенные кнопки выбора Stars */
body[data-theme="stars"] .stars-choice-btn {
  background: linear-gradient(135deg,
    rgba(255,198,77,.08) 0%,
    rgba(10,18,34,.70) 50%,
    rgba(255,138,0,.05) 100%);
  border: 1px solid rgba(255,198,77,.22);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow:
    0 4px 20px rgba(0,0,0,.25),
    0 0 0 1px rgba(255,198,77,.06) inset;
  transition: all .22s cubic-bezier(.25,.46,.45,.94);
  position: relative;
  overflow: hidden;
}
body[data-theme="stars"] .stars-choice-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(255,198,77,.10) 0%, transparent 65%);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}
body[data-theme="stars"] .stars-choice-btn:hover::before { opacity: 1; }
body[data-theme="stars"] .stars-choice-btn:hover {
  border-color: rgba(255,198,77,.45);
  box-shadow: 0 6px 28px rgba(255,198,77,.15), 0 0 0 1px rgba(255,198,77,.18) inset;
  transform: translateY(-1px);
}
body[data-theme="stars"] .stars-choice-btn:active {
  transform: scale(.98);
}
body[data-theme="stars"] .stars-choice-title {
  font-size: 16px;
  font-weight: 700;
  color: #ffe5a0;
}
body[data-theme="stars"] .stars-choice-desc {
  font-size: 12px;
  color: rgba(255,210,120,.60);
  margin-top: 3px;
}
body[data-theme="stars"] .stars-choice-arrow {
  color: #FFC64D;
  opacity: .70;
  font-size: 24px;
}
body[data-theme="stars"] .stars-choice-icon-img {
  filter: drop-shadow(0 4px 12px rgba(255,198,77,.40));
}

html[data-theme="premium"]::before {
  background:
    radial-gradient(900px 520px at 15% -10%, rgba(183,116,255,.24), transparent 62%),
    radial-gradient(700px 520px at 95%   0%, rgba(255,79,216,.16),  transparent 60%),
    radial-gradient(900px 720px at 50% 110%, rgba(61,235,255,.08), transparent 55%);
}
html[data-theme="gifts"]::before {
  background:
    radial-gradient(ellipse 80% 50% at 50% 45%, rgba(13,80,55,.45) 0%, transparent 65%),
    radial-gradient(900px 520px at 15% -10%, rgba(45,255,160,.14), transparent 58%),
    radial-gradient(700px 420px at 90%   5%, rgba(0,229,255,.09),  transparent 55%),
    radial-gradient(1000px 600px at 50% 110%, rgba(45,200,120,.12), transparent 60%),
    linear-gradient(180deg, #040B09 0%, #071412 45%, #0B1F1A 100%);
}
html[data-theme="steam"]::before {
  background:
    radial-gradient(900px 520px at 15% -10%, rgba(74,182,255,.24),  transparent 62%),
    radial-gradient(700px 520px at 95%   0%, rgba(102,255,227,.14), transparent 60%),
    radial-gradient(900px 720px at 50% 110%, rgba(183,116,255,.08), transparent 55%);
}

/* Theme mapping via <body data-theme="..."> */
body[data-theme="stars"] {
  --accent: #FFC64D;
  --accent-text: #1A0F00;
  --accent-soft: rgba(255,198,77,.12);
  --accent-border: rgba(255,198,77,.28);
  --accent-glow: rgba(255,198,77,.42);
  --accent2: #FF8A00;
  --accent2-soft: rgba(255,138,0,.10);
  --accent2-border: rgba(255,138,0,.22);
}

body[data-theme="premium"] {
  --accent: #B774FF;
  --accent-text: #0E0616;
  --accent-soft: rgba(183,116,255,.12);
  --accent-border: rgba(183,116,255,.28);
  --accent-glow: rgba(183,116,255,.42);
  --accent2: #FF4FD8;
  --accent2-soft: rgba(255,79,216,.10);
  --accent2-border: rgba(255,79,216,.22);
}

body[data-theme="gifts"] {
  --accent: #2DFFC4;
  --accent-text: #021A10;
  --accent-soft: rgba(45,255,196,.12);
  --accent-border: rgba(45,255,196,.28);
  --accent-glow: rgba(45,255,196,.42);
  --accent2: #00E5FF;
  --accent2-soft: rgba(0,229,255,.10);
  --accent2-border: rgba(0,229,255,.22);
}

body[data-theme="steam"] {
  --accent: #4AB6FF;
  --accent-text: #041018;
  --accent-soft: rgba(74,182,255,.12);
  --accent-border: rgba(74,182,255,.28);
  --accent-glow: rgba(74,182,255,.42);
  --accent2: #66FFE3;
  --accent2-soft: rgba(102,255,227,.10);
  --accent2-border: rgba(102,255,227,.22);
}

/* Pixel / portal look tweaks (non-invasive) */
.pixel-title {
  text-transform: uppercase;
  letter-spacing: .08em;
  text-shadow:
    0 0 0 rgba(0,0,0,.0),
    0 2px 0 rgba(0,0,0,.35),
    0 0 18px var(--accent-glow),
    0 0 34px rgba(255,255,255,.10);
}

.cat-card {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(15,26,43,.68);
  box-shadow: var(--pixel-shadow);
}

.cat-card::after {
  content:'';
  position:absolute;
  inset:-2px;
  border-radius: var(--radius-lg);
  pointer-events:none;
  background: radial-gradient(60% 80% at 50% 30%, var(--accent-soft), transparent 65%);
  opacity:.0;
  transition: opacity .22s ease;
}

.cat-card:hover::after { opacity: 1; }

#cat-stars { --cat-accent: #FFC64D; }
#cat-premium { --cat-accent: #B774FF; }
#cat-gifts { --cat-accent: #34d399; }
#cat-steam { --cat-accent: #4AB6FF; }

#cat-stars::before { opacity:1; background: linear-gradient(135deg, rgba(255,198,77,.22) 0%, rgba(255,138,0,.10) 45%, transparent 72%); }
#cat-premium::before { opacity:1; background: linear-gradient(135deg, rgba(183,116,255,.22) 0%, rgba(255,79,216,.10) 45%, transparent 72%); }
#cat-gifts::before { opacity:1; background: linear-gradient(135deg, rgba(52,211,120,.20) 0%, rgba(0,229,150,.10) 45%, transparent 72%); }
#cat-steam::before { opacity:1; background: linear-gradient(135deg, rgba(74,182,255,.22) 0%, rgba(102,255,227,.10) 45%, transparent 72%); }

/* Primary buttons pop more in themed screens */
button, .btn, .pay-btn, .quick-btn {
  outline-color: var(--accent);
}

.primary, .btn-primary, .pay-btn.primary {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent-border);
  box-shadow: 0 10px 24px rgba(0,0,0,.22), 0 0 0 2px var(--accent-border), 0 0 18px var(--accent-glow);
}

.primary:active, .btn-primary:active, .pay-btn.primary:active {
  transform: scale(.98);
}

/* Subtle scanlines on hero to match pixel vibe */
.hero-banner {
  position: relative;
}

.hero-banner::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.00) 0px,
    rgba(255,255,255,.00) 3px,
    var(--scanline) 4px
  );
  opacity:.25;
  mix-blend-mode: overlay;
  border-radius: inherit;
}


/* =========================================================
   Luxury Redesign Overrides (UI only — no business logic)
   Goal: premium look, glass surfaces, refined buttons
   ========================================================= */

:root{
  /* Typography */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Inter, system-ui, sans-serif;

  /* Surfaces (glass) */
  --lux-text: rgba(234,240,255,.96);
  --lux-hint: rgba(234,240,255,.62);
  --lux-muted: rgba(234,240,255,.42);

  --lux-surface-0: rgba(255,255,255,.04);
  --lux-surface-1: rgba(255,255,255,.06);
  --lux-surface-2: rgba(255,255,255,.08);

  --lux-border: rgba(255,255,255,.10);
  --lux-border-strong: rgba(255,255,255,.16);

  --lux-shadow: 0 18px 40px rgba(0,0,0,.38), 0 10px 18px rgba(0,0,0,.22);
  --lux-shadow-soft: 0 10px 22px rgba(0,0,0,.26), 0 3px 10px rgba(0,0,0,.18);
  --lux-inset: inset 0 1px 0 rgba(255,255,255,.10);
}

html, body{
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
}

body{
  /* Force a consistent premium palette even if Telegram theme vars are unset */
  --tg-theme-text-color: var(--lux-text);
  --tg-theme-hint-color: var(--lux-hint);
  --text-secondary: var(--lux-hint);

  --tg-theme-secondary-bg-color: var(--lux-surface-1);
  --tg-theme-section-bg-color: var(--lux-surface-0);
  --tg-theme-header-bg-color: rgba(10,14,22,.65);
  --border-color: var(--lux-border);

  color: var(--tg-theme-text-color);
  /* background intentionally NOT set here — let body[data-theme] and html::before handle it */
}

/* Subtle grain for a “more expensive” finish */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .08;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.35) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.25) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,.20) 0 1px, transparent 2px);
  background-size: 180px 180px, 220px 220px, 260px 260px;
  mix-blend-mode: overlay;
  z-index: 0;
}
.header, .header-row{ position: relative; z-index: 1; }

/* Improve overall spacing rhythm */
/* .screen padding переопределяется в .screen.active — не трогаем */

/* Header icons — glass + gradient border */
.header-icon{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(61,235,255,.18), rgba(246,196,83,.14)) border-box;
  border: 1px solid transparent;
  box-shadow: var(--lux-shadow-soft), var(--lux-inset);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.header-icon:hover{
  transform: translateY(-1px);
  box-shadow: var(--lux-shadow), var(--lux-inset);
}
.header-icon:active{
  transform: translateY(0) scale(.97);
}

/* Hero — more depth, less "gamey", keep vibe */
.hero-banner.hero-v1{
  background:
    radial-gradient(ellipse 60% 80% at 50% 40%, rgba(255,255,255,.055), transparent 70%),
    radial-gradient(700px 420px at 10% 20%, rgba(61,235,255,.18), transparent 60%),
    radial-gradient(680px 420px at 90% 10%, rgba(246,196,83,.12), transparent 60%),
    rgba(255,255,255,.04);
  border: 1px solid rgba(61,235,255,.22);
  box-shadow:
    var(--lux-shadow),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 1px 0 rgba(255,255,255,.08) inset;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.hero-banner.hero-v1 .pixel-title{
  font-size: clamp(18px, 5.5vw, 26px);
  line-height: 1.08;
}
.hero-title{
  letter-spacing: -0.04em;
}
.hero-banner.hero-v1 .hero-subtitle{
  color: var(--lux-hint);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 8px;
  opacity: .70;
}
.hero-subtitle{
  color: var(--lux-hint);
}

/* Pills — clean chips */
.pill{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Cards — “glass card” style everywhere */
.cat-card,
.product-card,
.custom-input-row,
.profile-card,
.support-card,
.order-card,
.review-card,
.faq-item,
.guarantee-card,
.how-step,
.modal-content,
.sheet,
.toast,
.admin-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(61,235,255,.14), rgba(246,196,83,.10)) border-box;
  border: 1px solid transparent;
  box-shadow: var(--lux-shadow-soft), var(--lux-inset);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.cat-card:hover,
.product-card:hover,
.support-card:hover{
  transform: translateY(-1px);
  box-shadow: var(--lux-shadow), var(--lux-inset);
}
.order-card:hover{
  box-shadow: var(--lux-shadow-soft), var(--lux-inset);
}
/* Disable backdrop-filter on order cards — causes compositing glitch on neighbours */
.order-card{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.cat-card:active,
.product-card:active,
.support-card:active,
.order-card:active{
  transform: scale(.985);
  opacity: .92;
}

/* Product selection — tighter highlight */
.product-card.selected{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) padding-box,
    linear-gradient(135deg, var(--accent-border), rgba(255,255,255,.18)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 22px var(--accent-glow), var(--lux-shadow-soft);
}

/* Inputs — softer inner + better focus */
.custom-input-row{
  box-shadow: var(--lux-shadow-soft), var(--lux-inset);
}
.custom-input-row:focus-within{
  box-shadow: 0 0 0 2px rgba(255,255,255,.06), 0 0 22px var(--accent-glow), var(--lux-shadow-soft);
}
body[data-theme="stars"] .custom-input-row:focus-within {
  background: #0A1220 !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,198,77,.08) !important;
  border-color: rgba(255,198,77,.35) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Buttons — premium gradient + highlight */
.primary, .btn-primary, .pay-btn.primary, .custom-input-row .btn-go{
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.10)) border-box,
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(0,0,0,0)) padding-box;
  background-color: var(--accent);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 34px rgba(0,0,0,.28), 0 0 0 2px var(--accent-border), 0 0 22px var(--accent-glow);
}
.primary:hover, .btn-primary:hover, .pay-btn.primary:hover, .custom-input-row .btn-go:hover{
  transform: translateY(-1px);
  box-shadow: 0 24px 44px rgba(0,0,0,.34), 0 0 0 2px var(--accent-border), 0 0 26px var(--accent-glow);
}
.primary:active, .btn-primary:active, .pay-btn.primary:active, .custom-input-row .btn-go:active{
  transform: translateY(0) scale(.98);
  opacity: .95;
}

/* Secondary / ghost buttons (common pattern in markup) */
.secondary, .btn-secondary, .ghost, .btn-ghost, .pay-btn{
  background: rgba(255,255,255,.06);
  color: var(--tg-theme-text-color);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--lux-shadow-soft), var(--lux-inset);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.secondary:hover, .btn-secondary:hover, .ghost:hover, .btn-ghost:hover, .pay-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.16);
  box-shadow: var(--lux-shadow), var(--lux-inset);
}
.secondary:active, .btn-secondary:active, .ghost:active, .btn-ghost:active, .pay-btn:active{
  transform: translateY(0) scale(.98);
}

/* Lists & text */
.section-title{ letter-spacing: .12em; opacity: .92; }
.section-hint{ color: var(--lux-muted); }

/* Make small labels more “editorial” */
.badge, .pill, .tag{
  letter-spacing: .01em;
}

/* Scrollbar (WebView may ignore, but harmless) */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.20);
}
*::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); }


/* ===== Press Start 2P pixel font on banners ===== */

.pixel-title {
  font-family: 'Press Start 2P', monospace !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: .02em;
  word-spacing: -0.4em; /* Press Start 2P имеет очень широкий пробел (~1em), компенсируем */
  white-space: nowrap;
}

/* Главная — синий неон (все pixel-title кроме hero-home) */
#screen-catalog .pixel-title {
  font-size: 13px !important;
  background: linear-gradient(135deg, #60C8FF 0%, #3DEBFF 50%, #2563EB 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter:
    drop-shadow(0 0 6px rgba(61,235,255,.70))
    drop-shadow(0 0 18px rgba(37,99,235,.50));
}

/* Hero-home title — solid cyan + shimmer via ::after */
#screen-catalog .hero-banner.hero-home .hero-home-line1.pixel-title {
  font-size: 13px !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: #3DEBFF !important;
  text-shadow: none !important;
  text-transform: none !important;
  letter-spacing: .04em !important;
  filter:
    drop-shadow(0 0 6px rgba(61,235,255,.70))
    drop-shadow(0 0 18px rgba(37,99,235,.50));
  animation: none !important;
}

/* Stars — фон очищен, glow на shimmer-span (единый паттерн для всех баннеров) */
#screen-stars .pixel-title {
  font-size: 10px !important;
  white-space: nowrap;
  text-transform: none !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: transparent;
  text-shadow: none;
  filter: none !important;
  -webkit-font-smoothing: none !important;
  font-smooth: never !important;
}
#screen-stars .pixel-title .shimmer-text-gold {
  filter:
    drop-shadow(0 0 3px rgba(255,198,77,.90))
    drop-shadow(0 0 8px rgba(255,138,0,.50));
}

/* ===== Stars screen tweaks ===== */
#screen-stars .hero-mascot {
  width: auto !important;
  height: clamp(96px, 22vw, 140px) !important;
  image-rendering: auto !important;
  transform: translateX(20px) translateY(1px);
  filter:
    drop-shadow(0 10px 22px rgba(0,0,0,.45))
    drop-shadow(0 0 18px rgba(255,198,77,.45));
  animation: none !important;
}
#screen-stars .hero-mascot-wrap::before {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 55%),
    radial-gradient(circle at 50% 55%, rgba(255,198,77,.22), transparent 62%);
  animation: none !important;
}

/* Золотой shimmer на тексте баннера Stars */
.shimmer-text-gold {
  display: inline;
  background: linear-gradient(
    90deg,
    #FFC64D 0%,
    #FFC64D 30%,
    #fff8e0 50%,
    #FFC64D 70%,
    #FFC64D 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  will-change: background-position;
  animation: shimmerPass 4s ease-in-out infinite;
}

/* Золотая рамка и глубина баннера Stars */
#screen-stars .hero-banner.hero-v1 {
  margin-bottom: -5px;
  border-color: rgba(255,198,77,.30);
  box-shadow:
    var(--lux-shadow),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 1px 0 rgba(255,198,77,.14) inset;
  background:
    radial-gradient(ellipse 60% 80% at 50% 40%, rgba(255,198,77,.06), transparent 70%),
    radial-gradient(700px 420px at 10% 20%, rgba(255,198,77,.14), transparent 60%),
    radial-gradient(680px 420px at 90% 10%, rgba(255,138,0,.10), transparent 60%),
    rgba(255,255,255,.04);
  /* backdrop-filter отключён — он создаёт compositing layer, внутри которого текст теряет чёткость */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Subtitle баннера Stars — теплее и ярче */
#screen-stars .hero-subtitle {
  opacity: .85;
  color: rgba(255,224,140,.85);
}

/* Choice-кнопки с золотым акцентом */
body[data-theme="stars"] .stars-choice-btn {
  background: linear-gradient(135deg, rgba(255,198,77,.10), rgba(15,26,43,.55));
  border-color: rgba(255,198,77,.20);
}
body[data-theme="stars"] .stars-choice-btn:hover {
  border-color: rgba(255,198,77,.45);
  box-shadow: 0 4px 20px rgba(255,198,77,.15);
}
body[data-theme="stars"] .stars-choice-arrow {
  color: #FFC64D;
  opacity: .80;
}
body[data-theme="stars"] .stars-choice-icon {
  font-size: 40px;
}

/* ── Stars pack list improvements ── */

/* Виньетка по бокам — фокусирует взгляд на списке */
body[data-theme="stars"] .stars-pack-list {
  position: relative;
}
body[data-theme="stars"] .stars-pack-list::before,
body[data-theme="stars"] .stars-pack-list::after {
  display: none;
}

/* Карточка — золотой акцент + HUD-блик */
body[data-theme="stars"] .stars-pack-item {
  /* Глубокий navy слева → тёплый золотисто-синий справа */
  background: linear-gradient(
    105deg,
    rgba(7,16,32,.97) 0%,
    rgba(18,28,52,.92) 50%,
    rgba(30,22,10,.88) 100%
  );
  border-color: rgba(255,198,77,.22);
  /* Тёплый outer glow */
  box-shadow:
    0 0 0 1px rgba(255,198,77,.06),
    0 4px 18px rgba(0,0,0,.38),
    0 0 14px rgba(255,198,77,.06);
  position: relative;
  overflow: hidden;
  transition: transform .15s cubic-bezier(.25,.46,.45,.94),
              border-color .15s ease,
              box-shadow .15s ease;
}
/* HUD-блик сверху слева */
body[data-theme="stars"] .stars-pack-item::before {
  content: '';
  position: absolute;
  top: -30%; left: -20%;
  width: 60%; height: 80%;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.055) 0%,
    transparent 60%
  );
  pointer-events: none;
  border-radius: 50%;
}
/* Radial gold highlight в зоне цены (справа) */
body[data-theme="stars"] .stars-pack-item::after {
  content: '';
  position: absolute;
  right: -10px; top: 50%;
  transform: translateY(-50%);
  width: 80px; height: 60px;
  background: radial-gradient(ellipse at center, rgba(255,198,77,.07) 0%, transparent 70%);
  pointer-events: none;
}
/* Tap/press — живая реакция */
body[data-theme="stars"] .stars-pack-item:active {
  transform: scale(.985);
  border-color: rgba(255,198,77,.70) !important;
  box-shadow:
    0 0 0 1px rgba(255,198,77,.20),
    inset 0 0 18px rgba(255,198,77,.08),
    0 2px 10px rgba(255,198,77,.20) !important;
}
body[data-theme="stars"] .stars-pack-item:hover {
  border-color: rgba(255,198,77,.42);
  box-shadow:
    0 0 0 1px rgba(255,198,77,.10),
    0 4px 24px rgba(255,198,77,.14),
    0 0 18px rgba(255,198,77,.08);
}
/* Пульсирующая полоска при loading */
@keyframes packLoading {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
body[data-theme="stars"] .stars-pack-item.loading::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 40%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,198,77,.70), transparent);
  animation: packLoading 1.2s ease-in-out infinite;
}

body[data-theme="stars"] .stars-pack-icon {
  font-size: 32px;
}

/* Цена — динамический glow по tier пака */
body[data-theme="stars"] .stars-pack-price {
  letter-spacing: .02em;
}
body[data-theme="stars"] .stars-pack-item[data-tier="sm"] .stars-pack-price {
  filter: drop-shadow(0 0 3px rgba(255,198,77,.30));
}
body[data-theme="stars"] .stars-pack-item[data-tier="md"] .stars-pack-price {
  filter: drop-shadow(0 0 6px rgba(255,198,77,.52)) drop-shadow(0 0 2px rgba(255,198,77,.30));
}
body[data-theme="stars"] .stars-pack-item[data-tier="lg"] .stars-pack-price {
  filter: drop-shadow(0 0 9px rgba(255,198,77,.75)) drop-shadow(0 0 3px rgba(255,198,77,.50));
}
body[data-theme="stars"] .stars-pack-name {
  font-size: 16px;
}

/* ── Stars pack group headers ── */
.stars-pack-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 2px 8px;
  grid-column: 1 / -1;
}
.stars-pack-group-header:first-child {
  margin-top: 4px;
}
.stars-pack-group-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: rgba(255,198,77,.55);
  white-space: nowrap;
  flex-shrink: 0;
}
.stars-pack-group-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,198,77,.20) 0%, transparent 100%);
}
body.theme-light .stars-pack-group-label { color: rgba(180,130,0,.60); }
body.theme-light .stars-pack-group-line  { background: linear-gradient(90deg, rgba(180,130,0,.20) 0%, transparent 100%); }

/* ── Popular badge ── */
.stars-pack-badge {
  position: absolute;
  top: -1px;
  right: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #07101D;
  background: linear-gradient(90deg, #FFC64D, #FFD97A);
  padding: 2px 8px;
  border-radius: 0 0 6px 6px;
  line-height: 1.6;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(255,198,77,.35);
}

/* Popular пак — чуть ярче */
.stars-pack-item--popular {
  border-color: rgba(255,198,77,.38) !important;
  box-shadow:
    0 0 0 1px rgba(255,198,77,.12),
    0 4px 22px rgba(255,198,77,.14),
    0 0 18px rgba(255,198,77,.08) !important;
}
.stars-pack-item--popular .stars-pack-name {
  color: #ffe5a0;
}
body.theme-light .stars-pack-badge {
  color: #3d2800;
}
body.theme-light .stars-pack-item--popular {
  border-color: rgba(200,150,0,.35) !important;
  box-shadow: 0 2px 12px rgba(200,150,0,.12) !important;
}

/* Микро-анимация фона карточки — медленный перелив */
@keyframes packShimmerBg {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
body:not(.theme-light)[data-theme="stars"] .stars-pack-item {
  background-size: 200% 200%;
  will-change: background-position;
  animation: packShimmerBg 18s ease infinite;
}

/* Золотой туман + партиклы */
body[data-theme="stars"] .stars-pack-list {
  position: relative;
}
body[data-theme="stars"] #stars-grid {
  position: relative;
}
/* Мягкий radial glow по центру */
body[data-theme="stars"] #stars-grid::before {
  content: '';
  position: absolute;
  left: 50%; top: 40%;
  transform: translate(-50%, -50%);
  width: 320px; height: 320px;
  background: radial-gradient(ellipse at center, rgba(255,198,77,.045) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
/* Золотые партиклы — плавающие точки */
@keyframes particleFloat1 {
  0%   { transform: translateY(0px)   translateX(0px);   opacity: .018; }
  33%  { transform: translateY(-18px) translateX(6px);   opacity: .035; }
  66%  { transform: translateY(-8px)  translateX(-4px);  opacity: .012; }
  100% { transform: translateY(0px)   translateX(0px);   opacity: .018; }
}
@keyframes particleFloat2 {
  0%   { transform: translateY(0px)   translateX(0px);   opacity: .022; }
  50%  { transform: translateY(-24px) translateX(-8px);  opacity: .040; }
  100% { transform: translateY(0px)   translateX(0px);   opacity: .022; }
}
body[data-theme="stars"] #stars-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 15% 30%, rgba(255,198,77,1), transparent),
    radial-gradient(1.5px 1.5px at 72% 18%, rgba(255,220,120,1), transparent),
    radial-gradient(2px 2px at 45% 65%, rgba(255,198,77,1), transparent),
    radial-gradient(1px 1px at 85% 50%, rgba(255,240,160,1), transparent),
    radial-gradient(2px 2px at 28% 80%, rgba(255,198,77,1), transparent),
    radial-gradient(1.5px 1.5px at 60% 40%, rgba(255,220,100,1), transparent);
  opacity: .022;
  pointer-events: none;
  z-index: 0;
  animation: particleFloat1 20s ease-in-out infinite;
}

/* ── Global bg fix — prevent white/light backgrounds leaking ── */
/* Dark theme default: применяется только в тёмной теме */
body:not(.theme-light) {
  --tg-theme-bg-color: #0D1829;
}
/* Any element using tg-theme-bg-color as background stays dark */
.admin-global-save,
.admin-global-save *,
[style*="background:var(--tg-theme-bg-color)"],
[style*="background: var(--tg-theme-bg-color)"] {
  --tg-theme-bg-color: #0D1829;
}
/* Fix all inputs/textareas — no white backgrounds (dark theme only) */
body:not(.theme-light) input,
body:not(.theme-light) textarea,
body:not(.theme-light) select {
  background-color: rgba(13,24,41,.80) !important;
  color: var(--tg-theme-text-color) !important;
  -webkit-appearance: none;
  appearance: none;
}
/* Light theme inputs — нейтральный фон */
body.theme-light input,
body.theme-light textarea,
body.theme-light select {
  background-color: rgba(0,0,0,.06) !important;
  color: var(--tg-theme-text-color) !important;
  -webkit-appearance: none;
  appearance: none;
}
/* Hide number input spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}
/* But keep transparent ones that use gradient backgrounds */
.custom-input-row input,
.recipient-input input,
.review-textarea,
.chat-input-bar textarea,
.admin-price-row input,
.admin-setting-item input,
.admin-setting-item textarea {
  background: rgba(255,255,255,.05) !important;
  color: var(--tg-theme-text-color) !important;
}
/* Light theme: chat textarea — нейтральный видимый фон */
body.theme-light .chat-input-bar textarea {
  background: rgba(0,0,0,.06) !important;
}
/* Stars theme: keep input fully transparent so iOS WebKit has nothing to lighten on focus */
body[data-theme="stars"] .custom-input-row input,
body[data-theme="stars"] .custom-input-row:focus-within input {
  background: transparent !important;
  background-color: transparent !important;
}
/* Kill iOS autofill / focus background on the stars input */
body[data-theme="stars"] .custom-input-row input:-webkit-autofill,
body[data-theme="stars"] .custom-input-row input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 999px rgba(10,18,32,.95) !important;
  box-shadow: inset 0 0 0 999px rgba(10,18,32,.95) !important;
  -webkit-text-fill-color: rgba(255,235,180,.92) !important;
  background-color: transparent !important;
  transition: background-color 99999s ease-in-out 0s;
}
/* Kill autofill white-flash on Steam login input (dark theme) */
body[data-theme="steam"] #steam-login-input:-webkit-autofill,
body[data-theme="steam"] #steam-login-input:-webkit-autofill:hover,
body[data-theme="steam"] #steam-login-input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 999px rgba(6,20,42,.90) !important;
  box-shadow: inset 0 0 0 999px rgba(6,20,42,.90) !important;
  -webkit-text-fill-color: rgba(220,240,255,.92) !important;
  transition: background-color 99999s ease-in-out 0s;
}
/* Kill autofill white-flash on Steam login input (light theme) */
body.theme-light[data-theme="steam"] #steam-login-input:-webkit-autofill,
body.theme-light[data-theme="steam"] #steam-login-input:-webkit-autofill:hover,
body.theme-light[data-theme="steam"] #steam-login-input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 999px #edf4ff !important;
  box-shadow: inset 0 0 0 999px #edf4ff !important;
  -webkit-text-fill-color: #0a1a4a !important;
  transition: background-color 99999s ease-in-out 0s;
}
/* Generic fallback — all inputs in the app keep dark bg on autofill */
#steam-login-input:-webkit-autofill,
#steam-login-input:-webkit-autofill:hover,
#steam-login-input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 999px #0d1b2e !important;
  box-shadow: inset 0 0 0 999px #0d1b2e !important;
  -webkit-text-fill-color: rgba(255,255,255,.88) !important;
  transition: background-color 99999s ease-in-out 0s;
}
/* Subscription section-disabled modal — dark theme */
body[data-theme] .subscription-modal {
  background: rgba(10,20,40,.98) !important;
}

/* ═══════════════════════════════════════════════
   STEAM SCREEN — VISUAL ENHANCEMENTS  (v51)
   ═══════════════════════════════════════════════ */

/* 1. HEADER */
body[data-theme="steam"] #steam-title {
  font-family: 'Press Start 2P', monospace;
  font-size: .88rem;
  text-align: center;
  line-height: 1.6;
  letter-spacing: .02em;
  filter: drop-shadow(0 0 6px rgba(74,182,255,.18));
  /* Shimmer gradient */
  background: linear-gradient(
    100deg,
    #5ab8ff 0%,
    #5ab8ff 32%,
    #b8deff 45%,
    #c0dcf5 50%,
    #b8deff 55%,
    #5ab8ff 68%,
    #5ab8ff 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: steamShimmer 12s ease-in-out infinite;
}
@keyframes steamShimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* 2. SECTION LABELS — reduced contrast, tight letter-spacing */
body[data-theme="steam"] .section-title {
  color: rgba(150,205,255,.58);
  font-size: .67rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding-bottom: 6px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(74,182,255,.12);
}

/* 3. LOGIN INPUT — true glass: inset top highlight, blue-tinted border */
body[data-theme="steam"] .recipient-input input {
  background: rgba(6,20,42,.68) !important;
  border: 1px solid rgba(80,170,255,.28) !important;
  border-radius: 12px !important;
  color: rgba(220,240,255,.92) !important;
  caret-color: #4AB6FF;
  box-shadow: inset 0 1px 0 rgba(140,210,255,.08) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
body[data-theme="steam"] .recipient-input input::placeholder {
  color: rgba(100,160,220,.32) !important;
}
body[data-theme="steam"] .recipient-input input:focus {
  border-color: rgba(74,182,255,.65) !important;
  box-shadow:
    0 0 0 3px rgba(74,182,255,.13),
    inset 0 1px 0 rgba(140,210,255,.15) !important;
  outline: none !important;
}
body[data-theme="premium"] .recipient-input input:focus {
  border-color: rgba(182,108,255,.65) !important;
  box-shadow:
    0 0 0 3px rgba(182,108,255,.13),
    inset 0 1px 0 rgba(210,160,255,.15) !important;
  outline: none !important;
}
body[data-theme="gifts"] .recipient-input input:focus {
  border-color: rgba(45,255,196,.65) !important;
  box-shadow:
    0 0 0 3px rgba(45,255,196,.13),
    inset 0 1px 0 rgba(100,255,210,.15) !important;
  outline: none !important;
}

/* ── Steam: синий дизайн блока получателя ── */
body[data-theme="steam"] .recipient-pay-btn {
  color: #fff !important;
  background: linear-gradient(180deg, #6eb8ff 0%, #2a82e8 55%, #1a60c4 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 4px 20px rgba(42,130,232,.50),
    0 8px 32px rgba(26,96,196,.28),
    0 0 0 1px rgba(74,182,255,.35) !important;
}
body[data-theme="steam"] .recipient-pay-btn:active {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 2px 12px rgba(42,130,232,.60),
    0 0 0 1px rgba(74,182,255,.45) !important;
}
body[data-theme="steam"] .recipient-pay-btn:disabled {
  background: linear-gradient(180deg, rgba(110,184,255,.22) 0%, rgba(42,130,232,.16) 100%) !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.35) !important;
}
body[data-theme="steam"] .segment-pill {
  background: linear-gradient(180deg, #4fa3ff 0%, #1a6fd4 100%) !important;
  box-shadow:
    0 2px 8px rgba(26,111,212,.45),
    0 1px 0 rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}
body[data-theme="steam"] .recipient-toggle button.active {
  color: #fff !important;
}
body[data-theme="steam"] .summary-total .value {
  color: #4fa3ff !important;
  text-shadow: 0 0 16px rgba(79,163,255,.35), 0 0 36px rgba(30,100,220,.12) !important;
}
body[data-theme="steam"] .summary-total .label {
  color: rgba(100,150,200,.55) !important;
}
body[data-theme="steam"] #screen-recipient::after {
  background: radial-gradient(ellipse at center, rgba(79,163,255,.040) 0%, transparent 80%) !important;
  width: 480px !important;
  height: 300px !important;
}

/* 4. AMOUNT CARD — glass with inset highlight */
body[data-theme="steam"] .custom-input-row {
  background: rgba(6,20,42,.72) !important;
  border: 1px solid rgba(80,170,255,.28) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: inset 0 1px 0 rgba(140,210,255,.07) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
body[data-theme="steam"] .custom-input-row:focus-within {
  border-color: rgba(74,182,255,.62) !important;
  box-shadow:
    0 0 0 3px rgba(74,182,255,.12),
    inset 0 1px 0 rgba(140,210,255,.14) !important;
}
/* Amount input text */
body[data-theme="steam"] .custom-input-row input {
  background: transparent !important;
  background-color: transparent !important;
  color: rgba(220,240,255,.94) !important;
  caret-color: #4AB6FF;
}
body[data-theme="steam"] .custom-input-row input::placeholder {
  color: rgba(100,160,220,.30) !important;
}

/* ₽ SUFFIX — capsule-part стиль: часть поля, border слева */
body[data-theme="steam"] .custom-input-row .label {
  background: rgba(74,182,255,.07) !important;
  border: none !important;
  border-left: 1px solid rgba(80,170,255,.28) !important;
  border-radius: 0 10px 10px 0 !important;
  color: rgba(120,190,255,.70) !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  padding: 0 14px !important;
  margin-right: 0 !important;
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  transition: background .2s, border-color .2s, color .2s !important;
  letter-spacing: .04em;
}
body[data-theme="steam"] .custom-input-row:focus-within .label {
  background: rgba(74,182,255,.13) !important;
  border-left-color: rgba(74,182,255,.55) !important;
  color: rgba(160,220,255,.90) !important;
}

/* 5. NEXT BUTTON — premium: top sheen, wider soft glow, bigger radius */
body[data-theme="steam"] .next-btn,
body[data-theme="steam"] #next-btn,
body[data-theme="steam"] .submit-btn {
  background: linear-gradient(
    180deg,
    rgba(100,205,255,.95) 0%,
    rgba(35,138,238,.98) 50%,
    rgba(16,96,196,1) 100%
  ) !important;
  border: none !important;
  border-radius: 16px !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  box-shadow:
    inset 0 1px 0 rgba(220,248,255,.40),
    0 6px 28px rgba(25,120,230,.55),
    0 2px 6px rgba(0,0,0,.30) !important;
  transition: transform .12s, box-shadow .12s !important;
  -webkit-tap-highlight-color: transparent;
}
body[data-theme="steam"] .next-btn:active,
body[data-theme="steam"] #next-btn:active,
body[data-theme="steam"] .submit-btn:active {
  transform: translateY(2px) scale(.985) !important;
  box-shadow:
    inset 0 1px 0 rgba(220,248,255,.18),
    0 2px 10px rgba(25,120,230,.30),
    0 1px 2px rgba(0,0,0,.25) !important;
}

/* Steam in-page CTA кнопка */
.steam-next-btn {
  width: 100%;
  padding: 16px 24px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg,
    rgba(100,205,255,.95) 0%,
    rgba(35,138,238,.98) 50%,
    rgba(16,96,196,1) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(220,248,255,.40),
    0 8px 40px rgba(25,120,230,.38),
    0 3px 12px rgba(25,120,230,.22);
  transition: transform .12s, box-shadow .12s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}
/* Top sheen */
.steam-next-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 42%;
  background: linear-gradient(to bottom, rgba(255,255,255,.12), transparent);
  border-radius: 16px 16px 0 0;
  pointer-events: none;
}
/* Shimmer sweep — как на payment/recipient кнопках */
.steam-next-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  will-change: transform, opacity;
  animation: ctaBtnShimmer 3.5s ease-in-out infinite;
  pointer-events: none;
}
.steam-next-btn:active {
  transform: translateY(2px) scale(.985);
  box-shadow:
    inset 0 1px 0 rgba(220,248,255,.18),
    0 2px 10px rgba(25,120,230,.30),
    0 1px 2px rgba(0,0,0,.25);
}

/* ═══════════════════════════════════════════════
   STEAM CALC WIDGET — POLISH (v53)
   ═══════════════════════════════════════════════ */

/* 1. Widget card — glass + radial blue glow */
body[data-theme="steam"] .steam-calc-widget {
  background:
    radial-gradient(ellipse 70% 60% at 15% 50%, rgba(40,140,255,.09), transparent),
    rgba(5,16,35,.80);
  border: 1px solid rgba(74,182,255,.18);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(140,210,255,.07),
    0 4px 24px rgba(10,60,140,.25);
  padding: 8px 20px;
  margin-top: 16px;
  text-align: left;
}

/* 2. "К зачислению на Steam:" — muted uppercase label */
body[data-theme="steam"] .steam-rate-title {
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(140,200,255,.50);
  font-weight: 600;
  margin-bottom: 12px;
}

/* 3. Rate rows — thin dividers */
body[data-theme="steam"] .steam-rate-row {
  display: flex;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid rgba(74,182,255,.07);
}
body[data-theme="steam"] .steam-rate-row:last-child {
  border-bottom: none;
}
/* Currency code — dimmed */
body[data-theme="steam"] .steam-rate-cur {
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(120,175,230,.52);
  font-weight: 600;
  min-width: 44px;
  text-align: left;
  text-transform: uppercase;
}
/* Amount — brighter */
body[data-theme="steam"] .steam-rate-value {
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
  color: rgba(200,235,255,.92);
}

/* 4. "1 USD = ..." — secondary info, very muted */
body[data-theme="steam"] #steam-rate-info {
  font-size: 11px;
  color: rgba(100,155,210,.42);
  font-style: italic;
  font-weight: 400;
  letter-spacing: .3px;
}
body[data-theme="steam"] .steam-rate-row:has(#steam-rate-info) {
  border-bottom: none;
  border-top: 1px solid rgba(74,182,255,.08);
  margin-top: 6px;
  padding-bottom: 0;
}

/* 5. "Итого" block — two-tier typography */
body[data-theme="steam"] #steam-total-cost {
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(74,182,255,.12) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: rgba(130,190,255,.60) !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
}
body[data-theme="steam"] .total-label-txt {
  color: rgba(120,175,230,.52);
  font-size: 13px;
  font-weight: 500;
}
body[data-theme="steam"] .total-amount-txt {
  color: rgba(185,235,255,.96);
  font-size: 19px;
  font-weight: 800;
  text-shadow: 0 0 12px rgba(74,182,255,.35);
  letter-spacing: .02em;
}

/* ── Micro-animations ── */
@keyframes steamRatesIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.steam-rates-enter {
  animation: steamRatesIn .28s cubic-bezier(.22,.68,0,1.2) forwards;
}
@keyframes steamTotalPulse {
  0%   { text-shadow: 0 0 12px rgba(74,182,255,.35); }
  40%  { text-shadow: 0 0 22px rgba(74,182,255,.70), 0 0 8px rgba(140,220,255,.45); }
  100% { text-shadow: 0 0 12px rgba(74,182,255,.35); }
}
.steam-total-pulse {
  animation: steamTotalPulse .55s ease forwards;
}

/* ═══════════════════════════════════════════════
   STEAM PAYMENT SCREEN — BLUE THEME  (v68)
   ═══════════════════════════════════════════════ */

/* Убираем золотое свечение снизу экрана */
body[data-theme="steam"] #screen-payment::before {
  display: none !important;
}

/* ── 1. Summary card — иерархия лейбл → данные → итог ── */

/* Лейблы — приглушённые */
body[data-theme="steam"] #payment-summary .summary-row .label {
  color: rgba(120,175,220,.50) !important;
}
/* Значения — тёплый белый */
body[data-theme="steam"] #payment-summary .summary-row .value {
  color: rgba(200,230,255,.80) !important;
  font-weight: 600 !important;
}
/* "Итого" лейбл — чуть менее белый, чем данные */
body[data-theme="steam"] #payment-summary .summary-total .label {
  color: rgba(140,185,230,.55) !important;
}
/* "Итого" сумма — accent blue + тонкий glow */
body[data-theme="steam"] #payment-summary .summary-total .value {
  color: var(--accent) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  filter: drop-shadow(0 0 8px rgba(74,182,255,.32)) !important;
  text-shadow: none !important;
}

/* ── 2. "СПОСОБ ОПЛАТЫ" — тонкая линия + нейтральная нижняя рамка ── */
body[data-theme="steam"] #payment-method-label {
  color: rgba(150,205,255,.50) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  padding-bottom: 8px;
  margin-bottom: 12px !important;
}

/* ── 3. Карточки способов оплаты — обводка тише ── */
body[data-theme="steam"] .pay-method {
  background: rgba(6,20,42,.70) !important;
  border: 1px solid rgba(80,170,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(140,210,255,.04) !important;
  transition: border-color .15s, box-shadow .15s, transform .12s !important;
}
body[data-theme="steam"] .pay-method:hover {
  border-color: rgba(74,182,255,.32) !important;
}
body[data-theme="steam"] .pay-method:active {
  transform: scale(.985) !important;
}
body[data-theme="steam"] .pay-method.selected {
  border-color: rgba(74,182,255,.52) !important;
  background: rgba(10,30,60,.78) !important;
  box-shadow:
    0 0 0 1px rgba(74,182,255,.12),
    inset 0 1px 0 rgba(140,210,255,.06) !important;
}
body[data-theme="steam"] .pay-method.selected .pm-name {
  color: rgba(200,235,255,.92) !important;
}

/* ── 4. Чекбокс — матовый, без глянца ── */
body[data-theme="steam"] .pay-method:not(.selected) .pm-check {
  border-color: rgba(74,182,255,.18) !important;
  background: transparent !important;
  opacity: .45;
  box-shadow: none !important;
}
body[data-theme="steam"] .pay-method.selected .pm-check {
  /* Матовый — без яркого inset highlight */
  background: linear-gradient(180deg, rgba(70,170,240,.88) 0%, rgba(25,115,210,.94) 100%) !important;
  border-color: rgba(74,182,255,.45) !important;
  color: rgba(255,255,255,.95) !important;
  box-shadow: 0 1px 6px rgba(25,115,210,.28) !important;
  transform: scale(1.04) !important;
}

/* ── 5. Кнопка "Оплатить" — шире glow, мягче, темнее на 4% ── */
body[data-theme="steam"] .payment-pay-btn {
  color: #fff !important;
  background: linear-gradient(
    180deg,
    rgba(92,196,248,.95)  0%,
    rgba(30,130,228,.98)  50%,
    rgba(14,88,188,1.00) 100%
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(220,248,255,.35),
    0 10px 55px rgba(20,110,220,.32),
    0 4px 16px rgba(20,110,220,.18) !important;
  transition: transform .13s ease, box-shadow .13s ease, opacity .13s ease !important;
}
body[data-theme="steam"] .payment-pay-btn::before {
  background: linear-gradient(180deg, rgba(255,255,255,.11) 0%, transparent 100%) !important;
}
body[data-theme="steam"] .payment-pay-btn::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.09) 50%, transparent 100%) !important;
}
/* Hover — слабее glow, чуть приподнята */
body[data-theme="steam"] .payment-pay-btn:hover {
  box-shadow:
    inset 0 1px 0 rgba(220,248,255,.30),
    0 14px 65px rgba(20,110,220,.28),
    0 5px 20px rgba(20,110,220,.15) !important;
}
/* Active / tap — scale + glow сжимается */
body[data-theme="steam"] .payment-pay-btn:active {
  transform: scale(.985) translateY(1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(220,248,255,.15),
    0 3px 14px rgba(20,110,220,.24),
    0 1px 3px rgba(0,0,0,.22) !important;
  opacity: .95 !important;
}

/* ═══════════════════════════════════════════════
   CUSTOM IN-APP ALERT MODAL  (v67)
   ═══════════════════════════════════════════════ */

@keyframes customAlertIn {
  from { opacity: 0; transform: scale(.88) translateY(12px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
@keyframes customAlertOut {
  from { opacity: 1; transform: scale(1)   translateY(0); }
  to   { opacity: 0; transform: scale(.88) translateY(12px); }
}
@keyframes customAlertBgIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.custom-alert-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4,10,22,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: customAlertBgIn .18s ease forwards;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Withdraw overlay: centered normally, scrollable when keyboard opens */
#withdraw-overlay {
  align-items: flex-start;
  padding: 16px;
}
#withdraw-overlay .withdraw-modal {
  flex-shrink: 0;
  /* auto margins distribute leftover space equally → centers vertically */
  margin-top: auto;
  margin-bottom: auto;
}
.custom-alert-overlay.hiding {
  animation: customAlertOut .18s ease forwards;
}

.custom-alert-box {
  position: relative;
  width: 100%;
  max-width: 320px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.04) 100%) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(61,235,255,.14), rgba(246,196,83,.10)) border-box;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 28px 24px 20px;
  text-align: center;
  box-shadow:
    0 24px 64px rgba(0,0,0,.55),
    0 8px 24px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: customAlertIn .22s cubic-bezier(.22,.68,0,1.2) forwards;
}

.custom-alert-icon {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 14px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.30));
}

.custom-alert-text {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(220,235,255,.92);
  margin-bottom: 20px;
  white-space: pre-line;
}

.custom-alert-btn {
  width: 100%;
  padding: 13px 24px;
  border: none;
  border-radius: 13px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent-text, #041016);
  background: var(--accent, #3DEBFF);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 4px 18px var(--accent-glow, rgba(61,235,255,.35));
  transition: transform .10s, opacity .10s;
  -webkit-tap-highlight-color: transparent;
}
.custom-alert-btn:active {
  transform: scale(.96);
  opacity: .90;
}

/* Confirm dialog — two-button layout */
.custom-confirm-btns {
  display: -webkit-flex;
  display: flex;
  gap: 10px;
  width: 100%;
}
.custom-confirm-btns .custom-alert-btn {
  -webkit-flex: 1;
  flex: 1;
}
.custom-confirm-btn-cancel {
  background: rgba(255,255,255,.08) !important;
  color: var(--tg-theme-text-color, #e8eaf0) !important;
  box-shadow: none !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.custom-confirm-btn-ok {
  background: linear-gradient(135deg,#ef4444,#dc2626) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(239,68,68,.35) !important;
}
body.theme-light .custom-confirm-btn-cancel {
  background: rgba(0,0,0,.06) !important;
  color: #1a1a2e !important;
  border-color: rgba(0,0,0,.10) !important;
}

/* ══════════════════════════════════════════
   TOAST NOTIFICATION SYSTEM
══════════════════════════════════════════ */
.toast-container {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: calc(100% - 32px);
  max-width: 360px;
}

.toast {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 14px;
  pointer-events: none;
  cursor: default;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid transparent;
  box-shadow:
    0 8px 32px rgba(0,0,0,.45),
    0 2px 8px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.10);
  animation: toastIn .38s cubic-bezier(.34,1.56,.64,1) both;
  will-change: transform, opacity;
  user-select: none;
  -webkit-user-select: none;
}

.toast.toast-hiding {
  animation: toastOut .28s cubic-bezier(.4,0,1,1) forwards;
  pointer-events: none;
}

/* Variants */
.toast-success {
  background: linear-gradient(135deg, rgba(34,197,94,.20) 0%, rgba(16,185,129,.14) 100%);
  border-color: rgba(34,197,94,.32);
}
.toast-error {
  background: linear-gradient(135deg, rgba(239,68,68,.22) 0%, rgba(220,38,38,.14) 100%);
  border-color: rgba(239,68,68,.34);
}
.toast-info {
  background: linear-gradient(135deg, rgba(61,235,255,.14) 0%, rgba(37,99,235,.09) 100%);
  border-color: rgba(61,235,255,.24);
}
.toast-warning {
  background: linear-gradient(135deg, rgba(251,191,36,.18) 0%, rgba(245,158,11,.11) 100%);
  border-color: rgba(251,191,36,.30);
}

.toast-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}

.toast-body {
  flex: 1;
  min-width: 0;
}

.toast-msg {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(220,235,255,.94);
}

/* Progress bar — thin line at bottom showing time remaining */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 0 0 14px 14px;
  background: rgba(255,255,255,.35);
  animation: toastProgress var(--toast-duration, 2500ms) linear forwards;
}
.toast-success .toast-progress { background: rgba(34,197,94,.6); }
.toast-error   .toast-progress { background: rgba(239,68,68,.6); }
.toast-warning .toast-progress { background: rgba(251,191,36,.6); }
.toast-info    .toast-progress { background: rgba(61,235,255,.5); }

@keyframes toastIn {
  0%   { opacity: 0; transform: translateY(-24px) scale(.88); }
  60%  { opacity: 1; transform: translateY(4px)   scale(1.02); }
  80%  { transform: translateY(-2px) scale(.99); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes toastOut {
  0%   { opacity: 1; transform: translateY(0)   scale(1);   max-height: 80px; margin-bottom: 0; }
  100% { opacity: 0; transform: translateY(10px) scale(.92); max-height: 0;    margin-bottom: -8px; }
}
@keyframes toastProgress {
  from { width: 100%; }
  to   { width: 0%; }
}

/* ═══════════════════════════════════════════════
   PREMIUM SCREEN — VISUAL POLISH  (v70)
   ═══════════════════════════════════════════════ */

/* ── 1. Background — атмосферный фиолетовый + indigo ── */
body[data-theme="premium"] #bg-layer {
  background:
    radial-gradient(1000px 600px at 50%  -5%, rgba(183,116,255,.28), transparent 60%),
    radial-gradient(700px  500px at 15%  10%, rgba(140, 80,255,.18), transparent 55%),
    radial-gradient(600px  400px at 85%  15%, rgba(255, 79,216,.14), transparent 55%),
    radial-gradient(900px  700px at 50% 110%, rgba(140, 60,255,.28), transparent 55%); /* фиолетовый glow снизу */
}

/* ── Кнопка "Купить" на экране Premium — фиолетовый ── */
body[data-theme="premium"] .recipient-pay-btn {
  color: #fff !important;
  background: linear-gradient(180deg, #c98bff 0%, #a060f0 50%, #8f4fff 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 4px 20px rgba(182,108,255,.55),
    0 8px 32px rgba(143,79,255,.30),
    0 0 0 1px rgba(182,108,255,.35) !important;
}
body[data-theme="premium"] .recipient-pay-btn:active {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 2px 12px rgba(182,108,255,.65),
    0 0 0 1px rgba(182,108,255,.45) !important;
}
body[data-theme="premium"] .recipient-pay-btn:disabled {
  background: linear-gradient(180deg, rgba(201,139,255,.25) 0%, rgba(143,79,255,.20) 100%) !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.35) !important;
}

/* ── Сегмент "Себе" на экране Premium — фиолетовый ── */
body[data-theme="premium"] .segment-pill {
  background: linear-gradient(180deg, #c98bff 0%, #8f4fff 100%) !important;
  box-shadow:
    0 2px 8px rgba(143,79,255,.45),
    0 1px 0 rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}
body[data-theme="premium"] .recipient-toggle button.active {
  color: #fff !important;
}
body[data-theme="premium"] .summary-total .value {
  color: #c98bff !important;
  text-shadow: 0 0 16px rgba(183,116,255,.35), 0 0 36px rgba(140,60,255,.12) !important;
}
body[data-theme="premium"] .summary-total .label {
  color: rgba(160,110,200,.50) !important;
}
body[data-theme="premium"] #screen-recipient::after {
  background: radial-gradient(ellipse at center, rgba(183,116,255,.045) 0%, transparent 80%) !important;
  width: 480px !important;
  height: 300px !important;
}

/* ── Gifts: изумрудный дизайн блока получателя ── */

/* 1. Кнопка «К оплате» — чуть темнее, glow шире и мягче */
body[data-theme="gifts"] .recipient-pay-btn {
  color: #021A10 !important;
  background: linear-gradient(180deg, #6ef0a8 0%, #28b864 55%, #1f9a52 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 6px 28px rgba(0,220,140,.20),
    0 12px 40px rgba(0,160,90,.12),
    0 0 0 1px rgba(45,255,160,.22) !important;
}
body[data-theme="gifts"] .recipient-pay-btn:active {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 2px 14px rgba(0,220,140,.28),
    0 0 0 1px rgba(45,255,160,.38) !important;
}
body[data-theme="gifts"] .recipient-pay-btn:disabled {
  background: linear-gradient(180deg, rgba(110,240,168,.18) 0%, rgba(40,184,100,.12) 100%) !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.35) !important;
}

/* 2. Активный сегмент (pill) — чуть меньше выпуклости */
body[data-theme="gifts"] .segment-pill {
  background: linear-gradient(180deg, #2DFFC4 0%, #0fad80 100%) !important;
  box-shadow:
    0 2px 6px rgba(0,180,115,.35),
    0 1px 0 rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}
body[data-theme="gifts"] .recipient-toggle button.active {
  color: #021A10 !important;
}

/* 3. Summary card halo */
body[data-theme="gifts"] .summary-card::after {
  background: radial-gradient(ellipse at center, rgba(45,255,160,.08) 0%, transparent 65%) !important;
}

/* 4. Нижний glow — шире, тише, ощущение глубины */
body[data-theme="gifts"] #screen-recipient::after {
  background: radial-gradient(ellipse at center, rgba(45,255,160,.028) 0%, transparent 80%) !important;
  width: 480px !important;
  height: 300px !important;
}

/* 5. Итого — мягкий glow; label — более muted */
body[data-theme="gifts"] .summary-total .value {
  text-shadow: 0 0 16px rgba(45,255,160,.35), 0 0 36px rgba(0,255,150,.12) !important;
}
body[data-theme="gifts"] .summary-total .label {
  color: rgba(130,180,155,.45) !important;
}

/* Radial glow за заголовком */
body[data-theme="premium"] #screen-premium .header {
  position: relative;
}
body[data-theme="premium"] #screen-premium .header::before {
  content: '';
  position: absolute;
  top: -30px; left: 50%;
  transform: translateX(-50%);
  width: 280px; height: 130px;
  background: radial-gradient(ellipse at center,
    rgba(183,116,255,.22) 0%,
    rgba(183,116,255,.08) 40%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}
body[data-theme="premium"] #screen-premium .header h1,
body[data-theme="premium"] #screen-premium .header p {
  position: relative;
  z-index: 1;
}

/* ── 2. Карточки — стеклянные, равномерный radial glow внутри, тёмные края ── */
body[data-theme="premium"] .product-card {
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(183,116,255,.07) 0%, transparent 70%),
    linear-gradient(180deg, rgba(183,116,255,.09) 0%, rgba(8,4,22,.72) 100%) !important;
  border: 1px solid rgba(183,116,255,.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(220,180,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 4px 20px rgba(60,10,120,.22) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  padding: 20px 16px !important;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease !important;
  position: relative;
  overflow: hidden;
}
body[data-theme="premium"] .product-card:hover {
  border-color: rgba(183,116,255,.36) !important;
  box-shadow:
    inset 0 1px 0 rgba(220,180,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 6px 28px rgba(110,40,220,.24),
    0 0 0 1px rgba(183,116,255,.10) !important;
  transform: translateY(-2px) !important;
}
/* ── 5. Интерактивность: tap scale + glow ── */
body[data-theme="premium"] .product-card:active {
  transform: scale(.985) translateY(0) !important;
  box-shadow:
    inset 0 1px 0 rgba(220,180,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.30),
    0 2px 10px rgba(80,20,140,.20),
    0 0 16px rgba(183,116,255,.12) !important;
  border-color: rgba(183,116,255,.30) !important;
}

/* ── 3. Цена — ярче верхний цвет + text-shadow glow ── */
body[data-theme="premium"] .product-card .p-price {
  background: linear-gradient(135deg, #e8bbff 0%, #c98bff 45%, #8f4fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 10px rgba(182,108,255,.55))
    drop-shadow(0 0 24px rgba(182,108,255,.28));
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -.2px;
  margin-top: 8px !important;
}

/* Заголовок карточки */
body[data-theme="premium"] .product-card .p-title {
  color: rgba(235,225,255,.95) !important; /* холодный фиолетово-белый */
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
}

/* ── 4. Featured (12 мес.) — сильнее иерархия ── */
@keyframes premiumFeaturedShimmer {
  0%   { background-position: 200% center; opacity: 0; }
  7%   { opacity: 1; }
  93%  { opacity: 1; }
  100% { background-position: -200% center; opacity: 0; }
}
body[data-theme="premium"] .product-card.premium-featured {
  /* Темнее края, ярче centre — усиленная глубина */
  background:
    radial-gradient(ellipse 65% 50% at 50% 40%, rgba(200,140,255,.12) 0%, transparent 65%),
    linear-gradient(180deg, rgba(183,116,255,.16) 0%, rgba(12,4,30,.80) 100%) !important;
  border: 1px solid rgba(193,126,255,.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(220,180,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.32),
    0 0 0 1px rgba(183,116,255,.22),
    0 8px 40px rgba(120,50,240,.24) !important;
  /* Без анимации box-shadow — только shimmer через ::after */
  animation: none !important;
}
/* Shimmer по границе — очень редко, раз в ~13 сек */
body[data-theme="premium"] .product-card.premium-featured::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 32%,
    rgba(230,190,255,.14) 46%,
    rgba(255,255,255,.08) 50%,
    rgba(230,190,255,.14) 54%,
    transparent 68%,
    transparent 100%
  );
  background-size: 300% auto;
  border-radius: inherit;
  pointer-events: none;
  animation: premiumFeaturedShimmer 13s ease-in-out infinite;
}
/* Цена на featured — ещё ярче */
body[data-theme="premium"] .product-card.premium-featured .p-price {
  background: linear-gradient(135deg, #eac8ff 0%, #c990ff 45%, #a060f0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 10px rgba(210,150,255,.45))
    drop-shadow(0 0 24px rgba(183,116,255,.18));
}
/* Active на featured */
body[data-theme="premium"] .product-card.premium-featured:active {
  transform: scale(.985) !important;
  animation-play-state: paused !important;
}

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  body[data-theme="premium"] .product-card.premium-featured {
    animation: none !important;
  }
  /* Restore shimmer on ::after — decorative, not motion-sensitive */
  body[data-theme="premium"] .product-card.premium-featured::after {
    animation: premiumFeaturedShimmer 13s ease-in-out infinite !important;
    animation-duration: 13s !important;
    animation-iteration-count: infinite !important;
  }
}

/* ═══════════════════════════════════════════════
   PREMIUM HERO BANNER  (v72)
   ═══════════════════════════════════════════════ */

/* Фиолетовый shimmer — точная копия shimmer-text-gold, только в purple */
.shimmer-text-purple {
  display: inline;
  background: linear-gradient(
    90deg,
    #b774ff 0%,
    #b774ff 30%,
    #ead4ff 50%,
    #b774ff 70%,
    #b774ff 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  will-change: background-position;
  animation: shimmerPass 4s ease-in-out infinite;
}

/* Pixel title Premium — фон очищен, glow на shimmer-span (паттерн Stars) */
#screen-premium .pixel-title {
  font-size: 10px !important;
  white-space: nowrap;
  text-transform: none !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: transparent;
  text-shadow: none;
  filter: none !important;
  -webkit-font-smoothing: none !important;
  font-smooth: never !important;
}
#screen-premium .pixel-title .shimmer-text-purple {
  filter:
    drop-shadow(0 0 3px rgba(210,150,255,.95))
    drop-shadow(0 0 8px rgba(183,116,255,.65))
    drop-shadow(0 0 18px rgba(140,60,255,.40));
}

/* Фиолетовая рамка и фон баннера Premium */
#screen-premium .hero-banner.hero-v1 {
  margin-bottom: -5px;
  border-color: rgba(183,116,255,.34);
  box-shadow:
    0 8px 32px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 1px 0 rgba(183,116,255,.20) inset;
  background:
    radial-gradient(ellipse 60% 80% at 50% 40%, rgba(183,116,255,.10), transparent 70%),
    radial-gradient(700px 420px at 10% 20%, rgba(183,116,255,.22), transparent 60%),
    radial-gradient(680px 420px at 90% 10%, rgba(200,60,255,.14), transparent 60%),
    linear-gradient(135deg, #120828 0%, #0c051e 60%, #070316 100%);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Subtitle баннера Premium */
#screen-premium .hero-subtitle {
  font-size: 13px !important;
  opacity: .85 !important;
  color: rgba(220,185,255,.85) !important;
}

/* ===== Steam banner ===== */
.hero-steam {
  background:
    radial-gradient(ellipse at 70% 50%, rgba(30,100,220,.28) 0%, transparent 65%),
    radial-gradient(ellipse at 20% 80%, rgba(10,60,180,.22) 0%, transparent 55%),
    linear-gradient(135deg, #0d1f3c 0%, #0a1628 60%, #071020 100%);
  border: 1px solid rgba(60,130,255,.28);
  box-shadow:
    inset 0 1px 0 rgba(100,180,255,.12),
    0 4px 24px rgba(0,0,0,.35);
}

/* Синий shimmer текст */
.shimmer-text-blue {
  display: inline;
  background: linear-gradient(90deg, #4fa3ff 0%, #4fa3ff 30%, #b8d8ff 50%, #4fa3ff 70%, #4fa3ff 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  will-change: background-position;
  animation: shimmerPass 4s ease-in-out infinite;
}

/* Pixel title Steam — фон очищен, glow на shimmer-span (паттерн Stars) */
#screen-steam .pixel-title {
  font-size: 10px !important;
  white-space: nowrap;
  text-transform: none !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: transparent;
  text-shadow: none;
  filter: none !important;
  -webkit-font-smoothing: none !important;
  font-smooth: never !important;
}
#screen-steam .pixel-title .shimmer-text-blue {
  filter:
    drop-shadow(0 0 3px rgba(100,180,255,.95))
    drop-shadow(0 0 8px rgba(60,140,255,.65))
    drop-shadow(0 0 18px rgba(30,100,220,.40));
}

#screen-steam .hero-subtitle {
  opacity: .85;
  color: rgba(160,210,255,.85);
}

#screen-steam .hero-mascot {
  width: auto !important;
  height: clamp(96px, 22vw, 140px) !important;
  image-rendering: auto !important;
  transform: translateX(20px) translateY(1px);
  filter:
    drop-shadow(0 10px 22px rgba(0,0,0,.45))
    drop-shadow(0 0 18px rgba(60,130,255,.45));
  animation: none !important;
}

#screen-steam .hero-mascot-wrap::before {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), transparent 55%),
    radial-gradient(circle at 50% 55%, rgba(60,130,255,.22), transparent 62%);
}

/* Mascot Premium — усиленный фиолетовый glow */
#screen-premium .hero-mascot {
  width: auto !important;
  height: clamp(96px, 22vw, 140px) !important;
  image-rendering: auto !important;
  transform: translateX(20px) translateY(1px);
  filter:
    drop-shadow(0 10px 22px rgba(0,0,0,.50))
    drop-shadow(0 0 22px rgba(183,116,255,.60)) !important;
  animation: none !important;
}
/* hero-glow div — скрыть (как у Steam) */
#screen-premium .hero-glow {
  display: none !important;
}
#screen-premium .hero-mascot-wrap::before {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 55%),
    radial-gradient(circle at 50% 55%, rgba(183,116,255,.28), transparent 62%);
  animation: none !important;
}

/* ═══════════════════════════════════════════════
   PREMIUM PAYMENT BLOCK — PURPLE OVERRIDES (v106)
   Заменяет все золотые цвета экрана оплаты на
   фиолетовые при body[data-theme="premium"]
   ═══════════════════════════════════════════════ */

/* 1. Кнопка ОПЛАТИТЬ */
body[data-theme="premium"] .payment-pay-btn {
  color: #fff !important;
  background: linear-gradient(180deg, #c98bff 0%, #a060f0 55%, #8f4fff 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 4px 20px rgba(182,108,255,.55),
    0 8px 32px rgba(143,79,255,.30),
    0 0 0 1px rgba(182,108,255,.35) !important;
}
body[data-theme="premium"] .payment-pay-btn:active {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 2px 12px rgba(182,108,255,.65),
    0 0 0 1px rgba(182,108,255,.45) !important;
}

/* 2. Карточки методов оплаты */
body[data-theme="premium"] .pay-method {
  background: rgba(14,6,30,.70) !important;
  border: 1px solid rgba(150,80,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(200,160,255,.04) !important;
  transition: border-color .15s, box-shadow .15s, transform .12s !important;
}
body[data-theme="premium"] .pay-method:hover {
  border-color: rgba(183,116,255,.35) !important;
}
body[data-theme="premium"] .pay-method:active {
  transform: scale(.985) !important;
}
body[data-theme="premium"] .pay-method.selected {
  border-color: rgba(183,116,255,.60) !important;
  background: linear-gradient(135deg, rgba(183,116,255,.12), rgba(14,6,22,.55)) !important;
  box-shadow: 0 0 0 1px rgba(183,116,255,.22), 0 4px 20px rgba(183,116,255,.12) !important;
}
body[data-theme="premium"] .pay-method.selected .pm-name {
  color: rgba(235,200,255,.95) !important;
}

/* 3. Галочка выбранного метода оплаты */
body[data-theme="premium"] .pay-method:not(.selected) .pm-check {
  border-color: rgba(183,116,255,.22) !important;
  background: transparent !important;
  opacity: .50;
  box-shadow: none !important;
}
body[data-theme="premium"] .pay-method.selected .pm-check {
  background: linear-gradient(180deg, #c98bff 0%, #8f4fff 100%) !important;
  border-color: rgba(183,116,255,.65) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(182,108,255,.50), inset 0 1px 0 rgba(255,255,255,.25) !important;
  transform: scale(1.06) !important;
}

/* 4. Лейбл «Метод оплаты» */
body[data-theme="premium"] #payment-method-label {
  color: rgba(190,145,255,.50) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  padding-bottom: 8px;
  margin-bottom: 12px !important;
}

/* 5. Фоновый drift-эффект — фиолетовый вместо золотого */
body[data-theme="premium"] #screen-payment::before {
  background: radial-gradient(ellipse 100% 30% at 50% 100%, rgba(183,116,255,.6) 0%, transparent 65%) !important;
  animation: none !important;
  opacity: .04 !important;
}

/* 6. Значение строки товара в сводке — фиолетово-белый */
body[data-theme="premium"] .summary-row .value {
  color: rgba(220,185,255,.72) !important;
}
body[data-theme="premium"] #payment-summary .summary-total .value {
  color: #c98bff !important;
  text-shadow: 0 0 16px rgba(183,116,255,.35), 0 0 36px rgba(140,60,255,.12) !important;
}
body[data-theme="premium"] #payment-summary .summary-total .label {
  color: rgba(160,110,200,.55) !important;
}

/* 7. Мягкий halo за ценой в карточке итого */
body[data-theme="premium"] .summary-card::after {
  background: radial-gradient(ellipse at center, rgba(183,116,255,.08) 0%, transparent 65%) !important;
}

/* ── Gifts: изумрудный дизайн блока оплаты ── */

/* Карточки методов оплаты */
body[data-theme="gifts"] .pay-method {
  background: rgba(2,14,10,.70) !important;
  border: 1px solid rgba(45,255,196,.12) !important;
  box-shadow: inset 0 1px 0 rgba(100,255,210,.04) !important;
  transition: border-color .15s, box-shadow .15s, transform .12s !important;
}
body[data-theme="gifts"] .pay-method:active {
  transform: scale(.985) !important;
}

/* Галочка невыбранного метода */
body[data-theme="gifts"] .pay-method:not(.selected) .pm-check {
  border-color: rgba(45,255,196,.18) !important;
  background: transparent !important;
  opacity: .50;
  box-shadow: none !important;
}

/* Лейбл «Метод оплаты» */
body[data-theme="gifts"] #payment-method-label {
  color: rgba(100,200,170,.50) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  padding-bottom: 8px;
  margin-bottom: 12px !important;
}

/* Summary итого */
body[data-theme="gifts"] #payment-summary .summary-total .value {
  color: #2DFFC4 !important;
  text-shadow: 0 0 16px rgba(45,255,196,.35), 0 0 36px rgba(0,200,140,.12) !important;
}
body[data-theme="gifts"] #payment-summary .summary-total .label {
  color: rgba(100,180,155,.50) !important;
}

/* Кнопка «Оплатить» */
body[data-theme="gifts"] .payment-pay-btn {
  color: #021A10 !important;
  background: linear-gradient(180deg, #6ef0a8 0%, #28b864 55%, #1f9a52 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 6px 28px rgba(0,220,140,.20),
    0 12px 40px rgba(0,160,90,.12),
    0 0 0 1px rgba(45,255,160,.22) !important;
}
body[data-theme="gifts"] .payment-pay-btn:active {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 2px 14px rgba(0,220,140,.28),
    0 0 0 1px rgba(45,255,160,.38) !important;
}

/* Методы оплаты — hover и selected */
body[data-theme="gifts"] .pay-method:hover {
  border-color: rgba(45,255,196,.35) !important;
}
body[data-theme="gifts"] .pay-method.selected {
  border-color: rgba(45,255,196,.60) !important;
  background: linear-gradient(135deg, rgba(45,255,196,.10), rgba(2,14,10,.55)) !important;
  box-shadow: 0 0 0 1px rgba(45,255,196,.20), 0 4px 20px rgba(45,255,196,.10) !important;
}
body[data-theme="gifts"] .pay-method.selected .pm-name {
  color: rgba(200,255,235,.95) !important;
}

/* Чекбокс выбранного метода */
body[data-theme="gifts"] .pay-method.selected .pm-check {
  background: linear-gradient(180deg, #2DFFC4 0%, #0fad80 100%) !important;
  border-color: rgba(45,255,196,.65) !important;
  color: #021A10 !important;
  box-shadow: 0 2px 8px rgba(0,200,130,.45), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* Фоновый glow — тихий изумрудный без анимации */
body[data-theme="gifts"] #screen-payment::before {
  background: radial-gradient(ellipse 100% 30% at 50% 100%, rgba(45,255,160,.6) 0%, transparent 65%) !important;
  animation: none !important;
  opacity: .035 !important;
}

/* Summary карточка */
body[data-theme="gifts"] .summary-row .value {
  color: rgba(180,255,220,.72) !important;
}
body[data-theme="gifts"] #screen-payment .summary-card::after {
  background: radial-gradient(ellipse at center, rgba(45,255,160,.08) 0%, transparent 65%) !important;
}

/* ═══════════════════════════════════════════════
   GIFTS CATEGORY — DEEP EMERALD REDESIGN (v107)
   Cyber Emerald Glass — тёмный изумруд + неон
   ═══════════════════════════════════════════════ */

/* Emerald shimmer текст */
.shimmer-text-emerald {
  display: inline;
  background: linear-gradient(
    90deg,
    #2DFFC4 0%,
    #2DFFC4 28%,
    #ffffff 50%,
    #2DFFC4 72%,
    #2DFFC4 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  will-change: background-position;
  animation: shimmerPass 4s ease-in-out infinite;
}

/* Pixel title для Gifts */
#screen-gifts .pixel-title {
  font-size: 10px !important;
  white-space: nowrap;
  text-transform: none !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: transparent;
  text-shadow: none;
  filter: none !important;
  -webkit-font-smoothing: none !important;
  font-smooth: never !important;
}
/* Glow на shimmer-span — 3-слойный как Stars/Steam */
#screen-gifts .pixel-title .shimmer-text-emerald {
  filter:
    drop-shadow(0 0 3px rgba(80,255,200,.95))
    drop-shadow(0 0 8px rgba(45,255,160,.65))
    drop-shadow(0 0 18px rgba(0,180,120,.40));
}

/* Hero banner Gifts — насыщенный изумрудный */
#screen-gifts .hero-banner.hero-v1 {
  border-color: rgba(45,255,160,.32);
  box-shadow:
    0 8px 32px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 1px 0 rgba(45,255,160,.18) inset;
  background:
    radial-gradient(ellipse 60% 80% at 50% 40%, rgba(45,255,160,.10), transparent 70%),
    radial-gradient(700px 420px at 10% 20%, rgba(45,255,160,.20), transparent 60%),
    radial-gradient(680px 420px at 90% 10%, rgba(0,229,255,.12), transparent 60%),
    linear-gradient(135deg, #031a12 0%, #021510 60%, #010e0b 100%);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#screen-gifts .hero-subtitle {
  font-size: 13px !important;
  opacity: .85 !important;
  color: rgba(180,255,220,.85) !important;
}

/* Маскот на баннере Gifts — усиленный glow */
#screen-gifts .hero-mascot {
  width: auto !important;
  height: clamp(96px, 22vw, 140px) !important;
  image-rendering: auto !important;
  transform: translateX(20px) translateY(1px);
  filter:
    drop-shadow(0 10px 22px rgba(0,0,0,.50))
    drop-shadow(0 0 22px rgba(45,255,160,.60)) !important;
  animation: none !important;
}
/* hero-glow div — скрыть */
#screen-gifts .hero-glow {
  display: none !important;
}
#screen-gifts .hero-mascot-wrap::before {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 55%),
    radial-gradient(circle at 50% 55%, rgba(45,255,160,.28), transparent 62%);
  animation: none !important;
}

/* Фоновый emerald drift — медленно движущийся */
@keyframes giftsEmeraldDrift {
  0%, 100% { transform: scale(1) translateY(0); }
  50%       { transform: scale(1.05) translateY(-6px); }
}
/* Фоновый слой Gifts — отдельный fixed div (как stars-sky), без артефактов на desktop */
#gifts-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: none;
}
body[data-theme="gifts"] #gifts-bg {
  display: block;
  background: radial-gradient(ellipse 100% 40% at 50% 100%, rgba(45,255,160,.12) 0%, rgba(45,255,160,.04) 55%, transparent 72%);
  animation: giftsEmeraldDrift 15s ease-in-out infinite;
}
#screen-gifts > * { position: relative; z-index: 1; }

/* Продуктовые карточки — Cyber Emerald Glass */
/* ===== Gift Cards — Deep Emerald Glass ===== */

/* 1. Карточка: radial glow внутри, тёмные края, светлый центр */
body[data-theme="gifts"] .product-card {
  background:
    radial-gradient(ellipse 65% 55% at 50% 38%, rgba(45,255,160,.10) 0%, rgba(45,255,160,.02) 55%, transparent 75%),
    linear-gradient(180deg, rgba(45,255,160,.07) 0%, rgba(2,8,6,.82) 100%) !important;
  border: 1px solid rgba(60,255,190,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(180,255,220,.12),
    inset 0 -1px 0 rgba(0,0,0,.30),
    inset 1px 0 0 rgba(45,255,160,.04),
    inset -1px 0 0 rgba(0,0,0,.18),
    0 4px 20px rgba(5,40,25,.30) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  transition:
    transform 120ms cubic-bezier(.25,.46,.45,.94),
    border-color 120ms ease,
    box-shadow 120ms ease !important;
  position: relative;
  overflow: hidden;
}

/* Внутренний micro-glow поверх карточки */
body[data-theme="gifts"] .product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(45,255,160,.10) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
body[data-theme="gifts"] .product-card > * { position: relative; z-index: 1; }

/* 2. Иконка: drop-shadow + зелёный glow + scale при нажатии */
body[data-theme="gifts"] .product-card .p-emoji {
  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,.50))
    drop-shadow(0 0 8px rgba(45,255,160,.30)) !important;
  transition: transform 120ms cubic-bezier(.25,.46,.45,.94), filter 120ms ease !important;
  display: block;
}

/* 3. Цена — ярче чем ⭐, neon glow */
body[data-theme="gifts"] .product-card .p-price {
  color: #2DFFC4 !important;
  text-shadow:
    0 0 6px rgba(45,255,160,.55),
    0 0 14px rgba(0,255,150,.25) !important;
  font-weight: 700 !important;
}

/* 4. Звёзды — чуть приглушённее цены */
body[data-theme="gifts"] .product-card .p-title {
  color: rgba(200,255,230,.80) !important;
}

/* Hover */
body[data-theme="gifts"] .product-card:hover {
  border-color: rgba(120,255,210,.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(180,255,220,.18),
    inset 0 -1px 0 rgba(0,0,0,.30),
    0 6px 28px rgba(0,120,70,.28),
    0 0 0 1px rgba(45,255,160,.12) !important;
  transform: translateY(-2px) scale(1.02) !important;
}
body[data-theme="gifts"] .product-card:hover .p-emoji {
  filter:
    drop-shadow(0 2px 6px rgba(0,0,0,.55))
    drop-shadow(0 0 12px rgba(45,255,160,.50)) !important;
  transform: scale(1.08) !important;
}

/* 6. Active — scale 0.97 + усиленный glow (120ms) */
body[data-theme="gifts"] .product-card:active {
  transform: scale(.97) translateY(0) !important;
  border-color: rgba(45,255,160,.40) !important;
  box-shadow:
    inset 0 1px 0 rgba(180,255,220,.10),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 2px 12px rgba(45,255,160,.22),
    0 0 0 1px rgba(45,255,160,.18) !important;
  transition:
    transform 80ms cubic-bezier(.25,.46,.45,.94),
    border-color 80ms ease,
    box-shadow 80ms ease !important;
}
body[data-theme="gifts"] .product-card:active .p-emoji {
  filter:
    drop-shadow(0 1px 3px rgba(0,0,0,.60))
    drop-shadow(0 0 16px rgba(45,255,160,.70)) !important;
  transform: scale(.95) !important;
}

/* Selected */
body[data-theme="gifts"] .product-card.selected {
  border-color: rgba(45,255,160,.65) !important;
  background:
    radial-gradient(ellipse 65% 55% at 50% 38%, rgba(45,255,160,.14) 0%, rgba(45,255,160,.04) 55%, transparent 75%),
    linear-gradient(180deg, rgba(45,255,160,.12) 0%, rgba(2,8,6,.82) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(180,255,220,.18),
    0 0 0 1px rgba(45,255,160,.22),
    0 4px 28px rgba(0,255,160,.20) !important;
}
body[data-theme="gifts"] .product-card.selected::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 22px rgba(0,255,190,.22), 0 0 44px rgba(0,255,190,.10);
  pointer-events: none;
  z-index: 0;
}


/* Цена — ярче для топовых паков (stars >= 500) handled by JS class .gift-card-top */
body[data-theme="gifts"] .product-card.gift-top .p-title {
  color: #fff !important;
}
body[data-theme="gifts"] .product-card.gift-top {
  border-color: rgba(45,255,160,.38) !important;
}
body[data-theme="gifts"] .product-card.gift-low {
  border-color: rgba(45,255,160,.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(180,255,220,.06),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 2px 12px rgba(5,40,25,.18) !important;
  opacity: .88;
}

/* ── Skeleton loading ── */
.skeleton {
  background: linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.11) 50%,rgba(255,255,255,.05) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s infinite;
  border-radius: 12px;
}
.skeleton-product { height: 128px; }
.skeleton-pack    { height: 80px; border-radius: 16px; }
.skeleton-order   { height: 68px; margin-bottom: 10px; border-radius: 14px; }
.skeleton-review  { height: 90px; margin-bottom: 10px; border-radius: 14px; }
@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── CTA Button colors per section theme ── */
body[data-theme="stars"] .recipient-pay-btn,
body[data-theme="stars"] .payment-pay-btn {
  background: linear-gradient(135deg, #FFC64D 0%, #FFB020 100%) !important;
  color: #1a1200 !important;
  box-shadow: 0 4px 20px rgba(255,198,77,.35), 0 0 0 1px rgba(255,198,77,.20) !important;
}
body[data-theme="steam"] .recipient-pay-btn,
body[data-theme="steam"] .payment-pay-btn {
  background: linear-gradient(135deg, #4A9EFF 0%, #1A6FFF 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(26,111,255,.35), 0 0 0 1px rgba(74,158,255,.20) !important;
}
body[data-theme="premium"] .recipient-pay-btn,
body[data-theme="premium"] .payment-pay-btn {
  background: linear-gradient(135deg, #B06EFF 0%, #8B3FD8 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(176,110,255,.35), 0 0 0 1px rgba(176,110,255,.20) !important;
}
body[data-theme="gifts"] .recipient-pay-btn,
body[data-theme="gifts"] .payment-pay-btn {
  background: linear-gradient(135deg, #34D399 0%, #10B981 100%) !important;
  color: #052016 !important;
  box-shadow: 0 4px 20px rgba(52,211,153,.35), 0 0 0 1px rgba(52,211,153,.20) !important;
}

/* prefers-reduced-motion — shimmer/glow восстановлены в основном блоке (~строка 1800) */

/* ══════════════════════════════════════════
   SPLASH SCREEN
══════════════════════════════════════════ */
#splash-screen {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: radial-gradient(ellipse 120% 90% at 50% 60%, #050e1a 0%, #040c15 55%, #020810 100%);
  transition: opacity .5s ease, filter .5s ease, visibility .5s ease;
  overflow: hidden;
}
body.theme-light #splash-screen {
  background: radial-gradient(ellipse 120% 90% at 50% 60%, #eef3ff 0%, #f0f4fa 55%, #e8eef8 100%);
}

#splash-screen.splash-hidden {
  opacity: 0; visibility: hidden;
  filter: blur(4px);
  pointer-events: none;
}

/* Большой фоновый glow — атмосфера всего экрана */
.splash-bg-glow {
  position: absolute;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(61,235,255,.07) 0%,
    rgba(100,120,255,.05) 40%,
    transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  pointer-events: none;
  animation: splashBgGlowPulse 4s ease-in-out infinite;
}
body.theme-light .splash-bg-glow {
  background: radial-gradient(circle,
    rgba(61,120,255,.08) 0%,
    rgba(100,80,255,.05) 40%,
    transparent 70%);
}

/* Центральный блок */
.splash-inner {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; gap: 18px;
}

/* Голубой ambient glow за маскотом */
.splash-glow {
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61,235,255,.22) 0%, transparent 68%);
  top: 50%; left: 50%;
  transform: translate(-50%, -58%);
  animation: splashGlowPulse 2.8s ease-in-out infinite;
  pointer-events: none;
}
/* Фиолетовый второй слой glow */
.splash-glow--purple {
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(150,90,255,.15) 0%, transparent 65%);
  animation-delay: -1.4s;
  animation-duration: 3.2s;
}
body.theme-light .splash-glow {
  background: radial-gradient(circle, rgba(61,120,255,.18) 0%, transparent 68%);
}
body.theme-light .splash-glow--purple {
  background: radial-gradient(circle, rgba(120,60,255,.12) 0%, transparent 65%);
}

/* Маскот */
.splash-mascot {
  width: 130px; height: 130px;
  object-fit: contain;
  position: relative; z-index: 1;
  animation: splashMascotIn .7s cubic-bezier(.34,1.56,.64,1) both,
             splashFloat 3.5s ease-in-out .7s infinite;
  filter: drop-shadow(0 16px 36px rgba(61,235,255,.38))
          drop-shadow(0 4px 12px rgba(0,0,0,.45));
}
body.theme-light .splash-mascot {
  filter: drop-shadow(0 16px 36px rgba(61,100,255,.28))
          drop-shadow(0 4px 12px rgba(0,0,0,.15));
}

/* Бренд — gradient текст */
.splash-brand {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  background: linear-gradient(135deg, #FFC64D 0%, #e8f0ff 55%, #a8c4ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 1.5px;
  opacity: 0;
  animation: splashFadeUp .5s ease .5s both;
  filter: drop-shadow(0 0 12px rgba(255,198,77,.20));
}
body.theme-light .splash-brand {
  background: linear-gradient(135deg, #1a3a8f 0%, #0d1b2a 60%, #2a4aaf 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: none;
}

/* Тэглайн */
.splash-tagline {
  font-size: 12px;
  color: rgba(168,196,255,.65);
  letter-spacing: 0.4px;
  text-transform: none;
  font-weight: 500;
  opacity: 0;
  animation: splashFadeUp .4s ease .85s both;
}
body.theme-light .splash-tagline { color: rgba(30,60,130,.55); }

/* Прогресс-линия снизу */
.splash-progress-wrap {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(61,235,255,.07);
}
.splash-phase2 { opacity: 0; transition: opacity .4s ease; }
.splash-phase2.visible { opacity: 1; }
.splash-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, transparent, #3DEBFF 40%, #a07dff 60%, transparent);
  background-size: 200% 100%;
  animation: splashProgressSweep 1.8s ease-in-out infinite;
}
body.theme-light .splash-progress-bar {
  background: linear-gradient(90deg, transparent, #4a7fff 40%, #7050ff 60%, transparent);
  background-size: 200% 100%;
}

/* ── @keyframes ─────────────────────────────── */
@keyframes splashMascotIn {
  from { opacity: 0; transform: scale(.72) translateY(14px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
@keyframes splashFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}
@keyframes splashFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes splashGlowPulse {
  0%, 100% { opacity: .55; transform: translate(-50%,-58%) scale(1); }
  50%       { opacity: 1;   transform: translate(-50%,-58%) scale(1.18); }
}
@keyframes splashBgGlowPulse {
  0%, 100% { opacity: .7; transform: translate(-50%,-55%) scale(1); }
  50%       { opacity: 1;  transform: translate(-50%,-55%) scale(1.08); }
}
@keyframes splashProgressSweep {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ══════════════════════════════════════════════════════
   LIGHT THEME — KILL REMAINING TEXT GLOW (v186)
   Overrides all body[data-theme="..."] rules that have
   !important text-shadow / filter:drop-shadow on text,
   which survive the global body.theme-light * kill.
══════════════════════════════════════════════════════ */

/* — Recipient screen: "Итого" value — */
body.theme-light[data-theme="steam"]    .summary-total .value { text-shadow: none !important; filter: none !important; }
body.theme-light[data-theme="premium"]  .summary-total .value { text-shadow: none !important; filter: none !important; }
body.theme-light[data-theme="gifts"]    .summary-total .value { text-shadow: none !important; filter: none !important; }
body.theme-light[data-theme="stars"]    .summary-total .value { text-shadow: none !important; filter: none !important; }

/* — Payment screen: "Итого" value — */
body.theme-light[data-theme="steam"]    #payment-summary .summary-total .value { text-shadow: none !important; filter: none !important; }
body.theme-light[data-theme="premium"]  #payment-summary .summary-total .value { text-shadow: none !important; filter: none !important; }
body.theme-light[data-theme="gifts"]    #payment-summary .summary-total .value { text-shadow: none !important; filter: none !important; }
body.theme-light[data-theme="stars"]    #payment-summary .summary-total .value { text-shadow: none !important; filter: none !important; }

/* — Steam: calc widget total amount — */
body.theme-light[data-theme="steam"] .total-amount-txt { text-shadow: none !important; }

/* — Premium category: product card prices (filter drop-shadow on text) — */
body.theme-light[data-theme="premium"] .product-card .p-price          { filter: none !important; }
body.theme-light[data-theme="premium"] .product-card.premium-featured .p-price { filter: none !important; }

/* — Gifts category: product card prices — */
body.theme-light[data-theme="gifts"] .product-card .p-price { text-shadow: none !important; }

/* — Stars: summary "Итого" tier filter glow (v188) — */
body.theme-light .summary-total[data-tier="sm"] .value,
body.theme-light .summary-total[data-tier="md"] .value,
body.theme-light .summary-total[data-tier="lg"] .value { filter: none !important; }
body.theme-light .summary-total[data-tier="lg"] .value .price-shimmer { filter: none !important; }
body.theme-light .summary-total[data-tier="lg"] .value:has(.price-shimmer) { filter: none !important; }

/* — Stars: pixel-title shimmer text drop-shadow (v188) — */
body.theme-light #screen-stars .pixel-title .shimmer-text-gold { filter: none !important; }

/* ═══════════════════════════════════════════════════════════════
   v227 — UX improvements batch
   ═══════════════════════════════════════════════════════════════ */

/* — Order filter bar — */
.orders-filter-bar {
  display: flex;
  gap: 8px;
  padding: 0 16px 12px;
}
.orders-filter-btn {
  flex: 1;
  padding: 8px 4px;
  background: rgba(61,235,255,.08);
  border: 1px solid rgba(61,235,255,.12);
  border-radius: 100px;
  color: var(--tg-theme-text-color);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  opacity: .7;
}
.orders-filter-btn.active {
  background: rgba(61,235,255,.18);
  border-color: var(--accent);
  color: var(--accent);
  opacity: 1;
  box-shadow: 0 0 8px rgba(61,235,255,.20);
}

/* — Copy order ID button — */
.order-id-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.copy-id-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: .75;
  transition: opacity .15s;
  flex-shrink: 0;
}
.copy-id-btn:hover { opacity: 1; }
.copy-id-btn:active { transform: scale(.9); }



/* — Support menu badge — */
.menu-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  border-radius: 100px;
  margin-right: 8px;
  box-shadow: 0 0 8px rgba(239,68,68,.35);
  animation: badgePop .2s cubic-bezier(.34,1.56,.64,1);
  flex-shrink: 0;
}
@keyframes badgePop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* — Referral card — */
.referral-card {
  background: linear-gradient(160deg, rgba(61,235,255,.10) 0%, rgba(37,99,235,.07) 50%, rgba(15,26,43,.55) 100%);
  border: 1px solid rgba(61,235,255,.14);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin: 0 16px 16px;
  box-shadow: 0 4px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(61,235,255,.10);
}
.referral-stat-row {
  display: flex;
  justify-content: space-around;
  gap: 12px;
  margin-bottom: 20px;
}
.referral-stat-item {
  text-align: center;
  flex: 1;
}
.referral-stat-item--accent .referral-stat-value {
  color: #4ade80;
  text-shadow: 0 0 16px rgba(74,222,128,.35);
}
.referral-stat-value {
  font-size: 36px;
  font-weight: 800;
  color: var(--accent);
  text-shadow: 0 0 16px rgba(61,235,255,.35);
}
.referral-stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.referral-code-block {
  margin-bottom: 16px;
}
.referral-code-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.referral-code-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(61,235,255,.16);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.referral-code-value {
  flex: 1;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--tg-theme-text-color);
  word-break: break-all;
}
/* ── Referral link block ── */
.referral-link-block {
  margin-bottom: 16px;
}
.referral-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(61,235,255,.18);
  border-radius: var(--radius-md);
  padding: 11px 10px 11px 14px;
  margin-bottom: 10px;
}
.referral-link-display {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  word-break: break-all;
  line-height: 1.45;
  user-select: all;
  letter-spacing: 0;
}
.referral-copy-icon-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  opacity: .75;
  transition: opacity .15s, transform .12s;
  flex-shrink: 0;
  line-height: 1;
}
.referral-copy-icon-btn:hover { opacity: 1; }
.referral-copy-icon-btn:active { transform: scale(.88); }
.referral-action-btn {
  display: block;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: opacity .15s, transform .12s, box-shadow .15s;
  box-sizing: border-box;
}
.referral-action-btn:active { opacity: .80; transform: scale(.98); }
.referral-action-btn--share {
  background: linear-gradient(135deg, #29b6f6 0%, #0288d1 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(41,182,246,.32);
}
.referral-action-btn--share:hover { box-shadow: 0 6px 22px rgba(41,182,246,.48); }
/* Legacy share btn — keep for fallback */
.referral-copy-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  opacity: .8;
  transition: opacity .15s;
  flex-shrink: 0;
}
.referral-copy-btn:hover { opacity: 1; }
.referral-copy-btn:active { transform: scale(.9); }
.referral-share-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--accent) 0%, #1d8fa0 100%);
  color: var(--accent-text, #000);
  border: none;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(61,235,255,.28), 0 2px 6px rgba(37,99,235,.20);
  transition: all .15s;
  box-sizing: border-box;
}
.referral-share-btn:hover { box-shadow: 0 6px 22px rgba(61,235,255,.38); }
.referral-share-btn:active { opacity: .8; transform: scale(.98); }
/* Light theme */
body.theme-light .referral-link-row {
  background: rgba(37,99,235,.06);
  border-color: rgba(37,99,235,.18);
}
body.theme-light .referral-link-display {
  color: #1d4ed8;
}
.referral-hint {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  text-align: center;
  padding-top: 4px;
}
.referral-withdraw-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #4ade80 0%, #16a34a 100%);
  color: #000;
  border: none;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(74,222,128,.28);
  transition: all .15s;
  box-sizing: border-box;
}
.referral-withdraw-btn:active { opacity: .8; transform: scale(.98); }
.referral-withdraw-hint {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 14px;
  line-height: 1.5;
  padding: 10px 12px;
  background: rgba(255,255,255,.04);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.06);
}
.referral-section-title {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 16px 0 10px;
}
.referral-earnings-list {
  margin-bottom: 16px;
}
.ref-earn-header {
  display: grid;
  grid-template-columns: 68px 1fr 72px 72px;
  gap: 6px;
  padding: 5px 0 7px;
  font-size: 11px;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.referral-earning-row {
  display: grid;
  grid-template-columns: 68px 1fr 72px 72px;
  gap: 6px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 12.5px;
}
.referral-earning-row:last-child { border-bottom: none; }
.ref-earn-date { color: var(--text-secondary); }
.ref-earn-user { color: var(--tg-theme-text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-earn-order { color: var(--text-secondary); text-align: right; }
.ref-earn-amount { color: #4ade80; font-weight: 700; text-align: right; }
.referral-no-earnings {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  padding: 16px 0;
}

/* ── Orders search ── */
.orders-search-wrap {
  padding: 0 16px 10px;
}
.orders-search-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(61,235,255,.14);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.05);
  color: var(--tg-theme-text-color);
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s;
}
.orders-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.orders-search-input::placeholder { color: var(--text-secondary); }

/* ── Reviews filter bar ── */
.reviews-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 12px;
  align-items: center;
}
.reviews-filter-btn,
.reviews-sort-btn {
  padding: 5px 10px;
  border-radius: 100px;
  border: 1px solid rgba(61,235,255,.18);
  background: rgba(255,255,255,.05);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
}
.reviews-filter-btn.active,
.reviews-sort-btn.active {
  background: rgba(61,235,255,.14);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}
.reviews-sort-btn { font-size: 14px; padding: 4px 8px; }

/* ── Review card hover ── */
.review-card {
  cursor: default;
  transition: box-shadow .2s, border-color .2s;
}
.review-card:hover {
  border-color: rgba(61,235,255,.22);
  box-shadow: 0 6px 20px rgba(0,0,0,.22), inset 0 1px 0 rgba(61,235,255,.10);
}

/* ── Share product button ── */
.product-share-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,.3);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s;
  z-index: 2;
}
.product-card:hover .product-share-btn,
.stars-pack-item:hover .product-share-btn { opacity: 1; }
.product-card { position: relative; }
.stars-pack-item { position: relative; }

/* ── High 5: Keyboard accessibility improvements ── */
.orders-filter-btn:focus-visible,
.reviews-filter-btn:focus-visible,
.reviews-sort-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.order-card:focus-visible,
.ticket-card:focus-visible,
.product-card:focus-visible,
.stars-pack-item:focus-visible,
.cat-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Security: disabled state for load more ── */
.load-more-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ══════════════════════════════════════════
   BLOCKED USER — full-screen page
══════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   BLOCKED USER — PREMIUM FULL-SCREEN PAGE
   ══════════════════════════════════════════════════════════ */

/* ── Root background: near-black with atmospheric red lighting ── */
.blocked-overlay-bg {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Three stacked radial gradients: top warmth + side depth + base */
  background:
    radial-gradient(ellipse 160% 65% at 50% -8%,  rgba(170,18,18,.80) 0%, transparent 55%),
    radial-gradient(ellipse  70% 45% at 15% 95%,  rgba(90,5,5,.45)    0%, transparent 55%),
    radial-gradient(ellipse  70% 45% at 85% 95%,  rgba(70,4,4,.35)    0%, transparent 55%),
    #060000;
}

/* Soft glowing halo sitting behind the icon */
.blk-bg-halo {
  position: absolute;
  top: -40px; left: 50%;
  transform: translateX(-50%);
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(210,22,22,.28) 0%, transparent 68%);
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
}

/* ── Floating particles ── */
.blocked-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.blocked-particle {
  position: absolute;
  bottom: -14px;
  border-radius: 50%;
  animation: blockedFloat linear infinite;
}
.blocked-particle:nth-child(1) { width:3px;  height:3px;  left:7%;  background:rgba(255,80,80,.28);  animation-duration:11s; animation-delay:0s;   }
.blocked-particle:nth-child(2) { width:5px;  height:5px;  left:21%; background:rgba(200,30,30,.22);  animation-duration:15s; animation-delay:2s;   }
.blocked-particle:nth-child(3) { width:2px;  height:2px;  left:38%; background:rgba(255,130,130,.38);animation-duration:9s;  animation-delay:0.5s; }
.blocked-particle:nth-child(4) { width:4px;  height:4px;  left:54%; background:rgba(180,20,20,.28);  animation-duration:13s; animation-delay:3.2s; }
.blocked-particle:nth-child(5) { width:6px;  height:6px;  left:69%; background:rgba(255,60,60,.18);  animation-duration:10s; animation-delay:1.5s; }
.blocked-particle:nth-child(6) { width:3px;  height:3px;  left:82%; background:rgba(220,45,45,.32);  animation-duration:12s; animation-delay:4.1s; }
.blocked-particle:nth-child(7) { width:2px;  height:2px;  left:91%; background:rgba(255,100,100,.28);animation-duration:8s;  animation-delay:2.8s; }
.blocked-particle:nth-child(8) { width:4px;  height:4px;  left:46%; background:rgba(150,10,10,.22);  animation-duration:16s; animation-delay:6s;   }
@keyframes blockedFloat {
  0%   { transform: translateY(0)       rotate(0deg);   opacity: 0; }
  7%   {                                                opacity: 1; }
  93%  {                                                opacity: .4;}
  100% { transform: translateY(-115vh)  rotate(400deg); opacity: 0; }
}

/* ── Centred content column ── */
.blocked-overlay-bg .blocked-modal-glass {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(60px + env(safe-area-inset-top,0px)) 24px
           calc(56px + env(safe-area-inset-bottom,0px));
  text-align: center;
}

/* ── Icon area ── */
.blocked-icon-wrap {
  position: relative;
  width: 116px;
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  animation: blkIconPop .65s cubic-bezier(.34,1.56,.64,1) both;
}

/* Outer soft glow halo (not a ring) */
.blk-halo {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220,30,30,.25) 0%, transparent 68%);
  filter: blur(8px);
}

/* Pulsing stroke rings */
.blocked-glow-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,65,65,.38);
  animation: blkRingPulse 2.8s ease-in-out infinite;
}
.blocked-glow-ring-2 {
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  border: 1px solid rgba(255,55,55,.18);
  animation: blkRingPulse 2.8s ease-in-out infinite .95s;
}
@keyframes blkRingPulse {
  0%, 100% { transform: scale(1);    opacity: .8; }
  50%       { transform: scale(1.11); opacity: .2; }
}

/* Icon container circle */
.blk-icon-circle {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%,
    rgba(200,35,35,.45) 0%, rgba(75,5,5,.75) 100%);
  border: 1px solid rgba(255,85,85,.22);
  box-shadow:
    0 0 0 1px rgba(255,55,55,.07),
    0 14px 44px rgba(140,5,5,.55),
    0  4px 16px rgba(0,0,0,.55),
    inset 0 1.5px 0 rgba(255,110,110,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.blk-icon-svg {
  width: 50px;
  height: 50px;
  filter: drop-shadow(0 2px 14px rgba(255,80,80,.5));
}

@keyframes blkIconPop {
  from { transform: scale(.55) translateY(14px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

/* ── Glass card ── */
.blk-card {
  background: linear-gradient(160deg,
    rgba(255,255,255,.055) 0%,
    rgba(120,5,5,.12)      100%);
  border: 1px solid rgba(255,75,75,.16);
  border-radius: 24px;
  padding: 28px 26px 26px;
  width: 100%;
  max-width: 308px;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,110,110,.12),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 28px 64px rgba(0,0,0,.5),
    0  0px 0 1px rgba(255,55,55,.06);
  animation: blkCardIn .5s ease both .18s;
}

/* ── Title with gradient fill ── */
.blocked-title-text {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.55px;
  line-height: 1.15;
  margin: 0 0 14px;
  background: linear-gradient(145deg, #ffffff 25%, #ffbcbc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Separator ── */
.blk-sep {
  width: 38px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,75,75,.65), transparent);
  margin: 0 auto 14px;
}

/* ── Description ── */
.blocked-desc-text {
  font-size: 14px;
  color: rgba(255,255,255,.50);
  line-height: 1.68;
  margin: 0;
}

/* ── Support button ── */
.blk-support-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 11px 22px;
  border-radius: 50px;
  background: linear-gradient(135deg, rgba(231,76,60,.22) 0%, rgba(192,57,43,.32) 100%);
  border: 1px solid rgba(255,100,100,.35);
  color: rgba(255,210,210,.9);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .3px;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 2px 16px rgba(200,50,50,.18), inset 0 1px 0 rgba(255,255,255,.08);
  animation: blkCardIn .5s ease both .38s;
}
.blk-support-btn:hover,
.blk-support-btn:focus-visible {
  background: linear-gradient(135deg, rgba(231,76,60,.38) 0%, rgba(192,57,43,.48) 100%);
  border-color: rgba(255,120,120,.55);
  box-shadow: 0 4px 24px rgba(220,60,60,.32), inset 0 1px 0 rgba(255,255,255,.12);
  transform: translateY(-1px);
  color: #fff;
  outline: none;
}
.blk-support-btn:active {
  transform: translateY(0);
}

/* ── Bottom watermark ── */
.blocked-watermark {
  font-size: 10.5px;
  color: rgba(255,255,255,.15);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 26px;
  animation: blkCardIn .5s ease both .42s;
}

@keyframes blkCardIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Bottom vignette ── */
.blocked-overlay-bg::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 38%;
  background: linear-gradient(to top, rgba(4,0,0,.72) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* ══════════════════════════════════════════════════════════════════
   ── Stars theme — Recipient & Payment premium polish (dark mode) ──
   ══════════════════════════════════════════════════════════════════ */

/* Summary card — gold gradient border + warm background */
body[data-theme="stars"] .summary-card {
  background: linear-gradient(160deg, rgba(255,198,60,.10) 0%, rgba(12,22,50,.65) 55%, rgba(180,130,0,.05) 100%);
  border-color: rgba(255,198,60,.28);
  box-shadow: 0 6px 24px rgba(0,0,0,.30), 0 0 0 1px rgba(255,198,60,.10) inset;
}
body[data-theme="stars"] .summary-card::after {
  background: radial-gradient(ellipse at center, rgba(255,198,60,.10) 0%, transparent 65%) !important;
}

/* Summary total value — gold tint */
body[data-theme="stars"] .summary-card .summary-row.summary-total .value {
  color: #FFD76B;
  font-weight: 700;
}

/* Segment toggle track — deep warm navy */
body[data-theme="stars"] .recipient-toggle {
  background: rgba(20,15,5,.65);
  border: 1px solid rgba(255,198,60,.18);
}
body[data-theme="stars"] .recipient-toggle button {
  color: rgba(255,220,130,.40);
}
body[data-theme="stars"] .recipient-toggle button.active {
  color: #1A0A00;
  font-weight: 700;
}

/* Segment pill — rich gold gradient */
body[data-theme="stars"] .segment-pill {
  background: linear-gradient(145deg, #FFD55A 0%, #E8A020 100%) !important;
  box-shadow:
    0 3px 12px rgba(255,185,30,.45),
    0 1px 3px rgba(200,130,0,.30),
    inset 0 1px 0 rgba(255,255,255,.30) !important;
}

/* Recipient display card — gold accent border */
body[data-theme="stars"] .recipient-display {
  background: rgba(20,14,4,.55);
  border-color: rgba(255,198,60,.22);
  box-shadow: 0 4px 16px rgba(0,0,0,.25), 0 0 0 1px rgba(255,198,60,.08) inset;
}
body[data-theme="stars"] .recipient-display .label {
  color: rgba(255,210,100,.50);
}
body[data-theme="stars"] #self-username {
  color: #FFD76B;
}

/* Recipient input — gold border, warm dark bg */
body[data-theme="stars"] .recipient-input input {
  background: rgba(18,12,3,.60) !important;
  border: 1px solid rgba(255,198,60,.25) !important;
  color: rgba(255,245,220,.92) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
body[data-theme="stars"] .recipient-input input::placeholder {
  color: rgba(255,200,80,.28) !important;
}
body[data-theme="stars"] .recipient-input input:focus {
  border-color: rgba(255,198,60,.60) !important;
  box-shadow: 0 0 0 3px rgba(255,185,30,.14), 0 2px 10px rgba(255,160,0,.08) !important;
  outline: none !important;
}
body[data-theme="stars"] .recipient-input input.valid {
  border-color: rgba(100,220,100,.45) !important;
}

/* ── Dark themes: "Другому" wrapper = карточка как "Себе" ── */
body[data-theme="stars"] #recipient-other-input,
body[data-theme="steam"] #recipient-other-input,
body[data-theme="premium"] #recipient-other-input,
body[data-theme="gifts"] #recipient-other-input {
  border-radius: var(--radius-md) !important;
  padding: 14px 16px !important;
}
/* Точные цвета карточки по каждой теме — идентично .recipient-display */
body[data-theme="stars"] #recipient-other-input {
  background: rgba(20,14,4,.55) !important;
  border: 1px solid rgba(255,198,60,.22) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.25), 0 0 0 1px rgba(255,198,60,.08) inset !important;
}
body[data-theme="steam"] #recipient-other-input {
  background: rgba(15,26,43,.60) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: var(--card-shadow) !important;
}
body[data-theme="premium"] #recipient-other-input {
  background: rgba(12,5,24,.55) !important;
  border: 1px solid rgba(183,116,255,.22) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.25), 0 0 0 1px rgba(183,116,255,.08) inset !important;
}
body[data-theme="gifts"] #recipient-other-input {
  background: rgba(2,14,10,.55) !important;
  border: 1px solid rgba(45,255,160,.22) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.25), 0 0 0 1px rgba(45,255,160,.07) inset !important;
}
/* Метка ПОЛУЧАТЕЛЬ — цвет по теме */
body[data-theme="stars"] #recipient-other-input::before,
body[data-theme="steam"] #recipient-other-input::before,
body[data-theme="premium"] #recipient-other-input::before,
body[data-theme="gifts"] #recipient-other-input::before {
  content: attr(data-label);
  display: block;
  font-size: 11px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: 6px;
}
body[data-theme="stars"] #recipient-other-input::before { color: rgba(255,210,100,.50); }
body[data-theme="steam"] #recipient-other-input::before { color: var(--text-secondary); }
body[data-theme="premium"] #recipient-other-input::before { color: rgba(200,155,255,.50); }
body[data-theme="gifts"] #recipient-other-input::before { color: rgba(100,220,170,.50); }
/* Инпут — прозрачный, без рамки, жирный */
body[data-theme="stars"] #recipient-other-input input,
body[data-theme="steam"] #recipient-other-input input,
body[data-theme="premium"] #recipient-other-input input,
body[data-theme="gifts"] #recipient-other-input input {
  background: transparent !important; border: none !important;
  box-shadow: none !important; outline: none !important;
  padding: 0 32px 0 0 !important;
  font-size: 16px !important; font-weight: 700 !important;
  width: 100% !important; border-radius: 0 !important; height: auto !important;
  -webkit-appearance: none !important;
}
/* Цвета текста — идентично #self-username */
body[data-theme="stars"] #recipient-other-input input { color: #FFD76B !important; -webkit-text-fill-color: #FFD76B !important; }
body[data-theme="steam"] #recipient-other-input input { color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important; }
body[data-theme="premium"] #recipient-other-input input { color: #d09aff !important; -webkit-text-fill-color: #d09aff !important; }
body[data-theme="gifts"] #recipient-other-input input { color: #2DFFC4 !important; -webkit-text-fill-color: #2DFFC4 !important; }
/* Плейсхолдеры */
body[data-theme="stars"] #recipient-other-input input::placeholder { color: rgba(255,210,100,.30) !important; font-weight: 400 !important; -webkit-text-fill-color: rgba(255,210,100,.30) !important; }
body[data-theme="steam"] #recipient-other-input input::placeholder { color: rgba(61,235,255,.28) !important; font-weight: 400 !important; -webkit-text-fill-color: rgba(61,235,255,.28) !important; }
body[data-theme="premium"] #recipient-other-input input::placeholder { color: rgba(200,155,255,.30) !important; font-weight: 400 !important; -webkit-text-fill-color: rgba(200,155,255,.30) !important; }
body[data-theme="gifts"] #recipient-other-input input::placeholder { color: rgba(45,255,160,.26) !important; font-weight: 400 !important; -webkit-text-fill-color: rgba(45,255,160,.26) !important; }
/* Focus: подсветка рамки */
body[data-theme="stars"] #recipient-other-input:focus-within { border-color: rgba(255,198,60,.50) !important; box-shadow: 0 4px 16px rgba(0,0,0,.25), 0 0 0 3px rgba(255,185,30,.12) inset !important; }
body[data-theme="steam"] #recipient-other-input:focus-within { border-color: rgba(61,235,255,.40) !important; box-shadow: 0 0 0 2px rgba(61,235,255,.10) !important; }
body[data-theme="premium"] #recipient-other-input:focus-within { border-color: rgba(183,116,255,.50) !important; box-shadow: 0 4px 16px rgba(0,0,0,.25), 0 0 0 3px rgba(183,116,255,.12) inset !important; }
body[data-theme="gifts"] #recipient-other-input:focus-within { border-color: rgba(45,255,196,.50) !important; box-shadow: 0 4px 16px rgba(0,0,0,.25), 0 0 0 3px rgba(45,255,160,.10) inset !important; }
/* Галочка валидации — позиция с учётом метки ПОЛУЧАТЕЛЬ */
body[data-theme="stars"] #recipient-other-input .username-check-icon,
body[data-theme="steam"] #recipient-other-input .username-check-icon,
body[data-theme="premium"] #recipient-other-input .username-check-icon,
body[data-theme="gifts"] #recipient-other-input .username-check-icon { top: calc(50% + 10px) !important; transform: translateY(-50%) !important; }

/* Payment methods — gold-tinted cards */
body[data-theme="stars"] .pay-method {
  background: linear-gradient(135deg, rgba(255,198,60,.08), rgba(14,16,28,.55));
  border-color: rgba(255,198,60,.15);
}
body[data-theme="stars"] .pay-method:hover {
  border-color: rgba(255,198,60,.38);
  background: linear-gradient(135deg, rgba(255,198,60,.13), rgba(14,16,28,.60));
}
body[data-theme="stars"] .pay-method.selected {
  border-color: rgba(255,198,60,.60);
  background: linear-gradient(135deg, rgba(255,198,60,.14), rgba(12,16,32,.60));
  box-shadow: 0 0 0 1px rgba(255,198,60,.22), 0 6px 22px rgba(255,185,30,.12);
}
body[data-theme="stars"] .pay-method.selected .pm-name {
  color: #FFD76B;
}

/* Payment screen summary card — same gold treatment */
body[data-theme="stars"] #payment-summary.summary-card {
  background: linear-gradient(160deg, rgba(255,198,60,.10) 0%, rgba(12,22,50,.65) 55%, rgba(180,130,0,.05) 100%);
  border-color: rgba(255,198,60,.28);
  box-shadow: 0 6px 24px rgba(0,0,0,.30), 0 0 0 1px rgba(255,198,60,.10) inset;
}

/* ══════════════════════════════════════════════════════════════════
   ── Steam theme — Premium polish v262 (dark mode)
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Banner: насыщенный синий — по паттерну Stars ── */

/* Скрыть hero-glow div: он не имеет базовых стилей и рисуется поверх маскота */
#screen-steam .hero-glow {
  display: none !important;
}

/* Насыщенный фон баннера Steam — богатые радиальные градиенты как у Stars */
#screen-steam .hero-banner.hero-v1 {
  border-color: rgba(74,182,255,.32);
  box-shadow:
    0 8px 32px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 1px 0 rgba(74,182,255,.18) inset;
  background:
    radial-gradient(ellipse 60% 80% at 50% 40%, rgba(40,120,255,.10), transparent 70%),
    radial-gradient(700px 420px at 10% 20%, rgba(60,140,255,.20), transparent 60%),
    radial-gradient(680px 420px at 90% 10%, rgba(20,80,220,.14), transparent 60%),
    linear-gradient(135deg, #0d1f3c 0%, #0a1628 60%, #071020 100%);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Маскот Steam — синий drop-shadow как у Stars золотой */
#screen-steam .hero-mascot {
  filter:
    drop-shadow(0 10px 22px rgba(0,0,0,.50))
    drop-shadow(0 0 22px rgba(60,140,255,.55)) !important;
  animation: none !important;
}

/* ::before portal glow за маскотом — усиленный синий */
#screen-steam .hero-mascot-wrap::before {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 55%),
    radial-gradient(circle at 50% 55%, rgba(40,120,255,.28), transparent 62%);
  animation: none !important;
}

/* Subtitle — теплее, чуть ярче */
#screen-steam .hero-subtitle {
  font-size: 13px !important;
  opacity: .85 !important;
  color: rgba(160,210,255,.85) !important;
}

/* ── 2. Section labels — blue left-accent bar ── */
body[data-theme="steam"] .section-title {
  position: relative;
  padding-left: 10px !important;
}
body[data-theme="steam"] .section-title::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 13px;
  border-radius: 2px;
  background: linear-gradient(180deg, #6eb8ff 0%, #2a82e8 100%);
  box-shadow: 0 0 6px rgba(74,182,255,.55);
}

/* ── 3. Login input — enhanced: brighter border, subtle inner glow ── */
/* (Base already defined at line ~6406, just amplify) */
body[data-theme="steam"] .recipient-input input {
  background: rgba(5,16,38,.72) !important;
  border: 1px solid rgba(74,182,255,.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(140,210,255,.10),
    inset 0 -1px 0 rgba(30,100,200,.12) !important;
}
body[data-theme="steam"] .recipient-input input:focus {
  border-color: rgba(74,182,255,.70) !important;
  box-shadow:
    0 0 0 3px rgba(74,182,255,.14),
    inset 0 1px 0 rgba(140,210,255,.18),
    0 2px 14px rgba(40,120,255,.10) !important;
}

/* ── 4. Amount input row — blue glass treatment ── */
body[data-theme="steam"] .custom-input-row {
  background: rgba(5,16,38,.72) !important;
  border-color: rgba(74,182,255,.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(140,210,255,.08),
    0 2px 10px rgba(10,50,140,.15) !important;
}
body[data-theme="steam"] .custom-input-row:focus-within {
  border-color: rgba(74,182,255,.62) !important;
  box-shadow:
    0 0 0 3px rgba(74,182,255,.12),
    inset 0 1px 0 rgba(140,210,255,.16),
    0 2px 14px rgba(40,120,255,.10) !important;
}
body[data-theme="steam"] .custom-input-row input {
  color: rgba(220,240,255,.92) !important;
}
/* ₽ symbol — blue accent */
body[data-theme="steam"] .custom-input-row .label {
  color: rgba(100,180,255,.70) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
}

/* ── 5. Calc widget — top gradient accent line ── */
body[data-theme="steam"] .steam-calc-widget {
  border-top: 2px solid transparent !important;
  background:
    linear-gradient(rgba(5,16,35,.82), rgba(5,16,35,.82)) padding-box,
    linear-gradient(90deg, rgba(74,182,255,.55), rgba(30,100,220,.30), rgba(74,182,255,.55)) border-box !important;
  border-top-color: transparent !important;
  position: relative;
  overflow: hidden;
}
/* Top shimmer accent bar */
body[data-theme="steam"] .steam-calc-widget::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(100,180,255,.55) 30%,
    rgba(180,230,255,.80) 50%,
    rgba(100,180,255,.55) 70%,
    transparent 100%);
  pointer-events: none;
}
/* "К зачислению на Steam:" — styled as badge */
body[data-theme="steam"] .steam-rate-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(40,100,200,.18);
  border: 1px solid rgba(74,182,255,.18);
  border-radius: 6px;
  padding: 3px 9px;
  margin-bottom: 14px !important;
  font-size: 10px !important;
  letter-spacing: 1.4px !important;
  color: rgba(150,210,255,.65) !important;
}

/* ── 6. Payment screen — summary card blue border ── */
body[data-theme="steam"] .summary-card,
body[data-theme="steam"] #payment-summary.summary-card {
  background: linear-gradient(160deg,
    rgba(40,120,255,.09) 0%,
    rgba(5,16,38,.70) 55%,
    rgba(20,70,180,.05) 100%);
  border-color: rgba(74,182,255,.24) !important;
  box-shadow:
    0 6px 24px rgba(0,0,0,.30),
    0 0 0 1px rgba(74,182,255,.08) inset !important;
}
body[data-theme="steam"] .summary-card::after {
  background: radial-gradient(ellipse at center,
    rgba(60,140,255,.09) 0%, transparent 65%) !important;
}
/* Total value — bright blue */
body[data-theme="steam"] .summary-card .summary-row.summary-total .value {
  color: rgba(160,220,255,.96) !important;
}

/* ── 7. Payment methods — hover lift + selected left glow + checkmark anim ── */
body[data-theme="steam"] .pay-method {
  transition:
    border-color .18s,
    box-shadow .18s,
    transform .15s cubic-bezier(.22,.68,0,1.2) !important;
}
body[data-theme="steam"] .pay-method:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 6px 20px rgba(10,60,160,.22),
    inset 0 1px 0 rgba(140,210,255,.06) !important;
}
body[data-theme="steam"] .pay-method.selected {
  box-shadow:
    inset 3px 0 0 rgba(74,182,255,.70),
    0 0 0 1px rgba(74,182,255,.18),
    0 6px 22px rgba(10,60,180,.20) !important;
}
/* Checkmark appearance animation */
@keyframes pmCheckIn {
  from { transform: scale(0) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);  opacity: 1; }
}
body[data-theme="steam"] .pay-method.selected .pm-check {
  animation: pmCheckIn .22s cubic-bezier(.22,.68,0,1.2) forwards;
}

/* ── 8. "СПОСОБ ОПЛАТЫ" label — blue dot accent ── */
body[data-theme="steam"] #payment-method-label {
  position: relative;
  padding-left: 10px !important;
}
body[data-theme="steam"] #payment-method-label::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 13px;
  border-radius: 2px;
  background: linear-gradient(180deg, #6eb8ff 0%, #2a82e8 100%);
  box-shadow: 0 0 6px rgba(74,182,255,.55);
}

/* ── Light theme: section labels — blue accent bar ── */
body.theme-light[data-theme="steam"] .section-title {
  padding-left: 10px !important;
}
body.theme-light[data-theme="steam"] .section-title::before {
  background: linear-gradient(180deg, #6ab4ff 0%, #3a7fe8 100%);
  box-shadow: none;
}
body.theme-light[data-theme="steam"] #payment-method-label {
  padding-left: 10px !important;
}
body.theme-light[data-theme="steam"] #payment-method-label::before {
  background: linear-gradient(180deg, #6ab4ff 0%, #3a7fe8 100%);
  box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════════
   ── Premium theme — full polish v266 (dark + light)
   ══════════════════════════════════════════════════════════════════ */

/* ── 2. Product cards — левая фиолетовая полоска-акцент ── */
body[data-theme="premium"] .product-card {
  position: relative;
}
body[data-theme="premium"] .product-card::before {
  content: '';
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, #c98bff 0%, #8f4fff 100%);
  box-shadow: 0 0 8px rgba(183,116,255,.55);
  pointer-events: none;
}
/* Featured card — более яркая полоска + shimmer */
body[data-theme="premium"] .product-card.premium-featured::before {
  background: linear-gradient(180deg, #e0b0ff 0%, #b06eff 50%, #8f4fff 100%);
  box-shadow: 0 0 12px rgba(200,140,255,.70);
  top: 12px; bottom: 12px;
}

/* Hover — поднять все карточки как featured */
body[data-theme="premium"] .product-card:hover {
  transform: translateY(-2px) !important;
}

/* ── Цена — усиленный glow ── */
body[data-theme="premium"] .product-card .p-price {
  filter:
    drop-shadow(0 0 6px rgba(183,116,255,.60))
    drop-shadow(0 0 16px rgba(140,60,255,.35)) !important;
}

/* ── 3. Recipient screen — Summary card фиолетовый border ── */
body[data-theme="premium"] .summary-card {
  background: linear-gradient(160deg,
    rgba(183,116,255,.09) 0%,
    rgba(8,4,22,.68) 55%,
    rgba(120,40,200,.05) 100%);
  border-color: rgba(183,116,255,.26) !important;
  box-shadow:
    0 6px 24px rgba(0,0,0,.30),
    0 0 0 1px rgba(183,116,255,.08) inset !important;
}
body[data-theme="premium"] .summary-card::after {
  background: radial-gradient(ellipse at center,
    rgba(183,116,255,.10) 0%, transparent 65%) !important;
}
/* Total value — фиолетовый */
body[data-theme="premium"] .summary-card .summary-row.summary-total .value {
  color: #d09aff !important;
  font-weight: 700 !important;
}

/* ── Segment toggle dark ── */
body[data-theme="premium"] .recipient-toggle {
  background: rgba(14,6,28,.65);
  border: 1px solid rgba(183,116,255,.18);
}
body[data-theme="premium"] .recipient-toggle button {
  color: rgba(210,160,255,.40);
}

/* ── Recipient display dark ── */
body[data-theme="premium"] .recipient-display {
  background: rgba(12,5,24,.55);
  border-color: rgba(183,116,255,.22);
  box-shadow: 0 4px 16px rgba(0,0,0,.25), 0 0 0 1px rgba(183,116,255,.08) inset;
}
body[data-theme="premium"] .recipient-display .label {
  color: rgba(200,155,255,.50);
}
body[data-theme="premium"] #self-username {
  color: #d09aff;
}

/* ── Recipient input dark ── */
body[data-theme="premium"] .recipient-input input {
  background: rgba(10,4,22,.65) !important;
  border: 1px solid rgba(183,116,255,.26) !important;
  color: rgba(230,210,255,.92) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
body[data-theme="premium"] .recipient-input input::placeholder {
  color: rgba(183,116,255,.28) !important;
}
body[data-theme="premium"] .recipient-input input:focus {
  border-color: rgba(183,116,255,.65) !important;
  box-shadow: 0 0 0 3px rgba(183,116,255,.13),
    inset 0 1px 0 rgba(210,160,255,.15) !important;
  outline: none !important;
}

/* ── 4. Payment screen ── */

/* Section label «СПОСОБ ОПЛАТЫ» — фиолетовая полоска */
body[data-theme="premium"] #payment-method-label {
  position: relative;
  padding-left: 10px !important;
}
body[data-theme="premium"] #payment-method-label::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 13px;
  border-radius: 2px;
  background: linear-gradient(180deg, #c98bff 0%, #8f4fff 100%);
  box-shadow: 0 0 6px rgba(183,116,255,.55);
}

/* Payment methods — hover lift + selected left glow + checkmark anim */
body[data-theme="premium"] .pay-method {
  transition:
    border-color .18s,
    box-shadow .18s,
    transform .15s cubic-bezier(.22,.68,0,1.2) !important;
}
body[data-theme="premium"] .pay-method:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 6px 20px rgba(80,20,140,.22),
    inset 0 1px 0 rgba(200,160,255,.06) !important;
}
body[data-theme="premium"] .pay-method.selected {
  box-shadow:
    inset 3px 0 0 rgba(183,116,255,.70),
    0 0 0 1px rgba(183,116,255,.18),
    0 6px 22px rgba(110,40,200,.20) !important;
}
/* Чекмарк — анимация появления */
body[data-theme="premium"] .pay-method.selected .pm-check {
  animation: pmCheckIn .22s cubic-bezier(.22,.68,0,1.2) forwards;
}

/* Payment summary card ── фиолетовый border */
body[data-theme="premium"] #payment-summary.summary-card {
  background: linear-gradient(160deg,
    rgba(183,116,255,.09) 0%,
    rgba(8,4,22,.68) 55%,
    rgba(120,40,200,.05) 100%);
  border-color: rgba(183,116,255,.26) !important;
  box-shadow:
    0 6px 24px rgba(0,0,0,.30),
    0 0 0 1px rgba(183,116,255,.08) inset !important;
}

/* ── Light theme overrides ── */
body.theme-light[data-theme="premium"] #payment-method-label {
  padding-left: 10px !important;
}
body.theme-light[data-theme="premium"] #payment-method-label::before {
  background: linear-gradient(180deg, #c98bff 0%, #8f4fff 100%);
  box-shadow: none;
}
/* Light: product card accent bar */
body.theme-light[data-theme="premium"] .product-card::before {
  background: linear-gradient(180deg, #b56bff 0%, #7c3cdf 100%);
  box-shadow: none;
  opacity: .70;
}
body.theme-light[data-theme="premium"] .product-card.premium-featured::before {
  background: linear-gradient(180deg, #c98bff 0%, #8f4fff 100%);
  box-shadow: none;
  opacity: .85;
}

/* ══════════════════════════════════════════════════════════════════
   ── Gifts theme — full polish v267 (dark + light)
   ══════════════════════════════════════════════════════════════════ */

/* ── 2. Product cards — левая изумрудная полоска ── */
body[data-theme="gifts"] .product-card {
  position: relative;
}
body[data-theme="gifts"] .product-card::before {
  content: '';
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, #2DFFC4 0%, #0fad80 100%);
  box-shadow: 0 0 8px rgba(45,255,160,.55);
  pointer-events: none;
  z-index: 2;
}
/* gift-top — ярче полоска */
body[data-theme="gifts"] .product-card.gift-top::before {
  background: linear-gradient(180deg, #5fffd6 0%, #2DFFC4 50%, #0fad80 100%);
  box-shadow: 0 0 12px rgba(45,255,196,.70);
  top: 10px; bottom: 10px;
}
/* gift-low — тише */
body[data-theme="gifts"] .product-card.gift-low::before {
  opacity: .55;
  box-shadow: none;
}

/* ── 3. Recipient screen ── */

/* Summary card — изумрудный border */
body[data-theme="gifts"] .summary-card {
  background: linear-gradient(160deg,
    rgba(45,255,160,.09) 0%,
    rgba(2,14,10,.68) 55%,
    rgba(0,180,100,.05) 100%);
  border-color: rgba(45,255,160,.24) !important;
  box-shadow:
    0 6px 24px rgba(0,0,0,.30),
    0 0 0 1px rgba(45,255,160,.07) inset !important;
}
body[data-theme="gifts"] .summary-card::after {
  background: radial-gradient(ellipse at center,
    rgba(45,255,160,.10) 0%, transparent 65%) !important;
}
/* Total value — изумрудный */
body[data-theme="gifts"] .summary-card .summary-row.summary-total .value {
  color: #2DFFC4 !important;
  font-weight: 700 !important;
}

/* Segment toggle track */
body[data-theme="gifts"] .recipient-toggle {
  background: rgba(2,18,12,.65);
  border: 1px solid rgba(45,255,160,.18);
}
body[data-theme="gifts"] .recipient-toggle button {
  color: rgba(150,255,200,.38);
}

/* Recipient display card */
body[data-theme="gifts"] .recipient-display {
  background: rgba(2,14,10,.55);
  border-color: rgba(45,255,160,.22);
  box-shadow: 0 4px 16px rgba(0,0,0,.25), 0 0 0 1px rgba(45,255,160,.07) inset;
}
body[data-theme="gifts"] .recipient-display .label {
  color: rgba(100,220,170,.50);
}
body[data-theme="gifts"] #self-username {
  color: #2DFFC4;
}

/* Recipient input */
body[data-theme="gifts"] .recipient-input input {
  background: rgba(2,12,8,.65) !important;
  border: 1px solid rgba(45,255,160,.24) !important;
  color: rgba(210,255,235,.92) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
body[data-theme="gifts"] .recipient-input input::placeholder {
  color: rgba(45,255,160,.25) !important;
}
body[data-theme="gifts"] .recipient-input input:focus {
  border-color: rgba(45,255,196,.65) !important;
  box-shadow:
    0 0 0 3px rgba(45,255,160,.12),
    inset 0 1px 0 rgba(100,255,210,.14) !important;
  outline: none !important;
}

/* ── 4. Payment screen ── */

/* Section label accent bar */
body[data-theme="gifts"] #payment-method-label {
  position: relative;
  padding-left: 10px !important;
}
body[data-theme="gifts"] #payment-method-label::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 13px;
  border-radius: 2px;
  background: linear-gradient(180deg, #2DFFC4 0%, #0fad80 100%);
  box-shadow: 0 0 6px rgba(45,255,160,.55);
}

/* Payment methods — hover lift + selected left stripe + checkmark anim */
body[data-theme="gifts"] .pay-method {
  transition:
    border-color .18s,
    box-shadow .18s,
    transform .15s cubic-bezier(.22,.68,0,1.2) !important;
}
body[data-theme="gifts"] .pay-method:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 6px 20px rgba(0,100,60,.20),
    inset 0 1px 0 rgba(100,255,200,.05) !important;
}
body[data-theme="gifts"] .pay-method.selected {
  box-shadow:
    inset 3px 0 0 rgba(45,255,196,.70),
    0 0 0 1px rgba(45,255,196,.18),
    0 6px 22px rgba(0,150,90,.18) !important;
}
/* Checkmark animation */
body[data-theme="gifts"] .pay-method.selected .pm-check {
  animation: pmCheckIn .22s cubic-bezier(.22,.68,0,1.2) forwards;
}

/* Payment summary card */
body[data-theme="gifts"] #payment-summary.summary-card {
  background: linear-gradient(160deg,
    rgba(45,255,160,.09) 0%,
    rgba(2,14,10,.68) 55%,
    rgba(0,180,100,.05) 100%);
  border-color: rgba(45,255,160,.24) !important;
  box-shadow:
    0 6px 24px rgba(0,0,0,.30),
    0 0 0 1px rgba(45,255,160,.07) inset !important;
}

/* ── Light theme overrides ── */
body.theme-light[data-theme="gifts"] #payment-method-label {
  padding-left: 10px !important;
}
body.theme-light[data-theme="gifts"] #payment-method-label::before {
  background: linear-gradient(180deg, #28b870 0%, #1a8050 100%);
  box-shadow: none;
}
/* Light: product card accent bar */
body.theme-light[data-theme="gifts"] .product-card::before {
  background: linear-gradient(180deg, #28b870 0%, #1a8050 100%);
  box-shadow: none;
  opacity: .70;
}
body.theme-light[data-theme="gifts"] .product-card.gift-top::before {
  background: linear-gradient(180deg, #3dd890 0%, #1a9060 100%);
  box-shadow: none;
  opacity: .85;
}
body.theme-light[data-theme="gifts"] .product-card.gift-low::before {
  opacity: .45;
}

/* ============================================================
   PROFILE SCREEN — v270 Premium Polish (fixed ring + bars)
   ============================================================ */

/* ── 1. Background — stronger two-layer glow + breathing ── */
@keyframes profileGlowBreathe {
  0%, 100% { opacity: .85; transform: translateX(-50%) scaleY(1.00); }
  50%       { opacity: 1.00; transform: translateX(-50%) scaleY(1.06); }
}

#screen-profile::before {
  width: 560px; height: 540px;
  background:
    radial-gradient(ellipse 72% 58% at 50% 0%,
      rgba(61,235,255,.13) 0%,
      rgba(37,99,235,.08) 42%,
      transparent 68%),
    radial-gradient(ellipse 44% 32% at 20% 85%,
      rgba(37,99,235,.07) 0%,
      transparent 58%),
    radial-gradient(ellipse 44% 32% at 80% 75%,
      rgba(183,116,255,.06) 0%,
      transparent 58%);
  animation: profileGlowBreathe 6s ease-in-out infinite;
}

/* ── 2. Avatar — spinning gradient ring ──
   Strategy: dedicated .avatar-ring-wrap div wraps .profile-avatar.
   The ring is a sibling div .avatar-ring inside the wrapper.
   This avoids any top/left pixel-guessing — everything is relative
   to the wrapper which is exactly avatar-sized.                      */

@keyframes avatarRingSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Ambient glow blob stays on ::before of avatar-wrap (unchanged logic) */
.profile-avatar-wrap::before {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 160px; height: 160px;
  background: radial-gradient(circle,
    rgba(61,235,255,.25) 0%,
    rgba(37,99,235,.14) 38%,
    transparent 70%);
  filter: blur(16px);
  animation: none;
}

/* Wrapper — same size as avatar, flex-centered, relative for ring */
.avatar-ring-wrap {
  position: relative;
  width: 100px; height: 100px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  z-index: 1;
  margin-bottom: 0; /* name/username handled by profile-avatar-wrap gap */
}

/* The rotating ring — absolutely fills wrapper + 5px overflow each side */
.avatar-ring {
  position: absolute;
  inset: -5px;           /* 5px outside avatar on all sides = 110×110 */
  border-radius: 50%;
  background: conic-gradient(
    rgba(61,235,255,.00)   0deg,
    rgba(61,235,255,.95)  80deg,
    rgba(183,116,255,.85) 180deg,
    rgba(37,99,235,.75)   280deg,
    rgba(61,235,255,.00)  360deg
  );
  filter: blur(2.5px);
  animation: avatarRingSpin 4s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* Avatar sits above the ring */
.profile-avatar {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  box-shadow:
    0 0 0 3px rgba(61,235,255,.42),
    0 0 0 5.5px rgba(61,235,255,.10),
    0 10px 32px rgba(37,99,235,.50),
    0 2px 8px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.15);
}

/* ── 3. Name — soft colour-breathe animation ── */
@keyframes profileNameBreathe {
  0%   { color: #ffffff;        text-shadow: 0 0 0px rgba(61,235,255,0); }
  40%  { color: #b8f5ff;        text-shadow: 0 0 18px rgba(61,235,255,.35); }
  60%  { color: #3DEBFF;        text-shadow: 0 0 28px rgba(61,235,255,.55), 0 0 8px rgba(61,235,255,.30); }
  100% { color: #ffffff;        text-shadow: 0 0 0px rgba(61,235,255,0); }
}

.profile-name {
  color: #ffffff;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
  animation: profileNameBreathe 4s ease-in-out infinite;
  text-shadow: none;
}

/* ── 4. Username — subtle cyan accent ── */
.profile-username {
  color: rgba(61,235,255,.68);
  text-shadow: 0 0 10px rgba(61,235,255,.22);
}

/* ── 5. Per-button left accent bars (data-btn attribute) ── */

/* Base ::after — the colored left stripe, always visible at low opacity */
#screen-profile .profile-menu-btn::after {
  content: '';
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 3px;
  border-radius: 0 2px 2px 0;
  transition: opacity .22s ease, box-shadow .22s ease;
  pointer-events: none;
  z-index: 2;
}

/* Settings ⚙️ — blue-grey */
#screen-profile .profile-menu-btn[data-btn="settings"]::after {
  background: linear-gradient(180deg, #90b4d8 0%, #5a8fc0 100%);
  box-shadow: 0 0 7px rgba(144,180,216,.55);
  opacity: .55;
}
#screen-profile .profile-menu-btn[data-btn="settings"]:hover::after { opacity: 1; }

/* Orders 📦 — amber */
#screen-profile .profile-menu-btn[data-btn="orders"]::after {
  background: linear-gradient(180deg, #F6C453 0%, #d4942a 100%);
  box-shadow: 0 0 7px rgba(246,196,83,.60);
  opacity: .55;
}
#screen-profile .profile-menu-btn[data-btn="orders"]:hover::after { opacity: 1; }

/* Stats 📊 — green */
#screen-profile .profile-menu-btn[data-btn="stats"]::after {
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
  box-shadow: 0 0 7px rgba(74,222,128,.60);
  opacity: .55;
}
#screen-profile .profile-menu-btn[data-btn="stats"]:hover::after { opacity: 1; }

/* Documents 📄 — steel grey */
#screen-profile .profile-menu-btn[data-btn="documents"]::after {
  background: linear-gradient(180deg, #b0bec5 0%, #78909c 100%);
  box-shadow: 0 0 7px rgba(176,190,197,.45);
  opacity: .55;
}
#screen-profile .profile-menu-btn[data-btn="documents"]:hover::after { opacity: 1; }

/* Referral 🎁 — pink-gold */
#screen-profile .profile-menu-btn[data-btn="referral"]::after {
  background: linear-gradient(180deg, #f9a8d4 0%, #e879a8 100%);
  box-shadow: 0 0 7px rgba(249,168,212,.60);
  opacity: .55;
}
#screen-profile .profile-menu-btn[data-btn="referral"]:hover::after { opacity: 1; }

/* Support 💬 — cyan */
#screen-profile .profile-menu-btn[data-btn="support"]::after {
  background: linear-gradient(180deg, #3DEBFF 0%, #0ea5d4 100%);
  box-shadow: 0 0 7px rgba(61,235,255,.60);
  opacity: .55;
}
#screen-profile .profile-menu-btn[data-btn="support"]:hover::after { opacity: 1; }

/* ── 6. Per-icon-wrap unique tints ── */
#screen-profile .profile-menu-btn[data-btn="settings"] .icon-wrap {
  background: linear-gradient(145deg, rgba(144,180,216,.22) 0%, rgba(90,143,192,.18) 100%);
  border-color: rgba(144,180,216,.22);
}
#screen-profile .profile-menu-btn[data-btn="orders"] .icon-wrap {
  background: linear-gradient(145deg, rgba(246,196,83,.22) 0%, rgba(212,148,42,.18) 100%);
  border-color: rgba(246,196,83,.22);
}
#screen-profile .profile-menu-btn[data-btn="stats"] .icon-wrap {
  background: linear-gradient(145deg, rgba(74,222,128,.22) 0%, rgba(22,163,74,.18) 100%);
  border-color: rgba(74,222,128,.20);
}
#screen-profile .profile-menu-btn[data-btn="documents"] .icon-wrap {
  background: linear-gradient(145deg, rgba(176,190,197,.18) 0%, rgba(120,144,156,.14) 100%);
  border-color: rgba(176,190,197,.18);
}
#screen-profile .profile-menu-btn[data-btn="referral"] .icon-wrap {
  background: linear-gradient(145deg, rgba(249,168,212,.22) 0%, rgba(232,121,168,.18) 100%);
  border-color: rgba(249,168,212,.20);
}
#screen-profile .profile-menu-btn[data-btn="support"] .icon-wrap {
  background: linear-gradient(145deg, rgba(61,235,255,.22) 0%, rgba(14,165,212,.18) 100%);
  border-color: rgba(61,235,255,.20);
}

/* ── 7. Light-theme overrides ── */
body.theme-light #screen-profile::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(37,99,235,.07) 0%, rgba(37,99,235,.03) 40%, transparent 70%);
  animation: none;
}
body.theme-light .profile-avatar-wrap::before { display: none; }
body.theme-light .avatar-ring { display: none; }
body.theme-light .profile-name {
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
  animation: profileNameBreatheLight 4s ease-in-out infinite;
}
@keyframes profileNameBreatheLight {
  0%   { color: #1f2430; text-shadow: none; }
  50%  { color: #1a4fc4; text-shadow: 0 0 12px rgba(37,99,235,.20); }
  100% { color: #1f2430; text-shadow: none; }
}
body.theme-light .profile-username {
  color: rgba(37,99,235,.65);
  text-shadow: none;
}
body.theme-light #screen-profile .profile-menu-btn[data-btn]::after {
  box-shadow: none;
}
body.theme-light #screen-profile .profile-menu-btn[data-btn] .icon-wrap {
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* ============================================================
   ORDERS SCREEN — v273 Premium Polish
   ============================================================ */

/* ── 1. Screen background glow ── */
#screen-orders {
  position: relative;
}
#screen-orders::before {
  content: '';
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 560px; height: 500px;
  background:
    radial-gradient(ellipse 70% 52% at 50% 0%,
      rgba(61,235,255,.10) 0%,
      rgba(37,99,235,.06) 42%,
      transparent 68%),
    radial-gradient(ellipse 40% 28% at 15% 90%,
      rgba(37,99,235,.06) 0%,
      transparent 60%),
    radial-gradient(ellipse 40% 28% at 85% 75%,
      rgba(183,116,255,.04) 0%,
      transparent 60%);
  pointer-events: none;
  z-index: 0;
}
#screen-orders > * {
  position: relative;
  z-index: 1;
}

/* ── 2. Search input — glass-morphism ── */
#screen-orders .orders-search-input {
  background: rgba(4,12,21,.65) !important;
  border: 1px solid rgba(61,235,255,.20) !important;
  color: rgba(220,240,255,.92) !important;
  border-radius: var(--radius-md) !important;
  padding: 11px 14px !important;
  transition: border-color .2s, box-shadow .2s !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
#screen-orders .orders-search-input::placeholder {
  color: rgba(61,235,255,.32) !important;
}
#screen-orders .orders-search-input:focus {
  border-color: rgba(61,235,255,.55) !important;
  box-shadow:
    0 0 0 3px rgba(61,235,255,.09),
    0 0 0 1px rgba(61,235,255,.22),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  outline: none !important;
}

/* ── 3. Filter buttons — premium pill ── */
#screen-orders .orders-filter-btn {
  background: rgba(61,235,255,.06) !important;
  border: 1px solid rgba(61,235,255,.14) !important;
  color: rgba(200,230,255,.70) !important;
  opacity: 1 !important;
  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .15s cubic-bezier(.22,.68,0,1.2) !important;
  position: relative;
  overflow: hidden;
}
#screen-orders .orders-filter-btn:hover {
  background: rgba(61,235,255,.12) !important;
  border-color: rgba(61,235,255,.30) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(61,235,255,.12) !important;
}
#screen-orders .orders-filter-btn.active {
  background: linear-gradient(135deg,
    rgba(61,235,255,.28) 0%,
    rgba(37,99,235,.22) 100%) !important;
  border-color: rgba(61,235,255,.70) !important;
  color: #3DEBFF !important;
  opacity: 1 !important;
  box-shadow:
    0 0 0 1px rgba(61,235,255,.18) inset,
    0 0 14px rgba(61,235,255,.22),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}
/* Top highlight line on active filter */
#screen-orders .orders-filter-btn.active::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(61,235,255,.60), transparent);
  border-radius: 1px;
  pointer-events: none;
}

/* ── 4. Order cards — enhanced depth + status left bar ── */
#screen-orders .order-card {
  background: linear-gradient(160deg,
    rgba(61,235,255,.10) 0%,
    rgba(4,12,21,.72) 55%,
    rgba(37,99,235,.05) 100%) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow:
    0 2px 12px rgba(0,0,0,.28),
    0 1px 2px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.14) !important;
  transition:
    transform .18s cubic-bezier(.25,.46,.45,.94),
    box-shadow .18s ease,
    border-color .18s ease !important;
  position: relative;
  overflow: hidden;
}
#screen-orders .order-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(61,235,255,.24) !important;
  box-shadow:
    0 8px 28px rgba(0,0,0,.32),
    0 2px 6px rgba(0,0,0,.20),
    0 0 0 1px rgba(61,235,255,.10),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.12) !important;
}
#screen-orders .order-card:active {
  transform: scale(.984) !important;
  opacity: .90 !important;
}

/* Status-coloured left bar */
#screen-orders .order-card::before {
  content: '';
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 3px;
  border-radius: 0 2px 2px 0;
  pointer-events: none;
  z-index: 2;
}
/* delivered → green */
#screen-orders .order-card:has(.order-status-badge.delivered)::before {
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
  box-shadow: 0 0 8px rgba(74,222,128,.55);
}
/* pending / created → amber */
#screen-orders .order-card:has(.order-status-badge.pending)::before,
#screen-orders .order-card:has(.order-status-badge.created)::before {
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
  box-shadow: 0 0 8px rgba(251,191,36,.55);
}
/* failed → red */
#screen-orders .order-card:has(.order-status-badge.failed)::before {
  background: linear-gradient(180deg, #f87171 0%, #dc2626 100%);
  box-shadow: 0 0 8px rgba(248,113,113,.55);
}
/* paid → purple */
#screen-orders .order-card:has(.order-status-badge.paid)::before {
  background: linear-gradient(180deg, #a5b4fc 0%, #6d28d9 100%);
  box-shadow: 0 0 8px rgba(165,180,252,.50);
}

/* ── 5. Icon container — deeper tint ── */
#screen-orders .order-card-icon {
  background: linear-gradient(145deg,
    rgba(61,235,255,.14) 0%,
    rgba(37,99,235,.18) 100%) !important;
  border: 1px solid rgba(61,235,255,.18) !important;
  box-shadow:
    0 3px 12px rgba(37,99,235,.20),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* ── 6. Status badges — jewel border ── */
#screen-orders .order-status-badge {
  border-width: 1px;
  border-style: solid;
}
#screen-orders .order-status-badge.delivered {
  border-color: rgba(74,222,128,.28);
}
#screen-orders .order-status-badge.pending,
#screen-orders .order-status-badge.created {
  border-color: rgba(251,191,36,.28);
}
#screen-orders .order-status-badge.failed {
  border-color: rgba(248,113,113,.28);
}
#screen-orders .order-status-badge.paid {
  border-color: rgba(165,180,252,.28);
}

/* ── 7. Price label — stronger glow ── */
#screen-orders .order-price-label {
  color: rgba(230,248,255,.96) !important;
  text-shadow:
    0 0 8px rgba(61,235,255,.50),
    0 0 20px rgba(61,235,255,.22) !important;
}

/* ── 8. Load more button — accent bar + hover lift ── */
#screen-orders .load-more-btn {
  background: linear-gradient(160deg,
    rgba(61,235,255,.09) 0%,
    rgba(4,12,21,.70) 60%,
    rgba(37,99,235,.06) 100%) !important;
  border: 1px solid rgba(61,235,255,.18) !important;
  position: relative;
  overflow: hidden;
  transition:
    transform .18s cubic-bezier(.22,.68,0,1.2),
    box-shadow .18s ease,
    border-color .18s ease !important;
}
#screen-orders .load-more-btn::before {
  content: '';
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, #3DEBFF 0%, #0ea5d4 100%);
  box-shadow: 0 0 7px rgba(61,235,255,.55);
  pointer-events: none;
}
#screen-orders .load-more-btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(61,235,255,.35) !important;
  box-shadow:
    0 6px 20px rgba(0,0,0,.25),
    0 0 0 1px rgba(61,235,255,.10) !important;
}
#screen-orders .load-more-btn:active {
  transform: scale(.982) !important;
  opacity: .80 !important;
}

/* ── 9. Light-theme overrides ── */
body.theme-light #screen-orders::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(37,99,235,.06) 0%, rgba(37,99,235,.03) 40%, transparent 70%);
}
body.theme-light #screen-orders .orders-search-input {
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(37,99,235,.18) !important;
  color: #1f2430 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
}
body.theme-light #screen-orders .orders-search-input::placeholder {
  color: rgba(31,36,48,.38) !important;
}
body.theme-light #screen-orders .orders-search-input:focus {
  border-color: rgba(37,99,235,.45) !important;
  box-shadow:
    0 0 0 3px rgba(37,99,235,.09),
    0 2px 8px rgba(0,0,0,.06) !important;
}
body.theme-light #screen-orders .orders-filter-btn {
  background: rgba(37,99,235,.06) !important;
  border-color: rgba(37,99,235,.14) !important;
  color: rgba(31,36,48,.70) !important;
}
body.theme-light #screen-orders .orders-filter-btn:hover {
  background: rgba(37,99,235,.12) !important;
  border-color: rgba(37,99,235,.28) !important;
  box-shadow: 0 3px 10px rgba(37,99,235,.10) !important;
}
body.theme-light #screen-orders .orders-filter-btn.active {
  background: linear-gradient(135deg,
    rgba(37,99,235,.18) 0%,
    rgba(61,235,255,.12) 100%) !important;
  border-color: rgba(37,99,235,.55) !important;
  color: #1a4fc4 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.60),
    0 0 10px rgba(37,99,235,.14) !important;
}
body.theme-light #screen-orders .order-card {
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(0,0,0,.07) !important;
  box-shadow:
    0 2px 10px rgba(0,0,0,.08),
    0 1px 2px rgba(0,0,0,.04) !important;
}
body.theme-light #screen-orders .order-card:hover {
  border-color: rgba(37,99,235,.18) !important;
  box-shadow:
    0 6px 22px rgba(37,99,235,.12),
    0 2px 4px rgba(0,0,0,.06) !important;
}
body.theme-light #screen-orders .order-card::before {
  opacity: .65;
  box-shadow: none;
}
body.theme-light #screen-orders .order-price-label {
  text-shadow: none !important;
  color: #1f2430 !important;
}
body.theme-light #screen-orders .load-more-btn {
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(37,99,235,.16) !important;
}
body.theme-light #screen-orders .load-more-btn::before {
  background: linear-gradient(180deg, #2563eb 0%, #1a4fc4 100%);
  box-shadow: none;
}
body.theme-light #screen-orders .load-more-btn:hover {
  border-color: rgba(37,99,235,.32) !important;
  box-shadow: 0 4px 14px rgba(37,99,235,.10) !important;
}

/* ============================================================
   REVIEW FORM SCREEN — v274 Premium Polish
   ============================================================ */

/* ── 1. Screen background — warm gold glow (rating = золото) ── */
#screen-review-form {
  position: relative;
}
#screen-review-form::before {
  content: '';
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 560px; height: 520px;
  background:
    radial-gradient(ellipse 68% 50% at 50% 0%,
      rgba(246,196,83,.10) 0%,
      rgba(37,99,235,.06) 45%,
      transparent 68%),
    radial-gradient(ellipse 42% 30% at 20% 80%,
      rgba(246,196,83,.05) 0%,
      transparent 60%),
    radial-gradient(ellipse 38% 28% at 80% 72%,
      rgba(183,116,255,.04) 0%,
      transparent 58%);
  pointer-events: none;
  z-index: 0;
}
#screen-review-form > * {
  position: relative;
  z-index: 1;
}

/* ── 2. Section label accent bars ── */
/* "Оцените нас" → gold bar */
#screen-review-form #review-rating-label {
  position: relative;
  padding-left: 12px !important;
  color: rgba(246,196,83,.90) !important;
  font-size: 15px !important;
  letter-spacing: .05em !important;
}
#screen-review-form #review-rating-label::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, #F6C453 0%, #d4942a 100%);
  box-shadow: 0 0 8px rgba(246,196,83,.60);
}

/* "Комментарий" → cyan bar */
#screen-review-form #review-comment-label {
  position: relative;
  padding-left: 12px !important;
  font-size: 15px !important;
  letter-spacing: .05em !important;
}
#screen-review-form #review-comment-label::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, #3DEBFF 0%, #0ea5d4 100%);
  box-shadow: 0 0 8px rgba(61,235,255,.55);
}

/* ── 3. Star rating card + enhanced stars ── */
/* starPop — умеренный scale, не выходит за края карточки */
@keyframes starPop {
  0%   { transform: scale(1.00); }
  40%  { transform: scale(1.22); }
  70%  { transform: scale(0.96); }
  100% { transform: scale(1.08); }
}

/* Glass card container for stars */
#screen-review-form .review-stars-input {
  background: linear-gradient(160deg,
    rgba(246,196,83,.08) 0%,
    rgba(4,12,21,.60) 55%,
    rgba(37,99,235,.05) 100%);
  border: 1px solid rgba(246,196,83,.18);
  border-radius: var(--radius-lg);
  /* Увеличенный горизонтальный padding чтобы scale не обрезался */
  padding: 20px 24px !important;
  margin: 16px 0 20px !important;
  /* Уменьшен gap — 5 звёзд по 44px + 4×gap должны влезть */
  gap: 12px !important;
  box-shadow:
    0 4px 20px rgba(0,0,0,.22),
    0 0 0 1px rgba(246,196,83,.06) inset,
    inset 0 1px 0 rgba(255,255,255,.06);
  /* overflow visible — scale не обрезается, padding поглощает выход */
  overflow: visible;
}

/* Inactive stars — opacity вместо grayscale (нет артефактов на мобиле) */
#screen-review-form .review-star {
  opacity: .30 !important;
  filter: none !important;
  transition:
    opacity .20s ease,
    transform .20s cubic-bezier(.25,.46,.45,.94) !important;
  /* Убедимся что scale идёт от центра */
  transform-origin: center center;
  display: inline-block;
}
#screen-review-form .review-star:hover {
  opacity: .65 !important;
  filter: none !important;
  transform: scale(1.12) !important;
}

/* Filled stars — gold glow */
#screen-review-form .review-star.filled {
  opacity: 1 !important;
  filter:
    drop-shadow(0 0 5px rgba(246,196,83,.75))
    drop-shadow(0 0 14px rgba(246,196,83,.35)) !important;
  transform: scale(1.08) !important;
  animation: starPop .32s cubic-bezier(.22,.68,0,1.2) forwards;
}

/* ── 4. Textarea — glass-morphism ── */
#screen-review-form .review-textarea {
  background: rgba(4,12,21,.65) !important;
  border: 1px solid rgba(61,235,255,.20) !important;
  color: rgba(220,240,255,.92) !important;
  transition: border-color .2s, box-shadow .2s !important;
  box-shadow:
    0 2px 10px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}
#screen-review-form .review-textarea::placeholder {
  color: rgba(61,235,255,.28) !important;
}
#screen-review-form .review-textarea:focus {
  border-color: rgba(61,235,255,.55) !important;
  box-shadow:
    0 0 0 3px rgba(61,235,255,.09),
    0 0 0 1px rgba(61,235,255,.22),
    0 2px 10px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  outline: none !important;
}

/* ── 5. Char counter — dynamic colour classes ── */
#screen-review-form .char-counter {
  color: rgba(255,255,255,.30) !important;
  font-size: 12px;
  font-weight: 500;
  transition: color .2s ease;
}
#screen-review-form .char-counter.char-counter--warn {
  color: rgba(251,191,36,.70) !important;
}
#screen-review-form .char-counter.char-counter--danger {
  color: rgba(248,113,113,.80) !important;
}

/* ── 6. Submit button — premium CTA ── */
#screen-review-form #submit-review-btn {
  background: linear-gradient(135deg,
    #3DEBFF 0%,
    #0ea5d4 50%,
    #0d7fa8 100%) !important;
  box-shadow:
    0 0 0 1px rgba(61,235,255,.25),
    0 4px 18px rgba(61,235,255,.35),
    0 8px 32px rgba(37,99,235,.22),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
  letter-spacing: .04em !important;
  transition:
    transform .18s cubic-bezier(.22,.68,0,1.2),
    box-shadow .18s ease !important;
  position: relative;
  overflow: hidden;
}
/* Shimmer sweep on hover */
#screen-review-form #submit-review-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.18) 50%,
    transparent 100%);
  transform: skewX(-20deg);
  transition: left .55s ease;
  pointer-events: none;
}
#screen-review-form #submit-review-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 0 0 1px rgba(61,235,255,.35),
    0 6px 24px rgba(61,235,255,.48),
    0 10px 40px rgba(37,99,235,.28),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
}
#screen-review-form #submit-review-btn:hover::after {
  left: 160%;
}
#screen-review-form #submit-review-btn:active {
  transform: scale(.978) !important;
  opacity: .88 !important;
}

/* ── 7. Header title glow ── */
#screen-review-form .header h1 {
  text-shadow: 0 0 20px rgba(246,196,83,.18);
}

/* ── 8. Light-theme overrides ── */
body.theme-light #screen-review-form::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(246,196,83,.06) 0%, rgba(37,99,235,.03) 45%, transparent 70%);
}
body.theme-light #screen-review-form #review-rating-label {
  color: #b07d10 !important;
}
body.theme-light #screen-review-form #review-rating-label::before {
  background: linear-gradient(180deg, #d4942a 0%, #a06b10 100%);
  box-shadow: none;
}
body.theme-light #screen-review-form #review-comment-label::before {
  background: linear-gradient(180deg, #2563eb 0%, #1a4fc4 100%);
  box-shadow: none;
}
body.theme-light #screen-review-form .review-stars-input {
  background: rgba(255,255,255,.85);
  border-color: rgba(212,148,42,.20);
  box-shadow: 0 3px 14px rgba(0,0,0,.08);
}
body.theme-light #screen-review-form .review-star.filled {
  filter:
    drop-shadow(0 0 5px rgba(212,148,42,.65))
    drop-shadow(0 0 12px rgba(212,148,42,.30)) !important;
}
body.theme-light #screen-review-form .review-textarea {
  background: rgba(255,255,255,.90) !important;
  border-color: rgba(37,99,235,.18) !important;
  color: #1f2430 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
}
body.theme-light #screen-review-form .review-textarea::placeholder {
  color: rgba(31,36,48,.35) !important;
}
body.theme-light #screen-review-form .review-textarea:focus {
  border-color: rgba(37,99,235,.45) !important;
  box-shadow:
    0 0 0 3px rgba(37,99,235,.09),
    0 2px 8px rgba(0,0,0,.06) !important;
}
body.theme-light #screen-review-form .char-counter {
  color: rgba(31,36,48,.38) !important;
}
body.theme-light #screen-review-form .char-counter.char-counter--warn {
  color: rgba(180,120,0,.75) !important;
}
body.theme-light #screen-review-form .char-counter.char-counter--danger {
  color: rgba(220,38,38,.75) !important;
}
body.theme-light #screen-review-form .header h1 {
  text-shadow: none;
}

/* ============================================================
   STATS SCREEN — v277 Premium Polish
   ============================================================ */

/* ── 1. Background glow — fixed layer, stronger + 3rd layer ── */
#screen-stats {
  background: none;
  position: relative;
}
#screen-stats::before {
  content: '';
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 580px; height: 560px;
  background:
    radial-gradient(ellipse 72% 52% at 50% 0%,
      rgba(61,235,255,.10) 0%,
      rgba(37,99,235,.06) 42%,
      transparent 68%),
    radial-gradient(ellipse 50% 35% at 15% 85%,
      rgba(37,99,235,.07) 0%,
      transparent 58%),
    radial-gradient(ellipse 45% 30% at 85% 72%,
      rgba(183,116,255,.05) 0%,
      transparent 58%);
  pointer-events: none;
  z-index: 0;
}
#screen-stats > * {
  position: relative;
  z-index: 1;
}

/* ── 2. Header title glow ── */
#screen-stats .header h1 {
  text-shadow: 0 0 22px rgba(61,235,255,.16);
}

/* ── 3. Summary card — top highlight line + deeper shadow ── */
.stat-summary-card {
  position: relative;
  overflow: hidden;
  box-shadow:
    0 10px 36px rgba(0,0,0,.30),
    0 3px 10px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.14) !important;
}
.stat-summary-card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.16) 30%,
    rgba(61,235,255,.45) 50%,
    rgba(255,255,255,.16) 70%,
    transparent 100%);
  pointer-events: none;
}

/* ── 4. Summary values — tabular nums + stronger outer glow ── */
.stat-summary-value {
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 0 10px rgba(61,235,255,.40),
    0 0 28px rgba(61,235,255,.15) !important;
}
.stat-summary-item:last-child .stat-summary-value {
  text-shadow:
    0 0 12px rgba(61,235,255,.55),
    0 0 36px rgba(61,235,255,.22) !important;
}

/* ── 5. Summary divider — glowing center line ── */
.stat-summary-divider {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(61,235,255,.40) 35%,
    rgba(61,235,255,.55) 50%,
    rgba(61,235,255,.40) 65%,
    transparent 100%
  ) !important;
}

/* ── 6. Category cards — hover lift + left accent bar + top line ── */
.stat-cat-card {
  transition:
    transform .20s cubic-bezier(.25,.46,.45,.94),
    box-shadow .20s ease,
    border-color .20s ease !important;
}
.stat-cat-card:hover {
  transform: translateY(-3px);
}
.stat-cat-card::before {
  content: '';
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 3px;
  border-radius: 0 2px 2px 0;
  pointer-events: none;
  z-index: 2;
}
.stat-cat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%; height: 1px;
  border-radius: 1px;
  pointer-events: none;
  z-index: 2;
}

/* Stars — gold */
.stat-cat-stars::before {
  background: linear-gradient(180deg, #F6C453 0%, #d4942a 100%);
  box-shadow: 0 0 8px rgba(246,196,83,.60);
}
.stat-cat-stars::after {
  background: linear-gradient(90deg, transparent, rgba(246,196,83,.50), transparent);
}
.stat-cat-stars:hover {
  box-shadow:
    0 10px 32px rgba(0,0,0,.28),
    0 0 0 1px rgba(246,196,83,.22),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  border-color: rgba(246,196,83,.48) !important;
}

/* Steam — blue */
.stat-cat-steam::before {
  background: linear-gradient(180deg, #5ea4ff 0%, #2563eb 100%);
  box-shadow: 0 0 8px rgba(94,164,255,.60);
}
.stat-cat-steam::after {
  background: linear-gradient(90deg, transparent, rgba(94,164,255,.50), transparent);
}
.stat-cat-steam:hover {
  box-shadow:
    0 10px 32px rgba(0,0,0,.28),
    0 0 0 1px rgba(94,164,255,.22),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  border-color: rgba(94,164,255,.48) !important;
}

/* Premium — purple */
.stat-cat-premium::before {
  background: linear-gradient(180deg, #c084fc 0%, #7c3aed 100%);
  box-shadow: 0 0 8px rgba(168,85,247,.60);
}
.stat-cat-premium::after {
  background: linear-gradient(90deg, transparent, rgba(168,85,247,.50), transparent);
}
.stat-cat-premium:hover {
  box-shadow:
    0 10px 32px rgba(0,0,0,.28),
    0 0 0 1px rgba(168,85,247,.22),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  border-color: rgba(168,85,247,.48) !important;
}

/* Gifts — green */
.stat-cat-gifts::before {
  background: linear-gradient(180deg, #34d399 0%, #059669 100%);
  box-shadow: 0 0 8px rgba(52,211,153,.60);
}
.stat-cat-gifts::after {
  background: linear-gradient(90deg, transparent, rgba(52,211,153,.50), transparent);
}
.stat-cat-gifts:hover {
  box-shadow:
    0 10px 32px rgba(0,0,0,.28),
    0 0 0 1px rgba(52,211,153,.22),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  border-color: rgba(52,211,153,.48) !important;
}

/* ── 7. Badges — tinted per category ── */
.stat-cat-stars .stat-cat-badge {
  background: rgba(246,196,83,.14);
  border-color: rgba(246,196,83,.28);
  color: rgba(246,196,83,.88);
}
.stat-cat-steam .stat-cat-badge {
  background: rgba(94,164,255,.14);
  border-color: rgba(94,164,255,.28);
  color: rgba(94,164,255,.88);
}
.stat-cat-premium .stat-cat-badge {
  background: rgba(168,85,247,.14);
  border-color: rgba(168,85,247,.28);
  color: rgba(192,132,252,.88);
}
.stat-cat-gifts .stat-cat-badge {
  background: rgba(52,211,153,.14);
  border-color: rgba(52,211,153,.28);
  color: rgba(52,211,153,.88);
}

/* ── 8. Main value — stronger outer halo ── */
.stat-cat-main-value {
  font-variant-numeric: tabular-nums;
}
.stat-cat-stars .stat-cat-main-value {
  text-shadow:
    0 0 10px rgba(246,196,83,.55),
    0 0 28px rgba(246,196,83,.22) !important;
}
.stat-cat-steam .stat-cat-main-value {
  text-shadow:
    0 0 10px rgba(94,164,255,.55),
    0 0 28px rgba(94,164,255,.22) !important;
}
.stat-cat-premium .stat-cat-main-value {
  text-shadow:
    0 0 10px rgba(168,85,247,.55),
    0 0 28px rgba(168,85,247,.22) !important;
}
.stat-cat-gifts .stat-cat-main-value {
  text-shadow:
    0 0 10px rgba(52,211,153,.55),
    0 0 28px rgba(52,211,153,.22) !important;
}

/* ── 9. Premium dual-ring spinner ── */
@keyframes spinOuter {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes spinInner {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
.stats-spinner {
  width: 44px; height: 44px;
  border: 3px solid rgba(61,235,255,.10);
  border-top-color: #3DEBFF;
  border-right-color: rgba(61,235,255,.30);
  border-bottom-color: transparent;
  animation: spinOuter .85s cubic-bezier(.5,0,.5,1) infinite;
  position: relative;
  box-shadow: 0 0 14px rgba(61,235,255,.18);
}
.stats-spinner::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 2px solid rgba(183,116,255,.10);
  border-bottom-color: rgba(183,116,255,.72);
  border-left-color: transparent;
  animation: spinInner 1.1s cubic-bezier(.5,0,.5,1) infinite;
}

/* ── 10. Light-theme overrides ── */
body.theme-light #screen-stats::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(37,99,235,.06) 0%, rgba(37,99,235,.03) 40%, transparent 70%);
}
body.theme-light #screen-stats .header h1 { text-shadow: none; }
body.theme-light .stat-summary-card::before {
  background: linear-gradient(90deg, transparent, rgba(37,99,235,.20), transparent);
}
body.theme-light .stat-summary-value { text-shadow: none !important; }
body.theme-light .stat-summary-item:last-child .stat-summary-value { text-shadow: none !important; }
body.theme-light .stat-summary-divider {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(37,99,235,.30) 40%,
    rgba(37,99,235,.45) 50%,
    rgba(37,99,235,.30) 60%,
    transparent 100%
  ) !important;
}
body.theme-light .stat-cat-card::before { box-shadow: none; }
body.theme-light .stat-cat-card:hover {
  box-shadow:
    0 6px 20px rgba(0,0,0,.10),
    0 2px 6px rgba(0,0,0,.06) !important;
}
body.theme-light .stat-cat-stars .stat-cat-badge  { color: #a07010; }
body.theme-light .stat-cat-steam .stat-cat-badge  { color: #1a4fc4; }
body.theme-light .stat-cat-premium .stat-cat-badge { color: #7c3aed; }
body.theme-light .stat-cat-gifts .stat-cat-badge  { color: #059669; }
body.theme-light .stat-cat-stars .stat-cat-main-value,
body.theme-light .stat-cat-steam .stat-cat-main-value,
body.theme-light .stat-cat-premium .stat-cat-main-value,
body.theme-light .stat-cat-gifts .stat-cat-main-value { text-shadow: none !important; }
body.theme-light .stats-spinner {
  border-color: rgba(37,99,235,.10);
  border-top-color: #2563eb;
  border-right-color: rgba(37,99,235,.25);
  border-bottom-color: transparent;
  box-shadow: none;
}
body.theme-light .stats-spinner::before {
  border-color: rgba(168,85,247,.10);
  border-bottom-color: rgba(168,85,247,.55);
  border-left-color: transparent;
}

/* ═══════════════════════════════════════════════════════
   SUPPORT SCREENS — Premium v278
   screens: support list · new ticket form · chat view
   ═══════════════════════════════════════════════════════ */

/* ── 1. Screen-level background glow (support list) ── */
#screen-support {
  position: relative;
  isolation: isolate;
}
#screen-support::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 38% at 50% 0%,  rgba(61,235,255,.09) 0%, transparent 65%),
    radial-gradient(ellipse 55% 35% at 80% 85%, rgba(37,99,235,.07) 0%, transparent 60%);
}
#screen-support > * { position: relative; z-index: 1; }

/* ── 2. "Новый запрос" CTA button ── */
#screen-support .new-ticket-btn {
  background: linear-gradient(135deg, #3DEBFF 0%, #2563eb 100%) !important;
  color: #041016 !important;
  box-shadow: 0 4px 18px rgba(61,235,255,.32), 0 2px 6px rgba(37,99,235,.22) !important;
  letter-spacing: -.01em;
}
#screen-support .new-ticket-btn:hover {
  box-shadow: 0 6px 26px rgba(61,235,255,.42), 0 3px 10px rgba(37,99,235,.30) !important;
}

/* ── 3. Ticket cards — hover lift + status-colored left bar ── */
.ticket-card {
  position: relative;
  padding-left: 22px !important; /* room for left bar */
  border-left: 3px solid rgba(61,235,255,.30) !important;
  border-radius: var(--radius-lg) !important;
  overflow: visible !important;
  transition: all .2s cubic-bezier(.25,.46,.45,.94) !important;
}
/* status-driven left bar colours via :has() */
.ticket-card:has(.ticket-status.open) {
  border-left-color: #22c55e !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.22), 0 1px 4px rgba(0,0,0,.10),
              inset 0 1px 0 rgba(61,235,255,.10),
              -2px 0 10px rgba(34,197,94,.20) !important;
}
.ticket-card:has(.ticket-status.closed) {
  border-left-color: #ef4444 !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.22), 0 1px 4px rgba(0,0,0,.10),
              inset 0 1px 0 rgba(61,235,255,.10),
              -2px 0 10px rgba(239,68,68,.18) !important;
}
.ticket-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 28px rgba(61,235,255,.13),
    0 3px 8px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(61,235,255,.16) !important;
  border-color: rgba(61,235,255,.45) !important;
}
.ticket-card:has(.ticket-status.open):hover {
  border-left-color: #22c55e !important;
}
.ticket-card:has(.ticket-status.closed):hover {
  border-left-color: #ef4444 !important;
}

/* ── 4. Status badge jewel borders ── */
.ticket-status.open {
  border: 1px solid rgba(34,197,94,.28);
  box-shadow: 0 0 10px rgba(34,197,94,.22), inset 0 1px 0 rgba(255,255,255,.08);
}
.ticket-status.closed {
  border: 1px solid rgba(239,68,68,.24);
  box-shadow: 0 0 10px rgba(239,68,68,.18), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ── 5. Header title glow ── */
#screen-support .header h1 {
  text-shadow: 0 0 22px rgba(61,235,255,.22), 0 1px 0 rgba(0,0,0,.20);
}

/* ══════════════════════════════════════════════════════ */
/* ── NEW TICKET FORM (screen-support-new) ── */
/* ══════════════════════════════════════════════════════ */
#screen-support-new {
  position: relative;
  isolation: isolate;
}
#screen-support-new::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 65% 35% at 50% 0%, rgba(61,235,255,.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 30% at 75% 90%, rgba(37,99,235,.06) 0%, transparent 55%);
}
#screen-support-new > * { position: relative; z-index: 1; }

/* Section labels (ТЕМА / СООБЩЕНИЕ) */
#screen-support-new .section-title {
  position: relative;
  padding-left: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(61,235,255,.70);
}
#screen-support-new .section-title::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, #3DEBFF 0%, #2563eb 100%);
  box-shadow: 2px 0 8px rgba(61,235,255,.40);
}

/* Dropdown select — upgraded glass */
#screen-support-new .ticket-order-select {
  background: rgba(4,12,21,.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(61,235,255,.20);
  box-shadow:
    0 4px 16px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(61,235,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.14);
  transition: border-color .2s, box-shadow .2s;
}
#screen-support-new .ticket-order-select:focus {
  border-color: rgba(61,235,255,.55);
  box-shadow:
    0 0 0 3px rgba(61,235,255,.12),
    0 0 0 1px rgba(61,235,255,.22),
    0 4px 18px rgba(61,235,255,.10),
    inset 0 1px 0 rgba(61,235,255,.10);
}

/* Textarea (reuses .review-textarea) inside new-ticket form */
#screen-support-new .review-textarea {
  background: rgba(4,12,21,.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(61,235,255,.18);
  min-height: 72px;
  padding: 10px 12px;
  font-size: 14px;
  box-shadow:
    0 4px 16px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(61,235,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.12);
}
#screen-support-new .review-textarea:focus {
  border-color: rgba(61,235,255,.50);
  box-shadow:
    0 0 0 3px rgba(61,235,255,.10),
    0 0 0 1px rgba(61,235,255,.20),
    0 0 24px rgba(61,235,255,.08),
    inset 0 1px 0 rgba(61,235,255,.08);
}

/* Attach media button */
#screen-support-new .chat-attach-btn {
  background: rgba(61,235,255,.05);
  border-color: rgba(61,235,255,.20);
  color: rgba(61,235,255,.70);
  transition: all .18s;
}
#screen-support-new .chat-attach-btn:hover {
  background: rgba(61,235,255,.12);
  border-color: rgba(61,235,255,.42);
  color: #3DEBFF;
  box-shadow: 0 0 12px rgba(61,235,255,.14);
}

/* Submit button ("Отправить") */
#screen-support-new .new-ticket-btn {
  background: linear-gradient(135deg, #3DEBFF 0%, #2563eb 100%) !important;
  color: #041016 !important;
  box-shadow: 0 4px 18px rgba(61,235,255,.32), 0 2px 6px rgba(37,99,235,.22) !important;
}
/* Disabled state — keep gradient, just reduce opacity */
#screen-support-new .new-ticket-btn:disabled {
  background: linear-gradient(135deg, #3DEBFF 0%, #2563eb 100%) !important;
  color: #041016 !important;
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none !important;
}
#screen-support-new .new-ticket-btn:hover {
  box-shadow: 0 6px 26px rgba(61,235,255,.42), 0 3px 10px rgba(37,99,235,.30) !important;
}

/* ══════════════════════════════════════════════════════ */
/* ── CHAT / TICKET DETAIL (screen-support-chat) ── */
/* ══════════════════════════════════════════════════════ */

/* Background glow behind messages */
#screen-support-chat::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 35% at 50% 0%,  rgba(61,235,255,.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 20% 90%, rgba(37,99,235,.06) 0%, transparent 55%);
}
#screen-support-chat .header,
#screen-support-chat .chat-messages,
#screen-support-chat .chat-footer { position: relative; z-index: 1; }

/* Header — plain, no frame */
#screen-support-chat .header h1 {
  text-shadow: none;
}

/* User messages — cyan gradient + glow (horizontal so height doesn't affect colors) */
.chat-message.user,
#screen-support-chat .chat-message.user {
  background: linear-gradient(to right, #3DEBFF 0%, #29c4d4 50%, #1a7fa8 100%) !important;
  color: #041016 !important;
  box-shadow:
    0 3px 14px rgba(61,235,255,.28),
    0 1px 4px rgba(61,235,255,.14) !important;
}

/* Admin messages — glass dark */
.chat-message.admin {
  background: rgba(20,38,60,.72);
  border: 1px solid rgba(61,235,255,.16);
  box-shadow:
    0 2px 12px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(61,235,255,.10);
}

/* Chat input textarea — glass upgrade */
.chat-input-bar textarea {
  background: rgba(4,12,21,.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(61,235,255,.20);
  box-shadow:
    0 3px 12px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(61,235,255,.08);
}
.chat-input-bar textarea:focus {
  border-color: rgba(61,235,255,.52);
  box-shadow:
    0 0 0 3px rgba(61,235,255,.10),
    0 0 0 1px rgba(61,235,255,.22),
    0 0 20px rgba(61,235,255,.08),
    inset 0 1px 0 rgba(61,235,255,.08);
}

/* Send button — pulse glow on hover */
.chat-send-btn {
  background: linear-gradient(135deg, #3DEBFF 0%, #2563eb 100%);
  box-shadow:
    0 3px 14px rgba(61,235,255,.30),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.14);
}
.chat-send-btn:hover {
  box-shadow:
    0 5px 20px rgba(61,235,255,.44),
  0 2px 6px rgba(37,99,235,.24),
    inset 0 1px 0 rgba(255,255,255,.18);
  transform: scale(1.04);
}
.chat-send-btn:active { opacity:.85; transform: scale(.95); }

/* Attach button — hover tint */
.chat-footer .chat-attach-btn {
  background: rgba(61,235,255,.05);
  border-color: rgba(61,235,255,.20);
  color: rgba(61,235,255,.65);
  transition: all .18s;
}
.chat-footer .chat-attach-btn:hover {
  background: rgba(61,235,255,.12);
  border-color: rgba(61,235,255,.40);
  color: #3DEBFF;
  box-shadow: 0 0 12px rgba(61,235,255,.14);
}

/* Close ticket button — danger red glow on hover */
#user-close-ticket-btn {
  background: transparent;
  border: 1.5px solid rgba(239,68,68,.30) !important;
  color: var(--danger) !important;
  box-shadow: none !important;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
#user-close-ticket-btn:hover {
  background: rgba(239,68,68,.08) !important;
  border-color: rgba(239,68,68,.55) !important;
  box-shadow: 0 2px 14px rgba(239,68,68,.18) !important;
}
#user-close-ticket-btn:active { opacity:.8; transform: scale(.98); }

/* Chat image/video rounded upgrade */
.chat-img {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(61,235,255,.14);
  box-shadow: 0 3px 14px rgba(0,0,0,.28);
}
.chat-video {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(61,235,255,.10);
  box-shadow: 0 3px 14px rgba(0,0,0,.28);
}

/* ── Light-theme overrides ── */
body.theme-light #screen-support::before,
body.theme-light #screen-support-new::before,
body.theme-light #screen-support-chat::before {
  background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(37,99,235,.09) 0%, transparent 60%);
}
body.theme-light #screen-support .header h1,
body.theme-light #screen-support-chat .header h1 { text-shadow: none; }
body.theme-light .ticket-status.open {
  box-shadow: 0 0 6px rgba(34,197,94,.14);
}
body.theme-light .ticket-status.closed {
  box-shadow: 0 0 6px rgba(239,68,68,.10);
}
body.theme-light .ticket-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
}
body.theme-light .ticket-card:has(.ticket-status.open)::before {
  box-shadow: 2px 0 6px rgba(34,197,94,.18);
}
body.theme-light .ticket-card:has(.ticket-status.closed)::before {
  box-shadow: 2px 0 6px rgba(239,68,68,.14);
}
body.theme-light #screen-support-chat .header {
  background: none;
}
body.theme-light #screen-support-chat .header h1 { text-shadow: none; }
body.theme-light .chat-message.user {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 2px 10px rgba(37,99,235,.24);
}
body.theme-light .chat-message.admin {
  background: rgba(37,99,235,.06);
  border-color: rgba(37,99,235,.14);
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
body.theme-light .chat-send-btn {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 2px 10px rgba(37,99,235,.24);
}
body.theme-light .chat-send-btn:hover {
  box-shadow: 0 4px 16px rgba(37,99,235,.32);
  transform: scale(1.04);
}
body.theme-light .chat-input-bar textarea {
  background: rgba(0,0,0,.05) !important;
  border-color: rgba(37,99,235,.18);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  backdrop-filter: none;
}
body.theme-light .chat-input-bar textarea:focus {
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 3px rgba(37,99,235,.10), 0 0 0 1px rgba(37,99,235,.20);
}
body.theme-light #screen-support-new .review-textarea {
  background: rgba(0,0,0,.04) !important;
  border-color: rgba(37,99,235,.16);
  backdrop-filter: none;
}
body.theme-light #screen-support-new .review-textarea:focus {
  border-color: rgba(37,99,235,.42);
  box-shadow: 0 0 0 3px rgba(37,99,235,.10), 0 0 0 1px rgba(37,99,235,.18);
}
body.theme-light #screen-support-new .ticket-order-select {
  background: rgba(255,255,255,.95);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232563eb' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  border-color: rgba(37,99,235,.20);
  color: rgba(15,23,42,.88);
  backdrop-filter: none;
  color-scheme: light;
  box-shadow: 0 2px 8px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.9);
}
body.theme-light #screen-support-new .ticket-order-select:focus {
  border-color: rgba(37,99,235,.42);
  box-shadow: 0 0 0 3px rgba(37,99,235,.10), 0 0 0 1px rgba(37,99,235,.18);
}
body.theme-light .ticket-order-select option {
  background: #ffffff;
  color: #0f172a;
  color-scheme: light;
}
body.theme-light #user-close-ticket-btn:hover {
  background: rgba(239,68,68,.06) !important;
  box-shadow: 0 1px 8px rgba(239,68,68,.10) !important;
}
/* ── Chat screen footer buttons — light theme ── */
body.theme-light #screen-support-chat .load-more-btn {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.10) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.07) !important;
  color: rgba(0,0,0,.55) !important;
}
body.theme-light #screen-support-chat #user-escalate-btn {
  background: rgba(245,158,11,.07) !important;
  border-color: rgba(245,158,11,.28) !important;
  color: #b45309 !important;
}
body.theme-light #screen-support-chat #user-escalate-btn:hover {
  background: rgba(245,158,11,.12) !important;
  box-shadow: 0 2px 10px rgba(245,158,11,.15) !important;
}
body.theme-light #screen-support-chat #user-close-ticket-btn {
  background: rgba(239,68,68,.06) !important;
  border-color: rgba(239,68,68,.22) !important;
  color: #dc2626 !important;
}
/* Кнопка прикрепления */
body.theme-light .chat-attach-btn {
  background: rgba(255,255,255,.85) !important;
  border-color: rgba(0,0,0,.12) !important;
  color: rgba(0,0,0,.45) !important;
}
body.theme-light .chat-attach-btn:hover {
  border-color: rgba(37,99,235,.30) !important;
  color: #2563eb !important;
}
/* Сообщение бота — чуть более выраженный фон */
body.theme-light .chat-message.admin {
  background: rgba(255,255,255,.95) !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.07) !important;
  color: #1f2430 !important;
}
body.theme-light .chat-message.admin .chat-message-time {
  color: rgba(0,0,0,.35) !important;
}
/* Метка времени в сообщении пользователя */
body.theme-light .chat-message.user .chat-message-time {
  color: rgba(255,255,255,.65) !important;
}
body.theme-light #screen-support-new .section-title::before {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: none;
}
body.theme-light #screen-support-new .section-title {
  color: rgba(37,99,235,.80);
}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM LIGHT THEME v286 — Full-screen elevation overhaul
   Goal: match dark-theme quality — rich shadows, blue accents,
         gradient highlights, subtle glow layers, lively cards.
   All rules scoped to body.theme-light with !important where needed.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 0. Root palette tweaks for light ─── */
body.theme-light {
  --card-shadow-hover: 0 8px 28px rgba(37,99,235,.14), 0 2px 6px rgba(0,0,0,.06) !important;
}

/* ─── 1. Global screen background — crisp white + blue sky glow ─── */
/* Only apply to non-themed screens (profile, orders, stats, support etc.) */
/* Themed screens (stars/steam/premium/gifts) keep their body bg showing through */
body.theme-light #screen-profile,
body.theme-light #screen-settings,
body.theme-light #screen-orders,
body.theme-light #screen-stats,
body.theme-light #screen-support,
body.theme-light #screen-support-new,
body.theme-light #screen-support-chat,
body.theme-light #screen-review-form,
body.theme-light #screen-catalog,
body.theme-light #screen-terms,
body.theme-light #screen-privacy,
body.theme-light #screen-faq,
body.theme-light #screen-guarantees,
body.theme-light #screen-how {
  background: linear-gradient(180deg,
    rgba(224,236,255,.75) 0%,
    rgba(240,246,255,.50) 18%,
    rgba(255,255,255,1) 55%) !important;
}

/* ─── FAQ cards — light theme ─── */
body.theme-light #screen-faq .static-block {
  background: #ffffff !important;
  border-color: rgba(37,99,235,.14) !important;
  border-left-color: rgba(37,99,235,.55) !important;
  box-shadow: 0 2px 12px rgba(37,99,235,.08), 0 1px 3px rgba(0,0,0,.05) !important;
}
body.theme-light #screen-faq .static-q {
  color: #1d4ed8 !important;
}
body.theme-light #screen-faq .static-a {
  color: rgba(15,23,42,.70) !important;
  opacity: 1 !important;
}

/* ─── 2. Section titles — blue left accent bar (non-themed screens only) ─── */
/* Exclude themed catalog screens — they manage their own section-title bars */
body.theme-light:not([data-theme="stars"]):not([data-theme="steam"]):not([data-theme="premium"]):not([data-theme="gifts"]) .section-title {
  color: rgba(30,58,138,.75) !important;
  position: relative;
  padding-left: 12px !important;
}
body.theme-light:not([data-theme="stars"]):not([data-theme="steam"]):not([data-theme="premium"]):not([data-theme="gifts"]) .section-title::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 13px;
  border-radius: 2px;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: none;
}

/* ─── 3. Header titles — deeper dark blue ─── */
body.theme-light .header h1 {
  color: #0f172a !important;
  text-shadow: none !important;
  font-weight: 800;
}

/* ─── 4. PROFILE SCREEN ─── */

/* 4a. Background glow — soft indigo top wash */
body.theme-light #screen-profile::before {
  background:
    radial-gradient(ellipse 80% 45% at 50% 0%,
      rgba(37,99,235,.08) 0%,
      rgba(99,102,241,.04) 40%,
      transparent 68%),
    radial-gradient(ellipse 40% 25% at 15% 85%,
      rgba(37,99,235,.04) 0%,
      transparent 60%) !important;
  animation: none !important;
}

/* 4b. Profile card — elevated white with indigo border */
body.theme-light .profile-card {
  background: linear-gradient(160deg,
    rgba(239,246,255,1) 0%,
    rgba(255,255,255,1) 55%,
    rgba(238,242,255,.80) 100%) !important;
  border: 1px solid rgba(37,99,235,.14) !important;
  box-shadow:
    0 10px 36px rgba(37,99,235,.09),
    0 3px 10px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* 4c. Avatar — blue ring glow on light */
body.theme-light .profile-avatar {
  box-shadow:
    0 0 0 3px rgba(37,99,235,.30),
    0 0 0 6px rgba(37,99,235,.08),
    0 10px 28px rgba(37,99,235,.20),
    0 2px 6px rgba(0,0,0,.08) !important;
}
body.theme-light .avatar-ring {
  display: none !important;
}
body.theme-light .profile-avatar-wrap::before {
  display: none !important;
}

/* 4d. Name animation — blue breathe */
body.theme-light .profile-name {
  color: #0f172a !important;
  animation: profileNameBreatheLight 4s ease-in-out infinite !important;
}
body.theme-light .profile-username {
  color: rgba(37,99,235,.72) !important;
  text-shadow: none !important;
  font-weight: 500;
}

/* 4e. Menu buttons — crisp white cards, colored left bars */
body.theme-light .profile-menu-btn {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  box-shadow:
    0 2px 12px rgba(0,0,0,.06),
    0 1px 3px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,1) !important;
  color: #0f172a !important;
}
body.theme-light .profile-menu-btn::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(37,99,235,.06) 40%,
    transparent 100%) !important;
}
body.theme-light .profile-menu-btn:hover {
  background: rgba(239,246,255,1) !important;
  border-color: rgba(37,99,235,.20) !important;
  box-shadow:
    0 6px 20px rgba(37,99,235,.12),
    0 2px 5px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,1) !important;
  transform: translateY(-1px) !important;
}
body.theme-light .profile-menu-btn:active {
  background: rgba(235,245,255,1) !important;
  transform: scale(.985) !important;
  box-shadow: 0 1px 5px rgba(0,0,0,.07) !important;
}
body.theme-light .profile-menu-btn .text {
  color: #0f172a !important;
  font-weight: 600;
}
body.theme-light .profile-menu-btn .arrow {
  color: rgba(37,99,235,.45) !important;
}

/* Per-button colored left bars visible in light */
body.theme-light #screen-profile .profile-menu-btn[data-btn]::after {
  opacity: .70 !important;
}
body.theme-light #screen-profile .profile-menu-btn[data-btn]:hover::after {
  opacity: 1 !important;
}

/* Per-button icon-wrap tints stronger for light */
body.theme-light #screen-profile .profile-menu-btn[data-btn="settings"] .icon-wrap {
  background: linear-gradient(145deg, rgba(144,180,216,.18) 0%, rgba(90,143,192,.14) 100%) !important;
  border-color: rgba(144,180,216,.20) !important;
  box-shadow: 0 2px 8px rgba(144,180,216,.18) !important;
}
body.theme-light #screen-profile .profile-menu-btn[data-btn="orders"] .icon-wrap {
  background: linear-gradient(145deg, rgba(246,196,83,.18) 0%, rgba(212,148,42,.14) 100%) !important;
  border-color: rgba(246,196,83,.24) !important;
  box-shadow: 0 2px 8px rgba(246,196,83,.16) !important;
}
body.theme-light #screen-profile .profile-menu-btn[data-btn="stats"] .icon-wrap {
  background: linear-gradient(145deg, rgba(74,222,128,.18) 0%, rgba(22,163,74,.14) 100%) !important;
  border-color: rgba(74,222,128,.22) !important;
  box-shadow: 0 2px 8px rgba(74,222,128,.14) !important;
}
body.theme-light #screen-profile .profile-menu-btn[data-btn="documents"] .icon-wrap {
  background: linear-gradient(145deg, rgba(176,190,197,.15) 0%, rgba(120,144,156,.12) 100%) !important;
  border-color: rgba(176,190,197,.18) !important;
  box-shadow: 0 2px 8px rgba(176,190,197,.12) !important;
}
body.theme-light #screen-profile .profile-menu-btn[data-btn="referral"] .icon-wrap {
  background: linear-gradient(145deg, rgba(249,168,212,.18) 0%, rgba(232,121,168,.14) 100%) !important;
  border-color: rgba(249,168,212,.22) !important;
  box-shadow: 0 2px 8px rgba(249,168,212,.14) !important;
}
body.theme-light #screen-profile .profile-menu-btn[data-btn="support"] .icon-wrap {
  background: linear-gradient(145deg, rgba(37,99,235,.18) 0%, rgba(37,99,235,.12) 100%) !important;
  border-color: rgba(37,99,235,.20) !important;
  box-shadow: 0 2px 8px rgba(37,99,235,.14) !important;
}

/* ─── 5. ORDERS SCREEN ─── */

/* 5a. Background glow */
body.theme-light #screen-orders::before {
  background:
    radial-gradient(ellipse 80% 45% at 50% 0%,
      rgba(37,99,235,.07) 0%,
      rgba(99,102,241,.03) 40%,
      transparent 68%) !important;
  animation: none !important;
}

/* 5b. Search input — clean white, blue focus ring */
body.theme-light #screen-orders .orders-search-input {
  background: #ffffff !important;
  border: 1.5px solid rgba(37,99,235,.18) !important;
  color: #0f172a !important;
  box-shadow: 0 2px 10px rgba(37,99,235,.07), inset 0 1px 0 rgba(255,255,255,1) !important;
}
body.theme-light #screen-orders .orders-search-input::placeholder {
  color: rgba(15,23,42,.35) !important;
}
body.theme-light #screen-orders .orders-search-input:focus {
  border-color: rgba(37,99,235,.55) !important;
  box-shadow:
    0 0 0 3px rgba(37,99,235,.10),
    0 0 0 1.5px rgba(37,99,235,.35),
    0 2px 10px rgba(37,99,235,.08) !important;
  outline: none !important;
}

/* 5c. Filter pills */
body.theme-light #screen-orders .orders-filter-btn {
  background: rgba(255,255,255,.90) !important;
  border: 1.5px solid rgba(37,99,235,.15) !important;
  color: rgba(15,23,42,.65) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}
body.theme-light #screen-orders .orders-filter-btn:hover {
  background: rgba(239,246,255,1) !important;
  border-color: rgba(37,99,235,.32) !important;
  box-shadow: 0 3px 12px rgba(37,99,235,.10) !important;
  transform: translateY(-1px) !important;
}
body.theme-light #screen-orders .orders-filter-btn.active {
  background: linear-gradient(135deg,
    rgba(37,99,235,.16) 0%,
    rgba(99,102,241,.10) 100%) !important;
  border-color: rgba(37,99,235,.50) !important;
  color: #1e40af !important;
  box-shadow:
    0 0 0 1px rgba(37,99,235,.12) inset,
    0 4px 14px rgba(37,99,235,.12),
    inset 0 1px 0 rgba(255,255,255,.80) !important;
}
body.theme-light #screen-orders .orders-filter-btn.active::before {
  background: linear-gradient(90deg, transparent, rgba(37,99,235,.40), transparent) !important;
}

/* 5d. Order cards — white with colored left accent bars */
body.theme-light #screen-orders .order-card {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  box-shadow:
    0 3px 14px rgba(0,0,0,.07),
    0 1px 3px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}
body.theme-light #screen-orders .order-card:hover {
  border-color: rgba(37,99,235,.20) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 8px 28px rgba(37,99,235,.12),
    0 2px 6px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}
body.theme-light #screen-orders .order-card::before {
  opacity: .85 !important;
  box-shadow: none !important;
}

/* 5e. Order card icon — blue tinted box */
body.theme-light #screen-orders .order-card-icon {
  background: linear-gradient(145deg,
    rgba(239,246,255,1) 0%,
    rgba(219,234,254,.80) 100%) !important;
  border: 1px solid rgba(37,99,235,.16) !important;
  box-shadow: 0 2px 8px rgba(37,99,235,.12) !important;
}

/* 5f. Status badges — crisper on white */
body.theme-light #screen-orders .order-status-badge.delivered {
  background: rgba(34,197,94,.12) !important;
  color: #15803d !important;
  border-color: rgba(34,197,94,.22) !important;
  box-shadow: none !important;
}
body.theme-light #screen-orders .order-status-badge.pending,
body.theme-light #screen-orders .order-status-badge.created {
  background: rgba(251,191,36,.12) !important;
  color: #b45309 !important;
  border-color: rgba(251,191,36,.22) !important;
  box-shadow: none !important;
}
body.theme-light #screen-orders .order-status-badge.failed {
  background: rgba(239,68,68,.10) !important;
  color: #b91c1c !important;
  border-color: rgba(239,68,68,.20) !important;
  box-shadow: none !important;
}
body.theme-light #screen-orders .order-status-badge.paid {
  background: rgba(99,102,241,.10) !important;
  color: #4338ca !important;
  border-color: rgba(99,102,241,.20) !important;
  box-shadow: none !important;
}

/* 5g. Price label */
body.theme-light #screen-orders .order-price-label {
  color: #0f172a !important;
  text-shadow: none !important;
  font-weight: 700;
}

/* 5h. Load more button */
body.theme-light #screen-orders .load-more-btn {
  background: #ffffff !important;
  border: 1.5px solid rgba(37,99,235,.18) !important;
  color: #1e40af !important;
  box-shadow: 0 2px 10px rgba(37,99,235,.07) !important;
}
body.theme-light #screen-orders .load-more-btn::before {
  background: linear-gradient(180deg, #2563eb 0%, #1a4fc4 100%) !important;
  box-shadow: none !important;
}
body.theme-light #screen-orders .load-more-btn:hover {
  background: rgba(239,246,255,1) !important;
  border-color: rgba(37,99,235,.35) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 18px rgba(37,99,235,.12) !important;
}
body.theme-light .order-action-btn {
  background: linear-gradient(135deg,#7c3aed 0%,#4f46e5 100%) !important;
  color: #fff !important;
  border-color: rgba(124,58,237,.25) !important;
  box-shadow: 0 4px 14px rgba(124,58,237,.25) !important;
}

/* ─── 6. STATS SCREEN ─── */

/* 6a. Background */
body.theme-light #screen-stats::before {
  background:
    radial-gradient(ellipse 80% 45% at 50% 0%,
      rgba(37,99,235,.07) 0%,
      rgba(99,102,241,.03) 40%,
      transparent 68%) !important;
  animation: none !important;
}
body.theme-light #screen-stats .header h1 {
  text-shadow: none !important;
}

/* 6b. Summary card — white elevated */
body.theme-light .stat-summary-card {
  background: linear-gradient(160deg,
    rgba(239,246,255,1) 0%,
    rgba(255,255,255,1) 55%,
    rgba(238,242,255,.80) 100%) !important;
  border: 1px solid rgba(37,99,235,.16) !important;
  box-shadow:
    0 8px 28px rgba(37,99,235,.10),
    0 2px 8px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}
body.theme-light .stat-summary-card::before {
  background: linear-gradient(90deg,
    transparent,
    rgba(37,99,235,.28),
    transparent) !important;
}
body.theme-light .stat-summary-value {
  color: #0f172a !important;
  text-shadow: none !important;
  font-weight: 800;
}
body.theme-light .stat-summary-item:last-child .stat-summary-value {
  color: #1d4ed8 !important;
  text-shadow: none !important;
}
body.theme-light .stat-summary-label {
  color: rgba(15,23,42,.45) !important;
}
body.theme-light .stat-summary-divider {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(37,99,235,.30) 40%,
    rgba(37,99,235,.45) 50%,
    rgba(37,99,235,.30) 60%,
    transparent 100%
  ) !important;
}

/* 6c. Category cards — white with coloured left bars, richer shadows */
body.theme-light .stat-cat-stars {
  background: linear-gradient(160deg,
    rgba(255,251,235,1) 0%,
    rgba(255,255,255,1) 60%) !important;
  border-color: rgba(246,196,83,.32) !important;
  box-shadow: 0 4px 16px rgba(246,196,83,.10), 0 1px 3px rgba(0,0,0,.05) !important;
}
body.theme-light .stat-cat-steam {
  background: linear-gradient(160deg,
    rgba(239,246,255,1) 0%,
    rgba(255,255,255,1) 60%) !important;
  border-color: rgba(94,164,255,.28) !important;
  box-shadow: 0 4px 16px rgba(94,164,255,.10), 0 1px 3px rgba(0,0,0,.05) !important;
}
body.theme-light .stat-cat-premium {
  background: linear-gradient(160deg,
    rgba(245,243,255,1) 0%,
    rgba(255,255,255,1) 60%) !important;
  border-color: rgba(168,85,247,.24) !important;
  box-shadow: 0 4px 16px rgba(168,85,247,.08), 0 1px 3px rgba(0,0,0,.05) !important;
}
body.theme-light .stat-cat-gifts {
  background: linear-gradient(160deg,
    rgba(236,253,245,1) 0%,
    rgba(255,255,255,1) 60%) !important;
  border-color: rgba(52,211,153,.26) !important;
  box-shadow: 0 4px 16px rgba(52,211,153,.08), 0 1px 3px rgba(0,0,0,.05) !important;
}
body.theme-light .stat-cat-card:hover {
  transform: translateY(-3px) !important;
}
body.theme-light .stat-cat-stars:hover {
  box-shadow: 0 10px 28px rgba(246,196,83,.18), 0 2px 6px rgba(0,0,0,.07) !important;
  border-color: rgba(246,196,83,.50) !important;
}
body.theme-light .stat-cat-steam:hover {
  box-shadow: 0 10px 28px rgba(94,164,255,.16), 0 2px 6px rgba(0,0,0,.07) !important;
  border-color: rgba(94,164,255,.44) !important;
}
body.theme-light .stat-cat-premium:hover {
  box-shadow: 0 10px 28px rgba(168,85,247,.14), 0 2px 6px rgba(0,0,0,.07) !important;
  border-color: rgba(168,85,247,.40) !important;
}
body.theme-light .stat-cat-gifts:hover {
  box-shadow: 0 10px 28px rgba(52,211,153,.14), 0 2px 6px rgba(0,0,0,.07) !important;
  border-color: rgba(52,211,153,.40) !important;
}
/* Left accent bars — keep colors, remove neon glow */
body.theme-light .stat-cat-card::before { box-shadow: none !important; }

/* Category text colors */
body.theme-light .stat-cat-name { color: #0f172a !important; font-weight: 700; }
body.theme-light .stat-cat-main-label { color: rgba(15,23,42,.40) !important; }
body.theme-light .stat-cat-stars .stat-cat-main-value  { color: #92600a !important; text-shadow: none !important; }
body.theme-light .stat-cat-steam .stat-cat-main-value  { color: #1d4ed8 !important; text-shadow: none !important; }
body.theme-light .stat-cat-premium .stat-cat-main-value{ color: #6d28d9 !important; text-shadow: none !important; }
body.theme-light .stat-cat-gifts .stat-cat-main-value  { color: #059669 !important; text-shadow: none !important; }

/* 6d. Category badges */
body.theme-light .stat-cat-stars .stat-cat-badge   { background: rgba(246,196,83,.14) !important; border-color: rgba(246,196,83,.32) !important; color: #92600a !important; }
body.theme-light .stat-cat-steam .stat-cat-badge   { background: rgba(94,164,255,.12) !important; border-color: rgba(94,164,255,.28) !important; color: #1d4ed8 !important; }
body.theme-light .stat-cat-premium .stat-cat-badge { background: rgba(168,85,247,.10) !important; border-color: rgba(168,85,247,.24) !important; color: #6d28d9 !important; }
body.theme-light .stat-cat-gifts .stat-cat-badge   { background: rgba(52,211,153,.10) !important; border-color: rgba(52,211,153,.22) !important; color: #059669 !important; }

/* ─── 7. SUPPORT SCREENS ─── */

/* 7a. Support list — ticket cards white elevated */
body.theme-light .ticket-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.07) !important;
  box-shadow:
    0 3px 14px rgba(0,0,0,.07),
    0 1px 3px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}
body.theme-light .ticket-card:hover {
  border-color: rgba(37,99,235,.18) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 8px 26px rgba(37,99,235,.11),
    0 2px 6px rgba(0,0,0,.05) !important;
}

/* 7b. Ticket status badges — visible on white */
body.theme-light .ticket-status.open {
  background: rgba(34,197,94,.12) !important;
  color: #15803d !important;
  border-color: rgba(34,197,94,.22) !important;
  box-shadow: none !important;
}
body.theme-light .ticket-status.closed {
  background: rgba(239,68,68,.10) !important;
  color: #b91c1c !important;
  border-color: rgba(239,68,68,.20) !important;
  box-shadow: none !important;
}

/* 7c. Support card "new ticket" button area */
body.theme-light .support-card {
  background: linear-gradient(160deg,
    rgba(239,246,255,1) 0%,
    rgba(255,255,255,1) 60%) !important;
  border: 1px solid rgba(37,99,235,.14) !important;
  box-shadow:
    0 4px 18px rgba(37,99,235,.08),
    0 1px 3px rgba(0,0,0,.04) !important;
}

/* ─── 8. GENERAL CARDS — order-card, stat-card, referral-card ─── */
body.theme-light .order-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.07) !important;
  box-shadow:
    0 3px 14px rgba(0,0,0,.07),
    0 1px 3px rgba(0,0,0,.04) !important;
}
body.theme-light .order-card:hover {
  border-color: rgba(37,99,235,.18) !important;
  box-shadow:
    0 8px 28px rgba(37,99,235,.11),
    0 2px 5px rgba(0,0,0,.05) !important;
}
body.theme-light .stat-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.07) !important;
  box-shadow: 0 3px 14px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04) !important;
}
body.theme-light .referral-card {
  background: linear-gradient(160deg,
    rgba(239,246,255,1) 0%,
    rgba(255,255,255,1) 60%) !important;
  border: 1px solid rgba(37,99,235,.14) !important;
  box-shadow: 0 4px 18px rgba(37,99,235,.08), 0 1px 4px rgba(0,0,0,.04) !important;
}

/* ─── 9. SETTINGS SCREEN ─── */
body.theme-light #screen-settings::before {
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%,
      rgba(37,99,235,.06) 0%,
      transparent 68%) !important;
  animation: none !important;
}
body.theme-light .profile-setting {
  border-bottom-color: rgba(0,0,0,.07) !important;
}
body.theme-light .profile-setting .label {
  color: #0f172a !important;
}

/* ─── 10. NAVIGATION BAR ─── */
body.theme-light .app-footer {
  background: rgba(255,255,255,.96) !important;
  border-top: 1px solid rgba(37,99,235,.10) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 -2px 16px rgba(37,99,235,.06) !important;
}
body.theme-light .nav-btn {
  color: rgba(15,23,42,.42) !important;
}
body.theme-light .nav-btn.active {
  color: #2563eb !important;
}

/* ─── 11. QUICK BUTTONS (catalog home) ─── */
body.theme-light .quick-btn {
  background: #ffffff !important;
  border: 1px solid rgba(37,99,235,.12) !important;
  color: #0f172a !important;
  box-shadow: 0 2px 10px rgba(37,99,235,.06), 0 1px 2px rgba(0,0,0,.04) !important;
}
body.theme-light .quick-btn:hover {
  border-color: rgba(37,99,235,.25) !important;
  background: rgba(239,246,255,1) !important;
  box-shadow: 0 4px 16px rgba(37,99,235,.10) !important;
}

/* ─── 12. ORDER DETAIL (legacy .order-status badges) ─── */
body.theme-light .order-status.delivered {
  background: rgba(34,197,94,.12) !important;
  color: #15803d !important;
  box-shadow: none !important;
}
body.theme-light .order-status.pending {
  background: rgba(251,191,36,.12) !important;
  color: #b45309 !important;
  box-shadow: none !important;
}
body.theme-light .order-status.failed {
  background: rgba(239,68,68,.10) !important;
  color: #b91c1c !important;
  box-shadow: none !important;
}
body.theme-light .order-status.paid {
  background: rgba(99,102,241,.10) !important;
  color: #4338ca !important;
  box-shadow: none !important;
}

/* ─── 13. CATEGORY CARDS — handled above (dark-identical), no overrides needed ─── */

/* ─── 14. PRODUCT CARDS (pack/premium/gifts) ─── */
body.theme-light .product-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04) !important;
}
body.theme-light .product-card:hover {
  border-color: rgba(37,99,235,.20) !important;
  box-shadow: 0 8px 26px rgba(37,99,235,.12), 0 2px 6px rgba(0,0,0,.06) !important;
  transform: translateY(-2px) !important;
}

/* ─── 15. RECIPIENT DISPLAY + INPUT ─── */
body.theme-light .recipient-display {
  background: #ffffff !important;
  border: 1px solid rgba(37,99,235,.14) !important;
  box-shadow: 0 4px 16px rgba(37,99,235,.08), 0 1px 4px rgba(0,0,0,.04) !important;
}
body.theme-light .recipient-input input {
  background: #ffffff !important;
  border: 1.5px solid rgba(37,99,235,.18) !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(37,99,235,.06) !important;
}
body.theme-light .recipient-input input:focus {
  border-color: rgba(37,99,235,.50) !important;
  box-shadow:
    0 0 0 3px rgba(37,99,235,.10),
    0 2px 8px rgba(37,99,235,.08) !important;
}
body.theme-light .recipient-input input.valid {
  border-color: rgba(34,197,94,.45) !important;
}

/* ─── 16. SUMMARY CARD ─── */
body.theme-light .summary-card {
  background: #ffffff !important;
  border: 1px solid rgba(37,99,235,.12) !important;
  box-shadow: 0 6px 22px rgba(37,99,235,.08), 0 2px 6px rgba(0,0,0,.05) !important;
}
body.theme-light .summary-card::after { display: none !important; }
body.theme-light .summary-row { border-bottom-color: rgba(0,0,0,.06) !important; }
body.theme-light .summary-row .label { color: rgba(15,23,42,.48) !important; }
body.theme-light .summary-row .value { color: #0f172a !important; font-weight: 600; }

/* ─── 17. PAY METHOD CARDS ─── */
body.theme-light .pay-method {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04) !important;
}
body.theme-light .pay-method:hover {
  border-color: rgba(37,99,235,.22) !important;
  box-shadow: 0 5px 18px rgba(37,99,235,.10) !important;
}
body.theme-light .pay-method.selected {
  border-color: rgba(37,99,235,.55) !important;
  box-shadow:
    0 0 0 2px rgba(37,99,235,.15),
    0 4px 16px rgba(37,99,235,.12) !important;
}

/* ─── 18. TOAST NOTIFICATIONS ─── */
body.theme-light .toast-success {
  background: linear-gradient(135deg,
    rgba(34,197,94,.12) 0%, rgba(16,185,129,.06) 100%) !important;
  border-color: rgba(34,197,94,.28) !important;
  box-shadow: 0 4px 16px rgba(34,197,94,.10) !important;
}
body.theme-light .toast-error {
  background: linear-gradient(135deg,
    rgba(239,68,68,.12) 0%, rgba(220,38,38,.06) 100%) !important;
  border-color: rgba(239,68,68,.28) !important;
  box-shadow: 0 4px 16px rgba(239,68,68,.10) !important;
}
body.theme-light .toast-info {
  background: linear-gradient(135deg,
    rgba(37,99,235,.10) 0%, rgba(37,99,235,.04) 100%) !important;
  border-color: rgba(37,99,235,.24) !important;
  box-shadow: 0 4px 16px rgba(37,99,235,.08) !important;
}
body.theme-light .toast-warning {
  background: linear-gradient(135deg,
    rgba(245,158,11,.12) 0%, rgba(245,158,11,.06) 100%) !important;
  border-color: rgba(245,158,11,.28) !important;
  box-shadow: 0 4px 16px rgba(245,158,11,.10) !important;
}

/* ─── 19. LANG BUTTONS (settings) ─── */
body.theme-light .lang-btn {
  background: rgba(255,255,255,.90) !important;
  border: 1.5px solid rgba(37,99,235,.14) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
  color: rgba(15,23,42,.65) !important;
}
body.theme-light .lang-btn.active {
  background: linear-gradient(135deg,
    rgba(37,99,235,.16) 0%, rgba(99,102,241,.10) 100%) !important;
  border-color: rgba(37,99,235,.45) !important;
  color: #1e40af !important;
  box-shadow: 0 3px 12px rgba(37,99,235,.12) !important;
}

/* ─── 20. HERO BANNER (catalog home — light) ─── */
body.theme-light .hero-banner {
  box-shadow:
    0 6px 24px rgba(37,99,235,.10),
    0 2px 6px rgba(0,0,0,.06) !important;
}

/* ─── 21. BANNER CARD ─── */
body.theme-light .banner-card {
  background: linear-gradient(160deg,
    rgba(239,246,255,1) 0%,
    rgba(255,255,255,1) 60%) !important;
  border: 1px solid rgba(37,99,235,.14) !important;
  box-shadow: 0 4px 16px rgba(37,99,235,.07), 0 1px 3px rgba(0,0,0,.04) !important;
}

/* ─── 22. STARS PACK ITEMS ─── */
body.theme-light .stars-pack-item {
  background: linear-gradient(160deg,
    rgba(255,251,235,1) 0%,
    rgba(255,255,255,1) 60%) !important;
  border-color: rgba(246,196,83,.28) !important;
  box-shadow: 0 3px 12px rgba(246,196,83,.08), 0 1px 3px rgba(0,0,0,.04) !important;
}
body.theme-light .stars-pack-item:hover {
  border-color: rgba(246,196,83,.50) !important;
  box-shadow: 0 8px 24px rgba(246,196,83,.14), 0 2px 6px rgba(0,0,0,.05) !important;
  transform: translateY(-2px) !important;
}
body.theme-light .stars-pack-name  { color: #0f172a !important; }
body.theme-light .stars-pack-price { color: #92600a !important; }
body.theme-light .stars-pack-desc  { color: rgba(15,23,42,.52) !important; }

/* ─── END PREMIUM LIGHT THEME v286 ─── */

/* ═══════════════════════════════════════════════════════════════
   ★  STARS — ПОЛУЧАТЕЛЬ + ОПЛАТА  LIGHT THEME PREMIUM  v294
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Заголовки экранов ── */
body.theme-light[data-theme="stars"] #screen-recipient .header h1,
body.theme-light[data-theme="stars"] #screen-payment   .header h1 {
  background: linear-gradient(135deg, #7a4f08 0%, #c69222 60%, #9a6b08 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter: none !important;
  text-shadow: none !important;
}

/* ── 2. Summary card — тёплый кремовый, золотые акценты ── */
body.theme-light[data-theme="stars"] .summary-card {
  background: linear-gradient(145deg, #fffef5 0%, #fffbea 60%, #fff6d8 100%) !important;
  border: 1px solid rgba(220,175,55,.32) !important;
  box-shadow:
    0 10px 30px rgba(200,150,20,.12),
    0 2px 8px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.90),
    inset 0 -1px 0 rgba(220,175,55,.10) !important;
  border-radius: 18px !important;
}
body.theme-light[data-theme="stars"] .summary-row {
  border-bottom-color: rgba(220,175,55,.16) !important;
}
body.theme-light[data-theme="stars"] .summary-row .label {
  color: rgba(100,70,10,.55) !important;
  font-weight: 500 !important;
}
body.theme-light[data-theme="stars"] .summary-row .value {
  color: #1f2430 !important;
  font-weight: 600 !important;
}
/* Строка «Итого» — крупная, золотая, с подсветкой */
body.theme-light[data-theme="stars"] .summary-row.summary-total .label {
  color: rgba(100,70,10,.65) !important;
  font-weight: 700 !important;
}
body.theme-light[data-theme="stars"] .summary-row.summary-total .value {
  color: #c69222 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  text-shadow: 0 0 14px rgba(200,150,20,.22) !important;
  filter: none !important;
}
/* Иконка ⭐ в summary */
body.theme-light[data-theme="stars"] .stars-pack-icon-wrap,
body.theme-light[data-theme="stars"] .summary-card .stars-pack-icon-wrap {
  filter: drop-shadow(0 3px 8px rgba(220,170,20,.55)) !important;
}

/* ── 3. Переключатель Себе / Другому ── */
body.theme-light[data-theme="stars"] .recipient-toggle {
  background: linear-gradient(135deg, #fff9e6 0%, #fff4cc 100%) !important;
  border: 1px solid rgba(220,175,55,.30) !important;
  box-shadow:
    0 4px 14px rgba(200,150,20,.10),
    inset 0 1px 0 rgba(255,255,255,.80) !important;
}
body.theme-light[data-theme="stars"] .recipient-toggle button {
  color: rgba(100,70,10,.42) !important;
  font-weight: 600 !important;
}
body.theme-light[data-theme="stars"] .recipient-toggle button.active {
  color: #1a0e00 !important;
}
/* Активный pill — насыщенное золото */
body.theme-light[data-theme="stars"] .segment-pill {
  background: linear-gradient(180deg, #FFD55A 0%, #E8A800 60%, #D49200 100%) !important;
  box-shadow:
    0 4px 12px rgba(200,148,20,.38),
    0 1px 3px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.35) !important;
  border-radius: 10px !important;
}

/* ── 4. Блок "Получатель" (self display) ── */
body.theme-light[data-theme="stars"] .recipient-display {
  background: linear-gradient(145deg, #fffef5, #fffadf) !important;
  border: 1px solid rgba(220,175,55,.28) !important;
  box-shadow:
    0 6px 18px rgba(200,150,20,.10),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
  border-radius: 16px !important;
}
body.theme-light[data-theme="stars"] .recipient-display .label {
  color: rgba(120,80,10,.55) !important;
  letter-spacing: .06em !important;
}
body.theme-light[data-theme="stars"] #self-username {
  color: #c69222 !important;
  font-weight: 700 !important;
  text-shadow: 0 0 10px rgba(200,150,20,.18) !important;
}

/* ── 5. Поле ввода @username ── */
body.theme-light[data-theme="stars"] .recipient-input input {
  background: linear-gradient(145deg, #fffef8, #fffbec) !important;
  border: 1px solid rgba(220,175,55,.28) !important;
  color: #1f2430 !important;
  -webkit-text-fill-color: #1f2430 !important;
}
body.theme-light[data-theme="stars"] .recipient-input input::placeholder {
  color: rgba(150,100,20,.38) !important;
}
body.theme-light[data-theme="stars"] .recipient-input input:focus {
  border-color: rgba(220,175,55,.62) !important;
  box-shadow: 0 0 0 3px rgba(220,175,55,.14) !important;
  background: #fffef5 !important;
}

/* ── 6. Способ оплаты — карточки ── */
body.theme-light[data-theme="stars"] .pay-method {
  background: linear-gradient(145deg, #fffef8, #fffbec) !important;
  border: 1px solid rgba(220,175,55,.22) !important;
  box-shadow: 0 4px 14px rgba(200,150,20,.08), inset 0 1px 0 rgba(255,255,255,.85) !important;
  color: #1f2430 !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease !important;
}
body.theme-light[data-theme="stars"] .pay-method:hover {
  border-color: rgba(220,175,55,.48) !important;
  box-shadow: 0 8px 22px rgba(200,150,20,.14) !important;
  transform: translateY(-1px) !important;
}
body.theme-light[data-theme="stars"] .pay-method.selected {
  background: linear-gradient(145deg, #fffef0, #fff8d6) !important;
  border: 1px solid rgba(220,175,55,.55) !important;
  box-shadow:
    0 6px 20px rgba(200,150,20,.16),
    0 0 0 3px rgba(220,175,55,.10),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
  animation: lightCardBreathGold 3.5s ease-in-out infinite !important;
}
body.theme-light[data-theme="stars"] .pm-name  { color: #1f2430 !important; }
body.theme-light[data-theme="stars"] .pm-check { color: #c69222 !important; filter: drop-shadow(0 0 4px rgba(200,150,20,.40)) !important; }

/* ── 7. Кнопка «К ОПЛАТЕ» / «ОПЛАТИТЬ» ── */
body.theme-light[data-theme="stars"] .recipient-pay-btn,
body.theme-light[data-theme="stars"] .payment-pay-btn {
  background: linear-gradient(180deg, #FFD55A 0%, #F5B800 50%, #E0A000 100%) !important;
  box-shadow:
    0 6px 20px rgba(200,148,20,.42),
    0 2px 6px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.32) !important;
  color: #1a0e00 !important;
  border-radius: 16px !important;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
}
body.theme-light[data-theme="stars"] .recipient-pay-btn:hover,
body.theme-light[data-theme="stars"] .payment-pay-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 10px 28px rgba(200,148,20,.50),
    0 3px 8px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.35) !important;
}
body.theme-light[data-theme="stars"] .recipient-pay-btn:active,
body.theme-light[data-theme="stars"] .payment-pay-btn:active {
  transform: scale(.983) !important;
  box-shadow: 0 3px 10px rgba(200,148,20,.30) !important;
  filter: brightness(.94) !important;
}
body.theme-light[data-theme="stars"] .recipient-pay-btn:disabled,
body.theme-light[data-theme="stars"] .payment-pay-btn:disabled {
  background: linear-gradient(180deg, rgba(240,200,100,.40), rgba(210,160,50,.35)) !important;
  box-shadow: none !important;
  color: rgba(80,50,0,.32) !important;
  transform: none !important;
  filter: none !important;
}

/* ─── END STARS RECIPIENT+PAYMENT LIGHT v294 ─── */

/* ═══════════════════════════════════════════════════════════════
   ★  STARS LIGHT — FIXES v295
   1. Summary «Товар» value — ярче, заметнее
   2. Поле «Другому» — карточка как «Себе»
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Строка «Товар» в summary — насыщенный тёмный + иконка ярче ── */
body.theme-light[data-theme="stars"] .summary-row:not(.summary-total) .value {
  color: #1a1200 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}
/* Иконка звезды в строке товара */
body.theme-light[data-theme="stars"] .summary-row .stars-pack-icon-img,
body.theme-light[data-theme="stars"] .summary-row .star-icon-img {
  filter: drop-shadow(0 2px 6px rgba(220,170,20,.60)) !important;
}
/* Количество звёзд — крупнее */
body.theme-light[data-theme="stars"] .summary-row .stars-count {
  color: #1a1200 !important;
  font-weight: 800 !important;
}

/* ── 2. Обёртка поля «Другому» — карточка как «Себе» ── */
body.theme-light[data-theme="stars"] #recipient-other-input {
  /* Карточка-обёртка: те же стили что у .recipient-display */
  background: linear-gradient(145deg, #fffef5, #fffadf) !important;
  border: 1px solid rgba(220,175,55,.28) !important;
  box-shadow:
    0 6px 18px rgba(200,150,20,.10),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
  border-radius: 16px !important;
  padding: 10px 14px 10px 16px !important;
  margin-top: 12px !important;
}
/* Псевдо-label через ::before — «ПОЛУЧАТЕЛЬ» над полем */
body.theme-light[data-theme="stars"] #recipient-other-input::before {
  content: attr(data-label) !important;
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  color: rgba(120,80,10,.55) !important;
  margin-bottom: 6px !important;
  text-transform: uppercase !important;
}
/* Сам input — без рамки и фона, выглядит как текст внутри карточки */
body.theme-light[data-theme="stars"] #recipient-other-input input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 32px 0 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #c69222 !important;
  -webkit-text-fill-color: #c69222 !important;
  border-radius: 0 !important;
  height: auto !important;
  outline: none !important;
  width: 100% !important;
}
body.theme-light[data-theme="stars"] #recipient-other-input input::placeholder {
  color: rgba(150,100,20,.45) !important;
  font-weight: 400 !important;
  font-size: 15px !important;
}
body.theme-light[data-theme="stars"] #recipient-other-input input:focus {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* При фокусе — подсветка всей карточки */
body.theme-light[data-theme="stars"] #recipient-other-input:focus-within {
  border-color: rgba(220,175,55,.60) !important;
  box-shadow:
    0 8px 24px rgba(200,150,20,.14),
    0 0 0 3px rgba(220,175,55,.12),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
}
/* Иконка ✓ валидации — сохраняем позицию */
body.theme-light[data-theme="stars"] #recipient-other-input .username-check-icon {
  top: 50% !important;
  transform: translateY(20%) !important;
  color: #c69222 !important;
}

/* ─── END STARS FIXES v295 ─── */

/* ═══════════════════════════════════════════════════════════════
   💙  STEAM — LIGHT THEME  PREMIUM REDESIGN  v296
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Фон страницы ── */
body.theme-light[data-theme="steam"] {
  background:
    radial-gradient(ellipse 70% 40% at 50% -5%, rgba(26,111,255,.20) 0%, transparent 65%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(100,160,255,.08) 0%, transparent 70%),
    linear-gradient(180deg, #f0f6ff 0%, #eaf2ff 50%, #e4eeff 100%) !important;
}

/* ── 2. Баннер — стеклянный синий ── */
body.theme-light[data-theme="steam"] .hero-banner.hero-v1.hero-steam {
  background:
    radial-gradient(ellipse 55% 80% at 18% 50%, rgba(100,160,255,.28) 0%, transparent 60%),
    radial-gradient(ellipse 45% 70% at 82% 45%, rgba(26,111,255,.18) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(60,120,255,.10) 0%, transparent 70%),
    linear-gradient(155deg, #f0f8ff 0%, #e4f0ff 45%, #d8e8ff 100%) !important;
  border: 1px solid rgba(26,111,255,.28) !important;
  box-shadow:
    0 12px 36px rgba(26,111,255,.14),
    0 2px 8px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 0 -1px 0 rgba(26,111,255,.10) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  overflow: hidden !important;
  position: relative !important;
}
/* ::before/::after на баннере Steam — скрыты, дождь делает JS */
body.theme-light[data-theme="steam"] .hero-banner.hero-v1.hero-steam::before,
body.theme-light[data-theme="steam"] .hero-banner.hero-v1.hero-steam::after {
  display: none !important;
}
/* Заголовок */
body.theme-light[data-theme="steam"] .hero-title {
  background: linear-gradient(135deg, #0a2a7a, #1a4fc4, #2060c8, #1a3a8a) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter: none !important;
}
body.theme-light[data-theme="steam"] .hero-subtitle {
  color: rgba(20,60,180,.55) !important;
  opacity: 1 !important;
  font-size: 13px !important;
}
/* Кот — синий glow + float */
body.theme-light[data-theme="steam"] .hero-banner .hero-mascot {
  animation: catFloat 4.5s ease-in-out infinite !important;
  filter: drop-shadow(0 8px 20px rgba(26,111,255,.38)) drop-shadow(0 2px 6px rgba(20,80,220,.20)) !important;
}

/* ── 3. Labels (Steam логин / Сумма) ── */
body.theme-light[data-theme="steam"] .section-title {
  color: rgba(20,60,180,.55) !important;
  border-bottom-color: rgba(26,111,255,.12) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
body.theme-light[data-theme="steam"] .section-title::before {
  background: linear-gradient(180deg, #1a6FFF, #1a4fc4) !important;
}

/* ── 4. Поле Steam логин ── */
body.theme-light[data-theme="steam"] .recipient-input input {
  background: linear-gradient(145deg, #f5f9ff, #edf4ff) !important;
  border: 1px solid rgba(26,111,255,.22) !important;
  color: #0a1a4a !important;
  -webkit-text-fill-color: #0a1a4a !important;
  border-radius: 14px !important;
  box-shadow: 0 3px 10px rgba(26,111,255,.08), inset 0 1px 0 rgba(255,255,255,.85) !important;
}
body.theme-light[data-theme="steam"] .recipient-input input::placeholder {
  color: rgba(26,80,200,.35) !important;
}
body.theme-light[data-theme="steam"] .recipient-input input:focus {
  border-color: rgba(26,111,255,.55) !important;
  box-shadow: 0 0 0 3px rgba(26,111,255,.12), 0 3px 10px rgba(26,111,255,.08) !important;
  background: #f0f7ff !important;
}

/* ── 5. Поле суммы ── */
body.theme-light[data-theme="steam"] .custom-input-row {
  background: linear-gradient(145deg, #f5f9ff, #edf4ff) !important;
  border: 1px solid rgba(26,111,255,.22) !important;
  border-radius: 16px !important;
  box-shadow: 0 3px 10px rgba(26,111,255,.08), inset 0 1px 0 rgba(255,255,255,.85) !important;
}
body.theme-light[data-theme="steam"] .custom-input-row:focus-within {
  border-color: rgba(26,111,255,.55) !important;
  box-shadow: 0 0 0 3px rgba(26,111,255,.12), 0 3px 10px rgba(26,111,255,.08) !important;
}
body.theme-light[data-theme="steam"] .custom-input-row input {
  color: #0a1a4a !important;
  -webkit-text-fill-color: #0a1a4a !important;
  background: transparent !important;
}
body.theme-light[data-theme="steam"] .custom-input-row input::placeholder {
  color: rgba(26,80,200,.32) !important;
}
body.theme-light[data-theme="steam"] .custom-input-row .label,
body.theme-light[data-theme="steam"] #steam-currency-symbol {
  color: #1a4fc4 !important;
  border-left-color: rgba(26,111,255,.16) !important;
  font-weight: 600 !important;
}
body.theme-light[data-theme="steam"] .custom-input-row:focus-within .label,
body.theme-light[data-theme="steam"] .custom-input-row:focus-within #steam-currency-symbol {
  color: #1a6FFF !important;
  border-left-color: rgba(26,111,255,.30) !important;
}

/* ── 6. Блок «К зачислению» ── */
body.theme-light[data-theme="steam"] .steam-calc-widget {
  background: linear-gradient(145deg, #eff6ff 0%, #e4eeff 60%, #dde8ff 100%) !important;
  border: 1px solid rgba(26,111,255,.25) !important;
  box-shadow:
    0 8px 24px rgba(26,111,255,.12),
    0 2px 6px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.80) !important;
  border-radius: 16px !important;
}
body.theme-light[data-theme="steam"] .steam-rate-title {
  color: #1a4fc4 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  background: rgba(26,111,255,.10) !important;
  display: inline-block !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  margin-bottom: 10px !important;
}
body.theme-light[data-theme="steam"] .steam-rate-row {
  border-bottom-color: rgba(26,111,255,.10) !important;
}
body.theme-light[data-theme="steam"] .steam-rate-cur {
  color: rgba(26,60,180,.50) !important;
  font-weight: 600 !important;
}
body.theme-light[data-theme="steam"] .steam-rate-value {
  color: #1a4fc4 !important;
  font-weight: 700 !important;
}
body.theme-light[data-theme="steam"] #steam-rate-info {
  color: rgba(26,60,180,.38) !important;
}
body.theme-light[data-theme="steam"] #steam-total-cost {
  border-top-color: rgba(26,111,255,.16) !important;
}
body.theme-light[data-theme="steam"] .total-label-txt {
  color: rgba(26,60,180,.55) !important;
  font-weight: 600 !important;
}
body.theme-light[data-theme="steam"] .total-amount-txt,
body.theme-light[data-theme="steam"] .steam-total-row .steam-rate-value {
  color: #1a6FFF !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  text-shadow: 0 0 14px rgba(26,111,255,.22) !important;
}
body.theme-light[data-theme="steam"] .steam-amount-hint {
  color: rgba(26,80,200,.45) !important;
}

/* ── 7. Кнопка «ДАЛЕЕ» ── */
body.theme-light[data-theme="steam"] .steam-next-btn,
body.theme-light[data-theme="steam"] .recipient-pay-btn,
body.theme-light[data-theme="steam"] .payment-pay-btn {
  background: linear-gradient(180deg, #4a8aff 0%, #1a6FFF 50%, #0f5de0 100%) !important;
  box-shadow:
    0 6px 20px rgba(26,111,255,.45),
    0 2px 6px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
  color: #ffffff !important;
  border-radius: 16px !important;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
}
body.theme-light[data-theme="steam"] .steam-next-btn:hover,
body.theme-light[data-theme="steam"] .recipient-pay-btn:hover,
body.theme-light[data-theme="steam"] .payment-pay-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 10px 28px rgba(26,111,255,.52),
    0 3px 8px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
}
body.theme-light[data-theme="steam"] .steam-next-btn:active,
body.theme-light[data-theme="steam"] .recipient-pay-btn:active,
body.theme-light[data-theme="steam"] .payment-pay-btn:active {
  transform: scale(.983) !important;
  box-shadow: 0 3px 10px rgba(26,111,255,.30) !important;
  filter: brightness(.93) !important;
}
body.theme-light[data-theme="steam"] .steam-next-btn:disabled,
body.theme-light[data-theme="steam"] .recipient-pay-btn:disabled,
body.theme-light[data-theme="steam"] .payment-pay-btn:disabled {
  background: linear-gradient(180deg, rgba(100,160,255,.40), rgba(60,120,220,.35)) !important;
  box-shadow: none !important;
  color: rgba(0,40,130,.30) !important;
  transform: none !important;
  filter: none !important;
}

/* ── 8. Summary карточка (Оплата) ── */
body.theme-light[data-theme="steam"] .summary-card {
  background: linear-gradient(145deg, #eef6ff 0%, #e4f0ff 50%, #d8e8ff 100%) !important;
  border: 1px solid rgba(26,111,255,.32) !important;
  box-shadow:
    0 12px 36px rgba(26,111,255,.15),
    0 2px 8px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.90),
    inset 0 -1px 0 rgba(26,111,255,.12) !important;
  border-radius: 18px !important;
}
body.theme-light[data-theme="steam"] .summary-row {
  border-bottom-color: rgba(26,111,255,.14) !important;
}
/* Label — тихий, вторичный */
body.theme-light[data-theme="steam"] .summary-row .label {
  color: rgba(26,60,180,.48) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
/* Value — насыщенный тёмно-синий, жирный */
body.theme-light[data-theme="steam"] .summary-row .value {
  color: #1a3a8a !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}
/* Строка «Итого» — крупная, яркая */
body.theme-light[data-theme="steam"] .summary-row.summary-total {
  margin-top: 2px !important;
}
body.theme-light[data-theme="steam"] .summary-row.summary-total .label {
  color: rgba(26,60,180,.60) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}
body.theme-light[data-theme="steam"] .summary-row.summary-total .value,
body.theme-light[data-theme="steam"] #pay-total-value {
  color: #1a6FFF !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  text-shadow: 0 0 16px rgba(26,111,255,.28) !important;
  filter: none !important;
}

/* ── 9. Label «СПОСОБ ОПЛАТЫ» ── */
body.theme-light[data-theme="steam"] #payment-method-label {
  color: rgba(26,60,180,.55) !important;
  border-bottom-color: rgba(26,111,255,.12) !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
}
body.theme-light[data-theme="steam"] #payment-method-label::before {
  background: linear-gradient(180deg, #1a6FFF, #1a4fc4) !important;
}

/* ── 10. Карточки оплаты ── */
body.theme-light[data-theme="steam"] .pay-method {
  background: linear-gradient(145deg, #f5f9ff, #edf4ff) !important;
  border: 1px solid rgba(26,111,255,.20) !important;
  box-shadow: 0 4px 14px rgba(26,111,255,.09), inset 0 1px 0 rgba(255,255,255,.88) !important;
  color: #1a3a8a !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease !important;
}
body.theme-light[data-theme="steam"] .pay-method:hover {
  border-color: rgba(26,111,255,.45) !important;
  box-shadow: 0 8px 22px rgba(26,111,255,.16) !important;
  transform: translateY(-1px) !important;
}
/* Выбранная карточка — чёткий синий акцент */
body.theme-light[data-theme="steam"] .pay-method.selected {
  background: linear-gradient(145deg, #e8f2ff, #d8e8ff) !important;
  border: 1px solid rgba(26,111,255,.55) !important;
  box-shadow:
    0 8px 24px rgba(26,111,255,.22),
    0 0 0 3px rgba(26,111,255,.10),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
  animation: lightCardBreathBlue 3.5s ease-in-out infinite !important;
}
body.theme-light[data-theme="steam"] .pm-name {
  color: #1a3a8a !important;
  font-weight: 600 !important;
}
body.theme-light[data-theme="steam"] .pay-method.selected .pm-name {
  color: #1a6FFF !important;
  font-weight: 700 !important;
}
body.theme-light[data-theme="steam"] .pm-check {
  color: #1a6FFF !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  filter: drop-shadow(0 0 5px rgba(26,111,255,.55)) !important;
}

/* ─── END STEAM LIGHT PREMIUM v296 ─── */

/* ── Steam — недостающие блоки Получатель/Оплата ── */

/* Переключатель Себе/Другому */
body.theme-light[data-theme="steam"] .recipient-toggle {
  background: linear-gradient(135deg, #f0f6ff 0%, #e4efff 100%) !important;
  border: 1px solid rgba(26,111,255,.28) !important;
  box-shadow: 0 4px 14px rgba(26,111,255,.10), inset 0 1px 0 rgba(255,255,255,.80) !important;
}
body.theme-light[data-theme="steam"] .recipient-toggle button {
  color: rgba(10,30,100,.42) !important; font-weight: 600 !important;
}
body.theme-light[data-theme="steam"] .recipient-toggle button.active { color: #ffffff !important; }
body.theme-light[data-theme="steam"] .segment-pill {
  background: linear-gradient(180deg, #4a8aff 0%, #1a6FFF 60%, #0f5de0 100%) !important;
  box-shadow: 0 4px 12px rgba(26,111,255,.40), 0 1px 3px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.35) !important;
  border-radius: 10px !important;
}

/* Блок «Себе» */
body.theme-light[data-theme="steam"] .recipient-display {
  background: linear-gradient(145deg, #f0f6ff, #e4efff) !important;
  border: 1px solid rgba(26,111,255,.26) !important;
  box-shadow: 0 6px 18px rgba(26,111,255,.10), inset 0 1px 0 rgba(255,255,255,.85) !important;
  border-radius: 16px !important;
}
body.theme-light[data-theme="steam"] .recipient-display .label {
  color: rgba(10,30,120,.55) !important; letter-spacing: .06em !important;
}
body.theme-light[data-theme="steam"] #self-username {
  color: #1a6FFF !important; font-weight: 700 !important;
  text-shadow: 0 0 10px rgba(26,111,255,.20) !important;
}

/* Поле «Другому» — карточка как «Себе» */
body.theme-light[data-theme="steam"] #recipient-other-input {
  background: linear-gradient(145deg, #f0f6ff, #e4efff) !important;
  border: 1px solid rgba(26,111,255,.26) !important;
  box-shadow: 0 6px 18px rgba(26,111,255,.10), inset 0 1px 0 rgba(255,255,255,.85) !important;
  border-radius: 16px !important;
  padding: 10px 14px 10px 16px !important;
  margin-top: 12px !important;
}
body.theme-light[data-theme="steam"] #recipient-other-input::before {
  content: attr(data-label) !important;
  display: block !important;
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .06em !important;
  color: rgba(10,30,120,.55) !important;
  margin-bottom: 6px !important; text-transform: uppercase !important;
}
body.theme-light[data-theme="steam"] #recipient-other-input input {
  background: transparent !important; border: none !important;
  box-shadow: none !important; padding: 0 32px 0 0 !important;
  font-size: 16px !important; font-weight: 700 !important;
  color: #1a6FFF !important; -webkit-text-fill-color: #1a6FFF !important;
  border-radius: 0 !important; height: auto !important;
  outline: none !important; width: 100% !important;
}
body.theme-light[data-theme="steam"] #recipient-other-input input::placeholder {
  color: rgba(26,80,220,.38) !important;
  font-weight: 400 !important; font-size: 15px !important;
}
body.theme-light[data-theme="steam"] #recipient-other-input input:focus {
  border: none !important; box-shadow: none !important; background: transparent !important;
}
body.theme-light[data-theme="steam"] #recipient-other-input:focus-within {
  border-color: rgba(26,111,255,.58) !important;
  box-shadow: 0 8px 24px rgba(26,111,255,.14), 0 0 0 3px rgba(26,111,255,.12), inset 0 1px 0 rgba(255,255,255,.90) !important;
}
body.theme-light[data-theme="steam"] #recipient-other-input .username-check-icon {
  top: 50% !important; transform: translateY(20%) !important; color: #1a6FFF !important;
}

/* Summary карточка на экране Получатель (не только Оплата) */
body.theme-light[data-theme="steam"] #screen-recipient .summary-card,
body.theme-light[data-theme="steam"] #selected-product-info.summary-card {
  background: linear-gradient(145deg, #f0f7ff 0%, #e6f0ff 60%, #d8e8ff 100%) !important;
  border: 1px solid rgba(26,111,255,.30) !important;
  box-shadow: 0 10px 30px rgba(26,111,255,.13), 0 2px 8px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.90), inset 0 -1px 0 rgba(26,111,255,.10) !important;
  border-radius: 18px !important;
}

/* Кнопка «К ОПЛАТЕ» на экране Получатель */
body.theme-light[data-theme="steam"] #screen-recipient .recipient-pay-btn {
  background: linear-gradient(180deg, #4a8aff 0%, #1a6FFF 50%, #0f5de0 100%) !important;
  box-shadow: 0 6px 20px rgba(26,111,255,.45), 0 2px 6px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.28) !important;
  color: #ffffff !important; border-radius: 16px !important;
}
body.theme-light[data-theme="steam"] #screen-recipient .recipient-pay-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 28px rgba(26,111,255,.52), inset 0 1px 0 rgba(255,255,255,.32) !important;
}
body.theme-light[data-theme="steam"] #screen-recipient .recipient-pay-btn:active {
  transform: scale(.983) !important; filter: brightness(.93) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PAYMENT SCREEN — UNIFIED STYLE  (идентично Stars)  v298
   Steam=синий · Premium=фиолетовый · Gifts=зелёный
   ═══════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━  💙  STEAM  ━━━━━━━━━━━━━━━ */
/* Summary карточка */
body.theme-light[data-theme="steam"] #screen-payment .summary-card {
  background: linear-gradient(145deg, #f0f7ff 0%, #e6f0ff 60%, #d8e8ff 100%) !important;
  border: 1px solid rgba(26,111,255,.30) !important;
  box-shadow:
    0 10px 30px rgba(26,111,255,.13),
    0 2px 8px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.90),
    inset 0 -1px 0 rgba(26,111,255,.10) !important;
  border-radius: 18px !important;
}
body.theme-light[data-theme="steam"] #screen-payment .summary-row {
  border-bottom-color: rgba(26,111,255,.14) !important;
}
body.theme-light[data-theme="steam"] #screen-payment .summary-row .label {
  color: rgba(26,60,180,.52) !important;
  font-weight: 500 !important;
}
body.theme-light[data-theme="steam"] #screen-payment .summary-row .value {
  color: #1a3a8a !important;
  font-weight: 700 !important;
}
body.theme-light[data-theme="steam"] #screen-payment .summary-row.summary-total .label {
  color: rgba(26,60,180,.65) !important;
  font-weight: 700 !important;
}
body.theme-light[data-theme="steam"] #screen-payment .summary-row.summary-total .value,
body.theme-light[data-theme="steam"] #screen-payment #pay-total-value {
  color: #1a6FFF !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  text-shadow: 0 0 14px rgba(26,111,255,.25) !important;
  filter: none !important;
}
/* Карточки оплаты */
body.theme-light[data-theme="steam"] #screen-payment .pay-method {
  background: linear-gradient(145deg, #f5f9ff, #edf4ff) !important;
  border: 1px solid rgba(26,111,255,.20) !important;
  box-shadow: 0 4px 14px rgba(26,111,255,.09), inset 0 1px 0 rgba(255,255,255,.88) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease !important;
}
body.theme-light[data-theme="steam"] #screen-payment .pay-method:hover {
  border-color: rgba(26,111,255,.45) !important;
  box-shadow: 0 8px 22px rgba(26,111,255,.16) !important;
  transform: translateY(-1px) !important;
}
body.theme-light[data-theme="steam"] #screen-payment .pay-method.selected {
  background: linear-gradient(145deg, #e8f2ff, #d8e8ff) !important;
  border: 1px solid rgba(26,111,255,.55) !important;
  box-shadow:
    0 8px 24px rgba(26,111,255,.20),
    0 0 0 3px rgba(26,111,255,.09),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
  animation: lightCardBreathBlue 3.5s ease-in-out infinite !important;
}
body.theme-light[data-theme="steam"] #screen-payment .pm-name { color: #1a3a8a !important; font-weight: 600 !important; }
body.theme-light[data-theme="steam"] #screen-payment .pay-method.selected .pm-name { color: #1a6FFF !important; font-weight: 700 !important; }
body.theme-light[data-theme="steam"] #screen-payment .pm-check { color: #1a6FFF !important; filter: drop-shadow(0 0 5px rgba(26,111,255,.55)) !important; font-size: 16px !important; font-weight: 800 !important; }
/* Кнопка */
body.theme-light[data-theme="steam"] #screen-payment .payment-pay-btn {
  background: linear-gradient(180deg, #4a8aff 0%, #1a6FFF 50%, #0f5de0 100%) !important;
  box-shadow: 0 6px 20px rgba(26,111,255,.45), 0 2px 6px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.25) !important;
  color: #ffffff !important;
  border-radius: 16px !important;
}
body.theme-light[data-theme="steam"] #screen-payment .payment-pay-btn:hover  { transform: translateY(-1px) !important; box-shadow: 0 10px 28px rgba(26,111,255,.52), inset 0 1px 0 rgba(255,255,255,.28) !important; }
body.theme-light[data-theme="steam"] #screen-payment .payment-pay-btn:active { transform: scale(.983) !important; filter: brightness(.93) !important; }
/* Label «СПОСОБ ОПЛАТЫ» */
body.theme-light[data-theme="steam"] #screen-payment #payment-method-label {
  color: rgba(26,60,180,.55) !important;
  border-bottom-color: rgba(26,111,255,.12) !important;
  font-weight: 700 !important;
}
body.theme-light[data-theme="steam"] #screen-payment #payment-method-label::before {
  background: linear-gradient(180deg, #1a6FFF, #1a4fc4) !important;
}

/* ━━━━━━━━━━━━━━━  💜  PREMIUM  ━━━━━━━━━━━━━━━ */
body.theme-light[data-theme="premium"] #screen-payment .summary-card {
  background: linear-gradient(145deg, #f7f0ff 0%, #efe4ff 60%, #e4d4ff 100%) !important;
  border: 1px solid rgba(160,90,255,.30) !important;
  box-shadow:
    0 10px 30px rgba(160,90,255,.13),
    0 2px 8px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.90),
    inset 0 -1px 0 rgba(160,90,255,.10) !important;
  border-radius: 18px !important;
}
body.theme-light[data-theme="premium"] #screen-payment .summary-row {
  border-bottom-color: rgba(160,90,255,.14) !important;
}
body.theme-light[data-theme="premium"] #screen-payment .summary-row .label {
  color: rgba(100,40,200,.52) !important;
  font-weight: 500 !important;
}
body.theme-light[data-theme="premium"] #screen-payment .summary-row .value {
  color: #4a1a8a !important;
  font-weight: 700 !important;
}
body.theme-light[data-theme="premium"] #screen-payment .summary-row.summary-total .label {
  color: rgba(100,40,200,.65) !important;
  font-weight: 700 !important;
}
body.theme-light[data-theme="premium"] #screen-payment .summary-row.summary-total .value,
body.theme-light[data-theme="premium"] #screen-payment #pay-total-value {
  color: #8a3fe0 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  text-shadow: 0 0 14px rgba(160,90,255,.28) !important;
  filter: none !important;
}
body.theme-light[data-theme="premium"] #screen-payment .pay-method {
  background: linear-gradient(145deg, #faf5ff, #f3e8ff) !important;
  border: 1px solid rgba(160,90,255,.20) !important;
  box-shadow: 0 4px 14px rgba(160,90,255,.09), inset 0 1px 0 rgba(255,255,255,.88) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease !important;
}
body.theme-light[data-theme="premium"] #screen-payment .pay-method:hover {
  border-color: rgba(160,90,255,.45) !important;
  box-shadow: 0 8px 22px rgba(160,90,255,.16) !important;
  transform: translateY(-1px) !important;
}
body.theme-light[data-theme="premium"] #screen-payment .pay-method.selected {
  background: linear-gradient(145deg, #f0e4ff, #e4d0ff) !important;
  border: 1px solid rgba(160,90,255,.55) !important;
  box-shadow:
    0 8px 24px rgba(160,90,255,.20),
    0 0 0 3px rgba(160,90,255,.09),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
  animation: lightCardBreath 3.5s ease-in-out infinite !important;
}
body.theme-light[data-theme="premium"] #screen-payment .pm-name { color: #4a1a8a !important; font-weight: 600 !important; }
body.theme-light[data-theme="premium"] #screen-payment .pay-method.selected .pm-name { color: #8a3fe0 !important; font-weight: 700 !important; }
body.theme-light[data-theme="premium"] #screen-payment .pm-check { color: #8a3fe0 !important; filter: drop-shadow(0 0 5px rgba(160,90,255,.55)) !important; font-size: 16px !important; font-weight: 800 !important; }
body.theme-light[data-theme="premium"] #screen-payment .payment-pay-btn {
  background: linear-gradient(180deg, #c48bff 0%, #8a3fe0 50%, #7030c8 100%) !important;
  box-shadow: 0 6px 20px rgba(160,90,255,.45), 0 2px 6px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.25) !important;
  color: #ffffff !important;
  border-radius: 16px !important;
}
body.theme-light[data-theme="premium"] #screen-payment .payment-pay-btn:hover  { transform: translateY(-1px) !important; box-shadow: 0 10px 28px rgba(160,90,255,.52), inset 0 1px 0 rgba(255,255,255,.28) !important; }
body.theme-light[data-theme="premium"] #screen-payment .payment-pay-btn:active { transform: scale(.983) !important; filter: brightness(.93) !important; }
body.theme-light[data-theme="premium"] #screen-payment #payment-method-label {
  color: rgba(100,40,200,.55) !important;
  border-bottom-color: rgba(160,90,255,.12) !important;
  font-weight: 700 !important;
}
body.theme-light[data-theme="premium"] #screen-payment #payment-method-label::before {
  background: linear-gradient(180deg, #a855f7, #7e22ce) !important;
}

/* ━━━━━━━━━━━━━━━  💚  GIFTS  ━━━━━━━━━━━━━━━ */
body.theme-light[data-theme="gifts"] #screen-payment .summary-card {
  background: linear-gradient(145deg, #f0fdf6 0%, #e2f8ec 60%, #d4f0e2 100%) !important;
  border: 1px solid rgba(52,211,120,.30) !important;
  box-shadow:
    0 10px 30px rgba(52,211,120,.13),
    0 2px 8px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.90),
    inset 0 -1px 0 rgba(52,211,120,.10) !important;
  border-radius: 18px !important;
}
body.theme-light[data-theme="gifts"] #screen-payment .summary-row {
  border-bottom-color: rgba(52,211,120,.14) !important;
}
body.theme-light[data-theme="gifts"] #screen-payment .summary-row .label {
  color: rgba(5,100,60,.52) !important;
  font-weight: 500 !important;
}
body.theme-light[data-theme="gifts"] #screen-payment .summary-row .value {
  color: #065f35 !important;
  font-weight: 700 !important;
}
body.theme-light[data-theme="gifts"] #screen-payment .summary-row.summary-total .label {
  color: rgba(5,100,60,.65) !important;
  font-weight: 700 !important;
}
body.theme-light[data-theme="gifts"] #screen-payment .summary-row.summary-total .value,
body.theme-light[data-theme="gifts"] #screen-payment #pay-total-value {
  color: #059669 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  text-shadow: 0 0 14px rgba(52,211,120,.28) !important;
  filter: none !important;
}
body.theme-light[data-theme="gifts"] #screen-payment .pay-method {
  background: linear-gradient(145deg, #f4fdf8, #e8f9f0) !important;
  border: 1px solid rgba(52,211,120,.20) !important;
  box-shadow: 0 4px 14px rgba(52,211,120,.09), inset 0 1px 0 rgba(255,255,255,.88) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease !important;
}
body.theme-light[data-theme="gifts"] #screen-payment .pay-method:hover {
  border-color: rgba(52,211,120,.45) !important;
  box-shadow: 0 8px 22px rgba(52,211,120,.16) !important;
  transform: translateY(-1px) !important;
}
body.theme-light[data-theme="gifts"] #screen-payment .pay-method.selected {
  background: linear-gradient(145deg, #e2f8ec, #cff0e0) !important;
  border: 1px solid rgba(52,211,120,.55) !important;
  box-shadow:
    0 8px 24px rgba(52,211,120,.20),
    0 0 0 3px rgba(52,211,120,.09),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
  animation: lightCardBreathGreen 3.5s ease-in-out infinite !important;
}
body.theme-light[data-theme="gifts"] #screen-payment .pm-name { color: #065f35 !important; font-weight: 600 !important; }
body.theme-light[data-theme="gifts"] #screen-payment .pay-method.selected .pm-name { color: #059669 !important; font-weight: 700 !important; }
body.theme-light[data-theme="gifts"] #screen-payment .pm-check { color: #059669 !important; filter: drop-shadow(0 0 5px rgba(52,211,120,.55)) !important; font-size: 16px !important; font-weight: 800 !important; }
body.theme-light[data-theme="gifts"] #screen-payment .payment-pay-btn {
  background: linear-gradient(180deg, #4ade90 0%, #10b96a 50%, #059652 100%) !important;
  box-shadow: 0 6px 20px rgba(52,211,120,.45), 0 2px 6px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.25) !important;
  color: #ffffff !important;
  border-radius: 16px !important;
}
body.theme-light[data-theme="gifts"] #screen-payment .payment-pay-btn:hover  { transform: translateY(-1px) !important; box-shadow: 0 10px 28px rgba(52,211,120,.52), inset 0 1px 0 rgba(255,255,255,.28) !important; }
body.theme-light[data-theme="gifts"] #screen-payment .payment-pay-btn:active { transform: scale(.983) !important; filter: brightness(.93) !important; }
body.theme-light[data-theme="gifts"] #screen-payment #payment-method-label {
  color: rgba(5,100,60,.55) !important;
  border-bottom-color: rgba(52,211,120,.12) !important;
  font-weight: 700 !important;
}
body.theme-light[data-theme="gifts"] #screen-payment #payment-method-label::before {
  background: linear-gradient(180deg, #34d370, #059652) !important;
}

/* ─── END PAYMENT UNIFIED LIGHT v298 ─── */

/* ═══════════════════════════════════════════════════════════════
   💜  PREMIUM — LIGHT THEME  PREMIUM REDESIGN  v299
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Фон страницы ── */
body.theme-light[data-theme="premium"] {
  background:
    radial-gradient(ellipse 70% 40% at 50% -5%, rgba(160,90,255,.22) 0%, transparent 65%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(180,120,255,.08) 0%, transparent 70%),
    linear-gradient(180deg, #f8f2ff 0%, #f2e8ff 50%, #ece0ff 100%) !important;
}

/* ── 2. Баннер ── */
body.theme-light[data-theme="premium"] .hero-banner.hero-v1.hero-premium,
body.theme-light[data-theme="premium"] #screen-premium .hero-banner {
  background:
    radial-gradient(ellipse 55% 80% at 18% 50%, rgba(200,140,255,.28) 0%, transparent 60%),
    radial-gradient(ellipse 45% 70% at 82% 45%, rgba(160,90,255,.18) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(140,70,255,.10) 0%, transparent 70%),
    linear-gradient(155deg, #faf5ff 0%, #f0e4ff 45%, #e8d4ff 100%) !important;
  border: 1px solid rgba(160,90,255,.28) !important;
  box-shadow:
    0 12px 36px rgba(160,90,255,.14),
    0 2px 8px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 0 -1px 0 rgba(160,90,255,.10) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  overflow: hidden !important;
  position: relative !important;
}
/* ::before/::after на баннере Premium — скрыты, дождь делает JS */
body.theme-light[data-theme="premium"] .hero-banner.hero-v1.hero-premium::before,
body.theme-light[data-theme="premium"] .hero-banner.hero-v1.hero-premium::after {
  display: none !important;
}
body.theme-light[data-theme="premium"] .hero-title {
  background: linear-gradient(135deg, #3b0d7a, #7e22ce, #8a3fe0, #4a1278) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter: none !important;
}
body.theme-light[data-theme="premium"] #screen-premium .hero-subtitle {
  color: rgba(80,20,160,.55) !important;
  opacity: 1 !important; font-size: 13px !important;
}
body.theme-light[data-theme="premium"] .hero-banner .hero-mascot {
  animation: catFloat 4.5s ease-in-out infinite !important;
  filter: drop-shadow(0 8px 20px rgba(160,90,255,.42)) drop-shadow(0 2px 6px rgba(120,40,220,.22)) !important;
}

/* ── 3. Карточки товаров ── */
body.theme-light[data-theme="premium"] .product-card {
  background: linear-gradient(145deg, #fdf8ff, #f7eeff) !important;
  border: 1px solid rgba(160,90,255,.18) !important;
  box-shadow:
    0 8px 22px rgba(160,90,255,.10),
    0 2px 6px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
  border-radius: 16px !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .15s ease !important;
  animation: lightCardBreath 4s ease-in-out infinite !important;
}
body.theme-light[data-theme="premium"] .product-card:nth-child(2) { animation-delay: 1.2s !important; }
body.theme-light[data-theme="premium"] .product-card:nth-child(3) { animation-delay: 2.4s !important; }
body.theme-light[data-theme="premium"] .product-card:hover {
  border-color: rgba(160,90,255,.42) !important;
  box-shadow: 0 14px 34px rgba(160,90,255,.18), 0 3px 8px rgba(0,0,0,.05) !important;
  transform: translateY(-2px) !important;
  animation: none !important;
}
body.theme-light[data-theme="premium"] .product-card:active {
  transform: scale(.985) !important; animation: none !important;
}
body.theme-light[data-theme="premium"] .product-card.selected {
  background: linear-gradient(145deg, #f5eaff, #edd4ff) !important;
  border: 1px solid rgba(160,90,255,.55) !important;
  box-shadow:
    0 10px 30px rgba(160,90,255,.20),
    0 0 0 3px rgba(160,90,255,.09),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
  animation: lightCardBreath 3.5s ease-in-out infinite !important;
}
body.theme-light[data-theme="premium"] .product-card.premium-featured {
  background: linear-gradient(145deg, #fdf8ff, #f7eeff) !important;
  border: 1px solid rgba(160,90,255,.18) !important;
}
/* ::before — полоса слева (не скрываем, она нужна) */
body.theme-light[data-theme="premium"] .product-card.premium-featured::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important; top: 16px !important; bottom: 16px !important;
  width: 3px !important;
  border-radius: 0 2px 2px 0 !important;
  background: linear-gradient(180deg, #c98bff 0%, #8f4fff 100%) !important;
  box-shadow: none !important;
  opacity: .85 !important;
  pointer-events: none !important;
}
/* ::after — тёмный shimmer overlay скрываем */
body.theme-light[data-theme="premium"] .product-card.premium-featured::after { display: none !important; }
body.theme-light[data-theme="premium"] .product-card .p-title {
  color: #4a1a8a !important; font-weight: 700 !important; font-size: 14px !important;
  text-shadow: none !important; background: none !important; -webkit-text-fill-color: unset !important;
}
body.theme-light[data-theme="premium"] .product-card .p-price {
  color: #8a3fe0 !important; font-size: 17px !important; font-weight: 800 !important;
  text-shadow: 0 0 10px rgba(160,90,255,.22) !important;
  filter: none !important; background: none !important; -webkit-text-fill-color: unset !important;
}
body.theme-light[data-theme="premium"] .product-card .p-icon {
  filter: drop-shadow(0 4px 10px rgba(160,90,255,.45)) !important;
}
body.theme-light[data-theme="premium"] .product-card:hover .p-icon {
  filter: drop-shadow(0 6px 16px rgba(160,90,255,.65)) !important;
}

/* ── 4. Section labels ── */
body.theme-light[data-theme="premium"] .section-title {
  color: rgba(80,20,160,.55) !important;
  border-bottom-color: rgba(160,90,255,.12) !important;
  font-weight: 700 !important;
}
body.theme-light[data-theme="premium"] .section-title::before {
  background: linear-gradient(180deg, #a855f7, #7e22ce) !important;
}

/* ── 5. Заголовки экранов ── */
body.theme-light[data-theme="premium"] #screen-recipient .header h1,
body.theme-light[data-theme="premium"] #screen-payment .header h1 {
  background: linear-gradient(135deg, #3b0d7a, #8a3fe0, #6d28d9) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter: none !important; text-shadow: none !important;
}

/* ── 6. Summary карточка ── */
body.theme-light[data-theme="premium"] #selected-product-info.summary-card,
body.theme-light[data-theme="premium"] .summary-card {
  background: linear-gradient(145deg, #fdf6ff 0%, #f7eaff 60%, #f0deff 100%) !important;
  border: 1px solid rgba(160,90,255,.30) !important;
  box-shadow:
    0 10px 30px rgba(160,90,255,.13),
    0 2px 8px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.90),
    inset 0 -1px 0 rgba(160,90,255,.10) !important;
  border-radius: 18px !important;
}
body.theme-light[data-theme="premium"] .summary-row {
  border-bottom-color: rgba(160,90,255,.14) !important;
}
body.theme-light[data-theme="premium"] .summary-row .label {
  color: rgba(100,30,180,.52) !important; font-weight: 500 !important;
}
body.theme-light[data-theme="premium"] .summary-row .value {
  color: #4a1a8a !important; font-weight: 700 !important;
}
body.theme-light[data-theme="premium"] .summary-row.summary-total .label {
  color: rgba(100,30,180,.65) !important; font-weight: 700 !important;
}
body.theme-light[data-theme="premium"] .summary-row.summary-total .value,
body.theme-light[data-theme="premium"] #selected-product-info .summary-row.summary-total .value {
  color: #8a3fe0 !important;
  font-size: 20px !important; font-weight: 800 !important;
  text-shadow: 0 0 14px rgba(160,90,255,.28) !important;
  filter: none !important;
}

/* ── 7. Переключатель Себе/Другому ── */
body.theme-light[data-theme="premium"] .recipient-toggle {
  background: linear-gradient(135deg, #f8f0ff 0%, #f2e4ff 100%) !important;
  border: 1px solid rgba(160,90,255,.28) !important;
  box-shadow: 0 4px 14px rgba(160,90,255,.10), inset 0 1px 0 rgba(255,255,255,.80) !important;
}
body.theme-light[data-theme="premium"] .recipient-toggle button {
  color: rgba(80,20,140,.42) !important; font-weight: 600 !important;
}
body.theme-light[data-theme="premium"] .recipient-toggle button.active { color: #2d0060 !important; }
body.theme-light[data-theme="premium"] .segment-pill {
  background: linear-gradient(180deg, #d090ff 0%, #9b4fe8 60%, #7e30c8 100%) !important;
  box-shadow:
    0 4px 12px rgba(160,90,255,.40),
    0 1px 3px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.35) !important;
  border-radius: 10px !important;
}

/* ── 8. Блок «Себе» ── */
body.theme-light[data-theme="premium"] .recipient-display {
  background: linear-gradient(145deg, #fdf6ff, #f8eaff) !important;
  border: 1px solid rgba(160,90,255,.26) !important;
  box-shadow: 0 6px 18px rgba(160,90,255,.10), inset 0 1px 0 rgba(255,255,255,.85) !important;
  border-radius: 16px !important;
}
body.theme-light[data-theme="premium"] .recipient-display .label {
  color: rgba(100,20,180,.55) !important; letter-spacing: .06em !important;
}
body.theme-light[data-theme="premium"] #self-username {
  color: #8a3fe0 !important; font-weight: 700 !important;
  text-shadow: 0 0 10px rgba(160,90,255,.20) !important;
}

/* ── 9. Поле «Другому» — карточка как «Себе» ── */
body.theme-light[data-theme="premium"] #recipient-other-input {
  background: linear-gradient(145deg, #fdf6ff, #f8eaff) !important;
  border: 1px solid rgba(160,90,255,.26) !important;
  box-shadow: 0 6px 18px rgba(160,90,255,.10), inset 0 1px 0 rgba(255,255,255,.85) !important;
  border-radius: 16px !important;
  padding: 10px 14px 10px 16px !important;
  margin-top: 12px !important;
}
body.theme-light[data-theme="premium"] #recipient-other-input::before {
  content: attr(data-label) !important;
  display: block !important;
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .06em !important;
  color: rgba(100,20,180,.55) !important;
  margin-bottom: 6px !important; text-transform: uppercase !important;
}
body.theme-light[data-theme="premium"] #recipient-other-input input {
  background: transparent !important; border: none !important;
  box-shadow: none !important; padding: 0 32px 0 0 !important;
  font-size: 16px !important; font-weight: 700 !important;
  color: #8a3fe0 !important; -webkit-text-fill-color: #8a3fe0 !important;
  border-radius: 0 !important; height: auto !important;
  outline: none !important; width: 100% !important;
}
body.theme-light[data-theme="premium"] #recipient-other-input input::placeholder {
  color: rgba(140,40,220,.38) !important;
  font-weight: 400 !important; font-size: 15px !important;
}
body.theme-light[data-theme="premium"] #recipient-other-input input:focus {
  border: none !important; box-shadow: none !important; background: transparent !important;
}
body.theme-light[data-theme="premium"] #recipient-other-input:focus-within {
  border-color: rgba(160,90,255,.58) !important;
  box-shadow:
    0 8px 24px rgba(160,90,255,.14),
    0 0 0 3px rgba(160,90,255,.12),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
}
body.theme-light[data-theme="premium"] #recipient-other-input .username-check-icon {
  top: 50% !important; transform: translateY(20%) !important; color: #8a3fe0 !important;
}

/* ── 10. Кнопка «К ОПЛАТЕ» ── */
body.theme-light[data-theme="premium"] .recipient-pay-btn,
body.theme-light[data-theme="premium"] .payment-pay-btn {
  background: linear-gradient(180deg, #d090ff 0%, #a855f7 50%, #7e22ce 100%) !important;
  box-shadow:
    0 6px 20px rgba(160,90,255,.45),
    0 2px 6px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
  color: #ffffff !important; border-radius: 16px !important;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
}
body.theme-light[data-theme="premium"] .recipient-pay-btn:hover,
body.theme-light[data-theme="premium"] .payment-pay-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 28px rgba(160,90,255,.52), inset 0 1px 0 rgba(255,255,255,.32) !important;
}
body.theme-light[data-theme="premium"] .recipient-pay-btn:active,
body.theme-light[data-theme="premium"] .payment-pay-btn:active {
  transform: scale(.983) !important; filter: brightness(.93) !important;
}
body.theme-light[data-theme="premium"] .recipient-pay-btn:disabled,
body.theme-light[data-theme="premium"] .payment-pay-btn:disabled {
  background: linear-gradient(180deg, rgba(200,140,255,.40), rgba(140,80,220,.35)) !important;
  box-shadow: none !important; color: rgba(80,0,150,.30) !important;
  transform: none !important; filter: none !important;
}

/* ─── END PREMIUM LIGHT REDESIGN v299 ─── */

/* ══════════════════════════════════════════════════════════════════
   ── GIFTS LIGHT THEME — FULL PREMIUM REDESIGN v303
   ══════════════════════════════════════════════════════════════════ */

/* ── Gift Rain — контейнер и частицы ── */
.hero-banner .gift-rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.hero-banner .gift-rain span {
  position: absolute;
  top: -20px;
  display: block;
  animation: giftRainFall var(--dur, 3.8s) ease-in infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0;
  transform-origin: center center;
  will-change: transform, opacity;
}
@keyframes giftRainFall {
  0%   { transform: translateY(-20px) rotate(calc(var(--rot, 0deg) * -1)); opacity: 0; }
  8%   { opacity: .75; }
  88%  { opacity: .55; }
  100% { transform: translateY(130px) rotate(var(--rot, 0deg)); opacity: 0; }
}

/* ── 1. Страница — мягкий изумрудный фон ── */
body.theme-light[data-theme="gifts"] #app-root,
body.theme-light[data-theme="gifts"] .app-wrapper,
body.theme-light[data-theme="gifts"] #screen-gifts {
  background:
    radial-gradient(ellipse 70% 40% at 50% -5%, rgba(40,164,106,.20) 0%, transparent 70%),
    radial-gradient(ellipse 50% 30% at 80% 90%, rgba(20,140,80,.12) 0%, transparent 60%),
    linear-gradient(180deg, #f0fff7 0%, #e8fdf1 50%, #dff8ea 100%) !important;
}

/* ── 2. Баннер — изумрудное стекло с частицами ── */
body.theme-light[data-theme="gifts"] .hero-banner.hero-v1.hero-gifts,
body.theme-light[data-theme="gifts"] #screen-gifts .hero-banner {
  background:
    radial-gradient(ellipse 55% 80% at 18% 50%, rgba(40,180,110,.24) 0%, transparent 60%),
    radial-gradient(ellipse 45% 70% at 82% 45%, rgba(20,200,100,.16) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(30,160,90,.10) 0%, transparent 70%),
    linear-gradient(155deg, #f2fff8 0%, #e6fdf0 45%, #d8f8e6 100%) !important;
  border: 1px solid rgba(40,164,106,.28) !important;
  box-shadow:
    0 12px 36px rgba(40,164,106,.14),
    0 2px 8px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 0 -1px 0 rgba(40,164,106,.10) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* ::before/::after на баннере Gifts — скрыты, дождь делает JS */
body.theme-light[data-theme="gifts"] .hero-banner.hero-v1.hero-gifts::before,
body.theme-light[data-theme="gifts"] .hero-banner.hero-v1.hero-gifts::after {
  display: none !important;
}

/* Маскот — без анимации, статичное положение */
body.theme-light[data-theme="gifts"] .hero-banner.hero-v1.hero-gifts .hero-mascot,
body.theme-light[data-theme="gifts"] #screen-gifts .hero-banner .hero-mascot {
  animation: none !important;
  filter: none !important;
  transform: translateX(20px) translateY(1px) !important;
}

/* Заголовок баннера — зелёный градиент текст */
body.theme-light[data-theme="gifts"] #screen-gifts .pixel-title {
  background: linear-gradient(135deg, #0d5c30 0%, #1a8a50 45%, #28b870 80%, #1a7040 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter: none !important;
  text-shadow: none !important;
}
body.theme-light[data-theme="gifts"] #screen-gifts .pixel-title .shimmer-text-emerald {
  background: linear-gradient(90deg, #0d5c30 0%, #0d5c30 20%, #1a8a50 40%, #2ebd7a 55%, #1a8a50 70%, #0d5c30 90%, #0d5c30 100%) !important;
  background-size: 250% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter: none !important;
  animation: lightShimmerGreen 8s ease-in-out infinite !important;
}

/* Подзаголовок */
body.theme-light[data-theme="gifts"] #screen-gifts .hero-subtitle {
  color: rgba(8,50,28,.62) !important;
  opacity: 1 !important;
}

/* ── 3. Карточки товаров ── */
/* ── Карточки Gifts — светлый аналог тёмной темы ── */
body.theme-light[data-theme="gifts"] .product-card {
  background:
    radial-gradient(ellipse 65% 55% at 50% 30%, rgba(40,210,130,.13) 0%, rgba(40,210,130,.03) 55%, transparent 75%),
    linear-gradient(180deg, rgba(240,255,248,.98) 0%, rgba(220,252,238,.96) 60%, rgba(200,245,224,.94) 100%) !important;
  border: 1px solid rgba(40,164,106,.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(40,164,106,.08),
    0 4px 16px rgba(20,120,70,.10),
    0 8px 28px rgba(20,120,70,.08) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 120ms cubic-bezier(.25,.46,.45,.94), border-color 120ms ease, box-shadow 120ms ease !important;
  animation: lightCardBreathGreen 4s ease-in-out infinite !important;
}
body.theme-light[data-theme="gifts"] .product-card:nth-child(2) { animation-delay: .7s !important; }
body.theme-light[data-theme="gifts"] .product-card:nth-child(3) { animation-delay: 1.4s !important; }
body.theme-light[data-theme="gifts"] .product-card:nth-child(4) { animation-delay: 2.1s !important; }
body.theme-light[data-theme="gifts"] .product-card:nth-child(5) { animation-delay: 2.8s !important; }
body.theme-light[data-theme="gifts"] .product-card:nth-child(6) { animation-delay: 3.5s !important; }

/* Верхний micro-glow — светлый изумруд сверху (как в тёмной) */
body.theme-light[data-theme="gifts"] .product-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(40,210,130,.18) 0%, transparent 65%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  width: auto !important; height: auto !important;
  top: 0 !important; bottom: 0 !important; left: 0 !important;
  opacity: 1 !important;
}
body.theme-light[data-theme="gifts"] .product-card > * { position: relative; z-index: 1; }

/* Hover */
body.theme-light[data-theme="gifts"] .product-card:hover {
  transform: translateY(-2px) scale(1.02) !important;
  border-color: rgba(40,164,106,.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(40,164,106,.12),
    0 6px 24px rgba(20,120,70,.18),
    0 12px 36px rgba(20,120,70,.12),
    0 0 0 1px rgba(40,164,106,.10) !important;
}
/* Active */
body.theme-light[data-theme="gifts"] .product-card:active {
  transform: scale(.97) translateY(0) !important;
  border-color: rgba(40,164,106,.40) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 2px 10px rgba(40,164,106,.18),
    0 0 0 1px rgba(40,164,106,.14) !important;
  transition: transform 80ms cubic-bezier(.25,.46,.45,.94), border-color 80ms ease, box-shadow 80ms ease !important;
}

/* Выбранная карточка */
body.theme-light[data-theme="gifts"] .product-card.selected {
  background:
    radial-gradient(ellipse 65% 55% at 50% 30%, rgba(40,210,130,.20) 0%, rgba(40,210,130,.06) 55%, transparent 75%),
    linear-gradient(180deg, rgba(220,255,240,.99) 0%, rgba(195,250,225,.97) 60%, rgba(170,240,208,.95) 100%) !important;
  border: 1.5px solid rgba(40,164,106,.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 0 0 1px rgba(40,164,106,.18),
    0 4px 24px rgba(20,150,80,.18) !important;
  animation: lightCardBreathGreen 3.5s ease-in-out infinite !important;
}
body.theme-light[data-theme="gifts"] .product-card.selected::after {
  content: '' !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: inherit !important;
  box-shadow: 0 0 18px rgba(40,200,120,.18), 0 0 36px rgba(40,200,120,.08) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* gift-top / gift-low */
body.theme-light[data-theme="gifts"] .product-card.gift-top {
  border-color: rgba(40,164,106,.40) !important;
}
body.theme-light[data-theme="gifts"] .product-card.gift-top .p-title {
  color: #0a3318 !important; font-weight: 800 !important;
}
body.theme-light[data-theme="gifts"] .product-card.gift-low {
  border-color: rgba(40,164,106,.14) !important;
  opacity: .88 !important;
}

/* Тексты */
body.theme-light[data-theme="gifts"] .product-card .p-title {
  color: #0d4020 !important; font-weight: 700 !important; font-size: 14px !important;
  text-shadow: none !important; background: none !important; -webkit-text-fill-color: unset !important;
}
body.theme-light[data-theme="gifts"] .product-card .p-price {
  color: #1a8a50 !important; font-size: 17px !important; font-weight: 800 !important;
  text-shadow: 0 0 8px rgba(40,164,106,.30), 0 0 18px rgba(20,150,80,.14) !important;
  filter: none !important; background: none !important; -webkit-text-fill-color: unset !important;
}

/* Emoji — glow + scale при hover/active как в тёмной */
body.theme-light[data-theme="gifts"] .product-card .p-emoji {
  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,.15))
    drop-shadow(0 0 8px rgba(40,164,106,.35)) !important;
  transition: transform 120ms cubic-bezier(.25,.46,.45,.94), filter 120ms ease !important;
  display: block !important;
}
body.theme-light[data-theme="gifts"] .product-card:hover .p-emoji {
  filter:
    drop-shadow(0 3px 6px rgba(0,0,0,.18))
    drop-shadow(0 0 14px rgba(40,164,106,.55)) !important;
  transform: scale(1.08) !important;
}
body.theme-light[data-theme="gifts"] .product-card:active .p-emoji {
  filter:
    drop-shadow(0 1px 3px rgba(0,0,0,.20))
    drop-shadow(0 0 18px rgba(40,164,106,.70)) !important;
  transform: scale(.95) !important;
}

/* ── 4. Лейблы секций ── */
body.theme-light[data-theme="gifts"] .section-title {
  color: rgba(10,55,28,.55) !important;
  border-bottom-color: rgba(40,164,106,.14) !important;
  font-weight: 700 !important;
}
body.theme-light[data-theme="gifts"] .section-title::before {
  background: linear-gradient(180deg, #2ebd7a, #1a6640) !important;
}

/* ── 5. Суб-экраны — фон НЕ переопределяем (берётся с body как у Stars/Steam/Premium) */
body.theme-light[data-theme="gifts"] #screen-gifts-packs,
body.theme-light[data-theme="gifts"] #screen-gifts-custom,
body.theme-light[data-theme="gifts"] #screen-recipient,
body.theme-light[data-theme="gifts"] #screen-payment {
  background: transparent !important;
}
body.theme-light[data-theme="gifts"] #screen-gifts-packs::before,
body.theme-light[data-theme="gifts"] #screen-gifts-custom::before,
body.theme-light[data-theme="gifts"] #screen-recipient::before {
  content: "✦  ○  ✦  ○  ✦  ○  ✦  ○  ✦  ○  ✦  ○" !important;
  position: fixed !important;
  top: -10px !important; left: -10px !important; right: -10px !important;
  font-size: 10px !important;
  color: rgba(30,150,90,.25) !important;
  letter-spacing: 20px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: starsFall3 9s linear infinite !important;
  white-space: nowrap !important; overflow: hidden !important;
}

/* ── 6. Заголовки экранов ── */
body.theme-light[data-theme="gifts"] #screen-recipient .header h1,
body.theme-light[data-theme="gifts"] #screen-payment .header h1,
body.theme-light[data-theme="gifts"] #screen-gifts-packs .header h1,
body.theme-light[data-theme="gifts"] #screen-gifts-custom .header h1 {
  background: linear-gradient(135deg, #0b4824, #1a8a50, #28b870) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter: none !important; text-shadow: none !important;
}

/* ── 7. Summary карточка ── */
body.theme-light[data-theme="gifts"] #selected-product-info.summary-card,
body.theme-light[data-theme="gifts"] .summary-card {
  background: linear-gradient(145deg, #f4fff9 0%, #eafdf3 60%, #dff8ea 100%) !important;
  border: 1px solid rgba(40,164,106,.30) !important;
  box-shadow:
    0 10px 30px rgba(40,164,106,.13),
    0 2px 8px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.90),
    inset 0 -1px 0 rgba(40,164,106,.10) !important;
  border-radius: 18px !important;
}
body.theme-light[data-theme="gifts"] .summary-row {
  border-bottom-color: rgba(40,164,106,.14) !important;
}
body.theme-light[data-theme="gifts"] .summary-row .label {
  color: rgba(10,70,35,.52) !important; font-weight: 500 !important;
}
body.theme-light[data-theme="gifts"] .summary-row .value {
  color: #0d5c30 !important; font-weight: 700 !important;
}
body.theme-light[data-theme="gifts"] .summary-row.summary-total .label {
  color: rgba(10,70,35,.65) !important; font-weight: 700 !important;
}
body.theme-light[data-theme="gifts"] .summary-row.summary-total .value,
body.theme-light[data-theme="gifts"] #selected-product-info .summary-row.summary-total .value {
  color: #1a8a50 !important;
  font-size: 20px !important; font-weight: 800 !important;
  text-shadow: 0 0 14px rgba(40,164,106,.28) !important;
  filter: none !important;
}

/* ── 8. Переключатель Себе/Другому ── */
body.theme-light[data-theme="gifts"] .recipient-toggle {
  background: linear-gradient(135deg, #f0fff8 0%, #e4fdf0 100%) !important;
  border: 1px solid rgba(40,164,106,.28) !important;
  box-shadow: 0 4px 14px rgba(40,164,106,.10), inset 0 1px 0 rgba(255,255,255,.80) !important;
}
body.theme-light[data-theme="gifts"] .recipient-toggle button {
  color: rgba(10,55,28,.42) !important; font-weight: 600 !important;
}
body.theme-light[data-theme="gifts"] .recipient-toggle button.active { color: #0b3a1c !important; }
body.theme-light[data-theme="gifts"] .segment-pill {
  background: linear-gradient(180deg, #5ed49a 0%, #28a46a 60%, #1a7045 100%) !important;
  box-shadow:
    0 4px 12px rgba(40,164,106,.40),
    0 1px 3px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.35) !important;
  border-radius: 10px !important;
}

/* ── 9. Блок «Себе» ── */
body.theme-light[data-theme="gifts"] .recipient-display {
  background: linear-gradient(145deg, #f4fff9, #eafdf3) !important;
  border: 1px solid rgba(40,164,106,.26) !important;
  box-shadow: 0 6px 18px rgba(40,164,106,.10), inset 0 1px 0 rgba(255,255,255,.85) !important;
  border-radius: 16px !important;
}
body.theme-light[data-theme="gifts"] .recipient-display .label {
  color: rgba(10,70,35,.55) !important; letter-spacing: .06em !important;
}
body.theme-light[data-theme="gifts"] #self-username {
  color: #1a8a50 !important; font-weight: 700 !important;
  text-shadow: 0 0 10px rgba(40,164,106,.20) !important;
}

/* ── 10. Поле «Другому» — карточка как «Себе» ── */
body.theme-light[data-theme="gifts"] #recipient-other-input {
  background: linear-gradient(145deg, #f4fff9, #eafdf3) !important;
  border: 1px solid rgba(40,164,106,.26) !important;
  box-shadow: 0 6px 18px rgba(40,164,106,.10), inset 0 1px 0 rgba(255,255,255,.85) !important;
  border-radius: 16px !important;
  padding: 10px 14px 10px 16px !important;
  margin-top: 12px !important;
}
body.theme-light[data-theme="gifts"] #recipient-other-input::before {
  content: attr(data-label) !important;
  display: block !important;
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .06em !important;
  color: rgba(10,70,35,.55) !important;
  margin-bottom: 6px !important; text-transform: uppercase !important;
}
body.theme-light[data-theme="gifts"] #recipient-other-input input {
  background: transparent !important; border: none !important;
  box-shadow: none !important; padding: 0 32px 0 0 !important;
  font-size: 16px !important; font-weight: 700 !important;
  color: #1a8a50 !important; -webkit-text-fill-color: #1a8a50 !important;
  border-radius: 0 !important; height: auto !important;
  outline: none !important; width: 100% !important;
}
body.theme-light[data-theme="gifts"] #recipient-other-input input::placeholder {
  color: rgba(20,140,70,.38) !important;
  font-weight: 400 !important; font-size: 15px !important;
}
body.theme-light[data-theme="gifts"] #recipient-other-input input:focus {
  border: none !important; box-shadow: none !important; background: transparent !important;
}
body.theme-light[data-theme="gifts"] #recipient-other-input:focus-within {
  border-color: rgba(40,164,106,.58) !important;
  box-shadow:
    0 8px 24px rgba(40,164,106,.14),
    0 0 0 3px rgba(40,164,106,.12),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
}
body.theme-light[data-theme="gifts"] #recipient-other-input .username-check-icon {
  top: 50% !important; transform: translateY(20%) !important; color: #1a8a50 !important;
}

/* ── 11. Pay methods ── */
body.theme-light[data-theme="gifts"] .pay-method {
  background: linear-gradient(145deg, #f4fff9 0%, #eafdf3 100%) !important;
  border: 1px solid rgba(40,164,106,.18) !important;
  box-shadow: 0 2px 8px rgba(20,120,70,.06), inset 0 1px 0 rgba(255,255,255,.90) !important;
  border-radius: 14px !important;
}
body.theme-light[data-theme="gifts"] .pay-method.selected {
  border: 1px solid rgba(40,164,106,.55) !important;
  box-shadow:
    0 8px 24px rgba(40,164,106,.20),
    0 0 0 3px rgba(40,164,106,.09),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
  animation: lightCardBreathGreen 3.5s ease-in-out infinite !important;
}
body.theme-light[data-theme="gifts"] .pm-name { color: #0b4826 !important; font-weight: 600 !important; }
body.theme-light[data-theme="gifts"] .pay-method.selected .pm-name { color: #1a8a50 !important; font-weight: 700 !important; }
body.theme-light[data-theme="gifts"] .pm-check { color: #1a8a50 !important; filter: drop-shadow(0 0 5px rgba(40,164,106,.55)) !important; font-size: 16px !important; font-weight: 800 !important; }

/* ── 12. Кнопка «К ОПЛАТЕ» / «ОПЛАТИТЬ» ── */
body.theme-light[data-theme="gifts"] .recipient-pay-btn,
body.theme-light[data-theme="gifts"] .payment-pay-btn {
  background: linear-gradient(180deg, #5ed49a 0%, #28a46a 50%, #1a8052 100%) !important;
  box-shadow:
    0 6px 20px rgba(40,164,106,.45),
    0 2px 6px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
  color: #ffffff !important; border-radius: 16px !important;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
}
body.theme-light[data-theme="gifts"] .recipient-pay-btn:hover,
body.theme-light[data-theme="gifts"] .payment-pay-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 28px rgba(40,164,106,.52), inset 0 1px 0 rgba(255,255,255,.32) !important;
}
body.theme-light[data-theme="gifts"] .recipient-pay-btn:active,
body.theme-light[data-theme="gifts"] .payment-pay-btn:active {
  transform: scale(.983) !important; filter: brightness(.93) !important;
}
body.theme-light[data-theme="gifts"] .recipient-pay-btn:disabled,
body.theme-light[data-theme="gifts"] .payment-pay-btn:disabled {
  background: linear-gradient(180deg, rgba(94,212,154,.40), rgba(26,128,82,.35)) !important;
  box-shadow: none !important; color: rgba(0,60,25,.30) !important;
  transform: none !important; filter: none !important;
}

/* ─── END GIFTS LIGHT REDESIGN v303 ─── */

/* ══════════════════════════════════════════════════════════════════
   ── LIGHT THEME — CTA wrap фон совпадает с фоном экрана
   ══════════════════════════════════════════════════════════════════ */

/* ── html/body фон совпадает с нижним цветом экрана категории ──
   Это гарантирует что fixed CTA wrapper и safe area снизу
   не показывают чужой белый фон                              ── */

body.theme-light[data-theme="stars"] {
  background:
    radial-gradient(ellipse 70% 40% at 50% -5%, rgba(255,210,80,.22) 0%, transparent 65%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(255,230,130,.10) 0%, transparent 70%),
    linear-gradient(180deg, #fffdf5 0%, #fffaec 50%, #fff6dc 100%) !important;
}
body.theme-light[data-theme="steam"] {
  background:
    radial-gradient(ellipse 70% 40% at 50% -5%, rgba(26,111,255,.18) 0%, transparent 65%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(20,80,220,.08) 0%, transparent 70%),
    linear-gradient(180deg, #f0f7ff 0%, #e6f0ff 50%, #d8e8ff 100%) !important;
}
body.theme-light[data-theme="premium"] {
  background:
    radial-gradient(ellipse 70% 40% at 50% -5%, rgba(160,90,255,.22) 0%, transparent 65%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(140,70,255,.08) 0%, transparent 70%),
    linear-gradient(180deg, #f8f2ff 0%, #f2e8ff 50%, #ece0ff 100%) !important;
}
body.theme-light[data-theme="gifts"] {
  background:
    radial-gradient(ellipse 70% 40% at 50% -5%, rgba(40,164,106,.20) 0%, transparent 65%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(20,140,80,.10) 0%, transparent 70%),
    linear-gradient(180deg, #f0fff7 0%, #e8fdf1 50%, #dff8ea 100%) !important;
}

/* CTA wrapper — fade от цвета экрана вверх к прозрачному */
body.theme-light[data-theme="stars"] #recipient-cta-wrap,
body.theme-light[data-theme="stars"] #payment-cta-wrap {
  background: linear-gradient(to top, #fff6dc 0%, #fff6dc 55%, rgba(255,246,220,0) 100%) !important;
}
body.theme-light[data-theme="steam"] #recipient-cta-wrap,
body.theme-light[data-theme="steam"] #payment-cta-wrap {
  background: linear-gradient(to top, #d8e8ff 0%, #d8e8ff 55%, rgba(216,232,255,0) 100%) !important;
}
body.theme-light[data-theme="premium"] #recipient-cta-wrap,
body.theme-light[data-theme="premium"] #payment-cta-wrap {
  background: linear-gradient(to top, #ece0ff 0%, #ece0ff 55%, rgba(236,224,255,0) 100%) !important;
}
body.theme-light[data-theme="gifts"] #recipient-cta-wrap,
body.theme-light[data-theme="gifts"] #payment-cta-wrap {
  background: linear-gradient(to top, #dff8ea 0%, #dff8ea 55%, rgba(223,248,234,0) 100%) !important;
}

/* ── Light theme — ticket-hint readable text ── */
body.theme-light .ticket-hint {
  background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(61,180,255,.06)) !important;
  border-color: rgba(37,99,235,.20) !important;
  color: rgba(15,30,60,.72) !important;
  box-shadow: inset 0 1px 0 rgba(37,99,235,.08) !important;
}
body.theme-light .ticket-extra-label {
  color: rgba(20,30,60,.60) !important;
}
body.theme-light .ticket-extra-input {
  background: #ffffff !important;
  border-color: rgba(37,99,235,.20) !important;
  color: #1a1a2e !important;
}
body.theme-light .ticket-extra-input:focus {
  border-color: rgba(37,99,235,.50) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.10) !important;
}
body.theme-light .tec-card {
  background: rgba(255,255,255,.85) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
body.theme-light .tec-field-label { color: rgba(20,30,60,.45) !important; }
body.theme-light .tec-field-input {
  background: #fff !important;
  border-color: rgba(0,0,0,.10) !important;
  color: #1a1a2e !important;
}
body.theme-light .tec-field-input::placeholder { color: rgba(0,0,0,.28) !important; }

/* ── Ticket chat meta-card (tcm-card) — light theme ── */
body.theme-light .tcm-card {
  background: #ffffff !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04) !important;
}
body.theme-light .tcm-header {
  background: var(--tcm-header-bg, rgba(61,235,255,.10)) !important;
  border-bottom-color: var(--tcm-border, rgba(0,0,0,.08)) !important;
  opacity: 1;
}
body.theme-light .tcm-cat-title {
  /* keep category colour — already readable on light bg */
}
body.theme-light .tcm-row-label {
  color: var(--tcm-color, #2563eb) !important;
  opacity: .65 !important;
}
body.theme-light .tcm-row-value {
  color: #1a1a2e !important;
}
body.theme-light .tcm-time {
  color: rgba(0,0,0,.32) !important;
}

/* ── Кнопка «Прикрепить медиа» в форме нового тикета ── */
.media-attach-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(61,235,255,.05);
  border: 1.5px dashed rgba(61,235,255,.22);
  border-radius: var(--radius-md);
  color: rgba(61,235,255,.65);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
  line-height: 1.4;
}
.media-attach-btn:hover {
  background: rgba(61,235,255,.10);
  border-color: rgba(61,235,255,.45);
  color: #3DEBFF;
  box-shadow: 0 0 16px rgba(61,235,255,.10);
}
.media-attach-btn:active {
  opacity: .82;
  transform: scale(.98);
}
body.theme-light .media-attach-btn {
  background: rgba(37,99,235,.05);
  border-color: rgba(37,99,235,.25);
  color: rgba(37,99,235,.72);
}
body.theme-light .media-attach-btn:hover {
  background: rgba(37,99,235,.11);
  border-color: rgba(37,99,235,.48);
  color: #1a4fc4;
  box-shadow: 0 0 14px rgba(37,99,235,.12);
}

/* ── Withdrawal overlay modal ── */
.withdraw-modal {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 24px 20px 20px;
  width: min(380px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 24px 64px rgba(0,0,0,.55);
  animation: alertIn .22s cubic-bezier(.34,1.56,.64,1);
  flex-shrink: 0;
}
.withdraw-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.withdraw-close-btn {
  margin-left: auto;
  background: rgba(239,68,68,.15);
  border: 1px solid rgba(239,68,68,.30);
  border-radius: 8px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #f87171;
  cursor: pointer; flex-shrink: 0;
  transition: background .15s, color .15s;
}
.withdraw-close-btn:hover { background: rgba(239,68,68,.28); color: #fca5a5; }
body.theme-light .withdraw-close-btn {
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.25);
  color: #dc2626;
}
body.theme-light .withdraw-close-btn:hover { background: rgba(239,68,68,.20); }
.withdraw-modal-icon { font-size: 22px; line-height: 1; }
.withdraw-modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}
.withdraw-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
  margin-top: 14px;
}
.withdraw-field-label:first-of-type { margin-top: 0; }
.withdraw-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: .6;
  font-size: 11px;
}
.withdraw-field-input,
.withdraw-field-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  background: #2a2a3e;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  color: rgba(255,255,255,.9);
  font-size: 15px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.withdraw-field-input { height: 44px; }
.withdraw-field-textarea { resize: none; line-height: 1.5; }
.withdraw-field-input:focus,
.withdraw-field-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Kill autofill background — match exact input bg */
.withdraw-field-input:-webkit-autofill,
.withdraw-field-input:-webkit-autofill:hover,
.withdraw-field-input:-webkit-autofill:focus,
.withdraw-field-input:-webkit-autofill:active,
.withdraw-field-textarea:-webkit-autofill,
.withdraw-field-textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #2a2a3e inset !important;
  box-shadow: 0 0 0 1000px #2a2a3e inset !important;
  -webkit-text-fill-color: rgba(255,255,255,.9) !important;
  caret-color: rgba(255,255,255,.9);
  border-color: rgba(255,255,255,.10) !important;
  transition: background-color 9999s ease-in-out 0s;
}
/* ── Withdrawal method tabs ── */
.withdraw-method-tabs {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
.withdraw-method-tab {
  flex: 1;
  padding: 9px 4px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  font-family: inherit;
}
.withdraw-method-tab:hover {
  background: rgba(255,255,255,.10);
  color: var(--text-primary);
}
.withdraw-method-tab.active {
  background: rgba(61,235,255,.12);
  border-color: rgba(61,235,255,.40);
  color: #3DEBFF;
}
#withdraw-method-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  margin-top: 10px;
}
/* ── /Withdrawal method tabs ── */
.withdraw-submit-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #10b981, #22c55e);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 22px;
  margin-bottom: 4px;
  transition: opacity .15s, transform .15s, box-shadow .15s;
  box-shadow: 0 4px 18px rgba(34,197,94,.35);
  font-family: inherit;
}
.withdraw-submit-btn:hover { opacity: .9; box-shadow: 0 6px 22px rgba(34,197,94,.45); }
.withdraw-submit-btn:active { transform: scale(.97); }
.withdraw-submit-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ── Withdrawal modal — light theme overrides ── */
body.theme-light .withdraw-modal {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 8px 40px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.06);
}
body.theme-light .withdraw-modal-title {
  color: #1f2430;
}
body.theme-light .withdraw-field-label {
  color: #6b7280;
}
body.theme-light .withdraw-optional {
  color: #9ca3af;
}
body.theme-light .withdraw-field-input,
body.theme-light .withdraw-field-textarea {
  background: #f4f6fb;
  border: 1px solid rgba(0,0,0,.09);
  color: #1f2430;
}
body.theme-light .withdraw-field-input::placeholder,
body.theme-light .withdraw-field-textarea::placeholder {
  color: #b0b8c8;
}
body.theme-light .withdraw-field-input:focus,
body.theme-light .withdraw-field-textarea:focus {
  border-color: rgba(37,99,235,.35);
  box-shadow: 0 0 0 3px rgba(37,99,235,.08);
  background: #ffffff;
}
body.theme-light .withdraw-method-tab {
  background: #f4f6fb;
  border: 1px solid rgba(0,0,0,.09);
  color: #6b7280;
}
body.theme-light .withdraw-method-tab:hover {
  background: #edf0f7;
  color: #1f2430;
}
body.theme-light .withdraw-method-tab.active {
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.28);
  color: #2563eb;
}
body.theme-light .withdraw-submit-btn {
  background: linear-gradient(135deg, #10b981, #22c55e);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 18px rgba(34,197,94,.30);
}
body.theme-light .withdraw-submit-btn:hover { opacity: .9; }
body.theme-light .withdraw-submit-btn:disabled {
  background: #c5cad4;
  color: #f0f2f5;
  box-shadow: none;
}
/* Pending withdrawal block on referral page */
.referral-pending-block {
  margin: -4px 0 12px;
  padding: 10px 14px;
  background: rgba(251,191,36,.08);
  border: 1px solid rgba(251,191,36,.2);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(251,191,36,.9);
  text-align: center;
}

/* ── v352: fix #screen-stars scroll + desktop expand/shrink glitch ──
   1. overflow:hidden — экран Stars содержит только баннер + 2 кнопки,
      прокрутки там быть не должно.
   2. contain:paint на баннере — изолирует compositing layer shimmer-анимации,
      убирает "расширяется-сужается" при первом рендере на десктопе.
   3. will-change:transform на кнопках выбора — переводит starsChoiceBorderGlow
      в GPU-слой, предотвращая layout reflow.
─────────────────────────────────────────────────────────────────── */
#screen-stars.active {
  overflow: hidden !important;
}
#screen-stars .hero-banner.hero-v1 {
  contain: paint;
}
#screen-stars .stars-choice-btn {
  will-change: transform;
}

/* ══════════════════════════════════════════════════════
   TAB BAR — нижняя навигация (Магазин / Заказы / Профиль)
══════════════════════════════════════════════════════ */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: none;
  flex-direction: row;
  align-items: flex-start;
  padding-top: 8px;
  padding-bottom: calc(var(--safe-bottom, 0px) + 6px);
  height: calc(62px + var(--safe-bottom, 0px));
  background: rgba(5, 12, 24, 0.88);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-top: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 -1px 0 rgba(255,255,255,.04), 0 -8px 32px rgba(0,0,0,.35);
  /* Появление / исчезновение */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s cubic-bezier(.25,.46,.45,.94),
              transform .22s cubic-bezier(.25,.46,.45,.94);
  pointer-events: none;
}
.tab-bar.tab-bar--visible {
  display: flex;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Кнопка таба ── */
.tab-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 0 4px;
  border: none;
  background: none;
  cursor: pointer;
  color: rgba(255,255,255,.32);
  -webkit-tap-highlight-color: transparent;
  outline: none;
  position: relative;
  /* Плавный цвет */
  transition: color .2s ease;
}

/* Пилюля-фон под иконкой */
.tab-bar-item::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 48px;
  height: 30px;
  border-radius: 15px;
  background: rgba(61,235,255,.12);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1),
              opacity .2s ease;
  opacity: 0;
}
.tab-bar-item.active::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}

/* Активный цвет */
.tab-bar-item.active {
  color: var(--accent);
}

/* ── Иконка ── */
.tab-bar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  /* Анимация прыжка при активации */
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.tab-bar-item.active .tab-bar-icon {
  transform: translateY(-2px);
}
.tab-bar-item:active .tab-bar-icon {
  transform: scale(.86);
}
.tab-bar-icon svg {
  width: 22px;
  height: 22px;
  display: block;
  transition: filter .2s ease;
}
.tab-bar-item.active .tab-bar-icon svg {
  filter: drop-shadow(0 0 6px rgba(61,235,255,.6));
}

/* ── Подпись ── */
.tab-bar-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  /* Анимация появления текста */
  transition: opacity .2s ease, transform .2s ease, font-size .2s ease;
}
.tab-bar-item:not(.active) .tab-bar-label {
  opacity: 0.55;
}
.tab-bar-item.active .tab-bar-label {
  opacity: 1;
  font-size: 10.5px;
}

/* ── Точка-индикатор сверху (тонкий акцент) ── */
.tab-bar-item.active .tab-bar-icon::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) scaleX(1);
  width: 20px;
  height: 2.5px;
  border-radius: 0 0 3px 3px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(61,235,255,.7), 0 0 20px rgba(61,235,255,.3);
  animation: tabIndicatorIn .28s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes tabIndicatorIn {
  from { transform: translateX(-50%) scaleX(0); opacity: 0; }
  to   { transform: translateX(-50%) scaleX(1); opacity: 1; }
}

/* ── Экраны с Tab Bar — отступ снизу ── */
.screen--has-tabbar.active {
  padding-bottom: calc(var(--safe-bottom, 0px) + 62px + 16px) !important;
}

/* ── Светлая тема — полный override ── */
body.theme-light .tab-bar {
  background: rgba(255,255,255,.96);
  border-top: 1px solid rgba(37,99,235,.10);
  box-shadow:
    0 -1px 0 rgba(0,0,0,.05),
    0 -6px 24px rgba(37,99,235,.07);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
}
/* Неактивные — сдержанный серо-синий */
body.theme-light .tab-bar-item {
  color: rgba(30,42,80,.35);
}
body.theme-light .tab-bar-item:not(.active) .tab-bar-label {
  opacity: 0.6;
}
/* Активный — насыщенный синий */
body.theme-light .tab-bar-item.active {
  color: #2563eb;
}
/* Пилюля-фон под активной иконкой — голубая */
body.theme-light .tab-bar-item::after {
  background: rgba(37,99,235,.10);
}
/* Иконка активного таба — синее свечение вместо cyan */
body.theme-light .tab-bar-item.active .tab-bar-icon svg {
  filter: drop-shadow(0 0 5px rgba(37,99,235,.45));
}
/* Полоска-индикатор сверху — синяя без cyan-glow */
body.theme-light .tab-bar-item.active .tab-bar-icon::before {
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
  box-shadow:
    0 0 8px  rgba(37,99,235,.50),
    0 0 18px rgba(37,99,235,.20);
}


/* ═══════════════════════════════════════════════════
   REFERRAL PAGE REDESIGN — Premium & Stylish
   ═══════════════════════════════════════════════════ */

/* Hero banner */
.ref-hero {
  position: relative;
  margin: 8px 16px 0;
  border-radius: 20px;
  overflow: hidden;
  padding: 28px 20px 24px;
  background: linear-gradient(135deg,
    rgba(61,235,255,.18) 0%,
    rgba(99,102,241,.22) 40%,
    rgba(168,85,247,.18) 100%);
  border: 1px solid rgba(61,235,255,.18);
  box-shadow: 0 8px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  text-align: center;
}
.ref-hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(61,235,255,.13) 0%, transparent 70%);
  pointer-events: none;
}
.ref-hero-inner { position: relative; z-index: 1; }
.ref-hero-emoji {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 10px;
  display: block;
  filter: drop-shadow(0 0 16px rgba(61,235,255,.45));
  animation: ref-float 3s ease-in-out infinite;
}
@keyframes ref-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.ref-hero-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.3px;
  margin-bottom: 6px;
}
.ref-hero-sub {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 260px;
  margin: 0 auto;
}

/* Stats grid */
.ref-stats-grid {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 18px;
  background: rgba(0,0,0,.18);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
}
.ref-stat-box {
  flex: 1;
  padding: 16px 12px;
  text-align: center;
}
.ref-stat-sep {
  width: 1px;
  background: rgba(255,255,255,.08);
  flex-shrink: 0;
}
.ref-stat-num {
  font-size: 32px;
  font-weight: 800;
  color: var(--accent);
  text-shadow: 0 0 20px rgba(61,235,255,.40);
  line-height: 1.1;
}
.ref-stat-box--green .ref-stat-num {
  color: #4ade80;
  text-shadow: 0 0 20px rgba(74,222,128,.40);
}
.ref-stat-lbl {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  letter-spacing: .02em;
}

/* How it works */
.ref-how {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 14px 10px;
  margin-bottom: 18px;
}
.ref-how-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.ref-how-icon {
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
}
.ref-how-txt {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.3;
  max-width: 70px;
}
.ref-how-arr {
  font-size: 20px;
  color: rgba(61,235,255,.4);
  flex-shrink: 0;
  line-height: 1;
  margin-top: -6px;
}

/* Info badge */
.ref-info-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(251,191,36,.07);
  border: 1px solid rgba(251,191,36,.18);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: rgba(251,191,36,.85);
  line-height: 1.45;
  margin-bottom: 18px;
}
.ref-info-badge b { color: rgba(251,191,36,1); }

/* Empty earnings state */
.ref-empty-earnings {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 8px;
  text-align: center;
}
.ref-empty-earnings-icon {
  font-size: 38px;
  margin-bottom: 10px;
  opacity: .55;
}
.ref-empty-earnings-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.ref-empty-earnings-sub {
  font-size: 13px;
  color: var(--text-secondary);
  opacity: .7;
  line-height: 1.5;
  max-width: 240px;
}

/* Light theme overrides */
body.theme-light .ref-hero {
  background: linear-gradient(135deg,
    rgba(99,102,241,.12) 0%,
    rgba(168,85,247,.10) 60%,
    rgba(61,235,255,.10) 100%);
  border-color: rgba(99,102,241,.2);
}
body.theme-light .ref-stats-grid {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.06);
}
body.theme-light .ref-stat-sep {
  background: rgba(0,0,0,.08);
}
body.theme-light .ref-stat-num {
  color: #2563eb;
  text-shadow: none;
}
body.theme-light .ref-stat-box--green .ref-stat-num {
  color: #16a34a;
  text-shadow: none;
}
body.theme-light .ref-how {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.07);
}
body.theme-light .ref-how-arr { color: rgba(99,102,241,.4); }

/* ═══════════════════════════════════════════════════════
   REFERRAL PAGE — Premium v4
   ═══════════════════════════════════════════════════════ */

.ref-page2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 24px;
  min-height: 100%;
  box-sizing: border-box;
}

/* ─── Shared base card ───────────────────────────────── */
.ref-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  overflow: hidden;
}

/* ── Hero + Stats combined card ──────────────────────── */
.ref-top-card {
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(155deg, rgba(79,70,229,.32) 0%, rgba(124,58,237,.24) 50%, rgba(167,139,250,.15) 100%);
  border: 1px solid rgba(124,58,237,.38);
}
.ref-top-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 60% at 10% 100%, rgba(167,139,250,.2), transparent),
    radial-gradient(ellipse 60% 70% at 90% 0%, rgba(99,102,241,.18), transparent);
  pointer-events: none;
}
/* top heading row */
.ref-top-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 14px;
  position: relative; z-index: 1;
}
.ref-top-icon {
  width: 50px; height: 50px;
  flex-shrink: 0;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(167,139,250,.35), rgba(99,102,241,.25));
  border: 1px solid rgba(167,139,250,.4);
  box-shadow: 0 0 22px rgba(139,92,246,.45), inset 0 1px 0 rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ref-top-icon-img {
  width: 53px; height: 53px;
  object-fit: contain;
  display: block;
}
.ref-top-text { flex: 1; min-width: 0; }
.ref-top-title {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.3px;
  line-height: 1.2;
  margin-bottom: 3px;
}
.ref-top-sub {
  font-size: 12px;
  color: rgba(255,255,255,.48);
  font-weight: 500;
}
/* metrics row */
.ref-top-divider {
  height: 1px;
  background: rgba(255,255,255,.1);
  margin: 0;
  position: relative; z-index: 1;
}
.ref-metrics {
  display: flex;
  position: relative; z-index: 1;
}
.ref-metric {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 10px 14px;
  gap: 4px;
}
.ref-metric + .ref-metric {
  border-left: 1px solid rgba(255,255,255,.1);
}
.ref-metric-val {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.6px;
}
.ref-metric-val--purple { color: #a78bfa; }
.ref-metric-val--gold { color: #fbbf24; }
.ref-metric-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: rgba(255,255,255,.35);
}

/* ── Hero ────────────────────────────────────────────── */
.ref-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(88,80,236,.22) 0%, rgba(139,92,246,.16) 100%);
  border: 1px solid rgba(139,92,246,.3);
  border-radius: 16px;
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
}
.ref-hero::before {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 90px;
  background: radial-gradient(ellipse at right center, rgba(168,85,247,.22), transparent 70%);
  pointer-events: none;
}
.ref-hero-badge {
  width: 44px; height: 44px;
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(139,92,246,.45), rgba(99,102,241,.32));
  border: 1px solid rgba(139,92,246,.5);
  box-shadow: 0 0 18px rgba(139,92,246,.38), inset 0 1px 0 rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  position: relative; z-index: 1;
}
.ref-hero-text { flex: 1; min-width: 0; position: relative; z-index: 1; }
.ref-hero-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.3px;
  line-height: 1.2;
  margin-bottom: 3px;
}
.ref-hero-sub {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ref-hero-pct {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 10px;
  background: rgba(139,92,246,.22);
  border: 1px solid rgba(139,92,246,.32);
  color: #c4b5fd;
  font-size: 15px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}

/* ── Unified stats card ──────────────────────────────── */
.ref-stats-unified {
  display: flex;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  overflow: hidden;
}
.ref-su-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 10px;
  gap: 3px;
}
.ref-su-cell + .ref-su-cell { border-left: 1px solid rgba(255,255,255,.07); }
.ref-su-icon { font-size: 18px; line-height: 1; margin-bottom: 4px; }
.ref-su-val {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.4px;
}
.ref-su-val--blue { color: #818cf8; }
.ref-su-val--gold { color: #fbbf24; }
.ref-su-lbl {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: rgba(255,255,255,.32);
}

/* ── Link card ───────────────────────────────────────── */
.ref-link-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  padding: 11px 14px;
}
.ref-link-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,.3);
  margin-bottom: 8px;
}
.ref-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 9px 12px;
}
.ref-link-text {
  flex: 1;
  font-size: 12px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: rgba(255,255,255,.58);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.ref-link-copy-btn {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(99,102,241,.2);
  border: 1px solid rgba(99,102,241,.32);
  color: #818cf8;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s;
}
.ref-link-copy-btn:active { background: rgba(99,102,241,.38); transform: scale(.92); }

/* ── Action buttons ──────────────────────────────────── */
.ref-actions-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: center;
}
.ref-actions-wrap:has(.ref-status-chip) { grid-template-columns: 1fr auto; }

/* ── "Как работает" button (inline in ref card header) ── */
.ref-how-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px 5px 6px;
  margin-top: 7px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(124,58,237,.22), rgba(109,40,217,.14));
  border: 1px solid rgba(124,58,237,.38);
  box-shadow: 0 0 10px rgba(124,58,237,.15), inset 0 1px 0 rgba(255,255,255,.08);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .18s, box-shadow .18s, background .18s;
  -webkit-tap-highlight-color: transparent;
}
.ref-how-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px; min-width: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  box-shadow: 0 0 7px rgba(124,58,237,.5);
}
.ref-how-btn__label {
  font-size: 12px;
  font-weight: 700;
  color: #c4b5fd;
  white-space: nowrap;
}
.ref-how-btn:hover { border-color: rgba(124,58,237,.6); box-shadow: 0 0 14px rgba(124,58,237,.28); }
.ref-how-btn:active { opacity: .85; }

/* ── "Как работает" modal ── */
.ref-how-modal {
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  padding: 20px 18px 18px;
  width: min(360px, calc(100vw - 32px));
  box-shadow: 0 24px 64px rgba(0,0,0,.55);
  animation: alertIn .22s cubic-bezier(.34,1.56,.64,1);
  flex-shrink: 0;
}
.ref-how-modal-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.ref-how-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.ref-how-modal-steps { display: flex; flex-direction: column; gap: 0; }
.ref-how-modal-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  position: relative;
}
.ref-how-modal-step:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,.07); }
.ref-how-modal-num {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(124,58,237,.5), rgba(109,40,217,.4));
  border: 1px solid rgba(124,58,237,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: rgba(255,255,255,.9);
  margin-top: 1px;
}
.ref-how-modal-body { flex: 1; min-width: 0; }
.ref-how-modal-step-title {
  font-size: 13px; font-weight: 700;
  color: rgba(255,255,255,.9);
  margin-bottom: 3px;
}
.ref-how-modal-step-desc {
  font-size: 12px; color: rgba(255,255,255,.45); line-height: 1.5;
}

/* light theme */
body.theme-light .ref-how-btn {
  background: linear-gradient(135deg, rgba(124,58,237,.10), rgba(109,40,217,.06));
  border-color: rgba(124,58,237,.28);
}
body.theme-light .ref-how-btn__label { color: #7c3aed; }
body.theme-light .ref-how-modal { background: #fff; border-color: rgba(0,0,0,.08); }
body.theme-light .ref-how-modal-step:not(:last-child) { border-bottom-color: rgba(0,0,0,.06); }
body.theme-light .ref-how-modal-step-title { color: #1f2430; }
body.theme-light .ref-how-modal-step-desc { color: rgba(15,23,42,.45); }

.ref-main-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 13px 10px;
  border-radius: 13px;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.ref-main-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.13), transparent 55%);
  pointer-events: none;
}
.ref-main-btn:active { transform: scale(.95); opacity: .84; }
.ref-main-btn--share {
  background: linear-gradient(135deg, #6366f1, #8b5cf6 60%, #a855f7);
  color: #fff;
  box-shadow: 0 4px 18px rgba(99,102,241,.42);
}
.ref-main-btn--withdraw {
  background: linear-gradient(135deg, #10b981, #22c55e);
  color: #fff;
  box-shadow: 0 4px 18px rgba(34,197,94,.35);
}
.ref-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 12px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.ref-status-chip--pending {
  background: rgba(251,191,36,.13);
  border: 1px solid rgba(251,191,36,.25);
  color: #fbbf24;
}
.ref-status-chip--info {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.4);
}

/* ── Section cards ───────────────────────────────────── */
.ref-section-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  overflow: hidden;
}
.ref-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.ref-section-icon { font-size: 14px; line-height: 1; }
.ref-section-title {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .7px;
  flex: 1;
}
.ref-empty-state {
  padding: 20px 14px;
  font-size: 13px;
  color: rgba(255,255,255,.28);
  text-align: center;
}
.ref-section-footer {
  font-size: 11px;
  color: rgba(255,255,255,.25);
  padding: 8px 14px 12px;
  line-height: 1.5;
}
.ref-earn-table { padding: 0 14px; }
.ref-earn-table .ref-earn-header { padding: 7px 0 6px; border-bottom-color: rgba(255,255,255,.09); }
.ref-earn-table .referral-earning-row { padding: 9px 0; border-bottom-color: rgba(255,255,255,.05); }

/* ── Withdrawal rows ─────────────────────────────────── */
.ref-wd-hidden { display: none !important; }
.ref-wd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-wrap: wrap;
}
.ref-wd-row:last-of-type { border-bottom: none; }
.ref-wd-left { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; flex: 1; min-width: 0; }
.ref-wd-amount { font-size: 14px; font-weight: 700; color: var(--tg-theme-text-color); }
.ref-wd-sep { font-size: 12px; color: rgba(255,255,255,.2); }
.ref-wd-date { font-size: 12px; color: rgba(255,255,255,.35); }
.ref-wd-extra { width: 100%; font-size: 11px; color: rgba(255,255,255,.3); margin-top: 2px; word-break: break-all; }
.ref-wd-extra--bad { color: #f87171; }
.ref-wd-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
.ref-wd-badge--pending { background: rgba(251,191,36,.14); color: #fbbf24; border: 1px solid rgba(251,191,36,.28); }
.ref-wd-badge--approved { background: rgba(74,222,128,.14); color: #4ade80; border: 1px solid rgba(74,222,128,.28); }
.ref-wd-badge--rejected { background: rgba(239,68,68,.12); color: #f87171; border: 1px solid rgba(239,68,68,.22); }
.ref-wd-more {
  display: block; width: 100%;
  padding: 8px 14px;
  font-size: 12px; color: rgba(255,255,255,.3);
  background: none; border: none;
  border-top: 1px solid rgba(255,255,255,.06);
  cursor: pointer; text-align: center;
}
.ref-wd-more:active { opacity: .65; }

/* ── Balance hybrid payment widget ──────────────────── */
/* ── Виджет гибридной оплаты балансом — стиль совпадает с .pay-method ── */
/* ── Balance pay widget — premium redesign ─────────────────────────────── */

/* CSS-переменные по умолчанию (переопределяются по теме) */
.balance-pay-card {
  --bal-color:  #3DEBFF;
  --bal-rgb:    61,235,255;
  --bal-glow:   rgba(61,235,255,.22);
  --bal-border: rgba(61,235,255,.20);
  --bal-bg1:    rgba(61,235,255,.09);
  --bal-bg2:    rgba(61,235,255,.03);

  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bal-bg1) 0%, rgba(12,18,32,.65) 55%, var(--bal-bg2) 100%);
  border: 1.5px solid var(--bal-border);
  border-radius: 18px;
  padding: 15px 16px;
  box-shadow: 0 6px 28px rgba(0,0,0,.30), 0 1px 0 rgba(255,255,255,.05) inset;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Декоративный glow-blob в углу */
.balance-pay-glow-blob {
  position: absolute;
  top: -24px; right: -24px;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--bal-glow) 0%, transparent 70%);
  pointer-events: none;
}

/* Верхняя строка */
.balance-pay-top { display: flex; align-items: center; gap: 12px; }

/* Иконка в рамке */
.balance-pay-icon-wrap {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--bal-rgb),.20), rgba(var(--bal-rgb),.07));
  border: 1px solid rgba(var(--bal-rgb),.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(var(--bal-rgb),.15);
}
.balance-pay-icon { line-height: 1; }

.balance-pay-info { flex: 1; min-width: 0; }
.balance-pay-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(var(--bal-rgb),.55);
  margin-bottom: 2px;
}
.balance-pay-amount {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
  line-height: 1.15;
  text-shadow: 0 0 18px rgba(var(--bal-rgb),.35);
}

/* Тогл */
.balance-toggle-wrap {
  position: relative; display: inline-block;
  width: 46px; height: 26px; flex-shrink: 0;
}
.balance-toggle-wrap input { opacity: 0; width: 0; height: 0; }
.balance-toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 26px;
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.balance-toggle-slider::before {
  content: '';
  position: absolute;
  height: 20px; width: 20px;
  left: 2px; bottom: 2px;
  background: rgba(255,255,255,.88);
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0,0,0,.35);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.balance-toggle-wrap input:checked + .balance-toggle-slider {
  background: rgba(var(--bal-rgb),.60);
  border-color: rgba(var(--bal-rgb),.40);
  box-shadow: 0 0 14px rgba(var(--bal-rgb),.35);
}
.balance-toggle-wrap input:checked + .balance-toggle-slider::before {
  transform: translateX(20px);
  background: #fff;
}
.balance-toggle-wrap input:disabled + .balance-toggle-slider { cursor: not-allowed; }

/* Разделитель перед слайдером */
.balance-slider-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--bal-rgb),.20), transparent);
  margin: 12px 0;
}
.balance-slider-labels {
  display: flex; justify-content: space-between;
  font-size: 11px; margin-bottom: 8px;
  color: rgba(255,255,255,.40);
}
.balance-apply-val { font-weight: 700; color: var(--bal-color); }

/* Кастомный слайдер */
.balance-slider-track-wrap { position: relative; padding: 4px 0; }
.balance-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 4px;
  background: rgba(255,255,255,.12);
  cursor: pointer; outline: none; display: block;
}
.balance-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bal-color);
  border: 2.5px solid rgba(255,255,255,.85);
  box-shadow: 0 0 10px rgba(var(--bal-rgb),.55), 0 2px 6px rgba(0,0,0,.30);
  cursor: pointer;
  transition: box-shadow .15s;
}
.balance-slider::-webkit-slider-thumb:active {
  box-shadow: 0 0 18px rgba(var(--bal-rgb),.80), 0 2px 6px rgba(0,0,0,.30);
}
.balance-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bal-color);
  border: 2.5px solid rgba(255,255,255,.85);
  box-shadow: 0 0 10px rgba(var(--bal-rgb),.55);
  cursor: pointer;
}
.balance-slider-hints {
  display: flex; justify-content: space-between;
  font-size: 10px; color: rgba(255,255,255,.28); margin-top: 5px;
}

/* Пустой баланс */
.balance-pay-card--empty { opacity: 0.45; }
.balance-pay-card--empty .balance-toggle-wrap { pointer-events: none; }

/* ── Категорийные цвета ─────────────────────────────────────────── */
body[data-theme="stars"] .balance-pay-card {
  --bal-color:  #FFC64D;
  --bal-rgb:    255,198,77;
  --bal-glow:   rgba(255,198,77,.25);
  --bal-border: rgba(255,198,77,.22);
  --bal-bg1:    rgba(255,198,77,.10);
  --bal-bg2:    rgba(255,198,77,.04);
}
body[data-theme="premium"] .balance-pay-card {
  --bal-color:  #B774FF;
  --bal-rgb:    183,116,255;
  --bal-glow:   rgba(183,116,255,.25);
  --bal-border: rgba(183,116,255,.22);
  --bal-bg1:    rgba(183,116,255,.10);
  --bal-bg2:    rgba(183,116,255,.04);
}
body[data-theme="gifts"] .balance-pay-card {
  --bal-color:  #34d399;
  --bal-rgb:    52,211,153;
  --bal-glow:   rgba(52,211,153,.25);
  --bal-border: rgba(52,211,153,.22);
  --bal-bg1:    rgba(52,211,153,.10);
  --bal-bg2:    rgba(52,211,153,.04);
}
body[data-theme="steam"] .balance-pay-card {
  --bal-color:  #38bdf8;
  --bal-rgb:    56,189,248;
  --bal-glow:   rgba(56,189,248,.25);
  --bal-border: rgba(56,189,248,.22);
  --bal-bg1:    rgba(56,189,248,.10);
  --bal-bg2:    rgba(56,189,248,.04);
}

/* Светлая тема */
body.theme-light .balance-pay-card {
  background: linear-gradient(135deg, rgba(var(--bal-rgb),.10) 0%, rgba(255,255,255,.96) 55%, rgba(var(--bal-rgb),.04) 100%);
  border-color: rgba(var(--bal-rgb),.30);
  box-shadow: 0 4px 20px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.80) inset;
}
body.theme-light .balance-pay-glow-blob {
  opacity: .50;
}
body.theme-light .balance-pay-label {
  color: rgba(var(--bal-rgb), 1);
  filter: brightness(.75) saturate(1.4);
}
body.theme-light .balance-pay-amount { color: #1a1a2e; text-shadow: none; }
body.theme-light .balance-pay-icon-wrap {
  background: linear-gradient(135deg, rgba(var(--bal-rgb),.22), rgba(var(--bal-rgb),.10));
  box-shadow: 0 2px 8px rgba(var(--bal-rgb),.20);
}
/* Тогл: трек и кнопка */
body.theme-light .balance-toggle-slider {
  background: rgba(0,0,0,.12);
  border-color: rgba(0,0,0,.10);
}
body.theme-light .balance-toggle-slider::before {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.22);
}
body.theme-light .balance-toggle-wrap input:checked + .balance-toggle-slider {
  background: rgba(var(--bal-rgb), .80);
  border-color: rgba(var(--bal-rgb), .50);
  box-shadow: 0 0 12px rgba(var(--bal-rgb), .40);
}
body.theme-light .balance-toggle-wrap input:checked + .balance-toggle-slider::before {
  background: #fff;
}
/* Слайдер */
body.theme-light .balance-slider-divider {
  background: linear-gradient(90deg, transparent, rgba(var(--bal-rgb),.30), transparent);
}
body.theme-light .balance-slider-labels { color: rgba(0,0,0,.45); }
body.theme-light .balance-slider-hints  { color: rgba(0,0,0,.30); }
body.theme-light .balance-slider        { background: rgba(0,0,0,.10); }
body.theme-light .balance-slider::-webkit-slider-thumb {
  box-shadow: 0 0 10px rgba(var(--bal-rgb),.60), 0 2px 5px rgba(0,0,0,.18);
}
/* Категорийные цвета в светлой теме */
body.theme-light[data-theme="stars"] .balance-pay-card  { --bal-color:#d4880a; --bal-rgb:212,136,10; }
body.theme-light[data-theme="premium"] .balance-pay-card{ --bal-color:#8b2fd4; --bal-rgb:139,47,212; }
body.theme-light[data-theme="gifts"] .balance-pay-card  { --bal-color:#0d9e6b; --bal-rgb:13,158,107; }
body.theme-light[data-theme="steam"] .balance-pay-card  { --bal-color:#0284c7; --bal-rgb:2,132,199; }

/* ── Transaction history rows ───────────────────────── */
.ref-txn-hidden { display: none !important; }
.ref-txn-row {
  display: grid;
  grid-template-columns: 20px 1fr auto auto;
  align-items: center;
  gap: 0 8px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: 12.5px;
}
.ref-txn-row:last-of-type { border-bottom: none; }
.ref-txn-icon { font-size: 13px; line-height: 1; }
.ref-txn-label { color: var(--tg-theme-text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-txn-date { color: var(--text-secondary); font-size: 11px; white-space: nowrap; }
.ref-txn-amount { font-size: 13px; font-weight: 700; white-space: nowrap; }
.ref-txn-amount--plus { color: #4ade80; }
.ref-txn-amount--minus { color: #f87171; }
#ref-txn-card .ref-txn-hidden { display: none !important; }

/* ── Light theme ─────────────────────────────────────── */
body.theme-light .ref-top-card {
  background: linear-gradient(155deg, rgba(79,70,229,.15) 0%, rgba(124,58,237,.1) 50%, rgba(167,139,250,.07) 100%);
  border-color: rgba(124,58,237,.22);
}
body.theme-light .ref-top-icon {
  background: linear-gradient(145deg, rgba(167,139,250,.3), rgba(99,102,241,.22));
  border-color: rgba(167,139,250,.35);
  box-shadow: 0 0 14px rgba(139,92,246,.2);
}
body.theme-light .ref-top-sub { color: rgba(0,0,0,.44); }
body.theme-light .ref-top-divider { background: rgba(0,0,0,.07); }
body.theme-light .ref-metric + .ref-metric { border-left-color: rgba(0,0,0,.07); }
body.theme-light .ref-metric-val--purple { color: #5b21b6; }
body.theme-light .ref-metric-val--gold { color: #d97706; }
body.theme-light .ref-metric-lbl { color: rgba(0,0,0,.35); }
body.theme-light .ref-hero {
  background: linear-gradient(135deg, rgba(88,80,236,.14), rgba(139,92,246,.09));
  border-color: rgba(139,92,246,.22);
}
body.theme-light .ref-hero::before {
  background: radial-gradient(ellipse at right center, rgba(168,85,247,.1), transparent 70%);
}
body.theme-light .ref-hero-badge {
  background: linear-gradient(145deg, rgba(139,92,246,.28), rgba(99,102,241,.2));
  border-color: rgba(139,92,246,.35);
  box-shadow: 0 0 14px rgba(139,92,246,.2);
}
body.theme-light .ref-hero-sub { color: rgba(0,0,0,.44); }
body.theme-light .ref-hero-pct { background: rgba(139,92,246,.12); border-color: rgba(139,92,246,.22); color: #6d28d9; }
body.theme-light .ref-stats-unified,
body.theme-light .ref-link-card,
body.theme-light .ref-section-card { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); }
body.theme-light .ref-su-val--blue { color: #4f46e5; }
body.theme-light .ref-su-val--gold { color: #d97706; }
body.theme-light .ref-su-lbl { color: rgba(0,0,0,.35); }
body.theme-light .ref-link-label { color: rgba(0,0,0,.3); }
body.theme-light .ref-link-row { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.07); }
body.theme-light .ref-link-text { color: rgba(0,0,0,.65); }
body.theme-light .ref-link-copy-btn { background: rgba(99,102,241,.12); border-color: rgba(99,102,241,.22); color: #4f46e5; }
body.theme-light .ref-section-head { border-bottom-color: rgba(0,0,0,.06); }
body.theme-light .ref-section-title { color: rgba(0,0,0,.35); }
body.theme-light .ref-empty-state { color: rgba(0,0,0,.28); }
body.theme-light .ref-section-footer { color: rgba(0,0,0,.25); }
body.theme-light .ref-wd-row { border-bottom-color: rgba(0,0,0,.05); }
body.theme-light .ref-wd-amount { color: rgba(0,0,0,.85); }
body.theme-light .ref-wd-date { color: rgba(0,0,0,.35); }
body.theme-light .ref-wd-extra { color: rgba(0,0,0,.3); }
body.theme-light .ref-wd-more { color: rgba(0,0,0,.28); border-top-color: rgba(0,0,0,.05); }
body.theme-light .ref-status-chip--info { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); color: rgba(0,0,0,.35); }
body.theme-light .ref-status-chip--pending { background: rgba(180,83,9,.08); border-color: rgba(180,83,9,.2); color: #b45309; }

/* ═══════════════════════════════════════════════════════
   OFFLINE BANNER
   ═══════════════════════════════════════════════════════ */
.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(239,68,68,.92);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
  transform: translateY(-100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.offline-banner.visible {
  transform: translateY(0);
}
.offline-banner-icon { font-size: 16px; }
body.theme-light .offline-banner { background: rgba(220,38,38,.9); }

/* ═══════════════════════════════════════════════════════
   CATALOG PAGE — LIGHT THEME ENHANCEMENT (v509)
   Главная страница: насыщенный, не тусклый вид
   ═══════════════════════════════════════════════════════ */

/* 1. Богатый фон каталога — голубо-фиолетовый градиент сверху */
body.theme-light #screen-catalog {
  background:
    radial-gradient(ellipse 120% 45% at 50% 0%,    rgba(99,102,241,.11) 0%, transparent 58%),
    radial-gradient(ellipse 55% 30% at 10% 25%,    rgba(37,99,235,.08)  0%, transparent 55%),
    radial-gradient(ellipse 55% 28% at 90% 18%,    rgba(139,92,246,.07) 0%, transparent 52%),
    linear-gradient(180deg,
      rgba(213,230,255,.95)  0%,
      rgba(232,228,255,.70) 16%,
      rgba(247,249,255,.45) 38%,
      rgba(255,255,255,1)   62%) !important;
}

/* 2. Hero-баннер — насыщенный синий → индиго */
body.theme-light .hero-banner.hero-home {
  background:
    radial-gradient(ellipse 75% 130% at 18% 50%,   rgba(99,102,241,.14) 0%, transparent 58%),
    radial-gradient(ellipse 55% 100% at 88% 40%,   rgba(37,99,235,.11)  0%, transparent 52%),
    linear-gradient(135deg, #d1e4ff 0%, #e5deff 52%, #dbeafe 100%) !important;
  border: 1px solid rgba(99,102,241,.22) !important;
  box-shadow:
    0 8px 32px rgba(37,99,235,.14),
    0 3px 10px rgba(99,102,241,.09),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

/* 3. Shimmer-заголовок «Добро пожаловать» — градиентный sweep (как в тёмной теме)
   background и color БЕЗ !important → анимация может менять background-position.
   color: transparent — без !important — побеждает по специфичности (0,4,1 > 0,1,0). */
@keyframes shimmerPassIndigo {
  0%   { background-position: 150% center; }
  100% { background-position: -50% center; }
}
body.theme-light .hero-home .hero-home-line1 .shimmer-text,
body.theme-light .hero-home .hero-home-line1 span {
  /* Точная копия структуры тёмной темы: широкая база + узкая белая вспышка */
  background: linear-gradient(
    90deg,
    #3730a3  0%,
    #3730a3 30%,
    #ffffff  50%,
    #3730a3 70%,
    #3730a3 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  will-change: background-position;
  animation-name: shimmerPassIndigo !important;
  animation-duration: 4s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
  animation-fill-mode: none !important;
  animation-delay: 0s !important;
}
body.theme-light .hero-home .hero-home-line1,
body.theme-light .hero-home .hero-home-line1.pixel-title {
  color: #3730a3 !important; /* fallback если background-clip не применился */
  filter: none !important;
  text-shadow: none !important;
}
body.theme-light .hero-home .hero-home-line2,
body.theme-light .hero-home .hero-home-line2.pixel-title {
  color: rgba(55,48,163,.48) !important;
  filter: none !important;
  text-shadow: none !important;
}

/* 4. Маскот — скрываем тёмный прямоугольный фон: fade только сверху и слева.
   Правый edge НЕ фейдим — баннер сам обрезает overflow:hidden, иначе маскот размывается */
body.theme-light .hero-home-mascot {
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, black 16%, black 100%),
    linear-gradient(to bottom, transparent 0%, black 10%, black 100%);
  mask-image:
    linear-gradient(to right,  transparent 0%, black 16%, black 100%),
    linear-gradient(to bottom, transparent 0%, black 10%, black 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  filter: drop-shadow(0 6px 20px rgba(99,102,241,.22));
}

/* 5. «Категории» — тёмно-синий жирный заголовок */
body.theme-light #screen-catalog .categories-header-title {
  color: #1e3a8a !important;
}

/* 6. Карточки категорий — усиленные тени и более насыщенные фоны */
body.theme-light #cat-stars {
  background: linear-gradient(145deg, #fffbea, #fff5c2, #fff8d6) !important;
  border-color: rgba(251,191,36,.45) !important;
  box-shadow:
    0 10px 30px rgba(245,158,11,.18),
    0 4px 12px rgba(217,119,6,.10),
    0 0 0 1px rgba(251,191,36,.18) inset !important;
}
body.theme-light #cat-stars:hover {
  border-color: rgba(251,191,36,.65) !important;
  box-shadow:
    0 14px 38px rgba(245,158,11,.26),
    0 5px 14px rgba(217,119,6,.14),
    0 0 0 1px rgba(251,191,36,.28) inset !important;
  transform: translateY(-2px);
}
body.theme-light #cat-steam {
  background: linear-gradient(145deg, #eff6ff, #dbeafe, #e0eeff) !important;
  border-color: rgba(37,99,235,.30) !important;
  box-shadow:
    0 10px 30px rgba(37,99,235,.16),
    0 4px 12px rgba(26,79,196,.09),
    0 0 0 1px rgba(37,99,235,.14) inset !important;
}
body.theme-light #cat-steam:hover {
  border-color: rgba(37,99,235,.50) !important;
  box-shadow:
    0 14px 38px rgba(37,99,235,.22),
    0 5px 14px rgba(26,79,196,.12),
    0 0 0 1px rgba(37,99,235,.24) inset !important;
  transform: translateY(-2px);
}
body.theme-light #cat-premium {
  background: linear-gradient(145deg, #f5f0ff, #ede8ff, #f0e8ff) !important;
  border-color: rgba(124,58,237,.30) !important;
  box-shadow:
    0 10px 30px rgba(109,40,217,.16),
    0 4px 12px rgba(139,92,246,.09),
    0 0 0 1px rgba(124,58,237,.14) inset !important;
}
body.theme-light #cat-premium:hover {
  border-color: rgba(124,58,237,.50) !important;
  box-shadow:
    0 14px 38px rgba(109,40,217,.22),
    0 5px 14px rgba(139,92,246,.12),
    0 0 0 1px rgba(124,58,237,.24) inset !important;
  transform: translateY(-2px);
}
body.theme-light #cat-gifts {
  background: linear-gradient(145deg, #f0fdf4, #dcfce7, #e2fced) !important;
  border-color: rgba(22,163,74,.30) !important;
  box-shadow:
    0 10px 30px rgba(16,185,129,.16),
    0 4px 12px rgba(5,150,105,.09),
    0 0 0 1px rgba(22,163,74,.14) inset !important;
}
body.theme-light #cat-gifts:hover {
  border-color: rgba(22,163,74,.50) !important;
  box-shadow:
    0 14px 38px rgba(16,185,129,.22),
    0 5px 14px rgba(5,150,105,.12),
    0 0 0 1px rgba(22,163,74,.24) inset !important;
  transform: translateY(-2px);
}

/* 7. Иконки категорий — более яркие тени */
body.theme-light #cat-stars   .cat-icon { filter: drop-shadow(0 6px 16px rgba(245,158,11,.50)) !important; }
body.theme-light #cat-steam   .cat-icon { filter: drop-shadow(0 6px 16px rgba(37,99,235,.42))  !important; }
body.theme-light #cat-premium .cat-icon { filter: drop-shadow(0 6px 16px rgba(124,58,237,.42)) !important; }
body.theme-light #cat-gifts   .cat-icon { filter: drop-shadow(0 6px 16px rgba(16,185,129,.42)) !important; }
body.theme-light #cat-stars:hover   .cat-icon { filter: drop-shadow(0 10px 22px rgba(245,158,11,.65)) !important; }
body.theme-light #cat-steam:hover   .cat-icon { filter: drop-shadow(0 10px 22px rgba(37,99,235,.55))  !important; }
body.theme-light #cat-premium:hover .cat-icon { filter: drop-shadow(0 10px 22px rgba(124,58,237,.55)) !important; }
body.theme-light #cat-gifts:hover   .cat-icon { filter: drop-shadow(0 10px 22px rgba(16,185,129,.55)) !important; }

/* ═══════════════════════════════════════════════════════
   BANNER MASCOT — LIGHT THEME: убираем тёмную тень за маскотом
   Steam и Premium: ::before portal-glow выглядит как тёмное пятно на светлом фоне
   ═══════════════════════════════════════════════════════ */

/* Скрываем portal-glow (::before) и glow-pulse (::after) за маскотом */
body.theme-light[data-theme="steam"]   #screen-steam   .hero-mascot-wrap::before,
body.theme-light[data-theme="premium"] #screen-premium .hero-mascot-wrap::before {
  display: none !important;
}
body.theme-light[data-theme="steam"]   #screen-steam   .hero-mascot-wrap::after,
body.theme-light[data-theme="premium"] #screen-premium .hero-mascot-wrap::after {
  display: none !important;
}

/* Убираем тяжёлый чёрный drop-shadow с маскота, оставляем только цветной */
body.theme-light[data-theme="steam"] #screen-steam .hero-mascot {
  filter: drop-shadow(0 4px 12px rgba(37,99,235,.28)) !important;
}
body.theme-light[data-theme="premium"] #screen-premium .hero-mascot {
  filter: drop-shadow(0 4px 12px rgba(124,58,237,.28)) !important;
}

/* ── Delivery Steps ──────────────────────────────────────────────── */
.delivery-steps {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.delivery-steps::-webkit-scrollbar { display: none; }
.ds-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  font-size: 11px;
  color: rgba(255,255,255,.35);
  text-align: center;
  white-space: nowrap;
  padding: 4px 2px;
}
.ds-step.ds-done { color: rgba(255,255,255,.85); }
.ds-step.ds-active { color: var(--tg-theme-button-color, #3b82f6); font-weight: 600; }
.ds-line {
  flex: 0 0 12px;
  height: 1px;
  background: rgba(255,255,255,.12);
  margin-bottom: 10px;
}
.ds-line.ds-done { background: rgba(255,255,255,.35); }

/* ── Promo Code ──────────────────────────────────────────────────── */
.promo-wrap { position: relative; }
.promo-inner {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .2s;
}
.promo-inner:focus-within {
  border-color: rgba(255,255,255,.22);
}
.promo-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--tg-theme-text-color);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  padding: 13px 8px 13px 14px;
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.promo-input::placeholder {
  color: rgba(255,255,255,.25);
  font-weight: 400;
  letter-spacing: 0;
  font-family: inherit;
}
.promo-btn {
  flex-shrink: 0;
  padding: 0 14px;
  min-height: 44px;
  background: none;
  border: none;
  border-left: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.38);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  cursor: pointer;
  transition: color .15s, opacity .15s;
  white-space: nowrap;
}
.promo-btn:active { opacity: .6; }
.promo-btn:disabled { opacity: .3; cursor: not-allowed; }
.promo-result {
  font-size: 13px;
  padding: 7px 2px 0;
  display: none;
}

/* ── Promo: per-category accent ──────────────────────────────────── */
/* Stars — gold */
.promo-wrap[data-cat="stars"] .promo-inner { border-color: rgba(251,191,36,.22); }
.promo-wrap[data-cat="stars"] .promo-inner:focus-within { border-color: rgba(251,191,36,.45); }
.promo-wrap[data-cat="stars"] .promo-btn { color: #fbbf24; border-left-color: rgba(251,191,36,.18); }

/* Premium — purple */
.promo-wrap[data-cat="premium"] .promo-inner { border-color: rgba(139,92,246,.22); }
.promo-wrap[data-cat="premium"] .promo-inner:focus-within { border-color: rgba(139,92,246,.45); }
.promo-wrap[data-cat="premium"] .promo-btn { color: #a78bfa; border-left-color: rgba(139,92,246,.18); }

/* Gifts — pink */
.promo-wrap[data-cat="gifts"] .promo-inner { border-color: rgba(52,211,153,.22); }
.promo-wrap[data-cat="gifts"] .promo-inner:focus-within { border-color: rgba(52,211,153,.45); }
.promo-wrap[data-cat="gifts"] .promo-btn { color: #34d399; border-left-color: rgba(52,211,153,.18); }

/* Steam — blue */
.promo-wrap[data-cat="steam"] .promo-inner { border-color: rgba(59,130,246,.22); }
.promo-wrap[data-cat="steam"] .promo-inner:focus-within { border-color: rgba(59,130,246,.45); }
.promo-wrap[data-cat="steam"] .promo-btn { color: #60a5fa; border-left-color: rgba(59,130,246,.18); }

/* Light theme — base */
body.theme-light .promo-inner {
  background: #ffffff;
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  align-items: stretch;
}
body.theme-light .promo-inner:focus-within { border-color: rgba(0,0,0,.26); }
body.theme-light .promo-input { color: #1a1a2e; }
body.theme-light .promo-input::placeholder { color: rgba(0,0,0,.30); }
body.theme-light .promo-btn {
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.03);
  border-left-color: rgba(0,0,0,.10);
  color: rgba(0,0,0,.40);
  min-height: unset;
}
/* Light theme — per-category "Применить" */
body.theme-light .promo-wrap[data-cat="stars"]   .promo-btn { color: #b86e00; border-left-color: rgba(184,110,0,.18); }
body.theme-light .promo-wrap[data-cat="stars"]   .promo-inner:focus-within { border-color: rgba(184,110,0,.40); }
body.theme-light .promo-wrap[data-cat="premium"] .promo-btn { color: #7c22c8; border-left-color: rgba(124,34,200,.18); }
body.theme-light .promo-wrap[data-cat="premium"] .promo-inner:focus-within { border-color: rgba(124,34,200,.40); }
body.theme-light .promo-wrap[data-cat="gifts"]   .promo-btn { color: #0d9e6b; border-left-color: rgba(13,158,107,.18); }
body.theme-light .promo-wrap[data-cat="gifts"]   .promo-inner:focus-within { border-color: rgba(13,158,107,.40); }
body.theme-light .promo-wrap[data-cat="steam"]   .promo-btn { color: #0369a1; border-left-color: rgba(3,105,161,.18); }
body.theme-light .promo-wrap[data-cat="steam"]   .promo-inner:focus-within { border-color: rgba(3,105,161,.40); }

/* ── Promo result badge ───────────────────────────────────────────── */
@keyframes promo-badge-in {
  from { opacity: 0; transform: translateY(-5px) scale(.95); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
.promo-result-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .25px;
  border: 1px solid;
  animation: promo-badge-in .22s cubic-bezier(.34,1.56,.64,1) both;
}
.promo-result-icon {
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.promo-result-amount {
  font-weight: 800;
  letter-spacing: .1px;
}

/* Error */
.promo-result-badge--error {
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.28);
  color: #f87171;
}

/* Success — default */
.promo-result-badge--success {
  background: rgba(74,222,128,.10);
  border-color: rgba(74,222,128,.28);
  color: #4ade80;
}

/* Stars — gold */
.promo-wrap[data-cat="stars"] .promo-result-badge--success {
  background: rgba(255,198,77,.10);
  border-color: rgba(255,198,77,.32);
  color: #FFC64D;
  text-shadow: 0 0 14px rgba(255,198,77,.50);
  box-shadow: 0 2px 18px rgba(255,198,77,.10), inset 0 0 0 1px rgba(255,198,77,.06);
}
.promo-wrap[data-cat="stars"] .promo-result-badge--success .promo-result-amount {
  filter: drop-shadow(0 0 6px rgba(255,198,77,.60));
}

/* Premium — purple */
.promo-wrap[data-cat="premium"] .promo-result-badge--success {
  background: rgba(183,116,255,.10);
  border-color: rgba(183,116,255,.32);
  color: #B774FF;
  text-shadow: 0 0 14px rgba(183,116,255,.45);
  box-shadow: 0 2px 18px rgba(183,116,255,.10), inset 0 0 0 1px rgba(183,116,255,.06);
}
.promo-wrap[data-cat="premium"] .promo-result-badge--success .promo-result-amount {
  filter: drop-shadow(0 0 6px rgba(183,116,255,.55));
}

/* Gifts — emerald */
.promo-wrap[data-cat="gifts"] .promo-result-badge--success {
  background: rgba(52,211,153,.10);
  border-color: rgba(52,211,153,.32);
  color: #34d399;
  text-shadow: 0 0 14px rgba(52,211,153,.45);
  box-shadow: 0 2px 18px rgba(52,211,153,.10), inset 0 0 0 1px rgba(52,211,153,.06);
}
.promo-wrap[data-cat="gifts"] .promo-result-badge--success .promo-result-amount {
  filter: drop-shadow(0 0 6px rgba(52,211,153,.55));
}

/* Steam — blue */
.promo-wrap[data-cat="steam"] .promo-result-badge--success {
  background: rgba(74,182,255,.10);
  border-color: rgba(74,182,255,.32);
  color: #4AB6FF;
  text-shadow: 0 0 14px rgba(74,182,255,.45);
  box-shadow: 0 2px 18px rgba(74,182,255,.10), inset 0 0 0 1px rgba(74,182,255,.06);
}
.promo-wrap[data-cat="steam"] .promo-result-badge--success .promo-result-amount {
  filter: drop-shadow(0 0 6px rgba(74,182,255,.55));
}

/* Light theme */
body.theme-light .promo-result-badge--error {
  background: rgba(220,38,38,.07);
  border-color: rgba(220,38,38,.22);
  color: #dc2626;
}
body.theme-light .promo-result-badge--success {
  background: rgba(22,163,74,.07);
  border-color: rgba(22,163,74,.22);
  color: #16a34a;
  text-shadow: none;
  box-shadow: none;
}
body.theme-light .promo-wrap[data-cat="stars"]   .promo-result-badge--success { background: rgba(180,110,0,.08);  border-color: rgba(180,110,0,.28);  color: #9a6200; text-shadow: none; box-shadow: none; }
body.theme-light .promo-wrap[data-cat="premium"] .promo-result-badge--success { background: rgba(124,34,200,.08); border-color: rgba(124,34,200,.28); color: #7c22c8; text-shadow: none; box-shadow: none; }
body.theme-light .promo-wrap[data-cat="gifts"]   .promo-result-badge--success { background: rgba(13,158,107,.08); border-color: rgba(13,158,107,.28); color: #0d7a55; text-shadow: none; box-shadow: none; }
body.theme-light .promo-wrap[data-cat="steam"]   .promo-result-badge--success { background: rgba(3,105,161,.08);  border-color: rgba(3,105,161,.28);  color: #0369a1; text-shadow: none; box-shadow: none; }
body.theme-light .promo-result-badge .promo-result-amount { filter: none; }

/* ===== Skeleton screens (#31) ===== */
.skeleton-item{background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.05) 75%);background-size:200% 100%;animation:skeleton-pulse 1.5s ease-in-out infinite;border-radius:10px;margin-bottom:10px;}
@keyframes skeleton-pulse{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-order{height:78px;}.skeleton-ticket{height:68px;}.skeleton-review{height:88px;}
.skeleton-list{padding:0 16px;}

/* ===== Empty states with CTA (#33) ===== */
/* ── Support empty state — premium redesign ── */
.empty-state-icon {
  width: 72px; height: 72px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(61,235,255,.18), rgba(37,99,235,.22));
  border: 1px solid rgba(61,235,255,.28);
  box-shadow: 0 0 32px rgba(61,235,255,.18), inset 0 1px 0 rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px;
  margin-bottom: 20px;
  position: relative;
}
.empty-state-icon::after {
  content: '';
  position: absolute;
  inset: -1px; border-radius: 23px;
  background: linear-gradient(145deg, rgba(61,235,255,.3), transparent 60%);
  pointer-events: none;
}
.empty-state-title {
  font-size: 18px; font-weight: 700;
  color: rgba(255,255,255,.95);
  margin-bottom: 8px; letter-spacing: -.2px;
}
.empty-state-desc {
  font-size: 13px;
  color: rgba(255,255,255,.42);
  margin-bottom: 24px; line-height: 1.5;
}
.empty-state-btn {
  background: linear-gradient(135deg, #3DEBFF 0%, #2563eb 100%);
  color: #041016; border: none;
  border-radius: 14px;
  padding: 14px 32px;
  font-size: 15px; font-weight: 700;
  cursor: pointer; letter-spacing: -.01em;
  box-shadow: 0 4px 20px rgba(61,235,255,.32), 0 2px 8px rgba(37,99,235,.22);
  transition: all .15s;
  width: 100%;
}
.empty-state-btn:active { opacity: .82; transform: scale(.98); }

/* ── Support screen specific overrides ── */
#screen-support .empty-state {
  min-height: unset;
  padding: 36px 20px 8px;
}

/* ── FAQ cards — premium ── */
#screen-support .tickets-faq { margin-top: 12px; }
#screen-support .tickets-faq-card {
  background: linear-gradient(135deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.025) 100%);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  padding: 15px 16px;
  gap: 14px;
  transition: background .15s, border-color .15s, transform .15s;
}
#screen-support .tickets-faq-card:active {
  background: linear-gradient(135deg, rgba(61,235,255,.09) 0%, rgba(37,99,235,.07) 100%);
  border-color: rgba(61,235,255,.25);
  transform: scale(.98);
}
#screen-support .tfc-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(61,235,255,.15), rgba(37,99,235,.18));
  border: 1px solid rgba(61,235,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
#screen-support .tfc-title {
  font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,.9);
}
#screen-support .tfc-sub {
  font-size: 12px;
  color: rgba(255,255,255,.38);
  margin-top: 3px;
}
#screen-support .tfc-arrow {
  font-size: 20px;
  color: rgba(61,235,255,.7);
  opacity: 1;
}

/* ===== Field error styles (#10) ===== */
.field-error { border-color: #e74c3c !important; }
.field-error-msg { color: #e74c3c; font-size: 12px; margin-top: 4px; }

/* ===== Live validation indicator (#18) ===== */
.input-valid-indicator { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; pointer-events: none; }
.input-wrap-rel { position: relative; }

/* ===== Skeleton screen (#6) ===== */
.skeleton-pack { height: 110px; }
.skeleton-product { height: 130px; }

/* ===== Admin semantic tables (#17) ===== */
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th { text-align: left; padding: 8px 10px; color: rgba(255,255,255,.5); font-weight: 500; border-bottom: 1px solid rgba(255,255,255,.1); }
.admin-table td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: top; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: rgba(255,255,255,.03); }

/* ===== Admin export button (#16) ===== */
.admin-export-btn { display:inline-flex; align-items:center; gap:4px; padding:8px 12px; font-size:12px; font-weight:600; background:rgba(61,235,255,.08); border:1px solid rgba(61,235,255,.25); border-radius:8px; color:rgba(61,235,255,.9); cursor:pointer; white-space:nowrap; }

/* ===== Security/settings grid (#4) ===== */
.settings-grid { display: flex; flex-direction: column; gap: 0; }
.setting-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.setting-item:last-child { border-bottom: none; }
.setting-label { font-size: 13px; color: rgba(255,255,255,.7); flex: 1; line-height: 1.4; }
.setting-input { width: 90px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: #fff; font-size: 14px; font-weight: 600; padding: 8px 12px; text-align: right; outline: none; flex-shrink: 0; }
.setting-input:focus { border-color: rgba(61,235,255,.5); background: rgba(255,255,255,.1); }
.admin-hint { font-size: 12px; color: rgba(255,255,255,.4); }

/* ===== Admin filter tabs ===== */
.admin-filter-tab { padding: 7px 14px; font-size: 12px; font-weight: 600; border-radius: 20px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: rgba(255,255,255,.55); cursor: pointer; transition: all .2s; white-space: nowrap; }
.admin-filter-tab:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); }
.admin-filter-tab.active { background: rgba(61,235,255,.15); border-color: rgba(61,235,255,.4); color: rgba(61,235,255,.95); }

/* ===== Admin table: scrollable wrapper ===== */
.admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 480px; }
.admin-table th { text-align: left; padding: 9px 10px; color: rgba(255,255,255,.4); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid rgba(255,255,255,.08); white-space: nowrap; }
.admin-table td { padding: 10px 10px; border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: rgba(255,255,255,.04); }
.admin-table tr { cursor: pointer; }

/* ===== Bulk action bar ===== */
#bulk-action-bar { display: none; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(61,235,255,.07); border: 1px solid rgba(61,235,255,.2); border-radius: 10px; margin-bottom: 10px; flex-wrap: wrap; }
#bulk-action-bar.visible { display: flex; }
#bulk-selected-count { font-size: 13px; font-weight: 600; color: rgba(61,235,255,.9); flex: 1; }
#bulk-action-bar button { padding: 6px 12px; font-size: 12px; font-weight: 600; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.07); color: rgba(255,255,255,.8); cursor: pointer; }
#bulk-action-bar button:hover { background: rgba(255,255,255,.12); }

/* ===== Admin search bar ===== */
.adm-search-bar { position:relative; display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.adm-search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); pointer-events:none; display:flex; }
.adm-search-input { flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:10px 36px 10px 36px; font-size:14px; color:#fff; outline:none; transition:border-color .2s; width:100%; }
.adm-search-input:focus { border-color:rgba(61,235,255,.4); background:rgba(255,255,255,.08); }
.adm-search-input::placeholder { color:rgba(255,255,255,.3); }
.adm-search-clear { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; color:rgba(255,255,255,.35); font-size:13px; cursor:pointer; padding:4px; opacity:0; transition:opacity .15s; }

/* ===== Bulk action bar ===== */
#bulk-action-bar { display:none; align-items:center; gap:8px; padding:10px 14px; background:linear-gradient(135deg,rgba(61,235,255,.08),rgba(99,102,241,.08)); border:1px solid rgba(61,235,255,.2); border-radius:12px; margin-bottom:10px; }
#bulk-action-bar.visible { display:flex; }
.adm-bulk-count { font-size:13px; font-weight:700; color:#3debff; flex:1; }
.adm-bulk-btns { display:flex; gap:6px; }
.adm-bulk-btn { padding:6px 12px; font-size:12px; font-weight:600; border-radius:8px; border:1px solid; cursor:pointer; transition:background .15s; }
.adm-bulk-block { background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.3); color:rgba(239,68,68,.9); }
.adm-bulk-block:hover { background:rgba(239,68,68,.2); }
.adm-bulk-export { background:rgba(61,235,255,.08); border-color:rgba(61,235,255,.2); color:rgba(61,235,255,.9); }
.adm-bulk-export:hover { background:rgba(61,235,255,.15); }
.adm-bulk-cancel { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); color:rgba(255,255,255,.5); padding:6px 10px; }

/* ===== Users toolbar ===== */
.adm-users-toolbar { display:flex; align-items:center; justify-content:space-between; padding:6px 4px 10px; }
.adm-selall-wrap { gap:8px; }
.adm-selall-label { font-size:12px; color:rgba(255,255,255,.4); }

/* ===== User rows (card list) ===== */
.adm-user-list { display:flex; flex-direction:column; gap:6px; }
.adm-user-row { display:flex; align-items:center; gap:10px; padding:10px 12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:12px; transition:background .15s,border-color .15s; cursor:default; }
.adm-user-row:hover { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12); }
.adm-user-row.adm-row-selected { background:rgba(61,235,255,.08); border-color:rgba(61,235,255,.25); }
.adm-user-row.adm-user-blocked { opacity:.6; }
.adm-row-cb { flex-shrink:0; }
.adm-user-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; color:#fff; flex-shrink:0; letter-spacing:0; }
.adm-user-info { flex:1; min-width:0; cursor:pointer; }
.adm-user-name { font-size:13px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adm-user-tid { font-size:11px; color:rgba(255,255,255,.38); margin-top:2px; font-variant-numeric:tabular-nums; }
.adm-star { color:#f59e0b; font-size:11px; margin-left:4px; }
.adm-blocked-badge { font-size:11px; margin-left:4px; }

/* ===== Block/unblock buttons ===== */
.adm-user-action-btn { padding:6px 11px; font-size:11px; font-weight:600; border-radius:8px; border:1px solid; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:background .15s; }
.adm-block-btn { background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.3); color:rgba(239,68,68,.9); }
.adm-block-btn:hover { background:rgba(239,68,68,.22); }
.adm-unblock-btn { background:rgba(74,222,128,.1); border-color:rgba(74,222,128,.3); color:rgba(74,222,128,.9); }
.adm-unblock-btn:hover { background:rgba(74,222,128,.2); }

/* ===== Custom checkbox ===== */
.adm-cb-wrap { display:inline-flex; align-items:center; cursor:pointer; }
.adm-cb-wrap input[type=checkbox] { position:absolute; opacity:0; width:0; height:0; }
.adm-cb-box { width:18px; height:18px; border-radius:5px; border:2px solid rgba(255,255,255,.2); background:rgba(255,255,255,.04); display:flex; align-items:center; justify-content:center; transition:background .15s,border-color .15s; flex-shrink:0; }
.adm-cb-wrap input[type=checkbox]:checked + .adm-cb-box { background:#3debff; border-color:#3debff; }
.adm-cb-wrap input[type=checkbox]:checked + .adm-cb-box::after { content:''; display:block; width:5px; height:9px; border:2px solid #000; border-top:none; border-left:none; transform:rotate(45deg) translateY(-1px); }

/* ===== In-app confirm modal ===== */
#adm-confirm-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; z-index:9999; padding:20px; backdrop-filter:blur(4px); }
.adm-confirm-modal { background:#1a2332; border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:24px 20px 18px; max-width:320px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.adm-confirm-msg { font-size:15px; color:#fff; line-height:1.5; margin-bottom:20px; text-align:center; }
.adm-confirm-btns { display:flex; gap:10px; }
.adm-confirm-cancel-btn { flex:1; padding:11px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:rgba(255,255,255,.7); font-size:14px; font-weight:600; cursor:pointer; transition:background .15s; }
.adm-confirm-cancel-btn:hover { background:rgba(255,255,255,.1); }
.adm-confirm-ok { flex:1; padding:11px; border-radius:10px; border:none; background:rgba(61,235,255,.15); color:#3debff; font-size:14px; font-weight:700; cursor:pointer; transition:background .15s; }
.adm-confirm-ok:hover { background:rgba(61,235,255,.25); }
.adm-confirm-danger { flex:1; padding:11px; border-radius:10px; border:none; background:rgba(239,68,68,.15); color:rgba(239,68,68,.95); font-size:14px; font-weight:700; cursor:pointer; transition:background .15s; }
.adm-confirm-danger:hover { background:rgba(239,68,68,.25); }

/* ===== ADMIN USER & ORDER DETAIL — PREMIUM REDESIGN ===== */

/* ── User hero card ── */
.adm-user-hero {
  background: linear-gradient(145deg, rgba(99,102,241,.07) 0%, rgba(61,235,255,.05) 100%);
  border: 1px solid rgba(61,235,255,.1);
  border-radius: 20px;
  padding: 24px 20px 18px;
  text-align: center;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
.adm-user-hero::before {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(61,235,255,.07) 0%, transparent 70%);
  pointer-events: none;
}
.adm-user-hero-avatar {
  width: 76px; height: 76px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 800; color: #fff;
  margin: 0 auto 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 3px rgba(255,255,255,.08);
}
.adm-user-hero-name {
  font-size: 20px; font-weight: 700; color: #fff;
  margin-bottom: 8px; letter-spacing: -.3px;
}
.adm-user-hero-badges {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px;
}
.adm-hero-badge {
  padding: 3px 11px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .2px;
}
.adm-hero-badge--active  { background: rgba(34,197,94,.14);  color: rgba(34,197,94,.95);  border: 1px solid rgba(34,197,94,.2); }
.adm-hero-badge--blocked { background: rgba(239,68,68,.14);  color: rgba(239,68,68,.95);  border: 1px solid rgba(239,68,68,.2); }
.adm-hero-badge--admin   { background: rgba(245,158,11,.14); color: rgba(245,158,11,.95); border: 1px solid rgba(245,158,11,.2); }
.adm-user-hero-stats {
  display: flex;
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
}
.adm-hero-stat { flex: 1; padding: 10px 8px; }
.adm-hero-stat + .adm-hero-stat { border-left: 1px solid rgba(255,255,255,.06); }
.adm-hero-stat-val { font-size: 16px; font-weight: 700; color: #3debff; line-height: 1.2; }
.adm-hero-stat-label { font-size: 10px; color: rgba(255,255,255,.38); margin-top: 2px; text-transform: uppercase; letter-spacing: .5px; }

/* ── Detail info card ── */
.adm-detail-card {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: 0 2px 16px rgba(0,0,0,.18);
}
.adm-detail-card-hdr {
  padding: 9px 14px 8px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: rgba(255,255,255,.28);
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.015);
}
.adm-detail-row {
  display: flex; justify-content: space-between;
  align-items: center; padding: 8px 14px; gap: 12px;
  transition: background .12s;
}
.adm-detail-row:hover { background: rgba(255,255,255,.02); }
.adm-detail-row + .adm-detail-row { border-top: 1px solid rgba(255,255,255,.035); }
.adm-detail-lbl { font-size: 12px; color: rgba(255,255,255,.38); flex-shrink: 0; font-weight: 500; }
.adm-detail-val { font-size: 12px; color: rgba(255,255,255,.88); text-align: right; word-break: break-all; font-weight: 500; }
.adm-detail-val code {
  font-size: 11px; background: rgba(255,255,255,.08); padding: 3px 7px;
  border-radius: 7px; font-family: monospace; letter-spacing: .3px;
  border: 1px solid rgba(255,255,255,.07);
}
.adm-detail-val--danger { color: rgba(239,68,68,.9) !important; }
.adm-detail-val--accent { color: #3debff !important; }

/* ── Hero action button (block / unblock) ── */
.adm-action-hero {
  width: 100%; padding: 13px; border-radius: 14px; border: none;
  font-size: 14px; font-weight: 700; cursor: pointer; margin-bottom: 16px;
  transition: opacity .15s, transform .1s; letter-spacing: .1px;
}
.adm-action-hero:active { opacity: .75; transform: scale(.98); }
.adm-action-hero--block {
  background: linear-gradient(135deg, rgba(239,68,68,.18), rgba(239,68,68,.1));
  border: 1px solid rgba(239,68,68,.28); color: rgba(239,68,68,.95);
}
.adm-action-hero--unblock {
  background: linear-gradient(135deg, rgba(34,197,94,.15), rgba(34,197,94,.08));
  border: 1px solid rgba(34,197,94,.28); color: rgba(34,197,94,.95);
}

/* ── Orders section header ── */
.adm-list-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin: 14px 0 8px;
}
.adm-list-hdr-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; color: rgba(255,255,255,.35);
}
.adm-list-hdr-count {
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.06); padding: 2px 9px; border-radius: 20px;
}

/* ── Order list items (user detail view) ── */
.adm-order-item {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px; padding: 12px 14px; cursor: pointer;
  transition: background .15s, border-color .15s;
  display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
}
.adm-order-item:active, .adm-order-item:hover { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.12); }
.adm-order-item-icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.adm-order-item-body { flex: 1; min-width: 0; }
.adm-order-item-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.adm-order-item-cat { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.8); }
.adm-order-item-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.adm-order-item-date { font-size: 11px; color: rgba(255,255,255,.32); }
.adm-order-item-price { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.55); }
.adm-order-item-recip { font-size: 11px; color: rgba(255,255,255,.38); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Order detail hero (amount + status) ── */
.adm-order-hero {
  background: linear-gradient(145deg, rgba(61,235,255,.06), rgba(99,102,241,.06));
  border: 1px solid rgba(61,235,255,.1);
  border-radius: 20px; padding: 20px; text-align: center; margin-bottom: 12px;
}
.adm-order-hero-amount { font-size: 32px; font-weight: 800; color: #fff; letter-spacing: -1px; }
.adm-order-hero-cat { font-size: 14px; color: rgba(255,255,255,.45); margin-top: 4px; margin-bottom: 12px; }
.adm-order-hero-status { display: inline-flex; }

/* ── Admin Orders page (renderAdminOrders) ── */
.ao-wrap { padding: 0 0 10px; }
.ao-header { display: flex; justify-content: space-between; align-items: center; padding: 4px 0 10px; }
.ao-header-left { display: flex; align-items: center; gap: 8px; }
.ao-total-badge {
  background: rgba(61,235,255,.1); border: 1px solid rgba(61,235,255,.2);
  color: var(--adm-accent); font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
}
.ao-csv-btn {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; color: rgba(255,255,255,.7);
  font-size: 12px; font-weight: 600; padding: 7px 12px;
  cursor: pointer; transition: background .15s, border-color .15s; white-space: nowrap;
}
.ao-csv-btn:active { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
.ao-chips-scroll {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-bottom: 4px;
}
.ao-chips-scroll::-webkit-scrollbar { display: none; }
.ao-date-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding-bottom: 2px; }
.ao-date-input { flex: 1; min-width: 0; padding: 7px 10px !important; font-size: 12px !important; }
.ao-date-sep { color: rgba(255,255,255,.3); font-size: 14px; flex-shrink: 0; }
.ao-apply-btn { flex-shrink: 0; padding: 6px 12px; font-size: 13px; }
.ao-order-id { font-weight: 400; color: rgba(255,255,255,.32); font-size: 11px; }
.ao-order-amount { font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
.ao-filter-toggle {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; color: rgba(255,255,255,.6);
  font-size: 13px; padding: 7px 10px; cursor: pointer;
  transition: background .15s, border-color .15s; position: relative;
}
.ao-filter-toggle.active { background: rgba(61,235,255,.1); border-color: rgba(61,235,255,.3); color: var(--adm-accent); }
.ao-filter-dot {
  position: absolute; top: 4px; right: 4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--adm-accent); pointer-events: none;
}
.ao-filter-panel { padding-bottom: 8px; }
.ao-search-row { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.ao-search-input { flex: 1; min-width: 0; padding: 9px 12px !important; font-size: 13px !important; }
.ao-selects-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.ao-select { font-size: 12px !important; padding: 8px 10px !important; }

/* ═══════════════════════════════════════════════════════
   SETTINGS SCREEN — premium redesign
   ═══════════════════════════════════════════════════════ */
#screen-settings {
  padding: 12px 14px 32px;
}

/* Card becomes just a transparent wrapper — rows become individual cards */
#screen-settings .profile-card {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Each row is its own premium card */
#screen-settings .profile-setting {
  background: linear-gradient(135deg, rgba(255,255,255,.065) 0%, rgba(255,255,255,.03) 100%);
  border: 1px solid rgba(255,255,255,.10) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
  padding: 15px 18px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 12px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.07);
  transition: border-color .15s, background .15s;
  position: relative;
  overflow: hidden;
}
#screen-settings .profile-setting::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  pointer-events: none;
}

/* Sub-settings — slightly indented, connected visually */
#screen-settings .profile-setting--sub {
  border-radius: 12px !important;
  padding: 13px 18px !important;
  margin-left: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-left: 2px solid rgba(61,235,255,.28) !important;
  box-shadow: none;
}

/* Row labels */
#screen-settings .profile-setting .label {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,.88) !important;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Sub-label slightly muted */
#screen-settings .profile-setting--sub .label {
  font-size: 14px !important;
  color: rgba(255,255,255,.65) !important;
  gap: 10px;
}

/* Icon box before each label — using ::before on label's parent via wrapper */
#screen-settings #lang-label::before    { content: '🌐'; font-size: 18px; }
#screen-settings #notif-label::before   { content: '🔔'; font-size: 18px; }
#screen-settings #notif-orders-label::before { content: '📦'; font-size: 15px; }
#screen-settings #notif-support-label::before { content: '💬'; font-size: 15px; }
#screen-settings #anim-label::before    { content: '🎬'; font-size: 18px; }
#screen-settings #theme-label::before   { content: '✨'; font-size: 18px; }

/* notif-subtypes gap */
#screen-settings #notif-subtypes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: -2px;
}

/* Language buttons */
#screen-settings .lang-btn {
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.5) !important;
  transition: all .15s;
}
#screen-settings .lang-btn.active {
  background: linear-gradient(135deg, rgba(61,235,255,.25), rgba(37,99,235,.35)) !important;
  border-color: rgba(61,235,255,.55) !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(61,235,255,.22), inset 0 1px 0 rgba(255,255,255,.14) !important;
}

/* Toggle switch — more premium */
#screen-settings .toggle-switch {
  width: 46px; height: 26px;
  border-radius: 13px;
  background: rgba(255,255,255,.12) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
}
#screen-settings .toggle-switch.active {
  background: linear-gradient(180deg, #4db8ff 0%, #1a7de8 100%) !important;
  box-shadow: 0 0 14px rgba(61,163,255,.38), inset 0 1px 0 rgba(255,255,255,.20) !important;
}
#screen-settings .toggle-switch .knob {
  width: 20px; height: 20px;
  top: 3px; left: 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.08);
}
#screen-settings .toggle-switch.active .knob {
  left: 23px;
}
#screen-settings .theme-toggle-switch.active {
  background: linear-gradient(180deg, #f8c950 0%, #e08a10 100%) !important;
  box-shadow: 0 0 14px rgba(248,201,80,.38), inset 0 1px 0 rgba(255,255,255,.20) !important;
}

/* Fix: lang label overflow */
#screen-settings #lang-label {
  font-size: 13px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
  gap: 8px;
}
#screen-settings .lang-selector { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════
   SETTINGS SCREEN — light theme overrides
   ═══════════════════════════════════════════════════════ */
body.theme-light #screen-settings .profile-setting {
  background: rgba(255,255,255,.85) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
body.theme-light #screen-settings .profile-setting::before {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.04), transparent) !important;
}
body.theme-light #screen-settings .profile-setting--sub {
  background: rgba(248,250,252,.9) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-left: 2px solid rgba(37,99,235,.35) !important;
}
body.theme-light #screen-settings .profile-setting .label {
  color: rgba(15,23,42,.85) !important;
}
body.theme-light #screen-settings .profile-setting--sub .label {
  color: rgba(15,23,42,.55) !important;
}

/* Language buttons — light */
body.theme-light #screen-settings .lang-btn {
  background: rgba(0,0,0,.05) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  color: rgba(15,23,42,.45) !important;
}
body.theme-light #screen-settings .lang-btn.active {
  background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(37,99,235,.26)) !important;
  border-color: rgba(37,99,235,.45) !important;
  color: #1d4ed8 !important;
  box-shadow: 0 0 12px rgba(37,99,235,.15), inset 0 1px 0 rgba(255,255,255,.5) !important;
}

/* Toggles — light */
body.theme-light #screen-settings .toggle-switch {
  background: rgba(0,0,0,.13) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.15) !important;
}
body.theme-light #screen-settings .toggle-switch.active {
  background: linear-gradient(180deg, #4db8ff 0%, #1a7de8 100%) !important;
  box-shadow: 0 0 12px rgba(26,125,232,.28), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
body.theme-light #screen-settings .toggle-switch .knob {
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.20) !important;
}
body.theme-light #screen-settings .theme-toggle-switch.active {
  background: linear-gradient(180deg, #f8c950 0%, #e08a10 100%) !important;
  box-shadow: 0 0 12px rgba(224,138,16,.28) !important;
}

/* lang label fix in light */
body.theme-light #screen-settings #lang-label {
  color: rgba(15,23,42,.85) !important;
}

/* ═══════════════════════════════════════════════════════
   REFERRAL PAGE — light theme overrides (extended)
   ═══════════════════════════════════════════════════════ */
body.theme-light .ref-top-title {
  color: rgba(15,10,60,.88) !important;
}
body.theme-light .ref-top-sub {
  color: rgba(15,10,60,.44) !important;
}
body.theme-light .ref-top-card {
  background: linear-gradient(155deg,
    rgba(99,102,241,.12) 0%,
    rgba(255,255,255,.80) 50%,
    rgba(167,139,250,.10) 100%) !important;
  border-color: rgba(99,102,241,.20) !important;
  box-shadow: 0 4px 20px rgba(99,102,241,.10) !important;
}
body.theme-light .ref-wd-sep {
  color: rgba(0,0,0,.18) !important;
}
body.theme-light .ref-section-card {
  background: rgba(255,255,255,.90) !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}
body.theme-light .ref-link-card {
  background: rgba(255,255,255,.90) !important;
  border-color: rgba(0,0,0,.08) !important;
}
/* Badges in light mode */
body.theme-light .ref-wd-badge--pending {
  background: rgba(217,119,6,.10) !important;
  color: #b45309 !important;
  border-color: rgba(180,83,9,.22) !important;
}
body.theme-light .ref-wd-badge--approved {
  background: rgba(22,163,74,.10) !important;
  color: #16a34a !important;
  border-color: rgba(22,163,74,.22) !important;
}
body.theme-light .ref-wd-badge--rejected {
  background: rgba(220,38,38,.08) !important;
  color: #dc2626 !important;
  border-color: rgba(220,38,38,.20) !important;
}
/* Share/Withdraw buttons stay vibrant */
body.theme-light .ref-main-btn--share {
  box-shadow: 0 4px 18px rgba(99,102,241,.28) !important;
}
body.theme-light .ref-main-btn--withdraw {
  box-shadow: 0 4px 18px rgba(22,163,74,.22) !important;
}
/* Section title */
body.theme-light .ref-section-title {
  color: rgba(0,0,0,.38) !important;
}
/* Показать ещё */
body.theme-light .ref-wd-more {
  color: rgba(99,102,241,.65) !important;
  border-top-color: rgba(0,0,0,.05) !important;
}
/* Metrics */
body.theme-light .ref-metric-val--purple { color: #5b21b6 !important; }
body.theme-light .ref-metric-val--gold   { color: #d97706 !important; }
body.theme-light .ref-metric-lbl         { color: rgba(0,0,0,.35) !important; }
body.theme-light .ref-metric + .ref-metric { border-left-color: rgba(0,0,0,.08) !important; }
body.theme-light .ref-top-divider { background: rgba(0,0,0,.07) !important; }

/* ═══════════════════════════════════════════════════════
   SUPPORT EMPTY STATE — light theme overrides
   ═══════════════════════════════════════════════════════ */
body.theme-light .empty-state-icon {
  background: linear-gradient(145deg, rgba(37,99,235,.12), rgba(61,235,255,.10)) !important;
  border-color: rgba(37,99,235,.18) !important;
  box-shadow: 0 0 24px rgba(37,99,235,.10), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
body.theme-light .empty-state-title {
  color: rgba(15,23,42,.88) !important;
}
body.theme-light .empty-state-desc {
  color: rgba(15,23,42,.42) !important;
}
body.theme-light .empty-state-btn {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(37,99,235,.30), 0 2px 6px rgba(37,99,235,.18) !important;
}
/* FAQ cards — light */
body.theme-light #screen-support .tickets-faq-card {
  background: rgba(255,255,255,.90) !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.06) !important;
}
body.theme-light #screen-support .tickets-faq-card:active {
  background: rgba(37,99,235,.06) !important;
  border-color: rgba(37,99,235,.18) !important;
}
body.theme-light #screen-support .tfc-icon {
  background: linear-gradient(145deg, rgba(37,99,235,.12), rgba(61,235,255,.10)) !important;
  border-color: rgba(37,99,235,.18) !important;
}
body.theme-light #screen-support .tfc-title {
  color: rgba(15,23,42,.88) !important;
}
body.theme-light #screen-support .tfc-sub {
  color: rgba(15,23,42,.42) !important;
}
body.theme-light #screen-support .tfc-arrow {
  color: rgba(37,99,235,.65) !important;
}

/* ═══════════════════════════════════════════════════════
   ORDER DETAIL — light theme overrides
   ═══════════════════════════════════════════════════════ */
/* Action buttons (Leave review, Repeat order) */
body.theme-light #order-detail-content .new-ticket-btn {
  background: linear-gradient(135deg, rgba(37,99,235,.10) 0%, rgba(37,99,235,.16) 100%) !important;
  color: #2563eb !important;
  border: 1px solid rgba(37,99,235,.22) !important;
  box-shadow: 0 2px 8px rgba(37,99,235,.10) !important;
}
body.theme-light #order-detail-content .new-ticket-btn:hover {
  background: linear-gradient(135deg, rgba(37,99,235,.16) 0%, rgba(37,99,235,.24) 100%) !important;
  border-color: rgba(37,99,235,.35) !important;
}

/* Cancel button */
body.theme-light .cancel-order-btn {
  background: rgba(220,38,38,.06) !important;
  border-color: rgba(220,38,38,.18) !important;
  color: #dc2626 !important;
  box-shadow: none !important;
}
body.theme-light .cancel-order-btn:hover {
  background: rgba(220,38,38,.10) !important;
}

/* Delivery steps */
body.theme-light .ds-step {
  color: rgba(15,23,42,.35) !important;
}
body.theme-light .ds-step.ds-done {
  color: rgba(15,23,42,.75) !important;
}
body.theme-light .ds-step.ds-active {
  color: #2563eb !important;
}
body.theme-light .ds-line {
  background: rgba(0,0,0,.10) !important;
}
body.theme-light .ds-line.ds-done {
  background: rgba(15,23,42,.28) !important;
}

/* Summary total value in order detail */
body.theme-light #order-detail-content .summary-total .value {
  color: #1c1c1e !important;
}
body.theme-light #order-detail-content .summary-row .value {
  color: #1c1c1e !important;
}

/* Refund pending notice */
body.theme-light #order-detail-content [style*="rgba(250,200,0"] {
  background: rgba(180,83,9,.06) !important;
  border-color: rgba(180,83,9,.18) !important;
}

/* ═══════════════════════════════════════════════════════
   ORDER DETAIL — premium redesign
   ═══════════════════════════════════════════════════════ */
#order-detail-content {
  padding: 4px 0 24px;
}

/* Main summary card */
#order-detail-content .summary-card {
  background:
    linear-gradient(160deg,
      rgba(61,235,255,.10) 0%,
      rgba(10,18,35,.85) 45%,
      rgba(37,99,235,.10) 100%) !important;
  border: 1px solid rgba(61,235,255,.18) !important;
  border-radius: 20px !important;
  padding: 20px !important;
  box-shadow:
    0 12px 40px rgba(0,0,0,.35),
    0 2px 8px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 40px rgba(61,235,255,.03) !important;
  position: relative;
  overflow: hidden;
}
#order-detail-content .summary-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(61,235,255,.35) 40%, rgba(167,139,250,.25) 70%, transparent 100%);
  pointer-events: none;
}

/* Rows */
#order-detail-content .summary-row {
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.055) !important;
  font-size: 14px;
}
#order-detail-content .summary-row:last-child { border-bottom: none !important; }
#order-detail-content .summary-row .label {
  color: rgba(255,255,255,.40) !important;
  font-size: 13px;
  font-weight: 500;
}
#order-detail-content .summary-row .value {
  color: rgba(255,255,255,.88) !important;
  font-weight: 600;
  font-size: 14px;
}

/* ID row — monospace styled */
#order-detail-content .order-id-row span[style*="monospace"] {
  font-family: 'SF Mono','Fira Code',monospace;
  font-size: 13px !important;
  color: rgba(61,235,255,.8) !important;
  letter-spacing: .5px;
}

/* Total row — hero number */
#order-detail-content .summary-total {
  border-top: 1px solid rgba(61,235,255,.14) !important;
  margin-top: 4px;
  padding-top: 14px;
}
#order-detail-content .summary-total .label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.55) !important;
}
#order-detail-content .summary-total .value {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -.5px;
  text-shadow: 0 0 20px rgba(61,235,255,.35);
}

/* Action buttons — Leave review */
#order-detail-content .new-ticket-btn {
  background: linear-gradient(135deg, rgba(61,235,255,.12) 0%, rgba(37,99,235,.18) 100%) !important;
  border: 1px solid rgba(61,235,255,.25) !important;
  border-radius: 14px !important;
  color: rgba(255,255,255,.88) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 14px !important;
  box-shadow: 0 2px 12px rgba(61,235,255,.12), inset 0 1px 0 rgba(255,255,255,.08) !important;
  transition: all .15s;
  position: relative;
  overflow: hidden;
}
#order-detail-content .new-ticket-btn:hover {
  background: linear-gradient(135deg, rgba(61,235,255,.18) 0%, rgba(37,99,235,.26) 100%) !important;
  border-color: rgba(61,235,255,.40) !important;
  box-shadow: 0 4px 18px rgba(61,235,255,.20) !important;
}

/* Cancel / Support button */
#order-detail-content .cancel-order-btn {
  background: rgba(239,68,68,.08) !important;
  border: 1px solid rgba(239,68,68,.22) !important;
  border-radius: 14px !important;
  color: #f87171 !important;
  font-weight: 600 !important;
  padding: 13px !important;
  box-shadow: none !important;
}
#order-detail-content .cancel-order-btn:hover {
  background: rgba(239,68,68,.14) !important;
  border-color: rgba(239,68,68,.35) !important;
}

/* Delivery steps — premium */
#order-detail-content .delivery-steps {
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 14px 12px;
  margin-top: 14px !important;
}
#order-detail-content .ds-step {
  color: rgba(255,255,255,.28) !important;
  font-size: 11px;
  font-weight: 500;
  gap: 5px;
}
#order-detail-content .ds-step.ds-done {
  color: rgba(255,255,255,.70) !important;
}
#order-detail-content .ds-step.ds-active {
  color: #3DEBFF !important;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(61,235,255,.4);
}
#order-detail-content .ds-line {
  background: rgba(255,255,255,.08) !important;
}
#order-detail-content .ds-line.ds-done {
  background: rgba(61,235,255,.30) !important;
}

/* ── Light theme override for order detail ── */
body.theme-light #order-detail-content .summary-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.09) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06) !important;
}
body.theme-light #order-detail-content .summary-card::before {
  background: linear-gradient(90deg, transparent, rgba(37,99,235,.12), transparent) !important;
}
body.theme-light #order-detail-content .summary-row { border-bottom-color: rgba(0,0,0,.06) !important; }
body.theme-light #order-detail-content .summary-row .label { color: rgba(15,23,42,.42) !important; }
body.theme-light #order-detail-content .summary-row .value { color: rgba(15,23,42,.88) !important; }
body.theme-light #order-detail-content .order-id-row span[style*="monospace"] { color: #2563eb !important; }
body.theme-light #order-detail-content .summary-total { border-top-color: rgba(0,0,0,.07) !important; }
body.theme-light #order-detail-content .summary-total .label { color: rgba(15,23,42,.45) !important; }
body.theme-light #order-detail-content .summary-total .value { color: #0f172a !important; text-shadow: none !important; }
body.theme-light #order-detail-content .new-ticket-btn {
  background: linear-gradient(135deg, rgba(37,99,235,.08) 0%, rgba(37,99,235,.14) 100%) !important;
  border-color: rgba(37,99,235,.22) !important;
  color: #1d4ed8 !important;
  box-shadow: 0 2px 8px rgba(37,99,235,.08) !important;
}
body.theme-light #order-detail-content .cancel-order-btn {
  background: rgba(220,38,38,.05) !important;
  border-color: rgba(220,38,38,.18) !important;
  color: #dc2626 !important;
}
body.theme-light #order-detail-content .delivery-steps {
  background: rgba(255,255,255,.90) !important;
  border-color: rgba(0,0,0,.08) !important;
}
body.theme-light #order-detail-content .ds-step { color: rgba(15,23,42,.30) !important; }
body.theme-light #order-detail-content .ds-step.ds-done { color: rgba(15,23,42,.65) !important; }
body.theme-light #order-detail-content .ds-step.ds-active { color: #2563eb !important; text-shadow: none !important; }
body.theme-light #order-detail-content .ds-line { background: rgba(0,0,0,.09) !important; }
body.theme-light #order-detail-content .ds-line.ds-done { background: rgba(37,99,235,.30) !important; }

/* ═══════════════════════════════════════════════
   ORDER DETAIL — Premium od-* redesign
   ═══════════════════════════════════════════════ */
.od-wrap{display:flex;flex-direction:column;gap:12px;padding:0 0 24px}
.od-card{
  background:linear-gradient(145deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.03) 100%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  padding:20px 18px 18px;
  position:relative;
  overflow:hidden;
}
.od-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(139,92,246,.10) 0%,transparent 55%,rgba(59,130,246,.06) 100%);
  pointer-events:none;border-radius:inherit;
}
.od-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}
.od-id-row{display:flex;align-items:center;gap:7px;min-width:0}
.od-id-val{
  font-family:'SF Mono',ui-monospace,SFMono-Regular,monospace;
  font-size:13px;font-weight:700;letter-spacing:.06em;
  color:rgba(139,92,246,.9);
}
.od-copy-btn{
  background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.20);
  border-radius:8px;padding:3px 7px;font-size:13px;line-height:1;
  cursor:pointer;color:inherit;transition:background .15s;flex-shrink:0;
}
.od-copy-btn:active{background:rgba(139,92,246,.22)}
.od-product-name{
  font-size:20px;font-weight:800;letter-spacing:-.01em;
  color:#fff;line-height:1.25;margin-bottom:14px;
}
.od-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);margin:0 0 14px}
.od-total-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:16px}
.od-total-lbl{font-size:12px;font-weight:500;color:rgba(255,255,255,.40);text-transform:uppercase;letter-spacing:.06em}
.od-total-val{
  font-size:26px;font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(135deg,#a78bfa 0%,#818cf8 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.od-rows{display:flex;flex-direction:column;gap:0;margin-bottom:2px}
.od-row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06);
}
.od-row:last-child{border-bottom:none}
.od-lbl{font-size:12px;color:rgba(255,255,255,.38);white-space:nowrap;flex-shrink:0;padding-top:1px}
.od-val{font-size:13px;font-weight:600;color:rgba(255,255,255,.82);text-align:right;word-break:break-all}
/* Delivery steps inline */
.od-steps-wrap{
  margin-top:16px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
}
.od-steps-title{font-size:11px;font-weight:700;color:rgba(255,255,255,.30);text-transform:uppercase;letter-spacing:.09em;margin-bottom:12px}
.od-stepper{display:flex;align-items:flex-start;gap:0}
.od-step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative}
.od-step-dot{
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;
  background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.25);
  transition:all .2s;flex-shrink:0;
}
.od-step.done .od-step-dot{
  background:linear-gradient(135deg,#7c3aed,#4f46e5);
  border-color:transparent;color:#fff;font-size:11px;
  box-shadow:0 2px 8px rgba(124,58,237,.45);
}
.od-step.active .od-step-dot{
  background:rgba(139,92,246,.18);
  border-color:rgba(139,92,246,.70);color:rgba(139,92,246,.95);
  box-shadow:0 0 12px rgba(139,92,246,.35);
  animation:od-pulse 1.8s infinite;
}
@keyframes od-pulse{0%,100%{box-shadow:0 0 10px rgba(139,92,246,.35)}50%{box-shadow:0 0 20px rgba(139,92,246,.60)}}
.od-step-lbl{font-size:10px;font-weight:600;margin-top:5px;text-align:center;color:rgba(255,255,255,.28);line-height:1.2}
.od-step.done .od-step-lbl{color:rgba(255,255,255,.55)}
.od-step.active .od-step-lbl{color:rgba(139,92,246,.90)}
.od-step-ts{font-size:9px;color:rgba(255,255,255,.28);margin-top:2px;text-align:center;line-height:1.2}
.od-step.done .od-step-ts{color:rgba(255,255,255,.40)}
.od-step-line{
  flex:1;height:2px;margin-top:11px;
  background:rgba(255,255,255,.08);border-radius:2px;
}
.od-step-line.done{background:linear-gradient(90deg,#7c3aed,#4f46e5)}
/* Notice block */
.od-notice{
  margin-top:14px;padding:10px 13px;border-radius:12px;
  font-size:12px;line-height:1.5;font-weight:500;
}
.od-notice--warn{
  background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.20);
  color:rgba(245,158,11,.90);
}
/* Action buttons */
.od-actions{display:flex;flex-direction:column;gap:9px}
.od-btn{
  width:100%;padding:14px 18px;border-radius:16px;
  font-size:15px;font-weight:700;letter-spacing:.01em;
  cursor:pointer;border:1px solid transparent;
  transition:opacity .15s,transform .1s;line-height:1;
  text-align:center;text-decoration:none;display:block;
}
.od-btn:active{opacity:.80;transform:scale(.98)}
.od-btn--primary{
  background:linear-gradient(135deg,#7c3aed 0%,#4f46e5 100%);
  color:#fff;border-color:rgba(124,58,237,.30);
  box-shadow:0 4px 18px rgba(124,58,237,.35);
}
.od-btn--secondary{
  background:rgba(59,130,246,.10);border-color:rgba(59,130,246,.22);
  color:#93c5fd;
}
.od-btn--danger{
  background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.22);
  color:#f87171;
}
.od-btn--support{
  background:rgba(59,130,246,.10);border-color:rgba(59,130,246,.22);
  color:#93c5fd;
}
.od-btn--pay{
  background:linear-gradient(135deg,#059669 0%,#0d9488 100%);
  color:#fff;border-color:rgba(5,150,105,.30);
  box-shadow:0 4px 18px rgba(5,150,105,.30);
}
/* Light theme overrides */
body.theme-light .od-card{
  background:linear-gradient(145deg,#fff 0%,rgba(248,250,252,.98) 100%) !important;
  border-color:rgba(37,99,235,.12) !important;
}
body.theme-light .od-card::before{
  background:linear-gradient(135deg,rgba(37,99,235,.05) 0%,transparent 55%,rgba(99,102,241,.04) 100%) !important;
}
body.theme-light .od-id-val{color:#5b21b6 !important}
body.theme-light .od-copy-btn{background:rgba(91,33,182,.08) !important;border-color:rgba(91,33,182,.16) !important;color:#5b21b6 !important}
body.theme-light .od-product-name{color:#0f172a !important}
body.theme-light .od-divider{background:linear-gradient(90deg,transparent,rgba(0,0,0,.08),transparent) !important}
body.theme-light .od-total-lbl{color:rgba(15,23,42,.38) !important}
body.theme-light .od-total-val{background:linear-gradient(135deg,#6d28d9 0%,#4338ca 100%) !important;-webkit-background-clip:text !important;background-clip:text !important;}
body.theme-light .od-row{border-bottom-color:rgba(0,0,0,.06) !important}
body.theme-light .od-lbl{color:rgba(15,23,42,.40) !important}
body.theme-light .od-val{color:rgba(15,23,42,.86) !important}
body.theme-light .od-steps-wrap{border-top-color:rgba(0,0,0,.06) !important}
body.theme-light .od-steps-title{color:rgba(15,23,42,.28) !important}
body.theme-light .od-step-dot{background:rgba(0,0,0,.05) !important;border-color:rgba(0,0,0,.10) !important;color:rgba(15,23,42,.25) !important}
body.theme-light .od-step.done .od-step-dot{background:linear-gradient(135deg,#7c3aed,#4338ca) !important;border-color:transparent !important;color:#fff !important}
body.theme-light .od-step.active .od-step-dot{background:rgba(109,40,217,.10) !important;border-color:rgba(109,40,217,.55) !important;color:#6d28d9 !important}
body.theme-light .od-step-lbl{color:rgba(15,23,42,.28) !important}
body.theme-light .od-step.done .od-step-lbl{color:rgba(15,23,42,.55) !important}
body.theme-light .od-step.active .od-step-lbl{color:#6d28d9 !important}
body.theme-light .od-step-ts{color:rgba(15,23,42,.28) !important}
body.theme-light .od-step.done .od-step-ts{color:rgba(15,23,42,.42) !important}
body.theme-light .od-step-line{background:rgba(0,0,0,.07) !important}
body.theme-light .od-step-line.done{background:linear-gradient(90deg,#7c3aed,#4338ca) !important}
body.theme-light .od-notice--warn{background:rgba(245,158,11,.08) !important;border-color:rgba(245,158,11,.18) !important;color:rgba(146,64,14,.85) !important}
body.theme-light .od-btn--secondary{background:rgba(37,99,235,.06) !important;border-color:rgba(37,99,235,.16) !important;color:#1d4ed8 !important}
body.theme-light .od-btn--danger{background:rgba(220,38,38,.05) !important;border-color:rgba(220,38,38,.16) !important;color:#dc2626 !important}
body.theme-light .od-btn--support{background:rgba(37,99,235,.06) !important;border-color:rgba(37,99,235,.16) !important;color:#1d4ed8 !important}

/* ── Animations disabled (user preference) ── */
/* Base rule — dark theme and general elements (specificity 0,1,1/0,1,2) */
body.no-animations *,
body.no-animations *::before,
body.no-animations *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}
/* Light theme — higher specificity (0,2,1/0,2,2) to beat body.theme-light .class::after (0,2,2) rules */
body.no-animations.theme-light *,
body.no-animations.theme-light *::before,
body.no-animations.theme-light *::after {
  animation: none !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0ms !important;
}
/* Light theme + category screens — highest specificity (0,3,1/0,3,2) to beat body.theme-light[data-theme] .class rules */
body.no-animations.theme-light[data-theme] *,
body.no-animations.theme-light[data-theme] *::before,
body.no-animations.theme-light[data-theme] *::after {
  animation: none !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0ms !important;
}