/* Split-screen institutional sign-in page with a single-column mobile layout. */
:root { --ink:#172824; --muted:#70807c; --line:#d8e5e1; --green:#087f63; --deep:#073a33; --white:#fff; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--ink); background: #f7faf9; font-family: "DM Sans", sans-serif; }
button, input { font: inherit; }
.login-shell { min-height: 100dvh; display: grid; grid-template-columns: minmax(380px, .88fr) 1.12fr; }
.brand-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 38px clamp(34px, 5vw, 76px); color: #fff; background: radial-gradient(circle at 10% 90%, rgba(44,190,126,.28), transparent 34%), radial-gradient(circle at 90% 10%, rgba(91,216,145,.18), transparent 30%), var(--deep); }
.brand-panel::before, .brand-panel::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.08); border-radius:50%; }
.brand-panel::before { width:500px; height:500px; left:-280px; bottom:-260px; }.brand-panel::after { width:380px; height:380px; right:-210px; top:-180px; }
.brand { display:flex; align-items:center; gap:12px; position:relative; z-index:1; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:13px 13px 5px 13px; color:#073d31; background:linear-gradient(145deg,#74e39a,#20af79); font:800 22px Manrope; }
.brand strong,.brand span { display:block; }.brand strong { font:700 16px Manrope; }.brand span { color:#a8cbc2; font-size:11px; margin-top:2px; }
.brand-message { position:relative; z-index:1; margin:auto 0; max-width:570px; padding:70px 0; }
.eyebrow { display:inline-block; margin-bottom:18px; color:#67dc93; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.brand-message h1 { margin:0; max-width:530px; font:800 clamp(35px,4.2vw,60px)/1.08 Manrope; letter-spacing:-.055em; }
.brand-message > p { max-width:520px; margin:22px 0 34px; color:#c4dcd6; font-size:16px; line-height:1.7; }
.trust-points { display:grid; gap:18px; }
.trust-points > div { display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:start; }
.trust-points i { width:26px; height:26px; display:grid; place-items:center; border-radius:50%; color:#54d58a; background:rgba(84,213,138,.12); font-style:normal; font-size:12px; }
.trust-points strong,.trust-points span { display:block; }.trust-points strong { margin-bottom:3px; font-size:13px; }.trust-points span { color:#a9c8c1; font-size:12px; }
.panel-footer { position:relative; z-index:1; margin:0; color:#8db4aa; font-size:11px; }
.form-panel { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:45px 30px; background:radial-gradient(circle at 80% 10%,#edf7f3,transparent 35%),#f8fbfa; }
.login-card { width:min(420px,100%); }
.lock-mark { width:46px; height:46px; display:grid; place-items:center; margin-bottom:22px; border-radius:14px; color:var(--green); background:#e3f3ed; font-size:22px; font-weight:800; }
.login-card h2 { margin:0; font:800 32px/1.2 Manrope; letter-spacing:-.035em; }
.intro { margin:8px 0 32px; color:var(--muted); font-size:14px; }
label { display:block; margin:0 0 8px; color:#344843; font-size:12px; font-weight:700; }
.label-row { display:flex; justify-content:space-between; align-items:center; margin-top:20px; }.label-row label { margin:0 0 8px; }.label-row span { margin-bottom:8px; color:#91a09c; font-size:10px; }
.field { position:relative; display:flex; align-items:center; }
.field svg { position:absolute; left:14px; width:18px; fill:none; stroke:#7b8d88; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.field input { width:100%; height:50px; padding:0 47px 0 43px; border:1px solid var(--line); border-radius:12px; outline:none; color:var(--ink); background:#fff; transition:.18s; }
.field input:focus { border-color:#68ad9b; box-shadow:0 0 0 3px rgba(8,127,99,.1); }.field input::placeholder { color:#a4b0ad; }
.field button { position:absolute; right:11px; border:0; padding:6px; color:var(--green); background:transparent; font-size:11px; font-weight:700; }
.error { min-height:35px; padding-top:10px; color:#b13d3d; font-size:12px; line-height:1.4; }
.submit-button { width:100%; height:50px; display:flex; justify-content:center; align-items:center; gap:12px; border:0; border-radius:12px; color:#fff; background:var(--green); font-weight:700; box-shadow:0 10px 24px rgba(8,127,99,.2); transition:.18s; }
.submit-button:hover { background:#076e57; transform:translateY(-1px); }.submit-button:disabled { opacity:.65; cursor:wait; transform:none; }
.submit-button b { font-size:18px; }.help { margin:20px 0 0; color:#83928e; text-align:center; font-size:11px; }
.legal { width:min(420px,100%); margin:42px 0 0; color:#98a5a2; text-align:center; font-size:10px; line-height:1.5; }
.mobile-brand { display:none; }
@media (max-width:820px) {
  .login-shell { display:block; }.brand-panel { display:none; }.form-panel { min-height:100dvh; padding:30px 22px; }
  .mobile-brand { display:flex; align-items:center; gap:10px; width:min(420px,100%); margin-bottom:50px; font:700 15px Manrope; }.mobile-brand .brand-mark { width:36px; height:36px; font-size:18px; }
  .legal { margin-top:35px; }
}