/* HostFA account, identity and authentication surfaces. */
.hf-account-layout { display: grid; gap: var(--hf-space-6); }
.hf-account-profile { display: grid; gap: var(--hf-space-6); }
.hf-account-section { display: grid; gap: var(--hf-space-6); }
.hf-account-section__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--hf-space-4); }
.hf-account-section__header h2 { margin: 0; color: var(--hf-color-text); }
.hf-account-section__header p { margin: var(--hf-space-2) 0 0; color: var(--hf-color-text-muted); line-height: 1.8; }
.hf-account-section__body { min-inline-size: 0; }
.hf-account-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hf-space-5); }
.hf-account-form-grid__wide { grid-column: 1 / -1; }
.hf-form-actions { display: flex; justify-content: flex-end; gap: var(--hf-space-3); margin-block-start: var(--hf-space-5); }
.hf-text-muted { color: var(--hf-color-text-muted); }

.hf-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hf-space-3); }
.hf-check-card, .hf-checkbox { display: flex; align-items: center; gap: var(--hf-space-3); cursor: pointer; color: var(--hf-color-text); }
.hf-check-card { min-block-size: var(--hf-control-height); padding: var(--hf-space-3) var(--hf-space-4); border: 1px solid var(--hf-color-border); border-radius: var(--hf-radius-md); background: var(--hf-color-surface); }
.hf-check-card:has(input:checked) { border-color: color-mix(in srgb, var(--hf-color-primary) 45%, var(--hf-color-border)); background: color-mix(in srgb, var(--hf-color-primary) 5%, var(--hf-color-surface)); }
.hf-check-card input, .hf-checkbox input, .hf-permission-card input { inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--hf-color-primary); }
.hf-account-marketing { margin-block-start: var(--hf-space-4); }

.hf-contact-grid, .hf-user-grid, .hf-security-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hf-space-5); margin-block-end: var(--hf-space-6); }
.hf-contact-card, .hf-user-card, .hf-security-card { display: grid; gap: var(--hf-space-4); }
.hf-contact-card__identity, .hf-user-card__head { display: flex; align-items: center; gap: var(--hf-space-3); min-inline-size: 0; }
.hf-contact-card__identity h3, .hf-user-card__head h3, .hf-security-card h3 { margin: 0; }
.hf-contact-card__identity p, .hf-user-card__head p, .hf-security-card p { margin: var(--hf-space-1) 0 0; color: var(--hf-color-text-muted); overflow-wrap: anywhere; }
.hf-contact-card__avatar, .hf-user-card__avatar, .hf-account-choice__avatar { inline-size: 2.75rem; block-size: 2.75rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: .9rem; background: color-mix(in srgb, var(--hf-color-primary) 10%, var(--hf-color-surface)); color: var(--hf-color-primary); font-weight: 500; }
.hf-user-card__head .hf-badge { margin-inline-start: auto; }
.hf-user-card__meta { color: var(--hf-color-text-muted); font-size: .875rem; }
.hf-user-card__actions, .hf-inline-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--hf-space-2); }
.hf-meta-list { display: grid; gap: var(--hf-space-2); margin: 0; }
.hf-meta-list > div { display: flex; justify-content: space-between; gap: var(--hf-space-4); }
.hf-meta-list dt { color: var(--hf-color-text-muted); }
.hf-meta-list dd { margin: 0; color: var(--hf-color-text); }

.hf-invite-list { display: grid; gap: var(--hf-space-3); }
.hf-invite-row { display: flex; align-items: center; justify-content: space-between; gap: var(--hf-space-4); padding-block: var(--hf-space-3); border-block-end: 1px solid var(--hf-color-border); }
.hf-invite-row:last-child { border-block-end: 0; }
.hf-invite-row > div:first-child { display: grid; gap: var(--hf-space-1); }
.hf-invite-row small { color: var(--hf-color-text-muted); }

.hf-permission-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hf-space-3); margin-block: var(--hf-space-5); }
.hf-permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hf-space-3); }
.hf-permission-card { min-block-size: var(--hf-control-height); display: flex; align-items: flex-start; gap: var(--hf-space-3); padding: var(--hf-space-4); border: 1px solid var(--hf-color-border); border-radius: var(--hf-radius-md); background: var(--hf-color-surface); cursor: pointer; transition: border-color var(--hf-motion-fast) var(--hf-ease), background var(--hf-motion-fast) var(--hf-ease); }
.hf-permission-card:has(input:checked) { border-color: color-mix(in srgb, var(--hf-color-primary) 45%, var(--hf-color-border)); background: color-mix(in srgb, var(--hf-color-primary) 5%, var(--hf-color-surface)); }
.hf-permission-card__content { display: grid; gap: var(--hf-space-1); }
.hf-permission-card__content small { color: var(--hf-color-text-muted); line-height: 1.7; }

.hf-security-card { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.hf-security-card__icon { inline-size: 2.75rem; block-size: 2.75rem; display: grid; place-items: center; border-radius: .9rem; color: var(--hf-color-primary); background: color-mix(in srgb, var(--hf-color-primary) 8%, var(--hf-color-surface)); }
.hf-security-card .hf-btn { grid-column: 2 / -1; justify-self: start; }
.hf-danger-zone { margin-block-start: var(--hf-space-6); padding: var(--hf-space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--hf-space-5); border-color: color-mix(in srgb, var(--hf-color-danger) 25%, var(--hf-color-border)); }
.hf-danger-zone h2 { margin: 0; color: var(--hf-color-danger); }
.hf-danger-zone p { margin: var(--hf-space-2) 0 0; color: var(--hf-color-text-muted); }

.hf-password-stack { display: grid; gap: var(--hf-space-5); max-inline-size: 42rem; }
.hf-password-control { min-inline-size: 0; }
.hf-password-control__input { position: relative; display: block; }
.hf-password-control__input .hf-input { padding-inline-end: 3.25rem; }
.hf-password-control__toggle { position: absolute; inset-inline-end: .25rem; inset-block-start: 50%; transform: translateY(-50%); border: 0; background: transparent; }
.hf-password-control__generate { justify-self: start; min-block-size: 2.25rem; padding-inline: 0; }
.hf-password-strength { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--hf-space-3); color: var(--hf-color-text-muted); }
.hf-password-strength::before { content: ""; block-size: .4rem; border-radius: 999px; background: linear-gradient(to left, var(--hf-color-danger) 0 25%, var(--hf-color-warning) 25% 60%, var(--hf-color-success) 60% 100%); opacity: .2; }
.hf-password-strength[data-strength="weak"]::before { opacity: .45; clip-path: inset(0 66% 0 0); }
.hf-password-strength[data-strength="medium"]::before { opacity: .65; clip-path: inset(0 33% 0 0); }
.hf-password-strength[data-strength="strong"]::before { opacity: 1; clip-path: inset(0); }

.hf-auth-shell {
  min-block-size: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  background:
    radial-gradient(circle at 12% 14%, color-mix(in srgb, var(--hf-color-primary) 8%, transparent) 0 5rem, transparent 5.1rem),
    radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--hf-color-info) 7%, transparent) 0 7rem, transparent 7.1rem),
    var(--hf-color-bg);
}
.hf-auth-stage {
  inline-size: min(100%, 70rem);
  overflow: hidden;
  border: 1px solid var(--hf-color-border);
  border-radius: calc(var(--hf-radius-xl) + .35rem);
  background: color-mix(in srgb, var(--hf-color-surface) 96%, var(--hf-color-primary) 4%);
  box-shadow: 0 24px 70px rgb(20 27 58 / .08);
}
.hf-auth-stage__bar {
  min-block-size: 3.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hf-space-4);
  padding-inline: clamp(1rem, 2.5vw, 1.5rem);
  border-block-end: 1px solid var(--hf-color-border);
  background: rgb(255 255 255 / .88);
  backdrop-filter: blur(12px);
}
.hf-auth-stage__content { padding: clamp(.8rem, 2vw, 1.25rem); }
.hf-auth-stage__home {
  inline-size: 2.4rem;
  block-size: 2.4rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--hf-color-border);
  border-radius: .75rem;
  color: var(--hf-color-text-muted);
  background: var(--hf-color-surface);
}
.hf-auth-stage__home:hover { color: var(--hf-color-primary); border-color: color-mix(in srgb, var(--hf-color-primary) 30%, var(--hf-color-border)); }
.hf-auth-stage .hf-auth-brand { justify-content: flex-start; min-inline-size: 0; color: var(--hf-color-text); font-weight: 500; }
.hf-auth-stage .hf-auth-brand img { max-block-size: 2rem; max-inline-size: 11rem; object-fit: contain; }

.hf-auth-card {
  inline-size: min(100%, 31rem);
  margin: auto;
  border: 1px solid var(--hf-color-border);
  border-radius: var(--hf-radius-xl);
  background: var(--hf-color-surface);
  box-shadow: 0 12px 34px rgb(20 27 58 / .055);
}
.hf-auth-card--wide { inline-size: min(100%, 65rem); }
.hf-auth-card--split {
  inline-size: min(100%, 57rem);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(17rem, .75fr);
  padding: .75rem;
  gap: .75rem;
}
.hf-auth-card--register { inline-size: min(100%, 65rem); grid-template-columns: minmax(0, 1.55fr) minmax(17rem, .7fr); }
.hf-auth-card__main { min-inline-size: 0; padding: clamp(1.25rem, 3vw, 2rem); align-self: center; }
.hf-auth-register__main { align-self: stretch; }
.hf-auth-card__header { margin-block-end: var(--hf-space-6); text-align: start; }
.hf-auth-card__eyebrow { display: inline-block; margin-block-end: .45rem; color: var(--hf-color-primary); font-size: .78rem; font-weight: 500; }
.hf-auth-card__header h1 { margin: 0; letter-spacing: -.025em; color: var(--hf-color-text); }
.hf-auth-card__header p { margin: var(--hf-space-2) 0 0; max-inline-size: 34rem; color: var(--hf-color-text-muted); font-size: .9rem; line-height: 1.9; }
.hf-auth-card__footer { margin-block-start: var(--hf-space-5); text-align: center; color: var(--hf-color-text-muted); font-size: .88rem; }
.hf-auth-card__footer a { color: var(--hf-color-primary); font-weight: 500; }

.hf-auth-methods { display: grid; gap: var(--hf-space-4); }
.hf-auth-form { display: grid; gap: var(--hf-space-4); }
.hf-auth-field > span:first-child { color: var(--hf-color-text); font-size: var(--hf-label-size); font-weight: var(--hf-label-weight); }
.hf-auth-input { position: relative; display: block; }
.hf-auth-input > .hf-icon { position: absolute; inset-inline-start: .85rem; inset-block-start: 50%; transform: translateY(-50%); inline-size: 1.05rem; block-size: 1.05rem; color: var(--hf-color-text-muted); pointer-events: none; z-index: 1; }
.hf-auth-input > .hf-input { padding-inline-start: 2.65rem; }
.hf-auth-card .hf-password-control__input .hf-input { padding-inline-start: 2.65rem; padding-inline-end: 3rem; }
.hf-auth-card .hf-password-control__toggle { inset-inline-end: .18rem; inline-size: 2.35rem; block-size: 2.35rem; min-block-size: 0; border: 0; background: transparent; }
.hf-auth-card .hf-password-control__generate { min-block-size: 2rem; font-size: .78rem; }
.hf-auth-form__meta { display: flex; justify-content: space-between; align-items: center; gap: var(--hf-space-4); font-size: .82rem; }
.hf-auth-form__meta a { color: var(--hf-color-primary); }
.hf-auth-card .hf-checkbox { font-size: .82rem; }

.hf-auth-visual {
  position: relative;
  min-block-size: 28rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--hf-space-3);
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--hf-color-primary) 10%, var(--hf-color-border));
  border-radius: calc(var(--hf-radius-xl) - .2rem);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--hf-color-primary) 5%, white), color-mix(in srgb, var(--hf-color-info) 4%, white)),
    var(--hf-color-surface-soft);
  text-align: center;
}
.hf-auth-card--register .hf-auth-visual { min-block-size: 100%; justify-content: flex-start; padding-block-start: 3.5rem; }
.hf-auth-visual::after { content: ""; position: absolute; inset-inline-start: -4rem; inset-block-end: -5rem; inline-size: 12rem; block-size: 12rem; border-radius: 50%; background: color-mix(in srgb, var(--hf-color-primary) 6%, transparent); }
.hf-auth-visual__art { position: relative; inline-size: 8rem; block-size: 7rem; display: grid; place-items: center; margin-block-end: .4rem; }
.hf-auth-visual__orb { position: absolute; border-radius: 50%; background: color-mix(in srgb, var(--hf-color-primary) 9%, white); }
.hf-auth-visual__orb--one { inline-size: 5.5rem; block-size: 5.5rem; inset: .2rem auto auto .25rem; }
.hf-auth-visual__orb--two { inline-size: 4rem; block-size: 4rem; inset: auto .2rem .2rem auto; background: color-mix(in srgb, var(--hf-color-info) 9%, white); }
.hf-auth-visual__icon { position: relative; z-index: 1; inline-size: 4.7rem; block-size: 4.7rem; display: grid; place-items: center; border-radius: 1.35rem; color: var(--hf-color-primary); background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--hf-color-primary) 8%, white)); box-shadow: 0 14px 32px rgb(98 91 246 / .14); }
.hf-auth-visual__icon .hf-icon { inline-size: 2.4rem; block-size: 2.4rem; }
.hf-auth-visual h2 { position: relative; z-index: 1; margin: 0; color: var(--hf-color-text); }
.hf-auth-visual > p { position: relative; z-index: 1; margin: 0; color: var(--hf-color-text-muted); font-size: .82rem; line-height: 1.9; }
.hf-auth-visual__features { position: relative; z-index: 1; inline-size: 100%; display: grid; gap: .55rem; margin-block-start: var(--hf-space-3); }
.hf-auth-visual__feature { min-block-size: 2.55rem; display: flex; align-items: center; gap: .65rem; padding-inline: .8rem; border: 1px solid color-mix(in srgb, var(--hf-color-border) 80%, transparent); border-radius: .75rem; background: rgb(255 255 255 / .7); color: var(--hf-color-text-muted); font-size: .8rem; text-align: start; }
.hf-auth-visual__feature .hf-icon { inline-size: 1rem; block-size: 1rem; color: var(--hf-color-primary); }

.hf-auth-section { display: grid; gap: var(--hf-space-4); padding-block: var(--hf-space-4); border-block-start: 1px solid var(--hf-color-border); }
.hf-auth-section:first-of-type { padding-block-start: 0; border-block-start: 0; }
.hf-auth-section__title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--hf-space-3); }
.hf-auth-section__title > span { font-size: .9rem; font-weight: 500; color: var(--hf-color-text); }
.hf-auth-section__title small { color: var(--hf-color-text-muted); font-size: .72rem; }
.hf-auth-section h2 { margin: 0; }
.hf-auth-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hf-space-6); }
.hf-auth-split > .hf-auth-form { align-content: start; padding: var(--hf-space-5); border: 1px solid var(--hf-color-border); border-radius: var(--hf-radius-lg); }
.hf-auth-split h2 { margin: 0; }
.hf-auth-captcha { min-block-size: var(--hf-control-height); display: grid; place-items: center; overflow: auto; }
.hf-auth-errors { margin-block-end: var(--hf-space-5); }
.hf-btn--block { inline-size: 100%; }

.hf-auth-status { display: grid; justify-items: center; gap: var(--hf-space-4); text-align: center; }
.hf-auth-status h1, .hf-auth-status p { margin: 0; }
.hf-auth-status p { color: var(--hf-color-text-muted); line-height: 1.9; }
.hf-auth-status__icon { inline-size: 4rem; block-size: 4rem; display: grid; place-items: center; border-radius: 1.25rem; background: color-mix(in srgb, var(--hf-color-primary) 9%, var(--hf-color-surface)); color: var(--hf-color-primary); }
.hf-auth-status--success .hf-auth-status__icon { color: var(--hf-color-success); background: color-mix(in srgb, var(--hf-color-success) 9%, var(--hf-color-surface)); }
.hf-auth-status--warning .hf-auth-status__icon { color: var(--hf-color-warning); background: color-mix(in srgb, var(--hf-color-warning) 9%, var(--hf-color-surface)); }
.hf-auth-recovery { max-inline-size: 31rem; }
.hf-two-factor-challenge { display: grid; gap: var(--hf-space-4); }
.hf-otp { min-block-size: 46px; text-align: center; direction: ltr; letter-spacing: .22em; font-variant-numeric: tabular-nums; }
.hf-backup-code { direction: ltr; inline-size: 100%; padding: var(--hf-space-4); border: 1px dashed color-mix(in srgb, var(--hf-color-primary) 40%, var(--hf-color-border)); border-radius: var(--hf-radius-md); background: var(--hf-color-surface-muted); font: 800 1.1rem/1.6 ui-monospace, monospace; letter-spacing: .08em; user-select: all; }

.hf-account-switcher { display: grid; gap: var(--hf-space-3); }
.hf-account-choice { min-block-size: var(--hf-control-height); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--hf-space-4); padding: var(--hf-space-4); }
.hf-account-choice__body { display: grid; justify-items: start; gap: var(--hf-space-1); }
.hf-account-choice.is-disabled { opacity: .6; }
.hf-ban-meta { inline-size: 100%; margin: var(--hf-space-3) 0 0; display: grid; gap: var(--hf-space-2); text-align: start; }
.hf-ban-meta > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--hf-space-3); padding-block: var(--hf-space-2); border-block-end: 1px solid var(--hf-color-border); }
.hf-ban-meta dt { color: var(--hf-color-text-muted); }
.hf-ban-meta dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .hf-auth-shell { padding: .75rem; align-items: start; }
  .hf-auth-stage { inline-size: min(100%, 34rem); margin-block: .5rem; }
  .hf-auth-stage__content { padding: .65rem; }
  .hf-auth-card--split, .hf-auth-card--register { grid-template-columns: 1fr; inline-size: 100%; padding: 0; }
  .hf-auth-visual { display: none; }
  .hf-auth-card__main { padding: clamp(1.15rem, 5vw, 1.75rem); }
  .hf-auth-card--register .hf-auth-card__main { padding-block: 1.25rem; }
}

@media (max-width: 900px) {
  .hf-account-form-grid, .hf-contact-grid, .hf-user-grid, .hf-security-grid, .hf-permission-grid, .hf-auth-split { grid-template-columns: 1fr; }
  .hf-auth-shell { grid-template-columns: 1fr; }
  .hf-account-section__header, .hf-danger-zone { align-items: stretch; flex-direction: column; }
  .hf-security-card { grid-template-columns: auto minmax(0, 1fr); }
  .hf-security-card .hf-badge { justify-self: start; }
  .hf-account-choice { grid-template-columns: auto minmax(0, 1fr); }
  .hf-account-choice .hf-btn { grid-column: 1 / -1; inline-size: 100%; }
}

@media (max-width: 600px) {
  .hf-auth-card { inline-size: min(100% - 1rem, 38rem); padding: var(--hf-space-5); box-shadow: none; }
  .hf-account-section, .hf-contact-card, .hf-user-card { padding: var(--hf-space-4); }
  .hf-check-grid, .hf-permission-mode { grid-template-columns: 1fr; }
  .hf-auth-form__meta, .hf-invite-row { align-items: stretch; flex-direction: column; }
  .hf-form-actions, .hf-form-actions .hf-btn { inline-size: 100%; }
}