@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap";
.billing-container{max-width:var(--container-max);padding:var(--container-padding);margin:0 auto}.billing-header{margin-bottom:var(--space-8)}.billing-title{font-size:var(--text-2xl);color:var(--text-primary);margin-bottom:var(--space-2);font-weight:700}.billing-error{border:1px solid var(--color-danger);color:var(--color-danger);padding:var(--space-4);border-radius:var(--radius-md);margin-bottom:var(--space-6);font-size:var(--text-sm);background:#dc26261a}.billing-card{background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-6);margin-bottom:var(--space-8)}.billing-card__title{font-size:var(--text-xl);color:var(--text-primary);margin:0 0 var(--space-4);font-weight:600}.billing-balance{align-items:baseline;gap:var(--space-2);margin-bottom:var(--space-4);display:flex}.billing-balance__amount{color:var(--color-success);font-size:48px;font-weight:700;line-height:1}.billing-balance__label{font-size:var(--text-lg);color:var(--text-muted)}.billing-balance__minutes{font-size:var(--text-md);color:var(--text-neutral);margin-left:var(--space-2)}.billing-breakdown{margin-top:var(--space-4);gap:var(--space-2);flex-direction:column;display:flex}.billing-breakdown__title{font-size:var(--text-sm);color:var(--text-muted);margin:0;font-weight:500}.billing-batch{background:var(--bg-elevated);padding:var(--space-2)var(--space-4);border-radius:var(--radius-md);border:1px solid var(--border-subtle);justify-content:space-between;align-items:center;display:flex}.billing-batch__info{font-size:var(--text-sm);color:var(--text-primary)}.billing-batch__source{color:var(--text-muted);margin-left:var(--space-2)}.billing-batch__expiry{font-size:var(--text-xs);color:var(--text-muted)}.subscription-status{gap:var(--space-4);flex-direction:column;display:flex}.subscription-info{align-items:center;gap:var(--space-4);display:flex}.subscription-badge{padding:var(--space-1)var(--space-3);color:var(--color-success);border-radius:var(--radius-full);font-size:var(--text-sm);text-transform:capitalize;background:#16a34a1a;font-weight:500}.subscription-plan{font-size:var(--text-lg);color:var(--text-primary);font-weight:500}.subscription-details{color:var(--text-muted);font-size:var(--text-sm)}.subscription-warning{color:var(--color-warning);font-size:var(--text-sm);align-items:center;gap:var(--space-2);display:flex}.btn-cancel{color:var(--color-danger);font-size:var(--text-sm);cursor:pointer;background:0 0;border:none;align-self:flex-start;padding:0;text-decoration:underline}.btn-cancel:hover{color:#ef4444}.plans-grid{gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));display:grid}.plan-card{background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-6);transition:all var(--duration-fast)var(--easing-default);flex-direction:column;display:flex;position:relative}.plan-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-md);transform:translateY(-2px)}.plan-card--active{border-color:var(--color-success);border-width:2px}.plan-name{font-size:var(--text-xl);margin:0 0 var(--space-2);color:var(--text-primary);font-weight:700}.plan-price{margin-bottom:var(--space-4);align-items:baseline;gap:2px;display:flex}.plan-price__amount{color:var(--text-primary);font-size:32px;font-weight:700}.plan-price__period{color:var(--text-muted);font-size:var(--text-sm)}.plan-credits{color:var(--color-info);font-weight:600;font-size:var(--text-md);margin-bottom:var(--space-4)}.plan-features{margin:0 0 var(--space-6);flex:1;padding:0;list-style:none}.plan-feature{align-items:flex-start;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-2);display:flex}.check-icon{color:var(--color-success);font-weight:700}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:var(--z-modal);padding:var(--space-4);background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background:var(--bg-panel);border-radius:var(--radius-lg);padding:var(--space-8);border:1px solid var(--border-subtle);width:100%;max-width:480px;box-shadow:var(--shadow-lg)}.modal-title{font-size:var(--text-2xl);margin:0 0 var(--space-6);color:var(--text-primary);font-weight:700}.form-group{margin-bottom:var(--space-6)}.form-label{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-2);display:block}.form-select{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);width:100%;padding:var(--space-2)var(--space-4);color:var(--text-primary);font-family:inherit;font-size:var(--text-md)}.payment-options{gap:var(--space-3);margin-bottom:var(--space-6);flex-direction:column;display:flex}.btn{width:100%;padding:var(--space-3);border-radius:var(--radius-md);font-weight:600;font-size:var(--text-md);cursor:pointer;transition:all var(--duration-fast);justify-content:center;align-items:center;gap:var(--space-2);border:none;outline:none;display:flex}.btn-primary{background:var(--color-accent);color:#fff}.btn-primary:hover{background:var(--color-accent-hover)}.btn-success{background:var(--color-success);color:#fff}.btn-dodo{color:#fff;background:#2563eb}.btn-dodo:hover{background:#1d4ed8}.btn-crypto{color:#fff;background:#7c3aed}.btn-crypto:hover{background:#6d28d9}.btn-outline{border:1px solid var(--border-subtle);color:var(--text-muted);background:0 0}.btn-outline:hover{border-color:var(--text-muted);color:var(--text-primary)}.btn:disabled{opacity:.5;cursor:not-allowed}.credit-pill{align-items:center;gap:var(--space-2);display:flex}.credit-pill__badge{padding:2px var(--space-3);border-radius:var(--radius-full);font-size:var(--text-sm);border:1px solid;font-weight:500}.credit-pill--high{color:var(--color-success);background:#16a34a1a;border-color:#16a34a4d}.credit-pill--medium{color:var(--color-warning);background:#eab3081a;border-color:#eab3084d}.credit-pill--low{color:var(--color-danger);background:#dc26261a;border-color:#dc26264d}.credit-pill__link{font-size:var(--text-xs);color:var(--color-danger);text-decoration:underline}.credit-pill__link:hover{text-decoration:none}.toast-container{bottom:var(--space-4);right:var(--space-4);z-index:var(--z-toast);animation:.3s ease-out slideUp;position:fixed}.toast-box{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-4);background:#dc2626f2;max-width:320px}.toast-content{align-items:flex-start;gap:var(--space-3);display:flex}.toast-icon{font-size:24px}.toast-title{margin-bottom:2px;font-weight:600}.toast-message{font-size:var(--text-sm);opacity:.9;margin-bottom:var(--space-3)}.toast-actions{gap:var(--space-2);display:flex}.btn-toast-action{color:var(--color-danger);border-radius:var(--radius-sm);font-size:var(--text-sm);background:#fff;padding:4px 12px;font-weight:500;text-decoration:none}.btn-toast-dismiss{color:#fff;border-radius:var(--radius-sm);font-size:var(--text-sm);cursor:pointer;background:0 0;border:1px solid #ffffff80;padding:4px 12px}.btn-toast-dismiss:hover{background:#ffffff1a}@keyframes slideUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}
.dropdown{flex-direction:column;min-width:180px;display:inline-flex;position:relative}.dropdown__trigger{padding:var(--space-2)var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-secondary);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-sm);cursor:pointer;justify-content:space-between;align-items:center;height:36px;transition:all .2s;display:flex}.dropdown__trigger:hover:not(:disabled){background:var(--bg-tertiary);border-color:var(--border-hover)}.dropdown__trigger:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.dropdown__trigger:disabled{opacity:.6;cursor:not-allowed}.dropdown__menu{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-md);width:100%;box-shadow:var(--shadow-lg);z-index:100;flex-direction:column;gap:2px;padding:4px;animation:.1s ease-out dropdown-fade-in;display:flex;position:absolute;top:calc(100% + 4px);left:0}@keyframes dropdown-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.dropdown__option{color:var(--text-secondary);font-family:var(--font-sans);font-size:var(--text-sm);text-align:left;cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;padding:6px 12px;transition:all .15s}.dropdown__option:hover{background:var(--bg-tertiary);color:var(--text-primary)}.dropdown__option--selected{background:var(--bg-elevated);color:var(--color-primary);font-weight:500}.dropdown__arrow{font-size:var(--text-xs);opacity:.6;margin-left:8px;transition:transform .2s}.dropdown__trigger[aria-expanded=true] .dropdown__arrow{transform:rotate(180deg)}
.pagination{padding:var(--space-3)var(--space-4);background:var(--bg-elevated);border-top:1px solid var(--border-subtle);justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;display:flex}.pagination__left{align-items:center;gap:var(--space-3);display:flex}.pagination__label{font-size:var(--text-sm);color:var(--text-muted);font-weight:500}.pagination__sizes{background:var(--bg-secondary);border-radius:var(--radius-md);align-items:center;gap:2px;padding:2px;display:flex}.pagination__size{min-width:32px;height:24px;padding:0 var(--space-2);font-size:var(--text-sm);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--duration-fast)var(--easing-default);background:0 0;border:none;justify-content:center;align-items:center;font-weight:500;display:inline-flex}.pagination__size:hover{color:var(--text-primary);background:var(--bg-hover)}.pagination__size--active{color:var(--text-inverse);background:var(--color-accent)}.pagination__size--active:hover{background:var(--color-accent-hover)}.pagination__info{font-size:var(--text-sm);color:var(--text-muted)}.pagination__right{align-items:center;gap:var(--space-2);display:flex}.pagination__nav{height:28px;padding:0 var(--space-3);font-size:var(--text-sm);color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--duration-fast)var(--easing-default);background:0 0;justify-content:center;align-items:center;font-weight:500;display:inline-flex}.pagination__nav:hover:not(:disabled){background:var(--bg-hover);border-color:var(--border-strong)}.pagination__nav:disabled{opacity:var(--state-disabled-opacity);cursor:not-allowed}.pagination__page{font-size:var(--text-sm);color:var(--text-secondary);padding:0 var(--space-2);text-align:center;min-width:100px}@media (max-width:600px){.pagination{gap:var(--space-3);flex-direction:column}.pagination__left,.pagination__right{justify-content:center;width:100%}.pagination__info{display:none}}