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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background: #000000;
  color: #e4e4e7;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* 🎯 МАЛЕНЬКИЙ контейнер при старте */
.container {
  background: #18181b;
  border: none;
  border-radius: 12px;
  padding: 20px;
  width: 100%;
  max-width: 350px; /* Компактный размер */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease; /* Плавное расширение */
}

/* 🎯 БОЛЬШОЙ контейнер когда стикер найден */
.container.sticker-found {
  max-width: 500px; /* Расширяем для показа стикера */
  padding: 32px;
}

h1 {
  text-align: center;
  color: #f4f4f5;
  margin-bottom: 32px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.search-box {
  margin-bottom: 16px; /* Уменьшил с 24px */
}

input[type=text] {
  width: 100%;
  padding: 12px 16px;
  background: #09090b;
  border: 1px solid #27272a;
  border-radius: 8px;
  font-size: 14px;
  color: #e4e4e7;
  transition: all 0.2s ease;
  text-align: center; /* 🎯 Центрируем текст ключа */
}

input[type=text]:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

input[type=text]::placeholder {
  color: #71717a;
}

button {
  width: 100%;
  padding: 12px 16px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 12px;
  transition: all 0.2s ease;
}

button:hover {
  background: #2563eb;
}

button:active {
  transform: scale(0.98);
}

/* 🎯 МАЛЕНЬКИЙ result-container при старте */
.result-container {
  margin-top: 0;
  min-height: 0; /* Убираем минимальную высоту */
  border-radius: 8px;
  padding: 0; /* Убираем отступы при старте */
  text-align: center;
  position: relative;
  color: white;
  transition: all 0.3s ease;
}

/* 🎯 НОРМАЛЬНЫЙ result-container когда есть контент */
.result-container.has-content {
  margin-top: 12px;
  min-height: 60px;
  padding: 20px 16px 16px;
}

/* Фоны контейнеров - всегда чёрные для лучшего отображения ореолов */
.container.effect-basic,
.container.effect-common,
.container.effect-uncommon,
.container.effect-rare,
.container.effect-epic,
.container.effect-legendary,
.container.effect-official {
  background: #000000;
  position: relative;
  overflow: visible;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

/* 1) Общие стили для всех ореолов */
.sticker-container {
  position: relative; /* чтобы ::before позиционировался относительно контейнера */
  z-index: 5; /* Поверх светлячков */
}

.sticker-container::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  height: 280px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(25px);           /* единый блюр */
  opacity: 0.4;                 /* базовая прозрачность */
  transition: opacity 0.3s ease;
  pointer-events: none;         /* чтобы не мешать кликам/hover */
  z-index: -1;
  /* цвет будет задан ниже в зависимости от качества */
}

/* 2) Цвета ореола по классам качества (адаптировано под нашу структуру) */
.container.effect-basic .sticker-container::before     { background: radial-gradient(circle, rgba(128,128,128,1) 0%, rgba(128,128,128,0) 70%); }
.container.effect-common .sticker-container::before    { background: radial-gradient(circle, rgba(156,163,175,1) 0%, rgba(156,163,175,0) 70%); }
.container.effect-uncommon .sticker-container::before  { background: radial-gradient(circle, rgba(59,130,246,1) 0%, rgba(59,130,246,0) 70%); }
.container.effect-rare .sticker-container::before      { background: radial-gradient(circle, rgba(168,85,247,1) 0%, rgba(168,85,247,0) 70%); }
.container.effect-epic .sticker-container::before      { background: radial-gradient(circle, rgba(250,204,21,1) 0%, rgba(250,204,21,0) 70%); }
.container.effect-legendary .sticker-container::before { background: radial-gradient(circle, rgba(245,158,11,1) 0%, rgba(245,158,11,0) 70%); }
.container.effect-official .sticker-container::before  { background: radial-gradient(circle, rgba(220,38,38,1) 0%, rgba(220,38,38,0) 70%); }

/* 3) Дополнительный слой размытия поверх ореола для сглаживания переходов */
.sticker-container::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  height: 280px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(80px);           /* еще больше размытия для сглаживания */
  opacity: 0.2;                 /* слабая дополнительная подсветка */
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
  /* цвет будет задан ниже */
}

/* Цвета дополнительного слоя размытия */
.container.effect-basic .sticker-container::after     { background: radial-gradient(circle, rgba(128,128,128,1) 0%, rgba(128,128,128,0) 50%); }
.container.effect-common .sticker-container::after    { background: radial-gradient(circle, rgba(156,163,175,1) 0%, rgba(156,163,175,0) 50%); }
.container.effect-uncommon .sticker-container::after  { background: radial-gradient(circle, rgba(59,130,246,1) 0%, rgba(59,130,246,0) 50%); }
.container.effect-rare .sticker-container::after      { background: radial-gradient(circle, rgba(168,85,247,1) 0%, rgba(168,85,247,0) 50%); }
.container.effect-epic .sticker-container::after      { background: radial-gradient(circle, rgba(250,204,21,1) 0%, rgba(250,204,21,0) 50%); }
.container.effect-legendary .sticker-container::after { background: radial-gradient(circle, rgba(245,158,11,1) 0%, rgba(245,158,11,0) 50%); }
.container.effect-official .sticker-container::after  { background: radial-gradient(circle, rgba(220,38,38,1) 0%, rgba(220,38,38,0) 50%); }

/* 4) Hover‑эффект: при наведении на контейнер оба слоя становятся ярче */
.sticker-container:hover::before {
  opacity: 0.6;  /* основной ореол ярче */
}

.sticker-container:hover::after {
  opacity: 0.4;  /* дополнительный слой тоже ярче */
}



/* Убираем фоны с result-container */
.result-container {
  background: transparent;
  position: relative;
  z-index: 1;
}

/* 🌟 CANVAS ДЛЯ СВЕТЛЯЧКОВ - ТОЧНО ПО РАЗМЕРУ КОНТЕЙНЕРА */
.fireflies-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;  /* Между фоном и контентом */
  pointer-events: none;  /* Не блокирует клики */
  border-radius: 12px;  /* Соответствует контейнеру */
}



/* Кнопка назад */
.back-button {
  position: absolute;
  top: -8px;
  left: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.2s ease;
  color: rgba(255, 255, 255, 0.8);
  z-index: 10;
}

.back-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}



.result-error {
  background: #1c0f13;
  border: 1px solid #dc2626;
  color: #fecaca;
  padding: 20px;
  border-radius: 8px;
  animation: fadeIn 0.3s ease;
}

.result-loading {
  background: #18181b;
  border: 1px solid #27272a;
  color: #a1a1aa;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.info-row {
  display: flex;               /* включаем Flexbox */
  align-items: center;         /* вертикальное центрирование */
  justify-content: space-between; /* метка слева, значение — справа */
  padding: 12px 0;             /* равные отступы сверху/снизу */
  border-bottom: 1px solid #27272a;
}

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

.info-label {
  font-weight: 500;
  color: #a1a1aa;
  font-size: 14px;
  margin: 0;                   /* убираем возможные внешние отступы */
  line-height: normal;         /* пусть браузер сам позаботится о высоте строки */
}

.info-value {
  color: #e4e4e7;
  font-size: 14px;
  text-align: right;
  margin: 0;                   /* убираем возможные внешние отступы */
  line-height: normal;         /* пусть браузер сам позаботится о высоте строки */
}

/* Glow эффект для модели ТОЛЬКО у официальных ✪ */
.container.effect-official .info-row:nth-child(3) .info-value {
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.4), 0 0 15px rgba(220, 38, 38, 0.15);
}

.info-value code {
  background: #09090b;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size: 12px;
}

.status-container {
  margin-top: 16px;
  padding: 12px;
  border-radius: 6px;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
}

.status-active {
  background: #0f1419;
  border: 1px solid #166534;
  color: #22c55e;
}

.status-expired {
  background: #1c0f13;
  border: 1px solid #dc2626;
  color: #ef4444;
}

.empty-state {
  text-align: center;
  color: #71717a;
  padding: 8px 0; /* Минимальные отступы */
  font-size: 14px;
}

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

.spinner {
  border: 2px solid #27272a;
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
  margin: 0 auto 12px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

a {
  color: #60a5fa;
  text-decoration: none;
}

a:hover {
  color: #93c5fd;
  text-decoration: underline;
}

h3 {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
}

.sticker-container {
  text-align: center;
  margin: 10px auto;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  max-width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

/* Убираем увеличение контейнера, чтобы ореол не масштабировался */
.sticker-container:hover {
  /* transform: scale(1.05); - убрано */
}

/* Увеличиваем только сам стикер - унифицированное правило */
.sticker-container:hover .sticker-image,
.sticker-container:hover .sticker-lottie,
.sticker-container:hover .sticker-video,
.sticker-container:hover .sticker-placeholder {
  transform: scale(1.05);
}

/* Hover только для стикера */



/* Убираем градиенты со стикер-контейнера */



/* Унифицированные стили для всех типов стикеров */
.sticker-image,
.sticker-lottie,
.sticker-video {
  max-width: 160px;
  max-height: 160px;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: none;
  transition: transform 0.2s ease;
}

/* 🎭 Стили для серого слепка стикера - ТОЧНО КАК У CANVAS */
.sticker-placeholder {
  width: 160px !important;
  height: 160px !important;
  max-width: 160px !important;
  max-height: 160px !important;
  display: block;
  margin: 0 auto;
  border-radius: 12px;
  /* УБИРАЕМ абсолютное позиционирование - пусть будет в потоке как canvas */
  /* Серый фильтр применяется в JS */
}

/* Специфичные размеры только для lottie */
.sticker-lottie {
  width: 160px;
  height: 160px;
}

/* Принудительные размеры для Canvas (RLottie/lottie-web) */
.sticker-lottie canvas {
  width: 160px !important;
  height: 160px !important;
  max-width: 160px !important;
  max-height: 160px !important;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 2; /* Поверх слепка */
  /* Агрессивная оптимизация рендеринга */
  image-rendering: optimizeSpeed !important;
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: optimize-contrast !important;
  image-rendering: pixelated !important;
  /* Максимальное аппаратное ускорение */
  transform: translateZ(0) !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  perspective: 1000px !important;
  /* Отключаем сглаживание для скорости */
  -webkit-font-smoothing: none !important;
  -moz-osx-font-smoothing: unset !important;
}

/* Дополнительные оптимизации для Android */
@media screen and (max-width: 768px) {
  .sticker-lottie canvas {
    /* Еще более агрессивная оптимизация на мобильных */
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    transform: translateZ(0) scale3d(1, 1, 1) !important;
  }
}

/* Принудительные размеры для SVG (lottie-web) */
.sticker-lottie svg {
  width: 160px !important;
  height: 160px !important;
  max-width: 160px !important;
  max-height: 160px !important;
  display: block;
  margin: 0 auto;
}

.sticker-loading {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  padding: 40px;
}

.sticker-error {
  color: #ef4444;
  font-size: 14px;
  padding: 20px;
}

/* Название, модель и серия стикера */
.sticker-title {
  font-size: 24px;
  font-weight: 600;
  color: white;
  margin: 20px 0 8px 0;
}

.sticker-model {
  font-size: 18px;
  font-weight: 500;
  color: white;
  margin: 0 0 8px 0;
}

/* Glow эффект ТОЛЬКО для официальных стикеров ✪ */
.container.effect-official .sticker-title {
  text-shadow: 0 0 12px rgba(239, 68, 68, 0.5), 0 0 18px rgba(220, 38, 38, 0.2);
}

.container.effect-official .sticker-model {
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.4), 0 0 12px rgba(220, 38, 38, 0.15);
}

.sticker-series {
  font-size: 14px; /* Уменьшил с 16px */
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.08); /* Более прозрачный как фон карточки */
  backdrop-filter: blur(10px); /* Тот же красивый эффект размытия */
  border: 1px solid rgba(255, 255, 255, 0.1); /* Тонкая рамка */
  padding: 6px 12px;
  border-radius: 12px;
  display: inline-block;
}

/* Детали стикера */
.sticker-details {
  text-align: left;
  max-width: 400px;
  margin: 0 auto;
  position: relative;
  z-index: 5; /* Поверх светлячков */
}

.detail-row {
  display: flex;               /* включаем Flexbox */
  align-items: center !important;         /* ПРИНУДИТЕЛЬНОЕ вертикальное центрирование */
  justify-content: space-between; /* метка слева, значение справа */
  padding: 16px 0 !important;             /* БОЛЬШЕ отступов сверху/снизу */
  margin: 0;                   /* убираем margin */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  min-height: 50px !important; /* ПРИНУДИТЕЛЬНАЯ минимальная высота */
}

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

.detail-label {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin: 0 !important;                   /* убираем внешние отступы */
  line-height: normal !important;         /* браузер сам определит высоту */
}

.detail-value {
  color: white;
  font-size: 14px;
  text-align: right;
  max-width: 60%;
  margin: 0 !important;                   /* убираем внешние отступы */
  line-height: normal !important;         /* браузер сам определит высоту */
  word-break: break-word;
}

/* 💰 Красивые стили для цены */
.price-usdt {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.price-keys {
  background: rgba(255, 255, 255, 0.1);
  color: #fbbf24;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 13px;
  margin-left: 6px;
}

/* 🎨 Красивые стили для других полей */

.field-owner {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 13px;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.field-owner a {
  color: white !important;
  text-decoration: none;
}

.field-key {
  background: rgba(255, 255, 255, 0.15);
  color: #e5e7eb;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 13px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit; /* Обычный шрифт, не моноширинный */
}

.field-key:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
}

.field-date {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 13px;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.field-volume {
  background: rgba(255, 255, 255, 0.1);
  color: #fbbf24;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 13px;
}

/* Стили для ключа */
.sticker-key {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Menlo', 'Courier New', monospace !important;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: all;
  letter-spacing: 0.3px;
  opacity: 0.8;
}

.sticker-key:hover {
  background: rgba(255, 255, 255, 0.15);
  opacity: 1;
}

/* 🌟 Пульсация ореола на мобильных устройствах */
@keyframes halo-pulse {
  0% { opacity: 0.4; }
  50% { opacity: 0.6; }
  100% { opacity: 0.4; }
}

/* 📱 МОБИЛЬНАЯ ВЕРСИЯ */
@media (max-width: 768px) {
  /* Пульсация ореола только на мобильных */
  .sticker-container::before {
    animation: halo-pulse 2s ease-in-out infinite;
  }

  /* Убираем hover эффект на мобильных, так как есть пульсация */
  .sticker-container:hover::before {
    opacity: 0.4; /* Возвращаем базовое значение */
  }
  /* 🎯 Body как flexbox для центрирования маленького контейнера */
  body {
    padding: 16px !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }

  /* 🎯 МАЛЕНЬКИЙ контейнер по центру */
  .container {
    max-width: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 20px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
    position: static;
  }

  /* 🎯 БОЛЬШОЙ контейнер на весь экран когда стикер найден */
  .container.sticker-found {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 16px !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  /* 🎯 Body меняется когда найден стикер */
  body:has(.container.sticker-found) {
    padding: 0 !important;
    align-items: stretch;
  }

  .sticker-details {
    max-width: none !important;
    width: 100% !important;
  }

  .detail-value {
    max-width: 70% !important; /* Больше места для значений на мобильном */
  }

  /* Убираем лишние отступы */
  h1 {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
  }

  /* 📱 Увеличиваем шрифты на мобильных */
  .sticker-title {
    font-size: 28px !important; /* Было 24px */
  }

  .sticker-model {
    font-size: 20px !important; /* Было 18px */
  }

  .sticker-series {
    font-size: 16px !important; /* Уменьшил с 18px до 16px */
  }

  .detail-label {
    font-size: 16px !important; /* Было 14px */
  }

  .detail-value {
    font-size: 16px !important; /* Было 14px */
  }

  /* Увеличиваем блоки полей */
  .price-usdt, .price-keys, .field-owner, .field-key, .field-date, .field-volume {
    font-size: 15px !important; /* Было 13px */
    padding: 6px 10px !important; /* Было 4px 8px */
  }
}

/* 🎨 Тайловый фон всего сайта на основе стикера */
body.has-tiled-bg {
  position: relative;
  /* НЕ применяем фон к body напрямую - только через ::before */
}

body.has-tiled-bg::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: var(--tiled-bg-url);
  background-size: 180px 180px; /* Увеличиваем расстояние между тайлами */
  background-repeat: repeat;
  background-position: 0 0;
  /* 🎨 Простое обесцвечивание с прозрачностью */
  filter: grayscale(100%) brightness(0.2) opacity(0.15);
  z-index: -10;
  pointer-events: none;
}

/* 🔗 Подпись о создании через бота */
.bot-attribution {
  text-align: center;
  margin-top: 24px;
  padding: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.bot-attribution a {
  color: #60a5fa;
  text-decoration: none;
  font-weight: 500;
}

.bot-attribution a:hover {
  color: #93c5fd;
  text-decoration: underline;
}