/* ============================================================================
   FORMA V5 — Gallery / AI Studio 双模式
   ---------------------------------------------------------------------------
   两者共用同一个 Viewer（同一份 WebGL 上下文、同一个 canvas、同一份 DOM），
   但拥有完全不同的：
     · 视觉密度      Gallery 低密度留白 / Studio 高密度工具界面
     · 区域划分      Gallery 三栏策展   / Studio 五区工作台
     · 交互路径      Gallery 观展动线   / Studio 生产动线
   mode 类只负责「显隐与配色」，不移动 canvas，不重建 Viewer。
   ========================================================================== */

/* ---------------- 1. 模式布局骨架 ---------------- */
/* ---------- 应用态外壳：Gallery / Studio 占满视口，不产生整页滚动 ----------
   #app 原本是 height:100dvh，而外壳上方还有 V5 顶栏，两者相加会超出一屏，
   导致底部 Dock 被挤到视口之外（拖到底就找不回来）。这里让外壳严格等于
   视口高度，#app 吃掉剩余空间——Dock 的 bottom 永远落在屏幕内。 */
body.mode-gallery .v5-shell, body.mode-studio .v5-shell { height: 100dvh; min-height: 0; overflow: hidden; }
body.mode-gallery .v5-page, body.mode-studio .v5-page { flex: 1 1 auto; min-height: 0; }
/* #app 用百分比吃满剩余高度（而不是 100dvh），链条上每一级都有确定高度，
   .viewport 的 height:100% 才不会退化成「按 canvas 固有尺寸撑高」。 */
body.mode-gallery #app, body.mode-studio #app { height: 100%; min-height: 0; }
body.mode-gallery .v5-footer, body.mode-studio .v5-footer { display: none; }

/* ---------- 可调整分栏：宽度/高度全部由 CSS 变量承载 ---------- */
#app {
  position: relative;
  /* 兜底值：布局模块初始化后会被真实（并已 clamp 过的）数值覆盖 */
  --st-sidebar: 300px;
  --st-inspector: 372px;
  --st-dock-h: 252px;
  /* 栅格列宽直接引用变量——拖拽只改变量，不重排 DOM、不碰 canvas */
  grid-template-columns: var(--st-sidebar) minmax(0, 1fr) var(--st-inspector);
}
body.mode-gallery #app { /* 观展：默认值更窄，具体数值由布局模块写入 */ --st-inspector: 320px; }

/* 拖拽中：锁定光标并禁止选中，避免拖出文本选区 */
body.st-resizing-x, body.st-resizing-x * { cursor: col-resize !important; user-select: none !important; }
body.st-resizing-y, body.st-resizing-y * { cursor: row-resize !important; user-select: none !important; }

/* ---------- 纵向手柄（改左右面板宽度） ---------- */
.st-handle { position: relative; flex: none; background: transparent; border: 0; z-index: 45; }
.st-handle-x { position: absolute; top: 0; bottom: 0; width: 11px; cursor: col-resize; }
#stHandleLeft { left: var(--st-sidebar); margin-left: -5px; }
#stHandleRight { right: var(--st-inspector); margin-right: -5px; }
.st-handle-x::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 5px; width: 1px;
  background: var(--v5-line); transition: background .16s var(--v5-ease-out);
}
.st-handle-x:hover::after, .st-handle-x.is-dragging::after, .st-handle-x:focus-visible::after {
  background: var(--v5-gold-400); box-shadow: 0 0 0 1px rgba(217, 196, 160, .25);
}
.st-handle-x:focus-visible { outline: none; }

/* ---------- 横向手柄（改底部任务区高度） ---------- */
.st-handle-y { height: 12px; cursor: row-resize; display: grid; place-items: center; }
.st-handle-y::after {
  content: ''; width: 46px; height: 3px; border-radius: 2px;
  background: var(--v5-line-2); transition: background .16s var(--v5-ease-out), width .16s var(--v5-ease-out);
}
.st-handle-y:hover::after, .st-handle-y.is-dragging::after, .st-handle-y:focus-visible::after {
  background: var(--v5-gold-400); width: 84px;
}
.st-handle-y:focus-visible { outline: none; }
/* Gallery 没有底部任务区：手柄不占位 */
body.mode-gallery .st-handle-y { display: none; }

/* Gallery 下彻底隐藏生产工具（AI 管线由 Studio 独占） */
body.mode-gallery #studioToolbar,
body.mode-gallery #studioTree,
body.mode-gallery #studioRail,
body.mode-gallery #studioDock,
body.mode-gallery #stCompareBar,
body.mode-gallery #pipelineSect { display: none !important; }

/* Studio 下隐藏观展专属控件 */
body.mode-studio .topbar,
body.mode-studio .bottombar,
body.mode-studio .gl-card,
body.mode-studio .gl-actions { display: none !important; }

/* 左栏 = 作品列表 + 资源树，作为一整栏滚动（用户要求：内容不删，整栏可滑）
   滚动容器唯一是 .sidebar：studio-body 取自然高度不再抢占 flex:1，
   资源树也不自带内部滚动，展开多少内容整栏就多长，由整栏统一滚。 */
body.mode-studio .sidebar { overflow-y: auto; overflow-x: hidden; }
/* 滚轮即可滚动：不显示这条侧边滚动条（Firefox 用 scrollbar-width，Chromium 隐藏伪元素） */
body.mode-studio .sidebar { scrollbar-width: none; }
body.mode-studio .sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }
body.mode-studio .sidebar-body { flex: none; overflow: visible; }
body.mode-studio #studioTree { flex: none; min-height: 0; overflow: visible; }
body.mode-studio #studioTree .st-list { max-height: none; overflow: visible; }
body.mode-studio #glDrawer { display: none !important; }

/* Studio 主体改成纵向五区：工具条 / 视口 / Dock */
body.mode-studio main.workspace { background: var(--v5-bg-base); }
body.mode-studio .viewport-shell { flex: 1 1 auto; min-height: 0; }

/* 窄屏：Studio 也必须可用——左右容器折叠成抽屉式滚动区 */
@media (max-width: 1280px) {
  body.mode-studio #app { grid-template-columns: 246px minmax(0, 1fr) 320px; }
}
@media (max-width: 1080px) {
  body.mode-studio #app { grid-template-columns: 220px minmax(0, 1fr); }
  body.mode-studio #studioRail { display: none !important; }
}
@media (max-width: 780px) {
  /* 触控窄屏不提供拖拽分栏：面板改为抽屉/折叠，避免误触与拖不动 */
  .st-handle-x { display: none !important; }
  body.mode-studio #app { grid-template-columns: minmax(0, 1fr); }
  body.mode-studio #studioTree { position: absolute; inset: 0 auto 0 0; width: 86vw; max-width: 320px; z-index: 40; background: var(--v5-bg-surface); box-shadow: var(--v5-shadow-2); }
  body.mode-studio #studioDock { max-height: 42vh; }
}

/* ============================================================================
   2. AI Studio 组件系统
   ========================================================================== */
.st-hidden-input { display: none; }

/* ---------- 顶部工具条 ---------- */
.st-toolbar {
  flex: none;
  height: 50px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px;
  border-bottom: 1px solid var(--v5-line-2);
  background: linear-gradient(180deg, var(--v5-bg-raised), var(--v5-bg-surface));
}
.st-crumb { display: flex; align-items: center; gap: 7px; min-width: 0; }
.st-crumb-app {
  font: 600 10px/1 var(--v5-ff-mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--v5-gold-300); padding: 5px 8px; border: 1px solid var(--v5-line-gold); border-radius: var(--v5-r-xs);
  background: rgba(217, 196, 160, .07);
}
.st-crumb-sep { color: var(--v5-tx-lo); }
.st-crumb-item {
  font-size: var(--v5-fs-sm); color: var(--v5-tx-hi);
  max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-tb-spacer { flex: 1 1 auto; }
.st-tb-group { display: flex; align-items: center; gap: 6px; }

.st-btn {
  font: 500 12px/1 var(--v5-ff-sans);
  color: var(--v5-tx); cursor: pointer;
  padding: 7px 11px; border-radius: var(--v5-r-sm);
  border: 1px solid var(--v5-line-2); background: var(--v5-bg-overlay);
  transition: border-color .16s var(--v5-ease-out), color .16s var(--v5-ease-out), background .16s var(--v5-ease-out);
}
.st-btn:hover:not(:disabled) { color: var(--v5-tx-hi); border-color: rgba(242, 237, 228, .3); }
.st-btn:disabled { opacity: .42; cursor: not-allowed; }
.st-btn-primary { background: rgba(217, 196, 160, .16); border-color: var(--v5-line-gold); color: var(--v5-gold-100); }
.st-btn-primary:hover:not(:disabled) { background: rgba(217, 196, 160, .26); }
.st-btn.is-on { border-color: var(--v5-line-gold); color: var(--v5-gold-200); }

/* 后端连接状态药丸 */
.st-status {
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 11px/1 var(--v5-ff-sans); cursor: pointer;
  padding: 7px 10px; border-radius: var(--v5-r-pill);
  border: 1px solid var(--v5-line-2); background: var(--v5-bg-inset); color: var(--v5-tx);
}
.st-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--v5-tx-lo); flex: none; }
.st-dot.is-online { background: var(--v5-ok); box-shadow: 0 0 0 3px rgba(116, 189, 151, .16); }
.st-dot.is-offline { background: var(--v5-err); box-shadow: 0 0 0 3px rgba(212, 112, 92, .16); }
.st-dot.is-connecting { background: var(--v5-warn); animation: stPulse 1.1s infinite ease-in-out; }
@keyframes stPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.st-status.is-offline { border-color: rgba(212, 112, 92, .5); color: var(--v5-err); }
.st-status.is-online { border-color: rgba(116, 189, 151, .42); }
.st-status-retry { font-size: 10px; color: var(--v5-tx-lo); padding-left: 2px; border-left: 1px solid var(--v5-line-2); margin-left: 2px; }

/* ---------- 左侧资源树 ---------- */
.st-tree {
  display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto;
  background: linear-gradient(180deg, var(--v5-bg-surface), var(--v5-bg-inset));
  border-right: 1px solid var(--v5-line); padding: 10px 10px 6px;
}
.st-tree-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.st-tree-title { font: 600 10px/1 var(--v5-ff-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--v5-tx-lo); }
.st-icon-btn {
  width: 24px; height: 24px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--v5-line-2); border-radius: var(--v5-r-xs);
  background: var(--v5-bg-overlay); color: var(--v5-tx);
}
.st-icon-btn:hover { color: var(--v5-tx-hi); border-color: rgba(242, 237, 228, .28); }

.st-search {
  width: 100%; margin-bottom: 8px; padding: 6px 9px;
  font: 400 12px/1.4 var(--v5-ff-sans); color: var(--v5-tx-hi);
  background: var(--v5-bg-inset); border: 1px solid var(--v5-line-2); border-radius: var(--v5-r-sm);
}
.st-search::placeholder { color: var(--v5-tx-lo); }
.st-search:focus-visible { outline: none; border-color: var(--v5-line-gold); }

.st-batch-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 2px 8px; border-bottom: 1px solid var(--v5-line); margin-bottom: 8px; }
.st-batch-count { font: 500 10.5px/1 var(--v5-ff-mono); color: var(--v5-gold-300); }

.st-sect { margin-bottom: 10px; }
.st-sect-head {
  width: 100%; display: flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 5px 4px; border: 0; background: none; color: var(--v5-tx-lo);
  font: 600 10px/1 var(--v5-ff-mono); letter-spacing: .16em; text-transform: uppercase;
}
.st-sect-head:hover { color: var(--v5-tx); }
.st-sect-title { flex: 1 1 auto; text-align: left; }
.st-sect-count { font-size: 10px; color: var(--v5-tx-lo); }
.st-caret { font-size: 9px; }
.st-list { display: flex; flex-direction: column; gap: 2px; max-height: 34vh; overflow-y: auto; padding-left: 4px; }
.st-list::-webkit-scrollbar { width: 7px; }
.st-list::-webkit-scrollbar-thumb { background: #2a2f38; border-radius: 4px; }

.st-row {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 6px 7px; border-radius: var(--v5-r-xs); border: 1px solid transparent;
}
.st-row:hover { background: rgba(242, 237, 228, .05); }
.st-row.is-active { background: rgba(217, 196, 160, .13); border-color: var(--v5-line-gold); }
.st-row-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.st-row-name { font-size: 12px; color: var(--v5-tx-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-row-meta { font: 400 10px/1.3 var(--v5-ff-mono); color: var(--v5-tx-lo); }
.st-row-badge {
  flex: none; font: 500 9px/1 var(--v5-ff-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--v5-jade-300); background: rgba(143, 179, 166, .12); border: 1px solid rgba(143, 179, 166, .3);
  padding: 3px 5px; border-radius: var(--v5-r-xs);
}
.st-row-check { flex: none; accent-color: var(--v5-gold-400); }
.st-row-version { cursor: default; }
.st-ver-badge {
  flex: none; font: 600 10px/1 var(--v5-ff-mono); color: var(--v5-gold-200);
  background: rgba(217, 196, 160, .12); border: 1px solid var(--v5-line-gold);
  padding: 4px 6px; border-radius: var(--v5-r-xs);
}

.st-hint { margin: 4px 0; font-size: 11px; line-height: 1.5; color: var(--v5-tx-lo); }
.st-hint.is-warn { color: var(--v5-warn); }
.st-hint.is-info { color: var(--v5-info); }
.st-hint.is-ok { color: var(--v5-ok); }

/* ---------- 右侧 Lab 坞 ---------- */
.st-labs { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.st-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid var(--v5-line-2); }
.st-tabs::-webkit-scrollbar { height: 0; }
.st-tab {
  flex: none; cursor: pointer; white-space: nowrap;
  font: 500 11px/1 var(--v5-ff-sans); color: var(--v5-tx-lo);
  padding: 8px 10px; border: 0; border-bottom: 2px solid transparent; background: none;
}
.st-tab:hover { color: var(--v5-tx); }
.st-tab[aria-selected="true"] { color: var(--v5-gold-200); border-bottom-color: var(--v5-gold-400); }
.st-pane-stack { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 12px 16px; }
.st-pane-stack::-webkit-scrollbar { width: 8px; }
.st-pane-stack::-webkit-scrollbar-thumb { background: #2a2f38; border-radius: 4px; }
.st-scene-heading { margin: 4px 0 6px; padding: 16px 6px 10px; border-top: 1px solid var(--v5-line); color: var(--v5-gold-200); font: 500 12px/1.5 var(--v5-ff-sans); }
body.mode-studio .st-pane-stack { overflow: visible; }
body.mode-studio .st-scene-controls[hidden] { display: none; }

.st-subhead {
  margin: 12px 0 6px; font: 600 10px/1 var(--v5-ff-mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--v5-tx-lo);
  padding-bottom: 5px; border-bottom: 1px solid var(--v5-line);
}
.st-subhead:first-child { margin-top: 0; }
.st-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin-bottom: 8px; }
.st-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.st-kv-k { font-size: 11px; color: var(--v5-tx-lo); flex: none; }
.st-kv-v { font: 500 11.5px/1.4 var(--v5-ff-mono); color: var(--v5-tx-hi); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-kv-v.is-warn { color: var(--v5-warn); }
.st-kv-v.is-ok { color: var(--v5-ok); }

.st-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.st-field { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--v5-tx-lo); }
.st-field.st-inline { gap: 6px; }
.st-field > span { flex: none; }
.st-range { flex: 1 1 auto; min-width: 90px; accent-color: var(--v5-gold-400); }
.st-num { flex: none; min-width: 42px; text-align: right; font: 500 11px/1 var(--v5-ff-mono); color: var(--v5-tx-hi); font-style: normal; }
.st-color { width: 34px; height: 24px; padding: 0; border: 1px solid var(--v5-line-2); border-radius: var(--v5-r-xs); background: none; }
.st-select {
  font: 400 12px/1.4 var(--v5-ff-sans); color: var(--v5-tx-hi);
  background: var(--v5-bg-inset); border: 1px solid var(--v5-line-2); border-radius: var(--v5-r-sm); padding: 5px 8px;
}
.st-select option { background: var(--v5-bg-overlay); color: var(--v5-tx-hi); }
.st-check { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--v5-tx); cursor: pointer; }
.st-check input { accent-color: var(--v5-gold-400); }

.st-issue { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 1px dashed var(--v5-line); font-size: 11.5px; }
.st-issue-tag { flex: none; font: 600 9px/1 var(--v5-ff-mono); letter-spacing: .1em; padding: 3px 5px; border-radius: var(--v5-r-xs); }
.st-issue.is-error .st-issue-tag { color: var(--v5-err); background: rgba(212, 112, 92, .14); }
.st-issue.is-warn .st-issue-tag { color: var(--v5-warn); background: rgba(217, 167, 81, .14); }
.st-issue.is-info .st-issue-tag { color: var(--v5-info); background: rgba(125, 159, 196, .14); }
.st-issue-msg { color: var(--v5-tx); line-height: 1.5; }
.st-issue-target { font: 400 10px/1.5 var(--v5-ff-mono); color: var(--v5-tx-lo); }

.st-mat-list { display: flex; flex-direction: column; gap: 4px; max-height: 30vh; overflow-y: auto; margin-bottom: 10px; }
.st-mat-row {
  display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  padding: 7px 9px; border: 1px solid var(--v5-line); border-radius: var(--v5-r-sm); background: var(--v5-bg-inset);
}
.st-mat-row:hover { border-color: rgba(242, 237, 228, .24); }
.st-mat-row.is-active { border-color: var(--v5-line-gold); background: rgba(217, 196, 160, .1); }
.st-mat-name { font-size: 12px; color: var(--v5-tx-hi); }
.st-mat-meta { font: 400 10px/1.3 var(--v5-ff-mono); color: var(--v5-tx-lo); }
.st-mat-edit { display: flex; flex-direction: column; gap: 8px; }

.st-geom-list { display: flex; flex-direction: column; gap: 3px; }
.st-geom-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 6px 0; border-bottom: 1px dashed var(--v5-line); }
.st-geom-name { font-size: 12px; color: var(--v5-tx-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-geom-num { font: 500 11px/1.4 var(--v5-ff-mono); color: var(--v5-gold-200); text-align: right; }
.st-geom-flags { grid-column: 1 / -1; font: 400 10px/1.4 var(--v5-ff-mono); color: var(--v5-tx-lo); }

.st-tex-row { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--v5-line); }
.st-tex-badge {
  flex: none; font: 600 9px/1 var(--v5-ff-mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 6px; border-radius: var(--v5-r-xs); border: 1px solid var(--v5-line-2); color: var(--v5-tx-lo);
}
.st-tex-badge.is-emb { color: var(--v5-ok); border-color: rgba(116, 189, 151, .4); background: rgba(116, 189, 151, .12); }
.st-tex-badge.is-ext { color: var(--v5-info); border-color: rgba(125, 159, 196, .4); background: rgba(125, 159, 196, .12); }
.st-tex-badge.is-miss { color: var(--v5-err); border-color: rgba(212, 112, 92, .45); background: rgba(212, 112, 92, .14); }
.st-tex-badge.is-live { color: var(--v5-jade-300); border-color: rgba(143, 179, 166, .35); }
.st-tex-name { font-size: 11.5px; color: var(--v5-tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-tex-dim { font: 400 10px/1.3 var(--v5-ff-mono); color: var(--v5-tx-lo); }

.st-link-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.st-link {
  font-size: 11.5px; color: var(--v5-gold-200); text-decoration: none;
  padding: 6px 10px; border: 1px solid var(--v5-line-gold); border-radius: var(--v5-r-sm); background: rgba(217, 196, 160, .08);
}
.st-link:hover { background: rgba(217, 196, 160, .18); color: var(--v5-gold-100); }

/* ---------- 底部 Dock ---------- */
.st-dock {
  flex: none; display: flex; flex-direction: column;
  /* 高度由布局变量控制；min-height 只保留折叠后的头部，不再写死展开尺寸 */
  height: var(--st-dock-h); min-height: 40px; max-height: 100%;
  border-top: 1px solid var(--v5-line-2); background: linear-gradient(180deg, var(--v5-bg-surface), var(--v5-bg-inset));
}
.st-dock.is-collapsed .st-dock-stack { display: none; }
.st-dock.is-collapsed .st-dock-stack { display: none; }
.st-dock-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--v5-line); }
.st-dock-tabs { display: flex; gap: 2px; }
.st-dock-tab {
  cursor: pointer; font: 500 11px/1 var(--v5-ff-sans); color: var(--v5-tx-lo);
  padding: 6px 9px; border: 0; border-bottom: 2px solid transparent; background: none;
}
.st-dock-tab[aria-selected="true"] { color: var(--v5-gold-200); border-bottom-color: var(--v5-gold-400); }
.st-dock-spacer { flex: 1 1 auto; }
.st-dock-btn {
  cursor: pointer; width: 26px; height: 22px; display: grid; place-items: center;
  border: 1px solid var(--v5-line-2); border-radius: var(--v5-r-xs); background: var(--v5-bg-overlay); color: var(--v5-tx);
}
.st-progress-pill { font: 500 10px/1 var(--v5-ff-mono); color: var(--v5-tx-lo); padding: 4px 8px; border: 1px solid var(--v5-line-2); border-radius: var(--v5-r-pill); }
.st-progress-pill.is-busy { color: var(--v5-warn); border-color: rgba(217, 167, 81, .5); }
.st-dock-stack { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 12px; }
.st-dock-stack::-webkit-scrollbar { width: 8px; }
.st-dock-stack::-webkit-scrollbar-thumb { background: #2a2f38; border-radius: 4px; }
.st-dock-pane { display: flex; flex-direction: column; gap: 8px; }
.st-dock-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-dock-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; }
@media (max-width: 900px) { .st-dock-cols { grid-template-columns: 1fr; } }
.st-col { min-width: 0; }
.st-ops { display: flex; flex-direction: column; gap: 2px; max-height: 26vh; overflow-y: auto; padding-right: 4px; }
.st-op-row { padding: 5px 6px; border-radius: var(--v5-r-xs); }
.st-op-row:hover { background: rgba(242, 237, 228, .05); }
.st-op-name { flex: none; font-size: 12px; color: var(--v5-tx-hi); }
.st-op-group { flex: 1 1 auto; font: 400 9.5px/1 var(--v5-ff-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--v5-tx-lo); }
.st-risk { color: var(--v5-warn); font-style: normal; }
.st-params { min-height: 30px; }

.st-progress { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.st-progress-fill { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--v5-line-2); border-top-color: var(--v5-gold-400); animation: stSpin .8s linear infinite; }
@keyframes stSpin { to { transform: rotate(360deg); } }
.st-progress-text { font-size: 11.5px; color: var(--v5-tx); }

.st-confirm {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding: 8px 10px; border: 1px solid rgba(217, 167, 81, .45); border-radius: var(--v5-r-sm);
  background: rgba(217, 167, 81, .1);
}
.st-confirm strong { font-size: 11.5px; color: var(--v5-warn); }
.st-confirm-reason { font-size: 11.5px; color: var(--v5-tx); }
.st-confirm .st-hint { flex: 1 1 100%; margin: 0; }

.st-offline { display: flex; flex-direction: column; gap: 6px; }
.st-offline strong { font-size: 12px; color: var(--v5-err); }
.st-cmd {
  font: 400 11.5px/1.6 var(--v5-ff-mono); color: var(--v5-gold-200);
  background: var(--v5-bg-inset); border: 1px solid var(--v5-line-2); border-radius: var(--v5-r-xs); padding: 6px 8px;
}

.st-log-head { font: 500 11px/1.5 var(--v5-ff-mono); color: var(--v5-gold-200); }
.st-log-line { font: 400 11px/1.6 var(--v5-ff-mono); color: var(--v5-tx); }
.st-log-arg { font: 400 10.5px/1.5 var(--v5-ff-mono); color: var(--v5-tx-lo); padding-left: 14px; overflow-wrap: anywhere; }
.st-log-err { font-size: 11.5px; color: var(--v5-err); }
.st-log-summary { margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: var(--v5-tx-hi); }

.st-hist-row { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px dashed var(--v5-line); }
.st-hist-time { flex: none; font: 400 10.5px/1.5 var(--v5-ff-mono); color: var(--v5-tx-lo); }
.st-hist-desc { font-size: 11.5px; color: var(--v5-tx); }

.st-verify-head { font: 600 12px/1.4 var(--v5-ff-sans); }
.st-verify-head.is-ok { color: var(--v5-ok); }
.st-verify-head.is-bad { color: var(--v5-err); }
.st-verify-row { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px dashed var(--v5-line); font-size: 11.5px; }
.st-verify-row.is-bad .st-verify-res { color: var(--v5-err); }
.st-verify-name { color: var(--v5-tx); }
.st-verify-res { font: 500 10.5px/1.4 var(--v5-ff-mono); color: var(--v5-ok); }
.st-verify-note { color: var(--v5-tx-lo); }
.st-change-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 4px 0; font-size: 11.5px; }
.st-change-op { font: 500 10.5px/1.4 var(--v5-ff-mono); color: var(--v5-gold-200); }
.st-change-txt { color: var(--v5-tx); }
.st-kv-row { font: 400 11.5px/1.6 var(--v5-ff-mono); color: var(--v5-tx); }

/* ---------- 视口里的 Before/After 对比条 ---------- */
.st-compare-bar {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; z-index: 6;
  padding: 8px 12px; border-radius: var(--v5-r-pill);
  border: 1px solid var(--v5-line-gold); background: rgba(10, 12, 15, .86); backdrop-filter: blur(10px);
}
.st-compare-label { font: 600 9.5px/1 var(--v5-ff-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--v5-gold-300); }
.st-compare-bar input[type="range"] { width: clamp(120px, 24vw, 280px); accent-color: var(--v5-gold-400); }

/* ============================================================================
   3. Gallery 观展模式组件
   ========================================================================== */
body.mode-gallery .inspector { background: linear-gradient(180deg, #101318 0%, #07080a 100%); }
body.mode-gallery .inspector-body { padding: 14px 14px 20px; }

.gl-card {
  margin-bottom: 12px; padding: 14px;
  border: 1px solid var(--v5-line-gold); border-radius: var(--v5-r-md);
  background: linear-gradient(180deg, rgba(217, 196, 160, .07), rgba(217, 196, 160, .02));
}
.gl-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.gl-card-eyebrow { font: 600 9.5px/1 var(--v5-ff-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--v5-gold-300); }
.gl-card-index { font: 500 10px/1 var(--v5-ff-mono); color: var(--v5-tx-lo); }
.gl-card-title { margin: 0; font: 400 26px/1.1 var(--v5-ff-display); color: var(--v5-ivory-200); }
.gl-card-sub { margin: 4px 0 12px; font: 400 10px/1 var(--v5-ff-mono); letter-spacing: .22em; color: var(--v5-tx-lo); }
.gl-card-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0; }
.gl-card-specs div { display: flex; flex-direction: column; gap: 2px; }
.gl-card-specs dt { font: 400 9.5px/1 var(--v5-ff-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--v5-tx-lo); }
.gl-card-specs dd { margin: 0; font: 500 13px/1.2 var(--v5-ff-mono); color: var(--v5-tx-hi); }
.gl-card-note { margin: 12px 0 0; font-size: 11px; line-height: 1.6; color: var(--v5-tx-lo); }

.gl-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.gl-btn {
  cursor: pointer; padding: 9px 6px; border-radius: var(--v5-r-sm);
  border: 1px solid var(--v5-line-2); background: var(--v5-bg-overlay); color: var(--v5-tx);
  font: 500 11.5px/1 var(--v5-ff-sans);
}
.gl-btn:hover { color: var(--v5-tx-hi); border-color: rgba(242, 237, 228, .28); }
.gl-btn-primary { background: rgba(217, 196, 160, .16); border-color: var(--v5-line-gold); color: var(--v5-gold-100); }

/* Gallery 右栏：分组观感统一为「展签」样式 */
body.mode-gallery .inspector-body > details.sect > summary {
  padding: 10px 2px; letter-spacing: .05em; color: var(--v5-tx-hi);
}
body.mode-gallery .inspector-body > details.sect { border-bottom: 1px solid var(--v5-line); }

/* 侧栏策展：技术演示单独降权 */
body.mode-gallery .group.is-demos { border-top: 1px dashed var(--v5-line); padding-top: 10px; }
body.mode-gallery .group.is-demos .group-title { color: var(--v5-tx-lo); }
body.mode-gallery .group.is-exhibits .group-title { color: var(--v5-gold-200); }

/* ---------- Gallery 辅助信息栏折叠 ---------- */
body.gl-rail-hidden #app { grid-template-columns: var(--st-sidebar) minmax(0, 1fr) 0px; }
body.gl-rail-hidden .inspector { display: none; }
body.gl-rail-hidden #stHandleRight { display: none; }

.gl-rail-btn {
  margin-left: auto; width: 24px; height: 24px; display: grid; place-items: center;
  cursor: pointer; border: 1px solid var(--v5-line-2); border-radius: var(--v5-r-xs);
  background: var(--v5-bg-overlay); color: var(--v5-tx-lo); font-size: 13px; line-height: 1;
}
.gl-rail-btn:hover { color: var(--v5-gold-200); border-color: var(--v5-line-gold); }
body.mode-studio .gl-rail-btn { display: none; }

/* 收起后的展开入口：常驻视口右上角，保证随时能把信息栏拉回来 */
.gl-rail-restore {
  position: absolute; top: 14px; right: 14px; z-index: 8; display: none;
  align-items: center; gap: 7px; cursor: pointer;
  padding: 7px 11px; border-radius: var(--v5-r-pill);
  border: 1px solid var(--v5-line-gold); background: rgba(10, 12, 15, .82); backdrop-filter: blur(8px);
  color: var(--v5-gold-200); font: 500 11px/1 var(--v5-ff-sans);
}
body.gl-rail-hidden .gl-rail-restore { display: inline-flex; }
.gl-rail-restore:hover { background: rgba(217, 196, 160, .18); color: var(--v5-gold-100); }

/* Settings stay inside the inspector grid column: no backdrop or focus trap. */
.gl-drawer { display:flex; flex-direction:column; min-height:0; width:100%; color:var(--v5-tx); }
.gl-drawer[hidden] { display:none; }
body.mode-gallery .inspector-body:has(.gl-drawer:not([hidden])) { display:flex; flex-direction:column; overflow:hidden; padding:0; }
body.mode-gallery .gl-drawer:not([hidden]) { flex:1; }
.gl-curation, .gl-stage-controls { display:none; }
body.mode-gallery .gl-curation { display:block; padding:40px 24px; }
.gl-curation h2 { font:400 32px/1.3 var(--v5-ff-display); margin:20px 0; }
.gl-curation p:not(.v5-eyebrow) { font-size:14px; line-height:1.9; color:var(--v5-tx-lo); }
.gl-curation a { display:inline-block; margin-top:24px; color:var(--v5-gold-300); font-size:13px; }
body.mode-gallery .sidebar-head, body.mode-gallery .group.is-exhibits,
body.mode-gallery .vp-buttons, body.mode-gallery .axis-guide,
body.mode-gallery .vp-meta-bl, body.mode-gallery .obj-caption { display:none; }
body.mode-gallery .gl-stage-controls { display:flex; flex-direction:column; flex:none; padding:0 16px 12px; gap:8px; }
.gl-caption .vp-meta-tr { position:static; max-width:none; text-align:left; padding:0; }
.gl-caption .obj-name { font:400 24px/1.4 var(--v5-ff-display); }
.gl-caption .obj-roman { font-size:11px; color:var(--v5-tx-lo); }
.gl-stage-controls .gl-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0; }
.gl-stage-controls .gl-actions button { justify-content:center; font:500 13px/1.4 var(--v5-ff-sans); min-height:44px; border:1px solid var(--v5-line-control); border-radius:6px; background:var(--v5-bg-surface); }
.gl-stage-controls .gl-actions button.active { color:var(--v5-gold-300); border-color:var(--v5-gold-400); }
.gl-selection { min-width:0; overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--v5-line-control) transparent; }
.gl-selection-nav { display:none; align-items:center; justify-content:space-between; gap:8px; color:var(--v5-tx-lo); font-size:12px; }
@media(max-width:1199px) { .gl-selection-nav { display:flex; } }
.gl-selection-nav button { color:var(--v5-gold-300); background:transparent; border:1px solid var(--v5-line-control); border-radius:4px; padding:8px; min-height:36px; font:inherit; cursor:pointer; }
.gl-selection-nav button:disabled { opacity:.45; cursor:default; }
.gl-selection #groupFigurines { display:grid; grid-template-columns:repeat(5,minmax(116px,1fr)); padding:0; gap:8px; }
.gl-selection .asset { display:flex; flex-direction:column; text-align:left; align-items:stretch; gap:8px; padding:8px; border-radius:0; border:0; border-bottom:2px solid transparent; }
.gl-selection .asset.selected { border-color:var(--v5-gold-300); background:rgb(217 196 160 / .04); }
.gl-selection .asset-thumb { width:100%; height:64px; border:0; border-radius:0; background:transparent; }
.gl-selection .asset-thumb img { object-fit:contain; }
.gl-selection .asset-thumb:has(img) .asset-fallback { display:none; }
.gl-selection .asset-name { font-size:12px; min-height:18px; }
.gl-selection .asset-name em, .gl-selection .asset-sub, .gl-selection .asset-num { display:none; }
.gl-secondary { display:flex; gap:8px; margin-bottom:16px; }
.gl-secondary button { min-height:44px; padding:8px 12px; }
body.mode-gallery .gl-card { border:0; background:none; padding:16px 8px; }
body.mode-gallery .gl-card-title, body.mode-gallery .gl-card-sub { display:none; }
.gl-card-specs { grid-template-columns:1fr; gap:20px; margin-top:24px; }
.gl-card-specs dt, .gl-card-note { font-size:12px; color:var(--v5-tx-lo); line-height:1.5; }
.gl-card-specs dd { font-size:15px; }
body.mode-gallery #openInspector, body.mode-gallery #closeInspector { display:none; }
.gl-drawer .sidebar-body, .gl-drawer .sidebar-foot { flex:none; overflow:visible; }
.gl-drawer .group.is-exhibits { display:none; }
@media (max-width:980px) {
  body.mode-gallery #app { grid-template-columns:minmax(0,1fr) 300px; }
  body.mode-gallery.gl-rail-hidden #app { grid-template-columns:minmax(0,1fr); }
  body.mode-gallery #sidebar, body.mode-gallery .st-handle-x { display:none; }
  body.mode-gallery .gl-stage-controls { padding-inline:12px; }
  body.mode-gallery .mobile-gallery { display:none; }
}
@media (max-width:767px), (max-height:650px) {
  body.mode-gallery { height:auto; min-height:100%; overflow-y:auto; overflow-x:clip; }
  body.mode-gallery .v5-shell { height:auto; min-height:100dvh; overflow:visible; }
  body.mode-gallery #app { height:auto; }
  body.mode-gallery .viewport-shell { height:clamp(360px,48vh,520px); flex:none; }
  body.mode-gallery .gl-stage-controls { gap:12px; padding-bottom:20px; }
  .gl-selection .asset-thumb { height:88px; }
  .gl-caption .obj-name { font-size:22px; }
  body.mode-gallery .vp-meta-tl { top:12px; left:12px; }
}
/* At native browser zoom, keep an actual model viewport and scroll the middle column. */
@media (max-height:600px) {
  body.mode-studio main.workspace { overflow-y:auto; }
  body.mode-studio .viewport-shell { flex:none; height:320px; min-height:320px; }
}
@keyframes glSlide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.gl-drawer-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--v5-line); }
.gl-drawer-head h3 { margin: 0; font: 400 18px/1.2 var(--v5-ff-display); color: var(--v5-ivory-200); flex: 1 1 auto; }
.gl-drawer-tag { font: 400 9.5px/1 var(--v5-ff-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--v5-gold-300); }
.gl-drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 16px 24px; }
.gl-drawer-body .sect { border-bottom: 1px solid var(--v5-line); }
.gl-drawer-note { margin: 14px 16px; font-size: 11px; line-height: 1.6; color: var(--v5-tx-lo); }

/* ============================================================================
   4. 可读性修正（下拉菜单 / 控件对比度 / 滚动容器）
   ========================================================================== */
/* 原生下拉在暗背景上默认用系统浅色，导致「白底白字」不可读 */
select, .p-select, select option {
  background-color: var(--v5-bg-inset);
  color: var(--v5-tx-hi);
}
select option { background-color: var(--v5-bg-overlay); color: var(--v5-tx-hi); }
select optgroup { background-color: var(--v5-bg-overlay); color: var(--v5-tx-lo); font-style: normal; }

input[type="range"] { accent-color: var(--v5-gold-400); }
input[type="color"] { background: var(--v5-bg-inset); }
input[type="search"]::-webkit-search-cancel-button { filter: invert(1) opacity(.6); }

.toast { max-width: min(460px, 88vw); word-break: break-word; }

@media (max-width: 650px) {
  body.mode-gallery #app { grid-template-columns: minmax(0, 1fr); }
  .gl-card-specs { grid-template-columns: 1fr 1fr; }
  .gl-actions { grid-template-columns: 1fr; }

}

/* 页脚能力边界说明（静态版 vs 本地完整版） */
.v5-footer-scope { display: block; margin-top: 4px; color: var(--v5-tx-lo); }
.v5-footer-legal { display: flex; flex-wrap: wrap; gap: 4px 18px; }

/* Production workspace: retain one visible asset picker and keep labels readable. */
body.mode-studio .sidebar-body {flex:none;}
body.mode-studio #studioTree {flex:none;overflow:visible;position:static;width:auto;max-width:none;box-shadow:none;}
.st-toolbar {height:auto;min-height:50px;flex-wrap:wrap;padding:8px 12px;gap:8px;}
.st-crumb {flex:1 1 100%;}
.st-tb-group {flex-wrap:wrap;min-width:0;}
.st-btn,.st-tab,.st-status {white-space:nowrap;flex-shrink:0;}
.st-tabs {flex-wrap:wrap;}
.st-agent-controls {display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.st-agent-controls input {flex:1 1 100%;min-width:0;}
.st-dock-row {flex-wrap:wrap;}
.st-mobile-assets,.st-mobile-tools {display:none;}
body.mode-studio #studioRail {display:block !important;}
@media (min-width:981px) {
  body.mode-studio #app {grid-template-columns:var(--st-sidebar) minmax(0,1fr) var(--st-inspector);}
}
@media (max-width:980px) {
  body.mode-studio #app {grid-template-columns:208px minmax(0,1fr);}
  .st-mobile-tools {display:inline-flex;}
  #stHandleRight {display:none;}
  body.mode-studio .inspector {position:absolute;inset:0 0 0 auto;width:min(360px,92vw);max-width:100%;z-index:60;}
  .inspector.open {transform:none;}
}
@media (max-width:650px) {
  body.mode-gallery #app,body.mode-studio #app {grid-template-columns:minmax(0,1fr);}
  .st-mobile-assets {display:inline-flex;}
  body.mode-studio .sidebar {display:none;}
  body.mode-studio .sidebar.st-mobile-open {display:flex;position:absolute;inset:0 auto 0 0;width:min(320px,88vw);z-index:60;background:var(--v5-bg-surface);}
  body.mode-studio #studioTree {position:static;width:auto;max-width:none;box-shadow:none;}
  body.mode-studio .viewport-shell {min-height:240px;}
  .st-toolbar {gap:5px;padding:6px;}
  .st-tb-group {gap:4px;}
  .st-btn {padding:8px;}
  .st-status {margin-left:auto;}
  .st-crumb-item {max-width:24ch;}
  .st-dock-tabs {min-width:0;overflow:auto;}
  body.mode-studio .vp-meta-tr {max-width:48%;}

}



@media (max-width:650px) { body.mode-studio .obj-name {font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .topbar .tool-btn {white-space:nowrap;flex-shrink:0;} }
.st-empty-view { position:absolute; inset:0; z-index:12; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px; padding:32px; background:radial-gradient(ellipse at center,#161b22,#0b0d10 75%); text-align:center; }
.st-empty-view[hidden] { display:none; }
.st-empty-view h2 { color:var(--v5-tx-hi); font-size:24px; font-weight:500; margin:0; }
.st-empty-view p { max-width:400px; line-height:1.8; color:var(--v5-tx-lo); margin:0; }
@media(max-width:640px) { .st-empty-view { padding:20px; gap:12px; } .st-empty-view h2 { font-size:20px; } }

.st-tex-preview { width:64px; height:64px; object-fit:contain; border:1px solid var(--v5-line-2); border-radius:6px; flex:none; }
.st-tex-binding { display:block; flex-basis:100%; color:var(--v5-tx-lo); font-size:11px; overflow-wrap:anywhere; }
.st-tex-row:has(.st-tex-preview) { grid-template-columns:64px minmax(0,1fr); }
.st-tex-row:has(.st-tex-preview) .st-tex-preview { grid-row:span 3; }
.st-tex-row:has(.st-tex-preview) .st-tex-name { white-space:normal; overflow-wrap:anywhere; }
.st-tex-binding { grid-column:1 / -1; }

/* Approved S02–S04: identity/save stay visible; tools keep their original handlers. */
.st-identity { display:flex; align-items:center; gap:12px; width:100%; min-width:0; }
.st-identity .st-crumb { flex:1 1 auto; min-width:0; }
.st-identity .st-crumb-item { max-width:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.st-save-state { flex-shrink:0; color:var(--v5-ok); font-size:12px; }
.st-save-state[data-state="dirty"] { color:var(--v5-warn); }
.st-save-state[data-state="error"] { color:var(--v5-err); }
.st-toolbar .st-status { margin-left:auto; }
.st-version-field { display:grid; gap:4px; margin-bottom:10px; font-size:12px; color:var(--v5-tx-lo); }
.st-version-field select { width:100%; }
.st-material-source { margin:12px 0; color:var(--v5-tx-lo); font-size:12px; }
.st-material-source summary { cursor:pointer; padding-block:8px; }
.st-material-source pre { white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.6 var(--v5-ff-mono); }
.st-number { min-width:0; width:76px; color:var(--v5-tx-hi); background:var(--v5-bg-inset); border:1px solid var(--v5-line-control); border-radius:4px; padding:6px; font:12px/1.4 var(--v5-ff-mono); }
.st-field:has(.st-number) { grid-template-columns:minmax(66px,auto) minmax(32px,1fr) 76px; }
.st-select,.st-input { border-color:var(--v5-line-control); }
.st-hint,.st-field,.st-row-meta,.st-mat-meta,.st-issue-msg,.st-verify-row,.st-log-line,.st-log-arg,.st-kv-row,.st-tex-binding,.st-param { font-size:12px; }
.st-btn,.st-tab,.st-dock-tab,.st-row-name { font-size:13px; }
.st-btn:focus-visible,.st-number:focus-visible { outline:2px solid var(--v5-gold-300); outline-offset:2px; }
@media(max-width:767px) {
  body.mode-studio #app { grid-template-columns:minmax(0,1fr); }
  body.mode-studio .sidebar { display:none; }
  body.mode-studio .sidebar.st-mobile-open { display:flex; position:absolute; inset:0 auto 0 0; width:min(320px,88vw); z-index:60; background:var(--v5-bg-surface); }
  .st-mobile-assets { display:inline-flex; }
  .st-identity { flex-wrap:wrap; gap:8px; }
  .st-identity .st-crumb { flex-basis:100%; }
  .st-save-state { margin-right:auto; }
  .st-toolbar .st-btn { min-height:44px; }
  .st-field input,.st-select { min-height:40px; }

}
#stPresetInfo { overflow-wrap:anywhere; margin:8px 0; }

body.mode-gallery .inspector { position:relative; inset:auto; width:auto; max-width:none; transform:none; box-shadow:none; z-index:auto; }
body.mode-gallery .bottombar { gap:6px; padding-inline:12px; flex-wrap:wrap; height:auto; min-height:44px; }
body.mode-gallery .bottombar .tool-btn { min-height:32px; }
.st-demo-note { display:none; font-size:11px; color:var(--v5-gold-300); line-height:1.6; white-space:normal; }
body.mode-studio .st-demo-note { display:block; }
body.mode-studio .sidebar { scrollbar-width:thin; }
body.mode-studio .sidebar::-webkit-scrollbar { width:6px; display:block; }
.st-tb-tools { gap:6px; }
#stAssetsClose { position:sticky; top:0; z-index:3; flex-shrink:0; background:var(--v5-bg-surface); }
body.mode-studio .st-tabs { position:sticky; top:-6px; z-index:2; background:var(--v5-bg-base); }
body.mode-studio .sidebar-head { display:none; }
@media(max-width:980px) {
  body.mode-studio .inspector:not(.open) { visibility:hidden; pointer-events:none; }
  body.mode-studio .inspector.open { visibility:visible; pointer-events:auto; }
}
@media (min-width:981px) {
  body.mode-studio .inspector { position:relative; inset:auto; width:auto; transform:none; box-shadow:none; }
}
@media (max-width:767px) {
  body.mode-gallery #app { display:flex; flex-direction:column; }
  body.mode-gallery .workspace { flex:none; }
  body.mode-gallery .inspector { display:flex; flex:none; width:100%; border-top:1px solid var(--v5-line); }
  body.mode-gallery.gl-rail-hidden .inspector { display:none; }
  body.mode-gallery .inspector-body:has(.gl-drawer:not([hidden])) { height:480px; flex:none; }
  body.mode-gallery .gl-card-specs { grid-template-columns:repeat(2,1fr); }
  body.mode-gallery .gl-rail-btn { display:none; }
  body.mode-studio main.workspace { overflow-y:auto; }
  body.mode-studio .viewport-shell { flex:none; height:360px; min-height:360px; }
  body.mode-studio .st-dock { flex:none; }
}

/* Technical Playground shares the existing three-column workspace. */
body:not(.mode-studio) .group[data-group="demos"] { display:none; }
.mode-studio .group[data-group="demos"] .group-title { white-space:normal; line-height:1.5; }
.st-playground-notice { display:grid; gap:8px; padding:14px 18px; color:var(--text-dim,#a3a5aa); font-size:12px; line-height:1.7; border-bottom:1px solid #ffffff12; }
.st-playground-notice[hidden] { display:none; }
.st-playground-notice strong { color:#d6c19a; font-weight:500; }
.studio-live .st-dock-cols, .studio-live .st-dock-row, .studio-live #stPresetInfo { display:none; }
.mode-studio #stConvertPlayground { white-space:normal; }

@media(max-width:650px) { #stAssetsClose { position:sticky; top:0; z-index:2; flex:none; background:var(--v5-bg-surface); } }