:root { --ink:#222; --muted:#667; --bg:#f7f7fb; --acc:#2867c6; --acc2:#eef4ff; }
*{box-sizing:border-box} body{margin:0;font:16px/1.5 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}
.wrap{max-width:900px;margin:0 auto;padding:1rem}
.top{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.06)} .top h1{margin:0;font-size:1.25rem}
.foot{color:var(--muted);font-size:.9rem}
main h2{margin-top:.2rem}
.intro p{max-width:60ch}
.btn{display:inline-block;background:var(--acc);color:#fff;border:0;padding:.6rem .9rem;border-radius:.4rem;text-decoration:none;cursor:pointer}
.btn.secondary{background:transparent;color:var(--acc);border:1px solid var(--acc)}
.card{background:#fff;border:1px solid #e5e7eb;padding:1rem;border-radius:.5rem;max-width:420px}
label{display:block;margin:.5rem 0}
input{width:100%;padding:.5rem;border:1px solid #cbd5e1;border-radius:.3rem}
.error{color:#b00020;margin-top:.8rem}
.notice{background:var(--acc2);padding:.8rem;border-radius:.5rem}
.greet{font-size:1.1rem}