:root { font-family: "Manrope", sans-serif; color: #17211e; background: #f2f6f4; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, .9fr) minmax(440px, 1.1fr); }
.login-story { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(32px, 5vw, 72px); overflow: hidden; color: #f8fffc; background: #17352e; }
.login-story::after { content: ""; position: absolute; width: 540px; height: 540px; right: -250px; bottom: -230px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.02); }
.brand-mark { width: 40px; height: 40px; display: flex; align-items: flex-end; justify-content: center; gap: 4px; padding: 10px; border-radius: 11px; background: #ecf9f4; }
.brand-mark span { width: 4px; border-radius: 2px; background: #087b68; }
.brand-mark span:nth-child(1) { height: 10px; opacity: .55; }
.brand-mark span:nth-child(2) { height: 20px; }
.brand-mark span:nth-child(3) { height: 14px; opacity: .75; }
.login-story p { margin: 0 0 14px; color: #a9c7bd; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.login-story h1 { max-width: 620px; margin: 0; font: 600 clamp(38px, 4.5vw, 66px)/1.02 "Newsreader", serif; }
.security-line { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; color: #b8cec7; font-size: 11px; }
.security-line span { width: 7px; height: 7px; border-radius: 50%; background: #42c49e; box-shadow: 0 0 0 5px rgba(66,196,158,.12); }
.login-panel { display: grid; place-items: center; padding: 30px; background: #fff; }
form { width: min(420px, 100%); }
.section-label { margin: 0 0 8px; color: #087b68; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
h2 { margin: 0; font: 600 38px/1.1 "Newsreader", serif; }
.login-copy { margin: 13px 0 30px; color: #68736f; font-size: 12px; line-height: 1.7; }
label { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 700; }
input { width: 100%; height: 48px; padding: 0 13px; border: 1px solid #dfe6e3; border-radius: 9px; color: #17211e; background: #fff; font: 13px "Manrope", sans-serif; outline: 0; }
input:focus { border-color: #087b68; box-shadow: 0 0 0 4px rgba(8,123,104,.12); }
button { width: 100%; height: 46px; margin-top: 16px; border: 0; border-radius: 9px; color: white; background: #087b68; cursor: pointer; font: 700 12px "Manrope", sans-serif; }
button:hover { background: #055d50; }
button:disabled { opacity: .55; cursor: wait; }
form a { display: block; width: max-content; margin: 22px auto 0; color: #68736f; font-size: 10px; font-weight: 700; text-decoration: none; }
.form-error { margin: 10px 0 0; color: #b33a32; font-size: 11px; }
@media (max-width: 760px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-story { min-height: 260px; padding: 25px; }
  .login-story h1 { font-size: 34px; }
  .security-line { display: none; }
  .login-panel { place-items: start center; padding: 38px 22px; }
}