:root{font-family:system-ui,sans-serif;color:#243e35;background:#f4f2eb;color-scheme:light}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 20% 0%,#e3e8db,transparent 65%)}main{width:min(100%,400px);padding:40px;border:1px solid #d8ddcf;border-radius:22px;background:#fffef9;box-shadow:0 16px 60px #233d3510}.mark{font-size:42px;color:#59765e}h1{font:normal 42px Georgia,serif;letter-spacing:-1.5px;margin:12px 0 36px}label{display:block;font-size:13px;font-weight:600;margin:22px 0 9px}input{width:100%;font:inherit;border:1px solid #ccd3c6;border-radius:8px;padding:13px;background:#fdfdf9;color:inherit;outline-offset:3px}input:focus-visible,button:focus-visible{outline:2px solid #6f8968}button{width:100%;border:0;border-radius:8px;margin-top:28px;padding:15px 18px;background:#294d3e;color:white;font:inherit;cursor:pointer;display:flex;justify-content:space-between;transition:background .15s}button:hover{background:#3c624e}p[role=alert]{font-size:14px;color:#963c31;line-height:1.5}@media(max-width:450px){main{padding:28px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

body{padding:calc(24px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left))}

.login-action { display: block; padding: 16px; border-radius: 8px; background: #213e35; color: white; text-decoration: none; text-align: center; font-weight: 600; }
.login-action:focus-visible { outline: 3px solid #527c69; outline-offset: 4px; }