:root{--brand:#1f3a5f;--accent:#e07a1f;--bg:#f4f6f9;--card:#fff;--line:#dfe3ea;--muted:#6b7686;--ok:#1d7a46;--bad:#b3261e;--warn:#9a6700}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:#1c2430}
a{color:var(--brand)}
.top{display:flex;align-items:center;justify-content:space-between;background:#fff;color:var(--brand);padding:8px 16px;border-top:4px solid var(--accent)}
.brand{display:inline-flex;align-items:center;text-decoration:none}.brand img{display:block;height:48px;width:auto}@media(min-width:700px){.brand img{height:60px}}
.top .link{color:var(--brand)}.top{border-bottom:1px solid var(--line)}
.nav{display:flex;gap:4px;overflow-x:auto;background:#fff;border-bottom:1px solid var(--line);padding:0 8px;position:sticky;top:0;z-index:5;scrollbar-width:none}
.nav a{padding:12px 10px;text-decoration:none;color:#334;white-space:nowrap;border-bottom:3px solid transparent;font-size:15px}
.nav a.on{border-color:var(--accent);color:var(--brand);font-weight:600}
main{max-width:1100px;margin:0 auto;padding:14px}
h1{font-size:22px;margin:6px 0 12px}h2{font-size:18px;margin:22px 0 10px}h3{font-size:16px;margin:14px 0 6px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.row.between{justify-content:space-between}
.grid{display:grid;gap:12px;grid-template-columns:1fr}
.kpis{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.kpi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px}.kpi span{display:block;color:var(--muted);font-size:13px}.kpi b{font-size:20px}
.kpi.big{grid-column:1/-1;background:var(--brand);color:#fff;border:0}.kpi.big span{color:#cfd8e6}.kpi.big b{font-size:30px}
.muted{color:var(--muted)}.small{font-size:13px}.danger{color:var(--bad)!important}.ok{color:var(--ok)}.owe{color:var(--bad);font-weight:700}
.btn{display:inline-block;background:var(--brand);color:#fff;border:0;border-radius:8px;padding:10px 14px;font-size:15px;text-decoration:none;cursor:pointer;min-height:42px}
.btn.accent{background:var(--accent)}.btn.ghost{background:#fff;color:var(--brand);border:1px solid var(--brand)}.btn.danger{background:var(--bad);color:#fff!important}
.btn.sm{padding:6px 10px;min-height:34px;font-size:14px}
.link{background:none;border:0;color:var(--brand);text-decoration:underline;cursor:pointer;font-size:14px;padding:0}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
form.inline{display:inline}
label{display:block;font-size:14px;color:#3a4552;margin-bottom:10px}
input,select,textarea{display:block;width:100%;font:inherit;font-size:16px;padding:9px 10px;border:1px solid #c5ccd6;border-radius:8px;background:#fff;margin-top:4px}
textarea{resize:vertical}
.form-grid{display:grid;gap:0 12px;grid-template-columns:1fr}
.flash{background:#e8f4ec;border:1px solid #b6dcc4;color:#14532d;padding:10px 12px;border-radius:8px;margin-bottom:12px}
.flag{background:#fff6e0;border:1px solid #f0d28a;color:#6b4e00;padding:10px 12px;border-radius:8px;margin:8px 0}
.void{background:#fdecea;border:1px solid #f3b8b2;color:#7a1a12;padding:10px 12px;border-radius:8px;margin:8px 0}
.pre{white-space:pre-wrap}
.badge{display:inline-block;font-size:12px;padding:2px 8px;border-radius:999px;background:#e8ecf2;color:#334;text-transform:capitalize;white-space:nowrap}
.b-paid,.b-complete,.b-accepted{background:#dff3e6;color:#14532d}.b-unpaid,.b-declined,.b-void{background:#fde2df;color:#7a1a12}
.b-partial,.b-active,.b-sent{background:#e3ecfb;color:#163c7a}.b-draft,.b-quoted{background:#eef0f3}.b-closed{background:#e5e5e5}
.b-deposit{background:#efe6fb;color:#4a2a7a}.b-final{background:#fff0de;color:#7a4300}.b-review{background:#fff6e0;color:#6b4e00}
.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tbl th,.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{background:#f0f3f7;font-size:13px;color:#4a5563}.num{text-align:right!important;white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.totals{margin:12px 0 0 auto;max-width:340px}.totals div{display:flex;justify-content:space-between;padding:4px 0}
.totals .grand{border-top:2px solid #333;font-size:18px;margin-top:4px;padding-top:6px}.totals .bal{font-size:18px;color:var(--bad)}
.line{border:1px solid var(--line);border-radius:8px;padding:10px;margin-bottom:8px;background:#fafbfc}
.line-nums{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;align-items:end}.line-nums label{margin:6px 0 0}.line-nums .rm{grid-column:1/-1;justify-self:end}
output.amt{display:block;padding:10px 0;font-weight:600}
.search{display:flex;gap:8px}.search input{margin:0}
dl.info{display:grid;grid-template-columns:110px 1fr;gap:4px 10px;margin:0}dl.info dt{color:var(--muted);font-size:14px}dl.info dd{margin:0;word-break:break-word}
.login{max-width:360px;margin:40px auto}
@media (max-width:719px){
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}.tbl thead{display:none}.tbl{border:0;background:none}
  .tbl tr{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;padding:6px 10px}
  .tbl td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:12px;text-align:right}
  .tbl td::before{content:attr(data-label);color:var(--muted);font-size:13px;text-align:left;flex:0 0 auto}
  .tbl td.num{text-align:right}
}
@media (min-width:720px){
  main{padding:20px}.kpis{grid-template-columns:repeat(4,1fr)}.kpi.big{grid-column:span 1}
  .grid.two{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr 1fr}.form-grid .full{grid-column:1/-1}
  .line{display:grid;grid-template-columns:1fr 360px;gap:10px}.line textarea{margin:0;height:100%}
}