/* Adapt to Telegram themeParams (set as CSS variables by app.js). */
:root {
  --tg-bg: #ffffff;
  --tg-text: #000000;
  --tg-hint: #6c757d;
  --tg-link: #2481cc;
  --tg-button: #2481cc;
  --tg-button-text: #ffffff;
  --tg-secondary-bg: #f1f3f5;
}

html, body {
  background: var(--tg-bg);
  color: var(--tg-text);
}

.tg-body .card {
  background: var(--tg-secondary-bg);
  color: var(--tg-text);
  border: 0;
}

.tg-body .btn-primary {
  background: var(--tg-button);
  border-color: var(--tg-button);
  color: var(--tg-button-text);
}

.tg-body .btn-outline-primary {
  border-color: var(--tg-button);
  color: var(--tg-button);
}
.tg-body .btn-outline-primary.active,
.tg-body .btn-outline-primary:hover {
  background: var(--tg-button);
  color: var(--tg-button-text);
}

.view { animation: fadein .25s ease-out; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* --- Lightweight animated background (pure CSS) --- */
.bg-anim {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bg-anim span {
  position: absolute;
  display: block;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .35;
  animation: drift 18s ease-in-out infinite alternate;
}
.bg-anim span:nth-child(1) { left: -80px;  top: -60px;  background: #4e9af1; animation-delay: 0s; }
.bg-anim span:nth-child(2) { right: -90px; top: 30%;    background: #f17c4e; animation-delay: -6s; }
.bg-anim span:nth-child(3) { left: 30%;    bottom: -90px; background: #57d68d; animation-delay: -12s; }

@keyframes drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(40px, -30px, 0) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-anim span { animation: none; }
  .view { animation: none; }
}