/* Combined CSS from style.css (Login/Signup Base + Dashboard Additions) */
        :root {
            --primary-font: 'Poppins', sans-serif;
            --heading-font: 'Orbitron', sans-serif;
            --text-color: #e0e0e0;
            --text-muted-color: #8a8f9f; /* For muted text, ensuring visibility */
            --primary-color: #00aeff; /* Vivid blue */
            --primary-hover-color: #008cdd;
            --dark-bg: #0f101c; /* Very dark blue/almost black */
            --panel-bg: rgba(20, 22, 40, 0.85); /* Semi-transparent dark panel */
            --input-bg: rgba(255, 255, 255, 0.05);
            --input-border: rgba(0, 174, 255, 0.3);
            --input-focus-border: var(--primary-color);
            --input-placeholder-color: var(--text-muted-color); /* Using muted color for placeholders */
            --card-border-color: rgba(0, 174, 255, 0.2);
            --link-color: var(--primary-color);
            --link-hover-color: #61dafb;
            --success-color: #28a745;
            --error-color: #dc3545;
            --warning-color: #ffc107; /* Bootstrap warning yellow */
        }

        body {
            font-family: var(--primary-font);
            background-color: var(--dark-bg);
            color: var(--text-color); /* Default text color for the body */
            margin: 0;
            padding: 0;
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
        }
        /* Ensure all general text elements inherit body color or have a light color */
        p, span, small, div, li, th, td, label, h1, h2, h3, h4, h5, h6 {
            color: inherit; /* Inherit from parent, ultimately from body if not overridden */
        }
        .text-muted { /* Bootstrap override for better visibility */
            color: var(--text-muted-color) !important;
        }
        a {
            color: var(--link-color);
            text-decoration: none;
        }
        a:hover {
            color: var(--link-hover-color);
        }


        /* --- Styles for Login/Signup Pages --- */
        .auth-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            min-height: 100vh;
            padding: 20px;
            position: relative;
            z-index: 1;
        }

        .auth-container {
            background-color: var(--panel-bg);
            padding: 30px 40px;
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--card-border-color);
            width: 100%;
            max-width: 480px;
            z-index: 2;
            backdrop-filter: blur(10px);
            border: 1px solid var(--card-border-color);
        }

        .auth-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .auth-header .auth-logo {
            max-width: 150px;
            margin-bottom: 15px;
        }

        .auth-header h1 {
            font-family: var(--heading-font);
            color: #ffffff; /* Explicit white for main headings */
            font-size: 2.2rem;
            margin-bottom: 8px;
            font-weight: 700;
            letter-spacing: 1px;
        }

        .auth-header p {
            font-size: 0.95rem;
            color: var(--text-muted-color); /* Use defined muted color */
        }

        .auth-form .form-group-floating { /* Also used in modals */
            position: relative;
            margin-bottom: 25px;
        }

        .form-control-custom { /* Also used in modals */
            width: 100%;
            padding: 14px 18px;
            font-size: 1rem;
            font-family: var(--primary-font);
            color: var(--text-color); /* Input text color */
            background-color: var(--input-bg);
            border: 1px solid var(--input-border);
            border-radius: 8px;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
        }

        .form-control-custom::placeholder {
            color: transparent; /* For floating label effect */
        }

        .form-control-custom:focus,
        .form-control-custom:not(:placeholder-shown) {
            outline: none;
            border-color: var(--input-focus-border);
            box-shadow: 0 0 0 3px rgba(0, 174, 255, 0.2);
        }

        .form-group-floating label { /* Also used in modals */
            position: absolute;
            top: 15px;
            left: 18px;
            font-size: 1rem;
            color: var(--input-placeholder-color); /* Label color */
            pointer-events: none;
            transition: all 0.2s ease-out;
            background-color: transparent;
            padding: 0 5px;
        }

        .form-control-custom:focus + label,
        .form-control-custom:not(:placeholder-shown) + label {
            top: -10px;
            left: 12px;
            font-size: 0.75rem;
            color: var(--primary-color);
        }
        /* Specific background for floating labels on auth pages */
        .auth-form .form-control-custom:focus + label,
        .auth-form .form-control-custom:not(:placeholder-shown) + label {
             background-color: var(--panel-bg);
        }


        .form-group-floating .input-icon {
            position: absolute;
            top: 50%;
            right: 15px;
            transform: translateY(-50%);
            color: var(--input-placeholder-color);
        }
        .form-control-custom:focus ~ .input-icon {
            color: var(--primary-color);
        }

        .password-toggle {
            position: absolute;
            top: 50%;
            right: 15px;
            transform: translateY(-50%);
            background: transparent;
            border: none;
            color: var(--input-placeholder-color);
            cursor: pointer;
            padding: 5px;
        }
        .password-toggle:hover,
        .password-toggle:focus {
            color: var(--primary-color);
        }

        .auth-options {
            margin-bottom: 20px;
            font-size: 0.9rem;
        }

        .form-check-input {
            background-color: var(--input-bg);
            border-color: var(--input-border);
        }
        .form-check-input:checked {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        .form-check-input:focus {
            box-shadow: 0 0 0 0.25rem rgba(0, 174, 255, 0.25);
        }
        .form-check-label {
            color: var(--text-color); /* Checkbox label color */
        }

        .forgot-password-link,
        .auth-switch a,
        .auth-terms a {
            color: var(--link-color);
            text-decoration: none;
            transition: color 0.2s ease;
        }
        .forgot-password-link:hover,
        .auth-switch a:hover,
        .auth-terms a:hover {
            color: var(--link-hover-color);
            text-decoration: underline;
        }

        .auth-btn { /* Also used in modals */
            width: 100%;
            padding: 12px 15px;
            font-size: 1.1rem;
            font-weight: 600;
            font-family: var(--heading-font);
            background-color: var(--primary-color);
            color: #ffffff; /* Button text color */
            border: none;
            border-radius: 8px;
            letter-spacing: 0.5px;
            transition: background-color 0.3s ease, transform 0.2s ease;
            box-shadow: 0 4px 15px rgba(0, 174, 255, 0.3);
        }

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

        .auth-switch {
            text-align: center;
            margin-top: 25px;
            font-size: 0.9rem;
            color: var(--text-color); /* Text color for this div */
        }

        .auth-terms {
            margin-bottom: 20px;
            font-size: 0.85rem;
        }
        .auth-terms .form-check-label {
            line-height: 1.5;
            color: var(--text-color); /* Text color for terms label */
        }

        .password-strength-meter {
            height: 8px;
            background-color: var(--input-bg);
            border-radius: 4px;
            margin-top: -15px;
            margin-bottom: 20px;
            overflow: hidden;
        }
        .strength-bar {
            height: 100%;
            width: 0%;
            background-color: var(--error-color);
            border-radius: 4px;
            transition: width 0.3s ease, background-color 0.3s ease;
        }
        .strength-text {
            display: block;
            font-size: 0.75rem;
            text-align: right;
            margin-top: 4px;
            color: var(--input-placeholder-color);
        }

        .background-shapes {
            position: fixed; /* Changed to fixed to cover viewport during scroll */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1; /* Ensure it's behind all content */
        }

        .shape {
            position: absolute;
            border-radius: 50%;
            opacity: 0.1;
            animation: float 20s infinite ease-in-out;
            animation-play-state: running;
        }

        .shape-1 { width: 300px; height: 300px; background: radial-gradient(circle, var(--primary-color), transparent 70%); top: 10%; left: 5%; animation-duration: 25s; animation-delay: 0s; }
        .shape-2 { width: 200px; height: 200px; background: radial-gradient(circle, var(--link-hover-color), transparent 70%); top: 60%; left: 80%; animation-duration: 30s; animation-delay: 5s; }
        .shape-3 { width: 150px; height: 150px; background: radial-gradient(circle, #ff00e0, transparent 70%); top: 30%; left: 40%; animation-duration: 20s; animation-delay: 2s; }
        .shape-4 { width: 250px; height: 250px; background: radial-gradient(circle, #ae00ff, transparent 70%); top: 75%; left: 15%; animation-duration: 35s; animation-delay: 7s; }
        .shape-5 { width: 220px; height: 220px; background: radial-gradient(circle, #00f2c3, transparent 70%); top: 50%; left: 50%; animation-duration: 28s; animation-delay: 3s; }

        @keyframes float {
            0% { transform: translateY(0px) translateX(0px) scale(1); }
            25% { transform: translateY(-30px) translateX(20px) scale(1.05); }
            50% { transform: translateY(20px) translateX(-30px) scale(1); }
            75% { transform: translateY(-10px) translateX(40px) scale(0.95); }
            100% { transform: translateY(0px) translateX(0px) scale(1); }
        }

        /* --- Dashboard Specific Styles --- */
        .dashboard-wrapper { display: flex; width: 100%; min-height: 100vh; position: relative; background-color: transparent; /* Body has dark-bg */ }
        .sidebar { width: 260px; background: var(--panel-bg); backdrop-filter: blur(15px); border-right: 1px solid var(--card-border-color); color: #fff; transition: margin-left 0.3s; position: fixed; top: 0; left: 0; height: 100vh; z-index: 1000; display: flex; flex-direction: column; }
        .sidebar.toggled { margin-left: -260px; }
        .sidebar-header { padding: 1rem 1.25rem; text-align: center; border-bottom: 1px solid var(--card-border-color); position: relative; /* For close button positioning */ }
        .sidebar-logo-text { font-family: var(--heading-font); font-size: 1.8rem; color: var(--primary-color); margin-bottom: 0; }
        .sidebar-close-btn {
            color: var(--text-muted-color);
            background: none;
            border: none;
            font-size: 1.5rem; /* Make X larger */
            line-height: 1;
            padding: 0.25rem 0.5rem;
        }
        .sidebar-close-btn:hover {
            color: #fff;
        }

        .sidebar .components { padding: 20px 0; flex-grow: 1; overflow-y: auto; /* Enable scrolling for nav items */ }
        .sidebar ul li a { padding: 12px 20px; font-size: 0.95rem; font-weight: 500; display: block; color: var(--text-color); border-left: 3px solid transparent; transition: all 0.2s ease; text-decoration: none; }
        .sidebar ul li a:hover { color: #fff; background: rgba(255, 255, 255, 0.05); border-left-color: var(--primary-color); }
        .sidebar ul li.active > a, .sidebar ul li.active > a:hover { color: #fff; background: var(--primary-color); border-left-color: var(--primary-color); }
        .sidebar ul li.active > a i, .sidebar ul li a:hover i { color: #fff; }
        .sidebar ul li a i { color: var(--primary-color); transition: color 0.2s ease; }
        .sidebar .ctAs { padding: 20px; border-top: 1px solid var(--card-border-color); }
        .sidebar .ctAs a.logout-link { color: #ff6b6b; }
        .sidebar .ctAs a.logout-link:hover { color: #ff4757; background: rgba(255, 71, 87, 0.1); border-left-color: #ff4757; }
        .main-content { width: 100%; /* Default to full width */ padding: 0; transition: margin-left 0.3s; position: relative; z-index: 1; }
        /* Adjust main content when sidebar is visible on larger screens */
        @media (min-width: 992px) { /* lg breakpoint */
            .main-content {
                margin-left: 260px;
                width: calc(100% - 260px);
            }
            .sidebar.toggled { /* This state should not occur on lg+ if toggle button is hidden */
                margin-left: -260px; /* Keep it hidden if somehow toggled */
            }
             .main-content.toggled { /* When sidebar is toggled off on lg+ (if a toggle existed) */
                margin-left: 0;
                width: 100%;
            }
        }


        .top-navbar { background-color: var(--panel-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--card-border-color); padding: 0.75rem 1.5rem; position: sticky; top: 0; z-index: 900; }
        .current-section-title { font-family: var(--heading-font); font-weight: 600; color: #fff; }
        #sidebarCollapse { padding: 0.25rem 0.5rem; font-size: 1.25rem; color: #fff; } /* Ensure toggle is visible */
        #sidebarCollapse:focus { box-shadow: none; }
        .dropdown-menu-dark .dropdown-item { color: var(--text-color); }
        .dropdown-menu-dark .dropdown-item:hover, .dropdown-menu-dark .dropdown-item:focus { background-color: rgba(255,255,255,0.1); color: #fff; }
        .content-section { min-height: calc(100vh - 70px); } /* Adjust based on top-navbar height */
        .summary-card { background-color: var(--panel-bg); padding: 25px; border-radius: 12px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); border: 1px solid var(--card-border-color); height: 100%; }
        .main-balance-card h2 { font-family: var(--heading-font); color: #fff; }
        .main-balance-card h2 .small { font-family: var(--primary-font); font-size: 0.9rem; }
        .main-balance-card h6, .quick-stats-card h6 { color: var(--text-muted-color); } /* Ensure muted color for these headings */
        .quick-stats-card span { color: var(--text-color); } /* Ensure quick stats text is light */
        .quick-stats-card .fw-semibold.text-white { color: #fff !important; } /* Ensure specific white text remains white */


        .content-panel { background-color: var(--panel-bg); border-radius: 12px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); border: 1px solid var(--card-border-color); margin-bottom: 25px; }
        .panel-header { padding: 15px 20px; border-bottom: 1px solid var(--card-border-color); }
        .panel-title { font-family: var(--heading-font); font-size: 1.2rem; color: #fff; margin-bottom: 0; }
        .panel-body { padding: 20px; color: var(--text-color); } /* Ensure panel body text is light */
        .panel-body p { color: var(--text-color); } /* Ensure paragraphs in panel body are light */
        .panel-body .text-muted { color: var(--text-muted-color) !important; } /* Override for muted text in panel */


        .activity-list .list-group-item { background-color: transparent; border-color: rgba(255,255,255,0.08); padding: 12px 0; color: var(--text-color); }
        .activity-list .list-group-item:last-child { border-bottom: none; }
        .activity-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; margin-right: 10px; font-size: 0.9rem; }
        .activity-icon.received { background-color: rgba(var(--bs-success-rgb), 0.2); color: var(--bs-success); }
        .activity-icon.sent { background-color: rgba(var(--bs-danger-rgb), 0.2); color: var(--bs-danger); }
        .activity-icon.system { background-color: rgba(var(--bs-warning-rgb), 0.2); color: var(--bs-warning); }
        .crypto-table { border-collapse: separate; border-spacing: 0; margin-bottom: 0; }
        .crypto-table thead th { background-color: rgba(255,255,255,0.03); border-bottom: 1px solid var(--card-border-color) !important; font-family: var(--heading-font); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted-color); padding: 12px 15px; }
        .crypto-table tbody td { border-color: rgba(255,255,255,0.08) !important; padding: 15px; vertical-align: middle; color: var(--text-color); } /* Ensure table cell text is light */
        .crypto-table tbody tr:hover { background-color: rgba(255,255,255,0.03); }
        .crypto-table img.rounded-circle { border: 1px solid var(--card-border-color); }
        .table-dark { --bs-table-bg: transparent; --bs-table-border-color: var(--card-border-color); --bs-table-color: var(--text-color); }
        .crypto-modal .modal-content { background-color: var(--panel-bg); backdrop-filter: blur(15px); border: 1px solid var(--card-border-color); border-radius: 12px; color: var(--text-color); }
        .crypto-modal .modal-header { border-bottom: 1px solid var(--card-border-color); }
        .crypto-modal .modal-header .modal-title { font-family: var(--heading-font); color: #fff; }
        .crypto-modal .modal-footer { border-top: 1px solid var(--card-border-color); }
        .crypto-modal .form-control-custom, .crypto-modal .form-select.form-control-custom { background-color: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text-color) !important; }
        .crypto-modal .form-control-custom:focus, .crypto-modal .form-select.form-control-custom:focus { border-color: var(--input-focus-border) !important; box-shadow: 0 0 0 3px rgba(0, 174, 255, 0.2) !important; }
        .crypto-modal .form-group-floating .form-control-custom:focus + label, .crypto-modal .form-group-floating .form-control-custom:not(:placeholder-shown) + label { background-color: var(--panel-bg) !important; }
        .crypto-modal .form-select.form-control-custom + label { background-color: var(--input-bg) !important; }
        .crypto-modal .form-select.form-control-custom:focus + label, .crypto-modal .form-select.form-control-custom:valid + label { background-color: var(--panel-bg) !important; }
        .crypto-modal .copy-btn { background-color: var(--input-bg); border: 1px solid var(--input-border); color: var(--primary-color); }
        .crypto-modal .copy-btn:hover { background-color: rgba(0, 174, 255, 0.2); }
        .crypto-modal .form-label { color: var(--text-color); } /* Ensure modal labels are light */
        .crypto-modal small { color: var(--text-muted-color); } /* Ensure small text in modals is light muted */


        /* Specific styles for live rates table cells */
        .live-rates-table .rate-positive { color: var(--success-color); }
        .live-rates-table .rate-negative { color: var(--error-color); }
        .live-rates-table .asset-name-group .text-muted { color: var(--text-muted-color) !important; } /* Ensure ticker is muted */

        /* Profile Page Specific Styles */
        .profile-header-card {
            background: linear-gradient(135deg, rgba(0, 174, 255, 0.2) 0%, rgba(0, 174, 255, 0.05) 100%), var(--panel-bg); /* Adjusted to use primary color with alpha */
            padding: 2rem;
            border-radius: 12px;
            margin-bottom: 2rem;
            text-align: center;
            border: 1px solid var(--card-border-color);
        }
        .profile-avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background-color: var(--input-bg);
            color: var(--primary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem auto;
            font-size: 3rem;
            font-weight: 600;
            border: 3px solid var(--primary-color);
        }
        .profile-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }
        .profile-name {
            font-family: var(--heading-font);
            font-size: 1.8rem;
            color: #fff;
            margin-bottom: 0.25rem;
        }
        .profile-email {
            font-size: 1rem;
            color: var(--text-muted-color);
            margin-bottom: 1rem;
        }
        .profile-edit-btn {
            font-size: 0.9rem;
        }
        .profile-section .panel-title {
            font-size: 1.1rem; /* Slightly smaller for sub-sections */
        }
        .profile-section .form-label {
            color: var(--text-muted-color);
            font-size: 0.9rem;
            margin-bottom: 0.25rem;
        }
        .profile-section .form-control-custom[readonly] {
            background-color: rgba(128, 128, 128, 0.1); /* Using grey for readonly */
            cursor: not-allowed;
        }
        .two-factor-status {
            padding: 0.75rem 1rem;
            border-radius: 8px;
            margin-bottom: 1rem;
        }
        .two-factor-status.enabled {
            background-color: rgba(40, 167, 69, 0.15); /* Using success color with alpha */
            border: 1px solid rgba(40, 167, 69, 0.3);
            color: var(--success-color);
        }
        .two-factor-status.disabled {
            background-color: rgba(255, 193, 7, 0.15); /* Using warning color with alpha */
            border: 1px solid rgba(255, 193, 7, 0.3);
            color: var(--warning-color);
        }


        @media (max-width: 991.98px) { /* lg breakpoint and down */
            .sidebar {
                margin-left: -260px; /* Hidden by default */
            }
            .sidebar.toggled {
                margin-left: 0; /* Shown when toggled */
            }
            .main-content {
                width: 100%;
                margin-left: 0;
            }
            .auth-container { margin: 20px; padding: 25px 20px; }
        }
        @media (min-width: 992px) { /* lg breakpoint and up */
            #sidebarCollapse {
                display: none; /* Hide the hamburger toggle on larger screens */
            }
            .sidebar-close-btn {
                display: none; /* Hide the X button in sidebar on larger screens */
            }
        }

        @media (max-width: 768px) { .summary-card { padding: 20px; } .main-balance-card h2 { font-size: 2rem; } .auth-header h1 { font-size: 1.8rem; } .profile-name { font-size: 1.5rem;} .profile-avatar {width: 100px; height: 100px; font-size: 2.5rem;} }
        @media (max-width: 576px) { .top-navbar { padding: 0.5rem 1rem; } .content-panel, .summary-card { padding: 15px; } .panel-title, .main-balance-card h6, .quick-stats-card h6 { font-size: 0.9rem; } .crypto-table { font-size: 0.85rem; } .crypto-table td, .crypto-table th { padding: 10px 8px; } .crypto-table img.rounded-circle { width: 24px; } .auth-container { padding: 20px 15px; } .form-control-custom { padding: 12px 15px; } .form-group-floating label { top: 13px; left: 15px; } .form-control-custom:focus + label, .form-control-custom:not(:placeholder-shown) + label { top: -9px; left: 10px; } .profile-header-card {padding: 1.5rem;} }

        /* Alert styling */
        .alert-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1056; /* Higher than modals */
            min-width: 250px;
        }
        .alert {
            color: #fff; /* White text for all alerts */
            border: none;
        }
        .alert-success { background-color: rgba(var(--bs-success-rgb), 0.8); }
        .alert-danger { background-color: rgba(var(--bs-danger-rgb), 0.8); }
        .alert-warning { background-color: rgba(var(--bs-warning-rgb), 0.8); color: #000 !important; } /* Darker text for warning for contrast */
        .alert-info { background-color: rgba(var(--bs-info-rgb), 0.8); }