.mx200-jumper-tool-wrap .jumper-container{ max-width:1200px; margin:0 auto; }

/* Keep theme styles from leaking into the tool */
.mx200-jumper-tool-wrap{ width:100%; max-width:100%; }

.mxapp{
  --bg:#ffffff;
  --card:#f3f4f6;
  --surface:#ffffff;
  --surface2:#f7f7f9;
  --text:#111827;
  --muted:#6b7280;

  --border:#d1d5db;
  --borderSoft:#e5e7eb;

  --pin:#e5e7eb;
  --pinBorder:#cbd5e1;

  --accent:#2563eb;
  --accentSoft:rgba(37,99,235,.14);

  --danger:#dc2626;
  --dangerSoft:rgba(220,38,38,.10);

  --shadow:0 8px 24px rgba(17,24,39,.10);
  --shadow2:0 6px 18px rgba(17,24,39,.08);

  --radius:6px;
  --j3-offset: 22%;

  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.mxapp, .mxapp *{ box-sizing:border-box; }

.mxapp .app-shell{
  background:var(--bg);
  border-radius:12px;
  padding:18px;
  border:1px solid var(--borderSoft);
  box-shadow:var(--shadow);
}

.mxapp .grid{ display:grid; grid-template-columns:420px 1fr; gap:18px; }

.mxapp .card{
  background:var(--card);
  border-radius:var(--radius);
  padding:16px;
  border:1px solid var(--borderSoft);
  box-shadow:var(--shadow2);
}

/* Instructions panel (above module selector) */
.mxapp .instructionsPanel{
  background:var(--surface);
  border:1px solid var(--borderSoft);
  border-radius:10px;
  padding:12px;
  margin-bottom:12px;
}
.mxapp .instructionsTitle{
  font-size:13px;
  font-weight:800;
  margin:0 0 8px;
}
.mxapp .instructionsList{
  margin:0;
  padding-left:18px;
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}
.mxapp .instructionsList li{ margin:6px 0; }

.mxapp label{ font-size:12px; color:var(--text); display:block; margin:10px 0 6px; }

.mxapp select{
  width:100%;
  padding:10px 12px;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  outline:none;
  cursor:pointer;
}
.mxapp select:focus{
  border-color: rgba(37,99,235,.7);
  box-shadow: 0 0 0 4px var(--accentSoft);
}

.mxapp .error{
  margin-top:10px;
  padding:10px 12px;
  border-left:4px solid var(--danger);
  background:var(--dangerSoft);
  border-radius:8px;
  display:none;
  color:var(--text);
  font-size:13px;
}

.mxapp .moduleImageWrap{
  margin-top:14px;
  border:1px solid var(--borderSoft);
  background:var(--surface);
  border-radius:10px;
  padding:10px;
}
.mxapp .moduleImageWrap .moduleImageTitle{
  font-size:12px;
  color:var(--muted);
  margin:0 0 8px;
}
.mxapp .moduleImage{
  width:100%;
  display:block;
  border-radius:8px;
  border:1px solid var(--borderSoft);
  object-fit:contain;
  aspect-ratio: 16 / 9;
}

/* Color key (below the module reference image) */
.mxapp .colorKey{
  margin-top:12px;
  border:1px solid var(--borderSoft);
  background:var(--surface);
  border-radius:10px;
  padding:10px;
}
.mxapp .colorKey__title{
  font-size:12px;
  color:var(--muted);
  margin:0 0 8px;
  font-weight:700;
}
.mxapp .colorKey__items{
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
}
.mxapp .colorKey__item{
  display:flex;
  align-items:center;
  gap:8px;
}
.mxapp .colorKey__swatch{
  width:14px;
  height:14px;
  border-radius:4px;
  border:1px solid rgba(0,0,0,.25);
  background:#ccc;
}
.mxapp .colorKey__label{
  font-size:12px;
  color:var(--text);
  font-weight:700;
}

.mxapp .btnRow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

.mxapp .btn{
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  cursor:pointer;
  font-weight:600;
}
.mxapp .btn:hover{ background:var(--surface2); }
.mxapp .btn:focus{
  outline:none;
  box-shadow: 0 0 0 4px var(--accentSoft);
  border-color: rgba(37,99,235,.7);
}

.mxapp .btn-pdf{
  background: #e74b39;
  border-color: #e74b39;
  color: #fff;
}
.mxapp .btn-pdf:hover,
.mxapp .btn-pdf:focus{
  background: #033c55 !important;
  border-color: #033c55 !important;
  color: #fff !important;
}

/* Hide UI-only elements in the PDF capture */
.mxapp .is-exporting .noExport{ display:none !important; }

/* Offscreen mount used for PDF exports */
.mxapp .pdfMount{
  position: fixed;
  left: -10000px;
  top: 0;
  /* Width is set dynamically by pdf.js to match the on-screen capture element.
     Keeping this auto prevents breakpoint/layout drift that can misalign jumpers. */
  width: auto;
  background: #fff;
}
.mxapp .is-exporting .grid{ grid-template-columns: 1fr; }

.mxapp .is-exporting .pdfHeader{
  background: var(--surface);
  border: 1px solid var(--borderSoft);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.mxapp .is-exporting .pdfHeader__title{
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 8px;
}
.mxapp .is-exporting .pdfHeader__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  font-size: 13px;
}
.mxapp .is-exporting .pdfHeader__label{ color: var(--muted); font-weight: 700; }
.mxapp .is-exporting .pdfHeader__value{ color: var(--text); font-weight: 700; }

.mxapp .is-exporting .pdfRefImage{
  background: var(--surface);
  border: 1px solid var(--borderSoft);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 14px;
}
.mxapp .is-exporting .pdfRefImage__title{
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 8px;
  font-weight: 700;
}

.mxapp .is-exporting .pdfRefImage{
  text-align: center;
}

.mxapp .is-exporting .pdfRefImage__img{
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 360px;
  display: inline-block;
  border-radius: 8px;
  border: 1px solid var(--borderSoft);
}

@media print{
  @page{ margin: 0.5in; }
  .mxapp .noExport{ display:none !important; }
  body{ background:#fff !important; }
}

.mxapp .headers{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  align-items:stretch;
}

.mxapp .headerCard{
  background:var(--surface2);
  border:1px solid var(--borderSoft);
  border-radius:var(--radius);
  padding:12px;
  overflow:hidden;
}

.mxapp .headerTitle{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:10px;
  color:var(--text);
  font-weight:700;
}

.mxapp .pinGrid{
  position:relative;
  display:grid;
  gap:10px;
  padding:12px;
  border-radius:var(--radius);
  border:1px solid var(--borderSoft);
  background:var(--surface);
  align-items:center;
  justify-items:center;
  justify-content:center;
  overflow:visible;
  padding-right: 70px;

  width:100%;

  /* Per-header theming (defaults = blue) */
  --j-mark-bg: var(--accentSoft);
  --j-mark-border: rgba(37,99,235,.65);
  --j-mark-inset: rgba(37,99,235,.12);
  --j-mark-shadow: 0 0 0 2px var(--j-mark-inset) inset;
}

/* --- Jumper overlay layer (keeps bridges above pins in PDF + UI) --- */
.mxapp .jumperLayer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:50;
}

/* Shared J3 offset hook */
/*.mxapp .pinGrid--J3-2A4A{ padding-left: var(--j3-offset); }
@media (max-width: 700px){ .mxapp{ --j3-offset: 12%; } }

/* Module-specific layout hooks */
.mxapp .mxmod--7E7F .pinGrid--J3-7E7F{ padding-left:40px; }
.mxapp .mxmod--7B .pinGrid--J5{ padding-left:40px; }

.mxapp .mxmod--7B .pinGrid--J6-7B,
.mxapp .mxmod--7E7F .pinGrid--J6-7E7F{
  grid-template-columns:25px repeat(4,46px) !important;
}

/* 7B jumper positioning tweak */
.mxapp .mxmod--7B .pinGrid--J5 .jumper{
  transform:translateX(124.667px) translateY(-50%) rotate(var(--jumper-angle,0rad));
}

/* Hide row labels on those J6 grids */
.mxapp .mxmod--7B .pinGrid--J6-7B .labelCell--row,
.mxapp .mxmod--7E7F .pinGrid--J6-7E7F .labelCell--row{
  visibility:hidden;
  pointer-events:none;
}

.mxapp .labelCell{
  /* Slightly narrower label column so the pin matrix reads centered on WP. */
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:flex-end;
  padding-right:4px;
  color:var(--muted);
  font-size:12px;
  user-select:none;
}

.mxapp .pin{
  width:46px; height:46px;
  background:var(--pin);
  border-radius:10px;
  border:1px solid var(--pinBorder);
  position:relative;
  z-index:1;
}

.mxapp .pin.mark{
  background: var(--j-mark-bg);
  border-color: var(--j-mark-border);
  box-shadow: var(--j-mark-shadow);
}

/* Fixed pins black ONLY on 7B and 7E7F */
.mxapp .mxmod--7B .pin.fixedMark,
.mxapp .mxmod--7E7F .pin.fixedMark{
  background:#4d4d4d;
  border-color:rgba(0,0,0,.85);
  box-shadow:0 0 0 2px rgba(255,255,255,.55), 0 0 0 1px rgba(0,0,0,.25) inset;
}

.mxapp .mxmod--1E .pinGrid--J3 .pin.fixedMark,
.mxapp .mxmod--2A .pinGrid--J3 .pin.fixedMark,
.mxapp .mxmod--4A .pinGrid--J3 .pin.fixedMark,
.mxapp .mxmod--CDG .pinGrid--J3 .pin.fixedMark{
  background: var(--j-mark-bg);
  border-color: var(--j-mark-border);
  box-shadow: var(--j-mark-shadow);
}

.mxapp .jumper,
.mxapp .jumper::before,
.mxapp .jumper::after,
.mxapp .jumper.fixed,
.mxapp .jumper.fixed::before,
.mxapp .jumper.fixed::after{
  background:#000;
}

.mxapp .jumper{
  position:absolute;
  height:14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.85);
  box-shadow:0 8px 18px rgba(17,24,39,.18);
  pointer-events:none;
  transform-origin:0 50%;
  z-index:60;
  transform: translateZ(0);
}

.mxapp .jumper::before,
.mxapp .jumper::after{
  content:"";
  position:absolute;
  width:18px; height:18px;
  border-radius:6px;
  top:50%;
  transform:translateY(-50%);
}
.mxapp .jumper::before{ left:-4px; }
.mxapp .jumper::after{ right:-4px; }

@media(max-width:1050px){
  .mxapp .grid{ grid-template-columns:1fr; }
  .mxapp .headers{ grid-template-columns:1fr; }
}