/* === FONT & RESET === */
@import url('https://fonts.googleapis.com/css2?family=Electrolize&display=swap');

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

body {
  background-color: #010304;
  color: white;
  font-family: 'Electrolize', sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

/* make main area stretch */
main {
  flex: 1;
  display: flex;
  align-items: center; 
  width: 100%;
}

/* === LOTTIE BACKGROUND STYLES (Scaled by 20%) === */
#bg-animation {
  /* 1. Full Screen Fixed Positioning */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  
  /* 2. Z-Index and Overlay Control */
  z-index: 0; 
  pointer-events: none !important;
  transform: scale(1.20); /* Your requested 20% scale */
  /* 3. Filter for readability */
  filter: brightness(0.8);
  -webkit-filter: brightness(0.8);
}

/* === BODY DIMMER EFFECT === */
body::before { 
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* BACKGROUND DIMMER COLOR */
  background-color: rgba(0, 0, 0, 0.8); 
  
  /* Z-INDEX: Below the mobile-menu (15), but above the rest of the page content */
  z-index: 14; 
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

body.menu-open::before {
  opacity: 1; /* Fade in the dimmer when the menu is open */
}


/* === HEADER (FRAME STYLING) === */
header {
  /* Frame Size and Positioning - DESKTOP */
  width: calc(100% - 200px);
  height: 100px;
  margin: 0 auto;
  position: absolute;
  top: 40px;
  left: 100px; 
  right: 100px;
  
  /* Z-INDEX: High enough (20) to ensure header is above the dimmer (14) */
  z-index: 100;

  /* Background and Effect */
  background-color: rgba(223, 218, 252, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(20px);

  /* Content Layout */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 50px;

  /* Allow menu to overflow the header frame */
  overflow: visible;
}

header .logo {
    z-index: 21; 
    display: flex; /* Added for Hub logo styling */
    align-items: center; /* Added for Hub logo styling */
}

header .logo img {
  height: 20px;
  width: auto;
  display: block;
}

header .logo .hub-label {
    margin-left: 10px;
    padding: 4px 12px;
    background-color: #3A1AFF; /* Hub label background color */
    color: white;
    font-size: 16px;
    font-weight: bold;
    border-radius: 0px;
    display: none; /* Default hidden, only visible in dashboard.html */
}

/* Desktop Nav Links (This targets the generic nav tag for the Landing Page AND the Dashboard) */
header nav {
  z-index: 21; 
  display: flex; 
  align-items: center;
}
header nav a {
margin-left: 30px;
color: white;
text-decoration: none;
font-size: 20px;
transition: color 0.3s ease;
}

/* Base style for the Profile Icon (uses the new class, but generic parent nav tag) */
header nav .btn-profile {
margin-left: 30px; 
color: white;
text-decoration: none;
font-size: 40px; /* Slightly larger icon */
transition: color 0.3s ease;
padding: 0; 
display: flex;
}

/* 🚀 NEW FIX: Target the material icon element directly */
header nav .btn-profile i.material-icons {
  font-size: 40px; /* Force the icon element to match */
  line-height: 1; /* Essential for vertical alignment */
}

header nav a:hover {
color: #2b15aa;
}

header nav .btn-profile:hover {
color: #2b15aa;
}

/* Hide the mobile elements on desktop */
.mobile-controls {
  display: none; 
}

/* -------------------- */

/* === MOBILE MENU STYLING === */

/* Hamburger Toggle Icon (Hidden on Desktop) */
.menu-toggle {
  display: none; /* Hidden by default on desktop */
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 25px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 20; 
}

.menu-toggle .bar {
  width: 100%;
  height: 3px;
  background-color: white;
  transition: all 0.3s linear;
  transform-origin: 1px;
}

/* Mobile Menu Container (Off-screen by default) */
.mobile-menu {
  display: none; /* Hidden by default on desktop */
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  
  /* MENU COLOR: Requested 65% opacity on the mobile menu itself */
  background-color: rgba(1, 3, 4, 0.65); 
  
  /* Glass blur effect for menu */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  
  /* Z-INDEX: Higher than dimmer (14) */
  z-index: 15; 

  transform: translateX(100%);
  transition: transform 0.4s ease-in-out;

  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 50px;
}

.mobile-menu a {
  color: white;
  text-decoration: none;
  font-size: 24px;
  padding: 20px 0;
  display: block;
  text-align: center;
}

/* Waitlist Button Style inside Mobile Menu */
.mobile-menu .btn-waitlist {
  background-color: white;
  color: #000;
  border: none;
  padding: 12px 30px;
  font-size: 18px;
  font-weight: normal;
  cursor: pointer;
  border-radius: 0px;
  margin-top: 30px;
  display: inline-block;
  transition: background-color 0.3s ease;
}

/* Menu OPEN state (toggled by JavaScript) */
body.menu-open .mobile-menu {
  transform: translateX(0);
}

body.menu-open .menu-toggle .bar:nth-child(1) {
  transform: rotate(45deg); 
}

body.menu-open .menu-toggle .bar:nth-child(2) {
  opacity: 0; 
}

body.menu-open .menu-toggle .bar:nth-child(3) {
  transform: rotate(-45deg); 
}

/* -------------------- */

/* === HERO SECTION (Landing Page) === */
.hero {
  position: relative;
  display: flex;
  
  /* Align content to the left side */
  justify-content: flex-start; 
  
  align-items: center;
  min-height: calc(100vh - 200px);
  
  /* FIX: Use margin-left to pull the entire hero content area to the left
           by the amount of the header's left offset (100px) */
  margin-left: 100px;
  
  /* Adjust padding and width to compensate for the margin-left and maintain layout */
  padding: 0 120px 0 0; 
  width: calc(100% - 100px); 
  
  /* Reverting to small gap as margin-left: auto handles spacing */
  gap: 40px;
  
  margin-top: 140px;
  margin-bottom: 60px;
  overflow: hidden;
}

.hero-text {
  flex: 1;
  max-width: 800px;
  text-align: left;
  z-index: 1;
  padding-left: 0;
}

.hero-text h1 {
  font-size: clamp(64px, 6.5vw, 80px);
  line-height: 1.1;
  margin-bottom: 40px;
  font-weight: 400;
}

/* Hero "Join the Waitlist" button (Desktop/Mobile version) */
.hero-text button {
  background-color: white;
  color: #000;
  border: none;
  padding: 16px 40px;
  font-size: 16px;
  font-weight: normal;
  cursor: pointer;
  border-radius: 0px;
  transition: all 0.3s ease;
  display: inline-block; 
}

.hero-text button:hover {
  background-color: #3A1AFF;
  color: #fff;
}

/* --- HERO IMAGE STACKING --- */
.hero-image {
  position: relative;
  width: 450px;
  max-width: 500px;
  height: 400px;
  flex-shrink: 0;
  z-index: 1;
  
  /* 🎯 FIX: Push the image to the far right by consuming all space to its left */
  margin-left: auto; 
}

.hero-image img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 450px;
  height: auto;
  pointer-events: none;
}

/* Corrected SVG Scaling */
.svg-top {
  top: 0;
  z-index: 3;
  transform: translateX(-50%) scale(0.85);
  animation: floatTop 3s ease-in-out infinite;
}

.svg-mid {
  top: 130px;
  z-index: 2;
  animation: floatMid 3s ease-in-out infinite;
  animation-delay: 1s;
}

.svg-bottom {
  top: 200px;
  z-index: 1;
  animation: floatBottom 3s ease-in-out infinite;
  animation-delay: 0.5s;
}

/* Animations (Updated for scale 0.85) */
@keyframes floatTop {
  0%, 100% { transform: translate(-50%, 0) scale(0.85); }
  50% { transform: translate(-50%, -15px) scale(0.85); }
}

@keyframes floatMid {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -8px); }
}

@keyframes floatBottom {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 12px); }
}

/* -------------------- */

/* === FOOTER STYLE (Landing Page Fixed) === */
footer {
  /* Fixed to bottom for desktop view (Landing Page Only) */
  position: relative; 
  bottom: 0;
  
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #aaa;
  font-size: 14px;
  width: 100%;
  text-align: left;
  z-index: 10;
  background-color: #010304;
}

/* === LANDING PAGE FOOTER CENTERING === */
/* Target the footer when the body *doesn't* have the dashboard-page class */
body:not(.dashboard-page) footer {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; /* Ensure it spans the full width */
  /* Reset alignment for text contained within a single block */
  text-align: center;
  padding: 20px 0; /* Keep minimal padding */
  /* Re-introduce gap for the landing page elements to look nice */
  gap: 0;
}

/* Style all footer links on landing page */
body:not(.dashboard-page) footer p a {
  color: #aaa;
  text-decoration: none;
  padding: 0 10px; /* Applies 10px padding right/left to ALL links */
  transition: color 0.3s ease;
}

/* === LANDING PAGE PIPE AND SPACING FIX (FINAL) === */
/* Target the span (copyright year) when NOT on the dashboard */
body:not(.dashboard-page) footer p span {
  /* Space between the copyright text and the pipe */
  margin-right: 0; 
}

/* Target the FIRST link element and inject the pipe BEFORE it */
body:not(.dashboard-page) footer p a:first-of-type::before {
  content: "|";
  /* Space between the pipe and the link text (e.g., Privacy Policy) */
  margin: 0 20px 0 25px;
  color: #555;
}

/* Clear left padding on the link */
body:not(.dashboard-page) footer p a:first-of-type {
  padding-left: 0; 
}

footer p {
  margin: 0;
}

footer p span,
footer p a {
  display: inline-block;
  vertical-align: middle;
}

/* === DASHBOARD PIPE DEMARCATOR (CLEAN FIX) === */

/* Ensure all footer links have general styling */
footer a {
  color: #aaa;
  text-decoration: none;
  transition: color 0.3s ease;
}

footer a:hover {
  color: #3A1AFF;
}

/* Target links inside the dashboard social-links container */
.dashboard-page footer .social-links a {
    /* Set padding for consistent spacing if needed, but the :before handles separation */
    padding: 0; 
    margin: 0; /* Also clear any default margins */
}

/* Use the adjacent sibling selector to put a pipe BEFORE the second (and subsequent) links */
.dashboard-page footer .social-links a + a::before {
  content: "|";
  display: inline-block !important;
  margin: 0 15px !important; /* Space on both sides of the pipe */
  color: #555;
}

/* === DASHBOARD PIPE DEMARCATOR (CLEAN & SPECIFIC FIX) === */

/* Target links inside the dashboard social-links container */
.dashboard-page footer .social-links a {
  /* Set padding to 0 to keep the links close */
  padding: 0; 
}

/* CRITICAL: Use the adjacent sibling selector to put a pipe BEFORE the second (and subsequent) links */
.dashboard-page footer .social-links a + a::before {
content: "|";
/* Increase specificity to ensure this always renders */
display: inline-block !important; 
/* Space on both sides of the pipe */
margin: 0 15px !important; 
color: #555;
}

/* Ensure the pipe is correctly positioned on the Landing Page if it only has one link */
body:not(.dashboard-page) footer p a:first-of-type::before {
    content: "|"; 
    margin-right: 20px; 
    color: #555;
}

/* -------------------- */
/* ======================================================================= */
/* ============= DASHBOARD HUB STYLES (New Content) ====================== */
/* ======================================================================= */

/* --- DASHBOARD OVERRIDES --- */
.hub-label {
    display: block !important; /* Force show the 'Hub' label on the dashboard */
}


/* === DASHBOARD LAYOUT STYLES === */
.dashboard-layout {
    /* Center the layout and set its maximum width/padding */
    width: calc(100% - 200px); /* Matches header frame width */
    max-width: 1400px; /* Sets a max width for large screens */
    margin: 0 100px; /* Matches header frame offset */
    padding-top: 200px; /* Push content below the fixed/absolute header */
    padding-bottom: 80px; /* Space for footer */
    flex: 1; 
    display: flex;
    flex-direction: column;
    z-index: 10; /* Ensure dashboard content is above Lottie */
    position: relative; /* Context for z-index */
    min-width: 0;
}

/* Header Text (You're on the Waitlist) */
.dashboard-layout h1 {
    font-size: clamp(60px, 3vw, 48px);
    font-weight: 400;
}

/* 1. New container for H1 and XP Bar side-by-side */
.dashboard-title-and-stats {
  display: flex;
  justify-content: space-between; 
  align-items: flex-end; 
  width: 100%;
  margin-bottom: 40px;
}

/* Main Two-Column Grid */
.dashboard-content-grid {
    display: flex;
    flex-direction: column; /* Left column is wider (2/3), Right is narrower (1/3) */
    gap: 40px;
    width: 100%;
}

/* New wrapper to enforce 100px margins on the footer */
.dashboard-layout-footer-wrapper {
  /* Copy the alignment properties from .dashboard-layout */
  width: calc(100% - 200px); 
  max-width: 1400px; 
  margin: 0 100px;
  padding-bottom: 80px; /* Adjust as needed */
  z-index: 10; 
  position: relative;
  min-width: 0;
}

/* Container for Daily Checkin and Refer a Friend side-by-side */
.top-cards-row {
  display: flex;
  gap: 40px; /* Space between the two cards */
  width: 100%;
}



/* Card Styling (for Daily Checkin and Refer a Friend) */
/* Container for title and subtitle to control their proximity */

.daily-checkin-text {
  /* Controls the space between the text group and the button below it */
  padding-bottom: 60px; 
  margin-bottom: 0; /* Ensure no margin interferes */
  flex-grow: 1;
}

.card {
    background-color: #0F1013; 
    padding: 30px;
    border-radius: 0;
    margin-bottom: 0; /* Spacing below the card */
    display: flex; 
    flex-direction: column;
    height: 100%;
    flex: 1;
    justify-content: space-between;
}

.card h2 {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 0px;
}

.card p {
    font-size: 16px;
    color: #aaa;
    margin-top: 10px;
    margin-bottom: 0;
}

.xp-plus {
    color: #9381FF;
    font-weight: bold;
}

.btn-primary {
    background-color: white;
    color: #000;
    border: none;
    padding: 20px 25px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 0px;
    transition: background-color 0.3s ease;
    text-transform: uppercase;
    width: 100%; 
    display: block;
    font-family: 'Electrolize', sans-serif;
    font-weight: normal;
    text-transform: none;
}

.btn-primary:hover {
    background-color: #3A1AFF;
    color: white;
}

/* Specific styling for the Daily Checkin card to align content */
.card.daily-checkin {
  /* This property pushes the contents (H2, P, and Button) to the top and bottom */
  justify-content: space-between; 
}


/* --- DAILY CHECKIN BUTTON STATES (FIXED) --- */

/* Base style for the main button is already defined in .btn-primary */

/* 1. Disabled/Claimed State */
.daily-checkin .btn-primary:disabled {
  background-color: #212328; /* Standard green for 'claimed' or 'done' */
  color: white;
  cursor: default;
  opacity: 0.7;
  pointer-events: none; /* Prevents clicks when disabled */
  font-weight: 400; /* Lighter font weight for inactive state */
}

/* Ensure disabled buttons don't show the hover state */
.daily-checkin .btn-primary:disabled:hover {
  background-color: #212328; 
}

/* Referral Link Styling */
.referral-link-container {
    display: flex;
    margin-top: 20px;
    margin-bottom: 0;
    flex-grow: 1;
    align-items: flex-end;
    gap: 20px;
    overflow: hidden; /* Important for sharp edges */
}

.referral-link-container input {
    flex-grow: 1;
    background-color: #212328;
    border: 0;
    color: #9381FF;
    padding: 20px 10px;
    padding-right: 70px;
    font-size: 16px;
    font-family: 'Electrolize', sans-serif; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
    min-width: 0;
    padding-right: 40px;
    position: relative; 
    z-index: 1;
}

.btn-copy, .btn-share {
    background-color: #3A1AFF;
    color: white;
    border: none;
    padding: 20px 16px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    min-width: 60px;
    height: 100%; /* Ensure both buttons match the height of the input */
    background-color: #212328;
    flex-shrink: 0;
}

.btn-share {
  background-color: white;
  background-color: #3A1AFF; /* Primary Blue for the main Share action */
  min-width: 70px;
  flex-shrink: 0;
  z-index: 1;
}
.btn-copy {
  background-color: #212328; /* Use the card background for a subtle utility button */
  min-width: 50px; 
  display: flex;
  justify-content: center; 
  align-items: center; 
  color: white; /* Make the icon white */
  font-size: 24px; /* Adjust size as needed */
  padding: 17.5px 10px;
  position: absolute; 
  right: 110px; /* Adjust this value to place it over the input's right padding */
  margin-left: -50px;
  z-index: 2; /* Ensure it is above the input */
  height: auto; /* Match input height */
  min-height: 50px; 
  flex-shrink: 0;
}

/* Hover effects */
.btn-share:hover {
  background-color: #3A1AFF;
  color: white;
}

.btn-copy:hover {
  background-color: #31343C; /* Slightly lighten on hover */
}

.referral-stats {
    font-size: 16px;
    color: #9381FF;
    margin-top: 20px;
    margin-bottom: 0;
}

/* === CRITICAL FIX: Spacer to force height match === */
.referral-spacer {
  /* This element consumes all available space */
   padding: 5px;
   flex-grow: 1; 
}

/* === TASK LIST STYLING === */
.tasks-section {
   display: block;
   margin-top: 0; 
   width: 100%;
   background-color: #0F1013; 
   /* Optional: Add padding to give space around the H2 and the list */
   padding: 30px;
}

.tasks-section h2 {
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 400;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tasks-card {
  border-radius: 0;
  width: 100%;
}

/* Base style for all tab buttons */
.tasks-tab {
  /* Reset button appearance */
  background: none;
  border: none;
  padding: 10px 0;
  cursor: pointer;
  font-family: 'Electrolize', sans-serif;
  font-size: 24px;
  font-weight: 400;
  
  /* Default (Inactive) state */
  color: #64666B; /* Grayed out color */
  transition: color 0.3s ease;
  
  /* Underline styling */
  position: relative;
}

/* New rule to group XP and Button */
.task-action-group {
    display: flex;
    align-items: center;
    gap: 20px; /* Space between XP and the button */
    flex-shrink: 0;
}

/* Update XP Rewards Styling (around line 549) */
.task-rewards {
  /* Removed padding for better alignment within the group */
  padding: 0; 
  flex-shrink: 0;
  font-size: 16px;
  color: #9381FF;
  min-width: 60px;
  text-align: right; /* Align XP numbers to the right */
}

/* Task Action Button Styling (around line 557) */
.btn-task-action {
    background-color: #3A1AFF;
    color: white;
    border: none;
    padding: 8px 20px;
    font-size: 14px;
    font-family: 'Electrolize', sans-serif;
    cursor: pointer;
    transition: background-color 0.3s ease;
    min-width: 90px;
    text-align: center;
    /* Removed flex-shrink: 0 and other properties, keeping it clean */
}

/* Individual Task Item Container */
.task-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.task-details {
    flex-grow: 1;
    max-width: 70%;
}

.task-details h3 {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 5px;
}

.task-details p {
    font-size: 14px;
    color: #aaa;
}

/* XP Rewards Styling */
.task-rewards {
  padding: 0 10px 0 20px;
    flex-shrink: 0;
    font-size: 16px;
    color: #9381FF;
    min-width: 60px;
}

/* Task Action Button Styling */
.btn-task-action {
    background-color: #3A1AFF;
    color: white;
    border: none;
    padding: 8px 20px;
    font-size: 14px;
    font-family: 'Electrolize', sans-serif;
    cursor: pointer;
    transition: background-color 0.3s ease;
    min-width: 90px;
    text-align: center;
}

.btn-task-action:hover {
    background-color: #2b15aa;
}

/* Style for the 'Connected/Confirmed' state (Completed Task) */

/* 1. Dim the text using the desired gray color #64666B */
.task-item.completed .task-details h3,
.task-item.completed .task-details p {
    color: #64666B; /* Updated: Use the grayed-out color */
}

/* 2. Green button for 'Completed' state (4CAF50 is a standard green) */
.task-item.completed .task-action .btn-task-action {
    background-color: #212328;
    color: #87898E; /* New grayed-out text color */ 
    cursor: default;
    pointer-events: none; /* Crucial: Prevents clicking a completed button */
}

/* Ensure disabled/completed buttons don't show the hover state */
.task-item.completed .task-action .btn-task-action:hover {
  background-color: #212328; /* Stays the new dark gray on hover */
  color: #87898E; /* Stays the new grayed-out text color */ 
}

/* 3. Style the XP reward for completed tasks */
.task-item.completed .task-rewards {
  color: #87898E; /* Gray XP color to match the button text */
  font-weight: 400;
}
/* -------------------- */

/* === MEDIA QUERIES (Mobile Layout) === */

@media (max-width: 900px) {
  body {
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Header Frame on Mobile (Fixed Position) */
  header {
    width: calc(100% - 40px);
    left: 20px;
    right: 20px;
    top: 20px;
    height: 70px;
    position: fixed; 
    padding: 0 20px;
    /* Ensure visual effects are active */
    background-color: rgba(223, 218, 252, 0.1); 
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
  }
/* ADD this inside the @media (max-width: 900px) block if you don't already have it */
.mobile-controls {
  display: flex !important; /* Show the container */
  align-items: center;
  gap: 15px; /* Space between Profile Icon and Hamburger */
  order: 2; /* Pushes the group to the right */
  z-index: 99;
}

/* 🚀 NEW FIX: Target the material icon element directly on mobile */
.btn-profile-mobile i.material-icons {
  font-size: 36px; /* Force the icon element to match */
  line-height: 1; 
}

/* HIDE Desktop Navigation (Hides the generic nav on mobile for both pages) */
header nav {
  display: none;
}

/* FIX: Hamburger Toggle is Visible (Used by Landing Page) */
.menu-toggle {
  display: flex !important; 
  order: 3; 
  z-index: 99;
  position: relative;
}

  /* Mobile Menu must be available to slide in */
  .mobile-menu {
    display: flex !important; 
    top: 0;
    left: 0;
  }
  
  /* Hero Content Position */
  .hero {
    flex-direction: column;
    text-align: center;
    /* Margin to push content below the fixed header */
    margin-top: 100px;
    margin-bottom: 0;
    
    /* FIX: Reset hero alignment on mobile */
    margin-left: 0; /* Remove desktop margin-left */
    width: 100%; /* Restore full width */
    
    padding: 60px 20px; /* Use standard mobile padding */
    gap: 40px;
    min-height: auto;
    height: auto;
  }

  .hero-text {
    padding-left: 0;
    max-width: 100%;
    text-align: center;
  }
  

/* Target the Copyright Text */
footer p:first-child {
  /* Remove any centering margins */
  margin: 0; 
  text-align: left;
}

/* Target the Social Links Container */
footer .social-links,
footer div:last-child {
  /* Remove any centering margins */
  margin: 0;
  text-align: right; 
  /* Ensure the links themselves stay on one line */
  display: flex;
  gap: 16px; /* Space between Discord and Telegram */
  align-items: center;
}

/* === DASHBOARD FOOTER FIX (Desktop) === */
/* === DASHBOARD FOOTER FIX (FINAL ALIGNMENT - Internal Styles) === */
/* === DASHBOARD FOOTER FIX (FINAL ALIGNMENT) === */
/* === DASHBOARD FOOTER FIX (FINAL ALIGNMENT - Content Only) === */
.dashboard-page footer {
  /* 1. Position/Spacing */
  position: relative; 
  padding-top: 40px; 
  
  /* 2. CRITICAL: Use 100px padding to push the content to the correct edges */
  padding-left: 100px;
  padding-right: 100px;
  padding-bottom: 20px;
  padding-top: 20px;

  /* 3. Layout Enforcement */
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  /* 4. Cleanup & Appearance */
  width: 100%; /* Ensure it spans the full width of its parent */
  margin: 0; /* Clear all margins */
  flex-wrap: nowrap;
  gap: 0;
  text-align: left;
  background-color: #010304;
}

  /* ... rest of mobile styles ... */
  .hero-image {
    width: 100%;
    max-width: 350px;
    height: 350px;
    /* Remove margin-left: auto on mobile */
    margin-left: 0;
  }

  .hero-image img {
    width: clamp(200px, 60vw, 350px);
    max-width: 350px;
  }
  
  /* DASHBOARD MOBILE FIXES */
    .dashboard-layout {
        width: calc(100% - 40px);
        margin: 0 20px;
        padding-top: 100px; 
    }

    .dashboard-content-grid {
        display: flex; /* NEW */
        flex-direction: column; /* NEW: Stack children vertically */
        gap: 40px;
        width: 100%;
    }


    .referral-link-container {
        flex-wrap: wrap;
    }

    .referral-link-container input {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .btn-copy, .btn-share {
        min-width: auto;
    }

    /* Task List wrapping for better mobile view */
    .task-item {
        flex-wrap: wrap;
    }

    .task-details {
        max-width: 100%;
        margin-bottom: 10px;
    }

    .task-rewards {
        order: 3; 
        padding: 0 10px 0 0;
    }
    
    .task-action {
        order: 2; /* Put button next to XP */
    }

    .top-cards-row {
      flex-direction: column; /* Stacks children vertically */
      gap: 30px; /* Adjust vertical gap for better mobile spacing */
    }
    
  /* Ensure the cards get back their margin-bottom when stacked */
  .top-cards-row .card {
      flex: 1;
      margin-bottom: 0; /* Keep 0 margin as the gap property handles spacing */
    }
}

/* --- UPDATED DASHBOARD TOP SECTION STYLES --- */

/* 1. New container for H1 and XP Bar side-by-side */
.dashboard-title-and-stats {
  display: flex;
  justify-content: space-between; /* Pushes H1 to left, XP bar to right */
  align-items: flex-end; /* Aligns the elements at the bottom */
  align-items: center;
  width: 100%;
  margin-bottom: 60px;
}

/* 2. H1 Style (Now within the new container) */
.dashboard-layout h1 {
  font-size: clamp(60px, 3vw, 48px);
  font-weight: 400;
  margin-bottom: 0; /* Removed margin-bottom to align with flex-end */
  flex-grow: 1;
}


/* === LEVEL AND XP BAR STYLING (NEW DESIGN - ENHANCED) === */

.xp-bar-wrapper {
  display: flex;
  flex-direction: column;
  width: 50%;
  min-width: 400px; /* INCREASED min width */
  flex-shrink: 1;
  padding: 15px 0 0; 
}

/* 1. XP and Level Info Row (The dark blue background bar) */
.xp-info-bar {
  background-color: #3A1AFF; 
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px; /* INCREASED padding */
  font-size: 22px; /* INCREASED font size for main XP/Level text */
  min-height: 50px; /* INCREASED minimum height */
}

.xp-count {
  font-weight: none;
  font-size: 48px; /* SIGNIFICANTLY INCREASED XP number size */
}

.level-current {
  background-color: white;
  color: #3A1AFF;
  padding: 5px 12px; /* INCREASED padding */
  font-weight: bold;
  font-size: 16px; /* INCREASED level badge font size */
}

/* 2. Progress Bar Track (The thin white/purple bar) */
.xp-bar-track {
  height: 12px; /* INCREASED bar thickness */
  background-color: rgba(255, 255, 255, 0.2); 
  width: 100%;
}

.xp-fill {
  height: 100%;
  background-color: #DFDAFC; 
  transition: width 0.5s ease-in-out; 
}

/* 3. Level Markers (Level 2 | Level 3 Text) */
.xp-level-markers {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 8px; /* INCREASED top margin */
}

.level-marker-text {
  font-size: 16px; /* INCREASED marker text size */
  color: #aaa; 
}


/* --- MOBILE OVERRIDES for XP Bar --- */
/* The mobile view will keep max-width: 100% to ensure it fits the screen */
@media (max-width: 900px) {
  .xp-bar-wrapper {
      max-width: 100%;
      min-width: 100%;
  }

  /* Reduce font size on mobile to prevent overflow */
  .xp-count {
      font-size: 24px; 
  }
}

/* --- MOBILE OVERRIDES for XP Bar --- */
@media (max-width: 900px) {
  /* Reusing existing rules, but ensuring min-width is gone on mobile */
  .xp-bar-wrapper {
      max-width: 100%;
      min-width: 100%;
  }
}

/* --- MOBILE OVERRIDES for XP Bar --- */
@media (max-width: 900px) {
  .dashboard-title-and-stats {
      flex-direction: column; /* Stack H1 and XP Bar wrapper vertically */
      align-items: center; /* Center everything */
  }

  .dashboard-layout h1 {
      margin-bottom: 20px; /* Add space back between H1 and stacked bar */
  }

  .xp-bar-wrapper {
      max-width: 100%;
      min-width: 100%;
  }
  .referral-link-container {
    flex-wrap: wrap;
    /* Ensure this container has space below the input before the buttons */
    margin-bottom: 0; 
}

  .referral-link-container input {
    width: 100%;
    margin-bottom: 10px; /* Separates input from the buttons below */
}
  
/* CRITICAL FIX: Make Copy Button a normal flow element on mobile */
.btn-copy {
    position: relative; /* Overrides position: absolute; from desktop */
    right: auto;        /* Clears the fixed desktop position */
    margin-left: 0;     /* Clears the fixed desktop margin-left */
    padding: 17.5px 16px; /* Adjust padding to match share button size */
    order: 1; /* Puts the Copy button first in the flex row */
}

.btn-share {
    order: 2; /* Puts the Share button second */
}

/* Make sure the buttons don't unnecessarily grow or shrink */
.btn-copy, .btn-share {
    min-width: 50px; /* Ensure they have a minimum size */
    flex-grow: 1;    /* Allow them to share the width equally */
    height: auto;
}
}

@media (max-width: 900px) {
  /* ... existing mobile styles ... */
  

  /* === GUARANTEE FULL WIDTH BACKGROUND === */
/* Use a pseudo-element to stretch the dark background edge-to-edge */
.dashboard-page footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%; /* Start in the middle */
  width: 100vw; /* Span the full viewport width */
  height: 100%;
  transform: translateX(-50%); /* Pull back by half its width to center */
  background-color: #010304;
  z-index: -1; /* Place behind the content */
}
  
  /* NEW: Give the social links container its own space */
  .dashboard-page footer .social-links {
      display: flex;
      gap: 15px; /* Space between Discord and Telegram */
  }
}

/* === PAGE SCOPING FIXES (Must be used with <body class="dashboard-page">) === */
/* Fix 1: Ensure dashboard content starts at the top and centers the dashboard-layout */
.dashboard-page main {
  align-items: flex-start; 
  justify-content: center;
}


.dashboard-page footer {
  /* 1. Position/Spacing */
  position: relative; 
  padding-top: 40px; 
  
  /* 2. CRITICAL ALIGNMENT: Match the 100px margins */
  /* Pushes the content area 100px inwards */
  margin: 0 100px; 
  width: calc(100% - 200px); /* Sets the width to match the header/layout width */

  /* 3. Internal Padding: Minimal space inside the content box */
  padding: 20px 0; 

  /* 4. Layout Enforcement */
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  /* 5. Cleanup */
  flex-wrap: nowrap;
  gap: 0;
  text-align: left;
  
  /* IMPORTANT: REMOVE background from the footer element itself */
  background-color: transparent; 
  z-index: 10;
}


/* ======================================================================= */
/* ============= AUTHENTICATION MODAL STYLES ============================= */
/* ======================================================================= */

/* --- 1. MODAL BACKDROP (Dimmer/Blur Effect) --- */
.modal-backdrop {
  position: fixed;
  z-index: 150;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Dimming color */
  
  /* 🚀 Apply the requested blur effect to the background */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  opacity: 0;
  visibility: hidden; /* Start hidden */
  transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Transition out delay */
}

/* --- 2. MODAL CONTAINER (The Popup Box) --- */
.auth-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centers the modal */
  background-color: #0F1013;
  
  /* 🚀 CRITICAL FIX: Add the padding back to the main container */
  padding: 40px 30px; 
  z-index: 151;
  width: 100%;
  max-width: 450px; 
  height: auto; /* Let the current content dictate height */
  color: white;
  
  /* Start hidden */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* --- 3. Modal OPEN State (Toggled by JavaScript) --- */
body.modal-open .modal-backdrop {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease; /* Transition in instantly */
}

body.modal-open .auth-modal {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}


/* --- 4. Content Styles --- */

.auth-modal h2 {
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 30px;
  text-align: center;
}

/* Inputs and Buttons Base Style */
.auth-modal input[type="email"],
.auth-modal button {
  width: 100%;
  border: none;
  padding: 18px 20px;
  margin-bottom: 15px;
  font-family: 'Electrolize', sans-serif;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  /* 🚀 DEFAULT BUTTON COLOR (Inactive State) */
  background-color: #212328; 
  color: white; /* Base text color, overridden later if needed */
}

/* Email Input Style */
.auth-modal input[type="email"] {
  background-color: #1A1B1F; /* Darker input background */
  color: white;
  /* Ensure text is left-aligned in input */
  text-align: left; 
}

.auth-modal input[type="email"]::placeholder {
  color: #87898E;
  opacity: 1; /* Ensures color applies correctly in all browsers */
}

/* "Continue" Button (Dark Primary Action) */
.auth-modal button.btn-continue {
  color: #64666B;
  transition: background-color 0.2s ease;
  font-weight: normal; /* Match Electrolize font weight */
  cursor: default;
}

.auth-modal button.btn-continue.active-state {
  /* 🚀 ACTIVE BUTTON COLOR */
  background-color: #3A1AFF; 
  /* 🚀 ACTIVE TEXT COLOR */
  color: white; 
  
  /* Re-enable interaction */
  pointer-events: auto; 
  cursor: pointer;
}

.auth-modal button.btn-continue.active-state:hover {
  background-color: #553FFF; /* A slightly lighter shade for visual feedback */
}

/* Separator text with horizontal lines */
.auth-modal .separator {
  /* 🚀 Enable Flexbox for line alignment */
  display: flex;
  align-items: center;
  text-align: center;
  
  /* 🚀 Control spacing above and below the separator */
  margin: 18px 0; 
  
  color: #87898E; /* Use the same secondary color as the placeholder text */
  font-size: 14px;
  line-height: 1; /* Ensure text height doesn't affect line placement */
}

/* Create the left-side line */
.auth-modal .separator::before {
  content: '';
  flex-grow: 1; /* Line takes up all available space */
  height: 1px; /* Thickness of the line */
  background-color: #212328; /* Use the button background color for a subtle line */
  margin-right: 15px; /* Spacing between the line and the text */
}

/* Create the right-side line */
.auth-modal .separator::after {
  content: '';
  flex-grow: 1; /* Line takes up all available space */
  height: 1px;
  background-color: #212328;
  margin-left: 15px;
}

/* Social/Wallet Buttons (Updated Color) */
.auth-modal button.btn-social,
.auth-modal button.btn-wallet {
  /* 🚀 FIX: Apply the specified button color */
  background-color: #212328;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
  transition: background-color 0.2s ease;
}

/* Hover effect for social/wallet buttons */
.auth-modal button.btn-social:hover,
.auth-modal button.btn-wallet:hover {
  background-color: #4A4D55;
}

/* Specific icon size adjustment for consistency */
.auth-modal button i.material-icons {
  font-size: 24px;
}

/* === SOCIAL ICON STYLING (SVG/IMG) === */

/* Style the image/SVG inserted inside the social buttons */
.btn-social img.social-icon {
  /* Set a consistent size for the logos */
  height: 24px; 
  width: 24px;
  
  /* Create space between the icon and the text label */
  margin-right: 10px; 
  
  /* Ensure the logos align nicely in the center of the button text */
  vertical-align: middle;
}

/* Ensure the Material Icon (Wallet) has consistent sizing */
.btn-wallet i.material-icons {
  /* Match the size of the SVG images for visual consistency */
  font-size: 24px; 
  margin-right: 10px;
  vertical-align: middle;
}

/* --- CONFIRMATION VIEW STYLING --- */

/* Header Row for Back Button and Title */
.auth-modal .header-controls {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  justify-content: flex-start;
  
}

.auth-modal .header-controls .control-btn {
  /* Base style for the back arrow button */
  background: transparent;
  border: none;
  color: white;
  padding: 0;
  margin-right: 15px;
  font-size: 24px;
  cursor: pointer;
  width: 24px; /* Fix width for alignment */
  height: 24px;
}

/* Ensure the main title for the confirmation screen is aligned */
.auth-modal .header-controls .confirm-title {
  /* Overwrite h2 styles */
  font-size: 24px;
  font-weight: 400;
  margin-top: -15px;
  margin-bottom: 0; /* Remove bottom margin */
  text-align: left; /* Align text properly */
  margin-left: 15px; /* 🚀 Add space between arrow and title */
  flex-grow: 1;
}

/* Verification Text */
.auth-modal .verification-text {
  text-align: center;
  font-size: 16px;
  color: #87898E;
  margin-bottom: 25px;
  margin-top: 15px;
}

/* Highlighted Email */
.auth-modal .verification-text #display-email {
  font-weight: bold;
  color: white; /* Highlight color */
}

/* Code Input Grid */
.auth-modal .code-input-grid {
  display: flex;
  justify-content: space-between;
  gap: 10px; /* Space between the boxes */
  margin-bottom: 30px;
}

.auth-modal .code-input-grid .code-digit {
  width: 54px; /* Fixed width for the box */
  height: 64px; /* Fixed height for the box */
  
  /* Box Styling */
  background-color: #1A1B1F; /* Input background color */
  border: 1px solid #212328; /* Subtle border */
  border-radius: 4px;
  
  /* Text Styling */
  color: white;
  font-size: 24px;
  text-align: center;
  font-family: 'Electrolize', sans-serif;
  
  /* Hide default arrows/spinners on number inputs */
  -moz-appearance: textfield;
}

.auth-modal .code-input-grid .code-digit:focus {
  border-color: #3A1AFF; /* Highlight on focus */
  outline: none;
}

/* Resend Text */
.auth-modal .resend-text {
  text-align: center;
  font-size: 14px;
  color: #87898E;
}

/* Resend Button/Link */
.auth-modal .resend-text .link-btn {
  background: none;
  border: none;
  color: #9381FF; /* Link color */
  text-decoration: underline;
  cursor: pointer;
  font-family: 'Electrolize', sans-serif;
  font-size: 14px;
  padding: 0;
}

/* Mail Icon Container (The circular element) */
.auth-modal .mail-icon-container {
    text-align: center;
    margin-bottom: 45px;
    position: relative; /* Needed for positioning the spinner overlay */
}

.auth-modal .mail-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  color: #3A1AFF; 
  font-size: 45px; 
  position: relative;
  overflow: hidden;

  transform: translateZ(0); /* Forces a new, clean 3D rendering context */  
}

/* 🚀 CRITICAL FIX: The Pumping Background Layer */
.auth-modal .mail-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  
  /* Use the same background color for the pulse */
  background-color: rgba(58, 26, 255, 0.1); 
  
  /* Set animation properties */
  -webkit-animation: pump 1s ease-in-out infinite;
  -moz-animation: pump 1s ease-in-out infinite;
  -o-animation: pump 1s ease-in-out infinite;
  animation: pump 1s ease-in-out infinite;
  z-index: 1; /* Keep it behind the SVG icon */
}

/* Ensure the SVG is above the pseudo-element */
.auth-modal .mail-icon .mail-svg-icon {
  z-index: 2; /* Keep this */
  /* ... existing styles ... */
}

/* 🚀 The actual icon within the circle */
.auth-modal .mail-icon .mail-svg-icon {
  width: 50px; /* 🚀 Make SVG icon bigger */
  height: 50px; /* 🚀 Make SVG icon bigger */
  z-index: 2; 
  position: relative;
}

/* 🚀 CRITICAL FIX: Ensure the entire view aligns content to the center */
#confirmation-view {
  text-align: center; 
}

/* 🚀 Pumping Animation for the Circle Background */
@keyframes pump {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

/* 🚀 VENDOR PREFIX FALLBACK (Webkit - Chrome/Safari) */
@-webkit-keyframes pump {
  0% { -webkit-transform: scale(1); opacity: 1; }
  50% { -webkit-transform: scale(1.05); opacity: 0.8; }
  100% { -webkit-transform: scale(1); opacity: 1; }
}

/* 🚀 ADD THESE MISSING KEYFRAMES (Firefox) */
@-moz-keyframes pump {
  0% { -moz-transform: scale(1); opacity: 1; }
  50% { -moz-transform: scale(1.05); opacity: 0.8; }
  100% { -moz-transform: scale(1); opacity: 1; }
}

/* 🚀 ADD THESE MISSING KEYFRAMES (Opera) */
@-o-keyframes pump {
  0% { -o-transform: scale(1); opacity: 1; }
  50% { -o-transform: scale(1.05); opacity: 0.8; }
  100% { -o-transform: scale(1); opacity: 1; }
}

/* --- Share Modal Styles --- */
.share-modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.share-modal {
    background-color: #0F1013; /* qognet-frame */
    border: 1px solid #212328; /* qognet-input-border */
    width: 90%;
    max-width: 400px;
    animation: fadeIn 0.3s ease-out;
}

.share-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #212328;
}

.share-modal-header h2 {
    font-size: 1.25rem;
    font-weight: bold;
    margin: 0;
}

.share-modal-close {
    background: none;
    border: none;
    color: #87898E; /* qognet-input-text */
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.share-modal-close:hover {
    color: white;
}

.share-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 20px;
}

.share-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 10px;
    background-color: #1A1B1F; /* qognet-input */
    text-decoration: none;
    color: white;
    font-size: 14px;
    transition: background-color 0.2s;
}

.share-option:hover {
    background-color: #212328;
}

.share-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-icon-wrapper .material-icons {
    font-size: 24px;
    color: white;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* --- Referral Stats Modal Content --- */
.referral-stats-content {
    padding: 30px 20px;
    text-align: center;
}

.referral-stats-content p {
    font-size: 1.1rem;
    color: #87898E; /* qognet-input-text */
    margin-bottom: 15px;
}

.referral-stats-content span {
    font-weight: bold;
    color: white;
    font-size: 1.2rem;
}

/* --- Profile Pop-up Styles --- */
/* The #profile-popup now uses the .share-modal class for its base styles */

/* FIX: Ensure the profile popup behaves like a modal and not a dropdown */
#profile-popup {
    position: relative; /* This ensures it's positioned within the centered backdrop */
    top: auto;
    right: auto;
}

.profile-popup-content {
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.profile-popup-user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.profile-popup-icon {
    font-size: 64px !important; /* Large user icon */
    color: #87898E; /* qognet-input-text */
}

.profile-popup-email {
    font-size: 1rem;
    color: white;
    font-weight: bold;
    word-break: break-all; /* Allow long emails to wrap */
}

.profile-popup-logout {
    display: block;
    width: 100%;
    padding: 15px 20px;
    text-align: center;
    text-decoration: none;
    background-color: rgba(255, 85, 85, 0.1);
    color: #FF5555;
    font-size: 1rem;
    font-weight: bold;
    transition: background-color 0.2s;
}

.profile-popup-logout:hover {
    background-color: rgba(255, 85, 85, 0.2);
}