:root { --bg:#0d1117; --card:#161b22; --line:#21262d; --fg:#e6edf3; --dim:#8b949e; --accent:#58a6ff; --ok:#3fb950; --warn:#d29922; }
* { box-sizing:border-box; }
body { background:var(--bg); color:var(--fg); font:14px/1.5 system-ui,sans-serif; margin:0 auto; max-width:72rem; padding:0 1rem 3rem; }
header { display:flex; align-items:center; justify-content:space-between; padding:.8rem 0; border-bottom:1px solid var(--line); flex-wrap:wrap; gap:.5rem; }
h1 { font-size:1.05rem; margin:0; }
nav button { background:none; border:1px solid var(--line); color:var(--dim); border-radius:.4rem; padding:.25rem .7rem; margin-left:.3rem; cursor:pointer; }
nav button.on { color:var(--fg); border-color:var(--accent); }
.chip { background:var(--card); border:1px solid var(--line); border-radius:.4rem; padding:.1rem .45rem; font-size:.8rem; color:var(--dim); }
.card { background:var(--card); border:1px solid var(--line); border-radius:.6rem; padding:.9rem 1rem; margin-top:.8rem; }
.card h2,.card h3 { margin:.1rem 0 .5rem; font-size:.95rem; color:var(--accent); }
.grid3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:.8rem; }
.row { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-bottom:.4rem; }
input,select { background:#0a0d12; border:1px solid var(--line); color:var(--fg); border-radius:.4rem; padding:.35rem .55rem; }
button { background:#21262d; color:var(--fg); border:1px solid var(--line); border-radius:.4rem; padding:.32rem .75rem; cursor:pointer; }
button.accent { background:var(--accent); color:#04121f; border-color:var(--accent); font-weight:600; }
button:hover { filter:brightness(1.15); }
.hint { color:var(--dim); font-size:.85rem; }
.hidden { display:none; }
pre { background:#0a0d12; border:1px solid var(--line); border-radius:.5rem; padding:.7rem; overflow:auto; font-size:.78rem; white-space:pre-wrap; }
.mk,.bill { padding:.28rem 0; border-bottom:1px dashed var(--line); }
footer { margin-top:2rem; color:var(--dim); font-size:.8rem; }
a { color:var(--accent); }