:root{--ink:#17302f;--teal:#0f4c4a;--teal2:#16706b;--sand:#f7f2e8;--card:#fffdf8;--line:#e6dcc8;--amber:#e39b2d;--muted:#6b7a77;--red:#b4452f;--ok:#2f7d4f;--r:16px}
*{box-sizing:border-box}html,body{margin:0}body{font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--sand);-webkit-font-smoothing:antialiased;padding-bottom:84px}
header.top{position:sticky;top:0;z-index:5;background:rgba(247,242,232,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:10px 16px}
.brand{display:flex;gap:8px;align-items:center;font-weight:800;letter-spacing:-.02em;font-size:19px;color:var(--teal);text-decoration:none}.brand img{width:28px;height:28px;border-radius:8px}
.badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:99px;background:#e9e1cf;color:var(--muted)}.badge.pro{background:var(--amber);color:#fff}
main{max-width:760px;margin:0 auto;padding:16px}
h1{font-size:22px;margin:4px 0 12px;letter-spacing:-.02em}h2{font-size:17px;margin:0 0 10px}h3{font-size:15px;margin:0 0 6px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.hero{background:linear-gradient(135deg,var(--teal),var(--teal2));color:#fff;border:0}.hero .muted{color:#cfe5e2}
.big{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.muted{color:var(--muted);font-size:14px}.small{font-size:13px}
.grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.bucket{border-radius:14px;padding:12px;border:1px solid var(--line);background:#fff}.bucket .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}.bucket .amt{font-size:22px;font-weight:700;margin-top:4px}
label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:10px 0 4px}
input,select,textarea{width:100%;font:inherit;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}input:focus,select:focus,textarea:focus{outline:2px solid var(--teal2);border-color:transparent}
.row{display:flex;gap:10px}.row>*{flex:1}
button,.btn{font:inherit;font-weight:700;border:0;border-radius:12px;padding:12px 16px;background:var(--teal);color:#fff;cursor:pointer;text-decoration:none;display:inline-block;text-align:center}
button.ghost,.btn.ghost{background:transparent;color:var(--teal);border:1px solid var(--line)}button.amber,.btn.amber{background:var(--amber)}button.danger{background:transparent;color:var(--red);border:1px solid #ecc9bf}
button.sm{padding:7px 10px;font-size:13px;border-radius:10px}
.full{width:100%}.mt{margin-top:12px}.right{text-align:right}
.list{list-style:none;margin:0;padding:0}.list li{padding:12px 0;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:flex-start;justify-content:space-between}.list li:last-child{border:0}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.chip{font-size:12px;padding:3px 8px;border-radius:99px;background:#f1eadb}
nav.tabs{position:fixed;bottom:0;left:0;right:0;z-index:6;display:flex;justify-content:space-around;background:#fffdf8;border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
nav.tabs button{background:none;color:var(--muted);font-size:12px;font-weight:600;padding:6px 10px;display:flex;flex-direction:column;align-items:center;gap:2px}nav.tabs button.on{color:var(--teal)}nav.tabs svg{width:22px;height:22px}
.lock{display:flex;gap:10px;align-items:center;justify-content:space-between;background:#fff6e6;border:1px dashed var(--amber);border-radius:14px;padding:12px}
.bars{display:flex;align-items:flex-end;gap:6px;height:140px;padding-top:10px}.bars div{flex:1;background:var(--teal2);border-radius:6px 6px 0 0;position:relative;min-height:2px}.bars span{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-size:11px;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;z-index:20;opacity:0;transition:.2s;pointer-events:none}.toast.show{opacity:1}
table.items{width:100%;border-collapse:collapse}table.items td,table.items th{padding:6px 4px;text-align:left;font-size:14px;vertical-align:top}table.items input{padding:8px}
/* invoice preview */
.inv{background:#fff;color:#1d1d1d;border:1px solid var(--line);border-radius:8px;padding:28px;font-size:14px}
.inv h2{font-size:26px;margin:0;letter-spacing:.02em}.inv .head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.inv .head img{max-height:56px;max-width:160px}
.inv table{width:100%;border-collapse:collapse;margin-top:18px}.inv th{text-align:left;border-bottom:2px solid #222;padding:6px 4px;font-size:12px;text-transform:uppercase;letter-spacing:.05em}.inv td{border-bottom:1px solid #eee;padding:8px 4px}.inv .num{text-align:right}
.inv .tot{margin-left:auto;width:260px;margin-top:12px}.inv .tot div{display:flex;justify-content:space-between;padding:4px 0}.inv .tot .grand{font-weight:800;font-size:17px;border-top:2px solid #222;margin-top:4px;padding-top:8px}
.inv .foot{margin-top:24px;font-size:11px;color:#888;text-align:center}
@media print{body{background:#fff;padding:0}header.top,nav.tabs,.noprint,.toast{display:none!important}main{max-width:none;padding:0}.card{border:0;box-shadow:none;padding:0;margin:0}.inv{border:0;padding:0}.printonly{display:block!important}#view>*:not(.printable){display:none!important}}
.hidden{display:none!important}
.rep{width:100%;border-collapse:collapse;font-size:13px}.rep th,.rep td{text-align:left;padding:4px;border-bottom:1px solid #ddd}.rep .num{text-align:right}#report h2{margin-top:16px}