:root {
  --navy: #123f67;
  --blue: #2f82c7;
  --teal: #2a98a7;
  --orange: #f39a22;
  --ink: #162838;
  --muted: #667686;
  --line: #d9e1e8;
  --paper: #ffffff;
  --surface: #f1f4f7;
  font-family: Carlito, Arial, sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--surface); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  background: radial-gradient(circle at 20% 0%, #dcecf7, transparent 42%), #eef2f5;
}
.auth-card {
  width: min(440px, 100%);
  padding: 42px;
  border-radius: 22px;
  background: white;
  box-shadow: 0 20px 60px rgba(15, 49, 76, .14);
}
.brand-mark { color: var(--navy); font-weight: 800; letter-spacing: .12em; line-height: .85; margin-bottom: 32px; }
.brand-mark span { color: #c53850; font-size: .86em; }
.auth-card h1 { margin: 0 0 8px; }
.auth-card p { color: var(--muted); }
.auth-card label, .form-panel label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
.auth-card label { margin-top: 18px; }
input, textarea, select {
  width: 100%;
  border: 1px solid #cbd6df;
  border-radius: 8px;
  padding: 9px 10px;
  background: white;
  color: var(--ink);
}
textarea { resize: vertical; line-height: 1.32; }
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(47,130,199,.24); border-color: var(--blue); }
.primary, .accent, .toolbar button {
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 700;
}
.primary { background: var(--navy); color: white; }
.accent { background: var(--orange); color: #1f2f3d; }
.auth-card .primary { width: 100%; margin-top: 24px; }
.error { color: #b42318 !important; min-height: 20px; }

.app { min-height: 100vh; }
.toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 22px;
  color: white;
  background: #0f3557;
  box-shadow: 0 3px 12px rgba(0,0,0,.2);
}
.toolbar strong { display: block; font-size: 18px; }
.toolbar span { font-size: 12px; color: #c9d8e5; }
.toolbar-actions { display: flex; align-items: center; gap: 8px; }
.toolbar-actions select { width: 230px; padding: 9px; }
.toolbar-actions button { background: #e8eef3; color: #18364e; }
.toolbar-actions .primary { background: var(--blue); color: white; }
.toolbar-actions .accent { background: var(--orange); }

.workspace { display: grid; grid-template-columns: minmax(390px, 470px) 1fr; min-height: calc(100vh - 64px); }
.form-panel { padding: 18px; background: white; border-right: 1px solid var(--line); overflow: auto; max-height: calc(100vh - 64px); }
.form-panel section { padding: 15px 0 20px; border-bottom: 1px solid var(--line); }
.form-panel h2 { margin: 0 0 13px; color: var(--navy); font-size: 17px; }
.form-panel label { margin-top: 10px; }
.grid { display: grid; gap: 10px; }
.grid.two { grid-template-columns: 1fr 1fr; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.segmented { display: flex; gap: 8px; margin-bottom: 10px; }
.segmented label { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 20px; }
.segmented input { width: auto; }
.hint { font-weight: 400; color: var(--muted); font-size: 12px; }
.file-button { display: block !important; padding: 10px 12px; text-align: center; border: 1px dashed var(--blue); border-radius: 8px; color: var(--navy); cursor: pointer; }
.file-button input { display: none; }
.asset-list { display: grid; gap: 6px; margin-top: 10px; }
.asset-item { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; padding: 6px; background: #f5f8fa; border-radius: 7px; font-size: 12px; }
.asset-item img { width: 44px; height: 34px; object-fit: cover; border-radius: 4px; }
.asset-item button { border: 0; background: transparent; color: #b42318; }
.message { min-height: 28px; padding-top: 12px; font-weight: 700; color: var(--navy); }

.preview-panel { overflow: auto; max-height: calc(100vh - 64px); padding: 20px 24px 80px; }
.preview-note { position: sticky; top: 0; z-index: 5; max-width: 780px; margin: 0 auto 16px; padding: 10px 14px; background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 13px; }
#pages { display: grid; gap: 22px; justify-content: center; }
.sheet {
  position: relative;
  width: 210mm;
  height: 297mm;
  overflow: hidden;
  background: white center / 100% 100% no-repeat;
  box-shadow: 0 7px 30px rgba(29, 46, 60, .18);
  font-family: Carlito, Arial, sans-serif;
}
.sheet .page-mask { position: absolute; background: white; }
.sheet .footer-mask { position: absolute; right: 4mm; bottom: 5mm; width: 50mm; height: 11mm; background: white; }
.sheet .page-number { position: absolute; right: 9.5mm; bottom: 8.6mm; font-size: 7pt; color: #1d2935; }
.overlay { position: absolute; inset: 0; }
.overlay h2, .overlay h3, .overlay p { margin: 0; }
.page-title { position: absolute; left: 32mm; top: 31mm; width: 157mm; height: 10mm; padding: 2.2mm 4mm; background: var(--navy); color: white; border-radius: 2mm; font-size: 12pt; }
.p1-title { top: 64mm; }
.card { border: .4mm solid #d2d8dd; border-radius: 5mm; box-shadow: 0 1mm 1.2mm rgba(0,0,0,.12); background: white; }
.small-text { font-size: 7.5pt; line-height: 1.25; white-space: pre-line; }
.micro { font-size: 6.7pt; line-height: 1.2; white-space: pre-line; }

.p1-mask { left: 24mm; top: 24mm; width: 174mm; height: 257mm; }
.p1-meta { position: absolute; left: 32mm; top: 26mm; width: 106mm; min-height: 35mm; padding: 5mm; }
.p1-meta h3 { font-size: 11pt; color: var(--navy); margin-bottom: 2mm; }
.meta-grid { display: grid; grid-template-columns: 28mm 1fr; gap: .7mm 2mm; font-size: 7.5pt; }
.client-logo { position: absolute; right: 23mm; top: 34mm; width: 43mm; text-align: center; color: #9aa4ad; font-weight: 700; font-size: 12pt; }
.client-logo img { width: 100%; height: 24mm; object-fit: contain; }
.p1-object { position: absolute; left: 32mm; top: 72mm; width: 157mm; height: 82mm; padding: 8mm; }
.p1-object h3 { color: var(--navy); font-size: 11pt; margin-bottom: 4mm; }
.p1-object p { font-size: 8.2pt; line-height: 1.35; white-space: pre-line; max-height: 62mm; overflow: hidden; }
.summary-row { position: absolute; left: 32mm; top: 165mm; width: 157mm; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; }
.summary-card { min-height: 39mm; padding: 5mm; background: #eef7fb; }
.summary-card:nth-child(2) { background: #edf8fb; }
.summary-card:nth-child(3) { background: #fff7e8; }
.summary-card h3 { text-align: center; color: var(--navy); font-size: 8pt; margin-bottom: 2mm; }
.summary-card p { font-size: 7pt; line-height: 1.25; white-space: pre-line; }
.contact-row { position: absolute; left: 32mm; top: 215mm; width: 157mm; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; }
.contact { min-height: 33mm; padding: 6mm 4mm 3mm; position: relative; }
.contact strong { position: absolute; left: 0; right: 0; top: 0; padding: 2mm; text-align: center; border-radius: 4mm 4mm 0 0; background: var(--blue); color: white; font-size: 7pt; }
.contact p { padding-top: 4mm; font-size: 7pt; white-space: pre-line; }

.p2-top-mask { left: 24mm; top: 22mm; width: 174mm; height: 98mm; }
.p2-summary { position: absolute; left: 58mm; top: 50mm; width: 100mm; display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; }
.price-card { min-height: 35mm; padding: 6mm 3mm; text-align: center; background: #eef8fb; }
.price-card h3 { color: var(--navy); font-size: 9pt; }
.price-card .price { color: var(--orange); font-weight: 800; font-size: 14pt; margin: 3mm 0; }
.price-card p { font-size: 6.8pt; white-space: pre-line; }

.p3-mask { left: 24mm; top: 42mm; width: 174mm; height: 233mm; }
.photo-layout { position: absolute; left: 34mm; top: 52mm; width: 151mm; display: grid; grid-template-columns: 70mm 1fr; gap: 6mm; }
.photo-card { min-height: 116mm; padding: 8mm 5mm; background: #edf9fa; }
.photo-card h3 { text-align: center; color: var(--teal); font-size: 9pt; margin-bottom: 5mm; }
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; }
.photo-grid img { width: 100%; height: 29mm; object-fit: cover; }
.state-stack { display: grid; gap: 5mm; }
.state-card { min-height: 51mm; padding: 12mm 5mm 5mm; position: relative; }
.state-card strong { position: absolute; inset: 0 0 auto; min-height: 10mm; padding: 3mm; text-align: center; border-radius: 5mm 5mm 0 0; background: var(--teal); color: white; font-size: 8pt; }
.state-card:nth-child(2) strong { background: var(--blue); }
.state-card p { font-size: 8pt; white-space: pre-line; }
.warning-card { position: absolute; left: 34mm; top: 179mm; width: 151mm; min-height: 50mm; padding: 13mm 6mm 6mm; background: #fff1f0; }
.warning-card strong { position: absolute; top: 4mm; left: 6mm; color: #df5a4f; font-size: 9pt; }
.warning-card p { font-size: 8pt; white-space: pre-line; }

.p4-mask { left: 24mm; top: 42mm; width: 174mm; height: 233mm; }
.recommend-card { position: absolute; left: 32mm; top: 52mm; width: 157mm; height: 158mm; overflow: hidden; }
.recommend-card h3 { padding: 5mm; text-align: center; background: var(--navy); color: white; font-size: 11pt; }
.equipment-list { padding: 10mm 12mm; display: grid; gap: 3mm; }
.equipment-row { display: grid; grid-template-columns: 12mm 1fr 28mm; gap: 3mm; font-size: 8pt; align-items: start; }
.equipment-row span:last-child { text-align: right; font-weight: 700; }
.conclusion-card { position: absolute; left: 32mm; top: 221mm; width: 157mm; min-height: 36mm; padding: 11mm 6mm 5mm; background: #edf5fb; }
.conclusion-card strong { position: absolute; top: 3mm; color: var(--navy); font-size: 8pt; }
.conclusion-card p { font-size: 8pt; white-space: pre-line; }

.content-mask { left: 22mm; top: 42mm; width: 176mm; height: 238mm; }
.asset-page-image { position: absolute; left: 34mm; top: 53mm; width: 153mm; height: 206mm; object-fit: contain; }
.empty-asset { position: absolute; left: 44mm; top: 120mm; width: 130mm; text-align: center; color: #8593a0; font-size: 12pt; }

.p7-mask { left: 24mm; top: 42mm; width: 174mm; height: 233mm; }
.offer-main { position: absolute; left: 32mm; top: 52mm; width: 157mm; display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; }
.offer-card { min-height: 84mm; padding: 16mm 7mm 6mm; position: relative; }
.offer-card strong { position: absolute; inset: 0 0 auto; padding: 4mm; text-align: center; border-radius: 5mm 5mm 0 0; background: var(--blue); color: white; }
.offer-card:nth-child(2) strong { background: var(--teal); }
.offer-price { text-align: center; color: var(--blue); font-size: 16pt; font-weight: 800; margin-bottom: 5mm; }
.offer-card p { font-size: 8pt; white-space: pre-line; line-height: 1.3; }
.conditions-row { position: absolute; left: 32mm; top: 170mm; width: 157mm; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; }
.condition-card { min-height: 65mm; padding: 13mm 5mm 5mm; position: relative; }
.condition-card strong { position: absolute; inset: 0 0 auto; padding: 3mm; text-align: center; border-radius: 4mm 4mm 0 0; background: var(--teal); color: white; font-size: 7pt; }
.condition-card:nth-child(2) strong { background: #df5a4f; }
.condition-card:nth-child(3) strong { background: var(--blue); }
.condition-card p { font-size: 6.8pt; white-space: pre-line; }

.p8-mask { left: 24mm; top: 42mm; width: 174mm; height: 233mm; }
.timeline { position: absolute; left: 36mm; top: 62mm; width: 145mm; border-collapse: collapse; font-size: 8pt; }
.timeline th { padding: 3mm; background: #e9f4fb; color: var(--navy); }
.timeline td { padding: 4mm 3mm; border-bottom: .3mm solid #e3e8ec; }
.timeline td:not(:first-child) { text-align: center; }
.tick { display: inline-block; width: 5mm; height: 5mm; background: #79d65b; }
.prereq-card { position: absolute; left: 36mm; top: 173mm; width: 145mm; min-height: 63mm; padding: 14mm 8mm 6mm; }
.prereq-card strong { position: absolute; inset: 0 0 auto; padding: 4mm; text-align: center; border-radius: 5mm 5mm 0 0; background: var(--navy); color: white; }
.prereq-card p { font-size: 8pt; white-space: pre-line; }

@media (max-width: 1200px) {
  .workspace { grid-template-columns: 390px 1fr; }
  .grid.three { grid-template-columns: 1fr; }
  .sheet { transform: scale(.78); transform-origin: top center; margin-bottom: -64mm; }
}

@page { size: A4; margin: 0; }
@media print {
  html, body { margin: 0; padding: 0; background: white; }
  .toolbar, .form-panel, .preview-note { display: none !important; }
  .workspace, .preview-panel, #pages { display: block; padding: 0; margin: 0; overflow: visible; max-height: none; }
  .sheet { width: 210mm; height: 297mm; margin: 0; box-shadow: none; break-after: page; page-break-after: always; transform: none; }
  .sheet:last-child { break-after: auto; page-break-after: auto; }
}