/* P2N SMM Service — базовые стили и токены тем.
   Семантические цвета заданы как RGB-триплеты в CSS-переменных,
   а Tailwind ссылается на них (см. inline-конфиг в base.html).
   Это даёт переключение dark/light без дублирования классов. */

/* ---- Светлая тема (по умолчанию переменные) ---- */
:root {
  --bg: 247 248 251;
  --surface: 255 255 255;
  --card: 255 255 255;
  --border: 226 228 236;
  --muted: 100 105 122;
  --fg: 17 20 32;
  --ring: 109 94 252;
}

/* ---- Тёмная premium-тема ---- */
.dark {
  --bg: 9 9 16;
  --surface: 14 14 23;
  --card: 19 19 30;
  --border: 38 39 56;
  --muted: 150 152 172;
  --fg: 232 233 242;
  --ring: 139 125 255;
}

html { scroll-behavior: smooth; }

body {
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

/* Premium-фон: мягкое свечение сверху + тонкая сетка */
.app-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.dark .app-bg {
  background:
    radial-gradient(60rem 32rem at 75% -8%, rgba(124, 108, 255, 0.16), transparent 60%),
    radial-gradient(48rem 28rem at 5% 0%, rgba(168, 85, 247, 0.10), transparent 55%);
}
.app-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(var(--border) / 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--border) / 0.5) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, black, transparent 75%);
          mask-image: radial-gradient(70% 60% at 50% 0%, black, transparent 75%);
  opacity: 0.35;
}

/* Скроллбар */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgb(var(--border));
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgb(var(--muted) / 0.6); background-clip: padding-box; }

/* Анимации появления */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-rise { animation: rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
}
.pulse-dot { animation: pulse-dot 1.8s ease-in-out infinite; }

/* Плавный hover-подъём карточек */
.lift { transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s; }
.lift:hover { transform: translateY(-3px); }

/* Иконки lucide одинакового размера */
[data-lucide] { width: 1em; height: 1em; }