@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

:root { font-family: 'Noto Sans SC', ui-sans-serif, system-ui, sans-serif; color: var(--color-base-content); background: var(--color-base-100); }
* { box-sizing: border-box; }
html { background: var(--color-base-100); scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; background: var(--color-base-100); color: var(--color-base-content); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.w-full { width: 100%; }.mt-2 { margin-top: .5rem; }.absolute { position: absolute; }.right-3 { right: .75rem; }.top-3 { top: .75rem; }.text-lg { font-size: 1.125rem; }.font-semibold { font-weight: 600; }.z-1 { z-index: 1; }.p-2 { padding: .5rem; }.w-48 { width: 12rem; }.mt-3 { margin-top: .75rem; }.shadow { box-shadow: 0 12px 28px color-mix(in oklab, var(--color-neutral) 32%, transparent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.theme-switch { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 32px; border-radius: 7px; color: color-mix(in oklab, var(--color-base-content) 68%, transparent); cursor: pointer; }
.theme-switch:hover { background: color-mix(in oklab, var(--color-primary) 10%, transparent); color: var(--color-primary); }
.theme-switch .toggle { position: absolute; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.theme-switch-icon { display: grid; place-items: center; pointer-events: none; }

.app-topbar { position: sticky; top: 0; z-index: 30; min-height: 54px; padding: 0 18px; border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 14%, transparent); background: color-mix(in oklab, var(--color-base-100) 94%, transparent); backdrop-filter: blur(18px); }
.brand, .auth-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--color-base-content); font-size: 15px; font-weight: 700; text-decoration: none; }
.brand-mark { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid color-mix(in oklab, var(--color-primary) 75%, var(--color-base-content)); border-radius: 7px; background: var(--color-primary); color: var(--color-primary-content); }
.topbar-project { min-width: 0; margin-left: 22px; padding-left: 22px; border-left: 1px solid color-mix(in oklab, var(--color-base-content) 14%, transparent); color: color-mix(in oklab, var(--color-base-content) 58%, transparent); font-size: 12px; }
.topbar-project strong { overflow: hidden; max-width: min(34vw, 380px); margin-left: 5px; color: var(--color-base-content); text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }.user-trigger { gap: 7px; color: var(--color-base-content); }
.avatar.placeholder > span { width: 26px; height: 26px; border-radius: 7px; background: var(--color-secondary); color: var(--color-secondary-content); font-size: 10px; font-weight: 700; }

.app-shell { display: grid; grid-template-columns: 80px minmax(0, 1fr); min-height: calc(100vh - 54px); }
.workspace-sidebar { position: sticky; top: 54px; display: flex; height: calc(100vh - 54px); flex-direction: column; padding: 10px 0; border-right: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent); background: var(--color-base-200); }
.workspace-sidebar nav { display: grid; place-items: center; gap: 6px; }
.side-link { position: relative; display: grid; width: 48px; height: 46px; place-items: center; border: 1px solid transparent; border-radius: 7px; color: color-mix(in oklab, var(--color-base-content) 58%, transparent); font-size: 0; text-decoration: none; }
.side-link svg { width: 18px; height: 18px; }.side-link:hover { border-color: color-mix(in oklab, var(--color-primary) 44%, transparent); background: color-mix(in oklab, var(--color-primary) 12%, transparent); color: var(--color-primary); }.side-link.active { border-color: color-mix(in oklab, var(--color-primary) 52%, transparent); background: var(--color-primary); color: var(--color-primary-content); box-shadow: 0 8px 18px color-mix(in oklab, var(--color-primary) 25%, transparent); }
.side-link::after { position: absolute; left: calc(100% + 10px); z-index: 50; display: none; padding: 5px 8px; border: 1px solid var(--color-base-300); border-radius: 5px; background: var(--color-neutral); color: var(--color-neutral-content); content: attr(aria-label); font-size: 11px; white-space: nowrap; }.side-link:hover::after { display: block; }
.sidebar-foot { display: grid; place-items: center; margin-top: auto; padding: 12px 0; font-size: 0; }.status { width: 7px; height: 7px; border-radius: 999px; }.status-success { background: var(--color-success); box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-success) 14%, transparent); }

.app-main { min-width: 0; padding: 24px clamp(16px, 3vw, 44px) 54px; }.page-heading, .workspace-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; max-width: 1500px; margin: 0 auto 18px; }.page-heading h1, .workspace-heading h1 { margin: 0 0 3px; font-size: 20px; line-height: 1.3; letter-spacing: 0; }.page-heading p, .workspace-heading p { margin: 0; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); font-size: 12px; }.workspace-heading { align-items: end; }.crumb { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 7px; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); font-size: 11px; text-decoration: none; }.crumb:hover { color: var(--color-primary); }.header-status { display: flex; align-items: center; gap: 8px; color: color-mix(in oklab, var(--color-base-content) 56%, transparent); font-size: 11px; white-space: nowrap; }

.project-grid, .library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(242px, 1fr)); gap: 10px; max-width: 1500px; margin: 0 auto; }.project-card { display: grid; min-height: 150px; grid-template-rows: auto 1fr auto; padding: 14px; border: 1px solid var(--color-base-300); border-radius: 8px; background: var(--color-base-200); color: inherit; text-align: left; transition: border-color .16s ease, background .16s ease, transform .16s ease; }.project-card:hover { border-color: color-mix(in oklab, var(--color-primary) 60%, var(--color-base-300)); background: color-mix(in oklab, var(--color-primary) 7%, var(--color-base-200)); transform: translateY(-1px); }.project-card-top, .project-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.project-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 7px; background: var(--color-base-300); color: var(--color-primary); }.project-card h3 { margin: 15px 0 3px; font-size: 14px; }.project-card p { overflow: hidden; margin: 0; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.project-card-bottom { padding-top: 12px; border-top: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent); color: color-mix(in oklab, var(--color-base-content) 52%, transparent); font-family: 'DM Mono', monospace; font-size: 10px; }.project-card-bottom span { display: inline-flex; align-items: center; gap: 4px; }
.empty-state { display: grid; min-height: 240px; grid-column: 1 / -1; place-items: center; padding: 28px; border: 1px dashed color-mix(in oklab, var(--color-primary) 48%, var(--color-base-300)); border-radius: 8px; background: var(--color-base-200); color: var(--color-primary); text-align: center; }.empty-state h3 { margin: 10px 0 4px; color: var(--color-base-content); font-size: 15px; }.empty-state p, .modal-copy { max-width: 360px; margin: 0 0 16px; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); font-size: 12px; }.form-stack { display: grid; gap: 8px; }.field-label { color: color-mix(in oklab, var(--color-base-content) 74%, transparent); font-size: 11px; font-weight: 600; }.modal-action { margin-top: 10px; }

.workflow-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1500px; margin: 0 auto 14px; padding: 0; overflow: hidden; border: 1px solid var(--color-base-300); border-radius: 8px; background: var(--color-base-200); }.workflow-steps .step { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 10px 12px; color: color-mix(in oklab, var(--color-base-content) 52%, transparent); cursor: pointer; }.workflow-steps .step + .step { border-left: 1px solid var(--color-base-300); }.workflow-steps .step::after { display: none; }.workflow-steps .step > span { display: grid; width: 21px; min-width: 21px; height: 21px; place-items: center; border: 1px solid var(--color-base-300); border-radius: 6px; background: var(--color-base-100); color: inherit; font-family: 'DM Mono', monospace; font-size: 10px; }.workflow-steps .step-primary { background: color-mix(in oklab, var(--color-primary) 9%, var(--color-base-200)); color: var(--color-base-content); }.workflow-steps .step-primary > span { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-primary-content); }.workflow-steps strong, .workflow-steps small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.workflow-steps strong { font-size: 11px; }.workflow-steps small { margin-top: 1px; color: color-mix(in oklab, var(--color-base-content) 52%, transparent); font-size: 10px; }

.workflow-section { max-width: 1500px; margin: 0 auto 12px; padding: 16px; border: 1px solid var(--color-base-300); border-radius: 8px; background: var(--color-base-200); scroll-margin-top: 70px; }.section-title { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }.section-title > span { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid color-mix(in oklab, var(--color-primary) 50%, transparent); border-radius: 6px; color: var(--color-primary); font-family: 'DM Mono', monospace; font-size: 10px; }.section-title h2 { margin: 0 0 1px; font-size: 14px; }.section-title p { margin: 0; color: color-mix(in oklab, var(--color-base-content) 57%, transparent); font-size: 11px; }
.analysis-layout { display: grid; grid-template-columns: minmax(250px, .7fr) minmax(0, 1.7fr); gap: 12px; }.reference-column, .frame-card-wrap, .material-box, .comparison-card, .frame-editor, .script-editor, .shots-card { border: 1px solid var(--color-base-300); border-radius: 7px; background: var(--color-base-100); }.reference-column > h3 { margin: 12px 12px 8px; font-size: 12px; }.source-file { display: flex; align-items: center; gap: 9px; margin: 0 11px 11px; padding: 8px; border: 1px solid var(--color-base-300); border-radius: 6px; }.source-file > div:nth-child(2) { min-width: 0; }.source-file strong, .source-file span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.source-file strong { font-size: 11px; }.source-file span { margin-top: 2px; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); font-size: 10px; }.source-file .btn { margin-left: auto; }.source-thumb { position: relative; display: grid; width: 66px; min-width: 66px; height: 44px; place-items: center; overflow: hidden; border-radius: 5px; background: var(--color-neutral); color: var(--color-neutral-content); }.source-thumb video { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: .54; }.source-thumb svg { z-index: 1; }.upload-source { display: grid; min-height: 122px; place-items: center; gap: 4px; margin: 0 11px 11px; padding: 15px; border: 1px dashed color-mix(in oklab, var(--color-primary) 56%, var(--color-base-300)); border-radius: 6px; background: color-mix(in oklab, var(--color-primary) 5%, var(--color-base-100)); color: var(--color-primary); text-align: center; cursor: pointer; }.upload-source strong { color: var(--color-base-content); font-size: 12px; }.upload-source span { color: color-mix(in oklab, var(--color-base-content) 55%, transparent); font-size: 10px; }.douyin-source-form { display: flex; align-items: center; gap: 8px; margin: 0 11px 11px; }.douyin-source-form .input { min-width: 0; flex: 1; }.douyin-source-form .btn { flex: 0 0 auto; }
.storyboard-import { margin: 0 11px 11px; border: 1px solid var(--color-base-300); border-radius: 6px; background: var(--color-base-200); }.storyboard-import summary { display: flex; align-items: center; gap: 6px; padding: 9px; color: var(--color-base-content); font-size: 11px; font-weight: 600; cursor: pointer; }.storyboard-import summary span { margin-left: auto; color: color-mix(in oklab, var(--color-base-content) 51%, transparent); font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 400; }.storyboard-import .textarea { width: calc(100% - 18px); margin: 0 9px 8px; resize: vertical; font-size: 10px; line-height: 1.45; }.storyboard-import > div { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 0 9px 9px; color: color-mix(in oklab, var(--color-base-content) 57%, transparent); font-size: 9px; }.storyboard-import > div span { min-width: 0; }.script-card { margin: 0 11px 11px; }.card-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; }.card-label h2, .card-label h3 { margin: 0; font-size: 12px; }.card-label > span { color: color-mix(in oklab, var(--color-base-content) 55%, transparent); font-size: 10px; }.script-row, .script-edit-row { display: grid; grid-template-columns: 58px 1fr; gap: 8px; padding: 8px 0; border-top: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent); }.script-row > span, .script-time { color: color-mix(in oklab, var(--color-base-content) 57%, transparent); font-family: 'DM Mono', monospace; font-size: 9px; }.script-row strong { font-size: 11px; }.script-row p { margin: 2px 0 0; color: color-mix(in oklab, var(--color-base-content) 64%, transparent); font-size: 10px; line-height: 1.45; }.muted-copy { padding: 12px; color: color-mix(in oklab, var(--color-base-content) 57%, transparent); font-size: 11px; }
.analysis-callout { display: flex; align-items: center; gap: 9px; min-height: 58px; margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--color-base-300); border-radius: 7px; background: var(--color-base-100); color: color-mix(in oklab, var(--color-base-content) 62%, transparent); }.analysis-callout.ready { border-color: color-mix(in oklab, var(--color-success) 50%, var(--color-base-300)); background: color-mix(in oklab, var(--color-success) 7%, var(--color-base-100)); color: var(--color-success); }.analysis-callout strong { display: block; color: var(--color-base-content); font-size: 12px; }.analysis-callout p { margin: 2px 0 0; color: color-mix(in oklab, var(--color-base-content) 57%, transparent); font-size: 10px; }
.frame-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; padding: 0 11px 11px; }.frame-item { position: relative; min-width: 0; }.frame-card { position: relative; display: block; width: 100%; min-width: 0; aspect-ratio: 1.1; overflow: hidden; border: 1px solid var(--color-base-300); border-radius: 5px; background: var(--color-base-200); }.frame-card:hover { border-color: color-mix(in oklab, var(--color-primary) 70%, var(--color-base-300)); }.frame-card.selected { border: 2px solid var(--color-primary); box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-primary) 35%, transparent); }.frame-card img { width: 100%; height: 100%; object-fit: cover; }.frame-index, .frame-time { position: absolute; padding: 2px 4px; border: 1px solid color-mix(in oklab, var(--color-base-content) 20%, transparent); border-radius: 3px; background: color-mix(in oklab, var(--color-base-100) 86%, transparent); color: var(--color-base-content); font-family: 'DM Mono', monospace; font-size: 9px; }.frame-index { top: 4px; left: 4px; }.frame-time { right: 4px; bottom: 4px; }.frame-check { position: absolute; top: 4px; right: 4px; display: grid; width: 17px; height: 17px; place-items: center; border-radius: 999px; background: var(--color-primary); color: var(--color-primary-content); }.frame-recapture { position: absolute; right: 4px; bottom: 4px; display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--color-base-300); border-radius: 4px; background: color-mix(in oklab, var(--color-base-100) 88%, transparent); color: var(--color-base-content); }.frame-recapture:hover { color: var(--color-primary); border-color: var(--color-primary); }.frame-placeholder { display: grid; min-height: 150px; place-items: center; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); font-size: 11px; }.frame-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 11px 11px; }.frame-actions span { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); font-size: 10px; }

.materials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.material-box { min-width: 0; padding-bottom: 10px; }.material-preview, .person-placeholder { display: grid; height: clamp(180px, 15vw, 240px); place-items: center; overflow: hidden; margin: 0 10px 8px; border-radius: 5px; background: var(--color-base-200); color: color-mix(in oklab, var(--color-base-content) 42%, transparent); }.material-preview img, .person-placeholder img { width: 100%; height: 100%; object-fit: contain; object-position: center; }.material-box .field-label, .material-box .input, .material-box .textarea { display: block; width: calc(100% - 20px); margin: 0 10px 5px; }.material-prompt { min-height: 68px; resize: vertical; font-size: 10px; line-height: 1.4; }.material-actions { display: flex; gap: 6px; margin: 2px 10px 0; }.materials-control { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-top: 10px; padding: 10px 0 0; border-top: 1px solid var(--color-base-300); }.materials-control > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }.materials-control .field-label { width: 100%; }.selling-point { width: min(330px, 100%); }.checkbox-line { display: inline-flex; align-items: center; gap: 6px; color: color-mix(in oklab, var(--color-base-content) 70%, transparent); font-size: 11px; }

.shot-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 9px; border: 1px solid var(--color-base-300); border-radius: 7px; }.shot-tab { position: relative; flex: 0 0 auto; width: 104px; border: 1px solid var(--color-base-300); border-radius: 6px; background: var(--color-base-200); }.shot-tab.active { border-color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 10%, var(--color-base-200)); box-shadow: inset 0 -2px var(--color-primary); }.shot-tab-main { display: grid; width: 100%; gap: 4px; padding: 4px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }.shot-tab-main img, .shot-tab-main .frame-empty { height: 52px; border-radius: 4px; object-fit: cover; }.shot-tab-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }.shot-tab-meta strong { font-size: 10px; }.shot-tab-meta small { color: color-mix(in oklab, var(--color-base-content) 52%, transparent); font-family: 'DM Mono', monospace; font-size: 9px; }.shot-tab.active .shot-tab-meta strong { color: var(--color-primary); }.shot-tab-toggle { position: absolute; top: 6px; right: 6px; display: grid; width: 16px; height: 16px; place-items: center; border: 0; border-radius: 4px; background: color-mix(in oklab, var(--color-base-100) 76%, transparent); color: color-mix(in oklab, var(--color-base-content) 40%, transparent); cursor: pointer; }.shot-tab-toggle:hover { color: var(--color-base-content); }.shot-tab-toggle.on { background: var(--color-primary); color: var(--color-primary-content); }.shot-tabs .card-hint { margin: 0; }.confirm-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(250px, .7fr); gap: 10px; margin-top: 10px; }.comparison-label { display: grid; grid-template-columns: 1fr 1fr; padding: 9px 11px 0; color: color-mix(in oklab, var(--color-base-content) 54%, transparent); font-size: 10px; }.comparison-label span:last-child { color: var(--color-primary); }.comparison-images { display: grid; grid-template-columns: 1fr 26px 1fr; align-items: center; gap: 7px; padding: 9px 11px; }.comparison-images figure { position: relative; aspect-ratio: 1.45; margin: 0; overflow: hidden; border-radius: 5px; background: var(--color-base-200); }.comparison-images img { width: 100%; height: 100%; object-fit: cover; }.comparison-images figcaption { position: absolute; top: 5px; left: 5px; padding: 2px 4px; border-radius: 3px; background: color-mix(in oklab, var(--color-neutral) 86%, transparent); color: var(--color-neutral-content); font-size: 9px; }.new-frame { outline: 1px solid var(--color-primary); outline-offset: -1px; }.compare-arrow { color: var(--color-primary); }.script-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 0 11px 11px; }.script-compare div { padding: 8px; border-radius: 5px; background: var(--color-base-200); }.script-compare div:last-child { background: color-mix(in oklab, var(--color-primary) 7%, var(--color-base-200)); }.script-compare span { color: color-mix(in oklab, var(--color-base-content) 54%, transparent); font-size: 9px; }.script-compare div:last-child span { color: var(--color-primary); }.script-compare p { margin: 3px 0 0; font-size: 10px; line-height: 1.45; }.frame-editor { padding: 12px; }.frame-editor h3 { margin: 0; font-size: 12px; }.frame-editor > p { margin: 3px 0 10px; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); font-size: 10px; }.editor-actions { display: flex; gap: 6px; margin: 9px 0; }.script-editor { margin-top: 10px; padding-bottom: 6px; }.script-editor .script-edit-row { margin: 0 11px; }.script-edit-row .input, .script-edit-row .textarea { min-height: 0; padding: 4px; font-size: 11px; }.script-edit-row .textarea { resize: vertical; }

.video-layout { display: grid; grid-template-columns: minmax(205px, .46fr) minmax(0, 1.54fr); gap: 11px; }.final-preview { position: relative; min-height: 290px; overflow: hidden; border: 1px solid var(--color-base-300); border-radius: 7px; background: var(--color-neutral); }.final-preview video { width: 100%; height: 100%; object-fit: cover; }.final-preview-placeholder { display: grid; height: 100%; place-items: center; align-content: center; gap: 7px; color: var(--color-neutral-content); font-size: 11px; }.preview-stamp { position: absolute; bottom: 8px; left: 8px; padding: 2px 5px; border-radius: 4px; background: color-mix(in oklab, var(--color-neutral) 80%, transparent); color: var(--color-neutral-content); font-size: 9px; }.video-controls { min-width: 0; }.settings-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 9px; }.settings-row label { display: grid; gap: 4px; color: color-mix(in oklab, var(--color-base-content) 68%, transparent); font-size: 10px; }.settings-row .select { width: 100%; }.shot-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; padding: 0 10px 10px; }.shot-list > div { position: relative; display: grid; min-width: 0; grid-template-columns: 32px 1fr; gap: 5px; align-items: center; padding: 5px; border: 1px solid var(--color-base-300); border-radius: 5px; }.shot-list img { width: 32px; height: 38px; border-radius: 3px; object-fit: cover; }.shot-list span { min-width: 0; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.shot-list small { display: block; margin-top: 2px; color: color-mix(in oklab, var(--color-base-content) 53%, transparent); font-size: 8px; }.shot-list svg { position: absolute; right: 3px; bottom: 3px; color: var(--color-success); }.generation-options { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; padding: 9px 10px; border: 1px solid color-mix(in oklab, var(--color-primary) 36%, var(--color-base-300)); border-radius: 6px; background: color-mix(in oklab, var(--color-primary) 7%, var(--color-base-200)); }.generation-options > div { display: flex; align-items: center; gap: 7px; color: var(--color-primary); }.generation-options strong, .generation-options small { display: block; }.generation-options strong { color: var(--color-base-content); font-size: 11px; }.generation-options small { color: color-mix(in oklab, var(--color-base-content) 55%, transparent); font-size: 9px; }.generate-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-top: 10px; }.generate-actions > span { margin-right: auto; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); font-size: 11px; }.generate-actions strong { color: var(--color-warning); }.provider-note { margin: 8px 0 0; color: color-mix(in oklab, var(--color-base-content) 48%, transparent); font-size: 9px; }

.job-panel { display: grid; gap: 6px; max-width: 1500px; margin: 0 auto 12px; }.job-line { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid color-mix(in oklab, var(--color-info) 44%, var(--color-base-300)); border-radius: 7px; background: color-mix(in oklab, var(--color-info) 8%, var(--color-base-200)); }.job-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--color-info); box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-info) 14%, transparent); animation: pulse 1.5s ease infinite; }.job-pulse.error { background: var(--color-error); box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-error) 14%, transparent); animation: none; }.job-line > div { display: flex; min-width: 0; flex: 1; align-items: baseline; gap: 7px; flex-wrap: wrap; }.job-line strong { font-size: 11px; }.job-line span, .job-line small { color: color-mix(in oklab, var(--color-base-content) 58%, transparent); font-size: 10px; }.job-line small { color: var(--color-error); }.toast-message { position: fixed; z-index: 100; right: 16px; bottom: 16px; width: min(360px, calc(100vw - 32px)); box-shadow: 0 16px 34px color-mix(in oklab, var(--color-neutral) 30%, transparent); animation: slide-in .24s ease-out; }

.library-card { overflow: hidden; border: 1px solid var(--color-base-300); border-radius: 8px; background: var(--color-base-200); }.library-video { height: 164px; background: var(--color-neutral); }.library-video video { width: 100%; height: 100%; object-fit: cover; }.library-card > div:not(.library-video) { padding: 10px 12px 0; }.library-card h3 { margin: 0; font-size: 13px; }.library-card p { margin: 3px 0 0; color: color-mix(in oklab, var(--color-base-content) 56%, transparent); font-size: 10px; }.library-card .card-actions { display: flex; justify-content: flex-end; gap: 7px; padding: 10px 12px; }.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; max-width: 1500px; margin: 0 auto 12px; }.admin-stats > div { padding: 13px; border: 1px solid var(--color-base-300); border-radius: 7px; background: var(--color-base-200); }.admin-stats span, .admin-stats strong { display: block; }.admin-stats span { color: color-mix(in oklab, var(--color-base-content) 56%, transparent); font-size: 10px; }.admin-stats strong { margin-top: 4px; font-family: 'DM Mono', monospace; font-size: 22px; }.admin-panel { max-width: 1500px; margin: 0 auto 11px; overflow: hidden; border: 1px solid var(--color-base-300); border-radius: 7px; background: var(--color-base-200); }.table-wrap { overflow-x: auto; }.table { font-size: 11px; }.table td small, .table td strong { display: block; }.table td small { margin-top: 2px; color: color-mix(in oklab, var(--color-base-content) 56%, transparent); font-size: 9px; }

.auth-page { display: grid; min-height: 100vh; grid-template-columns: minmax(310px, .72fr) minmax(440px, 1.28fr); background: var(--color-base-100); }.auth-panel { display: flex; min-height: 100%; flex-direction: column; padding: 32px clamp(26px, 4vw, 64px); border-right: 1px solid var(--color-base-300); background: var(--color-base-200); }.auth-copy { max-width: 430px; margin: auto 0; }.auth-copy h1 { max-width: 400px; margin: 0; font-size: 32px; line-height: 1.35; letter-spacing: 0; }.auth-copy p { margin: 14px 0; color: color-mix(in oklab, var(--color-base-content) 62%, transparent); font-size: 13px; line-height: 1.7; }.auth-steps { display: grid; gap: 8px; }.auth-steps span { display: inline-flex; align-items: center; gap: 7px; color: color-mix(in oklab, var(--color-base-content) 72%, transparent); font-size: 11px; }.auth-preview { display: flex; align-items: end; gap: 10px; }.preview-frame { position: relative; display: grid; width: 112px; height: 154px; place-items: center; overflow: hidden; border: 1px solid var(--color-base-300); border-radius: 7px; background: var(--color-neutral); }.preview-frame::after { position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in oklab, var(--color-neutral) 70%, transparent), transparent 60%); content: ''; }.preview-label { position: absolute; top: 7px; left: 7px; z-index: 1; padding: 2px 4px; border-radius: 3px; background: var(--color-base-100); color: var(--color-base-content); font-size: 9px; }.play-dot { z-index: 1; display: grid; width: 34px; height: 34px; place-items: center; border-radius: 999px; background: var(--color-primary); color: var(--color-primary-content); }.preview-notes { display: grid; gap: 6px; margin-bottom: 6px; }.preview-notes span { padding: 7px 9px; border: 1px solid var(--color-base-300); border-radius: 5px; color: color-mix(in oklab, var(--color-base-content) 62%, transparent); font-size: 10px; }.auth-form-wrap { display: grid; place-items: center; padding: 32px; }.auth-form { width: min(100%, 370px); }.auth-heading h2 { margin: 0; font-size: 23px; }.auth-heading p { margin: 7px 0 22px; color: color-mix(in oklab, var(--color-base-content) 58%, transparent); font-size: 12px; }.auth-switch { margin: 17px 0 0; color: color-mix(in oklab, var(--color-base-content) 58%, transparent); font-size: 11px; text-align: center; }
.startup-error { display: grid; min-height: 100vh; place-items: center; align-content: center; gap: 9px; padding: 24px; background: var(--color-base-100); color: var(--color-error); text-align: center; }.startup-error h1 { margin: 0; color: var(--color-base-content); font-size: 18px; }.startup-error p { max-width: 420px; margin: 0 0 5px; color: color-mix(in oklab, var(--color-base-content) 58%, transparent); font-size: 12px; }

@keyframes pulse { 50% { opacity: .44; transform: scale(.8); } }
@keyframes slide-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 960px) { .app-shell { grid-template-columns: 1fr; }.workspace-sidebar { position: static; display: block; width: 100%; height: auto; padding: 7px 14px; border-right: 0; border-bottom: 1px solid var(--color-base-300); }.workspace-sidebar nav { display: flex; overflow-x: auto; }.side-link { display: inline-flex; width: auto; height: 34px; align-items: center; gap: 7px; padding: 0 10px; font-size: 11px; white-space: nowrap; }.side-link::after { display: none !important; }.side-link.active { box-shadow: none; }.sidebar-foot { display: none; }.analysis-layout, .video-layout { grid-template-columns: 1fr; }.auth-page { grid-template-columns: 1fr; }.auth-panel { min-height: 310px; border-right: 0; border-bottom: 1px solid var(--color-base-300); }.auth-copy { margin: 38px 0; }.auth-preview { display: none; }.shot-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .app-topbar { padding: 0 12px; }.topbar-project, .user-name { display: none; }.app-main { padding: 17px 12px 38px; }.page-heading, .workspace-heading { margin-bottom: 13px; }.page-heading h1, .workspace-heading h1 { font-size: 18px; }.workspace-heading p { display: none; }.header-status span:last-child { display: none; }.workflow-steps .step { padding: 8px; }.workflow-steps small { display: none; }.workflow-steps strong { font-size: 10px; }.workflow-steps .step > span { width: 19px; min-width: 19px; height: 19px; }.workflow-section { padding: 12px; }.section-title { margin-bottom: 10px; }.analysis-layout, .confirm-layout { grid-template-columns: 1fr; }.materials-grid { grid-template-columns: 1fr; }.material-preview, .person-placeholder { height: min(54vw, 260px); min-height: 180px; }.materials-control, .generation-options, .generate-actions { align-items: stretch; flex-direction: column; }.materials-control > div { display: grid; }.materials-control .btn, .generate-actions .btn { width: 100%; }.frame-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.frame-actions { align-items: stretch; flex-direction: column; }.frame-actions .btn { width: 100%; }.frame-actions span { text-align: center; }.settings-row { grid-template-columns: 1fr; }.shot-list { grid-template-columns: repeat(2, 1fr); }.admin-stats { grid-template-columns: repeat(2, 1fr); }.comparison-images { grid-template-columns: 1fr 22px 1fr; padding: 8px; }.script-compare { grid-template-columns: 1fr; }.auth-panel { min-height: 290px; padding: 26px 24px; }.auth-copy { margin: 34px 0 20px; }.auth-copy h1 { font-size: 27px; }.auth-form-wrap { padding: 30px 24px; } }

.auth-page { grid-template-columns: minmax(0, 420px); align-content: center; justify-content: center; gap: 24px; padding: 32px 24px; }
.auth-panel { min-height: 0; padding: 0; border: 0; background: transparent; }
.auth-form-wrap { padding: 0; }
@media (max-width: 960px) { .auth-page { grid-template-columns: minmax(0, 420px); padding: 24px; }.auth-panel { min-height: 0; border: 0; } }
@media (max-width: 640px) { .auth-page { padding: 20px; }.auth-panel, .auth-form-wrap { padding: 0; } }

.card-hint { display: flex; align-items: center; gap: 6px; margin: 0 0 11px; padding: 9px 10px; border: 1px dashed color-mix(in oklab, var(--color-base-content) 22%, transparent); border-radius: 5px; color: color-mix(in oklab, var(--color-base-content) 50%, transparent); font-size: 11px; line-height: 1.5; }
.card-hint svg { flex: none; opacity: .7; }
.frame-editor .card-hint { margin: 0; }
.script-editor .card-hint { margin: 0 11px; }
.shots-card .card-hint { margin: 0 10px 10px; }
.placeholder-box { display: grid; height: 100%; min-height: 96px; place-content: center; justify-items: center; gap: 5px; border: 1px dashed color-mix(in oklab, var(--color-base-content) 22%, transparent); border-radius: 5px; background: color-mix(in oklab, var(--color-base-200) 60%, transparent); color: color-mix(in oklab, var(--color-base-content) 45%, transparent); font-size: 11px; text-align: center; }
.placeholder-box svg { opacity: .75; }
.frame-placeholder { margin: 0 11px 11px; }
.script-textbox { display: grid; gap: 3px; min-width: 0; }
.script-read { field-sizing: content; min-height: 0; padding: 5px 7px; font-size: 10px; line-height: 1.45; overflow: hidden; resize: none; }
.frame-empty { display: grid; width: 100%; height: 100%; place-items: center; background: color-mix(in oklab, var(--color-base-content) 6%, transparent); color: color-mix(in oklab, var(--color-base-content) 38%, transparent); }
.shot-list .frame-empty { width: 32px; height: 38px; border-radius: 3px; }
.script-row { width: 100%; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: start; border-right: 0; border-bottom: 0; border-left: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.script-row:hover, .script-row.selected { background: color-mix(in oklab, var(--color-primary) 7%, var(--color-base-100)); }
.script-row.selected { box-shadow: inset 2px 0 var(--color-primary); }
.script-row small { align-self: center; color: var(--color-primary); font-family: 'DM Mono', monospace; font-size: 9px; white-space: nowrap; }
.shot-script-preview { margin: 0 11px 11px; padding: 9px; border: 1px solid var(--color-base-300); border-radius: 5px; background: var(--color-base-200); }
.shot-script-preview span, .shot-script-preview strong { display: block; }
.shot-script-preview span { color: color-mix(in oklab, var(--color-base-content) 56%, transparent); font-size: 9px; }
.shot-script-preview strong { margin-top: 3px; font-size: 11px; }
.shot-script-preview p { margin: 4px 0 0; color: color-mix(in oklab, var(--color-base-content) 70%, transparent); font-size: 10px; line-height: 1.45; }
.frame-editor .card-label { padding: 0 0 9px; }
.frame-editor .field-label { display: block; margin: 10px 0 4px; }
.frame-editor .textarea { resize: vertical; }
.prompt-dialog { width: min(560px, calc(100vw - 32px)); }
.prompt-dialog h3 { margin: 0 0 12px; font-size: 16px; }
.prompt-dialog .textarea { resize: vertical; line-height: 1.55; }
.modal-error { margin: 0; color: var(--color-error); font-size: 11px; }
.modal-error:empty { display: none; }

/* 爆款广场 */
.hot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 10px; max-width: 1500px; margin: 0 auto; }
.hot-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--color-base-300); border-radius: 8px; background: var(--color-base-200); transition: border-color .16s ease, transform .16s ease; }
.hot-card:hover { border-color: color-mix(in oklab, var(--color-primary) 60%, var(--color-base-300)); transform: translateY(-1px); }
.hot-card-offline { opacity: .6; }
.hot-cover { position: relative; height: 196px; background: var(--color-neutral); }
.hot-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.hot-cover-empty { display: grid; height: 100%; place-content: center; justify-items: center; gap: 5px; color: color-mix(in oklab, var(--color-base-content) 45%, transparent); font-size: 11px; }
.hot-ribbon, .hot-duration, .hot-offline { position: absolute; display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 4px; font-size: 10px; }
.hot-ribbon { top: 9px; left: 9px; background: var(--color-primary); color: var(--color-primary-content); font-weight: 600; }
.hot-duration { right: 9px; bottom: 9px; background: color-mix(in oklab, var(--color-neutral) 82%, transparent); color: var(--color-neutral-content); font-family: 'DM Mono', monospace; }
.hot-offline { top: 9px; right: 9px; background: color-mix(in oklab, var(--color-base-content) 72%, transparent); color: var(--color-base-100); }
.hot-preview-trigger { position: absolute; inset: 0; display: grid; width: 44px; height: 44px; margin: auto; place-items: center; border: 0; border-radius: 999px; background: color-mix(in oklab, var(--color-base-100) 72%, transparent); color: var(--color-base-content); opacity: 0; transition: opacity .16s ease, background .16s ease; }
.hot-card:hover .hot-preview-trigger, .hot-preview-trigger:focus-visible { opacity: 1; background: var(--color-primary); color: var(--color-primary-content); }
.hot-body { display: grid; gap: 7px; align-content: start; padding: 12px; }
.hot-body h3 { margin: 0; font-size: 13px; line-height: 1.4; }
.hot-body p { display: -webkit-box; overflow: hidden; margin: 0; color: color-mix(in oklab, var(--color-base-content) 58%, transparent); font-size: 11px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.hot-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.hot-tag { padding: 2px 6px; border: 1px solid color-mix(in oklab, var(--color-base-content) 18%, transparent); border-radius: 4px; color: color-mix(in oklab, var(--color-base-content) 66%, transparent); font-size: 10px; }
.hot-meta { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 8px; border-top: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent); color: color-mix(in oklab, var(--color-base-content) 52%, transparent); font-size: 10px; }
.hot-meta span { display: inline-flex; align-items: center; gap: 4px; }
.hot-actions { display: flex; gap: 7px; }
.hot-filters { display: flex; flex-wrap: wrap; gap: 6px; max-width: 1500px; margin: 0 auto 12px; }
.hot-filter { padding: 5px 11px; border: 1px solid color-mix(in oklab, var(--color-base-content) 16%, transparent); border-radius: 999px; background: transparent; color: color-mix(in oklab, var(--color-base-content) 62%, transparent); font-size: 11px; }
.hot-filter:hover { border-color: color-mix(in oklab, var(--color-primary) 50%, transparent); color: var(--color-primary); }
.hot-filter.active { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-primary-content); }
.hot-preview-box { width: min(420px, 92vw); padding: 14px; }
.hot-preview-box video { width: 100%; max-height: 70vh; border-radius: 6px; background: var(--color-neutral); }
.hot-preview-box p { margin: 10px 0 0; font-size: 11px; }
.hot-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 9px; padding: 12px; border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent); }
.hot-form label { display: grid; gap: 4px; color: color-mix(in oklab, var(--color-base-content) 62%, transparent); font-size: 10px; }
.hot-form-wide { grid-column: 1 / -1; }
.hot-form .textarea { resize: vertical; }
.hot-form-actions { display: flex; grid-column: 1 / -1; align-items: center; justify-content: flex-end; gap: 9px; }
.hot-form-actions span { margin-right: auto; color: color-mix(in oklab, var(--color-base-content) 50%, transparent); font-size: 10px; }
.table-actions { display: flex; justify-content: flex-end; gap: 6px; }

.connector-layout { display: grid; max-width: 1500px; margin: 0 auto; grid-template-columns: minmax(0, 1fr) 288px; gap: 11px; align-items: start; }
.connector-main, .connector-side { display: grid; gap: 11px; min-width: 0; }
.connector-card { padding: 13px; border: 1px solid var(--color-base-300); border-radius: 7px; background: var(--color-base-200); }
.connector-card .card-label { padding: 0 0 10px; }
.copy-field { display: flex; align-items: center; gap: 7px; }
.copy-field .input { min-width: 0; flex: 1; font-family: 'DM Mono', monospace; font-size: 11.5px; }
.connector-hint { display: flex; align-items: flex-start; gap: 6px; margin: 9px 0 0; color: color-mix(in oklab, var(--color-base-content) 58%, transparent); font-size: 10.5px; line-height: 1.5; }
.connector-hint code { padding: 1px 4px; border-radius: 3px; background: var(--color-base-300); font-size: 10px; word-break: break-all; }
.connector-hint svg { flex: none; margin-top: 1px; }
.connector-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-base-300); }
.connector-foot .connector-hint { margin: 0; max-width: 62%; }
.connector-warning { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 10px; padding: 8px 10px; border: 1px solid color-mix(in oklab, var(--color-warning) 46%, transparent); border-radius: 5px; background: color-mix(in oklab, var(--color-warning) 12%, transparent); color: var(--color-warning); font-size: 10.5px; line-height: 1.5; }
.connector-warning svg { flex: none; }
.config-grid { display: grid; gap: 9px; }
.config-block { overflow: hidden; border: 1px solid var(--color-base-300); border-radius: 6px; background: var(--color-base-100); }
.config-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--color-base-300); }
.config-head strong, .config-head span { display: block; }
.config-head strong { font-size: 11.5px; }
.config-head span { margin-top: 2px; color: color-mix(in oklab, var(--color-base-content) 56%, transparent); font-size: 10px; }
.config-block pre { margin: 0; padding: 10px; overflow-x: auto; color: color-mix(in oklab, var(--color-base-content) 82%, transparent); font-family: 'DM Mono', monospace; font-size: 10.5px; line-height: 1.6; }
.tool-list { display: grid; margin: 0; padding: 0; list-style: none; }
.tool-list li { display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--color-base-300); }
.tool-list li:first-child { border-top: 0; padding-top: 0; }
.tool-list code { padding: 2px 5px; border-radius: 4px; background: var(--color-base-300); font-family: 'DM Mono', monospace; font-size: 10.5px; }
.tool-list strong { display: block; font-size: 11.5px; }
.tool-list p { margin: 3px 0 0; color: color-mix(in oklab, var(--color-base-content) 58%, transparent); font-size: 10.5px; line-height: 1.5; }
.channel-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--color-base-300); font-size: 11px; }
.channel-row:first-of-type { border-top: 0; }
.channel-row > span:first-child { min-width: 62px; color: color-mix(in oklab, var(--color-base-content) 58%, transparent); font-size: 10.5px; }
.channel-row strong { flex: 1; font-weight: 600; }
.connector-steps { display: grid; gap: 7px; margin: 0; padding-left: 17px; color: color-mix(in oklab, var(--color-base-content) 66%, transparent); font-size: 10.5px; line-height: 1.5; }
.connector-steps code { padding: 1px 4px; border-radius: 3px; background: var(--color-base-300); font-family: 'DM Mono', monospace; font-size: 10px; }
.side-link .side-emoji { font-size: 16px; line-height: 1; }
@media (max-width: 960px) { .connector-layout { grid-template-columns: 1fr; }.connector-side { order: -1; } }
@media (max-width: 640px) { .copy-field { flex-wrap: wrap; }.copy-field .input { width: 100%; flex: 1 1 100%; }.connector-foot { flex-direction: column; align-items: stretch; }.connector-foot .connector-hint { max-width: none; }.tool-list li { grid-template-columns: 1fr; } }
.connector-card .table td:nth-child(3) small { max-width: 430px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.materials-grid { align-items: start; }
.material-preview, .person-placeholder { display: grid; height: 132px; min-height: 132px; place-items: center; }
.material-preview img, .person-placeholder img { display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; object-position: center; }
@media (max-width: 640px) { .material-preview, .person-placeholder { height: 132px; min-height: 132px; } }

/* 原视频：视频 / 脚本 / 关键帧 三栏，脚本原文单独一栏完整展示 */
.analysis-layout { grid-template-columns: minmax(220px, .8fr) minmax(0, 1.3fr) minmax(0, 1.1fr); align-items: start; }
.script-column { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--color-base-300); border-radius: 7px; background: var(--color-base-100); }
.script-column > .card-label { padding-bottom: 4px; }
.card-label .label-actions { display: flex; align-items: center; gap: 6px; }
.card-label .label-actions > span { color: color-mix(in oklab, var(--color-base-content) 55%, transparent); font-size: 10px; }
.script-column .card-hint { margin: 0 11px 11px; }
.reference-column > .card-hint { margin: 0 11px 11px; }
.save-status[data-save-status] { white-space: nowrap; }
.script-raw { margin: 0 11px 11px; padding: 9px 10px; border: 1px solid var(--color-base-300); border-radius: 6px; background: var(--color-base-200); color: color-mix(in oklab, var(--color-base-content) 78%, transparent); font-family: inherit; font-size: 11px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 960px) { .analysis-layout { grid-template-columns: 1fr; } }

/* 逐帧核对时完整展示画面，避免裁切掩盖构图偏差。 */
.comparison-images img { object-fit: contain; }
.frame-editor { min-width: 0; }
.editor-actions { flex-wrap: wrap; }
.field-note { font-weight: normal; color: color-mix(in oklab, var(--color-base-content) 70%, transparent); }
.material-select { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0; }
.material-select .field-label { margin: 0; }
.frame-confirmed, .frame-review { position: absolute; left: 4px; bottom: 5px; padding: 2px 4px; border-radius: 3px; background: var(--color-base-100); font-size: 10px; }
.frame-confirmed { color: var(--color-success); }
.frame-review { color: var(--color-warning); }
.generation-references { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.generation-references figure { width: 110px; margin: 0; }
.generation-references img { width: 110px; height: 110px; object-fit: contain; background: var(--color-base-200); }
.generation-references figcaption { font-size: 12px; overflow-wrap: anywhere; margin-top: 4px; }
/* 成片输入：左栏放新关键帧，右栏完整展开待提交脚本，不再用固定行数截断。 */
.input-dialog { width: min(1080px, calc(100vw - 32px)); max-width: min(1080px, calc(100vw - 32px)); max-height: 88vh; }
.input-dialog .input-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
.input-dialog .input-frames, .input-dialog .input-script { min-width: 0; }
.input-dialog .input-frames { max-height: 68vh; overflow-y: auto; }
.input-dialog .card-label { padding: 0 0 8px; }
.input-dialog .input-frames .generation-references { margin: 0; }
.input-dialog .input-script { display: grid; align-content: start; gap: 8px; }
.input-dialog .input-script .modal-copy { max-width: none; margin: 0; }
.input-dialog .input-script .textarea { height: auto; max-height: none; overflow: hidden; resize: none; font-size: 11px; line-height: 1.6; }
.shot-list small[data-frame-status] { grid-column: 2; font-size: 10px; }
@media (max-width: 640px) { .frame-editor .textarea, .frame-editor .input { font-size: 16px; } }
@media (max-width: 960px) { .input-dialog .input-layout { grid-template-columns: 1fr; } .input-dialog .input-frames { max-height: 40vh; } }