/* Payouts Page */
 .payouts-hero {
   background: var(--grad-primary);
   border-radius: var(--r-3, 16px);
   padding: 2.25rem 2rem;
   color: var(--c-on-primary);
   margin-bottom: 1.5rem;
   position: relative;
   overflow: hidden;
   box-shadow: var(--shadow-2, var(--shadow));
 }
 .payouts-hero::before {
   content: '';
   position: absolute;
   top: -80px;
   right: -80px;
   width: 260px;
   height: 260px;
   background: color-mix(in oklab, var(--c-on-primary) 14%, transparent);
   border-radius: 50%;
 }
 .payouts-hero::after {
   content: '';
   position: absolute;
   bottom: -70px;
   left: -50px;
   width: 200px;
   height: 200px;
   background: color-mix(in oklab, var(--c-on-primary) 9%, transparent);
   border-radius: 50%;
 }
 .payouts-hero-content { position: relative; z-index: 1; }
 .payouts-hero-label {
   font-size: 12px;
   color: color-mix(in oklab, var(--c-on-primary) 82%, transparent);
   margin-bottom: 8px;
   text-transform: uppercase;
   letter-spacing: 0.6px;
   font-weight: 800;
 }
 .payouts-hero-amount {
   font-size: 3.25rem;
   font-weight: 900;
   line-height: 1;
   color: var(--c-on-primary);
   text-shadow: 0 10px 26px color-mix(in oklab, var(--c-overlay) 55%, transparent);
 }
 .payouts-hero-sub {
   font-size: 14px;
   color: color-mix(in oklab, var(--c-on-primary) 72%, transparent);
   margin-top: 10px;
 }
 .payouts-hero-actions { margin-top: 16px; }
 .payouts-hero-actions .btn:not(.btn-primary):not(.btn-secondary):not(.btn-danger) {
   background: color-mix(in oklab, var(--c-on-primary) 18%, transparent);
   color: var(--c-on-primary);
   border: 1px solid color-mix(in oklab, var(--c-on-primary) 28%, transparent);
   box-shadow: 0 16px 36px color-mix(in oklab, var(--c-overlay) 30%, transparent);
 }
 .payouts-hero-actions .btn:not(.btn-primary):not(.btn-secondary):not(.btn-danger):hover {
   border-color: color-mix(in oklab, var(--c-on-primary) 45%, transparent);
   box-shadow: 0 18px 48px color-mix(in oklab, var(--c-overlay) 38%, transparent);
 }
 
 .payouts-stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1rem;
   margin-bottom: 1.5rem;
 }
 .payout-stat {
   background: var(--c-surface);
   border: 1px solid var(--c-border);
   border-radius: var(--r-2, 14px);
   padding: 1.1rem 1rem;
   text-align: center;
   box-shadow: var(--shadow-1, var(--shadow-sm));
   transition: transform var(--t-fast, 120ms), box-shadow var(--t-med, 220ms), border-color var(--t-med, 220ms);
 }
 .payout-stat:hover {
   transform: translateY(-2px);
   border-color: color-mix(in oklab, var(--c-border) 55%, var(--c-primary));
   box-shadow: var(--shadow-2, var(--shadow));
 }
 .payout-stat-value {
   font-size: 1.6rem;
   font-weight: 900;
   color: var(--c-text);
 }
 .payout-stat-label {
   font-size: 11px;
   color: var(--c-muted);
   margin-top: 6px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   font-weight: 800;
 }
 
 .payout-section {
   background: var(--c-surface);
   border: 1px solid var(--c-border);
   border-radius: var(--r-2, 14px);
   padding: 1.4rem;
   margin-bottom: 1rem;
   box-shadow: var(--shadow-1, var(--shadow-sm));
 }
 .payout-section-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
   padding-bottom: 0.75rem;
   border-bottom: 1px solid var(--c-divider);
 }
 .payout-section-title {
   font-size: 1.05rem;
   font-weight: 900;
   margin: 0;
   color: var(--c-text);
 }
 
 .payout-method-card {
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 1rem 1.1rem;
   background: var(--c-surface-2);
   border-radius: var(--r-2, 14px);
   margin-bottom: 0.75rem;
   border: 1px solid var(--c-border);
   transition: transform var(--t-fast, 120ms), box-shadow var(--t-med, 220ms), border-color var(--t-med, 220ms);
 }
 .payout-method-card:hover {
   transform: translateY(-1px);
   border-color: color-mix(in oklab, var(--c-border) 55%, var(--c-primary));
   box-shadow: var(--shadow-1, var(--shadow-sm));
 }
 .payout-method-card.is-default {
   border-color: var(--c-border-strong);
   background: color-mix(in oklab, var(--c-primary) 10%, var(--c-surface));
 }
 .payout-method-icon {
   width: 52px;
   height: 52px;
   border-radius: var(--r-2, 14px);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.6rem;
   flex-shrink: 0;
   box-shadow: 0 10px 26px color-mix(in oklab, var(--c-border) 35%, transparent);
   border: 1px solid color-mix(in oklab, var(--c-border) 65%, transparent);
 }
 .payout-method-icon.etransfer { background: color-mix(in oklab, var(--c-secondary) 20%, var(--c-surface)); }
 .payout-method-icon.paypal { background: color-mix(in oklab, var(--c-primary) 18%, var(--c-surface)); }
 .payout-method-icon.stripe { background: color-mix(in oklab, var(--c-accent) 18%, var(--c-surface)); }
 .payout-method-icon.bank { background: color-mix(in oklab, var(--c-warn) 20%, var(--c-surface)); }
 .payout-method-info { flex: 1; min-width: 0; }
 .payout-method-name { font-weight: 900; font-size: 1rem; color: var(--c-text); }
 .payout-method-detail { font-size: 0.85rem; color: var(--c-muted); margin-top: 4px; }
 .payout-method-badge {
   font-size: 11px;
   background: var(--grad-primary);
   color: var(--c-on-primary);
   padding: 0.3rem 0.65rem;
   border-radius: 999px;
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: 0.4px;
   border: 1px solid color-mix(in oklab, var(--c-primary) 55%, transparent);
 }
 .payout-method-actions { display: flex; gap: 0.5rem; }
 
 .payout-empty {
   text-align: center;
   padding: 2.5rem 1.75rem;
   background: var(--c-surface-2);
   border-radius: 16px;
   border: 1px dashed var(--c-border-strong);
   box-shadow: var(--shadow-1, var(--shadow-sm));
 }
 .payout-empty.payout-empty--compact { padding: 1.5rem; }
 .payout-empty p { color: var(--c-muted); margin: 0 0 1rem; font-weight: 600; }
 
 .payout-history-item {
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 0.9rem 1rem;
   border-bottom: 1px solid var(--c-divider);
   margin: 0 -0.5rem;
 }
 .payout-history-item:last-child { border-bottom: none; }
 .payout-history-item:hover {
   background: color-mix(in oklab, var(--c-surface-2) 65%, transparent);
   border-radius: var(--r-2, 14px);
 }
 .payout-history-icon {
   width: 40px;
   height: 40px;
   border-radius: 999px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.1rem;
   margin-right: 1rem;
   flex-shrink: 0;
   font-weight: 900;
   border: 1px solid var(--c-border);
 }
 .payout-history-icon.completed { background: color-mix(in oklab, var(--c-success) 18%, var(--c-surface)); color: var(--c-success); }
 .payout-history-icon.pending { background: color-mix(in oklab, var(--c-warn) 18%, var(--c-surface)); color: var(--c-warn); }
 .payout-history-icon.failed { background: color-mix(in oklab, var(--c-danger) 18%, var(--c-surface)); color: var(--c-danger); }
 .payout-history-info { flex: 1; }
 .payout-history-amount { font-weight: 900; font-size: 1.05rem; color: var(--c-text); }
 .payout-history-meta { font-size: 0.85rem; color: var(--c-muted); margin-top: 2px; }
 .payout-history-status {
   font-size: 11px;
   padding: 0.35rem 0.75rem;
   border-radius: 999px;
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: 0.35px;
   border: 1px solid var(--c-border);
 }
 .payout-history-status.completed { background: color-mix(in oklab, var(--c-success) 16%, var(--c-surface)); color: var(--c-success); }
 .payout-history-status.pending { background: color-mix(in oklab, var(--c-warn) 16%, var(--c-surface)); color: var(--c-warn); }
 .payout-history-status.failed { background: color-mix(in oklab, var(--c-danger) 16%, var(--c-surface)); color: var(--c-danger); }
 
 .add-method-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1.25rem; }
 .add-method-option {
   padding: 1.1rem 1rem;
   border: 1px solid var(--c-border);
   border-radius: var(--r-2, 14px);
   cursor: pointer;
   text-align: center;
   transition: transform var(--t-fast, 120ms), box-shadow var(--t-med, 220ms), border-color var(--t-med, 220ms), background var(--t-med, 220ms);
   background: var(--c-surface);
 }
 .add-method-option:hover {
   border-color: color-mix(in oklab, var(--c-border) 55%, var(--c-primary));
   transform: translateY(-2px);
   box-shadow: var(--shadow-1, var(--shadow-sm));
 }
 .add-method-option.selected {
   border-color: var(--c-border-strong);
   background: color-mix(in oklab, var(--c-primary) 10%, var(--c-surface));
   box-shadow: var(--shadow-2, var(--shadow));
 }
 .add-method-option-icon { font-size: 2rem; margin-bottom: 0.35rem; }
 .add-method-option-label { font-weight: 900; font-size: 0.9rem; color: var(--c-text); }
 
 .pending-banner {
   background: color-mix(in oklab, var(--c-warn) 16%, var(--c-surface));
   border-radius: var(--r-2, 14px);
   padding: 1rem;
   display: flex;
   align-items: center;
   gap: 1rem;
   margin-bottom: 1rem;
   border: 1px solid color-mix(in oklab, var(--c-border) 55%, var(--c-warn));
   box-shadow: var(--shadow-1, var(--shadow-sm));
 }
 .pending-banner-icon { font-size: 2rem; }
 .pending-banner-info { flex: 1; }
 .pending-banner-title { font-weight: 900; color: var(--c-text); }
 .pending-banner-detail { font-size: 0.9rem; color: var(--c-muted); }
 
 @media (max-width: 600px) {
   .payouts-stats { grid-template-columns: 1fr; }
   .payouts-hero-amount { font-size: 2.5rem; }
   .payout-method-card { flex-wrap: wrap; }
   .payout-method-actions { width: 100%; margin-top: 0.5rem; }
 }