:root{--bg:#f7fff6;--pri:#2f855a;--pri-50:#e6f4ec;--ink:#1a202c;--mut:#718096;}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji';background:var(--bg);color:var(--ink)}
header{display:flex;align-items:center;gap:16px;padding:10px 16px;background:white;border-bottom:1px solid #e2e8f0;position:sticky;top:0;z-index:10}
header img.logo{height:48px}
h1{font-size:22px;margin:0}
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.card{background:white;border:1px solid #e2e8f0;border-radius:12px;padding:16px;margin-bottom:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--pri);color:white;border:none;border-radius:10px;padding:10px 14px;font-weight:600;text-decoration:none}
.btn.secondary{background:#4a5568}
.btn.ghost{background:transparent;border:1px solid #cbd5e0;color:#2d3748}
.btn + .btn{margin-left:8px}
.input, select, textarea{width:100%;padding:10px;border:1px solid #cbd5e0;border-radius:10px}
label{font-size:12px;color:#4a5568}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
table{width:100%;border-collapse:collapse;background:white;border-radius:10px;overflow:hidden}
th,td{padding:10px;border-bottom:1px solid #e2e8f0;text-align:left}
th{background:var(--pri-50);font-weight:700}
tr:last-child td{border-bottom:none}
.badge{display:inline-block;padding:3px 8px;border-radius:999px;background:#edf2f7;color:#2d3748;font-size:12px}
.total{font-weight:700;font-size:18px;text-align:right}
.note{color:var(--mut);font-size:12px}
footer{padding:24px;text-align:center;color:#718096}
.invoice{max-width:800px;margin:0 auto;background:white;border:1px solid #e2e8f0;border-radius:12px;padding:24px}
.invoice header{position:static;border:none;padding:0;margin-bottom:12px;gap:12px}
.invoice .meta{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.print-actions{display:flex;justify-content:flex-end;gap:8px;margin-bottom:12px}
hr.sep{border:0;border-top:1px solid #e2e8f0;margin:12px 0}
.small{font-size:12px;color:#4a5568}
.kv{display:grid;grid-template-columns:160px 1fr;gap:6px}
@media (max-width:900px){.grid{grid-template-columns:1fr}}

/* Print: only the invoice */
@media print{
  body{background:#ffffff !important}
  header, .print-actions, .container > *:not(.invoice), .invoice + *, footer { display:none !important }
  .container{max-width:none !important; margin:0 !important; padding:0 !important}
  .invoice{border:none !important; box-shadow:none !important; margin:0 !important; padding:24px !important; width:100% !important}
  .invoice header{display:flex !important; align-items:center !important}
  .invoice .card{border:none !important; padding:0 !important}
  table{page-break-inside:auto}
  tr{page-break-inside:avoid; page-break-after:auto}
}