:root { --ink: #202522; --paper: #f7f5f0; --blue: #2c4b59; --line: #dedfd8; --muted: #7c827d; --serif: "Songti SC", "STSong", serif; --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
* { box-sizing: border-box; } body { display: grid; min-height: 100vh; margin: 0; place-items: center; background: var(--paper); color: var(--ink); font: 15px/1.6 var(--sans); }
.login-shell { width: min(100% - 40px, 390px); padding: 38px; border: 1px solid var(--line); background: #fffefa; box-shadow: 0 18px 60px rgba(50,53,46,.07); }
.seal { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: var(--blue); color: white; font: 22px var(--serif); }.login-shell > p { color: var(--muted); font-size: 12px; }.login-shell h1 { margin: 6px 0 28px; font: 31px var(--serif); }
label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; } input { padding: 11px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: 15px var(--sans); } input:focus { outline: 2px solid rgba(44,75,89,.2); border-color: var(--blue); } button { width: 100%; margin-top: 16px; padding: 11px; border: 0; background: var(--blue); color: white; font: 14px var(--sans); } #loginError { min-height: 20px; margin: 10px 0 0; color: #a15e51; font-size: 12px; }