/* ==========================================================================
   BetZone — profile.css (profile page + my-account)
   ========================================================================== */

.bz-profile-header { display: flex; gap: 24px; align-items: center; background: var(--bz-bg-card); border: 1px solid var(--bz-border); border-radius: var(--bz-radius); padding: 24px; margin-bottom: 8px; flex-wrap: wrap; }
.bz-profile-name { font-size: 24px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
.bz-profile-bio { color: var(--bz-text-dim); margin: 0 0 10px; max-width: 480px; }
.bz-profile-socials { display: flex; gap: 14px; margin-bottom: 14px; font-size: 13px; }
.bz-profile-stats-row { display: flex; gap: 28px; }
.bz-stat { display: flex; flex-direction: column; }
.bz-stat strong { font-size: 20px; color: var(--bz-accent); }
.bz-stat span { font-size: 11px; color: var(--bz-text-dim); text-transform: uppercase; }

.bz-profile-edit-link { margin: 14px 0; }

.bz-profile-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--bz-border); margin: 24px 0 20px; }
.bz-profile-tabs a { padding: 10px 18px; color: var(--bz-text-dim); font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; }
.bz-profile-tabs a.active { color: var(--bz-accent); border-color: var(--bz-accent); }
.bz-profile-tabs a:hover { text-decoration: none; color: var(--bz-text); }

.bz-profile-slips-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }

.bz-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 28px; }
.bz-stat-card { background: var(--bz-bg-card); border: 1px solid var(--bz-border); border-radius: var(--bz-radius-sm); padding: 16px; text-align: center; }
.bz-stat-card strong { display: block; font-size: 22px; color: var(--bz-accent); }
.bz-stat-card span { font-size: 11px; color: var(--bz-text-dim); text-transform: uppercase; }

.bz-mini-chart { display: flex; align-items: flex-end; gap: 12px; height: 160px; background: var(--bz-bg-card); border: 1px solid var(--bz-border); border-radius: var(--bz-radius); padding: 20px; }
.bz-mini-chart-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.bz-mini-chart-bar { width: 60%; background: linear-gradient(180deg, var(--bz-accent), var(--bz-accent-dim)); border-radius: 4px 4px 0 0; min-height: 4px; }
.bz-mini-chart-label { font-size: 10px; color: var(--bz-text-dim); margin-top: 8px; }

.bz-badges-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.bz-badge-card { background: var(--bz-bg-card); border: 1px solid var(--bz-border); border-radius: var(--bz-radius); padding: 20px; text-align: center; }
.bz-badge-card.locked { opacity: 0.35; }
.bz-badge-icon { width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 10px; }
.bz-badge-icon.bz-badge-bronze { background: var(--bz-bronze); }
.bz-badge-icon.bz-badge-silver { background: var(--bz-silver); }
.bz-badge-icon.bz-badge-gold { background: var(--bz-gold); }
.bz-badge-icon.bz-badge-legend { background: linear-gradient(135deg, var(--bz-accent), var(--bz-gold)); }
.bz-badge-card span { display: block; font-size: 12px; color: var(--bz-text-dim); margin-top: 4px; }

/* ---------- My Account ---------- */
.bz-account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-top: 20px; }
.bz-account-card { background: var(--bz-bg-card); border: 1px solid var(--bz-border); border-radius: var(--bz-radius); padding: 20px; }
.bz-account-card h2 { font-size: 16px; margin-top: 0; }
.bz-account-card form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.bz-account-card label { font-size: 12px; color: var(--bz-text-dim); margin-top: 6px; }
.bz-account-card input, .bz-account-card textarea {
	background: var(--bz-bg-elevated); border: 1px solid var(--bz-border); border-radius: 6px;
	padding: 9px 11px; color: var(--bz-text); font-family: var(--bz-font); font-size: 13px;
}
.bz-account-card button { margin-top: 10px; }
#bz-avatar-input { margin-top: 12px; }
.bz-field-hint { font-size: 11px; color: var(--bz-text-dim); }