@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

:root {
  --bg-obsidian: #0B0D17;
  --card-slate: #121629;
  --border-slate: #21284A;
  --cyan-accent: #00F2FE;
  --purple-glow: #7F00FF;
}

/* 1. Instant dark background color to prevent flash on load */
html, body {
  background-color: #0B0D17 !important;
}

/* 2. Global Platform Body: Applied automatically to all non-admin routes */
body.platform-body {
  background-color: #0B0D17 !important;
  background-image: url('/assets/payitch_bg.webp');
  background-repeat: repeat;
  background-position: 68% 32%;
  background-size: 2800px;
  background-attachment: fixed;
  color: #E2E8F0;
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

/* 3. Explicit Admin Excluded Layout */
body.admin-page {
  background-image: none !important;
  background-color: #0B0D17 !important;
}

/* 4. Task Card Styling: ~90% opaque color-matched gradient preventing watermark bleed */
.sharp-card, .task-card, .app-feed-card {
  background: linear-gradient(180deg, rgba(18, 22, 41, 0.92) 0%, rgba(11, 13, 23, 0.95) 100%) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 242, 254, 0.15);
  border-radius: 0.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.accordion-wrapper {
  width: 100%;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
  opacity: 0;
}

.accordion-item.active .accordion-content {
  max-height: 1000px;
  opacity: 1;
}

.accordion-item.active .accordion-chevron {
  transform: rotate(180deg);
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee-smooth {
  display: flex;
  width: max-content;
  animation: marquee 45s linear infinite;
}