@import url("./sizes.css");
@font-face {
  font-family: 'SourceHanSansCN-Medium';
  src: url('../font/SourceHanSansCN-Medium.otf') format('opentype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
/* 全局字体设置（默认字体族） */
body {
    font-family: 'SourceHanSansCN-Medium', sans-serif;
    background-color: var(--page-bg) !important;
}
/* 自定义滚动条美化 */
/* WebKit 浏览器（Chrome/Safari/Edge） */
::-webkit-scrollbar {
    width: var(--scrollbar-width);
}
/* Webkit 滚动条：轨道与滑块 */
::-webkit-scrollbar-track { background: var(--scrollbar-track-bg); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover-bg); }

/* Firefox 滚动条：颜色与粗细 */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--firefox-scrollbar-thumb-color) var(--firefox-scrollbar-track-color);
}
/* 占位背景色（深灰 800） */
.placeholder-bg {
    background-color: var(--placeholder-bg-color);
}

/* 统一隐藏类优先级：避免在页面初始化时被其他样式覆盖导致闪现 */
.hidden { display: none !important; }

/* 浏览器兼容性优化 */
.transition-all {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.transform {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

/* Safari 兼容修复 */
/* Flex 布局容器（兼容 Safari/旧版前缀） */
.flex {
    display: -webkit-box; /* 旧 WebKit 弹性盒模型 */
    display: -webkit-flex; /* WebKit 弹性布局 */
    display: -ms-flexbox; /* IE/旧版 Edge 弹性布局 */
    display: flex; /* 标准弹性布局 */
}

/* Flex 纵向排列（列方向） */
.flex-col {
    -webkit-box-orient: vertical; /* 旧 WebKit 纵向方向 */
    -webkit-box-direction: normal; /* 旧 WebKit 正常方向 */
    -webkit-flex-direction: column; /* WebKit 列方向 */
    -ms-flex-direction: column; /* IE/旧版 Edge 列方向 */
    flex-direction: column; /* 标准列方向 */
}

/* Flex 垂直居中（交叉轴） */
.items-center {
    -webkit-box-align: center; /* 旧 WebKit 交叉轴居中 */
    -webkit-align-items: center; /* WebKit 交叉轴居中 */
    -ms-flex-align: center; /* IE/旧版 Edge 交叉轴居中 */
    align-items: center; /* 标准交叉轴居中 */
}

/* Flex 水平居中（主轴） */
.justify-center {
    -webkit-box-pack: center; /* 旧 WebKit 主轴居中 */
    -webkit-justify-content: center; /* WebKit 主轴居中 */
    -ms-flex-pack: center; /* IE/旧版 Edge 主轴居中 */
    justify-content: center; /* 标准主轴居中 */
}

/* Safari 输入文件样式修复 */
input[type="file"] {
    -webkit-appearance: none; /* 移除 WebKit 默认外观 */
    appearance: none; /* 统一控件外观 */
}

/* Safari 按钮样式修复 */
button {
    -webkit-appearance: none; /* 移除 WebKit 默认外观 */
    appearance: none; /* 统一控件外观 */
    border: none; /* 去除默认边框 */
    outline: none; /* 去除默认轮廓 */
}

/* Safari 专项优化 */
.safari-browser .backdrop-blur-sm {
    background-color: var(--safari-backdrop-overlay-strong) !important; /* Safari 叠加强度 */
}

.safari-browser img {
    image-rendering: -webkit-optimize-contrast; /* 优化对比度（WebKit） */
    image-rendering: crisp-edges; /* 清晰边缘（标准） */
}

.safari-browser canvas {
    image-rendering: -webkit-optimize-contrast; /* 优化对比度（WebKit） */
}

/* Safari 触控交互优化 */
.safari-browser * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.safari-browser input, .safari-browser textarea {
    -webkit-user-select: text;
    user-select: text;
}

/* 背景模糊（含 Safari 支持） */
.backdrop-blur-sm {
    -webkit-backdrop-filter: blur(4px); /* Safari 背景模糊 */
    backdrop-filter: blur(4px); /* 标准背景模糊 */
}

/* 不支持 backdrop-filter 的浏览器备用样式 */

/* Safari：规范化下拉箭头与间距 */
.safari-browser select#model-select,
.safari-browser select#size-preset,
.safari-browser select#ratio-select,
.safari-browser select#generate-qty {
  -webkit-appearance: none; /* 移除 Safari 默认下拉样式 */
  appearance: none; /* 统一外观基线 */
  /* 背景层 + 箭头与分隔线（首层为整体渐变背景） */
  background-image:
    linear-gradient(to bottom, var(--select-bg-top), var(--select-bg-bottom)), /* 渐变背景 */
    linear-gradient(45deg, transparent 50%, var(--safari-select-chevron-color) 50%), /* 第一根箭头线 */
    linear-gradient(135deg, var(--safari-select-chevron-color) 50%, transparent 50%), /* 第二根箭头线 */
    linear-gradient(to right, var(--safari-select-divider-color), var(--safari-select-divider-color)); /* 竖向分隔线 */
  background-position:
    0 0, /* 背景居左上 */
    calc(100% - var(--select-chevron-offset-x-1)) calc(50% - var(--select-chevron-offset-y)), /* 箭头线1位置 */
    calc(100% - var(--select-chevron-offset-x-2)) calc(50% - var(--select-chevron-offset-y)), /* 箭头线2位置 */
    calc(100% - calc(var(--select-chevron-offset-x-1) + var(--select-chevron-offset-x-2))) 50%; /* 分隔线位置 */
  background-size:
    auto, /* 背景自动尺寸 */
    var(--select-chevron-size) var(--select-chevron-size), /* 箭头线1大小 */
    var(--select-chevron-size) var(--select-chevron-size), /* 箭头线2大小 */
    var(--select-divider-width) var(--select-divider-height); /* 分隔线大小 */
  background-repeat: no-repeat; /* 不重复绘制 */
  padding-right: var(--select-padding-right); /* 右侧为箭头预留空间 */
  cursor: pointer; /* 鼠标样式 */
  line-height: var(--leading-1_5); /* 行高 */
  border: var(--card-border) solid var(--select-border-color) !important; /* 边框颜色 */
}

/* 非 Safari：统一下拉框边框与背景渐变 */
select#model-select,
select#size-preset,
select#ratio-select,
select#generate-qty {
  background: linear-gradient(to bottom, var(--select-bg-top), var(--select-bg-bottom)) !important; /* 渐变背景 */
  border: var(--card-border) solid var(--select-border-color) !important; /* 边框颜色 */
  width: 101px !important;
  min-width: 101px !important;
  height: 28px !important;
  border-radius: 10px !important;
  color: #808080 !important;
  box-sizing: border-box !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  padding-left: 10px !important;
  padding-right: 12px !important;
  line-height: 20px !important; /* 文本垂直居中 */
  margin-top: 10px !important;  /* 与上方文字距离 */
  margin-bottom: 16px !important; /* 与下方文字距离 */
}

/* 自定义下拉组件（用于替代原生展开样式） */
.custom-select { position: relative; display: inline-block; vertical-align: top; }
.custom-select { margin-top: 10px; margin-bottom: 16px; }
.custom-select .cs-toggle {
  background: linear-gradient(to bottom, var(--select-bg-top), var(--select-bg-bottom));
  border: var(--card-border) solid var(--select-border-color);
  height: 28px; border-radius: 10px; color: #808080; box-sizing: border-box;
  padding: 4px 12px 4px 10px; line-height: 20px; cursor: pointer; user-select: none;
}

/* 汽车背景融合弹窗内下拉框修正：移除外层通用上下边距，保持垂直居中 */
#blend-modal .custom-select,
#blend-modal select {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.custom-select .cs-toggle { position: relative; padding-right: 26px; }
.custom-select .cs-toggle::after {
  content: '';
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  pointer-events: none;
}
.custom-select.open .cs-toggle::after { transform: translateY(-50%) rotate(180deg); }
.custom-select .cs-list {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 2000; width: 100%;
  background: linear-gradient(to bottom, var(--select-bg-top), var(--select-bg-bottom));
  border: var(--card-border) solid var(--select-border-color);
  border-radius: 10px; box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  max-height: 220px; overflow-y: auto; overflow-x: hidden; display: none;
  -ms-overflow-style: none; /* IE/旧 Edge 隐藏滚动条 */
  scrollbar-width: none; /* Firefox 隐藏滚动条 */
}
.custom-select .cs-list::-webkit-scrollbar { display: none; }
.custom-select.open .cs-list { display: block; }
.custom-select .cs-option { padding: 6px 10px; color: #808080; font-size: 13px; line-height: 1; cursor: pointer; }
.custom-select .cs-option:hover { background: rgba(0,0,0,0.05); }
.custom-select .cs-option.active { background: rgba(0,0,0,0.08); font-weight: 600; }

/* 打开自定义下拉时允许内容溢出显示在卡片之外 */
.function-params .params-scroll.dropdown-open { overflow: visible; }

/* 下拉框展开/聚焦状态：保持与未展开一致，不高亮、不加粗边框 */
select#model-select:focus,
select#size-preset:focus,
select#ratio-select:focus,
select#generate-qty:focus,
select#model-select:focus-visible,
select#size-preset:focus-visible,
select#ratio-select:focus-visible,
select#generate-qty:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--select-border-color) !important;
}

select#model-select option,
select#size-preset option,
select#ratio-select option,
select#generate-qty option { color: #808080; }

/* 展开时选项面板的文字与背景统一为未展开样式（尽可能覆盖主流浏览器） */
select#model-select option,
select#size-preset option,
select#ratio-select option,
select#generate-qty option {
  background: linear-gradient(to bottom, var(--select-bg-top), var(--select-bg-bottom)) !important;
  color: #808080 !important;
  font-size: 13px !important;
}
select#model-select option:hover,
select#size-preset option:hover,
select#ratio-select option:hover,
select#generate-qty option:hover,
select#model-select option:checked,
select#size-preset option:checked,
select#ratio-select option:checked,
select#generate-qty option:checked {
  background: linear-gradient(to bottom, var(--select-bg-top), var(--select-bg-bottom)) !important;
  color: #808080 !important;
}
@supports not ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
    .backdrop-blur-sm {
        background-color: var(--safari-backdrop-overlay); /* 回退背景覆盖层 */
    }
}

/* Safari 针对性修复（媒体查询） */
@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
        .backdrop-blur-sm {
            -webkit-backdrop-filter: blur(4px); /* Safari 条件下启用模糊 */
            backdrop-filter: blur(4px); /* 标准属性，确保其他现代浏览器兼容 */
            background-color: var(--safari-backdrop-overlay-light); /* 更浅覆盖层 */
        }
    }
}

/* 删除按钮：缩略图右上角圆形按钮 */
.delete-btn {
  position: absolute; /* 绝对定位在缩略图内部 */
  top: var(--delete-btn-top); /* 距顶部偏移 */
  right: var(--delete-btn-right); /* 距右侧偏移 */
  width: var(--delete-btn-size); /* 按钮宽度 */
  height: var(--delete-btn-size); /* 按钮高度 */
  background-color: transparent !important; /* 使用图标，不填充底色 */
  border: none !important; /* 移除边框 */
  border-radius: var(--radius-circle); /* 圆形外观 */
  color: transparent !important; /* 隐藏 × 文本 */
  font-size: 0 !important; /* 隐藏文本 */
  cursor: pointer; /* 鼠标可点击 */
  display: flex; /* 居中图标 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  z-index: 20; /* 浮于缩略图之上 */
  transition: all 0.2s; /* 悬停缩放过渡 */
  box-shadow: none !important;
  background-image: url('https://banana.bluefocuslibrary.com/icons/del.png');
  background-size: 140% 140%;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0 !important;
  background-origin: content-box !important;
  background-clip: content-box !important;
}

.delete-btn:hover { transform: scale(1.06); }

/* 统一上传提示文字颜色与去除重复SVG图标 */
[id^="upload-prompt-"] { color: #8ba1e8 !important; }
[id^="upload-prompt-"] svg { display: none !important; }
#image-upload-free-multi-label > div { color: #8ba1e8 !important; }
#image-upload-free-multi-label > div svg { display: none !important; }
.blend-upload-empty { color: #8ba1e8 !important; }
.blend-upload-empty svg { display: none !important; }

/* 更强选择器：隐藏所有上传框中的旧 SVG 图标，避免双图标 */
.upload-section label svg { display: none !important; }
.upload-section label [id^="upload-prompt-"] { color: #8ba1e8 !important; }

/* 高清增强倍数按钮配色：
   - 选中态：沿用功能按钮高亮（蓝紫渐变，边框 #8ba1e8，文字同边框色）
   - 未选中：沿用生成按钮置灰（灰渐变，边框 #d6d6d6，深灰文字） */
.upscale-factor-btn { 
  border: 1px solid #d6d6d6 !important;
  background: linear-gradient(to bottom, #e7e7eb, #efeff3) !important;
  color: #374151 !important;
  width: 50px !important;
  height: 28px !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: 13px !important;
}
.upscale-factor-btn.hidden { display: none !important; }
.upscale-factor-btn.factor-active {
  background: linear-gradient(to bottom, var(--function-btn-active-top), var(--function-btn-active-bottom)) !important;
  border-color: var(--function-btn-active-border) !important;
  color: var(--function-btn-active-border) !important;
}
.upscale-factor-btn.factor-inactive {
  background: linear-gradient(to bottom, #e7e7eb, #efeff3) !important;
  border-color: #d6d6d6 !important;
  color: #374151 !important;
}
/* 移除上传提示中的图片图标，仅保留背景/伪元素样式 */
.upload-section label [id^="upload-prompt-"] img { display: none !important; }
#image-upload-free-multi-label > div img { display: none !important; }

label[for="image-upload-upscale"] { height: 100px !important; }
/* car_blend 改为与 product_blend 同样的上传样式，移除旧选择器 */

/* 高清增强：倍数与结果尺寸区块的上下边距统一为 16px */
#upscale-factor-block { margin-top: 16px !important; margin-bottom: 16px !important; }
#upscale-output-size-block { margin-top: 16px !important; margin-bottom: 16px !important; }
/* 高清增强倍数区：控制间距与标签宽度以保证同一行放下 */
#upscale-factor-block { flex-wrap: nowrap !important; }
#upscale-factor-block { justify-content: flex-end !important; padding-right: 0 !important; }
#upscale-factor-block { margin-right: 0 !important; }
#upscale-factor-block { padding: 0 !important; margin-left: 0 !important; }
#upscale-factor-block .upscale-factor-btn:first-of-type { margin-left: 0 !important; }
#upscale-factor-block > span { margin-right: auto !important; }
#upscale-factor-block > span { width: 58px !important; font-size: 13px !important; line-height: 1 !important; text-align: left !important; }
#upscale-output-size-block > span { font-size: 13px !important; line-height: 1 !important; }

.delete-btn.hidden {
    display: none !important;
}

/* 比例 Chip 与图标样式 */
.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--chip-gap);
  padding: var(--chip-pad-y) var(--chip-pad-x);
  border-radius: var(--chip-radius);
  background: var(--chip-bg);
  color: var(--chip-text-color);
  font-size: var(--chip-font-size);
  font-weight: var(--font-weight-semibold);
  border: var(--chip-border) solid var(--chip-border-color);
  box-shadow: inset 0 0 0 var(--chip-border) var(--chip-inner-shadow-color);
}
.ui-chip:hover { background: var(--chip-hover-bg); }
.ui-chip .ratio-text { opacity: 0.9; }

.ratio-icon {
  width: var(--ratio-icon-width); height: var(--ratio-icon-height);
  border-radius: var(--ratio-icon-radius);
  background: var(--ratio-icon-bg);
  position: relative;
}
.ratio-icon::after {
  content: "";
  position: absolute;
  inset: var(--ratio-icon-inset);
  border: var(--ratio-icon-inner-border-width) solid var(--ratio-icon-inner-border);
  border-radius: var(--ratio-icon-inner-radius);
}

/* 宽/高输入标签 */
.size-input { padding-left: var(--size-input-pad-left); padding-right: var(--size-input-pad-right-lg); text-align: right; }
.input-tag { position: absolute; left: var(--label-left); top: 50%; transform: translateY(-50%); color: var(--size-input-tag-color); font-weight: var(--font-weight-bold); font-size: var(--label-font-size); letter-spacing: var(--label-letter-spacing); }
.unit-tag { position: absolute; right: var(--unit-right); top: 50%; transform: translateY(-50%); color: var(--size-input-unit-color); font-weight: var(--font-weight-bold); font-size: var(--label-font-size); letter-spacing: var(--label-letter-spacing); pointer-events: none; }

/* 比例按钮等宽居中 */
.ui-chip { width: 100%; justify-content: center; }
.input-tag { pointer-events: none; }
/* 快捷比例按钮：选中为紫色，未选中灰色 */
.ratio-btn.ui-chip { background: var(--ratio-btn-bg); color: var(--ratio-btn-text-color); border-color: var(--ratio-btn-border-color); }
.ratio-btn.ui-chip:hover { background: var(--ratio-btn-hover-bg); }
.ratio-btn.ui-chip.active { background: var(--ratio-btn-active-bg); }

/* 自定义尺寸时隐藏快捷比例 */
#size-block.custom-mode #ratio-group { display: none; }

/* 输入框右对齐且避免与外置px重叠 */
.size-input { padding-left: var(--size-input-pad-left); padding-right: var(--size-input-pad-right-sm); text-align: right; }

/* 图片/视频功能 Tabs 强化可视化区分 */
.function-tab {
  position: relative; /* 供伪元素或局部效果定位参考 */
  transition: all 0.18s ease; /* 切换状态时的平滑过渡 */
}
.tab-active {
  background: linear-gradient(to bottom, var(--function-btn-active-top), var(--function-btn-active-bottom)) !important;
  border: var(--card-border) solid var(--function-btn-active-border) !important;
  color: var(--tabs-text-color) !important;
}
.tab-inactive {
  opacity: 0.6;
  filter: saturate(0.9);
}

/* --- Topaz 参数 UI 增强（更大滑块、行间距、输入框） --- */

/* 隐藏原生数字输入箭头，避免遮挡文本 */
.size-input::-webkit-outer-spin-button,
.size-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"].size-input { -moz-appearance: textfield; appearance: textfield; }

/* 更大滑块（跨浏览器） */

/* 模型按钮行：在通用样式里也确保可换行与不换行文本（双保险） */
#upscale-model-block { flex-wrap: wrap; }
#upscale-model-block .topaz-model-btn { white-space: nowrap; }

/* 参数块右侧统一留白，确保与面板整体一致 */
#upscale-params-block { padding-right: var(--upscale-params-pad-right); }

/* 车融合悬浮提示溢出修复 */
/* 解决左侧参数滚动容器裁剪：在 hover 期间让其溢出可见 */
.function-params .params-scroll.car-blend-tip-open {
  overflow: visible;
}
.input-tag { position: absolute; left: var(--label-left); top: 50%; transform: translateY(-50%); color: var(--size-input-tag-color); font-weight: 700; font-size: var(--label-font-size); letter-spacing: var(--label-letter-spacing); }
.unit-tag { position: absolute; right: var(--unit-right); top: 50%; transform: translateY(-50%); color: var(--size-input-unit-color); font-weight: 700; font-size: var(--label-font-size); letter-spacing: var(--label-letter-spacing); pointer-events: none; }

/* 左侧容器：取消整体卡片外观，仅用于布局 */
#left-sidebar,
aside {
  background: transparent;
  border-radius: 0;
  padding: 0;
  overflow: visible !important; /* 允许卡片阴影在左右侧可见 */
  position: relative; /* 供左侧禁用遮罩定位 */
}

/* === 导航（Left Nav） === */
#left-nav {
  background: var(--sidebar-bg);
  height: 100%;
  min-height: 100vh;
  border-right: var(--card-border) solid var(--sidebar-border);
  padding: 0;
  width: var(--nav-width) !important;
}

/* 导航按钮风格与选中态 */
#left-nav .nav-btn {
  background: var(--function-btn-bg);
  color: var(--function-btn-text);
  border: var(--card-border) solid var(--function-btn-border);
  border-radius: 9999px;
}
#left-nav .nav-btn.active {
  background: linear-gradient(to bottom, var(--function-btn-active-top), var(--function-btn-active-bottom)) !important;
  border: var(--card-border) solid var(--function-btn-active-border) !important;
}
/* 底部用户按钮选中态：改为纯白底与白边框 */
#left-nav #bottom-user-toggle.nav-btn.active {
  background: #ffffff !important;
  border: var(--card-border) solid #ffffff !important;
}
#left-nav .nav-btn img {
  width: var(--nav-icon-size);
  height: var(--nav-icon-size);
  object-fit: contain;
}

/* 主容器强制给出高度，确保子项 h-full 生效 */
#app-main {
  height: 100%;
  align-items: stretch;
  padding: 0;
}
/* 防止比例按钮文本换行 */
/* 左侧参数滚动条（WebKit）隐藏 */
.function-params::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
/* 左侧栏容器也需撑满可用高度，确保卡片获得 100% 高度 */
#left-panel,
.sidebar,
.main-container {
  height: 100%;
}
/* “编辑背景”轻量按钮样式（小字号+不换行） */
/* === 右侧结果区域（Results） === */
/* 右侧结果主容器 */

/* 右侧缩略图样式（备用模型多结果）
   - .thumb：固定 72x72，圆角与轻边框，hover/click 交互由 JS 控制
   - .thumb img：等比裁剪填充
   - .thumb.active：选中态高亮边框与阴影
*/
#alt-results-strip .thumb {
  width: var(--alt-thumb-size); /* 缩略图宽度 */
  height: var(--alt-thumb-size); /* 缩略图高度 */
  border: var(--card-border) solid var(--left-card-border); /* 外边框 */
  border-radius: var(--thumb-radius); /* 圆角 */
  overflow: hidden; /* 裁剪内部图片 */
  background: var(--alt-thumb-bg); /* 背景色 */
  cursor: pointer; /* 鼠标可点击 */
}
#alt-results-strip .thumb img { width: 100%; height: 100%; object-fit: cover; }
#alt-results-strip .thumb.active { border-color: var(--alt-thumb-active-border); box-shadow: var(--focus-ring-dims) var(--alt-thumb-active-shadow); }

/* 右侧批量结果（与备用模型样式一致，统一尺寸与缩放） */
#logo-results-strip .thumb {
  width: 100%;
  height: 100%; /* 让缩略图填满所在网格行，随容器高度自适应 */
  border: var(--card-border) solid var(--left-card-border);
  border-radius: var(--thumb-radius);
  overflow: hidden;
  background: var(--logo-thumb-bg);
  cursor: pointer;
  position: relative;
}
#logo-results-strip .thumb img { width: 100%; height: 100%; object-fit: contain; background: var(--logo-thumb-img-bg); }

/* 缩略图右下角小下载按钮 */
#logo-results-strip .thumb .dl-btn {
  position: absolute; /* 固定在缩略图右下角 */
  right: var(--dl-btn-offset); /* 距右侧偏移 */
  bottom: var(--dl-btn-offset); /* 距底部偏移 */
  width: 116px;
  height: 54px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #ffffff;
  color: #000000;
  border: 1px solid #d6d6d6;
  opacity: 0; /* 默认隐藏 */
  visibility: hidden; /* 默认隐藏 */
  transition: opacity 0.2s ease; /* 悬停淡入 */
}
#logo-results-strip .thumb:hover .dl-btn,
#logo-results-strip .thumb:focus-within .dl-btn {
  opacity: 1;
  visibility: visible;
}
#logo-results-strip .thumb .dl-btn:hover { background: #ffffff; }

.dl-action { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 50px; height: 100%; }
.dl-action img { width: 26px !important; height: 26px !important; object-fit: contain; }
.dl-action span { font-size: 9px; line-height: 9px; color: #374151; margin-top: 4px; }
.dl-action:hover span { color: #111; }

/* 去水印批量结果：统一尺寸小框，内部按比例缩放，保证整齐 */
#remove-wm-results .thumb {
  width: var(--thumb-size);
  height: var(--thumb-size);
  border: var(--card-border) solid var(--left-card-border);
  border-radius: var(--thumb-radius);
  overflow: hidden;
  background: var(--remove-wm-thumb-bg);
  cursor: pointer;
}
#remove-wm-results .thumb img { width: 100%; height: 100%; object-fit: contain; background: var(--remove-wm-thumb-img-bg); }

/* 滚动容器与按钮粘底（sidebar 参数过多时）
   - .has-sticky-btn：为滚动区域添加额外底部内边距，避免按钮遮挡内容
   - .sticky-btn：将“创作”按钮粘在卡片底部，宽度按父容器左右留白动态计算
*/
/* 将按钮粘在卡片底部 */
.sticky-btn { position: sticky; bottom: 0; }
/* 旧的结果条 mask-active 遮罩已废弃，改用统一的 processing-overlay */
/* 主画布容器（伪元素定位面板） */
#image-comparison-container { position: relative; }

/* 旧的 processing-mask 方案已废弃，改用 #processing-overlay；保留容器定位即可 */
#processing-overlay {
  position: absolute;
  inset: 0;
  /* 与卡片背景（bg-gray-800: #1f2937）一致的深色蒙层 */
  background: var(--processing-overlay-bg);
  border-radius: var(--processing-radius);
  z-index: 18; /* 低于 loader(z-20)，高于内容 */
}
/* 提示词清除按钮（位于文本域内） */
#prompt-container { position: relative; /* 作为清除按钮绝对定位的参照容器 */ }
.prompt-clear-btn {
  position: absolute; /* 绝对定位在文本域右下角 */
  right: var(--prompt-btn-right); /* 距右侧偏移量 */
  bottom: var(--prompt-btn-bottom); /* 距底部偏移量 */
  padding: 0; /* 无内边距，保持紧凑 */
  border-radius: 0; /* 无圆角，避免视觉干扰 */
  background: none; /* 透明背景 */
  color: var(--prompt-clear-btn-text); /* 文字颜色 */
  font-size: var(--prompt-font-size); /* 字号 */
  line-height: var(--prompt-line-height); /* 行高 */
  text-align: center; /* 居中文本 */
  cursor: pointer; /* 鼠标可点击 */
  opacity: 0.9; /* 默认轻微透明 */
  transition: opacity 0.2s ease, text-decoration 0.2s ease; /* 悬停过渡效果 */
  z-index: 1; /* 置于文本内容之上 */
}
.prompt-clear-btn:hover { opacity: 1; }

/* 隐藏提示词文本域滚动条（保留滚动功能） */
#prompt-textarea {
  -ms-overflow-style: none; /* IE/旧版 Edge */
  scrollbar-width: none;    /* Firefox */
  background: linear-gradient(to bottom, var(--select-bg-top), var(--select-bg-bottom)) !important; /* 与下拉框一致的渐变背景 */
  border: var(--card-border) solid var(--select-border-color) !important; /* 与下拉框一致的边框颜色 */
  color: #808080; /* 与下拉框文字颜色一致 */
  font-size: 9px; /* 用户要求 9px 字号 */
}
#prompt-textarea:focus,
#prompt-textarea:focus-visible {
  outline: none !important;
  box-shadow: none !important; /* 取消高亮 ring，避免左右边框被遮挡 */
  border-color: var(--select-border-color) !important; /* 保持与未聚焦一致 */
}
#prompt-textarea::-webkit-scrollbar { display: none; } /* Chrome/Safari/新 Edge */
#logo-results-strip { padding-bottom: 0 !important; }

 

/* 右侧结果主容器 */
#right-panel {
  background-color: var(--left-card-bg);
  background-image: radial-gradient(#f7f7f8 3px, transparent 3px);
  background-size: 23px 23px;
  border: var(--card-border) solid var(--left-card-border);
  border-radius: var(--card-radius);
  margin: 0;
  padding-top: 31px;
  padding-bottom: 31px;
  padding-left: 24px;
  padding-right: 24px;
}
/* 生成中禁用交互 */
.app-processing .function-params,
.app-processing #function-tabs,
.app-processing .function-btn {
  pointer-events: none !important;
  user-select: none !important;
}
.app-processing #left-nav,
.app-processing .function-selection,
.app-processing .function-params {
  opacity: 0.6;
}

/* Ensure Right Panel creates a stacking context to contain the Loader */
#right-panel {
  position: relative !important;
  z-index: 0 !important;
  isolation: isolate;
  overflow: hidden !important; /* 强制裁剪溢出 */
  transform: translateZ(0); /* 强制创建包含块 */
  clip-path: inset(0 round var(--card-radius)); /* 终极裁剪手段 */
}

/* Force Loader to stay inside Right Panel */
#loader {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  inset: 0 !important;
  z-index: 20 !important; /* Inside right-panel context */
  background-color: rgba(255, 255, 255, 0.9) !important; /* 确保遮罩背景不溢出 */
  border-radius: inherit !important;
  overflow: hidden !important; /* 确保内部大光球不溢出 */
  clip-path: inset(0 round var(--card-radius)); /* 终极裁剪手段 */
}

#processing-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  inset: 0 !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  z-index: 10 !important;
}

/* Hide the left processing blocker as requested */
#left-processing-blocker { display: none !important; }
.app-processing #left-processing-blocker { display: none !important; }
/* .app-processing aside { pointer-events: auto !important; } */
/* 生成中强制置灰生成按钮（即使未设置 disabled） */
.app-processing #create-btn {
  background: linear-gradient(to bottom, #e7e7eb, #efeff3) !important;
  border-color: #d6d6d6 !important;
  box-shadow: 0px 10px 7px 5px rgba(228, 232, 234, 0.75) !important;
  color: #374151 !important;
  cursor: not-allowed !important;
}
/* 生成中禁用缩略图操作面板并置灰 */
.app-processing #logo-results-strip .thumb .dl-btn {
  pointer-events: none !important;
  opacity: 0.5 !important;
  visibility: visible !important;
  filter: grayscale(100%);
}
/* 缩略图操作面板内图标尺寸统一为 26px */
.dl-action img { width: 26px !important; height: 26px !important; object-fit: contain; }
/* 图片上传框：统一背景与边框颜色 */
.upload-section label,
.wm-slot {
  background-color: #ebf0ff !important;
  border-color: #8ba1e8 !important;
  border-radius: 10px !important;
}
.upload-section label:hover,
.wm-slot:hover {
  border-color: #8ba1e8 !important;
}
.upload-section [id^="upload-prompt"] svg { display: none !important; }
.upload-section [id^="upload-prompt"]::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 26px;
  background-image: url('https://banana.bluefocuslibrary.com/icons/upload_blue.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 2px; /* 更紧密与文字 */
}
.upload-section [id^="upload-prompt"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px; /* 收紧间距 */
  line-height: 1; /* 紧凑行高 */
}
.upload-section [id^="upload-prompt"],
.upload-section label p,
.wm-slot .slot-empty { color: #8ba1e8 !important; }
/* 所有上传框文案统一 10px */
.upload-section label p { font-size: 10px !important; line-height: 10px !important; }
/* 批量去水印槽位：统一中心图标与下边距 */
#remove-wm-slots { margin-bottom: 16px !important; }
.wm-slot .slot-empty { font-size: 0 !important; }
.wm-slot .slot-empty::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 26px;
  background-image: url('https://banana.bluefocuslibrary.com/icons/upload_blue.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#upload-product_blend label {
  width: 226px !important;
  min-width: 226px !important;
  max-width: 226px !important;
  height: 100px !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  gap: 4px;
}
#upload-prompt-product-bg { padding-left: 0 !important; padding-right: 0 !important; }
#upload-prompt-product-bg p { font-size: 10px !important; height: 10px !important; line-height: 10px !important; margin: 0 !important; color: #8ba1e8 !important; }
#product-blend-direct-link { color: #8ba1e8 !important; font-size: 10px !important; margin-top: 10px !important; }
/* 生成按钮：尺寸/外观与半外凸定位 */
#create-btn {
  width: 128px;
  height: 50px;
  border-radius: 24px;
  font-size: 17px !important;
  font-weight: 700;
  background: linear-gradient(to bottom, #f8d8b1, #ffedd6);
  border: 1px solid #ffd9b0;
  color: #111;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -25px; /* 半个按钮高度外凸到卡片外 */
  z-index: 20;
  box-shadow: 0px 10px 7px 5px rgba(242, 235, 223, 0.8);
}
#create-btn:not(:disabled) { color: #491c03 !important; }
#create-btn:not(:disabled) .btn-text { color: #491c03 !important; }
#create-btn:hover:not(:disabled),
#create-btn:focus-visible:not(:disabled) {
  color: #491c03 !important;
}
#create-btn.generating {
  background: linear-gradient(to bottom, #e7e7eb, #efeff3) !important;
  border-color: #d6d6d6 !important;
  box-shadow: 0px 10px 7px 5px rgba(228, 232, 234, 0.75) !important;
  color: #374151 !important;
  cursor: not-allowed !important;
}
#create-btn .btn-text { font-size: 17px !important; font-weight: 700 !important; line-height: 1 !important; }
#create-btn .btn-icon {
  width: 24px;
  height: 24px;
  background-image: url('https://banana.bluefocuslibrary.com/icons/gen_brown.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#create-btn:disabled {
  opacity: 0.95;
  cursor: not-allowed;
  background: linear-gradient(to bottom, #e7e7eb, #efeff3) !important;
  border-color: #d6d6d6 !important;
  box-shadow: 0px 10px 7px 5px rgba(228, 232, 234, 0.75) !important;
  color: #374151 !important;
}
#create-btn:disabled .btn-icon {
  background-image: url('https://banana.bluefocuslibrary.com/icons/gen_gray.png');
}
#create-btn:disabled .btn-text { color: #374151 !important; }
/* 参数卡片文字统一：13px 深灰（#374151） */
.function-params,
.function-params p,
.function-params label,
.function-params h1,
.function-params h2,
.function-params h3,
.function-params span,
.function-params button,
.function-params select,
.function-params option {
  font-size: 13px !important;
  color: #374151 !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}
.function-params ::placeholder {
  color: #374151 !important;
}
#product-blend-tip { font-size: 8px !important; color: #808080 !important; margin-top: 8px !important; margin-bottom: 10px !important; line-height: 1 !important; }
#upload-product_blend > div {
  width: 226px !important;
  min-width: 226px !important;
  max-width: 226px !important;
  margin: 0 auto !important;
  box-sizing: content-box !important;
  padding: 0 !important;
}
#label-product-blend-bg {
  display: block !important;
  width: 100% !important; /* 总宽度跟随父容器 226px */
  height: 100px !important;
  box-sizing: border-box !important; /* 含边框仍为 226px */
  margin: 0 auto !important;
  padding: 0 !important;
  border-width: 2px !important;
  display: flex !important;
  align-items: center !important; /* 垂直居中上传提示 */
  justify-content: center !important; /* 水平居中上传提示 */
}
/* 一键抠图与手指修复上传框：高度 100px，下边距 16px */
label[for="image-upload-cutout"] { height: 150px !important; margin-bottom: 10px !important; }
label[for="image-upload-1"] { height: 100px !important; margin-bottom: 16px !important; }
#model-info {
  background-image: url('https://banana.bluefocuslibrary.com/icons/zhushi_black.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent !important;
  color: transparent !important;
  border: none !important;
  width: 13px !important;
  height: 13px !important;
}
#upload-product_blend {
  width: 226px !important;
  min-width: 226px !important;
  max-width: 226px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: content-box !important;
  overflow: visible !important;
}
#function-selection-body h3 { color: #374151 !important; }
.upload-section h2 { color: #374151 !important; }
.function-btn .func-text { color: #374151 !important; }
.function-btn.active .func-text { color: var(--function-btn-active-border) !important; }
.function-selection::before,
.function-selection::after { color: #374151 !important; }
#product-blend-direct-link { color: #8ba1e8 !important; font-size: 10px !important; margin-top: 10px !important; }
#product-blend-direct-link:parent, #product-blend-direct-link-wrapper { margin-top: 0 !important; }
#upload-product_blend p { margin-top: 0 !important; margin-bottom: 0 !important; }
/* 还原提示行的下边距（不受上面通用 p 规则影响） */
#upload-product_blend #product-blend-tip { margin-bottom: 10px !important; margin-top: 8px !important; }
#model-block label[for="model-select"],
#clarity-block h2,
#size-block label[for="ratio-select"],
#generate-qty-block label[for="generate-qty"] {
  margin-bottom: 0 !important;
}
#model-block .flex.items-center.gap-1.mb-2.relative { margin-bottom: 0 !important; }
#bottom-user-panel { width: 140px; height: 90px; padding: 20px; background: #ffffff !important; border: var(--card-border) solid var(--left-card-border); border-radius: var(--card-radius); box-shadow: 0px 10px 10px 5px rgba(228,232,234,0.75); color: #374151; }
#bottom-logout-btn { width: 100%; height: 28px; line-height: 28px; border-radius: 10px; background: #8ba1e8 !important; color: #ffffff !important; border: none; font-size: 13px; display: flex; align-items: center; justify-content: center; padding: 0; }
/* 悬浮窗工号居中且与“图片编辑”一致的文本颜色 */
#bottom-user-id-text { text-align: center; color: var(--tabs-text-color) !important; font-size: 13px; }
.wm-slot-del {
  background-image: url('https://banana.bluefocuslibrary.com/icons/del.png') !important;
  background-size: 140% 140% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  border: none !important;
  width: 19px !important;
  height: 19px !important;
  top: 12px !important;
  right: 12px !important;
  padding: 0 !important;
  background-origin: content-box !important;
  background-clip: content-box !important;
}

/* 自定义编辑上传槽位删除按钮（尺寸与边距专用） */
#free-edit-slots .wm-slot-del {
  width: 15px !important;
  height: 15px !important;
  top: 4px !important;
  right: 4px !important;
  background-size: 140% 140% !important;
  padding: 0 !important;
  background-origin: content-box !important;
  background-clip: content-box !important;
}

/* 批量去水印上传槽位删除按钮（与自定义编辑一致） */
#remove-wm-slots .wm-slot-del {
  width: 15px !important;
  height: 15px !important;
  top: 4px !important;
  right: 4px !important;
  background-size: 120% 120% !important;
  padding: 0 !important;
  background-origin: content-box !important;
  background-clip: content-box !important;
}

/* 独立画布文字弹窗下拉框字体大小修正 */
#text-modal .custom-select .cs-toggle,
#text-modal select {
  font-size: 13px !important;
}

/* 汽车背景融合弹窗内下拉框字体修正 */
#blend-modal select,
#blend-modal .custom-select .cs-toggle {
  font-size: 13px !important;
}


/* 人物换装上传框尺寸 */
label[for="image-upload-wardrobe-model"],
label[for="image-upload-wardrobe-cloth"] {
  width: 105px !important;
  height: 62px !important;
}
.blend-delete-btn {
  background-image: url('https://banana.bluefocuslibrary.com/icons/del.png') !important;
  background-size: 140% 140% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  border: none !important;
  background-color: transparent !important;
  width: 19px !important;
  height: 19px !important;
  top: 12px !important;
  right: 12px !important;
  padding: 0 !important;
  background-origin: content-box !important;
  background-clip: content-box !important;
}
#free-edit-slots { margin-bottom: 16px !important; }
/* #left-processing-blocker { display: none !important; } */
/* .app-processing #left-processing-blocker { display: none !important; } */
/* .app-processing aside { pointer-events: auto !important; } */
.car-card::before,
.car-card::after { content: none !important; }
.car-card .function-tab.tab-active { 
  background: linear-gradient(to bottom, var(--function-btn-active-top), var(--function-btn-active-bottom)) !important;
  border: var(--card-border) solid var(--function-btn-active-border) !important;
  color: var(--tabs-text-color) !important;
}
.car-card .function-tab.tab-inactive { 
  opacity: 0.6; filter: saturate(0.9);
}
#car-blend-tip { font-size:8px !important; color:#808080 !important; font-weight:500 !important; }
#car-blend-direct-link { font-size:10px !important; color:#8ba1e8 !important; text-decoration:underline !important; }
#footer-brand { left:50%; transform:translateX(-50%); bottom:0; display:flex; flex-direction:column; align-items:center; pointer-events:none; z-index:0; }
#footer-logo { width:auto; height:auto; object-fit:contain; margin:0; opacity:0.3; }
#footer-version { font-size:8.5px; line-height:30px; color:#808080; }
.wm-square { aspect-ratio: 1 / 1; }
.blend-upload-fixed { width:166px; height:128px; }
.btn-cutout-mini { width:42px; height:22px; border-radius:7px; bottom:5px; right:9px; line-height:22px; text-align:center; }
.blend-subject-box { display:none; }
.upload-cutout-box { height:150px; position:relative; }
.tiny-note { font-size:8.5px; color:#808080; }
.pointer-events-none { pointer-events:none; }
.flex-wrap-wrap { flex-wrap: wrap; }
#processing-overlay { border-radius: inherit; }
#cutout-range-btn { position:absolute; z-index:100; width:96px; height:32px; border-radius:12px; background:#8ba1e8; border:none; color:#ffffff; font-size:12px; bottom:8px; right:8px; line-height:32px; text-align:center; pointer-events:none; font-weight:600; opacity:0.5; }
#compare-slider { display: none; }
#compare-modal:not(.hidden) #compare-slider { display: block; }
#slider-handle { display: none; }
#slider:not(.hidden) + #slider-handle { display: flex; }
.car-bg-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:auto; z-index:20; cursor: pointer; }
.car-bg-icon-img { width:200px; height:200px; object-fit:contain; opacity:0.2; }
.car-bg-text { margin-top:12px; font-size:58px; color:#8ba1e8; font-weight:500; opacity:0.2; user-select: none; -webkit-user-select: none; }

/* 鼠标悬停交互效果 */
.car-bg-overlay:hover .car-bg-icon-img {
    opacity: 0.8;
    transform: scale(1.05);
    transition: all 0.3s ease;
}
.car-bg-overlay:hover .car-bg-text {
    opacity: 0.8;
    transition: all 0.3s ease;
}

/* 车辆融合：主舞台空态上传覆盖层 */
.car-bg-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    pointer-events: auto;
}
.car-bg-text {
    font-size: 58px;
    color: #8ba1e8;
}

/* 统一下拉框样式（基于 colors.css 变量） */
.styled-select {
    width: 100%;
    height: 38px;
    padding: 0 32px 0 12px;
    font-size: 13px;
    font-weight: 500;
    line-height: 38px;
    border-radius: 8px;
    border: 1px solid var(--select-border-color) !important;
    background: linear-gradient(to bottom, var(--select-bg-top), var(--select-bg-bottom)) !important;
    color: #808080 !important; /* 灰色文本 */
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.styled-select:focus {
    border-color: var(--select-border-color) !important;
    box-shadow: none !important;
    outline: none !important;
}
/* 汽车融合卡片内：下拉框与文字同排显示，宽度自适应 */
.car-card .styled-select { width: auto; min-width: 140px; }

/* 修正下拉框在暗色背景下的显示（如果父容器是深色） */
/* 但根据 colors.css，卡片背景是白色，所以深色文本是正确的 */