* { box-sizing: border-box; }
body {
  margin: 0;
  overscroll-behavior-x: none;
}
:root { color-scheme: dark !important; }
html, body { background: #16171d !important; color: #e4e6eb !important; }
body { margin: 0 !important; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; -webkit-font-smoothing: antialiased !important; }
a { color: #7c83ff !important; }
.credits-app { padding: 24px 20px !important; max-width: 1200px !important; margin: 0 auto !important; color: #e4e6eb !important; }
.credits-content { display: flex !important; flex-direction: column !important; gap: 16px !important; }
.credits-logo { display: block !important; height: 44px !important; width: auto !important; }
.credits-login .credits-logo { margin: 0 auto 8px !important; height: 56px !important; }
.credits-blank { position: fixed !important; inset: 0 !important; background: #fff !important; z-index: 2147483647 !important; }
.credits-head { display: flex !important; align-items: center !important; gap: 14px !important; padding: 16px 20px !important; background: #23242e !important; border: 1px solid #333542 !important; border-radius: 12px !important; }
.credits-head .credits-logo { height: 48px !important; }
.credits-head-text { display: flex !important; flex-direction: column !important; gap: 4px !important; min-width: 0 !important; }
.credits-title { margin: 0 !important; font-size: 20px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: #f4f5f7 !important; }
.credits-status { margin: 0 !important; font-size: 13px !important; color: #9aa5b1 !important; }
.credits-status.credits-error { color: #f87171 !important; }
.credits-head-user { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 4px !important; min-width: 0 !important; }
.credits-head-user-name { font-size: 13px !important; font-weight: 600 !important; color: #f4f5f7 !important; }
.credits-head-user-email { font-size: 13px !important; color: #9aa5b1 !important; word-break: break-all !important; }
.credits-head-user-email::before { content: "—" !important; margin-right: 6px !important; color: #7c8493 !important; }
.credits-head .credits-logout { margin-left: auto !important; }
.credits-logout { flex: 0 0 auto !important; margin-left: auto !important; padding: 8px 14px !important; font-size: 13px !important; border: 1px solid #3a3c4a !important; border-radius: 8px !important; background: #2e3040 !important; color: #c7cad6 !important; cursor: pointer !important; white-space: nowrap !important; transition: background 0.15s ease, color 0.15s ease !important; }
.credits-logout:hover { background: #3a3c4a !important; color: #fff !important; }
.credits-app-link { align-self: flex-start !important; margin-top: 4px !important; font-size: 13px !important; font-weight: 600 !important; color: #7c83ff !important; text-decoration: none !important; white-space: nowrap !important; }
.credits-app-link:hover { color: #9aa0ff !important; text-decoration: underline !important; }
.credits-summary { display: grid !important; gap: 18px !important; margin: 0 !important; padding: 18px 20px !important; background: #23242e !important; border: 1px solid #333542 !important; border-radius: 12px !important; }
.credits-summary-pills { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; }
.credits-summary-users, .credits-summary-deepseek, .credits-summary-coverage { display: flex !important; flex-direction: column !important; gap: 6px !important; padding: 14px !important; border-radius: 10px !important; background: #1e1f28 !important; border: 1px solid #333542 !important; }
.credits-stat-label { font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; color: #9aa5b1 !important; }
.credits-stat-value { font-size: 20px !important; font-weight: 700 !important; font-variant-numeric: tabular-nums !important; color: #f4f5f7 !important; }
.credits-summary-users .credits-stat-value { color: #c7b8ff !important; }
.credits-summary-deepseek .credits-stat-value { color: #9ecbff !important; }
.credits-summary-coverage .credits-stat-value { color: #86efac !important; }
.credits-summary-coverage.credits-shortfall .credits-stat-value { color: #fde68a !important; }
.credits-chart { min-width: 0 !important; height: 190px !important; position: relative !important; }
.credits-chart-canvas { display: block !important; }
.credits-layout { display: flex !important; gap: 16px !important; align-items: flex-start !important; flex-wrap: wrap !important; }
.credits-login { max-width: 320px !important; margin: 48px auto !important; padding: 24px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; background: #23242e !important; border: 1px solid #333542 !important; border-radius: 12px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important; box-sizing: border-box !important; }
.credits-login-title { margin: 0 0 4px !important; font-size: 13px !important; font-weight: 500 !important; text-align: center !important; color: #9aa5b1 !important; letter-spacing: 0.02em !important; }
.credits-login input { padding: 10px 12px !important; font-size: 14px !important; color: #e4e6eb !important; background: #1a1b23 !important; border: 1px solid #3a3c4a !important; border-radius: 8px !important; box-sizing: border-box !important; }
.credits-login input::placeholder { color: #6b7280 !important; }
.credits-login input:focus { outline: none !important; border-color: #7c83ff !important; box-shadow: 0 0 0 3px rgba(124, 131, 255, 0.2) !important; }
.credits-login-submit { padding: 10px 12px !important; font-size: 14px !important; border: 1px solid transparent !important; border-radius: 8px !important; background: #5a67d8 !important; color: #fff !important; cursor: pointer !important; transition: background 0.15s ease !important; }
.credits-login-submit:hover { background: #6b78e5 !important; }
.credits-login-submit:disabled { opacity: 0.6 !important; cursor: default !important; }
.credits-login-error { margin: 0 !important; font-size: 13px !important; color: #f87171 !important; }
.credits-users { flex: 1 1 340px !important; min-width: 0 !important; box-sizing: border-box !important; padding: 16px !important; background: #23242e !important; border: 1px solid #333542 !important; border-radius: 12px !important; }
.credits-users-head { display: flex !important; align-items: center !important; gap: 8px !important; padding-bottom: 8px !important; border-bottom: 1px solid #2c2e3a !important; }
.credits-users-head .credits-subtitle { padding-bottom: 0 !important; border-bottom: none !important; }
.credits-count { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 22px !important; height: 22px !important; padding: 0 8px !important; font-size: 12px !important; font-weight: 700 !important; font-variant-numeric: tabular-nums !important; color: #c7b8ff !important; background: rgba(124, 131, 255, 0.15) !important; border: 1px solid rgba(124, 131, 255, 0.3) !important; border-radius: 999px !important; }
.credits-modal { position: fixed !important; inset: 0 !important; z-index: 1000 !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; padding: 40px 16px !important; background: rgba(8, 9, 13, 0.72) !important; overflow: auto !important; }
.credits-modal-card { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 880px !important; max-height: calc(100vh - 80px) !important; box-sizing: border-box !important; margin: auto !important; padding: 20px !important; background: #23242e !important; border: 1px solid #333542 !important; border-radius: 14px !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5) !important; }
.credits-modal-head { flex: 0 0 auto !important; display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 16px !important; padding-bottom: 14px !important; border-bottom: 1px solid #2c2e3a !important; }
.credits-back { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; font-size: 18px !important; line-height: 1 !important; background: #2e3040 !important; color: #c7cad6 !important; border: 1px solid #3a3c4a !important; border-radius: 9px !important; cursor: pointer !important; transition: background 0.15s ease, color 0.15s ease !important; }
.credits-back:hover { background: #3a3c4a !important; color: #fff !important; }
.credits-modal-head-text { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; gap: 4px !important; min-width: 0 !important; }
.credits-modal-head-text .credits-panel-title { margin: 0 !important; }
.credits-modal-head-text .credits-panel-balance { margin: 0 !important; align-self: flex-start !important; }
.credits-subtitle { margin: 0 !important; padding-bottom: 8px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #9aa5b1 !important; border-bottom: 1px solid #2c2e3a !important; }
.credits-panel-body { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; gap: 26px !important; margin-top: 4px !important; overflow-y: auto !important; padding-right: 6px !important; }
.credits-section { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.credits-hidden { display: none !important; }
.credits-panel-title { margin: 0 0 4px !important; font-size: 15px !important; font-weight: 600 !important; color: #f4f5f7 !important; word-break: break-word !important; }
.credits-panel-balance { display: inline-block !important; margin: 0 0 14px !important; padding: 6px 12px !important; font-size: 13px !important; font-weight: 700 !important; color: #86efac !important; background: rgba(74, 222, 128, 0.12) !important; border: 1px solid rgba(74, 222, 128, 0.3) !important; border-radius: 999px !important; }
.credits-table-wrap, .credits-invoices-wrap, .credits-usages-wrap { overflow: auto !important; border: 1px solid #2c2e3a !important; border-radius: 10px !important; background: #1e1f28 !important; scrollbar-width: thin !important; scrollbar-color: #3a3c4a transparent !important; }
.credits-table-wrap { max-height: 440px !important; }
.credits-invoices-wrap { max-height: 260px !important; }
.credits-usages-wrap { max-height: 320px !important; }
.credits-table-wrap::-webkit-scrollbar, .credits-invoices-wrap::-webkit-scrollbar, .credits-usages-wrap::-webkit-scrollbar { width: 10px !important; height: 10px !important; }
.credits-table-wrap::-webkit-scrollbar-track, .credits-invoices-wrap::-webkit-scrollbar-track, .credits-usages-wrap::-webkit-scrollbar-track { background: transparent !important; }
.credits-table-wrap::-webkit-scrollbar-thumb, .credits-invoices-wrap::-webkit-scrollbar-thumb, .credits-usages-wrap::-webkit-scrollbar-thumb { background: #3a3c4a !important; border-radius: 8px !important; border: 2px solid #1e1f28 !important; }
.credits-table-wrap::-webkit-scrollbar-thumb:hover, .credits-invoices-wrap::-webkit-scrollbar-thumb:hover, .credits-usages-wrap::-webkit-scrollbar-thumb:hover { background: #4a4d5e !important; }
.credits-invoice-form { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; margin: 0 !important; }
.credits-invoice-form input { flex: 1 1 140px !important; min-width: 0 !important; box-sizing: border-box !important; padding: 8px 10px !important; font-size: 13px !important; color: #e4e6eb !important; background: #1a1b23 !important; border: 1px solid #3a3c4a !important; border-radius: 8px !important; }
.credits-invoice-form input::placeholder { color: #6b7280 !important; }
.credits-invoice-form input:focus { outline: none !important; border-color: #7c83ff !important; box-shadow: 0 0 0 3px rgba(124, 131, 255, 0.2) !important; }
.credits-invoice-add, .credits-reset, .credits-manage { padding: 8px 12px !important; font-size: 13px !important; border-radius: 8px !important; border: 1px solid transparent !important; cursor: pointer !important; transition: background 0.15s ease, border-color 0.15s ease !important; }
.credits-invoice-add { background: #5a67d8 !important; color: #fff !important; }
.credits-invoice-add:hover { background: #6b78e5 !important; }
.credits-manage { background: #2e3040 !important; color: #c7cad6 !important; border-color: #3a3c4a !important; }
.credits-manage:hover { background: #3a3c4a !important; }
.credits-reset { flex: 0 0 auto !important; margin-left: auto !important; white-space: nowrap !important; background: transparent !important; color: #f87171 !important; border-color: #5c2b2b !important; }
.credits-reset:hover { background: rgba(248, 113, 113, 0.12) !important; }
.credits-table { width: 100% !important; min-width: 480px !important; border-collapse: collapse !important; font-size: 13px !important; }
.credits-table th, .credits-invoices-table th, .credits-usages-table th { position: sticky !important; top: 0 !important; z-index: 2 !important; text-align: left !important; padding: 10px 12px !important; font-weight: 600 !important; font-size: 11px !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; color: #9aa5b1 !important; background: #2b2d3a !important; border-bottom: 1px solid #3a3c4a !important; white-space: nowrap !important; }
.credits-table td, .credits-invoices-table td, .credits-usages-table td { text-align: left !important; padding: 9px 12px !important; color: #dfe1e8 !important; border-bottom: 1px solid #2c2e3a !important; }
.credits-table tbody tr:nth-child(even), .credits-invoices-table tbody tr:nth-child(even), .credits-usages-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.025) !important; }
.credits-table tbody tr:hover, .credits-invoices-table tbody tr:hover, .credits-usages-table tbody tr:hover { background: #32343f !important; }
.credits-table tbody tr:last-child td, .credits-invoices-table tbody tr:last-child td, .credits-usages-table tbody tr:last-child td { border-bottom: none !important; }
.credits-balance, .credits-invoice-amount-cell { white-space: nowrap !important; }
.credits-num { text-align: right !important; font-variant-numeric: tabular-nums !important; white-space: nowrap !important; }
.credits-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; }
.credits-model { font-size: 12px !important; color: #c7cad6 !important; }
.credits-muted { color: #7c8493 !important; }
.credits-actions { display: flex !important; gap: 6px !important; align-items: center !important; }
.credits-invoices-table { width: 100% !important; min-width: 420px !important; border-collapse: collapse !important; font-size: 12px !important; }
.credits-usages-table { width: 100% !important; min-width: 540px !important; border-collapse: collapse !important; font-size: 12px !important; }
.credits-instance-form { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; margin: 0 !important; }
.credits-instance-form input { flex: 1 1 140px !important; min-width: 0 !important; box-sizing: border-box !important; padding: 8px 10px !important; font-size: 13px !important; color: #e4e6eb !important; background: #1a1b23 !important; border: 1px solid #3a3c4a !important; border-radius: 8px !important; }
.credits-instance-form input::placeholder { color: #6b7280 !important; }
.credits-instance-form input:focus { outline: none !important; border-color: #7c83ff !important; box-shadow: 0 0 0 3px rgba(124, 131, 255, 0.2) !important; }
.credits-instance-add { padding: 8px 12px !important; font-size: 13px !important; border-radius: 8px !important; border: 1px solid transparent !important; cursor: pointer !important; transition: background 0.15s ease !important; background: #5a67d8 !important; color: #fff !important; }
.credits-instance-add:hover { background: #6b78e5 !important; }
.credits-delete { padding: 8px 12px !important; font-size: 13px !important; border-radius: 8px !important; border: 1px solid #5c2b2b !important; background: transparent !important; color: #f87171 !important; cursor: pointer !important; transition: background 0.15s ease !important; }
.credits-delete:hover { background: rgba(248, 113, 113, 0.12) !important; }
.credits-instances-wrap { max-height: 260px !important; overflow: auto !important; border: 1px solid #2c2e3a !important; border-radius: 10px !important; background: #1e1f28 !important; scrollbar-width: thin !important; scrollbar-color: #3a3c4a transparent !important; }
.credits-instances-wrap::-webkit-scrollbar { width: 10px !important; height: 10px !important; }
.credits-instances-wrap::-webkit-scrollbar-thumb { background: #3a3c4a !important; border-radius: 8px !important; border: 2px solid #1e1f28 !important; }
.credits-instances-wrap::-webkit-scrollbar-thumb:hover { background: #4a4d5e !important; }
.credits-instances-table { width: 100% !important; min-width: 680px !important; border-collapse: collapse !important; font-size: 12px !important; }
.credits-instances-table th { position: sticky !important; top: 0 !important; z-index: 2 !important; text-align: left !important; padding: 10px 12px !important; font-weight: 600 !important; font-size: 11px !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; color: #9aa5b1 !important; background: #2b2d3a !important; border-bottom: 1px solid #3a3c4a !important; white-space: nowrap !important; }
.credits-instances-table td { text-align: left !important; padding: 9px 12px !important; color: #dfe1e8 !important; border-bottom: 1px solid #2c2e3a !important; vertical-align: middle !important; }
.credits-instances-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.025) !important; }
.credits-instances-table tbody tr:hover { background: #32343f !important; }
.credits-instances-table tbody tr:last-child td { border-bottom: none !important; }
.credits-instance-url-cell { word-break: break-all !important; }
.credits-inline-input { box-sizing: border-box !important; width: 100% !important; min-width: 90px !important; padding: 6px 8px !important; font-size: 12px !important; color: #e4e6eb !important; background: #1a1b23 !important; border: 1px solid #3a3c4a !important; border-radius: 6px !important; }
.credits-inline-input:focus { outline: none !important; border-color: #7c83ff !important; box-shadow: 0 0 0 3px rgba(124, 131, 255, 0.2) !important; }
.credits-instance-invoices-wrap { max-height: 220px !important; overflow: auto !important; border: 1px solid #2c2e3a !important; border-radius: 10px !important; background: #1e1f28 !important; scrollbar-width: thin !important; scrollbar-color: #3a3c4a transparent !important; }
.credits-instance-invoices-wrap::-webkit-scrollbar { width: 10px !important; height: 10px !important; }
.credits-instance-invoices-wrap::-webkit-scrollbar-thumb { background: #3a3c4a !important; border-radius: 8px !important; border: 2px solid #1e1f28 !important; }
.credits-instance-invoices-wrap::-webkit-scrollbar-thumb:hover { background: #4a4d5e !important; }
.credits-instance-invoices-table { width: 100% !important; min-width: 680px !important; border-collapse: collapse !important; font-size: 12px !important; }
.credits-instance-invoices-table th { position: sticky !important; top: 0 !important; z-index: 2 !important; text-align: left !important; padding: 10px 12px !important; font-weight: 600 !important; font-size: 11px !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; color: #9aa5b1 !important; background: #2b2d3a !important; border-bottom: 1px solid #3a3c4a !important; white-space: nowrap !important; }
.credits-instance-invoices-table td { text-align: left !important; padding: 9px 12px !important; color: #dfe1e8 !important; border-bottom: 1px solid #2c2e3a !important; vertical-align: middle !important; }
.credits-instance-invoices-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.025) !important; }
.credits-instance-invoices-table tbody tr:hover { background: #32343f !important; }
.credits-instance-invoices-table tbody tr:last-child td { border-bottom: none !important; }
@media (max-width: 720px) {
  .credits-summary-pills { grid-template-columns: 1fr !important; }
  .credits-chart { height: 160px !important; }
}
@media (max-width: 640px) {
  .credits-app { padding: 14px !important; }
  .credits-layout { flex-direction: column !important; }
  .credits-users { flex: 1 1 auto !important; width: 100% !important; }
  .credits-modal { padding: 16px 12px !important; }
  .credits-modal-card { padding: 16px !important; }
  .credits-head { padding: 14px !important; }
  .credits-head .credits-logo { height: 38px !important; }
  .credits-title { font-size: 18px !important; }
  .credits-table-wrap { max-height: 60vh !important; }
}