@import url('../../assets/typography.css');
:root{--green:#0d665b;--ink:#163632;--muted:#667a76;--line:#d9e6e2;--mint:#e7f4ef}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:radial-gradient(circle at 15% 0,#dff2eb,transparent 38%),#f2f7f5}
.login-shell{min-height:100dvh;display:grid;place-items:center;padding:22px}
.login-card{width:min(440px,100%);background:#fff;border:1px solid var(--line);border-radius:24px;padding:34px;box-shadow:0 24px 70px rgba(9,62,56,.13)}
.brand{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none;margin-bottom:34px}
.brand>span{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--green);color:#fff;font-weight:600}
.brand strong,.brand small{display:block;line-height:1.15}
.brand small{color:var(--muted);margin-top:5px}
.eyebrow{color:var(--green);margin:0 0 9px}
h1{font-size:2rem;line-height:1.2;letter-spacing:-.025em;margin:0}
.intro{color:var(--muted);font-size:1rem;line-height:1.6;margin:11px 0 25px}
.error{background:#fff2f1;color:#9a3730;border:1px solid #f2d0cd;border-radius:11px;padding:11px 13px;margin-bottom:16px}
form{display:grid;gap:17px}
label{display:grid;gap:7px;color:#45615c}
input{height:50px;border:1px solid var(--line);border-radius:12px;padding:0 14px;color:var(--ink);font-size:1rem!important;outline:none}
input:focus{border-color:#72b4a5;box-shadow:0 0 0 3px rgba(13,102,91,.1)}
button{height:50px;border:0;border-radius:12px;background:var(--green);color:#fff;cursor:pointer;margin-top:3px;font-size:1rem!important}
.back{display:block;text-align:center;color:var(--green);text-decoration:none;margin-top:21px}
@media(max-width:520px){.login-card{padding:27px 21px;border-radius:19px}h1{font-size:1.8rem}}