@media (max-width: 820px) {
  body:not(.auth-required) .layout.workflow-layout,
  body:not(.auth-required) .layout.canvas-layout {
    padding: 0 !important;
  }

  body:not(.auth-required) .layout.workflow-layout .workbench,
  body:not(.auth-required) .layout.canvas-layout .workbench {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  body:not(.auth-required) .layout.workflow-layout .workflow-shell {
    display: grid;
    grid-template-columns: 1fr;
    /* 旧的裸魔法数 116px(未用 --mobile-topbar-offset)是和桌面冲突的遗留覆盖；
       运行时本就被权威移动链(#workflowTab.active>.workflow-shell{height:100%!important})盖掉，
       这里改成 100% 高度链一致、去掉死值。 */
    height: 100%;
    min-height: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  body:not(.auth-required) .layout.workflow-layout .workflow-main {
    min-height: 0;
    height: 100%;
    border-radius: 0;
  }

  body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-stage-wrap.workflow-lite-wrap {
    min-height: 100%;
    border-radius: 0;
  }

  body:not(.auth-required) .layout.workflow-layout .workflow-toolbar,
  body:not(.auth-required) .workflow-toolbar {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    z-index: 26;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 9px;
    border-radius: 16px;
  }

  body:not(.auth-required) .layout.workflow-layout .workflow-toolbar > label,
  body:not(.auth-required) .workflow-toolbar > label {
    grid-template-columns: 38px minmax(0, 1fr) !important;
  }

  body:not(.auth-required) .workflow-toolbar-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  body:not(.auth-required) .workflow-toolbar-actions button,
  body:not(.auth-required) .workflow-toolbar-actions .workflow-dirty-badge {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 10px;
  }

  body:not(.auth-required) .layout.workflow-layout .workflow-inspector {
    position: absolute;
    right: 10px;
    bottom: 58px;
    left: 10px;
    z-index: 25;
    height: auto;
    max-height: 32dvh;
    padding: 12px;
    border: 1px solid rgba(203, 213, 225, 0.82);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    /* 背景 0.92 近不透明,backdrop blur 无视觉收益却随下层画布变化反复重算——删 */
  }

  body.theme-dark:not(.auth-required) .layout.workflow-layout .workflow-inspector {
    border-color: rgba(141, 149, 165, 0.3);
    background: rgba(11, 14, 20, 0.92);
  }

  body:not(.auth-required) .layout.workflow-layout .workflow-inspector-body {
    max-height: 24dvh;
    overflow: auto;
  }

  body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-status-row {
    left: 10px;
    right: 10px;
    bottom: 10px;
    max-width: none;
    gap: 6px;
  }

  body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-status-row .file-summary {
    max-width: 40vw;
    padding: 0 10px;
  }

  body:not(.auth-required) .workflow-minimap {
    display: none !important;
  }

  body:not(.auth-required) .layout.canvas-layout .infinite-canvas-shell,
  body:not(.auth-required) .layout.canvas-layout .infinite-canvas-main {
    /* 同上：去掉裸魔法数 116px，与桌面/移动权威链同走 100% 高度，不再 calc 魔法数 */
    height: 100%;
    min-height: 0;
    border-radius: 0;
  }

  body:not(.auth-required) .layout.canvas-layout .infinite-canvas-stage {
    min-height: 100%;
  }

  body:not(.auth-required) .canvas-studio-shell .canvas-board-row,
  body:not(.auth-required) .layout.canvas-layout .canvas-board-row {
    top: 10px;
    left: 10px;
    right: 10px;
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 9px;
    border-radius: 16px;
  }

  body:not(.auth-required) .canvas-studio-shell .canvas-board-row > label,
  body:not(.auth-required) .layout.canvas-layout .canvas-board-row > label {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  body:not(.auth-required) .canvas-studio-shell .canvas-board-actions,
  body:not(.auth-required) .layout.canvas-layout .canvas-board-actions {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  body:not(.auth-required) .canvas-ai-composer {
    position: absolute;
    top: auto;
    right: 10px;
    bottom: 58px;
    left: 10px;
    width: auto;
    max-width: none;
    max-height: 46dvh;
    overflow: auto;
    padding: 12px;
    border-radius: 18px;
  }

  body:not(.auth-required) .canvas-composer-head {
    display: none;
  }

  body:not(.auth-required) .canvas-composer-ref-drop {
    min-height: 88px;
    grid-template-rows: auto minmax(42px, 1fr);
  }

  body:not(.auth-required) .canvas-composer-ref-drop > span {
    display: none;
  }

  body:not(.auth-required) .canvas-composer-prompt textarea {
    min-height: 112px;
  }

  body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row {
    left: 10px;
    right: 10px;
    bottom: 10px;
    max-width: none;
  }

  body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row .file-summary {
    max-width: 38vw;
    padding: 0 10px;
  }

  body:not(.auth-required) .layout.canvas-layout .canvas-empty-card,
  body:not(.auth-required) .canvas-studio-shell .canvas-empty-card {
    width: min(286px, calc(100vw - 72px)) !important;
    padding: 18px 16px;
    border-radius: 20px;
  }

  body:not(.auth-required) .layout.canvas-layout .canvas-empty-card > strong,
  body:not(.auth-required) .canvas-studio-shell .canvas-empty-card > strong {
    font-size: 18px;
    line-height: 1.35;
    text-wrap: balance;
  }

  body:not(.auth-required) .layout.canvas-layout .canvas-empty-actions,
  body:not(.auth-required) .canvas-studio-shell .canvas-empty-actions {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  body:not(.auth-required) .layout.canvas-layout .canvas-empty-actions button,
  body:not(.auth-required) .canvas-studio-shell .canvas-empty-actions button {
    min-height: 36px;
    border-radius: 12px;
    font-size: 12px;
  }
}

@media (max-width: 640px) {
  body:not(.auth-required) .modal-mask:not([hidden]) {
    align-items: stretch;
    justify-items: stretch;
    padding: 8px;
    overflow-y: auto;
    /* 同样不要压平 z-index(这里之前是 50000 !important)——会把详情/库/确认全拍到同层，详情被库挡住。各弹窗保留自身层级。 */
  }

  body:not(.auth-required) .modal-panel:where(:not([data-ui-unmanaged])):not(.feed-detail-panel):not(.admin-account-detail-panel),
  body:not(.auth-required) .preview-panel,
  body:not(.auth-required) .media-preview-panel,
  body:not(.auth-required) .watermark-panel,
  body:not(.auth-required) .workflow-project-panel,
  body:not(.auth-required) .workflow-media-library-panel,
  body:not(.auth-required) .command-palette-panel {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 18px !important;
    overflow: auto;
    position: relative;
  }

  body:not(.auth-required) .modal-head {
    position: sticky;
    top: 0;
    z-index: 5;
    gap: 8px;
    margin: -2px -2px 10px;
    padding: 2px 2px 10px;
    background: inherit;
    border-radius: 14px 14px 0 0;
  }

  body:not(.auth-required) .preview-tools,
  body:not(.auth-required) .media-preview-tools,
  body:not(.auth-required) .workflow-media-library-tools,
  body:not(.auth-required) .workflow-project-tools,
  body:not(.auth-required) .canvas-project-tools {
    grid-template-columns: 1fr !important;
    display: grid;
  }

  body:not(.auth-required) .preview-stage,
  body:not(.auth-required) .media-preview-stage {
    min-height: 260px;
    max-height: calc(100dvh - 178px);
    overflow: auto;
  }

  body:not(.auth-required) .modal-panel.media-preview-panel.is-video-preview {
    width: 100% !important;
  }

  body:not(.auth-required) .modal-panel.media-preview-panel.is-video-preview .media-preview-stage {
    min-height: 320px;
  }

  body:not(.auth-required) .media-preview-stage video,
  body:not(.auth-required) .preview-stage img {
    max-width: 100%;
    max-height: calc(100dvh - 220px);
    object-fit: contain;
  }

  body:not(.auth-required) .workflow-media-library-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:not(.auth-required) .workflow-media-library-card {
    min-width: 0;
  }

  body:not(.auth-required) .workflow-media-library-actions {
    grid-template-columns: 1fr;
  }

  body:not(.auth-required) .watermark-layout,
  body:not(.auth-required) .watermark-maker-grid,
  body:not(.auth-required) .watermark-controls {
    grid-template-columns: 1fr !important;
  }

  body:not(.auth-required) .watermark-stage-wrap {
    min-height: 260px;
  }

  /* 账号管理精简行(.admin-account-row.is-compact)自带窄屏布局,不再压 1fr;
     旧的 card-head/main/controls 平铺结构已随「二级弹窗重构」删除。 */
  body:not(.auth-required) .admin-account-grid,
  body:not(.auth-required) .admin-account-head,
  body:not(.auth-required) .admin-account-head-actions,
  body:not(.auth-required) .admin-redeem-grid,
  body:not(.auth-required) .admin-redeem-row {
    grid-template-columns: 1fr !important;
  }

}

@media (max-width: 420px) {
  :root {
    --font-ui: 12px;
  }

  body:not(.auth-required) .brand-logo-full {
    width: 96px;
  }

  body:not(.auth-required) .module-tab,
  body:not(.auth-required) .topbar .module-tab {
    min-width: 80px;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 6px;
    padding: 7px 8px;
  }

  body:not(.auth-required) .module-tab .ui-icon {
    width: 18px;
    height: 18px;
  }

  body:not(.auth-required) .module-tab strong {
    font-size: 12px;
  }

  body:not(.auth-required) .selected-preview,
  body:not(.auth-required) .reference-preview,
  body:not(.auth-required) .gallery,
  body:not(.auth-required) .workflow-media-library-list {
    grid-template-columns: 1fr !important;
  }

  body:not(.auth-required) .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:not(.auth-required) .infinite-inline-panel-body .infinite-card-fields {
    grid-template-columns: 1fr;
  }

  body:not(.auth-required) .infinite-inline-reference-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Mobile shell correction: below this width the sidebar becomes a compact fixed top rail. */
@media (max-width: 820px) {
  body:not(.auth-required) {
    --sidebar: 0px;
    --mobile-topbar-offset: 122px;
  }

  body:not(.auth-required) .topbar,
  body:not(.auth-required).sidebar-collapsed .topbar {
    position: fixed !important;
    inset: auto !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 120;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 14px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(203, 213, 225, 0.88);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    overflow: visible !important;
    /* 背景已 0.97 近不透明,backdrop blur 视觉上不可见却让每次滚动都重算模糊(固定 topbar)——删 */
  }

  body.theme-dark:not(.auth-required) .topbar,
  body.theme-dark:not(.auth-required).sidebar-collapsed .topbar {
    border-bottom-color: rgba(141, 149, 165, 0.28);
    background: rgba(9, 11, 16, 0.96);
  }

  body:not(.auth-required) .brand-block,
  body:not(.auth-required).sidebar-collapsed .brand-block {
    width: 100%;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  }

  body:not(.auth-required) .brand-row,
  body:not(.auth-required).sidebar-collapsed .brand-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    justify-items: stretch;
  }

  body:not(.auth-required) .brand-text,
  body:not(.auth-required).sidebar-collapsed .brand-text {
    display: block;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    text-align: left;
    place-items: initial;
  }

  body:not(.auth-required).sidebar-collapsed .brand-text h1 {
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    place-items: initial !important;
    font-size: 19px;
    line-height: 1.15;
  }

  body:not(.auth-required) .brand-full,
  body:not(.auth-required).sidebar-collapsed .brand-full {
    display: inline !important;
  }

  body:not(.auth-required) .brand-short,
  body:not(.auth-required).sidebar-collapsed .brand-short {
    display: none !important;
  }

  body:not(.auth-required) .brand-logo-full,
  body:not(.auth-required).sidebar-collapsed .brand-logo-full {
    width: 118px;
    max-height: 32px;
  }

  body:not(.auth-required) .sidebar-toggle,
  body:not(.auth-required).sidebar-collapsed .sidebar-toggle,
  body:not(.auth-required) .sidebar-toggle.has-ui-icon,
  body:not(.auth-required).sidebar-collapsed .sidebar-toggle.has-ui-icon {
    display: inline-grid;
    place-items: center;
    position: absolute;
    top: 10px;
    right: 14px;
    z-index: 3;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 12px;
    font-size: 0;
  }

  body:not(.auth-required) .sidebar-toggle .ui-icon,
  body:not(.auth-required).sidebar-collapsed .sidebar-toggle .ui-icon {
    width: 18px;
    height: 18px;
    margin: 0;
  }

  body:not(.auth-required) .sidebar-toggle-label,
  body:not(.auth-required).sidebar-collapsed .sidebar-toggle-label,
  body:not(.auth-required) .sidebar-toggle::before,
  body:not(.auth-required).sidebar-collapsed .sidebar-toggle::before {
    display: none !important;
    content: none !important;
  }

  body:not(.auth-required) .module-nav,
  body:not(.auth-required) .topbar .module-nav,
  body:not(.auth-required).sidebar-collapsed .module-nav,
  body:not(.auth-required).sidebar-collapsed .topbar .module-nav {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 2px 5px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  body:not(.auth-required) .module-tab,
  body:not(.auth-required) .topbar .module-tab,
  body:not(.auth-required) .module-tab.has-ui-icon,
  body:not(.auth-required) .topbar .module-tab.has-ui-icon {
    flex: 0 0 auto;
    width: auto;
    min-width: 96px;
    max-width: 142px;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: 1fr;
    align-items: center;
    justify-items: start;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 14px;
    text-align: left;
    scroll-snap-align: start;
  }

  body:not(.auth-required) .module-tab.has-ui-icon > .ui-icon,
  body:not(.auth-required) .topbar .module-tab.has-ui-icon > .ui-icon {
    width: 28px;
    height: 28px;
    padding: 6px;
    border-radius: 10px;
  }

  body:not(.auth-required) .module-tab strong,
  body:not(.auth-required) .topbar .module-tab strong {
    display: block !important;
    font-size: 13px;
    line-height: 1.15;
  }

  body:not(.auth-required) .module-tab span:not(.ui-icon),
  body:not(.auth-required) .topbar .module-tab span:not(.ui-icon) {
    display: none !important;
  }

  body:not(.auth-required).sidebar-collapsed .module-tab,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab,
  body:not(.auth-required).sidebar-collapsed .module-tab.has-ui-icon,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    grid-template-columns: 1fr !important;
    gap: 0;
    justify-items: center;
    padding: 0 !important;
    border-radius: 13px;
  }

  body:not(.auth-required).sidebar-collapsed .module-tab strong,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab strong,
  body:not(.auth-required).sidebar-collapsed .module-tab span:not(.ui-icon),
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab span:not(.ui-icon),
  body:not(.auth-required).sidebar-collapsed .module-tab::before,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab::before {
    display: none !important;
    content: none !important;
  }

  body:not(.auth-required).sidebar-collapsed .module-tab.has-ui-icon > .ui-icon,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon > .ui-icon {
    width: 32px;
    height: 32px;
    padding: 7px;
    border-radius: 11px;
  }

  body:not(.auth-required) .topbar .top-actions,
  body:not(.auth-required).sidebar-collapsed .topbar .top-actions {
    display: flex;
    gap: 7px;
    align-items: center;
    width: 100%;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
  }

  body:not(.auth-required).sidebar-collapsed .account-bar {
    display: flex !important;
    flex: 0 0 auto;
    width: auto !important;
    justify-items: initial;
    gap: 0;
  }

  body:not(.auth-required) .topbar .state-pill,
  body:not(.auth-required) .topbar .icon-button {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 82px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 12px;
  }

  body:not(.auth-required) #themeToggleBtn,
  body:not(.auth-required) #refreshJobsBtn,
  body:not(.auth-required) .topbar .sidebar-theme,
  body:not(.auth-required) .topbar .sidebar-refresh {
    width: auto !important;
    min-width: 82px;
    max-width: none;
  }

  body:not(.auth-required).sidebar-collapsed .topbar .state-pill,
  body:not(.auth-required).sidebar-collapsed .topbar .icon-button,
  body:not(.auth-required).sidebar-collapsed .account-summary,
  body:not(.auth-required).sidebar-collapsed #themeToggleBtn,
  body:not(.auth-required).sidebar-collapsed #refreshJobsBtn {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 13px;
    font-size: 0;
  }

  body:not(.auth-required).sidebar-collapsed .topbar .state-pill::before,
  body:not(.auth-required).sidebar-collapsed .topbar .icon-button::before,
  body:not(.auth-required).sidebar-collapsed #themeToggleBtn::after,
  body:not(.auth-required).sidebar-collapsed #refreshJobsBtn::after {
    display: none !important;
    content: none !important;
  }

  body:not(.auth-required) .layout,
  body:not(.auth-required).sidebar-collapsed .layout,
  body:not(.auth-required) .module-panel,
  body:not(.auth-required).sidebar-collapsed .module-panel {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: var(--mobile-topbar-offset) !important;
    padding-top: 4px !important;
    grid-template-columns: 1fr !important;
  }
}

/* Phone auth shell: the login card is centered and does not inherit the large desktop hero layout. */
@media (max-width: 720px) {
  body:not(.auth-required) .account-modal:not([hidden]) {
    position: fixed;
    inset: 0;
    width: 100vw;
    min-height: 100dvh;
    display: grid;
    place-items: center !important;
    align-items: center !important;
    justify-items: center !important;
    align-content: center;
    padding: 16px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body:not(.auth-required) .account-modal .account-auth-shell {
    width: min(420px, calc(100vw - 24px));
    min-height: auto;
    margin: auto;
  }

  body:not(.auth-required) .account-modal .account-modal-card {
    max-height: calc(100dvh - 32px);
    /* 卡片只竖向滚动:横向永不滚动。此前用 overflow:auto 简写,意外开启横向滚动,
       让通栏 banner(.account-form-brand 负 margin)那 1-2px 溢出冒成底部细横滚条。
       通栏 banner 故意溢出、由卡片圆角裁切,这里必须 overflow-x:hidden 裁掉而非滚动。 */
    overflow-x: hidden;
    overflow-y: auto;
    padding: 24px 22px;
    border-radius: 22px;
  }

  body:not(.auth-required) .account-modal .account-form-brand {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body:not(.auth-required) .account-modal .account-form-brand > span {
    display: grid !important;
  }














}

/* Mobile density pass: keep the primary task controls compact without changing desktop layouts. */
@media (max-width: 820px) {
  body:not(.auth-required) #appLayout.tool-layout .workbench > .tabs,
  body:not(.auth-required) #appLayout.workflow-layout .workbench > .tabs,
  body:not(.auth-required) #appLayout.canvas-layout .workbench > .tabs,
  body:not(.auth-required) #appLayout.settings-layout .workbench > .tabs {
    display: none !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .workbench > .tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    min-height: 32px !important;
    border-radius: 12px 12px 0 0;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .workbench > .tabs .tab {
    min-height: 32px !important;
    padding: 5px 8px !important;
    font-size: 12px !important;
    line-height: 1.15;
  }

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

  body:not(.auth-required) .workbench {
    padding-top: 4px !important;
  }

  body:not(.auth-required) #textTab > .form-grid:first-of-type,
  body:not(.auth-required) #imageTab > .form-grid:first-of-type,
  body:not(.auth-required) #videoToolTab .tool-card > .form-grid:first-of-type,
  body:not(.auth-required) #speechToolPanel .tool-card > .form-grid:first-of-type,
  body:not(.auth-required) #musicToolPanel .tool-card > .form-grid:first-of-type {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(86px, 0.34fr) !important;
    gap: 8px !important;
    align-items: end !important;
    margin-bottom: 10px !important;
  }

  body:not(.auth-required) #textTab > .form-grid:first-of-type label,
  body:not(.auth-required) #imageTab > .form-grid:first-of-type label,
  body:not(.auth-required) #videoToolTab .tool-card > .form-grid:first-of-type label,
  body:not(.auth-required) #speechToolPanel .tool-card > .form-grid:first-of-type label,
  body:not(.auth-required) #musicToolPanel .tool-card > .form-grid:first-of-type label {
    gap: 4px !important;
    font-size: 12px !important;
    line-height: 1.2;
  }

  body:not(.auth-required) #textTab > .form-grid:first-of-type input,
  body:not(.auth-required) #imageTab > .form-grid:first-of-type input,
  body:not(.auth-required) #videoToolTab .tool-card > .form-grid:first-of-type input,
  body:not(.auth-required) #speechToolPanel .tool-card > .form-grid:first-of-type input,
  body:not(.auth-required) #musicToolPanel .tool-card > .form-grid:first-of-type input {
    min-height: 36px !important;
    height: 36px;
    padding: 0 10px !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .quick-options,
  body:not(.auth-required) .layout.media-tool-layout .quick-options,
  body:not(.auth-required) .layout.media-tool-layout #videoToolTab .quick-options,
  body:not(.auth-required) .layout.media-tool-layout #audioToolTab .quick-options {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .quick-options label,
  body:not(.auth-required) .layout.media-tool-layout .quick-options label {
    gap: 4px !important;
    font-size: 12px !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .quick-options select,
  body:not(.auth-required) .layout.media-tool-layout .quick-options select,
  body:not(.auth-required) .layout.media-tool-layout .quick-options input {
    min-height: 36px !important;
    height: 36px;
    padding: 0 10px !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .upload-box,
  body:not(.auth-required) .layout.media-tool-layout .upload-box {
    padding: 10px !important;
    margin-bottom: 10px !important;
    border-radius: 14px;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .drop-zone,
  body:not(.auth-required) .layout.media-tool-layout .drop-zone {
    gap: 7px !important;
    padding: 10px !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .drop-zone p,
  body:not(.auth-required) .layout.media-tool-layout .drop-zone p {
    margin: 0 !important;
    line-height: 1.35;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .file-summary,
  body:not(.auth-required) .layout.media-tool-layout .file-summary {
    min-height: 34px !important;
    padding: 8px 10px !important;
    margin-top: 8px !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) textarea,
  body:not(.auth-required) .layout.media-tool-layout textarea {
    min-height: 128px !important;
    padding: 11px 12px !important;
    line-height: 1.45 !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced,
  body:not(.auth-required) .layout.media-tool-layout .advanced {
    margin-top: 10px !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced summary,
  body:not(.auth-required) .layout.media-tool-layout .advanced summary {
    min-height: 36px !important;
    padding: 8px 10px !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .command-row,
  body:not(.auth-required) .layout.media-tool-layout .command-row {
    gap: 8px !important;
    margin-top: 10px !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .command-row > button,
  body:not(.auth-required) .layout.media-tool-layout .command-row > button,
  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .command-row > .button-link,
  body:not(.auth-required) .layout.media-tool-layout .command-row > .button-link {
    min-height: 38px !important;
    padding: 0 12px !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .plan-summary-inline,
  body:not(.auth-required) .layout.media-tool-layout .plan-summary-inline {
    min-height: 38px !important;
    padding: 8px 10px !important;
  }

  body:not(.auth-required) .layout.media-tool-layout .tool-mode-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    min-height: 32px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px 12px 0 0 !important;
    background: var(--surface-2, #f9fafc) !important;
  }

  body:not(.auth-required) .layout.media-tool-layout .tool-mode-tab {
    min-height: 32px !important;
    padding: 5px 8px !important;
    border: 0 !important;
    border-right: 1px solid var(--border) !important;
    border-radius: 0 !important;
    background: var(--surface-2, #f9fafc) !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    box-shadow: none !important;
  }

  body:not(.auth-required) .layout.media-tool-layout .tool-mode-tab:last-child {
    border-right: 0 !important;
  }

  body:not(.auth-required) .layout.media-tool-layout .tool-mode-tab.active {
    background: var(--surface, #ffffff) !important;
    color: var(--text) !important;
    font-weight: 800 !important;
    box-shadow: inset 0 -3px 0 var(--accent) !important;
  }

  body:not(.auth-required) .layout.media-tool-layout .tool-page-head {
    min-height: 40px !important;
    padding: 0 10px !important;
    margin-bottom: 10px !important;
  }
}

@media (max-width: 430px) {
  body:not(.auth-required) #textTab > .form-grid:first-of-type,
  body:not(.auth-required) #imageTab > .form-grid:first-of-type,
  body:not(.auth-required) #videoToolTab .tool-card > .form-grid:first-of-type,
  body:not(.auth-required) #speechToolPanel .tool-card > .form-grid:first-of-type,
  body:not(.auth-required) #musicToolPanel .tool-card > .form-grid:first-of-type {
    grid-template-columns: minmax(0, 1fr) 82px !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .quick-options,
  body:not(.auth-required) .layout.media-tool-layout .quick-options,
  body:not(.auth-required) .layout.media-tool-layout #videoToolTab .quick-options,
  body:not(.auth-required) .layout.media-tool-layout #audioToolTab .quick-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) textarea,
  body:not(.auth-required) .layout.media-tool-layout textarea {
    min-height: 116px !important;
  }
}

@media (max-width: 820px) {
  body.theme-dark:not(.auth-required) .brand-text,
  body.theme-dark:not(.auth-required).sidebar-collapsed .brand-text,
  body.theme-dark:not(.auth-required) .brand-text h1,
  body.theme-dark:not(.auth-required).sidebar-collapsed .brand-text h1,
  body.theme-dark:not(.auth-required) .brand-full,
  body.theme-dark:not(.auth-required).sidebar-collapsed .brand-full {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  body.theme-dark:not(.auth-required) .brand-text h1,
  body.theme-dark:not(.auth-required).sidebar-collapsed .brand-text h1 {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    line-height: 1 !important;
    text-align: left !important;
  }

  body.theme-dark:not(.auth-required) .brand-full,
  body.theme-dark:not(.auth-required).sidebar-collapsed .brand-full {
    display: inline-flex !important;
    align-items: center;
    margin-right: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

.account-summary.account-summary-points {
  gap: 6px;
}

.account-summary.account-summary-points .account-summary-text {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.01em;
}

.account-points-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 0;
  color: #0b7cff;
  background: transparent;
  border: 0;
  box-shadow: none;
  filter: drop-shadow(0 2px 6px rgba(11, 124, 255, 0.28));
  line-height: 0;
}

.account-points-icon svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
}

body.theme-dark:not(.auth-required) .account-points-icon {
  color: #66c3ff;
  filter: drop-shadow(0 2px 7px rgba(102, 195, 255, 0.28));
}

@media (max-width: 820px) {
  body:not(.auth-required) .brand-block,
  body:not(.auth-required).sidebar-collapsed .brand-block {
    min-height: 42px;
    padding-right: min(196px, calc(100vw - 166px));
  }

  body:not(.auth-required) .topbar .top-actions,
  body:not(.auth-required).sidebar-collapsed .topbar .top-actions {
    position: absolute;
    top: 10px;
    right: 62px;
    z-index: 2;
    display: flex !important;
    width: auto !important;
    max-width: calc(100vw - 176px);
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body:not(.auth-required) .topbar .account-bar,
  body:not(.auth-required).sidebar-collapsed .topbar .account-bar {
    display: flex !important;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    width: auto !important;
    overflow: visible !important;
  }

  body:not(.auth-required) #accountRegisterBtn {
    display: none !important;
  }

  body:not(.auth-required) .topbar .account-action,
  body:not(.auth-required) .topbar #themeToggleBtn,
  body:not(.auth-required) .topbar #refreshJobsBtn,
  body:not(.auth-required).sidebar-collapsed .topbar .account-action,
  body:not(.auth-required).sidebar-collapsed .topbar #themeToggleBtn,
  body:not(.auth-required).sidebar-collapsed .topbar #refreshJobsBtn {
    display: inline-grid !important;
    place-items: center;
    flex: 0 0 auto;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    font-size: 0 !important;
  }

  body:not(.auth-required) .topbar .account-action .sidebar-toggle-label,
  body:not(.auth-required) .topbar #themeToggleBtn .sidebar-toggle-label,
  body:not(.auth-required) .topbar #refreshJobsBtn .sidebar-toggle-label,
  body:not(.auth-required).sidebar-collapsed .topbar .account-action .sidebar-toggle-label,
  body:not(.auth-required).sidebar-collapsed .topbar #themeToggleBtn .sidebar-toggle-label,
  body:not(.auth-required).sidebar-collapsed .topbar #refreshJobsBtn .sidebar-toggle-label {
    display: none !important;
  }

  body:not(.auth-required) .topbar .account-action .ui-icon,
  body:not(.auth-required) .topbar #themeToggleBtn .ui-icon,
  body:not(.auth-required) .topbar #refreshJobsBtn .ui-icon,
  body:not(.auth-required).sidebar-collapsed .topbar .account-action .ui-icon,
  body:not(.auth-required).sidebar-collapsed .topbar #themeToggleBtn .ui-icon,
  body:not(.auth-required).sidebar-collapsed .topbar #refreshJobsBtn .ui-icon {
    display: inline-grid !important;
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
  }

  body:not(.sidebar-collapsed):not(.auth-required) .topbar .account-summary.account-summary-points {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto !important;
    min-width: 68px !important;
    max-width: 92px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 9px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }

  body:not(.sidebar-collapsed):not(.auth-required) .topbar .account-summary.account-summary-points .account-summary-text {
    display: inline !important;
    max-width: 54px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body:not(.sidebar-collapsed):not(.auth-required) .topbar .account-summary.account-summary-points .account-points-icon {
    display: inline-grid !important;
  }

body:not(.auth-required) .topbar [hidden],
body:not(.auth-required).sidebar-collapsed .topbar [hidden] {
    display: none !important;
  }
}

/* Final mobile tool polish: one compact shell and one controlled select layer for all tools. */
@media (max-width: 820px) {
  body:not(.auth-required) {
    --mobile-topbar-offset: 112px;
  }

  body:not(.auth-required) .module-panel,
  body:not(.auth-required) .layout,
  body:not(.auth-required).sidebar-collapsed .module-panel,
  body:not(.auth-required).sidebar-collapsed .layout {
    margin-top: var(--mobile-topbar-offset) !important;
    padding: 2px 8px 8px !important;
    gap: 8px !important;
  }

  body:not(.auth-required) .layout > .workbench,
  body:not(.auth-required) .layout.media-tool-layout .workbench {
    padding: 0 !important;
    overflow: visible !important;
  }

  body:not(.auth-required) .layout > .panel,
  body:not(.auth-required) .layout.media-tool-layout .workbench,
  body:not(.auth-required) .layout.media-tool-layout .monitor {
    min-height: auto !important;
    height: auto !important;
  }

  body:not(.auth-required) .tabs:where(:not([data-ui-unmanaged] *)) {
    position: static !important;
    top: auto !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    border-radius: 14px 14px 0 0 !important;
    overflow: hidden !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .workbench > .tabs {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .workbench > .tabs .tab,
  body:not(.auth-required) .layout.media-tool-layout .tool-mode-tab {
    min-height: 32px !important;
    height: 32px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
  }

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

  body:not(.auth-required) .layout.media-tool-layout .tool-mode-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--border) !important;
    border-bottom: 0 !important;
    border-radius: 14px 14px 0 0 !important;
    background: #f9fafc !important;
    overflow: hidden !important;
  }

  body:not(.auth-required) .layout.media-tool-layout .tool-mode-tab {
    border: 0 !important;
    border-right: 1px solid var(--border) !important;
    border-radius: 0 !important;
    background: #f9fafc !important;
    color: var(--muted) !important;
    box-shadow: none !important;
  }

  body:not(.auth-required) .layout.media-tool-layout .tool-mode-tab:last-child {
    border-right: 0 !important;
  }

  body:not(.auth-required) .layout.media-tool-layout .tool-mode-tab.active {
    background: #ffffff !important;
    color: var(--text) !important;
    font-weight: 800 !important;
    box-shadow: inset 0 -3px 0 var(--accent) !important;
  }

  body:not(.auth-required) #textTab > .form-grid:first-of-type,
  body:not(.auth-required) #imageTab > .form-grid:first-of-type,
  body:not(.auth-required) #videoToolTab .tool-card > .form-grid:first-of-type,
  body:not(.auth-required) #speechToolPanel .tool-card > .form-grid:first-of-type,
  body:not(.auth-required) #musicToolPanel .tool-card > .form-grid:first-of-type {
    grid-template-columns: minmax(0, 1fr) minmax(78px, 0.34fr) !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  body:not(.auth-required) .upload-box {
    padding: 10px !important;
    margin-bottom: 10px !important;
  }

  body:not(.auth-required) .drop-zone {
    padding: 10px !important;
    gap: 7px !important;
  }

  body:not(.auth-required) .drop-zone .command-row.compact {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100%;
  }

  body:not(.auth-required) #mainDropZone .command-row.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:not(.auth-required) #mainDropZone .command-row.compact .danger {
    grid-column: 1 / -1;
  }

  body:not(.auth-required) .quick-options,
  body:not(.auth-required) .layout.media-tool-layout .quick-options,
  body:not(.auth-required) .layout.media-tool-layout #videoToolTab .quick-options,
  body:not(.auth-required) .layout.media-tool-layout #audioToolTab .quick-options,
  body:not(.auth-required) .layout.media-tool-layout #audioToolTab .music-options,
  body:not(.auth-required) .advanced .options-grid,
  body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body:not(.auth-required) .quick-options label,
  body:not(.auth-required) .advanced .options-grid label,
  body:not(.auth-required) .layout.media-tool-layout .quick-options label,
  body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid label {
    min-width: 0 !important;
    gap: 5px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  /* 只给表单字段(select/input)统一移动端点按高度。原来这里连 button/.button-link 一起一刀切 36px,
     但表单按钮的高度其实由 responsive.css 的按钮几何(var(--button-height) !important)决定、已盖住这条,
     所以这条对 button 实际只打到「被那套排除掉的图标/胶囊按钮」→ 把本该 30×30 的图标按钮撑成 36。
     这是「每加个特殊按钮都要到处 :not() 排除」的病根。移除 button/.button-link:表单按钮不受影响,
     图标按钮回归各自专用尺寸(.gen-icon-btn 等),新增按钮不再需要在此排除。 */
  body:not(.auth-required) select,
  body:not(.auth-required) input {
    min-height: 36px;
  }

  body:not(.auth-required) .advanced {
    margin: 10px 0 !important;
  }

  body:not(.auth-required) .advanced summary {
    min-height: 36px !important;
    padding: 8px 10px !important;
  }

  body:not(.auth-required) .advanced .options-grid label:has(textarea),
  body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid label:has(textarea) {
    grid-column: 1 / -1;
  }

  body:not(.auth-required) .tool-page-head {
    min-height: 36px !important;
    padding: 0 10px !important;
    margin-bottom: 8px !important;
  }
}

@media (max-width: 430px) {
  body:not(.auth-required) #textTab > .form-grid:first-of-type,
  body:not(.auth-required) #imageTab > .form-grid:first-of-type,
  body:not(.auth-required) #videoToolTab .tool-card > .form-grid:first-of-type,
  body:not(.auth-required) #speechToolPanel .tool-card > .form-grid:first-of-type,
  body:not(.auth-required) #musicToolPanel .tool-card > .form-grid:first-of-type {
    grid-template-columns: minmax(0, 1fr) 76px !important;
  }
}

/* Mobile tool pager: parameters and task results are sibling pages, switched by horizontal swipe. */
@media (max-width: 820px) {
  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout),
  body:not(.auth-required) #appLayout.media-tool-layout {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    height: calc(100dvh - var(--mobile-topbar-offset, 112px) - 10px) !important;
    min-height: 0 !important;
    /* transform 切页(收口:同 responsive/part4,取代原生 scroll-snap) */
    overflow: hidden !important;
    touch-action: pan-y;
    scrollbar-width: none;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout)::-webkit-scrollbar,
  body:not(.auth-required) #appLayout.media-tool-layout::-webkit-scrollbar {
    display: none;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) > .workbench,
  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) > .monitor,
  body:not(.auth-required) #appLayout.media-tool-layout > .workbench,
  body:not(.auth-required) #appLayout.media-tool-layout > .monitor {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: translateX(0);
    transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout)[data-mobile-page="results"] > .workbench,
  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout)[data-mobile-page="results"] > .monitor,
  body:not(.auth-required) #appLayout.media-tool-layout[data-mobile-page="results"] > .workbench,
  body:not(.auth-required) #appLayout.media-tool-layout[data-mobile-page="results"] > .monitor {
    transform: translateX(-100%);
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) > .monitor,
  body:not(.auth-required) #appLayout.media-tool-layout > .monitor {
    display: block !important;
    padding: 10px !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) > .workbench,
  body:not(.auth-required) #appLayout.media-tool-layout > .workbench {
    padding: 0 !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .tab-panel,
  body:not(.auth-required) #appLayout.media-tool-layout .tool-panel.active {
    min-height: auto !important;
  }
}

.mobile-select-mask {
  position: fixed;
  inset: 0;
  z-index: var(--z-select-mask);
  display: grid;
  align-items: end;
  background: transparent; /* 不要灰色遮罩(用户否掉):只滑出参数框、背景不暗化。mask 仍全屏、point 捕获点击=点外部可关闭 */
}

.mobile-select-mask[hidden] {
  display: none !important;
}

/* 参数框(sheet)本身仍用 CSS animation 滑入/滑出(自带 from/to,不靠 setTimeout 触发 transition);遮罩不再有背景动画。 */

.mobile-select-sheet {
  width: 100%;
  max-height: min(70dvh, 520px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: 20px 20px 0 0;
  border: 1px solid rgba(203, 213, 225, 0.94);
  background: #ffffff;
  box-shadow: 0 -20px 48px rgba(15, 23, 42, 0.18);
  transform: translateY(18px);
  opacity: 0;
  overflow: hidden;
}

.mobile-select-mask.open .mobile-select-sheet {
  animation: mobileSelectSheetIn 0.18s ease both;
}

.mobile-select-mask.closing .mobile-select-sheet {
  animation: mobileSelectSheetOut 0.16s ease both;
}

@keyframes mobileSelectSheetIn {
  from { transform: translateY(18px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes mobileSelectSheetOut {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(18px); opacity: 0; }
}

.mobile-select-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.92);
}

.mobile-select-head strong {
  color: var(--text);
  font-size: 15px;
}

.mobile-select-close {
  min-height: 32px;
  padding: 0 12px;
}

.mobile-select-options {
  display: grid;
  gap: 7px;
  padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
  overflow: auto;
}

/* 比例类 sheet=竖横配对两列(openMobileSelectSheet 已按配对顺序渲染,auto/1:1 等占整行) */
.mobile-select-options.mobile-select-ratio-pair { grid-template-columns: 1fr 1fr; }
.mobile-select-options.mobile-select-ratio-pair .mobile-select-option { justify-content: center; }
.mobile-select-options.mobile-select-ratio-pair .mobile-select-option.ratio-span { grid-column: 1 / -1; }

.mobile-select-option {
  justify-content: space-between;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border-color: #d8e4f1;
  background: #f8fbff;
  color: var(--text);
  font-weight: 760;
  text-align: left;
}

.mobile-select-option.mobile-select-model-option {
  gap: 10px;
  justify-content: center;
}

.mobile-select-option-main {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: min(100%, 268px);
  min-width: 0;
}

.mobile-select-option-main > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-select-option-main .model-logo {
  width: 24px;
  height: 24px;
  border-radius: 8px;
}

.mobile-select-option small {
  color: #255a9c;
  font-size: 11px;
  font-weight: 800;
}

.mobile-select-option.active {
  border-color: rgba(47, 109, 183, 0.46);
  background: #eaf2fb;
  color: #1d4a83;
}

.mobile-select-option:disabled {
  opacity: 0.42;
}


body.theme-dark:not(.auth-required) .mobile-select-sheet {
  border-color: rgba(141, 149, 165, 0.34);
  background: #101a2b;
  box-shadow: 0 -20px 54px rgba(0, 0, 0, 0.38);
}

body.theme-dark:not(.auth-required) .mobile-select-head {
  border-bottom-color: rgba(141, 149, 165, 0.28);
}

body.theme-dark:not(.auth-required) .mobile-select-option {
  border-color: rgba(141, 149, 165, 0.32);
  background: #142033;
  color: #e5edf7;
}

body.theme-dark:not(.auth-required) .mobile-select-option.active {
  border-color: rgba(90, 166, 232, 0.48);
  background: rgba(47, 109, 183, 0.18);
  color: #dceafc;
}

@media (max-width: 720px) {
  body:not(.auth-required) .monitor .stats-grid,
  body:not(.auth-required) .monitor-panel .stats-grid,
  body:not(.auth-required) .result-panel .stats-grid,
  body:not(.auth-required) .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body:not(.auth-required) .stats-grid > div {
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 8px 7px !important;
    border-radius: 10px !important;
  }

  body:not(.auth-required) .stats-grid strong,
  body:not(.auth-required) .stats-grid b {
    font-size: 18px !important;
    line-height: 1.05 !important;
  }

  body:not(.auth-required) .stats-grid span,
  body:not(.auth-required) .stats-grid small {
    margin-top: 3px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  body:not(.auth-required) .account-usage-panel {
    width: min(100vw - 10px, 430px) !important;
    max-height: calc(100dvh - 14px) !important;
    padding: 14px !important;
  }

  body:not(.auth-required) .account-usage-summary {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 !important;
    margin-bottom: 8px !important;
  }

  body:not(.auth-required) .account-usage-summary div {
    min-height: 30px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
  }

  body:not(.auth-required) .account-usage-summary strong {
    font-size: 13px !important;
  }

  /* 手机 tabs 一行横滑收口于 styles.part2 720 块;旧 3 列 grid 规则已删。 */

  body:not(.auth-required) .account-usage-tab {
    min-height: 32px !important;
    padding: 6px 7px !important;
    font-size: 12px !important;
  }

  body:not(.auth-required) .account-usage-tools {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    margin-bottom: 8px !important;
  }

  body:not(.auth-required) .admin-account-list {
    max-height: none;
  }

  body:not(.auth-required) .account-usage-filter {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body:not(.auth-required) .account-usage-filter button {
    min-height: 30px !important;
    padding: 5px 4px !important;
    font-size: 12px !important;
  }

  body:not(.auth-required) .account-usage-table-wrap {
    border-radius: 11px !important;
  }

  body:not(.auth-required) .account-usage-table {
    min-width: 0 !important;
    font-size: 11px !important;
  }

  body:not(.auth-required) .account-usage-table th,
  body:not(.auth-required) .account-usage-table td {
    padding: 7px 6px !important;
  }

  body:not(.auth-required) .account-usage-table th:nth-child(2),
  body:not(.auth-required) .account-usage-table td:nth-child(2) {
    display: none;
  }

  body:not(.auth-required) .account-usage-table th:nth-child(4),
  body:not(.auth-required) .account-usage-table td:nth-child(4) {
    display: none;
  }

  body:not(.auth-required) .account-usage-table th:nth-child(1),
  body:not(.auth-required) .account-usage-table td:nth-child(1) {
    width: 96px;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced .options-grid,
  body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: start !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced .options-grid label,
  body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid label {
    min-width: 0 !important;
    gap: 5px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced .options-grid label:has(textarea),
  body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid label:has(textarea) {
    grid-column: 1 / -1;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced .options-grid input,
  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced .options-grid select,
  body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid input,
  body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid select {
    width: 100% !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 9px !important;
    font-size: 13px !important;
  }

}

/* Workspace toolbar and mobile secondary dialogs final layout. */
body:not(.auth-required) .workflow-description-field,
body:not(.auth-required) .canvas-board-select-field,
body:not(.auth-required) .canvas-board-row label:has(#canvasToolbarNote) {
  display: none !important;
}

body:not(.auth-required) .layout.workflow-layout,
body:not(.auth-required) .layout.canvas-layout {
  min-width: 0 !important;
}

body:not(.auth-required) .layout.workflow-layout .workbench,
body:not(.auth-required) .layout.canvas-layout .workbench,
body:not(.auth-required) .workflow-shell,
body:not(.auth-required) .infinite-canvas-shell,
body:not(.auth-required) .workflow-main,
body:not(.auth-required) .infinite-canvas-main {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body:not(.auth-required) .workflow-toolbar,
body:not(.auth-required) .layout.workflow-layout .workflow-toolbar,
body:not(.auth-required) .canvas-studio-shell .canvas-board-row,
body:not(.auth-required) .layout.canvas-layout .canvas-board-row {
  grid-template-columns: minmax(220px, 420px) minmax(0, 1fr) !important;
}

body:not(.auth-required) .workflow-toolbar > label,
body:not(.auth-required) .layout.workflow-layout .workflow-toolbar > label,
body:not(.auth-required) .canvas-studio-shell .canvas-board-row > label,
body:not(.auth-required) .layout.canvas-layout .canvas-board-row > label {
  max-width: 420px;
}

body:not(.auth-required) .workflow-toolbar-actions,
body:not(.auth-required) .canvas-studio-shell .canvas-board-actions,
body:not(.auth-required) .layout.canvas-layout .canvas-board-actions {
  grid-column: 2;
  justify-content: flex-start;
}

@media (min-width: 821px) {
  /* 折叠/展开侧栏"卡一下"根因修复：原本这里给画布/工作流的 margin-left 加了 0.18s 动画，
     但重型画布(litegraph / 无限画布)在 0.18s 内被逐帧重排+重绘 → 掉帧卡顿。改为瞬时定位，
     画布只重排一次而非逐帧。其它轻量工具页不在此块、仍保持平滑过渡。 */
  body:not(.auth-required) .layout.workflow-layout,
  body:not(.auth-required) .layout.canvas-layout {
    transition: none !important;
  }

  /* 同步:侧栏宽度也瞬时收/展，否则侧栏还在动而画布已跳，会短暂盖住画布左边缘。 */
  body:not(.auth-required):has(.layout.canvas-layout) .topbar,
  body:not(.auth-required):has(.layout.workflow-layout) .topbar {
    transition: none !important;
  }

  body:not(.auth-required) .workflow-toolbar,
  body:not(.auth-required) .canvas-board-row {
    transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease !important;
  }
}

@media (max-width: 820px) {
  body:not(.auth-required) .workflow-toolbar,
  body:not(.auth-required) .layout.workflow-layout .workflow-toolbar,
  body:not(.auth-required) .canvas-studio-shell .canvas-board-row,
  body:not(.auth-required) .layout.canvas-layout .canvas-board-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  body:not(.auth-required) .workflow-toolbar > label,
  body:not(.auth-required) .layout.workflow-layout .workflow-toolbar > label,
  body:not(.auth-required) .canvas-studio-shell .canvas-board-row > label,
  body:not(.auth-required) .layout.canvas-layout .canvas-board-row > label {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    max-width: none !important;
  }

  body:not(.auth-required) .workflow-toolbar-actions,
  body:not(.auth-required) .canvas-studio-shell .canvas-board-actions,
  body:not(.auth-required) .layout.canvas-layout .canvas-board-actions {
    grid-column: 1 / -1 !important;
    gap: 5px !important;
  }
}

@media (max-width: 640px) {
  /* 不要在这里压平 z-index：`z-index:5000 !important` 会把所有弹窗拍到同一层，
     详情(13000)和媒体库(12000)、确认(15000)全变 5000 → 谁在上只能看 DOM 顺序，详情就可能被库挡住(只手机≤640出现)。
     和上面 820 块同样的坑，删掉即可，各弹窗保留自身层级。 */
  body:not(.auth-required) .modal-mask:not([hidden]) {
    align-items: center !important;
    justify-items: center !important;
    position: fixed !important;
    inset: 0 !important;
    padding: 6px !important;
  }

  body:not(.auth-required) .modal-panel:where(:not([data-ui-unmanaged])):not(.feed-detail-panel):not(.admin-account-detail-panel),
  body:not(.auth-required) .workflow-project-panel,
  body:not(.auth-required) .workflow-media-library-panel,
  body:not(.auth-required) .command-palette-panel,
  body:not(.auth-required) .watermark-picker-panel,
  body:not(.auth-required) .watermark-panel,
  body:not(.auth-required) .account-usage-panel,
  body:not(.auth-required) .canvas-image-edit-panel,
  body:not(.auth-required) .canvas-image-crop-panel,
  body:not(.auth-required) .canvas-image-split-panel,
  body:not(.auth-required) .canvas-video-edit-panel,
  body:not(.auth-required) .panorama-preview-panel {
    width: min(100%, calc(100vw - 12px)) !important;
    max-width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    padding: 12px !important;
    border-radius: 18px !important;
    overflow: auto !important;
  }

  body:not(.auth-required) .modal-head {
    align-items: start !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
  }

  body:not(.auth-required) .modal-head h2 {
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  body:not(.auth-required) .modal-head p,
  body:not(.auth-required) .workflow-project-status {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  body:not(.auth-required) .modal-head .command-row,
  body:not(.auth-required) .modal-head .modal-close-row {
    flex: 0 0 auto;
  }

  body:not(.auth-required) .workflow-project-tools,
  body:not(.auth-required) .canvas-project-tools,
  body:not(.auth-required) .workflow-media-library-tools,
  body:not(.auth-required) .account-usage-tools {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    align-items: center !important;
  }

  body:not(.auth-required) #workflowProjectSearch,
  body:not(.auth-required) #canvasProjectSearch,
  body:not(.auth-required) #workflowMediaLibrarySearch,
  body:not(.auth-required) #accountUsageSearch {
    grid-column: 1 / -1 !important;
  }

  body:not(.auth-required) .workflow-project-tools button,
  body:not(.auth-required) .canvas-project-tools button,
  body:not(.auth-required) .workflow-media-library-tools button,
  body:not(.auth-required) .workflow-media-library-tools select,
  body:not(.auth-required) .account-usage-tools button,
  body:not(.auth-required) .account-usage-tools select {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 9px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
  }

  body:not(.auth-required) .workflow-project-list,
  body:not(.auth-required) .canvas-project-list,
  body:not(.auth-required) .case-list {
    max-height: calc(100dvh - 150px) !important;
    overflow: auto !important;
    gap: 8px !important;
    padding-right: 2px !important;
  }

  body:not(.auth-required) .workflow-project-card {
    padding: 9px !important;
    border-radius: 14px !important;
    gap: 8px !important;
  }

  body:not(.auth-required) .workflow-project-card p,
  body:not(.auth-required) .workflow-project-card small {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  body:not(.auth-required) .workflow-project-actions,
  body:not(.auth-required) .canvas-project-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  body:not(.auth-required) .workflow-project-actions button,
  body:not(.auth-required) .canvas-project-actions button {
    min-height: 28px !important;
    padding: 0 6px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
  }

  body:not(.auth-required) .canvas-project-preview {
    width: 100% !important;
    height: 92px !important;
    min-height: 92px !important;
    border-radius: 11px !important;
  }

  body:not(.auth-required) .workflow-media-library-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    max-height: calc(100dvh - 150px) !important;
    overflow: auto !important;
    padding: 0 2px 10px 0 !important;
  }

  body:not(.auth-required) .workflow-media-library-card {
    min-height: 0 !important;
    border-radius: 14px !important;
  }

  body:not(.auth-required) .workflow-media-library-preview {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: var(--workflow-media-preview-ratio, 1 / 1) !important;
    border-radius: 12px 12px 0 0 !important;
  }

  body:not(.auth-required) .workflow-media-library-meta {
    padding: 7px 8px 8px !important;
  }

  body:not(.auth-required) .workflow-media-library-title {
    gap: 5px !important;
  }

  body:not(.auth-required) .workflow-media-library-title strong {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  body:not(.auth-required) .workflow-media-library-title span {
    font-size: 10px !important;
    padding: 2px 5px !important;
  }

  body:not(.auth-required) .workflow-media-library-meta p,
  body:not(.auth-required) .workflow-media-library-meta small {
    display: none !important;
  }

  body:not(.auth-required) .workflow-media-library-actions {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    margin-top: 6px !important;
  }

  body:not(.auth-required) .workflow-media-library-actions button {
    min-height: 24px !important;
    height: 24px !important;
    padding: 0 6px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
  }

  body:not(.auth-required) .case-row {
    grid-template-columns: minmax(0, 1fr) 62px 62px !important;
    gap: 5px !important;
  }

  body:not(.auth-required) .case-select {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    min-height: 54px !important;
    padding: 6px !important;
    border-radius: 12px !important;
  }

  body:not(.auth-required) .case-preview {
    width: 42px !important;
    height: 42px !important;
    border-radius: 9px !important;
  }

  body:not(.auth-required) .case-info p {
    display: none !important;
  }

  body:not(.auth-required) .case-row > button {
    min-height: 32px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
  }

  body:not(.auth-required) .canvas-image-edit-stage,
  body:not(.auth-required) .canvas-image-crop-stage,
  body:not(.auth-required) .canvas-video-edit-stage,
  body:not(.auth-required) .panorama-preview-stage {
    min-height: min(46dvh, 320px) !important;
    max-height: min(48dvh, 340px) !important;
  }

  body:not(.auth-required) .canvas-image-edit-layout,
  body:not(.auth-required) .canvas-image-crop-layout,
  body:not(.auth-required) .canvas-video-edit-layout {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

@media (max-width: 340px) {
  body:not(.auth-required) .workflow-media-library-list {
    grid-template-columns: 1fr !important;
  }

  body:not(.auth-required) .workflow-project-actions,
  body:not(.auth-required) .canvas-project-actions {
    grid-template-columns: 1fr !important;
  }
}

/* Native 80% density foundation: reduce real component dimensions instead of using browser zoom or transforms. */

body:not(.auth-required) {
  font-size: var(--font-ui);
}

body:not(.auth-required) h1,
body:not(.auth-required) h2:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) h3,
body:not(.auth-required) strong,
body:not(.auth-required) label:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) button:not([data-ui-compact-control]):where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) input,
body:not(.auth-required) select,
body:not(.auth-required) textarea {
  letter-spacing: 0;
}

body:not(.auth-required) h2:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .tool-page-head h2:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .monitor-title h2:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .text-chat-brand strong:where(:not([data-ui-unmanaged] *)) {
  font-size: var(--font-title) !important;
  line-height: 1.25 !important;
}

body:not(.auth-required) label:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .field-title:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .drop-zone strong:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .monitor-title strong:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .tool-page-head strong:where(:not([data-ui-unmanaged] *)) {
  font-size: var(--font-label) !important;
}

/* 这条字号归一化以前**不认任何退出口** —— 而它紧挨着的 letter-spacing 兄弟规则是认的。
   同一族规则一半认一半不认,组件根本没法预期自己会不会被托管(创作助手的自绘选择器实测栽过:
   声明了 11.5px,被这条 !important 顶成 --font-ui)。这里补上子树退出口 data-ui-unmanaged,
   与面板内边距 / 控件尺寸 / 按钮缩放三族口径统一。
   `:where()` 特异性为 0,只减少匹配、不改层叠权重(见 test-ui-normalizer-escape-hatch)。
   ⚠️ 这里**没有**加 :not([data-ui-compact-control]):实测全站 77 个 compact 控件里有 37 个会
   跟着改字号(含 12.5→15px 的放大),那是一次全站restyle,不是收口,要做得单独评估。 */
body:not(.auth-required) input:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) select:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) textarea:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) button:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .button-link:where(:not([data-ui-unmanaged] *)) {
  font-size: var(--font-ui) !important;
}

body:not(.auth-required) input:not([type="range"]):where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) select:where(:not([data-ui-unmanaged] *)) {
  min-height: var(--control-height) !important;
  height: var(--control-height) !important;
  padding: 0 8px !important;
  border-radius: 9px !important;
}

body:not(.auth-required) textarea:where(:not([data-ui-unmanaged] *)) {
  min-height: 104px !important;
  padding: 9px 10px !important;
  border-radius: 10px !important;
  line-height: 1.45 !important;
}

body:not(.auth-required) button:not([data-ui-compact-control]):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(.preview-canvas-tool):not(.text-chat-delete-btn):not(.workflow-media-library-select):not(.app-more-id):not(.app-more-item):not(.account-page-row):not(.account-page-stat):not(.account-page-edit):not(.account-page-quick):not(.account-page-tab):not(.account-command-btn):not(.account-content-action):not(.account-resource-card):not(.account-card):not(.account-card-open):not(.account-card-more):not(.account-resource-more):not(.account-mini-item):not(.account-proj-pill):not(.account-page-project-open):not(.account-page-project-more):not(.account-page-projects-more):not(.infinite-card-run):not(.infinite-inline-reference-add):not(.infinite-inline-reference-pick):not(.infinite-inline-prompt-expand):not(.ob-rail-step):not(.hl-stage):where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .button-link,
body:not(.auth-required) .primary:not(.infinite-card-run),
body:not(.auth-required) .secondary,
body:not(.auth-required) .danger:not([data-ui-compact-control]):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(.hl-stage):where(:not([data-ui-unmanaged] *)) {
  min-height: var(--button-height) !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  gap: 5px !important;
}

body:not(.auth-required) .icon-button,
body:not(.auth-required) .sidebar-toggle,
body:not(.auth-required) .account-action {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
}

body:not(.auth-required) .tabs:where(:not([data-ui-unmanaged] *)) {
  min-height: var(--tab-height) !important;
  height: var(--tab-height) !important;
  border-radius: var(--radius-sm) !important;
}

body:not(.auth-required) .tabs .tab:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .tool-mode-tab:where(:not([data-ui-unmanaged] *)) {
  min-height: var(--tab-height) !important;
  height: var(--tab-height) !important;
  padding: 0 8px !important;
  font-size: var(--font-ui) !important;
  border-radius: var(--radius-xs) !important;
}

/* 画布/工作流的 tab 面板与 workbench 都不要这层卡片内边距(避免壳套壳)，故都加 :not 排除 */
body:not(.auth-required) .layout:not(.canvas-layout):not(.workflow-layout) .tab-panel:not(.account-page-panel),
body:not(.auth-required) .tool-panel.active,
body:not(.auth-required) .tool-card,
body:not(.auth-required) .monitor,
body:not(.auth-required) .layout:not(.canvas-layout):not(.workflow-layout) .workbench {
  padding: var(--panel-padding) !important;
  border-radius: 12px !important;
}

body:not(.auth-required) .form-grid,
body:not(.auth-required) .quick-options,
body:not(.auth-required) .options-grid,
body:not(.auth-required) .tool-grid {
  gap: var(--form-gap) !important;
}

body:not(.auth-required) .quick-options,
body:not(.auth-required) .layout.media-tool-layout #videoToolTab .quick-options,
body:not(.auth-required) .layout.media-tool-layout #audioToolTab .quick-options,
body:not(.auth-required) .layout.media-tool-layout #audioToolTab .music-options {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body:not(.auth-required) .quick-options label,
body:not(.auth-required) .advanced .options-grid label,
body:not(.auth-required) .layout.media-tool-layout .quick-options label,
body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid label {
  min-width: 0 !important;
  gap: 4px !important;
}

body:not(.auth-required) .upload-box,
body:not(.auth-required) .advanced,
body:not(.auth-required) .tool-card {
  padding: 10px !important;
  margin-bottom: 8px !important;
  border-radius: 12px !important;
}

body:not(.auth-required) .drop-zone {
  padding: 10px !important;
  gap: 6px !important;
  border-radius: 12px !important;
}

body:not(.auth-required) .drop-zone p:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .tool-page-head p:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .file-summary:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .plan-summary-inline:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .task-meta:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) small:where(:not([data-ui-unmanaged] *)) {
  font-size: 10.5px !important;
  line-height: 1.35 !important;
}

body:not(.auth-required) .file-summary,
body:not(.auth-required) .plan-summary-inline {
  min-height: 28px !important;
  padding: 6px 8px !important;
  border-radius: 9px !important;
}

body:not(.auth-required) .command-row {
  gap: 6px !important;
}

body:not(.auth-required) .advanced summary {
  min-height: 30px !important;
  padding: 0 8px !important;
  border-radius: 9px !important;
}

body:not(.auth-required) .selected-media-list,
body:not(.auth-required) .selected-thumbs,
body:not(.auth-required) .workflow-dropped-images {
  gap: 6px !important;
}

body:not(.auth-required) .selected-thumb,
body:not(.auth-required) .workflow-dropped-images .selected-thumb {
  width: 58px !important;
  min-height: 68px !important;
  border-radius: 9px !important;
}

body:not(.auth-required) .selected-thumb img,
body:not(.auth-required) .selected-thumb video,
body:not(.auth-required) .workflow-dropped-images .selected-thumb img,
body:not(.auth-required) .workflow-dropped-images .selected-thumb video {
  height: 52px !important;
  border-radius: 8px 8px 0 0 !important;
}

body:not(.auth-required) .status-grid,
body:not(.auth-required) .task-stats-grid {
  gap: 8px !important;
}

body:not(.auth-required) .stat-card,
body:not(.auth-required) .monitor-stat {
  min-height: 54px !important;
  padding: 10px !important;
  border-radius: 10px !important;
}

body:not(.auth-required) .stat-card strong,
body:not(.auth-required) .monitor-stat strong {
  font-size: 19px !important;
  line-height: 1 !important;
}

body:not(.auth-required) .task-list {
  gap: 5px !important;
}

body:not(.auth-required) .task-row,
body:not(.auth-required) .task-list-row {
  min-height: 38px !important;
  padding: 9px 11px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
}

body:not(.auth-required) .task-detail,
body:not(.auth-required) .result-detail,
body:not(.auth-required) .media-result-detail {
  padding: 8px !important;
  border-radius: 10px !important;
}

body:not(.auth-required) .media-preview-card,
body:not(.auth-required) .result-media-card {
  border-radius: 10px !important;
}

/* ── 全局归一化的统一退出口:[data-ui-unmanaged] ────────────────────────────────
   下面这几条 `!important` 归一化(面板内边距、控件高度/内边距、缩放档)会作用到**全站每一个**
   面板和控件。以前想让某个组件不被管,只能往选择器里再塞一个 `:not(.某某panel)`——
   那串黑名单每来一个新组件就长一截,而且下一个人照样会被咬到,等于把补丁写进了底层规则。
   现在改成**一个**退出口:组件在自己根元素上写 `data-ui-unmanaged`,整棵子树就不再被这套
   规则托管,自己负责排版。新组件不要再往黑名单里加东西。
   退出口一律用 `:where(:not(...))` 包裹:`:where()` 特异性为 0,只减少匹配、不改变层叠权重,
   否则会反超那些靠特异性精调过的规则(踩过)。 */
body:not(.auth-required) .modal-panel:where(:not([data-ui-unmanaged])):not(.poser-studio-panel):not(.admin-account-detail-panel),
body:not(.auth-required) .workflow-project-panel,
body:not(.auth-required) .workflow-media-library-panel,
body:not(.auth-required) .command-palette-panel,
body:not(.auth-required) .watermark-picker-panel,
body:not(.auth-required) .watermark-panel,
body:not(.auth-required) .account-usage-panel,
body:not(.auth-required) .canvas-image-edit-panel,
body:not(.auth-required) .canvas-image-crop-panel,
body:not(.auth-required) .canvas-image-split-panel,
body:not(.auth-required) .canvas-video-edit-panel,
body:not(.auth-required) .panorama-preview-panel {
  padding: 18px !important;
  border-radius: 16px !important;
}

body:not(.auth-required) .modal-head {
  gap: 10px !important;
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
}

body:not(.auth-required) .workflow-toolbar,
body:not(.auth-required) .canvas-board-row {
  padding: 10px !important;
  gap: 8px !important;
  border-radius: 14px !important;
}

body:not(.auth-required) .workflow-toolbar > label,
body:not(.auth-required) .canvas-board-row > label {
  grid-template-columns: 28px minmax(0, 1fr) !important;
  gap: 5px !important;
}

body:not(.auth-required) .workflow-toolbar-actions,
body:not(.auth-required) .canvas-board-actions {
  gap: 6px !important;
}

body:not(.auth-required) .workflow-toolbar-actions button,
body:not(.auth-required) .workflow-toolbar-actions .workflow-dirty-badge,
body:not(.auth-required) .canvas-board-actions button,
body:not(.auth-required) .canvas-board-actions .workflow-dirty-badge {
  min-height: 29px !important;
  height: 29px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
}

body:not(.auth-required) .account-usage-summary {
  gap: 8px !important;
}

body:not(.auth-required) .account-usage-summary div {
  min-height: 30px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
}

body:not(.auth-required) .account-usage-summary strong {
  font-size: 13px !important;
}

body:not(.auth-required) .account-usage-tab {
  min-height: 30px !important;
  padding: 0 8px !important;
  border-radius: 9px !important;
}

body:not(.auth-required) .workflow-media-library-list {
  gap: 10px !important;
}

body:not(.auth-required) .workflow-media-library-preview {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: var(--workflow-media-preview-ratio, 1 / 1) !important;
}

body:not(.auth-required) .workflow-media-library-meta {
  padding: 8px !important;
  gap: 5px !important;
}

body:not(.auth-required) .workflow-media-library-actions {
  gap: 5px !important;
}

body:not(.auth-required) .workflow-media-library-actions button {
  min-height: 27px !important;
  height: 27px !important;
  font-size: 10px !important;
}

@media (min-width: 821px) {
  body:not(.auth-required) .workbench > .tabs {
    width: 100% !important;
    max-width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  body:not(.auth-required) .workbench > .tabs .tab {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    align-self: stretch !important;
  }

  body:not(.auth-required) .topbar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: var(--sidebar) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    border-right: 1px solid var(--border) !important;
    border-bottom: 0 !important;
    overflow: hidden !important;
  }

  body:not(.auth-required) .brand-block {
    gap: 8px !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 0 10px 0 !important;
    border-bottom: 1px solid var(--border) !important;
  }

  body:not(.auth-required) .brand-row {
    width: 100% !important;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: space-between !important;
    justify-items: stretch !important;
    gap: 8px !important;
  }

  body:not(.auth-required) .brand-text {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
  }

  body:not(.auth-required) .brand-logo-full {
    max-width: 126px !important;
    max-height: 34px !important;
  }

  body:not(.auth-required) .topbar p {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }

  body:not(.auth-required) .module-nav {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }

  body:not(.auth-required) .module-tab,
  body:not(.auth-required) .topbar .module-tab,
  body:not(.auth-required) .module-tab.has-ui-icon,
  body:not(.auth-required) .topbar .module-tab.has-ui-icon {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    padding: 7px 9px !important;
    border-radius: 11px !important;
    gap: 7px !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: start !important;
    overflow: hidden !important;
  }

  body:not(.auth-required) .module-tab .ui-icon,
  body:not(.auth-required) .topbar .module-tab .ui-icon,
  body:not(.auth-required) .module-tab.has-ui-icon > .ui-icon,
  body:not(.auth-required) .topbar .module-tab.has-ui-icon > .ui-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 6px !important;
    border-radius: 10px !important;
  }

  body:not(.auth-required) .module-tab strong {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body:not(.auth-required) .module-tab span:not(.ui-icon) {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 9.5px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body:not(.auth-required) .top-actions,
  body:not(.auth-required) .account-bar {
    gap: 6px !important;
  }

  body:not(.auth-required):not(.sidebar-collapsed) .top-actions {
    width: 100% !important;
    margin-top: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: 7px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  body:not(.auth-required):not(.sidebar-collapsed) .account-bar {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
    align-items: center !important;
    gap: 6px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  /* 访客态：登录入口与注册主按钮在展开侧栏内统一为通栏按钮 */
  body:not(.auth-required):not(.sidebar-collapsed) .account-bar .account-summary,
  body:not(.auth-required):not(.sidebar-collapsed) .account-bar .account-action {
    width: 100%;
    justify-content: center;
  }

  body:not(.auth-required):not(.sidebar-collapsed) .topbar #accountSummary.account-summary.account-summary-points {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    justify-self: start !important;
    border-radius: 10px !important;
  }

  body:not(.auth-required):not(.sidebar-collapsed) .topbar #themeToggleBtn,
  body:not(.auth-required):not(.sidebar-collapsed) .topbar #refreshJobsBtn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    display: grid !important;
    grid-template-columns: 16px auto !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  body:not(.auth-required):not(.sidebar-collapsed) .topbar #themeToggleBtn .sidebar-toggle-label,
  body:not(.auth-required):not(.sidebar-collapsed) .topbar #refreshJobsBtn .sidebar-toggle-label {
    display: inline-block !important;
    min-width: 0 !important;
    max-width: 64px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  body:not(.auth-required):not(.sidebar-collapsed) .topbar #themeToggleBtn .ui-icon,
  body:not(.auth-required):not(.sidebar-collapsed) .topbar #refreshJobsBtn .ui-icon {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    margin: 0 !important;
  }

  body.sidebar-collapsed:not(.auth-required) .topbar,
  body:not(.auth-required).sidebar-collapsed .topbar {
    width: var(--sidebar-collapsed) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 9px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 9px !important;
    overflow: hidden !important;
    transition:
      width var(--sidebar-motion),
      padding var(--sidebar-motion),
      gap var(--sidebar-motion),
      border-color var(--sidebar-motion),
      box-shadow var(--sidebar-motion) !important;
  }

  body.sidebar-collapsed:not(.auth-required) .brand-block,
  body:not(.auth-required).sidebar-collapsed .brand-block {
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 0 9px 0 !important;
    border-bottom: 1px solid var(--border) !important;
    display: grid !important;
    justify-items: center !important;
    gap: 7px !important;
  }

  body.sidebar-collapsed:not(.auth-required) .brand-row,
  body:not(.auth-required).sidebar-collapsed .brand-row {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body.sidebar-collapsed:not(.auth-required) .brand-full,
  body.sidebar-collapsed:not(.auth-required) .brand-text p,
  body:not(.auth-required).sidebar-collapsed .brand-full,
  body:not(.auth-required).sidebar-collapsed .brand-text p {
    display: none !important;
  }

  body.sidebar-collapsed:not(.auth-required) .module-tab strong,
  body.sidebar-collapsed:not(.auth-required) .module-tab span:not(.ui-icon),
  body:not(.auth-required).sidebar-collapsed .module-tab strong,
  body:not(.auth-required).sidebar-collapsed .module-tab span:not(.ui-icon) {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 0 !important;
    max-width: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-5px) !important;
  }

  body.sidebar-collapsed:not(.auth-required) .brand-short,
  body:not(.auth-required).sidebar-collapsed .brand-short {
    display: inline-grid !important;
    place-items: center !important;
  }

  body.sidebar-collapsed:not(.auth-required) .brand-text,
  body:not(.auth-required).sidebar-collapsed .brand-text {
    width: 38px !important;
    height: 32px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
  }

  body.sidebar-collapsed:not(.auth-required) .brand-logo-mark,
  body:not(.auth-required).sidebar-collapsed .brand-logo-mark {
    width: 31px !important;
    height: 28px !important;
    object-fit: contain !important;
  }

  body.sidebar-collapsed:not(.auth-required) .topbar .account-summary .account-summary-text,
  body:not(.auth-required).sidebar-collapsed .topbar .account-summary .account-summary-text {
    display: none !important;
  }

  body.sidebar-collapsed:not(.auth-required) .sidebar-toggle,
  body.sidebar-collapsed:not(.auth-required) .module-tab,
  body.sidebar-collapsed:not(.auth-required) .module-tab.has-ui-icon,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-tab,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.has-ui-icon,
  body.sidebar-collapsed:not(.auth-required) .topbar .icon-button,
  body.sidebar-collapsed:not(.auth-required) .topbar .account-summary,
  body:not(.auth-required).sidebar-collapsed .sidebar-toggle,
  body:not(.auth-required).sidebar-collapsed .module-tab,
  body:not(.auth-required).sidebar-collapsed .module-tab.has-ui-icon,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon,
  body:not(.auth-required).sidebar-collapsed .topbar .icon-button,
  body:not(.auth-required).sidebar-collapsed .topbar .account-summary {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    border-radius: 12px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    place-items: center !important;
    justify-content: center !important;
    align-content: center !important;
    overflow: visible !important;
    /* 折叠态边框宽度仍为 0(不占位),但颜色显式钉成 transparent。
       不能用 `border: 0` 简写——它会把 border-color 重置成初始值 currentColor(此处 #31546b 近黑),
       展开瞬间 border-width 0→1px 秒出、而 border-color 还停在这个深色再花 180ms 淡掉,
       于是每个按钮闪一圈黑框(暗色主题块本就写了 transparent 才幸免)。钉 transparent 后展开只剩浅边淡入。 */
    border: 0 solid transparent !important;
    background: transparent !important;
    color: #31546b !important;
    box-shadow: none !important;
    transition:
      width var(--sidebar-motion),
      height var(--sidebar-motion),
      min-width var(--sidebar-motion),
      min-height var(--sidebar-motion),
      color 180ms ease,
      background-color 180ms ease,
      /* border-color 必须跟 border-width(几何,--sidebar-motion 瞬切)同组,不能进 180ms 软淡组:
         否则宽度 0↔1px 一变,这 1px 边框就会用「过渡途中的颜色」(经 border:0 简写被重置成的
         currentColor 深色)渲染约 180ms = 折叠/展开瞬间黑框闪。详见本文件 .ui-icon 芯片处注释。 */
      border-color var(--sidebar-motion),
      box-shadow 180ms ease,
      transform 180ms ease !important;
  }

  body.sidebar-collapsed:not(.auth-required) .module-tab.active,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.active,
  body.sidebar-collapsed:not(.auth-required) .module-tab.has-ui-icon.active,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.has-ui-icon.active,
  body:not(.auth-required).sidebar-collapsed .module-tab.active,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab.active,
  body:not(.auth-required).sidebar-collapsed .module-tab.has-ui-icon.active,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon.active,
  body.sidebar-collapsed:not(.auth-required) .topbar .account-summary.account-summary-points,
  body:not(.auth-required).sidebar-collapsed .topbar .account-summary.account-summary-points {
    border-color: transparent !important;
    background: transparent !important;
    color: #255a9c !important;
    box-shadow: none !important;
  }

  body.theme-dark.sidebar-collapsed:not(.auth-required) .sidebar-toggle,
  body.theme-dark.sidebar-collapsed:not(.auth-required) .module-tab,
  body.theme-dark.sidebar-collapsed:not(.auth-required) .module-tab.has-ui-icon,
  body.theme-dark.sidebar-collapsed:not(.auth-required) .topbar .module-tab,
  body.theme-dark.sidebar-collapsed:not(.auth-required) .topbar .module-tab.has-ui-icon,
  body.theme-dark.sidebar-collapsed:not(.auth-required) .topbar .icon-button,
  body.theme-dark.sidebar-collapsed:not(.auth-required) .topbar .account-summary,
  body.theme-dark:not(.auth-required).sidebar-collapsed .sidebar-toggle,
  body.theme-dark:not(.auth-required).sidebar-collapsed .module-tab,
  body.theme-dark:not(.auth-required).sidebar-collapsed .module-tab.has-ui-icon,
  body.theme-dark:not(.auth-required).sidebar-collapsed .topbar .module-tab,
  body.theme-dark:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon,
  body.theme-dark:not(.auth-required).sidebar-collapsed .topbar .icon-button,
  body.theme-dark:not(.auth-required).sidebar-collapsed .topbar .account-summary {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--sidebar-icon-color) !important;
    box-shadow: none !important;
  }

  body.theme-dark.sidebar-collapsed:not(.auth-required) .module-tab.active,
  body.theme-dark.sidebar-collapsed:not(.auth-required) .topbar .module-tab.active,
  body.theme-dark:not(.auth-required).sidebar-collapsed .module-tab.active,
  body.theme-dark:not(.auth-required).sidebar-collapsed .topbar .module-tab.active,
  body.theme-dark.sidebar-collapsed:not(.auth-required) .topbar .account-summary.account-summary-points,
  body.theme-dark:not(.auth-required).sidebar-collapsed .topbar .account-summary.account-summary-points {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--sidebar-icon-active-color) !important;
    box-shadow: none !important;
  }

  body.sidebar-collapsed:not(.auth-required) .module-nav,
  body:not(.auth-required).sidebar-collapsed .module-nav,
  body.sidebar-collapsed:not(.auth-required) .top-actions,
  body:not(.auth-required).sidebar-collapsed .top-actions,
  body.sidebar-collapsed:not(.auth-required) .account-bar,
  body:not(.auth-required).sidebar-collapsed .account-bar {
    width: 100% !important;
    align-items: center !important;
    justify-items: center !important;
  }

  body.sidebar-collapsed:not(.auth-required) .module-nav,
  body:not(.auth-required).sidebar-collapsed .module-nav {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 7px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  body.sidebar-collapsed:not(.auth-required) .top-actions,
  body:not(.auth-required).sidebar-collapsed .top-actions,
  body.sidebar-collapsed:not(.auth-required) .account-bar,
  body:not(.auth-required).sidebar-collapsed .account-bar {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    overflow: visible !important;
    padding: 0 !important;
    margin-top: auto !important;
  }

  body.sidebar-collapsed:not(.auth-required) .module-tab::before,
  body:not(.auth-required).sidebar-collapsed .module-tab::before {
    display: none !important;
    content: none !important;
  }

  body.sidebar-collapsed:not(.auth-required) .module-tab.has-ui-icon > .ui-icon,
  body:not(.auth-required).sidebar-collapsed .module-tab.has-ui-icon > .ui-icon,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.has-ui-icon > .ui-icon,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon > .ui-icon,
  body.sidebar-collapsed:not(.auth-required) .topbar .icon-button .ui-icon,
  body:not(.auth-required).sidebar-collapsed .topbar .icon-button .ui-icon,
  body.sidebar-collapsed:not(.auth-required) .topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) > .ui-icon,
  body:not(.auth-required).sidebar-collapsed .topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) > .ui-icon,
  body.sidebar-collapsed:not(.auth-required) .sidebar-toggle .ui-icon,
  body:not(.auth-required).sidebar-collapsed .sidebar-toggle .ui-icon {
    grid-row: 1 !important;
    grid-column: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    padding: 7px !important;
    margin: 0 !important;
    border: 1px solid var(--sidebar-icon-border, #dbe4ef) !important;
    border-radius: 10px !important;
    background: var(--sidebar-icon-bg, linear-gradient(180deg, #f8fafc, #eef4fb)) !important;
    color: var(--sidebar-icon-color, #31546b) !important;
    display: grid !important;
    place-items: center !important;
    line-height: 0 !important;
    overflow: visible !important;
    transform-origin: center center !important;
    box-shadow: var(--sidebar-icon-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.85)) !important;
    transition:
      width var(--sidebar-motion),
      height var(--sidebar-motion),
      background-color 180ms ease,
      /* 根因收口:侧栏折叠/展开是「几何瞬时落位」(--sidebar-motion:0ms),border-width 属几何会瞬切。
         border-color 与 border-width 强耦合,必须同组瞬切——若像这里原来那样放进 180ms 软淡组,
         就会出现「宽度已 0→1px,颜色还停在过渡起点」的错位:而过渡起点的颜色是 currentColor(深色文字色,
         由 border:0 简写重置而来),于是切换按钮的芯片在收起瞬间套一圈近黑边框、~180ms 才淡掉。
         本仓库部分过渡早已把 border-color 正确归入 var(--sidebar-motion)(见 part2.css .sidebar-refresh、
         part3.css .module-nav),这里只是把漏掉的几条统一齐平。背景/文字/阴影无宽变问题,仍可 180ms 软淡。 */
      border-color var(--sidebar-motion),
      color 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease !important;
  }

  body.sidebar-collapsed:not(.auth-required) .module-tab.active.has-ui-icon > .ui-icon,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.active.has-ui-icon > .ui-icon,
  body:not(.auth-required).sidebar-collapsed .module-tab.active.has-ui-icon > .ui-icon,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab.active.has-ui-icon > .ui-icon,
  body.sidebar-collapsed:not(.auth-required) .topbar .account-summary.account-summary-points .ui-icon,
  body:not(.auth-required).sidebar-collapsed .topbar .account-summary.account-summary-points .ui-icon {
    border-color: var(--sidebar-icon-active-border, rgba(47, 109, 183, 0.3)) !important;
    background: var(--sidebar-icon-active-bg, linear-gradient(180deg, #e3ecf7, #d7e2f3)) !important;
    color: var(--sidebar-icon-active-color, var(--accent-strong)) !important;
    box-shadow: var(--sidebar-icon-active-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.85)) !important;
  }

  body.sidebar-collapsed:not(.auth-required) .topbar .account-summary.account-summary-points .account-points-icon,
  body:not(.auth-required).sidebar-collapsed .topbar .account-summary.account-summary-points .account-points-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    border: 1px solid var(--sidebar-icon-active-border, rgba(47, 109, 183, 0.3)) !important;
    background: var(--sidebar-icon-active-bg, linear-gradient(180deg, #e3ecf7, #d7e2f3)) !important;
    color: var(--sidebar-icon-active-color, var(--accent-strong)) !important;
    display: grid !important;
    place-items: center !important;
    line-height: 0 !important;
    transform-origin: center center !important;
    box-shadow: var(--sidebar-icon-active-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.85)) !important;
    filter: none !important;
  }
  body.theme-dark.sidebar-collapsed:not(.auth-required) .topbar .account-summary.account-summary-points .account-points-icon,
  body.theme-dark:not(.auth-required).sidebar-collapsed .topbar .account-summary.account-summary-points .account-points-icon {
    border-color: var(--sidebar-icon-active-border) !important;
    background: var(--sidebar-icon-active-bg) !important;
    color: var(--sidebar-icon-active-color) !important;
    box-shadow: var(--sidebar-icon-active-shadow) !important;
    filter: none !important;
  }

  body.sidebar-collapsed:not(.auth-required) .module-tab.has-ui-icon > .ui-icon svg,
  body:not(.auth-required).sidebar-collapsed .module-tab.has-ui-icon > .ui-icon svg,
  body.sidebar-collapsed:not(.auth-required) .topbar .icon-button .ui-icon svg,
  body:not(.auth-required).sidebar-collapsed .topbar .icon-button .ui-icon svg,
  body.sidebar-collapsed:not(.auth-required) .topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) > .ui-icon svg,
  body:not(.auth-required).sidebar-collapsed .topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) > .ui-icon svg,
  body.sidebar-collapsed:not(.auth-required) .sidebar-toggle .ui-icon svg,
  body:not(.auth-required).sidebar-collapsed .sidebar-toggle .ui-icon svg,
  body.sidebar-collapsed:not(.auth-required) .topbar .account-summary.account-summary-points .account-points-icon svg,
  body:not(.auth-required).sidebar-collapsed .topbar .account-summary.account-summary-points .account-points-icon svg {
    width: 15.5px !important;
    height: 15.5px !important;
    min-width: 15.5px !important;
    min-height: 15.5px !important;
    display: block !important;
    margin: auto !important;
    stroke-width: 1.9 !important;
    transform-origin: center center !important;
  }

  body:not(.auth-required) .layout {
    margin-left: var(--sidebar) !important;
    padding: var(--layout-padding) !important;
    --layout-column-gap: 10px;
    --layout-row-gap: 10px;
    min-height: 100dvh !important;
  }

  body:not(.auth-required) .layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):not(.text-layout):not(.media-tool-layout):not(.tool-layout) {
    grid-template-columns: minmax(360px, 0.78fr) minmax(0, 1.22fr) !important;
  }

  body:not(.auth-required) .layout.media-tool-layout {
    grid-template-columns: minmax(360px, 0.78fr) minmax(0, 1.22fr) !important;
  }

  body:not(.auth-required) .layout > .panel,
  body:not(.auth-required) .layout.media-tool-layout .workbench,
  body:not(.auth-required) .layout.media-tool-layout .monitor {
    min-height: calc(100dvh - 20px) !important;
  }

  /* 生成类三模块例外:上一条把每个面板撑到满视口高,会比栅格格子高、顶掉面板自身滚动
     并被视口锁裁掉底部(图片/视频/声音参数区与任务区滚不动的根因)。此处对账上面那条
     既有 !important,把这三模块的 workbench/monitor 放回 min-height:0,让高度链完整、可滚。
     仅 desktop(本 @media min-width:821px)生效;≤820px 移动单列堆叠由后面的窄屏块负责。 */
  body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .workbench,
  body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
  }

  body:not(.auth-required) .layout.media-tool-layout .tool-panel.active {
    gap: 8px !important;
  }

  body:not(.auth-required) .workflow-main,
  body:not(.auth-required) .infinite-canvas-main {
    /* 主区填满由 height:100% 高度链负责；旧的 min-height 魔法数会把它撑出外壳、底部溢出，置 0 */
    min-height: 0 !important;
  }

  body:not(.auth-required) .workflow-inspector,
  body:not(.auth-required) .infinite-canvas-inspector {
    width: 260px !important;
  }
}

@media (max-width: 820px) {
  :root {
    --font-ui: 10.5px;
    --font-label: 10.5px;
    --font-title: 15px;
    --font-section-title: 12.5px;
    --mobile-topbar-offset: 96px;
    --panel-padding: 9px;
    --tab-height: 29px;
    --control-height: 30px;
    --button-height: 31px;
    --form-gap: 7px;
    --topbar-btn: clamp(30px, 8.4vw, 32px);
    --topbar-radius: calc(var(--topbar-btn) * 0.31);
  }

  body:not(.auth-required) .topbar,
  body:not(.auth-required).sidebar-collapsed .topbar,
  body.sidebar-collapsed:not(.auth-required) .topbar {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 7px 9px !important;
    display: grid !important;
    grid-template-columns: minmax(86px, 1fr) auto !important;
    grid-template-rows: var(--topbar-btn) var(--topbar-btn) !important;
    grid-template-areas: "brand actions" "nav nav" !important;
    align-items: center !important;
    row-gap: 6px !important;
    column-gap: 6px !important;
    overflow: hidden !important;
  }

  body:not(.auth-required) .brand-block,
  body:not(.auth-required).sidebar-collapsed .brand-block,
  body.sidebar-collapsed:not(.auth-required) .brand-block {
    grid-area: brand !important;
    width: 100% !important;
    min-width: 0 !important;
    height: var(--topbar-btn) !important;
    min-height: var(--topbar-btn) !important;
    padding: 0 !important;
    border: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  body:not(.auth-required) .brand-row,
  body:not(.auth-required).sidebar-collapsed .brand-row,
  body.sidebar-collapsed:not(.auth-required) .brand-row {
    width: 100% !important;
    height: var(--topbar-btn) !important;
    min-height: var(--topbar-btn) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }

  body:not(.auth-required) .brand-full,
  body:not(.auth-required).sidebar-collapsed .brand-full,
  body.sidebar-collapsed:not(.auth-required) .brand-full {
    display: inline-flex !important;
  }

  body:not(.auth-required) .brand-short,
  body:not(.auth-required).sidebar-collapsed .brand-short,
  body.sidebar-collapsed:not(.auth-required) .brand-short {
    display: none !important;
  }

  body:not(.auth-required) .brand-logo-full,
  body:not(.auth-required).sidebar-collapsed .brand-logo-full,
  body.sidebar-collapsed:not(.auth-required) .brand-logo-full {
    width: clamp(82px, 28vw, 106px) !important;
    max-width: clamp(82px, 28vw, 106px) !important;
    max-height: calc(var(--topbar-btn) - 5px) !important;
    object-fit: contain !important;
  }

  body:not(.auth-required) .topbar p,
  body:not(.auth-required).sidebar-collapsed .topbar p,
  body.sidebar-collapsed:not(.auth-required) .topbar p {
    display: none !important;
  }

  body:not(.auth-required) .topbar .top-actions,
  body:not(.auth-required).sidebar-collapsed .topbar .top-actions,
  body.sidebar-collapsed:not(.auth-required) .topbar .top-actions {
    grid-area: actions !important;
    position: static !important;
    width: auto !important;
    max-width: calc(100vw - clamp(82px, 28vw, 106px) - 26px) !important;
    height: var(--topbar-btn) !important;
    margin: 0 !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    overflow: visible !important;
  }

  body:not(.auth-required) .sidebar-toggle,
  body:not(.auth-required).sidebar-collapsed .sidebar-toggle,
  body.sidebar-collapsed:not(.auth-required) .sidebar-toggle {
    position: static !important;
    width: var(--topbar-btn) !important;
    height: var(--topbar-btn) !important;
    min-width: var(--topbar-btn) !important;
    min-height: var(--topbar-btn) !important;
    max-width: var(--topbar-btn) !important;
    padding: 0 !important;
    margin-left: 4px !important;
    border-radius: var(--topbar-radius) !important;
    display: grid !important;
    place-items: center !important;
    font-size: 0 !important;
    flex: 0 0 var(--topbar-btn) !important;
  }

  body:not(.auth-required) .topbar .module-nav,
  body:not(.auth-required).sidebar-collapsed .topbar .module-nav,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-nav {
    grid-area: nav !important;
    width: 100% !important;
    height: var(--topbar-btn) !important;
    min-height: var(--topbar-btn) !important;
    padding: 0 !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  body:not(.auth-required) .topbar .module-nav::-webkit-scrollbar,
  body:not(.auth-required).sidebar-collapsed .topbar .module-nav::-webkit-scrollbar,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-nav::-webkit-scrollbar {
    display: none !important;
  }

  body:not(.auth-required) .topbar .module-tab,
  body:not(.auth-required) .topbar .module-tab.has-ui-icon,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-tab,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.has-ui-icon {
    width: var(--topbar-btn) !important;
    height: var(--topbar-btn) !important;
    min-width: var(--topbar-btn) !important;
    min-height: var(--topbar-btn) !important;
    padding: 0 !important;
    border-radius: var(--topbar-radius) !important;
    flex: 0 0 var(--topbar-btn) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    place-items: center !important;
    align-content: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-shadow: none !important;
  }

  body:not(.auth-required) .topbar .module-tab strong,
  body:not(.auth-required) .topbar .module-tab span:not(.ui-icon),
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab strong,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab span:not(.ui-icon),
  body.sidebar-collapsed:not(.auth-required) .topbar .module-tab strong,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-tab span:not(.ui-icon),
  body:not(.auth-required) .topbar .module-tab::before,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab::before,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-tab::before {
    display: none !important;
    content: none !important;
  }

  body:not(.auth-required) .topbar .module-tab.has-ui-icon > .ui-icon,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon > .ui-icon,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.has-ui-icon > .ui-icon {
    grid-row: auto !important;
    grid-column: auto !important;
    width: calc(var(--topbar-btn) - 11px) !important;
    height: calc(var(--topbar-btn) - 11px) !important;
    min-width: calc(var(--topbar-btn) - 11px) !important;
    max-width: calc(var(--topbar-btn) - 11px) !important;
    min-height: calc(var(--topbar-btn) - 11px) !important;
    max-height: calc(var(--topbar-btn) - 11px) !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #31546b !important;
    opacity: 1 !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
  }

  body:not(.auth-required) .topbar .module-tab.has-ui-icon > .ui-icon svg,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon > .ui-icon svg,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.has-ui-icon > .ui-icon svg {
    width: calc(var(--topbar-btn) - 17px) !important;
    height: calc(var(--topbar-btn) - 17px) !important;
    stroke-width: 2 !important;
    opacity: 1 !important;
  }

  body:not(.auth-required) .topbar .module-tab.active,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab.active,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.active {
    border-color: rgba(47, 109, 183, 0.45) !important;
    background: rgba(47, 109, 183, 0.12) !important;
    box-shadow: inset 0 0 0 1px rgba(47, 109, 183, 0.08) !important;
  }

  body:not(.auth-required) .topbar .module-tab.active > .ui-icon,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab.active > .ui-icon,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.active > .ui-icon {
    color: #255a9c !important;
    background: transparent !important;
  }

  body:not(.auth-required) .topbar #accountSummary.account-summary,
  body:not(.auth-required).sidebar-collapsed .topbar #accountSummary.account-summary,
  body.sidebar-collapsed:not(.auth-required) .topbar #accountSummary.account-summary,
  body:not(.auth-required) .topbar #themeToggleBtn,
  body:not(.auth-required) .topbar #refreshJobsBtn,
  body:not(.auth-required).sidebar-collapsed .topbar #themeToggleBtn,
  body:not(.auth-required).sidebar-collapsed .topbar #refreshJobsBtn,
  body.sidebar-collapsed:not(.auth-required) .topbar #themeToggleBtn,
  body.sidebar-collapsed:not(.auth-required) .topbar #refreshJobsBtn {
    height: var(--topbar-btn) !important;
    min-height: var(--topbar-btn) !important;
    border-radius: var(--topbar-radius) !important;
    display: grid !important;
    place-items: center !important;
  }

  body:not(.auth-required) .topbar #accountSummary.account-summary:not(.account-summary-points),
  body:not(.auth-required).sidebar-collapsed .topbar #accountSummary.account-summary:not(.account-summary-points),
  body.sidebar-collapsed:not(.auth-required) .topbar #accountSummary.account-summary:not(.account-summary-points),
  body:not(.auth-required) .topbar #themeToggleBtn,
  body:not(.auth-required) .topbar #refreshJobsBtn,
  body:not(.auth-required).sidebar-collapsed .topbar #themeToggleBtn,
  body:not(.auth-required).sidebar-collapsed .topbar #refreshJobsBtn,
  body.sidebar-collapsed:not(.auth-required) .topbar #themeToggleBtn,
  body.sidebar-collapsed:not(.auth-required) .topbar #refreshJobsBtn {
    width: var(--topbar-btn) !important;
    min-width: var(--topbar-btn) !important;
    max-width: var(--topbar-btn) !important;
    padding: 0 !important;
    flex: 0 0 var(--topbar-btn) !important;
  }

  body:not(.sidebar-collapsed):not(.auth-required) .topbar #accountSummary.account-summary.account-summary-points {
    width: auto !important;
    min-width: clamp(62px, 20vw, 72px) !important;
    max-width: 76px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
    flex: 0 1 76px !important;
  }

  body:not(.sidebar-collapsed):not(.auth-required) .topbar .account-summary.account-summary-points .account-points-icon {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
  }

  body:not(.auth-required) .topbar .account-action .ui-icon,
  body:not(.auth-required) .topbar #themeToggleBtn .ui-icon,
  body:not(.auth-required) .topbar #refreshJobsBtn .ui-icon,
  body:not(.auth-required) .sidebar-toggle .ui-icon,
  body:not(.auth-required).sidebar-collapsed .topbar .account-action .ui-icon,
  body:not(.auth-required).sidebar-collapsed .topbar #themeToggleBtn .ui-icon,
  body:not(.auth-required).sidebar-collapsed .topbar #refreshJobsBtn .ui-icon,
  body:not(.auth-required).sidebar-collapsed .sidebar-toggle .ui-icon,
  body.sidebar-collapsed:not(.auth-required) .topbar .account-action .ui-icon,
  body.sidebar-collapsed:not(.auth-required) .topbar #themeToggleBtn .ui-icon,
  body.sidebar-collapsed:not(.auth-required) .topbar #refreshJobsBtn .ui-icon,
  body.sidebar-collapsed:not(.auth-required) .sidebar-toggle .ui-icon {
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
  }

  body:not(.auth-required) .layout,
  body:not(.auth-required).sidebar-collapsed .layout,
  body.sidebar-collapsed:not(.auth-required) .layout,
  body:not(.auth-required).sidebar-collapsed .module-panel,
  body.sidebar-collapsed:not(.auth-required) .module-panel {
    margin-left: 0 !important;
    margin-top: var(--mobile-topbar-offset) !important;
    padding: 6px !important;
    gap: 7px !important;
  }

  body:not(.auth-required) .layout > .panel,
  body:not(.auth-required) .layout.media-tool-layout .workbench,
  body:not(.auth-required) .layout.media-tool-layout .monitor {
    border-radius: 13px !important;
    padding: 8px !important;
  }

  body:not(.auth-required) #appLayout.media-tool-layout {
    height: calc(100dvh - var(--mobile-topbar-offset) - 7px) !important;
  }

  body:not(.auth-required) #appLayout.media-tool-layout > .workbench,
  body:not(.auth-required) #appLayout.media-tool-layout > .monitor {
    min-width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
  }

  body:not(.auth-required) .tabs {
    height: 29px !important;
    min-height: 29px !important;
  }

  body:not(.auth-required) .tab-panel,
  body:not(.auth-required) .tool-panel.active {
    padding: 8px !important;
    gap: 7px !important;
  }

  body:not(.auth-required) .upload-box,
  body:not(.auth-required) .advanced,
  body:not(.auth-required) .tool-card {
    padding: 9px !important;
    margin-bottom: 7px !important;
  }

  body:not(.auth-required) .drop-zone {
    padding: 9px !important;
    gap: 5px !important;
  }

  body:not(.auth-required) textarea {
    min-height: 96px !important;
    padding: 8px 9px !important;
  }

  body:not(.auth-required) #text-prompts,
  body:not(.auth-required) #image-prompt,
  body:not(.auth-required) #videoPrompt,
  body:not(.auth-required) #audioText,
  body:not(.auth-required) #musicPrompt {
    min-height: 114px !important;
  }

  body:not(.auth-required) .quick-options,
  body:not(.auth-required) .layout.media-tool-layout .quick-options,
  body:not(.auth-required) .advanced .options-grid,
  body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body:not(.auth-required) .command-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body:not(.auth-required) .command-row > .plan-summary-inline {
    grid-column: 1 / -1 !important;
  }

  body:not(.auth-required) .status-grid,
  body:not(.auth-required) .task-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body:not(.auth-required) .stat-card,
  body:not(.auth-required) .monitor-stat {
    min-height: 48px !important;
    padding: 8px 6px !important;
  }

  body:not(.auth-required) .stat-card strong,
  body:not(.auth-required) .monitor-stat strong {
    font-size: 17px !important;
  }

  body:not(.auth-required) .workflow-toolbar,
  body:not(.auth-required) .canvas-board-row {
    padding: 8px !important;
    gap: 6px !important;
  }

  body:not(.auth-required) .workflow-toolbar-actions button,
  body:not(.auth-required) .workflow-toolbar-actions .workflow-dirty-badge,
  body:not(.auth-required) .canvas-board-actions button,
  body:not(.auth-required) .canvas-board-actions .workflow-dirty-badge {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
  }

  body:not(.auth-required) .workflow-stage-wrap,
  body:not(.auth-required) .workflow-lite-wrap,
  body:not(.auth-required) .infinite-canvas-stage {
    min-height: calc(100dvh - var(--mobile-topbar-offset) - 118px) !important;
  }

  body:not(.auth-required) .modal-mask:not([hidden]) {
    padding: 5px !important;
  }

  body:not(.auth-required) .modal-panel:where(:not([data-ui-unmanaged])):not(.feed-detail-panel):not(.admin-account-detail-panel),
  body:not(.auth-required) .workflow-project-panel,
  body:not(.auth-required) .workflow-media-library-panel,
  body:not(.auth-required) .command-palette-panel,
  body:not(.auth-required) .watermark-picker-panel,
  body:not(.auth-required) .watermark-panel,
  body:not(.auth-required) .account-usage-panel,
  body:not(.auth-required) .canvas-image-edit-panel,
  body:not(.auth-required) .canvas-image-crop-panel,
  body:not(.auth-required) .canvas-image-split-panel,
  body:not(.auth-required) .canvas-video-edit-panel,
  body:not(.auth-required) .panorama-preview-panel {
    width: min(100%, calc(100vw - 10px)) !important;
    max-width: calc(100vw - 10px) !important;
    max-height: calc(100dvh - 10px) !important;
    padding: 10px !important;
    border-radius: 15px !important;
  }

  body:not(.auth-required) .workflow-project-tools,
  body:not(.auth-required) .canvas-project-tools,
  body:not(.auth-required) .workflow-media-library-tools,
  body:not(.auth-required) .account-usage-tools {
    gap: 6px !important;
  }

  body:not(.auth-required) .workflow-media-library-list {
    gap: 7px !important;
    max-height: calc(100dvh - 132px) !important;
  }

  body:not(.auth-required) .workflow-media-library-preview {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: var(--workflow-media-preview-ratio, 1 / 1) !important;
  }

  body:not(.auth-required) .account-usage-summary {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  body:not(.auth-required) .account-usage-summary div {
    min-height: 28px !important;
    padding: 4px 8px !important;
  }

  body:not(.auth-required) .account-usage-summary strong {
    font-size: 12px !important;
  }
}

/* Sound tool mode switch uses the same segmented layout as the image tool tabs. */
body:not(.auth-required) .layout.media-tool-layout #audioToolTab > .tool-mode-tabs {
  width: 100% !important;
  max-width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 0 10px 0 !important;
  padding: 4px !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  align-items: stretch !important;
  border: 1px solid #dce6ef !important;
  border-radius: var(--radius-sm) !important;
  background: #f4f8fb !important;
  overflow: hidden !important;
}

body:not(.auth-required) .layout.media-tool-layout #audioToolTab > .tool-mode-tabs .tool-mode-tab {
  width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 8px !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
  border: 0 !important;
  border-radius: var(--radius-xs) !important;
  background: transparent !important;
  color: #475569 !important;
  font-size: var(--font-ui) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  box-shadow: none !important;
}

body:not(.auth-required) .layout.media-tool-layout #audioToolTab > .tool-mode-tabs .tool-mode-tab.active {
  background: #ffffff !important;
  color: var(--accent-strong) !important;
  box-shadow: inset 0 -2px 0 var(--accent), 0 1px 2px rgba(16, 24, 40, 0.10) !important;
}

body.theme-dark:not(.auth-required) .layout.media-tool-layout #audioToolTab > .tool-mode-tabs {
  border-color: rgba(141, 149, 165, 0.34) !important;
  background: rgba(15, 27, 45, 0.72) !important;
}

body.theme-dark:not(.auth-required) .layout.media-tool-layout #audioToolTab > .tool-mode-tabs .tool-mode-tab {
  color: #aebed2 !important;
  background: transparent !important;
}

body.theme-dark:not(.auth-required) .layout.media-tool-layout #audioToolTab > .tool-mode-tabs .tool-mode-tab.active {
  color: #f8fbff !important;
  background: rgba(30, 42, 64, 0.95) !important;
  box-shadow: inset 0 -2px 0 #5aa6e8 !important;
}

/* 语音手机端开关条容器/白片已统一收口到 responsive.css(与图片同源),此处旧局部规则已移除 */

/* Unified UI polish: one compact visual system for content controls. */
body:not(.auth-required) {
  --ui-action-height: 30px;
  --ui-action-radius: 9px;
  --ui-action-gap: 5px;
  --ui-field-radius: 9px;
  --ui-card-radius: 12px;
  --ui-content-font: 11px;
  --ui-label-font: 11px;
  --ui-caption-font: 10.5px;
}

body:not(.auth-required) :where(.workbench, .monitor, .tool-card, .upload-box, .advanced, .drop-zone, .modal-panel):where(:not([data-ui-unmanaged])) {
  color: var(--text);
}

body:not(.auth-required) :where(label, .field-title, .drop-zone strong, .tool-page-head strong, .monitor-title strong, .workflow-inspector h3, .canvas-inspector h3):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
  font-size: var(--ui-label-font) !important;
  line-height: 1.35 !important;
}

body:not(.auth-required) :where(.drop-zone p, .tool-page-head p, .file-summary, .plan-summary-inline, .task-meta, .case-meta, .model-capability-hint, small):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
  font-size: var(--ui-caption-font) !important;
  line-height: 1.4 !important;
}

body:not(.auth-required) :where(input:not([type="range"]), select):where(:not([data-ui-unmanaged] *)) {
  min-height: var(--ui-action-height) !important;
  height: var(--ui-action-height) !important;
  padding: 0 9px !important;
  border-radius: var(--ui-field-radius) !important;
  font-size: var(--ui-content-font) !important;
  line-height: 1.2 !important;
}

body:not(.auth-required) :where(textarea):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
  padding: 9px 10px !important;
  border-radius: 10px !important;
  font-size: var(--ui-content-font) !important;
  line-height: 1.45 !important;
}

body:not(.auth-required) :where(button, .button-link):not([data-ui-compact-control]):not([hidden]):not(.module-tab):not(.sidebar-toggle):not(.icon-button):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(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn):not(.watermark-library-preview):not(.thumb-preview):not(.watermark-card):not(.watermark-layer-select):not(.text-chat-history-toggle):not(.infinite-inline-prompt-expand):not(.infinite-card-run):not(.preview-canvas-tool):not(.workflow-media-library-select):not(.ob-rail-step):not(.app-more-id):not(.app-more-item):not(.account-page-row):not(.account-page-stat):not(.account-page-edit):not(.account-page-quick):not(.account-page-tab):not(.account-command-btn):not(.account-content-action):not(.account-resource-card):not(.account-card):not(.account-card-open):not(.account-card-more):not(.account-resource-more):not(.account-mini-item):not(.account-proj-pill):not(.account-page-project-open):not(.account-page-project-more):not(.account-page-projects-more):not(.hl-stage):where(:not([data-ui-unmanaged] *)) {
  min-height: var(--ui-action-height) !important;
  height: var(--ui-action-height) !important;
  padding: 0 10px !important;
  border-radius: var(--ui-action-radius) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ui-action-gap) !important;
  font-size: var(--ui-content-font) !important;
  line-height: 1.15 !important;
  font-weight: 760 !important;
  white-space: nowrap !important;
}

body:not(.auth-required) :where(.primary, .secondary, .danger, .button-link) svg,
body:not(.auth-required) :where(button:not([data-ui-compact-control])) > .ui-icon svg:where(:not([data-ui-unmanaged] *)) {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
}

body:not(.auth-required) :where(.command-row, .command-row.compact, .tool-result-actions, .workflow-toolbar-actions, .canvas-board-actions, .workflow-media-library-actions, .account-usage-tools) {
  gap: 6px !important;
}

body:not(.auth-required) :where(.workflow-toolbar-actions button, .canvas-board-actions button, .workflow-media-library-actions button, .account-usage-tools button):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
  min-height: var(--ui-action-height) !important;
  height: var(--ui-action-height) !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: var(--ui-content-font) !important;
}

body:not(.auth-required) :where(.workflow-dirty-badge, .canvas-board-actions .workflow-dirty-badge):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
  min-height: var(--ui-action-height) !important;
  height: var(--ui-action-height) !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: var(--ui-content-font) !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* (旧 :where(.text-message-copy, .text-chat-delete-btn) 统一尺寸规则已移除:
   .text-message-copy 已删；.text-chat-delete-btn 是对话历史内的常驻小按钮，由历史项源规则掌控尺寸) */

body:not(.auth-required) :where(.tabs, .tool-mode-tabs) {
  box-sizing: border-box !important;
}

body:not(.auth-required) :where(.tab, .tool-mode-tab):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
  font-size: var(--ui-content-font) !important;
  line-height: 1.15 !important;
  font-weight: 820 !important;
}

body:not(.auth-required) :where(.tool-card, .upload-box, .advanced, .drop-zone, .file-summary, .plan-summary-inline, .task-row, .task-list-row, .job-select, .case-select):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
  border-radius: var(--ui-card-radius) !important;
}

body:not(.auth-required) :where(.stat-card, .monitor-stat) {
  border-radius: 10px !important;
}

body:not(.auth-required) :where(.stat-card strong, .monitor-stat strong) {
  font-size: 18px !important;
  line-height: 1.05 !important;
}

body.theme-dark:not(.auth-required) :where(.secondary, .button-link, .text-message-copy, .workflow-toolbar-actions button, .canvas-board-actions button) {
  border-color: rgba(141, 149, 165, 0.36) !important;
}
/* 暗色：工具栏「清空」危险按钮保留红色边框(上面的中性灰 !important 会误伤 .danger，使其在暗色下边框变灰) */
body.theme-dark:not(.auth-required) .workflow-toolbar-actions button.danger,
body.theme-dark:not(.auth-required) .canvas-board-actions button.danger {
  border-color: rgba(248, 113, 113, 0.5) !important;
}
/* 暗色：工具栏按钮静止阴影改成暗色可见(基础 0 1px 1px rgba(16,24,40,.03) 在暗底不可见)；hover 的 !important 阴影不受影响 */
body.theme-dark:not(.auth-required) .workflow-toolbar-actions button,
body.theme-dark:not(.auth-required) .canvas-board-actions button {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

@media (min-width: 821px) {
  body:not(.auth-required) {
    --ui-action-height: 30px;
    --ui-content-font: 11px;
    --ui-label-font: 11px;
    --ui-caption-font: 10.5px;
  }

  body:not(.auth-required) :where(.workflow-toolbar-actions .secondary, .workflow-toolbar-actions .primary, .workflow-toolbar-actions .danger, .canvas-board-actions .secondary, .canvas-board-actions .primary, .canvas-board-actions .danger) {
    min-height: 30px !important;
    height: 30px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 820px) {
  body:not(.auth-required) {
    --ui-action-height: 30px;
    --ui-content-font: 10.5px;
    --ui-label-font: 10.5px;
    --ui-caption-font: 10px;
  }

  body:not(.auth-required) :where(button, .button-link):not([data-ui-compact-control]):not([hidden]):not(.module-tab):not(.sidebar-toggle):not(.icon-button):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(.hl-stage):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn):not(.watermark-library-preview):not(.thumb-preview):not(.watermark-card):not(.watermark-layer-select):not(.text-chat-history-toggle):not(.infinite-inline-prompt-expand):not(.infinite-card-run):not(.preview-canvas-tool):not(.workflow-media-library-select):not(.ob-rail-step):not(.app-more-id):not(.app-more-item):not(.account-page-row):not(.account-page-stat):not(.account-page-edit):not(.account-page-quick):not(.account-page-tab):not(.account-command-btn):not(.account-content-action):not(.account-resource-card):not(.account-card):not(.account-card-open):not(.account-card-more):not(.account-resource-more):not(.account-mini-item):not(.account-proj-pill):not(.account-page-project-open):not(.account-page-project-more):not(.account-page-projects-more):where(:not([data-ui-unmanaged] *)) {
    padding-inline: 8px !important;
  }

  body:not(.auth-required) :where(.workflow-toolbar-actions button, .canvas-board-actions button, .workflow-media-library-actions button, .account-usage-tools button) {
    min-height: 28px !important;
    height: 28px !important;
    padding-inline: 8px !important;
    font-size: 10.5px !important;
  }

  /* (旧 :where(.text-message-copy, .text-chat-delete-btn) 移动端尺寸规则已移除，同上) */
}

body:not(.auth-required) [hidden] {
  display: none !important;
}

body:not(.auth-required) .topbar .account-bar button[hidden],
body:not(.auth-required).sidebar-collapsed .topbar .account-bar button[hidden],
body.sidebar-collapsed:not(.auth-required) .topbar .account-bar button[hidden] {
  display: none !important;
}

body:not(.auth-required) input[type="checkbox"],
body:not(.auth-required) input[type="radio"] {
  width: 15px !important;
  min-width: 15px !important;
  max-width: 15px !important;
  height: 15px !important;
  min-height: 15px !important;
  max-height: 15px !important;
  padding: 0 !important;
  border-radius: 4px !important;
  flex: 0 0 15px !important;
}

/* Canonical mobile navigation: one compact shell, one icon-button system. */
@media (max-width: 820px) {
  body:not(.auth-required) {
    --mobile-menu-btn: 34px;
    --mobile-menu-tile: 30px;
    --mobile-menu-svg: 15.5px;
    --mobile-menu-pad-x: 8px;
    --mobile-menu-pad-y: 6px;
    --mobile-menu-gap: 6px;
    --mobile-menu-row: var(--mobile-menu-btn);
    --mobile-menu-row-gap: 6px;
    --mobile-topbar-offset: calc(
      var(--mobile-menu-pad-y) + var(--mobile-menu-pad-y) + var(--mobile-menu-btn) + var(--mobile-menu-row) + var(--mobile-menu-row-gap) + 2px
    );
  }

  body.sidebar-collapsed:not(.auth-required),
  body:not(.auth-required).sidebar-collapsed {
    --mobile-menu-row: 0px;
    --mobile-menu-row-gap: 0px;
  }

  body:not(.auth-required) .topbar,
  body.sidebar-collapsed:not(.auth-required) .topbar,
  body:not(.auth-required).sidebar-collapsed .topbar {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: var(--mobile-topbar-offset) !important;
    min-height: var(--mobile-topbar-offset) !important;
    max-height: var(--mobile-topbar-offset) !important;
    padding: var(--mobile-menu-pad-y) var(--mobile-menu-pad-x) !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(74px, 1fr) auto var(--mobile-menu-btn) !important;
    grid-template-rows: var(--mobile-menu-btn) var(--mobile-menu-row) !important;
    grid-template-areas: "brand actions toggle" "nav nav nav" !important;
    align-items: center !important;
    justify-items: stretch !important;
    gap: var(--mobile-menu-row-gap) var(--mobile-menu-gap) !important;
    overflow: hidden !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    transition:
      height var(--sidebar-motion),
      min-height var(--sidebar-motion),
      max-height var(--sidebar-motion),
      padding var(--sidebar-motion),
      gap var(--sidebar-motion),
      background-color 180ms ease,
      /* border-color 与桌面侧栏同一原则:跟几何瞬切,不进软淡组(详见折叠态 .ui-icon 芯片处根因注释)。
         此处底边框宽度恒为 1px、本不会闪,纯属对齐一致性。 */
      border-color var(--sidebar-motion) !important;
  }

  body:not(.auth-required) .brand-block,
  body.sidebar-collapsed:not(.auth-required) .brand-block,
  body:not(.auth-required).sidebar-collapsed .brand-block,
  body:not(.auth-required) .brand-row,
  body.sidebar-collapsed:not(.auth-required) .brand-row,
  body:not(.auth-required).sidebar-collapsed .brand-row {
    display: contents !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  body:not(.auth-required) .brand-text,
  body.sidebar-collapsed:not(.auth-required) .brand-text,
  body:not(.auth-required).sidebar-collapsed .brand-text {
    grid-area: brand !important;
    width: 100% !important;
    min-width: 0 !important;
    height: var(--mobile-menu-btn) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
  }

  body:not(.auth-required) .brand-full,
  body.sidebar-collapsed:not(.auth-required) .brand-full,
  body:not(.auth-required).sidebar-collapsed .brand-full {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  body:not(.auth-required) .brand-short,
  body.sidebar-collapsed:not(.auth-required) .brand-short,
  body:not(.auth-required).sidebar-collapsed .brand-short,
  body:not(.auth-required) .topbar p,
  body.sidebar-collapsed:not(.auth-required) .topbar p,
  body:not(.auth-required).sidebar-collapsed .topbar p {
    display: none !important;
  }

  body:not(.auth-required) .brand-logo-full,
  body.sidebar-collapsed:not(.auth-required) .brand-logo-full,
  body:not(.auth-required).sidebar-collapsed .brand-logo-full {
    width: clamp(78px, 27vw, 104px) !important;
    max-width: clamp(78px, 27vw, 104px) !important;
    max-height: calc(var(--mobile-menu-btn) - 3px) !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  body:not(.auth-required) #sidebarToggleBtn.sidebar-toggle,
  body.sidebar-collapsed:not(.auth-required) #sidebarToggleBtn.sidebar-toggle,
  body:not(.auth-required).sidebar-collapsed #sidebarToggleBtn.sidebar-toggle {
    grid-area: toggle !important;
  }

  body:not(.auth-required) .topbar .top-actions,
  body.sidebar-collapsed:not(.auth-required) .topbar .top-actions,
  body:not(.auth-required).sidebar-collapsed .topbar .top-actions {
    grid-area: actions !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
    height: var(--mobile-menu-btn) !important;
    min-height: var(--mobile-menu-btn) !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    overflow: visible !important;
  }

  body:not(.auth-required) .topbar .module-nav,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-nav,
  body:not(.auth-required).sidebar-collapsed .topbar .module-nav {
    grid-area: nav !important;
    width: 100% !important;
    height: var(--mobile-menu-row) !important;
    min-height: 0 !important;
    max-height: var(--mobile-menu-row) !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    transition:
      height var(--sidebar-motion),
      max-height var(--sidebar-motion),
      opacity 160ms ease,
      transform 160ms ease !important;
  }

  body.sidebar-collapsed:not(.auth-required) .topbar .module-nav,
  body:not(.auth-required).sidebar-collapsed .topbar .module-nav {
    overflow: hidden !important;
    opacity: 0 !important;
    transform: translateY(-4px) !important;
    pointer-events: none !important;
  }

  body:not(.auth-required) .topbar .module-nav::-webkit-scrollbar,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-nav::-webkit-scrollbar,
  body:not(.auth-required).sidebar-collapsed .topbar .module-nav::-webkit-scrollbar {
    display: none !important;
  }

  body:not(.auth-required) .topbar .module-tab,
  body:not(.auth-required) .topbar .module-tab.has-ui-icon,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-tab,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.has-ui-icon,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon,
  body:not(.auth-required) .topbar .icon-button:not(.account-summary),
  body:not(.auth-required) #sidebarToggleBtn.sidebar-toggle {
    width: var(--mobile-menu-btn) !important;
    min-width: var(--mobile-menu-btn) !important;
    max-width: var(--mobile-menu-btn) !important;
    height: var(--mobile-menu-btn) !important;
    min-height: var(--mobile-menu-btn) !important;
    max-height: var(--mobile-menu-btn) !important;
    flex: 0 0 var(--mobile-menu-btn) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    place-items: center !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 0 !important;
    overflow: visible !important;
    font-size: 0 !important;
    color: #31546b !important;
    transition:
      width var(--sidebar-motion),
      height var(--sidebar-motion),
      color 180ms ease,
      transform 180ms ease !important;
  }

  body:not(.auth-required) .topbar .module-tab strong,
  body:not(.auth-required) .topbar .module-tab span:not(.ui-icon),
  body.sidebar-collapsed:not(.auth-required) .topbar .module-tab strong,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-tab span:not(.ui-icon),
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab strong,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab span:not(.ui-icon),
  body:not(.auth-required) .topbar .module-tab::before,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-tab::before,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab::before,
  body:not(.auth-required) .topbar .icon-button .sidebar-toggle-label,
  body:not(.auth-required) #sidebarToggleBtn.sidebar-toggle .sidebar-toggle-label {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
    content: none !important;
  }

  body:not(.auth-required) .topbar .module-tab.has-ui-icon > .ui-icon,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.has-ui-icon > .ui-icon,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon > .ui-icon,
  body:not(.auth-required) .topbar .icon-button:not(.account-summary) > .ui-icon,
  body:not(.auth-required) .topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) > .ui-icon,
  body:not(.auth-required) #sidebarToggleBtn.sidebar-toggle > .ui-icon {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    width: var(--mobile-menu-tile) !important;
    min-width: var(--mobile-menu-tile) !important;
    max-width: var(--mobile-menu-tile) !important;
    height: var(--mobile-menu-tile) !important;
    min-height: var(--mobile-menu-tile) !important;
    max-height: var(--mobile-menu-tile) !important;
    padding: 7px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid var(--sidebar-icon-border, #dbe4ef) !important;
    border-radius: 10px !important;
    background: var(--sidebar-icon-bg, linear-gradient(180deg, #f8fafc, #eef4fb)) !important;
    color: var(--sidebar-icon-color, #31546b) !important;
    display: grid !important;
    place-items: center !important;
    line-height: 0 !important;
    opacity: 1 !important;
    overflow: visible !important;
    box-shadow: var(--sidebar-icon-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.86)) !important;
  }

  body:not(.auth-required) .topbar .module-tab.active,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.active,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab.active {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--accent-strong) !important;
  }

  body:not(.auth-required) .topbar .module-tab.active.has-ui-icon > .ui-icon,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.active.has-ui-icon > .ui-icon,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab.active.has-ui-icon > .ui-icon {
    border-color: var(--sidebar-icon-active-border, rgba(47, 109, 183, 0.3)) !important;
    background: var(--sidebar-icon-active-bg, linear-gradient(180deg, #e3ecf7, #d7e2f3)) !important;
    color: var(--sidebar-icon-active-color, var(--accent-strong)) !important;
    box-shadow: var(--sidebar-icon-active-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.86)) !important;
  }

  body:not(.auth-required) .topbar .module-tab.has-ui-icon > .ui-icon svg,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.has-ui-icon > .ui-icon svg,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon > .ui-icon svg,
  body:not(.auth-required) .topbar .icon-button:not(.account-summary) > .ui-icon svg,
  body:not(.auth-required) .topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) > .ui-icon svg,
  body:not(.auth-required) #sidebarToggleBtn.sidebar-toggle > .ui-icon svg {
    width: var(--mobile-menu-svg) !important;
    min-width: var(--mobile-menu-svg) !important;
    height: var(--mobile-menu-svg) !important;
    min-height: var(--mobile-menu-svg) !important;
    display: block !important;
    margin: auto !important;
    stroke-width: 1.9 !important;
    transform-origin: center center !important;
  }

  body:not(.auth-required) .topbar #accountSummary.account-summary {
    height: var(--mobile-menu-btn) !important;
    min-height: var(--mobile-menu-btn) !important;
    max-height: var(--mobile-menu-btn) !important;
    border-radius: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  body:not(.auth-required) .topbar #accountSummary.account-summary:not(.account-summary-points) {
    width: var(--mobile-menu-btn) !important;
    min-width: var(--mobile-menu-btn) !important;
    max-width: var(--mobile-menu-btn) !important;
    padding: 0 !important;
  }

  body:not(.sidebar-collapsed):not(.auth-required) .topbar #accountSummary.account-summary.account-summary-points {
    width: auto !important;
    min-width: 82px !important;
    max-width: 96px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: max-content !important;
    place-content: center !important;
    align-items: center !important;
    justify-items: center !important;
    column-gap: 5px !important;
  }

  body:not(.sidebar-collapsed):not(.auth-required) .topbar .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;
    white-space: nowrap !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums !important;
  }

  body:not(.sidebar-collapsed):not(.auth-required) .topbar .account-summary.account-summary-points .account-points-icon {
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    display: grid !important;
    place-items: center !important;
    justify-self: center !important;
    align-self: center !important;
  }

  body:not(.sidebar-collapsed):not(.auth-required) .topbar .account-summary.account-summary-points .account-points-icon svg {
    width: 11px !important;
    height: 11px !important;
    min-width: 11px !important;
    min-height: 11px !important;
  }

  body:not(.auth-required) .layout,
  body.sidebar-collapsed:not(.auth-required) .layout,
  body:not(.auth-required).sidebar-collapsed .layout,
  body:not(.auth-required) .module-panel,
  body.sidebar-collapsed:not(.auth-required) .module-panel,
  body:not(.auth-required).sidebar-collapsed .module-panel {
    margin-left: 0 !important;
    margin-top: var(--mobile-topbar-offset) !important;
    transition:
      margin-top var(--sidebar-motion),
      padding var(--sidebar-motion),
      gap var(--sidebar-motion) !important;
  }

  body.theme-dark:not(.auth-required) .topbar .module-tab.has-ui-icon > .ui-icon,
  body.theme-dark.sidebar-collapsed:not(.auth-required) .topbar .module-tab.has-ui-icon > .ui-icon,
  body.theme-dark:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon > .ui-icon,
  body.theme-dark:not(.auth-required) .topbar .icon-button:not(.account-summary) > .ui-icon,
  body.theme-dark:not(.auth-required) #sidebarToggleBtn.sidebar-toggle > .ui-icon {
    border-color: var(--sidebar-icon-border) !important;
    background: var(--sidebar-icon-bg) !important;
    color: var(--sidebar-icon-color) !important;
    box-shadow: var(--sidebar-icon-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.05)) !important;
  }

  body.theme-dark:not(.auth-required) .topbar .module-tab.active.has-ui-icon > .ui-icon,
  body.theme-dark.sidebar-collapsed:not(.auth-required) .topbar .module-tab.active.has-ui-icon > .ui-icon,
  body.theme-dark:not(.auth-required).sidebar-collapsed .topbar .module-tab.active.has-ui-icon > .ui-icon {
    border-color: var(--sidebar-icon-active-border) !important;
    background: var(--sidebar-icon-active-bg) !important;
    color: var(--sidebar-icon-active-color) !important;
    box-shadow: var(--sidebar-icon-active-shadow) !important;
  }
}

/* Final mobile density system: compact controls and lists without browser zoom. */
@media (max-width: 820px) {
  body:not(.auth-required) {
    --mobile-menu-btn: 32px;
    --mobile-menu-tile: 28px;
    --mobile-menu-svg: 14px;
    --mobile-menu-pad-x: 8px;
    --mobile-menu-pad-y: 5px;
    --mobile-menu-gap: 5px;
    --mobile-menu-row-gap: 5px;
    --mobile-control-height: 32px;
    --mobile-control-radius: 9px;
    --mobile-card-pad: 8px;
    --mobile-gap: 6px;
    --mobile-font: 12px;
    --mobile-label-font: 11px;
    --mobile-caption-font: 10.5px;
  }

  body:not(.auth-required) .topbar {
    grid-template-columns: minmax(72px, 1fr) auto var(--mobile-menu-btn) !important;
  }

  body:not(.auth-required) .topbar .top-actions {
    gap: 4px !important;
  }

  body:not(.auth-required) .brand-logo-full,
  body.sidebar-collapsed:not(.auth-required) .brand-logo-full,
  body:not(.auth-required).sidebar-collapsed .brand-logo-full {
    width: clamp(74px, 24vw, 98px) !important;
    max-width: clamp(74px, 24vw, 98px) !important;
  }

  body:not(.sidebar-collapsed):not(.auth-required) .topbar #accountSummary.account-summary.account-summary-points {
    min-width: 74px !important;
    max-width: 88px !important;
    padding: 0 6px !important;
    column-gap: 4px !important;
    font-size: 9.5px !important;
  }

  body:not(.sidebar-collapsed):not(.auth-required) .topbar .account-summary.account-summary-points .account-points-icon {
    width: 15px !important;
    min-width: 15px !important;
    max-width: 15px !important;
    height: 15px !important;
    min-height: 15px !important;
    max-height: 15px !important;
  }

  body:not(.auth-required) .layout,
  body.sidebar-collapsed:not(.auth-required) .layout,
  body:not(.auth-required).sidebar-collapsed .layout,
  body:not(.auth-required) .module-panel,
  body.sidebar-collapsed:not(.auth-required) .module-panel,
  body:not(.auth-required).sidebar-collapsed .module-panel {
    padding: 5px !important;
    gap: 6px !important;
  }

  body:not(.auth-required) .layout > .panel,
  body:not(.auth-required) .layout.media-tool-layout .workbench,
  body:not(.auth-required) .layout.media-tool-layout .monitor {
    padding: 7px !important;
    border-radius: 12px !important;
  }

  body:not(.auth-required) .tab-panel,
  body:not(.auth-required) .tool-panel.active {
    padding: 7px !important;
    gap: 6px !important;
  }

  body:not(.auth-required) .tabs,
  body:not(.auth-required) .tool-mode-tabs,
  body:not(.auth-required) .layout.media-tool-layout .tool-mode-tabs {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    border-radius: 12px 12px 0 0 !important;
  }

  body:not(.auth-required) .tab,
  body:not(.auth-required) .tool-mode-tab {
    min-height: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  body:not(.auth-required) :where(.tool-card, .upload-box, .advanced, .drop-zone):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
    padding: var(--mobile-card-pad) !important;
    margin-bottom: 6px !important;
    border-radius: 11px !important;
  }

  body:not(.auth-required) .upload-box {
    gap: 7px !important;
  }

  body:not(.auth-required) .drop-zone {
    gap: 5px !important;
  }

  body:not(.auth-required) :where(.upload-box strong, .drop-zone strong, .tool-card h2, .advanced summary) {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  body:not(.auth-required) :where(.drop-zone p, .file-summary, .plan-summary-inline, .model-capability-hint, small):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
    font-size: var(--mobile-caption-font) !important;
    line-height: 1.35 !important;
  }

  body:not(.auth-required) .file-summary,
  body:not(.auth-required) .upload-box .file-summary {
    min-height: 30px !important;
    padding: 7px 9px !important;
    border-radius: 10px !important;
  }

  body:not(.auth-required) .form-grid,
  body:not(.auth-required) .quick-options,
  body:not(.auth-required) .advanced .options-grid,
  body:not(.auth-required) .layout.media-tool-layout .quick-options,
  body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid {
    gap: var(--mobile-gap) !important;
  }

  body:not(.auth-required) :where(label, .form-grid label, .quick-options label, .advanced .options-grid label):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
    gap: 4px !important;
    font-size: var(--mobile-label-font) !important;
    line-height: 1.18 !important;
  }

  body:not(.auth-required) :where(select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])):where(:not([data-ui-unmanaged] *)) {
    min-height: var(--mobile-control-height) !important;
    height: var(--mobile-control-height) !important;
    padding: 5px 8px !important;
    border-radius: var(--mobile-control-radius) !important;
    font-size: var(--mobile-font) !important;
    line-height: 1.15 !important;
  }

  body:not(.auth-required) textarea {
    min-height: 86px !important;
    padding: 7px 8px !important;
    border-radius: 10px !important;
    font-size: var(--mobile-font) !important;
    line-height: 1.38 !important;
  }

  body:not(.auth-required) #text-prompts,
  body:not(.auth-required) #image-prompt,
  body:not(.auth-required) #videoPrompt,
  body:not(.auth-required) #audioText,
  body:not(.auth-required) #musicPrompt {
    min-height: 108px !important;
  }

  body:not(.auth-required) :where(button, .button-link, .primary, .secondary, .danger):not([data-ui-compact-control]):not(.module-tab):not(.sidebar-toggle):not(.icon-button):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(.hl-stage):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn):not(.watermark-library-preview):not(.thumb-preview):not(.watermark-card):not(.watermark-layer-select):not(.infinite-card-run):not(.infinite-inline-reference-add):not(.infinite-inline-reference-pick):not(.infinite-inline-prompt-expand):not(.preview-canvas-tool):not(.workflow-media-library-select):not(.ob-rail-step):not(.app-more-id):not(.app-more-item):not(.account-page-row):not(.account-page-stat):not(.account-page-edit):not(.account-page-quick):not(.account-page-tab):not(.account-command-btn):not(.account-content-action):not(.account-resource-card):not(.account-card):not(.account-card-open):not(.account-card-more):not(.account-resource-more):not(.account-mini-item):not(.account-proj-pill):not(.account-page-project-open):not(.account-page-project-more):not(.account-page-projects-more):where(:not([data-ui-unmanaged] *)) {
    min-height: var(--mobile-control-height) !important;
    height: var(--mobile-control-height) !important;
    padding: 0 9px !important;
    border-radius: var(--mobile-control-radius) !important;
    font-size: var(--mobile-font) !important;
    line-height: 1 !important;
    gap: 5px !important;
  }

  body:not(.auth-required) .command-row,
  body:not(.auth-required) .command-row.compact,
  body:not(.auth-required) .tool-result-actions,
  body:not(.auth-required) .modal-tools {
    gap: var(--mobile-gap) !important;
  }

  body:not(.auth-required) .drop-zone .command-row.compact > button,
  body:not(.auth-required) .drop-zone .command-row.compact > .button-link,
  body:not(.auth-required) .command-row > button,
  body:not(.auth-required) .command-row > .button-link {
    min-height: 32px !important;
    height: 32px !important;
  }

  body:not(.auth-required) .advanced {
    margin: 7px 0 !important;
  }

  body:not(.auth-required) .advanced summary {
    min-height: 31px !important;
    height: 31px !important;
    padding: 0 9px !important;
  }

  body:not(.auth-required) .selected-preview {
    gap: 6px !important;
    padding: 6px !important;
    max-height: 152px !important;
  }

  body:not(.auth-required) :where(.selected-thumb, .media-thumb, .workflow-media-library-card, .case-row, .case-select, .task-list-row, .task-row, .job-select, .media-library-card, .favorite-case-card) {
    border-radius: 10px !important;
  }

  body:not(.auth-required) :where(.task-list-row, .task-row, .job-select, .case-select) {
    min-height: 34px !important;
    padding: 7px 8px !important;
    gap: 6px !important;
    font-size: 11px !important;
  }

  body:not(.auth-required) :where(.task-list-row strong, .task-row strong, .job-select strong, .case-select strong) {
    font-size: 11.5px !important;
    line-height: 1.2 !important;
  }

  body:not(.auth-required) :where(.task-list-row small, .task-row small, .job-select small, .case-select small) {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  body:not(.auth-required) .status-grid,
  body:not(.auth-required) .stats-grid,
  body:not(.auth-required) .task-stats-grid {
    gap: 5px !important;
  }

  body:not(.auth-required) :where(.stat-card, .monitor-stat, .stats-grid > div, .task-stats-grid > div) {
    min-height: 40px !important;
    padding: 6px !important;
    border-radius: 9px !important;
  }

  body:not(.auth-required) :where(.stat-card strong, .monitor-stat strong, .stats-grid strong, .stats-grid b, .task-stats-grid strong, .task-stats-grid b) {
    font-size: 15.5px !important;
    line-height: 1.05 !important;
  }

  body:not(.auth-required) :where(.stat-card small, .monitor-stat small, .stats-grid small, .task-stats-grid small) {
    font-size: 9.5px !important;
  }

  body:not(.auth-required) .workflow-media-library-card,
  body:not(.auth-required) .media-library-card,
  body:not(.auth-required) .favorite-case-card {
    padding: 7px !important;
    gap: 6px !important;
  }

  body:not(.auth-required) .workflow-media-library-preview {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: var(--workflow-media-preview-ratio, 1 / 1) !important;
    border-radius: 8px !important;
  }

  body:not(.auth-required) .workflow-media-library-actions button,
  body:not(.auth-required) .case-row > button,
  body:not(.auth-required) .account-usage-tools button {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 8px !important;
    font-size: 10.5px !important;
    border-radius: 8px !important;
  }

  body:not(.auth-required) .mobile-select-sheet {
    border-radius: 16px 16px 0 0 !important;
  }

  body:not(.auth-required) .mobile-select-head {
    padding: 10px 12px 8px !important;
  }

  body:not(.auth-required) .mobile-select-option {
    min-height: 36px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 360px) {
  body:not(.auth-required) {
    --mobile-menu-btn: 30px;
    --mobile-menu-tile: 26px;
    --mobile-menu-svg: 13.5px;
    --mobile-menu-pad-x: 7px;
    --mobile-menu-gap: 4px;
    --mobile-control-height: 30px;
    --mobile-font: 11.5px;
    --mobile-label-font: 10.5px;
    --mobile-caption-font: 10px;
  }

  body:not(.sidebar-collapsed):not(.auth-required) .topbar #accountSummary.account-summary.account-summary-points {
    min-width: 68px !important;
    max-width: 82px !important;
    padding: 0 5px !important;
  }

  body:not(.auth-required) .brand-logo-full,
  body.sidebar-collapsed:not(.auth-required) .brand-logo-full,
  body:not(.auth-required).sidebar-collapsed .brand-logo-full {
    width: clamp(68px, 23vw, 86px) !important;
    max-width: clamp(68px, 23vw, 86px) !important;
  }

  body:not(.auth-required) #text-prompts,
  body:not(.auth-required) #image-prompt,
  body:not(.auth-required) #videoPrompt,
  body:not(.auth-required) #audioText,
  body:not(.auth-required) #musicPrompt {
    min-height: 100px !important;
  }
}

/* Mobile icon centering: the icon tile owns the space; SVGs do not use padding offsets. */
@media (max-width: 820px) {
  body:not(.auth-required) header.topbar .module-tab.has-ui-icon > .ui-icon,
  body.sidebar-collapsed:not(.auth-required) header.topbar .module-tab.has-ui-icon > .ui-icon,
  body:not(.auth-required).sidebar-collapsed header.topbar .module-tab.has-ui-icon > .ui-icon,
  body:not(.auth-required) header.topbar .icon-button.has-ui-icon > .ui-icon,
  body.sidebar-collapsed:not(.auth-required) header.topbar .icon-button.has-ui-icon > .ui-icon,
  body:not(.auth-required).sidebar-collapsed header.topbar .icon-button.has-ui-icon > .ui-icon,
  body:not(.auth-required) header.topbar #accountSummary.account-summary > .ui-icon,
  body.sidebar-collapsed:not(.auth-required) header.topbar #accountSummary.account-summary > .ui-icon,
  body:not(.auth-required).sidebar-collapsed header.topbar #accountSummary.account-summary > .ui-icon,
  body:not(.auth-required) #sidebarToggleBtn.sidebar-toggle.has-ui-icon > .ui-icon,
  body.sidebar-collapsed:not(.auth-required) #sidebarToggleBtn.sidebar-toggle.has-ui-icon > .ui-icon,
  body:not(.auth-required).sidebar-collapsed #sidebarToggleBtn.sidebar-toggle.has-ui-icon > .ui-icon {
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    place-content: center !important;
    align-items: center !important;
    justify-items: center !important;
    line-height: 0 !important;
    text-align: center !important;
  }

  body:not(.auth-required) header.topbar .module-tab.has-ui-icon > .ui-icon svg,
  body.sidebar-collapsed:not(.auth-required) header.topbar .module-tab.has-ui-icon > .ui-icon svg,
  body:not(.auth-required).sidebar-collapsed header.topbar .module-tab.has-ui-icon > .ui-icon svg,
  body:not(.auth-required) header.topbar .icon-button.has-ui-icon > .ui-icon svg,
  body.sidebar-collapsed:not(.auth-required) header.topbar .icon-button.has-ui-icon > .ui-icon svg,
  body:not(.auth-required).sidebar-collapsed header.topbar .icon-button.has-ui-icon > .ui-icon svg,
  body:not(.auth-required) header.topbar #accountSummary.account-summary > .ui-icon svg,
  body.sidebar-collapsed:not(.auth-required) header.topbar #accountSummary.account-summary > .ui-icon svg,
  body:not(.auth-required).sidebar-collapsed header.topbar #accountSummary.account-summary > .ui-icon svg,
  body:not(.auth-required) #sidebarToggleBtn.sidebar-toggle.has-ui-icon > .ui-icon svg,
  body.sidebar-collapsed:not(.auth-required) #sidebarToggleBtn.sidebar-toggle.has-ui-icon > .ui-icon svg,
  body:not(.auth-required).sidebar-collapsed #sidebarToggleBtn.sidebar-toggle.has-ui-icon > .ui-icon svg {
    display: block !important;
    margin: 0 !important;
    position: static !important;
    transform: none !important;
    align-self: center !important;
    justify-self: center !important;
  }

  body:not(.auth-required) header.topbar .account-points-icon,
  body.sidebar-collapsed:not(.auth-required) header.topbar .account-points-icon,
  body:not(.auth-required).sidebar-collapsed header.topbar .account-points-icon {
    display: inline-grid !important;
    place-items: center !important;
    place-content: center !important;
    padding: 0 !important;
    line-height: 0 !important;
  }

  body:not(.auth-required) header.topbar .account-points-icon svg,
  body.sidebar-collapsed:not(.auth-required) header.topbar .account-points-icon svg,
  body:not(.auth-required).sidebar-collapsed header.topbar .account-points-icon svg {
    display: block !important;
    margin: 0 !important;
    transform: none !important;
  }

  body:not(.auth-required) header.topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) > .ui-icon,
  body.sidebar-collapsed:not(.auth-required) header.topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) > .ui-icon,
  body:not(.auth-required).sidebar-collapsed header.topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) > .ui-icon {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
  }

  body:not(.auth-required) header.topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points),
  body.sidebar-collapsed:not(.auth-required) header.topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points),
  body:not(.auth-required).sidebar-collapsed header.topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) {
    gap: 0 !important;
  }

  body:not(.auth-required) header.topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) .account-summary-text,
  body.sidebar-collapsed:not(.auth-required) header.topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) .account-summary-text,
  body:not(.auth-required).sidebar-collapsed header.topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) .account-summary-text {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Mobile tool density overrides for earlier ID-level rules. */
@media (max-width: 820px) {
  body:not(.auth-required) #appLayout :is(select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])):where(:not([data-ui-unmanaged] *)),
  body:not(.auth-required) #textTab > .form-grid:first-of-type input,
  body:not(.auth-required) #imageTab > .form-grid:first-of-type input,
  body:not(.auth-required) #videoToolTab .tool-card > .form-grid:first-of-type input,
  body:not(.auth-required) #speechToolPanel .tool-card > .form-grid:first-of-type input,
  body:not(.auth-required) #musicToolPanel .tool-card > .form-grid:first-of-type input,
  body:not(.auth-required) #appLayout #text-model,
  body:not(.auth-required) #appLayout #image-model,
  body:not(.auth-required) #appLayout #videoToolModel,
  body:not(.auth-required) #appLayout #speechModel,
  body:not(.auth-required) #appLayout #musicModel {
    height: var(--mobile-control-height) !important;
    min-height: var(--mobile-control-height) !important;
    max-height: var(--mobile-control-height) !important;
    padding: 5px 8px !important;
    border-radius: var(--mobile-control-radius) !important;
    font-size: var(--mobile-font) !important;
    line-height: 1.15 !important;
  }

  body:not(.auth-required) #appLayout .command-row > button,
  body:not(.auth-required) #appLayout .command-row > .button-link,
  body:not(.auth-required) #appLayout .command-row.compact > button,
  body:not(.auth-required) #appLayout .command-row.compact > .button-link,
  body:not(.auth-required) #appLayout .drop-zone .command-row.compact > button,
  body:not(.auth-required) #appLayout .drop-zone .command-row.compact > .button-link,
  body:not(.auth-required) #appLayout .command-row button.has-ui-icon,
  body:not(.auth-required) #appLayout .tool-result-actions button.has-ui-icon,
  body:not(.auth-required) #appLayout .monitor-actions button.has-ui-icon {
    height: var(--mobile-control-height) !important;
    min-height: var(--mobile-control-height) !important;
    max-height: var(--mobile-control-height) !important;
    padding: 0 9px !important;
    border-radius: var(--mobile-control-radius) !important;
    font-size: var(--mobile-font) !important;
    line-height: 1 !important;
  }

  body:not(.auth-required) #appLayout .command-row button.has-ui-icon .ui-icon,
  body:not(.auth-required) #appLayout .tool-result-actions button.has-ui-icon .ui-icon,
  body:not(.auth-required) #appLayout .monitor-actions button.has-ui-icon .ui-icon {
    width: 14px !important;
    min-width: 14px !important;
    height: 14px !important;
    min-height: 14px !important;
  }

  body:not(.auth-required) #appLayout .tab-panel,
  body:not(.auth-required) #appLayout .tool-panel.active {
    padding: 7px !important;
  }

  body:not(.auth-required) #appLayout .upload-box,
  body:not(.auth-required) #appLayout .drop-zone,
  body:not(.auth-required) #appLayout .tool-card,
  body:not(.auth-required) #appLayout .advanced {
    padding: 8px !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .command-row > button,
  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .command-row > .button-link,
  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .command-row.compact > button,
  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .command-row.compact > .button-link,
  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .command-row button.has-ui-icon,
  body:not(.auth-required) .layout.media-tool-layout .command-row > button,
  body:not(.auth-required) .layout.media-tool-layout .command-row > .button-link,
  body:not(.auth-required) .layout.media-tool-layout .command-row.compact > button,
  body:not(.auth-required) .layout.media-tool-layout .command-row.compact > .button-link,
  body:not(.auth-required) .layout.media-tool-layout .command-row button.has-ui-icon {
    height: var(--mobile-control-height) !important;
    min-height: var(--mobile-control-height) !important;
    max-height: var(--mobile-control-height) !important;
    padding: 0 9px !important;
    border-radius: var(--mobile-control-radius) !important;
    font-size: var(--mobile-font) !important;
    line-height: 1 !important;
  }
}

/* Mobile advanced settings and secondary dialogs need a denser rhythm than primary forms. */
@media (max-width: 820px) {
  body:not(.auth-required) {
    --mobile-sub-control-height: 30px;
    --mobile-sub-font: 11px;
    --mobile-sub-label-font: 10.5px;
    --mobile-sub-caption-font: 10px;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced,
  body:not(.auth-required) .layout.media-tool-layout .advanced {
    padding: 7px !important;
    margin: 6px 0 !important;
    border-radius: 10px !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced summary,
  body:not(.auth-required) .layout.media-tool-layout .advanced summary {
    min-height: 29px !important;
    height: 29px !important;
    padding: 0 8px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced .options-grid,
  body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px 7px !important;
    margin: 7px 0 2px !important;
    padding: 0 !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced .options-grid label,
  body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid label {
    min-height: 0 !important;
    gap: 3px !important;
    font-size: var(--mobile-sub-label-font) !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced .options-grid input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):where(:not([data-ui-unmanaged] *)),
  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced .options-grid select,
  body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):where(:not([data-ui-unmanaged] *)),
  body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid select {
    height: var(--mobile-sub-control-height) !important;
    min-height: var(--mobile-sub-control-height) !important;
    max-height: var(--mobile-sub-control-height) !important;
    padding: 4px 7px !important;
    border-radius: 8px !important;
    font-size: var(--mobile-sub-font) !important;
    line-height: 1.12 !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced .options-grid input[type="checkbox"],
  body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid input[type="checkbox"],
  body:not(.auth-required) .modal-panel input[type="checkbox"],
  body:not(.auth-required) .account-usage-panel input[type="checkbox"],
  body:not(.auth-required) .workflow-media-library-panel input[type="checkbox"],
  body:not(.auth-required) .canvas-image-edit-panel input[type="checkbox"],
  body:not(.auth-required) .canvas-video-edit-panel input[type="checkbox"] {
    width: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    height: 14px !important;
    min-height: 14px !important;
    max-height: 14px !important;
    border-radius: 4px !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced .options-grid label:has(input[type="checkbox"]),
  body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid label:has(input[type="checkbox"]) {
    min-height: 25px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: var(--mobile-sub-label-font) !important;
  }

  body:not(.auth-required) :is(.modal-panel, .preview-panel, .media-preview-panel, .watermark-panel, .watermark-picker-panel, .workflow-project-panel, .workflow-media-library-panel, .canvas-project-panel, .command-palette-panel, .account-usage-panel, .canvas-image-edit-panel, .canvas-image-angle-panel, .canvas-image-crop-panel, .canvas-image-split-panel, .canvas-image-erase-panel, .canvas-video-edit-panel, .panorama-preview-panel):where(:not([data-ui-unmanaged], [data-ui-unmanaged] *)) {
    padding: 8px !important;
    border-radius: 13px !important;
    gap: 7px !important;
    font-size: var(--mobile-sub-font) !important;
  }

  body:not(.auth-required) :is(.modal-panel, .preview-panel, .media-preview-panel, .watermark-panel, .watermark-picker-panel, .workflow-project-panel, .workflow-media-library-panel, .canvas-project-panel, .command-palette-panel, .account-usage-panel, .canvas-image-edit-panel, .canvas-image-angle-panel, .canvas-image-crop-panel, .canvas-image-split-panel, .canvas-image-erase-panel, .canvas-video-edit-panel, .panorama-preview-panel) :is(h2, h3, strong):where(:not([data-ui-unmanaged], [data-ui-unmanaged] *)) {
    line-height: 1.2 !important;
  }

  body:not(.auth-required) :is(.modal-panel, .workflow-project-panel, .workflow-media-library-panel, .canvas-project-panel, .command-palette-panel, .account-usage-panel, .watermark-panel, .canvas-image-edit-panel, .canvas-image-angle-panel, .canvas-video-edit-panel) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select):where(:not([data-ui-unmanaged], [data-ui-unmanaged] *)) {
    height: var(--mobile-sub-control-height) !important;
    min-height: var(--mobile-sub-control-height) !important;
    max-height: var(--mobile-sub-control-height) !important;
    padding: 4px 7px !important;
    border-radius: 8px !important;
    font-size: var(--mobile-sub-font) !important;
  }

  body:not(.auth-required) :is(.modal-panel, .workflow-project-panel, .workflow-media-library-panel, .canvas-project-panel, .command-palette-panel, .account-usage-panel, .watermark-panel, .canvas-image-edit-panel, .canvas-image-angle-panel, .canvas-video-edit-panel) textarea:where(:not([data-ui-unmanaged], [data-ui-unmanaged] *)) {
    min-height: 72px !important;
    padding: 7px !important;
    border-radius: 9px !important;
    font-size: var(--mobile-sub-font) !important;
    line-height: 1.34 !important;
  }

  body:not(.auth-required) :is(.modal-panel, .workflow-project-panel, .workflow-media-library-panel, .canvas-project-panel, .command-palette-panel, .account-usage-panel, .watermark-panel, .canvas-image-edit-panel, .canvas-image-angle-panel, .canvas-video-edit-panel) :is(button, .button-link, .primary, .secondary, .danger):not(.icon-button):not(.preview-canvas-tool):not(.feed-detail-album-thumb):not(.ob-rail-step):not(.hl-stage):where(:not([data-ui-unmanaged], [data-ui-unmanaged] *)) {
    height: var(--mobile-sub-control-height) !important;
    min-height: var(--mobile-sub-control-height) !important;
    max-height: var(--mobile-sub-control-height) !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    font-size: var(--mobile-sub-font) !important;
    line-height: 1 !important;
  }

  body:not(.auth-required) :is(.workflow-project-tools, .canvas-project-tools, .workflow-media-library-tools, .account-usage-tools, .modal-tools, .watermark-library-actions, .watermark-template-actions) {
    gap: 5px !important;
  }

  body:not(.auth-required) :is(.workflow-media-library-list, .case-list, .favorite-case-list, .media-library-grid, .account-usage-history) {
    gap: 6px !important;
  }

  body:not(.auth-required) :is(.workflow-media-library-card, .case-row, .favorite-case-card, .media-library-card, .account-usage-row) {
    padding: 6px !important;
    gap: 6px !important;
    border-radius: 9px !important;
    font-size: var(--mobile-sub-font) !important;
  }

  body:not(.auth-required) .mobile-select-option {
    min-height: 32px !important;
    padding: 0 9px !important;
    font-size: var(--mobile-sub-font) !important;
  }

  body:not(.auth-required) :is(.canvas-image-angle-panel, .canvas-video-edit-panel, .canvas-image-erase-panel) input[type="range"] {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    padding: 0 !important;
  }

  body:not(.auth-required) :is(.canvas-image-angle-row, .canvas-image-angle-toggle, .canvas-image-erase-tools, .canvas-video-edit-tools) {
    gap: 6px !important;
    font-size: var(--mobile-sub-label-font) !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 360px) {
  body:not(.auth-required) {
    --mobile-sub-control-height: 28px;
    --mobile-sub-font: 10.5px;
    --mobile-sub-label-font: 10px;
    --mobile-sub-caption-font: 9.5px;
  }
}

/* Unified UI scale: same component role, same size across the whole product. */

body:not(.auth-required) {
  --ui-action-height: var(--scale-button-height);
  --ui-content-font: var(--scale-font-body);
  --ui-label-font: var(--scale-font-label);
  --ui-caption-font: var(--scale-font-caption);
  --mobile-control-height: var(--scale-control-height);
  --mobile-sub-control-height: var(--scale-control-height);
  --mobile-font: var(--scale-font-body);
  --mobile-label-font: var(--scale-font-label);
  --mobile-caption-font: var(--scale-font-caption);
  --mobile-sub-font: var(--scale-font-body);
  --mobile-sub-label-font: var(--scale-font-label);
  --mobile-sub-caption-font: var(--scale-font-caption);
  font-size: var(--scale-font-body);
}

body:not(.auth-required) :where(.workbench, .monitor, .tool-card, .upload-box, .drop-zone, .advanced, .modal-panel:where(:not([data-ui-unmanaged])):not(.poser-studio-panel), .preview-panel, .media-preview-panel, .workflow-project-panel, .workflow-media-library-panel, .canvas-project-panel, .command-palette-panel, .account-usage-panel, .canvas-image-edit-panel, .canvas-image-angle-panel, .canvas-image-crop-panel, .canvas-image-split-panel, .canvas-image-erase-panel, .canvas-video-edit-panel, .panorama-preview-panel, .watermark-panel, .watermark-picker-panel):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
  font-size: var(--scale-font-body) !important;
  border-radius: var(--scale-radius-panel) !important;
}

body:not(.auth-required) :where(.workbench, .monitor, .tool-card, .upload-box, .drop-zone, .advanced):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
  padding: var(--scale-panel-padding) !important;
  gap: var(--scale-gap) !important;
}

body:not(.auth-required) :where(.modal-panel:where(:not([data-ui-unmanaged])):not(.poser-studio-panel), .preview-panel, .media-preview-panel, .workflow-project-panel, .workflow-media-library-panel, .canvas-project-panel, .command-palette-panel, .account-usage-panel, .canvas-image-edit-panel, .canvas-image-angle-panel, .canvas-image-crop-panel, .canvas-image-split-panel, .canvas-image-erase-panel, .canvas-video-edit-panel, .panorama-preview-panel, .watermark-panel, .watermark-picker-panel):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
  padding: var(--scale-panel-padding) !important;
  gap: var(--scale-gap) !important;
}

body:not(.auth-required) :where(.tool-page-head, .monitor-header, .modal-head, .workflow-toolbar, .infinite-canvas-toolbar, .workflow-project-tools, .canvas-project-tools, .workflow-media-library-tools, .account-usage-tools, .modal-tools, .watermark-editor-toolbar, .watermark-library-actions, .canvas-editor-toolbar):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
  min-height: var(--scale-toolbar-height) !important;
  gap: var(--scale-gap) !important;
}

body:not(.auth-required) :where(h2, .tool-page-head h2, .monitor-title h2, .modal-head h2, .account-usage-panel h2, .command-palette-panel h2, .workflow-inspector h3, .canvas-inspector h3, .text-chat-brand strong):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
  font-size: var(--scale-font-title) !important;
  line-height: 1.22 !important;
}

body:not(.auth-required) :where(h3, summary, .section-title, .field-title, .drop-zone strong, .upload-box strong, .monitor-title strong, .task-list-row strong, .case-info strong, .favorite-case-card strong, .media-library-card strong, .workflow-node-title, .canvas-node-title):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
  font-size: var(--scale-font-section) !important;
  line-height: 1.22 !important;
}

body:not(.auth-required) :where(label, .field-label, .mini-label, .task-meta-label, .setting-label, .option-label, .form-row label, .options-grid label):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
  font-size: var(--scale-font-label) !important;
  line-height: 1.2 !important;
}

body:not(.auth-required) :where(p, small, .muted, .hint, .subtle, .help-text, .drop-zone p, .upload-box p, .task-meta, .case-meta, .file-summary, .plan-summary-inline, .media-meta, .workflow-node-subtitle, .canvas-node-subtitle, .account-usage-row small):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
  font-size: var(--scale-font-caption) !important;
  line-height: 1.28 !important;
}

body:not(.auth-required) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select):where(:not([data-ui-unmanaged] *)) {
  min-height: var(--scale-control-height) !important;
  height: var(--scale-control-height) !important;
  border-radius: var(--scale-radius-control) !important;
  font-size: var(--scale-font-body) !important;
  line-height: 1.15 !important;
  padding: 0 8px !important;
}

body:not(.auth-required) :where(textarea):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
  border-radius: var(--scale-radius-control) !important;
  font-size: var(--scale-font-body) !important;
  line-height: 1.36 !important;
  padding: 8px !important;
}

body:not(.auth-required) :where(button, .button-link, .primary, .secondary, .danger, .ghost-button):not([data-ui-compact-control]):not(.module-tab):not(.sidebar-toggle):not(.icon-button):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(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn):not(.watermark-library-preview):not(.thumb-preview):not(.watermark-card):not(.watermark-layer-select):not(.infinite-card-run):not(.infinite-inline-reference-add):not(.infinite-inline-reference-pick):not(.infinite-inline-prompt-expand):not(.preview-canvas-tool):not(.workflow-media-library-select):not(.app-more-id):not(.app-more-item):not(.account-page-row):not(.account-page-stat):not(.account-page-edit):not(.account-page-quick):not(.account-page-tab):not(.account-command-btn):not(.account-content-action):not(.account-resource-card):not(.account-card):not(.account-card-open):not(.account-card-more):not(.account-resource-more):not(.account-mini-item):not(.account-proj-pill):not(.account-page-project-open):not(.account-page-project-more):not(.account-page-projects-more):not(.ob-rail-step):not(.hl-stage):where(:not([data-ui-unmanaged] *)) {
  min-height: var(--scale-button-height) !important;
  height: var(--scale-button-height) !important;
  border-radius: var(--scale-radius-control) !important;
  font-size: var(--scale-font-body) !important;
  line-height: 1 !important;
  padding: 0 9px !important;
}

body:not(.auth-required) :where(.task-list-row, .task-row, .job-select, .case-select, .case-row, .favorite-case-card, .media-library-card, .workflow-media-library-card, .account-usage-row, .mobile-select-option):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
  min-height: var(--scale-row-height) !important;
  border-radius: var(--scale-radius-control) !important;
  padding: var(--scale-card-padding) !important;
  gap: var(--scale-gap) !important;
  font-size: var(--scale-font-body) !important;
}

body:not(.auth-required) :where(.result-stats .stat, .usage-card, .summary-card, .metric-card, .account-usage-stat):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
  min-height: var(--scale-row-height) !important;
  padding: var(--scale-card-padding) !important;
  border-radius: var(--scale-radius-control) !important;
}

body:not(.auth-required) :where(.result-stats .stat strong, .usage-card strong, .summary-card strong, .metric-card strong, .account-usage-stat strong):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
  font-size: calc(var(--scale-font-title) + 1px) !important;
  line-height: 1.12 !important;
}

body:not(.auth-required) :where(input[type="checkbox"]) {
  width: 14px !important;
  min-width: 14px !important;
  height: 14px !important;
  min-height: 14px !important;
  border-radius: 4px !important;
}

@media (max-width: 820px) {
  :root {
    --scale-font-body: 10.8px;
    --scale-font-label: 10px;
    --scale-font-caption: 9.3px;
    --scale-font-title: 13.5px;
    --scale-font-section: 11.5px;
    --scale-control-height: 28px;
    --scale-button-height: 28px;
    --scale-toolbar-height: 30px;
    --scale-row-height: 31px;
    --scale-panel-padding: 8px;
    --scale-card-padding: 6px;
    --scale-gap: 6px;
    --scale-radius-panel: 11px;
    --scale-radius-control: 8px;
  }

  body:not(.auth-required) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select):where(:not([data-ui-unmanaged] *)) {
    padding: 0 7px !important;
  }

  body:not(.auth-required) :where(button, .button-link, .primary, .secondary, .danger, .ghost-button):not([data-ui-compact-control]):not(.module-tab):not(.sidebar-toggle):not(.icon-button):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(.hl-stage):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn):not(.watermark-library-preview):not(.thumb-preview):not(.watermark-card):not(.watermark-layer-select):not(.infinite-card-run):not(.infinite-inline-reference-add):not(.infinite-inline-reference-pick):not(.infinite-inline-prompt-expand):not(.preview-canvas-tool):not(.workflow-media-library-select):not(.ob-rail-step):not(.app-more-id):not(.app-more-item):not(.account-page-row):not(.account-page-stat):not(.account-page-edit):not(.account-page-quick):not(.account-page-tab):not(.account-command-btn):not(.account-content-action):not(.account-resource-card):not(.account-card):not(.account-card-open):not(.account-card-more):not(.account-resource-more):not(.account-mini-item):not(.account-proj-pill):not(.account-page-project-open):not(.account-page-project-more):not(.account-page-projects-more):where(:not([data-ui-unmanaged] *)) {
    padding: 0 8px !important;
  }
}

@media (max-width: 360px) {
  :root {
    --scale-font-body: 10.2px;
    --scale-font-label: 9.6px;
    --scale-font-caption: 9px;
    --scale-font-title: 13px;
    --scale-font-section: 11px;
    --scale-control-height: 27px;
    --scale-button-height: 27px;
    --scale-row-height: 30px;
    --scale-panel-padding: 7px;
    --scale-gap: 5px;
  }
}

/* Final high-specificity scale lock for legacy mobile selectors. */
@media (max-width: 820px) {
  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .quick-options :is(select, input),
  body:not(.auth-required) .layout.media-tool-layout .quick-options :is(select, input),
  body:not(.auth-required) .layout.media-tool-layout #videoToolTab .quick-options :is(select, input),
  body:not(.auth-required) .layout.media-tool-layout #audioToolTab .quick-options :is(select, input),
  body:not(.auth-required) .layout.media-tool-layout #audioToolTab .music-options :is(select, input),
  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced .options-grid :is(select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])):where(:not([data-ui-unmanaged] *)),
  body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid :is(select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])):where(:not([data-ui-unmanaged] *)) {
    min-height: var(--scale-control-height) !important;
    height: var(--scale-control-height) !important;
    max-height: var(--scale-control-height) !important;
    padding: 0 7px !important;
    border-radius: var(--scale-radius-control) !important;
    font-size: var(--scale-font-body) !important;
    line-height: 1.15 !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced summary,
  body:not(.auth-required) .layout.media-tool-layout .advanced summary,
  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .workbench > .tabs .tab,
  body:not(.auth-required) .layout.media-tool-layout .tool-page-head {
    min-height: var(--scale-toolbar-height) !important;
    height: auto !important;
    padding: 6px 8px !important;
    border-radius: var(--scale-radius-control) !important;
    font-size: var(--scale-font-body) !important;
    line-height: 1.15 !important;
  }

  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced .options-grid label,
  body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid label,
  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .quick-options label,
  body:not(.auth-required) .layout.media-tool-layout .quick-options label {
    font-size: var(--scale-font-label) !important;
    line-height: 1.18 !important;
    gap: 4px !important;
  }

  body:not(.auth-required) .mobile-select-option {
    min-height: var(--scale-row-height) !important;
    padding: 0 8px !important;
    border-radius: var(--scale-radius-control) !important;
    font-size: var(--scale-font-body) !important;
  }
}

/* Upload picker and compact form rhythm. The empty summary is the file picker. */
body:not(.auth-required) :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone {
  padding: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  gap: 0 !important;
}

body:not(.auth-required) :is(#chooseTextRefsBtn, #chooseMainImagesBtn, #chooseSharedRefsBtn, #chooseVideoRefsBtn, #chooseMusicAudioBtn)[hidden] {
  display: none !important;
}

body:not(.auth-required) .upload-zone-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 26px !important;
  width: 100% !important;
}

body:not(.auth-required) .upload-zone-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body:not(.auth-required) .upload-clear-btn:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .upload-zone-actions > button:where(:not([data-ui-unmanaged] *)) {
  min-height: 24px !important;
  height: 24px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  font-size: var(--scale-font-caption) !important;
  line-height: 1 !important;
}

body:not(.auth-required) .file-summary-picker {
  display: flex !important;
  align-items: center !important;
  min-height: 40px !important;
  padding: 8px 10px !important;
  cursor: pointer !important;
  border-style: dashed !important;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease !important;
}

body:not(.auth-required) .file-summary-picker:hover,
body:not(.auth-required) .file-summary-picker:focus-visible,
body:not(.auth-required) .file-summary-picker.drag-over {
  border-color: rgba(47, 109, 183, 0.7) !important;
  background: rgba(234, 242, 251, 0.9) !important;
  box-shadow: 0 0 0 2px rgba(47, 109, 183, 0.08) !important;
  outline: none !important;
}

body.theme-dark:not(.auth-required) .file-summary-picker:hover,
body.theme-dark:not(.auth-required) .file-summary-picker:focus-visible,
body.theme-dark:not(.auth-required) .file-summary-picker.drag-over {
  background: rgba(47, 109, 183, 0.18) !important;
  box-shadow: 0 0 0 2px rgba(90, 166, 232, 0.12) !important;
}

body:not(.auth-required) :is(#text-prompts, #image-prompt, #videoPrompt) {
  min-height: 96px !important;
  height: 108px;
}

body:not(.auth-required) :is(#audioText, #musicPrompt, #videoNegativePrompt) {
  min-height: 68px !important;
  height: 78px;
}

body:not(.auth-required) details.advanced {
  width: 100% !important;
  max-width: 100% !important;
  margin: 8px 0 !important;
  padding: 0 !important;
  border: 1px solid var(--advanced-border, #dce6ef) !important;
  border-radius: 12px !important;
  background: var(--advanced-bg, #f8fbfd) !important;
  box-shadow: var(--advanced-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.72)) !important;
  overflow: hidden !important;
}

body:not(.auth-required) details.advanced[open] {
  padding: 7px !important;
  background: var(--advanced-open-bg, #ffffff) !important;
}

body:not(.auth-required) details.advanced summary,
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced summary,
body:not(.auth-required) .layout.media-tool-layout .advanced summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 30px !important;
  height: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: var(--advanced-summary-bg, #ffffff) !important;
  color: var(--advanced-summary-color, #344054) !important;
  box-shadow: var(--advanced-summary-shadow, 0 1px 2px rgba(16, 24, 40, 0.03)) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  list-style: none !important;
  cursor: pointer !important;
  user-select: none !important;
  box-sizing: border-box !important;
}

body:not(.auth-required) details.advanced[open] summary {
  margin: -7px -7px 7px !important;
  width: calc(100% + 14px) !important;
  border-bottom: 1px solid var(--advanced-border, #dce6ef) !important;
  border-radius: 11px 11px 0 0 !important;
  background: var(--advanced-summary-open-bg, #f9fafc) !important;
  box-shadow: none !important;
}

body:not(.auth-required) details.advanced summary::-webkit-details-marker {
  display: none !important;
}

body:not(.auth-required) details.advanced summary::marker {
  content: "" !important;
}

body:not(.auth-required) details.advanced summary::after {
  content: "" !important;
  flex: 0 0 7px !important;
  width: 7px !important;
  height: 7px !important;
  border-right: 1.5px solid var(--advanced-arrow, #64748b) !important;
  border-bottom: 1.5px solid var(--advanced-arrow, #64748b) !important;
  transform: rotate(45deg) translateY(-2px) !important;
  transition: transform 0.14s ease !important;
}

body:not(.auth-required) details.advanced[open] summary::after {
  transform: rotate(225deg) translate(-1px, -1px) !important;
}

/* 「高级参数」闭合态可点击辨识度:卡片式标题条 */
body:not(.auth-required) details.advanced:not([open]) > summary {
  background: var(--advanced-summary-bg, #ffffff) !important;
  color: var(--advanced-summary-color, #344054) !important;
}

body:not(.auth-required) details.advanced:not([open]) > summary:hover {
  color: var(--advanced-summary-hover-color, #255a9c) !important;
  background: var(--advanced-summary-hover-bg, #f3f8fd) !important;
}

/* 暗色镜像:上两条带 !important */
body.theme-dark:not(.auth-required) details.advanced {
  border-color: var(--advanced-border) !important;
  background: var(--advanced-bg) !important;
  box-shadow: var(--advanced-shadow) !important;
}

body.theme-dark:not(.auth-required) details.advanced[open] {
  background: var(--advanced-open-bg) !important;
}

body.theme-dark:not(.auth-required) details.advanced:not([open]) > summary {
  background: var(--advanced-summary-bg) !important;
  color: var(--advanced-summary-color) !important;
}

body.theme-dark:not(.auth-required) details.advanced:not([open]) > summary:hover {
  background: var(--advanced-summary-hover-bg) !important;
  color: var(--advanced-summary-hover-color) !important;
}

body.theme-dark:not(.auth-required) details.advanced[open] summary {
  border-bottom-color: var(--advanced-border) !important;
  background: var(--advanced-summary-open-bg) !important;
}

body.theme-dark:not(.auth-required) details.advanced summary::after {
  border-color: var(--advanced-arrow) !important;
}

@media (max-width: 820px) {
  body:not(.auth-required) .upload-box {
    gap: 6px !important;
    padding: 8px !important;
  }

  body:not(.auth-required) .upload-zone-head {
    min-height: 22px !important;
  }

  body:not(.auth-required) .upload-clear-btn,
  body:not(.auth-required) .upload-zone-actions > button {
    min-height: 22px !important;
    height: 22px !important;
    padding: 0 7px !important;
  }

  body:not(.auth-required) .file-summary-picker {
    min-height: 36px !important;
    padding: 7px 9px !important;
  }

  body:not(.auth-required) :is(#text-prompts, #image-prompt, #videoPrompt) {
    min-height: 78px !important;
    height: 92px;
  }

  body:not(.auth-required) :is(#audioText, #musicPrompt, #videoNegativePrompt) {
    min-height: 58px !important;
    height: 66px;
  }

  body:not(.auth-required) details.advanced summary,
  body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced summary,
  body:not(.auth-required) .layout.media-tool-layout .advanced summary {
    min-height: 18px !important;
    height: 18px !important;
    padding: 0 7px !important;
    font-size: var(--scale-font-caption) !important;
  }
}

@media (max-width: 360px) {
  body:not(.auth-required) .upload-box {
    padding: 7px !important;
  }

  body:not(.auth-required) .file-summary-picker {
    min-height: 34px !important;
    padding: 6px 8px !important;
  }

  body:not(.auth-required) :is(#text-prompts, #image-prompt, #videoPrompt) {
    min-height: 72px !important;
    height: 84px;
  }
}

/* Hard lock for upload picker density after legacy ID-level mobile rules. */
body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone).drop-zone,
body:not(.auth-required) .layout.media-tool-layout #videoToolTab #videoRefDropZone.drop-zone {
  padding: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:not(.auth-required) #appLayout :is(#clearTextRefsBtn, #clearMainImagesBtn, #clearSharedRefsBtn).upload-clear-btn,
body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone) .ref-lib-btn,
body:not(.auth-required) #appLayout #chooseMainFolderBtn,
body:not(.auth-required) .layout.media-tool-layout #videoToolTab #videoRefDropZone .ref-lib-btn,
body:not(.auth-required) .layout.media-tool-layout #videoToolTab #clearVideoRefsBtn.upload-clear-btn {
  min-height: 24px !important;
  height: 24px !important;
  max-height: 24px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  font-size: var(--scale-font-caption) !important;
  line-height: 1 !important;
}

body:not(.auth-required) #appLayout :is(#textFileSummary, #fileSummary, #sharedFileSummary).file-summary-picker,
body:not(.auth-required) .layout.media-tool-layout #videoToolTab #videoFileSummary.file-summary-picker {
  min-height: 40px !important;
  padding: 8px 10px !important;
}

body:not(.auth-required) #appLayout #textTab #text-prompts,
body:not(.auth-required) #appLayout #imageTab #image-prompt,
body:not(.auth-required) .layout.media-tool-layout #videoToolTab #videoPrompt {
  min-height: 86px !important;
  height: 98px;
}

body:not(.auth-required) .layout.media-tool-layout #videoToolTab #videoNegativePrompt,
body:not(.auth-required) .layout.media-tool-layout #audioToolTab #audioText,
body:not(.auth-required) .layout.media-tool-layout #audioToolTab #musicPrompt {
  min-height: 58px !important;
  height: 68px;
}

body:not(.auth-required) #appLayout :is(#textTab, #imageTab) > details.advanced,
body:not(.auth-required) .layout.media-tool-layout :is(#videoToolTab, #audioToolTab) details.advanced {
  padding: 0 !important;
  margin: 8px 0 !important;
}

body:not(.auth-required) #appLayout :is(#textTab, #imageTab) > details.advanced[open],
body:not(.auth-required) .layout.media-tool-layout :is(#videoToolTab, #audioToolTab) details.advanced[open] {
  padding: 7px !important;
}

body:not(.auth-required) #appLayout :is(#textTab, #imageTab) > details.advanced summary,
body:not(.auth-required) .layout.media-tool-layout :is(#videoToolTab, #audioToolTab) details.advanced summary {
  min-height: 30px !important;
  height: 30px !important;
  max-height: 30px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

@media (max-width: 820px) {
  body:not(.auth-required) #appLayout :is(#clearTextRefsBtn, #clearMainImagesBtn, #clearSharedRefsBtn).upload-clear-btn,
  body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone) .ref-lib-btn,
  body:not(.auth-required) #appLayout #chooseMainFolderBtn,
  body:not(.auth-required) .layout.media-tool-layout #videoToolTab #videoRefDropZone .ref-lib-btn,
  body:not(.auth-required) .layout.media-tool-layout #videoToolTab #clearVideoRefsBtn.upload-clear-btn {
    min-height: 22px !important;
    height: 22px !important;
    max-height: 22px !important;
    padding: 0 7px !important;
  }

  body:not(.auth-required) #appLayout :is(#textFileSummary, #fileSummary, #sharedFileSummary).file-summary-picker,
  body:not(.auth-required) .layout.media-tool-layout #videoToolTab #videoFileSummary.file-summary-picker {
    min-height: 36px !important;
    padding: 7px 9px !important;
  }

  body:not(.auth-required) #appLayout #textTab #text-prompts,
  body:not(.auth-required) #appLayout #imageTab #image-prompt,
  body:not(.auth-required) .layout.media-tool-layout #videoToolTab #videoPrompt {
    min-height: 72px !important;
    height: 86px;
  }

  body:not(.auth-required) .layout.media-tool-layout #videoToolTab #videoNegativePrompt,
  body:not(.auth-required) .layout.media-tool-layout #audioToolTab #audioText,
  body:not(.auth-required) .layout.media-tool-layout #audioToolTab #musicPrompt {
    min-height: 52px !important;
    height: 60px;
  }

  body:not(.auth-required) #appLayout :is(#textTab, #imageTab) > details.advanced summary,
  body:not(.auth-required) .layout.media-tool-layout :is(#videoToolTab, #audioToolTab) details.advanced summary {
    min-height: 28px !important;
    height: 28px !important;
    max-height: 28px !important;
    padding: 0 9px !important;
  }
}

/* Canvas/workflow floating surfaces opt out of the compact form-button lock.
   These menus contain icons, titles and descriptions, so fixed 30px buttons crush the layout. */
body:not(.auth-required) :is(.context-menu, .canvas-add-menu, .canvas-item-menu) button,
body:not(.auth-required) .layout.canvas-layout :is(.context-menu, .canvas-add-menu, .canvas-item-menu) button {
  height: auto !important;
  max-height: none !important;
  min-height: 36px !important;
  align-items: center !important;
  padding: 7px 9px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

body:not(.auth-required) :is(.context-menu, .canvas-add-menu, .canvas-item-menu) button.module-create,
body:not(.auth-required) .layout.canvas-layout :is(.context-menu, .canvas-add-menu, .canvas-item-menu) button.module-create {
  min-height: 46px !important;
  padding: 7px 9px !important;
}

body:not(.auth-required) .context-menu.canvas-add-menu {
  width: min(340px, calc(100vw - 24px)) !important;
  min-width: min(300px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  padding: 8px !important;
  border-radius: 18px !important;
}

body:not(.auth-required) .context-menu.canvas-add-menu .context-label,
body:not(.auth-required) .context-menu.canvas-item-menu .context-label {
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}

body:not(.auth-required) .context-menu.canvas-add-menu .context-copy,
body:not(.auth-required) .context-menu.canvas-item-menu .context-copy {
  gap: 2px !important;
  min-width: 0 !important;
}

body:not(.auth-required) .context-menu.canvas-add-menu .context-title-line,
body:not(.auth-required) .context-menu.canvas-item-menu .context-title-line {
  font-size: 13px !important;
  line-height: 1.2 !important;
  min-width: 0 !important;
}

body:not(.auth-required) .context-menu.canvas-add-menu .context-description,
body:not(.auth-required) .context-menu.canvas-item-menu .context-description {
  display: block !important;
  overflow: hidden !important;
  color: #667085 !important;
  font-size: 11px !important;
  line-height: 1.22 !important;
  white-space: normal !important;
}

body:not(.auth-required) .context-menu.canvas-add-menu .context-color-badge,
body:not(.auth-required) .context-menu.canvas-item-menu .context-color-badge,
body:not(.auth-required) .context-menu.canvas-add-menu .context-icon,
body:not(.auth-required) .context-menu.canvas-item-menu .context-icon {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  border-radius: 9px !important;
}

body:not(.auth-required) .context-menu.canvas-add-menu .context-color-badge svg,
body:not(.auth-required) .context-menu.canvas-item-menu .context-color-badge svg,
body:not(.auth-required) .context-menu.canvas-add-menu .context-icon svg,
body:not(.auth-required) .context-menu.canvas-item-menu .context-icon svg {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 1.6 !important;
}

body:not(.auth-required) .context-menu.canvas-add-menu .context-menu-heading {
  height: auto !important;
  min-height: 0 !important;
  margin: 8px 4px 5px !important;
  padding: 2px 2px 4px !important;
  align-items: center !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

body:not(.auth-required) .context-menu.canvas-add-menu .context-menu-heading:first-child {
  margin-top: 2px !important;
  font-size: 15px !important;
}

/* LiteGraph workflow menus and parameter dialogs keep their own readable sizing. */
.litegraph.litecontextmenu .litemenu-entry,
.litegraph.litecontextmenu .litemenu-entry.submenu,
.litegraph.litecontextmenu .ai-lite-menu-node {
  height: auto !important;
  max-height: none !important;
}

.litegraph.litecontextmenu .ai-lite-menu-node {
  min-height: 40px !important;
  grid-template-columns: 28px minmax(0, 1fr) 12px !important;
  gap: 10px !important;
  padding: 7px 9px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

.litegraph.litecontextmenu .ai-lite-menu-badge,
.workflow-menu-drag-badge {
  width: 28px !important;
  height: 28px !important;
  flex-basis: 28px !important;
  border-radius: 9px !important;
}

.litegraph.litecontextmenu .ai-lite-menu-badge svg,
.workflow-menu-drag-badge svg {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 1.6 !important;
}

.graphdialog input.value,
.graphdialog textarea.value,
.graphdialog input,
.graphdialog textarea,
.graphdialog select {
  height: auto !important;
  max-height: none !important;
  min-height: 34px !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.graphdialog textarea.value,
.graphdialog textarea {
  min-width: min(520px, calc(100vw - 72px)) !important;
  min-height: 220px !important;
}

.graphdialog button,
.graphdialog button.rounded {
  height: auto !important;
  max-height: none !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

/* Inline canvas editors own their control sizing; global mobile button caps only reset overflow. */
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel :is(button, .infinite-card-run, .infinite-inline-reference-pick, .infinite-inline-reference-add):where(:not([data-ui-unmanaged])) {
  max-height: none !important;
}

@media (max-width: 820px) {
  body:not(.auth-required) .context-menu.canvas-add-menu {
    width: min(312px, calc(100vw - 20px)) !important;
    min-width: min(286px, calc(100vw - 20px)) !important;
    padding: 7px !important;
  }

  body:not(.auth-required) .context-menu.canvas-add-menu button.module-create {
    min-height: 42px !important;
  }

  body:not(.auth-required) .context-menu.canvas-add-menu .context-description {
    font-size: 10.5px !important;
  }

  .graphdialog textarea.value,
  .graphdialog textarea {
    min-width: min(420px, calc(100vw - 54px)) !important;
    min-height: 160px !important;
  }
}

/* Specificity lock: global compact button rules use several :not() selectors,
   so context/editor controls need an explicit scoped override. */
body:not(.auth-required) > .context-menu.context-menu button:not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn),
body:not(.auth-required) > .context-menu.context-menu.canvas-add-menu.canvas-add-menu button:not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn),
body:not(.auth-required) > .context-menu.context-menu.canvas-item-menu.canvas-item-menu button:not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn) {
  height: auto !important;
  max-height: none !important;
  min-height: 38px !important;
  padding: 7px 9px !important;
  font-size: 12px !important;
  line-height: 1.24 !important;
}

body:not(.auth-required) > .context-menu.context-menu.canvas-add-menu.canvas-add-menu button.module-create.module-create:not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn),
body:not(.auth-required) > .context-menu.context-menu.canvas-item-menu.canvas-item-menu button.module-create.module-create:not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn) {
  min-height: 46px !important;
  padding: 7px 9px !important;
}

body:not(.auth-required) > .context-menu.context-menu.canvas-add-menu.canvas-add-menu .context-color-badge,
body:not(.auth-required) > .context-menu.context-menu.canvas-add-menu.canvas-add-menu .context-icon,
body:not(.auth-required) > .context-menu.context-menu.canvas-item-menu.canvas-item-menu .context-color-badge,
body:not(.auth-required) > .context-menu.context-menu.canvas-item-menu.canvas-item-menu .context-icon {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
}

body:not(.auth-required) > .graphdialog.graphdialog button:not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn),
body:not(.auth-required) > .litegraph.graphdialog.graphdialog button:not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn) {
  height: auto !important;
  max-height: none !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
}

body:not(.auth-required) #appLayout.layout.canvas-layout .infinite-card-inline-panel.infinite-card-inline-panel button:not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn),
body:not(.auth-required) #appLayout.layout.canvas-layout .infinite-card-inline-panel.infinite-card-inline-panel .infinite-card-run:not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn) {
  max-height: none !important;
}

/* 行内面板底部主动作与原胶囊参数统一为 30px。 */
body:not(.auth-required) #appLayout.layout.canvas-layout .infinite-card-inline-panel.infinite-card-inline-panel .infinite-inline-panel-body > .infinite-card-actions > .infinite-card-run:not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn) {
  height: 30px !important;
  min-height: 30px !important;
}

@media (max-width: 820px) {
body:not(.auth-required) > .context-menu.context-menu.canvas-add-menu.canvas-add-menu button.module-create.module-create:not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn) {
    min-height: 42px !important;
  }
}

/* Unified mobile responsive system.
   Keep the app at native 100% browser zoom while using one compact mobile scale. */
@media (max-width: 820px) {
  body:not(.auth-required) {
    --mobile-topbar-offset: 106px;
    --mobile-shell-x: 10px;
    --mobile-shell-gap: 6px;
    --mobile-icon-btn: 32px;
    --mobile-control-h: 30px;
    --mobile-control-radius: 9px;
    --mobile-card-radius: 12px;
    --mobile-panel-radius: 14px;
    --mobile-pad-xs: 4px;
    --mobile-pad-sm: 6px;
    --mobile-pad-md: 8px;
    --mobile-font: 11.5px;
    --mobile-label: 10.5px;
    --mobile-caption: 10px;
    --mobile-title: 13px;
    --font-ui: var(--mobile-font);
    --font-label: var(--mobile-label);
    --control-height: var(--mobile-control-h);
    --button-height: var(--mobile-control-h);
    --tab-height: 28px;
    font-size: var(--mobile-font);
    overflow-x: hidden;
  }

  body:not(.auth-required) .topbar {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: var(--z-float-toolbar) !important;
    width: 100vw !important;
    height: var(--mobile-topbar-offset) !important;
    min-height: var(--mobile-topbar-offset) !important;
    padding: 7px 10px 6px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-rows: 38px 42px !important;
    grid-template-areas:
      "brand actions toggle"
      "nav nav nav" !important;
    gap: 5px 6px !important;
    align-items: center !important;
    overflow: hidden !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.07) !important;
    transition: none !important;
  }

  body:not(.auth-required) .brand-block {
    grid-area: brand !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  body:not(.auth-required) .brand-row {
    width: 100% !important;
    display: block !important;
    min-width: 0 !important;
  }

  body:not(.auth-required) .brand-text {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  body:not(.auth-required) .brand-text h1 {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    line-height: 1 !important;
  }

  body:not(.auth-required) .brand-logo-full,
  body.sidebar-collapsed:not(.auth-required) .brand-logo-full,
  body:not(.auth-required).sidebar-collapsed .brand-logo-full {
    width: clamp(88px, 31vw, 114px) !important;
    max-width: clamp(88px, 31vw, 114px) !important;
    height: auto !important;
    max-height: 32px !important;
    object-fit: contain !important;
    object-position: left center !important;
    display: block !important;
  }

  body:not(.auth-required) .brand-logo-mark,
  body:not(.auth-required) .brand-short {
    display: none !important;
  }

  body:not(.auth-required) #providerLine {
    display: none !important;
  }

  body:not(.auth-required) .sidebar-toggle {
    grid-area: auto !important;
    position: fixed !important;
    right: 10px !important;
    top: 10px !important;
    z-index: calc(var(--z-float-toolbar) + 2) !important;
    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;
    overflow: hidden !important;
  }

  body:not(.auth-required) .sidebar-toggle svg,
  body:not(.auth-required) .sidebar-toggle .ui-icon {
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
  }

  body:not(.auth-required) .topbar .top-actions {
    grid-area: auto !important;
    position: fixed !important;
    top: 10px !important;
    right: 48px !important;
    z-index: calc(var(--z-float-toolbar) + 1) !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    min-width: 0 !important;
    height: var(--mobile-icon-btn) !important;
    padding: 0 !important;
  }

  body:not(.auth-required) .topbar #accountSummary.account-summary,
  body:not(.auth-required) .topbar .icon-button,
  body:not(.auth-required) .topbar .sidebar-refresh,
  body:not(.auth-required) .topbar .sidebar-theme {
    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;
    overflow: hidden !important;
  }

  body:not(.sidebar-collapsed):not(.auth-required) .topbar #accountSummary.account-summary.account-summary-points {
    width: auto !important;
    min-width: 78px !important;
    max-width: 94px !important;
    padding: 0 8px !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-weight: 760 !important;
    white-space: nowrap !important;
  }

  body:not(.sidebar-collapsed):not(.auth-required) .topbar #accountSummary.account-summary.account-summary-points .account-points-icon {
    width: 15px !important;
    min-width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
  }

  body:not(.auth-required) .topbar .icon-button svg,
  body:not(.auth-required) .topbar .sidebar-refresh svg,
  body:not(.auth-required) .topbar .sidebar-theme svg,
  body:not(.auth-required) .module-tab svg,
  body:not(.auth-required) .module-tab .ui-icon {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    stroke-width: 1.8 !important;
  }

  body:not(.auth-required) .module-nav {
    grid-area: auto !important;
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    top: 55px !important;
    width: auto !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 1px 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
  }

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

  body:not(.auth-required) .module-tab,
  body.sidebar-collapsed:not(.auth-required) .module-tab,
  body:not(.auth-required).sidebar-collapsed .module-tab {
    flex: 0 0 var(--mobile-icon-btn) !important;
    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;
    overflow: hidden !important;
    scroll-snap-align: start !important;
    box-shadow: none !important;
    touch-action: manipulation !important;
    -webkit-touch-callout: none !important;
  }

  body:not(.auth-required) .module-tab[draggable="true"] {
    touch-action: pan-x !important;
  }

  body:not(.auth-required) .module-tab.active {
    box-shadow: inset 3px 0 0 var(--accent) !important;
  }

  body:not(.auth-required) .module-tab.drag-ready,
  body:not(.auth-required) .module-tab.dragging {
    transform: translateY(-1px) scale(1.04) !important;
    box-shadow: 0 8px 22px rgba(47, 109, 183, 0.18) !important;
  }

  body:not(.auth-required) .workflow-template-drag-ghost {
    grid-template-columns: 30px minmax(0, 1fr);
    min-width: 178px;
    padding: 8px 10px;
    border-radius: 13px;
  }

  body:not(.auth-required) .workflow-template-drag-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  body:not(.auth-required) .workflow-template-drag-copy b {
    font-size: 12.5px;
  }

  body:not(.auth-required) .workflow-template-drag-copy small,
  body:not(.auth-required) .app-tooltip-detail {
    font-size: 11px;
  }

  body:not(.auth-required) .app-tooltip {
    padding: 9px 10px;
    border-radius: 12px;
  }

  body:not(.auth-required) .module-tab strong,
  body:not(.auth-required) .module-tab span {
    display: none !important;
  }

  body.sidebar-collapsed:not(.auth-required),
  body:not(.auth-required).sidebar-collapsed {
    --mobile-topbar-offset: 48px;
  }

  body.sidebar-collapsed:not(.auth-required) .topbar,
  body:not(.auth-required).sidebar-collapsed .topbar {
    height: var(--mobile-topbar-offset) !important;
    min-height: var(--mobile-topbar-offset) !important;
    grid-template-rows: 40px !important;
    grid-template-areas: "brand" !important;
    padding: 7px 10px 7px !important;
  }

  body.sidebar-collapsed:not(.auth-required) .topbar .module-nav,
  body:not(.auth-required).sidebar-collapsed .topbar .module-nav,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-tab,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  body:not(.auth-required) .layout,
  body.sidebar-collapsed:not(.auth-required) .layout,
  body:not(.auth-required).sidebar-collapsed .layout,
  body:not(.auth-required) .module-panel {
    margin-left: 0 !important;
    margin-top: var(--mobile-topbar-offset) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: calc(100dvh - var(--mobile-topbar-offset)) !important;
    padding: var(--mobile-shell-x) !important;
    gap: var(--mobile-shell-gap) !important;
    overflow-x: hidden !important;
    transition: none !important;
  }

  body:not(.auth-required) #appLayout[data-module-panel="batchModule"],
  body:not(.auth-required) #appLayout[data-module-panel="videoModule"],
  body:not(.auth-required) #appLayout[data-module-panel="audioModule"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 0 !important;
    height: calc(100dvh - var(--mobile-topbar-offset)) !important;
    min-height: calc(100dvh - var(--mobile-topbar-offset)) !important;
    /* transform 切页(收口:同 responsive/part4/block1,取代原生 scroll-snap) */
    overflow: hidden !important;
    touch-action: pan-y !important;
    scrollbar-width: none !important;
  }

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

  body:not(.auth-required) #appLayout[data-module-panel="batchModule"] > .panel,
  body:not(.auth-required) #appLayout[data-module-panel="videoModule"] > .panel,
  body:not(.auth-required) #appLayout[data-module-panel="audioModule"] > .panel {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 7px !important;
    border-radius: var(--mobile-panel-radius) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    transform: translateX(0) !important;
    transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  }

  body:not(.auth-required) #appLayout[data-module-panel="batchModule"][data-mobile-page="results"] > .panel,
  body:not(.auth-required) #appLayout[data-module-panel="videoModule"][data-mobile-page="results"] > .panel,
  body:not(.auth-required) #appLayout[data-module-panel="audioModule"][data-mobile-page="results"] > .panel {
    transform: translateX(-100%) !important;
  }

  body:not(.auth-required) .tabs,
  body:not(.auth-required) .tool-mode-tabs {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    border-radius: 12px 12px 0 0 !important;
    overflow: hidden !important;
  }

  body:not(.auth-required) .tab,
  body:not(.auth-required) .tool-mode-tab {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 7px !important;
    border-radius: 0 !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  body:not(.auth-required) .tab-panel,
  body:not(.auth-required) .tool-panel.active {
    padding: 7px !important;
    gap: 7px !important;
  }

  body:not(.auth-required) .upload-box,
  body:not(.auth-required) .drop-zone,
  body:not(.auth-required) .advanced,
  body:not(.auth-required) .tool-card {
    padding: 8px !important;
    margin: 0 0 7px !important;
    border-radius: var(--mobile-card-radius) !important;
  }

  body:not(.auth-required) .upload-box {
    gap: 6px !important;
  }

  body:not(.auth-required) .drop-zone {
    display: block !important;
    min-height: 0 !important;
    background: rgba(47, 109, 183, 0.055) !important;
  }

  body:not(.auth-required) .drop-zone > p,
  body:not(.auth-required) .drop-zone > button.secondary[hidden],
  body:not(.auth-required) .drop-zone > button.secondary[aria-hidden="true"] {
    display: none !important;
  }

  body:not(.auth-required) .upload-zone-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    min-height: 24px !important;
    margin: 0 !important;
  }

  body:not(.auth-required) .upload-zone-head strong,
  body:not(.auth-required) .drop-zone strong,
  body:not(.auth-required) .tool-card h2,
  body:not(.auth-required) .advanced summary {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  body:not(.auth-required) .upload-zone-actions {
    display: flex !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
  }

  body:not(.auth-required) .upload-zone-head .upload-clear-btn,
  body:not(.auth-required) .upload-zone-actions .upload-clear-btn,
  body:not(.auth-required) .upload-zone-actions .secondary {
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 7px !important;
    font-size: 10.5px !important;
    border-radius: 8px !important;
  }

  body:not(.auth-required) .file-summary,
  body:not(.auth-required) .file-summary-picker {
    min-height: 34px !important;
    padding: 7px 9px !important;
    border-radius: 11px !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  body:not(.auth-required) .file-summary-picker {
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
  }

  body:not(.auth-required) .file-summary-picker:active {
    transform: scale(0.995);
  }

  body:not(.auth-required) .selected-preview {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 5px !important;
    max-height: 124px !important;
    overflow-y: auto !important;
  }

  body:not(.auth-required) label,
  body:not(.auth-required) .form-grid label,
  body:not(.auth-required) .quick-options label,
  body:not(.auth-required) .advanced .options-grid label,
  body:not(.auth-required) .layout.media-tool-layout label {
    gap: 4px !important;
    font-size: var(--mobile-label) !important;
    line-height: 1.18 !important;
  }

  body:not(.auth-required) .form-grid,
  body:not(.auth-required) .quick-options,
  body:not(.auth-required) .advanced .options-grid,
  body:not(.auth-required) .layout.media-tool-layout .quick-options,
  body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  /* .account-projects-sort 豁免全宽:账号页筛选行要「胶囊+排序」同行,排序定宽(等高在账号页手机块里补回) */
  body:not(.auth-required) select:not(.account-projects-sort),
  body:not(.auth-required) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):where(:not([data-ui-unmanaged] *)),
  body:not(.auth-required) .mobile-select-trigger {
    min-width: 0 !important;
    width: 100% !important;
    min-height: var(--mobile-control-h) !important;
    height: var(--mobile-control-h) !important;
    max-height: var(--mobile-control-h) !important;
    padding: 4px 8px !important;
    border-radius: var(--mobile-control-radius) !important;
    font-size: var(--mobile-font) !important;
    line-height: 1.15 !important;
  }

  body:not(.auth-required) textarea {
    width: 100% !important;
    min-height: 88px !important;
    padding: 7px 8px !important;
    border-radius: 10px !important;
    font-size: var(--mobile-font) !important;
    line-height: 1.36 !important;
  }

  body:not(.auth-required) #text-prompts,
  body:not(.auth-required) #image-prompt,
  body:not(.auth-required) #videoPrompt,
  body:not(.auth-required) #audioText,
  body:not(.auth-required) #musicPrompt {
    min-height: 104px !important;
    height: 104px;
  }

  body:not(.auth-required) button:not([data-ui-compact-control]):not(.module-tab):not(.sidebar-toggle):not(.icon-button):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(.hl-stage):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn):not(.app-more-id):not(.app-more-item):not(.account-page-row):not(.account-page-stat):not(.account-page-edit):not(.account-page-quick):not(.account-page-tab):not(.account-command-btn):not(.account-content-action):not(.account-resource-card):not(.account-card):not(.account-card-open):not(.account-card-more):not(.account-resource-more):not(.account-mini-item):not(.account-proj-pill):not(.account-page-project-open):not(.account-page-project-more):not(.account-page-projects-more):not(.infinite-card-run):not(.infinite-inline-reference-add):not(.infinite-inline-reference-pick):not(.infinite-inline-prompt-expand):not(.preview-canvas-tool):not(.ob-rail-step):where(:not([data-ui-unmanaged] *)),
  body:not(.auth-required) .button-link,
  body:not(.auth-required) .primary:not(.infinite-card-run),
  body:not(.auth-required) .secondary,
  body:not(.auth-required) .danger:not([data-ui-compact-control]):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(.hl-stage):where(:not([data-ui-unmanaged] *)) {
    min-height: var(--mobile-control-h) !important;
    height: var(--mobile-control-h) !important;
    max-height: var(--mobile-control-h) !important;
    padding: 0 9px !important;
    border-radius: var(--mobile-control-radius) !important;
    font-size: var(--mobile-font) !important;
    line-height: 1 !important;
    gap: 5px !important;
  }

  body:not(.auth-required) .command-row,
  body:not(.auth-required) .command-row.compact,
  body:not(.auth-required) .monitor-actions,
  body:not(.auth-required) .tool-result-actions,
  body:not(.auth-required) .modal-tools {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  /* 登录卡的 .account-auth-actions 也是 .command-row,但主按钮要通栏,故从这条
     移动端通用紧凑按钮规范里排除,交回登录卡自己的全宽规则(避免 !important 对抗)。 */
  body:not(.auth-required) .command-row:not(.account-auth-actions) > button,
  body:not(.auth-required) .command-row:not(.account-auth-actions) > .button-link {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 82px !important;
    max-width: 100% !important;
  }

  body:not(.auth-required) .plan-summary-inline {
    flex: 1 1 100% !important;
    min-height: 26px !important;
    padding: 5px 8px !important;
    border-radius: 9px !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }

  body:not(.auth-required) .advanced {
    padding: 0 !important;
    overflow: hidden !important;
  }

  body:not(.auth-required) .advanced summary {
    height: 23px !important;
    min-height: 23px !important;
    max-height: 23px !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 11px !important;
  }

  body:not(.auth-required) .advanced[open] {
    padding: 7px !important;
  }

  body:not(.auth-required) .advanced[open] summary {
    margin: -7px -7px 7px !important;
  }

  body:not(.auth-required) .toggle-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 6px !important;
  }

  body:not(.auth-required) .toggle-row label {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 24px !important;
  }

  body:not(.auth-required) .status-grid,
  body:not(.auth-required) .stats-grid,
  body:not(.auth-required) .task-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  body:not(.auth-required) .stat-card,
  body:not(.auth-required) .monitor-stat,
  body:not(.auth-required) .stats-grid > *,
  body:not(.auth-required) .task-stats-grid > * {
    min-height: 38px !important;
    padding: 6px !important;
    border-radius: 9px !important;
  }

  body:not(.auth-required) .stat-card strong,
  body:not(.auth-required) .monitor-stat strong,
  body:not(.auth-required) .stats-grid strong,
  body:not(.auth-required) .task-stats-grid strong,
  body:not(.auth-required) .stats-grid b,
  body:not(.auth-required) .task-stats-grid b {
    font-size: 14px !important;
    line-height: 1 !important;
  }

  body:not(.auth-required) .task-list-row,
  body:not(.auth-required) .task-row,
  body:not(.auth-required) .job-select,
  body:not(.auth-required) .case-select {
    min-height: 32px !important;
    padding: 6px 7px !important;
    gap: 5px !important;
    border-radius: 9px !important;
    font-size: 10.8px !important;
  }

  body:not(.auth-required) .task-list-row strong,
  body:not(.auth-required) .task-row strong,
  body:not(.auth-required) .job-select strong,
  body:not(.auth-required) .case-select strong {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  body:not(.auth-required) .task-list-row small,
  body:not(.auth-required) .task-row small,
  body:not(.auth-required) .job-select small,
  body:not(.auth-required) .case-select small {
    font-size: 9.8px !important;
    line-height: 1.25 !important;
  }

  /* 不在这里强制 z-index：各弹窗保留自身层级（基础 .modal-mask=12000 / 优先=13000 / 确认=15000）。
     之前这里写 z-index:12000 !important 把所有弹窗压平，确认弹窗(本应 15000)掉到媒体库(12000/12100)同层甚至下面、
     被挡住——这才是根因，去掉即可，无需再叠对抗规则。 */
  body:not(.auth-required) .modal-mask:not([hidden]) {
    padding: calc(var(--mobile-topbar-offset) + 6px) 7px 8px !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow-y: auto !important;
  }

  /* 结果详情/媒体库详情面板在 ≤900px 就是满屏(见 styles.part4.css 的 .feed-detail-panel)，所以它们的居中覆盖必须和
     上面的 topbar-offset push 同在 820 断点全程生效——否则 721~820px 区间面板被顶距推下去、顶部露出底层的库，
     看着就像“详情跑到媒体库下面”。(灵感广场/项目库是 ≤720 才满屏，居中覆盖放在 part4 的 720 块即可；#imagePreviewModal 另有自己的居中规则。) */
  body:not(.auth-required) :is(#feedDetailModal, #mediaLibraryDetailModal).modal-mask:not([hidden]) {
    padding: 8px !important;
    align-items: center !important;
    justify-content: center !important;
    justify-items: center !important;
    overflow: hidden !important;
    overflow-y: hidden !important;
  }

  body:not(.auth-required) #imagePreviewModal.modal-mask:not([hidden]) {
    padding: 14px !important;
    align-items: center !important;
    justify-content: center !important;
    justify-items: center !important;
  }

  body:not(.auth-required) .modal-panel:where(:not([data-ui-unmanaged])):not(.feed-detail-panel):not(.admin-account-detail-panel),
  body:not(.auth-required) .workflow-project-panel,
  body:not(.auth-required) .workflow-media-library-panel,
  body:not(.auth-required) .case-panel,
  body:not(.auth-required) .watermark-panel,
  body:not(.auth-required) .account-panel,
  body:not(.auth-required) .command-palette-panel {
    width: min(430px, calc(100vw - 14px)) !important;
    max-width: calc(100vw - 14px) !important;
    max-height: calc(100dvh - var(--mobile-topbar-offset) - 14px) !important;
    padding: 9px !important;
    border-radius: 14px !important;
    overflow: auto !important;
  }

  body:not(.auth-required) :is(.canvas-image-edit-panel, .canvas-image-crop-panel, .canvas-image-erase-panel, .canvas-image-split-panel, .canvas-cutout-panel):where(:not([data-ui-unmanaged])) {
    width: min(430px, calc(100vw - 14px)) !important;
    max-width: calc(100vw - 14px) !important;
    height: calc(100dvh - var(--mobile-topbar-offset) - 14px) !important;
    max-height: calc(100dvh - var(--mobile-topbar-offset) - 14px) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  body:not(.auth-required) :is(.canvas-image-edit-layout, .canvas-image-crop-layout, .canvas-image-split-body, .canvas-cutout-body) {
    grid-template-columns: 1fr !important;
    height: 100% !important;
    min-height: 0 !important;
    gap: 10px !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body:not(.auth-required) :is(.canvas-image-crop-stage, .canvas-image-expand-stage, .canvas-image-erase-stage, .canvas-image-split-preview, .canvas-image-angle-preview, .canvas-cutout-preview) {
    height: min(46dvh, 320px) !important;
    min-height: min(46dvh, 320px) !important;
    max-height: min(48dvh, 340px) !important;
  }

  body:not(.auth-required) :is(.canvas-image-crop-side, .canvas-image-edit-side, .canvas-cutout-options) {
    max-height: none !important;
    overflow: visible !important;
  }





  /* 必须排除 [hidden]：非画布图片(如参考图)预览时画布工具条是隐藏的，
     若强制 display:flex 会盖掉 [hidden] 的 display:none，留出一个占满 1fr 行的空白盒子，把图片挤到下面。 */
  body:not(.auth-required) #imagePreviewModal .preview-canvas-tools:not([hidden]) {
    flex: 0 0 auto !important;
    display: flex !important;
    gap: 6px !important;
    margin: 0 0 10px !important;
    padding: 6px !important;
    border-radius: 18px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  body:not(.auth-required) #imagePreviewModal .preview-canvas-tools::-webkit-scrollbar {
    display: none !important;
  }

  body:not(.auth-required) #imagePreviewModal .preview-canvas-tool {
    flex: 0 0 126px !important;
    min-height: 48px !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 7px 10px 7px 7px !important;
    border-radius: 14px !important;
  }

  body:not(.auth-required) #imagePreviewModal .preview-canvas-tool-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 11px !important;
  }

  body:not(.auth-required) #imagePreviewModal .preview-canvas-tool-text strong {
    font-size: 12.5px !important;
  }

  body:not(.auth-required) #imagePreviewModal .preview-canvas-tool-text small {
    font-size: 10.5px !important;
  }


  body:not(.auth-required) .modal-head,
  body:not(.auth-required) .workflow-project-panel > .modal-head,
  body:not(.auth-required) .workflow-media-library-panel > .modal-head {
    position: sticky !important;
    top: -9px !important;
    z-index: 3 !important;
    margin: -9px -9px 8px !important;
    padding: 9px !important;
    background: color-mix(in srgb, var(--panel) 94%, transparent) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important;
  }

  body.dark:not(.auth-required) .modal-head,
  body.dark:not(.auth-required) .workflow-project-panel > .modal-head,
  body.dark:not(.auth-required) .workflow-media-library-panel > .modal-head {
    background: color-mix(in srgb, var(--panel) 94%, transparent) !important;
  }

  body:not(.auth-required) .modal-head h2,
  body:not(.auth-required) .workflow-project-panel h2,
  body:not(.auth-required) .workflow-media-library-panel h2 {
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  body:not(.auth-required) .modal-head p,
  body:not(.auth-required) .workflow-project-status,
  body:not(.auth-required) .workflow-media-library-panel p {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body:not(.auth-required) .workflow-project-tools,
  body:not(.auth-required) .workflow-media-library-tools,
  body:not(.auth-required) .case-toolbar,
  body:not(.auth-required) .account-usage-tools {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body:not(.auth-required) .workflow-project-tools input,
  body:not(.auth-required) .workflow-media-library-tools input,
  body:not(.auth-required) .case-toolbar input,
  body:not(.auth-required) .account-usage-tools input {
    grid-column: 1 / -1 !important;
  }

  body:not(.auth-required) .workflow-project-list,
  body:not(.auth-required) .workflow-media-library-list,
  body:not(.auth-required) .favorite-case-list,
  body:not(.auth-required) .case-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  body:not(.auth-required) .workflow-project-card,
  body:not(.auth-required) .workflow-media-library-card,
  body:not(.auth-required) .favorite-case-card,
  body:not(.auth-required) .case-row {
    padding: 7px !important;
    gap: 6px !important;
    border-radius: 11px !important;
  }

  body:not(.auth-required) .workflow-media-library-preview {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: var(--workflow-media-preview-ratio, 1 / 1) !important;
    border-radius: 9px !important;
  }

  body:not(.auth-required) .workflow-media-library-actions,
  body:not(.auth-required) .workflow-project-actions,
  body:not(.auth-required) .case-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  body:not(.auth-required) .workflow-media-library-actions button,
  body:not(.auth-required) .workflow-project-actions button,
  body:not(.auth-required) .case-actions button,
  body:not(.auth-required) .account-usage-tools button {
    min-height: 28px !important;
    height: 28px !important;
    font-size: 10.5px !important;
    padding: 0 7px !important;
  }

  body:not(.auth-required) > .context-menu,
  body:not(.auth-required) .context-menu,
  body:not(.auth-required) .litegraph.litecontextmenu {
    width: min(312px, calc(100vw - 18px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 18px) !important;
    max-height: calc(100dvh - var(--mobile-topbar-offset) - 16px) !important;
    padding: 7px !important;
    border-radius: 14px !important;
    overflow: auto !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18) !important;
  }

  body:not(.auth-required) > .context-menu button,
  body:not(.auth-required) .context-menu button,
  body:not(.auth-required) .context-menu button.module-create,
  body:not(.auth-required) .litegraph.litecontextmenu .ai-lite-menu-node {
    min-height: 38px !important;
    height: auto !important;
    max-height: none !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
  }

  body:not(.auth-required) .context-menu .context-label,
  body:not(.auth-required) .context-menu.canvas-add-menu .context-label,
  body:not(.auth-required) .context-menu.canvas-item-menu .context-label {
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  body:not(.auth-required) .context-menu .context-color-badge,
  body:not(.auth-required) .context-menu .context-icon,
  body:not(.auth-required) .command-palette-list .context-color-badge,
  body:not(.auth-required) .litegraph.litecontextmenu .ai-lite-menu-badge,
  body:not(.auth-required) .workflow-menu-drag-badge {
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    border-radius: 8px !important;
  }

  body:not(.auth-required) .context-menu .context-color-badge svg,
  body:not(.auth-required) .context-menu .context-icon svg,
  body:not(.auth-required) .command-palette-list .context-color-badge svg,
  body:not(.auth-required) .litegraph.litecontextmenu .ai-lite-menu-badge svg,
  body:not(.auth-required) .workflow-menu-drag-badge svg {
    width: 13px !important;
    height: 13px !important;
    stroke-width: 1.65 !important;
  }

  body:not(.auth-required) .context-menu .context-title-line,
  body:not(.auth-required) .context-menu.canvas-add-menu .context-title-line,
  body:not(.auth-required) .context-menu.canvas-item-menu .context-title-line {
    min-width: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
  }

  body:not(.auth-required) .context-menu .context-description,
  body:not(.auth-required) .context-menu.canvas-add-menu .context-description,
  body:not(.auth-required) .context-menu.canvas-item-menu .context-description {
    font-size: 10px !important;
    line-height: 1.2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
  }

  body:not(.auth-required) .context-menu-heading {
    min-height: 22px !important;
    height: auto !important;
    margin: 4px 2px !important;
    padding: 2px 3px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  body:not(.auth-required) .command-palette-panel,
  body:not(.auth-required) .quick-add-panel {
    width: min(430px, calc(100vw - 16px)) !important;
  }

  body:not(.auth-required) .command-palette-list,
  body:not(.auth-required) .quick-add-list {
    gap: 6px !important;
  }

  body:not(.auth-required) .command-palette-item,
  body:not(.auth-required) .quick-add-item {
    min-height: 40px !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
  }

  body:not(.auth-required) #appLayout[data-module-panel="workflowModule"],
  body:not(.auth-required) #appLayout[data-module-panel="canvasModule"] {
    height: calc(100dvh - var(--mobile-topbar-offset)) !important;
    min-height: calc(100dvh - var(--mobile-topbar-offset)) !important;
    padding: 5px !important;
    overflow: hidden !important;
  }

  body:not(.auth-required) .layout.workflow-layout > .workbench,
  body:not(.auth-required) .layout.canvas-layout > .workbench,
  body:not(.auth-required) .workflow-canvas-shell,
  body:not(.auth-required) .infinite-canvas-shell,
  body:not(.auth-required) .module-workflow-panel,
  body:not(.auth-required) .infinite-canvas-panel {
    min-height: 0 !important;
    height: 100% !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  body:not(.auth-required) .workflow-topbar,
  body:not(.auth-required) .canvas-topbar,
  body:not(.auth-required) .workflow-toolbar,
  body:not(.auth-required) .infinite-canvas-toolbar {
    gap: 5px !important;
    padding: 6px !important;
    border-radius: 12px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  body:not(.auth-required) .workflow-topbar::-webkit-scrollbar,
  body:not(.auth-required) .canvas-topbar::-webkit-scrollbar,
  body:not(.auth-required) .workflow-toolbar::-webkit-scrollbar,
  body:not(.auth-required) .infinite-canvas-toolbar::-webkit-scrollbar {
    display: none !important;
  }

  body:not(.auth-required) .workflow-topbar input,
  body:not(.auth-required) .canvas-topbar input {
    min-width: 110px !important;
    max-width: 150px !important;
  }

  body:not(.auth-required) .workflow-toolbar button,
  body:not(.auth-required) .infinite-canvas-toolbar button,
  body:not(.auth-required) .workflow-topbar button,
  body:not(.auth-required) .canvas-topbar button {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
    font-size: 10.5px !important;
    border-radius: 999px !important;
  }

  body:not(.auth-required) .workflow-side-panel,
  body:not(.auth-required) .workflow-inspector,
  body:not(.auth-required) .canvas-side-panel {
    width: min(300px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    border-radius: 14px !important;
  }

  /* 移动端编辑框：作为画布内模块式元素，跟随画布缩放/平移，宽度由 JS 给一个更大的世界尺寸。
     不能再用 position:fixed 做「底部固定停靠」——面板处于带 transform 的
     #infiniteCanvasContent 内，position:fixed 会被祖先 transform 困住、随画布缩放
     被搬到错误位置并溢出（这正是之前手机端编辑框错乱的根因）。
     这里不做反向 scale，也不按屏幕固定；定位/宽度全部交回 JS 的世界坐标。 */
  body:not(.auth-required) .infinite-card-inline-panel,
  body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel {
    max-height: none !important;
    overflow: visible !important;
    border-radius: 16px !important;
  }

  body:not(.auth-required) .infinite-card-inline-panel:has(.infinite-card-run),
  body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) {
    padding: var(--canvas-inline-panel-pad-y, 8px) var(--canvas-inline-panel-pad-x, 9px) var(--canvas-inline-panel-pad-bottom, 7px) !important;
    overflow: visible !important;
    border-width: 3px !important;
    border-top-width: var(--canvas-inline-panel-border-top, 3px) !important;
    border-radius: var(--canvas-inline-unified-radius, 9px) !important;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.14) !important; /* 收小:原 0 72px 150px 投影范围太大(面板随画布缩放,基值要小) */
  }

  body:not(.auth-required) .infinite-card-inline-panel::before {
    display: none !important;
  }

  body:not(.auth-required) .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body,
  body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "refs"
      "prompt"
      "bar";
    gap: var(--canvas-inline-panel-gap, 6px) !important;
    align-items: stretch !important;
  }

  body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-inline-references {
    min-height: var(--canvas-inline-ref-min-h, 36px) !important;
    padding: var(--canvas-inline-ref-pad-y, 4px) var(--canvas-inline-ref-pad-x, 7px) !important;
    border-radius: var(--canvas-inline-unified-radius, 9px) !important;
  }

  body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-references-head {
    top: var(--canvas-inline-ref-head-top, 6px) !important;
    right: var(--canvas-inline-ref-head-right, 10px) !important;
    font-size: var(--canvas-inline-ref-head-font, 13px) !important;
  }

  body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-grid {
    gap: var(--canvas-inline-ref-grid-gap, 7px) !important;
  }

  body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-grid [data-canvas-panel-ref],
  body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-grid .infinite-inline-reference-add {
    flex-basis: var(--canvas-inline-ref-tile, 48px) !important;
    width: var(--canvas-inline-ref-tile, 48px) !important;
    height: var(--canvas-inline-ref-tile, 48px) !important;
    min-height: var(--canvas-inline-ref-tile, 48px) !important;
    border-radius: var(--canvas-inline-unified-radius, 9px) !important;
  }

  body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-grid img,
  body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-grid video {
    width: var(--canvas-inline-ref-tile, 48px) !important;
    height: var(--canvas-inline-ref-tile, 48px) !important;
  }

  body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-grid .infinite-inline-reference-add span {
    font-size: var(--canvas-inline-ref-plus-font, 20px) !important;
  }

  body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > textarea {
    min-height: var(--canvas-inline-text-min-h, 104px) !important;
    max-height: var(--canvas-inline-text-max-h, 320px) !important;
    overflow-y: auto !important;
    padding: var(--canvas-inline-text-pad-y, 7px) var(--canvas-inline-text-pad-x, 9px) calc(var(--canvas-inline-text-pad-bottom, 7px) + var(--canvas-inline-field-h, 32px)) var(--canvas-inline-text-pad-x, 9px) !important;
    border-radius: var(--canvas-inline-unified-radius, 9px) !important;
    font-size: var(--canvas-inline-text-font, 22px) !important;
    line-height: 1.35 !important;
    resize: none !important;
  }

  body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-inline-prompt-expand {
    grid-area: prompt !important;
    z-index: 4 !important;
    align-self: end !important;
    justify-self: end !important;
    width: var(--canvas-inline-field-h, 32px) !important;
    min-width: var(--canvas-inline-field-h, 32px) !important;
    height: var(--canvas-inline-field-h, 32px) !important;
    min-height: var(--canvas-inline-field-h, 32px) !important;
    margin: var(--canvas-inline-text-pad-y, 7px) !important;
    padding: 0 !important;
    border-radius: var(--canvas-inline-unified-radius, 9px) !important;
  }

  body:not(.auth-required) .infinite-inline-panel-body .infinite-card-fields {
    grid-template-columns: none;
  }

  body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-card-fields {
    grid-area: bar !important;
    z-index: 3 !important;
    align-self: center !important;
    justify-self: start !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: var(--canvas-inline-fields-gap, 5px) !important;
    width: max-content !important;
    max-width: calc(100% - var(--canvas-inline-run-slot, 206px)) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-card-actions {
    grid-area: bar !important;
    z-index: 4 !important;
    align-self: center !important;
    justify-self: end !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: var(--canvas-inline-fields-gap, 5px) !important;
    width: max-content !important;
    max-width: calc(100% - var(--canvas-inline-fields-left, 10px)) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field {
    flex: 0 1 auto !important;
    width: var(--canvas-inline-field-w, 148px) !important;
    min-height: var(--canvas-inline-field-h, 32px) !important;
    height: var(--canvas-inline-field-h, 32px) !important;
    padding: 0 !important;
    border-radius: var(--canvas-inline-unified-radius, 9px) !important;
    --hui-control-font: var(--canvas-inline-field-font, 13px);
  }

  body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field:has([data-canvas-config-key="model"]) {
    width: fit-content !important;
    max-width: var(--canvas-inline-field-model-w, 148px) !important;
  }

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

  body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-qr {
    width: var(--canvas-inline-qr-w, 132px) !important;
    min-height: var(--canvas-inline-field-h, 32px) !important;
    height: var(--canvas-inline-field-h, 32px) !important;
    border-radius: var(--canvas-inline-unified-radius, 9px) !important;
  }

  body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field .infinite-card-cs-label,
  body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-qr-trigger {
    font-size: var(--canvas-inline-control-font, 13px) !important;
  }

  body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field input,
  body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field select {
    font-size: var(--canvas-inline-control-font, 13px) !important;
  }

  body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body .infinite-card-run {
    min-width: var(--canvas-inline-run-w, 104px) !important;
    min-height: var(--canvas-inline-run-h, 34px) !important;
    height: var(--canvas-inline-run-h, 34px) !important;
    padding: 0 var(--canvas-inline-run-pad-x, 12px) !important;
    border-radius: var(--canvas-inline-unified-radius, 9px) !important;
    font-size: var(--canvas-inline-run-font, 14px) !important;
  }

  /* 手机端:输入面板层置顶——面板挂在 content(与卡同层),后渲染的卡片会盖住它(用户报修 2026-07-05) */
  body:not(.auth-required) .infinite-canvas-inline-panel-layer {
    z-index: 200 !important;
  }
  body:not(.auth-required) .infinite-canvas-inline-panel-layer .infinite-card-inline-panel {
    z-index: 200;
  }

  body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-card-actions > .infinite-card-run {
    margin: 0 !important;
  }

  body:not(.auth-required) .infinite-inline-reference-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  body:not(.auth-required) .mobile-select-sheet {
    max-height: 58dvh !important;
    border-radius: 14px 14px 0 0 !important;
  }

  body:not(.auth-required) .mobile-select-head {
    padding: 8px 10px 6px !important;
  }

  body:not(.auth-required) .mobile-select-option {
    min-height: 32px !important;
    padding: 0 9px !important;
    border-radius: 9px !important;
    font-size: 11.5px !important;
  }
}

@media (max-width: 360px) {
  body:not(.auth-required) {
    --mobile-topbar-offset: 100px;
    --mobile-icon-btn: 30px;
    --mobile-control-h: 28px;
    --mobile-font: 11px;
    --mobile-label: 10px;
    --mobile-caption: 9.5px;
  }

  body:not(.auth-required) .topbar {
    grid-template-rows: 36px 40px !important;
    gap: 4px 5px !important;
    padding: 6px 9px 5px !important;
  }

  body:not(.auth-required) .brand-block {
    height: 36px !important;
    min-height: 36px !important;
  }

  body:not(.auth-required) .brand-logo-full,
  body.sidebar-collapsed:not(.auth-required) .brand-logo-full,
  body:not(.auth-required).sidebar-collapsed .brand-logo-full {
    width: clamp(78px, 29vw, 96px) !important;
    max-width: clamp(78px, 29vw, 96px) !important;
  }

  body:not(.auth-required) .module-nav {
    height: 40px !important;
    min-height: 40px !important;
  }

  body.sidebar-collapsed:not(.auth-required),
  body:not(.auth-required).sidebar-collapsed {
    --mobile-topbar-offset: 46px;
  }

  body.sidebar-collapsed:not(.auth-required) .topbar,
  body:not(.auth-required).sidebar-collapsed .topbar {
    grid-template-rows: 34px !important;
    height: var(--mobile-topbar-offset) !important;
    min-height: var(--mobile-topbar-offset) !important;
    padding: 6px 9px !important;
  }

  body.sidebar-collapsed:not(.auth-required) .topbar .module-nav,
  body:not(.auth-required).sidebar-collapsed .topbar .module-nav,
  body.sidebar-collapsed:not(.auth-required) .topbar .module-tab,
  body:not(.auth-required).sidebar-collapsed .topbar .module-tab {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
  }

  body:not(.sidebar-collapsed):not(.auth-required) .topbar #accountSummary.account-summary.account-summary-points {
    min-width: 70px !important;
    max-width: 82px !important;
    padding: 0 6px !important;
    font-size: 10.5px !important;
  }

  body:not(.auth-required) #text-prompts,
  body:not(.auth-required) #image-prompt,
  body:not(.auth-required) #videoPrompt,
  body:not(.auth-required) #audioText,
  body:not(.auth-required) #musicPrompt {
    min-height: 94px !important;
    height: 94px;
  }

}

/* Mobile upload/reference zones: the empty summary is the picker, so keep the shell tight. */
@media (max-width: 820px) {
  body:not(.auth-required) #appLayout .upload-box:has(> :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone)) {
    padding: 7px !important;
    gap: 4px !important;
    margin-bottom: 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone) > p,
  body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone) > .compact {
    display: none !important;
  }

  body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone + .file-summary-picker {
    min-height: 30px !important;
    height: auto !important;
    padding: 6px 8px !important;
    margin: 2px 0 0 !important;
    border-radius: 10px !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone + .file-summary-picker.file-summary-empty {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    white-space: normal !important;
  }

  body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone ~ .selected-preview:empty {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone,
  body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone + .file-summary-picker {
    cursor: pointer !important;
  }

  body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone {
    touch-action: manipulation !important;
  }

  body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone .upload-zone-head {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone .upload-zone-head strong {
    font-size: 11.5px !important;
    line-height: 1 !important;
  }

  body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone .upload-zone-actions > button {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
    border-radius: 8px !important;
  }

  body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone:is(.drag-over, :hover) + .file-summary-picker {
    border-color: rgba(47, 109, 183, 0.7) !important;
    background: rgba(234, 242, 251, 0.9) !important;
  }
}

@media (max-width: 360px) {
  body:not(.auth-required) #appLayout .upload-box:has(> :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone)) {
    padding: 6px !important;
    gap: 3px !important;
  }

  body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone .upload-zone-head {
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
  }

  body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone + .file-summary-picker {
    min-height: 28px !important;
    padding: 5px 7px !important;
    font-size: 10px !important;
  }
}