html {
     scroll-behavior: smooth;
     scroll-padding-top: 93px;
}
 :root {
    /* Dark mode backgrounds - smoother gradients */
     --bg: #0a0e1a;
     --bg-secondary: #111827;
     --card: #1a1f2e;
     --card-hover: #242938;
    /* Text colors - better contrast */
     --text: #ffffff;
     --text-secondary: #a5b4fc;
     --muted: #6b7280;
    /* Brand colors - cohesive purple/pink theme */
     --primary: #a78bfa;
     --primary-dark: #8b5cf6;
     --primary-light: #c4b5fd;
     --accent: #f472b6;
     --accent-dark: #ec4899;
     --success: #34d399;
     --danger: #f87171;
     --warning: #fbbf24;
     --cyan: #22d3ee;
    /* Borders - subtle */
     --border: #2d3748;
     --border-light: #374151;
    /* Gradients - smoother transitions */
     --gradient-main: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
     --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f472b6 100%);
     --gradient-card: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(244, 114, 182, 0.1) 100%);
     --gradient-success: linear-gradient(135deg, #34d399 0%, #22d3ee 100%);
    /* Shadows - depth */
     --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
     --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
     --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
     --shadow-glow: 0 0 40px rgba(167, 139, 250, 0.3);
}
 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}
 html, body {
     width: 100%;
     overflow-x: hidden;
     margin: 0;
     padding: 0;
}
 body {
     font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
     background: var(--bg);
     color: var(--text);
     line-height: 1.6;
}
 h1, h2, h3, h4, h5, h6 {
     font-family: 'Outfit', 'Space Grotesk', sans-serif;
     font-weight: 700;
}
/* ===== NAVIGATION ===== */
 .navbar {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     background: rgba(15, 23, 42, 0.95);
     backdrop-filter: blur(10px);
     border-bottom: 1px solid var(--border);
     z-index: 9999 !important;
     position: sticky;
     transition: all 0.3s ease;
     width: 100%;
}
 .navbar.scrolled {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     background: rgba(15, 23, 42, 0.98);
}
 .nav-container {
     max-width: 1400px;
     margin: 0 auto;
     padding: 16px 24px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
}
 .logo {
     text-decoration: none;
     display: flex;
     align-items: center;
     cursor: pointer;
     padding: 0;
}
 .logo img {
     height: 60px;
     max-height: 60px;
     width: auto;
     display: block;
     transition: transform 0.2s ease;
}
 .logo:hover img {
     transform: scale(1.05);
}
 .nav-links {
     display: flex;
     gap: 32px;
     z-index: 1000 !important;
     background: var(--card);
     list-style: none;
     align-items: center;
     flex-wrap: wrap;
}
 .nav-links a {
     color: var(--text-secondary);
     text-decoration: none;
     font-weight: 500;
     font-size: 15px;
     transition: color 0.2s;
     cursor: pointer;
}
 .nav-links a:hover {
     color: var(--primary);
}
 .btn-primary {
     background: var(--gradient-main);
     color: white;
     padding: 12px 28px;
     border-radius: 12px;
     font-weight: 600;
     border: none;
     cursor: pointer;
     transition: all 0.3s ease;
     font-size: 15px;
     text-transform: lowercase;
     box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}
 .btn-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}
 .mobile-menu-toggle {
     display: block;
     background: transparent;
     border: none;
     color: var(--text);
     font-size: 24px;
     cursor: pointer;
     padding: 8px;
}
/* ===== HERO SECTION ===== */
 .hero {
     padding: 180px 24px 120px;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     text-align: center;
     position: relative;
     overflow: hidden;
     min-height: 50vh;
     max-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
}
 .hero::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
     background-size: 40px 40px;
     animation: drift 20s linear infinite;
}
 @keyframes drift {
     from {
         transform: translate(0, 0);
    }
     to {
         transform: translate(40px, 40px);
    }
}
 .hero-content {
     max-width: 900px;
     margin: 0 auto;
     position: relative;
     z-index: 1;
     padding: 0 20px;
     width: 100%;
}
 .hero-logo {
     margin-bottom: 40px;
     animation: fadeInDown 1s ease-out;
}
 .hero-logo img {
     height: 120px;
     width: auto;
     max-width: 100%;
     filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
     transition: transform 0.3s ease;
}
 .hero-logo img:hover {
     transform: scale(1.05);
}
 @keyframes fadeInDown {
     from {
         opacity: 0;
         transform: translateY(-30px);
    }
     to {
         opacity: 1;
         transform: translateY(0);
    }
}
 .hero h1 {
     font-size: 64px;
     font-weight: 900;
     margin-bottom: 24px;
     line-height: 1.1;
     letter-spacing: -1px;
}
 .hero p {
     font-size: 22px;
     opacity: 0.95;
     margin-bottom: 40px;
     line-height: 1.7;
     max-width: 700px;
     margin-left: auto;
     margin-right: auto;
}
 .hero-buttons {
     display: flex;
     gap: 16px;
     justify-content: center;
     flex-wrap: wrap;
}
 .btn-hero {
     padding: 14px 32px;
     border-radius: 10px;
     font-weight: 600;
     font-size: 16px;
     border: none;
     cursor: pointer;
     transition: all 0.2s;
}
 .btn-hero-primary {
     background: white;
     color: var(--primary);
}
 .btn-hero-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
 .btn-hero-secondary {
     background: rgba(255, 255, 255, 0.2);
     color: white;
     border: 2px solid white;
}
 .btn-hero-secondary:hover {
     background: rgba(255, 255, 255, 0.3);
}
/* ===== FEATURES SECTION ===== */
 .features {
     padding: 80px 24px;
     background: var(--bg-secondary);
     width: 100%;
     max-width: 100vw;
     overflow-x: hidden;
}
 .container {
     max-width: 1200px;
     margin: 0 auto;
     width: 100%;
     padding: 0 20px;
}
 .section-header {
     text-align: center;
     margin-bottom: 60px;
}
 .section-header h2 {
     font-size: 42px;
     font-weight: 800;
     margin-bottom: 16px;
     color: var(--text);
}
 .section-header p {
     font-size: 18px;
     color: var(--text-secondary);
     max-width: 600px;
     margin: 0 auto;
}
 .features-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 32px;
}
 .feature-card {
     background: var(--card);
     padding: 32px;
     border-radius: 16px;
     border: 1px solid var(--border);
     transition: all 0.3s ease;
     max-width: 600px;
     margin: 0 auto;
     width: 100%;
}
 .feature-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 12px 40px rgba(139, 92, 246, 0.3);
     border-color: var(--primary);
}
 .feature-icon {
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, var(--primary), var(--accent));
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 28px;
     margin-bottom: 20px;
}
 .feature-card h3 {
     font-size: 22px;
     font-weight: 700;
     margin-bottom: 12px;
     color: var(--text);
}
 .feature-card p {
     color: var(--text-secondary);
     line-height: 1.7;
}
/* Plan cards grid */
 .plans-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 32px;
     max-width: 1100px;
     margin: 0 auto;
     width: 100%;
     padding: 0 20px;
}
/* Social proof section */
 .social-proof-stats {
     display: flex;
     justify-content: center;
     gap: 48px;
     flex-wrap: wrap;
     align-items: center;
}
/* ===== DASHBOARD SECTION ===== */
 .dashboard {
     padding: 120px 24px 80px;
     display: none;
}
 .dashboard.active {
     display: block;
}
 body.dashboard-view .hero, body.dashboard-view .features {
     display: none !important;
}
 .dashboard-nav {
     background: white;
     border-radius: 12px;
     padding: 16px;
     margin-bottom: 32px;
     display: flex;
     gap: 16px;
     flex-wrap: wrap;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
 .dashboard-nav button {
     padding: 10px 20px;
     background: var(--bg-secondary);
     border: none;
     border-radius: 8px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s;
     color: var(--text-secondary);
}
 .dashboard-nav button:hover {
     background: var(--primary);
     color: white;
}
 .dashboard-nav button.active {
     background: var(--primary);
     color: white;
}
 .card {
     background: var(--card);
     padding: 28px;
     border-radius: 16px;
     border: 1px solid var(--border);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     margin-bottom: 24px;
}
 .card h2 {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 8px;
     color: var(--text);
}
 .card h3 {
     font-size: 14px;
     font-weight: 600;
     color: var(--muted);
     margin-bottom: 16px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
}
/* Form inputs */
 input, select, textarea {
     width: 100%;
     padding: 12px 16px;
     border: 1px solid var(--border);
     border-radius: 10px;
     font-family: 'Space Grotesk', sans-serif;
     background: var(--bg-secondary);
     color: var(--text);
     font-size: 15px;
     transition: all 0.2s;
}
 input:focus, select:focus, textarea:focus {
     outline: none;
     border-color: var(--primary);
     box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
     background: var(--card);
}
 input::placeholder, textarea::placeholder {
     color: var(--muted);
}
 label {
     display: block;
     font-size: 14px;
     font-weight: 600;
     margin-bottom: 8px;
     color: var(--text);
}
 button {
     padding: 12px 28px;
     background: var(--primary);
     color: white;
     border: none;
     border-radius: 10px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s;
     font-size: 15px;
}
 button:hover {
     background: var(--primary-dark);
     transform: translateY(-1px);
}
 .button-group {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
     margin-top: 20px;
}
 .grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 20px;
     margin-top: 24px;
}
 .grid-2 {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 16px;
     margin-top: 16px;
}
 .kpi-card {
     background: var(--card);
     padding: 24px;
     border-radius: 16px;
     border: 1px solid var(--border);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
 .kpi-card h3 {
     font-size: 13px;
     color: var(--muted);
     margin-bottom: 8px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
}
 .kpi-value {
     font-size: 36px;
     font-weight: 800;
     color: var(--text);
     margin-bottom: 8px;
}
 .kpi-label {
     font-size: 13px;
     color: var(--muted);
}
 .big {
     font-size: 36px;
     font-weight: 800;
     color: var(--text);
}
 .good {
     border-left: 4px solid var(--success);
}
 .bad {
     border-left: 4px solid var(--danger);
}
 .advice-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 20px;
}
 .advice {
     background: var(--card);
     padding: 24px;
     border-radius: 16px;
     border: 1px solid var(--border);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
     transition: all 0.3s;
}
 .advice:hover {
     transform: translateY(-4px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
 .advice h4 {
     font-size: 16px;
     font-weight: 700;
     margin-bottom: 8px;
     color: var(--text);
}
 .advice p, .advice ul {
     font-size: 14px;
     line-height: 1.7;
     color: var(--text-secondary);
}
 .advice ul {
     padding-left: 20px;
     margin-top: 8px;
}
 .advice.spending {
     border-left: 4px solid var(--primary);
}
 .advice.risk {
     border-left: 4px solid var(--danger);
}
 .advice.forecast {
     border-left: 4px solid var(--accent);
}
 .advice.optimize {
     border-left: 4px solid var(--success);
}
 .collapsible {
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     align-items: center;
     transition: opacity 0.2s;
     color: var(--text);
}
 .collapsible:hover {
     opacity: 0.8;
}
 .collapsible h2 {
     color: var(--text);
}
 .collapsible-content {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.4s ease;
}
 .collapsible-content.active {
     max-height: 2000px;
}
 .status-message {
     padding: 14px 20px;
     border-radius: 10px;
     margin-top: 16px;
     font-size: 15px;
     font-weight: 500;
}
 .status-success {
     background: rgba(16, 185, 129, 0.2);
     color: var(--success);
     border: 1px solid var(--success);
}
 .status-error {
     background: rgba(239, 68, 68, 0.2);
     color: var(--danger);
     border: 1px solid var(--danger);
}
 textarea {
     height: 200px;
     font-family: monospace;
     font-size: 13px;
}
 .income-preview {
     background: rgba(139, 92, 246, 0.1);
     border: 1px solid var(--primary);
     padding: 14px;
     border-radius: 10px;
     margin-top: 12px;
     font-size: 14px;
     color: var(--text);
     font-weight: 600;
}
 .payment-row {
     display: grid;
     grid-template-columns: 2fr 1fr;
     gap: 12px;
     align-items: end;
}
 .loading {
     display: inline-block;
     width: 20px;
     height: 20px;
     border: 3px solid rgba(255, 255, 255, 0.3);
     border-radius: 50%;
     border-top-color: white;
     animation: spin 1s ease-in-out infinite;
}
 @keyframes spin {
     to {
         transform: rotate(360deg);
    }
}
 #survey {
     display: none;
}
 #survey.active {
     display: block;
}
 .footer {
     background: var(--text);
     color: white;
     padding: 40px 24px;
     text-align: center;
     margin-top: 80px;
}
 .footer p {
     opacity: 0.8;
     font-size: 14px;
}
 .footer img {
     filter: brightness(0) invert(1);
}
 .btn-secondary {
     background: var(--bg-secondary);
     color: var(--text);
}
 .btn-secondary:hover {
     background: #e2e8f0;
}
 .btn-danger {
     background: var(--danger);
}
 .btn-danger:hover {
     background: #b91c1c;
}
 .btn-purple {
     background: var(--accent);
}
 .btn-purple:hover {
     background: #7c3aed;
}
/* Modals */
 #pricingModal, #addAccountModal {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.7);
    /* Darker overlay */
     z-index: 9999;
    /* Increased z-index */
     justify-content: center;
     align-items: center;
     padding: 20px;
}
 #pricingModal.show, #addAccountModal.show {
     display: flex !important;
}
 #pricingModal > div, #addAccountModal > div {
     background: var(--card) !important;
     color: var(--text);
     border: 1px solid var(--border);
}
 #pricingModal h2, #pricingModal h3, #addAccountModal h2 {
     color: var(--text);
}
 #pricingModal p, #addAccountModal p, #addAccountModal label {
     color: var(--text-secondary);
}
/* ===== RESPONSIVE DESIGN ===== */
/* Laptop optimization (1366px - 1920px) */
 @media (min-width: 1366px) and (max-width: 1919px) {
     .hero h1 {
         font-size: 64px;
    }
     .container {
         max-width: 1200px;
    }
}
/* Desktop optimization for 1920px+ screens "keep"*/
 @media (min-width: 1920px) {
     .hero h1 {
         font-size: 72px;
    }
     .hero p {
         font-size: 24px;
         max-width: 800px;
    }
     .section-header h2 {
         font-size: 48px;
    }
     .feature-card {
         max-width: 550px;
    }
     .container {
         max-width: 1400px;
    }
}
/* Plan cards grid - 3 columns on desktop */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1300px;
  margin: 0 auto 80px auto; /* ✅ Added bottom margin to prevent cutoff */
  width: 100%;
  padding: 0 20px 40px 20px; /* ✅ Added bottom padding */
}

/* ✅ Ensure all cards have consistent height */
.plans-grid .feature-card {
  display: flex;
  flex-direction: column;
  min-height: 650px;
}

/* ✅ Make feature list flex to push button to bottom */
.plans-grid .feature-card > div[style*="min-height"] {
  flex: 1;
}

/* Large desktop (1920px+) - wider cards */
@media (min-width: 1920px) {
  .plans-grid {
    max-width: 1500px;
    gap: 40px;
  }
}

/* Desktop (1366px - 1919px) - keep 3 columns */
@media (min-width: 1366px) and (max-width: 1919px) {
  .plans-grid {
    max-width: 1200px;
  }
}

/* Laptop/Tablet landscape (969px - 1365px) - 3 columns but tighter */
@media (min-width: 969px) and (max-width: 1365px) {
  .plans-grid {
    gap: 24px;
    max-width: 1000px;
  }
  
  .feature-card {
    padding: 24px;
  }
}

/* Tablet (769px - 968px) - 2 columns, Premium wraps below */
@media (min-width: 769px) and (max-width: 968px) {
  .plans-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  
  /* Premium card spans full width on third row */
  .plans-grid > .feature-card:last-child {
    grid-column: 1 / -1;
    max-width: 450px;
    margin: 0 auto;
  }
}

/* Mobile (up to 768px) - 1 column, stacked */
@media (max-width: 768px) {
  .plans-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 500px;
  }
  
  .feature-card {
    width: 100%;
  }
}
/* Mobile styles */
/* ============================================ MOBILE SIDEBAR - SIGN OUT BUTTON FIX ============================================ "keep"*/
 @media (max-width: 968px) {
    /* CRITICAL: Make sidebar a flex container with full height */
     .dashboard-sidebar {
         position: fixed !important;
         left: -100%;
         top: 0;
         bottom: 0;
         width: 280px;
         height: 100vh;
        /* ✅ CRITICAL: Full height */
         z-index: 9999;
         transition: left 0.3s ease;
         overflow-y: auto;
        /* ✅ CRITICAL: Allow scrolling */
         display: flex !important;
        /* ✅ CRITICAL: Flexbox */
         flex-direction: column !important;
        /* ✅ CRITICAL: Vertical layout */
         background: var(--bg-secondary);
        /* Ensure background */
    }
     .dashboard-sidebar.mobile-open {
         left: 0 !important;
    }
    /* Header stays at top */
     .sidebar-header {
         flex-shrink: 0;
        /* Don't shrink */
         padding: 24px 20px;
         border-bottom: 1px solid var(--border);
    }
    /* Navigation takes middle space and scrolls */
     .sidebar-nav {
         flex: 1;
        /* ✅ CRITICAL: Takes remaining space */
         overflow-y: auto;
        /* Scrollable if needed */
         padding: 20px 0;
    }
    /* Footer stays at bottom - ALWAYS VISIBLE */
     .sidebar-footer {
         flex-shrink: 0;
        /* ✅ CRITICAL: Don't shrink */
         padding: 20px;
         border-top: 1px solid var(--border);
         background: var(--bg-secondary);
    }
    /* Make sign out button full width */
     .sidebar-footer button {
         width: 100% !important;
         padding: 14px;
         font-size: 15px;
         font-weight: 600;
    }
    /* Show hamburger button */
     .mobile-menu-toggle {
         display: block !important;
         position: fixed;
         top: 20px;
         left: 20px;
         z-index: 10000;
         background: var(--primary);
         color: white;
         border: none;
         border-radius: 8px;
         padding: 12px 16px;
         font-size: 24px;
         cursor: pointer;
         box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    /* Overlay */
     .sidebar-overlay {
         display: none;
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: rgba(0, 0, 0, 0.5);
         z-index: 9998;
    }
     .sidebar-overlay.active {
         display: block;
    }
    /* Main content full width */
     .dashboard-main {
         margin-left: 0 !important;
         width: 100% !important;
         padding-top: 80px;
    }
}
/* ============================================ DESKTOP - KEEP NORMAL SIDEBAR ============================================ "keep"*/
/* ============================================ DESKTOP - KEEP NORMAL SIDEBAR ============================================ */
 @media (min-width: 969px) {
    /* ✅ CRITICAL: Force hide ALL menu toggles on desktop */
     .mobile-menu-toggle, .dashboard-toggle, button.mobile-menu-toggle {
         display: none !important;
         visibility: hidden !important;
    }
     .sidebar-overlay {
         display: none !important;
    }
     .dashboard-sidebar {
         position: fixed;
         left: 0 !important;
         top: 0;
         width: 260px;
         height: 100vh;
         display: flex;
         flex-direction: column;
    }
     .sidebar-nav {
         flex: 1;
         overflow-y: auto;
    }
     .sidebar-footer {
         flex-shrink: 0;
    }
     .dashboard-main {
         margin-left: 260px;
         width: calc(100% - 260px);
    }
}
/* ========================================= FORCE "MOBILE" MENU ON ALL DEVICES ========================================= */
/* 1. Always show the Hamburger Button */
 .mobile-menu-toggle {
     display: block !important;
    /* Force visible on desktop */
     font-size: 24px;
     background: none;
     border: none;
     color: var(--text);
     cursor: pointer;
     padding: 8px;
     z-index: 1001;
}
/* 2. Hide links by default (Slide-down style) */
 .nav-links {
     display: none;
    /* Hidden by default everywhere */
     position: absolute;
    /* Pushes content down or overlays */
     top: 100%;
    /* Sits right below the navbar */
     left: 0;
     right: 0;
     flex-direction: column;
     background: var(--card);
    /* Uses your dark theme card color */
     padding: 24px;
     border-bottom: 1px solid var(--border);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    /* Nice drop shadow */
     z-index: 1000;
     gap: 16px;
     text-align: center;
    /* Center text for that modern vibe */
}
/* 3. The class JS adds to show the menu */
 .nav-links.mobile-open {
     display: flex !important;
     animation: slideDown 0.3s ease-out;
}
/* 4. Make the buttons look good in the list */
 .nav-links a, .nav-links button {
     width: 100%;
     justify-content: center;
     padding: 12px;
     font-size: 18px;
    /* Slightly larger text for menu feel */
}
/* Animation for smooth opening */
 @keyframes slideDown {
     from {
         opacity: 0;
         transform: translateY(-10px);
    }
     to {
         opacity: 1;
         transform: translateY(0);
    }
}
 .detailed-features {
     padding: 120px 24px;
     background: var(--bg);
     overflow: hidden;
}
 .feature-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 80px;
     margin-bottom: 150px;
     max-width: 1200px;
     margin-left: auto;
     margin-right: auto;
}
 .feature-row.reverse {
     flex-direction: row-reverse;
}
 .feature-text {
     flex: 1;
     z-index: 2;
}
 .feature-badge {
     display: inline-block;
     padding: 6px 14px;
     border-radius: 100px;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 1px;
     text-transform: uppercase;
     margin-bottom: 24px;
}
 .feature-text h2 {
     font-family: 'Outfit', sans-serif;
     font-size: clamp(32px, 5vw, 44px);
    /* Responsive font size */
     font-weight: 800;
     margin-bottom: 20px;
     line-height: 1.1;
     background: linear-gradient(to right, #fff, var(--text-secondary));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
}
 .feature-text p {
     font-size: 18px;
     line-height: 1.6;
     color: var(--muted);
     margin-bottom: 30px;
}
 .feature-list {
     list-style: none;
     padding: 0;
}
 .feature-list li {
     font-size: 16px;
     color: var(--text);
     margin-bottom: 12px;
     display: flex;
     align-items: center;
     gap: 10px;
     font-weight: 500;
}
 .feature-image {
     flex: 1.2;
     display: flex;
     justify-content: center;
     position: relative;
}
/* The "Glow" behind the mockup */
 .feature-image::after {
     content: '';
     position: absolute;
     width: 80%;
     height: 80%;
     background: var(--primary);
     filter: blur(120px);
     opacity: 0.15;
     z-index: 1;
}
 .mockup {
     width: 100%;
     max-width: 500px;
     border-radius: 32px;
     border: 1px solid var(--border);
     box-shadow: 0 30px 60px rgba(0,0,0,0.6);
     z-index: 2;
     transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
 .mockup:hover {
     transform: translateY(-15px) scale(1.02);
     box-shadow: 0 40px 80px rgba(167, 139, 250, 0.2);
}
/* Tablet & Mobile Tweaks */
 @media (max-width: 968px) {
     .feature-row, .feature-row.reverse {
         flex-direction: column;
         text-align: center;
         gap: 50px;
         margin-bottom: 100px;
    }
     .feature-list li {
         justify-content: center;
    }
}
/* Bank Account Management Styles */
 .banks-list {
     display: flex;
     flex-direction: column;
     gap: 16px;
}
 .bank-card {
     background: var(--bg-secondary);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     transition: border-color 0.2s;
}
 .bank-card:hover {
     border-color: var(--primary-light);
}
 .bank-info {
     display: flex;
     align-items: center;
     gap: 16px;
}
 .bank-logo-placeholder {
     width: 48px;
     height: 48px;
     background: var(--card);
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     color: var(--primary);
     border: 1px solid var(--border);
}
 .bank-details h4 {
     margin: 0;
     font-size: 16px;
     color: var(--text);
}
 .bank-details p {
     margin: 0;
     font-size: 13px;
     color: var(--muted);
}
 .status-badge {
     padding: 4px 10px;
     border-radius: 100px;
     font-size: 11px;
     font-weight: 700;
     text-transform: uppercase;
     background: rgba(52, 211, 153, 0.1);
     color: var(--success);
     border: 1px solid var(--success);
}
/* Security Section */
 .security-item {
     display: flex;
     gap: 12px;
     margin-bottom: 16px;
}
 .security-icon {
     font-size: 18px;
     margin-top: 2px;
}
 .security-title {
     font-size: 13px;
     font-weight: 700;
     color: var(--text);
     margin: 0;
}
 .security-desc {
     font-size: 12px;
     color: var(--muted);
     margin: 0;
     line-height: 1.4;
}
 .empty-state {
     text-align: center;
     padding: 40px;
     color: var(--muted);
}
 .empty-icon {
     font-size: 48px;
     margin-bottom: 10px;
     opacity: 0.5;
}
 @media (max-width: 968px) {
     #accounts-section .grid {
         grid-template-columns: 1fr;
    }
}
/* Sidebar Updates */
 .sidebar-divider {
     border: 0;
     border-top: 1px solid var(--border);
     margin: 12px 20px;
     opacity: 0.5;
}
/* PRO Badge Styling */
 .pro-badge {
     margin-left: auto;
    /* Pushes the badge to the far right */
     font-size: 10px;
     background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    /* Gold Gradient */
     color: #000;
     padding: 2px 6px;
     border-radius: 4px;
     font-weight: 800;
     letter-spacing: 0.5px;
     box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    /* Gold Glow */
}
/* Locked/Placeholder Item Styling */
 .nav-item.locked {
     opacity: 0.5;
     cursor: not-allowed;
     filter: grayscale(0.8);
}
 .nav-item.locked:hover {
     background: transparent;
    /* Disable hover effect */
     color: var(--text-secondary);
    /* Keep text color dull */
     transform: none;
    /* Disable movement */
}
/* Ensure the PRO badge doesn't get messed up on hover */
 .nav-item:hover .pro-badge {
     transform: scale(1.05);
     transition: transform 0.2s ease;
}
/* Pro Upgrade Banner */
 .pro-upgrade-banner {
     background: linear-gradient(to right, rgba(255, 215, 0, 0.05), rgba(255, 165, 0, 0.05));
     border: 1px solid rgba(255, 215, 0, 0.2);
     border-radius: 12px;
     padding: 20px;
     margin-bottom: 24px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 16px;
     transition: transform 0.2s ease;
}
 .pro-upgrade-banner:hover {
     background: linear-gradient(to right, rgba(255, 215, 0, 0.08), rgba(255, 165, 0, 0.08));
     border-color: rgba(255, 215, 0, 0.4);
}
/* Gold Button Style */
 .btn-gold {
     background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
     color: #000;
     border: none;
     padding: 10px 24px;
     border-radius: 8px;
     font-weight: 800;
     font-size: 13px;
     cursor: pointer;
     box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
     white-space: nowrap;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     transition: all 0.2s;
}
 .btn-gold:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 16px rgba(255, 215, 0, 0.5);
}
/* Responsive adjustment for banner */
 @media (max-width: 650px) {
     .pro-upgrade-banner {
         flex-direction: column;
         text-align: center;
         align-items: stretch;
    }
     .pro-upgrade-banner > div {
         flex-direction: column;
         margin-bottom: 12px;
    }
}
/* ============================================ DESKTOP - KEEP NORMAL SIDEBAR ============================================ */
 @media (min-width: 969px) {
    /* ✅ CRITICAL: Only hide DASHBOARD menu toggle on desktop */
     .dashboard-toggle, .dashboard-sidebar ~ .mobile-menu-toggle {
         display: none !important;
         visibility: hidden !important;
    }
    /* Keep landing page menu toggle visible */
     .navbar .mobile-menu-toggle {
         display: block !important;
         visibility: visible !important;
    }
     .sidebar-overlay {
         display: none !important;
    }
     .dashboard-sidebar {
         position: fixed;
         left: 0 !important;
         top: 0;
         width: 260px;
         height: 100vh;
         display: flex;
         flex-direction: column;
    }
     .sidebar-nav {
         flex: 1;
         overflow-y: auto;
    }
     .sidebar-footer {
         flex-shrink: 0;
    }
     .dashboard-main {
         margin-left: 260px;
         width: calc(100% - 260px);
    }
}
/* Bank Card Styling */
 .bank-card {
     background: var(--bg-secondary);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 16px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 12px;
}
 .bank-info {
     display: flex;
     align-items: center;
     gap: 12px;
}
 .bank-logo-placeholder {
     width: 40px;
     height: 40px;
     background: var(--card);
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     border: 1px solid var(--border);
}
 .bank-details h4 {
     margin: 0;
     font-size: 15px;
     color: var(--text);
}
 .bank-details p {
     margin: 2px 0 0 0;
     font-size: 12px;
     color: var(--muted);
}
/* ========================================== ASSET TRACKER STYLES ========================================== */
 .asset-card {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 24px;
     margin-bottom: 16px;
     transition: all 0.3s;
}
 .asset-card:hover {
     border-color: var(--primary);
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
 .asset-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 48px;
}
 .asset-actions {
     display: flex;
     gap: 8px;
}
 .asset-stats {
     display: grid;
    /* Capping it at 4 columns so it doesn't get too thin on wide screens */
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 16px;
     margin-top: 16px;
}
 .asset-stat {
     background: var(--bg-secondary);
     padding: 12px;
     border-radius: 8px;
}
 .asset-stat-label {
     font-size: 11px;
     text-transform: uppercase;
     color: var(--muted);
     margin-bottom: 4px;
     letter-spacing: 0.5px;
}
 .asset-stat-value {
     font-size: 18px;
     font-weight: 700;
     color: var(--text);
}
 .gain-positive {
     color: #10b981 !important;
}
 .gain-negative {
     color: #ef4444 !important;
}
 .empty-state {
     text-align: center;
     padding: 60px 20px;
     background: var(--bg-secondary);
     border-radius: 16px;
     color: var(--muted);
}
 .empty-icon {
     font-size: 64px;
     margin-bottom: 16px;
     opacity: 0.5;
}
/* Modal Styles */
 #addAssetModal {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.7);
     z-index: 10000;
     align-items: center;
     justify-content: center;
     padding: 20px;
}
 #addAssetModal.show {
     display: flex !important;
}
 .asset-allocation-chart {
     width: 100%;
     height: 300px;
     position: relative;
}
/* Responsive */
 @media (max-width: 768px) {
     .asset-stats {
         grid-template-columns: 1fr 1fr;
    }
     .asset-header {
         flex-direction: column;
         gap: 12px;
    }
     .asset-actions {
         width: 100%;
    }
     .asset-actions button {
         flex: 1;
    }
}
 #assets-section {
    /* Matches the ID in your dashboard.html */
     max-width: 1100px;
     margin: 0 auto;
     width: 100%;
}
/* FIX ASSETS CENTERING */
 #assets-section .container {
     padding: 0 20PX;
     max-width: 1100px;
     margin: 0 auto;
     width: 100%;
}
 #assets-section .section-header {
     max-width: 1100px;
     margin: 0 auto 32px auto;
     padding: 50px 50px;
}
 .assets-actions {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 24px;
}
 #assets-section .card {
     border-radius: 16px;
     padding: 24px;
     box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
 #assets-section > .container > * + * {
     margin-top: 24px;
}
/* Stock Portfolio Section Centering */
 #stocks-section {
     width: 100%;
     max-width: 100vw;
     overflow-x: hidden;
}
 #stocks-section .section-header {
     text-align: center;
     padding: 0 20px;
}
 #stockPortfolioSummary, #stockPortfolioByAccount {
     width: 100%;
}
/* Center empty state */
 #stockPortfolioByAccount > div {
     margin-left: auto;
     margin-right: auto;
}
/* Ensure the modal is a simple centered box, overriding any sidebar flex rules */
 #addAccountModal > div {
     display: block !important;
    /* Forces vertical flow */
     grid-template-columns: none !important;
    /* Removes grid columns */
     background: var(--card) !important;
     border: 1px solid var(--border);
     max-width: 500px !important;
    /* Keep it compact */
     margin: auto;
}
/* Ensure inputs inside the stock list don't overflow */
 #stockHoldingsList input {
     width: 100%;
     min-width: 0;
    /* Prevents flex/grid blowouts */
     font-size: 13px;
}
/* Removes any leftover sidebar behavior and cleans up the stock box */
 #newAccountStocksField {
     display: none;
    /* Hidden by default, JS turns it on */
     border: 1px solid var(--border);
     background: var(--bg-secondary);
     padding: 20px;
     border-radius: 12px;
     margin-top: 15px;
     width: 100%;
}
 #stockHoldingsList input {
     background: var(--card);
     border: 1px solid var(--border);
     color: var(--text);
     border-radius: 6px;
     width: 100%;
}
/* Ensure all feature cards have consistent spacing */
.features .feature-card {
  margin-bottom: 40px;
  height: auto;
  min-height: 600px; /* Ensures consistent height */
}

/* Fix Premium plan specifically if needed */
.plans-grid > .feature-card:last-child {
  margin-bottom: 40px;
}

/* Add padding to the features section to prevent cutoff */
.features {
  padding: 80px 24px 120px; /* Added extra bottom padding */
}
/* Ensure features section has enough bottom padding */
.features {
  padding: 80px 24px 120px; /* ✅ Increased bottom padding */
}

/* Add bottom margin to plans grid */
.plans-grid {
  margin-bottom: 60px; /* ✅ Extra space below cards */
}

/* Ensure all feature cards have consistent structure */
.feature-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* Full Page Chat Styles */
.chat-message {
  display: flex;
  gap: 16px;
  max-width: 80%;
  animation: fadeIn 0.3s ease;
}

.chat-message.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-message.ai {
  align-self: flex-start;
}

.chat-message .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.chat-message.user .avatar {
  background: var(--primary);
  color: white;
}

.chat-message .content {
  padding: 16px 20px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.6;
  position: relative;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.chat-message.ai .content {
  background: var(--card);
  border: 1px solid var(--border);
  border-top-left-radius: 2px;
  color: var(--text);
}

.chat-message.user .content {
  background: var(--primary);
  color: white;
  border-top-right-radius: 2px;
}

/* Markdown-like styling for AI response */
.chat-message .content ul {
  padding-left: 20px;
  margin: 8px 0;
}

.chat-message .content li {
  margin-bottom: 4px;
}

.chat-message .content strong {
  color: inherit;
  font-weight: 700;
}

.tab-headers{display:flex;gap:8px;border-bottom:2px solid var(--border);margin-bottom:24px;}
.tab-btn{padding:12px 24px;background:none;border:none;border-bottom:3px solid transparent;color:var(--text-secondary);font-weight:600;cursor:pointer;}
.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary);}
.tab-content{display:none;}
.tab-content.active{display:block;}
#heroOverview{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:32px;border-radius:16px;}

/* ===== ADVICE CARDS REDESIGN ===== */
.advice-card {
  background: var(--card);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  gap: 20px;
  border: 1px solid var(--border);
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.advice-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}

.advice-icon {
  font-size: 48px;
  min-width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  flex-shrink: 0;
}

.advice-content {
  flex: 1;
}

.advice-content h4 {
  margin: 0 0 12px 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.advice-content ul {
  margin: 0;
  padding-left: 20px;
  color: var(--text-secondary);
  line-height: 1.8;
}

.advice-content li {
  margin-bottom: 8px;
}

/* Card-specific colors */
.spending-card { border-left: 4px solid #3b82f6; }
.spending-card .advice-icon { background: rgba(59, 130, 246, 0.15); }

.risk-card { border-left: 4px solid #ef4444; }
.risk-card .advice-icon { background: rgba(239, 68, 68, 0.15); }

.optimize-card { border-left: 4px solid #10b981; }
.optimize-card .advice-icon { background: rgba(16, 185, 129, 0.15); }

.forecast-card { border-left: 4px solid #8b5cf6; }
.forecast-card .advice-icon { background: rgba(139, 92, 246, 0.15); }

/* Mobile */
@media (max-width: 768px) {
  .advice-card {
    flex-direction: column;
    text-align: center;
  }
  
  .advice-icon {
    margin: 0 auto;
  }
}
/* ==========================================
   UPDATED ANALYSIS / INSIGHTS STYLES
   ========================================== */

/* 1. The Main Insight Container */
.insight-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.insight-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    border-color: var(--border-light);
}

/* 2. Insight Types (Color Coding) */
.insight-card.spending { border-left: 4px solid var(--danger); }
.insight-card.budget   { border-left: 4px solid var(--primary); }
.insight-card.tip      { border-left: 4px solid var(--success); }

/* 3. Typography Updates */
.insight-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.insight-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    background: var(--bg-secondary);
}

.insight-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.insight-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* 4. The Budget Progress Bars (The "Fintech" Look) */
.budget-grid {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

.budget-item {
    background: var(--bg-secondary); /* Slightly darker inner bg */
    padding: 12px 16px;
    border-radius: 12px;
}

.budget-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
}

.budget-category {
    font-weight: 600;
    color: var(--text);
    text-transform: capitalize; /* Fixes LOAN_REPAYMENTS -> Loan Repayments */
}

.budget-values {
    font-family: 'Space Grotesk', monospace; /* Monospace for numbers aligns better */
    color: var(--muted);
}

.budget-values strong {
    color: var(--text);
}

/* The Progress Bar Background */
.progress-track {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    overflow: hidden;
}

/* The Progress Bar Fill */
.progress-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Status Colors */
.status-ok { background: var(--success); }
.status-warning { background: var(--warning); }
.status-over { background: var(--danger); box-shadow: 0 0 10px rgba(248, 113, 113, 0.4); }

/* 5. Badges for Status (OVER / OK) */
.status-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 800;
    margin-left: 8px;
    text-transform: uppercase;
}

.badge-over { background: rgba(248, 113, 113, 0.2); color: var(--danger); }
.badge-ok   { background: rgba(52, 211, 153, 0.2); color: var(--success); }
/* ==========================================
   SAVINGS & EMERGENCY VISUALS
   ========================================== */

/* --- The Emergency Runway (Segmented Bar) --- */
.runway-container {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.runway-header {
    margin-bottom: 20px;
}

.runway-track {
    display: flex;
    gap: 4px;
    height: 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
    margin: 16px 0;
    position: relative;
}

.runway-segment {
    flex: 1;
    background: #374151; /* Inactive color */
    border-radius: 2px;
    position: relative;
    transition: background 0.5s ease;
}

.runway-segment.active {
    background: linear-gradient(90deg, #10b981, #059669);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.runway-segment:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.runway-segment:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }

.runway-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 8px;
}

/* --- Savings Grid (Buckets) --- */
.savings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.savings-bucket {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    transition: transform 0.2s;
    position: relative;
}

.savings-bucket:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
}

.bucket-icon {
    width: 40px;
    height: 40px;
    background: rgba(139, 92, 246, 0.1);
    color: var(--primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 12px;
}

.bucket-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text);
}

.bucket-amount {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 12px;
    font-family: 'Space Grotesk', sans-serif;
    background: linear-gradient(to right, #fff, #a5b4fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bucket-progress-bg {
    width: 100%;
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 100px;
    overflow: hidden;
}

.bucket-progress-fill {
    height: 100%;
    background: var(--gradient-main);
    border-radius: 100px;
}
/* ==========================================
   INVESTMENT ANALYSIS - ENHANCED STYLES
   ========================================== */

/* 1. Hero Portfolio Value Card */
.investment-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 40px 32px;
    border-radius: 20px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.4);
}

.investment-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: pulse-glow 4s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

.portfolio-value-display {
    font-size: 56px;
    font-weight: 900;
    margin: 16px 0;
    position: relative;
    z-index: 2;
    text-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.portfolio-gain-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
    padding: 8px 16px;
    background: rgba(255,255,255,0.2);
    border-radius: 100px;
    backdrop-filter: blur(10px);
}

/* 2. Enhanced Progress Bar */
.investment-progress-container {
    background: var(--bg-secondary);
    padding: 24px;
    border-radius: 16px;
    border: 1px solid var(--border);
    margin-bottom: 24px;
}

.investment-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.investment-progress-bar {
    position: relative;
    height: 40px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 20px;
    overflow: visible;
    margin: 20px 0;
}

.investment-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6 0%, #ec4899 100%);
    border-radius: 20px;
    position: relative;
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    padding: 0 16px;
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.5);
}

.investment-progress-fill::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #ec4899;
}

.investment-progress-text {
    color: white;
    font-weight: 700;
    font-size: 14px;
    z-index: 2;
}

.investment-milestone {
    position: absolute;
    bottom: -30px;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--muted);
    font-weight: 600;
}

/* 3. Investment Grid Layout */
.investment-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.investment-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.investment-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
    border-color: var(--primary);
}

.investment-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
}

.investment-card-title {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.investment-card-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 8px;
}

.investment-card-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 4. Contribution Recommendation Badge */
.contribution-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    margin-top: 8px;
}

.contribution-badge.excellent {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success);
    border: 1px solid var(--success);
}

.contribution-badge.good {
    background: rgba(251, 191, 36, 0.2);
    color: var(--warning);
    border: 1px solid var(--warning);
}

.contribution-badge.increase {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger);
    border: 1px solid var(--danger);
}

/* 5. Projection Breakdown Chart */
.projection-breakdown {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.projection-segment {
    display: flex;
    align-items: center;
    gap: 12px;
}

.projection-bar {
    flex: 1;
    height: 32px;
    background: var(--bg-secondary);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.projection-bar-fill {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 700;
    color: white;
    transition: width 1s ease-out;
}

.projection-bar-fill.current {
    background: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 100%);
}

.projection-bar-fill.contributions {
    background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
}

.projection-bar-fill.growth {
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

.projection-label {
    min-width: 140px;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
}

/* 6. Compound Interest Celebration Card */
.compound-interest-hero {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 32px;
    border-radius: 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.compound-interest-hero::before {
    content: '✨';
    position: absolute;
    font-size: 200px;
    top: -60px;
    right: -40px;
    opacity: 0.1;
}

.compound-percentage {
    font-size: 72px;
    font-weight: 900;
    margin: 16px 0;
    text-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.compound-label {
    font-size: 18px;
    opacity: 0.95;
    font-weight: 600;
}

/* 7. Count-up Animation */
@keyframes countUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.count-up {
    animation: countUp 0.6s ease-out;
}

/* 8. Quick Action Buttons */
.investment-quick-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.quick-action-btn {
    flex: 1;
    padding: 10px 16px;
    background: rgba(167, 139, 250, 0.1);
    border: 1px solid var(--primary);
    color: var(--primary);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.quick-action-btn:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
}

/* 9. Mobile Responsiveness */
@media (max-width: 768px) {
    .portfolio-value-display {
        font-size: 40px;
    }
    
    .investment-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .investment-card-value {
        font-size: 24px;
    }
    
    .compound-percentage {
        font-size: 48px;
    }
}
/* ==========================================
   RETIREMENT ADVICE - ENHANCED UI
   ========================================== */

/* Retirement Hero Card */
.retirement-hero-card {
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 24px;
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow: 0 8px 32px rgba(30, 58, 138, 0.3);
  position: relative;
  overflow: hidden;
}

.retirement-hero-card::before {
  content: '💼';
  position: absolute;
  top: -20px;
  right: -20px;
  font-size: 180px;
  opacity: 0.08;
}

.retirement-hero-card h3 {
  color: white;
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.retirement-hero-card .portfolio-value {
  font-size: 48px;
  font-weight: 900;
  color: white;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.retirement-hero-card .portfolio-subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  margin: 8px 0 0 0;
}

/* Retirement Contribution Card */
.retirement-contribution-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.retirement-contribution-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
  border-color: #f59e0b;
}

.retirement-contribution-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 8px;
}

.retirement-contribution-badge.excellent {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid #10b981;
}

.retirement-contribution-badge.good {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid #f59e0b;
}

.retirement-contribution-badge.increase {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid #ef4444;
}

/* Retirement Projection Card */
.retirement-projection-card {
  background: linear-gradient(135deg, #831843 0%, #be123c 100%);
  border-radius: 16px;
  padding: 28px;
  color: white;
  border: 1px solid rgba(190, 18, 60, 0.3);
  box-shadow: 0 8px 24px rgba(131, 24, 67, 0.3);
}

.retirement-projection-card h4 {
  color: white;
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.retirement-projection-value {
  font-size: 36px;
  font-weight: 900;
  margin: 12px 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.retirement-breakdown {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 16px;
  margin-top: 16px;
  backdrop-filter: blur(10px);
}

.retirement-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
}

.retirement-breakdown-row:last-child {
  margin-bottom: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-weight: 700;
}

.retirement-breakdown-label {
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 6px;
}

.retirement-breakdown-value {
  color: white;
  font-weight: 600;
}

/* Retirement Readiness Card */
.retirement-readiness-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  border-left: 4px solid #10b981;
}

.retirement-readiness-card.warning {
  border-left-color: #f59e0b;
}

.retirement-readiness-card.danger {
  border-left-color: #ef4444;
}

.retirement-readiness-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.retirement-readiness-status {
  display: flex;
  align-items: center;
  gap: 10px;
}

.retirement-readiness-icon {
  font-size: 32px;
}

.retirement-readiness-badge {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.retirement-readiness-badge.on-track {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid #10b981;
}

.retirement-readiness-badge.progress {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid #f59e0b;
}

.retirement-readiness-badge.behind {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid #ef4444;
}

.retirement-income-display {
  text-align: center;
  padding: 20px;
  background: var(--bg-secondary);
  border-radius: 12px;
  margin-bottom: 16px;
}

.retirement-income-value {
  font-size: 40px;
  font-weight: 900;
  color: var(--text);
  margin: 0;
}

.retirement-income-label {
  font-size: 13px;
  color: var(--muted);
  margin: 8px 0 0 0;
}

.retirement-replacement-bar {
  width: 100%;
  height: 40px;
  background: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin: 16px 0;
}

.retirement-replacement-fill {
  height: 100%;
  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 16px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.retirement-replacement-fill.high {
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

.retirement-replacement-fill.medium {
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

.retirement-replacement-fill.low {
  background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}

/* Responsive Design */
@media (max-width: 768px) {
  .retirement-hero-card .portfolio-value {
    font-size: 36px;
  }

  .retirement-projection-value {
    font-size: 28px;
  }

  .retirement-income-value {
    font-size: 32px;
  }

  .retirement-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== PROFESSIONAL POLISH ===== */

/* Better card shadows */
.card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* Beautiful buttons */
.btn-primary,
.btn-hero-primary {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-hero-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
}

.btn-primary:active,
.btn-hero-primary:active {
  transform: translateY(0);
}

/* Smooth section transitions */
.section-view {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Better table styling */
.transaction-row:hover {
  background: var(--bg-secondary);
  transition: background 0.2s;
}

/* Loading spinner */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loading-spinner {
  display: inline-block;
  animation: spin 1s linear infinite;
}

/* Toast notifications positioning */
.toast-notification {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 10000;
  animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Better mobile responsiveness */
@media (max-width: 768px) {
  .card {
    padding: 20px;
  }
  
  .section-header h1 {
    font-size: 28px;
  }
  
  .toast-notification {
    right: 16px;
    left: 16px;
    bottom: 16px;
  }
}

/* Professional scrollbar */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 10px;
  border: 3px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* Better focus states */
input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Disabled state */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* Status messages */
.status-success {
  color: var(--success);
  background: rgba(16, 185, 129, 0.1);
  padding: 12px 20px;
  border-radius: 8px;
  border-left: 4px solid var(--success);
}

.status-error {
  color: var(--error);
  background: rgba(239, 68, 68, 0.1);
  padding: 12px 20px;
  border-radius: 8px;
  border-left: 4px solid var(--error);
}

/* Empty states */
.empty-state {
  padding: 80px 20px;
  text-align: center;
  color: var(--text-secondary);
}

.empty-state-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.empty-state-description {
  font-size: 14px;
  margin-bottom: 24px;
}
/* Smooth page transitions */
.section-view {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.section-view.active {
  opacity: 1;
  transform: translateY(0);
}

/* Survey transition */
#survey {
  opacity: 0;
  transition: opacity 0.3s ease;
}

#survey[style*="display: block"] {
  opacity: 1;
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}