:root {
  color-scheme: light dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --page: #f5f3ef;
  --surface: #fff;
  --text: #252525;
  --muted: #77766f;
  --border: #dedbd4;
  --accent: #ffd49e;
  --accent-hover: #efbd7f;
  --input: #f7f6f3;
  --success: #2e8058;
  --error: #b43d3d;
  --button-neutral-hover: #eeece8;
  --button-destructive: #c92312;
  --button-destructive-hover: #ad1e10;
  --button-radius: 9px;
  --button-header-height: 44px;
  --button-header-padding: 18px;
  --button-card-height: 38px;
  --button-card-padding: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #17191a;
    --surface: #202426;
    --text: #f0efec;
    --muted: #aaa9a4;
    --border: #393d3f;
    --accent: #ffd49e;
    --accent-hover: #f2c183;
    --input: #292c2e;
    --success: #72c495;
    --error: #ff8585;
    --button-neutral-hover: #34383a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--page);
  color: var(--text);
}

.page-shell {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}

.account-card {
  width: min(100%, 1120px);
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 18px 54px rgb(0 0 0 / 8%);
}

.account-header { display: flex; align-items: center; gap: clamp(28px, 5vw, 64px); margin-bottom: clamp(28px, 4vw, 42px); }
body[data-auth-state="signed-out"] .account-header { display: none; }
.brand { display: inline-block; flex: 0 0 auto; margin: 0; }
.brand img { display: block; width: min(150px, 60vw); height: auto; }
.dashboard-greeting { display: flex; min-width: 0; flex: 1; align-items: center; justify-content: flex-end; gap: 24px; text-align: right; }
.dashboard-greeting > div { margin-left: auto; text-align: right; }
.dashboard-greeting h1 { font-size: clamp(27px, 3.4vw, 36px); }
.dashboard-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.account-email-button { max-width: min(100%, 420px); gap: 10px; text-align: left; overflow-wrap: anywhere; }
.account-info-icon { width: 17px; height: 17px; flex: 0 0 auto; background: currentColor; -webkit-mask: url("/assets/gear-solid-full.svg") center / contain no-repeat; mask: url("/assets/gear-solid-full.svg") center / contain no-repeat; }
.dashboard-page-icon { width: 17px; height: 17px; flex: 0 0 auto; background: currentColor; -webkit-mask: url("/assets/rectangles-mixed-solid-full.svg") center / contain no-repeat; mask: url("/assets/rectangles-mixed-solid-full.svg") center / contain no-repeat; }
.dashboard-greeting .status { margin-top: 8px; text-align: right; }
.eyebrow { margin: 0 0 10px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .13em; }
h1 { margin: 0; font-size: clamp(27px, 4vw, 38px); letter-spacing: -.035em; line-height: 1.15; }
.intro { margin: 12px 0 28px; color: var(--muted); line-height: 1.55; }

.auth-layout,
.dashboard-layout {
  display: grid;
  align-items: stretch;
  gap: 14px;
}

.auth-layout { grid-template-columns: minmax(0, .95fr) minmax(340px, 1.05fr); }
.auth-layout { align-items: center; gap: clamp(32px, 6vw, 76px); }
.auth-intro { max-width: 420px; }
.auth-brand { margin-bottom: clamp(26px, 4vw, 38px); }
.auth-intro .intro { max-width: 360px; font-size: 16px; }
.auth-form-panel {
  --auth-code-width: 390px;
  --auth-panel-padding: clamp(22px, 3.5vw, 34px);
  width: min(100%, calc(var(--auth-code-width) + var(--auth-panel-padding) + var(--auth-panel-padding) + 2px));
  justify-self: center;
  padding: var(--auth-panel-padding);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--input);
}
.join-card { width: min(100%, 1120px); }
.join-layout { grid-template-columns: minmax(0, .95fr) minmax(340px, 1.05fr); align-items: center; gap: clamp(32px, 6vw, 76px); }
.join-form-panel { width: min(100%, 460px); }
.join-form-panel form { min-width: 0; }
.optional-label { color: var(--muted); font-size: 12px; font-weight: 400; }
.join-code-copy { margin: 0 0 2px; color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.join-code-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.join-code-actions .ui-button { margin-right: auto; }
.join-existing-account { margin: 13px 0 0; color: var(--muted); font-size: 13px; }
.join-existing-account a { color: var(--text); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.join-footer { width: 100%; align-items: center; justify-content: center; margin-top: 24px; }

form { display: grid; gap: 10px; }
form + form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.auth-form-panel > form { min-width: 0; }
.auth-email-actions { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
label, .field-label { font-size: 13px; font-weight: 650; }
input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  outline: none;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
input:focus { border-color: #c99d62; box-shadow: 0 0 0 3px rgb(201 157 98 / 20%); }
.ui-button {
  display: inline-flex;
  -webkit-appearance: none;
  appearance: none;
  width: max-content;
  max-width: 100%;
  height: var(--button-card-height);
  min-height: var(--button-card-height);
  align-items: center;
  justify-content: center;
  padding: 0 var(--button-card-padding);
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
  cursor: pointer;
}
.ui-button--header {
  height: var(--button-header-height);
  min-height: var(--button-header-height);
  padding-inline: var(--button-header-padding);
  font-size: 16px;
}
.ui-button--neutral { border-color: var(--border); background: var(--input); color: var(--text); }
.ui-button--neutral:hover:not(:disabled) { border-color: #c99d62; background: var(--button-neutral-hover); }
.ui-button--positive { background: var(--accent); color: #171717; }
.ui-button--positive:hover:not(:disabled) { background: var(--accent-hover); }
.ui-button--destructive { background: var(--button-destructive); color: #fff; }
.ui-button--destructive:hover:not(:disabled) { background: var(--button-destructive-hover); }
.ui-button--with-seat-icon,
.ui-button--with-signout-icon { gap: 8px; }
.ui-button--with-seat-icon::before,
.ui-button--with-signout-icon::before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  background: currentColor;
}
.ui-button--with-seat-icon::before { -webkit-mask: url("/assets/seat-solid-full.svg") center / contain no-repeat; mask: url("/assets/seat-solid-full.svg") center / contain no-repeat; }
.ui-button--with-signout-icon::before { -webkit-mask: url("/assets/arrow-right-from-bracket-solid-full.svg") center / contain no-repeat; mask: url("/assets/arrow-right-from-bracket-solid-full.svg") center / contain no-repeat; }
button:disabled { cursor: wait; opacity: .65; }
button:focus-visible, .ui-button:focus-visible, .text-button:focus-visible { outline: 3px solid #c99d62; outline-offset: 2px; }
.text-button { display: inline-block; -webkit-appearance: none; appearance: none; min-height: 0; height: auto; padding: 0 8px; border: 0; border-radius: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; line-height: 1.2; text-decoration: underline; text-underline-offset: 3px; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.status { min-height: 22px; margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.status[data-kind="error"] { color: var(--error); }
.status[data-kind="success"] { color: var(--success); }
.privacy-note { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; line-height: 1.55; }

.otp-entry { display: grid; width: min(100%, var(--auth-code-width, 390px)); grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
.otp-digit { min-width: 0; height: 58px; padding: 0; border-radius: 11px; font-size: clamp(22px, 5vw, 30px); font-weight: 800; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.otp-entry.has-error .otp-digit { border-color: var(--error); }
.otp-entry.is-complete .otp-digit { border-color: color-mix(in srgb, var(--success) 46%, var(--border)); }
.inline-alert { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 13px; line-height: 1.5; }
.inline-alert[data-kind="success"] { border-color: color-mix(in srgb, var(--success) 42%, var(--border)); background: color-mix(in srgb, var(--success) 10%, var(--surface)); color: var(--success); }
.inline-alert[data-kind="error"] { border-color: color-mix(in srgb, var(--error) 42%, var(--border)); background: color-mix(in srgb, var(--error) 8%, var(--surface)); color: var(--error); }
.alert-check { display: none; width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.inline-alert[data-kind="success"] .alert-check { display: block; }

.auth-loading {
  display: none;
  min-height: 300px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
  font-size: 14px;
}
body[data-auth-state="checking"] #signed-out-view,
body[data-auth-state="checking"] #signed-in-view,
body[data-auth-state="checking"] #handoff-confirmation { display: none; }
body[data-auth-state="checking"] #auth-loading { display: flex; }
.loading-spinner {
  width: 17px;
  height: 17px;
  border: 2px solid var(--border);
  border-top-color: #c99d62;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.dashboard-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-placeholder,
.purchase-controls {
  min-width: 0;
  margin: 0;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--input);
}
.dashboard-placeholder h2 { margin: 0 0 6px; font-size: 16px; }
.dashboard-placeholder p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.overview-list { margin-top: 16px; }
.overview-list h3 { margin: 0 0 8px; font-size: 13px; }
.overview-list ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.overview-list li { padding-top: 8px; border-top: 1px solid var(--border); font-size: 13px; line-height: 1.45; }
.device-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.device-row > div { display: grid; min-width: 0; gap: 3px; }
.device-row strong { font-size: 13px; font-weight: 600; }
.device-row small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.overview-error { margin-top: 12px !important; color: var(--error) !important; }
.purchase-controls { display: grid; align-content: start; gap: 10px; }
.purchase-controls h2 { margin: 0; font-size: 16px; }
.purchase-controls > p:not(.status) { margin: 0 0 4px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.purchase-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.seat-purchase-row { display: flex; min-width: 0; align-items: center; gap: 10px; }
.seat-purchase-row > input { height: 38px; min-width: 0; flex: 1 1 150px; }
.seat-purchase-row .purchase-actions { flex: 0 0 auto; }
.purchase-controls .status { margin: 0; }

.dashboard-layout[data-view="checkout"] > :not(#checkout-panel) { display: none; }
.checkout-panel {
  grid-column: 1 / -1;
  min-width: 0;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--input);
  scroll-margin-top: 18px;
}
.checkout-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.checkout-header .eyebrow { margin-bottom: 6px; }
.checkout-header h2 { margin: 0; font-size: clamp(22px, 3vw, 28px); letter-spacing: -.03em; }
.checkout-header > .ui-button { flex: 0 0 auto; }
.checkout-layout { display: grid; grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr); align-items: start; gap: 14px; }
.checkout-summary,
.checkout-payment-card { min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.checkout-summary-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.checkout-summary-brand picture { display: block; flex: 0 0 auto; }
.checkout-summary-brand img { display: block; width: 86px; height: 64px; object-fit: contain; }
.checkout-summary-brand h3,
.checkout-payment-card h3 { margin: 0; font-size: 16px; }
.checkout-summary-brand p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.checkout-summary-loading { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.checkout-item-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.checkout-item { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.checkout-item-details { display: grid; min-width: 0; gap: 4px; }
.checkout-item-details strong { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.checkout-item-details span { color: var(--muted); font-size: 12px; }
.checkout-item-amount { flex: 0 0 auto; font-size: 14px; font-weight: 650; }
.checkout-totals { display: grid; gap: 12px; margin-top: 18px; }
.checkout-total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 13px; }
.checkout-total-row strong { color: var(--text); font-size: 13px; text-align: right; }
.checkout-total-row--grand { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--text); font-size: 15px; }
.checkout-total-row--grand strong { font-size: 18px; }
.checkout-tax-note { margin: 16px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.checkout-policy-link { margin: 10px 0 0; font-size: 12px; }
.checkout-policy-link a { color: var(--muted); text-underline-offset: 3px; }
.checkout-policy-link a:hover { color: var(--text); }
.checkout-payment-card h3 { margin-bottom: 6px; }
.checkout-payment-copy { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.checkout-frame-shell { min-width: 0; }
.paddle-checkout-frame { min-width: 0; min-height: 450px; }
.checkout-payment-card .status { margin-top: 8px; }
body[data-checkout-state="open"] .page-shell { justify-content: flex-start; }

.settings-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: start; gap: 14px; }
.settings-panel { min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: 14px; background: var(--input); }
.settings-panel h2 { margin: 0 0 14px; font-size: 17px; }
.settings-description { margin: 0 0 10px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.settings-description strong { color: var(--text); overflow-wrap: anywhere; }
.settings-current-email { min-width: 0; margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.account-profile-fields { display: grid; gap: 12px; }
.settings-panel .profile-field-form { min-width: 0; margin: 0; padding: 0; border: 0; gap: 6px; }
.profile-input-row { display: flex; min-width: 0; align-items: stretch; gap: 10px; }
.profile-input-row input { height: var(--button-card-height); min-width: 0; flex: 1 1 auto; }
.profile-input-row button { flex: 0 0 auto; margin: 0; }
.profile-input-row button:disabled { cursor: default; }
.profile-field-status { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.profile-field-status:empty { display: none; }
.profile-field-status[data-kind="success"] { color: var(--success); }
.profile-field-status[data-kind="error"] { color: var(--error); }
.profile-email-divider { width: 100%; margin: 16px 0; border: 0; border-top: 1px solid var(--border); }
.email-address-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-panel form { margin-top: 18px; gap: 10px; }
.settings-panel form + form { margin-top: 18px; padding: 0; border: 0; }
.settings-panel .inline-alert + form { margin-top: 16px; }
.settings-panel #verify-current-email { justify-self: start; }
.email-entry-row { display: flex; align-items: stretch; gap: 10px; }
.email-entry-row input { height: 38px; min-width: 0; flex: 1 1 180px; }
.email-entry-row button { flex: 0 0 auto; margin: 0; }
.purchase-history-list { display: grid; gap: 10px; }
.purchase-history-row { display: grid; gap: 0; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.purchase-history-primary-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 14px; }
.purchase-history-details { display: grid; min-width: 0; gap: 4px; }
.purchase-history-details strong { font-size: 14px; }
.purchase-history-details span { color: var(--muted); font-size: 12px; }
.purchase-history-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: 8px; }
.purchase-history-divider { width: 100%; margin: 10px 0; border: 0; border-top: 1px solid var(--border); }
.purchase-history-refund-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.purchase-history-refund-row .ui-button { flex: 0 0 auto; }
.purchase-refund-policy { margin: 14px 0 0; font-size: 12px; }
.purchase-refund-note { color: var(--muted); font-size: 12px; line-height: 1.4; }
#purchase-history-status:empty { display: none; }
.settings-login-link { justify-self: start; }
.settings-signed-out { max-width: 560px; }
.settings-signed-out h2 { margin: 0; font-size: clamp(24px, 3vw, 32px); letter-spacing: -.03em; }
body[data-settings-state="checking"] #settings-view,
body[data-settings-state="checking"] #settings-signed-out { display: none; }
body[data-settings-state="checking"] #settings-loading { display: flex; }
body[data-settings-state="signed-in"] #settings-loading,
body[data-settings-state="signed-out"] #settings-loading { display: none; }

#handoff-confirmation { max-width: 680px; margin: 0 auto; }
#handoff-confirmation .intro { margin-bottom: 22px; }

footer { display: flex; width: min(100%, 1120px); justify-content: center; gap: 10px; margin-top: 18px; color: var(--muted); font-size: 12px; }
footer a { color: inherit; }
.policy-card { max-width: 900px; }
.policy-header { margin-bottom: 30px; }
.policy-content { max-width: 700px; margin-inline: auto; }
.policy-content > p { color: var(--muted); line-height: 1.6; }
.policy-content > .policy-intro { margin: 12px 0 28px; font-size: 16px; }
.policy-content section { padding-top: 20px; border-top: 1px solid var(--border); }
.policy-content section + section { margin-top: 20px; }
.policy-content h2 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.02em; }
.policy-content section p { margin: 0; color: var(--muted); line-height: 1.6; }
.policy-content a { color: var(--text); text-underline-offset: 3px; }
.hidden { display: none !important; }

@media (max-width: 900px) {
  .auth-layout { grid-template-columns: minmax(0, .85fr) minmax(300px, 1.15fr); gap: 30px; }
}

@media (max-width: 720px) {
  .page-shell { justify-content: flex-start; padding: 20px 14px; }
  .account-card { padding: 28px 22px; border-radius: 16px; }
  .account-header { gap: 24px; margin-bottom: 30px; }
  .brand img { width: min(150px, 52vw); }
  .auth-layout,
  .dashboard-layout,
  .settings-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .join-layout { grid-template-columns: minmax(0, 1fr); }
  .join-form-panel { width: min(100%, 460px); }
  .auth-intro { max-width: none; }
  .auth-intro .intro { max-width: 460px; }
  .auth-form-panel {
    --auth-panel-padding: 20px;
    width: min(100%, calc(var(--auth-code-width) + var(--auth-panel-padding) + var(--auth-panel-padding) + 2px));
    padding: var(--auth-panel-padding);
  }
  .auth-loading { min-height: 220px; }
}

@media (max-width: 820px) {
  .checkout-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .account-header { align-items: flex-start; flex-direction: column; gap: 22px; }
  .dashboard-greeting { width: 100%; align-items: flex-start; justify-content: flex-start; text-align: left; }
  .dashboard-greeting > div { margin-left: 0; text-align: left; }
  .dashboard-greeting h1 { font-size: 30px; }
  .dashboard-actions { justify-content: flex-start; }
  .dashboard-greeting .status { text-align: left; }
  .purchase-history-primary-row { gap: 10px; }
  .email-entry-row { align-items: stretch; flex-direction: column; }
  .email-entry-row button { align-self: flex-start; }
  .email-address-row { align-items: flex-start; flex-wrap: wrap; }
  .seat-purchase-row { flex-wrap: wrap; }
  .seat-purchase-row .purchase-actions { flex: 1 1 auto; }
  body[data-checkout-state="open"] .page-shell { padding-inline: 0; }
  body[data-checkout-state="open"] .account-card { width: 100%; padding: 18px 12px; border-radius: 12px; }
  body[data-checkout-state="open"] .checkout-panel { padding: 14px 10px; }
  .checkout-header { align-items: flex-start; flex-direction: column; }
  .checkout-header > .ui-button { align-self: flex-start; }
  .checkout-summary,
  .checkout-payment-card { padding: 16px; }
  .checkout-frame-shell { position: relative; left: 50%; width: max(100%, 312px); max-width: calc(100vw - 8px); transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}