.login-page {
  background:
    radial-gradient(circle at 12% 14%, rgba(20, 132, 111, 0.16), transparent 360px),
    radial-gradient(circle at 88% 86%, rgba(36, 90, 141, 0.1), transparent 380px),
    #eef4f2;
  color: #17231f;
  min-height: 100vh;
}

.login-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(390px, 0.7fr);
  margin: 0 auto;
  max-width: 1180px;
  min-height: calc(100vh - 58px);
  padding: 56px 36px 34px;
}

.login-intro {
  background:
    linear-gradient(140deg, rgba(4, 96, 80, 0.98), rgba(10, 75, 91, 0.95)),
    #075f55;
  border-radius: 24px 0 0 24px;
  box-shadow: 0 30px 70px rgba(18, 48, 43, 0.17);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 640px;
  overflow: hidden;
  padding: 46px 50px;
  position: relative;
}

.login-intro::after {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  content: "";
  height: 420px;
  position: absolute;
  right: -190px;
  top: 70px;
  width: 420px;
}

.login-brand {
  align-items: center;
  display: inline-flex;
  gap: 13px;
  text-decoration: none;
  width: fit-content;
  z-index: 1;
}

.login-brand-mark {
  align-items: center;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.23);
  border-radius: 12px;
  display: inline-flex;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.login-brand-mark svg {
  fill: none;
  height: 28px;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 28px;
}

.login-brand > span:last-child { display: grid; }
.login-brand strong { color: #fff; font-size: 22px; letter-spacing: 0.12em; }
.login-brand small { color: rgba(255, 255, 255, 0.68); font-size: 11px; }

.login-intro-copy { max-width: 590px; position: relative; z-index: 1; }
.login-intro-copy > span { color: #82ddc7; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; }
.login-intro-copy h1 { font-size: clamp(30px, 3.3vw, 46px); line-height: 1.3; margin-top: 16px; }
.login-intro-copy p { color: rgba(255, 255, 255, 0.7); font-size: 15px; line-height: 1.85; margin-top: 20px; max-width: 520px; }

.login-trust { display: flex; flex-wrap: wrap; gap: 24px; position: relative; z-index: 1; }
.login-trust span { align-items: center; color: rgba(255, 255, 255, 0.7); display: inline-flex; font-size: 12px; gap: 7px; }
.login-trust i { background: #68d8b8; border-radius: 50%; height: 6px; width: 6px; }

.login-card {
  align-self: center;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(211, 224, 220, 0.9);
  border-left: 0;
  border-radius: 0 24px 24px 0;
  box-shadow: 0 30px 70px rgba(18, 48, 43, 0.13);
  min-height: 540px;
  padding: 70px 54px 48px;
}

.login-card-head > span { color: #087c67; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; }
.login-card-head h2 { font-size: 29px; margin-top: 8px; }
.login-card-head p { font-size: 13px; margin-top: 8px; }
.login-form { display: grid; gap: 20px; margin-top: 38px; }
.login-form label { display: grid; gap: 8px; }
.login-form label > span { color: #41514c; font-size: 12px; font-weight: 700; }
.login-form input { border-color: #d6e1dd; height: 48px; padding: 0 14px; width: 100%; }
.password-field { position: relative; }
.password-field input { padding-right: 60px; }
.password-field button { background: transparent; border: 0; box-shadow: none; color: #087c67; font-size: 12px; height: 44px; padding: 0 12px; position: absolute; right: 2px; top: 2px; transform: none; }
.login-submit { background: #087c67; border-color: #087c67; color: white; height: 50px; margin-top: 4px; width: 100%; }
.login-submit:hover { background: #056453; color: white; }
.login-message { background: #fff0ee; border: 1px solid #f4c9c4; border-radius: 8px; color: #a62f25; font-size: 12px; padding: 10px 12px; }
.login-help { border-top: 1px solid #e8eeec; font-size: 11px; line-height: 1.6; margin-top: 34px; padding-top: 18px; }
.login-footer { color: #70817b; display: flex; font-size: 11px; justify-content: space-between; margin: 0 auto; max-width: 1180px; padding: 0 36px 24px; }

@media (max-width: 850px) {
  .login-shell { grid-template-columns: 1fr; max-width: 560px; padding: 24px 18px; }
  .login-intro { border-radius: 18px 18px 0 0; min-height: 300px; padding: 28px; }
  .login-intro-copy { margin: 50px 0 40px; }
  .login-intro-copy h1 { font-size: 30px; }
  .login-card { border-left: 1px solid rgba(211, 224, 220, 0.9); border-radius: 0 0 18px 18px; min-height: 0; padding: 38px 28px; }
  .login-footer { max-width: 560px; padding: 0 20px 18px; }
}

@media (max-width: 480px) {
  .login-intro-copy h1 { font-size: 25px; }
  .login-intro-copy p { display: none; }
  .login-trust { gap: 12px; }
  .login-footer span:last-child { display: none; }
}