:root {
  font-family: Inter, "Segoe UI", sans-serif;
  color: #092d2b;
  background: #eef3f2;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --ink: #092d2b;
  --muted: #667c7a;
  --teal: #087f75;
  --line: #dce7e5;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 36px;
  background:
    radial-gradient(ellipse at 12% 15%, rgba(162, 211, 199, .28), transparent 33%),
    #eef3f2;
}

.login-layout {
  display: grid;
  grid-template-columns: minmax(390px, 480px) minmax(390px, 600px);
  width: min(1080px, 100%);
  min-height: 640px;
  overflow: hidden;
  border: 1px solid rgba(8, 60, 55, .08);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(13, 54, 49, .13);
}

.login-card {
  display: flex;
  flex-direction: column;
  padding: 48px 52px 36px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: #063a36;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.06em;
}

.brand-copy { display: grid; gap: 2px; }
.brand-copy strong { font-size: 15px; letter-spacing: .11em; }
.brand-copy span { color: var(--muted); font-size: 11px; }

.intro { margin-top: auto; padding-top: 62px; }
.eyebrow, .panel-kicker {
  margin: 0 0 13px;
  color: var(--teal);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}

h1 {
  max-width: 360px;
  margin: 0;
  font-size: clamp(27px, 3vw, 34px);
  line-height: 1.18;
  letter-spacing: -.055em;
}

.intro-copy { margin: 13px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.login-form { display: grid; gap: 10px; margin-top: 30px; }
.login-form label { font-size: 12px; font-weight: 700; }

.login-form input {
  width: 100%;
  height: 49px;
  margin-bottom: 10px;
  padding: 0 14px;
  border: 1px solid #d5e1df;
  border-radius: 10px;
  outline: none;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.login-form input:focus { border-color: #3d9b91; box-shadow: 0 0 0 3px rgba(8, 127, 117, .12); }
.password-heading { display: flex; align-items: center; justify-content: space-between; }

.login-form button {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 3px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: #087f75;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  transition: background .15s ease, transform .15s ease;
}

.login-form button:hover:not(:disabled) { background: #066d65; }
.login-form button:active:not(:disabled) { transform: translateY(1px); }
.login-form button:disabled { cursor: wait; opacity: .75; }
.button-spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.42); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.login-form button[aria-busy="true"] .button-spinner { display: block; }
.status { margin: 0 0 2px; color: #a13c32; font-size: 12px; line-height: 1.5; }
.status[data-kind="info"] { color: #657674; }
.password-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 7px;
  min-height: 36px;
  margin-top: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--teal);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.password-help svg { flex-shrink: 0; }
.password-help:hover { color: #066d65; background: #eef7f5; }
.password-help:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.setup-note { margin: auto 0 0; padding-top: 34px; color: #899997; font-size: 10px; line-height: 1.55; }

.welcome-panel {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 58px 54px 34px;
  color: #fff;
  background: #073c38;
  isolation: isolate;
}

.welcome-panel::before, .welcome-panel::after {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(195, 235, 226, .11);
  border-radius: 50%;
  content: "";
}

.welcome-panel::before { width: 610px; height: 610px; right: -250px; top: 84px; }
.welcome-panel::after { width: 440px; height: 440px; right: -150px; top: 168px; }
.welcome-content { position: relative; z-index: 1; }
.panel-kicker { color: #83c9bc; }
.welcome-panel h2 { max-width: 420px; margin: 20px 0 14px; font-size: clamp(27px, 3vw, 38px); line-height: 1.2; letter-spacing: -.05em; }
.welcome-panel p { max-width: 390px; margin: 0; color: #b6d2cd; font-size: 13px; line-height: 1.8; }

.panel-decoration { position: absolute; right: 7%; bottom: 13%; width: 340px; height: 340px; }
.orbit { position: absolute; inset: 0; border: 1px solid rgba(161, 224, 210, .2); border-radius: 50%; transform: rotate(-28deg) scaleY(.63); }
.orbit-two { inset: 31px -22px; transform: rotate(50deg) scaleY(.72); }
.orbit-three { inset: 53px 33px; border-color: rgba(161, 224, 210, .14); transform: rotate(0) scaleY(.9); }
.orbit-core { position: absolute; top: 50%; left: 50%; display: grid; width: 90px; height: 90px; place-items: center; border: 1px solid rgba(186, 236, 222, .43); border-radius: 28px; color: #dbf4ed; background: rgba(82, 159, 143, .14); box-shadow: 0 0 60px rgba(76, 184, 158, .17); font-size: 25px; font-weight: 800; letter-spacing: -.08em; transform: translate(-50%, -50%) rotate(-8deg); }
.panel-footer { color: #85aaa4; font-size: 10px; letter-spacing: .04em; }

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 820px) {
  body { padding: 20px; }
  .login-layout { grid-template-columns: 1fr; width: min(500px, 100%); min-height: auto; }
  .login-card { min-height: 630px; padding: 38px 38px 30px; }
  .welcome-panel { display: none; }
}

@media (max-width: 420px) {
  body { padding: 0; background: #fff; }
  .login-layout { min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
  .login-card { min-height: 100vh; padding: 30px 24px 25px; }
  .intro { padding-top: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}