:root { color-scheme: light dark; --fg:#1a1a1a; --bg:#fbfbf9; --accent:#3a5a78; }
* { box-sizing: border-box; }
body { margin:0; font: 16px/1.5 system-ui, sans-serif; color:var(--fg); background:var(--bg); }
.hero { text-align:center; padding:4rem 1rem 2rem; }
.hero h1 { font-size:2.4rem; margin:0 0 .3rem; letter-spacing:.02em; }
.tagline { color:#666; margin:0 0 1.4rem; }
.btn, button { background:var(--accent); color:#fff; border:0; padding:.7rem 1.4rem; border-radius:6px; text-decoration:none; cursor:pointer; font-size:1rem; }
.gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.5rem; max-width:1100px; margin:1rem auto; padding:0 1rem; }
.gallery img { width:100%; height:220px; object-fit:cover; border-radius:8px; display:block; }
footer { text-align:center; color:#888; padding:2rem; }
.login-body { display:grid; place-items:center; min-height:100vh; }
.login-card { display:flex; flex-direction:column; gap:.9rem; width:min(340px,90vw); padding:2rem; border:1px solid #ddd; border-radius:12px; background:Canvas; }
.login-card label { display:flex; flex-direction:column; gap:.3rem; font-size:.9rem; }
.login-card input { padding:.55rem; border:1px solid #ccc; border-radius:6px; font-size:1rem; }
.err { color:#b00020; font-size:.85rem; }