.scanner-page .optimizer-shell {
  overflow: hidden;
}

.scan-progress {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid #e3e8ee;
}

.scan-progress[hidden],
.scanner-workspace[hidden],
.error-message[hidden] {
  display: none !important;
}

.scan-progress .progress-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6ebf0;
  margin-bottom: 8px;
}

.scan-progress .progress-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #232f3e;
  transition: width .2s ease;
}

.scan-progress small {
  color: #66717d;
}

.scanner-workspace {
  margin-top: 22px;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.preview-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dfe5eb;
  border-radius: 20px;
  background: rgba(255,255,255,.74);
}

.preview-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid #e4e9ee;
}

.preview-title strong {
  color: #232f3e;
}

.preview-title span {
  color: #76818b;
  font-size: .8rem;
}

.preview-stage {
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  overflow: auto;
  background: #eef1f4;
}

.preview-stage.checkerboard {
  background-color: #eef1f4;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.55) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.55) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.55) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.55) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}

.preview-stage img,
.preview-stage canvas {
  display: block;
  max-width: 100%;
  max-height: 68vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 5px 22px rgba(25,37,49,.13);
}

.scan-settings {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #dfe5eb;
  border-radius: 20px;
  background: rgba(255,255,255,.74);
}

.setting-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.setting-title-row > strong {
  color: #232f3e;
  font-size: 1.03rem;
}

.detection-badge {
  padding: 6px 10px;
  border-radius: 999px;
  background: #edf3f7;
  color: #566573;
  font-size: .75rem;
  font-weight: 700;
}

.mode-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.mode-button {
  min-height: 44px;
  border: 1px solid #ccd5dd;
  border-radius: 13px;
  background: #fff;
  color: #34404c;
  font-weight: 700;
  cursor: pointer;
}

.mode-button:hover {
  border-color: #9faebb;
}

.mode-button.active {
  border-color: #232f3e;
  background: #232f3e;
  color: #fff;
}

.setting-help {
  margin: 12px 0 0;
  color: #697581;
  font-size: .86rem;
}

.download-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.error-message {
  margin: 16px 0 0;
  padding: 13px 15px;
  border: 1px solid #efc7c7;
  border-radius: 14px;
  background: #fff4f4;
  color: #a33131;
}

@media (max-width: 800px) {
  .preview-grid {
    grid-template-columns: 1fr;
  }

  .preview-stage {
    min-height: 260px;
  }

  .mode-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .preview-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .scan-settings {
    padding: 14px;
  }

  .download-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .download-row button {
    width: 100%;
  }
}


.zoom-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #e4e9ee;
  background: rgba(255,255,255,.8);
}

.zoom-toolbar button {
  min-width: 40px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #ccd5dd;
  border-radius: 10px;
  background: #fff;
  color: #34404c;
  font-weight: 700;
  cursor: pointer;
}

.zoom-toolbar button:disabled {
  opacity: .45;
  cursor: default;
}

.zoom-toolbar strong {
  min-width: 64px;
  text-align: center;
  color: #232f3e;
  font-size: .9rem;
}

.zoom-stage {
  display: block;
  overflow: auto;
  text-align: center;
  touch-action: none;
  overscroll-behavior: contain;
  cursor: default;
}

.zoom-stage.can-pan {
  cursor: grab;
}

.zoom-stage.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.zoom-stage canvas {
  margin: 0 auto;
  flex: none;
}

.zoom-help {
  display: block;
  padding: 9px 12px 11px;
  text-align: center;
  color: #77838e;
  font-size: .76rem;
  background: rgba(255,255,255,.72);
  border-top: 1px solid #e4e9ee;
}

@media (max-width: 520px) {
  .zoom-help {
    font-size: .72rem;
  }
}


.edge-clean-option {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 16px;
  padding: 13px 14px;
  border: 1px solid #dfe5eb;
  border-radius: 14px;
  background: rgba(255,255,255,.7);
  cursor: pointer;
}

.edge-clean-option input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: #232f3e;
}

.edge-clean-option span {
  display: block;
  min-width: 0;
}

.edge-clean-option strong {
  display: block;
  color: #232f3e;
  font-size: .9rem;
}

.edge-clean-option small {
  display: block;
  margin-top: 3px;
  color: #74808b;
  font-size: .78rem;
  line-height: 1.4;
}

.edge-clean-info {
  margin: 7px 2px 0;
  color: #7a8690;
  font-size: .76rem;
}


.mode-buttons.two-modes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}