@charset "UTF-8";
/* --- currency toggle --- */
.cur {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  overflow: hidden;
}

.cur button {
  padding: 5px 11px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.cur button.on {
  background: var(--accent-muted);
  color: var(--text-strong);
}

.cur button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* order / quote segmented switch */
.seg {
  display: inline-flex;
  border: 2px solid var(--border-strong);
  overflow: hidden;
  background: transparent;
}

.seg button {
  padding: 8px 15px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: transparent;
  border: 0;
  border-right: 2px solid var(--border-strong);
  cursor: pointer;
}

.seg button:last-child {
  border-right: 0;
}

.seg button.on {
  background: var(--summary-head);
  color: var(--text-strong);
}

.seg.blue button.on {
  background: var(--accent-muted);
}

/* --- two-column body --- */
.checkout-body {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding: 0 var(--space-5) var(--space-6);
}

.checkout-form {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.checkout-side {
  width: 300px;
  flex: none;
}

@media (max-width: 860px) {
  .checkout-body {
    flex-direction: column;
  }
  .checkout-side {
    width: 100%;
  }
}
/* --- step card --- */
.step {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  padding: var(--space-4) 18px 18px;
}

.step-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: var(--space-4);
}

.step-num {
  width: 27px;
  height: 27px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--accent-muted);
  background: color-mix(in srgb, var(--accent-muted) 20%, transparent);
  color: var(--text-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-md);
}

.step-title {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  color: var(--text-strong);
}

/* --- line card (square, brand) --- */
.line-card {
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sharp);
  background: var(--surface-item);
  padding: 13px 14px;
  margin-bottom: 11px;
}

.line-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: var(--space-3);
}

.line-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-muted);
  flex: none;
}

.line-title {
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--text-strong);
}

.tag {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0.3px;
  background: color-mix(in srgb, var(--accent-muted) 20%, transparent);
  border: 1px solid var(--accent-muted);
  color: var(--accent-text);
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: var(--space-2);
  white-space: nowrap;
}

.icon-btn {
  margin-left: auto;
  width: 28px;
  height: 28px;
  flex: none;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
}

.icon-btn:hover {
  border-color: var(--accent-muted);
  color: var(--text-strong);
}

.line-body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.line-label {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  margin-bottom: 5px;
}

.line-fixed-users {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-strong);
  padding: 6px 2px;
}

.line-price {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.line-price b {
  font-size: var(--fs-md);
  color: var(--text-strong);
}

.line-desc {
  margin: 9px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: #b8afcc;
}

/* Read-only seat-overflow child rendered inside the main line's card. */
.line-overflow {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border);
}

.line-overflow-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

/* --- stepper (square, brand) --- */
.stepper {
  display: inline-flex;
  align-items: stretch;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-sharp);
  overflow: hidden;
}

.stepper-btn {
  width: 34px;
  border: none;
  background: transparent;
  font-size: var(--fs-lg);
  font-weight: 700;
  cursor: pointer;
  color: var(--text-strong);
}

.stepper-btn:disabled {
  color: var(--border-strong);
  cursor: not-allowed;
}

/* The seat count is a typeable number input: the shopper can either use the +/- buttons or type a value, which the
   QuantityStepper validates against the active min/max. Native number-spinners are hidden so only our square buttons show. */
.stepper-val {
  width: 56px;
  text-align: center;
  padding: 6px 8px;
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--text-strong);
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-left: 2px solid var(--border-strong);
  border-right: 2px solid var(--border-strong);
  -moz-appearance: textfield;
  appearance: textfield;
}

.stepper-val:focus {
  outline: none;
  background: rgba(151, 59, 252, 0.12);
}

.stepper-val:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

.stepper-val::-webkit-outer-spin-button,
.stepper-val::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --- add button (dashed purple expander) --- */
.add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: 13px var(--space-4);
  border: 1px dashed var(--accent-muted);
  border-radius: var(--radius-sharp);
  background: color-mix(in srgb, var(--accent-muted) 10%, transparent);
  color: var(--accent-text);
  font-weight: 700;
  font-size: var(--fs-md);
  cursor: pointer;
}

.add-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.add-plus {
  width: 22px;
  height: 22px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--accent-muted);
  color: var(--accent-muted);
  font-size: var(--fs-md);
  font-weight: 700;
}

.empty-state {
  padding: var(--space-4) 0;
  color: var(--muted);
}

/* --- summary --- */
.summary {
  position: sticky;
  top: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-raised);
}

.summary-head {
  background: var(--summary-head);
  color: var(--text-strong);
  padding: 11px var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mode-pill {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  background: var(--accent-muted);
  color: var(--accent-contrast);
  padding: 3px 9px;
  border-radius: 4px;
}

.mode-pill--quote {
  background: var(--anno);
}

.summary-body {
  padding: 14px var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.sline {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--text);
}

.sline--disc {
  color: var(--success);
  font-weight: 700;
}

.rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 3px 0;
}

.rule--dash {
  height: 0;
  background: none;
  border-top: 1px dashed var(--border);
}

.stotal {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  color: var(--text-strong);
  padding-top: 2px;
}

.summary-note {
  margin: 2px 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.summary-cta {
  margin-top: var(--space-4);
}

/* PayPro merchant-of-record notice + data-sharing consent (card gateway only) */
.paypro-note {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--muted);
}

.paypro-consent {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 11px;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--muted);
  cursor: pointer;
}

.paypro-consent input {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  accent-color: var(--accent);
}

.paypro-consent a {
  color: var(--accent-muted);
}

/* Administrator-only "Test order" toggle: set apart from the customer consent with a dashed accent frame. */
.paypro-consent.test-order {
  margin-top: 12px;
  padding: 9px 11px;
  border: 1px dashed var(--accent-muted);
  border-radius: var(--radius);
  color: var(--text);
}

/* Administrator-only fulfillment-method picker / quote hold: set apart from the customer consent with a dashed accent frame. */
.admin-fulfillment {
  margin-top: 12px;
  padding: 10px 11px;
  border: 1px dashed var(--accent-muted);
  border-radius: var(--radius);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-fulfillment-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-strong);
}

.admin-fulfillment-select {
  width: 100%;
  padding: 7px 9px;
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.admin-fulfillment-select:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.admin-fulfillment-note {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.admin-do-not-fulfill {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
}

.admin-do-not-fulfill input {
  flex: none;
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
}

.summary-error {
  margin: 10px 0 0;
  font-size: var(--fs-sm);
  color: #e08a8a;
}

/* --- confirmation page --- */
.confirm {
  display: flex;
  justify-content: center;
  padding: 64px 20px;
}

.confirm-card {
  max-width: 460px;
  text-align: center;
}

.confirm-mark {
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  border: 2px solid var(--accent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-h4);
  line-height: 1;
}

/* Non-success outcomes of a PayPro redirect: amber for pending states, red for a declined payment. */
.confirm-mark.is-pending {
  border-color: #d9a441;
  color: #d9a441;
}

.confirm-mark.is-declined {
  border-color: #e08a8a;
  color: #e08a8a;
}

.confirm-card h1 {
  font-family: var(--font-mono);
  font-size: var(--fs-h4);
  color: var(--text-strong);
  margin: 0 0 12px;
}

.confirm-card p {
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 22px;
}

.confirm-home {
  display: inline-block;
  width: auto;
  text-decoration: none;
}

/* --- admin area --- */
.admin-body {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.admin-body h1 {
  font-family: var(--font-mono);
  font-size: var(--fs-h4);
  color: var(--text-strong);
  margin: 0 0 12px;
}

.admin-logout {
  width: auto;
}

/* --- admin tools (landing links + the ported form/diagnostic pages) --- */
.admin-tools {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.admin-form .grid2,
.admin-fieldset .grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
}

.admin-form .span2 {
  grid-column: 1/-1;
}

.admin-checks {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
}

.admin-fieldset {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-4);
}

.admin-form-actions {
  margin-top: var(--space-4);
}

.admin-license-key {
  width: 100%;
  font-family: var(--font-mono);
  margin-top: var(--space-2);
}

.admin-lookup {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.admin-lookup input {
  max-width: 360px;
}

.admin-dump {
  margin-bottom: var(--space-4);
}

.admin-dump th {
  text-align: left;
  white-space: nowrap;
  padding-right: var(--space-4);
  color: var(--text-muted);
  font-weight: 500;
  vertical-align: top;
}

/* --- team trial (ported Support/TeamEvaluation) --- */
.team-eval {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.team-eval-intro {
  padding: var(--space-6) 0 var(--space-4);
}

.team-eval-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.team-eval-list {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-4);
}

.team-eval-list li {
  margin-bottom: var(--space-2);
}

.team-eval-actions {
  margin-top: var(--space-5);
}

@media (max-width: 720px) {
  .admin-form .grid2,
  .admin-fieldset .grid2,
  .team-eval-cols {
    grid-template-columns: 1fr;
  }
}
/* --- add-subscription picker (modal) --- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh var(--space-4);
  z-index: 50;
}

.modal {
  width: 560px;
  max-width: 100%;
  max-height: 88vh;
  overflow: auto;
  background: #1b1426;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 5px 15px 40px rgba(0, 0, 0, 0.5);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-lg);
  color: var(--text-strong);
}

.modal-body {
  padding: var(--space-4);
}

.picker-group-title {
  font-weight: 700;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #b8afcc;
  margin: var(--space-4) 0 9px;
}

.picker-group-title:first-child {
  margin-top: 0;
}

.picker-group-title--yours {
  color: var(--accent-text);
}

.picker-hint {
  padding: var(--space-2) 0 var(--space-3);
  color: var(--muted);
}

.picker-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 14px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sharp);
  background: var(--surface-item);
  margin-bottom: var(--space-2);
}

.picker-row--sub {
  border-color: var(--accent-muted);
  background: #1a1526;
}

.picker-info {
  min-width: 0;
}

.picker-name {
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--text-strong);
}

.picker-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: #9a8fb0;
}

/* "from <old product>" shown inline after the upgrade target's name. */
.picker-from {
  font-weight: 400;
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-left: var(--space-2);
}

/* The subscription-number tag on its own line under the name, aligned with it (no indent). */
.picker-sub-number {
  margin-top: 4px;
}

.picker-sub-number .tag {
  margin-left: 0;
}

.picker-actions {
  margin-left: auto;
  display: flex;
  gap: var(--space-2);
  flex: none;
}

/* --- licensee / returning customer --- */
/* Trying a lighter design: the licensee fields sit directly in the step with no framing box. */
.licensee-box {
  padding: 0;
}

.licensee-note {
  margin: 12px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--accent-text);
}

/* returning-customer expander */
.exp {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sharp);
  background: rgba(255, 255, 255, 0.02);
  padding: 13px 16px;
}

.exp-open {
  border-style: solid;
  background: rgba(255, 255, 255, 0.04);
}

.returning {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.returning-hd {
  display: flex;
  align-items: center;
  gap: 10px;
}

.returning-hd .plus {
  width: 22px;
  height: 22px;
  flex: none;
  border: 2px solid var(--accent-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-muted);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1;
}

.returning-hd b {
  font-size: var(--fs-md);
  color: var(--text-strong);
}

.returning-hd em {
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-left: auto;
}

.returning-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.returning-key {
  flex: 1;
}

.returning-error {
  margin: 0;
  font-size: var(--fs-sm);
  color: #e08a8a;
}

.returning-reset {
  margin-left: auto;
}

.returning-note {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.callout {
  border: 1px solid var(--accent-muted);
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent-muted) 12%, transparent);
  padding: 11px 14px;
  font: var(--fw-normal) var(--fs-sm) var(--font-sans);
  color: #d3cbe0;
}

.callout b {
  color: var(--text-strong);
  font-weight: 600;
}

/* checkout order contacts (emails) */
.contacts-note {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: #b8afcc;
}

/* A reseller quote collects no customer contacts: the list is replaced by a grayed, non-interactive notice. */
.contacts-disabled {
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
  opacity: 0.7;
}

.contacts-disabled .contacts-note {
  margin: 0;
}

.contacts-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1.7fr 32px;
  gap: var(--space-2);
  padding: 0 2px 5px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
}

.contacts-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.7fr 32px;
  gap: var(--space-2);
  align-items: center;
}

.contact-row .field {
  min-width: 0;
}

/* the customer list adds a leading "primary" radio column; the reseller list has no primary contact */
.step--with-primary .contacts-head,
.step--with-primary .contact-row {
  grid-template-columns: 54px 1fr 1fr 1.6fr 32px;
}

/* Custom radio: the native control's bright white fill is too striking on the dark theme, so draw our own —
   transparent with a subtle ring, and an accent dot when selected. */
.contact-primary {
  justify-self: center;
  width: 16px;
  height: 16px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.contact-primary::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform 0.12s ease;
}

.contact-primary:checked {
  border-color: var(--accent);
}

.contact-primary:checked::before {
  transform: scale(1);
}

.contact-primary:focus-visible {
  outline: 2px solid var(--accent-muted);
  outline-offset: 2px;
}

.contact-row--invalid .field {
  border-color: #a85454;
}

/* A contact already on file for the account: pre-filled, read-only, removable but not editable. */
.contact-row--onfile .field:disabled {
  border-style: dashed;
}

.contacts-callout {
  margin-top: 12px;
}

.contacts-add {
  margin-top: 11px;
}

/* --- reseller panel (1b) --- */
.reseller-head {
  cursor: pointer;
}

/* When collapsed (no reseller applied), the step is a plain dashed box like "Add another subscription"; expanding it
   turns it into a normal step card. */
.reseller--collapsed {
  border-style: dashed;
  border-color: var(--accent-muted);
  background: color-mix(in srgb, var(--accent-muted) 10%, transparent);
  padding: 14px 18px;
}

.reseller-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  margin-top: 4px;
}

.reseller-code {
  flex: 1;
}

.reseller-note {
  margin: 9px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--muted);
}

/* green "applied" callout */
.callout-ok {
  border-color: #6fa085;
  background: rgba(62, 203, 134, 0.1);
  color: #8fe3b8;
  margin-top: 12px;
}

.callout-ok b {
  color: #b6f0d1;
  font-weight: 600;
}

.billto-box {
  margin-top: 12px;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-sharp);
  background: rgba(255, 255, 255, 0.02);
  padding: 13px 14px 14px;
}

.billto-hd {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 11px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
}

.billto-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-muted);
  flex: none;
}

.reseller-remove {
  margin-top: 12px;
}

/* --- offline demo-accounts panel (home page) --- */
.dev-panel {
  margin-top: var(--space-6);
  padding: var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.dev-panel-title {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  margin-bottom: var(--space-2);
}

.dev-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: stretch;
}

.dev-links .btn-sm {
  text-transform: none;
  font-weight: 700;
}

.demo-account {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-item);
}

.demo-signin {
  align-self: flex-start;
  text-align: left;
}

.demo-key {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.demo-key-label {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  flex: none;
}

.demo-key-value {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--accent-text);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-copy {
  flex: none;
}

.demo-hint {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
}

.demo-reseller {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.demo-reseller .demo-key {
  margin-top: var(--space-2);
}