.wf-page { height: 100%; min-height: 0; display: flex; flex-direction: column; background: #fff; }
.wf-loading { position: relative; }
.wf-loading::after { content: '正在刷新帧索引…'; position: absolute; top: 12px; right: 20px; z-index: 3; padding: 5px 9px; border: 1px solid #b9dfd9; border-radius: 4px; background: #ffffffed; color: #247168; font-size: 12px; }
.wf-page .biz-page-header { flex: 0 0 auto; }
.wf-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--border-lighter, #e5e9ef); }
.wf-tabs { display: flex; border-bottom: 1px solid var(--border-lighter, #e5e9ef); }
.wf-tabs button { font: inherit; font-size: 13px; padding: 8px 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted, #657780); cursor: pointer; }
.wf-tabs button.active { color: var(--primary, #087f78); border-bottom-color: var(--primary, #087f78); }
.wf-toolbar label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.wf-toolbar select { max-width: 100%; background: #fff; color: var(--text-primary, #243034); border: 1px solid var(--border-lighter, #d8e2e3); border-radius: 4px; padding: 7px 10px; font-size: 13px; }
.wf-summary { margin-left: auto; font-size: 12px; color: var(--muted, #657780); }
.wf-content { overflow: auto; min-height: 0; flex: 1; align-content: start; }
.wf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 16px; padding: 20px; }
.wf-card { display: block; min-width: 0; padding: 0; border: 1px solid #dde5e5; border-radius: 6px; background: #fff; text-align: left; font: inherit; cursor: pointer; overflow: hidden; }
.wf-card:hover:not(:disabled), .wf-card:focus-visible { border-color: #098a81; box-shadow: 0 2px 9px #0c534b14; outline: 2px solid #098a8122; }
.wf-card:disabled { opacity: .55; cursor: default; }
.wf-thumb { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #eef3f3; display: grid; place-items: center; overflow: hidden; color: #667a80; font-size: 12px; }
.wf-thumb img { width: 100%; height: 100%; object-fit: contain; }
.wf-thumb [hidden], .wf-stage [hidden] { display: none !important; }
.wf-image-status { position: absolute; }
.wf-badge { position: absolute; top: 8px; left: 8px; background: #ffffffeb; color: #12645e; border: 1px solid #b9dfd9; padding: 3px 8px; border-radius: 3px; font-size: 11px; }
.wf-card-info { padding: 11px 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.wf-card-info strong { font-size: 14px; color: #263d40; font-weight: 600; }
.wf-card-info > span { font-size: 12px; color: #617578; }
.wf-list { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.wf-list .wf-card { display: flex; width: min(860px, 100%); flex: 0 0 auto; }
.wf-list .wf-thumb { width: 280px; flex: 0 0 280px; }
.wf-list .wf-card-info { flex: 1; flex-direction: column; justify-content: center; align-items: flex-start; }
.wf-state { text-align: center; padding: 48px 20px; color: #687b80; font-size: 14px; }
.wf-state.is-error { color: #a33a36; }
.wf-modal-mask { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 12px; background: #10202499; }
.wf-modal { width: min(1100px, 100%); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; border-radius: 6px; overflow: auto; background: #fff; color: #243d3e; box-shadow: 0 12px 48px #0006; }
.wf-modal header { flex: 0 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e0e8e8; }
.wf-modal h3 { font-size: 15px; font-weight: 600; margin: 0 0 3px; letter-spacing: 0; }
.wf-modal header span { color: #667a80; font-size: 12px; }
.wf-stage { flex: 0 0 auto; position: relative; width: 100%; height: min(63dvh, 720px); background: #edf5f3; display: grid; place-items: center; }
.wf-stage img { position: absolute; width: 100%; height: 100%; object-fit: contain; }
.wf-player-status { position: relative; z-index: 2; color: #247168; font-size: 13px; padding: 7px 11px; border: 1px solid #b9dfd9; border-radius: 4px; background: #ffffffdf; box-shadow: 0 2px 8px #0c534b18; }
.wf-caption { padding: 8px 16px 0; font-size: 13px; font-weight: 600; color: #247168; }
.wf-controls { padding: 10px 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wf-icon-button { width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid #d2dddd; border-radius: 4px; display: grid; place-items: center; background: #fff; color: #2b625c; font-size: 16px; cursor: pointer; }
.wf-icon-button:hover { background: #eff8f5; border-color: #469c8b; }
.wf-icon-button:disabled { opacity: .45; cursor: default; }
.wf-icon-button img { width: 18px; height: 18px; }
.wf-icon-button .shell-icon { width: 18px; height: 18px; flex-basis: 18px; }
.wf-next-icon { --nav-icon: url('/assets/icons/mingcute/arrow-right-line.svg'); }
.wf-close { border: 0; font-size: 24px; }
.wf-play { background: #0d8579; color: #fff; border-color: #0d8579; }
.wf-play:hover { background: #096e64; }
.wf-controls label { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #536c70; }
.wf-speed-label { margin-left: 8px; }
.wf-speed { width: 110px; }
.wf-controls output { width: 65px; font-variant-numeric: tabular-nums; }
.wf-counter { margin-left: auto; min-width: 42px; font-size: 12px; font-variant-numeric: tabular-nums; color: #617578; }
.wf-progress { display: block; width: calc(100% - 32px); margin: 0 16px; flex: 0 0 auto; }
.wf-modal input { accent-color: #0d8579; }
.wf-labels { display: flex; justify-content: space-between; padding: 5px 16px 12px; font-size: 10px; color: #778b90; }
@media (max-width: 650px) {
  .wf-toolbar { gap: 10px; padding: 10px 12px; }
  .wf-summary { width: 100%; margin: 0; }
  .wf-grid, .wf-list { padding: 12px; gap: 12px; }
  .wf-list .wf-thumb { width: 160px; flex-basis: 160px; }
  .wf-card-info { padding: 10px; }
  .wf-card-info strong { font-size: 13px; }
  .wf-modal-mask { padding: 6px; }
  .wf-modal { max-height: calc(100dvh - 12px); }
  .wf-stage { height: min(48dvh, 520px); }
  .wf-speed-label { margin-left: 0; }
  .wf-labels { font-size: 8px; }
}