/* Registration uses the same city scene and framed ice card as the User Panel sign in. */
body[data-route="register"] .wrap > .hero + .main {
  padding: 0 0 64px;
  background: #e3f1fa url('../assets/grand-mu-menu-continuation-aligned-v5.jpg') center top / 100% auto no-repeat;
}
body[data-route="register"] .wrap > .hero::after,
body[data-route="register"] .wrap > .hero + .main::before,
body[data-route="register"] .wrap > .hero + .main::after,
body[data-route="register"] .wrap #main-content::before { content: none; }
body[data-route="register"] .wrap #main-content {
  width: 100%;
  padding: 0;
  border: 0;
  border-image: none;
  background: transparent;
  box-shadow: none;
}
body[data-route="register"] .wrap #main-content > .register-page {
  position: relative;
  display: grid;
  justify-items: center;
  width: 100%;
  padding: 0 26px 32px;
  background: transparent;
}
.register-page .register-back {
  position: absolute;
  top: 20px;
  left: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 13px;
  border: 1px solid #b4d3e6;
  border-radius: 3px;
  background: #f3fbff;
  color: #285573;
  box-shadow: 0 4px 12px #2b75921a;
  font-size: 12px;
  text-decoration: none;
  z-index: 3;
}
.register-page .register-back:hover { background: #fff; }
.register-page .register-back span { font-size: 24px; line-height: 1; }
.register-page .register-card {
  position: relative;
  isolation: isolate;
  width: min(820px, 100%);
  margin: 0 auto;
  padding: 84px 48px 34px;
  border: 1px solid #c1e8fa;
  border-image: url('../assets/silver-ice-window-frame-v1.svg') 180 200 / 32px 36px / 15px stretch;
  border-radius: 0;
  background: linear-gradient(140deg, rgba(239,250,255,.5), rgba(195,231,250,.5) 55%, rgba(165,216,243,.5));
  color: #224e6e;
  box-shadow: 0 20px 45px #286d9440, inset 0 0 0 2px #fff;
}
.register-page .register-card::before {
  content: '';
  position: absolute;
  inset: 4px;
  z-index: 0;
  pointer-events: none;
  background: url('../assets/grand-mu-helmet-gmr-watermark-v3.svg') center / contain no-repeat;
}
.register-page .register-card::after {
  content: '';
  position: absolute;
  inset: 10px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid #fff;
  box-shadow: inset 0 0 0 1px rgba(58,158,207,.17);
}
.register-page .register-card > * { position: relative; z-index: 1; }
.register-page .register-heading { margin-bottom: 22px; text-align: center; }
.register-page .register-heading small {
  color: #417591;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .22em;
}
.register-page .register-heading h2 {
  margin: 10px 0;
  color: #224e6e;
  font: 600 40px/1.12 Georgia, serif;
  text-shadow: 0 1px #fff;
}
.register-page .register-heading p { margin: 0; color: #466e88; font-size: 13px; line-height: 1.6; }
.register-page .register-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 11px 13px;
  border: 1px solid #92bed8;
  border-radius: 3px;
  background: #eff9ff;
  color: #365f7a;
  font-size: 11px;
  line-height: 1.5;
}
.register-page .register-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.register-page .register-field { display: grid; gap: 7px; min-width: 0; }
.register-page .register-field label { color: #264f6c; font-size: 12px; font-weight: 700; }
.register-page .register-field input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 47px;
  padding: 11px 13px;
  border: 1px solid #8eb8d3;
  border-radius: 3px;
  background: #f7fcff;
  color: #264f6c;
  box-shadow: inset 0 2px 4px #234d6b09;
  font-size: 16px;
  opacity: 1;
  -webkit-text-fill-color: #5e7d94;
}
.register-page .register-terms { margin: 21px 0; }
.register-page .register-terms label { display: inline-flex; align-items: center; gap: 9px; color: #365c76; font-size: 12px; }
.register-page .register-terms input { width: 17px; height: 17px; margin: 0; accent-color: #337eae; }
.register-page .register-terms small { display: block; margin: 6px 0 0 26px; color: #496f87; font-size: 10px; }
.register-page .register-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  min-height: 49px;
  padding: 10px 18px;
  border: 1px solid #7caac7;
  border-radius: 3px;
  background: linear-gradient(#fff, #bfdef2);
  color: #264f6c;
  box-shadow: inset 0 1px #fff, 0 5px 12px #2c6a931a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  cursor: not-allowed;
  opacity: .7;
}
.register-page .register-submit span:last-child { font-size: 23px; line-height: 1; }
.register-page .form-message:empty { display: none; }
.register-page .register-signin {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px 8px;
  margin-top: 24px;
  padding-top: 17px;
  border-top: 1px solid #91bdd7;
  color: #4b6f88;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}
.register-page .register-signin a { color: #275876; font-weight: 700; text-underline-offset: 3px; }
@media (max-width: 760px) {
  body[data-route="register"] .wrap > .hero + .main { background-size: 113.5% auto; }
  body[data-route="register"] .wrap #main-content > .register-page { padding: calc(32.4vw + 4px) 26px 32px; }
  .register-page .register-back { top: calc(32.4vw + 12px); left: 26px; }
  .register-page .register-card { margin-top: 55px; padding: 36px 28px 28px; }
}
@media (max-width: 560px) {
  .register-page .register-fields { grid-template-columns: 1fr; }
  .register-page .register-heading h2 { font-size: 32px; }
}
@media (max-width: 400px) {
  body[data-route="register"] .wrap #main-content > .register-page { padding-right: 20px; padding-left: 20px; }
  .register-page .register-back { left: 20px; }
  .register-page .register-card { padding-right: 22px; padding-left: 22px; border-image-width: 23px 26px; border-image-outset: 10px; }
}