:root{--blue:#3d6fbe;--deep:#1f416f;--graphite:#25292d;--silver:#e8ebef}*{box-sizing:border-box}body{min-height:100vh;margin:0;display:grid;place-items:center;padding:24px;color:var(--graphite);background:radial-gradient(circle at 20% 0,#d9e8ff,transparent 34rem),var(--silver);font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif}.login{width:min(460px,100%);padding:38px;border-radius:28px;background:#fff;box-shadow:0 24px 70px rgb(31 65 111 / 14%)}.login>img{width:64px;height:64px;border-radius:18px}.eyebrow{margin:20px 0 8px;color:var(--blue);font-size:.75rem;font-weight:900;letter-spacing:.14em}.login h1{margin:0;color:var(--deep);font-size:2.15rem}.login>p:not(.eyebrow){color:#5d6b7c;line-height:1.7}form{display:grid;gap:17px;margin-top:28px}label{display:grid;gap:7px;color:var(--deep);font-size:.82rem;font-weight:800}input{min-height:50px;padding:0 14px;border:1px solid #bdc9d7;border-radius:12px;font:inherit}input:focus{outline:4px solid rgb(120 174 255 / 35%);border-color:var(--blue)}button{min-height:52px;border:0;border-radius:12px;color:#fff;background:var(--blue);font:inherit;font-weight:900;cursor:pointer}button:disabled{opacity:.55}output{min-height:24px;color:#a33;font-size:.85rem;line-height:1.5}