/* =========================================================
 * 智能擦除 v2 · 深色 UI
 *   布局：
 *     drama-v2 命名保留给漫剧；本文件以 .erase2- 开头
 *     顶栏（暗色）：重选视频 / 保存为模版 / 查看计费 / 创建任务
 *     主区：左上视频 + 选区 / 右边白色参数面板
 *     底部：时间轴（缩略帧条 + 擦除时间色块）
 *     右上角滑出："COS 配置 / 模板 / 我的任务"三栏抽屉
 * ========================================================= */

.erase2-root {
    background: #0f1115;
    color: #dfe4ec;
    min-height: calc(100vh - 180px);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ===== 顶栏 ===== */
.erase2-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: #14171d;
    border-bottom: 1px solid #1f2530;
}
.erase2-topbar-left {
    display: flex; align-items: center; gap: 12px;
}
.erase2-topbar-title {
    font-size: 14px; font-weight: 600; color: #dfe4ec;
}
.erase2-topbar-title .sub {
    color: #8b94a4; font-weight: 400; margin-left: 10px; font-size: 12px;
}
.erase2-topbar-right { display: flex; gap: 8px; }

.erase2-btn {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #2b3140;
    background: #1b1f28;
    color: #dfe4ec;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all .15s;
}
.erase2-btn:hover:not(:disabled) {
    border-color: #3b4252; background: #242933;
}
.erase2-btn:disabled { opacity: .45; cursor: not-allowed; }
.erase2-btn.primary {
    background: #2b6cde; border-color: #2b6cde; color: #fff;
}
.erase2-btn.primary:hover:not(:disabled) {
    background: #1e5bc7; border-color: #1e5bc7;
}
.erase2-btn.ghost {
    background: transparent; border-color: transparent;
    color: #8b94a4;
}
.erase2-btn.ghost:hover { color: #dfe4ec; background: rgba(255,255,255,.04); }

/* ===== 主区 ===== */
.erase2-main {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 12px;
    padding: 12px 20px 0;
    min-height: 0;
}
.erase2-left {
    background: #0a0c10;
    border-radius: 10px;
    position: relative;
    min-height: 420px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.erase2-video-wrap {
    position: relative;
    max-width: 100%; max-height: 100%;
    display: inline-block;
}
.erase2-video-wrap video {
    display: block;
    max-width: 100%;
    max-height: 58vh;
    background: #000;
}
.erase2-area-layer {
    position: absolute;
    inset: 0;
    pointer-events: auto;
}
.erase2-empty-placeholder {
    text-align: center;
    color: #5a6476;
    padding: 60px 40px;
}
.erase2-empty-placeholder i { font-size: 48px; display: block; margin-bottom: 12px; }
.erase2-empty-placeholder .hint { font-size: 13px; margin-top: 6px; color: #6e7a8c; }
.erase2-empty-placeholder .btn {
    margin-top: 16px;
    padding: 8px 20px;
    background: #2b6cde; color: #fff;
    border-radius: 6px; border: none; cursor: pointer;
    font-size: 13px;
}

/* ===== 右侧参数面板（白色卡片） ===== */
.erase2-right {
    background: #fff;
    color: #262626;
    border-radius: 10px;
    padding: 16px;
    overflow-y: auto;
    max-height: calc(100vh - 310px);
}
.erase2-right-head {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 12px; margin-bottom: 14px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px; font-weight: 600; color: #262626;
}
.erase2-right-head .back {
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #595959; transition: all .15s;
}
.erase2-right-head .back:hover { background: #f0f0f0; color: #262626; }
.erase2-right-section { margin-bottom: 18px; }
.erase2-right-section-title {
    font-size: 12px; color: #595959; font-weight: 600;
    margin-bottom: 8px;
}

.erase2-box-info {
    display: flex; align-items: center; gap: 8px;
    background: #f9f0ff; padding: 8px 10px; border-radius: 6px;
    margin-bottom: 10px;
}
.erase2-box-color {
    width: 16px; height: 16px; border-radius: 3px;
    background: #9d4dff;
}
.erase2-box-label { font-size: 13px; color: #262626; font-weight: 500; }

.erase2-field-row {
    display: grid; grid-template-columns: 80px 1fr; gap: 8px;
    align-items: center; margin-bottom: 10px;
}
.erase2-field-row > label {
    font-size: 13px; color: #595959;
    display: flex; align-items: center; gap: 4px;
}
.erase2-field-row > label .help {
    color: #bfbfbf; cursor: help; font-size: 12px;
}
.erase2-coord-inputs {
    display: grid; grid-template-columns: auto 1fr auto 1fr auto auto;
    gap: 4px; align-items: center;
}
.erase2-coord-inputs input {
    width: 100%; padding: 4px 6px;
    border: 1px solid #d9d9d9; border-radius: 4px;
    font-size: 12px; color: #262626;
    text-align: center;
    background: #fff;
}
.erase2-coord-inputs input:focus {
    outline: none; border-color: #4aa3ff;
}
.erase2-coord-inputs .unit { font-size: 12px; color: #8c8c8c; padding: 0 2px; }
.erase2-coord-inputs .lock {
    color: #bfbfbf; cursor: pointer; font-size: 12px;
    transition: color .15s;
}
.erase2-coord-inputs .lock.active { color: #9d4dff; }

.erase2-time-inputs {
    display: grid; grid-template-columns: 1fr auto 1fr auto;
    gap: 4px; align-items: center;
}
.erase2-time-inputs input {
    width: 100%; padding: 4px 6px;
    border: 1px solid #d9d9d9; border-radius: 4px;
    font-size: 12px; text-align: center;
}
.erase2-time-inputs .unit { font-size: 12px; color: #8c8c8c; padding: 0 2px; }

.erase2-right-hint {
    font-size: 11px; color: #8c8c8c;
    line-height: 1.6; margin-top: 4px;
}

/* 擦除类型 / 范围 / 模板 */
.erase2-seg {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.erase2-seg-item {
    padding: 8px 10px;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
    transition: all .15s;
    font-size: 12px; color: #595959;
}
.erase2-seg-item.active {
    background: #f0f5ff;
    border-color: #2b6cde;
    color: #2b6cde;
    font-weight: 600;
}
.erase2-seg-item:hover:not(.active) { border-color: #bfbfbf; }

/* ===== 时间轴 ===== */
.erase2-timeline {
    background: #0f1115;
    border-top: 1px solid #1f2530;
    padding: 8px 20px 10px;
    display: flex; flex-direction: column; gap: 6px;
    user-select: none;
}
.erase2-timeline-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; color: #8b94a4; font-size: 12px;
}
.erase2-time-now {
    color: #dfe4ec; font-weight: 600; font-variant-numeric: tabular-nums;
}
.erase2-time-dim { color: #596074; }
.erase2-zoom {
    display: flex; align-items: center; gap: 6px;
}
.erase2-zoom .btn {
    width: 22px; height: 22px; border-radius: 50%;
    background: #1b1f28; color: #dfe4ec;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    border: 1px solid #2b3140;
}
.erase2-zoom input[type=range] {
    width: 120px; accent-color: #4aa3ff;
}

/* 刻度尺 */
.erase2-ticks-wrap {
    position: relative; height: 24px;
    overflow: hidden;
}
.erase2-ticks {
    position: relative; height: 100%;
    color: #596074; font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.erase2-tick {
    position: absolute; top: 0; bottom: 0;
    border-left: 1px solid rgba(255,255,255,.08);
    padding-left: 3px;
    white-space: nowrap;
}
.erase2-tick.major { border-left-color: rgba(255,255,255,.18); color: #8b94a4; }

/* 擦除时间色块轨道 */
.erase2-track {
    position: relative; height: 26px;
    background: #1b1f28;
    border-radius: 4px;
}
.erase2-track-bar {
    position: absolute; top: 3px; bottom: 3px;
    background: linear-gradient(90deg, #9d4dff, #7b2fcf);
    border: 1px solid #6a20bf;
    border-radius: 4px;
    cursor: grab;
    display: flex; align-items: center; padding: 0 6px;
    color: #fff; font-size: 11px;
    box-shadow: 0 0 10px rgba(157,77,255,.45);
    min-width: 24px;
}
.erase2-track-bar:active { cursor: grabbing; }
.erase2-track-bar .grip {
    position: absolute; top: 0; bottom: 0; width: 6px;
    background: rgba(255,255,255,.28);
    cursor: ew-resize;
}
.erase2-track-bar .grip.l { left: 0; border-radius: 3px 0 0 3px; }
.erase2-track-bar .grip.r { right: 0; border-radius: 0 3px 3px 0; }
.erase2-track-bar .label {
    margin-left: 10px; white-space: nowrap;
    text-overflow: ellipsis; overflow: hidden;
}
.erase2-track-playhead {
    position: absolute; top: -18px; bottom: -104px;
    width: 2px; background: #f5f5f5;
    pointer-events: none;
    box-shadow: 0 0 6px rgba(255,255,255,.4);
}
.erase2-track-playhead::before {
    content: '';
    position: absolute; top: -6px; left: -5px;
    width: 12px; height: 12px; border-radius: 50%;
    background: #f5f5f5;
    box-shadow: 0 0 6px rgba(255,255,255,.6);
}

/* 缩略帧条 */
.erase2-thumbs {
    display: flex; height: 54px; gap: 0;
    background: #0f1115;
    border-radius: 4px;
    overflow: hidden;
}
.erase2-thumbs-item {
    flex: 1 0 60px;
    background-color: #1b1f28;
    background-position: center; background-size: cover;
    border-right: 1px solid rgba(255,255,255,.04);
}
.erase2-thumbs-item:last-child { border-right: none; }

/* ===== 视频上的选区 ===== */
.erase2-area {
    position: absolute;
    border: 2px dashed rgba(157, 77, 255, .95);
    background: rgba(157, 77, 255, .16);
    box-shadow: 0 0 0 1px rgba(0,0,0,.25);
    cursor: move;
    pointer-events: auto;
    box-sizing: border-box;
}
.erase2-area.selected {
    border-style: solid;
    box-shadow: 0 0 0 2px rgba(157,77,255,.35), 0 4px 14px rgba(157,77,255,.35);
}
.erase2-area-label {
    position: absolute; top: 2px; left: 4px;
    padding: 1px 6px;
    background: rgba(157,77,255,.9);
    color: #fff; font-size: 11px; border-radius: 3px;
    white-space: nowrap; pointer-events: none;
}
/* 8 个缩放手柄 —— 圆点视觉 10px,命中区经 ::after 扩到 24×24
   (2026-08-07 用户实测"选中框拖不动变大变小"主因:8px 圆点极难点中,
    差几像素落在空白 → 反而画出新框又被 <1% 自动取消,体感=完全没反应) */
.erase2-handle {
    position: absolute;
    width: 10px; height: 10px;
    background: #fff;
    border: 1px solid #9d4dff;
    border-radius: 50%;
    z-index: 3;
}
.erase2-handle::after { content: ''; position: absolute; inset: -7px; }
.erase2-handle.nw { top: -6px; left: -6px;  cursor: nwse-resize; }
.erase2-handle.n  { top: -6px; left: 50%; margin-left: -5px; cursor: ns-resize; }
.erase2-handle.ne { top: -6px; right: -6px; cursor: nesw-resize; }
.erase2-handle.w  { top: 50%; left: -6px; margin-top: -5px; cursor: ew-resize; }
.erase2-handle.e  { top: 50%; right: -6px; margin-top: -5px; cursor: ew-resize; }
.erase2-handle.sw { bottom: -6px; left: -6px;  cursor: nesw-resize; }
.erase2-handle.s  { bottom: -6px; left: 50%; margin-left: -5px; cursor: ns-resize; }
.erase2-handle.se { bottom: -6px; right: -6px; cursor: nwse-resize; }
/* 四条边整条可拖拽缩放(不必点中角点);z 低于手柄,角落让位给对角手柄 */
.erase2-edge { position: absolute; z-index: 2; }
.erase2-edge.n { top: -5px; left: 12px; right: 12px; height: 10px; cursor: ns-resize; }
.erase2-edge.s { bottom: -5px; left: 12px; right: 12px; height: 10px; cursor: ns-resize; }
.erase2-edge.w { left: -5px; top: 12px; bottom: 12px; width: 10px; cursor: ew-resize; }
.erase2-edge.e { right: -5px; top: 12px; bottom: 12px; width: 10px; cursor: ew-resize; }

/* 视频上的"拖拽新建提示" */
.erase2-draw-hint {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.45); font-size: 14px;
}

/* 视频控制条 */
.erase2-video-controls {
    position: absolute;
    left: 50%; bottom: 12px; transform: translateX(-50%);
    background: rgba(0,0,0,.55);
    border-radius: 20px; padding: 4px 10px;
    display: flex; align-items: center; gap: 6px;
    backdrop-filter: blur(6px);
}
.erase2-video-controls button {
    background: transparent; border: none; color: #fff;
    width: 28px; height: 28px; border-radius: 50%;
    cursor: pointer; font-size: 13px;
}
.erase2-video-controls button:hover { background: rgba(255,255,255,.12); }
.erase2-video-controls .time {
    color: #dfe4ec; font-size: 12px;
    font-variant-numeric: tabular-nums; padding: 0 4px;
}

/* ===== 上传进度 ===== */
.erase2-upload-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.75);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 10px;
    color: #fff; font-size: 13px;
    z-index: 5;
}
.erase2-upload-overlay .bar {
    width: 240px; height: 6px;
    background: rgba(255,255,255,.1);
    border-radius: 3px; overflow: hidden;
}
.erase2-upload-overlay .fill {
    height: 100%; background: linear-gradient(90deg,#9d4dff,#2b6cde);
    width: 0%; transition: width .15s;
}

/* ===== COS 配置弹层 ===== */
.erase2-cos-modal {
    width: 520px; max-width: 92vw;
    background: #fff; border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.erase2-cos-head {
    padding: 14px 18px; border-bottom: 1px solid #f0f0f0;
    display: flex; justify-content: space-between; align-items: center;
    font-weight: 600; color: #262626;
}
.erase2-cos-body { padding: 16px 18px; }
.erase2-cos-body .field { margin-bottom: 12px; }
.erase2-cos-body .field label {
    display: block; font-size: 12px; color: #595959; margin-bottom: 4px;
}
.erase2-cos-body .field input {
    width: 100%; padding: 7px 10px;
    border: 1px solid #d9d9d9; border-radius: 5px;
    font-size: 13px; color: #262626;
}
.erase2-cos-body .tip {
    padding: 10px; margin-top: 4px;
    background: #fffbe6; border: 1px solid #ffe58f;
    border-radius: 5px;
    font-size: 12px; color: #ad6800; line-height: 1.7;
}
.erase2-cos-foot {
    padding: 10px 18px; border-top: 1px solid #f0f0f0;
    display: flex; justify-content: flex-end; gap: 8px;
    background: #fafbfc;
}

/* ===== 任务抽屉 ===== */
.erase2-tasks-btn {
    position: fixed; right: 20px; bottom: 20px;
    width: 44px; height: 44px; border-radius: 50%;
    background: #2b6cde; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(43,108,222,.45);
    cursor: pointer;
    z-index: 500;
    border: none; font-size: 16px;
}
.erase2-tasks-btn .badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 4px;
    background: #ff4d4f; color: #fff;
    border-radius: 9px; font-size: 11px;
    display: flex; align-items: center; justify-content: center;
}
.erase2-tasks-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 420px; max-width: 92vw;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0,0,0,.15);
    z-index: 600;
    transform: translateX(100%);
    transition: transform .25s;
    display: flex; flex-direction: column;
}
.erase2-tasks-drawer.show { transform: translateX(0); }
.erase2-tasks-drawer .head {
    padding: 14px 18px; border-bottom: 1px solid #f0f0f0;
    display: flex; justify-content: space-between; align-items: center;
    color: #262626; font-weight: 600;
}
.erase2-tasks-drawer .body {
    flex: 1; padding: 12px 18px; overflow-y: auto;
}
.erase2-task-card {
    background: #fafbfc; border: 1px solid #f0f0f0;
    border-radius: 8px; padding: 10px 12px;
    margin-bottom: 10px;
}
.erase2-task-card .t {
    display: flex; justify-content: space-between;
    font-size: 13px; color: #262626; font-weight: 500;
}
.erase2-task-card .m {
    font-size: 11px; color: #8c8c8c; margin-top: 2px;
    display: flex; gap: 6px; flex-wrap: wrap;
}
.erase2-task-card .status-tag {
    display: inline-flex; padding: 1px 6px; border-radius: 10px;
    font-size: 11px; font-weight: 500;
}
.erase2-task-card .status-tag.PROCESSING,
.erase2-task-card .status-tag.WAITING { background:#e6f4ff; color:#0958d9; }
.erase2-task-card .status-tag.FINISH  { background:#f6ffed; color:#389e0d; }
.erase2-task-card .status-tag.FAIL,
.erase2-task-card .status-tag.FAILED,
.erase2-task-card .status-tag.ABNORMAL { background:#fff2f0; color:#cf1322; }

.erase2-task-card video,
.erase2-task-card img {
    width: 100%; border-radius: 4px;
    margin-top: 6px; background: #000;
}
.erase2-result-wrap {
    margin-top: 6px;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    background: #000;
}
.erase2-result-wrap video {
    width: 100%; display: block; background: #000;
    max-height: 260px;
}
.erase2-result-loading {
    padding: 36px 12px;
    text-align: center;
    color: #8c8c8c;
    font-size: 13px;
    background: #1e2430;
    color: #dfe4ec;
}
.erase2-result-loading i { margin-right: 6px; color: #4aa3ff; }
.erase2-result-err {
    padding: 20px 14px;
    text-align: center;
    color: #a8071a;
    font-size: 13px;
    background: #fff2f0;
    border: 1px solid #ffccc7;
    border-radius: 4px;
    line-height: 1.7;
}
.erase2-result-err i { color: #ff4d4f; margin-right: 4px; font-size: 15px; }
.erase2-task-card .err {
    margin-top: 6px; padding: 6px 8px;
    background: #fff2f0; border-left: 3px solid #ff4d4f;
    color: #a8071a; font-size: 11px; line-height: 1.6;
    border-radius: 3px;
}
.erase2-task-card .actions {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-top: 6px;
}
.erase2-task-card .actions button {
    padding: 3px 10px; font-size: 11px;
    border: 1px solid #d9d9d9; background: #fff;
    border-radius: 4px; cursor: pointer; color: #595959;
}
.erase2-task-card .actions button:hover { border-color: #4aa3ff; color: #0958d9; }

/* 遮罩 */
.erase2-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 550;
    display: flex; align-items: center; justify-content: center;
}

/* 响应式 */
@media (max-width: 1100px) {
    .erase2-main { grid-template-columns: 1fr; }
    .erase2-right { max-height: none; }
}

/* ===== COS 目录浏览器 ===== */
.erase2-browser-modal { width: 640px; max-width: 92vw; }
.erase2-cos-browser-body {
    max-height: 50vh;
    min-height: 300px;
    overflow-y: auto;
    background: #fff;
}
.erase2-cos-browser-list {
    display: flex; flex-direction: column;
}
.erase2-cos-browser-item {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    font-size: 13px;
    transition: background .12s;
}
.erase2-cos-browser-item:hover { background: #f0f7ff; }
.erase2-cos-browser-item.file { cursor: default; color: #8c8c8c; }
.erase2-cos-browser-item.file:hover { background: #fafafa; }
.erase2-cos-browser-item .name {
    color: #262626;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.erase2-cos-browser-item.file .name { color: #8c8c8c; }
.erase2-cos-browser-item .meta {
    color: #bfbfbf; font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.erase2-cos-body .field select {
    width: 100%; padding: 7px 10px;
    border: 1px solid #d9d9d9; border-radius: 5px;
    font-size: 13px; color: #262626;
    background: #fff;
}