/*
  HuiLiu responsive source of truth.
  Keep viewport-dependent sizing here so new modules can share the same mobile rules.
*/

body.mobile-ui {
  --font-ui: var(--mobile-toolbar-font, 12px);
  --font-label: var(--mobile-caption-font, 11px);
  --control-height: var(--mobile-control-h, 32px);
  --button-height: var(--mobile-control-h, 32px);
  --tab-height: var(--mobile-toolbar-control, 32px);
  --mobile-collapsed-topbar-offset: calc(var(--mobile-topbar-main-row) + (var(--mobile-shell-gap) * 2));
  --mobile-top-icon-tile: calc(var(--mobile-icon-btn) - 4px);
  --mobile-page-width: calc(100vw - (var(--mobile-shell-x) * 2));
  --mobile-ui-title: calc(var(--font-ui) + 1px);
  --mobile-ui-body: calc(var(--font-ui) - 0.5px);
  --mobile-ui-small: var(--font-label);
  --mobile-ui-frame-radius: 16px;
  --mobile-ui-control-radius: 11px;
  --media-form-gap: 8px;
  --media-inline-gap: 6px;
  --media-label-gap: 4px;
  --media-control-size: var(--control-height);
  --media-textarea-size: calc(var(--control-height) * 2.53);
  --media-reference-size: calc(var(--control-height) * 1.8);
  --media-panel-pad: calc(var(--mobile-shell-gap) + 2px);
}

body.mobile-compact-ui {
  --mobile-ui-frame-radius: 14px;
  --mobile-ui-control-radius: 10px;
}

/* 手机交互反馈由组件自身的 active/pressed 状态承担，关闭浏览器会随横向分页偏移的蓝色点击遮罩。 */
body.mobile-ui :is(button, a[href], select, [role="button"], [role="tab"]) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* 从源头掐掉手机端原生 <select> 的 picker:pointer-events:none 让 select 收不到指针命中,UA 就没有「被 tap 的
   select」可弹原生下拉(某些手机浏览器的 picker 在 focus/tap 时就弹,click 上 preventDefault 拦不住——故不拦、
   直接让它收不到指针)。tap 穿透到外层容器,由 initMobileSelectSheet 的 click/focusin 收口打开自绘 sheet
   (mobileSelectFromEvent 坐标命中回收 select)。保留可见(显示当前值)、键盘 Tab 可达(pointer-events 不影响 focus)、
   滑动穿透=页面照常滚动;程序化 change(sheet 选中)不受影响。排除画布卡片自绘下拉的隐藏原生 select(另有交互)。
   电脑端无 mobile-ui 类,此规则不生效,原生 select 照常——满足「不影响电脑端」。 */
body.mobile-ui select:not(.infinite-card-cs-native):not(.infinite-card-qr-native) {
  pointer-events: none;
}

/* 灵感画廊卡:content-visibility 占位高度必须贴近真实卡高(团队规范见 styles.part1.css:312),否则离屏卡占位比实高大
   → 容器 scrollHeight 高估 → 能下拉进一段不存在的空白、卡片 realize 后占位缩回实高又把滚动夹回=「空出一节再
   闪补回去」。hl-grid 手机端列宽 ~150-180px(minmax 150,preset-cases-ui.js:257)、.hl-card-prev 是 1:1 图 + body ≈ 84px,
   真实卡高 ~242px,故手机端估 240(全局 280 是按桌面更宽列写的,手机偏大致露白)。auto 关键字仍让已渲染卡记住真实高度。 */
body.mobile-ui .hl-grid > .hl-card {
  contain-intrinsic-size: auto 240px;
}

/* 防越界露白唯一收口=根滚动器(html)。手机端模块页是文档根滚:html 才是真滚动器,越界橡皮筋只可能发生在根。
   教训(2026-07):曾给 .gen-feed/.tab-panel/.tools-panel 等面板批量补 overscroll-behavior:none——那批规则的前提
   是「文档锁 overflow:hidden、面板内滚」,布局演进成根滚后,这些面板 overflow:auto 却内容不超高=「滚不动的假
   滚动容器」,contain/none 都会把触摸/滚轮的滚动链在面板处掐断,根永远收不到手势=任务/账号/联系我们等整页
   拉不动。故:绝不给「可能不超高」的容器设 overscroll-behavior(内容少时必断链);真限高弹窗/画布舞台的
   contain/none 不受此限(背景本该锁)。滚动链保持畅通,越界只在根禁。 */
html.mobile-ui {
  overscroll-behavior-y: none;
}

body.mobile-ui :is(#appLayout, .account-modal) {
  font-size: var(--mobile-ui-body) !important;
}

body.mobile-ui :is(#appLayout, .account-modal) :is(label, .field-title, .tool-page-head strong, .drop-zone strong) {
  font-size: var(--font-label) !important;
  line-height: 1.22 !important;
}

body.mobile-ui :is(#appLayout, .account-modal) :is(p, small, .file-summary, .file-summary-picker, .plan-summary-inline, .task-meta, .tool-page-head p, .drop-zone p) {
  font-size: var(--mobile-ui-small) !important;
  line-height: 1.34 !important;
}

body.mobile-ui :is(#appLayout, .account-modal) :is(
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  select
):not(.infinite-card-control) {
  min-height: var(--control-height) !important;
  height: var(--control-height) !important;
  max-height: var(--control-height) !important;
  padding: 0 10px !important;
  border-radius: var(--mobile-ui-control-radius) !important;
  font-size: var(--font-ui) !important;
  line-height: 1.15 !important;
}

body.mobile-ui :is(#appLayout, .account-modal) textarea:not([data-canvas-text]) {
  font-size: var(--font-ui) !important;
  line-height: 1.44 !important;
  border-radius: var(--mobile-ui-control-radius) !important;
}

body.mobile-ui :is(#appLayout, .account-modal) :is(button, .button-link, .primary, .secondary, .danger, .tool-mode-tab):not([data-ui-compact-control]):not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-chat-history-backdrop):not(.text-chat-delete-btn):not(.infinite-card-run):not(.infinite-inline-reference-add):not(.infinite-inline-reference-pick):not(.thumb-preview):not(.gen-icon-btn):not(.hl-float-btn):not(.hl-send-btn):not(.hl-like-pill):not(.hl-cta-primary):not(.hl-submit-btn):not(.hl-mod-chip):not(.hl-tool-btn):not(.hl-ref-del):not(.hl-cta-icon):not(.flow-mini-btn):not(.project-icon-btn):not(.canvas-edit-branch):not(.feed-detail-album-thumb):not(.gen-nav):not(.watermark-card):not(.watermark-library-preview):not(.watermark-layer-select):not(.account-card):not(.account-card-open):not(.account-card-more):not(.hl-stage):where(:not([data-ui-unmanaged] *)) {
  min-height: var(--button-height) !important;
  height: var(--button-height) !important;
  max-height: var(--button-height) !important;
  padding: 0 11px !important;
  border-radius: var(--mobile-ui-control-radius) !important;
  font-size: var(--font-ui) !important;
  line-height: 1.05 !important;
}

body.mobile-ui:not(.auth-required) #appLayout .result-library-btn {
  min-height: 32px !important;
  height: 32px !important;
  max-height: 32px !important;
  padding: 0 10px 0 9px !important;
  gap: 6px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}

body.mobile-ui:not(.auth-required) header.topbar {
  height: var(--mobile-topbar-offset) !important;
  min-height: var(--mobile-topbar-offset) !important;
  max-height: var(--mobile-topbar-offset) !important;
  box-sizing: border-box !important;
  padding: var(--mobile-shell-gap) var(--mobile-shell-x) !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  grid-template-rows: var(--mobile-topbar-main-row) var(--mobile-topbar-nav-row) !important;
  grid-template-areas:
    "brand actions toggle"
    "nav nav nav" !important;
  gap: var(--mobile-toolbar-gap) !important;
  align-items: center !important;
  overflow: hidden !important;
}

body.mobile-ui.sidebar-collapsed:not(.auth-required) header.topbar {
  height: var(--mobile-collapsed-topbar-offset) !important;
  min-height: var(--mobile-collapsed-topbar-offset) !important;
  max-height: var(--mobile-collapsed-topbar-offset) !important;
  grid-template-rows: var(--mobile-topbar-main-row) !important;
  grid-template-areas: "brand actions toggle" !important;
}

body.mobile-ui:not(.auth-required) header.topbar > .brand-block,
body.mobile-ui:not(.auth-required) header.topbar > .brand-block > .brand-row {
  display: contents !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

body.mobile-ui:not(.auth-required) header.topbar .brand-text {
  grid-area: brand !important;
  align-self: center !important;
  justify-self: start !important;
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: var(--mobile-topbar-main-row) !important;
  min-height: var(--mobile-topbar-main-row) !important;
  max-height: var(--mobile-topbar-main-row) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: none !important;
}

body.mobile-ui:not(.auth-required) header.topbar .brand-full {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

body.mobile-ui:not(.auth-required) header.topbar .brand-logo-full {
  width: min(var(--mobile-brand-logo-width), 29vw) !important;
  max-width: min(var(--mobile-brand-logo-width), 29vw) !important;
  height: auto !important;
  max-height: var(--mobile-icon-btn) !important;
  object-fit: contain !important;
  object-position: left center !important;
  margin: 0 !important;
  transform: none !important;
}

body.mobile-ui:not(.auth-required) header.topbar > .top-actions.top-actions {
  grid-area: actions !important;
  align-self: center !important;
  justify-self: end !important;
  max-width: calc(100vw - min(var(--mobile-brand-logo-width), 29vw) - var(--mobile-icon-btn) - (var(--mobile-shell-x) * 2) - 14px) !important;
  height: var(--mobile-icon-btn) !important;
  min-height: var(--mobile-icon-btn) !important;
  max-height: var(--mobile-icon-btn) !important;
  gap: var(--mobile-toolbar-gap) !important;
  overflow: visible !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

body.mobile-ui:not(.auth-required) header.topbar #sidebarToggleBtn.sidebar-toggle {
  grid-area: toggle !important;
  align-self: center !important;
  justify-self: end !important;
  margin: 0 !important;
  transform: none !important;
}

body.mobile-ui:not(.auth-required) header.topbar .account-bar {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  min-width: 0 !important;
  height: var(--mobile-icon-btn) !important;
  min-height: var(--mobile-icon-btn) !important;
  max-height: var(--mobile-icon-btn) !important;
}

body.mobile-ui:not(.auth-required) header.topbar :is(.icon-button, .sidebar-toggle, .module-tab, .account-summary),
body.mobile-ui.sidebar-collapsed:not(.auth-required) header.topbar :is(.icon-button, .sidebar-toggle, .module-tab, .account-summary) {
  width: var(--mobile-icon-btn) !important;
  min-width: var(--mobile-icon-btn) !important;
  max-width: var(--mobile-icon-btn) !important;
  height: var(--mobile-icon-btn) !important;
  min-height: var(--mobile-icon-btn) !important;
  max-height: var(--mobile-icon-btn) !important;
  padding: 0 !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

body.mobile-ui:not(.auth-required) header.topbar :is(#themeToggleBtn.icon-button, #refreshJobsBtn.icon-button, #sidebarToggleBtn.sidebar-toggle, .module-tab.has-ui-icon),
body.mobile-ui.sidebar-collapsed:not(.auth-required) header.topbar :is(#themeToggleBtn.icon-button, #refreshJobsBtn.icon-button, #sidebarToggleBtn.sidebar-toggle, .module-tab.has-ui-icon) {
  width: var(--mobile-icon-btn) !important;
  min-width: var(--mobile-icon-btn) !important;
  max-width: var(--mobile-icon-btn) !important;
  height: var(--mobile-icon-btn) !important;
  min-height: var(--mobile-icon-btn) !important;
  max-height: var(--mobile-icon-btn) !important;
  flex: 0 0 var(--mobile-icon-btn) !important;
  flex-basis: var(--mobile-icon-btn) !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  line-height: 1 !important;
  overflow: hidden !important;
}

body.mobile-ui:not(.auth-required) header.topbar :is(
  .module-tab.has-ui-icon,
  .icon-button.has-ui-icon,
  .sidebar-toggle.has-ui-icon,
  #accountSummary.account-summary.has-ui-icon
) > .ui-icon,
body.mobile-ui.sidebar-collapsed:not(.auth-required) header.topbar :is(
  .module-tab.has-ui-icon,
  .icon-button.has-ui-icon,
  .sidebar-toggle.has-ui-icon,
  #accountSummary.account-summary.has-ui-icon
) > .ui-icon {
  width: var(--mobile-top-icon-tile) !important;
  min-width: var(--mobile-top-icon-tile) !important;
  max-width: var(--mobile-top-icon-tile) !important;
  height: var(--mobile-top-icon-tile) !important;
  min-height: var(--mobile-top-icon-tile) !important;
  max-height: var(--mobile-top-icon-tile) !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  line-height: 0 !important;
}

body.mobile-ui:not(.auth-required) header.topbar :is(
  .module-tab.has-ui-icon,
  .icon-button.has-ui-icon,
  .sidebar-toggle.has-ui-icon,
  #accountSummary.account-summary.has-ui-icon
) > .ui-icon svg,
body.mobile-ui.sidebar-collapsed:not(.auth-required) header.topbar :is(
  .module-tab.has-ui-icon,
  .icon-button.has-ui-icon,
  .sidebar-toggle.has-ui-icon,
  #accountSummary.account-summary.has-ui-icon
) > .ui-icon svg {
  width: var(--mobile-icon-svg) !important;
  min-width: var(--mobile-icon-svg) !important;
  max-width: var(--mobile-icon-svg) !important;
  height: var(--mobile-icon-svg) !important;
  min-height: var(--mobile-icon-svg) !important;
  max-height: var(--mobile-icon-svg) !important;
  margin: 0 !important;
  stroke-width: 1.55 !important;
}

body.mobile-ui:not(.auth-required) header.topbar :is(
  .module-tab.has-ui-icon,
  .icon-button.has-ui-icon,
  .sidebar-toggle.has-ui-icon,
  #accountSummary.account-summary.has-ui-icon
) > .ui-icon svg *,
body.mobile-ui.sidebar-collapsed:not(.auth-required) header.topbar :is(
  .module-tab.has-ui-icon,
  .icon-button.has-ui-icon,
  .sidebar-toggle.has-ui-icon,
  #accountSummary.account-summary.has-ui-icon
) > .ui-icon svg * {
  stroke-width: 1.55 !important;
}

body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary {
  width: var(--mobile-icon-btn) !important;
  min-width: var(--mobile-icon-btn) !important;
  max-width: var(--mobile-icon-btn) !important;
  height: var(--mobile-icon-btn) !important;
  min-height: var(--mobile-icon-btn) !important;
  max-height: var(--mobile-icon-btn) !important;
  padding: 0 !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  font-weight: 760 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  overflow: hidden !important;
}

body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points),
body.mobile-ui.sidebar-collapsed:not(.auth-required) header.topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) {
  width: var(--mobile-icon-btn) !important;
  min-width: var(--mobile-icon-btn) !important;
  max-width: var(--mobile-icon-btn) !important;
  height: var(--mobile-icon-btn) !important;
  min-height: var(--mobile-icon-btn) !important;
  max-height: var(--mobile-icon-btn) !important;
  flex: 0 0 var(--mobile-icon-btn) !important;
  flex-basis: var(--mobile-icon-btn) !important;
  padding: 0 !important;
  font-size: 0 !important;
}

body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) .account-summary-text {
  display: none !important;
}

body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.account-summary-points {
  width: var(--mobile-points-max) !important;
  min-width: var(--mobile-points-min) !important;
  max-width: var(--mobile-points-max) !important;
  flex: 0 0 var(--mobile-points-max) !important;
  flex-basis: var(--mobile-points-max) !important;
  flex-shrink: 0 !important;
  padding: 0 var(--mobile-toolbar-pad) !important;
  gap: calc(var(--mobile-toolbar-gap) - 1px) !important;
  font-size: var(--mobile-toolbar-font) !important;
}

body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.account-summary-points {
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.account-summary-points::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 2px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel)) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel) 82%, transparent), 0 1px 1px color-mix(in srgb, var(--accent) 10%, transparent) !important;
}

body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.account-summary-points:hover::before {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border)) !important;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel)) !important;
}

body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.account-summary-points:focus-visible {
  box-shadow: none !important;
}

body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.account-summary-points:focus-visible::before {
  box-shadow: var(--focus-ring) !important;
}

body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.account-summary-points > * {
  position: relative !important;
  z-index: 1 !important;
}

body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.account-summary-points .account-summary-text {
  display: block !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  font-size: var(--mobile-toolbar-font) !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}

body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.account-summary-points .account-points-icon,
body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.account-summary-points .ui-icon {
  width: var(--mobile-icon-svg) !important;
  height: var(--mobile-icon-svg) !important;
  min-width: var(--mobile-icon-svg) !important;
}

body.mobile-ui:not(.auth-required) header.topbar nav.module-nav.module-nav {
  grid-area: nav !important;
  height: var(--mobile-topbar-nav-row) !important;
  min-height: var(--mobile-topbar-nav-row) !important;
  max-height: var(--mobile-topbar-nav-row) !important;
  gap: var(--mobile-toolbar-gap) !important;
  align-self: center !important;
  justify-self: stretch !important;
  justify-content: flex-start !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}

body.mobile-ui.sidebar-collapsed:not(.auth-required) header.topbar nav.module-nav.module-nav {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.mobile-ui:not(.auth-required) header.topbar nav.module-nav.module-nav > button.module-tab {
  flex: 0 0 var(--mobile-icon-btn) !important;
}

body.mobile-ui:not(.auth-required) header.topbar nav.module-nav.module-nav::-webkit-scrollbar {
  display: none !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout {
  margin-top: var(--mobile-topbar-offset) !important;
  padding: var(--mobile-shell-x) !important;
  gap: var(--mobile-shell-gap) !important;
}

body.mobile-ui.sidebar-collapsed:not(.auth-required) #appLayout.layout {
  margin-top: var(--mobile-collapsed-topbar-offset) !important;
  min-height: calc(100dvh - var(--mobile-collapsed-topbar-offset)) !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] {
  box-sizing: border-box !important;
  display: block !important;
  height: calc(100dvh - var(--mobile-topbar-offset)) !important;
  min-height: calc(100dvh - var(--mobile-topbar-offset)) !important;
  max-height: calc(100dvh - var(--mobile-topbar-offset)) !important;
  overflow: hidden !important;
}

body.mobile-ui.sidebar-collapsed:not(.auth-required) #appLayout[data-module-panel="textModule"] {
  height: calc(100dvh - var(--mobile-collapsed-topbar-offset)) !important;
  min-height: calc(100dvh - var(--mobile-collapsed-topbar-offset)) !important;
  max-height: calc(100dvh - var(--mobile-collapsed-topbar-offset)) !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] > .workbench {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  padding: var(--mobile-shell-x) !important;
  overflow: hidden !important;
}

body.mobile-ui:not(.auth-required) #appLayout:is(
  [data-module-panel="batchModule"],
  [data-module-panel="videoModule"],
  [data-module-panel="audioModule"]
) {
  box-sizing: border-box !important;
  /* 钉进视口(position:fixed 脱离文档流)——消灭 iOS 文档橡皮筋回弹面。根因:图片"生图"/音乐"灵感"的表单矮于视口,
     内层表单页没得可滚,竖拉就穿透到未锁死的文档去橡皮筋,「空出一节再闪补回去」。视频表单高、内层页本就可滚故一直
     没事;画布/工作流早有同款锁(styles.part4.css:23-34)故也没事。这里给三个生成模块补上同款锁,但保留横向分页
     overflow-x:auto(左表单页/右结果页),让当前表单页成为唯一竖向滚动源:矮就不动、也没有可回弹的文档。
     inset 顶用 --mobile-topbar-offset(JS 按折叠态动态设,见 app.part1.js:1966-1978),自动跟随侧栏折叠。 */
  position: fixed !important;
  inset: var(--mobile-topbar-offset) 0 auto 0 !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: stretch !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: calc(100dvh - var(--mobile-topbar-offset)) !important;
  min-height: calc(100dvh - var(--mobile-topbar-offset)) !important;
  margin: 0 !important;
  padding: var(--mobile-shell-x) !important;
  gap: 0 !important;
  /* ★transform 切页(收口:与 styles.part4/part3 pager 块同一模型,取代原生 scroll-snap)★:容器不再横向滚动,改
     overflow:hidden 裁掉离屏那一页;两页 translateX + transition 由 [data-mobile-page] 属性驱动 GPU 自动滑(见下)。
     touch-action:pan-y=纵向交子面板原生滚、横向翻页归 JS(initMobileToolPager 冒泡捕获判向定页,不依赖原生横滚)。
     gap:0=两页齐平,translateX(-100%) 恰好左移一整页对齐。 */
  overflow: hidden !important;
  touch-action: pan-y !important;
  scrollbar-width: none !important;
}

body.mobile-ui.sidebar-collapsed:not(.auth-required) #appLayout:is(
  [data-module-panel="batchModule"],
  [data-module-panel="videoModule"],
  [data-module-panel="audioModule"]
) {
  height: calc(100dvh - var(--mobile-collapsed-topbar-offset)) !important;
  min-height: calc(100dvh - var(--mobile-collapsed-topbar-offset)) !important;
}

body.mobile-ui:not(.auth-required) #appLayout:is(
  [data-module-panel="batchModule"],
  [data-module-panel="videoModule"],
  [data-module-panel="audioModule"]
)::-webkit-scrollbar {
  display: none !important;
}

body.mobile-ui:not(.auth-required) #appLayout:is(
  [data-module-panel="batchModule"],
  [data-module-panel="videoModule"],
  [data-module-panel="audioModule"]
) > :is(.workbench, .monitor) {
  box-sizing: border-box !important;
  flex: 0 0 var(--mobile-page-width) !important;
  width: var(--mobile-page-width) !important;
  min-width: var(--mobile-page-width) !important;
  max-width: var(--mobile-page-width) !important;
  height: calc(100dvh - var(--mobile-topbar-offset) - (var(--mobile-shell-x) * 2)) !important;
  min-height: calc(100dvh - var(--mobile-topbar-offset) - (var(--mobile-shell-x) * 2)) !important;
  max-height: calc(100dvh - var(--mobile-topbar-offset) - (var(--mobile-shell-x) * 2)) !important;
  overflow: hidden !important;
  border-radius: var(--mobile-ui-frame-radius) !important;
  /* transform 切页:参数页态两页都 translateX(0)(参数页在视口内、结果页在右侧被 overflow 裁掉);切结果页时下面规则
     把两页左移一整页+gap→结果页进视口。GPU 合成器动画、丝滑、不看 scrollWidth、不受参考媒体布局影响。 */
  transform: translateX(0);
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  /* will-change:transform 把两页各自提升为 GPU 合成层→切页/跟手 translateX 走合成器平移、不重绘各页重内容(结果页 256 卡)
     =根治"切换掉帧"。仅 2 个元素、非数百层,内存可控(不违反 canvas 数百层禁 will-change 的教训)。 */
  will-change: transform;
}

/* 唯一切页驱动:data-mobile-page="results" 即把两页左移(一整页宽 + 页间 gap)→结果页滑入视口。form 态回 translateX(0)。 */
body.mobile-ui:not(.auth-required) #appLayout:is(
  [data-module-panel="batchModule"],
  [data-module-panel="videoModule"],
  [data-module-panel="audioModule"]
)[data-mobile-page="results"] > :is(.workbench, .monitor) {
  transform: translateX(-100%) !important;
}

/* 旋屏/模块切换归位:JS 挂 .mobile-pager-no-anim 时禁 transition 做无动画硬切,rAF×2 后自动撤。 */
body.mobile-ui:not(.auth-required) #appLayout.mobile-pager-no-anim > :is(.workbench, .monitor) {
  transition: none !important;
}

/* 掉帧收口(QQ/弱内核根因):结果页 gen-card content-visibility:auto 稳态正常跳过离屏卡,但翻页整页从离屏 transform 回屏内会
   让 content-visibility 在松手结算那一帧一次性补齐一大批卡=掉帧。收口=拖动空闲期 JS 只给「可见屏±约0.6屏 buffer」的十几张卡
   挂 .pager-prerender-card 提前 realize(窗口按 .monitor 滚动位置挑,**不再强制全部 .gen-card visible=那是渲染看不见的卡=浪费**),
   松手结算帧因此无大批卡待补;动画完经 requestIdleCallback 撤类归还 content-visibility:auto。特异度 (0,2,0) 压过基态 (0,1,0 无 !important)。 */
.gen-card.pager-prerender-card {
  content-visibility: visible;
  contain-intrinsic-size: auto;
}

body.mobile-ui:not(.auth-required) #appLayout:is(
  [data-module-panel="batchModule"],
  [data-module-panel="videoModule"],
  [data-module-panel="audioModule"]
) :is(
  .workbench,
  .monitor,
  .tab-panel.active,
  .tool-panel.active,
  .tool-card,
  .upload-box,
  .advanced,
  .job-row,
  .job-select,
  .gallery-select-bar,
  .thumb,
  .thumb-preview,
  .task-row,
  .task-list-row
) {
  animation: none !important;
}

/* 任务结果卡片 · 手机端细化
   基础卡片(styles.css)已是响应式自适应网格；这里用 #appLayout #gallery 提高优先级，
   稳定覆盖整套移动端控件高度/网格规则（旧的整墙 !important 会把缩略图压成 1:1 浮窗，已收口）。 */
body.mobile-ui:not(.auth-required) #appLayout #gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  max-height: none !important;
}

body.mobile-ui:not(.auth-required) #appLayout #gallery:has(.media-thumb) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)) !important;
}

/* 图片预览是媒体容器(button)，按内容尺寸，避免被移动端通用控件高度压扁 */
body.mobile-ui:not(.auth-required) #appLayout #gallery .thumb:not(.media-thumb) .thumb-preview {
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
}

/* 触屏不要 hover 抬升残留 */
body.mobile-ui:not(.auth-required) #appLayout #gallery .thumb:hover {
  transform: none !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05) !important;
}

body.mobile-ui:not(.auth-required) #appLayout #gallery .thumb-footer {
  padding: 6px 7px !important;
}

body.mobile-ui:not(.auth-required) #appLayout #gallery .thumb-footer .icon-action {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
}

body.mobile-ui:not(.auth-required) #appLayout #gallery .gallery-select-bar {
  padding: 7px 9px !important;
}

body.mobile-ui:not(.auth-required) #watermarkPickerModal.modal-mask {
  align-items: end !important;
  place-items: end center !important;
  padding: 8px !important;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
}

body.mobile-ui:not(.auth-required) #watermarkPickerModal .watermark-picker-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: min(420px, calc(100vw - 16px)) !important;
  max-height: min(74dvh, calc(100dvh - var(--mobile-topbar-offset) - 14px)) !important;
  overflow: hidden !important;
}

body.mobile-ui:not(.auth-required) #watermarkPickerList.watermark-list {
  max-height: none !important;
  min-height: 0 !important;
  gap: 8px !important;
  overflow: auto !important;
  padding: 2px !important;
}

body.mobile-ui:not(.auth-required) #watermarkPickerList .watermark-card {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 9px !important;
  width: 100% !important;
  min-height: 78px !important;
  height: auto !important;
  max-height: none !important;
  padding: 8px !important;
  align-items: center !important;
  justify-content: stretch !important;
}

body.mobile-ui:not(.auth-required) #watermarkPickerList .watermark-card img {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 72px !important;
  height: 56px !important;
}

body.mobile-ui:not(.auth-required) #watermarkPickerList .watermark-card > span:not(.ui-icon) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  gap: 5px !important;
  min-width: 0 !important;
}

body.mobile-ui:not(.auth-required) #watermarkPickerList .watermark-card > .ui-icon {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  border-radius: 6px !important;
}

body.mobile-ui:not(.auth-required) #watermarkPickerList .watermark-card > .ui-icon svg {
  width: 13px !important;
  height: 13px !important;
}

body.mobile-ui.sidebar-collapsed:not(.auth-required) #appLayout:is(
  [data-module-panel="batchModule"],
  [data-module-panel="videoModule"],
  [data-module-panel="audioModule"]
) > :is(.workbench, .monitor) {
  height: calc(100dvh - var(--mobile-collapsed-topbar-offset) - (var(--mobile-shell-x) * 2)) !important;
  min-height: calc(100dvh - var(--mobile-collapsed-topbar-offset) - (var(--mobile-shell-x) * 2)) !important;
  max-height: calc(100dvh - var(--mobile-collapsed-topbar-offset) - (var(--mobile-shell-x) * 2)) !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout:is(
  [data-module-panel="videoModule"],
  [data-module-panel="audioModule"]
) > .workbench {
  padding: 0 !important;
}

/* 顶部模式切换条:图片(.tabs)、视频(.tool-page-head)与音乐(#musicModeTabs)手机端共用一套框架。 */
body.mobile-ui:not(.auth-required) #musicModeTabs.tabs,
body.mobile-ui:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .workbench > .tabs,
body.mobile-ui:not(.auth-required) .layout.media-tool-layout .tool-mode-tabs {
  min-height: var(--mobile-toolbar-control) !important;
  height: var(--mobile-toolbar-control) !important;
  max-height: var(--mobile-toolbar-control) !important;
  border-radius: var(--mobile-ui-frame-radius) var(--mobile-ui-frame-radius) 0 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

/* 音乐容器:用 #audioToolTab 这条高优先级规则完整对齐图片/视频。
   #audioToolTab 手机端内边距统一为 8px,这里出血抵消该内边距,保持顶部切换条同宽同顶。 */
body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > #musicModeTabs.tabs,
body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > .tool-mode-tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  min-height: var(--mobile-toolbar-control) !important;
  height: var(--mobile-toolbar-control) !important;
  max-height: var(--mobile-toolbar-control) !important;
  width: calc(100% + var(--media-panel-pad) + var(--media-panel-pad)) !important;
  max-width: calc(100% + var(--media-panel-pad) + var(--media-panel-pad)) !important;
  margin: calc(-1 * var(--media-panel-pad)) calc(-1 * var(--media-panel-pad)) 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: var(--mobile-ui-frame-radius) var(--mobile-ui-frame-radius) 0 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="videoModule"] #videoToolTab > .tool-page-head {
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: calc(100% + var(--media-panel-pad) + var(--media-panel-pad)) !important;
  max-width: calc(100% + var(--media-panel-pad) + var(--media-panel-pad)) !important;
  min-height: var(--mobile-toolbar-control) !important;
  height: var(--mobile-toolbar-control) !important;
  max-height: var(--mobile-toolbar-control) !important;
  margin: calc(-1 * var(--media-panel-pad)) calc(-1 * var(--media-panel-pad)) 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: var(--mobile-ui-frame-radius) var(--mobile-ui-frame-radius) 0 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="videoModule"] #videoToolTab > .tool-page-head > div {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 100% !important;
  min-width: 0 !important;
  min-height: var(--mobile-toolbar-control) !important;
  height: var(--mobile-toolbar-control) !important;
  max-height: var(--mobile-toolbar-control) !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: calc(var(--mobile-ui-frame-radius) - 2px) !important;
  background: transparent !important;
  color: var(--accent-strong) !important;
  box-shadow: inset 0 -2px 0 var(--accent) !important;
  font-size: var(--font-ui) !important;
  font-weight: 820 !important;
  line-height: 1 !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="videoModule"] #videoToolTab > .tool-page-head h2 {
  margin: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="videoModule"] #videoToolTab > .tool-page-head p {
  display: none !important;
}

/* 音乐暗色:对齐图片暗色(深底容器 + 透明选中片 + accent 下划线),收敛 part3 桌面暗色差异且不影响桌面 */
body.theme-dark.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > #musicModeTabs.tabs,
body.theme-dark.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > .tool-mode-tabs {
  background: rgba(18, 21, 29, 0.86) !important;
  border-color: rgba(141, 149, 165, 0.26) !important;
}

body.theme-dark.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="videoModule"] #videoToolTab > .tool-page-head {
  background: rgba(18, 21, 29, 0.86) !important;
  border-color: rgba(141, 149, 165, 0.26) !important;
}

body.theme-dark.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="videoModule"] #videoToolTab > .tool-page-head > div {
  background: transparent !important;
  color: #eaf4ff !important;
  box-shadow: inset 0 -2px 0 #5aa6e8 !important;
}

body.theme-dark.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > #musicModeTabs.tabs .tab.active,
body.theme-dark.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > .tool-mode-tabs .tool-mode-tab.active {
  background: transparent !important;
  color: #eaf4ff !important;
  box-shadow: inset 0 -2px 0 #5aa6e8 !important;
}

body.mobile-ui:not(.auth-required) #musicModeTabs.tabs .tab,
body.mobile-ui:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .workbench > .tabs .tab,
body.mobile-ui:not(.auth-required) .layout.media-tool-layout .tool-mode-tab {
  min-height: var(--mobile-toolbar-control) !important;
  height: var(--mobile-toolbar-control) !important;
  max-height: var(--mobile-toolbar-control) !important;
  padding: 0 8px !important;
  border-radius: calc(var(--mobile-ui-frame-radius) - 2px) !important;
  font-size: var(--font-ui) !important;
  line-height: 1 !important;
}

body.mobile-ui:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .tab-panel,
body.mobile-ui:not(.auth-required) .layout.media-tool-layout .tool-panel.active {
  box-sizing: border-box !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  padding: calc(var(--mobile-shell-gap) + 2px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.mobile-ui:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .workbench > .tab-panel {
  height: calc(100% - var(--mobile-toolbar-control)) !important;
  min-height: 0 !important;
  max-height: calc(100% - var(--mobile-toolbar-control)) !important;
}

body.mobile-ui:not(.auth-required) :is(.upload-box, .tool-card, .advanced, .file-summary, .plan-summary-inline) {
  border-radius: var(--mobile-ui-frame-radius) !important;
}

body.mobile-ui:not(.auth-required) :is(.upload-box, .tool-card) {
  padding: calc(var(--mobile-shell-gap) + 2px) !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="batchModule"] :is(#textTab, #imageTab).tab-panel.active.media-tool-form,
body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout:is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#videoToolTab, #audioToolTab) .media-tool-form:not(.media-debug-card) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  width: 100% !important;
  max-width: 100% !important;
  row-gap: var(--media-form-gap) !important;
  align-items: start !important;
  align-content: start !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="batchModule"] :is(#textTab, #imageTab).tab-panel.active.media-tool-form {
  padding: calc(var(--mobile-shell-gap) + 2px) !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout:is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#videoToolTab, #audioToolTab) .media-tool-form:not(.media-debug-card) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.mobile-ui:not(.auth-required) #appLayout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textTab, #imageTab, #videoToolTab, #speechToolPanel, #musicToolPanel) :is(.quick-options, .music-options) {
  gap: var(--media-form-gap) var(--media-inline-gap) !important;
  margin: 0 !important;
}

body.mobile-ui:not(.auth-required) #appLayout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textTab, #imageTab, #videoToolTab, #speechToolPanel, #musicToolPanel) .media-tool-form textarea,
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="batchModule"] :is(#textTab, #imageTab).media-tool-form textarea {
  /* 只用 min-height 表达默认高度,不用 height!important 钉死:用户拖拽 resize 写的内联 height 才是权威,能拉长 */
  min-height: var(--media-textarea-size) !important;
  max-height: none !important;
  padding: 8px !important;
  line-height: 1.45 !important;
}

body.mobile-ui:not(.auth-required) #appLayout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textTab, #imageTab, #videoToolTab, #speechToolPanel, #musicToolPanel) .media-tool-form .model-capability-hint,
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="batchModule"] :is(#textTab, #imageTab).media-tool-form > .model-capability-hint {
  margin: 0 !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel .tool-grid > .media-tool-form:not(.media-debug-card) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: var(--media-inline-gap) !important;
  row-gap: var(--media-form-gap) !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel :is(#musicAudioField, #musicPromptField, #musicStyleField, #musicTitleField, #musicLyricsField, #musicNegativeTagsField, .command-row, #musicCapabilityHint) {
  grid-column: 1 / -1 !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel :is(#musicPromptField, #musicStyleField, #musicTitleField) {
  order: 20 !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel .music-options {
  display: grid !important;
  grid-column: 1 / -1 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--media-form-gap) var(--media-inline-gap) !important;
  align-items: end !important;
  order: 30 !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel .music-options > label:has(> #musicVersion) {
  grid-column: 1 / 2 !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel .music-options > .music-instrumental-row {
  grid-column: 2 / 3 !important;
  align-self: end !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-height: var(--media-control-size) !important;
  height: var(--media-control-size) !important;
  max-height: var(--media-control-size) !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel #musicVocalGenderField.is-disabled {
  opacity: 0.5 !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel #musicVocalGenderField.is-disabled #musicVocalGender {
  cursor: not-allowed !important;
  background: var(--surface-muted, #f4f6fa) !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel #musicLyricsField {
  order: 40 !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel #musicNegativeTagsField {
  order: 50 !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel .command-row {
  order: 60 !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel #musicCapabilityHint {
  order: 70 !important;
}

body.mobile-ui:not(.auth-required) .layout.media-tool-layout .tool-page-head {
  min-height: 0 !important;
  margin: 0 0 calc(var(--mobile-toolbar-gap) + 2px) !important;
  padding: calc(var(--mobile-shell-gap) + 2px) !important;
  border-radius: var(--mobile-ui-frame-radius) !important;
}

body.mobile-ui:not(.auth-required) .layout.media-tool-layout .tool-page-head h2:not(#videoToolTab > .tool-page-head h2) {
  font-size: var(--mobile-ui-title) !important;
  line-height: 1.18 !important;
}

body.mobile-ui:not(.auth-required) .layout.media-tool-layout .tool-page-head p {
  margin-top: 2px !important;
}

body.mobile-ui:not(.auth-required) :is(.form-grid, .quick-options, .music-options, .options-grid, .command-row) {
  gap: var(--media-form-gap) var(--media-inline-gap) !important;
}

body.mobile-ui:not(.auth-required) :is(#textTab, #imageTab, #videoToolTab, #audioToolTab, #speechToolPanel, #musicToolPanel) [hidden] {
  display: none !important;
}

body.mobile-ui:not(.auth-required) :is(#textTab, #imageTab, #videoToolTab, #audioToolTab, #speechToolPanel, #musicToolPanel) :is(label:not(.checkbox-line):not([hidden]), .field-title) {
  gap: var(--media-label-gap) !important;
  font-weight: 720 !important;
}

body.mobile-ui:not(.auth-required) :is(#textTab, #imageTab, #videoToolTab, #audioToolTab, #speechToolPanel, #musicToolPanel) label:not(.checkbox-line):not([hidden]) {
  display: grid !important;
  align-content: start !important;
  margin: 0 !important;
}

body.mobile-ui:not(.auth-required) :is(.drop-zone, .file-summary-picker) {
  min-height: var(--media-reference-size) !important;
  padding: 8px 10px !important;
}

body.mobile-ui:not(.auth-required) :is(.drop-zone p, .file-summary, .plan-summary-inline) {
  color: #607086 !important;
}

body.mobile-ui:not(.auth-required) #textFileSummary.file-summary-picker,
body.mobile-ui:not(.auth-required) #fileSummary.file-summary-picker,
body.mobile-ui:not(.auth-required) #sharedFileSummary.file-summary-picker,
body.mobile-ui:not(.auth-required) #videoFileSummary.file-summary-picker,
body.mobile-ui:not(.auth-required) #musicAudioFileSummary.file-summary-picker {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  line-height: 1.35 !important;
}

body.mobile-ui:not(.auth-required) #appLayout :is(#textTab, #imageTab, #videoToolTab, #audioToolTab, #speechToolPanel, #musicToolPanel) textarea {
  min-height: var(--media-textarea-size) !important;
}

body.mobile-ui:not(.auth-required) #appLayout :is(#textTab, #imageTab, #videoToolTab, #audioToolTab, #speechToolPanel, #musicToolPanel) .command-row {
  align-items: center !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
}

body.mobile-ui:not(.auth-required) #appLayout :is(#textTab, #imageTab, #videoToolTab, #audioToolTab, #speechToolPanel, #musicToolPanel) .command-row > :is(button, .button-link) {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 82px !important;
  max-width: 100% !important;
}

body.mobile-ui:not(.auth-required) #appLayout :is(#textTab, #imageTab, #videoToolTab, #audioToolTab, #speechToolPanel, #musicToolPanel) .command-row > :is(button.primary, .primary) {
  flex-grow: 0 !important;
  min-width: 106px !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] #textToolTab.tool-panel.active {
  box-sizing: border-box !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  padding: calc(var(--mobile-shell-gap) + 2px) !important;
  overflow: hidden !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-shell {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  height: 100% !important;
  min-height: 0 !important;
  border: 1px solid var(--mobile-chat-border, #dce6ef) !important;
  border-radius: var(--mobile-ui-frame-radius) !important;
  background: var(--mobile-chat-surface, #ffffff) !important;
  overflow: hidden !important;
  font-size: var(--font-ui) !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-main {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  min-height: 0 !important;
  background: var(--mobile-chat-surface, #ffffff) !important;
  overflow: hidden !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-topbar {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  gap: 6px 8px !important;
  padding: calc(var(--mobile-shell-gap) + 3px) !important;
  border-bottom: 1px solid var(--mobile-chat-border, #dce6ef) !important;
  background: var(--mobile-chat-surface-2, #fbfcfe) !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-history-toggle {
  display: inline-flex !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  min-width: 52px !important;
  height: var(--mobile-toolbar-control) !important;
  min-height: var(--mobile-toolbar-control) !important;
  padding: 0 8px !important;
  border-radius: var(--mobile-ui-control-radius) !important;
  font-size: var(--mobile-ui-small) !important;
  line-height: 1 !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-current {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  min-width: 0 !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] :is(.text-chat-current strong, .text-chat-brand strong) {
  font-size: var(--mobile-ui-title) !important;
  line-height: 1.16 !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] :is(.text-chat-current span, .text-chat-brand span, .text-chat-history-preview, .text-chat-history-count, .text-chat-history-item time, .text-chat-bubble) {
  font-size: var(--mobile-ui-small) !important;
  line-height: 1.38 !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-modelbar {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  min-width: 0 !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-modelbar > label:not(.switch-row) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-model-label {
  display: none !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] :is(.text-new-chat-btn, .text-chat-search input, .text-chat-modelbar select, .text-chat-tools button, .text-chat-tools .switch-row) {
  min-height: var(--mobile-toolbar-control) !important;
  height: var(--mobile-toolbar-control) !important;
  max-height: var(--mobile-toolbar-control) !important;
  border-radius: var(--mobile-ui-control-radius) !important;
  font-size: var(--font-ui) !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-modelbar select {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 10px !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-tools .switch-row {
  min-width: 64px !important;
  padding: 0 9px !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-messages {
  min-height: 0 !important;
  padding: calc(var(--mobile-shell-gap) + 5px) !important;
  gap: 10px !important;
  overflow-y: auto !important;
  background: var(--mobile-chat-surface, #ffffff) !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-message {
  max-width: 96% !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-role,
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-message-copy {
  display: none !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-bubble {
  padding: 10px 11px !important;
  border-radius: 16px !important;
  font-size: var(--font-ui) !important;
  line-height: 1.45 !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-footer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: calc(var(--mobile-shell-gap) + 3px) !important;
  border-top: 1px solid var(--mobile-chat-border, #dce6ef) !important;
  background: var(--mobile-chat-surface, #ffffff) !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-tools {
  display: flex !important;
  grid-column: 1 !important;
  grid-row: auto !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  margin-bottom: 8px !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-composer {
  --text-chat-send-min-width: 80px;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(var(--text-chat-send-min-width), auto) !important;
  gap: 6px !important;
  align-items: end !important;
  padding: 6px !important;
  border: 1px solid var(--mobile-chat-border, #dce6ef) !important;
  border-radius: var(--mobile-ui-frame-radius) !important;
  background: var(--mobile-chat-surface-2, #fbfcfe) !important;
  box-shadow: none !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-composer textarea {
  min-height: calc(var(--mobile-control-h) * 1.9) !important;
  max-height: calc(var(--mobile-control-h) * 4.4) !important;
  padding: 8px 7px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: var(--font-ui) !important;
  line-height: 1.38 !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-composer .primary {
  align-self: end !important;
  width: auto !important;
  min-width: var(--text-chat-send-min-width) !important;
  height: var(--mobile-toolbar-control) !important;
  min-height: var(--mobile-toolbar-control) !important;
  padding: 0 10px !important;
  border-radius: var(--mobile-ui-control-radius) !important;
  font-size: var(--mobile-ui-small) !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-sidebar {
  position: fixed !important;
  z-index: calc(var(--z-sidebar-drawer) + 1) !important;
  top: 56px !important;
  bottom: 10px !important;
  left: 10px !important;
  display: grid !important;
  /* 手机端历史抽屉=对话列表:隐藏品牌介绍块,只留 搜索 / 标题 / 列表 三行 */
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 9px !important;
  right: 10px !important;
  width: auto !important;
  padding: calc(var(--mobile-shell-gap) + 4px) !important;
  border: 1px solid var(--mobile-chat-border, #dce6ef) !important;
  border-radius: var(--mobile-ui-frame-radius) !important;
  background: var(--mobile-chat-sidebar-bg, #f8fbfa) !important;
  box-shadow: var(--mobile-chat-sidebar-shadow, 0 22px 50px rgba(15, 23, 42, 0.22)) !important;
  transform: translateX(calc(-100% - 18px)) !important;
  transition: transform 0.18s ease !important;
  overflow: hidden !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-shell.text-history-open .text-chat-sidebar {
  transform: translateX(0) !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-history-backdrop:not([hidden]) {
  box-sizing: border-box !important;
  display: block !important;
  /* 抽屉/面板带 transform(恒等矩阵也算),position:fixed 的包含块变成该面板;
     用 inset:0 + auto 尺寸精确填满包含块,避免 100vw/topbar 偏移导致左侧露白、右下溢出 */
  position: fixed !important;
  z-index: var(--z-sidebar-drawer) !important;
  inset: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(15, 23, 42, 0.38) !important;
  box-shadow: none !important;
  transform: none !important;
  appearance: none !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-search-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 74px !important;
  gap: 8px !important;
  align-items: stretch !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-new-chat-btn {
  width: 74px !important;
  min-width: 74px !important;
  padding: 0 10px !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-history-head-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-history-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 58px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid var(--mobile-chat-border, #dce6ef) !important;
  border-radius: var(--mobile-ui-control-radius) !important;
  background: #ffffff !important;
  color: var(--accent) !important;
  font-size: var(--mobile-ui-small) !important;
  font-weight: 800 !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-history {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 7px !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 0 2px 2px 0 !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-brand {
  display: none !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-history-item {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  grid-template-columns: minmax(0, 1fr) 48px !important;
  gap: 7px !important;
  min-height: 66px !important;
  padding: 8px 9px 8px 11px !important;
  border-radius: var(--mobile-ui-control-radius) !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-history-main {
  gap: 6px !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-history-count {
  min-width: 30px !important;
  height: 18px !important;
  padding: 0 5px !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-history-meta {
  gap: 6px !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-delete-btn {
  min-width: 40px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 9px !important;
  font-size: var(--mobile-ui-small) !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .switch-row input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="workflowModule"] :is(.workflow-toolbar, .workflow-toolbar-actions button, .workflow-dirty-badge),
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] :is(.infinite-canvas-toolbar, .canvas-board-actions button, .workflow-dirty-badge) {
  font-size: var(--font-ui) !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="workflowModule"] :is(.workflow-toolbar input, .workflow-toolbar button),
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] :is(.canvas-board-row input, .canvas-board-row select, .canvas-board-actions button) {
  min-height: var(--mobile-toolbar-control) !important;
  height: var(--mobile-toolbar-control) !important;
  max-height: var(--mobile-toolbar-control) !important;
  border-radius: var(--mobile-ui-control-radius) !important;
}

body.mobile-ui:not(.auth-required) #appLayout :is(
  #textTab,
  #imageTab,
  #videoToolTab,
  #audioToolTab,
  #speechToolPanel,
  #musicToolPanel
) :is(.quick-options, .music-options, .options-grid) {
  gap: var(--mobile-toolbar-gap) !important;
}

body.mobile-ui:not(.auth-required) #appLayout :is(
  #textTab,
  #imageTab,
  #videoToolTab,
  #audioToolTab,
  #speechToolPanel,
  #musicToolPanel
) .command-row {
  gap: var(--mobile-toolbar-gap) !important;
}

body.mobile-ui:not(.auth-required) #appLayout :is(
  #textTab,
  #imageTab,
  #videoToolTab,
  #audioToolTab,
  #speechToolPanel,
  #musicToolPanel
) .command-row > :is(button, .button-link),
body.mobile-ui:not(.auth-required) #appLayout :is(
  #textTab,
  #imageTab,
  #videoToolTab,
  #audioToolTab,
  #speechToolPanel,
  #musicToolPanel
) :is(button.primary, button.secondary, button.danger, .primary, .secondary, .danger):not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn):not(.infinite-card-run):not(.infinite-inline-reference-add):not(.infinite-inline-reference-pick) {
  min-height: var(--button-height) !important;
  height: var(--button-height) !important;
  max-height: var(--button-height) !important;
  font-size: var(--font-ui) !important;
}

body.mobile-ui:not(.auth-required) #appLayout :is(
  #textTab,
  #imageTab,
  #videoToolTab,
  #audioToolTab,
  #speechToolPanel,
  #musicToolPanel
) details.advanced > summary {
  min-height: var(--mobile-toolbar-control) !important;
  height: var(--mobile-toolbar-control) !important;
  max-height: var(--mobile-toolbar-control) !important;
  padding: 0 10px !important;
  font-size: var(--font-label) !important;
  border-radius: var(--mobile-ui-control-radius) !important;
}

body.mobile-compact-ui:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .tab-panel,
body.mobile-compact-ui:not(.auth-required) .layout.media-tool-layout .tool-panel.active {
  padding: 8px !important;
}

body.mobile-compact-ui:not(.auth-required) #appLayout :is(#textTab, #imageTab, #videoToolTab, #audioToolTab, #speechToolPanel, #musicToolPanel) textarea {
  min-height: 76px !important;
}

@media (prefers-reduced-motion: reduce) {
  body.mobile-ui *,
  body.mobile-ui *::before,
  body.mobile-ui *::after {
    scroll-behavior: auto !important;
  }
}

/* Typography source of truth: titles, subtitles, labels and card/body copy share one scale. */
body:not(.auth-required) {
  --hui-title-font: 16px;
  --hui-subtitle-font: 12px;
  --hui-section-font: 12.5px;
  --hui-body-font: 12.5px;
  --hui-caption-font: 11.5px;
  --hui-control-font: 12.5px;
  --hui-title-weight: 820;
  --hui-section-weight: 740;
}

body.mobile-ui {
  --hui-title-font: clamp(14px, calc(var(--font-ui) + 2px), 16px);
  --hui-subtitle-font: clamp(11.5px, var(--font-label), 12.5px);
  --hui-section-font: clamp(12px, calc(var(--font-ui) - 0.2px), 13px);
  --hui-body-font: clamp(12px, calc(var(--font-ui) - 0.4px), 13px);
  --hui-caption-font: clamp(11px, calc(var(--font-label) - 0.4px), 12px);
  --hui-control-font: clamp(12px, calc(var(--font-ui) - 0.2px), 13px);
  --mobile-ui-title: var(--hui-title-font);
  --mobile-ui-body: var(--hui-body-font);
  --mobile-ui-small: var(--hui-subtitle-font);
}

body:not(.auth-required) :is(
  #appLayout .tool-page-head h2:not(#videoToolTab > .tool-page-head h2),
  #appLayout .monitor-header h2,
  #appLayout .tool-card h2,
  #appLayout .workflow-head h2,
  #appLayout .workflow-inspector h2,
  #appLayout .infinite-canvas-head h2,
  #appLayout .settings-section-title strong,
  #appLayout .gateway-card-head strong,
  #appLayout .gateway-category-head strong,
  #appLayout .model-route-head strong,
  #appLayout .text-chat-current strong,
  #appLayout .text-chat-brand strong,
  #appLayout .canvas-board-title,
  #appLayout .workflow-canvas-title,
  .modal-panel .modal-head h2
) {
  font-size: var(--hui-title-font) !important;
  line-height: 1.2 !important;
  font-weight: var(--hui-title-weight) !important;
  letter-spacing: 0 !important;
}

body:not(.auth-required) :is(
  #appLayout .tool-page-head p,
  #appLayout .monitor-header p,
  #appLayout .workflow-head p,
  #appLayout .infinite-canvas-head p,
  #appLayout .settings-section-title span,
  #appLayout .gateway-card-head span,
  #appLayout .gateway-category-head span,
  #appLayout .model-route-head span,
  #appLayout .text-chat-current span,
  #appLayout .text-chat-brand span,
  #appLayout .text-chat-history-head small,
  .modal-panel .modal-head p
) {
  font-size: var(--hui-subtitle-font) !important;
  line-height: 1.34 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: var(--muted) !important;
}

body:not(.auth-required) #appLayout :is(
  label,
  .field-title,
  .field-label,
  .option-label,
  .upload-zone-head strong,
  .drop-zone strong,
  .text-chat-history-head,
  .workflow-toolbar > label,
  .canvas-board-row > label,
  details.advanced > summary,
  .settings-panel h3,
  .model-route-toolbar strong
) {
  font-size: var(--hui-section-font) !important;
  line-height: 1.24 !important;
  font-weight: var(--hui-section-weight) !important;
  letter-spacing: 0 !important;
}

body:not(.auth-required) :is(
  #appLayout .file-summary,
  #appLayout .file-summary-picker,
  #appLayout .plan-summary-inline,
  #appLayout .task-meta,
  #appLayout .drop-zone p,
  #appLayout .model-capability-hint,
  #appLayout .settings-provider-help,
  #appLayout .runtime-note,
  #appLayout .text-chat-bubble,
  #appLayout .text-chat-empty p,
  #appLayout .text-chat-history-preview,
  #appLayout .text-chat-history-count,
  #appLayout .text-chat-history-item time,
  #appLayout .workflow-status-row,
  #appLayout .canvas-composer-result,
  #appLayout .media-library-card p,
  #appLayout .favorite-case-card p,
  #appLayout .workflow-project-card p,
  #appLayout .workflow-media-library-card p,
  #appLayout .task-row p,
  #appLayout .task-list-row p,
  #appLayout small,
  .modal-panel :is(p, small, .file-summary)
) {
  font-size: var(--hui-body-font) !important;
  line-height: 1.38 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body:not(.auth-required) :is(
  #appLayout input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  #appLayout select,
  #appLayout textarea,
  #appLayout button:not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-chat-delete-btn):not(.infinite-card-run):not(.infinite-inline-reference-add):not(.infinite-inline-reference-pick),
  .modal-panel input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  .modal-panel select,
  .modal-panel textarea,
  .modal-panel button
):not(#infiniteCanvasPromptEditorModal *) {
  font-size: var(--hui-control-font) !important;
  letter-spacing: 0 !important;
}

body.mobile-ui:not(.auth-required) #appLayout#appLayout#appLayout :is(
  .tool-page-head h2:not(#videoToolTab > .tool-page-head h2),
  .monitor-header h2,
  .tool-card h2,
  .workflow-head h2,
  .workflow-inspector h2,
  .infinite-canvas-head h2,
  .settings-section-title strong,
  .gateway-card-head strong,
  .gateway-category-head strong,
  .model-route-head strong,
  .text-chat-current strong,
  .text-chat-brand strong,
  .canvas-board-title,
  .workflow-canvas-title
),
body.mobile-ui:not(.auth-required) .modal-panel.modal-panel :is(.modal-head h2) {
  font-size: var(--hui-title-font) !important;
  line-height: 1.2 !important;
  font-weight: var(--hui-title-weight) !important;
}

body.mobile-ui:not(.auth-required) #appLayout#appLayout#appLayout :is(
  .tool-page-head p,
  .monitor-header p,
  .workflow-head p,
  .infinite-canvas-head p,
  .settings-section-title span,
  .gateway-card-head span,
  .gateway-category-head span,
  .model-route-head span,
  .text-chat-current span,
  .text-chat-brand span,
  .text-chat-history-head small
) {
  font-size: var(--hui-subtitle-font) !important;
  line-height: 1.34 !important;
  font-weight: 500 !important;
}

body.mobile-ui:not(.auth-required) #appLayout#appLayout#appLayout :is(
  label,
  .field-title,
  .field-label,
  .option-label,
  .upload-zone-head strong,
  .drop-zone strong,
  .text-chat-history-head,
  .workflow-toolbar > label,
  .canvas-board-row > label,
  details.advanced > summary,
  .settings-panel h3,
  .model-route-toolbar strong
) {
  font-size: var(--hui-section-font) !important;
  line-height: 1.24 !important;
  font-weight: var(--hui-section-weight) !important;
}

body.mobile-ui:not(.auth-required) #appLayout#appLayout#appLayout :is(
  .file-summary,
  .file-summary-picker,
  .plan-summary-inline,
  .task-meta,
  .drop-zone p,
  .model-capability-hint,
  .settings-provider-help,
  .runtime-note,
  .text-chat-bubble,
  .text-chat-empty p,
  .text-chat-history-preview,
  .text-chat-history-count,
  .text-chat-history-item time,
  .workflow-status-row,
  .canvas-composer-result,
  .media-library-card p,
  .favorite-case-card p,
  .workflow-project-card p,
  .workflow-media-library-card p,
  .task-row p,
  .task-list-row p,
  small
),
body.mobile-ui:not(.auth-required) .modal-panel.modal-panel :is(p, small, .file-summary) {
  font-size: var(--hui-body-font) !important;
  line-height: 1.38 !important;
  font-weight: 400 !important;
}

body.mobile-ui:not(.auth-required) #appLayout#appLayout#appLayout :is(
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  select,
  textarea,
  button:not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-chat-delete-btn)
),
body.mobile-ui:not(.auth-required) .modal-panel.modal-panel :is(
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  select,
  textarea,
  button
) {
  font-size: var(--hui-control-font) !important;
}

body.mobile-ui:not(.auth-required) :is(
  #caseModal,
  #imagePreviewModal,
  #mediaPreviewModal,
  #watermarkModal,
  #watermarkPickerModal,
  #shortcutModal,
  #workflowCommandModal,
  #canvasCommandModal,
  #workflowProjectModal,
  #canvasProjectModal,
  #workflowMediaLibraryModal,
  #accountUsageModal
) .modal-panel.modal-panel > .modal-head h2 {
  font-size: var(--hui-title-font) !important;
  line-height: 1.2 !important;
  font-weight: var(--hui-title-weight) !important;
  letter-spacing: 0 !important;
}

body.mobile-ui:not(.auth-required) :is(
  #caseModal,
  #imagePreviewModal,
  #mediaPreviewModal,
  #watermarkModal,
  #watermarkPickerModal,
  #shortcutModal,
  #workflowCommandModal,
  #canvasCommandModal,
  #workflowProjectModal,
  #canvasProjectModal,
  #workflowMediaLibraryModal,
  #accountUsageModal
) .modal-panel.modal-panel > .modal-head :is(p, small) {
  font-size: var(--hui-subtitle-font) !important;
  line-height: 1.34 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

body.mobile-ui:not(.auth-required) :is(
  #caseModal,
  #imagePreviewModal,
  #mediaPreviewModal,
  #watermarkModal,
  #watermarkPickerModal,
  #shortcutModal,
  #workflowCommandModal,
  #canvasCommandModal,
  #workflowProjectModal,
  #canvasProjectModal,
  #workflowMediaLibraryModal,
  #accountUsageModal
) .modal-panel.modal-panel :is(.file-summary, p, small, input, select, textarea, button) {
  font-size: var(--hui-body-font) !important;
  letter-spacing: 0 !important;
}

/* Reference media picker: selected items live inside the picker, with add slots after them. */
/* --reference-thumb-size 是参考区缩略图尺寸的唯一收口令牌:.selected-preview 的 grid 列宽(repeat(auto-fill, …))
   与 .selected-thumb 的宽/高都读它,改这一处即桌面+手机统一变。缩略图固定尺寸 auto-fill,故略缩小即可让每行多排
   一个、消除「差一点点排不下」的别扭留白(用户诉求:小一点点)。手机断点值见下方 body.mobile-ui 覆盖。 */
body:not(.auth-required) #appLayout .reference-picker.reference-picker {
  --reference-thumb-size: 68px;
  --reference-add-size: 58px;
  --reference-picker-empty-min: 72px;
  --reference-picker-filled-max: 288px;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: var(--reference-picker-empty-min) !important;
  height: auto !important;
  max-height: none !important;
  padding: 10px 12px !important;
  white-space: normal !important;
  overflow: hidden !important;
}

body:not(.auth-required) #appLayout .reference-picker.reference-picker.has-reference-items {
  justify-content: flex-start !important;
  min-height: 0 !important; /* 收口:按内容自适应,一行参考图不再撑出大片空白(旧值168px) */
  max-height: var(--reference-picker-filled-max) !important;
  overflow-y: auto !important;
}

body:not(.auth-required) #appLayout .reference-picker .reference-picker-hint {
  display: block !important;
  flex: 0 0 auto !important;
  color: #607086 !important;
}

body:not(.auth-required) #appLayout .reference-picker.has-reference-items .reference-picker-hint {
  color: #74849a !important;
  font-size: var(--hui-caption-font, 11.5px) !important;
}

body:not(.auth-required) #appLayout .reference-picker .selected-preview {
  display: none !important;
  grid-template-columns: repeat(auto-fill, var(--reference-thumb-size)) !important;
  justify-content: start !important;
  align-items: start !important;
  gap: 8px !important;
  width: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

body:not(.auth-required) #appLayout .reference-picker.has-reference-items .selected-preview {
  display: grid !important;
}

body:not(.auth-required) #appLayout .reference-picker .selected-preview:empty {
  display: none !important;
}

body:not(.auth-required) #appLayout .reference-picker .selected-thumb {
  display: flex !important;
  position: relative !important;
  aspect-ratio: 1 / 1 !important;
  justify-self: start !important;
  width: var(--reference-thumb-size) !important;
  min-width: 0 !important;
  max-width: var(--reference-thumb-size) !important;
  height: var(--reference-thumb-size) !important;
  min-height: var(--reference-thumb-size) !important;
  max-height: var(--reference-thumb-size) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
}

body:not(.auth-required) #appLayout .reference-picker .selected-thumb > :is(img, video),
body:not(.auth-required) #appLayout .reference-picker .thumb-preview-plain > :is(img, video) {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
}

body:not(.auth-required) #appLayout .reference-picker .thumb-preview-plain {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body:not(.auth-required) #appLayout .reference-picker .selected-thumb:not(.reference-add-tile) > span:not(.media-play-badge):not(.media-thumb-icon),
body:not(.auth-required) #appLayout .reference-picker .selected-thumb:not(.reference-add-tile) > strong {
  display: none !important;
  position: absolute !important;
  left: 6px !important;
  right: 6px !important;
  bottom: 6px !important;
  z-index: 1 !important;
  min-width: 0 !important;
  padding: 3px 5px !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: #213047 !important;
  font-size: 10.5px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body:not(.auth-required) #appLayout .reference-picker .thumb-remove {
  top: 5px !important;
  right: 5px !important;
  z-index: 2 !important;
  min-width: 0 !important;
  min-height: 20px !important;
  height: 20px !important;
  max-height: 20px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  font-size: 9.5px !important;
  line-height: 1 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 4px 10px rgba(185, 28, 28, 0.12) !important;
}

body:not(.auth-required) #appLayout .reference-picker .reference-add-tile {
  display: grid !important;
  place-items: center !important;
  align-self: center !important;
  justify-self: center !important;
  width: var(--reference-add-size) !important;
  min-width: 0 !important;
  max-width: var(--reference-add-size) !important;
  height: var(--reference-add-size) !important;
  min-height: var(--reference-add-size) !important;
  max-height: var(--reference-add-size) !important;
  border: 1px dashed rgba(47, 109, 183, 0.42) !important;
  background: rgba(234, 242, 251, 0.72) !important;
  color: #255a9c !important;
  cursor: pointer !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body:not(.auth-required) #appLayout .reference-picker .reference-add-tile > span {
  display: block !important;
  position: static !important;
  padding: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 21px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
}

body.theme-dark:not(.auth-required) #appLayout .reference-picker .selected-thumb {
  background: rgba(16, 18, 26, 0.94) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22) !important;
}

body.theme-dark:not(.auth-required) #appLayout .reference-picker .selected-thumb > span:not(.media-play-badge):not(.media-thumb-icon),
body.theme-dark:not(.auth-required) #appLayout .reference-picker .selected-thumb > strong {
  background: rgba(16, 18, 26, 0.86) !important;
  color: #edf5ff !important;
}

body.theme-dark:not(.auth-required) #appLayout .reference-picker .reference-add-tile {
  background: rgba(47, 109, 183, 0.18) !important;
}

body.mobile-ui:not(.auth-required) #appLayout .reference-picker.reference-picker {
  --reference-thumb-size: 62px;
  --reference-add-size: 50px;
  --reference-picker-empty-min: calc(var(--mobile-control-h) * 2.15);
  --reference-picker-filled-max: calc(var(--mobile-control-h) * 7.4);
  min-height: var(--reference-picker-empty-min) !important;
  padding: 10px 12px !important;
  gap: 8px !important;
  border-radius: 12px !important;
}

body.mobile-ui:not(.auth-required) #appLayout .reference-picker.reference-picker.has-reference-items {
  min-height: 0 !important;
  max-height: var(--reference-picker-filled-max) !important;
}

body.mobile-ui:not(.auth-required) #appLayout .reference-picker .selected-preview {
  grid-template-columns: repeat(auto-fill, var(--reference-thumb-size)) !important;
  justify-content: start !important;
  gap: 7px !important;
}

body.mobile-ui:not(.auth-required) #appLayout .reference-picker .selected-thumb {
  width: var(--reference-thumb-size) !important;
  max-width: var(--reference-thumb-size) !important;
  height: var(--reference-thumb-size) !important;
  min-height: var(--reference-thumb-size) !important;
  max-height: var(--reference-thumb-size) !important;
  border-radius: 10px !important;
}

body.mobile-ui:not(.auth-required) #appLayout .reference-picker .reference-add-tile {
  width: var(--reference-add-size) !important;
  max-width: var(--reference-add-size) !important;
  height: var(--reference-add-size) !important;
  min-height: var(--reference-add-size) !important;
  max-height: var(--reference-add-size) !important;
}

body.mobile-ui:not(.auth-required) #appLayout#appLayout#appLayout .reference-picker .thumb-remove.thumb-remove {
  min-height: 20px !important;
  height: 20px !important;
  max-height: 20px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  font-size: 9.5px !important;
  line-height: 1 !important;
}

body.mobile-compact-ui:not(.auth-required) #appLayout .reference-picker .selected-preview {
  grid-template-columns: repeat(auto-fill, var(--reference-thumb-size)) !important;
}

body.mobile-ui:not(.auth-required) #appLayout#appLayout :is(
  #textFileSummary,
  #fileSummary,
  #sharedFileSummary,
  #videoFileSummary,
  #musicAudioFileSummary
).reference-picker.reference-picker {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  min-height: var(--reference-picker-empty-min) !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}

body.mobile-ui:not(.auth-required) #appLayout#appLayout :is(
  #textFileSummary,
  #fileSummary,
  #sharedFileSummary,
  #videoFileSummary,
  #musicAudioFileSummary
).reference-picker.reference-picker.has-reference-items {
  justify-content: flex-start !important;
  min-height: 0 !important;
  max-height: min(230px, var(--reference-picker-filled-max)) !important;
  overflow-y: auto !important;
}

/* Reference item sorting/removal interaction. */
body:not(.auth-required) #appLayout .reference-picker.has-reference-items {
  cursor: default !important;
}

body:not(.auth-required) #appLayout .reference-picker .selected-thumb[data-ref-source] {
  cursor: grab !important;
  touch-action: none !important;
  user-select: none !important;
  transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease !important;
}

body:not(.auth-required) #appLayout .reference-picker .selected-thumb.reference-dragging-live {
  position: fixed !important;
  z-index: var(--z-drag-ghost) !important;
  margin: 0 !important;
  pointer-events: none !important;
  cursor: grabbing !important;
  transform: scale(1.04) !important;
  opacity: 0.96 !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.22) !important;
  transition: none !important;
}

/* 占位一律是干净空档(见 styles.part1.css 同名规则)。这里原本用 !important 又画了一遍虚线框,
   等于把那条改动盖回去 —— 同一个决定别写两遍。 */
body:not(.auth-required) #appLayout .reference-picker .reference-drag-placeholder {
  border-color: transparent !important;
  background: none !important;
  box-shadow: none !important;
}

body:not(.auth-required) #appLayout .reference-picker.reference-delete-hover {
  border-color: rgba(220, 38, 38, 0.72) !important;
  background: rgba(254, 242, 242, 0.92) !important;
}

body:not(.auth-required) #appLayout .reference-picker.reference-delete-hover .reference-picker-hint {
  color: #b91c1c !important;
}

body:not(.auth-required) #appLayout .reference-picker .selected-thumb.reference-dragging-delete {
  opacity: 0.72 !important;
  filter: saturate(0.85) !important;
}

body:not(.auth-required) #appLayout .reference-picker .thumb-remove {
  display: none !important;
}

/* 手机端积分星形跟随顶栏图标尺寸，不给图标本体加圆底。 */
body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.account-summary-points .account-points-icon {
  width: calc(var(--mobile-icon-svg) + 2px) !important;
  height: calc(var(--mobile-icon-svg) + 2px) !important;
  min-width: calc(var(--mobile-icon-svg) + 2px) !important;
  min-height: calc(var(--mobile-icon-svg) + 2px) !important;
  max-width: calc(var(--mobile-icon-svg) + 2px) !important;
  max-height: calc(var(--mobile-icon-svg) + 2px) !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.account-summary-points .account-points-icon svg {
  width: var(--mobile-icon-svg) !important;
  height: var(--mobile-icon-svg) !important;
  min-width: var(--mobile-icon-svg) !important;
  min-height: var(--mobile-icon-svg) !important;
  max-width: var(--mobile-icon-svg) !important;
  max-height: var(--mobile-icon-svg) !important;
}

/* ============================================================
   工作流 / 无限画布 两层顶栏：唯一权威布局（覆盖旧单行 grid 规则）。
   要调整顶栏布局只改这里，勿再到处散加。
   旧的按 id 排序的 order 规则已删除（曾导致按钮顶到名称前）。
   ============================================================ */
/* 工具栏容器：强制两行 flex 列（压过 .workflow-toolbar / .canvas-board-row 的 display:grid，用 2 个 id 提特异性 + 末位加载）*/
body:not(.auth-required) #appLayout #workflowTab .flow-toolbar-2row,
body:not(.auth-required) #appLayout #infiniteCanvasTab .flow-toolbar-2row {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  grid-template-columns: none !important;
  gap: 7px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  max-height: none !important;
}
/* 第二行保持「横向滑动」(nowrap，见 styles.css 移动端 .canvas-board-actions)。
   要让横滑子项缩进视口内滚动，整条 flex 祖先链都必须 min-width:0，
   否则 nowrap 的 min-content(=所有按钮之和) 会把工具栏撑出屏幕。
   画布比工作流多一层 .infinite-canvas-toolbar，是之前撑爆的关键缺口。 */
body.mobile-ui:not(.auth-required) #appLayout #infiniteCanvasTab .infinite-canvas-main,
body.mobile-ui:not(.auth-required) #appLayout #infiniteCanvasTab .infinite-canvas-toolbar,
body.mobile-ui:not(.auth-required) #appLayout #infiniteCanvasTab .canvas-creator-bar,
body.mobile-ui:not(.auth-required) #appLayout #workflowTab .workflow-main {
  min-width: 0 !important;
  max-width: 100% !important;
}
/* 手机端画布主区只承载 stage；HUD 自身用 safe-area inset 贴底，主区不再额外留白。 */
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] .infinite-canvas-main,
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="workflowModule"] .workflow-main {
  box-sizing: border-box !important;
  padding-bottom: 0 !important;
}
/* 画布手机端顶部悬浮窗：与工作流卡片同一布局，absolute 悬浮且高度贴合内容。 */
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .canvas-board-row {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  right: 8px !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  max-height: var(--mobile-toolbar-max) !important;
  align-items: stretch !important;
}
/* 两行各自：flex 换行、占满整宽 */
body:not(.auth-required) #appLayout .flow-toolbar-2row .flow-toolbar-primary,
body:not(.auth-required) #appLayout .flow-toolbar-2row .flow-toolbar-secondary {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  max-height: none !important;
}
/* 第一行的操作按钮 / 保存按钮：自然宽，不被撑满 */
body:not(.auth-required) #appLayout .flow-toolbar-2row .flow-toolbar-primary > .primary,
body:not(.auth-required) #appLayout .flow-toolbar-2row .flow-toolbar-primary > .secondary,
body:not(.auth-required) #appLayout .flow-toolbar-2row .flow-toolbar-primary > .save-toggle {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
}
/* 保存按钮（保存 + 状态合一）：未保存=绿色，已保存=灰色；点击即保存 */
body:not(.auth-required) #appLayout .save-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  height: 34px;
  padding: 0 13px;
  border-radius: 10px;
  border: 1px solid;
  background: var(--surface-2);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
body:not(.auth-required) #appLayout .save-toggle .ui-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: inherit;
}
body:not(.auth-required) #appLayout .save-toggle .ui-icon svg {
  width: 100%;
  height: 100%;
}
body:not(.auth-required) #appLayout .save-toggle.is-dirty {
  color: var(--ok);
  border-color: var(--ok-border);
  background: var(--ok-soft);
}
body:not(.auth-required) #appLayout .save-toggle.is-clean,
body:not(.auth-required) #appLayout .save-toggle.is-local {
  color: var(--muted-2);
  border-color: var(--border);
  background: var(--surface-2);
}
body:not(.auth-required) #appLayout .save-toggle.is-syncing {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
body:not(.auth-required) #appLayout .save-toggle.is-error,
body:not(.auth-required) #appLayout .save-toggle.is-conflict {
  color: var(--danger);
  border-color: var(--danger-border);
  background: var(--danger-soft);
}
/* 保存按钮暗色(浅色规则特异度高,这里同居镜像;未保存保留绿色语义) */
body.theme-dark:not(.auth-required) #appLayout .save-toggle,
body.theme-dark:not(.auth-required) #appLayout .save-toggle.is-clean,
body.theme-dark:not(.auth-required) #appLayout .save-toggle.is-local {
  color: var(--muted-2);
  border-color: var(--border);
  background: var(--surface-2);
}
body.theme-dark:not(.auth-required) #appLayout .save-toggle.is-dirty {
  color: var(--ok);
  border-color: var(--ok-border);
  background: var(--ok-soft);
}
body.theme-dark:not(.auth-required) #appLayout .save-toggle.is-syncing {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
body.theme-dark:not(.auth-required) #appLayout .save-toggle.is-error,
body.theme-dark:not(.auth-required) #appLayout .save-toggle.is-conflict {
  color: var(--danger);
  border-color: var(--danger-border);
  background: var(--danger-soft);
}
/* 运行按钮：文字「运行」+ 内嵌积分同一行 */
body:not(.auth-required) #appLayout #workflowRunBtn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}
body:not(.auth-required) #appLayout #workflowRunBtn .run-inline-price {
  display: inline-flex !important;
  align-items: center !important;
}
/* 名称：标签「名称」与输入框始终同一行（覆盖 .workflow-toolbar>label / .canvas-board-row>label 的 display:grid 堆叠）。
   桌面占主要空间靠左；手机独占第一行。 */
body:not(.auth-required) #appLayout .flow-toolbar-2row .flow-toolbar-primary .flow-toolbar-name {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 7px !important;
  flex: 1 1 220px !important;
  min-width: 0 !important;
  max-width: 420px !important;
  margin: 0 !important;
}
body:not(.auth-required) #appLayout .flow-toolbar-2row .flow-toolbar-name > span {
  flex: 0 0 auto !important;
  font-size: 12px !important;
  color: #5a6b82 !important;
  white-space: nowrap !important;
}
body:not(.auth-required) #appLayout .flow-toolbar-2row .flow-toolbar-name > input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
}
/* 手机端：名称缩短，和运行/保存挤在同一行（第一行），第二行放其它按钮——共两行 */
body.mobile-ui:not(.auth-required) #appLayout .flow-toolbar-2row .flow-toolbar-primary .flow-toolbar-name {
  flex: 1 1 90px !important;
  min-width: 72px !important;
  max-width: none !important;
}
body.mobile-ui:not(.auth-required) #appLayout .flow-toolbar-2row .flow-toolbar-name > span {
  font-size: 11px !important;
}
body.mobile-ui:not(.auth-required) #appLayout .save-toggle {
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
}
body.mobile-ui:not(.auth-required) #appLayout .save-toggle .save-toggle-text {
  display: none;
}
/* 收起态迷你条(.flow-toolbar-mini):absolute+inline-flex+左锚定、无右边界 → 项目名一长,
   后面的图标/展开钮就被顶出右侧屏幕点不到(用户反馈)。限最大宽到视口内 + 横向滑动(隐藏滚动条),
   名称收窄、子项不收缩 → 可左划够到所有按钮。画布/工作流迷你条共用此规则。 */
body.mobile-ui:not(.auth-required) .flow-toolbar-mini {
  max-width: calc(100vw - 24px) !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
}
body.mobile-ui:not(.auth-required) .flow-toolbar-mini::-webkit-scrollbar { display: none !important; }
body.mobile-ui:not(.auth-required) .flow-toolbar-mini .flow-mini-name { max-width: 40vw !important; }
/* 展开态第二行(动作按钮横滑)隐藏滚动条 → 干净不露「模块条」。 */
body.mobile-ui:not(.auth-required) .canvas-board-actions,
body.mobile-ui:not(.auth-required) .workflow-toolbar-actions { scrollbar-width: none !important; }
body.mobile-ui:not(.auth-required) .canvas-board-actions::-webkit-scrollbar,
body.mobile-ui:not(.auth-required) .workflow-toolbar-actions::-webkit-scrollbar { display: none !important; }

/* ── 账号中心弹窗手机端可下拉 + 消耗明细动态加载 ──────────────────────────────
   原因:手机端各分区(账号管理/兑换码/消耗明细)是 .account-usage-panel(flex 列)的子项,
   带 min-height:0 + overflow:hidden,内容超高时被 flex 压缩并裁掉,导致面板 scrollHeight==clientHeight、
   整个弹窗无法下拉。让面板各直接子项不收缩(flex-shrink:0),内容超高时由面板整体竖向滚动。
   面板可滚后,消耗明细原有的下滑自动加载(handleAccountUsagePanelScroll)即生效,故隐藏「加载更多」按钮。*/
body.mobile-ui:not(.auth-required) #accountUsageModal .account-usage-panel > * {
  flex-shrink: 0 !important;
}
/* 消耗明细分区本身不再裁切竖向内容(横向宽表仍由 .account-usage-table-wrap 自身横滑) */
body.mobile-ui:not(.auth-required) #accountUsageModal :is(.admin-account-manager, .admin-audit-manager, .admin-recycle-manager, .admin-feedback-manager, .account-redeem-pane, .account-usage-history, .routing-health-monitor):not([hidden]) {
  overflow: visible !important;
  display: grid !important; /* 手机端整 panel 滚:tab 区回自然高;:not([hidden]) 必须保留,否则强制 display 压过 hidden=所有 tab 区同时显示、切 tab 失效 */
  align-content: start !important; /* 容器定高时 grid auto 行会被拉伸均分=区块间距巨大(计数行曾被拉到 139px),必须钉 start */
}

/* 明细筛选行手机紧凑(压过 part4 的 tools 单列 grid):搜索/类型/时间各占整行,从+到+刷新并成一行 */
@media (max-width: 720px) {
  body:not(.auth-required) #accountUsageModal .account-usage-tools {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  body:not(.auth-required) #accountUsageModal .account-usage-tools > input[type="search"],
  body:not(.auth-required) #accountUsageModal .account-usage-tools > .account-usage-filter {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  body:not(.auth-required) #accountUsageModal .account-usage-tools .account-usage-date {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  body:not(.auth-required) #accountUsageModal .account-usage-tools .account-usage-date input {
    width: 100% !important;
    min-width: 0 !important;
  }

  body:not(.auth-required) #accountUsageModal #refreshAccountUsageBtn {
    flex: 0 0 auto !important;
  }
}
body.mobile-ui:not(.auth-required) #accountUsageModal :is(#adminAccountList, #adminAuditList, #adminRecycleList, #adminFeedbackList, .account-usage-table-wrap) {
  overflow: visible !important;
  min-height: 0 !important;
}

/* ── 手机端「图片任务与结果」旧监视器残留清除 ──────────────────────────────────
   feed 模式本应隐藏旧 chrome(统计/操作条/标题/进度),但手机版那批高特异性规则(part4 里
   #appLayout...> .monitor .stats-grid 等,特异性 1,7,0)把隐藏覆盖了,导致手机端残留"0成功/0失败…"
   统计和"全部下载/删除记录/取消剩余/重试失败…"旧按钮。这里用同级特异性 + .feed-mode 再次隐藏。 */
body.mobile-ui:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout) > .monitor.feed-mode :is(.monitor-header, .progress-wrap, .stats-grid, .command-row.compact) {
  display: none !important;
}

/* ── 项目库卡片(工作流 + 无限画布)手机端统一竖排,排版一致且整齐 ──────────────
   无限画布卡片此前被 part4 的 #canvasProjectModal 网格(58px|1fr)压坏:封面挤成 ~33px 致 元素/媒体/连线
   标签重叠、操作区被拉到 ~300px 致 5 个按钮巨大间距。统一改为竖排:整宽封面 + 标题/日期 + 两列按钮,
   与工作流卡片一致。用 ID 选择器提特异性盖过 part4,放 responsive.css 末位加载稳过并行改动。 */
body.mobile-ui:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) :is(.workflow-project-card, .canvas-project-card) {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  gap: 9px !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  align-items: stretch !important;
}
/* 无限画布封面改成整宽横幅(原 58px 缩略图被网格压扁),标签有空间不再重叠 */
body.mobile-ui:not(.auth-required) #canvasProjectModal .canvas-project-preview {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 92px !important;
  min-height: 92px !important;
  max-height: 92px !important;
}
/* 两个项目库操作按钮统一:整齐两列、按内容排行、紧凑间距,不被卡片高度拉伸 */
body.mobile-ui:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) :is(.workflow-project-actions, .canvas-project-actions) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  align-content: start !important;
  gap: 7px !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   手机端「一行两个」自适应卡片排版 + 兑换码设置整理(2026-06-16)
   ── 根因说明 ──
   mobile-ui 在「max-width:820px 或 coarse 指针」时激活(见 app.part1 isMobileUiViewport),
   但兑换码等旧排版规则写在 styles.part2 的 @media(max-width:720px) 里 → 720~820px 及平板/折叠屏
   (coarse 但更宽)区间 mobile-ui 已开、单列规则却没生效,5 列表单挤成一团("乱")。
   这里统一用 body.mobile-ui(与激活条件对齐、与宽度断点无关)在最后加载的 responsive.css 里收口,
   彻底消除断点错位;卡片网格用 minmax(0,1fr) 保证任意设备宽度都能两列且不溢出。
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. 兑换码设置(管理员制作表单 + 兑换码列表)整理为单列、字段/按钮整宽 ── */
body.mobile-ui:not(.auth-required) #accountUsageModal .admin-redeem-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}
body.mobile-ui:not(.auth-required) #accountUsageModal .admin-redeem-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 9px !important;
}
body.mobile-ui:not(.auth-required) #accountUsageModal .admin-redeem-grid :is(.arc-prefix, .arc-suffix, .arc-num, .arc-note, .arc-submit) {
  grid-column: auto !important;
}
body.mobile-ui:not(.auth-required) #accountUsageModal .admin-redeem-grid :is(label, input),
body.mobile-ui:not(.auth-required) #accountUsageModal .admin-redeem-grid .arc-submit,
body.mobile-ui:not(.auth-required) #accountUsageModal .admin-redeem-head > button {
  width: 100% !important;
  max-width: 100% !important;
}
body.mobile-ui:not(.auth-required) #accountUsageModal .admin-redeem-grid .arc-submit {
  height: 40px !important;
}
/* 兑换码列表行:码 / 使用者 / 操作 竖向堆叠,不再三列横挤出框 */
body.mobile-ui:not(.auth-required) #accountUsageModal .admin-redeem-row {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}
body.mobile-ui:not(.auth-required) #accountUsageModal .admin-redeem-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

/* ── 2. 充值套餐卡片:一行两个,随设备自适应,内部紧凑 ── */
body.mobile-ui:not(.auth-required) #accountUsageModal .recharge-pkg-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
body.mobile-ui:not(.auth-required) #accountUsageModal .recharge-pkg {
  padding: 13px 11px !important;
  gap: 5px !important;
}
body.mobile-ui:not(.auth-required) #accountUsageModal .recharge-pkg-name {
  font-size: 14.5px !important;
}
body.mobile-ui:not(.auth-required) #accountUsageModal .recharge-pkg-points b {
  font-size: 20px !important;
}
body.mobile-ui:not(.auth-required) #accountUsageModal .recharge-pkg-price {
  font-size: 15px !important;
}

/* ── 3. 灵感广场 + 灵感/社区案例(共用 .hl-grid):一行两个 ──
   styles.part4 有 `:is(#presetCaseModal,#communityGalleryModal) .hl-grid{...}!important`(特异性 1,2,1,
   且 ≤720px 还强制单列),纯 .hl-grid 选择器盖不过(ID 必胜)。这里同样用模态 ID 限定把特异性提到 1,3,1 反超。 */
body.mobile-ui:not(.auth-required) :is(#presetCaseModal, #communityGalleryModal) .hl-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

/* ── 4. 收藏(#caseList,原本无网格、竖向堆叠):改成一行两个网格 ── */
body.mobile-ui:not(.auth-required) #caseModal #caseList {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-content: start !important;
}
/* 案例/收藏卡片在窄列里:封面更扁、文字两行截断、按钮自动两两换行(.hl-actions 本就 flex-wrap) */
body.mobile-ui:not(.auth-required) :is(.hl-grid, #caseList) .hl-card-prev {
  aspect-ratio: 4 / 3 !important;
}
body.mobile-ui:not(.auth-required) :is(.hl-grid, #caseList) .hl-card-prompt {
  -webkit-line-clamp: 2 !important;
}

/* ── 5. 项目库(工作流 + 无限画布):一行两个,卡片竖排紧凑 ── */
body.mobile-ui:not(.auth-required) :is(#workflowProjectList, #canvasProjectList) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  gap: 10px !important;
}
/* 封面在窄列里改扁(覆盖 section 28 的 92px 单列尺寸),标签缩小不溢出 */
body.mobile-ui:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) .project-card-cover {
  height: 70px !important;
  min-height: 70px !important;
  max-height: 70px !important;
}
body.mobile-ui:not(.auth-required) #canvasProjectModal .canvas-project-preview {
  height: 70px !important;
  min-height: 70px !important;
  max-height: 70px !important;
}
body.mobile-ui:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) .project-card-cover-tags em {
  font-size: 10px !important;
  padding: 1px 5px !important;
}
/* 卡片说明文字最多两行,控制卡片高度;按钮更紧凑 */
body.mobile-ui:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) .workflow-project-main p {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
body.mobile-ui:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) :is(.workflow-project-actions, .canvas-project-actions) button {
  font-size: 11.5px !important;
  padding: 6px 4px !important;
  min-height: 30px !important;
}
/* 画布卡共 5 个按钮(奇数):最后的「删除」整行,凑成 2+2+1 整齐收尾 */
body.mobile-ui:not(.auth-required) #canvasProjectModal .canvas-project-actions button:last-child {
  grid-column: 1 / -1 !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > button.infinite-card-run.infinite-card-run {
  min-height: var(--canvas-inline-run-h, 40px) !important;
  height: var(--canvas-inline-run-h, 40px) !important;
  max-height: none !important;
  padding: 0 var(--canvas-inline-run-pad-x, 18px) !important;
  border-radius: 999px !important;
  font-size: var(--canvas-inline-run-font, 15px) !important;
  line-height: 1 !important;
}

/* Mobile media library: one fixed sheet and one scroll owner; pick mode keeps the same shared card UI. */

@media (max-width: 640px) {
  body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal.modal-mask:not([hidden]) {
    align-items: stretch !important;
    justify-items: stretch !important;
    padding: 6px !important;
    overflow: hidden !important;
  }

  body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-panel {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    width: calc(100vw - 12px) !important;
    width: calc(100dvw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    max-width: calc(100dvw - 12px) !important;
    height: calc(100dvh - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    min-height: 0 !important;
    padding: 10px !important;
    overflow: hidden !important;
    border-radius: 18px !important;
  }

  body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .modal-head {
    position: static !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    gap: 8px !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-head-actions {
    order: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-head-actions .storage-usage-library {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-head-actions #closeWorkflowMediaLibraryBtn {
    width: auto !important;
    min-width: max-content !important;
  }

  body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .modal-head h2 {
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-project-status {
    margin-top: 3px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-switch {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    flex: 0 0 auto !important;
    margin: 0 0 8px !important;
  }

  body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-switch button {
    min-width: 0 !important;
    min-height: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
  }

  body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-view.is-active {
    overflow: hidden !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(74px, 0.62fr) minmax(68px, 0.56fr) !important;
    align-items: stretch !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 8px !important;
  }

  body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal #workflowMediaLibrarySearch {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal :is(#workflowMediaLibraryKind, #workflowMediaLibraryDownloadBtn, #workflowMediaLibraryRefreshBtn) {
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
  }

  body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    padding: 0 2px 8px 0 !important;
  }

  body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-list > .workflow-project-empty {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 220px !important;
    align-self: stretch !important;
  }

  body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-upload-view {
    gap: 7px !important;
    overflow: hidden !important;
  }

  body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-upload-drop {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 54px !important;
    padding: 8px 9px !important;
    border-radius: 12px !important;
    text-align: left !important;
  }

  body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-upload-drop strong {
    grid-column: 1 !important;
    font-size: 12.5px !important;
    line-height: 1.15 !important;
  }

  body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-upload-drop span {
    grid-column: 1 !important;
    font-size: 10.8px !important;
    line-height: 1.25 !important;
  }

  body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-upload-drop button {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
  }

  body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-upload-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 2px 8px 0 !important;
  }

  body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-upload-pending-badge {
    right: 8px !important;
    top: 8px !important;
    min-height: 21px !important;
    padding: 0 8px !important;
    font-size: 10.5px !important;
  }

  body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-card {
    grid-template-rows: auto max-content !important;
  }

  body.mobile-ui.media-library-pick-mode:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-pickbar {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 9px !important;
    border-radius: 14px !important;
  }

  body.mobile-ui.media-library-pick-mode:not(.auth-required) #workflowMediaLibraryPickHint {
    flex: 1 1 100% !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  body.mobile-ui.media-library-pick-mode:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-pickbar-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  body.mobile-ui.media-library-pick-mode:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-pickbar-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
}

body.theme-switching:not(.auth-required) :where(*):not(#themeToggleBtn):not(#themeToggleBtn *) {
  transition: none !important;
}

/* ── 全站禁止选中（电脑端 + 触摸端都生效）─────────────────────────────────────────
   电脑端按住拖动会把图片、界面文字一起框选，很影响；这里默认全站禁选中，只放开「需要输入/复制」的内容：
   各类输入框、提示词输入、任务结果提示词、结果详情面板。touch-action / pointer-events / 长按浮层
   等触摸专属处理仍在下面的 @media 里（缩略图 pointer-events:none 只能限触摸端，否则桌面端拖图会失效）。 */
body {
  -webkit-user-select: none;
  user-select: none;
}
input, textarea, select, [contenteditable="true"],
.text-chat-bubble, .gen-prompt, .media-thumb-prompt,
.app-confirm-prompt, .feed-detail-prompt, .media-detail-prompt,
.feed-detail-panel, .feed-detail-panel *,
.feed-detail-preview, .feed-detail-preview * {
  -webkit-user-select: text;
  user-select: text;
}

/* ── 触摸端统一手感（底层收口，替代此前散落的 callout/shield 局部规则）───────────────────
   1) 全站默认禁选中、禁系统长按浮层 —— 接近原生 App，界面文字不再被框选/弹放大镜；
   2) 缩略图 img/video 设 pointer-events:none —— 长按落不到「图片元素」上，微信/安卓 X5 也无从弹「保存图片」
      （-webkit-touch-callout 在安卓 X5 无效，「让被按的不是 <img>」是唯一全设备可靠的办法）；
      触摸/点击穿透到容器，由容器(.gen-slide / 卡片)上的拖拽与详情逻辑处理；
   3) 下面对需要选中/复制/长按保存/输入的内容显式放开。
   仅触摸设备(hover:none / coarse)命中；桌面行为完全不变。 */
@media (hover: none), (pointer: coarse) {
  body {
    -webkit-touch-callout: none;
  }
  .gen-slide img,
  .gen-slide video,
  .workflow-media-library-preview img,
  .workflow-media-library-preview video,
  .media-thumb img,
  .media-thumb video,
  .thumb .thumb-preview img,
  .thumb .thumb-preview video {
    pointer-events: none;
  }
  /* 结果区媒体卡:横向=原生分页(pan-x)从任务区滑得回参数区、纵向=feed 滚动(pan-y)、静按 200ms=长按拖幽灵。
     原来只 pan-y 禁了横向→在任务区(全是卡)滑不回参数页(用户报)。现改 pan-x pan-y:快速横滑走原生合成器分页,
     幽灵已改纯长按(去 directDragAxis),快滑不误触;幽灵激活后运行时 passive:false+preventDefault 压住原生滚动
     不打架(左边缘返回仍由 maybeReturnHomeOnLeftEdgeDuringDrag 处理)。整个 pager 区(容器+卡)横向统一原生分页。 */
  .gen-slide {
    touch-action: pan-x pan-y;
  }
  /* 需要可输入/可选中复制的内容显式恢复长按浮层(选中已由全局规则放开)。
     注意:不再把详情面板/预览区整块恢复 callout:default —— 那正是详情主图长按弹
     「存储图片/拷贝」干扰拖拽的根因;侧栏提示词/编号仍可选中复制(user-select:text)。 */
  input, textarea, select, [contenteditable="true"],
  .text-chat-bubble, .gen-prompt,
  .app-confirm-prompt, .feed-detail-prompt, .media-detail-prompt {
    -webkit-touch-callout: default;
  }
  /* 详情里的图片/视频可点、可拖拽/缩放（不在上面的 pointer-events:none 之列，这里兜底显式恢复）。 */
  .feed-detail-preview img,
  .feed-detail-preview video {
    pointer-events: auto;
  }
  /* 详情主图(feed 结果主图 / 媒体库主图)放开长按 = 浏览器「保存图片」菜单,保存高清原图(用户诉求:
     下载高清后长按直接存)。相册缩略小图/参考小图/音乐唱盘封面仍 callout:none(长按它们只会存到缩略/封面、
     无意义)。:not() 把主图排除在 none 之外、主图单独 default。列表缩略走另一套 pointer-events:none,不受此影响。 */
  .feed-detail-media,
  .media-detail-zoom-target {
    -webkit-touch-callout: default;
  }
  .feed-detail-preview img:not(.feed-detail-media):not(.media-detail-zoom-target),
  .feed-detail-preview video:not(.feed-detail-media):not(.media-detail-zoom-target),
  .vinyl-cover {
    -webkit-touch-callout: none;
  }
  /* 生成库/媒体库卡片 + 单任务结果网格瓦片都是长按框选/拖拽区:整卡禁选中/禁 callout,压过上面对
     .gen-prompt/.media-thumb-prompt/文件名 的 user-select:text 放开——否则长按里面的提示词/文件名会弹系统
     复制菜单,干扰长按框选/拖拽、还挡着收尾不关。文本复制走详情弹窗的复制按钮。 */
  .gen-card, .gen-card *,
  .workflow-media-library-card, .workflow-media-library-card *,
  .media-thumb, .media-thumb * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  /* 手机端拖拽幽灵缩小（桌面保持原 88/92px）；居中定位由各自的 transform: translate(-50%,-50%) 负责。 */
  .gen-drag-ghost,
  .app-output-touch-drag-ghost,
  .workflow-media-library-card-ghost {
    width: 60px;
    height: 60px;
    font-size: 22px;
  }
}

/* =====================================================================
   无限画布两个全屏弹窗的手机适配（第一批）
   - 图片编辑台 .image-studio：桌面是「满屏画布 + 四角浮动面板」，手机把竖排
     工具栏挪到底部横滚条、AI 面板变底部抽屉、各浮层缩小不互相压。
   - 导演台 .poser-studio：桌面三栏（机位/演员 · 3D舞台 · 场景/灯光），手机
     栈成「舞台在上、左右栏依次在下、整段可滚」，顶/底栏换行、控件加大。
   用 body.mobile-ui 门控（responsive.css 最后加载，覆盖桌面与 styles.part1 的
   @media(max-width:860px) 旧块），真机/移动模式一致生效。
   ===================================================================== */

/* 这两个是全屏编辑器,必须铺满视口。通用移动端 modal 把 .modal-panel 缩成底部卡片(居中/限高/留白),
   要用 ID 提权 + !important 顶回去,否则浮动子面板算的是「卡片」而非「视口」边缘、贴不到屏边。 */
body.mobile-ui #imageStudioModal.modal-mask,
body.mobile-ui #poserStudioModal.modal-mask {
  padding: 0 !important; align-items: stretch !important; justify-content: stretch !important;
}
body.mobile-ui #imageStudioModal .image-studio-panel,
body.mobile-ui #poserStudioModal .poser-studio-panel {
  width: 100% !important; max-width: none !important;
  height: 100% !important; max-height: none !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; border-radius: 0 !important; transform: none !important;
}

/* ---------- 图片编辑台 image studio ---------- */
/* 左侧竖排工具栏 → 底部横向滚动条 */
body.mobile-ui .image-studio-rail {
  left: 6px; right: 6px; top: auto; bottom: 6px; transform: none;
  flex-direction: row; gap: 2px; padding: 5px 6px; border-radius: 14px;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body.mobile-ui .image-studio-rail::-webkit-scrollbar { display: none; }
body.mobile-ui .image-studio-tool { width: auto; min-width: 50px; flex: 0 0 auto; padding: 5px 7px; grid-template-rows: auto auto; }
body.mobile-ui .image-studio-tool-ico svg { width: 18px; height: 18px; }
body.mobile-ui .image-studio-tool-label { font-size: 10px; }
/* 顶部选项条：撤回/重做/退出整组挪到第二行后，选项条独占第一行、铺满整宽（right:6）。
   base 是 justify-content:center，配合 nowrap+横滚会把内容居中→两端被裁；手机端改 flex-start 从左对齐。 */
body.mobile-ui .image-studio-options {
  left: 6px; right: 6px; top: 6px; transform: none; max-width: none;
  justify-content: flex-start;
  min-height: 38px; padding: 5px 10px; gap: 6px; border-radius: 12px;
  overflow-x: auto; overflow-y: hidden; white-space: nowrap; flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
body.mobile-ui .image-studio-options::-webkit-scrollbar { display: none; }
body.mobile-ui .image-studio-options-hint { font-size: 12px; }
/* 右上角 撤回/重做/退出：整组落到「第二行」(选项条之下)，横排贴右；第一行完全让给选项条。 */
body.mobile-ui .image-studio-topright {
  top: 62px; right: 6px; gap: 4px; padding: 4px; border-radius: 12px;
  display: flex; flex-wrap: nowrap; width: auto;
}
body.mobile-ui .image-studio-topright .image-studio-sep { display: none; }
body.mobile-ui .image-studio-iconbtn { width: 32px; height: 32px; }
body.mobile-ui .image-studio-iconbtn svg { width: 17px; height: 17px; }
/* 底部 缩放+保存：移到工具栏之上、两端对齐（bottom 抬到工具栏加高后的上沿之上，避免与工具栏叠压） */
body.mobile-ui .image-studio-foot {
  left: 6px; right: 6px; bottom: 66px; transform: none;
  justify-content: space-between; gap: 8px;
}
body.mobile-ui .image-studio-zoom { padding: 4px 6px; }
body.mobile-ui .image-studio-save { padding: 0 16px; font-size: 13px; }
/* 右侧 AI 面板 → 底部抽屉（落在 foot+工具栏之上，限高可滚，不互相压）。
   抽屉高度收到 42dvh（不到半屏）少占空间，内部更紧凑、可滚；换角度的 3D 机位靠这个变量算出「抽屉上沿之上」的可视带。 */
body.mobile-ui #imageStudioModal .image-studio { --studio-ai-drawer-h: 42dvh; }
body.mobile-ui .image-studio-aipanel {
  left: 6px; right: 6px; top: auto; bottom: 120px; width: auto;
  max-height: var(--studio-ai-drawer-h); border-radius: 16px; padding: 12px;
}
/* 抽屉内部收紧：字段间距/标题间距变小、AI 提示词文本框别用全站 104px 高，整体更矮少占屏 */
body.mobile-ui #imageStudioModal .image-studio-aipanel .image-studio-field { margin-bottom: 8px; }
body.mobile-ui #imageStudioModal .image-studio-aipanel .image-studio-ai-title { margin-bottom: 8px; }
body.mobile-ui #imageStudioModal .image-studio-aipanel textarea { min-height: 54px !important; }
/* 换角度 3D 机位预览：默认铺满整个 stage → 被底部抽屉盖住中央的机位/被摄卡片。
   手机端把它压到「选项条之下、抽屉上沿之上」的可视带里（渲染循环每帧按 clientHeight 自适应，机位完整可见可拖）。 */
body.mobile-ui #imageStudioModal .image-studio-3d {
  top: 54px; bottom: calc(var(--studio-ai-drawer-h) + 132px);
}

/* 触控放大：全站缩放系统把「所有按钮」压成 ~28px 高(!important)，编辑台的工具/图标/缩放/保存按钮太小难点。
   用 #imageStudioModal 提权 + !important 把它们还原到舒适触控尺寸；工具栏高度随之增加，foot/抽屉 bottom 已相应抬高。 */
body.mobile-ui #imageStudioModal .image-studio-tool {
  min-height: 44px !important; height: auto !important; padding: 6px 8px !important;
}
body.mobile-ui #imageStudioModal .image-studio-iconbtn {
  width: 34px !important; height: 34px !important; min-height: 34px !important;
}
body.mobile-ui #imageStudioModal .image-studio-zoom-btn {
  min-height: 34px !important; height: 34px !important;
}
body.mobile-ui #imageStudioModal .image-studio-save {
  min-height: 44px !important; height: 44px !important;
}
/* 选项条/抽屉里的操作按钮·比例 chip·AI 生成按钮：同样被压成 ~28px，放大到易点高度 */
body.mobile-ui #imageStudioModal :is(.image-studio-opt-btn, .image-studio-chip, .image-studio-ai-run) {
  min-height: 38px !important; height: auto !important;
}
body.mobile-ui #imageStudioModal .image-studio-aipanel select {
  min-height: 40px !important; height: 40px !important;
}
/* 分割行/列、裁剪自定义比例等窄输入在手机上被挤到 ~16px 宽点不中：给足最小宽高 */
body.mobile-ui #imageStudioModal .image-studio-options :is(.image-studio-field-inline input[type="number"], .image-studio-field-inline input[type="text"], .image-studio-ratio-input) {
  min-width: 52px !important; min-height: 34px !important; height: 34px !important;
}
/* 笔刷/粗细等滑杆同样被压到 ~18px 宽拖不动：给足可拖宽度 */
body.mobile-ui #imageStudioModal .image-studio-options .image-studio-field-inline input[type="range"] {
  min-width: 96px !important; height: 34px !important;
}
/* (旧色块 !important 对抗规则已删:控件规格系统按 [type="color"] 根豁免后,唯一正则源在 input.image-studio-color) */

/* 右下角「全站生成」悬浮球(#globalGenFab, position:fixed; z-index:99990)会穿透到弹层之上、压住底部操作
   (保存分支/评论输入/媒体库筛选刷新/下拉面板底部选项等)。收口成一条:任何模态窗口(.modal-mask)或手机端
   下拉面板(.mobile-select-mask,z 低于悬浮球)打开时都先把它藏起来,关闭即恢复。旧写法逐个列窗口 id,漏了
   媒体库等窗口——悬浮球就压住那些窗口的控件;下拉面板同理(悬浮球 z 高于 sheet,盖住右下角选项)。
   软键盘同理:文本输入聚焦(mobile-text-entry-active,由视口/焦点逻辑统一维护)时,fixed bottom 的悬浮球会被
   收缩的视觉视口顶到内容上方——归入同一「遮挡态即隐藏」轴,键盘收起即恢复。 */
body.mobile-ui:has(.modal-mask:not([hidden])) #globalGenFab,
body.mobile-ui:has(.mobile-select-mask:not([hidden])) #globalGenFab,
body.mobile-ui.mobile-text-entry-active #globalGenFab {
  display: none !important;
}

/* ---------- 导演台 poser studio（手机端 = 人偶预览置顶常显 + 底部半屏抽屉） ----------
   旧方案抽屉是「绝对定位覆盖层(52dvh, bottom:0)」→ 一开就把居中的人偶盖掉大半(用户反馈「预览被挡全掉」)。
   现在改为文档流内的底部半屏:stage 恒占抽屉之上的剩余空间(≥30dvh),抽屉最高到屏幕一半(50dvh)把 stage 挤到上半,
   预览始终完整可见;渲染器每帧自适配 stage 尺寸(app.part3 resize),人偶随之缩放不会被裁。默认展开「演员·机位」。
   抓手可向下滑动收起(bindPoserDrawerSwipe)。 */
body.mobile-ui .poser-studio-main { display: flex; flex-direction: column; position: relative; overflow: hidden; min-height: 0; }
body.mobile-ui .poser-studio-stage { order: -1; flex: 1 1 auto; min-height: 30dvh; }
body.mobile-ui .poser-studio-left,
body.mobile-ui .poser-studio-right {
  display: none;
  order: 1;               /* 恒在 stage(order:-1) 之下 */
  position: relative;     /* 文档流:把 stage 挤到上半,不再覆盖预览 */
  flex: 0 1 auto;
  max-height: 50dvh;      /* 到屏幕一半 */
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 18px 18px 0 0;
  background: var(--surface, #fff);
  box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.16);
  padding: 2px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  transition: transform 0.2s ease;  /* 下滑关闭跟手,松手归位动画 */
}
body.mobile-ui .poser-studio[data-mobile-tab="cast"] .poser-studio-left { display: flex; }
body.mobile-ui .poser-studio[data-mobile-tab="scene"] .poser-studio-right { display: flex; }
/* 抽屉顶部抓手:提示可下滑收起(桌面 display:none,不参与三栏布局) */
.poser-drawer-handle { display: none; }
body.mobile-ui .poser-drawer-handle {
  display: block;
  position: sticky;
  top: 0;
  flex: 0 0 auto;
  align-self: center;
  width: 46px;
  height: 5px;
  margin: 8px auto;
  border-radius: 999px;
  background: var(--border, #d7dde6);
  touch-action: none;   /* JS 接管纵向拖动手势 */
  cursor: grab;
}
body.mobile-ui .poser-stage-hint { display: none; } /* 桌面手势说明对触屏不适用,还盖住视口底部 */
/* 顶栏右侧动作簇(撤回/重做/重置/关闭):窄屏可横向滑动、隐藏滚动条,不再挤换行错位;关闭钮(末位)默认贴右可见。 */
body.mobile-ui .poser-studio-bar-right {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-end;
}
body.mobile-ui .poser-studio-bar-right::-webkit-scrollbar { display: none; }
body.mobile-ui .poser-studio-bar-right > * { flex: 0 0 auto; }
/* 底部标签行(桌面 display:none,见 styles.part1) */
body.mobile-ui .poser-studio-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  background: var(--surface, #fff);
}
body.mobile-ui .poser-studio-tab {
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2, #f8fafc);
  color: var(--text, #334155);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}
body.mobile-ui .poser-studio-tab.active {
  background: var(--poser-accent, #7c3aed);
  border-color: var(--poser-accent, #7c3aed);
  color: #fff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}
/* 顶栏：换行；模式按钮占整行平分；副标题/快捷键字母隐藏省空间 */
body.mobile-ui .poser-studio-bar { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
body.mobile-ui .poser-studio-brandtext span { display: none; }
body.mobile-ui .poser-studio-modes { order: 3; width: 100%; justify-content: space-between; }
body.mobile-ui .poser-studio-modes .poser-mode { flex: 1 1 auto; justify-content: center; padding: 8px 6px; font-size: 12px; }
body.mobile-ui .poser-studio-modes .poser-mode-key { display: none; }
/* 底栏：画幅按钮组横滑不换行；捕获按钮占满整行 */
body.mobile-ui .poser-studio-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
body.mobile-ui .poser-studio-foot-hint { display: none; }
body.mobile-ui .poser-studio-foot-left:empty { display: none; }
body.mobile-ui .poser-frame { max-width: 100%; min-width: 0; }
body.mobile-ui .poser-frame-btns { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap; }
body.mobile-ui .poser-frame-btns::-webkit-scrollbar { display: none; }
body.mobile-ui .poser-frame-btn { flex: 0 0 auto; }
body.mobile-ui .poser-studio-foot-actions { width: 100%; }
body.mobile-ui .poser-studio-foot-actions .primary,
body.mobile-ui .poser-studio-foot-actions .secondary { flex: 1 1 auto; }
/* 右栏场景控件的两列在窄屏太挤 → 单列 */
body.mobile-ui .poser-field-2 { grid-template-columns: 1fr; }

/* ---------- 全景图预览(360 查看器) image / world3d ---------- */
/* 360 查看器是「看」的弹窗,手机上做成近全屏:画面占满、工具条换行、比例横滑、隐藏长说明。
   用 ID 提权 + !important 顶回通用 mobile modal 的内缩/底部卡片样式 与 styles.part3 的 stage 限高。 */
body.mobile-ui #panoramaPreviewModal.modal-mask { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; }
body.mobile-ui #panoramaPreviewModal .panorama-preview-panel {
  width: 100% !important; max-width: none !important;
  height: 100% !important; max-height: none !important; min-height: 0 !important;
  margin: 0 !important; border-radius: 0 !important; padding: 10px !important; gap: 8px !important;
}
body.mobile-ui #panoramaPreviewModal .modal-head { gap: 8px; }
body.mobile-ui #panoramaPreviewModal .modal-head > div > p { display: none; }  /* 长操作说明手机上占地,隐藏 */
body.mobile-ui #panoramaPreviewModal .modal-head h2 { font-size: 15px; }
body.mobile-ui #panoramaPreviewModal .modal-head-actions { gap: 6px; flex-wrap: wrap; }
body.mobile-ui #panoramaPreviewModal .modal-head-actions .secondary { padding: 6px 12px; font-size: 13px; }
/* 画面占满 head 与工具条之间(顶掉 styles.part3 的 46dvh 限高) */
body.mobile-ui #panoramaPreviewModal .panorama-preview-stage { min-height: 0 !important; max-height: none !important; border-radius: 12px; }
/* 工具条:换行;比例 chips 横向滚动;重置/截图占满好点按 */
body.mobile-ui #panoramaPreviewModal .panorama-preview-tools { flex-wrap: wrap; gap: 8px; }
body.mobile-ui #panoramaPreviewModal .panorama-ratio-bar { width: 100%; order: 3; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
body.mobile-ui #panoramaPreviewModal .panorama-ratio-bar::-webkit-scrollbar { display: none; }
body.mobile-ui #panoramaPreviewModal #resetPanoramaPreviewBtn,
body.mobile-ui #panoramaPreviewModal #capturePanoramaToCanvasBtn { flex: 1 1 auto; }
/* 手机上拖拽提示占地,隐藏(操作直观);缩放控件加大好点按 */
body.mobile-ui #panoramaPreviewModal .panorama-preview-hint { display: none; }
body.mobile-ui #panoramaPreviewModal .panorama-zoom-ctrl { right: 10px; bottom: 10px; }
body.mobile-ui #panoramaPreviewModal .panorama-zoom-ctrl button { width: 36px; height: 36px; font-size: 20px; }

/* ---------- 全景(world3d)模块内联编辑框「破格子」修复 ---------- */
/* 全景模块有 模型/清晰度/类型 三个下拉；统一收窄到数量字段档位，三个字段 + 生成按钮可稳定同排。
   桌面面板使用屏幕像素 72px，手机世界坐标面板读取自身变量，避免把移动端 360 世界单位误当桌面像素。 */
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run):has([data-canvas-config-key="panoType"]) .infinite-card-field {
  width: 72px !important;
}

body.mobile-ui:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel[data-canvas-inline-mode="world"]:has(.infinite-card-run):has([data-canvas-config-key="panoType"]) .infinite-card-field {
  width: var(--canvas-inline-field-count-w, 80px) !important;
}

/* 语音功能下线(2026-07):#audioToolTab 的「音乐/语音」tabs 带 hidden 属性时必须真隐藏——
   part3/responsive 里有多条 display:grid !important 的对齐规则会盖掉 hidden 的 UA display:none,
   这里用 ID 级选择器(最后加载的样式表)一条压过全部。恢复语音时删 index.html 的 hidden 即自动复原。 */
#audioToolTab > .tool-mode-tabs[hidden] { display: none !important; }

/* ---- 手机端音乐面板紧凑化(2026-07-05):勾选行左对齐不再居中孤行,字段间距收紧 ---- */
body.mobile-ui #audioToolTab .music-instrumental-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  text-align: left;
  margin: 2px 0;
}
body.mobile-ui #audioToolTab .music-instrumental-row input[type="checkbox"] {
  margin: 0;
  flex: none;
}
body.mobile-ui #audioToolTab label {
  gap: 6px;
}

/* ---------- 无限画布提示词放大编辑器 ---------- */
body.mobile-ui #infiniteCanvasPromptEditorModal.infinite-canvas-prompt-editor-mask {
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
}

body.mobile-ui #infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-panel {
  width: 100% !important;
  max-width: none !important;
  height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

body.mobile-ui #infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-head {
  padding: max(12px, env(safe-area-inset-top)) 14px 12px !important;
}

body.mobile-ui #infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-head h2 {
  font-size: 17px;
}

body.mobile-ui #infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-head p {
  display: none;
}

body.mobile-ui #infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-close {
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
}

body.mobile-ui #infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-stage {
  padding: 10px;
}

body.mobile-ui #infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-stage textarea {
  padding: 15px !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

body.mobile-ui #infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-foot {
  min-height: calc(68px + env(safe-area-inset-bottom));
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}

body.mobile-ui #infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-foot button {
  flex: 1 1 0;
  min-height: 44px !important;
  height: 44px !important;
}