/* birthday-realname-v1: artwork scales with width; the form can grow with content. */
.birthday-realname { margin: 0; background: #abc58b; color: #43372f; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
.birthday-realname .mobile-page {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 560px;
  --hero-space: min(81vw, 454px, max(110px, calc(100svh - 496px - env(safe-area-inset-bottom, 0px))));
  height: 100vh;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  margin: 0 auto;
  background: #abc58b;
}
.birthday-realname .realname-background { position: absolute; inset: auto 0; top: calc(var(--hero-space) - min(81vw, 454px)); z-index: -1; display: block; width: 100%; height: auto; pointer-events: none; }
.birthday-realname .birthday-header { position: absolute; top: 0; z-index: 2; }
/* Keep the footer in the viewport; only extreme short screens / enlarged text scroll here. */
.birthday-realname .realname-content { width: 100%; min-height: 0; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding-bottom: 8px; box-sizing: border-box; scrollbar-width: thin; }
.birthday-realname .realname-content::before { content: ""; display: block; height: var(--hero-space); }
.birthday-realname .identity-panel { position: relative; width: 90%; margin: 0 auto; min-height: 0; }
/* Only the plain frame stretches when validation text or font size requires more room. */
.birthday-realname .panel-background { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.birthday-realname .panel-content { position: relative; box-sizing: border-box; padding: clamp(22px, 6vw, 28px) 6%; display: flex; flex-direction: column; gap: 14px; }
.birthday-realname h1 { margin: 0; text-align: center; font-size: clamp(21px, 5.5vw, 26px); line-height: 1.4; font-weight: 600; color: #242b25; }
.birthday-realname .cert-type-group { display: grid; grid-template-columns: 1.2fr 1fr; width: 86%; max-width: 290px; align-self: center; padding: 3px; gap: 3px; background: var(--birthday-surface); border: 1px solid var(--birthday-border); border-radius: 11px; }
.birthday-realname .cert-type-option { position: relative; min-width: 0; cursor: pointer; }
.birthday-realname .cert-type-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.birthday-realname .cert-type-option span { display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 4px; border-radius: 8px; color: var(--birthday-muted); font-size: clamp(11px, 3vw, 13px); font-weight: 600; text-align: center; transition: background .15s ease, color .15s ease; }
.birthday-realname .cert-type-option input:checked + span { background: var(--birthday-primary); color: var(--birthday-primary-contrast); box-shadow: 0 2px 5px #51342d1a; }
.birthday-realname .cert-type-option input:focus-visible + span { outline: 2px solid var(--birthday-primary); outline-offset: 2px; }
.birthday-realname .field { display: flex; flex-direction: column; }
.birthday-realname .input { display: block; flex: 0 0 auto; width: 100%; height: 58px; box-sizing: border-box; padding: 0 2px; border: 0; border-bottom: 1px solid #d4d7d0; border-radius: 0; background: transparent; color: #302c29; font: inherit; font-size: 16px; scroll-margin: 24px; }
.birthday-realname .input::placeholder { color: #8b928b; }
.birthday-realname .input:focus { outline: none; border-bottom: 2px solid var(--birthday-primary); }
.birthday-realname .field-tip { margin: 8px 0 0; min-height: 3.2em; font-size: 12px; line-height: 1.6; color: #76736a; overflow-wrap: anywhere; }
.birthday-realname .field-tip.error { color: #a33d49; }
.birthday-realname .agree { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; line-height: 1.8; color: var(--birthday-muted); }
.birthday-realname .agree input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--birthday-primary); cursor: pointer; }
.birthday-realname .agree label { cursor: pointer; }
.birthday-realname .agree a { color: var(--birthday-primary); text-decoration: underline; text-underline-offset: 3px; }
.birthday-realname .form-actions { width: 81.5%; margin: 28px auto 0; display: flex; flex-direction: column; gap: 12px; }
.birthday-realname .image-button { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.birthday-realname .image-button img { display: block; width: 100%; height: auto; border-radius: inherit; }
.birthday-realname .image-button:focus-visible { outline: 3px solid var(--birthday-primary); outline-offset: 4px; }
.birthday-realname .image-button:active { transform: scale(.98); }
.birthday-realname .image-button:disabled { opacity: .55; cursor: wait; }
.birthday-realname .page-footer-note { flex: 0 0 auto; width: 94%; margin: 0 auto; padding: 8px 0 max(10px, env(safe-area-inset-bottom, 0px)); text-align: center; font-size: clamp(8px, 2.25vw, 12px); line-height: 1.6; font-weight: 600; }
.birthday-realname .page-footer-note .global-footer-note__license { display: flex; flex-wrap: wrap; gap: 0 8px; margin-top: 4px; font-size: clamp(7px, 1.9vw, 9px); font-weight: 400; }
.birthday-realname .page-footer-note .global-footer-note__license img { width: 12px; height: 12px; }
@media (max-height: 700px) {
  .birthday-realname .mobile-page { --hero-space: min(81vw, 454px, max(100px, calc(100svh - 450px - env(safe-area-inset-bottom, 0px)))); }
  .birthday-realname .panel-content { padding-top: 18px; padding-bottom: 18px; gap: 11px; }
  .birthday-realname .input { height: 56px; }
  .birthday-realname h1 { font-size: 20px; }
  .birthday-realname .field-tip { min-height: 0; }
  .birthday-realname .form-actions { margin-top: 20px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .birthday-realname .cert-type-option span { transition: none; } }