:root { --bg:#f4f1ea; --card:#fff; --ink:#211c15; --muted:#6b6355; --line:#e2ddd1; --brand:#3f6b34; --brand-2:#c67f22; --neg:#b3261e; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
@media (prefers-color-scheme: dark){ :root:not([data-theme=light]){ --bg:#16130e; --card:#201c15; --ink:#efeadf; --muted:#a89e8c; --line:#322c22; --brand:#7fae62; } }
*{ box-sizing:border-box; } [hidden]{ display:none !important; }
body{ margin:0; background:var(--bg); color:var(--ink); line-height:1.5; -webkit-tap-highlight-color:transparent; }
a{ color:var(--brand); text-decoration:none; }
.topbar{ position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:var(--brand); color:#fff; }
.topbar .brand{ display:flex; gap:8px; align-items:center; color:#fff; font-weight:800; }
.topbar .brand img{ border-radius:6px; }
.topbar nav a{ color:#fff; font-weight:700; margin-left:16px; }
.wrap{ max-width:640px; margin:0 auto; padding:16px; padding-bottom:60px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:14px; }
label{ display:block; font-size:.82rem; color:var(--muted); margin:8px 0 4px; }
input,select,textarea{ width:100%; padding:11px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); font-size:1rem; }
.btn{ display:inline-block; background:var(--brand); color:#fff; font-weight:700; padding:12px 18px; border-radius:11px; border:0; cursor:pointer; font-size:1rem; text-align:center; }
.btn.sm{ padding:9px 14px; font-size:.92rem; margin-top:10px; }
.btn.ghost{ background:transparent; color:var(--brand); border:1px solid var(--line); }
.actions{ display:flex; gap:10px; margin-bottom:14px; }
.actions .btn{ flex:1; }
.muted{ color:var(--muted); } .small{ font-size:.85rem; }
.sum{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.sum div{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center; }
.sum b{ display:block; font-size:1.4rem; } .sum span{ font-size:.78rem; color:var(--muted); }
.pos{ color:var(--brand); } .neg{ color:var(--neg); }
.list{ display:grid; gap:10px; }
.job{ display:flex; justify-content:space-between; align-items:center; }
.job strong{ display:block; } .job .amt{ font-weight:800; }
.empty,.lock{ text-align:center; color:var(--muted); }
.lock{ background:#fff7ec; border-color:var(--brand-2); color:var(--ink); }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.row4{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.between{ display:flex; justify-content:space-between; align-items:baseline; }
.big{ font-size:1.5rem; font-weight:800; } .big small{ font-size:.8rem; color:var(--muted); font-weight:600; }
.quick{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.quick button{ width:auto; padding:7px 11px; border:1px solid var(--line); background:var(--bg); border-radius:8px; font-weight:700; font-size:.85rem; cursor:pointer; }
.tally{ margin-top:10px; }
.p-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 2px; border-bottom:1px solid var(--line); }
.x{ width:auto; background:transparent; border:0; color:var(--muted); cursor:pointer; font-size:.95rem; padding:2px 6px; }
.total{ display:flex; justify-content:space-between; align-items:center; font-size:1.1rem; }
.total b{ font-size:1.5rem; }
.back{ display:inline-block; margin-bottom:10px; font-weight:700; }
.invoice .ihead{ display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid var(--brand); padding-bottom:10px; margin-bottom:8px; }
.invoice h2{ margin:0; }
.invoice table{ width:100%; border-collapse:collapse; margin:12px 0; }
.invoice th,.invoice td{ text-align:left; padding:8px 4px; border-bottom:1px solid var(--line); }
.invoice td:last-child,.invoice th:last-child{ text-align:right; }
.invoice tfoot td{ border-bottom:0; border-top:2px solid var(--brand); font-size:1.1rem; }
@media print{ .noprint,.topbar{ display:none !important; } body{ background:#fff; } .card{ border:0; } }