/* 客户端示意沿用真实编辑器的深蓝、青色与分类色，限定在产品窗口内部。 */
.editor-demo {
  --editor-cyan: #00cdeb;
  --editor-muted: #718997;
  --editor-border: #263c49;
  --editor-background: #090f16;
  background: var(--editor-background);
  border-color: #344b50;
  border-radius: 8px;
  color: #cfdae2;
  box-shadow: 0 20px 48px #0002;
}
.editor-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 43px; padding: 0 18px; border-bottom: 1px solid var(--editor-border); background: #0d151e; }
.editor-project { display: flex; align-items: center; gap: 15px; white-space: nowrap; }
.editor-project strong { font-size: 13px; font-weight: 600; }
.editor-project > span { font-size: 8px; letter-spacing: .28em; color: var(--editor-cyan); }
.editor-caption { color: var(--editor-muted); font-size: 10px; margin-left: auto; }
.editor-window-controls { color: #778b97; font-size: 13px; }
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; }
.editor-main { min-width: 0; }
.editor-categories { display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 16px; overflow: hidden; }
.editor-category { display: inline-flex; align-items: center; gap: 7px; border: 1px solid currentColor; border-radius: 3px; padding: 7px 10px; font-size: 10px; line-height: 1; white-space: nowrap; opacity: .7; }
.editor-category svg { width: 13px; height: 13px; }
.editor-category i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.editor-category:not(.is-active) i { visibility: hidden; }
.editor-category[data-preview-category] { opacity: .5; background: transparent; }
.editor-category.is-active { opacity: 1; box-shadow: inset 0 0 0 1px currentColor; }
.category-boss { color: #f65779; background: #f6577910; }
.category-shortcut { color: #4b9e83; }
.category-npc { color: #6d8cad; }
.category-item { color: #c5943b; }
.category-key { color: #9683c3; }
.category-location { color: var(--editor-cyan); background: #00cdeb10; opacity: 1; }
.editor-scene { position: relative; height: clamp(260px, 23vw, 345px); margin: 0 16px; overflow: hidden; border: 1px solid #177b72; border-radius: 5px; background: #080e14; }
.editor-scene > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; filter: brightness(.88); }
.scene-status { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 36px; text-align: center; font-size: 13px; line-height: 1.8; color: #a7bac5; background: #090f16; }
.plugin-video .scene-status { font-size: 11px; color: #d7c096; }
.editor-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #030b1322, transparent 30%, #030b13b8); pointer-events: none; }
.editor-scene-label { position: absolute; top: 14px; left: 15px; z-index: 1; display: flex; gap: 14px; font-size: 10px; color: #b5c5cf; }
.editor-scene-label > span:last-child { font-size: 9px; color: #7f939f; }
.editor-selection { position: absolute; left: 15px; bottom: 24px; z-index: 1; display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-left: 2px solid var(--editor-cyan); background: #061722d9; font-size: 12px; }
.editor-selection-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--editor-cyan); }
.editor-selection > span:last-child { font-size: 10px; color: var(--editor-muted); margin-left: 10px; }
.editor-scene-time { position: absolute; z-index: 1; bottom: 13px; right: 15px; font-size: 10px; font-variant-numeric: tabular-nums; }
.editor-scene-time time { color: var(--editor-cyan); font-weight: 600; }
.editor-scene-time > span { color: #8fa5b2; }
.editor-timeline { margin-top: 13px; padding: 0 17px; background: #121d28; border-block: 1px solid #263847; }
.editor-ruler { display: flex; justify-content: space-between; align-items: center; height: 24px; color: #617c8e; font-size: 8px; font-variant-numeric: tabular-nums; }
.editor-tracks { height: 58px; position: relative; background: repeating-linear-gradient(90deg, #25445466 0 1px, transparent 1px 5%); }
.editor-marker { position: absolute; top: 4px; padding: 5px 7px; border: 1px solid currentColor; border-left-width: 2px; border-radius: 2px; font-size: 8px; white-space: nowrap; opacity: .55; color: #c69e55; background: #3b2e1f; }
.editor-marker:nth-child(1) { left: 22.04%; }
.editor-marker:nth-child(2) { left: 61.96%; top: 28px; color: #f65779; background: #3b1623; }
.editor-marker:nth-child(3) { left: 73.08%; }
.editor-marker:nth-child(4) { left: 75.75%; top: 28px; color: var(--editor-cyan); background: #063542; }
.editor-marker.selected { opacity: 1; }
.editor-playhead { position: absolute; left: 75.75%; top: -24px; bottom: 0; width: 1px; background: var(--editor-cyan); pointer-events: none; transition: left .3s ease; }
.editor-playhead::before { content: ""; position: absolute; left: -3px; top: 0; width: 7px; height: 5px; background: var(--editor-cyan); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.editor-transport { display: flex; justify-content: space-between; align-items: center; height: 55px; padding: 0 17px; }
.editor-tool { color: var(--editor-cyan); font-size: 10px; border: 1px solid #146879; border-radius: 3px; padding: 7px 10px; background: #002c381c; }
.editor-playback { display: flex; align-items: center; gap: 19px; color: #8ca6b6; }
.editor-playback > span { font-size: 19px; }
.editor-playback svg { width: 14px; height: 14px; }
.editor-playback .editor-play { width: 34px; height: 34px; border: 1px solid var(--editor-cyan); border-radius: 50%; display: grid; place-items: center; color: var(--editor-cyan); }
.editor-play svg { width: 17px; height: 17px; margin-left: 2px; }
.editor-speed { padding: 4px 7px; border: 1px solid var(--editor-border); border-radius: 3px; font-size: 10px; }
.editor-nodes { display: flex; flex-direction: column; min-width: 0; padding: 0 14px 13px; border-left: 1px solid var(--editor-border); }
.editor-panel-heading { display: flex; align-items: center; justify-content: space-between; height: 50px; border-bottom: 1px solid #20313d; font-size: 11px; color: var(--editor-cyan); }
.editor-panel-heading strong { font-weight: 500; }
.editor-panel-heading > span { font-size: 9px; padding: 3px 7px; border: 1px solid #195465; border-radius: 3px; color: #90c6d1; }
.editor-events { padding-top: 14px; display: grid; gap: 9px; }
.editor-nodes .node-row { padding: 13px 9px; min-height: 57px; border: 1px solid #283e4d; border-left: 2px solid #b08b43; border-radius: 6px; gap: 10px; background: #0e1721; }
.editor-nodes .node-row:hover { background: #142330; }
.editor-nodes .node-row:nth-child(2) { border-left-color: #f65779; }
.editor-nodes .node-row:nth-child(2) time { color: #f65779; }
.editor-nodes .node-row:nth-child(3) { border-left-color: #9785c2; }
.editor-nodes .node-row:nth-child(4) { border-left-color: var(--editor-cyan); }
.editor-nodes .node-row time { color: #bfa76f; font-size: 10px; }
.editor-nodes .node-row strong { color: #ccdae3; font-size: 10px; font-weight: 400; }
.editor-nodes .node-row small { color: var(--editor-muted); font-size: 9px; }
.editor-nodes .node-row .node-check { color: #5d798a; font-size: 9px; }
.editor-nodes .node-row.selected { border-color: var(--editor-cyan); background: #062633; }
.editor-nodes .node-row.selected time, .editor-nodes .node-row.selected .node-check { color: var(--editor-cyan); }
.editor-panel-bottom { margin-top: auto; padding-top: 20px; }
.editor-panel-bottom p { font-size: 10px; color: var(--editor-muted); margin-bottom: 12px; }
.editor-export { display: flex; align-items: center; justify-content: center; gap: 8px; height: 33px; border: 1px solid #167289; border-radius: 4px; color: var(--editor-cyan); background: #07242f; font-size: 11px; }
.editor-export svg { width: 13px; height: 13px; }
.editor-export > span { margin-left: auto; }
.editor-export { padding: 0 11px; }

/* 插件内层取自现有黑金皮肤：分类树、圆形图标与时间轴节点。 */
.extension-layout { grid-template-columns: minmax(260px, 1fr) minmax(0, 1.9fr); gap: 40px; }
.plugin-demo { --plugin-gold: #c7a46b; --plugin-text: #d7c096; --plugin-line: #735534; min-width: 0; background: #090b0d; border-color: #4d554b; }
.plugin-browser-brand { margin-left: auto; color: #dadbd5; font-size: 11px; letter-spacing: -.03em; }
.plugin-content { display: grid; grid-template-columns: minmax(0, 1fr) 247px; }
.plugin-player { position: relative; min-width: 0; padding: 30px 0 0; background: #0b0f10; }
.plugin-video { position: relative; height: 258px; overflow: hidden; background: #07090b; }
.plugin-video > img { width: 100%; height: 100%; display: block; object-fit: cover; filter: brightness(.72); }
.plugin-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, #030506ef); pointer-events: none; }
.plugin-video-label { position: absolute; left: 15px; top: 13px; z-index: 1; font-size: 10px; color: #bdb8a8; }
.plugin-current-label { position: absolute; right: 13px; bottom: 88px; z-index: 1; color: #f0d28e; border: 1px solid #6c573a; background: #0b0e10d9; padding: 6px 9px; border-radius: 3px; font-size: 10px; }
.plugin-markers { position: absolute; left: 17px; right: 17px; bottom: 41px; height: 32px; z-index: 2; display: flex; justify-content: space-around; align-items: center; }
.plugin-markers > span { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #ac8c53; border-radius: 50%; background: #1d1913; box-shadow: inset 0 0 0 2px #0d0c0b; }
.plugin-markers > span.active { border-color: #f0d28e; background: #49361e; transform: translateY(-4px); }
.plugin-markers img { width: 22px; height: 22px; object-fit: contain; }
.plugin-progress { position: absolute; left: 16px; right: 16px; bottom: 38px; z-index: 2; height: 2px; background: #73746c; }
.plugin-progress > span { display: block; width: 75.75%; height: 100%; background: #c7a46b; transition: width .25s ease; }
.plugin-video-controls { display: flex; gap: 8px; align-items: center; position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 2; font-size: 9px; font-variant-numeric: tabular-nums; color: #e4e0d8; }
.plugin-video-controls > span:first-child { margin-right: 4px; font-size: 10px; }
.plugin-video-controls > span:last-child { margin-left: auto; font-size: 14px; }
.plugin-duration { color: #7d827d; }
.plugin-video-description { padding: 15px; display: grid; gap: 7px; }
.plugin-video-description > span { font-size: 11px; color: #c8c9c0; }
.plugin-video-description small { font-size: 9px; color: #6f8177; }
.plugin-floating-entry { position: absolute; bottom: 13px; right: 13px; padding: 4px; border: 1px solid var(--plugin-gold); border-radius: 7px; background: #11120f; }
.plugin-floating-entry img { width: 24px; height: 24px; display: block; border-radius: 5px; }
.plugin-panel { margin: 14px 13px 14px 0; padding: 12px 11px 0; min-width: 0; border: 1px solid var(--plugin-gold); border-radius: 4px; background: #0a0d0f; color: var(--plugin-text); font-family: Georgia, "Songti SC", SimSun, serif; }
.plugin-panel-title { display: flex; align-items: center; justify-content: space-between; font-size: 12px; margin-bottom: 11px; }
.plugin-panel-title strong { font-weight: 500; }
.plugin-panel-title > span { font-family: Inter, sans-serif; font-size: 7px; letter-spacing: .12em; color: #91764b; }
.plugin-panel-search { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; }
.plugin-panel-search > span:first-child { flex: 1; padding: 7px; border: 1px solid #554028; border-radius: 3px; color: #977b50; }
.plugin-panel-search > span:last-child { width: 24px; height: 24px; align-self: center; display: grid; place-items: center; border: 1px solid #554028; border-radius: 50%; color: #e5c88d; }
.plugin-value-options { display: flex; gap: 2px; align-items: center; padding: 10px 0; font-size: 9px; }
.plugin-value-options > span { padding: 4px 9px; border-radius: 20px; }
.plugin-value-options > span.selected { border: 1px solid #b29660; background: #45321b; color: #f0d28e; }
.plugin-value-options small { margin-left: auto; color: #8f774f; font-size: 9px; }
.plugin-tree { border: 1px solid #554028; padding: 7px 6px; border-radius: 3px; }
.plugin-tree-heading { display: grid; grid-template-columns: 28px 28px 1fr; padding: 0 0 6px; margin-bottom: 4px; color: #bda57c; font-size: 8px; border-bottom: 1px solid #554028; }
.plugin-group { display: flex; align-items: center; gap: 7px; min-height: 26px; font-size: 11px; }
.plugin-group > img { width: 20px; height: 20px; object-fit: contain; }
.plugin-group > strong { font-weight: 400; }
.plugin-group > span:last-child { margin-left: auto; color: #927044; }
.plugin-radio { width: 11px; height: 11px; border: 1px solid #927044; border-radius: 50%; }
.plugin-check { width: 12px; height: 12px; border: 1px solid #927044; border-radius: 2px; display: grid; place-items: center; line-height: 1; font-size: 8px; }
.plugin-node { display: flex; align-items: center; gap: 6px; min-height: 32px; width: 100%; padding: 5px 4px 5px 16px; text-align: left; color: #bda77e; border-radius: 2px; font-size: 10px; white-space: nowrap; }
.plugin-node > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.plugin-node time { margin-left: auto; font-family: Inter, sans-serif; font-size: 8px; color: #937a52; }
.plugin-node:hover, .plugin-node.selected { background: #c7a46b17; color: #f0d28e; }
.plugin-node:focus-visible { outline-color: #f0d28e; outline-offset: 1px; }
.plugin-tree-branch { color: #6f5736; }
.plugin-panel-footnote { font-size: 9px; text-align: center; padding: 10px 0; color: #8e7751; }
.plugin-demo .browser-demo-caption { color: #7e9282; border-top: 1px solid #2c3930; }

@media (min-width: 1600px) {
  .editor-layout { grid-template-columns: minmax(0, 1fr) 310px; }
  .editor-nodes .node-row { min-height: 66px; }
  .editor-nodes .node-row strong { font-size: 12px; }
  .editor-category { font-size: 12px; }
  .plugin-video { height: 286px; }
}
@media (max-width: 1100px) {
  .editor-layout { grid-template-columns: minmax(0, 1fr) 230px; }
  .editor-categories { gap: 6px; }
  .editor-category { padding: 6px 7px; font-size: 9px; }
  .editor-nodes { padding-inline: 10px; }
  .editor-nodes .node-row { gap: 7px; padding-inline: 7px; }
  .editor-nodes .node-row strong { font-size: 9px; }
  .extension-layout { grid-template-columns: minmax(220px, 1fr) minmax(0, 1.9fr); gap: 25px; }
  .plugin-content { grid-template-columns: minmax(0, 1fr) 219px; }
  .plugin-panel { margin-right: 10px; padding-inline: 8px; }
  .plugin-video-description small { max-width: 120px; line-height: 1.8; }
}
@media (max-width: 760px) {
  .editor-titlebar { min-height: 37px; padding-inline: 12px; gap: 10px; }
  .editor-project { gap: 10px; }
  .editor-project strong { font-size: 11px; }
  .editor-project > span { font-size: 7px; letter-spacing: .12em; }
  .editor-caption { font-size: 8px; }
  .editor-window-controls { display: none; }
  .editor-layout { grid-template-columns: minmax(0, 1fr) 190px; }
  .editor-categories { padding-inline: 10px; height: 43px; gap: 6px; }
  .editor-category { font-size: 9px; padding: 6px; gap: 4px; }
  .editor-category svg { width: 11px; height: 11px; }
  .category-shortcut, .category-npc { display: none; }
  .editor-scene { margin-inline: 10px; height: 220px; }
  .editor-scene-label { top: 10px; left: 10px; }
  .editor-scene-label > span:last-child { display: none; }
  .editor-selection { left: 10px; bottom: 35px; padding: 8px; font-size: 10px; }
  .editor-selection > span:last-child { font-size: 8px; margin-left: 0; }
  .editor-tracks { height: 54px; }
  .editor-marker { max-width: 28%; overflow: hidden; text-overflow: ellipsis; font-size: 7px; padding: 4px; }
  .editor-marker:nth-child(3) { max-width: 24%; }
  .editor-marker:nth-child(4) { max-width: 24%; }
  .editor-playback { gap: 10px; }
  .editor-tool { font-size: 8px; padding: 6px; }
  .editor-transport { padding-inline: 10px; }
  .editor-nodes { padding-inline: 8px; }
  .editor-panel-heading { height: 43px; font-size: 10px; }
  .editor-panel-heading > span { font-size: 8px; padding-inline: 4px; }
  .editor-events { gap: 8px; padding-top: 10px; }
  .editor-nodes .node-row { min-height: 53px; gap: 6px; padding-inline: 6px; }
  .editor-nodes .node-row strong { font-size: 9px; }
  .editor-nodes .node-row time, .editor-nodes .node-row small { font-size: 8px; }
  .editor-nodes .node-check { display: none; }
  .editor-panel-bottom p { font-size: 8px; line-height: 1.7; }
  .extension-layout { grid-template-columns: 1fr; gap: 28px; }
  .plugin-content { grid-template-columns: minmax(0, 1fr) 235px; }
  .plugin-video { height: 260px; }
  .plugin-video-description small { max-width: none; }
}
@media (max-width: 560px) {
  .editor-layout { grid-template-columns: 1fr; }
  .editor-caption { max-width: 120px; text-align: right; line-height: 1.6; padding-block: 6px; }
  .editor-scene { height: auto; aspect-ratio: 16 / 9; }
  .editor-categories { justify-content: space-between; }
  .editor-timeline { margin-top: 10px; }
  .editor-nodes { border-left: 0; border-top: 1px solid var(--editor-border); padding: 0 10px 10px; }
  .editor-panel-heading { height: 36px; }
  .editor-events { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .editor-nodes .node-row { min-height: 54px; }
  .editor-nodes .node-row > span:nth-child(2) { min-width: 0; }
  .editor-nodes .node-row strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .editor-panel-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; }
  .editor-panel-bottom p { margin: 0; }
  .editor-export { font-size: 9px; gap: 8px; }
  .plugin-content { grid-template-columns: 1fr; }
  .plugin-player { padding-top: 0; }
  .plugin-video { height: auto; aspect-ratio: 16 / 9; min-height: 190px; }
  .plugin-video-description { padding: 12px; }
  .plugin-panel { margin: 0 12px 12px; padding: 13px 12px 0; }
  .plugin-panel-title { font-size: 13px; }
  .plugin-tree { padding: 9px; }
  .plugin-tree-heading { font-size: 9px; }
  .plugin-group { min-height: 28px; font-size: 12px; }
  .plugin-node { min-height: 38px; font-size: 12px; }
  .plugin-node time { font-size: 10px; }
  .plugin-panel-footnote { font-size: 10px; }
  .plugin-browser-brand { font-size: 10px; }
}