* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #eef1f5;
    color: #222;
}
.container { max-width: 1100px; margin: 35px auto; padding: 0 18px 50px; }
.page-title { margin-bottom: 20px; }
.page-title h1 { margin: 0; font-size: 30px; }
.page-title p { margin: 5px 0; color: #777; }

.card {
    background: #fff;
    border-radius: 10px;
    padding: 22px;
    margin-bottom: 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.card h2 { margin: 0 0 18px; font-size: 18px; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.full { grid-column: 1 / -1; }
label { display:block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
input, textarea {
    width: 100%; padding: 11px 12px; border: 1px solid #ccd2da;
    border-radius: 6px; font: inherit; background:#fff;
}
.section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.section-head h2 { margin:0; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th, td { padding:9px 7px; border-bottom:1px solid #e1e5ea; text-align:left; }
th { background:#f4f6f8; font-size:12px; }
td input { min-width:80px; padding:8px; }
.remove { border:0; background:transparent; color:#b00020; font-size:22px; cursor:pointer; }
.actions { display:flex; gap:10px; justify-content:flex-end; }
.btn { border:0; border-radius:6px; padding:12px 20px; cursor:pointer; font-weight:700; }
.btn.primary { background:#17253a; color:#fff; }
.btn.secondary { background:#e8ebef; color:#222; }

.invoice-body { background:#eee; padding:25px; }
.print-bar { max-width: 210mm; margin:0 auto 12px; display:flex; justify-content:flex-end; gap:8px; }
.print-bar button { border:0; padding:10px 16px; border-radius:5px; cursor:pointer; font-weight:bold; }

.invoice-page {
    width: 210mm;
    min-height: 297mm;
    margin: auto;
    background:#fff;
    padding: 14mm;
    box-shadow:0 4px 20px rgba(0,0,0,.15);
    font-size:11px;
}
.invoice-header { display:flex; justify-content:space-between; align-items:center; border-bottom:3px solid #17253a; padding-bottom:12px; }
.brand { display:flex; gap:12px; align-items:center; }
.logo-placeholder {
    width:50px; height:50px; border:2px solid #17253a; border-radius:6px;
    display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:bold;
}
.brand h1 { margin:0; font-size:20px; }
.brand p { margin:4px 0 0; font-size:8px; letter-spacing:.5px; }
.invoice-title { text-align:right; }
.invoice-title h2 { margin:0; font-size:28px; letter-spacing:1px; }
.invoice-title strong { font-size:12px; }

.company-contact { padding:8px 0 12px; display:flex; gap:14px; flex-wrap:wrap; font-size:9px; color:#555; border-bottom:1px solid #ddd; }
.invoice-meta { display:grid; grid-template-columns:1fr 170px; gap:20px; padding:15px 0; }
.invoice-meta h3, .payment-box h3, .terms h3 { margin:0 0 7px; font-size:10px; letter-spacing:.6px; }
.bill-to strong { display:block; font-size:13px; margin-bottom:4px; }
.bill-to p, .payment-box p { margin:3px 0; }
.dates div { display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px solid #eee; }
.dates span { color:#777; }

.invoice-table { font-size:10px; margin-top:4px; }
.invoice-table th { background:#17253a; color:#fff; padding:8px 6px; }
.invoice-table td { padding:7px 6px; }
.invoice-table .desc { width:43%; }

.bottom-grid { display:grid; grid-template-columns:1fr 240px; gap:25px; margin-top:18px; }
.payment-box { border:1px solid #ddd; padding:12px; min-height:105px; }
.totals { border-top:1px solid #ddd; }
.totals div { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid #eee; }
.grand-total { background:#17253a; color:#fff; padding:10px 8px !important; margin-top:4px; font-size:13px; }

.terms { margin-top:16px; border-top:1px solid #ddd; padding-top:10px; }
.terms p { margin:0; line-height:1.4; white-space:normal; }
.invoice-footer { margin-top:25px; display:flex; justify-content:space-between; align-items:flex-end; }
.invoice-footer p { font-weight:bold; font-size:10px; }
.signature { width:190px; text-align:center; }
.signature-line { border-bottom:1px solid #333; height:28px; margin-bottom:5px; }
.signature strong, .signature small { display:block; font-size:8px; }

@page { size:A4; margin:0; }
@media (max-width: 800px) {
    .grid, .invoice-meta, .bottom-grid { grid-template-columns:1fr; }
    .invoice-page { width:100%; min-height:auto; }
    .invoice-body { padding:8px; }
}