* { box-sizing: border-box; }
body {
  margin: 0;
  overscroll-behavior-x: none;
}
/* O Dashboard_ importa o Yrkit/Billing_ (só pelos modelos/rotas), mas não
   renderiza o wrapper dele — logo, não herda o CSS de wrapper do Billing_.
   Definimos aqui o mínimo para o card de login/cadastro aparecer corretamente. */
/* Global (sem escopo em .credits-app): o card de login é irmão do .credits-app,
   então o toggle de cadastro precisa esconder/mostrar elementos fora dele. */
.credits-hidden { display: none !important; }
.credits-logo { display: block; height: 44px; width: auto; }
.credits-login { max-width: 320px; margin: 48px auto; padding: 24px; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; background: #23242e; border: 1px solid #333542; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); color: #e4e6eb; }
.credits-login .credits-logo { margin: 0 auto 8px; height: 56px; }
.credits-login-title { margin: 0 0 4px; font-size: 13px; font-weight: 500; text-align: center; color: #9aa5b1; letter-spacing: 0.02em; }
.credits-login input { padding: 10px 12px; font-size: 14px; color: #e4e6eb; background: #1a1b23; border: 1px solid #3a3c4a; border-radius: 8px; box-sizing: border-box; }
.credits-login input::placeholder { color: #6b7280; }
.credits-login input:focus { outline: none; border-color: #7c83ff; box-shadow: 0 0 0 3px rgba(124, 131, 255, 0.2); }
.credits-login-submit, .credits-register-submit { padding: 10px 12px; font-size: 14px; border: 1px solid transparent; border-radius: 8px; background: #5a67d8; color: #fff; cursor: pointer; transition: background 0.15s ease; }
.credits-login-submit:hover, .credits-register-submit:hover { background: #6b78e5; }
.credits-login-submit:disabled, .credits-register-submit:disabled { opacity: 0.6; cursor: default; }
.credits-login-error { margin: 0; font-size: 13px; color: #f87171; }
.credits-login-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 13px; color: #9aa5b1; }
.credits-login-toggle-btn { padding: 0; font: inherit; font-weight: 600; color: #7c83ff; background: none; border: none; cursor: pointer; }
.credits-login-toggle-btn:hover { color: #a4aaff; text-decoration: underline; }
/* Saldo + recarga no cabeçalho da conta (à direita do título/status). */
.credits-head-text { flex: 1 1 auto !important; }
.credits-head-balance { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.credits-head-balance .credits-stat-label { font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #9aa5b1 !important; }
.credits-head-balance .credits-stat-value { font-size: 20px !important; font-weight: 700 !important; font-variant-numeric: tabular-nums !important; line-height: 1 !important; color: #c7b8ff !important; }
/* Atalhos de recarga (pills pequenas, alinhadas à direita). */
.dash-topup { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.dash-topup-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; font-size: 12px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; color: #c7b8ff !important; background: rgba(124, 131, 255, 0.14); border: 1px solid rgba(124, 131, 255, 0.35); border-radius: 999px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.dash-topup-btn:hover { color: #ffffff !important; background: #5a67d8; border-color: #5a67d8; }
/* Cabeçalho de seção: nome + badge de contagem à esquerda, ação à direita. */
.credits-section-head { display: flex; align-items: center; gap: 10px; }
.credits-section-head .credits-subtitle { margin: 0 !important; padding: 0 !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; text-transform: none !important; color: #f4f5f7 !important; border-bottom: none !important; }
.credits-count-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 9px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: #c7b8ff; background: rgba(124, 131, 255, 0.14); border: 1px solid rgba(124, 131, 255, 0.3); border-radius: 999px; }
/* !important no color: o wrapper Billing_ traz `a { color:#7c83ff !important }`,
   e como a nossa seção (<#) não injeta !important, a regra do `a` venceria. */
.credits-section-head .credits-new-instance { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 0.01em; text-decoration: none; background: #5a67d8 !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 9px; box-shadow: 0 2px 8px rgba(90, 103, 216, 0.35); cursor: pointer; transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; }
.credits-section-head .credits-new-instance:hover { background: #6b78e5 !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(107, 120, 229, 0.5); }
.credits-section-head .credits-new-instance:active { transform: translateY(1px); }
/* Link para abrir o app principal (/app). */
.credits-head-text .credits-open-app { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 600; color: #7c83ff !important; text-decoration: none; }
.credits-head-text .credits-open-app:hover { color: #a4aaff !important; text-decoration: underline; }
/* Botão de logout: pill alinhado à direita do header, com hover em tom "perigo". */
.credits-head .credits-logout { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; font-size: 13px; font-weight: 600; line-height: 1; color: #c7cad6; background: #2e3040; border: 1px solid #3a3c4a; border-radius: 9px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; }
.credits-head .credits-logout:hover { color: #f87171; background: rgba(248, 113, 113, 0.14); border-color: rgba(248, 113, 113, 0.45); }
.credits-head .credits-logout:active { transform: translateY(1px); }
.credits-head .credits-logout:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(124, 131, 255, 0.3); }
@media (max-width: 640px) {
  .credits-head { flex-wrap: wrap; }
  .credits-head .credits-logout { margin-left: 0; }
}
: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; }
}