/* ======================================================================
 *  mov-to-mp4.css · MOV 本地转码导出 WebM
 *  视觉：冷灰白 + 电光青；录制台像剪辑软件的监视器 + 时间轴
 *  作用域：.tsk.mov（前缀 mov-）
 * ====================================================================== */

.tsk.mov {
    --tsk-bg: #f3f6fa;
    --tsk-bg-2: #e8eff8;
    --tsk-card: #ffffff;
    --tsk-card-2: #f2f6fb;
    --tsk-ink: #101a2b;
    --tsk-sub: #4d5b73;
    --tsk-faint: #8593a8;
    --tsk-line: #dde6f2;
    --tsk-line-2: #eaf0f8;
    --tsk-brand: #0ea5c6;
    --tsk-brand-2: #2563eb;
    --tsk-brand-soft: #e2f6fa;
    --tsk-brand-ink: #0a7f9b;
    --tsk-accent: #ff7a18;
    --tsk-ok: #1a9c68;
    --tsk-ok-soft: #e4f7ee;
    --tsk-warn: #b06a00;
    --tsk-warn-soft: #fff3df;
    --tsk-bad: #d92d20;
    --tsk-bad-soft: #fdecec;
    --tsk-info: #3559c9;
    --tsk-info-soft: #e9eefc;
    --tsk-shadow-sm: 0 1px 2px rgba(16, 26, 43, .06), 0 6px 16px rgba(16, 26, 43, .06);
    --tsk-shadow: 0 2px 8px rgba(16, 26, 43, .08), 0 18px 44px rgba(16, 26, 43, .1);
    --tsk-shadow-lg: 0 6px 16px rgba(16, 26, 43, .1), 0 32px 72px rgba(16, 26, 43, .16);
    --tsk-r: 16px;
    --tsk-r-sm: 10px;
    background: linear-gradient(180deg, #f5f8fc 0%, #eff4fa 55%, #f3f6fa 100%);
}

:root[data-theme="dark"] .tsk.mov {
    --tsk-bg: #0b111c;
    --tsk-bg-2: #111a2a;
    --tsk-card: #151e2e;
    --tsk-card-2: #1a2536;
    --tsk-ink: #e7edf8;
    --tsk-sub: #9fb0c9;
    --tsk-faint: #7788a0;
    --tsk-line: #233044;
    --tsk-line-2: #1c2839;
    --tsk-brand: #28c6e6;
    --tsk-brand-2: #5b8dff;
    --tsk-brand-soft: rgba(40, 198, 230, .14);
    --tsk-brand-ink: #6bd7ee;
    --tsk-accent: #ff9558;
    --tsk-ok: #3ad292;
    --tsk-ok-soft: rgba(58, 210, 146, .14);
    --tsk-warn: #ffc857;
    --tsk-warn-soft: rgba(255, 200, 87, .14);
    --tsk-bad: #ff8181;
    --tsk-bad-soft: rgba(255, 129, 129, .14);
    --tsk-info: #84a5ff;
    --tsk-info-soft: rgba(132, 165, 255, .14);
    --tsk-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 16px rgba(0, 0, 0, .32);
    --tsk-shadow: 0 2px 8px rgba(0, 0, 0, .55), 0 18px 44px rgba(0, 0, 0, .4);
    --tsk-shadow-lg: 0 6px 16px rgba(0, 0, 0, .6), 0 32px 72px rgba(0, 0, 0, .5);
    background: #0b111c;
}

/* ---------- 1. 首屏栅格 ---------- */
.mov-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 394px;
    gap: 30px;
    padding: 30px 0 24px;
    align-items: stretch;
}
.mov-hero-l {
    display: flex;
    flex-direction: column;
}
.mov-hero-l > .tsk-hs {
    flex: 1 1 auto;
}
@media (max-width: 900px) {
    .mov-hero {
        grid-template-columns: 1fr;
    }
}
.mov-hero-r {
    min-width: 0;
}
.mov .tsk-h1 b {
    color: #0a7f9b;
    background: linear-gradient(180deg, transparent 62%, rgba(37, 99, 235, .14) 62%);
    padding: 0 2px;
}
.mov .tsk-kicker {
    background: #e2f6fa;
    color: #0a7f9b;
}

/* ---------- 2. 转码台 ---------- */
.mov-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}
.mov-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #101a2b;
    border: 1px solid #1e2c44;
    border-radius: 18px;
    box-shadow: var(--tsk-shadow-lg);
    overflow: hidden;
    color: #e7edf8;
}
.mov-panel-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    background: linear-gradient(90deg, #0b1a2b, #12293d);
    border-bottom: 1px solid #22334c;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .02em;
}
.mov-panel-hd i {
    font: 700 10px/1 var(--tsk-num);
    letter-spacing: .16em;
    color: #28c6e6;
}
.mov-panel-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    flex: 1 1 auto;
}
.mov-panel .mov-label,
.mov-panel .mov-field b {
    color: #9fb0c9;
}

/* 拖拽区 */
.mov-drop {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 14px;
    border: 1.5px dashed #2e4560;
    border-radius: 13px;
    background: #0d1626;
    cursor: pointer;
    transition: .16s;
}
.mov-drop:hover,
.mov-drop.over {
    border-color: #28c6e6;
    background: #10202f;
    box-shadow: inset 0 0 0 1px rgba(40, 198, 230, .22);
}
.mov-drop-ic {
    flex: 0 0 auto;
    width: 52px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: repeating-linear-gradient(90deg, #12233a 0 5px, #0e1c2e 5px 10px);
    border: 1px solid #29405c;
    color: #28c6e6;
    font: 800 11.5px/1 var(--tsk-num);
    letter-spacing: .12em;
}
.mov-drop b {
    display: block;
    font-size: 13.5px;
    color: #e7edf8;
}
.mov-drop small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: #7788a0;
    line-height: 1.5;
}

/* 元信息 2x2 */
.mov-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}
.mov-meta div {
    background: #0e1a2a;
    border: 1px solid #1f2e44;
    border-radius: 9px;
    padding: 8px 10px;
    min-width: 0;
}
.mov-meta span {
    display: block;
    font-size: 10.5px;
    color: #7788a0;
}
.mov-meta b {
    display: block;
    margin-top: 2px;
    font: 700 12.5px/1.5 var(--tsk-num);
    color: #cfe3f2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mov-meta b.ok {
    color: #3ad292;
}
.mov-meta b.bad {
    color: #ff8181;
}

/* 分段按钮 */
.mov-field {
    display: block;
}
.mov-label {
    display: block;
    margin-bottom: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
}
.mov-seg {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.mov-seg button {
    flex: 1 1 0;
    min-width: 74px;
    padding: 8px 10px;
    border: 1px solid #2a3b54;
    border-radius: 8px;
    background: #0e1a2a;
    color: #9fb0c9;
    font: 700 11.5px/1.3 var(--tsk-num);
    cursor: pointer;
    transition: .15s;
}
.mov-seg button:hover {
    border-color: #28c6e6;
    color: #6bd7ee;
}
.mov-seg button.on {
    background: linear-gradient(135deg, #0ea5c6, #2563eb);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px rgba(14, 165, 198, .28);
}
:root[data-theme="dark"] .mov-seg button.on {
    color: #fff;
}

/* 音轨开关 */
.mov-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 11px;
    border-radius: 9px;
    background: #0d1626;
    border: 1px solid #1f2e44;
    font-size: 11.5px;
    line-height: 1.6;
    color: #9fb0c9;
    cursor: pointer;
}
.mov-check input {
    margin-top: 3px;
    accent-color: #28c6e6;
}

/* 封面区 */
.mov-cover {
    border: 1px solid #1f2e44;
    border-radius: 11px;
    background: #0d1626;
    overflow: hidden;
}
.mov-cover-hd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 11px;
    border-bottom: 1px solid #1f2e44;
    font-size: 11.5px;
}
.mov-cover-hd span {
    font-size: 10.5px;
    color: #7788a0;
}
.mov-cover-body {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 9px;
    padding: 9px;
    align-items: center;
}
.mov-cover-shot {
    aspect-ratio: 16 / 9;
    border-radius: 7px;
    border: 1px solid #22334c;
    background:
        linear-gradient(45deg, #131f30 25%, transparent 25%) 0 0 / 12px 12px,
        linear-gradient(-45deg, #131f30 25%, transparent 25%) 0 6px / 12px 12px,
        #0b1420;
    display: grid;
    place-items: center;
    overflow: hidden;
    font-size: 10.5px;
    color: #5f7089;
}
.mov-cover-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mov-cover-acts {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mov-cover-acts .tsk-btn {
    padding: 7px 10px;
    font-size: 11.5px;
    background: #142236;
    border-color: #2a3b54;
    color: #cfe3f2;
}
.mov-cover-acts .tsk-btn:disabled {
    opacity: .42;
    cursor: not-allowed;
}
.mov-scrub {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 11px 10px;
}
.mov-scrub input[type="range"] {
    flex: 1 1 auto;
    accent-color: #28c6e6;
}
.mov-scrub span {
    flex: 0 0 auto;
    font: 700 11px/1 var(--tsk-num);
    color: #6bd7ee;
}

/* 错误 / 进度 */
.mov-err {
    padding: 9px 11px;
    border-radius: 9px;
    background: rgba(255, 129, 129, .1);
    border: 1px solid rgba(255, 129, 129, .34);
    color: #ff9b9b;
    font-size: 11.5px;
    line-height: 1.7;
}
.mov-progress {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.mov-prog-bar {
    height: 6px;
    border-radius: 99px;
    background: #16243a;
    overflow: hidden;
}
.mov-prog-bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, #28c6e6, #5b8dff);
    transition: width .2s linear;
}
.mov-progress span {
    font: 600 10.5px/1.5 var(--tsk-num);
    color: #7788a0;
}

/* 动作按钮 */
.mov-acts {
    display: flex;
    gap: 8px;
    margin-top: auto;
}
.mov-acts .tsk-btn {
    flex: 1 1 auto;
}
.mov-acts .mov-stop {
    background: #b42318;
    border-color: #b42318;
    color: #fff;
}
.mov-acts .mov-ghost {
    flex: 0 0 auto;
    padding: 10px 14px;
    background: #142236;
    border-color: #2a3b54;
    color: #cfe3f2;
}
.mov-acts .tsk-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}
.mov-foot {
    font-size: 10.5px;
    line-height: 1.6;
    color: #7788a0;
    text-align: center;
}

/* ---------- 3. 结果区 ---------- */
.mov-result {
    margin-top: 4px;
    background: var(--tsk-card);
    border: 1px solid var(--tsk-line);
    border-radius: 18px;
    box-shadow: var(--tsk-shadow-sm);
    padding: 17px 20px 19px;
}
.mov-result-hd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-bottom: 13px;
    border-bottom: 1px dashed var(--tsk-line);
}
.mov-stat {
    min-width: 92px;
    padding-right: 12px;
    border-right: 1px solid var(--tsk-line-2);
}
.mov-stat b {
    display: block;
    font: 800 16px/1.35 var(--tsk-num);
    color: var(--tsk-ink);
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mov-stat span {
    font-size: 11.5px;
    color: var(--tsk-faint);
}
.mov-result-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}
.mov-log {
    margin-top: 13px;
    padding: 12px 14px;
    border-radius: 11px;
    background: #101a2b;
    color: #9fb0c9;
    font: 500 11.5px/1.9 var(--tsk-num);
    max-height: 190px;
    overflow: auto;
    white-space: pre-wrap;
}
.mov-log .ok {
    color: #3ad292;
}
.mov-log .warn {
    color: #ffc857;
}
.mov-log .bad {
    color: #ff8181;
}
.mov-preview {
    margin-top: 13px;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}
.mov-preview video {
    display: block;
    width: 100%;
    max-height: 420px;
    background: #000;
}

/* ---------- 4. 容器 / 编码说明 ---------- */
.mov-sec-sub {
    margin-left: auto;
    font-size: 12px;
    color: var(--tsk-faint);
}
.mov-compat {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0;
    border: 1px solid var(--tsk-line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--tsk-card);
}
.mov-compat-row {
    padding: 15px 17px;
    border-right: 1px solid var(--tsk-line-2);
    border-bottom: 1px solid var(--tsk-line-2);
}
.mov-compat-row:last-child {
    border-right: 0;
}
.mov-compat-row b {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 4px;
}
.mov-compat-row b::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: #0ea5c6;
    box-shadow: 0 0 0 4px rgba(14, 165, 198, .12);
}
.mov-compat-row p {
    font-size: 12.5px;
    color: var(--tsk-sub);
    line-height: 1.75;
}

/* ---------- 5. 替代方案 ---------- */
.mov-fallbacks {
    display: grid;
    gap: 10px;
}
.mov-fallback {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 15px 17px;
    border: 1px solid var(--tsk-line);
    border-radius: 12px;
    background: linear-gradient(90deg, var(--tsk-card), var(--tsk-card-2));
    box-shadow: var(--tsk-shadow-sm);
}
.mov-fallback > span {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #101a2b;
    color: #28c6e6;
    font: 800 12px/1 var(--tsk-num);
}
.mov-fallback b {
    display: block;
    font-size: 13.5px;
    margin-bottom: 3px;
}
.mov-fallback p {
    font-size: 12.5px;
    color: var(--tsk-sub);
    line-height: 1.75;
}

/* ---------- 6. 经验卡 ---------- */
.mov-tips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 11px;
}
.mov-tip {
    display: flex;
    gap: 11px;
    padding: 14px 15px;
    border: 1px solid var(--tsk-line);
    border-radius: 11px;
    background: var(--tsk-card);
    box-shadow: var(--tsk-shadow-sm);
    border-top: 3px solid #0ea5c6;
}
.mov-tip > span {
    font: 800 16px/1 var(--tsk-num);
    color: var(--tsk-brand-ink);
    opacity: .55;
    padding-top: 2px;
}
.mov-tip b {
    display: block;
    font-size: 13px;
    margin-bottom: 2px;
}
.mov-tip p {
    font-size: 12.5px;
    color: var(--tsk-sub);
    line-height: 1.75;
}

/* ---------- 7. 响应式 ---------- */
@media (max-width: 760px) {
    .mov-cover-body {
        grid-template-columns: 1fr;
    }
    .mov-cover-shot {
        aspect-ratio: 16 / 7;
    }
    .mov-cover-acts {
        flex-direction: row;
    }
    .mov-result-acts {
        margin-left: 0;
        width: 100%;
    }
    .mov-stat {
        border-right: 0;
        padding-right: 0;
    }
}
@media (max-width: 560px) {
    .mov-seg button {
        min-width: 0;
        font-size: 11px;
    }
    .mov-meta {
        grid-template-columns: 1fr;
    }
    .mov-acts {
        flex-wrap: wrap;
    }
}

/* ---------- 8. 深色微调 ---------- */
:root[data-theme="dark"] .tsk.mov {
    background: #0b111c;
}
:root[data-theme="dark"] .mov-result {
    background: var(--tsk-card);
}
:root[data-theme="dark"] .mov .tsk-h1 b {
    background: linear-gradient(180deg, transparent 62%, rgba(91, 141, 255, .24) 62%);
    color: var(--tsk-brand-ink);
}
:root[data-theme="dark"] .mov .tsk-kicker {
    background: rgba(40, 198, 230, .14);
    color: var(--tsk-brand-ink);
}

/* ---------- 9. 打印与减少动效 ---------- */
@media print {
    .mov-panel,
    .mov-result-acts,
    .mov-preview {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .mov-prog-bar i {
        transition: none;
    }
}