.onboarding-shell,
.auth-shell,
.edit-profile-shell,
.about-me-shell,
.photo-guide-shell,
.profile-preview-shell {
  color: var(--ui-ink);
  background: var(--ui-surface-soft);
}

.onboarding-shell.ui-page,
.auth-shell.ui-page,
.edit-profile-shell.ui-page,
.about-me-shell.ui-page,
.photo-guide-shell.ui-page {
  padding-bottom: 0;
}

.ui-entry-layout {
  display: grid;
  grid-template-rows: auto minmax(240px, 42dvh) auto auto auto;
  width: min(100%, var(--ui-page-max-width));
  min-height: 100dvh;
  background: var(--ui-surface);
}

.entry-media {
  position: relative;
  min-height: 240px;
  overflow: hidden;
  background: var(--ui-surface-soft);
}

.entry-media img,
.auth-visual > img,
.preview-hero > img,
.profile-photo img,
.intro-photo-thumb img,
.example-avatar img,
.avatar-good-photo img,
.guide-example img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.entry-media img {
  object-position: center 42%;
}

.splash-brand {
  display: grid;
  gap: var(--ui-space-2);
  padding: var(--ui-space-6) var(--ui-space-4) var(--ui-space-3);
}

.entry-brand,
.guide-kicker {
  color: var(--ui-brand-strong);
  font: var(--ui-font-tag);
}

.splash-brand h1,
.guide-hero-copy h1 {
  font: var(--ui-font-person);
  letter-spacing: 0;
}

.splash-brand > p:last-child,
.guide-hero-copy > p,
.truth-tip,
.auth-heading p,
.about-page-intro p,
.guide-rule > p,
.guide-final p {
  color: var(--ui-text-secondary);
  font: var(--ui-font-body);
  overflow-wrap: anywhere;
}

.entry-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-inline: var(--ui-space-4);
  border-block: 1px solid var(--ui-line);
}

.entry-trust span {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 64px;
  gap: var(--ui-space-1);
  color: var(--ui-text-secondary);
  font: var(--ui-font-tag);
  text-align: center;
}

.entry-trust svg {
  width: var(--ui-size-icon);
  height: var(--ui-size-icon);
  color: var(--ui-brand-strong);
}

.splash-bottom {
  display: grid;
  gap: var(--ui-space-2);
  padding: var(--ui-space-4) var(--ui-space-4) calc(var(--ui-space-4) + env(safe-area-inset-bottom));
}

.splash-bottom .ui-button {
  width: 100%;
  height: var(--ui-size-button);
}

.splash-bottom p {
  color: var(--ui-text-tertiary);
  font: var(--ui-font-meta);
  text-align: center;
}

.ui-auth-layout {
  min-height: 100dvh;
  background: var(--ui-surface);
}

.auth-visual {
  position: relative;
  height: 224px;
  overflow: hidden;
  background: var(--ui-surface-soft);
}

.auth-visual > img {
  object-position: center 38%;
}

.auth-brand {
  position: absolute;
  right: var(--ui-space-4);
  bottom: var(--ui-space-4);
  left: var(--ui-space-4);
  display: grid;
  gap: var(--ui-space-1);
  padding: var(--ui-space-3);
  color: var(--ui-surface);
  background: color-mix(in srgb, var(--ui-ink) 72%, transparent);
}

.auth-brand strong {
  font: var(--ui-font-nav);
}

.auth-brand small {
  font: var(--ui-font-meta);
}

.auth-panel {
  display: grid;
  gap: var(--ui-space-4);
  padding: var(--ui-space-6) var(--ui-space-4) calc(var(--ui-space-6) + env(safe-area-inset-bottom));
}

.auth-heading {
  display: grid;
  grid-template-columns: var(--ui-size-touch) minmax(0, 1fr);
  align-items: center;
  gap: var(--ui-space-3);
}

.auth-heading > svg {
  width: var(--ui-size-nav-icon);
  height: var(--ui-size-nav-icon);
  color: var(--ui-brand-strong);
}

.auth-heading h1 {
  font: var(--ui-font-section);
}

.auth-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: var(--ui-space-1);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface-soft);
}

.auth-mode-switch button {
  min-height: var(--ui-size-touch);
  border-radius: var(--ui-radius-small);
  color: var(--ui-text-secondary);
  background: transparent;
  font: var(--ui-font-button);
}

.auth-mode-switch button.active {
  color: var(--ui-brand-strong);
  background: var(--ui-surface);
}

.auth-form {
  display: grid;
  gap: var(--ui-space-4);
}

.auth-form label:not(.auth-agreement),
.basic-editor-form label {
  display: grid;
  gap: var(--ui-space-2);
  color: var(--ui-text-secondary);
  font: var(--ui-font-meta);
}

.auth-form input:not([type="checkbox"]),
.basic-editor-form input,
.basic-editor-form select,
.name-sheet input,
.job-manual-input {
  width: 100%;
  min-width: 0;
  height: var(--ui-size-button);
  padding-inline: var(--ui-space-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-control);
  outline: 0;
  color: var(--ui-ink);
  background: var(--ui-surface);
  font: var(--ui-font-body);
}

.auth-form input:focus,
.basic-editor-form input:focus,
.basic-editor-form select:focus,
.name-sheet input:focus,
.job-manual-input:focus,
.intro-editor-card textarea:focus {
  border-color: var(--ui-brand);
}

.auth-primary {
  width: 100%;
  height: var(--ui-size-button);
}

.auth-agreement {
  display: grid;
  grid-template-columns: var(--ui-size-nav-icon) minmax(0, 1fr);
  align-items: start;
  gap: var(--ui-space-2);
  color: var(--ui-text-secondary);
  font: var(--ui-font-meta);
}

.auth-agreement input,
.about-publish-dock input,
.reward-modal input {
  width: var(--ui-size-icon);
  height: var(--ui-size-icon);
  margin: 0;
  accent-color: var(--ui-brand);
}

.auth-agreement a,
.agreement-links a,
.photo-guide-link,
.section-edit,
.edit-tabs a,
.edit-section header > a,
.edit-section header > button,
.about-card-add,
.match-card > a,
.profile-posts-preview header a,
.preview-hero-label a {
  color: var(--ui-brand-strong);
}

.auth-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-2);
  color: var(--ui-text-tertiary);
  font: var(--ui-font-meta);
}

.auth-notice svg {
  flex: 0 0 var(--ui-size-icon);
  width: var(--ui-size-icon);
  height: var(--ui-size-icon);
}

.ui-onboarding-flow {
  min-height: 100dvh;
  background: var(--ui-surface);
}

.onboarding-nav .skip-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ui-size-touch);
  min-height: var(--ui-size-touch);
  padding: 0;
  gap: var(--ui-space-1);
  color: var(--ui-text-secondary);
  background: transparent;
  font: var(--ui-font-meta);
}

.onboarding-nav .skip-button svg {
  width: var(--ui-size-icon);
  height: var(--ui-size-icon);
}

.step-dots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ui-space-2);
  padding: var(--ui-space-3) var(--ui-space-4) 0;
}

.step-dots span {
  height: var(--ui-space-1);
  border-radius: var(--ui-radius-round);
  background: var(--ui-line);
}

.step-dots span.active {
  background: var(--ui-brand-soft);
}

.step-dots span.current {
  background: var(--ui-brand-strong);
}

.onboarding-step {
  display: grid;
  align-content: start;
  min-height: calc(100dvh - 220px);
  gap: var(--ui-space-2);
  padding: var(--ui-space-6) var(--ui-space-4) var(--ui-space-4);
}

.step-icon {
  display: grid;
  place-items: center;
  width: var(--ui-size-touch);
  height: var(--ui-size-touch);
  margin-bottom: var(--ui-space-2);
  border-radius: var(--ui-radius-round);
  color: var(--ui-brand-strong);
  background: var(--ui-brand-soft);
}

.step-icon svg {
  width: var(--ui-size-nav-icon);
  height: var(--ui-size-nav-icon);
}

.onboarding-step h1 {
  font: var(--ui-font-person);
  letter-spacing: 0;
}

.onboarding-step > p {
  color: var(--ui-text-secondary);
  font: var(--ui-font-body);
}

.step-body {
  margin-top: var(--ui-space-4);
}

.gender-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ui-space-3);
}

.gender-card {
  display: grid;
  align-content: start;
  min-width: 0;
  min-height: 232px;
  padding: var(--ui-space-2);
  gap: var(--ui-space-2);
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-control);
  color: var(--ui-ink);
  background: var(--ui-surface);
  text-align: start;
}

.gender-visual {
  display: grid;
  place-items: center;
  width: 100%;
  height: 152px;
  border-radius: var(--ui-radius-small);
  color: var(--ui-brand-strong);
  background: var(--ui-brand-soft);
}

.gender-visual svg {
  width: 64px;
  height: 64px;
}

.gender-card strong {
  font: var(--ui-font-section);
}

.gender-card small {
  color: var(--ui-text-tertiary);
  font: var(--ui-font-meta);
}

.gender-card.selected,
.education-options button.selected {
  border-color: var(--ui-brand);
  color: var(--ui-brand-strong);
  background: var(--ui-brand-soft);
}

.birth-picker {
  display: grid;
  border-block: 1px solid var(--ui-line);
}

.picker-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  min-height: var(--ui-size-button);
  color: var(--ui-text-tertiary);
  font: var(--ui-font-body);
  text-align: center;
}

.picker-row.selected {
  color: var(--ui-ink);
  background: var(--ui-brand-soft);
  font: var(--ui-font-button);
}

.picker-row.faint {
  opacity: 0.48;
}

.education-options {
  display: grid;
  gap: var(--ui-space-2);
}

.education-options button,
.city-field {
  width: 100%;
  min-height: var(--ui-size-button);
  padding-inline: var(--ui-space-4);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-control);
  color: var(--ui-ink);
  background: var(--ui-surface);
  font: var(--ui-font-body);
  text-align: start;
}

.city-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.city-field em {
  color: var(--ui-brand-strong);
  font: var(--ui-font-meta);
  font-style: normal;
}

.step-actions {
  position: sticky;
  bottom: 0;
  padding: var(--ui-space-2) var(--ui-space-4) calc(var(--ui-space-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ui-line);
  background: var(--ui-surface);
}

.next-orb {
  width: 100%;
  height: var(--ui-size-button);
}

.agreement-card {
  display: grid;
  gap: var(--ui-space-4);
}

.agreement-card h2,
.voice-sheet h2,
.target-sheet h2,
.name-sheet h2,
.marital-contact-card h2,
.job-picker-sheet h2,
.profile-share-sheet h2,
.profile-card-preview h2,
.reward-modal h2 {
  font: var(--ui-font-section);
}

.agreement-copy {
  display: grid;
  max-height: 44dvh;
  gap: var(--ui-space-3);
  overflow-y: auto;
  color: var(--ui-text-secondary);
  font: var(--ui-font-body);
}

.agreement-copy strong {
  color: var(--ui-alert);
}

.agreement-actions,
.target-actions,
.marital-contact-card > div,
.avatar-action-card,
.profile-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ui-space-3);
}

.ui-edit-layout {
  min-height: 100dvh;
}

.edit-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ui-size-touch);
  font: var(--ui-font-meta);
}

.profile-score-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--ui-size-touch);
  padding-inline: var(--ui-space-4);
  color: var(--ui-ink);
  background: var(--ui-signal);
  font: var(--ui-font-meta);
}

.profile-score-banner span {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
}

.profile-score-banner svg {
  width: var(--ui-size-icon);
  height: var(--ui-size-icon);
}

.profile-score-banner em {
  font-style: normal;
}

.truth-tip {
  padding: var(--ui-space-3) var(--ui-space-4);
  border-bottom: 1px solid var(--ui-line);
  background: var(--ui-surface);
}

.edit-content {
  display: grid;
}

.edit-section {
  padding: var(--ui-space-4);
  border-bottom: var(--ui-space-2) solid var(--ui-surface-soft);
  background: var(--ui-surface);
}

.edit-section > header,
.profile-posts-preview > header,
.verify-preview > header,
.target-preview > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
  margin-bottom: var(--ui-space-3);
}

.edit-section h2,
.preview-card h2,
.guide-rule h2,
.guide-list h2,
.guide-final h2,
.about-page-intro h2,
.self-intro-header h1 {
  font: var(--ui-font-section);
  letter-spacing: 0;
}

.edit-section header > a,
.edit-section header > button,
.match-card > a,
.tag-section button {
  min-height: var(--ui-size-touch);
  padding: 0;
  background: transparent;
  font: var(--ui-font-meta);
}

.edit-identity {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) var(--ui-size-touch);
  align-items: center;
  gap: var(--ui-space-3);
}

.profile-photo {
  overflow: hidden;
  background: var(--ui-brand-soft);
}

.edit-identity .profile-photo,
.preview-avatar,
.example-avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--ui-radius-round);
}

.edit-identity-copy {
  min-width: 0;
}

.edit-identity-copy h1 {
  margin-bottom: var(--ui-space-1);
  font: var(--ui-font-section);
  overflow-wrap: anywhere;
}

.edit-identity-copy p,
.photo-edit-section p,
.tag-section p,
.self-intro-card p,
.match-card p,
.mbti-card p,
.voice-sheet > p,
.target-sheet > p,
.marital-contact-card p,
.profile-share-sheet > p,
.reward-modal > p,
.target-preview > span {
  color: var(--ui-text-secondary);
  font: var(--ui-font-body);
  overflow-wrap: anywhere;
}

.voice-entry {
  display: inline-flex;
  align-items: center;
  min-height: var(--ui-size-touch);
  padding: 0;
  gap: var(--ui-space-2);
  color: var(--ui-brand-strong);
  background: transparent;
  font: var(--ui-font-meta);
}

.voice-entry svg {
  width: var(--ui-size-icon);
  height: var(--ui-size-icon);
}

.edit-identity-actions {
  display: grid;
}

.photo-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ui-space-2);
}

.photo-slots button {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  min-height: var(--ui-size-touch);
  gap: var(--ui-space-1);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-control);
  color: var(--ui-text-tertiary);
  background: var(--ui-surface-soft);
  font: var(--ui-font-meta);
}

.photo-slots svg {
  width: var(--ui-size-nav-icon);
  height: var(--ui-size-nav-icon);
}

.target-card-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-height: var(--ui-size-touch);
  padding: 0;
  gap: var(--ui-space-3);
  background: transparent;
  text-align: start;
}

.target-card-main p {
  margin-top: var(--ui-space-1);
  color: var(--ui-text-secondary);
  font: var(--ui-font-body);
}

#targetValue {
  color: var(--ui-brand-strong);
  font: var(--ui-font-meta);
  font-style: normal;
}

#targetValue svg {
  width: var(--ui-size-icon);
  height: var(--ui-size-icon);
}

.field-list dl,
.identity-preview dl,
.share-card-art dl {
  margin: 0;
}

.field-list dl > div,
.cert-list > p {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 48px;
  gap: var(--ui-space-3);
  border-top: 1px solid var(--ui-line);
}

.field-list dt,
.field-list dd {
  margin: 0;
  font: var(--ui-font-body);
}

.field-list dd {
  color: var(--ui-text-tertiary);
  text-align: end;
  overflow-wrap: anywhere;
}

.section-edit {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
}

.section-edit svg {
  width: var(--ui-size-icon);
  height: var(--ui-size-icon);
}

.cert-list > p {
  grid-template-columns: var(--ui-size-nav-icon) minmax(0, 1fr) auto;
  margin: 0;
}

.cert-list > p svg {
  width: var(--ui-size-icon);
  height: var(--ui-size-icon);
  color: var(--ui-brand-strong);
}

.cert-list > p span {
  color: var(--ui-text-tertiary);
  font: var(--ui-font-meta);
}

.about-topic-list {
  border-top: 1px solid var(--ui-line);
}

.about-topic-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto var(--ui-size-icon);
  align-items: center;
  min-height: 64px;
  gap: var(--ui-space-2);
  border-bottom: 1px solid var(--ui-line);
}

.about-topic-row span {
  display: grid;
  min-width: 0;
  gap: var(--ui-space-1);
}

.about-topic-row strong {
  font: var(--ui-font-body);
}

.about-topic-row em,
.about-topic-row b {
  color: var(--ui-text-tertiary);
  font: var(--ui-font-meta);
  font-style: normal;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.about-topic-row b {
  color: var(--ui-brand-strong);
}

.about-topic-row svg {
  width: var(--ui-size-icon);
  height: var(--ui-size-icon);
  color: var(--ui-text-tertiary);
}

.about-profile-card h3 {
  margin-top: var(--ui-space-4);
  font: var(--ui-font-body);
}

.topic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  margin-top: var(--ui-space-3);
}

.topic-chips a {
  min-height: var(--ui-size-touch);
  padding: var(--ui-space-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-tag);
  color: var(--ui-text-secondary);
  background: var(--ui-surface);
  font: var(--ui-font-meta);
}

.about-wide-add {
  display: inline-flex;
  align-items: center;
  min-height: var(--ui-size-touch);
  margin-top: var(--ui-space-2);
  color: var(--ui-brand-strong);
  font: var(--ui-font-meta);
}

.match-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ui-space-3);
}

.match-card > a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ui-size-touch);
  font: var(--ui-font-meta);
}

.mbti-card > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  margin-block: var(--ui-space-3);
}

.mbti-card > div span {
  padding: var(--ui-space-1) var(--ui-space-2);
  border-radius: var(--ui-radius-tag);
  color: var(--ui-service);
  background: color-mix(in srgb, var(--ui-service) 10%, var(--ui-surface));
  font: var(--ui-font-tag);
}

.voice-sheet,
.target-sheet,
.name-sheet,
.avatar-sheet,
.marital-contact-card,
.job-picker-sheet,
.profile-share-sheet,
.profile-card-preview,
.reward-modal {
  position: relative;
  display: grid;
  gap: var(--ui-space-3);
}

.voice-close,
.profile-card-close,
.floating-close {
  position: absolute;
  top: var(--ui-space-2);
  right: var(--ui-space-2);
}

.voice-prompts {
  display: grid;
  gap: var(--ui-space-2);
}

.voice-prompts span {
  padding: var(--ui-space-3);
  border-left: var(--ui-space-1) solid var(--ui-brand);
  color: var(--ui-text-secondary);
  background: var(--ui-surface-soft);
  font: var(--ui-font-meta);
}

.record-pad {
  display: grid;
  place-items: center;
  gap: var(--ui-space-2);
  padding-top: var(--ui-space-3);
}

.record-pad button {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--ui-radius-round);
  color: var(--ui-surface);
  background: var(--ui-brand-strong);
}

.record-pad svg {
  width: var(--ui-size-nav-icon);
  height: var(--ui-size-nav-icon);
}

.record-pad span,
.record-pad strong {
  font: var(--ui-font-meta);
}

.target-wheel-wrap,
.job-wheel-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
  border-block: 1px solid var(--ui-line);
}

.target-wheel,
.job-wheel {
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

.target-wheel button,
.job-wheel button,
.target-wheel-spacer {
  display: block;
  width: 100%;
  height: var(--ui-size-button);
  color: var(--ui-text-tertiary);
  background: transparent;
  font: var(--ui-font-body);
  scroll-snap-align: center;
}

.target-wheel button.active,
.job-wheel button.active {
  color: var(--ui-ink);
  background: var(--ui-brand-soft);
  font: var(--ui-font-button);
}

.target-privacy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ui-space-2);
}

.target-privacy button {
  min-height: var(--ui-size-touch);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-control);
  color: var(--ui-text-secondary);
  background: var(--ui-surface);
  font: var(--ui-font-meta);
}

.target-privacy button.active {
  border-color: var(--ui-brand);
  color: var(--ui-brand-strong);
  background: var(--ui-brand-soft);
}

.avatar-good-photo {
  height: 240px;
  overflow: hidden;
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface-soft);
}

.avatar-rule-list,
.guide-list ul {
  display: grid;
  margin: 0;
  padding: 0;
  gap: var(--ui-space-2);
  list-style: none;
}

.avatar-rule-list li {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  color: var(--ui-text-secondary);
  font: var(--ui-font-body);
}

.avatar-rule-list svg {
  width: var(--ui-size-icon);
  height: var(--ui-size-icon);
  color: var(--ui-alert);
}

.basic-editor-layer {
  align-items: stretch;
  background: var(--ui-surface);
}

.basic-editor-shell {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow-y: auto;
  background: var(--ui-surface-soft);
}

.basic-editor-form {
  display: grid;
  padding: var(--ui-space-4) var(--ui-space-4) calc(var(--ui-size-button) + var(--ui-space-8));
  gap: var(--ui-space-3);
}

.basic-editor-form h2 {
  padding-top: var(--ui-space-2);
  font: var(--ui-font-section);
}

.locked-basic-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-height: var(--ui-size-button);
  padding: var(--ui-space-2) var(--ui-space-3);
  gap: var(--ui-space-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface);
  text-align: start;
}

.locked-basic-row span,
.locked-basic-row strong {
  font: var(--ui-font-body);
}

.locked-basic-row small {
  display: block;
  margin-top: var(--ui-space-1);
  color: var(--ui-text-tertiary);
  font: var(--ui-font-meta);
}

.locked-basic-row strong {
  color: var(--ui-text-tertiary);
  font-weight: 400;
  text-align: end;
}

.basic-editor-dock {
  position: sticky;
  bottom: 0;
  padding: var(--ui-space-2) var(--ui-space-4) calc(var(--ui-space-2) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ui-line);
  background: var(--ui-surface);
}

.basic-editor-dock button {
  width: 100%;
}

.job-picker-sheet header {
  display: grid;
  grid-template-columns: var(--ui-size-touch) minmax(0, 1fr) var(--ui-size-touch);
  align-items: center;
  text-align: center;
}

.job-picker-sheet header button {
  min-height: var(--ui-size-touch);
  color: var(--ui-brand-strong);
  background: transparent;
  font: var(--ui-font-meta);
}

.job-confirm,
.job-student {
  width: 100%;
}

.ui-about-layout {
  min-height: 100dvh;
}

.about-nav > .ui-header-end > svg {
  width: var(--ui-size-icon);
  height: var(--ui-size-icon);
  color: var(--ui-text-tertiary);
}

.about-question-page,
.self-intro-page {
  background: var(--ui-surface);
}

.about-page-intro,
.self-intro-header {
  display: grid;
  gap: var(--ui-space-2);
  padding: var(--ui-space-4);
  border-bottom: 1px solid var(--ui-line);
}

.about-question-tabs {
  display: flex;
  gap: var(--ui-space-2);
  padding: var(--ui-space-3) var(--ui-space-4);
  overflow-x: auto;
  border-bottom: 1px solid var(--ui-line);
  scrollbar-width: none;
}

.about-question-tabs a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: var(--ui-size-touch);
  padding-inline: var(--ui-space-3);
  border-radius: var(--ui-radius-tag);
  color: var(--ui-text-secondary);
  background: var(--ui-surface-soft);
  font: var(--ui-font-meta);
}

.about-question-tabs a.active {
  color: var(--ui-brand-strong);
  background: var(--ui-brand-soft);
}

.about-question-list {
  padding-inline: var(--ui-space-4);
}

.about-question-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ui-size-icon);
  align-items: center;
  min-height: 72px;
  gap: var(--ui-space-3);
  border-bottom: 1px solid var(--ui-line);
}

.about-question-item > span {
  display: grid;
  min-width: 0;
  gap: var(--ui-space-1);
}

.about-question-item strong {
  font: var(--ui-font-body);
}

.about-question-item em {
  overflow: hidden;
  color: var(--ui-text-tertiary);
  font: var(--ui-font-meta);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.about-question-item svg {
  width: var(--ui-size-icon);
  height: var(--ui-size-icon);
  color: var(--ui-text-tertiary);
}

.intro-editor-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--ui-space-2);
  padding: var(--ui-space-4);
}

.intro-editor-card textarea {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 200px;
  padding: var(--ui-space-3);
  resize: vertical;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-control);
  outline: 0;
  color: var(--ui-ink);
  background: var(--ui-surface);
  font: var(--ui-font-body);
}

#selfIntroCount {
  grid-column: 2;
  color: var(--ui-text-tertiary);
  font: var(--ui-font-meta);
}

.intro-photo-add {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: var(--ui-size-touch) minmax(0, 1fr);
  align-items: center;
  min-height: 64px;
  padding: var(--ui-space-2);
  gap: var(--ui-space-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface-soft);
  text-align: start;
}

.intro-photo-add > svg {
  width: var(--ui-size-nav-icon);
  height: var(--ui-size-nav-icon);
  color: var(--ui-brand-strong);
}

.intro-photo-add span {
  display: grid;
  gap: var(--ui-space-1);
}

.intro-photo-add strong {
  font: var(--ui-font-body);
}

.intro-photo-add em {
  color: var(--ui-text-tertiary);
  font: var(--ui-font-meta);
  font-style: normal;
}

.intro-photo-thumb {
  position: relative;
  grid-column: 1 / -1;
  height: 200px;
  overflow: hidden;
  border-radius: var(--ui-radius-control);
}

.intro-photo-thumb button {
  position: absolute;
  top: var(--ui-space-2);
  right: var(--ui-space-2);
  color: var(--ui-surface);
  background: color-mix(in srgb, var(--ui-ink) 68%, transparent);
}

.about-publish-dock {
  position: sticky;
  bottom: 0;
  display: grid;
  gap: var(--ui-space-2);
  padding: var(--ui-space-3) var(--ui-space-4) calc(var(--ui-space-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ui-line);
  background: var(--ui-surface);
}

.about-publish-dock label {
  display: grid;
  grid-template-columns: var(--ui-size-nav-icon) minmax(0, 1fr);
  align-items: center;
  gap: var(--ui-space-2);
  color: var(--ui-text-secondary);
  font: var(--ui-font-meta);
}

.about-publish-dock button {
  width: 100%;
}

.intro-example-layer {
  align-items: center;
  padding: var(--ui-space-4);
}

.intro-example-dialog {
  width: 100%;
  max-height: 84dvh;
}

.intro-example-dialog > header {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: var(--ui-space-3);
}

.intro-example-dialog header p {
  color: var(--ui-text-tertiary);
  font: var(--ui-font-meta);
}

.intro-example-content {
  display: grid;
  max-height: 40dvh;
  gap: var(--ui-space-3);
  overflow-y: auto;
}

.intro-example-block {
  display: grid;
  gap: var(--ui-space-1);
  padding-bottom: var(--ui-space-3);
  border-bottom: 1px solid var(--ui-line);
}

.intro-example-block h3 {
  font: var(--ui-font-body);
}

.intro-example-block p {
  color: var(--ui-text-secondary);
  font: var(--ui-font-body);
}

.intro-example-dots {
  display: flex;
  justify-content: center;
  gap: var(--ui-space-2);
}

.intro-example-dots button {
  width: var(--ui-space-2);
  height: var(--ui-space-2);
  padding: 0;
  border-radius: var(--ui-radius-round);
  background: var(--ui-line);
}

.intro-example-dots button.active {
  background: var(--ui-brand-strong);
}

.ui-photo-guide-layout {
  min-height: 100dvh;
  background: var(--ui-surface);
}

.photo-guide-article {
  display: grid;
  gap: 0;
}

.guide-hero-copy,
.guide-rule,
.guide-list,
.guide-final {
  display: grid;
  gap: var(--ui-space-3);
  padding: var(--ui-space-6) var(--ui-space-4);
  border-bottom: 1px solid var(--ui-line);
}

.guide-summary {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-3);
  color: var(--ui-brand-strong);
  background: var(--ui-brand-soft);
  font: var(--ui-font-meta);
}

.guide-summary svg {
  flex: 0 0 var(--ui-size-icon);
  width: var(--ui-size-icon);
  height: var(--ui-size-icon);
}

.guide-rule > header {
  display: grid;
  gap: var(--ui-space-1);
}

.guide-rule > header span {
  color: var(--ui-brand-strong);
  font: var(--ui-font-tag);
}

.guide-photo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ui-space-3);
}

.guide-example {
  display: grid;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface-soft);
}

.guide-example img {
  height: 176px;
  object-position: center 24%;
}

.guide-example figcaption {
  display: flex;
  align-items: center;
  min-height: var(--ui-size-touch);
  padding-inline: var(--ui-space-2);
  gap: var(--ui-space-1);
  color: var(--ui-text-secondary);
  background: var(--ui-surface);
  font: var(--ui-font-meta);
}

.guide-example figcaption svg {
  flex: 0 0 var(--ui-size-icon);
  width: var(--ui-size-icon);
  height: var(--ui-size-icon);
}

.guide-example.good figcaption svg {
  color: var(--ui-brand-strong);
}

.guide-example.bad figcaption svg {
  color: var(--ui-alert);
}

.guide-crop-side img {
  object-position: 92% 24%;
  transform: scale(1.32);
}

.guide-dark img {
  filter: brightness(0.42);
}

.guide-blur img {
  filter: blur(8px);
  transform: scale(1.08);
}

.guide-close img {
  transform: scale(1.72);
}

.guide-list li {
  min-height: var(--ui-size-touch);
  padding: var(--ui-space-3);
  border-left: var(--ui-space-1) solid var(--ui-brand);
  color: var(--ui-text-secondary);
  background: var(--ui-surface-soft);
  font: var(--ui-font-body);
}

.guide-final {
  border-bottom: 0;
  background: var(--ui-brand-soft);
}

.guide-final-action {
  width: 100%;
  height: var(--ui-size-button);
}

.ui-preview-layout {
  min-height: 100dvh;
}

.preview-hero {
  position: relative;
  height: 360px;
  overflow: hidden;
  background: var(--ui-surface-soft);
}

.preview-hero > img {
  object-position: center 24%;
}

.preview-hero-label {
  position: absolute;
  right: var(--ui-space-3);
  bottom: var(--ui-space-3);
  left: var(--ui-space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ui-space-2) var(--ui-space-3);
  color: var(--ui-surface);
  background: color-mix(in srgb, var(--ui-ink) 70%, transparent);
  font: var(--ui-font-meta);
}

.preview-hero-label a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ui-size-touch);
  gap: var(--ui-space-1);
  color: var(--ui-surface);
}

.preview-hero-label svg {
  width: var(--ui-size-icon);
  height: var(--ui-size-icon);
}

.preview-card {
  padding: var(--ui-space-4);
  border-bottom: var(--ui-space-2) solid var(--ui-surface-soft);
  background: var(--ui-surface);
}

.identity-preview {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--ui-space-3);
}

.preview-identity-title {
  align-self: center;
  min-width: 0;
}

.preview-identity-title h1 {
  font: var(--ui-font-person);
  overflow-wrap: anywhere;
}

.preview-identity-title em {
  display: inline-flex;
  margin-top: var(--ui-space-1);
  color: var(--ui-text-tertiary);
  font: var(--ui-font-meta);
  font-style: normal;
}

.identity-preview dl {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--ui-line);
}

.identity-preview dl > div {
  display: grid;
  grid-template-columns: var(--ui-size-nav-icon) minmax(0, 1fr);
  align-items: center;
  min-height: var(--ui-size-touch);
  gap: var(--ui-space-2);
  border-bottom: 1px solid var(--ui-line);
}

.identity-preview dt,
.identity-preview dd {
  margin: 0;
}

.identity-preview dt svg {
  width: var(--ui-size-icon);
  height: var(--ui-size-icon);
  color: var(--ui-brand-strong);
}

.identity-preview dd {
  min-width: 0;
  color: var(--ui-text-secondary);
  font: var(--ui-font-meta);
  overflow-wrap: anywhere;
}

.preview-certifications,
.share-card-cert {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
}

.preview-certifications span,
.share-card-cert span {
  display: inline-flex;
  align-items: center;
  min-height: var(--ui-size-nav-icon);
  padding: var(--ui-space-1) var(--ui-space-2);
  gap: var(--ui-space-1);
  border-radius: var(--ui-radius-tag);
  color: var(--ui-brand-strong);
  background: var(--ui-brand-soft);
  font: var(--ui-font-tag);
}

.preview-certifications svg,
.share-card-cert svg {
  width: var(--ui-space-4);
  height: var(--ui-space-4);
}

.target-preview > strong {
  display: block;
  margin-bottom: var(--ui-space-2);
  color: var(--ui-brand-strong);
  font: var(--ui-font-section);
}

.profile-posts-list {
  display: grid;
}

.profile-post-empty,
.profile-post-item {
  display: grid;
  min-height: 88px;
  align-content: center;
  gap: var(--ui-space-2);
  padding-block: var(--ui-space-3);
  border-top: 1px solid var(--ui-line);
}

.profile-post-empty strong,
.profile-post-item p {
  color: var(--ui-ink);
  font: var(--ui-font-body);
  overflow-wrap: anywhere;
}

.profile-post-empty p,
.profile-post-empty a,
.profile-post-item span,
.profile-post-item small {
  color: var(--ui-text-tertiary);
  font: var(--ui-font-meta);
}

.profile-post-empty a {
  color: var(--ui-brand-strong);
}

.preview-actions {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--ui-space-3);
  padding: var(--ui-space-4);
  background: var(--ui-surface);
}

.profile-share-options {
  display: grid;
  gap: var(--ui-space-2);
}

.profile-share-options .ui-button,
.profile-share-cancel,
.profile-share-muted {
  width: 100%;
}

.profile-share-muted {
  min-height: var(--ui-size-touch);
  color: var(--ui-brand-strong);
  background: var(--ui-brand-soft);
  font: var(--ui-font-meta);
}

.profile-card-layer,
.share-overlay {
  align-items: center;
  padding: var(--ui-space-4);
}

.profile-card-preview,
.reward-modal {
  width: 100%;
  max-height: 88dvh;
  overflow-y: auto;
}

.share-card-art {
  display: grid;
  gap: var(--ui-space-3);
  padding: var(--ui-space-4);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface-soft);
}

.share-card-art > header,
.share-card-art > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
}

.share-card-art header span {
  color: var(--ui-brand-strong);
  font: var(--ui-font-section);
}

.share-card-art header em,
.share-card-art footer p,
.share-card-person p {
  color: var(--ui-text-tertiary);
  font: var(--ui-font-meta);
  font-style: normal;
}

.share-card-person {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: var(--ui-space-3);
}

.share-card-art dl {
  display: grid;
  gap: var(--ui-space-2);
}

.share-card-art dl > div {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  min-height: var(--ui-size-touch);
  align-items: center;
  border-bottom: 1px solid var(--ui-line);
}

.share-card-art dt,
.share-card-art dd {
  margin: 0;
  font: var(--ui-font-meta);
}

.share-card-art dd {
  color: var(--ui-text-secondary);
}

.share-card-art footer svg,
.reward-modal > svg {
  width: var(--ui-size-nav-icon);
  height: var(--ui-size-nav-icon);
  color: var(--ui-brand-strong);
}

.reward-modal {
  place-items: center;
  text-align: center;
}

.reward-modal > strong {
  color: var(--ui-brand-strong);
  font: var(--ui-font-person);
}

.reward-modal > label {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  color: var(--ui-text-secondary);
  font: var(--ui-font-meta);
}

@media (max-width: 390px) {
  .entry-trust span {
    min-height: 56px;
  }

  .gender-card {
    min-height: 216px;
  }

  .gender-visual {
    height: 136px;
  }

  .edit-identity {
    grid-template-columns: 64px minmax(0, 1fr) var(--ui-size-touch);
  }

  .edit-identity .profile-photo,
  .preview-avatar,
  .example-avatar {
    width: 64px;
    height: 64px;
  }

  .guide-example img {
    height: 152px;
  }

  .identity-preview {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .preview-actions,
  .profile-card-actions {
    grid-template-columns: 1fr;
  }
}