/**
 * video-tools.css - shared look for the seven local video tools
 *
 * Loaded by every page under index/tools/video/ (compress, crop, gif, audio,
 * screenshot, convert, subtitle). The markup it styles lives in the shared
 * partials index/tools/video/_upload.html, _preview.html and _result.html, and
 * the behaviour is driven by VideoKit.mount() (statics/js/tooljs/video-kit.js).
 *
 * Layout rule: one column everywhere. No side-by-side panels, on any width.
 */

/* ---------- Upload zone ---------- */
.vc-drop {
    border: 2px dashed var(--bs-border-color, #ced4da);
    border-radius: .75rem;
    padding: 2rem 1rem;
    text-align: center;
    background: var(--bs-tertiary-bg, #f8f9fa);
    transition: border-color .15s ease, background-color .15s ease;
}

.vc-drop-hover {
    border-color: var(--bs-primary, #0d6efd);
    background: rgba(13, 110, 253, .06);
}

.vc-drop-icon {
    font-size: 2rem;
    line-height: 1;
    color: var(--bs-primary, #0d6efd);
    margin-bottom: .5rem;
}

.vc-drop-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: .25rem;
}

.vc-drop-sub {
    font-size: .875rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: .875rem;
}

/* ---------- Local processing notice ---------- */
.vc-privacy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    margin-top: .75rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    background: rgba(25, 135, 84, .08);
    color: #146c43;
    font-size: .8125rem;
    line-height: 1.5;
    text-align: center;
}

.vc-privacy-inline {
    justify-content: flex-start;
    text-align: left;
}

/* ---------- Error box ---------- */
.vc-error {
    margin-top: .75rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    background: rgba(220, 53, 69, .08);
    color: #b02a37;
    font-size: .8125rem;
    line-height: 1.5;
}

/* ---------- File info bar ---------- */
.vc-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    margin-top: .875rem;
}

.vc-chip {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: var(--bs-tertiary-bg, #f1f3f5);
    border: 1px solid var(--bs-border-color, #dee2e6);
    font-size: .8125rem;
    white-space: nowrap;
}

.vc-chip-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    background: rgba(13, 110, 253, .08);
    border-color: rgba(13, 110, 253, .25);
}

/* ---------- Preview player ---------- */
.vc-player {
    background: #000;
    border-radius: .5rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.vc-player video {
    display: block;
    width: 100%;
    max-height: 420px;
    background: #000;
}

/* ---------- Progress ---------- */
.vc-progress {
    height: 1.25rem;
    border-radius: 999px;
}

.vc-progress .progress-bar {
    font-size: .75rem;
    font-weight: 600;
}

/* ---------- Result card ---------- */
.vc-result-name {
    font-weight: 600;
    word-break: break-all;
    margin-bottom: .75rem;
}

.vc-meta {
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    padding-top: .5rem;
}

.vc-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .25rem 0;
    font-size: .875rem;
}

.vc-meta-key {
    color: var(--bs-secondary-color, #6c757d);
    flex: 0 0 auto;
}

.vc-meta-val {
    font-weight: 600;
    text-align: right;
    word-break: break-all;
}

.vc-saved {
    color: #198754;
}

/* ---------- Tool specific result extras ---------- */
.vc-shot-img {
    display: block;
    max-width: 100%;
    max-height: 320px;
    margin: 0 auto .75rem;
    border-radius: .5rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
}

/* 结果卡画面/播放器下方那行摘要：截图「分辨率 · 时间点 · 格式 · 大小」、
 * 音频「MP3 · 2.8 MB · 192 kbps · 48 kHz · 立体声」共用一个样式 */
.vc-result-caption {
    margin: -.35rem 0 .75rem;
    text-align: center;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

/* 比特率：固定码率与「自动 VBR」分成两行，各带一个小标题 */
.vc-brate-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .4rem;
}

.vc-brate-cap {
    flex: 0 0 auto;
    min-width: 4.5rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .8125rem;
}

.vc-brate-row .vc-btn-group {
    flex-wrap: wrap;
}

/* 源音频一行读清：AAC · 48 kHz · 立体声 · 192 kbps */
.vc-source-line {
    margin-top: .35rem;
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
    color: var(--bs-body-color, #212529);
}

.vc-audio-preview {
    width: 100%;
    margin-bottom: .75rem;
}

/* 视频产物的结果预览播放器（kit 对 video/* 自动插入） */
.vc-result-video {
    display: block;
    width: 100%;
    max-height: 320px;
    margin-bottom: .75rem;
    border-radius: .5rem;
    background: #000;
}

.vc-gif-preview {
    display: block;
    max-width: 100%;
    max-height: 320px;
    margin: 0 auto .75rem;
    border-radius: .5rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
}

/* ---------- Settings blocks ---------- */
.vc-field {
    margin-bottom: .875rem;
}

.vc-field:last-child {
    margin-bottom: 0;
}

.vc-field-label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: .375rem;
}

.vc-range-row {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.vc-range-row input[type="range"] {
    flex: 1 1 auto;
    min-width: 0;
}

.vc-range-value {
    flex: 0 0 auto;
    min-width: 3.5rem;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.vc-hint {
    font-size: .8125rem;
    color: var(--bs-secondary-color, #6c757d);
    line-height: 1.5;
}

.vc-warn {
    margin-top: .5rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    background: rgba(255, 193, 7, .12);
    color: #997404;
    font-size: .8125rem;
    line-height: 1.5;
}

.vc-time-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.vc-time-row .form-control {
    max-width: 9.5rem;
}

/* ---------- Double-handle range (trim start / end) ----------
   Two range inputs are stacked over one track; the inputs themselves are
   transparent to the pointer so only the thumbs stay draggable. */
.vc-trim {
    position: relative;
    height: 2.25rem;
    margin: .25rem 0 .75rem;
}

.vc-trim-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: .375rem;
    transform: translateY(-50%);
    background: var(--bs-tertiary-bg, #e9ecef);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 999px;
    overflow: hidden;
}

.vc-trim-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--bs-primary, #0d6efd);
    border-radius: 999px;
}

/* ---------- Timeline filmstrip (时间轴缩略图) ----------
   铺在轨道最底层当背景；有缩略图时轨道变高成胶片条，选区改成半透明叠加，
   这样被选中的那几格依然看得见内容。 */
.vc-trim-strip {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.vc-trim-strip canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.vc-trim-track.has-strip {
    height: 1.875rem;
    border-radius: .375rem;
}

.vc-trim-track.has-strip .vc-trim-fill {
    background: rgba(13, 110, 253, .32);
    box-shadow: inset 0 0 0 1px rgba(13, 110, 253, .6);
    border-radius: .375rem;
}

.vc-trim input[type="range"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.vc-trim input[type="range"]:focus {
    outline: none;
}

.vc-trim input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--bs-primary, #0d6efd);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    cursor: pointer;
}

.vc-trim input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--bs-primary, #0d6efd);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    cursor: pointer;
}

.vc-trim input[type="range"]:disabled::-webkit-slider-thumb {
    border-color: var(--bs-secondary-color, #adb5bd);
    cursor: not-allowed;
}

.vc-trim-legend {
    display: flex;
    justify-content: space-between;
    font-size: .75rem;
    color: var(--bs-secondary-color, #6c757d);
    font-variant-numeric: tabular-nums;
}

.vc-trim-len {
    display: inline-flex;
    align-items: baseline;
    gap: .375rem;
    padding: .375rem .75rem;
    border-radius: .5rem;
    background: rgba(13, 110, 253, .08);
    font-size: .875rem;
}

.vc-trim-len strong {
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

/* 放在卡片标题右侧时去掉底色，避免和标题打架 */
.vc-trim-len-flat {
    padding: 0;
    background: none;
}

/* ---------- Playhead (播放头) ----------
   与 .vc-trim 同高，用百分比起定位；pointer-events:none 保证不挡轨道点击。 */
.vc-trim-head {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: #dc3545;
    border-radius: 1px;
    pointer-events: none;
    z-index: 3;
}

/* ---------- Compact start/end timecode row ---------- */
.vc-tc-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.vc-tc {
    flex: 1 1 12rem;
    display: flex;
    align-items: center;
    gap: .375rem;
    min-width: 0;
}

.vc-tc-label {
    flex: 0 0 auto;
    font-size: .8125rem;
    color: var(--bs-secondary-color, #6c757d);
}

.vc-tc .form-control {
    flex: 1 1 auto;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

/* 当前时间点读数（截图工具卡头） */
.vc-shot-clock {
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
    padding: .15rem .55rem;
    border-radius: .375rem;
    background: rgba(13, 110, 253, .1);
    color: var(--bs-primary, #0d6efd);
}

/* ---------- Range actions (播放选区 / 重置) ---------- */
.vc-trim-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* ---------- Size risk badge (GIF 体积风险) ---------- */
.vc-estimate {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.vc-risk {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
}

.vc-risk-low {
    background: rgba(25, 135, 84, .12);
    color: #146c43;
}

.vc-risk-mid {
    background: rgba(255, 193, 7, .18);
    color: #997404;
}

.vc-risk-high {
    background: rgba(220, 53, 69, .12);
    color: #b02a37;
}

/* ---------- Radio row used by the compression level picker ---------- */
.vc-radio-list .form-check {
    margin-bottom: .375rem;
}

.vc-radio-list .form-check:last-child {
    margin-bottom: 0;
}

.vc-radio-list .form-check-label small {
    display: block;
    color: var(--bs-secondary-color, #6c757d);
}

/* ---------- Selectable preset cards (压缩档位 / 目标格式等) ---------- */
.vc-preset-list {
    display: grid;
    gap: .5rem;
}

.vc-preset {
    position: relative;
    display: block;
    margin: 0;
    padding: .75rem 2.5rem .75rem .875rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .625rem;
    background: var(--bs-body-bg, #fff);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.vc-preset:hover {
    border-color: var(--bs-primary, #0d6efd);
}

.vc-preset .form-check-input {
    position: absolute;
    top: .95rem;
    right: .9rem;
    margin: 0;
    float: none;
}

.vc-preset-body {
    display: block;
}

.vc-preset-title {
    display: block;
    font-weight: 600;
}

.vc-preset-hint {
    display: block;
    margin-top: .15rem;
    font-size: .8125rem;
    color: var(--bs-secondary-color, #6c757d);
}

.vc-preset.is-active {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 .18rem rgba(13, 110, 253, .15);
    background: rgba(13, 110, 253, .04);
}

/* 2×2 紧凑预设置（GIF：卡片上带实际参数） */
.vc-preset-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
}

.vc-preset-grid .vc-preset {
    padding: .625rem 2.25rem .625rem .75rem;
}

/* ---------- Target-format cards (convert) ---------- */
.vc-fmt-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
}

.vc-fmt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    margin: 0;
    padding: .6rem .4rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .625rem;
    background: var(--bs-body-bg, #fff);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.vc-fmt-card:hover {
    border-color: var(--bs-primary, #0d6efd);
}

.vc-fmt-card.is-active {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 .18rem rgba(13, 110, 253, .15);
    background: rgba(13, 110, 253, .04);
}

.vc-fmt-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.vc-fmt-name {
    font-weight: 700;
}

.vc-fmt-use {
    font-size: .75rem;
    color: var(--bs-secondary-color, #6c757d);
}

.vc-fmt-card.is-active .vc-fmt-name,
.vc-fmt-card.is-active .vc-fmt-use {
    color: var(--bs-primary, #0d6efd);
}

/* ---------- Conversion summary (源 → 输出) ---------- */
.vc-summary {
    margin-top: .75rem;
    padding: .6rem .7rem;
    border-radius: .5rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    font-size: .8125rem;
}

.vc-summary-label {
    margin-bottom: .2rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .75rem;
    font-weight: 600;
}

.vc-summary-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem;
}

.vc-summary-src,
.vc-summary-arrow {
    color: var(--bs-secondary-color, #6c757d);
}

.vc-summary-out {
    font-weight: 600;
}

/* 输入 / 输出 两行的行首标签 */
.vc-summary-cap {
    flex: 0 0 auto;
    min-width: 2.6rem;
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 600;
}

.vc-summary-arrowline {
    padding: .15rem 0 .15rem .9rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .75rem;
    line-height: 1;
}

/* 结论句：这句话回答「点了之后会怎样」 */
.vc-summary-note {
    margin-top: .45rem;
    padding-top: .45rem;
    border-top: 1px dashed var(--bs-border-color, #dee2e6);
    color: var(--bs-body-color, #212529);
}

/* ---------- Quick shift buttons (字幕时间轴) ---------- */
.vc-quick-shift {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.vc-quick-shift .btn.active {
    color: #fff;
    background: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
}

/* ---------- Option button groups (音质档位等) ---------- */
.vc-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.vc-btn-group .btn.active {
    color: #fff;
    background: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
}

/* 偏移量读数：整体延后 / 整体提前 + 秒数 */
.vc-readout {
    display: none;
    white-space: nowrap;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--bs-primary, #0d6efd);
}

.vc-readout.is-on {
    display: inline-flex;
    align-items: center;
    padding: 0 .25rem;
}

/* ---------- 字幕转换：输入 → 输出 一行 ---------- */
.vc-fmt-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: .5rem;
}

.vc-fmt-cell {
    min-width: 0;
}

.vc-fmt-cap {
    display: block;
    margin-bottom: .25rem;
    font-size: .8125rem;
    font-weight: 600;
}

.vc-fmt-arrow {
    padding-bottom: .55rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* ---------- 字幕时间轴偏移：大号读数作为视觉中心 ---------- */
.vc-shift-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .35rem;
    padding: .25rem 0 .75rem;
}

.vc-shift-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--bs-secondary-color, #6c757d);
    transition: color .15s ease;
}

.vc-shift-value.is-on {
    color: var(--bs-primary, #0d6efd);
}

.vc-shift-unit {
    font-size: .875rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* ---------- Cue / timeline preview ---------- */
.vc-cue-preview {
    max-height: 240px;
    overflow: auto;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    font-size: .8125rem;
}

.vc-cue-head,
.vc-cue-row {
    display: grid;
    grid-template-columns: 6.2rem 6.2rem 1fr;
    gap: .5rem;
    padding: .35rem .6rem;
}

.vc-cue-head {
    position: sticky;
    top: 0;
    background: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 600;
}

.vc-cue-row + .vc-cue-row {
    border-top: 1px solid rgba(0, 0, 0, .075);
}

.vc-cue-orig,
.vc-cue-adj {
    font-variant-numeric: tabular-nums;
}

.vc-cue-orig {
    color: var(--bs-secondary-color, #6c757d);
}

.vc-cue-adj.is-changed {
    color: var(--bs-primary, #0d6efd);
    font-weight: 600;
}

.vc-cue-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vc-cue-more {
    padding: .35rem .6rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* ---------- Convert preview: readable cue list ---------- */
.vc-cue-list {
    max-height: 260px;
    overflow: auto;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
}

.vc-cue-fmt {
    position: sticky;
    top: 0;
    padding: .3rem .6rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-secondary-color, #6c757d);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.vc-cue-item {
    padding: .5rem .6rem;
}

.vc-cue-item + .vc-cue-item {
    border-top: 1px solid rgba(0, 0, 0, .075);
}

.vc-cue-item-head {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .15rem;
}

.vc-cue-idx {
    flex: 0 0 auto;
    min-width: var(--vc-cue-idx-w, 1.9rem);
    text-align: center;
    padding: .1rem .25rem;
    border-radius: .25rem;
    background: var(--bs-tertiary-bg, #e9ecef);
    color: var(--bs-secondary-color, #6c757d);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.vc-cue-time {
    font-variant-numeric: tabular-nums;
    font-size: .8125rem;
    color: var(--bs-secondary-color, #6c757d);
}

.vc-cue-item-text {
    font-size: .875rem;
    white-space: pre-wrap;
    word-break: break-word;
    /* 文本与上方的「时间」对齐（让开序号列），层级一眼可读 */
    padding-left: calc(var(--vc-cue-idx-w, 1.9rem) + .5rem);
}

.vc-cue-foot {
    padding: .35rem .6rem;
    border-top: 1px solid rgba(0, 0, 0, .075);
    color: var(--bs-secondary-color, #6c757d);
    font-size: .75rem;
}

/* ---------- Inline warning hint + extract state ---------- */
.vc-warn {
    color: var(--bs-warning-text-emphasis, #664d03);
    background: var(--bs-warning-bg-subtle, #fff3cd);
    border-radius: .375rem;
    padding: .5rem .6rem;
}

.vc-state {
    padding: .5rem .6rem;
    border-radius: .375rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-secondary-color, #6c757d);
    font-size: .875rem;
}

.vc-state.is-loading { color: var(--bs-primary, #0d6efd); }
.vc-state.is-found { color: var(--bs-success-text-emphasis, #0a3622); background: var(--bs-success-bg-subtle, #d1e7dd); }
.vc-state.is-none { color: var(--bs-warning-text-emphasis, #664d03); background: var(--bs-warning-bg-subtle, #fff3cd); }
.vc-state.is-failed { color: var(--bs-danger-text-emphasis, #58151c); background: var(--bs-danger-bg-subtle, #f8d7da); }

/* ---------- Collapsible advanced settings ---------- */
.vc-advanced-toggle {
    display: flex;
    align-items: center;
    gap: .375rem;
    width: 100%;
    padding: .5rem 0;
    border: 0;
    background: none;
    color: var(--bs-primary, #0d6efd);
    font-size: .875rem;
    font-weight: 600;
    text-align: left;
}

.vc-advanced-toggle i {
    transition: transform .18s ease;
}

.vc-advanced-toggle[aria-expanded="true"] i {
    transform: rotate(90deg);
}

.vc-advanced {
    border-top: 1px dashed var(--bs-border-color, #dee2e6);
    padding-top: .875rem;
    margin-top: .25rem;
}

/* ---------- Mobile ---------- */
@media (max-width: 575.98px) {
    .vc-drop {
        padding: 1.5rem .75rem;
    }

    .vc-drop-icon {
        font-size: 1.6rem;
    }

    .vc-privacy {
        text-align: left;
    }

    .vc-player video {
        max-height: 260px;
    }

    .vc-time-row .form-control {
        max-width: 100%;
        flex: 1 1 100%;
    }

    /* 快捷平移按钮在手机上排成整齐的两行（3 列），不挤压换行 */
    .vc-quick-shift {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    /* 「输入 → 输出」在手机上改为上下排列，箭头转向 */
    .vc-fmt-row {
        grid-template-columns: 1fr;
    }

    .vc-fmt-arrow {
        padding: 0;
        text-align: center;
        transform: rotate(90deg);
    }

    .vc-shift-value {
        font-size: 1.75rem;
    }

    /* 目标格式卡片手机上 2×2 */
    .vc-fmt-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 音质档位手机上 3 列，整齐不挤 */
    .vc-btn-group {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}