/* =============================================
   Crypto Pay Portal – Public Styles
   ============================================= */

:root {
	--cpp-primary:       #7c3aed;
	--cpp-primary-dark:  #5b21b6;
	--cpp-primary-light: #ede9fe;
	--cpp-accent:        #06b6d4;
	--cpp-success:       #10b981;
	--cpp-warning:       #f59e0b;
	--cpp-danger:        #ef4444;
	--cpp-bg:            #f8fafc;
	--cpp-card-bg:       #ffffff;
	--cpp-border:        #e2e8f0;
	--cpp-text:          #1e293b;
	--cpp-text-muted:    #64748b;
	--cpp-radius:        14px;
	--cpp-radius-sm:     8px;
	--cpp-shadow:        0 4px 24px rgba(0,0,0,.08);
	--cpp-shadow-lg:     0 8px 40px rgba(124,58,237,.15);
	--cpp-font:          "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Page-level H1 overrides ────────────────── */
.cpp-page-login h1.entry-title,
.cpp-page-register h1.entry-title,
.cpp-page-dashboard h1.entry-title {
	padding-top: 50px;
}
.cpp-page-login h1.entry-title,
.cpp-page-register h1.entry-title {
	text-align: center;
}

/* Reset */
.cpp-wrap *, .cpp-wrap *::before, .cpp-wrap *::after {
	box-sizing: border-box;
}
.cpp-wrap {
	font-family: var(--cpp-font);
	color: var(--cpp-text);
	line-height: 1.6;
}

/* ── Auth Pages ─────────────────────────────── */
.cpp-auth-wrap {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 16px;
	background: none;
}

.cpp-card {
	background: var(--cpp-card-bg);
	border-radius: var(--cpp-radius);
	box-shadow: var(--cpp-shadow-lg);
	width: 100%;
	max-width: 420px;
	overflow: hidden;
}
.cpp-card-wide { max-width: 560px; }

/* Dark glassmorphism auth card */
.cpp-auth-card {
	background: rgba(18, 18, 22, 0.88);
	backdrop-filter: blur(32px);
	-webkit-backdrop-filter: blur(32px);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 24px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
	position: relative;
	overflow: hidden;
}

/* Teal glow orb top-left */
.cpp-auth-glow {
	position: absolute;
	top: -80px;
	left: -80px;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(0, 210, 160, 0.28) 0%, rgba(0, 180, 216, 0.10) 50%, transparent 70%);
	pointer-events: none;
	z-index: 0;
}

.cpp-auth-card .cpp-card-body {
	position: relative;
	z-index: 1;
	padding: 44px 40px 40px;
}

/* Auth logo */
.cpp-auth-logo {
	text-align: center;
	margin-bottom: 24px;
}
.cpp-auth-logo img {
	max-width: 200px;
	width: 100%;
	height: auto;
	display: inline-block;
}

/* Auth headings */
.cpp-auth-title {
	font-size: 34px;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 8px;
	line-height: 1.2;
	letter-spacing: -0.5px;
}
.cpp-auth-title span {
	color: rgba(255, 255, 255, 0.38);
	font-weight: 400;
}
.cpp-auth-subtitle {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.4);
	margin: 0 0 32px;
}

/* Auth card labels */
.cpp-auth-card .cpp-form-group label {
	color: rgba(255, 255, 255, 0.45);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Auth card inputs */
.cpp-auth-card .cpp-input {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 100px;
	color: #ffffff;
	padding: 14px 16px;
	font-size: 15px;
	transition: border-color .2s, box-shadow .2s, background .2s;
}
.cpp-auth-card .cpp-input::placeholder {
	color: rgba(255, 255, 255, 0.22);
}
.cpp-auth-card .cpp-input:focus {
	border-color: rgba(0, 210, 160, 0.55);
	box-shadow: 0 0 0 3px rgba(0, 210, 160, 0.12);
	background: rgba(255, 255, 255, 0.09);
}
.cpp-auth-card select.cpp-input option {
	background: #1a1a22;
	color: #fff;
}

/* Auth card password toggle */
.cpp-auth-card .cpp-toggle-password {
	color: rgba(255, 255, 255, 0.35);
	opacity: 1;
}
.cpp-auth-card .cpp-toggle-password:hover {
	color: rgba(255, 255, 255, 0.8);
}

/* Auth card primary button */
.cpp-auth-card .cpp-btn-primary {
	background: linear-gradient(90deg, var(--e-global-color-accent) 0%, var(--e-global-color-678ac47) 100%);
	color: #ffffff;
	font-weight: 700;
	border-radius: 50px;
	padding: 16px 24px;
	font-size: 15px;
	letter-spacing: 0.02em;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255,255,255,0.08) inset;
	margin-top: 8px;
	transition: all .25s;
}
.cpp-auth-card .cpp-btn-primary:hover {
	background: linear-gradient(90deg, var(--e-global-color-accent) 0%, var(--e-global-color-678ac47) 100%);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255,255,255,0.1) inset;
	transform: translateY(-1px);
	color: #ffffff;
}
.cpp-auth-card .cpp-btn-primary:disabled {
	opacity: 0.65;
	transform: none;
}

/* Auth switch link */
.cpp-auth-card .cpp-auth-switch {
	color: rgba(255, 255, 255, 0.3);
	margin-top: 24px;
}
.cpp-auth-card .cpp-auth-switch a {
	color: white;
	font-weight: 600;
}
.cpp-auth-card .cpp-auth-switch a:hover {
	color: #00d4b0;
	text-decoration: underline;
}
.cpp-forgot-link-wrap {
	text-align: right;
	margin: -4px 0 14px;
}
.cpp-auth-card .cpp-forgot-link {
	font-size: 13px;
	color: rgba(255,255,255,0.55);
	text-decoration: none;
	transition: color .2s;
}
.cpp-auth-card .cpp-forgot-link:hover {
	color: #00d4b0;
	text-decoration: underline;
}

/* Messages in dark card */
.cpp-auth-card .cpp-message-error {
	background: rgba(239, 68, 68, 0.12);
	color: #f87171;
	border: 1px solid rgba(239, 68, 68, 0.25);
}
.cpp-auth-card .cpp-message-success {
	background: rgba(0, 201, 167, 0.12);
	color: #34d399;
	border: 1px solid rgba(0, 201, 167, 0.25);
}

/* Legacy header (hidden on auth cards) */
.cpp-auth-card .cpp-card-header { display: none; }

.cpp-card-header {
	background: linear-gradient(135deg, var(--cpp-primary), #4f46e5);
	padding: 32px 32px 24px;
	text-align: center;
	color: #fff;
}
.cpp-logo-icon {
	font-size: 36px;
	margin-bottom: 8px;
}
.cpp-card-header h2 {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 700;
}
.cpp-card-header p {
	margin: 0;
	opacity: .8;
	font-size: 14px;
}
.cpp-card-body {
	padding: 32px;
}

/* ── Form Elements ──────────────────────────── */
.cpp-form-group {
	margin-bottom: 18px;
}
.cpp-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media (max-width: 480px) {
	.cpp-form-row { grid-template-columns: 1fr; }
}
.cpp-form-group label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--cpp-text);
	margin-bottom: 6px;
}
.cpp-input {
	width: 100%;
	padding: 11px 14px;
	border: 2px solid var(--cpp-border);
	border-radius: var(--cpp-radius-sm);
	font-size: 14px;
	font-family: var(--cpp-font);
	color: var(--cpp-text);
	background: #fff;
	transition: border-color .2s, box-shadow .2s;
	outline: none;
}
.cpp-input:focus {
	border-color: var(--cpp-primary);
	box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
select.cpp-input {
	cursor: pointer;
}
textarea.cpp-input {
	resize: vertical;
	min-height: 80px;
	border-radius: 20px !important;
}
.cpp-input-group {
	position: relative;
}
.cpp-input-group .cpp-input {
	padding-right: 44px;
}
.cpp-toggle-password {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	outline: none;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	font-size: 16px;
	padding: 0;
	opacity: .6;
}
.cpp-toggle-password:hover { opacity: 1; }

/* ── Buttons ────────────────────────────────── */
.cpp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: var(--cpp-radius-sm);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	transition: all .2s;
	text-decoration: none;
}
.cpp-btn-primary {
	background: linear-gradient(135deg, var(--cpp-primary), #4f46e5);
	color: #fff;
	box-shadow: 0 4px 12px rgba(124,58,237,.3);
}
.cpp-btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(124,58,237,.4);
	color: #fff;
}
.cpp-btn-outline {
	background: transparent;
	border: 2px solid var(--cpp-border);
	color: var(--cpp-text);
}
.cpp-btn-outline:hover {
	border-color: var(--cpp-primary);
	color: var(--cpp-primary);
}
.cpp-btn-full { width: 100%; }
.cpp-btn-sm { padding: 8px 16px; font-size: 13px; }

.cpp-btn-loader {
	display: inline-block;
	animation: cpp-spin 1s linear infinite;
}
@keyframes cpp-spin { to { transform: rotate(360deg); } }

/* ── Messages ───────────────────────────────── */
.cpp-message {
	padding: 12px 16px;
	border-radius: var(--cpp-radius-sm);
	font-size: 14px;
	margin-bottom: 16px;
}
.cpp-message-success {
	background: #d1fae5;
	color: #065f46;
	border: 1px solid #6ee7b7;
}
.cpp-message-error {
	background: #fee2e2;
	color: #991b1b;
	border: 1px solid #fca5a5;
}
.cpp-notice {
	padding: 12px 16px;
	border-radius: var(--cpp-radius-sm);
	font-size: 14px;
}
.cpp-notice-warning {
	background: #fef3c7;
	color: #92400e;
	border: 1px solid #fcd34d;
}

.cpp-auth-switch {
	text-align: center;
	font-size: 13px;
	color: var(--cpp-text-muted);
	margin-top: 20px;
	margin-bottom: 0;
}
.cpp-auth-switch a {
	color: var(--cpp-primary);
	font-weight: 600;
	text-decoration: none;
}
.cpp-auth-switch a:hover { text-decoration: underline; }

/* ── Dashboard / My Account Layout (Dark) ───── */
.cpp-page-dashboard {
	background: #0a0a0b;
}
.cpp-dashboard-wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: 32px 16px 80px;
}

.cpp-myaccount-layout {
	display: grid;
	grid-template-columns: 230px 1fr;
	gap: 0;
	align-items: start;
	border-radius: 24px;
	overflow: hidden;
	background: rgba(18, 18, 22, 0.85);
	backdrop-filter: blur(32px);
	-webkit-backdrop-filter: blur(32px);
	border: 1px solid rgba(255, 255, 255, 0.07);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
	position: relative;
}

/* Teal glow orb on dashboard card */
.cpp-myaccount-layout::before {
	content: '';
	position: absolute;
	top: -80px;
	left: -80px;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, rgba(0, 210, 160, 0.22) 0%, rgba(0, 180, 216, 0.08) 50%, transparent 70%);
	pointer-events: none;
	z-index: 0;
}

/* Sidebar — Profile Banner */
.cpp-nav-profile {
	display: flex;
	justify-content: center;
	padding: 20px 20px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.cpp-avatar-img {
	width: 80px !important;
	height: 80px !important;
	border-radius: 50% !important;
	border: 3px solid rgba(0, 210, 160, 0.5);
	display: block;
	object-fit: cover;
}

/* Sidebar avatar — clickable upload trigger */
.cpp-nav-avatar-label {
	display: block;
	position: relative;
	cursor: pointer;
	border-radius: 50%;
}
.cpp-nav-avatar-label .cpp-nav-avatar-overlay {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .2s;
	color: #fff;
}
.cpp-nav-avatar-label:hover .cpp-nav-avatar-overlay {
	opacity: 1;
}

/* Sidebar Nav */
.cpp-myaccount-nav {
	border-right: 1px solid rgba(255, 255, 255, 0.07);
	min-height: 520px;
	position: relative;
	z-index: 1;
}
.cpp-myaccount-nav ul {
	list-style: none;
	margin: 0;
	padding: 12px 0;
}
.cpp-myaccount-nav ul li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 22px;
	font-size: 14px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
	border-left: 3px solid transparent;
	transition: background .15s, color .15s, border-color .15s;
}
.cpp-myaccount-nav ul li a svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.cpp-myaccount-nav ul li a:hover {
	background: rgba(255, 255, 255, 0.05);
	color: #ffffff;
}
.cpp-myaccount-nav ul li.is-active a {
	background: rgba(0, 210, 160, 0.1);
	color: #00d2a0;
	font-weight: 600;
	border-left-color: #00d2a0;
}
.cpp-myaccount-nav ul li:last-child a {
	color: rgba(239, 68, 68, 0.7);
	margin-top: 8px;
}
.cpp-myaccount-nav ul li:last-child a:hover {
	background: rgba(239, 68, 68, 0.08);
	color: #f87171;
}

/* Content Area */
.cpp-myaccount-content {
	padding: 36px 40px;
	position: relative;
	z-index: 1;
}
.cpp-myaccount-heading {
	font-size: 22px;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 8px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cpp-myaccount-intro {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.4);
	margin: 14px 0 28px;
	line-height: 1.7;
}

/* Form labels inside dashboard */
.cpp-myaccount-content .cpp-form-group label {
	color: rgba(255, 255, 255, 0.5);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Inputs inside dashboard */
.cpp-myaccount-content .cpp-input {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 100px;
	color: #ffffff;
	font-size: 14px;
}
.cpp-myaccount-content .cpp-input::placeholder { color: rgba(255,255,255,.22); }
.cpp-myaccount-content .cpp-input:focus {
	border-color: rgba(0, 210, 160, 0.5);
	box-shadow: 0 0 0 3px rgba(0, 210, 160, 0.1);
	background: rgba(255, 255, 255, 0.09);
}
.cpp-myaccount-content select.cpp-input option { background: #1a1a22; color: #fff; }

/* Submit button in dashboard */
.cpp-myaccount-content .cpp-btn-primary {
	background: linear-gradient(90deg, var(--e-global-color-accent) 0%, var(--e-global-color-678ac47) 100%);
	color: #fff;
	font-weight: 700;
	border-radius: 50px;
	padding: 14px 32px;
}
.cpp-myaccount-content .cpp-btn-primary:hover {
	opacity: .9;
	transform: translateY(-1px);
	color: #fff;
}
.cpp-myaccount-content .cpp-btn-outline {
	border-color: rgba(255,255,255,.2);
	color: rgba(255,255,255,.7);
}
.cpp-myaccount-content .cpp-btn-outline:hover {
	border-color: #00d2a0;
	color: #00d2a0;
}

/* Stats Grid */
.cpp-stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin-top: 20px;
}
.cpp-stat-card {
	background: rgba(255, 255, 255, 0.05);
	border-radius: var(--cpp-radius);
	padding: 20px;
	display: flex;
	align-items: center;
	gap: 14px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: background .2s;
}
.cpp-stat-card:hover { background: rgba(255,255,255,0.08); }
.cpp-stat-icon {
	font-size: 24px;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.cpp-stat-total    { background: rgba(124, 58, 237, 0.2); }
.cpp-stat-approved { background: rgba(16, 185, 129, 0.2); }
.cpp-stat-pending  { background: rgba(245, 158, 11, 0.2); }
.cpp-stat-rejected { background: rgba(239, 68, 68, 0.2); }
.cpp-stat-info { display: flex; flex-direction: column; }
.cpp-stat-number {
	font-size: 28px;
	font-weight: 800;
	line-height: 1;
	color: #ffffff;
}
.cpp-stat-label {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.4);
	margin-top: 4px;
}

/* Table inside dashboard */
.cpp-myaccount-content .cpp-table {
	color: rgba(255,255,255,.8);
}
.cpp-myaccount-content .cpp-table th {
	background: rgba(255,255,255,.05);
	color: rgba(255,255,255,.4);
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.cpp-myaccount-content .cpp-table td {
	border-bottom: 1px solid rgba(255,255,255,.05);
}
.cpp-myaccount-content .cpp-table tr:hover td {
	background: rgba(255,255,255,.03);
}

/* Profile rows */
.cpp-myaccount-content .cpp-profile-row {
	border-bottom: 1px solid rgba(255,255,255,.07);
}
.cpp-myaccount-content .cpp-profile-label {
	color: rgba(255,255,255,.4);
}
.cpp-myaccount-content .cpp-profile-row span {
	color: rgba(255,255,255,.85);
}

/* Upload area */
.cpp-myaccount-content .cpp-upload-area {
	border-color: rgba(255,255,255,.15);
	background: rgba(255,255,255,.03);
}
.cpp-myaccount-content .cpp-upload-area:hover {
	border-color: #00d2a0;
	background: rgba(0,210,160,.06);
}
.cpp-myaccount-content .cpp-upload-placeholder span,
.cpp-myaccount-content .cpp-upload-placeholder small {
	color: rgba(255,255,255,.35);
}

/* Messages */
.cpp-myaccount-content .cpp-message-error {
	background: rgba(239,68,68,.12);
	color: #f87171;
	border: 1px solid rgba(239,68,68,.25);
}
.cpp-myaccount-content .cpp-message-success {
	background: rgba(0,210,160,.12);
	color: #34d399;
	border: 1px solid rgba(0,210,160,.25);
}

/* Responsive */
@media (max-width: 680px) {
	.cpp-myaccount-layout {
		grid-template-columns: 1fr;
		overflow: clip; /* clip rounded corners without forming a scroll container */
	}
	.cpp-myaccount-nav {
		border-right: none;
		border-bottom: 1px solid rgba(255,255,255,.07);
		min-height: auto;
	}
	.cpp-myaccount-nav ul li a { padding: 11px 16px; font-size: 13px; }
	.cpp-myaccount-content { padding: 24px 20px; overflow-x: auto; }
	.cpp-stats-grid { grid-template-columns: 1fr 1fr; }

	/* Sidebar avatar — smaller on mobile */
	.cpp-avatar-img {
		width: 60px !important;
		height: 60px !important;
	}
	.cpp-nav-profile {
		padding: 14px 16px 12px;
	}
}

/* Upload Area */
/* ── Prefixed input ($) ───────────────────────────── */
.cpp-input-prefix-wrap {
	position: relative;
	display: flex;
	align-items: center;
}
.cpp-input-prefix {
	position: absolute;
	left: 14px;
	font-size: 15px;
	font-weight: 600;
	color: rgba(255,255,255,0.5);
	pointer-events: none;
	z-index: 1;
}
.cpp-input-with-prefix {
	padding-left: 42px !important;
}

/* ── Destination Address Card ─────────────────────── */
.cpp-destination-wrap {
	margin-bottom: 20px;
}
.cpp-destination-card {
	background: rgba(16, 185, 129, 0.06);
	border: 1px solid rgba(16, 185, 129, 0.3);
	border-radius: var(--cpp-radius-sm);
	padding: 16px 18px;
}
.cpp-destination-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: rgba(255,255,255,0.55);
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom: 10px;
}
.cpp-destination-label svg {
	opacity: .7;
}
.cpp-destination-address-row {
	display: flex;
	gap: 8px;
	align-items: center;
}
.cpp-address-readonly {
	flex: 1;
	font-family: 'Courier New', monospace !important;
	font-size: 13px !important;
	letter-spacing: .04em;
	color: #10b981 !important;
	background: rgba(0,0,0,0.25) !important;
	border-color: rgba(16,185,129,0.3) !important;
	cursor: text;
}
.cpp-deposit-warning {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 14px;
	padding: 12px 14px;
	background: rgba(245, 158, 11, 0.1);
	border: 1px solid rgba(245, 158, 11, 0.35);
	border-radius: var(--cpp-radius-sm);
	color: #fbbf24;
	font-size: 13px;
	line-height: 1.55;
}
.cpp-deposit-warning svg {
	stroke: #fbbf24;
}
.cpp-copy-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	border-radius: var(--cpp-radius-sm);
	border: 1px solid rgba(16,185,129,0.4);
	background: rgba(16,185,129,0.12);
	color: #10b981;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s, border-color .2s;
	white-space: nowrap;
}
.cpp-copy-btn:hover {
	background: rgba(16,185,129,0.22);
	border-color: rgba(16,185,129,0.6);
}
.cpp-copy-btn svg {
	flex-shrink: 0;
}

/* ── Payment Options empty notice ─────────────────── */
.cpp-notice-warning {
	padding: 12px 16px;
	background: rgba(245,158,11,0.1);
	border: 1px solid rgba(245,158,11,0.3);
	border-radius: var(--cpp-radius-sm);
	color: #f59e0b;
	font-size: 14px;
	margin: 0;
}

/* ── Admin Payment Options rows ──────────────────── */
.cpp-po-row {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 8px;
	align-items: center;
	margin-bottom: 8px;
}

.cpp-upload-area {
	border: 2px dashed var(--cpp-border);
	border-radius: var(--cpp-radius-sm);
	padding: 28px 16px;
	text-align: center;
	cursor: pointer;
	transition: border-color .2s, background .2s;
	position: relative;
}
.cpp-upload-area:hover {
	border-color: var(--cpp-primary);
	background: var(--cpp-primary-light);
}
.cpp-file-input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	width: 100%;
	height: 100%;
}
.cpp-upload-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.cpp-upload-icon { font-size: 32px; }
.cpp-upload-placeholder span { font-size: 14px; color: var(--cpp-text-muted); }
.cpp-upload-placeholder small { font-size: 12px; color: var(--cpp-text-muted); }
.cpp-upload-preview img {
	max-width: 100%;
	max-height: 200px;
	border-radius: var(--cpp-radius-sm);
	margin-top: 8px;
}

/* Table */
.cpp-table-wrap { overflow-x: auto; }
.cpp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.cpp-table th {
	background: #f8fafc;
	padding: 10px 14px;
	text-align: left;
	font-size: 12px;
	font-weight: 700;
	color: var(--cpp-text-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
	border-bottom: 1px solid var(--cpp-border);
}
.cpp-table td {
	padding: 12px 14px;
	border-bottom: 1px solid #f1f5f9;
	vertical-align: middle;
}
.cpp-table tr:last-child td { border-bottom: none; }
.cpp-table tr:hover td { background: #fafbff; }

/* Badges */
.cpp-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
}
.cpp-badge-pending  { background: #fef3c7; color: #92400e; }
.cpp-badge-approved { background: #d1fae5; color: #065f46; }
.cpp-badge-rejected { background: #fee2e2; color: #991b1b; }

.cpp-coin-badge {
	background: var(--cpp-primary-light);
	color: var(--cpp-primary);
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 20px;
}

.cpp-link {
	color: var(--cpp-primary);
	text-decoration: none;
	font-weight: 600;
	font-size: 13px;
}
.cpp-link:hover { text-decoration: underline; }
.cpp-text-muted { color: var(--cpp-text-muted); }

/* Empty State */
.cpp-empty-state {
	text-align: center;
	padding: 48px 16px;
	color: var(--cpp-text-muted);
}
.cpp-empty-icon { font-size: 48px; display: block; margin-bottom: 12px; }

/* Profile — Avatar Upload */
.cpp-profile-avatar-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 24px;
}
.cpp-profile-avatar-img-wrap {
	position: relative;
	display: inline-block;
}
.cpp-profile-avatar-img {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid rgba(0, 210, 160, 0.5);
	display: block;
}
.cpp-avatar-overlay {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	cursor: pointer;
	transition: opacity .2s;
	color: #fff;
}
.cpp-profile-avatar-img-wrap:hover .cpp-avatar-overlay {
	opacity: 1;
}

/* Profile */
.cpp-profile-info { margin-bottom: 24px; }
.cpp-profile-row {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid #f1f5f9;
}
.cpp-profile-row:last-child { border-bottom: none; }
.cpp-profile-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--cpp-text-muted);
	min-width: 140px;
}
.cpp-wallet-text {
	font-family: monospace;
	font-size: 13px;
	word-break: break-all;
}

/* Tooltip */
.cpp-tooltip { cursor: help; font-size: 13px; }

/* ── Phone number field ─────────────────────── */
.cpp-phone-row {
	display: flex;
	gap: 8px;
	align-items: stretch;
}
.cpp-phone-country {
	flex: 0 0 auto;
	width: 185px;
	min-width: 0;
}
.cpp-phone-number {
	flex: 1 1 auto;
	min-width: 0;
}
@media (max-width: 480px) {
	.cpp-phone-row { flex-direction: column; gap: 6px; }
	.cpp-phone-country { width: 100%; }
}

/* ── Referral System ────────────────────────── */
.cpp-ref-link-card {
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: var(--cpp-radius);
	padding: 20px 22px;
}
.cpp-ref-link-label {
	font-size: 12px;
	font-weight: 600;
	color: rgba(255,255,255,0.45);
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom: 4px;
}
.cpp-ref-url-input {
	border-radius: 100px !important;
	font-size: 13px !important;
}
.cpp-ref-code-row {
	margin-top: 10px;
	font-size: 13px;
	color: rgba(255,255,255,0.4);
}
.cpp-ref-code-row strong {
	color: #00d2a0;
	margin-left: 6px;
	font-family: monospace;
	letter-spacing: .08em;
}
.cpp-ref-share-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 14px;
	font-size: 13px;
	color: rgba(255,255,255,0.4);
}
.cpp-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 14px;
	border-radius: 50px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	transition: opacity .2s;
}
.cpp-share-btn:hover { opacity: .8; }
.cpp-share-wa    { background: #25d366; color: #fff; }
.cpp-share-fb    { background: #1877f2; color: #fff; }
.cpp-share-email { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.15); }

.cpp-ref-rates-grid {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 10px;
}
.cpp-ref-rate-card {
	background: rgba(0,210,160,0.07);
	border: 1px solid rgba(0,210,160,0.2);
	border-radius: var(--cpp-radius-sm);
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.cpp-ref-rate-label {
	font-size: 11px;
	color: rgba(255,255,255,0.4);
	text-transform: uppercase;
	letter-spacing: .05em;
}
.cpp-ref-rate-value {
	font-size: 18px;
	font-weight: 700;
	color: #00d2a0;
}

.cpp-ref-points-badge {
	display: inline-block;
	background: rgba(245,158,11,0.15);
	border: 1px solid rgba(245,158,11,0.3);
	color: #f59e0b;
	border-radius: 50px;
	padding: 8px 18px;
	font-size: 14px;
	font-weight: 600;
}

@media (max-width: 600px) {
	.cpp-ref-rates-grid { grid-template-columns: 1fr; }
	.cpp-ref-share-row  { gap: 6px; }
}

/* ── Mobile Responsive ──────────────────────── */
@media (max-width: 600px) {

	/* Auth card padding */
	.cpp-auth-card .cpp-card-body {
		padding: 32px 20px 28px;
	}
	.cpp-auth-title {
		font-size: 26px;
	}

	/* Auth wrap padding */
	.cpp-auth-wrap {
		padding: 20px 12px;
		align-items: flex-start;
		padding-top: 40px;
	}

	/* Dashboard layout */
	.cpp-dashboard-wrap {
		padding: 16px 12px 60px;
	}
	.cpp-myaccount-layout {
		border-radius: 16px;
	}
	.cpp-myaccount-content {
		padding: 20px 16px;
	}
	.cpp-myaccount-heading {
		font-size: 18px;
	}

	/* Sidebar nav on mobile */
	.cpp-myaccount-nav ul li a {
		padding: 10px 14px;
		font-size: 13px;
		gap: 8px;
	}

	/* Stats grid single column on very small screens */
	.cpp-stats-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.cpp-stat-number {
		font-size: 22px;
	}

	/* Destination address: stack vertically */
	.cpp-destination-address-row {
		flex-direction: column;
		align-items: stretch;
	}
	.cpp-copy-btn {
		width: 100%;
		justify-content: center;
		padding: 12px;
	}
	.cpp-address-readonly {
		font-size: 12px !important;
		word-break: break-all;
	}

	/* Form inputs */
	.cpp-input {
		font-size: 16px; /* prevents iOS zoom on focus */
		padding: 12px 14px;
	}
	.cpp-auth-card .cpp-input {
		font-size: 16px;
		padding: 13px 16px;
	}
	.cpp-btn {
		padding: 13px 20px;
		font-size: 14px;
	}
	.cpp-auth-card .cpp-btn-primary {
		padding: 15px 20px;
	}

	/* Table: horizontal scroll */
	.cpp-table-wrap {
		-webkit-overflow-scrolling: touch;
		overflow-x: auto;
		display: block;
		width: 100%;
	}
	.cpp-table {
		min-width: 520px;
	}
	.cpp-table th,
	.cpp-table td {
		padding: 10px 8px;
		font-size: 12px;
		white-space: nowrap;
	}
	.cpp-table th:last-child,
	.cpp-table td:last-child {
		white-space: normal;
	}

	/* Logo */
	.cpp-auth-logo img {
		max-width: 160px;
	}
}

/* ── Wallet Banner ──────────────────────────── */
.cpp-wallet-banner {
	display: flex;
	align-items: center;
	gap: 16px;
	background: linear-gradient(135deg, rgba(0,210,160,0.12) 0%, rgba(0,180,216,0.08) 100%);
	border: 1px solid rgba(0,210,160,0.25);
	border-radius: 14px;
	padding: 20px 24px;
	margin-bottom: 24px;
}
.cpp-wallet-banner-icon { font-size: 32px; line-height: 1; }
.cpp-wallet-banner-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cpp-wallet-banner-label { font-size: 12px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.08em; }
.cpp-wallet-banner-amount { font-size: 26px; font-weight: 700; color: #00d2a0; letter-spacing: -0.5px; }

/* ── Withdrawal Info Grid ───────────────────── */
.cpp-withdraw-info-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 28px;
}
.cpp-withdraw-info-card {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 10px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.cpp-withdraw-info-label { font-size: 11px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.08em; }
.cpp-withdraw-info-value { font-size: 16px; font-weight: 700; color: #fff; }

/* ── Referral Link Card ─────────────────────── */
.cpp-ref-link-card {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 14px;
	padding: 20px 24px;
	margin-bottom: 20px;
}
.cpp-ref-label {
	font-size: 11px;
	font-weight: 700;
	color: rgba(255,255,255,0.4);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 12px;
}
.cpp-ref-link-row { display: flex; gap: 10px; margin-bottom: 12px; }
.cpp-ref-link-row .cpp-input { flex: 1; }
.cpp-ref-stats-row { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,0.5); }
.cpp-ref-stats-row strong { color: #fff; }

/* ── Commission Rate Cards ──────────────────── */
.cpp-ref-rates-card {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 14px;
	padding: 20px 24px;
	margin-bottom: 24px;
}
.cpp-ref-rates-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cpp-ref-rate-item {
	border-radius: 10px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
}
.cpp-ref-rate-t1 { background: rgba(0,210,160,0.12); border: 1px solid rgba(0,210,160,0.3); }
.cpp-ref-rate-t2 { background: rgba(0,180,216,0.10); border: 1px solid rgba(0,180,216,0.25); }
.cpp-ref-rate-t3 { background: rgba(139,92,246,0.10); border: 1px solid rgba(139,92,246,0.25); }
.cpp-ref-rate-tier { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.5); text-transform: uppercase; }
.cpp-ref-rate-pct { font-size: 28px; font-weight: 800; color: #fff; line-height: 1; }
.cpp-ref-rate-t1 .cpp-ref-rate-pct { color: #00d2a0; }
.cpp-ref-rate-t2 .cpp-ref-rate-pct { color: #00b4d8; }
.cpp-ref-rate-t3 .cpp-ref-rate-pct { color: #a78bfa; }
.cpp-ref-rate-desc { font-size: 12px; color: rgba(255,255,255,0.45); }

/* ── Visual Referral Tree ───────────────────── */
.cpp-ref-tree-section { margin-top: 8px; }
.cpp-ref-tree { overflow-x: auto; padding-bottom: 12px; }
.cpp-tree-root { display: flex; justify-content: flex-start; margin-bottom: 8px; }
.cpp-tree-level { display: flex; flex-wrap: wrap; gap: 10px; padding-left: 24px; }
.cpp-tree-level-2 { padding-left: 20px; margin-top: 6px; }
.cpp-tree-level-3 { padding-left: 16px; margin-top: 6px; }
.cpp-tree-branch { display: flex; flex-direction: column; }
.cpp-tree-connector { width: 2px; height: 14px; background: rgba(0,210,160,0.3); margin-left: 14px; }
.cpp-tree-node {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 10px;
	padding: 8px 12px;
	font-size: 13px;
	color: #fff;
	max-width: 180px;
}
.cpp-tree-node span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpp-tree-node small { display: block; font-size: 10px; color: rgba(255,255,255,0.4); }
.cpp-tree-node-you { background: rgba(0,210,160,0.12); border-color: rgba(0,210,160,0.35); }
.cpp-tree-node-l1 { border-color: rgba(0,180,216,0.3); }
.cpp-tree-node-l2 { border-color: rgba(139,92,246,0.3); font-size: 12px; }
.cpp-tree-node-l3 { border-color: rgba(255,255,255,0.12); font-size: 11px; }
.cpp-tree-avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cpp-tree-status-approved { color: #00d2a0 !important; }
.cpp-tree-status-pending  { color: #fbbf24 !important; }
.cpp-tree-status-rejected { color: #f87171 !important; }
.cpp-stat-referral { background: rgba(139,92,246,0.15) !important; }

/* ── Investment stat card shared styles ─── */

.cpp-stat-value {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: #ffffff;
}

.cpp-stat-icon svg {
	width: 22px;
	height: 22px;
	display: block;
	flex-shrink: 0;
}

.cpp-stat-icon--primary  { background: rgba(124,  58, 237, 0.20); color: #a78bfa; }
.cpp-stat-icon--success  { background: rgba( 16, 185, 129, 0.20); color: #34d399; }
.cpp-stat-icon--warning  { background: rgba(245, 158,  11, 0.20); color: #fbbf24; }
.cpp-stat-icon--accent   { background: rgba( 59, 130, 246, 0.20); color: #60a5fa; }

/* ── Investment Tab ─────────────────────── */

.cpp-section-title {
	font-size: 28px;
	font-weight: 800;
	color: #ffffff;
	margin: 0 0 20px;
}

.cpp-inv-stats { grid-template-columns: repeat(3, 1fr); }

.cpp-inv-progress-wrap {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--cpp-radius);
	padding: 20px 24px;
	margin: 20px 0;
}
.cpp-inv-progress-header {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 10px;
	color: rgba(255, 255, 255, 0.85);
}
.cpp-inv-progress-pct { color: var(--cpp-primary); font-size: 16px; }
.cpp-inv-progress-bar {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	height: 14px;
	overflow: hidden;
}
.cpp-inv-progress-fill {
	height: 100%;
	border-radius: 8px;
	background: linear-gradient(90deg, var(--cpp-primary), var(--cpp-accent));
	transition: width 0.5s ease;
}
.cpp-inv-progress-labels {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.4);
	margin-top: 6px;
}

.cpp-inv-sub-title {
	font-size: 16px;
	font-weight: 700;
	color: #ffffff;
	margin: 24px 0 14px;
}

/* Portions Grid */
.cpp-inv-portions-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-bottom: 20px;
}
.cpp-inv-portion-card {
	border-radius: var(--cpp-radius);
	padding: 18px 16px;
	display: flex;
	align-items: center;
	gap: 14px;
	border: 1.5px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.05);
}
.cpp-inv-portion--done    { border-color: rgba(16, 185, 129, 0.5); background: rgba(16, 185, 129, 0.08); }
.cpp-inv-portion--current { border-color: rgba(124, 58, 237, 0.5); background: rgba(124, 58, 237, 0.08); }
.cpp-inv-portion--locked  { opacity: 0.5; }

.cpp-inv-portion-icon {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.08);
}
.cpp-inv-portion--done .cpp-inv-portion-icon    { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.cpp-inv-portion--current .cpp-inv-portion-icon { background: rgba(124, 58, 237, 0.2); color: #a78bfa; }
.cpp-inv-portion-icon svg { width: 18px; height: 18px; stroke: inherit; }
.cpp-inv-portion--done .cpp-inv-portion-icon svg    { stroke: #34d399; }
.cpp-inv-portion--current .cpp-inv-portion-icon svg { stroke: #a78bfa; }
.cpp-inv-portion--locked .cpp-inv-portion-icon svg  { stroke: rgba(255, 255, 255, 0.3); }

.cpp-inv-portion-info { display: flex; flex-direction: column; gap: 2px; }
.cpp-inv-portion-num  { font-weight: 700; font-size: 14px; color: #ffffff; }
.cpp-inv-portion-days { font-size: 12px; color: rgba(255, 255, 255, 0.45); }
.cpp-inv-portion-amt  { font-size: 16px; font-weight: 800; color: var(--cpp-primary); }

/* Withdrawal Box */
.cpp-inv-wd-section {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--cpp-radius);
	padding: 20px 24px;
	margin-bottom: 24px;
}
.cpp-inv-wd-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.cpp-inv-wd-box p { margin: 0; font-size: 15px; color: rgba(255, 255, 255, 0.85); }

/* Alert */
.cpp-alert {
	padding: 12px 16px;
	border-radius: var(--cpp-radius-sm);
	font-size: 14px;
	margin-bottom: 14px;
}
.cpp-alert--success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.cpp-alert--error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* Notices */
.cpp-notice {
	padding: 14px 18px;
	border-radius: var(--cpp-radius-sm);
	font-size: 14px;
	margin: 12px 0;
}
.cpp-notice-info    { background: #eff6ff; color: #1e40af; border-left: 4px solid #3b82f6; }
.cpp-notice-warning { background: #fffbeb; color: #92400e; border-left: 4px solid var(--cpp-warning); }

/* Notices inside dark dashboard */
.cpp-myaccount-content .cpp-notice-info {
	background: rgba(59, 130, 246, 0.12);
	color: #93c5fd;
	border-left-color: #3b82f6;
}
.cpp-myaccount-content .cpp-notice-warning {
	background: rgba(245, 158, 11, 0.12);
	color: #fcd34d;
	border-left-color: var(--cpp-warning);
}

/* Stat value small variant */
.cpp-stat-value--sm { font-size: 14px; }

@media (max-width: 680px) {
	.cpp-withdraw-info-grid { grid-template-columns: 1fr; }
	.cpp-ref-rates-grid { grid-template-columns: 1fr; }
	.cpp-wallet-banner { flex-direction: column; align-items: flex-start; }
	.cpp-wallet-banner-amount { font-size: 20px; }
	.cpp-inv-stats { grid-template-columns: 1fr 1fr; }
	.cpp-inv-portions-grid { grid-template-columns: 1fr; }
	.cpp-inv-wd-box { flex-direction: column; align-items: flex-start; }
}

/* ── Referral code field (locked / auto-filled) ─── */
.cpp-input.cpp-input-locked {
	opacity: .7;
	cursor: not-allowed;
	background: rgba(255,255,255,.04);
	border-color: rgba(255,255,255,.12);
}

/* ── Accessible focus rings (WCAG 2.1 AA §2.4.7) ─── */
.cpp-btn:focus-visible,
.cpp-copy-btn:focus-visible,
.cpp-share-btn:focus-visible {
	outline: 2px solid #7c3aed;
	outline-offset: 2px;
}