.api-management-container{padding:20px;min-height:100vh;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.api-management-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;background:#fff;padding:25px;border-radius:15px;box-shadow:0 4px 20px #0000001a}.header-content h1{margin:0;color:#2c3e50;font-size:2.2rem;font-weight:700}.header-content p{margin:8px 0 0;color:#7f8c8d;font-size:1.1rem}.create-client-btn{background:linear-gradient(45deg,#667eea,#764ba2);border:none;color:#fff;padding:12px 24px;border-radius:25px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:1rem}.create-client-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px #667eea66}.api-tabs{display:flex;background:#fff;border-radius:15px;padding:8px;margin-bottom:25px;box-shadow:0 2px 15px #00000014;overflow-x:auto;align-items:center}.api-tab{display:flex;align-items:center;padding:12px 20px;border:none;background:transparent;border-radius:10px;cursor:pointer;transition:all .3s ease;white-space:nowrap;margin:0 2px;font-weight:500}.api-tab:hover{background:#f8f9fb;transform:translateY(-1px)}.api-tab.active{background:linear-gradient(45deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 15px #667eea4d}.tab-icon{margin-right:8px;font-size:1.2rem}.tab-label{font-size:.95rem}.tab-divider{display:flex;align-items:center;gap:10px;margin:0 15px;padding:0 15px;border-left:2px solid #e9ecef;border-right:2px solid #e9ecef}.client-name{font-weight:600;color:#2c3e50;font-size:.9rem;white-space:nowrap}.back-btn{background:linear-gradient(45deg,#6c757d,#495057);border:none;color:#fff;padding:6px 10px;border-radius:8px;cursor:pointer;transition:all .3s ease;font-size:.8rem;font-weight:600}.back-btn:hover{transform:translateY(-1px);box-shadow:0 4px 10px #6c757d4d}.api-content{background:#fff;border-radius:15px;padding:30px;box-shadow:0 4px 20px #0000001a;min-height:600px}.overview-tab{padding:0}.overview-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:30px}.stat-card{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:25px;border-radius:15px;display:flex;align-items:center;transition:transform .3s ease}.stat-card.revenue{background:linear-gradient(135deg,#22c55e,#16a085);color:#fff}.stat-card.costs{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.stat-card.profit{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff}.stat-card:hover{transform:translateY(-5px)}.stat-icon{font-size:2.5rem;margin-right:20px;opacity:.9}.stat-content{flex:1}.stat-number{font-size:2rem;font-weight:700;margin-bottom:5px}.stat-label{font-size:1rem;opacity:.9;margin-bottom:3px}.stat-detail{font-size:.85rem;opacity:.7}.recent-activity{background:#f8f9fb;padding:25px;border-radius:15px;margin-top:20px}.recent-activity h3{margin-top:0;margin-bottom:20px;color:#2c3e50}.activity-list{display:flex;flex-direction:column;gap:15px}.activity-item{display:flex;justify-content:space-between;align-items:center;padding:15px;background:#fff;border-radius:10px;border-left:4px solid #667eea}.activity-client{flex:1}.client-name{font-weight:600;color:#2c3e50;margin-bottom:3px}.client-email{color:#7f8c8d;font-size:.9rem;margin-bottom:3px}.client-last-used{color:#95a5a6;font-size:.8rem;font-style:italic}.activity-stats{display:flex;gap:20px}.activity-stat{display:flex;flex-direction:column;align-items:center;text-align:center}.stat-value{font-weight:600;color:#2c3e50;font-size:1.1rem}.stat-label{color:#7f8c8d;font-size:.8rem;margin-top:2px}.clients-tab{padding:0}.clients-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:20px}.client-card{background:#fff;border:2px solid #e9ecef;border-radius:15px;padding:20px;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.client-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(45deg,#667eea,#764ba2);opacity:0;transition:opacity .3s ease}.client-card:hover:before,.client-card.selected:before{opacity:1}.client-card:hover{border-color:#667eea;transform:translateY(-5px);box-shadow:0 10px 30px #667eea33}.client-card.selected{border-color:#667eea;background:linear-gradient(135deg,#f8f9ff,#fff)}.client-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:15px}.client-info h3{margin:0 0 5px;color:#2c3e50;font-size:1.2rem}.client-info p{margin:0;color:#7f8c8d;font-size:.9rem}.client-status{padding:4px 12px;border-radius:20px;font-size:.8rem;font-weight:600;text-transform:uppercase}.client-status.active{background:#d4edda;color:#155724}.client-status.inactive{background:#f8d7da;color:#721c24}.client-services{margin-bottom:15px}.service-badge{display:inline-block;padding:4px 8px;margin:2px;background:#e9ecef;border-radius:12px;font-size:.75rem;color:#6c757d}.service-badge.enabled{background:#d1ecf1;color:#0c5460}.client-stats{display:flex;justify-content:space-between;margin-bottom:15px}.stat{text-align:center}.stat-label{font-size:.8rem;color:#7f8c8d;display:block}.stat-value{font-weight:600;color:#2c3e50;font-size:.95rem}.client-details{display:flex;justify-content:space-between;font-size:.8rem;color:#7f8c8d;border-top:1px solid #e9ecef;padding-top:10px;margin-top:15px}.services-tab{padding:0}.services-header h3{margin:0 0 5px;color:#374151;font-size:1.5rem;font-weight:600}.services-header p{margin:0 0 25px;color:#6b7280;font-size:.95rem}.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:25px}.service-card{background:#fff;border:2px solid #e5e7eb;border-radius:15px;padding:25px;transition:all .3s ease;position:relative}.service-card.enabled{border-color:#10b981;box-shadow:0 4px 12px #10b9811a}.service-card.disabled{border-color:#d1d5db;opacity:.7}.service-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a}.service-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:15px}.service-header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.service-icon{font-size:2rem;margin-right:15px;flex-shrink:0}.service-title{flex:1}.service-title h4{margin:0 0 5px;font-size:1.1rem;font-weight:700;color:#1f2937;letter-spacing:.5px}.service-status{font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:5px}.service-status.active{color:#10b981}.service-status.inactive{color:#6b7280}.configure-btn{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;border:none;padding:8px 16px;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .3s ease}.configure-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #3b82f64d}.service-pricing{background:#f8f9fa;border-radius:10px;padding:15px;margin-bottom:20px;border-left:4px solid #3b82f6}.pricing-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.pricing-row:last-child{margin-bottom:0}.pricing-label{font-size:.9rem;color:#6b7280;font-weight:500}.pricing-value{font-size:.95rem;font-weight:600;color:#1f2937}.pricing-value.highlight{color:#f59e0b;font-size:1.1rem}.pricing-value.profit{color:#10b981}.service-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:20px}.stat-item{text-align:center;padding:12px;background:#f9fafb;border-radius:8px;border:1px solid #e5e7eb}.stat-icon{font-size:1.2rem;margin-bottom:5px}.stat-label{font-size:.7rem;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}.stat-value{font-size:.9rem;font-weight:600;color:#1f2937}.service-insights{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;padding:20px;color:#fff;margin-bottom:15px}.insights-header{font-weight:700;margin-bottom:15px;font-size:1rem}.insights-content{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.insight-item{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;padding:5px 0}.insight-item span:first-child{opacity:.9}.insight-item span:last-child{font-weight:600}.service-disabled{text-align:center;padding:30px 20px;color:#6b7280;font-style:italic}.service-toggle{display:flex;align-items:center}.toggle-switch{position:relative;display:inline-block;width:50px;height:25px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s;border-radius:25px}.toggle-slider:before{position:absolute;content:"";height:19px;width:19px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.toggle-slider{background-color:#10b981}input:checked+.toggle-slider:before{transform:translate(25px)}.api-keys-tab{padding:0}.api-keys-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;padding-bottom:15px;border-bottom:2px solid #f8f9fb}.generate-key-btn{background:linear-gradient(45deg,#28a745,#20c997);border:none;color:#fff;padding:10px 20px;border-radius:20px;font-weight:600;cursor:pointer;transition:all .3s ease}.generate-key-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #28a74566}.api-keys-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:20px}.api-key-card{background:#fff;border:2px solid #e9ecef;border-radius:15px;padding:20px;transition:all .3s ease;position:relative;overflow:hidden}.api-key-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(45deg,#ffc107,#fd7e14);opacity:0;transition:opacity .3s ease}.api-key-card:hover:before{opacity:1}.api-key-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px #ffc10733}.api-key-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:15px}.key-info h4{margin:0 0 5px;color:#2c3e50;font-size:1.1rem}.key-client{color:#7f8c8d;font-size:.9rem;margin:0}.key-status{padding:4px 12px;border-radius:15px;font-size:.75rem;font-weight:600;text-transform:uppercase}.key-status.active{background:#d4edda;color:#155724}.key-status.inactive{background:#f8d7da;color:#721c24}.key-display{background:#f8f9fb;border:1px solid #e9ecef;border-radius:10px;padding:12px;font-family:Monaco,Courier New,monospace;font-size:.85rem;word-break:break-all;margin-bottom:15px;position:relative}.copy-key-btn{position:absolute;top:8px;right:8px;background:#667eea;border:none;color:#fff;padding:4px 8px;border-radius:5px;font-size:.7rem;cursor:pointer;transition:all .3s ease}.copy-key-btn:hover{background:#764ba2}.key-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid #e9ecef}.key-actions{display:flex;gap:10px;justify-content:flex-end}.action-btn{padding:6px 12px;border:none;border-radius:8px;font-size:.8rem;cursor:pointer;transition:all .3s ease}.action-btn.delete{background:#dc3545;color:#fff}.action-btn.delete:hover{background:#c82333;transform:translateY(-1px)}.action-btn.revoke{background:#ffc107;color:#212529}.action-btn.revoke:hover{background:#e0a800;transform:translateY(-1px)}.external-apis-tab{padding:0}.external-apis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:25px}.external-api-card{background:linear-gradient(135deg,#f8f9fb,#fff);border:2px solid #e9ecef;border-radius:15px;padding:25px;transition:all .3s ease;position:relative;overflow:hidden}.external-api-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(45deg,#17a2b8,#138496);opacity:0;transition:opacity .3s ease}.external-api-card.configured:before{opacity:1}.external-api-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px #17a2b833}.api-provider-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.provider-info h3{margin:0 0 8px;color:#2c3e50;font-size:1.3rem;display:flex;align-items:center;gap:10px}.provider-description{color:#7f8c8d;font-size:.9rem;margin:0;line-height:1.5}.config-status{padding:6px 14px;border-radius:20px;font-size:.75rem;font-weight:600;text-transform:uppercase}.config-status.configured{background:#d1ecf1;color:#0c5460}.config-status.not-configured{background:#f8d7da;color:#721c24}.api-form{display:flex;flex-direction:column;gap:15px}.form-group label{margin-bottom:5px;font-weight:600;color:#2c3e50;font-size:.9rem}.form-group input,.form-group select{padding:10px;border:2px solid #e9ecef;border-radius:8px;font-size:.9rem;transition:all .3s ease}.form-group input:focus,.form-group select:focus{outline:none;border-color:#17a2b8;box-shadow:0 0 0 3px #17a2b81a}.save-config-btn{background:linear-gradient(45deg,#17a2b8,#138496);border:none;color:#fff;padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;margin-top:10px}.save-config-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #17a2b84d}.usage-billing-tab{padding:0}.billing-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:30px}.billing-card{background:linear-gradient(135deg,#6f42c1,#563d7c);color:#fff;padding:25px;border-radius:15px;display:flex;flex-direction:column;align-items:center;text-align:center;transition:transform .3s ease}.billing-card:hover{transform:translateY(-5px)}.billing-icon{font-size:2.5rem;margin-bottom:15px;opacity:.9}.billing-amount{font-size:2rem;font-weight:700;margin-bottom:5px}.billing-label{font-size:1rem;opacity:.9}.billing-detail{font-size:.85rem;opacity:.7;margin-top:5px}.usage-charts{background:#f8f9fb;padding:25px;border-radius:15px;margin-bottom:30px}.usage-charts h3{margin-top:0;margin-bottom:20px;color:#2c3e50}.chart-placeholder{background:#fff;border:2px dashed #e9ecef;border-radius:10px;padding:40px;text-align:center;color:#7f8c8d;font-style:italic}.client-usage-breakdown{background:#fff;border-radius:15px;overflow:hidden;box-shadow:0 2px 15px #00000014}.usage-header{background:linear-gradient(45deg,#667eea,#764ba2);color:#fff;padding:20px 25px}.usage-header h3{margin:0;font-size:1.2rem}.usage-table{width:100%;border-collapse:collapse}.usage-table th,.usage-table td{padding:15px 20px;text-align:left;border-bottom:1px solid #e9ecef}.usage-table th{background:#f8f9fb;font-weight:600;color:#2c3e50;font-size:.9rem}.usage-table td{font-size:.85rem}.usage-table tbody tr:hover{background:#f8f9fb}.usage-bar{width:100%;height:8px;background:#e9ecef;border-radius:4px;overflow:hidden;margin-top:5px}.usage-fill{height:100%;background:linear-gradient(45deg,#28a745,#20c997);border-radius:4px;transition:width .3s ease}.credits-remaining{color:#28a745;font-weight:600}.credits-warning{color:#ffc107;font-weight:600}.credits-critical{color:#dc3545;font-weight:600}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.modal-content{background:#fff;padding:30px;border-radius:20px;width:90%;max-width:500px;position:relative;box-shadow:0 20px 60px #0000004d;animation:modalSlideIn .3s ease}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-50px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.create-client-modal{max-width:600px}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;padding-bottom:15px;border-bottom:2px solid #f8f9fb}.modal-header h2{margin:0;color:#2c3e50;font-size:1.5rem}.modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#7f8c8d;transition:color .3s ease}.modal-close:hover{color:#dc3545}.create-client-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column}.form-group label{margin-bottom:8px;font-weight:600;color:#2c3e50;font-size:.95rem}.form-group input,.form-group select{padding:12px 15px;border:2px solid #e9ecef;border-radius:10px;font-size:1rem;transition:all .3s ease}.form-group input:focus,.form-group select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.services-selection{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-top:10px}.service-checkbox{display:flex;align-items:center;padding:10px;border:2px solid #e9ecef;border-radius:8px;transition:all .3s ease;cursor:pointer}.service-checkbox:hover{border-color:#667eea;background:#f8f9fb}.service-checkbox input{margin-right:10px}.service-checkbox.selected{border-color:#667eea;background:linear-gradient(135deg,#f8f9ff,#fff)}.modal-footer{display:flex;justify-content:flex-end;gap:15px;margin-top:30px;padding-top:20px;border-top:1px solid #e9ecef}.btn{padding:10px 20px;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.9rem}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.api-key-modal .modal-content{max-width:600px}.key-display-large{background:#f8f9fb;border:2px solid #e9ecef;border-radius:10px;padding:20px;font-family:Monaco,Courier New,monospace;font-size:1rem;word-break:break-all;margin:20px 0;position:relative;text-align:center}.key-warning{background:#fff3cd;border:1px solid #ffeaa7;border-radius:8px;padding:15px;margin:15px 0;color:#856404;font-size:.9rem}.key-warning strong{display:block;margin-bottom:5px}.loading-container{display:flex;justify-content:center;align-items:center;min-height:400px}.loading-spinner{text-align:center}.spinner{width:50px;height:50px;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:15px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{color:#7f8c8d;font-size:1.1rem}.error-container{text-align:center;padding:40px;color:#dc3545}.error-container h3{margin-bottom:10px;font-size:1.3rem}.error-container p{margin-bottom:20px;font-size:1rem}.retry-btn{background:#dc3545;color:#fff;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;font-weight:600;transition:all .3s ease}.retry-btn:hover{background:#c82333;transform:translateY(-1px)}.empty-state{text-align:center;padding:60px 40px;color:#7f8c8d}.empty-icon{font-size:4rem;margin-bottom:20px;opacity:.5}.empty-state h3{margin-bottom:10px;font-size:1.3rem;color:#2c3e50}.empty-state p{margin-bottom:25px;font-size:1rem;line-height:1.6}@media (max-width: 1200px){.overview-stats,.billing-overview{grid-template-columns:repeat(2,1fr)}.clients-list,.services-grid,.external-apis-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}@media (max-width: 768px){.api-management-container{padding:15px}.api-management-header{flex-direction:column;gap:15px;text-align:center}.api-tabs{flex-wrap:wrap;justify-content:center}.api-tab{margin-bottom:5px}.overview-stats,.billing-overview,.clients-list,.services-grid,.external-apis-grid,.api-keys-list{grid-template-columns:1fr}.client-stats,.service-stats,.key-stats{grid-template-columns:repeat(2,1fr)}.activity-stats{flex-direction:column;gap:10px}.modal-content{width:95%;padding:20px;margin:20px}.services-selection{grid-template-columns:1fr}.modal-footer{flex-direction:column}.usage-table{font-size:.8rem}.usage-table th,.usage-table td{padding:10px 15px}}@media (max-width: 480px){.header-content h1{font-size:1.8rem}.header-content p{font-size:1rem}.api-content,.stat-card,.billing-card{padding:20px}.stat-number,.billing-amount{font-size:1.8rem}.client-card,.service-card,.external-api-card,.api-key-card{padding:15px}.client-stats,.service-stats,.key-stats{grid-template-columns:1fr;gap:10px}}.fade-in{animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.slide-up{animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.mb-0{margin-bottom:0}.mb-1{margin-bottom:10px}.mb-2{margin-bottom:20px}.mb-3{margin-bottom:30px}.mt-0{margin-top:0}.mt-1{margin-top:10px}.mt-2{margin-top:20px}.mt-3{margin-top:30px}.p-0{padding:0}.p-1{padding:10px}.p-2{padding:20px}.p-3{padding:30px}.d-flex{display:flex}.align-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.w-100{width:100%}.h-100{height:100%}.border-radius{border-radius:8px}.shadow{box-shadow:0 2px 10px #0000001a}.shadow-lg{box-shadow:0 10px 30px #0003}.api-key-display{margin-bottom:20px}.api-key-display .form-label{display:block;margin-bottom:8px;font-weight:600;color:#2c3e50;font-size:.9rem}.api-key-container{display:flex;align-items:center;gap:8px;background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;padding:4px}.api-key-input{flex:1;border:none!important;background:transparent!important;font-family:Courier New,monospace;font-size:.9rem;padding:12px!important;color:#495057}.api-key-input:focus{outline:none!important;box-shadow:none!important}.api-key-actions{display:flex;gap:4px}.api-key-actions .btn{padding:8px 12px;border-radius:6px;font-size:.8rem;display:flex;align-items:center;gap:4px;transition:all .2s ease}.api-key-actions .btn:hover{transform:translateY(-1px)}.api-key-actions .btn:disabled{opacity:.5;cursor:not-allowed}.api-key-actions .btn:disabled:hover{transform:none}.api-key-section{margin-top:15px}.api-key-section label{display:block;font-weight:600;color:#495057;margin-bottom:8px;font-size:.9rem}.key-display-improved{display:flex;align-items:center;gap:8px;background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;padding:8px 12px;transition:all .2s ease}.key-display-improved:hover{background:#e9ecef;border-color:#ced4da}.full-api-key{flex:1;font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,monospace;font-size:.85rem;color:#495057;background:transparent;border:none;-webkit-user-select:all;user-select:all;cursor:text;word-break:break-all;line-height:1.4}.copy-btn-small{background:#17a2b8;border:none;color:#fff;padding:4px 8px;border-radius:4px;cursor:pointer;font-size:.8rem;transition:all .2s ease;flex-shrink:0}.copy-btn-small:hover{background:#138496;transform:scale(1.05)}.copy-btn-small:active{transform:scale(.95)}.masked-api-key{flex:1;font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,monospace;font-size:.85rem;color:#6c757d;background:transparent;border:none;-webkit-user-select:all;user-select:all;cursor:text;word-break:break-all;line-height:1.4;font-style:italic}.security-note{color:#28a745;font-size:.75rem;font-weight:600;background:#d4edda;padding:2px 8px;border-radius:4px;border:1px solid #c3e6cb;flex-shrink:0}.pricing-info{margin-top:20px;padding:20px;background:#f8f9fa;border-radius:10px;border:1px solid #e9ecef}.pricing-info h4{margin-bottom:15px;color:#2c3e50;font-size:1.1rem}.pricing-grid{display:flex;flex-wrap:wrap;gap:12px}.pricing-card{display:flex;flex-direction:column;background:#fff;padding:12px 16px;border-radius:8px;border:1px solid #dee2e6;box-shadow:0 1px 3px #0000001a;min-width:150px}.service-name{font-weight:600;color:#495057;font-size:.85rem;margin-bottom:4px}.service-rate{font-family:SF Mono,monospace;color:#007bff;font-weight:700;font-size:.9rem;margin-bottom:2px}.service-margin{font-size:.75rem;color:#6c757d;font-style:italic}.key-display-improved{transition:all .3s ease;position:relative}.key-display-improved:hover{background:#fff3cd;border-color:#ffc107}.key-display-improved:hover .security-note{background:#fff3cd;border-color:#ffc107;color:#856404}.key-display-improved:hover .masked-api-key{color:#856404;font-weight:600}.usage-stat{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f1f3f4}.usage-stat:last-child{border-bottom:none}.usage-stat span:first-child{font-weight:500;color:#495057}.usage-stat span:last-child{font-family:SF Mono,monospace;color:#007bff;font-weight:600}.usage-summary{margin-top:15px;padding:15px;background:linear-gradient(135deg,#e3f2fd,#f3e5f5);border-radius:8px;border:1px solid #bbdefb}.usage-summary h5{margin:0 0 12px;color:#1976d2;font-size:1rem}.summary-stats{display:flex;justify-content:space-around;gap:20px}.summary-stat{display:flex;flex-direction:column;align-items:center;text-align:center}.summary-stat span:first-child{font-size:.85rem;color:#6c757d;margin-bottom:4px}.summary-stat span:last-child{font-size:1.1rem;font-weight:700;color:#1976d2;font-family:SF Mono,monospace}@media (max-width: 768px){.summary-stats{flex-direction:column;gap:10px}.summary-stat{flex-direction:row;justify-content:space-between}}.key-info h4{margin-bottom:10px;color:#2c3e50;font-size:1.1rem}.keys-list-header{margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid #e9ecef}.keys-list-header h4{color:#2c3e50;margin-bottom:5px;font-size:1.3rem;font-weight:600}.keys-info{color:#6c757d;font-size:.9rem;margin:0;font-style:italic}.key-card{background:#fff;border:2px solid #e9ecef;border-radius:12px;padding:20px;margin-bottom:15px;box-shadow:0 2px 10px #0000000d;transition:all .3s ease;position:relative;overflow:hidden}.key-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000001a;border-color:#007bff}.key-card.active{border-left:4px solid #28a745}.key-card.inactive{border-left:4px solid #dc3545;opacity:.7}.key-card.revoked{border-left:4px solid #6c757d;opacity:.5}.configure-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;color:#fff;padding:6px 12px;border-radius:8px;font-size:.875rem;font-weight:500;transition:all .3s ease;box-shadow:0 2px 8px #667eea4d}.configure-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea66;background:linear-gradient(135deg,#764ba2,#667eea)}.configure-btn:active{transform:translateY(0);box-shadow:0 2px 6px #667eea4d}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{background:#fff;border-radius:16px;box-shadow:0 20px 60px #00000026;max-width:90vw;max-height:90vh;overflow-y:auto;animation:modalAppear .3s ease-out}@keyframes modalAppear{0%{opacity:0;transform:scale(.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:20px 25px;border-radius:16px 16px 0 0;display:flex;justify-content:space-between;align-items:center}.modal-header h3{margin:0;font-size:1.5rem;font-weight:600}.close-button{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s ease}.close-button:hover{background-color:#fff3}.modal-body{padding:25px}.form-section{margin-bottom:30px}.form-section h4{margin:0 0 20px;color:#2d3748;font-size:1.25rem;font-weight:600;display:flex;align-items:center;gap:8px}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:500;color:#4a5568}.form-control{width:100%;padding:12px 16px;border:2px solid #e2e8f0;border-radius:10px;font-size:1rem;transition:border-color .2s ease;background-color:#fff}.form-control:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.input-group{display:flex;align-items:center;position:relative}.input-prefix,.input-suffix{padding:12px 16px;background-color:#f7fafc;border:2px solid #e2e8f0;color:#4a5568;font-weight:500;white-space:nowrap}.input-prefix{border-right:none;border-radius:10px 0 0 10px}.input-suffix{border-left:none;border-radius:0 10px 10px 0}.input-group .form-control{border-radius:0;flex:1}.input-group .form-control:first-child{border-radius:10px 0 0 10px}.input-group .form-control:last-child{border-radius:0 10px 10px 0}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}.pricing-preview{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:12px;padding:20px;margin-top:20px}.margin-display{display:flex;justify-content:space-between;align-items:center}.margin-label{font-weight:600;color:#495057}.margin-value{font-size:1.25rem;font-weight:700;color:#28a745;background:#28a7451a;padding:6px 12px;border-radius:8px}.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:30px;padding-top:20px;border-top:1px solid #e2e8f0}.btn{padding:12px 24px;border-radius:10px;font-weight:500;font-size:1rem;cursor:pointer;transition:all .2s ease;border:none;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 12px #667eea4d}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px #667eea66}.btn-secondary:hover{background:#5a6268;transform:translateY(-1px)}.btn-sm{padding:6px 12px;font-size:.875rem}.service-toggle{display:flex;align-items:center;gap:15px;flex-wrap:wrap}@media (max-width: 768px){.form-row{grid-template-columns:1fr}.modal-content{margin:10px;max-width:calc(100vw - 20px)}.service-toggle{flex-direction:column;align-items:flex-start}.configure-btn{margin-left:0!important;margin-top:8px}}.header-actions{display:flex;gap:10px;align-items:center}.history-btn,.usage-btn{font-size:.85rem;padding:8px 12px;border-radius:6px;font-weight:600;border:none;cursor:pointer;transition:all .3s ease}.history-btn{background:linear-gradient(45deg,#3498db,#2980b9);color:#fff}.usage-btn{background:linear-gradient(45deg,#27ae60,#229954);color:#fff}.history-btn:hover,.usage-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0003}.historical-revenue-summary{background:linear-gradient(135deg,#667eea,#764ba2);padding:20px;border-radius:12px;margin-bottom:20px;color:#fff}.historical-revenue-summary h4{margin:0 0 15px;font-size:1.3rem;font-weight:700}.revenue-cards{display:flex;gap:15px;flex-wrap:wrap}.revenue-card{flex:1;min-width:200px;background:#ffffff26;padding:15px;border-radius:10px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center}.revenue-label{display:block;font-size:.9rem;opacity:.9;margin-bottom:5px}.revenue-value{display:block;font-size:1.8rem;font-weight:700;margin-bottom:3px}.revenue-value.profit{color:#2ecc71}.revenue-note{font-size:.8rem;opacity:.8}.margin-quick-options{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}.quick-label{font-size:.9rem;color:#666;margin-right:5px}.quick-margin-btn{background:#f8f9fa;border:1px solid #ddd;padding:6px 10px;border-radius:15px;font-size:.8rem;cursor:pointer;transition:all .2s ease}.quick-margin-btn:hover{background:#e9ecef;border-color:#999}.quick-margin-btn.active{background:linear-gradient(45deg,#667eea,#764ba2);color:#fff;border-color:#667eea}.pricing-preview{margin-top:15px}.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;background:#f8f9fa;padding:15px;border-radius:8px;border:1px solid #e9ecef}.preview-item{display:flex;justify-content:space-between;align-items:center}.preview-label{font-size:.9rem;color:#666}.preview-value{font-weight:600;color:#2c3e50}.preview-value.profit{color:#27ae60}.preview-value.margin{color:#8e44ad}.save-changes-btn{background:linear-gradient(45deg,#27ae60,#2ecc71)!important;font-weight:600;padding:12px 20px;font-size:1rem}.save-changes-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px #27ae6066}.config-history-container{max-height:70vh;overflow-y:auto}.history-stats{display:flex;gap:15px;margin-bottom:25px;flex-wrap:wrap}.stat-card{flex:1;min-width:150px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:15px;border-radius:10px;text-align:center}.stat-label{display:block;font-size:.85rem;opacity:.9;margin-bottom:5px}.stat-value{display:block;font-size:1.5rem;font-weight:700}.history-timeline h4{color:#2c3e50;margin-bottom:20px;font-size:1.2rem}.timeline-entry{display:flex;margin-bottom:20px;position:relative}.timeline-marker{width:12px;height:12px;background:#667eea;border-radius:50%;margin-top:5px;margin-right:15px;flex-shrink:0;position:relative;z-index:1}.timeline-marker:before{content:"";position:absolute;top:12px;left:5px;width:2px;height:30px;background:#ddd;z-index:-1}.timeline-entry:last-child .timeline-marker:before{display:none}.timeline-content{flex:1;background:#fff;padding:15px;border-radius:8px;box-shadow:0 2px 8px #0000001a;border-left:3px solid #667eea}.timeline-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:.9rem}.timeline-date{font-weight:600;color:#2c3e50}.timeline-user{color:#666;font-style:italic}.timeline-changes{margin-bottom:10px}.change-item{display:flex;gap:10px;align-items:center;margin-bottom:5px}.change-label{font-weight:600;color:#555;min-width:60px}.change-value{font-weight:700;color:#667eea}.change-diff{font-size:.8rem;color:#999;font-style:italic}.timeline-reason{background:#f8f9fa;padding:8px 12px;border-radius:6px;font-size:.9rem;color:#555}.usage-history-container{max-height:70vh;overflow-y:auto}.usage-stats-summary{display:flex;gap:15px;margin-bottom:25px;flex-wrap:wrap}.stat-card.revenue{background:linear-gradient(135deg,#27ae60,#2ecc71)}.stat-card.cost{background:linear-gradient(135deg,#e74c3c,#c0392b)}.stat-card.profit{background:linear-gradient(135deg,#f39c12,#e67e22)}.stat-card.margin{background:linear-gradient(135deg,#8e44ad,#9b59b6)}.daily-usage-table h4{color:#2c3e50;margin-bottom:15px;font-size:1.2rem}.usage-table{width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px #0000001a}.usage-table th{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:12px 8px;text-align:left;font-weight:600;font-size:.9rem}.usage-table td{padding:10px 8px;border-bottom:1px solid #f1f2f6;font-size:.9rem}.usage-table tbody tr:hover{background-color:#f8f9fa}.cost-cell{color:#e74c3c;font-weight:600}.revenue-cell{color:#27ae60;font-weight:600}.profit-cell{color:#f39c12;font-weight:600}.margin-cell{font-weight:600}.margin-cell.high-margin{color:#27ae60;background-color:#d5f5d5}.margin-cell.medium-margin{color:#f39c12;background-color:#fff3cd}.margin-cell.low-margin{color:#e74c3c;background-color:#f8d7da}.history-tab{background:#fff;border-radius:15px;padding:25px;box-shadow:0 4px 20px #0000001a;margin-bottom:20px}.history-header h2{margin:0 0 10px;color:#2c3e50;font-size:1.8rem;font-weight:700}.history-header p{margin:0;color:#7f8c8d;font-size:1.1rem}.history-controls{display:flex;justify-content:space-between;align-items:center;margin:25px 0;padding:20px;background:#f8f9fa;border-radius:10px;border:1px solid #e9ecef}.history-type-selector{display:flex;gap:10px}.history-type-btn{background:#fff;border:2px solid #e9ecef;color:#6c757d;padding:10px 20px;border-radius:25px;cursor:pointer;transition:all .3s ease;font-weight:500}.history-type-btn:hover{border-color:#667eea;color:#667eea}.history-type-btn.active{background:linear-gradient(45deg,#667eea,#764ba2);border-color:#667eea;color:#fff;box-shadow:0 4px 15px #667eea4d}.date-range-select{padding:10px 15px;border:2px solid #e9ecef;border-radius:25px;background:#fff;color:#495057;font-weight:500;cursor:pointer;transition:all .3s ease}.date-range-select:focus{border-color:#667eea;outline:none;box-shadow:0 0 0 3px #667eea1a}.usage-summary-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:30px}.summary-card{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:20px;border-radius:15px;display:flex;align-items:center;gap:15px;box-shadow:0 4px 15px #667eea4d;transition:transform .3s ease}.summary-card:hover{transform:translateY(-5px)}.summary-icon{font-size:2rem;opacity:.9}.summary-content{flex:1}.summary-value{font-size:1.5rem;font-weight:700;margin-bottom:5px}.summary-label{font-size:.9rem;opacity:.8}.usage-history-table h3{margin:0 0 20px;color:#2c3e50;font-size:1.4rem;font-weight:600}.history-table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 15px #0000001a}.history-table thead{background:linear-gradient(45deg,#667eea,#764ba2);color:#fff}.history-table th{padding:15px 12px;text-align:left;font-weight:600;font-size:.9rem;text-transform:uppercase;letter-spacing:.5px}.history-table td{padding:12px;border-bottom:1px solid #f1f3f4;font-size:.9rem}.history-table tr:hover{background-color:#f8f9fa}.history-table tr.high-usage{background-color:#fff3cd;border-left:4px solid #ffc107}.date-cell{font-weight:500;color:#495057}.usage-cell{font-weight:600;color:#6f42c1}.margin-badge{display:inline-block;padding:4px 8px;border-radius:12px;font-size:.8rem;font-weight:600;color:#fff}.margin-badge.margin-7{background:linear-gradient(45deg,#28a745,#20c997)}.margin-badge.margin-8,.margin-badge.margin-9{background:linear-gradient(45deg,#ffc107,#fd7e14)}.margin-badge.margin-10,.margin-badge.margin-11,.margin-badge.margin-12{background:linear-gradient(45deg,#dc3545,#e91e63)}.profit-positive{color:#28a745;font-weight:600}.config-history h3{margin:0 0 25px;color:#2c3e50;font-size:1.4rem;font-weight:600}.config-timeline{position:relative;padding-left:30px}.config-timeline:before{content:"";position:absolute;left:15px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,#667eea,#764ba2)}.config-change-item{display:flex;margin-bottom:25px;position:relative}.config-change-date{display:flex;flex-direction:column;align-items:center;margin-right:20px;position:relative;z-index:1}.date-circle{width:40px;height:40px;background:linear-gradient(45deg,#667eea,#764ba2);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.9rem;box-shadow:0 4px 10px #667eea4d}.date-month{margin-top:5px;font-size:.8rem;color:#6c757d;font-weight:500}.config-change-content{flex:1;background:#fff;padding:20px;border-radius:10px;box-shadow:0 2px 10px #0000001a;border-left:4px solid #667eea}.config-change-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.config-change-header h4{margin:0;color:#2c3e50;font-size:1.1rem;font-weight:600}.service-badge{background:linear-gradient(45deg,#28a745,#20c997);color:#fff;padding:4px 8px;border-radius:12px;font-size:.7rem;font-weight:600;margin-right:10px;text-transform:uppercase}.config-change-time{color:#6c757d;font-size:.9rem}.margin-comparison{display:flex;align-items:center;gap:15px;margin-bottom:10px;padding:15px;background:#f8f9fa;border-radius:8px}.old-value,.new-value{display:flex;flex-direction:column;gap:5px}.old-value .label,.new-value .label{font-size:.8rem;color:#6c757d;font-weight:500}.old-value .value{color:#dc3545;font-weight:600}.new-value .value{color:#28a745;font-weight:600}.new-value .value.highlight{background:#d4edda;padding:4px 8px;border-radius:4px}.arrow{color:#667eea;font-weight:700;font-size:1.2rem}.change-reason,.change-user{margin-bottom:8px;font-size:.9rem;color:#495057}.bills-tab{background:#fff;border-radius:15px;padding:25px;box-shadow:0 4px 20px #0000001a;margin-bottom:20px}.bills-header h2{margin:0 0 10px;color:#2c3e50;font-size:1.8rem;font-weight:700}.bills-header p{margin:0;color:#7f8c8d;font-size:1.1rem}.billing-summary{margin:25px 0}.billing-summary-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:30px}.billing-card{background:#fff;border:2px solid #e9ecef;border-radius:15px;padding:20px;display:flex;align-items:center;gap:15px;transition:all .3s ease}.billing-card:hover{transform:translateY(-3px);box-shadow:0 8px 25px #00000026}.billing-card.current{border-color:#667eea;background:linear-gradient(135deg,#667eea1a,#764ba21a)}.billing-card.total{border-color:#28a745;background:linear-gradient(135deg,#28a7451a,#20c9971a)}.billing-card.average{border-color:#ffc107;background:linear-gradient(135deg,#ffc1071a,#fd7e141a)}.billing-card.outstanding{border-color:#dc3545;background:linear-gradient(135deg,#dc35451a,#e91e631a)}.card-icon{font-size:2rem}.card-content{flex:1}.card-title{font-size:.9rem;color:#6c757d;font-weight:500;margin-bottom:5px}.card-value{font-size:1.4rem;font-weight:700;color:#2c3e50;margin-bottom:5px}.card-status,.card-subtitle{font-size:.8rem;color:#6c757d}.status-paid{color:#28a745;font-weight:600}.status-pending{color:#ffc107;font-weight:600}.bills-table-section h3{margin:0 0 20px;color:#2c3e50;font-size:1.4rem;font-weight:600}.bills-table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 15px #0000001a}.bills-table thead{background:linear-gradient(45deg,#667eea,#764ba2);color:#fff}.bills-table th{padding:15px 12px;text-align:left;font-weight:600;font-size:.9rem;text-transform:uppercase;letter-spacing:.5px}.bills-table td{padding:12px;border-bottom:1px solid #f1f3f4;font-size:.9rem}.bills-table tr:hover{background-color:#f8f9fa}.bill-row.status-pending{border-left:4px solid #ffc107}.bill-row.status-paid{border-left:4px solid #28a745}.period-cell{font-weight:500}.period-name{font-weight:600;color:#2c3e50}.period-dates{font-size:.8rem;color:#6c757d;margin-top:2px}.status-badge{display:inline-block;padding:4px 8px;border-radius:12px;font-size:.7rem;font-weight:600;text-transform:uppercase}.status-badge.status-paid{background:#d4edda;color:#155724}.status-badge.status-pending{background:#fff3cd;color:#856404}.btn-view-bill{background:linear-gradient(45deg,#667eea,#764ba2);color:#fff;border:none;padding:6px 12px;border-radius:15px;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .3s ease}.btn-view-bill:hover{transform:translateY(-2px);box-shadow:0 4px 15px #667eea4d}.bill-detail-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.bill-detail-content{background:#fff;border-radius:15px;max-width:800px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 10px 30px #0000004d}.bill-detail-header{display:flex;justify-content:space-between;align-items:center;padding:25px;border-bottom:1px solid #e9ecef;background:linear-gradient(45deg,#667eea,#764ba2);color:#fff;border-radius:15px 15px 0 0}.bill-detail-header h3{margin:0;font-size:1.4rem;font-weight:600}.close-btn{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:5px;border-radius:50%;transition:all .3s ease}.close-btn:hover{background:#fff3}.bill-detail-body{padding:25px}.invoice-summary{margin-bottom:25px;padding:20px;background:#f8f9fa;border-radius:10px}.invoice-row{display:flex;justify-content:space-between;margin-bottom:10px}.invoice-row .label{font-weight:600;color:#6c757d}.invoice-row .value{font-weight:500;color:#2c3e50}.service-breakdown h4{margin:0 0 15px;color:#2c3e50;font-size:1.2rem;font-weight:600}.service-breakdown-table{width:100%;border-collapse:collapse;margin-bottom:25px}.service-breakdown-table th,.service-breakdown-table td{padding:10px;text-align:left;border-bottom:1px solid #e9ecef}.service-breakdown-table th{background:#f8f9fa;font-weight:600;color:#495057}.service-name{font-weight:600;color:#667eea}.total-row{background:#f8f9fa;font-weight:600}.bill-totals{margin:25px 0;padding:20px;background:#f8f9fa;border-radius:10px}.total-line{display:flex;justify-content:space-between;margin-bottom:10px}.total-line.final-total{border-top:2px solid #667eea;padding-top:10px;margin-top:15px;font-size:1.1rem;font-weight:700;color:#2c3e50}.bill-actions{display:flex;gap:10px;justify-content:center;margin-top:25px}.bill-actions .btn{padding:10px 20px;border-radius:25px;border:none;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-primary{background:linear-gradient(45deg,#667eea,#764ba2);color:#fff}.btn-secondary{background:#6c757d;color:#fff}.btn-success{background:#28a745;color:#fff}.bill-actions .btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #0003}.enhanced-usage-billing-tab{padding:20px;background:#f8fafc;min-height:100vh}.billing-header{margin-bottom:30px;text-align:center}.billing-header h3{color:#2d3748;font-size:28px;font-weight:700;margin-bottom:8px}.billing-header p{color:#718096;font-size:16px}.billing-overview.enhanced{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:40px}.billing-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0;transition:all .3s ease}.billing-card:hover{transform:translateY(-2px);box-shadow:0 8px 15px #0000001a}.billing-card .card-icon{font-size:32px;margin-bottom:12px}.billing-card h4{font-size:14px;font-weight:600;color:#718096;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.balance-amount,.spend-amount,.requests-count,.cost-amount{font-size:32px;font-weight:700;color:#2d3748;margin-bottom:8px}.balance-status,.request-trend,.cost-breakdown-mini{margin-top:12px;font-size:14px}.status-good{color:#38a169;font-weight:600}.status-warning{color:#ed8936;font-weight:600}.spend-bar{width:100%;height:8px;background:#e2e8f0;border-radius:4px;margin:12px 0 8px;overflow:hidden}.spend-progress{height:100%;border-radius:4px;transition:all .3s ease}.spend-percentage{font-size:12px;color:#718096;font-weight:500}.cost-breakdown-mini{display:flex;flex-direction:column;gap:4px}.cost-breakdown-mini span{color:#718096;font-size:12px}.enhanced-service-usage{margin-bottom:40px}.section-header{margin-bottom:24px}.section-header h4{color:#2d3748;font-size:24px;font-weight:700;margin-bottom:8px}.section-header p{color:#718096;font-size:14px}.service-usage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:24px}.service-usage-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0;transition:all .3s ease}.service-usage-card.editing{border-color:#4299e1;box-shadow:0 0 0 3px #4299e11a}.service-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.service-info h5{color:#2d3748;font-size:18px;font-weight:700;margin-bottom:8px}.service-status{margin-top:4px}.status-active{color:#38a169;font-size:14px;font-weight:600}.status-inactive{color:#e53e3e;font-size:14px;font-weight:600}.service-config-editor{border:2px solid #e2e8f0;border-radius:8px;padding:20px;background:#f7fafc}.pricing-breakdown h6{color:#2d3748;font-size:16px;font-weight:600;margin-bottom:16px}.cost-details{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.cost-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#fff;border-radius:6px;border:1px solid #e2e8f0}.margin-input-group{display:flex;align-items:center;gap:8px}.margin-slider{width:120px}.margin-input{width:60px;padding:4px 8px;border:1px solid #cbd5e0;border-radius:4px;text-align:center}.client-rate{font-weight:700;color:#4299e1}.profit{font-weight:700;color:#38a169}.margin-presets h6{color:#2d3748;font-size:14px;font-weight:600;margin-bottom:12px}.preset-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.preset-btn{padding:6px 12px;border:1px solid #cbd5e0;border-radius:6px;background:#fff;color:#4a5568;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease}.preset-btn:hover{border-color:#4299e1;color:#4299e1}.preset-btn.active{background:#4299e1;color:#fff;border-color:#4299e1}.config-actions{display:flex;gap:12px}.service-details{display:flex;flex-direction:column;gap:20px}.pricing-display{display:flex;flex-direction:column;gap:8px;padding:16px;background:#f7fafc;border-radius:8px}.rate-display,.margin-display,.profit-display{display:flex;justify-content:space-between;align-items:center}.rate-label,.margin-label,.profit-label{font-size:14px;color:#718096;font-weight:600}.rate-value{font-size:16px;font-weight:700;color:#4299e1}.margin-value{font-size:16px;font-weight:700;color:#ed8936}.profit-value{font-size:16px;font-weight:700;color:#38a169}.usage-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px}.stat-item{display:flex;align-items:center;gap:12px;padding:12px;background:#f7fafc;border-radius:8px;border:1px solid #e2e8f0}.stat-icon{font-size:20px}.stat-content{display:flex;flex-direction:column;gap:2px}.stat-label{font-size:12px;color:#718096;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.stat-value{font-size:14px;color:#2d3748;font-weight:700}.service-insights{margin-top:16px;padding:16px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:8px;color:#fff}.service-insights h6{color:#fff;font-size:14px;font-weight:600;margin-bottom:12px}.insights-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}.insight-item{display:flex;justify-content:space-between;align-items:center;padding:8px;background:#ffffff1a;border-radius:4px;font-size:12px}.enhanced-billing-info{margin-bottom:40px}.enhanced-billing-info h4{color:#2d3748;font-size:24px;font-weight:700;margin-bottom:24px}.billing-details-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}.detail-section{background:#fff;border-radius:12px;padding:24px;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0}.detail-section h5{color:#2d3748;font-size:16px;font-weight:700;margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid #e2e8f0}.detail-items{display:flex;flex-direction:column;gap:12px}.detail-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0}.detail-item span:first-child{color:#718096;font-weight:600}.detail-item span:last-child{color:#2d3748;font-weight:500}.plan-badge{background:#4299e1;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:600;text-transform:uppercase}.cost-calculator{background:#fff;border-radius:12px;padding:24px;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0}.cost-calculator h4{color:#2d3748;font-size:20px;font-weight:700;margin-bottom:16px}.calculator-content p{color:#718096;margin-bottom:16px}.calculator-inputs{margin-bottom:16px}.calc-input{width:200px;padding:12px 16px;border:2px solid #e2e8f0;border-radius:8px;font-size:16px;transition:border-color .2s ease}.calc-input:focus{outline:none;border-color:#4299e1}.calculator-result{padding:16px;background:#f7fafc;border-radius:8px;border:1px solid #e2e8f0;color:#718096}.calc-result{display:flex;gap:20px;color:#2d3748;font-weight:600}.calc-result span{padding:8px 12px;background:#fff;border-radius:4px;border:1px solid #e2e8f0}@media (max-width: 768px){.enhanced-usage-billing-tab{padding:16px}.billing-overview.enhanced,.service-usage-grid,.billing-details-grid{grid-template-columns:1fr}.calc-result{flex-direction:column;gap:8px}}.fade-in{animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.slide-up{animation:slideUp .4s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.btn{border:none;border-radius:6px;padding:8px 16px;font-weight:600;cursor:pointer;transition:all .2s ease;text-decoration:none;display:inline-flex;align-items:center;gap:6px}.btn-outline-primary{background:transparent;color:#4299e1;border:1px solid #4299e1}.btn-outline-primary:hover{background:#4299e1;color:#fff}.btn-success{background:#38a169;color:#fff}.btn-success:hover{background:#2f855a}.btn-secondary{background:#718096;color:#fff}.btn-secondary:hover{background:#4a5568}.btn-sm{padding:6px 12px;font-size:14px}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;width:100%;margin:0;padding:0;font-family:Inter,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#f8fafc;overflow-x:hidden}#root{height:100vh;width:100vw;margin:0;padding:0;display:flex;flex-direction:column}.MuiContainer-root{max-width:none!important;padding:0!important;margin:0!important}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#f1f5f9}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}.loading-fade{animation:loadingFade 1.5s ease-in-out infinite}@keyframes loadingFade{0%,to{opacity:.4}50%{opacity:1}}@media (max-width: 768px){.responsive-text{font-size:.875rem!important}}