/* LEGACY production — Login, Member Hub and Account Center */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600&family=Noto+Sans+Thai:wght@300;400;500;600&display=swap");
.legacy-home {
  --legacy-account-obsidian: #0d0d0f;
  --legacy-account-panel: #151312;
  --legacy-account-panel-soft: #1b1815;
  --legacy-account-stroke: rgba(207, 171, 102, .22);
  --legacy-account-gold: #c8a15b;
  --legacy-account-gold-bright: #e1c27f;
  --legacy-account-ivory: #f4efe6;
  --legacy-account-muted: #aaa094;
  --legacy-account-crimson: #9f1f2b;
  --legacy-account-crimson-bright: #bb2936;
  --legacy-account-success: #57d982;
  --legacy-account-danger: #ef737b;
}

.legacy-home #legacy-login .modal-dialog {
  width: min(520px, calc(100% - 32px));
  margin: min(8vh, 72px) auto 24px;
}

.legacy-home #legacy-login .modal-content,
.legacy-home .legacy-account-modal .modal-content {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--legacy-account-stroke);
  border-radius: 20px;
  background:
    radial-gradient(circle at 15% 0%, rgba(200, 161, 91, .1), transparent 34%),
    linear-gradient(145deg, rgba(25, 22, 19, .99), rgba(11, 11, 13, .995));
  color: var(--legacy-account-ivory);
  box-shadow: 0 30px 85px rgba(0, 0, 0, .64), inset 0 1px rgba(255, 255, 255, .035);
}

.legacy-home #legacy-login .modal-content { padding: 0; }

.legacy-home #legacy-login .modal-content::before,
.legacy-home .legacy-account-modal .modal-content::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 40px;
  right: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(225, 194, 127, .75), transparent);
}

.legacy-home #legacy-login .modal-body {
  position: relative;
  z-index: 1;
  padding: 38px 40px 34px;
}

.legacy-home #legacy-login .legacy-member-modal__close,
.legacy-home .legacy-account-modal__close {
  position: absolute;
  z-index: 5;
  top: 15px;
  right: 16px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  background: rgba(255, 255, 255, .035);
  color: #d6d0c8;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

.legacy-home #legacy-login .legacy-member-modal__close:hover,
.legacy-home .legacy-account-modal__close:hover {
  border-color: rgba(225, 194, 127, .4);
  background: rgba(200, 161, 91, .09);
  color: #fff;
  transform: rotate(4deg);
}

.legacy-home #legacy-login .legacy-member-modal__eyebrow,
.legacy-home .legacy-account-eyebrow {
  display: block;
  color: var(--legacy-account-gold);
  font: 600 10px/1.2 "Montserrat", "Segoe UI", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.legacy-login-brand {
  margin: -4px 52px 28px 0;
  display: flex;
  align-items: center;
  gap: 13px;
}

.legacy-login-brand img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .45));
}

.legacy-login-brand > span {
  display: block;
  color: var(--legacy-account-ivory);
  font: 600 15px/1.2 "Montserrat", "Segoe UI", sans-serif;
  letter-spacing: .04em;
}

.legacy-login-brand small {
  margin-top: 4px;
  display: block;
  color: #8e8478;
  font-size: 8px;
  letter-spacing: .17em;
}

.legacy-home #legacy-login h2 {
  margin: 9px 48px 5px 0;
  color: var(--legacy-account-ivory);
  font: 400 32px/1.18 "Noto Sans Thai", "Leelawadee UI", "Segoe UI", sans-serif;
  letter-spacing: -.025em;
}

.legacy-home #legacy-login h2 small {
  margin-top: 5px;
  display: block;
  color: #948a7e;
  font: 500 10px/1.2 "Montserrat", "Segoe UI", sans-serif;
  letter-spacing: .16em;
}

.legacy-login-description {
  margin: 0 0 25px;
  color: var(--legacy-account-muted);
  font: 400 14px/1.65 "Noto Sans Thai", "Leelawadee UI", sans-serif;
}

.legacy-login-feedback {
  min-height: 50px;
  margin: 0 0 18px;
  padding: 12px 14px;
  display: none;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid rgba(239, 115, 123, .32);
  border-radius: 11px;
  background: rgba(159, 31, 43, .12);
  color: #f2b7bb;
  font: 400 13px/1.55 "Noto Sans Thai", "Leelawadee UI", sans-serif;
}

.legacy-login-feedback.is-visible {
  display: flex;
  animation: legacy-account-feedback-in .24s ease both;
}

.legacy-login-feedback > i { margin-top: 3px; color: var(--legacy-account-danger); }

@keyframes legacy-account-feedback-in {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.legacy-home #legacy-login .legacy-login-field { margin-top: 17px; }

.legacy-home #legacy-login .legacy-login-field > label {
  margin: 0 0 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: #ded8d0;
  font: 500 13px/1.3 "Montserrat", "Noto Sans Thai", sans-serif;
}

.legacy-home #legacy-login .legacy-login-field > label small {
  color: #83796e;
  font: 400 11px/1.3 "Noto Sans Thai", "Leelawadee UI", sans-serif;
}

.legacy-login-control { position: relative; }

.legacy-login-control > i {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 17px;
  color: #81776b;
  font-size: 14px;
  transform: translateY(-50%);
  pointer-events: none;
}

.legacy-home #legacy-login .legacy-login-control input {
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 0 52px 0 44px;
  border: 1px solid rgba(255, 255, 255, .105);
  border-radius: 11px;
  outline: 0;
  background: rgba(255, 255, 255, .038);
  color: #fff;
  font: 500 15px/1 "Montserrat", "Segoe UI", sans-serif;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.legacy-home #legacy-login .legacy-login-control input:hover { border-color: rgba(255, 255, 255, .17); }

.legacy-home #legacy-login .legacy-login-control input:focus {
  border-color: rgba(225, 194, 127, .68);
  background: rgba(255, 255, 255, .052);
  box-shadow: 0 0 0 3px rgba(200, 161, 91, .11), inset 0 1px 2px rgba(0, 0, 0, .2);
}

.legacy-home #legacy-login .legacy-login-field.is-error .legacy-login-control input {
  border-color: rgba(239, 115, 123, .65);
  box-shadow: 0 0 0 3px rgba(159, 31, 43, .1);
}

.legacy-login-field > p {
  min-height: 17px;
  margin: 6px 2px 0;
  color: var(--legacy-account-danger);
  font: 400 11px/1.45 "Noto Sans Thai", "Leelawadee UI", sans-serif;
}

.legacy-password-toggle {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 7px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #9b9186;
  cursor: pointer;
  transform: translateY(-50%);
}

.legacy-password-toggle:hover { color: var(--legacy-account-gold-bright); background: rgba(200, 161, 91, .08); }

.legacy-home #legacy-login .legacy-login-submit {
  width: 100%;
  min-height: 58px;
  margin-top: 17px;
  padding: 8px 18px 8px 21px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border: 1px solid rgba(230, 93, 105, .54);
  border-radius: 11px;
  background: linear-gradient(135deg, var(--legacy-account-crimson-bright), #821720);
  color: #fff;
  text-align: left;
  box-shadow: 0 12px 30px rgba(102, 11, 22, .28), inset 0 1px rgba(255, 255, 255, .15);
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.legacy-home #legacy-login .legacy-login-submit:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(102, 11, 22, .36), inset 0 1px rgba(255, 255, 255, .18);
}

.legacy-login-submit span:first-child b,
.legacy-login-submit span:first-child small { display: block; }
.legacy-login-submit span:first-child b { font: 500 15px/1.3 "Noto Sans Thai", "Leelawadee UI", sans-serif; }
.legacy-login-submit span:first-child small { margin-top: 2px; opacity: .75; font: 600 8px/1.2 "Montserrat", sans-serif; letter-spacing: .15em; }
.legacy-login-submit > i { font-size: 14px; transition: transform .2s ease; }
.legacy-login-submit:hover > i { transform: translateX(3px); }

.legacy-login-spinner {
  width: 20px;
  height: 20px;
  display: none;
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: legacy-account-spin .7s linear infinite;
}

.legacy-login-form.is-loading .legacy-login-submit { cursor: wait; transform: none; filter: saturate(.75); }
.legacy-login-form.is-loading .legacy-login-submit > i { display: none; }
.legacy-login-form.is-loading .legacy-login-spinner { display: block; }
.legacy-login-form.is-loading input,
.legacy-login-form.is-loading .legacy-password-toggle { pointer-events: none; }
@keyframes legacy-account-spin { to { transform: rotate(360deg); } }

.legacy-login-assistance {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .065);
  color: #887f74;
  text-align: center;
  font: 400 11px/1.55 "Noto Sans Thai", "Leelawadee UI", sans-serif;
}

.legacy-login-assistance p { margin: 0; }
.legacy-login-assistance p + p { margin-top: 8px; }
.legacy-login-assistance i { margin-right: 5px; color: var(--legacy-account-gold); }
.legacy-login-assistance a { color: var(--legacy-account-gold-bright); }
.legacy-login-assistance span { margin: 0 8px; opacity: .45; }

.legacy-login-success {
  min-height: 315px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}
.legacy-login-success[hidden] { display: none; }
.legacy-login-success > span {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(87, 217, 130, .4);
  border-radius: 50%;
  background: rgba(87, 217, 130, .09);
  color: var(--legacy-account-success);
  font-size: 26px;
  box-shadow: 0 0 0 12px rgba(87, 217, 130, .035), 0 14px 35px rgba(0, 0, 0, .3);
}
.legacy-login-success h3 { margin: 25px 0 7px; color: var(--legacy-account-ivory); font: 400 25px/1.3 "Noto Sans Thai", sans-serif; }
.legacy-login-success p { margin: 0; color: var(--legacy-account-muted); font-size: 13px; }

/* Authenticated member hub */
.legacy-home #legacy-login.is-authenticated .modal-dialog { width: min(570px, calc(100% - 32px)); }
.legacy-account-hub__identity { margin: 0 46px 25px 0; display: flex; align-items: center; gap: 17px; }
.legacy-account-hub__avatar {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(225, 194, 127, .42);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #b92e39, #65121a 66%);
  color: #fff6e7;
  font: 600 24px/1 "Cinzel", "Times New Roman", serif;
  box-shadow: 0 10px 26px rgba(84, 6, 16, .32), inset 0 1px rgba(255, 255, 255, .2);
}
.legacy-home #legacy-login .legacy-account-hub h2 { margin: 6px 0 2px; font-size: 24px; }
.legacy-account-hub__identity p { margin: 0; color: #8f877e; font-size: 9px; letter-spacing: .1em; }
.legacy-account-hub__identity p i { width: 7px; height: 7px; margin-right: 6px; display: inline-block; border-radius: 50%; background: var(--legacy-account-success); box-shadow: 0 0 10px rgba(87, 217, 130, .65); }

.legacy-home #legacy-login .legacy-member-modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.legacy-home #legacy-login .legacy-member-modal__actions button {
  min-height: 76px;
  padding: 12px 13px;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 11px;
  background: rgba(255, 255, 255, .026);
  color: #e8e2d9;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.legacy-home #legacy-login .legacy-member-modal__actions button:hover {
  border-color: rgba(225, 194, 127, .34);
  background: rgba(200, 161, 91, .07);
  transform: translateY(-2px);
}
.legacy-home #legacy-login .legacy-member-modal__actions .legacy-member-modal__action--primary { grid-column: 1 / -1; }
.legacy-home #legacy-login .legacy-member-modal__actions button > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(200, 161, 91, .26);
  border-radius: 50%;
  color: var(--legacy-account-gold);
  font-size: 13px;
}
.legacy-home #legacy-login .legacy-member-modal__actions b { min-width: 0; font: 400 13px/1.3 "Noto Sans Thai", sans-serif; }
.legacy-home #legacy-login .legacy-member-modal__actions small { margin-top: 3px; display: block; color: #82786c; font: 600 7px/1.2 "Montserrat", sans-serif; letter-spacing: .12em; }
.legacy-home #legacy-login .legacy-member-modal__actions button > i { color: #746b61; font-size: 9px; }
.legacy-account-hub__footer { margin-top: 18px; padding-top: 16px; display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(255, 255, 255, .065); }
.legacy-account-hub__footer a { min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(255, 255, 255, .075); border-radius: 9px; color: #a99f94; font: 400 11px/1 "Noto Sans Thai", sans-serif; }
.legacy-account-hub__footer a:hover { border-color: rgba(200, 161, 91, .3); color: var(--legacy-account-gold-bright); }
.legacy-account-hub__footer .legacy-member-modal__logout { margin: 0; border-color: rgba(239, 115, 123, .2); color: #d98a90; background: rgba(159, 31, 43, .05); }

/* Account Center */
.legacy-home .legacy-account-modal .modal-dialog { width: min(1080px, calc(100% - 32px)); margin: min(5vh, 48px) auto 28px; }
.legacy-home .legacy-account-modal .modal-body { padding: 0; }
.legacy-account-center { position: relative; z-index: 1; }
.legacy-account-center__header { padding: 30px 72px 26px 32px; display: flex; align-items: center; gap: 17px; border-bottom: 1px solid rgba(255, 255, 255, .07); background: rgba(0, 0, 0, .1); }
.legacy-account-center__seal { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(200, 161, 91, .35); border-radius: 15px; background: rgba(200, 161, 91, .07); color: var(--legacy-account-gold-bright); font-size: 21px; }
.legacy-account-center__header h2 { margin: 4px 0 0; color: var(--legacy-account-ivory); font: 400 25px/1.25 "Noto Sans Thai", sans-serif; }
.legacy-account-center__header h2 small { margin-left: 8px; color: #857b70; font: 600 9px/1.2 "Montserrat", sans-serif; letter-spacing: .14em; }
.legacy-account-center__status { margin-left: auto; display: flex; align-items: center; gap: 8px; color: #9f968c; font: 600 9px/1.2 "Montserrat", sans-serif; letter-spacing: .1em; }
.legacy-account-center__status i { width: 8px; height: 8px; border-radius: 50%; background: var(--legacy-account-success); box-shadow: 0 0 12px rgba(87, 217, 130, .65); }

.legacy-account-welcome { margin: 24px 32px 0; padding: 18px 20px; display: none; grid-template-columns: 40px 1fr; align-items: center; gap: 14px; border: 1px solid rgba(87, 217, 130, .22); border-radius: 12px; background: linear-gradient(90deg, rgba(87, 217, 130, .1), rgba(200, 161, 91, .04)); }
.legacy-account-welcome.is-visible { display: grid; animation: legacy-account-feedback-in .35s ease both; }
.legacy-account-welcome > i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(87, 217, 130, .1); color: var(--legacy-account-success); }
.legacy-account-welcome strong { display: block; color: #e9eee7; font: 500 14px/1.4 "Noto Sans Thai", sans-serif; }
.legacy-account-welcome span { color: #968f86; font-size: 11px; }

.legacy-account-center__body { padding: 25px 32px 31px; }
.legacy-account-profile { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 18px; }
.legacy-account-identity-card,
.legacy-account-session-card,
.legacy-account-roster { border: 1px solid rgba(255, 255, 255, .07); border-radius: 13px; background: rgba(255, 255, 255, .022); }
.legacy-account-identity-card { padding: 20px; display: flex; align-items: center; gap: 17px; }
.legacy-account-identity-card__avatar { width: 58px; height: 58px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(225, 194, 127, .4); border-radius: 50%; background: linear-gradient(145deg, #ac2632, #691119); color: #fff; font: 600 23px/1 "Cinzel", serif; }
.legacy-account-identity-card h3 { margin: 0; color: #f2ede6; font: 500 18px/1.3 "Montserrat", sans-serif; }
.legacy-account-identity-card p { margin: 5px 0 0; color: #8f867b; font-size: 11px; }
.legacy-account-identity-card__state { margin-left: auto; padding: 7px 10px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; color: #aaa198; background: rgba(255, 255, 255, .035); font-size: 10px; }
.legacy-account-identity-card__state.is-active { border-color: rgba(87, 217, 130, .2); color: var(--legacy-account-success); background: rgba(87, 217, 130, .06); }
.legacy-account-identity-card__state.is-disabled { border-color: rgba(239, 115, 123, .24); color: var(--legacy-account-danger); background: rgba(159, 31, 43, .07); }
.legacy-account-session-card { padding: 17px 19px; display: grid; align-content: center; gap: 9px; }
.legacy-account-session-card p { margin: 0; display: flex; justify-content: space-between; gap: 16px; color: #81786e; font-size: 10px; }
.legacy-account-session-card b { color: #d7d0c7; font-weight: 400; text-align: right; }

.legacy-account-metrics { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.legacy-account-metric { min-width: 0; padding: 17px; border: 1px solid rgba(255, 255, 255, .068); border-radius: 12px; background: linear-gradient(145deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .035)); }
.legacy-account-metric > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #887e73; font: 600 8px/1.2 "Montserrat", sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.legacy-account-metric > span i { color: var(--legacy-account-gold); font-size: 13px; }
.legacy-account-metric strong { margin-top: 12px; display: block; overflow: hidden; color: var(--legacy-account-gold-bright); font: 500 24px/1 "Montserrat", sans-serif; text-overflow: ellipsis; }
.legacy-account-metric small { margin-top: 6px; display: block; color: #736a60; font-size: 9px; }

.legacy-account-roster { margin-top: 18px; overflow: hidden; }
.legacy-account-roster__header { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(255, 255, 255, .065); }
.legacy-account-roster__header h3 { margin: 4px 0 0; color: #eee8df; font: 400 18px/1.3 "Noto Sans Thai", sans-serif; }
.legacy-account-roster__header span { color: #796f64; font-size: 10px; }
.legacy-account-table-wrap { overflow-x: auto; }
.legacy-account-table { width: 100%; border-collapse: collapse; }
.legacy-account-table th { padding: 12px 18px; border-bottom: 1px solid rgba(255, 255, 255, .055); color: #7f766c; font: 600 8px/1.2 "Montserrat", sans-serif; letter-spacing: .1em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.legacy-account-table td { padding: 13px 18px; border-bottom: 1px solid rgba(255, 255, 255, .04); color: #aaa197; font-size: 11px; white-space: nowrap; }
.legacy-account-table tbody tr:last-child td { border-bottom: 0; }
.legacy-account-table tbody tr:hover { background: rgba(200, 161, 91, .035); }
.legacy-account-table td:first-child { color: #ece6dd; font-weight: 500; }
.legacy-account-empty { min-height: 118px; padding: 22px; display: grid; place-items: center; color: #857c71; text-align: center; font-size: 12px; }
.legacy-account-empty i { margin-bottom: 10px; display: block; color: var(--legacy-account-gold); font-size: 20px; }

.legacy-account-center__footer { padding: 17px 32px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid rgba(255, 255, 255, .065); background: rgba(0, 0, 0, .13); }
.legacy-account-center__footer nav { display: flex; flex-wrap: wrap; gap: 8px; }
.legacy-account-center__footer button,
.legacy-account-center__footer a { min-height: 38px; padding: 0 13px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255, 255, 255, .075); border-radius: 8px; background: rgba(255, 255, 255, .025); color: #a69c91; font: 400 10px/1 "Noto Sans Thai", sans-serif; cursor: pointer; }
.legacy-account-center__footer button:hover,
.legacy-account-center__footer a:hover { border-color: rgba(200, 161, 91, .3); color: var(--legacy-account-gold-bright); }
.legacy-account-center__footer > a { border-color: rgba(239, 115, 123, .18); color: #d68b91; }

/* Change Email / Password keep legacy backend, receive the same production shell. */
.legacy-home .legacy-account-modal--form .modal-dialog { width: min(660px, calc(100% - 32px)); }
.legacy-home .legacy-account-modal--form .modal-header {
  position: relative;
  z-index: 1;
  min-height: 92px;
  padding: 28px 72px 22px 30px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: rgba(0, 0, 0, .1);
}
.legacy-home .legacy-account-modal--form .modal-header .close {
  position: absolute;
  top: 16px;
  right: 17px;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  background: rgba(255, 255, 255, .035);
  color: #d6d0c8;
  font-size: 24px;
  opacity: 1;
  text-shadow: none;
}
.legacy-home .legacy-account-modal--form .modal-title {
  color: var(--legacy-account-ivory);
  font: 400 21px/1.35 "Noto Sans Thai", "Leelawadee UI", sans-serif;
}
.legacy-home .legacy-account-modal--form .modal-title i { margin-right: 9px; color: var(--legacy-account-gold); }
.legacy-home .legacy-account-modal--form .modal-body { position: relative; z-index: 1; padding: 25px 30px 30px; }
.legacy-home .legacy-account-modal--form .panel2,
.legacy-home .legacy-account-modal--form .panel-modal,
.legacy-home .legacy-account-modal--form .panel-body { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.legacy-home .legacy-account-modal--form .form-group { margin-bottom: 16px; }
.legacy-home .legacy-account-modal--form label-modal,
.legacy-home .legacy-account-modal--form .form-group > label { margin-bottom: 7px; display: block; color: #d4cdc4; font: 400 12px/1.4 "Noto Sans Thai", sans-serif; }
.legacy-home .legacy-account-modal--form .form-control {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  outline: 0;
  background: rgba(255, 255, 255, .035);
  color: #fff;
  font-size: 14px;
  box-shadow: none;
}
.legacy-home .legacy-account-modal--form .form-control:focus { border-color: rgba(225, 194, 127, .62); box-shadow: 0 0 0 3px rgba(200, 161, 91, .1); }
.legacy-home .legacy-account-modal--form .form-control[disabled] { color: #8b8176; opacity: .8; }
.legacy-home .legacy-account-modal--form .help-block { color: #81776c; font-size: 10px; line-height: 1.55; }
.legacy-home .legacy-account-modal--form .btn-save { min-height: 46px; padding: 0 20px; border: 1px solid rgba(225, 194, 127, .34); border-radius: 9px; background: linear-gradient(135deg, #a92330, #78141d); color: #fff; font: 400 12px/1 "Noto Sans Thai", sans-serif; box-shadow: 0 10px 24px rgba(91, 9, 18, .24); }
.legacy-account-form-header { padding: 29px 70px 23px 30px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.legacy-account-form-header h2 { margin: 5px 0 0; color: var(--legacy-account-ivory); font: 400 23px/1.3 "Noto Sans Thai", sans-serif; }
.legacy-account-form-body { padding: 25px 30px 30px; }
.legacy-account-form-body .eddga-alert { margin-bottom: 17px; }
.legacy-account-form { display: grid; gap: 16px; }
.legacy-account-form__field label { margin-bottom: 7px; display: flex; justify-content: space-between; color: #d4cdc4; font: 400 12px/1.4 "Noto Sans Thai", sans-serif; }
.legacy-account-form__field label small { color: #7d7368; font-size: 9px; }
.legacy-account-form__control { position: relative; }
.legacy-account-form__control input { width: 100%; min-height: 52px; padding: 0 49px 0 14px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; outline: 0; background: rgba(255, 255, 255, .035); color: #fff; font-size: 14px; }
.legacy-account-form__control input:focus { border-color: rgba(225, 194, 127, .62); box-shadow: 0 0 0 3px rgba(200, 161, 91, .1); }
.legacy-account-form__control input:disabled { color: #8b8176; opacity: .8; }
.legacy-account-form__hint { margin: 6px 1px 0; color: #80766b; font-size: 10px; line-height: 1.55; }
.legacy-account-form__actions { margin-top: 5px; display: flex; justify-content: flex-end; gap: 9px; }
.legacy-account-form__actions button { min-height: 44px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 9px; background: rgba(255, 255, 255, .035); color: #b7aea4; font: 400 11px/1 "Noto Sans Thai", sans-serif; cursor: pointer; }
.legacy-account-form__actions button[type="submit"] { min-width: 160px; border-color: rgba(225, 194, 127, .35); background: linear-gradient(135deg, #a92330, #78141d); color: #fff; }

#legacy-login :focus-visible,
.legacy-account-modal :focus-visible { outline: 2px solid var(--legacy-account-gold-bright); outline-offset: 3px; }

@media (max-width: 760px) {
  .legacy-home #legacy-login .modal-dialog,
  .legacy-home .legacy-account-modal .modal-dialog { margin: 16px auto; }
  .legacy-home #legacy-login .modal-body { padding: 31px 22px 25px; }
  .legacy-home #legacy-login h2 { font-size: 28px; }
  .legacy-login-brand { margin-bottom: 23px; }
  .legacy-home #legacy-login .legacy-member-modal__actions { grid-template-columns: 1fr; }
  .legacy-account-hub__identity { align-items: flex-start; }
  .legacy-account-hub__footer { flex-direction: column; }
  .legacy-account-hub__footer a { width: 100%; }
  .legacy-account-center__header { padding: 25px 64px 22px 22px; align-items: flex-start; }
  .legacy-account-center__status { display: none; }
  .legacy-account-center__header h2 small { margin: 4px 0 0; display: block; }
  .legacy-account-welcome { margin: 18px 20px 0; }
  .legacy-account-center__body { padding: 20px; }
  .legacy-account-profile { grid-template-columns: 1fr; }
  .legacy-account-metrics { grid-template-columns: 1fr 1fr; }
  .legacy-account-center__footer { padding: 16px 20px; align-items: stretch; flex-direction: column; }
  .legacy-account-center__footer nav { display: grid; grid-template-columns: 1fr 1fr; }
  .legacy-account-center__footer button,
  .legacy-account-center__footer a { justify-content: center; }
  .legacy-account-form-header { padding-inline: 22px 60px; }
  .legacy-account-form-body { padding: 22px; }
}

@media (max-width: 440px) {
  .legacy-home #legacy-login .modal-dialog,
  .legacy-home .legacy-account-modal .modal-dialog { width: calc(100% - 20px); }
  .legacy-home #legacy-login .modal-content,
  .legacy-home .legacy-account-modal .modal-content { border-radius: 16px; }
  .legacy-home #legacy-login .legacy-login-control input { font-size: 16px; }
  .legacy-account-hub__avatar { width: 54px; height: 54px; }
  .legacy-account-identity-card { align-items: flex-start; }
  .legacy-account-identity-card__state { display: none; }
  .legacy-account-metrics { grid-template-columns: 1fr; }
  .legacy-account-center__footer nav { grid-template-columns: 1fr; }
  .legacy-account-form__actions { flex-direction: column-reverse; }
  .legacy-account-form__actions button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  #legacy-login *,
  .legacy-account-modal * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}