:root{--bg:#eef5ff;--panel:#ffffff;--panel2:#f7fbff;--text:#10223d;--muted:#5d6b80;--blue:#0057d8;--blue2:#0d6efd;--line:#d5e1f2;--danger:#e82020;--ok:#139a43;--warn:#f28b00;--soft:#fff7df}*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#f5f9ff 0,#eaf3ff 100%);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}.topbar{min-height:116px;display:grid;grid-template-columns:440px 1fr 370px;align-items:center;gap:16px;padding:14px 24px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 14px rgba(0,70,160,.08)}.brandLogo{width:420px;max-height:98px;object-fit:contain;object-position:left center;display:block}.titleBlock{text-align:center}.titleBlock h1{margin:0;text-transform:uppercase;letter-spacing:.5px;color:var(--blue);font-size:31px}.titleBlock p{margin:4px 0 0;font-size:18px;color:#30466a}.topNav{display:flex;gap:10px;justify-content:flex-end;align-items:center}.plainBtn{background:transparent;color:var(--text);border:0;font-weight:600;padding:10px;width:auto}.bookBtn,button,#detectBtn,#reportBtn,#cleanupBtn{border:0;border-radius:8px;background:var(--blue);color:white;font-weight:800;cursor:pointer;text-decoration:none;padding:12px 16px;text-align:center;box-shadow:0 6px 12px rgba(0,87,216,.16)}button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.appShell{display:grid;grid-template-columns:300px 1fr 280px;gap:12px;padding:12px}.panel,.stepCard{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 16px rgba(0,60,140,.08)}.panel{padding:14px;overflow:auto}.leftPanel{background:transparent;border:0;box-shadow:none;padding:0;display:flex;flex-direction:column;gap:12px}.stepCard{padding:16px}.panel h2,.stepCard h2{margin:0 0 14px;text-transform:uppercase;font-size:15px;color:var(--blue)}.dropZone{border:2px dashed #9ec1f7;border-radius:10px;min-height:128px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;cursor:pointer;background:#fbfdff}.dropZone input{display:none}.uploadIcon{font-size:34px;color:var(--blue)}.small{font-size:12px;color:var(--muted);line-height:1.4}.center{text-align:center}.fileSummary{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);margin-top:12px;padding-top:12px;color:var(--muted)}.fileSummary strong{color:var(--text)}.rangeLabel{display:flex;justify-content:space-between;margin:14px 0 7px;color:var(--text)}input[type="range"]{width:100%;accent-color:var(--blue)}.modeGrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin:8px 0 14px}.modeGrid .mode{font-size:11.5px;padding:8px 4px;line-height:1.3}.mode,.tab,.tool,#resetBtn,#saveBtn,#clearManual{background:#fff;color:var(--text);border:1px solid var(--line);box-shadow:none}.mode.active,.tab.active,.tool.active{background:var(--blue);color:white;border-color:var(--blue)}#detectBtn,#resetBtn{width:100%;margin-top:10px}.canvasSection{min-width:0;display:flex;flex-direction:column;padding:12px}.analysisHeader{display:flex;justify-content:space-between;align-items:center;gap:10px}.analysisHeader h2{margin:0;color:var(--blue);display:flex;align-items:center;gap:10px}.pill{background:#e8f7ed;color:#0f7a34;border-radius:7px;padding:7px 10px;font-size:12px;text-transform:none}.viewControls{display:flex;gap:6px;align-items:center;font-size:13px}.tab{padding:8px 12px;width:auto;margin:0}.zoomText{margin-left:10px}.canvasWrap{position:relative;background:#e4e8ef;border:1px solid var(--line);border-radius:10px;margin-top:12px;min-height:540px;overflow:auto;display:flex;align-items:center;justify-content:center}.canvasWrap canvas{max-width:none;display:block}.emptyState{position:absolute;text-align:center;color:var(--muted);padding:24px}.emptyState h2{color:var(--text)}.manualTools{display:flex;align-items:center;gap:8px;margin-top:10px}.manualTools span{font-weight:800;color:#30466a;margin-right:6px}.manualTools button{width:auto;margin:0;padding:9px 14px}.paywallBar{margin-top:10px;background:var(--soft);border:1px solid #f0dc9a;border-radius:10px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:16px}.paywallBar span{color:#534b31;font-size:13px}.unlockToggle{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:#0b4fb8}.rightPanel h2{color:var(--blue)}.resultCard{border:1px solid var(--line);border-radius:10px;text-align:center;padding:16px 10px;margin:10px 0;background:#fff}.resultCard span{display:block;text-transform:uppercase;font-size:11px;color:#405676;font-weight:800}.resultCard strong{display:block;font-size:40px;color:var(--blue);margin-top:6px}.resultCard:nth-of-type(2) strong{color:var(--danger);font-size:28px}.splitStats{border:1px solid var(--line);border-radius:10px;background:#fff;margin:10px 0;overflow:hidden}.splitStats div{display:flex;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line)}.splitStats div:last-child{border-bottom:0}.splitStats b{color:var(--blue)}.infoCard{border:1px solid var(--line);border-radius:10px;background:#fff;margin:10px 0;padding:14px}.infoCard h3{margin:0 0 8px;color:var(--blue);font-size:13px;text-transform:uppercase}.infoCard strong{color:var(--warn)}.infoCard p{font-size:12px;color:var(--muted);line-height:1.35}#reportBtn,#cleanupBtn{width:100%;margin-top:10px}.serviceFooter{display:grid;grid-template-columns:1fr 1fr 1fr 330px;gap:0;margin:0 12px 12px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 4px 16px rgba(0,60,140,.08)}.serviceFooter>div{padding:20px 24px;border-right:1px solid var(--line)}.serviceCard{display:grid;grid-template-columns:70px 1fr;gap:18px;align-items:start}.serviceIcon{font-size:52px;line-height:1;color:var(--blue);filter:grayscale(1) brightness(.75) sepia(1) hue-rotate(175deg) saturate(6)}.serviceFooter>div:last-child{border-right:0}.serviceFooter strong{display:block;color:var(--blue);text-transform:uppercase;margin-bottom:6px}.serviceFooter p{margin:0;color:#334766;line-height:1.45}.contactBox img{width:220px;display:block;margin-bottom:8px}.canvasWrap.markMode canvas{cursor:crosshair}.canvasWrap.eraseMode canvas{cursor:not-allowed}canvas{transition:width .12s,height .12s}@media(max-width:1100px){.topbar{grid-template-columns:1fr}.titleBlock{text-align:left}.topNav{justify-content:flex-start}.appShell{grid-template-columns:1fr}.canvasWrap{min-height:55vh}.serviceFooter{grid-template-columns:1fr}.serviceFooter>div{border-right:0;border-bottom:1px solid var(--line)}}@media print{.topbar,.appShell,.serviceFooter{display:none}}

/* V1.3 footer icon update — replaces emoji icons with clean professional SVG line icons */
.serviceIconSvg{width:64px;height:64px;display:flex;align-items:center;justify-content:center;color:var(--blue);filter:none;background:linear-gradient(180deg,#f8fbff,#edf5ff);border:1px solid #d7e5fb;border-radius:18px;box-shadow:0 8px 18px rgba(0,87,216,.10)}
.serviceIconSvg svg{width:52px;height:52px;display:block;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.serviceFooter.footer-outline .serviceCard{grid-template-columns:76px 1fr;align-items:start}
.serviceFooter.footer-outline .serviceIconSvg{background:transparent;border:0;box-shadow:none;border-radius:0;width:70px;height:70px}
.serviceFooter.footer-outline .serviceIconSvg svg{width:64px;height:64px;stroke-width:3}
.serviceFooter.footer-solid .serviceIconSvg{background:linear-gradient(180deg,#0567f1,#004bbf);color:#fff;border-color:#004bbf}
.serviceFooter.footer-minimal .serviceIconSvg{background:#fff;border:0;box-shadow:none;color:var(--blue)}

.tipCard{background:linear-gradient(180deg,#ffffff,#f4f8ff)}
.tipCard h2::before{content:"💡 ";}


/* V1.5 mockup alignment updates */
.topbar{
  min-height:128px;
  grid-template-columns:500px 1fr 390px;
  padding:16px 28px 12px;
}
.brandLogo{
  width:480px;
  max-height:110px;
  object-fit:contain;
}
.titleBlock h1{font-size:40px;line-height:1.02;font-weight:900;letter-spacing:.8px;}
.titleBlock p{font-size:21px;}
.plainBtn{
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:11px 16px;
  box-shadow:0 4px 12px rgba(0,70,160,.08);
}
.qIcon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:2px solid var(--blue);border-radius:50%;color:var(--blue);font-weight:900;margin-right:6px;}
.appShell{grid-template-columns:320px 1fr 300px;}
.canvasWrap{min-height:525px;}
.serviceFooter{grid-template-columns:1.15fr 1.15fr 1.05fr 360px;}
.serviceFooter>div{padding:18px 22px;}
.serviceFooter strong{font-size:14px;line-height:1.2;}
.serviceFooter p{font-size:13px;line-height:1.45;}
.serviceFooter.footer-outline .serviceCard{grid-template-columns:76px 1fr;gap:18px;}
.serviceFooter.footer-outline .serviceIconSvg{width:72px;height:72px;}
.serviceFooter.footer-outline .serviceIconSvg svg{width:68px;height:68px;stroke-width:2.7;}
.contactBox img{width:260px;max-height:70px;object-fit:contain;object-position:left center;}
.contactBox p{font-size:15px;line-height:1.65;}
.modalBackdrop{position:fixed;inset:0;background:rgba(9,28,60,.42);z-index:50;display:flex;align-items:center;justify-content:center;padding:24px;}
.modalBackdrop[hidden]{display:none;}
.modalBox{width:min(720px,96vw);background:#fff;border-radius:16px;border:1px solid var(--line);box-shadow:0 24px 80px rgba(0,30,80,.26);padding:26px 30px;position:relative;color:var(--text);}
.modalBox h2{margin:0 0 14px;color:var(--blue);text-transform:uppercase;letter-spacing:.4px;}
.modalBox h3{margin:18px 0 6px;color:var(--blue);}
.modalBox p,.modalBox li{font-size:15px;line-height:1.55;color:#263b5f;}
.modalList{padding-left:22px;}
.modalClose{position:absolute;right:14px;top:12px;background:#fff;color:var(--blue);border:1px solid var(--line);box-shadow:none;border-radius:50%;width:36px;height:36px;padding:0;font-size:24px;line-height:1;}
#modalContent{max-height:62vh;overflow-y:auto;padding-right:4px;}
@media(max-width:1300px){.topbar{grid-template-columns:380px 1fr 330px}.brandLogo{width:360px}.titleBlock h1{font-size:32px}.appShell{grid-template-columns:300px 1fr 280px}.serviceFooter{grid-template-columns:1fr 1fr}.contactBox img{width:230px}}


/* V1.6 final visual alignment and image navigation */
.topbar{grid-template-columns:520px 1fr 420px;min-height:132px}.brandLogo{width:500px;max-height:118px}.canvasWrap{min-height:560px;align-items:flex-start;padding:10px}.canvasWrap canvas{max-width:none;border-radius:8px}.viewControls{flex-wrap:wrap;justify-content:flex-end}.unlockBtn{background:var(--blue);color:#fff;border-radius:8px;border:0;padding:12px 22px;min-width:220px}.unlockBtn b{margin-left:14px}.devOnly{font-size:11px;opacity:.55}.serviceFooter{margin-top:0}.serviceFooter.footer-outline .serviceIconSvg svg{stroke-width:2.45}.loupe{position:absolute;left:26px;bottom:22px;width:185px;height:140px;border:2px solid rgba(255,255,255,.95);border-radius:8px;background:rgba(255,255,255,.12);box-shadow:0 8px 18px rgba(0,30,80,.28);overflow:hidden;pointer-events:none}.loupe canvas{width:100%;height:100%;display:block;filter:contrast(1.04)}.loupe span{position:absolute;left:10px;top:8px;color:#fff;font-weight:900;font-size:20px;text-shadow:0 1px 4px rgba(0,0,0,.55)}.loupe span:last-child{right:10px;left:auto;top:auto;bottom:8px}.canvasWrap.enlargeMode{cursor:zoom-in}.canvasWrap.enlargeMode canvas{cursor:zoom-in}.serviceFooter.footer-outline .serviceIconSvg{color:#0057d8}.contactBox img{width:285px}
@media(max-width:1400px){.topbar{grid-template-columns:420px 1fr 360px}.brandLogo{width:410px}.titleBlock h1{font-size:34px}.canvasWrap{min-height:500px}.serviceFooter{grid-template-columns:1fr 1fr}.contactBox img{width:250px}}

/* Final icon refinement: simpler in-person service icon */
.serviceFooter .serviceCard:first-child .serviceIconSvg svg {
  stroke-width: 2.4;
}


.comparePanel{margin:18px 0;padding:18px;border:1px solid #c9d9ef;border-radius:14px;background:#fff}
.compareHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.compareHeader h3{margin:0;color:#0057d8}
.compareHint{font-size:12px;color:#5b6b7f}
.compareWrap{position:relative;width:100%;max-width:900px;height:340px;overflow:hidden;border-radius:12px;border:1px solid #d8e4f5;background:#eef5ff}
.compareImg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.compareAfterWrap{position:absolute;inset:0;width:50%;overflow:hidden;border-right:3px solid #0057d8}
#compareSlider{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:60%;z-index:4}

.heatLegend{display:flex;gap:10px;margin-top:12px}
.heatItem{display:flex;align-items:center;gap:6px;font-size:12px}
.heatSwatch{width:18px;height:18px;border-radius:4px}

/* Fix: allow zoom controls to genuinely enlarge the image */
.canvasWrap { align-items:flex-start; justify-content:flex-start; padding:12px; }
.canvasWrap:not(.enlargeMode) { align-items:center; justify-content:center; }
#enlargeBtn.active, #zoomIn.active, #zoomOut.active { background:#0057d8; color:#fff; }

/* Enlarge tool restored as selectable loupe inspection mode */
.canvasWrap.enlargeMode { cursor: crosshair; }
.canvasWrap.enlargeMode canvas { cursor: crosshair; }
#enlargeBtn.active {
  background:#0057d8;
  color:#fff;
  border-color:#0057d8;
}
.loupe {
  z-index: 10;
}


/* FINAL working loupe overlay */
#finalLoupeLens{
  position:absolute;
  width:260px;
  height:190px;
  display:none;
  z-index:9999;
  border:3px solid #ffffff;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 28px rgba(0,30,80,.35);
  pointer-events:none;
}
#finalLoupeLens canvas{
  width:100%;
  height:100%;
  display:block;
}
#finalLoupeLens .loupeLabel{
  position:absolute;
  left:10px;
  top:8px;
  color:#fff;
  font-weight:900;
  font-size:21px;
  text-shadow:0 1px 5px rgba(0,0,0,.75);
}
#finalLoupeLens .loupeHint{
  position:absolute;
  right:8px;
  bottom:7px;
  color:#fff;
  font-weight:700;
  font-size:12px;
  text-shadow:0 1px 5px rgba(0,0,0,.75);
}
#finalLoupeLens.pinned{
  border-color:#0057d8;
}
.canvasWrap.enlargeMode,
.canvasWrap.enlargeMode canvas{
  cursor:crosshair !important;
}
#enlargeBtn.active{
  background:#0057d8 !important;
  color:#fff !important;
  border-color:#0057d8 !important;
}

.colourSelector{
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
  margin:6px 0 14px;
}
.colourChoice{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 10px;
  border:1px solid #c9d9ef;
  border-radius:8px;
  background:#fff;
  color:#10223d;
  font-weight:800;
  cursor:pointer;
}
.colourChoice span{
  display:inline-block;
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.25);
}
.colourChoice.active{
  border-color:#0057d8;
  background:#eef5ff;
  color:#0057d8;
}

.specialAlert{
  border-color:#f0c36b !important;
  background:#fff8e8 !important;
}
.specialAlert strong{
  color:#b36500 !important;
}
.specialAlert.danger{
  border-color:#b78cff !important;
  background:#f6f1ff !important;
}
.specialAlert.danger strong{
  color:#6c2bd9 !important;
}

/* Layout polish pass */
.appShell{
  align-items:start;
}

.comparePanel{
  grid-column:2 / 3;
  margin-top:8px !important;
  padding:12px 14px !important;
  min-height:0 !important;
}

.compareHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px !important;
}

.compareHeader h3{
  margin:0 !important;
  font-size:15px !important;
}

.compareHint{
  font-size:11px !important;
  line-height:1.25 !important;
}

.compareWrap{
  height:155px !important;
  min-height:155px !important;
  max-height:155px !important;
  border-radius:10px !important;
}

.compareImg{
  height:155px !important;
  object-fit:cover !important;
}

#compareSlider{
  bottom:8px !important;
}

.serviceFooter{
  margin-top:14px !important;
}

.footerVariant{
  margin-top:14px !important;
}

.leftPanel .tipCard{
  margin-bottom:10px !important;
}

.canvasWrap{
  margin-bottom:8px !important;
}

.paywall{
  margin-top:10px !important;
  margin-bottom:8px !important;
}

/* Make dense overlays feel less visually aggressive */
#mainCanvas{
  image-rendering:auto;
}

.metadataPanel{
  margin-top:12px;
  padding:12px;
  border:1px solid #c9d9ef;
  border-radius:12px;
  background:#f7fbff;
}
.metadataPanel h3{
  margin:0 0 10px;
  color:#0057d8;
  font-size:15px;
}
.metadataGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.metadataGrid div{
  padding:8px;
  border:1px solid #dbe7f6;
  border-radius:8px;
  background:#fff;
}
.metadataGrid span{
  display:block;
  font-size:11px;
  color:#52657f;
  font-weight:700;
}
.metadataGrid strong{
  display:block;
  font-size:13px;
  color:#10223d;
  margin-top:2px;
  word-break:break-word;
}

.batchPanel{
  margin-top:12px;
  padding:12px;
  border:1px solid #c9d9ef;
  border-radius:12px;
  background:#f7fbff;
}
.batchPanel h3{margin:0 0 6px;color:#0b57d0}
.batchList{display:grid;gap:6px;margin:8px 0}
.batchItem{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
  padding:7px 9px;
  border:1px solid #dbe7f6;
  border-radius:8px;
  background:#fff;
  font-size:12px;
}
.batchItem strong{display:block;color:#10223d}
.batchItem span{color:#5d6b7f}
.batchResult{
  margin-top:10px;
  padding:10px;
  border-radius:10px;
  background:#fff8e8;
  border:1px solid #f0c36b;
  font-size:12px;
  line-height:1.35;
}
#batchAnalyseBtn{
  width:100%;
  margin-top:6px;
  padding:10px 12px;
  border-radius:10px;
  border:0;
  background:#0057d8;
  color:#fff;
  font-weight:800;
  cursor:pointer;
}
#batchAnalyseBtn:disabled{opacity:.45;cursor:not-allowed}
.metadataGrid div.wideMeta{grid-column:1 / -1}

/* Pre-Replit launch fixes: toolbar, manual tools and comparison */
.previewHeader{gap:18px !important;align-items:flex-start !important;}
.viewControls{
  display:flex !important;flex-wrap:wrap !important;justify-content:flex-end !important;
  align-items:center !important;gap:10px 12px !important;min-width:520px;max-width:760px;
}
.viewControls .tab{
  min-width:64px;height:48px;padding:0 18px !important;display:inline-flex !important;
  align-items:center !important;justify-content:center !important;white-space:nowrap !important;
}
.viewControls #zoomLabel{min-width:62px !important;text-align:center !important;font-weight:800 !important;font-size:20px !important;}
.viewControls .zoomText{margin-left:14px;font-weight:700;}
#enlargeBtn{min-width:140px !important;}
.canvasWrap.markMode{cursor:crosshair !important;}
.canvasWrap.eraseMode{cursor:not-allowed !important;}
.tool.active{background:#0057d8 !important;color:#fff !important;border-color:#0057d8 !important;}

.comparePanel{grid-column:2 / 4 !important;margin-top:10px !important;padding:14px 18px !important;}
.compareHeader{margin-bottom:8px !important;}
.compareWrap{
  position:relative !important;overflow:hidden !important;height:230px !important;min-height:230px !important;
  max-height:230px !important;background:#eef5ff !important;border-radius:16px !important;
}
.compareImg{
  position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;
  object-fit:contain !important;background:#fff !important;display:block !important;
}
#compareBefore{z-index:1 !important;}
#compareAfterWrap{
  position:absolute !important;top:0 !important;left:0 !important;bottom:0 !important;width:50%;
  overflow:hidden !important;z-index:2 !important;border-right:4px solid #0057d8;
}
#compareAfter{width:100% !important;height:100% !important;object-fit:contain !important;}
#compareSlider{
  position:absolute !important;z-index:5 !important;left:18% !important;right:18% !important;
  bottom:14px !important;width:64% !important;
}
.paywallBar{margin-bottom:8px !important;}
.serviceFooter{margin-top:14px !important;}
@media(max-width:1100px){
  .viewControls{min-width:0;max-width:none;justify-content:flex-start !important;}
  .comparePanel{grid-column:1 / -1 !important;}
}

/* Tightened central layout and comparison placement */
.centrePanel{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}
.centrePanel .comparePanel{
  width:100% !important;
  grid-column:auto !important;
  margin:0 !important;
  padding:12px 14px !important;
  box-sizing:border-box !important;
}
.centrePanel .compareWrap{
  height:190px !important;
  min-height:190px !important;
  max-height:190px !important;
}
.centrePanel .compareHeader h3{
  font-size:16px !important;
}
.centrePanel .compareHint{
  font-size:12px !important;
}
#refineFromManualBtn{
  border:1px solid #c9d9ef;
  background:#fff8e8;
  color:#9a5a00;
  border-radius:9px;
  font-weight:800;
  padding:9px 12px;
}
#refineFromManualBtn:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.manualTools{
  flex-wrap:wrap !important;
}

/* Final visual workflow polish based on approved mock-up */
body{
  background:#eaf3ff !important;
}

.topbar{
  background:#fff !important;
  border-bottom:1px solid #d7e5f7 !important;
  box-shadow:0 6px 18px rgba(0,70,160,.08) !important;
}

.workflowRail{
  margin:16px auto 18px;
  width:min(1540px, calc(100% - 32px));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:#fff;
  border:1px solid #cfe0f6;
  border-radius:18px;
  padding:18px 22px;
  box-shadow:0 8px 24px rgba(0,63,145,.08);
}

.workflowStep{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.workflowStep b{
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:24px;
  font-weight:900;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}

.workflowStep strong{
  display:block;
  text-transform:uppercase;
  font-size:13px;
  font-weight:900;
  color:#0057d8;
}

.workflowStep span{
  display:block;
  font-size:13px;
  color:#10223d;
  margin-top:3px;
}

.workflowArrow{
  color:#8aa2c6;
  font-size:38px;
  line-height:1;
  font-weight:300;
}

.stepGreen b{background:#07913b}
.stepBlue b{background:#0057d8}
.stepPurple b{background:#7c3ce3}
.stepOrange b{background:#e66b00}
.stepGreen strong{color:#078234}
.stepPurple strong{color:#7c3ce3}
.stepOrange strong{color:#e66b00}

.appShell{
  width:min(1540px, calc(100% - 32px)) !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:330px minmax(640px,1fr) 330px !important;
  gap:14px !important;
  align-items:start !important;
}

.panel,
.centrePanel,
.comparePanel{
  border:1px solid #cfe0f6 !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:0 8px 22px rgba(0,63,145,.06) !important;
}

.stepCard{
  border-radius:12px !important;
  border:1px solid #d8e6f8 !important;
  background:#fff !important;
}

.stepCard h2,
.rightPanel > h2,
.centrePanel h2,
.compareHeader h3{
  background:linear-gradient(90deg,#0057d8,#0573e6) !important;
  color:#fff !important;
  padding:10px 13px !important;
  border-radius:8px 8px 4px 4px !important;
  margin:-1px -1px 12px -1px !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.2px !important;
  font-size:14px !important;
}

.leftPanel .stepCard:first-child h2{
  background:linear-gradient(90deg,#078234,#07913b) !important;
}

.rightPanel > h2{
  background:linear-gradient(90deg,#006d88,#007d8a) !important;
}

.compareHeader h3{
  background:none !important;
  color:#0057d8 !important;
  padding:0 !important;
  margin:0 !important;
  font-size:15px !important;
}

.centrePanel{
  padding:14px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}

.previewHeader{
  gap:12px !important;
  align-items:center !important;
  margin-bottom:10px !important;
}

.previewHeader h2{
  background:linear-gradient(90deg,#0057d8,#0057d8) !important;
  margin:0 !important;
  min-width:190px !important;
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.pill{
  background:#e6f8ec !important;
  color:#087d32 !important;
  border-radius:9px !important;
  padding:8px 12px !important;
  font-weight:900 !important;
  font-size:12px !important;
}

.viewControls{
  flex:1 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  align-items:center !important;
  justify-content:flex-end !important;
  min-width:0 !important;
  max-width:none !important;
}

.viewControls .tab{
  min-width:76px !important;
  height:48px !important;
  border-radius:10px !important;
  font-weight:900 !important;
}

#toggleOverlay.active,
.tab.active{
  background:#0057d8 !important;
  color:#fff !important;
}

.viewControls #zoomLabel{
  min-width:70px !important;
  font-size:26px !important;
  color:#10223d !important;
  font-weight:900 !important;
  text-align:center !important;
}

.canvasWrap{
  border-radius:12px !important;
  background:#e0e7f1 !important;
  padding:14px !important;
  margin:0 !important;
}

#mainCanvas{
  border-radius:9px !important;
  display:block !important;
}

.manualTools{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  margin-top:8px !important;
}

.manualTools span{
  font-weight:900 !important;
  color:#10223d !important;
}

.manualTools button{
  border-radius:9px !important;
  padding:10px 16px !important;
  font-weight:900 !important;
}

#refineFromManualBtn{
  background:#fff !important;
  color:#10223d !important;
  border:1px solid #cfe0f6 !important;
}

.paywallBar{
  border-radius:10px !important;
  margin-top:4px !important;
}

.comparePanel{
  margin-top:4px !important;
  padding:14px 18px !important;
  width:100% !important;
  box-sizing:border-box !important;
}

.compareHeader{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  margin-bottom:10px !important;
}

.compareHint{
  font-size:12px !important;
  color:#5d6b7f !important;
}

.compareWrap{
  position:relative !important;
  overflow:hidden !important;
  height:260px !important;
  min-height:260px !important;
  max-height:260px !important;
  background:#eaf3ff !important;
  border-radius:10px !important;
  border:1px solid #d5e4f7 !important;
}

.compareImg{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  background:#eaf3ff !important;
  display:block !important;
}

#compareBefore{
  z-index:1 !important;
}

#compareAfterWrap{
  position:absolute !important;
  inset:0 auto 0 0 !important;
  width:50%;
  overflow:hidden !important;
  z-index:2 !important;
  border-right:4px solid #0057d8 !important;
}

#compareAfter{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

#compareSlider{
  position:absolute !important;
  z-index:8 !important;
  left:28% !important;
  right:28% !important;
  bottom:14px !important;
  width:44% !important;
}

.compareLabel{
  position:absolute;
  top:14px;
  z-index:9;
  font-size:12px;
  font-weight:900;
  color:#10223d;
  background:rgba(255,255,255,.55);
  border-radius:6px;
  padding:5px 8px;
}

.leftCompare{left:14px}
.rightCompare{right:14px}

.compareModeBtns{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:12px;
  font-size:12px;
  font-weight:900;
}

.compareMode{
  border:1px solid #d5e4f7;
  border-radius:8px;
  padding:8px 18px;
  background:#fff;
  color:#10223d;
  font-weight:900;
}

.compareMode.active{
  background:#0057d8;
  color:#fff;
  border-color:#0057d8;
}

.resultCard{
  border-radius:12px !important;
  background:#fff !important;
}

.resultCard strong{
  font-size:34px !important;
  color:#0057d8 !important;
}

#severity{
  color:#e44424 !important;
}

.infoCard,
.specialAlert{
  border-radius:12px !important;
}

#reportBtn,
.unlockBtn,
#detectBtn{
  background:#0057d8 !important;
  border-radius:10px !important;
  font-weight:900 !important;
}

.serviceFooter{
  width:min(1540px, calc(100% - 32px)) !important;
  margin:28px auto 20px !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:0 8px 22px rgba(0,63,145,.06) !important;
  overflow:hidden !important;
}

@media(max-width:1200px){
  .workflowRail{overflow-x:auto;overflow-y:visible;justify-content:flex-start;flex-wrap:nowrap;gap:8px;padding:12px 18px}
  .workflowStep{min-width:130px;flex-shrink:0}
  .workflowArrow{font-size:28px;flex-shrink:0}
  .appShell{grid-template-columns:280px 1fr !important}
  .rightPanel{grid-column:1 / -1}
}

@media(max-width:1100px){
  .workflowRail{gap:4px;padding:8px 12px}
  .workflowStep{min-width:100px;gap:6px;padding:0}
  .workflowStep b{width:28px;height:28px;font-size:14px;flex-shrink:0}
  .workflowStep strong{font-size:11px}
  .workflowStep span{font-size:10px}
  .workflowArrow{font-size:18px;flex-shrink:0;padding:0 2px}
}

@media(max-width:900px){
  .appShell{grid-template-columns:1fr !important}
  .workflowRail{display:none}
}

/* Faster comparison preview loading state */
.comparePanel{
  position:relative;
}
.comparePanel.compareLoading::after{
  content:"Updating comparison preview…";
  position:absolute;
  right:18px;
  bottom:14px;
  background:rgba(255,255,255,.92);
  border:1px solid #cfe0f6;
  color:#0057d8;
  font-weight:900;
  font-size:12px;
  padding:7px 10px;
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,63,145,.10);
}


/* REPAIRED PREVIEW TOOLBAR — no overlap, uniform controls */
.repairedPreviewHeader{
  display:grid !important;
  grid-template-columns: 220px minmax(0,1fr) !important;
  gap:16px !important;
  align-items:center !important;
  margin-bottom:12px !important;
}

.previewTitleBlock{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  min-width:0 !important;
}

.previewTitleBlock h2{
  background:none !important;
  color:#0057d8 !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:0 !important;
  font-size:18px !important;
  line-height:1.1 !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  white-space:normal !important;
  min-width:105px !important;
}

.previewTitleBlock .pill{
  background:#e6f8ec !important;
  color:#087d32 !important;
  border-radius:9px !important;
  padding:8px 12px !important;
  font-size:12px !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
  font-weight:900 !important;
}

.repairedToolbar{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  align-items:flex-end !important;
  justify-content:center !important;
  min-width:0 !important;
  width:100% !important;
}

.repairedToolbar .viewRow,
.repairedToolbar .zoomRow{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  width:100% !important;
}

.repairedToolbar .controlLabel{
  font-size:13px !important;
  color:#10223d !important;
  font-weight:900 !important;
  margin-right:4px !important;
}

.repairedToolbar .tab{
  height:40px !important;
  border-radius:10px !important;
  padding:0 14px !important;
  min-width:82px !important;
  width:auto !important;
  font-size:13px !important;
  font-weight:900 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  margin:0 !important;
}

.repairedToolbar #toggleClean{
  min-width:128px !important;
}

.repairedToolbar .zoomBtn{
  min-width:46px !important;
  width:46px !important;
  padding:0 !important;
}

.repairedToolbar .fitBtn{
  min-width:58px !important;
}

.repairedToolbar .enlargeBtn{
  min-width:116px !important;
}

.repairedToolbar #zoomLabel{
  min-width:68px !important;
  width:68px !important;
  text-align:center !important;
  font-size:20px !important;
  font-weight:900 !important;
  color:#10223d !important;
  line-height:40px !important;
  margin:0 !important;
}

@media(max-width:1200px){
  .repairedPreviewHeader{
    grid-template-columns:1fr !important;
  }
  .repairedToolbar{
    align-items:flex-start !important;
  }
  .repairedToolbar .viewRow,
  .repairedToolbar .zoomRow{
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
  }
}

/* FINAL CLEAN SINGLE-ROW VIEW + ZOOM TOOLBAR - applied to actual .analysisHeader */
.cleanAnalysisHeader{
  display:block !important;
  margin:0 0 10px 0 !important;
  padding:0 !important;
}

.cleanAnalysisHeader .previewTitleLine{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px !important;
  margin:0 0 10px 0 !important;
  padding:0 !important;
}

.cleanAnalysisHeader .previewTitleLine h2{
  background:none !important;
  color:#0057d8 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  font-size:18px !important;
  line-height:1.1 !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

.cleanAnalysisHeader .pill{
  background:#e6f8ec !important;
  color:#087d32 !important;
  border-radius:9px !important;
  padding:8px 12px !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}

.cleanToolbar{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:6px !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  overflow:visible !important;
  padding:0 !important;
  margin:0 !important;
}

.cleanToolbar .controlLabel,
.cleanToolbar .zoomText{
  font-size:13px !important;
  font-weight:900 !important;
  color:#10223d !important;
  margin:0 2px !important;
  white-space:nowrap !important;
}

.cleanToolbar .tab{
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  border-radius:8px !important;
  padding:0 10px !important;
  min-width:58px !important;
  width:auto !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  margin:0 !important;
}

.cleanToolbar #viewOriginal{min-width:70px !important;}
.cleanToolbar #toggleOverlay{min-width:72px !important;}
.cleanToolbar #toggleClean{min-width:104px !important;}

.cleanToolbar .compactBtn,
.cleanToolbar #zoomOut,
.cleanToolbar #zoomIn{
  min-width:36px !important;
  width:36px !important;
  padding:0 !important;
}

.cleanToolbar #fitBtn{
  min-width:42px !important;
  width:42px !important;
  padding:0 !important;
}

.cleanToolbar #enlargeBtn{
  min-width:92px !important;
  width:92px !important;
  padding:0 8px !important;
}

.cleanToolbar #zoomLabel{
  min-width:54px !important;
  width:54px !important;
  font-size:17px !important;
  font-weight:900 !important;
  color:#10223d !important;
  text-align:center !important;
  line-height:34px !important;
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap !important;
}

/* Force override of previous broken rules */
.analysisHeader.cleanAnalysisHeader,
.analysisHeader.cleanAnalysisHeader .viewControls{
  max-width:none !important;
}

@media(max-width:1100px){
  .cleanToolbar{
    flex-wrap:wrap !important;
  }
}

/* Final day-to-day toolbar refinement */
.cleanToolbar{
  gap:4px !important;
}

.cleanToolbar .tab{
  height:32px !important;
  min-height:32px !important;
  max-height:32px !important;
  border-radius:8px !important;
  padding:0 8px !important;
  font-size:11px !important;
}

.cleanToolbar #viewOriginal{
  min-width:64px !important;
}

.cleanToolbar #toggleOverlay{
  min-width:66px !important;
}

.cleanToolbar #toggleClean{
  min-width:92px !important;
  font-size:10.5px !important;
}

.cleanToolbar #zoomOut,
.cleanToolbar #zoomIn{
  min-width:32px !important;
  width:32px !important;
}

.cleanToolbar #fitBtn{
  min-width:38px !important;
  width:38px !important;
}

.cleanToolbar #enlargeBtn{
  min-width:74px !important;
  width:74px !important;
  font-size:10.5px !important;
  padding:0 6px !important;
}

.cleanToolbar #zoomLabel{
  min-width:48px !important;
  width:48px !important;
  font-size:15px !important;
  line-height:32px !important;
}

.cleanToolbar .controlLabel,
.cleanToolbar .zoomText{
  font-size:12px !important;
  margin:0 1px !important;
}

.cleanAnalysisHeader .previewTitleLine{
  margin-bottom:8px !important;
}

.cleanAnalysisHeader .previewTitleLine h2{
  font-size:17px !important;
}

.cleanAnalysisHeader .pill{
  font-size:11px !important;
  padding:7px 10px !important;
}


/* ═══════════════════════════════════════════════════════════════
   AI Label Tools — added styles
   ═══════════════════════════════════════════════════════════════ */

.aiToolsCard h2 {
  background: linear-gradient(90deg, #5b21b6, #7c3ce3) !important;
}

.aiStatusCard {
  background: #f8f5ff;
  border: 1px solid #d8cbf7;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 4px;
}

.aiStatusRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.aiStatusDot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #9ca3af;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(120,80,255,0.18);
}

.aiStatusDot.loaded {
  background: #07913b;
  box-shadow: 0 0 0 3px rgba(7,145,59,0.18);
}

.aiStatusDot.placeholder {
  background: #e66b00;
  box-shadow: 0 0 0 3px rgba(230,107,0,0.18);
}

#aiModelStatusText {
  font-size: 11.5px;
  color: #5d6b80;
  line-height: 1.35;
  font-weight: 700;
}

.aiModelActions {
  margin-top: 4px;
}

.aiSmallBtn {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #c4b5fd;
  background: #fff;
  color: #5b21b6;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
}

.aiSmallBtn:hover {
  background: #f5f0ff;
  border-color: #7c3ce3;
}

.labelTypeSelector {
  display: grid;
  gap: 6px;
  margin: 6px 0 10px;
}

.labelTypeBtn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid #c9d9ef;
  border-radius: 8px;
  background: #fff;
  color: #10223d;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}

.labelTypeBtn:hover {
  border-color: #7c3ce3;
  background: #f8f5ff;
}

.labelTypeBtn.active {
  border-color: #7c3ce3;
  background: #f0ebff;
  color: #5b21b6;
}

.labelDot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.7);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.18);
}

.aiToolBtns {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.aiToolBtns button {
  width: 100%;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid #c9d9ef;
  background: #fff;
  color: #10223d;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}

.aiToolBtns button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.aiToolBtns button.active {
  background: #7c3ce3 !important;
  color: #fff !important;
  border-color: #7c3ce3 !important;
}

.exportLabelsBtn {
  background: #0057d8 !important;
  color: #fff !important;
  border-color: #0057d8 !important;
}

.exportLabelsBtn:disabled {
  background: #9ca3af !important;
  border-color: #9ca3af !important;
}

/* Label mode cursor on canvas */
.canvasWrap.labelMode {
  cursor: crosshair !important;
}

.canvasWrap.labelMode canvas {
  cursor: crosshair !important;
}

/* Overlay canvas sits on top of mainCanvas */
#labelOverlayCanvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 9px;
  z-index: 5;
}


/* ═══════════════════════════════════════════════════════════════
   Compare panel — clean overrides
   ═══════════════════════════════════════════════════════════════ */

/* Panel reveal — JS sets display:'' to show */
#comparePanel {
  margin-top: 6px !important;
  padding: 16px 18px 18px !important;
}

#comparePanel .compareHeader h3 {
  background: none !important;
  color: #0057d8 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: .2px !important;
}

/* Compare wrap: clean height, no stray alt text */
#comparePanel .compareWrap {
  height: 240px !important;
  min-height: 240px !important;
  max-height: 240px !important;
  background: #dde8f5 !important;
  border-radius: 10px !important;
  border: 1px solid #c4d8f0 !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Never show alt text — hide broken images gracefully */
#compareBefore,
#compareAfter {
  font-size: 0 !important;
  color: transparent !important;
}

/* Divider line (sits behind the AfterWrap border) */
.compareDivider {
  display: none;
}

/* Full-width slider positioned at bottom of the compare wrap */
#compareSlider {
  position: absolute !important;
  z-index: 10 !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  width: calc(100% - 24px) !important;
  height: 4px !important;
  accent-color: #0057d8;
  cursor: ew-resize;
}

/* Labels rendered above the slider */
.compareLabel {
  z-index: 9 !important;
  bottom: auto !important;
  top: 12px !important;
  font-size: 11px !important;
  padding: 4px 8px !important;
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(4px) !important;
  border-radius: 6px !important;
  font-weight: 900 !important;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   AI Tools panel — cleaner button layout
   ═══════════════════════════════════════════════════════════════ */

.aiPrimaryActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0 8px;
}

.aiPrimaryBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px 8px;
  border: 1.5px solid #c4b5fd;
  border-radius: 10px;
  background: #fff;
  color: #10223d;
  font-weight: 800;
  font-size: 12.5px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  line-height: 1.2;
}

.aiPrimaryBtn:hover:not(:disabled) {
  border-color: #7c3ce3;
  background: #f8f5ff;
}

.aiPrimaryBtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.aiPrimaryBtn.active {
  background: #7c3ce3 !important;
  color: #fff !important;
  border-color: #7c3ce3 !important;
}

.aiPrimaryIcon {
  font-size: 18px;
  line-height: 1;
}

.aiPrimaryHint {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.7;
  line-height: 1.2;
}

.aiPrimaryBtn.active .aiPrimaryHint {
  opacity: 0.85;
}

/* Label type panel — 4-column pill grid */
.labelTypePanel {
  margin: 6px 0 10px;
}

.labelTypeHeading {
  font-size: 11px;
  font-weight: 800;
  color: #5b21b6;
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.labelTypeGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.labelTypeGrid .labelTypeBtn {
  padding: 8px 6px;
  font-size: 12px;
  justify-content: center;
  gap: 5px;
}

/* Export button — prominent at bottom of section */
.exportLabelsBtn {
  width: 100%;
  padding: 11px 14px !important;
  border-radius: 9px !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  background: #0057d8 !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer;
  display: block;
  margin-top: 4px;
}

.exportLabelsBtn:disabled {
  background: #9ca3af !important;
  cursor: not-allowed;
}

.exportLabelsBtn:not(:disabled):hover {
  background: #0047b8 !important;
}

/* Remove old duplicate aiToolBtns rules that conflict */
.aiToolBtns {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   LAYOUT FIX — restore 3-column reference layout at all
   desktop viewports (was breaking at 1016px canvas width)
   ═══════════════════════════════════════════════════════════════ */

/* Compact 3-column grid that holds at ~860px+ */
.appShell {
  grid-template-columns: 240px minmax(0,1fr) 240px !important;
  gap: 12px !important;
  width: calc(100% - 24px) !important;
  padding: 0 12px !important;
}

/* Kill the 1200px breakpoint that drops to 2 columns too early */
@media (min-width: 901px) {
  .appShell {
    grid-template-columns: 240px minmax(0,1fr) 240px !important;
  }
  .rightPanel {
    grid-column: auto !important;
  }
}

/* Compact view-toolbar buttons to match reference */
.viewControls .tab {
  height: 34px !important;
  min-width: 0 !important;
  padding: 0 11px !important;
  font-size: 12px !important;
  border-radius: 7px !important;
}

/* Compact zoom "100%" label */
.viewControls #zoomLabel {
  font-size: 15px !important;
  min-width: 40px !important;
  font-weight: 900 !important;
}

/* Compact zoom +/− and Fit buttons */
.viewControls .compactBtn,
.viewControls .fitBtn {
  min-width: 0 !important;
  width: 32px !important;
  padding: 0 !important;
}
.viewControls .fitBtn {
  width: auto !important;
  padding: 0 10px !important;
}
.viewControls .enlargeBtn {
  padding: 0 10px !important;
  min-width: 0 !important;
}

/* Tighten the toolbar row itself */
.viewControls {
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

/* Tighten the analysis preview header */
.analysisHeader {
  margin-bottom: 8px !important;
}

/* Step card headers — tighter padding to match reference density */
.stepCard h2 {
  padding: 8px 12px !important;
  font-size: 13px !important;
  margin: -1px -1px 10px -1px !important;
}

/* Left panel step cards — compact */
.leftPanel .stepCard {
  padding: 12px 14px !important;
}

/* Right panel — compact */
.rightPanel {
  padding: 12px 14px !important;
}
.rightPanel > h2 {
  padding: 8px 12px !important;
  font-size: 13px !important;
  margin: -1px -1px 10px -1px !important;
}

/* Canvas wrap — let it breathe but not force excess height */
.canvasWrap {
  min-height: 420px !important;
  padding: 10px !important;
}

/* Manual tools — compact */
.manualTools {
  gap: 6px !important;
  padding: 6px 0 !important;
  font-size: 13px !important;
}
.manualTools button {
  padding: 7px 12px !important;
  font-size: 12px !important;
  border-radius: 7px !important;
}

/* Paywall bar — compact */
.paywallBar {
  padding: 10px 14px !important;
  font-size: 13px !important;
}

/* Centre panel — less gap */
.centrePanel {
  gap: 8px !important;
  padding: 12px !important;
}

/* Mobile: keep single column below 860px */
@media (max-width: 860px) {
  .appShell {
    grid-template-columns: 1fr !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   TOPBAR + WORKFLOW RAIL — compact for 1016–1140px viewports
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1140px) {
  .topbar {
    grid-template-columns: 220px 1fr 260px !important;
    min-height: 88px !important;
    padding: 10px 16px !important;
    gap: 10px !important;
  }
  .brandLogo {
    width: 210px !important;
    max-height: 72px !important;
  }
  .titleBlock h1 {
    font-size: 22px !important;
    letter-spacing: 0.3px !important;
  }
  .titleBlock p {
    font-size: 14px !important;
    margin-top: 2px !important;
  }
  .plainBtn {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
  .qIcon {
    width: 18px !important;
    height: 18px !important;
    font-size: 11px !important;
    margin-right: 4px !important;
  }
  .bookBtn {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
  /* Tighter app shell for this range */
  .appShell {
    grid-template-columns: 210px minmax(0,1fr) 210px !important;
    gap: 10px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   LAYOUT BALANCE — reduce forced canvas height, restore compare
   ═══════════════════════════════════════════════════════════════ */

/* Canvas wrap — natural height, let content drive it */
.canvasWrap {
  min-height: 300px !important;
}

/* Compare panel — always visible */
#comparePanel {
  display: block !important;
}

/* Empty state inside the compare wrap */
.compareEmptyMsg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 3;
  background: #eef4fc;
  border-radius: 9px;
}

.compareEmptyMsg p {
  font-size: 12px;
  color: #7a94b4;
  font-weight: 700;
  text-align: center;
  max-width: 220px;
  line-height: 1.45;
  margin: 0;
}

/* When data loads: hide empty state, show images/slider */
#comparePanel.hasData .compareEmptyMsg {
  display: none;
}

/* The compare wrap needs relative positioning for the empty state */
#compareWrapInner {
  position: relative !important;
}

/* Compact compare wrap height */
#comparePanel .compareWrap {
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;
}

/* Hide slider and labels until data loads */
#comparePanel:not(.hasData) #compareSlider,
#comparePanel:not(.hasData) .compareLabel {
  display: none !important;
}

/* Centre panel gap — tighter when compare is always showing */
.centrePanel {
  gap: 6px !important;
}


/* ═══════════════════════════════════════════════════════════════
   LEFT PANEL — stretch to fill grid row, expand tip card
   ═══════════════════════════════════════════════════════════════ */

.leftPanel {
  align-self: stretch !important;
  height: 100% !important;
}

/* Tip card grows to fill remaining vertical space */
.leftPanel .tipCard {
  flex: 1 !important;
  min-height: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════
   LEFT PANEL — background fill to eliminate apparent blank space
   ═══════════════════════════════════════════════════════════════ */

/* Give the appShell row a stretch default so left panel fills height */
.appShell {
  align-items: stretch !important;
}

/* Left panel: stretch background fills the row, cards stay stacked at top */
.leftPanel {
  background: rgba(255,255,255,0.55) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0,60,140,.06) !important;
  padding: 12px !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  height: 100% !important;
}

/* TIP card fills the remaining vertical space in the left panel */
.leftPanel .tipCard {
  flex: 1 !important;
  margin-bottom: 0 !important;
}

/* Step cards inside left panel: no double-shadow on the inside */
.leftPanel .stepCard {
  box-shadow: 0 2px 8px rgba(0,60,140,.07) !important;
}


/* ═══════════════════════════════════════════════════════════════
   COMPACT BREAKPOINT — stop left-panel content wrapping at 1016px
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1140px) {

  /* Slightly wider side panels so content doesn't wrap */
  .appShell {
    grid-template-columns: 200px minmax(0,1fr) 200px !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  /* Left panel inner spacing — tighter so cards have more room */
  .leftPanel {
    padding: 8px !important;
    gap: 8px !important;
  }

  .leftPanel .stepCard,
  .leftPanel .tipCard {
    padding: 10px 12px !important;
  }

  /* Step card headings — smaller at this size */
  .leftPanel .stepCard h2,
  .leftPanel .tipCard h2 {
    font-size: 11px !important;
    padding: 6px 10px !important;
    margin: -1px -1px 8px -1px !important;
  }

  /* Range labels — smaller font so "Detection Strength" fits on one line */
  .rangeLabel {
    font-size: 11px !important;
    margin: 8px 0 5px !important;
  }

  /* Small labels and values in left panel */
  .leftPanel label,
  .leftPanel p,
  .leftPanel .small,
  .leftPanel span:not(.uploadIcon) {
    font-size: 11px !important;
  }

  /* Mode grid buttons — smaller */
  .modeGrid button,
  .leftPanel .mode {
    font-size: 10px !important;
    padding: 5px 3px !important;
  }

  /* Detect / Reset buttons */
  #detectBtn, #resetBtn {
    font-size: 12px !important;
    padding: 9px 10px !important;
  }

  /* Colour radio labels */
  .colourOption {
    font-size: 11px !important;
    padding: 5px 8px !important;
  }

  /* Drop zone — reduce min-height */
  .dropZone {
    min-height: 90px !important;
  }
  .dropZone p, .dropZone span {
    font-size: 12px !important;
  }
  .uploadIcon {
    font-size: 26px !important;
  }

  /* Right panel tighter */
  .rightPanel {
    padding: 8px 10px !important;
  }
  .rightPanel h2 {
    font-size: 11px !important;
    padding: 6px 10px !important;
    margin: -1px -1px 8px -1px !important;
  }
  .resultCard {
    padding: 10px 6px !important;
    margin: 6px 0 !important;
  }
  .resultCard span {
    font-size: 10px !important;
  }
  .resultCard strong {
    font-size: 28px !important;
  }
  .splitStats div {
    padding: 7px 8px !important;
    font-size: 11px !important;
  }
  .infoCard {
    padding: 10px !important;
    margin: 6px 0 !important;
  }
  .infoCard h3 {
    font-size: 11px !important;
  }
  .infoCard p {
    font-size: 10px !important;
  }
}

/* ── Label & AI Tools card ────────────────────────────────────────────────── */
.labelToolsCard {
  background: #fff;
  border: 1px solid #dde2ea;
  border-radius: 10px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.labelToolsCard h2 {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  color: #1a3a5c !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}
.ltDesc {
  color: #5d6b80 !important;
  font-size: 10px !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}
.ltToggle {
  font-size: 11px !important;
  font-weight: 700 !important;
  background: #f0f4f8 !important;
  border: 1.5px solid #b0bec8 !important;
  color: #1a3a5c !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  cursor: pointer !important;
  transition: all .15s !important;
}
.ltToggle.active {
  background: #1a3a5c !important;
  color: #fff !important;
  border-color: #1a3a5c !important;
}
.ltTypePad {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  background: #f8fafc !important;
  border: 1px solid #dde2ea !important;
  border-radius: 7px !important;
  padding: 8px !important;
}
.labelTypeBtn {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 5px 8px !important;
  border: 1.5px solid transparent !important;
  border-radius: 5px !important;
  background: transparent !important;
  cursor: pointer !important;
  color: #2d3748 !important;
  text-align: left !important;
  transition: background .12s !important;
}
.labelTypeBtn:hover { background: #eef2f7 !important; }
.labelTypeBtn.active {
  background: #e8f0fe !important;
  border-color: #4a7cc7 !important;
  color: #1a3a5c !important;
}
.ldot {
  display: inline-block !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.ltActions {
  display: flex !important;
  gap: 5px !important;
}
.ltActions .tool {
  flex: 1 !important;
  font-size: 10px !important;
  padding: 5px 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.ltStatus {
  color: #5d6b80 !important;
  font-size: 9.5px !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}
.ltModelBtn {
  font-size: 9.5px !important;
  opacity: .7 !important;
  padding: 4px 7px !important;
  border: 1px dashed #b0bec8 !important;
  background: transparent !important;
  color: #5d6b80 !important;
  border-radius: 5px !important;
  cursor: pointer !important;
}
.ltModelBtn:hover { opacity: 1 !important; }

/* Canvas label mode cursor */
.labelMode canvas { cursor: crosshair !important; }

/* ── Oil confidence bar in right panel ────────────────────────────────────── */
.oilConfBar {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-size: 10px;
  color: #5d6b80;
  flex-wrap: wrap;
}
.oilConfTrack {
  flex: 1;
  min-width: 60px;
  height: 6px;
  background: #eef2f7;
  border-radius: 3px;
  overflow: hidden;
}
.oilConfFill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  border-radius: 3px;
  transition: width .4s ease;
}
.oilConfBar b {
  font-size: 11px;
  color: #c0440a;
  min-width: 28px;
  text-align: right;
}

/* ── Label tools card fills the remaining panel space (replaces tipCard flex:1) ── */
.leftPanel .tipCard {
  flex: 0 0 auto !important;
}
.leftPanel .labelToolsCard {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: auto !important;
}

/* ── Left panel: natural height so all 4 cards show without clipping ────── */
.leftPanel {
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  overflow: visible !important;
}
.leftPanel .labelToolsCard {
  flex: 0 0 auto !important;
  overflow: visible !important;
}

/* ── AI Label Tools bar (below Manual Tools, above paywall) ─────────────── */
.labelToolsBar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  padding: 8px 12px;
  background: #f0f5ff;
  border: 1px solid #c5d8f5;
  border-radius: 9px;
  font-size: 12px;
}
.ltBarLabel {
  font-weight: 800 !important;
  color: #1a3a5c !important;
  margin-right: 4px !important;
  white-space: nowrap !important;
}
.ltToggle {
  font-size: 11px !important;
  font-weight: 700 !important;
  background: #fff !important;
  border: 1.5px solid #b0bec8 !important;
  color: #1a3a5c !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.ltToggle.active {
  background: #1a3a5c !important;
  color: #fff !important;
  border-color: #1a3a5c !important;
}
.ltInlineTypes {
  display: flex !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}
.labelTypeBtn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 8px !important;
  border: 1.5px solid #d0d8e4 !important;
  border-radius: 5px !important;
  background: #fff !important;
  cursor: pointer !important;
  color: #2d3748 !important;
  white-space: nowrap !important;
  transition: background .1s !important;
}
.labelTypeBtn:hover { background: #e8f0fe !important; }
.labelTypeBtn.active {
  background: #e8f0fe !important;
  border-color: #4a7cc7 !important;
  color: #1a3a5c !important;
}
.ldot {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.ltBarSep {
  width: 1px !important;
  height: 20px !important;
  background: #c5d8f5 !important;
  margin: 0 2px !important;
}
.ltModelBtn {
  font-size: 10px !important;
  padding: 4px 8px !important;
  border: 1px dashed #aabcd6 !important;
  background: transparent !important;
  color: #5d6b80 !important;
  border-radius: 5px !important;
  cursor: pointer !important;
}
.ltModelBtn:hover { color: #1a3a5c !important; border-color: #4a7cc7 !important; }
.ltBarStatus {
  font-size: 10px !important;
  color: #5d6b80 !important;
  margin-left: 4px !important;
  white-space: nowrap !important;
}

/* Canvas label mode cursor */
.canvasWrap.labelMode canvas { cursor: crosshair !important; }

/* ltInlineTypes: flex layout but allow JS to toggle visibility */
.ltInlineTypes {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* Drag-over state for upload zone */
.dropZone.dragOver {
  border-color: #0b57d0 !important;
  background: #e8f0fe !important;
  box-shadow: 0 0 0 3px #bdd0fb !important;
}

/* ── Toolbar compact fix: restore Enlarge button visibility ─────────────── */
/* Override the oversized #enlargeBtn min-width set earlier */
#enlargeBtn { min-width: 88px !important; width: auto !important; }

/* Tighten the whole viewControls row so everything fits in one line */
.viewControls.cleanToolbar {
  flex-wrap: nowrap !important;
  gap: 4px !important;
  font-size: 12px !important;
}

/* Compact all tab buttons in the toolbar */
.viewControls.cleanToolbar .tab {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 9px !important;
  min-width: 0 !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

/* Specific widths for each button */
.viewControls.cleanToolbar #viewOriginal   { min-width: 62px !important; }
.viewControls.cleanToolbar #toggleOverlay  { min-width: 66px !important; }
.viewControls.cleanToolbar #toggleClean    { min-width: 88px !important; }
.viewControls.cleanToolbar #zoomOut,
.viewControls.cleanToolbar #zoomIn        { min-width: 28px !important; width: 28px !important; padding: 0 !important; }
.viewControls.cleanToolbar #fitBtn        { min-width: 34px !important; width: 34px !important; padding: 0 !important; }
.viewControls.cleanToolbar #enlargeBtn    { min-width: 76px !important; width: 76px !important; padding: 0 6px !important; }

/* Compact the zoom label */
.viewControls.cleanToolbar #zoomLabel {
  min-width: 44px !important;
  width: 44px !important;
  font-size: 12px !important;
  text-align: center !important;
}

/* Compact the View:/Zoom: labels */
.viewControls.cleanToolbar .controlLabel,
.viewControls.cleanToolbar .zoomText {
  font-size: 12px !important;
  white-space: nowrap !important;
}

/* Keep the analysis header from overflowing */
.analysisHeader.cleanAnalysisHeader {
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
}
.previewTitleLine {
  flex-shrink: 0 !important;
}

/* ── Grit / hard particulate alert block ───────────────────────────────── */
.gritLabel {
  display: block !important;
  color: #5a00cc !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  margin-bottom: 4px !important;
}
.gritBadge {
  display: inline-block !important;
  background: #7e2cff !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 2px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
}
.gritWarning {
  font-size: 12px !important;
  color: #4a0099 !important;
  background: #f3ebff !important;
  border-left: 3px solid #7e2cff !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
  margin: 6px 0 !important;
  line-height: 1.4 !important;
}
.gritConfTrack { background: #e8d8ff !important; }
.gritConfFill { background: linear-gradient(90deg, #7e2cff, #b36fff) !important; }
#gritAlertBlock + #oilAlertBlock {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid #e8d8ff !important;
}
.specialCountBadge {
  display: inline-block !important;
  margin-left: 6px !important;
}

/* ── Fibre / hair alert block ───────────────────────────────────────────── */
.fibreLabel {
  display: block !important;
  color: #009e85 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  margin-bottom: 4px !important;
}
.fibreBadge {
  display: inline-block !important;
  background: #00C9A7 !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 2px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
}
.fibreWarning {
  font-size: 12px !important;
  color: #007a67 !important;
  background: #e6faf6 !important;
  border-left: 3px solid #00C9A7 !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
  margin: 6px 0 !important;
  line-height: 1.4 !important;
}
.fibreConfTrack { background: #b8f0e8 !important; }
.fibreConfFill { background: linear-gradient(90deg, #00C9A7, #4de8c9) !important; }
#fibreAlertBlock {
  border-top: 1px solid #b8f0e8 !important;
  margin-top: 10px !important;
  padding-top: 10px !important;
}


/* ===================================================
   RESPONSIVE LAYOUT — TABLET & MOBILE
   =================================================== */

/* Mobile notice banner — hidden on desktop, shown on phones */
.mobileNotice{display:none;}

/* Tablet: 768px – 1099px
   appShell already stacks at 1100px; these rules clean up
   the header, workflow rail and footer for tablet viewports */
@media(max-width:1099px){
  .brandLogo{width:260px !important;max-height:72px !important;}
  .titleBlock h1{font-size:24px !important;}
  .titleBlock p{font-size:16px !important;}
  .viewControls{min-width:0 !important;max-width:none !important;justify-content:flex-start !important;}
  .serviceFooter{grid-template-columns:1fr 1fr !important;margin:0 10px 10px !important;}
  .serviceFooter>div{border-right:0 !important;border-bottom:1px solid var(--line) !important;}
  .serviceFooter>div:last-child{border-bottom:0 !important;}
  .contactBox img{width:200px !important;}
}

/* Phone: ≤ 767px */
@media(max-width:767px){
  /* Mobile notice */
  .mobileNotice{
    display:flex !important;flex-direction:column;gap:12px;
    background:#f1f7ff;border-bottom:2px solid #cfe0f6;padding:14px 16px;
  }
  .mobileNoticeInner{display:flex;gap:12px;align-items:flex-start;}
  .mobileNoticeIcon{font-size:28px;flex-shrink:0;line-height:1.2;}
  .mobileNoticeInner>div{flex:1;}
  .mobileNoticeInner strong{display:block;color:#0057d8;font-weight:900;font-size:15px;margin-bottom:4px;}
  .mobileNoticeInner p{margin:0;font-size:13px;color:#334766;line-height:1.4;}
  .mobileNoticeClose{
    flex-shrink:0;background:#fff;border:1px solid #cfe0f6;border-radius:50%;
    width:30px;height:30px;padding:0;font-size:20px;line-height:1;color:#0057d8;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    box-shadow:none;margin-left:auto;
  }
  .mobileNoticeBookBtn{
    display:block !important;width:100%;text-align:center;padding:14px;
    font-size:16px;border-radius:10px;background:#0057d8;color:#fff;
    font-weight:900;text-decoration:none;
  }

  /* Header */
  .topbar{grid-template-columns:1fr !important;min-height:auto !important;padding:10px 14px !important;gap:8px !important;}
  .brandLogo{width:180px !important;max-height:52px !important;}
  .titleBlock h1{font-size:19px !important;letter-spacing:0 !important;}
  .titleBlock p{font-size:13px !important;}
  .topNav{flex-wrap:wrap !important;gap:6px !important;justify-content:flex-start !important;}
  .topNav .bookBtn{display:none !important;}
  .plainBtn{padding:8px 12px !important;font-size:13px !important;}

  /* App shell */
  .appShell{grid-template-columns:1fr !important;padding:8px !important;gap:8px !important;width:calc(100% - 16px) !important;}
  .leftPanel{display:flex !important;flex-direction:column !important;}

  /* Canvas & toolbar */
  .canvasWrap{min-height:240px !important;}
  .viewControls{min-width:0 !important;max-width:none !important;gap:5px !important;justify-content:flex-start !important;}
  .viewControls .tab{min-width:auto !important;height:34px !important;padding:0 8px !important;font-size:11px !important;}
  .viewControls #zoomLabel{font-size:15px !important;min-width:40px !important;}
  .zoomText{display:none !important;}
  #enlargeBtn{display:none !important;}
  .manualTools button{padding:7px 8px !important;font-size:11px !important;}
  .manualTools span{font-size:11px !important;}

  /* Compare panel */
  .compareWrap{height:160px !important;min-height:160px !important;max-height:160px !important;}

  /* Results */
  .resultCard strong{font-size:28px !important;}
  .metadataGrid{grid-template-columns:1fr !important;}

  /* Footer */
  .serviceFooter{grid-template-columns:1fr !important;margin:0 8px 8px !important;}
  .serviceFooter>div{border-right:0 !important;border-bottom:1px solid var(--line) !important;}
  .serviceFooter>div:last-child{border-bottom:0 !important;}
  .contactBox img{width:180px !important;}
  .contactBox p{font-size:13px !important;}
}

/* Restore download button */
.downloadRestoreBtn{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:8px 18px;background:#0057d8;color:#fff;border:none;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s;width:100%;justify-content:center}
.downloadRestoreBtn:hover{background:#0046b0}

/* Sensor note */
.sensorNote{font-size:11.5px;color:#5a6a7a;background:#f0f6ff;border-radius:6px;padding:6px 10px;margin:4px 0 0;line-height:1.45}

/* Pre/Post clean comparison */
.postCleanPanel h3{margin:0 0 4px;font-size:13px;color:#0057d8}
.postCleanBtn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:#1a6b36;color:#fff;border:none;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s;width:100%;justify-content:center;margin-top:2px}
.postCleanBtn:hover{background:#155429}
.postCleanBtn:disabled{background:#7ab894;cursor:not-allowed}
.postCleanRow{display:flex;align-items:center;justify-content:space-between;margin:12px 0 8px;gap:6px}
.postCleanStat{flex:1;text-align:center;background:#f5f8fe;border-radius:8px;padding:8px 4px}
.postCleanStat span{display:block;font-size:10px;font-weight:600;color:#5b6b7f;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.postCleanStat strong{display:block;font-size:22px;font-weight:800;color:#10223d}
.postCleanStat em{display:block;font-size:10px;color:#7a8a9f;font-style:normal}
.postCleanStat.after strong{color:#1a6b36}
.postCleanArrow{font-size:18px;color:#aac0dc;flex-shrink:0}
.reductionBar{width:100%;height:8px;background:#e0eaf8;border-radius:4px;overflow:hidden;margin:4px 0}
.reductionFill{height:100%;background:linear-gradient(90deg,#1a6b36,#34c464);border-radius:4px;width:0;transition:width .6s ease}
.reductionText{font-size:11.5px;color:#2d3e55;margin:6px 0 0;line-height:1.4}

/* Restoration preview */
.restoreUploadArea{margin-top:14px;padding-top:14px;border-top:1px solid #d0e4f8}
.restoreBtn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:#0057d8;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s}
.restoreBtn:hover{background:#0041a8}
.restoreBtn:disabled{background:#7aa8e0;cursor:not-allowed}
.restoreDisclaimer{margin:10px 0 0;font-size:11.5px;color:#666;line-height:1.5}
.restoreCompare{margin-top:14px;padding:14px 18px;border:1px solid #c9d9ef;border-radius:12px;background:#fff}
.restoreLabels{display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:#5b6b7f;margin-bottom:6px;padding:0 4px;text-transform:uppercase;letter-spacing:.04em}
.restoreWrap{position:relative;width:100%;height:300px;overflow:hidden;border-radius:10px;border:1px solid #d0e4f8;background:#eef5ff}
.restoreImg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.restoreAfterWrap{position:absolute;inset:0;width:50%;overflow:hidden;border-right:3px solid #0057d8}
#restoreSlider{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:70%;z-index:5;accent-color:#0057d8;opacity:.85}
.restoreNote{margin:8px 0 0;font-size:11px;color:#5b6b7f;text-align:center}

/* Clone promo box */
.clonePromoBox{display:flex;gap:14px;align-items:flex-start;margin-top:16px;padding:16px 20px;background:linear-gradient(135deg,#f0f6ff 0%,#e8f0fd 100%);border:1px solid #b8d0f0;border-radius:12px}
.clonePromoIcon{font-size:28px;line-height:1;flex-shrink:0;margin-top:2px}
.clonePromoContent h4{margin:0 0 8px;font-size:14px;color:#0057d8;font-weight:700}
.clonePromoContent p{margin:0 0 8px;font-size:13px;color:#2d3e55;line-height:1.55}
.clonePromoContent p:last-child{margin-bottom:0}
.clonePromoCta a{display:inline-block;font-size:13px;font-weight:600;color:#0057d8;text-decoration:none;border-bottom:1px solid #b8d0f0;padding-bottom:1px;transition:color .15s,border-color .15s}
.clonePromoCta a:hover{color:#003f9e;border-color:#003f9e}

/* Very small phones: ≤ 400px */
@media(max-width:400px){
  .brandLogo{width:140px !important;}
  .titleBlock h1{font-size:16px !important;}
}