:root{--green:#153e36;--lime:#d5e9a3;--bg:#f4f5f1;--ink:#20362f;--line:#dce3d9}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:26px;background:radial-gradient(circle at 85% 10%,#e3ebda,transparent 28%),var(--bg);font:14px/1.5 Inter,"Segoe UI",Arial,sans-serif;color:var(--ink)}
.auth-shell{width:min(460px,100%)}
.auth-card{width:100%;padding:38px;background:#fff;border:1px solid #e7ebe5;border-radius:20px;box-shadow:0 16px 60px #1634260f}
.auth-logo{display:block;margin-bottom:28px}
.auth-card img{height:56px;width:auto;max-width:100%;object-fit:contain;object-position:left}
.auth-card h1{font-size:29px;letter-spacing:-.7px;margin:0 0 24px}
.auth-lead{margin:-14px 0 22px;color:#617266}
.auth-card p{color:#617266}
.auth-card form{display:grid;gap:16px}
.auth-card label,.field{display:grid;gap:7px;font-weight:600;font-size:12px;color:#5d6d60}
.field-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.field-top a{color:#245b46;font-size:12px;font-weight:650;text-decoration:none;white-space:nowrap}
.field-top a:hover{text-decoration:underline}
.field-control{position:relative;display:block}
.field-control svg{position:absolute;left:13px;top:50%;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:#8b948a;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.auth-card input,.auth-card select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:16px;color:var(--ink);background:#fff}
.field-control input{padding-left:42px}
.auth-card form button{width:100%;min-height:46px;margin-top:2px;background:#245b46;border:0;border-radius:9px;padding:12px 16px;color:#fff;font:inherit;font-weight:650;cursor:pointer}
.auth-card form button:hover{background:#174d39}
.auth-card a{color:#245b46}
.auth-card code{display:block;padding:12px 14px;margin:14px 0;background:#edf3e4;border-radius:9px;overflow-wrap:anywhere;user-select:all}
.auth-card [role=alert]{padding:10px 12px;margin:0 0 16px;background:#fff0eb;border-radius:8px;color:#a64131}
.auth-card [role=alert] p{margin:0;color:#a64131}
.auth-card [role=status]{padding:10px 12px;margin:0 0 16px;background:#edf3e4;border-radius:8px}
button:focus-visible,input:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #93b972;outline-offset:3px}
.field-control input:focus-visible{outline:none;border-color:#245b46;box-shadow:0 0 0 3px #d5e9a380}

body.auth-stage{display:block;padding:0;background:#f4f6f1}
body.auth-stage .auth-shell{width:100%;min-height:100vh;display:grid;grid-template-columns:minmax(300px,42%) minmax(0,1fr)}
.auth-brand{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:48px 44px;background:linear-gradient(165deg,#1c4d42 0%,#12352e 58%,#0e2b26 100%);color:#f3f7f2}
.auth-brand::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-16deg,transparent,transparent 22px,#ffffff0c 22px,#ffffff0c 23px);pointer-events:none}
.brand-kicker,.brand-rule,.auth-brand h2,.brand-note{position:relative}
.brand-kicker{margin:0 0 16px;color:#d5e9a3;font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase}
.brand-rule{width:36px;height:3px;margin:0 0 18px;border-radius:3px;background:#d5e9a3}
.auth-brand h2{margin:0 0 10px;color:#fff;font-size:40px;font-weight:650;letter-spacing:-1px;line-height:1.05}
.brand-note{margin:0;max-width:36ch;color:#c9d7ce;font-size:15px}
body.auth-stage .auth-card{display:flex;flex-direction:column;justify-content:center;width:auto;min-height:100vh;padding:48px 8vw;border:0;border-radius:0;background:#f7f8f4;box-shadow:none}
body.auth-stage .auth-card>*{width:min(400px,100%)}

@media(max-width:840px){
  body.auth-stage{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
  body.auth-stage .auth-shell{grid-template-columns:1fr}
  .auth-brand{justify-content:flex-start;padding:calc(28px + env(safe-area-inset-top,0px)) max(22px,env(safe-area-inset-right,0px)) 22px max(22px,env(safe-area-inset-left,0px))}
  .auth-brand h2{font-size:30px}
  body.auth-stage .auth-card{min-height:0;padding:28px max(18px,env(safe-area-inset-right,0px)) calc(40px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));justify-content:flex-start}
  .auth-brand,.auth-card{animation-name:auth-fade-only}
}
@keyframes auth-fade-only{from{opacity:0}to{opacity:1}}
@media(max-width:500px){
  body{padding:12px}
  .auth-card{padding:24px}
  .auth-card h1{font-size:24px}
  body.auth-stage .auth-card{padding:26px 18px 36px}
}
@media(prefers-reduced-motion:no-preference){
  .auth-brand,.auth-card{animation:auth-in .4s ease both}
}
@keyframes auth-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}