:root { color-scheme: light; --blue:#2376ad; --ink:#52657a; --soft:#f3faff; --pink:#f5afcb; --mint:#bfe8d4; --link:#236f9f; --muted:#60758a; }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,system-ui,-apple-system,sans-serif; background:linear-gradient(135deg,#fff9fc,#eef8ff); color:var(--ink); line-height:1.6; }
main { width:min(920px,calc(100% - 32px)); margin:36px auto; }
.card { background:rgba(255,255,255,.94); border:1px solid #dce7f1; border-radius:28px; padding:clamp(22px,4vw,42px); box-shadow:0 18px 50px rgba(82,101,122,.12); margin-bottom:22px; }
h1,h2 { color:#344c68; line-height:1.2; } h1 { font-size:clamp(2rem,5vw,3.5rem); margin:.2em 0; }
a { color:var(--link); text-underline-offset:3px; text-decoration-thickness:.08em; } .badge { display:inline-block; background:#ffe7f1; border-radius:999px; padding:6px 12px; font-weight:700; }
button { min-height:48px; border:0; border-radius:16px; padding:14px 18px; font-weight:750; cursor:pointer; background:var(--blue); color:white; font-size:1rem; transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease; }
button:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 8px 22px rgba(39,111,159,.18); }
button.danger { background:#b95765; } button:disabled { opacity:.55; cursor:not-allowed; }
input { width:100%; padding:14px 16px; border:1px solid #c9d8e6; border-radius:14px; font-size:1rem; margin:8px 0 16px; }
button:focus-visible,input:focus-visible,a:focus-visible { outline:3px solid #174f78; outline-offset:3px; }
.notice { border-left:5px solid var(--pink); background:#fff5f8; padding:14px 16px; border-radius:12px; }
.success { background:#e9f9f1; padding:14px; border-radius:12px; } .error { background:#ffe0e2; padding:14px; border-radius:12px; }
nav a { margin-right:16px; } footer { font-size:.9rem; color:var(--muted); padding:10px 4px 40px; }
button.secondary { background:#eef4fa; color:#52657a; border:1px solid #c9d8e6; }
small { display:block; color:var(--muted); margin:-8px 0 16px; }
@media (max-width:560px) { main { width:min(100% - 24px,920px); margin:20px auto; } .card { border-radius:22px; } button { width:100%; margin-bottom:8px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } }