:root { --bg:#f4f6f8; --card:#fff; --ink:#1d2733; --mut:#6b7785; --line:#dde3ea; --pri:#1f5fbf; --ok:#1b8a4b; --warn:#c77700; --bad:#c0392b; }
* { box-sizing:border-box; }
body { margin:0; font:14px/1.45 "Segoe UI",Arial,sans-serif; background:var(--bg); color:var(--ink); }
a { color:var(--pri); text-decoration:none; }
header.top { background:#16243a; color:#fff; display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:0 20px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; padding:10px 0; }
.brand img { height:34px; }
nav { display:flex; flex-wrap:wrap; }
nav a { color:#c9d4e5; padding:14px 14px; }
nav a.on, nav a:hover { color:#fff; background:#1f3556; }
main { max-width:1100px; margin:20px auto; padding:0 16px; }
h1 { font-size:22px; margin:0 0 14px; }
h2 { font-size:16px; margin:0 0 10px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px; margin-bottom:16px; }
.row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:12px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px; }
.stat b { display:block; font-size:22px; margin-top:4px; }
.stat span { color:var(--mut); }
table { width:100%; border-collapse:collapse; background:var(--card); }
th, td { padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
th { background:#eef2f6; font-weight:600; font-size:13px; }
td.r, th.r { text-align:right; }
.tbl { overflow-x:auto; border:1px solid var(--line); border-radius:8px; }
input, select, textarea { width:100%; padding:7px 9px; border:1px solid #c5cdd7; border-radius:5px; font:inherit; background:#fff; }
textarea { min-height:70px; }
label { display:block; font-weight:600; font-size:13px; margin-bottom:3px; }
.f { margin-bottom:10px; }
.cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0 14px; }
.btn { display:inline-block; background:var(--pri); color:#fff; border:0; padding:8px 14px; border-radius:5px; cursor:pointer; font:inherit; }
.btn.sec { background:#e4e9f0; color:var(--ink); }
.btn.bad { background:var(--bad); }
.btn.ok { background:var(--ok); }
.btn.sm { padding:3px 8px; font-size:12px; }
.flash { padding:10px 14px; border-radius:6px; margin-bottom:14px; }
.flash.ok { background:#e2f4e9; color:#16643a; }
.flash.err { background:#fbe5e2; color:#8f2a1f; }
.badge { padding:2px 8px; border-radius:10px; font-size:12px; background:#e4e9f0; }
.b-paid,.b-accepted { background:#d6f0e0; color:#16643a; }
.b-partial,.b-sent { background:#fdeccc; color:#8a5200; }
.b-unpaid,.b-rejected { background:#f9d9d5; color:#8f2a1f; }
.b-invoiced { background:#d9e6fa; color:#174a99; }
.actions { white-space:nowrap; }
.actions form { display:inline; }
.items input { padding:5px 6px; }
.items td { padding:4px; }
.totals { margin-left:auto; max-width:320px; }
.totals div { display:flex; justify-content:space-between; padding:4px 0; }
.totals .g { font-weight:700; font-size:16px; border-top:2px solid var(--ink); margin-top:4px; padding-top:6px; }
.mut { color:var(--mut); }
.logo-prev { max-height:70px; display:block; margin-bottom:8px; }