/* ==========================================================================

   Watch & Earn / Demo PTC - Vibrant Gamified Cosmic 3D Design System

   Theme: Midnight Cosmic Indigo (#0E0C22) + Liquid Sunset Lava (#FF6738)

          + Dreamy Pastel Lavender (#A78BFA / #C4B5FD) + Neon Mint (#34D399)

          + Sunny Gold (#FBBF24) + Peach Salmon (#FFD7C9)

   Matches the exact visual UI/UX identity of the reference app.

   ========================================================================== */



@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800;900&display=swap');



:root {

  /* Core Cosmic Color Tokens */

  --bg-page: #0E0C22;

  --bg-surface: #130F2C;

  --bg-card: #181335;

  --bg-card-solid: #1A1438;

  --bg-card-subtle: #201A42;

  --bg-input: #15102E;



  /* Brand Accents */

  --brand-orange: #FF6738;

  --brand-orange-hover: #FF5226;

  --brand-orange-dark: #E64215;

  --brand-orange-light: rgba(255, 103, 56, 0.16);



  --brand-lavender: #A78BFA;

  --brand-lavender-light: #C4B5FD;

  --brand-lavender-subtle: rgba(167, 139, 250, 0.15);

  --brand-purple: #8B5CF6;

  --brand-purple-deep: #372E56;



  --brand-mint: #34D399;

  --brand-mint-light: #6EE7B7;

  --brand-mint-dark: #0A4837;



  --brand-gold: #FBBF24;

  --brand-amber: #F59E0B;



  --brand-peach: #FFD7C9;

  --brand-peach-dark: #EA5837;



  /* Typography Colors */

  --text-main: #FFFFFF;

  --text-body: #E2DCF3;

  --text-muted: #A79CC4;

  --text-light: #8376A5;

  --text-orange: #FF8B5D;

  --text-white: #FFFFFF;



  /* Borders & Glowing Outlines */

  --border-subtle: rgba(167, 139, 250, 0.18);

  --border-card: rgba(167, 139, 250, 0.25);

  --border-card-glow: rgba(255, 103, 56, 0.65);

  --border-focus: #FF6738;



  /* Elevation Shadows & Glows */

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45);

  --shadow-md: 0 10px 28px -4px rgba(7, 5, 20, 0.7);

  --shadow-lg: 0 18px 40px -6px rgba(5, 3, 16, 0.85);

  --shadow-button: 0 8px 24px -4px rgba(255, 103, 56, 0.45);

  --shadow-card-glow: 0 0 24px -2px rgba(167, 139, 250, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12);

  --shadow-accent: 0 6px 20px rgba(255, 103, 56, 0.35);



  /* Gradients */

  --gradient-brand: linear-gradient(135deg, #FF6738 0%, #FF451A 100%);

  --gradient-brand-hover: linear-gradient(135deg, #FF7B4F 0%, #E6380D 100%);

  --gradient-accent: linear-gradient(135deg, #FF6738 0%, #EA580C 100%);

  --gradient-header-bar: linear-gradient(135deg, #1C153B 0%, #110D27 100%);

  --gradient-cosmic-glow: radial-gradient(ellipse 80% 55% at 50% -15%, rgba(139, 92, 246, 0.32), rgba(255, 103, 56, 0.2), transparent 70%);



  /* Remapped Legacy tokens for full backward compatibility */

  --brand-violet: #FF6738;

  --brand-violet-hover: #FF5226;

  --brand-violet-light: rgba(255, 103, 56, 0.16);

  --deep-violet: #FFFFFF;

  --deep-violet-dark: #FF451A;

  --deep-violet-light: rgba(255, 103, 56, 0.15);

  --accent-magenta: #FF6738;

  --accent-magenta-hover: #FF5226;

  --accent-magenta-light: rgba(255, 103, 56, 0.18);

  --soft-lilac: rgba(167, 139, 250, 0.18);

  --soft-lilac-border: rgba(167, 139, 250, 0.35);

  --mist: #1A1438;

  --mist-border: rgba(167, 139, 250, 0.22);

  --brand-red: #FF451A;

  --brand-red-dark: #C22A04;

  --accent-amber: #FBBF24;

}



/* ==========================================================================

   Base Styles & Resets

   ========================================================================== */

* {

  box-sizing: border-box;

}



body {

  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;

  background-color: var(--bg-page);

  color: var(--text-body);

  min-height: 100vh;

  margin: 0;

  padding: 0;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



h1, h2, h3, h4, h5, h6, .font-heading {

  font-family: 'Fredoka', 'Nunito', sans-serif;

  color: var(--text-white);

  letter-spacing: -0.02em;

}



/* Top Ambient Cosmic Glow */

.ambient-header-glow {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 420px;

  background: var(--gradient-cosmic-glow);

  pointer-events: none;

  z-index: 0;

}



/* ==========================================================================

   Signature Hero Cards from Reference Image

   ========================================================================== */



/* Card 1: Available Balance (Exact SVG Liquid Lava Waves & Swirls) */

.card-wave-balance {

  position: relative;

  border-radius: 28px;

  overflow: hidden;

  background-color: #241442;

  background-image: url('../images/card1-bg.svg');

  background-position: center center;

  background-size: 100% 100%;

  background-repeat: no-repeat;

  box-shadow: 0 14px 34px -6px rgba(17, 12, 38, 0.8), 0 0 24px -2px rgba(255, 103, 56, 0.35);

  border: 1px solid rgba(255, 255, 255, 0.12);

  transition: transform 0.25s ease, box-shadow 0.25s ease;

}



.card-wave-balance:hover {

  transform: translateY(-2px);

  box-shadow: 0 18px 40px -6px rgba(17, 12, 38, 0.9), 0 0 30px -2px rgba(255, 103, 56, 0.45);

}



/* Card 2: Total Withdrawn (Exact SVG Rolling Lavender Waves) */

.card-wave-withdrawn {

  position: relative;

  border-radius: 28px;

  overflow: hidden;

  background-color: #553888;

  background-image: url('../images/card2-bg.svg');

  background-position: center center;

  background-size: 100% 100%;

  background-repeat: no-repeat;

  box-shadow: 0 14px 34px -6px rgba(17, 12, 38, 0.8), 0 0 24px -2px rgba(167, 139, 250, 0.35);

  border: 1px solid rgba(255, 255, 255, 0.22);

  transition: transform 0.25s ease, box-shadow 0.25s ease;

}



.card-wave-withdrawn:hover {

  transform: translateY(-2px);

  box-shadow: 0 18px 40px -6px rgba(17, 12, 38, 0.9), 0 0 30px -2px rgba(167, 139, 250, 0.45);

}



/* Card 3: Today's Ads Progress (Exact SVG Cosmic Night Hill & Stars) */

.card-starry-ads {

  position: relative;

  border-radius: 28px;

  overflow: hidden;

  background-color: #120E2E;

  background-image: url('../images/card3-bg.svg');

  background-position: center center;

  background-size: 100% 100%;

  background-repeat: no-repeat;

  box-shadow: 0 14px 34px -6px rgba(17, 12, 38, 0.8), 0 0 24px -2px rgba(139, 92, 246, 0.25);

  border: 1px solid rgba(167, 139, 250, 0.2);

  transition: transform 0.25s ease, box-shadow 0.25s ease;

}



.card-starry-ads:hover {

  transform: translateY(-2px);

  box-shadow: 0 18px 40px -6px rgba(17, 12, 38, 0.9), 0 0 28px -2px rgba(139, 92, 246, 0.35);

}



/* General Cosmic Card Component */

.saas-card,

.glass-card {

  background: var(--bg-card);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  border: 1px solid var(--border-card);

  border-radius: 1.5rem;

  box-shadow: 0 10px 30px -5px rgba(7, 5, 20, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);

  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

}



.saas-card:hover,

.glass-card:hover {

  border-color: rgba(167, 139, 250, 0.45);

  box-shadow: 0 14px 36px -4px rgba(7, 5, 20, 0.75), 0 0 25px -2px rgba(167, 139, 250, 0.22);

}



.saas-card-subtle {

  background: var(--bg-card-subtle);

  border: 1px solid var(--border-subtle);

  border-radius: 1.25rem;

}



/* Stat Card Hero Fallback */

.glow-card-hero {

  background: var(--bg-card);

  border: 1px solid var(--border-card);

  border-radius: 1.75rem;

  box-shadow: 0 12px 32px -4px rgba(7, 5, 20, 0.7), 0 0 22px -2px rgba(167, 139, 250, 0.2);

  position: relative;

  overflow: hidden;

  transition: all 0.25s ease;

}



.glow-card-hero:hover {

  border-color: var(--brand-orange);

  transform: translateY(-2px);

}



/* ==========================================================================

   Buttons (Signature Orange Pill, Squircle Purple & Peach Circular)

   ========================================================================== */



/* Signature Vibrant Orange Pill Button */

.btn-primary,

.btn-royal,

.btn-fiery,

.btn-pill-orange {

  background: linear-gradient(135deg, #FF6738 0%, #FF451A 100%) !important;

  color: #FFFFFF !important;

  font-weight: 800;

  border: none;

  border-radius: 9999px;

  box-shadow: 0 8px 22px -4px rgba(255, 103, 56, 0.5);

  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);

}



.btn-primary:hover,

.btn-royal:hover,

.btn-fiery:hover,

.btn-pill-orange:hover {

  background: linear-gradient(135deg, #FF7B4F 0%, #E6380D 100%) !important;

  box-shadow: 0 10px 28px -2px rgba(255, 103, 56, 0.65);

  transform: translateY(-1.5px) scale(1.02);

}



.btn-primary:active,

.btn-royal:active,

.btn-fiery:active,

.btn-pill-orange:active {

  transform: translateY(0) scale(0.98);

}



/* Squircle Purple Menu & Icon Button */

.btn-squircle-purple {

  background: #372E56;

  border: 1px solid rgba(167, 139, 250, 0.35);

  border-radius: 1.15rem;

  color: #E2D9FC;

  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 4px 14px rgba(0, 0, 0, 0.35);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.2s ease;

}



.btn-squircle-purple:hover {

  background: #463B6E;

  color: #FFFFFF;

  border-color: rgba(167, 139, 250, 0.6);

  transform: scale(1.04);

}



/* Circular Peach Notification Bell Button */

.btn-circle-peach {

  background: linear-gradient(180deg, #FFE2D6 0%, #FFCDBE 100%);

  border-radius: 9999px;

  color: #EA5837;

  box-shadow: 0 4px 14px rgba(255, 103, 56, 0.25);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  position: relative;

  cursor: pointer;

  transition: all 0.2s ease;

}



.btn-circle-peach:hover {

  background: linear-gradient(180deg, #FFF0E8 0%, #FFDACD 100%);

  transform: scale(1.05);

  box-shadow: 0 6px 18px rgba(255, 103, 56, 0.35);

}



.btn-secondary {

  background: rgba(32, 26, 66, 0.7);

  color: #FFFFFF !important;

  border: 1px solid rgba(167, 139, 250, 0.35);

  font-weight: 700;

  border-radius: 9999px;

  transition: all 0.2s ease;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  backdrop-filter: blur(10px);

}



.btn-secondary:hover {

  background: rgba(167, 139, 250, 0.2);

  border-color: rgba(167, 139, 250, 0.6);

  box-shadow: 0 0 15px rgba(167, 139, 250, 0.3);

}



.btn-accent,

.btn-cyan {

  background: var(--gradient-brand);

  color: #FFFFFF !important;

  font-weight: 700;

  border-radius: 9999px;

  box-shadow: var(--shadow-accent);

  transition: all 0.2s ease;

}



.btn-outline-royal {

  background: transparent;

  color: #FF8B5D !important;

  border: 1.5px solid rgba(255, 103, 56, 0.5);

  font-weight: 700;

  border-radius: 9999px;

  transition: all 0.2s ease;

}



.btn-outline-royal:hover {

  background: rgba(255, 103, 56, 0.15);

  border-color: #FF6738;

}



/* ==========================================================================

   Badges (Mint Green Verified, Amber Pending, Instant)

   ========================================================================== */

.badge-verified {

  background-color: #52E3B6;

  color: #064E3B;

  font-weight: 800;

  border-radius: 9999px;

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  padding: 0.25rem 0.75rem;

  font-size: 0.75rem;

  box-shadow: 0 2px 8px rgba(82, 227, 182, 0.3);

}



.badge-pending {

  background-color: rgba(251, 191, 36, 0.18);

  border: 1px solid rgba(251, 191, 36, 0.45);

  color: #F59E0B;

  font-weight: 800;

  border-radius: 9999px;

  display: inline-flex;

  align-items: center;

  padding: 0.25rem 0.85rem;

  font-size: 0.75rem;

}



/* ==========================================================================

   Liquid Bubble Bead Progress Bar

   ========================================================================== */

.liquid-bubble-beads {

  display: flex;

  align-items: center;

  gap: 4px;

  background: rgba(14, 11, 30, 0.85);

  padding: 5px 8px;

  border-radius: 9999px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  overflow: hidden;

  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);

}



.liquid-bead {

  width: 14px;

  height: 14px;

  border-radius: 9999px;

  transition: all 0.4s ease;

  position: relative;

  flex-shrink: 0;

}



.liquid-bead::after {

  content: '';

  position: absolute;

  top: 2px;

  left: 3px;

  width: 4px;

  height: 4px;

  border-radius: 9999px;

  background: rgba(255, 255, 255, 0.75);

}



.liquid-bead.bead-active {

  background: linear-gradient(135deg, #A7F3D0 0%, #34D399 50%, #059669 100%);

  box-shadow: 0 0 10px rgba(52, 211, 153, 0.7), inset 0 -1px 2px rgba(0, 0, 0, 0.3);

}



.liquid-bead.bead-transition {

  background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 50%, #D97706 100%);

  box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);

}



.liquid-bead.bead-empty {

  background: rgba(40, 30, 65, 0.8);

  border: 1px solid rgba(255, 255, 255, 0.05);

}



/* ==========================================================================

   Form Controls & Inputs

   ========================================================================== */

.saas-input,

input[type="text"],

input[type="email"],

input[type="password"],

input[type="number"],

input[type="tel"],

select,

textarea {

  background-color: var(--bg-input);

  border: 1px solid var(--border-card);

  color: #FFFFFF;

  border-radius: 1rem;

  padding: 0.75rem 1rem;

  font-size: 0.875rem;

  transition: all 0.2s ease;

  width: 100%;

}



input[class*="pl-10"], select[class*="pl-10"] { padding-left: 2.75rem !important; }

input[class*="pl-11"], select[class*="pl-11"] { padding-left: 3.0rem !important; }

input[class*="pl-12"], select[class*="pl-12"] { padding-left: 3.5rem !important; }

input[class*="pl-14"], select[class*="pl-14"] { padding-left: 4.25rem !important; }

input[class*="pl-16"], select[class*="pl-16"] { padding-left: 4.75rem !important; }



.saas-input:focus,

input[type="text"]:focus,

input[type="email"]:focus,

input[type="password"]:focus,

input[type="number"]:focus,

input[type="tel"]:focus,

select:focus,

textarea:focus {

  outline: none;

  border-color: var(--brand-orange);

  box-shadow: 0 0 0 3px rgba(255, 103, 56, 0.25);

  background-color: #1A143A;

  color: #FFFFFF;

}



/* ==========================================================================

   Table Component

   ========================================================================== */

.saas-table-container {

  overflow-x: auto;

  border-radius: 1.5rem;

  border: 1px solid var(--border-card);

  background: var(--bg-card);

  backdrop-filter: blur(14px);

}



.saas-table {

  width: 100%;

  text-align: left;

  border-collapse: collapse;

  font-size: 0.8125rem;

  min-width: 560px;

}



.saas-table th {

  background-color: rgba(35, 27, 68, 0.9);

  color: #C4B5FD;

  font-weight: 700;

  text-transform: uppercase;

  font-size: 0.6875rem;

  letter-spacing: 0.05em;

  padding: 0.85rem 1rem;

  border-bottom: 1px solid var(--border-card);

}



.saas-table td {

  padding: 0.85rem 1rem;

  border-bottom: 1px solid rgba(167, 139, 250, 0.12);

  color: #E2DCF3;

}



.saas-table tr:last-child td {

  border-bottom: none;

}



.saas-table tr:hover td {

  background-color: rgba(167, 139, 250, 0.06);

}



/* ==========================================================================

   Modals & Live Payout Ticker

   ========================================================================== */

.modal-backdrop {

  background: rgba(10, 8, 24, 0.82);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

}



#adPlayerModal {

  display: none;

}

#adPlayerModal.is-open {

  display: flex !important;

}



.ticker-wrap {

  overflow: hidden;

  white-space: nowrap;

  flex: 1;

}



.ticker-content {

  display: inline-flex;

  padding-left: 100%;

  animation: ticker-slide 26s linear infinite;

}



@keyframes ticker-slide {

  0%   { transform: translateX(0); }

  100% { transform: translateX(-100%); }

}



.ad-timer-progress {

  background-image: linear-gradient(135deg, #FF6738 0%, #FF451A 100%);

}



/* Custom Scrollbars */

::-webkit-scrollbar {

  width: 7px;

  height: 7px;

}

::-webkit-scrollbar-track {

  background: var(--bg-page);

}

::-webkit-scrollbar-thumb {

  background: rgba(167, 139, 250, 0.35);

  border-radius: 9999px;

}

::-webkit-scrollbar-thumb:hover {

  background: var(--brand-orange);

}



/* Sparkle Animations */

@keyframes sparkle-pulse {

  0%, 100% { opacity: 0.4; transform: scale(0.9); }

  50% { opacity: 1; transform: scale(1.15); }

}



.sparkle-anim {

  animation: sparkle-pulse 2.2s infinite ease-in-out;

}



img, video, iframe, canvas {

  max-width: 100%;

}