:root {
  color-scheme: light;
  --ink: #10211b;
  --muted: #66736e;
  --line: #dde6e1;
  --green: #128c63;
  --green-dark: #0b6245;
  --cream: #f4f7f5;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--cream);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(340px, 1.05fr) minmax(380px, .95fr); }
.login-intro {
  background:
    radial-gradient(circle at 18% 16%, rgba(48, 194, 139, .22), transparent 34%),
    linear-gradient(145deg, #0a2118, #123b2d 62%, #0d2a20);
  color: white;
  padding: clamp(36px, 6vw, 88px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.login-intro::after { content: ""; position: absolute; width: 360px; height: 360px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; right: -150px; bottom: -130px; box-shadow: 0 0 0 60px rgba(255,255,255,.025), 0 0 0 120px rgba(255,255,255,.02); }
.brand, .mobile-brand { display: flex; align-items: center; gap: 13px; }
.brand > span:last-child { display: grid; gap: 2px; }
.brand small { color: #9ec8b8; }
.brand-mark { width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #173e2f, #235f48); border: 1px solid #c99d45; color: #f7d992; font-family: Georgia, serif; font-weight: 800; }
.intro-copy { max-width: 630px; position: relative; z-index: 1; }
.eyebrow { display: inline-block; color: #28bf87; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.intro-copy h1 { margin: 14px 0 20px; font-family: Georgia, serif; font-size: clamp(38px, 5vw, 68px); line-height: 1.02; letter-spacing: -.045em; max-width: 680px; }
.intro-copy p { color: #c2d8cf; line-height: 1.75; font-size: 16px; max-width: 590px; }
.security-note { display: flex; gap: 13px; align-items: center; position: relative; z-index: 1; }
.security-note > span { width: 35px; height: 35px; display: grid; place-items: center; background: rgba(44, 204, 145, .14); border: 1px solid rgba(78, 220, 167, .28); border-radius: 50%; color: #66e3b5; }
.security-note p { margin: 0; color: #a9c8bc; font-size: 12px; line-height: 1.5; }
.security-note strong { color: white; }
.login-card { background: white; display: flex; flex-direction: column; justify-content: center; padding: clamp(38px, 8vw, 120px); }
.login-card h2 { font-family: Georgia, serif; font-size: clamp(34px, 4vw, 52px); letter-spacing: -.035em; margin: 12px 0 10px; }
.login-card > p { color: var(--muted); line-height: 1.6; margin: 0 0 34px; }
.mobile-brand { display: none; }
form { display: grid; gap: 19px; }
label { display: grid; gap: 8px; color: #263c34; font-size: 13px; font-weight: 750; }
input { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 14px 15px; font: inherit; font-size: 15px; color: var(--ink); outline: none; transition: border-color .15s, box-shadow .15s; }
input:focus { border-color: #57ae8d; box-shadow: 0 0 0 4px rgba(18, 140, 99, .1); }
button { border: 0; border-radius: 12px; background: var(--green); color: white; font: inherit; font-weight: 800; padding: 15px; cursor: pointer; transition: background .15s, transform .15s; }
button:hover { background: var(--green-dark); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .65; cursor: wait; }
.error { background: #fff0f1; border: 1px solid #f0c7cb; color: #a3222c; border-radius: 10px; padding: 11px 12px; font-size: 13px; }
.footnote { color: #8a9691; margin-top: 24px; }
@media (max-width: 820px) {
  .login-shell { display: block; padding: 20px; }
  .login-intro { display: none; }
  .login-card { min-height: calc(100vh - 40px); border-radius: 22px; padding: 30px 24px; box-shadow: 0 18px 50px rgba(18,44,34,.08); }
  .mobile-brand { display: flex; margin-bottom: auto; padding-bottom: 50px; }
  .login-card .footnote { margin-top: auto; padding-top: 50px; }
}