:root{--bg:#f3f5f9;--card:#fff;--text:#1b2230;--muted:#667085;--accent:#1f5eff;--line:#e4e7ec}
@media(prefers-color-scheme:dark){:root{--bg:#10141c;--card:#181e2a;--text:#e8ecf4;--muted:#98a2b3;--line:#2a3345}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,sans-serif;display:flex;justify-content:center;padding:24px 12px}
.card{background:var(--card);width:100%;max-width:560px;border-radius:14px;padding:28px;box-shadow:0 4px 24px rgba(0,0,0,.08)}
h1{margin:0 0 4px;font-size:1.5rem}.sub{margin:0 0 20px;color:var(--muted)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.full{grid-column:1/-1}
label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:var(--muted)}
input,select{padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font-size:1rem}
button{margin-top:18px;width:100%;padding:12px;border:0;border-radius:8px;background:var(--accent);color:#fff;font-size:1rem;cursor:pointer}
button:hover{opacity:.9}
.error{color:#d92d20;margin:12px 0 0}
table{width:100%;border-collapse:collapse;margin-top:22px}
td{padding:9px 0;border-bottom:1px solid var(--line)}td:last-child{text-align:right;white-space:nowrap}
.total{display:flex;justify-content:space-between;font-size:1.25rem;padding:14px 0}
.note{font-size:.8rem;color:var(--muted);margin:0}
[hidden]{display:none!important}
@media(max-width:480px){.grid{grid-template-columns:1fr}}
h2{font-size:1rem;margin:22px 0 10px}
.checks{display:grid;gap:8px}
label.check{flex-direction:row;align-items:center;gap:10px;font-size:1rem;color:var(--text);cursor:pointer}
label.check input{width:18px;height:18px;padding:0;accent-color:var(--accent)}
.menu{margin-bottom:20px;display:flex;justify-content:center;gap:clamp(8px,3vw,28px);
  padding:clamp(8px,2vw,14px) 12px;background:var(--card);border-bottom:1px solid var(--line)}
.menu a{color:var(--text);text-decoration:none;font-weight:600;white-space:nowrap;
  font-size:clamp(.78rem,3.4vw,1rem);padding:clamp(5px,1.5vw,8px) clamp(8px,2.5vw,16px);border-radius:8px}
.menu a:hover{background:var(--bg)}
.menu a.active{background:var(--accent);color:#fff}