.customer-details-container{padding:20px;max-width:1400px;margin:0 auto;background:#f8fafc;min-height:100vh}.customer-header{display:flex;justify-content:space-between;align-items:flex-start;background:#fff;padding:24px;border-radius:12px;box-shadow:0 2px 8px #00000014;margin-bottom:24px}.header-left{display:flex;align-items:flex-start;gap:16px}.back-btn{background:#e2e8f0;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;color:#64748b;font-weight:500;transition:all .2s}.back-btn:hover{background:#cbd5e1;color:#475569}.customer-basic-info h1{font-size:28px;font-weight:700;color:#1e293b;margin:0 0 8px}.status-badge{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.status-badge.active{background:#dcfce7;color:#166534}.status-badge.inactive{background:#fef3c7;color:#92400e}.status-badge.suspended{background:#fecaca;color:#991b1b}.status-badge.pending{background:#dbeafe;color:#1d4ed8}.customer-id{color:#64748b;font-size:14px;margin:4px 0 0}.header-actions{display:flex;gap:12px;align-items:center}.status-dropdown,.edit-btn{padding:8px 16px;border:1px solid #d1d5db;border-radius:8px;background:#fff;cursor:pointer;font-weight:500;transition:all .2s}.edit-btn{background:#3b82f6;color:#fff;border-color:#3b82f6}.edit-btn:hover{background:#2563eb}.summary-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:32px}.summary-card{background:#fff;padding:24px;border-radius:12px;box-shadow:0 2px 8px #00000014;border-left:4px solid}.summary-card.earnings{border-left-color:#10b981}.summary-card.referrals{border-left-color:#3b82f6}.summary-card.level{border-left-color:#8b5cf6}.summary-card.orders{border-left-color:#f59e0b}.summary-card h3{font-size:14px;font-weight:600;color:#64748b;margin:0 0 8px;text-transform:uppercase;letter-spacing:.5px}.summary-card .amount,.summary-card .count,.summary-card .level-number{font-size:32px;font-weight:700;color:#1e293b;margin:0 0 4px}.summary-card .period,.summary-card .growth,.summary-card .position,.summary-card .value{font-size:14px;color:#64748b}.summary-card .growth{color:#10b981;font-weight:500}.tab-navigation{display:flex;background:#fff;border-radius:12px 12px 0 0;box-shadow:0 2px 8px #00000014;overflow:hidden}.tab-btn{flex:1;padding:16px 24px;background:transparent;border:none;cursor:pointer;font-weight:500;color:#64748b;transition:all .2s;position:relative}.tab-btn.active{color:#3b82f6;background:#f8fafc}.tab-btn.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:#3b82f6}.tab-btn:hover:not(.active){background:#f1f5f9;color:#475569}.tab-content{background:#fff;border-radius:0 0 12px 12px;box-shadow:0 2px 8px #00000014;min-height:500px}.overview-tab{padding:32px}.overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}.info-section h3{font-size:18px;font-weight:600;color:#1e293b;margin:0 0 20px;padding-bottom:8px;border-bottom:2px solid #e2e8f0}.info-grid{display:grid;gap:16px}.info-item{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f1f5f9}.info-item label{font-weight:500;color:#64748b;min-width:140px}.info-item span{color:#1e293b;font-weight:500}.referral-code{background:#dbeafe;color:#1d4ed8;padding:4px 8px;border-radius:6px;font-family:monospace;font-size:14px}.commissions-tab{padding:32px}.commissions-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.commissions-header h3{font-size:18px;font-weight:600;color:#1e293b;margin:0}.commission-filters{display:flex;gap:12px}.filter-select,.date-filter{padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;background:#fff}.commissions-table{overflow-x:auto}.commissions-table table{width:100%;border-collapse:collapse}.commissions-table th,.commissions-table td{text-align:left;padding:12px 16px;border-bottom:1px solid #f1f5f9}.commissions-table th{background:#f8fafc;font-weight:600;color:#374151;font-size:14px}.commission-type{padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500}.commission-type.type-0{background:#dcfce7;color:#166534}.commission-type.type-1{background:#dbeafe;color:#1d4ed8}.commission-type.type-2{background:#fef3c7;color:#92400e}.positive{color:#10b981;font-weight:600}.negative{color:#ef4444;font-weight:600}.genealogy-tab{padding:32px}.tree-visualization{max-width:800px;margin:0 auto}.upline-section,.current-user-section,.downline-section{margin:32px 0}.upline-section h4,.downline-section h4{text-align:center;font-size:16px;font-weight:600;color:#64748b;margin-bottom:20px}.tree-node{background:#fff;border:2px solid #e2e8f0;border-radius:12px;padding:16px;margin:8px 0;transition:all .2s}.tree-node.current{border-color:#3b82f6;background:#f0f9ff}.tree-node.upline{border-color:#10b981;background:#f0fdf4}.tree-node.downline{border-color:#f59e0b;background:#fffbeb}.node-content{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.level-badge{background:#1e293b;color:#fff;padding:4px 8px;border-radius:20px;font-size:12px;font-weight:600;min-width:32px;text-align:center}.node-name{font-weight:600;color:#1e293b}.node-email{color:#64748b;font-size:14px}.current-indicator{background:#3b82f6;color:#fff;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600}.referrals-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}.connector{text-align:center;font-size:20px;color:#64748b;margin:8px 0}.referrals-tab{padding:32px}.referrals-header{margin-bottom:32px}.referrals-header h3{font-size:18px;font-weight:600;color:#1e293b;margin:0 0 16px}.network-stats{display:flex;gap:32px;flex-wrap:wrap}.network-stats .stat{display:flex;flex-direction:column;gap:4px}.network-stats .label{font-size:14px;color:#64748b;font-weight:500}.network-stats .value{font-size:24px;font-weight:700;color:#1e293b}.referrals-list{display:grid;gap:16px}.referral-card{display:flex;align-items:center;justify-content:space-between;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:20px;transition:all .2s}.referral-card:hover{border-color:#3b82f6;transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.referral-info{display:flex;align-items:center;gap:16px}.referral-avatar{width:48px;height:48px;background:#3b82f6;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px}.referral-details h4{font-size:16px;font-weight:600;color:#1e293b;margin:0 0 4px}.referral-details p{color:#64748b;margin:0 0 4px;font-size:14px}.join-date{font-size:12px;color:#94a3b8}.referral-stats{display:flex;gap:24px}.stat-item{display:flex;flex-direction:column;align-items:center;gap:4px}.stat-item span{font-size:12px;color:#64748b;font-weight:500}.stat-item strong{font-size:16px;font-weight:600;color:#1e293b}.referral-actions .view-btn{background:#3b82f6;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-weight:500;transition:all .2s}.referral-actions .view-btn:hover{background:#2563eb}.loading-container,.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;text-align:center}.spinner{width:40px;height:40px;border:4px solid #e2e8f0;border-top:4px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 1024px){.customer-header{flex-direction:column;gap:16px}.overview-grid,.referrals-grid{grid-template-columns:1fr}}@media (max-width: 768px){.customer-details-container{padding:16px}.summary-cards{grid-template-columns:1fr}.tab-navigation{flex-wrap:wrap}.tab-btn{flex:none;min-width:120px}.referral-stats{flex-direction:column;gap:12px}.network-stats{justify-content:center;text-align:center}}