@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); font-style: normal; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-style: italic; }
@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight-latin-400-normal.woff2") format("woff2"); font-weight: 400; }
@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight-latin-500-normal.woff2") format("woff2"); font-weight: 500; }
@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight-latin-600-normal.woff2") format("woff2"); font-weight: 600; }
@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight-latin-700-normal.woff2") format("woff2"); font-weight: 700; }

:root {
  --ink: #15120F; --soft: #4D443B; --muted: #6B6158; --brown: #8A541E;
  --olive: #CAC86C; --olive-soft: #E9E8C4; --pink: #E4C0BE; --pink-soft: #F3E1DF;
  --cream: #E8DFD6; --paper: #F6F1EA; --card: #FFFDF9; --rule: #DED5CA; --danger: #9B2C2C;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font: 400 15px/1.5 "Inter Tight", -apple-system, "Helvetica Neue", sans-serif; }
a { color: var(--brown); }
a:hover { color: var(--ink); }
.band { height: 8px; background: linear-gradient(180deg, var(--olive), #F8F7EC 55%, var(--pink)); }
header.top { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; padding: 14px 28px; background: var(--card); border-bottom: 1px solid var(--rule); }
header.top .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
header.top .brand img { height: 22px; }
header.top .brand span { font: 600 12px/1 "Inter Tight", sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--brown); }
header.top nav { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
header.top nav a { text-decoration: none; color: var(--soft); padding: 7px 12px; border-radius: 999px; font-weight: 500; }
header.top nav a:hover, header.top nav a.on { background: var(--cream); color: var(--ink); }
main { max-width: 1180px; margin: 0 auto; padding: 28px 24px 64px; }
h1 { font: 400 40px/1.05 "Instrument Serif", Georgia, serif; margin: 0 0 4px; letter-spacing: -0.5px; }
h2 { font: 400 26px/1.15 "Instrument Serif", Georgia, serif; margin: 0 0 12px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--brown); margin: 0 0 6px; }
.muted { color: var(--muted); }
.row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.spread { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } header.top nav { margin-left: 0; } }
.card { background: var(--card); border: 1px solid var(--rule); border-radius: 18px; padding: 20px 22px; }
.kpi .v { font: 600 26px/1.15 "Inter Tight", sans-serif; font-variant-numeric: tabular-nums; }
.kpi .l { font-size: 13px; color: var(--muted); }
.kpi.alert { background: var(--pink-soft); }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--olive); color: var(--ink); font: 600 14px/1.2 "Inter Tight", sans-serif; text-decoration: none; cursor: pointer; }
.btn:hover { background: #BDBB5A; color: var(--ink); }
.btn.secondary { background: var(--card); }
.btn.secondary:hover { background: var(--cream); }
.btn.pink { background: var(--pink); }
.btn.danger { background: var(--card); color: var(--danger); border-color: var(--danger); }
.btn.small { padding: 6px 12px; font-size: 13px; }
.btn.link { border: 0; background: none; color: var(--brown); padding: 4px 6px; text-decoration: underline; }
form.inline { display: inline; }

.flash { padding: 11px 16px; border-radius: 12px; margin-bottom: 14px; border: 1px solid var(--rule); background: var(--card); }
.flash.ok { background: var(--olive-soft); border-color: var(--olive); }
.flash.warn { background: #F7EBD3; border-color: #D9B36A; }
.flash.error { background: var(--pink-soft); border-color: var(--danger); color: #5A1A1A; }
.lockbar { background: var(--pink); color: var(--ink); padding: 10px 28px; font-weight: 600; border-bottom: 1.5px solid var(--ink); }

table.list { width: 100%; border-collapse: collapse; }
table.list th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--brown); padding: 8px 10px; border-bottom: 1.5px solid var(--ink); }
table.list td { padding: 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.list tr:hover td { background: #FBF7F1; }
td.num, th.num, table.list th.num, table.items th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.scroll { overflow-x: auto; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--ink); white-space: nowrap; }
.b-Unpaid { background: var(--pink); }
.b-Partially { background: #F2D9A6; }
.b-Paid, .b-Accepted { background: var(--olive); }
.b-Cancelled, .b-Rejected, .b-Expired { background: #E4E0DA; color: var(--muted); border-color: #B8B0A6; }
.b-Draft { background: var(--card); border-style: dashed; }
.b-Sent { background: var(--cream); }
.tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 1px; padding: 1px 7px; border-radius: 6px; background: var(--cream); color: var(--soft); }
.overdue { color: var(--danger); font-weight: 600; font-size: 12px; }

label { display: block; font-size: 13px; font-weight: 600; color: var(--soft); margin-bottom: 4px; }
input, select, textarea { width: 100%; padding: 9px 11px; border: 1px solid #C9BFB3; border-radius: 10px; background: #fff; font: 400 15px/1.35 "Inter Tight", sans-serif; color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--olive); border-color: var(--ink); }
textarea { min-height: 76px; resize: vertical; }
.hint { font-size: 12px; color: var(--muted); margin-top: 3px; }
fieldset { border: 0; padding: 0; margin: 0; }

table.items { width: 100%; border-collapse: collapse; }
table.items th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--brown); padding: 6px; border-bottom: 1.5px solid var(--ink); }
table.items td { padding: 6px; vertical-align: top; border-bottom: 1px solid var(--rule); }
table.items input, table.items select { padding: 7px 8px; font-size: 14px; }
table.items .detail { margin-top: 5px; font-size: 13px; color: var(--soft); }
.totals { margin-left: auto; width: min(380px, 100%); }
.totals div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.totals .due { background: var(--pink); margin-top: 6px; padding: 10px 12px; border: 1.5px solid var(--ink); border-radius: 12px; font-weight: 700; font-size: 18px; }
.words { font: italic 400 19px/1.3 "Instrument Serif", Georgia, serif; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
.kv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 14px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 500; }
footer.foot { text-align: center; color: var(--muted); font-size: 12px; padding: 20px; }
footer.foot img { height: 60px; display: block; margin: 0 auto 6px; opacity: .9; }

.subnav { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 4px; padding: 6px; background: var(--card); border: 1px solid var(--rule); border-radius: 999px; width: fit-content; max-width: 100%; }
.subnav a { text-decoration: none; color: var(--soft); padding: 6px 12px; border-radius: 999px; font-weight: 500; font-size: 14px; }
.subnav a:hover, .subnav a.on { background: var(--olive); color: var(--ink); }
table.compact td, table.compact th { padding: 6px 8px; font-size: 14px; }
table.list tfoot th { border-top: 1.5px solid var(--ink); border-bottom: 0; color: var(--ink); font-size: 13px; }
tr.weekend td { background: #FBF6EE; }
tr.empty td { color: var(--muted); }
.neg { color: var(--danger); }
table.report td { padding: 7px 10px; }
table.report tr.r-head td { font: 400 24px/1.2 "Instrument Serif", Georgia, serif; padding-top: 20px; border-bottom: 0; }
table.report tr.r-section td { font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brown); padding-top: 16px; border-bottom: 0; }
table.report tr.r-line td:first-child { padding-left: 24px; }
table.report tr.r-line a { color: var(--ink); text-decoration: none; }
table.report tr.r-line a:hover { text-decoration: underline; }
table.report tr.r-subtotal td { font-weight: 600; border-top: 1.5px solid var(--ink); }
table.report tr.r-total td { font-weight: 700; background: #F4EEE6; border-top: 1.5px solid var(--ink); }
table.report tr.r-grand td { font-weight: 700; background: var(--pink); border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
table.report tr.r-pct td { color: var(--muted); font-size: 13px; }
.bar { height: 9px; border-radius: 6px; margin: 3px 0; min-width: 2px; }
.bar.rev, .key.rev { background: var(--olive); }
.bar.net, .key.net { background: var(--brown); }
.bar.loss, .key.loss { background: var(--danger); }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; }
ol.steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
ol.steps li.done { color: var(--muted); text-decoration: line-through; }
ol.steps li.done a { color: var(--muted); }

/* login & user box (server mode) */
header.top .userbox { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.login-page { min-height: 100vh; }
.login-wrap { max-width: 420px; margin: 0 auto; padding: 56px 20px 40px; display: flex; flex-direction: column; align-items: center; }
.login-card { width: 100%; padding: 30px 28px; }
.login-card h1 { margin-bottom: 18px; }
.login-card .btn { justify-content: center; width: 100%; padding: 11px 16px; }
.login-logo { height: 26px; margin-bottom: 18px; }
.login-note { font-size: 13px; margin: 16px 0 0; }
.login-cat { width: 180px; margin-top: 24px; opacity: .9; }