.identity-page {
  min-height: 100svh;
  margin: 0;
  background: color-mix(in srgb, var(--fg) 5%, var(--bg));
  color: var(--fg);
}

.identity-page [hidden] {
  display: none !important;
}

.identity-shell {
  width: min(calc(100% - 2rem), 450px);
  margin: 0 auto;
  padding: clamp(1.5rem, 6vh, 3.75rem) 0 2rem;
}

.identity-header {
  margin-bottom: 1rem;
  text-align: center;
}

.identity-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--fg);
  font-size: .82rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-decoration: none;
}

.identity-logo {
  width: 44px;
  height: 44px;
}

.identity-header > p {
  margin: .6rem 0 0;
  color: color-mix(in srgb, var(--fg) 62%, transparent);
  font-size: .84rem;
}

.identity-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  padding: clamp(1.25rem, 4vw, 1.75rem);
  border: 1px solid var(--border-subtle);
  border-radius: 1rem;
  background: var(--panel-bg);
  box-shadow: 0 12px 30px rgb(0 0 0 / 6%);
}

.identity-view-heading {
  margin-bottom: 1.25rem;
  text-align: center;
}

.identity-eyebrow {
  margin: 0 0 .45rem;
  color: color-mix(in srgb, var(--fg) 58%, transparent);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.identity-view-heading h1 {
  margin: 0;
  font-size: clamp(1.55rem, 6vw, 2rem);
  font-weight: 580;
  letter-spacing: -.035em;
  line-height: 1.1;
}

.identity-view-heading > p:last-child {
  max-width: 430px;
  margin: .65rem auto 0;
  color: color-mix(in srgb, var(--fg) 67%, transparent);
  font-size: .88rem;
  line-height: 1.5;
}

.identity-form {
  width: min(100%, 320px);
  margin-inline: auto;
  display: grid;
  gap: .9rem;
}

.identity-field {
  min-width: 0;
}

.identity-field label {
  display: block;
  margin-bottom: .3rem;
  color: color-mix(in srgb, var(--fg) 90%, transparent);
  font-size: .85rem;
  font-weight: 500;
}

.identity-field label span {
  color: color-mix(in srgb, var(--fg) 58%, transparent);
  font-weight: 400;
}

.identity-page .identity-field .field {
  box-sizing: border-box;
  width: 100%;
  height: var(--ut-textbox-height);
  padding: 0 .8rem;
  border-radius: .75rem;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  font-size: .95rem;
}

.identity-page .identity-field textarea.field {
  min-height: 96px;
  padding-block: .65rem;
  line-height: 1.45;
}

.identity-page .identity-field .field[readonly] {
  color: color-mix(in srgb, var(--fg) 70%, transparent);
  background: color-mix(in srgb, var(--fg) 5%, var(--bg));
  cursor: not-allowed;
}

.identity-code-input {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.identity-google {
  width: min(100%, 280px);
  margin: 0 auto;
}

.identity-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1rem 0;
  color: color-mix(in srgb, var(--fg) 48%, transparent);
  font-size: .72rem;
}

.identity-divider::before,
.identity-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--border-subtle);
}

.identity-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  margin-top: .15rem;
}

.identity-actions button,
.identity-google {
  min-height: var(--ut-button-height-standard);
}

.identity-status {
  min-height: 1.25em;
  margin: 0;
  color: color-mix(in srgb, #ef4444 76%, var(--fg));
  font-size: .8rem;
  line-height: 1.4;
  text-align: center;
}

.identity-status[data-state="success"] {
  color: color-mix(in srgb, #16a34a 74%, var(--fg));
}

.identity-status[data-state="progress"] {
  color: color-mix(in srgb, #16a34a 72%, var(--fg));
}

.identity-status[data-state="info"] {
  color: color-mix(in srgb, #0284c7 72%, var(--fg));
}

.identity-status[data-state="warning"] {
  color: color-mix(in srgb, #d97706 78%, var(--fg));
}

.identity-approved {
  width: min(100%, 320px);
  box-sizing: border-box;
  margin: 0 auto 1rem;
  padding: .65rem .8rem;
  border-radius: .7rem;
  background: color-mix(in srgb, #16a34a 10%, var(--bg));
  color: color-mix(in srgb, #087a45 88%, var(--fg));
  font-size: .82rem;
  line-height: 1.45;
  text-align: center;
}

.identity-choice {
  width: min(100%, 340px);
  margin-inline: auto;
  display: grid;
  gap: .7rem;
}

.identity-choice > p {
  margin: 0 0 .15rem;
  font-size: .9rem;
  font-weight: 600;
  text-align: center;
}

.identity-choice-action {
  min-height: 58px;
  padding: .75rem .9rem;
  border: 1px solid var(--border-subtle);
  border-radius: .75rem;
  display: grid;
  align-content: center;
  gap: .18rem;
  background: color-mix(in srgb, var(--bg) 97%, var(--fg) 3%);
  color: var(--fg);
  text-decoration: none;
}

.identity-choice-action:hover,
.identity-choice-action:focus-visible {
  border-color: color-mix(in srgb, var(--fg) 48%, transparent);
  background: var(--bg);
}

.identity-choice-action strong {
  font-size: .9rem;
}

.identity-choice-action span {
  color: color-mix(in srgb, var(--fg) 62%, transparent);
  font-size: .76rem;
}

.identity-links {
  margin: 1.15rem 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1rem;
  font-size: .82rem;
  text-align: center;
}

.identity-links a,
.identity-footer a {
  color: var(--fg);
  text-underline-offset: .16em;
}

.identity-footer {
  margin-top: 1rem;
  text-align: center;
  font-size: .76rem;
}

@media (max-width: 480px) {
  .identity-shell {
    width: min(calc(100% - 1.25rem), 450px);
    padding-top: 1rem;
  }

  .identity-card {
    padding: 1.15rem 1rem 1.25rem;
    border-radius: .9rem;
  }

}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .identity-card { box-shadow: none; }
}

:root[data-theme="dark"] .identity-card {
  box-shadow: none;
}