body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif} .card-hover{transition:transform .15s ease, box-shadow .15s ease;} .card-hover:hover{transform:translateY(-3px);box-shadow:0 .5rem 1rem rgba(0,0,0,.15);} textarea{min-height:120px} .table-sm td,.table-sm th{padding:.4rem .5rem} .logo-text{letter-spacing:.5px;font-weight:600} .report-images img{max-width:180px;border:1px solid #ccc;border-radius:4px;margin:.25rem;} .quotation-total-row th{background:#f8f9fa;} .form-help{font-size:.75rem;color:#6c757d}

/* Accent card style (different from page background) */
.card-accent{border:1px solid #dbe6ff;border-radius:.5rem;background:#f7faff}
.card-accent .card-header{border-bottom:1px solid #e6eeff;background:#eef5ff}

/* Report layout helpers */
.report-section-title{font-weight:600;font-size:1.05rem;margin-bottom:.5rem}
.report-subsection-title{font-weight:600;font-size:.98rem;margin:.5rem 0 .4rem;color:#0d6efd;border-left:3px solid #0d6efd;background:#fafbff;border-radius:.25rem;padding:.25rem .5rem}
.report-kv .kv-label{color:#6c757d;font-size:.84rem}
.report-kv .kv-value{font-weight:500}
.img-grid{display:grid;grid-template-columns:1fr;gap:.75rem}
@media (min-width:576px){.img-grid{grid-template-columns:1fr 1fr}}
.img-box{border:1px solid #dee2e6;border-radius:.5rem;padding:.5rem;background:#fff;display:flex;align-items:center;justify-content:center;height:220px;overflow:hidden}
.img-box img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.sig-row{display:flex;justify-content:space-between;gap:2rem;margin-top:1.25rem}
.sig-cell{flex:1}
.sig-line{border-bottom:1px dashed #999;height:38px;margin-bottom:.35rem}
.badge-warranty{background:#198754}
.badge-no-warranty{background:#dc3545}

/* Center report view at ~60% on larger screens */
.report-center-60{width:100%;margin:0 auto}
@media (min-width:768px){.report-center-60{width:60%}}

/* A4-like page container for on-screen view */
.a4-page{width:210mm;min-height:297mm;margin:0 auto 2rem;background:#fff;padding:12mm;box-shadow:0 0 0 1px #e9ecef,0 .75rem 1.5rem rgba(0,0,0,.07);border-radius:6px}
@media (max-width: 768px){.a4-page{width:100%;min-height:auto;padding:1rem;border-radius:4px}}

/* Glossy buttons global style */
.btn{
	position:relative;
	border:1px solid rgba(0,0,0,.1);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 4px rgba(0,0,0,.06);
	background-image: linear-gradient(to bottom, rgba(255,255,255,.35), rgba(255,255,255,0));
	transition: transform .05s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:after{
	content:"";
	position:absolute; left:0; right:0; top:0; height:48%;
	border-radius:inherit;
	background: linear-gradient(to bottom, rgba(255,255,255,.35), rgba(255,255,255,0));
	pointer-events:none;
}
.btn:hover{ filter:brightness(1.03); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 6px rgba(0,0,0,.08); }
.btn:active{ transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.08); }
.btn.disabled, .btn:disabled{ filter: grayscale(.2) brightness(.98); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }

/* Keep Bootstrap variant colors but make them glossy */
.btn-primary{ background-color:#0d6efd; border-color:#0c5edb; }
.btn-success{ background-color:#198754; border-color:#157347; }
.btn-danger{ background-color:#dc3545; border-color:#c12f3c; }
.btn-warning{ background-color:#ffc107; border-color:#e0a800; color:#000; }
.btn-info{ background-color:#0dcaf0; border-color:#0bb8d9; color:#000; }
.btn-secondary{ background-color:#6c757d; border-color:#5c636a; }
.btn-light{ background-color:#f8f9fa; border-color:#e9ecef; color:#000; }
.btn-dark{ background-color:#212529; border-color:#1a1e21; }

/* Outline variants: add subtle glossy fill */
.btn-outline-primary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning,
.btn-outline-info, .btn-outline-secondary, .btn-outline-light, .btn-outline-dark{
	background-image: linear-gradient(to bottom, rgba(13,110,253,.08), rgba(13,110,253,0));
}
.btn-outline-primary:hover{ background-color: rgba(13,110,253,.08); }
.btn-outline-success:hover{ background-color: rgba(25,135,84,.08); }
.btn-outline-danger:hover{ background-color: rgba(220,53,69,.08); }
.btn-outline-warning:hover{ background-color: rgba(255,193,7,.12); }
.btn-outline-info:hover{ background-color: rgba(13,202,240,.12); }
.btn-outline-secondary:hover{ background-color: rgba(108,117,125,.08); }
.btn-outline-light:hover{ background-color: rgba(248,249,250,.6); }
.btn-outline-dark:hover{ background-color: rgba(33,37,41,.08); }

/* Small buttons still glossy but compact */
.btn-sm{ box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.05); }

/* Image corner number badge */
.img-wrapper{position:relative;display:block;height:100%;width:100%}
.img-wrapper img{display:block}
.img-number{position:absolute;top:.35rem;left:.35rem;background:#0d6efd;color:#fff;padding:.25rem .5rem;border-radius:.5rem;font-size:0.9rem;font-weight:700;line-height:1;box-shadow:0 2px 6px rgba(13,110,253,.18);border:1px solid rgba(255,255,255,.12);min-width:28px;text-align:center}
.img-number.top-right{left:auto;right:.35rem}