/* -- Theme & Shared Styles --
   Used by all templates. Edit here - do NOT copy into individual templates.
-- */

/* -- Font variation settings -- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.fill-icon {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* -- Scrollbar hiding + iOS momentum scroll -- */
::-webkit-scrollbar { display: none; }
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

/* -- Telegram theme variables (fallbacks for non-Telegram contexts) -- */
:root {
  --tg-bg-color: #131314;
  --tg-text-color: #e5e2e3;
  --tg-hint-color: #b9cac9;
  --tg-link-color: #00fbfb;
  --tg-button-color: #00fbfb;
  --tg-button-text-color: #003737;
  --tg-secondary-bg-color: #1c1b1c;
  --tg-section-bg-color: #201f20;
  --tg-header-bg-color: #131314;
}

/* -- Base body -- */
body {
  min-height: max(884px, 100dvh);
  background: var(--tg-bg-color, #131314);
  color: var(--tg-text-color, #e5e2e3);
  overflow-x: hidden;
}

/* -- Safe-area helpers -- */
.pt-safe { padding-top: var(--app-safe-top); }
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }
.pl-safe { padding-left: env(safe-area-inset-left); }
.pr-safe { padding-right: env(safe-area-inset-right); }

/* -- App-level safe-area top --
   Combines the system notch (env) with Telegram's content-safe-area (which
   in fullscreen mode also includes the floating close/menu button row).
   `--tg-content-safe-area-inset-top` is set by telegram-init.js when
   running inside Telegram; outside Telegram it falls back to env() only. */
:root {
  --app-safe-top: max(env(safe-area-inset-top), var(--tg-content-safe-area-inset-top, 0px));
}

/* -- App-bar safe-area auto-fix --
   Specificity > Tailwind's single utility class so this overrides `h-14`/`h-16`. */
header.fixed.top-0.h-16 {
  height: calc(4rem + var(--app-safe-top));
  padding-top: var(--app-safe-top);
}
header.fixed.top-0.h-14 {
  height: calc(3.5rem + var(--app-safe-top));
  padding-top: var(--app-safe-top);
}

/* Sub-bars (filter strips, status tabs) anchored just under the app bar must
   shift by the same safe-area amount or they slide under the notch / Telegram
   floating buttons. */
.fixed.top-14 { top: calc(3.5rem + var(--app-safe-top)); }
.fixed.top-16 { top: calc(4rem + var(--app-safe-top)); }

/* -- Minimum touch target (WCAG AA: 44x44 CSS px) --
   Apply via class="tap-target" to any interactive element <44px. */
.tap-target {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Filter chips need a real touch target without changing visual size much. */
.filter-option-chip,
.filter-pill,
[role="button"].chip {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* -- Animations (canonical set) -- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* -- Skeleton loader --
   Uses rgba so the same shimmer reads correctly on every parent surface
   (card-art's near-black gradient, card body's #1a1a1b, sheet bgs, etc.)
   without going invisible. `background-color` is the always-on base; the
   gradient sweeps a softer-to-brighter highlight across it with a hint of
   brand cyan at the peak so loading states feel on-theme. */
.skel {
  background-color: rgba(255, 255, 255, 0.06);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0)    0%,
    rgba(255, 255, 255, 0.08) 40%,
    rgba(0, 251, 251, 0.06)   50%,
    rgba(255, 255, 255, 0.08) 60%,
    rgba(255, 255, 255, 0)    100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: shimmer 1.45s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; background-image: none; }
}

/* -- Glass card -- */
.glass-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* -- Asymmetric background gradient -- */
.asymmetric-gradient {
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(0,251,251,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 110%, rgba(0,251,251,0.04) 0%, transparent 55%),
    #131314;
}

/* -- Neon glow effects -- */
.neon-glow {
  box-shadow: 0 0 20px rgba(0,251,251,0.15), 0 0 40px rgba(0,251,251,0.08);
}
.neon-glow-sm {
  box-shadow: 0 0 12px rgba(0,251,251,0.12);
}
.neon-glow-strong {
  box-shadow: 0 0 30px rgba(0,251,251,0.25), 0 0 60px rgba(0,251,251,0.12);
}

/* -- Virtual card gradient --
   Lifted glassy sheen for "card art" / hero surfaces. Layered: a top-left
   white->cyan glaze (matches the originals' card_marketplace style) over a
   deep teal base so the class is self-contained for hero containers. */
.virtual-card-gradient {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(0,251,251,0.05) 100%),
    linear-gradient(135deg, rgba(0,58,58,0.70) 0%, rgba(14,14,15,0.80) 100%);
}

/* -- Card lift hover -- */
.card-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-lift:hover {
  transform: translateY(-2px);
}

/* -- Animation stagger delays (canonical: 70ms steps) -- */
.stagger-1 { animation-delay: 70ms; }
.stagger-2 { animation-delay: 140ms; }
.stagger-3 { animation-delay: 210ms; }
.stagger-4 { animation-delay: 280ms; }
.stagger-5 { animation-delay: 350ms; }

/* -- Anim-up utility -- */
.anim-up {
  opacity: 0;
  animation: fadeUp 0.35s cubic-bezier(0.16,1,0.3,1) forwards;
}

/* -- Copy button -- */
.copy-btn {
  transition: opacity 0.15s;
}
.copy-btn:active {
  opacity: 0.6;
}

/* -- Mono data display -- */
.mono-data {
  font-family: 'Courier New', monospace;
  letter-spacing: 0.08em;
}

/* -- Spinner -- */
.spinner {
  animation: spin 0.7s linear infinite;
}