:root {
  --bg:          #0c0e14;
  --surface:     #141721;
  --surface-2:   #1c2130;
  --surface-3:   #252b3d;
  --border:      rgba(255, 255, 255, 0.08);
  --border-hi:   rgba(46, 165, 255, 0.45);
  --primary:     #2ea5ff;
  --primary-rgb: 46, 165, 255;
  --primary-h:   #47b0ff;
  --primary-deep:#1d7cd8;
  --primary-deeper:#1852c9;
  --primary-glow:rgba(46, 165, 255, 0.35);
  --primary-dim: rgba(46, 165, 255, 0.12);
  --accent:      #38bdf8;
  --accent-rgb:  56, 189, 248;
  --accent-hi:   #e0f2fe;
  --text:        #ffffff;
  --text-2:      #e2e8f0;
  --text-muted:  #94a3b8;
  --text-dim:    #64748b;
  --success:     #22c55e;
  --success-dim: rgba(34, 197, 94, 0.16);
  --danger:      #ef4444;
  --danger-dim:  rgba(239, 68, 68, 0.16);
  --gold:        #f59e0b;
  --gold-dim:    rgba(245, 158, 11, 0.16);
  --radius:      18px;
  --radius-sm:   12px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Предотвращение зума iOS при фокусе на полях ввода (требуется >= 16px) */
input, textarea, select {
  font-size: 16px;
  touch-action: manipulation;
}

body {
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.access-pending #app,
body.system-screen-active #app {
  visibility: hidden;
}

body.system-screen-active.blocked-support-mode #app {
  visibility: visible;
}

::-webkit-scrollbar {
  width: 3px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-hi);
  border-radius: 2px;
}

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

.is-desktop #app {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
}

/* Шапка приложения */
#header {
  flex-shrink: 0;
  padding-top: max(104px, calc(var(--tg-content-safe-area-inset-top, 0px) + 12px), calc(var(--tg-safe-area-inset-top, 0px) + 54px), calc(env(safe-area-inset-top, 0px) + 54px));
  padding-right: 16px;
  padding-bottom: 12px;
  padding-left: 16px;
  background: rgba(12, 14, 20, 0.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 50;
}

.is-desktop #header {
  padding-top: 16px;
}

.user-profile-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

#header .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

#header .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#header .user-info {
  min-width: 0;
  flex: 1;
}

#header .user-name {
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

#header .user-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

#header .lang-chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 9px;
  font-weight: 700;
  font-size: 11px;
  color: var(--text-2);
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
#header .lang-chip:active {
  transform: scale(0.94);
  background: var(--primary-dim);
  color: var(--accent);
}

.header-balance {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.header-balance:active {
  transform: scale(0.96);
  background: rgba(255, 255, 255, 0.1);
}
.header-balance .balance-text {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.header-balance .balance-add-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 6px var(--primary-glow);
  padding: 0;
}

/* Страницы */
#pages {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.page {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 16px 16px calc(88px + max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px)));
  display: none;
  animation: fadeIn 0.18s ease;
  -webkit-overflow-scrolling: touch;
}

.page.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Плавающий нижний бар (Dock) */
#nav {
  position: fixed;
  bottom: calc(14px + max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px)));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 400px;
  height: 62px;
  background: rgba(20, 23, 33, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 8px;
  z-index: 100;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.4);
}

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 0;
  color: var(--text-muted);
  transition: all 0.18s;
  -webkit-tap-highlight-color: transparent;
  border-radius: 20px;
}

.nav-btn:active {
  transform: scale(0.93);
}

.nav-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.2s;
}
.nav-icon svg, .nav-icon img {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
}

.nav-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.2px;
  transition: color 0.2s;
}

.nav-btn.active .nav-icon {
  color: var(--primary);
  transform: translateY(-1px);
  filter: drop-shadow(0 2px 8px var(--primary-glow));
}
.nav-btn.active .nav-label {
  color: #fff;
  font-weight: 700;
}

body.keyboard-open #scroll-top-fab {
  display: none !important;
}
body.keyboard-open #nav {
  display: none !important;
}
body.keyboard-open .page {
  padding-bottom: calc(24px + max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px)));
}

/* Кнопка наверх */
#scroll-top-fab {
  position: fixed;
  left: 50%;
  bottom: calc(86px + max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px)));
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(28, 33, 48, 0.92);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(0.85);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 90;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
}
#scroll-top-fab.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
}
#scroll-top-fab:active {
  transform: translateX(-50%) scale(0.92);
}

/* Векторные иконки Tabler */
.tabler-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
  flex-shrink: 0;
}
.tabler-icon svg,
svg.ti {
  display: block;
  flex-shrink: 0;
}

/* Пустые состояния */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 44px 20px;
  color: var(--text-muted);
  width: 100%;
  box-sizing: border-box;
}
.empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  opacity: .4;
  color: var(--text-muted);
}
.empty-icon svg,
.empty-icon svg.ti {
  display: block;
  margin: 0 auto;
}
.empty-state p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-muted);
  text-align: center;
}

/* Карточки и блоки */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}
.card-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.card-title .tabler-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
.card-title span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* Метки полей, секций и карточки форм */
.field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.section-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin: 22px 0 10px;
}

.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

.input-wrap {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.input-wrap input {
  flex: 1;
  min-width: 0;
}

/* Карточка баланса в профиле */
.balance-card {
  background: linear-gradient(135deg, #182236 0%, #111624 100%);
  border: 1px solid rgba(var(--primary-rgb), 0.25);
  border-radius: 22px;
  padding: 22px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.balance-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(var(--primary-rgb), 0.18) 0%, transparent 60%);
}
.balance-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent);
  margin-bottom: 6px;
  position: relative;
}
.balance-amount {
  font-size: 38px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -1px;
  line-height: 1;
  position: relative;
}
.balance-amount span {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 4px;
}
.balance-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  position: relative;
}
.balance-discount {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.balance-discount .tabler-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
.balance-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  position: relative;
}

/* Кнопки */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
  padding: 12px 18px;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  line-height: 1;
}
.btn .tabler-icon,
.btn svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.btn span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.btn:active {
  transform: scale(0.97);
}
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: #fff;
  box-shadow: 0 4px 18px var(--primary-glow);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-h), var(--primary-deeper));
}
.btn-secondary {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-secondary:active {
  background: var(--surface-3);
}
.btn-danger {
  background: #ef4444;
  color: #fff;
  border: none;
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.35);
}
.btn-danger:active {
  background: #dc2626;
}
.btn-full {
  width: 100%;
}
.btn-sm {
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 10px;
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Верхняя шапка для экранов-подстраниц (Stars, Premium, Gifts, Steam) */
.subpage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.subpage-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.subpage-back-btn:active {
  transform: scale(0.95);
  background: var(--surface-3);
}

    .virtual-shop-entry{width:100%;min-height:72px;margin-bottom:14px;padding:13px 14px;display:flex;align-items:center;gap:12px;border:1px solid var(--border-hi);border-radius:16px;background:linear-gradient(135deg,var(--surface),var(--primary-dim));color:var(--text);font-family:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;}
    .virtual-shop-entry:active{transform:scale(.985);}
    .virtual-shop-entry-icon{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;background:var(--primary-dim);color:var(--accent-hi);}
    .virtual-shop-entry-icon img,.virtual-shop-entry-icon video{width:100%;height:100%;object-fit:cover;border-radius:13px;display:block;}
    .virtual-shop-entry-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px;}
    .virtual-shop-entry-title{font-size:14px;font-weight:800;}
    .virtual-shop-entry-sub{font-size:12px;line-height:1.35;color:var(--text-muted);}
    .virtual-shop-entry-arrow{display:flex;align-items:center;justify-content:center;color:var(--text-dim);flex-shrink:0;transition:transform .15s,color .15s;}
    .virtual-product-card:active .virtual-shop-entry-arrow{color:var(--accent);transform:translateX(3px);}
    .virtual-shop-head{display:flex;align-items:center;gap:11px;margin-bottom:16px;}
    .virtual-shop-back{width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-family:inherit;cursor:pointer;}
    .virtual-shop-head-title{font-size:20px;font-weight:800;letter-spacing:-0.4px;color:var(--text);line-height:1.2;}
    .virtual-shop-head-sub{font-size:12px;color:var(--text-muted);margin-top:4px;line-height:1.35;}
    .virtual-category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
    .virtual-category-card,.virtual-product-card{min-height:44px;border:1px solid var(--border);border-radius:15px;background:var(--surface);color:var(--text);font-family:inherit;cursor:pointer;overflow:hidden;text-align:left;-webkit-tap-highlight-color:transparent;}
    .virtual-category-card:active,.virtual-product-card:active{transform:scale(.985);border-color:var(--border-hi);}
    .virtual-category-banner{width:100%;height:130px;border-radius:16px;overflow:hidden;background:var(--surface);margin-bottom:14px;border:1px solid var(--border-hi);box-shadow:0 4px 16px rgba(0,0,0,.22);flex-shrink:0;}
    .virtual-category-banner img,.virtual-category-banner video{width:100%;height:100%;object-fit:cover;display:block;}
    .virtual-category-media,.virtual-product-media{width:100%;height:112px;background:transparent;display:flex;align-items:center;justify-content:center;color:var(--accent);overflow:hidden;}
    .virtual-category-media img,.virtual-category-media video,.virtual-product-media img,.virtual-product-media video{width:100%;height:100%;object-fit:cover;display:block;}
    .virtual-category-body{padding:12px;}
    .virtual-category-name{font-size:14px;font-weight:800;line-height:1.25;overflow-wrap:anywhere;}
    .virtual-category-count{font-size:11px;color:var(--text-muted);margin-top:5px;}
    .virtual-product-list{display:flex;flex-direction:column;gap:10px;}
    .virtual-product-card{display:flex;align-items:center;gap:12px;padding:12px;}
    .virtual-product-card .virtual-product-media{width:64px;height:64px;border-radius:11px;flex:0 0 auto;background:transparent;}
    .virtual-product-copy{flex:1;min-width:0;}
    .virtual-product-name{font-size:14px;font-weight:800;overflow-wrap:anywhere;}
    .virtual-product-price{font-size:14px;font-weight:800;color:var(--text);margin-top:5px;}
    .virtual-product-stock{margin-top:4px;}
    .stock-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;line-height:1;}
    .stock-badge svg{flex-shrink:0;}
    .stock-badge.in{color:var(--success);}
    .stock-badge.out{color:var(--danger);}
    .virtual-shop-pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;}
    .virtual-shop-pagination button{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;transition:all .15s;}
    .virtual-shop-pagination button:active:not(:disabled){transform:scale(.95);background:var(--surface-2);}
    .virtual-shop-pagination button:disabled{opacity:.45;cursor:default;}
    .virtual-detail-media{width:100%;height:114px;border-radius:16px;overflow:hidden;background:transparent;margin-bottom:12px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-hi);box-shadow:0 6px 20px rgba(0,0,0,.22);}
    .virtual-detail-media img,.virtual-detail-media video{display:block;width:100%;height:100%;object-fit:cover;}
    .virtual-detail-card{padding:16px 16px 18px;border:1px solid var(--border);border-radius:18px;background:var(--surface);display:flex;flex-direction:column;gap:13px;margin-bottom:28px;}
    .virtual-detail-name{font-size:18px;font-weight:800;letter-spacing:-0.3px;line-height:1.25;color:var(--text);overflow-wrap:anywhere;}
    .virtual-meta-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:11px;border-bottom:1px solid var(--border);}
    .virtual-stock-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;font-size:12px;font-weight:700;line-height:1;letter-spacing:.2px;}
    .virtual-stock-pill svg{display:block;flex-shrink:0;}
    .virtual-stock-pill.in{background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.28);color:#34d399;}
    .virtual-stock-pill.out{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.28);color:#f87171;}
    .virtual-price-badge{display:inline-flex;align-items:baseline;gap:3px;font-size:21px;font-weight:900;color:var(--accent-hi);letter-spacing:-0.4px;}
    .virtual-price-unit{font-size:12px;font-weight:500;color:var(--text-muted);}
    .virtual-detail-description{font-size:13px;line-height:1.52;color:var(--text-muted);white-space:pre-wrap;overflow-wrap:anywhere;}
    .virtual-qty-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border);}
    .virtual-qty-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
    .virtual-qty-title{font-size:13px;font-weight:700;color:var(--text);}
    .virtual-qty-hint{font-size:11.5px;color:var(--text-dim);}
    .virtual-qty-stepper{display:inline-flex;align-items:center;background:var(--surface);border:1px solid var(--border-hi);border-radius:11px;padding:3px;flex-shrink:0;gap:2px;}
    .virtual-qty-btn{width:32px;height:32px;border-radius:8px;border:none;background:var(--surface-2);color:var(--text);display:inline-flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;cursor:pointer;flex-shrink:0;transition:all .12s ease;-webkit-tap-highlight-color:transparent;}
    .virtual-qty-btn:active:not(:disabled){transform:scale(.9);background:var(--primary-dim);color:var(--accent-hi);}
    .virtual-qty-btn:disabled{opacity:.22;cursor:not-allowed;}
    .virtual-qty-num{min-width:36px;height:32px;display:inline-flex;align-items:center;justify-content:center;color:#ffffff;font-size:15px;font-weight:800;text-align:center;user-select:none;-webkit-user-select:none;}
    .virtual-summary-subrow{display:none;}
    .virtual-detail-actions{margin-top:2px;}
    .virtual-delivery-overlay{position:fixed;inset:0;z-index:12000;display:flex;align-items:flex-end;background:rgba(0,0,0,.72);opacity:0;pointer-events:none;transition:opacity .25s;}
    .virtual-delivery-overlay.open{opacity:1;pointer-events:auto;}
    .virtual-delivery-sheet{
      width:100%;max-height:88vh;overflow-y:auto;
      padding:14px 16px calc(18px + max(env(safe-area-inset-bottom),var(--tg-safe-area-inset-bottom,0px)));
      border-radius:22px 22px 0 0;border-top:1px solid var(--border-hi);background:var(--surface);
      transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
    }
    .virtual-delivery-overlay.open .virtual-delivery-sheet{transform:none;}
    .virtual-delivery-title{font-size:19px;font-weight:900;margin:10px 0 16px;overflow-wrap:anywhere;}
    .virtual-delivery-label{
      font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--text-muted);margin:12px 0 7px;
      display:flex;align-items:center;gap:6px;line-height:1;
    }
    .virtual-delivery-label .tabler-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0;}
    .virtual-delivery-label span{display:inline-flex;align-items:center;line-height:1;}
    .virtual-delivery-content,.virtual-delivery-instruction{width:100%;padding:13px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text;}
    .virtual-delivery-actions{display:flex;flex-direction:column;gap:10px;margin-top:20px;}
    #virtual-shop-content .empty-state{min-height:240px;padding:52px 20px;}
    #virtual-shop-content .empty-icon{margin-bottom:14px;color:var(--text-muted);opacity:.4;}


        .tabs{display:flex;gap:8px;background:transparent;border:none;border-radius:0;padding:0;margin-bottom:14px;}
    .tabs.reviews-open{
      margin-bottom:20px;
    }
    .tab{
      flex:1;min-height:44px;padding:10px 14px;
      display:inline-flex;align-items:center;justify-content:center;gap:7px;
      border:1px solid var(--border);border-radius:var(--radius-sm);
      font-size:13px;font-weight:700;line-height:1;cursor:pointer;
      background:var(--surface);color:var(--text-muted);
      transition:all .18s;font-family:inherit;-webkit-tap-highlight-color:transparent;
    }
    .tab .tabler-icon{
      display:inline-flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0;
    }
    .tab .tabler-icon svg,
    .tab svg{
      display:block;flex-shrink:0;
    }
    .tab span:not(.tabler-icon){
      display:inline-flex;align-items:center;line-height:1;
    }
    .tab.active{background:var(--primary);color:#fff;box-shadow:0 2px 10px var(--primary-glow);}

        .hist-item{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05);}
    .hist-item:last-child{border-bottom:none;}
    .hist-icon{width:38px;height:38px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px;}
    .hist-body{flex:1;min-width:0;}
    .hist-title{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .hist-sub{font-size:11px;color:var(--text-muted);margin-top:2px;}
    .hist-status{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;vertical-align:middle;}
    .hist-status svg{flex-shrink:0;}
    .purchase-order-line{display:flex;align-items:center;gap:6px;margin-bottom:4px;min-width:0;}
    .purchase-order-badge{
      display:inline-flex;align-items:center;max-width:100%;height:22px;padding:0 9px;
      border-radius:8px;background:linear-gradient(135deg,var(--primary-dim),rgba(16,185,129,.08));
      border:1px solid var(--border-hi);color:var(--text);font-size:11px;font-weight:800;
      letter-spacing:.2px;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.12);
    }
    .purchase-order-type{
      min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
      color:var(--text-muted);font-size:11px;font-weight:700;
    }
    .hist-right{display:flex;align-items:center;gap:4px;flex-shrink:0;}
    .hist-amount{font-size:13px;font-weight:700;white-space:nowrap;text-align:right;}
    .hist-amount.pos{color:var(--success);}
    .hist-amount.neg{color:var(--danger);}
    .hist-amount.neu{color:var(--text-muted);}
    .hist-arrow{color:var(--text-dim);font-size:16px;}
    .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px 16px;color:var(--text-muted);width:100%;box-sizing:border-box;}
    .empty-icon{display:flex;align-items:center;justify-content:center;font-size:42px;margin-bottom:10px;opacity:.4;}
    .empty-icon svg,.empty-icon svg.ti{display:block;margin:0 auto;}

        input[type=text],input[type=number]{
      background:var(--surface-2);border:1px solid var(--border);
      border-radius:var(--radius-sm);padding:12px 14px;
      color:var(--text);font-size:16px;font-family:inherit;
      outline:none;transition:border-color .18s;width:100%;
            -webkit-user-select:text;user-select:text;-webkit-touch-callout:default;
    }
    input:focus{border-color:var(--primary);}
    input::placeholder{color:var(--text-dim);}
    input[type=number]{-moz-appearance:textfield;}
    input[type=number]::-webkit-inner-spin-button{display:none;}
    .steam-login-chip{
      min-height:44px;max-width:100%;margin-top:8px;padding:0 13px;
      display:inline-flex;align-items:center;justify-content:flex-start;gap:7px;
      border:1px solid var(--border);border-radius:10px;background:var(--primary-dim);
      color:var(--accent-hi);font-family:inherit;font-size:12px;font-weight:700;line-height:1.2;cursor:pointer;
      -webkit-tap-highlight-color:transparent;touch-action:manipulation;
      transition:background .18s,border-color .18s,transform .18s;
    }
    .steam-login-chip:hover{border-color:var(--border-hi);background:rgba(124,58,237,.18);}
    .steam-login-chip:active{transform:scale(.98);background:rgba(124,58,237,.24);}
    .steam-login-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
    .steam-login-chip .tabler-icon{flex:0 0 auto;}
    #steam-last-login-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .input-wrap{display:flex;gap:8px;align-items:stretch;}
    .check-row{display:flex;align-items:center;gap:8px;margin-top:8px;color:var(--muted);font-size:13px;}
    .check-row input{width:16px;height:16px;accent-color:var(--primary);}
    .gifts-comment-meta{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:12px;color:var(--text-muted);}
    .gifts-comment-meta.limit{color:var(--danger);}
    #gifts-comment.limit{border-color:var(--danger) !important;box-shadow:0 0 0 1px var(--danger-dim);}
    .gift-sender-toggle{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:4px;}
    .gift-sender-option{border:none;border-radius:8px;background:transparent;color:var(--text-muted);padding:10px 8px;font-size:13px;font-weight:800;font-family:inherit;transition:background .18s,color .18s,transform .18s,box-shadow .18s;}
    .gift-sender-option:active{transform:scale(.97);}
    .gift-sender-option.active{background:linear-gradient(135deg,var(--primary),#5b21b6);color:#fff;box-shadow:0 4px 16px var(--primary-glow);}
    .field-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);margin-bottom:6px;}

    .promo-locked{
      margin-bottom:10px;padding:11px 12px;border:1px solid rgba(239,68,68,.28);
      border-radius:var(--radius-sm);background:rgba(239,68,68,.08);
    }
    .promo-locked-title{font-weight:800;font-size:14px;color:var(--text);margin-bottom:3px;}
    .promo-locked-text{font-size:12px;color:var(--text-muted);line-height:1.35;}

        .promo-box{display:flex;gap:8px;align-items:stretch;}
    .promo-field-wrap{position:relative;flex:1;min-width:0;}
    .promo-field{
      width:100%;background:var(--surface-2);border:1px solid var(--border);
      border-radius:var(--radius-sm);padding:13px 14px;
      color:var(--text);font-family:inherit;outline:none;
      transition:border-color .18s, box-shadow .18s;
      -webkit-user-select:text;user-select:text;-webkit-touch-callout:default;
            text-transform:uppercase;letter-spacing:2px;font-weight:700;font-size:16px;
    }
        .promo-field-wrap.has-paste .promo-field{padding-right:44px;}
    .promo-field:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-dim);}
    .promo-field:disabled{opacity:.65;cursor:not-allowed;letter-spacing:normal;text-transform:none;}
        .promo-field::placeholder{text-transform:none;letter-spacing:normal;font-weight:400;color:var(--text-dim);}
        .promo-paste{
      position:absolute;right:6px;top:50%;transform:translateY(-50%);
      width:32px;height:32px;border:none;border-radius:8px;cursor:pointer;
      background:var(--surface-3);color:var(--text-muted);font-size:15px;
      display:flex;align-items:center;justify-content:center;
      transition:all .15s;-webkit-tap-highlight-color:transparent;
      padding:0;
    }
    .promo-paste:active{background:var(--primary-dim);transform:translateY(-50%) scale(.92);}
    .promo-paste:disabled{opacity:.45;cursor:not-allowed;}
    .promo-paste .tabler-icon{
      display:inline-flex;align-items:center;justify-content:center;
      width:100%;height:100%;line-height:1;
    }
    .promo-paste .tabler-icon svg{
      display:block;margin:auto;
    }
    .promo-apply{
      flex-shrink:0;padding:0 18px;font-size:14px;font-weight:700;
      background:linear-gradient(135deg,var(--primary),#5b21b6);color:#fff;
      box-shadow:0 4px 14px var(--primary-glow);
      display:inline-flex;align-items:center;justify-content:center;line-height:1;
    }
    .promo-apply:active{transform:scale(.97);}
    .promo-apply:disabled{
      opacity:.65;cursor:not-allowed;box-shadow:none;
      background:var(--surface-3);color:var(--text-muted);
    }

    .reviews-entry{
      width:100%;display:flex;align-items:center;gap:12px;
      background:linear-gradient(135deg,rgba(124,58,237,.16),rgba(16,185,129,.08));
      border:1px solid var(--border);border-radius:16px;
      padding:13px 15px;margin:-2px 0 14px;
      color:var(--text);font-family:inherit;text-align:left;cursor:pointer;
      -webkit-tap-highlight-color:transparent;transition:transform .15s,border-color .15s,background .15s;
    }
    .reviews-entry:active{transform:scale(.98);border-color:var(--border-hi);background:var(--primary-dim);}
    .reviews-entry-icon{
      width:42px;height:42px;border-radius:12px;flex-shrink:0;
      display:flex;align-items:center;justify-content:center;
      background:rgba(124,58,237,.2);border:1px solid var(--border);
      font-size:20px;
    }
    .reviews-entry-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
    .reviews-entry-title{font-size:14px;font-weight:800;color:var(--text);}
    .reviews-entry-sub{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .reviews-entry-arrow{font-size:24px;line-height:1;color:var(--accent);flex-shrink:0;}

/* Баннерный слайдер */
.banners-slider-wrap {
  margin-bottom: 18px;
  position: relative;
}

#banners-slider {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.banner-track {
  display: flex;
  transition: transform 0.38s cubic-bezier(0.2, 0, 0, 1);
  will-change: transform;
}

.banner-slide {
  flex: 0 0 100%;
  width: 100%;
  min-height: 124px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  cursor: pointer;
  background: linear-gradient(135deg, #182236 0%, #121622 100%);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.banner-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 30%, rgba(var(--primary-rgb), 0.16) 0%, transparent 60%);
  pointer-events: none;
}

.banner-slide-content {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.banner-slide-badge {
  display: inline-block;
  background: rgba(var(--primary-rgb), 0.2);
  border: 1px solid rgba(var(--primary-rgb), 0.4);
  color: var(--accent-hi);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
}

.banner-slide-title {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  letter-spacing: -0.2px;
}

.banner-slide-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.35;
}

.banner-slide-img {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}
.banner-slide-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

.banner-slide-empty {
  cursor: default;
  min-height: 124px;
}
.banner-slide-empty .banner-slide-img {
  width: 92px;
  height: 92px;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.42));
}

.banner-slide.banner-slide-fullcover {
  padding: 0;
  min-height: 124px;
  background: transparent;
}
.banner-slide.banner-slide-fullcover::before {
  display: none;
}
.banner-slide-cover {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.banner-slide-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}
.banner-slide-badge-overlay {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.banner-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.banner-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.25s;
  cursor: pointer;
}
.banner-dot.active {
  width: 18px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary-glow);
}

/* Категории витрины (Табы как в референсе AviedoStore) */
.category-tabs {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  padding: 0 4px;
  margin: 12px 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

.category-tab,
.category-chip {
  flex: 1;
  text-align: center;
  background: transparent;
  border: none;
  padding: 10px 0 13px;
  font-size: 15px;
  font-weight: 600;
  color: #71767b;
  cursor: pointer;
  position: relative;
  transition: color 0.18s ease;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.category-tab:hover,
.category-chip:hover {
  color: #a0a6ad;
}

.category-tab.active,
.category-chip.active {
  color: var(--primary);
  font-weight: 700;
}

.category-tab.active::after,
.category-chip.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 20%;
  right: 20%;
  height: 2.5px;
  background: var(--primary);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.5);
}

/* Сетка товаров стора (Строго 2 товара в ряд, чистый минимализм как в референсе) */
.store-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 16px;
  row-gap: 22px;
  padding: 0 2px 30px;
  margin-bottom: 20px;
}

.store-grid-item {
  display: flex;
  align-items: center;
  gap: 11px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 2px 0;
  cursor: pointer;
  text-align: left;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease, transform 0.15s ease;
  min-width: 0;
}
.store-grid-item * {
  pointer-events: none;
}

.store-grid-item:active {
  opacity: 0.65;
  transform: scale(0.97);
}

.store-item-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  max-width: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  background: #141721;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.store-item-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 13px;
  display: block;
}

.store-item-icon.stars-icon {
  background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
  border-color: rgba(245, 158, 11, 0.35);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.2);
}
.store-item-icon.stars-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.store-item-icon.prem-icon {
  background: linear-gradient(135deg, #5B8DEF 0%, #8B5CF6 50%, #E0408A 100%);
  border-color: rgba(139, 92, 246, 0.35);
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.2);
}
.store-item-icon.prem-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store-item-icon.store-gift-icon {
  background: linear-gradient(135deg, #2a1b3d 0%, #151022 100%);
  border-color: rgba(236, 72, 153, 0.3);
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.15);
}
.store-item-icon.store-gift-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.store-item-icon.steam-icon {
  background: linear-gradient(135deg, #1b2838 0%, #171a21 100%);
  border-color: rgba(102, 192, 244, 0.3);
  box-shadow: 0 4px 14px rgba(23, 26, 33, 0.3);
}
.store-item-icon.steam-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.store-item-icon.vshop-icon {
  background: transparent;
  border-color: transparent;
  padding: 0;
  overflow: hidden;
}
.store-item-icon.vshop-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.store-item-icon .default-cat-icon {
  font-size: 24px;
}

.store-item-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.2px;
}

/* Детальные баннеры для страниц Stars, Premium, Gifts */
.page-banner {
  border-radius: 20px;
  padding: 18px 20px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #182236 0%, #121622 100%);
  border: 1px solid var(--border);
}

.stars-banner {
  border-color: rgba(245, 158, 11, 0.35);
}
.stars-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 80% at 80% 50%, rgba(245, 158, 11, 0.15) 0%, transparent 70%);
}

.prem-banner {
  border-color: rgba(168, 85, 247, 0.35);
}
.prem-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 80% at 80% 50%, rgba(168, 85, 247, 0.18) 0%, transparent 70%);
}

.gifts-banner {
  border-color: rgba(236, 72, 153, 0.35);
}
.gifts-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 80% at 80% 50%, rgba(236, 72, 153, 0.18) 0%, transparent 70%);
}

.banner-emblem {
  font-size: 52px;
  line-height: 1;
  flex-shrink: 0;
  position: relative;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5));
}
.banner-info {
  flex: 1;
  position: relative;
}
.banner-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
}
.banner-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}
.banner-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.banner-pill .tabler-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
.banner-pill span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* Заголовки секций витрины */
.section-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin: 22px 0 10px;
}

/* Сетка паков Stars */
.packs-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 0 14px;
  margin-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.packs-scroll::-webkit-scrollbar {
  display: none;
}
.pack-card {
  flex-shrink: 0;
  width: 106px;
  scroll-snap-align: start;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 14px 8px 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.pack-card:active {
  transform: scale(0.95);
}
.pack-card.selected {
  border-color: var(--primary);
  background: var(--primary-dim);
  box-shadow: 0 0 0 1px var(--primary), 0 4px 16px var(--primary-glow);
}
.pack-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  margin-bottom: 6px;
}
.pack-amount {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}
.pack-price {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}
.pack-price-disc {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  margin-top: 2px;
}
.pack-price-orig {
  font-size: 10px;
  color: var(--text-dim);
  text-decoration: line-through;
}

/* Сетка подарков Telegram (в точности как в бекапе) */
.gifts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.gift-card {
  position: relative;
  background: var(--surface);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 16px 12px 13px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.12s cubic-bezier(0.2, 0, 0, 1), border-color 0.12s, background 0.12s, box-shadow 0.12s;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.gift-card:active {
  transform: scale(0.97);
}
.gift-card.selected {
  border-color: var(--primary) !important;
  background: var(--primary-dim) !important;
  box-shadow: 0 0 0 1px var(--primary), 0 6px 20px var(--primary-glow) !important;
}

.gift-card .gift-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  width: 100%;
  margin-bottom: 8px;
}
.gift-card .gift-icon img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
  transition: transform 0.12s ease-out;
}
.gift-card.selected .gift-icon img {
  transform: scale(1.06);
}

.gift-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
  margin-top: 4px;
}

.gift-price-old {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: line-through;
  margin-top: 4px;
}

.gift-price {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin-top: 4px;
}
.gift-price-old + .gift-price {
  margin-top: 1px;
}

.gift-stars {
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.gift-card.off {
  opacity: 0.5;
}
.gift-card.off .gift-icon img {
  filter: grayscale(0.8) brightness(0.8);
}

.gift-off-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 9px;
  font-weight: 700;
  background: var(--danger-dim);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  padding: 2px 6px;
}

/* Вкладка отзывов */
.rev-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.rev-summary-avg {
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.rev-summary-stars {
  font-size: 18px;
  color: var(--gold);
  letter-spacing: 2px;
}
.rev-summary-count {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}

.review-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: none;
}
.review-filters::-webkit-scrollbar {
  display: none;
}
.review-filter {
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.review-filter.active {
  background: var(--primary-dim);
  border-color: var(--border-hi);
  color: #fff;
  font-weight: 700;
}

        .ord-head{text-align:center;margin-bottom:16px;}
    .ord-head-icon{
      width:64px;height:64px;border-radius:50%;margin:0 auto 12px;
      display:flex;align-items:center;justify-content:center;
      background:linear-gradient(135deg,#f43f5e 0%,#7c3aed 100%);
      box-shadow:0 0 28px rgba(244,63,94,.4),0 8px 24px rgba(124,58,237,.3);
      animation:ordPulse 2.2s ease-in-out infinite;
    }
    @keyframes ordPulse{
      0%,100%{box-shadow:0 0 28px rgba(244,63,94,.4),0 8px 24px rgba(124,58,237,.3);}
      50%{box-shadow:0 0 40px rgba(244,63,94,.6),0 8px 30px rgba(124,58,237,.45);}
    }
    .ord-head-title{font-size:19px;font-weight:800;color:var(--text);letter-spacing:-.3px;}
    .ord-head-sub{font-size:12px;color:var(--text-muted);margin-top:5px;line-height:1.45;}
    .ord-card{
      background:var(--surface-2);border:1px solid var(--border);
      border-radius:16px;padding:14px 16px;
    }
    .ord-row{
      display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
      gap:16px;min-height:36px;
    }
    .ord-row-label{
      font-size:13px;color:var(--text-muted);
      display:inline-flex;align-items:center;gap:6px;line-height:1;
    }
    .ord-row-label .tabler-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0;}
    .ord-row-label span{display:inline-flex;align-items:center;line-height:1;}
    .ord-row-val{
      font-size:14px;font-weight:700;color:var(--text);text-align:right;
      white-space:nowrap;font-variant-numeric:tabular-nums;
    }
    .ord-progress{
      height:8px;border-radius:4px;background:rgba(255,255,255,.07);
      overflow:hidden;margin:4px 0 6px;
    }
    .ord-progress-fill{
      height:100%;border-radius:4px;
      background:linear-gradient(90deg,#10b981,#34d399);
      box-shadow:0 0 10px rgba(16,185,129,.55);
      transition:width .7s cubic-bezier(.4,0,.2,1);
    }
    .ord-shortfall-row{
      display:flex;justify-content:space-between;align-items:center;
      gap:16px;margin-top:8px;padding:10px 12px;border-radius:12px;
      background:var(--danger-dim);border:1px solid rgba(244,63,94,.3);
    }
    .ord-shortfall-label{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--danger);}
    .ord-shortfall-label::before{
      content:'';width:18px;height:18px;border-radius:6px;flex:0 0 18px;
      background:
        linear-gradient(180deg,transparent 0 36%,currentColor 36% 48%,transparent 48%),
        linear-gradient(135deg,rgba(244,63,94,.18),rgba(244,63,94,.08));
      border:1px solid rgba(244,63,94,.35);
      box-shadow:inset 0 -5px 0 rgba(244,63,94,.13);
    }
    .ord-shortfall-val{font-size:18px;font-weight:800;color:var(--danger);letter-spacing:-.3px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}

        .rev-summary{
      display:flex;align-items:center;gap:14px;
      background:linear-gradient(135deg,rgba(251,191,36,.10),rgba(124,58,237,.08));
      border:1px solid rgba(251,191,36,.28);border-radius:16px;
      padding:14px 18px;margin-bottom:10px;
    }
    .rev-summary-avg{font-size:34px;font-weight:900;color:var(--gold);letter-spacing:-1px;}
    .rev-summary-stars{font-size:15px;letter-spacing:2px;}
    .rev-summary-count{font-size:12px;color:var(--text-muted);margin-top:2px;}
    .review-filters{
      display:flex;gap:7px;overflow-x:auto;margin:10px 0 12px;padding:2px 1px 6px;
      scrollbar-width:none;-webkit-overflow-scrolling:touch;
    }
    .review-filters::-webkit-scrollbar{display:none;}
    .review-filter{
      flex:0 0 auto;border:1px solid var(--border);background:rgba(255,255,255,.04);
      color:var(--text-muted);height:34px;padding:0 12px;border-radius:10px;
      font:700 12px/1 inherit;white-space:nowrap;transition:background .15s,border-color .15s,color .15s,transform .15s;
      -webkit-tap-highlight-color:transparent;
    }
    .review-filter.active{
      color:#fff;border-color:rgba(124,58,237,.55);
      background:linear-gradient(135deg,var(--primary),#5b21b6);
      box-shadow:0 6px 18px rgba(124,58,237,.22);
    }
    .review-filter:active{transform:scale(.97);}
    .rev-item{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.05);}
    .rev-item:last-child{border-bottom:none;}
    .rev-item-top{display:flex;align-items:center;gap:8px;margin-bottom:5px;}
    .rev-item-stars{font-size:13px;letter-spacing:1px;flex-shrink:0;}
    .rev-item-product{font-size:13px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;min-width:0;}
    .rev-item-product span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
    .rev-product-icon{
      width:22px;height:22px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;
      flex:0 0 22px;background:rgba(255,255,255,.05);border:1px solid var(--border);
    }
    .rev-product-icon img{display:block;width:18px;height:18px;}
    .rev-product-icon.stars,.rev-product-icon.premium{background:transparent;border-color:transparent;}
    .rev-product-icon.gift{font-size:16px;background:rgba(16,185,129,.10);}
    .rev-product-icon.gift-img{background:transparent;border-color:transparent;}
    .rev-product-icon.gift-img img{width:22px;height:22px;object-fit:contain;}
    .rev-item-text{font-size:13px;color:var(--text-2);line-height:1.45;}
    .rev-item-meta{font-size:11px;color:var(--text-muted);margin-top:5px;}
    .rev-mine{
      display:inline-block;font-size:9px;font-weight:700;color:var(--accent);
      background:var(--primary-dim);border:1px solid var(--border);
      border-radius:6px;padding:1px 5px;vertical-align:1px;
    }

        .rev-stars-pick{display:flex;justify-content:center;gap:6px;margin:4px 0 2px;}
    .rev-star{
      background:none;border:none;cursor:pointer;font-size:38px;line-height:1;
      color:var(--text-dim);padding:4px;transition:color .15s,transform .15s;
      -webkit-tap-highlight-color:transparent;font-family:inherit;
    }
    .rev-star:active{transform:scale(1.25);}
    .rev-star.on{color:var(--gold);text-shadow:0 0 14px rgba(251,191,36,.6);}
    .rev-pick-hint{text-align:center;font-size:13px;font-weight:600;color:var(--text-muted);margin-bottom:14px;min-height:18px;}
    .rev-text-wrap{position:relative;margin-bottom:14px;}
    .rev-text-wrap textarea{
      width:100%;background:var(--surface-2);border:1px solid var(--border);
      border-radius:14px;padding:13px 14px 26px;color:var(--text);font-size:16px;
      font-family:inherit;resize:none;outline:none;line-height:1.45;
    }
    .rev-text-wrap textarea:focus{border-color:var(--primary);}
    .rev-counter{
      position:absolute;right:12px;bottom:9px;font-size:11px;font-weight:600;
      color:var(--text-dim);pointer-events:none;
    }

        .amount-row{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
    .amount-ctrl{
      width:40px;height:44px;border-radius:10px;flex-shrink:0;
      background:var(--surface-2);border:1px solid var(--border);color:var(--text);
      font-size:22px;display:flex;align-items:center;justify-content:center;
      cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent;user-select:none;
    }
    .amount-ctrl:active{background:var(--primary-dim);border-color:var(--primary);}
    .amount-input-wrap{flex:1;position:relative;}
    .amount-input-wrap input{text-align:center;font-weight:700;font-size:18px;padding-right:60px;}
    .price-inline{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:700;color:var(--text);pointer-events:none;}

        .summary-bar{
      background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);
      padding:14px 16px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;
    }
    .sum-left .sum-label{font-size:13px;color:var(--text-muted);}
    .sum-left .sum-disc{font-size:12px;font-weight:700;color:var(--gold);margin-top:3px;}
    .sum-right{text-align:right;}
    .sum-value{font-size:22px;font-weight:800;color:var(--text);}
    .sum-sub{font-size:11px;color:var(--text-muted);margin-top:2px;}
    .sum-sub.warn{color:var(--danger);}

        .plan-card{
      background:var(--surface);border:2px solid var(--border);
      border-radius:var(--radius);padding:18px;margin-bottom:10px;
      cursor:pointer;transition:all .18s;position:relative;overflow:hidden;
      -webkit-tap-highlight-color:transparent;
    }
    .plan-card:active{transform:scale(.99);}
    .plan-card.selected{
      border-color:var(--primary);
      box-shadow:0 0 0 1px var(--primary),0 6px 24px var(--primary-glow);
    }
    .plan-card.selected::before{
      content:'';position:absolute;inset:0;
      background:radial-gradient(ellipse 100% 130% at 110% -10%,var(--primary-dim) 0%,transparent 60%);
    }
    .plan-badge{
      flex-shrink:0;align-self:flex-start;white-space:nowrap;
      background:var(--gold-dim);border:1px solid rgba(251,191,36,.4);
      border-radius:20px;padding:3px 9px;font-size:10px;font-weight:700;color:var(--gold);
    }
    .plan-header{display:flex;align-items:center;gap:12px;position:relative;}
    .plan-emoji-wrap{
      width:48px;height:48px;border-radius:14px;flex-shrink:0;
      background:linear-gradient(135deg,rgba(124,58,237,.25),rgba(76,29,149,.4));
      border:1px solid var(--border-hi);
      display:flex;align-items:center;justify-content:center;font-size:26px;
    }
    .plan-info{flex:1;min-width:0;}
    .plan-title{font-size:17px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .plan-sub{font-size:12px;color:var(--text-muted);margin-top:2px;}
    .plan-price-row{display:flex;align-items:baseline;gap:8px;margin-top:14px;position:relative;}
    .plan-price{font-size:26px;font-weight:900;color:var(--text);letter-spacing:-0.5px;}
    .plan-price-currency{font-size:17px;font-weight:700;color:var(--text-muted);}
    .plan-price-orig{font-size:15px;font-weight:600;color:var(--text-dim);text-decoration:line-through;}
    .plan-price-saving{font-size:12px;font-weight:700;color:var(--success);background:var(--success-dim);padding:2px 7px;border-radius:6px;}

        #toast{
      position:fixed;left:50%;
            top:calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + 10px);
      transform:translateX(-50%) translateY(-200px);
      background:var(--surface-2);border:1px solid var(--border-hi);
      border-radius:var(--radius-sm);padding:10px 20px;
      font-size:13px;font-weight:600;color:var(--text);
      box-shadow:0 8px 30px rgba(0,0,0,.5);z-index:10000;
      transition:transform .3s cubic-bezier(.34,1.56,.64,1);
      max-width:calc(100vw - 24px);text-align:center;white-space:nowrap;
    }
    #toast.show{transform:translateX(-50%) translateY(0);}
    #toast.success{border-color:var(--success);color:var(--success);}
    #toast.error{border-color:var(--danger);color:var(--danger);}

        .sheet-overlay{
      position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:100;
      display:flex;align-items:flex-end;justify-content:center;
      padding:calc(12px + var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)) 12px 0;
      opacity:0;pointer-events:none;transition:opacity .25s;
    }
    #review-overlay, #order-overlay { z-index:210; }
    #support-confirm-overlay { z-index:250; }
    .sheet-overlay.open{opacity:1;pointer-events:auto;}
    .sheet{
      width:100%;max-width:520px;max-height:calc(100dvh - 12px - var(--tg-safe-area-inset-top, 0px) - var(--tg-content-safe-area-inset-top, 0px));
      background:var(--surface);border-radius:20px 20px 0 0;
      border:1px solid var(--border-hi);border-bottom:none;
      padding:20px 16px max(20px,env(safe-area-inset-bottom));
      overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
      transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
      box-shadow:0 -18px 44px rgba(0,0,0,.38);
    }
    .sheet-overlay.open .sheet{transform:none;}
    .sheet-handle{
      width:44px;height:5px;border-radius:3px;background:var(--text-dim);margin:0 auto 18px;
      cursor:pointer;cursor:grab;position:relative;touch-action:none;
      transition:background .15s,transform .15s;-webkit-tap-highlight-color:transparent;flex-shrink:0;
    }
    .sheet-handle:hover{background:var(--text-muted);}
    .sheet-handle:active{cursor:grabbing;transform:scale(.96);background:var(--text);}
    .sheet-handle::before{
      content:'';position:absolute;top:-16px;bottom:-16px;left:-28px;right:-28px;cursor:pointer;
    }
    .sheet-title{
      font-size:17px;font-weight:800;text-align:center;margin-bottom:16px;
      display:flex;align-items:center;justify-content:center;gap:8px;line-height:1.2;
    }
    .sheet-title .tabler-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0;}
    .sheet-title span{display:inline-flex;align-items:center;line-height:1;}
    .method-btn{
      display:flex;align-items:center;gap:14px;width:100%;min-height:74px;
      background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);
      padding:14px 16px;color:var(--text);cursor:pointer;margin-bottom:10px;
      transition:all .18s;-webkit-tap-highlight-color:transparent;font-family:inherit;
    }
    .method-btn:active{border-color:var(--primary);background:var(--primary-dim);}
    .method-btn[data-id="heleket"]:active{border-color:#DE372B;background:rgba(222,55,43,.12);}
    .method-icon{font-size:26px;flex-shrink:0;}
    .method-name{font-size:15px;font-weight:700;}
    .method-desc{font-size:12px;color:var(--text-muted);margin-top:2px;}
    .method-arrow{color:var(--text-dim);font-size:18px;margin-left:auto;}
    .crypto-logo-wrap{
      width:46px;height:46px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
      border:1px solid var(--border);border-radius:14px;background:var(--surface);
    }
    .crypto-logo{width:32px!important;height:32px!important;object-fit:contain;border-radius:0!important;}
    .topup-error{
      display:none;margin:0 0 12px;padding:10px 12px;border-radius:10px;
      border:1px solid rgba(239,68,68,.42);background:rgba(239,68,68,.10);
      color:var(--danger);font-size:13px;font-weight:650;line-height:1.4;text-align:center;
    }
    .topup-error.show{display:block;}

    #order-overlay .sheet{max-width:560px;}
    #ord-methods,.methods-list{display:block;}
    .ord-head{max-width:390px;margin-left:auto;margin-right:auto;}
    .ord-card{max-width:460px;margin-left:auto;margin-right:auto;}

    @media (max-width:380px){
      .sheet-overlay{padding-left:8px;padding-right:8px;}
      .sheet{padding-left:12px;padding-right:12px;}
      .ord-head-icon{width:56px;height:56px;margin-bottom:10px;}
      .ord-head-title{font-size:18px;}
      .ord-head-sub{font-size:12px;}
      .ord-card{padding:12px;}
      .ord-shortfall-row{padding:9px 10px;}
      .ord-shortfall-label{font-size:12px;}
      .ord-shortfall-val{font-size:16px;}
      .method-btn{min-height:68px;padding:12px;gap:12px;}
      .method-btn img{width:38px !important;height:38px !important;border-radius:11px !important;}
      .method-btn .crypto-logo-wrap{width:42px;height:42px;}
      .method-btn .crypto-logo{width:29px!important;height:29px!important;border-radius:0!important;}
      .method-name{font-size:14px;}
      .method-desc{font-size:11px;}
    }

    @media (min-width:768px){
      .sheet-overlay{
        align-items:center;
        padding:32px;
      }
      .sheet{
        max-height:min(760px,calc(100dvh - 64px));
        border-radius:20px;
        border:1px solid var(--border-hi);
        padding:22px 22px 24px;
        transform:translateY(18px) scale(.98);
        box-shadow:0 24px 72px rgba(0,0,0,.55);
      }
      #order-overlay .sheet{max-width:640px;}
      #ord-methods,#methods-list{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;
      }
      #ord-methods .method-btn,#methods-list .method-btn{margin-bottom:0;}
      #order-overlay .btn.btn-secondary.btn-full,
      #topup-overlay #sheet-methods > .btn.btn-secondary.btn-full{
        grid-column:1 / -1;
      }
    }

        .invoice-banner{
      display:none;align-items:center;gap:8px;margin-top:12px;
      background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.3);
      border-radius:10px;padding:9px 12px;cursor:pointer;
      -webkit-tap-highlight-color:transparent;position:relative;
    }
    .invoice-banner.show{display:flex;}
    .invoice-banner-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex-shrink:0;animation:dotPulse 1.5s ease-in-out infinite;}
    @keyframes dotPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.7);}}
    .invoice-banner-text{font-size:12px;font-weight:700;color:var(--gold);flex:1;}
    .invoice-banner-timer{font-size:13px;font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:1px;}

        .invoice-method-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
    .invoice-method-icon{width:48px;height:48px;border-radius:13px;flex-shrink:0;overflow:hidden;}
    .invoice-method-name{font-size:16px;font-weight:800;color:var(--text);}
    .invoice-method-id{font-size:11px;color:var(--text-muted);margin-top:2px;font-family:monospace;letter-spacing:.3px;}
    .invoice-amounts{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:14px;}
    .invoice-row{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-bottom:1px solid rgba(255,255,255,.04);}
    .invoice-row:last-child{border-bottom:none;background:rgba(124,58,237,.07);}
    .invoice-row-label{
      font-size:13px;color:var(--text-muted);
      display:inline-flex;align-items:center;gap:6px;line-height:1;
    }
    .invoice-row-label .tabler-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0;}
    .invoice-row-label span{display:inline-flex;align-items:center;line-height:1;}
    .invoice-row-val{font-size:13px;font-weight:600;color:var(--text);}
    .invoice-row:last-child .invoice-row-label{font-weight:700;color:var(--text);}
    .invoice-row:last-child .invoice-row-val{font-size:18px;font-weight:900;color:var(--accent-hi);}
    .invoice-timer-block{text-align:center;padding:10px 0 12px;}
    .invoice-timer-val{font-size:34px;font-weight:900;letter-spacing:3px;font-variant-numeric:tabular-nums;color:var(--text);line-height:1;}
    .invoice-timer-val.warn{color:var(--danger);}
    .invoice-timer-lbl{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;margin-top:4px;}
    .invoice-progress{width:100%;height:4px;background:var(--border);border-radius:2px;margin-bottom:14px;overflow:hidden;}
    .invoice-progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:2px;transition:width 1s linear;}
    .invoice-btns{display:flex;gap:8px;margin-bottom:8px;}
    .btn-pay-inv{flex:1;background:linear-gradient(135deg,var(--primary),#5b21b6);color:#fff;box-shadow:0 4px 16px var(--primary-glow);}
    .btn-cancel-inv{flex:1;background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted);}
    .btn-cancel-inv:active{border-color:var(--danger);color:var(--danger);}
    .invoice-expired{text-align:center;padding:20px 0 8px;}
    .invoice-expired-icon{font-size:40px;margin-bottom:8px;opacity:.6;}
    .invoice-expired-text{font-size:15px;font-weight:700;color:var(--text-muted);}
    .invoice-expired-sub{font-size:13px;color:var(--text-dim);margin-top:4px;}

        .loader{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;margin:auto;}
    .page-loader{display:flex;align-items:center;justify-content:center;height:200px;}
    @keyframes spin{to{transform:rotate(360deg);}}

    #purchase-wait-overlay{
      position:fixed;inset:0;z-index:198;background:var(--bg);
      display:flex;align-items:center;justify-content:center;padding:24px;
      opacity:0;pointer-events:none;transition:opacity .22s ease;
    }
    #purchase-wait-overlay.open{opacity:1;pointer-events:auto;}
    .purchase-wait-card{
      width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;text-align:center;
      padding:28px 22px;border-radius:22px;background:linear-gradient(180deg,var(--surface),rgba(17,17,42,.92));
      border:1px solid var(--border-hi);box-shadow:0 18px 58px rgba(0,0,0,.34),0 0 36px var(--primary-glow);
    }
    .purchase-wait-icon{
      width:84px;height:84px;border-radius:24px;margin-bottom:18px;
      display:flex;align-items:center;justify-content:center;font-size:42px;
      background:var(--primary-dim);border:1px solid var(--border-hi);
      box-shadow:0 0 28px var(--primary-glow);animation:waitIconPulse 1.7s ease-in-out infinite;
    }
    .purchase-wait-icon img{display:block;max-width:76px;max-height:76px;object-fit:contain;}
    @keyframes waitIconPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.055);}}
    .purchase-wait-title{font-size:22px;font-weight:900;color:var(--text);margin-bottom:7px;}
    .purchase-wait-sub{font-size:13px;color:var(--text-muted);margin-bottom:20px;}
    .purchase-wait-track{
      width:100%;height:8px;border-radius:999px;background:rgba(255,255,255,.07);
      overflow:hidden;border:1px solid rgba(255,255,255,.05);margin-bottom:16px;
    }
    .purchase-wait-fill{
      width:38%;height:100%;border-radius:999px;
      background:linear-gradient(90deg,var(--primary),var(--accent-hi),var(--primary));
      box-shadow:0 0 18px var(--primary-glow);animation:waitTrack 1.35s ease-in-out infinite;
    }
    @keyframes waitTrack{0%{transform:translateX(-110%);}100%{transform:translateX(285%);}}
    .purchase-wait-steps{display:flex;gap:7px;}
    .purchase-wait-steps span{
      width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:.38;
      animation:waitDot 1.05s ease-in-out infinite;
    }
    .purchase-wait-steps span:nth-child(2){animation-delay:.16s;}
    .purchase-wait-steps span:nth-child(3){animation-delay:.32s;}
    @keyframes waitDot{0%,100%{opacity:.28;transform:scale(.82);}50%{opacity:1;transform:scale(1.15);}}

    #success-overlay{
      position:fixed;inset:0;z-index:200;
      background:var(--bg);
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      padding:24px;
      overflow-y:auto;
      opacity:0;pointer-events:none;
      transition:opacity .3s ease;
    }
    #success-overlay.open{opacity:1;pointer-events:auto;}
    .success-icon-wrap{
      width:88px;height:88px;min-width:88px;min-height:88px;max-width:88px;max-height:88px;
      aspect-ratio:1/1;
      border-radius:50%;
      display:flex;align-items:center;justify-content:center;
      margin-bottom:22px;position:relative;
      flex-shrink:0;
    }
    .success-icon-wrap::before{
      content:'';position:absolute;inset:-10px;border-radius:50%;
      animation:successPulse 2s ease-in-out infinite;
    }
    .success-icon-wrap.stars-ok{background:linear-gradient(135deg,#92400e,#451a03);border:2px solid rgba(251,191,36,.3);box-shadow:0 0 28px rgba(251,191,36,.25);}
    .success-icon-wrap.stars-ok::before{background:radial-gradient(circle,rgba(251,191,36,.25) 0%,transparent 70%);}
    .success-icon-wrap.gift-ok{border:2px solid rgba(255,255,255,.12);box-shadow:0 0 28px rgba(255,255,255,.1);}
    .success-icon-wrap.gift-ok::before{background:radial-gradient(circle,rgba(255,255,255,.15) 0%,transparent 70%);}
    .success-icon-wrap.steam-ok{background:linear-gradient(135deg,#102a45,#171a21);border:2px solid rgba(102,192,244,.35);box-shadow:0 0 28px rgba(102,192,244,.25);}
    .success-icon-wrap.steam-ok::before{background:radial-gradient(circle,rgba(102,192,244,.25) 0%,transparent 70%);}
    .success-icon-wrap.prem-ok{background:linear-gradient(135deg,#4c1d95,#1e1b4b);border:2px solid rgba(167,139,250,.35);box-shadow:0 0 28px rgba(167,139,250,.25);}
    .success-icon-wrap.prem-ok::before{background:radial-gradient(circle,rgba(124,58,237,.3) 0%,transparent 70%);}
    .success-icon-wrap.virtual-ok{background:linear-gradient(135deg,#065f46,#064e3b);border:2px solid rgba(16,185,129,.45);box-shadow:0 0 32px rgba(16,185,129,.35);}
    .success-icon-wrap.virtual-ok::before{background:radial-gradient(circle,rgba(16,185,129,.35) 0%,transparent 70%);}
    @keyframes successPulse{0%,100%{transform:scale(1);opacity:.8;}50%{transform:scale(1.15);opacity:.4;}}
    .success-icon{
      width:58px;height:58px;
      display:flex;align-items:center;justify-content:center;
      position:relative;flex-shrink:0;
      filter:drop-shadow(0 0 16px rgba(251,191,36,.7));
    }
    .success-icon img{
      display:block;
      width:54px !important;height:54px !important;
      aspect-ratio:1/1;
      object-fit:contain;
      flex-shrink:0;
      margin:0 auto;
    }
    .success-icon svg{
      width:54px !important;height:54px !important;
      display:block;
      flex-shrink:0;
    }
    .success-icon-wrap.stars-ok .success-icon img{
      width:56px !important;height:56px !important;
    }
    .success-icon-wrap.gift-ok .success-icon{filter:drop-shadow(0 0 16px rgba(255,255,255,.6));}
    .success-icon-wrap.steam-ok .success-icon{filter:drop-shadow(0 0 16px rgba(102,192,244,.8));}
    .success-icon-wrap.prem-ok .success-icon{filter:drop-shadow(0 0 16px rgba(167,139,250,.8));}
    .success-icon-wrap.virtual-ok .success-icon{filter:drop-shadow(0 0 16px rgba(52,211,153,.9));}

        .success-icon-wrap.pop{ animation:iconPop .6s cubic-bezier(.18,1.25,.4,1) both; }
    @keyframes iconPop{
      0%   { transform:scale(0) rotate(-25deg); opacity:0; }
      55%  { transform:scale(1.18) rotate(8deg); opacity:1; }
      75%  { transform:scale(.94) rotate(-3deg); }
      100% { transform:scale(1) rotate(0); }
    }
        .success-icon-wrap.pop::after{
      content:'';position:absolute;inset:-6px;border-radius:50%;
      border:3px solid rgba(255,255,255,.85);
      animation:flashRing .65s ease-out both;
    }
    @keyframes flashRing{
      0%   { transform:scale(.6); opacity:.9; }
      100% { transform:scale(1.9); opacity:0; }
    }
        #success-overlay.open .success-title{ animation:riseIn .45s ease .12s both; }
    #success-overlay.open .success-subtitle{ animation:riseIn .45s ease .2s both; }
    #success-overlay.open .order-card{ animation:riseIn .5s ease .32s both; }
    #success-overlay.open .success-actions{ animation:riseIn .5s ease .4s both; }
    @keyframes riseIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
    .success-title{font-size:24px;font-weight:900;color:var(--text);margin-bottom:6px;text-align:center;}
    .success-subtitle{font-size:14px;color:var(--text-muted);text-align:center;margin-bottom:14px;}
    .order-card{
      width:100%;max-width:380px;
      background:var(--surface);border:1px solid var(--border);border-radius:20px;
      overflow:hidden;margin-bottom:20px;
    }
    .order-header{
      padding:16px 18px;
      display:flex;align-items:center;gap:12px;
      border-bottom:1px solid var(--border);
    }
    .order-header-icon{
      width:42px;height:42px;border-radius:12px;flex-shrink:0;
      display:flex;align-items:center;justify-content:center;font-size:22px;
    }
    .order-header-icon.stars{background:rgba(251,191,36,.15);}
    .order-header-icon.prem{background:rgba(124,58,237,.15);}
    .order-header-info{flex:1;}
    .order-header-title{font-size:15px;font-weight:700;color:var(--text);}
    .order-header-id{font-size:11px;color:var(--text-muted);margin-top:2px;}
    .order-status{
      display:flex;align-items:center;gap:5px;
      background:var(--success-dim);border:1px solid rgba(16,185,129,.3);
      border-radius:20px;padding:3px 10px;
      font-size:11px;font-weight:700;color:var(--success);
      white-space:nowrap;
    }
    .receipt-order-chip{
      display:inline-flex;align-items:center;height:21px;padding:0 8px;border-radius:8px;
      background:var(--primary-dim);border:1px solid var(--border-hi);
      color:var(--text);font-size:11px;font-weight:800;white-space:nowrap;
    }
    .order-rows{padding:4px 0;}
    .order-number-strip{
      margin:10px 16px 4px;padding:11px 12px;border-radius:14px;
      background:linear-gradient(135deg,var(--primary-dim),rgba(16,185,129,.08));
      border:1px solid var(--border-hi);align-items:center;justify-content:space-between;gap:12px;
      box-shadow:0 10px 28px rgba(0,0,0,.14);
    }
    .order-number-kicker{font-size:12px;font-weight:700;color:var(--text-muted);}
    .order-number-value{
      min-width:0;max-width:62%;font-size:15px;font-weight:900;color:var(--text);letter-spacing:.2px;
      font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;
    }
    .order-row{
      display:flex;align-items:center;justify-content:space-between;
      padding:11px 18px;border-bottom:1px solid rgba(255,255,255,.04);
    }
    .order-row:last-child{border-bottom:none;}
    .order-row-label{font-size:13px;color:var(--text-muted);}
    .order-row-value{font-size:13px;font-weight:600;color:var(--text);text-align:right;}
    .order-row-value.accent{color:var(--accent);}
    .order-row-value.gold{color:var(--gold);}
    .order-row-value.success{color:var(--success);}
    .order-row-value.big{font-size:17px;font-weight:800;color:var(--text);}
    .order-discount-row{
      margin:0 18px 14px;padding:10px 14px;
      background:var(--gold-dim);border:1px solid rgba(251,191,36,.25);border-radius:10px;
      display:flex;align-items:center;justify-content:space-between;
    }
    .order-discount-label{font-size:12px;color:var(--gold);}
    .order-discount-value{font-size:12px;font-weight:700;color:var(--gold);}
    .btn-review-accent{
      background: rgba(var(--primary-rgb), 0.12);
      color: var(--accent);
      border: 1px solid rgba(var(--accent-rgb), 0.35);
      box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.12);
    }
    .btn-review-accent:hover{background: rgba(var(--primary-rgb), 0.18); border-color: rgba(var(--accent-rgb), 0.55); color: #fff;}
    .btn-review-accent:active{transform:scale(.97);background: rgba(var(--primary-rgb), 0.24);}
    .success-actions{width:100%;max-width:380px;display:flex;flex-direction:column;gap:10px;}
    .success-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:700;padding:13px 18px;border-radius:14px;}
    .success-actions .btn svg{flex-shrink:0;}
    .success-actions .btn img{margin:0 !important;flex-shrink:0;}

        .recipient-field{margin-bottom:14px;}

        #confirm-overlay{
      position:fixed;inset:0;z-index:180;
      background:rgba(0,0,0,.72);
      display:flex;align-items:flex-end;
      opacity:0;pointer-events:none;
      transition:opacity .25s;
    }
    #confirm-overlay.open{opacity:1;pointer-events:auto;}
    #confirm-sheet{
      width:100%;background:var(--surface);
      border-radius:22px 22px 0 0;
      border-top:1px solid var(--border-hi);
      padding:20px 16px max(24px,env(safe-area-inset-bottom));
      transform:translateY(100%);
      transition:transform .32s cubic-bezier(.4,0,.2,1);
    }
    #confirm-overlay.open #confirm-sheet{transform:none;}
    .confirm-handle{
      width:44px;height:5px;border-radius:3px;background:var(--text-dim);margin:0 auto 20px;
      cursor:pointer;cursor:grab;position:relative;touch-action:none;
      transition:background .15s,transform .15s;-webkit-tap-highlight-color:transparent;flex-shrink:0;
    }
    .confirm-handle:hover{background:var(--text-muted);}
    .confirm-handle:active{cursor:grabbing;transform:scale(.96);background:var(--text);}
    .confirm-handle::before{
      content:'';position:absolute;top:-16px;bottom:-16px;left:-28px;right:-28px;cursor:pointer;
    }
    .confirm-header{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
    .confirm-header-icon{
      width:54px;height:54px;border-radius:16px;flex-shrink:0;
      display:flex;align-items:center;justify-content:center;font-size:28px;
    }
    .confirm-header-icon.stars-c{background:linear-gradient(135deg,rgba(251,191,36,.2),rgba(180,130,0,.15));border:1px solid rgba(251,191,36,.3);}
    .confirm-header-icon.prem-c{background:linear-gradient(135deg,rgba(124,58,237,.25),rgba(76,29,149,.2));border:1px solid rgba(124,58,237,.35);}
    .confirm-header-text{}
    .confirm-title{font-size:18px;font-weight:800;color:var(--text);}
    .confirm-sub{font-size:12px;color:var(--text-muted);margin-top:3px;}
    .confirm-details{
      background:var(--surface-2);border:1px solid var(--border);
      border-radius:14px;overflow:hidden;margin-bottom:16px;
    }
    .confirm-row{
      display:flex;align-items:center;justify-content:space-between;
      padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.04);
    }
    .confirm-row:last-child{border-bottom:none;}
    .confirm-row-label{
      font-size:13px;color:var(--text-muted);
      display:inline-flex;align-items:center;gap:6px;line-height:1;
    }
    .confirm-row-label .tabler-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0;}
    .confirm-row-label span{display:inline-flex;align-items:center;line-height:1;}
    .confirm-row-value{font-size:13px;font-weight:700;color:var(--text);text-align:right;min-width:0;max-width:62%;overflow-wrap:anywhere;}
    .confirm-row-value.big{font-size:20px;font-weight:900;}
    .confirm-row-value.accent{color:var(--accent);}
    .confirm-row-value.gold{color:var(--gold);}
    .confirm-disc-banner{
      background:var(--gold-dim);border:1px solid rgba(251,191,36,.25);
      border-radius:10px;padding:9px 14px;margin-bottom:14px;
      display:flex;align-items:center;gap:8px;
      font-size:12px;font-weight:700;color:var(--gold);
    }
    .confirm-slide-wrap{width:100%;padding-top:2px;}
    .confirm-slider{
      position:relative;height:66px;border-radius:20px;
      background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
      border:1px solid var(--border-hi);overflow:hidden;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 30px rgba(0,0,0,.22);
      touch-action:none;user-select:none;-webkit-user-select:none;
      cursor:grab;
    }
    .confirm-slider:active{cursor:grabbing;}
    .confirm-slider::after{
      content:"";position:absolute;inset:1px;border-radius:19px;pointer-events:none;
      background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.08) 42%,transparent 58%);
      transform:translateX(-110%);animation:slideSheen 2.4s ease-in-out infinite;
    }
    @keyframes slideSheen{0%,35%{transform:translateX(-110%);}70%,100%{transform:translateX(110%);}}
    .confirm-slider-fill{
      position:absolute;left:0;top:0;bottom:0;width:0;
      background:linear-gradient(135deg,var(--primary-h),var(--primary) 58%,#5b21b6);
      box-shadow:0 0 30px var(--primary-glow);
      transition:width .18s ease;
      border-radius:0 22px 22px 0;
    }
    .confirm-slider-fill::after{
      content:"";position:absolute;right:-18px;top:-10px;bottom:-10px;width:42px;
      background:radial-gradient(ellipse at left,rgba(255,255,255,.22),rgba(255,255,255,.08) 38%,transparent 72%);
      pointer-events:none;
    }
    .confirm-slider-text{
      position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
      padding:0 74px;font-size:17px;font-weight:900;color:var(--text);
      pointer-events:none;text-align:center;white-space:nowrap;text-shadow:0 1px 8px rgba(0,0,0,.35);
    }
    .confirm-slider-knob{
      position:absolute;left:7px;top:7px;width:52px;height:52px;border-radius:17px;
      background:linear-gradient(135deg,#fff,rgba(255,255,255,.84));
      color:var(--primary);display:flex;align-items:center;justify-content:center;
      box-shadow:0 10px 26px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.45) inset;
      transition:transform .18s ease,box-shadow .18s ease;
      z-index:2;
    }
    .confirm-slider-arrow{
      width:24px;height:24px;background:currentColor;
      clip-path:polygon(29% 8%,76% 50%,29% 92%,18% 80%,52% 50%,18% 20%);
      transform:translateX(2px);
      filter:drop-shadow(0 2px 4px rgba(124,58,237,.18));
    }
    .confirm-slider.ready .confirm-slider-knob{
      box-shadow:0 10px 30px rgba(0,0,0,.36),0 0 0 1px rgba(255,255,255,.5) inset,0 0 28px rgba(255,255,255,.35);
    }
    .confirm-slider.confirming{pointer-events:none;opacity:.86;}
    .confirm-slider.confirming .confirm-slider-text{opacity:.78;}

/* =========================================================
   Системные экраны: Технические работы и Блокировка
   ========================================================= */
.system-screen-overlay {
  position: fixed;
  inset: 0;
  z-index: 13000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.system-screen-overlay.show {
  opacity: 1;
  pointer-events: auto;
  display: flex;
}

.system-screen-overlay.instant,
.system-screen-overlay.instant .system-screen-card {
  transition: none;
  animation: none;
}

#maintenance-overlay {
  background: radial-gradient(circle at 50% 20%, rgba(245, 158, 11, 0.14), transparent 55%), var(--bg);
}

#blocked-overlay,
#notfound-overlay {
  background: radial-gradient(circle at 50% 20%, rgba(244, 63, 94, 0.14), transparent 55%), var(--bg);
}

.system-screen-card {
  max-width: 360px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
  animation: systemCardPop 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes systemCardPop {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.system-screen-media {
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 8px;
}

.system-screen-duck {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.45));
  user-select: none;
  -webkit-user-drag: none;
}

.system-screen-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.system-screen-pill.live-pill {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.system-screen-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
  animation: systemPulse 1.8s infinite ease-in-out;
}

@keyframes systemPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.5;
  }
}

.system-screen-pill.danger-pill {
  background: rgba(244, 63, 94, 0.12);
  color: #f43f5e;
  border: 1px solid rgba(244, 63, 94, 0.3);
}

.system-screen-pill.muted-pill {
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.28);
}

.system-screen-danger-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f43f5e;
  box-shadow: 0 0 8px #f43f5e;
}

.system-screen-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.system-screen-text {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 26px;
  max-width: 320px;
}

.system-screen-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 280px;
}

.system-screen-btn {
  width: 100%;
  min-height: 46px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}

/* Стили поддержки и тикетов в Mini App */

/* Кнопка наушников в шапке */
.support-head-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--surface-2);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
  outline: none !important;
  user-select: none;
  flex-shrink: 0;
}

.support-head-btn.active,
.support-head-btn:hover {
  border-color: var(--primary) !important;
  color: #ffffff !important;
  background: var(--primary-dim) !important;
  box-shadow: 0 0 0 1px var(--primary), 0 0 10px var(--primary-glow) !important;
}

.support-head-btn:focus,
.support-head-btn:focus-visible {
  outline: none !important;
}

.support-head-btn:active {
  transform: scale(0.92);
  background: var(--primary-dim);
  color: var(--accent);
}

.support-head-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.support-head-icon svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
}

/* Бейдж непрочитанных сообщений */
.support-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.65), 0 2px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  animation: badgePop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes badgePop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Вкладки тикетов */
.support-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  background: var(--surface-2);
  padding: 4px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.support-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: calc(var(--radius) - 3px);
  color: var(--text-dim);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.support-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
}

.support-tab-count {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  opacity: 0.85;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.support-tab-count.count-updating {
  animation: tabCountPop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes tabCountPop {
  0% { transform: scale(0.85); opacity: 0.5; }
  50% { transform: scale(1.16); opacity: 1; }
  100% { transform: scale(1); opacity: 0.85; }
}

/* Кнопка создания тикета */
.support-create-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 18px;
  margin-bottom: 16px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: all 0.18s;
  -webkit-tap-highlight-color: transparent;
}

.support-create-btn:active {
  transform: scale(0.98);
  filter: brightness(0.92);
}

/* Список карточек тикетов */
.support-tickets-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.support-ticket-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.18s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  -webkit-tap-highlight-color: transparent;
}

.support-ticket-card:active {
  transform: scale(0.985);
  background: var(--surface-2);
  border-color: var(--border-hi);
}

.support-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.support-card-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.support-cat-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-dim);
  border: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.support-ticket-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}

.support-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.support-status-dot.open {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
}

.support-status-dot.waiting {
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.7);
}

.support-status-dot.closed {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
}

.support-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.support-status-badge.open {
  color: #34d399;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.support-status-badge.waiting {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.support-status-badge.closed {
  color: #f87171;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.support-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}

.support-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}

.support-card-lastmsg {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 68%;
}

.support-card-unread-pill {
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
}

/* Форма создания тикета */
.support-form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.support-categories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.support-cat-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: var(--surface-2);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  -webkit-tap-highlight-color: transparent;
}

.support-cat-btn.full-width {
  grid-column: 1 / -1;
  justify-content: center;
}

.support-cat-btn:active,
.support-cat-btn.selected {
  border-color: var(--primary);
  background: var(--primary-dim);
  color: #fff;
  box-shadow: 0 0 0 1px var(--primary), 0 0 10px var(--primary-glow);
}

/* Селекторы для счёта, заказа и платёжки */
.support-ref-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.support-ref-select {
  width: 100%;
  padding: 12px 38px 12px 14px;
  background-color: var(--surface-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238e9baa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: all 0.15s ease;
}

.support-ref-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), 0 0 10px var(--primary-glow);
}

.support-ref-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.support-ref-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.support-ref-chip:active,
.support-ref-chip.selected {
  background: var(--primary-dim);
  border-color: var(--primary);
  color: #fff;
}

/* Вложения фото/видео при создании тикета */
.support-attach-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.support-attach-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px dashed var(--border-hi);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  box-sizing: border-box;
}

.support-attach-btn:active {
  background: var(--surface-3);
  border-color: var(--primary);
}

.support-attach-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.support-attach-preview-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.support-attach-preview-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.support-attach-thumb {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  background: #000;
  flex-shrink: 0;
}

.support-attach-file-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.support-attach-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-attach-size {
  font-size: 11px;
  color: var(--text-dim);
}

.support-attach-remove {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.support-attach-remove:hover,
.support-attach-remove:active {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
}

.support-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.support-field-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
}

.support-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.support-input:focus {
  outline: none;
  border-color: var(--primary);
}

.support-textarea {
  width: 100%;
  min-height: 110px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.support-textarea:focus {
  outline: none;
  border-color: var(--primary);
}

/* Чат тикета */
body.in-support-chat #nav,
body.in-support-chat #scroll-top-fab {
  display: none !important;
}

body.blocked-support-mode #nav,
body.blocked-support-mode #support-head-btn,
body.blocked-support-mode #scroll-top-fab {
  display: none !important;
}

body.in-support-chat #page-support {
  padding-bottom: calc(14px + max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px))) !important;
  overflow: hidden !important;
}

.support-chat-wrap {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 82px - var(--tg-safe-area-inset-top, 0px) - var(--tg-content-safe-area-inset-top, 0px) - max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px)));
  max-height: 100%;
}

.support-chat-header {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.support-chat-header .subpage-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px !important;
  max-width: 36px;
  max-height: 36px;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  flex: 0 0 36px;
  border: none;
  background: transparent;
  padding: 0;
  transition: background 0.15s;
}

.support-chat-header .subpage-back-btn:active {
  background: rgba(255, 255, 255, 0.08);
}

.support-chat-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  gap: 2px;
}

.support-chat-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.support-chat-sub {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-dim);
  line-height: 1.25;
}

.support-chat-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.support-chat-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px !important;
  max-width: 36px;
  max-height: 36px;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
  flex: 0 0 36px;
  transition: all 0.15s;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.support-chat-menu-btn:active,
.support-chat-menu-btn.active {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.2);
}

.support-chat-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 14px;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  padding: 6px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: supportMenuFadeIn 0.15s ease-out;
}

@keyframes supportMenuFadeIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.support-chat-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.support-chat-dropdown-item:active {
  background: rgba(255, 255, 255, 0.08);
}

.support-chat-dropdown-item svg {
  flex-shrink: 0;
  color: var(--text-dim);
}

.support-chat-dropdown-item.danger {
  color: #f87171;
}

.support-chat-dropdown-item.danger svg {
  color: #f87171;
}

.support-chat-dropdown-item.success {
  color: #34d399;
}

.support-chat-dropdown-item.success svg {
  color: #34d399;
}

.support-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 4px 2px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-overflow-scrolling: touch;
}

.support-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  word-break: break-word;
}

.support-bubble.new-incoming,
.support-tg-service.new-incoming {
  animation: supportMsgSlideIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes supportMsgSlideIn {
  0% { opacity: 0; transform: translateY(12px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.support-bubble.user {
  align-self: flex-end;
  background: var(--primary);
  color: #ffffff;
  border-bottom-right-radius: 4px;
}

.support-bubble.admin {
  align-self: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.support-bubble-author {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.82;
  margin-bottom: 2px;
}

.support-bubble-text {
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
}

.support-bubble-time {
  font-size: 10.5px;
  opacity: 0.65;
  align-self: flex-end;
  margin-top: 2px;
}

/* Telegram-style сервисное сообщение в чате */
.support-tg-service {
  align-self: center;
  margin: 10px auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(22, 27, 38, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 550;
  text-align: center;
  max-width: 90%;
  overflow-wrap: anywhere;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.support-tg-service b, .support-tg-service strong {
  color: var(--text);
}

/* Панель ввода сообщения в стиле Telegram */
.support-chat-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 4px 0 2px;
  margin-top: 6px;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
}

.support-chat-input-wrap {
  flex: 1;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 7px 12px 7px 14px;
  min-height: 40px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.support-chat-input-wrap:focus-within {
  border-color: rgba(var(--primary-rgb), 0.45);
  box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.15);
}

.support-chat-textarea {
  flex: 1;
  width: 100%;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  resize: none;
  min-height: 24px;
  height: 24px;
  max-height: 120px;
  padding: 2px 0 !important;
  margin: 0 !important;
  line-height: 20px;
  box-sizing: border-box;
  -webkit-appearance: none;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.support-chat-textarea::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

.support-chat-textarea:focus,
.support-chat-textarea:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

.support-chat-textarea::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.support-chat-char-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  margin-left: 6px;
  margin-bottom: 2px;
  white-space: nowrap;
  user-select: none;
  transition: color 0.18s ease;
}

.support-chat-char-count.limit {
  color: #f87171;
}

.support-chat-send-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px !important;
  max-width: 44px;
  max-height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
  border: none;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.18s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  box-shadow: 0 2px 8px var(--primary-glow);
}

.support-chat-send-btn:active {
  transform: scale(0.92);
}

.support-chat-send-btn.is-empty,
.support-chat-send-btn:disabled {
  opacity: 0.35;
  box-shadow: none;
  transform: scale(0.92);
  cursor: default;
}

.support-chat-send-btn svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
  transform: translateX(1px);
}

.support-chat-closed-notice {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 8px;
  flex-shrink: 0;
}

/* Telegram-style плавающее сервисное сообщение (как при закреплении сообщения в TG) */
#tg-notice {
  position: fixed;
  left: 50%;
  top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + 12px);
  transform: translateX(-50%) translateY(-80px) scale(0.92);
  background: rgba(22, 27, 34, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 600;
  z-index: 10001;
  pointer-events: none;
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  max-width: calc(100vw - 28px);
}

#tg-notice.show {
  transform: translateX(-50%) translateY(0) scale(1);
  opacity: 1;
}

#tg-notice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

#tg-notice-text {
  line-height: 1.2;
}

/* Пустое состояние */
.support-empty-state {
  text-align: center;
  padding: 40px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.support-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}

.support-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.support-empty-desc {
  font-size: 13.5px;
  color: var(--text-dim);
  max-width: 280px;
  line-height: 1.4;
}

/* Лоадер при загрузке */
.support-loading-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 16px;
}

.support-loading-text {
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 500;
}

/* Вложения медиа в сообщениях чата */
.support-msg-media {
  margin-top: 8px;
  border-radius: 10px;
  overflow: hidden;
  max-width: 100%;
}

.support-msg-img {
  display: block;
  width: 100%;
  max-width: 260px;
  max-height: 260px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  background: var(--surface-2);
}

.support-msg-video {
  display: block;
  width: 100%;
  max-width: 260px;
  max-height: 260px;
  border-radius: 10px;
  background: #000;
}

/* Кнопка прикрепления и предпросмотр файла в строке ввода чата */
.support-chat-attach-btn {
  background: var(--surface-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #708499;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px !important;
  max-width: 40px;
  max-height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.support-chat-attach-btn:hover,
.support-chat-attach-btn:active {
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.12);
  border-color: rgba(var(--primary-rgb), 0.3);
}

.support-chat-attach-btn.has-file {
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.16);
  border-color: rgba(var(--primary-rgb), 0.45);
}

.support-chat-attach-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

.support-chat-file-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  margin-bottom: 6px;
  font-size: 12.5px;
}

.support-chat-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-weight: 500;
}

/* Читаемые формы и связанные объекты */
#page-support { max-width: 760px; margin-inline: auto; }
#page-support [hidden] { display: none !important; }
.support-info {
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: linear-gradient(135deg, var(--primary-dim), var(--surface));
}
.support-info:empty { display: none; }
.support-load { color: var(--text); font-weight: 650; font-size: 16px; line-height: 1.5; }
.support-info blockquote {
  margin: 16px 0 0;
  padding: 8px 14px;
  border-left: 3px solid var(--primary);
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.support-helper { color: var(--text-2); font-size: 14px; line-height: 1.5; margin: 8px 0; }
.support-form-card { padding: 20px; border-radius: 20px; gap: 24px; }
.support-ref-options { display: grid; gap: 8px; }
#support-ref-section { gap: 12px; }
#support-ref-label {
  display: block;
  position: relative;
  z-index: 1;
  margin: 0;
  line-height: 1.4;
}
.support-ref-options .support-ref-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 5px;
  min-height: 52px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.support-ref-chip small { color: var(--text-2); font-size: 13px; font-weight: 400; }
.support-ref-chip.selected { border-color: var(--primary); background: var(--primary-dim); color: var(--text); }
.support-ref-search {
  display: block;
  width: 100%;
  margin: 0 0 12px;
}
.support-ref-search input {
  width: 100%;
  height: 48px;
  margin: 0;
  box-sizing: border-box;
}
.support-ref-pages { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 12px; }
.support-ref-pages button {
  min-width: 44px; min-height: 44px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer;
}
#page-support .support-input,
#page-support .support-textarea {
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text);
}
#page-support .support-input::placeholder,
#page-support .support-textarea::placeholder {
  color: var(--text-dim);
  font-family: inherit;
  font-size: 13.5px;
}
#page-support .support-input[readonly],
#page-support .support-input.is-auto {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.09);
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  cursor: default;
}
.support-subject-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.support-subject-input-wrap .support-input.is-auto {
  padding-right: 76px;
}
.support-subject-badge {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(var(--primary-rgb), 0.12);
  border: 1px solid rgba(var(--primary-rgb), 0.28);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  pointer-events: none;
  user-select: none;
}
.support-subject-badge[hidden] {
  display: none;
}
.support-readonly-note {
  margin: 6px 0 0;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
}
#page-support .btn,
#page-support .support-create-btn,
#page-support .support-cat-btn,
#page-support .support-tab {
  min-height: 44px;
}
#page-support button {
  touch-action: manipulation;
}
#page-support button:disabled { opacity: .5; cursor: default; }
#page-support button:not(.support-chat-send-btn):not(.support-chat-attach-btn):focus-visible,
#page-support input:not(#support-chat-textarea):focus-visible,
#page-support textarea:not(#support-chat-textarea):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
.support-chat-title { white-space: normal; overflow-wrap: anywhere; font-size: 16px; }
.support-bubble-text { font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.support-msg-img { object-fit: contain; max-height: 360px; cursor: zoom-in; }
.support-chat-messages { min-height: 0; }
.support-media-dialog { max-width: min(94vw, 900px); max-height: 94dvh; padding: 16px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 18px; }
.support-media-dialog::backdrop { background: rgba(0,0,0,.8); }
.support-media-dialog img { display: block; max-width: 100%; max-height: 75dvh; object-fit: contain; }
.support-media-dialog button { margin-top: 12px; min-height: 44px; }
@media (max-width: 380px) {
  .support-form-card { padding: 14px; }
  .support-chat-header { padding: 12px; gap: 8px; }
  .support-chat-input-bar { gap: 6px; }
}
@media (max-width: 600px) {
  #page-support .support-input,
  #page-support .support-textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #page-support *, .support-head-btn { transition: none !important; animation: none !important; }
}
.support-product-button { margin-top: 12px; }

    .calc-fab{
      position:fixed; right:16px; z-index:92;
      bottom:calc(86px + max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px)));
      width:50px; height:50px; aspect-ratio:1/1; border-radius:50%;
      padding:0; box-sizing:border-box;
      background:linear-gradient(135deg,var(--primary) 0%,var(--primary-deep) 55%,var(--primary-deeper) 100%);
      border:1px solid rgba(255,255,255,.24); outline:none;
      box-shadow:0 8px 24px rgba(var(--primary-rgb),.45), 0 2px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35);
      display:flex; align-items:center; justify-content:center;
      cursor:pointer;
      transition:bottom .22s cubic-bezier(.2,.8,.2,1), transform .18s, box-shadow .2s, opacity .2s;
      -webkit-tap-highlight-color:transparent; overflow:hidden;
      backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    }
    .calc-fab:active{ transform:scale(.92); }
    .calc-fab.open{
      background:linear-gradient(135deg,var(--accent) 0%,var(--primary) 60%,var(--primary-deep) 100%);
      box-shadow:0 10px 28px rgba(var(--primary-rgb),.55), inset 0 1px 0 rgba(255,255,255,.4);
    }
    .calc-fab #calc-fab-icon, .calc-fab img{
      width:24px; height:24px;
      display:block;
      transition:transform .25s ease, opacity .2s ease;
    }
    .calc-fab.open #calc-fab-icon, .calc-fab.open img{ transform:rotate(90deg) scale(.5); opacity:0; position:absolute; }
    .calc-fab #calc-fab-close{ position:absolute; display:none; }
    .calc-fab.open #calc-fab-close{ display:block !important; animation:calcPop .25s ease; }

    body.keyboard-open .calc-fab{
      bottom:12px;
      right:14px;
      width:46px;
      height:46px;
      box-shadow:0 6px 18px rgba(var(--primary-rgb),.4), 0 2px 6px rgba(0,0,0,.3);
    }
    body.keyboard-open .calc-window{
      bottom:68px;
      right:14px;
    }

    .calc-window{
      position:fixed; right:16px; z-index:91;
      bottom:calc(146px + max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px)));
      width:282px; max-width:calc(100vw - 32px);
      background:var(--surface); border:1px solid var(--border-hi);
      border-radius:20px; padding:16px;
      box-shadow:0 18px 44px rgba(0,0,0,.55);
      transform-origin:bottom right;
      transform:scale(.35) translate(40px,40px); opacity:0; pointer-events:none; visibility:hidden;
      transition:bottom .22s cubic-bezier(.2,.8,.2,1), transform .3s cubic-bezier(.34,1.4,.5,1), opacity .22s;
    }
    .calc-window.open{
      transform:scale(1) translate(0,0); opacity:1; pointer-events:auto; visibility:visible;
    }
    .calc-title{
      font-size:14px; font-weight:800; color:var(--text); margin-bottom:12px;
      display:flex; align-items:center; gap:7px; line-height:1;
    }
    .calc-title .tabler-icon{ display:inline-flex; align-items:center; justify-content:center; line-height:1; flex-shrink:0; }
    .calc-title span{ display:inline-flex; align-items:center; line-height:1; }

    .calc-field{
      position:relative; display:flex; align-items:center; gap:8px;
      background:var(--surface-2); border:1px solid var(--border);
      border-radius:13px; padding:13px 14px; transition:border-color .18s;
    }
    .calc-field:focus-within{ border-color:var(--primary); }
    .calc-field input{
      background:none; border:none; outline:none; color:var(--text);
      font-size:22px; font-weight:800; width:100%; min-width:0; font-family:inherit;
      -webkit-appearance:none; -moz-appearance:textfield;
    }
    .calc-field input::-webkit-inner-spin-button{ display:none; }
    .calc-field input::placeholder{ color:var(--text-dim); }
    .calc-result{ background:rgba(124,58,237,.08); }
    #calc-output{ flex:1; font-size:22px; font-weight:800; color:var(--accent-hi); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .calc-unit{ flex-shrink:0; font-size:18px; font-weight:700; color:var(--text-muted); display:inline-flex; align-items:center; }
    .calc-max{
      flex-shrink:0; border:none; cursor:pointer;
      background:var(--primary-dim); color:var(--accent-hi);
      font-size:11px; font-weight:800; letter-spacing:.5px;
      border-radius:7px; padding:5px 9px; transition:all .15s;
      -webkit-tap-highlight-color:transparent;
    }
    .calc-max:active{ transform:scale(.9); background:var(--primary); color:#fff; }

    .calc-swap-wrap{ display:flex; justify-content:center; margin:-6px 0; position:relative; z-index:2; }
    .calc-swap{
      width:38px; height:38px; border-radius:50%; cursor:pointer;
      background:var(--surface-3); border:3px solid var(--surface);
      color:var(--accent); display:flex; align-items:center; justify-content:center;
      transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .2s;
      -webkit-tap-highlight-color:transparent;
    }
    .calc-swap:active{ background:var(--primary-dim); }
    .calc-swap.flipped{ transform:rotate(180deg); }
    .calc-hint{ font-size:11px; color:var(--text-muted); text-align:center; margin-top:10px; min-height:14px; }

    @keyframes calcPop{ from{ transform:scale(0) rotate(-90deg); } to{ transform:scale(1) rotate(0); } }

#gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  text-align: center;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

#gate-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#gate-overlay .gate-card {
  max-width: 360px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
  animation: systemCardPop 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

#gate-overlay .gate-media {
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 16px;
}

#gate-overlay .gate-media::before {
  content: '';
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--primary-rgb), 0.25) 0%, rgba(var(--primary-rgb), 0) 70%);
  filter: blur(16px);
  z-index: 0;
  pointer-events: none;
  animation: gateGlowPulse 2.8s ease-in-out infinite alternate;
}

@keyframes gateGlowPulse {
  0% { transform: scale(0.9); opacity: 0.55; }
  100% { transform: scale(1.15); opacity: 1; }
}

#gate-overlay .gate-duck {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.42));
  user-select: none;
  -webkit-user-drag: none;
  animation: gateDuckFloat 3s ease-in-out infinite;
}

@keyframes gateDuckFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

#gate-overlay .gate-loader {
  margin-bottom: 18px;
}

#gate-overlay.error .gate-loader {
  display: none;
}

#gate-overlay .gate-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

#gate-overlay .gate-text {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 320px;
  margin: 0 auto;
}

#gate-overlay .gate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 22px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  gap: 8px;
}
#topup-amount:focus {
  border-color: var(--primary) !important;
}

#единая темная тема Mini App
html, body {
  background: var(--bg);
  color: var(--text);
}

/* Inter: Google Fonts via Fontsource, SIL Open Font License. */
@font-face { font-family: 'API Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/purchase-api/fonts/inter-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'API Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/purchase-api/fonts/inter-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'API Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/purchase-api/fonts/inter-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'API Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/purchase-api/fonts/inter-cyrillic-600-normal.woff2') format('woff2'); unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'API Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/purchase-api/fonts/inter-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'API Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/purchase-api/fonts/inter-cyrillic-700-normal.woff2') format('woff2'); unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

.pa-page, .pa-entry, .pa-modal {
  font-family: 'API Inter', 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
}

.pa-page {
  padding: 14px 16px 88px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

#pa-root {
  max-width: 600px;
  margin: 0 auto;
}

.pa-page button, .pa-page input, .pa-page textarea {
  font-family: inherit;
}

.pa-page button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pa-page button:disabled {
  cursor: default;
  opacity: .45;
}

.pa-page button:focus-visible, .pa-page a:focus-visible, .pa-entry:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.pa-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.pa-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.pa-header h1 {
  font-size: 21px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
}

.pa-icon-button {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.pa-icon-button:active {
  transform: scale(0.92);
  background: var(--surface-3);
}

.pa-card {
  padding: 20px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
}

.pa-card h2 {
  font-size: 16.5px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--text);
}

.pa-card-title {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.pa-card-title .pa-icon {
  color: var(--primary);
}

.pa-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--success);
  background: var(--success-dim);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 600;
  margin: 0 0 14px 2px;
}

.pa-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

.pa-wallet {
  background: radial-gradient(130% 130% at top left, var(--primary-dim) 0%, rgba(20, 23, 33, 0.98) 65%), var(--surface);
  border: 1px solid var(--border-hi);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26), 0 0 20px var(--primary-glow);
  position: relative;
  overflow: hidden;
}

.pa-wallet-label {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 600;
}

.pa-wallet-label .pa-icon {
  color: var(--primary);
}

.pa-wallet-total {
  font-size: clamp(32px, 8vw, 42px);
  font-weight: 800;
  letter-spacing: -1px;
  margin: 12px 0 16px;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.pa-wallet-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.pa-wallet-stat {
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border);
}

.pa-wallet-stat span {
  display: block;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-weight: 500;
}

.pa-wallet-stat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-weight: 500;
}

.pa-wallet-stat-label span {
  margin-bottom: 0;
}

.pa-dot-success {
  color: var(--success);
}

.pa-dot-gold {
  color: var(--gold);
}

.pa-wallet-stat strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.pa-button {
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-h) 100%);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  box-shadow: 0 4px 14px var(--primary-glow);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.pa-button:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px var(--primary-glow);
}

.pa-secondary {
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: none;
}

.pa-secondary:active {
  background: var(--surface-3);
}

.pa-button + .pa-button {
  margin-top: 10px;
}

.pa-token {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease;
}

.pa-token code {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  letter-spacing: 0.5px;
  color: var(--text);
  overflow-wrap: anywhere;
  padding: 2px 4px;
  -webkit-user-select: text;
  user-select: text;
}

.pa-token .pa-icon-button {
  background: transparent;
  border: none;
  width: 36px;
  height: 36px;
  min-width: 36px;
  color: var(--text-muted);
}

.pa-token .pa-icon-button:active {
  color: var(--primary);
  transform: scale(0.9);
}

.pa-hint, .pa-intro {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 12px 0 16px;
}

.pa-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.pa-link {
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 14px;
  min-height: 72px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  box-sizing: border-box;
}

.pa-link:active {
  transform: scale(0.98);
  background: var(--surface-2);
  border-color: var(--border-hi);
}

.pa-link-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 11px;
  background: var(--primary-dim);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.pa-link:active .pa-link-icon {
  transform: scale(0.94);
}

.pa-link > span:nth-child(2) {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
}

.pa-link > .pa-icon {
  width: 15px;
  height: 15px;
  color: var(--text-dim);
  flex-shrink: 0;
  transition: transform 0.15s ease, color 0.15s ease;
}

.pa-link:active > .pa-icon {
  color: var(--primary);
  transform: translateX(2px);
}

.pa-docs {
  display: grid;
  gap: 8px;
  padding: 14px 0 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

.pa-docs h2 {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.pa-doc-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 14px;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--primary);
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.pa-doc-link:active {
  background: var(--surface-2);
  border-color: var(--border-hi);
}

.pa-doc-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.pa-doc-icon {
  display: flex;
  flex-shrink: 0;
}

.pa-doc-copy {
  flex: 1;
  min-width: 0;
}

.pa-doc-copy strong, .pa-doc-copy small {
  display: block;
  overflow-wrap: anywhere;
}

.pa-doc-copy strong {
  font-size: 13px;
  color: var(--text);
}

.pa-doc-copy small {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
}

.pa-doc-link > .pa-icon {
  flex-shrink: 0;
}

.pa-docs .pa-icon {
  width: 16px;
  height: 16px;
}

.pa-gate-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  color: var(--primary);
  background: var(--primary-dim);
  margin: 0 auto 18px;
}

.pa-gate-icon .pa-icon {
  width: 26px;
  height: 26px;
}

.pa-gate, .pa-confirm, .pa-empty {
  text-align: center;
}

.pa-gate h2 {
  font-size: 22px;
  margin: 10px 0 16px;
}

.pa-gate p, .pa-confirm p {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.65;
  margin: 14px 0 20px;
}

.pa-eyebrow {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--primary);
}

.pa-confirm dl {
  margin-top: 20px;
  text-align: left;
}

.pa-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 18px 0 8px;
}

.pa-input {
  display: block;
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--surface-2);
  font-size: 15px;
  line-height: 1.5;
  -webkit-user-select: text;
  user-select: text;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pa-input::placeholder {
  color: var(--text-dim);
}

.pa-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-dim);
}

.pa-amount-input {
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 12px 16px;
}

.pa-amounts {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.pa-amounts button {
  flex: 1;
  min-height: 42px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.pa-amounts button:active,
.pa-amounts button.is-active {
  transform: scale(0.96);
  background: var(--primary-dim);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 0 10px var(--primary-glow);
}

.pa-data-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  font-size: 13.5px;
  line-height: 1.5;
  border-bottom: 1px solid var(--border);
}

.pa-data-row:last-child {
  border-bottom: 0;
}

.pa-data-row dt {
  color: var(--text-muted);
  flex: 1;
}

.pa-data-row dd {
  font-weight: 600;
  text-align: right;
  flex: 1;
  overflow-wrap: anywhere;
  min-width: 0;
  color: var(--text);
}

.pa-reference {
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin: 16px 0;
}

.pa-reference span {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.pa-reference code {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  word-break: break-all;
  -webkit-user-select: text;
  user-select: text;
  color: var(--text);
}

.pa-error {
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  background: var(--danger-dim);
  color: var(--text);
  border: 1px solid var(--danger);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 16px;
}

.pa-error[hidden], #settings-api-section[hidden] {
  display: none !important;
}

.pa-loading {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  color: var(--text-muted);
  font-size: 13.5px;
}

.pa-empty {
  padding: 44px 20px;
  color: var(--text-muted);
}

.pa-empty > .pa-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 14px;
}

.pa-empty h2 {
  color: var(--text);
}

.pa-low {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid rgba(245, 158, 11, 0.25);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  margin: -4px 0 18px;
}

.pa-toggle-row {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
}

/* Вход в API из настроек: стиль идентичен строкам настроек */
.pa-entry,
#settings-api-section {
  width: 100%;
  min-height: 52px;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: 12px 14px;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
  box-sizing: border-box;
}

.pa-entry:active,
#settings-api-section:active {
  background: rgba(255, 255, 255, 0.04) !important;
}

.pa-entry .settings-item-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 10px;
  background: var(--surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  transition: background 0.2s ease, color 0.2s ease;
}

.pa-entry:active .settings-item-icon {
  background: var(--primary-dim);
}

.pa-entry .settings-action-arrow {
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  transition: transform 0.15s ease, color 0.15s ease;
}

.pa-entry:active .settings-action-arrow {
  color: var(--primary);
  transform: translateX(2px);
}

#settings-language-row {
  border-bottom: 1px solid var(--border);
}

#settings-language-row.has-no-border,
.settings-group:has(#settings-api-section[hidden]) #settings-language-row {
  border-bottom: none !important;
}

@media (max-width: 380px) {
  .pa-card { padding: 16px; }
  .pa-links { grid-template-columns: 1fr; }
  .pa-link { min-height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .pa-button { transition: none; }
  .pa-page { animation: none; }
}

.pa-modal {
  font-family: 'API Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.pa-sheet {
  max-width: 480px;
  border-radius: 24px 24px 0 0;
  background: var(--surface);
  border-top: 1px solid var(--border-hi);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
}

.pa-sheet .pa-header {
  justify-content: center;
  text-align: center;
}

.pa-sheet .pa-header h2 {
  font-size: 19px;
  line-height: 1.4;
  font-weight: 700;
}

.pa-sheet .pa-card {
  padding: 0;
  border: 0;
  background: transparent;
  margin: 0;
  box-shadow: none;
}

.pa-sheet button, .pa-sheet input {
  font-family: inherit;
}

.pa-sheet .pa-button {
  cursor: pointer;
}

.pa-sheet button:disabled {
  opacity: .45;
}

.pa-sheet button:focus-visible, .pa-sheet .confirm-slider:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.pa-reference-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pa-reference-row code {
  flex: 1;
  min-width: 0;
}

.pa-reference-row .pa-icon {
  width: 17px;
  height: 17px;
}

.pa-reference-row .pa-icon-button {
  border: 0;
  background: transparent;
}

.pa-sheet .confirm-slider-text {
  padding: 0 60px 0 68px;
  font-size: 14px;
}

#pa-fund-slider .confirm-slider-fill {
  width: 100%;
  transform-origin: left center;
  transition: transform .18s ease;
}

#pa-fund-slider.pa-dragging .confirm-slider-knob,
#pa-fund-slider.pa-dragging .confirm-slider-fill {
  transition: none;
  will-change: transform;
}

#pa-fund-slider.pa-dragging::after {
  animation: none;
}

#pa-fund-slider.pa-dragging .confirm-slider-fill {
  box-shadow: none;
}

/* Purchase API: Стили истории операций, заказов и аналитики */

.pa-history-list {
  display: grid;
  gap: 10px;
}

.pa-history-item {
  width: 100%;
  min-height: 70px;
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: left;
  padding: 13px 15px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.16s ease, background 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
}

.pa-history-item:active {
  transform: scale(0.985);
  background: var(--surface-2);
  border-color: var(--border-hi);
}

.pa-history-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-dim);
  color: var(--primary);
  border-radius: 12px;
  border: 1px solid rgba(var(--primary-rgb), 0.16);
  flex-shrink: 0;
}

.pa-history-icon .pa-icon {
  width: 20px;
  height: 20px;
}

.pa-history-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pa-history-copy strong {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}

.pa-history-date-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.3;
}

.pa-history-date {
  font-size: 12px;
  color: var(--text-muted);
}

.pa-history-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.3px;
}

.pa-history-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}

.pa-history-cost {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.pa-history-cost.pa-cost-pos {
  color: var(--success);
}

/* Статусные бейджи */
.pa-history-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.2px;
  flex-shrink: 0;
  line-height: 1.25;
}

.pa-history-meta.pa-completed {
  background: var(--success-dim);
  color: var(--success);
  border: 1px solid rgba(34, 197, 94, 0.28);
}

.pa-history-meta.pa-failed {
  background: var(--danger-dim);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.28);
}

.pa-history-meta.pa-reconciling,
.pa-history-meta.pa-processing,
.pa-history-meta.pa-pending {
  background: var(--gold-dim);
  color: var(--gold);
  border: 1px solid rgba(245, 158, 11, 0.28);
}

.pa-history-meta.pa-amount {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.pa-history-item > .pa-icon {
  width: 15px;
  height: 15px;
  color: var(--text-dim);
  flex-shrink: 0;
  transition: transform 0.15s ease, color 0.15s ease;
}

.pa-history-item:active > .pa-icon {
  color: var(--primary);
  transform: translateX(2px);
}

.pa-pagination {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin: 22px 0 10px;
}

.pa-pagination-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* Статистика и аналитика */
.pa-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
  transition: opacity 0.15s ease;
}

.pa-stat-grid.pa-stat-loading {
  opacity: 0.55;
  pointer-events: none;
}

.pa-stat-tile {
  padding: 18px 16px;
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  background: radial-gradient(100% 100% at top left, var(--primary-dim) 0%, var(--surface) 80%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
  position: relative;
  overflow: hidden;
}

.pa-stat-tile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.pa-stat-tile-header span {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 0;
}

.pa-stat-tile-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--primary-dim);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pa-stat-tile-icon .pa-icon {
  width: 14px;
  height: 14px;
}

.pa-stat-tile > span {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 8px;
}

.pa-stat-tile strong {
  display: block;
  font-weight: 800;
  font-size: 24px;
  color: var(--text);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}

.pa-periods {
  display: flex;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 12px;
}

.pa-periods button {
  flex: 1;
  min-height: 40px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 6px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
}

.pa-periods button.is-active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-h) 100%);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 8px var(--primary-glow);
}

.pa-premium-months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.pa-premium-months > div {
  padding: 14px 8px;
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.15s ease;
}

.pa-premium-months span {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.pa-premium-months strong {
  display: block;
  font-size: 20px;
  margin-top: 6px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Каркас страницы настроек */
#page-settings {
  padding: 12px 16px 80px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.settings-section {
  margin-bottom: 20px;
}

.settings-section-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--primary);
  margin: 0 0 8px 4px;
  transition: color 0.25s ease;
}

.settings-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  min-height: 52px;
  box-sizing: border-box;
  transition: background 0.15s ease;
}

.settings-item:last-child {
  border-bottom: none;
}

.settings-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.settings-item-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 10px;
  background: var(--surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  transition: color 0.25s ease, background-color 0.25s ease;
}

.settings-item-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

.settings-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.settings-item-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-item-sub {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.35;
}

.settings-item-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  flex-shrink: 0;
}

/* Компоненты экрана настроек */

/* 1. Палитра цветов */
.settings-color-palette {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.settings-color-circle {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  box-sizing: border-box;
}

/* Увеличенная область клика для пальца */
.settings-color-circle::after {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border-radius: 50%;
}

.settings-color-circle:active {
  transform: scale(0.9);
}

/* Кольцо выделения активного цвета в точности как на скриншоте */
.settings-color-circle.is-active {
  box-shadow: 0 0 0 2.5px var(--surface), 0 0 0 4.5px currentColor;
  transform: scale(1.05);
}

/* Цвета кружочков */
.settings-color-circle[data-color="telegram-blue"] {
  background-color: #2ea5ff;
  color: #2ea5ff;
}
.settings-color-circle[data-color="neon-pink"] {
  background-color: #ec4899;
  color: #ec4899;
}
.settings-color-circle[data-color="lavender"] {
  background-color: #8b5cf6;
  color: #8b5cf6;
}
.settings-color-circle[data-color="amber"] {
  background-color: #f59e0b;
  color: #f59e0b;
}
.settings-color-circle[data-color="mint"] {
  background-color: #10b981;
  color: #10b981;
}
.settings-color-circle[data-color="coral"] {
  background-color: #f43f5e;
  color: #f43f5e;
}

/* 2. Переключатель-тумблер (Switch) */
.settings-switch {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.settings-switch input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

.settings-switch-track {
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  position: relative;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  box-sizing: border-box;
}

.settings-switch-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.settings-switch input:checked + .settings-switch-track {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 2px 10px var(--primary-glow);
}

.settings-switch input:checked + .settings-switch-track .settings-switch-thumb {
  transform: translateX(20px);
}

/* 3. Сегментный переключатель языка */
.settings-lang-seg {
  position: relative;
  isolation: isolate;
  width: 116px;
  display: flex;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
  box-sizing: border-box;
}

.settings-lang-btn {
  min-width: 44px;
  min-height: 36px;
  flex: 1;
  z-index: 1;
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}

.settings-lang-btn.active {
  color: #ffffff;
}

.settings-lang-btn:active:not(.active) {
  opacity: 0.7;
}

.settings-lang-btn:disabled {
  cursor: default;
  opacity: 1;
}

/* 4. Блок сервиса и кнопки помощи */
.settings-app-card {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  border-bottom: 1px solid var(--border);
}

.settings-app-mark {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  background: var(--primary-dim);
  border: 1px solid rgba(var(--primary-rgb), 0.22);
}

.settings-app-mark svg {
  width: 22px;
  height: 22px;
}

.settings-app-copy {
  min-width: 0;
  text-align: left;
}

.settings-app-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}

.settings-app-description {
  max-width: 34ch;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.4;
}

.settings-action-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 14px;
  border: none;
  background: transparent;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-size: 14.5px;
  text-align: left;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  box-sizing: border-box;
}

.settings-action-row:last-child {
  border-bottom: none;
}

.settings-action-row:active {
  background: rgba(255, 255, 255, 0.04);
}

.settings-action-row-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings-action-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 8px;
  background: var(--surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
}

.settings-action-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.settings-action-title {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
}

.settings-action-arrow {
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
}

.settings-action-arrow svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

/* Кнопка поддержки внутри блока сервиса */
.settings-support-card {
  padding: 14px;
  border-bottom: 1px solid var(--border);
}

.settings-support-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-h) 100%);
  color: #ffffff;
  border: none;
  font-weight: 600;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 14px var(--primary-glow);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.settings-support-btn:active {
  transform: scale(0.98);
}

.settings-support-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

/* Кнопка сброса настроек */
.settings-reset-row {
  padding: 12px 14px;
  text-align: center;
}

.settings-reset-btn {
  background: transparent;
  border: 1px dashed rgba(239, 68, 68, 0.35);
  color: #ef4444;
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.settings-reset-btn:active {
  background: rgba(239, 68, 68, 0.12);
  border-color: #ef4444;
}

.settings-reset-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.settings-lang-seg::before {
  content: '';
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 9px) / 2);
  border-radius: 7px;
  background: var(--primary);
  box-shadow: 0 2px 8px var(--primary-glow);
  transition: transform 180ms ease, background-color 180ms ease;
  pointer-events: none;
}
.settings-lang-seg[data-language="en"]::before {
  transform: translateX(calc(100% + 3px));
}
.settings-switch input:focus-visible + .settings-switch-track,
.settings-lang-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .settings-switch-track,
  .settings-switch-thumb,
  .settings-lang-seg::before,
  .settings-lang-btn {
    transition: none;
  }
}

/* Вход в раздел API внутри группы настроек — монолитный элемент списка */
.settings-group > #settings-api-section,
.settings-group > .pa-entry,
#settings-api-section.pa-entry {
  width: 100%;
  min-height: 52px;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: 12px 14px;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
  box-sizing: border-box;
}

.settings-group > #settings-api-section:active,
.settings-group > .pa-entry:active {
  background: rgba(255, 255, 255, 0.04) !important;
}

.settings-group > #settings-api-section .settings-item-icon,
.settings-group > .pa-entry .settings-item-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 10px;
  background: var(--surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  transition: background 0.2s ease, color 0.2s ease;
}

.settings-group > #settings-api-section:active .settings-item-icon,
.settings-group > .pa-entry:active .settings-item-icon {
  background: var(--primary-dim);
}

.settings-group > #settings-api-section .settings-action-arrow,
.settings-group > .pa-entry .settings-action-arrow {
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  transition: transform 0.15s ease, color 0.15s ease;
}

.settings-group > #settings-api-section:active .settings-action-arrow,
.settings-group > .pa-entry:active .settings-action-arrow {
  color: var(--primary);
  transform: translateX(2px);
}

/* Разделители строк: прямая линия между языком и API */
#settings-language-row {
  border-bottom: 1px solid var(--border);
}

#settings-language-row.has-no-border,
.settings-group:has(#settings-api-section[hidden]) #settings-language-row {
  border-bottom: none !important;
}

/* Тема: Telegram Blue (по умолчанию) */
:root,
:root:not([data-color-theme]),
[data-color-theme="telegram-blue"] {
  --primary: #2ea5ff;
  --primary-rgb: 46, 165, 255;
  --primary-h: #47b0ff;
  --primary-deep: #1d7cd8;
  --primary-deeper: #1852c9;
  --primary-glow: rgba(46, 165, 255, 0.35);
  --primary-dim: rgba(46, 165, 255, 0.12);
  --border-hi: rgba(46, 165, 255, 0.45);
  --accent: #38bdf8;
  --accent-rgb: 56, 189, 248;
  --accent-hi: #e0f2fe;
}

/* Тема: Neon Pink */
[data-color-theme="neon-pink"] {
  --primary: #ec4899;
  --primary-rgb: 236, 72, 153;
  --primary-h: #f472b6;
  --primary-deep: #db2777;
  --primary-deeper: #be185d;
  --primary-glow: rgba(236, 72, 153, 0.35);
  --primary-dim: rgba(236, 72, 153, 0.12);
  --border-hi: rgba(236, 72, 153, 0.45);
  --accent: #f472b6;
  --accent-rgb: 244, 114, 182;
  --accent-hi: #fdf2f8;
}

/* Тема: Lavender */
[data-color-theme="lavender"] {
  --primary: #8b5cf6;
  --primary-rgb: 139, 92, 246;
  --primary-h: #a78bfa;
  --primary-deep: #7c3aed;
  --primary-deeper: #6d28d9;
  --primary-glow: rgba(139, 92, 246, 0.35);
  --primary-dim: rgba(139, 92, 246, 0.12);
  --border-hi: rgba(139, 92, 246, 0.45);
  --accent: #a78bfa;
  --accent-rgb: 167, 139, 250;
  --accent-hi: #f5f3ff;
}

/* Тема: Amber */
[data-color-theme="amber"] {
  --primary: #f59e0b;
  --primary-rgb: 245, 158, 11;
  --primary-h: #fbbf24;
  --primary-deep: #d97706;
  --primary-deeper: #b45309;
  --primary-glow: rgba(245, 158, 11, 0.35);
  --primary-dim: rgba(245, 158, 11, 0.12);
  --border-hi: rgba(245, 158, 11, 0.45);
  --accent: #fbbf24;
  --accent-rgb: 251, 191, 36;
  --accent-hi: #fffbeb;
}

/* Тема: Mint */
[data-color-theme="mint"] {
  --primary: #10b981;
  --primary-rgb: 16, 185, 129;
  --primary-h: #34d399;
  --primary-deep: #059669;
  --primary-deeper: #047857;
  --primary-glow: rgba(16, 185, 129, 0.35);
  --primary-dim: rgba(16, 185, 129, 0.12);
  --border-hi: rgba(16, 185, 129, 0.45);
  --accent: #34d399;
  --accent-rgb: 52, 211, 153;
  --accent-hi: #ecfdf5;
}

/* Тема: Coral */
[data-color-theme="coral"] {
  --primary: #f43f5e;
  --primary-rgb: 244, 63, 94;
  --primary-h: #fb7185;
  --primary-deep: #e11d48;
  --primary-deeper: #be123c;
  --primary-glow: rgba(244, 63, 94, 0.35);
  --primary-dim: rgba(244, 63, 94, 0.12);
  --border-hi: rgba(244, 63, 94, 0.45);
  --accent: #fb7185;
  --accent-rgb: 251, 113, 133;
  --accent-hi: #fff1f2;
}