:root { --bg:#F7F4EF; --card:#FFFFFF; --ink:#221C15; --mut:#5C5348; --line:#E4DCD0;
  --brass:#8A5A22; --brass-ink:#6E4619; --ok:#1E6E45; --bad:#9C2B2B; --amber:#8A6210; }
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--ink); font:15px/1.55 -apple-system, BlinkMacSystemFont,
  "Segoe UI", system-ui, sans-serif; }
.shell { max-width:1080px; margin:0 auto; padding:0 20px; }
nav { background:#221C15; }
.navrow { display:flex; gap:20px; align-items:center; padding:13px 20px; }
nav a { color:#CFC5B6; text-decoration:none; font-size:14px; font-weight:600; }
nav a.on, nav a:hover { color:#fff; }
nav .brand { color:#fff; font-weight:800; font-size:16px; letter-spacing:-.01em; margin-right:8px; }
nav .brand span { color:#C9924B; }
.navout { margin-left:auto; }
.linkish { background:none; border:0; color:#CFC5B6; font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.linkish:hover { color:#fff; }
main { padding:28px 20px 60px; }
main.bare { max-width:420px; margin:9vh auto 0; }
h1 { font-size:22px; letter-spacing:-.015em; margin-bottom:18px; }
h2 { font-size:16px; margin:26px 0 10px; }
.foot { color:var(--mut); font-size:12.5px; padding-block:18px 42px; }
a { color:var(--brass-ink); }

.flash { border-radius:10px; padding:10px 14px; margin-bottom:16px; font-size:14px; font-weight:600; }
.flash.ok { background:#E7F2EA; color:var(--ok); border:1px solid #CBE3D3; }
.flash.bad { background:#F9E9E9; color:var(--bad); border:1px solid #EFD3D3; }

.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px; }
.grid { display:grid; gap:14px; }
.kpis { grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); margin-bottom:22px; }
.kpi .lbl { color:var(--mut); font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.kpi .val { font-size:24px; font-weight:800; letter-spacing:-.02em; margin-top:4px; }
.kpi .sub { color:var(--mut); font-size:12.5px; margin-top:2px; }

table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line);
  border-radius:14px; overflow:hidden; }
th { text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--mut);
  padding:10px 14px; border-bottom:1px solid var(--line); background:#FBF9F5; }
td { padding:11px 14px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:top; }
tr:last-child td { border-bottom:0; }
td.r, th.r { text-align:right; }
.badge { display:inline-block; font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:999px; }
.b-draft { background:#EEE9E1; color:#5C5348; }
.b-sent { background:#F5EAD2; color:var(--amber); }
.b-paid { background:#E7F2EA; color:var(--ok); }
.b-void { background:#EEE9E1; color:#8B8175; }
.b-active { background:#E7F2EA; color:var(--ok); }
.b-completed { background:#E8EDF6; color:#2C4E7E; }
.b-cancelled, .b-overdue { background:#F9E9E9; color:var(--bad); }

form.stack label, .field label { display:block; font-size:12.5px; font-weight:700; color:var(--mut);
  margin:12px 0 4px; }
input[type=text], input[type=email], input[type=date], input[type=password], input[type=number],
select, textarea { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:9px;
  font:inherit; background:#fff; color:var(--ink); }
textarea { min-height:72px; resize:vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible,
a:focus-visible { outline:2px solid var(--brass); outline-offset:2px; }
.btn { display:inline-block; background:var(--brass); color:#fff; border:0; border-radius:9px;
  font:inherit; font-size:14px; font-weight:700; padding:9px 18px; cursor:pointer; text-decoration:none; }
.btn:hover { background:var(--brass-ink); }
.btn.ghost { background:transparent; color:var(--brass-ink); border:1px solid var(--line); }
.btn.ghost:hover { border-color:var(--brass); }
.btn.danger { background:transparent; color:var(--bad); border:1px solid var(--line); }
.btn.danger:hover { border-color:var(--bad); }
.btn.small { font-size:12.5px; padding:5px 12px; }
.actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:16px; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.mut { color:var(--mut); }
.sp { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }

.items th, .items td { padding:8px 10px; }
.items input { padding:7px 9px; }
.totals { margin-top:10px; margin-left:auto; width:min(320px,100%); font-size:14.5px; }
.totals div { display:flex; justify-content:space-between; padding:4px 0; }
.totals .grand { font-weight:800; font-size:16px; border-top:1px solid var(--line); padding-top:8px; }

.chart { display:flex; gap:6px; align-items:flex-end; height:120px; padding:14px 4px 0; }
.chart .bar { flex:1; background:#DECDB2; border-radius:4px 4px 0 0; min-height:2px; position:relative; }
.chart .bar.hot { background:var(--brass); }
.chart .bar span { position:absolute; top:-18px; left:50%; transform:translateX(-50%);
  font-size:10.5px; color:var(--mut); white-space:nowrap; }
.chart-x { display:flex; gap:6px; padding:6px 4px 0; }
.chart-x div { flex:1; text-align:center; font-size:10.5px; color:var(--mut); }

@media (max-width:760px) {
  .row2, .row3 { grid-template-columns:1fr; }
  .navrow { flex-wrap:wrap; gap:12px 16px; }
  .navout { margin-left:0; }
  table { display:block; overflow-x:auto; }
}