body{font-family:sans-serif;margin:0;background:var(--bg);color:var(--text);}
nav{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#673de6;color:#fff;position:sticky;top:0}
nav a{color:#fff;margin:0 .5rem;text-decoration:none;}
button{background:#673de6;color:#fff;border:none;border-radius:50px;padding:.6rem 1.2rem;font-weight:600;cursor:pointer;}
button:hover{opacity:.9}
:root{--bg:#f7f7f7;--text:#000;--card:#fff;}
body.dark{--bg:#121212;--text:#fff;--card:#1e1e1e}
.card{background:var(--card);padding:1rem;border-radius:12px;box-shadow:0 2px 5px rgba(0,0,0,.08);}