/* 鈹€鈹€ Enhancer 椤甸潰鏍峰紡 鈹€鈹€ */

/* === 瀹瑰櫒 === */
#enhancer-content {
  display: none;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* === 鐢诲竷鍖?=== */
.ec-canvas-area { pointer-events: auto; }
.ec-canvas-wrap {
  position: relative;
  transform-origin: 0 0;
  backface-visibility: hidden;
  flex-shrink: 0;
  will-change: transform, clip-path;
  transform: translateZ(0);
}

/* 提升大图为 GPU 独立图层，确保尽早完成纹理上传并缓存 */
#ecOriginalCanvas,
#ecEnhancedImg {
  will-change: transform, clip-path;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.ec-canvas-wrap--hidden { display: none; }
.ec-canvas-invisible { visibility: hidden; }

/* === 瀵规瘮婊戝潡 === */
.ec-split-line { background-color: #fff; }
.ec-split-line-shadow { background-color: rgba(0,0,0,0.2); }

/* === 鍙充笅瑙掓寜閽儗鏅?=== */
.ec-overlay-btn {
  background: rgba(38,38,38,0.75);
}
.ec-zoom-btn-bg { backdrop-filter: blur(40px); }
.ec-view-toggle-bg { backdrop-filter: blur(24px); }
.ec-thumb-bar-bg { backdrop-filter: blur(64px); }

/* === 棰勮瑙嗗彛鎸囩ず鍣?=== */
.ec-preview-mask--hidden { display: none; }
.ec-preview-vp { width: 100%; height: 100%; left: 0; top: 0; }

/* === zoom fit 鏂囧瓧 === */
.ec-zoom-fit--hidden { display: none; }

/* === 瑕嗙洊 CSS 鍙橀噺涓?Krea 鍙傝€冪簿纭€?=== */
#enhancer-content {
  --primary-0: #fff;
  --primary-50: #fafafa;
  --primary-100: #f5f5f5;
  --primary-150: #f1f1f1;
  --primary-200: #e5e5e5;
  --primary-300: #d4d4d5;
  --primary-400: #a3a3a3;
  --primary-500: #737373;
  --primary-600: #525252;
  --primary-700: #404040;
  --primary-800: #262626;
  --primary-850: #202020;
  --primary-900: #171717;
  --primary-950: #101010;
  --primary-1000: #000;
  --sidebar: oklch(0% 0 0);
  --sidebar-foreground: oklch(98.5% 0 0);
  --border: oklch(100% 0 0 / 0.1);
}

/* === 鍙傝€冧唬鐮佷腑鐨勮嚜瀹氫箟宸ュ叿绫?=== */
#enhancer-content .scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#enhancer-content .scrollbar-hide::-webkit-scrollbar { display: none; }

#enhancer-content .active-scale-99:active { transform: scale(0.99); }

#enhancer-content .touch-none { touch-action: none; }

/* === 鍒濆鍗＄墖 === */
.ec-init-card {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 384px;
  max-width: 80svw;
  border-radius: 32px;
  overflow: hidden;
  font-weight: 500;
  color: #fff;
  background: var(--color-primary-850, #202020);
  box-shadow: 0 0 0 1px var(--color-primary-850, #202020);
  cursor: pointer;
  transition: background-color .15s ease-out, box-shadow .15s ease-out, transform .15s ease-out;
}
.ec-init-card:hover {
  background: var(--color-primary-900, #171717);
  box-shadow: 0 0 0 5px var(--color-primary-850, #202020);
}
.ec-init-card:active {
  transform: translate(-50%, -50%) scale(0.99);
}
.ec-init-video {
  width: 100%;
  display: block;
}
.ec-init-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
}
@media (min-width: 640px) {
  .ec-init-body { padding: 48px 40px; }
}
.ec-init-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.025em;
}
@media (min-width: 480px) {
  .ec-init-title { font-size: 48px; }
}
.ec-init-icon {
  width: 32px; height: 32px;
}
@media (min-width: 480px) {
  .ec-init-icon { width: 40px; height: 40px; }
}
.ec-init-desc {
  margin: 12px 0;
  max-width: 340px;
  text-align: center;
  text-wrap: pretty;
  font-weight: 450;
  color: var(--color-primary-300, #d4d4d5);
}
.ec-init-actions {
  margin: 16px 0;
  display: flex;
  height: 56px;
  width: 100%;
  justify-content: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
}
.ec-init-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
}
.ec-init-btn--upload {
  width: 50%;
  color: #fff;
  background: oklch(57.9% .2497 257.07);
  transition: background-color .15s ease-out;
}
.ec-init-btn--upload:hover {
  background: oklch(55.15% .2497 257.07);
}
.ec-init-btn--upload.ec-init-btn--uploading {
  width: 100%;
  background: oklch(50% .2497 257.07);
  pointer-events: none;
}
.ec-init-btn--select {
  width: 50%;
  width: 50%;
  color: oklch(57.9% .2497 257.07);
  background: color-mix(in srgb, oklch(57.9% .2497 257.07) 15%, transparent);
}
.ec-init-btn--select:hover {
  background: color-mix(in srgb, oklch(55.15% .2497 257.07) 15%, transparent);
}
.ec-init-limit {
  display: flex;
  height: 16px;
  width: 100%;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: rgb(255 255 255 / .2);
}

/* 拖拽上传视觉反馈 */
#enhancer-content.ec-drag-over .ec-init-card {
  box-shadow: 0 0 0 5px oklch(57.9% .2497 257.07);
  background: var(--color-primary-900, #171717);
}
#enhancer-content.ec-drag-over .ec-init-btn--upload {
  background: oklch(55.15% .2497 257.07);
}

/* === 缁撴灉鐢诲竷 === */
#ecCanvasWrap:not(.hidden) { display: block; }

/* === 瑙嗗浘鍒囨崲鎸夐挳 === */
#enhancer-content .ec-view-btn {
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: color 0.15s;
  background: none;
  border: none;
  padding: 0;
}
#enhancer-content .ec-view-btn:hover { color: #fff; }
#enhancer-content .ec-view-btn--active { color: #fff; }

/* === 瀵规瘮婊戝潡 === */
#ecSliderWrap:not(.hidden) { display: block; }

/* === 搴曢儴缂╃暐鍥炬潯 === */
#ecThumbBar:not(.hidden) { display: flex; z-index: 40; }

/* === 鑴夊啿鍔ㄧ敾 === */
#enhancer-content .animate-pulse {
  animation: ecPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes ecPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* === overflow-clip === */
#enhancer-content .overflow-clip { overflow: clip; }

/* === backdrop-blur === */
#enhancer-content .backdrop-blur-xs { backdrop-filter: blur(4px); }
#enhancer-content .backdrop-blur-3xl { backdrop-filter: blur(64px); }

/* === minimap viewport indicator === */
#enhancer-content .backdrop-brightness-200 {
  backdrop-filter: brightness(2);
  -webkit-backdrop-filter: brightness(2);
}
#enhancer-content .backdrop-blur-\[4px\] { backdrop-filter: blur(4px); }

/* === 閿欒鎻愮ず === */
#ecErrorBanner {
  cursor: pointer;
  user-select: none;
}

.ec-empty-word { display: none; }
.ec-empty-word--desktop { display: inline; }
@media (max-width: 767px) {
  .ec-empty-word--desktop { display: none; }
  .ec-empty-word--mobile  { display: inline; }
}

/* === Tailwind /閫忔槑搴﹁娉曚笉鍏煎 CSS 鍙橀噺锛屾樉寮忎慨澶?=== */
.dark #enhancer-content .dark\:bg-primary-950\/40 {
  background-color: rgba(16, 16, 16, 0.4);
}
.dark #enhancer-content .dark\:hover\:bg-primary-950\/50:hover {
  background-color: rgba(16, 16, 16, 0.5);
}
#enhancer-content .border-foreground\/10 {
  border-color: rgba(255, 255, 255, 0.1);
}

#enhancer-content .bg-action {
  background-color: oklch(57.9% 0.2497 257.07);
}

#enhancer-content .not-disabled\:hover\:bg-action-hover:hover:not(:disabled) {
  background-color: oklch(55.15% 0.2497 257.07);
}

#enhancer-content .not-disabled\:fill-white:not(:disabled) {
  fill: #fff;
}

/* === 缂╂斁鎸夐挳 === */
#enhancer-content .ec-zoom-btn {
  display: flex;
  min-height: 34px;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(32,32,32,0.75);
  color: rgba(255,255,255,0.4);
  backdrop-filter: blur(12px);
  cursor: pointer;
  border: none;
  transition: color 0.15s;
  position: relative;
}
#enhancer-content .ec-zoom-btn:hover { color: rgba(255,255,255,0.7); }

/* === 鍙充晶闈㈡澘 === */
#enhancer-content .ec-panel {
  width: 285px;
  flex-shrink: 0;
}

/* === 鏀惧ぇ鍊嶆暟鏍囩 === */
#enhancer-content .ec-scale-label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.075s;
  position: relative;
}
#enhancer-content .ec-scale-label--active {
  color: #000;
}
#enhancer-content .ec-scale-label--active:hover {
  background: var(--primary-600);
}

/* === 鏀惧ぇ鍊嶆暟 tooltip === */
#enhancer-content .ec-tooltip {
  position: absolute;
  top: -1rem;
  left: 50%;
  z-index: 500;
  transform: translateX(-50%);
  white-space: nowrap;
  border-radius: 9999px;
  padding: 0 0.25rem;
  font-size: 0.625rem;
  background: #000;
  color: #fff;
  pointer-events: none;
  opacity: 0;
}
#enhancer-content .ec-scale-label:hover .ec-tooltip { opacity: 1; }

/* === Resolution 杈撳叆妗?=== */
#enhancer-content .ec-res-input {
  height: 2rem;
  width: 48px;
  resize: none;
  overflow: auto;
  background: transparent;
  border: none;
  padding: 0 0.25rem;
  text-align: right;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--primary-1000, #000);
  outline: none;
  -moz-appearance: textfield;
}
.dark #enhancer-content .ec-res-input { color: var(--primary-0, #fff); }
#enhancer-content .ec-res-input::-webkit-outer-spin-button,
#enhancer-content .ec-res-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#enhancer-content .ec-res-input::placeholder { color: var(--primary-500, #737373); }

/* === 婊戞潯瀹瑰櫒锛堟墿澶х偣鍑诲尯鍩燂級 === */
#enhancer-content .ec-slider-wrap {
  position: relative;
  display: flex;
  height: fit-content;
  width: 100%;
  align-items: center;
  padding: 0.75rem 0;
}

/* === Range 婊戞潯锛堢収鎼?Krea锛?=== */
#enhancer-content .ec-slider {
  -webkit-appearance: none;
  appearance: none;
  background: #0000;
  background: linear-gradient(to right, oklch(57.9% 0.2497 257.07) var(--slider-value, 50%), #333 var(--slider-value, 50%));
  cursor: pointer;
  border-radius: 16px;
  width: 100%;
  margin: 0;
  position: relative;
}
#enhancer-content .ec-slider:after {
  content: "";
  position: absolute;
  inset: -8px 0;
}
#enhancer-content .ec-slider:focus { outline: none; }
#enhancer-content .ec-slider::-webkit-slider-runnable-track {
  cursor: pointer;
  background: 0 0;
  border: 0;
  border-radius: 16px;
  width: 100%;
  height: 4px;
}
#enhancer-content .ec-slider::-moz-range-track {
  cursor: pointer;
  background: 0 0;
  border: 0;
  border-radius: 16px;
  width: 100%;
  height: 4px;
}
#enhancer-content .ec-slider::-webkit-slider-thumb {
  cursor: pointer;
  -webkit-appearance: none;
  background: #fff;
  border: 0;
  border-radius: 16px;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  box-shadow: 0 2px 4px #0003;
}
#enhancer-content .ec-slider::-moz-range-thumb {
  cursor: pointer;
  background: #fff;
  border: 0;
  border-radius: 16px;
  width: 16px;
  height: 16px;
  box-shadow: 0 2px 4px #0003;
}
#enhancer-content .ec-slider::-webkit-slider-thumb:hover { box-shadow: 0 0 0 5px #8080804d; }
#enhancer-content .ec-slider::-moz-range-thumb:hover { box-shadow: 0 0 0 5px #8080804d; }

/* === 璁剧疆闈㈡澘锛氭闈?grow 濉弧锛岀Щ鍔ㄧ闄愬埗楂樺害 === */
#ecSettingsPanel {
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
}

/* === 鍝嶅簲寮忥細绉诲姩绔竷灞€ === */
@media (max-width: 767px) {
  /* 鐢诲竷鍒楀崰涓婇儴锛屽脊鎬т几缂?*/
  #ecCanvasColumn {
    flex: 1 1 0%;
    min-height: 40svh;
  }

  /* 闈㈡澘鍏ㄥ锛岃创搴曪紝楂樺害闅忓唴瀹硅嚜閫傚簲 */
  #ecRightPanel {
    width: 100% !important;
    height: auto !important;
    flex-shrink: 0;
    border-left: none;
    border-top: 1px solid var(--border);
  }

  /* 妗岄潰绔瑙堝唴瀹归殣钘?*/
  #ecPreviewDesktop {
    display: none;
  }

  /* 棰勮妲芥敹璧?*/
  #ecPreviewSlot {
    height: auto;
    min-height: 0;
    flex-shrink: 0;
    overflow: hidden;
  }

  /* 鎶樺彔鎸夐挳绉诲姩绔殣钘忥紝鍏抽棴鎸夐挳淇濈暀 */
  #ecToggleSidebarBtn {
    display: none !important;
  }
  /* 绉诲姩绔棤缂╂斁锛岄殣钘忕櫨鍒嗘瘮 */
  #ecZoomBtn2 {
    display: none !important;
  }

  /* 璁剧疆+鎸夐挳瀹瑰櫒锛氳嚜韬粴鍔紝鐣欏嚭鎸夐挳鏍忛珮搴?*/
  #ecSettingsPanel {
    flex: 0 0 auto;
    max-height: 55svh;
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding-bottom: 80px;
  }
  /* 绉诲姩绔叧闂?flex-1锛屽唴瀹硅嚜鐒舵拺寮€ */
  #ecSettingsPanel > .scrollbar-hide {
    flex: 0 0 auto;
    overflow-y: visible;
  }

  /* 鎸夐挳鏍?fixed 閽夎鍙ｅ簳閮紝闈㈡澘鍐呭楂樺害鍙樺寲涓嶅奖鍝嶆寜閽綅缃?*/
  #ecActionBar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--sidebar);
  }
  #ecEnhanceSubmitBtn { height: 48px !important; }
  #ecDownloadBtn { height: 48px !important; }

  /* 缂╃暐鍥炬潯锛氶伩寮€鍙充笅瑙掍俊鎭爮锛屽鍣ㄥ涓嶆墸闈㈡澘 */
  #ecThumbBar {
    bottom: 3rem;
  }
  #ecThumbBar > div {
    max-width: calc(100vw - 2rem) !important;
  }
}

/* === 妗岄潰绔細閬胯宸︿晶鍥哄畾渚ц竟鏍?(260px) === */
@media (min-width: 769px) {
  #enhancer-content {
    margin-left: 260px;
  }
  .sidebar[data-collapsible="icon"] ~ #enhancer-content {
    margin-left: 52px;
  }
}

/* === 缂╃暐鍥惧姞杞芥棆杞?=== */
@keyframes ecSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* === 绛夊緟鍔ㄧ敾锛氭尝娴鐩栫壒鏁?=== */
/* 上传按钮 spinner */
.ec-upload-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ecSpin 0.8s linear infinite;
  margin-right: 4px;
  vertical-align: middle;
}
.ec-init-btn--uploading + .ec-init-btn--select {
  display: none;
}

.ec-wave-overlay {
  position: absolute;
  inset: 0;
  z-index: 35;
  overflow: hidden;
  pointer-events: none;
}

/* === 顶部模型选择器稳定对齐 === */
#ecModelBtn {
  display: inline-grid !important;
  grid-template-columns: 1fr auto;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

#ecModelContent {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  gap: 0.25rem;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

#ecModelContent.hidden {
  display: flex !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

#ecModelHint {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--foreground);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

#ecModelHint.visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

#ecModelBtn svg {
  grid-column: 2;
  grid-row: 1;
}