html{
  height: 100%;
  overflow: hidden;
}


body.login-page-body,
body.register-page-body {
  height: 100vh;
  margin: 0;
  /* background:
    linear-gradient(135deg, rgba(185, 240, 229, 0.36), rgba(233, 248, 255, 0) 48%) 26% 55% / 52vw 58vw no-repeat,
    linear-gradient(208deg, rgba(208, 244, 250, 0.5), rgba(232, 242, 252, 0) 52%) 70% 48% / 44vw 36vw no-repeat,
    linear-gradient(180deg, #edf7ff 0%, #f1f8fb 100%); */
  background: url(../assets/images/bg.png) no-repeat center / cover;
  color: #2f343a;
  overflow-x: hidden;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -40px;
  z-index: 3000;
  padding: 10px 14px;
  border-radius: 6px;
  background: #186338;
  color: #fff;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus-visible {
  top: 16px;
}

.login-layout,
.register-layout {
  height: 100vh;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  /* gap: 36px; */
  overflow: hidden;
}


.login-visual,
.register-visual {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  min-height: 720px;
}


.login-visual,
.register-visual {
  transform: rotate(45deg);
  position: relative;
  z-index: 100;
  position: absolute;
  left: 0;
  bottom: 0;
}

.login-visual .le,
.login-visual .ri,
.register-visual .le,
.register-visual .ri {}

.login-visual .m-img,
.register-visual .m-img {
  width: 500px;
  height: 500px;
  background: #78B994;
  margin: 20px 10px;
  position: relative;
  overflow: hidden;
}

.login-visual .m-img .info,
.register-visual .m-img .info {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  z-index: 100;
  color: #fff;
  display: flex;
  display: none;

  padding-left: 80px;
  padding-right: 80px;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
  transform: rotate(-45deg);
}

.login-visual .m-img::after,
.register-visual .m-img::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgb(24, 99, 56, 0.6);
  display: none;
}

.login-visual .m-img:hover .info,
.register-visual .m-img:hover .info {
  display: flex;
}

.login-visual .m-img:hover::after,
.register-visual .m-img:hover::after {
  display: block;
}

.login-visual .m-img .info .type,
.register-visual .m-img .info .type {
  display: inline-block;
  font-size: 22px;
  margin-bottom: 14px;
  font-weight: bold;
  position: relative;
  width: auto;
}

.login-visual .m-img .info .type::after,
.register-visual .m-img .info .type::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  background-color: rgba(252, 167, 63, 1);
  height: 8px;
  z-index: -1;
}

.login-visual .m-img .info .name,
.register-visual .m-img .info .name {
  font-size: 36px;
  margin-bottom: 6px;
  font-weight: bold;
}

.login-visual .m-img .info .des,
.register-visual .m-img .info .des {
  font-size: 12px;
}

.login-visual .m-img .info .mes,
.register-visual .m-img .info .mes {
  font-size: 14px;
  line-height: 18px;
}

.login-visual .m-img .info .line,
.register-visual .m-img .info .line {
  width: 30px;
  height: 2px;
  background: #fff;
  margin: 20px 0;

}


.login-visual .m-img img,
.register-visual .m-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}



.login-visual,
.register-visual {
  min-height: 100vh;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;
}

.login-mosaic,
.register-mosaic {
  position: absolute;
  inset: 0;
  margin: 0;
}

.login-diamond,
.register-diamond {
  position: absolute;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* ── 菱形一：左上小菱形（红果植物），顶点在左上角附近出血 ── */
.login-diamond--one,
.register-diamond--one {
  top: -45px;
  left: -20px;
  width: 150px;
  height: 150px;
  background-image: url("../assets/images/plant-2@2x.png");
}

/* ── 菱形二：右上大菱形（黄绿色枝叶），与菱形一共享右顶点 ── */
.login-diamond--two,
.register-diamond--two {
  top: -90px;
  left: 130px;
  width: 240px;
  height: 240px;
  background-image: url("../assets/icons/appraisal/img2.png");
}

/* ── 主菱形（英雄）：深绿色覆盖 + 植物文字信息，与菱形一共享下顶点 ── */
.login-diamond--hero,
.register-diamond--hero {
  top: 105px;
  left: -90px;
  width: 290px;
  height: 290px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background:
    linear-gradient(rgba(22, 92, 52, 0.82), rgba(18, 78, 44, 0.88)),
    url("../assets/icons/mypost/img-pic-1.png") center / cover no-repeat;
}

/* ── 菱形三：左下中菱形（荷叶/莲花植物），与主菱形共享下顶点 ── */
.login-diamond--three,
.register-diamond--three {
  top: 395px;
  left: -45px;
  width: 200px;
  height: 200px;
  background-image: url("../assets/icons/appraisal/img1.png");
}

/* ── 菱形四：右中小菱形（淡化），与菱形二共享下顶点 ── */
.login-diamond--four,
.register-diamond--four {
  top: 150px;
  left: 175px;
  width: 150px;
  height: 150px;
  opacity: 0.4;
  background-image: url("../assets/images/plant-4@2x.png");
}

/* ── 菱形五：右下更小更淡的菱形，与菱形四共享下顶点 ── */
.login-diamond--five,
.register-diamond--five {
  top: 300px;
  left: 190px;
  width: 120px;
  height: 120px;
  opacity: 0.22;
  background-image: url("../assets/icons/appraisal/img3.png");
}

/* ── 菱形六：底部右侧最淡的点缀菱形，与菱形五右顶点相连 ── */
/* D5右顶点 = (190+120, 300+60) = (310, 360)，D6上顶点对齐此处 */
.login-diamond--six,
.register-diamond--six {
  top: 360px;
  left: 260px;
  width: 100px;
  height: 100px;
  opacity: 0.15;
  background-image: url("../assets/icons/mypost/img-pic-2.png");
}

.login-diamond__copy,
.register-diamond__copy {
  position: relative;
  z-index: 1;
  max-width: 145px;
  text-align: left;
}

.login-diamond__family,
.register-diamond__family {
  display: inline-block;
  margin-bottom: 7px;
  color: #ffd37a;
  font-size: 13px;
  font-weight: 700;
}

.login-diamond__name,
.register-diamond__name {
  margin: 0 0 6px;
  font-size: 36px;
  line-height: 1.1;
  font-weight: 700;
}

.login-diamond__latin,
.register-diamond__latin {
  margin: 0 0 8px;
  font-size: 8.5px;
  line-height: 1.5;
  opacity: 0.8;
  font-style: italic;
}

.login-diamond__line,
.register-diamond__line {
  width: 20px;
  height: 1px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.85);
}

.login-diamond__meta,
.register-diamond__meta {
  margin: 0;
  font-size: 8px;
  line-height: 1.9;
  opacity: 0.9;
}

.login-diamond__cursor,
.register-diamond__cursor {
  margin-top: 10px;
  font-size: 18px;
}

.login-panel,
.register-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 0;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  padding-top: 50px;
  padding-right: 100px;
  z-index: 1000;
  overflow-y: auto;
}


.login-brand,
.register-brand {
  margin: 6px 0 28px;
  color: #186338;
  font-size: 38px;
  font-weight: bold;
  text-align: center;
  text-align: right;
}

.login-card,
.register-card {
  width: 480px;
  padding: 50px 70px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(56, 86, 70, 0.08);
  margin-right: 100px;
  margin-top: 150px;
}




.login-card__title,
.register-card__title {
  position: relative;
  margin: 0 0 50px;
  color: #2f343a;
  font-size: 34px;
  text-align: center;
  text-wrap: balance;
}

.login-card__title::after,
.register-card__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0px;
  width: 100px;
  height: 20px;
  transform: translateX(-50%);
  background: url(../assets/images/icon-line.png) no-repeat;
  background-size: 100% 100%;
}

.login-form,
.register-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.register-form {
  gap: 14px;
}

.login-form__field,
.register-form__field {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.login-form__label,
.register-form__label {
  color: #3e4348;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 5px;
}

.login-form__input-wrap,
.register-form__input-wrap {
  position: relative;
}

.login-form__input,
.register-form__input {
  width: 100%;
  height: 32px;
  border: 1px solid #e6e8eb;
  border-radius: 4px;
  background: #fff;
  padding: 0 34px 0 12px;
  color: #33383f;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-form__input::placeholder,
.register-form__input::placeholder {
  color: #c9ced4;
}

.login-form__input:focus-visible,
.register-form__input:focus-visible {
  border-color: #186338;
  box-shadow: 0 0 0 3px rgba(24, 99, 56, 0.08);
}

.login-form__icon,
.register-form__icon {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  opacity: 0.45;
}

.login-form__toggle,
.register-form__toggle {
  position: absolute;
  top: 50%;
  right: 0;
  width: 34px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateY(-50%);
  cursor: pointer;
}

.login-form__toggle .login-form__icon,
.register-form__toggle .register-form__icon {
  pointer-events: none;
}

.login-form__toggle[aria-pressed="true"] .login-form__icon,
.register-form__toggle[aria-pressed="true"] .register-form__icon {
  opacity: 0.8;
}

.login-form__hint,
.register-form__hint {
  min-height: 16px;
  color: #ef6a5e;
  font-size: 12px;
  visibility: hidden;
}

.register-form__hint {
  min-height: 14px;
}

.login-form__hint.is-visible,
.register-form__hint.is-visible {
  visibility: visible;
}

.login-form__field--error .login-form__input,
.register-form__field--error .register-form__input {
  border-color: #ef6a5e;
  box-shadow: 0 0 0 3px rgba(239, 106, 94, 0.12);
}

.login-form__captcha,
.register-form__captcha {
  display: flex;
  gap: 10px;
}

.login-form__captcha .login-form__input-wrap,
.register-form__captcha .register-form__input-wrap {
  flex: 1;
}

.login-form__captcha-image,
.register-form__captcha-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 32px;
  border: 1px solid #e7edf2;
  border-radius: 4px;
  background:
    radial-gradient(circle at 14px 16px, rgba(255, 135, 195, 0.26) 0, rgba(255, 135, 195, 0) 20px),
    radial-gradient(circle at 48px 10px, rgba(145, 210, 82, 0.34) 0, rgba(145, 210, 82, 0) 18px),
    radial-gradient(circle at 62px 20px, rgba(93, 201, 240, 0.28) 0, rgba(93, 201, 240, 0) 16px),
    linear-gradient(135deg, #fff 0%, #f7fbff 100%);
  color: #7dc15d;
  font-family: Georgia, serif;
  font-size: 24px;
  letter-spacing: 1px;
  cursor: pointer;
  user-select: none;
}

.login-form__options,
.register-form__options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #8c939a;
  font-size: 12px;
}

.login-form__remember,
.register-form__remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.login-form__remember input,
.register-form__remember input {
  margin: 0;
  accent-color: #186338;
}

.login-form__link,
.register-form__link {
  color: #8c939a;
  text-decoration: none;
  transition: color 0.2s ease;
}

.login-form__link:hover,
.register-form__link:hover {
  color: #186338;
}

.login-form__submit,
.register-form__submit {
  height: 38px;
  margin-top: 4px;
  border: none;
  border-radius: 6px;
  background: #186338;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.login-form__submit:hover,
.register-form__submit:hover {
  background: #165c34;
}

.login-form__submit:disabled,
.register-form__submit:disabled {
  cursor: not-allowed;
  background: #7ca98a;
}

.login-card__switch,
.register-card__switch {
  margin: 12px 0 0;
  color: #8c939a;
  font-size: 12px;
  text-align: center;
}

.login-card__switch a,
.register-card__switch a {
  color: #186338;
  font-weight: 600;
  text-decoration: none;
}

.login-footer,
.register-footer {
  color: rgba(24, 99, 56, 1);
  font-size: 12px;
  text-align: center;
  line-height: 2;
  padding-right: 100px;
  margin-top: 100px;
}

.login-footer {
  padding-right: 0;
}



.register-brand {
  margin-bottom: 18px;
}

.register-footer {
  padding-right: 0;
  line-height: 1.8;
}

.login-form__input,
.register-form__input,
.login-form__submit,
.register-form__submit,
.login-form__link,
.register-form__link,
.login-card__switch a,
.register-card__switch a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(24, 99, 56, 0.16);
}

.login-form__input:focus-visible,
.register-form__input:focus-visible,
.login-form__toggle:focus-visible,
.register-form__toggle:focus-visible,
.login-form__captcha-image:focus-visible,
.register-form__captcha-image:focus-visible,
.login-form__submit:focus-visible,
.register-form__submit:focus-visible,
.login-form__link:focus-visible,
.register-form__link:focus-visible,
.login-card__switch a:focus-visible,
.register-card__switch a:focus-visible {
  outline: 2px solid #186338;
  outline-offset: 2px;
}

/* 1700px：整体缩小左侧图片、右侧表单及间距，减轻拥挤感 */
@media (max-width: 1700px) {
  .login-visual .m-img,
  .register-visual .m-img {
    width: 300px;
    height: 300px;
    margin: 8px 4px;
  }

  .login-visual .m-img .info,
  .register-visual .m-img .info {
    padding-left: 24px;
    padding-right: 24px;
  }

  .login-visual .m-img .info .type,
  .register-visual .m-img .info .type {
    font-size: 15px;
    margin-bottom: 8px;
  }

  .login-visual .m-img .info .type::after,
  .register-visual .m-img .info .type::after {
    height: 5px;
    bottom: 2px;
  }

  .login-visual .m-img .info .name,
  .register-visual .m-img .info .name {
    font-size: 24px;
    margin-bottom: 4px;
  }

  .login-visual .m-img .info .des,
  .register-visual .m-img .info .des {
    font-size: 11px;
  }

  .login-visual .m-img .info .mes,
  .register-visual .m-img .info .mes {
    font-size: 11px;
    line-height: 15px;
  }

  .login-visual .m-img .info .line,
  .register-visual .m-img .info .line {
    width: 20px;
    height: 2px;
    margin: 12px 0;
  }

  .login-panel,
  .register-panel {
    padding-top: 28px;
    padding-right: 48px;
  }

  .login-brand,
  .register-brand {
    font-size: 30px;
    margin: 2px 0 14px;
  }

  .login-card,
  .register-card {
    width: 420px;
    padding: 32px 44px;
    margin-right: 48px;
    margin-top: 80px;
  }

  .login-card__title,
  .register-card__title {
    font-size: 28px;
    margin: 0 0 28px;
  }

  .login-card__title::after,
  .register-card__title::after {
    width: 80px;
    height: 16px;
  }

  .login-form,
  .register-form {
    gap: 10px;
  }

  .login-form__label,
  .register-form__label {
    font-size: 13px;
    margin-bottom: 3px;
  }

  .login-form__input,
  .register-form__input {
    height: 30px;
    padding: 0 32px 0 10px;
    font-size: 13px;
  }

  .login-form__submit,
  .register-form__submit {
    height: 34px;
    margin-top: 0;
    font-size: 15px;
  }

  .login-card__switch,
  .register-card__switch {
    margin: 8px 0 0;
    font-size: 12px;
  }

  .login-footer,
  .register-footer {
    padding-right: 48px;
    margin-top: 48px;
    font-size: 11px;
  }
}

/* 1200px：进一步缩小，布局更紧凑 */
@media (max-width: 1200px) {
  .login-visual .m-img,
  .register-visual .m-img {
    width: 220px;
    height: 220px;
    margin: 6px 3px;
  }

  .login-visual .m-img .info .type,
  .register-visual .m-img .info .type {
    font-size: 14px;
    margin-bottom: 6px;
  }

  .login-visual .m-img .info .type::after,
  .register-visual .m-img .info .type::after {
    height: 5px;
    bottom: 2px;
  }

  .login-visual .m-img .info .name,
  .register-visual .m-img .info .name {
    font-size: 22px;
    margin-bottom: 3px;
  }

  .login-visual .m-img .info .des,
  .register-visual .m-img .info .des {
    font-size: 10px;
  }

  .login-visual .m-img .info .mes,
  .register-visual .m-img .info .mes {
    font-size: 10px;
    line-height: 14px;
  }

  .login-visual .m-img .info .line,
  .register-visual .m-img .info .line {
    width: 18px;
    height: 2px;
    margin: 8px 0;
  }

  .login-visual .m-img .info,
  .register-visual .m-img .info {
    padding-left: 16px;
    padding-right: 16px;
  }

  .login-panel,
  .register-panel {
    padding-top: 22px;
    padding-right: 32px;
  }

  .login-brand,
  .register-brand {
    font-size: 26px;
    margin: 0 0 12px;
  }

  .login-card,
  .register-card {
    width: 380px;
    padding: 28px 36px;
    margin-right: 32px;
    margin-top: 56px;
  }

  .login-card__title,
  .register-card__title {
    font-size: 24px;
    margin: 0 0 22px;
  }

  .login-card__title::after,
  .register-card__title::after {
    width: 64px;
    height: 14px;
  }

  .login-form,
  .register-form {
    gap: 8px;
  }

  .login-form__label,
  .register-form__label {
    font-size: 12px;
    margin-bottom: 2px;
  }

  .login-form__input,
  .register-form__input {
    height: 28px;
    padding: 0 30px 0 10px;
    font-size: 12px;
  }

  .login-form__captcha-image,
  .register-form__captcha-image {
    width: 72px;
    height: 28px;
    font-size: 20px;
  }

  .login-form__submit,
  .register-form__submit {
    height: 32px;
    margin-top: 0;
    font-size: 14px;
  }

  .login-card__switch,
  .register-card__switch {
    margin: 6px 0 0;
    font-size: 11px;
  }

  .login-footer,
  .register-footer {
    padding-right: 32px;
    margin-top: 32px;
    font-size: 10px;
    line-height: 1.7;
  }
}

@media (max-width: 1100px) {

  .login-layout,
  .register-layout {
    flex-direction: column;
    gap: 0;
    padding: 20px 16px 24px;
  }

  .login-layout {
    display: flex;
    padding: 24px 16px 28px;
  }

  .register-layout {
    display: flex;
    padding: 24px 16px 28px;
  }

  .login-visual,
  .register-visual {
    min-height: 500px;
  }



  .login-visual,
  .register-visual {
    min-height: 420px;
    justify-content: center;
    padding: 0;
    align-items: center;
  }

  .login-visual .m-img,
  .register-visual .m-img {
    width: 160px;
    height: 160px;
    margin: 4px 2px;
  }

  .login-visual .m-img .info .type,
  .register-visual .m-img .info .type {
    font-size: 12px;
    margin-bottom: 4px;
  }

  .login-visual .m-img .info .type::after,
  .register-visual .m-img .info .type::after {
    height: 4px;
    bottom: 2px;
  }

  .login-visual .m-img .info .name,
  .register-visual .m-img .info .name {
    font-size: 18px;
    margin-bottom: 2px;
  }

  .login-visual .m-img .info .des,
  .register-visual .m-img .info .des {
    font-size: 9px;
  }

  .login-visual .m-img .info .mes,
  .register-visual .m-img .info .mes {
    font-size: 9px;
    line-height: 12px;
  }

  .login-visual .m-img .info .line,
  .register-visual .m-img .info .line {
    width: 14px;
    height: 1px;
    margin: 8px 0;
  }

  .login-visual .m-img .info,
  .register-visual .m-img .info {
    padding-left: 14px;
    padding-right: 14px;
  }

  .login-mosaic,
  .register-mosaic {
    transform: scale(0.72);
    transform-origin: left top;
  }

  .login-panel,
  .register-panel {
    width: 100%;
    max-width: 420px;
    margin: 32px auto 0;
  }

  .login-panel {
    max-width: 480px;
    min-height: auto;
    margin: 0 auto;
    padding: 0;
  }

  .register-panel {
    max-width: 520px;
    min-height: auto;
    margin: 0 auto;
    padding: 0;
  }

  .login-card {
    margin-top: 20px;
  }

  .register-card {
    width: 100%;
    margin-top: 20px;
    margin-right: 0;
    padding: 28px 24px 18px;
  }
}

@media (max-width: 768px) {

  .login-layout,
  .register-layout {
    padding: 20px 12px;
  }

  .login-visual,
  .register-visual {
    min-height: 300px;
  }

  .login-visual,
  .register-visual {
    min-height: auto;
  }

  .login-visual .m-img,
  .register-visual .m-img {
    width: 120px;
    height: 120px;
    margin: 3px 2px;
  }

  .login-visual .m-img .info,
  .register-visual .m-img .info {
    padding-left: 8px;
    padding-right: 8px;
  }

  .login-visual .m-img .info .type,
  .register-visual .m-img .info .type {
    font-size: 9px;
    margin-bottom: 1px;
  }

  .login-visual .m-img .info .type::after,
  .register-visual .m-img .info .type::after {
    height: 2px;
    bottom: 1px;
  }

  .login-visual .m-img .info .name,
  .register-visual .m-img .info .name {
    font-size: 12px;
    margin-bottom: 0;
  }

  .login-visual .m-img .info .des,
  .register-visual .m-img .info .des {
    font-size: 7px;
  }

  .login-visual .m-img .info .mes,
  .register-visual .m-img .info .mes {
    font-size: 7px;
    line-height: 9px;
  }

  .login-visual .m-img .info .line,
  .register-visual .m-img .info .line {
    width: 8px;
    height: 1px;
    margin: 3px 0;
  }

  .login-mosaic,
  .register-mosaic {
    transform: scale(0.46);
    transform-origin: left top;
  }

  .login-card,
  .register-card {
    padding: 24px 18px 16px;
  }

  .login-card {
    width: 100%;
  }

  .register-card {
    width: 100%;
  }

  .login-brand,
  .register-brand {
    margin-bottom: 16px;
    font-size: 28px;
  }

  .login-footer,
  .register-footer {
    margin-top: 20px;
    line-height: 1.8;
    padding-right: 0;
  }
}

@media (max-width: 480px) {
  .login-layout,
  .register-layout {
    padding: 18px 12px 20px;
  }

  .login-visual .m-img,
  .register-visual .m-img {
    width: 90px;
    height: 90px;
    margin: 2px 1px;
  }

  .login-visual .m-img .info,
  .register-visual .m-img .info {
    padding-left: 6px;
    padding-right: 6px;
  }

  .login-visual .m-img .info .type,
  .register-visual .m-img .info .type {
    font-size: 7px;
    margin-bottom: 0;
  }

  .login-visual .m-img .info .type::after,
  .register-visual .m-img .info .type::after {
    height: 2px;
    bottom: 0;
  }

  .login-visual .m-img .info .name,
  .register-visual .m-img .info .name {
    font-size: 10px;
  }

  .login-visual .m-img .info .des,
  .register-visual .m-img .info .des,
  .login-visual .m-img .info .mes,
  .register-visual .m-img .info .mes {
    font-size: 6px;
    line-height: 8px;
  }

  .login-visual .m-img .info .line,
  .register-visual .m-img .info .line {
    width: 6px;
    margin: 1px 0;
  }

  .login-brand,
  .register-brand {
    font-size: 24px;
  }

  .login-card,
  .register-card {
    padding: 20px 14px 16px;
  }

  .login-card__title,
  .register-card__title {
    font-size: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .skip-link,
  .login-form__input,
  .register-form__input,
  .login-form__submit,
  .register-form__submit,
  .login-form__link,
  .register-form__link,
  .login-card__switch a,
  .register-card__switch a {
    transition: none;
  }
}