:root { --bg:#f4f5f9; --card:#fff; --main:#5b6cff; --text:#222; --danger:#e5484d; --ok:#2e9e5b; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background:var(--bg); color:var(--text); }
nav { display:flex; flex-wrap:wrap; gap:14px; align-items:center; padding:12px 20px; background:var(--main); color:#fff; }
nav a { color:#fff; text-decoration:none; padding:4px 8px; border-radius:6px; }
nav a.active, nav a:hover { background:rgba(255,255,255,.2); }
.spacer { flex:1; }
main { max-width:1000px; margin:20px auto; padding:0 16px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.card { background:var(--card); border-radius:12px; padding:16px; margin-bottom:16px; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.tile { text-decoration:none; color:inherit; text-align:center; transition:transform .15s; }
.tile:hover { transform:translateY(-3px); }
.tile .icon { font-size:48px; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.form-grid .full { grid-column:1/-1; }
label { display:flex; flex-direction:column; font-size:.9em; gap:4px; }
input, select, textarea, button { font:inherit; padding:8px; border:1px solid #ccd; border-radius:8px; }
button { background:var(--main); color:#fff; border:none; cursor:pointer; }
button.danger { background:var(--danger); }
form.inline { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:6px 8px; border-bottom:1px solid #eee; }
.photo { width:100%; max-height:200px; object-fit:cover; border-radius:8px; }
.item { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid #eee; flex-wrap:wrap; }
.item.done { opacity:.6; }
.bar { background:#e6e8f0; border-radius:8px; height:12px; overflow:hidden; margin:4px 0; }
.fill { background:var(--ok); height:100%; }
.fill.over { background:var(--danger); }
.big { font-size:1.8em; margin:0; font-weight:bold; }
.over, .neg { color:var(--danger); } .pos { color:var(--ok); }
.error { color:var(--danger); } .success { color:var(--ok); }
.budget-row { margin-bottom:14px; }
.chart-box { position:relative; height:300px; }
.chart-box.small { height:240px; }
.charts { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; }