.sepasubs-my-account {
  --sepasubs-color-accent: var(--sepasubs-theme-accent, var(--sepasubs-config-accent, currentColor));
  --sepasubs-color-border: rgba(31, 41, 55, .16);
  --sepasubs-color-surface: var(--sepasubs-config-surface, #fff);
  --sepasubs-color-success: #16794b;
  --sepasubs-color-success-bg: #e8f7ef;
  --sepasubs-color-info: #175f9c;
  --sepasubs-color-info-bg: #eaf4fc;
  --sepasubs-color-warning: #8a5800;
  --sepasubs-color-warning-bg: #fff4d6;
  --sepasubs-color-danger: #a11f2b;
  --sepasubs-color-danger-bg: #fdecef;
  --sepasubs-radius: var(--sepasubs-config-radius, 10px);
  display: grid;
  gap: 24px;
  color: inherit;
  font: inherit;
  container-type: inline-size;
}
.sepasubs-account-header > * { margin-block: 0 8px; }
.sepasubs-account-kicker { color: var(--sepasubs-color-accent); font-size: .78em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sepasubs-demo-banner { padding: 14px 16px; border: 1px solid #d6a700; border-radius: var(--sepasubs-radius); background: #fff8d6; color: #5f4700; }
.sepasubs-demo-badge { display: inline-flex; margin-inline-start: 7px; padding: 4px 7px; border-radius: 6px; background: #ffe08a; color: #594000; font-size: .72em; font-weight: 900; letter-spacing: .06em; }
.sepasubs-account-list { display: grid; gap: 18px; }
.sepasubs-account-empty { display:grid;gap:14px;padding:clamp(22px,4vw,38px);border:1px solid var(--sepasubs-color-border);border-radius:var(--sepasubs-radius);background:var(--sepasubs-color-surface);text-align:center; }
.sepasubs-account-empty h3,.sepasubs-account-empty p { margin:0; }
.sepasubs-account-products { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px;margin-top:8px;text-align:left; }
.sepasubs-account-product { display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px;border:1px solid var(--sepasubs-color-border);border-radius:var(--sepasubs-radius); }
.sepasubs-account-product h4,.sepasubs-account-product p { margin:0 0 5px; }
.sepasubs-account-card { display: grid; gap: 18px; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--sepasubs-color-border); border-radius: var(--sepasubs-radius); background: var(--sepasubs-color-surface); box-shadow: 0 8px 24px rgba(15, 23, 42, .06); }
.sepasubs-account-card--demo { border-style: dashed; border-color: #d6a700; }
.sepasubs-account-card--past_due, .sepasubs-account-card--on_hold { border-inline-start: 5px solid var(--sepasubs-color-warning); }
.sepasubs-account-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, auto); gap: 24px; align-items: start; }
.sepasubs-account-summary h3 { margin: 7px 0; color: inherit; font: inherit; font-size: clamp(1.25rem, 2vw, 1.65rem); font-weight: 800; }
.sepasubs-account-status { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: var(--sepasubs-color-info); background: var(--sepasubs-color-info-bg); font-size: .78em; font-weight: 800; }
.sepasubs-account-card--active .sepasubs-account-status, .sepasubs-account-card--trialing .sepasubs-account-status { color: var(--sepasubs-color-success); background: var(--sepasubs-color-success-bg); }
.sepasubs-account-card--past_due .sepasubs-account-status, .sepasubs-account-card--on_hold .sepasubs-account-status, .sepasubs-account-card--pending_cancel .sepasubs-account-status { color: var(--sepasubs-color-warning); background: var(--sepasubs-color-warning-bg); }
.sepasubs-account-card--cancelled .sepasubs-account-status, .sepasubs-account-card--expired .sepasubs-account-status { color: inherit; background: rgba(127,127,127,.13); }
.sepasubs-account-price { margin: 0; font-size: 1.2em; font-weight: 800; }
.sepasubs-account-price small { font-size: .72em; font-weight: 500; opacity: .7; }
.sepasubs-account-facts { display: grid; gap: 10px; margin: 0; }
.sepasubs-account-facts div { display: flex; justify-content: space-between; gap: 20px; }
.sepasubs-account-facts dt { opacity: .68; }
.sepasubs-account-facts dd { margin: 0; font-weight: 700; text-align: right; }
.sepasubs-account-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.sepasubs-account-actions form { margin: 0; }
.sepasubs-my-account .button.sepasubs-account-cancel { border-color: var(--sepasubs-color-danger); color: var(--sepasubs-color-danger); background: transparent; }
.sepasubs-my-account .button.sepasubs-account-cancel:hover, .sepasubs-my-account .button.sepasubs-account-cancel:focus-visible { color: #fff; background: var(--sepasubs-color-danger); }
.sepasubs-account-details { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--sepasubs-color-border); }
.sepasubs-account-details h4 { margin: 8px 0 0; font: inherit; font-size: 1.05em; font-weight: 800; }
.sepasubs-account-items { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sepasubs-account-items li, .sepasubs-account-receipts > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--sepasubs-color-border); }
.sepasubs-account-dialog { position: relative; width: min(520px, calc(100% - 32px)); max-height: calc(100vh - 40px); overflow: auto; padding: 28px; border: 1px solid var(--sepasubs-color-border); border-radius: var(--sepasubs-radius); color: inherit; background: var(--sepasubs-color-surface); box-shadow: 0 24px 80px rgba(0,0,0,.28); }
.sepasubs-account-dialog::backdrop { background: rgba(0,0,0,.52); }
.sepasubs-account-dialog-close { position: absolute; top: 8px; right: 8px; display: grid; width: 36px; height: 36px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1.7rem; cursor: pointer; }
.sepasubs-account-dialog-close:focus-visible { outline: 3px solid var(--sepasubs-color-accent); outline-offset: 2px; }
@container (max-width: 700px) { .sepasubs-account-summary { grid-template-columns: 1fr; } .sepasubs-account-facts dd { text-align: left; } .sepasubs-account-facts div { display: grid; gap: 2px; } .sepasubs-account-actions { display: grid; } .sepasubs-account-actions .button, .sepasubs-account-actions form { width: 100%; } }
@media (forced-colors: active) { .sepasubs-account-card, .sepasubs-account-status, .sepasubs-demo-banner { border: 1px solid CanvasText; } }
@media (prefers-reduced-motion: reduce) { .sepasubs-my-account * { scroll-behavior: auto !important; transition-duration: .01ms !important; } }