:root{--bg:#f4f6f5;--card:#fff;--tx:#1b2a22;--mut:#64726a;--bd:#dfe5e1;--ac:#1b5e20}
@media (prefers-color-scheme:dark){:root{--bg:#101612;--card:#18211b;--tx:#e8efe9;--mut:#93a39a;--bd:#26332b;--ac:#66bb6a}}
*{box-sizing:border-box}body{margin:0;font:15px/1.4 system-ui,sans-serif;background:var(--bg);color:var(--tx)}
a{color:inherit;text-decoration:none}
header{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--bd);background:var(--card);position:sticky;top:0;z-index:5}
header h1{font-size:18px;margin:0;flex:1}
.btn{border:1px solid var(--bd);background:var(--card);color:var(--tx);border-radius:8px;padding:7px 12px;cursor:pointer;font:inherit}
.btn.pri{background:var(--ac);color:#fff;border-color:var(--ac)}
main{padding:16px;max-width:1200px;margin:auto}