:root{color-scheme:dark;--bg:#0e141b;--panel:#19232d;--line:#415366;--text:#edf3f8;--muted:#b0becb;--accent:#b2e0cb}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.55 system-ui,"Microsoft YaHei",sans-serif}
button,input,select{font:inherit}
button,.file-label{border:1px solid #6a8296;border-radius:7px;background:#263948;color:#f3f8fc;padding:9px 13px;cursor:pointer}
button:hover:not(:disabled){background:#355167;border-color:#bbd3e5}
.primary{background:var(--accent);color:#11291f;border-color:var(--accent);font-weight:650}
.primary:hover:not(:disabled){background:#c6efde;color:#11291f}
button:disabled{background:#202932;color:#758390;border-color:#39434e;cursor:not-allowed}
a{color:#c1e6d6;text-underline-offset:4px}
a:hover{color:white}
:focus-visible{outline:3px solid #f5cd7a;outline-offset:3px}
header{height:64px;position:sticky;top:0;z-index:10;background:#111a24;display:flex;align-items:center;gap:24px;padding:0 24px;border-bottom:1px solid var(--line)}
.brand{text-decoration:none;font-size:22px;font-weight:750;white-space:nowrap}
.brand span{font-size:15px}
nav{display:flex;gap:5px;align-self:stretch}
nav a{display:flex;align-items:center;padding:0 16px;text-decoration:none;color:#b9c8d6;border-bottom:3px solid transparent;white-space:nowrap}
nav a[aria-current=page]{color:#c2ebd9;background:#20302f;border-color:var(--accent)}
#connection{margin-left:auto;font-size:12px;color:var(--muted)}
.tools{position:relative;margin:0}
.tools[open]{background:var(--panel)}
.tools button,.tools p{width:200px}
.tools[open]{position:absolute;right:20px;top:15px;padding:10px;border:1px solid var(--line);z-index:20}
.tools summary{white-space:nowrap}
main{max-width:1760px;margin:auto;padding:24px}
[hidden]{display:none!important}
#view-make{display:grid;grid-template-columns:270px minmax(0,1fr);gap:24px}
.setup{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;align-self:start;max-height:calc(100vh - 112px);overflow:auto;overscroll-behavior:contain}
.setup>button{width:100%;margin:8px 0}
.setup h2{font-size:20px;margin:4px 0 18px}
h1{font-size:25px;line-height:1.3;margin:5px 0 16px;overflow-wrap:anywhere}
h2{font-size:19px}
h3{margin:0 0 14px}
.eyebrow{font-size:11px;letter-spacing:.14em;color:#b0d9c5;margin:0 0 6px}
.hint,.muted{color:var(--muted);font-size:12px}
.hint{line-height:1.65}
#drop-zone{border:1px dashed #88bba6;background:#1b302e;border-radius:9px;padding:16px;text-align:center}
#drop-zone.dragging{outline:3px solid var(--accent)}
#drop-zone button{width:100%}
#drop-zone p{margin:8px 0 0}
.selected-source{border-bottom:1px solid var(--line);padding:10px 0 16px;margin-bottom:12px}
#source-name{overflow-wrap:anywhere;margin:4px 0 10px}
.selected-source button{font-size:12px;padding:5px 9px}
#import-feedback:empty{display:none}
#import-feedback{color:#f7c685;overflow-wrap:anywhere}
label{display:block;margin:12px 0;color:#dbe6ee;font-size:13px}
input:not([type=checkbox]):not([type=range]):not([type=file]),select{width:100%;margin-top:5px;border:1px solid #62778c;background:#101a25;color:white;border-radius:6px;padding:8px}
input[type=file]{max-width:100%;margin-top:8px}
.file-label{display:block}
.check{display:flex;gap:8px;align-items:flex-start}
.two,.three{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.recipe-card{border-left:2px solid #86b39e;padding-left:12px}
.recipe-meta{display:flex;gap:14px;color:#b6d7c9;font-size:12px}
.recipe-card p{font-size:13px}
.recipe-story{margin:8px 0}
.recipe-story p{color:var(--muted)}
details{margin:12px 0}
summary{cursor:pointer;color:#dce8f1;padding:6px 0;font-size:13px}
.stage{min-width:0}
.stage-actions{display:flex;align-items:center;gap:12px;margin-bottom:12px}
#action-hint{font-size:12px;color:var(--muted)}
.stage-title{display:flex;justify-content:space-between;align-items:center;gap:10px}
.stage-title h1{font-size:20px;margin:0 0 12px}
.tag{border:1px solid #526b79;border-radius:20px;font-size:11px;padding:4px 10px;white-space:nowrap}
.viewport{position:relative;background:#080e15;border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;justify-content:center}
#scene{display:block;width:min(100%,calc((100vh - 425px)*16/9));height:auto;aspect-ratio:16/9;object-fit:contain;min-width:0}
#empty{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#8da5b6;pointer-events:none;font-size:18px}
.playbar{display:flex;align-items:center;gap:8px;margin:12px 0}
.playbar button{font-size:12px;padding:7px 10px;white-space:nowrap}
#seek{flex:1;min-width:60px;accent-color:var(--accent)}
#time{font-size:12px;white-space:nowrap}
.manual-view{margin:6px 0}
.moves{display:flex;gap:6px;flex-wrap:wrap}
.moves span{width:100%;color:var(--muted)}
#fps{float:right;color:var(--muted)}
#status{font-size:12px;color:#c3d1df;margin:8px 0;overflow-wrap:anywhere}
.result-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--line);background:var(--panel);padding:12px 16px;border-radius:9px}
.result-bar p{margin:3px 0 0}
.result-bar button{flex-shrink:0}
#links{display:flex;gap:18px;margin:8px 0}
#adaptation{border-top:1px solid var(--line)}
.report{display:flex;gap:20px;align-items:flex-start}
.report>div{min-width:0}
#route-info{white-space:pre-line;font-size:13px}
pre{max-height:320px;overflow:auto;background:#0b1118;padding:12px;font-size:12px}
#view-batch,#view-results,#view-guide{max-width:1260px;margin:auto}
#batch-panel{margin-top:24px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
table{width:100%;border-collapse:collapse;margin-top:20px;table-layout:fixed}
th,td{text-align:left;padding:16px 10px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
td{vertical-align:top;font-size:13px}
td button{margin-bottom:6px}
td a{margin-right:10px}
#queue-empty{padding:30px;border:1px dashed var(--line);margin-top:20px}
#history,#guide-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:24px}
.history-card,.guide-card{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:22px;min-width:0}
.history-card h2,.guide-card h2{overflow-wrap:anywhere}
.history-card a{display:inline-block;margin:10px 10px 0 0}
.guide-card.current{border-color:#93bea9}
.guide-card img{width:100%;aspect-ratio:16/9;object-fit:contain;background:#0b1118;border-radius:6px}
.guide-card button{margin:6px 8px 0 0}
.guide-card .badge{color:#b8e1ce;font-size:12px}
.guide-card p{color:#c3ced8}
.guide-card .hint{font-size:12px}
.history-card .actions{margin-top:12px}
#drawer{position:fixed;inset:0 0 0 auto;margin:0;height:100dvh;max-height:100dvh;width:440px;max-width:95vw;background:var(--panel);border:0;border-left:1px solid var(--line);color:var(--text);padding:0 24px 24px;overflow:auto;overscroll-behavior:contain}
dialog::backdrop{background:#0008}
.drawer-head{position:sticky;top:0;background:var(--panel);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;z-index:2;border-bottom:1px solid var(--line)}
.drawer-head h2{margin:0}
#settings section{padding:22px 0;border-bottom:1px solid var(--line)}
#settings button{margin:6px 4px 6px 0}
#video-dialog{width:1000px;max-width:92vw;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text)}
#sample-video{width:100%;max-height:65vh;background:#000}
#notice{position:fixed;top:70px;left:50%;transform:translateX(-50%);max-width:90vw;background:#483b21;color:#ffdf9d;border:1px solid #b29255;border-radius:8px;padding:12px 20px;z-index:40}
#task-bar{position:fixed;bottom:0;left:0;right:0;z-index:30;background:#253a32;border-top:1px solid #94c1aa;padding:10px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px}
body.running{padding-bottom:65px}
@media(min-width:1600px){#view-make{grid-template-columns:300px minmax(0,1fr)}
#scene{width:min(100%,calc((100vh - 425px)*16/9))}
}
@media(max-width:1000px){header{padding:0 12px;gap:8px}
nav a{padding:0 10px}
.brand span,#connection{display:none}
#view-make{grid-template-columns:220px minmax(0,1fr);gap:16px}
main{padding:16px}
.setup{padding:12px}
.playbar{flex-wrap:wrap}
.playbar #seek{flex-basis:45%}
.report{flex-wrap:wrap}
.result-bar{align-items:flex-start;flex-direction:column}
#scene{width:100%}
#history,#guide-cards{grid-template-columns:1fr}
}
@media(max-width:650px){header{height:auto;min-height:92px;flex-wrap:wrap;padding:10px}
.brand{font-size:18px}
nav{order:3;width:100%;justify-content:space-between}
nav a{padding:8px 7px;font-size:12px}
.tools{margin-left:auto}
#view-make{display:flex;flex-direction:column}
.setup{max-height:none;width:100%}
.stage-actions{position:sticky;top:94px;background:var(--bg);padding:8px 0;z-index:5}
.stage-title h1{font-size:17px}
#scene{width:100%}
#task-bar{font-size:12px}
th,td{padding:8px 4px;font-size:11px}
td button{padding:6px;font-size:11px}
}


#empty{background:#0d121a}


.has-source .setup>h2{display:none}
.has-source #drop-zone{padding:10px}
.has-source #drop-zone p{font-size:11px;margin-top:5px}
.has-source .selected-source{padding-bottom:10px;margin-bottom:8px}

/* Compact catalogue: details stay collapsed until requested; adding recipes adds rows. */
#guide-cards{display:flex;flex-direction:column;gap:12px}
#guide-cards .guide-card{position:relative;padding:0 160px 0 20px}
.guide-details{margin:0}.guide-details>summary{display:flex;align-items:center;gap:18px;padding:17px 0;list-style:none}.guide-details>summary::-webkit-details-marker{display:none}
.guide-heading{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;min-width:0;flex:1}.guide-heading strong{font-size:17px}.guide-purpose{flex-basis:100%;color:var(--muted);font-size:12px}.guide-expand{font-size:12px;color:#c2e5d4;white-space:nowrap}.guide-expand:before{content:'＋ ';}.guide-details[open] .guide-expand:before{content:'− ';}
#guide-cards .guide-apply{position:absolute;right:20px;top:21px;margin:0}
.guide-body{display:grid;grid-template-columns:minmax(180px,320px) minmax(0,1fr);gap:20px;padding:6px 0 22px}.guide-body p:first-child{margin-top:0}.guide-body img{align-self:start}
@media(max-width:750px){#guide-cards .guide-card{padding:0 16px 60px}.guide-details>summary{align-items:flex-start}.guide-expand{margin-top:4px}#guide-cards .guide-apply{top:auto;bottom:14px;right:16px}.guide-body{grid-template-columns:1fr}.guide-heading .badge{flex-basis:100%}}

/* Keep preview and actions visible while choreography stays collapsible. */
.batch-entry-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin:20px 0 28px}
.batch-entry-actions a{display:inline-flex;align-items:center;min-height:42px;line-height:1.5}
#guide-cards .guide-card{display:grid;grid-template-columns:140px minmax(0,1fr) auto;align-items:start;gap:20px;padding:12px 20px}
#guide-cards .guide-apply{position:static;align-self:center;margin:0;white-space:nowrap}
.guide-preview{min-width:0}.guide-preview .sample-preview{display:block;width:100%;padding:0;margin:0;overflow:hidden;border-radius:8px;text-align:center}
.guide-preview img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:0}
.guide-preview span{display:block;padding:7px;font-size:12px}
.guide-details>summary{padding:9px 0}.guide-body{display:block;padding:6px 0 0}.guide-body p{line-height:1.65}
#links{flex-wrap:wrap}.stage-title{gap:12px;flex-wrap:wrap}
@media(max-width:750px){#guide-cards .guide-card{grid-template-columns:120px minmax(0,1fr);padding:14px;gap:12px}#guide-cards .guide-apply{grid-column:2;justify-self:start}.guide-details>summary{flex-wrap:wrap;gap:8px}.guide-preview span{font-size:11px}.batch-entry-actions{align-items:flex-start;flex-direction:column;gap:8px}}

#queue-count{display:inline-flex;width:auto;padding:4px 10px;margin:0 0 14px}

#batch-panel th:first-child{width:40%}#batch-panel th:nth-child(2){width:23%}#batch-panel th:nth-child(3){width:22%}#batch-panel th:last-child{width:15%}
.queue-scene strong{display:block;font-weight:500;margin-bottom:12px}.queue-video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#080e15;border:1px solid var(--line);border-radius:8px}
.queue-settings{margin:0}.queue-settings summary{padding:4px 0;color:#c2e5d4;cursor:pointer}.queue-settings dl{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;line-height:1.5;font-size:12px}.queue-settings dt{color:var(--muted)}.queue-settings dd{margin:0}
.queue-output-links{display:flex;gap:10px 16px;flex-wrap:wrap;margin-top:14px}.queue-output-links a{margin:0}
@media(max-width:750px){#batch-panel thead{display:none}#queue tr{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px 0;border-bottom:1px solid var(--line)}#queue td{border:0;padding:5px;font-size:13px}#queue td:first-child{grid-column:1/-1}#queue td:last-child{grid-column:1/-1}}

/* Task groups and compact, guide-sized video previews. */
.task-manager{padding:20px;border:1px solid var(--line);border-radius:12px;margin:24px 0}
.task-toolbar{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.task-toolbar label{display:grid;gap:8px;min-width:180px}.task-toolbar button{margin:0}
.task-list{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}.task-list button{display:grid;gap:8px;text-align:left;margin:0;min-width:190px}.task-list span{font-size:12px;color:var(--muted)}.task-list [aria-pressed=true]{border-color:var(--accent);background:#203b35}
.queue-preview{width:140px;max-width:100%}.queue-video{width:140px;max-width:100%;border-radius:8px 8px 0 0}.queue-preview button{display:block;width:100%;margin:0;padding:7px;font-size:12px;border-radius:0 0 8px 8px}
@media(max-width:750px){.task-toolbar{align-items:stretch}.task-toolbar label{width:100%}.queue-preview,.queue-video{width:120px}}

/* Compact task chooser; task details have room to align below the fixed navigation. */
.task-manager{padding:14px 18px;margin:20px 0}
.task-manager-heading{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.task-manager-heading h2{font-size:16px;margin:0 auto 0 0}.task-manager-heading button{margin:0}
#task-options{margin:0}#task-options>summary{padding:8px;cursor:pointer;color:var(--muted)}
#task-options[open]{flex-basis:100%}#task-options .task-toolbar{padding:12px 0}
#task-options label{margin:0}#task-options button{align-self:end}
.task-list{gap:8px;margin:12px 0 8px}.task-list button{min-width:170px;padding:10px 14px;gap:5px}
#task-save-status{margin:8px 0 0;font-size:12px}
#batch-panel{min-height:calc(100vh - 90px);padding-bottom:30vh;margin-top:28px}
#batch-panel>.stage-title{justify-content:flex-start;gap:14px;margin-bottom:16px}
#task-heading{margin:0;font-size:26px}#task-heading:focus{outline:none}
#batch-panel #queue-count{margin:0}#batch-panel .batch-entry-actions{margin:0 0 16px;gap:10px 18px}
@media(max-width:750px){.task-manager{padding:12px}.task-manager-heading{gap:8px}.task-list button{min-width:145px;flex:1}#task-heading{font-size:23px}#batch-panel{min-height:calc(100vh - 100px)}}

/* Destructive list actions remain secondary; native dialog handles keyboard focus. */
button.danger{color:#ffb9b1;border-color:#885550;background:transparent}
.scene-actions{margin:8px 0 0}.scene-actions summary{cursor:pointer;color:var(--muted);font-size:12px}.scene-actions button{margin-top:8px}
.removal-undo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px;margin-top:12px;border:1px solid var(--accent);border-radius:8px}.removal-undo[hidden]{display:none}.removal-undo small{flex-basis:100%;color:var(--muted)}
#remove-dialog{max-width:min(520px,calc(100vw - 48px));overflow-wrap:anywhere}#remove-dialog p{line-height:1.7}

.integration-panel{margin:24px 0;padding:18px;border:1px solid #334155;border-radius:12px;max-width:1000px}.integration-panel>summary{cursor:pointer}.integration-panel li{margin:12px 0;line-height:1.6}.integration-panel textarea{width:100%;box-sizing:border-box;white-space:pre-wrap}.integration-download{display:inline-flex;align-items:center;padding:10px 14px}.integration-panel .actions{gap:12px;flex-wrap:wrap}

#guide-cards .guide-integration-actions{display:flex;flex-direction:column;align-self:center;align-items:stretch;gap:8px}#guide-cards .guide-integration-jump{margin:0;font-size:13px;background:transparent;color:var(--muted);white-space:nowrap}@media(max-width:750px){#guide-cards .guide-integration-actions{grid-column:2;justify-self:start;flex-direction:row;flex-wrap:wrap}}