*{box-sizing:border-box}:root{font-family:Roboto,"Noto Sans",Arial,sans-serif;color:#212121;background:#fafafa;--card:#fff;--muted:#727272;--line:#929292;--input:#f5f5f5;--accent:#03a9f4}body{margin:0}main{width:100%;max-width:440px;margin:64px auto 24px;padding:0 20px}header{text-align:center;margin-bottom:28px}header img{display:block;margin:0 auto 22px}h1{font-size:28px;font-weight:400;line-height:1.3;margin:0 0 10px}header p{font-size:16px;color:var(--muted);margin:0}.card{background:var(--card);border-radius:8px;padding:24px;box-shadow:0 2px 5px #00000024;border:1px solid #0000000a}h2{font-size:20px;font-weight:400;margin:0 0 24px}.field{display:block;position:relative;background:var(--input);border-radius:4px 4px 0 0;border-bottom:1px solid var(--line);margin:0 0 24px;height:58px}.field:focus-within{border-bottom:2px solid var(--accent)}.field span{position:absolute;left:12px;top:7px;font-size:12px;color:var(--muted)}.field:focus-within span{color:var(--accent)}.field input{display:block;width:100%;height:100%;padding:24px 12px 7px;border:0;outline:0;background:transparent;color:inherit;font:inherit;border-radius:inherit}.password input{padding-right:50px}.password button{position:absolute;right:4px;top:9px;width:40px;height:40px;border:0;background:transparent;color:var(--muted);border-radius:50%;cursor:pointer}.password svg{width:24px;height:24px;fill:currentColor}.remember{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer}.remember input{width:18px;height:18px;accent-color:var(--accent);margin:0}.actions{display:flex;justify-content:flex-end;margin-top:26px}.submit{background:var(--accent);color:#fff;border:0;border-radius:4px;min-height:38px;padding:0 20px;text-transform:uppercase;font-size:14px;font-weight:500;letter-spacing:.5px;cursor:pointer;box-shadow:0 2px 3px #0003}.submit:hover{filter:brightness(.96)}button:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}#message{font-size:14px;color:var(--muted);line-height:1.5}footer{text-align:center;margin-top:26px}select{border:0;background:transparent;color:var(--muted);padding:8px;font:inherit;font-size:14px;cursor:pointer}option{background:var(--card)}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:480px){main{margin-top:36px}.card{padding:24px 20px}}@media(prefers-color-scheme:dark){:root{color:#e1e1e1;background:#111;--card:#1c1c1c;--muted:#a5a5a5;--line:#777;--input:#282828;--accent:#03a9f4}.card{border-color:#ffffff12}}
#message{color:#db4437} .submit:disabled{opacity:.65;cursor:wait;box-shadow:none}
