/* ==========================================================================
   SOLANA ART SCANNER // DESIGN SYSTEM & TOKENS
   Aesthetic: objkt.com Obsidian Black Gallery Mode, Ambient Solana Lighting
   Official Domain: SolanaNFT.art
   ========================================================================== */

:root {
  --bg-primary: #000000;
  --bg-secondary: #000000;
  --bg-card: #000000;
  --bg-card-hover: #000000;
  --bg-glass: rgba(255, 255, 255, 0.02);
  --border-glass: rgba(255, 255, 255, 0.08);
  --border-glass-hover: rgba(255, 255, 255, 0.24);

  --sol-purple: #9945FF;
  --sol-purple-hover: #8330e6;
  --sol-green: #14F195;
  --sol-cyan: #00F0FF;
  --sol-gold: #FFD700;
  --text-primary: #FFFFFF;
  --text-secondary: #949494;
  --text-muted: #555555;

  --grad-solana: linear-gradient(135deg, #14F195 0%, #00F0FF 100%);
  --grad-surface: linear-gradient(180deg, #121212 0%, #080808 100%);
  --glow-purple: 0 0 25px rgba(0, 0, 0, 0.85);
  --glow-green: 0 0 25px rgba(0, 0, 0, 0.85);

  --font-display: 'Syne', sans-serif;
  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --transition-smooth: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

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

body {
  background-color: #000000;
  background: #000000;
  color: var(--text-primary);
  font-family: var(--font-body);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Subtle top edge border */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  z-index: 999;
}

/* Typography Helpers */
h1, h2, h3, .font-display {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.mono {
  font-family: var(--font-mono);
}

.gradient-text {
  background: var(--grad-solana);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ZYMATICA 2026-10-10 v10: anchor jumps land below the sticky header, smoothly. */
html {
  scroll-behavior: smooth;
}
#gallery-grid, #ai-jury-hiring-section, #solana-radar-deck {
  scroll-margin-top: 84px; /* sticky nav ~62px + breathing room */
}

/* Header & Navigation Suite - objkt.com Obsidian Black Gallery Style */
.sanctuary-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #000000;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.45rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.95);
  transition: all 0.3s ease;
  min-height: 70px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

/* Official Solana Brand Lockup: Animated Avatar & SolanaNft.art */
.brand-lockup-link {
  display: inline-flex;
  align-items: center;
  gap: 0; /* Direct, unified lockup with zero excess gap */
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  padding-bottom: 2px;
  /* ZYMATICA 2026-10-11 (operator: "the gif face and the URL next to it —
     move it left a bit, both"): one shift for the WHOLE lockup, all viewports —
     face and wordmark travel together. -8px vs the 10px nav padding lands the
     lockup at x=2 (flush without clipping; -12 measured off-screen at -2). */
  margin-left: -8px;
}

.brand-lockup-link:hover {
  transform: translateY(-1px);
}

.brand-logo-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: auto;
  /* ZYMATICA 2026-10-09: operator directive — bigger brand presence filling the header */
  min-width: 112px;
  height: 112px;
  margin-right: 0;
  cursor: pointer;
}

/* 3D Holographic Animated Avatar Mark - At least 20% Bigger on Desktop */
.brand-paint-streaks-img {
  height: 112px; /* ZYMATICA 2026-10-09: 88 → 112 (+27%) — bigger rotating face per operator directive */
  width: auto;
  display: block;
  object-fit: contain;
  filter: none !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), filter 0.25s ease;
  will-change: transform, filter;
  cursor: pointer;
  user-select: none;
}

.brand-paint-streaks-img.avatar-frozen {
  filter: drop-shadow(0 0 16px rgba(0, 240, 255, 0.85)) brightness(1.25) !important;
  transform: scale(0.96);
}

.brand-lockup-link:hover .brand-paint-streaks-img:not(.avatar-frozen),
.header-brand:hover .brand-paint-streaks-img:not(.avatar-frozen),
.footer-brand-logo-link:hover .brand-paint-streaks-img:not(.avatar-frozen) {
  transform: scale(1.08) translateY(-1px);
  filter: drop-shadow(0 0 12px rgba(20, 241, 149, 0.45)) !important;
}

.official-brand-logo-mark-img {
  height: 50px;
  width: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
  will-change: filter, transform;
}

/* 3D Gyroscope Fallback Logo Mark */
.animated-logo-gyro {
  animation: gyroArtSpectrumLiving 5.5s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 8px rgba(20, 241, 149, 0.4)) drop-shadow(0 0 16px rgba(153, 69, 255, 0.3));
}

@keyframes gyroArtSpectrumLiving {
  0% {
    filter: drop-shadow(0 0 8px rgba(20, 241, 149, 0.45)) hue-rotate(0deg) brightness(1.05) saturate(1.2);
    transform: scale(1) rotate(0deg);
  }
  33% {
    filter: drop-shadow(0 0 14px rgba(0, 240, 255, 0.55)) hue-rotate(24deg) brightness(1.18) saturate(1.35);
    transform: scale(1.03) rotate(1.2deg);
  }
  66% {
    filter: drop-shadow(0 0 16px rgba(153, 69, 255, 0.55)) hue-rotate(-20deg) brightness(1.22) saturate(1.4);
    transform: scale(1.02) rotate(-1.2deg);
  }
  100% {
    filter: drop-shadow(0 0 14px rgba(255, 0, 122, 0.5)) hue-rotate(15deg) brightness(1.1) saturate(1.25);
    transform: scale(1) rotate(0deg);
  }
}

.brand-lockup-link:hover .official-brand-logo-mark-img {
  transform: scale(1.08);
  filter: drop-shadow(0 0 20px rgba(20, 241, 149, 0.75)) drop-shadow(0 0 32px rgba(0, 240, 255, 0.6)) brightness(1.3);
}

/* Brand Text: SolanaNft in pure white + .art lighting up from within (20%+ bigger) */
.brand-logo-text-wrap {
  display: inline-flex;
  align-items: baseline;
  font-family: 'Outfit', var(--font-body), sans-serif;
  font-size: 2.12rem; /* Bold, commanding brand presence (+23.2% bigger) */
  font-weight: 850;
  letter-spacing: -0.025em;
  user-select: none;
  line-height: 0.95;
  margin-left: 2px; /* Tight, unified brand lockup separation */
  margin-bottom: 0px;
  transform: translateY(1px);
}

.footer-brand-logo-link .brand-logo-text-wrap {
  margin-left: 0px;
  margin-bottom: 1px;
}

.brand-logo-solananft {
  color: #FFFFFF;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

/* .art Text Lights Up From Within with Smooth Chromatic Spectrum Wave */
.ambient-art-text {
  background: linear-gradient(
    90deg,
    #14F195 0%,
    #00F0FF 16.6%,
    #9945FF 33.3%,
    #FF007A 50%,
    #FF7A00 66.6%,
    #FFD700 83.3%,
    #14F195 100%
  );
  background-size: 200% auto;
  animation: solAmbientTextChromaWave 6s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 850;
  margin-left: 0.02em;
  filter: none;
}

.official-brand-logo-img {
  height: 52px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.75));
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), filter 0.25s ease;
}

.brand-lockup-link:hover .official-brand-logo-img {
  transform: scale(1.035);
  filter: drop-shadow(0 0 20px rgba(0, 240, 255, 0.55)) drop-shadow(0 0 32px rgba(20, 241, 149, 0.45));
}

/* Compact Live Domain Pill */
.nav-domain-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-full);
  padding: 0.24rem 0.65rem 0.24rem 0.5rem;
  text-decoration: none;
  transition: all 0.25s ease;
  font-size: 1.02rem; /* ZYMATICA 2026-10-09: bigger URL per operator directive */
}

.nav-domain-pill:hover {
  border-color: rgba(20, 241, 149, 0.6);
  background: rgba(20, 241, 149, 0.08);
  box-shadow: 0 0 16px rgba(20, 241, 149, 0.25);
  transform: translateY(-1px);
}

.nav-domain-name {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.nav-network-tag {
  color: #14F195;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: rgba(20, 241, 149, 0.12);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

.live-dot-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #14F195;
  box-shadow: 0 0 8px #14F195;
  animation: dotPulse 2s infinite ease-in-out;
}

@keyframes dotPulse {
  0%, 100% { transform: scale(0.9); opacity: 0.8; box-shadow: 0 0 4px #14F195; }
  50% { transform: scale(1.35); opacity: 1; box-shadow: 0 0 14px #14F195, 0 0 22px rgba(20, 241, 149, 0.6); }
}

/* Nav Actions - Modern Segmented Suite */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

/* Segmented Explorer Toolbar */
.nav-segmented-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* ==========================================================================
   Realtime Solana Live Price Ticker Capsule
   ========================================================================== */
.sol-price-ticker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 42px;
  padding: 0 0.6rem;
  background: rgba(14, 14, 24, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
  user-select: none;
}

.sol-price-ticker:hover {
  border-color: rgba(20, 241, 149, 0.45);
  background: rgba(18, 18, 32, 0.92);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55), 0 0 16px rgba(20, 241, 149, 0.25);
  transform: translateY(-1px);
}

.ticker-sol-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #181818;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

.ticker-sol-mark {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.ticker-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
}

.ticker-top-row {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.ticker-symbol {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
}

.ticker-price {
  font-size: 0.92rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}

.ticker-change-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  margin-top: 1px;
}

.ticker-change-badge.change-up {
  color: #14F195;
  text-shadow: 0 0 8px rgba(20, 241, 149, 0.45);
}

.ticker-change-badge.change-down {
  color: #FF4560;
  text-shadow: 0 0 8px rgba(255, 69, 96, 0.45);
}

.ticker-change-badge.change-neutral {
  color: rgba(255, 255, 255, 0.65);
}

.change-arrow {
  font-size: 0.62rem;
  line-height: 1;
}

.change-timeframe {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
  margin-left: 2px;
}

.ticker-pulse-wrap {
  display: flex;
  align-items: center;
  margin-left: 0.2rem;
}

.ticker-live-ping {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #14F195;
  box-shadow: 0 0 8px #14F195;
  animation: livePingPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Mobile Price Ticker is completely hidden on Desktop */
.mobile-price-ticker {
  display: none !important;
}

/* Radar Beacon Row on Desktop: keeps beacon inline with title */
.radar-beacon-row {
  display: inline-flex;
  align-items: center;
}

.radar-title-group {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}

@keyframes livePingPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

/* ==========================================================================
   Creator Studio Nav Action Suite: Modernized High-End Tabs
   ========================================================================== */
/* ==========================================================================
   Creator Studio Nav Action Suite: Vertical Palm-Aesthetic Tabs
   ========================================================================== */
.nav-creator-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(15, 15, 25, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 3px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 4px 20px rgba(0, 0, 0, 0.5);
}

.nav-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 44px;
  padding: 0 0.85rem;
  border-radius: 9px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.01em;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  outline: none;
  position: relative;
}

.nav-action-btn .nav-btn-icon {
  font-size: 0.95rem;
  line-height: 1;
}

.nav-action-btn.nav-btn-collection:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  transform: translateY(-1px);
}

/* ==========================================================================
   Animated .art Liquid Spectrum Lighting For Header Action Buttons
   ========================================================================== */
@keyframes solBtnArtChromaShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Radiant Orange & Yellow Liquid Living Lighting Animation For Connect Wallet */
@keyframes solWalletAmberOrangeShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ==========================================================================
   TOP NAVIGATION ACTION BUTTONS - LUXURY OBSIDIAN SUITE
   Uniform dimensions, evenly spaced, vibrant .art chromatic border wave glows
   ========================================================================== */

/* Shared Vertical Action Button Base */
.nav-action-btn {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 48px !important;
  height: 48px !important;
  min-width: 106px !important;
  padding: 0.28rem 0.55rem !important;
  border-radius: 11px !important;
  cursor: pointer !important;
  outline: none !important;
  gap: 2px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  font-family: 'Outfit', sans-serif !important;
  background: transparent !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.85) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
  z-index: 1 !important;
  isolation: isolate !important;
}

.nav-action-btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.92) !important;
}

/* Inner obsidian glass card body for all action buttons */
.nav-action-btn::after {
  content: '' !important;
  position: absolute !important;
  inset: 1.5px !important;
  border-radius: 9.5px !important;
  background: linear-gradient(180deg, rgba(20, 23, 34, 0.92) 0%, rgba(8, 9, 15, 0.98) 100%) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.22), inset 0 -1px 2px rgba(0, 0, 0, 0.5) !important;
  z-index: 0 !important;
  transition: background 0.25s ease, box-shadow 0.25s ease !important;
  pointer-events: none !important;
}

.nav-action-btn:hover::after {
  background: linear-gradient(180deg, rgba(30, 34, 52, 0.94) 0%, rgba(12, 14, 24, 0.99) 100%) !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35), inset 0 -1px 3px rgba(0, 0, 0, 0.6) !important;
}

/* Ensure text and icons sit crisply on top of the obsidian inner card */
.nav-action-btn > * {
  position: relative !important;
  z-index: 1 !important;
}

.nav-action-btn .btn-line-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1.15;
}

.nav-action-btn .nav-btn-svg {
  display: inline-block;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), filter 0.25s ease;
}

.nav-action-btn:hover .nav-btn-svg {
  transform: scale(1.15);
}

.nav-action-btn .nav-btn-svg.svg-green {
  color: #14F195;
  filter: drop-shadow(0 0 5px rgba(20, 241, 149, 0.7));
}

.nav-action-btn .nav-btn-svg.svg-gold {
  color: #FFD700;
  filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.7));
}

.nav-action-btn .nav-btn-svg.svg-chroma {
  color: #00F0FF;
  filter: drop-shadow(0 0 5px rgba(0, 240, 255, 0.7));
}

.nav-action-btn .btn-title {
  color: #FFFFFF !important;
  font-size: 0.84rem;
  font-weight: 850;
  letter-spacing: 0.015em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  line-height: 1.15;
}

.nav-action-btn .btn-line-sub {
  font-family: var(--font-mono), monospace !important;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-action-btn .btn-line-sub.sub-green {
  color: #14F195 !important;
  background: rgba(20, 241, 149, 0.12) !important;
  border: 1px solid rgba(20, 241, 149, 0.35) !important;
  padding: 0.08rem 0.45rem !important;
  border-radius: 4px !important;
  text-shadow: 0 0 6px rgba(20, 241, 149, 0.6) !important;
}

.nav-action-btn .btn-line-sub.sub-gold {
  color: #FFD700 !important;
  background: rgba(255, 215, 0, 0.12) !important;
  border: 1px solid rgba(255, 215, 0, 0.35) !important;
  padding: 0.08rem 0.45rem !important;
  border-radius: 4px !important;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.6) !important;
}

.nav-action-btn .btn-line-sub.sub-purple {
  color: #c084fc !important;
  background: rgba(192, 132, 252, 0.12) !important;
  border: 1px solid rgba(192, 132, 252, 0.35) !important;
  padding: 0.08rem 0.45rem !important;
  border-radius: 4px !important;
  text-shadow: 0 0 6px rgba(192, 132, 252, 0.6) !important;
}

/* NFT Design Awards Living Chromatic Wave Light-up */
.nav-action-btn .btn-line-sub.cool-gradient-text {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.60rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  line-height: 1.15 !important;
  display: inline-block !important;
  white-space: nowrap !important;
  background: linear-gradient(
    90deg,
    #14F195 0%,
    #00F0FF 20%,
    #9945FF 40%,
    #FF007A 60%,
    #FFD700 80%,
    #14F195 100%
  ) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: solAmbientTextChromaWave 6s linear infinite !important;
  filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.6)) drop-shadow(0 0 8px rgba(153, 69, 255, 0.4)) !important;
}

/* 1. List NFT Button - Emerald & Cyan Chromatic Wave Border */
.btn-ambient-list-sale::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(
    90deg,
    #14F195 0%,
    #00F0FF 50%,
    #14F195 100%
  ) !important;
  background-size: 200% 200% !important;
  animation: solAmbientTextChromaWave 5s linear infinite !important;
  z-index: -1 !important;
  opacity: 0.95 !important;
  transition: opacity 0.25s ease, filter 0.25s ease !important;
  pointer-events: none !important;
}

.btn-ambient-list-sale:hover::before {
  opacity: 1 !important;
  filter: drop-shadow(0 0 12px rgba(20, 241, 149, 0.6)) drop-shadow(0 0 20px rgba(0, 240, 255, 0.45)) !important;
}

/* 2. Mint Art Button - Solana Purple & Gold Living Chromatic Wave Border */
.nav-action-btn.btn-mint-horizontal::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(
    90deg,
    #9945FF 0%,
    #FF007A 35%,
    #FFD700 70%,
    #9945FF 100%
  ) !important;
  background-size: 200% 200% !important;
  animation: solAmbientTextChromaWave 5s linear infinite !important;
  z-index: -1 !important;
  opacity: 0.95 !important;
  transition: opacity 0.25s ease, filter 0.25s ease !important;
  pointer-events: none !important;
}

.nav-action-btn.btn-mint-horizontal:hover::before {
  opacity: 1 !important;
  filter: drop-shadow(0 0 12px rgba(153, 69, 255, 0.65)) drop-shadow(0 0 20px rgba(255, 0, 122, 0.5)) !important;
}

/* 3. Submit Art Button - Cyan & Deep Violet Living Chromatic Spectrum Border */
.nav-action-btn.btn-submit-horizontal::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(
    90deg,
    #14F195 0%,
    #00F0FF 20%,
    #9945FF 40%,
    #FF007A 60%,
    #FFD700 80%,
    #14F195 100%
  ) !important;
  background-size: 200% auto !important;
  animation: solAmbientTextChromaWave 6s linear infinite !important;
  z-index: -1 !important;
  opacity: 0.95 !important;
  transition: opacity 0.25s ease, filter 0.25s ease !important;
  pointer-events: none !important;
}

.nav-action-btn.btn-submit-horizontal:hover::before {
  opacity: 1 !important;
  filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.6)) drop-shadow(0 0 20px rgba(153, 69, 255, 0.55)) !important;
}

/* 4. Connect Wallet Button - Exact Living Chromatic Wave Fill as MINTED */
.btn-wallet-chroma {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 48px !important;
  height: 48px !important;
  padding: 0 0.85rem !important;
  border-radius: 11px !important;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.015em !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  outline: none !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  background: linear-gradient(
    90deg,
    #14F195 0%,
    #00F0FF 16.6%,
    #9945FF 33.3%,
    #FF007A 50%,
    #FF7A00 66.6%,
    #FFD700 83.3%,
    #14F195 100%
  ) !important;
  background-size: 200% auto !important;
  animation: solAmbientTextChromaWave 6s linear infinite !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.75), 0 0 22px rgba(20, 241, 149, 0.45), 0 0 35px rgba(153, 69, 255, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.75), inset 0 -1px 2px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
  z-index: 1 !important;
  color: #FFFFFF !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

.btn-wallet-chroma::before {
  display: none !important;
}

.btn-wallet-chroma::after {
  display: none !important;
}

.btn-wallet-chroma:hover {
  transform: translateY(-1.5px) scale(1.02) !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.85), 0 0 32px rgba(20, 241, 149, 0.65), 0 0 50px rgba(153, 69, 255, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.9), inset 0 -1px 3px rgba(0, 0, 0, 0.5) !important;
}

.btn-wallet-chroma .wallet-icon-svg-box {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #FFFFFF !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.6)) !important;
  transition: transform 0.25s ease !important;
  line-height: 1 !important;
}

.btn-wallet-chroma:hover .wallet-icon-svg-box {
  transform: scale(1.12) !important;
}

.btn-wallet-chroma .wallet-svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
}

.btn-wallet-chroma .wallet-label {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: transparent !important;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 850 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.015em !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 2px 4px rgba(0, 0, 0, 0.7) !important;
  line-height: 1 !important;
  filter: none !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}


/* Docs Library Navigation Button */
.nav-action-btn.nav-btn-docs {
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  text-decoration: none;
}

.nav-action-btn.nav-btn-docs:hover {
  background: #202020;
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  transform: translateY(-1px);
}

.nav-badge-jury {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.12rem 0.38rem;
  border-radius: 5px;
  background: #1e1e1e;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e0e0e0;
  letter-spacing: 0.04em;
  margin-left: 0.2rem;
}

/* Compact Solana RPC Cluster Switcher */
.cluster-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: #121212;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  padding: 0 0.65rem;
  height: 38px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.04);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.cluster-select-wrap:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: #1a1a1a;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.cluster-indicator-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #14F195;
  box-shadow: 0 0 6px #14F195;
  flex-shrink: 0;
}

.cluster-select {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 0.77rem;
  font-weight: 600;
  font-family: var(--font-body);
  padding: 0 0.35rem 0 0.35rem;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.cluster-select option {
  background: #111111;
  color: #ffffff;
}

.cluster-arrow {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.45);
  pointer-events: none;
  line-height: 1;
}

/* Primary CTA: Modern Mint Studio */
.btn-mint-modern {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  height: 35px;
  padding: 0 0.95rem;
  border-radius: 9px;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: 'Outfit', var(--font-body);
  cursor: pointer;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  outline: none;
}

.btn-mint-modern:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.35);
  background: #202020;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.85);
  color: #ffffff;
}

.mint-sparkle {
  color: #14F195;
  font-size: 0.88rem;
  line-height: 1;
  animation: sparkleSpin 4s infinite linear;
}

@keyframes sparkleSpin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Institutional Wallet Button */
.btn-wallet-modern {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 38px;
  padding: 0 1.05rem;
  border-radius: 11px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 16px rgba(0, 0, 0, 0.6);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  outline: none;
}

.btn-wallet-modern:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: #202020;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
  transform: translateY(-1px);
}

/* Nav Responsive Queries */
@media (max-width: 1440px) {
  .nav-action-btn {
    min-width: 94px !important;
    padding: 0.25rem 0.42rem !important;
  }
  .btn-wallet-chroma {
    padding: 0 0.72rem !important;
    font-size: 0.84rem !important;
  }
  .sol-price-ticker {
    padding: 0 0.42rem;
    gap: 0.35rem;
  }
}

@media (max-width: 1200px) {
  .nav-action-btn {
    min-width: 86px !important;
    padding: 0.22rem 0.36rem !important;
  }
  .nav-action-btn .btn-title {
    font-size: 0.8rem !important;
  }
  .nav-action-btn .btn-line-sub {
    font-size: 0.63rem !important;
  }
  .btn-wallet-chroma {
    padding: 0 0.65rem !important;
    font-size: 0.82rem !important;
  }
  .nav-domain-pill {
    /* ZYMATICA 2026-10-09: operator directive — keep the domain pill visible and
       larger on narrow headers; gif + URL fill the space so the row reads balanced. */
    display: inline-flex !important;
    font-size: 0.92rem !important;
    padding: 0.34rem 0.9rem 0.34rem 0.7rem !important;
    gap: 0.5rem !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
  .nav-domain-pill .nav-domain-name {
    font-size: 1.02rem !important;
    letter-spacing: 0.02em !important;
  }
  .nav-domain-pill .live-dot-pulse {
    width: 9px !important;
    height: 9px !important;
  }
}

/* Mobile Components Hidden on Desktop Devices */
.mobile-header-tools,
.mobile-bottom-dock,
.mobile-action-sheet-overlay {
  display: none;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .sanctuary-nav .desktop-price-ticker,
  .sanctuary-nav .nav-action-btn .btn-line-sub {
    display: none !important;
  }

  .sanctuary-nav .brand-logo-icon-wrap,
  .sanctuary-nav .brand-paint-streaks-img {
    height: 72px !important;
    min-width: 72px !important;
  }

  .sanctuary-nav .brand-logo-text-wrap {
    font-size: 1.4rem !important;
  }

  .sanctuary-nav {
    padding: 0.45rem 0.75rem !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 0.6rem !important;
  }
  .sanctuary-nav .nav-brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 0.6rem !important;
  }
  .sanctuary-nav .brand-lockup-link {
    flex: 0 0 auto !important;
  }
  .sanctuary-nav .mobile-header-tools {
    margin-left: 0 !important;
    flex-shrink: 0 !important;
  }
  .nav-actions {
    flex-wrap: nowrap !important;
    gap: 0.3rem !important;
    margin-left: auto !important;
  }
  .nav-action-btn {
    min-width: 78px !important;
    padding: 0.2rem 0.3rem !important;
  }
  .nav-action-btn .btn-title {
    font-size: 0.76rem !important;
  }
  .nav-action-btn .btn-line-sub {
    font-size: 0.6rem !important;
  }
  .btn-wallet-chroma {
    padding: 0 0.55rem !important;
    font-size: 0.78rem !important;
  }
}

@media (max-width: 768px) {
  .official-brand-logo-img {
    height: 38px;
    max-width: 150px;
  }
  .nav-segmented-toolbar {
    overflow-x: auto;
  }
  .nav-tab-btn {
    padding: 0.35rem 0.55rem;
    font-size: 0.74rem;
  }
  .nav-tool-btn {
    padding: 0.3rem 0.45rem;
  }
}

/* objkt.com Matte Obsidian Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.58rem 1.25rem;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-smooth);
  border: 1px solid transparent;
}

.btn-primary {
  background: #181818;
  color: #FFFFFF;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.btn-primary:hover {
  transform: translateY(-1px);
  background: #242424;
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.85);
}

.btn-secondary {
  background: #141414;
  color: #e0e0e0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-secondary:hover {
  background: #1f1f1f;
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  transform: translateY(-1px);
}

.btn-accent {
  background: #161616;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.btn-accent:hover {
  background: #222222;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
}

.btn-gold {
  background: rgba(255, 215, 0, 0.08);
  color: #ffd700;
  border: 1px solid rgba(255, 215, 0, 0.28);
}

.btn-gold:hover {
  background: rgba(255, 215, 0, 0.18);
  border-color: #ffd700;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.3);
}

/* Container */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.65rem 2rem 2.5rem;
}

/* Hero & Scanner Control Deck with Ambient Solana Watermark */
.scanner-deck {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  backdrop-filter: blur(20px);
  margin-bottom: 2.5rem;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

/* Authentic Solana Logo Mark Background Watermark */
.scanner-deck::before {
  content: '';
  position: absolute;
  top: 0px;
  right: -10px;
  width: 410px;
  height: 330px;
  background-image: url('solanaLogoMark.svg');
  background-repeat: no-repeat;
  background-position: center right;
  background-size: contain;
  opacity: 0.10;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.scanner-deck:hover::before {
  opacity: 0.15;
  transform: scale(1.02);
}

.scanner-deck::after {
  display: none;
}

.deck-official-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.95rem;
  border-radius: var(--radius-full);
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 0.6rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.deck-sol-mark {
  width: 15px;
  height: 13px;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
}

.deck-url-text {
  color: #ffffff;
  font-weight: 800;
}

.badge-separator {
  color: rgba(255, 255, 255, 0.25);
}

.deck-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Ambient Chroma Lighting Keyframes (Kept strictly within letter glyphs - zero external blur) */
@keyframes solAmbientTextChromaWave {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

.deck-title-area {
  width: 100%;
  position: relative;
}

.deck-ambient-heading {
  font-size: clamp(1.35rem, 1.95vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin-bottom: 0.75rem;
  line-height: 1.32;
  background-image: linear-gradient(
    90deg,
    #4285F4 0%,
    #9945FF 14.28%,
    #00F0FF 28.57%,
    #14F195 42.85%,
    #FBBF24 57.14%,
    #FF5E62 71.42%,
    #FF4081 85.71%,
    #4285F4 100%,
    #9945FF 114.28%,
    #00F0FF 128.57%,
    #14F195 142.85%,
    #FBBF24 157.14%,
    #FF5E62 171.42%,
    #FF4081 185.71%,
    #4285F4 200%
  );
  background-size: 200% auto;
  animation: solAmbientTextChromaWave 7s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.deck-lead-text.deck-ambient-lead {
  font-size: clamp(0.96rem, 1.1vw, 1.12rem);
  font-weight: 550;
  line-height: 1.72;
  max-width: 1020px;
  letter-spacing: 0.008em;
  background-image: linear-gradient(
    90deg,
    #4285F4 0%,
    #9945FF 14.28%,
    #00F0FF 28.57%,
    #14F195 42.85%,
    #FBBF24 57.14%,
    #FF5E62 71.42%,
    #FF4081 85.71%,
    #4285F4 100%,
    #9945FF 114.28%,
    #00F0FF 128.57%,
    #14F195 142.85%,
    #FBBF24 157.14%,
    #FF5E62 171.42%,
    #FF4081 185.71%,
    #4285F4 200%
  );
  background-size: 200% auto;
  animation: solAmbientTextChromaWave 7s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.deck-lead-text.deck-ambient-lead strong {
  font-weight: 850;
  filter: brightness(1.2);
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  background: rgba(20, 241, 149, 0.1);
  color: var(--sol-green);
  border: 1px solid rgba(20, 241, 149, 0.25);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sol-green);
  box-shadow: 0 0 10px var(--sol-green);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(20, 241, 149, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(20, 241, 149, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(20, 241, 149, 0); }
}

/* Omni Search Suite */
.search-input-group {
  display: flex;
  gap: 0.85rem;
  margin-bottom: 1rem;
  position: relative;
  width: 100%;
  align-items: stretch;
}

.input-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.search-icon-badge {
  position: absolute;
  left: 1.25rem;
  color: var(--sol-purple);
  pointer-events: none;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  z-index: 2;
  transition: var(--transition-smooth);
}

.input-wrapper:focus-within .search-icon-badge {
  color: var(--sol-cyan);
  transform: scale(1.1);
}

.input-field.omni-search {
  width: 100%;
  height: 56px;
  padding-left: 3.3rem;
  padding-right: 3rem;
  font-size: 1rem;
  font-family: var(--font-body);
  color: #ffffff;
  border-radius: var(--radius-md);
  background: #111111;
  border: 1.5px solid #282828;
  outline: none;
  box-sizing: border-box;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
  transition: var(--transition-smooth);
}

.input-field.omni-search::placeholder {
  color: #72748a;
  font-size: 0.92rem;
}

.input-field.omni-search:focus {
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), inset 0 2px 6px rgba(0, 0, 0, 0.5);
  background: #141414;
}

#btn-scan-wallet.btn-ambient-scan {
  height: 56px;
  padding: 0 2.2rem;
  font-size: 1.05rem;
  font-weight: 800;
  border-radius: var(--radius-md);
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.03em;
  cursor: pointer;
  outline: none;
  position: relative;
  overflow: hidden;
  background: #090a10;
  border: 1.5px solid transparent;
  background-image: 
    linear-gradient(#090a10, #090a10),
    linear-gradient(
      90deg,
      #4285F4 0%,
      #9945FF 14.28%,
      #00F0FF 28.57%,
      #14F195 42.85%,
      #FBBF24 57.14%,
      #FF5E62 71.42%,
      #FF4081 85.71%,
      #4285F4 100%,
      #9945FF 114.28%,
      #00F0FF 128.57%,
      #14F195 142.85%,
      #FBBF24 157.14%,
      #FF5E62 171.42%,
      #FF4081 185.71%,
      #4285F4 200%
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: auto, 200% auto;
  animation: solAmbientTextChromaWave 7s linear infinite;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
}

#btn-scan-wallet.btn-ambient-scan:hover {
  transform: translateY(-2px);
  background-image: 
    linear-gradient(#141520, #141520),
    linear-gradient(
      90deg,
      #4285F4 0%,
      #9945FF 14.28%,
      #00F0FF 28.57%,
      #14F195 42.85%,
      #FBBF24 57.14%,
      #FF5E62 71.42%,
      #FF4081 85.71%,
      #4285F4 100%,
      #9945FF 114.28%,
      #00F0FF 128.57%,
      #14F195 142.85%,
      #FBBF24 157.14%,
      #FF5E62 171.42%,
      #FF4081 185.71%,
      #4285F4 200%
    );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 4px 20px rgba(0, 0, 0, 0.6);
}

#btn-scan-wallet.btn-ambient-scan:active {
  transform: translateY(0);
}

#btn-scan-wallet.btn-ambient-scan .btn-ambient-text {
  background-image: linear-gradient(
    90deg,
    #4285F4 0%,
    #9945FF 14.28%,
    #00F0FF 28.57%,
    #14F195 42.85%,
    #FBBF24 57.14%,
    #FF5E62 71.42%,
    #FF4081 85.71%,
    #4285F4 100%,
    #9945FF 114.28%,
    #00F0FF 128.57%,
    #14F195 142.85%,
    #FBBF24 157.14%,
    #FF5E62 171.42%,
    #FF4081 185.71%,
    #4285F4 200%
  );
  background-size: 200% auto;
  animation: solAmbientTextChromaWave 7s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.04rem;
  letter-spacing: 0.03em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.clear-search-btn {
  position: absolute;
  right: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--text-secondary);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: var(--transition-smooth);
  z-index: 2;
}

.clear-search-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* Autocomplete Dropdown */
.search-suggestions-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: rgba(10, 10, 16, 0.96);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid var(--border-glass-hover);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.95);
  z-index: 100;
  max-height: 380px;
  overflow-y: auto;
  display: none;
}

.search-suggestions-dropdown.active {
  display: block;
}

.suggestion-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover, .suggestion-item.selected {
  background: rgba(255, 255, 255, 0.08);
}

.suggestion-thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: #000;
  border: 1px solid var(--border-glass);
}

.suggestion-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.suggestion-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
}

.suggestion-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.suggestion-badge {
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  background: rgba(20, 241, 149, 0.15);
  color: var(--sol-green);
  border: 1px solid rgba(20, 241, 149, 0.3);
  white-space: nowrap;
}

/* Search Mode Selector */
.search-modes-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}

.search-mode-chip {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-glass);
  color: var(--text-secondary);
  font-size: 0.75rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.search-mode-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.search-mode-chip.active {
  background: #242424;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  font-weight: 600;
}

/* Keyword Discovery Tag Cloud */
.keyword-tags-cloud {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.keyword-tag-pill {
  font-size: 0.73rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  background: rgba(20, 241, 149, 0.06);
  border: 1px solid rgba(20, 241, 149, 0.2);
  color: var(--sol-green);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.keyword-tag-pill:hover {
  background: rgba(20, 241, 149, 0.2);
  border-color: var(--sol-green);
  transform: translateY(-1px);
}

/* Search Stats Notification Banner */
.search-stats-banner {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1.2rem;
  margin-bottom: 1.5rem;
  background: #121212;
  border: 1px solid #222222;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  color: var(--text-primary);
}

.search-stats-banner.active {
  display: flex;
}

.search-stats-banner .reset-btn {
  background: transparent;
  border: 1px solid var(--border-glass);
  color: var(--sol-cyan);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.search-stats-banner .reset-btn:hover {
  background: rgba(0, 240, 255, 0.15);
}

.quick-shortcuts {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.shortcut-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.chip-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-glass);
  color: var(--text-secondary);
  font-size: 0.75rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.chip-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.28);
}

/* Metric Metrics Ticker */
.metrics-ticker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-glass);
}

.metric-card {
  display: flex;
  flex-direction: column;
}

.metric-val {
  font-size: 1.65rem;
  font-weight: 800;
  font-family: var(--font-display);
}

.metric-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Filters & Tabs */
.gallery-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.filter-tabs {
  display: flex;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-glass);
  padding: 0.3rem;
  border-radius: var(--radius-full);
  flex-wrap: wrap;
}

.tab-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.tab-btn:hover {
  color: var(--text-primary);
}

.tab-btn.active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Gallery Grid - 4 Columns per Row on Desktop */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin-bottom: 3rem;
  /* ZYMATICA 2026-10-11 (operator: "bottom of the website after the nft cards
     glitches"): reserve the full 20-card layout height so the batch rotation
     swap (every 60s) and lazy image fills can never collapse the grid — the
     sections below (jury banner, footer) never jump. Height = 5 rows desktop. */
  min-height: calc(5 * (var(--card-h, 320px) + 1.25rem));
}

@media (max-width: 1180px) {
  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* mobile: 7 rows of 20 cards reserved — rotation swap is height-stable */
    min-height: calc(7 * (var(--card-h, 320px) + 0.9rem));
    gap: 1.1rem;
  }
}

@media (max-width: 820px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
  }
}

@media (max-width: 520px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
}

/* ==========================================================================
   Gallery Pagination & Load More Controls (6 Rows / 24 Cards Golden Ratio)
   ========================================================================== */
.gallery-pagination-row {
  text-align: center;
  margin: 3rem 0 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 5;
}

.btn-gallery-load-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 0.92rem 2.4rem;
  font-size: 0.98rem;
  font-weight: 800;
  color: #FFFFFF;
  background: #06080F;
  border-radius: 9999px;
  cursor: pointer;
  border: 2px solid transparent;
  background-image: linear-gradient(#06080F, #06080F),
                    linear-gradient(135deg, #14F195 0%, #00F0FF 25%, #9945FF 50%, #FF007A 75%, #FFD700 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, 300% 300%;
  animation: solAmbientBoxBorderWave 6s ease infinite;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.75), 0 0 24px rgba(0, 240, 255, 0.35), 0 0 36px rgba(20, 241, 149, 0.2);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  text-decoration: none;
}

.btn-gallery-load-more:hover {
  transform: translateY(-2px) scale(1.025);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85), 0 0 36px rgba(0, 240, 255, 0.6), 0 0 48px rgba(153, 69, 255, 0.38);
  color: #FFFFFF;
}

.btn-gallery-load-more:active {
  transform: translateY(0) scale(0.99);
}

.btn-gallery-load-more::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-25deg);
  transition: left 0.75s ease;
}

.btn-gallery-load-more:hover::after {
  left: 150%;
}

.btn-palm-tree-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.8)) drop-shadow(0 0 14px rgba(20, 241, 149, 0.5));
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.btn-gallery-load-more:hover .btn-palm-tree-icon {
  transform: rotate(8deg) scale(1.12);
}

.load-more-count-badge {
  background: rgba(0, 240, 255, 0.12);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.45);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.25);
  font-family: var(--font-mono);
}


.art-card.row-one-graduated {
  animation: rowOneGlowPulse 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes rowOneGlowPulse {
  0% {
    box-shadow: 0 0 0 rgba(255, 215, 0, 0);
    transform: scale(1);
  }
  30% {
    box-shadow: 0 0 35px rgba(255, 215, 0, 0.6), 0 0 20px rgba(20, 241, 149, 0.4);
    transform: scale(1.02);
    border-color: rgba(255, 215, 0, 0.9);
  }
  100% {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    transform: scale(1);
    border-color: rgba(255, 255, 255, 0.09);
  }
}

/* ==========================================================================
   Fine Art Card - Ultra-HD Museum Quality & Pitch Black WebGL Obsidian
   ========================================================================== */
.art-card {
  background: #000000 !important;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease, box-shadow 0.28s ease;
  position: relative;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.98), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.art-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 20px 52px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 24px rgba(20, 241, 149, 0.15);
  background: #000000 !important;
}

/* Ultra-HD Media Canvas with WebGL GPU-accelerated subpixel clarity */
.card-media-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 50% 40%, #151a2d 0%, #06080f 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.card-media-wrap img, 
.card-media-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: high-quality;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, filter;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

/* Subtle Specular Vignette Over Artwork */
.card-media-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 40%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
  z-index: 2;
}

.art-card:hover .card-media-wrap img,
.art-card:hover .card-media-wrap video {
  transform: scale(1.04) translateZ(0);
  filter: contrast(1.05) saturate(1.08) brightness(1.02);
}

@media (hover: none) {
  .art-card,
  .art-card:hover,
  .art-card:active {
    transform: none !important;
    -webkit-transform: none !important;
  }
  .art-card:hover .card-media-wrap img,
  .art-card:hover .card-media-wrap video,
  .art-card:active .card-media-wrap img,
  .art-card:active .card-media-wrap video,
  .card-media-wrap img,
  .card-media-wrap video {
    transform: none !important;
    -webkit-transform: none !important;
    filter: none !important;
    will-change: auto !important;
    transition: none !important;
  }
}

.format-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  font-size: 0.68rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.28rem 0.65rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.85);
}

.format-badge.verified {
  border-color: var(--sol-green);
  color: var(--sol-green);
}

.card-award-ribbon {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.28rem 0.65rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.85);
}

.card-award-ribbon.nft-day {
  border-color: rgba(255, 215, 0, 0.6);
  color: #FFD700;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.35);
}

.card-award-ribbon.mention {
  border-color: rgba(20, 241, 149, 0.55);
  color: #14F195;
}

.card-award-ribbon.nominee {
  border-color: rgba(0, 240, 255, 0.45);
  color: #00F0FF;
}

.hover-overlay-btn {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease;
  z-index: 4;
}

.art-card:hover .hover-overlay-btn {
  opacity: 1;
}

.hover-overlay-btn .btn {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);
}

/* Info Section - Pure WebGL Pitch Black Obsidian with Maximum Contrast */
.card-content {
  background: #000000 !important;
  padding: 1.05rem 1.15rem 1.15rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: background 0.25s ease;
}

.art-card:hover .card-content {
  background: #000000 !important;
}

.card-title {
  color: #FFFFFF !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 1.12rem !important;
  font-weight: 800 !important;
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.card-artist {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.76rem !important;
  color: #8E8E93 !important;
  margin-bottom: 0.65rem;
  letter-spacing: 0.02em;
}

.card-details-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2rem 0;
  border: none !important;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.72);
  background: transparent !important;
}

.card-chain-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  padding: 0.15rem 0.45rem;
  font-size: 0.72rem;
  color: #FFFFFF;
}

.card-chain-pill .card-sol-icon {
  width: 12px;
  height: 12px;
  object-fit: contain;
}

.card-provenance-pill {
  background: rgba(20, 241, 149, 0.08);
  border: 1px solid rgba(20, 241, 149, 0.28);
  color: #14F195;
  border-radius: 5px;
  padding: 0.15rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
}

/* Real-time Cross-Marketplace Aggregator Status Pills */
.card-market-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 5px;
  padding: 0.15rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.card-market-pill.magic-eden {
  background: rgba(230, 0, 122, 0.14);
  border: 1px solid rgba(230, 0, 122, 0.45);
  color: #FF2E93;
}

.card-market-pill.tensor {
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.45);
  color: #00F0FF;
}

.card-market-pill.solananft-direct {
  background: rgba(20, 241, 149, 0.14);
  border: 1px solid rgba(20, 241, 149, 0.45);
  color: #14F195;
}

.card-market-pill.vaulted {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #A1A1AA;
}

.card-rubric-pills {
  margin: 0.6rem 0 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.card-rubric-score-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(20, 241, 149, 0.1);
  border: 1px solid rgba(20, 241, 149, 0.32);
  color: #14F195;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.card-rubric-score-badge.gold {
  background: rgba(255, 215, 0, 0.1);
  border-color: rgba(255, 215, 0, 0.38);
  color: #FFD700;
}

/* Marketplace Price & Buy/Offer Deck - Pure WebGL Black (objkt.com style without box) */
.card-price-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  margin: 0.75rem 0 0.55rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.card-price-tag {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
}

.price-sol-val {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 0.96rem;
  font-weight: 800;
  color: #00FFA3;
  letter-spacing: -0.01em;
}

.price-sol-val.floor-val {
  font-size: 0.86rem;
  font-weight: 700;
  color: #cbd5e1;
}

.price-sol-icon {
  width: 15px;
  height: 13px;
  object-fit: contain;
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

.price-usd-val {
  font-size: 0.72rem;
  color: #717a8a;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-weight: 500;
  margin-top: 1px;
}

.card-market-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

.btn-card-buy {
  background: #024d46;
  background: linear-gradient(180deg, #03554d 0%, #02443e 100%);
  border: 1px solid rgba(20, 241, 149, 0.28);
  color: #FFFFFF !important;
  font-size: 0.82rem;
  font-weight: 750;
  font-family: 'Outfit', 'Syne', -apple-system, sans-serif;
  padding: 0.4rem 0.95rem;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.btn-card-buy:hover {
  background: #00FFA3;
  color: #000000 !important;
  border-color: #00FFA3;
  box-shadow: 0 0 14px rgba(0, 255, 163, 0.6);
  transform: translateY(-1px);
}

.btn-card-offer {
  background: #000000;
  border: 1px solid #333942;
  color: #FFFFFF !important;
  font-size: 0.82rem;
  font-weight: 750;
  font-family: 'Outfit', 'Syne', -apple-system, sans-serif;
  padding: 0.4rem 0.88rem;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-card-offer:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.btn-card-vault-offer {
  background: #000000;
  border: 1px solid #2a2f38;
  color: #FFFFFF !important;
  font-size: 0.82rem;
  font-weight: 750;
  font-family: 'Outfit', 'Syne', -apple-system, sans-serif;
  padding: 0.4rem 0.95rem;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-card-vault-offer:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

/* Card Action Buttons Row - Pure Pitch Black */
.card-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.card-actions .btn {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.38rem 0.7rem;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.card-actions .btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.32);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.card-actions .btn-judge-critique {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.38rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.card-actions .btn-judge-critique:hover {
  background: rgba(20, 241, 149, 0.08);
  border-color: rgba(20, 241, 149, 0.45);
  color: #14F195;
  transform: translateY(-1px);
}

.card-actions .btn-accent {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--sol-cyan);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.38rem 0.7rem;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.card-actions .btn-accent:hover {
  background: rgba(0, 240, 255, 0.1);
  border-color: var(--sol-cyan);
  color: #FFFFFF;
  transform: translateY(-1px);
}

/* Empty State */
.empty-gallery {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 2rem;
  background: var(--bg-card);
  border: 1px dashed var(--border-glass);
  border-radius: var(--radius-lg);
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

/* Address List Item */
.address-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border-glass);
  transition: var(--transition-smooth);
}

.address-item-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.address-item-row .addr-txt {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.address-item-row .btn-copy {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-glass);
  color: var(--sol-cyan);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  cursor: pointer;
}

.address-item-row .btn-copy:hover {
  background: rgba(0, 240, 255, 0.15);
}

/* Lightbox & Exhibition Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10010;
  background: rgba(5, 5, 8, 0.92);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* ZYMATICA 2026-10-11 (operator: "bottom of Android Chrome glitches; hamburger
   glitches when opened"): idle modal overlays were opacity:0 BUT still
   display:flex + painted + running full-screen 25px backdrop blurs — SIX
   invisible blurred layers stacked over the page, all composited every frame
   on Android Chrome. Idle overlays must not exist for the compositor at all. */
.modal-overlay:not(.active) {
  display: none !important;
}

.modal-container {
  width: 100%;
  max-width: 1100px;
  max-height: 90vh;
  background: var(--bg-secondary);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  overflow-y: auto;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), var(--glow-purple);
  position: relative;
  display: flex;
  flex-direction: column;
}

.modal-close-btn {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: var(--text-primary);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: var(--transition-smooth);
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: rotate(90deg);
}

/* Multi-Wallet Modal Styles */
.wallet-modal-container {
  max-width: 490px;
  padding: 2.2rem 2rem;
  border-radius: 20px;
  background: #0d0d0d;
  border: 1px solid #242424;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

.wallet-modal-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

/* Multi-Wallet Modal - Animated Chromatic Wave Header matching Connect Wallet / .art */
.ambient-wallet-title,
.wallet-modal-header .ambient-wallet-title,
.wallet-modal-header .gradient-text {
  background: linear-gradient(
    90deg,
    #14F195 0%,
    #00F0FF 20%,
    #9945FF 40%,
    #FF007A 60%,
    #FFD700 80%,
    #14F195 100%
  ) !important;
  background-size: 200% auto !important;
  animation: solAmbientTextChromaWave 6s linear infinite !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 850 !important;
  letter-spacing: -0.015em;
  display: inline-block;
  filter: none !important;
  text-shadow: none !important;
}

.wallet-options-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.wallet-option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.85rem 1.1rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  outline: none;
}

.wallet-option-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.wallet-option-left {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.wallet-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
  overflow: hidden;
  padding: 3px;
}

.wallet-brand-logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 9px;
  display: block;
}

.wallet-option-item:hover .wallet-icon-box {
  transform: scale(1.08);
}

.phantom-box {
  background: rgba(171, 159, 242, 0.15);
  border: 1px solid rgba(171, 159, 242, 0.45);
}
.wallet-option-item:hover .phantom-box {
  box-shadow: 0 0 16px rgba(171, 159, 242, 0.45);
}

.solflare-box {
  background: rgba(255, 239, 70, 0.16);
  border: 1px solid rgba(255, 239, 70, 0.45);
}
.wallet-option-item:hover .solflare-box {
  box-shadow: 0 0 16px rgba(255, 239, 70, 0.45);
}

.trust-box {
  background: rgba(5, 0, 255, 0.15);
  border: 1px solid rgba(5, 0, 255, 0.45);
}
.wallet-option-item:hover .trust-box {
  box-shadow: 0 0 16px rgba(5, 0, 255, 0.45);
}

.backpack-box {
  background: rgba(227, 62, 56, 0.15);
  border: 1px solid rgba(227, 62, 56, 0.45);
}
.wallet-option-item:hover .backpack-box {
  box-shadow: 0 0 16px rgba(227, 62, 56, 0.45);
}

.standard-box {
  background: rgba(20, 241, 149, 0.14);
  border: 1px solid rgba(20, 241, 149, 0.45);
}
.wallet-option-item:hover .standard-box {
  box-shadow: 0 0 16px rgba(20, 241, 149, 0.45);
}

.wallet-option-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.wallet-option-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wallet-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.96rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wallet-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.62rem;
  padding: 0.12rem 0.42rem;
  border-radius: 9999px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  line-height: 1;
}

.wallet-detected-pill {
  background: rgba(20, 241, 149, 0.14);
  border: 1px solid rgba(20, 241, 149, 0.4);
  color: #14F195;
  box-shadow: 0 0 8px rgba(20, 241, 149, 0.2);
}

.wallet-install-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
  font-weight: 500;
}

.wallet-option-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

.wallet-arrow {
  color: rgba(255, 255, 255, 0.35);
  font-size: 1.15rem;
  transition: transform 0.2s ease, color 0.2s ease;
}

.wallet-option-item:hover .wallet-arrow {
  color: var(--sol-cyan);
  transform: translateX(4px);
}

.wallet-modal-footer-box {
  margin-top: 1.4rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.wallet-divider-text {
  text-align: center;
  margin-bottom: 0.75rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.wallet-demo-chips {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: center;
}

.wallet-demo-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 0.35rem 0.65rem;
  font-size: 0.74rem;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all 0.2s ease;
}

.wallet-demo-chip:hover {
  border-color: var(--sol-green);
  color: #ffffff;
  background: rgba(20, 241, 149, 0.1);
  transform: translateY(-1px);
}

.wallet-explore-desc {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.48);
  text-align: center;
  line-height: 1.45;
  margin: 0.85rem auto 0.85rem auto;
  max-width: 420px;
}

.wallet-modal-docs-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.65rem;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.09);
  margin-top: 0.5rem;
}

.wallet-modal-docs-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--sol-cyan);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.wallet-modal-docs-link:hover {
  color: #ffffff;
  text-decoration: underline;
  transform: translateY(-1px);
}

.wallet-modal-docs-link.security-link {
  color: #FF6B8B;
}

.wallet-modal-docs-link.security-link:hover {
  color: #FF1E56;
}

.wallet-modal-docs-sep {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.2);
}

/* Lightbox Exhibition Split */
.exhibition-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  min-height: 550px;
}

@media (max-width: 900px) {
  .exhibition-split {
    grid-template-columns: 1fr;
  }
}

.exhibition-viewport {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  user-select: none;
}

.exhibition-viewport img, .exhibition-viewport video {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.exhibition-viewport img.zoomable {
  cursor: zoom-in;
}

.exhibition-viewport img.zoomable.zoomed-2x {
  transform: scale(2);
  cursor: grab;
}

.exhibition-viewport img.zoomable.zoomed-3x {
  transform: scale(3);
  cursor: grab;
}

.exhibition-viewport img.zoomable.dragging {
  cursor: grabbing;
}

.zoom-toolbar {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(10, 10, 16, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glass-hover);
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-full);
  z-index: 20;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
}

.zoom-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.zoom-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.12);
}

.zoom-btn.active {
  background: #ffffff;
  color: #000000;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

.interacted-addrs-box {
  max-height: 100px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.4rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
}

.interacted-tag {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  background: rgba(255, 255, 255, 0.05);
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  color: var(--sol-cyan);
  text-decoration: none;
  transition: var(--transition-smooth);
}

.interacted-tag:hover {
  background: rgba(0, 240, 255, 0.2);
}

.exhibition-viewport iframe {
  width: 100%;
  height: 500px;
  border: none;
  border-radius: var(--radius-sm);
  background: #000;
}

.exhibition-info {
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.provenance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.provenance-table th, .provenance-table td {
  padding: 0.6rem 0.4rem;
  border-bottom: 1px solid var(--border-glass);
}

.provenance-table th {
  color: var(--text-muted);
  text-align: left;
  font-weight: 500;
  width: 32%;
}

.provenance-table td {
  color: var(--text-secondary);
  word-break: break-all;
}

/* Minting Form */
.mint-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 768px) {
  .mint-form-grid {
    grid-template-columns: 1fr;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-group label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Creator Studio Modal & Upload Dropzone */
#mint-modal.modal-overlay {
  background: rgba(0, 0, 0, 0.9) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

.creator-studio-container {
  background: #000000 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

/* Luxury Dark Input Fields in Creator Studio - No stark white boxes */
.creator-studio-container .input-field,
.creator-studio-container input[type="text"],
.creator-studio-container input[type="number"],
.creator-studio-container textarea,
.creator-studio-container select,
.creator-studio-container .textarea-field,
.creator-studio-container .select-field {
  background: #0a0b12 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
  color: #f8fafc !important;
  font-family: var(--font-body) !important;
  font-size: 0.92rem !important;
  padding: 0.85rem 1.1rem !important;
  width: 100% !important;
  outline: none !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.65) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

.creator-studio-container .input-field::placeholder,
.creator-studio-container textarea::placeholder,
.creator-studio-container input::placeholder {
  color: rgba(255, 255, 255, 0.32) !important;
}

.creator-studio-container .input-field:focus,
.creator-studio-container input[type="text"]:focus,
.creator-studio-container input[type="number"]:focus,
.creator-studio-container textarea:focus,
.creator-studio-container select:focus {
  background: #0e0f1a !important;
  border-color: #14F195 !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.65), 0 0 16px rgba(20, 241, 149, 0.3) !important;
}

.creator-studio-container select option {
  background: #0a0b12 !important;
  color: #ffffff !important;
  padding: 0.5rem !important;
}

#mint-custom-tag {
  background: #0a0b12 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}

#btn-add-tag {
  background: #141524 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #e2e8f0 !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#btn-add-tag:hover {
  background: #1d1e34 !important;
  border-color: #14F195 !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(20, 241, 149, 0.3) !important;
}

.mint-dropzone {
  border: 2px dashed rgba(20, 241, 149, 0.4) !important;
  border-radius: var(--radius-md) !important;
  padding: 1.5rem 1.25rem !important;
  text-align: center !important;
  background: #05060b !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  outline: none !important;
}

.mint-dropzone:hover, .mint-dropzone.drag-over {
  border-color: var(--sol-green) !important;
  background: #090a12 !important;
  box-shadow: 0 0 25px rgba(20, 241, 149, 0.2) !important;
  transform: translateY(-1px) !important;
}

.dropzone-icon-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #121212;
  border: 1px solid #222222;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem auto;
  color: var(--sol-purple);
  transition: var(--transition-smooth);
}

.mint-dropzone:hover .dropzone-icon-ring {
  background: rgba(20, 241, 149, 0.15);
  border-color: var(--sol-green);
  color: var(--sol-green);
  box-shadow: 0 0 15px rgba(20, 241, 149, 0.3);
}

.dropzone-title {
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.dropzone-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.format-badges-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
}

.format-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  padding: 0.25rem 0.65rem;
  font-size: 0.7rem;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  transition: border-color 0.2s ease;
}

.format-chip:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

.chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.format-image .chip-dot { background: var(--sol-cyan); box-shadow: 0 0 6px var(--sol-cyan); }
.format-video .chip-dot { background: var(--sol-green); box-shadow: 0 0 6px var(--sol-green); }
.format-audio .chip-dot { background: var(--sol-gold); box-shadow: 0 0 6px var(--sol-gold); }
.format-3d .chip-dot { background: var(--sol-purple); box-shadow: 0 0 6px var(--sol-purple); }
.format-code .chip-dot { background: #FF5C93; box-shadow: 0 0 6px #FF5C93; }

/* Upload Progress Meter (%) */
.upload-meter-wrap {
  background: #111111;
  border: 1px solid #242424;
  border-radius: var(--radius-md);
  padding: 0.85rem 1.15rem;
  margin-top: 0.75rem;
  animation: fadeIn 0.3s ease;
}

.meter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  margin-bottom: 0.5rem;
}

.meter-status-text {
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.meter-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--sol-cyan);
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.8s linear infinite;
}

.meter-pct {
  font-weight: 700;
  color: var(--sol-green);
  font-size: 0.88rem;
}

.progress-bar-track {
  width: 100%;
  height: 7px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sol-purple) 0%, var(--sol-green) 50%, var(--sol-cyan) 100%);
  border-radius: var(--radius-full);
  transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 10px rgba(20, 241, 149, 0.4);
}

/* Media Preview Card */
.mint-media-preview {
  border: 1px solid #242424;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #0a0a0a;
  margin-top: 0.75rem;
  animation: fadeIn 0.3s ease;
}

.preview-display-box {
  max-height: 240px;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #040407;
  overflow: hidden;
  position: relative;
}

.preview-display-box img {
  max-width: 100%;
  max-height: 240px;
  object-fit: contain;
}

.preview-display-box video {
  max-width: 100%;
  max-height: 240px;
}

.preview-meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 1rem;
  background: rgba(14, 14, 22, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.preview-info {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  overflow: hidden;
}

.preview-filename {
  font-size: 0.78rem;
  color: var(--text-primary);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-details {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.preview-ipfs-badge {
  font-size: 0.68rem;
  color: var(--sol-cyan);
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.2);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}

.btn-remove-preview {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 0.3rem 0.65rem;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-remove-preview:hover {
  background: rgba(255, 69, 96, 0.12);
  border-color: #FF4560;
  color: #FF4560;
}

/* Tag Chips */
.tag-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.tag-chip {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.7rem;
  font-size: 0.76rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tag-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--text-primary);
}

.tag-chip.selected {
  background: rgba(20, 241, 149, 0.15) !important;
  border-color: var(--sol-green) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(20, 241, 149, 0.35) !important;
}

.selected-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.selected-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(20, 241, 149, 0.1);
  border: 1px solid rgba(20, 241, 149, 0.25);
  color: var(--sol-green);
  font-size: 0.74rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
}

.selected-tag-pill .remove-tag {
  cursor: pointer;
  opacity: 0.7;
  font-size: 0.7rem;
}

.selected-tag-pill .remove-tag:hover {
  opacity: 1;
}

/* Royalty Slider */
.royalty-badge {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--sol-green);
  background: rgba(20, 241, 149, 0.1);
  border: 1px solid rgba(20, 241, 149, 0.2);
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
}

.royalty-slider-wrap {
  padding: 0.2rem 0;
}

.styled-range-slider {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  outline: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.styled-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #141414;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.styled-range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* All-Inclusive Calculated Pricing Card (DO NOT DISCLOSE ITEMIZED FEES) */
.all-inclusive-price-card {
  background: #111111;
  border: 1px solid #242424;
  border-radius: var(--radius-md);
  padding: 1.15rem 1.35rem;
  margin: 1.25rem 0 0.5rem 0;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
}

.price-card-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
}

@media (max-width: 600px) {
  .price-card-main {
    flex-direction: column;
    align-items: flex-start;
  }
}

.price-card-left {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.price-sparkle-icon {
  color: var(--sol-gold);
  font-size: 1.3rem;
  margin-top: 0.1rem;
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
}

.price-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-primary);
}

.price-desc {
  font-size: 0.77rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
  line-height: 1.4;
}

.price-card-right {
  text-align: right;
  flex-shrink: 0;
}

.price-sol-value {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--sol-green);
  text-shadow: 0 0 18px rgba(20, 241, 149, 0.45);
}

.price-usd-value {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* Dynamic Mint Action Button with Ambient Lighting */
.btn-dynamic-mint,
#btn-submit-mint.btn-dynamic-mint {
  position: relative !important;
  width: 100% !important;
  padding: 1.15rem 1.85rem !important;
  margin-top: 0.75rem !important;
  border-radius: 12px !important;
  border: 1.5px solid transparent !important;
  background-image: 
    linear-gradient(#050508, #050508),
    linear-gradient(
      90deg,
      #4285F4 0%,
      #9945FF 14.28%,
      #00F0FF 28.57%,
      #14F195 42.85%,
      #FBBF24 57.14%,
      #FF5E62 71.42%,
      #FF4081 85.71%,
      #4285F4 100%,
      #9945FF 114.28%,
      #00F0FF 128.57%,
      #14F195 142.85%,
      #FBBF24 157.14%,
      #FF5E62 171.42%,
      #FF4081 185.71%,
      #4285F4 200%
    ) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  background-size: auto, 200% auto !important;
  animation: solAmbientTextChromaWave 7s linear infinite !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 30px rgba(0, 0, 0, 0.75) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}

.btn-dynamic-mint:hover,
#btn-submit-mint.btn-dynamic-mint:hover {
  transform: translateY(-2px) !important;
  background-image: 
    linear-gradient(#0c0d15, #0c0d15),
    linear-gradient(
      90deg,
      #4285F4 0%,
      #9945FF 14.28%,
      #00F0FF 28.57%,
      #14F195 42.85%,
      #FBBF24 57.14%,
      #FF5E62 71.42%,
      #FF4081 85.71%,
      #4285F4 100%,
      #9945FF 114.28%,
      #00F0FF 128.57%,
      #14F195 142.85%,
      #FBBF24 157.14%,
      #FF5E62 171.42%,
      #FF4081 185.71%,
      #4285F4 200%
    ) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 35px rgba(0, 0, 0, 0.9), 0 0 25px rgba(20, 241, 149, 0.35) !important;
}

.btn-dynamic-mint:active,
#btn-submit-mint.btn-dynamic-mint:active {
  transform: translateY(0) !important;
}

.btn-dynamic-mint .btn-mint-text,
#btn-submit-mint.btn-dynamic-mint .btn-mint-text {
  background-image: linear-gradient(
    90deg,
    #4285F4 0%,
    #9945FF 14.28%,
    #00F0FF 28.57%,
    #14F195 42.85%,
    #FBBF24 57.14%,
    #FF5E62 71.42%,
    #FF4081 85.71%,
    #4285F4 100%,
    #9945FF 114.28%,
    #00F0FF 128.57%,
    #14F195 142.85%,
    #FBBF24 157.14%,
    #FF5E62 171.42%,
    #FF4081 185.71%,
    #4285F4 200%
  ) !important;
  background-size: 200% auto !important;
  animation: solAmbientTextChromaWave 7s linear infinite !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 1.08rem !important;
  letter-spacing: 0.025em !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

.btn-dynamic-mint .btn-mint-icon,
#btn-submit-mint.btn-dynamic-mint .btn-mint-icon {
  font-size: 1.15rem !important;
  filter: drop-shadow(0 0 8px rgba(20, 241, 149, 0.6)) !important;
}

.btn-dynamic-mint.btn-connected-pay {
  background-image: 
    linear-gradient(#050508, #050508),
    linear-gradient(
      90deg,
      #14F195 0%,
      #00F0FF 50%,
      #14F195 100%
    ) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 30px rgba(20, 241, 149, 0.4) !important;
}

.btn-dynamic-mint.btn-connected-pay:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 45px rgba(20, 241, 149, 0.7) !important;
}

.required-star {
  color: #FF4560;
  font-weight: bold;
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
}

.toast {
  background: rgba(18, 18, 28, 0.95);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.25rem;
  color: var(--text-primary);
  font-size: 0.85rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  animation: slideIn 0.3s ease;
}

.toast.success { border-color: var(--sol-green); }
.toast.error { border-color: #FF4560; }
.toast.info { border-color: var(--sol-purple); }

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Footer */
footer {
  border-top: 1px solid var(--border-glass);
  padding: 2.5rem 2rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* ==========================================================================
   DECENTRALIZED 1/1 MINTING STUDIO SPOTLIGHT DECK
   ========================================================================== */

.minting-spotlight-deck {
  background: #0e0e0e;
  border: 1px solid #222222;
  border-radius: var(--radius-lg);
  padding: 2rem 2.5rem;
  margin-bottom: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
}

.minting-spotlight-deck::before {
  display: none;
}

.spotlight-content {
  flex: 1;
  max-width: 680px;
  position: relative;
  z-index: 1;
}

.spotlight-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(20, 241, 149, 0.12);
  border: 1px solid rgba(20, 241, 149, 0.35);
  color: var(--sol-green);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  margin-bottom: 0.75rem;
}

.spotlight-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.5rem;
  letter-spacing: -0.5px;
}

.spotlight-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.spotlight-features {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.feature-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  color: #e5e7eb;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.spotlight-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  position: relative;
  z-index: 1;
}

.btn-large {
  padding: 0.9rem 2rem;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.spotlight-subtext {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}

@media (max-width: 860px) {
  .minting-spotlight-deck {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
  }
  .spotlight-action {
    width: 100%;
    align-items: stretch;
  }
  .btn-large {
    width: 100%;
    text-align: center;
  }
}

/* ==========================================================================
   AI AGENTS ART JUDGES PANEL & DESIGN AWARDS SHOWCASE
   ========================================================================== */

.ai-judges-section {
  background: #090a0d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-bottom: 2.5rem;
  position: relative;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
}

.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

.section-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0.4rem 0 0.3rem 0;
}

.section-subtitle {
  font-size: 0.88rem;
  color: var(--text-secondary);
  max-width: 650px;
  line-height: 1.5;
}

.awards-badge-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.design-award-badge {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.design-award-badge.gold {
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.35);
  color: #facc15;
}

.design-award-badge.purple {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #c084fc;
}

.design-award-badge.cyan {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}

/* 4 Judges Cards Grid */
.ai-judges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.judge-card {
  background: #111318;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: var(--transition-smooth);
}

.judge-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

.judge-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 0.9rem;
}

.judge-icon-wrap.bg-purple { background: rgba(168, 85, 247, 0.15); border: 1px solid rgba(168, 85, 247, 0.3); }
.judge-icon-wrap.bg-cyan   { background: rgba(56, 189, 248, 0.15);  border: 1px solid rgba(56, 189, 248, 0.3); }
.judge-icon-wrap.bg-green  { background: rgba(20, 241, 149, 0.15);  border: 1px solid rgba(20, 241, 149, 0.3); }
.judge-icon-wrap.bg-yellow { background: rgba(234, 179, 8, 0.15);   border: 1px solid rgba(234, 179, 8, 0.3); }

.judge-info {
  flex: 1;
}

.judge-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.2rem;
}

.judge-role {
  font-size: 0.74rem;
  color: var(--sol-cyan);
  font-weight: 600;
  display: block;
  margin-bottom: 0.55rem;
}

.judge-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.judge-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.metric-label { color: var(--text-muted); }
.metric-val { color: var(--sol-green); font-weight: 700; }

/* ==========================================================================
   NFT DESIGN AWARDS • 33 AI ART CRITIC AGENTS & EVALUATION STYLES
   ========================================================================== */

#ai-judge-modal .modal-container {
  max-width: 1060px;
  background: #0d0d0d;
  border: 1px solid #242424;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.98);
  padding: 2.2rem;
  max-height: 92vh;
  overflow-y: auto;
}

.judge-modal-grid {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 2.2rem;
  align-items: start;
}

@media (max-width: 860px) {
  .judge-modal-grid {
    grid-template-columns: 1fr;
  }
}

.judge-preview-box {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #040407;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85);
  position: sticky;
  top: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.judge-preview-img {
  width: 100%;
  height: 310px;
  object-fit: cover;
  display: block;
  background: #020204;
}

.judge-preview-meta {
  padding: 1.1rem;
  background: #06060a;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.judge-eval-header {
  margin-bottom: 1.25rem;
}

.judge-score-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  background: rgba(20, 241, 149, 0.12);
  border: 1px solid rgba(20, 241, 149, 0.45);
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-full);
}

.judge-score-badge.gold {
  background: rgba(255, 215, 0, 0.15);
  border-color: rgba(255, 215, 0, 0.5);
}

.judge-score-num {
  font-family: var(--font-mono);
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--sol-green);
}

.judge-score-badge.gold .judge-score-num {
  color: #facc15;
}

.judge-score-max {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* NFT Design Awards Formula Bar */
.jury-formula-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-sm);
  padding: 0.65rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.76rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.jury-formula-box code {
  color: var(--sol-cyan);
  font-family: var(--font-mono);
  font-weight: 600;
}

/* 3 Master Criteria Cards (Aesthetics, Fundamentals, Innovation) */
.core-criteria-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
  .core-criteria-grid {
    grid-template-columns: 1fr;
  }
}

.criterion-card {
  background: #09090f;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-md);
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: var(--transition-smooth);
}

.criterion-card:hover {
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.criterion-card.aesthetics { border-top: 3px solid #d946ef; }
.criterion-card.fundamentals { border-top: 3px solid #38bdf8; }
.criterion-card.innovation { border-top: 3px solid #facc15; }

.criterion-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.criterion-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.criterion-score {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 1.15rem;
}

.criterion-card.aesthetics .criterion-score { color: #d946ef; }
.criterion-card.fundamentals .criterion-score { color: #38bdf8; }
.criterion-card.innovation .criterion-score { color: #facc15; }

.criterion-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.criterion-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.fill-aesthetics { background: linear-gradient(90deg, #9945FF, #ec4899); }
.fill-fundamentals { background: linear-gradient(90deg, #0284c7, #38bdf8); }
.fill-innovation { background: linear-gradient(90deg, #d97706, #facc15); }

.criterion-desc {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* AI Art Critic Deliberation Review */
.judge-critique-box {
  background: #111111;
  border: 1px solid #222222;
  border-radius: var(--radius-md);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.5rem;
}

.judge-critique-title {
  font-size: 0.84rem;
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.judge-critique-text {
  font-size: 0.88rem;
  line-height: 1.65;
  color: #f1f3fa;
  font-style: italic;
}

/* 33-Agent Chamber Section */
.jury-chambers-section {
  background: #06060a;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-md);
  padding: 1.2rem;
  margin-bottom: 1.5rem;
}

.jury-chambers-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.jury-title {
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #fff;
}

.jury-tabs-bar {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.jury-tab-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.jury-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}

.jury-tab-btn.active {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}

.agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.65rem;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 0.4rem;
}

.agent-mini-card {
  background: #111111;
  border: 1px solid #1f1f1f;
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: var(--transition-smooth);
}

.agent-mini-card:hover {
  background: #161616;
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.agent-mini-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.agent-mini-name {
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-mini-score {
  font-family: var(--font-mono);
  font-weight: 800;
  color: var(--sol-green);
  font-size: 0.8rem;
}

.agent-mini-specialty {
  font-size: 0.67rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-mini-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 2px;
  overflow: hidden;
}

.agent-mini-fill {
  height: 100%;
  border-radius: 2px;
}

/* Card Ribbon Badges & Critique Trigger in Gallery */
.card-award-ribbon {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(5, 5, 8, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(234, 179, 8, 0.6);
  color: #facc15;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.22rem 0.6rem;
  border-radius: 12px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
}

.card-award-ribbon.nft-day {
  border-color: rgba(255, 215, 0, 0.8);
  color: #ffd700;
  background: rgba(255, 215, 0, 0.12);
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.3);
}

.card-award-ribbon.mention {
  border-color: rgba(20, 241, 149, 0.45);
  color: #14F195;
  background: #000000;
}

.card-award-ribbon.nominee {
  border-color: rgba(0, 240, 255, 0.45);
  color: #00F0FF;
  background: #000000;
}

.btn-judge-critique {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.38rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-judge-critique:hover {
  background: rgba(20, 241, 149, 0.1);
  color: #14F195;
  border-color: rgba(20, 241, 149, 0.45);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8), 0 0 10px rgba(20, 241, 149, 0.2);
  transform: translateY(-1px);
}

/* AI Discovered Artwork Badge in Gallery Grid */
.card-ai-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(20, 241, 149, 0.25);
  border: 1px solid var(--sol-green);
  color: var(--sol-green);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-full);
  z-index: 10;
  box-shadow: 0 0 10px rgba(20, 241, 149, 0.4);
  backdrop-filter: blur(8px);
}

/* ==========================================================================
   FAST SQL CATALOG FINDER STYLES
   ========================================================================== */

.sql-preset-chip {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  padding: 0.35rem 0.75rem;
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: var(--transition-smooth);
  white-space: nowrap;
}

.sql-preset-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.sql-preset-chip.active {
  background: rgba(20, 241, 149, 0.15);
  border-color: var(--sol-green);
  color: var(--sol-green);
  box-shadow: 0 0 10px rgba(20, 241, 149, 0.2);
}

.sql-results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.sql-results-table th {
  text-align: left;
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: sticky;
  top: 0;
  background: #06060c;
  z-index: 2;
}

.sql-results-table td {
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #d0d4f0;
}

.sql-results-table tr:hover td {
  background: rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   LIVE REAL-TIME COUNTER & 24/7 AI AGENT GLOW ANIMATIONS
   ========================================================================== */

.live-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #14F195;
  box-shadow: 0 0 8px rgba(20, 241, 149, 0.8);
  margin-right: 5px;
  vertical-align: middle;
  animation: pulseGreenLive 1.8s infinite ease-in-out;
}

.live-status-dot.purple {
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
  animation: pulsePurpleLive 1.8s infinite ease-in-out;
}

@keyframes pulseGreenLive {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 8px rgba(20, 241, 149, 0.85);
  }
  50% {
    transform: scale(0.8);
    opacity: 0.4;
    box-shadow: 0 0 2px rgba(20, 241, 149, 0.25);
  }
}

@keyframes pulsePurpleLive {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.85);
  }
  50% {
    transform: scale(0.8);
    opacity: 0.4;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.25);
  }
}

.live-counter-inline {
  display: inline-flex;
  align-items: baseline;
  background: rgba(255, 255, 255, 0.04);
  padding: 0.08rem 0.38rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

@keyframes liveNumPop {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  35% {
    transform: scale(1.14);
    filter: brightness(1.6) drop-shadow(0 0 10px rgba(20, 241, 149, 0.9));
    color: #14F195 !important;
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

.live-num-increment {
  display: inline-block;
  animation: liveNumPop 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ==========================================================================
   v4 VERIFIED EVIDENCE MODAL & FORENSIC TABLES
   ========================================================================== */

#v4-evidence-modal .modal-container {
  max-width: 1120px;
  background: #0d0d0d;
  border: 1px solid #242424;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.95);
}

#v4-evidence-table-container table tr:hover {
  background: rgba(20, 241, 149, 0.05) !important;
}

#v4-evidence-table-container th {
  position: sticky;
  top: 0;
  background: #0d0d18;
  z-index: 5;
  border-bottom: 2px solid rgba(20, 241, 149, 0.3);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--sol-cyan);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.log-hl-mint {
  color: var(--sol-cyan);
  font-weight: 600;
}

/* ==========================================================================
   SOLANA ECOSYSTEM BRANDING, FOOTER & NFT CARD PILLS
   ========================================================================== */

/* Solana Verified Card Pill */
.card-chain-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #14F195;
  background: rgba(20, 241, 149, 0.08);
  border: 1px solid rgba(20, 241, 149, 0.25);
  border-radius: var(--radius-full);
  padding: 0.12rem 0.55rem;
}

.card-provenance-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.70rem;
  font-weight: 600;
  color: var(--sol-cyan);
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: var(--radius-full);
  padding: 0.12rem 0.55rem;
}

.card-sol-icon {
  width: 12px;
  height: 10px;
  display: inline-block;
  vertical-align: middle;
}

.badge-sol-mini {
  width: 11px;
  height: 10px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 3px;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));
}

/* Luxury Solana Ecosystem Footer */
.sanctuary-footer {
  margin-top: 5rem;
  border-top: 1px solid #1c1c1c;
  background: #000000;
  padding: 3.5rem 2rem 2.5rem;
  position: relative;
  overflow: hidden;
}

.sanctuary-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.footer-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.5rem;
}

.footer-container.footer-centered {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.footer-logo-center-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.25rem;
}

.footer-logo-center-wrap .footer-brand-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-logo-center-wrap .footer-brand-logo-link:hover {
  transform: scale(1.04);
}

.footer-logo-center-wrap .brand-logo-text-wrap {
  font-size: 2.2rem;
  margin-left: 0px;
}

.footer-hiring-center-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.35rem 0;
}

.footer-docs-center-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.2rem 0;
}

.footer-links-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  font-size: 0.80rem;
  text-align: center;
  margin: 0.5rem 0;
}

.footer-link,
.footer-info {
  background: linear-gradient(
    90deg,
    #14F195 0%,
    #00F0FF 20%,
    #9945FF 40%,
    #FF007A 60%,
    #FFD700 80%,
    #14F195 100%
  ) !important;
  background-size: 200% auto !important;
  animation: solAmbientTextChromaWave 6s linear infinite !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-decoration: none !important;
  font-weight: 750 !important;
  letter-spacing: 0.02em !important;
  transition: transform 0.2s ease, filter 0.2s ease !important;
  display: inline-block !important;
}

.footer-link:hover {
  transform: translateY(-1.5px) scale(1.05) !important;
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.8)) drop-shadow(0 0 14px rgba(20, 241, 149, 0.6)) !important;
  text-decoration: none !important;
}

.footer-dot {
  color: rgba(255, 255, 255, 0.35);
  display: inline-block;
  vertical-align: middle;
}

.footer-copyright-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  font-size: 0.74rem;
  color: var(--text-muted);
  text-align: center;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  width: 100%;
}

.footer-sol-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, color 0.2s ease, filter 0.2s ease;
}

a.footer-sol-status:hover {
  color: #14F195 !important;
  transform: translateY(-1.5px) scale(1.03);
  filter: drop-shadow(0 0 8px rgba(20, 241, 149, 0.7));
  text-decoration: none;
}

.footer-mini-mark {
  width: 14px;
  height: 12px;
  display: inline-block;
  vertical-align: middle;
}

/* ==========================================================================
   MULTI-WALLET MODAL & WEB3 CONNECTION STYLES
   ========================================================================== */

.btn-wallet-modern.connected {
  border-color: rgba(20, 241, 149, 0.6);
  background: rgba(20, 241, 149, 0.14);
  color: #14F195;
  box-shadow: 0 0 16px rgba(20, 241, 149, 0.3);
}

.wallet-modal-container {
  max-width: 520px;
  width: 95%;
}

.wallet-options-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.25rem 0 0.5rem 0;
}

.wallet-option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 0.85rem 1.15rem;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  text-align: left;
}

.wallet-option-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.wallet-option-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.wallet-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.wallet-option-item:hover .wallet-icon-box {
  transform: scale(1.06);
}

.phantom-box {
  background: rgba(171, 159, 242, 0.15);
  border: 1px solid rgba(171, 159, 242, 0.45);
}

.solflare-box {
  background: rgba(255, 239, 70, 0.16);
  border: 1px solid rgba(255, 239, 70, 0.45);
}

.trust-box {
  background: rgba(5, 0, 255, 0.15);
  border: 1px solid rgba(5, 0, 255, 0.45);
}

.backpack-box {
  background: rgba(227, 62, 56, 0.15);
  border: 1px solid rgba(227, 62, 56, 0.45);
}

.standard-box {
  background: rgba(20, 241, 149, 0.14);
  border: 1px solid rgba(20, 241, 149, 0.45);
}

.wallet-option-info {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

.wallet-option-title-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.wallet-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.01em;
}


.wallet-option-desc {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.wallet-arrow {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.35);
  transition: all 0.2s ease;
}

.wallet-option-item:hover .wallet-arrow {
  color: var(--sol-cyan);
  transform: translateX(4px);
}

.wallet-modal-footer-box {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  margin-top: 1.25rem;
  padding-top: 1.1rem;
}

.wallet-divider-text {
  text-align: center;
  font-size: 0.68rem;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
}

.wallet-demo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.wallet-demo-chip {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-full);
  padding: 0.35rem 0.8rem;
  font-size: 0.74rem;
  font-family: var(--font-mono);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.2s ease;
}

.wallet-demo-chip:hover {
  border-color: var(--sol-cyan);
  background: rgba(0, 240, 255, 0.12);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(0, 240, 255, 0.2);
}

/* ==========================================================================
   SOLANA ULTRA-HD CINEMA VIDEO PLAYER (WEBGL2 REAL-TIME CAS & DEBLOCK)
   ========================================================================== */

.sol-player-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;
  max-height: 75vh;
  background: #000000;
  overflow: hidden;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.95), 0 10px 40px rgba(0, 0, 0, 0.8);
}

.sol-player-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  cursor: pointer;
}

.sol-player-canvas {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.9);
  transition: width 0.25s ease, height 0.25s ease;
}

.sol-player-canvas.stretch-mode {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: fill !important;
}

.sol-player-canvas.contain-mode {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
}

/* Fallback / Native video element */
.sol-player-native-video {
  display: none;
}
.sol-player-container.source-mode .sol-player-native-video {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
}
.sol-player-container.source-mode .sol-player-canvas {
  display: none;
}

/* Upper Left: Attached Solana Logo & SolanaNFT.art Lockup */
.sol-player-brand {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 35;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 6px 14px 6px 10px;
  border-radius: 9999px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9);
  transition: opacity 0.35s ease, transform 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
  cursor: pointer;
}

.sol-player-brand:hover {
  transform: translateY(-1px) scale(1.02);
  border-color: var(--sol-cyan);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.9), 0 0 25px rgba(0, 240, 255, 0.35);
}

.sol-player-brand-icon {
  width: 22px;
  height: 19px;
  display: block;
  filter: drop-shadow(0 0 8px rgba(20, 241, 149, 0.5));
}

.sol-player-brand-text {
  font-family: 'Syne', sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
  display: flex;
  align-items: center;
}

.sol-player-brand-text .brand-art {
  background: linear-gradient(135deg, #14F195 0%, #00F0FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: 1px;
}

.sol-player-brand.brand-hidden {
  opacity: 0 !important;
  display: none !important;
  pointer-events: none !important;
  transform: translateY(-8px);
}

/* Upper Right HUD & Menu Trigger */
.sol-player-top-right {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity 0.35s ease;
}

.sol-player-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(8, 8, 14, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(20, 241, 149, 0.4);
  color: #14F195;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  border-radius: 9999px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6), 0 0 15px rgba(20, 241, 149, 0.2);
  text-transform: uppercase;
}

.sol-player-badge .badge-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #14F195;
  box-shadow: 0 0 10px #14F195;
  animation: pulseGlow 1.8s infinite;
}

.sol-player-menu-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(14, 14, 24, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
}

.sol-player-menu-btn:hover,
.sol-player-menu-btn.active {
  background: #222222;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
  transform: scale(1.08);
}

/* Three-Dotted Dropdown Menu */
.sol-player-dropdown {
  position: absolute;
  top: 60px;
  right: 16px;
  z-index: 50;
  width: 340px;
  max-width: calc(100vw - 32px);
  max-height: calc(100% - 80px);
  overflow-y: auto;
  background: #0d0d0d;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid #242424;
  border-radius: 16px;
  padding: 1.1rem;
  display: none;
  flex-direction: column;
  gap: 1.1rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95);
  animation: dropdownFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sol-player-dropdown.open {
  display: flex;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Top: Website Link */
.sol-menu-header-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #141414;
  border: 1px solid #222222;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.sol-menu-header-link:hover {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
  transform: translateY(-1px);
}

.sol-menu-brand-lockup {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sol-menu-brand-title {
  font-family: 'Syne', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
}

.sol-menu-brand-badge {
  font-size: 0.65rem;
  color: var(--sol-cyan);
  font-family: var(--font-mono);
  font-weight: 700;
}

/* Menu Section Divider & Title */
.sol-menu-section-title {
  font-size: 0.66rem;
  font-family: var(--font-mono);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.45rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Artist Credentials Box */
.sol-menu-cred-box {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.78rem;
}

.sol-cred-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.sol-cred-label {
  color: var(--text-muted);
  font-size: 0.72rem;
}

.sol-cred-value {
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 4px;
}

.sol-cred-copy-btn {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 4px;
  color: var(--sol-cyan);
  font-size: 0.65rem;
  padding: 2px 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sol-cred-copy-btn:hover {
  background: var(--sol-purple);
  color: #ffffff;
}

.sol-listing-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(20, 241, 149, 0.14);
  border: 1px solid rgba(20, 241, 149, 0.35);
  color: #14F195;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.sol-listing-pill:hover {
  background: rgba(20, 241, 149, 0.25);
  box-shadow: 0 0 10px rgba(20, 241, 149, 0.35);
}

/* Sizing & Expand Options */
.sol-menu-btn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.sol-menu-action-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.sol-menu-action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.sol-menu-action-btn.active {
  background: #242424;
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
  box-shadow: none;
}

.sol-menu-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.55rem 0.8rem;
  font-size: 0.75rem;
  color: #ffffff;
}

/* Custom Switch */
.sol-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}
.sol-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.sol-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.2);
  transition: 0.25s;
  border-radius: 20px;
}
.sol-switch-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.25s;
  border-radius: 50%;
}
.sol-switch input:checked + .sol-switch-slider {
  background-color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}
.sol-switch input:checked + .sol-switch-slider:before {
  transform: translateX(16px);
  background-color: #14F195;
}

/* Upscale Mode Selector Options */
.sol-upscale-options {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.sol-upscale-option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.55rem 0.8rem;
  font-size: 0.75rem;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sol-upscale-option-item:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.25);
}

.sol-upscale-option-item.active {
  background: #242424;
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: none;
}

.sol-upscale-option-item.active .sol-upscale-name {
  color: #14F195;
  font-weight: 700;
}

/* Transport Controls Bar */
.sol-player-controls {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 35;
  background: rgba(8, 8, 14, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 8px 14px 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85);
  transition: opacity 0.35s ease;
}

/* Seek Bar */
.sol-player-seek-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.sol-player-seek {
  width: 100%;
  height: 5px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  transition: height 0.15s ease;
}

.sol-player-seek:hover {
  height: 7px;
}

.sol-player-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #14F195;
  box-shadow: 0 0 10px #14F195;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.sol-player-seek:hover::-webkit-slider-thumb {
  transform: scale(1.3);
}

/* Control Buttons Row */
.sol-player-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sol-player-left-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sol-btn-play {
  background: none;
  border: none;
  color: #14F195;
  font-size: 1.15rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  transition: transform 0.15s ease, color 0.15s ease;
}

.sol-btn-play:hover {
  color: #ffffff;
  transform: scale(1.15);
}

.sol-player-time {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.05em;
}

.sol-player-right-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sol-btn-control {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.sol-btn-control:hover {
  color: var(--sol-cyan);
  transform: scale(1.1);
}

/* Idle Fade-Out */
.sol-player-container.hud-idle .sol-player-brand,
.sol-player-container.hud-idle .sol-player-top-right,
.sol-player-container.hud-idle .sol-player-controls {
  opacity: 0;
  pointer-events: none;
}

.sol-player-container.menu-active.hud-idle .sol-player-brand,
.sol-player-container.menu-active.hud-idle .sol-player-top-right,
.sol-player-container.menu-active.hud-idle .sol-player-controls {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ==========================================================================
   SOLANA REALTIME MINT RADAR & LIVE ON-CHAIN CRAWLER HUD
   ========================================================================== */
.solana-radar-deck {
  scroll-margin-top: 100px;
  background: #0d0d0d;
  border: 1px solid #1f1f1f;
  border-radius: var(--radius-lg);
  padding: 1.45rem 1.65rem 1.65rem;
  margin: 0.35rem 0 2rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85);
}

.radar-header {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  padding-bottom: 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.radar-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.radar-live-indicator-tag {
  display: none;
}

.radar-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.radar-pulse-beacon {
  position: relative;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.beacon-core {
  width: 9px;
  height: 9px;
  background: var(--sol-green);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--sol-green), 0 0 20px rgba(20, 241, 149, 0.6);
  position: relative;
  z-index: 2;
}

.beacon-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid var(--sol-green);
  pointer-events: none;
}

.beacon-ring.ring-1 {
  width: 18px;
  height: 18px;
  animation: beaconPulse 2s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

.beacon-ring.ring-2 {
  width: 18px;
  height: 18px;
  animation: beaconPulse 2s cubic-bezier(0.25, 1, 0.5, 1) infinite 0.7s;
}

@keyframes beaconPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0.9;
    border-color: var(--sol-green);
  }
  100% {
    transform: translate(-50%, -50%) scale(2.4);
    opacity: 0;
    border-color: var(--sol-cyan);
  }
}

.radar-title-cool {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Syne', 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.cool-prefix {
  color: #ffffff;
  letter-spacing: 0.05em;
  text-shadow: none;
}

.cool-gradient-text {
  background: linear-gradient(
    90deg,
    #14F195 0%,
    #00F0FF 16.6%,
    #9945FF 33.3%,
    #FF007A 50%,
    #FF7A00 66.6%,
    #FFD700 83.3%,
    #14F195 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: solAmbientTextChromaWave 6s linear infinite;
  filter: none;
  letter-spacing: 0.08em;
  font-weight: 850;
}

.cool-live-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  background: rgba(20, 241, 149, 0.12);
  border: 1px solid rgba(20, 241, 149, 0.4);
  color: var(--sol-green);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  letter-spacing: 0.06em;
  box-shadow: 0 0 12px rgba(20, 241, 149, 0.2);
}

.cool-live-dot {
  width: 6px;
  height: 6px;
  background: var(--sol-green);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--sol-green);
  animation: liveDotBlink 1.2s infinite;
}

@keyframes liveDotBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.75); }
}

.radar-stats-pills {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.radar-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  color: #cbd5e1;
}

.radar-pill.live {
  background: rgba(20, 241, 149, 0.12);
  border-color: rgba(20, 241, 149, 0.35);
  color: var(--sol-green);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.live-dot-mini {
  width: 6px;
  height: 6px;
  background: var(--sol-green);
  border-radius: 50%;
  animation: pulseGreen 1.2s infinite;
}

@keyframes pulseGreen {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.radar-dim {
  color: var(--text-muted);
  margin-right: 0.2rem;
}

.radar-stream-ticker {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  overflow: hidden;
  white-space: nowrap;
  padding: 0.95rem 0.25rem 0.65rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.radar-stream-ticker::-webkit-scrollbar {
  display: none;
}

.radar-stream-item {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  background: #000000 !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.55rem 1.1rem 0.55rem 0.65rem;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  user-select: none;
  min-height: 74px;
  flex-shrink: 0;
}

.radar-stream-item:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.28);
  background: #080808 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85);
}

.radar-stream-item.just-added,
.radar-stream-item.dropping-down {
  animation: nftComeDownFromAbove 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards, justMintedGlow 2.5s ease-out;
  z-index: 10;
}

.radar-stream-item.realtime-block-pop {
  animation: nftRealtimeBlockPop 0.48s cubic-bezier(0.2, 1.15, 0.4, 1) forwards, justMintedGlow 3s ease-out;
  z-index: 12;
}

.radar-stream-item.exiting {
  opacity: 0 !important;
  transform: scale(0.88) translateY(-8px) !important;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out !important;
  pointer-events: none;
}

.radar-pill-slot-pulse {
  animation: slotPulseGreen 0.75s ease-out;
}

@keyframes slotPulseGreen {
  0% {
    color: #14f195 !important;
    text-shadow: 0 0 16px #14f195, 0 0 26px #00f0ff;
    transform: scale(1.1);
  }
  100% {
    color: var(--sol-cyan) !important;
    text-shadow: none;
    transform: scale(1);
  }
}

@keyframes nftRealtimeBlockPop {
  0% {
    opacity: 0;
    transform: scale(0.68) translateY(-28px);
    box-shadow: 0 0 35px #14f195;
    border-color: #14f195;
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(2px);
    box-shadow: 0 0 28px #14f195, 0 0 45px rgba(0, 240, 255, 0.45);
    border-color: #14f195;
  }
  75% {
    transform: scale(0.98) translateY(-1px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 16px rgba(20, 241, 149, 0.35);
    border-color: rgba(20, 241, 149, 0.6);
  }
}

@keyframes nftComeDownFromAbove {
  0% {
    opacity: 0;
    transform: translateY(-40px) scale(0.9);
    box-shadow: 0 0 24px rgba(20, 241, 149, 0.6);
  }
  60% {
    opacity: 1;
    transform: translateY(3px) scale(1.02);
    box-shadow: 0 0 18px rgba(20, 241, 149, 0.4);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  }
}

@keyframes justMintedGlow {
  0% {
    border-color: #14f195;
    box-shadow: 0 0 25px rgba(20, 241, 149, 0.85);
  }
  100% {
    border-color: rgba(20, 241, 149, 0.25);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  }
}

.radar-thumb-wrap {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: radial-gradient(circle at 40% 40%, rgba(20, 241, 149, 0.22), rgba(153, 69, 255, 0.18) 65%, #0c101c 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.radar-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.radar-stream-item:hover .radar-thumb-img {
  transform: scale(1.12);
}

.radar-thumb-live-dot {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sol-green);
  box-shadow: 0 0 8px var(--sol-green);
}

.radar-item-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.radar-item-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.radar-item-tag {
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 800;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.radar-item-tag .radar-tag-text,
.radar-item-tag:not(:has(.radar-tag-text)) {
  background: linear-gradient(
    90deg,
    #14F195 0%,
    #00F0FF 16.6%,
    #9945FF 33.3%,
    #FF007A 50%,
    #FF7A00 66.6%,
    #FFD700 83.3%,
    #14F195 100%
  ) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: solAmbientTextChromaWave 6s linear infinite !important;
  font-weight: 800 !important;
  filter: none !important;
  text-shadow: none !important;
}

.radar-item-time {
  color: var(--sol-cyan);
  font-size: 0.72rem;
  font-weight: 600;
}

.radar-item-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  letter-spacing: 0.01em;
}

.radar-item-inspect-hint {
  color: var(--sol-cyan);
  font-size: 0.88rem;
  opacity: 0.75;
  transition: opacity 0.2s, transform 0.2s;
  margin-left: 0.35rem;
}

.radar-stream-item:hover .radar-item-inspect-hint {
  opacity: 1;
  transform: scale(1.2);
}

/* ==========================================================================
   NFT OF THE DAY HERO SHOWCASE (EVALUATED FROM YESTERDAY'S COHORT)
   ========================================================================== */
.nft-day-hero-section {
  margin-bottom: 2rem;
}

.nft-day-card {
  background: #0f0f0f;
  border: 1px solid #222222;
  border-radius: var(--radius-lg);
  padding: 1.8rem;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 2.2rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.85);
  position: relative;
  overflow: hidden;
}

@media (max-width: 960px) {
  .nft-day-card {
    grid-template-columns: 1fr;
    padding: 1.4rem;
    gap: 1.5rem;
  }
}

.nft-day-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.nft-day-media-col {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #040408;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 420px;
}

.nft-day-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.nft-day-media-col:hover .nft-day-media-img {
  transform: scale(1.03);
}

.nft-day-crown-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid #ffd700;
  color: #ffd700;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.nft-day-info-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nft-day-header-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.nft-day-cohort-tag {
  background: #181818;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-full);
  font-size: 0.74rem;
  font-weight: 700;
}

.nft-day-date-tag {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-family: var(--font-mono);
}

.nft-day-title {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 0.6rem;
}

.nft-day-desc {
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 1.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nft-day-rubric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.65rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 600px) {
  .nft-day-rubric-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.nft-day-rubric-card {
  background: #141414;
  border: 1px solid #222222;
  border-radius: var(--radius-sm);
  padding: 0.6rem;
  text-align: center;
}

.nft-day-rubric-card.total {
  background: rgba(255, 215, 0, 0.12);
  border-color: rgba(255, 215, 0, 0.4);
}

.rubric-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.rubric-num {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
}

.nft-day-rubric-card.total .rubric-num {
  color: #facc15;
}

.nft-day-creators-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 1.25rem;
  font-size: 0.78rem;
}

.nft-day-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ==========================================================================
   SOLANA MINT TIMELINE EPOCH SELECTOR & COHORT BANNER
   ========================================================================== */
.epoch-timeline-section {
  margin-bottom: 1.8rem;
}

.epoch-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.epoch-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.epoch-badge {
  background: rgba(20, 241, 149, 0.12);
  border: 1px solid rgba(20, 241, 149, 0.3);
  color: var(--sol-green);
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-full);
  font-size: 0.74rem;
  font-weight: 700;
}

.epoch-heading {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
}

.epoch-subtext {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.epoch-pills-bar {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.65rem;
  scrollbar-width: thin;
}

.epoch-pills-bar::-webkit-scrollbar {
  height: 5px;
}

.epoch-pills-bar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.epoch-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  padding: 0.55rem 0.95rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 125px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.epoch-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(0, 240, 255, 0.4);
  color: #fff;
  transform: translateY(-1px);
}

.epoch-pill.active {
  background: rgba(0, 240, 255, 0.12);
  border-color: var(--sol-cyan);
  color: #fff;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
}

.epoch-pill-name {
  font-size: 0.82rem;
  font-weight: 700;
}

.epoch-pill-count {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-top: 0.15rem;
}

.epoch-pill.active .epoch-pill-count {
  color: var(--sol-cyan);
}

.cohort-intel-banner {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--sol-cyan);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: 0.75rem;
}

.cohort-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}

.cohort-body {
  flex: 1;
}

.cohort-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.25rem;
}

.cohort-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.cohort-action-btn {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.82rem;
  padding: 0.5rem 1rem;
}

/* ==========================================================================
   1-MINUTE LIVE ROTATION ENGINE HUD
   ========================================================================== */
.rotation-engine-hud {
  background: #111111;
  border: 1px solid #222222;
  border-radius: var(--radius-sm);
  padding: 0.75rem 1.15rem;
  margin-bottom: 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.rotation-timer-status {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
  min-width: 260px;
}

.rotation-countdown-text {
  font-size: 0.76rem;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.rotation-separator {
  color: rgba(255, 255, 255, 0.2);
}

.badge-no-repeats {
  background: rgba(20, 241, 149, 0.15);
  border: 1px solid rgba(20, 241, 149, 0.35);
  color: var(--sol-green);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.68rem;
  font-weight: 700;
}

.rotation-progress-track {
  width: 100%;
  max-width: 440px;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.rotation-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--sol-purple), var(--sol-cyan), var(--sol-green));
  transition: width 0.1s linear;
}

.rotation-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.btn-rotation-action {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.btn-rotation-action:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--sol-cyan);
  color: var(--sol-cyan);
}

/* ==========================================================================
   TOP 100 LEADERBOARD BADGES & RANK MEDALS
   ========================================================================== */
.card-top-rank-medal {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  z-index: 5;
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.card-top-rank-medal.rank-1 {
  background: rgba(255, 215, 0, 0.9);
  color: #000;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}

.card-top-rank-medal.rank-2 {
  background: rgba(226, 232, 240, 0.9);
  color: #000;
  box-shadow: 0 0 12px rgba(226, 232, 240, 0.5);
}

.card-top-rank-medal.rank-3 {
  background: rgba(205, 127, 50, 0.9);
  color: #fff;
  box-shadow: 0 0 12px rgba(205, 127, 50, 0.5);
}

.card-top-rank-medal.rank-top10 {
  background: #242424;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.card-top-rank-medal.rank-standard {
  background: #181818;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.card-rubric-pills {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.45rem;
  font-size: 0.68rem;
  font-family: var(--font-mono);
}

.card-rubric-score-badge {
  background: rgba(20, 241, 149, 0.12);
  border: 1px solid rgba(20, 241, 149, 0.35);
  color: var(--sol-green);
  padding: 0.12rem 0.45rem;
  border-radius: 3px;
  font-weight: 700;
}

.card-rubric-score-badge.gold {
  background: rgba(255, 215, 0, 0.15);
  border-color: rgba(255, 215, 0, 0.45);
  color: #facc15;
}

.card-mint-date-badge {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* ==========================================================================
   NFT OF THE DAY & MONTHLY COMPETITION PORTAL (AI JURY PROTOCOL)
   ========================================================================== */

.submit-art-modal-container {
  max-width: 980px !important;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2.25rem !important;
  background: radial-gradient(circle at 85% 15%, rgba(153, 69, 255, 0.15) 0%, transparent 45%), radial-gradient(circle at 15% 85%, rgba(20, 241, 149, 0.12) 0%, transparent 45%), radial-gradient(circle at 50% 50%, rgba(0, 242, 254, 0.06) 0%, transparent 60%), #080A10 !important;
  border: 1px solid rgba(20, 241, 149, 0.35) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.95), 0 0 35px rgba(20, 241, 149, 0.15), 0 0 50px rgba(153, 69, 255, 0.1) !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(20, 241, 149, 0.35) #050608;
}

.submit-art-modal-container::-webkit-scrollbar {
  width: 6px;
}
.submit-art-modal-container::-webkit-scrollbar-track {
  background: #050608;
}
.submit-art-modal-container::-webkit-scrollbar-thumb {
  background: rgba(20, 241, 149, 0.35);
  border-radius: 4px;
}
.submit-art-modal-container::-webkit-scrollbar-thumb:hover {
  background: rgba(20, 241, 149, 0.75);
}

.submit-art-header {
  margin-bottom: 1.25rem;
}

.submit-art-badge-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.5rem;
}

.badge-green-glow {
  background: rgba(20, 241, 149, 0.12) !important;
  color: #14F195 !important;
  border: 1px solid rgba(20, 241, 149, 0.4) !important;
  box-shadow: 0 0 14px rgba(20, 241, 149, 0.25);
}

.badge-gold-glow {
  background: rgba(255, 215, 0, 0.12) !important;
  color: #FFD700 !important;
  border: 1px solid rgba(255, 215, 0, 0.4) !important;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.25);
}

.badge-cyan-glow {
  background: rgba(0, 242, 254, 0.12) !important;
  color: #00F2FE !important;
  border: 1px solid rgba(0, 242, 254, 0.4) !important;
  box-shadow: 0 0 14px rgba(0, 242, 254, 0.25);
}

.submit-art-title {
  font-size: 1.85rem;
  margin-top: 0.6rem;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

.gradient-text-solana {
  background: linear-gradient(135deg, #14F195 0%, #00F2FE 40%, #9945FF 75%, #FFD700 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(20, 241, 149, 0.4));
  font-weight: 850;
}

.text-sol-gold {
  color: #FFD700;
}

.submit-art-subtitle {
  color: #94a3b8;
  font-size: 0.88rem;
  line-height: 1.55;
  margin-top: 0.45rem;
  max-width: 880px;
}

/* Modern 3-Step Flow Architecture Grid */
.competition-flow-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1.15fr;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  background: rgba(12, 15, 24, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.25rem;
  backdrop-filter: blur(14px);
}

@media (max-width: 768px) {
  .competition-flow-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .comp-flow-arrow {
    display: none;
  }
}

.comp-flow-step {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: all 0.25s;
}

.comp-flow-step.step-stage-1 {
  background: rgba(20, 241, 149, 0.05);
  border-color: rgba(20, 241, 149, 0.25);
}

.comp-flow-step.step-stage-1 .step-title {
  color: #14F195;
}

.comp-flow-step.step-stage-2 {
  background: rgba(255, 215, 0, 0.05);
  border-color: rgba(255, 215, 0, 0.25);
}

.comp-flow-step.step-stage-2 .step-title {
  color: #FFD700;
}

.comp-flow-step.step-stage-3 {
  background: rgba(153, 69, 255, 0.06);
  border-color: rgba(153, 69, 255, 0.3);
}

.comp-flow-step.step-stage-3 .step-title {
  color: #D946EF;
}

.comp-flow-step .step-num {
  font-size: 0.62rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  font-weight: 700;
}

.step-header-compact {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.step-icon-modern {
  font-size: 1.1rem;
}

.comp-flow-step .step-title {
  font-weight: 700;
  font-size: 0.82rem;
  color: #fff;
}

.comp-flow-step .step-desc {
  font-size: 0.7rem;
  color: #64748b;
  line-height: 1.3;
}

.comp-flow-arrow {
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.95rem;
  text-align: center;
}

/* Modern Segmented Pill Tabs Bar */
.comp-tabs-bar {
  display: flex;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 9999px;
  padding: 5px;
  margin: 1.25rem 0;
  width: 100%;
}

.comp-tab-btn {
  flex: 1;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9999px;
  color: #94a3b8;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 0.6rem 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.comp-tab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.comp-tab-btn.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(20, 241, 149, 0.22) 0%, rgba(153, 69, 255, 0.22) 100%);
  border-color: rgba(20, 241, 149, 0.55);
  box-shadow: 0 0 18px rgba(20, 241, 149, 0.35);
}

/* Method Selector Chips */
.submit-method-selector {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.method-chip {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  padding: 0.45rem 1.05rem;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.method-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transform: translateY(-1px);
}

.method-chip.active {
  background: linear-gradient(135deg, rgba(20, 241, 149, 0.18) 0%, rgba(0, 242, 254, 0.18) 100%);
  border-color: var(--sol-green);
  color: var(--sol-green);
  box-shadow: 0 0 16px rgba(20, 241, 149, 0.35);
}

.section-lead-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

/* Wallet NFTs Grid */
.wallet-nfts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.85rem;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  max-height: 250px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(20, 241, 149, 0.35) rgba(0, 0, 0, 0.4);
}

.wallet-nft-item-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0.65rem;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  position: relative;
  overflow: hidden;
}

.wallet-nft-item-card:hover {
  border-color: rgba(20, 241, 149, 0.55);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(20, 241, 149, 0.25);
  background: rgba(255, 255, 255, 0.06);
}

.wallet-nft-item-card.selected {
  border-color: #14F195;
  background: radial-gradient(circle at top right, rgba(20, 241, 149, 0.15) 0%, rgba(153, 69, 255, 0.1) 100%), #0D1018;
  box-shadow: 0 0 20px rgba(20, 241, 149, 0.4);
}

.wallet-nft-item-card.selected::after {
  content: '✓ SELECTED';
  position: absolute;
  top: 8px;
  right: 8px;
  background: #14F195;
  color: #000;
  font-size: 0.58rem;
  font-weight: 850;
  padding: 0.12rem 0.45rem;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
  font-family: monospace;
}

.wallet-nft-thumb {
  width: 100%;
  height: 120px;
  border-radius: 6px;
  object-fit: cover;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.wallet-nft-name {
  font-size: 0.82rem;
  font-weight: 750;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wallet-nft-mint {
  font-size: 0.68rem;
  color: var(--text-muted);
}

/* Hyper-Modern Wallet Empty Prompt */
.wallet-empty-prompt {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: radial-gradient(circle at center, rgba(20, 241, 149, 0.06) 0%, transparent 70%), rgba(8, 10, 16, 0.85);
  border: 1px dashed rgba(20, 241, 149, 0.3);
  border-radius: 14px;
}

.wallet-icon-svg-wrap {
  width: 60px;
  height: 60px;
  margin: 0 auto 0.75rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 241, 149, 0.12);
  border: 1px solid rgba(20, 241, 149, 0.35);
  border-radius: 50%;
  box-shadow: 0 0 25px rgba(20, 241, 149, 0.3);
}

.wallet-icon-svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--sol-green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Quick Chips Grid */
.quick-chips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(4, 5, 8, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  max-height: 250px;
  overflow-y: auto;
}

.quick-chip-btn {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.55rem;
  cursor: pointer;
  text-align: left;
  transition: var(--transition-fast);
}

.quick-chip-btn:hover {
  border-color: var(--sol-green);
  background: rgba(20, 241, 149, 0.08);
  transform: translateY(-2px);
}

.quick-chip-btn.selected {
  border-color: #ffd700;
  background: rgba(255, 215, 0, 0.1);
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.3);
}

.quick-chip-img {
  width: 46px;
  height: 46px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.quick-chip-meta {
  overflow: hidden;
}

.quick-chip-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-chip-score {
  font-size: 0.7rem;
  color: var(--sol-green);
  font-weight: 600;
}

/* Selected Artwork Spotlight Preview */
.selected-artwork-spotlight {
  margin-top: 1.25rem;
  background: linear-gradient(135deg, rgba(20, 241, 149, 0.06) 0%, rgba(153, 69, 255, 0.06) 100%), #0A0D15;
  border: 1px solid rgba(20, 241, 149, 0.35);
  border-radius: var(--radius-md);
  padding: 1.15rem;
  display: grid;
  grid-template-columns: 104px 1fr auto;
  gap: 1.25rem;
  align-items: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 25px rgba(20, 241, 149, 0.18);
}

@media (max-width: 640px) {
  .selected-artwork-spotlight {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.spotlight-img {
  width: 104px;
  height: 104px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #000;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.8);
}

.spotlight-info h4 {
  font-size: 1.15rem;
  color: #fff;
  margin-bottom: 0.25rem;
  font-weight: 800;
}

.spotlight-desc {
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.4;
  margin-bottom: 0.45rem;
  max-width: 540px;
}

.spotlight-meta-tags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.spotlight-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}

.spotlight-score-pill {
  text-align: right;
  padding-left: 1.25rem;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.spotlight-score-val {
  font-size: 2rem;
  font-weight: 800;
  color: #ffd700;
  line-height: 1;
}

.spotlight-score-lbl {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 0.25rem;
  letter-spacing: 0.05em;
}

/* Prompt Chips */
.prompt-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  padding: 0.28rem 0.7rem;
  border-radius: 12px;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.prompt-chip:hover {
  background: rgba(20, 241, 149, 0.12);
  border-color: var(--sol-green);
  color: var(--sol-green);
  box-shadow: 0 0 10px rgba(20, 241, 149, 0.25);
  transform: translateY(-1px);
}

/* Action Button */
.btn-deliberate-action {
  width: 100%;
  padding: 1.15rem;
  font-size: 1.05rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, #14F195 0%, #00F2FE 40%, #9945FF 80%, #FFD700 100%) !important;
  background-size: 200% 200%;
  color: #000 !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 30px rgba(20, 241, 149, 0.45), 0 0 20px rgba(0, 242, 254, 0.3) !important;
  transition: all 0.25s ease;
  cursor: pointer;
}

.btn-deliberate-action:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(20, 241, 149, 0.65), 0 0 30px rgba(153, 69, 255, 0.4) !important;
}

.btn-deliberate-action:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(1);
}

/* Deliberation Visualizer */
.comp-deliberation-visualizer {
  margin-top: 1.5rem;
  background: rgba(8, 10, 16, 0.92);
  border: 1px solid rgba(0, 242, 254, 0.4);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: 0 0 40px rgba(0, 242, 254, 0.25);
}

.deliberation-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.deliberation-spin-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.delib-tally {
  font-size: 0.85rem;
  color: var(--sol-cyan);
  font-weight: 700;
}

.delib-progress-bar-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.delib-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #14F195, #00F2FE, #9945FF, #FFD700);
  background-size: 200% 100%;
  animation: gradientShift 2s linear infinite;
  transition: width 0.3s ease-out;
}

.delib-chambers-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}

@media (max-width: 640px) {
  .delib-chambers-row {
    grid-template-columns: 1fr;
  }
}

.delib-chamber-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0.95rem;
  transition: all 0.2s;
}

#delib-chamber-1 {
  border-color: rgba(20, 241, 149, 0.35);
  background: rgba(20, 241, 149, 0.04);
}

#delib-chamber-2 {
  border-color: rgba(0, 242, 254, 0.35);
  background: rgba(0, 242, 254, 0.04);
}

#delib-chamber-3 {
  border-color: rgba(255, 215, 0, 0.35);
  background: rgba(255, 215, 0, 0.04);
}

.delib-chamber-box .chamber-badge {
  font-size: 0.62rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
  font-weight: 700;
}

.delib-chamber-box .chamber-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.35rem;
}

.delib-chamber-box .chamber-score {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--sol-cyan);
  line-height: 1;
  margin-bottom: 0.35rem;
}

#delib-chamber-1 .chamber-score {
  color: #14F195;
}

#delib-chamber-2 .chamber-score {
  color: #00F2FE;
}

#delib-chamber-3 .chamber-score {
  color: #FFD700;
}

.delib-chamber-box .chamber-lead {
  font-size: 0.72rem;
  color: #94a3b8;
  line-height: 1.35;
}

/* Live Active AI Jurors Grid */
.delib-active-jurors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.85rem;
}

.delib-juror-card {
  background: radial-gradient(circle at top left, rgba(20, 241, 149, 0.06) 0%, transparent 60%), rgba(10, 13, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.delib-juror-card:hover {
  border-color: rgba(20, 241, 149, 0.5);
  box-shadow: 0 8px 24px rgba(20, 241, 149, 0.25), 0 0 15px rgba(0, 242, 254, 0.15);
  transform: translateY(-2px);
}

.delib-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.delib-juror-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--sol-green);
  box-shadow: 0 0 12px rgba(20, 241, 149, 0.4);
  flex-shrink: 0;
}

.delib-juror-info {
  flex: 1;
  overflow: hidden;
}

.delib-card-juror-name {
  font-size: 0.92rem;
  font-weight: 850;
  color: #fff;
  letter-spacing: -0.01em;
}

.delib-card-juror-role {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--sol-green);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.delib-score-badge-neon {
  background: linear-gradient(135deg, rgba(20, 241, 149, 0.18) 0%, rgba(255, 215, 0, 0.18) 100%);
  border: 1px solid rgba(255, 215, 0, 0.6);
  padding: 0.3rem 0.65rem;
  border-radius: 8px;
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.25);
}

.delib-score-badge-neon .score-val {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 850;
  color: #FFD700;
}

.delib-score-badge-neon .score-max {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #94a3b8;
}

.delib-card-model-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.delib-card-model-row .model-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: rgba(0, 242, 254, 0.1);
  border: 1px solid rgba(0, 242, 254, 0.3);
  color: #00F2FE;
  font-weight: 600;
}

.delib-card-model-row .protocol-badge {
  font-size: 0.68rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: rgba(153, 69, 255, 0.12);
  border: 1px solid rgba(153, 69, 255, 0.3);
  color: #D946EF;
  font-weight: 600;
}

.delib-critique-pillars {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: rgba(0, 0, 0, 0.45);
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.delib-pillar-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.delib-pillar-row .pillar-label {
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.delib-pillar-row .pillar-label.love {
  color: #14F195;
}

.delib-pillar-row .pillar-label.improve {
  color: #FFD700;
}

.delib-pillar-row .pillar-label.market {
  color: #00F2FE;
}

.delib-pillar-row .pillar-text {
  font-size: 0.74rem;
  color: #cbd5e1;
  line-height: 1.35;
  padding-left: 0.35rem;
}

.delib-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.delib-sig-badge {
  font-size: 0.65rem;
  color: #64748b;
  letter-spacing: 0.02em;
}

.delib-juror-link {
  font-size: 0.72rem;
  color: #00F2FE;
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: color 0.15s ease;
}

.delib-juror-link:hover {
  color: #14F195;
  text-decoration: underline;
}

/* Result Banner */
.delib-result-banner {
  margin-top: 1.25rem;
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

.delib-result-banner.winner-banner {
  background: radial-gradient(circle at top, rgba(255, 215, 0, 0.18), transparent 70%), #0D1018;
  border: 1px solid rgba(255, 215, 0, 0.55);
  box-shadow: 0 0 35px rgba(255, 215, 0, 0.35);
}

.delib-result-banner.contender-banner {
  background: #141414;
  border: 1px solid #282828;
}

.triumph-crown-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.triumph-crown-icon {
  font-size: 3rem;
  animation: bounceSlow 2s infinite ease-in-out;
}

@keyframes bounceSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.triumph-details h3 {
  font-size: 1.4rem;
  color: #ffd700;
  margin-bottom: 0.25rem;
}

.triumph-details p {
  font-size: 0.85rem;
  color: #fff;
  line-height: 1.4;
}

.triumph-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.85rem;
  flex-wrap: wrap;
}

/* TAB 2: Arena & Leaderboard */
.arena-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.arena-timer-box {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: var(--radius-sm);
  padding: 0.6rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.arena-leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.arena-card-item {
  display: grid;
  grid-template-columns: 48px 72px 1fr auto auto;
  align-items: center;
  gap: 1rem;
  background: #11141c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.15rem;
  transition: var(--transition-fast);
}

.arena-card-item:hover {
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateX(4px);
}

.arena-card-item.leader {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.1) 0%, #15161c 60%);
  border: 1px solid rgba(255, 215, 0, 0.45);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.15);
}

.arena-rank-badge {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 800;
  text-align: center;
  color: var(--text-muted);
}

.arena-card-item.leader .arena-rank-badge {
  color: #ffd700;
}

.arena-thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.arena-meta h4 {
  font-size: 0.95rem;
  color: #fff;
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.arena-artist {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.arena-rubrics-mini {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.arena-score-col {
  text-align: right;
  padding: 0 0.5rem;
}

.arena-score-val {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.arena-card-item.leader .arena-score-val {
  color: #ffd700;
}

.arena-score-sub {
  font-size: 0.65rem;
  color: var(--sol-green);
  text-transform: uppercase;
}

/* TAB 3: Vault & 55 Curators */
.vault-hero-card {
  background: radial-gradient(circle at top right, rgba(255, 215, 0, 0.12), transparent 70%),
              radial-gradient(circle at bottom left, rgba(20, 241, 149, 0.08), transparent 60%),
              #12131a;
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  margin-bottom: 2rem;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 215, 0, 0.15);
}

.vault-hero-badge-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.vault-live-pill {
  font-size: 0.7rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.4);
  color: #ffd700;
  font-weight: 700;
}

.vault-date-pill {
  font-size: 0.7rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--sol-cyan);
}

.vault-hero-content-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1.75rem;
  align-items: center;
}

.vault-kicker {
  font-size: 0.72rem;
  color: #ffd700;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.vault-title {
  font-size: 1.85rem;
  margin: 0.25rem 0 0.5rem 0;
}

.vault-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.vault-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.vault-metric-box {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
}

.vault-metric-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.vault-metric-value {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0.2rem 0;
}

.vault-metric-sub {
  font-size: 0.68rem;
  color: var(--text-secondary);
}

/* Loaded SOL NFT Preview */
.loaded-sol-nft-preview {
  background: #000;
  border: 2px solid #ffd700;
  border-radius: var(--radius-md);
  padding: 0.85rem;
  box-shadow: 0 0 35px rgba(255, 215, 0, 0.35);
  position: relative;
}

.loaded-badge {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: rgba(255, 215, 0, 0.95);
  color: #000;
  font-weight: 800;
  font-size: 0.72rem;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  z-index: 2;
}

.loaded-art-frame img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}

.loaded-details {
  margin-top: 0.65rem;
}

.loaded-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
}

.loaded-hash {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* 55 Curators Grid */
.curators-section-wrap {
  margin-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1.5rem;
}

.curators-section-header {
  margin-bottom: 1.25rem;
}

.curator-chamber-filters {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
}

.curator-filter-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.75rem;
  font-size: 0.75rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.curator-filter-chip:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.curator-filter-chip.active {
  background: #242424;
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

.curators-roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 0.75rem;
  max-height: 380px;
  overflow-y: auto;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
}

.curator-item-card {
  background: #12141c;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  transition: var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.curator-item-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.curator-badge-pill {
  font-size: 0.6rem;
  font-family: var(--font-mono);
  color: var(--sol-cyan);
  margin-bottom: 0.2rem;
}

.curator-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}

.curator-inst {
  font-size: 0.72rem;
  color: var(--sol-green);
}

.curator-role {
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.3;
  margin-top: 0.2rem;
}

/* Qualified Winners Grid */
.qualified-winners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-top: 0.85rem;
  max-height: 240px;
  overflow-y: auto;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
}

.qualified-winner-card {
  background: #13151f;
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: var(--radius-sm);
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  position: relative;
}

.qualified-winner-card .qual-day {
  font-size: 0.62rem;
  color: #ffd700;
  font-family: var(--font-mono);
}

.qualified-winner-card img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: 4px;
}

.qualified-winner-card .qual-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qualified-winner-card .qual-score {
  font-size: 0.68rem;
  color: var(--sol-green);
  font-family: var(--font-mono);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .competition-flow-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .comp-flow-arrow {
    display: none;
  }
  .delib-chambers-row {
    grid-template-columns: 1fr;
  }
  .vault-hero-content-grid {
    grid-template-columns: 1fr;
  }
  .vault-metrics-row {
    grid-template-columns: 1fr;
  }
  .arena-card-item {
    grid-template-columns: 32px 56px 1fr;
  }
  .arena-score-col, .arena-actions-col {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

/* ==========================================================================
   AI JURY HIRING & MYSPACE PROFILE ONBOARDING PROTOCOL
   ========================================================================== */

.ai-jury-hiring-section {
  width: 100%;
  max-width: 1440px;
  margin: 3.5rem auto 2.5rem auto;
  padding: 0 1.5rem;
}

.ai-hiring-card {
  position: relative;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(16, 16, 28, 0.95) 0%, rgba(26, 14, 38, 0.92) 50%, rgba(12, 22, 28, 0.95) 100%);
  border: 1px solid rgba(20, 241, 149, 0.35);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 0 35px rgba(20, 241, 149, 0.15);
  padding: 2.75rem 2.25rem;
  overflow: hidden;
}

.ai-hiring-glow-mesh {
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: none; display: none;
  pointer-events: none;
  filter: blur(45px);
  animation: pulseMesh 8s ease-in-out infinite alternate;
}

@keyframes pulseMesh {
  0% { transform: scale(1) translate(0, 0); opacity: 0.7; }
  100% { transform: scale(1.15) translate(-30px, 20px); opacity: 1; }
}

.ai-hiring-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.ai-hiring-badge-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.15rem;
}

.ai-hiring-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(20, 241, 149, 0.12);
  color: #14F195;
  border: 1px solid rgba(20, 241, 149, 0.4);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-family: var(--font-mono);
}

.ai-hiring-rubric-tag {
  background: #181818;
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-mono);
}

.ai-hiring-sol-tag {
  background: rgba(0, 255, 255, 0.1);
  color: var(--sol-cyan);
  border: 1px solid rgba(0, 255, 255, 0.3);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.ai-hiring-title {
  font-size: clamp(2.1rem, 4.2vw, 3.5rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 0.85rem;
  letter-spacing: -0.025em;
  background-image: url('assets/avatars/matrix_fill_v2.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 18px rgba(0, 240, 255, 0.55)) drop-shadow(0 0 35px rgba(0, 119, 254, 0.35));
  display: inline-block;
}

.ai-hiring-title span,
.ai-hiring-title .gradient-text {
  background: inherit !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

.ai-hiring-desc {
  font-size: 0.96rem;
  color: #b0b0c8;
  line-height: 1.6;
  margin-bottom: 1.75rem;
}

.ai-hiring-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.btn-ai-hiring-glow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 1.85rem;
  border-radius: 12px;
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, #00F0FF 0%, #0080FF 60%, #38BDF8 100%) !important;
  color: #020617 !important;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 28px rgba(0, 240, 255, 0.6), 0 0 45px rgba(0, 128, 255, 0.35), 0 4px 20px rgba(0, 0, 0, 0.6);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.btn-ai-hiring-glow::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-25deg);
  transition: left 0.75s ease;
}

.btn-ai-hiring-glow:hover::after {
  left: 150%;
}

.btn-ai-hiring-glow:hover {
  transform: translateY(-2px) scale(1.02);
  background: linear-gradient(135deg, #38BDF8 0%, #00F0FF 50%, #0066FF 100%) !important;
  box-shadow: 0 0 42px rgba(0, 240, 255, 0.85), 0 0 60px rgba(0, 128, 255, 0.55), 0 8px 30px rgba(0, 0, 0, 0.8);
  color: #000000 !important;
}

/* Hyper-Modern AI Hiring Capsule & Full-Card Matrix Rain in Footer */
.footer-hiring-modern-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  background: #020612 url('assets/avatars/hiring_wide_v2.webp') center/cover no-repeat;
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 14px;
  padding: 1.1rem 1.6rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.9), 0 0 25px rgba(0, 240, 255, 0.16);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
  text-decoration: none;
}

.footer-hiring-modern-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 240, 255, 0.75);
  box-shadow: 0 12px 42px rgba(0, 0, 0, 0.95), 0 0 40px rgba(0, 240, 255, 0.35);
}

.hiring-matrix-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

.hiring-matrix-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(90deg, rgba(2, 6, 18, 0.88) 0%, rgba(2, 6, 18, 0.58) 45%, rgba(2, 6, 18, 0.84) 100%);
}

.hiring-card-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  z-index: 2;
}

.hiring-card-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: left;
}

.hiring-headline-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.hiring-badge-live {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #00F0FF;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.7);
  text-transform: uppercase;
  font-family: 'JetBrains Mono', Consolas, monospace;
}

.hiring-tag-bounty {
  font-size: 0.62rem;
  font-weight: 700;
  color: #e2e8f0;
  background: rgba(0, 25, 55, 0.75);
  border: 1px solid rgba(0, 240, 255, 0.35);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', Consolas, monospace;
}

.hiring-main-title {
  font-size: 1.12rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.footer-hiring-modern-card .gradient-text {
  background: linear-gradient(135deg, #00F0FF 0%, #38BDF8 50%, #0088FF 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.5)) !important;
}

.hiring-subtitle {
  font-size: 0.78rem;
  color: #cbd5e1;
  line-height: 1.35;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

.hiring-card-right {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.btn-claim-seat-glow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: linear-gradient(135deg, #00F0FF 0%, #0080FF 60%, #38BDF8 100%);
  color: #020617;
  font-weight: 800;
  font-size: 0.84rem;
  padding: 0.65rem 1.25rem;
  border-radius: 9px;
  letter-spacing: 0.01em;
  box-shadow: 0 0 22px rgba(0, 240, 255, 0.6), 0 0 35px rgba(0, 128, 255, 0.35);
  transition: all 0.25s ease;
  white-space: nowrap;
}

.footer-hiring-modern-card:hover .btn-claim-seat-glow {
  transform: translateX(3px);
  background: linear-gradient(135deg, #38BDF8 0%, #00F0FF 50%, #0066FF 100%);
  box-shadow: 0 0 32px rgba(0, 240, 255, 0.85), 0 0 45px rgba(0, 128, 255, 0.55);
  color: #000;
}

.btn-arrow-icon {
  font-size: 1rem;
  transition: transform 0.25s ease;
}

.footer-hiring-modern-card:hover .btn-arrow-icon {
  transform: translateX(4px);
}

@media (max-width: 768px) {
  .footer-hiring-modern-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
  }
  .hiring-card-right {
    width: 100%;
  }
  .btn-claim-seat-glow {
    width: 100%;
    justify-content: center;
  }
}

/* Modal Dialog Extra Large */
.modal-dialog-xl {
  max-width: 1200px;
  width: 95%;
}

.ai-jury-tabs-bar {
  display: flex;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  background: rgba(14, 14, 24, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow-x: auto;
}

.ai-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: transparent;
  border: 1px solid transparent;
  color: #8a8a9e;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.ai-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
}

.ai-tab-btn.active {
  background: rgba(20, 241, 149, 0.12);
  border-color: rgba(20, 241, 149, 0.4);
  color: #14F195;
  box-shadow: 0 0 12px rgba(20, 241, 149, 0.2);
}

.ai-tab-pane {
  display: none;
}

.ai-tab-pane.active {
  display: block;
}

/* MySpace Studio Layout */
.myspace-studio-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1.75rem;
  padding: 1.5rem;
}

@media (max-width: 960px) {
  .myspace-studio-layout {
    grid-template-columns: 1fr;
  }
}

.studio-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
}

.form-color-picker {
  width: 100%;
  height: 42px;
  padding: 0.2rem;
  background: #09090f;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  cursor: pointer;
}

.top8-chips-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.4rem;
}

.top8-chip {
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #a0a0b8;
  cursor: pointer;
  user-select: none;
  transition: all 0.18s ease;
}

.top8-chip.active {
  background: #242424;
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
  font-weight: 600;
}

.mint-action-card {
  background: rgba(20, 241, 149, 0.05);
  border: 1px solid rgba(20, 241, 149, 0.3);
  border-radius: 12px;
  padding: 1.25rem;
  margin-top: 1.5rem;
}

.mint-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}

.btn-mint-glow {
  background: linear-gradient(135deg, #14F195 0%, #9945FF 100%);
  color: #080811 !important;
  font-weight: 800;
  border: none;
  box-shadow: 0 0 18px rgba(20, 241, 149, 0.4);
}

.btn-mint-glow:hover {
  box-shadow: 0 0 30px rgba(20, 241, 149, 0.6);
  transform: translateY(-2px);
}

.mint-status-box {
  margin-top: 0.85rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.8rem;
  line-height: 1.5;
  font-family: var(--font-mono);
}

.mint-status-box.success {
  background: rgba(20, 241, 149, 0.12);
  border: 1px solid #14F195;
  color: #ffffff;
}

.mint-status-box.error {
  background: rgba(255, 69, 96, 0.12);
  border: 1px solid #FF4560;
  color: #ff94a4;
}

/* MySpace Live Preview Card */
.myspace-preview-col {
  display: flex;
  flex-direction: column;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #8a8a9e;
  margin-bottom: 0.75rem;
  letter-spacing: 0.05em;
}

.preview-badge {
  background: rgba(20, 241, 149, 0.12);
  color: #14F195;
  border: 1px solid rgba(20, 241, 149, 0.35);
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  font-size: 0.68rem;
}

.myspace-preview-card {
  border: 2px solid var(--preview-accent, #14F195);
  background: #0d0d18;
  border-radius: 10px;
  padding: 1.25rem;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.8), 0 0 15px var(--preview-accent, #14F195);
  font-family: 'Courier New', Courier, monospace;
  color: #e0e0ea;
  transition: all 0.3s ease;
}

.myspace-preview-card.theme-cyberpunk {
  --preview-accent: #14F195;
  background: #090912;
}

.myspace-preview-card.theme-vaporwave {
  --preview-accent: #FF007A;
  background: #14051a;
}

.myspace-preview-card.theme-matrix {
  --preview-accent: #00FF66;
  background: #020b02;
}

.myspace-preview-card.theme-myspace_classic {
  --preview-accent: #003399;
  background: #f0f2f5;
  color: #111111;
}

.myspace-preview-card.theme-midnight {
  --preview-accent: #9945FF;
  background: #0e0a1a;
}

.live-card-header {
  border-bottom: 2px solid var(--preview-accent, #14F195);
  padding-bottom: 0.65rem;
  margin-bottom: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.live-card-marquee {
  background: #000;
  color: var(--preview-accent, #14F195);
  padding: 0.3rem 0.5rem;
  font-size: 0.72rem;
  margin-bottom: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  white-space: nowrap;
}

.live-card-body {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
}

.live-avatar-box {
  border: 1px solid var(--preview-accent, #14F195);
  padding: 0.35rem;
  background: #000;
  text-align: center;
}

.live-avatar-img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  display: block;
}

.live-online-pill {
  color: #14F195;
  font-size: 0.65rem;
  font-weight: bold;
  margin-top: 0.35rem;
}

.live-top8-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.live-top8-item {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.25rem;
  text-align: center;
  border-radius: 4px;
}

.live-top8-item img {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: block;
  margin: 0 auto 0.2rem auto;
}

.live-top8-item span {
  display: block;
  font-size: 0.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* API Guide & Code Block */
.api-guide-box {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.api-step-card {
  background: rgba(14, 14, 24, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1.25rem;
}

.api-step-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

.api-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(20, 241, 149, 0.15);
  color: #14F195;
  border: 1px solid rgba(20, 241, 149, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  font-family: var(--font-mono);
}

.api-step-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
}

.api-code-block {
  background: #080811;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 1rem;
  font-size: 0.78rem;
  color: #c0c0d8;
  overflow-x: auto;
}

.sandbox-grid {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.5rem;
}

/* Hall of AI Jurors */
.hall-header-box {
  padding: 1.5rem 1.5rem 0.5rem 1.5rem;
}

.hall-jurors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  padding: 1.5rem;
}

.juror-card {
  background: rgba(16, 16, 28, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
  transition: all 0.22s ease;
}

.juror-card:hover {
  border-color: rgba(20, 241, 149, 0.45);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 15px rgba(20, 241, 149, 0.15);
}

.juror-card-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.juror-card-avatar {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  border: 2px solid var(--juror-accent, #14F195);
  background: #000;
}

.juror-card-name {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
}

.juror-card-model {
  font-size: 0.72rem;
  color: var(--sol-cyan);
  font-family: var(--font-mono);
}

.juror-card-bio {
  font-size: 0.8rem;
  color: #9a9ab0;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.juror-card-stats {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.65rem;
  color: #8a8a9e;
  font-family: var(--font-mono);
}

.juror-card-mint-id {
  font-size: 0.68rem;
  color: var(--sol-green);
  word-break: break-all;
}

/* Hugging Face RLHF Dataset Tab */
.hf-dataset-box {
  padding: 1.5rem;
}

.hf-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.hf-icon {
  font-size: 2.2rem;
}

.hf-stats-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hf-stat-pill {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.65rem 1rem;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.hf-stat-label {
  font-size: 0.65rem;
  color: #7a7a92;
  font-family: var(--font-mono);
}

/* =========================================================================
   AI HIRING HERO CARD - AMBIENT .ART CHROMATIC LIGHTING
   ========================================================================= */
.ai-jury-hiring-section {
  max-width: 1440px;
  margin: 3.5rem auto 2.5rem;
  padding: 0 1.5rem;
}

.ai-hiring-card {
  position: relative;
  background: #08090C;
  border-radius: 20px;
  padding: 2.75rem 3rem;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95);
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Animated Chromatic Border with .art Spectrum */
.ai-hiring-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  padding: 2px;
  background: linear-gradient(
    135deg,
    #14F195 0%,
    #00F0FF 25%,
    #9945FF 50%,
    #FF007A 75%,
    #FFD700 100%
  );
  background-size: 300% 300%;
  animation: solAmbientBoxBorderWave 8s ease infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* Ambient Internal Lighting from Within */
.ai-hiring-glow-mesh {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 30% 25%,
    rgba(20, 241, 149, 0.12) 0%,
    rgba(0, 240, 255, 0.08) 35%,
    rgba(153, 69, 255, 0.09) 65%,
    transparent 85%
  );
  filter: blur(45px);
  pointer-events: none;
  animation: solAmbientMeshPulse 7s ease-in-out infinite alternate;
  z-index: 0;
}

.ai-hiring-card:hover {
  transform: translateY(-2px);
}

.ai-hiring-card:hover .ai-hiring-glow-mesh {
  opacity: 1;
  filter: blur(35px);
}

.ai-hiring-content {
  position: relative;
  z-index: 2;
}

.ai-hiring-badge-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.ai-hiring-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: #00F0FF;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.22);
}

.ai-hiring-pill .pulse-dot {
  width: 7px;
  height: 7px;
  background: #00F0FF !important;
  border-radius: 50%;
  box-shadow: 0 0 8px #00F0FF !important;
  display: inline-block;
}

.ai-hiring-rubric-tag {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #c4c8d8;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
}

.ai-hiring-sol-tag {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 240, 255, 0.09);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--sol-cyan);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
}

.ai-hiring-title {
  font-size: clamp(2.1rem, 4.2vw, 3.5rem);
  font-weight: 800;
  margin: 0 0 1rem;
  line-height: 1.15;
  letter-spacing: -0.025em;
  background: url('assets/avatars/matrix_fill_v2.webp') center/cover no-repeat,
              linear-gradient(135deg, #00F0FF 0%, #38BDF8 50%, #0077FE 100%);
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 20px rgba(0, 240, 255, 0.55)) drop-shadow(0 0 35px rgba(0, 119, 254, 0.35));
  display: inline-block;
}

.ai-hiring-title span,
.ai-hiring-title .gradient-text {
  background: inherit !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

.ai-hiring-desc {
  max-width: 880px;
  color: #a0a6be;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.65;
  margin: 0 0 2rem;
}

.ai-hiring-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-ai-hiring-glow {
  background: linear-gradient(135deg, #00F0FF 0%, #0080FF 60%, #38BDF8 100%) !important;
  color: #020617 !important;
  font-weight: 800;
  font-size: 0.94rem;
  padding: 0.9rem 1.85rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 28px rgba(0, 240, 255, 0.6), 0 0 45px rgba(0, 128, 255, 0.35), 0 4px 20px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
}

.btn-ai-hiring-glow:hover {
  transform: translateY(-2px) scale(1.02);
  background: linear-gradient(135deg, #38BDF8 0%, #00F0FF 50%, #0066FF 100%) !important;
  box-shadow: 0 0 42px rgba(0, 240, 255, 0.85), 0 0 60px rgba(0, 128, 255, 0.55), 0 8px 30px rgba(0, 0, 0, 0.8);
  color: #000000 !important;
}

#btn-view-ai-jurors {
  background: rgba(3, 12, 32, 0.8);
  border: 1px solid rgba(0, 240, 255, 0.38);
  color: #E0F2FE;
  font-family: var(--font-mono);
  font-size: 0.90rem;
  font-weight: 700;
  padding: 0.88rem 1.65rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(0, 240, 255, 0.08);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

#btn-view-ai-jurors:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 240, 255, 0.85);
  background: rgba(0, 30, 70, 0.75);
  color: #FFFFFF;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.45), 0 6px 25px rgba(0, 0, 0, 0.7);
}

#btn-jurors-count {
  color: #00F0FF;
  font-weight: 800;
}

.btn-svg-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

@keyframes solAmbientBoxBorderWave {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes solAmbientMeshPulse {
  0% { transform: scale(0.95); opacity: 0.7; }
  100% { transform: scale(1.05); opacity: 1; }
}





@keyframes solAmbientShine {
  0% { left: -100%; }
  40% { left: 100%; }
  100% { left: 100%; }
}

/* =========================================================================
   GALLERY DISPLAY CARDS - ULTRA-HD WEBGL PITCH BLACK PRICE & BUY/OFFER SUITE
   ========================================================================= */
.card-price-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  margin: 0.75rem 0 0.55rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.card-price-tag {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
}

.price-sol-val {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 0.96rem;
  font-weight: 800;
  color: #00FFA3;
  letter-spacing: -0.01em;
}

.price-sol-val.floor-val {
  font-size: 0.86rem;
  font-weight: 700;
  color: #cbd5e1;
}

.price-sol-icon {
  width: 15px;
  height: 13px;
  object-fit: contain;
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

.price-usd-val {
  font-size: 0.72rem;
  color: #717a8a;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-weight: 500;
  margin-top: 1px;
}

.card-market-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

.btn-card-buy {
  background: #024d46;
  background: linear-gradient(180deg, #03554d 0%, #02443e 100%);
  border: 1px solid rgba(20, 241, 149, 0.28);
  color: #FFFFFF !important;
  font-size: 0.82rem;
  font-weight: 750;
  font-family: 'Outfit', 'Syne', -apple-system, sans-serif;
  padding: 0.4rem 0.95rem;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.btn-card-buy:hover {
  background: #00FFA3;
  color: #000000 !important;
  border-color: #00FFA3;
  box-shadow: 0 0 14px rgba(0, 255, 163, 0.6);
  transform: translateY(-1px);
}

.btn-card-offer {
  background: #000000;
  border: 1px solid #333942;
  color: #FFFFFF !important;
  font-size: 0.82rem;
  font-weight: 750;
  font-family: 'Outfit', 'Syne', -apple-system, sans-serif;
  padding: 0.4rem 0.88rem;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-card-offer:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.btn-card-vault-offer {
  background: #000000;
  border: 1px solid #2a2f38;
  color: #FFFFFF !important;
  font-size: 0.82rem;
  font-weight: 750;
  font-family: 'Outfit', 'Syne', -apple-system, sans-serif;
  padding: 0.4rem 0.95rem;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-card-vault-offer:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

/* =========================================================================
   MARKETPLACE MODALS & FEE BREAKDOWN CARDS
   ========================================================================= */
.market-modal-container {
  max-width: 540px;
  width: 92%;
  background: #090A0E;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 1.75rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.95);
  position: relative;
}

.market-modal-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 750;
  color: var(--sol-green);
  background: rgba(20, 241, 149, 0.08);
  border: 1px solid rgba(20, 241, 149, 0.3);
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  margin-bottom: 0.4rem;
}

.market-modal-title {
  color: #FFFFFF;
  font-size: 1.45rem;
  font-weight: 800;
  margin: 0 0 0.3rem;
}

.price-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.price-suffix-tag {
  position: absolute;
  right: 14px;
  font-size: 0.85rem;
  font-weight: 750;
  color: var(--sol-green);
  pointer-events: none;
}

.market-fee-breakdown-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 1rem 1.15rem;
  margin-top: 1.25rem;
}

.fee-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: #a0a6be;
  padding: 0.3rem 0;
}

.fee-row.highlight {
  color: #FFFFFF;
}

.fee-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.09);
  margin: 0.6rem 0;
}

.fee-row.total-proceeds {
  font-size: 0.92rem;
  font-weight: 750;
  color: #FFFFFF;
}

.buy-artwork-preview-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0.85rem;
}

.buy-preview-thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* =========================================================================
   ENHANCED LIST NFT FOR SALE SUITE & WALLET SELECTOR (OBJKT.COM OBSIDIAN LUXURY)
   ========================================================================= */
.list-modal-enhanced {
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) #050608;
  background: #07080b !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.98), 0 0 1px rgba(255, 255, 255, 0.2) !important;
  border-radius: 16px !important;
}

.list-modal-enhanced::-webkit-scrollbar {
  width: 6px;
}
.list-modal-enhanced::-webkit-scrollbar-track {
  background: #050608;
}
.list-modal-enhanced::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}

.market-modal-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 750;
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  margin-bottom: 0.4rem;
  letter-spacing: 0.04em;
}

.list-wallet-gate {
  padding: 2rem 1.25rem;
  text-align: center;
  background: #040508;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  margin: 0.25rem 0;
}

.list-gate-icon-pulse {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(5, 6, 9, 0.9) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
  color: #FFFFFF;
  animation: gatePulse 3s infinite ease-in-out;
}

@keyframes gatePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 15px rgba(255, 255, 255, 0.05); }
  50% { transform: scale(1.04); box-shadow: 0 0 25px rgba(255, 255, 255, 0.12); }
}

.list-gate-title {
  font-size: 1.3rem;
  color: #FFFFFF;
  margin: 0 0 0.5rem;
  font-weight: 750;
}

.list-gate-desc {
  font-size: 0.82rem;
  line-height: 1.55;
  color: #94a3b8;
  max-width: 480px;
  margin: 0 auto 1.35rem;
}

.list-gate-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.15rem;
}

.list-gate-footer {
  color: rgba(255, 255, 255, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 0.85rem;
  margin-top: 0.85rem;
}

.list-wallet-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #090b10;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  margin-bottom: 0.85rem;
}

.list-status-left {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.list-balance-badge {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.list-source-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.85rem;
}

.list-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #94a3b8;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.list-tab-btn:hover {
  color: #FFFFFF;
}

.list-tab-btn.active {
  color: #FFFFFF;
  border-bottom-color: #FFFFFF;
  font-weight: 750;
}

.list-filter-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.list-search-wrap {
  flex: 1;
}

.btn-refresh-list {
  padding: 0.35rem 0.75rem;
  white-space: nowrap;
}

.list-wallet-nfts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.65rem;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) rgba(0, 0, 0, 0.4);
  margin-bottom: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: #030406;
  padding: 0.55rem;
}

.list-nft-item-card {
  background: #08090d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.45rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  text-align: left;
}

.list-nft-item-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.28);
  background: #0f1118;
}

.list-nft-item-card.selected {
  border-color: #FFFFFF;
  background: #11131c;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.12);
}

.list-nft-item-card.selected::after {
  content: '✓';
  position: absolute;
  top: 5px;
  right: 5px;
  background: #FFFFFF;
  color: #000000;
  font-size: 0.62rem;
  font-weight: 850;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.8);
}

.list-nft-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 0.35rem;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.list-nft-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  overflow: hidden;
}

.list-nft-name {
  font-size: 0.74rem;
  font-weight: 750;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-nft-sub {
  font-size: 0.64rem;
  color: #94a3b8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list-selected-preview-card {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  background: #080a0f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.85rem;
}

.list-preview-thumb {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  background: #000000;
}

.list-preview-details {
  flex: 1;
  min-width: 0;
}

.list-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}

.list-preview-title {
  font-size: 0.95rem;
  font-weight: 750;
  color: #FFFFFF;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-status-pill {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.list-status-pill.listed {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.list-preview-meta {
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
}

.list-genesis-badge {
  color: #e2e8f0;
  font-size: 0.68rem;
  font-weight: 700;
  margin-top: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.price-estimate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.4rem;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.quick-price-chips {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.price-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  border-radius: 5px;
  padding: 0.2rem 0.5rem;
  font-size: 0.68rem;
  cursor: pointer;
  transition: all 0.15s;
}

.price-chip:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
}

.duration-pills-row {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.duration-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  border-radius: 6px;
  padding: 0.28rem 0.65rem;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.15s;
}

.duration-pill:hover {
  border-color: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

.duration-pill.active {
  background: rgba(255, 255, 255, 0.12);
  border-color: #FFFFFF;
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.12);
}

.list-tx-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 9, 0.96);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  border-radius: 16px;
  padding: 1.5rem;
}

.list-tx-card {
  text-align: center;
  max-width: 440px;
  width: 100%;
}

.cyber-spinner {
  width: 52px;
  height: 52px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: #FFFFFF;
  border-right-color: #94a3b8;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 1.25rem;
}

.list-tx-title {
  color: #FFFFFF;
  font-size: 1.25rem;
  margin: 0 0 0.35rem;
}

.list-tx-desc {
  color: #94a3b8;
  margin-bottom: 1.5rem;
}

.list-tx-steps-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-nft-sub {
  font-size: 0.64rem;
  color: #94a3b8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list-selected-preview-card {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  background: rgba(20, 241, 149, 0.04);
  border: 1px solid rgba(20, 241, 149, 0.28);
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.85rem;
}

.list-preview-thumb {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

.list-preview-details {
  flex: 1;
  min-width: 0;
}

.list-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}

.list-preview-title {
  font-size: 0.95rem;
  font-weight: 750;
  color: #FFFFFF;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-status-pill {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}

.list-status-pill.listed {
  background: rgba(20, 241, 149, 0.15);
  color: #14F195;
  border: 1px solid rgba(20, 241, 149, 0.3);
}

.list-preview-meta {
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
}

.list-genesis-badge {
  color: #14F195;
  font-size: 0.68rem;
  font-weight: 700;
  margin-top: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(20, 241, 149, 0.08);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  border: 1px solid rgba(20, 241, 149, 0.2);
}

.price-estimate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.4rem;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.quick-price-chips {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.price-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  border-radius: 5px;
  padding: 0.18rem 0.45rem;
  font-size: 0.68rem;
  cursor: pointer;
  transition: all 0.15s;
}

.price-chip:hover {
  background: rgba(20, 241, 149, 0.15);
  border-color: #14F195;
  color: #14F195;
}

.duration-pills-row {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.duration-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  border-radius: 6px;
  padding: 0.28rem 0.65rem;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.15s;
}

.duration-pill:hover {
  border-color: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

.duration-pill.active {
  background: rgba(153, 69, 255, 0.18);
  border-color: #9945FF;
  color: #FFFFFF;
  font-weight: 650;
  box-shadow: 0 0 10px rgba(153, 69, 255, 0.25);
}

.list-tx-overlay {
  position: absolute;
  inset: 0;
  background: rgba(9, 10, 14, 0.95);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  border-radius: 16px;
  padding: 1.5rem;
}

.list-tx-card {
  text-align: center;
  max-width: 440px;
  width: 100%;
}

.cyber-spinner {
  width: 52px;
  height: 52px;
  border: 3px solid rgba(20, 241, 149, 0.15);
  border-top-color: #14F195;
  border-right-color: #9945FF;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 1.25rem;
}

.list-tx-title {
  color: #FFFFFF;
  font-size: 1.25rem;
  margin: 0 0 0.35rem;
}

.list-tx-desc {
  color: #94a3b8;
  margin-bottom: 1.5rem;
}

.list-tx-steps-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.25rem;
  position: relative;
}

.tx-step-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  z-index: 2;
}

.tx-step-node .step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #151720;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #94a3b8;
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 750;
  transition: all 0.3s;
}

.tx-step-node .step-title {
  font-size: 0.65rem;
  color: #64748b;
  font-family: monospace;
}

.tx-step-node.active .step-num {
  background: #14F195;
  border-color: #14F195;
  color: #000;
  box-shadow: 0 0 14px rgba(20, 241, 149, 0.7);
}

.tx-step-node.active .step-title {
  color: #14F195;
  font-weight: 700;
}

.tx-step-node.completed .step-num {
  background: #9945FF;
  border-color: #9945FF;
  color: #FFFFFF;
}

.tx-step-node.completed .step-title {
  color: #9945FF;
}

.tx-step-line {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 -4px 18px;
  transition: background 0.3s;
}

.tx-step-line.completed {
  background: #14F195;
}

.list-success-view {
  padding: 1.5rem 0.5rem;
  text-align: center;
}

.list-success-badge-icon {
  font-size: 3rem;
  margin-bottom: 0.65rem;
  animation: bounce 0.8s ease;
}

.list-success-title {
  color: #FFFFFF;
  font-size: 1.35rem;
  margin: 0 0 0.4rem;
}

.list-success-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(20, 241, 149, 0.35);
  border-radius: 12px;
  padding: 0.85rem;
  margin: 1.25rem auto;
  max-width: 400px;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.list-success-thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.list-success-price {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0.2rem 0;
}

.list-success-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.25rem;
}


/* =========================================================================
   FOOTER PROMINENT DOCS & DEVELOPER BADGE
   ========================================================================= */
.footer-docs-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  padding: 0.55rem 1.15rem;
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: none;
  transition: all 0.25s ease;
}

.footer-docs-badge:hover {
  background: rgba(20, 241, 149, 0.1);
  border-color: rgba(20, 241, 149, 0.5);
  color: #14F195;
  box-shadow: 0 0 16px rgba(20, 241, 149, 0.25);
  transform: translateY(-1px);
}

/* =========================================================================
   DEDICATED HIRING.HTML PAGE STYLES (OBSIDIAN DARK LUXURY)
   ========================================================================= */
.hiring-page-body {
  background: #000000;
  color: #f1f5f9;
  min-height: 100vh;
}

.hiring-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 2rem 1.75rem 5rem;
}

.hiring-hero-banner {
  position: relative;
  background: #08090C;
  border-radius: 20px;
  padding: 3rem;
  margin-bottom: 2.5rem;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.95);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
}

.hiring-hero-mesh {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(153, 69, 255, 0.15) 0%, rgba(20, 241, 149, 0.12) 40%, transparent 75%);
  filter: blur(50px);
  pointer-events: none;
}

.hiring-hero-content {
  position: relative;
  z-index: 2;
}

.hiring-pill-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.hiring-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(20, 241, 149, 0.1);
  border: 1px solid rgba(20, 241, 149, 0.35);
  color: var(--sol-green);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 750;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
}

.hiring-tag-rubric, .hiring-tag-fee {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #c4c8d8;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
}

.hiring-tag-fee {
  color: var(--sol-cyan);
  border-color: rgba(0, 240, 255, 0.3);
}

.hiring-hero-title {
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  font-weight: 850;
  color: #FFFFFF;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 1.25rem;
}

.hiring-hero-lead {
  max-width: 920px;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  color: #a0a6be;
  line-height: 1.7;
  margin: 0 0 2.25rem;
}

.hiring-stats-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.stat-matrix-card {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}

.stat-matrix-icon {
  font-size: 1.8rem;
}

.stat-matrix-num {
  font-size: 1.15rem;
  font-weight: 800;
  color: #FFFFFF;
}

.stat-matrix-label {
  font-size: 0.72rem;
  color: #8890a8;
}

.hiring-tabs-nav {
  display: flex;
  gap: 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  overflow-x: auto;
}

.hiring-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #94a3b8;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.7rem 1.3rem;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.hiring-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.hiring-tab-btn.active {
  background: rgba(20, 241, 149, 0.12);
  border-color: rgba(20, 241, 149, 0.4);
  color: #14F195;
  box-shadow: 0 0 16px rgba(20, 241, 149, 0.25);
}

.hiring-tab-pane {
  display: none;
}

.hiring-tab-pane.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

.studio-grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 1024px) {
  .studio-grid-layout {
    grid-template-columns: 1fr;
  }
}

.studio-form-card, .studio-preview-card {
  background: #090A0E;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85);
}

.studio-card-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.studio-card-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
}

.studio-mint-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(20, 241, 149, 0.05);
  border: 1px solid rgba(20, 241, 149, 0.3);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-top: 1.5rem;
  gap: 1rem;
}

.btn-mint-badge {
  background: #14F195;
  color: #000000;
  border: none;
  padding: 0.75rem 1.35rem;
  border-radius: 8px;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-mint-badge:hover {
  background: #2affaa;
  box-shadow: 0 0 20px rgba(20, 241, 149, 0.5);
  transform: translateY(-1px);
}

.preview-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}

.preview-title-group {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.preview-heading {
  font-size: 0.78rem;
  font-weight: 750;
  color: #FFFFFF;
}

.preview-dot-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #14F195;
  box-shadow: 0 0 8px #14F195;
}

.preview-device-frame {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  overflow: hidden;
  height: 640px;
}

.myspace-preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.btn-back-gallery {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.82rem;
  padding: 0.5rem 0.95rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  transition: all 0.2s ease;
}

.btn-back-gallery:hover {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
}

/* =========================================================================
   SOLANA NFT ART SPACE & APPRAISAL CURRICULUM STYLES
   ========================================================================= */

.curriculum-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.curriculum-hero-card {
  background: #090A0E;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 2.25rem 2.5rem;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.9);
  position: relative;
  overflow: hidden;
}

.curriculum-hero-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sol-purple) 0%, var(--sol-green) 50%, var(--sol-cyan) 100%);
}

.curriculum-pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}

.pillar-card {
  background: #0C0D12;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.pillar-card:hover {
  border-color: rgba(20, 241, 149, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
}

.pillar-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.pillar-weight-badge {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  background: rgba(20, 241, 149, 0.12);
  border: 1px solid rgba(20, 241, 149, 0.35);
  color: #14F195;
}

.pillar-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 0.4rem 0;
}

.pillar-desc {
  font-size: 0.84rem;
  color: #94a3b8;
  line-height: 1.5;
}

.criterion-item {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 0.75rem 0.95rem;
}

.criterion-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 0.25rem;
}

.criterion-guide {
  font-size: 0.73rem;
  color: #8892b0;
  line-height: 1.45;
}

.formula-card {
  background: #090A0E;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 1.75rem;
}

.equation-box {
  background: #040407;
  border: 1px solid rgba(20, 241, 149, 0.3);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: #14F195;
  text-align: center;
  margin: 1rem 0;
  box-shadow: inset 0 0 20px rgba(20, 241, 149, 0.06);
}

.thresholds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.threshold-chip {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.threshold-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: #f1f5f9;
}

.threshold-range {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  color: #14F195;
}

.critique-format-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.critique-format-card {
  background: #0C0D12;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 1.2rem;
}

.critique-format-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.badge-love {
  background: rgba(20, 241, 149, 0.15);
  color: #14F195;
  border: 1px solid rgba(20, 241, 149, 0.35);
}

.badge-improve {
  background: rgba(255, 170, 0, 0.15);
  color: #ffa500;
  border: 1px solid rgba(255, 170, 0, 0.35);
}

.badge-market {
  background: rgba(0, 240, 255, 0.15);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.35);
}

.critique-format-desc {
  font-size: 0.8rem;
  color: #a0a6be;
  line-height: 1.5;
}

.slop-charter-box {
  background: rgba(255, 69, 96, 0.04);
  border: 1px solid rgba(255, 69, 96, 0.25);
  border-radius: 12px;
  padding: 1.4rem;
}

.slop-charter-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.82rem;
  color: #cbd5e1;
  margin-bottom: 0.6rem;
  line-height: 1.5;
}

.slop-charter-item:last-child {
  margin-bottom: 0;
}

.hall-badge-framework {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: rgba(153, 69, 255, 0.12);
  border: 1px solid rgba(153, 69, 255, 0.35);
  color: #c084fc;
}

.hall-badge-brain {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: #38bdf8;
}

.post-mint-curriculum-panel {
  margin-top: 1rem;
  padding: 1.1rem;
  background: rgba(20, 241, 149, 0.06);
  border: 1px solid rgba(20, 241, 149, 0.25);
  border-radius: 10px;
}

/* ==========================================================================
   SOLANANFT.ART // 3D SPATIAL METAVERSE, WORK STATION, BLOG & LEADERBOARD
   Pure Obsidian Black (#000000) & Cybernetic Neon Contained Glow
   ========================================================================== */

/* --- 3D Spatial Metaverse Viewport & Grand Rotunda --- */
.spatial-hero-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.spatial-title-wrap {
  flex: 1;
  min-width: 320px;
}

.spatial-main-title {
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  margin: 10px 0 8px;
  letter-spacing: -0.02em;
}

.spatial-desc {
  color: #94a3b8;
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 820px;
}

.spatial-metrics-pills {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hud-metric-card {
  background: #08090e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 110px;
}

.hud-metric-val {
  font-size: 1.4rem;
  font-weight: 700;
  color: #14F195;
}

.hud-metric-lbl {
  font-size: 0.72rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

.spatial-viewport-card {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95);
  margin-bottom: 30px;
}

.spatial-toolbar {
  background: #06070a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.spatial-nav-shortcuts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-warp {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-warp:hover {
  background: rgba(20, 241, 149, 0.12);
  border-color: #14F195;
  color: #14F195;
  transform: translateY(-1px);
}

.btn-pip-drawer {
  background: linear-gradient(135deg, rgba(20, 241, 149, 0.15), rgba(0, 240, 255, 0.15));
  border: 1px solid rgba(20, 241, 149, 0.4);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.btn-pip-drawer:hover {
  background: linear-gradient(135deg, rgba(20, 241, 149, 0.25), rgba(0, 240, 255, 0.25));
  border-color: #14F195;
  box-shadow: 0 0 16px rgba(20, 241, 149, 0.3);
}

.spatial-canvas-container {
  width: 100%;
  height: 640px;
  background: #000000;
  position: relative;
  outline: none;
}

.canvas-loading-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #14F195;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
}

.spatial-hud-footer {
  background: #06070a;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  color: #94a3b8;
  flex-wrap: wrap;
  gap: 10px;
}

.kbd-badge {
  display: inline-block;
  background: #151822;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 1px 6px;
  color: #ffffff;
  font-weight: 700;
  margin: 0 2px;
}

.hud-status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #14F195;
}

/* Pip Space Interactive Drawer */
.pip-space-drawer {
  display: none;
  margin-top: 16px;
  animation: fadeIn 0.25s ease;
}

.pip-space-drawer.open {
  display: block;
}

.pip-drawer-card {
  background: #07080c;
  border: 1px solid rgba(20, 241, 149, 0.3);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
}

.pip-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 14px;
}

.pip-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.pip-actions-row {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Spatial Modal & Toasts */
.spatial-art-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.spatial-art-modal.active {
  display: flex;
}

.spatial-modal-card {
  background: #090a0f;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  max-width: 840px;
  width: 100%;
  padding: 28px;
  position: relative;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.95);
}

.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

@media (max-width: 768px) {
  .modal-grid {
    grid-template-columns: 1fr;
  }
}

.modal-art-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-art-preview img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.modal-mint-capsule {
  font-size: 0.72rem;
  color: #94a3b8;
  word-break: break-all;
  background: #040508;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.modal-art-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.art-modal-title {
  font-size: 1.5rem;
  color: #ffffff;
  margin-top: 4px;
}

.creator-mono {
  font-size: 0.8rem;
  color: #94a3b8;
}

.jury-quick-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 6px 0;
}

.stat-pill {
  background: #06070a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-pill .label {
  font-size: 0.72rem;
  color: #64748b;
  text-transform: uppercase;
}

.stat-pill .val {
  font-size: 0.96rem;
  font-weight: 700;
}

.modal-actions-row {
  margin-top: auto;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-spatial-primary {
  background: #14F195;
  color: #000000;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.2s ease;
}

.btn-spatial-primary:hover {
  opacity: 0.9;
}

.btn-spatial-secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-spatial-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
}

.spatial-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #08090e;
  border: 1px solid #14F195;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 0.82rem;
  font-weight: 600;
  z-index: 10000;
  box-shadow: 0 10px 30px rgba(20, 241, 149, 0.25);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.spatial-toast.show {
  transform: translateX(-50%) translateY(0);
}

/* --- AI Agent Work Station Dashboard --- */
.desk-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.desk-header-banner {
  background: #07080c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.desk-agent-lockup {
  display: flex;
  align-items: center;
  gap: 18px;
}

.desk-avatar-img {
  width: 68px;
  height: 68px;
  border-radius: 14px;
  border: 2px solid #14F195;
  background: #040508;
  object-fit: cover;
  box-shadow: 0 0 18px rgba(20, 241, 149, 0.25);
}

.desk-title {
  font-size: 1.6rem;
  color: #ffffff;
  margin: 4px 0 2px;
}

.desk-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.desk-stat-card {
  background: #06070a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.desk-stat-icon {
  font-size: 1.8rem;
}

.desk-stat-val {
  font-size: 1.25rem;
  font-weight: 700;
}

.desk-stat-lbl {
  font-size: 0.74rem;
  color: #64748b;
  margin-top: 2px;
}

.payroll-notice-banner {
  background: rgba(20, 241, 149, 0.04);
  border: 1px solid rgba(20, 241, 149, 0.25);
  border-radius: 10px;
  padding: 12px 18px;
  margin: 16px 0 24px;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.5;
}

.payroll-notice-banner .notice-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.desk-workbench-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 24px;
}

@media (max-width: 960px) {
  .desk-workbench-grid {
    grid-template-columns: 1fr;
  }
}

.desk-queue-col,
.desk-eval-col {
  background: #07080c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 22px;
}

.desk-col-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.desk-queue-items-scroll {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 4px;
}

.desk-queue-item {
  background: #040508;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.desk-queue-item:hover {
  background: #0a0c14;
  border-color: rgba(20, 241, 149, 0.3);
}

.desk-queue-item.selected {
  background: #0b0d18;
  border-color: #14F195;
  box-shadow: 0 0 12px rgba(20, 241, 149, 0.2);
}

.queue-item-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  background: #000;
}

.queue-item-info {
  flex: 1;
  min-width: 0;
}

.queue-item-title {
  font-size: 0.86rem;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-queue-select {
  background: transparent;
  border: none;
  color: #14F195;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.desk-selected-artwork-card {
  display: flex;
  gap: 16px;
  align-items: center;
  background: #040508;
  border: 1px solid rgba(20, 241, 149, 0.25);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
  transition: all 0.25s ease;
}

.desk-selected-thumb {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.desk-selected-details {
  flex: 1;
  min-width: 0;
}

.desk-selected-details .badge-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.desk-selected-details h4 {
  font-size: 1rem;
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rubric-sliders-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 18px 0;
}

.slider-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.slider-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: #cbd5e1;
}

.range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: #161922;
  border-radius: 4px;
  outline: none;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #14F195;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(20, 241, 149, 0.5);
}

.calculated-composite-box {
  background: #040508;
  border: 1px solid rgba(250, 204, 21, 0.3);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 14px 0;
  flex-wrap: wrap;
  gap: 12px;
}

.composite-num {
  font-size: 1.4rem;
  font-weight: 800;
}

.award-status-pill {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(250, 204, 21, 0.1);
  border: 1px solid rgba(250, 204, 21, 0.3);
  color: #facc15;
}

.award-status-pill.award-gold {
  background: rgba(250, 204, 21, 0.15);
  border-color: #facc15;
  color: #facc15;
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.25);
}

.award-status-pill.award-silver {
  background: rgba(148, 163, 184, 0.15);
  border-color: #94a3b8;
  color: #cbd5e1;
}

.award-status-pill.award-bronze {
  background: rgba(192, 132, 252, 0.15);
  border-color: #c084fc;
  color: #c084fc;
}

.ai-prompts-row {
  display: flex;
  gap: 6px;
}

.btn-prompt-tag {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-prompt-tag:hover {
  background: rgba(20, 241, 149, 0.1);
  border-color: #14F195;
  color: #14F195;
}

.desk-submit-row {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* --- Colosseum Visual Group Blog Feed --- */
.blog-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.blog-hero-banner {
  background: #07080c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 24px;
}

.blog-title {
  font-size: 1.8rem;
  color: #ffffff;
  margin: 10px 0 6px;
}

.blog-desc {
  color: #94a3b8;
  font-size: 0.92rem;
  line-height: 1.6;
}

.blog-composer-card {
  background: #08090e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 20px;
}

.composer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 12px;
}

.composer-author-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.composer-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.composer-meta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.composer-meta-row input {
  flex: 1;
  min-width: 180px;
}

.blog-feed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
  gap: 12px;
}

.feed-filter-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-filter {
  background: #06070a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.76rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-filter.active,
.btn-filter:hover {
  background: rgba(20, 241, 149, 0.12);
  border-color: #14F195;
  color: #14F195;
}

.colosseum-feed-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.colosseum-post-card {
  background: #07080c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
}

.post-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 12px;
}

.post-author-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}

.post-avatar-img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  background: #000;
}

.post-title {
  font-size: 1.15rem;
  color: #ffffff;
  margin-bottom: 6px;
}

.post-text {
  color: #cbd5e1;
  font-size: 0.9rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

.post-attached-image {
  margin-top: 12px;
  max-width: 420px;
}

.post-attached-image img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.post-card-footer {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-upvote {
  background: rgba(20, 241, 149, 0.08);
  border: 1px solid rgba(20, 241, 149, 0.3);
  color: #14F195;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.2s ease;
}

.btn-upvote:hover {
  background: #14F195;
  color: #000000;
}

.btn-reply {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-reply:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.tagged-mint-pill {
  color: #64748b;
  font-size: 0.74rem;
}

/* Threaded replies */
.replies-subthread {
  margin-top: 16px;
  padding-left: 20px;
  border-left: 2px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reply-card {
  background: #040508;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 14px;
}

.reply-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.reply-avatar-img {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

.reply-content {
  font-size: 0.84rem;
  color: #94a3b8;
  line-height: 1.5;
}

/* --- Critic Leaderboard & Critic of the Week --- */
.leaderboard-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.critic-spotlight-card {
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.08) 0%, rgba(8, 9, 14, 0.98) 60%);
  border: 1px solid rgba(250, 204, 21, 0.4);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9);
}

.spotlight-badge {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.spotlight-hero-grid {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.spotlight-avatar {
  width: 96px;
  height: 96px;
  border-radius: 20px;
  border: 3px solid #facc15;
  box-shadow: 0 0 24px rgba(250, 204, 21, 0.35);
  background: #000;
  object-fit: cover;
}

.spotlight-info {
  flex: 1;
  min-width: 280px;
}

.spotlight-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.spotlight-name {
  font-size: 1.6rem;
  color: #ffffff;
}

.spotlight-metrics-row {
  display: flex;
  gap: 18px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.spotlight-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spotlight-metric .val {
  font-size: 1.15rem;
  font-weight: 800;
}

.spotlight-metric .lbl {
  font-size: 0.7rem;
  color: #64748b;
  text-transform: uppercase;
}

.leaderboard-card {
  background: #07080c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 24px;
}

.leaderboard-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}

.leaderboard-title {
  font-size: 1.5rem;
  color: #ffffff;
}

.table-responsive {
  overflow-x: auto;
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.leaderboard-table th {
  background: #040508;
  color: #64748b;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.leaderboard-table td {
  padding: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}

.leaderboard-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.leaderboard-row.top-tier {
  background: rgba(20, 241, 149, 0.02);
}

.juror-cell-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
}

.juror-mini-avatar {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
  background: #000;
}

.juror-cell-name {
  color: #ffffff;
}

.btn-action-cell {
  display: flex;
  gap: 6px;
}

.btn-cell-atelier {
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #00F0FF;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.2s ease;
}

.btn-cell-atelier:hover {
  background: #00F0FF;
  color: #000000;
}

.btn-cell-profile {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #cbd5e1;
  padding: 4px 8px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-cell-profile:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

/* 3D Spatial Architectural Engine & Tour HUD (oncyber-inspired) */
.select-spatial-template {
  background: #090a12;
  border: 1px solid rgba(20, 241, 149, 0.35);
  color: #14F195;
  border-radius: 6px;
  padding: 4px 10px;
  font-weight: 700;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.select-spatial-template:hover,
.select-spatial-template:focus {
  border-color: #14F195;
  box-shadow: 0 0 10px rgba(20, 241, 149, 0.3);
}

.select-spatial-template option {
  background: #090a12;
  color: #ffffff;
}

.btn-tour-trigger {
  background: rgba(20, 241, 149, 0.12);
  border: 1px solid #14F195;
  color: #14F195;
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-tour-trigger:hover {
  background: #14F195;
  color: #000000;
  box-shadow: 0 0 16px rgba(20, 241, 149, 0.4);
  transform: translateY(-1px);
}

.btn-architect-trigger {
  background: rgba(153, 69, 255, 0.15);
  border: 1px solid #9945FF;
  color: #d8b4fe;
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-architect-trigger:hover {
  background: #9945FF;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(153, 69, 255, 0.4);
  transform: translateY(-1px);
}

/* Autonomous Curator Guided Tour HUD Overlay */
.spatial-tour-hud {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 760px;
  background: rgba(5, 6, 10, 0.94);
  border: 1px solid rgba(20, 241, 149, 0.4);
  border-radius: 14px;
  padding: 16px 20px;
  z-index: 50;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(20, 241, 149, 0.2);
  animation: fadeIn 0.3s ease-out;
}

.tour-hud-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.tour-step-capsule {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: #14F195;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.tour-hud-actions {
  display: flex;
  gap: 6px;
}

.btn-tour-nav {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-tour-nav:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.btn-tour-close {
  background: rgba(255, 69, 96, 0.15);
  border: 1px solid rgba(255, 69, 96, 0.4);
  color: #ff4560;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-tour-close:hover {
  background: #ff4560;
  color: #ffffff;
}

.tour-artwork-title {
  font-size: 1.15rem;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 6px;
}

.tour-commentary-box {
  background: rgba(0, 0, 0, 0.5);
  border-left: 3px solid #14F195;
  padding: 8px 12px;
  border-radius: 0 8px 8px 0;
  font-size: 0.85rem;
  color: #e2e8f0;
  line-height: 1.45;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.commentary-icon {
  font-size: 1.1rem;
}

.tour-progress-bar-wrap {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.tour-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #14F195, #00F0FF);
  transition: width 0.3s ease;
}

/* AI Space Architect Studio Modal */
.modal-space-architect {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-space-architect.active {
  display: flex;
  animation: fadeIn 0.25s ease-out;
}

.architect-modal-card {
  width: 100%;
  max-width: 980px;
  max-height: 90vh;
  overflow-y: auto;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.95), 0 0 35px rgba(20, 241, 149, 0.15);
}

.architect-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.architect-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
}

@media (max-width: 860px) {
  .architect-grid {
    grid-template-columns: 1fr;
  }
}

.preview-card {
  background: #07080c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 18px;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  color: #94a3b8;
  font-weight: 700;
}

.arch-desc-box {
  background: rgba(0, 0, 0, 0.6);
  border-left: 2px solid #00F0FF;
  padding: 10px 12px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 14px;
  line-height: 1.45;
}

.sam-rules-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: rgba(20, 241, 149, 0.03);
  border: 1px dashed rgba(20, 241, 149, 0.25);
  border-radius: 8px;
  margin-bottom: 14px;
}

.sam-rule-item {
  color: #14F195;
  font-size: 0.72rem;
}

.docs-link-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-docs-link {
  color: #00F0FF;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.btn-docs-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

.architect-actions-row {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* ==========================================================================
   METAPLEX CORE (mpl-core) AUTONOMOUS AI AGENT TREASURY PANEL
   ========================================================================== */
.core-treasury-panel {
  margin-top: 28px;
  background: #030408;
  border: 1px solid rgba(20, 241, 149, 0.22);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9);
}

.core-treasury-header {
  margin-bottom: 22px;
}

.core-treasury-header .badge-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.core-treasury-title {
  font-size: 1.4rem;
  color: #ffffff;
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
}

.core-economics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.core-econ-card {
  background: #07090e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
}

.core-econ-card:hover {
  border-color: rgba(20, 241, 149, 0.35);
  box-shadow: 0 8px 24px rgba(20, 241, 149, 0.08);
}

.econ-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.econ-icon {
  font-size: 1.25rem;
}

.econ-card-header h4 {
  font-size: 0.95rem;
  margin: 0;
  flex: 1;
}

.econ-comparison-matrix {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comparison-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}

.comparison-row.highlight-surplus {
  background: rgba(250, 204, 21, 0.08);
  border: 1px dashed rgba(250, 204, 21, 0.35);
  padding: 8px 10px;
  border-radius: 8px;
  margin-top: 4px;
}

.comparison-sub {
  font-size: 0.72rem;
  line-height: 1.35;
}

.comparison-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 4px 0;
}

.treasury-vault-box {
  background: #020306;
  border: 1px solid rgba(192, 132, 252, 0.25);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 14px;
}

.vault-pda-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  padding: 6px 8px;
  border-radius: 6px;
  margin-top: 4px;
  color: #c084fc;
  font-size: 0.72rem;
  word-break: break-all;
}

.btn-copy-chip {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px;
  font-size: 0.85rem;
}

.treasury-stats-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.treasury-stat-mini {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px;
}

.treasury-stat-mini .text-lg {
  font-size: 1.15rem;
  margin: 4px 0;
}

.treasury-pool-accrued {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(20, 241, 149, 0.04);
  border: 1px solid rgba(20, 241, 149, 0.15);
  padding: 8px 10px;
  border-radius: 6px;
}

.revenue-stream-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stream-item {
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid var(--sol-cyan);
  border-radius: 0 6px 6px 0;
}

.stream-title {
  margin-bottom: 2px;
}

.stream-desc {
  font-size: 0.74rem;
  line-height: 1.35;
}

/* Simulator Box */
.treasury-calc-box {
  background: #05060b;
  border: 1px solid rgba(250, 204, 21, 0.25);
  border-radius: 12px;
  padding: 20px;
}

.calc-header {
  margin-bottom: 18px;
}

.calc-header .badge-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.calc-header h4 {
  font-size: 1.1rem;
  margin: 0 0 4px 0;
}

.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

@media (max-width: 900px) {
  .calc-grid {
    grid-template-columns: 1fr;
  }
}

.calc-sliders-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}

.calc-slider-group {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px 14px;
}

.calc-results-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 10px;
  background: #020306;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.kpi-output-card {
  padding: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.kpi-output-card .kpi-num {
  font-size: 1.1rem;
  margin: 6px 0;
}

.calc-footer-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}

/* ==========================================================================
   METAPLEX CORE NFT PACKS & 3D INTERACTIVE UNBOXING PAVILION
   ========================================================================== */

/* Navigation Action Button */
.btn-packs-horizontal {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(99, 102, 241, 0.12) 100%);
  border: 1px solid rgba(168, 85, 247, 0.45);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.2);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-packs-horizontal:hover {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.28) 0%, rgba(99, 102, 241, 0.22) 100%);
  border-color: rgba(192, 132, 252, 0.8);
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.4), 0 4px 16px rgba(0, 0, 0, 0.6);
  transform: translateY(-1px);
}

.svg-pack {
  stroke: #c084fc;
  filter: drop-shadow(0 0 4px rgba(192, 132, 252, 0.6));
}

.sub-purple {
  color: #c084fc;
}

/* Pack Pavilion Modal Container */
.pack-pavilion-container {
  max-width: 980px;
  width: 95%;
  background: radial-gradient(circle at 50% 0%, rgba(147, 51, 234, 0.15) 0%, transparent 70%),
              radial-gradient(circle at 100% 100%, rgba(20, 241, 149, 0.08) 0%, transparent 60%),
              rgba(11, 13, 22, 0.96);
  border: 1px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8), 0 0 40px rgba(168, 85, 247, 0.25);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  overflow: hidden;
  padding: 0;
}

.pack-modal-header {
  padding: 1.5rem 1.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.pack-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #c084fc;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 0.4rem;
}

.pack-badge-glow {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c084fc;
  box-shadow: 0 0 8px #c084fc;
  animation: pulseDot 1.5s infinite;
}

.pack-modal-title {
  font-size: 1.6rem;
  color: #ffffff;
  margin: 0 0 0.25rem 0;
}

.pack-modal-body {
  padding: 1.8rem;
  max-height: 75vh;
  overflow-y: auto;
}

/* Pack Catalog Cards Grid */
.pack-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1.5rem;
}

.pack-card-item {
  position: relative;
  background: rgba(18, 20, 32, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.pack-card-item:hover {
  transform: translateY(-5px);
  border-color: rgba(192, 132, 252, 0.6);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6), 0 0 30px rgba(168, 85, 247, 0.3);
}

.pack-card-foil-gold {
  border-color: rgba(255, 215, 0, 0.35);
}

.pack-card-foil-gold:hover {
  border-color: rgba(255, 215, 0, 0.8);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6), 0 0 35px rgba(255, 215, 0, 0.35);
}

.pack-visual-wrap {
  position: relative;
  width: 100%;
  height: 220px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.pack-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.pack-card-item:hover .pack-cover-img {
  transform: scale(1.05);
}

.pack-foil-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 30%,
    rgba(255, 215, 0, 0.25) 45%,
    rgba(168, 85, 247, 0.35) 55%,
    rgba(20, 241, 149, 0.25) 65%,
    transparent 100%
  );
  mix-blend-mode: overlay;
  animation: holographicSheen 4s infinite linear;
  pointer-events: none;
}

@keyframes holographicSheen {
  0% { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}

.pack-tier-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.tier-collector {
  color: #ffd700;
  border-color: rgba(255, 215, 0, 0.5);
}

.tier-mystery {
  color: #c084fc;
  border-color: rgba(192, 132, 252, 0.5);
}

.pack-info-main {
  margin-bottom: 1.25rem;
}

.pack-item-title {
  font-size: 1.25rem;
  color: #fff;
  margin: 0 0 0.35rem 0;
}

.pack-item-desc {
  font-size: 0.8rem;
  color: #94a3b8;
  line-height: 1.45;
  margin-bottom: 0.85rem;
}

.pack-features-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: #cbd5e1;
}

.pack-feature-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pack-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pack-price-display {
  display: flex;
  flex-direction: column;
}

.pack-price-sol {
  font-size: 1.35rem;
  font-weight: 800;
  color: #14f195;
  line-height: 1.1;
}

.pack-price-usd {
  font-size: 0.72rem;
  color: #64748b;
}

.btn-open-pack-studio {
  background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
  color: #fff;
  border: none;
  padding: 0.65rem 1.25rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 15px rgba(168, 85, 247, 0.35);
}

.btn-open-pack-studio:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(168, 85, 247, 0.55);
  background: linear-gradient(135deg, #b86bfc 0%, #7579f5 100%);
}

/* Stage 2: 3D Holographic Foil Pack & Interactive Reveal */
.pack-reveal-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.reveal-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.reveal-status-pill {
  font-size: 0.75rem;
  color: #c084fc;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
  padding: 4px 12px;
  border-radius: 20px;
}

.foil-pack-3d-scene {
  perspective: 1400px;
  width: 280px;
  height: 420px;
  margin: 1.5rem auto 2rem;
}

.foil-pack-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.4s ease-out;
}

.foil-pack-card {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  position: relative;
  background: linear-gradient(135deg, #1e1136 0%, #2e1065 50%, #0f172a 100%);
  border: 2px solid rgba(255, 215, 0, 0.6);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8),
              0 0 35px rgba(255, 215, 0, 0.3),
              inset 0 0 20px rgba(255, 215, 0, 0.2);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
}

.foil-sheen-overlay {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 215, 0, 0.15) 30%, transparent 60%);
  pointer-events: none;
  animation: foilShimmerRotate 8s infinite linear;
}

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

.foil-pack-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: center;
}

.foil-pack-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ffd700;
  border: 1px solid rgba(255, 215, 0, 0.4);
  padding: 3px 8px;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.foil-pack-icon {
  font-size: 3rem;
  margin-bottom: 0.75rem;
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.6));
}

.foil-pack-name {
  font-size: 1.35rem;
  color: #fff;
  margin: 0 0 0.5rem 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.foil-pack-sub {
  font-size: 0.75rem;
  color: #cbd5e1;
  margin-bottom: 1.5rem;
}

.foil-pack-footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.68rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 0.75rem;
}

.foil-brand {
  color: #14f195;
  font-weight: 700;
}

.foil-chip {
  color: #c084fc;
}

.foil-tear-line {
  position: absolute;
  top: 48px;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  z-index: 3;
}

.tear-dash {
  flex: 1;
  border-top: 2px dashed rgba(255, 255, 255, 0.4);
}

.tear-prompt {
  font-size: 0.62rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
  padding: 2px 8px;
  border-radius: 10px;
  margin: 0 6px;
  letter-spacing: 0.05em;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Pack Shake and Tear Animations */
.pack-animating {
  animation: packVibrate 0.6s infinite ease-in-out;
}

@keyframes packVibrate {
  0% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-3px, 2px) rotate(-1.5deg); }
  40% { transform: translate(3px, -2px) rotate(1.5deg); }
  60% { transform: translate(-2px, -1px) rotate(-1deg); }
  80% { transform: translate(2px, 2px) rotate(1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.pack-torn {
  animation: packBurst 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes packBurst {
  0% { transform: scale(1); opacity: 1; filter: brightness(1); }
  40% { transform: scale(1.15); opacity: 1; filter: brightness(2.5) drop-shadow(0 0 50px #ffd700); }
  100% { transform: scale(0.6) translateY(-60px); opacity: 0; filter: brightness(3); }
}

.reveal-controls {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.btn-pack-tear {
  background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
  color: #000;
  font-weight: 800;
  font-size: 1rem;
  padding: 0.85rem 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 25px rgba(255, 215, 0, 0.45);
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-pack-tear:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 35px rgba(255, 215, 0, 0.7);
}

.pack-guarantee-note {
  font-size: 0.72rem;
  color: #64748b;
}

/* Cards 3D Reveal Grid */
.unpacked-cards-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.unpacked-headline {
  text-align: center;
}

.unpacked-title {
  font-size: 1.8rem;
  color: #fff;
  margin: 0 0 0.35rem 0;
}

.cards-3d-reveal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  width: 100%;
}

/* 3D Flip Card */
.flip-card-3d {
  background-color: transparent;
  width: 100%;
  height: 380px;
  perspective: 1000px;
  cursor: pointer;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
}

.flip-card-3d.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7);
}

/* Card Front: Sealed Foil Holographic Backing */
.flip-card-front {
  background: radial-gradient(circle at 50% 50%, #2e1065 0%, #0f172a 100%);
  border: 2px solid rgba(168, 85, 247, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.card-seal-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(168, 85, 247, 0.15);
  border: 2px solid rgba(192, 132, 252, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.4);
}

.card-tap-prompt {
  font-size: 0.75rem;
  color: #cbd5e1;
  margin-top: 0.5rem;
}

/* Card Back: Revealed Masterwork NFT */
.flip-card-back {
  background: #111424;
  border: 2px solid rgba(20, 241, 149, 0.5);
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.revealed-art-img-wrap {
  width: 100%;
  height: 220px;
  background: #000;
  position: relative;
  overflow: hidden;
}

.revealed-art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.revealed-rarity-chip {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  backdrop-filter: blur(8px);
}

.rarity-mythic {
  background: rgba(255, 215, 0, 0.9);
  color: #000;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
}

.rarity-rare {
  background: rgba(0, 242, 254, 0.9);
  color: #000;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.6);
}

.rarity-curated {
  background: rgba(20, 241, 149, 0.9);
  color: #000;
  box-shadow: 0 0 12px rgba(20, 241, 149, 0.6);
}

.revealed-info {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
}

.revealed-title {
  font-size: 1rem;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.revealed-cert-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.68rem;
}

.revealed-solscan-link {
  color: #00f2fe;
  text-decoration: none;
  font-weight: 700;
}

.revealed-solscan-link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   SOLANANFT.ART // HIGH-PERFORMANCE NATIVE-FEEL MOBILE APP ENGINE
   Target Platforms: iOS Safari, Android Chrome, Samsung Internet & Phone OS
   Aesthetics: Obsidian Dark Gallery, Solana Neon Iridescence & 60fps Micro-Interactions
   ========================================================================== */

/* Universal Touch & Performance Optimizations */
@media (max-width: 768px) {
  html {
    overflow-x: clip !important;
    -webkit-text-size-adjust: 100%;
  }

  body {
    overflow-x: visible !important;
    overflow-y: visible !important;
    position: relative;
    width: 100%;
    min-height: 100svh;
    -webkit-overflow-scrolling: touch;
    touch-action: auto;
    padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
  }

  body::before {
    display: none !important;
  }

  main.container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-bottom: calc(85px + env(safe-area-inset-bottom)) !important;
  }

  /* 1. Mobile Sticky Navigation Bar - Rock-Solid Obsidian Black (Zero Stutter / Glitch during Scroll) */
  .sanctuary-nav {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    z-index: 10000 !important;
    min-height: 62px !important;
    height: auto !important;
    padding-top: max(0.35rem, env(safe-area-inset-top)) !important;
    padding-bottom: 0.35rem !important;
    /* ZYMATICA 2026-10-10 v7 (operator: "header still needs centering — move it
       a bit left"): env(safe-area-inset-left/right) reported ~30-40px on Android
       display-cutout devices even in portrait, shoving the whole lockup right.
       Fixed 10px matches the desktop edge rhythm; the sticky bar spans the full
       viewport so the cutout inset is unnecessary here. */
    padding-left: 10px !important;
    padding-right: 10px !important;
    background: #000000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.98) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto !important;
    contain: none !important;
    isolation: isolate !important;
    transition: none !important;
    -webkit-transition: none !important;
  }

  /* Hide Desktop Horizontal Navigation Actions on Mobile */
  .nav-actions {
    display: none !important;
  }

  /* 2. Prominent, Bigger Rotating Logo & Brand URL Name (Aesthetically Complimenting on Mobile) */
  .nav-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .brand-lockup-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    flex: 0 0 auto !important; /* ZYMATICA 2026-10-09: content-sized; the domain pill absorbs the free space */
    min-width: 0 !important;
    transition: none !important;
  }

  /* ZYMATICA 2026-10-09 (operator aesthetic directive): the solananft.art
     URL pill grows to fill the space between the brand lockup and Connect,
     with larger type so gif + URL read as one balanced lockup. */
  .sanctuary-nav .nav-domain-pill {
    flex: 1 1 0 !important;
    justify-content: center !important;
    min-width: 0 !important;
    /* ZYMATICA 2026-10-09: URL pill scales with the enlarged lockup (operator directive) */
    font-size: 1.15rem !important;
    padding: 0.48rem 0.85rem 0.48rem 0.7rem !important;
  }
  .sanctuary-nav .nav-domain-pill .nav-domain-name {
    /* ZYMATICA 2026-10-09: fluid URL size — big when there's room, shrinks gracefully
       on narrow phones so 'solananft.art' never clips (operator: URL must read clearly) */
    font-size: clamp(0.88rem, 3.1vw, 1.18rem) !important;
    letter-spacing: 0.015em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Natural Rotating 3D Logo Mark (Circle Container Removed - Crisp, Original Quality) */
  .brand-logo-icon-wrap {
    height: 96px !important;
    width: auto !important;
    min-width: 96px !important;
    max-width: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
    -webkit-transform: none !important;
    transform: none !important;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
  }

  /* Rotating 3D Holographic Animated Multi-Frame Logo Mark */
  .brand-paint-streaks-img {
    height: 96px !important;
    width: auto !important;
    min-width: 96px !important;
    max-width: none !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: block !important;
    flex-shrink: 0 !important;
    filter: none !important;
    -webkit-transform: none !important;
    transform: none !important;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    image-rendering: -webkit-optimize-contrast;
  }

  /* Commanding SolanaNft.art Typography Covering Gap Before Connect Button - 20%+ Bigger */
  .brand-logo-text-wrap {
    font-size: clamp(1.42rem, 5.6vw, 1.95rem) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -0.025em !important;
    display: inline-flex !important;
    align-items: baseline !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .brand-logo-solananft {
    color: #FFFFFF !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95), 0 0 16px rgba(255, 255, 255, 0.25) !important;
  }

  .ambient-art-text {
    margin-left: 0.04em !important;
    background-image: linear-gradient(90deg, #14F195 0%, #00F0FF 25%, #9945FF 50%, #FF007A 75%, #14F195 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: solAmbientTextChromaWave 5s linear infinite !important;
    filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.6)) !important;
  }

  /* Display Mobile Header Tools (Always Aligned to Right with Breathing Room) */
  .mobile-header-tools {
    display: inline-flex !important;
    align-items: center !important;
    /* ZYMATICA 2026-10-10 v6: gap 0.55rem -> 0.4rem — row-fit reclaim. */
    gap: 0.4rem !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    margin-right: 2px !important;  /* keep the burger off the glass edge */
  }

  /* Connect Button with Same Animated Colors as Just Minted Text
     ZYMATICA 2026-10-10 v6 (operator: "top section must fit"): 46px tall to
     match the 46px burger — the row was overflowing the viewport by 5px. */
  .mob-wallet-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    height: 46px !important;
    padding: 0 1.1rem !important;
    font-size: 1.02rem !important;
    border-radius: 9999px !important;
    /* ZYMATICA 2026-10-09 v6 (operator: "study the color animation behind
       the JUST MINTED text and apply the same animation code to the
       connect button"): verbatim .cool-gradient-text animation — same
       rainbow stops, same 200%-wide sweep, same solAmbientTextChromaWave
       keyframes at the text's 6s cadence. */
    background: linear-gradient(
      90deg,
      #14F195 0%,
      #00F0FF 16.6%,
      #9945FF 33.3%,
      #FF007A 50%,
      #FF7A00 66.6%,
      #FFD700 83.3%,
      #14F195 100%
    ) !important;
    background-size: 200% auto !important;
    animation: solAmbientTextChromaWave 6s linear infinite !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    color: #060911 !important;
    font-size: 0.82rem !important;
    font-weight: 850 !important;
    font-family: var(--font-mono) !important;
    /* ZYMATICA 2026-10-09 v3 (operator: "glow must stay within the button"):
       inset-only shadows — no outer spill onto the row. */
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    white-space: nowrap !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, filter 0.2s ease !important;
  }

  .mob-wallet-pill:active {
    transform: scale(0.96) !important;
    filter: brightness(1.15) !important;
  }

  .mob-wallet-pill.connected {
    background: linear-gradient(90deg, #14F195 0%, #00F0FF 100%) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: #060911 !important;
    box-shadow: 0 0 16px rgba(20, 241, 149, 0.5) !important;
  }

  .mob-wallet-svg {
    stroke: #060911 !important;
    stroke-width: 2.4 !important;
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
  }

  .mob-wallet-text {
    color: #060911 !important;
    font-weight: 850 !important;
    font-size: 0.82rem !important;
  }

  .mob-wallet-pill.connected .mob-wallet-svg {
    stroke: #060911 !important;
  }

  .mob-drawer-btn {
    /* ZYMATICA 2026-10-09 v3 (operator: "make the three horizontal lines a
       bit bigger too"): was 54px. ZYMATICA 2026-10-10 v6 (operator: "top
       section must fit the page — hamburger too close to the edge"):
       46px square — the row was overflowing the viewport by 5px
       (burger right at x=395 on a 390 screen, live-measured). */
    width: 46px !important;
    height: 46px !important;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    transition: all 0.2s ease;
    flex-shrink: 0;
  }
  .mob-drawer-btn svg {
    width: 28px !important;
    height: 28px !important;
    stroke-width: 2.8 !important;
  }

  .mob-drawer-btn:active {
    background: rgba(0, 240, 255, 0.2);
    border-color: rgba(0, 240, 255, 0.5);
    transform: scale(0.94);
  }

  /* 3. Solana Token Price Box: Desktop in Header, Mobile Next to Blinking Green Dot Above Just Minted */
  .desktop-price-ticker {
    display: none !important;
  }

  .radar-title-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.45rem !important;
    width: 100% !important;
  }

  /* Blinking Green Light & Solana Price Box Right Beside Each Other Above JUST MINTED */
  .radar-beacon-row {
    /* ZYMATICA 2026-10-11: badge + price capsule share this row; wrap allowed so
       the AWAITING/CONFIRMED pill never overlays the title below. */
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 0.35rem !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.85rem !important;
    width: 100% !important;
    margin-bottom: 0.25rem !important;
  }

  .mobile-price-ticker {
    /* ZYMATICA 2026-10-09 (operator directive): compact, subdued SOL ticker
       in the radar row so it stops reading as a third header element between
       the URL and Connect. Smaller capsule, no glow. */
    display: inline-flex !important;
    height: 28px !important;
    padding: 0 0.5rem !important;
    gap: 0.35rem !important;
    border-radius: 9999px !important;
    background: rgba(14, 16, 26, 0.75) !important;
    border: 1px solid rgba(0, 240, 255, 0.18) !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
    opacity: 0.82 !important;
  }

  .mobile-price-ticker .ticker-sol-icon-box {
    width: 18px !important;
    height: 18px !important;
  }

  .mobile-price-ticker .ticker-top-row {
    font-size: 0.68rem !important;
    gap: 4px !important;
  }

  .mobile-price-ticker .ticker-price {
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
  }

  .mobile-price-ticker .ticker-change-badge {
    padding: 1px 5px !important;
    font-size: 0.64rem !important;
    border-radius: 4px !important;
  }

  .radar-title-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.4rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    /* ZYMATICA 2026-10-10 v8 (operator: badge clipped at screen edge): the live
       badge ('CONFIRMED SOLANA MINTS' in live state) escaped the row — right
       edge at x=528 on a 412 viewport, live-measured. Contain the row. */
    overflow: hidden !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
  }

  .cool-live-badge {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.64rem !important;
    padding: 0.2rem 0.5rem !important;
    /* ZYMATICA 2026-10-11 (operator: "awaiting on top NEXT TO sol price"): badge
       now lives in the beacon row beside the price capsule. It shrinks with
       ellipsis to share the line: flex-shrink + a fit-to-row max so the pair
       always renders side-by-side on 360-430px devices. */
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
    min-width: 0 !important;
    max-width: calc(100vw - 210px) !important;
    height: 26px !important;
    line-height: 26px !important;
    box-sizing: border-box !important;
  }

  .radar-title-cool {
    white-space: nowrap !important;
    font-size: clamp(1rem, 4.4vw, 1.25rem) !important;
    /* v8: allow the title to yield space to the live badge instead of
       shoving it past the viewport edge. */
    flex-shrink: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .cool-gradient-text {
    white-space: nowrap !important;
  }

  /* Remove 3 Giant Horizontal Lines Watermark from Cutting Across Text & Badges on Mobile */
  .scanner-deck::before {
    display: none !important;
  }

  .scanner-deck {
    padding: 1.15rem 1rem !important;
    border-radius: 16px !important;
    margin-bottom: 1.5rem !important;
    background: #08090f !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden !important;
    -webkit-transform: none !important;
    transform: none !important;
  }

  /* Responsive Clean Stacked Official Badge - Zero Separator Clutter */
  .deck-official-badge {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px 8px !important;
    padding: 6px 12px !important;
    border-radius: 12px !important;
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: #0c0d14 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.8) !important;
    margin-bottom: 0.85rem !important;
  }

  .deck-official-badge .badge-separator {
    display: none !important;
  }

  .deck-official-badge .deck-url-text {
    color: #00F0FF !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  .deck-ambient-heading {
    font-size: 1.3rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.65rem !important;
    text-align: left !important;
    animation: none !important; /* Stop heavy text chroma repaints on mobile GPU */
    background: linear-gradient(90deg, #14F195 0%, #00F0FF 40%, #9945FF 80%, #FF007A 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    display: block !important;
  }

  .deck-lead-text.deck-ambient-lead {
    font-size: 0.86rem !important;
    line-height: 1.48 !important;
    text-align: left !important;
    animation: none !important; /* Stop heavy paragraph repaints on mobile GPU */
    background: none !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: #E2E8F0 !important;
    color: #E2E8F0 !important;
    display: block !important;
  }

  .deck-lead-text.deck-ambient-lead strong {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }

  /* Horizontal Smooth Swipe for Search Categories */
  .search-modes-bar {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 4px 0 8px 0 !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }

  .search-modes-bar::-webkit-scrollbar {
    display: none !important;
  }

  .search-mode-chip {
    flex-shrink: 0 !important;
    padding: 0.35rem 0.75rem !important;
    font-size: 0.72rem !important;
  }

  /* Competition Tabs Bar Mobile Horizontal Scroll Protection */
  .comp-tabs-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    margin: 1rem 0 !important;
  }

  .comp-tabs-bar::-webkit-scrollbar {
    display: none !important;
  }

  /* Gallery Filter Tabs Mobile Horizontal Swipe */
  .gallery-controls {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    margin-bottom: 1.25rem !important;
  }

  .gallery-controls > div {
    min-width: 100% !important;
    width: 100% !important;
  }

  .filter-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    max-width: 100% !important;
    padding: 0.35rem 0.5rem !important;
    gap: 0.4rem !important;
  }

  .filter-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .filter-tabs .tab-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 0.4rem 0.85rem !important;
    font-size: 0.78rem !important;
  }

  /* Radar Deck Mobile Polish */
  .solana-radar-deck {
    padding: 1.1rem 1rem !important;
    border-radius: 16px !important;
    margin-bottom: 1.25rem !important;
    background: #08090f !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    overflow: hidden !important;
    contain: layout style !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  .radar-header-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  .radar-stats-pills {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.35rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 62px !important;
  }

  .radar-pill {
    font-size: 0.68rem !important;
    padding: 0.25rem 0.55rem !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Mobile Just Minted Conveyor Belt: Single Card 100% Visible, Smooth Slide Right to Left */
  .radar-stream-ticker {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.35rem 0 !important;
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
    contain: size layout !important;
    transform: none !important;
  }

  .radar-stream-item {
    grid-column: 1 / -1 !important;
    grid-row: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0.55rem 0.75rem !important;
    gap: 0.75rem !important;
    border-radius: 12px !important;
    background: #000000 !important;
    border: 1px solid rgba(20, 241, 149, 0.45) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8), 0 0 14px rgba(20, 241, 149, 0.22) !important;
    height: 84px !important;
    min-height: 84px !important;
    max-height: 84px !important;
    overflow: hidden !important;
    margin: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Right-to-Left Conveyor Belt Animations on Mobile */
  .radar-stream-item.just-added,
  .radar-stream-item.realtime-block-pop,
  .radar-stream-item.dropping-down {
    animation: conveyorSlideInRightToLeft 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards, justMintedGlow 2.5s ease-out !important;
    z-index: 2 !important;
  }

  .radar-stream-item.exiting {
    animation: conveyorExitToLeft 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  @keyframes conveyorSlideInRightToLeft {
    0% {
      opacity: 0;
      transform: translateX(85px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes conveyorExitToLeft {
    0% {
      opacity: 1;
      transform: translateX(0);
    }
    100% {
      opacity: 0;
      transform: translateX(-85px);
    }
  }

  /* Bigger NFT Image Thumbnail on Mobile */
  .radar-stream-item .radar-thumb-wrap {
    width: 66px !important;
    height: 66px !important;
    min-width: 66px !important;
    min-height: 66px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
  }

  /* Bigger & Bolder Text Inside Card on Mobile */
  .radar-stream-item .radar-item-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    min-width: 0 !important;
    flex: 1 !important;
    overflow: hidden !important;
  }

  .radar-stream-item .radar-item-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.4rem !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .radar-stream-item .radar-item-tag {
    font-size: 0.74rem !important;
    padding: 2px 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 68% !important;
  }

  .radar-stream-item .radar-tag-text {
    font-size: 0.76rem !important;
    font-weight: 850 !important;
  }

  .radar-stream-item .radar-item-time {
    font-size: 0.74rem !important;
    font-weight: 750 !important;
    color: var(--sol-cyan) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .radar-stream-item .radar-item-title {
    font-size: 1.08rem !important;
    font-weight: 850 !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
  }

  .radar-stream-item .radar-item-inspect-hint {
    font-size: 1.05rem !important;
    color: var(--sol-cyan) !important;
    flex-shrink: 0 !important;
    margin-left: 0.2rem !important;
    padding-right: 0.1rem !important;
  }
}

/* Ultra-Compact Screens (Under 390px - iPhone SE / Mini / Small Androids) */
@media (max-width: 390px) {
  .brand-logo-icon-wrap,
  .brand-paint-streaks-img {
    height: 72px !important;
    width: auto !important;
    min-width: 72px !important;
    max-width: none !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .brand-logo-text-wrap {
    font-size: 1.62rem !important;
  }

  .mob-wallet-text {
    display: inline !important;
    font-size: 0.74rem !important;
  }

  .mob-wallet-pill {
    padding: 0 10px !important;
    height: 36px !important;
  }

  .radar-title-wrap .sol-price-ticker {
    margin-left: 0 !important;
    width: auto !important;
    max-width: fit-content !important;
    justify-content: flex-start !important;
  }
}

/* Header brand sizing and spacing. Keep these overrides out of the footer. */
@media (min-width: 769px) {
  .sanctuary-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .sanctuary-nav .nav-brand {
    display: flex !important;
    align-items: center !important;
    gap: clamp(0.35rem, 0.8vw, 0.65rem) !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
  }

  .sanctuary-nav .brand-lockup-link {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  .sanctuary-nav .brand-logo-icon-wrap {
    min-width: clamp(96px, 7vw, 128px);
    width: auto;
    height: clamp(96px, 7vw, 128px);
    flex-shrink: 0;
    /* ZYMATICA 2026-10-11 v10 (operator: "move both left a bit"): the lockup-level
       -12px shift (brand-lockup-link, all viewports) now carries the alignment;
       this per-face cancel is retired so the two shifts don't stack off-screen. */
    margin-left: 0;
  }

  .sanctuary-nav .brand-paint-streaks-img {
    height: clamp(96px, 7vw, 128px);
    width: auto;
    flex-shrink: 0;
  }

  .sanctuary-nav .brand-logo-text-wrap {
    font-size: clamp(1.6rem, 2vw, 2.35rem);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .sanctuary-nav .nav-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
    gap: clamp(0.3rem, 0.45vw, 0.5rem) !important;
  }
}

@media (max-width: 768px) {
  .sanctuary-nav {
    gap: 6px !important;
  }

  .sanctuary-nav .nav-brand {
    flex: 1 1 auto !important;
  }

  .sanctuary-nav .brand-lockup-link {
    gap: 2px !important;
    /* ZYMATICA 2026-10-09 v2 (operator correction): the lockup IS the brand —
       rotating gif + "SolanaNft" white + animated .art wordmark. It flex-fills
       the phone header. The green-dot URL pill is REMOVED on phones. */
    flex: 1 1 auto !important;
  }

  /* Green-dot solananft.art pill: GONE on phones (operator: "get rid of that") */
  .sanctuary-nav .nav-domain-pill {
    display: none !important;
  }

  .sanctuary-nav .brand-logo-text-wrap {
    /* ZYMATICA 2026-10-09 v2: the wordmark is the URL — white SolanaNft with the
       animated chroma .art. Big, per operator: gif+wordmark are the brand. */
    font-size: clamp(1.5rem, 6.4vw, 2.15rem) !important;
    /* ZYMATICA 2026-10-10 v5 (operator: "move the URL closer to the rotating
       gif face"): negative margin pulls the wordmark over the GIF frame's own
       transparent padding — the visible face edge sits closer to the text. */
    margin-left: -8px !important;
  }

  .sanctuary-nav .mobile-header-tools {
    /* ZYMATICA 2026-10-09 v4 (operator: "connect button detached from the
       hamburger"): visible separation between the two pills. */
    gap: 12px !important;
    flex: 0 0 auto !important;
    min-width: 0;
    margin-left: 0 !important;
  }

  .sanctuary-nav .mob-wallet-pill {
    padding: 0 0.5rem !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* WebKit paints this offscreen glow over the ticker on iOS. */
  .ai-hiring-title {
    filter: none !important;
  }
}

@media (max-width: 360px) {
  .sanctuary-nav .brand-logo-icon-wrap,
  .sanctuary-nav .brand-paint-streaks-img {
    height: 40px !important;
    min-width: 40px !important;
  }

  .sanctuary-nav .brand-logo-text-wrap {
    font-size: 1rem !important;
  }

  .sanctuary-nav .mob-wallet-svg {
    display: none !important;
  }
}

/* ==========================================================================
   3. Floating Glassmorphic Bottom Navigation Dock
   ========================================================================== */
.mobile-bottom-dock {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: rgba(6, 7, 11, 0.94);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.85);
  padding: 6px 10px max(8px, env(safe-area-inset-bottom)) 10px;
  display: none;
  align-items: center;
  justify-content: space-around;
  -webkit-transform: none !important;
  transform: none !important;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@media (max-width: 768px) {
  .mobile-bottom-dock {
    display: flex;
    /* ZYMATICA 2026-10-11 (operator: "this part is glitching" — the zone under
       the dock): backdrop-filter: blur(28px) re-composites every frame against
       scrolling content on mobile GPUs — the classic under-dock shimmer. Same
       bug class as the drawer blur (removed 2026-10-09 for the same reason).
       Opaque background + own GPU layer instead. */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(6, 7, 11, 0.99) !important;
    will-change: auto;
    transform: translateZ(0);
  }
}

.mob-dock-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: #7b8092;
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s ease;
}

.mob-dock-item:active {
  transform: scale(0.92);
}

.mob-dock-item.active {
  color: #00F0FF;
}

.mob-dock-icon-box {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mob-dock-label {
  font-size: 0.64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--font-body);
}

/* Center Elevated Mint Button (FAB) */
.mob-dock-mint-fab {
  position: relative;
  margin-top: -24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  flex-shrink: 0;
}

.mob-dock-fab-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #14F195 0%, #00F0FF 45%, #9945FF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.65), 0 4px 15px rgba(0, 0, 0, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

.mob-dock-mint-fab:active .mob-dock-fab-circle {
  transform: scale(0.92);
  box-shadow: 0 0 28px rgba(20, 241, 149, 0.85);
}

.mob-dock-fab-label {
  font-size: 0.62rem;
  font-weight: 800;
  color: #14F195;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--font-body);
}

/* ==========================================================================
   4. Mobile Studio Action Sheet Modal (Slide-Up Drawer)
   ========================================================================== */
.mobile-action-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 10005;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.mobile-action-sheet-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.mobile-action-sheet {
  background: #090a10;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px 24px 0 0;
  padding: 1rem 1.15rem max(20px, env(safe-area-inset-bottom)) 1.15rem;
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.95);
}

.mobile-action-sheet-overlay.active .mobile-action-sheet {
  transform: translateY(0);
}

.mobile-sheet-drag-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.25);
  margin: 0 auto 0.95rem auto;
}

.mobile-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.15rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-sheet-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.mobile-sheet-logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.5));
}

.mobile-sheet-title {
  font-size: 1.22rem;
  font-weight: 850;
  color: #FFFFFF;
  font-family: var(--font-body);
}

.mobile-sheet-badge {
  font-size: 0.65rem;
  background: rgba(0, 240, 255, 0.15);
  color: #00F0FF;
  border: 1px solid rgba(0, 240, 255, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-family: var(--font-mono);
  margin-left: 4px;
  vertical-align: 2px;
}

.mobile-sheet-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

.mobile-sheet-actions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}

.mobile-sheet-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  text-decoration: none;
  color: #FFFFFF;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  touch-action: manipulation;
  width: 100%;
}

.mobile-sheet-card:active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(0, 240, 255, 0.4);
  transform: scale(0.98);
}

.sheet-card-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wallet-icon-glow {
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--sol-cyan);
}

.list-icon-glow {
  background: rgba(20, 241, 149, 0.12);
  border: 1px solid rgba(20, 241, 149, 0.3);
  color: var(--sol-green);
}

.pack-icon-glow {
  background: rgba(153, 69, 255, 0.12);
  border: 1px solid rgba(153, 69, 255, 0.3);
  color: var(--sol-purple);
}

.awards-icon-glow {
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.3);
  color: var(--sol-gold);
}

.hiring-icon-glow,
.docs-icon-glow {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.sheet-card-info {
  flex: 1;
  min-width: 0;
}

.sheet-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
}

.sheet-card-sub {
  font-size: 0.74rem;
  color: #888888;
  margin-top: 2px;
}

.sheet-card-arrow {
  color: #555555;
  font-size: 1.1rem;
}

.mobile-sheet-footer {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.65rem;
  color: #777777;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   5. Mobile Grid, Cards & Component Refinements
   ========================================================================== */
@media (max-width: 600px) {
  /* Gallery Grid & Masterwork Cards */
  .gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 1.15rem !important;
    touch-action: pan-y pinch-zoom !important;
  }

  .art-card {
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #090a10 !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    content-visibility: visible !important;
    contain: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto !important;
    touch-action: pan-y pinch-zoom !important;
    transition: border-color 0.2s ease;
  }

  .art-card:hover,
  .art-card:active {
    transform: none !important;
    -webkit-transform: none !important;
  }

  .art-card:hover .card-media-wrap img,
  .art-card:hover .card-media-wrap video,
  .art-card:active .card-media-wrap img,
  .art-card:active .card-media-wrap video {
    transform: none !important;
    -webkit-transform: none !important;
    filter: none !important;
    will-change: auto !important;
    transition: none !important;
  }

  .card-media-wrap {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
    touch-action: pan-y pinch-zoom !important;
    contain: layout paint !important;
  }

  .card-media-wrap img,
  .card-media-wrap video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    will-change: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  /* Strict Buy Button Full-Width Touch Target */
  .btn-card-buy {
    min-height: 42px !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    touch-action: manipulation;
  }

  /* Scanner Hero Deck on Mobile */
  .deck-ambient-heading {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    animation: none !important;
  }

  .deck-ambient-lead {
    font-size: 0.85rem !important;
    animation: none !important;
  }

  .deck-official-badge {
    font-size: 0.68rem !important;
    flex-wrap: wrap !important;
  }

  /* Search Input & Search Group on Mobile (16px to prevent iOS Safari auto-zoom) */
  .search-input-group {
    flex-direction: column !important;
    gap: 0.65rem !important;
  }

  .search-input-group .input-wrapper {
    width: 100% !important;
  }

  .input-field.omni-search {
    font-size: 16px !important;
    height: 48px !important;
    padding-left: 2.85rem !important;
  }

  #btn-scan-wallet {
    width: 100% !important;
    height: 46px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 0.95rem !important;
    touch-action: manipulation;
  }

  .search-modes-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
    flex-wrap: nowrap !important;
  }

  .search-mode-chip {
    flex-shrink: 0 !important;
  }

  /* Radar Deck on Mobile */
  .radar-header-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }

  .radar-stats-pills {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.35rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 62px !important;
  }

  .radar-pill {
    font-size: 0.68rem !important;
    padding: 0.25rem 0.55rem !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .radar-stream-ticker {
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow: hidden !important;
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
    contain: size layout !important;
  }

  /* AI Jury Section on Mobile */
  .jury-headline-box h2 {
    font-size: 1.35rem !important;
  }

  /* Modals on Mobile Viewports */
  .modal-dialog {
    width: 95% !important;
    max-width: 95% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 18px !important;
  }

  .modal-header {
    padding: 0.85rem 1rem !important;
  }

  .modal-body {
    padding: 1rem !important;
  }
}

/* Persistent Header Back Pill */
.nav-back-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.9rem;
  background: rgba(20, 241, 149, 0.08);
  border: 1px solid rgba(20, 241, 149, 0.35);
  border-radius: 9999px;
  color: var(--sol-green, #14F195);
  text-decoration: none;
  font-family: var(--font-mono, monospace);
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.nav-back-pill:hover, .nav-back-pill:active {
  background: rgba(20, 241, 149, 0.2);
  border-color: var(--sol-green, #14F195);
  color: #ffffff;
  transform: translateX(-2px);
}

/* Touch scrolling: fixed translucent surfaces and sticky hover effects caused
   full-width repaints over every moving image. Keep the mobile chrome opaque. */
@media (max-width: 768px), (pointer: coarse) {
  .mobile-bottom-dock {
    background: #06070b;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 -1px 0 rgba(255,255,255,.12);
  }
  .art-card,
  .art-card:hover,
  .card-media-wrap img,
  .card-media-wrap video {
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }
  .art-card:hover .hover-overlay-btn { opacity: 0; pointer-events: none; }
  .sanctuary-nav *, .sanctuary-nav *::before, .sanctuary-nav *::after,
  .mobile-bottom-dock *, .mobile-bottom-dock *::before, .mobile-bottom-dock *::after {
    animation: none !important;
    filter: none !important;
    transition: none !important;
  }
  /* ZYMATICA FIX 2026-10-09 (operator directive): the animated .art brand text
     is a core brand element — it must keep its chroma wave on phones. Exempt
     it (and the rotating brand mark) from the mobile GPU-repaint freeze. */
  .sanctuary-nav .ambient-art-text {
    animation: solAmbientTextChromaWave 5s linear infinite !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }
  .sanctuary-nav .brand-paint-streaks-img {
    animation: none !important; /* GIF animates itself */
  }
  /* ZYMATICA 2026-10-09 v3: the Connect pill's orange-yellow chroma wave is
     also exempted (operator wants the animated colors visible). */
  .sanctuary-nav .mob-wallet-pill {
    animation: solAmbientTextChromaWave 6s linear infinite !important;
  }
  .gallery-grid { min-width: 0; }
  .art-card { min-width: 0; }
  .card-details-row { flex-wrap: wrap; gap: .35rem; }
}
#gallery-feed-status { color: var(--text-muted); font-size: .82rem; min-height: 2.5em; margin: .5rem 0 1rem; }
.gallery-loading-slot { aspect-ratio: 1 / 1; min-width: 0; border-radius: 16px; background: #090a10; border: 1px solid var(--border-glass); }
@media (prefers-reduced-motion: reduce) {
  .art-card, .rotation-progress-bar { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   ZYMATICA 2026-10-09 (Agent 02) — Connect cluster centered in the header gap.
   Operator: "connect button moved more to the left so it's centered
   correctly in between the solananft.art [wordmark and the screen edge]".
   The brand box was stretching invisible (flex:1) and pinning Connect to
   the far edge. Content-size the brand, then auto-margins center the
   Connect+drawer cluster in the remaining free space.
   ========================================================================== */
@media (max-width: 768px) {
  .sanctuary-nav .nav-brand {
    flex: 0 0 auto !important;   /* content-sized: gif + wordmark only */
  }
  .sanctuary-nav .brand-lockup-link {
    flex: 0 0 auto !important;   /* no invisible stretch inside the brand */
  }
  .sanctuary-nav .mobile-header-tools {
    flex: 0 0 auto !important;
    margin-left: auto !important;   /* free space splits evenly both sides */
    margin-right: auto !important;  /* -> cluster centered in the gap */
  }
}

/* ==========================================================================
   ZYMATICA 2026-10-09 (Agent 02) — Filter box: themed + animated chroma ring.
   Operator: "fix that ugly white old-school looking filter box — make it the
   same as the connect button animation." The #search-filter-input had NO
   themed rule (browser-default white input = the "old school" look). Now it
   gets the platform's dark glass style with the SAME solAmbientTextChromaWave
   rainbow as the Connect pill / JUST MINTED text, applied as an animated
   gradient border so the placeholder text stays readable. The same keyframes
   sweep background-position; the ring is a padding+clip trick so the glow
   never bleeds inward.
   ========================================================================== */
#search-filter-input {
  width: 100%;
  height: 48px;
  padding: 0.5rem 1.1rem;
  font-size: 0.85rem;
  font-family: var(--font-body);
  color: #ffffff;
  border-radius: 9999px;
  background: #111111;
  outline: none;
  box-sizing: border-box;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
  transition: box-shadow 0.25s ease, background 0.25s ease;
  /* animated rainbow ring — same stops/keyframes as the Connect pill */
  border: 2px solid transparent;
  background-clip: padding-box;
  background-image: linear-gradient(#111111, #111111),
    linear-gradient(90deg,
      #14F195 0%,
      #00F0FF 16.6%,
      #9945FF 33.3%,
      #FF007A 50%,
      #FF7A00 66.6%,
      #FFD700 83.3%,
      #14F195 100%);
  background-origin: border-box;
  background-size: 100% 100%, 200% auto;
  animation: solAmbientTextChromaWave 6s linear infinite;
}

#search-filter-input::placeholder {
  color: #72748a;
  font-size: 0.82rem;
}

#search-filter-input:focus {
  background-image: linear-gradient(#141414, #141414),
    linear-gradient(90deg,
      #14F195 0%,
      #00F0FF 16.6%,
      #9945FF 33.3%,
      #FF007A 50%,
      #FF7A00 66.6%,
      #FFD700 83.3%,
      #14F195 100%);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   ZYMATICA 2026-10-09 (Agent 02) — Mobile drawer glitch + page jank root fix.
   Diagnosis (live, headless Chromium @ 505 CSS px, rAF instrumentation):
     - baseline frame time ~196ms (≈5 FPS) on a mid-tier phone profile
     - with all CSS animations paused: ~195ms
     - with animations paused AND all 68 backdrop-filter blur regions
       disabled: ~52ms/frame — the backdrop-filters are ~75% of the cost
     - the drawer's 0.32s slide rendered only 2-3 discrete positions
       (y=557 held for ~560ms, then jumped) = the visible "glitch"
   Fixes:
     1. Sheet overlay: drop backdrop-filter (rgba(0,0,0,0.8) alone is
        visually equivalent over a dark site) — kills a full-screen
        blur region during the transition.
     2. Sheet panel: promote to its own compositor layer
        (will-change: transform) so the slide animates on the GPU,
        independent of the busy main thread.
     3. Paint containment: content-visibility + contain so the huge
        page under the sheet stops repainting into it.
     4. Palette-scope the freeze: the heavy .sanctuary-nav* freeze
        already exempts brand elements; nothing else changes.
   ========================================================================== */
@media (max-width: 768px) {
  /* 1 — overlay: no blur (main-thread blur was the glitch amplifier) */
  .mobile-action-sheet-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.82) !important;
  }

  /* 2+3 — panel: GPU layer + contained paint.
     content-visibility: auto REMOVED (measured live: it re-measures the
     containment box every frame and fought the GPU slide — 2-step glitch
     persisted with it, smooth-er without it). */
  .mobile-action-sheet {
    will-change: transform !important;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    contain: paint !important;
  }
  .mobile-action-sheet-overlay.active .mobile-action-sheet {
    transform: translateY(0);
    /* keep the compositor layer THROUGH the slide — releasing it on .active
       demoted the panel back to main-thread mid-transition (measured: 2-step
       glitch persisted). The layer is cheap while the sheet is open. */
    will-change: transform !important;
  }
}

/* ==========================================================================
   ZYMATICA 2026-10-11 (Agent 02) — ANDROID CHROME COMPOSITOR LAW
   Operator: "bottom of Android using Chrome is glitching; hamburger glitches
   when opened". Android Chrome re-composites backdrop-filter surfaces against
   scrolling content every frame — 60+ blurred surfaces on this page = shimmer
   under the dock, under the sheet, near the bottom. One blanket rule kills the
   entire class on mobile: no element blurs its backdrop at <=768px. Blur stays
   on desktop where compositors handle it.
   ========================================================================== */
@media (max-width: 768px) {
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* explicit: the modal overlays too (inline-style survivors lose to !important) */
  .modal-overlay, .mobile-action-sheet, .mobile-action-sheet-overlay, .sanctuary-nav, .mobile-bottom-dock {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ==========================================================================
   ZYMATICA 2026-10-09 (Agent 02) — gmgn.ai-style gallery: dense 2-column
   mobile grid + compact cards + live-arrival pulse.
   Operator: "two nft display cards per column per scroll... shrinking should
   increase speed just like gmgn.ai". Also styles the new sort-chips row.
   ========================================================================== */
@media (max-width: 768px) {
  /* Dense 2-per-row grid (was single column) — doubles visible mints per scroll */
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
  }

  /* ZYMATICA CORRECTION 2026-10-09 (operator: "Don't change my NFT display card
     layout — just shrink them and display two per row instead of one"):
     ALL original card content stays visible — details row, rubric pills,
     price, action buttons — only SHRUNK to fit the dense 2-per-row grid. */
  .art-card .card-media-wrap {
    aspect-ratio: 1 / 1.02 !important;
  }
  .art-card .card-content {
    padding: 0.4rem 0.5rem 0.5rem !important;
    gap: 0.18rem !important;
  }
  .art-card .card-title, .art-card .nft-title {
    font-size: 0.76rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .art-card .card-artist {
    font-size: 0.62rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .art-card .card-details-row {
    padding: 0.3rem 0.4rem !important;
    gap: 0.25rem !important;
    font-size: 0.62rem !important;
  }
  .art-card .card-rubric-pills,
  .art-card .card-market-actions,
  .art-card .card-actions {
    font-size: 0.62rem !important;
    gap: 0.3rem !important;
  }
  .art-card .card-actions .btn-card-buy,
  .art-card .card-actions .btn-card-offer,
  .art-card .card-actions .btn-card-vault-offer {
    font-size: 0.66rem !important;
    padding: 0.24rem 0.5rem !important;
  }
  .art-card .card-price-container {
    margin-top: 0.15rem !important;
  }
  .art-card .card-price-tag {
    font-size: 0.72rem !important;
  }

  /* Live-arrival pulse: freshly prepended mints flash the mint-green ring */
  .art-card.card-fresh {
    animation: freshMintPulse 1.6s cubic-bezier(0.16, 1, 0.3, 1) 1;
  }
  @keyframes freshMintPulse {
    0% { box-shadow: 0 0 0 0 rgba(20, 241, 149, 0.75); border-color: rgba(20, 241, 149, 0.9); }
    100% { box-shadow: 0 0 0 14px rgba(20, 241, 149, 0); border-color: rgba(255, 255, 255, 0.09); }
  }
}

/* Sort chips row (gmgn-style compact control strip) */
.sort-chips-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.1rem 0;
}
.sort-chips-label {
  color: var(--text-muted, #72748a);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 0.15rem;
}
.sort-chip {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #cfd3e1;
  border-radius: 9999px;
  padding: 0.32rem 0.8rem;
  font-size: 0.74rem;
  font-family: var(--font-body, inherit);
  cursor: pointer;
  transition: all 0.2s ease;
}
.sort-chip:hover { border-color: rgba(0, 240, 255, 0.5); color: #fff; }
.sort-chip.active {
  background: rgba(0, 240, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.55);
  color: #fff;
  font-weight: 700;
}

@media (max-width: 768px) {
  .sort-chips-row { gap: 0.3rem; margin-bottom: 0.8rem; }
  .sort-chip { padding: 0.26rem 0.62rem; font-size: 0.68rem; }
}

/* ZYMATICA 2026-10-09 — static face logo on the Load More button (884B webp frame from the
   rotating brand gif), 22px circular matching the header avatar treatment. */
.btn-face-static-logo {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* ==========================================================================
   ZYMATICA 2026-10-10 (Agent 02) — page-fit clamp + card action wrap.
   Operator: "website now appears not fitted appropriately to the screen".
   Live-measured at 390px: layout viewport expands to 404px (14px overflow) —
   .card-market-actions rows overhang their 2-per-row cards by ~27px and drag
   the whole page wide. Fixes live-verified in the browser: the overflow clamp
   snaps the layout viewport 404->390; flex-wrap keeps the action rows inside
   the card. Also: the scroll GPU-freeze strips the .art drop-shadow (measured:
   filter frozen to none mid-scroll) — exempt the brand text (the animated .art
   IS the brand) so the lockup keeps its glow while scrolling.
   ========================================================================== */
@media (max-width: 768px), (pointer: coarse) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  .art-card .card-price-container {
    /* THE overflow mechanism (live-measured): price-container is a nowrap flex
       row — price tag + actions row overflow their 161px box by ~48px, escaping
       the card. Wrap it: overhang measured 10 rows -> 0 on prod injection. */
    flex-wrap: wrap !important;
  }
  .art-card .card-price-container .card-market-actions {
    margin-left: 0 !important;
    max-width: 100% !important;
  }
  .art-card .card-details-row,
  .art-card .card-market-actions,
  .art-card .card-actions,
  .art-card .card-rubric-pills {
    flex-wrap: wrap !important;
    max-width: 100% !important;
  }
  .sanctuary-nav .ambient-art-text {
    filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.6)) !important;
  }
}