:root {
  --forest-950: #082a22;
  --forest-900: #0d382e;
  --forest-800: #124b3c;
  --forest-700: #17624d;
  --forest-100: #e6f0eb;
  --cream: #f6f3eb;
  --paper: #fffefa;
  --gold: #c6a15b;
  --gold-light: #e0c384;
  --ink: #17231f;
  --muted: #6c7772;
  --line: #dfe5e1;
  --danger: #b73b34;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { min-height: 100%; }

body.login-page {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--cream);
  font-family: 'Sarabun', 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(420px, 1.08fr) minmax(520px, .92fr);
  overflow: hidden;
}

.resort-panel {
  position: relative;
  min-height: 100vh;
  padding: clamp(36px, 5vw, 72px);
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 78% 10%, rgba(198, 161, 91, .2), transparent 28%),
    linear-gradient(145deg, var(--forest-800), var(--forest-950));
}

.resort-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .06;
  background-image: radial-gradient(rgba(255,255,255,.9) .6px, transparent .6px);
  background-size: 7px 7px;
}

.resort-panel__glow {
  position: absolute;
  width: 460px;
  height: 460px;
  top: -260px;
  left: -200px;
  border: 1px solid rgba(224, 195, 132, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 90px rgba(224, 195, 132, .025), 0 0 0 180px rgba(224, 195, 132, .02);
}

.resort-panel__content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mobile-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Left panel carries the real resort logo + system name — centered lockup */
.resort-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  margin-top: 0;
}

.resort-brand__logo {
  width: clamp(96px, 9vw, 128px);
  height: clamp(96px, 9vw, 128px);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 26px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(224, 195, 132, .28);
}
.resort-brand__logo.has-logo { padding: 10px; background: #fff; border-color: rgba(255, 255, 255, .82); box-shadow: 0 18px 40px rgba(4, 24, 18, .35); }
.resort-brand__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.resort-brand__logo i { font-size: 44px; color: var(--gold-light); }

.resort-brand__text strong { display: block; font: 700 20px/1.25 'Manrope', sans-serif; letter-spacing: .07em; color: #fff; }
.resort-brand__text span { display: block; margin-top: 7px; font: 500 13px/1 'DM Sans', sans-serif; letter-spacing: .12em; color: var(--gold-light); }

/* Mobile header keeps the compact flag mark */
.mobile-brand { letter-spacing: .16em; }
.resort-brand__mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--forest-950);
  background: var(--gold-light);
  border-radius: 50% 50% 50% 12px;
  transform: rotate(-5deg);
}
.resort-brand__mark i { transform: rotate(5deg); font-size: 17px; }
.mobile-brand strong { display: block; font: 700 17px/1 'Manrope', sans-serif; }
.mobile-brand span { display: block; margin-top: 6px; font: 500 9px/1 'DM Sans', sans-serif; }

.resort-copy { margin-top: clamp(24px, 4vh, 48px); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--gold-light);
  font: 700 10px/1 'Manrope', sans-serif;
  letter-spacing: .2em;
}

.eyebrow::before { content: ''; width: 26px; height: 1px; background: currentColor; }
.eyebrow--green { color: var(--forest-700); }

.resort-copy h1 {
  max-width: 700px;
  margin: 25px 0 20px;
  font-size: clamp(44px, 5vw, 78px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.045em;
}

.resort-copy h1 .hero-title-line {
  display: block;
  color: #fff;
  line-height: 1.48;
  white-space: nowrap;
}

.resort-copy h1 .hero-title-line + .hero-title-line {
  margin-top: .06em;
}

.resort-copy h1 .hero-title-accent { color: var(--gold-light); }
.resort-copy p { margin: 0; color: rgba(255,255,255,.66); font-size: 16px; line-height: 1.8; }

.service-points {
  display: flex;
  gap: clamp(24px, 4vw, 52px);
  margin-top: 46px;
}

.service-points > div { display: flex; align-items: center; gap: 11px; color: #fff; font-size: 13px; line-height: 1.25; }
.service-points i { width: 30px; height: 30px; display: grid; place-items: center; color: var(--gold-light); border: 1px solid rgba(224,195,132,.34); border-radius: 50%; }
.service-points small { color: rgba(255,255,255,.48); font-size: 10px; }

.golf-landscape { position: absolute; inset: auto 0 0; height: 31%; pointer-events: none; }
.sun { position: absolute; width: 135px; height: 135px; right: 12%; bottom: 42%; border: 1px solid rgba(224,195,132,.3); border-radius: 50%; box-shadow: 0 0 50px rgba(224,195,132,.09); }
.mountain { position: absolute; bottom: 18%; width: 75%; height: 72%; background: #104234; clip-path: polygon(0 85%, 13% 62%, 24% 70%, 42% 30%, 54% 56%, 67% 40%, 80% 63%, 100% 35%, 100% 100%, 0 100%); }
.mountain--back { left: 0; opacity: .68; }
.mountain--front { right: -10%; bottom: 3%; background: #0b342a; transform: scaleX(-1); opacity: .95; }
.fairway { position: absolute; left: -5%; right: -5%; bottom: -38%; height: 73%; background: #174f3f; border-radius: 50% 50% 0 0; transform: rotate(-4deg); box-shadow: inset 0 20px 70px rgba(4,31,25,.25); }
.golf-flag { position: absolute; right: 24%; bottom: 28%; width: 1px; height: 77px; background: rgba(255,255,255,.7); }
.golf-flag::before { content: ''; position: absolute; top: 0; left: 1px; width: 34px; height: 20px; background: var(--gold-light); clip-path: polygon(0 0, 100% 20%, 0 100%); }
.golf-flag::after { content: ''; position: absolute; left: -9px; bottom: -3px; width: 20px; height: 5px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; }
.resort-panel__footer { position: absolute; z-index: 4; left: clamp(36px, 5vw, 72px); bottom: 28px; margin: 0; color: rgba(255,255,255,.35); font: 600 8px/1 'Manrope', sans-serif; letter-spacing: .22em; }

.signin-panel {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 44px clamp(28px, 6vw, 88px) 24px;
  background: var(--paper);
}

.mobile-brand { display: none; }
.signin-card { width: min(100%, 450px); }

.signin-header h2 { margin: 16px 0 8px; color: var(--ink); font-size: 36px; font-weight: 700; letter-spacing: -.03em; }
.signin-header p { margin: 0 0 32px; color: var(--muted); font-size: 14px; }

.login-alert { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 22px; padding: 12px 14px; color: #8f2f2a; background: #fbedeb; border: 1px solid #f2ceca; border-radius: 10px; font-size: 13px; }
.login-alert i { margin-top: 2px; }

.signin-form { display: grid; gap: 20px; }
.field-group label { display: block; margin-bottom: 8px; color: #34423c; font-size: 13px; font-weight: 600; }
.field-control { position: relative; }
.field-control > i { position: absolute; top: 50%; left: 16px; z-index: 1; color: #8b9691; transform: translateY(-50%); font-size: 17px; pointer-events: none; }
.field-control input { width: 100%; height: 54px; padding: 0 50px 0 46px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 10px; outline: 0; font-size: 14px; transition: border-color .18s, box-shadow .18s, background .18s; }
.field-control input::placeholder { color: #a0aaa5; }
.field-control input:hover { border-color: #becac4; }
.field-control input:focus { border-color: var(--forest-700); box-shadow: 0 0 0 4px rgba(23,98,77,.1); background: #fff; }
.password-toggle { position: absolute; top: 50%; right: 8px; width: 38px; height: 38px; display: grid; place-items: center; color: #77827d; background: transparent; border: 0; border-radius: 8px; transform: translateY(-50%); cursor: pointer; }
.password-toggle:hover, .password-toggle:focus-visible { color: var(--forest-700); background: var(--forest-100); outline: 0; }

.signin-button { width: 100%; height: 56px; display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; color: #fff; background: var(--forest-800); border: 0; border-radius: 10px; box-shadow: 0 12px 25px rgba(13,56,46,.18); font-weight: 600; cursor: pointer; transition: transform .18s, background .18s, box-shadow .18s; }
.signin-button i { transition: transform .18s; }
.signin-button:hover { background: var(--forest-700); box-shadow: 0 14px 28px rgba(13,56,46,.24); transform: translateY(-1px); }
.signin-button:hover i { transform: translateX(4px); }
.signin-button:active { transform: translateY(0); }
.signin-button:focus-visible { outline: 3px solid rgba(23,98,77,.22); outline-offset: 3px; }

.support-box { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 2px 10px; margin-top: 30px; padding-top: 24px; border-top: 1px solid #e7ebe8; color: var(--muted); }
.support-box > i { width: 34px; height: 34px; grid-row: span 2; display: grid; place-items: center; color: var(--forest-700); background: var(--forest-100); border-radius: 50%; }
.support-box p { margin: 0 0 2px; color: #59645f; font-size: 12px; }
.support-box span { font-size: 11px; }
.support-box strong { color: var(--forest-700); }
.support-links { grid-column: 2; display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 8px; }
.support-links a { color: var(--forest-700); font-size: 11px; text-decoration: none; }
.support-links a:hover { text-decoration: underline; }
.support-links i { margin-right: 5px; }
.support-box small { grid-column: 2; margin-top: 5px; font-size: 10px; }
.signin-footer { position: absolute; left: 0; right: 0; bottom: 24px; margin: 0; padding-top: 0; text-align: center; color: #a1aaa6; font: 500 9px/1 'DM Sans', sans-serif; letter-spacing: .06em; }

@media (max-width: 1050px) {
  .login-shell { grid-template-columns: minmax(350px, .82fr) minmax(480px, 1.18fr); }
  .resort-copy h1 { font-size: 48px; }
  .service-points { gap: 20px; }
  .service-points > div { gap: 7px; font-size: 11px; }
}

@media (max-width: 820px) {
  .login-shell { display: block; overflow: visible; }
  .resort-panel { display: none; }
  .signin-panel { min-height: 100svh; justify-content: flex-start; padding: 28px 24px 20px; background: linear-gradient(180deg, var(--forest-900) 0 155px, var(--paper) 155px); }
  .mobile-brand { width: min(100%, 450px); display: flex; color: #fff; }
  .mobile-brand .resort-brand__mark { width: 39px; height: 39px; }
  .signin-card { margin-top: 34px; padding: 28px 24px 30px; background: var(--paper); border: 1px solid rgba(12,58,47,.06); border-radius: 20px; box-shadow: 0 18px 48px rgba(8,42,34,.12); }
  .signin-header h2 { font-size: 30px; }
  .signin-footer { padding-top: 26px; }
}

@media (max-width: 480px) {
  .signin-panel { padding: 22px 14px 18px; }
  .signin-card { padding: 25px 20px 28px; }
  .support-links { display: grid; gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}