#mvo-mapper-root, #mvo-mapper-root * { box-sizing: border-box; }

#mvo-mapper-root {
  --p: #1147d9;
  --pd: #0d38ac;
  --ink: #0f172a;
  --mut: #475569;
  --mut2: #64748b;
  --line: #dbe2ea;
  --bg: #f8fafc;
  --card: #fff;
  --sh: 0 10px 28px rgba(15,23,42,.08);
  --rad: 16px;
  --good: #15803d;
  --warn: #b45309;
  --bad: #b91c1c;
  --navy: #071633;
  font-family: Arial, sans-serif;
  color: var(--ink);
  overflow-x: hidden;
}

#mvo-mapper-root .w { max-width: 1200px; margin: 20px auto 56px; padding: 0 20px; }
#mvo-mapper-root .sec { margin-bottom: 18px; }
#mvo-mapper-root .card { background: #fff; border: 1px solid var(--line); border-radius: var(--rad); box-shadow: var(--sh); min-width: 0; }
#mvo-mapper-root .pad { padding: 24px; }

#mvo-mapper-root h1 { font-size: 34px; line-height: 1.08; font-weight: 800; margin: 0 0 14px; letter-spacing: -.02em; }
#mvo-mapper-root h2 { font-size: 22px; line-height: 1.2; font-weight: 800; margin: 0 0 8px; }
#mvo-mapper-root h3 { font-size: 18px; line-height: 1.2; font-weight: 800; margin: 0 0 10px; }
#mvo-mapper-root .sub { font-size: 15px; line-height: 1.6; color: var(--mut); margin: 0 0 18px; }
#mvo-mapper-root .eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--p); margin: 0 0 10px; }

#mvo-mapper-root .hero {
  background: linear-gradient(180deg,#fff,#f8fbff);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--sh);
  padding: 22px 22px 18px;
}
#mvo-mapper-root .hero-points { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 14px; }
#mvo-mapper-root .hero-point { border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 16px; }
#mvo-mapper-root .hero-point-title { font-size: 14px; font-weight: 800; color: var(--ink); margin: 0 0 6px; }
#mvo-mapper-root .hero-point-copy { font-size: 14px; line-height: 1.6; color: var(--mut); margin: 0; }

#mvo-mapper-root .preset-block { background: linear-gradient(180deg,#f8fbff 0%,#fff 100%); border: 1px solid rgba(17,71,217,.18); }
#mvo-mapper-root .preset-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 4px; }
#mvo-mapper-root .preset {
  appearance: none; width: 100%; text-align: left; border-radius: 16px; padding: 15px;
  font-size: 13px; line-height: 1.3; font-weight: 700; color: var(--p);
  background: #eef4ff; border: 1px solid #cfe0ff; cursor: pointer; transition: .18s; font-family: Arial, sans-serif;
}
#mvo-mapper-root .preset:hover { border-color: #9fc0ff; background: #e8f0ff; transform: translateY(-1px); }
#mvo-mapper-root .preset-title { display: block; color: var(--p); font-size: 14px; font-weight: 800; margin-bottom: 6px; }
#mvo-mapper-root .preset-sub { display: block; color: var(--mut); font-weight: 600; font-size: 12px; line-height: 1.5; }

#mvo-mapper-root .fg { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
#mvo-mapper-root .f { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#mvo-mapper-root .full { grid-column: 1/-1; }
#mvo-mapper-root label { font-size: 13px; font-weight: 700; }
#mvo-mapper-root input, #mvo-mapper-root select, #mvo-mapper-root textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px;
  font-size: 14px; line-height: 1.4; font-family: Arial, sans-serif; outline: none; background: #fff;
}
#mvo-mapper-root textarea { min-height: 70px; resize: vertical; }
#mvo-mapper-root input:focus, #mvo-mapper-root select:focus, #mvo-mapper-root textarea:focus {
  border-color: rgba(17,71,217,.5); box-shadow: 0 0 0 4px rgba(17,71,217,.1);
}
#mvo-mapper-root .hint { font-size: 12px; line-height: 1.45; color: var(--mut2); }

#mvo-mapper-root .service-list { display: flex; flex-direction: column; gap: 16px; margin-top: 6px; }
#mvo-mapper-root .service-card { border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: #fbfdff; position: relative; }
#mvo-mapper-root .service-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; }
#mvo-mapper-root .service-card-title { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--p); }
#mvo-mapper-root .service-remove {
  appearance: none; border: 1px solid var(--line); background: #fff; color: var(--bad);
  border-radius: 10px; padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer;
}
#mvo-mapper-root .service-remove:hover { border-color: var(--bad); }
#mvo-mapper-root .service-remove:disabled { opacity: .4; cursor: not-allowed; }

#mvo-mapper-root .acts, #mvo-mapper-root .qa-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
#mvo-mapper-root .acts { margin-top: 18px; align-items: center; }
#mvo-mapper-root .btn {
  appearance: none; border: 0; border-radius: 12px; padding: 13px 18px; font-size: 14px; line-height: 1;
  font-weight: 800; cursor: pointer; transition: .16s; text-decoration: none; display: inline-flex;
  align-items: center; justify-content: center; gap: 8px; font-family: Arial, sans-serif;
}
#mvo-mapper-root .btn:hover { transform: translateY(-1px); }
#mvo-mapper-root .btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
#mvo-mapper-root .b1 { background: var(--p); color: #fff; box-shadow: 0 12px 26px rgba(17,71,217,.2); }
#mvo-mapper-root .b1:hover { background: var(--pd); }
#mvo-mapper-root .b2 { background: #eaf1ff; color: var(--p); border: 1px solid rgba(17,71,217,.12); }
#mvo-mapper-root .b3 { background: #fff; color: var(--ink); border: 1px solid var(--line); }

#mvo-mapper-root .fb { min-height: 22px; margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--mut); }
#mvo-mapper-root .fb.e { color: var(--bad); }
#mvo-mapper-root .fb.s { color: var(--good); }

#mvo-mapper-root .load { display: none; margin-top: 22px; }
#mvo-mapper-root .load.on { display: block; }
#mvo-mapper-root .prog { border: 1px solid var(--line); border-radius: 16px; padding: 20px; background: linear-gradient(180deg,#fff,#f8fbff); }
#mvo-mapper-root .pr { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
#mvo-mapper-root .pr b { font-size: 17px; }
#mvo-mapper-root .pct { font-size: 15px; font-weight: 800; color: var(--p); }
#mvo-mapper-root .pb { height: 10px; background: #e8eef9; border-radius: 999px; overflow: hidden; margin-bottom: 14px; }
#mvo-mapper-root .pf { width: 0; height: 100%; background: linear-gradient(90deg,#1147d9,#3b82f6); transition: .24s linear; }
#mvo-mapper-root .stage { font-size: 14px; line-height: 1.5; font-weight: 700; margin: 0 0 4px; }
#mvo-mapper-root .stage2 { font-size: 13px; line-height: 1.6; color: var(--mut); margin: 0; }

#mvo-mapper-root .res { display: none; }
#mvo-mapper-root .res.on { display: block; }
#mvo-mapper-root .rep { padding: 24px; background: var(--bg); }
#mvo-mapper-root .rh { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
#mvo-mapper-root .rt { font-size: 26px; line-height: 1.1; font-weight: 800; margin: 0; }
#mvo-mapper-root .ru { font-size: 13px; font-weight: 700; color: var(--p); white-space: nowrap; }
#mvo-mapper-root .report-brand { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: #1147d9; margin-bottom: 6px; }

#mvo-mapper-root .kg { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
#mvo-mapper-root .kpi { padding: 16px; position: relative; overflow: hidden; }
#mvo-mapper-root .kpi:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: linear-gradient(90deg,#1147d9,#60a5fa); }
#mvo-mapper-root .kl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: #64748b; margin-bottom: 10px; }
#mvo-mapper-root .kv { font-size: 24px; line-height: 1; font-weight: 800; margin-bottom: 8px; }
#mvo-mapper-root .kc { font-size: 12px; line-height: 1.5; color: var(--mut); }

#mvo-mapper-root .rc { padding: 20px; }
#mvo-mapper-root .rc + .rc { margin-top: 14px; }
#mvo-mapper-root .call { border-left: 4px solid var(--p); background: #f8fbff; border-radius: 12px; padding: 14px 16px; font-size: 14px; line-height: 1.65; color: var(--ink); }
#mvo-mapper-root ul.list, #mvo-mapper-root ol.list { margin: 0; padding-left: 18px; }
#mvo-mapper-root ul.list li, #mvo-mapper-root ol.list li { margin-bottom: 8px; font-size: 14px; line-height: 1.55; }

#mvo-mapper-root .grid-2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }

#mvo-mapper-root .chart-card { display: flex; flex-direction: column; }
#mvo-mapper-root .chart-wrap { position: relative; width: 100%; height: 260px; margin-bottom: 4px; }
#mvo-mapper-root .chart-wrap-sm { height: 200px; }
#mvo-mapper-root .chart-wrap canvas { max-width: 100%; }

#mvo-mapper-root .service-rank { display: flex; flex-direction: column; gap: 12px; }
#mvo-mapper-root .rank-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: #fff; }
#mvo-mapper-root .rank-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
#mvo-mapper-root .rank-name { font-size: 15px; font-weight: 800; }
#mvo-mapper-root .tier-badge { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
#mvo-mapper-root .tier-critical { background: #fee2e2; color: var(--bad); }
#mvo-mapper-root .tier-high { background: #ffedd5; color: var(--warn); }
#mvo-mapper-root .tier-moderate { background: #fef9c3; color: #854d0e; }
#mvo-mapper-root .tier-low { background: #dcfce7; color: var(--good); }
#mvo-mapper-root .status-badge { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
#mvo-mapper-root .status-aligned { background: #dcfce7; color: var(--good); }
#mvo-mapper-root .status-at-risk { background: #fef9c3; color: #854d0e; }
#mvo-mapper-root .status-underprotected { background: #fee2e2; color: var(--bad); }
#mvo-mapper-root .status-overprioritised { background: #e0e7ff; color: #4338ca; }
#mvo-mapper-root .mvo-set-card { border: 1px solid rgba(17,71,217,.25); border-radius: 14px; padding: 16px; background: linear-gradient(180deg,#f8fbff,#fff); }
#mvo-mapper-root .plan-meta { font-size: 12px; color: var(--mut2); margin-bottom: 8px; }
#mvo-mapper-root .rank-score { font-size: 13px; font-weight: 700; color: var(--mut); }
#mvo-mapper-root .rank-rationale { font-size: 13px; line-height: 1.6; color: var(--mut); margin: 0 0 8px; }
#mvo-mapper-root .rank-drivers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
#mvo-mapper-root .driver-chip { font-size: 11px; font-weight: 700; background: #eef4ff; color: var(--p); border-radius: 999px; padding: 4px 10px; }
#mvo-mapper-root .rank-narrative { font-size: 13px; line-height: 1.6; color: var(--ink); margin: 0; }

#mvo-mapper-root .board-strip {
  background: linear-gradient(135deg,#071633 0%,#0f2a63 58%,#12357a 100%);
  color: #fff; border-radius: 20px; padding: 24px; box-shadow: 0 18px 36px rgba(15,23,42,.18);
}
#mvo-mapper-root .board-strip-label {
  display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); font-size: 11px;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #dbeafe; margin-bottom: 12px;
}
#mvo-mapper-root .board-strip-title { font-size: 20px; line-height: 1.15; font-weight: 800; margin: 0 0 10px; color: #fff; }
#mvo-mapper-root .board-strip-copy { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.96); margin: 0; }

#mvo-mapper-root .share { display: none; margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fbfdff; }
#mvo-mapper-root .share:not(.mvo-hidden) { display: block; }
#mvo-mapper-root .share-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
#mvo-mapper-root .share-head-copy { min-width: 0; flex: 1 1 500px; }
#mvo-mapper-root .share-title { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
#mvo-mapper-root .share-sub { font-size: 13px; line-height: 1.6; color: var(--mut); }
#mvo-mapper-root .share-status { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: #f8fafc; border: 1px solid var(--line); color: #334155; font-size: 12px; font-weight: 800; white-space: nowrap; }
#mvo-mapper-root .su { display: block; width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; font-size: 13px; margin-bottom: 12px; background: #fff; color: var(--p); word-break: break-all; text-decoration: none; }
#mvo-mapper-root .share-links { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
#mvo-mapper-root .a { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 700; }
#mvo-mapper-root .a:hover { border-color: rgba(17,71,217,.35); color: var(--p); }
#mvo-mapper-root .share-feedback { margin-top: 10px; font-size: 13px; color: var(--bad); }

#mvo-mapper-root .risk-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: #fff; }
#mvo-mapper-root .risk-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--p); margin-bottom: 8px; }
#mvo-mapper-root .risk-value { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
#mvo-mapper-root .risk-copy { font-size: 13px; line-height: 1.6; color: var(--mut); }

#mvo-mapper-root .report-footer { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
#mvo-mapper-root .report-footer-title { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--p); margin-bottom: 8px; }
#mvo-mapper-root .report-footer-copy { font-size: 13px; line-height: 1.7; color: var(--mut); max-width: 640px; }
#mvo-mapper-root .report-footer-links { display: grid; gap: 8px; justify-items: end; }
#mvo-mapper-root .report-footer-link { color: var(--p); font-size: 13px; font-weight: 800; text-decoration: none; }
#mvo-mapper-root .report-footer-link:hover { text-decoration: underline; }
#mvo-mapper-root .cred { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.6; color: var(--mut); }

@media print {
  body * { visibility: hidden !important; }
  #mvo-mapper-root, #mvo-mapper-root * { visibility: visible !important; }
  #mvo-mapper-root .hero, #mvo-mapper-root .preset-block,
  #mvo-mapper-root .service-list, #mvo-mapper-root #mvo-add-service,
  #mvo-mapper-root #mvo-turnstile, #mvo-mapper-root #mvo-submit,
  #mvo-mapper-root #mvo-load, #mvo-mapper-root #mvo-actions-card, #mvo-mapper-root .fb {
    display: none !important;
  }
  #mvo-mapper-root { position: absolute; inset: 0; width: 100%; margin: 0; }
  #mvo-mapper-root .res { display: block !important; }
  #mvo-mapper-root .card, #mvo-mapper-root .rc, #mvo-mapper-root .kpi, #mvo-mapper-root .rank-card {
    break-inside: avoid; page-break-inside: avoid; box-shadow: none !important;
  }
}

@media (max-width: 980px) {
  #mvo-mapper-root .fg,
  #mvo-mapper-root .hero-points,
  #mvo-mapper-root .preset-grid,
  #mvo-mapper-root .kg,
  #mvo-mapper-root .grid-2 { grid-template-columns: 1fr; }
  #mvo-mapper-root h1 { font-size: 24px; }
  #mvo-mapper-root .rh { flex-direction: column; }
  #mvo-mapper-root .report-footer { flex-direction: column; }
  #mvo-mapper-root .report-footer-links { justify-items: start; }
  #mvo-mapper-root .btn, #mvo-mapper-root .a { width: 100%; }
  #mvo-mapper-root .chart-wrap { height: 220px; }
  #mvo-mapper-root .chart-wrap-sm { height: 180px; }
}