/**
* Global CSS File - All Page Styles (Scoped, NOT Renamed)
*
* Each page has a unique body class (e.g., page-signin, page-dashboard)
* All CSS is scoped under that class to prevent conflicts.
*
* IMPORTANT: Class names are NOT renamed - they remain as originally coded.
* This ensures compatibility with the main style.css template.
*/
/* ============================================================================
GLOBAL DARK MODE VARIABLES & UNIVERSAL OVERRIDES
This section MUST be at the top to ensure maximum override capability
============================================================================ */
:root {
--dm-bg-primary: #0f172a;
--dm-bg-secondary: #1e293b;
--dm-bg-tertiary: #334155;
--dm-text-primary: #ffffff;
--dm-text-secondary: #e2e8f0;
--dm-text-muted: #9ca3af;
--dm-border: #334155;
--dm-accent: #6366F1;
}
/* DISABLED /* NUCLEAR OPTION: Force dark mode on ALL elements with inline styles */ */
/* DISABLED body[data-theme-version="dark"] [style*="background: #f"], */
/* DISABLED body[data-theme-version="dark"] [style*="background:#f"], */
/* DISABLED body[data-theme-version="dark"] [style*="background: #e"], */
/* DISABLED body[data-theme-version="dark"] [style*="background:#e"], */
/* DISABLED body[data-theme-version="dark"] [style*="background: #d"], */
/* DISABLED body[data-theme-version="dark"] [style*="background:#d"], */
/* DISABLED body[data-theme-version="dark"] [style*="background: white"], */
/* DISABLED body[data-theme-version="dark"] [style*="background: #fff"], */
/* DISABLED body[data-theme-version="dark"] [style*="background:#fff"], */
/* DISABLED body[data-theme-version="dark"] [style*="background-color: #f"], */
/* DISABLED body[data-theme-version="dark"] [style*="background-color:#f"], */
/* DISABLED body[data-theme-version="dark"] [style*="background-color: white"], */
/* DISABLED body[data-theme-version="dark"] [style*="background-color: #fff"] { */
/* DISABLED background: #1e293b !important; */
/* DISABLED background-color: #1e293b !important; */
/* DISABLED } */
/* DISABLED */
/* DISABLED /* Force dark text colors on elements with light text inline styles */ */
/* DISABLED body[data-theme-version="dark"] [style*="color: #1"], */
/* DISABLED body[data-theme-version="dark"] [style*="color:#1"], */
/* DISABLED body[data-theme-version="dark"] [style*="color: #2"], */
/* DISABLED body[data-theme-version="dark"] [style*="color:#2"], */
/* DISABLED body[data-theme-version="dark"] [style*="color: #3"], */
/* DISABLED body[data-theme-version="dark"] [style*="color:#3"], */
/* DISABLED body[data-theme-version="dark"] [style*="color: #4"], */
/* DISABLED body[data-theme-version="dark"] [style*="color:#4"], */
/* DISABLED body[data-theme-version="dark"] [style*="color: #5"], */
/* DISABLED body[data-theme-version="dark"] [style*="color:#5"] { */
/* DISABLED color: #e2e8f0 !important; */
/* DISABLED } */
/* DISABLED */
/* DISABLED /* Force muted text to be visible */ */
/* DISABLED body[data-theme-version="dark"] [style*="color: #6"], */
/* DISABLED body[data-theme-version="dark"] [style*="color:#6"], */
/* DISABLED body[data-theme-version="dark"] [style*="color: #7"], */
/* DISABLED body[data-theme-version="dark"] [style*="color:#7"], */
/* DISABLED body[data-theme-version="dark"] [style*="color: #8"], */
/* DISABLED body[data-theme-version="dark"] [style*="color:#8"], */
/* DISABLED body[data-theme-version="dark"] [style*="color: #9"], */
/* DISABLED body[data-theme-version="dark"] [style*="color:#9"] { */
/* DISABLED color: #9ca3af !important; */
/* DISABLED } */
/* DISABLED */
/* DISABLED /* Force borders to be visible */ */
/* DISABLED body[data-theme-version="dark"] [style*="border: 1px solid #e"], */
/* DISABLED body[data-theme-version="dark"] [style*="border: 1px solid #d"], */
/* DISABLED body[data-theme-version="dark"] [style*="border: 2px solid #e"], */
/* DISABLED body[data-theme-version="dark"] [style*="border: 2px solid #d"], */
/* DISABLED body[data-theme-version="dark"] [style*="border-color: #e"], */
/* DISABLED body[data-theme-version="dark"] [style*="border-color: #d"] { */
/* DISABLED border-color: #334155 !important; */
/* DISABLED } */
/* ============================================================================
UNIVERSAL WHITE BACKGROUND OVERRIDE FOR DARK MODE
Any element with explicit white/light background classes gets dark background
============================================================================ */
/* Sections that commonly have white backgrounds - these get dark card styling */
[data-theme-version="dark"] .form-area,
[data-theme-version="dark"] .content-area,
[data-theme-version="dark"] .upload-area,
[data-theme-version="dark"] .drop-area,
[data-theme-version="dark"] .file-upload-area {
background: #1e293b !important;
border-color: #334155 !important;
}
/* Gradient cards should NOT change in dark mode - preserve their custom styling */
/* These cards have their own gradient backgrounds defined in page CSS, don't override them */
/* Global element overrides for dark mode - Cards only */
/* IMPORTANT: portfolio-card is excluded because it must keep its purple gradient */
[data-theme-version="dark"] .card:not(.account-card):not(.portfolio-card),
[data-theme-version="dark"] .info-card,
[data-theme-version="dark"] .kyc-form-card,
[data-theme-version="dark"] .kyc-status-card,
[data-theme-version="dark"] .step-card,
[data-theme-version="dark"] .stat-card,
[data-theme-version="dark"] .trader-card,
[data-theme-version="dark"] .payment-card,
[data-theme-version="dark"] .deposits-card,
[data-theme-version="dark"] .filters-card,
[data-theme-version="dark"] .content-card,
[data-theme-version="dark"] .settings-card,
[data-theme-version="dark"] .profile-card,
[data-theme-version="dark"] .wallet-card:not(.portfolio-card),
[data-theme-version="dark"] .transaction-card,
[data-theme-version="dark"] .history-card,
[data-theme-version="dark"] .details-card,
[data-theme-version="dark"] .summary-card,
[data-theme-version="dark"] .verification-card,
[data-theme-version="dark"] .upload-card,
[data-theme-version="dark"] .plan-card,
[data-theme-version="dark"] .pricing-card,
[data-theme-version="dark"] .feature-card,
[data-theme-version="dark"] .status-card,
[data-theme-version="dark"] .notification-card,
[data-theme-version="dark"] .alert-card,
[data-theme-version="dark"] .action-card,
[data-theme-version="dark"] .data-card,
[data-theme-version="dark"] .list-card,
[data-theme-version="dark"] .main-card,
[data-theme-version="dark"] .section-card,
[data-theme-version="dark"] .box-card,
[data-theme-version="dark"] .panel-card,
[data-theme-version="dark"] .widget-card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
/* Ensure all cards maintain border-radius in dark mode */
[data-theme-version="dark"] .card,
[data-theme-version="dark"] .card-body {
border-radius: 12px !important;
overflow: hidden;
}
/* All headings in dark mode */
[data-theme-version="dark"] h1,
[data-theme-version="dark"] h2,
[data-theme-version="dark"] h3,
[data-theme-version="dark"] h4,
[data-theme-version="dark"] h5,
[data-theme-version="dark"] h6,
[data-theme-version="dark"] .card-title,
[data-theme-version="dark"] .info-card-title,
[data-theme-version="dark"] strong {
color: #fff !important;
}
/* All paragraphs and labels - exclude account-card elements which have their own styling */
[data-theme-version="dark"] p:not(.account-card p):not(.balance-overview-card p),
[data-theme-version="dark"] label:not(.account-card label),
[data-theme-version="dark"] .form-label,
[data-theme-version="dark"] .info-label {
color: #d1d5db !important;
}
/* Muted/secondary text */
[data-theme-version="dark"] .text-muted,
[data-theme-version="dark"] small,
[data-theme-version="dark"] .info-value {
color: #9ca3af !important;
}
/* Form inputs universal dark mode - removed background override, keeping text/placeholder colors */
[data-theme-version="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
[data-theme-version="dark"] select,
[data-theme-version="dark"] textarea {
color: #fff !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] input::placeholder,
[data-theme-version="dark"] textarea::placeholder {
color: #6b7280 !important;
}
/* Select option styling */
[data-theme-version="dark"] select option {
background: #1e293b !important;
color: #fff !important;
}
/* Table universal dark mode */
[data-theme-version="dark"] table {
background: #1e293b !important;
}
[data-theme-version="dark"] thead,
[data-theme-version="dark"] thead tr,
[data-theme-version="dark"] th {
background: #0f172a !important;
background-color: #0f172a !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] tbody tr {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] td {
color: #d1d5db !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] tbody tr:hover {
background: rgba(255, 255, 255, 0.05) !important;
}
/* Modal dark mode */
[data-theme-version="dark"] .modal-content {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .modal-header,
[data-theme-version="dark"] .modal-footer {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .modal-body {
background: #1e293b !important;
}
[data-theme-version="dark"] .modal-title {
color: #fff !important;
}
/* Upload areas */
[data-theme-version="dark"] .upload-area,
[data-theme-version="dark"] .upload-photo-section {
background: #0f172a !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .upload-text {
color: #e2e8f0 !important;
}
[data-theme-version="dark"] .upload-hint {
color: #9ca3af !important;
}
/* Info rows */
[data-theme-version="dark"] .info-row {
border-color: #334155 !important;
}
/* Dropdowns */
[data-theme-version="dark"] .dropdown-menu {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .dropdown-item {
color: #e2e8f0 !important;
}
[data-theme-version="dark"] .dropdown-item:hover {
background: #334155 !important;
}
/* Pagination */
[data-theme-version="dark"] .page-btn,
[data-theme-version="dark"] .pagination .page-link {
background: #1e293b !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
[data-theme-version="dark"] .page-btn.active,
[data-theme-version="dark"] .pagination .page-item.active .page-link {
background: #6366F1 !important;
border-color: #6366F1 !important;
color: #fff !important;
}
/* Breadcrumbs */
[data-theme-version="dark"] .breadcrumb {
background: transparent !important;
}
[data-theme-version="dark"] .breadcrumb-item a {
color: #9ca3af !important;
}
[data-theme-version="dark"] .breadcrumb-item.active {
color: #6366F1 !important;
}
/* Back button */
[data-theme-version="dark"] .back-btn {
background: rgba(99, 102, 241, 0.15) !important;
}
[data-theme-version="dark"] .back-btn i {
color: #818cf8 !important;
}
/* Button styling */
[data-theme-version="dark"] .btn-action {
background: rgba(99, 102, 241, 0.15) !important;
border-color: #6366F1 !important;
color: #818cf8 !important;
}
[data-theme-version="dark"] .btn-action:hover {
background: rgba(99, 102, 241, 0.25) !important;
}
/* Preserve warning/info box colors but make text visible */
[data-theme-version="dark"] [style*="background: #fef3c7"],
[data-theme-version="dark"] [style*="background: #fef2f2"],
[data-theme-version="dark"] [style*="background: #f0fdf4"],
[data-theme-version="dark"] [style*="background: #f0f9ff"] {
/* Keep these light for visibility - they are alerts */
}
/* ==========================================
2fa-setup.html - Body Class: .page-twofa
========================================== */
/* 2FA Setup Page Styles */
.page-twofa .twofa-container {
max-width: 800px;
margin: 0 auto;
}
.page-twofa .twofa-header {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
border-radius: 16px;
padding: 40px;
margin-bottom: 30px;
color: white;
text-align: center;
position: relative;
overflow: hidden;
}
.page-twofa .twofa-header::before {
content: '';
position: absolute;
top: -80px;
right: -80px;
width: 250px;
height: 250px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
}
.page-twofa .twofa-header-content {
position: relative;
z-index: 1;
}
.page-twofa .twofa-header h1 {
font-size: 32px;
font-weight: 700;
margin-bottom: 12px;
color: white;
}
.page-twofa .twofa-header p {
font-size: 16px;
color: white;
margin-bottom: 0;
opacity: 0.95;
}
.page-twofa .step-card {
background: white;
border-radius: 16px;
padding: 35px;
margin-bottom: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border: 2px solid var(--border);
}
.page-twofa .step-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
}
.page-twofa .step-number {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
font-weight: 700;
flex-shrink: 0;
}
.page-twofa .step-title {
font-size: 22px;
font-weight: 700;
color: #1a1a1a;
margin: 0;
}
.page-twofa .step-description {
color: #6b7280;
font-size: 14px;
margin-bottom: 25px;
line-height: 1.6;
}
.page-twofa .qr-code-container {
background: #f9fafb;
border: 2px solid var(--border);
border-radius: 16px;
padding: 30px;
text-align: center;
margin-bottom: 25px;
}
.page-twofa .qr-code-box {
width: 220px;
height: 220px;
background: white;
border: 3px solid #e5e7eb;
border-radius: 12px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.page-twofa .qr-code-box img {
width: 200px;
height: 200px;
}
.page-twofa .qr-code-placeholder {
font-size: 80px;
color: #d1d5db;
}
.page-twofa .manual-code-section {
background: #fef3c7;
border: 2px solid #fde68a;
border-radius: 12px;
padding: 20px;
margin-top: 20px;
}
.page-twofa .manual-code-label {
font-size: 14px;
font-weight: 600;
color: #92400e;
margin-bottom: 10px;
}
.page-twofa .manual-code {
font-family: 'Courier New', monospace;
font-size: 16px;
font-weight: 700;
color: #1a1a1a;
background: white;
padding: 15px;
border-radius: 8px;
text-align: center;
letter-spacing: 2px;
user-select: all;
border: 2px solid #fde68a;
}
.page-twofa .btn-copy-code {
background: var(--primary);
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
margin-top: 12px;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.page-twofa .btn-copy-code:hover {
background: var(--primary-hover);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.page-twofa .form-group-2fa {
margin-bottom: 24px;
}
.page-twofa .form-label-2fa {
font-size: 14px;
font-weight: 600;
color: #374151;
margin-bottom: 8px;
display: block;
}
.page-twofa .form-input-2fa {
width: 100%;
height: 52px;
padding: 0 16px;
font-size: 15px;
color: #1a1a1a;
background: white;
border: 2px solid var(--border);
border-radius: 10px;
transition: all 0.3s ease;
}
.page-twofa .form-input-2fa:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}
.page-twofa .verification-code-input {
text-align: center;
font-size: 20px;
font-weight: 600;
letter-spacing: 8px;
font-family: 'Courier New', monospace;
}
.page-twofa .info-box-2fa {
background: #f0f9ff;
border: 2px solid #bfdbfe;
border-radius: 12px;
padding: 18px;
margin-bottom: 25px;
display: flex;
gap: 12px;
}
.page-twofa .info-box-2fa i {
color: var(--primary);
font-size: 22px;
margin-top: 2px;
flex-shrink: 0;
}
.page-twofa .info-box-2fa-content {
flex: 1;
}
.page-twofa .info-box-2fa h4 {
font-size: 15px;
font-weight: 700;
color: #1e3a8a;
margin-bottom: 8px;
}
.page-twofa .info-box-2fa p {
font-size: 14px;
color: #1e3a8a;
margin: 0;
line-height: 1.6;
}
.page-twofa .recovery-codes-container {
background: #f9fafb;
border: 2px solid var(--border);
border-radius: 12px;
padding: 25px;
margin-bottom: 25px;
}
.page-twofa .recovery-codes-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 20px;
}
.page-twofa .recovery-code-item {
background: white;
border: 2px solid var(--border);
border-radius: 8px;
padding: 12px;
font-family: 'Courier New', monospace;
font-size: 15px;
font-weight: 600;
text-align: center;
color: #1a1a1a;
letter-spacing: 1px;
}
.page-twofa .btn-2fa {
background: var(--primary);
color: white;
border: none;
padding: 16px 40px;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 10px;
width: 100%;
justify-content: center;
}
.page-twofa .btn-2fa:hover {
background: var(--primary-hover);
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}
.page-twofa .btn-2fa i {
font-size: 22px;
}
.page-twofa .btn-secondary {
background: #f3f4f6;
color: #6b7280;
border: 2px solid var(--border);
padding: 14px 30px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.page-twofa .btn-secondary:hover {
background: #e5e7eb;
color: #1a1a1a;
}
.page-twofa .warning-box {
background: #fef3c7;
border: 2px solid #fde68a;
border-radius: 12px;
padding: 20px;
margin-bottom: 25px;
display: flex;
gap: 12px;
}
.page-twofa .warning-box i {
color: #d97706;
font-size: 24px;
margin-top: 2px;
flex-shrink: 0;
}
.page-twofa .warning-box-content h4 {
font-size: 15px;
font-weight: 700;
color: #92400e;
margin-bottom: 8px;
}
.page-twofa .warning-box-content p {
font-size: 14px;
color: #78350f;
margin: 0;
line-height: 1.6;
}
.page-twofa .checkbox-container {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 25px;
padding: 16px;
background: #f9fafb;
border: 2px solid var(--border);
border-radius: 10px;
}
.page-twofa .checkbox-container input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
}
.page-twofa .checkbox-container label {
font-size: 14px;
font-weight: 500;
color: #1a1a1a;
cursor: pointer;
margin: 0;
}
@media (max-width: 768px) {
.page-twofa .twofa-header {
padding: 30px 20px;
}
.page-twofa .twofa-header h1 {
font-size: 26px;
}
.page-twofa .step-card {
padding: 25px 20px;
}
.page-twofa .qr-code-box {
width: 200px;
height: 200px;
}
.page-twofa .qr-code-box img {
width: 180px;
height: 180px;
}
.page-twofa .recovery-codes-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================
signin.html - Body Class: .page-signin
========================================== */
.page-signin * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html.page-signin,
body.page-signin {
overflow-x: hidden;
}
body.page-signin {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%) fixed;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
position: relative;
}
/* Animated Background Circles */
body.page-signin::before {
content: '';
position: fixed;
top: -150px;
right: -150px;
width: 400px;
height: 400px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: floatSignin 6s ease-in-out infinite;
pointer-events: none;
}
body.page-signin::after {
content: '';
position: fixed;
bottom: -100px;
left: -100px;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
animation: floatSignin 8s ease-in-out infinite reverse;
pointer-events: none;
}
@keyframes floatSignin {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
.page-signin .auth-container {
position: relative;
z-index: 1;
width: 100%;
max-width: 450px;
}
.page-signin .auth-card {
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.page-signin .auth-header {
text-align: center;
padding: 40px 40px 30px;
background: white;
}
.page-signin .auth-logo {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 20px;
}
.page-signin .auth-logo svg {
width: 40px;
height: 40px;
}
.page-signin .auth-logo-text {
font-size: 28px;
font-weight: 700;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.page-signin .auth-title {
font-size: 26px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
}
.page-signin .auth-subtitle {
font-size: 15px;
color: #6b7280;
}
.page-signin .auth-subtitle a {
color: #6366F1;
text-decoration: none;
font-weight: 600;
}
.page-signin .auth-subtitle a:hover {
text-decoration: underline;
}
.page-signin .auth-body {
padding: 0 40px 40px;
}
.page-signin .form-group {
margin-bottom: 20px;
}
.page-signin .form-label {
display: block;
font-size: 14px;
font-weight: 600;
color: #374151;
margin-bottom: 8px;
}
.page-signin .form-input-wrapper {
position: relative;
}
.page-signin .form-input {
width: 100%;
height: 50px;
padding: 0 16px 0 48px;
font-size: 15px;
color: #1a1a1a;
background: #f9fafb;
border: 2px solid var(--border);
border-radius: 10px;
transition: all 0.3s ease;
}
.page-signin .form-input:focus {
outline: none;
background: white;
border-color: #6366F1;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
.page-signin .form-input::placeholder {
color: #9ca3af;
}
.page-signin .form-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
font-size: 20px;
}
.page-signin .form-input:focus + .form-icon {
color: #6366F1;
}
.page-signin .password-toggle {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
cursor: pointer;
font-size: 20px;
user-select: none;
}
.page-signin .password-toggle:hover {
color: #6366F1;
}
.page-signin .form-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.page-signin .checkbox-group {
display: flex;
align-items: center;
gap: 8px;
}
.page-signin .checkbox-input {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: #6366F1;
}
.page-signin .checkbox-label {
font-size: 14px;
color: #6b7280;
cursor: pointer;
}
.page-signin .forgot-password {
font-size: 14px;
color: #6366F1;
text-decoration: none;
font-weight: 600;
}
.page-signin .forgot-password:hover {
text-decoration: underline;
}
.page-signin .btn-submit {
width: 100%;
height: 50px;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
color: white;
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.page-signin .btn-submit:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}
.page-signin .btn-submit:active {
transform: translateY(0);
}
.page-signin .divider {
display: flex;
align-items: center;
text-align: center;
margin: 30px 0;
color: #9ca3af;
font-size: 14px;
}
.divider::before,
.page-signin .divider::after {
content: '';
flex: 1;
border-bottom: 1px solid var(--border);
}
.page-signin .divider span {
padding: 0 16px;
}
.page-signin .social-login {
display: block;
}
.page-signin .btn-social {
width: 100%;
height: 48px;
background: white;
border: 2px solid var(--border);
border-radius: 10px;
font-size: 14px;
font-weight: 600;
color: #374151;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.page-signin .btn-social:hover {
background: #f9fafb;
border-color: #6366F1;
}
.page-signin .btn-social svg {
width: 20px;
height: 20px;
}
.page-signin .error-message {
background: #fee2e2;
border: 1px solid #fecaca;
color: #dc2626;
padding: 12px 16px;
border-radius: 10px;
font-size: 14px;
margin-bottom: 20px;
display: none;
align-items: center;
gap: 10px;
}
.page-signin .error-message i {
font-size: 20px;
}
/* Responsive */
@media (max-width: 768px) {
/* Hide background circles on tablets and mobile */
body.page-signin::before,
body.page-signin::after {
display: none;
}
}
@media (max-width: 640px) {
body.page-signin {
padding: 20px 15px;
}
.page-signin .auth-container {
max-width: 100%;
}
.page-signin .auth-card {
border-radius: 16px;
}
.page-signin .auth-header,
.page-signin .auth-body {
padding-left: 20px;
padding-right: 20px;
}
.page-signin .auth-header {
padding-top: 25px;
padding-bottom: 15px;
}
.page-signin .auth-body {
padding-bottom: 25px;
}
.page-signin .auth-logo-text {
font-size: 22px;
}
.page-signin .auth-title {
font-size: 20px;
}
.page-signin .auth-subtitle {
font-size: 14px;
}
.page-signin .form-input {
height: 46px;
font-size: 16px;
}
.page-signin .form-footer {
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.page-signin .btn-submit {
height: 46px;
font-size: 15px;
}
}
@media (max-width: 400px) {
body.page-signin {
padding: 15px 10px;
}
.page-signin .auth-header,
.page-signin .auth-body {
padding-left: 16px;
padding-right: 16px;
}
.page-signin .auth-logo-text {
font-size: 20px;
}
.page-signin .auth-title {
font-size: 18px;
}
}
/* ==========================================
signup.html - Body Class: .page-signup
========================================== */
.page-signup * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html.page-signup,
body.page-signup {
overflow-x: hidden;
}
body.page-signup {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
position: relative;
}
/* Animated Background Circles - Hidden on smaller screens */
body.page-signup::before {
content: '';
position: fixed;
top: -150px;
right: -150px;
width: 400px;
height: 400px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
pointer-events: none;
}
body.page-signup::after {
content: '';
position: fixed;
bottom: -100px;
left: -100px;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
animation: float 8s ease-in-out infinite reverse;
pointer-events: none;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
.page-signup .auth-container {
position: relative;
z-index: 1;
width: 100%;
max-width: 480px;
}
.page-signup .auth-card {
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.page-signup .auth-header {
text-align: center;
padding: 40px 40px 30px;
background: white;
}
.page-signup .auth-logo {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 20px;
}
.page-signup .auth-logo svg {
width: 40px;
height: 40px;
}
.page-signup .auth-logo-text {
font-size: 28px;
font-weight: 700;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.page-signup .auth-title {
font-size: 26px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
}
.page-signup .auth-subtitle {
font-size: 15px;
color: #6b7280;
}
.page-signup .auth-subtitle a {
color: #6366F1;
text-decoration: none;
font-weight: 600;
}
.page-signup .auth-subtitle a:hover {
text-decoration: underline;
}
.page-signup .auth-body {
padding: 0 40px 40px;
}
.page-signup .form-group {
margin-bottom: 20px;
}
.page-signup .form-label {
display: block;
font-size: 14px;
font-weight: 600;
color: #374151;
margin-bottom: 8px;
}
.page-signup .form-input-wrapper {
position: relative;
}
.page-signup .form-input {
width: 100%;
height: 50px;
padding: 0 16px 0 48px;
font-size: 15px;
color: #1a1a1a;
background: #f9fafb;
border: 2px solid var(--border);
border-radius: 10px;
transition: all 0.3s ease;
}
.page-signup .form-input:focus {
outline: none;
background: white;
border-color: #6366F1;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
.page-signup .form-input::placeholder {
color: #9ca3af;
}
.page-signup .form-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
font-size: 20px;
}
.page-signup .form-input:focus + .form-icon {
color: #6366F1;
}
.page-signup .password-toggle {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
cursor: pointer;
font-size: 20px;
user-select: none;
}
.page-signup .password-toggle:hover {
color: #6366F1;
}
.page-signup .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.page-signup .checkbox-group {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 24px;
}
.page-signup .checkbox-input {
width: 18px;
height: 18px;
margin-top: 2px;
cursor: pointer;
accent-color: #6366F1;
}
.page-signup .checkbox-label {
font-size: 14px;
color: #6b7280;
line-height: 1.5;
}
.page-signup .checkbox-label a {
color: #6366F1;
text-decoration: none;
font-weight: 600;
}
.page-signup .checkbox-label a:hover {
text-decoration: underline;
}
.page-signup .btn-submit {
width: 100%;
height: 50px;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
color: white;
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.page-signup .btn-submit:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}
.page-signup .btn-submit:active {
transform: translateY(0);
}
.page-signup .divider {
display: flex;
align-items: center;
text-align: center;
margin: 30px 0;
color: #9ca3af;
font-size: 14px;
}
.divider::before,
.page-signup .divider::after {
content: '';
flex: 1;
border-bottom: 1px solid var(--border);
}
.page-signup .divider span {
padding: 0 16px;
}
.page-signup .social-login {
display: block;
}
.page-signup .btn-social {
width: 100%;
height: 48px;
background: white;
border: 2px solid var(--border);
border-radius: 10px;
font-size: 14px;
font-weight: 600;
color: #374151;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.page-signup .btn-social:hover {
background: #f9fafb;
border-color: #6366F1;
}
.page-signup .btn-social svg {
width: 20px;
height: 20px;
}
.page-signup .error-message {
display: none;
background: #fee2e2;
border: 1px solid #fecaca;
color: #dc2626;
padding: 12px 16px;
border-radius: 10px;
font-size: 14px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.page-signup .error-message i {
font-size: 20px;
}
/* Responsive */
@media (max-width: 768px) {
/* Hide background circles on tablets and mobile */
body.page-signup::before,
body.page-signup::after {
display: none;
}
}
@media (max-width: 640px) {
body.page-signup {
padding: 20px 15px;
align-items: flex-start;
padding-top: 30px;
}
.page-signup .auth-container {
max-width: 100%;
}
.page-signup .auth-card {
border-radius: 16px;
}
.page-signup .auth-header,
.page-signup .auth-body {
padding-left: 20px;
padding-right: 20px;
}
.page-signup .auth-header {
padding-top: 25px;
padding-bottom: 15px;
}
.page-signup .auth-body {
padding-bottom: 25px;
}
.page-signup .auth-logo-text {
font-size: 22px;
}
.page-signup .auth-title {
font-size: 20px;
}
.page-signup .auth-subtitle {
font-size: 14px;
}
.page-signup .form-label {
font-size: 13px;
}
.page-signup .form-input {
height: 46px;
font-size: 16px;
padding: 0 14px 0 42px;
}
.page-signup .form-icon {
left: 14px;
font-size: 18px;
}
.page-signup .form-row {
grid-template-columns: 1fr;
gap: 0;
}
.page-signup .btn-submit {
height: 46px;
font-size: 15px;
}
.page-signup .checkbox-group {
align-items: flex-start;
}
.page-signup .checkbox-label {
font-size: 13px;
line-height: 1.4;
}
}
@media (max-width: 400px) {
body.page-signup {
padding: 15px 10px;
padding-top: 20px;
}
.page-signup .auth-header,
.page-signup .auth-body {
padding-left: 16px;
padding-right: 16px;
}
.page-signup .auth-logo-text {
font-size: 20px;
}
.page-signup .auth-title {
font-size: 18px;
}
.page-signup .form-input {
height: 44px;
}
}
/* ==========================================
signup-step2.html - Body Class: .page-signupstep2
========================================== */
.page-signupstep2 * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html.page-signupstep2,
body.page-signupstep2 {
overflow-x: hidden;
}
body.page-signupstep2 {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%) fixed;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
position: relative;
}
body.page-signupstep2::before {
content: '';
position: fixed;
top: -150px;
right: -150px;
width: 400px;
height: 400px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: floatStep2 6s ease-in-out infinite;
pointer-events: none;
}
body.page-signupstep2::after {
content: '';
position: fixed;
bottom: -100px;
left: -100px;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
animation: floatStep2 8s ease-in-out infinite reverse;
pointer-events: none;
}
@keyframes floatStep2 {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
.page-signupstep2 .auth-container {
position: relative;
z-index: 1;
width: 100%;
max-width: 480px;
}
.page-signupstep2 .auth-card {
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.page-signupstep2 .auth-header {
text-align: center;
padding: 40px 40px 20px;
background: white;
}
.page-signupstep2 .auth-logo {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 20px;
}
.page-signupstep2 .auth-logo svg {
width: 40px;
height: 40px;
}
.page-signupstep2 .auth-logo-text {
font-size: 28px;
font-weight: 700;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.page-signupstep2 .progress-steps {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 24px;
}
.page-signupstep2 .step {
width: 40px;
height: 6px;
background: #e5e7eb;
border-radius: 3px;
transition: all 0.3s ease;
}
.page-signupstep2 .step.active {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
}
.page-signupstep2 .step.completed {
background: #10b981;
}
.page-signupstep2 .auth-title {
font-size: 26px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
}
.page-signupstep2 .auth-subtitle {
font-size: 15px;
color: #6b7280;
margin-bottom: 8px;
}
.page-signupstep2 .step-indicator {
font-size: 13px;
color: #6366F1;
font-weight: 600;
}
.page-signupstep2 .auth-body {
padding: 0 40px 40px;
}
.page-signupstep2 .form-group {
margin-bottom: 24px;
}
.page-signupstep2 .form-label {
display: block;
font-size: 14px;
font-weight: 600;
color: #374151;
margin-bottom: 8px;
}
.page-signupstep2 .form-select,
.page-signupstep2 .form-input {
width: 100%;
height: 50px;
padding: 0 16px;
font-size: 15px;
color: #1a1a1a;
background: #f9fafb;
border: 2px solid var(--border);
border-radius: 10px;
transition: all 0.3s ease;
}
.page-signupstep2 .form-select:focus,
.page-signupstep2 .form-input:focus {
outline: none;
background: white;
border-color: #6366F1;
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}
.page-signupstep2 .form-input::placeholder {
color: #9ca3af;
}
.page-signupstep2 .info-box {
background: #f0f9ff;
border: 2px solid #bfdbfe;
border-radius: 12px;
padding: 16px;
margin-bottom: 24px;
display: flex;
gap: 12px;
}
.page-signupstep2 .info-box i {
color: #6366F1;
font-size: 20px;
flex-shrink: 0;
}
.page-signupstep2 .info-box-content {
color: #1e3a8a;
font-size: 13px;
line-height: 1.6;
}
.page-signupstep2 .btn-row {
display: flex;
gap: 12px;
}
.page-signupstep2 .btn-back {
flex: 1;
height: 50px;
background: white;
color: #6366F1;
border: 2px solid #6366F1;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.page-signupstep2 .btn-back:hover {
background: #f9fafb;
}
.page-signupstep2 .btn-submit {
flex: 2;
height: 50px;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
color: white;
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.page-signupstep2 .btn-submit:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}
.page-signupstep2 .btn-submit:active {
transform: translateY(0);
}
@media (max-width: 768px) {
body.page-signupstep2::before,
body.page-signupstep2::after {
display: none;
}
}
@media (max-width: 640px) {
body.page-signupstep2 {
padding: 20px 15px;
}
.page-signupstep2 .auth-container {
max-width: 100%;
}
.page-signupstep2 .auth-card {
border-radius: 16px;
}
.page-signupstep2 .auth-header,
.page-signupstep2 .auth-body {
padding-left: 20px;
padding-right: 20px;
}
.page-signupstep2 .auth-header {
padding-top: 25px;
padding-bottom: 15px;
}
.page-signupstep2 .auth-body {
padding-bottom: 25px;
}
.page-signupstep2 .auth-logo-text {
font-size: 22px;
}
.page-signupstep2 .auth-title {
font-size: 20px;
}
.page-signupstep2 .btn-row {
flex-direction: column;
}
.page-signupstep2 .btn-back,
.page-signupstep2 .btn-submit {
width: 100%;
flex: none;
}
}
@media (max-width: 400px) {
body.page-signupstep2 {
padding: 15px 10px;
}
.page-signupstep2 .auth-header,
.page-signupstep2 .auth-body {
padding-left: 16px;
padding-right: 16px;
}
.page-signupstep2 .auth-logo-text {
font-size: 20px;
}
.page-signupstep2 .auth-title {
font-size: 18px;
}
}
/* ==========================================
signup-step3.html - Body Class: .page-signupstep3
========================================== */
.page-signupstep3 * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html.page-signupstep3,
body.page-signupstep3 {
overflow-x: hidden;
}
html.page-signupstep3 {
min-height: 100%;
}
body.page-signupstep3 {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%) fixed;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
position: relative;
}
body.page-signupstep3::before {
content: '';
position: fixed;
top: -150px;
right: -150px;
width: 400px;
height: 400px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: floatstep3 6s ease-in-out infinite;
pointer-events: none;
}
body.page-signupstep3::after {
content: '';
position: fixed;
bottom: -100px;
left: -100px;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
animation: floatstep3 8s ease-in-out infinite reverse;
pointer-events: none;
}
@keyframes floatstep3 {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@media (max-width: 768px) {
body.page-signupstep3::before,
body.page-signupstep3::after {
display: none;
}
}
.page-signupstep3 .auth-container {
position: relative;
z-index: 1;
width: 100%;
max-width: 600px;
}
.page-signupstep3 .auth-card {
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.page-signupstep3 .auth-header {
text-align: center;
padding: 40px 40px 20px;
background: white;
}
.page-signupstep3 .auth-logo {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 20px;
}
.page-signupstep3 .auth-logo svg {
width: 40px;
height: 40px;
}
.page-signupstep3 .auth-logo-text {
font-size: 28px;
font-weight: 700;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.page-signupstep3 .progress-steps {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 24px;
}
.page-signupstep3 .step {
width: 40px;
height: 6px;
background: #e5e7eb;
border-radius: 3px;
transition: all 0.3s ease;
}
.page-signupstep3 .step.active {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
}
.page-signupstep3 .step.completed {
background: #10b981;
}
.page-signupstep3 .auth-title {
font-size: 26px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
}
.page-signupstep3 .auth-subtitle {
font-size: 15px;
color: #6b7280;
margin-bottom: 8px;
}
.page-signupstep3 .step-indicator {
font-size: 13px;
color: #6366F1;
font-weight: 600;
}
.page-signupstep3 .auth-body {
padding: 0 40px 40px;
}
.page-signupstep3 .form-group {
margin-bottom: 24px;
}
.page-signupstep3 .form-label {
display: block;
font-size: 14px;
font-weight: 600;
color: #374151;
margin-bottom: 8px;
}
.page-signupstep3 .form-select,
.page-signupstep3 .form-input {
width: 100%;
height: 50px;
padding: 0 16px;
font-size: 15px;
color: #1a1a1a;
background: #f9fafb;
border: 2px solid var(--border);
border-radius: 10px;
transition: all 0.3s ease;
}
.page-signupstep3 .form-select:focus,
.page-signupstep3 .form-input:focus {
outline: none;
background: white;
border-color: #6366F1;
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}
.page-signupstep3 .form-input::placeholder {
color: #9ca3af;
}
.page-signupstep3 .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.page-signupstep3 .info-box {
background: #f0f9ff;
border: 2px solid #bfdbfe;
border-radius: 12px;
padding: 16px;
margin-bottom: 24px;
display: flex;
gap: 12px;
}
.page-signupstep3 .info-box i {
color: #6366F1;
font-size: 20px;
flex-shrink: 0;
}
.page-signupstep3 .info-box-content {
color: #1e3a8a;
font-size: 13px;
line-height: 1.6;
}
.page-signupstep3 .risk-options {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
margin-bottom: 24px;
}
.page-signupstep3 .risk-option {
position: relative;
}
.page-signupstep3 .risk-option input[type="radio"] {
position: absolute;
opacity: 0;
cursor: pointer;
}
.page-signupstep3 .risk-label {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px 12px;
background: #f9fafb;
border: 2px solid var(--border);
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
}
.page-signupstep3 .risk-option input[type="radio"]:checked + .risk-label {
background: #ede9fe;
border-color: #6366F1;
}
.page-signupstep3 .risk-label i {
font-size: 28px;
margin-bottom: 8px;
color: #6366F1;
}
.page-signupstep3 .risk-title {
font-size: 14px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 4px;
}
.page-signupstep3 .risk-desc {
font-size: 12px;
color: #6b7280;
}
.page-signupstep3 .btn-row {
display: flex;
gap: 12px;
}
.page-signupstep3 .btn-back {
flex: 1;
height: 50px;
background: white;
color: #6366F1;
border: 2px solid #6366F1;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.page-signupstep3 .btn-back:hover {
background: #f9fafb;
}
.page-signupstep3 .btn-submit {
flex: 2;
height: 50px;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
color: white;
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.page-signupstep3 .btn-submit:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}
.page-signupstep3 .btn-submit:active {
transform: translateY(0);
}
@media (max-width: 640px) {
body.page-signupstep3 {
padding: 20px 15px;
}
.page-signupstep3 .auth-container {
max-width: 100%;
}
.page-signupstep3 .auth-card {
border-radius: 16px;
}
.page-signupstep3 .auth-header,
.page-signupstep3 .auth-body {
padding-left: 20px;
padding-right: 20px;
}
.page-signupstep3 .auth-header {
padding-top: 30px;
padding-bottom: 20px;
}
.page-signupstep3 .auth-body {
padding-bottom: 30px;
}
.page-signupstep3 .auth-logo-text {
font-size: 24px;
}
.page-signupstep3 .auth-title {
font-size: 22px;
}
.page-signupstep3 .risk-options {
grid-template-columns: 1fr;
}
.page-signupstep3 .btn-row {
flex-direction: column;
}
.page-signupstep3 .btn-back,
.page-signupstep3 .btn-submit {
width: 100%;
flex: none;
}
}
@media (max-width: 400px) {
body.page-signupstep3 {
padding: 15px 10px;
}
.page-signupstep3 .auth-header,
.page-signupstep3 .auth-body {
padding-left: 16px;
padding-right: 16px;
}
.page-signupstep3 .auth-logo-text {
font-size: 20px;
}
.page-signupstep3 .auth-title {
font-size: 20px;
}
}
/* ==========================================
forgot-password.html - Body Class: .page-forgotpwd
========================================== */
.page-forgotpwd * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html.page-forgotpwd,
body.page-forgotpwd {
overflow-x: hidden;
}
html.page-forgotpwd {
min-height: 100%;
}
body.page-forgotpwd {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%) fixed;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
position: relative;
}
/* Animated Background Circles */
body.page-forgotpwd::before {
content: '';
position: fixed;
top: -150px;
right: -150px;
width: 400px;
height: 400px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: floatforgot 6s ease-in-out infinite;
pointer-events: none;
}
body.page-forgotpwd::after {
content: '';
position: fixed;
bottom: -100px;
left: -100px;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
animation: floatforgot 8s ease-in-out infinite reverse;
pointer-events: none;
}
@keyframes floatforgot {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@media (max-width: 768px) {
body.page-forgotpwd::before,
body.page-forgotpwd::after {
display: none;
}
}
.page-forgotpwd .auth-container {
position: relative;
z-index: 1;
width: 100%;
max-width: 480px;
}
.page-forgotpwd .auth-card {
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.page-forgotpwd .auth-header {
text-align: center;
padding: 40px 40px 20px;
background: white;
}
.page-forgotpwd .auth-logo {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 20px;
}
.page-forgotpwd .auth-logo svg {
width: 40px;
height: 40px;
}
.page-forgotpwd .auth-logo-text {
font-size: 28px;
font-weight: 700;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.page-forgotpwd .auth-icon-wrapper {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.page-forgotpwd .auth-icon-wrapper i {
font-size: 40px;
color: white;
}
.page-forgotpwd .auth-title {
font-size: 26px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 12px;
}
.page-forgotpwd .auth-subtitle {
font-size: 15px;
color: #6b7280;
line-height: 1.6;
margin-bottom: 8px;
}
.page-forgotpwd .back-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: #6366F1;
text-decoration: none;
font-weight: 600;
margin-top: 12px;
}
.page-forgotpwd .back-link:hover {
text-decoration: underline;
}
.page-forgotpwd .back-link i {
font-size: 18px;
}
.page-forgotpwd .auth-body {
padding: 30px 40px 40px;
}
.page-forgotpwd .form-group {
margin-bottom: 24px;
}
.page-forgotpwd .form-label {
display: block;
font-size: 14px;
font-weight: 600;
color: #374151;
margin-bottom: 8px;
}
.page-forgotpwd .form-input-wrapper {
position: relative;
}
.page-forgotpwd .form-input {
width: 100%;
height: 50px;
padding: 0 16px 0 48px;
font-size: 15px;
color: #1a1a1a;
background: #f9fafb;
border: 2px solid var(--border);
border-radius: 10px;
transition: all 0.3s ease;
}
.page-forgotpwd .form-input:focus {
outline: none;
background: white;
border-color: #6366F1;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
.page-forgotpwd .form-input::placeholder {
color: #9ca3af;
}
.page-forgotpwd .form-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
font-size: 20px;
}
.page-forgotpwd .form-input:focus + .form-icon {
color: #6366F1;
}
.page-forgotpwd .btn-submit {
width: 100%;
height: 50px;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
color: white;
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.page-forgotpwd .btn-submit:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}
.page-forgotpwd .btn-submit:active {
transform: translateY(0);
}
.page-forgotpwd .success-message {
background: #dcfce7;
border: 1px solid #bbf7d0;
color: #16a34a;
padding: 16px;
border-radius: 10px;
font-size: 14px;
margin-bottom: 24px;
display: none;
align-items: flex-start;
gap: 12px;
line-height: 1.6;
}
.page-forgotpwd .success-message i {
font-size: 24px;
flex-shrink: 0;
}
.page-forgotpwd .success-message strong {
display: block;
margin-bottom: 4px;
}
.page-forgotpwd .error-message {
background: #fee2e2;
border: 1px solid #fecaca;
color: #dc2626;
padding: 12px 16px;
border-radius: 10px;
font-size: 14px;
margin-bottom: 20px;
display: none;
align-items: center;
gap: 10px;
}
.page-forgotpwd .error-message i {
font-size: 20px;
}
.page-forgotpwd .info-box {
background: #f0f9ff;
border: 2px solid #bfdbfe;
border-radius: 12px;
padding: 16px;
margin-top: 24px;
display: flex;
gap: 12px;
}
.page-forgotpwd .info-box i {
color: #6366F1;
font-size: 20px;
flex-shrink: 0;
}
.page-forgotpwd .info-box-content {
color: #1e3a8a;
font-size: 13px;
line-height: 1.6;
}
/* Responsive */
@media (max-width: 640px) {
body.page-forgotpwd {
padding: 20px 15px;
}
.page-forgotpwd .auth-container {
max-width: 100%;
}
.page-forgotpwd .auth-card {
border-radius: 16px;
}
.page-forgotpwd .auth-header,
.page-forgotpwd .auth-body {
padding-left: 20px;
padding-right: 20px;
}
.page-forgotpwd .auth-header {
padding-top: 30px;
padding-bottom: 20px;
}
.page-forgotpwd .auth-body {
padding-bottom: 30px;
}
.page-forgotpwd .auth-logo-text {
font-size: 24px;
}
.page-forgotpwd .auth-title {
font-size: 22px;
}
.page-forgotpwd .btn-submit {
height: 48px;
font-size: 15px;
}
}
@media (max-width: 400px) {
body.page-forgotpwd {
padding: 15px 10px;
}
.page-forgotpwd .auth-header,
.page-forgotpwd .auth-body {
padding-left: 16px;
padding-right: 16px;
}
.page-forgotpwd .auth-logo-text {
font-size: 20px;
}
.page-forgotpwd .auth-title {
font-size: 20px;
}
}
/* ==========================================
email-verification.html - Body Class: .page-emailverify
========================================== */
.page-emailverify * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html.page-emailverify,
body.page-emailverify {
overflow-x: hidden;
}
html.page-emailverify {
min-height: 100%;
}
body.page-emailverify {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%) fixed;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
position: relative;
}
body.page-emailverify::before {
content: '';
position: fixed;
top: -150px;
right: -150px;
width: 400px;
height: 400px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: floatemail 6s ease-in-out infinite;
pointer-events: none;
}
body.page-emailverify::after {
content: '';
position: fixed;
bottom: -100px;
left: -100px;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
animation: floatemail 8s ease-in-out infinite reverse;
pointer-events: none;
}
@keyframes floatemail {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@media (max-width: 768px) {
body.page-emailverify::before,
body.page-emailverify::after {
display: none;
}
}
.page-emailverify .auth-container {
position: relative;
z-index: 1;
width: 100%;
max-width: 550px;
}
.page-emailverify .auth-card {
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.page-emailverify .auth-header {
text-align: center;
padding: 40px 40px 20px;
background: white;
}
.page-emailverify .auth-logo {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 20px;
}
.page-emailverify .auth-logo svg {
width: 40px;
height: 40px;
}
.page-emailverify .auth-logo-text {
font-size: 28px;
font-weight: 700;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.page-emailverify .success-icon-wrapper {
width: 100px;
height: 100px;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
animation: scaleInEmail 0.5s ease-out;
}
@keyframes scaleInEmail {
0% { transform: scale(0); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.page-emailverify .success-icon-wrapper i {
font-size: 50px;
color: white;
}
.page-emailverify .auth-title {
font-size: 26px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 12px;
}
.page-emailverify .auth-subtitle {
font-size: 15px;
color: #6b7280;
line-height: 1.6;
}
.page-emailverify .email-highlight {
color: #6366F1;
font-weight: 600;
}
.page-emailverify .auth-body {
padding: 0 40px 40px;
}
.page-emailverify .info-box {
background: #f0f9ff;
border: 2px solid #bfdbfe;
border-radius: 12px;
padding: 20px;
margin-bottom: 24px;
}
.page-emailverify .info-box-title {
font-size: 16px;
font-weight: 700;
color: #1e3a8a;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.page-emailverify .info-box-title i {
color: #6366F1;
font-size: 22px;
}
.page-emailverify .info-list {
list-style: none;
padding: 0;
}
.page-emailverify .info-list li {
color: #1e3a8a;
font-size: 14px;
padding: 6px 0 6px 24px;
position: relative;
line-height: 1.5;
}
.page-emailverify .info-list li::before {
content: '•';
position: absolute;
left: 8px;
color: #6366F1;
font-weight: bold;
}
.page-emailverify .btn-container {
text-align: center;
}
.page-emailverify .btn-primary {
width: 100%;
height: 50px;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
color: white;
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 16px;
}
.page-emailverify .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
}
.page-emailverify .btn-primary:active {
transform: translateY(0);
}
.page-emailverify .resend-link {
font-size: 14px;
color: #6b7280;
}
.page-emailverify .resend-link button {
background: none;
border: none;
color: #6366F1;
font-weight: 600;
cursor: pointer;
text-decoration: underline;
}
.page-emailverify .resend-link button:hover {
color: #4F46E5;
}
@media (max-width: 640px) {
body.page-emailverify {
padding: 20px 15px;
}
.page-emailverify .auth-container {
max-width: 100%;
}
.page-emailverify .auth-card {
border-radius: 16px;
}
.page-emailverify .auth-header,
.page-emailverify .auth-body {
padding-left: 20px;
padding-right: 20px;
}
.page-emailverify .auth-header {
padding-top: 30px;
padding-bottom: 20px;
}
.page-emailverify .auth-body {
padding-bottom: 30px;
}
.page-emailverify .auth-logo-text {
font-size: 24px;
}
.page-emailverify .auth-title {
font-size: 22px;
}
.page-emailverify .btn-primary {
height: 48px;
font-size: 15px;
}
}
@media (max-width: 400px) {
body.page-emailverify {
padding: 15px 10px;
}
.page-emailverify .auth-header,
.page-emailverify .auth-body {
padding-left: 16px;
padding-right: 16px;
}
.page-emailverify .auth-logo-text {
font-size: 20px;
}
.page-emailverify .auth-title {
font-size: 20px;
}
}
/* ==========================================
dashboard.html - Body Class: .page-dashboard
========================================== */
/* Hide floating buttons, popup ads, sale banners */
.chatbox-icon-toggle,
.dlab-chatbox,
.add-menu-sidebar,
.sidebar-right-trigger,
[class*="floating-btn"],
[class*="float-btn"],
.dlabnav .chatbox-toggle,
.fixed-content-box,
body > .btn[style*="position: fixed"],
body > a[style*="position: fixed"],
body > div[style*="position: fixed"][style*="bottom"],
body > button[style*="position: fixed"],
.dlab-demo-panel,
.DZ-bt-buy-now,
.DZ-bt-support-now,
.dlab-sale-banner,
.dzSaleBanner,
#dzSaleBanner,
.demo-panel,
[class*="sale-banner"],
[class*="Sale"],
[class*="SALE"],
[class*="demo-panel"],
[id*="sale"],
[id*="Sale"],
[id*="banner"],
.page-dashboard [id*="Banner"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Fix metismenu collapse overlap - ensure submenus have proper background and clear display */
.page-dashboard .metismenu ul a,
.metismenu ul a {
background: var(--sidebar-bg, #1a1d2e);
display: block;
}
/* Ensure collapsed submenus are properly hidden */
.page-dashboard .metismenu .mm-collapse:not(.mm-show),
.metismenu .mm-collapse:not(.mm-show) {
display: none !important;
}
/* Add slight spacing between menu items for clarity */
.page-dashboard .metismenu > li,
.metismenu > li {
margin-bottom: 1px;
}
/* Alert Banner Styles */
.page-dashboard .alert-banner {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border: 1px solid #e0e0e0;
animation: slideDown 0.4s ease-out;
}
.page-dashboard .alert-banner.kyc-banner {
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
border-left: 4px solid #2196f3;
}
.page-dashboard .alert-banner.admin-banner {
background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
border-left: 4px solid #ff9800;
}
/* User Notification Banner Colors */
.page-dashboard .alert-banner.success-banner {
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
border-left: 4px solid #16a34a;
}
.page-dashboard .success-banner .alert-banner-icon {
background: rgba(22, 163, 74, 0.15);
}
.page-dashboard .success-banner .alert-banner-icon i {
color: #16a34a;
font-size: 24px;
}
.page-dashboard .alert-banner.danger-banner {
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
border-left: 4px solid #dc2626;
}
.page-dashboard .danger-banner .alert-banner-icon {
background: rgba(220, 38, 38, 0.15);
}
.page-dashboard .danger-banner .alert-banner-icon i {
color: #dc2626;
font-size: 24px;
}
.page-dashboard .alert-banner.warning-banner {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border-left: 4px solid #d97706;
}
.page-dashboard .warning-banner .alert-banner-icon {
background: rgba(217, 119, 6, 0.15);
}
.page-dashboard .warning-banner .alert-banner-icon i {
color: #d97706;
font-size: 24px;
}
.page-dashboard .alert-banner.info-banner {
background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
border-left: 4px solid #4F46E5;
}
.page-dashboard .info-banner .alert-banner-icon {
background: rgba(2, 132, 199, 0.15);
}
.page-dashboard .info-banner .alert-banner-icon i {
color: #4F46E5;
font-size: 24px;
}
.page-dashboard .alert-banner-content {
display: flex;
align-items: center;
gap: 16px;
position: relative;
}
.page-dashboard .alert-banner-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.9);
}
.page-dashboard .kyc-banner .alert-banner-icon {
background: rgba(33, 150, 243, 0.15);
}
.page-dashboard .kyc-banner .alert-banner-icon i {
color: #2196f3;
font-size: 24px;
}
.page-dashboard .admin-banner .alert-banner-icon {
background: rgba(255, 152, 0, 0.15);
}
.page-dashboard .admin-banner .alert-banner-icon i {
color: #ff9800;
font-size: 24px;
}
.page-dashboard .alert-banner-text {
flex: 1;
}
.page-dashboard .alert-banner-text strong {
display: block;
font-size: 16px;
font-weight: 600;
margin-bottom: 4px;
color: #2a353a;
}
.page-dashboard .alert-banner-text p {
margin: 0;
font-size: 14px;
color: #666;
line-height: 1.5;
}
.page-dashboard .alert-banner-action {
flex-shrink: 0;
padding: 10px 24px;
background: var(--primary);
color: white;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
font-size: 14px;
transition: all 0.3s ease;
}
.page-dashboard .alert-banner-action:hover {
background: var(--primary-hover);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
color: white;
}
.page-dashboard .alert-banner-close {
flex-shrink: 0;
width: 32px;
height: 32px;
border: none;
background: rgba(0, 0, 0, 0.05);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
margin-left: auto;
}
.page-dashboard .alert-banner-close:hover {
background: rgba(0, 0, 0, 0.1);
transform: rotate(90deg);
}
.page-dashboard .alert-banner-close i {
font-size: 18px;
color: #666;
}
@keyframes slideDownDash {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeOutDash {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* Signal Strength Indicator - Compact Design */
.page-dashboard .signal-strength-compact {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: 10px;
margin-bottom: 16px;
transition: all 0.3s ease;
}
/* Active Signal (User has paid) */
.page-dashboard .signal-active {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}
/* Inactive Signal (No plan) */
.page-dashboard .signal-inactive {
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
border: 1.5px dashed #9ca3af;
box-shadow: none;
}
.page-dashboard .signal-icon-compact {
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.page-dashboard .signal-active .signal-icon-compact {
background: rgba(255, 255, 255, 0.25);
}
.page-dashboard .signal-inactive .signal-icon-compact {
background: rgba(156, 163, 175, 0.2);
}
.page-dashboard .signal-icon-compact i {
font-size: 20px;
}
.page-dashboard .signal-active .signal-icon-compact i {
color: white;
}
.page-dashboard .signal-inactive .signal-icon-compact i {
color: #6b7280;
}
.page-dashboard .signal-info-compact {
flex: 1;
min-width: 0;
}
.page-dashboard .signal-label-compact {
font-size: 11px;
font-weight: 500;
margin-bottom: 2px;
opacity: 0.9;
}
.page-dashboard .signal-active .signal-label-compact {
color: rgba(255, 255, 255, 0.95);
}
.page-dashboard .signal-inactive .signal-label-compact {
color: #6b7280;
}
.page-dashboard .signal-value-compact {
font-size: 16px;
font-weight: 700;
line-height: 1;
}
.page-dashboard .signal-active .signal-value-compact {
color: white;
}
.page-dashboard .signal-inactive .signal-value-compact {
color: #4b5563;
}
.page-dashboard .signal-action-compact {
flex-shrink: 0;
}
.page-dashboard .signal-btn-compact {
background: var(--primary);
color: white;
border: none;
border-radius: 6px;
padding: 6px 14px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.page-dashboard .signal-btn-compact:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.page-dashboard .signal-btn-compact i {
font-size: 16px;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.page-dashboard .signal-strength-compact {
padding: 10px 14px;
gap: 10px;
margin-bottom: 12px;
}
.page-dashboard .signal-icon-compact {
width: 34px;
height: 34px;
}
.page-dashboard .signal-icon-compact i {
font-size: 18px;
}
.page-dashboard .signal-label-compact {
font-size: 10px;
}
.page-dashboard .signal-value-compact {
font-size: 14px;
}
.page-dashboard .signal-btn-compact {
padding: 5px 12px;
font-size: 11px;
}
.page-dashboard .signal-btn-compact i {
font-size: 14px;
}
.page-dashboard .alert-banner-content {
flex-wrap: wrap;
}
.page-dashboard .alert-banner-action {
order: 3;
width: 100%;
text-align: center;
margin-top: 12px;
}
.page-dashboard .alert-banner-close {
position: absolute;
top: -8px;
right: -8px;
}
}
/* Wallet Swiper Container */
.page-dashboard .wallet-swiper-container {
position: relative;
margin-bottom: 20px;
user-select: none;
}
.page-dashboard .wallet-swiper {
overflow: hidden;
border-radius: 16px;
touch-action: pan-y;
cursor: grab;
}
.page-dashboard .wallet-swiper:active {
cursor: grabbing;
}
.page-dashboard .swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
box-sizing: content-box;
}
.page-dashboard .swiper-pagination {
position: relative;
text-align: center;
margin-top: 12px;
transition: 0.3s opacity;
}
.page-dashboard .swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 50%;
background: #d1d5db;
opacity: 0.5;
margin: 0 4px;
cursor: pointer;
transition: all 0.3s;
}
.page-dashboard .swiper-pagination-bullet-active {
opacity: 1;
background: #6366F1;
width: 24px;
border-radius: 4px;
}
.page-dashboard .wallet-slide {
border-radius: 16px;
padding: 24px 20px;
color: white;
position: relative;
overflow: hidden;
min-height: 160px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.page-dashboard .wallet-slide.trading {
background-image: linear-gradient(rgba(102, 126, 234, 0.85), rgba(118, 75, 162, 0.85)), url('images/wallet-bg/trading-wallet.jpg');
}
.page-dashboard .wallet-slide.holding {
background-image: linear-gradient(rgba(16, 185, 129, 0.85), rgba(5, 150, 105, 0.85)), url('images/wallet-bg/holding-wallet.jpg');
}
.page-dashboard .wallet-slide::before {
content: '';
position: absolute;
top: -30%;
right: -15%;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
backdrop-filter: blur(2px);
}
.page-dashboard .wallet-content {
position: relative;
z-index: 2;
}
.page-dashboard .wallet-header-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 20px;
}
.page-dashboard .wallet-title-section {
display: flex;
flex-direction: column;
gap: 4px;
}
.page-dashboard .wallet-type {
font-size: 13px;
font-weight: 500;
opacity: 0.8;
text-transform: uppercase;
letter-spacing: 1px;
}
.page-dashboard .wallet-name {
font-size: 18px;
font-weight: 700;
}
.page-dashboard .balance-toggle-group {
background: rgba(255, 255, 255, 0.15);
border-radius: 20px;
padding: 4px;
display: inline-flex;
gap: 4px;
}
.page-dashboard .balance-toggle-btn {
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.7);
padding: 6px 14px;
border-radius: 16px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
white-space: nowrap;
position: relative;
z-index: 10;
touch-action: manipulation;
}
.page-dashboard .balance-toggle-btn:hover {
background: rgba(255, 255, 255, 0.25);
}
.page-dashboard .balance-toggle-btn.active {
background: var(--card);
color: #6366F1;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.page-dashboard .balance-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.page-dashboard .balance-number {
font-size: 36px;
font-weight: 800;
line-height: 1;
letter-spacing: -1px;
}
.page-dashboard .visibility-toggle-btn {
background: rgba(255, 255, 255, 0.2);
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
position: relative;
z-index: 10;
flex-shrink: 0;
touch-action: manipulation;
}
.page-dashboard .visibility-toggle-btn:hover {
background: rgba(255, 255, 255, 0.35);
}
.page-dashboard .visibility-toggle-btn i {
font-size: 18px;
pointer-events: none;
}
.page-dashboard .btc-equiv {
font-size: 14px;
opacity: 0.85;
margin-bottom: 20px;
}
/* Swipe Hint Indicator */
.page-dashboard .swipe-hint {
text-align: center;
margin-top: 8px;
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
animation: swipeHintPulse 2s infinite;
}
.page-dashboard .swipe-hint i {
font-size: 16px;
}
@keyframes swipeHintPulse {
0%, 100% {
opacity: 0.6;
}
50% {
opacity: 1;
}
}
/* Hide swipe hint after first interaction */
.page-dashboard .wallet-swiper.swiped .swipe-hint {
display: none;
}
.page-dashboard .action-buttons-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
padding: 0 8px;
}
.page-dashboard .action-button {
padding: 16px 8px;
border: none;
background: transparent;
font-weight: 500;
font-size: 13px;
cursor: pointer;
transition: all 0.3s;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
color: var(--text-primary, #2c3e50);
}
.page-dashboard .action-button:hover .action-icon {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
}
.page-dashboard .action-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
transition: all 0.3s;
}
.page-dashboard .action-icon i {
font-size: 24px;
color: white;
}
.page-dashboard .action-button span {
font-size: 12px;
color: var(--text-primary, #2c3e50);
}
/* Dark theme support */
.page-dashboard [data-theme-version="dark"] .action-button span {
color: #fff;
}
.page-dashboard [data-theme-version="dark"] .action-button:hover {
border-color: #6366F1;
background: #252e48;
}
/* P&L Card - Compact */
.page-dashboard .pnl-card-24h {
background: var(--card);
border-radius: 16px;
padding: 20px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
margin-bottom: 20px;
}
.page-dashboard .pnl-header-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.page-dashboard .pnl-title-text {
font-size: 15px;
font-weight: 700;
color: #2c3e50;
}
.page-dashboard .pnl-period-badge {
background: #f8f9fa;
padding: 4px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
color: #6c757d;
}
.page-dashboard .pnl-amount-display {
font-size: 28px;
font-weight: 800;
margin-bottom: 6px;
letter-spacing: -0.5px;
}
.page-dashboard .pnl-amount-display.profit {
color: #10b981;
}
.page-dashboard .pnl-amount-display.loss {
color: #ef4444;
}
.page-dashboard .pnl-change-row {
font-size: 13px;
font-weight: 600;
display: flex;
align-items: center;
gap: 4px;
}
.page-dashboard .pnl-change-row i {
font-size: 16px;
}
.page-dashboard .pnl-change-row.profit {
color: #10b981;
}
.page-dashboard .pnl-change-row.loss {
color: #ef4444;
}
/* Quick Stats - Compact Grid */
.page-dashboard .quick-stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 20px;
}
.page-dashboard .stat-box {
background: var(--card);
border-radius: 14px;
padding: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
transition: all 0.3s;
}
.page-dashboard .stat-box:hover {
transform: translateY(-6px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.page-dashboard .stat-icon-circle {
width: 56px;
height: 56px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: 16px;
}
.page-dashboard .stat-label-text {
font-size: 13px;
color: #6c757d;
font-weight: 500;
margin-bottom: 10px;
}
.page-dashboard .stat-value-number {
font-size: 28px;
font-weight: 700;
color: #2c3e50;
}
/* Swiper Pagination */
.page-dashboard .swiper-pagination {
position: relative;
margin-top: 12px;
text-align: center;
}
.page-dashboard .swiper-pagination-bullet {
width: 8px;
height: 8px;
background: #d1d5db;
opacity: 1;
margin: 0 4px;
}
.page-dashboard .swiper-pagination-bullet-active {
background: #6366F1;
width: 24px;
border-radius: 4px;
}
/* Copy Traders Button */
.page-dashboard .copy-traders-btn {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
color: white;
border: none;
padding: 14px 28px;
border-radius: 12px;
font-weight: 600;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.page-dashboard .copy-traders-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.page-dashboard .copy-traders-btn i {
font-size: 20px;
}
/* Trade Cards */
.page-dashboard .trade-card {
background: #fafbfc;
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 10px;
border: 1px solid var(--border);
transition: all 0.3s;
position: relative;
overflow: hidden;
}
.page-dashboard .trade-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: #6366F1;
transition: all 0.3s;
}
.page-dashboard .trade-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
transform: translateY(-1px);
border-color: #dce1e8;
}
.page-dashboard .trade-card.profit::before {
background: linear-gradient(180deg, #10b981 0%, #059669 100%);
}
.page-dashboard .trade-card.loss::before {
background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
}
.page-dashboard .trade-header {
display: flex;
align-items: center;
margin-bottom: 8px;
width: 100%;
}
.page-dashboard .trade-pair {
font-size: 14px;
font-weight: 700;
color: #1e293b;
display: flex;
align-items: center;
gap: 6px;
}
.page-dashboard .trade-status {
padding: 3px 10px;
border-radius: 12px;
font-size: 10px;
font-weight: 600;
background: #e2e8f0;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.3px;
margin-left: auto;
margin-right: -10px;
}
.page-dashboard .trade-status.active {
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
color: #16a34a;
animation: pulseDash 2s infinite;
}
@keyframes pulseDash {
0%, 100% { opacity: 1; }
50% { opacity: 0.85; }
}
.page-dashboard .trade-info {
display: flex;
justify-content: space-between;
font-size: 12px;
color: #64748b;
margin-bottom: 5px;
line-height: 1.3;
}
.page-dashboard .trade-info span {
font-weight: 500;
}
.page-dashboard .trade-pnl {
font-size: 14px;
font-weight: 800;
margin-top: 6px;
padding-top: 8px;
border-top: 1px solid #e8eaed;
display: flex;
align-items: center;
gap: 4px;
}
.page-dashboard .trade-pnl.profit {
color: #10b981;
}
.page-dashboard .trade-pnl.loss {
color: #ef4444;
}
/* Dark theme support for trade cards */
.page-dashboard [data-theme-version="dark"] .trade-card {
background: #1a1f37;
border-color: #2d3855;
}
.page-dashboard [data-theme-version="dark"] .trade-card:hover {
border-color: #3d4562;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.page-dashboard [data-theme-version="dark"] .trade-pair {
color: #e2e8f0;
}
.page-dashboard [data-theme-version="dark"] .trade-status {
background: #252e48;
color: #94a3b8;
}
.page-dashboard [data-theme-version="dark"] .trade-info {
color: #94a3b8;
}
.page-dashboard [data-theme-version="dark"] .trade-pnl {
border-top-color: #2d3855;
}
.page-dashboard .view-all-link {
color: #6366F1;
font-weight: 600;
font-size: 13px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
transition: all 0.3s;
}
.page-dashboard .view-all-link:hover {
gap: 8px;
color: #4F46E5;
}
.page-dashboard .empty-state {
text-align: center;
padding: 32px 16px;
color: #9ca3af;
}
.page-dashboard .empty-state i {
font-size: 48px;
margin-bottom: 12px;
opacity: 0.5;
}
/* Trade Tabs Styling - Modern Pill Design */
.page-dashboard .trade-tabs {
border: none;
background: #f3f4f6;
border-radius: 12px;
padding: 4px;
display: flex;
justify-content: space-between;
gap: 4px;
margin-bottom: 0;
}
.page-dashboard .trade-tabs .nav-item {
flex: 0 0 auto;
}
.page-dashboard .trade-tabs .nav-item:first-child {
margin-right: auto;
}
.page-dashboard .trade-tabs .nav-link {
border: none;
background: transparent;
color: #6c757d;
font-weight: 600;
font-size: 13px;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all 0.3s;
border-radius: 8px;
position: relative;
white-space: nowrap;
}
.page-dashboard .trade-tabs .nav-link i {
font-size: 18px;
}
.page-dashboard .trade-tabs .nav-link:hover {
color: #6366F1;
background: rgba(102, 126, 234, 0.08);
}
.page-dashboard .trade-tabs .nav-link.active {
background: var(--card);
color: #6366F1;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* Dark theme support for tabs */
.page-dashboard [data-theme-version="dark"] .trade-tabs {
background: #1a1f37;
}
.page-dashboard [data-theme-version="dark"] .trade-tabs .nav-link {
color: #a0aec0;
}
.page-dashboard [data-theme-version="dark"] .trade-tabs .nav-link:hover {
color: #6366F1;
background: rgba(102, 126, 234, 0.1);
}
.page-dashboard [data-theme-version="dark"] .trade-tabs .nav-link.active {
background: #252e48;
color: #6366F1;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* Mobile Responsive */
@media (max-width: 768px) {
.page-dashboard .wallet-slide {
padding: 20px 16px;
min-height: 180px;
}
.page-dashboard .wallet-name {
font-size: 16px;
}
.page-dashboard .wallet-type {
font-size: 11px;
}
.page-dashboard .balance-toggle-btn {
padding: 5px 10px;
font-size: 11px;
}
.page-dashboard .balance-number {
font-size: 28px;
}
.page-dashboard .visibility-toggle-btn {
width: 32px;
height: 32px;
}
.page-dashboard .visibility-toggle-btn i {
font-size: 16px;
}
.page-dashboard .btc-equiv {
font-size: 13px;
margin-bottom: 16px;
}
.page-dashboard .action-button {
padding: 12px 16px;
font-size: 13px;
}
.page-dashboard .action-button i {
font-size: 18px;
}
.page-dashboard .action-buttons-row {
gap: 10px;
}
.page-dashboard .pnl-card-24h {
padding: 16px;
}
.page-dashboard .pnl-title-text {
font-size: 14px;
}
.page-dashboard .pnl-period-badge {
padding: 3px 8px;
font-size: 10px;
}
.page-dashboard .pnl-amount-display {
font-size: 24px;
}
.page-dashboard .pnl-change-row {
font-size: 12px;
}
.page-dashboard .stat-box {
padding: 14px;
}
.page-dashboard .stat-icon-circle {
width: 48px;
height: 48px;
font-size: 20px;
margin-bottom: 12px;
}
.page-dashboard .stat-label-text {
font-size: 12px;
margin-bottom: 8px;
}
.page-dashboard .stat-value-number {
font-size: 22px;
}
}
@media (max-width: 480px) {
.page-dashboard .balance-number {
font-size: 24px;
}
.page-dashboard .action-buttons-row {
gap: 12px;
padding: 0 4px;
}
.page-dashboard .action-button {
padding: 12px 4px;
gap: 8px;
}
.page-dashboard .action-icon {
width: 48px;
height: 48px;
}
.page-dashboard .action-icon i {
font-size: 20px;
}
.page-dashboard .action-button span {
font-size: 11px;
}
}
/* Transfer Modal Styles */
.page-dashboard .transfer-modal .modal-content {
border-radius: 16px;
border: none;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
.page-dashboard .transfer-modal .modal-title {
font-size: 16px;
color: #1a1a1a;
}
.page-dashboard .transfer-label {
display: block;
font-size: 11px;
color: #6c757d;
margin-bottom: 6px;
font-weight: 500;
}
.page-dashboard .transfer-section {
position: relative;
}
.page-dashboard .transfer-display-wrapper {
position: relative;
background: #f8f9fa;
border-radius: 10px;
padding: 12px 16px;
transition: all 0.3s;
}
.page-dashboard .transfer-wallet-name {
font-size: 15px;
font-weight: 600;
color: #1a1a1a;
}
.page-dashboard .swap-button {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid #e9ecef;
background: white;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.page-dashboard .swap-button:hover {
background: #6366F1;
border-color: #6366F1;
transform: rotate(180deg);
}
.page-dashboard .swap-button:hover i {
color: white;
}
.page-dashboard .swap-button i {
font-size: 20px;
color: #6c757d;
transition: all 0.3s;
}
.page-dashboard .coin-select-wrapper {
background: #f8f9fa;
border-radius: 10px;
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: all 0.3s;
}
.page-dashboard .coin-select-wrapper:hover {
background: #e9ecef;
}
.page-dashboard .coin-display {
display: flex;
align-items: center;
gap: 10px;
}
.page-dashboard .coin-symbol {
width: 30px;
height: 30px;
border-radius: 50%;
background: #6366F1;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
}
.page-dashboard .coin-name {
font-size: 15px;
font-weight: 600;
color: #1a1a1a;
}
.page-dashboard .coin-select-wrapper i {
color: #6c757d;
font-size: 20px;
}
.page-dashboard .amount-input-wrapper {
background: #f8f9fa;
border-radius: 10px;
padding: 12px 16px;
display: flex;
align-items: center;
gap: 10px;
}
.page-dashboard .amount-input {
flex: 1;
border: none;
background: transparent;
font-size: 14px;
color: #1a1a1a;
outline: none;
}
.page-dashboard .amount-input::placeholder {
color: #6c757d;
}
.page-dashboard .max-button {
background: #6366F1;
color: white;
border: none;
border-radius: 5px;
padding: 5px 12px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.page-dashboard .max-button:hover {
background: #5568d3;
}
.page-dashboard .currency-label {
font-size: 14px;
font-weight: 600;
color: #1a1a1a;
}
.page-dashboard .available-balance {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
}
.page-dashboard .available-label {
font-size: 12px;
color: #6c757d;
}
.page-dashboard .available-amount {
font-size: 13px;
font-weight: 600;
color: #1a1a1a;
display: flex;
align-items: center;
gap: 4px;
}
.page-dashboard .available-info {
font-size: 16px;
color: #6c757d;
cursor: pointer;
}
.page-dashboard .btn-transfer {
background: var(--primary);
color: white;
border: none;
border-radius: 10px;
padding: 12px 20px;
font-size: 14px;
font-weight: 600;
transition: all 0.3s;
}
.page-dashboard .btn-transfer:hover {
background: var(--primary-hover);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
color: white;
}
/* Transfer Success Alert */
.page-dashboard .transfer-success-alert {
position: fixed;
top: 80px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
display: flex;
align-items: center;
background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
color: white;
border: none;
border-radius: 8px;
padding: 10px 16px;
font-size: 13px;
font-weight: 500;
box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
animation: slideDown 0.3s ease-out;
}
.page-dashboard .transfer-success-alert i {
font-size: 18px;
}
@keyframes slideDownDash2 {
from {
opacity: 0;
transform: translateX(-50%) translateY(-20px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
@keyframes fadeOutDash2 {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* Date Range Selector Buttons */
.page-dashboard .date-range-selector {
display: flex;
gap: 0;
background: #f3f4f6;
padding: 4px;
border-radius: 8px;
}
.page-dashboard .date-range-btn {
background: transparent;
border: none;
color: #6c757d;
padding: 6px 14px;
font-size: 12px;
font-weight: 600;
border-radius: 6px;
transition: all 0.3s;
cursor: pointer;
}
.page-dashboard .date-range-btn:hover {
background: rgba(102, 126, 234, 0.1);
color: #6366F1;
}
.page-dashboard .date-range-btn.active {
background: var(--card);
color: #6366F1;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
@media (max-width: 768px) {
.page-dashboard .date-range-selector {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
.page-dashboard .date-range-selector::-webkit-scrollbar {
display: none;
}
.page-dashboard .date-range-btn {
padding: 6px 12px;
font-size: 11px;
white-space: nowrap;
}
}
/* ==========================================
profile.html - Body Class: .page-profile
========================================== */
/* Profile Header Card */
.page-profile .profile-header-card {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
border-radius: 16px;
padding: 40px;
margin-bottom: 30px;
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
position: relative;
overflow: hidden;
}
/* Decorative Background Circles */
.page-profile .profile-header-card::before {
content: '';
position: absolute;
top: -80px;
right: -80px;
width: 250px;
height: 250px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
z-index: 0;
}
.page-profile .profile-header-card::after {
content: '';
position: absolute;
bottom: -60px;
left: -60px;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
z-index: 0;
}
.page-profile .profile-header-card > * {
position: relative;
z-index: 1;
}
.page-profile .profile-avatar-wrapper {
position: relative;
display: inline-block;
}
.page-profile .profile-avatar {
width: 120px;
height: 120px;
border-radius: 50%;
border: 4px solid white;
object-fit: cover;
display: block;
}
.page-profile .profile-avatar-badge {
position: absolute;
bottom: 0;
right: 0;
background: #10b981;
width: 32px;
height: 32px;
border-radius: 50%;
border: 3px solid white;
display: flex;
align-items: center;
justify-content: center;
}
.page-profile .profile-avatar-badge i {
font-size: 18px;
color: white;
}
.page-profile .profile-name {
color: white;
font-size: 32px;
font-weight: 700;
margin-bottom: 5px;
}
.page-profile .profile-username {
color: rgba(255, 255, 255, 0.9);
font-size: 18px;
margin-bottom: 12px;
}
.page-profile .profile-member-since {
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
display: flex;
align-items: center;
gap: 6px;
}
.page-profile .profile-member-since i {
font-size: 16px;
}
.page-profile .profile-stats {
display: flex;
gap: 40px;
margin-top: 25px;
padding-top: 25px;
border-top: 2px solid rgba(255, 255, 255, 0.2);
}
.page-profile .profile-stat-item {
text-align: center;
}
.page-profile .profile-stat-value {
color: white;
font-size: 24px;
font-weight: 700;
display: block;
}
.page-profile .profile-stat-label {
color: rgba(255, 255, 255, 0.8);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Edit Profile Button */
.page-profile .btn-edit-profile {
background: rgba(255, 255, 255, 0.15);
border: 2px solid rgba(255, 255, 255, 0.3);
color: white;
padding: 10px 24px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.page-profile .btn-edit-profile:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.5);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.page-profile .btn-edit-profile i {
font-size: 18px;
}
/* Edit Profile Modal Styles */
.page-profile .modal-edit-profile .modal-content {
border-radius: 16px;
border: none;
}
.page-profile .modal-edit-profile .modal-header {
padding: 24px 30px;
border-bottom: 2px solid #f3f4f6;
}
.page-profile .modal-edit-profile .modal-title {
font-size: 22px;
font-weight: 700;
color: #1a1a1a;
display: flex;
align-items: center;
gap: 10px;
}
.page-profile .modal-edit-profile .modal-body {
padding: 30px;
}
.page-profile .form-group-modal {
margin-bottom: 24px;
}
.page-profile .form-label-modal {
font-size: 14px;
font-weight: 600;
color: #374151;
margin-bottom: 8px;
display: block;
}
.page-profile .form-input-modal {
width: 100%;
height: 50px;
padding: 0 16px;
font-size: 15px;
color: #1a1a1a;
background: white;
border: 2px solid var(--border);
border-radius: 10px;
transition: all 0.3s ease;
}
.page-profile .form-input-modal:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}
.page-profile .upload-photo-section {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
background: #f9fafb;
border-radius: 12px;
}
.page-profile .upload-photo-preview {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #e5e7eb;
}
.page-profile .btn-upload {
background: white;
color: var(--primary);
border: 2px solid var(--primary);
padding: 10px 20px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.page-profile .btn-upload:hover {
background: var(--primary);
color: white;
}
.page-profile .modal-edit-profile .modal-footer {
padding: 20px 30px;
border-top: 2px solid #f3f4f6;
}
.page-profile .btn-save-modal {
background: var(--primary);
color: white;
border: none;
padding: 12px 32px;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.page-profile .btn-save-modal:hover {
background: var(--primary-hover);
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}
/* Info Card Styling */
.page-profile .info-card {
background: white;
border: 2px solid var(--border);
border-radius: 16px;
padding: 30px;
margin-bottom: 24px;
}
.page-profile .info-card-title {
font-size: 20px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.page-profile .info-card-title i {
color: var(--primary);
font-size: 24px;
}
.page-profile .info-row {
display: flex;
justify-content: space-between;
padding: 15px 0;
border-bottom: 1px solid #f3f4f6;
}
.page-profile .info-row:last-child {
border-bottom: none;
}
.page-profile .info-label {
color: #6b7280;
font-size: 15px;
font-weight: 500;
}
.page-profile .info-value {
color: #1a1a1a;
font-size: 15px;
font-weight: 600;
text-align: right;
}
/* Badge Styling */
.page-profile .verification-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
}
.page-profile .verification-badge.verified {
background: #dcfce7;
color: #16a34a;
}
.page-profile .verification-badge.unverified {
background: #fee2e2;
color: #dc2626;
}
.page-profile .verification-badge.pending {
background: #fef3c7;
color: #d97706;
}
.page-profile .verification-badge i {
font-size: 16px;
}
/* Account Type Badge */
.page-profile .account-type-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
color: white;
}
.page-profile .account-type-badge i {
font-size: 18px;
}
/* Action Button */
.page-profile .btn-action {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
border: 2px solid var(--border);
background: white;
color: var(--primary);
transition: all 0.3s ease;
}
.page-profile .btn-action:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
}
.page-profile .btn-action i {
font-size: 18px;
}
/* Trading Activity Card */
.page-profile .activity-item {
display: flex;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid #f3f4f6;
}
.page-profile .activity-item:last-child {
border-bottom: none;
}
.page-profile .activity-icon {
width: 45px;
height: 45px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
}
.page-profile .activity-icon.success {
background: #dcfce7;
}
.page-profile .activity-icon.success i {
color: #16a34a;
font-size: 22px;
}
.page-profile .activity-icon.danger {
background: #fee2e2;
}
.page-profile .activity-icon.danger i {
color: #dc2626;
font-size: 22px;
}
.page-profile .activity-icon.info {
background: #dbeafe;
}
.page-profile .activity-icon.info i {
color: var(--primary);
font-size: 22px;
}
.page-profile .activity-content {
flex: 1;
}
.page-profile .activity-title {
font-size: 15px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 3px;
}
.page-profile .activity-time {
font-size: 13px;
color: #6b7280;
}
.page-profile .activity-amount {
font-size: 16px;
font-weight: 700;
text-align: right;
}
.page-profile .activity-amount.positive {
color: #16a34a;
}
.page-profile .activity-amount.negative {
color: #dc2626;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.page-profile .profile-header-card {
padding: 30px 20px;
}
.page-profile .profile-avatar {
width: 90px;
height: 90px;
}
.page-profile .profile-name {
font-size: 26px;
}
.page-profile .btn-edit-profile {
margin-top: 20px;
width: 100%;
justify-content: center;
}
.page-profile .profile-stats {
gap: 20px;
flex-wrap: wrap;
}
.page-profile .profile-stat-item {
flex: 1;
min-width: 100px;
}
.page-profile .profile-stat-value {
font-size: 20px;
}
.page-profile .info-card {
padding: 20px;
}
.page-profile .info-row {
flex-direction: column;
gap: 8px;
}
.page-profile .info-value {
text-align: left;
}
}
@media (max-width: 991px) {
.page-profile .btn-edit-profile {
margin-top: 20px;
}
}
/* ==========================================
settings.html - Body Class: .page-settings
========================================== */
/* Settings Cards */
.page-settings .settings-card {
background: white;
border: 2px solid var(--border);
border-radius: 16px;
padding: 30px;
margin-bottom: 24px;
}
.page-settings .settings-card-title {
font-size: 20px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 10px;
}
.page-settings .settings-card-title i {
color: var(--primary);
font-size: 26px;
}
.page-settings .settings-card-subtitle {
font-size: 14px;
color: #6b7280;
margin-bottom: 25px;
}
.page-settings .settings-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 0;
border-bottom: 1px solid #f3f4f6;
}
.page-settings .settings-row:last-child {
border-bottom: none;
}
.page-settings .settings-label-group {
flex: 1;
}
.page-settings .settings-label {
font-size: 15px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 4px;
display: block;
}
.page-settings .settings-description {
font-size: 13px;
color: #6b7280;
}
/* Toggle Switch */
.page-settings .toggle-switch {
position: relative;
width: 52px;
height: 28px;
}
.page-settings .toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.page-settings .toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #d1d5db;
transition: 0.3s;
border-radius: 28px;
}
.page-settings .toggle-slider:before {
position: absolute;
content: "";
height: 22px;
width: 22px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
}
.page-settings .toggle-switch input:checked + .toggle-slider {
background: var(--primary);
}
.page-settings .toggle-switch input:checked + .toggle-slider:before {
transform: translateX(24px);
}
/* Status Badge */
.page-settings .status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
}
.page-settings .status-badge.active {
background: #dcfce7;
color: #16a34a;
}
.page-settings .status-badge.inactive {
background: #fee2e2;
color: #dc2626;
}
.page-settings .status-badge i {
font-size: 16px;
}
/* Select Input */
.page-settings .settings-select {
width: 220px;
height: 42px;
padding: 0 38px 0 14px;
font-size: 14px;
font-weight: 500;
color: #1a1a1a;
background: #ffffff;
border: 2px solid var(--border);
border-radius: 10px;
transition: all 0.3s ease;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
}
.page-settings .settings-select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}
.page-settings .settings-select:hover {
border-color: var(--primary);
}
/* Button */
.page-settings .btn-settings {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
border: 2px solid var(--border);
background: white;
color: var(--primary);
transition: all 0.3s ease;
cursor: pointer;
}
.page-settings .btn-settings:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
}
.page-settings .btn-settings i {
font-size: 18px;
}
.page-settings .btn-settings-danger {
color: #dc2626;
border-color: #fee2e2;
}
.page-settings .btn-settings-danger:hover {
background: #dc2626;
color: white;
border-color: #dc2626;
}
/* Save Button */
.page-settings .btn-save {
background: var(--primary);
color: white;
border: 2px solid var(--primary);
padding: 12px 28px;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.page-settings .btn-save:hover {
background: var(--primary-hover);
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}
.page-settings .btn-save i {
font-size: 20px;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.page-settings .settings-card {
padding: 20px;
}
.page-settings .settings-row {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.page-settings .settings-select {
width: 100%;
}
.page-settings .btn-settings {
width: 100%;
justify-content: center;
}
/* 2FA buttons on mobile */
.page-settings #twoFASection > div:last-child {
width: 100%;
flex-direction: column;
}
.page-settings #twoFASection .btn-settings {
width: 100%;
}
}
@media (max-width: 576px) {
.page-settings .settings-card-title {
font-size: 18px;
}
}
/* Modal Styles */
.page-settings .modal-custom {
display: none;
position: fixed;
z-index: 99999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
padding: 80px 20px 20px 20px;
}
.page-settings .modal-custom.show {
display: flex;
align-items: flex-start;
justify-content: center;
}
.page-settings .modal-content-custom {
background-color: white;
margin: 20px;
padding: 0;
border-radius: 16px;
width: 90%;
max-width: 500px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
animation: modalFadeInSettings 0.3s ease;
}
@keyframes modalFadeInSettings {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.page-settings .modal-header-custom {
padding: 24px 30px;
border-bottom: 2px solid #f3f4f6;
display: flex;
justify-content: space-between;
align-items: center;
}
.page-settings .modal-header-custom h3 {
font-size: 20px;
font-weight: 700;
color: #1a1a1a;
margin: 0;
display: flex;
align-items: center;
gap: 10px;
}
.page-settings .modal-header-custom h3 i {
color: var(--primary);
font-size: 26px;
}
.page-settings .modal-close {
background: none;
border: none;
font-size: 28px;
color: #6b7280;
cursor: pointer;
padding: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
transition: all 0.2s;
}
.page-settings .modal-close:hover {
background: #f3f4f6;
color: #1a1a1a;
}
.page-settings .modal-body-custom {
padding: 30px;
}
.page-settings .form-group-modal {
margin-bottom: 20px;
}
.page-settings .form-label-modal {
font-size: 14px;
font-weight: 600;
color: #374151;
margin-bottom: 8px;
display: block;
}
.page-settings .form-input-modal {
width: 100%;
height: 48px;
padding: 0 16px;
font-size: 15px;
color: #1a1a1a;
background: white;
border: 2px solid var(--border);
border-radius: 10px;
transition: all 0.3s ease;
}
.page-settings .form-input-modal:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}
.page-settings .info-box-modal {
background: #f0f9ff;
border: 2px solid #bfdbfe;
border-radius: 12px;
padding: 16px;
margin-bottom: 20px;
display: flex;
gap: 10px;
}
.page-settings .info-box-modal i {
color: var(--primary);
font-size: 20px;
margin-top: 2px;
}
.page-settings .info-box-modal p {
font-size: 13px;
color: #1e3a8a;
margin: 0;
line-height: 1.5;
}
.page-settings .modal-footer-custom {
padding: 20px 30px;
border-top: 2px solid #f3f4f6;
display: flex;
gap: 12px;
justify-content: flex-end;
}
.page-settings .btn-modal {
padding: 12px 24px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.page-settings .btn-modal-cancel {
background: #f3f4f6;
color: #6b7280;
}
.page-settings .btn-modal-cancel:hover {
background: #e5e7eb;
color: #1a1a1a;
}
.page-settings .btn-modal-primary {
background: var(--primary);
color: white;
}
.page-settings .btn-modal-primary:hover {
background: var(--primary-hover);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
/* Security Questions Styles */
.page-settings .security-question-item {
background: #f9fafb;
border: 2px solid var(--border);
border-radius: 12px;
padding: 16px;
margin-bottom: 12px;
}
.page-settings .security-question-item:last-child {
margin-bottom: 0;
}
.page-settings .security-question-label {
font-size: 13px;
font-weight: 600;
color: #6b7280;
margin-bottom: 6px;
display: block;
}
.page-settings .security-question-text {
font-size: 14px;
color: #1a1a1a;
font-weight: 500;
}
.page-settings .form-select-modal {
width: 100%;
height: 48px;
padding: 0 40px 0 16px;
font-size: 15px;
color: #1a1a1a;
background: white;
border: 2px solid var(--border);
border-radius: 10px;
transition: all 0.3s ease;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
}
.page-settings .form-select-modal:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}
/* ==========================================
change-password.html - Body Class: .page-changepwd
========================================== */
/* Change Password Page Styles */
.page-changepwd .password-container {
max-width: 700px;
margin: 0 auto;
}
.page-changepwd .password-header {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
border-radius: 16px;
padding: 40px;
margin-bottom: 30px;
color: white;
text-align: center;
position: relative;
overflow: hidden;
}
.page-changepwd .password-header::before {
content: '';
position: absolute;
top: -80px;
right: -80px;
width: 250px;
height: 250px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
}
.page-changepwd .password-header-content {
position: relative;
z-index: 1;
}
.page-changepwd .password-header h1 {
font-size: 32px;
font-weight: 700;
margin-bottom: 12px;
color: white;
}
.page-changepwd .password-header p {
font-size: 16px;
color: white;
margin-bottom: 0;
opacity: 0.95;
}
.page-changepwd .password-card {
background: white;
border-radius: 16px;
padding: 40px;
margin-bottom: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border: 2px solid var(--border);
}
.page-changepwd .form-group-password {
margin-bottom: 28px;
position: relative;
}
.page-changepwd .form-label-password {
font-size: 14px;
font-weight: 600;
color: #374151;
margin-bottom: 8px;
display: block;
}
.page-changepwd .password-input-wrapper {
position: relative;
}
.page-changepwd .form-input-password {
width: 100%;
height: 52px;
padding: 0 48px 0 16px;
font-size: 15px;
color: #1a1a1a;
background: white;
border: 2px solid var(--border);
border-radius: 10px;
transition: all 0.3s ease;
}
.page-changepwd .form-input-password:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}
.page-changepwd .password-toggle {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #6b7280;
cursor: pointer;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.page-changepwd .password-toggle:hover {
color: var(--primary);
}
.page-changepwd .password-toggle i {
font-size: 20px;
}
/* Password Strength Meter */
.page-changepwd .password-strength-container {
margin-top: 12px;
}
.page-changepwd .password-strength-bar {
width: 100%;
height: 8px;
background: #e5e7eb;
border-radius: 10px;
overflow: hidden;
margin-bottom: 8px;
}
.page-changepwd .password-strength-fill {
height: 100%;
width: 0%;
transition: all 0.3s ease;
border-radius: 10px;
}
.page-changepwd .password-strength-fill.weak {
width: 33%;
background: #ef4444;
}
.page-changepwd .password-strength-fill.medium {
width: 66%;
background: #f59e0b;
}
.page-changepwd .password-strength-fill.strong {
width: 100%;
background: #10b981;
}
.page-changepwd .password-strength-text {
font-size: 13px;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
}
.page-changepwd .password-strength-text.weak {
color: #ef4444;
}
.page-changepwd .password-strength-text.medium {
color: #f59e0b;
}
.page-changepwd .password-strength-text.strong {
color: #10b981;
}
.page-changepwd .password-strength-text i {
font-size: 16px;
}
/* Password Requirements */
.page-changepwd .password-requirements {
background: #f9fafb;
border: 2px solid var(--border);
border-radius: 12px;
padding: 20px;
margin-bottom: 28px;
}
.page-changepwd .password-requirements-title {
font-size: 14px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.page-changepwd .password-requirements-title i {
color: var(--primary);
font-size: 20px;
}
.page-changepwd .requirement-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: #6b7280;
margin-bottom: 8px;
transition: all 0.2s;
}
.page-changepwd .requirement-item:last-child {
margin-bottom: 0;
}
.page-changepwd .requirement-item i {
font-size: 18px;
color: #d1d5db;
}
.page-changepwd .requirement-item.met {
color: #10b981;
}
.page-changepwd .requirement-item.met i {
color: #10b981;
}
/* Info Box */
.page-changepwd .info-box-password {
background: #f0f9ff;
border: 2px solid #bfdbfe;
border-radius: 12px;
padding: 18px;
margin-bottom: 28px;
display: flex;
gap: 12px;
}
.page-changepwd .info-box-password i {
color: var(--primary);
font-size: 22px;
margin-top: 2px;
flex-shrink: 0;
}
.page-changepwd .info-box-password p {
font-size: 14px;
color: #1e3a8a;
margin: 0;
line-height: 1.6;
}
/* Warning Box */
.page-changepwd .warning-box-password {
background: #fef3c7;
border: 2px solid #fde68a;
border-radius: 12px;
padding: 18px;
margin-bottom: 28px;
display: flex;
gap: 12px;
}
.page-changepwd .warning-box-password i {
color: #d97706;
font-size: 22px;
margin-top: 2px;
flex-shrink: 0;
}
.page-changepwd .warning-box-password p {
font-size: 14px;
color: #78350f;
margin: 0;
line-height: 1.6;
}
/* Buttons */
.page-changepwd .btn-password {
background: var(--primary);
color: white;
border: none;
padding: 16px 40px;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 10px;
width: 100%;
justify-content: center;
}
.page-changepwd .btn-password:hover {
background: var(--primary-hover);
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}
.page-changepwd .btn-password:disabled {
background: #d1d5db;
cursor: not-allowed;
box-shadow: none;
}
.page-changepwd .btn-password i {
font-size: 22px;
}
.page-changepwd .btn-cancel {
background: #f3f4f6;
color: #6b7280;
border: 2px solid var(--border);
padding: 14px 30px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
width: 100%;
justify-content: center;
margin-top: 12px;
}
.page-changepwd .btn-cancel:hover {
background: #e5e7eb;
color: #1a1a1a;
}
/* Password History */
.page-changepwd .password-history {
background: white;
border: 2px solid var(--border);
border-radius: 16px;
padding: 30px;
margin-bottom: 30px;
}
.page-changepwd .password-history-title {
font-size: 18px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 10px;
}
.page-changepwd .password-history-title i {
color: var(--primary);
font-size: 24px;
}
.page-changepwd .password-history-subtitle {
font-size: 14px;
color: #6b7280;
margin-bottom: 20px;
}
.page-changepwd .history-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid #f3f4f6;
}
.page-changepwd .history-item:last-child {
border-bottom: none;
}
.page-changepwd .history-label {
font-size: 14px;
font-weight: 600;
color: #1a1a1a;
}
.page-changepwd .history-value {
font-size: 14px;
color: #6b7280;
}
@media (max-width: 768px) {
.page-changepwd .password-header {
padding: 30px 20px;
}
.page-changepwd .password-header h1 {
font-size: 26px;
}
.page-changepwd .password-card {
padding: 30px 20px;
}
.page-changepwd .password-history {
padding: 20px;
}
}
/* ==========================================
referrals.html - Body Class: .page-referrals
========================================== */
/* Referrals Page Styles */
.page-referrals .referral-header {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
border-radius: 16px;
padding: 40px;
margin-bottom: 30px;
color: white;
position: relative;
overflow: hidden;
}
.page-referrals .referral-header::before {
content: '';
position: absolute;
top: -80px;
right: -80px;
width: 250px;
height: 250px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
}
.page-referrals .referral-header-content {
position: relative;
z-index: 1;
}
.page-referrals .referral-header h1 {
font-size: 32px;
font-weight: 700;
margin-bottom: 12px;
color: white;
}
.page-referrals .referral-header p {
font-size: 16px;
color: white;
margin-bottom: 0;
opacity: 0.95;
}
/* Referral Link Card */
.page-referrals .referral-link-card {
background: var(--card);
border-radius: 16px;
padding: 40px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border: 2px solid var(--border);
margin-bottom: 30px;
}
.page-referrals .card-title {
font-size: 20px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 10px;
}
.page-referrals .card-title i {
color: var(--primary);
font-size: 24px;
}
.page-referrals .card-subtitle {
font-size: 14px;
color: #6b7280;
margin-bottom: 30px;
}
.page-referrals .referral-link-input-group {
display: flex;
gap: 12px;
margin-bottom: 25px;
}
.page-referrals .referral-link-input {
flex: 1;
height: 56px;
padding: 0 20px;
font-size: 16px;
font-family: 'Courier New', monospace;
color: #1a1a1a;
background: #f9fafb;
border: 2px solid var(--border);
border-radius: 12px;
font-weight: 600;
}
.page-referrals .btn-copy {
background: var(--primary);
color: white;
border: none;
padding: 0 32px;
height: 56px;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 10px;
white-space: nowrap;
}
.page-referrals .btn-copy:hover {
background: var(--primary-hover);
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}
.page-referrals .btn-copy i {
font-size: 20px;
}
.page-referrals .share-buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.page-referrals .btn-share {
padding: 14px 20px;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
border: 2px solid var(--border);
background: white;
color: #1a1a1a;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.page-referrals .btn-share:hover {
border-color: var(--primary);
background: #f0f9ff;
color: var(--primary);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}
.page-referrals .btn-share i {
font-size: 20px;
}
/* How It Works Section */
.page-referrals .how-it-works-card {
background: var(--card);
border-radius: 16px;
padding: 40px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border: 2px solid var(--border);
margin-bottom: 30px;
}
.page-referrals .steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
margin-top: 30px;
}
.page-referrals .step-item {
text-align: center;
padding: 30px 20px;
background: #f9fafb;
border-radius: 14px;
border: 2px solid var(--border);
transition: all 0.3s ease;
}
.page-referrals .step-item:hover {
border-color: var(--primary);
background: #f0f9ff;
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(99, 102, 241, 0.15);
}
.page-referrals .step-number {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
color: white;
font-size: 28px;
font-weight: 700;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.page-referrals .step-title {
font-size: 17px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 10px;
}
.page-referrals .step-description {
font-size: 14px;
color: #6b7280;
line-height: 1.7;
}
/* Info Box */
.page-referrals .info-box {
background: #f0f9ff;
border: 2px solid #bfdbfe;
border-radius: 14px;
padding: 24px;
display: flex;
gap: 15px;
margin-top: 30px;
}
.page-referrals .info-box i {
color: var(--primary);
font-size: 28px;
flex-shrink: 0;
margin-top: 2px;
}
.page-referrals .info-box-content h4 {
font-size: 16px;
font-weight: 700;
color: #1e3a8a;
margin-bottom: 10px;
}
.page-referrals .info-box-content p {
font-size: 14px;
color: #1e3a8a;
margin: 0;
line-height: 1.8;
}
/* Mobile Responsive */
@media (max-width: 992px) {
.page-referrals .steps-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.page-referrals .referral-header {
padding: 30px 20px;
}
.page-referrals .referral-header h1 {
font-size: 26px;
}
.referral-link-card,
.page-referrals .how-it-works-card {
padding: 30px 20px;
}
.page-referrals .referral-link-input-group {
flex-direction: column;
}
.page-referrals .btn-copy {
width: 100%;
justify-content: center;
}
.page-referrals .share-buttons {
grid-template-columns: repeat(2, 1fr);
}
}
/* ==========================================
badge-showcase.html - Body Class: .page-badgeshowcase
========================================== */
body.page-badgeshowcase {
background: #f5f7fa;
padding: 40px 20px;
}
.page-badgeshowcase .showcase-container {
max-width: 1200px;
margin: 0 auto;
}
.page-badgeshowcase .page-header {
text-align: center;
margin-bottom: 50px;
}
.page-badgeshowcase .page-header h1 {
font-size: 36px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 12px;
}
.page-badgeshowcase .page-header p {
font-size: 16px;
color: #6b7280;
}
/* Badge Tier Cards */
.page-badgeshowcase .tier-card {
background: white;
border-radius: 20px;
padding: 40px;
margin-bottom: 30px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.page-badgeshowcase .tier-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
/* Free Tier */
.page-badgeshowcase .tier-card.free {
border: 3px solid #e5e7eb;
}
.page-badgeshowcase .tier-card.free::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 300px;
height: 300px;
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
border-radius: 50%;
opacity: 0.3;
}
/* Standard Tier */
.page-badgeshowcase .tier-card.standard {
border: 3px solid #93c5fd;
background: linear-gradient(to bottom, white 0%, #f0f9ff 100%);
}
.page-badgeshowcase .tier-card.standard::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 300px;
height: 300px;
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
border-radius: 50%;
opacity: 0.1;
}
/* Premium Tier */
.page-badgeshowcase .tier-card.premium {
border: 3px solid #c4b5fd;
background: linear-gradient(to bottom, white 0%, #f5f3ff 100%);
}
.page-badgeshowcase .tier-card.premium::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 300px;
height: 300px;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
border-radius: 50%;
opacity: 0.15;
}
/* VIP Tier */
.page-badgeshowcase .tier-card.vip {
border: 3px solid #fbbf24;
background: linear-gradient(to bottom, white 0%, #fffbeb 100%);
}
.page-badgeshowcase .tier-card.vip::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 300px;
height: 300px;
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
border-radius: 50%;
opacity: 0.15;
}
.page-badgeshowcase .tier-content {
position: relative;
z-index: 1;
}
.page-badgeshowcase .tier-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
}
.page-badgeshowcase .tier-info h2 {
font-size: 32px;
font-weight: 700;
margin-bottom: 8px;
}
.page-badgeshowcase .tier-price {
font-size: 18px;
color: #6b7280;
font-weight: 600;
}
/* Account Type Badges - Different Styles */
.page-badgeshowcase .badge-demo {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 25px;
font-size: 15px;
font-weight: 600;
}
.page-badgeshowcase .badge-demo.free-badge {
background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
color: #4b5563;
}
.page-badgeshowcase .badge-demo.standard-badge {
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
color: white;
}
.page-badgeshowcase .badge-demo.premium-badge {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
color: white;
}
.page-badgeshowcase .badge-demo.vip-badge {
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
color: #78350f;
box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
}
.page-badgeshowcase .badge-demo i {
font-size: 20px;
}
.page-badgeshowcase .tier-features {
margin-top: 30px;
}
.page-badgeshowcase .tier-features h3 {
font-size: 18px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 20px;
}
.page-badgeshowcase .feature-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.page-badgeshowcase .feature-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
background: #f9fafb;
border-radius: 10px;
}
.page-badgeshowcase .feature-item i {
color: #10b981;
font-size: 20px;
}
.page-badgeshowcase .feature-item.disabled i {
color: #d1d5db;
}
.page-badgeshowcase .feature-text {
font-size: 14px;
color: #1a1a1a;
font-weight: 500;
}
.page-badgeshowcase .feature-item.disabled .feature-text {
color: #9ca3af;
}
/* Profile Card Demo */
.page-badgeshowcase .profile-demo {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
border-radius: 16px;
padding: 30px;
margin-top: 30px;
color: white;
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}
.page-badgeshowcase .profile-demo-content {
display: flex;
align-items: center;
gap: 20px;
}
.page-badgeshowcase .profile-demo-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
border: 3px solid white;
background: #e5e7eb;
}
.page-badgeshowcase .profile-demo-info h4 {
font-size: 24px;
font-weight: 700;
margin-bottom: 6px;
}
.page-badgeshowcase .profile-demo-username {
font-size: 16px;
color: white;
margin-bottom: 10px;
}
@media (max-width: 768px) {
.page-badgeshowcase .feature-grid {
grid-template-columns: 1fr;
}
.page-badgeshowcase .tier-header {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
}
/* ==========================================
copy-trading.html - Body Class: .page-copytrading
========================================== */
/* Page Styling */
.page-copytrading .page-container {
max-width: 1000px;
margin: 0 auto;
}
.page-copytrading .page-content {
background: white;
border-radius: 16px;
padding: 50px;
margin-bottom: 25px;
border: 2px solid var(--border);
}
.page-copytrading .page-header {
text-align: center;
margin-bottom: 40px;
padding-bottom: 30px;
border-bottom: 3px solid var(--primary);
}
.page-copytrading .page-header h1 {
font-size: 36px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 15px;
}
.page-copytrading .page-header .subtitle {
font-size: 16px;
color: #6b7280;
margin-bottom: 10px;
}
.page-copytrading .content-section {
margin-bottom: 35px;
}
.page-copytrading .content-section:last-child {
margin-bottom: 0;
}
.page-copytrading .section-title {
font-size: 22px;
font-weight: 700;
color: var(--primary);
margin-bottom: 15px;
}
.page-copytrading .section-content {
color: #4b5563;
font-size: 15px;
line-height: 1.9;
}
.page-copytrading .section-content p {
margin-bottom: 15px;
}
.page-copytrading .section-content ul,
.page-copytrading .section-content ol {
margin: 15px 0;
padding-left: 30px;
}
.page-copytrading .section-content li {
margin-bottom: 12px;
}
.page-copytrading .section-content strong {
color: #1a1a1a;
font-weight: 600;
}
@media (max-width: 768px) {
.page-copytrading .page-content {
padding: 30px 25px;
}
.page-copytrading .page-header h1 {
font-size: 28px;
}
.page-copytrading .section-title {
font-size: 19px;
}
}
/* ==========================================
copy-traders.html - Body Class: .page-copytraders
========================================== */
/* Filter Section */
.page-copytraders .filter-section {
background: var(--card);
border: 2px solid var(--border);
border-radius: 16px;
padding: 25px;
margin-bottom: 25px;
}
.page-copytraders .filter-title {
font-size: 16px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 20px;
}
.page-copytraders .filter-input {
width: 100%;
height: 48px;
padding: 0 20px;
font-size: 14px;
font-weight: 500;
color: #1a1a1a;
background: #ffffff;
border: 2px solid var(--border);
border-radius: 10px;
transition: all 0.3s ease;
font-family: inherit;
}
.page-copytraders .filter-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
.page-copytraders .filter-select {
width: 100%;
height: 48px;
padding: 0 40px 0 20px;
font-size: 14px;
font-weight: 500;
color: #1a1a1a;
background: #ffffff url('data:image/svg+xml;charset=UTF-8,') no-repeat right 15px center;
background-size: 12px 8px;
border: 2px solid var(--border);
border-radius: 10px;
transition: all 0.3s ease;
font-family: inherit;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.page-copytraders .filter-select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
/* Trader Card */
.page-copytraders .trader-card {
background: var(--card);
border: 2px solid var(--border);
border-radius: 16px;
padding: 18px;
transition: all 0.3s ease;
margin-bottom: 20px;
height: 100%;
}
.page-copytraders .trader-card:hover {
border-color: var(--primary);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
}
.page-copytraders .trader-card.copying {
border-color: #10b981;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(5, 150, 105, 0.05) 100%);
}
/* Trader Header */
.page-copytraders .trader-header {
display: flex;
align-items: center;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 2px solid #f3f4f6;
}
.page-copytraders .trader-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
margin-right: 12px;
border: 3px solid var(--primary);
}
.page-copytraders .trader-info h5 {
font-size: 16px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 4px;
}
.page-copytraders .trader-info h5 a:hover {
color: var(--primary) !important;
transition: color 0.3s ease;
}
.page-copytraders .trader-info p {
font-size: 12px;
color: #6b7280;
margin: 0;
}
.page-copytraders .verified-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: #dbeafe;
border-radius: 50%;
margin-left: auto;
}
.page-copytraders .verified-badge i {
font-size: 18px;
color: #1e40af;
}
.page-copytraders .verified-badge.blue {
background: #dbeafe;
}
.page-copytraders .verified-badge.blue i {
color: #1e40af;
}
.page-copytraders .verified-badge.gold {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}
.page-copytraders .verified-badge.gold i {
color: #d97706;
}
/* Stats List */
.page-copytraders .stats-list {
margin-bottom: 15px;
}
.page-copytraders .stat-item {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
font-size: 13px;
}
.page-copytraders .stat-item:last-child {
margin-bottom: 0;
}
.page-copytraders .stat-icon {
font-size: 18px;
flex-shrink: 0;
}
/* Minimum Balance */
.page-copytraders .min-balance {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: #fef3c7;
border-radius: 8px;
margin-bottom: 12px;
}
.page-copytraders .min-balance i {
font-size: 16px;
color: #92400e;
}
.page-copytraders .min-balance span {
font-size: 12px;
font-weight: 600;
color: #92400e;
}
.page-copytraders .stat-icon.trophy {
color: #f59e0b;
}
.page-copytraders .stat-icon.cross {
color: #ef4444;
}
.page-copytraders .stat-icon.chart {
color: #3b82f6;
}
.page-copytraders .stat-icon.money {
color: #10b981;
}
.page-copytraders .stat-text {
font-weight: 600;
color: #1a1a1a;
}
/* Risk Badge */
.page-copytraders .risk-badge {
display: inline-block;
padding: 6px 14px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
margin-bottom: 15px;
}
.page-copytraders .risk-badge.low {
background: #d1fae5;
color: #065f46;
}
.page-copytraders .risk-badge.medium {
background: #fef3c7;
color: #92400e;
}
.page-copytraders .risk-badge.high {
background: #fee2e2;
color: #991b1b;
}
/* Trading Pairs */
.page-copytraders .trading-pairs {
margin-bottom: 15px;
}
.page-copytraders .trading-pairs-label {
font-size: 13px;
color: #6b7280;
font-weight: 600;
margin-bottom: 8px;
display: block;
}
.page-copytraders .pair-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.page-copytraders .pair-badge {
display: inline-block;
padding: 4px 10px;
background: #f3f4f6;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
color: #4b5563;
}
/* Performance Chart Placeholder */
.page-copytraders .performance-chart {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border-radius: 10px;
padding: 15px;
margin-bottom: 20px;
text-align: center;
}
.page-copytraders .chart-placeholder {
font-size: 13px;
color: #6b7280;
margin-bottom: 8px;
}
.page-copytraders .chart-value {
font-size: 24px;
font-weight: 700;
color: var(--primary);
}
/* Copy Button */
.page-copytraders .copy-btn {
width: 100%;
height: 44px;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
color: white;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
cursor: pointer;
}
.page-copytraders .copy-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}
.page-copytraders .copy-btn i {
margin-right: 8px;
font-size: 18px;
}
.page-copytraders .copy-btn.already-copying {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
.page-copytraders .copy-btn.already-copying:hover {
box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}
/* Copiers Count */
.page-copytraders .copiers-count {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 12px;
color: #6b7280;
margin-top: 10px;
}
.page-copytraders .copiers-count i {
font-size: 14px;
color: var(--primary);
}
/* No Results */
.page-copytraders .no-results {
text-align: center;
padding: 60px 20px;
background: #ffffff;
border: 2px solid var(--border);
border-radius: 16px;
}
.page-copytraders .no-results i {
font-size: 64px;
color: #d1d5db;
margin-bottom: 15px;
}
.page-copytraders .no-results h5 {
font-size: 18px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
}
.page-copytraders .no-results p {
font-size: 14px;
color: #6b7280;
}
/* Row Spacing */
.page-copytraders .trader-row {
margin-bottom: 35px;
}
/* Copy Configuration Modal */
.page-copytraders .copy-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 9999;
align-items: center;
justify-content: center;
}
.page-copytraders .copy-modal.show {
display: flex;
}
.page-copytraders .modal-content-wrapper {
background: var(--card);
border-radius: 20px;
padding: 30px;
max-width: 500px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
}
.page-copytraders .modal-header-custom {
margin-bottom: 25px;
}
.page-copytraders .modal-header-custom h4 {
font-size: 22px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
}
.page-copytraders .modal-header-custom p {
font-size: 14px;
color: #6b7280;
margin: 0;
}
.page-copytraders .config-form .form-group {
margin-bottom: 20px;
}
.page-copytraders .config-form label {
display: block;
font-size: 14px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 8px;
}
.page-copytraders .config-form input {
width: 100%;
height: 48px;
padding: 0 15px;
border: 2px solid var(--border);
border-radius: 10px;
font-size: 14px;
transition: all 0.3s ease;
}
.page-copytraders .config-form input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
.page-copytraders .modal-buttons {
display: flex;
gap: 12px;
margin-top: 25px;
}
.page-copytraders .modal-buttons button {
flex: 1;
height: 48px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.page-copytraders .btn-cancel {
background: #f3f4f6;
color: #1a1a1a;
}
.page-copytraders .btn-cancel:hover {
background: #e5e7eb;
}
.page-copytraders .btn-confirm {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
color: white;
}
.page-copytraders .btn-confirm:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}
/* Percentage Slider */
.page-copytraders .percentage-slider-container {
margin-bottom: 15px;
}
.page-copytraders .percentage-display {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.page-copytraders .percentage-value {
font-size: 18px;
font-weight: 700;
color: var(--primary);
}
.page-copytraders .balance-info {
font-size: 12px;
color: #6b7280;
margin: 0;
}
.page-copytraders .slider-track {
position: relative;
width: 100%;
height: 8px;
background: #e5e7eb;
border-radius: 8px;
margin-bottom: 8px;
}
.page-copytraders .slider-fill {
position: absolute;
height: 100%;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
border-radius: 8px;
transition: width 0.2s ease;
}
.page-copytraders .percentage-input {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 8px;
background: transparent;
outline: none;
position: relative;
z-index: 2;
cursor: pointer;
}
.page-copytraders .percentage-input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: white;
border: 3px solid var(--primary);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transition: all 0.2s ease;
}
.page-copytraders .percentage-input::-webkit-slider-thumb:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.page-copytraders .percentage-input::-moz-range-thumb {
width: 20px;
height: 20px;
background: white;
border: 3px solid var(--primary);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transition: all 0.2s ease;
}
.page-copytraders .percentage-input::-moz-range-thumb:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.page-copytraders .slider-labels {
display: flex;
justify-content: space-between;
font-size: 12px;
color: #6b7280;
}
/* Request to Copy - Different Button Style */
.page-copytraders .copy-btn.request-mode {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.page-copytraders .copy-btn.request-mode:hover {
box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
}
/* Cancel Copying Button */
.page-copytraders .btn-cancel-copy {
width: 100%;
height: 44px;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: white;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
cursor: pointer;
margin-top: 10px;
}
.page-copytraders .btn-cancel-copy:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
}
.page-copytraders .btn-cancel-copy i {
margin-right: 8px;
font-size: 18px;
}
/* Approval Notice Box */
.page-copytraders .approval-notice {
background: #fef3c7;
padding: 15px;
border-radius: 10px;
margin-bottom: 20px;
border-left: 4px solid #f59e0b;
}
.page-copytraders .approval-notice-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.page-copytraders .approval-notice-icon {
color: #92400e;
font-size: 24px;
}
.page-copytraders .approval-notice-title {
margin: 0;
font-size: 16px;
font-weight: 700;
color: #92400e;
}
.page-copytraders .approval-notice-text {
margin: 0;
font-size: 13px;
color: #78350f;
line-height: 1.5;
}
/* Terms Checkbox */
.page-copytraders .terms-container {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 15px;
background: #f9fafb;
border-radius: 10px;
margin-top: 20px;
margin-bottom: 20px;
}
.page-copytraders .terms-checkbox {
width: 18px;
height: 18px;
cursor: pointer;
flex-shrink: 0;
margin-top: 2px;
}
.page-copytraders .terms-text {
font-size: 13px;
color: #4b5563;
line-height: 1.5;
}
.page-copytraders .terms-text a {
color: var(--primary);
text-decoration: none;
font-weight: 600;
}
.page-copytraders .terms-text a:hover {
text-decoration: underline;
}
/* Pagination Styling */
.page-copytraders .pagination {
display: flex;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
}
.page-copytraders .page-item {
list-style: none;
}
.page-copytraders .page-link {
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 16px;
background: white;
border: 2px solid var(--border);
border-radius: 10px;
font-size: 14px;
font-weight: 600;
color: #1a1a1a;
text-decoration: none;
transition: all 0.3s ease;
}
.page-copytraders .page-link:hover {
background: #f9fafb;
border-color: var(--primary);
color: var(--primary);
}
.page-copytraders .page-item.active .page-link {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
border-color: #6366F1;
color: white;
}
.page-copytraders .page-item.disabled .page-link {
background: #f3f4f6;
border-color: #e5e7eb;
color: #9ca3af;
cursor: not-allowed;
pointer-events: none;
}
/* Responsive */
@media (max-width: 768px) {
.page-copytraders .filter-section {
padding: 20px;
}
.page-copytraders .trader-card {
padding: 20px;
margin-bottom: 20px;
}
.page-copytraders .stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
/* Maintain row spacing on mobile */
.page-copytraders .trader-row {
margin-bottom: 0;
}
/* Add spacing to individual cards on mobile */
.page-copytraders .trader-row .col-xl-4 {
margin-bottom: 25px;
}
/* Pagination responsive */
.page-copytraders .pagination {
gap: 6px;
}
.page-copytraders .page-link {
min-width: 40px;
height: 40px;
padding: 0 12px;
font-size: 13px;
}
}
/* ==========================================
become-trader.html - Body Class: .page-becometrader
========================================== */
.page-becometrader .application-container {
max-width: 1200px;
margin: 0 auto;
}
.page-becometrader .application-header {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
border-radius: 16px;
padding: 40px;
color: white;
text-align: center;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.page-becometrader .application-header::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: pulseTrader 15s ease-in-out infinite;
}
@keyframes pulseTrader {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.1); opacity: 0.8; }
}
.page-becometrader .application-header h1 {
font-size: 36px;
font-weight: 700;
margin-bottom: 10px;
position: relative;
z-index: 1;
color: white;
}
.page-becometrader .application-header p {
font-size: 16px;
opacity: 0.95;
margin-bottom: 0;
position: relative;
z-index: 1;
color: white;
}
.page-becometrader .benefits-section {
background: white;
border-radius: 16px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.page-becometrader .benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 20px;
}
.page-becometrader .benefit-card {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
padding: 20px;
border-radius: 12px;
text-align: center;
transition: transform 0.3s ease;
}
.page-becometrader .benefit-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
}
.page-becometrader .benefit-card i {
font-size: 48px;
color: white;
margin-bottom: 15px;
}
.page-becometrader .benefit-card h4 {
font-size: 18px;
font-weight: 700;
margin-bottom: 10px;
color: white;
}
.page-becometrader .benefit-card p {
font-size: 14px;
color: white;
margin: 0;
opacity: 0.95;
}
.page-becometrader .application-form-section {
background: white;
border-radius: 16px;
padding: 40px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.page-becometrader .form-step {
display: none;
}
.page-becometrader .form-step.active {
display: block;
}
.page-becometrader .step-indicator {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
position: relative;
}
.page-becometrader .step-indicator::before {
content: '';
position: absolute;
top: 20px;
left: 0;
right: 0;
height: 2px;
background: #e5e7eb;
z-index: 0;
}
.page-becometrader .step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 1;
flex: 1;
}
.page-becometrader .step-number {
width: 40px;
height: 40px;
border-radius: 50%;
background: #e5e7eb;
color: #6b7280;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
margin-bottom: 8px;
transition: all 0.3s ease;
}
.page-becometrader .step.active .step-number {
background: #6366F1;
color: white;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.page-becometrader .step.completed .step-number {
background: #10b981;
color: white;
}
.page-becometrader .step-label {
font-size: 12px;
font-weight: 600;
color: #6b7280;
text-align: center;
}
.page-becometrader .step.active .step-label {
color: #6366F1;
}
.page-becometrader .form-group {
margin-bottom: 25px;
}
.page-becometrader .form-label {
font-size: 14px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 8px;
display: block;
}
.page-becometrader .form-label .required {
color: #ef4444;
}
.page-becometrader .form-control,
.page-becometrader .form-select {
width: 100%;
padding: 12px;
border: 2px solid var(--border);
border-radius: 8px;
font-size: 14px;
transition: all 0.3s ease;
font-family: inherit;
background-color: white;
}
.page-becometrader .form-select {
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
padding: 12px 35px 12px 12px !important;
border: 2px solid #e5e7eb !important;
border-radius: 8px !important;
background-color: white !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 14px !important;
cursor: pointer;
height: auto;
--bs-form-select-bg-img: none !important;
}
.page-becometrader .form-select::-ms-expand {
display: none;
}
.page-becometrader #country {
padding: 12px !important;
padding-right: 35px !important;
}
.page-becometrader .form-control:focus,
.page-becometrader .form-select:focus {
outline: none;
border-color: #6366F1;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.page-becometrader .form-control.error {
border-color: #ef4444;
}
.page-becometrader .error-message {
color: #ef4444;
font-size: 12px;
margin-top: 5px;
display: none;
}
.page-becometrader .file-upload-area {
border: 2px dashed #e5e7eb;
border-radius: 8px;
padding: 30px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.page-becometrader .file-upload-area:hover {
border-color: #6366F1;
background: #f5f7ff;
}
.page-becometrader .file-upload-area i {
font-size: 48px;
color: #6366F1;
margin-bottom: 10px;
}
.page-becometrader .file-upload-area p {
margin: 0;
color: #6b7280;
font-size: 14px;
}
.page-becometrader .uploaded-file {
display: flex;
align-items: center;
justify-content: space-between;
background: #f5f7fa;
padding: 12px;
border-radius: 8px;
margin-top: 10px;
}
.page-becometrader .uploaded-file-info {
display: flex;
align-items: center;
gap: 10px;
}
.page-becometrader .uploaded-file i {
color: #6366F1;
font-size: 24px;
}
.page-becometrader .remove-file {
background: none;
border: none;
color: #ef4444;
cursor: pointer;
font-size: 20px;
}
.page-becometrader .form-buttons {
display: flex;
justify-content: space-between;
margin-top: 30px;
gap: 15px;
}
.page-becometrader .btn {
padding: 12px 30px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
border: none;
display: flex;
align-items: center;
gap: 8px;
}
.page-becometrader .btn-secondary {
background: #e5e7eb;
color: #6b7280;
}
.page-becometrader .btn-secondary:hover {
background: #d1d5db;
}
.page-becometrader .btn-primary {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
color: white;
}
.page-becometrader .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}
.page-becometrader .requirements-list {
background: #fef3c7;
border-left: 4px solid #f59e0b;
padding: 20px;
border-radius: 8px;
margin-bottom: 30px;
}
.page-becometrader .requirements-list h4 {
font-size: 16px;
font-weight: 700;
color: #92400e;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.page-becometrader .requirements-list ul {
margin: 0;
padding-left: 20px;
}
.page-becometrader .requirements-list li {
color: #78350f;
margin-bottom: 8px;
font-size: 14px;
}
.page-becometrader textarea.form-control {
min-height: 120px;
resize: vertical;
}
.page-becometrader .success-animation {
text-align: center;
padding: 60px 20px;
}
.page-becometrader .success-animation i {
font-size: 80px;
color: #10b981;
animation: scaleInTrader 0.5s ease;
}
@keyframes scaleInTrader {
0% { transform: scale(0); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.page-becometrader .success-animation h2 {
font-size: 28px;
font-weight: 700;
color: #1a1a1a;
margin: 20px 0 10px;
}
.page-becometrader .success-animation p {
color: #6b7280;
font-size: 16px;
}
@media (max-width: 768px) {
.page-becometrader .application-header {
padding: 30px 20px;
}
.page-becometrader .application-header h1 {
font-size: 28px;
}
.page-becometrader .application-form-section {
padding: 25px 20px;
}
.page-becometrader .step-label {
font-size: 10px;
}
.page-becometrader .form-buttons {
flex-direction: column;
}
.page-becometrader .btn {
width: 100%;
justify-content: center;
}
}
/* Hide demo panel, sale popup, and floating buy/support buttons */
.dlab-demo-panel,
.DZ-bt-buy-now,
.DZ-bt-support-now,
.dlab-sale-banner,
.dzSaleBanner,
#dzSaleBanner,
.demo-panel,
[class*="sale-banner"],
.page-becometrader [class*="demo-panel"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* ==========================================
trader-details.html - Body Class: .page-traderdetails
========================================== */
/* Trader Profile Header */
.page-traderdetails .trader-profile-header {
background: white;
border: 2px solid var(--border);
border-radius: 20px;
padding: 40px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.page-traderdetails .profile-main {
display: flex;
align-items: center;
gap: 30px;
margin-bottom: 30px;
position: relative;
z-index: 1;
}
.page-traderdetails .profile-avatar-large {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 5px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.page-traderdetails .profile-info-main h1 {
font-size: 32px;
font-weight: 700;
margin-bottom: 8px;
color: #1a1a1a;
}
.page-traderdetails .profile-username {
font-size: 18px;
color: #6b7280;
margin-bottom: 15px;
}
.page-traderdetails .profile-badges {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.page-traderdetails .profile-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: #f3f4f6;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
color: #4b5563;
}
.page-traderdetails .profile-badge i {
font-size: 16px;
color: var(--primary);
}
.page-traderdetails .profile-badge.verified {
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
color: #1e40af;
}
.page-traderdetails .profile-badge.verified i {
color: #2563eb;
}
.page-traderdetails .profile-badge.gold {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
color: #92400e;
}
.page-traderdetails .profile-badge.gold i {
color: #d97706;
}
.page-traderdetails .profile-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
position: relative;
z-index: 1;
}
.page-traderdetails .profile-stat-item {
background: #f9fafb;
border: 2px solid var(--border);
padding: 20px;
border-radius: 12px;
text-align: center;
}
.page-traderdetails .profile-stat-label {
font-size: 13px;
color: #6b7280;
margin-bottom: 8px;
}
.page-traderdetails .profile-stat-value {
font-size: 28px;
font-weight: 700;
color: #1a1a1a;
}
.page-traderdetails .profile-stat-value.positive {
color: #10b981;
}
/* Action Buttons */
.page-traderdetails .action-buttons {
display: flex;
gap: 15px;
margin-top: 25px;
}
.page-traderdetails .btn-copy-large {
flex: 1;
height: 56px;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
color: white;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s ease;
cursor: pointer;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.page-traderdetails .btn-copy-large:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.page-traderdetails .btn-copy-large i {
font-size: 24px;
}
.page-traderdetails .btn-share {
height: 56px;
width: 56px;
background: #f3f4f6;
border: 2px solid var(--border);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.page-traderdetails .btn-share:hover {
background: #e5e7eb;
}
.page-traderdetails .btn-share i {
font-size: 24px;
color: #6b7280;
}
/* Content Card */
.page-traderdetails .content-card {
background: white;
border-radius: 16px;
padding: 25px;
margin-bottom: 25px;
border: 2px solid var(--border);
}
.page-traderdetails .content-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid #f3f4f6;
}
.page-traderdetails .content-card-title {
font-size: 20px;
font-weight: 700;
color: #1a1a1a;
}
.page-traderdetails .content-card-filter {
display: flex;
gap: 10px;
}
.page-traderdetails .filter-tab {
padding: 8px 16px;
background: #f3f4f6;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
color: #6b7280;
cursor: pointer;
transition: all 0.3s ease;
}
.page-traderdetails .filter-tab.active {
background: var(--primary);
color: white;
}
/* Performance Chart Placeholder */
.page-traderdetails .chart-container {
height: 350px;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #6b7280;
font-size: 16px;
}
/* Stats Grid */
.page-traderdetails .stats-grid-detailed {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.page-traderdetails .stat-box {
background: #f9fafb;
padding: 20px;
border-radius: 12px;
border: 2px solid var(--border);
}
.page-traderdetails .stat-box-label {
font-size: 13px;
color: #6b7280;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
}
.page-traderdetails .stat-box-value {
font-size: 24px;
font-weight: 700;
color: #1a1a1a;
}
.page-traderdetails .stat-box-value.green {
color: #10b981;
}
.page-traderdetails .stat-box-value.red {
color: #ef4444;
}
/* Trading Table */
.page-traderdetails .trading-table {
width: 100%;
border-collapse: collapse;
}
.page-traderdetails .trading-table thead {
background: #f9fafb;
}
.page-traderdetails .trading-table th {
padding: 12px 15px;
text-align: left;
font-size: 13px;
font-weight: 700;
color: #6b7280;
text-transform: uppercase;
}
.page-traderdetails .trading-table td {
padding: 15px;
border-bottom: 1px solid #f3f4f6;
font-size: 14px;
}
.page-traderdetails .trading-table tbody tr:hover {
background: #f9fafb;
}
.page-traderdetails .trade-pair {
font-weight: 700;
color: #1a1a1a;
}
.page-traderdetails .trade-type {
display: inline-block;
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
}
.page-traderdetails .trade-type.buy {
background: #d1fae5;
color: #065f46;
}
.page-traderdetails .trade-type.sell {
background: #fee2e2;
color: #991b1b;
}
.page-traderdetails .trade-profit {
font-weight: 700;
}
.page-traderdetails .trade-profit.positive {
color: #10b981;
}
.page-traderdetails .trade-profit.negative {
color: #ef4444;
}
.page-traderdetails .trade-status {
display: inline-flex;
align-items: center;
gap: 4px;
}
.page-traderdetails .status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.page-traderdetails .status-dot.open {
background: #3b82f6;
}
.page-traderdetails .status-dot.closed {
background: #6b7280;
}
/* Monthly Returns */
.page-traderdetails .monthly-returns {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.page-traderdetails .month-box {
background: #f9fafb;
padding: 15px;
border-radius: 10px;
text-align: center;
border: 2px solid var(--border);
}
.page-traderdetails .month-label {
font-size: 13px;
color: #6b7280;
margin-bottom: 8px;
}
.page-traderdetails .month-return {
font-size: 20px;
font-weight: 700;
}
.page-traderdetails .month-return.positive {
color: #10b981;
}
.page-traderdetails .month-return.negative {
color: #ef4444;
}
/* About Section */
.page-traderdetails .about-content {
line-height: 1.8;
color: #4b5563;
font-size: 15px;
}
.page-traderdetails .about-item {
display: flex;
gap: 15px;
margin-bottom: 20px;
padding: 15px;
background: #f9fafb;
border-radius: 10px;
}
.page-traderdetails .about-icon {
width: 40px;
height: 40px;
background: var(--primary);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.page-traderdetails .about-icon i {
color: white;
font-size: 20px;
}
.page-traderdetails .about-text h5 {
font-size: 15px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 5px;
}
.page-traderdetails .about-text p {
font-size: 14px;
color: #6b7280;
margin: 0;
}
/* Responsive */
@media (max-width: 1200px) {
.page-traderdetails .profile-stats {
grid-template-columns: repeat(2, 1fr);
}
.page-traderdetails .stats-grid-detailed {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.page-traderdetails .trader-profile-header {
padding: 25px;
}
.page-traderdetails .profile-main {
flex-direction: column;
text-align: center;
}
.page-traderdetails .profile-info-main h1 {
font-size: 24px;
}
.page-traderdetails .profile-stats {
grid-template-columns: 1fr;
}
.page-traderdetails .stats-grid-detailed {
grid-template-columns: 1fr;
}
.page-traderdetails .monthly-returns {
grid-template-columns: repeat(2, 1fr);
}
.page-traderdetails .action-buttons {
flex-direction: column;
}
.page-traderdetails .btn-share {
width: 100%;
}
.page-traderdetails .trading-table {
font-size: 12px;
}
.trading-table th,
.page-traderdetails .trading-table td {
padding: 10px 8px;
}
}
/* ==========================================
stock-market.html - Body Class: .page-stockmarket
========================================== */
:root {
--primary: #6366F1;
--primary-dark: #5568d3;
--success: #10b981;
--danger: #ef4444;
--warning: #f59e0b;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
}
body.page-stockmarket {
background: var(--body-bg);
}
/* Chart Panel - Full Width */
.page-stockmarket .chart-panel {
background: var(--card);
border-radius: 16px;
border: 1px solid var(--gray-200);
padding: 24px;
margin-bottom: 20px;
}
.page-stockmarket .chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 16px;
}
.page-stockmarket .stock-selector-wrapper {
display: flex;
align-items: center;
gap: 16px;
flex: 1;
min-width: 300px;
}
.page-stockmarket .stock-selector {
position: relative;
flex: 1;
max-width: 400px;
}
.page-stockmarket .stock-dropdown {
width: 100%;
padding: 12px 16px 12px 56px;
border: 2px solid var(--gray-200);
border-radius: 12px;
font-size: 15px;
font-weight: 600;
color: var(--gray-900);
background: white;
cursor: pointer;
transition: all 0.3s;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667eea' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
}
.page-stockmarket .stock-dropdown:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.page-stockmarket .selected-stock-logo {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 11px;
pointer-events: none;
}
.page-stockmarket .price-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 20px;
}
.page-stockmarket .stat-item {
background: var(--gray-50);
padding: 14px 18px;
border-radius: 12px;
}
.page-stockmarket .stat-label {
font-size: 12px;
color: var(--gray-500);
margin-bottom: 6px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.page-stockmarket .stat-value {
font-size: 20px;
font-weight: 700;
color: var(--gray-900);
}
.page-stockmarket .timeframe-selector {
display: flex;
gap: 0;
background: var(--gray-100);
padding: 4px;
border-radius: 10px;
}
.page-stockmarket .timeframe-btn {
background: transparent;
border: none;
color: var(--gray-600);
padding: 8px 20px;
font-size: 13px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
}
.page-stockmarket .timeframe-btn:hover {
background: rgba(102, 126, 234, 0.1);
color: var(--primary);
}
.page-stockmarket .timeframe-btn.active {
background: var(--card);
color: var(--primary);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.page-stockmarket .chart-container {
position: relative;
height: 450px;
margin-bottom: 10px;
}
.page-stockmarket .chart-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.page-stockmarket .loading {
text-align: center;
padding: 40px;
color: var(--gray-500);
}
/* Trading Panel - Stacked Vertically */
.page-stockmarket .trading-section {
background: var(--card);
border-radius: 16px;
border: 1px solid var(--gray-200);
padding: 28px;
margin-bottom: 20px;
}
.page-stockmarket .trading-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.page-stockmarket .trading-header h3 {
font-size: 20px;
font-weight: 700;
color: var(--gray-900);
margin: 0;
}
.page-stockmarket .copy-advisory {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
padding: 12px 16px;
border-radius: 10px;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.page-stockmarket .copy-advisory i {
font-size: 20px;
color: white;
}
.page-stockmarket .copy-advisory-text {
flex: 1;
font-size: 11px;
color: white;
line-height: 1.4;
}
.page-stockmarket .copy-advisory-text strong {
display: block;
font-size: 12px;
margin-bottom: 2px;
}
.page-stockmarket .copy-advisory-link {
background: var(--card);
color: var(--primary);
padding: 6px 14px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: all 0.2s;
}
.page-stockmarket .copy-advisory-link:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.page-stockmarket .trading-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
margin-bottom: 24px;
border-bottom: 3px solid var(--gray-200);
}
.page-stockmarket .tab-btn {
padding: 16px 24px;
border: none;
border-bottom: 3px solid transparent;
border-radius: 0;
background: transparent;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
position: relative;
margin-bottom: -3px;
}
.page-stockmarket .tab-btn i {
font-size: 20px;
}
.page-stockmarket .tab-btn.buy {
color: var(--gray-600);
}
.page-stockmarket .tab-btn.buy:hover {
color: var(--success);
background: rgba(16, 185, 129, 0.05);
}
.page-stockmarket .tab-btn.buy.active {
background: transparent;
color: var(--success);
border-bottom-color: var(--success);
}
.page-stockmarket .tab-btn.sell {
color: var(--gray-600);
}
.page-stockmarket .tab-btn.sell:hover {
color: var(--danger);
background: rgba(239, 68, 68, 0.05);
}
.page-stockmarket .tab-btn.sell.active {
background: transparent;
color: var(--danger);
border-bottom-color: var(--danger);
}
/* Stacked Form Layout */
.page-stockmarket .trading-form {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 800px;
margin: 0 auto;
}
.page-stockmarket .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.page-stockmarket .form-group {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.page-stockmarket .form-label {
font-size: 13px;
font-weight: 600;
color: var(--gray-700);
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.page-stockmarket .form-input,
.page-stockmarket .form-select {
padding: 14px 16px;
border: 2px solid var(--gray-200);
border-radius: 10px;
font-size: 15px;
font-weight: 500;
transition: all 0.3s;
}
.page-stockmarket .form-input:focus,
.page-stockmarket .form-select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.page-stockmarket .duration-buttons {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
.page-stockmarket .duration-btn {
padding: 12px 8px;
border: 2px solid var(--gray-200);
border-radius: 10px;
background: white;
font-size: 14px;
font-weight: 600;
color: var(--gray-600);
cursor: pointer;
transition: all 0.2s;
}
.page-stockmarket .duration-btn:hover {
border-color: var(--primary);
color: var(--primary);
transform: translateY(-2px);
}
.page-stockmarket .duration-btn.active {
background: var(--primary);
color: white;
border-color: var(--primary);
box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}
.page-stockmarket .leverage-mode {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 10px;
}
.page-stockmarket .mode-btn {
padding: 12px;
border: 2px solid var(--gray-200);
border-radius: 10px;
background: white;
font-size: 14px;
font-weight: 600;
color: var(--gray-600);
cursor: pointer;
transition: all 0.2s;
text-align: center;
}
.page-stockmarket .mode-btn:hover {
border-color: var(--primary);
color: var(--primary);
transform: translateY(-2px);
}
.page-stockmarket .mode-btn.active {
background: var(--primary);
color: white;
border-color: var(--primary);
box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}
.page-stockmarket .leverage-options {
display: none;
grid-template-columns: repeat(6, 1fr);
gap: 8px;
}
.page-stockmarket .leverage-options.show {
display: grid;
}
.page-stockmarket .leverage-btn {
padding: 12px 8px;
border: 2px solid var(--gray-200);
border-radius: 10px;
background: white;
font-size: 13px;
font-weight: 600;
color: var(--gray-600);
cursor: pointer;
transition: all 0.2s;
}
.page-stockmarket .leverage-btn:hover:not(:disabled) {
border-color: var(--primary);
color: var(--primary);
transform: translateY(-2px);
}
.page-stockmarket .leverage-btn.active {
background: var(--primary);
color: white;
border-color: var(--primary);
box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}
.page-stockmarket .leverage-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.page-stockmarket .trade-btn {
padding: 16px 32px;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.page-stockmarket .trade-btn i {
font-size: 22px;
}
.page-stockmarket .trade-btn.buy {
background: var(--success);
color: white;
}
.page-stockmarket .trade-btn.buy:hover {
background: #0d9668;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}
.page-stockmarket .trade-btn.sell {
background: var(--danger);
color: white;
}
.page-stockmarket .trade-btn.sell:hover {
background: #dc2626;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
}
/* Active Trades Section */
.page-stockmarket .trades-section {
background: var(--card);
border-radius: 16px;
border: 1px solid var(--gray-200);
padding: 24px;
}
.page-stockmarket .trades-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.page-stockmarket .trades-header h3 {
font-size: 18px;
font-weight: 700;
color: var(--gray-900);
margin: 0;
}
.page-stockmarket .trade-tabs {
display: flex;
gap: 8px;
border-bottom: 2px solid var(--gray-200);
margin-bottom: 20px;
}
.page-stockmarket .trade-tab {
padding: 12px 24px;
background: transparent;
border: none;
font-size: 14px;
font-weight: 600;
color: var(--gray-500);
cursor: pointer;
position: relative;
transition: all 0.3s;
}
.page-stockmarket .trade-tab:hover {
color: var(--primary);
}
.page-stockmarket .trade-tab.active {
color: var(--primary);
}
.page-stockmarket .trade-tab.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background: var(--primary);
}
.page-stockmarket .trades-list {
display: grid;
gap: 12px;
}
.page-stockmarket .trade-item {
display: grid;
grid-template-columns: 80px 200px 120px 120px 120px 100px 100px 80px;
gap: 16px;
padding: 16px;
background: var(--gray-50);
border-radius: 12px;
align-items: center;
border: 2px solid transparent;
transition: all 0.3s;
}
.page-stockmarket .trade-item:hover {
border-color: var(--gray-200);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.page-stockmarket .trade-type {
padding: 6px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
text-align: center;
}
.page-stockmarket .trade-type.buy {
background: rgba(16, 185, 129, 0.15);
color: var(--success);
}
.page-stockmarket .trade-type.sell {
background: rgba(239, 68, 68, 0.15);
color: var(--danger);
}
.page-stockmarket .trade-asset {
display: flex;
align-items: center;
gap: 12px;
}
.page-stockmarket .trade-asset-logo {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 11px;
}
.page-stockmarket .trade-asset-info {
flex: 1;
}
.page-stockmarket .trade-asset-name {
font-size: 14px;
font-weight: 600;
color: var(--gray-900);
}
.page-stockmarket .trade-asset-symbol {
font-size: 11px;
color: var(--gray-500);
text-transform: uppercase;
}
.page-stockmarket .trade-detail {
font-size: 13px;
}
.page-stockmarket .trade-detail-label {
font-size: 11px;
color: var(--gray-500);
margin-bottom: 3px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.page-stockmarket .trade-detail-value {
font-weight: 600;
color: var(--gray-900);
}
.page-stockmarket .trade-pnl {
font-size: 16px;
font-weight: 700;
}
.page-stockmarket .trade-pnl.positive {
color: var(--success);
}
.page-stockmarket .trade-pnl.negative {
color: var(--danger);
}
.page-stockmarket .trade-timer {
background: var(--warning);
color: white;
padding: 8px 12px;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
text-align: center;
}
.page-stockmarket .empty-trades {
text-align: center;
padding: 60px 20px;
color: var(--gray-400);
}
.page-stockmarket .empty-trades i {
font-size: 64px;
margin-bottom: 16px;
opacity: 0.3;
}
.page-stockmarket .empty-trades p {
font-size: 15px;
margin: 0;
}
@media (max-width: 1400px) {
.page-stockmarket .trade-item {
grid-template-columns: 70px 180px 100px 100px 100px 90px 90px 70px;
gap: 12px;
}
}
@media (max-width: 1200px) {
.page-stockmarket .price-stats {
grid-template-columns: repeat(2, 1fr);
}
.page-stockmarket .form-row {
grid-template-columns: 1fr;
}
.page-stockmarket .trade-item {
grid-template-columns: 1fr;
gap: 8px;
}
.page-stockmarket .leverage-options {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.page-stockmarket .chart-header {
flex-direction: column;
align-items: stretch;
}
.page-stockmarket .stock-selector-wrapper {
width: 100%;
max-width: none;
}
.page-stockmarket .timeframe-selector {
justify-content: space-between;
}
.page-stockmarket .price-stats {
grid-template-columns: 1fr;
}
.page-stockmarket .copy-advisory {
flex-direction: column;
align-items: stretch;
text-align: center;
}
.page-stockmarket .copy-advisory-link {
text-align: center;
width: 100%;
margin-top: 4px;
}
}
/* ==========================================
crypto-market.html - Body Class: .page-cryptomarket
========================================== */
:root {
--primary: #6366F1;
--primary-dark: #5568d3;
--success: #10b981;
--danger: #ef4444;
--warning: #f59e0b;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
}
body.page-cryptomarket {
background: var(--body-bg);
}
/* Chart Panel - Full Width */
.page-cryptomarket .chart-panel {
background: var(--card);
border-radius: 16px;
border: 1px solid var(--gray-200);
padding: 24px;
margin-bottom: 20px;
}
.page-cryptomarket .chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 16px;
}
.page-cryptomarket .crypto-selector-wrapper {
display: flex;
align-items: center;
gap: 16px;
flex: 1;
min-width: 300px;
}
.page-cryptomarket .crypto-selector {
position: relative;
flex: 1;
max-width: 400px;
}
.page-cryptomarket .crypto-dropdown {
width: 100%;
padding: 12px 16px 12px 56px;
border: 2px solid var(--gray-200);
border-radius: 12px;
font-size: 15px;
font-weight: 600;
color: var(--gray-900);
background: white;
cursor: pointer;
transition: all 0.3s;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667eea' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
}
.page-cryptomarket .crypto-dropdown:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.page-cryptomarket .selected-crypto-logo {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
border-radius: 50%;
pointer-events: none;
}
.page-cryptomarket .price-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 20px;
}
.page-cryptomarket .stat-item {
background: var(--gray-50);
padding: 14px 18px;
border-radius: 12px;
}
.page-cryptomarket .stat-label {
font-size: 12px;
color: var(--gray-500);
margin-bottom: 6px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.page-cryptomarket .stat-value {
font-size: 20px;
font-weight: 700;
color: var(--gray-900);
}
.page-cryptomarket .timeframe-selector {
display: flex;
gap: 0;
background: var(--gray-100);
padding: 4px;
border-radius: 10px;
}
.page-cryptomarket .timeframe-btn {
background: transparent;
border: none;
color: var(--gray-600);
padding: 8px 20px;
font-size: 13px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
}
.page-cryptomarket .timeframe-btn:hover {
background: rgba(102, 126, 234, 0.1);
color: var(--primary);
}
.page-cryptomarket .timeframe-btn.active {
background: var(--card);
color: var(--primary);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.page-cryptomarket .chart-container {
position: relative;
height: 450px;
margin-bottom: 10px;
}
.page-cryptomarket .chart-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.page-cryptomarket .loading {
text-align: center;
padding: 40px;
color: var(--gray-500);
}
/* Trading Panel - Stacked Vertically */
.page-cryptomarket .trading-section {
background: var(--card);
border-radius: 16px;
border: 1px solid var(--gray-200);
padding: 28px;
margin-bottom: 20px;
}
.page-cryptomarket .trading-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.page-cryptomarket .trading-header h3 {
font-size: 20px;
font-weight: 700;
color: var(--gray-900);
margin: 0;
}
.page-cryptomarket .copy-advisory {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
padding: 12px 16px;
border-radius: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.page-cryptomarket .copy-advisory i {
font-size: 20px;
color: white;
}
.page-cryptomarket .copy-advisory-text {
flex: 1;
font-size: 11px;
color: white;
line-height: 1.4;
}
.page-cryptomarket .copy-advisory-text strong {
display: block;
font-size: 12px;
margin-bottom: 2px;
}
.page-cryptomarket .copy-advisory-link {
background: var(--card);
color: var(--primary);
padding: 6px 14px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: all 0.2s;
}
.page-cryptomarket .copy-advisory-link:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.page-cryptomarket .trading-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
margin-bottom: 24px;
border-bottom: 3px solid var(--gray-200);
}
.page-cryptomarket .tab-btn {
padding: 16px 24px;
border: none;
border-bottom: 3px solid transparent;
border-radius: 0;
background: transparent;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
position: relative;
margin-bottom: -3px;
}
.page-cryptomarket .tab-btn i {
font-size: 20px;
}
.page-cryptomarket .tab-btn.buy {
color: var(--gray-600);
}
.page-cryptomarket .tab-btn.buy:hover {
color: var(--success);
background: rgba(16, 185, 129, 0.05);
}
.page-cryptomarket .tab-btn.buy.active {
background: transparent;
color: var(--success);
border-bottom-color: var(--success);
}
.page-cryptomarket .tab-btn.sell {
color: var(--gray-600);
}
.page-cryptomarket .tab-btn.sell:hover {
color: var(--danger);
background: rgba(239, 68, 68, 0.05);
}
.page-cryptomarket .tab-btn.sell.active {
background: transparent;
color: var(--danger);
border-bottom-color: var(--danger);
}
/* Stacked Form Layout */
.page-cryptomarket .trading-form {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 800px;
margin: 0 auto;
}
.page-cryptomarket .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.page-cryptomarket .form-group {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.page-cryptomarket .form-label {
font-size: 13px;
font-weight: 600;
color: var(--gray-700);
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.page-cryptomarket .form-input,
.page-cryptomarket .form-select {
padding: 14px 16px;
border: 2px solid var(--gray-200);
border-radius: 10px;
font-size: 15px;
font-weight: 500;
transition: all 0.3s;
}
.page-cryptomarket .form-input:focus,
.page-cryptomarket .form-select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.page-cryptomarket .duration-buttons {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
.page-cryptomarket .duration-btn {
padding: 12px 8px;
border: 2px solid var(--gray-200);
border-radius: 10px;
background: white;
font-size: 14px;
font-weight: 600;
color: var(--gray-600);
cursor: pointer;
transition: all 0.2s;
}
.page-cryptomarket .duration-btn:hover {
border-color: var(--primary);
color: var(--primary);
transform: translateY(-2px);
}
.page-cryptomarket .duration-btn.active {
background: var(--primary);
color: white;
border-color: var(--primary);
box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}
.page-cryptomarket .leverage-mode {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 10px;
}
.page-cryptomarket .mode-btn {
padding: 12px;
border: 2px solid var(--gray-200);
border-radius: 10px;
background: white;
font-size: 14px;
font-weight: 600;
color: var(--gray-600);
cursor: pointer;
transition: all 0.2s;
text-align: center;
}
.page-cryptomarket .mode-btn:hover {
border-color: var(--primary);
color: var(--primary);
transform: translateY(-2px);
}
.page-cryptomarket .mode-btn.active {
background: var(--primary);
color: white;
border-color: var(--primary);
box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}
.page-cryptomarket .leverage-options {
display: none;
grid-template-columns: repeat(6, 1fr);
gap: 8px;
}
.page-cryptomarket .leverage-options.show {
display: grid;
}
.page-cryptomarket .leverage-btn {
padding: 12px 8px;
border: 2px solid var(--gray-200);
border-radius: 10px;
background: white;
font-size: 13px;
font-weight: 600;
color: var(--gray-600);
cursor: pointer;
transition: all 0.2s;
}
.page-cryptomarket .leverage-btn:hover:not(:disabled) {
border-color: var(--primary);
color: var(--primary);
transform: translateY(-2px);
}
.page-cryptomarket .leverage-btn.active {
background: var(--primary);
color: white;
border-color: var(--primary);
box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}
.page-cryptomarket .leverage-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.page-cryptomarket .trade-btn {
padding: 16px 32px;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.page-cryptomarket .trade-btn i {
font-size: 22px;
}
.page-cryptomarket .trade-btn.buy {
background: var(--success);
color: white;
}
.page-cryptomarket .trade-btn.buy:hover {
background: #0d9668;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}
.page-cryptomarket .trade-btn.sell {
background: var(--danger);
color: white;
}
.page-cryptomarket .trade-btn.sell:hover {
background: #dc2626;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
}
/* Active Trades Section */
.page-cryptomarket .trades-section {
background: var(--card);
border-radius: 16px;
border: 1px solid var(--gray-200);
padding: 24px;
}
.page-cryptomarket .trades-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.page-cryptomarket .trades-header h3 {
font-size: 18px;
font-weight: 700;
color: var(--gray-900);
margin: 0;
}
.page-cryptomarket .trade-tabs {
display: flex;
gap: 8px;
border-bottom: 2px solid var(--gray-200);
margin-bottom: 20px;
}
.page-cryptomarket .trade-tab {
padding: 12px 24px;
background: transparent;
border: none;
font-size: 14px;
font-weight: 600;
color: var(--gray-500);
cursor: pointer;
position: relative;
transition: all 0.3s;
}
.page-cryptomarket .trade-tab:hover {
color: var(--primary);
}
.page-cryptomarket .trade-tab.active {
color: var(--primary);
}
.page-cryptomarket .trade-tab.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background: var(--primary);
}
.page-cryptomarket .trades-list {
display: grid;
gap: 12px;
}
.page-cryptomarket .trade-item {
display: grid;
grid-template-columns: 80px 200px 120px 120px 120px 100px 100px 80px;
gap: 16px;
padding: 16px;
background: var(--gray-50);
border-radius: 12px;
align-items: center;
border: 2px solid transparent;
transition: all 0.3s;
}
.page-cryptomarket .trade-item:hover {
border-color: var(--gray-200);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.page-cryptomarket .trade-type {
padding: 6px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
text-align: center;
}
.page-cryptomarket .trade-type.buy {
background: rgba(16, 185, 129, 0.15);
color: var(--success);
}
.page-cryptomarket .trade-type.sell {
background: rgba(239, 68, 68, 0.15);
color: var(--danger);
}
.page-cryptomarket .trade-asset {
display: flex;
align-items: center;
gap: 12px;
}
.page-cryptomarket .trade-asset-logo {
width: 36px;
height: 36px;
border-radius: 50%;
}
.page-cryptomarket .trade-asset-info {
flex: 1;
}
.page-cryptomarket .trade-asset-name {
font-size: 14px;
font-weight: 600;
color: var(--gray-900);
}
.page-cryptomarket .trade-asset-symbol {
font-size: 11px;
color: var(--gray-500);
text-transform: uppercase;
}
.page-cryptomarket .trade-detail {
font-size: 13px;
}
.page-cryptomarket .trade-detail-label {
font-size: 11px;
color: var(--gray-500);
margin-bottom: 3px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.page-cryptomarket .trade-detail-value {
font-weight: 600;
color: var(--gray-900);
}
.page-cryptomarket .trade-pnl {
font-size: 16px;
font-weight: 700;
}
.page-cryptomarket .trade-pnl.positive {
color: var(--success);
}
.page-cryptomarket .trade-pnl.negative {
color: var(--danger);
}
.page-cryptomarket .trade-timer {
background: var(--warning);
color: white;
padding: 8px 12px;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
text-align: center;
}
.page-cryptomarket .empty-trades {
text-align: center;
padding: 60px 20px;
color: var(--gray-400);
}
.page-cryptomarket .empty-trades i {
font-size: 64px;
margin-bottom: 16px;
opacity: 0.3;
}
.page-cryptomarket .empty-trades p {
font-size: 15px;
margin: 0;
}
.page-cryptomarket .error-message {
background: rgba(239, 68, 68, 0.1);
border: 2px solid var(--danger);
color: var(--danger);
padding: 16px 20px;
border-radius: 12px;
margin: 20px 0;
display: flex;
align-items: center;
gap: 12px;
}
.page-cryptomarket .error-message i {
font-size: 24px;
}
.page-cryptomarket .error-message-text {
flex: 1;
}
.page-cryptomarket .error-message-text strong {
display: block;
margin-bottom: 4px;
}
.page-cryptomarket .retry-btn {
background: var(--danger);
color: white;
padding: 8px 16px;
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.page-cryptomarket .retry-btn:hover {
background: #dc2626;
transform: translateY(-2px);
}
@media (max-width: 1400px) {
.page-cryptomarket .trade-item {
grid-template-columns: 70px 180px 100px 100px 100px 90px 90px 70px;
gap: 12px;
}
}
@media (max-width: 1200px) {
.page-cryptomarket .price-stats {
grid-template-columns: repeat(2, 1fr);
}
.page-cryptomarket .form-row {
grid-template-columns: 1fr;
}
.page-cryptomarket .trade-item {
grid-template-columns: 1fr;
gap: 8px;
}
.page-cryptomarket .leverage-options {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.page-cryptomarket .chart-header {
flex-direction: column;
align-items: stretch;
}
.page-cryptomarket .crypto-selector-wrapper {
width: 100%;
max-width: none;
}
.page-cryptomarket .timeframe-selector {
justify-content: space-between;
}
.page-cryptomarket .price-stats {
grid-template-columns: 1fr;
}
.page-cryptomarket .copy-advisory {
flex-direction: column;
align-items: stretch;
text-align: center;
}
.page-cryptomarket .copy-advisory-link {
text-align: center;
width: 100%;
margin-top: 4px;
}
}
/* ==========================================
copytrading-agreement.html - Body Class: .page-ctagreement
========================================== */
/* Agreement Page Styling */
.page-ctagreement .agreement-container {
max-width: 1000px;
margin: 0 auto;
}
.page-ctagreement .agreement-content {
background: white;
border-radius: 16px;
padding: 50px;
margin-bottom: 25px;
border: 2px solid var(--border);
}
.page-ctagreement .agreement-header {
text-align: center;
margin-bottom: 40px;
padding-bottom: 30px;
border-bottom: 3px solid var(--primary);
}
.page-ctagreement .agreement-header h1 {
font-size: 36px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 15px;
}
.page-ctagreement .agreement-header .subtitle {
font-size: 16px;
color: #6b7280;
margin-bottom: 10px;
}
.page-ctagreement .agreement-header .last-updated {
font-size: 14px;
color: #9ca3af;
font-style: italic;
}
.page-ctagreement .agreement-section {
margin-bottom: 35px;
}
.page-ctagreement .agreement-section:last-child {
margin-bottom: 0;
}
.page-ctagreement .section-title {
font-size: 22px;
font-weight: 700;
color: var(--primary);
margin-bottom: 15px;
}
.page-ctagreement .section-content {
color: #4b5563;
font-size: 15px;
line-height: 1.9;
}
.page-ctagreement .section-content p {
margin-bottom: 15px;
}
.page-ctagreement .section-content ul,
.page-ctagreement .section-content ol {
margin: 15px 0;
padding-left: 30px;
}
.page-ctagreement .section-content li {
margin-bottom: 12px;
}
.page-ctagreement .section-content strong {
color: #1a1a1a;
font-weight: 600;
}
.page-ctagreement .warning-box {
padding: 20px 25px;
border-radius: 12px;
margin: 25px 0;
border: 1px solid;
}
.page-ctagreement .warning-box.warning-yellow {
background: #fef3c7;
border-color: #fcd34d;
}
.page-ctagreement .warning-box.warning-green {
background: #dcfce7;
border-color: #86efac;
}
.page-ctagreement .warning-box .warning-title {
font-size: 17px;
font-weight: 700;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 10px;
}
.page-ctagreement .warning-box.warning-yellow .warning-title {
color: #92400e;
}
.page-ctagreement .warning-box.warning-green .warning-title {
color: #166534;
}
.page-ctagreement .warning-box .warning-title i {
font-size: 24px;
}
.page-ctagreement .warning-box p {
margin: 0;
line-height: 1.7;
}
.page-ctagreement .warning-box.warning-yellow p {
color: #78350f;
}
.page-ctagreement .warning-box.warning-green p {
color: #166534;
}
.page-ctagreement .action-buttons {
display: flex;
gap: 15px;
margin-top: 40px;
padding-top: 30px;
border-top: 2px solid #e5e7eb;
}
.page-ctagreement .btn-primary {
flex: 1;
height: 52px;
background: var(--primary);
color: white;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}
.page-ctagreement .btn-primary:hover {
background: var(--primary-hover);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}
.page-ctagreement .btn-secondary {
flex: 1;
height: 52px;
background: white;
color: var(--primary);
border: 2px solid var(--primary);
border-radius: 12px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
}
.page-ctagreement .btn-secondary:hover {
background: rgba(99, 102, 241, 0.05);
transform: translateY(-2px);
}
@media (max-width: 768px) {
.page-ctagreement .agreement-content {
padding: 30px 25px;
}
.page-ctagreement .agreement-header h1 {
font-size: 28px;
}
.page-ctagreement .section-title {
font-size: 19px;
}
.page-ctagreement .action-buttons {
flex-direction: column;
}
}
/* ==========================================
deposit.html - Body Class: .page-deposit
========================================== */
/* Payment Method Cards */
.page-deposit .payment-method-card {
border: 2px solid var(--border);
border-radius: 16px;
padding: 24px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
background: #ffffff;
}
.page-deposit .payment-method-card:hover {
border-color: var(--primary);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
}
.page-deposit .payment-method-card.active {
border-color: var(--primary);
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}
.page-deposit .payment-method-card i {
font-size: 36px;
color: var(--primary);
display: block;
margin-bottom: 10px;
}
.page-deposit .payment-method-card span {
font-size: 15px;
font-weight: 600;
color: #1a1a1a;
}
/* Mobile Responsive - Keep payment methods side by side */
@media (max-width: 576px) {
.page-deposit .payment-methods .row {
display: flex !important;
}
.page-deposit .payment-methods .col-md-6 {
flex: 1;
max-width: 50%;
}
.page-deposit .payment-method-card {
padding: 16px 8px;
}
.page-deposit .payment-method-card i {
font-size: 28px !important;
}
.page-deposit .payment-method-card span {
font-size: 13px !important;
}
/* Fix dropdowns for mobile */
.page-deposit .deposit-select {
height: 50px !important;
padding: 0 40px 0 12px !important;
font-size: 13px !important;
background-position: right 12px center !important;
background-size: 10px 6px !important;
max-width: 100% !important;
word-wrap: normal !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
line-height: 50px !important;
}
.page-deposit .deposit-select option {
font-size: 13px !important;
padding: 10px 12px !important;
background: #ffffff !important;
color: #1a1a1a !important;
line-height: 1.5 !important;
min-height: 40px !important;
}
.page-deposit .deposit-input {
height: 50px !important;
padding: 0 12px !important;
font-size: 13px !important;
}
/* Fix amount input wrapper for mobile */
.page-deposit .amount-input-wrapper input {
height: 50px !important;
padding: 0 75px 0 35px !important;
font-size: 13px !important;
}
.page-deposit .amount-input-wrapper .input-prefix {
left: 12px !important;
font-size: 13px !important;
}
.page-deposit .amount-input-wrapper .input-suffix {
right: 12px !important;
padding: 4px 8px !important;
font-size: 11px !important;
}
.page-deposit .form-label.fw-bold {
font-size: 14px !important;
}
.page-deposit .card-body {
padding: 15px !important;
}
}
/* Form Input Styling - Consistent Design */
.page-deposit .deposit-input {
width: 100%;
height: 56px;
padding: 0 20px;
font-size: 15px;
font-weight: 500;
color: #1a1a1a;
background: #ffffff;
border: 2px solid var(--border);
border-radius: 12px;
transition: all 0.3s ease;
font-family: inherit;
}
.page-deposit .deposit-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
.page-deposit .deposit-input:hover {
border-color: var(--primary);
}
/* Select Dropdown Specific */
.page-deposit .deposit-select {
width: 100%;
height: 56px;
padding: 0 45px 0 20px;
font-size: 15px;
font-weight: 500;
color: #1a1a1a;
background: #ffffff url('data:image/svg+xml;charset=UTF-8,') no-repeat right 20px center;
background-size: 12px 8px;
border: 2px solid var(--border);
border-radius: 12px;
transition: all 0.3s ease;
font-family: inherit;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.page-deposit .deposit-select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
.page-deposit .deposit-select:hover {
border-color: var(--primary);
}
/* Amount Input with prefix/suffix */
.page-deposit .amount-input-wrapper {
position: relative;
width: 100%;
}
.page-deposit .amount-input-wrapper input {
width: 100%;
height: 56px;
padding: 0 100px 0 50px;
font-size: 15px;
font-weight: 500;
color: #1a1a1a;
background: #ffffff;
border: 2px solid var(--border);
border-radius: 12px;
transition: all 0.3s ease;
}
.page-deposit .amount-input-wrapper input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
.page-deposit .amount-input-wrapper input:hover {
border-color: var(--primary);
}
.page-deposit .amount-input-wrapper .input-prefix {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
font-weight: 600;
color: #6c757d;
}
.page-deposit .amount-input-wrapper .input-suffix {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
padding: 6px 12px;
background: #f3f4f6;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
color: #1a1a1a;
}
/* Fee Breakdown */
.page-deposit .fee-breakdown {
background: linear-gradient(135deg, #f8f9fa 0%, #f3f4f6 100%);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
}
.page-deposit .fee-row {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
font-size: 15px;
color: #4b5563;
}
.page-deposit .fee-row.total {
font-size: 17px;
color: var(--primary);
padding-top: 12px;
border-top: 2px solid #e5e7eb;
margin-top: 8px;
}
/* Form Labels */
.page-deposit .form-label.fw-bold {
font-size: 15px;
color: #1f2937;
margin-bottom: 10px;
}
/* Small Text */
.page-deposit small.text-muted {
font-size: 13px;
color: #6b7280;
}
.page-deposit small.text-muted i {
vertical-align: middle;
}
/* ==========================================
deposit-details.html - Body Class: .page-depositdetails
========================================== */
/* Main Instruction Card */
.page-depositdetails .instruction-header {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
border-radius: 16px;
padding: 40px;
text-align: center;
color: white;
margin-bottom: 30px;
}
.page-depositdetails .amount-display {
font-size: 42px;
font-weight: 700;
margin-bottom: 15px;
letter-spacing: -1px;
}
.page-depositdetails .currency-info {
font-size: 20px;
font-weight: 600;
margin-bottom: 25px;
opacity: 0.95;
}
.page-depositdetails .instruction-text {
font-size: 15px;
line-height: 1.8;
opacity: 0.9;
max-width: 700px;
margin: 0 auto;
}
/* Warning Card */
.page-depositdetails .warning-card {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border: 2px solid #fbbf24;
border-radius: 12px;
padding: 20px;
margin-bottom: 30px;
text-align: center;
}
.page-depositdetails .warning-card p {
margin: 0;
font-size: 14px;
color: #92400e;
font-weight: 600;
line-height: 1.6;
}
.page-depositdetails .warning-card .highlight {
color: #b45309;
font-weight: 700;
}
/* Payment Details Container */
.page-depositdetails .payment-details-container {
background: #ffffff;
border: 2px solid var(--border);
border-radius: 16px;
padding: 40px;
margin-bottom: 30px;
}
/* Wallet Address and QR Code Section */
.page-depositdetails .address-qr-wrapper {
display: flex;
gap: 30px;
align-items: flex-start;
margin-bottom: 30px;
}
.page-depositdetails .address-section {
flex: 1;
}
.page-depositdetails .address-label {
font-size: 14px;
font-weight: 600;
color: #6b7280;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.page-depositdetails .address-display {
background: #f8f9fa;
border: 2px dashed #cbd5e1;
border-radius: 12px;
padding: 20px;
margin-bottom: 15px;
word-break: break-all;
font-family: 'Courier New', monospace;
font-size: 16px;
color: #1a1a1a;
font-weight: 600;
}
.page-depositdetails .copy-button {
width: 100%;
height: 52px;
background: var(--primary);
color: white;
border: none;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.page-depositdetails .copy-button:hover {
background: #5568d3;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.page-depositdetails .copy-button i {
margin-right: 8px;
}
/* QR Code Section */
.page-depositdetails .qr-section {
flex-shrink: 0;
text-align: center;
}
.page-depositdetails .qr-code-placeholder {
width: 220px;
height: 220px;
background: #f8f9fa;
border: 2px dashed #cbd5e1;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.page-depositdetails .qr-code-placeholder i {
font-size: 80px;
color: #cbd5e1;
}
.page-depositdetails .qr-label {
font-size: 13px;
color: #6b7280;
font-weight: 500;
}
/* Transaction Info Row */
.page-depositdetails .transaction-info-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid var(--border);
}
.page-depositdetails .transaction-info-row:last-child {
border-bottom: none;
}
.page-depositdetails .info-label {
font-size: 14px;
color: #6b7280;
font-weight: 500;
}
.page-depositdetails .info-value {
font-size: 15px;
color: #1a1a1a;
font-weight: 600;
}
/* Steps Card */
.page-depositdetails .steps-card {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border: 2px solid #0ea5e9;
border-radius: 12px;
padding: 30px;
margin-bottom: 30px;
}
.page-depositdetails .steps-card h6 {
font-size: 16px;
font-weight: 700;
color: #0c4a6e;
margin-bottom: 20px;
display: flex;
align-items: center;
}
.page-depositdetails .steps-card h6 i {
margin-right: 10px;
font-size: 22px;
}
.page-depositdetails .step-item {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
}
.page-depositdetails .step-item:last-child {
margin-bottom: 0;
}
.page-depositdetails .step-number {
width: 28px;
height: 28px;
background: #0ea5e9;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
flex-shrink: 0;
margin-right: 12px;
}
.page-depositdetails .step-text {
font-size: 14px;
color: #0c4a6e;
line-height: 1.6;
padding-top: 4px;
}
/* Admin Tag Message */
.page-depositdetails .admin-tag-message {
background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
border: 2px solid #3b82f6;
border-radius: 12px;
padding: 20px;
margin-bottom: 30px;
text-align: center;
}
.page-depositdetails .admin-tag-message p {
margin: 0;
font-size: 14px;
color: #1e40af;
font-weight: 600;
line-height: 1.7;
}
/* Timer Section - Reduced */
.page-depositdetails .timer-section {
background: #ffffff;
border: 2px solid var(--border);
border-radius: 12px;
padding: 20px;
text-align: center;
margin-bottom: 20px;
}
.page-depositdetails .timer-label {
font-size: 12px;
font-weight: 600;
color: #6b7280;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.page-depositdetails .timer-display {
font-size: 38px;
font-weight: 700;
color: var(--primary);
margin-bottom: 6px;
letter-spacing: 2px;
}
.page-depositdetails .timer-warning {
font-size: 12px;
color: #6b7280;
display: flex;
align-items: center;
justify-content: center;
}
.page-depositdetails .timer-warning i {
margin-right: 5px;
font-size: 14px;
}
/* Action Buttons - Increased */
.page-depositdetails .action-buttons {
display: flex;
gap: 15px;
}
.page-depositdetails .action-buttons .btn {
flex: 1;
height: 64px;
font-size: 16px;
font-weight: 600;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
border-width: 2px;
}
.page-depositdetails .action-buttons .btn i {
margin-right: 10px;
font-size: 22px;
}
/* Responsive */
@media (max-width: 992px) {
.page-depositdetails .address-qr-wrapper {
flex-direction: column;
align-items: center;
}
.page-depositdetails .qr-section {
order: -1;
margin-bottom: 20px;
}
.page-depositdetails .address-section {
width: 100%;
}
}
@media (max-width: 768px) {
.page-depositdetails .amount-display {
font-size: 32px;
}
.page-depositdetails .currency-info {
font-size: 18px;
}
.page-depositdetails .timer-display {
font-size: 42px;
}
.page-depositdetails .payment-details-container {
padding: 25px;
}
.page-depositdetails .action-buttons {
flex-direction: column;
}
}
/* ==========================================
deposit-gateway-details.html - Body Class: .page-depositgateway
========================================== */
/* Main Instruction Card */
.page-depositgateway .instruction-header {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
border-radius: 16px;
padding: 40px;
text-align: center;
color: white;
margin-bottom: 30px;
}
.page-depositgateway .amount-display {
font-size: 42px;
font-weight: 700;
margin-bottom: 15px;
letter-spacing: -1px;
}
.page-depositgateway .payment-method-info {
font-size: 20px;
font-weight: 600;
margin-bottom: 25px;
opacity: 0.95;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.page-depositgateway .payment-method-info i {
font-size: 28px;
}
.page-depositgateway .instruction-text {
font-size: 15px;
line-height: 1.8;
opacity: 0.9;
max-width: 700px;
margin: 0 auto;
}
/* Warning Card */
.page-depositgateway .warning-card {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border: 2px solid #fbbf24;
border-radius: 12px;
padding: 20px;
margin-bottom: 30px;
text-align: center;
}
.page-depositgateway .warning-card p {
margin: 0;
font-size: 14px;
color: #92400e;
font-weight: 600;
line-height: 1.6;
}
.page-depositgateway .warning-card .highlight {
color: #b45309;
font-weight: 700;
}
/* Payment Details Container */
.page-depositgateway .payment-details-container {
background: #ffffff;
border: 2px solid var(--border);
border-radius: 16px;
padding: 40px;
margin-bottom: 30px;
}
/* Payment Information Section */
.page-depositgateway .payment-info-section {
margin-bottom: 30px;
}
.page-depositgateway .payment-info-label {
font-size: 14px;
font-weight: 600;
color: #6b7280;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.page-depositgateway .payment-info-display {
background: #f8f9fa;
border: 2px dashed #cbd5e1;
border-radius: 12px;
padding: 20px;
margin-bottom: 15px;
font-size: 16px;
color: #1a1a1a;
font-weight: 600;
}
.page-depositgateway .payment-info-display.large {
font-size: 20px;
text-align: center;
padding: 25px;
}
.page-depositgateway .copy-button {
width: 100%;
height: 52px;
background: var(--primary);
color: white;
border: none;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.page-depositgateway .copy-button:hover {
background: #5568d3;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.page-depositgateway .copy-button i {
margin-right: 8px;
}
/* Transaction Info Row */
.page-depositgateway .transaction-info-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid var(--border);
}
.page-depositgateway .transaction-info-row:last-child {
border-bottom: none;
}
.page-depositgateway .info-label {
font-size: 14px;
color: #6b7280;
font-weight: 500;
}
.page-depositgateway .info-value {
font-size: 15px;
color: #1a1a1a;
font-weight: 600;
}
/* Admin Tag Message */
.page-depositgateway .admin-tag-message {
background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
border: 2px solid #3b82f6;
border-radius: 12px;
padding: 20px;
margin-bottom: 30px;
text-align: center;
}
.page-depositgateway .admin-tag-message p {
margin: 0;
font-size: 14px;
color: #1e40af;
font-weight: 600;
line-height: 1.7;
}
/* Steps Card */
.page-depositgateway .steps-card {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border: 2px solid #0ea5e9;
border-radius: 12px;
padding: 30px;
margin-bottom: 30px;
}
.page-depositgateway .steps-card h6 {
font-size: 16px;
font-weight: 700;
color: #0c4a6e;
margin-bottom: 20px;
display: flex;
align-items: center;
}
.page-depositgateway .steps-card h6 i {
margin-right: 10px;
font-size: 22px;
}
.page-depositgateway .step-item {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
}
.page-depositgateway .step-item:last-child {
margin-bottom: 0;
}
.page-depositgateway .step-number {
width: 28px;
height: 28px;
background: #0ea5e9;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
flex-shrink: 0;
margin-right: 12px;
}
.page-depositgateway .step-text {
font-size: 14px;
color: #0c4a6e;
line-height: 1.6;
padding-top: 4px;
}
/* Action Buttons */
.page-depositgateway .action-buttons {
display: flex;
gap: 15px;
}
.page-depositgateway .action-buttons .btn {
flex: 1;
height: 64px;
font-size: 16px;
font-weight: 600;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
border-width: 2px;
}
.page-depositgateway .action-buttons .btn i {
margin-right: 10px;
font-size: 22px;
}
/* Responsive */
@media (max-width: 768px) {
.page-depositgateway .amount-display {
font-size: 32px;
}
.page-depositgateway .payment-method-info {
font-size: 18px;
}
.page-depositgateway .payment-details-container {
padding: 25px;
}
.page-depositgateway .action-buttons {
flex-direction: column;
}
}
/* ==========================================
deposit-history.html - Body Class: .page-deposithistory
========================================== */
:root {
--primary: #6366F1;
--success: #10b981;
--danger: #ef4444;
--warning: #f59e0b;
--info: #3b82f6;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-500: #6b7280;
--gray-700: #374151;
--gray-900: #111827;
}
body.page-deposithistory {
background: var(--body-bg);
}
/* Page Header */
.page-deposithistory .page-header {
background: var(--card);
border-radius: 16px;
border: 1px solid var(--gray-200);
padding: 24px;
margin-bottom: 20px;
}
.page-deposithistory .page-header-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.page-deposithistory .page-header h3 {
font-size: 24px;
font-weight: 700;
color: var(--gray-900);
margin: 0;
}
.page-deposithistory .page-header-subtitle {
font-size: 14px;
color: var(--gray-500);
margin-top: 4px;
}
.page-deposithistory .header-actions {
display: flex;
gap: 12px;
}
/* Filters Section */
.page-deposithistory .filters-card {
background: var(--card);
border-radius: 16px;
border: 1px solid var(--gray-200);
padding: 24px;
margin-bottom: 20px;
}
.page-deposithistory .filters-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr auto;
gap: 16px;
align-items: end;
}
.page-deposithistory .filters-row .filter-group:last-child {
grid-column: span 1;
}
.page-deposithistory .filter-group {
display: flex;
flex-direction: column;
}
.page-deposithistory .filter-label {
font-size: 13px;
font-weight: 600;
color: var(--gray-700);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.page-deposithistory .filter-input,
.page-deposithistory .filter-select {
padding: 12px 16px;
border: 2px solid var(--gray-200);
border-radius: 10px;
font-size: 14px;
font-weight: 500;
transition: all 0.3s;
}
.page-deposithistory .filter-input:focus,
.page-deposithistory .filter-select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.page-deposithistory .search-wrapper {
position: relative;
}
.page-deposithistory .search-wrapper i {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--gray-500);
font-size: 20px;
}
.page-deposithistory .search-wrapper input {
padding-left: 48px;
}
.page-deposithistory .filter-btn {
padding: 12px 24px;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
gap: 8px;
justify-content: center;
}
.page-deposithistory .filter-btn.primary {
background: var(--primary);
color: white;
}
.page-deposithistory .filter-btn.primary:hover {
background: #5568d3;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.page-deposithistory .filter-btn.secondary {
background: var(--gray-100);
color: var(--gray-700);
}
.page-deposithistory .filter-btn.secondary:hover {
background: var(--gray-200);
}
/* Deposits Table */
.page-deposithistory .deposits-card {
background: var(--card);
border-radius: 16px;
border: 1px solid var(--gray-200);
overflow: hidden;
}
.page-deposithistory .deposits-table {
width: 100%;
border-collapse: collapse;
}
.page-deposithistory .deposits-table thead {
background: var(--gray-50);
}
.page-deposithistory .deposits-table th {
padding: 16px 20px;
text-align: left;
font-size: 12px;
font-weight: 700;
color: var(--gray-700);
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 2px solid var(--gray-200);
}
.page-deposithistory .deposits-table td {
padding: 20px;
font-size: 14px;
color: var(--gray-900);
border-bottom: 1px solid var(--gray-100);
}
.page-deposithistory .deposits-table tbody tr {
transition: all 0.2s;
}
.page-deposithistory .deposits-table tbody tr:hover {
background: var(--gray-50);
}
/* Status Badges */
.page-deposithistory .status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
}
.page-deposithistory .status-badge i {
font-size: 16px;
}
.page-deposithistory .status-badge.success {
background: rgba(16, 185, 129, 0.15);
color: var(--success);
}
.page-deposithistory .status-badge.pending {
background: rgba(245, 158, 11, 0.15);
color: var(--warning);
}
.page-deposithistory .status-badge.failed {
background: rgba(239, 68, 68, 0.15);
color: var(--danger);
}
/* Currency Badge */
.page-deposithistory .currency-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--gray-100);
border-radius: 10px;
font-weight: 600;
}
.page-deposithistory .currency-icon {
width: 24px;
height: 24px;
border-radius: 50%;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 10px;
font-weight: 700;
}
/* Amount Display */
.page-deposithistory .amount-display {
font-size: 16px;
font-weight: 700;
color: var(--gray-900);
}
.page-deposithistory .amount-usd {
font-size: 12px;
color: var(--gray-500);
margin-top: 2px;
}
/* Action Buttons */
.page-deposithistory .action-btn {
padding: 8px 12px;
border: 2px solid var(--gray-200);
border-radius: 8px;
background: white;
color: var(--gray-700);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 4px;
text-decoration: none;
}
.page-deposithistory .action-btn:hover {
border-color: var(--primary);
color: var(--primary);
transform: translateY(-2px);
}
.page-deposithistory .action-btn i {
font-size: 16px;
}
/* Empty State */
.page-deposithistory .empty-state {
text-align: center;
padding: 80px 20px;
}
.page-deposithistory .empty-state i {
font-size: 80px;
color: var(--gray-200);
margin-bottom: 20px;
}
.page-deposithistory .empty-state h4 {
font-size: 20px;
font-weight: 700;
color: var(--gray-900);
margin-bottom: 12px;
}
.page-deposithistory .empty-state p {
font-size: 14px;
color: var(--gray-500);
margin-bottom: 24px;
}
/* Pagination */
.page-deposithistory .pagination-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-top: 1px solid var(--gray-200);
}
.page-deposithistory .pagination-info {
font-size: 14px;
color: var(--gray-500);
}
.page-deposithistory .pagination {
display: flex;
gap: 8px;
}
.page-deposithistory .page-btn {
width: 40px;
height: 40px;
border: 2px solid var(--gray-200);
border-radius: 8px;
background: white;
color: var(--gray-700);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.page-deposithistory .page-btn:hover {
border-color: var(--primary);
color: var(--primary);
}
.page-deposithistory .page-btn.active {
background: var(--primary);
border-color: var(--primary);
color: white;
}
.page-deposithistory .page-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Mobile Responsive */
@media (max-width: 992px) {
.page-deposithistory .deposits-table {
display: block;
overflow-x: auto;
}
.page-deposithistory .page-header-content {
flex-direction: column;
align-items: stretch;
}
.page-deposithistory .header-actions {
width: 100%;
}
.page-deposithistory .header-actions .btn {
flex: 1;
}
}
@media (max-width: 768px) {
.page-deposithistory .filters-row {
grid-template-columns: 1fr;
}
.page-deposithistory .pagination-wrapper {
flex-direction: column;
gap: 16px;
}
}
/* ==========================================
deposit-success-crypto.html - Body Class: .page-depositsuccess
========================================== */
/* Status Card */
.page-depositsuccess .status-card {
background: #ffffff;
border: 2px solid var(--border);
border-radius: 16px;
padding: 50px;
text-align: center;
margin-bottom: 30px;
}
.page-depositsuccess .status-icon-wrapper {
width: 120px;
height: 120px;
margin: 0 auto 25px;
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: successPulseDeposit 1s ease-out;
}
.page-depositsuccess .status-icon {
font-size: 64px;
color: #10b981;
}
@keyframes successPulseDeposit {
0% {
transform: scale(0.8);
opacity: 0;
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
opacity: 1;
}
}
.page-depositsuccess .status-title {
font-size: 28px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 15px;
}
.page-depositsuccess .status-message {
font-size: 16px;
color: #6b7280;
line-height: 1.7;
max-width: 600px;
margin: 0 auto 25px;
}
.page-depositsuccess .status-badge {
display: inline-flex;
align-items: center;
padding: 10px 20px;
background: #d1fae5;
border: 2px solid #10b981;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
color: #065f46;
margin-bottom: 25px;
}
.page-depositsuccess .status-badge i {
margin-right: 8px;
font-size: 18px;
}
/* Amount Display Card */
.page-depositsuccess .amount-display-card {
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
border: 2px solid #10b981;
border-radius: 16px;
padding: 30px;
margin-bottom: 30px;
text-align: center;
}
.page-depositsuccess .amount-label {
font-size: 14px;
color: #065f46;
font-weight: 600;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.page-depositsuccess .amount-value {
font-size: 48px;
font-weight: 700;
color: #10b981;
margin-bottom: 10px;
}
.page-depositsuccess .amount-description {
font-size: 14px;
color: #065f46;
}
/* Transaction Details Card */
.page-depositsuccess .transaction-details-card {
background: #ffffff;
border: 2px solid var(--border);
border-radius: 16px;
padding: 30px;
margin-bottom: 30px;
}
.page-depositsuccess .transaction-details-card h5 {
font-size: 18px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 20px;
}
.page-depositsuccess .detail-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid var(--border);
}
.page-depositsuccess .detail-row:last-child {
border-bottom: none;
}
.page-depositsuccess .detail-label {
font-size: 14px;
color: #6b7280;
font-weight: 500;
}
.page-depositsuccess .detail-value {
font-size: 15px;
color: #1a1a1a;
font-weight: 600;
text-align: right;
}
.page-depositsuccess .detail-value.success {
color: #10b981;
}
/* Action Buttons */
.page-depositsuccess .action-buttons {
display: flex;
gap: 15px;
}
.page-depositsuccess .action-buttons .btn {
flex: 1;
height: 64px;
font-size: 16px;
font-weight: 600;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
border-width: 2px;
}
.page-depositsuccess .action-buttons .btn i {
margin-right: 10px;
font-size: 22px;
}
/* Responsive */
@media (max-width: 768px) {
.page-depositsuccess .status-card {
padding: 35px 25px;
}
.page-depositsuccess .status-title {
font-size: 24px;
}
.page-depositsuccess .amount-value {
font-size: 36px;
}
.page-depositsuccess .action-buttons {
flex-direction: column;
}
}
/* ==========================================
deposit-success-gateway.html - Body Class: .page-depositsuccessgw
========================================== */
/* Status Card */
.page-depositsuccessgw .status-card {
background: #ffffff;
border: 2px solid var(--border);
border-radius: 16px;
padding: 50px;
text-align: center;
margin-bottom: 30px;
}
.page-depositsuccessgw .status-icon-wrapper {
width: 120px;
height: 120px;
margin: 0 auto 25px;
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: successPulseGw 1s ease-out;
}
.page-depositsuccessgw .status-icon {
font-size: 64px;
color: #10b981;
}
@keyframes successPulseGw {
0% {
transform: scale(0.8);
opacity: 0;
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
opacity: 1;
}
}
.page-depositsuccessgw .status-title {
font-size: 28px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 15px;
}
.page-depositsuccessgw .status-message {
font-size: 16px;
color: #6b7280;
line-height: 1.7;
max-width: 600px;
margin: 0 auto 25px;
}
.page-depositsuccessgw .status-badge {
display: inline-flex;
align-items: center;
padding: 10px 20px;
background: #d1fae5;
border: 2px solid #10b981;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
color: #065f46;
margin-bottom: 25px;
}
.page-depositsuccessgw .status-badge i {
margin-right: 8px;
font-size: 18px;
}
/* Amount Display Card */
.page-depositsuccessgw .amount-display-card {
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
border: 2px solid #10b981;
border-radius: 16px;
padding: 30px;
margin-bottom: 30px;
text-align: center;
}
.page-depositsuccessgw .amount-label {
font-size: 14px;
color: #065f46;
font-weight: 600;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.page-depositsuccessgw .amount-value {
font-size: 48px;
font-weight: 700;
color: #10b981;
margin-bottom: 10px;
}
.page-depositsuccessgw .amount-description {
font-size: 14px;
color: #065f46;
}
/* Transaction Details Card */
.page-depositsuccessgw .transaction-details-card {
background: #ffffff;
border: 2px solid var(--border);
border-radius: 16px;
padding: 30px;
margin-bottom: 30px;
}
.page-depositsuccessgw .transaction-details-card h5 {
font-size: 18px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 20px;
}
.page-depositsuccessgw .detail-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid var(--border);
}
.page-depositsuccessgw .detail-row:last-child {
border-bottom: none;
}
.page-depositsuccessgw .detail-label {
font-size: 14px;
color: #6b7280;
font-weight: 500;
}
.page-depositsuccessgw .detail-value {
font-size: 15px;
color: #1a1a1a;
font-weight: 600;
text-align: right;
}
.page-depositsuccessgw .detail-value.success {
color: #10b981;
}
/* Action Buttons */
.page-depositsuccessgw .action-buttons {
display: flex;
gap: 15px;
}
.page-depositsuccessgw .action-buttons .btn {
flex: 1;
height: 64px;
font-size: 16px;
font-weight: 600;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
border-width: 2px;
}
.page-depositsuccessgw .action-buttons .btn i {
margin-right: 10px;
font-size: 22px;
}
/* Responsive */
@media (max-width: 768px) {
.page-depositsuccessgw .status-card {
padding: 35px 25px;
}
.page-depositsuccessgw .status-title {
font-size: 24px;
}
.page-depositsuccessgw .amount-value {
font-size: 36px;
}
.page-depositsuccessgw .action-buttons {
flex-direction: column;
}
}
/* ==========================================
deposit-pending-crypto.html - Body Class: .page-depositpending
========================================== */
/* Status Card */
.page-depositpending .status-card {
background: #ffffff;
border: 2px solid var(--border);
border-radius: 16px;
padding: 50px;
text-align: center;
margin-bottom: 30px;
}
.page-depositpending .status-icon-wrapper {
width: 120px;
height: 120px;
margin: 0 auto 25px;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: pulsePending 2s ease-in-out infinite;
}
.page-depositpending .status-icon {
font-size: 64px;
color: #f59e0b;
}
@keyframes pulsePending {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 0 20px rgba(245, 158, 11, 0);
}
}
.page-depositpending .status-title {
font-size: 28px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 15px;
}
.page-depositpending .status-message {
font-size: 16px;
color: #6b7280;
line-height: 1.7;
max-width: 600px;
margin: 0 auto 25px;
}
.page-depositpending .status-badge {
display: inline-flex;
align-items: center;
padding: 10px 20px;
background: #fef3c7;
border: 2px solid #fbbf24;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
color: #92400e;
margin-bottom: 25px;
}
.page-depositpending .status-badge i {
margin-right: 8px;
font-size: 18px;
animation: spinPending 2s linear infinite;
}
@keyframes spinPending {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Transaction Details Card */
.page-depositpending .transaction-details-card {
background: #ffffff;
border: 2px solid var(--border);
border-radius: 16px;
padding: 30px;
margin-bottom: 30px;
}
.page-depositpending .transaction-details-card h5 {
font-size: 18px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 20px;
}
.page-depositpending .detail-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid var(--border);
}
.page-depositpending .detail-row:last-child {
border-bottom: none;
}
.page-depositpending .detail-label {
font-size: 14px;
color: #6b7280;
font-weight: 500;
}
.page-depositpending .detail-value {
font-size: 15px;
color: #1a1a1a;
font-weight: 600;
text-align: right;
}
/* Upload Proof Section */
.page-depositpending .upload-proof-card {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border: 2px solid #0ea5e9;
border-radius: 16px;
padding: 30px;
margin-bottom: 30px;
text-align: center;
}
.page-depositpending .upload-proof-card h6 {
font-size: 16px;
font-weight: 700;
color: #0c4a6e;
margin-bottom: 15px;
}
.page-depositpending .upload-proof-card p {
font-size: 14px;
color: #0c4a6e;
margin-bottom: 20px;
line-height: 1.6;
}
.page-depositpending .upload-button {
display: inline-flex;
align-items: center;
padding: 14px 30px;
background: #0ea5e9;
color: white;
border: none;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.page-depositpending .upload-button:hover {
background: #4F46E5;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}
.page-depositpending .upload-button i {
margin-right: 10px;
font-size: 20px;
}
.page-depositpending .file-input-wrapper {
display: none;
}
.page-depositpending .uploaded-file-info {
margin-top: 15px;
padding: 12px;
background: #ffffff;
border-radius: 8px;
font-size: 13px;
color: #0c4a6e;
display: none;
}
.page-depositpending .uploaded-file-info.show {
display: block;
}
/* Action Buttons */
.page-depositpending .action-buttons {
display: flex;
gap: 15px;
}
.page-depositpending .action-buttons .btn {
flex: 1;
height: 64px;
font-size: 16px;
font-weight: 600;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
border-width: 2px;
}
.page-depositpending .action-buttons .btn i {
margin-right: 10px;
font-size: 22px;
}
/* Responsive */
@media (max-width: 768px) {
.page-depositpending .status-card {
padding: 35px 25px;
}
.page-depositpending .status-title {
font-size: 24px;
}
.page-depositpending .action-buttons {
flex-direction: column;
}
}
/* Dark Mode for Deposit Pending Crypto */
[data-theme-version="dark"] .page-depositpending .transaction-details-card {
background: #1e293b;
border-color: #334155;
}
[data-theme-version="dark"] .page-depositpending .transaction-details-card h5 {
color: #f1f5f9;
}
[data-theme-version="dark"] .page-depositpending .detail-row {
border-color: #334155;
}
[data-theme-version="dark"] .page-depositpending .detail-label {
color: #94a3b8;
}
[data-theme-version="dark"] .page-depositpending .detail-value {
color: #e2e8f0;
}
[data-theme-version="dark"] .page-depositpending .upload-proof-card {
background: linear-gradient(135deg, #1e3a5f 0%, #1e3a8a 100%);
border-color: #3b82f6;
}
[data-theme-version="dark"] .page-depositpending .upload-proof-card h6 {
color: #93c5fd;
}
[data-theme-version="dark"] .page-depositpending .upload-proof-card p {
color: #bfdbfe;
}
[data-theme-version="dark"] .page-depositpending .uploaded-file-info {
background: #334155;
color: #e2e8f0;
}
/* Modal dark mode */
[data-theme-version="dark"] .page-depositpending .modal-content {
background: #1e293b;
border-color: #334155;
}
[data-theme-version="dark"] .page-depositpending .modal-header {
border-color: #334155;
}
[data-theme-version="dark"] .page-depositpending .modal-header .modal-title {
color: #f1f5f9;
}
[data-theme-version="dark"] .page-depositpending .modal-footer {
border-color: #334155;
}
[data-theme-version="dark"] .page-depositpending .form-label {
color: #e2e8f0;
}
[data-theme-version="dark"] .page-depositpending .form-control {
background: #0f172a;
border-color: #334155;
color: #f1f5f9;
}
[data-theme-version="dark"] .page-depositpending .form-control:focus {
background: #0f172a;
border-color: #6366f1;
color: #f1f5f9;
}
[data-theme-version="dark"] .page-depositpending .form-text {
color: #94a3b8;
}
/* ==========================================
deposit-pending-gateway.html - Body Class: .page-depositpendinggw
========================================== */
/* Status Card */
.page-depositpendinggw .status-card {
background: #ffffff;
border: 2px solid var(--border);
border-radius: 16px;
padding: 50px;
text-align: center;
margin-bottom: 30px;
}
.page-depositpendinggw .status-icon-wrapper {
width: 120px;
height: 120px;
margin: 0 auto 25px;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: pulsePendingGw 2s ease-in-out infinite;
}
.page-depositpendinggw .status-icon {
font-size: 64px;
color: #f59e0b;
}
@keyframes pulsePendingGw {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 0 20px rgba(245, 158, 11, 0);
}
}
.page-depositpendinggw .status-title {
font-size: 28px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 15px;
}
.page-depositpendinggw .status-message {
font-size: 16px;
color: #6b7280;
line-height: 1.7;
max-width: 600px;
margin: 0 auto 25px;
}
.page-depositpendinggw .status-badge {
display: inline-flex;
align-items: center;
padding: 10px 20px;
background: #fef3c7;
border: 2px solid #fbbf24;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
color: #92400e;
margin-bottom: 25px;
}
.page-depositpendinggw .status-badge i {
margin-right: 8px;
font-size: 18px;
animation: spinPendingGw 2s linear infinite;
}
@keyframes spinPendingGw {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Info Card */
.page-depositpendinggw .info-card {
background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
border: 2px solid #3b82f6;
border-radius: 12px;
padding: 25px;
margin-bottom: 30px;
text-align: center;
}
.page-depositpendinggw .info-card p {
margin: 0;
font-size: 14px;
color: #1e40af;
line-height: 1.7;
}
/* Transaction Details Card */
.page-depositpendinggw .transaction-details-card {
background: #ffffff;
border: 2px solid var(--border);
border-radius: 16px;
padding: 30px;
margin-bottom: 30px;
}
.page-depositpendinggw .transaction-details-card h5 {
font-size: 18px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 20px;
}
.page-depositpendinggw .detail-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid var(--border);
}
.page-depositpendinggw .detail-row:last-child {
border-bottom: none;
}
.page-depositpendinggw .detail-label {
font-size: 14px;
color: #6b7280;
font-weight: 500;
}
.page-depositpendinggw .detail-value {
font-size: 15px;
color: #1a1a1a;
font-weight: 600;
text-align: right;
}
/* Upload Proof Section */
.page-depositpendinggw .upload-proof-card {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border: 2px solid #0ea5e9;
border-radius: 16px;
padding: 30px;
margin-bottom: 30px;
text-align: center;
}
.page-depositpendinggw .upload-proof-card h6 {
font-size: 16px;
font-weight: 700;
color: #0c4a6e;
margin-bottom: 15px;
}
.page-depositpendinggw .upload-proof-card p {
font-size: 14px;
color: #0c4a6e;
margin-bottom: 20px;
line-height: 1.6;
}
.page-depositpendinggw .upload-button {
display: inline-flex;
align-items: center;
padding: 14px 30px;
background: #0ea5e9;
color: white;
border: none;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.page-depositpendinggw .upload-button:hover {
background: #4F46E5;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}
.page-depositpendinggw .upload-button i {
margin-right: 10px;
font-size: 20px;
}
.page-depositpendinggw .file-input-wrapper {
display: none;
}
.page-depositpendinggw .uploaded-file-info {
margin-top: 15px;
padding: 12px;
background: #ffffff;
border-radius: 8px;
font-size: 13px;
color: #0c4a6e;
display: none;
}
.page-depositpendinggw .uploaded-file-info.show {
display: block;
}
/* Action Buttons */
.page-depositpendinggw .action-buttons {
display: flex;
gap: 15px;
}
.page-depositpendinggw .action-buttons .btn {
flex: 1;
height: 64px;
font-size: 16px;
font-weight: 600;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
border-width: 2px;
}
.page-depositpendinggw .action-buttons .btn i {
margin-right: 10px;
font-size: 22px;
}
/* Responsive */
@media (max-width: 768px) {
.page-depositpendinggw .status-card {
padding: 35px 25px;
}
.page-depositpendinggw .status-title {
font-size: 24px;
}
.page-depositpendinggw .action-buttons {
flex-direction: column;
}
}
/* ==========================================
planning.html - Body Class: .page-planning
========================================== */
/* Plans Page Styles */
.page-planning .plans-container {
padding: 30px 0;
}
.page-planning .plan-section {
margin-bottom: 60px;
}
.page-planning .plan-section-title {
text-align: center;
font-size: 28px;
font-weight: 600;
margin-bottom: 40px;
color: #2a353a;
}
.page-planning .plans-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
margin-bottom: 40px;
}
.page-planning .plan-card {
background: var(--card);
border-radius: 16px;
padding: 32px 24px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
border: 2px solid #e0e0e0;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.page-planning .plan-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.page-planning .plan-tier {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: #666;
margin-bottom: 16px;
text-align: center;
}
.page-planning .plan-price {
font-size: 36px;
font-weight: 700;
color: var(--primary);
text-align: center;
margin-bottom: 32px;
}
.page-planning .plan-features {
list-style: none;
padding: 0;
margin: 0 0 32px 0;
}
.page-planning .plan-features li {
display: flex;
align-items: center;
padding: 12px 0;
font-size: 14px;
color: #2a353a;
border-bottom: 1px solid #f0f0f0;
}
.page-planning .plan-features li:last-child {
border-bottom: none;
}
.page-planning .plan-features li i {
color: #4caf50;
font-size: 20px;
margin-right: 12px;
flex-shrink: 0;
}
.page-planning .plan-button,
.page-planning a.plan-button {
width: 100%;
padding: 14px 24px;
background: var(--primary);
color: #ffffff !important;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
text-decoration: none;
display: block;
text-align: center;
}
.page-planning .plan-button:hover,
.page-planning a.plan-button:hover,
.page-planning a.plan-button:visited {
background: var(--primary-hover);
color: #ffffff !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
text-decoration: none;
}
/* Bitcoin Dropdown for Mining */
.page-planning .plan-dropdown {
width: 100%;
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 14px;
margin-bottom: 24px;
background: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.2s ease;
}
.page-planning .plan-dropdown:hover {
border-color: var(--primary);
}
.page-planning .plan-dropdown-wrapper {
width: 100%;
margin-bottom: 24px;
}
.page-planning .plan-dropdown-select {
width: 100%;
height: 56px;
padding: 0 45px 0 20px;
font-size: 14px;
font-weight: 500;
color: #1a1a1a;
background: #ffffff url('data:image/svg+xml;charset=UTF-8,') no-repeat right 20px center;
background-size: 12px 8px;
border: 2px solid var(--border);
border-radius: 12px;
transition: all 0.3s ease;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.page-planning .plan-dropdown-select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
.page-planning .plan-dropdown-select:hover {
border-color: var(--primary);
}
.page-planning .settings-select {
width: 100%;
height: 42px;
padding: 0 38px 0 14px;
font-size: 14px;
font-weight: 500;
color: #1a1a1a;
background: #ffffff;
border: 2px solid var(--border);
border-radius: 10px;
transition: all 0.3s ease;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
}
.page-planning .settings-select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}
.page-planning .settings-select:hover {
border-color: var(--primary);
}
.page-planning .plan-card select,
.page-planning .plan-card .form-control {
position: relative;
z-index: 1;
}
.page-planning .plans-grid {
position: relative;
z-index: auto;
}
/* Staking Table */
.page-planning .staking-table-container {
background: var(--card);
border-radius: 16px;
padding: 32px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
border: 2px solid #e0e0e0;
}
.page-planning .staking-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.page-planning .staking-table thead th {
background: #f8f9fa;
padding: 16px;
text-align: left;
font-weight: 600;
font-size: 14px;
color: #2a353a;
border-bottom: 2px solid #e0e0e0;
}
.page-planning .staking-table thead th:first-child {
border-radius: 8px 0 0 0;
}
.page-planning .staking-table thead th:last-child {
border-radius: 0 8px 0 0;
}
.page-planning .staking-table tbody tr {
transition: background 0.2s ease;
}
.page-planning .staking-table tbody tr:hover {
background: #f8f9fa;
}
.page-planning .staking-table tbody td {
padding: 16px;
border-bottom: 1px solid #e0e0e0;
font-size: 14px;
color: #2a353a;
}
.page-planning .staking-table tbody tr:last-child td:first-child {
border-radius: 0 0 0 8px;
}
.page-planning .staking-table tbody tr:last-child td:last-child {
border-radius: 0 0 8px 0;
}
.page-planning .staking-table tbody td i {
color: #4caf50;
font-size: 20px;
}
.page-planning .staking-plan-button {
width: 100%;
padding: 14px 24px;
background: var(--primary);
color: white;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 24px;
}
.page-planning .staking-plan-button:hover {
background: var(--primary-hover);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
@media (max-width: 768px) {
.page-planning .plans-grid {
grid-template-columns: 1fr;
}
.page-planning .plan-section-title {
font-size: 24px;
}
.page-planning .plan-price {
font-size: 28px;
}
.page-planning .staking-table-container {
overflow-x: auto;
}
}
/* ==========================================
plan-deposit.html - Body Class: .page-plandeposit
========================================== */
/* Plan Info Banner */
.page-plandeposit .plan-info-banner {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
border-radius: 16px;
padding: 32px;
margin-bottom: 30px;
color: white;
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
}
.page-plandeposit .plan-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.2);
padding: 6px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 16px;
}
.page-plandeposit .plan-info-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.page-plandeposit .plan-name {
font-size: 28px;
font-weight: 700;
margin: 0;
}
.page-plandeposit .plan-price-display {
font-size: 36px;
font-weight: 700;
text-align: right;
}
.page-plandeposit .plan-features-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-top: 24px;
}
.page-plandeposit .plan-feature-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}
.page-plandeposit .plan-feature-item i {
font-size: 20px;
}
/* Payment Method Cards */
.page-plandeposit .payment-method-card {
border: 2px solid var(--border);
border-radius: 16px;
padding: 24px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
background: #ffffff;
}
.page-plandeposit .payment-method-card:hover {
border-color: var(--primary);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
}
.page-plandeposit .payment-method-card.active {
border-color: var(--primary);
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}
.page-plandeposit .payment-method-card i {
font-size: 36px;
color: var(--primary);
display: block;
margin-bottom: 10px;
}
.page-plandeposit .payment-method-card span {
font-size: 15px;
font-weight: 600;
color: #1a1a1a;
}
/* Form Input Styling */
.page-plandeposit .deposit-select {
width: 100%;
height: 56px;
padding: 0 45px 0 20px;
font-size: 15px;
font-weight: 500;
color: #1a1a1a;
background: #ffffff url('data:image/svg+xml;charset=UTF-8,') no-repeat right 20px center;
background-size: 12px 8px;
border: 2px solid var(--border);
border-radius: 12px;
transition: all 0.3s ease;
font-family: inherit;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.page-plandeposit .deposit-select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
.page-plandeposit .deposit-select:hover {
border-color: var(--primary);
}
/* Form Labels */
.page-plandeposit .form-label.fw-bold {
font-size: 15px;
color: #1f2937;
margin-bottom: 10px;
}
/* Small Text */
.page-plandeposit small.text-muted {
font-size: 13px;
color: #6b7280;
}
.page-plandeposit small.text-muted i {
vertical-align: middle;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.page-plandeposit .plan-info-header {
flex-direction: column;
align-items: flex-start;
}
.page-plandeposit .plan-price-display {
text-align: left;
margin-top: 16px;
}
.page-plandeposit .plan-info-banner {
padding: 24px;
}
.page-plandeposit .payment-methods .row {
display: flex !important;
}
.page-plandeposit .payment-methods .col-md-6 {
flex: 1;
max-width: 50%;
}
.page-plandeposit .payment-method-card {
padding: 16px 8px;
}
.page-plandeposit .payment-method-card i {
font-size: 28px !important;
}
.page-plandeposit .payment-method-card span {
font-size: 13px !important;
}
.page-plandeposit .deposit-select {
height: 50px !important;
padding: 0 40px 0 12px !important;
font-size: 13px !important;
}
}
/* ==========================================
plan-deposit-details.html - Body Class: .page-plandepositdet
========================================== */
/* Plan Info Banner */
.page-plandepositdet .plan-info-banner {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
border-radius: 16px;
padding: 32px;
margin-bottom: 30px;
color: white;
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
}
.page-plandepositdet .plan-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.2);
padding: 6px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 16px;
}
.page-plandepositdet .plan-info-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.page-plandepositdet .plan-name {
font-size: 28px;
font-weight: 700;
margin: 0;
}
.page-plandepositdet .plan-price-display {
font-size: 36px;
font-weight: 700;
text-align: right;
}
/* Payment Details Section */
.page-plandepositdet .payment-detail-box {
background: linear-gradient(135deg, #f8f9fa 0%, #f3f4f6 100%);
border: 2px solid var(--border);
border-radius: 16px;
padding: 24px;
margin-bottom: 24px;
}
.page-plandepositdet .payment-detail-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #e0e0e0;
}
.page-plandepositdet .payment-detail-row:last-child {
border-bottom: none;
}
.page-plandepositdet .payment-detail-label {
font-size: 14px;
color: #6b7280;
font-weight: 500;
}
.page-plandepositdet .payment-detail-value {
font-size: 14px;
color: #1a1a1a;
font-weight: 600;
}
/* Wallet Address Section */
.page-plandepositdet .wallet-address-box {
background: white;
border: 2px solid var(--border);
border-radius: 12px;
padding: 20px;
margin-bottom: 24px;
}
.page-plandepositdet .wallet-label {
font-size: 14px;
font-weight: 600;
color: #6b7280;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.page-plandepositdet .wallet-label i {
font-size: 18px;
}
.page-plandepositdet .wallet-address-container {
display: flex;
gap: 12px;
align-items: center;
}
.page-plandepositdet .wallet-address-text {
flex: 1;
background: #f8f9fa;
padding: 14px 16px;
border-radius: 8px;
font-family: 'Courier New', monospace;
font-size: 14px;
color: #1a1a1a;
word-break: break-all;
border: 1px solid var(--border);
}
.page-plandepositdet .copy-button {
background: var(--primary);
border: none;
border-radius: 8px;
padding: 14px 24px;
color: white;
cursor: pointer;
font-size: 14px;
font-weight: 600;
transition: all 0.3s ease;
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
}
.page-plandepositdet .copy-button:hover {
background: var(--primary-hover);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.page-plandepositdet .copy-button i {
font-size: 18px;
}
/* QR Code Section */
.page-plandepositdet .qr-code-section {
text-align: center;
padding: 32px;
background: white;
border-radius: 12px;
border: 2px solid var(--border);
margin-bottom: 24px;
}
.page-plandepositdet .qr-code-label {
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.page-plandepositdet .qr-code-label i {
font-size: 22px;
color: var(--primary);
}
.page-plandepositdet .qr-code-placeholder {
width: 220px;
height: 220px;
background: linear-gradient(135deg, #f8f9fa 0%, #f3f4f6 100%);
border-radius: 12px;
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 12px;
border: 2px dashed #d1d5db;
}
.page-plandepositdet .qr-code-placeholder i {
font-size: 56px;
color: #9ca3af;
}
.page-plandepositdet .qr-code-hint {
margin: 0;
color: #6b7280;
font-size: 14px;
}
/* Upload Section */
.page-plandepositdet .upload-section {
margin-bottom: 24px;
}
.page-plandepositdet .upload-label {
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
}
.page-plandepositdet .upload-label i {
font-size: 22px;
color: var(--primary);
}
.page-plandepositdet .upload-box {
border: 2px dashed #d1d5db;
border-radius: 12px;
padding: 40px 32px;
text-align: center;
background: #f8f9fa;
cursor: pointer;
transition: all 0.3s ease;
}
.page-plandepositdet .upload-box:hover {
border-color: var(--primary);
background: rgba(102, 126, 234, 0.05);
}
.page-plandepositdet .upload-box i {
font-size: 52px;
color: var(--primary);
margin-bottom: 16px;
}
.page-plandepositdet .upload-box p {
margin: 0;
color: #4b5563;
font-size: 15px;
font-weight: 500;
}
.page-plandepositdet .upload-hint {
font-size: 13px;
color: #9ca3af;
margin-top: 8px;
}
.page-plandepositdet .uploaded-file-display {
margin-top: 16px;
padding: 16px;
background: #d1fae5;
border: 1px solid #34d399;
border-radius: 8px;
display: none;
align-items: center;
gap: 12px;
}
.page-plandepositdet .uploaded-file-display i {
font-size: 24px;
color: #059669;
}
.page-plandepositdet .uploaded-file-name {
flex: 1;
color: #065f46;
font-weight: 500;
font-size: 14px;
}
/* Submit Button */
.page-plandepositdet .submit-button {
width: 100%;
padding: 18px 32px;
background: var(--primary);
color: white;
border: none;
border-radius: 12px;
font-weight: 600;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.page-plandepositdet .submit-button:hover {
background: var(--primary-hover);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
}
.page-plandepositdet .submit-button i {
font-size: 22px;
}
/* Alert */
.page-plandepositdet .info-alert {
background: #fff3cd;
border-left: 4px solid #ffc107;
padding: 16px 20px;
border-radius: 8px;
margin-bottom: 24px;
display: flex;
gap: 12px;
align-items: flex-start;
}
.page-plandepositdet .info-alert i {
color: #ffc107;
font-size: 24px;
}
.page-plandepositdet .info-alert-text {
flex: 1;
}
.page-plandepositdet .info-alert-text strong {
display: block;
margin-bottom: 4px;
color: #856404;
font-size: 15px;
}
.page-plandepositdet .info-alert-text p {
margin: 0;
font-size: 14px;
color: #856404;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.page-plandepositdet .plan-info-header {
flex-direction: column;
align-items: flex-start;
}
.page-plandepositdet .plan-price-display {
text-align: left;
margin-top: 16px;
}
.page-plandepositdet .plan-info-banner {
padding: 24px;
}
.page-plandepositdet .wallet-address-container {
flex-direction: column;
}
.page-plandepositdet .copy-button {
width: 100%;
justify-content: center;
}
.page-plandepositdet .qr-code-placeholder {
width: 180px;
height: 180px;
}
.page-plandepositdet .upload-box {
padding: 32px 20px;
}
}
/* ==========================================
kyc-verification.html - Body Class: .page-kycverify
========================================== */
/* KYC Page Styles */
.page-kycverify .kyc-container {
max-width: 900px;
margin: 0 auto;
}
.page-kycverify .kyc-header {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
border-radius: 16px;
padding: 40px;
margin-bottom: 30px;
color: white;
text-align: center;
position: relative;
overflow: hidden;
}
.page-kycverify .kyc-header::before {
content: '';
position: absolute;
top: -80px;
right: -80px;
width: 250px;
height: 250px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
}
.page-kycverify .kyc-header-content {
position: relative;
z-index: 1;
}
.page-kycverify .kyc-header h1 {
font-size: 32px;
font-weight: 700;
margin-bottom: 12px;
color: white;
}
.page-kycverify .kyc-header p {
font-size: 16px;
color: white;
margin-bottom: 0;
}
.page-kycverify .kyc-status-card {
background: white;
border-radius: 16px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.page-kycverify .status-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
}
.page-kycverify .status-badge.pending {
background: #fef3c7;
color: #92400e;
}
.page-kycverify .status-badge.verified {
background: #d1fae5;
color: #065f46;
}
.page-kycverify .status-badge.failed {
background: #fee2e2;
color: #991b1b;
}
.page-kycverify .status-badge.not-submitted {
background: #e5e7eb;
color: #4b5563;
}
.page-kycverify .kyc-form-card {
background: white;
border-radius: 16px;
padding: 35px;
margin-bottom: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.page-kycverify .kyc-form-title {
font-size: 22px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 12px;
}
.page-kycverify .kyc-form-desc {
color: #6b7280;
font-size: 14px;
margin-bottom: 30px;
}
.page-kycverify .form-group-kyc {
margin-bottom: 24px;
}
.page-kycverify .form-label-kyc {
font-size: 14px;
font-weight: 600;
color: #374151;
margin-bottom: 8px;
display: block;
}
.page-kycverify .form-input-kyc {
width: 100%;
height: 50px;
padding: 0 16px;
font-size: 15px;
color: #1a1a1a;
background: white;
border: 2px solid var(--border);
border-radius: 10px;
transition: all 0.3s ease;
}
.page-kycverify .form-input-kyc:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}
.page-kycverify .form-select-kyc {
width: 100%;
height: 50px;
padding: 0 16px;
font-size: 15px;
color: #1a1a1a;
background: white;
border: 2px solid var(--border);
border-radius: 10px;
transition: all 0.3s ease;
cursor: pointer;
}
.page-kycverify .form-select-kyc:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}
.page-kycverify .upload-area {
border: 2px dashed #d1d5db;
border-radius: 12px;
padding: 30px;
text-align: center;
background: #f9fafb;
transition: all 0.3s ease;
cursor: pointer;
}
.page-kycverify .upload-area:hover {
border-color: var(--primary);
background: #f0f9ff;
}
.page-kycverify .upload-area.has-file {
border-color: #10b981;
background: #d1fae5;
border-style: solid;
}
.page-kycverify .upload-icon {
width: 60px;
height: 60px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
}
.page-kycverify .upload-icon i {
color: white;
font-size: 28px;
}
.page-kycverify .upload-text {
font-size: 15px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 6px;
}
.page-kycverify .upload-hint {
font-size: 13px;
color: #6b7280;
}
.page-kycverify .btn-submit-kyc {
background: var(--primary);
color: white;
border: none;
padding: 16px 40px;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
justify-content: center;
}
.page-kycverify .btn-submit-kyc:hover {
background: var(--primary-hover);
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}
.page-kycverify .btn-submit-kyc i {
font-size: 20px;
}
.page-kycverify .requirements-box {
background: #f0f9ff;
border: 2px solid #bfdbfe;
border-radius: 12px;
padding: 20px;
margin-bottom: 30px;
}
.page-kycverify .requirements-title {
font-size: 16px;
font-weight: 700;
color: #1e40af;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.page-kycverify .requirement-item {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
font-size: 14px;
color: #1e3a8a;
}
.page-kycverify .requirement-item:last-child {
margin-bottom: 0;
}
.page-kycverify .requirement-item i {
color: var(--primary);
font-size: 18px;
margin-top: 2px;
}
@media (max-width: 768px) {
.page-kycverify .kyc-header {
padding: 30px 20px;
}
.page-kycverify .kyc-header h1 {
font-size: 26px;
}
.page-kycverify .kyc-form-card {
padding: 25px 20px;
}
.form-input-kyc,
.page-kycverify .form-select-kyc {
height: 48px;
}
}
/* ==========================================
address-verification.html - Body Class: .page-addressverify
========================================== */
/* Address Verification Page Styles */
.page-addressverify .verification-container {
max-width: 900px;
margin: 0 auto;
}
.page-addressverify .verification-header {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
border-radius: 16px;
padding: 40px;
margin-bottom: 30px;
color: white;
text-align: center;
position: relative;
overflow: hidden;
}
.page-addressverify .verification-header::before {
content: '';
position: absolute;
top: -80px;
right: -80px;
width: 250px;
height: 250px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
}
.page-addressverify .verification-header-content {
position: relative;
z-index: 1;
}
.page-addressverify .verification-header h1 {
font-size: 32px;
font-weight: 700;
margin-bottom: 12px;
color: white;
}
.page-addressverify .verification-header p {
font-size: 16px;
color: white;
margin-bottom: 0;
}
.page-addressverify .status-card {
background: white;
border-radius: 16px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.page-addressverify .status-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
}
.page-addressverify .status-badge.pending {
background: #fef3c7;
color: #92400e;
}
.page-addressverify .status-badge.verified {
background: #d1fae5;
color: #065f46;
}
.page-addressverify .status-badge.failed {
background: #fee2e2;
color: #991b1b;
}
.page-addressverify .status-badge.not-submitted {
background: #e5e7eb;
color: #4b5563;
}
.page-addressverify .form-card {
background: white;
border-radius: 16px;
padding: 35px;
margin-bottom: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.page-addressverify .form-card-title {
font-size: 22px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 12px;
}
.page-addressverify .form-card-desc {
color: #6b7280;
font-size: 14px;
margin-bottom: 30px;
}
.page-addressverify .form-group-address {
margin-bottom: 24px;
}
.page-addressverify .form-label-address {
font-size: 14px;
font-weight: 600;
color: #374151;
margin-bottom: 8px;
display: block;
}
.page-addressverify .form-input-address {
width: 100%;
height: 50px;
padding: 0 16px;
font-size: 15px;
color: #1a1a1a;
background: white;
border: 2px solid var(--border);
border-radius: 10px;
transition: all 0.3s ease;
}
.page-addressverify .form-input-address:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}
.page-addressverify .form-select-address {
width: 100%;
height: 50px;
padding: 0 16px;
font-size: 15px;
color: #1a1a1a;
background: white;
border: 2px solid var(--border);
border-radius: 10px;
transition: all 0.3s ease;
cursor: pointer;
}
.page-addressverify .form-select-address:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}
.page-addressverify .upload-area {
border: 2px dashed #d1d5db;
border-radius: 12px;
padding: 30px;
text-align: center;
background: #f9fafb;
transition: all 0.3s ease;
cursor: pointer;
}
.page-addressverify .upload-area:hover {
border-color: var(--primary);
background: #f0f9ff;
}
.page-addressverify .upload-area.has-file {
border-color: #10b981;
background: #d1fae5;
border-style: solid;
}
.page-addressverify .upload-icon {
width: 60px;
height: 60px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
}
.page-addressverify .upload-icon i {
color: white;
font-size: 28px;
}
.page-addressverify .upload-text {
font-size: 15px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 6px;
}
.page-addressverify .upload-hint {
font-size: 13px;
color: #6b7280;
}
.page-addressverify .btn-submit {
background: var(--primary);
color: white;
border: none;
padding: 16px 40px;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
justify-content: center;
}
.page-addressverify .btn-submit:hover {
background: var(--primary-hover);
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}
.page-addressverify .btn-submit i {
font-size: 20px;
}
.page-addressverify .requirements-box {
background: #f0f9ff;
border: 2px solid #bfdbfe;
border-radius: 12px;
padding: 20px;
margin-bottom: 30px;
}
.page-addressverify .requirements-title {
font-size: 16px;
font-weight: 700;
color: #1e40af;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.page-addressverify .requirement-item {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
font-size: 14px;
color: #1e3a8a;
}
.page-addressverify .requirement-item:last-child {
margin-bottom: 0;
}
.page-addressverify .requirement-item i {
color: var(--primary);
font-size: 18px;
margin-top: 2px;
}
.page-addressverify .document-examples {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-top: 25px;
}
.page-addressverify .example-item {
background: white;
border: 2px solid var(--border);
border-radius: 12px;
padding: 20px;
text-align: center;
transition: all 0.3s ease;
}
.page-addressverify .example-item:hover {
border-color: var(--primary);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}
.page-addressverify .example-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px;
}
.page-addressverify .example-icon i {
color: white;
font-size: 24px;
}
.page-addressverify .example-title {
font-size: 14px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 4px;
}
.page-addressverify .example-desc {
font-size: 12px;
color: #6b7280;
line-height: 1.4;
}
@media (max-width: 768px) {
.page-addressverify .verification-header {
padding: 30px 20px;
}
.page-addressverify .verification-header h1 {
font-size: 26px;
}
.page-addressverify .form-card {
padding: 25px 20px;
}
.form-input-address,
.page-addressverify .form-select-address {
height: 48px;
}
.page-addressverify .document-examples {
grid-template-columns: 1fr;
}
}
/* ==========================================
withdraw.html - Body Class: .page-withdraw
========================================== */
/* Payment Method Cards */
.page-withdraw .payment-method-card {
border: 2px solid var(--border);
border-radius: 16px;
padding: 24px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
background: #ffffff;
}
.page-withdraw .payment-method-card:hover {
border-color: var(--primary);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
}
.page-withdraw .payment-method-card.active {
border-color: var(--primary);
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}
.page-withdraw .payment-method-card i {
font-size: 36px;
color: var(--primary);
display: block;
margin-bottom: 10px;
}
.page-withdraw .payment-method-card span {
font-size: 15px;
font-weight: 600;
color: #1a1a1a;
}
/* Mobile Responsive - Keep payment methods side by side */
@media (max-width: 576px) {
.page-withdraw .payment-methods .row {
display: flex !important;
}
.page-withdraw .payment-methods .col-md-6 {
flex: 1;
max-width: 50%;
}
.page-withdraw .payment-method-card {
padding: 16px 8px;
}
.page-withdraw .payment-method-card i {
font-size: 28px !important;
}
.page-withdraw .payment-method-card span {
font-size: 13px !important;
}
/* Fix dropdowns for mobile */
.page-withdraw .withdraw-select {
height: 50px !important;
padding: 0 40px 0 12px !important;
font-size: 13px !important;
background-position: right 12px center !important;
background-size: 10px 6px !important;
max-width: 100% !important;
word-wrap: normal !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
line-height: 50px !important;
}
.page-withdraw .withdraw-select option {
font-size: 13px !important;
padding: 10px 12px !important;
background: #ffffff !important;
color: #1a1a1a !important;
line-height: 1.5 !important;
min-height: 40px !important;
}
.page-withdraw .withdraw-input {
height: 50px !important;
padding: 0 12px !important;
font-size: 13px !important;
}
/* Fix amount input wrapper for mobile */
.page-withdraw .amount-input-wrapper input {
height: 50px !important;
padding: 0 75px 0 35px !important;
font-size: 13px !important;
}
.page-withdraw .amount-input-wrapper .input-prefix {
left: 12px !important;
font-size: 13px !important;
}
.page-withdraw .amount-input-wrapper .input-suffix {
right: 12px !important;
padding: 4px 8px !important;
font-size: 11px !important;
}
.page-withdraw .form-label.fw-bold {
font-size: 14px !important;
}
.page-withdraw .card-body {
padding: 15px !important;
}
}
/* Form Input Styling */
.page-withdraw .withdraw-input {
width: 100%;
height: 56px;
padding: 0 20px;
font-size: 15px;
font-weight: 500;
color: #1a1a1a;
background: #ffffff;
border: 2px solid var(--border);
border-radius: 12px;
transition: all 0.3s ease;
font-family: inherit;
}
.page-withdraw .withdraw-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
.page-withdraw .withdraw-input:hover {
border-color: var(--primary);
}
/* Select Dropdown Specific */
.page-withdraw .withdraw-select {
width: 100%;
height: 56px;
padding: 0 45px 0 20px;
font-size: 15px;
font-weight: 500;
color: #1a1a1a;
background: #ffffff url('data:image/svg+xml;charset=UTF-8,') no-repeat right 20px center;
background-size: 12px 8px;
border: 2px solid var(--border);
border-radius: 12px;
transition: all 0.3s ease;
font-family: inherit;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.page-withdraw .withdraw-select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
.page-withdraw .withdraw-select:hover {
border-color: var(--primary);
}
/* Amount Input with prefix/suffix */
.page-withdraw .amount-input-wrapper {
position: relative;
width: 100%;
}
.page-withdraw .amount-input-wrapper input {
width: 100%;
height: 56px;
padding: 0 100px 0 50px;
font-size: 15px;
font-weight: 500;
color: #1a1a1a;
background: #ffffff;
border: 2px solid var(--border);
border-radius: 12px;
transition: all 0.3s ease;
}
.page-withdraw .amount-input-wrapper input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
.page-withdraw .amount-input-wrapper input:hover {
border-color: var(--primary);
}
.page-withdraw .amount-input-wrapper .input-prefix {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
font-weight: 600;
color: #6c757d;
}
.page-withdraw .amount-input-wrapper .input-suffix {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
padding: 6px 12px;
background: #f3f4f6;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
color: #1a1a1a;
}
/* Available Balance Display */
.page-withdraw .balance-card {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border: 2px solid #3b82f6;
border-radius: 12px;
padding: 20px;
margin-bottom: 25px;
}
.page-withdraw .balance-label {
font-size: 14px;
color: #1e40af;
font-weight: 600;
margin-bottom: 8px;
}
.page-withdraw .balance-amount {
font-size: 32px;
font-weight: 700;
color: #1e3a8a;
}
.page-withdraw .balance-max-btn {
display: inline-block;
margin-top: 10px;
padding: 6px 16px;
background: #3b82f6;
color: white;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
border: none;
}
.page-withdraw .balance-max-btn:hover {
background: #2563eb;
transform: translateY(-1px);
}
/* Fee Breakdown */
.page-withdraw .fee-breakdown {
background: linear-gradient(135deg, #f8f9fa 0%, #f3f4f6 100%);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
}
.page-withdraw .fee-row {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
font-size: 15px;
color: #4b5563;
}
.page-withdraw .fee-row.total {
font-size: 17px;
color: var(--primary);
padding-top: 12px;
border-top: 2px solid #e5e7eb;
margin-top: 8px;
}
/* Form Labels */
.page-withdraw .form-label.fw-bold {
font-size: 15px;
color: #1f2937;
margin-bottom: 10px;
}
/* Small Text */
.page-withdraw small.text-muted {
font-size: 13px;
color: #6b7280;
}
.page-withdraw small.text-muted i {
vertical-align: middle;
}
/* ==========================================
withdrawal-history.html - Body Class: .page-withdrawhist
========================================== */
:root {
--primary: #6366F1;
--success: #10b981;
--danger: #ef4444;
--warning: #f59e0b;
--info: #3b82f6;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-500: #6b7280;
--gray-700: #374151;
--gray-900: #111827;
}
body.page-withdrawhist {
background: var(--gray-50);
}
/* Page Header */
.page-withdrawhist .page-header {
background: white;
border-radius: 16px;
border: 1px solid var(--gray-200);
padding: 24px;
margin-bottom: 20px;
}
.page-withdrawhist .page-header-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.page-withdrawhist .page-header h3 {
font-size: 24px;
font-weight: 700;
color: var(--gray-900);
margin: 0;
}
.page-withdrawhist .page-header-subtitle {
font-size: 14px;
color: var(--gray-500);
margin-top: 4px;
}
.page-withdrawhist .header-actions {
display: flex;
gap: 12px;
}
/* Filters Section */
.page-withdrawhist .filters-card {
background: white;
border-radius: 16px;
border: 1px solid var(--gray-200);
padding: 24px;
margin-bottom: 20px;
}
.page-withdrawhist .filters-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr auto;
gap: 16px;
align-items: end;
}
.page-withdrawhist .filters-row .filter-group:last-child {
grid-column: span 1;
}
.page-withdrawhist .filter-group {
display: flex;
flex-direction: column;
}
.page-withdrawhist .filter-label {
font-size: 13px;
font-weight: 600;
color: var(--gray-700);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.page-withdrawhist .filter-input,
.page-withdrawhist .filter-select {
padding: 12px 16px;
border: 2px solid var(--gray-200);
border-radius: 10px;
font-size: 14px;
font-weight: 500;
transition: all 0.3s;
}
.page-withdrawhist .filter-input:focus,
.page-withdrawhist .filter-select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.page-withdrawhist .search-wrapper {
position: relative;
}
.page-withdrawhist .search-wrapper i {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--gray-500);
font-size: 20px;
}
.page-withdrawhist .search-wrapper input {
padding-left: 48px;
}
.page-withdrawhist .filter-btn {
padding: 12px 24px;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
gap: 8px;
justify-content: center;
}
.page-withdrawhist .filter-btn.primary {
background: var(--primary);
color: white;
}
.page-withdrawhist .filter-btn.primary:hover {
background: #5568d3;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.page-withdrawhist .filter-btn.secondary {
background: var(--gray-100);
color: var(--gray-700);
}
.page-withdrawhist .filter-btn.secondary:hover {
background: var(--gray-200);
}
/* Withdrawals Table */
.page-withdrawhist .withdrawals-card {
background: white;
border-radius: 16px;
border: 1px solid var(--gray-200);
overflow: hidden;
}
.page-withdrawhist .withdrawals-table {
width: 100%;
border-collapse: collapse;
}
.page-withdrawhist .withdrawals-table thead {
background: var(--gray-50);
}
.page-withdrawhist .withdrawals-table th {
padding: 16px 20px;
text-align: left;
font-size: 12px;
font-weight: 700;
color: var(--gray-700);
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 2px solid var(--gray-200);
}
.page-withdrawhist .withdrawals-table td {
padding: 20px;
font-size: 14px;
color: var(--gray-900);
border-bottom: 1px solid var(--gray-100);
}
.page-withdrawhist .withdrawals-table tbody tr {
transition: all 0.2s;
}
.page-withdrawhist .withdrawals-table tbody tr:hover {
background: var(--gray-50);
}
/* Status Badges */
.page-withdrawhist .status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
}
.page-withdrawhist .status-badge i {
font-size: 16px;
}
.page-withdrawhist .status-badge.completed {
background: rgba(16, 185, 129, 0.15);
color: var(--success);
}
.page-withdrawhist .status-badge.processing {
background: rgba(59, 130, 246, 0.15);
color: var(--info);
}
.page-withdrawhist .status-badge.pending {
background: rgba(245, 158, 11, 0.15);
color: var(--warning);
}
.page-withdrawhist .status-badge.rejected {
background: rgba(239, 68, 68, 0.15);
color: var(--danger);
}
/* ============================================================================
SUPPORT PAGES - Dark Mode Styles
Help Center, Support Tickets, Create Ticket, Ticket Detail
============================================================================ */
/* Support Pages Background */
[data-theme-version="dark"] .page-create-ticket,
[data-theme-version="dark"] .page-support-tickets,
[data-theme-version="dark"] .page-ticket-detail,
[data-theme-version="dark"] .page-help-center {
background: var(--body-bg) !important;
}
/* Support Pages - Headers */
[data-theme-version="dark"] .page-create-ticket h3,
[data-theme-version="dark"] .page-create-ticket h4,
[data-theme-version="dark"] .page-create-ticket h5,
[data-theme-version="dark"] .page-support-tickets h3,
[data-theme-version="dark"] .page-support-tickets h4,
[data-theme-version="dark"] .page-support-tickets h5,
[data-theme-version="dark"] .page-ticket-detail h3,
[data-theme-version="dark"] .page-ticket-detail h4,
[data-theme-version="dark"] .page-ticket-detail h5,
[data-theme-version="dark"] .page-help-center h3,
[data-theme-version="dark"] .page-help-center h4,
[data-theme-version="dark"] .page-help-center h5 {
color: var(--text-dark) !important;
}
/* Support Pages - Subtitles */
[data-theme-version="dark"] .page-create-ticket .page-header-subtitle,
[data-theme-version="dark"] .page-support-tickets .page-header-subtitle,
[data-theme-version="dark"] .page-ticket-detail .page-header-subtitle,
[data-theme-version="dark"] .page-help-center .page-header-subtitle {
color: var(--text-gray) !important;
}
/* Create Ticket Form Card */
[data-theme-version="dark"] .page-create-ticket .ticket-form-card {
background: var(--card) !important;
border-color: var(--border) !important;
}
/* Form Labels */
[data-theme-version="dark"] .page-create-ticket .form-group label,
[data-theme-version="dark"] .page-ticket-detail .form-group label {
color: var(--text-dark) !important;
}
/* Form Inputs, Selects, Textareas */
[data-theme-version="dark"] .page-create-ticket .form-group input,
[data-theme-version="dark"] .page-create-ticket .form-group select,
[data-theme-version="dark"] .page-create-ticket .form-group textarea,
[data-theme-version="dark"] .page-ticket-detail .form-group input,
[data-theme-version="dark"] .page-ticket-detail .form-group select,
[data-theme-version="dark"] .page-ticket-detail .form-group textarea {
background: var(--card-element-color) !important;
color: var(--text-dark) !important;
border-color: var(--border) !important;
}
[data-theme-version="dark"] .page-create-ticket .form-group input::placeholder,
[data-theme-version="dark"] .page-create-ticket .form-group textarea::placeholder,
[data-theme-version="dark"] .page-ticket-detail .form-group input::placeholder,
[data-theme-version="dark"] .page-ticket-detail .form-group textarea::placeholder {
color: var(--text-gray) !important;
}
/* Form Group Small Text */
[data-theme-version="dark"] .page-create-ticket .form-group small,
[data-theme-version="dark"] .page-ticket-detail .form-group small {
color: var(--text-gray) !important;
}
/* File Upload Area */
[data-theme-version="dark"] .page-create-ticket .file-upload-area,
[data-theme-version="dark"] .page-ticket-detail .file-upload-area {
background: var(--card-element-color) !important;
border-color: var(--border) !important;
}
[data-theme-version="dark"] .page-create-ticket .file-upload-area:hover,
[data-theme-version="dark"] .page-ticket-detail .file-upload-area:hover {
background: rgba(99, 102, 241, 0.1) !important;
border-color: var(--primary) !important;
}
[data-theme-version="dark"] .page-create-ticket .file-upload-area i,
[data-theme-version="dark"] .page-create-ticket .file-upload-area p,
[data-theme-version="dark"] .page-ticket-detail .file-upload-area i,
[data-theme-version="dark"] .page-ticket-detail .file-upload-area p {
color: var(--text-gray) !important;
}
/* Quick Links */
[data-theme-version="dark"] .page-create-ticket .quick-link,
[data-theme-version="dark"] .page-support-tickets .quick-link,
[data-theme-version="dark"] .page-help-center .quick-link {
background: var(--card-element-color) !important;
color: var(--text-dark) !important;
}
[data-theme-version="dark"] .page-create-ticket .quick-link:hover,
[data-theme-version="dark"] .page-support-tickets .quick-link:hover,
[data-theme-version="dark"] .page-help-center .quick-link:hover {
background: rgba(99, 102, 241, 0.15) !important;
color: var(--primary) !important;
}
/* Support Tickets Table */
[data-theme-version="dark"] .page-support-tickets .tickets-table-card {
background: var(--card) !important;
}
[data-theme-version="dark"] .page-support-tickets .tickets-table th {
background: var(--card-element-color) !important;
color: var(--text-dark) !important;
border-color: var(--border) !important;
}
[data-theme-version="dark"] .page-support-tickets .tickets-table td {
color: var(--text-dark) !important;
border-color: var(--border) !important;
}
[data-theme-version="dark"] .page-support-tickets .tickets-table tbody tr:hover {
background: var(--card-element-color) !important;
}
/* Ticket Detail Card */
[data-theme-version="dark"] .page-ticket-detail .ticket-detail-card,
[data-theme-version="dark"] .page-ticket-detail .ticket-info-card,
[data-theme-version="dark"] .page-ticket-detail .reply-card {
background: var(--card) !important;
}
/* Chat Messages */
[data-theme-version="dark"] .page-ticket-detail .message-content {
color: var(--text-dark) !important;
}
[data-theme-version="dark"] .page-ticket-detail .message-time,
[data-theme-version="dark"] .page-ticket-detail .message-sender {
color: var(--text-gray) !important;
}
/* Help Center FAQ */
[data-theme-version="dark"] .page-help-center .faq-card {
background: var(--card) !important;
}
[data-theme-version="dark"] .page-help-center .faq-question {
color: var(--text-dark) !important;
}
[data-theme-version="dark"] .page-help-center .faq-answer {
color: var(--text-gray) !important;
}
[data-theme-version="dark"] .page-help-center .search-input {
background: var(--card-element-color) !important;
color: var(--text-dark) !important;
border-color: var(--border) !important;
}
[data-theme-version="dark"] .page-help-center .search-input::placeholder {
color: var(--text-gray) !important;
}
/* Category Cards in Help Center */
[data-theme-version="dark"] .page-help-center .category-card {
background: var(--card) !important;
border-color: var(--border) !important;
}
[data-theme-version="dark"] .page-help-center .category-card:hover {
background: var(--card-element-color) !important;
}
[data-theme-version="dark"] .page-help-center .category-name {
color: var(--text-dark) !important;
}
[data-theme-version="dark"] .page-help-center .category-count {
color: var(--text-gray) !important;
}
/* General Dark Mode Form Fixes - Universal for all pages with custom forms */
[data-theme-version="dark"] .ticket-form-card,
[data-theme-version="dark"] .form-card,
[data-theme-version="dark"] .application-card {
background: var(--card) !important;
}
/* Universal Form Group Dark Mode */
[data-theme-version="dark"] .form-group label {
color: var(--text-dark) !important;
}
[data-theme-version="dark"] .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
[data-theme-version="dark"] .form-group select,
[data-theme-version="dark"] .form-group textarea {
background: var(--card-element-color) !important;
color: var(--text-dark) !important;
border-color: var(--border) !important;
}
[data-theme-version="dark"] .form-group input::placeholder,
[data-theme-version="dark"] .form-group textarea::placeholder {
color: var(--text-gray) !important;
}
/* Select dropdown arrow in dark mode */
[data-theme-version="dark"] .form-group select option {
background: var(--card) !important;
color: var(--text-dark) !important;
}
/* ============================================================================
AUTH PAGES - Theme Toggle & Dark Mode Styles
Sign In, Sign Up, Forgot Password, Email Verification, etc.
============================================================================ */
/* Auth Theme Toggle - Matching Dashboard Design Exactly */
.auth-theme-toggle {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
padding: 0;
}
.auth-theme-toggle:hover {
background: #fff;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.auth-theme-toggle svg.theme-icon-light {
display: block;
}
.auth-theme-toggle svg.theme-icon-dark {
display: none;
}
/* Dark mode toggle button */
[data-theme-version="dark"] .auth-theme-toggle {
background: rgba(46, 50, 62, 0.95);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
[data-theme-version="dark"] .auth-theme-toggle:hover {
background: #2e323e;
}
[data-theme-version="dark"] .auth-theme-toggle svg.theme-icon-light {
display: none;
}
[data-theme-version="dark"] .auth-theme-toggle svg.theme-icon-dark {
display: block;
}
/* Auth Pages Dark Mode - Background */
[data-theme-version="dark"].page-signin,
[data-theme-version="dark"].page-signup,
[data-theme-version="dark"].page-signupstep2,
[data-theme-version="dark"].page-signupstep3,
[data-theme-version="dark"].page-forgotpwd,
[data-theme-version="dark"].page-emailverify,
[data-theme-version="dark"].page-2falogin {
background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 50%, #16213e 100%) !important;
}
/* Auth Card Dark Mode */
[data-theme-version="dark"] .auth-card {
background: #1e2028 !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}
[data-theme-version="dark"] .auth-header {
background: #1e2028 !important;
}
/* Auth Title & Text */
[data-theme-version="dark"] .auth-title {
color: #fff !important;
}
[data-theme-version="dark"] .auth-subtitle {
color: #9ca3af !important;
}
[data-theme-version="dark"] .auth-subtitle a {
color: #818cf8 !important;
}
/* Form Labels - Auth Pages */
[data-theme-version="dark"] .form-label,
[data-theme-version="dark"] .page-signin .form-label,
[data-theme-version="dark"] .page-signup .form-label,
[data-theme-version="dark"] .page-signupstep2 .form-label,
[data-theme-version="dark"] .page-signupstep3 .form-label,
[data-theme-version="dark"] .page-forgotpwd .form-label,
[data-theme-version="dark"] .page-emailverify .form-label,
[data-theme-version="dark"] .page-2falogin .form-label,
body[data-theme-version="dark"] .form-label {
color: #e5e7eb !important;
}
/* Form Inputs - All types in dark mode */
[data-theme-version="dark"] .form-input,
[data-theme-version="dark"] input.form-input,
[data-theme-version="dark"] input[type="text"].form-input,
[data-theme-version="dark"] input[type="email"].form-input,
[data-theme-version="dark"] input[type="password"].form-input,
[data-theme-version="dark"] input[type="number"].form-input,
[data-theme-version="dark"] input[type="tel"].form-input,
body[data-theme-version="dark"] .form-input,
body[data-theme-version="dark"] input.form-input {
background: #2d2f3a !important;
color: #fff !important;
border-color: #3f4150 !important;
-webkit-text-fill-color: #fff !important;
}
[data-theme-version="dark"] .form-input:focus,
body[data-theme-version="dark"] .form-input:focus {
background: #2d2f3a !important;
border-color: #6366F1 !important;
}
[data-theme-version="dark"] .form-input::placeholder,
[data-theme-version="dark"] input.form-input::placeholder,
body[data-theme-version="dark"] .form-input::placeholder {
color: #9ca3af !important;
opacity: 1 !important;
-webkit-text-fill-color: #9ca3af !important;
}
/* All input types - ensure text is visible in dark mode */
[data-theme-version="dark"] input[type="text"],
[data-theme-version="dark"] input[type="email"],
[data-theme-version="dark"] input[type="password"],
[data-theme-version="dark"] input[type="number"],
[data-theme-version="dark"] input[type="tel"],
body[data-theme-version="dark"] input[type="text"],
body[data-theme-version="dark"] input[type="email"],
body[data-theme-version="dark"] input[type="password"],
body[data-theme-version="dark"] input[type="number"],
body[data-theme-version="dark"] input[type="tel"] {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
background: #2d2f3a !important;
border-color: #3f4150 !important;
}
[data-theme-version="dark"] input[type="text"]:focus,
[data-theme-version="dark"] input[type="email"]:focus,
[data-theme-version="dark"] input[type="password"]:focus,
body[data-theme-version="dark"] input:focus {
border-color: #6366F1 !important;
}
[data-theme-version="dark"] input::placeholder,
body[data-theme-version="dark"] input::placeholder {
color: #9ca3af !important;
-webkit-text-fill-color: #9ca3af !important;
opacity: 1 !important;
}
/* Ensure placeholder is visible on all auth page inputs */
[data-theme-version="dark"] .page-signin .form-input::placeholder,
[data-theme-version="dark"] .page-signup .form-input::placeholder,
[data-theme-version="dark"] .page-signupstep2 .form-input::placeholder,
[data-theme-version="dark"] .page-signupstep3 .form-input::placeholder,
[data-theme-version="dark"] .page-forgotpwd .form-input::placeholder,
[data-theme-version="dark"] .page-emailverify .form-input::placeholder,
[data-theme-version="dark"] .page-2falogin .form-input::placeholder,
body[data-theme-version="dark"] .form-input::placeholder,
body[data-theme-version="dark"] input::placeholder {
color: #9ca3af !important;
opacity: 1 !important;
}
/* Form Icons */
[data-theme-version="dark"] .form-icon {
color: #6b7280 !important;
}
[data-theme-version="dark"] .form-input:focus + .form-icon {
color: #818cf8 !important;
}
[data-theme-version="dark"] .password-toggle {
color: #6b7280 !important;
}
/* Checkbox & Labels */
[data-theme-version="dark"] .checkbox-label {
color: #d1d5db !important;
}
[data-theme-version="dark"] .forgot-password {
color: #818cf8 !important;
}
/* Submit Button */
[data-theme-version="dark"] .btn-submit {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%) !important;
}
/* Back to Home Link */
[data-theme-version="dark"] .auth-body a[href*="interface_home"],
[data-theme-version="dark"] .auth-body a[style*="color: #6b7280"] {
color: #9ca3af !important;
}
[data-theme-version="dark"] .auth-body a[href*="interface_home"]:hover,
[data-theme-version="dark"] .auth-body a[style*="color: #6b7280"]:hover {
color: #818cf8 !important;
}
/* Info Text & Step Indicators */
[data-theme-version="dark"] .step-item,
[data-theme-version="dark"] .step-number,
[data-theme-version="dark"] .step-title {
color: #9ca3af !important;
}
[data-theme-version="dark"] .step-item.active .step-number,
[data-theme-version="dark"] .step-item.active .step-title {
color: #818cf8 !important;
}
[data-theme-version="dark"] .step-item.completed .step-number {
background: #10b981 !important;
color: #fff !important;
}
/* Info/Help Text */
[data-theme-version="dark"] .auth-info,
[data-theme-version="dark"] .auth-help,
[data-theme-version="dark"] .info-text {
color: #9ca3af !important;
}
/* Select Dropdowns */
[data-theme-version="dark"] .form-input-wrapper select,
[data-theme-version="dark"] select.form-input {
background: #2d2f3a !important;
color: #fff !important;
border-color: #3f4150 !important;
}
[data-theme-version="dark"] select.form-input option {
background: #1e2028 !important;
color: #fff !important;
}
/* Email Verification Page Specific */
[data-theme-version="dark"] .verification-icon {
background: rgba(99, 102, 241, 0.2) !important;
color: #818cf8 !important;
}
[data-theme-version="dark"] .verification-text {
color: #d1d5db !important;
}
[data-theme-version="dark"] .resend-link {
color: #818cf8 !important;
}
/* 2FA Page Specific */
[data-theme-version="dark"] .form-input-2fa {
background: #2d2f3a !important;
color: #fff !important;
border-color: #3f4150 !important;
}
[data-theme-version="dark"] .form-input-2fa:focus {
border-color: #6366F1 !important;
}
/* Password Reset Confirmation */
[data-theme-version="dark"] .reset-success-icon {
background: rgba(16, 185, 129, 0.2) !important;
color: #10b981 !important;
}
/* Form Select Dropdowns in Auth Pages */
[data-theme-version="dark"] .form-select {
background: #2d2f3a !important;
color: #fff !important;
border-color: #3f4150 !important;
}
[data-theme-version="dark"] .form-select:focus {
border-color: #6366F1 !important;
}
[data-theme-version="dark"] .form-select option {
background: #1e2028 !important;
color: #fff !important;
}
/* Info Box in Signup Pages */
[data-theme-version="dark"] .info-box {
background: rgba(99, 102, 241, 0.1) !important;
border-color: rgba(99, 102, 241, 0.2) !important;
}
[data-theme-version="dark"] .info-box i {
color: #818cf8 !important;
}
[data-theme-version="dark"] .info-box-content {
color: #d1d5db !important;
}
[data-theme-version="dark"] .info-box-content strong {
color: #fff !important;
}
/* Step Indicator */
[data-theme-version="dark"] .step-indicator {
color: #9ca3af !important;
}
/* Progress Steps */
[data-theme-version="dark"] .progress-steps .step {
background: #3f4150 !important;
}
[data-theme-version="dark"] .progress-steps .step.completed {
background: #10b981 !important;
}
[data-theme-version="dark"] .progress-steps .step.active {
background: #6366F1 !important;
}
/* Risk Options (Sign Up Step 3) */
[data-theme-version="dark"] .risk-option .risk-label {
background: #2d2f3a !important;
border-color: #3f4150 !important;
}
[data-theme-version="dark"] .risk-option .risk-label:hover {
background: #3f4150 !important;
border-color: #6366F1 !important;
}
[data-theme-version="dark"] .risk-option input:checked + .risk-label {
background: rgba(99, 102, 241, 0.15) !important;
border-color: #6366F1 !important;
}
[data-theme-version="dark"] .risk-label .risk-title {
color: #fff !important;
}
[data-theme-version="dark"] .risk-label .risk-desc {
color: #9ca3af !important;
}
[data-theme-version="dark"] .risk-label i {
color: #818cf8 !important;
}
/* Back Button in Auth Pages */
[data-theme-version="dark"] .btn-back {
background: #2d2f3a !important;
color: #d1d5db !important;
border-color: #3f4150 !important;
}
[data-theme-version="dark"] .btn-back:hover {
background: #3f4150 !important;
}
/* Password Reset Form Dark Mode */
[data-theme-version="dark"] .form-label-password {
color: #e5e7eb !important;
}
[data-theme-version="dark"] .form-input-password {
background: #2d2f3a !important;
color: #fff !important;
border-color: #3f4150 !important;
}
[data-theme-version="dark"] .form-input-password:focus {
border-color: #6366F1 !important;
}
[data-theme-version="dark"] .form-input-password::placeholder {
color: #6b7280 !important;
}
[data-theme-version="dark"] .password-toggle-btn {
color: #6b7280 !important;
}
[data-theme-version="dark"] .password-requirements-box {
background: rgba(99, 102, 241, 0.1) !important;
border-color: rgba(99, 102, 241, 0.25) !important;
}
[data-theme-version="dark"] .password-requirements-title {
color: #818cf8 !important;
}
[data-theme-version="dark"] .password-strength-bar {
background: #3f4150 !important;
}
[data-theme-version="dark"] .password-strength-text {
color: #9ca3af !important;
}
/* Back Link Dark Mode */
[data-theme-version="dark"] .back-link {
color: #9ca3af !important;
}
[data-theme-version="dark"] .back-link:hover {
color: #818cf8 !important;
}
/* Auth Icon Wrapper Dark Mode */
[data-theme-version="dark"] .auth-icon-wrapper {
background: rgba(99, 102, 241, 0.15) !important;
}
/* Email Verification Page - Inline Style Overrides */
[data-theme-version="dark"] .email-highlight {
color: #818cf8 !important;
}
/* Error Message Dark Mode */
[data-theme-version="dark"] .error-message,
[data-theme-version="dark"] .success-message {
background: rgba(239, 68, 68, 0.15) !important;
border-color: rgba(239, 68, 68, 0.3) !important;
}
[data-theme-version="dark"] .success-message {
background: rgba(16, 185, 129, 0.15) !important;
border-color: rgba(16, 185, 129, 0.3) !important;
}
/* ============================================
COMPREHENSIVE DARK MODE FIXES
Browser Autofill/Autocomplete Styling
============================================ */
/* Fix browser autofill background - critical for Chrome/Edge/Safari */
[data-theme-version="dark"] input:-webkit-autofill,
[data-theme-version="dark"] input:-webkit-autofill:hover,
[data-theme-version="dark"] input:-webkit-autofill:focus,
[data-theme-version="dark"] input:-webkit-autofill:active,
[data-theme-version="dark"] textarea:-webkit-autofill,
[data-theme-version="dark"] select:-webkit-autofill,
body[data-theme-version="dark"] input:-webkit-autofill,
body[data-theme-version="dark"] input:-webkit-autofill:hover,
body[data-theme-version="dark"] input:-webkit-autofill:focus,
body[data-theme-version="dark"] input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 1000px #2d2f3a inset !important;
-webkit-text-fill-color: #fff !important;
background-color: #2d2f3a !important;
color: #fff !important;
caret-color: #fff !important;
border-color: #3f4150 !important;
transition: background-color 5000s ease-in-out 0s;
}
/* Firefox autofill */
[data-theme-version="dark"] input:autofill,
body[data-theme-version="dark"] input:autofill {
background-color: #2d2f3a !important;
color: #fff !important;
}
/* ============================================
Global Select/Dropdown Dark Mode
============================================ */
[data-theme-version="dark"] select,
[data-theme-version="dark"] .form-control,
[data-theme-version="dark"] .custom-select,
body[data-theme-version="dark"] select,
body[data-theme-version="dark"] .form-control {
background-color: #2d2f3a !important;
color: #fff !important;
border-color: #3f4150 !important;
}
[data-theme-version="dark"] select option,
[data-theme-version="dark"] .form-control option,
body[data-theme-version="dark"] select option {
background-color: #1e2028 !important;
color: #fff !important;
}
[data-theme-version="dark"] select:focus,
[data-theme-version="dark"] .form-control:focus,
body[data-theme-version="dark"] select:focus {
border-color: #6366F1 !important;
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
}
/* ============================================
Filter Dropdowns (Copy Trader, etc.)
============================================ */
[data-theme-version="dark"] .filter-select,
[data-theme-version="dark"] .filter-dropdown,
[data-theme-version="dark"] .filter-input,
[data-theme-version="dark"] #traderSearch,
[data-theme-version="dark"] #traderSearchMobile,
[data-theme-version="dark"] #copyModeFilter,
[data-theme-version="dark"] #approvalFilter,
[data-theme-version="dark"] #sortFilter,
[data-theme-version="dark"] #copyModeFilterMobile,
[data-theme-version="dark"] #approvalFilterMobile,
[data-theme-version="dark"] #sortFilterMobile,
[data-theme-version="dark"] .filter-group select,
[data-theme-version="dark"] .filter-group input,
body[data-theme-version="dark"] .filter-select,
body[data-theme-version="dark"] .filter-input {
background-color: #1e293b !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
border-color: #334155 !important;
}
/* Filter Select - Add dropdown arrow for dark mode */
[data-theme-version="dark"] .filter-select,
[data-theme-version="dark"] #copyModeFilter,
[data-theme-version="dark"] #approvalFilter,
[data-theme-version="dark"] #sortFilter,
[data-theme-version="dark"] #copyModeFilterMobile,
[data-theme-version="dark"] #approvalFilterMobile,
[data-theme-version="dark"] #sortFilterMobile,
[data-theme-version="dark"] .filter-group select,
body[data-theme-version="dark"] .filter-select {
background: #1e293b url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='%23ffffff' d='M6 8L0 0h12z'/%3e%3c/svg%3e") no-repeat right 15px center !important;
background-size: 12px 8px !important;
}
[data-theme-version="dark"] .filter-input::placeholder,
[data-theme-version="dark"] #traderSearch::placeholder,
[data-theme-version="dark"] #traderSearchMobile::placeholder {
color: #9ca3af !important;
-webkit-text-fill-color: #9ca3af !important;
}
[data-theme-version="dark"] .filter-select option,
[data-theme-version="dark"] .filter-dropdown option,
[data-theme-version="dark"] #copyModeFilter option,
[data-theme-version="dark"] #approvalFilter option,
[data-theme-version="dark"] #sortFilter option,
[data-theme-version="dark"] #copyModeFilterMobile option,
[data-theme-version="dark"] #approvalFilterMobile option,
[data-theme-version="dark"] #sortFilterMobile option,
[data-theme-version="dark"] .filter-group select option {
background: #1e293b !important;
background-color: #1e293b !important;
color: #fff !important;
}
[data-theme-version="dark"] .filter-select:hover,
[data-theme-version="dark"] .filter-dropdown:hover,
[data-theme-version="dark"] .filter-input:focus,
[data-theme-version="dark"] .filter-select:focus {
border-color: #6366F1 !important;
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
}
/* Filter Section Container */
[data-theme-version="dark"] .filter-section,
[data-theme-version="dark"] .filter-desktop-view,
[data-theme-version="dark"] .filter-mobile-view {
background: transparent !important;
}
[data-theme-version="dark"] .filter-title {
color: #f1f5f9 !important;
}
/* ============================================
Bootstrap Form Controls Dark Mode
============================================ */
[data-theme-version="dark"] .form-control,
[data-theme-version="dark"] .custom-select,
[data-theme-version="dark"] .form-select,
body[data-theme-version="dark"] .form-control {
background-color: #2d2f3a !important;
color: #fff !important;
border-color: #3f4150 !important;
}
[data-theme-version="dark"] .form-control::placeholder {
color: #9ca3af !important;
}
[data-theme-version="dark"] .form-control:focus {
background-color: #2d2f3a !important;
border-color: #6366F1 !important;
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
color: #fff !important;
}
/* ============================================
Textarea Dark Mode
============================================ */
[data-theme-version="dark"] textarea,
[data-theme-version="dark"] textarea.form-control,
[data-theme-version="dark"] textarea.form-input,
body[data-theme-version="dark"] textarea {
background-color: #2d2f3a !important;
color: #fff !important;
border-color: #3f4150 !important;
}
[data-theme-version="dark"] textarea::placeholder {
color: #9ca3af !important;
}
[data-theme-version="dark"] textarea:focus {
border-color: #6366F1 !important;
}
/* ============================================
Card and Container Dark Mode
============================================ */
[data-theme-version="dark"] .card:not(.portfolio-card):not(.affiliate-card),
[data-theme-version="dark"] .card-body:not(.portfolio-card .card-body),
body[data-theme-version="dark"] .card:not(.portfolio-card):not(.affiliate-card),
html[data-theme-version="dark"] .card:not(.portfolio-card):not(.affiliate-card) {
background-color: #1e293b !important;
border-color: #334155 !important;
}
/* EXCEPTION: Portfolio card keeps its gradient in dark mode */
[data-theme-version="dark"] .portfolio-card,
[data-theme-version="dark"] .portfolio-card .card-body,
body[data-theme-version="dark"] .portfolio-card,
body[data-theme-version="dark"] .portfolio-card .card-body {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
background-color: transparent !important;
border-color: transparent !important;
}
[data-theme-version="dark"] .card-header {
background-color: #1e293b !important;
border-bottom-color: #334155 !important;
}
[data-theme-version="dark"] .card-footer {
background-color: #1e293b !important;
border-top-color: #334155 !important;
}
/* Currency Badge */
.page-withdrawhist .currency-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--gray-100);
border-radius: 10px;
font-weight: 600;
}
.page-withdrawhist .currency-icon {
width: 24px;
height: 24px;
border-radius: 50%;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 10px;
font-weight: 700;
}
/* Amount Display */
.page-withdrawhist .amount-display {
font-size: 16px;
font-weight: 700;
color: var(--gray-900);
}
.page-withdrawhist .amount-usd {
font-size: 12px;
color: var(--gray-500);
margin-top: 2px;
}
/* Action Buttons */
.page-withdrawhist .action-btn {
padding: 8px 12px;
border: 2px solid var(--gray-200);
border-radius: 8px;
background: white;
color: var(--gray-700);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 4px;
text-decoration: none;
}
.page-withdrawhist .action-btn:hover {
border-color: var(--primary);
color: var(--primary);
transform: translateY(-2px);
}
.page-withdrawhist .action-btn i {
font-size: 16px;
}
/* Empty State */
.page-withdrawhist .empty-state {
text-align: center;
padding: 80px 20px;
}
.page-withdrawhist .empty-state i {
font-size: 80px;
color: var(--gray-200);
margin-bottom: 20px;
}
.page-withdrawhist .empty-state h4 {
font-size: 20px;
font-weight: 700;
color: var(--gray-900);
margin-bottom: 12px;
}
.page-withdrawhist .empty-state p {
font-size: 14px;
color: var(--gray-500);
margin-bottom: 24px;
}
/* Pagination */
.page-withdrawhist .pagination-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-top: 1px solid var(--gray-200);
}
.page-withdrawhist .pagination-info {
font-size: 14px;
color: var(--gray-500);
}
.page-withdrawhist .pagination {
display: flex;
gap: 8px;
}
.page-withdrawhist .page-btn {
width: 40px;
height: 40px;
border: 2px solid var(--gray-200);
border-radius: 8px;
background: white;
color: var(--gray-700);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.page-withdrawhist .page-btn:hover {
border-color: var(--primary);
color: var(--primary);
}
.page-withdrawhist .page-btn.active {
background: var(--primary);
border-color: var(--primary);
color: white;
}
.page-withdrawhist .page-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Mobile Responsive */
@media (max-width: 992px) {
.page-withdrawhist .withdrawals-table {
display: block;
overflow-x: auto;
}
.page-withdrawhist .page-header-content {
flex-direction: column;
align-items: stretch;
}
.page-withdrawhist .header-actions {
width: 100%;
}
.page-withdrawhist .header-actions .btn {
flex: 1;
}
}
@media (max-width: 768px) {
.page-withdrawhist .filters-row {
grid-template-columns: 1fr;
}
.page-withdrawhist .pagination-wrapper {
flex-direction: column;
gap: 16px;
}
}
/* ==========================================
index.html - Body Class: .page-index
========================================== */
.page-index * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #6366F1;
--primary-dark: #4F46E5;
--text-primary: #1a1a1a;
--text-secondary: #6b7280;
--bg-light: #f5f7fa;
--bg-white: #fafbfc;
--border: #e5e7eb;
}
.page-index [data-theme="dark"] {
--text-primary: #ffffff;
--text-secondary: #9ca3af;
--bg-light: #1f2937;
--border: #374151;
}
.page-index [data-theme="dark"] body {
background: #111827;
color: #ffffff;
}
.page-index [data-theme="dark"] .top-navbar {
background: #1f2937;
border-bottom-color: #374151;
}
.page-index [data-theme="dark"] .sidebar {
background: #1f2937;
border-right-color: #374151;
}
[data-theme="dark"] .feature-card,
.page-index [data-theme="dark"] .faq-item {
background: #1f2937;
border-color: #374151;
}
.page-index [data-theme="dark"] .section-alt {
background: #0f172a;
}
html.page-index {
scroll-behavior: smooth;
overflow-x: hidden;
}
body.page-index {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
transition: background 0.3s, color 0.3s;
}
/* Top Navigation Bar */
.page-index .top-navbar {
position: fixed;
top: 0;
width: 100%;
background: var(--bg-white);
border-bottom: 1px solid var(--border);
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
transition: background 0.3s, border 0.3s;
}
.page-index .top-nav-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
}
.page-index .nav-left {
display: flex;
align-items: center;
gap: 20px;
}
.page-index .hamburger-menu {
width: 40px;
height: 40px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
padding: 8px;
border-radius: 8px;
transition: all 0.3s;
}
.page-index .hamburger-menu:hover {
background: var(--bg-light);
}
.page-index .hamburger-menu span {
display: block;
width: 24px;
height: 2px;
background: var(--text-primary);
transition: all 0.3s;
border-radius: 2px;
}
.page-index .hamburger-menu.active span:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.page-index .hamburger-menu.active span:nth-child(2) {
opacity: 0;
}
.page-index .hamburger-menu.active span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
.page-index .nav-logo {
display: flex;
align-items: center;
gap: 10px;
font-size: 24px;
font-weight: 700;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-decoration: none;
}
.page-index .nav-logo svg {
width: 35px;
height: 35px;
}
.page-index .nav-right {
display: flex;
gap: 15px;
align-items: center;
}
/* Theme Toggle */
.page-index .theme-toggle {
width: 40px;
height: 40px;
border: none;
background: var(--bg-light);
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.page-index .theme-toggle:hover {
background: var(--primary);
color: white;
}
.page-index .theme-toggle i {
font-size: 20px;
color: var(--text-primary);
transition: color 0.3s;
}
.page-index .theme-toggle:hover i {
color: white;
}
/* User Menu Dropdown */
.page-index .user-menu {
position: relative;
}
.page-index .user-icon-btn {
width: 40px;
height: 40px;
border: 2px solid var(--primary);
background: var(--bg-white);
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.page-index [data-theme="dark"] .user-icon-btn {
background: #1f2937;
}
.page-index .user-icon-btn:hover {
background: var(--primary);
}
.page-index .user-icon-btn i {
font-size: 22px;
color: var(--primary);
transition: color 0.3s;
}
.page-index .user-icon-btn:hover i {
color: white;
}
.page-index .user-dropdown {
position: absolute;
top: 55px;
right: 0;
width: 180px;
background: var(--bg-white);
border: 2px solid var(--border);
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s;
}
.page-index [data-theme="dark"] .user-dropdown {
background: #1f2937;
border-color: #374151;
}
.page-index .user-dropdown.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.page-index .user-dropdown a {
display: block;
padding: 14px 18px;
color: var(--text-primary);
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: all 0.3s;
}
.page-index .user-dropdown a:first-child {
border-radius: 10px 10px 0 0;
}
.page-index .user-dropdown a:last-child {
border-radius: 0 0 10px 10px;
}
.page-index .user-dropdown a:hover {
background: var(--primary);
color: white;
}
/* Sidebar */
.page-index .sidebar {
position: fixed;
top: 70px;
left: -300px;
width: 280px;
height: calc(100vh - 70px);
background: var(--bg-white);
border-right: 1px solid var(--border);
z-index: 999;
transition: all 0.3s ease;
overflow-y: auto;
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.page-index .sidebar.active {
left: 0;
}
.page-index .sidebar-menu {
list-style: none;
padding: 20px 0;
}
.page-index .sidebar-menu li {
margin-bottom: 5px;
}
.page-index .sidebar-menu a {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
color: var(--text-primary);
text-decoration: none;
font-weight: 500;
transition: all 0.3s;
}
.page-index .sidebar-menu a:hover {
background: var(--bg-light);
color: var(--primary);
padding-left: 25px;
}
.page-index .sidebar-menu a i {
font-size: 20px;
}
.page-index .sidebar-overlay {
position: fixed;
top: 70px;
left: 0;
width: 100%;
height: calc(100vh - 70px);
background: rgba(0, 0, 0, 0.5);
z-index: 998;
display: none;
transition: all 0.3s;
}
.page-index .sidebar-overlay.active {
display: block;
}
/* Main Content */
.page-index .main-content {
margin-top: 70px;
transition: margin-left 0.3s;
}
/* Hero Section */
.page-index .hero {
padding: 80px 20px;
background: var(--bg-white);
overflow: hidden;
}
.page-index [data-theme="dark"] .hero {
background: #111827;
}
.page-index .hero-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.page-index .hero-content {
text-align: left;
}
.page-index .hero h1 {
font-size: 48px;
font-weight: 800;
line-height: 1.2;
margin-bottom: 25px;
color: var(--text-primary);
}
.page-index .hero p {
font-size: 18px;
line-height: 1.7;
margin-bottom: 40px;
color: var(--text-secondary);
}
.page-index .hero-image {
position: relative;
}
.page-index .hero-image img {
width: 100%;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(102, 126, 234, 0.2);
}
.page-index .btn-hero {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: white;
padding: 16px 40px;
border-radius: 10px;
text-decoration: none;
font-weight: 700;
font-size: 16px;
display: inline-block;
transition: all 0.3s;
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}
.page-index .btn-hero:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(102, 126, 234, 0.4);
}
/* Section Styles */
.page-index .section {
padding: 80px 20px;
}
.page-index .section-alt {
background: var(--bg-light);
}
.page-index .section-container {
max-width: 1200px;
margin: 0 auto;
}
.page-index .section-header {
text-align: center;
margin-bottom: 60px;
}
.page-index .section-tag {
text-transform: uppercase;
font-weight: 700;
color: var(--primary);
margin-bottom: 10px;
font-size: 13px;
letter-spacing: 1px;
}
.page-index .section-header h2 {
font-size: 42px;
font-weight: 800;
margin-bottom: 15px;
color: var(--text-primary);
}
.page-index .section-header p {
font-size: 18px;
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto;
line-height: 1.7;
}
/* Features Grid */
.page-index .features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 50px;
}
.page-index .feature-card {
background: var(--bg-white);
padding: 35px;
border-radius: 16px;
border: 2px solid var(--border);
transition: all 0.3s;
}
.page-index .feature-card:hover {
border-color: var(--primary);
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(102, 126, 234, 0.15);
}
.page-index .feature-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.page-index .feature-icon i {
font-size: 30px;
color: white;
}
.page-index .feature-card h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 12px;
color: var(--text-primary);
}
.page-index .feature-card p {
color: var(--text-secondary);
line-height: 1.7;
}
/* Two Column Layout */
.page-index .two-column {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
margin-bottom: 60px;
}
.page-index .two-column img {
width: 100%;
border-radius: 16px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}
.page-index .content h2 {
font-size: 38px;
font-weight: 800;
margin-bottom: 20px;
color: var(--text-primary);
}
.page-index .content p {
font-size: 17px;
color: var(--text-secondary);
line-height: 1.8;
margin-bottom: 30px;
}
/* FAQ Section */
.page-index .faq-container {
max-width: 800px;
margin: 0 auto;
}
.page-index .faq-item {
background: var(--bg-white);
border: 2px solid var(--border);
border-radius: 12px;
margin-bottom: 15px;
overflow: hidden;
transition: all 0.3s;
}
.page-index .faq-question {
padding: 20px 25px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
font-size: 16px;
color: var(--text-primary);
}
.page-index .faq-question:hover {
background: var(--bg-light);
}
.page-index .faq-question i {
color: var(--primary);
transition: transform 0.3s;
}
.page-index .faq-item.active .faq-question i {
transform: rotate(45deg);
}
.page-index .faq-answer {
max-height: 0;
overflow: hidden;
transition: all 0.3s;
padding: 0 25px;
}
.page-index .faq-item.active .faq-answer {
max-height: 500px;
padding: 0 25px 20px;
}
.page-index .faq-answer p {
color: var(--text-secondary);
line-height: 1.7;
}
/* Footer */
.page-index .footer {
background: #1a1a1a;
color: white;
padding: 60px 20px 30px;
}
.page-index .footer-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
margin-bottom: 40px;
}
.page-index .footer-section h4 {
font-size: 16px;
font-weight: 700;
margin-bottom: 20px;
}
.page-index .footer-section ul {
list-style: none;
}
.page-index .footer-section ul li {
margin-bottom: 12px;
}
.page-index .footer-section ul li a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.3s;
}
.page-index .footer-section ul li a:hover {
color: white;
}
.page-index .footer-bottom {
max-width: 1200px;
margin: 0 auto;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
}
.page-index .risk-warning {
background: rgba(255, 193, 7, 0.1);
border-left: 4px solid #ffc107;
padding: 20px;
margin-top: 30px;
border-radius: 8px;
}
.page-index .risk-warning p {
color: rgba(255, 255, 255, 0.8);
font-size: 13px;
line-height: 1.6;
}
/* Responsive */
@media (max-width: 768px) {
.page-index .hero-container {
grid-template-columns: 1fr;
gap: 40px;
}
.page-index .hero-content {
text-align: center;
}
.page-index .hero h1 {
font-size: 36px;
}
.page-index .hero p {
font-size: 16px;
}
.page-index .two-column {
grid-template-columns: 1fr;
}
.page-index .section-header h2 {
font-size: 32px;
}
.page-index .content h2 {
font-size: 28px;
}
}
/* ============================================
MY TRADES PAGE - TRADE CARDS
============================================ */
.page-mytrades .trade-card {
background: #fafbfc;
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 10px;
border: 1px solid var(--border);
transition: all 0.3s;
position: relative;
overflow: hidden;
}
.page-mytrades .trade-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: #6366F1;
transition: all 0.3s;
}
.page-mytrades .trade-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
transform: translateY(-1px);
border-color: #dce1e8;
}
.page-mytrades .trade-card.profit::before {
background: linear-gradient(180deg, #10b981 0%, #059669 100%);
}
.page-mytrades .trade-card.loss::before {
background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
}
.page-mytrades .trade-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
width: 100%;
}
.page-mytrades .trade-pair {
font-size: 14px;
font-weight: 700;
color: #1e293b;
display: flex;
align-items: center;
gap: 6px;
}
.page-mytrades .trade-status {
padding: 3px 10px;
border-radius: 12px;
font-size: 10px;
font-weight: 600;
background: #e2e8f0;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.page-mytrades .trade-status.active {
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
color: #16a34a;
animation: pulse-mytrades 2s infinite;
}
@keyframes pulse-mytrades {
0%, 100% { opacity: 1; }
50% { opacity: 0.85; }
}
.page-mytrades .trade-info {
display: flex;
justify-content: space-between;
font-size: 12px;
color: #64748b;
margin-bottom: 5px;
line-height: 1.3;
}
.page-mytrades .trade-info span {
font-weight: 500;
}
.page-mytrades .trade-pnl {
font-size: 14px;
font-weight: 800;
margin-top: 6px;
padding-top: 8px;
border-top: 1px solid #e8eaed;
display: flex;
align-items: center;
gap: 4px;
}
.page-mytrades .trade-pnl.profit {
color: #10b981;
}
.page-mytrades .trade-pnl.loss {
color: #ef4444;
}
/* Dark theme support for mytrades page */
.page-mytrades [data-theme-version="dark"] .trade-card {
background: #1a1f37;
border-color: #2d3855;
}
.page-mytrades [data-theme-version="dark"] .trade-card:hover {
border-color: #3d4562;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.page-mytrades [data-theme-version="dark"] .trade-pair {
color: #e2e8f0;
}
.page-mytrades [data-theme-version="dark"] .trade-status {
background: #252e48;
color: #94a3b8;
}
.page-mytrades [data-theme-version="dark"] .trade-info {
color: #94a3b8;
}
.page-mytrades [data-theme-version="dark"] .trade-pnl {
border-top-color: #2d3855;
}
/* ============================================
WITHDRAW PAGE - BOOTSTRAP TAB STYLING
============================================ */
.payment-method-card {
background: #fff;
border: 2px solid #e8eaed;
border-radius: 12px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.payment-method-card:hover {
border-color: #6366F1;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
transform: translateY(-2px);
}
.payment-method-card.active {
border-color: #6366F1;
background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
}
.payment-method-card .material-icons {
font-size: 32px;
color: #6366F1;
}
.payment-method-card span {
font-weight: 600;
color: #1e293b;
}
.payment-methods .nav-pills .nav-item {
padding: 0 10px;
}
.payment-methods .nav-pills {
border: none;
}
/* ============================================
MODAL FIX - Prevent hiding under address bar
============================================ */
.modal {
z-index: 1060 !important;
padding-top: 60px !important;
}
.modal-backdrop {
z-index: 1050 !important;
}
.modal-dialog {
margin-top: 20px;
margin-bottom: 20px;
}
/* ============================================
FOOTER FIX - Inline horizontal layout
============================================ */
.footer .copyright {
text-align: center;
}
.footer .copyright p {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 5px;
margin: 0;
}
/* ============================================
EMAIL VERIFICATION - Wider card
============================================ */
.page-email-verification .verification-card,
.page-forgot-password .verification-card {
max-width: 500px !important;
width: 100%;
}
/* ============================================
TAB PANE - Ensure proper display
============================================ */
/* ============================================
TRADE TABS - Styling (UI only)
============================================ */
.trade-tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
border-bottom: 2px solid #e8eaed;
padding-bottom: 0;
}
.trade-tab {
background: transparent;
border: none;
padding: 12px 24px;
font-weight: 600;
color: #64748b;
cursor: pointer;
transition: all 0.3s;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
}
.trade-tab:hover {
color: #6366F1;
}
.trade-tab.active {
color: #6366F1;
border-bottom-color: #6366F1;
}
.trading-tabs .tab-btn {
transition: all 0.3s ease;
}
.trading-tabs .tab-btn.active {
transform: scale(1.05);
}
/* ============================================
BOOTSTRAP TAB PANES - Fix spacing issue
============================================ */
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
/* Override Bootstrap fade to prevent hidden tabs from taking up space */
.tab-pane:not(.active) {
display: none !important;
height: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
}
/* ============================================
MOBILE RESPONSIVE - Better spacing
============================================ */
@media (max-width: 768px) {
.page-stockmarket .form-row,
.page-cryptomarket .form-row {
grid-template-columns: 1fr;
gap: 0;
}
.page-stockmarket .form-group,
.page-cryptomarket .form-group {
margin-bottom: 30px;
}
.page-stockmarket .leverage-mode,
.page-cryptomarket .leverage-mode {
margin-bottom: 20px;
}
.page-stockmarket .leverage-options,
.page-cryptomarket .leverage-options {
margin-bottom: 20px;
}
.page-stockmarket .duration-buttons,
.page-cryptomarket .duration-buttons {
margin-bottom: 10px;
}
}
/* ==========================================
Dark Theme Overrides for All Pages
========================================== */
[data-theme-version="dark"] .page-deposithistory,
[data-theme-version="dark"] .page-withdrawalhistory,
[data-theme-version="dark"] .page-mytrades,
[data-theme-version="dark"] .page-copytraders,
[data-theme-version="dark"] .page-cryptomarket,
[data-theme-version="dark"] .page-stockmarket,
[data-theme-version="dark"] .page-dashboard,
[data-theme-version="dark"] .page-deposit,
[data-theme-version="dark"] .page-withdraw,
[data-theme-version="dark"] .page-planning,
[data-theme-version="dark"] .page-kycverification,
[data-theme-version="dark"] .page-referrals {
/* Override text colors for dark theme */
}
[data-theme-version="dark"] .page-deposithistory h3,
[data-theme-version="dark"] .page-deposithistory h4,
[data-theme-version="dark"] .page-deposithistory h5,
[data-theme-version="dark"] .page-deposithistory .amount-display,
[data-theme-version="dark"] .page-withdrawalhistory h3,
[data-theme-version="dark"] .page-withdrawalhistory h4,
[data-theme-version="dark"] .page-withdrawalhistory h5,
[data-theme-version="dark"] .page-withdrawalhistory .amount-display,
[data-theme-version="dark"] .page-mytrades h3,
[data-theme-version="dark"] .page-mytrades h4,
[data-theme-version="dark"] .page-mytrades h5,
[data-theme-version="dark"] .page-copytraders h3,
[data-theme-version="dark"] .page-copytraders h4,
[data-theme-version="dark"] .page-copytraders h5,
[data-theme-version="dark"] .page-copytraders .trader-info h5,
[data-theme-version="dark"] .page-cryptomarket h3,
[data-theme-version="dark"] .page-cryptomarket h4,
[data-theme-version="dark"] .page-cryptomarket h5,
[data-theme-version="dark"] .page-stockmarket h3,
[data-theme-version="dark"] .page-stockmarket h4,
[data-theme-version="dark"] .page-stockmarket h5,
[data-theme-version="dark"] .page-dashboard h3,
[data-theme-version="dark"] .page-dashboard h4,
[data-theme-version="dark"] .page-dashboard h5,
[data-theme-version="dark"] .page-deposit h3,
[data-theme-version="dark"] .page-deposit h4,
[data-theme-version="dark"] .page-deposit h5,
[data-theme-version="dark"] .page-withdraw h3,
[data-theme-version="dark"] .page-withdraw h4,
[data-theme-version="dark"] .page-withdraw h5,
[data-theme-version="dark"] .page-planning h3,
[data-theme-version="dark"] .page-planning h4,
[data-theme-version="dark"] .page-planning h5,
[data-theme-version="dark"] .page-kycverification h3,
[data-theme-version="dark"] .page-kycverification h4,
[data-theme-version="dark"] .page-kycverification h5,
[data-theme-version="dark"] .page-referrals h3,
[data-theme-version="dark"] .page-referrals h4,
[data-theme-version="dark"] .page-referrals h5 {
color: var(--text-dark) !important;
}
/* Table headers and cells - EXPLICIT colors for dark mode */
[data-theme-version="dark"] .page-deposithistory .deposits-table th,
[data-theme-version="dark"] .page-withdrawalhistory .withdrawals-table th {
background: #1e293b !important;
background-color: #1e293b !important;
color: #fff !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-deposithistory .deposits-table td,
[data-theme-version="dark"] .page-withdrawalhistory .withdrawals-table td {
color: #e2e8f0 !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-deposithistory .deposits-table thead,
[data-theme-version="dark"] .page-withdrawalhistory .withdrawals-table thead {
background: #1e293b !important;
}
[data-theme-version="dark"] .page-deposithistory .deposits-card,
[data-theme-version="dark"] .page-withdrawalhistory .withdrawals-card,
[data-theme-version="dark"] .page-deposithistory .filters-card,
[data-theme-version="dark"] .page-withdrawalhistory .filters-card {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-mytrades .trade-pair,
[data-theme-version="dark"] .page-mytrades .trade-info,
[data-theme-version="dark"] .page-copytraders .stat-item,
[data-theme-version="dark"] .page-copytraders .trader-card strong,
[data-theme-version="dark"] .page-cryptomarket .trade-pair,
[data-theme-version="dark"] .page-cryptomarket .trade-info,
[data-theme-version="dark"] .page-stockmarket .trade-pair,
[data-theme-version="dark"] .page-stockmarket .trade-info {
color: #fff !important;
}
[data-theme-version="dark"] .page-deposithistory .filter-label,
[data-theme-version="dark"] .page-withdrawalhistory .filter-label,
[data-theme-version="dark"] .page-mytrades .stats-label,
[data-theme-version="dark"] .page-copytraders .filter-title {
color: var(--text-dark) !important;
}
[data-theme-version="dark"] .page-deposithistory .page-header-subtitle,
[data-theme-version="dark"] .page-deposithistory .pagination-info,
[data-theme-version="dark"] .page-deposithistory .amount-usd,
[data-theme-version="dark"] .page-withdrawalhistory .page-header-subtitle,
[data-theme-version="dark"] .page-withdrawalhistory .pagination-info,
[data-theme-version="dark"] .page-withdrawalhistory .amount-usd,
[data-theme-version="dark"] .page-mytrades .trade-subtitle,
[data-theme-version="dark"] .page-copytraders .trader-info p {
color: var(--text-gray) !important;
}
/* Form inputs in dark mode */
[data-theme-version="dark"] .page-deposithistory .filter-input,
[data-theme-version="dark"] .page-deposithistory .filter-select,
[data-theme-version="dark"] .page-withdrawalhistory .filter-input,
[data-theme-version="dark"] .page-withdrawalhistory .filter-select,
[data-theme-version="dark"] .page-copytraders .filter-input,
[data-theme-version="dark"] .page-copytraders .filter-select,
[data-theme-version="dark"] .page-cryptomarket input,
[data-theme-version="dark"] .page-cryptomarket select,
[data-theme-version="dark"] .page-stockmarket input,
[data-theme-version="dark"] .page-stockmarket select,
[data-theme-version="dark"] .page-deposit input,
[data-theme-version="dark"] .page-deposit select,
[data-theme-version="dark"] .page-withdraw input,
[data-theme-version="dark"] .page-withdraw select {
background: var(--card-element-color) !important;
color: var(--text-dark) !important;
border-color: var(--border) !important;
}
/* Table hover in dark mode */
[data-theme-version="dark"] .page-deposithistory .deposits-table tbody tr:hover,
[data-theme-version="dark"] .page-withdrawalhistory .withdrawals-table tbody tr:hover {
background: var(--card-element-color) !important;
}
/* Mobile Bottom Navigation - Dark Mode */
[data-theme-version="dark"] .mobile-bottom-nav {
background: var(--card) !important;
border-top-color: var(--border) !important;
}
[data-theme-version="dark"] .mobile-nav-item {
color: var(--text-gray) !important;
}
[data-theme-version="dark"] .mobile-nav-item:hover,
[data-theme-version="dark"] .mobile-nav-item.active {
color: var(--primary) !important;
}
/* KYC Warning Banner - Dark Mode */
[data-theme-version="dark"] #kyc-warning-banner {
background: linear-gradient(135deg, #422006 0%, #713f12 100%) !important;
border-top-color: #b45309 !important;
}
/* General Card Elements - Dark Mode - exclude account-card and portfolio-card which have their own gradients */
[data-theme-version="dark"] .card:not(.account-card):not(.portfolio-card),
[data-theme-version="dark"] .card-body:not(.account-card .card-body):not(.portfolio-card .card-body) {
background: var(--card) !important;
}
/* ============================================================================
Global Dark Mode Text Improvements
Increase text brightness for better readability
============================================================================ */
/* Primary text - Headers, strong, labels - account-card inherits white from its own CSS */
[data-theme-version="dark"] .card-title,
[data-theme-version="dark"] .card-header h4,
[data-theme-version="dark"] .card-header h5,
[data-theme-version="dark"] .card-body:not(.account-card .card-body) h2,
[data-theme-version="dark"] .card-body:not(.account-card .card-body) h3,
[data-theme-version="dark"] .card-body:not(.account-card .card-body) h4,
[data-theme-version="dark"] .card-body:not(.account-card .card-body) h5,
[data-theme-version="dark"] .card-body:not(.account-card .card-body) strong,
[data-theme-version="dark"] .card-body:not(.account-card .card-body) label,
[data-theme-version="dark"] .modal-title,
[data-theme-version="dark"] .modal-body h4,
[data-theme-version="dark"] .modal-body h5,
[data-theme-version="dark"] .modal-body strong,
[data-theme-version="dark"] .modal-body label {
color: #fff !important;
}
/* Secondary text - descriptions, muted text, spans - exclude account-card which has white text on gradient */
[data-theme-version="dark"] .card-body:not(.account-card .card-body) p,
[data-theme-version="dark"] .card-body:not(.account-card .card-body) span:not(.badge):not(.status-badge):not(.text-success):not(.text-danger):not(.text-warning):not(.text-primary):not(.text-info),
[data-theme-version="dark"] .text-muted,
[data-theme-version="dark"] .modal-body p,
[data-theme-version="dark"] .modal-body span:not(.badge) {
color: #d1d5db !important;
}
/* Table text */
[data-theme-version="dark"] .table td,
[data-theme-version="dark"] .table th {
color: #e5e7eb !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme-version="dark"] .table thead th {
color: #fff !important;
background: rgba(255, 255, 255, 0.05) !important;
}
[data-theme-version="dark"] .table tbody tr:hover {
background: rgba(255, 255, 255, 0.03) !important;
}
/* Form elements */
[data-theme-version="dark"] .form-control,
[data-theme-version="dark"] .form-select,
[data-theme-version="dark"] select.form-control {
color: #fff !important;
background: rgba(255, 255, 255, 0.08) !important;
border-color: rgba(255, 255, 255, 0.15) !important;
}
[data-theme-version="dark"] .form-control::placeholder {
color: #9ca3af !important;
}
[data-theme-version="dark"] .input-group-text {
color: #d1d5db !important;
background: rgba(255, 255, 255, 0.05) !important;
border-color: rgba(255, 255, 255, 0.15) !important;
}
/* List items with icons (like commission rates) */
[data-theme-version="dark"] ul li strong,
[data-theme-version="dark"] ul li div strong,
[data-theme-version="dark"] .list-group-item strong {
color: #fff !important;
}
[data-theme-version="dark"] ul li span:not(.badge),
[data-theme-version="dark"] ul li div span:not(.badge),
[data-theme-version="dark"] .list-group-item span:not(.badge) {
color: #d1d5db !important;
}
/* Borders in dark mode */
[data-theme-version="dark"] ul li,
[data-theme-version="dark"] .list-group-item {
border-color: rgba(255, 255, 255, 0.1) !important;
}
/* Avatar backgrounds in dark mode */
[data-theme-version="dark"] .referral-avatar,
[data-theme-version="dark"] .user-avatar,
[data-theme-version="dark"] .avatar-circle {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%) !important;
}
/* Card hover effects */
[data-theme-version="dark"] .card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
/* Stat cards */
[data-theme-version="dark"] .stat-label,
[data-theme-version="dark"] .stats-label,
[data-theme-version="dark"] .info-label {
color: #d1d5db !important;
}
[data-theme-version="dark"] .stat-value,
[data-theme-version="dark"] .stats-value,
[data-theme-version="dark"] .info-value {
color: #fff !important;
}
/* Balance displays */
[data-theme-version="dark"] .balance-display {
background: rgba(255, 255, 255, 0.05) !important;
}
[data-theme-version="dark"] .balance-display h2,
[data-theme-version="dark"] .balance-display h3 {
color: #10b981 !important;
}
/* Alert boxes */
[data-theme-version="dark"] .alert-warning {
background: rgba(245, 158, 11, 0.15) !important;
border-color: rgba(245, 158, 11, 0.3) !important;
color: #fbbf24 !important;
}
[data-theme-version="dark"] .alert-info {
background: rgba(59, 130, 246, 0.15) !important;
border-color: rgba(59, 130, 246, 0.3) !important;
color: #60a5fa !important;
}
[data-theme-version="dark"] .alert-success {
background: rgba(16, 185, 129, 0.15) !important;
border-color: rgba(16, 185, 129, 0.3) !important;
color: #34d399 !important;
}
[data-theme-version="dark"] .alert-danger {
background: rgba(239, 68, 68, 0.15) !important;
border-color: rgba(239, 68, 68, 0.3) !important;
color: #f87171 !important;
}
/* Breadcrumb */
[data-theme-version="dark"] .breadcrumb-item a {
color: #9ca3af !important;
}
[data-theme-version="dark"] .breadcrumb-item.active a {
color: #d1d5db !important;
}
/* hr dividers */
[data-theme-version="dark"] hr {
border-color: rgba(255, 255, 255, 0.1) !important;
}
/* Small/helper text */
[data-theme-version="dark"] small,
[data-theme-version="dark"] .small,
[data-theme-version="dark"] .help-text {
color: #9ca3af !important;
}
/* ============================================================================
Crypto & Stock Market Pages - Dark Mode Fixes
============================================================================ */
/* Override CSS variables for dark mode on these pages */
[data-theme-version="dark"] .page-cryptomarket,
[data-theme-version="dark"] .page-stockmarket {
--gray-50: #1e293b !important;
--gray-100: #334155 !important;
--gray-500: #94a3b8 !important;
--gray-600: #9ca3af !important;
--gray-900: #f1f5f9 !important;
}
/* Price Stats Cards - Dark background instead of white - MAXIMUM SPECIFICITY */
[data-theme-version="dark"] .stat-item,
[data-theme-version="dark"] .price-stats .stat-item,
[data-theme-version="dark"] .page-cryptomarket .stat-item,
[data-theme-version="dark"] .page-stockmarket .stat-item,
[data-theme-version="dark"] .page-cryptomarket .price-stats .stat-item,
[data-theme-version="dark"] .page-stockmarket .price-stats .stat-item,
body[data-theme-version="dark"] .stat-item,
body[data-theme-version="dark"] .page-cryptomarket .stat-item,
body[data-theme-version="dark"] .page-stockmarket .stat-item,
body.page-cryptomarket[data-theme-version="dark"] .stat-item,
body.page-stockmarket[data-theme-version="dark"] .stat-item,
[data-theme-version="dark"].page-cryptomarket .stat-item,
[data-theme-version="dark"].page-stockmarket .stat-item {
background: #1e293b !important;
background-color: #1e293b !important;
border: 1px solid #334155 !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .stat-label,
[data-theme-version="dark"] .page-cryptomarket .stat-label,
[data-theme-version="dark"] .page-stockmarket .stat-label,
[data-theme-version="dark"] .page-cryptomarket .price-stats .stat-label,
[data-theme-version="dark"] .page-stockmarket .price-stats .stat-label,
body[data-theme-version="dark"] .stat-label,
body[data-theme-version="dark"] .page-cryptomarket .stat-label,
body[data-theme-version="dark"] .page-stockmarket .stat-label {
color: #9ca3af !important;
}
[data-theme-version="dark"] .stat-value,
[data-theme-version="dark"] .page-cryptomarket .stat-value,
[data-theme-version="dark"] .page-stockmarket .stat-value,
[data-theme-version="dark"] .page-cryptomarket .price-stats .stat-value,
[data-theme-version="dark"] .page-stockmarket .price-stats .stat-value,
[data-theme-version="dark"] .page-cryptomarket #currentPrice,
[data-theme-version="dark"] .page-cryptomarket #change24h,
[data-theme-version="dark"] .page-cryptomarket #marketCap,
[data-theme-version="dark"] .page-cryptomarket #volume24h,
[data-theme-version="dark"] .page-stockmarket #currentPrice,
[data-theme-version="dark"] .page-stockmarket #change24h,
[data-theme-version="dark"] .page-stockmarket #marketCap,
[data-theme-version="dark"] .page-stockmarket #volume24h,
body[data-theme-version="dark"] .stat-value,
body[data-theme-version="dark"] .page-cryptomarket .stat-value,
body[data-theme-version="dark"] .page-stockmarket .stat-value {
color: #fff !important;
}
/* Chart Panel */
[data-theme-version="dark"] .page-cryptomarket .chart-panel,
[data-theme-version="dark"] .page-stockmarket .chart-panel {
background: var(--card) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
/* Crypto/Stock Selector Dropdown */
[data-theme-version="dark"] .page-cryptomarket .crypto-selector,
[data-theme-version="dark"] .page-stockmarket .stock-selector,
[data-theme-version="dark"] .page-cryptomarket .crypto-dropdown,
[data-theme-version="dark"] .page-stockmarket .stock-dropdown {
background: rgba(255, 255, 255, 0.08) !important;
border-color: rgba(255, 255, 255, 0.15) !important;
color: #fff !important;
}
/* Timeframe buttons */
[data-theme-version="dark"] .page-cryptomarket .timeframe-selector,
[data-theme-version="dark"] .page-stockmarket .timeframe-selector {
background: #1e293b !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
[data-theme-version="dark"] .page-cryptomarket .timeframe-btn,
[data-theme-version="dark"] .page-stockmarket .timeframe-btn {
color: #9ca3af !important;
background: transparent !important;
}
[data-theme-version="dark"] .page-cryptomarket .timeframe-btn:hover,
[data-theme-version="dark"] .page-stockmarket .timeframe-btn:hover {
color: #fff !important;
background: rgba(255, 255, 255, 0.08) !important;
}
[data-theme-version="dark"] .page-cryptomarket .timeframe-btn.active,
[data-theme-version="dark"] .page-stockmarket .timeframe-btn.active {
background: #6366F1 !important;
color: #fff !important;
}
/* Trading Section */
[data-theme-version="dark"] .page-cryptomarket .trading-section,
[data-theme-version="dark"] .page-stockmarket .trading-section {
background: var(--card) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme-version="dark"] .page-cryptomarket .trading-header h3,
[data-theme-version="dark"] .page-stockmarket .trading-header h3 {
color: #fff !important;
}
/* Trading Form Labels and Inputs */
[data-theme-version="dark"] .page-cryptomarket .form-label,
[data-theme-version="dark"] .page-stockmarket .form-label {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-cryptomarket .form-control,
[data-theme-version="dark"] .page-cryptomarket .form-select,
[data-theme-version="dark"] .page-stockmarket .form-control,
[data-theme-version="dark"] .page-stockmarket .form-select {
background: rgba(255, 255, 255, 0.08) !important;
border-color: rgba(255, 255, 255, 0.15) !important;
color: #fff !important;
}
/* Mode buttons (Spot/Leverage) */
[data-theme-version="dark"] .page-cryptomarket .mode-btn,
[data-theme-version="dark"] .page-stockmarket .mode-btn {
background: rgba(255, 255, 255, 0.08) !important;
border-color: rgba(255, 255, 255, 0.15) !important;
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-cryptomarket .mode-btn.active,
[data-theme-version="dark"] .page-stockmarket .mode-btn.active {
background: #6366F1 !important;
border-color: #6366F1 !important;
color: #fff !important;
}
/* Leverage buttons */
[data-theme-version="dark"] .page-cryptomarket .leverage-btn,
[data-theme-version="dark"] .page-stockmarket .leverage-btn {
background: rgba(255, 255, 255, 0.05) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-cryptomarket .leverage-btn.active,
[data-theme-version="dark"] .page-stockmarket .leverage-btn.active {
background: rgba(99, 102, 241, 0.2) !important;
border-color: #6366F1 !important;
color: #6366F1 !important;
}
/* Duration buttons */
[data-theme-version="dark"] .page-cryptomarket .duration-btn,
[data-theme-version="dark"] .page-stockmarket .duration-btn {
background: rgba(255, 255, 255, 0.05) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-cryptomarket .duration-btn.active,
[data-theme-version="dark"] .page-stockmarket .duration-btn.active {
background: rgba(99, 102, 241, 0.2) !important;
border-color: #6366F1 !important;
color: #6366F1 !important;
}
/* Trade Tabs */
[data-theme-version="dark"] .page-cryptomarket .trade-tabs,
[data-theme-version="dark"] .page-stockmarket .trade-tabs {
background: rgba(255, 255, 255, 0.05) !important;
}
[data-theme-version="dark"] .page-cryptomarket .trade-tab,
[data-theme-version="dark"] .page-stockmarket .trade-tab {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-cryptomarket .trade-tab.active,
[data-theme-version="dark"] .page-stockmarket .trade-tab.active {
background: var(--card) !important;
color: #6366F1 !important;
}
/* Trades Section */
[data-theme-version="dark"] .page-cryptomarket .trades-section,
[data-theme-version="dark"] .page-stockmarket .trades-section {
background: var(--card) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme-version="dark"] .page-cryptomarket .trades-header h3,
[data-theme-version="dark"] .page-stockmarket .trades-header h3 {
color: #fff !important;
}
/* Trade Cards */
[data-theme-version="dark"] .page-cryptomarket .trade-card,
[data-theme-version="dark"] .page-stockmarket .trade-card {
background: rgba(255, 255, 255, 0.05) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme-version="dark"] .page-cryptomarket .trade-card .trade-pair,
[data-theme-version="dark"] .page-stockmarket .trade-card .trade-pair,
[data-theme-version="dark"] .page-cryptomarket .trade-card .trade-asset,
[data-theme-version="dark"] .page-stockmarket .trade-card .trade-asset {
color: #fff !important;
}
[data-theme-version="dark"] .page-cryptomarket .trade-card .trade-info,
[data-theme-version="dark"] .page-stockmarket .trade-card .trade-info,
[data-theme-version="dark"] .page-cryptomarket .trade-card .trade-meta,
[data-theme-version="dark"] .page-stockmarket .trade-card .trade-meta {
color: #d1d5db !important;
}
/* Copy Advisory Banner */
[data-theme-version="dark"] .page-cryptomarket .copy-advisory,
[data-theme-version="dark"] .page-stockmarket .copy-advisory {
background: rgba(99, 102, 241, 0.1) !important;
border-color: rgba(99, 102, 241, 0.3) !important;
}
[data-theme-version="dark"] .page-cryptomarket .copy-advisory-text,
[data-theme-version="dark"] .page-stockmarket .copy-advisory-text {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-cryptomarket .copy-advisory-text strong,
[data-theme-version="dark"] .page-stockmarket .copy-advisory-text strong {
color: #fff !important;
}
/* ============================================================================
Become Trader Page - Dark Mode
============================================================================ */
/* Become Trader - Main white cards - Keep card styling with dark background */
[data-theme-version="dark"] .page-becometrader .benefits-section,
[data-theme-version="dark"] .page-becometrader .application-form-section,
body.page-becometrader[data-theme-version="dark"] .benefits-section,
body.page-becometrader[data-theme-version="dark"] .application-form-section {
background: #1e293b !important;
background-color: #1e293b !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
border: 1px solid #334155 !important;
}
[data-theme-version="dark"] .page-becometrader .benefit-card {
background: #0f172a !important;
background-color: #0f172a !important;
border: 1px solid #334155 !important;
}
[data-theme-version="dark"] .page-becometrader .benefit-card:hover {
border-color: #6366F1 !important;
}
[data-theme-version="dark"] .page-becometrader .benefit-card i {
color: #818cf8 !important;
}
[data-theme-version="dark"] .page-becometrader .benefit-card h4 {
color: #fff !important;
}
[data-theme-version="dark"] .page-becometrader .benefit-card p {
color: #9ca3af !important;
}
[data-theme-version="dark"] .page-becometrader .benefits-section h2,
[data-theme-version="dark"] .page-becometrader .application-form-section h2,
[data-theme-version="dark"] .page-becometrader .application-form-section h3 {
color: #fff !important;
}
[data-theme-version="dark"] .page-becometrader .benefits-section p,
[data-theme-version="dark"] .page-becometrader .application-form-section p {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-becometrader .step-indicator {
background: transparent !important;
}
[data-theme-version="dark"] .page-becometrader .step-indicator::before {
background: #334155 !important;
}
[data-theme-version="dark"] .page-becometrader .step-number {
background: #334155 !important;
color: #d1d5db !important;
border-color: #475569 !important;
}
[data-theme-version="dark"] .page-becometrader .step.active .step-number {
background: #6366F1 !important;
color: #fff !important;
}
[data-theme-version="dark"] .page-becometrader .step.completed .step-number {
background: #10b981 !important;
color: #fff !important;
}
[data-theme-version="dark"] .page-becometrader .step-label {
color: #9ca3af !important;
}
[data-theme-version="dark"] .page-becometrader .step.active .step-label {
color: #6366F1 !important;
}
[data-theme-version="dark"] .page-becometrader .form-label {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-becometrader .form-control,
[data-theme-version="dark"] .page-becometrader .form-select,
[data-theme-version="dark"] .page-becometrader input,
[data-theme-version="dark"] .page-becometrader select,
[data-theme-version="dark"] .page-becometrader textarea {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
[data-theme-version="dark"] .page-becometrader .form-control::placeholder,
[data-theme-version="dark"] .page-becometrader input::placeholder,
[data-theme-version="dark"] .page-becometrader textarea::placeholder {
color: #9ca3af !important;
-webkit-text-fill-color: #9ca3af !important;
}
[data-theme-version="dark"] .page-becometrader .form-control:focus,
[data-theme-version="dark"] .page-becometrader .form-select:focus,
[data-theme-version="dark"] .page-becometrader input:focus,
[data-theme-version="dark"] .page-becometrader select:focus {
border-color: #6366F1 !important;
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
}
[data-theme-version="dark"] .page-becometrader select option {
background-color: #1e293b !important;
color: #fff !important;
}
/* Autofill fix for become trader page */
[data-theme-version="dark"] .page-becometrader input:-webkit-autofill,
[data-theme-version="dark"] .page-becometrader input:-webkit-autofill:hover,
[data-theme-version="dark"] .page-becometrader input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px #1e293b inset !important;
-webkit-text-fill-color: #fff !important;
background-color: #1e293b !important;
}
[data-theme-version="dark"] .page-becometrader .file-upload-area {
background: rgba(255, 255, 255, 0.05) !important;
border-color: rgba(255, 255, 255, 0.15) !important;
}
[data-theme-version="dark"] .page-becometrader .file-upload-area p {
color: #9ca3af !important;
}
[data-theme-version="dark"] .page-becometrader .uploaded-file {
background: rgba(255, 255, 255, 0.08) !important;
}
[data-theme-version="dark"] .page-becometrader .uploaded-file-info span {
color: #fff !important;
}
[data-theme-version="dark"] .page-becometrader .btn-secondary {
background: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
color: #d1d5db !important;
}
/* ============================================================================
KYC & Address Verification Pages - Dark Mode
============================================================================ */
[data-theme-version="dark"] .page-kycverify .kyc-header,
[data-theme-version="dark"] .page-kycverify .kyc-content,
[data-theme-version="dark"] .page-kycverify .kyc-form-section,
[data-theme-version="dark"] .page-addressverify .address-header,
[data-theme-version="dark"] .page-addressverify .address-content,
[data-theme-version="dark"] .page-addressverify .address-form-section {
background: var(--card) !important;
}
[data-theme-version="dark"] .page-kycverify h2,
[data-theme-version="dark"] .page-kycverify h3,
[data-theme-version="dark"] .page-kycverify h4,
[data-theme-version="dark"] .page-addressverify h2,
[data-theme-version="dark"] .page-addressverify h3,
[data-theme-version="dark"] .page-addressverify h4 {
color: #fff !important;
}
[data-theme-version="dark"] .page-kycverify p,
[data-theme-version="dark"] .page-kycverify .form-label,
[data-theme-version="dark"] .page-addressverify p,
[data-theme-version="dark"] .page-addressverify .form-label {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-kycverify .form-control,
[data-theme-version="dark"] .page-kycverify .form-select,
[data-theme-version="dark"] .page-addressverify .form-control,
[data-theme-version="dark"] .page-addressverify .form-select {
background: rgba(255, 255, 255, 0.08) !important;
border-color: rgba(255, 255, 255, 0.15) !important;
color: #fff !important;
}
/* ============================================================================
Profile & Settings Pages - Dark Mode
============================================================================ */
[data-theme-version="dark"] .page-profile .profile-card,
[data-theme-version="dark"] .page-profile .info-card,
[data-theme-version="dark"] .page-settings .settings-card,
[data-theme-version="dark"] .page-changepwd .card {
background: var(--card) !important;
}
[data-theme-version="dark"] .page-profile h4,
[data-theme-version="dark"] .page-profile h5,
[data-theme-version="dark"] .page-profile strong,
[data-theme-version="dark"] .page-settings h4,
[data-theme-version="dark"] .page-settings h5,
[data-theme-version="dark"] .page-settings strong,
[data-theme-version="dark"] .page-changepwd h4,
[data-theme-version="dark"] .page-changepwd h5 {
color: #fff !important;
}
[data-theme-version="dark"] .page-profile p,
[data-theme-version="dark"] .page-profile span:not(.badge):not(.verification-badge):not(.profile-stat-value):not(.profile-stat-label),
[data-theme-version="dark"] .page-profile .form-label,
[data-theme-version="dark"] .page-settings p,
[data-theme-version="dark"] .page-settings span:not(.badge),
[data-theme-version="dark"] .page-settings .form-label,
[data-theme-version="dark"] .page-changepwd p,
[data-theme-version="dark"] .page-changepwd .form-label {
color: #d1d5db !important;
}
/* ============================================================================
Deposit & Withdrawal Pages - Dark Mode
============================================================================ */
[data-theme-version="dark"] .page-deposit .deposit-card,
[data-theme-version="dark"] .page-deposit .payment-card,
[data-theme-version="dark"] .page-deposit .method-card,
[data-theme-version="dark"] .page-withdraw .withdraw-card,
[data-theme-version="dark"] .page-withdraw .method-card,
[data-theme-version="dark"] .page-depositdetails .details-card,
[data-theme-version="dark"] .page-depositgateway .gateway-card,
[data-theme-version="dark"] .page-depositpending .pending-card,
[data-theme-version="dark"] .page-depositsuccess .success-card,
[data-theme-version="dark"] .page-plandeposit .plan-card,
[data-theme-version="dark"] .page-plandepositdet .details-card,
[data-theme-version="dark"] .page-plandepositgateway .gateway-card {
background: var(--card) !important;
}
/* ============================================================================
Planning Page - Dark Mode
============================================================================ */
[data-theme-version="dark"] .page-planning .plan-card,
[data-theme-version="dark"] .page-planning .plans-section {
background: var(--card) !important;
}
[data-theme-version="dark"] .page-planning .plan-card h4,
[data-theme-version="dark"] .page-planning .plan-card h5 {
color: #fff !important;
}
[data-theme-version="dark"] .page-planning .plan-card p,
[data-theme-version="dark"] .page-planning .plan-card span:not(.badge) {
color: #d1d5db !important;
}
/* ============================================================================
Copy Trader & Trader Details Pages - Dark Mode
============================================================================ */
[data-theme-version="dark"] .page-copytraders .trader-card,
[data-theme-version="dark"] .page-copytraders .filter-card,
[data-theme-version="dark"] .page-traderdetails .trader-card,
[data-theme-version="dark"] .page-traderdetails .stats-card {
background: var(--card) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme-version="dark"] .page-copytraders .trader-card h5,
[data-theme-version="dark"] .page-copytraders .trader-card strong,
[data-theme-version="dark"] .page-traderdetails h4,
[data-theme-version="dark"] .page-traderdetails h5,
[data-theme-version="dark"] .page-traderdetails strong {
color: #fff !important;
}
[data-theme-version="dark"] .page-copytraders .trader-card p,
[data-theme-version="dark"] .page-copytraders .trader-card span:not(.badge),
[data-theme-version="dark"] .page-traderdetails p,
[data-theme-version="dark"] .page-traderdetails span:not(.badge) {
color: #d1d5db !important;
}
/* ============================================================================
Notifications Page - Dark Mode
============================================================================ */
[data-theme-version="dark"] .page-notifications .notification-card,
[data-theme-version="dark"] .page-notifications .notifications-list {
background: var(--card) !important;
}
[data-theme-version="dark"] .page-notifications .notification-item {
background: rgba(255, 255, 255, 0.05) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme-version="dark"] .page-notifications h5,
[data-theme-version="dark"] .page-notifications strong {
color: #fff !important;
}
[data-theme-version="dark"] .page-notifications p,
[data-theme-version="dark"] .page-notifications span:not(.badge) {
color: #d1d5db !important;
}
/* ============================================================================
2FA Pages - Dark Mode
============================================================================ */
[data-theme-version="dark"] .page-twofa .twofa-card,
[data-theme-version="dark"] .page-twofa .setup-card {
background: var(--card) !important;
}
[data-theme-version="dark"] .page-twofa h4,
[data-theme-version="dark"] .page-twofa h5,
[data-theme-version="dark"] .page-twofa strong {
color: #fff !important;
}
[data-theme-version="dark"] .page-twofa p,
[data-theme-version="dark"] .page-twofa .form-label {
color: #d1d5db !important;
}
/* ============================================================================
Buy Crypto Page - Dark Mode
============================================================================ */
[data-theme-version="dark"] .page-buycrypto .exchange-card,
[data-theme-version="dark"] .page-buycrypto .crypto-card {
background: var(--card) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme-version="dark"] .page-buycrypto h4,
[data-theme-version="dark"] .page-buycrypto h5,
[data-theme-version="dark"] .page-buycrypto strong {
color: #fff !important;
}
[data-theme-version="dark"] .page-buycrypto p,
[data-theme-version="dark"] .page-buycrypto span {
color: #d1d5db !important;
}
/* ============================================================================
Copy Trading Agreement Page - Dark Mode
============================================================================ */
[data-theme-version="dark"] .page-ctagreement .agreement-card {
background: var(--card) !important;
}
[data-theme-version="dark"] .page-ctagreement h4,
[data-theme-version="dark"] .page-ctagreement h5 {
color: #fff !important;
}
[data-theme-version="dark"] .page-ctagreement p,
[data-theme-version="dark"] .page-ctagreement li {
color: #d1d5db !important;
}
/* ============================================================================
Badge Showcase Page - Dark Mode
============================================================================ */
[data-theme-version="dark"] .page-badgeshowcase .badge-card {
background: var(--card) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme-version="dark"] .page-badgeshowcase h4,
[data-theme-version="dark"] .page-badgeshowcase h5 {
color: #fff !important;
}
[data-theme-version="dark"] .page-badgeshowcase p {
color: #d1d5db !important;
}
/* ============================================================================
Referrals Page - Dark Mode
============================================================================ */
[data-theme-version="dark"] .page-referrals .referral-card,
[data-theme-version="dark"] .page-referrals .stats-card {
background: var(--card) !important;
}
[data-theme-version="dark"] .page-referrals h4,
[data-theme-version="dark"] .page-referrals h5,
[data-theme-version="dark"] .page-referrals strong {
color: #fff !important;
}
[data-theme-version="dark"] .page-referrals p,
[data-theme-version="dark"] .page-referrals span:not(.badge) {
color: #d1d5db !important;
}
/* ============================================================================
UNIVERSAL DARK MODE - Catch-all for remaining white backgrounds
============================================================================ */
/* Any card/section with white background */
[data-theme-version="dark"] .content-body .card:not(.card-primary):not(.card-secondary):not(.portfolio-card),
[data-theme-version="dark"] .content-body .section-card,
[data-theme-version="dark"] .content-body .form-section,
[data-theme-version="dark"] .content-body .info-section,
[data-theme-version="dark"] .content-body .details-section {
background: var(--card) !important;
}
/* Universal text color fixes */
[data-theme-version="dark"] .content-body h1,
[data-theme-version="dark"] .content-body h2,
[data-theme-version="dark"] .content-body h3,
[data-theme-version="dark"] .content-body h4,
[data-theme-version="dark"] .content-body h5,
[data-theme-version="dark"] .content-body h6 {
color: #fff !important;
}
/* Universal form styling */
[data-theme-version="dark"] .content-body .form-control:not([type="range"]),
[data-theme-version="dark"] .content-body .form-select,
[data-theme-version="dark"] .content-body select,
[data-theme-version="dark"] .content-body textarea {
background: rgba(255, 255, 255, 0.08) !important;
border-color: rgba(255, 255, 255, 0.15) !important;
color: #fff !important;
}
[data-theme-version="dark"] .content-body .form-control::placeholder {
color: #9ca3af !important;
}
[data-theme-version="dark"] .content-body .form-label,
[data-theme-version="dark"] .content-body label:not(.btn) {
color: #d1d5db !important;
}
/* Universal borders */
[data-theme-version="dark"] .content-body .card:not(.portfolio-card),
[data-theme-version="dark"] .content-body .section-card {
border-color: rgba(255, 255, 255, 0.1) !important;
}
/* File upload areas */
[data-theme-version="dark"] .file-upload-area,
[data-theme-version="dark"] .upload-area,
[data-theme-version="dark"] .dropzone {
background: rgba(255, 255, 255, 0.05) !important;
border-color: rgba(255, 255, 255, 0.15) !important;
}
/* Info/help text */
[data-theme-version="dark"] .help-block,
[data-theme-version="dark"] .form-text,
[data-theme-version="dark"] .hint-text {
color: #9ca3af !important;
}
/* ============================================================================
Notification Dropdown Fixes
============================================================================ */
/* Hide the default pink dot indicator on notification dropdown icons */
.nav-item.notification_dropdown a.nav-link::before {
display: none !important;
}
/* Notification count badge styling */
.notification-count-badge {
position: absolute;
top: -2px;
right: -2px;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: #ef4444;
color: white;
font-size: 11px;
font-weight: 600;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}
/* Hide badge when no unread notifications */
.notification-count-badge:empty,
.notification-count-badge.hidden {
display: none !important;
}
/* ============================================
TOAST NOTIFICATIONS - Persistent & Visible
============================================ */
#toastContainer {
position: fixed !important;
top: 20px !important;
right: 20px !important;
z-index: 2147483647 !important; /* Maximum z-index value */
width: 90% !important;
max-width: 400px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
animation: toastSlideIn 0.3s ease-out !important;
}
.toast-alert {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 16px 20px !important;
margin-bottom: 10px !important;
border-radius: 12px !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
.toast-alert.toast-success {
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
border: 1px solid #4ade80 !important;
color: #166534 !important;
}
.toast-alert.toast-error {
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
border: 1px solid #f87171 !important;
color: #991b1b !important;
}
.toast-alert.toast-warning {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
border: 1px solid #fbbf24 !important;
color: #92400e !important;
}
.toast-alert.toast-info {
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
border: 1px solid #60a5fa !important;
color: #1e40af !important;
}
.toast-icon {
font-size: 24px !important;
}
.toast-message {
flex: 1 !important;
font-size: 14px !important;
font-weight: 500 !important;
}
.toast-close {
background: none !important;
border: none !important;
cursor: pointer !important;
padding: 0 !important;
opacity: 0.7 !important;
color: inherit !important;
}
.toast-close i {
font-size: 20px !important;
}
.toast-close:hover {
opacity: 1 !important;
}
@keyframes toastSlideIn {
from {
opacity: 0;
transform: translateX(100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes toastSlideOut {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(100px);
}
}
/* Toast Alerts - Dark Mode */
[data-theme-version="dark"] .toast-alert.toast-success {
background: linear-gradient(135deg, #065f46 0%, #047857 100%) !important;
border: 1px solid #10b981 !important;
color: #ffffff !important;
}
[data-theme-version="dark"] .toast-alert.toast-error {
background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%) !important;
border: 1px solid #ef4444 !important;
color: #ffffff !important;
}
[data-theme-version="dark"] .toast-alert.toast-warning {
background: linear-gradient(135deg, #78350f 0%, #92400e 100%) !important;
border: 1px solid #f59e0b !important;
color: #ffffff !important;
}
[data-theme-version="dark"] .toast-alert.toast-info {
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%) !important;
border: 1px solid #3b82f6 !important;
color: #ffffff !important;
}
[data-theme-version="dark"] .toast-icon {
color: #ffffff !important;
}
[data-theme-version="dark"] .toast-message {
color: #ffffff !important;
}
[data-theme-version="dark"] .toast-close {
color: #ffffff !important;
}
/* ==========================================
Global Back Button Styles
========================================== */
.back-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: rgba(99, 102, 241, 0.12);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.back-btn:hover {
background: rgba(99, 102, 241, 0.2);
transform: translateY(-1px);
}
.back-btn:active {
transform: translateY(0);
}
.back-btn i {
font-size: 20px;
color: #6366F1;
}
.back-btn:hover i {
color: #4F46E5;
}
/* Page titles with back button */
.page-titles-with-back {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
gap: 10px;
}
.page-titles-with-back .breadcrumb {
flex: 1;
min-width: 0;
flex-wrap: nowrap;
overflow: hidden;
}
/* Breadcrumb text - Full vs Short versions - ensure no box/background styling */
.breadcrumb-short,
.breadcrumb-full,
[data-theme-version="dark"] .breadcrumb-short,
[data-theme-version="dark"] .breadcrumb-full {
background: none !important;
background-color: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
outline: none !important;
}
/* Desktop: hide short, show full */
.breadcrumb-short {
display: none !important;
}
.breadcrumb-full {
display: inline !important;
}
/* Mobile Breadcrumb Responsive */
@media (max-width: 576px) {
.page-titles-with-back {
padding: 0.5rem 0.75rem !important;
}
.page-titles-with-back .breadcrumb {
gap: 0;
}
.page-titles-with-back .breadcrumb li {
padding-left: 1rem;
}
.page-titles-with-back .breadcrumb li:first-child {
padding-left: 0;
}
.page-titles-with-back .breadcrumb li a {
font-size: 12px;
}
/* Show short text, hide full text on mobile */
.breadcrumb-short {
display: inline !important;
}
.breadcrumb-full {
display: none !important;
}
/* Smaller back button on mobile */
.back-btn {
width: 32px;
height: 32px;
}
.back-btn i {
font-size: 18px;
}
}
/* ============================================================================
MASTER DARK MODE OVERRIDE SECTION
This section ensures all common elements are styled correctly in dark mode
across the entire application. Use maximum specificity.
============================================================================ */
/* Universal Input/Form Dark Mode - Covers all pages */
/* Removed universal input background override - inputs inherit from parent or page-specific styles */
[data-theme-version="dark"] input:not([type="checkbox"]):not([type="radio"])::placeholder,
[data-theme-version="dark"] textarea::placeholder,
body[data-theme-version="dark"] input::placeholder,
body[data-theme-version="dark"] textarea::placeholder {
color: #9ca3af !important;
-webkit-text-fill-color: #9ca3af !important;
opacity: 1 !important;
}
[data-theme-version="dark"] input:focus,
[data-theme-version="dark"] select:focus,
[data-theme-version="dark"] textarea:focus,
body[data-theme-version="dark"] input:focus,
body[data-theme-version="dark"] select:focus,
body[data-theme-version="dark"] textarea:focus {
border-color: #6366F1 !important;
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
outline: none !important;
}
/* Universal Select Options */
[data-theme-version="dark"] select option,
[data-theme-version="dark"] .form-select option,
[data-theme-version="dark"] .form-control option,
body[data-theme-version="dark"] select option {
background: #1e293b !important;
background-color: #1e293b !important;
color: #fff !important;
}
/* Universal Autofill - Covers all pages */
[data-theme-version="dark"] input:-webkit-autofill,
[data-theme-version="dark"] input:-webkit-autofill:hover,
[data-theme-version="dark"] input:-webkit-autofill:focus,
[data-theme-version="dark"] input:-webkit-autofill:active,
body[data-theme-version="dark"] input:-webkit-autofill,
body[data-theme-version="dark"] input:-webkit-autofill:hover,
body[data-theme-version="dark"] input:-webkit-autofill:focus,
body[data-theme-version="dark"] input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 1000px #1e293b inset !important;
-webkit-text-fill-color: #fff !important;
background-color: #1e293b !important;
color: #fff !important;
caret-color: #fff !important;
border-color: #334155 !important;
transition: background-color 5000s ease-in-out 0s;
}
/* Universal Text Colors */
[data-theme-version="dark"] h1,
[data-theme-version="dark"] h2,
[data-theme-version="dark"] h3,
[data-theme-version="dark"] h4,
[data-theme-version="dark"] h5,
[data-theme-version="dark"] h6 {
color: #f1f5f9 !important;
}
[data-theme-version="dark"] p:not(.account-card p),
[data-theme-version="dark"] span:not(.badge):not(.status-badge):not(.btn):not(.breadcrumb-short):not(.breadcrumb-full):not(.account-card span),
[data-theme-version="dark"] label:not(.account-card label) {
color: #cbd5e1;
}
/* Universal Card/Container Dark Mode */
[data-theme-version="dark"] .card:not(.account-card):not(.portfolio-card),
[data-theme-version="dark"] .card-body:not(.account-card .card-body):not(.portfolio-card .card-body),
[data-theme-version="dark"] .content-card,
body[data-theme-version="dark"] .card:not(.account-card):not(.portfolio-card),
body[data-theme-version="dark"] .card-body:not(.account-card .card-body):not(.portfolio-card .card-body) {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
/* Universal Table Dark Mode */
[data-theme-version="dark"] table,
[data-theme-version="dark"] .table {
color: #e2e8f0 !important;
}
[data-theme-version="dark"] table th,
[data-theme-version="dark"] .table th {
background: rgba(255, 255, 255, 0.05) !important;
color: #f1f5f9 !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] table td,
[data-theme-version="dark"] .table td {
border-color: #334155 !important;
color: #e2e8f0 !important;
}
[data-theme-version="dark"] table tr:hover td,
[data-theme-version="dark"] .table tr:hover td {
background: rgba(255, 255, 255, 0.05) !important;
}
/* Universal Modal Dark Mode */
[data-theme-version="dark"] .modal-content {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .modal-header {
background: #1e293b !important;
border-bottom-color: #334155 !important;
}
[data-theme-version="dark"] .modal-footer {
background: #1e293b !important;
border-top-color: #334155 !important;
}
[data-theme-version="dark"] .modal-title {
color: #f1f5f9 !important;
}
/* Universal Dropdown Menu Dark Mode */
[data-theme-version="dark"] .dropdown-menu {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .dropdown-item {
color: #e2e8f0 !important;
}
[data-theme-version="dark"] .dropdown-item:hover,
[data-theme-version="dark"] .dropdown-item:focus {
background: rgba(99, 102, 241, 0.15) !important;
color: #fff !important;
}
/* Universal Alert/Badge Colors remain visible */
[data-theme-version="dark"] .alert-success {
background: rgba(16, 185, 129, 0.15) !important;
border-color: rgba(16, 185, 129, 0.3) !important;
color: #10b981 !important;
}
[data-theme-version="dark"] .alert-danger,
[data-theme-version="dark"] .alert-error {
background: rgba(239, 68, 68, 0.15) !important;
border-color: rgba(239, 68, 68, 0.3) !important;
color: #ef4444 !important;
}
[data-theme-version="dark"] .alert-warning {
background: rgba(245, 158, 11, 0.15) !important;
border-color: rgba(245, 158, 11, 0.3) !important;
color: #f59e0b !important;
}
[data-theme-version="dark"] .alert-info {
background: rgba(59, 130, 246, 0.15) !important;
border-color: rgba(59, 130, 246, 0.3) !important;
color: #3b82f6 !important;
}
/* Universal List Group Dark Mode */
[data-theme-version="dark"] .list-group-item {
background: #1e293b !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
[data-theme-version="dark"] .list-group-item:hover {
background: rgba(255, 255, 255, 0.05) !important;
}
/* Universal Border/Divider Dark Mode */
[data-theme-version="dark"] hr,
[data-theme-version="dark"] .divider {
border-color: #334155 !important;
}
/* Ensure text-muted is visible in dark mode */
[data-theme-version="dark"] .text-muted {
color: #9ca3af !important;
}
/* Ensure links are visible in dark mode */
[data-theme-version="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item) {
color: #818cf8;
}
[data-theme-version="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
color: #a5b4fc;
}
/* Stat Items Universal Fix - Highest Priority */
[data-theme-version="dark"] .stat-item,
[data-theme-version="dark"] .price-stats .stat-item,
body[data-theme-version="dark"] .stat-item,
html[data-theme-version="dark"] .stat-item {
background: #1e293b !important;
background-color: #1e293b !important;
border: 1px solid #334155 !important;
}
[data-theme-version="dark"] .stat-label,
body[data-theme-version="dark"] .stat-label {
color: #9ca3af !important;
}
[data-theme-version="dark"] .stat-value,
body[data-theme-version="dark"] .stat-value {
color: #fff !important;
}
/* ============================================================================
ADDITIONAL PAGE-SPECIFIC DARK MODE FIXES
============================================================================ */
/* Deposit Page - Fee Breakdown */
[data-theme-version="dark"] .page-deposit .fee-breakdown,
[data-theme-version="dark"] .page-withdraw .fee-breakdown {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-deposit .fee-row,
[data-theme-version="dark"] .page-withdraw .fee-row {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-deposit .fee-row.total,
[data-theme-version="dark"] .page-withdraw .fee-row.total {
color: #6366F1 !important;
border-top-color: #334155 !important;
}
[data-theme-version="dark"] .page-deposit .fee-row.total strong,
[data-theme-version="dark"] .page-withdraw .fee-row.total strong {
color: #6366F1 !important;
}
[data-theme-version="dark"] .page-deposit .card,
[data-theme-version="dark"] .page-withdraw .card {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-deposit .form-label,
[data-theme-version="dark"] .page-withdraw .form-label {
color: #e2e8f0 !important;
}
[data-theme-version="dark"] .page-deposit input,
[data-theme-version="dark"] .page-deposit select,
[data-theme-version="dark"] .page-withdraw input,
[data-theme-version="dark"] .page-withdraw select {
background: #0f172a !important;
background-color: #0f172a !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-deposit .deposit-select,
[data-theme-version="dark"] .page-deposit .deposit-input,
[data-theme-version="dark"] .page-withdraw .withdraw-select,
[data-theme-version="dark"] .page-withdraw .withdraw-input {
background: #0f172a !important;
color: #fff !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-deposit .amount-input-wrapper input,
[data-theme-version="dark"] .page-withdraw .amount-input-wrapper input {
background: #0f172a !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
[data-theme-version="dark"] .page-deposit .input-prefix,
[data-theme-version="dark"] .page-withdraw .input-prefix {
color: #9ca3af !important;
}
[data-theme-version="dark"] .page-deposit .input-suffix,
[data-theme-version="dark"] .page-withdraw .input-suffix {
background: #334155 !important;
color: #e2e8f0 !important;
}
/* Ensure all deposit/withdraw inputs have consistent dark background */
[data-theme-version="dark"] .page-deposit .deposit-select,
[data-theme-version="dark"] .page-deposit .deposit-input,
[data-theme-version="dark"] .page-deposit .amount-input-wrapper,
[data-theme-version="dark"] .page-withdraw .withdraw-select,
[data-theme-version="dark"] .page-withdraw .withdraw-input,
[data-theme-version="dark"] .page-withdraw .amount-input-wrapper {
background: #0f172a !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-deposit .form-control,
[data-theme-version="dark"] .page-deposit .form-select,
[data-theme-version="dark"] .page-withdraw .form-control,
[data-theme-version="dark"] .page-withdraw .form-select {
background: #0f172a !important;
background-color: #0f172a !important;
color: #fff !important;
border-color: #334155 !important;
}
/* Select dropdown options in dark mode */
[data-theme-version="dark"] .page-deposit .deposit-select option,
[data-theme-version="dark"] .page-deposit select option,
[data-theme-version="dark"] .page-withdraw .withdraw-select option,
[data-theme-version="dark"] .page-withdraw select option {
background: #1e293b !important;
color: #fff !important;
}
/* Amount input wrapper - ensure input inside has correct dark background */
[data-theme-version="dark"] .page-deposit .amount-input-wrapper input,
[data-theme-version="dark"] .page-withdraw .amount-input-wrapper input {
background: #0f172a !important;
background-color: #0f172a !important;
color: #fff !important;
border-color: #334155 !important;
}
/* Planning Page - Plan Cards */
[data-theme-version="dark"] .page-planning .plan-card,
[data-theme-version="dark"] .page-planning .pricing-card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-planning .plan-card:hover,
[data-theme-version="dark"] .page-planning .pricing-card:hover {
border-color: #6366F1 !important;
}
[data-theme-version="dark"] .page-planning .plan-title,
[data-theme-version="dark"] .page-planning .plan-name,
[data-theme-version="dark"] .page-planning h4,
[data-theme-version="dark"] .page-planning h5 {
color: #fff !important;
}
[data-theme-version="dark"] .page-planning .plan-price,
[data-theme-version="dark"] .page-planning .price {
color: #6366F1 !important;
}
[data-theme-version="dark"] .page-planning .plan-feature,
[data-theme-version="dark"] .page-planning .feature-item,
[data-theme-version="dark"] .page-planning li {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-planning .plan-category,
[data-theme-version="dark"] .page-planning .category-title {
color: #9ca3af !important;
}
/* Planning Page Buttons - Ensure white text in dark mode */
[data-theme-version="dark"] .page-planning .plan-button,
[data-theme-version="dark"] .page-planning a.plan-button,
[data-theme-version="dark"] .page-planning .plan-button:hover,
[data-theme-version="dark"] .page-planning a.plan-button:hover,
[data-theme-version="dark"] .page-planning a.plan-button:visited,
[data-theme-version="dark"] .page-planning .staking-plan-button,
[data-theme-version="dark"] .page-planning a.staking-plan-button,
[data-theme-version="dark"] .page-planning .staking-plan-button:hover,
[data-theme-version="dark"] .page-planning a.staking-plan-button:hover,
[data-theme-version="dark"] .page-planning a.staking-plan-button:visited {
color: #ffffff !important;
}
/* Profile Page */
[data-theme-version="dark"] .page-profile .card,
[data-theme-version="dark"] .page-profile .profile-card,
[data-theme-version="dark"] .page-profile .info-card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-profile h4,
[data-theme-version="dark"] .page-profile h5,
[data-theme-version="dark"] .page-profile strong {
color: #fff !important;
}
[data-theme-version="dark"] .page-profile p,
[data-theme-version="dark"] .page-profile span:not(.badge):not(.verification-badge):not(.profile-stat-value):not(.profile-stat-label),
[data-theme-version="dark"] .page-profile label {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-profile .profile-info-item,
[data-theme-version="dark"] .page-profile .info-row {
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-profile .text-muted {
color: #9ca3af !important;
}
/* Referrals Page - Fix green color issue */
[data-theme-version="dark"] .page-referrals .card,
[data-theme-version="dark"] .page-referrals .referral-card,
[data-theme-version="dark"] .page-referrals .balance-card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-referrals .balance-display {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(79, 70, 229, 0.2) 100%) !important;
}
[data-theme-version="dark"] .page-referrals h4,
[data-theme-version="dark"] .page-referrals h5,
[data-theme-version="dark"] .page-referrals strong {
color: #fff !important;
}
[data-theme-version="dark"] .page-referrals p,
[data-theme-version="dark"] .page-referrals span:not(.badge),
[data-theme-version="dark"] .page-referrals label {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-referrals .referral-link-input {
background: #0f172a !important;
border-color: #334155 !important;
color: #fff !important;
}
/* Settings Pages */
[data-theme-version="dark"] .page-accountsettings .card,
[data-theme-version="dark"] .page-changepassword .card,
[data-theme-version="dark"] .page-settings .card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-accountsettings h4,
[data-theme-version="dark"] .page-accountsettings h5,
[data-theme-version="dark"] .page-changepassword h4,
[data-theme-version="dark"] .page-changepassword h5,
[data-theme-version="dark"] .page-settings h4,
[data-theme-version="dark"] .page-settings h5 {
color: #fff !important;
}
[data-theme-version="dark"] .page-accountsettings p,
[data-theme-version="dark"] .page-accountsettings label,
[data-theme-version="dark"] .page-changepassword p,
[data-theme-version="dark"] .page-changepassword label,
[data-theme-version="dark"] .page-settings p,
[data-theme-version="dark"] .page-settings label {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-accountsettings input,
[data-theme-version="dark"] .page-accountsettings select,
[data-theme-version="dark"] .page-changepassword input,
[data-theme-version="dark"] .page-settings input,
[data-theme-version="dark"] .page-settings select {
background: #1e293b !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
border-color: #334155 !important;
}
/* Settings page buttons in dark mode */
[data-theme-version="dark"] .page-settings .btn-settings {
background: transparent !important;
color: #01A3FF !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-settings .btn-settings:hover {
background: #01A3FF !important;
color: #fff !important;
border-color: #01A3FF !important;
}
[data-theme-version="dark"] .page-settings .btn-settings-danger {
color: #f87171 !important;
border-color: #7f1d1d !important;
}
[data-theme-version="dark"] .page-settings .btn-settings-danger:hover {
background: #dc2626 !important;
color: #fff !important;
border-color: #dc2626 !important;
}
/* Security Questions in dark mode */
[data-theme-version="dark"] .page-settings .security-question-item {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-settings .security-question-label {
color: #9ca3af !important;
}
[data-theme-version="dark"] .page-settings .security-question-text {
color: #e2e8f0 !important;
}
/* Pagination in dark mode */
[data-theme-version="dark"] .pagination .page-item .page-link {
background: #1e293b !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
[data-theme-version="dark"] .pagination .page-item.active .page-link {
background: #6366F1 !important;
border-color: #6366F1 !important;
color: #fff !important;
}
[data-theme-version="dark"] .pagination .page-item .page-link:hover {
background: #334155 !important;
}
/* All content-body areas */
[data-theme-version="dark"] .content-body {
background: transparent !important;
}
/* Fix content-body stacking context to ensure it stays below fixed header */
.content-body {
position: relative;
z-index: 1;
}
/* Text visibility fixes */
[data-theme-version="dark"] .page-deposit .text-muted,
[data-theme-version="dark"] .page-withdraw .text-muted,
[data-theme-version="dark"] .page-deposithistory .text-muted,
[data-theme-version="dark"] .page-withdrawalhistory .text-muted {
color: #9ca3af !important;
}
/* Currency badge fix */
[data-theme-version="dark"] .currency-badge {
background: #0f172a !important;
color: #fff !important;
}
/* ============================================================================
DEPOSIT HISTORY PAGE - COMPREHENSIVE DARK MODE FIX
============================================================================ */
[data-theme-version="dark"] .page-deposithistory .deposits-card,
[data-theme-version="dark"] .page-deposithistory .card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-deposithistory .deposits-table {
background: #1e293b !important;
}
[data-theme-version="dark"] .page-deposithistory .deposits-table thead,
[data-theme-version="dark"] .page-deposithistory .deposits-table thead tr {
background: #0f172a !important;
background-color: #0f172a !important;
}
[data-theme-version="dark"] .page-deposithistory .deposits-table thead th {
background: #0f172a !important;
background-color: #0f172a !important;
color: #e2e8f0 !important;
border-bottom: 1px solid #334155 !important;
}
[data-theme-version="dark"] .page-deposithistory .deposits-table tbody tr {
background: #1e293b !important;
border-bottom: 1px solid #334155 !important;
}
[data-theme-version="dark"] .page-deposithistory .deposits-table tbody tr:hover {
background: rgba(255, 255, 255, 0.05) !important;
}
[data-theme-version="dark"] .page-deposithistory .deposits-table td {
color: #d1d5db !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-deposithistory .deposits-table td strong {
color: #fff !important;
}
[data-theme-version="dark"] .page-deposithistory .amount-display {
color: #fff !important;
}
[data-theme-version="dark"] .page-deposithistory .amount-usd {
color: #9ca3af !important;
}
[data-theme-version="dark"] .page-deposithistory .action-btn {
background: rgba(99, 102, 241, 0.15) !important;
color: #818cf8 !important;
}
[data-theme-version="dark"] .page-deposithistory .action-btn:hover {
background: rgba(99, 102, 241, 0.25) !important;
}
/* Filters card dark mode */
[data-theme-version="dark"] .page-deposithistory .filters-card {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-deposithistory .filter-label {
color: #9ca3af !important;
}
[data-theme-version="dark"] .page-deposithistory .filter-input,
[data-theme-version="dark"] .page-deposithistory .filter-select {
background: #0f172a !important;
background-color: #0f172a !important;
color: #fff !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-deposithistory .filter-select option {
background: #1e293b !important;
color: #fff !important;
}
[data-theme-version="dark"] .page-deposithistory .search-wrapper {
background: #0f172a !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-deposithistory .search-wrapper input {
background: transparent !important;
color: #fff !important;
}
[data-theme-version="dark"] .page-deposithistory .search-wrapper i {
color: #9ca3af !important;
}
/* Page header dark mode */
[data-theme-version="dark"] .page-deposithistory .page-header {
background: transparent !important;
border-color: transparent !important;
}
[data-theme-version="dark"] .page-deposithistory .page-header h3 {
color: #fff !important;
}
[data-theme-version="dark"] .page-deposithistory .page-header-subtitle {
color: #9ca3af !important;
}
/* Pagination dark mode */
[data-theme-version="dark"] .page-deposithistory .pagination-wrapper {
color: #9ca3af !important;
}
[data-theme-version="dark"] .page-deposithistory .page-btn {
background: #1e293b !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
[data-theme-version="dark"] .page-deposithistory .page-btn.active {
background: #6366F1 !important;
border-color: #6366F1 !important;
color: #fff !important;
}
[data-theme-version="dark"] .page-deposithistory .page-btn:hover:not(.active) {
background: #334155 !important;
}
/* Empty state dark mode */
[data-theme-version="dark"] .page-deposithistory .empty-state {
color: #9ca3af !important;
}
[data-theme-version="dark"] .page-deposithistory .empty-state h4 {
color: #fff !important;
}
/* ============================================================================
WITHDRAWAL HISTORY PAGE - COMPREHENSIVE DARK MODE FIX
============================================================================ */
[data-theme-version="dark"] .page-withdrawalhistory .card,
[data-theme-version="dark"] .page-withdrawhist .card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-withdrawalhistory table,
[data-theme-version="dark"] .page-withdrawhist table {
background: #1e293b !important;
}
[data-theme-version="dark"] .page-withdrawalhistory thead,
[data-theme-version="dark"] .page-withdrawalhistory thead tr,
[data-theme-version="dark"] .page-withdrawhist thead,
[data-theme-version="dark"] .page-withdrawhist thead tr {
background: #0f172a !important;
background-color: #0f172a !important;
}
[data-theme-version="dark"] .page-withdrawalhistory thead th,
[data-theme-version="dark"] .page-withdrawhist thead th {
background: #0f172a !important;
background-color: #0f172a !important;
color: #e2e8f0 !important;
border-bottom: 1px solid #334155 !important;
}
[data-theme-version="dark"] .page-withdrawalhistory tbody tr,
[data-theme-version="dark"] .page-withdrawhist tbody tr {
background: #1e293b !important;
border-bottom: 1px solid #334155 !important;
}
[data-theme-version="dark"] .page-withdrawalhistory tbody tr:hover,
[data-theme-version="dark"] .page-withdrawhist tbody tr:hover {
background: rgba(255, 255, 255, 0.05) !important;
}
[data-theme-version="dark"] .page-withdrawalhistory td,
[data-theme-version="dark"] .page-withdrawhist td {
color: #d1d5db !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-withdrawalhistory td strong,
[data-theme-version="dark"] .page-withdrawhist td strong {
color: #fff !important;
}
[data-theme-version="dark"] .page-withdrawalhistory .filters-card,
[data-theme-version="dark"] .page-withdrawhist .filters-card {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-withdrawalhistory .filter-input,
[data-theme-version="dark"] .page-withdrawalhistory .filter-select,
[data-theme-version="dark"] .page-withdrawhist .filter-input,
[data-theme-version="dark"] .page-withdrawhist .filter-select {
background: #0f172a !important;
color: #fff !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-withdrawalhistory .page-header,
[data-theme-version="dark"] .page-withdrawhist .page-header {
background: transparent !important;
}
[data-theme-version="dark"] .page-withdrawalhistory .page-header h3,
[data-theme-version="dark"] .page-withdrawhist .page-header h3 {
color: #fff !important;
}
/* ============================================================================
AFFILIATE PAGE - COMPREHENSIVE DARK MODE FIX
============================================================================ */
[data-theme-version="dark"] .page-affiliate .card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-affiliate h4,
[data-theme-version="dark"] .page-affiliate h5,
[data-theme-version="dark"] .page-affiliate strong {
color: #fff !important;
}
[data-theme-version="dark"] .page-affiliate p,
[data-theme-version="dark"] .page-affiliate span:not(.badge),
[data-theme-version="dark"] .page-affiliate label {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-affiliate .balance-display {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(79, 70, 229, 0.2) 100%) !important;
}
[data-theme-version="dark"] .page-affiliate .referral-link-input,
[data-theme-version="dark"] .page-affiliate input {
background: #0f172a !important;
color: #fff !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-affiliate table {
background: #1e293b !important;
}
[data-theme-version="dark"] .page-affiliate thead {
background: #0f172a !important;
}
[data-theme-version="dark"] .page-affiliate thead th {
background: #0f172a !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-affiliate tbody tr {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-affiliate td {
color: #d1d5db !important;
border-color: #334155 !important;
}
/* ============================================================================
KYC VERIFICATION PAGE - DARK MODE FIX
============================================================================ */
[data-theme-version="dark"] .page-kycverify .card,
[data-theme-version="dark"] .page-kycverification .card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-kycverify h4,
[data-theme-version="dark"] .page-kycverify h5,
[data-theme-version="dark"] .page-kycverify strong,
[data-theme-version="dark"] .page-kycverification h4,
[data-theme-version="dark"] .page-kycverification h5,
[data-theme-version="dark"] .page-kycverification strong {
color: #fff !important;
}
[data-theme-version="dark"] .page-kycverify p,
[data-theme-version="dark"] .page-kycverify span:not(.badge):not(.step-number),
[data-theme-version="dark"] .page-kycverify label,
[data-theme-version="dark"] .page-kycverification p,
[data-theme-version="dark"] .page-kycverification span:not(.badge):not(.step-number),
[data-theme-version="dark"] .page-kycverification label {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-kycverify input,
[data-theme-version="dark"] .page-kycverify select,
[data-theme-version="dark"] .page-kycverification input,
[data-theme-version="dark"] .page-kycverification select {
background: #0f172a !important;
color: #fff !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-kycverify .upload-area,
[data-theme-version="dark"] .page-kycverification .upload-area {
background: #0f172a !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-kycverify .step-item.completed .step-number,
[data-theme-version="dark"] .page-kycverification .step-item.completed .step-number {
background: #10b981 !important;
}
[data-theme-version="dark"] .page-kycverify .step-item.active .step-number,
[data-theme-version="dark"] .page-kycverification .step-item.active .step-number {
background: #6366F1 !important;
}
/* ============================================================================
ADDRESS VERIFICATION PAGE - DARK MODE FIX
============================================================================ */
[data-theme-version="dark"] .page-addressverify .card,
[data-theme-version="dark"] .page-addressverification .card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-addressverify h4,
[data-theme-version="dark"] .page-addressverify h5,
[data-theme-version="dark"] .page-addressverify strong,
[data-theme-version="dark"] .page-addressverification h4,
[data-theme-version="dark"] .page-addressverification h5,
[data-theme-version="dark"] .page-addressverification strong {
color: #fff !important;
}
[data-theme-version="dark"] .page-addressverify p,
[data-theme-version="dark"] .page-addressverify span:not(.badge):not(.step-number),
[data-theme-version="dark"] .page-addressverify label,
[data-theme-version="dark"] .page-addressverification p,
[data-theme-version="dark"] .page-addressverification span:not(.badge):not(.step-number),
[data-theme-version="dark"] .page-addressverification label {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-addressverify input,
[data-theme-version="dark"] .page-addressverify select,
[data-theme-version="dark"] .page-addressverification input,
[data-theme-version="dark"] .page-addressverification select {
background: #0f172a !important;
color: #fff !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-addressverify .upload-area,
[data-theme-version="dark"] .page-addressverification .upload-area {
background: #0f172a !important;
border-color: #334155 !important;
}
/* ============================================================================
2FA SETUP PAGE - DARK MODE FIX
============================================================================ */
[data-theme-version="dark"] .page-twofa .card,
[data-theme-version="dark"] .page-2fa .card,
[data-theme-version="dark"] .page-twofactor .card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-twofa h4,
[data-theme-version="dark"] .page-twofa h5,
[data-theme-version="dark"] .page-twofa strong,
[data-theme-version="dark"] .page-2fa h4,
[data-theme-version="dark"] .page-2fa h5,
[data-theme-version="dark"] .page-2fa strong,
[data-theme-version="dark"] .page-twofactor h4,
[data-theme-version="dark"] .page-twofactor h5,
[data-theme-version="dark"] .page-twofactor strong {
color: #fff !important;
}
[data-theme-version="dark"] .page-twofa p,
[data-theme-version="dark"] .page-twofa span:not(.badge),
[data-theme-version="dark"] .page-twofa label,
[data-theme-version="dark"] .page-2fa p,
[data-theme-version="dark"] .page-2fa span:not(.badge),
[data-theme-version="dark"] .page-2fa label,
[data-theme-version="dark"] .page-twofactor p,
[data-theme-version="dark"] .page-twofactor span:not(.badge),
[data-theme-version="dark"] .page-twofactor label {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-2fa input,
[data-theme-version="dark"] .page-twofactor input {
background: #0f172a !important;
color: #fff !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-2fa .qr-code-container,
[data-theme-version="dark"] .page-twofactor .qr-code-container {
background: #fff !important;
padding: 16px;
border-radius: 8px;
}
/* ============================================================================
MY TRADES PAGE - DARK MODE FIX
============================================================================ */
[data-theme-version="dark"] .page-mytrades .card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-mytrades table {
background: #1e293b !important;
}
[data-theme-version="dark"] .page-mytrades thead {
background: #0f172a !important;
}
[data-theme-version="dark"] .page-mytrades thead th {
background: #0f172a !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-mytrades tbody tr {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-mytrades tbody tr:hover {
background: rgba(255, 255, 255, 0.05) !important;
}
[data-theme-version="dark"] .page-mytrades td {
color: #d1d5db !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-mytrades td strong {
color: #fff !important;
}
[data-theme-version="dark"] .page-mytrades .filters-card {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-mytrades .filter-input,
[data-theme-version="dark"] .page-mytrades .filter-select {
background: #0f172a !important;
color: #fff !important;
border-color: #334155 !important;
}
/* ============================================================================
NOTIFICATIONS PAGE - DARK MODE FIX
============================================================================ */
[data-theme-version="dark"] .page-notifications .card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-notifications h4,
[data-theme-version="dark"] .page-notifications h5,
[data-theme-version="dark"] .page-notifications strong {
color: #fff !important;
}
[data-theme-version="dark"] .page-notifications p,
[data-theme-version="dark"] .page-notifications span:not(.badge),
[data-theme-version="dark"] .page-notifications .notification-text {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-notifications .notification-item {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-notifications .notification-item:hover {
background: rgba(255, 255, 255, 0.05) !important;
}
[data-theme-version="dark"] .page-notifications .notification-time {
color: #9ca3af !important;
}
/* ============================================================================
BUY CRYPTO PAGE - DARK MODE FIX
============================================================================ */
[data-theme-version="dark"] .page-buycrypto .card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-buycrypto h4,
[data-theme-version="dark"] .page-buycrypto h5,
[data-theme-version="dark"] .page-buycrypto strong {
color: #fff !important;
}
[data-theme-version="dark"] .page-buycrypto p,
[data-theme-version="dark"] .page-buycrypto span:not(.badge),
[data-theme-version="dark"] .page-buycrypto label {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-buycrypto .exchange-card {
background: #0f172a !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-buycrypto .exchange-card:hover {
border-color: #6366F1 !important;
}
/* ============================================================================
UNIVERSAL TABLE DARK MODE - HIGHEST PRIORITY
============================================================================ */
body[data-theme-version="dark"] table,
html[data-theme-version="dark"] table {
background: #1e293b !important;
}
body[data-theme-version="dark"] thead,
body[data-theme-version="dark"] thead tr,
html[data-theme-version="dark"] thead,
html[data-theme-version="dark"] thead tr {
background: #0f172a !important;
background-color: #0f172a !important;
}
body[data-theme-version="dark"] thead th,
html[data-theme-version="dark"] thead th {
background: #0f172a !important;
background-color: #0f172a !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
body[data-theme-version="dark"] tbody tr,
html[data-theme-version="dark"] tbody tr {
background: #1e293b !important;
border-color: #334155 !important;
}
body[data-theme-version="dark"] tbody td,
html[data-theme-version="dark"] tbody td {
color: #d1d5db !important;
border-color: #334155 !important;
}
body[data-theme-version="dark"] tbody tr:hover,
html[data-theme-version="dark"] tbody tr:hover {
background: rgba(255, 255, 255, 0.05) !important;
}
/* ============================================================================
UNIVERSAL FILTER/SEARCH CARD DARK MODE
============================================================================ */
body[data-theme-version="dark"] .filters-card,
html[data-theme-version="dark"] .filters-card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
body[data-theme-version="dark"] .filter-label,
html[data-theme-version="dark"] .filter-label {
color: #9ca3af !important;
}
body[data-theme-version="dark"] .filter-input,
body[data-theme-version="dark"] .filter-select,
html[data-theme-version="dark"] .filter-input,
html[data-theme-version="dark"] .filter-select {
background: #0f172a !important;
background-color: #0f172a !important;
color: #fff !important;
border-color: #334155 !important;
}
body[data-theme-version="dark"] .filter-select option,
html[data-theme-version="dark"] .filter-select option {
background: #1e293b !important;
color: #fff !important;
}
body[data-theme-version="dark"] .search-wrapper,
html[data-theme-version="dark"] .search-wrapper {
background: #0f172a !important;
border-color: #334155 !important;
}
body[data-theme-version="dark"] .search-wrapper input,
html[data-theme-version="dark"] .search-wrapper input {
background: transparent !important;
color: #fff !important;
}
body[data-theme-version="dark"] .search-wrapper i,
html[data-theme-version="dark"] .search-wrapper i {
color: #9ca3af !important;
}
/* ============================================================================
UNIVERSAL PAGE HEADER DARK MODE
============================================================================ */
body[data-theme-version="dark"] .page-header,
html[data-theme-version="dark"] .page-header {
background: transparent !important;
background-color: transparent !important;
border-color: transparent !important;
}
body[data-theme-version="dark"] .page-header h3,
html[data-theme-version="dark"] .page-header h3 {
color: #fff !important;
}
body[data-theme-version="dark"] .page-header-subtitle,
html[data-theme-version="dark"] .page-header-subtitle {
color: #9ca3af !important;
}
/* ============================================================================
DEPOSIT DETAILS PAGE - DARK MODE FIX (Network Fee, Total Amount visibility)
============================================================================ */
[data-theme-version="dark"] .page-depositdetails .payment-details-container,
[data-theme-version="dark"] .page-depositdetails .card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-depositdetails .instruction-header {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-depositdetails .amount-display {
color: #6366F1 !important;
}
[data-theme-version="dark"] .page-depositdetails .currency-info,
[data-theme-version="dark"] .page-depositdetails .instruction-text {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-depositdetails .warning-card {
background: rgba(251, 191, 36, 0.15) !important;
border-color: #fbbf24 !important;
}
[data-theme-version="dark"] .page-depositdetails .warning-card p {
color: #fcd34d !important;
}
[data-theme-version="dark"] .page-depositdetails .warning-card .highlight {
color: #fbbf24 !important;
}
[data-theme-version="dark"] .page-depositdetails .address-section {
background: #0f172a !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-depositdetails .address-label {
color: #9ca3af !important;
}
[data-theme-version="dark"] .page-depositdetails .address-display {
color: #fff !important;
background: #0f172a !important;
}
[data-theme-version="dark"] .page-depositdetails .qr-section {
background: #fff !important;
border-radius: 12px;
padding: 16px;
}
[data-theme-version="dark"] .page-depositdetails .qr-label {
color: #1e293b !important;
}
/* Transaction Info rows - CRITICAL FIX for visibility */
[data-theme-version="dark"] .page-depositdetails .transaction-info-row {
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-depositdetails .transaction-info-row .info-label {
color: #9ca3af !important;
}
[data-theme-version="dark"] .page-depositdetails .transaction-info-row .info-value {
color: #fff !important;
}
[data-theme-version="dark"] .page-depositdetails .transaction-info-row .info-value strong {
color: #6366F1 !important;
}
/* Steps Card */
[data-theme-version="dark"] .page-depositdetails .steps-card {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-depositdetails .steps-card h6 {
color: #fff !important;
}
[data-theme-version="dark"] .page-depositdetails .step-text {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-depositdetails .step-number {
background: #6366F1 !important;
color: #fff !important;
}
/* Timer Section */
[data-theme-version="dark"] .page-depositdetails .timer-section {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-depositdetails .timer-label {
color: #9ca3af !important;
}
[data-theme-version="dark"] .page-depositdetails .timer-display {
color: #10b981 !important;
}
[data-theme-version="dark"] .page-depositdetails .timer-warning {
color: #9ca3af !important;
}
/* Admin Tag Message */
[data-theme-version="dark"] .page-depositdetails .admin-tag-message {
background: rgba(99, 102, 241, 0.15) !important;
border-color: #6366F1 !important;
}
[data-theme-version="dark"] .page-depositdetails .admin-tag-message p {
color: #c7d2fe !important;
}
/* Info Card (gateway instructions) */
[data-theme-version="dark"] .page-depositdetails .info-card {
background: rgba(59, 130, 246, 0.15) !important;
border-color: #3b82f6 !important;
}
[data-theme-version="dark"] .page-depositdetails .info-card p,
[data-theme-version="dark"] .page-depositdetails .info-card strong {
color: #93c5fd !important;
}
/* ============================================================================
WITHDRAW PAGE - DARK MODE FIX (Fee breakdown, Balance display)
============================================================================ */
[data-theme-version="dark"] .page-withdraw .balance-card,
[data-theme-version="dark"] .page-withdraw .withdraw-card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-withdraw .balance-amount {
color: #fff !important;
}
[data-theme-version="dark"] .page-withdraw .balance-label {
color: #9ca3af !important;
}
[data-theme-version="dark"] .page-withdraw .principal-profit-breakdown {
background: #0f172a !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-withdraw .principal-profit-breakdown span {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-withdraw .principal-profit-breakdown strong {
color: #fff !important;
}
/* Fee Breakdown - CRITICAL FIX */
[data-theme-version="dark"] .page-withdraw .fee-breakdown {
background: #0f172a !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-withdraw .fee-row {
color: #d1d5db !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-withdraw .fee-row span {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-withdraw .fee-row.total {
border-top-color: #334155 !important;
}
[data-theme-version="dark"] .page-withdraw .fee-row.total span,
[data-theme-version="dark"] .page-withdraw .fee-row.total strong {
color: #6366F1 !important;
}
/* Withdraw form elements */
[data-theme-version="dark"] .page-withdraw .form-control,
[data-theme-version="dark"] .page-withdraw input,
[data-theme-version="dark"] .page-withdraw select,
[data-theme-version="dark"] .page-withdraw textarea {
background: #0f172a !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-withdraw .form-label {
color: #e2e8f0 !important;
}
[data-theme-version="dark"] .page-withdraw .text-muted {
color: #9ca3af !important;
}
/* ============================================================================
PLAN DEPOSIT PAGES - DARK MODE FIX
============================================================================ */
[data-theme-version="dark"] .page-plandeposit .card,
[data-theme-version="dark"] .page-plandeposit .payment-card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-plandeposit h4,
[data-theme-version="dark"] .page-plandeposit h5,
[data-theme-version="dark"] .page-plandeposit strong {
color: #fff !important;
}
[data-theme-version="dark"] .page-plandeposit p,
[data-theme-version="dark"] .page-plandeposit span:not(.badge),
[data-theme-version="dark"] .page-plandeposit label {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-plandeposit .plan-info-header {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(79, 70, 229, 0.2) 100%) !important;
border-color: #6366F1 !important;
}
[data-theme-version="dark"] .page-plandeposit .plan-price {
color: #6366F1 !important;
}
[data-theme-version="dark"] .page-plandeposit input,
[data-theme-version="dark"] .page-plandeposit select {
background: #0f172a !important;
color: #fff !important;
border-color: #334155 !important;
}
/* ============================================================================
COPY TRADER PAGE - COMPREHENSIVE DARK MODE FIX
============================================================================ */
[data-theme-version="dark"] .page-copytraders .card,
[data-theme-version="dark"] .page-copytraders .trader-card,
[data-theme-version="dark"] .page-copytrader .card,
[data-theme-version="dark"] .page-copytrader .trader-card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-copytraders .trader-card:hover,
[data-theme-version="dark"] .page-copytrader .trader-card:hover {
border-color: #6366F1 !important;
}
[data-theme-version="dark"] .page-copytraders h4,
[data-theme-version="dark"] .page-copytraders h5,
[data-theme-version="dark"] .page-copytraders strong,
[data-theme-version="dark"] .page-copytrader h4,
[data-theme-version="dark"] .page-copytrader h5,
[data-theme-version="dark"] .page-copytrader strong {
color: #fff !important;
}
[data-theme-version="dark"] .page-copytraders p,
[data-theme-version="dark"] .page-copytraders span:not(.badge):not(.status-badge),
[data-theme-version="dark"] .page-copytraders label,
[data-theme-version="dark"] .page-copytrader p,
[data-theme-version="dark"] .page-copytrader span:not(.badge):not(.status-badge),
[data-theme-version="dark"] .page-copytrader label {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-copytraders .trader-name,
[data-theme-version="dark"] .page-copytrader .trader-name {
color: #fff !important;
}
[data-theme-version="dark"] .page-copytraders .trader-stats,
[data-theme-version="dark"] .page-copytrader .trader-stats {
color: #9ca3af !important;
}
[data-theme-version="dark"] .page-copytraders .trader-profit,
[data-theme-version="dark"] .page-copytrader .trader-profit {
color: #10b981 !important;
}
[data-theme-version="dark"] .page-copytraders .trader-profit.negative,
[data-theme-version="dark"] .page-copytrader .trader-profit.negative {
color: #ef4444 !important;
}
/* Filter dropdowns - CRITICAL FIX */
[data-theme-version="dark"] .page-copytraders .filter-dropdown,
[data-theme-version="dark"] .page-copytraders select,
[data-theme-version="dark"] .page-copytrader .filter-dropdown,
[data-theme-version="dark"] .page-copytrader select {
background: #0f172a !important;
background-color: #0f172a !important;
color: #fff !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-copytraders .filter-dropdown option,
[data-theme-version="dark"] .page-copytraders select option,
[data-theme-version="dark"] .page-copytrader .filter-dropdown option,
[data-theme-version="dark"] .page-copytrader select option {
background: #1e293b !important;
color: #fff !important;
}
[data-theme-version="dark"] .page-copytraders input[type="text"],
[data-theme-version="dark"] .page-copytraders input[type="search"],
[data-theme-version="dark"] .page-copytrader input[type="text"],
[data-theme-version="dark"] .page-copytrader input[type="search"] {
background: #0f172a !important;
color: #fff !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-copytraders input::placeholder,
[data-theme-version="dark"] .page-copytrader input::placeholder {
color: #6b7280 !important;
}
/* ============================================================================
CRYPTO/STOCK MARKET PAGES - STAT CARDS FIX (HIGHEST PRIORITY)
============================================================================ */
body[data-theme-version="dark"] .page-cryptomarket .stat-item,
body[data-theme-version="dark"] .page-stockmarket .stat-item,
body[data-theme-version="dark"] .page-cryptomarket .price-stats .stat-item,
body[data-theme-version="dark"] .page-stockmarket .price-stats .stat-item,
html[data-theme-version="dark"] .page-cryptomarket .stat-item,
html[data-theme-version="dark"] .page-stockmarket .stat-item {
background: #1e293b !important;
background-color: #1e293b !important;
border: 1px solid #334155 !important;
}
body[data-theme-version="dark"] .page-cryptomarket .stat-label,
body[data-theme-version="dark"] .page-stockmarket .stat-label,
html[data-theme-version="dark"] .page-cryptomarket .stat-label,
html[data-theme-version="dark"] .page-stockmarket .stat-label {
color: #9ca3af !important;
}
body[data-theme-version="dark"] .page-cryptomarket .stat-value,
body[data-theme-version="dark"] .page-stockmarket .stat-value,
html[data-theme-version="dark"] .page-cryptomarket .stat-value,
html[data-theme-version="dark"] .page-stockmarket .stat-value {
color: #fff !important;
}
body[data-theme-version="dark"] .page-cryptomarket .card,
body[data-theme-version="dark"] .page-stockmarket .card,
html[data-theme-version="dark"] .page-cryptomarket .card,
html[data-theme-version="dark"] .page-stockmarket .card {
background: #1e293b !important;
border-color: #334155 !important;
}
body[data-theme-version="dark"] .page-cryptomarket h4,
body[data-theme-version="dark"] .page-cryptomarket h5,
body[data-theme-version="dark"] .page-stockmarket h4,
body[data-theme-version="dark"] .page-stockmarket h5 {
color: #fff !important;
}
body[data-theme-version="dark"] .page-cryptomarket p,
body[data-theme-version="dark"] .page-cryptomarket span:not(.badge),
body[data-theme-version="dark"] .page-stockmarket p,
body[data-theme-version="dark"] .page-stockmarket span:not(.badge) {
color: #d1d5db !important;
}
/* Price stats container */
body[data-theme-version="dark"] .price-stats,
html[data-theme-version="dark"] .price-stats {
background: transparent !important;
}
/* ============================================================================
DASHBOARD PAGE - DARK MODE FIX
============================================================================ */
[data-theme-version="dark"] .page-dashboard .card {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-dashboard h4,
[data-theme-version="dark"] .page-dashboard h5,
[data-theme-version="dark"] .page-dashboard h6,
[data-theme-version="dark"] .page-dashboard strong {
color: #fff !important;
}
[data-theme-version="dark"] .page-dashboard p,
[data-theme-version="dark"] .page-dashboard span:not(.badge):not(.status-badge),
[data-theme-version="dark"] .page-dashboard label {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-dashboard .text-muted {
color: #9ca3af !important;
}
[data-theme-version="dark"] .page-dashboard table {
background: #1e293b !important;
}
[data-theme-version="dark"] .page-dashboard thead {
background: #0f172a !important;
}
[data-theme-version="dark"] .page-dashboard thead th {
background: #0f172a !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-dashboard tbody tr {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-dashboard tbody td {
color: #d1d5db !important;
border-color: #334155 !important;
}
/* ============================================================================
TRADER DETAILS PAGE - DARK MODE FIX
============================================================================ */
[data-theme-version="dark"] .page-traderdetails .card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-traderdetails h4,
[data-theme-version="dark"] .page-traderdetails h5,
[data-theme-version="dark"] .page-traderdetails strong {
color: #fff !important;
}
[data-theme-version="dark"] .page-traderdetails p,
[data-theme-version="dark"] .page-traderdetails span:not(.badge),
[data-theme-version="dark"] .page-traderdetails label {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-traderdetails .trader-stats-item {
background: #0f172a !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-traderdetails input,
[data-theme-version="dark"] .page-traderdetails select {
background: #0f172a !important;
color: #fff !important;
border-color: #334155 !important;
}
/* ============================================================================
CHANGE PASSWORD PAGE - DARK MODE FIX
============================================================================ */
[data-theme-version="dark"] .page-changepwd .card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-changepwd h4,
[data-theme-version="dark"] .page-changepwd h5,
[data-theme-version="dark"] .page-changepwd strong {
color: #fff !important;
}
[data-theme-version="dark"] .page-changepwd p,
[data-theme-version="dark"] .page-changepwd span:not(.badge),
[data-theme-version="dark"] .page-changepwd label {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-changepwd input {
background: #0f172a !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-changepwd .password-strength {
color: #9ca3af !important;
}
/* ============================================================================
SUPPORT TICKETS PAGE - DARK MODE FIX
============================================================================ */
[data-theme-version="dark"] .page-support-tickets .card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-support-tickets h4,
[data-theme-version="dark"] .page-support-tickets h5,
[data-theme-version="dark"] .page-support-tickets strong {
color: #fff !important;
}
[data-theme-version="dark"] .page-support-tickets p,
[data-theme-version="dark"] .page-support-tickets span:not(.badge),
[data-theme-version="dark"] .page-support-tickets label {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-support-tickets table {
background: #1e293b !important;
}
[data-theme-version="dark"] .page-support-tickets thead {
background: #0f172a !important;
}
[data-theme-version="dark"] .page-support-tickets thead th {
background: #0f172a !important;
color: #e2e8f0 !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-support-tickets tbody tr {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-support-tickets tbody td {
color: #d1d5db !important;
border-color: #334155 !important;
}
/* ============================================================================
CREATE TICKET PAGE - DARK MODE FIX
============================================================================ */
[data-theme-version="dark"] .page-create-ticket .card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-create-ticket h4,
[data-theme-version="dark"] .page-create-ticket h5,
[data-theme-version="dark"] .page-create-ticket strong {
color: #fff !important;
}
[data-theme-version="dark"] .page-create-ticket p,
[data-theme-version="dark"] .page-create-ticket span:not(.badge),
[data-theme-version="dark"] .page-create-ticket label {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-create-ticket input,
[data-theme-version="dark"] .page-create-ticket select,
[data-theme-version="dark"] .page-create-ticket textarea {
background: #0f172a !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
border-color: #334155 !important;
}
/* ============================================================================
TICKET DETAIL PAGE - DARK MODE FIX
============================================================================ */
[data-theme-version="dark"] .page-ticket-detail .card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-ticket-detail h4,
[data-theme-version="dark"] .page-ticket-detail h5,
[data-theme-version="dark"] .page-ticket-detail strong {
color: #fff !important;
}
[data-theme-version="dark"] .page-ticket-detail p,
[data-theme-version="dark"] .page-ticket-detail span:not(.badge),
[data-theme-version="dark"] .page-ticket-detail label {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-ticket-detail .message-bubble {
background: #0f172a !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-ticket-detail .message-bubble.admin {
background: rgba(99, 102, 241, 0.15) !important;
border-color: #6366F1 !important;
}
[data-theme-version="dark"] .page-ticket-detail textarea {
background: #0f172a !important;
color: #fff !important;
border-color: #334155 !important;
}
/* ============================================================================
HELP CENTER PAGE - DARK MODE FIX
============================================================================ */
[data-theme-version="dark"] .page-help-center .card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-help-center h4,
[data-theme-version="dark"] .page-help-center h5,
[data-theme-version="dark"] .page-help-center strong {
color: #fff !important;
}
[data-theme-version="dark"] .page-help-center p,
[data-theme-version="dark"] .page-help-center span:not(.badge),
[data-theme-version="dark"] .page-help-center label {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-help-center .faq-item {
background: #0f172a !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-help-center .faq-question {
color: #fff !important;
}
[data-theme-version="dark"] .page-help-center .faq-answer {
color: #d1d5db !important;
}
/* ============================================================================
DEPOSIT PENDING/SUCCESS PAGES - DARK MODE FIX
============================================================================ */
[data-theme-version="dark"] .page-depositpending .card,
[data-theme-version="dark"] .page-depositsuccess .card,
[data-theme-version="dark"] .page-depositpendinggw .card,
[data-theme-version="dark"] .page-depositsuccessgw .card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-depositpending h4,
[data-theme-version="dark"] .page-depositpending h5,
[data-theme-version="dark"] .page-depositsuccess h4,
[data-theme-version="dark"] .page-depositsuccess h5,
[data-theme-version="dark"] .page-depositpendinggw h4,
[data-theme-version="dark"] .page-depositpendinggw h5,
[data-theme-version="dark"] .page-depositsuccessgw h4,
[data-theme-version="dark"] .page-depositsuccessgw h5 {
color: #fff !important;
}
[data-theme-version="dark"] .page-depositpending p,
[data-theme-version="dark"] .page-depositpending span:not(.badge),
[data-theme-version="dark"] .page-depositsuccess p,
[data-theme-version="dark"] .page-depositsuccess span:not(.badge),
[data-theme-version="dark"] .page-depositpendinggw p,
[data-theme-version="dark"] .page-depositpendinggw span:not(.badge),
[data-theme-version="dark"] .page-depositsuccessgw p,
[data-theme-version="dark"] .page-depositsuccessgw span:not(.badge) {
color: #d1d5db !important;
}
/* ============================================================================
PLAN DEPOSIT DETAIL/GATEWAY PAGES - DARK MODE FIX
============================================================================ */
[data-theme-version="dark"] .page-plandepositdet .card,
[data-theme-version="dark"] .page-plandepositgateway .card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-plandepositdet h4,
[data-theme-version="dark"] .page-plandepositdet h5,
[data-theme-version="dark"] .page-plandepositgateway h4,
[data-theme-version="dark"] .page-plandepositgateway h5 {
color: #fff !important;
}
[data-theme-version="dark"] .page-plandepositdet p,
[data-theme-version="dark"] .page-plandepositdet span:not(.badge),
[data-theme-version="dark"] .page-plandepositgateway p,
[data-theme-version="dark"] .page-plandepositgateway span:not(.badge) {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-plandepositdet .transaction-info-row .info-label,
[data-theme-version="dark"] .page-plandepositgateway .transaction-info-row .info-label {
color: #9ca3af !important;
}
[data-theme-version="dark"] .page-plandepositdet .transaction-info-row .info-value,
[data-theme-version="dark"] .page-plandepositgateway .transaction-info-row .info-value {
color: #fff !important;
}
/* ============================================================================
DEPOSIT GATEWAY DETAILS PAGE - DARK MODE FIX
============================================================================ */
[data-theme-version="dark"] .page-depositgateway .card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-depositgateway h4,
[data-theme-version="dark"] .page-depositgateway h5 {
color: #fff !important;
}
[data-theme-version="dark"] .page-depositgateway p,
[data-theme-version="dark"] .page-depositgateway span:not(.badge) {
color: #d1d5db !important;
}
[data-theme-version="dark"] .page-depositgateway .transaction-info-row .info-label {
color: #9ca3af !important;
}
[data-theme-version="dark"] .page-depositgateway .transaction-info-row .info-value {
color: #fff !important;
}
/* ============================================================================
ACCESS RESTRICTED PAGE - DARK MODE FIX
============================================================================ */
[data-theme-version="dark"] .page-access-restricted .card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-access-restricted h4,
[data-theme-version="dark"] .page-access-restricted h5 {
color: #fff !important;
}
[data-theme-version="dark"] .page-access-restricted p {
color: #d1d5db !important;
}
/* ============================================================================
BADGE SHOWCASE PAGE - DARK MODE FIX
============================================================================ */
[data-theme-version="dark"] .page-badgeshowcase .card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-badgeshowcase h4,
[data-theme-version="dark"] .page-badgeshowcase h5 {
color: #fff !important;
}
[data-theme-version="dark"] .page-badgeshowcase p,
[data-theme-version="dark"] .page-badgeshowcase span:not(.badge) {
color: #d1d5db !important;
}
/* ============================================================================
COPYTRADING AGREEMENT PAGE - DARK MODE FIX
============================================================================ */
[data-theme-version="dark"] .page-ctagreement .card {
background: #1e293b !important;
background-color: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-ctagreement h4,
[data-theme-version="dark"] .page-ctagreement h5 {
color: #fff !important;
}
[data-theme-version="dark"] .page-ctagreement p,
[data-theme-version="dark"] .page-ctagreement span:not(.badge),
[data-theme-version="dark"] .page-ctagreement li {
color: #d1d5db !important;
}
/* ============================================================================
WALLET PAGE - DARK MODE FIX
============================================================================ */
[data-theme-version="dark"] .page-wallet .card:not(.portfolio-card) {
background: #1e293b !important;
border-color: #334155 !important;
border-radius: 12px !important;
}
/* Portfolio card MUST keep its gradient in dark mode */
[data-theme-version="dark"] .page-wallet .portfolio-card,
[data-theme-version="dark"] .page-wallet .portfolio-card .card-body,
body[data-theme-version="dark"] .page-wallet .portfolio-card,
body[data-theme-version="dark"] .page-wallet .portfolio-card .card-body {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
background-color: transparent !important;
border-color: transparent !important;
}
[data-theme-version="dark"] .page-wallet h4,
[data-theme-version="dark"] .page-wallet h5,
[data-theme-version="dark"] .page-wallet strong {
color: #fff !important;
}
[data-theme-version="dark"] .page-wallet p,
[data-theme-version="dark"] .page-wallet span:not(.badge):not(.balance-number):not(.wallet-name):not(.btc-equiv) {
color: #d1d5db !important;
}
/* ============================================================================
KYC VERIFICATION PAGE - FULL DARK MODE SUPPORT
============================================================================ */
/* KYC Progress Container */
.kyc-progress-container {
background: #f9fafb;
border-radius: 12px;
padding: 30px;
}
[data-theme-version="dark"] .kyc-progress-container {
background: #0f172a !important;
}
/* KYC Form Card Titles - "Step 1:", "Step 2:", "Step 3:" headers */
[data-theme-version="dark"] .kyc-form-title {
color: #fff !important;
}
/* KYC Form Card Description text */
[data-theme-version="dark"] .kyc-form-desc {
color: #d1d5db !important;
}
/* ============================================================================
ALERT BANNERS - Dark Mode (KYC, Admin, Success, Danger, Warning, Info)
============================================================================ */
/* Universal alert banner dark mode styles */
[data-theme-version="dark"] .alert-banner {
border: none !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}
[data-theme-version="dark"] .alert-banner .alert-banner-action {
color: #fff !important;
}
[data-theme-version="dark"] .alert-banner .alert-banner-close i {
color: #94a3b8 !important;
}
/* KYC Banner - Blue theme */
[data-theme-version="dark"] .alert-banner.kyc-banner,
[data-theme-version="dark"] .kyc-banner {
background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%) !important;
border-left: 4px solid #3b82f6 !important;
}
[data-theme-version="dark"] .kyc-banner .alert-banner-text strong {
color: #fff !important;
}
[data-theme-version="dark"] .kyc-banner .alert-banner-text p {
color: #bfdbfe !important;
}
[data-theme-version="dark"] .kyc-banner .alert-banner-icon {
background: rgba(59, 130, 246, 0.3) !important;
}
[data-theme-version="dark"] .kyc-banner .alert-banner-icon i {
color: #60a5fa !important;
}
/* Admin Banner - Orange/Amber theme */
[data-theme-version="dark"] .alert-banner.admin-banner {
background: linear-gradient(135deg, #422006 0%, #78350f 100%) !important;
border-left: 4px solid #f59e0b !important;
}
[data-theme-version="dark"] .admin-banner .alert-banner-text strong {
color: #fff !important;
}
[data-theme-version="dark"] .admin-banner .alert-banner-text p {
color: #fde68a !important;
}
[data-theme-version="dark"] .admin-banner .alert-banner-icon {
background: rgba(245, 158, 11, 0.3) !important;
}
[data-theme-version="dark"] .admin-banner .alert-banner-icon i {
color: #fbbf24 !important;
}
/* Success Banner - Green theme */
[data-theme-version="dark"] .alert-banner.success-banner {
background: linear-gradient(135deg, #14532d 0%, #166534 100%) !important;
border-left: 4px solid #22c55e !important;
}
[data-theme-version="dark"] .success-banner .alert-banner-text strong {
color: #fff !important;
}
[data-theme-version="dark"] .success-banner .alert-banner-text p {
color: #bbf7d0 !important;
}
[data-theme-version="dark"] .success-banner .alert-banner-icon {
background: rgba(34, 197, 94, 0.3) !important;
}
[data-theme-version="dark"] .success-banner .alert-banner-icon i {
color: #4ade80 !important;
}
/* Danger Banner - Red theme */
[data-theme-version="dark"] .alert-banner.danger-banner {
background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%) !important;
border-left: 4px solid #ef4444 !important;
}
[data-theme-version="dark"] .danger-banner .alert-banner-text strong {
color: #fff !important;
}
[data-theme-version="dark"] .danger-banner .alert-banner-text p {
color: #fecaca !important;
}
[data-theme-version="dark"] .danger-banner .alert-banner-icon {
background: rgba(239, 68, 68, 0.3) !important;
}
[data-theme-version="dark"] .danger-banner .alert-banner-icon i {
color: #f87171 !important;
}
/* Warning Banner - Yellow theme */
[data-theme-version="dark"] .alert-banner.warning-banner {
background: linear-gradient(135deg, #422006 0%, #713f12 100%) !important;
border-left: 4px solid #eab308 !important;
}
[data-theme-version="dark"] .warning-banner .alert-banner-text strong {
color: #fff !important;
}
[data-theme-version="dark"] .warning-banner .alert-banner-text p {
color: #fef08a !important;
}
[data-theme-version="dark"] .warning-banner .alert-banner-icon {
background: rgba(234, 179, 8, 0.3) !important;
}
[data-theme-version="dark"] .warning-banner .alert-banner-icon i {
color: #facc15 !important;
}
/* Info Banner - Blue/Indigo theme */
[data-theme-version="dark"] .alert-banner.info-banner {
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%) !important;
border-left: 4px solid #6366f1 !important;
}
[data-theme-version="dark"] .info-banner .alert-banner-text strong {
color: #fff !important;
}
[data-theme-version="dark"] .info-banner .alert-banner-text p {
color: #c7d2fe !important;
}
[data-theme-version="dark"] .info-banner .alert-banner-icon {
background: rgba(99, 102, 241, 0.3) !important;
}
[data-theme-version="dark"] .info-banner .alert-banner-icon i {
color: #818cf8 !important;
}
/* KYC Status Title/Description */
.kyc-status-title {
font-size: 22px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 10px;
}
.kyc-status-desc {
color: #6b7280;
font-size: 15px;
margin-bottom: 25px;
}
[data-theme-version="dark"] .kyc-status-title {
color: #fff !important;
}
[data-theme-version="dark"] .kyc-status-desc {
color: #9ca3af !important;
}
/* KYC Info Summary */
.kyc-info-summary {
background: #f9fafb;
border-radius: 12px;
padding: 20px;
margin-top: 10px;
}
[data-theme-version="dark"] .kyc-info-summary {
background: #0f172a !important;
}
.kyc-info-title {
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.kyc-info-title i {
font-size: 18px;
}
[data-theme-version="dark"] .kyc-info-title {
color: #fff !important;
}
.kyc-info-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.kyc-info-label {
font-size: 12px;
color: #9ca3af;
margin-bottom: 4px;
}
.kyc-info-value {
font-size: 14px;
font-weight: 500;
color: #1a1a1a;
}
[data-theme-version="dark"] .kyc-info-label {
color: #6b7280 !important;
}
[data-theme-version="dark"] .kyc-info-value {
color: #e2e8f0 !important;
}
/* KYC Document Buttons */
.kyc-doc-buttons {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.kyc-doc-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 15px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
cursor: pointer;
color: #1a1a1a;
font-size: 13px;
transition: all 0.2s ease;
}
.kyc-doc-btn i {
color: var(--primary);
}
.kyc-doc-btn:hover {
border-color: var(--primary);
background: rgba(99, 102, 241, 0.05);
}
[data-theme-version="dark"] .kyc-doc-btn {
background: #1e293b !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
[data-theme-version="dark"] .kyc-doc-btn:hover {
border-color: #6366F1 !important;
background: rgba(99, 102, 241, 0.15) !important;
}
/* KYC Status Card */
[data-theme-version="dark"] .page-kycverify .kyc-status-card,
[data-theme-version="dark"] .page-kycverify .kyc-form-card {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-kycverify .kyc-status-header h3,
[data-theme-version="dark"] .page-kycverify .kyc-form-title {
color: #fff !important;
}
[data-theme-version="dark"] .page-kycverify .kyc-status-header p,
[data-theme-version="dark"] .page-kycverify .kyc-form-desc {
color: #9ca3af !important;
}
/* KYC Form Inputs */
[data-theme-version="dark"] .page-kycverify .form-input-kyc,
[data-theme-version="dark"] .page-kycverify .form-select-kyc {
background: #0f172a !important;
border-color: #334155 !important;
color: #fff !important;
}
[data-theme-version="dark"] .page-kycverify .form-label-kyc {
color: #e2e8f0 !important;
}
/* KYC Upload Area */
[data-theme-version="dark"] .page-kycverify .upload-area {
background: #0f172a !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-kycverify .upload-text {
color: #e2e8f0 !important;
}
[data-theme-version="dark"] .page-kycverify .upload-hint {
color: #9ca3af !important;
}
/* KYC Header */
[data-theme-version="dark"] .page-kycverify .kyc-header {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(79, 70, 229, 0.3) 100%) !important;
}
[data-theme-version="dark"] .page-kycverify .kyc-header h1 {
color: #fff !important;
}
[data-theme-version="dark"] .page-kycverify .kyc-header p {
color: #c7d2fe !important;
}
/* KYC Step Progress Circles - Critical Dark Mode Fix */
/* These step circles use inline styles set by JavaScript, so we need high specificity */
[data-theme-version="dark"] .page-kycverify .kyc-progress-container div[style*="background: #fff"],
[data-theme-version="dark"] .page-kycverify .kyc-progress-container div[style*="background:#fff"],
[data-theme-version="dark"] .page-kycverify .kyc-progress-container [id^="step"][id$="Circle"][style*="background: #fff"],
[data-theme-version="dark"] .page-kycverify .kyc-progress-container [id^="step"][id$="Circle"][style*="background:#fff"],
body[data-theme-version="dark"] #step1Circle[style*="background: #fff"],
body[data-theme-version="dark"] #step2Circle[style*="background: #fff"],
body[data-theme-version="dark"] #step3Circle[style*="background: #fff"],
body[data-theme-version="dark"] .kyc-progress-container div[style*="#fff"] {
background: #1e293b !important;
background-color: #1e293b !important;
}
/* Fix the progress line background */
[data-theme-version="dark"] .page-kycverify .kyc-progress-container div[style*="background: #e5e7eb"],
[data-theme-version="dark"] .page-kycverify .kyc-progress-container div[style*="background:#e5e7eb"] {
background: #334155 !important;
background-color: #334155 !important;
}
/* Fix inactive circle borders */
[data-theme-version="dark"] .page-kycverify .kyc-progress-container div[style*="border: 3px solid #e5e7eb"],
[data-theme-version="dark"] .page-kycverify .kyc-progress-container div[style*="border-color: #e5e7eb"] {
border-color: #475569 !important;
}
/* Fix muted text colors in step labels */
[data-theme-version="dark"] .page-kycverify .kyc-progress-container div[style*="color: #9ca3af"],
[data-theme-version="dark"] .page-kycverify .kyc-progress-container div[style*="color:#9ca3af"],
[data-theme-version="dark"] .page-kycverify .kyc-progress-container div[style*="color: #6b7280"],
[data-theme-version="dark"] .page-kycverify .kyc-progress-container div[style*="color:#6b7280"] {
color: #9ca3af !important;
}
/* Fix rejection notice box white background (the reason box) */
[data-theme-version="dark"] .page-kycverify .kyc-form-card div[style*="background: #fff"] {
background: #1e293b !important;
border-color: #7f1d1d !important;
}
/* Fix muted text in rejection reason box */
[data-theme-version="dark"] .page-kycverify .kyc-form-card div[style*="color: #7f1d1d"] {
color: #f87171 !important;
}
/* ============================================================================
ADDRESS VERIFICATION PAGE - FULL DARK MODE SUPPORT
Matching the KYC verification page styling exactly
============================================================================ */
/* Main containers and cards */
[data-theme-version="dark"] .page-addressverify .verification-container {
background: transparent !important;
}
[data-theme-version="dark"] .page-addressverify .verification-header {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(79, 70, 229, 0.3) 100%) !important;
}
[data-theme-version="dark"] .page-addressverify .verification-header h1 {
color: #fff !important;
}
[data-theme-version="dark"] .page-addressverify .verification-header p {
color: #c7d2fe !important;
}
[data-theme-version="dark"] .page-addressverify .status-card,
[data-theme-version="dark"] .page-addressverify .form-card {
background: #1e293b !important;
border-color: #334155 !important;
}
/* Status card header text */
[data-theme-version="dark"] .page-addressverify .status-card h3,
[data-theme-version="dark"] .page-addressverify .form-card-title {
color: #fff !important;
}
[data-theme-version="dark"] .page-addressverify .status-card p,
[data-theme-version="dark"] .page-addressverify .form-card-desc {
color: #9ca3af !important;
}
/* Fix inline styles on status card header */
[data-theme-version="dark"] .page-addressverify .status-card h3[style*="color: #1a1a1a"],
[data-theme-version="dark"] .page-addressverify div[style*="color: #1a1a1a"] {
color: #fff !important;
}
[data-theme-version="dark"] .page-addressverify div[style*="color: #6b7280"] {
color: #9ca3af !important;
}
/* Progress steps container background */
[data-theme-version="dark"] .page-addressverify .status-card div[style*="background: #f9fafb"] {
background: #0f172a !important;
}
/* Step circles - inactive state (white background) */
[data-theme-version="dark"] .page-addressverify .status-card div[style*="background: #fff"],
[data-theme-version="dark"] .page-addressverify .status-card div[style*="background:#fff"] {
background: #1e293b !important;
}
/* Progress line - inactive state */
[data-theme-version="dark"] .page-addressverify .status-card div[style*="background: #e5e7eb"],
[data-theme-version="dark"] .page-addressverify .status-card div[style*="background:#e5e7eb"] {
background: #334155 !important;
}
/* Step circle borders - inactive state */
[data-theme-version="dark"] .page-addressverify .status-card div[style*="border: 3px solid #e5e7eb"] {
border-color: #475569 !important;
}
/* Form inputs and selects */
[data-theme-version="dark"] .page-addressverify .form-input-address,
[data-theme-version="dark"] .page-addressverify .form-select-address {
background: #0f172a !important;
border-color: #334155 !important;
color: #fff !important;
}
[data-theme-version="dark"] .page-addressverify .form-label-address {
color: #e2e8f0 !important;
}
/* Upload area */
[data-theme-version="dark"] .page-addressverify .upload-area {
background: #0f172a !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-addressverify .upload-text {
color: #e2e8f0 !important;
}
[data-theme-version="dark"] .page-addressverify .upload-hint {
color: #9ca3af !important;
}
/* Submitted information summary boxes */
[data-theme-version="dark"] .page-addressverify .form-card div[style*="background: #f9fafb"] {
background: #0f172a !important;
}
[data-theme-version="dark"] .page-addressverify .form-card div[style*="background: #f9fafb"] h4 {
color: #fff !important;
}
[data-theme-version="dark"] .page-addressverify .form-card div[style*="font-size: 14px; font-weight: 500; color: #1a1a1a"] {
color: #e2e8f0 !important;
}
/* Pending/Approved status messages */
[data-theme-version="dark"] .page-addressverify .form-card h3[style*="color: #1a1a1a"] {
color: #fff !important;
}
/* View document button in submitted state */
[data-theme-version="dark"] .page-addressverify .form-card button[style*="background: #fff"] {
background: #1e293b !important;
border-color: #475569 !important;
color: #e2e8f0 !important;
}
/* Rejection notice box white background (the reason box) */
[data-theme-version="dark"] .page-addressverify .form-card div[style*="background: #fff"] {
background: #1e293b !important;
border-color: #7f1d1d !important;
}
/* Fix muted text in rejection reason box */
[data-theme-version="dark"] .page-addressverify .form-card div[style*="color: #7f1d1d"] {
color: #f87171 !important;
}
/* KYC & Address Verification - Status Badge Dark Mode */
[data-theme-version="dark"] .page-kycverify .status-badge.not-submitted,
[data-theme-version="dark"] .page-addressverify .status-badge.not-submitted {
background: #374151 !important;
color: #9ca3af !important;
}
[data-theme-version="dark"] .page-kycverify .status-badge.pending,
[data-theme-version="dark"] .page-addressverify .status-badge.pending {
background: rgba(245, 158, 11, 0.2) !important;
color: #fbbf24 !important;
}
[data-theme-version="dark"] .page-kycverify .status-badge.verified,
[data-theme-version="dark"] .page-kycverify .status-badge.approved,
[data-theme-version="dark"] .page-addressverify .status-badge.verified,
[data-theme-version="dark"] .page-addressverify .status-badge.approved {
background: rgba(16, 185, 129, 0.2) !important;
color: #34d399 !important;
}
[data-theme-version="dark"] .page-kycverify .status-badge.failed,
[data-theme-version="dark"] .page-kycverify .status-badge.rejected,
[data-theme-version="dark"] .page-addressverify .status-badge.failed,
[data-theme-version="dark"] .page-addressverify .status-badge.rejected {
background: rgba(239, 68, 68, 0.2) !important;
color: #f87171 !important;
}
/* ============================================================================
PROFILE PAGE - FULL DARK MODE SUPPORT
============================================================================ */
[data-theme-version="dark"] .page-profile .info-card {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-profile .info-card-title {
color: #fff !important;
}
[data-theme-version="dark"] .page-profile .info-row {
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-profile .info-label {
color: #9ca3af !important;
}
[data-theme-version="dark"] .page-profile .info-value {
color: #e2e8f0 !important;
}
[data-theme-version="dark"] .page-profile .profile-header-card {
background: linear-gradient(135deg, #4F46E5 0%, #6366F1 50%, #818cf8 100%) !important;
}
[data-theme-version="dark"] .page-profile .profile-name {
color: #fff !important;
}
[data-theme-version="dark"] .page-profile .profile-username {
color: rgba(255, 255, 255, 0.8) !important;
}
[data-theme-version="dark"] .page-profile .profile-member-since {
color: rgba(255, 255, 255, 0.7) !important;
}
/* Profile stat item - keep same as light mode */
/* Keep verification badges exactly the same in dark mode as light mode */
[data-theme-version="dark"] .page-profile .verification-badge.verified {
background: #dcfce7 !important;
color: #16a34a !important;
}
[data-theme-version="dark"] .page-profile .verification-badge.pending {
background: #fef3c7 !important;
color: #d97706 !important;
}
[data-theme-version="dark"] .page-profile .verification-badge.unverified,
[data-theme-version="dark"] .page-profile .verification-badge.failed {
background: #fee2e2 !important;
color: #dc2626 !important;
}
[data-theme-version="dark"] .page-profile .verification-badge i {
color: inherit !important;
}
[data-theme-version="dark"] .page-profile .profile-stat-value {
color: #fff !important;
}
[data-theme-version="dark"] .page-profile .profile-stat-label {
color: rgba(255, 255, 255, 0.8) !important;
}
/* Profile Modals */
[data-theme-version="dark"] .page-profile .modal-content {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-profile .modal-header {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-profile .modal-title {
color: #fff !important;
}
[data-theme-version="dark"] .page-profile .modal-body {
background: #1e293b !important;
}
[data-theme-version="dark"] .page-profile .modal-footer {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-profile .form-label-modal {
color: #e2e8f0 !important;
}
[data-theme-version="dark"] .page-profile .form-input-modal {
background: #0f172a !important;
border-color: #334155 !important;
color: #fff !important;
}
[data-theme-version="dark"] .page-profile .upload-photo-section {
background: #0f172a !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-profile .upload-photo-section h6 {
color: #fff !important;
}
[data-theme-version="dark"] .page-profile .upload-photo-section p {
color: #9ca3af !important;
}
/* Profile warning/info boxes - keep light */
[data-theme-version="dark"] .page-profile [style*="background: #fef3c7"],
[data-theme-version="dark"] .page-profile [style*="background: #f0f9ff"] {
/* These are warning/info boxes - keep as is for visibility */
}
/* Quick Links buttons */
[data-theme-version="dark"] .page-profile .btn-action {
background: rgba(99, 102, 241, 0.15) !important;
border-color: #6366F1 !important;
color: #818cf8 !important;
}
[data-theme-version="dark"] .page-profile .btn-action:hover {
background: rgba(99, 102, 241, 0.25) !important;
}
/* ============================================================================
KYC & ADDRESS VERIFICATION - PRESERVE STATUS ICON COLORS IN DARK MODE
These icons should stay green/yellow regardless of theme
============================================================================ */
[data-theme-version="dark"] .page-kycverify [style*="background: #dcfce7"],
[data-theme-version="dark"] .page-kycverify [style*="background:#dcfce7"],
[data-theme-version="dark"] .page-kycverification [style*="background: #dcfce7"],
[data-theme-version="dark"] .page-kycverification [style*="background:#dcfce7"],
[data-theme-version="dark"] .page-addressverify [style*="background: #dcfce7"],
[data-theme-version="dark"] .page-addressverify [style*="background:#dcfce7"],
[data-theme-version="dark"] .page-addressverification [style*="background: #dcfce7"],
[data-theme-version="dark"] .page-addressverification [style*="background:#dcfce7"] {
background: #dcfce7 !important;
background-color: #dcfce7 !important;
}
[data-theme-version="dark"] .page-kycverify [style*="background: #fef3c7"],
[data-theme-version="dark"] .page-kycverify [style*="background:#fef3c7"],
[data-theme-version="dark"] .page-kycverification [style*="background: #fef3c7"],
[data-theme-version="dark"] .page-kycverification [style*="background:#fef3c7"],
[data-theme-version="dark"] .page-addressverify [style*="background: #fef3c7"],
[data-theme-version="dark"] .page-addressverify [style*="background:#fef3c7"],
[data-theme-version="dark"] .page-addressverification [style*="background: #fef3c7"],
[data-theme-version="dark"] .page-addressverification [style*="background:#fef3c7"] {
background: #fef3c7 !important;
background-color: #fef3c7 !important;
}
/* Preserve the icon colors (green checkmark, yellow hourglass) */
[data-theme-version="dark"] .page-kycverify [style*="color: #16a34a"],
[data-theme-version="dark"] .page-kycverify [style*="color:#16a34a"],
[data-theme-version="dark"] .page-kycverification [style*="color: #16a34a"],
[data-theme-version="dark"] .page-kycverification [style*="color:#16a34a"],
[data-theme-version="dark"] .page-addressverify [style*="color: #16a34a"],
[data-theme-version="dark"] .page-addressverify [style*="color:#16a34a"],
[data-theme-version="dark"] .page-addressverification [style*="color: #16a34a"],
[data-theme-version="dark"] .page-addressverification [style*="color:#16a34a"] {
color: #16a34a !important;
}
[data-theme-version="dark"] .page-kycverify [style*="color: #f59e0b"],
[data-theme-version="dark"] .page-kycverify [style*="color:#f59e0b"],
[data-theme-version="dark"] .page-kycverification [style*="color: #f59e0b"],
[data-theme-version="dark"] .page-kycverification [style*="color:#f59e0b"],
[data-theme-version="dark"] .page-addressverify [style*="color: #f59e0b"],
[data-theme-version="dark"] .page-addressverify [style*="color:#f59e0b"],
[data-theme-version="dark"] .page-addressverification [style*="color: #f59e0b"],
[data-theme-version="dark"] .page-addressverification [style*="color:#f59e0b"] {
color: #f59e0b !important;
}
/* ============================================================================
MODAL FIX - Ensure form elements inside modals are interactive
The form tag between modal-dialog and modal-content needs pointer-events
============================================================================ */
.modal-dialog > form {
pointer-events: auto;
}
.modal-dialog form {
pointer-events: auto;
}
/* Ensure modal-content always has pointer-events */
.modal-content {
pointer-events: auto !important;
}
/* ============================================================================
COPY TRADER MODAL FIX - Ensure modal is interactive
============================================================================ */
.page-copytraders .modal {
z-index: 1060 !important;
}
.page-copytraders .modal-backdrop {
z-index: 1050 !important;
}
.page-copytraders .modal-dialog {
z-index: 1061 !important;
pointer-events: none;
}
.page-copytraders .modal-dialog > form,
.page-copytraders .modal-dialog form,
.page-copytraders .modal-content {
pointer-events: auto !important;
position: relative;
z-index: 1062 !important;
}
/* Make sure the modal dialog is visible and interactive when shown */
.page-copytraders .modal.show .modal-dialog {
pointer-events: none;
}
.page-copytraders .modal.show .modal-dialog > form,
.page-copytraders .modal.show .modal-content {
pointer-events: auto !important;
}
/* ============================================================================
MODAL BACKDROP FIX - Ensure modal appears above backdrop
============================================================================ */
/* Force backdrop to stay behind */
.modal-backdrop {
z-index: 1040 !important;
}
/* Force modal to be above backdrop */
.modal {
z-index: 1050 !important;
}
/* Ensure modal dialog and content are above everything */
.modal-dialog {
z-index: 1055 !important;
}
.modal-content {
z-index: 1056 !important;
position: relative;
}
/* ============================================================================
HIDE MODAL BACKDROP COMPLETELY
============================================================================ */
.page-copytraders .modal-backdrop {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
/* ============================================================================
COPY TRADER MODAL - Force modal above custom backdrop
============================================================================ */
.page-copytraders .modal {
z-index: 1050 !important;
}
.page-copytraders .modal.show {
z-index: 1050 !important;
}
.page-copytraders .modal-dialog {
z-index: 1051 !important;
}
.page-copytraders .modal-content {
z-index: 1052 !important;
}
#copyTraderBackdrop {
z-index: 1050 !important;
}
/* ============================================================================
FINAL FIX - COPY TRADER MODAL Z-INDEX (Added at end to ensure highest priority)
These rules MUST be at the end of the file to override all previous rules
============================================================================ */
/* Hide Bootstrap auto-generated backdrop completely on copy traders page */
body.page-copytraders .modal-backdrop,
.page-copytraders .modal-backdrop,
.page-copytraders ~ .modal-backdrop {
z-index: 1039 !important;
}
/* Force all modals on copy traders page to appear above backdrop */
body.page-copytraders .modal,
.page-copytraders .modal,
div[id^="copyModal"],
div[id^="stopCopyModal"] {
z-index: 1055 !important;
}
body.page-copytraders .modal.show,
.page-copytraders .modal.show,
div[id^="copyModal"].show,
div[id^="stopCopyModal"].show {
z-index: 1055 !important;
}
body.page-copytraders .modal-dialog,
.page-copytraders .modal-dialog,
div[id^="copyModal"] .modal-dialog,
div[id^="stopCopyModal"] .modal-dialog {
z-index: 1056 !important;
pointer-events: auto !important;
}
body.page-copytraders .modal-content,
.page-copytraders .modal-content,
div[id^="copyModal"] .modal-content,
div[id^="stopCopyModal"] .modal-content {
z-index: 1057 !important;
pointer-events: auto !important;
position: relative;
}
/* ============================================================================
COPY TRADER MODAL - FINAL SOLUTION
Uses ::before pseudo-element as backdrop (part of modal, no z-index issues)
============================================================================ */
/* Hide ALL Bootstrap backdrops on copy traders page */
body.page-copytraders .modal-backdrop {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* The modal itself creates its own backdrop via ::before */
body.page-copytraders .modal {
background: transparent !important;
}
body.page-copytraders .modal.show {
background: rgba(0, 0, 0, 0.5) !important;
}
/* Ensure modal dialog is centered and clickable */
body.page-copytraders .modal-dialog {
position: relative;
z-index: 1;
pointer-events: auto !important;
}
body.page-copytraders .modal-content {
pointer-events: auto !important;
position: relative;
z-index: 2;
}
/* Remove any conflicting styles from earlier attempts */
body.page-copytraders #copyTraderBackdrop {
display: none !important;
}
/* ============================================================================
COPY TRADERS PAGE - DARK MODE FIXES (January 2026)
============================================================================ */
/* 1. Remove border from stat-item list in dark mode */
[data-theme-version="dark"] .page-copytraders .stat-item,
body[data-theme-version="dark"] .page-copytraders .stat-item,
html[data-theme-version="dark"] .page-copytraders .stat-item {
border: none !important;
border-bottom: none !important;
background: transparent !important;
}
[data-theme-version="dark"] .page-copytraders .stats-list,
body[data-theme-version="dark"] .page-copytraders .stats-list {
border: none !important;
}
/* 2. Min Balance - Keep same styling as light mode (no dark mode override) */
[data-theme-version="dark"] .page-copytraders .min-balance,
body[data-theme-version="dark"] .page-copytraders .min-balance,
html[data-theme-version="dark"] .page-copytraders .min-balance {
background: #fef3c7 !important;
background-color: #fef3c7 !important;
}
[data-theme-version="dark"] .page-copytraders .min-balance i,
body[data-theme-version="dark"] .page-copytraders .min-balance i,
html[data-theme-version="dark"] .page-copytraders .min-balance i {
color: #92400e !important;
}
[data-theme-version="dark"] .page-copytraders .min-balance span,
body[data-theme-version="dark"] .page-copytraders .min-balance span,
html[data-theme-version="dark"] .page-copytraders .min-balance span {
color: #92400e !important;
}
/* 3. Filter dropdowns - Make visible in dark mode */
[data-theme-version="dark"] .page-copytraders .form-control,
[data-theme-version="dark"] .page-copytraders select.form-control,
[data-theme-version="dark"] .page-copytraders .filter-select,
body[data-theme-version="dark"] .page-copytraders .form-control,
body[data-theme-version="dark"] .page-copytraders select.form-control {
background-color: #1e293b !important;
background: #1e293b !important;
color: #fff !important;
border: 1px solid #475569 !important;
}
[data-theme-version="dark"] .page-copytraders .form-control option,
[data-theme-version="dark"] .page-copytraders select option,
body[data-theme-version="dark"] .page-copytraders .form-control option,
body[data-theme-version="dark"] .page-copytraders select option {
background-color: #1e293b !important;
color: #fff !important;
}
/* Search input in dark mode */
[data-theme-version="dark"] .page-copytraders .search-box,
[data-theme-version="dark"] .page-copytraders .search-box input,
[data-theme-version="dark"] .page-copytraders input.form-control,
body[data-theme-version="dark"] .page-copytraders .search-box,
body[data-theme-version="dark"] .page-copytraders .search-box input {
background-color: #1e293b !important;
color: #fff !important;
border: 1px solid #475569 !important;
}
/* Filter card/container in dark mode */
[data-theme-version="dark"] .page-copytraders .filter-card,
[data-theme-version="dark"] .page-copytraders .filters-container,
body[data-theme-version="dark"] .page-copytraders .filter-card {
background-color: #1e293b !important;
border-color: #334155 !important;
}
/* ============================================================================
COPY TRADERS - DARK MODE OVERRIDE FIXES (HIGHEST PRIORITY)
These rules use maximum specificity to override earlier rules
============================================================================ */
/* Min Balance - Force light mode colors (override span:not(.badge) rule) */
[data-theme-version="dark"] .page-copytraders .trader-card .min-balance,
body[data-theme-version="dark"] .page-copytraders .trader-card .min-balance,
html[data-theme-version="dark"] .page-copytraders .trader-card .min-balance,
[data-theme-version="dark"].page-copytraders .trader-card .min-balance {
background: #fef3c7 !important;
background-color: #fef3c7 !important;
border: none !important;
}
[data-theme-version="dark"] .page-copytraders .trader-card .min-balance i,
body[data-theme-version="dark"] .page-copytraders .trader-card .min-balance i,
html[data-theme-version="dark"] .page-copytraders .trader-card .min-balance i,
[data-theme-version="dark"].page-copytraders .trader-card .min-balance i {
color: #92400e !important;
}
[data-theme-version="dark"] .page-copytraders .trader-card .min-balance span,
body[data-theme-version="dark"] .page-copytraders .trader-card .min-balance span,
html[data-theme-version="dark"] .page-copytraders .trader-card .min-balance span,
[data-theme-version="dark"].page-copytraders .trader-card .min-balance span,
[data-theme-version="dark"] .page-copytraders .min-balance span {
color: #92400e !important;
}
/* Filter Select Dropdowns - Make dropdown arrow visible */
[data-theme-version="dark"] .page-copytraders .filter-select,
body[data-theme-version="dark"] .page-copytraders .filter-select,
html[data-theme-version="dark"] .page-copytraders .filter-select {
background-color: #1e293b !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 16px 12px !important;
color: #fff !important;
border: 1px solid #475569 !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
padding-right: 40px !important;
}
/* Filter Input - Dark mode styling */
[data-theme-version="dark"] .page-copytraders .filter-input,
body[data-theme-version="dark"] .page-copytraders .filter-input,
html[data-theme-version="dark"] .page-copytraders .filter-input {
background-color: #1e293b !important;
color: #fff !important;
border: 1px solid #475569 !important;
}
[data-theme-version="dark"] .page-copytraders .filter-input::placeholder,
body[data-theme-version="dark"] .page-copytraders .filter-input::placeholder {
color: #9ca3af !important;
}
/* Filter select options */
[data-theme-version="dark"] .page-copytraders .filter-select option,
body[data-theme-version="dark"] .page-copytraders .filter-select option {
background-color: #1e293b !important;
color: #fff !important;
}
/* Mobile filter button */
[data-theme-version="dark"] .page-copytraders #openFilterModal,
body[data-theme-version="dark"] .page-copytraders #openFilterModal {
background: #1e293b !important;
border-color: #475569 !important;
}
[data-theme-version="dark"] .page-copytraders #openFilterModal svg,
body[data-theme-version="dark"] .page-copytraders #openFilterModal svg {
stroke: #fff !important;
}
/* ============================================================================
COPY TRADERS - FILTER DROPDOWN ARROW FIX (DARK MODE)
============================================================================ */
/* Force dropdown arrow to show in dark mode */
[data-theme-version="dark"] .page-copytraders .filter-select,
[data-theme-version="dark"] .page-copytraders select.filter-select,
body[data-theme-version="dark"] .page-copytraders .filter-select,
html[data-theme-version="dark"] .page-copytraders .filter-select,
[data-theme-version="dark"].page-copytraders .filter-select {
background-color: #1e293b !important;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 18px !important;
color: #fff !important;
border: 1px solid #475569 !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
padding-right: 45px !important;
}
/* ============================================================================
COPY TRADERS - FILTER SELECT DROPDOWN ARROW - FINAL FIX
Must use background shorthand to override the base style
============================================================================ */
[data-theme-version="dark"] .page-copytraders .filter-select,
body[data-theme-version="dark"] .page-copytraders .filter-select,
html[data-theme-version="dark"] .page-copytraders .filter-select,
[data-theme-version="dark"] .page-copytraders select.filter-select,
body[data-theme-version="dark"] .page-copytraders select.filter-select {
background: #1e293b url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='%23ffffff' d='M6 8L0 0h12z'/%3e%3c/svg%3e") no-repeat right 15px center !important;
background-size: 12px 8px !important;
color: #fff !important;
border-color: #475569 !important;
}
/* Copy Traders Modal - Terms Container Dark Mode */
[data-theme-version="dark"] .page-copytraders .terms-container,
body[data-theme-version="dark"] .page-copytraders .terms-container,
[data-theme-version="dark"] .page-copytraders .modal .terms-container {
background: #334155 !important;
border: 1px solid #475569;
}
[data-theme-version="dark"] .page-copytraders .terms-text,
body[data-theme-version="dark"] .page-copytraders .terms-text,
[data-theme-version="dark"] .page-copytraders .modal .terms-text {
color: #e2e8f0 !important;
}
[data-theme-version="dark"] .page-copytraders .terms-text a,
body[data-theme-version="dark"] .page-copytraders .terms-text a {
color: #60a5fa !important;
}
[data-theme-version="dark"] .page-copytraders .terms-checkbox,
body[data-theme-version="dark"] .page-copytraders .terms-checkbox {
accent-color: var(--primary);
}
/* Copy Traders Modal - Dark Mode Styling */
[data-theme-version="dark"] .page-copytraders .modal-content,
body[data-theme-version="dark"] .page-copytraders .modal-content {
background: #1e293b !important;
border: 1px solid #475569;
}
[data-theme-version="dark"] .page-copytraders .modal-header,
body[data-theme-version="dark"] .page-copytraders .modal-header {
border-bottom-color: #475569 !important;
}
[data-theme-version="dark"] .page-copytraders .modal-footer,
body[data-theme-version="dark"] .page-copytraders .modal-footer {
border-top-color: #475569 !important;
}
[data-theme-version="dark"] .page-copytraders .modal-title,
body[data-theme-version="dark"] .page-copytraders .modal-title {
color: #f1f5f9 !important;
}
[data-theme-version="dark"] .page-copytraders .modal-body label,
body[data-theme-version="dark"] .page-copytraders .modal-body label {
color: #e2e8f0 !important;
}
[data-theme-version="dark"] .page-copytraders .modal-body .form-control,
body[data-theme-version="dark"] .page-copytraders .modal-body .form-control {
background: #334155 !important;
border-color: #475569 !important;
color: #f1f5f9 !important;
}
[data-theme-version="dark"] .page-copytraders .modal-body small,
body[data-theme-version="dark"] .page-copytraders .modal-body small {
color: #94a3b8 !important;
}
/* Balance display box in modal */
[data-theme-version="dark"] .page-copytraders .modal-body div[style*="background: #f9fafb"],
body[data-theme-version="dark"] .page-copytraders .modal-body div[style*="background: #f9fafb"] {
background: #334155 !important;
border-color: #475569 !important;
}
/* Percentage slider labels */
[data-theme-version="dark"] .page-copytraders .slider-labels span,
body[data-theme-version="dark"] .page-copytraders .slider-labels span {
color: #94a3b8 !important;
}
/* Percentage display value */
[data-theme-version="dark"] .page-copytraders .percentage-value,
body[data-theme-version="dark"] .page-copytraders .percentage-value {
color: #f1f5f9 !important;
}
/* Slider track */
[data-theme-version="dark"] .page-copytraders .slider-track,
body[data-theme-version="dark"] .page-copytraders .slider-track {
background: #475569 !important;
}
/* Leverage select dropdown */
[data-theme-version="dark"] .page-copytraders .modal-body select,
body[data-theme-version="dark"] .page-copytraders .modal-body select {
background-color: #334155 !important;
border-color: #475569 !important;
color: #f1f5f9 !important;
}
[data-theme-version="dark"] .page-copytraders .modal-body select option,
body[data-theme-version="dark"] .page-copytraders .modal-body select option {
background: #1e293b !important;
color: #f1f5f9 !important;
}
/* btn-close in dark mode */
[data-theme-version="dark"] .page-copytraders .btn-close,
body[data-theme-version="dark"] .page-copytraders .btn-close {
filter: brightness(0) invert(1);
opacity: 1;
}
/* Approval Required Notice - Dark Mode */
[data-theme-version="dark"] .page-copytraders .approval-notice,
body[data-theme-version="dark"] .page-copytraders .approval-notice,
[data-theme-version="dark"] .page-copytraders .modal .approval-notice {
background: #422006 !important;
border-color: #854d0e !important;
}
[data-theme-version="dark"] .page-copytraders .approval-notice-title,
body[data-theme-version="dark"] .page-copytraders .approval-notice-title {
color: #fbbf24 !important;
}
[data-theme-version="dark"] .page-copytraders .approval-notice-text,
body[data-theme-version="dark"] .page-copytraders .approval-notice-text {
color: #fde68a !important;
}
[data-theme-version="dark"] .page-copytraders .approval-notice-icon,
body[data-theme-version="dark"] .page-copytraders .approval-notice-icon {
color: #fbbf24 !important;
}
/* Balance Amount in Modal - Dark Mode (white color) */
[data-theme-version="dark"] .page-copytraders .modal-body div[style*="font-size: 28px"],
body[data-theme-version="dark"] .page-copytraders .modal-body div[style*="font-size: 28px"] {
color: #ffffff !important;
}
[data-theme-version="dark"] .page-copytraders .modal-body div[style*="font-size: 20px"],
body[data-theme-version="dark"] .page-copytraders .modal-body div[style*="font-size: 20px"] {
color: #ffffff !important;
}
/* Form control input value - white in dark mode */
[data-theme-version="dark"] .page-copytraders .modal-body input.form-control,
body[data-theme-version="dark"] .page-copytraders .modal-body input.form-control {
color: #ffffff !important;
}
/* =============================================
Trader Detail Page - Dark Mode
============================================= */
/* Main content cards */
[data-theme-version="dark"] .page-traderdetails .content-card,
body[data-theme-version="dark"] .page-traderdetails .content-card {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-traderdetails .content-card-header,
body[data-theme-version="dark"] .page-traderdetails .content-card-header {
border-bottom-color: #334155 !important;
}
[data-theme-version="dark"] .page-traderdetails .content-card-title,
body[data-theme-version="dark"] .page-traderdetails .content-card-title {
color: #f1f5f9 !important;
}
/* Trader Profile Header */
[data-theme-version="dark"] .page-traderdetails .trader-profile-header,
body[data-theme-version="dark"] .page-traderdetails .trader-profile-header {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-traderdetails .profile-info-main h1,
body[data-theme-version="dark"] .page-traderdetails .profile-info-main h1 {
color: #f1f5f9 !important;
}
[data-theme-version="dark"] .page-traderdetails .profile-username,
body[data-theme-version="dark"] .page-traderdetails .profile-username {
color: #94a3b8 !important;
}
/* Profile stat items in header */
[data-theme-version="dark"] .page-traderdetails .profile-stat-item,
body[data-theme-version="dark"] .page-traderdetails .profile-stat-item {
background: #334155 !important;
border-color: #475569 !important;
}
[data-theme-version="dark"] .page-traderdetails .profile-stat-label,
body[data-theme-version="dark"] .page-traderdetails .profile-stat-label {
color: #94a3b8 !important;
}
[data-theme-version="dark"] .page-traderdetails .profile-stat-value,
body[data-theme-version="dark"] .page-traderdetails .profile-stat-value {
color: #f1f5f9 !important;
}
/* Action buttons */
[data-theme-version="dark"] .page-traderdetails .btn-share,
body[data-theme-version="dark"] .page-traderdetails .btn-share {
background: #334155 !important;
border-color: #475569 !important;
color: #f1f5f9 !important;
}
[data-theme-version="dark"] .page-traderdetails .btn-share:hover,
body[data-theme-version="dark"] .page-traderdetails .btn-share:hover {
background: #475569 !important;
}
/* Stats Grid - stat boxes */
[data-theme-version="dark"] .page-traderdetails .stat-box,
body[data-theme-version="dark"] .page-traderdetails .stat-box {
background: #334155 !important;
border-color: #475569 !important;
}
[data-theme-version="dark"] .page-traderdetails .stat-box-label,
body[data-theme-version="dark"] .page-traderdetails .stat-box-label {
color: #94a3b8 !important;
}
[data-theme-version="dark"] .page-traderdetails .stat-box-value,
body[data-theme-version="dark"] .page-traderdetails .stat-box-value {
color: #f1f5f9 !important;
}
[data-theme-version="dark"] .page-traderdetails .stat-box-value.green,
body[data-theme-version="dark"] .page-traderdetails .stat-box-value.green {
color: #10b981 !important;
}
[data-theme-version="dark"] .page-traderdetails .stat-box-value.red,
body[data-theme-version="dark"] .page-traderdetails .stat-box-value.red {
color: #ef4444 !important;
}
/* About section */
[data-theme-version="dark"] .page-traderdetails .about-content,
body[data-theme-version="dark"] .page-traderdetails .about-content {
color: #e2e8f0 !important;
}
[data-theme-version="dark"] .page-traderdetails .about-content p,
body[data-theme-version="dark"] .page-traderdetails .about-content p {
color: #cbd5e1 !important;
}
/* About items (Copy Trading Configuration) */
[data-theme-version="dark"] .page-traderdetails .about-item,
body[data-theme-version="dark"] .page-traderdetails .about-item {
background: #334155 !important;
border-color: #475569 !important;
}
[data-theme-version="dark"] .page-traderdetails .about-icon,
body[data-theme-version="dark"] .page-traderdetails .about-icon {
background: #475569 !important;
color: #60a5fa !important;
}
[data-theme-version="dark"] .page-traderdetails .about-icon i,
body[data-theme-version="dark"] .page-traderdetails .about-icon i {
color: #60a5fa !important;
}
[data-theme-version="dark"] .page-traderdetails .about-text h5,
body[data-theme-version="dark"] .page-traderdetails .about-text h5 {
color: #f1f5f9 !important;
}
[data-theme-version="dark"] .page-traderdetails .about-text p,
body[data-theme-version="dark"] .page-traderdetails .about-text p {
color: #94a3b8 !important;
}
/* Profile badges */
[data-theme-version="dark"] .page-traderdetails .profile-badge,
body[data-theme-version="dark"] .page-traderdetails .profile-badge {
background: #334155 !important;
color: #e2e8f0 !important;
}
[data-theme-version="dark"] .page-traderdetails .profile-badge.verified,
body[data-theme-version="dark"] .page-traderdetails .profile-badge.verified {
background: rgba(59, 130, 246, 0.2) !important;
color: #60a5fa !important;
}
[data-theme-version="dark"] .page-traderdetails .profile-badge.gold,
body[data-theme-version="dark"] .page-traderdetails .profile-badge.gold {
background: rgba(245, 158, 11, 0.2) !important;
color: #fbbf24 !important;
}
/* =============================================
Trader Profile Header - Badge-Based Backgrounds
============================================= */
/* Base header styles */
.page-traderdetails .trader-profile-header {
position: relative;
overflow: hidden;
border-radius: 16px;
padding: 30px;
margin-bottom: 20px;
}
/* Premium/Gold Badge - Luxurious gold gradient with pattern */
.page-traderdetails .trader-profile-header.badge-premium {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 30%, #fcd34d 70%, #f59e0b 100%);
border: 2px solid #f59e0b;
}
.page-traderdetails .trader-profile-header.badge-premium::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 80%, rgba(245, 158, 11, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(251, 191, 36, 0.4) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(252, 211, 77, 0.2) 0%, transparent 30%);
pointer-events: none;
}
.page-traderdetails .trader-profile-header.badge-premium::after {
content: "\e7f1";
font-family: "Material Icons";
position: absolute;
top: 20px;
right: 30px;
font-size: 120px;
color: rgba(245, 158, 11, 0.15);
pointer-events: none;
}
/* Verified/Blue Badge - Professional blue gradient with pattern */
.page-traderdetails .trader-profile-header.badge-verified {
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 30%, #93c5fd 70%, #3b82f6 100%);
border: 2px solid #3b82f6;
}
.page-traderdetails .trader-profile-header.badge-verified::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 10% 90%, rgba(59, 130, 246, 0.3) 0%, transparent 50%),
radial-gradient(circle at 90% 10%, rgba(96, 165, 250, 0.4) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(147, 197, 253, 0.2) 0%, transparent 40%);
pointer-events: none;
}
.page-traderdetails .trader-profile-header.badge-verified::after {
content: "\e8e8";
font-family: "Material Icons";
position: absolute;
top: 20px;
right: 30px;
font-size: 120px;
color: rgba(59, 130, 246, 0.15);
pointer-events: none;
}
/* No Badge - Clean neutral gradient */
.page-traderdetails .trader-profile-header.badge-none {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 30%, #e2e8f0 70%, #cbd5e1 100%);
border: 2px solid #cbd5e1;
}
.page-traderdetails .trader-profile-header.badge-none::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 15% 85%, rgba(148, 163, 184, 0.2) 0%, transparent 50%),
radial-gradient(circle at 85% 15%, rgba(203, 213, 225, 0.3) 0%, transparent 50%);
pointer-events: none;
}
.page-traderdetails .trader-profile-header.badge-none::after {
content: "\e87c";
font-family: "Material Icons";
position: absolute;
top: 20px;
right: 30px;
font-size: 120px;
color: rgba(148, 163, 184, 0.15);
pointer-events: none;
}
/* Ensure content is above the pseudo-elements */
.page-traderdetails .trader-profile-header .profile-main,
.page-traderdetails .trader-profile-header .profile-stats,
.page-traderdetails .trader-profile-header .action-buttons {
position: relative;
z-index: 1;
}
/* Text colors for premium badge */
.page-traderdetails .trader-profile-header.badge-premium .profile-info-main h1 {
color: #78350f !important;
}
.page-traderdetails .trader-profile-header.badge-premium .profile-username {
color: #92400e !important;
}
.page-traderdetails .trader-profile-header.badge-premium .profile-stat-item {
background: rgba(255, 255, 255, 0.7) !important;
backdrop-filter: blur(10px);
border: 1px solid rgba(245, 158, 11, 0.3) !important;
}
.page-traderdetails .trader-profile-header.badge-premium .profile-stat-label {
color: #92400e !important;
}
.page-traderdetails .trader-profile-header.badge-premium .profile-stat-value {
color: #78350f !important;
}
.page-traderdetails .trader-profile-header.badge-premium .btn-share {
background: rgba(255, 255, 255, 0.7) !important;
border: 1px solid rgba(245, 158, 11, 0.3) !important;
color: #92400e !important;
}
/* Text colors for verified badge */
.page-traderdetails .trader-profile-header.badge-verified .profile-info-main h1 {
color: #1e3a8a !important;
}
.page-traderdetails .trader-profile-header.badge-verified .profile-username {
color: #1e40af !important;
}
.page-traderdetails .trader-profile-header.badge-verified .profile-stat-item {
background: rgba(255, 255, 255, 0.7) !important;
backdrop-filter: blur(10px);
border: 1px solid rgba(59, 130, 246, 0.3) !important;
}
.page-traderdetails .trader-profile-header.badge-verified .profile-stat-label {
color: #1e40af !important;
}
.page-traderdetails .trader-profile-header.badge-verified .profile-stat-value {
color: #1e3a8a !important;
}
.page-traderdetails .trader-profile-header.badge-verified .btn-share {
background: rgba(255, 255, 255, 0.7) !important;
border: 1px solid rgba(59, 130, 246, 0.3) !important;
color: #1e40af !important;
}
/* Text colors for no badge */
.page-traderdetails .trader-profile-header.badge-none .profile-info-main h1 {
color: #1e293b !important;
}
.page-traderdetails .trader-profile-header.badge-none .profile-username {
color: #475569 !important;
}
.page-traderdetails .trader-profile-header.badge-none .profile-stat-item {
background: rgba(255, 255, 255, 0.8) !important;
backdrop-filter: blur(10px);
border: 1px solid rgba(148, 163, 184, 0.3) !important;
}
.page-traderdetails .trader-profile-header.badge-none .profile-stat-label {
color: #64748b !important;
}
.page-traderdetails .trader-profile-header.badge-none .profile-stat-value {
color: #1e293b !important;
}
.page-traderdetails .trader-profile-header.badge-none .btn-share {
background: rgba(255, 255, 255, 0.8) !important;
border: 1px solid rgba(148, 163, 184, 0.3) !important;
color: #475569 !important;
}
/* =============================================
Trader Profile Header - Dark Mode Badge Backgrounds
============================================= */
/* Premium/Gold Badge - Dark Mode */
[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-premium,
body[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-premium {
background: linear-gradient(135deg, #422006 0%, #78350f 30%, #92400e 70%, #b45309 100%);
border-color: #f59e0b;
}
[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-premium::before {
background-image:
radial-gradient(circle at 20% 80%, rgba(245, 158, 11, 0.2) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(251, 191, 36, 0.25) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(252, 211, 77, 0.15) 0%, transparent 30%);
}
[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-premium::after {
color: rgba(245, 158, 11, 0.1);
}
[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-premium .profile-info-main h1 {
color: #fde68a !important;
}
[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-premium .profile-username {
color: #fcd34d !important;
}
[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-premium .profile-stat-item {
background: rgba(30, 41, 59, 0.7) !important;
border-color: rgba(245, 158, 11, 0.3) !important;
}
[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-premium .profile-stat-label {
color: #fcd34d !important;
}
[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-premium .profile-stat-value {
color: #fef3c7 !important;
}
[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-premium .btn-share {
background: rgba(30, 41, 59, 0.7) !important;
border-color: rgba(245, 158, 11, 0.3) !important;
color: #fcd34d !important;
}
/* Verified/Blue Badge - Dark Mode */
[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-verified,
body[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-verified {
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 30%, #2563eb 70%, #3b82f6 100%);
border-color: #3b82f6;
}
[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-verified::before {
background-image:
radial-gradient(circle at 10% 90%, rgba(59, 130, 246, 0.2) 0%, transparent 50%),
radial-gradient(circle at 90% 10%, rgba(96, 165, 250, 0.25) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(147, 197, 253, 0.15) 0%, transparent 40%);
}
[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-verified::after {
color: rgba(96, 165, 250, 0.1);
}
[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-verified .profile-info-main h1 {
color: #bfdbfe !important;
}
[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-verified .profile-username {
color: #93c5fd !important;
}
[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-verified .profile-stat-item {
background: rgba(30, 41, 59, 0.7) !important;
border-color: rgba(59, 130, 246, 0.3) !important;
}
[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-verified .profile-stat-label {
color: #93c5fd !important;
}
[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-verified .profile-stat-value {
color: #dbeafe !important;
}
[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-verified .btn-share {
background: rgba(30, 41, 59, 0.7) !important;
border-color: rgba(59, 130, 246, 0.3) !important;
color: #93c5fd !important;
}
/* No Badge - Dark Mode */
[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-none,
body[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-none {
background: linear-gradient(135deg, #1e293b 0%, #334155 30%, #475569 70%, #64748b 100%);
border-color: #64748b;
}
[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-none::before {
background-image:
radial-gradient(circle at 15% 85%, rgba(100, 116, 139, 0.15) 0%, transparent 50%),
radial-gradient(circle at 85% 15%, rgba(148, 163, 184, 0.2) 0%, transparent 50%);
}
[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-none::after {
color: rgba(148, 163, 184, 0.1);
}
[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-none .profile-info-main h1 {
color: #f1f5f9 !important;
}
[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-none .profile-username {
color: #cbd5e1 !important;
}
[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-none .profile-stat-item {
background: rgba(30, 41, 59, 0.7) !important;
border-color: rgba(100, 116, 139, 0.3) !important;
}
[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-none .profile-stat-label {
color: #94a3b8 !important;
}
[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-none .profile-stat-value {
color: #f1f5f9 !important;
}
[data-theme-version="dark"] .page-traderdetails .trader-profile-header.badge-none .btn-share {
background: rgba(30, 41, 59, 0.7) !important;
border-color: rgba(100, 116, 139, 0.3) !important;
color: #cbd5e1 !important;
}
/* =============================================
Deposit & Withdrawal Pages - Dark Mode Inputs
============================================= */
/* Network input field and other text inputs */
[data-theme-version="dark"] .page-deposit input[type="text"],
[data-theme-version="dark"] .page-deposit input[type="number"],
[data-theme-version="dark"] .page-deposit select,
[data-theme-version="dark"] .page-deposit .form-control,
body[data-theme-version="dark"] .page-deposit input[type="text"],
body[data-theme-version="dark"] .page-deposit input[type="number"],
body[data-theme-version="dark"] .page-deposit select,
body[data-theme-version="dark"] .page-deposit .form-control {
background: #334155 !important;
border-color: #475569 !important;
color: #f1f5f9 !important;
}
[data-theme-version="dark"] .page-deposit input::placeholder,
body[data-theme-version="dark"] .page-deposit input::placeholder {
color: #94a3b8 !important;
}
[data-theme-version="dark"] .page-deposit select option,
body[data-theme-version="dark"] .page-deposit select option {
background: #1e293b !important;
color: #f1f5f9 !important;
}
/* Withdrawal page */
[data-theme-version="dark"] .page-withdraw input[type="text"],
[data-theme-version="dark"] .page-withdraw input[type="number"],
[data-theme-version="dark"] .page-withdraw select,
[data-theme-version="dark"] .page-withdraw .form-control,
body[data-theme-version="dark"] .page-withdraw input[type="text"],
body[data-theme-version="dark"] .page-withdraw input[type="number"],
body[data-theme-version="dark"] .page-withdraw select,
body[data-theme-version="dark"] .page-withdraw .form-control {
background: #334155 !important;
border-color: #475569 !important;
color: #f1f5f9 !important;
}
[data-theme-version="dark"] .page-withdraw input::placeholder,
body[data-theme-version="dark"] .page-withdraw input::placeholder {
color: #94a3b8 !important;
}
[data-theme-version="dark"] .page-withdraw select option,
body[data-theme-version="dark"] .page-withdraw select option {
background: #1e293b !important;
color: #f1f5f9 !important;
}
/* Labels */
[data-theme-version="dark"] .page-deposit label,
[data-theme-version="dark"] .page-withdraw label,
body[data-theme-version="dark"] .page-deposit label,
body[data-theme-version="dark"] .page-withdraw label {
color: #e2e8f0 !important;
}
/* Small helper text */
[data-theme-version="dark"] .page-deposit small,
[data-theme-version="dark"] .page-withdraw small,
body[data-theme-version="dark"] .page-deposit small,
body[data-theme-version="dark"] .page-withdraw small {
color: #94a3b8 !important;
}
/* Read-only/disabled inputs */
[data-theme-version="dark"] .page-deposit input[readonly],
[data-theme-version="dark"] .page-deposit input:disabled,
[data-theme-version="dark"] .page-withdraw input[readonly],
[data-theme-version="dark"] .page-withdraw input:disabled,
body[data-theme-version="dark"] .page-deposit input[readonly],
body[data-theme-version="dark"] .page-deposit input:disabled,
body[data-theme-version="dark"] .page-withdraw input[readonly],
body[data-theme-version="dark"] .page-withdraw input:disabled {
background: #1e293b !important;
border-color: #334155 !important;
color: #94a3b8 !important;
}
/* Input groups (like the one with $ prefix) */
[data-theme-version="dark"] .page-deposit .input-group-text,
[data-theme-version="dark"] .page-withdraw .input-group-text,
body[data-theme-version="dark"] .page-deposit .input-group-text,
body[data-theme-version="dark"] .page-withdraw .input-group-text {
background: #475569 !important;
border-color: #475569 !important;
color: #e2e8f0 !important;
}
/* Cards on deposit/withdrawal pages */
[data-theme-version="dark"] .page-deposit .card,
[data-theme-version="dark"] .page-withdraw .card,
body[data-theme-version="dark"] .page-deposit .card,
body[data-theme-version="dark"] .page-withdraw .card {
background: #1e293b !important;
border-color: #334155 !important;
}
[data-theme-version="dark"] .page-deposit .card-header,
[data-theme-version="dark"] .page-withdraw .card-header,
body[data-theme-version="dark"] .page-deposit .card-header,
body[data-theme-version="dark"] .page-withdraw .card-header {
border-bottom-color: #334155 !important;
}
/* Network Display field - Dark Mode (the read-only div) */
[data-theme-version="dark"] .page-deposit #networkDisplay,
body[data-theme-version="dark"] .page-deposit #networkDisplay,
[data-theme-version="dark"] #networkDisplay {
background-color: #334155 !important;
border-color: #475569 !important;
color: #f1f5f9 !important;
}
/* Deposit select dropdowns */
[data-theme-version="dark"] .page-deposit .deposit-select,
body[data-theme-version="dark"] .page-deposit .deposit-select,
[data-theme-version="dark"] .deposit-select {
background-color: #334155 !important;
border-color: #475569 !important;
color: #f1f5f9 !important;
}
[data-theme-version="dark"] .page-deposit .deposit-select option,
body[data-theme-version="dark"] .page-deposit .deposit-select option {
background-color: #1e293b !important;
color: #f1f5f9 !important;
}
/* Amount input wrapper */
[data-theme-version="dark"] .page-deposit .amount-input-wrapper,
body[data-theme-version="dark"] .page-deposit .amount-input-wrapper,
[data-theme-version="dark"] .amount-input-wrapper {
background-color: #334155 !important;
border-color: #475569 !important;
}
[data-theme-version="dark"] .page-deposit .amount-input-wrapper input,
body[data-theme-version="dark"] .page-deposit .amount-input-wrapper input,
[data-theme-version="dark"] .amount-input-wrapper input {
background-color: transparent !important;
color: #f1f5f9 !important;
}
[data-theme-version="dark"] .page-deposit .amount-input-wrapper input::placeholder,
body[data-theme-version="dark"] .page-deposit .amount-input-wrapper input::placeholder {
color: #94a3b8 !important;
}
[data-theme-version="dark"] .page-deposit .input-prefix,
[data-theme-version="dark"] .page-deposit .input-suffix,
body[data-theme-version="dark"] .page-deposit .input-prefix,
body[data-theme-version="dark"] .page-deposit .input-suffix {
color: #94a3b8 !important;
}
/* Fee breakdown */
[data-theme-version="dark"] .page-deposit .fee-breakdown,
body[data-theme-version="dark"] .page-deposit .fee-breakdown,
[data-theme-version="dark"] .fee-breakdown {
background-color: #334155 !important;
border-color: #475569 !important;
}
[data-theme-version="dark"] .page-deposit .fee-row,
body[data-theme-version="dark"] .page-deposit .fee-row {
color: #e2e8f0 !important;
border-color: #475569 !important;
}
[data-theme-version="dark"] .page-deposit .fee-row.total,
body[data-theme-version="dark"] .page-deposit .fee-row.total {
color: #f1f5f9 !important;
}
/* Payment method cards */
[data-theme-version="dark"] .page-deposit .payment-method-card,
body[data-theme-version="dark"] .page-deposit .payment-method-card {
background-color: #334155 !important;
border-color: #475569 !important;
color: #e2e8f0 !important;
}
[data-theme-version="dark"] .page-deposit .payment-method-card.active,
body[data-theme-version="dark"] .page-deposit .payment-method-card.active {
border-color: var(--primary) !important;
background-color: rgba(99, 102, 241, 0.1) !important;
}
[data-theme-version="dark"] .page-deposit .payment-method-card:hover,
body[data-theme-version="dark"] .page-deposit .payment-method-card:hover {
border-color: var(--primary) !important;
}
/* Withdrawal page - same styles */
[data-theme-version="dark"] .page-withdraw .deposit-select,
body[data-theme-version="dark"] .page-withdraw .deposit-select {
background-color: #334155 !important;
border-color: #475569 !important;
color: #f1f5f9 !important;
}
[data-theme-version="dark"] .page-withdraw .amount-input-wrapper,
body[data-theme-version="dark"] .page-withdraw .amount-input-wrapper {
background-color: #334155 !important;
border-color: #475569 !important;
}
[data-theme-version="dark"] .page-withdraw .amount-input-wrapper input,
body[data-theme-version="dark"] .page-withdraw .amount-input-wrapper input {
background-color: transparent !important;
color: #f1f5f9 !important;
}
[data-theme-version="dark"] .page-withdraw .input-prefix,
[data-theme-version="dark"] .page-withdraw .input-suffix,
body[data-theme-version="dark"] .page-withdraw .input-prefix,
body[data-theme-version="dark"] .page-withdraw .input-suffix {
color: #94a3b8 !important;
}
[data-theme-version="dark"] .page-withdraw .fee-breakdown,
body[data-theme-version="dark"] .page-withdraw .fee-breakdown {
background-color: #334155 !important;
border-color: #475569 !important;
}
[data-theme-version="dark"] .page-withdraw .fee-row,
body[data-theme-version="dark"] .page-withdraw .fee-row {
color: #e2e8f0 !important;
border-color: #475569 !important;
}
/* ============================================
MOBILE PWA AUTH PAGE STYLES
Clean, simple, consistent design
============================================ */
/* Mobile Auth Header */
.mobile-auth-header {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 56px;
padding: 0 16px;
z-index: 1000;
align-items: center;
justify-content: flex-end;
background: transparent;
}
.mobile-header-spacer {
flex: 1;
}
/* Mobile Back Button */
.mobile-back-btn {
width: 40px;
height: 40px;
border-radius: 8px;
background: rgba(99, 102, 241, 0.12);
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
}
.mobile-back-btn i {
font-size: 20px;
color: #374151;
transition: color 0.3s ease;
}
.mobile-back-btn:hover {
background: #6366f1;
}
.mobile-back-btn:hover i {
color: #ffffff;
}
.mobile-back-btn:active {
transform: scale(0.95);
}
/* Dark mode back button */
body[data-theme-version="dark"] .mobile-back-btn {
background: rgba(139, 92, 246, 0.2);
}
body[data-theme-version="dark"] .mobile-back-btn i {
color: #e5e7eb;
}
body[data-theme-version="dark"] .mobile-back-btn:hover {
background: #8b5cf6;
}
body[data-theme-version="dark"] .mobile-back-btn:hover i {
color: #ffffff;
}
.mobile-theme-toggle {
width: 40px;
height: 40px;
border-radius: 8px;
background: rgba(99, 102, 241, 0.12);
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.mobile-theme-toggle i {
font-size: 20px;
color: #374151;
transition: color 0.3s ease;
}
.mobile-theme-toggle:hover {
background: #6366f1;
}
.mobile-theme-toggle:hover i {
color: #ffffff;
}
.mobile-theme-toggle:active {
transform: scale(0.95);
}
/* Dark mode theme toggle */
body[data-theme-version="dark"] .mobile-theme-toggle {
background: rgba(139, 92, 246, 0.2);
}
body[data-theme-version="dark"] .mobile-theme-toggle i {
color: #e5e7eb;
}
body[data-theme-version="dark"] .mobile-theme-toggle:hover {
background: #8b5cf6;
}
body[data-theme-version="dark"] .mobile-theme-toggle:hover i {
color: #ffffff;
}
/* ============================================
AUTH FOOTER - HIDDEN ON DESKTOP BY DEFAULT
============================================ */
.auth-footer {
display: none;
}
/* ============================================
MOBILE PWA RESPONSIVE - AUTH PAGES
============================================ */
@media (max-width: 640px) {
/* Show mobile header */
body.page-signin .mobile-auth-header,
body.page-signup .mobile-auth-header,
body.page-signupstep2 .mobile-auth-header,
body.page-signupstep3 .mobile-auth-header,
body.page-forgotpwd .mobile-auth-header,
body.page-emailverify .mobile-auth-header {
display: flex;
}
/* Clean white/dark background */
body.page-signin,
body.page-signup,
body.page-signupstep2,
body.page-signupstep3,
body.page-forgotpwd,
body.page-emailverify {
background: #ffffff !important;
padding: 0 !important;
min-height: 100vh;
display: flex;
flex-direction: column;
}
body.page-signin[data-theme-version="dark"],
body.page-signup[data-theme-version="dark"],
body.page-signupstep2[data-theme-version="dark"],
body.page-signupstep3[data-theme-version="dark"],
body.page-forgotpwd[data-theme-version="dark"],
body.page-emailverify[data-theme-version="dark"] {
background: #17171E !important;
}
/* Auth container */
.page-signin .auth-container,
.page-signup .auth-container,
.page-signupstep2 .auth-container,
.page-signupstep3 .auth-container,
.page-forgotpwd .auth-container,
.page-emailverify .auth-container {
max-width: 100% !important;
width: 100% !important;
flex: 1;
display: flex;
flex-direction: column;
padding: 0 !important;
}
/* Auth card - transparent */
.page-signin .auth-card,
.page-signup .auth-card,
.page-signupstep2 .auth-card,
.page-signupstep3 .auth-card,
.page-forgotpwd .auth-card,
.page-emailverify .auth-card {
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
border: none !important;
display: flex;
flex-direction: column;
}
/* Auth header */
.page-signin .auth-header,
.page-signup .auth-header,
.page-signupstep2 .auth-header,
.page-signupstep3 .auth-header,
.page-forgotpwd .auth-header,
.page-emailverify .auth-header {
padding: 80px 24px 24px 24px !important;
text-align: center;
background: transparent !important;
}
/* Logo - centered, side by side */
.page-signin .auth-logo,
.page-signup .auth-logo,
.page-signupstep2 .auth-logo,
.page-signupstep3 .auth-logo,
.page-forgotpwd .auth-logo,
.page-emailverify .auth-logo {
display: flex !important;
flex-direction: row !important;
justify-content: center;
align-items: center;
gap: 10px !important;
margin-bottom: 24px;
}
.page-signin .auth-logo svg,
.page-signup .auth-logo svg,
.page-signupstep2 .auth-logo svg,
.page-signupstep3 .auth-logo svg,
.page-forgotpwd .auth-logo svg,
.page-emailverify .auth-logo svg {
width: 40px !important;
height: 40px !important;
flex-shrink: 0;
}
/* Logo text */
.page-signin .auth-logo-text,
.page-signup .auth-logo-text,
.page-signupstep2 .auth-logo-text,
.page-signupstep3 .auth-logo-text,
.page-forgotpwd .auth-logo-text,
.page-emailverify .auth-logo-text {
font-size: 24px !important;
font-weight: 700 !important;
color: #111827 !important;
letter-spacing: -0.5px;
background: none !important;
-webkit-text-fill-color: unset !important;
}
body[data-theme-version="dark"] .auth-logo-text {
color: #f9fafb !important;
}
/* Auth title */
.page-signin .auth-title,
.page-signup .auth-title,
.page-signupstep2 .auth-title,
.page-signupstep3 .auth-title,
.page-forgotpwd .auth-title,
.page-emailverify .auth-title {
font-size: 26px !important;
font-weight: 700 !important;
color: #111827 !important;
margin-bottom: 8px !important;
letter-spacing: -0.3px;
line-height: 1.2;
}
body[data-theme-version="dark"] .auth-title {
color: #f9fafb !important;
}
/* Auth subtitle */
.page-signin .auth-subtitle,
.page-signup .auth-subtitle,
.page-signupstep2 .auth-subtitle,
.page-signupstep3 .auth-subtitle,
.page-forgotpwd .auth-subtitle,
.page-emailverify .auth-subtitle {
color: #6b7280 !important;
font-size: 15px !important;
text-align: center;
}
body[data-theme-version="dark"] .auth-subtitle {
color: #9ca3af !important;
}
.page-signin .auth-subtitle a,
.page-signup .auth-subtitle a,
.page-signupstep2 .auth-subtitle a,
.page-signupstep3 .auth-subtitle a,
.page-forgotpwd .auth-subtitle a,
.page-emailverify .auth-subtitle a {
color: #6366f1 !important;
font-weight: 600;
text-decoration: none;
}
body[data-theme-version="dark"] .auth-subtitle a {
color: #a78bfa !important;
}
/* Show icon wrapper with smaller size on mobile */
.page-forgotpwd .auth-icon-wrapper,
.page-emailverify .auth-icon-wrapper {
display: flex !important;
width: 56px !important;
height: 56px !important;
margin: 0 auto 16px !important;
}
.page-forgotpwd .auth-icon-wrapper i,
.page-emailverify .auth-icon-wrapper i {
font-size: 28px !important;
}
/* Auth body */
.page-signin .auth-body,
.page-signup .auth-body,
.page-signupstep2 .auth-body,
.page-signupstep3 .auth-body,
.page-forgotpwd .auth-body,
.page-emailverify .auth-body {
padding: 8px 24px 32px 24px !important;
background: transparent !important;
}
/* Form styling */
.page-signin .form-group,
.page-signup .form-group,
.page-signupstep2 .form-group,
.page-signupstep3 .form-group,
.page-forgotpwd .form-group,
.page-emailverify .form-group {
margin-bottom: 16px;
}
.page-signin .form-label,
.page-signup .form-label,
.page-signupstep2 .form-label,
.page-signupstep3 .form-label,
.page-forgotpwd .form-label,
.page-emailverify .form-label {
font-size: 14px !important;
font-weight: 500 !important;
color: #374151 !important;
margin-bottom: 8px !important;
}
body[data-theme-version="dark"] .form-label {
color: #d1d5db !important;
}
/* Input fields */
.page-signin .form-input,
.page-signup .form-input,
.page-signupstep2 .form-input,
.page-signupstep3 .form-input,
.page-forgotpwd .form-input,
.page-emailverify .form-input {
height: 52px !important;
border-radius: 12px !important;
font-size: 16px !important;
background: #f9fafb !important;
border: 1px solid #e5e7eb !important;
padding-left: 48px !important;
color: #111827 !important;
transition: all 0.2s ease;
}
body[data-theme-version="dark"] .form-input {
background: #1f2937 !important;
border-color: #374151 !important;
color: #f9fafb !important;
}
.page-signin .form-input:focus,
.page-signup .form-input:focus,
.page-signupstep2 .form-input:focus,
.page-signupstep3 .form-input:focus,
.page-forgotpwd .form-input:focus,
.page-emailverify .form-input:focus {
background: #ffffff !important;
border-color: #6366f1 !important;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}
body[data-theme-version="dark"] .form-input:focus {
background: #111827 !important;
border-color: #8b5cf6 !important;
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15) !important;
}
.page-signin .form-input::placeholder,
.page-signup .form-input::placeholder,
.page-signupstep2 .form-input::placeholder,
.page-signupstep3 .form-input::placeholder,
.page-forgotpwd .form-input::placeholder,
.page-emailverify .form-input::placeholder {
color: #9ca3af !important;
}
body[data-theme-version="dark"] .form-input::placeholder {
color: #6b7280 !important;
}
/* Form icon */
.page-signin .form-icon,
.page-signup .form-icon,
.page-signupstep2 .form-icon,
.page-signupstep3 .form-icon,
.page-forgotpwd .form-icon,
.page-emailverify .form-icon {
color: #6366f1 !important;
left: 14px !important;
font-size: 22px !important;
}
body[data-theme-version="dark"] .form-icon {
color: #a78bfa !important;
}
/* Password toggle */
.page-signin .password-toggle,
.page-signup .password-toggle,
.page-signupstep2 .password-toggle,
.page-signupstep3 .password-toggle,
.page-forgotpwd .password-toggle,
.page-emailverify .password-toggle {
color: #9ca3af !important;
right: 14px !important;
}
/* Submit button */
.page-signin .btn-submit,
.page-signup .btn-submit,
.page-signupstep2 .btn-submit,
.page-signupstep3 .btn-submit,
.page-forgotpwd .btn-submit,
.page-emailverify .btn-submit {
height: 52px !important;
border-radius: 12px !important;
font-size: 16px !important;
font-weight: 600 !important;
background: #6366f1 !important;
box-shadow: none !important;
border: none !important;
margin-top: 8px;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
color: #fff !important;
}
.page-signin .btn-submit i,
.page-signup .btn-submit i,
.page-signupstep2 .btn-submit i,
.page-signupstep3 .btn-submit i,
.page-forgotpwd .btn-submit i,
.page-emailverify .btn-submit i {
font-size: 20px !important;
color: #fff !important;
background: none !important;
width: auto !important;
height: auto !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
.page-signin .btn-submit:active,
.page-signup .btn-submit:active,
.page-signupstep2 .btn-submit:active,
.page-signupstep3 .btn-submit:active,
.page-forgotpwd .btn-submit:active,
.page-emailverify .btn-submit:active {
transform: scale(0.98);
background: #4f46e5 !important;
}
/* Hide back to home on mobile */
.page-signin .auth-body > form > a[href*="interface_home"],
.page-signup .auth-body > form > a[href*="interface_home"],
.page-signupstep2 .auth-body > form > a[href*="interface_home"],
.page-signupstep3 .auth-body > form > a[href*="interface_home"],
.page-forgotpwd .auth-body > form > a[href*="interface_home"],
.page-emailverify .auth-body > form > a[href*="interface_home"],
.page-signin .auth-body form > a[href*="interface_home"],
.page-signup .auth-body form > a[href*="interface_home"],
.page-forgotpwd .auth-body a[href*="interface_home"],
.page-forgotpwd .auth-header a[href*="sign_in"] {
display: none !important;
}
/* Remember me and forgot password */
.page-signin .form-footer,
.page-signup .form-footer {
margin-bottom: 20px !important;
}
.page-signin .forgot-password,
.page-signup .forgot-password {
color: #6366f1 !important;
font-weight: 500 !important;
font-size: 14px !important;
}
body[data-theme-version="dark"] .forgot-password {
color: #a78bfa !important;
}
/* Checkbox */
.page-signin .checkbox-label,
.page-signup .checkbox-label {
font-size: 14px !important;
color: #6b7280 !important;
}
body[data-theme-version="dark"] .checkbox-label {
color: #9ca3af !important;
}
/* Info boxes and helper text */
.page-forgotpwd .info-box,
.page-emailverify .info-box,
.page-forgotpwd .auth-body .alert,
.page-emailverify .auth-body .alert {
border-radius: 12px !important;
font-size: 14px !important;
}
/* Footer links styling */
.page-forgotpwd .footer-link,
.page-emailverify .footer-link {
color: #6b7280 !important;
font-size: 14px !important;
}
body[data-theme-version="dark"] .footer-link {
color: #9ca3af !important;
}
.page-forgotpwd .footer-link a,
.page-emailverify .footer-link a {
color: #6366f1 !important;
}
body[data-theme-version="dark"] .footer-link a {
color: #a78bfa !important;
}
}
/* Extra small screens */
@media (max-width: 400px) {
.page-signin .auth-header,
.page-signup .auth-header,
.page-signupstep2 .auth-header,
.page-signupstep3 .auth-header,
.page-forgotpwd .auth-header,
.page-emailverify .auth-header {
padding: 72px 20px 20px 20px !important;
}
.page-signin .auth-body,
.page-signup .auth-body,
.page-signupstep2 .auth-body,
.page-signupstep3 .auth-body,
.page-forgotpwd .auth-body,
.page-emailverify .auth-body {
padding: 8px 20px 24px 20px !important;
}
.page-signin .auth-title,
.page-signup .auth-title,
.page-signupstep2 .auth-title,
.page-signupstep3 .auth-title,
.page-forgotpwd .auth-title,
.page-emailverify .auth-title {
font-size: 24px !important;
}
.page-signin .auth-logo-text,
.page-signup .auth-logo-text,
.page-signupstep2 .auth-logo-text,
.page-signupstep3 .auth-logo-text,
.page-forgotpwd .auth-logo-text,
.page-emailverify .auth-logo-text {
font-size: 22px !important;
}
.page-signin .auth-logo svg,
.page-signup .auth-logo svg,
.page-signupstep2 .auth-logo svg,
.page-signupstep3 .auth-logo svg,
.page-forgotpwd .auth-logo svg,
.page-emailverify .auth-logo svg {
width: 36px !important;
height: 36px !important;
}
}
/* ============================================
PWA Legal Bottom Sheet Styles (Binance-style)
============================================ */
.pwa-legal-modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
}
.pwa-legal-modal.active {
display: block;
}
/* Dark backdrop */
.pwa-legal-backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
}
.pwa-legal-modal.active .pwa-legal-backdrop {
opacity: 1;
}
/* Bottom sheet card */
.pwa-legal-sheet {
position: absolute;
left: 0;
right: 0;
bottom: 0;
max-height: 90vh;
background: #ffffff;
border-radius: 20px 20px 0 0;
display: flex;
flex-direction: column;
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
}
.pwa-legal-modal.active .pwa-legal-sheet {
transform: translateY(0);
}
body[data-theme-version="dark"] .pwa-legal-sheet {
background: #1f2937;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
}
/* Drag handle indicator */
.pwa-legal-sheet-handle {
width: 40px;
height: 4px;
background: #d1d5db;
border-radius: 2px;
margin: 12px auto 0;
flex-shrink: 0;
}
body[data-theme-version="dark"] .pwa-legal-sheet-handle {
background: #4b5563;
}
/* Header with back button */
.pwa-legal-modal-header {
display: flex;
align-items: center;
padding: 12px 16px 12px 8px;
background: #ffffff;
border-bottom: 1px solid #e5e7eb;
flex-shrink: 0;
}
body[data-theme-version="dark"] .pwa-legal-modal-header {
background: #1f2937;
border-bottom-color: #374151;
}
/* Back button */
.pwa-legal-back {
width: 40px;
height: 40px;
border-radius: 50%;
background: transparent;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #111827;
transition: background 0.2s ease;
flex-shrink: 0;
}
.pwa-legal-back:hover {
background: #f3f4f6;
}
.pwa-legal-back i {
font-size: 24px;
}
body[data-theme-version="dark"] .pwa-legal-back {
color: #f9fafb;
}
body[data-theme-version="dark"] .pwa-legal-back:hover {
background: #374151;
}
/* Header spacer for centering */
.pwa-legal-header-spacer {
width: 40px;
flex-shrink: 0;
}
/* Title - centered */
.pwa-legal-modal-title {
flex: 1;
font-size: 16px;
font-weight: 600;
color: #111827;
margin: 0;
text-align: center;
}
body[data-theme-version="dark"] .pwa-legal-modal-title {
color: #f9fafb;
}
/* Content area */
.pwa-legal-modal-content {
flex: 1;
overflow-y: auto;
padding: 20px;
background: #ffffff;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
body[data-theme-version="dark"] .pwa-legal-modal-content {
background: #1f2937;
color: #e5e7eb;
}
.pwa-legal-modal-content h1,
.pwa-legal-modal-content h2,
.pwa-legal-modal-content h3 {
color: #111827;
margin-top: 20px;
margin-bottom: 10px;
font-size: 18px;
}
.pwa-legal-modal-content h1:first-child,
.pwa-legal-modal-content h2:first-child,
.pwa-legal-modal-content h3:first-child {
margin-top: 0;
}
body[data-theme-version="dark"] .pwa-legal-modal-content h1,
body[data-theme-version="dark"] .pwa-legal-modal-content h2,
body[data-theme-version="dark"] .pwa-legal-modal-content h3 {
color: #f9fafb;
}
.pwa-legal-modal-content p {
color: #4b5563;
line-height: 1.7;
margin-bottom: 14px;
font-size: 14px;
}
body[data-theme-version="dark"] .pwa-legal-modal-content p {
color: #d1d5db;
}
.pwa-legal-modal-content ul,
.pwa-legal-modal-content ol {
color: #4b5563;
line-height: 1.7;
margin-bottom: 14px;
padding-left: 20px;
font-size: 14px;
}
body[data-theme-version="dark"] .pwa-legal-modal-content ul,
body[data-theme-version="dark"] .pwa-legal-modal-content ol {
color: #d1d5db;
}
/* ============================================
PWA Toast Notifications (Mobile)
============================================ */
.pwa-toast-container {
position: fixed;
top: 60px;
left: 12px;
right: 12px;
z-index: 10001;
display: flex;
flex-direction: column;
gap: 8px;
}
.pwa-toast {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-radius: 12px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
animation: pwaToastSlideIn 0.3s ease-out;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.pwa-toast-exit {
animation: pwaToastSlideOut 0.3s ease-out forwards;
}
@keyframes pwaToastSlideIn {
from {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes pwaToastSlideOut {
from {
opacity: 1;
transform: translateY(0) scale(1);
}
to {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
}
.pwa-toast-error {
background: rgba(239, 68, 68, 0.95);
border: 1px solid rgba(239, 68, 68, 0.3);
color: #fff;
}
.pwa-toast-success {
background: rgba(16, 185, 129, 0.95);
border: 1px solid rgba(16, 185, 129, 0.3);
color: #fff;
}
.pwa-toast-warning {
background: rgba(245, 158, 11, 0.95);
border: 1px solid rgba(245, 158, 11, 0.3);
color: #fff;
}
.pwa-toast-info {
background: rgba(99, 102, 241, 0.95);
border: 1px solid rgba(99, 102, 241, 0.3);
color: #fff;
}
.pwa-toast-icon {
font-size: 22px;
flex-shrink: 0;
}
.pwa-toast-text {
flex: 1;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
}
.pwa-toast-close {
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background 0.2s;
}
.pwa-toast-close:hover {
background: rgba(255, 255, 255, 0.3);
}
.pwa-toast-close i {
font-size: 18px;
color: #fff;
}
/* ============================================
PWA Loading Overlay
============================================ */
.pwa-loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10002;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: none;
align-items: center;
justify-content: center;
}
.pwa-loading-overlay.active {
display: flex;
}
.pwa-loading-spinner {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 32px 48px;
background: rgba(255, 255, 255, 0.95);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
body[data-theme-version="dark"] .pwa-loading-spinner {
background: rgba(31, 41, 55, 0.95);
}
.pwa-spinner {
width: 40px;
height: 40px;
border: 3px solid #e5e7eb;
border-top-color: #6366f1;
border-radius: 50%;
animation: pwaSpinnerRotate 0.8s linear infinite;
}
body[data-theme-version="dark"] .pwa-spinner {
border-color: #374151;
border-top-color: #818cf8;
}
@keyframes pwaSpinnerRotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.pwa-loading-spinner span {
font-size: 14px;
font-weight: 500;
color: #374151;
}
body[data-theme-version="dark"] .pwa-loading-spinner span {
color: #d1d5db;
}
/* Button loading state */
.btn-loading {
opacity: 0.7;
pointer-events: none;
}
/* ============================================
PWA Crypto Background (Mobile Auth Pages)
============================================ */
@media (max-width: 640px) {
/* Enable scrolling on auth pages */
html.page-signin,
html.page-signup,
html.page-signupstep2,
html.page-signupstep3,
html.page-forgotpwd,
html.page-emailverify,
body.page-signin,
body.page-signup,
body.page-signupstep2,
body.page-signupstep3,
body.page-forgotpwd,
body.page-emailverify {
overflow-y: auto !important;
overflow-x: hidden !important;
min-height: 100vh;
height: auto !important;
}
.page-signin .auth-container,
.page-signup .auth-container,
.page-signupstep2 .auth-container,
.page-signupstep3 .auth-container,
.page-forgotpwd .auth-container,
.page-emailverify .auth-container {
min-height: 0;
height: auto !important;
overflow: visible !important;
}
/* Crypto-themed background pattern */
.page-signin,
.page-signup,
.page-signupstep2,
.page-signupstep3,
.page-forgotpwd,
.page-emailverify {
position: relative;
}
/* Auth Footer - Show on mobile */
.auth-footer {
display: block;
width: 100%;
padding: 20px;
text-align: center;
position: relative;
z-index: 1;
margin-top: auto;
flex-shrink: 0;
}
.auth-footer p {
margin: 0;
font-size: 12px;
color: #9ca3af;
width: 100%;
}
body[data-theme-version="dark"] .auth-footer p {
color: #6b7280;
}
/* Hide pseudo-element backgrounds on mobile (using .auth-bg-decorations instead) */
body.page-signin::before,
body.page-signup::before,
body.page-signupstep2::before,
body.page-signupstep3::before,
body.page-forgotpwd::before,
body.page-emailverify::before,
body.page-signin::after,
body.page-signup::after,
body.page-signupstep2::after,
body.page-signupstep3::after,
body.page-forgotpwd::after,
body.page-emailverify::after {
display: none !important;
}
/* Ensure content stays above background */
.page-signin .auth-card,
.page-signup .auth-card,
.page-signupstep2 .auth-card,
.page-signupstep3 .auth-card,
.page-forgotpwd .auth-card,
.page-emailverify .auth-card {
position: relative;
z-index: 1;
}
}
/* ============================================
Auth Background Decorations (Responsive)
============================================ */
/* Hidden by default */
.auth-bg-decorations {
display: none;
}
/* Show on mobile only */
@media (max-width: 640px) {
.auth-bg-decorations {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
/* Gradient Blobs - Purple/Indigo only */
.auth-bg-blob {
position: absolute;
border-radius: 50%;
filter: blur(clamp(30px, 8vw, 50px));
}
.auth-bg-blob-1 {
top: -10%;
right: -15%;
width: clamp(150px, 55vw, 250px);
height: clamp(150px, 55vw, 250px);
background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.12) 100%);
}
.auth-bg-blob-2 {
bottom: 5%;
left: -20%;
width: clamp(130px, 50vw, 220px);
height: clamp(130px, 50vw, 220px);
background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(99, 102, 241, 0.08) 100%);
}
/* Hide blob-3 */
.auth-bg-blob-3 {
display: none;
}
/* Floating Crypto Icons - All purple/indigo */
.auth-bg-icon {
position: absolute;
opacity: 0.06;
color: #6366f1;
}
.auth-bg-icon svg {
width: 100%;
height: 100%;
}
.auth-bg-icon-1 {
top: 15%;
right: 8%;
width: clamp(28px, 9vw, 40px);
height: clamp(28px, 9vw, 40px);
color: #8b5cf6;
animation: floatIcon 8s ease-in-out infinite;
}
.auth-bg-icon-2 {
bottom: 20%;
left: 6%;
width: clamp(24px, 8vw, 34px);
height: clamp(24px, 8vw, 34px);
color: #6366f1;
animation: floatIcon 10s ease-in-out infinite reverse;
}
.auth-bg-icon-3 {
top: 45%;
right: 4%;
width: clamp(20px, 6vw, 28px);
height: clamp(20px, 6vw, 28px);
color: #a78bfa;
animation: floatIcon 7s ease-in-out infinite;
animation-delay: -2s;
}
@keyframes floatIcon {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-12px) rotate(3deg); }
}
/* Dark Mode Adjustments */
body[data-theme-version="dark"] .auth-bg-blob-1 {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(139, 92, 246, 0.18) 100%);
}
body[data-theme-version="dark"] .auth-bg-blob-2 {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.25) 0%, rgba(99, 102, 241, 0.12) 100%);
}
body[data-theme-version="dark"] .auth-bg-icon {
opacity: 0.1;
}
body[data-theme-version="dark"] .auth-bg-icon-1 {
color: #a78bfa;
}
body[data-theme-version="dark"] .auth-bg-icon-2 {
color: #818cf8;
}
body[data-theme-version="dark"] .auth-bg-icon-3 {
color: #c4b5fd;
}
}
/* ==========================================
GLOBAL MOBILE FIX - Container Edge Alignment
Ensures content aligns with header/footer on mobile
========================================== */
@media (max-width: 991px) {
/* Match the container padding to the mobile nav */
.content-body .container-fluid {
padding-left: 12px !important;
padding-right: 12px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Fix Bootstrap row negative margins that cause content to extend beyond container */
.content-body .row {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Fix Bootstrap col padding to match container */
.content-body [class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Ensure cards don't have extra margin */
.content-body .card {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Fix page titles alignment */
.page-titles {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Ensure body doesn't have horizontal scroll */
body {
overflow-x: hidden !important;
}
/* Match content width to viewport */
.content-body {
width: 100% !important;
max-width: 100vw !important;
padding-left: 0 !important;
padding-right: 0 !important;
overflow-x: hidden !important;
}
/* Fix any elements that might extend beyond viewport */
.help-hero,
.faq-section,
.recent-tickets-section,
.support-cta,
.quick-links-grid {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* ==========================================
Copy Traders Filter Modal - Bottom Sheet
========================================== */
.filter-modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 99999;
align-items: flex-end;
justify-content: center;
}
.filter-modal-overlay.active {
display: flex;
}
.filter-modal-sheet {
background: #ffffff;
border-radius: 20px 20px 0 0;
width: 100%;
max-width: 500px;
max-height: 85vh;
overflow: hidden;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.filter-modal-overlay.active .filter-modal-sheet {
transform: translateY(0);
}
.filter-modal-handle {
width: 40px;
height: 4px;
background: #d1d5db;
border-radius: 2px;
margin: 12px auto 0;
}
.filter-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px 16px;
border-bottom: 1px solid #e5e7eb;
}
.filter-modal-title {
font-size: 18px;
font-weight: 700;
color: #1a1a1a;
margin: 0;
}
.filter-modal-close {
width: 36px;
height: 36px;
border: none;
background: #f3f4f6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.filter-modal-close:hover {
background: #e5e7eb;
}
.filter-modal-close i {
font-size: 20px;
color: #4b5563;
}
.filter-modal-body {
padding: 24px;
overflow-y: auto;
max-height: calc(85vh - 180px);
}
.filter-modal-group {
margin-bottom: 20px;
}
.filter-modal-label {
display: block;
font-size: 14px;
font-weight: 600;
color: #374151;
margin-bottom: 8px;
}
.filter-modal-select {
width: 100%;
height: 48px;
padding: 0 16px;
border: 2px solid #e5e7eb;
border-radius: 12px;
background: #ffffff;
font-size: 15px;
color: #1f2937;
cursor: pointer;
transition: all 0.2s ease;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 20px;
}
.filter-modal-select:focus {
outline: none;
border-color: var(--primary, #6366F1);
}
.filter-modal-footer {
display: flex;
gap: 12px;
padding: 16px 24px 24px;
border-top: 1px solid #e5e7eb;
}
.filter-modal-btn-reset {
flex: 1;
height: 48px;
border: 2px solid #e5e7eb;
border-radius: 12px;
background: #ffffff;
font-size: 15px;
font-weight: 600;
color: #4b5563;
cursor: pointer;
transition: all 0.2s ease;
}
.filter-modal-btn-reset:hover {
background: #f3f4f6;
border-color: #d1d5db;
}
.filter-modal-btn-apply {
flex: 2;
height: 48px;
border: none;
border-radius: 12px;
background: var(--primary, #6366F1);
font-size: 15px;
font-weight: 600;
color: #ffffff;
cursor: pointer;
transition: all 0.2s ease;
}
.filter-modal-btn-apply:hover {
opacity: 0.9;
transform: translateY(-1px);
}
/* Filter Modal Dark Mode */
[data-theme-version="dark"] .filter-modal-sheet,
body[data-theme-version="dark"] .filter-modal-sheet {
background: #1e293b;
}
[data-theme-version="dark"] .filter-modal-handle,
body[data-theme-version="dark"] .filter-modal-handle {
background: #475569;
}
[data-theme-version="dark"] .filter-modal-header,
body[data-theme-version="dark"] .filter-modal-header {
border-color: #334155;
}
[data-theme-version="dark"] .filter-modal-title,
body[data-theme-version="dark"] .filter-modal-title {
color: #f1f5f9;
}
[data-theme-version="dark"] .filter-modal-close,
body[data-theme-version="dark"] .filter-modal-close {
background: #334155;
}
[data-theme-version="dark"] .filter-modal-close:hover,
body[data-theme-version="dark"] .filter-modal-close:hover {
background: #475569;
}
[data-theme-version="dark"] .filter-modal-close i,
body[data-theme-version="dark"] .filter-modal-close i {
color: #e2e8f0;
}
[data-theme-version="dark"] .filter-modal-label,
body[data-theme-version="dark"] .filter-modal-label {
color: #e2e8f0;
}
[data-theme-version="dark"] .filter-modal-select,
body[data-theme-version="dark"] .filter-modal-select {
background: #0f172a;
border-color: #334155;
color: #f1f5f9;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
[data-theme-version="dark"] .filter-modal-select:focus,
body[data-theme-version="dark"] .filter-modal-select:focus {
border-color: var(--primary, #6366F1);
}
[data-theme-version="dark"] .filter-modal-footer,
body[data-theme-version="dark"] .filter-modal-footer {
border-color: #334155;
}
[data-theme-version="dark"] .filter-modal-btn-reset,
body[data-theme-version="dark"] .filter-modal-btn-reset {
background: #0f172a;
border-color: #334155;
color: #e2e8f0;
}
[data-theme-version="dark"] .filter-modal-btn-reset:hover,
body[data-theme-version="dark"] .filter-modal-btn-reset:hover {
background: #1e293b;
border-color: #475569;
}
/* ==========================================
Copy Trading Agreement Bottom Sheet Modal
========================================== */
.agreement-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100000;
display: none;
align-items: flex-end;
justify-content: center;
}
.agreement-modal-overlay.active {
display: flex;
}
.agreement-modal-backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0);
transition: background 0.3s ease;
}
.agreement-modal-overlay.active .agreement-modal-backdrop {
background: rgba(0, 0, 0, 0.5);
}
.agreement-modal-sheet {
position: relative;
background: #ffffff;
border-radius: 20px 20px 0 0;
width: 100%;
max-width: 600px;
max-height: 90vh;
display: flex;
flex-direction: column;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.agreement-modal-overlay.active .agreement-modal-sheet {
transform: translateY(0);
}
.agreement-modal-handle {
width: 40px;
height: 4px;
background: #d1d5db;
border-radius: 2px;
margin: 12px auto 0;
}
.agreement-modal-header {
display: flex;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid #e5e7eb;
gap: 12px;
}
.agreement-modal-back {
width: 40px;
height: 40px;
border: none;
background: transparent;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.agreement-modal-back:hover {
background: #f3f4f6;
}
.agreement-modal-back i {
font-size: 24px;
color: #1f2937;
}
.agreement-modal-title {
flex: 1;
font-size: 18px;
font-weight: 600;
color: #1f2937;
margin: 0;
text-align: center;
}
.agreement-modal-spacer {
width: 40px;
}
.agreement-modal-content {
flex: 1;
overflow-y: auto;
padding: 24px;
-webkit-overflow-scrolling: touch;
}
.agreement-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
color: #6b7280;
}
.agreement-loading i {
font-size: 32px;
margin-bottom: 12px;
}
.agreement-loading .spinning {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Agreement modal content styling */
.agreement-modal-content h1 {
font-size: 24px;
font-weight: 700;
color: var(--primary, #6366F1);
margin: 0 0 16px 0;
}
.agreement-modal-content h2 {
font-size: 18px;
font-weight: 600;
color: #1f2937;
margin: 24px 0 12px 0;
padding-bottom: 8px;
border-bottom: 1px solid #e5e7eb;
}
.agreement-modal-content h3 {
font-size: 16px;
font-weight: 600;
color: #374151;
margin: 20px 0 10px 0;
}
.agreement-modal-content p {
font-size: 14px;
line-height: 1.7;
color: #4b5563;
margin: 0 0 12px 0;
}
.agreement-modal-content ul,
.agreement-modal-content ol {
margin: 12px 0;
padding-left: 24px;
color: #4b5563;
}
.agreement-modal-content li {
font-size: 14px;
line-height: 1.6;
margin-bottom: 8px;
}
.agreement-modal-content strong {
color: #1f2937;
font-weight: 600;
}
.agreement-modal-content .warning-box {
background: #fef3c7;
border: 1px solid #fcd34d;
border-radius: 12px;
padding: 16px;
margin: 16px 0;
}
.agreement-modal-content .warning-box.warning-yellow {
background: #fef3c7;
border-color: #fcd34d;
}
.agreement-modal-content .warning-box.warning-green {
background: #dcfce7;
border-color: #86efac;
}
.agreement-modal-content .warning-title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: #92400e;
margin-bottom: 8px;
}
.agreement-modal-content .warning-box.warning-green .warning-title {
color: #166534;
}
.agreement-modal-content .warning-title i {
font-size: 20px;
}
/* Agreement Modal Dark Mode */
[data-theme-version="dark"] .agreement-modal-sheet,
body[data-theme-version="dark"] .agreement-modal-sheet {
background: #1e293b;
}
[data-theme-version="dark"] .agreement-modal-handle,
body[data-theme-version="dark"] .agreement-modal-handle {
background: #475569;
}
[data-theme-version="dark"] .agreement-modal-header,
body[data-theme-version="dark"] .agreement-modal-header {
border-color: #334155;
}
[data-theme-version="dark"] .agreement-modal-back:hover,
body[data-theme-version="dark"] .agreement-modal-back:hover {
background: #334155;
}
[data-theme-version="dark"] .agreement-modal-back i,
body[data-theme-version="dark"] .agreement-modal-back i {
color: #f1f5f9;
}
[data-theme-version="dark"] .agreement-modal-title,
body[data-theme-version="dark"] .agreement-modal-title {
color: #f1f5f9;
}
[data-theme-version="dark"] .agreement-modal-content,
body[data-theme-version="dark"] .agreement-modal-content {
color: #cbd5e1;
}
[data-theme-version="dark"] .agreement-modal-content h1,
body[data-theme-version="dark"] .agreement-modal-content h1 {
color: #a5b4fc;
}
[data-theme-version="dark"] .agreement-modal-content h2,
body[data-theme-version="dark"] .agreement-modal-content h2 {
color: #f1f5f9;
border-color: #334155;
}
[data-theme-version="dark"] .agreement-modal-content h3,
body[data-theme-version="dark"] .agreement-modal-content h3 {
color: #e2e8f0;
}
[data-theme-version="dark"] .agreement-modal-content p,
[data-theme-version="dark"] .agreement-modal-content li,
body[data-theme-version="dark"] .agreement-modal-content p,
body[data-theme-version="dark"] .agreement-modal-content li {
color: #94a3b8;
}
[data-theme-version="dark"] .agreement-modal-content strong,
body[data-theme-version="dark"] .agreement-modal-content strong {
color: #f1f5f9;
}
[data-theme-version="dark"] .agreement-modal-content .warning-box.warning-yellow,
body[data-theme-version="dark"] .agreement-modal-content .warning-box.warning-yellow {
background: rgba(251, 191, 36, 0.15);
border-color: rgba(251, 191, 36, 0.3);
}
[data-theme-version="dark"] .agreement-modal-content .warning-box.warning-yellow .warning-title,
body[data-theme-version="dark"] .agreement-modal-content .warning-box.warning-yellow .warning-title {
color: #fbbf24;
}
[data-theme-version="dark"] .agreement-modal-content .warning-box.warning-green,
body[data-theme-version="dark"] .agreement-modal-content .warning-box.warning-green {
background: rgba(34, 197, 94, 0.15);
border-color: rgba(34, 197, 94, 0.3);
}
[data-theme-version="dark"] .agreement-modal-content .warning-box.warning-green .warning-title,
body[data-theme-version="dark"] .agreement-modal-content .warning-box.warning-green .warning-title {
color: #22c55e;
}
[data-theme-version="dark"] .agreement-loading,
body[data-theme-version="dark"] .agreement-loading {
color: #94a3b8;
}
/* ==========================================
Copy Trading Agreement Page Dark Mode Fix
========================================== */
[data-theme-version="dark"] .page-ctagreement .agreement-container,
body[data-theme-version="dark"] .page-ctagreement .agreement-container {
background: transparent;
}
[data-theme-version="dark"] .page-ctagreement .agreement-content,
body[data-theme-version="dark"] .page-ctagreement .agreement-content {
background: #1e293b;
border-color: #334155;
}
[data-theme-version="dark"] .page-ctagreement .agreement-header h1,
body[data-theme-version="dark"] .page-ctagreement .agreement-header h1 {
color: #a5b4fc;
}
[data-theme-version="dark"] .page-ctagreement .agreement-header .subtitle,
body[data-theme-version="dark"] .page-ctagreement .agreement-header .subtitle {
color: #94a3b8;
}
[data-theme-version="dark"] .page-ctagreement .agreement-header .last-updated,
body[data-theme-version="dark"] .page-ctagreement .agreement-header .last-updated {
color: #64748b;
}
[data-theme-version="dark"] .page-ctagreement .section-title,
body[data-theme-version="dark"] .page-ctagreement .section-title {
color: #f1f5f9;
border-color: #334155;
}
[data-theme-version="dark"] .page-ctagreement .section-content p,
[data-theme-version="dark"] .page-ctagreement .section-content li,
body[data-theme-version="dark"] .page-ctagreement .section-content p,
body[data-theme-version="dark"] .page-ctagreement .section-content li {
color: #94a3b8;
}
[data-theme-version="dark"] .page-ctagreement .section-content strong,
body[data-theme-version="dark"] .page-ctagreement .section-content strong {
color: #e2e8f0;
}
[data-theme-version="dark"] .page-ctagreement .warning-box.warning-yellow,
body[data-theme-version="dark"] .page-ctagreement .warning-box.warning-yellow,
html[data-theme-version="dark"] .page-ctagreement .warning-box.warning-yellow {
background: rgba(251, 191, 36, 0.15) !important;
border-color: rgba(251, 191, 36, 0.4) !important;
border: 1px solid rgba(251, 191, 36, 0.4) !important;
}
[data-theme-version="dark"] .page-ctagreement .warning-box.warning-yellow .warning-title,
body[data-theme-version="dark"] .page-ctagreement .warning-box.warning-yellow .warning-title,
html[data-theme-version="dark"] .page-ctagreement .warning-box.warning-yellow .warning-title {
color: #fbbf24 !important;
}
[data-theme-version="dark"] .page-ctagreement .warning-box.warning-yellow .warning-title i,
body[data-theme-version="dark"] .page-ctagreement .warning-box.warning-yellow .warning-title i,
html[data-theme-version="dark"] .page-ctagreement .warning-box.warning-yellow .warning-title i {
color: #fbbf24 !important;
}
[data-theme-version="dark"] .page-ctagreement .warning-box.warning-yellow p,
body[data-theme-version="dark"] .page-ctagreement .warning-box.warning-yellow p,
html[data-theme-version="dark"] .page-ctagreement .warning-box.warning-yellow p {
color: #e5e7eb !important;
}
[data-theme-version="dark"] .page-ctagreement .warning-box.warning-green,
body[data-theme-version="dark"] .page-ctagreement .warning-box.warning-green,
html[data-theme-version="dark"] .page-ctagreement .warning-box.warning-green {
background: rgba(34, 197, 94, 0.15) !important;
border-color: rgba(34, 197, 94, 0.4) !important;
border: 1px solid rgba(34, 197, 94, 0.4) !important;
}
[data-theme-version="dark"] .page-ctagreement .warning-box.warning-green .warning-title,
body[data-theme-version="dark"] .page-ctagreement .warning-box.warning-green .warning-title,
html[data-theme-version="dark"] .page-ctagreement .warning-box.warning-green .warning-title {
color: #22c55e !important;
}
[data-theme-version="dark"] .page-ctagreement .warning-box.warning-green .warning-title i,
body[data-theme-version="dark"] .page-ctagreement .warning-box.warning-green .warning-title i,
html[data-theme-version="dark"] .page-ctagreement .warning-box.warning-green .warning-title i {
color: #22c55e !important;
}
[data-theme-version="dark"] .page-ctagreement .warning-box.warning-green p,
body[data-theme-version="dark"] .page-ctagreement .warning-box.warning-green p,
html[data-theme-version="dark"] .page-ctagreement .warning-box.warning-green p {
color: #e5e7eb !important;
}
[data-theme-version="dark"] .page-ctagreement .dynamic-legal-content h1,
[data-theme-version="dark"] .page-ctagreement .dynamic-legal-content h2,
body[data-theme-version="dark"] .page-ctagreement .dynamic-legal-content h1,
body[data-theme-version="dark"] .page-ctagreement .dynamic-legal-content h2 {
color: #a5b4fc;
}
[data-theme-version="dark"] .page-ctagreement .dynamic-legal-content h3,
[data-theme-version="dark"] .page-ctagreement .dynamic-legal-content h4,
body[data-theme-version="dark"] .page-ctagreement .dynamic-legal-content h3,
body[data-theme-version="dark"] .page-ctagreement .dynamic-legal-content h4 {
color: #f1f5f9;
}
[data-theme-version="dark"] .page-ctagreement .dynamic-legal-content p,
[data-theme-version="dark"] .page-ctagreement .dynamic-legal-content li,
body[data-theme-version="dark"] .page-ctagreement .dynamic-legal-content p,
body[data-theme-version="dark"] .page-ctagreement .dynamic-legal-content li {
color: #94a3b8;
}
[data-theme-version="dark"] .page-ctagreement .dynamic-legal-content strong,
body[data-theme-version="dark"] .page-ctagreement .dynamic-legal-content strong {
color: #e2e8f0;
}