:root{
            --primary:#0f3d68;
            --primary-dark:#082a49;
            --accent:#f59e0b;
            --success:#0f766e;
            --danger:#b91c1c;
            --surface:#ffffff;
            --page:#eef3f8;
            --muted:#64748b;
            --border:#d6e0ea;
            --soft:#f7fafc;
            --shadow:0 18px 50px rgba(15,61,104,.12);
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
            background:linear-gradient(135deg,#eaf1f8 0%,#f8fafc 45%,#e9f2fb 100%);
            color:#172033;
        }
        button,input,select,textarea{font:inherit}
        .app-shell{max-width:1500px;margin:auto;padding:24px}
        .topbar{
            display:flex;justify-content:space-between;align-items:center;gap:18px;
            background:linear-gradient(135deg,var(--primary),var(--primary-dark));
            color:#fff;padding:20px 24px;border-radius:20px;box-shadow:var(--shadow);margin-bottom:22px
        }
        .brand h1{margin:0;font-size:clamp(22px,3vw,34px);letter-spacing:-.6px}
        .brand p{margin:5px 0 0;color:#dceafb;font-size:14px}
        .toolbar{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
        .btn{
            border:0;border-radius:10px;padding:11px 15px;font-weight:700;cursor:pointer;
            display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.2s
        }
        .btn:hover{transform:translateY(-1px)}
        .btn-light{background:#fff;color:var(--primary)}
        .btn-accent{background:var(--accent);color:#271703}
        .btn-success{background:#0d9488;color:#fff}
        .btn-danger{background:#fee2e2;color:var(--danger)}
        .btn-outline{background:transparent;color:var(--primary);border:1px solid #bfd0df}
        .layout{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:22px;align-items:start}
        .panel{
            background:rgba(255,255,255,.96);border:1px solid rgba(214,224,234,.9);
            border-radius:18px;box-shadow:var(--shadow);overflow:hidden
        }
        .panel-header{
            padding:17px 20px;border-bottom:1px solid var(--border);display:flex;
            justify-content:space-between;align-items:center;gap:12px;background:#fbfdff
        }
        .panel-header h2{margin:0;font-size:18px;color:var(--primary)}
        .panel-body{padding:20px}
        .section{
            border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:16px;background:#fff
        }
        .section-title{
            display:flex;justify-content:space-between;align-items:center;gap:12px;
            margin:0 0 14px;color:var(--primary);font-size:15px;text-transform:uppercase;letter-spacing:.6px
        }
        .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
        .col-12{grid-column:span 12}.col-8{grid-column:span 8}.col-6{grid-column:span 6}
        .col-4{grid-column:span 4}.col-3{grid-column:span 3}.col-2{grid-column:span 2}
        label{display:block;font-size:12px;font-weight:800;color:#45556b;margin-bottom:6px}
        input,select,textarea{
            width:100%;border:1px solid #cdd9e5;border-radius:9px;padding:10px 11px;
            background:#fff;color:#172033;outline:none;transition:.2s
        }
        input:focus,select:focus,textarea:focus{border-color:#6997c2;box-shadow:0 0 0 3px rgba(15,61,104,.09)}
        textarea{min-height:74px;resize:vertical}
        .hint{font-size:11px;color:var(--muted);margin-top:5px}
        .badge{font-size:11px;background:#e6f0fa;color:var(--primary);padding:5px 8px;border-radius:999px;font-weight:800}
        .items-wrap{overflow:auto;border:1px solid var(--border);border-radius:12px}
        table{width:100%;border-collapse:collapse}
        th{
            background:#edf4fb;color:var(--primary);font-size:11px;text-transform:uppercase;
            letter-spacing:.3px;padding:10px 8px;border-bottom:1px solid var(--border);white-space:nowrap
        }
        td{padding:8px;border-bottom:1px solid #e7edf3;vertical-align:top}
        td input,td select,td textarea{min-width:80px;padding:8px;font-size:13px}
        .desc-field{min-width:220px;min-height:42px}
        .row-total{font-weight:800;white-space:nowrap}
        .remove-row{padding:8px 10px}
        .invoice-preview{position:sticky;top:15px}
        .invoice-paper{
            background:#fff;color:#111827;padding:20px;border-radius:14px;min-height:680px;
            box-shadow:0 12px 35px rgba(15,23,42,.08);font-size:12px
        }
        .invoice-head{
            display:flex;justify-content:space-between;gap:15px;border-bottom:3px solid var(--primary);
            padding-bottom:14px;margin-bottom:12px
        }
        .invoice-head h2{margin:0;color:var(--primary);font-size:22px}
        .invoice-title{text-align:right}
        .invoice-title strong{display:block;color:var(--primary);font-size:20px;letter-spacing:1px}
        .small{font-size:11px;color:#475569;line-height:1.55}
        .preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
        .preview-box{border:1px solid #d9e2eb;border-radius:8px;padding:9px;min-height:95px}
        .preview-box h4{margin:0 0 5px;color:var(--primary);font-size:11px;text-transform:uppercase}
        .preview-meta{display:grid;grid-template-columns:1fr 1fr;border:1px solid #d9e2eb;border-radius:8px;overflow:hidden;margin-bottom:10px}
        .preview-meta div{padding:7px 9px;border-bottom:1px solid #e5ebf1}
        .preview-meta div:nth-child(odd){border-right:1px solid #e5ebf1}
        .preview-table th{background:var(--primary);color:white}
        .preview-table td{font-size:10px;padding:6px}
        .summary{
            margin-left:auto;width:72%;border:1px solid #d9e2eb;border-radius:8px;overflow:hidden;margin-top:10px
        }
        .summary-row{display:flex;justify-content:space-between;padding:7px 10px;border-bottom:1px solid #e5ebf1}
        .summary-row.total{background:#edf4fb;color:var(--primary);font-size:14px;font-weight:900}
        .amount-words{margin-top:10px;border:1px solid #d9e2eb;border-radius:8px;padding:9px}
        .footer-note{display:flex;justify-content:space-between;gap:20px;margin-top:28px}
        .signature{text-align:center;min-width:170px}
        .signature-space{height:50px}
        .muted-card{background:#f8fafc;border:1px dashed #cbd5e1;border-radius:12px;padding:12px;color:#475569;font-size:12px}
        .tax-mode{font-weight:800;color:var(--success)}
        .status-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
        @media(max-width:1100px){
            .layout{grid-template-columns:1fr}
            .invoice-preview{position:static}
        }
        @media(max-width:720px){
            .app-shell{padding:10px}
            .topbar{border-radius:14px;padding:16px;align-items:flex-start;flex-direction:column}
            .toolbar{justify-content:flex-start}
            .grid{grid-template-columns:1fr}
            [class^="col-"]{grid-column:1!important}
            .preview-grid{grid-template-columns:1fr}
            .preview-meta{grid-template-columns:1fr}
            .preview-meta div:nth-child(odd){border-right:0}
            .summary{width:100%}
            .panel-body{padding:12px}
        }
        @media print{
            @page{size:A4;margin:9mm}
            body{background:#fff}
            .topbar,.editor-panel,.panel-header,.screen-only{display:none!important}
            .app-shell{max-width:none;padding:0}
            .layout{display:block}
            .panel{border:0;box-shadow:none}
            .invoice-preview{position:static}
            .panel-body{padding:0}
            .invoice-paper{box-shadow:none;border-radius:0;padding:0;min-height:auto}
        }


.insurance-preview{
    margin-top:7px;
    border:1px solid #d9e2eb;
    border-radius:8px;
    overflow:hidden;
}
.insurance-preview-title{
    padding:6px 8px;
    background:#edf4fb;
    color:var(--primary);
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
}
.insurance-preview-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
}
.insurance-preview-grid > div{
    padding:5px 7px;
    border-bottom:1px solid #e5ebf1;
    font-size:8.5px;
}
.insurance-preview-grid > div:nth-child(odd){
    border-right:1px solid #e5ebf1;
}
.insurance-preview-notes{
    grid-column:1 / -1;
    border-right:0 !important;
}

@media print{
    @page{size:A4 portrait;margin:6mm}

    html,body{width:100%;margin:0;padding:0;background:#fff}
    .topbar,.editor-panel,.panel-header,.screen-only{display:none!important}
    .app-shell{width:100%;max-width:none;margin:0;padding:0}
    .layout{display:block}
    .panel,.invoice-preview{position:static;width:100%;border:0;box-shadow:none;overflow:visible}
    .panel-body{padding:0}

    .invoice-paper{
        width:100%;
        height:285mm;
        min-height:285mm;
        max-height:285mm;
        margin:0;
        padding:0;
        overflow:hidden;
        border-radius:0;
        box-shadow:none;
        font-size:7.4px;
    }

    .invoice-head{margin-bottom:4px;padding-bottom:5px}
    .invoice-head h2{font-size:15px}
    .invoice-title strong{font-size:14px}
    .small{font-size:6.7px;line-height:1.15}
    .preview-meta{margin-bottom:4px}
    .preview-meta div{padding:3px 4px;min-height:24px}
    .preview-grid{gap:4px;margin-bottom:4px}
    .preview-box{min-height:46px;padding:4px}
    .preview-box h4{margin-bottom:2px;font-size:7px}
    .preview-table th,.preview-table td{padding:2px;font-size:6.2px}
    .summary{width:66%;margin-top:4px}
    .summary-row{padding:2px 4px}
    .summary-row.total{font-size:8.5px}
    .amount-words{margin-top:4px;padding:4px}
    .insurance-preview{margin-top:4px}
    .insurance-preview-title{padding:3px 5px;font-size:6.8px}
    .insurance-preview-grid > div{padding:2px 4px;font-size:6.1px}
    .footer-note{margin-top:5px}
    .signature-space{height:15px}
}


.receipt-page{
    margin-top:22px;
}

.receipt-paper{
    min-height:680px;
    padding:20px;
    border-radius:14px;
    color:#111827;
    background:#ffffff;
    box-shadow:0 12px 35px rgba(15,23,42,.08);
}

.receipt-heading{
    margin:15px 0;
    padding:11px;
    border:2px solid var(--primary);
    color:var(--primary);
    text-align:center;
    font-size:21px;
    font-weight:900;
    letter-spacing:1px;
}

.receipt-table{
    width:100%;
    border-collapse:collapse;
}

.receipt-table td{
    padding:10px;
    border:1px solid #d9e2eb;
    vertical-align:top;
}

.receipt-table td:first-child{
    width:35%;
    color:var(--primary);
    background:#f8fafc;
    font-weight:800;
}

.receipt-amount{
    margin:18px 0;
    padding:18px;
    border:2px solid var(--primary);
    border-radius:12px;
    text-align:center;
    background:#f4f8fc;
}

.receipt-amount span{
    display:block;
    color:#64748b;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
}

.receipt-amount strong{
    display:block;
    margin-top:5px;
    color:var(--primary);
    font-size:30px;
}

.receipt-against{
    min-height:80px;
    margin-top:16px;
    padding:12px;
    border:1px solid #d9e2eb;
    border-radius:9px;
}

.receipt-against h4{
    margin:0 0 7px;
    color:var(--primary);
    font-size:11px;
    text-transform:uppercase;
}

.receipt-footer{
    margin-top:55px;
}


@media print{
    .invoice-paper{
        page-break-after:always !important;
        break-after:page !important;
    }

    .receipt-page{
        display:block !important;
        width:100%;
        margin:0;
        page-break-before:always !important;
        break-before:page !important;
    }

    .receipt-paper{
        width:100%;
        height:285mm;
        min-height:285mm;
        max-height:285mm;
        margin:0;
        padding:0;
        overflow:hidden;
        border-radius:0;
        box-shadow:none;
    }

    .receipt-heading{
        margin:10px 0;
        padding:8px;
        font-size:18px;
    }

    .receipt-table td{
        padding:7px;
        font-size:9px;
    }

    .receipt-amount{
        margin:13px 0;
        padding:13px;
    }

    .receipt-footer{
        margin-top:40px;
    }
}


/* =========================================================
   FINAL A4 PRINT LAYOUT
   Page 1: Full GST Invoice + Insurance
   Page 2: Payment Receipt
   ========================================================= */
@media print {

    @page {
        size: A4 portrait;
        margin: 5mm;
    }

    html,
    body {
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
    }

    .topbar,
    .editor-panel,
    .panel-header,
    .screen-only {
        display: none !important;
    }

    .app-shell,
    .layout,
    .panel,
    .invoice-preview,
    .panel-body {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: #ffffff !important;
    }

    .layout {
        display: block !important;
    }

    .invoice-preview {
        position: static !important;
        overflow: visible !important;
    }

    /* PAGE 1 */
    .invoice-paper {
        display: block !important;
        width: 100% !important;
        height: 287mm !important;
        min-height: 287mm !important;
        max-height: 287mm !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        page-break-after: always !important;
        break-after: page !important;
        font-size: 6.6px !important;
        line-height: 1.08 !important;
    }

    .invoice-head {
        gap: 6px !important;
        margin-bottom: 3px !important;
        padding-bottom: 4px !important;
        border-bottom-width: 2px !important;
    }

    .invoice-head h2 {
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.05 !important;
    }

    .invoice-title strong {
        font-size: 12px !important;
        line-height: 1 !important;
    }

    .invoice-title span {
        font-size: 6px !important;
    }

    .small {
        font-size: 5.9px !important;
        line-height: 1.08 !important;
    }

    .preview-meta {
        margin-bottom: 3px !important;
        grid-template-columns: 1fr 1fr !important;
    }

    .preview-meta div {
        min-height: 20px !important;
        padding: 2px 4px !important;
        font-size: 6px !important;
        line-height: 1.05 !important;
    }

    .preview-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 3px !important;
        margin-bottom: 3px !important;
    }

    .preview-box {
        min-height: 40px !important;
        padding: 3px !important;
        border-radius: 4px !important;
    }

    .preview-box h4 {
        margin: 0 0 1px !important;
        font-size: 6.2px !important;
        line-height: 1 !important;
    }

    .preview-table th,
    .preview-table td {
        padding: 1.4px 2px !important;
        font-size: 5.7px !important;
        line-height: 1.05 !important;
    }

    .preview-table th {
        white-space: normal !important;
    }

    .summary {
        width: 62% !important;
        margin-top: 3px !important;
    }

    .summary-row {
        padding: 1.5px 4px !important;
        font-size: 5.9px !important;
        line-height: 1.05 !important;
    }

    .summary-row.total {
        font-size: 7.3px !important;
    }

    .amount-words {
        margin-top: 3px !important;
        padding: 3px 4px !important;
        font-size: 6px !important;
        line-height: 1.05 !important;
    }

    .insurance-preview {
        display: block !important;
        margin-top: 3px !important;
        border-radius: 4px !important;
    }

    .insurance-preview-title {
        padding: 2px 4px !important;
        font-size: 6.2px !important;
        line-height: 1 !important;
    }

    .insurance-preview-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .insurance-preview-grid > div {
        padding: 1.5px 3px !important;
        font-size: 5.6px !important;
        line-height: 1.05 !important;
    }

    .insurance-preview-notes {
        grid-column: 1 / -1 !important;
    }

    .invoice-paper .preview-grid[style*="margin-top"] {
        margin-top: 3px !important;
    }

    .footer-note {
        gap: 8px !important;
        margin-top: 4px !important;
        font-size: 5.8px !important;
        line-height: 1.05 !important;
    }

    .signature {
        min-width: 110px !important;
        font-size: 5.8px !important;
    }

    .signature-space {
        height: 12px !important;
    }

    /* PAGE 2 */
    .receipt-page {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        page-break-before: always !important;
        break-before: page !important;
    }

    .receipt-paper {
        width: 100% !important;
        height: 287mm !important;
        min-height: 287mm !important;
        max-height: 287mm !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .receipt-heading {
        margin: 8px 0 !important;
        padding: 7px !important;
        font-size: 16px !important;
    }

    .receipt-table td {
        padding: 6px !important;
        font-size: 8px !important;
    }

    .receipt-amount {
        margin: 10px 0 !important;
        padding: 10px !important;
    }

    .receipt-amount strong {
        font-size: 23px !important;
    }

    .receipt-against {
        min-height: 60px !important;
        margin-top: 10px !important;
        padding: 8px !important;
    }

    .receipt-footer {
        margin-top: 28px !important;
    }
}