/* 全宽剪辑工作台。列宽、舞台高度和区域主题在这里改；事件轨道与二级面板见 timeline.css。 */
:root {
  color-scheme: dark;
  --page: #111417; --surface: #1c2025; --well: #15191d;
  --line: #363d43; --text: #edf1ee; --muted: #a7b1b9;
  --mint: #a9e5c3; --amber: #edbf86; --mono: "IBM Plex Mono", Consolas, monospace;
  font-family: Inter, "Microsoft YaHei UI", "PingFang SC", sans-serif;
  background: var(--page); color: var(--text);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body, h1, h2, h3, p { margin: 0; }
body { min-width: 0; }
button, input, select { font: inherit; }
button, summary, select { cursor: pointer; }
button { color: inherit; -webkit-tap-highlight-color: transparent; }
button:disabled { opacity: .6; cursor: default; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.icon-bank { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-icon { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.brand, .top-actions, .dock-head, .dock-head h2, .ghost, .steps, .transport, .stage-options, .battle-readout, .battle-status, .metrics, .editor-actions, .editor-head { display: flex; align-items: center; }
.topbar { display: grid; grid-template-columns: minmax(max-content,1fr) auto minmax(max-content,1fr); align-items: center; min-height: 54px; padding: 7px clamp(12px,1.5vw,36px); gap: 14px; background: #191d20; border-bottom: 2px solid #0d1012; }
.top-actions { justify-self: end; white-space: nowrap; }
.record-actions { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.brand { gap: 11px; }
.seal { width: 30px; height: 30px; flex: none; shape-rendering: crispEdges; }
h1 { font-size: 18px; font-weight: 700; letter-spacing: .09em; white-space: nowrap; }
.brand-en { margin-left: 1px; padding-left: 14px; border-left: 1px solid #434c50; color: #98a6ac; font: 600 10px/1.6 var(--mono); letter-spacing: .16em; }
.top-actions, .steps, .editor-actions { gap: 6px; }
.ghost { justify-content: center; gap: 6px; min-height: 30px; padding: 4px 10px; border: 1px solid #434b51; border-radius: 4px; background: #282e33; color: #d9e1de; font-size: 12px; line-height: 1.35; }
.ghost .ui-icon { width: 14px; height: 14px; }
.ghost:hover { border-color: #78877f; background: #333c3c; }
.ghost.primary { color: #102b1c; background: var(--mint); font-weight: 650; border-color: var(--mint); }
.ghost.primary:hover { background: #c4f2d6; }
/* 按钮只分四级：实心主色（.primary）> 色调常用入口（.tonal）> 普通（.ghost）> 红字描边危险入口（.ghost.danger）。
   强调色只有薄荷主色与红色两种，颜色留给舞台上的角色与特效。 */
.ghost.tonal { background: #1f2f28; border-color: #43665a; color: #c9eed8; font-weight: 650; }
.ghost.tonal:enabled:hover { background: #27403a; border-color: var(--mint); color: #e3f8ea; }
.ghost.danger { min-height: 30px; padding: 4px 10px; background: transparent; border-color: #74433c; color: #ef9f91; font-weight: 600; }
.ghost.danger:enabled:hover { background: #3a201d; border-color: #e0786a; color: #ffc4b8; }
.workbench { display: grid; align-items: stretch; background: #0e1113; }
.dock { min-width: 0; background: var(--surface); }
.dock-head { min-height: 43px; padding: 7px clamp(12px,1vw,20px); gap: 9px; background: #252a2f; border-bottom: 1px solid var(--line); }
.dock-head h2 { gap: 8px; margin: 0; font-size: 13px; font-weight: 650; letter-spacing: .045em; line-height: 1.4; white-space: nowrap; }
.dock-head h2 .ui-icon { color: #b3c0bc; }
.library { grid-area: library; }
.rack { grid-area: rack; }
.stage-shell { grid-area: monitor; }
.settings { grid-area: timeline; min-height: 0; }

.library-body, .rack-body { min-height: 0; overflow: clip; }
.appearance summary::-webkit-details-marker { display: none; }
.library-list { display: grid; gap: 1px; padding: 0 6px 5px; }
.library-list button { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 27px; padding: 4px 8px 4px 29px; border: 1px solid transparent; border-radius: 3px; background: transparent; text-align: left; color: #b9c4c7; font-size: 12px; }
.library-list button:hover { background: #2b3339; color: #eef2ed; }
.library-list button[aria-pressed=true] { background: #2b3b35; color: #c3eed2; border-color: #476652; }
.library-list button small { color: #8d9ba3; font: 10px var(--mono); }
#template-list button::after { content: "+"; color: var(--amber); font: 15px/1 var(--mono); }
.monitor-head { justify-content: space-between; }
.stage-options { flex-wrap: wrap; gap: 4px 12px; color: #bdc8cc; font-size: 11px; }
.stage-options label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
.stage-options input[type=checkbox] { width: 13px; height: 13px; margin: 0; accent-color: var(--mint); }
.appearance { position: relative; }
.appearance summary { list-style: none; }
.appearance summary::after { content: "⌄"; margin-left: 3px; }
.swatches { position: absolute; z-index: 3; right: 0; top: 23px; min-width: 115px; display: grid; gap: 6px; padding: 10px; background: #22282d; border: 1px solid #566067; border-radius: 4px; box-shadow: 0 4px 14px #0006; }
.swatches input { width: 27px; height: 22px; padding: 0; border: 0; background: transparent; }
#arena { position: relative; isolation: isolate; flex: 1; min-height: 0; overflow: hidden; background: #242e37; }
#arena-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#graphics-message:not([hidden]) { position: absolute; inset: 0; display: grid; place-content: center; padding: 14px; background: #25302c; text-align: center; }
/* 舞台铭牌：拳手标签、陪练血条、连击读数与对局血条共用同一块暗色底，只用一条侧边色区分归属。 */
.scene-name, .target-hud, #combo-readout, .duel-life, #duel-time { background: #0b1113c7; border-radius: 3px; color: #dbe5dc; }
.scene-name, .target-hud { position: absolute; top: clamp(8px,1.1vw,18px); padding: 5px 10px 6px; font-size: 11px; letter-spacing: .06em; }
.scene-name { left: clamp(8px,1.1vw,18px); display: flex; align-items: center; gap: 6px; box-shadow: inset 2px 0 0 #61edd2; }
.scene-name i, .battle-status i { display: block; width: 5px; height: 5px; background: var(--mint); }
.target-hud { right: clamp(8px,1.1vw,18px); width: clamp(150px,26%,320px); box-shadow: inset -2px 0 0 #ff9664; }
.hp-caption { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.hp-caption > span:last-child { color: #a9a39b; font: 10px var(--mono); } .hp-caption b { color: #fff1df; font-size: 11px; }
/* 血条两层读同一个 --hp：生命段几乎立即缩短，残血段停留约 0.35 秒后追上，让每一击的伤害量可见。 */
.hp-bar { position: relative; height: 8px; margin-top: 5px; overflow: hidden; border-radius: 1px; background: #2b2320; box-shadow: inset 0 0 0 1px #00000070; }
.hp-bar > b, .hp-bar > i { position: absolute; inset: 0 auto 0 0; width: var(--hp,100%); }
.hp-bar > b { background: #fff0cf; transition: width .45s cubic-bezier(.3,.7,.2,1) .35s; }
.hp-bar > i { background: linear-gradient(#ffc495 0 40%, #e98f5a 40%); transition: width .06s; }
.battle-readout, .transport { justify-content: space-between; gap: 8px; min-height: 31px; padding: 5px clamp(10px,1.1vw,22px); border-top: 1px solid var(--line); font-size: 11px; }
.battle-readout { background: #1a1f24; }
.transport { min-height: 40px; }
.battle-status, .metrics { gap: 6px; }
.battle-status i { border-radius: 50%; }
.stage-shell:has([data-phase=windup]) .battle-status i, .stage-shell:has([data-phase=defeated]) .battle-status i { background: var(--amber); }
#cancel-state { font-size: 10px; color: var(--mint); }
.metrics { flex-wrap: wrap; column-gap: 12px; color: var(--muted); }
.metrics b, .metrics output { color: #e0e5df; font: 600 11px var(--mono); }
.steps button { touch-action: none; user-select: none; }
.steps button[aria-disabled=true] { opacity: .6; }
kbd { display: inline-block; min-width: 17px; padding: 2px 3px; text-align: center; border: 1px solid #535e61; border-bottom-width: 2px; border-radius: 3px; background: #21282b; color: #cddecf; font: 10px/1 var(--mono); }
.training-target { display: flex; align-items: center; gap: 5px; margin: 10px 0; font-size: 13px; }
.training-target input { accent-color: var(--mint); }
#attack-inputs { display: flex; flex-wrap: wrap; gap: 5px; }
#attack-inputs button { touch-action: manipulation; }
#attack-inputs button[data-window] { border-color: var(--mint); color: var(--mint); }
.transport { flex-wrap: wrap; }
#combo-readout { position:absolute; left:clamp(8px,1.1vw,18px); top:calc(clamp(8px,1.1vw,18px) + 32px); padding:4px 9px; box-shadow:inset 2px 0 0 var(--amber); font:600 12px/1.4 var(--mono); color:#f4d5a6; }
#edit-combos { margin-left:auto; padding:3px 6px; white-space:nowrap; }
.rack .dock-head { flex-wrap:wrap; gap:4px; }
.rack-switch { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px; padding:4px 7px; border-bottom:1px solid var(--line); }
.rack-switch .tab-strip button { padding:3px 9px; }
#fighter-slot,#battle-mode,#guard-motion { color:var(--text); background:#263337; border:1px solid #506568; border-radius:3px; padding:4px; font-size:12px; max-width:100%; }
#battle-mode { margin-right:auto; }
#guard-motion { flex:1; min-width:0; }
.monitor-head { flex-wrap:wrap; gap:4px 8px; }
#recovery-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(88px,100%),1fr)); align-content:start; gap:5px; overflow:auto; }
#recovery-list button { display:grid; min-width:0; overflow-wrap:anywhere; text-align:left; padding:5px 7px; gap:3px; }
#recovery-list button[aria-pressed=true] { background:#304239; border-color:#739b83; }
#recovery-list small { color:var(--muted); }
#recovery-workspace { --axis-label:80px; --clip-dim:var(--muted); flex:1; min-height:0; display:grid; grid-template-columns:2fr 1fr; padding:8px; gap:12px; overflow:auto; }
.recovery-fields,.recovery-ruler { display:flex; align-items:center; justify-content:space-between; padding:6px 10px; font-size:12px; }
.recovery-fields input { width:58px; }
.recovery-sheet .ruler-name { white-space:nowrap; }
.recovery-lane { position:relative; min-height:38px; background:repeating-linear-gradient(90deg,#20282d 0 calc(10% - 1px),#39444b calc(10% - 1px) 10%); }
#recovery-marker { position:absolute; top:7px; left:var(--point); padding:2px 6px; border:1px solid #8ec6df; border-left-width:3px; border-radius:3px; background:#293d47; color:#c1e7fa; font-size:12px; white-space:nowrap; }
#recovery-marker.late { transform:translateX(-100%); border-width:1px 3px 1px 1px; }
#recovery-point { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; touch-action:none; }
.recovery-lane:focus-within { outline:2px solid var(--amber); outline-offset:-2px; }
#recovery-canvas { background:var(--well); width:100%; height:100%; min-height:0; image-rendering:pixelated; }
/* 对局血条与训练血条同款；B 方镜像，两条都从中间计时器一侧向外缩短。 */
#duel-hud { position:absolute; inset:clamp(8px,1.1vw,18px) clamp(8px,1.1vw,18px) auto; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:clamp(4px,1vw,12px); font:600 12px var(--mono); }
.duel-life { display:flex; align-items:center; gap:7px; padding:6px 9px; box-shadow:inset 2px 0 0 #61edd2; }
.duel-life:last-child { box-shadow:inset -2px 0 0 #ff9664; }
.duel-life .hp-bar { flex:1; min-width:30px; margin:0; }
.duel-life:first-child .hp-bar > i { background:linear-gradient(#9ff6e2 0 40%, #4fd2b6 40%); }
.duel-life:last-child .hp-bar { transform:scaleX(-1); }
.duel-life output { min-width:2.2em; text-align:center; color:#fff1df; }
#duel-time { padding:4px 10px; min-width:2.6em; text-align:center; font-size:16px; color:#fff1df; }
#stage-dock[data-duel] :is(.target-hud,.scene-name,#combo-readout,.metrics,#invincible),
#stage-dock[data-duel] label:has(#invincible) { display:none; }
@media(max-width:600px) {
  #recovery-workspace { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(72px,1fr); gap:6px; }
  #duel-hud { gap:3px; }
}
/* 左侧键位与右侧招式库各自滚动，拖放时同时看得到来源与落点。 */
#combo-editor { width:min(960px,calc(100vw - 16px)); max-width:none; max-height:calc(100dvh - 16px); padding:0; overflow:hidden; border:1px solid #52665a; border-radius:6px; background:var(--surface); color:var(--text); box-shadow:0 16px 60px #0007; }
#combo-editor[open] { display:flex; flex-direction:column; }
#combo-editor::backdrop { background:#0b1015b8; }
#combo-editor .dock-head { justify-content:space-between; padding:9px 14px; }
#combo-editor .dock-head h2 { font-size:15px; }
.combo-workspace { min-height:0; display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); }
.combo-workspace section { display:flex; flex-direction:column; min-width:0; min-height:0; gap:10px; padding:16px; }
.combo-workspace h3 { font-size:13px; }
.combo-catalog { border-left:1px solid var(--line); background:var(--well); }
#combo-lanes, #combo-library { display:grid; align-content:start; gap:7px; overflow-y:auto; overscroll-behavior:contain; }
#combo-lanes { grid-auto-rows:max-content; }
#combo-editor button:not(.combo-choice) { touch-action:manipulation; }
.combo-lane { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:10px; padding:10px; min-height:60px; border:1px solid var(--line); border-radius:4px; background:#191e22; }
.combo-lane:has(.combo-key[aria-pressed=true]) { border-color:#5a816b; background:#202c27; }
.combo-lane[data-drop] { border-color:var(--mint); background:#2c3e33; }
.combo-key { width:34px; height:34px; padding:0; border:1px solid #56635f; border-bottom-width:3px; border-radius:4px; color:#c8d3cd; background:#2a3234; font:700 16px var(--mono); }
.combo-key[aria-pressed=true] { background:var(--mint); border-color:#73ad8e; color:#153023; }
.combo-chain { min-width:0; }
.combo-chain ol { display:flex; flex-wrap:wrap; align-items:center; list-style:none; gap:6px; margin:0; padding:0; }
.combo-chain li { position:relative; min-width:0; max-width:100%; }
.combo-step { display:block; max-width:100%; min-height:32px; padding:4px 8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:#2a3035; border:1px solid #465152; border-radius:3px; font-size:13px; }
.combo-step::before { content:counter(list-item); margin-right:5px; color:var(--muted); font:10px var(--mono); }
.combo-step:hover, .combo-choice:hover { border-color:#82988b; }
.combo-step[aria-pressed=true] { background:#384a3f; border-color:var(--mint); }
.combo-chain li[data-insert]::after { content:""; position:absolute; inset:0 auto 0 -4px; width:3px; border-radius:2px; background:var(--mint); }
.combo-chain li[data-insert=after]::after { left:calc(100% + 1px); }
.combo-single, #combo-edit-status, #combo-hint { font-size:12px; color:var(--muted); }
.combo-single, #combo-edit-status { overflow-wrap:anywhere; }
.combo-tools, .combo-tools [role=group] { display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
.combo-tools { justify-content:space-between; margin-top:auto; padding-top:7px; border-top:1px solid var(--line); }
.combo-tools button { padding-inline:8px; }
.combo-tools [data-order=remove]:enabled { color:#efb8a8; }
#combo-hint { margin-top:-4px; }
#combo-library { grid-template-columns:repeat(auto-fill,minmax(min(96px,100%),1fr)); gap:5px; }
.combo-choice { position:relative; min-height:52px; border:1px solid #414c50; border-radius:4px; background:#252c31; cursor:grab; user-select:none; touch-action:pan-y; }
.combo-grip { position:absolute; right:0; bottom:0; width:26px; height:26px; touch-action:none; }
.combo-grip::after { content:""; position:absolute; right:8px; bottom:7px; width:8px; height:12px; background:radial-gradient(circle at 2px 2px,#91a09b 1px,transparent 1.5px) 0 0 / 4px 4px; }
.combo-choice[data-dragging] { opacity:.55; cursor:grabbing; }
#combo-drag-label { position:fixed; top:0; left:0; z-index:1; pointer-events:none; max-width:min(18em,80vw); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:5px 9px; border:1px solid var(--mint); border-radius:3px; background:#263d30; color:#e1f8e8; font-size:13px; }
.capture-tools { position:absolute; right:8px; bottom:7px; display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; max-width:calc(100% - 16px); gap:4px; }
.capture-tools .ghost { background:#172124eb; min-height:28px; padding:3px 8px; text-decoration:none; }
#record-stage i { width:7px; height:7px; border-radius:50%; background:#f38e7e; }
#record-stage[data-recording] i { border-radius:1px; }
#record-stage[data-recording] { color:#ffd4bc; border-color:#ab7261; font-variant-numeric:tabular-nums; }
#capture-status:not(:empty) { padding:3px 5px; background:#172124eb; color:var(--text); font-size:11px; }
.rack-body { padding: 9px; }
.moves { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(96px,100%),1fr)); gap:5px; }
.move-row { position:relative; display:flex; min-width:0; overflow:hidden; border:1px solid #3a4348; border-radius:4px; background:#22282d; }
.move-row:has(.move-select[aria-pressed=true]) { background: #2a3832; border-color: #739b83; box-shadow: inset 2px 0 0 var(--mint); }
.move-select, .move-trigger { border: 0; background: transparent; }
.move-select { flex:1; }
.move-summary { display:grid; align-content:center; gap:3px; min-width:0; padding:5px 8px; text-align:left; }
.move-summary b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.move-summary small { font:11px var(--mono); color:var(--muted); }
.move-select:hover, .move-trigger:hover { background: #ffffff0b; }
.move-select:focus-visible,.move-trigger:focus-visible { outline-offset: -2px; }
.move-trigger { position:absolute; right:0; bottom:0; display:grid; place-content:center; width:27px; height:25px; padding:0; color:var(--mint); }
.move-trigger .ui-icon { width: 14px; height: 14px; }
.rack-settings { display: grid; gap: 6px; margin-top: 15px; padding-block: 12px; border-top: 1px solid var(--line); }
.rack-settings label, .kind { font-size: 11px; color: var(--muted); }
#arranged-name, #character-editor input, #resource-name { min-width: 0; border: 1px solid #495158; border-radius: 3px; color: var(--text); background: #181d21; padding: 5px 7px; font-size: 12px; }
#remove-move { justify-self: start; color: #f4b5a7; }
.sequence-head { min-height: 47px; }
.sequence-divider { width: 1px; height: 16px; background: #495356; margin-inline: 3px; }
#move-title { font-size: 15px; color: var(--mint); }
.sequence-head .editor-actions { margin-left: auto; }
#move-editor, #timeline { min-width: 0; }
.field-hint:not(:empty) { padding: 6px 10px; font-size: 12px; line-height: 1.5; color: var(--amber); }
#asset-editor { margin: 8px 7px; padding: 9px; border: 1px solid #3f474d; border-radius: 4px; background: var(--well); }
.editor-head { justify-content: space-between; gap: 8px; } .editor-head h2, .editor-head h3 { margin-top: 3px; font-size: 15px; }
#asset-preview { display: block; width: 100%; height: 120px; margin-block: 8px; border-radius: 2px; background: #253038; }
.asset-transport { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.asset-transport input[type=range] { flex: 1; min-width: 64px; width: 60px; accent-color: var(--mint); }
#asset-clock, #sound-length { font: 10px var(--mono); color: var(--muted); }
#apply-asset { width: 100%; margin-top: 8px; }
#sound-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-block: 8px; }
#character-popover { position: fixed; inset: 52px 12px auto auto; width: min(295px,calc(100vw - 24px)); margin: 0; padding: 15px; background: #252c31; color: var(--text); border: 1px solid #56636a; border-radius: 4px; box-shadow: 0 8px 24px #0008; }
.speed-field { display: flex; align-items: center; gap: 8px; margin-top: 15px; font-size: 12px; }
#character-editor input { width: 70px; }
.target-size { border: 0; border-top: 1px solid var(--line); margin: 15px 0 5px; padding: 5px 0 0; }
.target-size legend { padding-right: 8px; font-size: 12px; color: var(--text); }
.target-size .speed-field { margin-top: 6px; }
#reset-target-box { margin-top: 6px; }
.dock-add { flex: none; min-height: 29px; border: 0; border-top: 1px solid var(--line); background: #252c2d; color: #a9d5bd; font: 19px/1 var(--mono); }
.dock-add:hover, .dock-add:focus-visible { background: #31403a; color: #e3f8e8; }
#resource-create-dialog { width: min(270px,calc(100vw - 24px)); margin: auto; padding: 15px; border: 1px solid #53615c; border-radius: 4px; background: var(--surface); color: var(--text); }
#resource-create-dialog::backdrop { background: #0b101399; }
#resource-create-form { display: grid; gap: 9px; }
#resource-create-title { font-size: 15px; }
#resource-create-source, #resource-create-form label { color: var(--muted); font-size: 12px; }
#resource-create-form label { display: flex; align-items: center; gap: 8px; }
#resource-name { flex: 1; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 6px; }
.save-dialog { width: min(410px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; margin: auto; padding: 20px; color: var(--text); background: var(--surface); border: 1px solid #54625e; border-radius: 6px; box-shadow: 0 12px 42px #0007; }
.save-dialog::backdrop { background: #090d10aa; }
.save-dialog header, .save-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.save-dialog h2 { font-size: 18px; }
.save-dialog section { display: grid; gap: 7px; margin-block: 16px; }
.save-dialog label { font-size: 13px; font-weight: 650; }
.save-dialog textarea { box-sizing: border-box; width: 100%; resize: vertical; min-height: 44px; padding: 8px; font: 12px/1.5 var(--mono); color: var(--text); background: var(--well); border: 1px solid var(--line); border-radius: 4px; }
.save-dialog textarea[readonly] { color: #b4d8c5; }
.save-dialog small, #local-save-status, #reset-detail { color: var(--muted); font-size: 12px; }
#local-save-status { margin-top: 6px; }
#reset-detail { margin: 12px 0 20px; line-height: 1.6; }
#share-feedback:not(:empty) { margin-bottom: 12px; color: var(--amber); font-size: 12px; overflow-wrap: anywhere; }
.danger { min-height: 40px; padding: 8px 16px; border: 1px solid #ed665b; border-radius: 4px; background: #b83232; color: white; font-weight: 700; }
.danger:hover { background: #c73c39; }
#reset-project { margin-inline-start: 6px; }
#save-warning { flex: none; padding: 4px 12px; background: #493624; color: #ffdfa8; font-size: 12px; overflow-wrap: anywhere; }
/* 中等宽度先收起英文副标，给顶栏的完整操作名称让出空间。 */
@media (max-width: 1000px) { .brand-en, .top-actions .ui-icon { display: none; } }
/* 工作台四区固定；尺寸变量由 layout.js 钳制。小窗切页沿用相同节点与输入状态。 */
html, body { width: 100%; height: 100%; overflow: clip; }
body { display: flex; flex-direction: column; height: 100dvh; }
.topbar, .dock-head, .transport, .battle-readout { flex: none; }
.workbench { --left: 224px; --right: 244px; --upper: 48%; --handle: 7px; flex: 1; min-height: 0; }
.dock { overflow: clip; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.dock-head { min-height: 35px; padding: 5px 12px; }
.library-body, .rack-body, .library-catalog, .library-group { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.library-body, .rack-body { overflow: clip; }
.library-group { border: 0; }
.library-catalog { padding: 8px 6px 1px; gap: 5px; container: catalog / inline-size; }
#resource-group { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); flex: none; }
#resource-group button { min-height: 28px; padding-inline: 2px; white-space: nowrap; }
@container catalog (min-width: 242px) { #resource-group { grid-template-columns: repeat(4,minmax(0,1fr)); } }
.library-list, .moves { flex: 1; min-height: 0; align-content: start; overflow: clip; }
.library-list { padding: 0; grid-auto-rows: 30px; }
.moves { grid-auto-rows: 50px; }
.library-list button { min-width: 0; min-height: 30px; padding: 4px 7px; }
.library-list button small { flex-shrink: 0; }
.library-list button span, #asset-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#asset-editor .editor-head > div { min-width: 0; }
#back-assets { margin-left: auto; min-height: 25px; padding: 2px 7px; font-size: 11px; }
.library:not([data-detail]) #asset-editor, .library[data-detail] .library-catalog { display: none !important; }
.library[data-dual][data-detail] .library-catalog { display: flex !important; }
.library[data-dual][data-detail] #asset-editor { flex: 0 0 clamp(205px,35%,290px); }
#asset-editor { flex: 1; min-height: 0; margin: 5px; display: flex; flex-direction: column; gap: 4px; padding: 6px; }
#asset-editor .editor-head, #asset-editor button, #sound-preview { flex: none; }
#visual-preview { display: flex; flex: 1; flex-direction: column; min-height: 0; gap: 4px; }
#asset-preview { height: 0; flex: 1; min-height: 0; margin: 0; }
.asset-transport { flex: none; }
.asset-actions { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(88px,100%),1fr)); gap: 3px; margin-top: 2px; }
.rack-body { padding: 6px; }
.rack-settings { flex: none; margin-top: 3px; padding-block: 5px; gap: 3px; }
.field-hint:empty { display: none; }
#rack-feedback { flex: none; }
#arranged-name { width: 100%; }
#move-editor { flex: 1; min-height: 0; display: flex; }
#timeline { flex: 1; }
#move-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.settings { padding-bottom: 0; }
.tab-strip, .panel-tabs { display: flex; align-items: center; gap: 3px; }
.tab-strip button, .panel-tabs button, .page-nav button {
  min-width: 0; border-radius: 3px; border: 1px solid #454e51; background: #242b2d; color: #b1bdb7;
  font-size: 11px; padding: 4px 7px; min-height: 25px;
}
.tab-strip button[aria-pressed=true], .panel-tabs button[aria-pressed=true] { color: #d1f2db; border-color: #5b806b; background: #304239; }
.library .tab-strip { margin-block: 1px 4px; }
#sequence-tabs, .panel-tabs { display: none; }
.page-nav { display: flex; justify-content: flex-end; align-items: center; gap: 5px; flex: none; min-height: 26px; padding: 1px 0; }
.page-nav[data-single] { visibility: hidden; }
.page-nav button { min-width: 27px; min-height: 22px; padding: 1px 6px; font-size: 14px; line-height: 1; }
.page-nav output { color: var(--muted); font: 11px var(--mono); }
.page-out { display: none !important; }
.splitter { position: relative; z-index: 4; background: #111618; cursor: col-resize; touch-action: none; user-select: none; }
.splitter::after { content: ""; position: absolute; inset: calc(50% - 16px) 2px; background: #577367; border-radius: 4px; }
.splitter:hover, .splitter:focus-visible, .splitter[data-drag] { background: #426452; outline-offset: -2px; }
.split-left { grid-area: left; } .split-right { grid-area: right; }
.split-height { grid-area: height; cursor: row-resize; }
.split-height::after { inset: 2px calc(50% - 18px); }
@media (min-width: 821px) and (min-height: 621px) {
  .workbench { grid-template-columns: var(--left) var(--handle) minmax(0,1fr) var(--handle) var(--right); grid-template-rows: var(--upper) var(--handle) minmax(0,1fr); grid-template-areas: "library left monitor right rack" "height height height height height" "timeline timeline timeline timeline timeline"; gap: 0; }
}
@media (max-width: 820px), (max-height: 620px) {
  .panel-tabs { display: grid; grid-template-columns: repeat(4,1fr); flex: none; padding: 3px 7px; gap: 3px; border-bottom: 1px solid #39423c; background: #191f21; }
  .panel-tabs button { min-height: 28px; }
  .workbench { display: flex; min-width: 0; }
  .workbench > .dock { display: none; flex: 1; }
  .workbench[data-panel=library] .library, .workbench[data-panel=stage] .stage-shell,
  .workbench[data-panel=rack] .rack, .workbench[data-panel=timeline] .settings { display: flex; }
  .splitter { display: none; }
  .topbar { min-height: 39px; padding: 4px 7px; gap: 4px; }
  .brand { gap: 5px; } .brand-en { display: none; } h1 { font-size: 15px; }
  .seal { width: 23px; height: 23px; }
  .dock-head { padding-inline: 8px; }
  .top-actions .ghost { min-height: 26px; padding: 3px 6px; font-size: 11px; }
  .library-list button { min-height: 35px; }
  .library-list { grid-auto-rows: 35px; }
  #sequence-tabs { display: flex; padding: 2px 6px; }
  .sequence-head { gap: 4px; min-height: 32px; }
  .sequence-head h2 { font-size: 12px; }
  #move-title { font-size: 13px; }
  .sequence-head .ghost { padding: 3px 6px; font-size: 11px; }
  .sequence-head .ui-icon, .top-actions .ui-icon { display: none; }
  .stage-options { font-size: 10px; gap: 4px 6px; }
  .battle-readout { flex-wrap: wrap; }
  .rack-settings { grid-template-columns: auto minmax(0,1fr) auto; align-items: center; }
  .settings .sequence-divider { margin-inline: 0; }
  #attack-inputs { gap: 3px; }
  .scene-name, .target-hud { top: 7px; padding: 4px 7px 5px; }
  .target-hud { width: clamp(120px,40%,200px); }
  #combo-readout { top: 37px; }
  .battle-readout, .transport { gap: 4px; padding-inline: 7px; }
  .transport .ghost { padding-inline: 6px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }
/* 手机上顶栏操作单独一行，始终能读到「重开」和「重置」的区别。 */
@media (max-width: 680px) {
  .topbar { grid-template-columns: minmax(max-content,1fr) auto minmax(0,1fr); }
  .top-actions { grid-column: 1 / -1; justify-self: stretch; gap: 4px; }
  .top-actions .ghost { flex: 1 0 auto; min-height: 36px; padding-inline: 4px; }
}
@media (max-width: 520px) {
  .transport { display:grid; justify-content:stretch; gap:5px; }
  #attack-inputs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
  #attack-inputs button { min-height: 40px; }
  .combo-workspace { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); }
  .combo-workspace section { gap:7px; padding:7px; }
  .combo-lane { align-items:start; gap:5px; padding:6px; }
  .combo-key { width:26px; height:30px; font-size:14px; }
  .combo-chain ol { gap:4px; }
  .combo-step { min-height:30px; padding-inline:4px; font-size:12px; }
  .combo-step::before { margin-right:3px; }
  #combo-library { grid-template-columns:repeat(auto-fill,minmax(min(72px,100%),1fr)); gap:4px; }
  .combo-choice { padding-inline:5px; }
  .combo-tools button { padding-inline:6px; }
}
@media (max-width: 460px) {
  .record-actions { gap:4px; }
  .record-actions .ghost { gap:3px; padding-inline:5px; font-size:11px; }
}
/* 跟练提示占用自己的行，舞台输入与时间轴仍可操作；收起后工作台取回全部空间。 */
.tutorial-bar {
  flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 5px 16px;
  padding: 8px clamp(10px,1.5vw,36px); border-bottom: 1px solid #456455;
  background: #1c2b25; box-shadow: inset 3px 0 var(--mint);
}
.tutorial-copy {
  flex: 1; min-width: 0; display: grid; grid-template-columns: max-content minmax(0,1fr);
  align-items: center; gap: 2px 12px;
}
.tutorial-count {
  grid-row: span 2; padding: 4px 7px; border: 1px solid #547663; border-radius: 3px;
  color: var(--mint); font: 600 11px/1.3 var(--mono); white-space: nowrap;
}
.tutorial-copy h2 { font-size: 14px; line-height: 1.4; }
.tutorial-copy p { color: #c4d3cb; font-size: 12px; line-height: 1.5; }
.tutorial-actions { display: flex; align-items: stretch; gap: 6px; }
#tutorial-later { background: transparent; border-color: transparent; color: #c4d3cb; }
#tutorial-storage { flex-basis: 100%; color: var(--amber); font-size: 11px; }
.tutorial-target:is(button,select), .tutorial-target > button {
  box-shadow: inset 0 0 0 2px var(--mint);
}
@media (max-width: 640px) {
  .tutorial-bar { gap: 4px 8px; padding: 6px 8px; }
  .tutorial-copy { gap: 4px 6px; }
  .tutorial-count { grid-row: auto; padding: 2px 5px; }
  .tutorial-copy p { grid-column: 1 / -1; }
  .tutorial-actions { flex-direction: column; gap: 1px; }
  .tutorial-actions .ghost { min-height: 30px; padding: 3px 8px; }
}