/**
 * 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.
 */



/* ==========================================
   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, #01A3FF 0%, #0284C7 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, #01A3FF 0%, #0284C7 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(1, 163, 255, 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(1, 163, 255, 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(1, 163, 255, 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 {
			min-height: 100%;
			overflow-x: hidden;
		}

	body.page-signin {
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
			background: linear-gradient(135deg, #01A3FF 0%, #0284c7 100%) fixed;
			min-height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 40px 20px;
			position: relative;
			overflow-x: hidden;
		}

		/* Animated Background Circles */
	body.page-signin::before {
			content: '';
			position: absolute;
			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;
		}

	body.page-signin::after {
			content: '';
			position: absolute;
			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;
		}

		@keyframes float {
	.page-signin 0%,
		.page-signin 100% {  transform: translateY(0px); }
	.page-signin 50% { transform: translateY(-20px); }
		}

	.page-signin .auth-container {
			position: relative;
			z-index: 1;
			width: 100%;
			max-width: 550px;
		}

	.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, #01A3FF 0%, #0284c7 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: #01A3FF;
			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: #01A3FF;
			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: #01A3FF;
		}

	.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: #01A3FF;
		}

	.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: #01A3FF;
		}

	.page-signin .checkbox-label {
			font-size: 14px;
			color: #6b7280;
			cursor: pointer;
		}

	.page-signin .forgot-password {
			font-size: 14px;
			color: #01A3FF;
			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, #01A3FF 0%, #0284c7 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: #01A3FF;
		}

	.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: 640px) {
			.auth-header,
	.page-signin .auth-body {
				padding-left: 24px;
				padding-right: 24px;
			}

	.page-signin .auth-title {
				font-size: 22px;
			}

	.page-signin .form-footer {
				flex-direction: column;
				gap: 12px;
				align-items: flex-start;
			}

		}
	

/* ==========================================
   signup.html - Body Class: .page-signup
   ========================================== */

	.page-signup * {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

	body.page-signup {
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
			background: linear-gradient(135deg, #01A3FF 0%, #0284c7 100%);
			min-height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 40px 20px;
			position: relative;
		}

	html.page-signup {
			overflow-x: hidden;
		}

		/* Animated Background Circles */
	body.page-signup::before {
			content: '';
			position: absolute;
			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;
		}

	body.page-signup::after {
			content: '';
			position: absolute;
			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;
		}

		@keyframes float {
	.page-signup 0%,
		.page-signup 100% {  transform: translateY(0px); }
	.page-signup 50% { transform: translateY(-20px); }
		}

	.page-signup .auth-container {
			position: relative;
			z-index: 1;
			width: 100%;
			max-width: 550px;
		}

	.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, #01A3FF 0%, #0284c7 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: #01A3FF;
			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: #01A3FF;
			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: #01A3FF;
		}

	.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: #01A3FF;
		}

	.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: #01A3FF;
		}

	.page-signup .checkbox-label {
			font-size: 14px;
			color: #6b7280;
			line-height: 1.5;
		}

	.page-signup .checkbox-label a {
			color: #01A3FF;
			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, #01A3FF 0%, #0284c7 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: #01A3FF;
		}

	.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: 640px) {
			.auth-header,
	.page-signup .auth-body {
				padding-left: 24px;
				padding-right: 24px;
			}

	.page-signup .auth-title {
				font-size: 22px;
			}

	.page-signup .form-row {
				grid-template-columns: 1fr;
			}

		}
	

/* ==========================================
   signup-step2.html - Body Class: .page-signupstep2
   ========================================== */

	.page-signupstep2 * {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

	html.page-signupstep2 {
			min-height: 100%;
		}

	body.page-signupstep2 {
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
			background: linear-gradient(135deg, #01A3FF 0%, #0284c7 100%) fixed;
			min-height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 40px 20px;
			position: relative;
		}

	body.page-signupstep2::before {
			content: '';
			position: absolute;
			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;
		}

	body.page-signupstep2::after {
			content: '';
			position: absolute;
			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;
		}

		@keyframes float {
	.page-signupstep2 0%,
		.page-signupstep2 100% {  transform: translateY(0px); }
	.page-signupstep2 50% { transform: translateY(-20px); }
		}

	.page-signupstep2 .auth-container {
			position: relative;
			z-index: 1;
			width: 100%;
			max-width: 600px;
		}

	.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, #01A3FF 0%, #0284c7 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, #01A3FF 0%, #0284c7 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: #01A3FF;
			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: #01A3FF;
			box-shadow: 0 0 0 4px rgba(1, 163, 255, 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: #01A3FF;
			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: #01A3FF;
			border: 2px solid #01A3FF;
			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, #01A3FF 0%, #0284c7 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: 640px) {
			.auth-header,
	.page-signupstep2 .auth-body {
				padding-left: 24px;
				padding-right: 24px;
			}

	.page-signupstep2 .auth-title {
				font-size: 22px;
			}
		}
	

/* ==========================================
   signup-step3.html - Body Class: .page-signupstep3
   ========================================== */

	.page-signupstep3 * {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

	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, #01A3FF 0%, #0284c7 100%) fixed;
			min-height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 40px 20px;
			position: relative;
		}

	body.page-signupstep3::before {
			content: '';
			position: absolute;
			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;
		}

	body.page-signupstep3::after {
			content: '';
			position: absolute;
			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;
		}

		@keyframes float {
	.page-signupstep3 0%,
		.page-signupstep3 100% {  transform: translateY(0px); }
	.page-signupstep3 50% { transform: translateY(-20px); }
		}

	.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, #01A3FF 0%, #0284c7 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, #01A3FF 0%, #0284c7 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: #01A3FF;
			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: #01A3FF;
			box-shadow: 0 0 0 4px rgba(1, 163, 255, 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: #01A3FF;
			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: #01A3FF;
		}

	.page-signupstep3 .risk-label i {
			font-size: 28px;
			margin-bottom: 8px;
			color: #01A3FF;
		}

	.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: #01A3FF;
			border: 2px solid #01A3FF;
			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, #01A3FF 0%, #0284c7 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) {
			.auth-header,
	.page-signupstep3 .auth-body {
				padding-left: 24px;
				padding-right: 24px;
			}

	.page-signupstep3 .auth-title {
				font-size: 22px;
			}

			.form-row,
	.page-signupstep3 .risk-options {
				grid-template-columns: 1fr;
			}
		}
	

/* ==========================================
   forgot-password.html - Body Class: .page-forgotpwd
   ========================================== */

	.page-forgotpwd * {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

	html.page-forgotpwd {
			min-height: 100%;
			overflow-x: hidden;
		}

	body.page-forgotpwd {
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
			background: linear-gradient(135deg, #01A3FF 0%, #0284c7 100%) fixed;
			min-height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 40px 20px;
			position: relative;
			overflow-x: hidden;
		}

		/* Animated Background Circles */
	body.page-forgotpwd::before {
			content: '';
			position: absolute;
			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;
		}

	body.page-forgotpwd::after {
			content: '';
			position: absolute;
			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;
		}

		@keyframes float {
	.page-forgotpwd 0%,
		.page-forgotpwd 100% {  transform: translateY(0px); }
	.page-forgotpwd 50% { transform: translateY(-20px); }
		}

	.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, #01A3FF 0%, #0284c7 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, #01A3FF 0%, #0284c7 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: #01A3FF;
			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: #01A3FF;
			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: #01A3FF;
		}

	.page-forgotpwd .btn-submit {
			width: 100%;
			height: 50px;
			background: linear-gradient(135deg, #01A3FF 0%, #0284c7 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: #01A3FF;
			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) {
			.auth-header,
	.page-forgotpwd .auth-body {
				padding-left: 24px;
				padding-right: 24px;
			}

	.page-forgotpwd .auth-title {
				font-size: 22px;
			}
		}
	

/* ==========================================
   email-verification.html - Body Class: .page-emailverify
   ========================================== */

	.page-emailverify * {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

	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, #01A3FF 0%, #0284C7 100%) fixed;
			min-height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 40px 20px;
			position: relative;
		}

	body.page-emailverify::before {
			content: '';
			position: absolute;
			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;
		}

	body.page-emailverify::after {
			content: '';
			position: absolute;
			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;
		}

		@keyframes float {
	.page-emailverify 0%,
		.page-emailverify 100% {  transform: translateY(0px); }
	.page-emailverify 50% { transform: translateY(-20px); }
		}

	.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, #01A3FF 0%, #0284C7 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, #01A3FF 0%, #0284C7 100%);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto 24px;
			animation: scaleIn 0.5s ease-out;
		}

		@keyframes scaleIn {
	.page-emailverify 0% { transform: scale(0); }
	.page-emailverify 50% { transform: scale(1.1); }
	.page-emailverify 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: #01A3FF;
			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: #01A3FF;
			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: #01A3FF;
			font-weight: bold;
		}

	.page-emailverify .btn-container {
			text-align: center;
		}

	.page-emailverify .btn-primary {
			width: 100%;
			height: 50px;
			background: linear-gradient(135deg, #01A3FF 0%, #0284C7 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(1, 163, 255, 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: #01A3FF;
			font-weight: 600;
			cursor: pointer;
			text-decoration: underline;
		}

	.page-emailverify .resend-link button:hover {
			color: #0284c7;
		}

		@media (max-width: 640px) {
			.auth-header,
	.page-emailverify .auth-body {
				padding-left: 24px;
				padding-right: 24px;
			}

	.page-emailverify .auth-title {
				font-size: 22px;
			}
		}
	

/* ==========================================
   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 #0284c7;
		}

	.page-dashboard .info-banner .alert-banner-icon {
			background: rgba(2, 132, 199, 0.15);
		}

	.page-dashboard .info-banner .alert-banner-icon i {
			color: #0284c7;
			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(1, 163, 255, 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 slideDown {
	.page-dashboard from {
				opacity: 0;
				transform: translateY(-20px);
			}
	.page-dashboard to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		@keyframes fadeOut {
	.page-dashboard from {
				opacity: 1;
			}
	.page-dashboard 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;
								z-index: 1 !important;
							}

	.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: #01A3FF;
								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: #01A3FF;
								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 {
	.page-dashboard 0%,
		.page-dashboard 100% {
									opacity: 0.6;
								}
	.page-dashboard 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, #01A3FF 0%, #0284c7 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: #01A3FF;
								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;
								z-index: 1 !important;
							}

	.page-dashboard .swiper-pagination-bullet {
								width: 8px;
								height: 8px;
								background: #d1d5db;
								opacity: 1;
								margin: 0 4px;
							}

	.page-dashboard .swiper-pagination-bullet-active {
								background: #01A3FF;
								width: 24px;
								border-radius: 4px;
							}

							/* Copy Traders Button */
	.page-dashboard .copy-traders-btn {
								background: linear-gradient(135deg, #01A3FF 0%, #0284c7 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: #01A3FF;
								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: pulse 2s infinite;
							}

							@keyframes pulse {
	.page-dashboard 0%,
		.page-dashboard 100% {  opacity: 1; }
	.page-dashboard 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: #01A3FF;
								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: #0284c7;
							}

	.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: #01A3FF;
								background: rgba(102, 126, 234, 0.08);
							}

	.page-dashboard .trade-tabs .nav-link.active {
			background: var(--card);
								color: #01A3FF;
								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: #01A3FF;
								background: rgba(102, 126, 234, 0.1);
							}

	.page-dashboard [data-theme-version="dark"] .trade-tabs .nav-link.active {
								background: #252e48;
								color: #01A3FF;
								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: #01A3FF;
								border-color: #01A3FF;
								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: #01A3FF;
								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: #01A3FF;
								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(1, 163, 255, 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 slideDown {
	.page-dashboard from {
									opacity: 0;
									transform: translateX(-50%) translateY(-20px);
								}
	.page-dashboard to {
									opacity: 1;
									transform: translateX(-50%) translateY(0);
								}
							}

							@keyframes fadeOut {
	.page-dashboard from {
									opacity: 1;
								}
	.page-dashboard 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: #01A3FF;
							}

	.page-dashboard .date-range-btn.active {
			background: var(--card);
								color: #01A3FF;
								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, #01A3FF 0%, #0284c7 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(1, 163, 255, 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(1, 163, 255, 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, #01A3FF 0%, #0284c7 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(1, 163, 255, 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(1, 163, 255, 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: modalFadeIn 0.3s ease;
		}

		@keyframes modalFadeIn {
	.page-settings from {
				opacity: 0;
				transform: translateY(-30px);
			}
	.page-settings 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(1, 163, 255, 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(1, 163, 255, 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(1, 163, 255, 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, #01A3FF 0%, #0284c7 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(1, 163, 255, 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(1, 163, 255, 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, #01A3FF 0%, #0284c7 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(1, 163, 255, 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(1, 163, 255, 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(1, 163, 255, 0.15);
		}

	.page-referrals .step-number {
			width: 70px;
			height: 70px;
			background: linear-gradient(135deg, #01A3FF 0%, #0284c7 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, #01A3FF 0%, #0284c7 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, #01A3FF 0%, #0284c7 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, #01A3FF 0%, #0284c7 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,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%236c757d" d="M6 8L0 0h12z"/></svg>') 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, #01A3FF 0%, #0284c7 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, #01A3FF 0%, #0284c7 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, #01A3FF 0%, #0284c7 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-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, #01A3FF 0%, #0284c7 100%);
			border-color: #01A3FF;
			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, #01A3FF 0%, #0284c7 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: pulse 15s ease-in-out infinite;
		}

		@keyframes pulse {
	.page-becometrader 0%,
		.page-becometrader 100% {  transform: scale(1); opacity: 0.5; }
	.page-becometrader 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, #01A3FF 0%, #0284c7 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: #01A3FF;
			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: #01A3FF;
		}

	.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: #01A3FF;
			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: #01A3FF;
			background: #f5f7ff;
		}

	.page-becometrader .file-upload-area i {
			font-size: 48px;
			color: #01A3FF;
			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: #01A3FF;
			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, #01A3FF 0%, #0284c7 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: scaleIn 0.5s ease;
		}

		@keyframes scaleIn {
	.page-becometrader 0% { transform: scale(0); }
	.page-becometrader 50% { transform: scale(1.1); }
	.page-becometrader 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, #01A3FF 0%, #0284c7 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: #01A3FF;
			--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, #01A3FF 0%, #0284c7 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, #01A3FF 0%, #0284c7 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, #01A3FF 0%, #0284c7 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: #01A3FF;
			--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, #01A3FF 0%, #0284c7 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 {
			background: #fef2f2;
			border-left: 4px solid #ef4444;
			padding: 20px 25px;
			border-radius: 8px;
			margin: 25px 0;
		}

	.page-ctagreement .warning-box .warning-title {
			font-size: 17px;
			font-weight: 700;
			color: #991b1b;
			margin-bottom: 12px;
			display: flex;
			align-items: center;
			gap: 10px;
		}

	.page-ctagreement .warning-box .warning-title i {
			font-size: 24px;
		}

	.page-ctagreement .warning-box p {
			color: #7f1d1d;
			margin: 0;
			line-height: 1.7;
		}

	.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(1, 163, 255, 0.3);
		}

	.page-ctagreement .btn-primary:hover {
			background: var(--primary-hover);
			transform: translateY(-2px);
			box-shadow: 0 6px 20px rgba(1, 163, 255, 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(1, 163, 255, 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,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%236c757d" d="M6 8L0 0h12z"/></svg>') 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, #01A3FF 0%, #0284c7 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, #01A3FF 0%, #0284c7 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: #01A3FF;
			--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, #01A3FF 0%, #0284c7 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: successPulse 1s ease-out;
		}

	.page-depositsuccess .status-icon {
			font-size: 64px;
			color: #10b981;
		}

		@keyframes successPulse {
	.page-depositsuccess 0% {
				transform: scale(0.8);
				opacity: 0;
			}
	.page-depositsuccess 50% {
				transform: scale(1.1);
			}
	.page-depositsuccess 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: successPulse 1s ease-out;
		}

	.page-depositsuccessgw .status-icon {
			font-size: 64px;
			color: #10b981;
		}

		@keyframes successPulse {
	.page-depositsuccessgw 0% {
				transform: scale(0.8);
				opacity: 0;
			}
	.page-depositsuccessgw 50% {
				transform: scale(1.1);
			}
	.page-depositsuccessgw 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: pulse 2s ease-in-out infinite;
		}

	.page-depositpending .status-icon {
			font-size: 64px;
			color: #f59e0b;
		}

		@keyframes pulse {
	.page-depositpending 0%,
		.page-depositpending 100% {
				transform: scale(1);
				box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
			}
	.page-depositpending 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: spin 2s linear infinite;
		}

		@keyframes spin {
	.page-depositpending from { transform: rotate(0deg); }
	.page-depositpending 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: #0284c7;
			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;
			}
		}
	

/* ==========================================
   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: pulse 2s ease-in-out infinite;
		}

	.page-depositpendinggw .status-icon {
			font-size: 64px;
			color: #f59e0b;
		}

		@keyframes pulse {
	.page-depositpendinggw 0%,
		.page-depositpendinggw 100% {
				transform: scale(1);
				box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
			}
	.page-depositpendinggw 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: spin 2s linear infinite;
		}

		@keyframes spin {
	.page-depositpendinggw from { transform: rotate(0deg); }
	.page-depositpendinggw 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: #0284c7;
			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 {
			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;
		}

	.page-planning .plan-button:hover {
			background: var(--primary-hover);
			transform: translateY(-2px);
			box-shadow: 0 4px 12px rgba(1, 163, 255, 0.3);
		}

		/* 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,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%236c757d" d="M6 8L0 0h12z"/></svg>') 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(1, 163, 255, 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(1, 163, 255, 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, #01A3FF 0%, #0284c7 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,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%236c757d" d="M6 8L0 0h12z"/></svg>') 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, #01A3FF 0%, #0284c7 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, #01A3FF 0%, #0284c7 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(1, 163, 255, 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(1, 163, 255, 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(1, 163, 255, 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, #01A3FF 0%, #0284c7 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(1, 163, 255, 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(1, 163, 255, 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(1, 163, 255, 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(1, 163, 255, 0.15);
		}

	.page-addressverify .example-icon {
			width: 50px;
			height: 50px;
			background: linear-gradient(135deg, #01A3FF 0%, #0284c7 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,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%236c757d" d="M6 8L0 0h12z"/></svg>') 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: #01A3FF;
			--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);
		}

		/* 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, #01A3FF 0%, #0284c7 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: #01A3FF;
			--primary-dark: #0284c7;
			--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: #01A3FF;
	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: #01A3FF;
	box-shadow: 0 4px 12px rgba(1, 163, 255, 0.15);
	transform: translateY(-2px);
}

.payment-method-card.active {
	border-color: #01A3FF;
	background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
}

.payment-method-card .material-icons {
	font-size: 32px;
	color: #01A3FF;
}

.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: #01A3FF;
}

.trade-tab.active {
	color: #01A3FF;
	border-bottom-color: #01A3FF;
}

.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;
}

[data-theme-version="dark"] .page-deposithistory .deposits-table td,
[data-theme-version="dark"] .page-deposithistory .deposits-table th,
[data-theme-version="dark"] .page-withdrawalhistory .withdrawals-table td,
[data-theme-version="dark"] .page-withdrawalhistory .withdrawals-table th,
[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: var(--text-dark) !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;
}

/* ============================================================================
   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);
	}
}

/* ==========================================
   Global Back Button Styles
   ========================================== */

.back-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(1, 163, 255, 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(1, 163, 255, 0.2);
    transform: translateY(-1px);
}

.back-btn:active {
    transform: translateY(0);
}

.back-btn i {
    font-size: 20px;
    color: #01A3FF;
}

.back-btn:hover i {
    color: #0284C7;
}

/* 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 */
.breadcrumb-short {
    display: none;
}

.breadcrumb-full {
    display: inline;
}

/* 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;
    }

    .breadcrumb-full {
        display: none;
    }

    /* Smaller back button on mobile */
    .back-btn {
        width: 32px;
        height: 32px;
    }

    .back-btn i {
        font-size: 18px;
    }
}

/* ============================================
   TAWK.TO LIVE CHAT WIDGET - Always Visible
   ============================================ */
/* Ensure Tawk widget stays above all other elements */
#tawk-bubble-container,
.tawk-min-container,
.tawk-max-container,
iframe[title*="chat"],
iframe[src*="tawk"],
div[class*="tawk"],
#tawkchat-container,
#tawkchat-minified-wrapper,
#tawkchat-maximized-wrapper {
    z-index: 2147483646 !important; /* Just below max, but above everything else */
}

/* On mobile, adjust position to avoid bottom nav overlap */
@media (max-width: 991px) {
    #tawk-bubble-container,
    .tawk-min-container,
    iframe[title*="chat widget"],
    div[class*="tawk-min"] {
        bottom: 80px !important; /* Above the 64px mobile bottom nav + some padding */
    }
}

/* ============================================
   LANGUAGE SELECTOR DROPDOWN
   ============================================ */
/* Language dropdown styles for the header */
.language-dropdown {
    width: 200px;
    max-height: 400px;
    overflow-y: auto;
    padding: 0 !important;
    border-radius: 12px !important;
}

.lang-dropdown-header {
    padding: 12px 15px;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 12px 12px 0 0;
}

.lang-option {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 15px !important;
    transition: all 0.2s ease;
}

.lang-option:hover {
    background: rgba(1, 163, 255, 0.1);
}

.lang-option.active {
    background: rgba(1, 163, 255, 0.15) !important;
    color: #01A3FF !important;
    font-weight: 600;
}

.lang-option.active::before {
    content: '✓';
    margin-right: 5px;
    color: #01A3FF;
    font-weight: bold;
}

.lang-flag {
    font-size: 18px;
    line-height: 1;
}

/* Dark mode support for language dropdown */
[data-theme="dark"] .lang-dropdown-header {
    background: #1f2937;
    border-color: #374151;
    color: #9ca3af;
}

[data-theme="dark"] .lang-option:hover {
    background: rgba(1, 163, 255, 0.2);
}