/* =====================================================================
 * 第三轮：自定义主题那段演示。
 * 模拟编辑器的颜色全从 --t-* 来，剧本改这几个变量，面板靠过渡自己变；
 * 积木有两套真实渲染的 SVG（原样 / 方角无凸起），叠在一起淡入淡出。
 * =================================================================== */

.th-ed {
  aspect-ratio: 16 / 7.4;
  --bs: 0.56;
  --t-bg: #16191f; --t-page: #191e25; --t-panel: #242731; --t-head: #2e3644; --t-line: #3e495b;
  --t-dim: #9ca3af; --t-text: #ffffff; --t-acc: #2d8cff; --t-r: 1;
  --e-bg: var(--t-bg); --e-page: var(--t-page); --e-panel: var(--t-panel); --e-head: var(--t-head);
  --e-line: var(--t-line); --e-dim: var(--t-dim); --e-input: var(--t-head); --e-hover: var(--t-head);
  color: var(--t-text);
  transition: background 0.6s;
}
.th-ed .ed-top, .th-ed .pn, .th-ed .tabs, .th-ed .sd-caption, .th-ed .th-row, .th-ed .th-presets button, .th-ed .th-cats span {
  transition: background 0.6s, background-color 0.6s, border-color 0.6s, color 0.6s, border-radius 0.5s var(--ease);
}
.th-ed .ed-top { position: relative; z-index: 1; }
.th-ed .ed-body { position: absolute; inset: 34px 0 34px; z-index: 1; display: grid; grid-template-columns: 26% 1fr 22% 30%; gap: 5px; padding: 5px; }
.th-ed .pn { border-radius: calc(8px * var(--t-r)); }
.th-ed .tab.on { color: var(--t-text); }
.th-ed .ws-dots { background-color: var(--e-page); }

/* 积木栏 */
.th-cats { display: flex; flex-wrap: wrap; gap: 4px; padding: 7px 8px 4px; }
.th-cats span { padding: 2px 8px; font-size: 10px; color: var(--e-dim); background: var(--e-panel); border-radius: 999px; }
.th-cats span.on { color: #fff; background: var(--t-acc); }
.th-list { display: grid; justify-items: start; gap: 8px; padding: 8px 10px; }
.th-blk { position: relative; display: inline-block; }
.th-blk img { display: block; transition: opacity 0.45s; }
.th-blk img.sq { position: absolute; left: 0; top: 0; opacity: 0; }
.th-ed.square .th-blk img.sq { opacity: 1; }
.th-ed.square .th-blk img:not(.sq) { opacity: 0; }
.th-main { position: absolute; left: 22px; top: 18px; }

/* 舞台 */
.th-cv { display: grid; place-items: center; margin: 0 8px 8px; aspect-ratio: 4 / 3; background: #fff; border-radius: 4px; }
.th-cv .moo { height: 62%; }

/* 顶栏右边那颗主题胶囊，跟真编辑器一样 */
.th-pill { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 5px; font-size: 11px; color: var(--t-text); background: color-mix(in srgb, var(--e-panel) 60%, transparent); border: 1px solid var(--e-line); border-radius: 999px; transition: border-color 0.6s, background 0.6s; }
.th-pill i { position: relative; width: 20px; height: 13px; border-radius: 3px; background: linear-gradient(90deg, var(--t-panel) 0 40%, var(--t-bg) 40%); box-shadow: inset 0 0 0 1px rgb(127 127 127 / 30%); transition: background 0.6s; }
.th-pill i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--t-acc); transition: background 0.6s; }

/* 主题工作室（缩略版） */
.th-studio .pn-b { display: grid; align-content: start; gap: 6px; padding: 8px; font-size: 10.5px; }
.th-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 2px; }
.th-presets button { display: flex; align-items: center; gap: 6px; padding: 5px 7px; font-size: 10.5px; color: var(--t-text); background: var(--e-panel); border: 1px solid var(--e-line); border-radius: calc(7px * var(--t-r)); }
.th-presets button.on { border-color: var(--t-acc); box-shadow: 0 0 0 1px var(--t-acc); }
.th-presets i { position: relative; flex: none; width: 22px; height: 14px; border-radius: 3px; background: linear-gradient(90deg, var(--q) 0 38%, var(--p) 38%); box-shadow: inset 0 0 0 1px rgb(127 127 127 / 30%); }
.th-presets i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--a); }
.th-row { display: grid; grid-template-columns: 40px 1fr 42px; align-items: center; gap: 8px; height: 27px; padding: 0 8px; color: var(--e-dim); background: color-mix(in srgb, var(--e-page) 60%, transparent); border-radius: calc(6px * var(--t-r)); }
.th-row code { font-size: 9.5px; color: var(--e-dim); text-align: right; white-space: nowrap; }
.th-sw { width: 20px; height: 20px; justify-self: start; background: var(--t-acc); border: 1px solid rgb(127 127 127 / 35%); border-radius: calc(6px * var(--t-r)); transition: background 0.6s, border-radius 0.5s var(--ease); }
.th-slider { position: relative; height: 4px; margin: 0 6px; background: var(--e-line); border-radius: 2px; }
.th-slider i { position: absolute; left: 0; top: 50%; width: var(--v, 50%); height: 4px; translate: 0 -50%; background: var(--t-acc); border-radius: 2px; transition: width 0.5s var(--ease), background 0.6s; }
.th-slider i::after { content: ""; position: absolute; right: -6px; top: 50%; box-sizing: border-box; width: 12px; height: 12px; translate: 0 -50%; background: #fff; border: 3px solid var(--t-acc); border-radius: 50%; transition: border-color 0.6s; }
.th-thumb { height: 18px; border-radius: 4px; background: linear-gradient(120deg, #0f2027, #2c5364 55%, #ff7e5f); opacity: 0.35; transition: opacity 0.4s, box-shadow 0.4s; }
.th-ed.has-bg .th-thumb { opacity: 1; box-shadow: 0 0 0 1px var(--t-acc); }

/* 背景图：一层渐变铺在最底，面板半透明透出它 */
.th-backdrop { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 0.8s var(--ease);
  background:
    radial-gradient(40% 50% at 20% 30%, rgb(45 140 255 / 60%), transparent 70%),
    radial-gradient(45% 55% at 80% 70%, rgb(255 126 95 / 60%), transparent 70%),
    radial-gradient(30% 40% at 60% 20%, rgb(70 214 168 / 45%), transparent 70%),
    linear-gradient(135deg, #0f2027, #2c5364); }
.th-ed.has-bg .th-backdrop { opacity: 1; }
.th-ed.has-bg .pn { background: color-mix(in srgb, var(--e-page) 74%, transparent); }
.th-ed.has-bg .tabs { background: color-mix(in srgb, var(--e-panel) 74%, transparent); }
.th-ed.has-bg .ws-dots { background-color: color-mix(in srgb, var(--e-page) 74%, transparent); }
.th-ed.has-bg .ed-top { background: color-mix(in srgb, var(--e-bg) 74%, transparent); }
.th-ed .sd-caption { z-index: 6; }

/* 导出提示 */
.th-toast { position: absolute; right: 14px; top: 44px; z-index: 7; padding: 8px 12px; font-size: 11.5px; color: #fff; background: rgb(22 25 31 / 92%); border: 1px solid var(--e-line); border-radius: 8px; box-shadow: 0 10px 30px rgb(0 0 0 / 40%); opacity: 0; translate: 0 -6px; transition: opacity 0.3s, translate 0.3s var(--ease); }
.th-toast::before { content: "✓"; margin-right: 8px; font-weight: 700; color: var(--green); }
.th-toast.show { opacity: 1; translate: 0 0; }

/* 手机：没有 fit-mode 时叠成两行，舞台收起 */
@media (max-width: 860px) {
  body:not(.fit-mode) .th-ed { aspect-ratio: auto; height: 540px; }
  body:not(.fit-mode) .th-ed .ed-body { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
  body:not(.fit-mode) .th-stage { display: none; }
}