:root { --brand:#0f766e; --bg:#f5f7f6; --card:#fff; --text:#17201e; --muted:#667370; --line:#dde4e2; --bad:#b42318; --good:#067647; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--text); padding-bottom:env(safe-area-inset-bottom); }
.top { position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:.5rem; background:var(--brand); color:#fff; padding:.7rem 1rem; padding-top:calc(.7rem + env(safe-area-inset-top)); }
.brand { color:#fff; font-weight:700; font-size:1.2rem; text-decoration:none; }
#who { font-size:.85rem; }
#who button { background:transparent; color:#fff; border:1px solid #ffffff88; border-radius:.5rem; padding:.25rem .6rem; font-size:.85rem; }
main { max-width:640px; margin:0 auto; padding:1rem; }
h1 { font-size:1.4rem; margin:.2rem 0 1rem; }
h2 { font-size:1.05rem; margin:1.4rem 0 .5rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:.9rem; padding:.9rem 1rem; margin:.6rem 0; }
a.card { display:block; color:inherit; text-decoration:none; }
.row { display:flex; justify-content:space-between; align-items:baseline; gap:.75rem; }
.muted { color:var(--muted); font-size:.9rem; }
.amount { font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.pos { color:var(--good); } .neg { color:var(--bad); }
.badge { display:inline-block; font-size:.72rem; padding:.1rem .5rem; border-radius:1rem; background:#e6f2f0; color:var(--brand); margin-left:.3rem; }
label { display:block; font-size:.9rem; margin:.7rem 0 .2rem; color:var(--muted); }
input, select, textarea { width:100%; font:inherit; padding:.7rem .75rem; border:1px solid var(--line); border-radius:.6rem; background:#fff; color:var(--text); }
input.big { font-size:2rem; font-weight:600; text-align:center; }
button, .btn { font:inherit; font-weight:600; border:0; border-radius:.7rem; padding:.8rem 1rem; background:var(--brand); color:#fff; width:100%; margin-top:1rem; text-align:center; text-decoration:none; display:block; cursor:pointer; }
button.secondary, .btn.secondary { background:#e6f2f0; color:var(--brand); }
button.small { width:auto; padding:.4rem .8rem; margin:0; font-size:.85rem; }
button:disabled { opacity:.6; }
.err { color:var(--bad); font-size:.9rem; margin:.4rem 0; }
.ok { color:var(--good); font-size:.9rem; margin:.4rem 0; }
.seg { display:flex; gap:.4rem; } .seg button { margin:0; background:#e6f2f0; color:var(--brand); padding:.55rem .3rem; font-size:.9rem; }
.seg button.on { background:var(--brand); color:#fff; }
.share { display:flex; align-items:center; gap:.6rem; margin:.4rem 0; } .share span { flex:1; } .share input { width:8rem; }
.fab { position:fixed; right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom)); width:auto; padding:.9rem 1.2rem; border-radius:2rem; box-shadow:0 4px 14px #0003; margin:0; }
.copy { word-break:break-all; font-size:.8rem; background:#f0f3f2; padding:.5rem; border-radius:.5rem; margin-top:.5rem; }
.spacer { height:5rem; }
.share input[type=checkbox] { width:1.5rem; height:1.5rem; }
#who{white-space:nowrap}
button.danger { background:#fde8e6; color:var(--bad); }
.actions { margin-top:.6rem; justify-content:flex-start; } .actions .btn.small { width:auto; padding:.4rem .8rem; margin:0; font-size:.85rem; }
progress { width:100%; height:.7rem; margin:.5rem 0 .3rem; border:0; border-radius:1rem; overflow:hidden; background:#e6ebe9; accent-color:var(--brand); appearance:none; -webkit-appearance:none; }
progress::-webkit-progress-bar { background:#e6ebe9; }
progress::-webkit-progress-value { background:var(--brand); }
progress::-moz-progress-bar { background:var(--brand); }
.budget.warning { border-color:#d97706; background:#fffbeb; }
.budget.warning progress::-webkit-progress-value { background:#d97706; } .budget.warning progress::-moz-progress-bar { background:#d97706; }
.budget.over { border-color:var(--bad); background:#fef3f2; }
.budget.over progress::-webkit-progress-value { background:var(--bad); } .budget.over progress::-moz-progress-bar { background:var(--bad); }
.alert { font-size:.9rem; font-weight:600; margin:.4rem 0 0; } .alert.warning { color:#b45309; } .alert.over { color:var(--bad); }
.badge.off { background:#f0f0ee; color:var(--muted); }
.btn.disabled, .btn[aria-disabled=true] { opacity:.5; pointer-events:none; }
.actions.wrap { flex-wrap:wrap; gap:.4rem; }
[hidden] { display:none !important; }
.receipt-img { display:block; width:100%; max-height:16rem; object-fit:contain; background:#f0f3f2; border:1px solid var(--line); border-radius:.6rem; margin:.3rem 0; }
.receipt-img.full { max-height:none; }

/* Entrate e uscite */
.badge.in { background:#dcfae6; color:var(--good); }
.seg button.type-expense.on { background:var(--bad); }
.seg button.type-income.on { background:var(--good); }
button.income { background:var(--good); }
.seg.periods { flex-wrap:wrap; } .seg.periods button { flex:1 1 auto; padding:.5rem .4rem; font-size:.85rem; }
.pnav { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin:.6rem 0; }
.pnav .small { width:2.6rem; height:2.4rem; font-size:1.3rem; line-height:1; padding:0; }
.plabel { flex:1; text-align:center; text-transform:capitalize; }
.custom .pair { display:flex; gap:.6rem; } .custom .pair > div { flex:1; } .custom button { margin-top:.7rem; }
.stats .cur { font-weight:700; color:var(--brand); margin-bottom:.4rem; }
.tot { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; text-align:center; }
.tot div { display:flex; flex-direction:column; min-width:0; } .tot .amount { font-size:1rem; overflow-wrap:anywhere; white-space:normal; }
h3 { font-size:.95rem; margin:1rem 0 .3rem; }
.chart { width:100%; height:auto; display:block; }
.chart .axis { stroke:var(--line); stroke-width:1; }
.chart .tick { font-size:7px; fill:var(--muted); }
.bar-in { fill:#12b76a; background:#12b76a; } .bar-out { fill:#f04438; background:#f04438; }
.legend-inline { display:flex; gap:1rem; font-size:.8rem; color:var(--muted); }
.dot { display:inline-block; width:.7rem; height:.7rem; border-radius:50%; margin-right:.35rem; vertical-align:middle; }
.donut-wrap { display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.donut { width:11rem; height:11rem; transform:rotate(0); }
.donut-bg { stroke:#edf1f0; } .donut-c { font-size:4.2px; font-weight:700; fill:var(--text); }
.legend { list-style:none; margin:0; padding:0; width:100%; }
.legend li { display:flex; align-items:center; gap:.4rem; padding:.2rem 0; font-size:.9rem; }
.legend .lname { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .legend .pct { width:2.6rem; text-align:right; }
circle.s0,.dot.s0{stroke:#0f766e;background:#0f766e} circle.s1,.dot.s1{stroke:#f79009;background:#f79009} circle.s2,.dot.s2{stroke:#2e90fa;background:#2e90fa}
circle.s3,.dot.s3{stroke:#d444f1;background:#d444f1} circle.s4,.dot.s4{stroke:#f04438;background:#f04438} circle.s5,.dot.s5{stroke:#66c61c;background:#66c61c}
circle.s6,.dot.s6{stroke:#6172f3;background:#6172f3} circle.s7,.dot.s7{stroke:#ee46bc;background:#ee46bc} circle.s8,.dot.s8{stroke:#15b79e;background:#15b79e}
circle.s9,.dot.s9{stroke:#b54708;background:#b54708} circle.s10,.dot.s10{stroke:#7a5af8;background:#7a5af8} circle.s11,.dot.s11{stroke:#98a2b3;background:#98a2b3}
.basis { margin-top:1rem; }
.periodbar { display:flex; justify-content:space-between; align-items:center; gap:.6rem; } .periodbar .btn { margin:0; }
.card.inactive { opacity:.7; }
.editcat { margin-top:.6rem; } .editcat input, .editcat select { margin-bottom:.4rem; }