:root {
  --bg: #0a1029;
  --card: #111a3b;
  --card-2: #15204a;
  --line: #243160;
  --line-soft: #1b2650;
  --cyan: #4ef0ff;
  --cyan-2: #2bcfdc;
  --red: #ff6b6b;
  --red-bg: #2a1b31;
  --red-line: #7d3a50;
  --yellow: #ffc857;
  --blue: #3a4ea8;
  --text: #e9edf9;
  --muted: #97a1c2;
  --dim: #5d688c;
  --dot-off: #26304f;

  --ui-bg: #eef0f5;
  --ui-panel: #ffffff;
  --ui-text: #1b2033;
  --ui-muted: #6a7089;
  --ui-line: #dde0ea;
  --ui-accent: #0f8fa0;
  --ui-error: #c4334a;
}

* { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
html, body { margin: 0; }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--ui-bg); color: var(--ui-text); }
h1, h2, h3, h4, .poppins { font-family: 'Poppins', 'Inter', sans-serif; margin: 0; }
p { margin: 0; }

/* ---------- Editor layout (screen only) ---------- */
.app { display: grid; grid-template-columns: 340px 1fr; height: 100vh; }
.sidebar { background: var(--ui-panel); border-right: 1px solid var(--ui-line); overflow-y: auto; padding: 20px 20px 32px; }
.sidebar h1 { font-size: 17px; }
.sidebar .sub { color: var(--ui-muted); font-size: 12.5px; margin: 4px 0 16px; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.actions .primary { grid-column: 1 / -1; }
button { font: inherit; font-size: 13px; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--ui-line); background: #f6f7fa; color: var(--ui-text); cursor: pointer; }
button:hover { border-color: #b9bfd0; }
button.primary { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; font-weight: 600; }
button.primary:disabled { opacity: .45; cursor: not-allowed; }
.toast { font-size: 12px; color: var(--ui-accent); min-height: 16px; }
fieldset { border: 0; border-top: 1px solid var(--ui-line); margin: 14px 0 0; padding: 14px 0 0; }
legend { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ui-muted); padding: 0; }
.field { display: block; margin-top: 10px; }
.field > span { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 500; margin-bottom: 4px; }
.field small { color: var(--ui-muted); font-weight: 400; }
.field input { width: 100%; font: inherit; font-size: 13.5px; padding: 8px 10px; border: 1px solid var(--ui-line); border-radius: 7px; background: #fff; color: var(--ui-text); }
.field input:focus { outline: 2px solid color-mix(in srgb, var(--ui-accent) 35%, transparent); border-color: var(--ui-accent); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inline-btn { padding: 0 6px; font-size: 11px; border: 0; background: none; color: var(--ui-accent); }
.error { margin-top: 10px; font-size: 12.5px; color: var(--ui-error); }
.summary { margin-top: 10px; font-size: 12.5px; color: var(--ui-muted); }
.summary b { color: var(--ui-text); }

.sheet { border-top: 1px solid var(--ui-line); margin-top: 14px; padding-top: 14px; }
.sheet h2 { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ui-muted); font-family: inherit; }
.sheet .hint { font-size: 12px; color: var(--ui-muted); margin: 4px 0 8px; }
.sheet textarea { width: 100%; font: inherit; font-size: 12px; padding: 8px 10px; border: 1px solid var(--ui-line); border-radius: 7px; resize: vertical; color: var(--ui-text); background: #fff; }
.sheet textarea:focus { outline: 2px solid color-mix(in srgb, var(--ui-accent) 35%, transparent); border-color: var(--ui-accent); }
.sheet-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 220px; overflow-y: auto; }
.sheet-rows button { text-align: left; display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; }
.sheet-rows button small { color: var(--ui-muted); font-size: 11.5px; }
.sheet-rows button.on { border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 8%, #fff); }
.sheet-msg { margin-top: 8px; font-size: 12px; color: var(--ui-accent); }
.sheet-msg.warn { color: #9a5b00; }
.sheet-msg ul { margin: 4px 0 0; padding-left: 16px; list-style: disc; }
.sheet-msg li { margin-top: 2px; }

.preview { overflow: auto; padding: 28px; }
.zoom { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; gap: 6px; margin: -12px 0 12px; }
.zoom button { padding: 5px 10px; font-size: 12px; background: #fff; }
.zoom button.on { border-color: var(--ui-accent); color: var(--ui-accent); }
#report { zoom: var(--zoom, 1); display: flex; flex-direction: column; align-items: center; gap: 24px; }
#report .page { box-shadow: 0 8px 30px rgba(10, 16, 41, .25); }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; height: auto; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--ui-line); }
  .preview { padding: 16px; }
  #report { --zoom: .45 !important; }
}

/* ---------- Report pages (A4) ---------- */
.page {
  width: 210mm; height: 297mm; overflow: hidden; position: relative;
  display: flex; flex-direction: column; padding: 11mm 12mm 0; isolation: isolate;
  color: var(--text); font-size: 12px; line-height: 1.45;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(40, 70, 150, .35), transparent 60%),
    linear-gradient(180deg, #0c1431 0%, var(--bg) 45%, #090e24 100%);
}
.pg-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 3mm; border-bottom: 1px solid var(--line); }
.logo img { height: 10mm; display: block; }
.logo .wordmark { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: .08em; color: var(--cyan); }
.eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); }
.pg-body { flex: 1; padding-top: 5mm; display: flex; flex-direction: column; gap: 4mm; }
.pg-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding: 3.5mm 0 6mm; font-size: 9.5px; color: var(--dim); }
/* Brand touches: footer icon (assets/axamp-mark-sm.webp) and page-1 watermark (assets/axamp-mark.png). Nothing shows if a file is missing. */
.pg-foot > span:first-child { display: inline-flex; align-items: center; gap: 2mm; }
.pg-foot > span:first-child::before { content: ''; width: 4.2mm; height: 4.2mm; background: url('../assets/axamp-mark-sm.webp') center / contain no-repeat; opacity: .85; }
.page:first-of-type::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: 118mm; height: 118mm; right: -26mm; bottom: -14mm;
  background: url('../assets/axamp-mark.png') center / contain no-repeat; opacity: .05;
}

.red { color: var(--red); }
.cyan { color: var(--cyan); }
.card { background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--line); border-radius: 14px; }

/* Page 1 */
.kicker { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); }
.title { font-size: 33px; line-height: 1.15; font-weight: 700; margin-top: -2mm; }
.title span { color: var(--cyan); }
.prepared { font-size: 13px; color: var(--muted); margin-top: -2mm; }
.prepared b { color: var(--text); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 11px; color: var(--muted); padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(21, 32, 74, .6); }
.chip b { color: var(--text); font-weight: 600; }

.hero { display: flex; align-items: center; gap: 22px; padding: 18px 24px; background: linear-gradient(120deg, #172560, #121c45 60%, #111a3b); }
.donut { width: 118px; height: 118px; flex: none; position: relative; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut .val { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut .val b { font-family: 'Poppins', sans-serif; font-size: 34px; line-height: 1; }
.donut .val small { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.hero h2 { font-size: 19px; line-height: 1.3; font-weight: 700; }
.hero h2 span { color: var(--cyan); }
.hero p { margin-top: 6px; color: var(--muted); font-size: 12px; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; }
.stat { padding: 11px 16px; }
.stat small { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stat b { display: block; font-family: 'Poppins', sans-serif; font-size: 21px; margin-top: 2px; }
.stat.loss { background: var(--red-bg); border-color: var(--red-line); }
.stat.loss b { color: var(--red); }

.funnel-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 2mm; }
.funnel-head h3 { font-size: 15px; }
.funnel-head small { color: var(--muted); font-size: 10.5px; }
.funnel { display: grid; grid-template-columns: 40mm 1fr 40mm; row-gap: 2.4mm; align-items: center; }
.funnel .lbl { text-align: right; padding-right: 3mm; color: var(--muted); font-size: 11.5px; }
.funnel .lbl.strong { color: var(--text); font-weight: 600; }
.funnel .bar { height: 8.4mm; border-radius: 6px; display: flex; align-items: center; padding-left: 10px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 13px; color: #07202a; background: linear-gradient(90deg, var(--cyan-2), var(--cyan)); min-width: 11mm; }
.funnel .bar.end { background: linear-gradient(90deg, #2c3d8c, var(--blue)); color: var(--cyan); }
.funnel .drop { padding-left: 4mm; color: var(--muted); font-size: 11px; }
.funnel .drop b { color: var(--red); }
.footnote { font-size: 9.5px; color: var(--dim); }

/* Stage cards */
.stage { padding: 12px 18px 12px; }
.stage.hot { border-color: var(--red-line); background: linear-gradient(180deg, #1a1d48, #151738); }
.stage-top { display: flex; gap: 18px; }
.stage-main { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.stage-kicker { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.badge { font-size: 9px; letter-spacing: .06em; color: #fff; background: var(--red); padding: 3px 9px; border-radius: 999px; }
.stage-q { font-size: 15.5px; line-height: 1.35; font-weight: 700; }
.pills { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.pill { padding: 5px 14px; border-radius: 999px; border: 1px solid; }
.pill.lost { color: var(--red); border-color: var(--red-line); background: rgba(255, 107, 107, .08); }
.pill.in { color: var(--cyan); border-color: #24687a; background: rgba(78, 240, 255, .07); }
.pills .arrow { color: var(--dim); }
.stage-loss { color: var(--muted); }
.stage-loss b { color: var(--red); font-family: 'Poppins', sans-serif; font-size: 14px; }

.dots { flex: none; margin: 0; text-align: center; }
.dots .grid { display: grid; grid-template-columns: repeat(10, 2.15mm); gap: .8mm; padding: 2.4mm; border: 1px solid var(--line); border-radius: 9px; background: rgba(9, 14, 36, .6); }
.dots i { width: 2.15mm; height: 2.15mm; border-radius: 50%; background: var(--cyan); }
.dots i.gone { background: var(--dot-off); }
.dots i.lost { background: var(--red); }
.dots figcaption { font-size: 9px; color: var(--dim); margin-top: 5px; }
.dots figcaption .k1 { color: var(--red); }
.dots figcaption .k2 { color: var(--cyan); }

.why { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.why-title { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.num { width: 20px; height: 20px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--cyan); border: 1px solid #24687a; background: rgba(78, 240, 255, .08); }
.stage.hot .num { color: var(--red); border-color: var(--red-line); background: rgba(255, 107, 107, .1); }
.reasons-list { display: flex; flex-direction: column; gap: 6px; }
.reasons-list li { display: flex; gap: 12px; }
.reason h4 { font-size: 13px; font-weight: 600; }
.reason p { color: var(--muted); font-size: 11.6px; }
.research { display: inline-block; margin-top: 5px; font-size: 10.5px; color: var(--yellow); border: 1px solid #7a6330; background: rgba(255, 200, 87, .08); padding: 3px 10px; border-radius: 6px; }
.reasons-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.reasons-cols li { display: flex; flex-direction: column; gap: 4px; }
ul, ol { list-style: none; margin: 0; padding: 0; }

/* Stage 4 comparison */
.compare-head { font-size: 16px; font-weight: 700; margin: 8px 0 6px; }
.compare { display: grid; grid-template-columns: 1fr 9mm 0.62fr; align-items: stretch; }
.compare .vs { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--dim); }
.box { border: 1px solid; border-radius: 10px; padding: 9px 14px 8px; }
.box.need { border-color: #22677a; background: rgba(43, 207, 220, .06); }
.box.got { border-color: var(--red-line); background: var(--red-bg); }
.box-title { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.need .box-title { color: var(--cyan); }
.got .box-title { color: var(--red); }
.need li { margin-bottom: 3px; }
.need li h4 { font-size: 12.5px; font-weight: 600; }
.need li h4::before { content: '✓'; color: var(--cyan); margin-right: 7px; }
.need li p { color: var(--muted); font-size: 10.5px; line-height: 1.36; padding-left: 16px; }
.got li { font-size: 12.5px; margin-bottom: 6px; }
.got li::before { content: '✕'; color: var(--red); margin-right: 9px; }
.got .note { color: var(--muted); font-size: 11.5px; margin: 10px 0; }
.got .callout { border-left: 3px solid var(--yellow); padding-left: 10px; color: #f3d48a; font-size: 11.5px; }
.got .callout b { color: #fff; }

/* Page 4: gaps + CTA */
.gaps-head { display: flex; justify-content: space-between; align-items: baseline; }
.gaps-head h3 { font-size: 16px; }
.gaps-head small { color: var(--muted); font-size: 10.5px; }
.gapbar { display: flex; height: 8.4mm; border-radius: 6px; overflow: hidden; margin-top: -1.5mm; }
.gapbar div { display: flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 12px; color: #0a1029; }
.g-time { background: var(--cyan); }
.g-detail { background: var(--yellow); }
.g-trust { background: var(--red); }
.g-visit { background: var(--blue); color: var(--cyan) !important; }
.gaplegend { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: -2mm; }
.gaplegend span::before { content: '■'; margin-right: 5px; }
.gaplegend .l-time::before { color: var(--cyan); }
.gaplegend .l-detail::before { color: var(--yellow); }
.gaplegend .l-trust::before { color: var(--red); }
.gaplegend .l-visit::before { color: var(--blue); }
.gapcards { display: grid; grid-template-columns: 1fr 6mm 1fr 6mm 1fr; align-items: center; }
.gapcards .op { text-align: center; color: var(--dim); font-size: 16px; font-weight: 700; }
.gapcard { padding: 10px 15px; height: 100%; }
.gapcard .gnum { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.gapcard h4 { font-size: 15px; }
.gapcard .gcount { font-size: 11px; color: var(--muted); }
.gapcard .gcount b { color: var(--red); }
.gapcard p { color: var(--muted); font-size: 11.5px; margin-top: 5px; }
.gapcard.c1 .gnum { background: rgba(78, 240, 255, .15); color: var(--cyan); }
.gapcard.c2 .gnum { background: rgba(255, 200, 87, .15); color: var(--yellow); }
.gapcard.c3 { background: var(--red-bg); border-color: var(--red-line); }
.gapcard.c3 .gnum { background: rgba(255, 107, 107, .18); color: var(--red); }

.cta { border-radius: 16px; padding: 14px 20px 14px; background: linear-gradient(140deg, #ff7f7c, #f2556b 60%, #e84b66); color: #fff; display: flex; flex-direction: column; gap: 8px; }
.cta .recover { background: rgba(120, 20, 45, .3); border-radius: 10px; padding: 10px 16px; }
.cta .recover small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.cta .recover .nums { display: flex; justify-content: space-between; align-items: baseline; margin-top: 2px; }
.cta .recover b { font-family: 'Poppins', sans-serif; font-size: 20px; }
.cta .recover span { font-size: 11px; opacity: .9; }
.cta .next { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .9; margin-top: 2px; }
.cta h2 { font-size: 21px; line-height: 1.2; margin-top: -4px; }
.cta > p { font-size: 12px; opacity: .95; margin-top: -3px; }
.cta .points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cta .points li { background: rgba(255, 255, 255, .16); border-radius: 8px; padding: 7px 10px 7px 26px; font-size: 11px; position: relative; }
.cta .points li::before { content: '✓'; position: absolute; left: 10px; }
.cta .contacts { display: grid; grid-template-columns: 1.1fr 1.1fr .8fr; gap: 8px; }
.cta .contacts div { background: rgba(255, 255, 255, .18); border-radius: 8px; padding: 7px 12px; }
.cta .contacts small { display: block; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.cta .contacts b { font-family: 'Poppins', sans-serif; font-size: 15px; }
.cta .closer { background: rgba(110, 15, 40, .35); border-radius: 8px; padding: 8px; text-align: center; font-weight: 600; font-size: 12px; }

/* ---------- Print: just the pages ---------- */
@page { size: A4; margin: 0; }
@media print {
  body { background: none; }
  .app { display: block; height: auto; }
  .sidebar, .zoom { display: none !important; }
  .preview { padding: 0; overflow: visible; }
  #report { zoom: 1 !important; display: block; }
  #report .page { box-shadow: none; break-after: page; }
  #report .page:last-child { break-after: auto; }
}