.card{
    margin: 1rem auto;
}

.error-message {
    text-align: center;
    color: #772b35;
    background-color: #fadddd;
    border-color: #f8cfcf;
  }

.register-page { padding: 56px 24px; background: #f7f4f8; color: #302338; font-family: 'Open Sans', sans-serif; }
.register-shell { display: grid; grid-template-columns: 0.85fr 1.15fr; max-width: 1040px; margin: 0 auto; overflow: hidden; background: #fff; border: 1px solid #e9e1ec; border-radius: 24px; box-shadow: 0 16px 48px rgba(58,25,66,.08); }
.register-intro { display: flex; flex-direction: column; justify-content: space-between; padding: 40px; color: #fff; background: radial-gradient(ellipse at bottom, #834375, transparent 70%), #48204e; }
.register-brand { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 700; margin-bottom: 48px; }
.register-brand i { color: #edcd8e; font-size: 1.3rem; }
.register-kicker { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .14em; color: #79416c; margin-bottom: 12px; }
.register-intro .register-kicker { color: #edcd8e; }
.register-intro h2 { font-family: 'Montserrat', sans-serif; font-size: clamp(1.9rem,3vw,2.65rem); font-weight: 700; line-height: 1.2; letter-spacing: -.04em; margin-bottom: 18px; }
.register-intro p { color: #e6d7e6; line-height: 1.7; font-size: .9rem; }
.register-image { width: 100%; max-width: 245px; height: 220px; object-fit: contain; align-self: center; margin: 20px 0; filter: drop-shadow(0 16px 20px rgba(0,0,0,.18)); }
.register-intro .register-note { font-size: .75rem; margin: 0; text-align: center; }
.register-content { padding: 44px 48px; }
.register-content h1 { font-family: 'Montserrat', sans-serif; font-size: 1.85rem; font-weight: 700; letter-spacing: -.04em; margin-bottom: 10px; }
.register-content header p { font-size: .9rem; color: #776b7c; margin-bottom: 26px; }
.register-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.register-field { min-width: 0; margin-bottom: 18px; }
.register-field label { display: block; font-size: .8rem; font-weight: 700; margin-bottom: 8px; }
.register-field small { font-size: .7rem; font-weight: 400; color: #776b7c; }
.register-field .form-control { min-height: 48px; border: 1px solid #ded5e2; border-radius: 9px; padding: 11px 14px; font-size: .85rem; color: #302338; background: #fdfcfe; }
.register-field .form-control::placeholder { color: #887d8e; }
.register-field .form-control:focus { border-color: #8d5882; background: #fff; box-shadow: 0 0 0 3px rgba(107,45,92,.12); }
.register-field .form-control[aria-invalid="true"] { border-color: #b63c4b; }
.register-help { font-size: .72rem; color: #776b7c; margin: 7px 0 18px; }
.register-field .register-help { margin-bottom: 0; }
.register-error { font-size: .78rem; color: #a3293b; margin: 7px 0 0; }
.register-alert { padding: 12px 14px; margin-bottom: 18px; border: 1px solid #edc6cc; border-radius: 9px; background: #fff2f3; color: #a3293b; font-size: .85rem; }
.register-submit { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 50px; margin-top: 24px; border-radius: 9px; background: #6b2d5c; color: #fff; font-size: .9rem; font-weight: 700; }
.register-submit:hover, .register-submit:focus-visible, .register-submit:active { background: #4a1d4d !important; color: #fff !important; }
.register-submit:focus-visible, .register-login a:focus-visible { outline: 3px solid #ad7a9f; outline-offset: 3px; }
.register-login { border-top: 1px solid #eee7f0; padding-top: 22px; margin: 24px 0 0; text-align: center; color: #776b7c; font-size: .82rem; }
.register-login a { color: #6b2d5c; font-weight: 700; text-underline-offset: 3px; margin-left: 4px; }


.login-content { display: flex; flex-direction: column; justify-content: center; }
.password-modal-content { border: 1px solid #e9e1ec; border-radius: 20px; color: #302338; font-family: 'Open Sans', sans-serif; box-shadow: 0 16px 48px rgba(58,25,66,.16); }
.login-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 24px; border: 1px solid #e9ddeb; border-radius: 14px; background: #f7f0f7; color: #6b2d5c; font-size: 1.2rem; }

@media (max-width: 767px) {
  .register-page { padding: 24px 16px; }
  .register-shell { grid-template-columns: 1fr; border-radius: 18px; max-width: 540px; }
  .register-intro { padding: 28px; }
  .register-brand { margin-bottom: 24px; }
  .register-intro h2 { font-size: 1.8rem; }
  .register-intro p { margin-bottom: 0; }
  .register-image, .register-note { display: none; }
  .register-content { padding: 28px; }
}
@media (max-width: 399px) {
  .register-name-row { grid-template-columns: 1fr; gap: 0; }
  .register-content, .register-intro { padding: 24px 20px; }
}