:root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --success: #4cc9f0;
            --danger: #f72585;
            --warning: #f59e0b;
            --info: #3b82f6;
            --dark: #2b2d42;
            --light: #f8f9fa;
            --bg-primary: #ffffff;
            --bg-secondary: #f8f9fa;
            --bg-tertiary: #e9ecef;
            --text-primary: #212529;
            --text-secondary: #6c757d;
            --text-muted: #6c757d;
            --text-inverse: #ffffff;
            --bg-elevated:#edf8fc;
            --border-color: #dee2e6;
            --border-light: #e9ecef;
            --shadow-sm: 0 2px 10px rgba(0,0,0,0.05);
            --shadow-md: 0 5px 20px rgba(0,0,0,0.05);
            --shadow-lg: 0 5px 20px rgba(0,0,0,0.1);
            --gradient-start: #4361ee;
            --gradient-end: #3f37c9;
            --grade-a: #28a745;
            --grade-b: #17a2b8;
            --grade-c: #ffc107;
            --grade-d: #dc3545;
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --primary: #667eea !important;
                --secondary: #764ba2 !important;
                --success: #4cc9f0 !important;
                --danger: #f72585 !important;
                --warning: #f59e0b !important;
                --info: #3b82f6 !important;
                --dark: #000000 !important;
                --light: #111111 !important;
                --bg-primary: #000000 !important;
                --bg-secondary: #111111 !important;
                --bg-tertiary: #1a1a1a !important;
                --bg-elevated: #222222 !important;
                --text-primary: #ffffff !important;
                --text-secondary: #cccccc !important;
                --text-muted: #999999 !important;
                --text-inverse: #000000 !important;
                --border-color: #333333 !important;
                --border-light: #222222 !important;
                --shadow-sm: 0 2px 10px rgba(0,0,0,0.5) !important;
                --shadow-md: 0 5px 20px rgba(0,0,0,0.5) !important;
                --shadow-lg: 0 5px 20px rgba(0,0,0,0.6) !important;
                --gradient-start: #667eea !important;
                --gradient-end: #764ba2 !important;
                --grade-a: #10b981 !important;
                --grade-b: #3b82f6 !important;
                --grade-c: #f59e0b !important;
                --grade-d: #ef4444 !important;
            }
        }
           /* ---------- DARK MODE (full coverage, no leftover) ---------- */
    @media (prefers-color-scheme: dark) {
      body {
        background-color: #080b17 !important;
        color: #eef3fc !important;
      }
      .navbar {
        background-color: #0c1020e0 !important;
        backdrop-filter: blur(16px) saturate(200%);
        border-bottom: 1px solid #27305a !important;
      }
      .navbar-brand, .nav-link {
        color: #d6e2ff !important;
      }
      .nav-link:hover {
        color: #b2cbff !important;
        background-color: #1a2140;
      }
      .btn-outline-primary {
        border-color: #5468b0 !important;
        color: #cad6ff !important;
      }
      .btn-outline-primary:hover {
        background-color: #29345e !important;
        border-color: #8ba2ff !important;
        color: white !important;
      }
      .btn-primary {
        background: #3145b3 !important;
        border: none !important;
        box-shadow: 0 12px 25px -8px #02051f;
      }
      .btn-primary:hover {
        background: #4357cf !important;
      }
      /* universal card / section overrides */
      .card, .feature-card, .pricing-card, .stat-card, .marketplace-card,
      .template-showcase, .footer-custom, .cta-card, .hero-glass,
      .badge.bg-light, .token-chip, .marketplace-bg, .stat-item,
      .bg-soft, .trend-card, [class*="bg-soft"], .footer-column,
      .footer-subscribe, .footer-links {
        background-color: #13172f !important;
        border-color: #2d365e !important;
        color: #e7edff;
      }
      .hero-section {
        background: #0b0f22 !important;
        border-bottom: 1px solid #2f3a70;
      }
      .marketplace-bg {
        background: #0f142c !important;
      }
      .feature-card, .pricing-card {
        background: rgba(18, 23, 48, 0.9) !important;
        backdrop-filter: blur(8px);
        border: 1px solid #32407c !important;
      }
      .stat-card {
        background: #1b2142 !important;
        border: 1px solid #38427a;
      }
      .footer-custom {
        background: #0a0e22 !important;
        border-top: 1px solid #26305c;
      }
      .badge.bg-primary.bg-opacity-10 {
        background: #20294f !important;
        color: #b6cbff !important;
      }
      .text-muted, .text-secondary {
        color: #b6c3ec !important;
      }
      hr {
        border-color: #33407c !important;
      }
      .gradient-text {
        background: linear-gradient(125deg, #b6caff, #dbb5ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .feature-icon-2026 {
        background: #252f60 !important;
        color: #ccdcff !important;
        box-shadow: none;
      }
      .navbar-toggler-icon {
        filter: invert(1);
      }
      .bg-white, [class*="bg-white"] {
        background-color: #1a2142 !important;
      }
      .bg-light {
        background-color: #161d3c !important;
      }
      input, .form-control {
        background-color: #1f274b !important;
        border-color: #44509b !important;
        color: white !important;
      }
      .list-unstyled a {
        color: #b1c5fd !important;
      }
      /* footer specific enhancements */
      .footer-heading {
        color: #dbe3ff !important;
      }
      .footer-link {
        color: #aebcf0 !important;
      }
      .footer-link:hover {
        color: #cedcff !important;
      }
      .social-icon {
        background: #232d59 !important;
        color: #ccdaff !important;
      }
      /* Dropdown dark mode styles */
      .dropdown-menu {
        background-color: #1a2142 !important;
        border-color: #2d3a70 !important;
      }
      .dropdown-item {
        color: #e2eaff !important;
      }
      .dropdown-item:hover {
        background: linear-gradient(135deg, #4f63d9 0%, #8f5ae2 100%) !important;
        color: white !important;
      }
      .dropdown-item i {
        color: #a6c1ff !important;
      }
      .dropdown-item:hover i {
        color: white !important;
      }
      .dropdown-divider {
        border-color: #33407c !important;
      }
    }
 
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
            html { 
      scroll-behavior: smooth;
      width: 100%;
      overflow-x: hidden;
    }
        body {
              overflow-x: hidden; 
            background: linear-gradient(135deg, #667eea10 0%, #764ba210 100%);
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            min-height: 100vh;
            background-color: var(--bg-primary);
            color: var(--text-primary);
            transition: background-color 0.3s, color 0.3s;
        }
 
img, .card, .feature-card, .badge {
  max-width: 100%;
  box-sizing: border-box;
}
 
    img, svg, iframe { max-width: 100%; vertical-align: middle; }

        .container, .container-fluid {
            --bs-gutter-x: 1.8rem;
            padding-right: var(--bs-gutter-x);
            padding-left: var(--bs-gutter-x);
            width: 100%;
            max-width: 100%;
        }
/* ---------- LIGHT MODE (fresh, no overflow) ---------- */
  
    /* MODAL AND EVERYTHING INSIDE */
    .modal-content {
        background-color: var(--bg-tertiary) !important;
        border: 1px solid var(--border-color) !important;
        color: var(--text-primary);
    }
    
    .modal-header, 
    .modal-body, 
    .modal-footer {
        border-color: var(--border-color) !important;
        color: var(--text-primary);
    }
    
    .modal-title {
        color: var(--text-primary) !important;
    } 
    /* form controls */
    .form-control {
        background-color: var(--bg-elevated) !important;
        border: 1px solid var(--border-color) !important;
        color: var(--text-primary) !important;
    }
    
    .form-control:focus {
        background-color: var(--bg-tertiary) !important;
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 0.2rem rgba(var(--primary), 0.3);
    }
    
    .form-control::placeholder {
        color: var(--text-muted) !important;
        opacity: 0.7;
    }
    
    /* labels, text */
    label, 
    .fw-semibold {
        color: var(--text-primary) !important;
    }
    
    .text-muted {
        color: var(--text-muted) !important;
    }
    
    /* auth switch / links */
    .auth-switch {
        color: var(--primary) !important;
    }
    
    .auth-switch:hover {
        color: var(--secondary) !important;
    }
    
    .forgot-link {
        color: var(--primary) !important;
    }
    
    .forgot-link:hover {
        color: var(--secondary) !important;
    }
    
    /* social buttons */
    .social-btn {
        background: var(--bg-elevated) !important;
        border: 1px solid var(--border-color) !important;
        color: var(--text-primary) !important;
    }
    
    .social-btn:hover {
        background: var(--bg-tertiary) !important;
        border-color: var(--primary) !important;
    }
    
    /* separator */
    .auth-separator span {
        color: var(--text-secondary) !important;
    }
    
    .auth-separator::before, 
    .auth-separator::after {
        border-bottom-color: var(--border-color) !important;
    }
     
    /* any extra text */
    p, 
    .text-center {
        color: var(--text-primary);
    } 

    /* Force dark background even with autocomplete */
    input.dark-autocomplete:-webkit-autofill,
    input.dark-autocomplete:-webkit-autofill:hover,
    input.dark-autocomplete:-webkit-autofill:focus,
    input.dark-autocomplete:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px var(--bg-elevated) inset !important;
        -webkit-text-fill-color: var(--text-primary) !important;
        box-shadow: 0 0 0 30px var(--bg-elevated) inset !important;
        background-color: var(--bg-elevated) !important;
        background-clip: content-box !important;
    }
    
    /* Ensure eye icon remains visible */
    .eye-icon {
        color: var(--text-secondary) !important;
        background: transparent;
        z-index: 10;
    }
    
    .eye-icon:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: var(--primary) !important;
    }
    
    /* Focus state for eye in dark mode */
    .eye-icon:focus,
    .eye-icon:focus-within,
    input:focus + .eye-icon,
    input:focus ~ .eye-icon {
        color: var(--primary) !important;
    }
    
    /* Position context to keep eye above */
    .position-relative {
        position: relative;
        z-index: 1;
    }
    
    /* Ensure input background stays dark */
    input.dark-autocomplete {
        background-color: var(--bg-elevated) !important;
        color: var(--text-primary) !important;
        border: 1px solid var(--border-color) !important;
    }
    
    input.dark-autocomplete:focus {
        background-color: var(--bg-tertiary) !important;
    } 
/* ----- LIGHT MODE STYLES ----- */
.navbar { 
    background: rgba(var(--bg-primary), 0.72); 
    backdrop-filter: blur(14px); 
    border-bottom: 1px solid rgba(var(--primary), 0.1); 
}

.btn-primary { 
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    border: none; 
    font-weight: 700; 
    color: var(--text-inverse);
}

.footer-custom { 
    background: var(--bg-primary); 
    backdrop-filter: blur(12px); 
    border-top: 1px solid var(--border-light); 
    padding-top: 4rem; 
    padding-bottom: 2rem; 
}

/* ----- AUTH MODAL STYLES ----- */
.auth-modal .modal-dialog { 
    max-width: 460px; 
}

.auth-switch { 
    cursor: pointer; 
    color: var(--primary); 
    font-weight: 600; 
}

.auth-switch:hover { 
    text-decoration: underline; 
    color: var(--secondary);
}

.social-btn { 
    border-radius: 60px; 
    padding: 0.7rem 1rem; 
    font-weight: 500; 
    border: 1px solid var(--border-light); 
     background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    width: 100%; 
    margin-bottom: 0.75rem; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px; 
    transition: 0.2s; 
    color: var(--text-primary);
}

.social-btn:hover { 
    background: var(--bg-secondary); 
    transform: translateY(-2px); 
}

.social-btn i { 
    font-size: 1.3rem; 
    color: var(--primary);
}

.auth-separator { 
    display: flex; 
    align-items: center; 
    text-align: center; 
    margin: 1rem 0; 
    color: var(--text-secondary); 
}

.auth-separator::before, 
.auth-separator::after { 
    content: ''; 
    flex: 1; 
    border-bottom: 1px solid var(--border-light); 
}

.auth-separator span { 
    padding: 0 0.8rem; 
}

.modal-body { 
    padding: 2rem; 
}

.forgot-link { 
    font-size: 0.9rem; 
    cursor: pointer; 
    color: var(--primary); 
}

.forgot-link:hover {
    color: var(--secondary);
}

.auth-toast { 
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    background: var(--primary); 
    color: var(--text-inverse); 
    padding: 12px 24px; 
    border-radius: 60px; 
    z-index: 9999; 
    display: none; 
    box-shadow: var(--shadow-lg); 
}

/* ----- CLOSE BUTTON ----- */
.btn-close {
    background: var(--danger) !important;
    opacity: 1 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-close i {
    font-size: 2.5rem;
    line-height: 1;
}

.btn-close:hover {
    background: var(--grade-d) !important;
    transform: scale(1.05);
}

/* ----- EYE ICON ----- */
.eye-icon {
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    z-index: 5;
    background: transparent;
}

.eye-icon:hover {
    background-color: rgba(var(--primary), 0.1);
    color: var(--primary);
} 
/* --------------------------------------- FEEDBACK MODAL ---------------*/

.btn-feedback {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: var(--text-inverse);
    border: none;
    border-radius: 50px;
    padding: 12px 24px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    transition: all 0.3s;
}

.btn-feedback:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    color: var(--text-inverse);
}

.feedback-type-grid {
    max-height: 300px;
    overflow-y: auto;
    padding: 5px;
}

.feedback-type-card {
    border: 2px solid var(--border-light);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 5px;
    background: var(--bg-primary);
}

.feedback-type-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.feedback-type-card.selected {
    border-color: var(--primary);
    background: var(--bg-secondary);
}

.feedback-type-card i {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 5px;
    color: var(--primary);
}

.feedback-type-card span {
    font-size: 0.8rem;
    display: block;
    color: var(--text-secondary);
}

.feedback-type-card.selected span {
    color: var(--primary);
}

.rating-stars {
    font-size: 2rem;
    color: var(--warning);
    cursor: pointer;
}

.rating-stars i {
    margin-right: 5px;
    transition: all 0.2s;
}

.rating-stars i:hover {
    transform: scale(1.2);
}

.rating-stars i.active {
    color: var(--warning);
    font-weight: bold;
}

.screenshot-preview {
    position: relative;
    display: inline-block;
}

.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

.toast {
    min-width: 300px;
    margin-bottom: 10px;
}
.btn-primary {
  background: linear-gradient(145deg, var(--secondary), var(--primary));
  border: none;
  font-weight: 700;
}
.btn-primary:hover {
  background: linear-gradient(145deg, var(--primary), var(--secondary));
  transform: translateY(-3px);
}
.btn-outline-primary {
  border-width: 2px;
  border-color: var(--primary);
  color: var(--secondary);
  font-weight: 600;
}
.btn-outline-primary:hover {
  background-color: var(--primary);
  color: var(--text-inverse);
}
.feature-card, .pricing-card {
  background: var(--bg-primary);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-light);
  border-radius: 42px;
  box-shadow: var(--shadow-lg);
}
.feature-card:hover {
  transform: translateY(-12px);
  box-shadow: var(--shadow-lg);
}
.stat-card {
  background: var(--bg-secondary);
  backdrop-filter: blur(4px);
  border-radius: 36px;
  border: 1px solid var(--border-light);
}
.marketplace-bg {
  background: var(--bg-tertiary);
  border-radius: 70px 70px 30px 30px;
}
.hero-section {
  background: radial-gradient(ellipse at 80% 20%, var(--bg-tertiary), var(--bg-secondary));
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}
.gradient-text {
  background: linear-gradient(125deg, var(--secondary), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.feature-icon-2026 {
  width: 80px; height: 80px;
  background: var(--bg-primary);
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  color: var(--primary);
  box-shadow: var(--shadow-md);
}
.animate-float-slow {
  animation: float 7s infinite alternate;
}
@keyframes float {
  0% { transform: translateY(0); }
  100% { transform: translateY(-20px); }
}

/* ---------- FOOTER (enhanced modern) ---------- */
.footer-custom {
  background: var(--bg-primary);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-color);
  padding-top: 4rem;
  padding-bottom: 2rem;
  width: 100%;
  overflow: hidden;
}
.footer-heading {
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
}
.footer-link {
  text-decoration: none;
  color: var(--text-secondary);
  display: inline-block;
  margin-bottom: 0.7rem;
  transition: 0.2s;
  font-weight: 450;
}
.footer-link:hover {
  color: var(--primary);
  transform: translateX(6px);
}
.social-icon {
  width: 44px;
  height: 44px;
  background: var(--bg-primary);
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.8rem;
  box-shadow: var(--shadow-sm);
  transition: 0.2s;
  color: var(--primary);
  border: 1px solid var(--border-light);
}
.social-icon:hover {
  background: var(--bg-secondary);
  transform: scale(1.12) translateY(-4px);
  color: var(--secondary);
}
.footer-bottom {
  border-top: 1px solid var(--border-color);
  margin-top: 3rem;
  padding-top: 2rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.footer-input-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.footer-input {
  flex: 1 1 180px;
  border-radius: 60px;
  border: 1px solid var(--border-color);
  padding: 0.9rem 1.5rem;
  background: var(--bg-secondary);
  backdrop-filter: blur(4px);
  color: var(--text-primary);
}
.footer-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
}
.footer-btn {
  border-radius: 60px;
  padding: 0.9rem 2rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--primary);
  color: var(--text-inverse);
  border: none;
  transition: 0.2s;
}
.footer-btn:hover {
  background: var(--secondary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}