/**
 * Phidias Dashboard - Styles CSS
 * Design: Glassmorphism avec palette Navy/Gold
 */

#menu-logout {
    display: none;
}

/* ===== CSS Variables ===== */
:root {
    --deep-navy: #081020;
    --medium-navy: #0c1628;
    --light-navy: #101c32;
    --card-bg: #0e1a2e;
    --classic-gold: #D3B574;
    --light-gold: #E2C985;
    --gold-dim: rgba(211, 181, 116, 0.08);
    --gold-subtle: rgba(211, 181, 116, 0.12);
    --emerald-green: #27AE60;
    --danger-red: #E74C3C;
    --warning-orange: #f59e0b;
    --info-blue: #3b82f6;
    --pure-white: #F5F2EB;
    --cool-grey: #DDD9D0;
    --glass-bg: rgba(14, 26, 46, 0.6);
    --glass-border: rgba(211, 181, 116, 0.12);

    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --sidebar-width: 260px;
    --header-height: 65px;
    --border-radius: 16px;
    --border-radius-sm: 10px;
    --border-radius-xs: 8px;
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
}

/* ===== Reset & Base ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-family);
    background: var(--deep-navy);
    color: var(--pure-white);
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    max-width: 100%;
}

/* Empêche les médias de déborder du viewport */
img, video {
    max-width: 100%;
    height: auto;
}

/* Iframes/canvas gardent leur hauteur explicite (Chart.js, trading iframe) */
iframe, canvas, embed, object {
    max-width: 100%;
}

/* Limite la largeur des tableaux */
table {
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* ===== Layout ===== */
.app-container {
    display: flex;
    min-height: 100vh;
    min-width: 0;
    max-width: 100%;
}

/* ===== Sidebar ===== */
.sidebar {
    width: var(--sidebar-width);
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-right: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 200;
    transition: transform var(--transition-fast);
}

/* Mobile menu toggle (hamburger) — hidden on desktop */
.sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 12px;
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-xs);
    color: var(--pure-white);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.sidebar-toggle:hover {
    border-color: var(--classic-gold);
    color: var(--classic-gold);
}

.sidebar-toggle svg {
    display: block;
}

/* Overlay shown behind the open sidebar on mobile */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 150;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.sidebar-backdrop.active {
    display: block;
    opacity: 1;
}

/* Lock body scroll when mobile menu is open */
body.sidebar-open {
    overflow: hidden;
}

/* User info block in sidebar — hidden on desktop, shown on mobile */
.sidebar-user {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    margin: 0 12px 8px;
    border-bottom: 1px solid var(--glass-border);
}

.sidebar-user svg {
    width: 18px;
    height: 18px;
    color: var(--classic-gold);
    flex-shrink: 0;
}

.sidebar-user .username {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--pure-white);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user .btn-logout {
    padding: 5px 10px;
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-xs);
    color: var(--cool-grey);
    font-size: 11px;
    transition: all var(--transition-fast);
}

.sidebar-user .btn-logout:hover {
    border-color: var(--classic-gold);
    color: var(--classic-gold);
}

.sidebar-logo {
    padding: 24px;
    border-bottom: 1px solid var(--glass-border);
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 14px;
}

.logo-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    color: var(--deep-navy);
    box-shadow: 0 4px 20px rgba(211, 181, 116, 0.35);
}

.logo-text h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--classic-gold);
    letter-spacing: 1px;
}

.logo-text span {
    font-size: 10px;
    color: var(--cool-grey);
    letter-spacing: 2px;
    font-weight: 300;
}

/* Navigation */
.sidebar-nav {
    flex: 1;
    padding: 16px 12px;
    overflow-x: visible;
}

.nav-item-group {
    position: relative;
}

.nav-item-row {
    position: relative;
}

.nav-item-group.has-children .nav-item {
    padding-right: 38px;
}

.nav-item-group.has-children .nav-item::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 14px;
    width: 8px;
    height: 8px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    opacity: 0.8;
    transition: opacity var(--transition-fast);
}

.nav-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 4px;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
    color: var(--cool-grey);
    font-size: 13px;
    font-weight: 400;
    text-align: left;
    transition: all var(--transition-fast);
}

.nav-item-label {
    min-width: 0;
    flex: 1 1 auto;
}

.nav-item:hover {
    background: var(--gold-dim);
    color: var(--classic-gold);
}

.nav-item-group.has-children:hover .nav-item::after,
.nav-item-group.has-children:focus-within .nav-item::after,
.nav-item-group.open .nav-item::after {
    opacity: 1;
}

.nav-item.active {
    background: linear-gradient(90deg, var(--gold-dim) 0%, transparent 100%);
    border-left-color: var(--classic-gold);
    color: var(--classic-gold);
    font-weight: 500;
}

.nav-item.highlight-gold {
    background: linear-gradient(90deg, var(--gold-dim) 0%, transparent 100%);
    border-left-color: var(--light-gold);
    color: var(--light-gold);
    font-weight: 500;
    position: relative;
    border: 1px solid transparent;
    border-left-width: 3px;
    animation: shimmer-glow 2s ease-in-out infinite;
}

.nav-item.highlight-gold::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -3px;
    right: -1px;
    bottom: -1px;
    border-radius: 0 10px 10px 0;
    background: linear-gradient(
        90deg,
        var(--classic-gold),
        var(--light-gold),
        var(--classic-gold),
        var(--light-gold),
        var(--classic-gold)
    );
    background-size: 200% 100%;
    animation: shimmer-border 2s linear infinite;
    z-index: -1;
    opacity: 0.8;
}

.nav-item.highlight-gold::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0 10px 10px 0;
    background: var(--medium-navy);
    z-index: -1;
}

/* Animation scintillante pour le contour */
@keyframes shimmer-border {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Animation de lueur pulsante */
@keyframes shimmer-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(211, 181, 116, 0.3),
                    0 0 10px rgba(211, 181, 116, 0.2),
                    0 0 15px rgba(211, 181, 116, 0.08);
    }
    50% {
        box-shadow: 0 0 10px rgba(211, 181, 116, 0.5),
                    0 0 20px rgba(211, 181, 116, 0.3),
                    0 0 30px rgba(211, 181, 116, 0.2);
    }
}

.nav-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.nav-submenu {
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 220px;
    padding: 10px;
    background: rgba(13, 20, 38, 0.94);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    z-index: 150;
}
/*
.nav-item-group.open .nav-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
*/
.nav-item-group.has-children:hover .nav-submenu,
.nav-item-group.has-children:focus-within .nav-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.nav-subitem {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--cool-grey);
    font-size: 12px;
    line-height: 1.4;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-subitem:hover {
    background: var(--gold-dim);
    color: var(--classic-gold);
}

.nav-subitem.active {
    background: linear-gradient(90deg, var(--gold-dim) 0%, transparent 100%);
    color: var(--classic-gold);
}

/* Sidebar External Link */
.sidebar-external {
    padding: 16px;
    border-top: 1px solid var(--glass-border);
}

.external-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--medium-navy);
    border-radius: var(--border-radius-sm);
    color: var(--cool-grey);
    font-size: 12px;
    transition: all var(--transition-fast);
}

.external-link:hover {
    background: var(--light-navy);
    color: var(--pure-white);
}

.external-link svg:last-child {
    margin-left: auto;
}

/* ===== Main Content ===== */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
}

/* Header */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 32px;
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--glass-border);
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--header-height);
}

.header-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-user svg {
    width: 18px;
    height: 18px;
    color: var(--cool-grey);
}

.header-user .username {
    font-size: 14px;
    font-weight: 500;
    color: var(--pure-white);
}

.btn-logout {
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-xs);
    color: var(--cool-grey);
    font-size: 12px;
    transition: all var(--transition-fast);
}

.btn-logout:hover {
    border-color: var(--classic-gold);
    color: var(--classic-gold);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.language-selector {
    padding: 8px 16px;
    background: var(--medium-navy);
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.language-selector:hover {
    background: var(--light-navy);
}

.language-selector svg {
    width: 16px;
    height: 16px;
    color: var(--cool-grey);
}

.language-selector span {
    font-size: 13px;
    color: var(--pure-white);
}

/* ===== Page Content ===== */
.page-content {
    padding: 28px 32px;
    flex: 1;
    min-width: 0;
    max-width: 100%;
}

.page-section {
    min-width: 0;
    max-width: 100%;
}

/* Page Title Banner */
.page-title-banner {
    background: linear-gradient(90deg, var(--gold-dim) 0%, transparent 70%);
    border-left: 3px solid var(--classic-gold);
    border-radius: 0 12px 12px 0;
    padding: 16px 24px;
    margin-bottom: 28px;
}

.page-title-banner h2 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* ===== Glass Card ===== */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
}

/* ===== Grid Layouts ===== */
.grid-3-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 320px;
    gap: 20px;
}

.grid-3-equal {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.grid-2-cols {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

/* ===== Account Info Cards ===== */
.account-info-card {
    padding: 20px;
}

.account-info-card h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--glass-border);
}

.info-field {
    margin-bottom: 14px;
}

.info-field:last-child {
    margin-bottom: 0;
}

.info-label {
    font-size: 11px;
    color: var(--cool-grey);
    display: block;
    margin-bottom: 4px;
}

.info-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--pure-white);
}

.info-password {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-show-password {
    background: transparent;
    color: var(--classic-gold);
    font-size: 12px;
    padding: 0;
}

.btn-show-password:hover {
    text-decoration: underline;
}

.info-link {
    font-size: 13px;
    color: var(--classic-gold);
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-link:hover {
    text-decoration: underline;
}

.info-link svg {
    width: 12px;
    height: 12px;
}

/* ===== Wallet Card ===== */
.wallet-card {
    border-radius: var(--border-radius);
    color: var(--deep-navy);
    overflow: hidden;
}

.wallet-header {
    background: var(--deep-navy);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px dashed rgba(99, 119, 153, 0.7);
    border-bottom: 0;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.wallet-header-left {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.wallet-icon-container {
    width: 48px;
    height: 48px;
    background: rgba(211, 181, 116, 0.12);
    border: 1px solid rgba(211, 181, 116, 0.3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.wallet-icon-container svg {
    color: var(--classic-gold);
    width: 24px;
    height: 24px;
}

.wallet-body {
    padding: 20px 24px 24px;
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
}

.wallet-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--pure-white);
    margin-bottom: 2px;
}

.wallet-subtitle {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--classic-gold);
}

.wallet-balance-label {
    font-size: 11px;
    opacity: 0.7;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wallet-balance {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -1px;
    margin-bottom: 4px;
}

.wallet-points-label {
    font-size: 11px;
    opacity: 0.7;
    margin-bottom: 20px;
}

.wallet-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.wallet-btn {
    padding: 10px;
    background: rgba(8, 16, 32, 0.15);
    border: 1px solid rgba(8, 16, 32, 0.2);
    border-radius: var(--border-radius-sm);
    color: var(--deep-navy);
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all var(--transition-fast);
}

.wallet-btn:hover {
    background: rgba(8, 16, 32, 0.25);
}

.wallet-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wallet-btn svg {
    width: 14px;
    height: 14px;
}

/* ===== Certificates Lists ===== */
.certificates-card {
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.certificates-card h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--glass-border);
}

.certificates-list {
    flex: 1;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 8px;
}

.certificates-list::-webkit-scrollbar {
    width: 4px;
}

.certificates-list::-webkit-scrollbar-track {
    background: transparent;
}

.certificates-list::-webkit-scrollbar-thumb {
    background: var(--light-navy);
    border-radius: 2px;
}

.certificate-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--glass-border);
}

.certificate-item:last-child {
    border-bottom: none;
}

.certificate-date {
    font-size: 12px;
    color: var(--cool-grey);
}

.certificate-amount {
    font-size: 14px;
    font-weight: 600;
    color: var(--emerald-green);
}

.certificate-link {
    font-size: 12px;
    color: var(--info-blue);
}

.certificate-link:hover {
    text-decoration: underline;
}

.contract-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--glass-border);
}

.contract-item:last-child {
    border-bottom: none;
}

.contract-date {
    font-size: 11px;
    color: var(--cool-grey);
    display: block;
    margin-bottom: 4px;
}

.contract-link {
    font-size: 12px;
    color: var(--info-blue);
    display: flex;
    align-items: center;
    gap: 6px;
}

.contract-link:hover {
    text-decoration: underline;
}

/* ===== LIVE Account Section ===== */
.live-account-section {
    padding: 24px;
    margin-bottom: 32px;
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.1) 0%, var(--glass-bg) 100%);
    border-color: rgba(39, 174, 96, 0.25);
}

.live-account-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--glass-border);
}

.live-account-icon {
    width: 42px;
    height: 42px;
    background: rgba(39, 174, 96, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.live-account-icon svg {
    width: 22px;
    height: 22px;
    color: var(--emerald-green);
}

.live-account-title h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--emerald-green);
    margin-bottom: 2px;
}

.live-account-title span {
    font-size: 12px;
    color: var(--cool-grey);
}

.live-account-status {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(39, 174, 96, 0.15);
    border-radius: var(--border-radius-xs);
}

.status-dot {
    width: 8px;
    height: 8px;
    background: var(--emerald-green);
    border-radius: 50%;
}

.status-text {
    font-size: 12px;
    color: var(--emerald-green);
    font-weight: 500;
}

.live-accounts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.live-account-card {
    background: var(--medium-navy);
    border-radius: 14px;
    padding: 20px;
    border: 1px solid var(--glass-border);
}

.live-account-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.live-account-card-header h4 {
    font-size: 14px;
    font-weight: 600;
}

.badge-funded {
    font-size: 10px;
    font-weight: 600;
    color: var(--emerald-green);
    background: rgba(39, 174, 96, 0.15);
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.live-id-value {
    font-size: 15px;
    color: var(--classic-gold);
    font-weight: 600;
    font-family: monospace;
}

.btn-copy {
    background: transparent;
    color: var(--cool-grey);
    padding: 4px;
}

.btn-copy:hover {
    color: var(--classic-gold);
}

/* ===== Account Sections ===== */
.account-section {
    margin-bottom: 20px;
    overflow: hidden;
}

.account-section-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.account-section-header.expanded {
    border-bottom: 1px solid var(--glass-border);
}

.section-title-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-indicator {
    width: 4px;
    height: 24px;
    border-radius: 2px;
}

.section-indicator.gold {
    background: linear-gradient(180deg, var(--classic-gold) 0%, rgba(211, 181, 116, 0.5) 100%);
}

.section-indicator.green {
    background: linear-gradient(180deg, var(--emerald-green) 0%, rgba(39, 174, 96, 0.5) 100%);
}

.section-indicator.blue {
    background: linear-gradient(180deg, var(--info-blue) 0%, rgba(59, 130, 246, 0.5) 100%);
}

.section-indicator.red {
    background: linear-gradient(180deg, var(--danger-red) 0%, rgba(231, 76, 60, 0.5) 100%);
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--pure-white);
}

.section-count {
    font-size: 12px;
    color: var(--cool-grey);
    background: var(--medium-navy);
    padding: 4px 10px;
    border-radius: 6px;
}

.section-meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.slots-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--medium-navy);
    border-radius: var(--border-radius-xs);
}

.slots-label {
    font-size: 12px;
    color: var(--cool-grey);
}

.slots-value {
    font-size: 13px;
    font-weight: 600;
}

.slots-value.available {
    color: var(--emerald-green);
}

.slots-value.full {
    color: var(--danger-red);
}

.chevron-icon {
    width: 20px;
    height: 20px;
    color: var(--cool-grey);
    transition: transform var(--transition-fast);
}

.chevron-icon.rotated {
    transform: rotate(180deg);
}

/* Section Content */
.account-section-content {
    padding: 20px 24px;
}

.empty-section {
    text-align: center;
    padding: 40px 20px;
    color: var(--cool-grey);
}

.empty-section svg {
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.empty-section p {
    font-size: 14px;
    margin-bottom: 16px;
}

.btn-subscribe {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    border-radius: var(--border-radius-sm);
    color: var(--deep-navy);
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition-fast);
}

.btn-subscribe:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(211, 181, 116, 0.3);
}

/* Account Cards */
.accounts-columns {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.column-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--glass-border);
}

.column-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.column-dot.orange {
    background: var(--warning-orange);
}

.column-dot.green {
    background: var(--emerald-green);
}

.column-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--cool-grey);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.accounts-scroll {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 8px;
}

.accounts-scroll::-webkit-scrollbar {
    width: 4px;
}

.accounts-scroll::-webkit-scrollbar-thumb {
    background: var(--light-navy);
    border-radius: 2px;
}

/* Size Group */
.size-group {
    margin-bottom: 20px;
}

.size-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    position: sticky;
    top: 0;
    background: #0b1628;
    padding: 8px 0;
    z-index: 1;
}

.size-label {
    font-size: 18px;
    font-weight: 700;
    min-width: 60px;
}

.size-label.gold { color: var(--classic-gold); }
.size-label.green { color: var(--emerald-green); }
.size-label.blue { color: var(--info-blue); }
.size-label.red { color: var(--danger-red); }

.size-line {
    flex: 1;
    height: 1px;
}

.type-group {
    margin-bottom: 12px;
}

.type-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    margin-left: 8px;
}

.type-badge.otp {
    background: rgba(39, 174, 96, 0.15);
    color: var(--emerald-green);
}

.type-badge.classic {
    background: rgba(59, 130, 246, 0.15);
    color: var(--info-blue);
}

/* Account Card */
.account-card {
    background: var(--medium-navy);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 10px;
    transition: all var(--transition-fast);
}

.account-card:hover {
    border-color: var(--classic-gold);
}

.account-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.account-card-info {
    flex: 1;
}

.account-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.account-name {
    font-weight: 600;
    font-size: 14px;
}

.account-platform {
    font-size: 11px;
    color: var(--cool-grey);
    background: var(--light-navy);
    padding: 3px 8px;
    border-radius: 4px;
}

.account-code {
    font-size: 11px;
    font-weight: 600;
    color: var(--classic-gold);
    background: var(--gold-dim);
    padding: 3px 8px;
    border-radius: 4px;
}

.badge-status {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.badge-status.funded {
    color: var(--emerald-green);
    background: rgba(39, 174, 96, 0.15);
}

.badge-status.recurring {
    color: var(--warning-orange);
    background: rgba(245, 158, 11, 0.15);
}

.account-info-text {
    font-size: 12px;
    color: var(--cool-grey);
    margin-bottom: 8px;
    font-style: italic;
}

.account-number-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.account-number-label {
    font-size: 12px;
    color: var(--cool-grey);
}

.account-number-value {
    font-size: 12px;
    font-family: monospace;
    background: var(--deep-navy);
    padding: 4px 10px;
    border-radius: 6px;
}

.account-live-code {
    font-size: 11px;
    color: var(--emerald-green);
    background: rgba(39, 174, 96, 0.1);
    padding: 4px 10px;
    border-radius: 6px;
}

.account-payment-info {
    margin-top: 10px;
    font-size: 12px;
    color: var(--warning-orange);
    display: flex;
    align-items: center;
    gap: 6px;
}

.account-payment-info svg {
    width: 14px;
    height: 14px;
}

/* Account Actions */
.account-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.btn-account-action {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.btn-account-action svg {
    width: 14px;
    height: 14px;
}

.btn-account-action.cancel {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--cool-grey);
}

.btn-account-action.cancel:hover {
    background: var(--light-navy);
    color: var(--pure-white);
}

.btn-account-action.reset {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--info-blue);
}

.btn-account-action.reset:hover {
    background: rgba(59, 130, 246, 0.25);
}

.btn-account-action.reset-eval {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--warning-orange);
}

.btn-account-action.reset-eval:hover {
    background: rgba(245, 158, 11, 0.25);
}

.btn-account-action.upgrade {
    background: rgba(212, 175, 55, 0.14);
    border: 1px solid rgba(212, 175, 55, 0.32);
    color: var(--classic-gold);
}

.btn-account-action.upgrade:hover {
    background: rgba(212, 175, 55, 0.24);
    color: var(--pure-white);
}

.btn-account-action.delete {
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.25);
    color: var(--danger-red);
}

.btn-account-action.delete:hover {
    background: rgba(231, 76, 60, 0.2);
}

.btn-account-action.activate-cash {
    background: rgba(39, 174, 96, 0.15);
    border: 1px solid rgba(39, 174, 96, 0.3);
    color: var(--emerald-green);
}

.btn-account-action.activate-cash:hover {
    background: rgba(39, 174, 96, 0.25);
}

.btn-account-action.activate-cash.disabled {
    background: rgba(128, 128, 128, 0.1);
    border-color: rgba(128, 128, 128, 0.2);
    color: #666;
    cursor: not-allowed;
    opacity: 0.5;
}

.btn-account-action.activate-cash.disabled:hover {
    background: rgba(128, 128, 128, 0.1);
    transform: none;
}

.btn-account-action:hover {
    transform: translateY(-1px);
}

/* Empty Column State */
.empty-column {
    color: var(--cool-grey);
    font-size: 13px;
    text-align: center;
    padding: 20px;
    background: var(--medium-navy);
    border-radius: var(--border-radius-sm);
}

/* ===== Modal ===== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-medium);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    width: 900px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    border-bottom: 1px solid var(--glass-border);
}

.modal-header h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.modal-header .record-count {
    font-size: 13px;
    color: var(--cool-grey);
}

.modal-balance {
    display: flex;
    align-items: center;
    gap: 20px;
}

.modal-balance-label {
    font-size: 12px;
    color: var(--cool-grey);
}

.modal-balance-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--classic-gold);
    margin-left: 10px;
}

.btn-modal-close {
    background: var(--medium-navy);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-sm);
    padding: 10px;
    color: var(--cool-grey);
    transition: all var(--transition-fast);
}

.btn-modal-close:hover {
    color: var(--pure-white);
    border-color: var(--pure-white);
}

/* Table */
.modal-table-container {
    flex: 1;
    overflow: auto;
}

.history-table {
    width: 100%;
    border-collapse: collapse;
}

.history-table th {
    padding: 14px 28px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--cool-grey);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--medium-navy);
}

.history-table th:nth-child(2) {
    text-align: right;
    padding: 14px 20px;
}

.history-table td {
    padding: 14px 28px;
    font-size: 13px;
    border-bottom: 1px solid var(--glass-border);
}

.history-table td:nth-child(2) {
    text-align: right;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 600;
}

.history-table tr:nth-child(even) {
    background: rgba(14, 26, 46, 0.3);
}

.amount-credit {
    color: var(--emerald-green);
}

.amount-debit {
    color: var(--cool-grey);
}

/* ===== Trading Room ===== */
.trading-room-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.trading-room-header h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
}

.trading-room-header p {
    font-size: 14px;
    color: var(--cool-grey);
}

.trading-room-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-trading-action {
    padding: 10px 16px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-sm);
    color: var(--cool-grey);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition-fast);
}

.btn-trading-action:hover {
    color: var(--pure-white);
    border-color: var(--classic-gold);
}

.trading-platform-info {
    padding: 16px 24px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.platform-details {
    display: flex;
    align-items: center;
    gap: 16px;
}

.platform-icon {
    width: 44px;
    height: 44px;
    background: var(--gold-dim);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.platform-icon svg {
    width: 22px;
    height: 22px;
    color: var(--classic-gold);
}

.platform-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

.platform-account {
    font-size: 12px;
    color: var(--cool-grey);
}

.platform-status {
    display: flex;
    align-items: center;
    gap: 12px;
}

.connection-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(39, 174, 96, 0.15);
    border-radius: var(--border-radius-xs);
}

.connection-badge .dot {
    width: 8px;
    height: 8px;
    background: var(--emerald-green);
    border-radius: 50%;
}

.connection-badge span {
    font-size: 12px;
    color: var(--emerald-green);
    font-weight: 500;
}

.accounts-count {
    font-size: 13px;
    color: var(--cool-grey);
}

.trading-iframe-container {
    flex: 1;
    background: var(--medium-navy);
    border-radius: var(--border-radius);
    border: 1px solid var(--glass-border);
    overflow: hidden;
    min-height: 600px;
}

.trading-placeholder {
    width: 100%;
    height: 100%;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--deep-navy) 0%, var(--medium-navy) 100%);
}

.placeholder-icon {
    width: 80px;
    height: 80px;
    background: var(--gold-dim);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.placeholder-icon svg {
    width: 40px;
    height: 40px;
    color: var(--classic-gold);
}

.placeholder-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.placeholder-text {
    font-size: 14px;
    color: var(--cool-grey);
    text-align: center;
    max-width: 400px;
    margin-bottom: 24px;
}

.placeholder-url {
    padding: 16px 24px;
    background: var(--glass-bg);
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    gap: 12px;
}

.placeholder-url svg {
    width: 18px;
    height: 18px;
    color: var(--classic-gold);
}

.placeholder-url span {
    font-size: 13px;
    color: var(--cool-grey);
}

.placeholder-url code {
    color: var(--classic-gold);
}

/* ===== Payout & Withdraw Pages ===== */
.back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--cool-grey);
    font-size: 14px;
    margin-bottom: 24px;
    transition: color var(--transition-fast);
}

.back-btn:hover {
    color: var(--pure-white);
}

.back-btn svg {
    width: 20px;
    height: 20px;
}

.info-banner {
    padding: 20px 28px;
    margin-bottom: 32px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.info-banner.blue {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.25);
}

.info-banner svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.info-banner p {
    font-size: 14px;
    line-height: 1.6;
}

.info-banner h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--info-blue);
    margin-bottom: 6px;
}

/* Payout Flow Chart */
.flow-chart-card {
    padding: 40px;
    margin-bottom: 32px;
}

.flow-chart-title {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
    color: var(--classic-gold);
}

.flow-chart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 40px;
}

.wallet-source {
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    border-radius: var(--border-radius);
    padding: 24px 32px;
    text-align: center;
    color: var(--deep-navy);
    min-width: 180px;
    box-shadow: 0 8px 32px rgba(211, 181, 116, 0.3);
}

.wallet-source svg {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
}

.wallet-source-title {
    font-weight: 700;
    font-size: 14px;
}

.wallet-source-subtitle {
    font-size: 12px;
    opacity: 0.8;
}

.wallet-source-balance {
    font-size: 20px;
    font-weight: 700;
    margin-top: 8px;
}

.flow-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
}

.flow-arrow-line {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--classic-gold), var(--cool-grey));
    border-radius: 2px;
}

.decision-hub {
    background: var(--medium-navy);
    border: 2px solid var(--classic-gold);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.decision-hub-emoji {
    font-size: 24px;
    margin-bottom: 4px;
}

.decision-hub-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--classic-gold);
}

.decision-hub-subtitle {
    font-size: 10px;
    color: var(--cool-grey);
}

.flow-branches {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-left: 20px;
}

.flow-branch {
    display: flex;
    align-items: center;
    gap: 16px;
}

.branch-line {
    width: 60px;
    height: 3px;
    border-radius: 2px;
}

.branch-line.green { background: var(--emerald-green); }
.branch-line.blue { background: var(--info-blue); }
.branch-line.orange { background: var(--warning-orange); }

.branch-option {
    border-radius: 12px;
    padding: 16px 24px;
    min-width: 200px;
}

.branch-option.green {
    background: rgba(39, 174, 96, 0.15);
    border: 2px solid var(--emerald-green);
}

.branch-option.blue {
    background: rgba(59, 130, 246, 0.15);
    border: 2px solid var(--info-blue);
}

.branch-option.orange {
    background: rgba(245, 158, 11, 0.15);
    border: 2px solid var(--warning-orange);
}

.branch-option-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.branch-option-header svg {
    width: 18px;
    height: 18px;
}

.branch-option-header span {
    font-weight: 700;
    font-size: 14px;
}

.branch-option-header.green span,
.branch-option-header.green svg { color: var(--emerald-green); }
.branch-option-header.blue span,
.branch-option-header.blue svg { color: var(--info-blue); }
.branch-option-header.orange span,
.branch-option-header.orange svg { color: var(--warning-orange); }

.branch-option-desc {
    font-size: 11px;
    color: var(--cool-grey);
}

.branch-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
}

.branch-badge.recommended {
    background: rgba(39, 174, 96, 0.1);
    color: var(--emerald-green);
}

.branch-badge.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-orange);
}

/* Option Cards */
.option-card {
    padding: 28px;
    margin-bottom: 24px;
}

.option-card-content {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.option-number {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 24px;
}

.option-number.green { background: rgba(39, 174, 96, 0.15); }
.option-number.blue { background: rgba(59, 130, 246, 0.15); }

.option-details {
    flex: 1;
}

.option-title {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.option-title.green { color: var(--emerald-green); }
.option-title.blue { color: var(--info-blue); }

.option-desc {
    font-size: 14px;
    color: var(--cool-grey);
    line-height: 1.7;
    margin-bottom: 16px;
}

.elite-master-link {
    color: var(--classic-gold);
    text-decoration: underline;
    cursor: help;
    font-weight: 600;
    position: relative;
}

.btn-option {
    padding: 12px 24px;
    background: transparent;
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition-fast);
}

.btn-option.green {
    border: 1px solid var(--emerald-green);
    color: var(--emerald-green);
}

.btn-option.blue {
    border: 1px solid var(--info-blue);
    color: var(--info-blue);
}

.btn-option:hover {
    transform: translateY(-2px);
}

/* Warning Section */
.warning-section {
    padding: 28px;
    margin-bottom: 24px;
    background: rgba(245, 158, 11, 0.05);
    border-color: rgba(245, 158, 11, 0.3);
}

.warning-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(245, 158, 11, 0.2);
}

.warning-header svg {
    width: 24px;
    height: 24px;
    color: var(--warning-orange);
}

.warning-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--warning-orange);
}

.warning-text {
    font-size: 14px;
    color: var(--cool-grey);
    line-height: 1.8;
    margin-bottom: 24px;
}

.warning-text strong.danger {
    color: var(--danger-red);
}

.warning-text strong.white {
    color: var(--pure-white);
}

.confirm-box {
    background: var(--medium-navy);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.confirm-label {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
}

.confirm-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--classic-gold);
}

.confirm-label span {
    font-size: 14px;
    line-height: 1.6;
}

.btn-finalize {
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.btn-finalize.enabled {
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    color: var(--deep-navy);
    cursor: pointer;
}

.btn-finalize.disabled {
    background: var(--light-navy);
    color: var(--cool-grey);
    cursor: not-allowed;
    opacity: 0.5;
}

/* Form Card */
.form-card {
    padding: 40px;
    max-width: 600px;
}

.balance-display {
    margin-bottom: 32px;
}

.balance-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.balance-info h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.balance-info span {
    font-size: 13px;
    color: var(--cool-grey);
}

.balance-amount {
    font-size: 28px;
    font-weight: 700;
    color: var(--classic-gold);
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
}

.input-wrapper {
    position: relative;
}

.input-prefix {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--cool-grey);
    font-weight: 500;
}

.form-input {
    width: 100%;
    padding: 16px 16px 16px 36px;
    background: var(--medium-navy);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    font-size: 16px;
    color: var(--pure-white);
    outline: none;
    transition: border-color var(--transition-fast);
}

.form-input:focus {
    border-color: var(--classic-gold);
}

.btn-all-amount {
    margin-top: 12px;
    background: transparent;
    color: var(--classic-gold);
    font-size: 14px;
    text-decoration: underline;
    padding: 0;
}

.btn-all-amount:hover {
    color: var(--light-gold);
}

.reminder-box {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 28px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.reminder-box svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--warning-orange);
}

.reminder-box strong {
    color: var(--warning-orange);
}

.reminder-box span {
    font-size: 13px;
    color: var(--cool-grey);
    line-height: 1.6;
}

.btn-submit {
    width: 100%;
    padding: 16px 28px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.btn-submit.enabled {
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    color: var(--deep-navy);
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(211, 181, 116, 0.3);
}

.btn-submit.enabled:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(211, 181, 116, 0.4);
}

.btn-submit.disabled {
    background: var(--light-navy);
    color: var(--cool-grey);
    cursor: not-allowed;
}

.error-message {
    margin-top: 12px;
    font-size: 13px;
    color: var(--danger-red);
    display: flex;
    align-items: center;
    gap: 6px;
}

.error-message svg {
    width: 16px;
    height: 16px;
}

/* ===== Tooltip ===== */
.tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 12px;
    width: 380px;
    background: var(--deep-navy);
    border: 1px solid var(--classic-gold);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: none;
}

.tooltip.active {
    display: block;
}

.tooltip::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: var(--deep-navy);
    border-right: 1px solid var(--classic-gold);
    border-bottom: 1px solid var(--classic-gold);
}

.tooltip h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--classic-gold);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tooltip h4 svg {
    width: 18px;
    height: 18px;
}

.tooltip-section {
    margin-bottom: 14px;
}

.tooltip-section:last-child {
    margin-bottom: 0;
}

.tooltip-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 6px;
}

.tooltip-badge.elite {
    background: rgba(211, 181, 116, 0.2);
    color: var(--classic-gold);
}

.tooltip-badge.master {
    background: rgba(167, 139, 250, 0.2);
    color: #a78bfa;
}

.tooltip p {
    font-size: 12px;
    color: var(--cool-grey);
    line-height: 1.5;
    margin: 0;
}

.tooltip p.bonus {
    color: var(--emerald-green);
    font-weight: 600;
    margin-top: 4px;
}

/* ===== Fullscreen Mode ===== */
.fullscreen-mode {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: var(--deep-navy);
}

.fullscreen-mode .main-content {
    margin-left: 0;
}

.fullscreen-mode .page-content {
    padding: 0;
    height: 100vh;
}

.fullscreen-exit-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1001;
    padding: 12px 20px;
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--pure-white);
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: all var(--transition-fast);
}

.fullscreen-exit-btn:hover {
    background: var(--medium-navy);
    border-color: var(--classic-gold);
}

/* ===== Responsive Design ===== */
@media (max-width: 1200px) {
    .grid-3-cols {
        grid-template-columns: 1fr 1fr;
    }

    .grid-3-cols .wallet-card {
        grid-column: span 2;
    }

    .flow-chart {
        flex-wrap: wrap;
        gap: 20px;
    }
}

@media (max-width: 992px) {
    :root {
        --sidebar-width: 220px;
    }

    .accounts-columns {
        grid-template-columns: 1fr;
    }

    .live-accounts-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-toggle {
        display: inline-flex;
    }

    .main-content {
        margin-left: 0;
    }

    .main-header {
        padding: 12px 16px;
    }

    /* Hide username block from header — moved into sidebar */
    .main-header .header-user {
        display: none;
    }

    /* Show username block inside sidebar */
    .sidebar-user {
        display: flex;
    }

    /* Keep only the flag in language selector — hide label */
    .language-selector .lang-name {
        display: none;
    }

    .language-selector {
        padding: 8px 10px;
    }
}

@media (max-width: 768px) {
    .nav-submenu {
        position: static;
        display: none;
        min-width: 0;
        margin: 6px 0 10px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        box-shadow: none;
    }

    .nav-item-group.open .nav-submenu {
        display: block;
    }

    .page-content {
        padding: 20px 16px;
    }

    .grid-3-cols,
    .grid-3-equal {
        grid-template-columns: 1fr;
    }

    .grid-3-cols .wallet-card {
        grid-column: span 1;
    }

    .header-actions {
        gap: 8px;
    }

    .account-card-header {
        flex-direction: column;
        gap: 12px;
    }

    .account-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ===== Animations ===== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.3s ease forwards;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.pulse {
    animation: pulse 2s infinite;
}

/* ===== Scrollbar - Gold Theme ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--light-navy);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--light-gold);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--classic-gold) var(--light-navy);
}

/* ===== Utility Classes ===== */
.hidden { display: none !important; }
.visible { display: block !important; }
.flex { display: flex !important; }
.text-gold { color: var(--classic-gold); }
.text-green { color: var(--emerald-green); }
.text-red { color: var(--danger-red); }
.text-grey { color: var(--cool-grey); }
.bg-gold-dim { background: var(--gold-dim); }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }

/* ============================================
   STATISTICS PAGE STYLES
   ============================================ */

/* Page Header */
.statistics-page .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.statistics-page .page-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--pure-white);
    letter-spacing: -0.5px;
}

/* Account Selector */
.account-selector {
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-selector label {
    font-size: 13px;
    color: var(--cool-grey);
}

.account-select {
    padding: 12px 16px;
    background: var(--medium-navy);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--pure-white);
    font-size: 13px;
    font-family: 'SF Mono', Monaco, monospace;
    cursor: pointer;
    min-width: 280px;
}

.account-select:focus {
    outline: none;
    border-color: var(--classic-gold);
}

/* Account Management Card */
.account-management-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 28px;
}

.management-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.management-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.update-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: 11px;
}

.last-update, .next-update {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--cool-grey);
}

.update-time {
    color: var(--pure-white);
    font-weight: 600;
}

.countdown {
    color: var(--classic-gold);
    font-weight: 600;
    font-family: 'SF Mono', Monaco, monospace;
}

.management-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pure-white);
}

.management-title svg {
    color: var(--classic-gold);
}

.account-badges {
    display: flex;
    gap: 8px;
    align-items: center;
}

.account-type-badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.account-sub-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.account-sub-badge.otp {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.account-sub-badge.classic {
    background: rgba(59, 130, 246, 0.15);
    color: var(--info-blue);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.account-sub-badge.challenge {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning-orange);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.account-type-badge.challenge {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning-orange);
}

.account-type-badge.evaluation {
    background: rgba(59, 130, 246, 0.15);
    color: var(--info-blue);
}

.account-type-badge.cash {
    background: rgba(39, 174, 96, 0.15);
    color: var(--emerald-green);
}

.management-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.management-btn {
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    border: 1px solid;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.management-btn.reset {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: var(--warning-orange);
}

.management-btn.reset:hover {
    background: rgba(245, 158, 11, 0.25);
}

.management-btn.payment {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--info-blue);
}

.management-btn.payment:hover {
    background: rgba(59, 130, 246, 0.25);
}

.management-btn.payout {
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    border-color: transparent;
    color: var(--deep-navy);
}

.management-btn.payout:hover {
    box-shadow: 0 4px 16px rgba(211, 181, 116, 0.4);
    transform: translateY(-1px);
}

.management-btn.payout.disabled {
    background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);
    opacity: 0.6;
    cursor: not-allowed;
}

.management-btn.cancel-sub {
    background: rgba(231, 76, 60, 0.15);
    border-color: rgba(231, 76, 60, 0.3);
    color: var(--danger-red);
}

.management-btn.cancel-sub:hover {
    background: rgba(231, 76, 60, 0.25);
}

/* Stats Overview */
.stats-overview {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

.objectives-row {
    margin-bottom: 28px;
}

/* Section Divider */
.section-divider {
    display: flex;
    align-items: center;
    margin: 12px 0 20px 0;
}

.section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--cool-grey);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-right: 16px;
}

.section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--glass-border) 0%, transparent 100%);
}

/* Profit Target Bar Card */
.profit-target-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.profit-target-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 8px 0;
}

.profit-target-value span:first-child {
    font-size: 22px;
    font-weight: 700;
    color: var(--pure-white);
    font-family: 'SF Mono', Monaco, monospace;
}

.profit-target-goal {
    font-size: 13px;
    color: var(--cool-grey);
}

.profit-target-bar {
    height: 12px;
    background: var(--light-navy);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
    position: relative;
}

.profit-target-progress {
    height: 100%;
    background: linear-gradient(90deg,
        #1e3a5f 0%,
        #1e4d6b 10%,
        #1e5f78 20%,
        #1e7285 30%,
        #1e8591 40%,
        #1e9a8b 50%,
        #1eab82 60%,
        #1ebd78 70%,
        #1ecf6e 80%,
        #1ee164 90%,
        #27AE60 100%
    );
    border-radius: 6px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px rgba(39, 174, 96, 0.3);
}

.profit-target-percent {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profit-target-percent span:first-child {
    font-size: 13px;
    font-weight: 600;
    color: var(--pure-white);
}

.profit-target-status {
    font-size: 11px;
    font-weight: 600;
}

.profit-target-status.invalid {
    color: var(--danger-red);
}

.profit-target-status.valid {
    color: var(--emerald-green);
}

/* Stat Card */
.stat-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.stat-card.gold::before {
    background: linear-gradient(90deg, var(--classic-gold), var(--light-gold));
}

.stat-card.green::before {
    background: var(--emerald-green);
}

.stat-card.red::before {
    background: var(--danger-red);
}

.stat-card.blue::before {
    background: var(--info-blue);
}

.stat-card.orange::before {
    background: var(--warning-orange);
}

.stat-label {
    font-size: 11px;
    color: var(--cool-grey);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--pure-white);
    font-family: 'SF Mono', Monaco, monospace;
}

.stat-value.positive {
    color: var(--emerald-green);
}

.stat-value.negative {
    color: var(--danger-red);
}

.stat-subtext {
    font-size: 11px;
    color: var(--cool-grey);
    margin-top: 4px;
}

.stat-subtext strong {
    color: var(--classic-gold);
}

/* Progress Ring */
.progress-card {
    display: flex;
    align-items: center;
    gap: 16px;
}

.progress-ring {
    width: 70px;
    height: 70px;
    position: relative;
}

.progress-ring svg {
    transform: rotate(-90deg);
}

.progress-ring .bg {
    fill: none;
    stroke: var(--light-navy);
    stroke-width: 8;
}

.progress-ring .progress {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}

.progress-ring .progress.green {
    stroke: var(--emerald-green);
}

.progress-ring .progress.red {
    stroke: var(--danger-red);
}

.progress-ring .progress.gold {
    stroke: var(--classic-gold);
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: 700;
    color: var(--pure-white);
}

.progress-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.progress-label {
    font-size: 11px;
    color: var(--cool-grey);
    text-transform: uppercase;
}

.progress-status {
    font-size: 14px;
    font-weight: 600;
}

.progress-status.valid {
    color: var(--emerald-green);
}

.progress-status.invalid {
    color: var(--danger-red);
}

/* Drawdown Colors */
.progress.drawdown-green {
    stroke: var(--emerald-green);
}

.progress.drawdown-orange {
    stroke: var(--warning-orange);
}

.progress.drawdown-red {
    stroke: var(--danger-red);
}

.progress-status.warning {
    color: var(--warning-orange);
}

.progress-status.danger {
    color: var(--danger-red);
}

/* Long vs Short Bar */
.long-short-bar {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ls-bar {
    display: flex;
    height: 24px;
    border-radius: 12px;
    overflow: hidden;
}

.ls-long {
    background: linear-gradient(90deg, #27AE60, #34d399);
}

.ls-short {
    background: linear-gradient(90deg, #f87171, #E74C3C);
}

.ls-labels {
    display: flex;
    justify-content: space-between;
}

.ls-label {
    font-size: 12px;
    font-weight: 600;
}

.ls-label.long {
    color: var(--emerald-green);
}

.ls-label.short {
    color: var(--danger-red);
}

/* Charts Grid */
.charts-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 28px;
}

.chart-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.chart-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--pure-white);
}

.chart-period {
    display: flex;
    gap: 8px;
}

.period-btn {
    padding: 6px 12px;
    background: var(--medium-navy);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    color: var(--cool-grey);
    font-size: 11px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
}

.period-btn:hover {
    background: var(--light-navy);
    color: var(--pure-white);
}

.period-btn.active {
    background: var(--gold-dim);
    border-color: var(--classic-gold);
    color: var(--classic-gold);
}

.chart-container {
    height: 280px;
    position: relative;
}

/* Daily P&L Stats */
.daily-pnl-stats {
    display: flex;
    justify-content: space-around;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--glass-border);
}

.daily-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.daily-stat-label {
    font-size: 11px;
    color: var(--cool-grey);
    text-transform: uppercase;
}

.daily-stat-value {
    font-size: 18px;
    font-weight: 700;
    font-family: 'SF Mono', Monaco, monospace;
}

.daily-stat-value.positive {
    color: var(--emerald-green);
}

.daily-stat-value.negative {
    color: var(--danger-red);
}

.daily-stat-date {
    font-size: 10px;
    color: var(--cool-grey);
}

/* Equity Stats */
.equity-stats {
    display: flex;
    justify-content: space-between;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--glass-border);
}

.equity-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.equity-stat-label {
    font-size: 10px;
    color: var(--cool-grey);
    text-transform: uppercase;
}

.equity-stat-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--pure-white);
    font-family: 'SF Mono', Monaco, monospace;
}

.equity-stat-value.positive {
    color: var(--emerald-green);
}

.equity-stat-value.negative {
    color: var(--danger-red);
}

.equity-stat-value.status-active {
    color: var(--emerald-green);
    font-family: 'Inter', sans-serif;
}

/* Secondary Charts */
.secondary-charts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 28px;
}

.mini-chart-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
}

.mini-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.mini-chart-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--pure-white);
}

.mini-chart-container {
    height: 200px;
}

/* Win/Loss Details */
.winloss-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--glass-border);
}

.winloss-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
}

.winloss-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.winloss-item.positive {
    color: var(--emerald-green);
}

.winloss-item.negative {
    color: var(--danger-red);
}

.winloss-separator {
    color: var(--cool-grey);
}

.winloss-profit-factor {
    font-size: 12px;
    color: var(--cool-grey);
}

.winloss-profit-factor strong {
    color: var(--classic-gold);
    font-size: 14px;
}

/* Instrument Stats */
.instrument-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.instrument-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.instrument-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.instrument-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--classic-gold);
}

.instrument-pnl {
    font-size: 13px;
    font-weight: 700;
    font-family: 'SF Mono', Monaco, monospace;
}

.instrument-pnl.positive {
    color: var(--emerald-green);
}

.instrument-pnl.negative {
    color: var(--danger-red);
}

.instrument-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--light-navy);
}

.instrument-bar-win {
    background: var(--emerald-green);
}

.instrument-bar-loss {
    background: var(--danger-red);
}

.instrument-details {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--cool-grey);
}

.instrument-detail.wins {
    color: var(--emerald-green);
}

.instrument-detail.losses {
    color: var(--danger-red);
}

.instrument-row.inactive {
    opacity: 0.6;
}

.instrument-name.inactive {
    color: var(--cool-grey);
}

.instrument-pnl.nc {
    color: var(--cool-grey);
    font-size: 11px;
}

.instrument-bar-nc {
    width: 100%;
    height: 100%;
    background: var(--medium-navy);
}

.instrument-detail.nc {
    color: var(--cool-grey);
    font-style: italic;
}

/* Session Tooltip */
.session-tooltip {
    position: relative;
    display: inline-flex;
}

.info-icon {
    font-size: 14px;
    cursor: help;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.info-icon:hover {
    opacity: 1;
}

.session-info-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    text-align: left;
    line-height: 1.6;
    font-size: 11px;
    padding: 10px 14px;
    background: var(--deep-navy);
    border: 1px solid var(--classic-gold);
    border-radius: 8px;
    color: var(--pure-white);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.session-tooltip:hover .session-info-tooltip {
    opacity: 1;
    visibility: visible;
}

.session-chart-container {
    height: 140px;
}

.session-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--glass-border);
}

.session-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
}

.session-name {
    font-weight: 600;
    width: 70px;
}

.session-trades {
    color: var(--cool-grey);
    flex: 1;
    text-align: center;
}

.session-winrate {
    font-weight: 700;
    width: 40px;
    text-align: right;
}

.session-winrate.positive {
    color: var(--emerald-green);
}

.session-winrate.negative {
    color: var(--danger-red);
}

/* Detailed Stats */
.detailed-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 28px;
}

.stats-group {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
}

.stats-group-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--pure-white);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--glass-border);
}

.stats-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stats-row-label {
    font-size: 13px;
    color: var(--cool-grey);
}

.stats-row-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--pure-white);
    font-family: 'SF Mono', Monaco, monospace;
}

.stats-row-value.positive {
    color: var(--emerald-green);
}

.stats-row-value.negative {
    color: var(--danger-red);
}

/* Responsive for Statistics */
@media (max-width: 1400px) {
    .stats-overview {
        grid-template-columns: repeat(3, 1fr);
    }

    .secondary-charts {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1200px) {
    .charts-grid {
        grid-template-columns: 1fr;
    }

    .stats-overview {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .detailed-stats {
        grid-template-columns: 1fr;
    }

    .secondary-charts {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .statistics-page .page-header {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .stats-overview {
        grid-template-columns: 1fr;
    }

    .equity-stats {
        flex-wrap: wrap;
        gap: 12px;
    }

    .account-select {
        min-width: 100%;
    }
}

/* ============================================
   MY ACCOUNTS PAGE
   ============================================ */

.accounts-page {
    padding: 32px;
}

.accounts-page .title-banner {
    margin-bottom: 24px;
}

.accounts-page .title-banner h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--pure-white);
    letter-spacing: -0.5px;
}

/* Stats Row */
.accounts-page .stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

.accounts-page .stat-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.accounts-page .stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.accounts-page .stat-icon.gold {
    background: rgba(211, 181, 116, 0.12);
    color: var(--classic-gold);
}

.accounts-page .stat-icon.green {
    background: rgba(39, 174, 96, 0.15);
    color: var(--emerald-green);
}

.accounts-page .stat-icon.blue {
    background: rgba(59, 130, 246, 0.15);
    color: var(--info-blue);
}

.accounts-page .stat-icon svg {
    width: 24px;
    height: 24px;
}

.accounts-page .stat-info {
    display: flex;
    flex-direction: column;
}

.accounts-page .stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--pure-white);
}

.accounts-page .stat-label {
    font-size: 12px;
    color: var(--cool-grey);
    margin-top: 2px;
}

/* Live Account Section */
.live-account-section {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(211, 181, 116, 0.3);
    border-left: 4px solid var(--classic-gold);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 28px;
    position: relative;
    overflow: visible;
}

.live-account-section::before {
    display: none;
}

.live-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.live-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 160px;
}

.live-section-title h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--pure-white);
    margin: 0;
}

.live-badge {
    background: linear-gradient(135deg, var(--emerald-green) 0%, #34d399 100%);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.live-account-card {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.live-account-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.live-account-id {
    font-size: 14px;
    font-weight: 700;
    color: var(--classic-gold);
    font-family: 'SF Mono', Monaco, monospace;
}

.live-account-label {
    font-size: 9px;
    color: var(--cool-grey);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.live-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.live-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--pure-white);
}

.live-stat-value.green {
    color: var(--emerald-green);
}

.live-stat-label {
    font-size: 9px;
    color: var(--cool-grey);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.live-actions {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

.live-action-btn {
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    border: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.live-action-btn.payout {
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    color: var(--deep-navy);
    font-weight: 700;
}

.live-action-btn.payout:hover {
    box-shadow: 0 4px 16px rgba(211, 181, 116, 0.4);
    transform: translateY(-2px);
}

.live-action-btn.withdraw {
    background: linear-gradient(135deg, var(--emerald-green) 0%, #34d399 100%);
    border: none;
    color: white;
    font-weight: 600;
}

.live-action-btn.withdraw:hover {
    box-shadow: 0 4px 16px rgba(39, 174, 96, 0.4);
    transform: translateY(-2px);
}

.live-action-btn.add-funds {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--cool-grey);
}

.live-action-btn.add-funds:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--pure-white);
}

.live-action-btn svg {
    width: 14px;
    height: 14px;
}

/* Tooltip for buttons */
.btn-with-tooltip {
    position: relative;
}

.btn-with-tooltip .tooltip {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--deep-navy);
    border: 1px solid var(--classic-gold);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 12px;
    color: var(--pure-white);
    width: 260px;
    text-align: center;
    line-height: 1.5;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
    pointer-events: none;
}

.btn-with-tooltip .tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--classic-gold);
}

.btn-with-tooltip .tooltip::before {
    content: '';
    position: absolute;
    top: calc(100% - 1px);
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: var(--deep-navy);
    z-index: 1;
}

.btn-with-tooltip:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

.live-actions .btn-with-tooltip:last-child .tooltip {
    left: auto;
    right: 0;
    transform: translateX(0);
}

.live-actions .btn-with-tooltip:last-child .tooltip::after,
.live-actions .btn-with-tooltip:last-child .tooltip::before {
    left: auto;
    right: 30px;
    transform: translateX(0);
}

/* Two Columns Layout */
.accounts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

.accounts-column {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    overflow: hidden;
}

.column-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.column-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.column-title .indicator {
    width: 4px;
    height: 28px;
    border-radius: 2px;
}

.column-title .indicator.blue {
    background: var(--info-blue);
}

.column-title .indicator.green {
    background: var(--emerald-green);
}

.column-title h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--pure-white);
}

.column-count {
    background: var(--medium-navy);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    color: var(--cool-grey);
}

.accounts-list {
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--classic-gold) var(--medium-navy);
}

.accounts-list::-webkit-scrollbar {
    width: 6px;
}

.accounts-list::-webkit-scrollbar-track {
    background: var(--medium-navy);
}

.accounts-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    border-radius: 3px;
}

/* Account Row */
.account-row {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease;
}

.account-row:hover {
    background: rgba(211, 181, 116, 0.05);
}

.account-row:last-child {
    border-bottom: none;
}

.account-row.failed {
    background: rgba(231, 76, 60, 0.05);
}

.account-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.account-id-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.account-id {
    font-size: 13px;
    font-weight: 600;
    color: var(--classic-gold);
    font-family: 'SF Mono', Monaco, monospace;
}

.failed-icon {
    width: 18px;
    height: 18px;
    color: var(--danger-red);
}

.account-status {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.active {
    background: var(--emerald-green);
}

.status-dot.failed {
    background: var(--danger-red);
}

.status-text {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
}

.status-text.active {
    color: var(--emerald-green);
}

.status-text.failed {
    color: var(--danger-red);
}

.account-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 12px;
}

.account-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.account-stat-label {
    font-size: 10px;
    color: var(--cool-grey);
    text-transform: uppercase;
}

.account-stat-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--pure-white);
    font-family: 'SF Mono', Monaco, monospace;
}

.account-stat-value.positive {
    color: var(--emerald-green);
}

.account-stat-value.negative {
    color: var(--danger-red);
}

.trading-days-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--medium-navy);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pure-white);
}

.trading-days-badge svg {
    width: 14px;
    height: 14px;
    color: var(--classic-gold);
}

.trading-days-badge.warning {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.trading-days-badge.warning svg {
    color: var(--warning-orange);
}

.days-required {
    font-size: 10px;
    color: var(--warning-orange);
    margin-top: 4px;
}

.account-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.account-btn {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    border: 1px solid;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.account-btn.payout {
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    border-color: transparent;
    color: var(--deep-navy);
}

.account-btn.payout:hover {
    box-shadow: 0 4px 12px rgba(211, 181, 116, 0.4);
}

.account-btn.payout.disabled {
    background: rgba(128, 128, 128, 0.2);
    color: #666;
    cursor: not-allowed;
    opacity: 0.6;
}

.account-btn.payout.disabled:hover {
    box-shadow: none;
    transform: none;
}

.account-btn.reset {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: var(--warning-orange);
}

.account-btn.reset:hover {
    background: rgba(245, 158, 11, 0.25);
}

.account-btn.subscribe {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--info-blue);
}

.account-btn.subscribe:hover {
    background: rgba(59, 130, 246, 0.25);
}

.account-btn svg {
    width: 14px;
    height: 14px;
}

/* Calendar Section */
.calendar-section {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    overflow: visible;
}

.calendar-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: visible;
}

.calendar-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.calendar-title svg {
    width: 20px;
    height: 20px;
    color: var(--classic-gold);
}

.calendar-title h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--pure-white);
}

.calendar-nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

.calendar-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--medium-navy);
    border: 1px solid var(--glass-border);
    color: var(--cool-grey);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.calendar-nav-btn:hover {
    background: var(--light-navy);
    color: var(--pure-white);
}

.calendar-nav-btn svg {
    width: 18px;
    height: 18px;
}

.calendar-month {
    font-size: 16px;
    font-weight: 600;
    color: var(--pure-white);
    min-width: 160px;
    text-align: center;
}

.calendar-actions {
    display: flex;
    gap: 10px;
}

.export-btn {
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--medium-navy);
    border: 1px solid var(--glass-border);
    color: var(--cool-grey);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
}

.export-btn:hover {
    background: var(--light-navy);
    color: var(--pure-white);
}

.export-btn svg {
    width: 16px;
    height: 16px;
}

.calendar-actions .btn-with-tooltip .tooltip {
    left: auto;
    right: 0;
    transform: translateX(0);
}

.calendar-actions .btn-with-tooltip .tooltip::after,
.calendar-actions .btn-with-tooltip .tooltip::before {
    left: auto;
    right: 40px;
    transform: translateX(0);
}

.calendar-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--glass-border);
    background: var(--medium-navy);
}

.summary-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.summary-label {
    font-size: 11px;
    color: var(--cool-grey);
    text-transform: uppercase;
}

.summary-value {
    font-size: 18px;
    font-weight: 700;
    font-family: 'SF Mono', Monaco, monospace;
}

.summary-value.positive {
    color: var(--emerald-green);
}

.summary-value.negative {
    color: var(--danger-red);
}

.summary-breakdown {
    font-size: 10px;
    color: var(--cool-grey);
    margin-top: 2px;
}

.calendar-grid {
    padding: 20px 24px;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.calendar-weekday {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--cool-grey);
    text-transform: uppercase;
    padding: 8px;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.calendar-day {
    aspect-ratio: 1;
    background: var(--medium-navy);
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.calendar-day:hover {
    border-color: var(--classic-gold);
}

.calendar-day.empty {
    background: transparent;
    cursor: default;
}

.calendar-day.empty:hover {
    border-color: transparent;
}

.calendar-day.today {
    border-color: var(--classic-gold);
}

.calendar-day.has-trades {
    background: var(--light-navy);
}

.calendar-day.positive {
    border-left: 3px solid var(--emerald-green);
}

.calendar-day.negative {
    border-left: 3px solid var(--danger-red);
}

.day-number {
    font-size: 12px;
    font-weight: 600;
    color: var(--cool-grey);
    margin-bottom: 4px;
}

.calendar-day.today .day-number {
    color: var(--classic-gold);
}

.day-pnl {
    font-size: 11px;
    font-weight: 600;
    font-family: 'SF Mono', Monaco, monospace;
}

.day-pnl.positive {
    color: var(--emerald-green);
}

.day-pnl.negative {
    color: var(--danger-red);
}

.day-breakdown {
    font-size: 8px;
    color: var(--cool-grey);
    margin-top: 2px;
}

.day-note-icon {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 14px;
    height: 14px;
    color: var(--classic-gold);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.calendar-day:hover .day-note-icon {
    opacity: 1;
}

.calendar-day.has-note .day-note-icon {
    opacity: 1;
    color: var(--info-blue);
}

.day-rating {
    position: absolute;
    bottom: 6px;
    right: 6px;
    display: flex;
    gap: 2px;
}

.rating-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--light-navy);
}

.rating-dot.filled.good {
    background: var(--emerald-green);
}

.rating-dot.filled.bad {
    background: var(--danger-red);
}

.rating-dot.filled.neutral {
    background: var(--warning-orange);
}

/* Note Modal Styles */
#noteModal .modal {
    max-width: 540px;
    background: #1e2533;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#noteModal .modal-header {
    padding: 20px 24px;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#noteModal .modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--pure-white);
}

#noteModal .modal-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--cool-grey);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

#noteModal .modal-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--pure-white);
}

#noteModal .modal-body {
    padding: 0 24px 24px;
}

.modal-date {
    font-size: 14px;
    color: var(--cool-grey);
    margin-bottom: 20px;
}

.modal-pnl-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.modal-pnl-item {
    background: #0c1628;
    padding: 16px 20px;
    border-radius: 12px;
}

.modal-pnl-label {
    font-size: 11px;
    color: var(--cool-grey);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.modal-pnl-value {
    font-size: 20px;
    font-weight: 700;
    font-family: 'SF Mono', Monaco, monospace;
    color: var(--pure-white);
}

.modal-pnl-value.positive {
    color: var(--emerald-green);
}

.modal-pnl-value.negative {
    color: var(--danger-red);
}

.form-group {
    margin-bottom: 24px;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--pure-white);
    margin-bottom: 12px;
}

.form-textarea {
    width: 100%;
    padding: 16px;
    background: #0c1628;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--pure-white);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    resize: vertical;
    min-height: 100px;
    line-height: 1.5;
}

.form-textarea::placeholder {
    color: var(--cool-grey);
}

.form-textarea:focus {
    outline: none;
    border-color: var(--classic-gold);
}

.rating-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.rating-option {
    padding: 16px 12px;
    background: #0c1628;
    border: 2px solid transparent;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rating-option:hover {
    background: #2a3447;
}

.rating-option.selected {
    border-color: var(--classic-gold);
    background: rgba(211, 181, 116, 0.08);
}

.rating-option.selected.good {
    border-color: var(--classic-gold);
    background: rgba(211, 181, 116, 0.08);
}

.rating-option.selected.neutral {
    border-color: var(--classic-gold);
    background: rgba(211, 181, 116, 0.08);
}

.rating-option.selected.bad {
    border-color: var(--classic-gold);
    background: rgba(211, 181, 116, 0.08);
}

.rating-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.rating-label {
    font-size: 12px;
    color: var(--cool-grey);
    font-weight: 500;
}

.rating-option.selected .rating-label {
    color: var(--pure-white);
}

#noteModal .modal-footer {
    padding: 0 24px 24px;
    border-top: none;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

#noteModal .modal-btn {
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
    border: none;
}

#noteModal .modal-btn.cancel {
    background: #0c1628;
    color: var(--pure-white);
}

#noteModal .modal-btn.cancel:hover {
    background: #2a3447;
}

#noteModal .modal-btn.save {
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    color: var(--deep-navy);
}

#noteModal .modal-btn.save:hover {
    box-shadow: 0 4px 12px rgba(211, 181, 116, 0.4);
}

/* Social Share Modal */
.social-share-modal {
    max-width: 700px !important;
}

.format-toggle {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.format-btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--medium-navy);
    border: 1px solid var(--glass-border);
    color: var(--cool-grey);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
}

.format-btn:hover {
    background: var(--light-navy);
    color: var(--pure-white);
}

.format-btn.active {
    background: var(--classic-gold);
    border-color: var(--classic-gold);
    color: var(--deep-navy);
}

.social-proof-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

/* Social Proof Card */
.social-proof-card {
    position: relative;
    width: 540px;
    height: 540px;
    background: linear-gradient(135deg, #081020 0%, #0f1219 50%, #081020 100%);
    border-radius: 20px;
    border: 1px solid rgba(211, 181, 116, 0.3);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 100px rgba(211, 181, 116, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

.social-proof-card.twitter {
    width: 600px;
    height: 315px;
}

/* Background Effects */
.sp-bg-effect {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sp-bg-gold {
    background: radial-gradient(circle at 50% 0%, rgba(211, 181, 116, 0.12) 0%, transparent 50%);
    opacity: 0.3;
}

.sp-bg-blue {
    background: radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 40%);
    opacity: 0.2;
}

.sp-grid-overlay {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.05;
}

/* Corner Decorations */
.sp-corner {
    position: absolute;
    width: 32px;
    height: 32px;
    opacity: 0.3;
}

.sp-corner-tl {
    top: 16px;
    left: 16px;
    border-left: 2px solid var(--classic-gold);
    border-top: 2px solid var(--classic-gold);
    border-top-left-radius: 8px;
}

.sp-corner-tr {
    top: 16px;
    right: 16px;
    border-right: 2px solid var(--classic-gold);
    border-top: 2px solid var(--classic-gold);
    border-top-right-radius: 8px;
}

.sp-corner-bl {
    bottom: 16px;
    left: 16px;
    border-left: 2px solid var(--classic-gold);
    border-bottom: 2px solid var(--classic-gold);
    border-bottom-left-radius: 8px;
}

.sp-corner-br {
    bottom: 16px;
    right: 16px;
    border-right: 2px solid var(--classic-gold);
    border-bottom: 2px solid var(--classic-gold);
    border-bottom-right-radius: 8px;
}

/* Content */
.sp-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 40px 32px;
}

.social-proof-card.twitter .sp-content {
    padding: 24px 40px;
}

/* Header */
.sp-header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sp-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sp-logo-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    color: var(--deep-navy);
    box-shadow: 0 4px 20px rgba(211, 181, 116, 0.4);
}

.social-proof-card.twitter .sp-logo-icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
}

.sp-logo-text {
    display: flex;
    flex-direction: column;
}

.sp-logo-name {
    font-size: 24px;
    font-weight: 800;
    color: var(--pure-white);
    letter-spacing: -0.5px;
}

.social-proof-card.twitter .sp-logo-name {
    font-size: 20px;
}

.sp-logo-sub {
    font-size: 11px;
    color: var(--classic-gold);
    letter-spacing: 3px;
    font-weight: 500;
}

/* Main Content */
.sp-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.social-proof-card.twitter .sp-main {
    gap: 8px;
}

.sp-month {
    font-size: 14px;
    font-weight: 500;
    color: var(--cool-grey);
    letter-spacing: 3px;
}

.social-proof-card.twitter .sp-month {
    font-size: 12px;
}

.sp-pnl-wrapper {
    position: relative;
}

.sp-pnl-glow {
    position: absolute;
    inset: -20px;
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    filter: blur(40px);
    opacity: 0.5;
}

.sp-pnl {
    position: relative;
    font-size: 60px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 50%, var(--classic-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -2px;
}

.social-proof-card.twitter .sp-pnl {
    font-size: 48px;
}

.sp-pnl-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--pure-white);
    letter-spacing: 2px;
}

.social-proof-card.twitter .sp-pnl-label {
    font-size: 12px;
}

/* Stats Row */
.sp-stats {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 16px;
}

.social-proof-card.twitter .sp-stats {
    gap: 32px;
    margin-top: 8px;
}

.sp-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sp-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--pure-white);
}

.social-proof-card.twitter .sp-stat-value {
    font-size: 24px;
}

.sp-stat-value.green {
    color: var(--emerald-green);
}

.sp-stat-value.gold {
    color: var(--classic-gold);
}

.sp-stat-value.blue {
    color: var(--info-blue);
}

.sp-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--cool-grey);
    letter-spacing: 1px;
}

.social-proof-card.twitter .sp-stat-label {
    font-size: 10px;
}

.sp-divider {
    width: 1px;
    height: 48px;
    background: rgba(211, 181, 116, 0.3);
}

.social-proof-card.twitter .sp-divider {
    height: 40px;
}

/* Footer */
.sp-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sp-username {
    font-size: 18px;
    font-weight: 600;
    color: var(--pure-white);
}

.social-proof-card.twitter .sp-username {
    font-size: 16px;
}

.sp-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(211, 181, 116, 0.12);
    border: 1px solid rgba(211, 181, 116, 0.3);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--classic-gold);
    letter-spacing: 1px;
}

.social-proof-card.twitter .sp-badge {
    font-size: 10px;
}

.share-info {
    text-align: center;
    font-size: 13px;
    color: var(--cool-grey);
}

/* Responsive for Accounts Page */
@media (max-width: 1400px) {
    .live-account-card {
        gap: 20px;
    }

    .live-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 1200px) {
    .accounts-page .stats-row {
        grid-template-columns: 1fr;
    }

    .accounts-grid {
        grid-template-columns: 1fr;
    }

    .live-account-card {
        flex-wrap: wrap;
        gap: 16px;
    }

    .live-actions {
        width: 100%;
        margin-left: 0;
        margin-top: 12px;
    }
}

@media (max-width: 992px) {
    .calendar-header {
        flex-wrap: wrap;
        gap: 16px;
    }

    .calendar-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .social-proof-card {
        width: 100%;
        max-width: 400px;
        height: auto;
        aspect-ratio: 1;
    }

    .social-proof-card.twitter {
        width: 100%;
        max-width: 500px;
        height: auto;
        aspect-ratio: 1200/630;
    }
}

@media (max-width: 768px) {
    .accounts-page {
        padding: 16px;
    }

    .live-account-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .live-section-title {
        width: 100%;
    }

    .live-actions {
        width: 100%;
        flex-direction: column;
    }

    .live-action-btn {
        width: 100%;
        justify-content: center;
    }

    .account-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .calendar-summary {
        grid-template-columns: 1fr;
    }

    .format-toggle {
        flex-direction: column;
    }

    .sp-stats {
        flex-wrap: wrap;
        justify-content: center;
    }

    .sp-divider {
        display: none;
    }
}

/* ============================================
   LANGUAGE DROPDOWN
   ============================================ */

.language-dropdown {
    position: relative;
}

.language-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--medium-navy);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--pure-white);
    font-size: 13px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
}

.language-selector:hover {
    border-color: var(--classic-gold);
    background: var(--light-navy);
}

.language-selector .lang-flag {
    font-size: 16px;
}

.language-selector .lang-name {
    font-weight: 500;
}

.language-selector svg {
    width: 14px;
    height: 14px;
    color: var(--cool-grey);
    transition: transform 0.2s ease;
}

.language-dropdown.open .language-selector svg {
    transform: rotate(180deg);
}

.language-dropdown.open .language-selector {
    border-color: var(--classic-gold);
}

.language-options {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--deep-navy);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
    min-width: 160px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.language-dropdown.open .language-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: var(--cool-grey);
    font-size: 13px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
    text-align: left;
    text-decoration: none;
}

.lang-option:hover {
    background: var(--medium-navy);
    color: var(--pure-white);
}

.lang-option.active {
    background: var(--gold-dim);
    color: var(--classic-gold);
}

.lang-option .lang-flag {
    font-size: 18px;
}

/* ============================================
   PAYOUTS PAGE
   ============================================ */

.payouts-page {
    /* Hérite de .page-content */
}

/* Page Header */
.page-header-payouts {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.page-header-payouts .page-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-header-payouts h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--pure-white);
    letter-spacing: -0.5px;
    margin: 0;
}

.page-header-payouts .page-subtitle {
    font-size: 13px;
    color: var(--cool-grey);
}

.btn-primary-gold {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    border: none;
    border-radius: 10px;
    color: var(--deep-navy);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(211, 181, 116, 0.3);
}

.btn-primary-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(211, 181, 116, 0.4);
}

.btn-primary-gold svg {
    width: 16px;
    height: 16px;
}

/* Stats Grid */
.payouts-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

.payout-stat-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px 24px;
    position: relative;
    overflow: hidden;
}

.payout-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.payout-stat-card.gold::before { background: linear-gradient(90deg, var(--classic-gold), var(--light-gold)); }
.payout-stat-card.green::before { background: var(--emerald-green); }
.payout-stat-card.blue::before { background: var(--info-blue); }
.payout-stat-card.orange::before { background: var(--warning-orange); }

.payout-stat-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.payout-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payout-stat-card.gold .payout-stat-icon { background: var(--gold-dim); color: var(--classic-gold); }
.payout-stat-card.green .payout-stat-icon { background: rgba(39, 174, 96, 0.15); color: var(--emerald-green); }
.payout-stat-card.blue .payout-stat-icon { background: rgba(59, 130, 246, 0.15); color: var(--info-blue); }
.payout-stat-card.orange .payout-stat-icon { background: rgba(245, 158, 11, 0.15); color: var(--warning-orange); }

.payout-stat-icon svg {
    width: 20px;
    height: 20px;
}

.payout-stat-label {
    font-size: 11px;
    color: var(--cool-grey);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.payout-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--pure-white);
    font-family: 'SF Mono', Monaco, monospace;
    margin-bottom: 4px;
}

.payout-stat-subtext {
    font-size: 12px;
    color: var(--cool-grey);
}

/* Section Card */
.payouts-section-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    overflow: hidden;
}

.payouts-section-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--glass-border);
}

.payouts-section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.payouts-section-title-row h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--pure-white);
}

.payouts-results-count {
    font-size: 12px;
    color: var(--cool-grey);
    background: var(--medium-navy);
    padding: 6px 12px;
    border-radius: 20px;
}

/* Filters */
.payouts-filters-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.payouts-filter-select {
    padding: 10px 14px;
    padding-right: 36px;
    background: var(--medium-navy);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--pure-white);
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b0b8c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    min-width: 150px;
}

.payouts-filter-select:focus {
    outline: none;
    border-color: var(--classic-gold);
}

.payouts-filter-select option {
    background: var(--deep-navy);
    color: var(--pure-white);
}

.payouts-search-wrapper {
    position: relative;
    flex: 1;
    min-width: 180px;
}

.payouts-search-wrapper svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--cool-grey);
}

.payouts-search-input {
    width: 100%;
    padding: 10px 14px;
    padding-left: 36px;
    background: var(--medium-navy);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--pure-white);
    font-size: 12px;
    font-family: 'Inter', sans-serif;
}

.payouts-search-input:focus {
    outline: none;
    border-color: var(--classic-gold);
}

.payouts-search-input::placeholder {
    color: var(--cool-grey);
}

/* Payouts Table */
.payouts-table-wrapper {
    overflow-x: auto;
}

.payouts-table {
    width: 100%;
    border-collapse: collapse;
}

.payouts-table thead {
    background: var(--medium-navy);
}

.payouts-table th {
    padding: 14px 20px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--cool-grey);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.payouts-table tbody tr {
    border-bottom: 1px solid var(--glass-border);
    transition: background 0.2s ease;
}

.payouts-table tbody tr:last-child {
    border-bottom: none;
}

.payouts-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.payouts-table td {
    padding: 16px 20px;
    font-size: 13px;
    vertical-align: middle;
}

.payout-date {
    color: var(--pure-white);
    font-size: 13px;
    font-weight: 500;
}

.payout-account {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.payout-account-id {
    font-weight: 600;
    color: var(--pure-white);
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 12px;
}

.payout-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    width: fit-content;
}

.payout-type-badge svg {
    width: 12px;
    height: 12px;
}

.payout-type-badge.account {
    background: rgba(59, 130, 246, 0.15);
    color: var(--info-blue);
}

.payout-type-badge.wallet {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

.payout-amount {
    font-size: 16px;
    font-weight: 700;
    color: var(--emerald-green);
    font-family: 'SF Mono', Monaco, monospace;
}

.payout-amount.cancelled {
    color: var(--cool-grey);
    text-decoration: line-through;
}

/* Status Badges */
.payout-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.payout-status-badge svg {
    width: 14px;
    height: 14px;
}

.payout-status-badge.pending {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning-orange);
}

.payout-status-badge.action-required {
    background: rgba(231, 76, 60, 0.15);
    color: var(--danger-red);
    animation: pulse-status 1.5s infinite;
}

@keyframes pulse-status {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.payout-status-badge.success {
    background: rgba(39, 174, 96, 0.15);
    color: var(--emerald-green);
}

.payout-status-badge.denied {
    background: rgba(231, 76, 60, 0.15);
    color: var(--danger-red);
}

/* Timeline */
.payout-timeline {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
}

.timeline-step {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--light-navy);
}

.timeline-step.completed {
    background: var(--emerald-green);
}

.timeline-step.current {
    background: var(--info-blue);
    animation: pulse-step 1.5s infinite;
}

@keyframes pulse-step {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

.timeline-step.action {
    background: var(--warning-orange);
    animation: pulse-step 1.5s infinite;
}

.timeline-step.denied {
    background: var(--danger-red);
}

.timeline-line {
    width: 24px;
    height: 2px;
    background: var(--light-navy);
}

.timeline-line.completed {
    background: var(--emerald-green);
}

/* Document Required Badge */
.document-required-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 6px;
    width: fit-content;
}

.document-required-badge svg {
    width: 12px;
    height: 12px;
    color: var(--warning-orange);
}

.document-required-badge span {
    font-size: 11px;
    font-weight: 500;
    color: var(--warning-orange);
}

.payout-failure-reason {
    font-size: 11px;
    color: var(--danger-red);
    margin-top: 6px;
    font-style: italic;
}

/* Actions */
.payout-actions {
    display: flex;
    gap: 8px;
}

.payout-action-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: var(--medium-navy);
    color: var(--cool-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.payout-action-btn:hover {
    background: var(--light-navy);
    color: var(--pure-white);
}

.payout-action-btn.download:hover {
    border-color: var(--emerald-green);
    color: var(--emerald-green);
}

.payout-action-btn.view:hover {
    border-color: var(--classic-gold);
    color: var(--classic-gold);
}

.payout-action-btn svg {
    width: 16px;
    height: 16px;
}

.payout-action-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.payout-action-btn:disabled:hover {
    background: var(--medium-navy);
    color: var(--cool-grey);
    border-color: var(--glass-border);
}

/* Pagination */
.payouts-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 20px;
    border-top: 1px solid var(--glass-border);
}

.pagination-buttons {
    display: flex;
    gap: 6px;
}

.page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--cool-grey);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-btn:hover {
    background: var(--medium-navy);
    color: var(--pure-white);
}

.page-btn.active {
    background: var(--gold-dim);
    border-color: var(--classic-gold);
    color: var(--classic-gold);
}

.page-btn svg {
    width: 14px;
    height: 14px;
}

/* Info Banner */
.payouts-info-banner {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 12px;
    padding: 14px 18px;
    margin-top: 24px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.payouts-info-icon {
    width: 32px;
    height: 32px;
    background: rgba(245, 158, 11, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--warning-orange);
    flex-shrink: 0;
}

.payouts-info-icon svg {
    width: 16px;
    height: 16px;
}

.payouts-info-content {
    flex: 1;
}

.payouts-info-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--warning-orange);
    margin-bottom: 4px;
}

.payouts-info-text {
    font-size: 12px;
    color: var(--cool-grey);
    line-height: 1.5;
}

.payouts-info-text strong {
    color: var(--pure-white);
    font-weight: 600;
}

/* Payout Details Modal */
.payout-details-modal {
    max-width: 550px;
}

.payout-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--glass-border);
}

.payout-detail-row:last-child {
    border-bottom: none;
}

.payout-detail-label {
    font-size: 13px;
    color: var(--cool-grey);
}

.payout-detail-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--pure-white);
    font-family: 'SF Mono', Monaco, monospace;
}

.payout-detail-value.amount {
    color: var(--emerald-green);
    font-size: 20px;
}

.payout-modal-timeline {
    margin: 24px 0;
    padding: 20px;
    background: var(--medium-navy);
    border-radius: 14px;
}

.payout-modal-timeline h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--pure-white);
    margin-bottom: 18px;
}

.timeline-vertical {
    display: flex;
    flex-direction: column;
}

.timeline-item {
    display: flex;
    gap: 14px;
    position: relative;
}

.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 26px;
    bottom: -8px;
    width: 2px;
    background: var(--light-navy);
}

.timeline-item.completed:not(:last-child)::before {
    background: var(--emerald-green);
}

.timeline-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--light-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.timeline-dot.completed {
    background: var(--emerald-green);
}

.timeline-dot.current {
    background: var(--info-blue);
}

.timeline-dot svg {
    width: 12px;
    height: 12px;
    color: white;
}

.timeline-content {
    padding-bottom: 22px;
}

.timeline-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--pure-white);
}

.timeline-date {
    font-size: 11px;
    color: var(--cool-grey);
    margin-top: 4px;
}

.payout-modal-actions {
    margin-top: 24px;
}

.payout-modal-actions .modal-btn {
    width: 100%;
}

.payout-modal-actions .modal-btn.primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    border: none;
    border-radius: 12px;
    color: var(--deep-navy);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.payout-modal-actions .modal-btn.primary:hover {
    box-shadow: 0 4px 20px rgba(211, 181, 116, 0.4);
    transform: translateY(-2px);
}

.payout-modal-actions .modal-btn svg {
    width: 18px;
    height: 18px;
}

/* Responsive */
@media (max-width: 1200px) {
    .payouts-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .payouts-page {
        padding: 16px;
    }

    .page-header-payouts {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .payouts-stats-grid {
        grid-template-columns: 1fr;
    }

    .payouts-filters-bar {
        flex-direction: column;
    }

    .payouts-filter-select,
    .payouts-search-wrapper {
        width: 100%;
    }

    .payouts-table th,
    .payouts-table td {
        padding: 12px;
    }
}

/* ============================================
   PROFILE PAGE
   ============================================ */

.profile-page {
    /* Hérite de .page-content */
}

/* Page Header */
.profile-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.profile-page-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-page-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--pure-white);
    letter-spacing: -0.5px;
    margin: 0;
}

.profile-page-subtitle {
    font-size: 13px;
    color: var(--cool-grey);
}

.btn-save-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    border: none;
    border-radius: 10px;
    color: var(--deep-navy);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(211, 181, 116, 0.3);
}

.btn-save-profile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(211, 181, 116, 0.4);
}

.btn-save-profile svg {
    width: 16px;
    height: 16px;
}

/* Profile Layout */
.profile-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;
}

/* Profile Sidebar */
.profile-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Profile Card */
.profile-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    position: relative;
}

.profile-card.verified {
    border: none;
}

.profile-card.verified::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px dashed var(--classic-gold);
    border-radius: 16px;
    pointer-events: none;
}

.profile-card.not-verified {
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.profile-avatar {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 32px;
    color: var(--deep-navy);
    margin: 0 auto 16px;
    box-shadow: 0 8px 24px rgba(211, 181, 116, 0.3);
}

.profile-card.verified .profile-avatar {
    box-shadow: 0 8px 32px rgba(211, 181, 116, 0.5);
}

.profile-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--pure-white);
    margin-bottom: 4px;
}

.profile-email {
    font-size: 13px;
    color: var(--cool-grey);
    margin-bottom: 16px;
}

.profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.profile-badge.verified {
    background: rgba(39, 174, 96, 0.15);
    border: 1px solid rgba(39, 174, 96, 0.3);
    color: var(--emerald-green);
}

.profile-badge.not-verified {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--warning-orange);
}

.profile-badge svg {
    width: 14px;
    height: 14px;
}

/* Trading Card */
.trading-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
}

.trading-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--glass-border);
}

.trading-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trading-card-icon.gold {
    background: var(--gold-dim);
    color: var(--classic-gold);
}

.trading-card-icon.blue {
    background: rgba(59, 130, 246, 0.15);
    color: var(--info-blue);
}

.trading-card-icon svg {
    width: 20px;
    height: 20px;
}

.trading-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--pure-white);
}

.trading-card-subtitle {
    font-size: 11px;
    color: var(--cool-grey);
}

.trading-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trading-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.trading-info-label {
    font-size: 12px;
    color: var(--cool-grey);
}

.trading-info-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--pure-white);
    font-family: 'SF Mono', Monaco, monospace;
}

.password-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

.password-toggle button {
    background: none;
    border: none;
    color: var(--classic-gold);
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    padding: 0;
    font-family: 'Inter', sans-serif;
}

.password-toggle button:hover {
    text-decoration: underline;
}

/* Visibility Toggle */
.visibility-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--medium-navy);
    border-radius: 10px;
    margin-top: 16px;
}

.visibility-label {
    font-size: 12px;
    color: var(--cool-grey);
}

.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--light-navy);
    transition: 0.3s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--cool-grey);
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--classic-gold);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
    background: var(--deep-navy);
}

/* Profile Main */
.profile-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Section Card */
.profile-section-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    overflow: hidden;
}

.profile-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--glass-border);
    background: var(--medium-navy);
    cursor: pointer;
    transition: all 0.2s ease;
}

.profile-section-header:hover {
    background: var(--light-navy);
}

.profile-section-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-section-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-section-icon {
    width: 36px;
    height: 36px;
    background: var(--gold-dim);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--classic-gold);
}

.profile-section-icon svg {
    width: 18px;
    height: 18px;
}

.profile-section-title h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--pure-white);
    margin: 0;
}

.profile-section-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.profile-section-status.complete {
    background: rgba(39, 174, 96, 0.15);
    color: var(--emerald-green);
}

.profile-section-status.incomplete {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning-orange);
}

.profile-section-status svg {
    width: 12px;
    height: 12px;
}

.profile-section-chevron {
    color: var(--classic-gold);
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-section-chevron svg {
    width: 20px;
    height: 20px;
}

.profile-section-card.collapsed .profile-section-chevron {
    transform: rotate(-90deg);
}

.profile-section-card.collapsed .profile-section-content {
    display: none;
}

.profile-section-card.collapsed .profile-section-header {
    border-bottom: none;
}

.profile-section-content {
    padding: 24px;
}

/* Form Styles */
.profile-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.profile-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-form-group.full-width {
    grid-column: span 2;
}

.profile-form-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--cool-grey);
    display: flex;
    align-items: center;
    gap: 4px;
}

.profile-form-label .required {
    color: var(--danger-red);
}

.profile-form-input {
    padding: 12px 16px;
    background: var(--medium-navy);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--pure-white);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
}

.profile-form-input:focus {
    outline: none;
    border-color: var(--classic-gold);
}

.profile-form-input::placeholder {
    color: var(--cool-grey);
}

.profile-form-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.profile-form-input.readonly {
    background: rgba(16, 28, 50, 0.5);
    cursor: default;
}

select.profile-form-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b0b8c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

select.profile-form-input option {
    background: var(--deep-navy);
    color: var(--pure-white);
}

.profile-form-hint {
    font-size: 11px;
    color: var(--cool-grey);
    margin-top: 4px;
}

.input-with-action {
    display: flex;
    gap: 10px;
}

.input-with-action .profile-form-input {
    flex: 1;
}

.btn-action {
    padding: 12px 16px;
    background: var(--medium-navy);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--classic-gold);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-action:hover {
    background: var(--light-navy);
    border-color: var(--classic-gold);
}

/* Accordion */
.profile-accordion {
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 20px;
}

.profile-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--medium-navy);
    cursor: pointer;
    transition: all 0.2s ease;
}

.profile-accordion-header:hover {
    background: var(--light-navy);
}

.profile-accordion-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-accordion-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-accordion-icon {
    width: 32px;
    height: 32px;
    background: var(--gold-dim);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--classic-gold);
}

.profile-accordion-icon svg {
    width: 16px;
    height: 16px;
}

.profile-accordion-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--pure-white);
}

.profile-accordion-subtitle {
    font-size: 11px;
    color: var(--cool-grey);
}

.profile-accordion-chevron {
    color: var(--classic-gold);
    transition: transform 0.3s ease;
}

.profile-accordion-chevron svg {
    width: 18px;
    height: 18px;
}

.profile-accordion.open .profile-accordion-chevron {
    transform: rotate(180deg);
}

.profile-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.profile-accordion.open .profile-accordion-content {
    max-height: 500px;
}

.profile-accordion-body {
    padding: 20px;
    border-top: 1px solid var(--glass-border);
}

.profile-accordion.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.profile-accordion.disabled .profile-accordion-header {
    cursor: not-allowed;
}

.profile-accordion-lock {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--cool-grey);
    margin-right: 12px;
}

.profile-accordion-lock svg {
    width: 14px;
    height: 14px;
}

/* RISE ID Section */
.rise-id-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--medium-navy);
    border-radius: 10px;
    margin-top: 20px;
}

.rise-id-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rise-id-label {
    font-size: 12px;
    color: var(--cool-grey);
}

.rise-id-value {
    font-size: 11px;
    font-family: 'SF Mono', Monaco, monospace;
    color: var(--pure-white);
    background: var(--light-navy);
    padding: 6px 12px;
    border-radius: 6px;
}

.rise-id-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--classic-gold);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
}

.rise-id-btn:hover {
    background: var(--gold-dim);
    border-color: var(--classic-gold);
}

.rise-id-btn svg {
    width: 12px;
    height: 12px;
}

/* Documents Grid */
.documents-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.document-item {
    background: var(--medium-navy);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 20px;
}

.document-item.full-width {
    grid-column: span 2;
}

.document-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.document-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--pure-white);
    margin-bottom: 4px;
}

.document-subtitle {
    font-size: 11px;
    color: var(--cool-grey);
}

.document-status {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
}

.document-status.verified {
    background: rgba(39, 174, 96, 0.15);
    color: var(--emerald-green);
}

.document-status.pending {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning-orange);
}

.document-status.missing {
    background: rgba(231, 76, 60, 0.15);
    color: var(--danger-red);
}

.document-status svg {
    width: 10px;
    height: 10px;
}

.document-requirements {
    font-size: 11px;
    color: var(--cool-grey);
    margin-bottom: 16px;
    line-height: 1.5;
}

.document-requirements ul {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
}

.document-requirements li {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.document-requirements li::before {
    content: "•";
    color: var(--classic-gold);
}

.document-requirements .not-accepted {
    color: var(--warning-orange);
    display: block;
    margin-top: 8px;
}

.document-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(39, 174, 96, 0.1);
    border: 1px solid rgba(39, 174, 96, 0.2);
    border-radius: 8px;
}

.document-file-icon {
    width: 36px;
    height: 36px;
    background: rgba(39, 174, 96, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--emerald-green);
}

.document-file-icon svg {
    width: 18px;
    height: 18px;
}

.document-file-info {
    flex: 1;
}

.document-file-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--pure-white);
    margin-bottom: 2px;
}

.document-file-size {
    font-size: 10px;
    color: var(--cool-grey);
}

.document-file-actions {
    display: flex;
    gap: 8px;
}

.document-file-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--cool-grey);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.document-file-btn:hover {
    background: var(--light-navy);
    color: var(--pure-white);
}

.document-file-btn.delete:hover {
    color: var(--danger-red);
}

.document-file-btn svg {
    width: 14px;
    height: 14px;
}

.document-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    border: 2px dashed var(--glass-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.document-upload:hover {
    border-color: var(--classic-gold);
    background: var(--gold-dim);
}

.document-upload-icon {
    width: 40px;
    height: 40px;
    background: var(--gold-dim);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--classic-gold);
    margin-bottom: 12px;
}

.document-upload-icon svg {
    width: 20px;
    height: 20px;
}

.document-upload-text {
    font-size: 12px;
    font-weight: 500;
    color: var(--pure-white);
    margin-bottom: 4px;
}

.document-upload-hint {
    font-size: 10px;
    color: var(--cool-grey);
}

/* Responsive */
@media (max-width: 1200px) {
    .profile-layout {
        grid-template-columns: 1fr;
    }

    .profile-sidebar {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

@media (max-width: 992px) {
    .profile-sidebar {
        grid-template-columns: 1fr;
    }

    .documents-grid {
        grid-template-columns: 1fr;
    }

    .document-item.full-width {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .profile-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .profile-form-grid {
        grid-template-columns: 1fr;
    }

    .profile-form-group.full-width {
        grid-column: span 1;
    }

    .rise-id-section {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .rise-id-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .rise-id-value {
        word-break: break-all;
        font-size: 10px;
    }
}

/* ============================================
   SUBSCRIPTION PAGE
   ============================================ */

.subscription-page {
    max-width: 1200px;
    margin: 0 auto;
}

/* Page Header */
.subscription-header {
    text-align: center;
    margin-bottom: 40px;
}

.subscription-header h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--pure-white);
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

.subscription-subtitle {
    font-size: 14px;
    color: var(--cool-grey);
}

/* Stepper */
.subscription-stepper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin-bottom: 48px;
}

.sub-step {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sub-step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    background: var(--medium-navy);
    border: 2px solid var(--glass-border);
    color: var(--cool-grey);
    transition: all 0.3s ease;
}

.sub-step.active .sub-step-number {
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    border-color: var(--classic-gold);
    color: var(--deep-navy);
    box-shadow: 0 4px 16px rgba(211, 181, 116, 0.4);
}

.sub-step.completed .sub-step-number {
    background: var(--emerald-green);
    border-color: var(--emerald-green);
    color: white;
}

.sub-step-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--cool-grey);
    display: none;
}

.sub-step.active .sub-step-label {
    color: var(--pure-white);
}

.sub-step-line {
    width: 80px;
    height: 2px;
    background: var(--glass-border);
    margin: 0 8px;
}

.sub-step-line.completed {
    background: var(--emerald-green);
}

@media (min-width: 768px) {
    .sub-step-label {
        display: block;
    }
}

/* Step Content */
.sub-step-content {
    display: none;
}

.sub-step-content.active {
    display: block;
    animation: fadeInSub 0.4s ease;
}

@keyframes fadeInSub {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Account Type Selection */
.account-type-selection {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.account-type-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 2px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.account-type-card:hover {
    border-color: var(--classic-gold);
}

.account-type-card.selected {
    border-color: var(--classic-gold);
    background: linear-gradient(135deg, var(--gold-dim) 0%, transparent 100%);
}

.account-type-card.recommended.selected {
    box-shadow: 0 0 30px rgba(211, 181, 116, 0.2);
}

.recommended-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: var(--deep-navy);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(211, 181, 116, 0.4);
}

.recommended-badge svg {
    width: 12px;
    height: 12px;
}

.account-type-radio {
    position: absolute;
    top: 20px;
    right: 20px;
}

.account-type-radio input {
    display: none;
}

.radio-circle {
    width: 22px;
    height: 22px;
    border: 2px solid var(--glass-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.account-type-card.selected .radio-circle {
    border-color: var(--classic-gold);
}

.radio-circle::after {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--classic-gold);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.account-type-card.selected .radio-circle::after {
    opacity: 1;
}

.account-type-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.account-type-card.selected .account-type-icon {
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    color: var(--deep-navy);
    box-shadow: 0 8px 20px rgba(211, 181, 116, 0.3);
}

.account-type-icon {
    background: var(--medium-navy);
    border: 1px solid var(--glass-border);
    color: var(--cool-grey);
}

.account-type-icon svg {
    width: 28px;
    height: 28px;
}

.account-type-info h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--pure-white);
    margin-bottom: 4px;
}

.account-type-desc {
    font-size: 13px;
    color: var(--cool-grey);
    margin-bottom: 16px;
}

.account-type-benefits {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--pure-white);
}

.benefit-item svg {
    width: 16px;
    height: 16px;
    color: var(--emerald-green);
    flex-shrink: 0;
}

.benefit-item.muted {
    color: var(--cool-grey);
}

.benefit-item.muted svg {
    color: var(--warning-orange);
}

/* Product Categories Tabs */
.product-categories {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.am-form button.category-tab {
    padding: 12px 24px;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: var(--medium-navy);
    color: var(--cool-grey);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.am-form button.category-tab:hover {
    border-color: var(--classic-gold);
    color: var(--pure-white);
}

.am-form button.category-tab.active {
    background: var(--gold-dim);
    border-color: var(--classic-gold);
    color: var(--classic-gold);
}

.am-form button.category-tab.addon-tab {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, transparent 100%);
    border-color: rgba(168, 85, 247, 0.3);
    color: #a855f7;
}

.am-form button.category-tab.addon-tab:hover,
.am-form button.category-tab.addon-tab.active {
    background: rgba(168, 85, 247, 0.15);
    border-color: #a855f7;
    color: #a855f7;
}

/* Products Container */
.products-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 32px!important;
    padding: 0!important;
}

.product-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-label {
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-label-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-label-badge.express_to_live {
    background: rgba(59, 130, 246, 0.15);
    color: var(--info-blue);
}

.section-label-badge.fundamental {
    background: rgba(39, 174, 96, 0.15);
    color: var(--emerald-green);
}

.section-label-badge.premium {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.section-label-badge.challenge {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning-orange);
}

.products-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.platform-header {
    margin: 1em 0;
    padding: .5em 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    border: 2px solid var(--glass-border);
    color: var(--classic-gold);;
    background: var(--gold-dim);
}

.product-section.express_to_live .products-row {
    grid-template-columns: repeat(2, 1fr);
}

    /* Product Card */
.product-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 2px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.product-card:hover {
    border-color: var(--classic-gold);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.product-card.selected {
    border-color: var(--classic-gold);
    background: linear-gradient(135deg, var(--gold-dim) 0%, transparent 100%);
}

.product-card.selected::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--classic-gold) 0%, var(--light-gold) 100%);
}

.product-card-check {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.product-card.selected .product-card-check {
    background: var(--classic-gold);
    border-color: var(--classic-gold);
    color: var(--deep-navy);
}

.product-card-check svg {
    width: 14px;
    height: 14px;
    opacity: 0;
}

.product-card.selected .product-card-check svg {
    opacity: 1;
}

.product-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.product-badge.static {
    background: rgba(59, 130, 246, 0.15);
    color: var(--info-blue);
}

.product-badge.fundamental {
    background: rgba(39, 174, 96, 0.15);
    color: var(--emerald-green);
}

.product-badge.swing {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.product-badge.popular {
    background: rgba(211, 181, 116, 0.12);
    color: var(--classic-gold);
}

.product-badge.addon-badge {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.product-badge.addon-badge.second-login {
    background: rgba(59, 130, 246, 0.15);
    color: var(--info-blue);
}

.product-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--pure-white);
    margin-bottom: 4px;
}

.product-name-small {
    font-size: 16px;
    font-weight: 700;
    color: var(--pure-white);
    margin-bottom: 4px;
}

.product-type {
    font-size: 12px;
    color: var(--cool-grey);
    margin-bottom: 16px;
}

.product-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 6px;
}

.product-price .amount {
    font-size: 32px;
    font-weight: 700;
    color: var(--classic-gold);
}

.addon-card .product-price .amount {
    font-size: 24px;
}

.product-price .period {
    font-size: 13px;
    color: var(--cool-grey);
}

.product-price .period.one-time {
    color: var(--emerald-green);
    font-weight: 600;
}

.product-tax-note {
    font-size: 11px;
    color: var(--cool-grey);
    opacity: .7;
    font-style: italic;
    margin-bottom: 20px;
}

.product-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--cool-grey);
}

.product-feature svg {
    width: 16px;
    height: 16px;
    color: var(--emerald-green);
    flex-shrink: 0;
}

.product-feature.highlight {
    color: var(--classic-gold);
    font-weight: 500;
}

.product-feature.highlight svg {
    color: var(--classic-gold);
}

/* Add-ons Grid */
.addons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.addon-card {
    padding: 20px;
}

/* Step Navigation */
.sub-step-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--glass-border);
}

.btn-sub-back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--cool-grey);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
}

.btn-sub-back:hover {
    border-color: var(--classic-gold);
    color: var(--pure-white);
}

.btn-sub-back svg {
    width: 18px;
    height: 18px;
}

.btn-sub-next {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    border: none;
    border-radius: 10px;
    color: var(--deep-navy);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(211, 181, 116, 0.3);
}

.btn-sub-next:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(211, 181, 116, 0.4);
}

.btn-sub-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-sub-next svg {
    width: 18px;
    height: 18px;
}

/* Form Card */
.sub-form-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 32px;
    max-width: 600px;
    margin: 0 auto;
}

.sub-form-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--pure-white);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sub-form-card h3 svg {
    width: 24px;
    height: 24px;
    color: var(--classic-gold);
}

.sub-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.sub-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sub-form-group.full-width {
    grid-column: span 2;
}

.sub-form-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--cool-grey);
    display: flex;
    align-items: center;
    gap: 4px;
}

.sub-form-label .required {
    color: var(--danger-red);
}

.sub-form-input {
    padding: 12px 16px;
    background: var(--medium-navy);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--pure-white);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
}

.sub-form-input:focus {
    outline: none;
    border-color: var(--classic-gold);
}

.sub-form-input::placeholder {
    color: var(--cool-grey);
}

/* Terms Container */
.terms-container {
    max-width: 800px;
    margin: 0 auto;
}

.terms-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: var(--medium-navy);
    border-radius: 12px;
}

.terms-progress-text {
    font-size: 13px;
    color: var(--cool-grey);
}

.terms-progress-text strong {
    color: var(--classic-gold);
}

.terms-progress-bar {
    width: 200px;
    height: 6px;
    background: var(--light-navy);
    border-radius: 3px;
    overflow: hidden;
}

.terms-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.terms-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.term-item {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.term-item.accepted {
    border-color: var(--emerald-green);
}

.term-item.current {
    border-color: var(--classic-gold);
}

.term-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    height: 60px;
    min-height: 60px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.term-header:hover {
    background: var(--medium-navy);
}

.term-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.term-status {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--glass-border);
    transition: all 0.2s ease;
}

.term-item.accepted .term-status {
    background: var(--emerald-green);
    border-color: var(--emerald-green);
    color: white;
}

.term-status svg {
    width: 14px;
    height: 14px;
}

.term-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--pure-white);
}

.term-chevron {
    color: var(--classic-gold);
    transition: transform 0.3s ease;
}

.term-chevron svg {
    width: 20px;
    height: 20px;
}

.term-item.open .term-chevron {
    transform: rotate(180deg);
}

.term-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.term-item.open .term-content {
    max-height: 350px;
}

.term-body {
    padding: 0 20px 20px;
    display: flex;
    flex-direction: column;
}

.term-text {
    font-size: 12px;
    color: var(--cool-grey);
    line-height: 1.7;
    height: 180px;
    min-height: 180px;
    max-height: 180px;
    overflow-y: auto;
    padding: 16px;
    background: var(--medium-navy);
    border-radius: 8px;
    margin-bottom: 16px;
}

.term-text::-webkit-scrollbar {
    width: 6px;
}

.term-text::-webkit-scrollbar-track {
    background: var(--light-navy);
    border-radius: 3px;
}

.term-text::-webkit-scrollbar-thumb {
    background: var(--classic-gold);
    border-radius: 3px;
}

.term-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.term-checkbox input {
    display: none;
}

.term-checkbox-box {
    width: 22px;
    height: 22px;
    border: 2px solid var(--glass-border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.term-checkbox input:checked + .term-checkbox-box {
    background: var(--classic-gold);
    border-color: var(--classic-gold);
}

.term-checkbox-box svg {
    width: 14px;
    height: 14px;
    color: var(--deep-navy);
    opacity: 0;
}

.term-checkbox input:checked + .term-checkbox-box svg {
    opacity: 1;
}

.term-checkbox-label {
    font-size: 13px;
    color: var(--pure-white);
}

.term-checkbox-label .required {
    color: var(--danger-red);
}

/* Summary Container */
.summary-container {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto;
}

.summary-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
}

.summary-card h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--pure-white);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.summary-card h3 svg {
    width: 20px;
    height: 20px;
    color: var(--classic-gold);
}

.summary-product {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--medium-navy);
    border-radius: 12px;
    margin-bottom: 20px;
}

.summary-product-icon {
    width: 56px;
    height: 56px;
    background: var(--gold-dim);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--classic-gold);
}

.summary-product-icon svg {
    width: 28px;
    height: 28px;
}

.summary-product-info h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--pure-white);
    margin-bottom: 4px;
}

.summary-product-info span {
    font-size: 12px;
    color: var(--cool-grey);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--glass-border);
}

.summary-row:last-of-type {
    border-bottom: none;
}

.summary-row-label {
    font-size: 13px;
    color: var(--cool-grey);
}

.summary-row-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--pure-white);
}

.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: var(--gold-dim);
    border-radius: 12px;
    margin-top: 20px;
}

.summary-total-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--pure-white);
}

.summary-total-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--classic-gold);
}

.summary-total-prices {
    display: flex;
    align-items: center;
    gap: 12px;
}

.original-price {
    font-size: 16px;
    color: var(--cool-grey);
    text-decoration: line-through;
}

/* Promo Section */
.promo-section {
    margin: 20px 0;
    padding-top: 20px;
    border-top: 1px solid var(--glass-border);
}

.promo-input-wrapper {
    display: flex;
    gap: 10px;
}

.promo-input {
    flex: 1;
    padding: 12px 16px;
    background: var(--medium-navy);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--pure-white);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
}

.promo-input:focus {
    outline: none;
    border-color: var(--classic-gold);
}

.promo-input::placeholder {
    color: var(--cool-grey);
}

.promo-btn {
    padding: 12px 20px;
    background: var(--medium-navy);
    border: 1px solid var(--classic-gold);
    border-radius: 10px;
    color: var(--classic-gold);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
}

.promo-btn:hover {
    background: var(--gold-dim);
}

.promo-message {
    margin-top: 10px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.promo-message.success {
    color: var(--emerald-green);
}

.promo-message.error {
    color: var(--danger-red);
}

.price-breakdown {
    margin-top: 16px;
}

.discount-row {
    background: rgba(39, 174, 96, 0.1);
    margin: 0 -20px;
    padding: 12px 20px !important;
}

.discount-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--emerald-green) !important;
}

.discount-label svg {
    width: 14px;
    height: 14px;
}

.discount-code {
    background: rgba(39, 174, 96, 0.2);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.discount-value {
    color: var(--emerald-green) !important;
}

/* Payment Methods */
.payment-methods {
    margin-top: 24px;
}

.payment-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.payment-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--medium-navy);
    border: 2px solid var(--glass-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.payment-option:hover {
    border-color: var(--classic-gold);
}

.payment-option.selected {
    border-color: var(--classic-gold);
    background: var(--gold-dim);
}

.payment-option input {
    display: none;
}

.payment-radio {
    width: 20px;
    height: 20px;
    border: 2px solid var(--glass-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.payment-option.selected .payment-radio {
    border-color: var(--classic-gold);
}

.payment-radio::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--classic-gold);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.payment-option.selected .payment-radio::after {
    opacity: 1;
}

.payment-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.payment-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--pure-white);
}

.payment-desc {
    font-size: 11px;
    color: var(--cool-grey);
}

.wallet-balance {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wallet-amount {
    color: var(--emerald-green);
    font-weight: 600;
}

.payment-icons {
    color: var(--cool-grey);
}

.payment-icons.wallet-icon {
    color: var(--classic-gold);
}

.payment-icons svg {
    width: 20px;
    height: 20px;
}

.wallet-warning {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 10px;
    margin-top: 16px;
    font-size: 12px;
    color: var(--warning-orange);
}

.wallet-warning svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-pay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    border: none;
    border-radius: 12px;
    color: var(--deep-navy);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(211, 181, 116, 0.3);
    margin-top: 24px;
}

.btn-pay:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(211, 181, 116, 0.4);
}

.btn-pay svg {
    width: 20px;
    height: 20px;
}

.secure-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 12px;
    color: var(--cool-grey);
}

.secure-badge svg {
    width: 14px;
    height: 14px;
    color: var(--emerald-green);
}

/* Payment Modal */
.payment-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 14, 23, 0.95);
    backdrop-filter: blur(20px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.payment-modal.active {
    display: flex;
    opacity: 1;
}

.payment-modal-content {
    max-width: 500px;
    width: 90%;
    text-align: center;
    padding: 48px;
}

.payment-state {
    animation: fadeInUp 0.5s ease;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Payment Loader */
.payment-loader {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 32px;
}

.loader-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-radius: 50%;
}

.loader-ring:nth-child(1) {
    border-top-color: var(--classic-gold);
    animation: spin 1.5s linear infinite;
}

.loader-ring:nth-child(2) {
    border-right-color: var(--light-gold);
    animation: spin 2s linear infinite reverse;
}

.loader-ring:nth-child(3) {
    border-bottom-color: rgba(211, 181, 116, 0.3);
    animation: spin 2.5s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loader-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: var(--gold-dim);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse 1.5s ease-in-out infinite;
}

.loader-icon svg {
    width: 24px;
    height: 24px;
    color: var(--classic-gold);
}

@keyframes pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

.payment-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--pure-white);
    margin-bottom: 8px;
}

.payment-title.success {
    color: var(--emerald-green);
}

.payment-subtitle {
    font-size: 14px;
    color: var(--cool-grey);
    margin-bottom: 32px;
}

/* Creation Steps */
.creation-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left;
    max-width: 280px;
    margin: 0 auto;
}

.creation-step {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    color: var(--cool-grey);
    opacity: 0.5;
    transition: all 0.3s ease;
}

.creation-step.active {
    opacity: 1;
    color: var(--pure-white);
}

.creation-step.completed {
    opacity: 1;
    color: var(--emerald-green);
}

.step-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--glass-border);
    position: relative;
    flex-shrink: 0;
}

.creation-step.active .step-dot {
    background: var(--classic-gold);
    box-shadow: 0 0 12px rgba(211, 181, 116, 0.5);
    animation: dotPulse 1s ease-in-out infinite;
}

.creation-step.completed .step-dot {
    background: var(--emerald-green);
}

.creation-step.completed .step-dot::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8px;
    color: var(--deep-navy);
    font-weight: 700;
}

@keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(211, 181, 116, 0.5); }
    50% { box-shadow: 0 0 0 8px rgba(211, 181, 116, 0); }
}

/* Success Animation */
.success-animation {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 32px;
}

.success-circle {
    width: 100%;
    height: 100%;
}

.checkmark {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    stroke-width: 2;
    stroke: var(--emerald-green);
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px var(--emerald-green);
    animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
}

.checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: var(--emerald-green);
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke-width: 3;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% { stroke-dashoffset: 0; }
}

@keyframes scale {
    0%, 100% { transform: none; }
    50% { transform: scale3d(1.1, 1.1, 1); }
}

@keyframes fill {
    100% { box-shadow: inset 0px 0px 0px 60px rgba(39, 174, 96, 0.1); }
}

/* Success Particles */
.success-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
}

.success-particles span {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--classic-gold);
    border-radius: 50%;
    animation: particles 1s ease-out forwards;
}

.success-particles span:nth-child(1) { animation-delay: 0.6s; --x: -60px; --y: -60px; }
.success-particles span:nth-child(2) { animation-delay: 0.65s; --x: 60px; --y: -60px; }
.success-particles span:nth-child(3) { animation-delay: 0.7s; --x: -70px; --y: 20px; }
.success-particles span:nth-child(4) { animation-delay: 0.75s; --x: 70px; --y: 20px; }
.success-particles span:nth-child(5) { animation-delay: 0.8s; --x: -40px; --y: -70px; }
.success-particles span:nth-child(6) { animation-delay: 0.85s; --x: 40px; --y: -70px; }
.success-particles span:nth-child(7) { animation-delay: 0.9s; --x: -50px; --y: 50px; }
.success-particles span:nth-child(8) { animation-delay: 0.95s; --x: 50px; --y: 50px; }

@keyframes particles {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0); }
}

/* Success Info Cards */
.success-info-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    text-align: left;
}

.info-item {
    display: flex;
    gap: 16px;
    padding: 12px 0;
}

.info-item:not(:last-child) {
    border-bottom: 1px solid var(--glass-border);
}

.info-item svg {
    width: 24px;
    height: 24px;
    color: var(--classic-gold);
    flex-shrink: 0;
    margin-top: 2px;
}

.info-item h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--pure-white);
    margin-bottom: 4px;
}

.info-item p {
    font-size: 13px;
    color: var(--cool-grey);
}

/* Support Card */
.support-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 28px;
    text-align: left;
}

.support-card > svg {
    width: 24px;
    height: 24px;
    color: var(--info-blue);
    flex-shrink: 0;
}

.support-card p {
    font-size: 12px;
    color: var(--cool-grey);
    margin-bottom: 4px;
}

.support-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--info-blue);
    text-decoration: none;
    transition: all 0.2s ease;
}

.support-link:hover {
    color: var(--pure-white);
}

.support-link svg {
    width: 14px;
    height: 14px;
}

/* Success Actions */
.success-actions {
    display: flex;
    gap: 12px;
}

.btn-dashboard {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    border: none;
    border-radius: 12px;
    color: var(--deep-navy);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-dashboard:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(211, 181, 116, 0.3);
}

.btn-dashboard svg {
    width: 18px;
    height: 18px;
}

.btn-profile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--pure-white);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-profile:hover {
    border-color: var(--classic-gold);
    background: var(--gold-dim);
}

.btn-profile svg {
    width: 18px;
    height: 18px;
}

/* Responsive */
@media (max-width: 1024px) {
    .products-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .summary-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .account-type-selection {
        grid-template-columns: 1fr;
    }

    .products-row,
    .products-row.single {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    .sub-form-grid {
        grid-template-columns: 1fr;
    }

    .sub-form-group.full-width {
        grid-column: span 1;
    }

    .success-actions {
        flex-direction: column;
    }

    .payment-modal-content {
        padding: 24px;
    }

    .terms-progress {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .terms-progress-bar {
        width: 100%;
    }
}

/* ============================================
   AFFILIATE PAGE STYLES
   ============================================ */

.affiliate-page {
    /* Hérite de .page-content */
}

/* Page Header */
.affiliate-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.affiliate-header-left h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--pure-white);
    letter-spacing: -0.5px;
    margin: 0 0 4px 0;
}

.affiliate-subtitle {
    font-size: 14px;
    color: var(--cool-grey);
    margin: 0;
}

.affiliate-status-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(39, 174, 96, 0.15);
    border: 1px solid rgba(39, 174, 96, 0.3);
    border-radius: 20px;
}

.affiliate-status-badge .status-dot {
    width: 8px;
    height: 8px;
    background: var(--emerald-green);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.affiliate-status-badge span {
    font-size: 13px;
    color: var(--emerald-green);
    font-weight: 500;
}

/* Tabs Navigation */
.affiliate-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    padding: 4px;
    background: var(--glass-bg);
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    width: fit-content;
}

.affiliate-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--cool-grey);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.affiliate-tab:hover {
    color: var(--pure-white);
    background: var(--medium-navy);
}

.affiliate-tab.active {
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    color: var(--deep-navy);
}

.affiliate-tab svg {
    width: 16px;
    height: 16px;
}

/* Tab Content */
.affiliate-tab-content {
    display: none;
}

.affiliate-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Progression Card */
.affiliate-progression-card {
    padding: 24px;
    margin-bottom: 24px;
}

.progression-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.progression-title h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--pure-white);
    margin: 0 0 4px 0;
}

.progression-subtitle {
    font-size: 12px;
    color: var(--cool-grey);
}

.progression-amount {
    text-align: right;
}

.amount-current {
    font-size: 28px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--classic-gold), var(--light-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.amount-separator {
    font-size: 20px;
    color: var(--cool-grey);
    margin: 0 4px;
}

.amount-goal {
    font-size: 20px;
    color: var(--cool-grey);
    font-weight: 500;
}

.progression-bar-container {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.progression-bar {
    flex: 1;
    height: 12px;
    background: var(--light-navy);
    border-radius: 6px;
    overflow: hidden;
}

.progression-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--classic-gold), var(--light-gold));
    border-radius: 6px;
    transition: width 1s ease;
}

.progression-percentage {
    font-size: 14px;
    font-weight: 600;
    color: var(--classic-gold);
    min-width: 50px;
    text-align: right;
}

.progression-milestones {
    display: flex;
    justify-content: space-between;
}

.milestone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--cool-grey);
}

.milestone.achieved {
    color: var(--emerald-green);
}

.milestone.final {
    color: var(--classic-gold);
}

.milestone-icon svg {
    width: 14px;
    height: 14px;
}

/* Stats Grid */
.affiliate-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.affiliate-stat-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon.blue {
    background: rgba(59, 130, 246, 0.15);
    color: var(--info-blue);
}

.stat-icon.green {
    background: rgba(39, 174, 96, 0.15);
    color: var(--emerald-green);
}

.stat-icon.gold {
    background: var(--gold-dim);
    color: var(--classic-gold);
}

.stat-icon.purple {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--pure-white);
}

.stat-label {
    font-size: 12px;
    color: var(--cool-grey);
}

/* Main Grid Layout */
.affiliate-main-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
}

.affiliate-main-left,
.affiliate-main-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Wallet Card */
.affiliate-wallet-card {
    background: linear-gradient(135deg, var(--medium-navy) 0%, var(--light-navy) 100%);
    border: 1px solid var(--classic-gold);
    border-radius: 16px;
    padding: 24px;
    position: relative;
    overflow: hidden;
}

.affiliate-wallet-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--classic-gold), var(--light-gold));
}

.wallet-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.wallet-card-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wallet-icon-wrapper {
    width: 48px;
    height: 48px;
    background: var(--gold-dim);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--classic-gold);
}

.wallet-card-title h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--pure-white);
    margin: 0;
}

.wallet-card-title span {
    font-size: 12px;
    color: var(--cool-grey);
}

.wallet-card-balance {
    text-align: right;
}

.balance-amount {
    font-size: 32px;
    font-weight: 700;
    color: var(--classic-gold);
    display: block;
}

.balance-pending {
    font-size: 12px;
    color: var(--emerald-green);
}

.wallet-card-actions {
    display: flex;
    gap: 12px;
}

.wallet-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wallet-action-btn.primary {
    background: linear-gradient(135deg, var(--classic-gold), var(--light-gold));
    border: none;
    color: var(--deep-navy);
}

.wallet-action-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(211, 181, 116, 0.4);
}

.wallet-action-btn.secondary {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--pure-white);
}

.wallet-action-btn.secondary:hover {
    border-color: var(--classic-gold);
    color: var(--classic-gold);
}

/* Link Card */
.affiliate-link-card {
    padding: 24px;
}

.affiliate-link-card h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 16px 0;
}

.affiliate-link-wrapper {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.affiliate-link-input {
    flex: 1;
    padding: 12px 16px;
    background: var(--medium-navy);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--pure-white);
    font-size: 13px;
}

.btn-copy {
    display: flex;
    align-items: center;
    gap: 6px;
    /*padding: 12px 20px;*/
    background: var(--gold-dim);
    /*border: 1px solid var(--classic-gold);*/
    /*border-radius: 8px;*/
    color: var(--classic-gold);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 4px 6px;
    border-radius: 6px;
}

.btn-copy:hover {
    background: var(--classic-gold);
    color: var(--deep-navy);
}

.affiliate-code-display {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--medium-navy);
    border-radius: 8px;
}

.code-label {
    font-size: 12px;
    color: var(--cool-grey);
}

.code-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--gold-dim);
    border: 1px dashed var(--classic-gold);
    border-radius: 6px;
}

.code-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--classic-gold);
    letter-spacing: 1px;
}

.btn-copy-small {
    background: transparent;
    border: none;
    color: var(--classic-gold);
    cursor: pointer;
    padding: 2px;
}

.code-uses {
    font-size: 12px;
    color: var(--cool-grey);
    margin-left: auto;
}

/* Commission Examples */
.commission-examples-card {
    padding: 24px;
}

.commission-examples-card h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.commission-intro {
    font-size: 12px;
    color: var(--cool-grey);
    margin: 0 0 20px 0;
}

.commission-examples-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.commission-example-item {
    background: var(--medium-navy);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 16px;
}

.example-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.example-type {
    font-size: 11px;
    font-weight: 600;
    color: var(--classic-gold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.example-size {
    font-size: 11px;
    padding: 4px 8px;
    background: var(--gold-dim);
    border-radius: 4px;
    color: var(--classic-gold);
}

.example-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--pure-white);
    margin-bottom: 8px;
}

.example-calculation {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--cool-grey);
    margin-bottom: 12px;
}

.calc-rate {
    color: var(--info-blue);
}

.calc-arrow {
    color: var(--cool-grey);
}

.calc-result {
    color: var(--emerald-green);
    font-weight: 600;
}

.example-commission-badge {
    padding: 8px 12px;
    background: rgba(39, 174, 96, 0.1);
    border-radius: 6px;
    font-size: 12px;
    color: var(--emerald-green);
    text-align: center;
}

.example-commission-badge strong {
    font-weight: 700;
}

/* Social Platforms */
.social-platforms-card {
    padding: 24px;
}

.social-platforms-card h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.social-intro {
    font-size: 12px;
    color: var(--cool-grey);
    margin: 0 0 20px 0;
}

.social-platforms-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.social-platform-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: var(--medium-navy);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.social-platform-item:hover {
    border-color: var(--platform-color);
    transform: translateY(-2px);
}

.platform-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--platform-color);
}

.platform-icon svg {
    width: 24px;
    height: 24px;
}

.platform-name {
    font-size: 11px;
    color: var(--cool-grey);
    text-align: center;
}

/* World Flags */
.world-flags-card {
    padding: 24px;
}

.world-flags-card h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 16px 0;
}

.flags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.flag-item {
    font-size: 20px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--medium-navy);
    border-radius: 6px;
    transition: transform 0.2s ease;
}

.flag-item:hover {
    transform: scale(1.2);
}

/* Country Banner */
.country-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    background: linear-gradient(135deg, var(--gold-dim) 0%, rgba(211, 181, 116, 0.05) 100%);
    border: 1px solid var(--classic-gold);
    border-radius: 16px;
}

.country-banner-content {
    display: flex;
    flex-direction: column;
}

.banner-number {
    font-size: 48px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--classic-gold), var(--light-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.banner-text {
    font-size: 16px;
    color: var(--pure-white);
    font-weight: 500;
}

.banner-globe {
    color: var(--classic-gold);
    opacity: 0.5;
}

/* FAQ Section */
.faq-section-card {
    padding: 24px;
}

.faq-section-card h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 20px 0;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.faq-item {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--medium-navy);
    border-radius: 12px;
}

.faq-icon {
    width: 40px;
    height: 40px;
    background: var(--gold-dim);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--classic-gold);
    flex-shrink: 0;
}

.faq-content h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--pure-white);
    margin: 0 0 4px 0;
}

.faq-content p {
    font-size: 12px;
    color: var(--cool-grey);
    margin: 0;
    line-height: 1.5;
}

/* Calculator Card */
.earnings-calculator-card {
    padding: 24px;
}

.earnings-calculator-card.standalone {
    max-width: 500px;
}

.calculator-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.calculator-header h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.calculator-badge {
    padding: 4px 10px;
    background: var(--info-blue);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
}

.calculator-promo-section {
    margin-bottom: 20px;
}

.calculator-promo-section label {
    display: block;
    font-size: 12px;
    color: var(--cool-grey);
    margin-bottom: 10px;
}

.promo-selector-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.promo-selector-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 8px;
    background: var(--medium-navy);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.promo-selector-btn:hover {
    border-color: var(--classic-gold);
}

.promo-selector-btn.active {
    background: var(--gold-dim);
    border-color: var(--classic-gold);
}

.promo-code {
    font-size: 11px;
    font-weight: 600;
    color: var(--pure-white);
}

.promo-discount {
    font-size: 10px;
    color: var(--emerald-green);
}

.calculator-slider-group {
    margin-bottom: 20px;
}

.slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.slider-header label {
    font-size: 12px;
    color: var(--cool-grey);
}

.slider-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--classic-gold);
}

.calculator-slider {
    width: 100%;
    height: 6px;
    background: var(--light-navy);
    border-radius: 3px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.calculator-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, var(--classic-gold), var(--light-gold));
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(211, 181, 116, 0.4);
}

.slider-range {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 10px;
    color: var(--cool-grey);
}

.calculator-results {
    background: var(--medium-navy);
    border-radius: 12px;
    padding: 20px;
    margin-top: 24px;
}

.result-formula {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: var(--cool-grey);
    margin-bottom: 16px;
}

.result-formula span:nth-child(odd) {
    color: var(--pure-white);
    font-weight: 500;
}

.result-divider {
    height: 1px;
    background: var(--glass-border);
    margin-bottom: 16px;
}

.result-amount {
    text-align: center;
    margin-bottom: 12px;
}

.result-label {
    display: block;
    font-size: 12px;
    color: var(--cool-grey);
    margin-bottom: 4px;
}

.result-value {
    font-size: 36px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--classic-gold), var(--light-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.result-yearly {
    text-align: center;
    font-size: 13px;
    color: var(--cool-grey);
}

.result-yearly strong {
    color: var(--emerald-green);
}

/* Checklist Card */
.checklist-card {
    padding: 24px;
}

.checklist-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.checklist-header h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.checklist-progress {
    text-align: right;
}

.progress-text {
    font-size: 12px;
    color: var(--cool-grey);
    display: block;
    margin-bottom: 4px;
}

.progress-bar-mini {
    width: 80px;
    height: 4px;
    background: var(--light-navy);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill-mini {
    height: 100%;
    background: linear-gradient(90deg, var(--classic-gold), var(--light-gold));
    border-radius: 2px;
}

.checklist-points {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--gold-dim);
    border-radius: 8px;
    margin-bottom: 16px;
    width: fit-content;
}

.points-icon {
    color: var(--classic-gold);
}

.points-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--classic-gold);
}

.checklist-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--medium-navy);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.checklist-item.completed {
    opacity: 0.7;
}

.checklist-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--glass-border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.checklist-item.completed .checklist-checkbox {
    background: var(--emerald-green);
    border-color: var(--emerald-green);
    color: white;
}

.checklist-label {
    flex: 1;
    font-size: 12px;
    color: var(--pure-white);
}

.checklist-item.completed .checklist-label {
    text-decoration: line-through;
    color: var(--cool-grey);
}

.checklist-points-badge {
    font-size: 11px;
    padding: 4px 8px;
    background: var(--gold-dim);
    border-radius: 4px;
    color: var(--classic-gold);
}

/* ============================================
   COUPONS TAB STYLES
   ============================================ */

/* Flash Sale Card */
.flash-sale-card {
    background: linear-gradient(135deg, var(--medium-navy) 0%, var(--light-navy) 100%);
    border: 2px solid var(--classic-gold);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.flash-sale-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--danger-red);
    border-radius: 4px;
    color: white;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    animation: pulse 1.5s infinite;
}

.flash-sale-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flash-sale-left h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--classic-gold);
    margin: 0 0 8px 0;
}

.flash-sale-left p {
    font-size: 14px;
    color: var(--cool-grey);
    margin: 0 0 16px 0;
}

.flash-sale-details {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
}

.flash-detail {
    display: flex;
    flex-direction: column;
}

.detail-label {
    font-size: 11px;
    color: var(--cool-grey);
    text-transform: uppercase;
}

.detail-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--pure-white);
}

.flash-sale-promos {
    display: flex;
    gap: 8px;
}

.promo-tag {
    padding: 6px 12px;
    background: var(--gold-dim);
    border: 1px dashed var(--classic-gold);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--classic-gold);
}

.flash-discount-circle {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, var(--classic-gold), var(--light-gold));
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(211, 181, 116, 0.4);
}

.discount-value {
    font-size: 36px;
    font-weight: 800;
    color: var(--deep-navy);
    line-height: 1;
}

.discount-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--deep-navy);
}

/* Promo Code Card */
.promo-code-card {
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
}

.promo-code-badge {
    position: absolute;
    top: -10px;
    left: 24px;
    padding: 4px 12px;
    background: var(--info-blue);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
}

.promo-code-content {
    padding-top: 8px;
}

.promo-code-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.promo-code-display {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: var(--medium-navy);
    border: 2px dashed var(--classic-gold);
    border-radius: 12px;
}

.promo-code-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--classic-gold);
    letter-spacing: 2px;
}

.btn-copy-code {
    width: 40px;
    height: 40px;
    background: var(--gold-dim);
    border: 1px solid var(--classic-gold);
    border-radius: 8px;
    color: var(--classic-gold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-copy-code:hover {
    background: var(--classic-gold);
    color: var(--deep-navy);
}

.promo-code-status {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-tag {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.status-tag.active {
    background: rgba(39, 174, 96, 0.15);
    color: var(--emerald-green);
}

.usage-count {
    font-size: 13px;
    color: var(--cool-grey);
}

.promo-code-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.promo-stat {
    text-align: center;
    padding: 16px;
    background: var(--medium-navy);
    border-radius: 12px;
}

.promo-stat-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--classic-gold);
    margin-bottom: 4px;
}

.promo-stat-label {
    font-size: 12px;
    color: var(--cool-grey);
}

/* Coupon History */
.coupon-history-card {
    padding: 24px;
}

.coupon-history-card h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 20px 0;
}

.coupon-table-wrapper {
    overflow-x: auto;
}

.coupon-table {
    width: 100%;
    border-collapse: collapse;
}

.coupon-table th,
.coupon-table td {
    padding: 12px 16px;
    text-align: left;
    font-size: 13px;
}

.coupon-table th {
    background: var(--medium-navy);
    color: var(--cool-grey);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 11px;
}

.coupon-table th:first-child {
    border-radius: 8px 0 0 8px;
}

.coupon-table th:last-child {
    border-radius: 0 8px 8px 0;
}

.coupon-table td {
    border-bottom: 1px solid var(--glass-border);
    color: var(--pure-white);
}

.code-mini {
    padding: 4px 8px;
    background: var(--gold-dim);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--classic-gold);
}

.status-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.status-badge.confirmed {
    background: rgba(39, 174, 96, 0.15);
    color: var(--emerald-green);
}

.status-badge.pending {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning-orange);
}

/* ============================================
   GIVEAWAY TAB STYLES
   ============================================ */

.giveaway-calculator-card {
    padding: 24px;
    margin-bottom: 24px;
}

.giveaway-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.giveaway-title h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--pure-white);
    margin: 0 0 4px 0;
}

.giveaway-title p {
    font-size: 13px;
    color: var(--cool-grey);
    margin: 0;
}

.giveaway-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--gold-dim);
    border: 1px solid var(--classic-gold);
    border-radius: 8px;
    color: var(--classic-gold);
    font-size: 12px;
    font-weight: 600;
}

.giveaway-sliders-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.giveaway-account-slider {
    background: var(--medium-navy);
    border-radius: 12px;
    padding: 16px;
}

.account-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--glass-border);
}

.account-type-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--classic-gold);
}

.account-count {
    font-size: 14px;
    font-weight: 700;
    color: var(--pure-white);
}

.account-sizes {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.size-slider-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.size-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.size-label {
    font-size: 11px;
    color: var(--cool-grey);
}

.size-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--pure-white);
}

.giveaway-slider {
    width: 100%;
    height: 4px;
    background: var(--light-navy);
    border-radius: 2px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.giveaway-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--classic-gold);
    border-radius: 50%;
    cursor: pointer;
}

.giveaway-summary {
    background: var(--medium-navy);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.summary-stats {
    display: flex;
    gap: 32px;
}

.summary-stat {
    display: flex;
    flex-direction: column;
}

.summary-label {
    font-size: 11px;
    color: var(--cool-grey);
    text-transform: uppercase;
}

.summary-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--pure-white);
}

.summary-stat.highlight .summary-value {
    color: var(--classic-gold);
}

.btn-generate-giveaway {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--classic-gold), var(--light-gold));
    border: none;
    border-radius: 12px;
    color: var(--deep-navy);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-generate-giveaway:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(211, 181, 116, 0.4);
}

/* GiveCoins Balance */
.givecoins-balance-card {
    padding: 24px;
    margin-bottom: 24px;
}

.givecoins-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.givecoins-header h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.givecoins-balance {
    display: flex;
    align-items: center;
    gap: 8px;
}

.coins-icon {
    color: var(--classic-gold);
}

.coins-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--classic-gold);
}

.givecoins-info p {
    font-size: 13px;
    color: var(--cool-grey);
    margin: 0 0 12px 0;
    line-height: 1.6;
}

.givecoins-rate {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--medium-navy);
    border-radius: 8px;
}

.rate-label {
    font-size: 12px;
    color: var(--cool-grey);
}

.rate-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--emerald-green);
}

/* Recent Giveaways */
.recent-giveaways-card {
    padding: 24px;
}

.recent-giveaways-card h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 20px 0;
}

.giveaways-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.giveaway-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--medium-navy);
    border-radius: 10px;
}

.giveaway-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.giveaway-date {
    font-size: 12px;
    color: var(--cool-grey);
}

.giveaway-accounts {
    font-size: 14px;
    color: var(--pure-white);
    font-weight: 500;
}

.giveaway-status {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.giveaway-status.active {
    background: rgba(59, 130, 246, 0.15);
    color: var(--info-blue);
}

.giveaway-status.completed {
    background: rgba(39, 174, 96, 0.15);
    color: var(--emerald-green);
}

/* ============================================
   RESOURCES TAB STYLES
   ============================================ */

.quick-links-card {
    padding: 24px;
    margin-bottom: 24px;
}

.quick-links-card h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 20px 0;
}

.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.quick-link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 16px;
    background: var(--medium-navy);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.quick-link-item:hover {
    border-color: var(--classic-gold);
    transform: translateY(-4px);
}

.quick-link-item svg {
    width: 24px;
    height: 24px;
    color: var(--classic-gold);
}

.quick-link-item span {
    font-size: 13px;
    color: var(--pure-white);
    text-align: center;
}

/* ============================================
   GIVEAWAY MODAL
   ============================================ */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.giveaway-modal-content {
    background: var(--medium-navy);
    border: 1px solid var(--classic-gold);
    border-radius: 20px;
    padding: 40px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    color: var(--cool-grey);
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s ease;
}

.modal-close:hover {
    color: var(--pure-white);
}

.giveaway-modal-header {
    margin-bottom: 24px;
}

.celebration-icon {
    color: var(--classic-gold);
    margin-bottom: 16px;
}

.giveaway-modal-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--pure-white);
    margin: 0 0 8px 0;
}

.giveaway-modal-header p {
    font-size: 14px;
    color: var(--cool-grey);
    margin: 0;
}

.giveaway-code-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px;
    background: var(--gold-dim);
    border: 2px dashed var(--classic-gold);
    border-radius: 12px;
    margin-bottom: 24px;
}

.generated-code {
    font-size: 24px;
    font-weight: 800;
    color: var(--classic-gold);
    letter-spacing: 2px;
}

.btn-copy-generated {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--classic-gold);
    border: none;
    border-radius: 8px;
    color: var(--deep-navy);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-copy-generated:hover {
    transform: scale(1.05);
}

.giveaway-share-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.share-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.share-btn.twitter {
    background: #1DA1F2;
    color: white;
}

.share-btn.discord {
    background: #5865F2;
    color: white;
}

.share-btn.telegram {
    background: #0088CC;
    color: white;
}

.share-btn:hover {
    transform: translateY(-2px);
}

.share-btn svg {
    width: 18px;
    height: 18px;
}

/* Copy Notification */
.copy-notification {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 12px 24px;
    background: var(--emerald-green);
    color: white;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 9999;
}

.copy-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================
   AFFILIATE RESPONSIVE
   ============================================ */

@media (max-width: 1200px) {
    .affiliate-main-grid {
        grid-template-columns: 1fr;
    }

    .affiliate-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .giveaway-sliders-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .affiliate-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .affiliate-tabs {
        width: 100%;
        overflow-x: auto;
    }

    .affiliate-stats-grid {
        grid-template-columns: 1fr;
    }

    .commission-examples-grid,
    .social-platforms-grid,
    .faq-grid,
    .promo-selector-grid,
    .quick-links-grid {
        grid-template-columns: 1fr;
    }

    .social-platforms-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wallet-card-actions {
        flex-direction: column;
    }

    .flash-sale-content {
        flex-direction: column;
        gap: 24px;
    }

    .giveaway-sliders-grid {
        grid-template-columns: 1fr;
    }

    .giveaway-summary {
        flex-direction: column;
        gap: 20px;
    }

    .summary-stats {
        flex-direction: column;
        width: 100%;
        text-align: center;
    }

    .promo-code-main {
        flex-direction: column;
        gap: 16px;
    }

    .promo-code-stats {
        grid-template-columns: 1fr;
    }
}

/* Affiliate Dashboard Grid - 2 colonnes avec sidebar fixe */
.affiliate-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}

.affiliate-dashboard-left {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.affiliate-dashboard-right {
    position: sticky;
    top: calc(var(--header-height) + 24px);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (max-width: 1200px) {
    .affiliate-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .affiliate-dashboard-right {
        position: static;
    }
}

/* =====================================================
   AFFILIATE PAGE V2 - MAQUETTE STYLE
   ===================================================== */

.affiliate-page-v2 {
    padding: 24px;
}

/* Header */
.aff-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.aff-title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px 0;
}

.aff-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.aff-lang-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.aff-lang-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Main Card - Status + Code + Level */
.aff-main-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

.aff-main-card-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    margin-bottom: 20px;
}

/* Status Section */
.aff-status-section {
    display: flex;
    align-items: center;
    gap: 24px;
}

.aff-status-badge {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aff-status-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #8B5CF6, #EC4899);
}

.aff-status-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aff-status-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}

.aff-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #10B981;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    width: fit-content;
}

/* Code Box */
.aff-code-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}

.aff-code-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.3;
}

.aff-code-value {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
}

.aff-code-copy {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.aff-code-copy:hover {
    color: #fff;
}

/* Level Section */
.aff-level-section {
    flex: 1;
    max-width: 400px;
}

.aff-level-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.aff-level-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #8B5CF6, #6366F1);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}
.aff-level-name {
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.aff-level-percent {
    font-size: 28px;
    font-weight: 700;
    color: #D4AF37;
}

.aff-level-progress {
    margin-bottom: 8px;
}

.aff-level-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.aff-level-fill {
    height: 100%;
    background: linear-gradient(90deg, #10B981, #34D399);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.aff-level-details {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}

.aff-level-amounts {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.aff-level-next {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.aff-level-next strong {
    color: #D4AF37;
}

/* Link Row */
.aff-link-row {
    display: flex;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.aff-link-input-wrapper {
    flex: 1;
    position: relative;
}

.aff-link-input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-family: monospace;
}

.aff-link-copy-btn {
    padding: 14px 28px;
    background: linear-gradient(135deg, #8B5CF6, #6366F1);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.aff-link-copy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

/* Stats Row */
.aff-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.aff-stat-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.aff-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.aff-stat-icon svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.aff-stat-icon.orange {
    background: linear-gradient(135deg, #F97316, #FB923C);
}

.aff-stat-icon.blue {
    background: linear-gradient(135deg, #3B82F6, #60A5FA);
}

.aff-stat-icon.green {
    background: linear-gradient(135deg, #10B981, #34D399);
}

.aff-stat-icon.purple {
    background: linear-gradient(135deg, #8B5CF6, #A78BFA);
}

.aff-stat-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aff-stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: capitalize;
    letter-spacing: 0.3px;
}

.aff-stat-value {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
}

.aff-stat-change {
    font-size: 12px;
}

.aff-stat-change.positive {
    color: #10B981;
}

.aff-stat-change.negative {
    color: #EF4444;
}

.aff-stat-sub {
    font-size: 12px;
    color: #10B981;
}

.aff-stat-sub.muted {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

/* Tabs */
.aff-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    width: fit-content;
}

.aff-tab {
    padding: 12px 24px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.aff-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.aff-tab.active {
    background: linear-gradient(135deg, #D4AF37, #F4D03F);
    color: #0a0a0f;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 1200px) {
    .aff-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .aff-main-card-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .aff-status-section {
        flex-wrap: wrap;
    }

    .aff-level-section {
        max-width: none;
    }

    .aff-stats-row {
        grid-template-columns: 1fr;
    }

    .aff-tabs {
        flex-wrap: wrap;
        width: 100%;
    }

    .aff-tab {
        flex: 1;
        text-align: center;
    }
}

/* =====================================================
   AFFILIATE DASHBOARD - NOUVELLES SECTIONS MAQUETTE
   ===================================================== */

/* Section Promotion en cours */
.promo-section-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid #D4AF37;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
}

.promo-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.promo-section-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.promo-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.promo-icon-box.green {
    background: linear-gradient(135deg, #10B981, #059669);
}

.promo-section-info h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.promo-section-info p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    margin: 0;
}

.promo-section-badge {
    background: linear-gradient(135deg, #D4AF37, #F4D03F);
    color: #0a0a0f;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Grille des offres promo */
.promo-offers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.promo-offer-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.2s;
}

.promo-offer-card:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-2px);
}

.promo-offer-card.featured {
    border-color: #D4AF37;
    background: rgba(211, 181, 116, 0.08);
}

.promo-discount {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.promo-discount.gold {
    color: #D4AF37;
}

.promo-product {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 8px;
}

.promo-tag {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.promo-tag.gold {
    color: #D4AF37;
}

/* Bannière motivation */
.motivation-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 24px;
}

.motivation-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.motivation-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}
.motivation-icon svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.motivation-icon.green {
    background: linear-gradient(135deg, #10B981, #059669);
}

.motivation-icon.red {
    background: var(--danger-red);
}

.motivation-text {
    color: #fff;
    font-size: 14px;
}

.motivation-btn {
    background: transparent;
    border: 1px solid #D4AF37;
    color: #D4AF37;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.motivation-btn:hover {
    background: rgba(211, 181, 116, 0.08);
}

/* Section Vos codes actifs */
.codes-section {
    margin-bottom: 24px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
}

.title-dot {
    width: 8px;
    height: 8px;
    background: #D4AF37;
    border-radius: 50%;
}

.codes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Carte Code Promo */
.code-promo-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 2px dashed #D4AF37;
    border-radius: 16px;
    padding: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.code-promo-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.code-promo-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.code-promo-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.code-promo-label {
    font-size: 9px;
    font-weight: 700;
    color: #D4AF37;
    letter-spacing: 0.5px;
}

.code-promo-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.code-promo-value {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.code-text {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
}

.code-copy-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    padding: 10px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s;
}

.code-copy-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.code-promo-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 12px;
}

.code-stat {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.code-promo-status {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.green {
    background: #10B981;
}

.status-text {
    font-size: 12px;
    color: #10B981;
    font-weight: 500;
}

/* Carte Score de potentiel */
.score-potential-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
}

.score-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.score-header h4 {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.score-level-badge {
    background: linear-gradient(135deg, #F472B6, #EC4899);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.score-circle-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.score-circle {
    position: relative;
    width: 100px;
    height: 100px;
}

.score-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.score-circle circle:first-child {
    stroke: rgba(255, 255, 255, 0.1);
}

.score-circle circle:last-child {
    stroke: #D4AF37;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    transition: stroke-dashoffset 0.5s ease;
}

.score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.score-number {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #D4AF37;
}

.score-max {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
}

.score-objectives {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.score-objective {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.objective-name {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.objective-points {
    font-size: 13px;
    font-weight: 600;
    color: #D4AF37;
}

.score-improve-btn {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.score-improve-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Responsive */
@media (max-width: 1024px) {
    .promo-offers-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .codes-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .promo-offers-grid {
        grid-template-columns: 1fr;
    }

    .motivation-banner {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .motivation-left {
        flex-direction: column;
    }

    .code-promo-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .code-promo-stats {
        justify-content: center;
    }

    .code-promo-status {
        justify-content: center;
    }
}

/* =====================================================
   MODAL OBJECTIFS D'AFFILIÉ
   ===================================================== */

.objectives-modal-content {
    background: linear-gradient(180deg, #081020 0%, #0f1219 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 0;
}

.objectives-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 24px 0 24px;
}

.objectives-header-left h2 {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 6px 0;
}

.objectives-header-left p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    margin: 0;
}

.modal-close-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.toggle-track {
    display: block;
    width: 44px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    position: relative;
    transition: background 0.2s;
}

.toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: all 0.2s;
}

/* Score Section */
.objectives-score-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 24px 16px 24px;
}

.objectives-score-circle {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 12px;
}

.objectives-score-circle svg {
    width: 100%;
    height: 100%;
}

.objectives-score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.score-num {
    font-size: 36px;
    font-weight: 700;
    color: #D4AF37;
}

.score-total {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5);
}

.objectives-level-badge {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

/* Objectives List */
.objectives-list {
    padding: 8px 16px;
}

.objective-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    margin-bottom: 8px;
    transition: all 0.2s;
}

.objective-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.objective-item.completed {
    background: rgba(39, 174, 96, 0.1);
    border-color: rgba(39, 174, 96, 0.3);
}

/* Custom Checkbox */
.objective-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.objective-checkbox input {
    display: none;
}

.checkbox-custom {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.objective-checkbox input:checked + .checkbox-custom {
    background: #10B981;
    border-color: #10B981;
}

.objective-checkbox input:checked + .checkbox-custom::after {
    content: '✓';
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.objective-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.objective-title {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.objective-desc {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.objective-points {
    background: rgba(211, 181, 116, 0.12);
    color: #D4AF37;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}

/* Modal Footer */
.objectives-modal-footer {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 8px;
}

.btn-reset {
    flex: 1;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-reset:hover {
    background: rgba(255, 255, 255, 0.12);
}

.btn-done {
    flex: 1;
    padding: 14px 20px;
    background: linear-gradient(135deg, #10B981, #059669);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-done:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4);
}

/* Scrollbar */
.objectives-modal-content::-webkit-scrollbar {
    width: 6px;
}

.objectives-modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.objectives-modal-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

/* =====================================================
   MODAL LES SECRETS DES TOP AFFILIÉS
   ===================================================== */

.secrets-modal-content {
    background: linear-gradient(180deg, #081020 0%, #0f1219 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 0;
}

.secrets-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 24px 20px 24px;
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, #081020 0%, #081020 80%, transparent 100%);
    z-index: 10;
}

.secrets-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.secrets-icon-box {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #3B82F6, #1D4ED8);
    border-radius: 12px;
}

.secrets-header-info h2 {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.secrets-header-info p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    margin: 0;
}

/* Content */
.secrets-content {
    padding: 0 16px 16px 16px;
}

.secrets-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid #D4AF37;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

.secrets-section-title {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin: 0 0 16px 0;
}

.secrets-tips {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.secret-tip {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.tip-number {
    font-size: 14px;
    font-weight: 700;
    min-width: 28px;
}

.tip-number.gold {
    color: #D4AF37;
}

.tip-number.pink {
    color: #EC4899;
}

.tip-content {
    flex: 1;
}

.tip-title {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.tip-content p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

/* Footer */
.secrets-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, transparent 0%, #0f1219 20%, #0f1219 100%);
    position: sticky;
    bottom: 0;
}

.secrets-footer-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.btn-start {
    padding: 12px 28px;
    background: linear-gradient(135deg, #10B981, #059669);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-start:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4);
}

/* Scrollbar */
.secrets-modal-content::-webkit-scrollbar {
    width: 6px;
}

.secrets-modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.secrets-modal-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

/* =====================================================
   SECTION PROGRESSION DE VOS COMMISSIONS
   ===================================================== */

.commission-progression-section {
    margin-bottom: 32px;
}

.commission-header {
    margin-bottom: 24px;
}

.commission-header h2 {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.commission-header p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin: 0;
}

/* Grille des 4 niveaux */
.levels-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.level-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    position: relative;
    transition: all 0.3s;
}

.level-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.level-card.current {
    border-color: #D4AF37;
    box-shadow: 0 0 20px rgba(211, 181, 116, 0.2);
}

.level-card.level-infinity {
    border-color: rgba(139, 92, 246, 0.5);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(15, 23, 42, 0.95));
}

.permanent-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, #D4AF37, #F4D03F);
    color: #0a0a0f;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
}

.level-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.level-badge.green {
    background: rgba(39, 174, 96, 0.2);
    color: #10B981;
    border: 1px solid rgba(39, 174, 96, 0.3);
}

.level-badge.blue {
    background: rgba(59, 130, 246, 0.2);
    color: #3B82F6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.level-badge.gold {
    background: rgba(211, 181, 116, 0.2);
    color: #D4AF37;
    border: 1px solid rgba(211, 181, 116, 0.3);
}

.level-badge.purple {
    background: rgba(139, 92, 246, 0.2);
    color: #8B5CF6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.level-percent {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 4px;
}

.level-percent.green { color: #10B981; }
.level-percent.blue { color: #3B82F6; }
.level-percent.gold { color: #D4AF37; }
.level-percent.purple { color: #8B5CF6; }

.level-name {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin-bottom: 12px;
}

.level-range {
    display: inline-block;
    background: rgba(255, 255, 255, 0.08);
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 16px;
}

.level-range.highlight {
    background: rgba(211, 181, 116, 0.12);
    color: #D4AF37;
}

.level-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.level-benefits li {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    padding: 6px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.level-benefits li:first-child {
    border-top: none;
}

.level-benefits li.muted {
    color: rgba(255, 255, 255, 0.4);
}

.level-benefits li.inherited {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.level-benefits li.lifetime {
    color: #D4AF37;
    font-weight: 500;
}

.level-benefits .coin-icon {
    margin-right: 4px;
}

/* Barre de progression des paliers */
.levels-progress-bar {
    position: relative;
    padding: 20px 40px;
    margin-bottom: 24px;
}

.progress-track {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.progress-track::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 75%; /* Jusqu'au niveau 3 (25%) = 75% de la barre */
    background: linear-gradient(90deg,
        #10B981 0%,
        #10B981 33.33%,
        #3B82F6 33.33%,
        #3B82F6 66.66%,
        #D4AF37 66.66%,
        #D4AF37 100%
    );
    border-radius: 4px;
}

.progress-markers {
    position: relative;
    margin-top: -4px;
}

.progress-marker {
    position: absolute;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.progress-marker .marker-label {
    background: rgba(30, 41, 59, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 8px;
}

.progress-marker.active .marker-label {
    border-color: #10B981;
    color: #10B981;
}

.progress-marker.active-blue .marker-label {
    border-color: #3B82F6;
    color: #3B82F6;
}

.progress-marker.current .marker-label {
    background: linear-gradient(135deg, #D4AF37, #F4D03F);
    border-color: #D4AF37;
    color: #0a0a0f;
}

.progress-marker.inactive .marker-label {
    border-color: rgba(139, 92, 246, 0.3);
    color: rgba(255, 255, 255, 0.4);
}

/* Votre progression */
.your-progression-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
}

.progression-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.progression-title {
    color: #fff;
    font-size: 14px;
}

.progression-amount {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.progression-amount strong {
    color: #fff;
    font-size: 20px;
}

.progression-bar-container {
    position: relative;
}

.progression-bar {
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: visible;
    position: relative;
}

.progression-fill {
    height: 100%;
    background: linear-gradient(90deg, #10B981, #3B82F6, #D4AF37);
    border-radius: 6px;
    position: relative;
}

.progression-current-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: #10B981;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(39, 174, 96, 0.5);
}

.progression-milestones {
    position: relative;
    height: 30px;
    margin-top: 8px;
}

.milestone {
    position: absolute;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.milestone-dot {
    width: 8px;
    height: 8px;
    background: #D4AF37;
    border-radius: 50%;
}

.milestone-dot.hollow {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.milestone-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}

/* Wallet Hub */
.wallet-hub-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

.wallet-hub-left {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.wallet-hub-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #3B82F6, #1D4ED8);
    border-radius: 12px;
    flex-shrink: 0;
}

.wallet-hub-info h4 {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 6px 0;
}

.wallet-hub-info p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    margin: 0;
}

.wallet-hub-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.wallet-hub-btn {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.wallet-hub-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Exemples de commissions */
.commission-examples {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.7));
    border-radius: 16px;
    padding: 24px;
}

.commission-examples h3 {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
}

.examples-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.example-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.example-product {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.example-price {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    margin-bottom: 12px;
}

.example-calc {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.example-calc span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.example-calc strong.green {
    color: #10B981;
}

.example-calc strong.gold {
    color: #D4AF37;
}

.commission-note {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-style: italic;
    margin: 0;
    text-align: center;
}

/* Responsive */
@media (max-width: 1200px) {
    .levels-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .examples-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .levels-grid {
        grid-template-columns: 1fr;
    }

    .examples-grid {
        grid-template-columns: 1fr;
    }

    .levels-progress-bar {
        display: none;
    }

    .wallet-hub-actions {
        flex-direction: column;
    }

    .wallet-hub-btn {
        width: 100%;
        text-align: center;
    }
}

/* =====================================================
   SECTION PARTAGEZ. CONVERTISSEZ. GAGNEZ.
   ===================================================== */

.share-convert-section {
    margin-bottom: 32px;
}

.section-main-title {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 24px 0;
}

/* Réseaux sociaux en ligne */
.social-platforms-row {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}

.social-platform-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s;
}

.social-platform-card:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.15);
}

.platform-icon-wrapper {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.platform-icon-wrapper svg {
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
    flex-shrink: 0;
}

/* Couleurs des plateformes */
.platform-icon-wrapper.youtube {
    background: rgba(255, 0, 0, 0.15);
    color: #FF0000;
}

.platform-icon-wrapper.tiktok {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.platform-icon-wrapper.instagram {
    background: linear-gradient(135deg, rgba(131, 58, 180, 0.2), rgba(253, 29, 29, 0.2), rgba(252, 176, 69, 0.2));
    color: #E4405F;
}

.platform-icon-wrapper.twitter {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.platform-icon-wrapper.discord {
    background: rgba(88, 101, 242, 0.15);
    color: #5865F2;
}

.platform-icon-wrapper.telegram {
    background: rgba(0, 136, 204, 0.15);
    color: #0088CC;
}

.platform-icon-wrapper.twitch {
    background: rgba(145, 70, 255, 0.15);
    color: #9146FF;
}

.platform-icon-wrapper.blog {
    background: rgba(211, 181, 116, 0.12);
    color: #D4AF37;
}

.social-platform-card .platform-name {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 500;
}

/* Présence mondiale */
.section-subtitle {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 20px 0;
}

.world-flags-grid {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 12px;
}

.flags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.flag-emoji {
    font-size: 36px;
    line-height: 1.2;
    transition: transform 0.2s;
    display: inline-block;
}

.flag-img {
    width: 40px;
    height: auto;
    border-radius: 4px;
    transition: transform 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.flag-img:hover,
.flag-emoji:hover {
    transform: scale(1.15);
}

.world-subtitle {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    font-style: italic;
    margin: 0 0 20px 0;
}

/* Bannière 100+ pays */
.countries-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid #D4AF37;
    border-radius: 16px;
    padding: 20px 28px;
}

.banner-icon-circle {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #D4AF37, #F4D03F);
    border-radius: 12px;
    flex-shrink: 0;
}

.banner-content {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.banner-number-big {
    font-size: 32px;
    font-weight: 700;
    color: #D4AF37;
}

.banner-text-small {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
}

/* Responsive */
@media (max-width: 1024px) {
    .social-platforms-row {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .social-platforms-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .flag-emoji {
        font-size: 24px;
    }

    .countries-banner {
        flex-direction: column;
        text-align: center;
    }

    .banner-content {
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }
}

/* =====================================================
   SECTION QUESTIONS FRÉQUENTES
   ===================================================== */

.faq-section-new {
    margin-bottom: 32px;
}

.faq-grid-new {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.faq-card-new {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px 24px;
    transition: all 0.2s;
}

.faq-card-new:hover {
    background: linear-gradient(135deg, rgba(40, 51, 69, 0.9), rgba(25, 33, 52, 0.95));
    border-color: rgba(255, 255, 255, 0.12);
}

.faq-icon-box {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    flex-shrink: 0;
}

.faq-card-content {
    flex: 1;
}

.faq-card-content h4 {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 6px 0;
}

.faq-card-content p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .faq-grid-new {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   SECTION CALCULATEUR DE GAINS - NOUVEAU STYLE
   ===================================================== */

.calculator-section-new {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 32px;
}

.calculator-header-new {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.calculator-icon-box {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #3B82F6, #1D4ED8);
    border-radius: 14px;
    flex-shrink: 0;
}

.calculator-header-info h2 {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.calculator-header-info p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin: 0;
}

.calculator-note {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    font-style: italic;
    margin: 0 0 24px 0;
}

/* Sélecteurs de promo */
.promo-selectors-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.promo-select-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.promo-select-group label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.promo-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px 16px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.promo-select option {
    background: #081020;
    color: #fff;
    padding: 10px;
}

.promo-select:focus {
    outline: none;
    border-color: #D4AF37;
}

/* Sliders */
.calculator-sliders {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 28px;
}

.slider-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.slider-group label {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
}

.calc-slider {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #D4AF37;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(211, 181, 116, 0.4);
}

.calc-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #D4AF37;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(211, 181, 116, 0.4);
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.slider-labels span {
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
}

.slider-labels .slider-current {
    color: #D4AF37;
    font-weight: 600;
    font-size: 14px;
}

/* Résultat */
.calculator-result-box {
    background: transparent;
    border: 2px solid #D4AF37;
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.result-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.result-amount {
    color: #D4AF37;
    font-size: 56px;
    font-weight: 700;
    line-height: 1.1;
}

.result-formula {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

/* Responsive */
@media (max-width: 1024px) {
    .promo-selectors-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .calculator-sliders {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .calculator-section-new {
        padding: 24px;
    }

    .promo-selectors-row {
        grid-template-columns: 1fr;
    }

    .result-amount {
        font-size: 42px;
    }
}

/* =====================================================
   BOUTON FLOTTANT & SIDEBAR CHECKLIST SUCCÈS
   ===================================================== */

/* Bouton flottant */
.checklist-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #D4AF37, #F4D03F);
    border: none;
    border-radius: 16px;
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(211, 181, 116, 0.4);
    transition: all 0.3s;
}

.checklist-fab:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 28px rgba(211, 181, 116, 0.5);
}

.fab-count {
    font-size: 14px;
    font-weight: 700;
    color: #0a0a0f;
}

/* Sidebar */
.checklist-sidebar {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    height: 100vh;
    background: linear-gradient(180deg, #081020 0%, #0f1219 100%);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
    overflow-y: auto;
}

.checklist-sidebar.active {
    right: 0;
}

.checklist-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.checklist-sidebar-header h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.sidebar-close-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
}

/* Progress Section */
.checklist-progress-section {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.checklist-progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin-bottom: 12px;
    overflow: hidden;
}

.checklist-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10B981, #34D399);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.checklist-progress-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

/* Items List */
.checklist-items-list {
    flex: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checklist-item-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.checklist-item-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.checklist-item-row input[type="checkbox"] {
    display: none;
}

.checklist-check-icon {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.checklist-item-row input[type="checkbox"]:checked + .checklist-check-icon {
    background: #10B981;
    border-color: #10B981;
}

.checklist-item-row input[type="checkbox"]:checked + .checklist-check-icon::after {
    content: '✓';
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.checklist-item-text {
    flex: 1;
    color: #fff;
    font-size: 14px;
    transition: all 0.2s;
}

.checklist-item-row input[type="checkbox"]:checked ~ .checklist-item-text {
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.5);
}

.checklist-item-pts {
    background: rgba(39, 174, 96, 0.15);
    color: #10B981;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

/* Footer */
.checklist-sidebar-footer {
    padding: 20px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(59, 130, 246, 0.1);
}

.checklist-sidebar-footer p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    text-align: center;
    margin: 0;
}

/* Overlay */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Responsive */
@media (max-width: 480px) {
    .checklist-sidebar {
        width: 100%;
        right: -100%;
    }

    .checklist-fab {
        bottom: 16px;
        right: 16px;
        width: 48px;
        height: 48px;
    }

    .fab-count {
        font-size: 12px;
    }
}

/* =====================================================
   TAB COUPONS - NOUVEAU DESIGN
   ===================================================== */

/* Flash Sale Card */
.flash-sale-card-new {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid #D4AF37;
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 24px;
}

.flash-sale-header-new {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.flash-sale-icon-box {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #D4AF37, #F4D03F);
    border-radius: 14px;
    flex-shrink: 0;
}

.flash-sale-header-info h2 {
    color: #D4AF37;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px 0;
    text-transform: uppercase;
}

.flash-sale-header-info p {
    color: #D4AF37;
    font-size: 14px;
    margin: 0;
    opacity: 0.8;
}

.flash-sale-body {
}

.flash-sale-subtitle {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 20px 0;
    text-transform: uppercase;
}

.promo-details-section {
    margin-left: 8px;
}

.promo-details-label {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    display: block;
    margin-bottom: 12px;
}

.promo-details-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.promo-details-list li {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    padding-left: 0;
}

/* Active Codes Card */
.active-codes-card-new {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 28px;
}

.active-codes-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.yellow-dot {
    width: 12px;
    height: 12px;
    background: #D4AF37;
    border-radius: 50%;
}

.active-codes-header h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.active-codes-content {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

.active-code-box {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: linear-gradient(135deg, rgba(20, 30, 48, 0.8), rgba(15, 23, 42, 0.9));
    border: 2px dashed #D4AF37;
    border-radius: 16px;
    overflow: hidden;
    max-width: fit-content;
}

.code-promo-badge-box {
    background: rgba(30, 41, 59, 0.95);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 90px;
}

.badge-dots {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.badge-dots .dot {
    width: 8px;
    height: 8px;
    background: #3B82F6;
    border-radius: 50%;
}

.badge-label {
    color: #3B82F6;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.code-main-display {
    flex: 1;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.code-value-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.code-big {
    color: #D4AF37;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 2px;
}

.btn-copy-square {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.2s;
}

.btn-copy-square:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.code-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.code-stat {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

.code-stat.active {
    color: #10B981;
}

/* Responsive */
@media (max-width: 768px) {
    .active-code-box {
        flex-direction: column;
        max-width: 100%;
    }

    .code-promo-badge-box {
        flex-direction: row;
        min-width: auto;
        padding: 12px 16px;
    }

    .badge-dots {
        flex-direction: row;
    }

    .code-big {
        font-size: 28px;
    }
}

/* =====================================================
   TAB GIVEAWAY - NOUVEAU DESIGN
   ===================================================== */

/* Ma tirelire GiveCoins */
.givecoins-tirelire-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid #D4AF37;
    border-radius: 20px;
    padding: 24px 32px;
    margin-bottom: 20px;
}

.tirelire-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tirelire-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 2px solid #D4AF37;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.phi-symbol {
    color: #D4AF37;
    font-size: 28px;
    font-weight: 700;
}

.tirelire-info h2 {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.tirelire-info p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin: 0;
}

.tirelire-right {
    text-align: right;
}

.tirelire-label {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.tirelire-balance {
    color: #D4AF37;
    font-size: 32px;
    font-weight: 700;
}

/* Stats Row */
.giveaway-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.giveaway-stat-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.giveaway-stat-value {
    color: #D4AF37;
    font-size: 28px;
    font-weight: 700;
}

.giveaway-stat-value-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.phi-icon-small {
    color: #D4AF37;
    font-size: 20px;
    font-weight: 700;
    background: rgba(211, 181, 116, 0.12);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.giveaway-stat-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

/* Responsive */
@media (max-width: 768px) {
    .givecoins-tirelire-card {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding: 24px;
    }

    .tirelire-left {
        flex-direction: column;
    }

    .tirelire-right {
        text-align: center;
    }

    .giveaway-stats-row {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   CALCULATEUR GIVECOINS
   ===================================================== */

.givecoins-calculator-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 28px;
    margin-top: 24px;
}

.calc-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.calc-title-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.calc-title-left h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.calc-level-selector {
    display: flex;
    align-items: center;
    gap: 12px;
}

.level-label {
    color: #F5F2EB !important;
    font-size: 13px;
    font-weight: 500;
}

.level-select {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid #D4AF37;
    border-radius: 8px;
    padding: 8px 16px;
    color: #D4AF37;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}

.level-select option {
    background: #081020;
    color: #D4AF37;
    padding: 10px;
}

.calc-note {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    font-style: italic;
    margin: 0 0 24px 0;
}

/* Sliders Grid 2x2 */
.sliders-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.slider-card {
    background: linear-gradient(135deg, rgba(20, 30, 48, 0.6), rgba(15, 23, 42, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 20px;
}

.slider-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.slider-badge.blue {
    background: rgba(59, 130, 246, 0.2);
    color: #3B82F6;
    border: 1px solid rgba(59, 130, 246, 0.4);
}

.slider-badge.orange {
    background: rgba(249, 115, 22, 0.2);
    color: #F97316;
    border: 1px solid rgba(249, 115, 22, 0.4);
}

.slider-badge.gold {
    background: rgba(211, 181, 116, 0.2);
    color: #D4AF37;
    border: 1px solid rgba(211, 181, 116, 0.4);
}

.slider-badge.purple {
    background: rgba(139, 92, 246, 0.2);
    color: #A78BFA;
    border: 1px solid rgba(139, 92, 246, 0.4);
}

.slider-badge.green {
    background: rgba(39, 174, 96, 0.2);
    color: #10B981;
    border: 1px solid rgba(39, 174, 96, 0.4);
}

.slider-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.slider-row .size-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    width: 45px;
    flex-shrink: 0;
}

.slider-row .gc-slider {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.slider-row .gc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #D4AF37;
    border-radius: 50%;
    cursor: pointer;
}

.slider-row .gc-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #D4AF37;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.slider-row .size-value {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    width: 24px;
    text-align: right;
}

/* Static & DD Section */
.static-dd-section {
    background: linear-gradient(135deg, rgba(20, 30, 48, 0.6), rgba(15, 23, 42, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 24px;
}

.static-dd-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.static-dd-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

.static-dd-sliders {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.slider-row-horizontal {
    display: flex;
    align-items: center;
    gap: 16px;
}

.slider-row-horizontal .size-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    line-height: 1.3;
    width: 45px;
    flex-shrink: 0;
}

.slider-row-horizontal .gc-slider {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.slider-row-horizontal .gc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #D4AF37;
    border-radius: 50%;
    cursor: pointer;
}

.slider-row-horizontal .size-value {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    width: 24px;
    text-align: right;
}

/* Résultats */
.givecoins-results-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.givecoins-total-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 2px solid #D4AF37;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.total-icon {
    width: 48px;
    height: 48px;
    background: rgba(211, 181, 116, 0.12);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.total-icon .phi-symbol {
    color: #D4AF37;
    font-size: 24px;
    font-weight: 700;
}

.total-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.total-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

.total-value {
    color: #D4AF37;
    font-size: 36px;
    font-weight: 700;
}

.givecoins-stat-card-small {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.stat-icon-box {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    flex-shrink: 0;
}

.stat-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-content .stat-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

.stat-content .stat-value {
    font-size: 24px;
    font-weight: 700;
}

.stat-content .stat-value.gold {
    color: #D4AF37;
}

/* Ce que vous pouvez offrir */
.givecoins-offer-section {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
}

.givecoins-offer-section h4 {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .sliders-grid-2x2 {
        grid-template-columns: 1fr;
    }

    .givecoins-results-row {
        grid-template-columns: 1fr;
    }

    .static-dd-sliders {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .calc-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .total-value {
        font-size: 28px;
    }
}

/* Offer Badges */
.offer-badges-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.offer-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(39, 174, 96, 0.1);
    border: 1px solid rgba(39, 174, 96, 0.3);
    border-radius: 10px;
    padding: 10px 16px;
}

.offer-qty {
    color: #10B981;
    font-size: 14px;
    font-weight: 700;
}

.offer-type {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.offer-cost {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.offer-note {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    font-style: italic;
    margin: 0;
}

.givecoins-offer-section h4 {
    margin-bottom: 8px;
}

/* =====================================================
   FAQ SECTION - RESOURCES TAB
   ===================================================== */

.faq-section-resources {
    margin-top: 32px;
}

.faq-section-resources .section-title-white {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 24px 0;
}

.faq-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.faq-card-resource {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.faq-card-resource .faq-icon-box {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    flex-shrink: 0;
}

.faq-card-resource .faq-card-content {
    flex: 1;
}

.faq-card-resource .faq-card-content h4 {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.faq-card-resource .faq-card-content p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .faq-grid-2x2 {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   CALCULATEUR GAINS POTENTIELS - RESOURCES TAB
   ===================================================== */

.gains-calculator-section {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 28px;
    margin-top: 32px;
}

.gains-calc-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.gains-calc-icon {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    flex-shrink: 0;
}

.gains-calc-title h2 {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.gains-calc-title p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin: 0;
}

.gains-calc-note {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    font-style: italic;
    margin: 0 0 24px 0;
}

/* 3 Sliders Row */
.gains-sliders-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 24px;
    margin-bottom: 24px;
}

.gains-slider-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gains-slider-group label {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
}

.gains-slider {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.gains-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #D4AF37;
    border-radius: 50%;
    cursor: pointer;
}

.gains-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #D4AF37;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.gains-slider-group .slider-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gains-slider-group .slider-labels span {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.gains-slider-group .slider-labels .slider-current {
    color: #D4AF37;
    font-size: 14px;
    font-weight: 600;
}

/* Résultat */
.gains-result-box {
    background: linear-gradient(135deg, rgba(20, 30, 48, 0.6), rgba(15, 23, 42, 0.8));
    border: 2px solid #D4AF37;
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.gains-result-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.gains-result-amount {
    color: #D4AF37;
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
}

.gains-result-formula {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

/* Responsive */
@media (max-width: 1024px) {
    .gains-sliders-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .gains-result-amount {
        font-size: 42px;
    }
}

/* =====================================================
   LANGUAGE SELECTOR
   ===================================================== */

.language-selector-top {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 16px;
}

.lang-btn {
    padding: 6px 14px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.lang-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.lang-btn.active {
    background: linear-gradient(135deg, #D4AF37, #F4D03F);
    border-color: #D4AF37;
    color: #0a0a0f;
}

/* ===================================================================
   AFFILIATE PAGE - SWITCH & NON-AFFILIATE LANDING
   =================================================================== */

/* Header Right avec Switch */
.aff-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
}

.aff-header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Switch Toggle Affilié/Non-Affilié */
.aff-mode-switch {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(30, 35, 50, 0.8);
    padding: 8px 16px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.aff-mode-label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.aff-mode-label.active {
    color: #D4AF37;
    font-weight: 600;
}

.aff-switch {
    position: relative;
    width: 50px;
    height: 26px;
}

.aff-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.aff-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 26px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.aff-switch-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background: #fff;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.aff-switch input:checked + .aff-switch-slider {
    background: linear-gradient(135deg, #D4AF37, #B8942E);
    border-color: #D4AF37;
}

.aff-switch input:checked + .aff-switch-slider:before {
    transform: translateX(24px);
}

/* ===================================================================
   NON-AFFILIATE LANDING PAGE STYLES
   =================================================================== */

.non-affiliate-content {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Hero Section */
.naff-hero {
    background: linear-gradient(135deg, rgba(30, 35, 50, 0.95), rgba(20, 25, 35, 0.98));
    border-radius: 20px;
    padding: 50px 40px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
}

.naff-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(211, 181, 116, 0.3), transparent);
}

.naff-hero-badge {
    display: inline-block;
    background: rgba(30, 35, 50, 0.9);
    color: #10B981;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 10px 24px;
    border-radius: 50px;
    border: 1px solid rgba(39, 174, 96, 0.3);
    margin-bottom: 28px;
}

.naff-hero-title {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 20px;
}

.naff-hero-title .gold {
    color: #D4AF37;
    background: linear-gradient(135deg, #D4AF37, #F4D03F);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.naff-hero-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
    margin-bottom: 40px;
}

/* Hero Stats Row */
.naff-stats-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    background: rgba(25, 30, 45, 0.8);
    border-radius: 16px;
    padding: 25px 40px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    max-width: 700px;
    margin: 0 auto;
}

.naff-stat-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0 30px;
}

.naff-stat-divider {
    width: 1px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
}

.naff-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.naff-stat-icon svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.naff-stat-icon.yellow {
    background: linear-gradient(135deg, #D4AF37, #B8942E);
}

.naff-stat-icon.teal {
    background: linear-gradient(135deg, #14B8A6, #0D9488);
}

.naff-stat-icon.purple {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
}

.naff-stat-info {
    display: flex;
    flex-direction: column;
}

.naff-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    margin-bottom: 4px;
}

.naff-stat-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.3;
}

/* Section Title */
.naff-section {
    margin-bottom: 40px;
}

.naff-section-title {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 24px;
}

/* Benefits Grid */
.naff-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.naff-benefit-card {
    background: rgba(30, 35, 50, 0.7);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    gap: 16px;
    transition: all 0.3s ease;
}

.naff-benefit-card:hover {
    border-color: rgba(211, 181, 116, 0.2);
    transform: translateY(-2px);
}

.naff-benefit-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.naff-benefit-icon svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.naff-benefit-icon.yellow {
    background: linear-gradient(135deg, #D4AF37, #B8942E);
}

.naff-benefit-icon.green {
    background: linear-gradient(135deg, #10B981, #059669);
}

.naff-benefit-icon.purple {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
}

.naff-benefit-icon.pink {
    background: linear-gradient(135deg, #EC4899, #DB2777);
}

.naff-benefit-icon.gold {
    background: linear-gradient(135deg, #F59E0B, #D97706);
}

.naff-benefit-icon.violet {
    background: linear-gradient(135deg, #A855F7, #9333EA);
}

.naff-benefit-content {
    flex: 1;
    min-width: 0;
}

.naff-benefit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.naff-benefit-header h4 {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.naff-benefit-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(211, 181, 116, 0.12);
    color: #D4AF37;
    border: 1px solid rgba(211, 181, 116, 0.3);
}

.naff-benefit-badge.teal {
    background: rgba(20, 184, 166, 0.15);
    color: #14B8A6;
    border-color: rgba(20, 184, 166, 0.3);
}

.naff-benefit-badge.live {
    background: rgba(231, 76, 60, 0.15);
    color: #EF4444;
    border-color: rgba(231, 76, 60, 0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.naff-benefit-badge.pro {
    background: rgba(236, 72, 153, 0.15);
    color: #EC4899;
    border-color: rgba(236, 72, 153, 0.3);
}

.naff-benefit-badge.vip {
    background: linear-gradient(135deg, rgba(211, 181, 116, 0.2), rgba(244, 208, 63, 0.1));
    color: #F4D03F;
    border-color: rgba(244, 208, 63, 0.4);
}

.naff-benefit-badge.support {
    background: rgba(168, 85, 247, 0.15);
    color: #A855F7;
    border-color: rgba(168, 85, 247, 0.3);
}

.naff-benefit-content p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
    margin: 0;
}

/* Responsive Non-Affiliate */
@media (max-width: 1024px) {
    .naff-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .aff-mode-switch {
        padding: 6px 12px;
    }

    .aff-mode-label {
        font-size: 11px;
    }

    .aff-switch {
        width: 44px;
        height: 24px;
    }

    .aff-switch-slider:before {
        height: 18px;
        width: 18px;
    }

    .aff-switch input:checked + .aff-switch-slider:before {
        transform: translateX(20px);
    }

    .naff-hero {
        padding: 30px 20px;
    }

    .naff-hero-title {
        font-size: 24px;
    }

    .naff-hero-subtitle {
        font-size: 14px;
    }

    .naff-stats-row {
        flex-direction: column;
        gap: 20px;
        padding: 25px 20px;
    }

    .naff-stat-item {
        padding: 0;
        width: 100%;
        justify-content: center;
    }

    .naff-stat-divider {
        width: 80%;
        height: 1px;
    }

    .naff-benefits-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .aff-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .aff-header-right {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ================================================
   NON-AFFILIATE - PROGRESSION DES COMMISSIONS
   ================================================ */

.naff-progression-section {
    margin-top: 40px;
}

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

.naff-section-header .naff-section-title {
    margin-bottom: 10px;
}

.naff-section-subtitle {
    color: var(--cool-grey);
    font-size: 1rem;
}

/* Conteneur des niveaux */
.naff-levels-container {
    background: linear-gradient(145deg, rgba(8, 16, 32, 0.9), rgba(14, 26, 46, 0.8));
    border: 1px solid rgba(211, 181, 116, 0.12);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 20px;
}

/* Grille des cartes de niveau */
.naff-levels-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

/* Carte de niveau */
.naff-level-card {
    background: rgba(8, 16, 32, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 25px 20px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
}

.naff-level-card:hover {
    transform: translateY(-5px);
    border-color: rgba(211, 181, 116, 0.3);
}

.naff-level-card.level-infinity {
    background: linear-gradient(145deg, rgba(8, 16, 32, 0.9), rgba(14, 26, 46, 0.95));
    border-color: rgba(211, 181, 116, 0.3);
}

/* Levels already passed — greyed out (no longer the user's current/future tier) */
.naff-level-card.passed {
    opacity: 0.45;
    filter: grayscale(70%);
}
.naff-level-card.passed:hover {
    transform: none;
    border-color: rgba(255, 255, 255, 0.1);
    opacity: 0.6;
}

/* Badge permanent */
.naff-level-permanent {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #27AE60, #059669);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.infinity-icon {
    font-size: 0.9rem;
}

/* Badge de niveau */
.naff-level-badge {
    display: inline-block;
    background: rgba(39, 174, 96, 0.2);
    color: #27AE60;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 15px;
    border: 1px solid rgba(39, 174, 96, 0.3);
}

.naff-level-badge.blue {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.3);
}

.naff-level-badge.yellow {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.3);
}

.naff-level-badge.gold {
    background: rgba(211, 181, 116, 0.2);
    color: #D3B574;
    border-color: rgba(211, 181, 116, 0.3);
}

/* Pourcentage */
.naff-level-percent {
    font-size: 3rem;
    font-weight: 800;
    color: #27AE60;
    line-height: 1;
    margin-bottom: 5px;
}

.naff-level-percent.blue { color: #3b82f6; }
.naff-level-percent.yellow { color: #f59e0b; }
.naff-level-percent.gold { color: #D3B574; }

/* Nom du niveau */
.naff-level-name {
    color: var(--cool-grey);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

/* Range de montant */
.naff-level-range {
    display: inline-block;
    background: rgba(255, 255, 255, 0.05);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--cool-grey);
    margin-bottom: 15px;
}

.naff-level-range.gold {
    background: rgba(211, 181, 116, 0.12);
    color: #D3B574;
}

/* Liste des avantages */
.naff-level-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    font-size: 0.85rem;
}

.naff-level-benefits li {
    padding: 8px 0;
    color: var(--cool-grey);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.naff-level-benefits li:last-child {
    border-bottom: none;
}

.naff-level-benefits li.disabled {
    opacity: 0.5;
    text-decoration: line-through;
}

.naff-level-benefits li.highlight {
    color: #27AE60;
    font-weight: 500;
}

.naff-level-benefits li.gold-text {
    color: #D3B574;
    font-weight: 600;
    background: rgba(211, 181, 116, 0.08);
    padding: 8px 12px;
    border-radius: 8px;
    margin-top: 5px;
}

.coin-icon {
    font-size: 1rem;
}

/* Barre de progression des niveaux - Pastilles alignées aux bords droits des vignettes */
.naff-levels-progress-bar {
    position: relative;
    margin-top: 30px;
    margin-bottom: 10px;
    height: 50px;
}

.naff-levels-progress-bar .progress-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* La ligne de fond (grise uniquement) */
.naff-levels-progress-bar .progress-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    transform: translateY(-50%);
}

/* Le remplissage vert (0% par défaut) */
.naff-levels-progress-bar .progress-fill {
    height: 100%;
    background: #27AE60;
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* Conteneur des pastilles - grille alignée avec les vignettes */
.naff-levels-progress-bar .progress-markers {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: center;
    z-index: 10;
}

/* Pastilles visibles */
.naff-levels-progress-bar .marker {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #0f172a;
    border: 3px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    justify-self: end;
}

/* Couleurs des bordures des pastilles */
.naff-levels-progress-bar .marker.green {
    border-color: #27AE60;
    color: #27AE60;
}

.naff-levels-progress-bar .marker.blue {
    border-color: #3b82f6;
    color: #3b82f6;
}

.naff-levels-progress-bar .marker.yellow {
    border-color: #eab308;
    color: #eab308;
}

.naff-levels-progress-bar .marker.gold {
    border-color: #D3B574;
    color: #D3B574;
}

/* Responsive */
@media (max-width: 1200px) {
    .naff-levels-progress-bar .progress-markers {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .naff-levels-progress-bar {
        display: none;
    }
}

/* Votre progression */
.naff-your-progression {
    background: rgba(8, 16, 32, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 20px;
}

.progression-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.progression-label {
    color: white;
    font-weight: 500;
}

.progression-amount {
    color: var(--cool-grey);
}

.progression-amount strong {
    color: white;
    font-size: 1.2rem;
}

.progression-lifetime-label {
    margin-left: 6px;
    padding: 3px 9px;
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #D4AF37;
    vertical-align: middle;
}

.progression-bar-container {
    position: relative;
}

.progression-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.progression-fill {
    height: 100%;
    background: linear-gradient(90deg, #27AE60, #3b82f6);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.progression-milestones {
    position: relative;
    height: 40px;
    margin-top: 10px;
}

.milestone {
    position: absolute;
    transform: translateX(-50%);
    text-align: center;
}

.milestone-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--medium-navy);
    border: 2px solid var(--cool-grey);
    margin: 0 auto 5px;
}

.milestone-dot.active {
    background: #27AE60;
    border-color: #27AE60;
}

.milestone-dot.empty {
    background: transparent;
    border-style: dashed;
}

.milestone span {
    font-size: 0.75rem;
    color: var(--cool-grey);
}

/* Wallet Hub */
.naff-wallet-hub {
    background: rgba(8, 16, 32, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.wallet-hub-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(211, 181, 116, 0.2), rgba(211, 181, 116, 0.08));
    border: 1px solid rgba(211, 181, 116, 0.25);
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D4AF37;
}
.wallet-hub-icon svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.wallet-hub-content h4 {
    color: white;
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.wallet-hub-content p {
    color: var(--cool-grey);
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.wallet-hub-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.wallet-action-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.wallet-action-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.wallet-action-btn.primary {
    background: linear-gradient(135deg, #27AE60, #059669);
    border-color: #27AE60;
}

.wallet-action-btn.primary:hover {
    background: linear-gradient(135deg, #059669, #047857);
}

/* Exemples de commissions */
.naff-commission-examples {
    background: rgba(8, 16, 32, 0.4);
    border-radius: 16px;
    padding: 25px;
}

.naff-commission-examples h4 {
    color: white;
    font-size: 1.1rem;
    margin-bottom: 20px;
}

.examples-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}

.example-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.example-card .example-product {
    color: white;
    font-weight: 600;
    margin-bottom: 5px;
}

.example-card .example-price {
    color: var(--cool-grey);
    font-size: 0.85rem;
    margin-bottom: 15px;
}

.example-card .example-rates {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.example-card .rate {
    color: var(--cool-grey);
    font-size: 0.85rem;
}

.example-card .rate .gold {
    color: #D3B574;
    font-weight: 600;
}

.examples-footer {
    text-align: center;
    color: var(--cool-grey);
    font-size: 0.85rem;
    opacity: 0.8;
}

/* Responsive pour le bloc progression */
@media (max-width: 1200px) {
    .naff-levels-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .examples-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .naff-levels-grid {
        grid-template-columns: 1fr;
    }

    .naff-levels-container {
        padding: 20px 15px;
    }

    .naff-levels-progress-bar .progress-markers {
        padding: 0;
    }

    .naff-levels-progress-bar .marker {
        width: 35px;
        height: 35px;
        font-size: 0.65rem;
    }

    .naff-wallet-hub {
        flex-direction: column;
        text-align: center;
    }

    .wallet-hub-actions {
        justify-content: center;
    }

    .examples-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .examples-grid {
        grid-template-columns: 1fr;
    }

    .wallet-hub-actions {
        flex-direction: column;
    }

    .wallet-action-btn {
        width: 100%;
    }
}

/* ============================================
   NOUVELLE BARRE DE PROGRESSION DES NIVEAUX
   ============================================ */

.levels-progress-wrapper {
    position: relative;
    height: 60px;
    margin-top: 25px;
}

/* Ligne grise de fond */
.levels-progress-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 2px;
    transform: translateY(-50%);
    z-index: 1;
}

.levels-progress-line-1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg,
        #10B981 0%, #10B981 25%,
        rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 100%
    );
    border-radius: 4px;
}

.levels-progress-line-2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg,
        #10B981 0%, #10B981 25%,
        #3B82F6 25%, #3B82F6 50%,
        rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 100%
    );
    border-radius: 4px;
}

.levels-progress-line-3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg,
        #10B981 0%, #10B981 25%,
        #3B82F6 25%, #3B82F6 50%,
        #D4AF37 50%, #D4AF37 75%,
        rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0.2) 100%
    );
    border-radius: 4px;
}

.levels-progress-line-4::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg,
        #10B981 0%, #10B981 25%,
        #3B82F6 25%, #3B82F6 50%,
        #D4AF37 50%, #D4AF37 75%,
        #D3B574 75%,  #D3B574 100%
    );
    border-radius: 4px;
}

/* Grille des pastilles */
.levels-progress-dots {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    z-index: 5;
}

/* Pastilles */
.levels-dot {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #0d1321;
    border: 3px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    justify-self: end;
}

/* Couleurs des pastilles */
.levels-dot.dot-green {
    border-color: #27AE60;
    color: #27AE60;
}

.levels-dot.dot-green.completed {
    background: #0D2F2C;
}

.levels-dot.dot-blue {
    border-color: #3b82f6;
    color: #3b82f6;
}

.levels-dot.dot-blue.completed {
    background: #12264B;
}

.levels-dot.dot-yellow {
    border-color: #eab308;
    color: #eab308;
}

.levels-dot.dot-yellow.completed {
    background: #372D1C;
}

.levels-dot.dot-gold {
    border-color: #D3B574;
    color: #D3B574;
}

.levels-dot.dot-gold.completed {
    background: #313233;
}

/* Responsive */
@media (max-width: 1200px) {
    .levels-progress-dots {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .levels-progress-wrapper {
        display: none;
    }
}

/* ============================================
   VOTRE PROGRESSION - NOUVELLE VERSION
   ============================================ */

.your-progress-track {
    position: relative;
    height: 60px;
    margin-top: 10px;
}

/* Cercle vert de position actuelle (centré sur le %) */
.your-progress-current {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: #27AE60;
    border-radius: 50%;
    z-index: 10;
}

/* Ligne grise de fond — full width 0→100% pour aligner avec les markers */
.your-progress-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 3px;
    transform: translateY(-50%);
    z-index: 1;
}
/* Overlay grisé pour les niveaux acquis à vie (permanent, non-redescendable) */
.your-progress-line-locked {
    position: absolute;
    top: 50%;
    left: 0;
    height: 6px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 3px;
    transform: translateY(-50%);
    z-index: 2;
}
.your-progress-line-current {
    position: absolute;
    top: 50%;
    left: 0;
    height: 6px;
    background: #27AE60;
    border-radius: 3px;
    transform: translateY(-50%);
    z-index: 3;
}

/* Conteneur des marqueurs */
.your-progress-markers {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Chaque marqueur */
.your-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 5;
}

/* Point du marqueur */
.your-marker-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: transparent;
    border: 2px dashed;
    margin: 0 auto 8px;
}

.your-marker-dot.green {
    border-color: #27AE60;
}

.your-marker-dot.green.completed {
    border-style: solid;
    background: #27AE60;
}

.your-marker-dot.blue {
    border-color: #3B82F6;
}

.your-marker-dot.blue.completed {
    border-style: solid;
    background: #3B82F6;
}

.your-marker-dot.yellow {
    border-color: #eab308;
}

.your-marker-dot.yellow.completed  {
    border-style: solid;
    background: #eab308;
}

.your-marker-dot.gold {
    border-color: #D3B574;
}

.your-marker-dot.gold.completed {
    border-style: solid;
    background: #D3B574;
}


/* Label du marqueur */
.your-marker span {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 25px;
}

/* ============================================
   SECTION CTA - PRÊT À COMMENCER
   ============================================ */

.naff-cta-section {
    background: linear-gradient(145deg, rgba(8, 16, 32, 0.95), rgba(14, 26, 46, 0.9));
    border: 1px solid rgba(211, 181, 116, 0.2);
    border-radius: 20px;
    padding: 50px 40px;
    text-align: center;
    margin-top: 30px;
}

.naff-cta-section h2 {
    color: white;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.naff-cta-section p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    max-width: 500px;
    margin: 0 auto 30px;
    line-height: 1.6;
}

.naff-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.naff-btn-primary {
    background: linear-gradient(135deg, #D3B574, #b8962e);
    color: #0d1321;
    border: none;
    padding: 14px 32px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.naff-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(211, 181, 116, 0.3);
}

.naff-btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 12px 32px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.naff-btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.05);
}

.naff-cta-badges {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.naff-cta-badges span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

/* ============================================
   SECTION RÉSEAUX SOCIAUX
   ============================================ */

.naff-social-section {
    margin-top: 40px;
}

.naff-social-section h3 {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 25px;
}

.naff-social-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 15px;
}

.naff-social-card {
    background: rgba(8, 16, 32, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px 15px;
    text-align: center;
    transition: all 0.3s ease;
}

.naff-social-card:hover {
    border-color: rgba(211, 181, 116, 0.3);
    transform: translateY(-3px);
}

.naff-social-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.naff-social-icon svg {
    width: 28px;
    height: 28px;
}

/* Couleurs des icônes sociales */
.naff-social-icon.youtube {
    background: rgba(255, 0, 0, 0.15);
    color: #ff0000;
}

.naff-social-icon.tiktok {
    background: rgba(255, 255, 255, 0.1);
    color: #F5F2EB;
}

.naff-social-icon.instagram {
    background: linear-gradient(45deg, rgba(253, 29, 29, 0.15), rgba(131, 58, 180, 0.15));
    color: #e4405f;
}

.naff-social-icon.twitter {
    background: rgba(255, 255, 255, 0.1);
    color: #F5F2EB;
}

.naff-social-icon.discord {
    background: rgba(88, 101, 242, 0.15);
    color: #5865f2;
}

.naff-social-icon.telegram {
    background: rgba(38, 165, 218, 0.15);
    color: #26a5da;
}

.naff-social-icon.twitch {
    background: rgba(145, 70, 255, 0.15);
    color: #9146ff;
}

.naff-social-icon.blog {
    background: rgba(211, 181, 116, 0.12);
    color: #D3B574;
}

.naff-social-card span {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    font-weight: 500;
}

/* ============================================
   SECTION PRÉSENCE MONDIALE
   ============================================ */

.naff-worldwide-section {
    margin-top: 40px;
}

.naff-worldwide-section h3 {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 25px;
}

.naff-flags-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.flag-emoji {
    font-size: 2rem;
    transition: transform 0.2s ease;
}

.flag-emoji:hover {
    transform: scale(1.2);
}

.naff-worldwide-more {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    margin-bottom: 25px;
}

.naff-worldwide-stat {
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.15), rgba(39, 174, 96, 0.05));
    border: 1px solid rgba(39, 174, 96, 0.2);
    border-radius: 16px;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.naff-worldwide-stat-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #27AE60, #059669);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 14px rgba(39, 174, 96, 0.25);
}
.naff-worldwide-stat-icon svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.naff-worldwide-stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: #27AE60;
}

.naff-worldwide-stat-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
}

/* Responsive */
@media (max-width: 1200px) {
    .naff-social-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .naff-cta-section {
        padding: 30px 20px;
    }

    .naff-cta-section h2 {
        font-size: 1.5rem;
    }

    .naff-social-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .naff-worldwide-stat {
        flex-direction: column;
        text-align: center;
    }

    .flag-emoji {
        font-size: 1.5rem;
    }
}

/* Images de drapeaux */
.flag-img {
    width: 40px;
    height: auto;
    border-radius: 4px;
    transition: transform 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.flag-img:hover {
    transform: scale(1.15);
}

.naff-flags-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

/* ============================================
   SECTION FAQ
   ============================================ */

.naff-faq-section {
    margin-top: 40px;
}

.naff-faq-section h3 {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 25px;
}

.naff-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.naff-faq-card {
    background: rgba(8, 16, 32, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 25px;
    display: flex;
    gap: 20px;
    transition: all 0.3s ease;
}

.naff-faq-card:hover {
    border-color: rgba(211, 181, 116, 0.3);
}

.naff-faq-icon {
    width: 50px;
    height: 50px;
    background: rgba(211, 181, 116, 0.12);
    border: 1px solid rgba(211, 181, 116, 0.25);
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D4AF37;
}
.naff-faq-icon svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.naff-faq-content h4 {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.naff-faq-content p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ============================================
   SECTION CALCULATEUR
   ============================================ */

.naff-calculator-section {
    background: rgba(8, 16, 32, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px;
    margin-top: 40px;
}

.naff-calculator-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.naff-calculator-icon {
    width: 50px;
    height: 50px;
    background: rgba(211, 181, 116, 0.12);
    border: 1px solid rgba(211, 181, 116, 0.25);
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D4AF37;
}
.naff-calculator-icon svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.naff-calculator-title h3 {
    color: white;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.naff-calculator-title p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.naff-calculator-hint {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    font-style: italic;
    margin-bottom: 20px;
}

/* Sélecteurs de promotions */
.naff-promo-selectors {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.naff-promo-select {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.naff-promo-select label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.naff-promo-select select {
    background: rgba(8, 16, 32, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 12px 15px;
    color: white;
    font-size: 0.95rem;
    cursor: pointer;
    appearance: none;
    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='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.naff-promo-select select:focus {
    outline: none;
    border-color: rgba(211, 181, 116, 0.5);
}

/* Sliders */
.naff-calculator-sliders {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 30px;
}

.naff-slider-group {
    display: flex;
    flex-direction: column;
}

.naff-slider-group label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.naff-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.naff-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #D3B574;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(211, 181, 116, 0.4);
}

.naff-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #D3B574;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(211, 181, 116, 0.4);
}

.naff-slider-values {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.naff-slider-current {
    color: #D3B574;
    font-weight: 600;
}

/* Résultat du calculateur */
.naff-calculator-result {
    background: rgba(8, 16, 32, 0.8);
    border: 2px solid #D3B574;
    border-radius: 16px;
    padding: 30px;
    text-align: center;
}

.naff-result-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.naff-result-amount {
    color: #D3B574;
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.naff-result-formula {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 1200px) {
    .naff-promo-selectors {
        grid-template-columns: repeat(2, 1fr);
    }

    .naff-calculator-sliders {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .naff-faq-grid {
        grid-template-columns: 1fr;
    }

    .naff-promo-selectors {
        grid-template-columns: 1fr;
    }

    .naff-calculator-header {
        flex-direction: column;
        text-align: center;
    }

    .naff-result-amount {
        font-size: 2.5rem;
    }
}

/* ============================================
   SECTION APERÇU FLOUTÉ
   ============================================ */

.naff-blur-preview {
    margin-top: 40px;
    margin-bottom: 30px;
}

.naff-blur-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.naff-blur-card {
    background: rgba(8, 16, 32, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 25px;
    position: relative;
    overflow: hidden;
}

/* Effet de flou sur le contenu */
.naff-blur-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(2px);
    background: rgba(8, 16, 32, 0.3);
    z-index: 1;
    pointer-events: none;
}

.naff-blur-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    margin-bottom: 15px;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.naff-blur-icon svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
.naff-blur-icon.orange { background: linear-gradient(135deg, #F97316, #FB923C); }
.naff-blur-icon.blue   { background: linear-gradient(135deg, #3B82F6, #60A5FA); }
.naff-blur-icon.green  { background: linear-gradient(135deg, #10B981, #34D399); }
.naff-blur-icon.purple { background: linear-gradient(135deg, #8B5CF6, #A78BFA); }

.naff-blur-icon.has-badge::after {
    content: '';
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    background: rgba(39, 174, 96, 0.5);
    border-radius: 50%;
}

.naff-blur-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    margin-bottom: 12px;
    position: relative;
    z-index: 0;
}

.naff-blur-value {
    color: rgba(211, 181, 116, 0.4);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 8px;
    position: relative;
    z-index: 0;
}

.naff-blur-sub {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
    position: relative;
    z-index: 0;
}

/* ============================================
   BOUTON DEVENIR AFFILIÉ (Footer)
   ============================================ */

.naff-become-affiliate-footer {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 100;
}

.naff-become-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #D3B574, #b8962e);
    color: #0d1321;
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 30px rgba(211, 181, 116, 0.4);
    transition: all 0.3s ease;
}

.naff-become-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(211, 181, 116, 0.5);
}

/* Responsive */
@media (max-width: 1200px) {
    .naff-blur-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .naff-blur-grid {
        grid-template-columns: 1fr;
    }

    .naff-become-affiliate-footer {
        bottom: 20px;
        right: 20px;
        left: 20px;
    }

    .naff-become-btn {
        width: 100%;
        text-align: center;
    }
}


/* ============================================
   PAGE 10K DRAWDOWN CHALLENGE
   ============================================ */

/* Variables Tier */
:root {
    --tier-top10-bg: rgba(211, 181, 116, 0.12);
    --tier-top10-border: #D3B574;
    --tier-10percent-bg: rgba(59, 130, 246, 0.12);
    --tier-10percent-border: #3b82f6;
    --tier-50percent-bg: rgba(39, 174, 96, 0.12);
    --tier-50percent-border: #27AE60;
    --tier-100percent-bg: rgba(107, 114, 128, 0.08);
    --tier-100percent-border: #6b7280;
}

/* Hero Banner */
.ch-hero-banner {
    background: linear-gradient(135deg, var(--medium-navy) 0%, var(--deep-navy) 100%);
    border-bottom: 3px solid var(--classic-gold);
    padding: 48px 32px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ch-hero-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at center, rgba(211, 181, 116, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.ch-hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--classic-gold);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-shadow: 0 2px 20px rgba(211, 181, 116, 0.3);
    display: inline-block;
    padding: 16px 40px;
    background: rgba(211, 181, 116, 0.08);
    border: 1px solid rgba(211, 181, 116, 0.3);
    border-radius: 50px;
    position: relative;
}

.ch-hero-subtitle {
    font-size: 1.2rem;
    color: var(--cool-grey);
    margin-bottom: 8px;
    line-height: 1.6;
    position: relative;
}

.ch-hero-subtitle strong {
    color: var(--pure-white);
    font-size: 1.4rem;
}

.ch-hero-info {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 32px;
    flex-wrap: wrap;
    position: relative;
}

.ch-info-card {
    background: var(--glass-bg);
    border: 2px solid var(--classic-gold);
    border-radius: 16px;
    padding: 24px 32px;
    min-width: 200px;
    backdrop-filter: blur(10px);
}

.ch-info-label {
    font-size: 12px;
    color: var(--cool-grey);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.ch-info-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--classic-gold);
}

/* Countdown */
.ch-countdown-section {
    background: var(--medium-navy);
    border-bottom: 1px solid var(--glass-border);
    padding: 32px;
    text-align: center;
}

.ch-countdown-title {
    font-size: 14px;
    color: var(--cool-grey);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 24px;
}

.ch-countdown-timer {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ch-time-box {
    background: var(--glass-bg);
    border: 2px solid var(--classic-gold);
    border-radius: 16px;
    padding: 20px 28px;
    min-width: 100px;
}

.ch-time-value {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--classic-gold);
    line-height: 1;
}

.ch-time-label {
    font-size: 11px;
    color: var(--cool-grey);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 8px;
}

/* Container */
.ch-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px;
}

.ch-section {
    margin-bottom: 32px;
}

.ch-section-card {
    padding: 28px;
}

.ch-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--classic-gold);
    flex-wrap: wrap;
    gap: 16px;
}

.ch-section-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ch-section-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--deep-navy);
}

.ch-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pure-white);
    margin: 0;
}

.ch-section-cta-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    border: none;
    border-radius: 12px;
    color: var(--deep-navy);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(211, 181, 116, 0.3);
}

.ch-section-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(211, 181, 116, 0.4);
}

/* Rewards Grid */
.ch-rewards-subtitle {
    color: var(--classic-gold);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.ch-rewards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.ch-reward-card {
    background: var(--medium-navy);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px 16px;
    text-align: center;
    transition: all 0.3s ease;
}

.ch-reward-card:hover {
    transform: translateY(-4px);
    border-color: var(--classic-gold);
    box-shadow: 0 8px 24px rgba(211, 181, 116, 0.2);
}

.ch-reward-card.top-1 {
    background: linear-gradient(135deg, var(--medium-navy) 0%, rgba(211, 181, 116, 0.08) 100%);
    border: 2px solid var(--classic-gold);
}

.ch-reward-badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.3rem;
    margin: 0 auto 16px;
    color: var(--deep-navy);
    background: var(--classic-gold);
}

.ch-reward-badge.gold {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    box-shadow: 0 4px 16px rgba(255, 215, 0, 0.4);
}

.ch-reward-badge.silver {
    background: linear-gradient(135deg, #C0C0C0 0%, #A8A8A8 100%);
    box-shadow: 0 4px 16px rgba(192, 192, 192, 0.3);
}

.ch-reward-badge.bronze {
    background: linear-gradient(135deg, #CD7F32 0%, #B87333 100%);
    box-shadow: 0 4px 16px rgba(205, 127, 50, 0.3);
}

.ch-reward-position {
    font-size: 13px;
    font-weight: 700;
    color: var(--classic-gold);
    margin-bottom: 8px;
}

.ch-reward-prize {
    font-size: 14px;
    font-weight: 700;
    color: var(--pure-white);
    margin-bottom: 4px;
}

.ch-reward-desc {
    font-size: 11px;
    color: var(--cool-grey);
}

/* Tier Rewards */
.ch-tier-rewards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ch-tier-card {
    background: var(--medium-navy);
    border-left: 4px solid var(--classic-gold);
    border-radius: 0 12px 12px 0;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.ch-tier-icon {
    width: 48px;
    height: 48px;
    background: var(--gold-dim);
    border: 2px solid var(--classic-gold);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--classic-gold);
    flex-shrink: 0;
}

.ch-tier-content { flex: 1; }

.ch-tier-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--classic-gold);
    margin-bottom: 4px;
}

.ch-tier-desc {
    font-size: 13px;
    color: var(--cool-grey);
}

/* Rules Grid */
.ch-rules-intro {
    background: var(--gold-dim);
    border-left: 4px solid var(--classic-gold);
    border-radius: 0 12px 12px 0;
    padding: 16px 20px;
    margin-bottom: 24px;
    color: var(--cool-grey);
    font-size: 14px;
    line-height: 1.6;
}

.ch-rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.ch-rule-card {
    background: var(--medium-navy);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s ease;
}

.ch-rule-card:hover {
    border-color: var(--classic-gold);
    transform: translateY(-2px);
}

.ch-rule-number {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    color: var(--deep-navy);
    margin-bottom: 16px;
}

.ch-rule-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--classic-gold);
    margin-bottom: 8px;
}

.ch-rule-content {
    font-size: 13px;
    color: var(--cool-grey);
    line-height: 1.6;
}

/* Leaderboard */
.ch-leaderboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.ch-leaderboard-info {
    background: var(--gold-dim);
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--cool-grey);
}

.ch-leaderboard-info strong {
    color: var(--classic-gold);
}

.ch-find-me-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    border: none;
    border-radius: 10px;
    color: var(--deep-navy);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(211, 181, 116, 0.3);
    font-family: 'Inter', sans-serif;
}

.ch-find-me-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(211, 181, 116, 0.4);
}

.ch-tier-legend {
    background: var(--medium-navy);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.ch-legend-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--classic-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.ch-legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.ch-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--cool-grey);
}

.ch-legend-color {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid;
}

.ch-legend-color.top10 {
    background: var(--tier-top10-bg);
    border-color: var(--tier-top10-border);
}

.ch-legend-color.top10-percent {
    background: var(--tier-10percent-bg);
    border-color: var(--tier-10percent-border);
}

.ch-legend-color.top50-percent {
    background: var(--tier-50percent-bg);
    border-color: var(--tier-50percent-border);
}

.ch-legend-color.top100-percent {
    background: var(--tier-100percent-bg);
    border-color: var(--tier-100percent-border);
}

.ch-legend-color.current-user {
    background: linear-gradient(135deg, rgba(211, 181, 116, 0.4) 0%, rgba(229, 193, 88, 0.4) 100%);
    border-color: var(--classic-gold);
    box-shadow: 0 0 10px rgba(211, 181, 116, 0.5);
}

.ch-leaderboard-container {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
}

.ch-leaderboard-container::-webkit-scrollbar {
    width: 8px;
}

.ch-leaderboard-container::-webkit-scrollbar-track {
    background: var(--deep-navy);
}

.ch-leaderboard-container::-webkit-scrollbar-thumb {
    background: var(--classic-gold);
    border-radius: 4px;
}

.ch-leaderboard-table {
    width: 100%;
    border-collapse: collapse;
}

.ch-leaderboard-table thead {
    background: var(--medium-navy);
    position: sticky;
    top: 0;
    z-index: 10;
}

.ch-leaderboard-table th {
    padding: 14px 24px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: var(--classic-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid var(--classic-gold);
}

.ch-leaderboard-table th:last-child {
    text-align: right;
}

.ch-leaderboard-table td {
    padding: 12px 24px;
    border-bottom: 1px solid var(--glass-border);
}

.ch-leaderboard-table td:last-child {
    text-align: right;
}

.ch-leaderboard-table tbody tr {
    transition: all 0.2s ease;
    position: relative;
}

.ch-leaderboard-table tbody tr:hover {
    filter: brightness(1.1);
}

/* Tier backgrounds */
.ch-tier-top10 {
    background: var(--tier-top10-bg);
}

.ch-tier-top10 td:first-child {
    border-left: 4px solid var(--tier-top10-border);
}

.ch-tier-10percent {
    background: var(--tier-10percent-bg);
}

.ch-tier-10percent td:first-child {
    border-left: 4px solid var(--tier-10percent-border);
}

.ch-tier-50percent {
    background: var(--tier-50percent-bg);
}

.ch-tier-50percent td:first-child {
    border-left: 4px solid var(--tier-50percent-border);
}

.ch-tier-100percent {
    background: var(--tier-100percent-bg);
}

.ch-tier-100percent td:first-child {
    border-left: 4px solid var(--tier-100percent-border);
}

/* Current user highlight */
.ch-current-user {
    background: linear-gradient(90deg, rgba(211, 181, 116, 0.35) 0%, rgba(211, 181, 116, 0.2) 100%) !important;
    box-shadow: inset 0 0 30px rgba(211, 181, 116, 0.12);
}

.ch-current-user td:first-child {
    border-left: 4px solid var(--classic-gold) !important;
}

.ch-current-user::after {
    content: '◀ ' attr(data-you-label);
    position: absolute;
    right: 180px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    color: var(--deep-navy);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    animation: chPulseGold 2s infinite;
    white-space: nowrap;
}

@keyframes chPulseGold {
    0%, 100% { box-shadow: 0 0 10px rgba(211, 181, 116, 0.5); }
    50% { box-shadow: 0 0 20px rgba(211, 181, 116, 0.8); }
}

.ch-current-user .ch-trader-name {
    color: var(--classic-gold) !important;
    font-weight: 800 !important;
}

.ch-current-user .ch-performance-cell {
    color: var(--light-gold) !important;
}

@keyframes chFlashHighlight {
    0%, 100% { background: linear-gradient(90deg, rgba(211, 181, 116, 0.35) 0%, rgba(211, 181, 116, 0.12) 100%); }
    50% { background: linear-gradient(90deg, rgba(211, 181, 116, 0.6) 0%, rgba(211, 181, 116, 0.35) 100%); }
}

.ch-rank-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--classic-gold);
}

.ch-rank-medal {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
    color: var(--deep-navy);
}

.ch-rank-medal.gold {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.5);
}

.ch-rank-medal.silver {
    background: linear-gradient(135deg, #C0C0C0, #A8A8A8);
    box-shadow: 0 2px 10px rgba(192, 192, 192, 0.4);
}

.ch-rank-medal.bronze {
    background: linear-gradient(135deg, #CD7F32, #B87333);
    box-shadow: 0 2px 10px rgba(205, 127, 50, 0.4);
}

.ch-trader-name {
    font-weight: 600;
    color: var(--pure-white);
}

.ch-performance-cell {
    font-weight: 700;
    color: var(--classic-gold);
    font-size: 1rem;
}

.ch-leaderboard-footer {
    padding: 16px 20px;
    text-align: center;
    font-size: 12px;
    color: var(--cool-grey);
    border-top: 1px solid var(--glass-border);
    margin-top: 16px;
}

/* Full width leaderboard */
.ch-leaderboard-section .ch-section-card {
    padding: 28px;
}

.ch-leaderboard-section .ch-leaderboard-container {
    margin-left: -28px;
    margin-right: -28px;
    width: calc(100% + 56px);
    border-radius: 0;
    border-left: none;
    border-right: none;
}

.ch-leaderboard-section .ch-leaderboard-table th,
.ch-leaderboard-section .ch-leaderboard-table td {
    padding-left: 28px;
    padding-right: 28px;
}

/* Hall of Fame */
.ch-hof-intro {
    text-align: center;
    margin-bottom: 40px;
}

.ch-hof-intro-text {
    font-size: 15px;
    color: var(--cool-grey);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.ch-hof-stats {
    display: flex;
    justify-content: center;
    gap: 48px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.ch-hof-stat {
    text-align: center;
}

.ch-hof-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--classic-gold);
}

.ch-hof-stat-label {
    font-size: 11px;
    color: var(--cool-grey);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

.ch-hof-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.ch-hof-card {
    background: linear-gradient(135deg, var(--medium-navy) 0%, var(--deep-navy) 100%);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 28px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.ch-hof-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--classic-gold) 0%, var(--light-gold) 50%, var(--classic-gold) 100%);
}

.ch-hof-card::after {
    content: '';
    position: absolute;
    top: -50%; right: -50%;
    width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(211, 181, 116, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.ch-hof-card:hover {
    border-color: var(--classic-gold);
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(211, 181, 116, 0.12);
}

.ch-hof-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.ch-hof-month-badge {
    background: var(--gold-dim);
    border: 1px solid rgba(211, 181, 116, 0.3);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    color: var(--classic-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ch-hof-trophy-container {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(211, 181, 116, 0.2) 0%, rgba(211, 181, 116, 0.05) 100%);
    border: 2px solid var(--classic-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 0 20px rgba(211, 181, 116, 0.3);
    animation: chTrophyGlow 3s ease-in-out infinite;
}

@keyframes chTrophyGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(211, 181, 116, 0.3); }
    50% { box-shadow: 0 0 30px rgba(211, 181, 116, 0.5); }
}

.ch-hof-winner-section {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.ch-hof-avatar {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    color: var(--deep-navy);
    box-shadow: 0 4px 12px rgba(211, 181, 116, 0.3);
}

.ch-hof-winner-info {
    flex: 1;
}

.ch-hof-winner-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--pure-white);
    margin-bottom: 4px;
}

.ch-hof-winner-country {
    font-size: 13px;
    color: var(--cool-grey);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ch-hof-prize-section {
    background: var(--gold-dim);
    border: 1px solid rgba(211, 181, 116, 0.2);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ch-hof-prize-label {
    font-size: 11px;
    color: var(--cool-grey);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ch-hof-prize-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--classic-gold);
    text-shadow: 0 0 20px rgba(211, 181, 116, 0.3);
}

.ch-hof-reward-tag {
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    color: var(--deep-navy);
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* CTA Section */
.ch-cta-section {
    text-align: center;
    padding: 48px 32px;
    background: linear-gradient(180deg, transparent 0%, rgba(211, 181, 116, 0.05) 100%);
}

.ch-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 20px 48px;
    background: linear-gradient(135deg, var(--classic-gold) 0%, var(--light-gold) 100%);
    border: none;
    border-radius: 16px;
    color: var(--deep-navy);
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(211, 181, 116, 0.4);
}

.ch-cta-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(211, 181, 116, 0.5);
}

.ch-cta-subtitle {
    margin-top: 16px;
    font-size: 13px;
    color: var(--cool-grey);
}

/* Responsive */
@media (max-width: 1200px) {
    .ch-rewards-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

@media (max-width: 900px) {
    .ch-hero-title {
        font-size: 1.8rem;
        letter-spacing: 2px;
        padding: 12px 24px;
    }

    .ch-hero-info {
        gap: 16px;
    }

    .ch-info-card {
        min-width: 160px;
        padding: 16px 20px;
    }

    .ch-time-box {
        min-width: 80px;
        padding: 16px 20px;
    }

    .ch-time-value {
        font-size: 2rem;
    }

    .ch-section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .ch-current-user::after {
        right: 120px;
    }
}

@media (max-width: 600px) {
    .ch-container {
        padding: 20px 16px;
    }

    .ch-section-card {
        padding: 20px;
    }

    .ch-rules-grid {
        grid-template-columns: 1fr;
    }

    .ch-leaderboard-header {
        flex-direction: column;
    }

    .ch-legend-items {
        flex-direction: column;
        gap: 8px;
    }

    .ch-hof-stats {
        gap: 24px;
    }

    .ch-current-user::after {
        display: none;
    }
}

/* ===== Clickable stat card (Conversions) ===== */
.aff-stat-card-clickable {
    position: relative;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.aff-stat-card-clickable:hover {
    transform: translateY(-2px);
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.15);
}
.aff-stat-card-clickable:focus-visible {
    outline: 2px solid rgba(16, 185, 129, 0.7);
    outline-offset: 2px;
}
.aff-stat-chevron {
    position: absolute;
    top: 16px;
    right: 18px;
    font-size: 22px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.35);
    transition: transform .15s ease, color .15s ease;
}
.aff-stat-card-clickable:hover .aff-stat-chevron {
    color: #10B981;
    transform: translateX(3px);
}

/* ===== Conversions modal ===== */
.conversions-modal-content {
    width: 920px;
    max-width: 95vw;
    max-height: 80vh;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.conversions-modal-body {
    overflow-y: auto;
    padding: 0 28px 28px;
}
.conversions-modal-body::-webkit-scrollbar { width: 8px; }
.conversions-modal-body::-webkit-scrollbar-track { background: transparent; }
.conversions-modal-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

.conversions-loading,
.conversions-empty {
    padding: 48px 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
}

.conversions-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    color: #fff;
}
.conversions-table thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    padding: 16px 14px;
    background-color: #0f172a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05) inset;
    position: sticky;
    top: 0;
    z-index: 2;
}
.conversions-table thead th:first-child { border-top-left-radius: 8px; }
.conversions-table thead th:last-child  { border-top-right-radius: 8px; }
.conversions-table tbody td {
    padding: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}
.conversions-table tbody tr:hover td {
    background: rgba(16, 185, 129, 0.05);
}
.conv-coupon-pill {
    display: inline-block;
    padding: 3px 9px;
    background: rgba(211, 181, 116, 0.12);
    border: 1px solid rgba(211, 181, 116, 0.3);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    color: #D4AF37;
    letter-spacing: 0.3px;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

@media (max-width: 640px) {
    .conversions-table thead { display: none; }
    .conversions-table tbody td {
        display: block;
        padding: 6px 0;
        border-bottom: none;
    }
    .conversions-table tbody tr {
        display: block;
        padding: 14px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
}

/* ===== Active codes grouped by category ===== */
.active-codes-section {
    margin-top: 22px;
}
.active-codes-section:first-of-type {
    margin-top: 12px;
}
.active-codes-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 4px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 16px;
}
.active-codes-section-header .section-title-line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}
.active-codes-section-header .section-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D4AF37;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
}
.active-codes-section-header .section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 9px;
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    color: #D4AF37;
}
.active-codes-empty {
    padding: 28px 8px;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
}

/* ===== Monthly Commission feature block ===== */
.monthly-commission-block {
    display: grid;
    grid-template-columns: minmax(180px, auto) minmax(140px, auto) 1fr;
    align-items: center;
    gap: 28px;
    padding: 22px 26px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}
.monthly-commission-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 50%, rgba(212, 175, 55, 0.08), transparent 60%);
    pointer-events: none;
}
.mcb-left {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}
.mcb-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.08));
    border: 1px solid rgba(212, 175, 55, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D4AF37;
    flex-shrink: 0;
}
.mcb-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mcb-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.mcb-month {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}
.mcb-center {
    position: relative;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: 28px;
}
.mcb-amount {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.5px;
    line-height: 1;
}
.mcb-right {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: 28px;
}
.mcb-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.mcb-progress-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
.mcb-progress-value {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.mcb-progress-divider {
    color: rgba(255, 255, 255, 0.35);
    margin: 0 2px;
}
.mcb-progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 100px;
    overflow: hidden;
}
.mcb-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #D4AF37, #F4D03F);
    border-radius: 100px;
    transition: width 0.4s ease;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
}
.mcb-progress-fill.reached {
    background: linear-gradient(90deg, #10B981, #34D399);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
}
.mcb-helper {
    font-size: 12px;
    margin-top: 2px;
}
.mcb-helper.positive {
    color: #34D399;
    font-weight: 600;
}
.mcb-helper.muted {
    color: rgba(255, 255, 255, 0.55);
}

/* allow Card 4 sub to use a positive (green) tone */
.aff-stat-sub.positive {
    color: #34D399;
    font-weight: 600;
}
.aff-stat-sub.muted {
    color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 900px) {
    .monthly-commission-block {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .mcb-center,
    .mcb-right {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 18px;
    }
}

/* ===== Withdraw button (Card 4) ===== */
.aff-stat-card.has-withdraw-btn {
    position: relative;
}
.aff-withdraw-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: linear-gradient(135deg, #D4AF37, #F4D03F);
    border: 1px solid rgba(212, 175, 55, 0.5);
    color: #0a0a0f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    box-shadow: 0 2px 10px rgba(212, 175, 55, 0.3);
}
.aff-withdraw-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.5);
}
.aff-withdraw-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ===== Monthly block — anytime-withdraw variant ===== */
.mcb-anytime-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mcb-anytime-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 5px 11px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #34D399;
}
.mcb-anytime-badge.mcb-anytime-badge-empty {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.55);
}
.mcb-anytime-badge.mcb-anytime-badge-pending {
    background: rgba(234, 179, 8, 0.12);
    border-color: rgba(234, 179, 8, 0.35);
    color: #eab308;
}
.mcb-helper.pending-validation {
    color: #fbbf24;
    font-weight: 500;
}
.aff-stat-sub.pending-validation {
    color: #fbbf24;
    font-weight: 600;
}
.mcb-withdraw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    margin-top: 4px;
    align-self: flex-start;
    background: linear-gradient(135deg, #D4AF37, #F4D03F);
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 10px;
    color: #0a0a0f;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.3);
}
.mcb-withdraw-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(212, 175, 55, 0.5);
}
.mcb-withdraw-btn:disabled {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.4);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* ===== Withdraw modal ===== */
.withdraw-modal-content {
    width: 480px;
    max-width: 95vw;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.withdraw-modal-body {
    padding: 24px 28px 28px;
}
.withdraw-summary {
    text-align: center;
    padding: 24px 16px;
    background: rgba(212, 175, 55, 0.06);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 12px;
    margin-bottom: 20px;
}
.withdraw-summary-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
}
.withdraw-summary-amount {
    display: block;
    font-size: 36px;
    font-weight: 800;
    color: #D4AF37;
    letter-spacing: -1px;
    margin-bottom: 14px;
    line-height: 1.1;
}
.withdraw-summary-note {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
}
.withdraw-error {
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 13px;
    margin-bottom: 16px;
}
.withdraw-success {
    padding: 12px 16px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 8px;
    color: #6ee7b7;
    font-size: 13px;
    margin-bottom: 16px;
    font-weight: 600;
}
.withdraw-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}
.withdraw-btn-cancel,
.withdraw-btn-confirm {
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    border: 1px solid transparent;
}
.withdraw-btn-cancel {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
}
.withdraw-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.08);
}
.withdraw-btn-confirm {
    background: linear-gradient(135deg, #D4AF37, #F4D03F);
    border-color: rgba(212, 175, 55, 0.5);
    color: #0a0a0f;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.3);
}
.withdraw-btn-confirm:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(212, 175, 55, 0.5);
}
.withdraw-btn-confirm:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}