.public-image-search {
  scroll-margin-top: 92px;
  overflow: hidden;
  border: 1px solid #cfe1df;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(9, 32, 58, .08);
}
.front-image-search-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 26px;
  color: #fff;
  background: linear-gradient(125deg, #0a213d, #0d4d58 62%, #128676);
}
.front-image-search-head span { color: #77e0d1; font-size: 11px; font-weight: 800; letter-spacing: .7px; }
.front-image-search-head h3 { margin: 7px 0 6px; font-size: 23px; line-height: 1.25; }
.front-image-search-head p { max-width: 680px; margin: 0; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.7; }
.front-image-feature { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; min-width: 190px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.2); border-radius: 13px; background: rgba(255,255,255,.09); backdrop-filter: blur(8px); }
.front-image-feature > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #0b4854; background: #8ce6d8; font-size: 20px; }
.front-image-feature strong, .front-image-feature small { display: block; }
.front-image-feature strong { color: #fff; font-size: 13px; }
.front-image-feature small { margin-top: 3px; color: rgba(255,255,255,.7); font-size: 10px; }
.front-image-search-body { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.45fr); gap: 0; }
.front-image-search-form { padding: 22px; border-right: 1px solid #e1eaea; background: #fbfdfd; }
.front-image-step { display: block; margin-bottom: 10px; color: #126b62; font-size: 10px; font-weight: 800; }
.front-image-drop {
  display: grid;
  place-items: center;
  min-height: 210px;
  padding: 18px;
  overflow: hidden;
  border: 2px dashed #b9d8d4;
  border-radius: 15px;
  color: #17314b;
  background: #f4fbf9;
  cursor: pointer;
  text-align: center;
  transition: border-color .2s, background .2s, transform .2s;
}
.front-image-drop:hover, .front-image-drop:focus-within, .front-image-drop.dragging { border-color: #148477; background: #ecf8f5; transform: translateY(-1px); }
.front-image-drop.has-image { align-content: start; }
.front-image-drop input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.front-image-crop-stage {
  position: relative;
  display: block;
  max-width: 100%;
  margin: 0 auto 12px;
  overflow: hidden;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(13,77,88,.08);
  touch-action: none;
  user-select: none;
}
.front-image-crop-stage[hidden] { display: none; }
.front-image-crop-stage img { display: block; width: 100%; height: 100%; margin: 0; border-radius: 11px; object-fit: fill; background: #fff; pointer-events: none; }
.front-image-crop-stage img[hidden] { display: none; }
.front-image-crop-box {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 4px;
  background: rgba(18,132,119,.08);
  box-shadow: 0 0 0 1px #0f7d72, 0 0 0 9999px rgba(8,28,46,.36);
  cursor: move;
}
.front-image-crop-box[hidden] { display: none; }
.front-image-crop-box i { position: absolute; width: 15px; height: 15px; border: 2px solid #fff; border-radius: 50%; background: #128477; box-shadow: 0 1px 4px rgba(8,28,46,.25); }
.front-image-crop-box i[data-handle="nw"] { top: -8px; left: -8px; cursor: nwse-resize; }
.front-image-crop-box i[data-handle="ne"] { top: -8px; right: -8px; cursor: nesw-resize; }
.front-image-crop-box i[data-handle="sw"] { bottom: -8px; left: -8px; cursor: nesw-resize; }
.front-image-crop-box i[data-handle="se"] { right: -8px; bottom: -8px; cursor: nwse-resize; }
.front-image-crop-tools { margin-top: 10px; }
.front-image-crop-tools[hidden] { display: none; }
.front-image-crop-tools > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.front-image-crop-tools button { min-height: 36px; padding: 0 10px; border: 1px solid #d3e2e1; border-radius: 9px; color: #536b78; background: #fff; cursor: pointer; font-size: 11px; font-weight: 750; }
.front-image-crop-tools button.is-active { border-color: #128477; color: #fff; background: #128477; }
.front-image-crop-tools small { display: block; margin-top: 7px; color: #73858f; font-size: 9px; line-height: 1.55; }
.front-image-upload-icon { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%; color: #126b62; background: #dff3ef; font-size: 25px; }
.front-image-drop.has-image .front-image-upload-icon { display: none; }
.front-image-preview-copy strong, .front-image-preview-copy span { display: block; }
.front-image-preview-copy strong { font-size: 13px; }
.front-image-preview-copy span { margin-top: 6px; color: #7e8d99; font-size: 10px; }
.front-image-paste-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.front-image-paste-button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 13px; border: 1px solid #9bcfc8; border-radius: 9px; color: #0f6f66; background: #edf9f6; cursor: pointer; font-size: 11px; font-weight: 800; }
.front-image-paste-button:hover, .front-image-paste-button:focus-visible { border-color: #128477; color: #fff; background: #128477; outline: 0; }
.front-image-paste-button span { font-size: 15px; line-height: 1; }
.front-image-paste-hint { color: #71838e; font-size: 10px; line-height: 1.55; }
.front-image-sku-field { display: block; margin-top: 15px; }
.front-image-sku-field span { display: block; margin-bottom: 7px; color: #30485c; font-size: 11px; font-weight: 700; }
.front-image-sku-field input { box-sizing: border-box; width: 100%; height: 44px; padding: 0 12px; border: 1px solid #d9e4e5; border-radius: 10px; outline: none; }
.front-image-sku-field input:focus { border-color: #128477; box-shadow: 0 0 0 3px rgba(18,132,119,.1); }
.front-image-actions { display: grid; grid-template-columns: auto 1fr; gap: 9px; margin-top: 14px; }
.front-image-clear, .front-image-submit { min-height: 44px; border-radius: 10px; cursor: pointer; font-weight: 750; }
.front-image-clear { padding: 0 17px; border: 1px solid #d8e3e4; color: #40576a; background: #fff; }
.front-image-submit { border: 0; color: #fff; background: #126b62; }
.front-image-submit:hover, .front-image-submit:focus-visible { background: #159082; }
.front-image-submit:disabled { cursor: wait; opacity: .7; }
.front-image-privacy { margin: 14px 0 0; padding: 11px 12px; border-radius: 10px; color: #657985; background: #f0f5f5; font-size: 10px; line-height: 1.6; }
.front-image-results { min-width: 0; padding: 22px; }
.front-image-empty, .front-image-unconfirmed { display: grid; place-items: center; min-height: 355px; padding: 28px; color: #687b88; text-align: center; }
.front-image-empty > span { color: #b3c2c8; font-size: 42px; }
.front-image-empty h3, .front-image-unconfirmed h3 { margin: 9px 0 6px; color: #17314b; font-size: 18px; }
.front-image-empty p, .front-image-unconfirmed p { max-width: 470px; margin: 0; font-size: 11px; line-height: 1.7; }
.front-image-empty.loading > span { animation: front-image-pulse 1.1s ease-in-out infinite; }
@keyframes front-image-pulse { 50% { opacity: .3; transform: scale(.92); } }
.front-image-unconfirmed > span { padding: 5px 9px; border-radius: 999px; color: #a86916; background: #fff0d6; font-size: 10px; font-weight: 800; }
.front-image-unconfirmed.error > span { color: #a33b31; background: #fde8e5; }
.front-image-candidates { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 15px; }
.front-image-candidates span { padding: 6px 9px; border-radius: 999px; color: #536b78; background: #eef4f4; font-size: 10px; }
.front-image-identification { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 17px; padding-bottom: 16px; border-bottom: 1px solid #e4ecec; }
.front-image-identification > div { min-width: 0; padding: 12px 14px; border: 1px solid #cfe8e3; border-radius: 11px; background: #eef9f6; }
.front-image-identification span, .front-image-identification small { display: block; color: #5e777f; font-size: 9px; }
.front-image-identification strong { display: block; margin-top: 5px; color: #126b62; font-size: 23px; }
.front-image-identification b { display: block; margin: 5px 0 2px; color: #17314b; font-size: 13px; }
.front-image-result-group + .front-image-result-group { margin-top: 22px; padding-top: 19px; border-top: 1px solid #e5eded; }
.front-image-result-group header { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-bottom: 11px; }
.front-image-result-group header span { color: #128477; font-size: 9px; font-weight: 800; }
.front-image-result-group header h3 { margin: 4px 0 0; color: #17314b; font-size: 16px; }
.front-image-result-group header small { color: #8a6a37; font-size: 9px; }
.front-image-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.front-image-result-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 11px; min-width: 0; padding: 9px; border: 1px solid #dfe9ea; border-radius: 12px; background: #fff; }
.front-image-result-media { width: 92px; height: 92px; padding: 0; overflow: hidden; border: 0; border-radius: 9px; background: #eff4f4; cursor: pointer; }
.front-image-result-media img { width: 100%; height: 100%; object-fit: contain; }
.front-image-result-card > div { min-width: 0; }
.front-image-result-badge { display: inline-flex; padding: 4px 7px; border-radius: 999px; color: #14786e; background: #e5f5f1; font-size: 8px; font-weight: 800; }
.front-image-result-badge.review { color: #9a6118; background: #fff0d5; }
.front-image-result-card h4 { display: -webkit-box; margin: 6px 0; overflow: hidden; color: #17314b; font-size: 11px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.front-image-result-card p { margin: 0 0 6px; color: #758793; font-size: 9px; }
.front-image-detail-button { padding: 0; border: 0; color: #128477; background: transparent; cursor: pointer; font-size: 9px; font-weight: 750; }
.front-image-none { grid-column: 1 / -1; margin: 0; padding: 18px; border-radius: 10px; color: #72838d; background: #f5f8f8; font-size: 11px; text-align: center; }
.front-image-coverage { margin: 17px 0 0; color: #8a98a2; font-size: 9px; text-align: right; }
@media (max-width: 920px) {
  .front-image-search-body { grid-template-columns: 1fr; }
  .front-image-search-form { border-right: 0; border-bottom: 1px solid #e1eaea; }
  .front-image-empty, .front-image-unconfirmed { min-height: 250px; }
}
@media (max-width: 620px) {
  .front-image-search-head { flex-direction: column; padding: 20px; }
  .front-image-search-head h3 { font-size: 20px; }
  .front-image-feature { width: 100%; box-sizing: border-box; }
  .front-image-search-form, .front-image-results { padding: 16px; }
  .front-image-drop { min-height: 185px; }
  .front-image-paste-row { align-items: stretch; flex-direction: column; gap: 6px; }
  .front-image-paste-button { width: 100%; }
  .front-image-paste-hint { text-align: center; }
  .front-image-identification, .front-image-result-grid { grid-template-columns: 1fr; }
  .front-image-result-group header { align-items: flex-start; flex-direction: column; gap: 5px; }
  .front-image-result-card { grid-template-columns: 82px minmax(0, 1fr); }
  .front-image-result-media { width: 82px; height: 82px; }
}