:root {
  --login-deep: #0d3f34;
  --login-mid: #17624f;
  --login-accent: #58a989;
  --login-surface: #f4faf7;
}

.login-page {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(500px, .92fr);
  overflow-x: hidden;
  background: var(--login-surface) !important;
}

.login-brand {
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(24px, 4vh, 48px);
  padding: clamp(38px, 6.2vh, 68px) clamp(42px, 6.4vw, 112px) !important;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 92% 8%, rgba(151, 220, 192, .22), transparent 32%),
    linear-gradient(145deg, var(--login-deep), var(--login-mid)) !important;
}
.login-brand::before {
  width: min(42vw, 620px) !important;
  height: min(42vw, 620px) !important;
  right: clamp(-230px, -12vw, -100px) !important;
  top: clamp(-260px, -14vw, -110px) !important;
  bottom: auto !important;
  border: clamp(50px, 5vw, 82px) solid rgba(151, 220, 192, .10) !important;
}
.login-brand::after {
  width: min(28vw, 410px) !important;
  height: min(28vw, 410px) !important;
  right: clamp(-85px, -4vw, -30px) !important;
  top: clamp(-170px, -8vw, -70px) !important;
  bottom: auto !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  background: transparent !important;
}
.login-brand > * { position: relative; z-index: 1; }
.login-brand .brand-mark {
  width: 60px;
  height: 60px;
  margin: 0;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(145deg, #2f8468, #69b99a);
  box-shadow: 0 14px 34px rgba(4, 35, 28, .25);
}
.login-brand > div:nth-child(2) {
  width: 100%;
  max-width: 720px;
  align-self: center;
}
.login-brand h1 {
  max-width: 720px;
  margin: 22px 0 18px;
  font-size: clamp(38px, 3.65vw, 62px);
  line-height: 1.16;
  letter-spacing: -1.8px;
  text-wrap: balance;
}
.login-brand .brand-copy {
  max-width: 660px;
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.85;
}
.brand-points {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  width: 100%;
  min-width: 0;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px !important;
  margin: 0 !important;
}
.brand-points span {
  min-width: 0;
  min-height: 56px;
  display: flex;
  align-items: center;
  padding: 13px 14px !important;
  overflow-wrap: anywhere;
  line-height: 1.45;
  border: 1px solid rgba(255, 255, 255, .15) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(8px);
}
.brand-points span::before { flex: 0 0 21px; }
.login-card {
  align-self: center;
  justify-self: center;
  width: min(520px, calc(100% - 64px)) !important;
  margin: 32px 0;
  padding: clamp(30px, 3vw, 42px) !important;
  border: 1px solid rgba(47, 132, 104, .15) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 28px 72px rgba(15, 63, 53, .13) !important;
  backdrop-filter: blur(16px);
}
.login-card h2 {
  margin: 9px 0 8px;
  font-size: clamp(25px, 2vw, 30px);
  line-height: 1.25;
}
.login-card > .muted { margin: 0 0 14px; line-height: 1.7; }
.login-card label { margin: 14px 0; }
.login-card input {
  min-height: 46px;
  margin-top: 8px;
  background: rgba(255, 255, 255, .94);
}
.login-card .login-btn { margin-top: 22px; }
.formal-login-note {
  margin-top: 13px;
  padding: 12px 14px;
  line-height: 1.65;
}
#loginView:not(.hidden) ~ .operation-fab,
#loginView:not(.hidden) ~ .role-switch-fab {
  display: none !important;
}

@media (max-width: 1180px) {
  .login-page { grid-template-columns: minmax(0, 1fr) minmax(450px, .86fr); }
  .login-brand { padding-inline: clamp(34px, 5vw, 64px) !important; }
  .login-brand h1 { font-size: clamp(36px, 4.2vw, 50px); }
  .brand-points { grid-template-columns: 1fr; gap: 9px !important; }
  .brand-points span { min-height: 44px; padding-block: 10px !important; }
}
@media (max-width: 900px) {
  .login-page { grid-template-columns: 1fr; align-content: start; overflow: visible; }
  .login-brand {
    min-height: auto;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 22px 24px;
    padding: 30px clamp(22px, 6vw, 54px) !important;
  }
  .login-brand > div:nth-child(2) { align-self: start; }
  .login-brand h1 {
    margin: 8px 0 10px;
    font-size: clamp(29px, 6vw, 42px);
    letter-spacing: -1px;
  }
  .login-brand .brand-copy { line-height: 1.65; }
  .brand-points {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .login-card {
    width: min(560px, calc(100% - 40px)) !important;
    margin: 28px auto 46px;
  }
}
@media (max-width: 620px) {
  .login-brand {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px 20px 26px !important;
  }
  .login-brand .brand-mark { width: 50px; height: 50px; border-radius: 14px; }
  .login-brand h1 { font-size: 30px; }
  .brand-points { grid-column: auto; grid-template-columns: 1fr; }
  .brand-points span { min-height: 42px; }
  .login-card {
    width: calc(100% - 28px) !important;
    margin: 18px auto 34px;
    padding: 24px 20px !important;
    border-radius: 19px !important;
  }
}
@media (min-width: 901px) and (max-height: 760px) {
  .login-brand { gap: 20px; padding-block: 28px !important; }
  .login-brand h1 {
    margin-block: 14px 12px;
    font-size: clamp(34px, 3.4vw, 48px);
  }
  .brand-points span { min-height: 44px; padding-block: 9px !important; }
  .login-card { margin-block: 20px; padding-block: 28px !important; }
}