*{box-sizing:border-box}
body{margin:0;background:#edf3fb;font-family:Arial,Helvetica,sans-serif;color:#1f2937}
.app{max-width:1240px;margin:0 auto;padding:24px}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.toolbar h1{margin:0;color:#0f4ea3}
button,.upload-btn{border:0;border-radius:10px;padding:11px 16px;background:#16a34a;color:#fff;font-weight:700;cursor:pointer;display:inline-block}
button:hover,.upload-btn:hover{filter:brightness(.95)}
button.primary{background:#0f62fe}
button.secondary{background:#64748b}
.toolbar-actions{display:flex;gap:10px;flex-wrap:wrap}
.paper{background:#fff;border-radius:18px;box-shadow:0 16px 40px rgba(15,78,163,.12);padding:28px}
.offer-header{display:grid;grid-template-columns:230px 1fr 230px;gap:24px;align-items:start}
.logo-box{height:110px;border:2px dashed #7aa7e8;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#0f62fe;font-size:26px;font-weight:800;background:#f8fbff;overflow:hidden}
.logo-box img{max-width:100%;max-height:100%;object-fit:contain}
.upload-btn{margin-top:10px;width:100%;text-align:center;background:#0f62fe}
.upload-btn input{display:none}
input,textarea,select{width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:10px 12px;margin-bottom:9px;font-size:14px;background:#fff}
textarea{resize:vertical}
.big-input{font-size:22px;font-weight:800;color:#0f4ea3}
.offer-info{text-align:right}
.offer-info h2{font-size:34px;color:#0f62fe;margin:0 0 12px}
.offer-info label{font-size:12px;color:#64748b;font-weight:700}
hr{border:0;border-top:1px solid #e2e8f0;margin:22px 0}
h3{color:#0f4ea3;margin:18px 0 12px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.full{grid-column:1/-1}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th{background:#0f62fe;color:#fff;padding:10px;font-size:13px}
td{border:1px solid #dbe4f0;padding:7px;vertical-align:top}
td input,td textarea,td select{margin:0}
td:nth-child(3),td:nth-child(5),td:nth-child(6),td:nth-child(7),td:nth-child(8){min-width:90px}
.delete-btn{background:#dc2626;padding:9px 11px}
.add-line{margin-top:12px;background:#16a34a}
.bottom{display:grid;grid-template-columns:1fr 360px;gap:24px;margin-top:20px}
.totals{background:#f8fbff;border:1px solid #dbeafe;border-radius:16px;padding:18px}
.totals div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #dbeafe}
.totals div:last-child{border-bottom:0}
.totals .grand{font-size:22px;color:#0f62fe;font-weight:900}
@media(max-width:900px){.offer-header,.bottom,.grid{grid-template-columns:1fr}.offer-info{text-align:left}.toolbar{align-items:flex-start;flex-direction:column;gap:12px}}
@media print{
  body{background:#fff}
  .no-print{display:none!important}
  .app{padding:0;max-width:none}
  .paper{box-shadow:none;border-radius:0;padding:10mm}
  input,textarea,select{border:0;padding:2px;background:transparent}
  td{padding:5px}
}
@page {
  size: A4;
  margin: 10mm;
}

@media print {
  html, body {
    width: 210mm;
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .app {
    width: 190mm !important;
    max-width: 190mm !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .paper {
    width: 190mm !important;
    max-width: 190mm !important;
    margin: 0 auto !important;
    padding: 8mm !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .offer-header {
    grid-template-columns: 45mm 1fr 42mm !important;
    gap: 8mm !important;
  }

  table {
    width: 100% !important;
    table-layout: fixed !important;
    font-size: 10px !important;
  }

  th, td {
    padding: 4px !important;
    word-break: break-word !important;
  }

  input, textarea, select {
    font-size: 10px !important;
    padding: 2px !important;
  }

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

  .totals {
    width: 100% !important;
    margin-top: 10px !important;
  }
  .footer{

margin-top:60px;

background:#0F4EA3;

color:white;

padding:40px;

border-radius:18px 18px 0 0;

}

.footer-container{

display:flex;

justify-content:space-between;

flex-wrap:wrap;

gap:40px;

}

.footer-links{

display:flex;

flex-direction:column;

gap:12px;

}

.footer-links a{

color:white;

text-decoration:none;

transition:.2s;

}

.footer-links a:hover{

padding-left:8px;

}

.copyright{

margin-top:30px;

text-align:center;

opacity:.7;

}
}