:root {
  --login-dark: #083b52;
  --login-green: #079b96;
  --login-green-light: #2bc4bb;
  --login-text: #173b46;
  --login-muted: #69858b;
  --login-border: #d9e9e9;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }

body.login-page {
  margin: 0;
  font-family: "Kanit", sans-serif !important;
  color: var(--login-text);
  background: linear-gradient(135deg, #e8f7f8 0%, #f6fbfc 48%, #e2f3f1 100%);
}

.login-shell {
  display: grid;
  grid-template-columns: minmax(420px, 1.08fr) minmax(420px, .92fr);
  width: min(1380px, calc(100% - 48px));
  min-height: min(820px, calc(100vh - 48px));
  margin: 24px auto;
  overflow: hidden;
  border: 1px solid rgba(15, 116, 125, .13);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(18, 91, 105, .16);
}

.login-intro {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 42px clamp(40px, 5vw, 76px);
  color: #fff;
  background: linear-gradient(145deg, #07384f 0%, #086d79 52%, #08a69d 100%);
}

.intro-pattern::before, .intro-pattern::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
}
.intro-pattern::before { width: 560px; height: 560px; right: -290px; top: -180px; }
.intro-pattern::after { width: 310px; height: 310px; right: -60px; bottom: -160px; background: rgba(112, 232, 218, .16); }

.login-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 15px; color: rgba(255,255,255,.86); font-size: 14px; line-height: 1.55; }
.login-brand img { width: 64px; height: 64px; object-fit: contain; padding: 5px; border-radius: 16px; background: #fff; }
.intro-content { position: relative; z-index: 1; margin: auto 0; }
.intro-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; color: #b9f5ee; font-size: 13px; border: 1px solid rgba(185,245,238,.28); border-radius: 99px; background: rgba(255,255,255,.08); }
.intro-content h1 { margin: 22px 0 17px; font-size: clamp(40px, 5vw, 64px); font-weight: 700; line-height: 1.18; letter-spacing: -1px; }
.intro-content > p { max-width: 620px; margin: 0; color: rgba(255,255,255,.68); font-size: 16px; font-weight: 300; line-height: 1.8; }
.intro-features { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; }
.intro-features span { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.82); font-size: 13px; }
.intro-features i { color: #74eadb; }
.intro-footer { position: relative; z-index: 1; color: rgba(255,255,255,.42); font-size: 12px; }

.login-panel { display: flex; flex-direction: column; justify-content: center; padding: 42px clamp(42px, 6vw, 90px); background: #fff; }
.login-form-wrap { width: 100%; max-width: 470px; margin: auto; }
.login-mobile-brand { display: none; }
.login-eyebrow { color: var(--login-green); font-size: 14px; font-weight: 600; }
.login-panel h2 { margin: 5px 0 8px; font-size: 36px; font-weight: 700; }
.login-description { margin: 0 0 32px; color: var(--login-muted); font-size: 14px; }
.login-form .form-label { margin-bottom: 8px; font-size: 14px; font-weight: 500; }
.login-input-group { position: relative; display: flex; align-items: center; }
.login-input-group > i { position: absolute; left: 16px; z-index: 2; color: #6d898d; font-size: 18px; }
.login-input-group .form-control { height: 54px; padding: 12px 48px; border: 1px solid var(--login-border); border-radius: 12px; font-family: "Kanit", sans-serif; font-size: 15px; background: #f9fdfd; box-shadow: none; }
.login-input-group .form-control:focus { border-color: #31bdb5; background: #fff; box-shadow: 0 0 0 4px rgba(7,155,150,.11); }
.password-toggle { position: absolute; right: 8px; display: grid; place-items: center; width: 38px; height: 38px; color: #69858b; border: 0; border-radius: 9px; background: transparent; }
.password-toggle:hover { color: var(--login-green); background: #e7f7f6; }
.login-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 54px; padding: 0 20px; color: #fff !important; border: 0; border-radius: 12px; font-family: "Kanit", sans-serif; font-size: 15px; font-weight: 500; background: linear-gradient(110deg, #087f8d, #0bb5a8); box-shadow: 0 9px 22px rgba(5,139,140,.25); transition: transform .2s, box-shadow .2s; }
.login-submit:hover { background: linear-gradient(110deg, #076b79, #079b96); box-shadow: 0 12px 28px rgba(5,139,140,.32); transform: translateY(-2px); }
.login-help { display: flex; align-items: center; gap: 13px; margin-top: 32px; padding: 15px; border: 1px solid #dfeeed; border-radius: 13px; background: #f7fbfb; }
.help-icon { display: grid; place-items: center; width: 43px; height: 43px; flex: 0 0 43px; color: var(--login-green); font-size: 19px; border-radius: 11px; background: #e2f5f3; }
.login-help > span:last-child { display: flex; flex-direction: column; }
.login-help small { color: var(--login-muted); font-size: 11px; }
.login-help strong { font-size: 13px; font-weight: 600; }
.login-copyright { max-width: 470px; margin: 30px auto 0; color: #91a5a8; font-size: 10px; line-height: 1.6; text-align: center; }

@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; min-height: calc(100vh - 24px); margin: 12px auto; width: calc(100% - 24px); }
  .login-intro { display: none; }
  .login-panel { padding: 34px clamp(22px, 8vw, 70px); }
  .login-mobile-brand { display: block; margin-bottom: 25px; }
  .login-mobile-brand img { width: 76px; height: 76px; object-fit: contain; }
  .login-panel h2 { font-size: 31px; }
}

@media (max-width: 480px) {
  .login-shell { width: 100%; min-height: 100vh; margin: 0; border: 0; border-radius: 0; }
  .login-panel { padding: 28px 20px; }
  .login-description { margin-bottom: 26px; }
}