/* 编辑器页：复用 site.css 的设计令牌（亮 / 暗主题自动生效） */

body.app { height: 100dvh; display: grid; grid-template-rows: var(--nav-h) auto minmax(0, 1fr); overflow: hidden; font-size: 14px; line-height: 1.5; }
.spacer { flex: 1; }

/* 工具栏 */
.toolbar-app {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px;
  border-bottom: 1px solid var(--line-2); background: var(--bg);
}
.tb-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tb-sep { width: 1px; height: 20px; background: var(--line); }
.tb {
  font-size: 13px; font-weight: 500; line-height: 1; padding: 8px 14px; border-radius: 980px; border: 0; cursor: pointer;
  background: var(--surface-2); color: var(--text); text-decoration: none; white-space: nowrap;
  transition: background .2s, transform .2s var(--ease-spring), color .2s;
}
a.tb { display: inline-flex; align-items: center; }
.tb:hover { background: var(--surface-3); text-decoration: none; }
.tb:active { transform: scale(.96); }
.tb.primary { background: var(--accent); color: var(--on-accent); }
.tb.primary:hover { background: var(--accent-hover); }
.tb.primary.busy { background: var(--danger); }
/* 下拉框：
   1) 原生 <select> 点击打开时会进入 :active，继承 .tb 的 scale(.96) 会和下拉弹出动画叠加成抖动——
      所以单独覆盖 transition / :active，只保留颜色过渡；
   2) 选项文字变化（如切换场景名、重命名）会让 width:auto 的 select 整体宽度跳变，带动相邻按钮回流。
      给常变文本的 select 一个合理的 min-width，避免抖；文字过长用省略号。 */
.select.tb { padding-right: 30px; transition: background .2s, color .2s; max-width: 220px; text-overflow: ellipsis; overflow: hidden; }
.select.tb:active { transform: none; }
#projects { min-width: 148px; }
#examples, #palette { min-width: 128px; }

/* 主区域：教程栏（可收起）| 脚本 | 预览 */
main { display: grid; grid-template-columns: minmax(380px, 40%) minmax(0, 1fr); gap: 14px; padding: 14px; min-height: 0; background: var(--bg-alt); }
body.tut-open main { grid-template-columns: 300px minmax(380px, 1fr) minmax(0, 1fr); }
.tutorial { display: none; }
body.tut-open .tutorial { display: flex; animation: tut-slide-in .24s var(--ease); }
.tut-toggle[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
@keyframes tut-slide-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
.pane { background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line-2), var(--shadow-1); display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
.pane-title { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; color: var(--text-3); font-size: 12px; font-weight: 600; letter-spacing: .06em; border-bottom: 1px solid var(--line-2); }
.status { font: 11.5px var(--mono); letter-spacing: 0; }
.status.ok { color: var(--ok); }
.status.err { color: var(--danger); }

/* 教程栏 */
.tutorial { background: var(--surface); }
.tut-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--line-2); }
.tut-head b { font-size: 13px; font-weight: 650; letter-spacing: -.01em; }
.tut-x { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text-2); cursor: pointer; transition: background .2s; }
.tut-x:hover { background: var(--surface-3); }
.tut-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.tut-intro { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.6; }
/* 分级小标题：把入门 / 进阶等隔开，强化「按序学」的视觉 */
.tut-group-head { margin-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--text-3); text-transform: uppercase; }
.tut-group-head:first-of-type { margin-top: 0; }
/* 快速继续入口：显眼地指向下一个未完成的关卡 */
.tut-resume { align-self: stretch; text-align: left; padding: 12px 14px; border: 0; border-radius: var(--r-md); background: var(--accent); color: var(--on-accent); font: 600 13.5px/1.3 inherit; letter-spacing: -.01em; cursor: pointer; box-shadow: var(--shadow-1); transition: transform .2s var(--ease-spring), filter .2s; }
.tut-resume:hover { transform: translateY(-1px); filter: brightness(1.05); }
.tut-lessons { display: grid; gap: 10px; }
.tut-lesson { text-align: left; border: 0; cursor: pointer; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2); color: var(--text); display: grid; gap: 6px; font: inherit; transition: background .2s, transform .25s var(--ease-spring), box-shadow .2s; }
.tut-lesson:hover { background: var(--surface-3); transform: translateY(-1px); }
.tut-lesson b { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.tut-goal { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.tut-tag { width: fit-content; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 980px; }
.tut-prog { display: block; height: 3px; border-radius: 2px; background: var(--line-2); overflow: hidden; margin-top: 2px; }
.tut-prog i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .4s var(--ease); }
.tut-lesson.done .tut-prog i { background: var(--ok); }
.tut-count { font-size: 11.5px; color: var(--text-3); }
.tut-lesson.done .tut-count { color: var(--ok); font-weight: 600; }
.tut-foot { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 12.5px; }
.tut-foot a { color: var(--text-2); }
.tut-foot a:hover { color: var(--accent); text-decoration: none; }
.tut-back { align-self: flex-start; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 12.5px; cursor: pointer; padding: 0; }
.tut-back:hover { color: var(--accent); }
.tut-title { display: flex; align-items: center; gap: 10px; }
.tut-title h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.tut-dots { display: flex; gap: 6px; flex-wrap: wrap; }
.tut-dots button { width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer; font: 600 12px var(--mono); background: var(--surface-2); color: var(--text-2); transition: background .2s, color .2s, transform .2s var(--ease-spring); }
.tut-dots button:hover { background: var(--surface-3); transform: scale(1.08); }
.tut-dots button.ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.tut-dots button.cur { background: var(--accent); color: var(--on-accent); }
.tut-step { display: grid; gap: 10px; }
.tut-stepno { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--text-3); }
.tut-step h4 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.015em; }
.tut-why { margin: 0; font-size: 13px; line-height: 1.7; color: var(--text-2); }
.tut-edit { font-size: 13px; line-height: 1.6; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); color: var(--text-2); }
.tut-edit code, .tut-why code { font: 12px var(--mono); background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }
.tut-code { border-radius: 12px; background: var(--code-bg); box-shadow: 0 0 0 1px var(--line-2); overflow: hidden; }
.tut-code-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--line-2); font-size: 11.5px; color: var(--text-3); }
.tut-code-bar button { border: 0; background: var(--surface-2); color: var(--text-2); font: inherit; font-size: 11.5px; padding: 3px 10px; border-radius: 980px; cursor: pointer; }
.tut-code-bar button:hover { background: var(--surface-3); }
.tut-code pre { margin: 0; padding: 10px 12px; font: 12px/1.65 var(--mono); tab-size: 2; color: var(--text); }
.tut-code pre .ln { white-space: pre-wrap; overflow-wrap: anywhere; padding-left: 2ch; text-indent: -2ch; }
.tut-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tut-btn { border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 980px; background: var(--surface-2); color: var(--text); transition: background .2s, transform .2s var(--ease-spring); }
.tut-btn:hover { background: var(--surface-3); }
.tut-btn:active { transform: scale(.96); }
.tut-btn.primary { background: var(--accent); color: var(--on-accent); }
.tut-btn.primary:hover { background: var(--accent-hover); }
.tut-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 12.5px; }
.tut-check li { display: flex; gap: 8px; align-items: flex-start; color: var(--text-3); line-height: 1.5; }
.tut-check li::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); }
.tut-check li.ok { color: var(--text); }
.tut-check li.ok::before { box-shadow: none; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.4l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.tut-warn { font-size: 12.5px; line-height: 1.55; padding: 9px 12px; border-radius: 12px; color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.tut-pass { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ok) 13%, transparent); color: var(--ok); font-size: 13px; font-weight: 600; }

/* 脚本编辑器 */
:root { --lh: 21px; }
.code { position: relative; flex: 1; min-height: 0; display: flex; background: var(--code-bg); }
.gutter { width: 50px; flex: none; overflow: hidden; border-right: 1px solid var(--line-2); color: var(--text-3); text-align: right; padding-top: 12px; font: 13px/var(--lh) var(--mono); opacity: .9; }
.gutter .gl { padding-right: 10px; height: var(--lh); position: relative; }
.gutter .gl.err { color: var(--danger); }
.gutter .gl.warn { color: var(--warn); }
.gutter .gl.err::before, .gutter .gl.warn::before { content: ""; position: absolute; left: 9px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.codewrap { position: relative; flex: 1; min-width: 0; overflow: hidden; }
#hl, #src { margin: 0; font: 13px/var(--lh) var(--mono); font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; tab-size: 2; white-space: pre; }
#src { padding: 12px 12px 12px 14px; }
#hl { position: absolute; left: 0; top: 0; min-width: 100%; padding: 12px 0; pointer-events: none; color: var(--text); }
#hl .ln { height: var(--lh); min-width: 100%; width: max-content; padding: 0 14px; }
#hl .ln.err { background: color-mix(in srgb, var(--danger) 13%, transparent); box-shadow: inset 2px 0 var(--danger); }
#hl .ln.warn { background: color-mix(in srgb, var(--warn) 12%, transparent); box-shadow: inset 2px 0 var(--warn); }
#src { position: absolute; inset: 0; width: 100%; height: 100%; color: transparent; caret-color: var(--accent); background: transparent; border: 0; outline: none; resize: none; overflow: auto; }
#src::selection { background: var(--accent-soft); color: transparent; }

/* 控制台 */
.console { border-top: 1px solid var(--line-2); padding: 8px 18px; font-size: 12.5px; height: 128px; overflow: auto; color: var(--text-3); background: var(--surface); }
.console .row { display: flex; gap: 10px; padding: 3px 0; cursor: pointer; }
.console .row:hover { color: var(--text); }
.console .badge { flex: none; font: 11px var(--mono); }
.console .e .badge { color: var(--danger); }
.console .w .badge { color: var(--warn); }
.console .ok { color: var(--ok); cursor: default; }
.console .hint { color: var(--text-3); }

/* 舞台 */
.right { display: flex; flex-direction: column; }
.stagewrap {
  position: relative; flex: 1; min-height: 0; display: grid; place-items: center; padding: 18px;
  background:
    conic-gradient(var(--surface-2) 25%, transparent 0 50%, var(--surface-2) 0 75%, transparent 0) 0 0 / 20px 20px,
    var(--surface);
}
#stage { border-radius: 14px; box-shadow: var(--shadow-2), 0 0 0 1px var(--line-2); }

/* 播放条 */
.transport { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line-2); background: var(--surface); }
.icon { width: 34px; height: 34px; padding: 0; border: 0; display: grid; place-items: center; border-radius: 50%; cursor: pointer; background: var(--surface-2); color: var(--text); transition: background .2s, transform .2s var(--ease-spring), opacity .2s; }
.icon:hover { background: var(--surface-3); }
.icon:active { transform: scale(.92); }
.icon svg { width: 15px; height: 15px; fill: currentColor; }
.icon.muted { opacity: .45; }
.icon.big { width: 40px; height: 40px; background: var(--accent); color: var(--on-accent); }
.icon.big:hover { background: var(--accent-hover); }
.icon.big svg { width: 17px; height: 17px; }
.time { font: 12px var(--mono); color: var(--text-3); min-width: 150px; font-variant-numeric: tabular-nums; }
.chk { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 12.5px; cursor: pointer; user-select: none; white-space: nowrap; }
.transport .select.tb { padding-top: 5px; padding-bottom: 5px; font-size: 12.5px; }
.transport .select.tb { padding-left: 11px; padding-right: 26px; }
/* 底部字幕 / 字号 / 速度：也给个 min-width，切换选项不抖 */
#capStyle { min-width: 108px; }
#capSize { min-width: 92px; }
#speed { min-width: 72px; }
.transport .time { min-width: 96px; }
.chk input { accent-color: var(--accent); }

/* 时间轴 */
.lanes { position: relative; border-top: 1px solid var(--line-2); max-height: 200px; min-height: 64px; overflow-y: auto; overflow-x: hidden; background: var(--bg-alt); cursor: ew-resize; user-select: none; }
.lane { display: flex; height: 26px; border-bottom: 1px solid var(--line-2); }
.lane-name { width: 84px; flex: none; padding: 0 12px; font-size: 12px; color: var(--text-3); line-height: 26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-right: 1px solid var(--line-2); background: var(--surface); }
.lane-track { position: relative; flex: 1; }
.ruler-row { height: 22px; position: sticky; top: 0; z-index: 2; background: var(--surface); }
.ruler-row .tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); font: 10px/22px var(--mono); color: var(--text-3); padding-left: 4px; }
.bar { position: absolute; top: 6px; bottom: 6px; border-radius: 5px; min-width: 3px; opacity: .92; }
.bar.move { background: #0a84ff; }
.bar.transform { background: #bf5af2; }
.bar.style { background: #ff375f; }
.bar.effect { background: #ff9f0a; }
.bar.intro { background: #30d158; opacity: .8; }
.steps-row { height: 28px; background: var(--surface); }
.steps-row .lane-name { line-height: 28px; }
.stepblk { position: absolute; top: 4px; bottom: 4px; border-radius: 7px; margin-left: 1px; background: var(--accent); color: var(--on-accent); font: 700 11px/20px var(--mono); text-align: center; overflow: hidden; opacity: .9; }
.stepblk.odd { background: color-mix(in srgb, var(--accent) 55%, var(--text-3)); }
.lane-more { padding: 6px 14px; color: var(--text-3); font-size: 12px; }
.overlay { position: absolute; left: 84px; right: 0; top: 0; bottom: 0; pointer-events: none; }
.playhead { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--danger); }
.playhead::before { content: ""; position: absolute; top: 0; left: -5px; width: 12px; height: 8px; background: var(--danger); clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* 对象属性面板 */
.inspector { position: absolute; top: 20px; right: 20px; width: 232px; z-index: 5; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-radius: var(--r-md); box-shadow: var(--shadow-2), 0 0 0 1px var(--line-2); overflow: hidden; }
.insp-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
.insp-title { font-size: 13px; font-weight: 650; }
.insp-head .icon { width: 24px; height: 24px; font-size: 11px; }
.insp-body { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow: auto; }
.insp-field { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.insp-field label { flex: 0 0 52px; color: var(--text-3); }
.insp-field input { flex: 1; min-width: 0; font: 12px var(--mono); color: var(--text); background: var(--surface-2); border: 0; border-radius: 8px; padding: 6px 9px; outline: none; transition: box-shadow .2s; }
.insp-field input:focus { box-shadow: 0 0 0 2px var(--accent); }
.insp-field input[readonly] { opacity: .55; cursor: not-allowed; }
.insp-hint { font-size: 11px; color: var(--text-3); margin: 2px 0 0; line-height: 1.5; }

/* 弹层 */
.sheet { width: min(760px, 92vw); max-height: 86vh; padding: 0; border: 0; color: var(--text); background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-3), 0 0 0 1px var(--line-2); overflow: hidden; }
.sheet[open] { animation: pop .38s var(--ease-spring); }
@keyframes pop { from { opacity: 0; transform: scale(.95) translateY(10px); } to { opacity: 1; transform: none; } }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 14px 20px; border-bottom: 1px solid var(--line-2); font-size: 16px; }
.sheet-head-tools { display: inline-flex; gap: 8px; align-items: center; }
/* 语法速查用更大的弹窗：几乎铺满可视区，iframe 自撑高度，这样目录和内容都能横向展开 */
.sheet-xl { width: min(1240px, 94vw); max-height: 92vh; }
/* 关键：只在 [open] 时设成 flex，否则会覆盖浏览器默认的 dialog:not([open]){display:none}，让弹窗常驻 */
.sheet-xl[open] { display: flex; flex-direction: column; }
.sheet-frame { flex: 1; width: 100%; min-height: 420px; height: calc(92vh - 56px); border: 0; background: var(--surface); }
.assets-body { padding: 8px 20px 20px; max-height: calc(86vh - 60px); overflow: auto; }
.assets-group { margin: 14px 0 0; }
.assets-group h4 { margin: 0 0 8px; color: var(--text-3); font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.assets-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.assets-grid button { width: 38px; height: 38px; padding: 0; font-size: 22px; line-height: 1; background: transparent; border: 0; border-radius: 10px; cursor: pointer; transition: background .15s, transform .2s var(--ease-spring); }
.assets-grid button:hover { background: var(--surface-2); transform: scale(1.15); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

@media (max-width: 1180px) {
  /* 屏幕不够宽：教程栏不再挤占三栏，改为叠在脚本栏上方的抽屉 */
  body.tut-open main { grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); }
  body.tut-open .tutorial { grid-row: 1 / span 2; }
  body.tut-open .editor { grid-column: 2; }
  body.tut-open .right { grid-column: 2; }
}
@media (max-width: 900px) {
  body.app { overflow: auto; height: auto; min-height: 100dvh; grid-template-rows: var(--nav-h) auto auto; }
  main, body.tut-open main { grid-template-columns: 1fr; }
  body.tut-open .tutorial { grid-row: auto; max-height: 520px; }
  body.tut-open .editor, body.tut-open .right { grid-column: auto; }
  .editor { height: 420px; }
  .right { height: 640px; }
  .toolbar-app { overflow-x: auto; flex-wrap: nowrap; }
  .tb-sep { display: none; }
}