.business-scene-preview {
  --business-scene-desktop-height: 242px;
  --business-scene-desktop-x: 47%;
  --business-scene-desktop-y: 55%;
  --business-scene-desktop-overlay: .3;
  --business-scene-desktop-gradient: 62%;
  --business-scene-mobile-height: 160px;
  --business-scene-mobile-x: 50%;
  --business-scene-mobile-y: 85%;
  --business-scene-mobile-overlay: .34;
  --business-scene-mobile-gradient: 58%;
  --business-scene-height: var(--business-scene-desktop-height);
  --business-scene-x: var(--business-scene-desktop-x);
  --business-scene-y: var(--business-scene-desktop-y);
  --business-scene-overlay: var(--business-scene-desktop-overlay);
  --business-scene-gradient-start: var(--business-scene-desktop-gradient);
  position: relative;
  display: block;
  width: 100%;
  height: var(--business-scene-height);
  overflow: hidden;
  background: var(--business-cream);
}

@media (max-width: 850px) {
  .business-scene-preview {
    --business-scene-height: var(--business-scene-mobile-height);
    --business-scene-x: var(--business-scene-mobile-x);
    --business-scene-y: var(--business-scene-mobile-y);
    --business-scene-overlay: var(--business-scene-mobile-overlay);
    --business-scene-gradient-start: var(--business-scene-mobile-gradient);
  }
}

.business-scene-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--business-scene-x) var(--business-scene-y);
}

.business-scene-preview::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      rgba(255, 242, 224, var(--business-scene-overlay)),
      rgba(255, 242, 224, var(--business-scene-overlay))
    ),
    linear-gradient(
      to bottom,
      rgba(255, 242, 224, 0) 0%,
      rgba(255, 242, 224, 0) var(--business-scene-gradient-start),
      var(--business-cream) 100%
    );
}

.business-scene-calibration {
  position: fixed;
  z-index: 10000;
  right: 20px;
  bottom: 20px;
  width: min(320px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 10px;
  background: rgba(24, 31, 43, .96);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
  color: #fffdfa;
  font: 12px/1.45 "DM Mono", monospace;
}

.business-scene-calibration h2 {
  margin: 0 0 14px;
  color: #ffc31f;
  font: 600 14px/1.4 "Noto Sans TC", sans-serif;
}

.business-scene-control {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 12px;
  margin-top: 12px;
}

.business-scene-control output { color: #f2d4ba; }
.business-scene-control input { grid-column: 1 / -1; width: 100%; }

.business-scene-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.business-scene-actions button {
  flex: 1;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: #a44b2f;
  color: #fffdfa;
  font: 600 12px "Noto Sans TC", sans-serif;
  cursor: pointer;
}

.business-scene-actions button:last-child { background: transparent; }