/*
 * ═══════════════════════════════════════════════════════════
 *  NEMENKOFF LAB — CALC 2028 LAYER
 *  Подключать ПОСЛЕ glass.css
 *  Только визуал. Логика/JS/ID/классы не затронуты.
 * ═══════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════════════════════ */

@keyframes c28-glow-pulse {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1; }
}

@keyframes c28-border-spin {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes c28-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes c28-promo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139,92,246,0), 0 8px 40px rgba(139,92,246,0.18); }
  50%       { box-shadow: 0 0 0 4px rgba(139,92,246,0.10), 0 8px 48px rgba(139,92,246,0.28); }
}

@keyframes c28-price-in {
  0%   { transform: translateY(6px) scale(0.97); opacity: 0; }
  100% { transform: translateY(0)   scale(1);    opacity: 1; }
}

@keyframes c28-optimal-halo {
  0%, 100% { text-shadow: 0 0 8px rgba(104,201,138,0.5), 0 0 18px rgba(104,201,138,0.25); }
  50%       { text-shadow: 0 0 14px rgba(104,201,138,0.85), 0 0 30px rgba(104,201,138,0.45); }
}

@keyframes c28-hot-halo {
  0%, 100% { text-shadow: 0 0 8px rgba(248,113,113,0.5), 0 0 18px rgba(248,113,113,0.25); }
  50%       { text-shadow: 0 0 14px rgba(248,113,113,0.85), 0 0 30px rgba(248,113,113,0.45); }
}

@keyframes c28-crypto-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-2px); }
}


/* ═══════════════════════════════════════════════════════════
   CALC GRID — общий контейнер
═══════════════════════════════════════════════════════════ */

.calc-grid {
  gap: 20px !important;
  margin-top: 8px !important;
}


/* ═══════════════════════════════════════════════════════════
   CALC-SIDE & RESULT-SIDE — стеклянные панели 2028
═══════════════════════════════════════════════════════════ */

.calc-side,
.result-side {
  position: relative !important;
  border-radius: 28px !important;
  padding: 26px !important;
  background: rgba(10,8,22,0.72) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  backdrop-filter: blur(32px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.4) !important;
  box-shadow:
    0 0 0 1px rgba(139,92,246,0.07),
    0 4px 24px rgba(0,0,0,0.28),
    0 1px 0 rgba(255,255,255,0.06) inset !important;
  overflow: visible !important;
  transition: box-shadow 0.4s ease !important;
}

/* Внутренний ambient-glow сверху */
.calc-side::before,
.result-side::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 28px !important;
  background: radial-gradient(
    ellipse 80% 40% at 50% 0%,
    rgba(139,92,246,0.07) 0%,
    transparent 70%
  ) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Shine-line по верхнему краю */
.calc-side::after,
.result-side::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 15% !important;
  right: 15% !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.18) 40%,
    rgba(167,139,250,0.22) 60%,
    transparent
  ) !important;
  border-radius: 99px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.calc-side > *,
.result-side > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Hover — усиливаем glow */
.calc-side:hover,
.result-side:hover {
  box-shadow:
    0 0 0 1px rgba(139,92,246,0.14),
    0 8px 40px rgba(0,0,0,0.32),
    0 0 60px rgba(139,92,246,0.05),
    0 1px 0 rgba(255,255,255,0.08) inset !important;
}


/* ═══════════════════════════════════════════════════════════
   RANGE-LABEL
═══════════════════════════════════════════════════════════ */

.range-label {
  margin-bottom: 10px !important;
}

.range-label span {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: rgba(160,170,184,0.75) !important;
}

.range-label b {
  font-size: 15px !important;
  font-weight: 900 !important;
  font-family: 'Unbounded', sans-serif !important;
  background: linear-gradient(135deg, var(--gold2, #a78bfa), var(--cyan, #60a5fa)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}


/* ═══════════════════════════════════════════════════════════
   SELECT-FIELD — кастомный стеклянный dropdown
═══════════════════════════════════════════════════════════ */

.select-field {
  width: 100% !important;
  padding: 13px 42px 13px 16px !important;
  border-radius: 16px !important;
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent) !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b5cf6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    right 14px center / 12px no-repeat,
    rgba(8,6,20,0.93) !important;
  color: var(--text, #f4f6fc) !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  outline: none !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow:
    0 0 0 1px var(--gold),
    0 0 7px -1px var(--gold),
    0 8px 24px rgba(0,0,0,0.45) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}

.select-field:focus {
  border-color: color-mix(in srgb, var(--gold) 55%, transparent) !important;
  background-color: rgba(12,8,28,0.96) !important;
  box-shadow:
    0 0 0 1px var(--gold),
    0 0 14px -1px var(--gold),
    0 8px 24px rgba(0,0,0,0.5) !important;
}

.select-field:hover {
  border-color: color-mix(in srgb, var(--gold) 45%, transparent) !important;
  background-color: rgba(12,8,28,0.96) !important;
}

/* Option — нативный стиль (браузерное ограничение) */
.select-field option {
  background: #0e0b1a !important;
  color: #f4f6fc !important;
}


/* ═══════════════════════════════════════════════════════════
   SLIDERS — дополняем glass.css, усиливаем 2028-стиль
═══════════════════════════════════════════════════════════ */

/* Трек — тоньше и темнее */
input[type=range] {
  height: 5px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.4) !important;
}

/* Fill */
.range-fill {
  height: 5px !important;
  border-radius: 99px !important;
  box-shadow:
    0 0 10px rgba(139,92,246,0.55),
    0 0 22px rgba(139,92,246,0.22) !important;
}

/* Thumb webkit */
input[type=range]::-webkit-slider-thumb {
  width: 20px !important;
  height: 20px !important;
  margin-top: -8px !important;
  background: linear-gradient(145deg,
    rgba(255,255,255,0.96) 0%,
    rgba(220,210,255,0.88) 100%) !important;
  border: 1.5px solid rgba(167,139,250,0.50) !important;
  box-shadow:
    0 0 0 3px rgba(139,92,246,0.20),
    0 0 14px rgba(139,92,246,0.50),
    0 0 28px rgba(139,92,246,0.18),
    0 2px 10px rgba(0,0,0,0.50),
    inset 0 1px 0 rgba(255,255,255,1) !important;
  transition:
    transform 0.22s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.22s ease !important;
}

input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.22) !important;
  box-shadow:
    0 0 0 4px rgba(139,92,246,0.28),
    0 0 22px rgba(139,92,246,0.65),
    0 0 40px rgba(139,92,246,0.25),
    0 2px 14px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

input[type=range]:active::-webkit-slider-thumb {
  transform: scale(0.92) !important;
}

/* Thumb moz */
input[type=range]::-moz-range-thumb {
  width: 20px !important;
  height: 20px !important;
  background: linear-gradient(145deg,
    rgba(255,255,255,0.96) 0%,
    rgba(220,210,255,0.88) 100%) !important;
  border: 1.5px solid rgba(167,139,250,0.50) !important;
  box-shadow:
    0 0 0 3px rgba(139,92,246,0.20),
    0 0 14px rgba(139,92,246,0.50),
    0 2px 10px rgba(0,0,0,0.50) !important;
}

/* ── Optimal label усиление ── */
.range-optimal-label {
  font-size: 9.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}

.range-optimal-label.state-on {
  animation: c28-optimal-halo 1.8s ease-in-out infinite !important;
}

.range-optimal-label.state-hot {
  animation: c28-hot-halo 1.4s ease-in-out infinite !important;
}

/* Hot fill glow */
.range-fill.is-hot {
  box-shadow:
    0 0 10px rgba(248,113,113,0.60),
    0 0 24px rgba(248,113,113,0.28) !important;
}


/* ═══════════════════════════════════════════════════════════
   PROMO-BAR — floating неоновая полоска
═══════════════════════════════════════════════════════════ */

.promo-bar {
  position: relative !important;
  border-radius: 18px !important;
  padding: 16px 22px !important;
  margin: 18px 0 !important;
  background: linear-gradient(
    135deg,
    rgba(139,92,246,0.12) 0%,
    rgba(96,165,250,0.07) 50%,
    rgba(139,92,246,0.09) 100%
  ) !important;
  border: 1px solid rgba(139,92,246,0.28) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow:
    0 0 0 1px rgba(139,92,246,0.08),
    0 4px 24px rgba(139,92,246,0.12),
    inset 0 1px 0 rgba(255,255,255,0.07) !important;
  animation: c28-promo-pulse 3s ease-in-out infinite !important;
  overflow: hidden !important;
}

/* Верхняя shine-line */
.promo-bar::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 10% !important;
  right: 10% !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(167,139,250,0.35) 40%,
    rgba(96,165,250,0.30) 60%,
    transparent
  ) !important;
  pointer-events: none !important;
}

.promo-text {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.90) !important;
  letter-spacing: 0.01em !important;
}

/* ── Огонь-иконка (SVG) с эффектом горения ── */
.promo-info {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  min-width: 0 !important;
}
.promo-fire {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  line-height: 0 !important;
}
.promo-fire-svg {
  width: 22px !important;
  height: 22px !important;
  overflow: visible !important;
  transform-origin: 50% 88% !important;
  filter:
    drop-shadow(0 0 4px rgba(255,80,0,0.65))
    drop-shadow(0 0 10px rgba(255,140,0,0.40));
  animation: fireFlicker 1.7s ease-in-out infinite !important;
}
.promo-fire-svg .flame-core {
  transform-box: fill-box !important;
  transform-origin: 50% 90% !important;
  mix-blend-mode: screen !important;
  animation: fireCore 0.85s ease-in-out infinite !important;
}
@keyframes fireFlicker {
  0%, 100% {
    transform: scale(1) rotate(-1.5deg) translateY(0);
    filter: drop-shadow(0 0 4px rgba(255,80,0,0.60)) drop-shadow(0 0 9px rgba(255,140,0,0.34));
  }
  35% {
    transform: scale(1.07) rotate(1.5deg) translateY(-0.5px);
    filter: drop-shadow(0 0 6px rgba(255,110,0,0.85)) drop-shadow(0 0 15px rgba(255,165,0,0.55));
  }
  70% {
    transform: scale(0.97) rotate(-0.5deg) translateY(0.3px);
    filter: drop-shadow(0 0 5px rgba(255,90,0,0.7)) drop-shadow(0 0 12px rgba(255,150,0,0.42));
  }
}
@keyframes fireCore {
  0%, 100% { transform: scaleY(1) scaleX(1); opacity: 0.8; }
  50%      { transform: scaleY(1.18) scaleX(0.92); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .promo-fire-svg, .promo-fire-svg .flame-core { animation: none !important; }
}

/* Таймер */
.promo-timer,
#promoTimer {
  font-family: 'Unbounded', sans-serif !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  background: linear-gradient(135deg, var(--gold, #8b5cf6), var(--gold2, #a78bfa)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter: drop-shadow(0 0 8px rgba(139,92,246,0.45)) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}


/* ═══════════════════════════════════════════════════════════
   REGION-CHIP
═══════════════════════════════════════════════════════════ */

.region-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(167,139,250,0.35) !important;
  background: linear-gradient(
    135deg,
    rgba(139,92,246,0.14) 0%,
    rgba(96,165,250,0.07) 100%
  ) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: var(--gold2, #a78bfa) !important;
  box-shadow:
    0 0 0 1px rgba(139,92,246,0.10),
    0 0 14px rgba(139,92,246,0.12) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}


/* ═══════════════════════════════════════════════════════════
   PRICE-BOX — ambient card 2028
═══════════════════════════════════════════════════════════ */

.price-box {
  position: relative !important;
  border-radius: 22px !important;
  padding: 24px !important;
  background: linear-gradient(
    145deg,
    rgba(139,92,246,0.13) 0%,
    rgba(96,165,250,0.07) 50%,
    rgba(139,92,246,0.09) 100%
  ) !important;
  border: 1px solid rgba(139,92,246,0.30) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow:
    0 0 0 1px rgba(139,92,246,0.10),
    0 8px 40px rgba(0,0,0,0.25),
    0 0 60px rgba(139,92,246,0.08),
    inset 0 1px 0 rgba(255,255,255,0.09) !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}

/* Ambient radial glow внутри */
.price-box::before {
  content: '' !important;
  position: absolute !important;
  top: -30px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 200px !important;
  height: 120px !important;
  border-radius: 50% !important;
  background: radial-gradient(
    ellipse,
    rgba(139,92,246,0.18) 0%,
    transparent 70%
  ) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  filter: blur(12px) !important;
}

/* Shine-line */
.price-box::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 12% !important;
  right: 12% !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(167,139,250,0.30) 40%,
    rgba(96,165,250,0.25) 60%,
    transparent
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.price-box > * {
  position: relative !important;
  z-index: 2 !important;
}

/* label заголовок */
.price-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: rgba(167,139,250,0.65) !important;
  margin-bottom: 8px !important;
}

/* Перечёркнутая старая цена */
.price-old {
  font-size: 14px !important;
  color: rgba(160,170,184,0.55) !important;
  text-decoration: line-through !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 6px !important;
}

/* Бадж скидки */
.price-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(
    90deg,
    rgba(139,92,246,0.25) 0%,
    rgba(96,165,250,0.18) 100%
  ) !important;
  border: 1px solid rgba(139,92,246,0.38) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  color: var(--gold2, #a78bfa) !important;
  margin-bottom: 10px !important;
  /* shimmer */
  background-size: 200% auto !important;
  animation: c28-shimmer 4s linear infinite !important;
  box-shadow: 0 0 12px rgba(139,92,246,0.20) !important;
}

/* Главная цена */
.price-num {
  font-family: 'Unbounded', sans-serif !important;
  font-size: clamp(30px, 4.5vw, 46px) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    var(--gold2, #a78bfa) 60%,
    var(--cyan, #60a5fa) 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  margin-bottom: 4px !important;
  animation: c28-price-in 0.35s cubic-bezier(0.2,1,0.2,1) !important;
  filter: drop-shadow(0 0 18px rgba(139,92,246,0.30)) !important;
}

/* Подпись уровня */
.price-desc {
  font-size: 12.5px !important;
  color: rgba(160,170,184,0.70) !important;
  font-weight: 500 !important;
  margin-bottom: 14px !important;
}

/* Блок альтернативных валют */
.currencies-row {
  display: flex !important;
  gap: 7px !important;
  flex-wrap: wrap !important;
  margin-bottom: 14px !important;
}

/* Pill валюты — генерируются JS */
.currencies-row > * {
  padding: 5px 11px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.05) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(200,210,220,0.75) !important;
  backdrop-filter: blur(8px) !important;
  letter-spacing: 0.02em !important;
}


/* ═══════════════════════════════════════════════════════════
   MINI-STATS — три glass-карточки
═══════════════════════════════════════════════════════════ */

.mini-stats {
  gap: 8px !important;
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}

.mini-stat {
  padding: 10px 8px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  background: rgba(255,255,255,0.03) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.mini-stat:hover {
  border-color: rgba(139,92,246,0.22) !important;
  box-shadow:
    0 0 14px rgba(139,92,246,0.10),
    inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

.mini-stat b {
  font-size: 13px !important;
  font-weight: 900 !important;
  font-family: 'Unbounded', sans-serif !important;
  background: linear-gradient(135deg, #fff 0%, var(--gold2, #a78bfa) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  display: block !important;
  margin-bottom: 3px !important;
}

.mini-stat span {
  font-size: 10px !important;
  color: rgba(160,170,184,0.55) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}


/* ═══════════════════════════════════════════════════════════
   CTA BUTTON — усиление
═══════════════════════════════════════════════════════════ */

.result-side .btn-primary {
  border-radius: 16px !important;
  padding: 14px 20px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  box-shadow:
    0 0 0 1px rgba(104,201,138,0.30),
    0 4px 28px rgba(104,201,138,0.28),
    0 0 48px rgba(104,201,138,0.12) !important;
  transition:
    transform 0.22s cubic-bezier(0.2,1,0.2,1),
    box-shadow 0.22s ease !important;
}

.result-side .btn-primary:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow:
    0 0 0 1px rgba(104,201,138,0.40),
    0 8px 36px rgba(104,201,138,0.38),
    0 0 60px rgba(104,201,138,0.18) !important;
}


/* ═══════════════════════════════════════════════════════════
   CRYPTO-TAGS — цветной glow под каждую монету
═══════════════════════════════════════════════════════════ */

.crypto-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.04) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s cubic-bezier(0.2,1,0.2,1) !important;
  animation: c28-crypto-float 3.5s ease-in-out infinite !important;
}

/* Индивидуальные задержки для эффекта "волны" */
.crypto-tag:nth-child(1) { animation-delay: 0s !important; }
.crypto-tag:nth-child(2) { animation-delay: 0.5s !important; }
.crypto-tag:nth-child(3) { animation-delay: 1s !important; }

.crypto-tag:nth-child(1):hover {
  border-color: rgba(38,161,123,0.50) !important;
  box-shadow: 0 0 16px rgba(38,161,123,0.28), 0 0 32px rgba(38,161,123,0.10) !important;
  transform: translateY(-2px) scale(1.04) !important;
}

.crypto-tag:nth-child(2):hover {
  border-color: rgba(98,126,234,0.55) !important;
  box-shadow: 0 0 16px rgba(98,126,234,0.30), 0 0 32px rgba(98,126,234,0.12) !important;
  transform: translateY(-2px) scale(1.04) !important;
}

.crypto-tag:nth-child(3):hover {
  border-color: rgba(247,147,26,0.50) !important;
  box-shadow: 0 0 16px rgba(247,147,26,0.28), 0 0 32px rgba(247,147,26,0.10) !important;
  transform: translateY(-2px) scale(1.04) !important;
}

/* Label крипты */
[data-i18n="calc.cryptoLabel"] {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: rgba(160,170,184,0.50) !important;
  margin-bottom: 10px !important;
  display: block !important;
}


/* ═══════════════════════════════════════════════════════════
   SPEED-NOTE
═══════════════════════════════════════════════════════════ */

.speed-note {
  font-size: 11.5px !important;
  color: rgba(160,170,184,0.55) !important;
  margin-bottom: 12px !important;
  line-height: 1.5 !important;
}


/* ═══════════════════════════════════════════════════════════
   RANGE-BLOCK — отступы
═══════════════════════════════════════════════════════════ */

/* Явный тёмный фон на .card внутри калькулятора — фикс iOS Safari backdrop-filter белого артефакта */
#calculator .card {
  background: rgba(10,8,22,0.80) !important;
}

.range-block {
  margin-bottom: 20px !important;
}


/* ═══════════════════════════════════════════════════════════
   LIGHT MODE
═══════════════════════════════════════════════════════════ */

/* Каркас калькулятора — фростед-стекло (раньше оставался тёмным
   rgba(10,8,22,.80) и ломал светлую тему: тёмная рамка вокруг белых панелей). */
body.light-mode #calculator .card {
  background: rgba(255,255,255,0.55) !important;
  border-color: rgba(100,60,200,0.12) !important;
  box-shadow:
    0 0 0 1px rgba(100,60,200,0.05),
    0 20px 60px rgba(80,40,160,0.10),
    inset 0 1px 0 rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(28px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.5) !important;
}

body.light-mode .calc-side,
body.light-mode .result-side {
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(100,60,200,0.12) !important;
  box-shadow:
    0 0 0 1px rgba(100,60,200,0.06),
    0 4px 28px rgba(80,40,160,0.10),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
  backdrop-filter: blur(28px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.6) !important;
}

body.light-mode .calc-side::before,
body.light-mode .result-side::before {
  background: radial-gradient(
    ellipse 80% 40% at 50% 0%,
    rgba(100,60,200,0.06) 0%,
    transparent 70%
  ) !important;
}

body.light-mode .calc-side::after,
body.light-mode .result-side::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(100,60,200,0.14) 40%,
    rgba(100,60,200,0.10) 60%,
    transparent
  ) !important;
}

body.light-mode .calc-side:hover,
body.light-mode .result-side:hover {
  box-shadow:
    0 0 0 1px rgba(100,60,200,0.12),
    0 8px 36px rgba(80,40,160,0.14),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

body.light-mode .range-label span {
  color: rgba(74,48,112,0.65) !important;
}

body.light-mode .range-label b {
  background: linear-gradient(135deg, #5b21b6, #2563eb) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

body.light-mode .select-field {
  border-color: transparent !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235b21b6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    right 14px center / 12px no-repeat,
    rgba(255,255,255,0.85) !important;
  color: #1a0a40 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 0 0 1px var(--gold), 0 0 7px -1px var(--gold), 0 0 16px -4px var(--gold2) !important;
}

body.light-mode .select-field:focus,
body.light-mode .select-field:hover {
  background-color: rgba(255,255,255,0.95) !important;
}

body.light-mode .select-field option {
  background: #edecf5 !important;
  color: #1a0a40 !important;
}

body.light-mode .promo-bar {
  background: linear-gradient(
    135deg,
    rgba(100,60,200,0.09) 0%,
    rgba(37,99,235,0.05) 50%,
    rgba(100,60,200,0.07) 100%
  ) !important;
  border-color: rgba(100,60,200,0.22) !important;
  box-shadow:
    0 0 0 1px rgba(100,60,200,0.06),
    0 4px 20px rgba(80,40,160,0.08),
    inset 0 1px 0 rgba(255,255,255,0.80) !important;
}

body.light-mode .promo-bar::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(100,60,200,0.20) 40%,
    rgba(37,99,235,0.15) 60%,
    transparent
  ) !important;
}

body.light-mode .promo-text {
  color: rgba(26,10,64,0.85) !important;
}

body.light-mode #promoTimer,
body.light-mode .promo-timer {
  background: linear-gradient(135deg, #5b21b6, #7c3aed) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter: drop-shadow(0 0 6px rgba(91,33,182,0.30)) !important;
}

body.light-mode .region-chip {
  border-color: rgba(91,33,182,0.30) !important;
  background: linear-gradient(
    135deg,
    rgba(91,33,182,0.10) 0%,
    rgba(37,99,235,0.05) 100%
  ) !important;
  color: #5b21b6 !important;
  box-shadow: 0 0 12px rgba(91,33,182,0.08) !important;
}

body.light-mode .price-box {
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.92) 0%,
    rgba(240,235,255,0.88) 100%
  ) !important;
  border-color: rgba(100,60,200,0.18) !important;
  box-shadow:
    0 0 0 1px rgba(100,60,200,0.08),
    0 8px 32px rgba(80,40,160,0.12),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

body.light-mode .price-box::before {
  background: radial-gradient(
    ellipse,
    rgba(91,33,182,0.09) 0%,
    transparent 70%
  ) !important;
}

body.light-mode .price-box::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(91,33,182,0.18) 40%,
    rgba(37,99,235,0.12) 60%,
    transparent
  ) !important;
}

body.light-mode .price-label {
  color: rgba(91,33,182,0.55) !important;
}

body.light-mode .price-old {
  color: rgba(74,48,112,0.45) !important;
}

body.light-mode .price-badge {
  background: linear-gradient(
    90deg,
    rgba(91,33,182,0.14) 0%,
    rgba(37,99,235,0.09) 100%
  ) !important;
  border-color: rgba(91,33,182,0.30) !important;
  color: #5b21b6 !important;
}

body.light-mode .price-num {
  background: linear-gradient(
    135deg,
    #1a0a40 0%,
    #5b21b6 55%,
    #2563eb 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter: drop-shadow(0 0 12px rgba(91,33,182,0.18)) !important;
}

body.light-mode .price-desc {
  color: rgba(74,48,112,0.60) !important;
}

body.light-mode .mini-stats {
  border-top-color: rgba(100,60,200,0.10) !important;
}

body.light-mode .mini-stat {
  background: rgba(255,255,255,0.75) !important;
  border-color: rgba(100,60,200,0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,1) !important;
}

body.light-mode .mini-stat:hover {
  border-color: rgba(91,33,182,0.20) !important;
  box-shadow:
    0 0 12px rgba(91,33,182,0.07),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

body.light-mode .mini-stat b {
  background: linear-gradient(135deg, #1a0a40 0%, #5b21b6 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

body.light-mode .mini-stat span {
  color: rgba(74,48,112,0.48) !important;
}

body.light-mode .crypto-tag {
  border-color: rgba(100,60,200,0.12) !important;
  background: rgba(255,255,255,0.65) !important;
  color: #1a0a40 !important;
}

body.light-mode [data-i18n="calc.cryptoLabel"] {
  color: rgba(74,48,112,0.42) !important;
}

body.light-mode .currencies-row > * {
  border-color: rgba(100,60,200,0.12) !important;
  background: rgba(255,255,255,0.70) !important;
  color: rgba(26,10,64,0.65) !important;
}

body.light-mode .range-fill {
  box-shadow:
    0 0 10px rgba(91,33,182,0.40),
    0 0 22px rgba(91,33,182,0.16) !important;
}

body.light-mode input[type=range]::-webkit-slider-thumb {
  background: linear-gradient(145deg, #fff 0%, #e8e0ff 100%) !important;
  border-color: rgba(91,33,182,0.40) !important;
  box-shadow:
    0 0 0 3px rgba(91,33,182,0.15),
    0 0 14px rgba(91,33,182,0.32),
    0 2px 10px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

body.light-mode input[type=range]::-webkit-slider-thumb:hover {
  box-shadow:
    0 0 0 4px rgba(91,33,182,0.22),
    0 0 22px rgba(91,33,182,0.45),
    0 2px 12px rgba(0,0,0,0.16),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

body.light-mode input[type=range]::-moz-range-thumb {
  background: linear-gradient(145deg, #fff 0%, #e8e0ff 100%) !important;
  border-color: rgba(91,33,182,0.40) !important;
}

body.light-mode input[type=range] {
  background: rgba(0,0,0,0.06) !important;
  border-color: rgba(0,0,0,0.06) !important;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE АДАПТАЦИЯ
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .calc-side,
  .result-side {
    border-radius: 22px !important;
    padding: 20px !important;
  }

  .price-num {
    font-size: 34px !important;
  }

  .promo-timer,
  #promoTimer {
    font-size: 15px !important;
  }

  .promo-bar {
    padding: 14px 16px !important;
  }

  .mini-stat {
    padding: 8px 6px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   EQUALIZER TRACK — Winamp 2028
═══════════════════════════════════════════════════════════ */

.range-wrap {
  position: relative !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
}

.eq-track {
  position: relative !important;
  width: 100% !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  z-index: 2 !important;
  border-radius: 4px !important;
  padding: 0 1px !important;
}

/* Один сегмент */
.eq-seg {
  flex: 1 !important;
  height: 14px !important;
  border-radius: 2px !important;
  transition: height 0.08s ease, opacity 0.08s ease !important;
  --eq-brightness: 1 !important;
}

/* Выключенный */
.eq-seg--off {
  background: rgba(255,255,255,0.05) !important;
  box-shadow: none !important;
}

/* Нейтральный филл (pages, sections, days до optimal) — цвет палитры «по капельке».
   Привязан к акценту var(--gold): меняется вместе со сменой палитры. */
.eq-seg--purple {
  background: color-mix(in srgb, var(--gold, #8b5cf6) calc(var(--eq-brightness) * 52%), transparent) !important;
  box-shadow: 0 0 calc(var(--eq-brightness) * 4px) color-mix(in srgb, var(--gold, #8b5cf6) calc(var(--eq-brightness) * 30%), transparent) !important;
}

/* Cyan / зелёный (пик Optimal) */
.eq-seg--cyan {
  background: rgba(52, 211, 153, calc(var(--eq-brightness) * 0.9)) !important;
  box-shadow:
    0 0 calc(var(--eq-brightness) * 8px) rgba(52, 211, 153, calc(var(--eq-brightness) * 0.7)),
    0 0 calc(var(--eq-brightness) * 16px) rgba(52, 211, 153, calc(var(--eq-brightness) * 0.3)) !important;
}

/* Красный (rush — слишком мало дней) */
.eq-seg--hot {
  background: rgba(248, 113, 113, calc(var(--eq-brightness) * 0.88)) !important;
  box-shadow: 0 0 calc(var(--eq-brightness) * 8px) rgba(248, 113, 113, calc(var(--eq-brightness) * 0.6)) !important;
}

/* Затухающий после Optimal */
.eq-seg--over {
  background: rgba(251, 146, 60, calc(var(--eq-brightness) * 0.75)) !important;
  box-shadow: 0 0 calc(var(--eq-brightness) * 5px) rgba(251, 146, 60, calc(var(--eq-brightness) * 0.45)) !important;
}

/* Hover — сегменты чуть выше */
.eq-track:hover .eq-seg:not(.eq-seg--off) {
  height: 17px !important;
}

/* Внешний glow трека по состоянию */
.eq-track.eq-state-hot {
  filter: drop-shadow(0 0 6px rgba(248, 113, 113, 0.28)) !important;
}
.eq-track.eq-state-optimal {
  filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.32)) !important;
}
.eq-track.eq-state-over {
  filter: drop-shadow(0 0 5px rgba(251, 146, 60, 0.22)) !important;
}

/* Optimal label позиция — поднимаем выше трека */
.range-optimal-label {
  top: -22px !important;
  font-size: 9px !important;
  white-space: nowrap !important;
}

/* Скрываем dot и arrow (не нужны при EQ-стиле) */
.range-optimal-dot,
.range-optimal-arrow {
  display: none !important;
}

/* Light mode EQ */
body.light-mode .eq-seg--off {
  background: rgba(0,0,0,0.07) !important;
}

body.light-mode .eq-seg--purple {
  background: color-mix(in srgb, var(--gold, #5b21b6) calc(var(--eq-brightness) * 60%), transparent) !important;
  box-shadow: 0 0 calc(var(--eq-brightness) * 4px) color-mix(in srgb, var(--gold, #5b21b6) calc(var(--eq-brightness) * 28%), transparent) !important;
}

body.light-mode .eq-seg--cyan {
  background: rgba(16, 185, 129, calc(var(--eq-brightness) * 0.85)) !important;
  box-shadow:
    0 0 calc(var(--eq-brightness) * 8px) rgba(16, 185, 129, calc(var(--eq-brightness) * 0.55)),
    0 0 calc(var(--eq-brightness) * 14px) rgba(16, 185, 129, calc(var(--eq-brightness) * 0.25)) !important;
}

body.light-mode .eq-seg--hot {
  background: rgba(220, 38, 38, calc(var(--eq-brightness) * 0.80)) !important;
  box-shadow: 0 0 calc(var(--eq-brightness) * 7px) rgba(220, 38, 38, calc(var(--eq-brightness) * 0.40)) !important;
}

body.light-mode .eq-seg--over {
  background: rgba(234, 88, 12, calc(var(--eq-brightness) * 0.72)) !important;
  box-shadow: 0 0 calc(var(--eq-brightness) * 5px) rgba(234, 88, 12, calc(var(--eq-brightness) * 0.35)) !important;
}


/* ═══════════════════════════════════════════════════════════
   ABOUT2-CARD — Подход (2028+)
═══════════════════════════════════════════════════════════ */

.about2-card {
  position: relative !important;
  border-radius: 22px !important;
  padding: 22px 22px !important;
  background: rgba(255,255,255,0.022) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(28px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.5) !important;
  box-shadow:
    0 0 0 1px rgba(139,92,246,0.06),
    0 6px 32px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.07) !important;
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s cubic-bezier(0.2,1,0.2,1) !important;
  overflow: hidden !important;
}

/* Shine-line */
.about2-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 10% !important;
  right: 10% !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.15) 40%,
    rgba(167,139,250,0.18) 60%,
    transparent
  ) !important;
  pointer-events: none !important;
  border-radius: 99px !important;
}

/* Ambient corner glow */
.about2-card::after {
  content: '' !important;
  position: absolute !important;
  top: -40px !important;
  right: -30px !important;
  width: 130px !important;
  height: 130px !important;
  border-radius: 50% !important;
  background: radial-gradient(
    ellipse,
    rgba(139,92,246,0.10) 0%,
    transparent 70%
  ) !important;
  pointer-events: none !important;
  filter: blur(16px) !important;
  transition: opacity 0.35s ease !important;
  opacity: 0.6 !important;
}

.about2-card:hover {
  border-color: rgba(139,92,246,0.28) !important;
  transform: translateY(-5px) !important;
  box-shadow:
    0 0 0 1px rgba(139,92,246,0.14),
    0 12px 48px rgba(0,0,0,0.35),
    0 0 60px rgba(139,92,246,0.07),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

.about2-card:hover::after {
  opacity: 1 !important;
}

/* Icon контейнер */
.about2-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 15px !important;
  background: linear-gradient(
    135deg,
    rgba(139,92,246,0.18) 0%,
    rgba(96,165,250,0.10) 100%
  ) !important;
  border: 1px solid rgba(139,92,246,0.25) !important;
  box-shadow:
    0 0 16px rgba(139,92,246,0.15),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
  transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.about2-card:hover .about2-icon {
  border-color: rgba(139,92,246,0.45) !important;
  box-shadow:
    0 0 24px rgba(139,92,246,0.28),
    inset 0 1px 0 rgba(255,255,255,0.14) !important;
}

.about2-icon svg {
  stroke: var(--gold2, #a78bfa) !important;
}

/* Заголовок карточки */
.about2-card h3 {
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  color: rgba(255,255,255,0.92) !important;
  margin-bottom: 7px !important;
}

/* Текст */
.about2-card p {
  font-size: 12.5px !important;
  line-height: 1.6 !important;
  color: rgba(160,170,184,0.70) !important;
}

/* Light mode */
body.light-mode .about2-card {
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(100,60,200,0.10) !important;
  box-shadow:
    0 0 0 1px rgba(100,60,200,0.05),
    0 6px 28px rgba(80,40,160,0.09),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

body.light-mode .about2-card::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(100,60,200,0.14) 40%,
    rgba(100,60,200,0.10) 60%,
    transparent
  ) !important;
}

body.light-mode .about2-card::after {
  background: radial-gradient(
    ellipse,
    rgba(91,33,182,0.07) 0%,
    transparent 70%
  ) !important;
}

body.light-mode .about2-card:hover {
  border-color: rgba(91,33,182,0.22) !important;
  box-shadow:
    0 0 0 1px rgba(91,33,182,0.10),
    0 12px 40px rgba(80,40,160,0.13),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

body.light-mode .about2-icon {
  background: linear-gradient(
    135deg,
    rgba(91,33,182,0.12) 0%,
    rgba(37,99,235,0.07) 100%
  ) !important;
  border-color: rgba(91,33,182,0.20) !important;
  box-shadow:
    0 0 12px rgba(91,33,182,0.10),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
}

body.light-mode .about2-card:hover .about2-icon {
  border-color: rgba(91,33,182,0.35) !important;
  box-shadow:
    0 0 20px rgba(91,33,182,0.18),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

body.light-mode .about2-card h3 {
  color: #1a0a40 !important;
}

body.light-mode .about2-card p {
  color: rgba(74,48,112,0.65) !important;
}


/* ═══════════════════════════════════════════════════════════
   FEAT2-CARD — Возможности (2028+)
═══════════════════════════════════════════════════════════ */

.feat2-card {
  position: relative !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,0.022) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  box-shadow:
    0 0 0 1px rgba(139,92,246,0.05),
    0 4px 20px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
  overflow: hidden !important;
  transition:
    border-color 0.30s ease,
    box-shadow 0.30s ease,
    transform 0.30s cubic-bezier(0.2,1,0.2,1) !important;
}

/* Shine-line */
.feat2-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 8% !important;
  right: 8% !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.12) 40%,
    rgba(167,139,250,0.14) 60%,
    transparent
  ) !important;
  pointer-events: none !important;
}

.feat2-card:hover {
  border-color: rgba(139,92,246,0.24) !important;
  transform: translateY(-3px) !important;
  box-shadow:
    0 0 0 1px rgba(139,92,246,0.12),
    0 8px 36px rgba(0,0,0,0.30),
    0 0 40px rgba(139,92,246,0.06),
    inset 0 1px 0 rgba(255,255,255,0.09) !important;
}

.feat2-card.is-open {
  border-color: rgba(139,92,246,0.32) !important;
  background: rgba(139,92,246,0.05) !important;
  box-shadow:
    0 0 0 1px rgba(139,92,246,0.15),
    0 8px 40px rgba(0,0,0,0.28),
    0 0 50px rgba(139,92,246,0.09),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

/* feat2-icon */
.feat2-icon svg {
  stroke: var(--gold2, #a78bfa) !important;
  filter: drop-shadow(0 0 5px rgba(139,92,246,0.35)) !important;
  transition: filter 0.3s ease !important;
}

.feat2-card:hover .feat2-icon svg,
.feat2-card.is-open .feat2-icon svg {
  filter: drop-shadow(0 0 9px rgba(139,92,246,0.60)) !important;
}

/* feat2-badge */
.feat2-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  background: rgba(139,92,246,0.12) !important;
  border: 1px solid rgba(139,92,246,0.25) !important;
  color: var(--gold2, #a78bfa) !important;
  margin-top: 8px !important;
  box-shadow: 0 0 10px rgba(139,92,246,0.12) !important;
}

/* feat2-arrow */
.feat2-arrow {
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(139,92,246,0.22) !important;
  background: rgba(139,92,246,0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.30s ease !important;
}

.feat2-card:hover .feat2-arrow,
.feat2-card.is-open .feat2-arrow {
  background: rgba(139,92,246,0.18) !important;
  border-color: rgba(139,92,246,0.40) !important;
}

/* Light mode feat2 */
body.light-mode .feat2-card {
  background: rgba(255,255,255,0.70) !important;
  border-color: rgba(100,60,200,0.09) !important;
  box-shadow:
    0 0 0 1px rgba(100,60,200,0.04),
    0 4px 18px rgba(80,40,160,0.08),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

body.light-mode .feat2-card::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(100,60,200,0.12) 40%,
    rgba(100,60,200,0.08) 60%,
    transparent
  ) !important;
}

body.light-mode .feat2-card:hover {
  border-color: rgba(91,33,182,0.20) !important;
  box-shadow:
    0 0 0 1px rgba(91,33,182,0.09),
    0 8px 32px rgba(80,40,160,0.12),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

body.light-mode .feat2-card.is-open {
  background: rgba(255,255,255,0.88) !important;
  border-color: rgba(91,33,182,0.25) !important;
}

body.light-mode .feat2-icon svg {
  stroke: #5b21b6 !important;
  filter: drop-shadow(0 0 4px rgba(91,33,182,0.20)) !important;
}

body.light-mode .feat2-card:hover .feat2-icon svg,
body.light-mode .feat2-card.is-open .feat2-icon svg {
  filter: drop-shadow(0 0 7px rgba(91,33,182,0.38)) !important;
}

body.light-mode .feat2-badge {
  background: rgba(91,33,182,0.09) !important;
  border-color: rgba(91,33,182,0.20) !important;
  color: #5b21b6 !important;
}

body.light-mode .feat2-arrow {
  border-color: rgba(91,33,182,0.18) !important;
  background: rgba(91,33,182,0.06) !important;
}

body.light-mode .feat2-card:hover .feat2-arrow,
body.light-mode .feat2-card.is-open .feat2-arrow {
  background: rgba(91,33,182,0.14) !important;
  border-color: rgba(91,33,182,0.32) !important;
}


/* ═══════════════════════════════════════════════════════════
   PCARD2 — Работы / Portfolio (2028+)
═══════════════════════════════════════════════════════════ */

.pcard2 {
  position: relative !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  background: rgba(255,255,255,0.022) !important;
  backdrop-filter: blur(22px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
  box-shadow:
    0 0 0 1px rgba(139,92,246,0.06),
    0 6px 30px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
  overflow: hidden !important;
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s cubic-bezier(0.2,1,0.2,1) !important;
}

/* Shine-line по верхнему ребру */
.pcard2::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent 5%,
    rgba(255,255,255,0.14) 30%,
    rgba(167,139,250,0.18) 60%,
    transparent 95%
  ) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Gradient overlay на изображение снизу */
.pcard2-img {
  display: block !important;
  width: 100% !important;
  transition: transform 0.45s cubic-bezier(0.2,1,0.2,1), filter 0.35s ease !important;
  filter: brightness(0.88) saturate(1.1) !important;
}

.pcard2:hover .pcard2-img {
  transform: scale(1.04) !important;
  filter: brightness(0.96) saturate(1.2) !important;
}

/* Body */
.pcard2-body {
  position: relative !important;
  padding: 18px 20px 22px !important;
  background: linear-gradient(
    180deg,
    rgba(14,10,30,0.0) 0%,
    rgba(14,10,30,0.55) 100%
  ) !important;
  z-index: 1 !important;
}

/* Tag */
.pcard2-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 11px !important;
  border-radius: 999px !important;
  background: rgba(139,92,246,0.14) !important;
  border: 1px solid rgba(139,92,246,0.30) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.10em !important;
  color: var(--gold2, #a78bfa) !important;
  text-transform: uppercase !important;
  margin-bottom: 9px !important;
  box-shadow: 0 0 8px rgba(139,92,246,0.12) !important;
}

/* Title */
.pcard2-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.93) !important;
  letter-spacing: 0.01em !important;
  margin-bottom: 5px !important;
}

/* Desc */
.pcard2-desc {
  font-size: 12px !important;
  color: rgba(160,170,184,0.65) !important;
  margin-bottom: 11px !important;
  line-height: 1.5 !important;
}

/* Result */
.pcard2-result {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  background: linear-gradient(135deg, var(--gold, #8b5cf6), var(--gold2, #a78bfa)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Hover */
.pcard2:hover {
  border-color: rgba(139,92,246,0.28) !important;
  transform: translateY(-7px) !important;
  box-shadow:
    0 0 0 1px rgba(139,92,246,0.14),
    0 18px 56px rgba(0,0,0,0.38),
    0 0 60px rgba(139,92,246,0.09),
    inset 0 1px 0 rgba(255,255,255,0.09) !important;
}

/* Light mode pcard2 */
body.light-mode .pcard2 {
  background: rgba(255,255,255,0.78) !important;
  border-color: rgba(100,60,200,0.09) !important;
  box-shadow:
    0 0 0 1px rgba(100,60,200,0.05),
    0 6px 28px rgba(80,40,160,0.10),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

body.light-mode .pcard2::before {
  background: linear-gradient(
    90deg,
    transparent 5%,
    rgba(100,60,200,0.14) 30%,
    rgba(100,60,200,0.10) 60%,
    transparent 95%
  ) !important;
}

body.light-mode .pcard2-img {
  filter: brightness(1.0) saturate(1.05) !important;
}

body.light-mode .pcard2:hover .pcard2-img {
  filter: brightness(1.04) saturate(1.12) !important;
}

body.light-mode .pcard2-body {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0) 0%,
    rgba(245,242,255,0.60) 100%
  ) !important;
}

body.light-mode .pcard2-tag {
  background: rgba(91,33,182,0.09) !important;
  border-color: rgba(91,33,182,0.22) !important;
  color: #5b21b6 !important;
}

body.light-mode .pcard2-title {
  color: #1a0a40 !important;
}

body.light-mode .pcard2-desc {
  color: rgba(74,48,112,0.58) !important;
}

body.light-mode .pcard2:hover {
  border-color: rgba(91,33,182,0.22) !important;
  box-shadow:
    0 0 0 1px rgba(91,33,182,0.10),
    0 18px 48px rgba(80,40,160,0.14),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}


/* ═══════════════════════════════════════════════════════════
   NEMENKOFF — КАСКАД ПОЯВЛЕНИЯ + БЛИК КАРТОЧЕК (perf-safe)
   Только opacity/transform на композитных слоях; уважает reduced-motion.
═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  /* Карточки возможностей каскадом проявляются, когда сетка въезжает в экран.
     Только opacity — не конфликтует с hover-transform карточки. */
  .features2-grid .feat2-card { opacity: 0; }
  .features2-grid.in .feat2-card { animation: nmkCardIn 0.55s cubic-bezier(0.2,0.9,0.2,1) forwards; }
  .features2-grid.in .feat2-card:nth-child(1)  { animation-delay: 0.03s; }
  .features2-grid.in .feat2-card:nth-child(2)  { animation-delay: 0.09s; }
  .features2-grid.in .feat2-card:nth-child(3)  { animation-delay: 0.15s; }
  .features2-grid.in .feat2-card:nth-child(4)  { animation-delay: 0.21s; }
  .features2-grid.in .feat2-card:nth-child(5)  { animation-delay: 0.27s; }
  .features2-grid.in .feat2-card:nth-child(6)  { animation-delay: 0.33s; }
  .features2-grid.in .feat2-card:nth-child(7)  { animation-delay: 0.39s; }
  .features2-grid.in .feat2-card:nth-child(8)  { animation-delay: 0.45s; }
  .features2-grid.in .feat2-card:nth-child(9)  { animation-delay: 0.51s; }
  .features2-grid.in .feat2-card:nth-child(10) { animation-delay: 0.57s; }
  .features2-grid.in .feat2-card:nth-child(11) { animation-delay: 0.63s; }
  .features2-grid.in .feat2-card:nth-child(12) { animation-delay: 0.69s; }
  @keyframes nmkCardIn { from { opacity: 0; } to { opacity: 1; } }

  /* Стеклянный блик-проводка по карточкам при наведении (::after свободен). */
  .feat2-card::after,
  .pcard2::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 4 !important;
    opacity: 0 !important;
    background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.14) 50%, transparent 62%) !important;
    background-size: 220% 100% !important;
    background-position: 125% 0 !important;
  }
  .feat2-card:hover::after,
  .pcard2:hover::after { animation: nmkSheen 0.9s ease !important; }
  @keyframes nmkSheen {
    0%   { opacity: 0; background-position: 125% 0; }
    22%  { opacity: 1; }
    100% { opacity: 0; background-position: -45% 0; }
  }
}


/* ─── Переливы: успокаиваем единственный быстрый (бадж скидки 4s → 13s).
   Основные заголовки уже идут спокойно (9s) — не трогаем.
   will-change — лёгкий хинт плавности на Windows, вид не меняет. ─── */
.price-badge { animation-duration: 13s !important; }
.hero2-h1-accent, .grad, .grad2, .section2-h2 .grad2 { will-change: background-position; }


/* ═══════════════════════════════════════════════════════════
   СВЕТЛАЯ ТЕМА — глубина карточек (были «просто белые»)
   Лавандовое стекло-градиент + видимая рамка + слоистая тень.
═══════════════════════════════════════════════════════════ */
body.light-mode .feat2-card,
body.light-mode .pcard2,
body.light-mode .about2-card,
body.light-mode .testimonial-card,
body.light-mode .testimonials-card,
body.light-mode .work-card,
body.light-mode .contact-box,
body.light-mode .faq-item {
  background: linear-gradient(158deg, rgba(255,255,255,0.94) 0%, rgba(243,240,255,0.80) 100%) !important;
  border: 1px solid rgba(100,60,200,0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 1px 2px rgba(80,40,160,0.06),
    0 14px 34px -14px rgba(80,40,160,0.26),
    0 4px 12px -6px rgba(80,40,160,0.14) !important;
}
body.light-mode .feat2-card:hover,
body.light-mode .pcard2:hover,
body.light-mode .about2-card:hover,
body.light-mode .work-card:hover {
  border-color: color-mix(in srgb, var(--gold) 42%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 0 0 1px color-mix(in srgb, var(--gold) 20%, transparent),
    0 20px 48px -16px rgba(80,40,160,0.32),
    0 6px 16px -8px rgba(80,40,160,0.18) !important;
}


/* ═══════════════════════════════════════════════════════════
   РУЛЕТКА — премиальное стекло + палитра (вместо казино-пинка).
   Привязано к var(--gold/--gold2/--cyan) → следует смене палитры.
═══════════════════════════════════════════════════════════ */
.slot-block {
  background: linear-gradient(160deg, rgba(14,11,28,0.94) 0%, rgba(8,7,18,0.93) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--gold) 24%, transparent) !important;
  backdrop-filter: blur(30px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.5) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 10%, transparent),
    0 0 50px -10px color-mix(in srgb, var(--gold) 28%, transparent),
    0 32px 80px rgba(0,0,0,0.55) !important;
}
.slot-block::before {
  background:
    radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--gold) 13%, transparent), transparent 55%),
    radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 50%) !important;
}
.slot-block::after { display: none !important; } /* убрать ✦✦✦ китч */

.slot-eyebrow {
  border-color: color-mix(in srgb, var(--gold) 30%, transparent) !important;
  background: color-mix(in srgb, var(--gold) 7%, transparent) !important;
  color: color-mix(in srgb, var(--gold) 72%, #ffffff) !important;
}
.slot-neon-dot {
  background: var(--gold) !important;
  box-shadow: 0 0 12px var(--gold), 0 0 24px var(--gold) !important;
}
.slot-title-grad {
  background: linear-gradient(120deg, #fff 0%, var(--gold) 35%, var(--cyan) 65%, var(--gold2) 100%) !important;
  background-size: 280% auto !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  animation-duration: 14s !important;
}
.slot-sub b { color: color-mix(in srgb, var(--gold) 62%, #ffffff) !important; }

.slot-pip { border-color: color-mix(in srgb, var(--gold) 18%, transparent) !important; }
.slot-pip.active {
  background: linear-gradient(90deg, var(--gold), var(--cyan)) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 55%, transparent) !important;
}

.slot-machine {
  background: rgba(6,5,14,0.62) !important;
  border: 1px solid color-mix(in srgb, var(--gold) 16%, transparent) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.slot-reel-cell svg {
  stroke: var(--gold2) !important;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--gold) 40%, transparent)) !important;
}
.slot-reel-cell.is-center svg {
  stroke: var(--cyan) !important;
  filter: drop-shadow(0 0 8px var(--cyan)) drop-shadow(0 0 20px color-mix(in srgb, var(--cyan) 55%, transparent)) !important;
}
.slot-reel-cell.is-center .slot-lbl {
  color: color-mix(in srgb, var(--cyan) 70%, #ffffff) !important;
  text-shadow: 0 0 10px color-mix(in srgb, var(--cyan) 55%, transparent) !important;
}
.slot-reel-wrap.win {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent),
              0 0 30px color-mix(in srgb, var(--gold) 35%, transparent) !important;
}

.slot-spin-btn {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 50%, var(--cyan) 100%) !important;
  background-size: 200% !important;
  animation-duration: 14s !important;
  box-shadow: 0 0 28px -4px color-mix(in srgb, var(--gold) 52%, transparent), 0 8px 32px rgba(0,0,0,0.5) !important;
}
.slot-spin-btn:hover {
  box-shadow: 0 0 44px -4px color-mix(in srgb, var(--gold) 68%, transparent), 0 12px 40px rgba(0,0,0,0.6) !important;
}


/* ═══════════════════════════════════════════════════════════
   ПОПАП СКИДКИ (discountModal) — премиум-стекло + палитра
═══════════════════════════════════════════════════════════ */
.discount-modal {
  background: linear-gradient(160deg, rgba(18,15,38,0.86) 0%, rgba(10,8,24,0.84) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent) !important;
  backdrop-filter: blur(34px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(34px) saturate(1.5) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 10%, transparent),
    0 0 50px -12px color-mix(in srgb, var(--gold) 30%, transparent),
    0 40px 90px rgba(0,0,0,0.6) !important;
}
.dm-badge {
  border-color: color-mix(in srgb, var(--gold) 28%, transparent) !important;
  background: color-mix(in srgb, var(--gold) 7%, transparent) !important;
  color: color-mix(in srgb, var(--gold) 70%, #ffffff) !important;
}
.dm-badge-dot { background: var(--gold) !important; box-shadow: 0 0 10px var(--gold) !important; }
.dm-title {
  background: linear-gradient(120deg, #fff 0%, var(--gold) 38%, var(--cyan) 70%, var(--gold2) 100%) !important;
  background-size: 280% auto !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  animation-duration: 14s !important;
}
.dm-sub b { color: color-mix(in srgb, var(--gold) 62%, #ffffff) !important; }
.dm-prize {
  border-color: color-mix(in srgb, var(--gold) 20%, transparent) !important;
  background: color-mix(in srgb, var(--gold) 5%, transparent) !important;
}
.dm-prize-val { color: var(--gold2) !important; }
.dm-prize-icon { line-height: 0 !important; }
.dm-prize-icon svg { width: 26px !important; height: 26px !important; stroke: var(--gold) !important; fill: none !important; }
.dm-btn {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 50%, var(--cyan) 100%) !important;
  background-size: 200% !important;
  animation-duration: 14s !important;
  box-shadow: 0 0 28px -4px color-mix(in srgb, var(--gold) 50%, transparent), 0 8px 32px rgba(0,0,0,0.5) !important;
}
.dm-btn:hover { box-shadow: 0 0 46px -4px color-mix(in srgb, var(--gold) 66%, transparent), 0 12px 40px rgba(0,0,0,0.6) !important; }
.dm-btn svg { width: 18px !important; height: 18px !important; stroke: currentColor !important; fill: none !important; }


/* ═══════════════════════════════════════════════════════════
   СЛОТ/ПОПАП — SVG-иконки с анимацией, эффекты кнопки, выигрыш
═══════════════════════════════════════════════════════════ */
/* Иконки призов в попапе — мягкая жизнь */
.dmi { color: var(--gold); }
.dmi-gem, .dmi-spark { animation: dmiGem 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.dmi-gift { animation: dmiGift 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 80%; }
.dmi-dice { animation: dmiDice 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dmiGem  { 0%,100%{opacity:.85; transform:scale(0.95)} 50%{opacity:1; transform:scale(1.1)} }
@keyframes dmiGift { 0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(4deg)} }
@keyframes dmiDice { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-11deg)} 75%{transform:rotate(11deg)} }

/* Кнопка КРУТИТЬ — иконка-вертушка + бегущий блик */
.slot-spin-btn .spin-icon { display:inline-flex !important; line-height:0 !important; }
.slot-spin-btn .spin-icon svg { width:18px; height:18px; transition: transform .4s cubic-bezier(.2,1,.2,1); }
.slot-spin-btn:not(:disabled):hover .spin-icon svg { transform: rotate(180deg); }
.slot-spin-btn::after {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.38) 50%, transparent 60%);
  background-size: 250% 100%; background-position: 130% 0; opacity:0;
}
.slot-spin-btn:not(:disabled):hover::after { animation: spinSheen .9s ease; }
@keyframes spinSheen { 0%{background-position:130% 0; opacity:0} 25%{opacity:1} 100%{background-position:-50% 0; opacity:0} }

/* Состояние «кручу» — кнопка остаётся живой (палитра), иконка крутится, пульс свечения */
.slot-spin-btn.is-spinning {
  opacity:1 !important; cursor:progress !important;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 50%, var(--cyan) 100%) !important;
  background-size: 200% !important;
  animation: spinPulse 1s ease-in-out infinite !important;
}
.slot-spin-btn.is-spinning .spin-icon svg { animation: spinRot .7s linear infinite; }
@keyframes spinRot { to { transform: rotate(360deg); } }
@keyframes spinPulse {
  0%,100% { box-shadow: 0 0 26px -4px color-mix(in srgb,var(--gold) 50%,transparent), 0 8px 32px rgba(0,0,0,.5); }
  50%     { box-shadow: 0 0 50px -2px color-mix(in srgb,var(--gold) 78%,transparent), 0 8px 32px rgba(0,0,0,.5); }
}

/* Эффект выигрыша — трофей-всплеск + золотое свечение, заголовок «выскакивает» */
.slot-win-emoji { color: var(--gold) !important; }
.slot-win-emoji svg {
  width:48px; height:48px;
  filter: drop-shadow(0 0 12px color-mix(in srgb,var(--gold) 70%,transparent));
  animation: winTrophy 1.3s cubic-bezier(.2,1,.2,1) both;
}
@keyframes winTrophy {
  0%   { transform: scale(0) rotate(-25deg); opacity:0; }
  55%  { transform: scale(1.25) rotate(8deg); opacity:1; }
  75%  { transform: scale(0.94) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); }
}
.slot-win-banner.show .slot-win-title { animation: winPop .55s .08s both cubic-bezier(.2,1,.2,1); }
.slot-win-banner.show .slot-win-discount { animation: winPop .55s .18s both cubic-bezier(.2,1,.2,1); }
@keyframes winPop { from{opacity:0; transform:translateY(10px) scale(.92)} to{opacity:1; transform:none} }

@media (prefers-reduced-motion: reduce) {
  .dmi, .slot-spin-btn.is-spinning, .slot-spin-btn.is-spinning .spin-icon svg,
  .slot-win-emoji svg, .slot-win-banner.show .slot-win-title,
  .slot-win-banner.show .slot-win-discount { animation: none !important; }
}

.slot-lose-icon { line-height:0; margin-bottom:8px; color: color-mix(in srgb, var(--gold) 55%, #ffffff); }
.slot-lose-icon svg { width:30px; height:30px; animation: dmiDice 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }


/* ─── Фон выигрыша: насыщенное затемнение + палитра-свечение (акцент на призе).
   Анимации запускаем по .show — иначе отыгрывают при загрузке скрытыми. ─── */
.slot-win-banner {
  background:
    radial-gradient(ellipse 75% 65% at 50% 42%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(8,6,18,0.96), rgba(4,4,10,0.975)) !important;
  backdrop-filter: blur(16px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--gold) 18%, transparent),
    inset 0 0 70px color-mix(in srgb, var(--gold) 10%, transparent) !important;
}
.slot-win-emoji { animation: none !important; } /* убираем старый bounce контейнера */
.slot-win-emoji svg { animation: none; }
.slot-win-banner.show .slot-win-emoji svg { animation: winTrophy 1.3s cubic-bezier(.2,1,.2,1) both; }
.slot-win-banner.show .slot-win-title    { animation: winPop .5s .08s both cubic-bezier(.2,1,.2,1); }
.slot-win-banner.show .slot-win-discount { animation: winPop .55s .2s both cubic-bezier(.2,1,.2,1); }
.slot-win-banner.show .slot-win-sub      { animation: winPop .5s .3s both cubic-bezier(.2,1,.2,1); }
.slot-win-banner.show .slot-win-btn      { animation: winPop .5s .38s both cubic-bezier(.2,1,.2,1); }
@media (prefers-reduced-motion: reduce) {
  .slot-win-banner.show .slot-win-emoji svg,
  .slot-win-banner.show .slot-win-title,
  .slot-win-banner.show .slot-win-discount,
  .slot-win-banner.show .slot-win-sub,
  .slot-win-banner.show .slot-win-btn { animation: none !important; }
}

/* Баннер выигрыша теперь покрывает весь .slot-block — отступы + читаемый текст */
.slot-win-banner { padding: 26px !important; gap: 12px !important; }
.slot-win-sub { color: rgba(255,255,255,0.82) !important; max-width: 330px !important; }
.slot-win-banner.show .slot-win-btn { animation-delay: .24s !important; }


/* ─── Контакт-форма: поля читаемые в обе темы, фокус-кольцо по палитре ─── */
.input:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent) !important;
}
body.light-mode .input {
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(100,60,200,0.18) !important;
}
body.light-mode .input::placeholder { color: rgba(30,20,80,0.40) !important; }
body.light-mode .input:focus {
  background: #ffffff !important;
  border-color: var(--gold) !important;
}


/* Контакт-карточки — это generic .card; даём им ту же светлую глубину */
body.light-mode #contact .card {
  background: linear-gradient(158deg, rgba(255,255,255,0.94) 0%, rgba(243,240,255,0.80) 100%) !important;
  border: 1px solid rgba(100,60,200,0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 1px 2px rgba(80,40,160,0.06),
    0 14px 34px -14px rgba(80,40,160,0.26),
    0 4px 12px -6px rgba(80,40,160,0.14) !important;
}

/* Рулетка — подзаголовок и лейбл попыток были серыми (var(--muted)) на тёмном блоке.
   Блок тёмный в обеих темах → делаем текст светлым безусловно. */
.slot-sub { color: rgba(255,255,255,0.64) !important; }
.slot-attempts-label { color: rgba(255,255,255,0.58) !important; }

/* Светлая тема: блок рулетки делаем плотно-тёмным (без просвета сквозь стекло),
   иначе backdrop-filter подмешивает светлую страницу и белый текст блёкнет. */
body.light-mode .slot-block {
  background: linear-gradient(160deg, #16121f 0%, #0d0b18 100%) !important;
}