/* ========================================
   INDUSTRIAL GRAPHITE DARK THEME
   Based on DESIGNN.md specifications
   "The Monolithic Architect" Design System
   ======================================== */

:root {
    /* Core Colors - Industrial Graphite Palette */
    --charcoal: #131313;
    --silver: #c6c6c6;
    --silver-bright: #e2e2e2;
    --cobalt: #1c0598;
    --emerald: #10b981;
    --soft-coral: #ffb4ab;
    
    /* Surface Hierarchy - Tonal Layering */
    --surface-lowest: #0e0e0e;
    --surface-base: #131313;
    --surface-container-low: #1b1b1b;
    --surface-container: #1f1f1f;
    --surface-container-high: #2a2a2a;
    --surface-container-highest: #353535;
    
    /* Borders & Outlines */
    --outline: #988e90;
    --outline-variant: #4c4546;
    --ghost-border: rgba(76, 69, 70, 0.3);
    
    /* Glass Material */
    --glass-bg: rgba(255, 255, 255, 0.12);
    --glass-blur: 16px;
    --glass-elevated: rgba(255, 255, 255, 0.22);
    --glass-elevated-blur: 24px;
    --glass-sidebar: rgba(255, 255, 255, 0.15);
    --glass-sidebar-blur: 18px;
    
    /* Typography */
    --font-headline: 'Manrope', sans-serif;
    --font-body: 'Inter', sans-serif;
}

.dark-theme {
    background: var(--surface-base);
    color: var(--silver-bright);
    font-family: var(--font-body);
}

/* Typography - Manrope for Headlines */
.dark-theme h1,
.dark-theme h2,
.dark-theme h3,
.dark-theme h4,
.dark-theme h5,
.dark-theme h6 {
    font-family: var(--font-headline);
    color: var(--silver-bright);
}

/* Header - Glassmorphic Navbar */
.dark-theme .header {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--ghost-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
}

.dark-theme .header .navbar {
    background: transparent;
}

.dark-theme .header .navbar .main-nav .nav-item a.nav-link {
    color: var(--silver);
    font-family: var(--font-body);
    font-weight: 500;
}

.dark-theme .header .navbar .main-nav .nav-item a.nav-link:hover,
.dark-theme .header .navbar .main-nav .nav-item a.nav-link.active {
    color: var(--cobalt);
}

.dark-theme .header .navbar-toggler {
    background: var(--cobalt);
    backdrop-filter: blur(8px);
}

.dark-theme .header .navbar .main-nav .nav-item.dropdown .dropdown-menu {
    background: var(--surface-container);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--ghost-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.dark-theme .header .navbar .main-nav .nav-item.dropdown .dropdown-menu li .dropdown-item {
    color: var(--silver);
}

.dark-theme .header .navbar .main-nav .nav-item.dropdown .dropdown-menu li .dropdown-item:hover,
.dark-theme .header .navbar .main-nav .nav-item.dropdown .dropdown-menu li .dropdown-item:focus {
    background: var(--surface-container-high);
    color: var(--silver-bright);
}

@media (max-width: 991px) {
    .dark-theme .header {
        background: var(--glass-bg);
        backdrop-filter: blur(var(--glass-blur));
    }
    
    .dark-theme .header .navbar-collapse {
        background: var(--surface-container);
        backdrop-filter: blur(20px);
        padding: 20px;
        margin-top: 15px;
        border-radius: 0.125rem;
        border: 1px solid var(--ghost-border);
    }
}

/* Buttons - Emerald/Cobalt Gradient */
.dark-theme .site-btn,
.dark-theme .site-btn-sm,
.dark-theme .primary-btn,
.dark-theme .grad-btn {
    background: linear-gradient(135deg, #10b981 0%, #1c0598 100%) !important;
    color: #e2e2e2 !important;
    border: 0 !important;
    border-radius: 50px;
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.dark-theme .site-btn:hover,
.dark-theme .site-btn-sm:hover,
.dark-theme .primary-btn:hover,
.dark-theme .grad-btn:hover {
    background: linear-gradient(135deg, #1c0598 0%, #10b981 100%) !important;
    color: #e2e2e2 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}

/* All Button Variants */
.dark-theme button,
.dark-theme a.site-btn,
.dark-theme a.site-btn-sm,
.dark-theme a.primary-btn,
.dark-theme a.grad-btn,
.dark-theme .btn,
.dark-theme .btn-primary,
.dark-theme .btn-success {
    background: linear-gradient(135deg, #10b981 0%, #1c0598 100%) !important;
    color: #e2e2e2 !important;
    border: 0 !important;
    border-radius: 50px;
}

.dark-theme button:hover,
.dark-theme a.site-btn:hover,
.dark-theme a.site-btn-sm:hover,
.dark-theme a.primary-btn:hover,
.dark-theme a.grad-btn:hover,
.dark-theme .btn:hover,
.dark-theme .btn-primary:hover,
.dark-theme .btn-success:hover {
    background: linear-gradient(135deg, #1c0598 0%, #10b981 100%) !important;
    color: #e2e2e2 !important;
}

/* Light Theme Buttons - Cobalt/Emerald Gradient */
.site-btn,
.site-btn-sm,
.primary-btn,
.grad-btn,
button:not(.dark-theme button),
a.site-btn:not(.dark-theme a.site-btn),
a.site-btn-sm:not(.dark-theme a.site-btn-sm),
a.primary-btn:not(.dark-theme a.primary-btn),
a.grad-btn:not(.dark-theme a.grad-btn),
.btn:not(.dark-theme .btn),
.btn-primary:not(.dark-theme .btn-primary),
.btn-success:not(.dark-theme .btn-success) {
    background: linear-gradient(135deg, #1c0598 0%, #10b981 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.site-btn:hover,
.site-btn-sm:hover,
.primary-btn:hover,
.grad-btn:hover,
button:not(.dark-theme button):hover,
a.site-btn:not(.dark-theme a.site-btn):hover,
a.site-btn-sm:not(.dark-theme a.site-btn-sm):hover,
a.primary-btn:not(.dark-theme a.primary-btn):hover,
a.grad-btn:not(.dark-theme a.grad-btn):hover,
.btn:not(.dark-theme .btn):hover,
.btn-primary:not(.dark-theme .btn-primary):hover,
.btn-success:not(.dark-theme .btn-success):hover {
    background: linear-gradient(135deg, #10b981 0%, #1c0598 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(28, 5, 152, 0.3);
}

/* Banner/Hero */
.dark-theme .banner,
.dark-theme .hero-section {
    background: var(--surface-base);
}

.dark-theme .banner .banner-content h2 {
    color: var(--silver-bright);
    font-family: var(--font-headline);
}

.dark-theme .banner .banner-content p {
    color: var(--silver);
    font-family: var(--font-body);
}

/* Hero Section - Obsidian with Video */
.dark-theme .obsidian-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: var(--surface-base);
    overflow: hidden;
    padding-top: 80px;
    padding-bottom: 0;
    margin-bottom: 0;
}

.dark-theme .hero-video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.dark-theme .hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}

.dark-theme .hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--surface-base);
    opacity: 0.7;
    z-index: 1;
}

.dark-theme .obsidian-hero .container {
    position: relative;
    z-index: 10;
}

.dark-theme .obsidian-hero .banner-content {
    text-align: left;
    max-width: 900px;
    margin: 0;
}

.dark-theme .obsidian-hero .banner-content h2 {
    color: var(--silver-bright);
    font-family: var(--font-headline);
    font-size: 72px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 25px;
    letter-spacing: -1px;
}

.dark-theme .obsidian-hero .banner-content p {
    color: var(--silver);
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.dark-theme .obsidian-hero .banner-anchors {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
    flex-wrap: wrap;
}

.dark-theme .obsidian-hero .banner-anchors a {
    min-width: 220px;
    width: 220px;
    text-align: center;
    padding: 12px 30px;
}

/* Light Theme Hero with Video */
.banner.obsidian-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: 80px;
    padding-bottom: 0;
    margin-bottom: 0;
}

.hero-video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.08;
}

.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f1bfbf;
    opacity: 0.08;
    z-index: 1;
}

.banner.obsidian-hero .container {
    position: relative;
    z-index: 10;
}

.banner.obsidian-hero .banner-content {
    text-align: left;
    max-width: 900px;
    margin: 0;
}

.banner.obsidian-hero .banner-anchors {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
    flex-wrap: wrap;
}

.banner.obsidian-hero .banner-anchors a {
    min-width: 220px;
    width: 220px;
    text-align: center;
    padding: 12px 30px;
}

@media (max-width: 991px) {
    .dark-theme .obsidian-hero .banner-content h2 {
        font-size: 48px;
    }
}

@media (max-width: 767px) {
    .dark-theme .obsidian-hero .banner-content h2 {
        font-size: 36px;
    }
    
    .dark-theme .obsidian-hero .banner-content p {
        font-size: 18px;
    }
}

/* Sections - Tonal Layering */
.dark-theme .section-style,
.dark-theme .section-style-2,
.dark-theme .section-style-3 {
    background: var(--surface-base);
}

.dark-theme .light-blue-bg {
    background: var(--surface-container-low) !important;
}

.dark-theme .white-bg {
    background: var(--surface-container) !important;
}

/* Section Titles */
.dark-theme .section-title h2 {
    color: var(--silver-bright);
    font-family: var(--font-headline);
    font-weight: 700;
    background: none;
    -webkit-text-fill-color: initial;
}

.dark-theme .section-title h4 {
    color: var(--silver);
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

/* Investment Plans - Glass Cards */
.dark-theme .single-investment-plan {
    background: var(--surface-container-low);
    border: 0;
    backdrop-filter: blur(var(--glass-blur));
    box-shadow: none;
    border-radius: 0.125rem;
    transition: all 0.3s ease;
}

.dark-theme .single-investment-plan:hover {
    background: var(--surface-container);
    transform: translateY(-4px);
}

.dark-theme .single-investment-plan h3 {
    color: var(--silver-bright);
    font-family: var(--font-headline);
    font-weight: 600;
}

.dark-theme .single-investment-plan p {
    color: var(--silver);
    font-family: var(--font-body);
}

.dark-theme .single-investment-plan ul li {
    color: var(--silver);
    font-family: var(--font-body);
}

.dark-theme .single-investment-plan ul li span.special {
    background: var(--cobalt);
    color: var(--silver-bright);
    border-radius: 0.125rem;
}

.dark-theme .single-investment-plan .feature-plan {
    background: var(--cobalt);
    color: var(--silver-bright);
    border-radius: 0.125rem;
}

/* Calculator - Glass Container */
.dark-theme .earnings-calculator {
    background: var(--surface-container);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--ghost-border);
    border-radius: 0.125rem;
}

.dark-theme .earnings-calculator label {
    color: var(--silver-bright);
    font-family: var(--font-body);
    font-weight: 500;
}

.dark-theme .earnings-calculator input {
    background: var(--surface-container-low);
    border: 1px solid var(--ghost-border);
    color: var(--silver-bright);
    font-family: var(--font-body);
    border-radius: 0.125rem;
}

.dark-theme .earnings-calculator input:focus {
    border-color: var(--cobalt);
    outline: none;
}

.dark-theme .earnings-calculator .plan-selects {
    background: var(--surface-container-low);
    color: var(--silver-bright);
    border: 1px solid var(--ghost-border);
    font-family: var(--font-body);
    border-radius: 0.125rem;
}

/* Cards - Tonal Layering */
.dark-theme .site-card {
    background: var(--surface-container-low);
    backdrop-filter: blur(var(--glass-blur));
    border: 0;
    box-shadow: none;
    border-radius: 0.125rem;
}

.dark-theme .site-card .site-card-header {
    border-bottom: 1px solid var(--ghost-border);
}

.dark-theme .site-card .site-card-header .title {
    color: var(--silver-bright);
    font-family: var(--font-headline);
    font-weight: 600;
}

.dark-theme .site-card .site-card-body {
    color: var(--silver);
    font-family: var(--font-body);
}

/* Card Header Titles - Emerald for Recent Sections */
.dark-theme .site-card .site-card-header .title[style*="#10b981"] {
    color: var(--emerald) !important;
}

.site-card .site-card-header .title[style*="#10b981"] {
    color: var(--emerald) !important;
}

/* Dashboard */
.dark-theme .user-dashboard-content .user-sidebar {
    background: var(--obsidian);
    border: 1px solid var(--ghost-border);
}

.dark-theme .user-dashboard-content .user-sidebar ul li a {
    background: rgba(28, 5, 152, 0.2);
    color: #ffffff;
}

.dark-theme .user-dashboard-content .user-sidebar ul li a:hover {
    background: var(--cobalt);
}

.dark-theme .user-dashboard-content .user-sidebar ul li.active a {
    background: var(--cobalt);
}

.dark-theme .user-dashboard-content .user-cards .single {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--ghost-border);
}

/* Tables */
.dark-theme .transaction-list .table {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--ghost-border);
}

.dark-theme .transaction-list .table thead {
    background: rgba(28, 5, 152, 0.2);
    color: #ffffff;
}

.dark-theme .transaction-list .table tbody tr td {
    color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid var(--ghost-border);
}

/* Blog Cards */
.dark-theme .single-blog {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--ghost-border);
    border-radius: 0.125rem;
    transition: all 0.3s ease;
    overflow: hidden;
}

.dark-theme .single-blog:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--outline-variant);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.dark-theme .single-blog .content {
    color: var(--silver);
    font-family: var(--font-body);
}

.dark-theme .single-blog .content .title h3 a {
    color: var(--silver-bright);
    font-family: var(--font-headline);
    font-weight: 600;
}

.dark-theme .single-blog .content .title h3 a:hover {
    color: var(--cobalt);
}

/* Footer */
.dark-theme .footer {
    background: var(--surface-base);
    border-top: 1px solid var(--ghost-border);
}

.dark-theme .footer .footer-widget h4 {
    color: var(--silver-bright);
    font-family: var(--font-headline);
    font-weight: 600;
}

.dark-theme .footer .footer-widget p {
    color: var(--silver);
    font-family: var(--font-body);
}

.dark-theme .footer .footer-widget .socials a {
    background: var(--surface-container);
    color: var(--silver);
    border-radius: 0.125rem;
}

.dark-theme .footer .footer-widget .socials a:hover {
    background: var(--cobalt);
    color: var(--silver-bright);
}

.dark-theme .footer .copyright-text {
    background: var(--surface-container-low);
    border: 0;
    border-radius: 0.125rem;
}

/* Forms */
.dark-theme .site-form form input,
.dark-theme .site-form form textarea,
.dark-theme .site-form form select {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--ghost-border);
    color: #ffffff;
}

.dark-theme .site-form form input:focus,
.dark-theme .site-form form textarea:focus,
.dark-theme .site-form form select:focus {
    border-color: var(--cobalt);
}

/* Auth Pages */
.dark-theme .site-auth {
    background: var(--charcoal) !important;
}

.dark-theme .site-auth .auth-content {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--glass-blur)) !important;
    border: 1px solid var(--ghost-border) !important;
    border-radius: 0.125rem !important;
    padding: 2.5rem !important;
}

.dark-theme .site-auth .auth-content .title h2 {
    color: #ffffff !important;
}

.dark-theme .site-auth .auth-content .title p {
    color: rgba(255, 255, 255, 0.7) !important;
}

.dark-theme .site-auth .auth-content .site-auth-form .single-field .box-label {
    color: #ffffff !important;
}

.dark-theme .site-auth .auth-content .site-auth-form .single-field .box-input {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--ghost-border) !important;
    color: #ffffff !important;
}

.dark-theme .site-auth .auth-content .site-auth-form .single-field .box-input:focus {
    border-color: var(--cobalt) !important;
}

/* Modals */
.dark-theme .modal-content {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    color: #ffffff;
}

.dark-theme .modal-header {
    border-bottom: 1px solid var(--ghost-border);
}

.dark-theme .modal-footer {
    border-top: 1px solid var(--ghost-border);
}

/* Pagination */
.dark-theme .site-pagination .page-item .page-link {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--ghost-border);
    color: #ffffff;
}

.dark-theme .site-pagination .page-item.active .page-link {
    background: var(--cobalt);
    border-color: var(--cobalt);
    color: #ffffff;
}

/* Badges */
.dark-theme .badge,
.dark-theme .site-badge {
    background: var(--cobalt);
    color: #ffffff;
}

.dark-theme .badge.success,
.dark-theme .site-badge.badge-success {
    background: var(--emerald);
}

/* Alerts */
.dark-theme .site-alert {
    background: rgba(28, 5, 152, 0.1);
    border: 1px solid var(--ghost-border);
    color: rgba(255, 255, 255, 0.9);
}

/* Sidebar */
.dark-theme .site-sidebar .single-sidebar {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}

.dark-theme .site-sidebar .single-sidebar h3 {
    color: #ffffff;
}

.dark-theme .site-sidebar .single-sidebar ul li a {
    background: rgba(28, 5, 152, 0.2);
    color: #ffffff;
}

.dark-theme .site-sidebar .single-sidebar ul li a:hover {
    background: var(--cobalt);
}

/* FAQ */
.dark-theme .faq-contents .accordion-item {
    background: transparent;
    border-bottom: 1px solid var(--ghost-border);
}

.dark-theme .faq-contents .accordion-item .accordion-header .accordion-button {
    background: transparent;
    color: #ffffff;
}

.dark-theme .faq-contents .accordion-item .accordion-header .accordion-button .icon {
    background: rgba(28, 5, 152, 0.3);
    color: var(--cobalt);
}

.dark-theme .faq-contents .accordion-item .accordion-header .accordion-button:not(.collapsed) {
    background: rgba(28, 5, 152, 0.1);
}

.dark-theme .faq-contents .accordion-item .accordion-header .accordion-button:not(.collapsed) .icon {
    background: var(--cobalt);
    color: #ffffff;
}

.dark-theme .faq-contents .accordion-item .accordion-body .para {
    color: rgba(255, 255, 255, 0.8);
}

/* Stats */
.dark-theme .single-stat {
    color: #ffffff;
}

/* Team */
.dark-theme .single-team {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}

.dark-theme .single-team .designation h4 {
    color: #ffffff;
}

.dark-theme .single-team .designation p {
    color: rgba(255, 255, 255, 0.7);
}

.dark-theme .single-team .designation .socials a {
    background: rgba(28, 5, 152, 0.2);
    color: #ffffff;
}

.dark-theme .single-team .designation .socials a:hover {
    background: var(--cobalt);
}

/* Newsletter */
.dark-theme .newslatter-section {
    border-bottom: 1px solid var(--ghost-border);
}

.dark-theme .newslatter-section .newslatter form input {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--ghost-border);
    color: #ffffff;
}

.dark-theme .newslatter-section .newslatter form input:focus {
    border-color: var(--cobalt);
}

.dark-theme .newslatter-section .newslatter form button {
    background: var(--cobalt);
    border-color: var(--cobalt);
    color: #ffffff;
}

/* Panel Layout */
.dark-theme .panel-layout {
    background: var(--obsidian);
}

.dark-theme .panel-layout .panel-header {
    background: var(--obsidian);
    border-bottom: 1px solid var(--ghost-border);
}

.dark-theme .panel-layout .panel-header .logo {
    background-color: var(--obsidian);
    border-right: 1px solid var(--ghost-border);
    border-bottom: 1px solid var(--ghost-border);
}

.dark-theme .panel-layout .panel-header .nav-wrap {
    border-bottom: 1px solid var(--ghost-border);
}

.dark-theme .panel-layout .panel-header .nav-wrap .nav-left li a,
.dark-theme .panel-layout .panel-header .nav-wrap .nav-right li a {
    color: #ffffff;
}

.dark-theme .panel-layout .panel-header .nav-wrap .nav-left li a:hover,
.dark-theme .panel-layout .panel-header .nav-wrap .nav-right li a:hover {
    background: rgba(28, 5, 152, 0.2);
    color: var(--cobalt);
}

.dark-theme .panel-layout .panel-header .nav-wrap .sidebar-toggle {
    background: rgba(28, 5, 152, 0.2);
    color: var(--cobalt);
}

.dark-theme .panel-layout .panel-header .nav-wrap .sidebar-toggle:hover {
    background: var(--cobalt);
    color: #ffffff;
}

.dark-theme .panel-layout .side-nav {
    background-color: var(--obsidian);
    border-right: 1px solid var(--ghost-border);
}

.dark-theme .panel-layout .side-nav .side-nav-inside .side-nav-menu .side-nav-item a {
    color: rgba(255, 255, 255, 0.9);
}

.dark-theme .panel-layout .side-nav .side-nav-inside .side-nav-menu .side-nav-item a:hover {
    color: var(--cobalt);
}

.dark-theme .panel-layout .side-nav .side-nav-inside .side-nav-menu .side-nav-item a::after {
    background: rgba(28, 5, 152, 0.2);
}

.dark-theme .panel-layout .side-nav .side-nav-inside .side-nav-menu .side-nav-item.active a {
    background: var(--cobalt);
    color: #ffffff;
}

/* DataTables */
.dark-theme .site-datatable .data-table {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}

.dark-theme .site-datatable .data-table thead tr th {
    background: rgba(28, 5, 152, 0.2);
    color: #ffffff;
    border-bottom: 1px solid var(--ghost-border);
}

.dark-theme .site-datatable .data-table tbody tr td {
    color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid var(--ghost-border);
}

.dark-theme .site-datatable .data-table tbody tr:hover {
    background: rgba(28, 5, 152, 0.05);
}

/* Progress Steps */
.dark-theme .progress-steps .single-step {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--ghost-border);
}

.dark-theme .progress-steps .single-step .number {
    background: var(--cobalt);
}

.dark-theme .progress-steps .single-step .content h4 {
    color: #ffffff;
}

.dark-theme .progress-steps .single-step .content p {
    color: rgba(255, 255, 255, 0.7);
}

.dark-theme .progress-steps .single-step.current {
    background: var(--cobalt);
}

/* Wallet Box */
.dark-theme .side-wallet-box {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}

.dark-theme .side-wallet-box .user-balance-card .wallet-name .name {
    color: #ffffff;
}

.dark-theme .side-wallet-box .actions .user-sidebar-btn {
    background: var(--cobalt);
}

.dark-theme .side-wallet-box .actions .user-sidebar-btn:last-of-type {
    background: var(--emerald);
}

/* Transactions */
.dark-theme .site-transactions .single {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    margin-bottom: 2px;
}

.dark-theme .site-transactions .single .left .content .title {
    color: #ffffff;
}

.dark-theme .site-transactions .single .left .content .date {
    color: rgba(255, 255, 255, 0.6);
}

.dark-theme .site-transactions .single:hover {
    background: rgba(28, 5, 152, 0.1);
}

/* Referral Link */
.dark-theme .referral-link form input {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--ghost-border);
    color: #ffffff;
}

.dark-theme .referral-link form button {
    background: var(--cobalt);
    border-color: var(--cobalt);
}

/* Section Titles */
.dark-theme .section-title h2 {
    color: #ffffff;
    background: linear-gradient(90deg, #ffffff 0%, var(--cobalt) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dark-theme .section-title h4 {
    color: var(--cobalt);
}

/* Page Head */
.dark-theme .page-head h2 {
    color: #ffffff;
}

/* How It Works */
.dark-theme .how-it-works .how-it-works-single .icon-box {
    background: var(--cobalt);
}

.dark-theme .how-it-works .how-it-works-single h4 {
    color: #ffffff;
}

.dark-theme .how-it-works .how-it-works-single p {
    color: rgba(255, 255, 255, 0.7);
}

/* CTA */
.dark-theme .cta .headding h2 {
    color: #ffffff;
}

/* Why Choose Us */
.dark-theme .why-choose-us .why-choose-us-content .single .icons .icon {
    background: var(--cobalt);
}

.dark-theme .why-choose-us .why-choose-us-content .single .content h4 {
    color: #ffffff;
}

.dark-theme .why-choose-us .why-choose-us-content .single .content p {
    color: rgba(255, 255, 255, 0.7);
}

/* What We Do */
.dark-theme .what-we-do .single-what-we-do {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border-color: var(--ghost-border);
}

.dark-theme .what-we-do .single-what-we-do h4 {
    color: #ffffff;
}

.dark-theme .what-we-do .single-what-we-do:hover {
    background: rgba(28, 5, 152, 0.2);
    border-color: var(--cobalt);
}


/* How It Works Section */
.dark-theme .how-it-works .how-it-works-single .icon-box {
    background: var(--cobalt);
    border-radius: 0.125rem;
}

.dark-theme .how-it-works .how-it-works-single h4 {
    color: var(--silver-bright);
    font-family: var(--font-headline);
    font-weight: 600;
}

.dark-theme .how-it-works .how-it-works-single p {
    color: var(--silver);
    font-family: var(--font-body);
}

/* CTA Section */
.dark-theme .cta .headding h2 {
    color: var(--silver-bright);
    font-family: var(--font-headline);
    font-weight: 700;
}

/* Why Choose Us */
.dark-theme .why-choose-us .why-choose-us-content .single .icons .icon {
    background: var(--cobalt);
    border-radius: 0.125rem;
}

.dark-theme .why-choose-us .why-choose-us-content .single .content h4 {
    color: var(--silver-bright);
    font-family: var(--font-headline);
    font-weight: 600;
}

.dark-theme .why-choose-us .why-choose-us-content .single .content p {
    color: var(--silver);
    font-family: var(--font-body);
}

/* What We Do */
.dark-theme .what-we-do .single-what-we-do {
    background: var(--surface-container-low);
    backdrop-filter: blur(var(--glass-blur));
    border: 0;
    border-radius: 0.125rem;
    transition: all 0.3s ease;
}

.dark-theme .what-we-do .single-what-we-do:hover {
    background: var(--surface-container);
}

.dark-theme .what-we-do .single-what-we-do h4 {
    color: var(--silver-bright);
    font-family: var(--font-headline);
    font-weight: 600;
}

.dark-theme .what-we-do .single-what-we-do p {
    color: var(--silver);
    font-family: var(--font-body);
}

/* Stats/Counter */
.dark-theme .single-stat {
    color: var(--silver-bright);
}

.dark-theme .single-stat h3 {
    font-family: var(--font-headline);
    font-weight: 700;
    color: var(--silver-bright);
}

.dark-theme .single-stat h4 {
    font-family: var(--font-body);
    color: var(--silver);
}

/* Counter Section Background */
.dark-theme .section-style-2.site-overlay {
    background-size: cover !important;
    background-attachment: fixed !important;
    position: relative;
}

.dark-theme .section-style-2.site-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(19, 19, 19, 0.7);
    z-index: 0;
}

.dark-theme .section-style-2.site-overlay .container {
    position: relative;
    z-index: 1;
}

/* Team Section */
.dark-theme .single-team {
    background: var(--surface-container-low);
    backdrop-filter: blur(var(--glass-blur));
    border: 0;
    border-radius: 0.125rem;
}

.dark-theme .single-team .designation h4 {
    color: var(--silver-bright);
    font-family: var(--font-headline);
    font-weight: 600;
}

.dark-theme .single-team .designation p {
    color: var(--silver);
    font-family: var(--font-body);
}

.dark-theme .single-team .designation .socials a {
    background: var(--surface-container);
    color: var(--silver);
    border-radius: 0.125rem;
}

.dark-theme .single-team .designation .socials a:hover {
    background: var(--cobalt);
    color: var(--silver-bright);
}

/* Newsletter Section */
.dark-theme .newslatter-section {
    border-bottom: 1px solid var(--ghost-border);
}

.dark-theme .newslatter-section .newslatter form input {
    background: var(--surface-container-low);
    border: 1px solid var(--ghost-border);
    color: var(--silver-bright);
    font-family: var(--font-body);
    border-radius: 0.125rem;
}

.dark-theme .newslatter-section .newslatter form input:focus {
    border-color: var(--cobalt);
    outline: none;
}

.dark-theme .newslatter-section .newslatter form input::placeholder {
    color: var(--silver);
}

.dark-theme .newslatter-section .newslatter form button {
    background: var(--cobalt);
    border-color: var(--cobalt);
    color: var(--silver-bright);
    font-family: var(--font-body);
    font-weight: 600;
    border-radius: 0.125rem;
}

/* FAQ Section */
.dark-theme .faq-contents .accordion-item {
    background: transparent;
    border-bottom: 1px solid var(--ghost-border);
}

.dark-theme .faq-contents .accordion-item .accordion-header .accordion-button {
    background: transparent;
    color: var(--silver-bright);
    font-family: var(--font-headline);
    font-weight: 600;
}

.dark-theme .faq-contents .accordion-item .accordion-header .accordion-button .icon {
    background: var(--surface-container);
    color: var(--cobalt);
}

.dark-theme .faq-contents .accordion-item .accordion-header .accordion-button:not(.collapsed) {
    background: var(--surface-container-low);
}

.dark-theme .faq-contents .accordion-item .accordion-header .accordion-button:not(.collapsed) .icon {
    background: var(--cobalt);
    color: var(--silver-bright);
}

.dark-theme .faq-contents .accordion-item .accordion-body .para {
    color: var(--silver);
    font-family: var(--font-body);
}

/* Sidebar */
.dark-theme .site-sidebar .single-sidebar {
    background: var(--surface-container-low);
    backdrop-filter: blur(var(--glass-blur));
    border: 0;
    border-radius: 0.125rem;
}

.dark-theme .site-sidebar .single-sidebar h3 {
    color: var(--silver-bright);
    font-family: var(--font-headline);
    font-weight: 600;
}

.dark-theme .site-sidebar .single-sidebar ul li a {
    background: var(--surface-container);
    color: var(--silver);
    font-family: var(--font-body);
    border-radius: 0.125rem;
}

.dark-theme .site-sidebar .single-sidebar ul li a:hover {
    background: var(--cobalt);
    color: var(--silver-bright);
}

/* Page Head */
.dark-theme .page-head {
    background: var(--charcoal) !important;
    border-bottom: 1px solid var(--ghost-border);
}

.dark-theme .page-head h2 {
    color: var(--silver-bright);
    font-family: var(--font-headline);
    font-weight: 700;
}

/* Cookie Notice Z-Index Fix */
.dark-theme .cookie-notice,
.cookie-notice,
.cookie-consent,
.cookie-banner {
    z-index: 10000 !important;
    position: fixed !important;
}

/* Ensure buttons don't overlap cookie notice */
.dark-theme .header {
    z-index: 1000;
}

.dark-theme .banner-anchors,
.banner-anchors {
    z-index: 10;
}

/* Brands/Gateway Section */
.dark-theme .brands-logo .single-brands-logo img {
    opacity: 0.6;
}

.dark-theme .brands-logo .single-brands-logo img:hover {
    opacity: 1;
}


/* Navbar Scroll Opacity */
.dark-theme .header {
    transition: all 0.3s ease;
}

.dark-theme .header.scrolled {
    background: rgba(31, 31, 31, 0.95);
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

/* Light theme navbar */
.header {
    transition: all 0.3s ease;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
}

.header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Add padding to body to prevent content jump */
body {
    padding-top: 0;
}

.banner,
.obsidian-hero {
    margin-top: 0;
}


/* Institutional Strength Stats Section */
.dark-theme .stats-section {
    background: var(--surface-container-low);
    padding: 3rem 2rem;
    margin-top: 0;
}

.dark-theme .stats-wrapper {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}

.dark-theme .stats-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dark-theme .stats-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--silver);
    font-family: var(--font-body);
    margin: 0;
}

.dark-theme .stats-title {
    font-size: 1.875rem;
    font-family: var(--font-headline);
    font-weight: 700;
    color: var(--silver-bright);
    line-height: 1.2;
    text-transform: uppercase;
    margin: 0;
}

.dark-theme .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    padding-left: 0;
    border-left: 0;
}

.dark-theme .stat-item {
    text-align: left;
}

.dark-theme .stat-value {
    font-size: 2.5rem;
    font-family: var(--font-headline);
    font-weight: 800;
    color: var(--silver-bright);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.dark-theme .stat-label-text {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--silver);
    font-family: var(--font-body);
}

/* Desktop Layout - Side by Side */
@media (min-width: 768px) {
    .dark-theme .stats-wrapper {
        grid-template-columns: 1fr auto 1fr;
        gap: 3rem;
    }
    
    .dark-theme .stats-grid {
        padding-left: 3rem;
        border-left: 1px solid var(--outline-variant);
    }
}

/* Light Theme Stats */
.stats-section {
    background: #f5f5f5;
    padding: 3rem 2rem;
    margin-top: 0;
}

.stats-wrapper {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}

.stats-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stats-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: #666;
    margin: 0;
}

.stats-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #1b1b1b;
    line-height: 1.2;
    text-transform: uppercase;
    margin: 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    padding-left: 0;
    border-left: 0;
}

.stat-item {
    text-align: left;
}

.stat-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1b1b1b;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-label-text {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #666;
}

@media (min-width: 768px) {
    .stats-wrapper {
        grid-template-columns: 1fr auto 1fr;
        gap: 3rem;
    }
    
    .stats-grid {
        padding-left: 3rem;
        border-left: 1px solid #ccc;
    }
}


/* Light Theme - Cobalt Accents */
body:not(.dark-theme) a:hover,
body:not(.dark-theme) .nav-link:hover,
body:not(.dark-theme) .nav-link.active {
    color: #1c0598 !important;
}

body:not(.dark-theme) .section-title h4 {
    color: #1c0598;
}

body:not(.dark-theme) .single-investment-plan:hover {
    border-color: #1c0598;
}

body:not(.dark-theme) .single-blog .content .title h3 a:hover {
    color: #1c0598;
}

body:not(.dark-theme) input:focus,
body:not(.dark-theme) textarea:focus,
body:not(.dark-theme) select:focus {
    border-color: #1c0598 !important;
    outline-color: #1c0598 !important;
}

body:not(.dark-theme) .badge,
body:not(.dark-theme) .site-badge {
    background: #1c0598;
    color: #ffffff;
}

body:not(.dark-theme) .pagination .page-item.active .page-link {
    background: #1c0598;
    border-color: #1c0598;
}

body:not(.dark-theme) .footer .footer-widget .socials a:hover {
    background: #1c0598;
    color: #ffffff;
}


/* Who is IDF Section */
.who-is-idf-section {
    padding: 4rem 0;
}

.idf-header {
    margin-bottom: 3rem;
    text-align: center;
}

.idf-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--cobalt) 0%, var(--silver) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.idf-subtitle {
    font-size: 1.5rem;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto;
}

.metric-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--ghost-border);
    border-radius: 0.125rem;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.metric-card:hover {
    transform: translateY(-0.25rem);
}

.metric-image-container {
    width: 100%;
    height: 256px;
    overflow: hidden;
    position: relative;
}

.metric-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.metric-card:hover .metric-image {
    transform: scale(1.05);
}

.metric-content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.metric-id {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
    display: block;
}

.metric-heading {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.metric-body {
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
}

/* Dark Theme */
.dark-theme .who-is-idf-section {
    background: var(--charcoal);
}

.dark-theme .idf-title {
    font-family: var(--font-headline);
}

.dark-theme .idf-subtitle {
    color: var(--silver);
    font-family: var(--font-headline);
}

.dark-theme .metric-id {
    color: var(--cobalt);
    font-family: var(--font-headline);
}

.dark-theme .metric-heading {
    color: var(--silver-bright);
    font-family: var(--font-headline);
}

.dark-theme .metric-body {
    color: var(--silver);
    font-family: var(--font-body);
}

/* Light Theme */
.who-is-idf-section {
    background: #f8f9fa;
}

.idf-title {
    font-family: 'Manrope', sans-serif;
}

.idf-subtitle {
    color: #666666;
    font-family: 'Manrope', sans-serif;
}

.metric-card {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(76, 69, 70, 0.3);
}

.metric-id {
    color: #1c0598;
    font-family: 'Manrope', sans-serif;
}

.metric-heading {
    color: #1b1b1b;
    font-family: 'Manrope', sans-serif;
}

.metric-body {
    color: #666666;
    font-family: 'Inter', sans-serif;
}

/* Responsive */
@media (max-width: 768px) {
    .who-is-idf-section {
        padding: 2rem 0;
    }
    
    .idf-title {
        font-size: 2rem;
    }
    
    .idf-subtitle {
        font-size: 1.125rem;
    }
    
    .metric-image-container {
        height: 200px;
    }
    
    .metric-content {
        padding: 1.5rem;
    }
}

/* ========================================
   DASHBOARD GLASSMORPHISM
   ======================================== */

/* Bottom Navbar - Elevated Glass Effect */
.dark-theme .bottom-appbar {
    background: rgba(19, 19, 19, 0.7) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 
        0 -8px 32px rgba(0, 0, 0, 0.6),
        0 8px 24px rgba(0, 0, 0, 0.25) !important;
    position: fixed !important;
    left: 15px !important;
    right: 15px !important;
    bottom: calc(15px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1000 !important;
}

.dark-theme .bottom-appbar::before {
    content: none !important;
}

.dark-theme .bottom-appbar a {
    color: #ffffff !important;
    transition: all 0.3s ease !important;
    padding: 0.5rem !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 1 !important;
    opacity: 1 !important;
}

.dark-theme .bottom-appbar a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        0 0 12px rgba(255, 255, 255, 0.35),
        0 0 24px rgba(127, 140, 255, 0.3) !important;
}

.dark-theme .bottom-appbar a.active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 
        0 0 14px rgba(255, 255, 255, 0.4),
        0 0 28px rgba(127, 140, 255, 0.28) !important;
}

/* Side Navigation - Glass Sidebar */
.dark-theme .panel-layout .side-nav {
    background: var(--glass-sidebar) !important;
    backdrop-filter: blur(var(--glass-sidebar-blur)) !important;
    -webkit-backdrop-filter: blur(var(--glass-sidebar-blur)) !important;
    border-right: 1px solid var(--ghost-border) !important;
}

.dark-theme .panel-layout .side-nav .side-nav-inside .side-nav-menu .side-nav-item a {
    transition: all 0.3s ease !important;
}

.dark-theme .panel-layout .side-nav .side-nav-inside .side-nav-menu .side-nav-item a:hover {
    background: rgba(28, 5, 152, 0.15) !important;
}

.dark-theme .panel-layout .side-nav .side-nav-inside .side-nav-menu .side-nav-item.active a {
    background: rgba(28, 5, 152, 0.25) !important;
}

/* Panel Layout */
.dark-theme .panel-layout {
    background: var(--charcoal) !important;
}

.dark-theme .panel-layout .panel-header {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
    border-bottom: 1px solid var(--ghost-border) !important;
}

.dark-theme .panel-layout .panel-header .logo {
    background-color: transparent !important;
    border-right: 1px solid var(--ghost-border) !important;
    border-bottom: 0 !important;
}

/* Dashboard Cards */
.dark-theme .user-dashboard-content .user-cards .single {
    background-color: var(--charcoal) !important;
    background-image: url('../materials/wallet-card-bg.png?v=2') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    backdrop-filter: blur(var(--glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
    border: 1px solid var(--ghost-border) !important;
    border-radius: 0.125rem !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.dark-theme .user-dashboard-content .user-cards .single::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(19, 19, 19, 0.3) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.dark-theme .user-dashboard-content .user-cards .single .icon,
.dark-theme .user-dashboard-content .user-cards .single .content {
    position: relative !important;
    z-index: 1 !important;
}

.dark-theme .user-dashboard-content .user-cards .single:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 32px rgba(218, 165, 32, 0.4) !important;
}

.dark-theme .user-dashboard-content .user-cards .single:hover::after {
    background: rgba(19, 19, 19, 0.2) !important;
}

/* Force override any conflicting styles */
.dark-theme .row.user-cards .col-xl-3 .single,
.dark-theme .row.user-cards .col-lg-6 .single,
.dark-theme .row.user-cards .col-md-6 .single {
    background-image: url('../materials/wallet-card-bg.png?v=2') !important;
    background-size: cover !important;
}

/* Mobile Navigation Cards */
.dark-theme .all-feature-mobile {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
    border: 1px solid var(--ghost-border) !important;
    border-radius: 0.125rem !important;
    padding: 1.5rem !important;
}

.dark-theme .all-feature-mobile .title {
    color: var(--silver-bright) !important;
    font-family: var(--font-headline) !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
}

.dark-theme .all-feature-mobile .single {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: 0.125rem !important;
    padding: 1rem 0.5rem !important;
    transition: all 0.3s ease !important;
}

.dark-theme .all-feature-mobile .single:hover {
    background: rgba(28, 5, 152, 0.2) !important;
    transform: translateY(-2px) !important;
}

.dark-theme .all-feature-mobile .single .name {
    color: var(--silver) !important;
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
}

/* Page Container */
.dark-theme .page-container {
    background: transparent !important;
}

.dark-theme .page-container .main-content {
    background: transparent !important;
}

/* Referral/Ranking Cards */
.dark-theme .referral-ranking-card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
    border: 1px solid var(--ghost-border) !important;
    border-radius: 0.125rem !important;
}

/* Transaction Cards */
.dark-theme .transaction-card,
.dark-theme .recent-transaction {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
    border: 1px solid var(--ghost-border) !important;
    border-radius: 0.125rem !important;
}

/* ========================================
   LIGHT THEME DASHBOARD GLASSMORPHISM
   ======================================== */

/* Bottom Navbar - Light Theme */
.bottom-appbar {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 
        0 -4px 20px rgba(0, 0, 0, 0.1),
        0 8px 24px rgba(0, 0, 0, 0.12) !important;
    position: fixed !important;
    left: 15px !important;
    right: 15px !important;
    bottom: calc(15px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1000 !important;
}

.bottom-appbar::before {
    content: none !important;
}

.bottom-appbar a {
    color: rgba(24, 28, 39, 0.92) !important;
    transition: all 0.3s ease !important;
    padding: 0.5rem !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 1 !important;
    opacity: 1 !important;
}

.bottom-appbar a:hover {
    background: rgba(28, 5, 152, 0.1) !important;
    box-shadow: 0 4px 20px rgba(28, 5, 152, 0.2) !important;
}

.bottom-appbar a.active {
    color: #1c0598 !important;
    background: rgba(28, 5, 152, 0.15) !important;
    box-shadow: 
        0 4px 20px rgba(28, 5, 152, 0.18) !important;
}

.bottom-appbar a svg,
.dark-theme .bottom-appbar a svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    opacity: 1 !important;
    color: currentColor !important;
    filter: none !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.bottom-appbar a svg *,
.dark-theme .bottom-appbar a svg * {
    stroke: currentColor !important;
    fill: none !important;
    vector-effect: non-scaling-stroke !important;
}

/* Side Navigation - Light Theme */
.panel-layout .side-nav {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    border-right: 0.5px solid rgba(0, 0, 0, 0.08) !important;
}

.panel-layout .side-nav .side-nav-inside .side-nav-menu .side-nav-item a {
    transition: all 0.3s ease !important;
}

.panel-layout .side-nav .side-nav-inside .side-nav-menu .side-nav-item a:hover {
    background: rgba(28, 5, 152, 0.1) !important;
}

.panel-layout .side-nav .side-nav-inside .side-nav-menu .side-nav-item.active a {
    background: rgba(28, 5, 152, 0.15) !important;
}

/* Panel Layout - Light Theme */
.panel-layout {
    background: #f5f5f7 !important;
}

.panel-layout .panel-header {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.08) !important;
}

.panel-layout .panel-header .logo {
    background-color: transparent !important;
    border-right: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    border-bottom: 0 !important;
}

/* Dashboard Cards - Light Theme */
.user-dashboard-content .user-cards .single {
    background-color: #f5f5f7 !important;
    background-image: url('../materials/wallet-card-bg.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 0.125rem !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.user-dashboard-content .user-cards .single::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.user-dashboard-content .user-cards .single .icon,
.user-dashboard-content .user-cards .single .content {
    position: relative !important;
    z-index: 1 !important;
}

.user-dashboard-content .user-cards .single:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 32px rgba(218, 165, 32, 0.3) !important;
}

.user-dashboard-content .user-cards .single:hover::after {
    background: rgba(255, 255, 255, 0.75) !important;
}

/* Mobile Navigation Cards - Light Theme */
.all-feature-mobile {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 0.125rem !important;
    padding: 1.5rem !important;
}

.all-feature-mobile .title {
    color: #1b1b1b !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
}

.all-feature-mobile .single {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-radius: 0.125rem !important;
    padding: 1rem 0.5rem !important;
    transition: all 0.3s ease !important;
}

.all-feature-mobile .single:hover {
    background: rgba(28, 5, 152, 0.1) !important;
    transform: translateY(-2px) !important;
}

.all-feature-mobile .single .name {
    color: #666666 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.75rem !important;
}

/* Page Container - Light Theme */
.page-container {
    background: transparent !important;
}

.page-container .main-content {
    background: transparent !important;
}

/* Referral/Ranking Cards - Light Theme */
.referral-ranking-card {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 0.125rem !important;
}

/* Transaction Cards - Light Theme */
.transaction-card,
.recent-transaction {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 0.125rem !important;
}