:root { font-family: Manrope, "Segoe UI", Arial, sans-serif; color: #172d36; background: #10282e; --green: #17755e; --muted: #75858b; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px 72px; position: relative; overflow: hidden; background: radial-gradient(circle at 12% 18%,#28544f 0,transparent 32%),radial-gradient(circle at 90% 90%,#0c4c3b 0,transparent 30%),#10282e; }
.login::before,.login::after { content:""; position:absolute; border:1px solid rgba(159,218,186,.09); border-radius:50%; pointer-events:none; }
.login::before { width:580px; height:580px; top:-390px; right:-170px; }
.login::after { width:420px; height:420px; bottom:-310px; left:-110px; }
.login-panel { width:min(920px,100%); min-height:560px; display:grid; grid-template-columns:1.02fr .98fr; background:#f9fbfa; border:1px solid rgba(255,255,255,.18); border-radius:22px; overflow:hidden; box-shadow:0 30px 90px rgba(3,20,24,.38); position:relative; z-index:1; }
.login-intro { padding:46px 48px 42px; display:flex; flex-direction:column; color:#fff; background:linear-gradient(145deg,rgba(23,117,94,.92),rgba(17,61,57,.98)),#176f59; position:relative; }
.login-intro::after { content:""; position:absolute; width:260px; height:260px; right:-110px; bottom:-110px; border:54px solid rgba(255,255,255,.045); border-radius:50%; }
.login-brand,.login-mobile-brand { font-size:31px; line-height:1; font-weight:850; letter-spacing:-2px; }
.login-brand span,.login-mobile-brand span { color:#a9e1c4; }
.login-intro-copy { margin:auto 0; position:relative; z-index:1; }
.eyebrow,.kicker { display:block; margin-bottom:14px; color:#b7e4d0; font-size:10px; font-weight:800; letter-spacing:2.1px; }
.login-intro h1 { max-width:380px; margin:0; font-family:Georgia,serif; font-size:clamp(30px,3vw,42px); line-height:1.08; letter-spacing:-1.6px; }
.login-intro-copy>p { max-width:380px; margin:20px 0 0; color:#d5e8e1; font-size:14px; line-height:1.75; }
.login-security { display:flex; gap:12px; align-items:center; position:relative; z-index:1; padding-top:25px; border-top:1px solid rgba(255,255,255,.14); }
.login-security>span { width:30px; height:30px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; color:#0f5a46; background:#b8e6cf; font-weight:900; }
.login-security strong,.login-security small { display:block; }
.login-security strong { font-size:12px; }.login-security small { margin-top:3px; color:#b9d3cb; font-size:10px; }
.login-box { padding:74px 58px 44px; background:#fbfcfc; display:flex; flex-direction:column; }
.login-mobile-brand { display:none; color:#153b34; margin-bottom:45px; }.kicker { color:var(--green); margin-bottom:10px; }
.login-form-heading h2 { margin:0; color:#17353a; font-family:Georgia,serif; font-size:28px; line-height:1.2; letter-spacing:-.8px; }
.login-form-heading p { margin:12px 0 34px; color:var(--muted); font-size:13px; line-height:1.6; }
.login-field { margin-bottom:9px; color:#334b50; font-family:Georgia,serif; font-size:12px; font-weight:750; }
.password-control { position:relative; }.password-control input { width:100%; min-height:49px; padding:0 49px 0 15px; border:1px solid #d6dfdd; border-radius:9px; outline:none; background:#fff; color:#17353a; transition:border-color 140ms ease,box-shadow 140ms ease; }
.password-control input::placeholder { color:#a0adae; }.password-control input:focus { border-color:#27826b; box-shadow:0 0 0 3px rgba(39,130,107,.12); }
.password-toggle { position:absolute; top:6px; right:6px; width:37px; height:37px; padding:9px; border:0; border-radius:7px; background:transparent; color:#718488; }.password-toggle:hover { background:#eef4f2; color:var(--green); }.password-toggle svg { width:19px; fill:none; stroke:currentColor; stroke-width:1.7; }
.login-error { margin:10px 0 -3px; padding:10px 12px; border-radius:7px; background:#fff0ef; color:#a43b35; font-size:11px; line-height:1.45; }
.login-submit { width:100%; min-height:49px; margin-top:18px; padding:0 15px; border:1px solid var(--green); border-radius:9px; display:flex; align-items:center; justify-content:center; gap:9px; background:var(--green); color:#fff; font-weight:700; box-shadow:0 8px 24px rgba(23,117,94,.18); transition:transform 140ms ease,box-shadow 140ms ease,background 140ms ease; }.login-submit:hover { transform:translateY(-1px); background:#105a48; box-shadow:0 11px 27px rgba(23,117,94,.24); }.login-submit.is-loading .login-arrow { animation:pulse 900ms ease-in-out infinite alternate; }.login-arrow { font-size:18px; }
.login-footnote { margin-top:auto; padding-top:34px; color:#879697; font-size:10px; text-align:center; }.login-footnote span { color:#52a784; font-size:8px; margin-right:5px; }
.login-footer { position:absolute; bottom:24px; left:0; right:0; z-index:1; color:#8eaaa9; font-size:10px; text-align:center; }
@keyframes pulse { to { transform:translateX(5px); opacity:.55; } }
@media (max-width:720px) { .login { padding:22px 16px 58px; }.login-panel { width:min(440px,100%); min-height:0; grid-template-columns:1fr; border-radius:17px; }.login-intro { display:none; }.login-box { min-height:510px; padding:35px 28px 28px; }.login-mobile-brand { display:block; }.login-form-heading p { margin-bottom:29px; } }
@media (max-width:390px) { .login { padding-inline:10px; }.login-box { padding-inline:22px; } }