/* 视频工作室（前端 B）：只用 app.css 的设计变量，类名一律 v- 开头。手机优先，360px 宽可用，不出现横向滚动。 */

/* ---------------------------------------------------------------- 通用 */

.v-hint { color: var(--text-3); font-size: 12.5px; line-height: 1.45; margin: 0; }
.v-label { font-size: 13px; font-weight: 650; color: var(--text-2); }
.v-req { color: var(--bad); }
.v-sub-t { font-size: 13px; font-weight: 700; color: var(--text-3); letter-spacing: .04em; margin: 18px 0 10px; }
.v-pad { padding: 14px 16px 0; }
.v-pad.v-empty-mini { padding: 16px; }
.v-span-all { grid-column: 1 / -1; }
.v-rot90 { transform: rotate(90deg); }
.v-empty-mini { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 13.5px; padding: 14px 4px; }
.v-empty-mini .ic { flex: none; }
.v-alerts:empty { display: none; }
.v-alerts > .callout:first-child { margin-top: 0; }
.v-alerts { margin-bottom: 12px; }
.v-chip-btn { border: 0; cursor: pointer; font: inherit; font-size: 12.5px; }
.v-chip-btn:hover { background: var(--accent-soft); color: var(--accent-ink); }
.v-range { width: 100%; min-width: 0; accent-color: var(--accent); flex: 1; }
.v-kv { margin-top: 12px; }

.v-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v-field-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.v-field-top > .v-label { flex: 1; min-width: 0; }
.v-field .row-error { margin-top: 0; }
.v-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.v-form-2 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .v-form-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v-switches { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.v-switch-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; min-width: 0; }
.v-switch-row + .v-switch-row { border-top: 1px solid var(--border); }
.v-sec { margin-bottom: 14px; }
.v-sec-t { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 750; margin-bottom: 6px; }
.v-stepn { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: 13px; font-weight: 800; flex: none; }
.v-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; min-width: 0; }
.v-toolbar > .seg { max-width: 100%; }
.v-submit { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 6px 0 24px; }
@media (min-width: 640px) { .v-submit { flex-direction: row; align-items: center; justify-content: flex-end; } .v-submit .v-hint { flex: 1; } }

/* ---------------------------------------------------------------- 视频页标签 */

.v-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: -6px 0 16px; overflow-x: auto; scrollbar-width: none; }
.v-tabs::-webkit-scrollbar { display: none; }
.v-tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px 10px; color: var(--text-3); font-weight: 650; font-size: 14px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.v-tab:hover { color: var(--text); text-decoration: none; }
.v-tab[aria-selected="true"] { color: var(--accent-ink); border-bottom-color: var(--accent); }

/* ---------------------------------------------------------------- 项目卡片 */

.v-pgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 900px) { .v-pgrid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; } }
.v-pcard {
  display: flex; flex-direction: column; min-width: 0; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
  overflow: hidden; color: inherit; transition: border-color .15s, transform .15s;
}
.v-pcard:hover { text-decoration: none; border-color: var(--border-strong); }
.v-pcard:active { transform: scale(.99); }
.v-pcard-media { position: relative; aspect-ratio: 3 / 4; background: var(--sunken); display: grid; place-items: center; color: var(--text-3); overflow: hidden; }
.v-pcard-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.v-dur {
  position: absolute; right: 6px; bottom: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(0, 0, 0, .62); color: #fff;
  font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums;
}
.v-pcard-body { padding: 10px 11px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v-pcard-title { font-weight: 700; font-size: 14px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.v-pcard-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.v-pcard-sub { font-size: 12px; color: var(--text-3); min-height: 16px; display: flex; align-items: center; }
.v-pcard-err { font-size: 12px; color: var(--bad); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.v-kind { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-3); font-weight: 600; white-space: nowrap; }
.v-mini-bar { display: block; width: 100%; height: 5px; border-radius: 3px; background: var(--sunken); overflow: hidden; }
.v-mini-bar > i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .5s var(--ease); }

/* ---------------------------------------------------------------- 新建向导 */

.v-choices { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .v-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v-choice { display: flex; flex-direction: column; gap: 8px; }
.v-choice:hover { border-color: var(--accent); }
.v-choice-ic { width: 46px; height: 46px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; }
.v-choice-t { font-size: 18px; font-weight: 750; color: var(--text); }
.v-choice-d { color: var(--text-2); font-size: 14px; }
.v-choice-list { margin: 0; padding-left: 1.2em; color: var(--text-3); font-size: 13px; }
.v-pick-sum { font-size: 13px; color: var(--text-2); margin-top: 10px; }

.v-tpls { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.v-tpl {
  display: flex; flex-direction: column; gap: 5px; text-align: left; padding: 10px; border-radius: var(--radius-sm); cursor: pointer; min-width: 0;
  background: var(--surface-2); border: 1.5px solid var(--border); color: var(--text); font: inherit; transition: border-color .15s, box-shadow .15s;
}
.v-tpl:hover { border-color: var(--border-strong); }
.v-tpl[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); background: var(--surface); }
.v-tpl-img { width: 100%; aspect-ratio: 16 / 10; border-radius: 8px; object-fit: cover; background: var(--sunken); }
.v-tpl-mock { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 10px 12px; aspect-ratio: 16 / 7; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .25); }
.v-tpl-mock-t { font-weight: 800; font-size: 15px; letter-spacing: .02em; }
.v-tpl-mock i { display: block; height: 4px; width: 62%; border-radius: 2px; }
.v-tpl-mock i.short { width: 38%; opacity: .5; }
.v-tpl-name { font-weight: 750; font-size: 14.5px; }
.v-tpl-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.4; overflow-wrap: anywhere; }
.v-tpl-meta { display: flex; flex-direction: column; gap: 1px; font-size: 11.5px; color: var(--text-3); }
.v-swatches { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.v-swatch { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .35); }
.v-swatch i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.v-apick { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); margin-top: 12px; }
.v-apick > .v-empty-mini { grid-column: 1 / -1; }
.v-atile {
  position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer;
  background: var(--sunken); color: var(--text-3); display: grid; place-items: center; font: inherit;
}
.v-atile.static { cursor: default; }
.v-atile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.v-atile:disabled { cursor: not-allowed; }
.v-atile:disabled img { opacity: .45; }
.v-atile.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); }
.v-atile-ph { display: grid; place-items: center; }
.v-atile-n {
  position: absolute; top: 5px; left: 5px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.v-atile-state { position: absolute; inset: auto 0 0 0; padding: 4px; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 11px; background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--text-2); }
.v-atile-state .spinner { width: 11px; height: 11px; }
.v-atile-cap { position: absolute; right: 4px; bottom: 4px; font-size: 11px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); font-variant-numeric: tabular-nums; }

.v-cpick { display: flex; flex-direction: column; margin-top: 10px; max-height: 55vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.v-cpick-item { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 11px 13px; border: 0; background: none; cursor: pointer; font: inherit; color: var(--text); min-width: 0; }
.v-cpick-item + .v-cpick-item { border-top: 1px solid var(--border); }
.v-cpick-item:hover { background: var(--surface-2); }
.v-cpick-text { font-size: 14.5px; overflow-wrap: anywhere; }
.v-cpick-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--text-3); }
.v-cpick-video { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; min-width: 0; }
.v-from-comment .order { margin: 0; }

/* ---------------------------------------------------------------- 上传 */

.v-upl { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.v-drop {
  display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius-sm); flex-wrap: wrap;
  border: 1.5px dashed var(--border-strong); background: var(--surface-2); transition: border-color .15s, background .15s;
}
.v-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.v-drop.compact { padding: 10px 12px; margin-top: 10px; }
.v-drop-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--surface); display: grid; place-items: center; color: var(--accent-ink); flex: none; }
.v-drop.compact .v-drop-ic { display: none; }
.v-drop-text { flex: 1 1 200px; min-width: 0; }
.v-drop-t { font-weight: 700; font-size: 14.5px; }
.v-upl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.v-upl-item { padding: 10px 12px; border-radius: var(--radius-xs); background: var(--surface-2); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.v-upl-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.v-upl-name { font-weight: 650; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.v-upl-size { font-size: 12px; flex: none; }
.v-upl-actions { display: inline-flex; gap: 4px; flex: none; }
.v-upl-bar { height: 6px; border-radius: 3px; background: var(--sunken); overflow: hidden; }
.v-upl-bar > i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width .3s linear; }
.v-upl-bar.ok > i { background: var(--ok); }
.v-upl-bar.bad > i { background: var(--bad); }
.v-upl-info { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.v-upl-info.err { color: var(--bad); font-weight: 550; }
.v-upl-foot { display: flex; justify-content: flex-end; font-size: 13px; }
.v-usage { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-3); }
.v-usage-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- 素材库 */

.v-assets { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
@media (min-width: 900px) { .v-assets { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } }
.v-asset {
  display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 0 0 10px; border-radius: var(--radius-sm); overflow: hidden; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); cursor: pointer; font: inherit; color: var(--text);
}
.v-asset:hover { border-color: var(--border-strong); }
.v-asset-media { position: relative; aspect-ratio: 1; background: var(--sunken); display: grid; place-items: center; color: var(--text-3); margin-bottom: 4px; }
.v-asset-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.v-asset-badge { position: absolute; left: 6px; top: 6px; }
.v-asset-badge .badge { box-shadow: 0 1px 3px rgba(0, 0, 0, .2); background: var(--surface); }
.v-asset-name { padding: 0 10px; font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-asset-sub { padding: 0 10px; font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-asset .v-pcard-err { padding: 0 10px; }
.v-src .select { width: auto; max-width: 100%; }
.v-prev { display: grid; place-items: center; background: #000; border-radius: 12px; overflow: hidden; }
.v-prev-video { width: 100%; max-height: 62vh; display: block; background: #000; }
.v-prev-img { max-width: 100%; max-height: 62vh; display: block; }
.v-prev .ph { width: 100%; background: var(--surface-2); }
.v-prev audio { margin: 20px; width: calc(100% - 40px); }

/* ---------------------------------------------------------------- 项目详情 */

.v-head { margin-top: 4px; }
.v-head .titles .hstack { align-items: flex-start; }
.v-title { font-size: 22px !important; overflow-wrap: anywhere; min-width: 0; }
.v-head .meta-line { margin-top: 8px; }
.v-head .meta-line a { display: inline-flex; align-items: center; gap: 4px; }
.v-steps-card { margin-bottom: 14px; }
.v-steps { gap: 6px; }
.step.skipped .step-bar > i { background: var(--border-strong); }
.step a.step-sub { color: var(--text-3); }
.step a.step-sub:hover { color: var(--accent-ink); }
.v-actions { margin-top: 14px; }
.v-unknown { margin-top: 14px; padding: 14px; border-radius: 12px; background: var(--bad-soft); border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent); display: flex; flex-direction: column; gap: 10px; }
.v-unknown-t { display: flex; align-items: center; gap: 8px; color: var(--bad); font-weight: 750; font-size: 15.5px; }
.v-unknown p { color: var(--text); font-size: 14px; }
.v-unknown .btn-row .btn { white-space: normal; height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; }

.v-detail { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "player" "editor" "publish" "jobs"; align-items: start; }
.v-area-player { grid-area: player; min-width: 0; }
.v-area-editor { grid-area: editor; min-width: 0; }
.v-area-publish { grid-area: publish; min-width: 0; }
.v-area-jobs { grid-area: jobs; min-width: 0; }
@media (min-width: 1100px) {
  .v-detail { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "editor player" "editor publish" "jobs publish"; grid-template-rows: auto auto 1fr; gap: 16px 22px; }
}
.v-player .video-box { width: min(100%, calc(64vh * 9 / 16)); }
/* 单栏时还没有成片：占位不必按竖屏比例撑满一屏 */
@media (max-width: 1099px) { .v-player .ph.tall { aspect-ratio: auto; width: 100%; min-height: 150px; } }
.v-thumbs { margin-top: 12px; }
.v-out-meta { font-size: 12.5px; }
.v-player .v-hint { margin-top: 10px; }

/* ---------------------------------------------------------------- EDL / 脚本编辑器 */

.v-edl-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); margin-bottom: 12px; position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top) + 6px); z-index: 5; }
@media (min-width: 900px) { .v-edl-bar { top: 10px; } }
.v-edl-bar .btn-row { margin-left: auto; }
.v-edl-total { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.v-edl-total-v { display: flex; flex-direction: column; line-height: 1.1; }
.v-edl-total-v > span { font-size: 22px; font-weight: 800; }
.v-edl-total-v small { font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.v-edl-total-v.bad > span { color: var(--bad); }
.v-edl-total-k { font-size: 12.5px; color: var(--text-3); }
.v-edl > .err-box, .v-edl > .callout, .v-notes { margin-bottom: 12px; }
.v-edl > .callout { margin-top: 0; }

.v-clips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.v-clips.drop-end::after { content: ""; display: block; height: 3px; border-radius: 2px; background: var(--accent); }
.v-clip { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); padding: 10px; display: flex; flex-direction: column; gap: 10px; min-width: 0; transition: opacity .2s, border-color .15s; position: relative; }
.v-clip.off { opacity: .62; }
.v-clip.off .v-clip-thumbs img { filter: grayscale(.8); }
.v-clip.has-err { border-color: color-mix(in srgb, var(--bad) 55%, var(--border)); }
.v-clip.dragging { border-color: var(--accent); box-shadow: 0 6px 22px rgba(0, 0, 0, .18); }
.v-clip.drop-before::before { content: ""; position: absolute; left: 0; right: 0; top: -7px; height: 3px; border-radius: 2px; background: var(--accent); }
.v-clip-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.v-handle {
  width: 30px; height: 36px; border: 0; background: none; color: var(--text-3); cursor: grab; border-radius: 8px; display: grid; place-items: center;
  touch-action: none; flex: none; padding: 0;
}
.v-handle .ic { transform: rotate(90deg); }
.v-handle:hover { background: var(--sunken); color: var(--text); }
.v-handle:active { cursor: grabbing; }
.v-clip-n { width: 24px; height: 24px; border-radius: 7px; background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; font-size: 12px; font-weight: 750; color: var(--text-2); flex: none; }
.v-clip-name { flex: 1; min-width: 0; }
.v-clip-t { font-weight: 650; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-clip-sub { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.v-moves { display: inline-flex; flex: none; }
.v-clip-body { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "thumb reason" "times times" "row row"; gap: 8px 10px; min-width: 0; align-items: start; }
@media (min-width: 600px) { .v-clip-body { grid-template-columns: 78px minmax(0, 1fr); grid-template-areas: "thumb reason" "thumb times" "thumb row"; } }
.v-clip-thumbs {
  grid-area: thumb; position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 9px; overflow: hidden; border: 0; padding: 0; cursor: pointer;
  background: var(--sunken); color: var(--text-3); display: grid; place-items: center;
}
.v-clip-thumbs > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.v-clip-thumbs > img.v-clip-out { inset: auto 3px 3px auto; width: 42%; height: auto; aspect-ratio: 3 / 4; border-radius: 5px; border: 1.5px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.v-clip-play { position: absolute; left: 4px; bottom: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center; }
.v-clip-play .ic { width: 12px; height: 12px; }
.v-clip-reason { grid-area: reason; font-size: 12.5px; color: var(--text-3); overflow-wrap: anywhere; }
.v-clip-times { grid-area: times; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.v-clip-row { grid-area: row; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v-clip-row .select { width: auto; min-height: 34px; padding-top: 4px; padding-bottom: 4px; font-size: 13.5px; }
.v-clip-err { font-size: 12.5px; }
.v-tc { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v-tc-l { font-size: 12px; font-weight: 650; color: var(--text-3); }
.v-nudger { display: grid; grid-template-columns: auto auto minmax(62px, 1fr) auto auto; gap: 4px; align-items: center; min-width: 0; max-width: 340px; }
.v-nudge { padding: 0 6px; min-width: 38px; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.v-tc-input { min-height: 32px; height: 32px; padding: 4px 6px; text-align: center; font-size: 14px; width: 100%; }
.v-nudge-val { text-align: center; font-weight: 700; }
.v-cap-toggle { margin-left: auto; }
.v-caps { border-top: 1px dashed var(--border-strong); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.v-cap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.v-cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "times del" "text text"; gap: 6px; align-items: center; padding: 6px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.v-cap.bad { border-color: var(--bad); }
.v-cap-times { grid-area: times; display: flex; align-items: center; gap: 4px; min-width: 0; }
.v-cap > .btn { grid-area: del; }
.v-cap-main { grid-area: text; display: flex; align-items: center; gap: 6px; min-width: 0; }
.v-cap-t { width: 76px; min-height: 32px; height: 32px; padding: 4px 6px; font-size: 13.5px; text-align: center; }
.v-cap-text { min-height: 34px; padding: 5px 9px; font-size: 14.5px; flex: 1; }
.v-cap-none { font-size: 13px; }
@media (min-width: 640px) {
  .v-cap { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "times text del"; }
}
.v-edl-bgm { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }

.v-segs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.v-seg { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.v-seg.has-err { border-color: color-mix(in srgb, var(--bad) 55%, var(--border)); }
.v-seg-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.v-seg-dur { font-size: 12.5px; color: var(--text-3); }
.v-seg-add { margin-top: 10px; }
.v-seg-hint { margin: -4px 0 10px; }
.v-seg-content { border-top: 1px dashed var(--border-strong); padding-top: 10px; }
.v-themes { display: flex; gap: 8px; flex-wrap: wrap; }
.v-theme { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; font: inherit; font-size: 13px; color: var(--text); }
.v-theme[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); }
.v-theme-sw { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; border: 2px solid transparent; }
.v-imgpick { display: flex; gap: 6px; flex-wrap: wrap; }
.v-imgpick-b { width: 58px; height: 58px; padding: 0; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: var(--sunken); cursor: pointer; display: grid; place-items: center; color: var(--text-3); }
.v-imgpick-b { position: relative; }
.v-imgpick-b img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.v-imgpick-b[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); }

/* 按 schema 生成的表单 */
.v-sf { min-width: 0; }
.v-sf-obj { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.v-sf-set { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px 12px; margin: 0; min-width: 0; }
.v-sf-set > legend { padding: 0 4px; }
.v-sf-items { display: flex; flex-direction: column; gap: 8px; }
.v-sf-item { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.v-sf-n { width: 22px; height: 22px; margin-top: 8px; border-radius: 6px; background: var(--sunken); display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--text-3); flex: none; }
.v-sf-item-body { flex: 1; min-width: 0; }
.v-sf-item-body > .v-sf-field > .v-field-top:empty { display: none; }
.v-sf-switch { display: flex; }

/* ---------------------------------------------------------------- 发布表单 */

.v-publish .v-form { gap: 14px; }
.v-tag-sug { margin-top: 2px; }
.v-sched { max-width: 280px; }
.v-attempt { margin-top: 14px; font-size: 12.5px; color: var(--text-3); display: flex; align-items: center; gap: 4px; }
.v-publish > .warn-box, .v-publish > .info-box { margin-top: 14px; }
.v-pub-foot { margin-top: 16px; }

/* ---------------------------------------------------------------- 日历 */

.v-cal-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.v-cal-title { font-size: 17px; font-weight: 750; min-width: 7.5em; text-align: center; }
.v-legend { display: inline-flex; gap: 6px; }
.v-cal-grid { display: none; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.v-cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.v-cal-row + .v-cal-row { border-top: 1px solid var(--border); }
.v-cal-wd { padding: 7px 8px; font-size: 12px; font-weight: 700; color: var(--text-3); background: var(--surface-2); }
.v-cal-cell { min-height: 104px; padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.v-cal-cell + .v-cal-cell { border-left: 1px solid var(--border); }
.v-cal-cell.other { background: var(--surface-2); }
.v-cal-cell.other .v-cal-d { color: var(--text-3); opacity: .6; }
.v-cal-d { font-size: 12.5px; font-weight: 700; color: var(--text-2); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.v-cal-cell.today .v-cal-d { background: var(--accent); color: var(--on-accent); }
.v-cal-item { display: flex; gap: 4px; align-items: baseline; font-size: 11.5px; padding: 2px 6px; border-radius: 6px; min-width: 0; line-height: 1.35; }
.v-cal-item:hover { text-decoration: none; filter: brightness(.96); }
.v-cal-time { flex: none; font-weight: 700; font-size: 11.5px; }
.v-cal-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--text); }
.v-cal-more { font-size: 11px; color: var(--text-3); padding-left: 6px; }
.v-cal-list { display: flex; flex-direction: column; gap: 14px; }
.v-cal-day-h { font-size: 12.5px; font-weight: 700; color: var(--text-3); margin: 0 2px 6px; }
.v-cal-day.today .v-cal-day-h { color: var(--accent-ink); }
.v-cal-day { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; padding-top: 8px; }
.v-cal-day .v-cal-day-h { padding: 0 12px; }
.v-cal-li { padding: 10px 12px; border-top: 1px solid var(--border); }
.v-cal-li .v-cal-time { font-size: 13px; color: var(--text-2); width: 44px; }
@media (min-width: 720px) {
  .v-cal-grid { display: block; }
  .v-cal-list { display: none; }
}

/* ---------------------------------------------------------------- 自动化 */

.v-autos { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .v-autos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v-auto { display: flex; flex-direction: column; gap: 10px; }
.v-auto.off { background: var(--surface-2); }
.v-auto-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.v-auto-head .main-col { flex: 1; min-width: 0; }
.v-auto-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
.v-auto.off .v-auto-ic { background: var(--sunken); color: var(--text-3); }
.v-auto-name { font-weight: 750; font-size: 15.5px; color: var(--text); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-auto-kind { font-size: 12.5px; color: var(--text-3); }
.v-auto-sum { font-size: 13.5px; color: var(--text-2); overflow-wrap: anywhere; }
.v-auto-top .meta-line { margin-top: 2px; }
.v-topics { margin: 0 -16px -16px; border-top: 1px solid var(--border); }
@media (min-width: 900px) { .v-topics { margin: 0 -20px -18px; } }
.v-topic { align-items: flex-start; }
.v-topic .main-col { display: flex; flex-direction: column; gap: 4px; }
.v-topic-line { font-size: 14.5px; overflow-wrap: anywhere; }
.v-topic .t2 a { font-weight: 600; }
.v-topic .side-col { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 480px) { .v-topic { flex-wrap: wrap; } .v-topic .side-col { width: 100%; justify-content: flex-start; } }