:root {
  color-scheme: light;
  --background: 40 33% 98%; --foreground: 20 14% 4%; --card: 0 0% 100%;
  --primary: 24 93% 54%; --primary-foreground: 60 9.1% 97.8%;
  --muted: 24 10% 94%; --muted-foreground: 25 5.3% 44.7%;
  --border: 24 15% 85%; --input: 24 15% 85%; --ring: 24 93% 54%;
  --accent: 25 90% 95%; --radius: .75rem; --shell: 36 24% 95%;
  font: 14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark; --background: 0 0% 9.4%; --foreground: 34 18% 90%; --card: 0 0% 13.3%;
  --primary: 24 88% 58%; --primary-foreground: 24 22% 8%; --muted: 0 0% 14.5%;
  --muted-foreground: 34 10% 58%; --border: 0 0% 18%; --input: 0 0% 18%;
  --ring: 24 88% 58%; --accent: 0 0% 16.9%; --shell: 0 0% 13.3%;
}
:root[data-theme="obsidian"] {
  color-scheme: dark; --background: 0 0% 4.3%; --foreground: 0 0% 96%; --card: 0 0% 6.5%;
  --primary: 0 0% 100%; --primary-foreground: 0 0% 4%; --muted: 0 0% 9%;
  --muted-foreground: 0 0% 57%; --border: 0 0% 17%; --input: 0 0% 39%;
  --ring: 0 0% 100%; --accent: 0 0% 11%; --shell: 0 0% 1.6%; --radius: 0;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: hsl(var(--background)); color: hsl(var(--foreground)); }
a { color: inherit; text-decoration: none; }
.app-header { min-height: 64px; padding: 12px 32px; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--shell)); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 650; }
.brand-mark { display: grid; place-items: center; height: 28px; width: 28px; border-radius: calc(var(--radius) / 2); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: 14px; }
.header-controls,.page-actions { display: flex; align-items: center; gap: 12px; }
.team-control { display: flex; align-items: center; gap: 8px; color: hsl(var(--muted-foreground)); }
.team-control select { max-width: 290px; }
main { max-width: 1120px; padding: 30px 32px 64px; margin: auto; }
.page-heading,.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
h1 { font-size: 26px; line-height: 1.25; letter-spacing: -.025em; margin: 0 0 6px; font-weight: 650; }
h2 { font-size: 16px; line-height: 1.3; font-weight: 600; margin: 0 0 14px; }
.section-heading h2 { margin: 0; }
p { margin: 0 0 12px; }
.eyebrow { font-size: 12px; color: hsl(var(--muted-foreground)); margin: 0 0 4px; }
.muted,.caption { color: hsl(var(--muted-foreground)); }
.caption { font-size: 12px; margin: 12px 0 0; }
.notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 20px 0; padding: 10px 14px; background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) / 2); font-size: 12px; }
.notice strong { font-weight: 600; }
.card { padding: 24px; margin-bottom: 20px; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); box-shadow: 0 1px 2px hsl(0 0% 0% / .03); }
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.subscription-date { margin: 20px 0 4px; font-size: 20px; font-weight: 550; letter-spacing: -.02em; }
.badge { display: inline-flex; align-items: center; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) / 2); padding: 3px 8px; font-size: 12px; white-space: nowrap; background: hsl(var(--muted)); }
button,.button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 38px; padding: 8px 14px; border: 1px solid transparent; border-radius: calc(var(--radius) / 2); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font: inherit; font-weight: 550; cursor: pointer; }
button:hover,.button:hover { filter: brightness(.95); }
button.secondary { background: transparent; border-color: hsl(var(--input)); color: hsl(var(--foreground)); }
button.secondary:hover { background: hsl(var(--accent)); filter: none; }
button.small { min-height: 32px; padding: 5px 10px; font-size: 12px; }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible,a:focus-visible,select:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; }
select { min-height: 36px; padding: 6px 32px 6px 10px; border-radius: calc(var(--radius) / 2); border: 1px solid hsl(var(--input)); color: hsl(var(--foreground)); background: hsl(var(--card)); font: inherit; }
.field { display: grid; gap: 6px; margin: 12px 0; font-size: 12px; color: hsl(var(--muted-foreground)); }
.field select { width: 100%; }
.message { padding: 12px 16px; border-left: 3px solid hsl(var(--primary)); background: hsl(var(--muted)); margin-bottom: 20px; }
.facts { display: grid; grid-template-columns: 135px 1fr; gap: 8px 16px; margin: 20px 0; }
.facts dt { color: hsl(var(--muted-foreground)); }
.facts dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.instructions { padding: 14px; background: hsl(var(--muted)); border-radius: calc(var(--radius) / 2); }
.instructions code { display: block; margin-top: 6px; overflow-wrap: anywhere; }
.exceptions { padding-left: 20px; margin-bottom: 0; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { padding: 12px 12px 10px 0; font-size: 12px; font-weight: 500; color: hsl(var(--muted-foreground)); border-bottom: 1px solid hsl(var(--border)); }
td { padding: 12px 12px 12px 0; border-bottom: 1px solid hsl(var(--border)); font-size: 13px; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
td:last-child { text-align: right; padding-right: 0; }
#empty-history,#empty-invoices,#empty-invitations { margin: 16px 0 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media(max-width:760px) { .app-header { padding: 12px 16px; flex-wrap: wrap; } .header-controls { flex-wrap: wrap; gap: 8px; } main { padding: 24px 16px; } .summary-grid { grid-template-columns: 1fr; gap: 0; } .card { padding: 18px; } .page-heading { align-items: flex-start; } .page-actions { gap: 6px; flex-direction: column; align-items: flex-end; } .team-control select { max-width: 200px; } .facts { grid-template-columns: 100px 1fr; } }

input,textarea { width: 100%; min-width: 0; padding: 8px 10px; border-radius: calc(var(--radius) / 2); border: 1px solid hsl(var(--input)); color: hsl(var(--foreground)); background: hsl(var(--card)); font: inherit; }
textarea { resize: vertical; overflow-wrap: anywhere; }
input:focus-visible,textarea:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; }
.member-identity { display: block; overflow-wrap: anywhere; max-width: 340px; }
.member-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.invite-form { margin-top: 24px; padding-top: 20px; border-top: 1px solid hsl(var(--border)); }
@media(max-width:760px) { .member-actions { flex-direction: column; } .member-identity { min-width: 120px; } }

.invitations-heading { margin-top: 24px; }

.payment-detail { margin: 14px 0 0; }
.payment[data-stage="review"] .payment-detail,.payment[data-stage="expired"] .payment-detail,.payment[data-stage="unknown"] .payment-detail,.payment[data-stage="refund_pending"] .payment-detail,.payment[data-stage="refunded"] .payment-detail { padding: 12px 16px; border-left: 3px solid hsl(var(--primary)); background: hsl(var(--muted)); }
.payment[data-stage="review"] #invoice-status,.payment[data-stage="expired"] #invoice-status { border-color: hsl(var(--primary)); }
.payment-facts dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.payment-facts small { flex-basis: 100%; font-size: 12px; }
.payment-value { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.instructions code { font-size: 14px; user-select: all; }
.instructions .copy { margin-top: 10px; }
#invoice-facts { margin-top: 16px; }

/* Narrow screens: each row becomes a block with its column names, so every value and action stays reachable without sideways scrolling. */
@media(max-width:640px) {
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  table.stack,table.stack tbody,table.stack tr,table.stack td { display: block; width: 100%; }
  table.stack tr { padding: 10px 0; border-bottom: 1px solid hsl(var(--border)); }
  table.stack tr:last-child { border-bottom: 0; }
  table.stack td { position: relative; min-height: 26px; padding: 4px 0 4px calc(34% + 12px); border: 0; text-align: left; overflow-wrap: anywhere; }
  table.stack td::before { content: attr(data-label); position: absolute; left: 0; top: 5px; width: 34%; color: hsl(var(--muted-foreground)); font-size: 12px; }
  table.stack td.row-action { padding: 8px 0 0; }
  table.stack td.row-action::before { content: none; }
  table.stack td.row-action button { width: 100%; min-height: 44px; }
  table.stack td.row-action .member-actions { align-items: stretch; }
  .copy { width: 100%; min-height: 44px; }
  .payment-value { font-size: 17px; }
}

.consent-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.check { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; }
.check input { width: auto; flex: none; margin: 3px 0 0; accent-color: hsl(var(--primary)); }
.order-actions { justify-content: flex-start; margin-top: 12px; }
.document-list { display: flex; flex-wrap: wrap; gap: 8px; }
.notices { list-style: none; padding: 0; margin: 16px 0 0; }
.notices li { padding: 12px 0; border-top: 1px solid hsl(var(--border)); }
.notices .facts { margin: 8px 0 0; }
.withdrawal-step { margin: 16px 0 0; }
@media(max-width:760px) { .consent-fields { grid-template-columns: 1fr; } .order-actions { flex-direction: column; align-items: stretch; } }

/* Plan change, quote and retained-machine choice. Existing tokens, borders and type sizes only. */
fieldset { border: 0; padding: 0; margin: 16px 0 0; min-width: 0; }
legend { padding: 0; font-weight: 600; }
.check small,.facts dd small { display: block; font-size: 12px; color: hsl(var(--muted-foreground)); }
.check input:disabled + span { color: hsl(var(--muted-foreground)); }
.machine-list { list-style: none; padding: 0; margin: 8px 0 0; }
.machine-list li { border-top: 1px solid hsl(var(--border)); }
.machine-list li:last-child { border-bottom: 1px solid hsl(var(--border)); }
.machine-list .check { margin: 0; padding: 10px 0; min-height: 44px; cursor: pointer; }
.machine-list .machine-id { display: block; font-size: 13px; overflow-wrap: anywhere; word-break: break-all; }
.choice .check { cursor: pointer; }
.quote-note { margin: 16px 0 0; }
.selection-confirm { margin-top: 16px; font-weight: 550; }
@media(max-width:640px) { .order-actions button { min-height: 44px; } .check input { width: 18px; height: 18px; } }

/* Shared navigation: the same rules as the account security page, so both pages read alike in every theme. */
.header-start { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.app-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.app-nav a { padding: 6px 10px; border-radius: calc(var(--radius) / 2); color: hsl(var(--muted-foreground)); }
.app-nav a:hover { color: hsl(var(--foreground)); }
.app-nav a[aria-current="page"] { color: hsl(var(--foreground)); background: hsl(var(--accent)); font-weight: 550; }
@media(max-width:640px) { .header-start { width: 100%; } }

/* Subscription coverage and purchase receipts. */
#subscription-periods { margin: 12px 0 0; }
#history td.receipt { text-align: left; }
td.receipt span { display: block; overflow-wrap: anywhere; }
td.receipt span + span { font-size: 12px; color: hsl(var(--muted-foreground)); }
#invoice-product { margin: 14px 0 0; }

.staff-page tr[aria-current="true"] td { background: hsl(var(--accent)); }
.staff-page .decision-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.staff-page .staff-subheading { margin-top: 24px; }
.staff-page .sign-out-form { margin: 0; }
@media(max-width:760px) { .staff-page .decision-fields { grid-template-columns: 1fr; } }