.hero {
    margin-top: 50px;
    background-color: transparent;
    padding: 80px 0 0 0;
}

.main-desc-wrap {
    display: flex;
    margin-top: 16px;
    align-items: center;
    gap: 36px;
    margin-left: 35%;
}

.desc-item {
    display: flex;
    align-items: center;
    font-size: 16px;
}

.desc-img-wrap {
    margin-right: 8px;
    width: 24px;
    height: 24px;
    background: #c5dbff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.translate-container {
    display: flex;
    gap: 30px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.carousel-container {
    flex: 1;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.carousel-wrapper {
    width: 100%;
    height: 500px;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-button.prev {
    left: 10px;
}

.carousel-button.next {
    right: 10px;
}

.upload-container {
    width: 400px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.upload-section {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.upload-area {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-area:hover {
    border-color: #007bff;
    background: #f8f9fa;
}

.upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.upload-placeholder img {
    width: 48px;
    height: 48px;
}

.upload-placeholder p {
    margin: 0;
    color: #666;
}

.notice-section {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.notice-section h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
}

.notice-section ul {
    margin: 0;
    padding-left: 20px;
}

.notice-section li {
    margin-bottom: 10px;
    color: #666;
    line-height: 1.5;
}

.up-images-div {
    display: flow;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    height: 100%;
    flex: 1;
    resize: none;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
}

/* 图片容器样式 - 新增 */
.image-container {
    position: relative;
    display: inline-block;
    margin: 4px;
    width: fit-content; /* 根据内容调整宽度 */
    height: fit-content; /* 根据内容调整高度 */
}

/* 调整 custom-preview-image 样式 */
.custom-preview-image {
    max-width: 200px;
    min-height: 150px;
    width: 100%;
    height: auto;
    object-fit: contain;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
    display: block;
}

/* 修正 mask-layer 样式 */
.mask-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    z-index: 10; /* 确保遮罩层在图片上方 */
}

/* 调整删除按钮样式 */
.delete-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 0, 0, 0.7);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    z-index: 11; /* 确保删除按钮在遮罩层上方 */
}

.delete-button:hover {
    background: rgba(255, 0, 0, 0.9);
}

.translate-result{
    position: absolute;
    bottom:10px;
    right:10px;
    padding:5px 10px;
    border: none;
}

.language-section {
    display: none;
}

.translate-container.has-images .language-section {
    display: block;
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.language-select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.translate-button {
    width: 100%;
    padding: 12px;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s ease;
}

.translate-button:hover {
    background: #0056b3;
}

/* 删除按钮样式 */
.delete-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 0, 0, 0.7);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.delete-button:hover {
    background: rgba(255, 0, 0, 0.9);
}

/* 拖放状态样式 */
.upload-area.dragover {
    border-color: #007bff;
    background: #f8f9fa;
}

/* 翻译按钮禁用状态 */
.translate-button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* 语言选择框禁用状态 */
.language-select:disabled {
    background: #f5f5f5;
    cursor: not-allowed;
}

/* 全屏图片展示 */
.fullscreen-modal {
    display: none;
}
.fullscreen-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.fullscreen-image img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.history {
    float: right;
    margin-top: -50px;
    margin-right: 10%;
}

.version-select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* 工作区总体布局 */
.workspace{display:grid;grid-template-columns:280px 1fr;gap:28px;max-width:1100px;margin:0px auto 80px;padding:0 24px}

/* 左侧工具面板 */
.tool-panel{background:#fff;border-radius:12px;box-shadow:0 6px 20px rgba(17,24,39,.08);padding:16px;position:sticky;top:86px;height:fit-content}
.panel-group{background:#f7f8fb;border-radius:10px;padding:12px;margin-bottom:12px}
.panel-group.upload{background:#fff;border:1px dashed #e2e6ef}
.panel-title{font-size:13px;color:#7a849a;margin-bottom:8px}
.quality-list{display:flex;flex-direction:column;gap:8px}
.quality-item{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #e3e7f0;border-radius:8px;padding:10px 12px;font-size:13px;color:#334155;cursor:pointer}
.quality-item .q-icon{display:inline-grid;place-items:center;background:#eaf1ff;color:#3b82f6;width:26px;height:18px;border-radius:6px;margin-right:8px;font-weight:700}
.quality-item .q-name{flex:1}
.quality-item .q-arrow{color:#98a2b3}
.quality-item .vip{background:#ffb37a;color:#fff;font-size:12px;padding:2px 6px;border-radius:6px;margin-left:8px}
.quality-item.selected{border-color:#8fb4ff;box-shadow:0 0 0 2px rgba(107,144,255,.15)}

.scene-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.scene-btn{background:#fff;border:1px solid #e3e7f0;border-radius:8px;padding:10px 0;font-size:13px;color:#334155;cursor:pointer}
.scene-btn.active{border-color:#8fb4ff;color:#2663ff;background:#f2f6ff}

.upload-area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;border-radius:10px;cursor:pointer}
.upload-area .upload-text{color:#64748b;font-size:13px}

.primary-btn{width:100%;margin-top:6px;padding:12px;border:none;border-radius:10px;background:#2663ff;color:#fff;font-weight:700;cursor:pointer;box-shadow:0 10px 20px rgba(38,99,255,.2)}
.primary-btn:active{transform:translateY(1px)}

.notice{margin-top:10px;color:#7a849a;font-size:12px}
.notice p{margin:6px 0}

/* 右侧对比舞台 */
.compare-wrap{position:relative}
.compare-stage{--split:50;position:relative;width:100%;max-width:100%;height:500px;margin:0 auto;background:#f5f7fb;border-radius:12px;box-shadow:0 6px 20px rgba(17,24,39,.08);overflow:hidden;display: grid;place-items: center;}
.cmp-img{position:absolute;inset:0;object-fit:cover;max-width:90%;max-height: 90%;transform-origin:center center;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.cmp-img.before{clip-path:polygon(0 0, calc(var(--split)*1%) 0, calc(var(--split)*1%) 100%, 0 100%)}
.cmp-img.after{clip-path:none}
.cmp-badge{position:absolute;top:12px;padding:4px 8px;border-radius:8px;background:rgba(0,0,0,.5);color:#fff;font-size:12px}
.cmp-badge.left{left:12px}
.cmp-badge.right{right:12px}
.cmp-divider{position:absolute;top:0;bottom:0;width:2px;left:calc(var(--split)*1%);transform:translateX(-1px);background:#fff}
.cmp-handle{position:absolute;top:50%;left:calc(var(--split)*1%);transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid #e3e7f0;box-shadow:0 8px 18px rgba(0,0,0,.15);cursor:ew-resize}

/* 缩放条 */
.zoom-bar{display:flex;align-items:center;gap:10px;position:absolute;left:50%;bottom:16px;transform:translateX(-50%)}
.zoom-btn{width:34px;height:28px;border:1px solid #e3e7f0;background:#fff;border-radius:8px;cursor:pointer}
.zoom-text{min-width:68px;text-align:center;color:#334155;background:#fff;border:1px solid #e3e7f0;border-radius:8px;height:28px;display:grid;place-items:center}

/* 帮助按钮 */
.help-btn{position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid #e3e7f0;box-shadow:0 6px 16px rgba(0,0,0,.15);cursor:pointer;color:#334155}

/* 响应式 */
@media (max-width:980px){.workspace{grid-template-columns:1fr}.tool-panel{position:static}.compare-stage{height:420px}}

/* 任务生成中遮罩层 */
.processing-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  z-index: 1000;
}
.processing-box{
  padding: 14px 18px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 20px rgba(17,24,39,.12);
  color: #334155;
  font-weight: 700;
}