:root{
  --bg:#F0F6E7; --card:#ffffff; --ink:#1B3A1E; --muted:#5d705f; --line:#dfe8d3;
  --green:#1E5B22; --emerald:#2E9E58; --ruby:#C62D5A; --diamond:#1F6BB8; --yellow:#FFFACC;
  --warn-bg:#FFFACC; --err:#B3261E; --err-bg:#FDEEF5; --ok-bg:#E6F3E1;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;font-size:15px;line-height:1.55}
a{color:var(--green)}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
.narrow{max-width:460px}
.top{background:var(--green);color:#fff}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.brand{color:var(--yellow);text-decoration:none;font-weight:600;letter-spacing:.5px}
nav{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
nav a,nav button.linklike{color:#fff;text-decoration:none;font-size:14px;padding:4px 0;border-bottom:2px solid transparent;background:none;border-left:0;border-right:0;border-top:0;font-family:inherit;cursor:pointer}
nav a:hover,nav a.on,nav button.linklike:hover{border-bottom-color:var(--yellow)}
main.wrap{padding-top:22px;padding-bottom:48px}
h1{font-size:26px;font-weight:600;margin:0 0 6px}
h2{font-size:18px;font-weight:600;margin:0 0 10px}
.sub{color:var(--muted);margin:0 0 18px}
.card{background:var(--card);border-radius:16px;padding:20px;margin-bottom:18px;box-shadow:0 1px 0 rgba(30,91,34,.06)}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.balance{background:var(--green);color:#fff}
.balance .big{font-size:44px;font-weight:600;line-height:1.1;margin:6px 0}
.balance .lbl{font-size:12px;letter-spacing:3px;color:var(--yellow)}
.stat .n{font-size:26px;font-weight:600}
.stat .l{color:var(--muted);font-size:13px}
.msg{padding:10px 14px;border-radius:10px;margin:0 0 12px}
.msg.ok{background:var(--ok-bg)}
.msg.err{background:var(--err-bg);color:var(--err)}
.msg.warn{background:var(--warn-bg)}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:500;background:#e9efe2;color:var(--ink);white-space:nowrap}
.tier-emerald{background:var(--emerald);color:#fff}.tier-ruby{background:var(--ruby);color:#fff}.tier-diamond{background:var(--diamond);color:#fff}.tier-none{background:#e9efe2}
.st-requested,.st-pending{background:var(--yellow)}
.st-initiated{background:#eef1ea;color:var(--muted)}
.giftrow td{color:#1E5B22}
.st-confirmed,.st-active{background:#d7ecd0}
.st-dispatched{background:#d4e4f6}
.st-cancelled,.st-rejected,.st-suspended{background:#f4d9e3;color:#7a1f3d}
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font-weight:500;color:var(--muted);text-align:left;font-size:12px;letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid var(--line);padding:8px 8px}
.tbl td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tfoot td{border-bottom:0;padding:6px 8px}
.tbl tr.grand td{font-weight:600;border-top:1px solid var(--line);font-size:16px}
.num{text-align:right!important;white-space:nowrap}
.pos{color:#1d7a3a}.neg{color:var(--err)}
.btn{display:inline-block;background:var(--green);color:#fff;border:0;border-radius:10px;padding:10px 18px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;text-decoration:none}
.btn:hover{filter:brightness(1.1)}
.btn.small{padding:6px 12px;font-size:13px}
.btn.ghost{background:transparent;color:var(--green);border:1.5px solid var(--green)}
.btn.danger{background:var(--ruby)}
.form{display:grid;gap:12px}
.form label{display:grid;gap:4px;font-size:13px;color:var(--muted)}
input,select,textarea{font:inherit;color:var(--ink);padding:10px 12px;border:1.5px solid #cfdcc2;border-radius:10px;background:#fff;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--emerald);outline-offset:1px}
.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:end}
.inline>*{flex:1 1 140px}
.inline .btn{flex:0 0 auto}
.muted{color:var(--muted)}
.bank{background:var(--yellow);border-radius:12px;padding:12px 14px;margin:8px 0}
.cat{font-size:12px;letter-spacing:3px;color:var(--green);margin:18px 0 6px;font-weight:500}
.prod{display:grid;grid-template-columns:1fr auto 110px;gap:2px 12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center}
.prod .nm{font-weight:500}
.prod .pr{color:var(--muted);font-size:13px}
.prod input.qty{width:90px;text-align:center}
.prod .lt{text-align:right;font-weight:500;font-variant-numeric:tabular-nums;color:var(--muted)}
.prod .lt.on{color:var(--ink)}
.summary{position:sticky;bottom:0;background:#fff;border-top:3px solid var(--green);border-radius:14px 14px 0 0;padding:14px 18px;margin:18px -4px 0;box-shadow:0 -6px 18px rgba(30,91,34,.12)}
.summary .row{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.summary .row.t{font-weight:600;font-size:17px}
.summary .due{color:var(--err);font-weight:600}
footer{text-align:center;color:var(--muted);font-size:12px;padding:0 16px 28px}
.right{text-align:right}
@media (max-width:560px){h1{font-size:22px}.balance .big{font-size:36px}}

/* invoice */
.invoice{background:#fff;max-width:760px;margin:20px auto;padding:32px;border-radius:12px}
.invoice h1{margin-bottom:2px}
.invoice .meta{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:18px 0}
@media print{
  body{background:#fff}
  .noprint{display:none!important}
  .invoice{margin:0;padding:0;box-shadow:none;max-width:none}
}
.btn:disabled{opacity:.45;cursor:not-allowed}
.tbl.wraph th{white-space:normal;line-height:1.35;letter-spacing:.5px;vertical-align:bottom}

/* Dark mode: neutral charcoal, with green kept for buttons and links only. The printed invoice stays light. */
@media (prefers-color-scheme:dark){
  :root{color-scheme:dark;--bg:#121412;--card:#1b1e1b;--ink:#e9ede7;--muted:#9ba49a;--line:#2a2f2a;--green:#7fd084;--yellow:#e8d98a;--warn-bg:#3b3214;--err:#ff8aa0;--err-bg:#3a1a21;--ok-bg:#1f2d20}
  .top{background:var(--card);color:var(--ink);border-bottom:1px solid var(--line)}
  nav a,nav button.linklike{color:var(--ink)}
  nav a:hover,nav a.on,nav button.linklike:hover{border-bottom-color:var(--green)}
  .brand{color:var(--green)}
  .card{box-shadow:none;border:1px solid var(--line)}
  .balance{background:var(--card);color:var(--ink)}
  .balance .lbl{color:var(--muted)}
  .balance [style*="--yellow"]{color:var(--muted)!important}
  .btn,.balance .btn:not(.ghost),.btn[style*="--yellow"]{background:var(--green)!important;color:#0e1a0f!important}
  .btn.ghost,.balance .btn.ghost{background:transparent!important;color:var(--green)!important;border:1.5px solid var(--green)!important}
  .btn.danger{background:var(--ruby)!important;color:#fff!important}
  .badge,.tier-none{background:#262b26;color:var(--ink)}
  .tier-emerald{background:var(--emerald);color:#fff}.tier-ruby{background:var(--ruby);color:#fff}.tier-diamond{background:var(--diamond);color:#fff}
  .st-requested,.st-pending{background:#3b3214;color:#f2d27a}
  .st-initiated{background:#262b26;color:var(--muted)}
  .st-confirmed,.st-active{background:#24402a;color:#cfe9d1}
  .st-dispatched{background:#22364d;color:#cfe0f3}
  .st-cancelled,.st-rejected,.st-suspended{background:#4a2030;color:#ffb3c6}
  input,select,textarea{background:var(--card);border-color:#3a403a}
  .bank{background:#262b26}
  .pos{color:#7fd084}
  .summary{background:var(--card);box-shadow:0 -6px 18px rgba(0,0,0,.45)}
  .giftrow td{color:var(--green)}
  .invoice{--ink:#1B3A1E;--muted:#5d705f;--line:#dfe8d3;--green:#1E5B22;--err:#B3261E;color:var(--ink)}
  .invoice .badge{background:#e9efe2;color:#1B3A1E}
  .invoice .btn{background:#1E5B22!important;color:#fff!important}
  .invoice .btn.ghost{background:transparent!important;color:#1E5B22!important;border:1.5px solid #1E5B22!important}
  .invoice .st-confirmed,.invoice .st-active{background:#d7ecd0;color:#1B3A1E}
  .invoice .st-dispatched{background:#d4e4f6;color:#1B3A1E}
  .invoice .st-cancelled{background:#f4d9e3;color:#7a1f3d}
}

/* tiles, date filter, stacked tables on phones */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-top:6px}
.tile{background:#eef4e6;border-radius:14px;padding:14px 16px}
.tile .v{font-size:22px;font-weight:600;line-height:1.25;font-variant-numeric:tabular-nums}
.tile .l{color:var(--muted);font-size:12.5px}
.filter{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end;margin-bottom:12px}
.filter-custom{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end}
.filter select,.filter input{width:auto;min-width:150px}
@media (max-width:640px){
  .stk thead{display:none}
  .stk tr{display:block;border-bottom:1px solid var(--line);padding:8px 0}
  .stk td{display:flex;justify-content:space-between;gap:14px;border:0;padding:4px 0;text-align:right!important;white-space:normal!important}
  .stk td[data-label]::before{content:attr(data-label);color:var(--muted);text-align:left;flex:0 0 auto}
  .stk td:first-child{justify-content:flex-start;text-align:left!important;font-weight:500}
  .stk td:first-child::before{display:none}
  .stk td:empty{display:none}
  .stk tfoot td{display:flex;justify-content:space-between}
}
@media (prefers-color-scheme:dark){.tile{background:#262b26}}