:root{font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ff-text);background:var(--ff-bg);font-size:13px}
*{box-sizing:border-box}html{scrollbar-gutter:stable}body{margin:0}body.editing{overflow:hidden}button{font:inherit;font-size:var(--ff-text-button);font-weight:600;cursor:pointer;border:1px solid var(--ff-border);border-radius:var(--ff-radius-control);background:var(--ff-surface);color:var(--ff-text);padding:10px 13px;transition:background .15s}button:hover{background:var(--ff-hover)}button:focus-visible,input:focus-visible,[role=slider]:focus-visible{outline:3px solid var(--ff-focus);outline-offset:2px}button:disabled{opacity:.45;cursor:default}.quiet{height:var(--ff-control-h);padding:0 12px;background:transparent}.primary{background:var(--ff-accent);color:var(--ff-on-accent);border-color:var(--ff-accent-edge)}.primary:hover{background:var(--ff-accent-hover)}
header{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--ff-header);border-bottom:1px solid var(--ff-divider);position:sticky;top:0;z-index:10}.header-actions{display:flex;align-items:center;gap:8px;min-width:0}#settings,#finish-batch{margin-left:auto;flex:none}main{padding:16px 16px 96px;max-width:760px;margin:auto}h1{font-size:var(--ff-text-xl);font-weight:600;margin:0}h2{font-size:var(--ff-text-lg);font-weight:600;margin:0}p{line-height:1.7}.hint{color:var(--ff-subtle);font-size:var(--ff-text-sm)}
#preview-stage{position:relative;overflow-anchor:none}.preview-wrap{position:relative;background:var(--ff-preview);border:1px solid var(--ff-border);border-radius:var(--ff-radius-card);box-shadow:0 3px 12px #0000000a}.preview-wrap img{width:100%;height:auto;display:block;border-radius:calc(var(--ff-radius-control) - 1px)}#preview-parts{position:absolute;inset:0}.preview-region{position:absolute;left:0;width:100%;pointer-events:none}.preview-part{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;background:transparent;padding:0;min-height:1px;pointer-events:auto}.preview-part:hover,.preview-part.highlighted,.preview-part:focus-visible{background:var(--ff-selection);box-shadow:inset 0 0 0 2px var(--ff-crop);outline:0}.preview-part:disabled{opacity:1;cursor:default}.preview-part:disabled:hover{background:transparent;box-shadow:none}#part-hint{position:absolute;left:32px;transform:translateY(-50%);white-space:nowrap;max-width:calc(100% - 40px);padding:2px 8px;border-radius:var(--ff-radius-sm);background:var(--ff-toast);color:var(--ff-overlay-text);font-size:var(--ff-text-sm);pointer-events:none;z-index:2}.delete-part,.move-part{position:absolute;top:50%;transform:translateY(-50%);width:22px;height:22px;padding:0;border:1px solid transparent;border-radius:var(--ff-radius-sm);display:grid;place-items:center;background:var(--ff-surface);box-shadow:0 1px 4px #0003;opacity:0;pointer-events:none;z-index:3}.delete-part{right:4px;color:var(--ff-danger);border-color:var(--ff-danger-border)}.move-part{left:4px;color:var(--ff-muted);cursor:grab;touch-action:none}.delete-part svg,.move-part svg{display:block;width:14px;height:14px;pointer-events:none}.preview-region:hover :is(.delete-part,.move-part):not(:disabled),.preview-region:focus-within :is(.delete-part,.move-part):not(:disabled){opacity:1;pointer-events:auto}.delete-part:hover,.delete-part:focus-visible{background:var(--ff-danger-bg)}.move-part:hover,.move-part:focus-visible{background:var(--ff-hover);color:var(--ff-text)}.delete-part:disabled,.move-part:disabled{opacity:0;pointer-events:none;cursor:wait}
#batch-preview{border:1px solid var(--ff-border);border-radius:var(--ff-radius-card);overflow:hidden;background:var(--ff-preview)}.batch-row{position:relative;overflow:hidden;min-height:28px}.batch-row img{position:absolute;left:0;width:100%;height:auto;pointer-events:none}.batch-row.selected{box-shadow:inset 0 0 0 2px var(--ff-crop)}.batch-row.selected:after{content:"";position:absolute;inset:0;background:var(--ff-selection);pointer-events:none}.round-check{appearance:none;width:22px;height:22px;border:1.5px solid var(--ff-subtle);border-radius:50%;background:var(--ff-surface);display:inline-grid;place-content:center;margin:0;cursor:pointer;flex:none}.round-check:checked,.round-check:indeterminate{background:var(--ff-accent);border-color:var(--ff-accent-edge)}.round-check:checked:after{content:"";width:9px;height:5px;border:solid var(--ff-knob);border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}.round-check:indeterminate:after{content:"";width:10px;height:2px;background:var(--ff-knob)}.round-check:disabled{opacity:.5;cursor:default}.batch-row .round-check{position:absolute;left:5px;top:50%;transform:translateY(-50%);z-index:2;box-shadow:0 1px 4px #0003}.batch-selection{display:flex;align-items:center;gap:8px;min-width:0}.batch-hit{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;padding:0;background:transparent;z-index:1}.batch-hit:hover{background:var(--ff-selection)}.batch-hit:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--ff-crop)}.batch-hit:disabled{cursor:default;opacity:1}.batch-hit:disabled:hover{background:transparent}.batch-selection .round-check{width:18px;height:18px}.batch-selection .check-label{font-size:var(--ff-text-button);gap:4px;white-space:nowrap}#batch{flex:none;white-space:nowrap}.check-label{display:flex;align-items:center;gap:6px;cursor:pointer}#selection-count{white-space:nowrap;font-size:var(--ff-text-sm);color:var(--ff-muted)}.actions{gap:8px}.actions button{height:var(--ff-control-h);padding:0 8px;white-space:nowrap}.danger{color:var(--ff-danger);border-color:var(--ff-danger-border)}.danger:hover{background:var(--ff-danger-bg)}#editor-nav{display:flex;align-items:center;gap:2px;flex:none;font-size:var(--ff-text-sm);color:var(--ff-muted)}#editor-nav button{width:32px;height:32px;padding:0;border:0;display:grid;place-items:center;background:transparent}#editor-nav button:hover:not(:disabled){background:var(--ff-hover)}#editor-nav button:disabled{opacity:.35}#reference-label{min-width:28px;text-align:center;font-variant-numeric:tabular-nums}.editor-actions{gap:8px}
#editor{width:calc(100% - 24px);max-width:600px;max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--ff-border);border-radius:var(--ff-radius-dialog);background:var(--ff-surface);color:var(--ff-text);box-shadow:var(--ff-shadow)}#editor[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}#editor::backdrop{background:var(--ff-backdrop)}.editor-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--ff-divider)}.editor-body{padding:0 16px 8px;overflow:auto;min-height:0}.editor-actions{display:flex;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--ff-divider)}.editor-actions button{min-width:88px;height:var(--ff-control-h);padding:0 12px}#crop-stage{position:relative;margin:12px auto 0;width:100%;touch-action:none;user-select:none}#original{width:100%;height:auto;display:block}#shade-top,#shade-bottom{position:absolute;background:var(--ff-shade);pointer-events:none}#shade-top{top:0}#shade-bottom{bottom:0}#shade-left,#shade-right{position:absolute;top:0;bottom:0;background:var(--ff-shade);pointer-events:none}#shade-left{left:0}#shade-right{right:0}.side-edge{position:absolute;top:0;bottom:0;width:16px;margin-left:-8px;pointer-events:none}.side-edge:before{content:"";position:absolute;top:0;bottom:0;left:7px;border-left:2px dashed var(--ff-crop)}.side-edge:has(.side-grab:hover):before,.side-edge.dragging:before{border-left-style:solid}.side-edge:focus-visible{outline:2px solid var(--ff-focus);border-radius:var(--ff-radius-sm)}.side-grab{position:absolute;left:0;width:100%;pointer-events:auto;cursor:ew-resize;touch-action:none}.side-grab[hidden]{display:none}#crop-stage.side-flash .side-edge:before{animation:side-flash .9s ease-in-out 2}@keyframes side-flash{50%{border-left-color:var(--ff-overlay-text);filter:drop-shadow(0 0 4px var(--ff-crop))}}#crop-box{position:absolute;left:0;right:0;border:2px solid var(--ff-crop);box-shadow:0 0 0 1px var(--ff-shade);pointer-events:none}#crop-handle,#crop-bottom-handle{position:absolute;width:68px;height:22px;pointer-events:auto;cursor:ns-resize;touch-action:none}#crop-handle{left:calc(25% - 34px);top:-11px}#crop-bottom-handle{left:calc(75% - 34px);bottom:-11px}#crop-handle:focus-visible,#crop-bottom-handle:focus-visible{outline:2px solid var(--ff-focus);border-radius:var(--ff-radius-card)}#crop-handle span,#crop-bottom-handle span{display:block;position:absolute;top:8px;left:calc(50% - 24px);width:48px;height:6px;box-sizing:content-box;border:1px solid #281b0b;border-radius:3px;background:var(--ff-crop);box-shadow:0 1px 5px #0006}
#settings-dialog{width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:var(--ff-bg);color:var(--ff-text)}#settings-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}#settings-dialog::backdrop{background:transparent}.settings-head{display:flex;align-items:center;gap:6px;min-height:61px;padding:12px 16px 12px 8px;border-bottom:1px solid var(--ff-divider);background:var(--ff-header)}.settings-head h2{font-size:var(--ff-text-lg)}#close-settings{width:36px;height:36px;padding:0;display:grid;place-items:center;border:0;background:transparent}#close-settings:hover{background:var(--ff-hover)}#close-settings svg{display:block}.settings-body{display:flex;flex-direction:column;padding:18px 16px 16px;overflow:auto;min-height:0}.settings-body>.settings-version{margin-top:auto}
footer{position:fixed;bottom:0;left:0;right:0;background:var(--ff-footer);border-top:1px solid var(--ff-divider);padding:8px 16px 16px;z-index:11;backdrop-filter:blur(8px)}.actions{display:flex;gap:8px}.actions button{flex:1;min-width:0;font-weight:600}.batch-actions{gap:8px}.batch-actions button{padding:0 4px}.empty-icon{font-size:42px;color:var(--ff-accent-text);margin-bottom:22px}[hidden]{display:none!important}

.toast{position:fixed;inset:auto auto 76px 50%;transform:translateX(-50%);margin:0;width:max-content;max-width:calc(100vw - 24px);padding:8px 12px;border:0;border-radius:var(--ff-radius-control);background:var(--ff-panel-toast);color:var(--ff-overlay-text);font-size:var(--ff-text-sm);line-height:1.6;box-shadow:var(--ff-panel-toast-shadow);pointer-events:none;overflow-wrap:anywhere;z-index:100}.toast.error{background:var(--ff-panel-toast-error)}.toast.busy{display:flex;align-items:center;gap:8px}.toast.busy:before{content:"";flex:none;width:10px;height:10px;border:2px solid #ffffff47;border-top-color:currentColor;border-radius:50%;animation:toast-spin .8s linear infinite}@keyframes toast-spin{to{transform:rotate(1turn)}}@media(prefers-reduced-motion:reduce){.toast.busy:before{animation:none}}#retry-preview{margin:4px 0 12px}#size{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 12px}#size.over{color:var(--ff-danger)}

#batch-delete{flex:0 0 40px;display:grid;place-items:center;padding:8px}#batch-delete svg{display:block;pointer-events:none}

.header-actions{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;align-items:center;gap:8px;width:100%}
.header-icon{position:relative;width:36px;height:36px;padding:7px;display:grid;place-items:center}
.header-icon svg,.capture-button svg{display:block;width:20px;height:20px;pointer-events:none}
#batch{grid-column:1}#settings{grid-column:3;margin-left:0}
.capture-button{grid-column:2;justify-self:center;display:flex;align-items:center;justify-content:center;gap:8px;min-width:128px;height:var(--ff-control-h);padding:0 16px;white-space:nowrap}
.capture-button.recording{border:2px solid var(--ff-accent);background:var(--ff-surface);color:var(--ff-text)}
.capture-button.recording:not(:disabled):hover{background:var(--ff-hover)}
.capture-button.recording svg{color:var(--ff-accent)}
.count-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;display:grid;place-items:center;border-radius:var(--ff-radius-control);background:var(--ff-badge);color:var(--ff-on-badge);font-size:10px;line-height:1;font-weight:600;pointer-events:none}
.round-check{width:18px;height:18px}
/* Empty state: two cards. Capture shows a player whose subtitles stack into a long image;
   import shows two photos. On hover each plays once in .7s. */
#empty:not([hidden]){display:flex;flex-direction:column;gap:12px;height:calc(100dvh - 61px - 16px - 56px)}
body.empty-page #capture{visibility:hidden}body.empty-page main{padding-bottom:0}
body.dropping main{outline:2px dashed var(--ff-accent-edge);outline-offset:-8px;border-radius:var(--ff-radius-card)}
.empty-card{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:16px;border-radius:20px;font-size:17px;font-weight:700;overflow:hidden}
.capture-card{border:1.5px solid var(--ff-accent);background:var(--ff-card-capture)}.capture-card:not(:disabled):hover{background:var(--ff-card-capture)}
.import-card{border:1.5px dashed var(--ff-card-import-edge);background:var(--ff-card-import)}.import-card:not(:disabled):hover{background:var(--ff-card-import)}
.player{display:flex;flex-direction:column;width:176px;flex:none;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1.5px var(--ff-player-edge)}
.player-screen{position:relative;height:92px;display:grid;place-items:center;background:var(--ff-player)}
.player-play{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ff-accent);transition:background-color .2s}
.player-play svg{display:block;width:24px;height:24px;fill:var(--ff-player)}
.player-play svg,.player-collage{transition:opacity .2s,transform .2s}
.player-collage{position:absolute;left:50%;top:50%;width:32px;height:32px;margin:-16px 0 0 -16px;color:var(--ff-player-text);opacity:0;transform:scale(.6)}.player-collage svg{display:block;width:100%;height:100%}
.player-line{height:20px;display:grid;place-items:center;background:var(--ff-player-line)}.player-line+.player-line{background:var(--ff-player-line-2)}
.player-line span{width:100px;height:5px;border-radius:3px;background:var(--ff-player-text)}.player-line+.player-line span{width:72px}
.capture-card:not(:disabled):hover .player-play{background-color:transparent}
.capture-card:not(:disabled):hover .player-play svg{opacity:0;transform:scale(.6)}
.capture-card:not(:disabled):hover .player-collage{opacity:1;transform:none}
.capture-card:not(:disabled):hover .player-line{animation:line-in .2s ease-out .25s both}
.capture-card:not(:disabled):hover .player-line+.player-line{animation-delay:.5s}
@keyframes line-in{from{opacity:0;transform:translateY(-6px)}}
.photos{position:relative;width:176px;height:132px;flex:none}
.photo{position:absolute;width:112px;height:84px;border-radius:10px;border:1.5px solid var(--ff-photo-edge);background:var(--ff-photo)}
.photo:first-child{left:22px;top:8px;border-color:var(--ff-border);background:var(--ff-photo-back);transform:rotate(-8deg)}
.photo+.photo{left:44px;top:20px;display:grid;place-items:center;color:var(--ff-photo-edge);transform:rotate(5deg)}.photo svg{display:block;width:56px;height:28px}
.photo-badge{position:absolute;left:76px;bottom:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ff-badge);color:var(--ff-on-badge)}.photo-badge svg{display:block;width:14px;height:14px;stroke-width:3}
.import-card:not(:disabled):hover .photo:first-child{animation:gather-back .7s cubic-bezier(.4,0,.2,1)}
.import-card:not(:disabled):hover .photo+.photo{animation:gather-front .7s cubic-bezier(.4,0,.2,1)}
.import-card:not(:disabled):hover .photo-badge{animation:badge-pop .7s cubic-bezier(.4,0,.2,1)}
@keyframes gather-back{40%{transform:translate(11px,6px) rotate(-1deg)}}
@keyframes gather-front{40%{transform:translate(-11px,-6px) rotate(1deg)}}
@keyframes badge-pop{40%{transform:scale(.85)}75%{transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){.empty-card *{animation:none!important;transition:none!important}}
/* 重新采集 clears the screenshots: hovering or focusing it says so every time. */
.header-actions{position:relative}#capture{position:relative}
.capture-warning{position:absolute;visibility:hidden;opacity:0;transition:opacity .1s,visibility 0s .1s;top:calc(100% + 10px);left:50%;transform:translateX(-50%);padding:6px 10px;border-radius:var(--ff-radius-sm);background:var(--ff-panel-toast);color:var(--ff-overlay-text);font-size:var(--ff-text-sm);font-weight:400;line-height:1.5;white-space:nowrap;box-shadow:var(--ff-panel-toast-shadow);pointer-events:none;z-index:12}
.capture-warning:before{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;background:inherit;transform:rotate(45deg)}
.capture-button.warn:is(:hover,:focus-visible)~.capture-warning{visibility:visible;opacity:1;transition:opacity .1s}
@media (prefers-reduced-motion:reduce){.capture-warning{transition:none!important}}
.empty-local{position:fixed;left:0;right:0;bottom:18px;margin:0;display:flex;align-items:center;justify-content:center;gap:6px;font-size:var(--ff-text-sm);color:var(--ff-subtle)}.empty-local svg{flex:none}
.editor-head h2{min-width:0;overflow-wrap:anywhere}
.toast.has-action{display:flex;align-items:center;gap:12px;padding:4px 4px 4px 12px;pointer-events:auto}.toast-action{flex:none;height:var(--ff-control-h-sm);padding:0 12px;border:0;border-radius:var(--ff-radius-sm);background:var(--ff-on-toast);color:var(--ff-overlay-accent);font-size:var(--ff-text-sm)}.toast-action:hover{background:var(--ff-on-toast-hover)}
.batch-row.batch-cover{margin-bottom:6px}#batch-preview.height-scope .batch-cover:before{content:"";position:absolute;inset:0;background:var(--ff-bg);opacity:.72;z-index:1;pointer-events:none}.batch-row.range-preview:before{content:"";position:absolute;inset:1px;background:var(--ff-selection);outline:1.5px dashed var(--ff-accent-edge);outline-offset:-2px;z-index:1;pointer-events:none}@media(prefers-reduced-motion:no-preference){.batch-row:before{transition:opacity .12s}}

.next-slot{margin-top:8px;padding:8px 12px;border:1.5px dashed var(--ff-switch);border-radius:var(--ff-radius-control);text-align:center;color:var(--ff-muted);font-size:var(--ff-text-sm);line-height:1.5}
#continue-capture{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:40px;padding:0;background:transparent;font-weight:400}#continue-capture:not(:disabled):hover{border-color:var(--ff-accent-edge);color:var(--ff-text);background:var(--ff-hover)}#continue-capture svg{display:block;width:18px;height:18px;pointer-events:none}
.preview-region.just-moved .preview-part{background:var(--ff-selection);box-shadow:inset 0 0 0 2px var(--ff-crop)}
#drag-ghost{position:absolute;left:0;width:100%;min-height:24px;background-repeat:no-repeat;border-radius:var(--ff-radius-xs);box-shadow:0 10px 24px #00000047,0 0 0 2px var(--ff-crop);pointer-events:none;z-index:6}
body.reordering,body.reordering *{cursor:grabbing!important}body.reordering .preview-part{background:transparent!important;box-shadow:none!important}
#batch:disabled{opacity:1}#batch:disabled #batch-icon{opacity:.45}
body.reordering :is(.delete-part,.move-part,#part-hint){opacity:0!important}
#normal-preview.reordering #preview,#normal-preview.reordering #preview-parts{visibility:hidden}#reorder-stage{position:absolute;inset:0;overflow:hidden;border-radius:calc(var(--ff-radius-control) - 1px);background:var(--ff-preview);pointer-events:none;z-index:4}.reorder-strip{position:absolute;left:0;width:100%;background-repeat:no-repeat}.reorder-slot{background:var(--ff-selection);outline:1.5px dashed var(--ff-accent-edge);outline-offset:-2px}@media(prefers-reduced-motion:no-preference){.reorder-strip{transition:transform .16s ease}}