*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;color:#333;background:#f5f5f5}.app{display:flex;min-height:100vh}.sidebar{width:250px;background:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column}.sidebar-header{padding:20px;border-bottom:1px solid #e0e0e0}.sidebar-header h1{font-size:18px;font-weight:600;color:#333}.sidebar-nav{flex:1;padding:20px 0}.sidebar-section{margin-bottom:30px}.sidebar-section-title{padding:0 20px;font-size:12px;font-weight:600;color:#999;text-transform:uppercase;margin-bottom:10px}.sidebar-link{display:block;padding:10px 20px;color:#666;text-decoration:none;transition:background .2s}.sidebar-link:hover{background:#f5f5f5;color:#333}.sidebar-link.active{background:#e3f2fd;color:#1976d2;font-weight:500}.main-content{flex:1;padding:40px;overflow-y:auto}.page-header{margin-bottom:30px}.page-header h1{font-size:28px;font-weight:600;margin-bottom:8px}.page-header p{color:#666;font-size:14px}.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:30px}.card{background:#fff;border-radius:8px;padding:20px;box-shadow:0 1px 3px #0000001a}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.card-title{font-size:14px;font-weight:500;color:#666}.card-value{font-size:28px;font-weight:600;color:#333;margin-bottom:8px}.card-description{font-size:12px;color:#999}.login-container{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#f5f5f5}.login-card{background:#fff;padding:40px;border-radius:8px;box-shadow:0 2px 8px #0000001a;width:100%;max-width:400px}.login-card h1{font-size:24px;font-weight:600;margin-bottom:8px}.login-card p{color:#666;font-size:14px;margin-bottom:30px}.form-group{margin-bottom:20px}.form-label{display:block;font-size:14px;font-weight:500;margin-bottom:8px;color:#333}.form-input{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px;transition:border-color .2s}.form-input:focus{outline:none;border-color:#1976d2}.form-error{color:#d32f2f;font-size:12px;margin-top:12px}.btn{display:inline-block;padding:10px 20px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s;text-decoration:none}.btn-primary{background:#1976d2;color:#fff;width:100%}.btn-primary:hover{background:#1565c0}.btn-primary:disabled{background:#ccc;cursor:not-allowed}.loading{display:flex;align-items:center;justify-content:center;min-height:100vh}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #1976d2;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.badge{display:inline-block;padding:4px 8px;font-size:12px;font-weight:500;border-radius:4px;background:#e3f2fd;color:#1976d2}.badge.success{background:#e8f5e9;color:#4caf50}.badge.warning{background:#fff3e0;color:#ff9800}.table-container{overflow-x:auto;margin-top:16px}.table{width:100%;border-collapse:collapse;font-size:14px}.table thead{background:#f5f5f5}.table th{text-align:left;padding:12px;font-weight:600;color:#666;border-bottom:2px solid #e0e0e0}.table td{padding:12px;border-bottom:1px solid #eee}.table tbody tr:hover{background:#fafafa}.table tfoot td{font-weight:600;border-top:2px solid #e0e0e0;background:#f5f5f5}.btn-sm{padding:6px 12px;font-size:12px}.search-bar{display:flex;gap:10px}.clients-list{display:flex;flex-direction:column;gap:16px;margin-top:16px}.client-card{display:flex;gap:20px;padding:20px;border:1px solid #e0e0e0;border-radius:8px;background:#fff;transition:box-shadow .2s}.client-card:hover{box-shadow:0 2px 8px #0000001a}.client-info{flex:1}.client-info h4{font-size:18px;font-weight:600;margin-bottom:8px;color:#333}.client-details{display:flex;flex-direction:column;gap:6px}.client-detail-item{display:flex;gap:8px;font-size:14px}.label{font-weight:500;color:#666}.client-suppliers{flex:1}.supplier-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:#e3f2fd;border-radius:4px;font-size:13px}.supplier-badge .commission{font-weight:600;color:#1976d2}.client-actions{display:flex;align-items:center}.dialog-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.dialog{background:#fff;border-radius:8px;width:90%;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:0 4px 16px #0003}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e0e0e0}.dialog-header h3{font-size:20px;font-weight:600;color:#333}.dialog-close{background:none;border:none;font-size:28px;color:#999;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background .2s}.dialog-close:hover{background:#f5f5f5;color:#333}.dialog-content{padding:20px}.dialog-footer{display:flex;justify-content:flex-end;gap:10px;padding:20px;border-top:1px solid #e0e0e0}.suppliers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:20px}.supplier-card{background:#fff;border-radius:8px;padding:20px;box-shadow:0 1px 3px #0000001a}.supplier-header{display:flex;align-items:center;gap:16px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #e0e0e0}.supplier-logo{width:60px;height:60px;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}.supplier-logo img{width:100%;height:100%;object-fit:cover}.supplier-logo-placeholder{width:60px;height:60px;border-radius:8px;background:#1976d2;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600}.supplier-title h3{font-size:18px;font-weight:600;margin-bottom:4px}.supplier-body{display:flex;flex-direction:column;gap:12px}.supplier-info-row{display:flex;justify-content:space-between;font-size:14px}.supplier-commission{margin-top:16px;padding-top:16px;border-top:1px solid #e0e0e0}.supplier-stats-header{display:flex;align-items:center;gap:16px;padding:20px}