.acct {
  box-sizing: border-box;
  max-width: 480px;
  min-height: calc(100vh - var(--shell-h) - var(--footer-h));
  min-height: calc(100dvh - var(--shell-h) - var(--footer-h));
  margin: 0 auto;
  padding: var(--step-7) var(--step-4) var(--step-8);
  display: grid;
  gap: var(--step-3);
  align-content: start;
  color: var(--ink-1);
}

.acct-signin, .acct-banned { position: relative; isolation: isolate; align-content: center; }
.acct-signin::before, .acct-banned::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  background: var(--rift-field) center / cover no-repeat;
  mask-image: radial-gradient(ellipse at center, var(--ink-1) 0%, transparent 75%);
  pointer-events: none;
}
.acct-signin .acct-lead { text-align: center; color: var(--ink-1); }
.acct-signin .acct-hint { text-align: center; }

.acct-door { display: grid; gap: var(--step-1); justify-items: center; text-align: center; padding: var(--step-3) var(--step-4); border: 1px solid var(--line-2); border-radius: var(--round-2); background: var(--surface-1); }
.acct-door-result { margin: 0; font-size: var(--type-read); color: var(--ink-1); overflow-wrap: anywhere; }
.acct-door-when { margin: 0; font-size: var(--type-label); color: var(--ink-3); }
.acct-brand { display: grid; justify-items: center; gap: 0; margin-bottom: var(--step-3); }
.acct-wordmark { margin: 0; line-height: 0; }
.acct-wordmark .brand-img { width: 400px; max-width: 100%; }
.acct-title { margin: 0; font: 700 var(--type-page) / 1.15 var(--font-display); letter-spacing: var(--track-display); }
.acct-h2 { margin: 0 0 var(--step-1); font: 500 var(--type-section) / 1.2 var(--font-display); letter-spacing: var(--track-display); }
.acct-lead { margin: 0; font-size: var(--type-read); color: var(--ink-2); }
.acct-hint { margin: 0; font-size: var(--type-label); color: var(--ink-3); }

.acct-delete { display: flex; flex-direction: column; gap: var(--step-3); padding: var(--step-4); border: 1px solid var(--bad); border-radius: 8px; }
.acct-delete .acct-h2 { margin: 0; text-transform: none; letter-spacing: var(--track-display); color: var(--ink-1); font-size: var(--type-section); }
.acct-delete .acct-lead { font-size: var(--type-body); line-height: 1.55; }
.acct-delete .acct-input { width: 100%; box-sizing: border-box; }
.acct-legal { margin: 0; font-size: var(--type-label); }
.acct-legal a, .acct-check a { color: var(--focus); }
.acct-providers, .acct-actions { display: flex; flex-wrap: wrap; gap: var(--step-2); }
.acct-providers { flex-direction: column; }
.acct-label { font-size: var(--type-label); color: var(--ink-2); }
.acct-input {
  height: var(--control-lg);
  padding: 0 var(--step-3);
  border: 1px solid var(--line-2);
  border-radius: var(--round-1);
  background: var(--surface-well);
  color: var(--ink-1);
  font: inherit;
}
.acct-input:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }
.acct-status.is-good { color: var(--good); }
.acct-status.is-bad { color: var(--warn); }
.acct-check { display: flex; gap: var(--step-2); align-items: center; min-height: var(--touch); font-size: var(--type-read); }
.acct-check input { width: 20px; height: 20px; }

.acct-notice { margin: 0; padding: var(--step-2) var(--step-3); border: 1px solid var(--line-2); border-radius: var(--round-2); background: var(--surface-1); font-size: var(--type-read); line-height: 1.45; }
.acct-notice-bad { border-color: var(--bad); }
.acct-notice-warn { border-color: var(--ink-3); color: var(--warn); }
.acct-notice-neutral { border-color: var(--good); }
.acct-section { display: grid; gap: var(--step-2); padding-top: var(--step-3); border-top: 1px solid var(--line-1); }
.acct-handle { display: flex; gap: var(--step-4); align-items: center; margin: 0; font-size: var(--type-lead); font-weight: 600; }
.acct-handle-text { min-width: 0; overflow-wrap: anywhere; }
.acct-ring { --dom: var(--ink-3); --dom2: transparent; width: 40px; height: 40px; margin: 6px; }
.acct-email { margin: 0; font-size: var(--type-read); }
.acct-identity-name { flex: 1; }

#acct-banner-root { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sheet); }
.acct-banner {
  margin: 0 auto var(--step-3);
  max-width: 560px;
  padding: var(--step-3) var(--step-4);
  display: grid;
  gap: var(--step-2);
  background: var(--surface-overlay);
  border: 1px solid var(--ink-3);
  border-radius: var(--round-2);
}
.acct-banner-text { margin: 0; font-size: var(--type-read); color: var(--warn); }
@media (max-width: 480px) {
  .acct { padding: var(--step-4) var(--step-4) var(--step-6); }
}

.acct a:not(.ui-btn) { color: var(--focus); text-underline-offset: 3px; }


.acct-page {
  max-width: none;
  margin: 0;
  padding: var(--step-6) max(var(--page-gutter), calc((100% - var(--page-max)) / 2)) var(--step-8);
  gap: var(--step-4);
}
.acct-page > * { max-width: 52rem; }

@media (max-width: 600px) {
  .acct-page { padding-inline: var(--step-4); }
}
.acct-page .acct-title { margin-bottom: var(--step-2); }
.acct-page .acct-section { grid-template-columns: 11rem minmax(0, 1fr); column-gap: var(--step-6); padding-top: var(--step-5); }
.acct-page .acct-section > .acct-h2 { margin: 0; padding-top: 2px; }
.acct-body { display: grid; gap: var(--step-3); align-content: start; justify-items: start; min-width: 0; }
.acct-body > .ur-rows, .acct-body > .acct-delete, .acct-body > .acct-rename { justify-self: stretch; }
.acct-rename { display: grid; gap: var(--step-2); }
.acct-rename .acct-input { max-width: 24rem; }
@media (max-width: 700px) {
  .acct-page { padding-block: var(--step-5) var(--step-7); }
  .acct-page .acct-section { grid-template-columns: minmax(0, 1fr); row-gap: var(--step-3); }
}


:root[data-input="touch"] :is(.acct-label, .acct-hint, .acct-legal) { font-size: var(--touch-floor-ui); }
:root[data-input="touch"] .acct-input { min-height: var(--touch); }


:root[data-input="touch"] .acct :is(a[href="/terms"], a[href="/privacy"]) { padding: 13.5px 6px; margin: -13.5px -6px; }