/* =====================================================================
 * 第四轮：角色栏（资源管理器）、积木页、自定义积木栏 三段演示。
 * 沿用 styles.css 里模拟编辑器那套零件（.ed / .pn / .tabs / .sp-row / .cursor），
 * 这里只加树、右键菜单、对话框和积木栏设置这几样。
 * =================================================================== */

/* ---- 通用：模拟的右键菜单、命名框、树 ------------------------------- */
.mock-menu { position: absolute; z-index: 9; display: flex; flex-direction: column; min-width: 150px; padding: 5px; background: var(--e-head); border: 1px solid var(--e-line-2); border-radius: 8px; box-shadow: 0 14px 34px rgb(0 0 0 / 50%); opacity: 0; translate: 0 -4px; transition: opacity 0.18s, translate 0.18s var(--ease); pointer-events: none; }
.mock-menu.show { opacity: 1; translate: 0 0; }
.mock-menu span { padding: 5px 10px; font-size: 11px; color: #fff; border-radius: 5px; white-space: nowrap; }
.mock-menu span.hi { background: var(--acc); }
.mock-menu span.sub::after { content: "›"; float: right; color: var(--e-dim); }
.mock-menu i { height: 1px; margin: 4px 6px; background: var(--e-line); }
.mock-dlg { position: absolute; left: 50%; top: 42%; z-index: 10; width: 250px; translate: -50% -50%; padding: 14px 14px 12px; background: var(--e-panel); border: 1px solid var(--e-line-2); border-radius: 10px; box-shadow: 0 24px 50px rgb(0 0 0 / 55%); opacity: 0; scale: 0.96; transition: opacity 0.2s, scale 0.2s var(--ease); pointer-events: none; }
.mock-dlg.show { opacity: 1; scale: 1; }
.mock-dlg b { display: block; margin-bottom: 8px; font-size: 12.5px; color: #fff; }
.mock-dlg .in { height: 26px; padding: 0 8px; line-height: 26px; font-size: 11.5px; color: #fff; background: var(--e-input); border: 1px solid var(--acc); border-radius: 6px; }
.mock-dlg .in::after { content: ""; display: inline-block; width: 1px; height: 12px; margin-left: 1px; background: #fff; vertical-align: -2px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.mock-dlg .acts { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.mock-dlg .acts span { padding: 4px 12px; font-size: 11px; color: var(--e-dim); border-radius: 6px; background: var(--e-input); }
.mock-dlg .acts span.pri { color: #fff; background: var(--acc); }

.tree-x { display: flex; flex-direction: column; padding: 4px 0; font-size: 11.5px; color: var(--paper); }
.tree-x .row { display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 8px 0 var(--ind, 10px); border-radius: 0; transition: background 0.2s, translate 0.35s var(--ease), opacity 0.35s; }
.tree-x .row.on { background: var(--acc); color: #fff; }
.tree-x .row.hover { background: var(--e-hover); }
.tree-x .row .tw { width: 0; height: 0; border: 4px solid transparent; border-left: 5px solid var(--e-dim); flex: none; transition: rotate 0.25s; }
.tree-x .row .tw.open { rotate: 90deg; }
.tree-x .row .tw.none { visibility: hidden; }
.tree-x .row.on .tw { border-left-color: #fff; }
.tree-x .row .th { width: 22px; height: 22px; border-radius: 4px; background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; }
.tree-x .row .th img { height: 20px; width: auto; }
.tree-x .row .th.stage { background: rgb(255 255 255 / 12%); }
.tree-x .row .fd { width: 14px; height: 11px; border-radius: 2px; background: var(--fc, var(--e-dim)); position: relative; flex: none; opacity: 0.9; }
.tree-x .row .fd::before { content: ""; position: absolute; left: 0; top: -3px; width: 6px; height: 3px; border-radius: 2px 2px 0 0; background: inherit; }
.tree-x .row .pg { width: 12px; height: 10px; border-radius: 2px; background: var(--acc); flex: none; position: relative; }
.tree-x .row .pg::before { content: ""; position: absolute; left: 2px; top: -3px; width: 5px; height: 3px; border-radius: 2px 2px 0 0; background: inherit; }
.tree-x .row.on .pg, .tree-x .row.on .fd { background: #fff; }
.tree-x .row .nm { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tree-x .row .cn { font-size: 10px; color: var(--e-dim); }
.tree-x .row.on .cn { color: rgb(255 255 255 / 80%); }
.tree-x .row.new { opacity: 0; translate: -6px 0; }
.tree-x .row.new.in { opacity: 1; translate: 0 0; }
.tree-x .row.drop { box-shadow: inset 0 0 0 2px var(--acc); border-radius: 5px; }
.tree-x .row.gone { opacity: 0.25; }
.ex-drag { position: absolute; z-index: 8; pointer-events: none; opacity: 0; width: 170px; padding: 3px 0; background: var(--e-head); border: 1px solid var(--e-line-2); border-radius: 6px; box-shadow: 0 12px 28px rgb(0 0 0 / 50%); }
.ex-drag .row { height: 26px; }

/* ---- 角色栏演示 ------------------------------------------------------ */
.ex-ed { aspect-ratio: 16 / 9.8; --bs: 0.56; }
.ex-ed .ed-body { position: absolute; inset: 34px 0 34px; display: grid; grid-template-columns: 240px 1fr 34%; gap: 5px; padding: 5px; }
.ex-tools { display: flex; align-items: center; gap: 5px; height: 34px; padding: 0 8px; border-bottom: 1px solid var(--e-line); }
.ex-tools .search { flex: 1; height: 20px; padding: 0 8px; line-height: 20px; font-size: 10px; color: var(--e-dim); background: var(--e-input); border-radius: 5px; }
.ex-tools i { width: 18px; height: 18px; border-radius: 5px; background: rgb(255 255 255 / 7%); }
.ex-tools i.pri { background: var(--acc); }
.ex-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; font-size: 10px; color: var(--e-dim); border-top: 1px solid var(--e-line); background: var(--e-page); }
.ex-foot b { padding: 2px 8px; font-weight: 500; color: #fff; background: var(--e-input); border-radius: 4px; }
.ex-foot .n { width: 30px; padding: 2px 0; text-align: center; color: #fff; background: var(--e-input); border-radius: 4px; }
.ex-ws .ws .bk-stack { position: absolute; left: 22px; top: 18px; }

/* ---- 积木页演示 ------------------------------------------------------ */
.pg-ed { aspect-ratio: 16 / 7.2; --bs: 0.62; }
.pg-ed .ed-body { position: absolute; inset: 34px 0 34px; display: grid; grid-template-columns: 230px 1fr 0fr; gap: 5px; padding: 5px; transition: grid-template-columns 0.6s var(--ease); }
.pg-ed.split .ed-body { grid-template-columns: 230px 1fr 1fr; }
.pg-ed .pn.pg-b { opacity: 0; transition: opacity 0.4s 0.25s; }
.pg-ed.split .pn.pg-b { opacity: 1; }
.pg-ed .tabs .tab { transition: color 0.3s; }
.pg-ed .ws .bk-stack { position: absolute; }
.pg-drag { position: absolute; z-index: 8; pointer-events: none; opacity: 0; filter: drop-shadow(0 12px 18px rgb(0 0 0 / 55%)); }
.pg-ed .shadow-x { position: absolute; opacity: 0; transition: opacity 0.2s; filter: saturate(0) brightness(1.6); }
.pg-ed .shadow-x.show { opacity: 0.35; }
.quick { position: absolute; left: 50%; top: 50px; z-index: 10; width: 360px; translate: -50% 0; padding: 8px; background: var(--e-head); border: 1px solid var(--e-line-2); border-radius: 10px; box-shadow: 0 24px 50px rgb(0 0 0 / 55%); opacity: 0; scale: 0.97; transition: opacity 0.2s, scale 0.2s var(--ease); pointer-events: none; }
.quick.show { opacity: 1; scale: 1; }
.quick .in { height: 28px; margin-bottom: 6px; padding: 0 10px; line-height: 28px; font-size: 12px; color: #fff; background: var(--e-input); border: 1px solid var(--acc); border-radius: 6px; }
.quick .in em { font-style: normal; color: var(--e-dim); }
.quick .it { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px; font-size: 11px; color: var(--paper); border-radius: 5px; }
.quick .it .pg { width: 12px; height: 10px; border-radius: 2px; background: var(--acc); }
.quick .it .who { margin-left: auto; font-size: 10px; color: var(--e-dim); }
.quick .it.on { background: var(--acc); color: #fff; }
.quick .it.on .who { color: rgb(255 255 255 / 80%); }
.quick .it.off { display: none; }
.kbd-hint { position: absolute; right: 14px; bottom: 44px; z-index: 5; display: flex; gap: 4px; align-items: center; font-size: 10.5px; color: var(--e-dim); opacity: 0; transition: opacity 0.3s; }
.kbd-hint.show { opacity: 1; }
.kbd-hint kbd { font-size: 10px; padding: 0 5px; }

/* ---- 自定义积木栏演示 ------------------------------------------------ */
.pl-ed { aspect-ratio: 16 / 7.4; --bs: 0.5; }
.pl-ed .ed-body { position: absolute; inset: 34px 0 34px; display: grid; grid-template-columns: 340px 1fr; gap: 5px; padding: 5px; }
.pl-pal { display: flex; flex-direction: column; }
.pl-pal .pl-strip { display: flex; flex-direction: column; width: 62px; border-right: 1px solid var(--e-line); background: var(--e-panel); }
.pl-body { display: flex; flex: 1; min-height: 0; transition: flex-direction 0s; }
.pl-cat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 0 6px; font-size: 10px; color: var(--e-dim); transition: opacity 0.35s, translate 0.45s var(--ease); }
.pl-cat::after { content: ""; position: absolute; right: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 2px 0 0 2px; background: var(--c); }
.pl-cat i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); opacity: 0.85; }
.pl-cat.on { background: var(--acc); color: #fff; }
.pl-cat.hid { opacity: 0; height: 0; padding: 0; overflow: hidden; }
.pl-fly { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 10px; overflow: hidden; }
.pl-fly .lbl { font-size: 11px; font-weight: 600; color: #fff; }
.pl-fly .bk { position: relative; }
.pl-fly .starred { position: relative; }
.pl-fly .starred::after { content: "★"; position: absolute; left: -2px; top: -6px; font-size: 11px; color: var(--gold); }
/* 网格摆法 */
.pl-pal.grid .pl-body { flex-direction: column; }
.pl-pal.grid .pl-strip { flex-direction: row; width: auto; height: 30px; flex: none; overflow: hidden; border-right: 0; border-bottom: 1px solid var(--e-line); }
.pl-pal.grid .pl-cat { flex-direction: row; gap: 5px; padding: 0 9px; white-space: nowrap; flex: none; }
.pl-pal.grid .pl-cat::after { display: none; }
.pl-pal.grid .pl-search { display: block; }
.pl-search { display: none; margin: 8px 10px 0; height: 22px; padding: 0 8px; line-height: 22px; font-size: 10px; color: var(--e-dim); background: var(--e-input); border-radius: 5px; }
.pl-pal.grid .pl-fly { flex-direction: row; flex-wrap: wrap; align-content: flex-start; }
.pl-pal.grid .pl-fly .lbl { width: 100%; }

.pl-dlg { display: flex; flex-direction: column; background: var(--e-panel); border: 1px solid var(--e-line); border-radius: 8px; overflow: hidden; }
.pl-dlg .hd { padding: 10px 14px 6px; }
.pl-dlg .hd b { display: block; font-size: 13px; color: #fff; }
.pl-dlg .hd span { font-size: 10.5px; color: var(--e-dim); }
.pl-mode { display: flex; align-items: center; gap: 6px; padding: 4px 14px 8px; font-size: 10.5px; color: var(--e-dim); border-bottom: 1px solid var(--e-line); }
.pl-mode span { padding: 4px 10px; color: var(--paper); background: var(--e-input); border: 1px solid transparent; border-radius: 6px; transition: border-color 0.25s, background 0.25s; }
.pl-mode span.on { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 22%, var(--e-input)); }
.pl-cols { display: grid; grid-template-columns: 46% 1fr; flex: 1; min-height: 0; }
.pl-list { display: flex; flex-direction: column; gap: 5px; padding: 10px; border-right: 1px solid var(--e-line); }
.pl-list .t { font-size: 10px; color: var(--e-dim); }
.pl-item { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 8px; font-size: 11px; color: var(--paper); background: var(--e-page); border: 1px solid var(--e-line); border-radius: 7px; transition: translate 0.45s var(--ease), opacity 0.3s, box-shadow 0.25s; }
.pl-item .grip { width: 6px; height: 10px; background: radial-gradient(circle, var(--e-dim) 1px, transparent 1.2px) 0 0 / 3px 3px; opacity: 0.8; }
.pl-item i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
.pl-item .n { flex: 1; }
.pl-item .cnt { font-size: 9.5px; color: var(--e-dim); }
.pl-item .eye { width: 14px; height: 9px; border: 1.6px solid var(--e-dim); border-radius: 50%; position: relative; }
.pl-item .eye::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; translate: -50% -50%; border-radius: 50%; background: var(--e-dim); }
.pl-item.off { opacity: 0.4; }
.pl-item.off .eye::before { content: ""; position: absolute; left: -2px; top: 3px; width: 16px; height: 1.6px; rotate: -35deg; background: var(--e-dim); }
.pl-item.lift { box-shadow: 0 10px 24px rgb(0 0 0 / 45%); background: var(--e-head); }
.pl-item.star { border-color: var(--gold); }
.pl-item .st { color: var(--gold); font-size: 12px; }
.pl-right { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.pl-right .t { font-size: 10px; color: var(--e-dim); }
.pl-right .pick { display: flex; align-items: center; gap: 8px; }
.pl-right .pick .bk { position: relative; }
.pl-right .star { font-size: 13px; color: var(--e-dim); transition: color 0.25s, scale 0.25s var(--spring); }
.pl-right .star.on { color: var(--gold); scale: 1.3; }
.pl-right .empty { font-size: 10.5px; color: var(--e-dim); }

@media (max-width: 860px) {
  body:not(.fit-mode) .ex-ed, body:not(.fit-mode) .pg-ed, body:not(.fit-mode) .pl-ed { aspect-ratio: auto; height: 520px; }
  body:not(.fit-mode) .ex-ed .ed-body { grid-template-columns: 1fr 1fr; }
  body:not(.fit-mode) .ex-ws + .pn, body:not(.fit-mode) .pg-ed .pn.pg-b { display: none; }
  body:not(.fit-mode) .pg-ed .ed-body, body:not(.fit-mode) .pg-ed.split .ed-body { grid-template-columns: 1fr 1fr; }
  body:not(.fit-mode) .pl-ed .ed-body { grid-template-columns: 1fr; }
  body:not(.fit-mode) .pl-ed .pl-pal { display: none; }
}

/* ---- 补：hidden 要盖过上面的 display，右摆法，页切换淡入淡出 ------------ */
.tree-x .row[hidden] { display: none; }
.pl-fly [hidden], .pl-fly .extra { display: none !important; }
.pl-pal.grid .pl-fly .extra { display: block !important; }
.pl-right .empty[hidden] { display: none; }
.pl-pal.right .pl-body { flex-direction: row-reverse; }
.pl-pal.right .pl-strip { border-right: 0; border-left: 1px solid var(--e-line); }
.pl-pal.right .pl-cat::after { right: auto; left: 0; border-radius: 0 2px 2px 0; }
.pg-ed .ws .bk-stack { transition: opacity 0.3s; }
.quick .in { display: flex; align-items: center; gap: 1px; }
.quick .in em[hidden] { display: none; }

/* ---- 积木栏设置右栏：当前分类的积木一行一块，能拖、能藏、能星标 ------------ */
.pl-right { gap: 6px; }
.pl-brow { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 3px 8px; background: var(--e-page); border: 1px solid var(--e-line); border-radius: 7px; transition: box-shadow 0.25s; }
.pl-brow .grip { width: 6px; height: 10px; flex: none; background: radial-gradient(circle, var(--e-dim) 1px, transparent 1.2px) 0 0 / 3px 3px; opacity: 0.8; }
.pl-brow .bk-stack { flex: 1; }
.pl-brow .star { font-size: 13px; color: var(--e-dim); transition: color 0.25s, scale 0.25s var(--spring); }
.pl-brow .star.on { color: var(--gold); scale: 1.3; }
.pl-brow .eye { width: 14px; height: 9px; flex: none; border: 1.6px solid var(--e-dim); border-radius: 50%; position: relative; }
.pl-brow .eye::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; translate: -50% -50%; border-radius: 50%; background: var(--e-dim); }
.pl-brow.lift { position: relative; z-index: 2; background: var(--e-head); box-shadow: 0 10px 24px rgb(0 0 0 / 45%); }