.billing-modal {
  width:min(1040px,calc(100% - 32px));
  max-height:calc(100dvh - 48px);
  border:1px solid var(--border);
  border-radius:10px;
  padding:36px;
  background:var(--bg);
  color:var(--text);
  box-shadow:0 24px 100px #0002;
  overflow:auto;
  font-family:inherit
}

.billing-modal::backdrop {
  background:rgb(18 18 18 / 45%)
}

.billing-modal *,.billing-plans-page * {
  box-sizing:border-box
}

.billing-close {
  position:absolute;
  right:14px;
  top:12px;
  width:32px;
  height:32px;
  padding:0;
  background:transparent;
  color:inherit;
  border:0;
  border-radius:6px;
  cursor:pointer
}

.billing-heading {
  text-align:center;
  margin:4px 0 24px
}
.billing-heading h2 {
  font-size:32px;
  letter-spacing:-1px;
  line-height:1.2;
  margin:10px 0
}
.billing-heading p,.billing-price-note,.billing-explanation {
  color:var(--muted);
  font-size:14px;
  line-height:1.6
}

.billing-eyebrow {
  font-size:11px;
  letter-spacing:1.3px;
  font-weight:650;
  color:var(--muted)
}

.billing-period-switch {
  display:flex;
  justify-content:center;
  gap:4px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:4px;
  width:fit-content;
  max-width:100%;
  margin:0 auto 28px
}

.billing-period-switch button {
  background:transparent;
  color:var(--muted);
  border:0;
  border-radius:6px;
  padding:9px 16px;
  font:inherit;
  font-size:14px;
  cursor:pointer
}
.billing-period-switch button[aria-pressed=true] {
  background:var(--bg);
  color:var(--text);
  box-shadow:0 1px 3px #0001
}
.billing-period-switch span {
  font-size:11px;
  margin-left:5px;
  color:var(--muted)
}

.billing-plan-grid,.billing-pack-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px
}

.billing-plan {
  position:relative;
  border:1px solid var(--border);
  border-radius:10px;
  padding:24px;
  display:flex;
  flex-direction:column;
  min-width:0
}
.billing-plan-featured {
  border-color:var(--text);
  box-shadow:inset 0 3px 0 var(--text)
}
.billing-plan-title {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  min-height:34px
}
.billing-plan h3 {
  font-size:20px;
  margin:0
}
.billing-badge {
  font-size:10px;
  font-weight:600;
  background:var(--surface-2);
  border-radius:4px;
  padding:4px 6px
}

.billing-price {
  font-size:36px;
  line-height:1.2;
  letter-spacing:-1px;
  font-weight:650;
  margin:24px 0 12px
}
.billing-price span {
  font-size:13px;
  font-weight:400;
  letter-spacing:0;
  color:var(--muted)
}
.billing-allowance {
  font-size:14px;
  margin:0 0 8px
}
.billing-price-note {
  font-size:12px;
  margin:8px 0 16px
}
.billing-features {
  list-style:none;
  padding:20px 0;
  margin:8px 0 20px;
  border-top:1px solid var(--border);
  font-size:13px;
  line-height:1.5
}
.billing-features li {
  display:flex;
  gap:9px;
  margin:10px 0
}
.billing-unavailable {
  color:var(--muted)
}
.billing-plan-action {
  margin-top:auto
}
.billing-plan-action form,.billing-plan-action .billing-button {
  width:100%
}

.billing-button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  background:var(--accent);
  color:var(--bg);
  border:1px solid var(--accent);
  border-radius:6px;
  padding:10px 15px;
  font-family:inherit;
  font-size:14px;
  font-weight:550;
  line-height:1.3;
  text-decoration:none;
  cursor:pointer;
  white-space:normal
}
.billing-button:hover {
  background:var(--accent-dark);
  color:var(--bg)
}
.billing-button-secondary {
  background:var(--bg);
  color:var(--text);
  border-color:var(--border-strong)
}
.billing-button-secondary:hover {
  background:var(--surface);
  color:var(--text)
}
.billing-button:disabled {
  opacity:.5;
  cursor:default
}
.billing-button:focus-visible,.billing-close:focus-visible,.billing-period-switch button:focus-visible {
  outline:2px solid var(--text);
  outline-offset:3px
}

.billing-explanation {
  text-align:center;
  margin:22px auto 12px;
  max-width:750px
}
.billing-modal-footer {
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  border-top:1px solid var(--border);
  padding-top:20px;
  font-size:14px
}
.billing-modal-footer a {
  color:inherit;
  font-weight:600
}
.billing-inline-actions {
  display:flex;
  align-items:center;
  gap:20px;
  margin:20px 0
}
.billing-inline-actions p {
  font-size:12px;
  color:var(--muted);
  flex:1
}

.billing-summary {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--border);
  border-radius:10px;
  margin:28px 0
}
.billing-summary>div {
  padding:24px;
  min-width:0
}
.billing-summary>div+div {
  border-left:1px solid var(--border)
}
.billing-summary p {
  font-size:14px;
  color:var(--muted);
  line-height:1.6
}
.billing-summary .billing-balance {
  font-size:40px;
  line-height:1;
  font-weight:600;
  color:var(--text);
  margin:15px 0
}
.billing-summary h2 {
  margin:12px 0
}
.billing-section {
  margin:40px 0
}
.billing-section>p {
  color:var(--muted);
  font-size:14px
}
.billing-pack {
  padding:24px;
  border:1px solid var(--border);
  border-radius:10px
}
.billing-pack h3 {
  font-size:20px;
  margin:0
}
.billing-pack p {
  font-size:24px
}
.billing-pack span {
  font-size:13px;
  color:var(--muted)
}
.billing-pack .billing-button {
  width:100%
}
.billing-notice {
  padding:18px;
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:8px;
  margin:20px 0;
  font-size:14px
}
.billing-notice form {
  display:inline-block;
  margin:6px
}
.billing-table-wrap {
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:8px
}
.billing-table {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  min-width:580px
}
.billing-table th,.billing-table td {
  text-align:left;
  padding:14px 16px;
  border-bottom:1px solid var(--border)
}
.billing-table th {
  background:var(--surface);
  color:var(--muted);
  font-weight:550
}
.billing-pagination {
  display:flex;
  justify-content:center;
  gap:20px;
  margin:20px
}
.billing-plans-page {
  padding-top:60px;
  padding-bottom:60px
}
.billing-credit-chip {
  color:var(--accent-dark);
  text-decoration:none;
  font-size:12px;
  border:1px solid var(--border);
  border-radius:6px;
  padding:7px 10px;
  white-space:nowrap
}
.billing-credit-chip:hover {
  background:var(--surface)
}
.billing-sr {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%)
}
[data-billing-period][hidden] {
  display:none!important
}

@media (min-width:761px) and (max-height:800px) {
  .billing-modal { padding:24px }
  .billing-modal .billing-heading { margin:0 0 14px }
  .billing-modal .billing-heading h2 { font-size:28px; margin:6px 0 }
  .billing-modal .billing-period-switch { margin-bottom:18px }
  .billing-modal .billing-plan { padding:18px }
  .billing-modal .billing-price { margin:14px 0 8px }
  .billing-modal .billing-features { padding:10px 0; margin:4px 0 12px }
  .billing-modal .billing-features li { margin:6px 0 }
  .billing-modal .billing-explanation { font-size:12px; margin:14px auto 10px }
}

@media(max-width:760px) {
  .billing-modal {
  padding:30px 18px 22px;
  max-height:calc(100dvh - 24px);
  width:calc(100% - 20px)
}
.billing-heading h2 {
  font-size:27px
}
.billing-plan-grid,.billing-pack-grid,.billing-summary {
  grid-template-columns:1fr
}
.billing-plan {
  padding:22px
}
.billing-features {
  margin-bottom:8px;
  padding:12px 0
}
.billing-summary>div+div {
  border-left:0;
  border-top:1px solid var(--border)
}
.billing-inline-actions {
  flex-direction:column;
  align-items:stretch;
  gap:8px
}
.billing-period-switch button {
  padding:9px 12px
}
.billing-credit-chip {
  font-size:11px;
  padding:6px
}

}
.payment-success-modal {
  box-sizing: border-box;
  width: min(420px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 40px 32px 32px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  text-align: center;
  box-shadow: 0 32px 100px rgb(17 21 28 / 20%), 0 4px 16px rgb(17 21 28 / 6%);
}
.payment-success-modal::backdrop {
  background: rgb(17 21 28 / 38%);
  backdrop-filter: blur(4px);
}
.payment-success-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  border: 1px solid var(--success-border);
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
  box-shadow: 0 0 0 8px rgb(21 128 61 / 4%);
}
.payment-success-icon svg { width: 30px; height: 30px; }
.payment-success-modal h2 {
  margin: 0 0 12px;
  font-size: clamp(23px, 5vw, 27px);
  letter-spacing: -.8px;
  line-height: 1.2;
}
.payment-success-modal p {
  max-width: 290px;
  margin: 0 auto 28px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}
.payment-success-modal .billing-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  border-radius: 9px;
}