.canvas-project-preview-node {
  position: absolute;
  display: block;
  border-radius: 6px;
  background: var(--node-color, #2f6db7);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
  opacity: 0.9;
}

.canvas-project-preview-empty {
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

/* 无限画布项目库:无真实封面图时的独立占位图标(落在卡片网格底上,干净的空画布观感) */
.canvas-project-cover-glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #a9c2de;
  pointer-events: none;
}

.canvas-project-cover-glyph svg {
  width: 54px;
  height: 38px;
  opacity: 0.92;
}

body.theme-dark:not(.auth-required) .canvas-project-cover-glyph {
  color: rgba(150, 184, 222, 0.5);
}

/* 提示词「@」引用画布内容的候选浮层 */
/* 画布 @ 引用浮层:视觉与键盘契约已与工具页统一(prompt-mention-* 家族,styles.part1.css)。
   容器同时带 canvas-at-mention(外点判定/旧代码兼容)与 prompt-mention-pop(家族样式);
   旧「纵向列表 30px 小图」样式已废,勿加回。 */
.canvas-at-mention.prompt-mention-pop { width: min(320px, calc(100vw - 24px)); }
.canvas-at-mention .canvas-at-mention-ic {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: #eef5ff; color: #2f6db7; font-size: 15px; font-weight: 800;
}
body.theme-dark .canvas-at-mention .canvas-at-mention-ic { background: #1b2740; color: #8fb4e6; }
.canvas-project-main p,
.canvas-project-main small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

/* 统一操作行：等宽按钮，纵向卡片底部对齐，不再挤压换行 */
.workflow-project-actions,
.canvas-project-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: auto;
}

.canvas-project-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workflow-project-actions button,
.canvas-project-actions button {
  min-height: 30px;
  padding: 0 8px;
  border-radius: 9px;
  font-size: 12.5px;
  width: 100%;
}

.workflow-project-card.active {
  border-color: var(--accent);
  background: #f0f8f4;
}

.workflow-project-main {
  min-width: 0;
}

.workflow-project-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.workflow-project-title-row strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-project-current {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #e1edfa;
  color: var(--accent-strong);
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 800;
}

.workflow-project-run {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: #eef5ff;
  color: #245a9a;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 850;
}

.workflow-project-run::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.workflow-project-run.queued,
.workflow-project-run.running {
  background: #fff7df;
  color: #9a5a00;
}

.workflow-project-run.running::before {
  animation: workflowRunDotPulse 1s ease-in-out infinite;
}

.workflow-project-run.completed {
  background: #e1edfa;
  color: var(--accent-strong);
}

.workflow-project-run.failed {
  background: #fee2e2;
  color: #b42318;
}

@keyframes workflowRunDotPulse {
  0%, 100% { transform: scale(0.82); opacity: 0.55; }
  50% { transform: scale(1.18); opacity: 1; }
}

.workflow-project-card p {
  margin: 5px 0 4px;
  color: var(--muted);
  line-height: 1.45;
}

.workflow-project-card small {
  color: #667085;
}

.workflow-project-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.workflow-project-empty {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 18px;
  color: var(--muted);
  background: #fbfcfe;
  overflow-wrap: anywhere;
}

.workflow-project-empty.error {
  border-color: #f2b8ad;
  background: #fff7f5;
  color: #9f1d1d;
}

.command-palette-search {
  width: 100%;
  height: 34px;
  margin: 0 0 8px;
  padding: 0 10px;
  border-radius: 9px;
}

.command-palette-list {
  display: grid;
  gap: 8px;
  max-height: min(500px, calc(100dvh - 170px));
  overflow: auto;
  padding: 0 3px 4px 0;
}

.command-palette-group {
  display: grid;
  gap: 3px;
}

.command-palette-category {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 3px 2px;
  border-bottom: 0;
  color: #667085;
  font-size: 11.5px;
  font-weight: 850;
}

.command-palette-group-items {
  display: grid;
  gap: 2px;
}

.command-palette-item {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  padding: 6px 8px 6px 6px;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
  overflow: hidden;
}

.command-palette-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 999px;
  background: var(--menu-accent, #2f6db7);
  opacity: 0;
}

.command-palette-item:hover,
.command-palette-item.active {
  border-color: color-mix(in srgb, var(--menu-accent, #2f6db7) 24%, #d9e2ee);
  background: color-mix(in srgb, var(--menu-accent, #2f6db7) 7%, #ffffff);
}

.command-palette-item:hover::before,
.command-palette-item.active::before {
  opacity: 1;
}

.command-palette-item-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.command-palette-item-title {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.command-palette-item strong {
  display: block;
  min-width: 0;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-palette-item small {
  display: block;
  min-width: 0;
  margin-top: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-check-panel {
  margin-top: 18px;
}

.workflow-check-panel h2 {
  margin-bottom: 10px;
}

.workflow-check-item {
  display: grid;
  gap: 3px;
  padding: 8px 0;
  border-bottom: 1px solid #edf0f5;
}

.workflow-check-item:last-child {
  border-bottom: 0;
}

.workflow-check-item strong {
  color: #344054;
}

.workflow-check-item.ok strong {
  color: var(--ok);
}

.workflow-check-item.warn strong {
  color: var(--warning);
}

.workflow-check-item.error strong {
  color: var(--danger);
}

@media (max-width: 1180px) {
  .workflow-shell {
    grid-template-columns: minmax(0, 1fr) 250px;
  }

  .workflow-toolbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .workflow-shell {
    grid-template-columns: 1fr;
  }

  .workflow-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .workflow-inspector {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .workflow-stage-wrap {
    min-height: 420px;
  }

  .workflow-actions,
  .workflow-library-filter,
  .workflow-project-tools,
  .workflow-project-card,
  .workflow-project-actions {
    grid-template-columns: 1fr;
  }

  .workflow-project-actions {
    display: grid;
  }
}

@media (max-width: 480px) {
  .module-nav,
  .tabs,
  .topbar .top-actions {
    grid-template-columns: 1fr;
  }
}

/* Professional shell refresh: Linear + Raycast + Figma inspired visual layer. */

html {
  background: var(--bg);
}

/* 暗色令牌挂在 body 上,html 需单独覆盖(否则滚动边缘/留白处露浅底) */
html[data-theme="dark"] {
  background: #0b111d;
  color-scheme: dark;
}

body {
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(47, 109, 183, 0.07), transparent 60%),
    radial-gradient(820px 520px at 92% 0%, rgba(124, 108, 240, 0.06), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(244, 246, 250, 0.92)),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #c3ccd8 transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #c3ccd8;
  background-clip: padding-box;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

.topbar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 252, 0.98));
  border-right-color: var(--border-soft);
  box-shadow: 1px 0 0 rgba(16, 24, 40, 0.02);
  padding: var(--shell-padding);
  gap: var(--shell-gap);
}

.brand-block {
  padding-bottom: 10px;
  border-bottom-color: var(--border-soft);
}

.brand-text h1 {
  font-size: var(--font-title);
  font-weight: 820;
  letter-spacing: 0;
}

.brand-text p,
.monitor-header p,
.workflow-head p {
  color: var(--muted);
}

.sidebar-toggle,
.topbar .sidebar-refresh {
  border-color: var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: #344054;
  box-shadow: 0 1px 1px rgba(16, 24, 40, 0.03);
}

.sidebar-toggle:hover,
.topbar .sidebar-refresh:hover {
  border-color: #b9c3d0;
  background: #f8fafc;
}

.module-nav {
  gap: 6px;
}

.module-tab,
.topbar .module-tab {
  grid-template-columns: var(--nav-icon-size) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: calc(12.5px * var(--ui-density));
  row-gap: 2px;
  min-height: var(--nav-item-height);
  padding: var(--nav-item-padding);
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: none;
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

.module-tab::before,
.topbar .module-tab::before {
  content: "";
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: var(--nav-icon-size);
  height: var(--nav-icon-size);
  align-self: center;
  border: 1px solid #dbe4ef;
  border-radius: 9px;
  background: #f4f7fb;
  color: #344054;
  font-size: 12px;
  font-weight: 840;
  line-height: 1;
}

.module-tab strong,
.topbar .module-tab strong {
  grid-column: 2;
  align-self: end;
  color: #111827;
  font-size: 12px;
  font-weight: 780;
}

.module-tab span,
.topbar .module-tab span {
  grid-column: 2;
  align-self: start;
  color: var(--muted);
  font-size: 10px;
}

.module-tab:hover {
  border-color: #c8d2df;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.05);
}

.module-tab.active {
  border-color: rgba(47, 109, 183, 0.38);
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent), 0 1px 2px rgba(47, 109, 183, 0.05);
}

.module-tab.active::before {
  border-color: rgba(47, 109, 183, 0.25);
  background: #e1edfa;
  color: var(--accent-strong);
}

.module-tab.drag-target {
  border-color: var(--accent);
  background: #e6f0fb;
  box-shadow: inset 3px 0 0 var(--accent), var(--focus-ring);
}

body.sidebar-collapsed .module-tab,
body.sidebar-collapsed .topbar .module-tab {
  grid-template-columns: 1fr;
  min-height: 48px;
  padding: 8px;
}

body.sidebar-collapsed .module-tab::before,
body.sidebar-collapsed .topbar .module-tab::before {
  grid-row: auto;
  width: 38px;
  height: 32px;
  font-size: 12px;
}

body.sidebar-collapsed .module-tab.active {
  box-shadow: inset 0 -3px 0 var(--accent);
}

.panel,
.tool-card,
.model-category-card,
.ark-model-card,
.workflow-sidebar,
.workflow-inspector {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.layout > .panel {
  min-height: calc(100vh - (var(--layout-padding) * 2));
}

.workbench,
.monitor {
  border-radius: var(--radius-lg);
}

.monitor {
  padding: var(--panel-padding);
}

.tabs {
  gap: 3px;
  padding: 5px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-2);
}

.tab {
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  min-height: var(--tab-height);
  padding: var(--tab-padding-y) var(--tab-padding-x);
  font-weight: 720;
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.tab:hover {
  background: #ffffff;
  color: #344054;
}

.tab.active {
  background: #ffffff;
  color: #101828;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), inset 0 -2px 0 var(--accent);
}

.tab-panel {
  padding: var(--panel-padding);
}

label {
  color: #344054;
  font-size: var(--font-label);
  font-weight: 720;
}

input,
select,
textarea {
  min-height: var(--control-height);
  border-color: #d5dce6;
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(16, 24, 40, 0.02);
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

textarea {
  line-height: 1.52;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #bcc7d6;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

input:disabled,
select:disabled,
textarea:disabled,
input.fixed-duration:disabled,
select.fixed-duration:disabled {
  border-color: #dce2eb;
  background: #f4f6f9;
  color: #788496;
}

button,
.button-link {
  min-height: var(--button-height);
  border-color: #d2d9e4;
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: #1d2939;
  box-shadow: 0 1px 1px rgba(16, 24, 40, 0.03);
  font-weight: 680;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

button:hover,
.button-link:hover {
  border-color: #b8c2d0;
  background: #f8fafc;
}

.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(47, 109, 183, 0.18), 0 8px 18px rgba(47, 109, 183, 0.12);
}

.primary:hover {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
}

.secondary,
.job-reuse,
.job-favorite,
.case-reuse {
  border-color: #c8d6ea;
  background: var(--blue-soft);
  color: var(--blue);
}

.secondary:hover,
.job-reuse:hover,
.job-favorite:hover,
.case-reuse:hover {
  border-color: #abc4e4;
  background: #e5f0ff;
}

.danger,
.case-delete {
  border-color: #f2b9b4;
  background: var(--danger-soft);
  color: var(--danger);
}

.danger:hover,
.case-delete:hover {
  border-color: #e99991;
  background: #ffe8e5;
}

.form-grid,
.options-grid,
.quick-options {
  gap: calc(15px * var(--ui-density));
}

.advanced,
.upload-box,
.key-manager,
.model-category-key-manager,
.workflow-dropped-images,
.workflow-node-help,
.workflow-task-estimate,
.empty-row,
.file-summary,
.plan-summary-inline {
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.advanced summary {
  color: #1d2939;
}

.drop-zone {
  border-color: #c8d6e4;
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 252, 0.92));
}

.drop-zone:hover,
.workflow-dropped-images.drag-over {
  border-color: rgba(47, 109, 183, 0.5);
  background: #eaf2fb;
}

/* 媒体覆盖层投放区单独处理:它盖在画布(canvas 画的缩略图)上方,背景必须半透明,
   否则不透明实色会把下面的缩略图整块遮住(拖拽排序时看不见库)。只留半透明淡蓝+蓝边标识投放区。 */
.workflow-media-overlay-zone.drag-over {
  border-color: rgba(47, 109, 183, 0.5);
  background: rgba(47, 109, 183, 0.08);
}

.selected-thumb,
.thumb,
.watermark-library-card,
.watermark-card {
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.monitor-header {
  margin-bottom: 10px;
}

.state-pill {
  border-color: #a9c8e8;
  background: #edf8f2;
  color: var(--ok);
  font-size: 12px;
}

.stats-grid {
  gap: 10px;
}

.stats-grid div {
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.stats-grid span {
  color: #111827;
}

.job-list {
  gap: 8px;
  padding-right: 6px;
}

/* 卡片化后：.job-select 是卡片内透明可点区域(容器边框/选中由 .job-row 提供) */
.job-select {
  min-height: 52px;
  border-radius: var(--radius-sm);
  border-color: transparent;
  background: transparent;
}

.job-reuse,
.job-favorite {
  min-height: 34px;
  border-radius: var(--radius-sm);
}

.job-select:hover {
  border-color: transparent;
  background: transparent;
}

.job-row.selected .job-select {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.results-split {
  gap: 12px;
}

.monitor-body {
  grid-template-columns: minmax(280px, 0.58fr) minmax(200px, 0.42fr);
  gap: 14px;
}

@media (max-width: 1120px) {
  .monitor-body {
    grid-template-columns: 1fr;
  }
}

.job-meta {
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.modal-mask {
  background: rgba(11, 17, 29, 0.52);
  backdrop-filter: blur(8px);
}

.command-palette-mask.command-palette-mask:not([hidden]) {
  display: block;
  padding: 0;
  background: rgba(15, 23, 42, 0.1);
  backdrop-filter: none;
}

.command-palette-mask .command-palette-panel {
  position: absolute;
  left: var(--command-palette-x, 50%);
  top: var(--command-palette-y, 72px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  width: min(420px, calc(100vw - 24px));
  max-height: min(560px, calc(100dvh - 24px));
  margin: 0;
  padding: 10px;
  overflow: hidden;
}

.command-palette-mask:not(.is-anchored) .command-palette-panel {
  transform: translateX(-50%);
}

.modal-panel,
.watermark-panel,
.watermark-picker-panel,
.command-palette-panel,
.workflow-project-panel {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow-popover);
}

.context-menu,
.litegraph.litecontextmenu,
.litegraph.litesearchbox.graphdialog.rounded,
.graphdialog {
  border-color: var(--border-soft) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: var(--shadow-popover) !important;
  color: var(--text) !important;
}

.context-menu {
  padding: 7px;
}

.context-menu-heading,
.command-palette-category {
  color: #475467;
  letter-spacing: 0;
}

.context-menu button,
.litegraph.litecontextmenu .litemenu-entry,
.litegraph.litecontextmenu .litemenu-title {
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
}

.context-menu button:hover,
.litegraph.litecontextmenu .litemenu-entry:hover {
  background: #f2f6fb !important;
}

.context-menu .context-color-badge,
.command-palette-list .context-color-badge,
.workflow-module-icon {
  border-radius: 8px;
}

.command-palette-list {
  gap: 8px;
}

.command-palette-item {
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

.command-palette-item:hover,
.command-palette-item.active {
  background: color-mix(in srgb, var(--menu-accent, #2f6db7) 7%, #ffffff);
}

.text-chat-app {
  gap: 12px;
}

.text-chat-sidebar,
.text-chat-main,
.text-chat-composer,
.text-chat-modelbar,
.text-chat-suggestions button {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.text-chat-composer {
  border-radius: 16px;
}

.text-chat-modelbar button,
.text-chat-modelbar select,
.text-chat-tools button {
  min-height: 34px;
}

.light-result,
.result-box {
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
}

.result-box {
  background: #0f172a;
  color: #dbeafe;
}

.layout.media-tool-layout .tool-page-head {
  border-bottom-color: var(--border-soft);
  background: var(--surface-2);
}

.layout.media-tool-layout .tool-panel.active {
  padding: 18px;
}

.settings-panel > label:first-child,
.settings-panel > .form-grid,
.settings-panel > .options-grid,
.ark-model-panel,
.model-category-card {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.ark-model-panel {
  background: linear-gradient(180deg, #f7fafd, #ffffff);
}

.ark-model-card.active,
.workflow-project-card.active,
.watermark-library-card.selected,
.watermark-card.selected {
  border-color: rgba(47, 109, 183, 0.48);
  background: #eaf2fb;
  box-shadow: var(--focus-ring);
}

.workflow-shell {
  grid-template-columns: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  background: #ffffff;
}

.workflow-main {
  height: 100%;
}

.workflow-toolbar {
  border-bottom-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03);
}

.workflow-toolbar-actions button,
.workflow-toolbar-actions .workflow-dirty-badge {
  min-height: 36px;
}

.workflow-inspector {
  border-left-color: var(--border-soft);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow: none;
}

.workflow-lite-wrap,
.workflow-lite-canvas,
.workflow-stage-wrap {
  background:
    linear-gradient(#e7edf5 1px, transparent 1px),
    linear-gradient(90deg, #e7edf5 1px, transparent 1px),
    linear-gradient(#ced8e6 1px, transparent 1px),
    linear-gradient(90deg, #ced8e6 1px, transparent 1px),
    #fbfcfe;
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
}

.workflow-status-row {
  border-top: 1px solid var(--border-soft);
  background: #ffffff;
}

.workflow-dirty-badge {
  border-radius: 999px;
}

.workflow-minimap {
  border-color: var(--border-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(4px);
}

.workflow-field,
.workflow-check-item,
.workflow-project-card,
.workflow-module-card {
  border-color: var(--border-soft);
}

.workflow-module-card {
  border-radius: var(--radius-md);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

.workflow-module-card:hover {
  border-color: #c2cedc;
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.07);
}

.workflow-check-panel {
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}

.workflow-project-card {
  border-radius: var(--radius-md);
}

.workflow-media-overlay-zone {
  border-radius: var(--radius-md);
}

.workflow-media-overlay-thumb:hover {
  border-color: rgba(47, 109, 183, 0.5);
  background: rgba(47, 109, 183, 0.06);
}

.preview-stage,
.watermark-stage,
.watermark-layer-row,
.watermark-library-card {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
}

.preview-panel,
.watermark-panel {
  background: #ffffff;
}

@media (max-width: 1180px) {
  .workflow-shell {
    grid-template-columns: minmax(0, 1fr) 260px;
  }
}

@media (max-width: 760px) {
  .layout {
    padding: 10px;
    gap: 10px;
  }

  .workflow-shell,
  .workflow-main {
    height: auto;
    min-height: calc(100vh - 20px);
  }

  .workflow-inspector {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
}

/* Local icon pass: decorative SVG icons for a more finished product shell. */
.ui-icon {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: currentColor;
  line-height: 0;
  pointer-events: none;
}

.ui-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

button.has-ui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

button.has-ui-icon .ui-icon {
  width: 15px;
  height: 15px;
  opacity: 0.9;
}

button.primary.has-ui-icon .ui-icon,
button.danger.has-ui-icon .ui-icon {
  opacity: 1;
}

.brand-text {
  position: relative;
  padding-left: 42px;
}

.brand-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(47, 109, 183, 0.22);
  border-radius: 11px;
  background:
    radial-gradient(circle at 28% 26%, rgba(255, 255, 255, 0.95) 0 11%, transparent 12%),
    linear-gradient(135deg, #2f6db7, #2f80ed);
  box-shadow: 0 10px 22px rgba(47, 109, 183, 0.16);
}

.brand-text::after {
  content: "绘";
  position: absolute;
  left: 0;
  top: 1px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
}

.module-tab.has-ui-icon,
.topbar .module-tab.has-ui-icon {
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 11px;
}

.module-tab.has-ui-icon::before,
.topbar .module-tab.has-ui-icon::before {
  content: none;
}

.module-tab.has-ui-icon > .ui-icon,
.topbar .module-tab.has-ui-icon > .ui-icon {
  grid-row: 1 / span 2;
  grid-column: 1;
  align-self: center;
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 1px solid var(--sidebar-icon-border, #dbe4ef);
  border-radius: 11px;
  background: var(--sidebar-icon-bg, linear-gradient(180deg, #f8fafc, #eef4fb));
  color: var(--sidebar-icon-color, #344054);
  box-shadow: var(--sidebar-icon-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.85));
}

.module-tab.has-ui-icon:hover > .ui-icon,
.topbar .module-tab.has-ui-icon:hover > .ui-icon {
  border-color: var(--sidebar-icon-hover-border, rgba(47, 109, 183, 0.3));
  background: var(--sidebar-icon-hover-bg, linear-gradient(180deg, #eef6ff, #e3edf8));
  color: var(--sidebar-icon-hover-color, #255a9c);
}

.module-tab.has-ui-icon strong,
.topbar .module-tab.has-ui-icon strong,
.module-tab.has-ui-icon span:not(.ui-icon),
.topbar .module-tab.has-ui-icon span:not(.ui-icon) {
  grid-column: 2;
}

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

body:not(.theme-dark) .module-tab[data-module="videoModule"].has-ui-icon.active > .ui-icon {
  border-color: rgba(47, 128, 237, 0.28);
  background: linear-gradient(180deg, #eaf2ff, #dbeafe);
  color: #1d4ed8;
}

body:not(.theme-dark) .module-tab[data-module="audioModule"].has-ui-icon.active > .ui-icon,
body:not(.theme-dark) .module-tab[data-module="textModule"].has-ui-icon.active > .ui-icon {
  border-color: rgba(124, 58, 237, 0.24);
  background: linear-gradient(180deg, #f2ebff, #e9ddff);
  color: #6d28d9;
}

body:not(.theme-dark) .module-tab[data-module="workflowModule"].has-ui-icon.active > .ui-icon {
  border-color: rgba(202, 93, 0, 0.24);
  background: linear-gradient(180deg, #fff3e8, #ffe3c2);
  color: #a44900;
}

body:not(.theme-dark) .module-tab[data-module="settingsModule"].has-ui-icon.active > .ui-icon {
  border-color: rgba(83, 90, 104, 0.25);
  background: linear-gradient(180deg, #f4f7fb, #e8eef6);
  color: #334155;
}

.sidebar-toggle.has-ui-icon,
.topbar .sidebar-refresh.has-ui-icon,
.topbar .sidebar-theme.has-ui-icon {
  gap: 6px;
}

.sidebar-toggle.has-ui-icon {
  width: 38px;
  min-width: 38px;
  padding: 0;
  font-size: 0;
}

.sidebar-toggle.has-ui-icon .ui-icon {
  width: 16px;
  height: 16px;
}

.topbar .icon-button.has-ui-icon::before {
  content: none;
}

.command-row button.has-ui-icon,
.workflow-toolbar-actions button.has-ui-icon,
.monitor-actions button.has-ui-icon,
.watermark-library-actions button.has-ui-icon,
.watermark-template-actions button.has-ui-icon,
.workflow-project-tools button.has-ui-icon,
.modal-head button.has-ui-icon {
  min-width: 0;
}

.job-row button.has-ui-icon,
.case-row button.has-ui-icon,
.watermark-library-card-actions button.has-ui-icon,
.watermark-layer-row button.has-ui-icon,
.gallery button.has-ui-icon {
  gap: 5px;
}

.job-row button.has-ui-icon .ui-icon,
.case-row button.has-ui-icon .ui-icon,
.watermark-library-card-actions button.has-ui-icon .ui-icon,
.watermark-layer-row button.has-ui-icon .ui-icon,
.gallery button.has-ui-icon .ui-icon {
  width: 13px;
  height: 13px;
}

.workflow-field button.has-ui-icon,
.workflow-folder-picker button.has-ui-icon {
  gap: 5px;
  white-space: nowrap;
}

body.sidebar-collapsed .brand-text {
  padding-left: 0;
}

body.sidebar-collapsed .brand-text::before,
body.sidebar-collapsed .brand-text::after {
  display: none;
}

body.sidebar-collapsed .module-tab.has-ui-icon,
body.sidebar-collapsed .topbar .module-tab.has-ui-icon {
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 8px 6px;
}

body.sidebar-collapsed .module-tab.has-ui-icon > .ui-icon,
body.sidebar-collapsed .topbar .module-tab.has-ui-icon > .ui-icon {
  display: inline-grid !important;
  grid-column: 1;
  grid-row: 1;
  width: 38px;
  height: 34px;
  padding: 8px;
}

body.sidebar-collapsed .topbar .icon-button.has-ui-icon {
  font-size: 0;
}

body.sidebar-collapsed .sidebar-toggle.has-ui-icon {
  width: 100%;
  min-width: 0;
  font-size: 0;
}

body.sidebar-collapsed .topbar .icon-button.has-ui-icon .ui-icon {
  display: inline-grid !important;
  width: 17px;
  height: 17px;
}

/* Keep the brand block from wrapping vertically during sidebar width animation. */
.brand-block,
.brand-row,
.brand-text,
.brand-text h1,
.brand-text p,
.brand-full,
.brand-short {
  min-width: 0;
}

.brand-text {
  overflow: hidden;
}

.brand-text h1,
.brand-text p,
.brand-full,
.brand-short {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
}

.brand-full {
  display: block;
}

.brand-short {
  display: none;
}

body.sidebar-collapsed .brand-full {
  display: none !important;
}

body.sidebar-collapsed .brand-short {
  display: block !important;
}

/* 〔2026-06-23 FLIP 丝滑动画〕侧栏丝滑由 setSidebarCollapsed 里 #appLayout 的 FLIP(GPU translateX)负责;
   .topbar 和 .layout 几何都「瞬时落位」(transition:none),不做 width/margin 过渡。
   关键教训(实测):给 .topbar 加 width 过渡会让 ~100 个轨道按钮(带阴影/渐变)逐帧重排+重绘 → 折叠掉到 ~25fps;
   而只 FLIP 内容时帧率 = 空闲基线(不卡)。所以轨道瞬间到位、内容平滑滑入,二者之间的浅底空隙随滑动闭合、不明显。
   也绝不能给 .layout 加 margin/width 过渡(会逐帧重排 7000 节点锁 30fps)。 */
.topbar {
  transition: none;
}

.layout {
  transition: none;
}

.brand-block,
.brand-row,
.module-nav,
.module-tab,
.module-tab > .ui-icon,
.module-tab strong,
.module-tab span:not(.ui-icon),
.sidebar-toggle,
.sidebar-toggle .ui-icon,
.sidebar-toggle-label,
.topbar .sidebar-refresh {
  transition:
    opacity var(--sidebar-motion),
    transform var(--sidebar-motion),
    height var(--sidebar-motion),
    width var(--sidebar-motion),
    max-width var(--sidebar-motion),
    min-height var(--sidebar-motion),
    padding var(--sidebar-motion),
    border-color var(--sidebar-motion),
    background-color var(--sidebar-motion),
    box-shadow var(--sidebar-motion);
}

.module-tab.has-ui-icon strong,
.module-tab.has-ui-icon span:not(.ui-icon) {
  opacity: 1;
  transform: translateX(0);
  max-width: 180px;
}

body.sidebar-collapsed .module-tab.has-ui-icon strong,
body.sidebar-collapsed .topbar .module-tab.has-ui-icon strong,
body.sidebar-collapsed .module-tab.has-ui-icon span:not(.ui-icon),
body.sidebar-collapsed .topbar .module-tab.has-ui-icon span:not(.ui-icon) {
  display: block !important;
  width: 0;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(-8px);
}

.sidebar-toggle-label {
  display: inline-block;
}

.sidebar-toggle.has-ui-icon .sidebar-toggle-label {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-4px);
}

body.sidebar-collapsed .module-tab.has-ui-icon,
body.sidebar-collapsed .topbar .module-tab.has-ui-icon {
  transition:
    height var(--sidebar-motion),
    min-height var(--sidebar-motion),
    padding var(--sidebar-motion),
    /* border-color 跟随 border-width 瞬切(几何组),不进软淡组,避免折叠/展开瞬间黑框闪。
       原因详见 styles.part3.css 折叠态 .ui-icon 芯片处的根因注释。 */
    border-color var(--sidebar-motion),
    background-color 160ms ease,
    box-shadow 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .topbar,
  .layout,
  .brand-block,
  .brand-row,
  .module-nav,
  .module-tab,
  .module-tab > .ui-icon,
  .module-tab strong,
  .module-tab span:not(.ui-icon),
  .sidebar-toggle,
  .sidebar-toggle .ui-icon,
  .sidebar-toggle-label,
  .topbar .sidebar-refresh {
    transition-duration: 1ms !important;
  }
}

/* Keep every sidebar item on the same vertical rhythm in both states. */
.topbar .module-nav {
  gap: 8px;
}

.module-tab.has-ui-icon,
.topbar .module-tab.has-ui-icon {
  height: var(--sidebar-nav-row-height);
  min-height: var(--sidebar-nav-row-height);
  max-height: var(--sidebar-nav-row-height);
  overflow: hidden;
}

.module-tab.has-ui-icon > .ui-icon,
.topbar .module-tab.has-ui-icon > .ui-icon,
body.sidebar-collapsed .module-tab.has-ui-icon > .ui-icon,
body.sidebar-collapsed .topbar .module-tab.has-ui-icon > .ui-icon {
  width: var(--sidebar-icon-size);
  height: var(--sidebar-icon-size);
  padding: 8px;
  align-self: center;
}

body.sidebar-collapsed .module-tab.has-ui-icon,
body.sidebar-collapsed .topbar .module-tab.has-ui-icon {
  height: var(--sidebar-nav-row-height);
  min-height: var(--sidebar-nav-row-height);
  max-height: var(--sidebar-nav-row-height);
  width: 52px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  place-items: center;
  justify-self: center;
  box-shadow: none;
}

body.sidebar-collapsed .module-tab.has-ui-icon.active,
body.sidebar-collapsed .topbar .module-tab.has-ui-icon.active {
  background: transparent;
  box-shadow: none;
}

body.sidebar-collapsed .module-tab.has-ui-icon > .ui-icon,
body.sidebar-collapsed .topbar .module-tab.has-ui-icon > .ui-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: #f4f7fb;
}

body.sidebar-collapsed .module-tab.has-ui-icon.active > .ui-icon,
body.sidebar-collapsed .topbar .module-tab.has-ui-icon.active > .ui-icon {
  border-color: rgba(47, 109, 183, 0.38);
  background: #e1edfa;
  box-shadow: inset 3px 0 0 var(--accent), 0 8px 18px rgba(47, 109, 183, 0.1);
}

/* Interface settings: make the flow explicit and remove legacy duplicate controls. */
.tab-panel.settings-panel.active {
  max-width: none;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}

.settings-provider-card {
  display: grid;
  grid-template-columns: minmax(130px, 0.18fr) minmax(280px, 0.82fr);
  align-items: center;
  gap: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  box-shadow: var(--shadow-soft);
  padding: 15px 16px;
  color: #111827;
  font-size: 15px;
  font-weight: 820;
}

.settings-provider-card select {
  min-height: 40px;
  font-weight: 700;
}

.settings-legacy-global,
.settings-fallback-note,
.settings-fallback-keys,
.ark-model-panel {
  display: none !important;
}

.settings-provider-help {
  border-color: #c7ddf7;
  background: #f5f9ff;
  color: #385985;
  line-height: 1.55;
}

.settings-section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding: 4px 2px 0;
}

.settings-section-title strong {
  color: #111827;
  font-size: 16px;
  font-weight: 840;
}

.settings-section-title span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: right;
}

.gateway-title {
  margin-top: 0;
}

.gateway-card {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(47, 109, 183, 0.2);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffffff 0%, #f7fafd 100%);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}

.gateway-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.gateway-card-head strong,
.gateway-category-head strong {
  display: block;
  color: #111827;
  font-size: 15px;
  font-weight: 860;
}

.gateway-card-head span,
.gateway-category-head span,
.gateway-category-card span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.gateway-enabled {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid #c7d8ea;
  border-radius: 10px;
  background: #eaf2fb;
  color: #2f6db7;
  font-size: 13px;
  font-weight: 820;
  white-space: nowrap;
}

.gateway-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.35fr) minmax(280px, 0.65fr);
  gap: 12px;
}

.gateway-key-manager {
  display: grid;
  gap: 9px;
  border: 1px solid #d9e5ef;
  border-radius: 10px;
  background: #fbfdff;
  padding: 11px;
}

.gateway-category-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
  border-top: 1px solid #e5edf4;
  padding-top: 12px;
}

.gateway-category-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(360px, 1fr));
  gap: 10px;
}

.gateway-category-card {
  display: grid;
  grid-template-columns: minmax(118px, 0.26fr) minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #d8e5ee;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px;
}

.gateway-category-card strong {
  display: block;
  color: #1d4a83;
  font-size: 14px;
  font-weight: 840;
}

.gateway-category-card button {
  min-height: 36px;
}

.gateway-category-status {
  grid-column: 2 / -1;
  min-height: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.gateway-category-status.ok {
  color: var(--ok);
}

.gateway-category-status.error {
  color: var(--danger);
}

.gateway-actions {
  display: flex;
  justify-content: flex-start;
}

.settings-advanced-direct {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.settings-advanced-direct > summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 16px;
  color: #344054;
  font-size: 14px;
  font-weight: 850;
  background: #f8fbfa;
}

.settings-advanced-direct > summary::-webkit-details-marker {
  display: none;
}

.settings-advanced-body {
  display: grid;
  gap: 14px;
  padding: 14px;
  border-top: 1px solid #e5edf4;
}

.model-category-panel {
  grid-template-columns: repeat(2, minmax(360px, 1fr));
  gap: 14px;
}

.model-route-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 2px 0 0;
}

.model-route-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(420px, 1fr));
  gap: 14px;
}

.model-route-card {
  display: grid;
  gap: 11px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  padding: 14px;
}

.model-route-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.model-route-head strong {
  display: block;
  color: #111827;
  font-size: 15px;
  font-weight: 840;
  line-height: 1.35;
}

.model-route-head span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.model-route-enabled {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 4px;
  white-space: nowrap;
  color: #2563a7;
  font-size: 13px;
  font-weight: 760;
  cursor: pointer;
}

.model-route-enabled input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 18px;
}

.model-route-grid {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(130px, 0.55fr) minmax(150px, 0.7fr) minmax(180px, 1fr);
  gap: 10px;
}

.model-route-grid .model-route-base {
  grid-column: 1 / -1;
}

.model-route-note {
  display: grid;
  gap: 6px;
}

.model-route-key-manager {
  display: grid;
  gap: 8px;
  border: 1px solid #d9e5ef;
  border-radius: 10px;
  background: #f8fbfa;
  padding: 10px;
}

.model-route-key-list {
  display: grid;
  gap: 8px;
}

.model-route-key-row {
  display: grid;
  grid-template-columns: 34px minmax(160px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.model-route-key-row input {
  font-family: Consolas, "Microsoft YaHei", monospace;
  font-size: 13px;
}

.model-route-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.model-route-status {
  min-height: 0;
  color: var(--muted);
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.45;
}

.model-route-status.ok {
  color: var(--ok);
}

.model-route-status.error {
  color: var(--danger);
}

.model-category-card {
  gap: 11px;
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.model-category-card.is-empty {
  background: #fbfcfe;
}

.model-category-head {
  align-items: center;
}

.model-category-head button {
  min-height: 36px;
}

.model-category-fields {
  grid-template-columns: minmax(210px, 0.95fr) minmax(220px, 1.05fr);
}

.model-category-note {
  min-height: 0;
  padding: 9px 10px;
  border: 1px dashed #d9e5ef;
  border-radius: 8px;
  background: #fbfdff;
}

.model-category-key-manager {
  background: #f8fbfa;
}

.model-category-status:empty,
.settings-panel .result-box:empty {
  display: none;
}

.storage-audit-summary {
  white-space: pre-line;
}

.storage-audit-result {
  max-height: 280px;
  overflow: auto;
}

.routing-card,
.routing-table,
.routing-row {
  min-width: 0;
}

.routing-err {
  color: #b42318;
  font-size: 12px;
  line-height: 1.45;
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.settings-panel > label:not(.settings-provider-card),
.settings-panel > .options-grid,
.settings-panel > .command-row,
.settings-panel > .result-box {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.settings-panel > label:not(.settings-provider-card) {
  padding: 14px;
}

.settings-panel > .command-row {
  justify-content: flex-start;
  padding: 14px;
}

.settings-panel > .command-row .primary {
  min-width: 132px;
}

@media (max-width: 980px) {
  .settings-provider-card,
  .gateway-grid,
  .gateway-category-panel,
  .gateway-category-card,
  .model-category-panel,
  .model-route-panel,
  .model-route-grid,
  .model-category-fields {
    grid-template-columns: 1fr;
  }

  .gateway-card-head,
  .gateway-category-head {
    display: grid;
    align-items: start;
  }

  .gateway-category-status {
    grid-column: auto;
  }

  .settings-section-title {
    display: grid;
    align-items: start;
  }

  .settings-section-title span {
    text-align: left;
  }
}

.account-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.account-summary {
  max-width: 220px;
  padding: 8px 12px;
  border: 1px solid #cfe0f0;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  position: relative;
  overflow: visible;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.account-summary:hover {
  border-color: rgba(47, 109, 183, 0.36);
  background: #ddebf9;
}

.account-summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.account-summary .ui-icon {
  width: 15px;
  height: 15px;
}

.account-summary-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-action {
  min-height: 34px;
  padding: 6px 10px;
}

.account-usage-panel {
  width: min(1080px, calc(100vw - 48px));
  /* 固定高度:各 tab(账号管理/审计/回收站/…)统一同一面板大小,内容少也不缩;滚动交给活动 tab 区内滚。 */
  height: min(900px, calc(100dvh - 32px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* 面板骨架行(顶部按钮/tabs 等一切非 tab 内容区)禁止 flex 收缩:固定高面板下,内容多的 tab 会把可收缩的
   modal-head 压到 min-height、按钮溢出上移=「切 tab 按钮位置跳」的根因。一条规则收口全部骨架行。 */
.account-usage-panel > :not([data-account-usage-section]) {
  flex-shrink: 0;
}

/* 顶栏一行化:tabs 占满左侧,「退出登录/关闭」右侧同排(原独占一行浪费高度)。 */
.account-usage-topbar {
  display: flex;
  gap: 10px;
  align-items: center;
}

.account-usage-topbar .account-usage-tabs {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.account-usage-topbar-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
}

/* tab 双标签:桌面显全名、手机显短名(720 块切换)。 */
.account-usage-tab .tab-label-short {
  display: none;
}

/* 列表型 tab 统一三段式:工具/头部行固定、列表主体弹性内滚、表尾状态行常驻——
   根治「表格溢出盖住已加载/加载更多」(旧 grid 行被定高容器压塌+overflow:visible 溢出交叠)。 */
.account-usage-panel > .admin-account-manager,
.account-usage-panel > .admin-audit-manager,
.account-usage-panel > .admin-recycle-manager,
.account-usage-panel > .admin-feedback-manager,
.account-usage-panel > .account-usage-history {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.account-usage-panel > .admin-account-manager > *,
.account-usage-panel > .admin-audit-manager > *,
.account-usage-panel > .admin-recycle-manager > *,
.account-usage-panel > .admin-feedback-manager > *,
.account-usage-panel > .account-usage-history > * {
  flex: 0 0 auto;
}

#adminAccountList,
#adminAuditList,
#adminRecycleList,
#adminFeedbackList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  align-content: start;
  overscroll-behavior: contain;
}

.account-usage-history > .account-usage-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 切筛选防闪:加载中保留旧行整表半透明,新数据一次性替换(JS 挂 .is-loading)。 */
.account-usage-table-wrap tbody {
  transition: opacity 0.15s ease;
}

.account-usage-table-wrap.is-loading tbody {
  opacity: 0.45;
}

/* 滚动到底自动加载哨兵(共用收口 renderModalListPaging 创建),不可见占位。 */
.modal-list-sentinel {
  height: 2px;
}

/* 整区滚动型 tab(充值·兑换码 / 路由状态):内容整体滚。 */
.account-usage-panel > .routing-health-monitor,
.account-usage-panel > .account-redeem-pane {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  align-content: start;
  overscroll-behavior: contain;
}

.account-redeem-pane {
  display: grid;
  gap: 12px;
}

/* 日期区间控件(消耗明细工具行 / 账号详情弹窗共用观感)。 */
.account-usage-date,
.admin-detail-date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}

.account-usage-date span,
.admin-detail-date span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  white-space: nowrap;
}

.account-usage-date input,
.admin-detail-date input {
  min-height: 32px;
  width: 132px;
  padding: 3px 8px;
}

.account-usage-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px 0 10px;
}

.account-usage-summary div {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  padding: 5px 10px;
}

.account-usage-summary strong {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text);
  font-size: 14px;
  line-height: 1;
}

.account-usage-summary span {
  display: inline-flex;
  align-items: center;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.account-usage-tabs {
  position: sticky;
  top: 0;
  z-index: 6;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px;
  padding: 6px;
  border: 1px solid rgba(47, 103, 178, 0.14);
  border-radius: 14px;
  background: rgba(247, 250, 252, 0.86);
  backdrop-filter: blur(12px);
}

.account-usage-tab {
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #526176;
  font-weight: 860;
}

.account-usage-tab:hover {
  border-color: rgba(47, 109, 183, 0.22);
  background: rgba(234, 242, 251, 0.76);
  color: #2f6db7;
}

.account-usage-tab.active {
  border-color: rgba(47, 109, 183, 0.28);
  background: #2f6db7;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(47, 109, 183, 0.16);
}

/* 消耗明细工具栏：第一行「搜索 / 类型 / 刷新」，第二行整行放「时间范围」。
   原来是 3 列网格却塞了 6 个子元素（搜索、类型、区间、从、到、刷新），日期被挤到第二行、
   刷新按钮被拉成一整格，「从/到」标签飘在外面，语义与视觉都散。 */
.account-usage-tools {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

/* 消耗明细里的模型 logo 沿用站内 .model-logo（真实厂商 SVG），这里只调它在表格行内的尺寸与间距。 */
.account-usage-meta .model-logo {
  margin-right: 7px;
  vertical-align: -4px;
}

.account-usage-meta {
  white-space: nowrap;
}

.account-usage-meta-text {
  vertical-align: middle;
}

.account-usage-timebar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* 自定义起止日期：与快捷区间同高、同圆角、同边框，视觉上是「时间范围」控件的后半段 */
.account-usage-custom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 12px;
  border: 1px solid rgba(47, 103, 178, 0.14);
  border-radius: 12px;
  background: rgba(247, 250, 252, 0.92);
}

.account-usage-custom-cap {
  color: var(--muted);
  font-size: 12px;
  font-weight: 860;
  white-space: nowrap;
}

.account-usage-custom-sep {
  color: rgba(82, 97, 118, 0.55);
  font-size: 12px;
  font-weight: 800;
}

.account-usage-custom input {
  min-height: 32px;
  width: 136px;
  padding: 3px 8px;
  border-radius: 9px;
}

body.theme-dark:not(.auth-required) .account-usage-custom {
  border-color: rgba(99, 156, 222, 0.24);
  background: rgba(24, 30, 41, 0.7);
}

.account-usage-filter {
  display: inline-grid;
  grid-template-columns: repeat(4, minmax(50px, 1fr));
  gap: 4px;
  align-items: center;
  min-width: 260px;
  padding: 4px;
  border: 1px solid rgba(47, 103, 178, 0.14);
  border-radius: 12px;
  background: rgba(247, 250, 252, 0.92);
}

.account-usage-filter button {
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #526176;
  font-size: 12px;
  font-weight: 860;
  white-space: nowrap;
}

.account-usage-filter button:hover {
  border-color: rgba(47, 109, 183, 0.18);
  background: rgba(234, 242, 251, 0.72);
  color: #2f6db7;
}

.account-usage-filter button.active {
  border-color: rgba(47, 109, 183, 0.28);
  background: #2f6db7;
  color: #ffffff;
  box-shadow: 0 8px 16px rgba(47, 109, 183, 0.14);
}

.account-redeem-card {
  display: grid;
  grid-template-columns: minmax(180px, 0.85fr) minmax(320px, 1.5fr);
  gap: 14px;
  align-items: center;
  margin: 0 0 12px;
  padding: 14px;
  border: 1px solid rgba(47, 109, 183, 0.18);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(234, 242, 251, 0.92), rgba(248, 251, 255, 0.96));
}

.account-redeem-card strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  line-height: 1.3;
}

.account-redeem-card span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.account-redeem-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.account-redeem-form input {
  min-width: 0;
}

/* ── 账号页(独立整页,抖音「我」式;非悬浮窗) ───────────────────────────── */
.account-page-panel {
  background:
    linear-gradient(180deg, rgba(248, 251, 255, 0.82), rgba(255, 255, 255, 0.92) 280px),
    var(--surface);
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  overflow: auto;
}

.account-page {
  width: 100%;
  max-width: none;
  margin: 0;
  display: grid;
  gap: 16px;
  padding: 16px 18px 48px;
}

.account-page-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

.account-page-main,
.account-page-hero,
.account-page-editcard {
  border: 1px solid rgba(209, 219, 232, 0.86);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(18px);
}

.account-page-main {
  min-width: 0;
  padding: 20px;
}

.account-page-hero {
  display: grid;
  gap: 18px;
  padding: 22px;
  /* 顶部一层极淡品牌渐变洗色:资料头卡有「封面感」,不再是一块纯白 */
  background-image: linear-gradient(180deg, rgba(47, 109, 183, 0.06), rgba(120, 112, 180, 0.03) 42%, transparent 70%);
}

/* 项目页工具行:类型筛选靠左、排序下拉靠右同一行(原来没有样式,select 吃全局 width:100% 独占了一整行) */
.account-projects-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.account-projects-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.account-projects-sort {
  width: auto;
  min-width: 132px;
  margin-left: auto;
  flex: 0 0 auto;
}

.account-page-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}

.account-page-avatar {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #5b8fd6, #2f6db7);
  box-shadow: 0 10px 24px rgba(47, 109, 183, 0.16);
}

.account-page-id {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 8px;
}

.account-page-name {
  margin: 0;
  font-size: 24px;
  font-weight: 880;
  letter-spacing: 0;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-page-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.account-page-handle {
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.account-page-role {
  padding: 2px 9px;
  border-radius: 8px;
  background: #eef5ff;
  color: #255fa6;
  font-size: 12px;
  font-weight: 800;
}

.account-page-role.is-admin {
  background: #fff5e6;
  color: #a46116;
}

.account-page-bio {
  margin: 2px 0 0;
  max-width: 560px;
  color: #475569;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.account-page-bio.is-empty {
  color: var(--muted);
}

.account-page-namerow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.account-page-edit {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  min-height: 34px;
  border-radius: 10px;
  padding: 7px 11px;
  color: #2f6db7;
  font-size: 12.5px;
  font-weight: 800;
}

.account-page-edit i {
  display: inline-flex;
}

.account-page-edit svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-page-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: min(560px, 100%);
}

.account-page-stat {
  position: relative;
  display: grid;
  min-height: 58px;
  gap: 2px;
  justify-items: start;
  text-align: left;
  padding: 0 18px 0 0;
  border: 0;
  border-right: 1px solid #edf2f7;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  color: var(--text);
}

.account-page-stat:last-child {
  border-right: 0;
}

.account-page-stat.is-action {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.account-page-stat.is-action:hover {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.account-page-stat-go {
  display: none;
  position: absolute;
  top: 14px;
  right: 14px;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 9px;
  background: #ffffff;
  color: #94a3b8;
  opacity: 1;
  transition: background 0.15s ease, color 0.15s ease;
}

.account-page-stat.is-action:hover .account-page-stat-go {
  background: color-mix(in srgb, #2f6db7 12%, #ffffff);
  color: #2f6db7;
}

.account-page-stat-go svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.account-page-stats b {
  order: 0;
  max-width: 100%;
  color: var(--text);
  font-size: 22px;
  line-height: 1.08;
  font-weight: 880;
  font-variant-numeric: tabular-nums;
}

.account-page-stats span {
  order: 1;
  color: #64748b;
  font-size: 12px;
  font-weight: 720;
}

.account-page-stats small {
  order: 2;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 650;
}

.account-page-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid #edf2f7;
  border-radius: 0;
  background: transparent;
}

.account-page-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: auto;
  height: 44px;
  margin: 0;
  padding: 0 13px;
  border: 1px solid #e4ebf3;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  color: var(--text);
  font-size: 14px;
  font-weight: 720;
  text-align: left;
}

body:not(.auth-required) .account-page .account-page-row {
  min-height: 44px !important;
  padding: 0 13px !important;
}

.account-page-row:hover {
  background: #f5f8fc;
}

.account-page-row-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: #f8fafc;
  color: #52657d;
}

.account-page-row-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-page-row:hover .account-page-row-icon {
  color: var(--accent-strong, #2f6db7);
}

.account-page-row-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-page-row-chev {
  display: none;
  color: #b8c3d2;
}

.account-page-row-chev svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-page-row-danger {
  color: #d64545;
}

.account-page-row-danger .account-page-row-icon {
  color: #d64545;
}

.account-page-row-danger:hover {
  background: rgba(214, 69, 69, 0.08);
}

.account-page-row-danger:hover .account-page-row-icon {
  color: #d64545;
}

.account-page-editcard {
  display: grid;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
  padding: 22px;
}

.account-page-edit-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.account-page-edit-head .account-page-avatar {
  width: 48px;
  height: 48px;
  font-size: 22px;
  box-shadow: none;
}

.account-page-edit-head strong {
  font-size: 17px;
  color: var(--text);
}

.account-page-field {
  display: grid;
  gap: 6px;
  margin: 0;
  color: var(--text);
  font-weight: 820;
}

.account-page-field > span {
  font-size: 13px;
}

.account-page-field input,
.account-page-field textarea {
  width: 100%;
  box-sizing: border-box;
}

.account-page-field textarea {
  resize: vertical;
  min-height: 84px;
  line-height: 1.6;
}

.account-page-field small {
  justify-self: end;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.account-page-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.account-page-guest {
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
  min-height: 420px;
  padding: 60px 20px;
  border: 1px solid #e1e9f3;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--muted);
}

.account-page-avatar-guest {
  background: linear-gradient(135deg, #9db4cf, #6f8bad);
}

.account-page-avatar-guest svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.theme-dark:not(.auth-required) .account-page-panel {
  background: var(--bg);
}

body.theme-dark:not(.auth-required) .account-page-main,
body.theme-dark:not(.auth-required) .account-page-hero,
body.theme-dark:not(.auth-required) .account-page-editcard,
body.theme-dark:not(.auth-required) .account-page-guest {
  border-color: rgba(99, 156, 222, 0.18);
  background: rgba(24, 34, 49, 0.9);
}

body.theme-dark:not(.auth-required) .account-page-stat,
body.theme-dark:not(.auth-required) .account-page-menu {
  border-color: rgba(99, 156, 222, 0.18);
}

body.theme-dark:not(.auth-required) .account-page-stat {
  background: transparent;
}

body.theme-dark:not(.auth-required) .account-page-menu {
  background: transparent;
  border-top-color: rgba(99, 156, 222, 0.16);
}

body.theme-dark:not(.auth-required) .account-page-row:hover {
  background: rgba(99, 156, 222, 0.12);
}

body.theme-dark:not(.auth-required) .account-page-row:hover .account-page-row-icon {
  color: #8fb6e8;
}

body.theme-dark:not(.auth-required) .account-page-row-icon {
  background: transparent;
  color: #9fc4f2;
}

body.theme-dark:not(.auth-required) .account-page-row {
  border-color: transparent;
  background: transparent;
  color: #93a4bc;
}

body.theme-dark:not(.auth-required) .account-page-row:hover {
  background: rgba(99, 156, 222, 0.12);
}

@media (max-width: 1180px) {
  .account-page {
    width: 100%;
  }
  .account-page-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 920px) {
  .account-page {
    width: 100%;
    padding-top: 18px;
  }
  .account-page-shell {
    grid-template-columns: 1fr;
  }
  .account-page-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .account-page-bio {
    max-width: none;
  }
}

@media (max-width: 720px) {
  .account-page {
    width: 100%;
    gap: 12px;
    padding: 10px 10px 34px;
  }
  .account-page-hero,
  .account-page-main {
    padding: 14px;
    border-radius: 16px;
  }
  .account-page-hero {
    gap: 12px;
  }
  .account-page-profile {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
  }
  .account-page-avatar {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    font-size: 26px;
  }
  .account-page-name {
    font-size: 19px;
  }
  .account-page-namerow {
    flex-wrap: wrap;
    gap: 8px;
  }
  .account-page-edit {
    padding: 6px 12px;
  }
  .account-page-stats b {
    font-size: 16px;
  }
  .account-page-row {
    height: 42px;
  }
  .account-projects-toolbar,
  .account-projects-tools {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .account-projects-pills {
    width: 100%;
  }
  .account-proj-pill {
    flex: 1;
  }
}

/* 真实头像图片(账号页 + 更多菜单共用) */
.account-page-avatar.has-img,
.app-more-avatar.has-img {
  background: none !important;
  padding: 0;
  overflow: hidden;
}

.account-page-avatar.has-img img,
.app-more-avatar.has-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* 编辑态:头像换图 */
.account-page-edit-avatar {
  display: flex;
  align-items: center;
  gap: 14px;
}

.account-page-avatar-edit {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}

.account-page-avatar-edit .account-page-avatar {
  width: 64px;
  height: 64px;
  font-size: 28px;
  box-shadow: none;
}

.account-page-avatar-cam {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--surface, #fff);
  background: #2f6db7;
  color: #fff;
}

.account-page-avatar-cam svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-page-avatar-ops {
  display: flex;
  align-items: center;
  gap: 10px;
}

.account-page-avatar-remove {
  border: 0;
  background: transparent;
  color: var(--danger, #d64545);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* 我的项目 */
.account-page-section {
  display: grid;
  gap: 14px;
}

.account-page-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
}

.account-page-section-head strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 820;
}

.account-page-section-head span {
  color: var(--muted);
  font-size: 12px;
}

.account-projects-toolbar {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
}

.account-projects-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 200px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: #f8fafc;
  border-color: #e4ebf3;
  box-shadow: none;
}

.account-projects-search i { display: inline-flex; color: var(--muted); }
.account-projects-search svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.account-projects-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: 13px; color: var(--text); }
.account-projects-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.account-projects-tools { display: flex; align-items: center; gap: 8px; flex: none; }

.account-projects-pills {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  background: #f8fafc;
  border-color: #e4ebf3;
  box-shadow: none;
}

.account-proj-pill {
  border: none;
  background: none;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.account-proj-pill.is-on {
  background: #ffffff;
  color: #1d5fa8;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

.account-projects-sort {
  padding: 7px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  background: #f8fafc;
  border-color: #e4ebf3;
  box-shadow: none;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
}

body.theme-dark:not(.auth-required) .account-projects-search,
body.theme-dark:not(.auth-required) .account-projects-pills,
body.theme-dark:not(.auth-required) .account-projects-sort {
  border-color: rgba(99, 156, 222, 0.18);
  background: var(--surface-2);
}

body.theme-dark:not(.auth-required) .account-proj-pill.is-on {
  background: rgba(99, 156, 222, 0.18);
  color: #8fb6e8;
}

/* 项目 / 灵感 / 收藏 / 媒体 统一为卡片网格 */
.account-page-projects,
.account-resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

/* 统一卡片:封面在上,标题/副信息/日期在下 */
.account-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.account-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-popover);
}

.account-card-open {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

.account-card-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #eef5ff, #f6f9fd);
  color: #2f6db7;
}

/* 模块布局缩略图(项目卡封面 / 工作流库封面通用) */
.account-card-map {
  position: absolute;
  inset: 0;
  display: block;
}

.account-map-node {
  position: absolute;
  border-radius: 4px;
  background: var(--node-color, #5b8fd6);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.1);
  opacity: 0.95;
}

/* 工作流项目库封面容器需作定位锚点 */
.project-card-cover.canvas-project-preview {
  position: relative;
}

.account-card-cover-canvas {
  background: linear-gradient(135deg, color-mix(in srgb, #7c5cff 14%, #ffffff), color-mix(in srgb, #7c5cff 4%, #ffffff));
  color: #6b4ee6;
}

.account-card-cover-workflow {
  background: linear-gradient(135deg, color-mix(in srgb, #2f6db7 14%, #ffffff), color-mix(in srgb, #2f6db7 4%, #ffffff));
  color: #2f6db7;
}

.account-card-thumb,
.account-card-cover img,
.account-card-cover video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.account-card-cover svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-card-body {
  display: grid;
  gap: 3px;
  padding: 10px 12px 11px;
  min-width: 0;
}

.account-card-body strong {
  font-size: 13.5px;
  font-weight: 780;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-card-meta {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-card-date {
  margin-top: 1px;
  font-size: 11px;
  font-weight: 600;
  color: #98a2b3;
}

.account-card-more {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(4px);
  color: #5a6a80;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.account-card:hover .account-card-more,
.account-card-more:focus-visible {
  opacity: 1;
}

.account-card-more:hover {
  background: #ffffff;
  color: #2f6db7;
}

.account-card-more svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.account-card.is-skeleton {
  pointer-events: none;
  cursor: default;
}

.account-card.is-skeleton .account-card-cover {
  position: relative;
  overflow: hidden;
  background: #eef1f5;
}
.account-card.is-skeleton .account-card-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 22%, rgba(255, 255, 255, 0.6) 50%, transparent 78%);
  transform: translateX(-100%);
  animation: accSkelSweep 1.3s ease infinite;
}

.account-page-projects-empty {
  grid-column: 1 / -1;
  padding: 28px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  border: 1px dashed var(--border-soft);
  border-radius: 14px;
}

/* 滚动到底自动加载的哨兵 + 转圈 */
.account-infinite-sentinel {
  grid-column: 1 / -1;
  min-height: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.account-infinite-sentinel.is-loading {
  padding: 14px 0 4px;
}

.account-infinite-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  animation: accSpin 0.7s linear infinite;
}

@keyframes accSpin {
  to { transform: rotate(360deg); }
}

/* 加载骨架 */
.account-page-project.is-skeleton {
  cursor: default;
  pointer-events: none;
  box-shadow: none;
  align-items: center;
  gap: 13px;
  padding: 13px 14px;
}

/* 骨架微光收口:静底 + ::after 高光条 translateX 扫过(合成器动画)。
   原来动 background-position——整屏骨架加载时一屏元素同时每帧重绘,正撞上首屏最忙的时刻。 */
.skel-box,
.skel-line {
  position: relative;
  overflow: hidden;
  background: #eef1f5;
}
.skel-box::after,
.skel-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 22%, rgba(255, 255, 255, 0.6) 50%, transparent 78%);
  transform: translateX(-100%);
  animation: accSkelSweep 1.3s ease infinite;
}

.account-page-project .skel-box {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 13px;
}

.skel-line {
  height: 11px;
  border-radius: 6px;
}

.skel-w70 { width: 70%; }
.skel-w45 { width: 45%; }

@keyframes accSkelSweep {
  to { transform: translateX(100%); }
}

body.theme-dark:not(.auth-required) .skel-box,
body.theme-dark:not(.auth-required) .skel-line {
  background: rgba(99, 156, 222, 0.1);
}
body.theme-dark:not(.auth-required) .skel-box::after,
body.theme-dark:not(.auth-required) .skel-line::after {
  background: linear-gradient(90deg, transparent 22%, rgba(99, 156, 222, 0.22) 50%, transparent 78%);
}

.account-page-project {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 64px;
  margin: 0;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.account-page-project-open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.account-page-project-more {
  flex: none;
  width: 40px;
  display: inline-grid;
  place-items: center;
  border: none;
  background: none;
  color: #b3bccb;
  cursor: pointer;
  border-radius: 0 14px 14px 0;
  color: #98a4b5;
  transition: background 0.14s ease, color 0.14s ease;
}

.account-page-project:hover .account-page-project-more:not(:hover) {
  color: #6b7689;
}

.account-page-project-more:hover {
  background: color-mix(in srgb, var(--blue-soft) 60%, var(--surface));
  color: #2f6db7;
}

.account-page-project-more svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.account-proj-menu {
  position: fixed;
  z-index: 9995;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border: 1px solid #e6edf6;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.18);
  animation: appMoreIn 0.12s ease;
}

.account-proj-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.account-proj-menu button:hover { background: color-mix(in srgb, var(--blue-soft) 60%, #ffffff); }
.account-proj-menu button.is-danger { color: var(--danger); }
.account-proj-menu button.is-danger:hover { background: var(--danger-soft, #fff3f1); }

.account-proj-menu svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.theme-dark:not(.auth-required) .account-proj-menu {
  background: var(--surface-2, #1a2434);
  border-color: rgba(99, 156, 222, 0.22);
}

body.theme-dark:not(.auth-required) .account-proj-menu button:hover {
  background: rgba(99, 156, 222, 0.14);
}

.account-page-project:hover {
  border-color: var(--border-strong);
  background: #fbfdff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

.account-page-project-cover {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, #2f6db7 14%, #ffffff), color-mix(in srgb, #2f6db7 5%, #ffffff));
  color: #2f6db7;
}

.account-page-project-canvas {
  background: linear-gradient(135deg, color-mix(in srgb, #7c5cff 15%, #ffffff), color-mix(in srgb, #7c5cff 5%, #ffffff));
  color: #6b4ee6;
}

.account-page-project-workflow {
  background: linear-gradient(135deg, color-mix(in srgb, #2f6db7 15%, #ffffff), color-mix(in srgb, #2f6db7 5%, #ffffff));
  color: #2f6db7;
}

.account-page-project-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 项目封面底色改由 --cov-h(按项目 id 取色)驱动 → 同名也能凭颜色区分;类型仅靠字形(画布=布局/工作流=节点) */

.account-page-project-cover svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-page-project-body {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.account-page-project-body strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 790;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-page-project-sub {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
}

.account-page-project-meta {
  flex: 1;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-page-project-date {
  flex: none;
  margin-left: auto;
  color: #98a2b3;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.account-page-projects-more {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 2px;
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  background: #f8fafc;
  color: #2f6db7;
  font-size: 13px;
  font-weight: 760;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.account-page-projects-more:hover {
  background: color-mix(in srgb, var(--blue-soft) 55%, var(--surface));
  border-color: color-mix(in srgb, #2f6db7 32%, var(--border-soft));
}

.account-page-projects-more-chev {
  display: inline-flex;
  color: #2f6db7;
  transform: rotate(90deg);
  transition: transform 0.18s ease;
}

.account-page-projects-more.is-open .account-page-projects-more-chev {
  transform: rotate(-90deg);
}

.account-page-projects-more-chev svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.theme-dark:not(.auth-required) .account-page-projects-more {
  border-color: rgba(99, 156, 222, 0.28);
  color: #8fb6e8;
}

body.theme-dark:not(.auth-required) .account-page-projects-more-chev {
  color: #8fb6e8;
}

body.theme-dark:not(.auth-required) .account-page-projects-empty {
  border-color: rgba(99, 156, 222, 0.22);
}

body.theme-dark:not(.auth-required) .account-page-project {
  border-color: rgba(99, 156, 222, 0.18);
  background: var(--surface-2);
}

body.theme-dark:not(.auth-required) .account-page-project:hover {
  background: rgba(99, 156, 222, 0.12);
}

body.theme-dark:not(.auth-required) .account-page-avatar-cam {
  border-color: var(--surface-2, #1a2434);
}

@media (max-width: 720px) {
  .account-page-projects {
    grid-template-columns: 1fr;
  }
}

/* 账号中心重构：账号模块即页面本身，去掉页面内卡片壳 */
.account-page-panel {
  background: #ffffff;
  width: 100% !important;
  max-width: none !important;
  min-height: 100%;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: auto;
}

/* 全宽布局:内容直接铺在模块视口内,不再收窄居中或外包卡片 */
.account-page {
  width: 100%;
  max-width: none;
  min-height: 100%;
  margin: 0;
  padding: 0;
  gap: 0;
}

/* 结构壳只负责纵向组织,不再提供边框、圆角和阴影 */
.account-page-shell {
  width: 100%;
  max-width: none;
  min-width: 0; /* .account-page 是 grid:子项默认 min-width:auto,内部不可收缩行会把列撑破视口(手机右缘溢出) */
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.account-page-main {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-top: 18px;
  padding: 18px 32px 32px;
  border: 0;
  border-top: 1px solid var(--border-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

/* 编辑资料态与账号页使用同一层页面模型 */
.account-page-editcard {
  min-height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* 头部、内容面板在大框内不再各自成卡,只作为分区 */
.account-page-hero,
.account-projects-panel,
.account-resource-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.account-page-hero {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  gap: 0;
  padding: 28px 32px 0;
}

.account-page-hero-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.account-page-profile {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.account-page-avatar {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  font-size: 26px;
  box-shadow: var(--shadow-card);
}

.account-page-name {
  font-size: 24px;
  line-height: 1.18;
}

.account-page-bio {
  max-width: 760px;
  font-size: 13px;
  color: #56657a;
}

.account-page-hero-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 头部「⋯」按钮:正方形图标钮,不随移动端拉伸 */
.account-page-more-btn {
  flex: none !important;
  width: 38px;
  padding: 0 !important;
}

.account-page-more-btn svg {
  width: 18px;
  height: 18px;
}

.account-page-quick,
.account-content-action,
.account-command-btn,
.account-page-tab,
.account-resource-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px !important;
  padding: 0 13px !important;
  border: 1px solid #dce6f2;
  border-radius: 11px;
  background: #ffffff;
  color: #243247;
  font-size: 13px;
  font-weight: 760;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.account-page-quick svg,
.account-content-action svg,
.account-command-btn svg,
.account-page-tab svg,
.account-resource-more svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-page-quick:hover,
.account-content-action:hover,
.account-command-btn:hover,
.account-page-tab:hover,
.account-resource-more:hover {
  border-color: #bdd0e7;
  background: #f8fbff;
}

.account-page-quick.is-primary,
.account-content-action.is-primary,
.account-command-btn.is-primary {
  border-color: #1f6fc7;
  background: #1671d8;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(22, 113, 216, 0.18);
}

/* 数据条不再是「卡中卡」:去掉边框底色,以一条分隔线并入头部卡片 */
.account-page-stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 18px;
  padding-top: 18px;
  border: 0;
  border-top: 1px solid var(--border-soft);
  border-radius: 0;
  background: transparent;
}

.account-page-stat {
  min-height: 0;
  gap: 4px;
  padding: 2px 16px;
  border-right: 1px solid var(--border-soft);
  background: transparent;
}

.account-page-stat:first-child {
  padding-left: 0;
}

.account-page-stat:last-child {
  border-right: 0;
}

.account-page-stat.is-action:hover {
  background: transparent;
}

.account-page-stat.is-action:hover b {
  color: var(--accent);
}

.account-page-stats b {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: #121826;
}

.account-page-stats span {
  font-size: 12px;
  color: #5a6a80;
}

.account-page-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  padding-top: 14px;
  border: 0;
  border-top: 1px solid var(--border-soft);
  background: transparent;
}

.account-page-menu .account-page-row-danger {
  margin-left: auto;
}

/* 账号级工具(充值/消耗/后台/退出)是最次要的一档:做成安静的幽灵按钮,弱于「编辑资料」 */
.account-page-row {
  height: 32px;
  min-height: 32px !important;
  padding: 0 10px !important;
  gap: 7px;
  border-radius: 8px;
  border-color: transparent;
  background: transparent;
  color: #5a6a80;
  font-size: 12.5px;
  font-weight: 700;
}

body:not(.auth-required) .account-page .account-page-row {
  min-height: 32px !important;
  padding: 0 10px !important;
}

.account-page-row:hover {
  background: #f1f5fa;
  color: var(--text);
}

.account-page-row-icon {
  width: 18px;
  height: 18px;
  border-radius: 0;
  background: transparent;
}

.account-page-row-icon svg {
  width: 15px;
  height: 15px;
}

/* 下划线式页签(参考 GitHub / Linear / Vercel 的仪表盘导航,比药丸更克制) */
.account-page-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: inset 0 -1px 0 var(--border-soft);
  overflow-x: auto;
  overflow-y: hidden;
}

.account-page-tab {
  flex: none;
  min-height: 42px !important;
  padding: 0 15px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #5d6b7f;
  font-weight: 720;
  box-shadow: none !important;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.account-page-tab:hover {
  color: var(--text);
}

.account-page-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent) !important;
}

.account-page-content {
  margin-top: 14px;
}

/* 概览 = 一张卡 + 内部十字分隔线(和其它页签一样是单卡片,不再是 4 张漂浮卡) */
.account-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
}

.account-overview-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  padding: 18px;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.account-overview-card:nth-child(2n) {
  border-right: 0;
}

.account-overview-card:nth-child(n + 3) {
  border-bottom: 0;
}

.account-overview-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.account-overview-card-head strong,
.account-resource-head strong,
.account-page-section-head strong {
  color: #121826;
  font-size: 17px;
  font-weight: 860;
}

.account-overview-card-head span,
.account-resource-head span,
.account-page-section-head span {
  color: #758399;
  font-size: 12px;
  font-weight: 650;
}

.account-overview-card-head button {
  min-height: 28px !important;
  padding: 0 9px !important;
  border: 1px solid #dfe8f3;
  border-radius: 9px;
  background: #f8fafc;
  color: #2f6db7;
  font-size: 12px;
  font-weight: 760;
  cursor: pointer;
}

.account-command-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.account-command-btn {
  min-height: 56px !important;
  justify-content: flex-start;
  padding: 0 14px !important;
  border-radius: 13px;
}

.account-mini-list {
  display: grid;
  gap: 7px;
}

.account-mini-item,
.account-mini-skeleton {
  width: 100%;
  min-height: 50px !important;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 8px !important;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: inherit;
  text-align: left;
}

.account-mini-item {
  cursor: pointer;
}

.account-mini-item:hover {
  border-color: #dce6f2;
  background: #f8fbff;
}

.account-mini-icon,
.account-mini-preview {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: #eef5ff;
  color: #2f6db7;
}

.account-mini-preview img,
.account-resource-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.account-mini-item svg,
.account-mini-icon svg,
.account-mini-preview svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.account-mini-item span:not(.account-mini-icon):not(.account-mini-preview),
.account-mini-skeleton span:last-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.account-mini-item strong {
  overflow: hidden;
  color: #121826;
  font-size: 13px;
  font-weight: 790;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-mini-item small,
.account-mini-item time {
  overflow: hidden;
  color: #7b8798;
  font-size: 11px;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-mini-empty {
  min-height: 78px;
  display: grid;
  place-items: center;
  border: 1px dashed #dfe8f3;
  border-radius: 12px;
  color: #7b8798;
  font-size: 12px;
}

.account-projects-panel,
.account-resource-panel {
  padding: 0;
}

.account-resource-panel {
  display: grid;
  gap: 14px;
}

.account-resource-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.account-resource-head > div:first-child {
  display: grid;
  gap: 4px;
}

.account-resource-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.account-content-search {
  flex: none;
  width: 100%;
}

/* 灵感/收藏/媒体 与「项目」页统一:单列列表行,行样式与 .account-page-project 一致 */
.account-resource-more {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 42px !important;
  border-style: dashed;
}

.account-page-editcard {
  max-width: none;
  margin: 0;
  padding: 28px 32px;
}

/* 键盘可达性:仅键盘聚焦时显示一致的焦点环(不打扰鼠标点击),保留各控件原圆角 */
.account-page :where(button, a, select, input, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .account-page {
    padding: 0;
  }
  .account-page-shell {
    padding: 0;
    border-radius: 0;
  }
  .account-page-hero {
    padding: 16px 14px 0;
  }
  .account-page-main,
  .account-page-editcard {
    padding: 14px;
  }
  .account-page-hero-main,
  .account-resource-head {
    display: grid;
    gap: 12px;
  }
  .account-page-profile {
    align-items: center;
  }
  .account-page-hero-actions,
  .account-resource-actions {
    justify-content: stretch;
  }
  .account-page-quick,
  .account-content-action {
    flex: 1;
  }
  .account-page-profile {
    gap: 12px;
  }
  .account-page-avatar {
    width: 62px;
    height: 62px;
    border-radius: 17px;
    font-size: 26px;
  }
  .account-page-name {
    font-size: 20px;
  }
  /* 统计条:手机一行四列紧凑排(数字17px);原 2×2 大格每格 70px,头部占掉半屏 */
  .account-page-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 12px;
    padding-top: 12px;
  }
  .account-page-stat {
    min-height: 0;
    gap: 2px;
    padding: 2px 8px;
    border-right: 1px solid #e7edf5;
    border-top: 0;
  }
  .account-page-stat:first-child {
    padding-left: 0;
  }
  .account-page-stat:last-child {
    border-right: 0;
  }
  .account-page-stats b {
    font-size: 17px;
  }
  .account-page-stats span {
    font-size: 10.5px;
  }
  /* 筛选行:类型胶囊 + 排序同一行(排序定宽),胶囊不再铺满整宽被右下悬浮钮盖住「工作流」 */
  .account-projects-toolbar {
    display: flex; /* 压过旧版 720px 媒体块的 display:grid 单列(纵向堆叠三行的来源) */
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }
  .account-projects-pills {
    display: flex;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  .account-proj-pill {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 6px;
  }
  .account-projects-sort {
    flex: 0 0 auto;
    width: 104px;
    min-width: 0;
    min-height: var(--mobile-control-h, 32px);
    height: var(--mobile-control-h, 32px);
    padding: 4px 8px;
    margin-left: 0;
  }
  .account-page-hero-main {
    gap: 10px;
  }
  /* 四个页签(项目/灵感投稿/收藏/媒体库)收窄内边距+藏图标,390 宽下一行放齐不截字 */
  .account-page-tab {
    padding: 0 8px !important;
    gap: 5px;
  }
  .account-page-tab svg {
    display: none;
  }
  .account-page-menu {
    gap: 6px;
  }
  .account-page-row {
    flex: 1 1 calc(50% - 6px);
  }
  .account-overview-grid,
  .account-command-grid {
    grid-template-columns: 1fr;
  }
  /* 手机上卡片网格保持两列 */
  .account-page-projects,
  .account-resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  /* 单列时:去掉竖分隔线,行间用横线,最后一格无线 */
  .account-overview-card {
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
    padding: 14px;
  }
  .account-overview-card:last-child {
    border-bottom: 0;
  }
  .account-projects-panel,
  .account-resource-panel {
    padding: 0;
    border-radius: 0;
  }
}

body.theme-dark:not(.auth-required) .account-page-panel {
  background: var(--bg);
}

body.theme-dark:not(.auth-required) .account-page-hero,
body.theme-dark:not(.auth-required) .account-page-editcard,
body.theme-dark:not(.auth-required) .account-projects-panel,
body.theme-dark:not(.auth-required) .account-resource-panel,
body.theme-dark:not(.auth-required) .account-overview-grid,
body.theme-dark:not(.auth-required) .account-card {
  border-color: rgba(99, 156, 222, 0.18);
  background: rgba(24, 34, 49, 0.9);
}

body.theme-dark:not(.auth-required) .account-page-hero,
body.theme-dark:not(.auth-required) .account-page-editcard,
body.theme-dark:not(.auth-required) .account-projects-panel,
body.theme-dark:not(.auth-required) .account-resource-panel {
  border-color: transparent;
  background: transparent;
}

body.theme-dark:not(.auth-required) .account-card-cover {
  background: rgba(15, 23, 42, 0.35);
}

body.theme-dark:not(.auth-required) .account-card-more {
  background: rgba(24, 34, 49, 0.86);
  color: #9fc4f2;
}

body.theme-dark:not(.auth-required) .account-overview-card {
  border-color: rgba(99, 156, 222, 0.16);
}

body.theme-dark:not(.auth-required) .account-page-tabs {
  box-shadow: inset 0 -1px 0 rgba(99, 156, 222, 0.20);
}

body.theme-dark:not(.auth-required) .account-page-tab {
  color: #93a4bc;
}

body.theme-dark:not(.auth-required) .account-page-tab.is-active {
  color: #8fb6e8;
  border-bottom-color: #8fb6e8 !important;
}

body.theme-dark:not(.auth-required) .account-page-stats {
  border-color: rgba(99, 156, 222, 0.18);
  background: rgba(15, 23, 42, 0.25);
}

body.theme-dark:not(.auth-required) .account-page-stat,
body.theme-dark:not(.auth-required) .account-page-stat:nth-child(n + 4) {
  border-color: rgba(99, 156, 222, 0.14);
}

body.theme-dark:not(.auth-required) .account-page-stats b,
body.theme-dark:not(.auth-required) .account-mini-item strong,
body.theme-dark:not(.auth-required) .account-card-body strong,
body.theme-dark:not(.auth-required) .account-overview-card-head strong,
body.theme-dark:not(.auth-required) .account-resource-head strong {
  color: var(--text);
}

body.theme-dark:not(.auth-required) .account-mini-item:hover {
  background: rgba(99, 156, 222, 0.12);
}

/* ── 一级菜单底部「更多」菜单(v2 重造:此前三层历史规则互相叠盖,风格突兀;现在只有这一份定义) ── */
.app-more-menu {
  position: fixed;
  inset: 0;
  z-index: 9990;
}

.app-more-menu[hidden] {
  display: none;
}

.app-more-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
}

/* 面板:一体式浮层——实底 + 发丝描边 + 分层投影 + 从下方轻缩放入场,与全站卡片视觉同源 */
.app-more-panel {
  position: fixed;
  width: min(264px, calc(100vw - 24px));
  max-height: min(76vh, 600px);
  overflow: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border: 1px solid rgba(203, 213, 225, 0.7);
  border-radius: 16px;
  background: #ffffff;
  box-shadow:
    0 24px 56px -12px rgba(15, 23, 42, 0.22),
    0 4px 14px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  animation: appMoreIn 0.16s cubic-bezier(0.2, 0.9, 0.3, 1);
  transform-origin: 0 100%;
}

@keyframes appMoreIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.app-more-account {
  margin: 0 0 6px;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(203, 213, 225, 0.5);
}

.app-more-id,
.app-more-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  color: var(--text);
  transition: background 0.13s ease;
}

/* 账号头卡:柔和品牌渐变底,悬停箭头右移 */
.app-more-id {
  padding: 9px 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(47, 109, 183, 0.08), rgba(120, 112, 180, 0.07));
}

.app-more-id:hover { background: linear-gradient(135deg, rgba(47, 109, 183, 0.13), rgba(120, 112, 180, 0.11)); }
.app-more-id .app-more-chev { transition: transform 0.15s ease; }
.app-more-id:hover .app-more-chev { transform: translateX(2px); }

.app-more-item {
  min-height: 36px !important;
  padding: 6px 9px !important;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 640;
  line-height: 1.25;
}

body:not(.auth-required) .app-more-panel .app-more-item {
  min-height: 36px !important;
  padding: 6px 9px !important;
}

.app-more-item:hover { background: rgba(47, 109, 183, 0.07); }
.app-more-item:hover .app-more-item-icon { color: var(--accent, #2f6db7); }

.app-more-avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #5b8fd6, #2f6db7);
  box-shadow: 0 3px 8px -2px rgba(47, 109, 183, 0.5);
}

.app-more-avatar-guest {
  background: linear-gradient(135deg, #9db4cf, #6f8bad);
}

.app-more-avatar-guest svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-more-id-text {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.app-more-id-text strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 760;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-more-id-text span {
  color: #64748b;
  font-size: 12px;
  font-weight: 560;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-more-group-title {
  padding: 7px 10px 4px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0;
}

/* 图标:扁平细线(去掉底色芯片——每行一个小色块看着碎),悬停时随行变主色 */
.app-more-item-icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #7b8aa0;
  transition: color 0.13s ease;
}

.app-more-item-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-more-item-text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.app-more-item-label {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-more-item-desc {
  color: #7b8798;
  font-size: 12px;
  font-weight: 560;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-more-chev {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  color: #cbd5e3;
}

.app-more-id .app-more-chev {
  color: #9aa7b8;
}

.app-more-chev svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-more-divider {
  height: 1px;
  margin: 8px 6px;
  background: #eef2f7;
}

.app-more-item-danger {
  color: var(--danger, #d64545);
}

.app-more-item-danger .app-more-item-icon,
.app-more-item-danger:hover .app-more-item-icon {
  color: var(--danger, #d64545);
}

.app-more-item-danger:hover {
  background: color-mix(in srgb, var(--danger, #d64545) 8%, transparent);
}

/* ---- 系统通知中心(hero 渐变头 + 时间线,成品级视觉) ---- */
.notice-center-panel {
  width: min(660px, calc(100vw - 24px));
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 40px 90px -28px rgba(15, 23, 42, 0.4), 0 6px 22px -10px rgba(15, 23, 42, 0.16);
}

/* 头部:品牌色低饱和晕染 + 图标徽章 */
.notice-hero {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 20px 14px;
  background:
    radial-gradient(130% 240% at 0% 0%, rgba(75, 134, 221, 0.08), transparent 52%),
    radial-gradient(110% 220% at 100% 0%, rgba(122, 95, 208, 0.06), transparent 48%),
    var(--panel, #fff);
  border-bottom: 1px solid color-mix(in srgb, var(--border, #e3e8f0) 72%, transparent);
}

.notice-hero-icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #4b86dd, #7a5fd0);
  box-shadow: 0 8px 16px -8px rgba(87, 111, 214, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.notice-hero-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notice-hero-text {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.notice-hero-text h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text);
}

.notice-hero-text p {
  margin: 0;
  font-size: 12px;
  color: var(--muted, #7a8699);
}

.notice-head-actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  flex: none;
}

.notice-publish-btn {
  height: 30px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #3d7bd4, #6a55c8);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px -8px rgba(87, 111, 214, 0.65);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.notice-publish-btn:hover {
  filter: brightness(1.07);
  box-shadow: 0 10px 22px -8px rgba(87, 111, 214, 0.7);
}

.notice-publish-btn:active {
  transform: translateY(1px);
}

.notice-close-btn {
  border-radius: 10px;
}

/* 内容区:时间线 */
.changelog-body {
  overflow: auto;
  overscroll-behavior: contain;
  padding: 22px 24px 18px;
  display: block;
}

.notice-entry {
  position: relative;
  padding: 10px 14px 22px 40px;
  border-radius: 14px;
  transition: background 0.16s ease;
}

.notice-entry:hover {
  background: color-mix(in srgb, var(--notice-accent, #6b7d9c) 4%, transparent);
}

.notice-entry:last-child {
  padding-bottom: 12px;
}

/* 竖线:节点下方延伸,末条淡出 */
.notice-entry::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 34px;
  bottom: -4px;
  width: 2px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--muted, #9aa5b8) 30%, transparent);
}

.notice-entry:last-child::before {
  background: linear-gradient(180deg, color-mix(in srgb, var(--muted, #9aa5b8) 30%, transparent), transparent 78%);
}

/* 节点:白芯类型色圆环,未读柔光呼吸 */
.notice-node {
  position: absolute;
  left: 13px;
  top: 15px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--panel, #fff);
  border: 3.5px solid var(--notice-accent, #96a1b5);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--notice-accent, #96a1b5) 13%, transparent);
  z-index: 1;
}

.notice-type-update { --notice-accent: #2f6db7; }
.notice-type-notice { --notice-accent: #7c5cbf; }
.notice-type-maintenance { --notice-accent: #cf7226; }

.notice-entry-new .notice-node {
  animation: notice-node-pulse 2.4s ease-in-out infinite;
}

@keyframes notice-node-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--notice-accent, #2f6db7) 22%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--notice-accent, #2f6db7) 9%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .notice-entry-new .notice-node { animation: none; }
}

/* 头行:徽章+新标靠左,管理钮+日期靠右 */
.notice-entry-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}

.notice-badge {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--notice-accent, #667085);
  background: color-mix(in srgb, var(--notice-accent, #667085) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--notice-accent, #667085) 18%, transparent);
}

.notice-new-tag {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f0666a, #dd4a53);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 3px 8px -3px rgba(221, 74, 83, 0.55);
}

.notice-entry-date {
  flex: none;
  color: color-mix(in srgb, var(--muted, #8a94a6) 88%, transparent);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.notice-admin-row {
  margin-left: auto;
  display: inline-flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.notice-admin-row + .notice-entry-date {
  flex: none;
}

.notice-entry-head > .notice-entry-date:last-child {
  margin-left: 0;
}

.notice-entry-head > .notice-badge + .notice-entry-date:last-child,
.notice-entry-head > .notice-new-tag + .notice-entry-date:last-child {
  margin-left: auto;
}

.notice-entry:hover .notice-admin-row,
.notice-admin-row:focus-within {
  opacity: 1;
}

@media (hover: none) {
  .notice-admin-row { opacity: 0.75; }
}

.notice-admin-btn {
  border: none;
  background: transparent;
  color: var(--muted, #7a8699);
  border-radius: 8px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.notice-admin-btn:hover {
  background: color-mix(in srgb, var(--accent, #2f6db7) 10%, transparent);
  color: var(--accent, #2f6db7);
}

.notice-admin-btn-danger:hover {
  background: color-mix(in srgb, var(--danger, #d64545) 10%, transparent);
  color: var(--danger, #d64545);
}

/* 标题与内容 */
.notice-entry-title {
  display: block;
  margin-top: 9px;
  color: var(--text);
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.notice-items {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}

.notice-items li {
  position: relative;
  padding-left: 16px;
  color: color-mix(in srgb, var(--text) 80%, transparent);
  font-size: 13px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.notice-items li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 6px;
  height: 2px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--notice-accent, #96a1b5) 55%, transparent);
}

/* 空态 */
.notice-empty {
  margin: 52px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--muted, #8a94a6);
  font-size: 13px;
}

.notice-empty svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
}

/* 未读红点:「更多」菜单项 + 侧栏「更多」按钮 */
.notice-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e05d5d;
  margin-left: 6px;
  vertical-align: 1px;
}

#refreshJobsBtn.has-notice-dot {
  position: relative;
}

#refreshJobsBtn.has-notice-dot::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e05d5d;
  box-shadow: 0 0 0 2px var(--panel, #fff);
}

/* 管理员发布/编辑表单 */
.notice-editor {
  flex: none;
  border: 1px solid color-mix(in srgb, var(--accent, #2f6db7) 26%, var(--border, #dbe2ec));
  border-radius: 16px;
  padding: 16px 18px;
  margin: 16px 24px 0;
  display: grid;
  gap: 12px;
  background: color-mix(in srgb, var(--accent, #2f6db7) 4%, var(--panel, #fff));
  box-shadow: 0 12px 28px -18px rgba(38, 62, 105, 0.35);
}

.notice-editor-head strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.notice-editor label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted, #667085);
}

.notice-editor .notice-email-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text, #1f2937);
}

.notice-editor .notice-email-option input {
  width: 16px;
  height: 16px;
  accent-color: #3d7bd4;
}

.notice-editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.notice-editor-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.notice-editor-actions [data-notice-save] {
  border: none;
  border-radius: 10px;
  padding: 0 18px;
  background: linear-gradient(135deg, #3d7bd4, #6a55c8);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 14px -6px rgba(87, 111, 214, 0.6);
}

.notice-editor-actions [data-notice-save]:hover {
  filter: brightness(1.07);
}

/* 通知中心暗色 */
body.theme-dark:not(.auth-required) .notice-center-panel {
  box-shadow: 0 40px 90px -28px rgba(0, 0, 0, 0.7), 0 6px 22px -10px rgba(0, 0, 0, 0.4);
}

body.theme-dark:not(.auth-required) .notice-hero {
  background:
    radial-gradient(130% 240% at 0% 0%, rgba(90, 140, 210, 0.09), transparent 52%),
    radial-gradient(110% 220% at 100% 0%, rgba(140, 112, 210, 0.07), transparent 48%),
    var(--panel, #12151c);
  border-bottom-color: #353b48;
}

body.theme-dark:not(.auth-required) .notice-entry::before {
  background: #3a4150;
}

body.theme-dark:not(.auth-required) .notice-entry:last-child::before {
  background: linear-gradient(180deg, #3a4150, transparent 78%);
}

body.theme-dark:not(.auth-required) .notice-node {
  background: #1b1f28;
}

body.theme-dark:not(.auth-required) .notice-type-update { --notice-accent: #8db7e8; }
body.theme-dark:not(.auth-required) .notice-type-notice { --notice-accent: #b3a0e4; }
body.theme-dark:not(.auth-required) .notice-type-maintenance { --notice-accent: #e0a06a; }

body.theme-dark:not(.auth-required) .notice-editor {
  background: #1b1f28;
  border-color: #454c5c;
  box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.6);
}

/* 暗色全局 button 规则(0-2-1)会压平品牌渐变钮,这里用更高特异性再断言 */
body.theme-dark:not(.auth-required) button.notice-publish-btn,
body.theme-dark:not(.auth-required) .notice-editor-actions button[data-notice-save] {
  background: linear-gradient(135deg, #4d85d6, #7a5fd0);
  color: #fff;
  border: none;
  box-shadow: 0 8px 18px -8px rgba(60, 80, 170, 0.7);
}

body.theme-dark:not(.auth-required) #refreshJobsBtn.has-notice-dot::after {
  box-shadow: 0 0 0 2px #1b1f28;
}

body.theme-dark:not(.auth-required) .app-more-panel {
  background: var(--panel, #12151c);
  border-color: var(--border);
  box-shadow: 0 24px 56px -12px rgba(0, 0, 0, 0.6), 0 4px 14px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.theme-dark:not(.auth-required) .app-more-id {
  background: linear-gradient(135deg, rgba(90, 140, 210, 0.13), rgba(120, 112, 180, 0.1));
}

body.theme-dark:not(.auth-required) .app-more-id:hover {
  background: linear-gradient(135deg, rgba(90, 140, 210, 0.2), rgba(120, 112, 180, 0.16));
}

body.theme-dark:not(.auth-required) .app-more-account {
  border-bottom-color: var(--border);
}

body.theme-dark:not(.auth-required) .app-more-item:hover {
  background: rgba(99, 156, 222, 0.12);
}

body.theme-dark:not(.auth-required) .app-more-id-text span {
  color: var(--muted);
}

body.theme-dark:not(.auth-required) .app-more-item-desc,
body.theme-dark:not(.auth-required) .app-more-group-title {
  color: var(--muted);
}

body.theme-dark:not(.auth-required) .app-more-item-icon {
  color: #8ba0bd;
}

body.theme-dark:not(.auth-required) .app-more-item:hover .app-more-item-icon {
  color: #9cc4ec;
}

body.theme-dark:not(.auth-required) .app-more-item-danger:hover {
  background: rgba(214, 69, 69, 0.14);
}

body.theme-dark:not(.auth-required) .app-more-divider {
  background: var(--border);
}

body.theme-dark:not(.auth-required) .changelog-date {
  background: rgba(99, 156, 222, 0.16);
  color: #8fb6e8;
}

/* 移动端:精致小面板（位置由 positionAppMoreMenu 按触发器实际位置锚定，不在此固定到屏角） */
body.mobile-ui .app-more-backdrop {
  background: transparent;
}

body.mobile-ui .app-more-panel {
  width: min(236px, calc(100vw - 20px)) !important;
  max-width: min(236px, calc(100vw - 20px)) !important;
  max-height: min(72vh, 520px);
  border-radius: 14px;
  padding: 7px;
  animation: appMoreIn 0.13s ease;
}

.admin-account-manager {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  min-height: 0;
  flex: 1 1 auto;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: 16px;
  background: linear-gradient(180deg, var(--blue-soft), var(--surface-2));
}

.admin-account-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

/* 头部操作一排放齐:搜索 + 导出 CSV + 刷新账号(nowrap,输入框弹性缩放;「搜索」小字已删,placeholder 说明)。 */
.admin-account-head-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.admin-account-search {
  flex: 1 1 160px;
  min-width: 120px;
  max-width: 260px;
  display: flex;
  align-items: center;
}

.admin-account-search input {
  width: 100%;
}

.admin-account-head-actions button {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 「新增用户」折叠面板与账号计数并成一行(计数不再右对齐孤行)。 */
.admin-account-toolbar {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.admin-account-toolbar .admin-account-create {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-account-toolbar .admin-account-count {
  flex: 0 0 auto;
  align-self: center;
  white-space: nowrap;
}

.admin-account-create {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 82%, var(--blue-soft));
}

.admin-account-create summary {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--accent-strong);
  font-weight: 880;
  cursor: pointer;
  list-style: none;
}

.admin-account-create summary::-webkit-details-marker {
  display: none;
}

.admin-account-create summary::after {
  content: "+";
  margin-left: auto;
  color: var(--muted);
  font-weight: 900;
}

.admin-account-create[open] summary {
  border-bottom: 1px solid var(--border-soft);
}

.admin-account-create[open] summary::after {
  content: "-";
}

.admin-account-grid {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) minmax(130px, 1fr) 96px auto;
  gap: 10px;
  align-items: end;
  padding: 10px;
}

.admin-account-grid label {
  display: grid;
  gap: 6px;
  margin: 0;
  color: var(--text);
  font-weight: 850;
}

.admin-account-search {
  display: grid;
  gap: 4px;
  margin: 0;
  color: var(--text);
  font-weight: 850;
}

.admin-account-search span {
  color: var(--muted);
  font-size: 12px;
}

.admin-account-count {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
  white-space: nowrap;
}

.admin-account-list {
  display: grid;
  gap: 10px;
  grid-auto-rows: max-content;
  align-content: start;
  max-height: none;
  min-height: 0;
  overflow: visible;
}

/* 账号卡片：单列纵向堆叠——头部(头像/名字/角色 · 余额 · 查看内容)一整行、控件区拿到整卡宽度，
   两段编辑(重置密码 / 调整额度)左右铺开且各自宽敞，按钮不再被挤成细条。 */
.admin-account-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 94%, var(--blue-soft));
  box-shadow: var(--shadow-card);
}

.admin-account-avatar {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 920;
}

.admin-account-role-badge {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 880;
  white-space: nowrap;
}

.admin-account-role-badge.is-admin {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.admin-account-role-badge.is-user {
  background: var(--surface-3);
  color: var(--muted);
}

.admin-account-points {
  justify-self: end;
  min-width: 0;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  padding: 5px 9px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}

.admin-account-points span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
}

.admin-account-points strong {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text);
  font-weight: 920;
  line-height: 1;
}

/* 已禁用账号：整卡淡红置灰，名字后带「已禁用」红标。 */
.admin-account-disabled-tag {
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--danger, #d92d20) 14%, transparent);
  color: var(--danger, #d92d20);
  font-size: 11px;
  font-style: normal;
  font-weight: 880;
  vertical-align: middle;
}

.admin-account-row.is-disabled {
  border-color: color-mix(in srgb, var(--danger, #d92d20) 32%, var(--border));
  background: color-mix(in srgb, var(--danger, #d92d20) 5%, var(--surface));
}

.admin-account-row.is-disabled .admin-account-avatar {
  filter: grayscale(0.6);
  opacity: 0.7;
}

/* 「按账号查看消耗明细」横幅：管理员从账号卡片进入时显示，带「返回我的」。 */
.admin-usage-view-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 10px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 780;
}

.admin-usage-view-banner[hidden] {
  display: none;
}

.admin-usage-view-banner button {
  flex: 0 0 auto;
}

.admin-account-row input,
.admin-account-row select,
.admin-account-search input {
  min-width: 0;
}

/* ── 账号管理精简列表行:外层只展示重要信息,全部操作/运营数据收进「管理」二级弹窗 ── */
.admin-account-row.is-compact {
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
}

.admin-account-row.is-compact:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
}

.admin-account-main-compact {
  min-width: 0;
}

.admin-account-main-compact strong {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--text);
  font-weight: 900;
}

.admin-account-main-compact span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 账号详情二级弹窗(叠在账号后台弹窗 --z-modal 之上、低于预览详情层 12100) ── */
.admin-account-detail-modal {
  z-index: calc(var(--z-modal) + 40);
}

.admin-account-detail-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(1120px, calc(100vw - 28px));
  /* 固定高度:不随内容伸缩,明细区弹性占满=大而直观;滚动只发生在明细表内。 */
  height: min(920px, calc(100dvh - 24px));
  padding: 18px 20px;
  border-radius: 16px;
  overflow: hidden;
}

.admin-detail-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.admin-detail-head .admin-account-avatar {
  width: 36px;
  height: 36px;
}

.admin-detail-title {
  min-width: 0;
}

.admin-detail-title strong {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 920;
}

.admin-detail-title span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.admin-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 8px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
}

.admin-detail-meta strong {
  color: var(--text);
  font-weight: 880;
}

.admin-detail-section {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 96%, var(--blue-soft));
}

/* 明细区弹性占满面板剩余高度(固定面板下的主体区),表格在其内滚动。 */
.admin-detail-usage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.admin-detail-usage-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.admin-detail-usage-head > strong {
  color: var(--text);
  font-weight: 900;
}

.admin-detail-usage-stats {
  color: var(--muted);
  font-size: 12px;
}

.admin-detail-type-tabs {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
  padding: 3px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-2);
}

.admin-detail-type {
  min-height: 24px;
  padding: 2px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  cursor: pointer;
}

.admin-detail-type.is-active {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.admin-detail-usage-table {
  flex: 1 1 auto;
  min-height: 220px;
  overflow: auto;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface);
}

/* 切换筛选防闪:加载中保留旧行、整表半透明过渡,新数据到达一次性替换(JS 挂 .is-loading)。 */
.admin-detail-usage-table tbody {
  transition: opacity 0.15s ease;
}

.admin-detail-usage-table.is-loading tbody {
  opacity: 0.45;
}

.admin-detail-usage-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.admin-detail-usage-table th,
.admin-detail-usage-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  white-space: nowrap;
}

.admin-detail-usage-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 840;
}

.admin-detail-usage-table td.account-usage-meta {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-detail-usage-table td.negative {
  color: var(--danger, #d92d20);
}

.admin-detail-usage-table td.positive {
  color: var(--success, #157f3d);
}

.admin-detail-usage-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-detail-usage-foot .admin-detail-usage-more {
  margin-right: auto;
}

.admin-detail-ops {
  gap: 10px;
}

.admin-detail-op {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-detail-op label {
  flex: 0 0 64px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 840;
}

.admin-detail-op input {
  flex: 1 1 140px;
  min-width: 0;
}

.admin-detail-op .admin-account-delta {
  flex: 0 1 120px;
}

.admin-detail-danger {
  padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, var(--danger, #d92d20) 34%, var(--border));
}

@media (max-width: 640px) {
  .admin-account-row.is-compact {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    row-gap: 6px;
  }

  /* 手机端余额不藏(直观):换行到第二行整行显示。 */
  .admin-account-row.is-compact .admin-account-points {
    grid-column: 2 / -1;
    grid-row: 2;
    justify-self: start;
  }
}

/* 窄屏全屏化(阈值与通用 mask 顶栏让位规则同界 820):选择器 (0,4,1) 压过通用
   body:not(.auth-required) .modal-mask:not([hidden]) 的 calc(--mobile-topbar-offset) 顶部 padding(0,2,1),
   否则面板被顶下 ~100px 且固定高度导致底部操作区被裁。 */
@media (max-width: 820px) {
  body:not(.auth-required) .admin-account-detail-modal.admin-account-detail-modal:not([hidden]) {
    padding: 0 !important;
    place-items: center !important;
  }

  /* 全屏:!important 压过 .modal-panel 通用 max-width/max-height/radius 与 mobile 皮肤。 */
  .admin-account-detail-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 12px !important;
    border-radius: 0 !important;
  }

  .admin-detail-head {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    row-gap: 6px;
  }

  .admin-detail-head .admin-account-points {
    grid-column: 2 / -1;
    grid-row: 2;
    justify-self: start;
  }

  .admin-detail-type-tabs {
    margin-left: 0;
  }

  /* 表格窄屏横向滚动(列不挤压变形)。 */
  .admin-detail-usage-table table {
    min-width: 560px;
  }

  .admin-detail-op label {
    flex-basis: 100%;
  }
}

.admin-audit-manager {
  display: grid;
  gap: 10px;
  min-height: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: 16px;
  background: linear-gradient(180deg, var(--blue-soft), var(--surface-2));
}

.admin-audit-head {
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
  align-items: end;
}

.admin-audit-head-actions {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.45fr) auto;
  gap: 8px;
  align-items: end;
}

.admin-audit-head-actions input,
.admin-audit-head-actions select {
  min-width: 0;
}

.admin-audit-list {
  display: grid;
  gap: 8px;
  min-height: 0;
}

.admin-audit-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.62fr) minmax(120px, 0.42fr) minmax(220px, 1fr) minmax(210px, 0.72fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 95%, var(--blue-soft));
}

.admin-audit-main,
.admin-audit-target,
.admin-audit-meta {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-audit-main strong,
.admin-audit-target strong {
  overflow: hidden;
  color: var(--text);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-audit-main span,
.admin-audit-target span,
.admin-audit-meta span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-audit-summary {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 760;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-audit-meta {
  justify-items: end;
  text-align: right;
}

.admin-audit-more {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* 管理员后台 · 反馈建议 */
.admin-feedback-manager {
  display: grid;
  gap: 10px;
  min-height: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: 16px;
  background: linear-gradient(180deg, var(--blue-soft), var(--surface-2));
}

.admin-feedback-head {
  grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
  align-items: end;
}

.admin-feedback-head-actions {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(120px, 0.4fr) minmax(120px, 0.4fr) auto;
  gap: 8px;
  align-items: end;
}

.admin-feedback-head-actions input,
.admin-feedback-head-actions select {
  min-width: 0;
}

.admin-feedback-list {
  display: grid;
  gap: 8px;
  min-height: 0;
}

.admin-feedback-row {
  display: grid;
  gap: 8px;
  padding: 12px 12px 12px 15px;
  border: 1px solid var(--border);
  border-left: 4px solid #e09a3c; /* 待处理=橙色条,一眼扫出 */
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 95%, var(--blue-soft));
}

.admin-feedback-row.is-done {
  border-left-color: #34a26b; /* 已处理=绿 */
  opacity: 0.72;
}

.admin-feedback-content {
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.admin-feedback-top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-feedback-type,
.admin-feedback-status {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.admin-feedback-type.type-bug {
  color: #b42318;
  background: color-mix(in srgb, #f97066 22%, var(--surface));
}

.admin-feedback-type.type-suggestion {
  color: #1f6f43;
  background: color-mix(in srgb, #47cd89 22%, var(--surface));
}

.admin-feedback-status.status-open {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
}

.admin-feedback-status.status-done {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 14%, var(--surface));
}

.admin-feedback-time {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.admin-feedback-content {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.admin-feedback-imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.admin-feedback-img {
  width: 96px;
  height: 96px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: zoom-in;
  transition: border-color 0.12s ease, transform 0.12s ease;
}

.admin-feedback-img:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  transform: translateY(-1px);
}
.admin-feedback-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-feedback-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.admin-feedback-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-feedback-toggle {
  margin-left: auto;
  padding: 4px 12px;
  font-size: 12px;
}

.admin-feedback-more {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.admin-recycle-manager {
  display: grid;
  gap: 10px;
  min-height: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: 16px;
  background: linear-gradient(180deg, var(--blue-soft), var(--surface-2));
}

.admin-recycle-head {
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
  align-items: end;
}

.admin-recycle-head-actions {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(120px, 0.4fr) auto auto;
  gap: 8px;
  align-items: center;
}

.admin-recycle-head-actions input,
.admin-recycle-head-actions select {
  min-width: 0;
}

.admin-recycle-list {
  display: grid;
  gap: 8px;
}

.admin-recycle-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.58fr) minmax(110px, 0.34fr) minmax(220px, 1fr) minmax(170px, 0.56fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 95%, var(--blue-soft));
}

.admin-recycle-main,
.admin-recycle-owner,
.admin-recycle-meta {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-recycle-main strong,
.admin-recycle-owner strong {
  overflow: hidden;
  color: var(--text);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-recycle-main span,
.admin-recycle-owner span,
.admin-recycle-meta span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-recycle-detail {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 760;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-recycle-meta {
  justify-items: end;
  text-align: right;
}

.admin-recycle-actions {
  display: inline-flex;
  gap: 6px;
  justify-content: flex-end;
}

.admin-recycle-actions button {
  white-space: nowrap;
}

.admin-recycle-more {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.account-usage-table-wrap {
  min-height: 0;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #ffffff;
}

.account-usage-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.account-usage-more button {
  min-height: 34px;
  padding: 7px 12px;
  white-space: nowrap;
}

.account-usage-history {
  display: grid;
  min-height: 0;
}

.account-usage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}

.account-usage-table th,
.account-usage-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
  line-height: 1.28;
}

.account-usage-table th {
  position: static;
  background: #f7fafc;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.account-usage-table td.negative {
  color: #b42318;
  font-weight: 820;
}

.account-usage-table td.positive {
  color: #2f6db7;
  font-weight: 820;
}

.account-usage-meta {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-usage-empty {
  color: var(--muted);
  text-align: center !important;
  padding: 30px !important;
}

body.theme-dark:not(.auth-required) .account-summary {
  border-color: rgba(125, 183, 255, 0.32);
  background: rgba(47, 109, 183, 0.2);
  color: #dbe9fa;
}

body.theme-dark:not(.auth-required) .account-summary:hover {
  background: rgba(47, 109, 183, 0.3);
}

body.theme-dark:not(.auth-required) .account-usage-tabs {
  border-color: rgba(141, 149, 165, 0.24);
  background: rgba(10, 18, 32, 0.78);
}

body.theme-dark:not(.auth-required) .account-usage-tab {
  color: #a8b6c9;
}

body.theme-dark:not(.auth-required) .account-usage-tab:hover {
  border-color: rgba(125, 183, 255, 0.26);
  background: rgba(47, 109, 183, 0.2);
  color: #dbe9fa;
}

body.theme-dark:not(.auth-required) .account-usage-tab.active {
  border-color: rgba(90, 166, 232, 0.34);
  background: #2f6db7;
  color: #f8fffd;
  box-shadow: 0 10px 26px rgba(16, 24, 40, 0.3);
}

body.theme-dark:not(.auth-required) .account-usage-summary div,
body.theme-dark:not(.auth-required) .account-redeem-card,
body.theme-dark:not(.auth-required) .account-usage-table-wrap {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.92);
}

body.theme-dark:not(.auth-required) .account-redeem-card strong {
  color: #e8eef8;
}

body.theme-dark:not(.auth-required) .account-redeem-card span {
  color: #9fb0c7;
}

body.theme-dark:not(.auth-required) .account-usage-table th {
  background: #101a2a;
  color: #9fb0c7;
}

body.theme-dark:not(.auth-required) .account-usage-table th,
body.theme-dark:not(.auth-required) .account-usage-table td {
  border-bottom-color: rgba(148, 163, 184, 0.18);
}

body.theme-dark:not(.auth-required) .account-usage-summary strong,
body.theme-dark:not(.auth-required) .account-usage-table {
  color: #e8eef8;
}

body.theme-dark:not(.auth-required) .account-usage-summary {
  background: rgba(10, 18, 32, 0.88);
}

body.theme-dark:not(.auth-required) .account-usage-filter {
  border-color: rgba(141, 149, 165, 0.24);
  background: rgba(10, 18, 32, 0.78);
}

body.theme-dark:not(.auth-required) .account-usage-filter button {
  color: #a8b6c9;
}

body.theme-dark:not(.auth-required) .account-usage-filter button:hover {
  border-color: rgba(125, 183, 255, 0.26);
  background: rgba(47, 109, 183, 0.2);
  color: #dbe9fa;
}

body.theme-dark:not(.auth-required) .account-usage-filter button.active {
  border-color: rgba(90, 166, 232, 0.34);
  background: #2f6db7;
  color: #f8fffd;
  box-shadow: 0 10px 22px rgba(16, 24, 40, 0.3);
}

/* 预览舞台暗色唯一收口:图片(.preview-stage)与音视频(.media-preview-stage)同族同色。
   .preview-stage 基础白底在 styles.part1.css:4169,漏掉暗色覆盖=暗色下参考图查看背景刺白的根因。 */
body.theme-dark:not(.auth-required) .media-preview-stage,
body.theme-dark:not(.auth-required) .preview-stage {
  border-color: rgba(83, 90, 104, 0.78);
  background: rgba(10, 18, 32, 0.92);
}

body.theme-dark:not(.auth-required) .media-video-controls {
  border-color: rgba(125, 183, 255, 0.26);
  background: rgba(15, 23, 42, 0.94);
}

body.theme-dark:not(.auth-required) .media-video-time {
  color: #d8e6f4;
}

body.sidebar-collapsed .topbar .top-actions {
  width: 100%;
  min-width: 0;
  gap: 8px;
  overflow: hidden;
}

body.sidebar-collapsed .account-bar {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  min-width: 0;
  gap: 0;
  overflow: hidden;
}

body.sidebar-collapsed .account-summary {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: none;
  height: 36px;
  min-width: 0;
  padding: 0;
  border-radius: 10px;
  font-size: 0;
}

body.sidebar-collapsed .account-summary::before {
  content: none;
  display: none;
}

body.sidebar-collapsed #refreshJobsBtn::after,
body.sidebar-collapsed #themeToggleBtn::after {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: currentColor;
  font-size: 16px;
  line-height: 1;
}

body.sidebar-collapsed #refreshJobsBtn::after {
  content: none;
  display: none;
}

body.sidebar-collapsed #themeToggleBtn::after {
  content: none;
  display: none;
}

@media (max-width: 1100px) {
  .admin-account-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-account-head {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  body:not(.auth-required) #accountUsageModal.account-usage-modal:not([hidden]) {
    place-items: center !important;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
    overflow: hidden !important;
  }

  /* 弹窗形态但固定高(用户定稿:不要贴边全屏,保留边距圆角;高度恒定不随内容缩) */
  #accountUsageModal .account-usage-panel {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    padding: 10px !important;
    border-radius: 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    scrollbar-gutter: stable;
  }

  #accountUsageModal .account-usage-panel *,
  #accountUsageModal .account-usage-panel *::before,
  #accountUsageModal .account-usage-panel *::after {
    box-sizing: border-box;
    min-width: 0;
  }

  #accountUsageModal .modal-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
    padding: 0 0 10px !important;
  }

  #accountUsageModal .modal-head h2 {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  #accountUsageModal .modal-head p {
    font-size: 12px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  #accountUsageModal .modal-head-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    width: auto !important;
    justify-self: end !important;
  }

  #accountUsageModal .account-usage-summary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    background: transparent !important;
  }

  #accountUsageModal .account-usage-summary div {
    min-width: 0 !important;
    width: 100% !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 5px 7px !important;
  }

  #accountUsageModal .account-usage-summary span,
  #accountUsageModal .account-usage-summary strong {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #accountUsageModal .account-usage-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 8 !important;
    gap: 6px !important;
    background: var(--surface) !important;
  }

  /* 手机定稿:tabs 独占一行(短名均分)、「退出登录/关闭」独占一行(两钮均分)。 */
  #accountUsageModal .account-usage-topbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }

  #accountUsageModal .account-usage-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 4px !important;
  }

  #accountUsageModal .account-usage-topbar-actions {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    gap: 6px !important;
  }

  #accountUsageModal .account-usage-topbar-actions button {
    flex: 1 1 0 !important;
    padding: 0 10px !important;
    min-height: 32px !important;
    white-space: nowrap !important;
    font-size: 12px !important;
  }

  /* 手机 tab 用短名 */
  #accountUsageModal .account-usage-tab .tab-label-full {
    display: none !important;
  }

  #accountUsageModal .account-usage-tab .tab-label-short {
    display: inline !important;
  }

  /* 手机端各 tab 头部描述小字隐藏(占空间,标题已达意) */
  #accountUsageModal .admin-redeem-head > div > span {
    display: none !important;
  }

  /* 明细筛选手机紧凑:从/到日期并排、刷新同行(原各占整行=三行浪费) */
  #accountUsageModal .account-usage-tools .account-usage-date {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  #accountUsageModal .account-usage-tools .account-usage-date input {
    width: 100% !important;
    min-width: 0 !important;
  }

  #accountUsageModal #refreshAccountUsageBtn {
    flex: 0 0 auto !important;
  }

  /* 审计/回收站/反馈筛选行手机 2 列网格(原横排溢出屏幕):搜索占整行,其余控件两列 */
  #accountUsageModal .admin-audit-head-actions,
  #accountUsageModal .admin-recycle-head-actions,
  #accountUsageModal .admin-feedback-head-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #accountUsageModal .admin-audit-head-actions input,
  #accountUsageModal .admin-recycle-head-actions input,
  #accountUsageModal .admin-feedback-head-actions input {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  #accountUsageModal .account-usage-tab {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 2px !important;
    min-height: 32px !important;
    padding: 0 6px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
  }

  #accountUsageModal .account-redeem-card,
  #accountUsageModal .admin-account-manager,
  #accountUsageModal .admin-audit-manager,
  #accountUsageModal .admin-recycle-manager,
  #accountUsageModal .admin-redeem-manager,
  #accountUsageModal .account-usage-history {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  #accountUsageModal .account-redeem-card {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
  }

  #accountUsageModal .account-redeem-form {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  #accountUsageModal .account-redeem-form input,
  #accountUsageModal .account-redeem-form button {
    width: 100% !important;
  }

  #accountUsageModal .admin-account-manager,
  #accountUsageModal .admin-audit-manager,
  #accountUsageModal .admin-recycle-manager,
  #accountUsageModal .admin-redeem-manager {
    padding: 10px !important;
    gap: 9px !important;
    border-radius: 14px !important;
  }

  #accountUsageModal .admin-account-head,
  #accountUsageModal .admin-account-head-actions,
  #accountUsageModal .admin-audit-head,
  #accountUsageModal .admin-audit-head-actions,
  #accountUsageModal .admin-audit-row,
  #accountUsageModal .admin-recycle-head,
  #accountUsageModal .admin-recycle-head-actions,
  #accountUsageModal .admin-recycle-row,
  #accountUsageModal .admin-account-grid,
  #accountUsageModal .admin-redeem-head,
  #accountUsageModal .admin-redeem-grid,
  #accountUsageModal .admin-redeem-row {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
  }
  /* 账号精简行(.is-compact)与详情二级弹窗自带窄屏布局;旧账号卡平铺结构的手机紧凑段已随重构删除。 */

  #accountUsageModal .admin-account-grid {
    padding: 9px !important;
  }

  #accountUsageModal .admin-account-grid label,
  #accountUsageModal .admin-redeem-grid label,
  #accountUsageModal .admin-account-search,
  #accountUsageModal .admin-audit-head-actions,
  #accountUsageModal .admin-recycle-head-actions {
    width: 100% !important;
  }

  #accountUsageModal .admin-account-grid input,
  #accountUsageModal .admin-account-grid select,
  #accountUsageModal .admin-account-row input,
  #accountUsageModal .admin-account-row select,
  #accountUsageModal .admin-account-search input,
  #accountUsageModal .admin-audit-head-actions input,
  #accountUsageModal .admin-audit-head-actions select,
  #accountUsageModal .admin-recycle-head-actions input,
  #accountUsageModal .admin-recycle-head-actions select,
  #accountUsageModal .admin-redeem-grid input {
    width: 100% !important;
    max-width: 100% !important;
  }

  #accountUsageModal .admin-account-count {
    justify-content: flex-start !important;
  }

  #accountUsageModal .admin-account-points {
    width: 100% !important;
    justify-content: center !important;
  }

  #accountUsageModal .admin-audit-meta {
    justify-items: start !important;
    text-align: left !important;
  }

  #accountUsageModal .admin-recycle-meta {
    justify-items: start !important;
    text-align: left !important;
  }

  #accountUsageModal .admin-audit-summary,
  #accountUsageModal .admin-recycle-detail {
    white-space: normal !important;
  }

  #accountUsageModal .admin-audit-more,
  #accountUsageModal .admin-recycle-more {
    justify-content: flex-start !important;
  }

  #accountUsageModal .admin-recycle-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  #accountUsageModal .admin-redeem-head > button,
  #accountUsageModal #createAdminAccountBtn,
  #accountUsageModal #createAdminRedeemBtn {
    width: 100% !important;
  }

  #accountUsageModal .admin-redeem-list {
    display: grid !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  #accountUsageModal .admin-redeem-row {
    padding: 9px !important;
  }

  #accountUsageModal .admin-redeem-usedby > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #accountUsageModal .admin-redeem-user {
    width: 100% !important;
    justify-content: space-between !important;
  }

  #accountUsageModal .admin-redeem-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  #accountUsageModal .account-usage-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    margin-bottom: 8px !important;
  }

  #accountUsageModal .account-usage-filter {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  #accountUsageModal .account-usage-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #accountUsageModal .account-usage-table {
    min-width: 620px !important;
  }

  #accountUsageModal .account-usage-more {
    align-items: stretch !important;
  }

  #accountUsageModal .account-usage-more button {
    width: 100% !important;
  }

  .admin-account-grid,
  .admin-account-head-actions {
    grid-template-columns: 1fr;
  }

  .admin-account-points {
    justify-content: flex-start;
    min-width: 0;
  }
}

body.theme-dark:not(.auth-required) .topbar,
body.theme-dark:not(.auth-required) .panel,
body.theme-dark:not(.auth-required) .tool-card,
body.theme-dark:not(.auth-required) .workflow-main,
body.theme-dark:not(.auth-required) .workflow-inspector,
body.theme-dark:not(.auth-required) .infinite-canvas-main,
body.theme-dark:not(.auth-required) .task-detail-panel {
  border-color: rgba(83, 90, 104, 0.72);
  background: rgba(18, 21, 28, 0.94);
  color: var(--text);
}

body.theme-dark:not(.auth-required) .module-tab,
body.theme-dark:not(.auth-required) .topbar .module-tab,
body.theme-dark:not(.auth-required) input,
body.theme-dark:not(.auth-required) select,
body.theme-dark:not(.auth-required) textarea {
  border-color: rgba(83, 90, 104, 0.78);
  background-color: rgba(15, 23, 42, 0.88);
  color: var(--text);
}

body.theme-dark:not(.auth-required) .module-tab strong,
body.theme-dark:not(.auth-required) .brand-text h1,
body.theme-dark:not(.auth-required) h1,
body.theme-dark:not(.auth-required) h2 {
  color: #f8fafc;
}

body.theme-dark:not(.auth-required) .module-tab span,
body.theme-dark:not(.auth-required) .brand-text p,
body.theme-dark:not(.auth-required) .muted {
  color: #9aa8bb;
}

body.theme-dark:not(.auth-required) .context-menu,
body.theme-dark:not(.auth-required) .modal-panel,
body.theme-dark:not(.auth-required) .infinite-card,
body.theme-dark:not(.auth-required) .workflow-toolbar {
  border-color: rgba(83, 90, 104, 0.76);
  background: rgba(18, 21, 28, 0.98);
  color: var(--text);
}

body.theme-dark:not(.auth-required) .context-menu button:hover,
body.theme-dark:not(.auth-required) .context-menu button.module-create:hover {
  background: rgba(51, 65, 85, 0.72);
}

.context-menu .context-icon svg,
.context-menu .context-color-badge svg,
.command-palette-list .context-color-badge svg,
.litegraph.litecontextmenu .ai-lite-menu-badge svg,
.workflow-menu-drag-badge svg,
.workflow-module-icon svg,
.infinite-card-badge svg {
  width: 12.5px;
  height: 12.5px;
  stroke-width: 1.5;
}

body.sidebar-collapsed .account-action {
  display: none !important;
}

body.sidebar-collapsed .topbar {
  gap: 12px;
}

body.sidebar-collapsed .topbar .module-nav {
  gap: 6px;
}

body.sidebar-collapsed .module-tab.has-ui-icon,
body.sidebar-collapsed .topbar .module-tab.has-ui-icon,
body:not(.auth-required).sidebar-collapsed .module-tab.has-ui-icon,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon {
  width: 40px;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding: 0;
  border-radius: 11px;
}

body.sidebar-collapsed .module-tab.has-ui-icon > .ui-icon,
body.sidebar-collapsed .topbar .module-tab.has-ui-icon > .ui-icon,
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: 36px;
  height: 36px;
  border-radius: 11px;
}

.account-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-account);
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.22);
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.account-modal *,
.account-modal *::before,
.account-modal *::after {
  box-sizing: border-box;
}

.account-modal[hidden] {
  display: none;
}

.account-modal:not([hidden]) {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
}

.account-modal-card {
  position: relative;
  width: min(424px, 100%);
  max-width: 100%;
  max-height: calc(100dvh - 32px);
  padding: 26px 24px 22px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.2);
  overflow-x: hidden;
  overflow-y: auto;
}

.account-modal-card h2 {
  margin: 0 0 6px;
  font-size: 21px;
  letter-spacing: -0.01em;
}

.account-modal-card p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}

.account-modal-card label {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text);
}

.account-modal-card input {
  width: 100%;
  min-height: 44px;
  border-radius: 11px;
  transition: border-color var(--motion-fast) var(--ease-ui), box-shadow var(--motion-fast) var(--ease-ui);
}
.account-modal-card input:focus,
.account-modal-card input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.account-modal-card .account-identifier-hint {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.45;
}
.account-modal-card .account-identifier-hint[hidden] { display: none; }

/* 密码框显示/隐藏切换:按钮叠在输入框右侧,输入留出右内边距避免文字被图标遮住。 */
.account-modal-card .account-pw-field {
  position: relative;
  display: block;
}
.account-modal-card .account-pw-field input {
  width: 100%;
  padding-right: 46px;
}
.account-modal-card .account-pw-toggle {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-ui), background var(--motion-fast) var(--ease-ui), transform 0.12s var(--motion-premium-press, ease);
}
.account-modal-card .account-pw-toggle:hover {
  color: var(--text);
  background: rgba(15, 23, 42, 0.06);
}
/* 按下:原地轻微缩放反馈(保留垂直居中的 translateY(-50%),中心不动、不再因全局 :active 的位移而往下跳) */
.account-modal-card .account-pw-toggle:active {
  transform: translateY(-50%) scale(0.9);
}
.account-modal-card .account-pw-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.account-modal-card .account-pw-toggle[aria-pressed="true"] {
  color: var(--accent);
}
.account-modal-card .account-pw-toggle .ui-icon {
  display: grid;
  width: 18px;
  height: 18px;
}
.account-modal-card .account-pw-toggle .ui-icon svg {
  width: 100%;
  height: 100%;
}
body.theme-dark .account-modal-card .account-pw-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* 登录主按钮通栏:登录卡是独立场景,主操作按钮拉伸占满整行。
   没有任何规则显式给它限宽(此前的 82px 只是 flex 默认不拉伸+内容宽),
   故 flex:1 拉伸即可全宽,无需 !important 对抗。 */
.account-modal-card .account-auth-actions {
  display: flex;
}
.account-modal-card .account-auth-actions .primary {
  flex: 1 1 auto;
  width: 100%;
}

/* 登录页填充:欢迎引导语(brand 下) + 按钮下方条款说明(仅登录态显示)。 */
.account-modal-card .account-auth-welcome {
  margin: -4px 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.account-modal-card .account-auth-footnote {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
.account-modal-card .account-auth-footnote[hidden] {
  display: none;
}

/* 记住账号勾选行:单个勾选,复选框+文字横排一行(从字段竖排 grid 排除)。 */
.account-modal-card .account-remember-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -2px 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.account-modal-card .account-remember-row input[type="checkbox"] {
  width: auto;
  min-height: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.account-modal-card .account-remember-row[hidden] {
  display: none;
}

.account-forgot-btn {
  justify-self: end;
  margin: -8px 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}
.account-forgot-btn:hover {
  text-decoration: underline;
}
.account-forgot-btn[hidden] {
  display: none;
}

.account-modal-card .account-email-code-row {
  display: grid;
  gap: 7px;
}
.account-modal-card .account-email-code-row[hidden] {
  display: none;
}
.account-code-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.account-code-field .secondary {
  min-height: 44px;
  white-space: nowrap;
}
.account-email-code-row small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.45;
}
@media (max-width: 420px) {
  .account-code-field {
    grid-template-columns: 1fr;
  }
  .account-code-field .secondary {
    width: 100%;
  }
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 1px solid #d7e3ec;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  cursor: pointer;
}

/* Keep browser layout at native scale; component density should be handled by component styles, not body zoom. */

body {
  zoom: 1;
  width: 100%;
  min-height: 100vh;
}

body:not(.auth-required) .topbar,
body:not(.auth-required) .account-modal {
  height: 100vh;
}

body:not(.auth-required) .account-modal {
  width: 100vw;
  max-width: 100vw;
}

body:not(.auth-required) .layout {
  min-height: 100vh;
}

.account-auth-shell {
  display: block;
  max-width: 100%;
  min-width: 0;
}

.account-auth-intro {
  display: none;
}

.account-modal[data-gate="1"] .account-auth-shell {
  width: min(430px, calc(100vw - 32px));
  max-width: 100%;
}

.account-modal[data-gate="1"] .account-auth-intro,
.account-modal[data-gate="1"] .account-product-preview {
  display: none !important;
}

.account-auth-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  max-width: 620px;
  min-width: 0;
}

.account-auth-logo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1d4a83;
  font-size: 13px;
  font-weight: 900;
}

.account-auth-logo {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2f6db7, #2563a7);
  color: #ffffff;
  font-weight: 900;
  box-shadow: 0 14px 32px rgba(47, 109, 183, 0.2);
}

.account-auth-intro h1 {
  max-width: 560px;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.03;
  letter-spacing: 0;
}

.account-auth-intro p {
  max-width: 560px;
  color: #475467;
  font-size: 16px;
  line-height: 1.75;
}

.account-auth-points {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.account-auth-points span {
  padding: 8px 12px;
  border: 1px solid rgba(47, 109, 183, 0.16);
  border-radius: 999px;
  background: #eaf2fb;
  color: #1d4a83;
  font-size: 13px;
  font-weight: 800;
}

.account-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  margin-bottom: 22px;
  border: 1px solid #dfe6ef;
  border-radius: 12px;
  background: #f7fafc;
}

.account-auth-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #475467;
  font-weight: 800;
  cursor: pointer;
}

.account-auth-tabs button.active {
  background: #ffffff;
  color: var(--accent-strong);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.account-auth-tabs button[hidden] {
  display: none;
}

.account-auth-actions {
  margin-top: 18px;
}

.account-auth-actions .primary,
.account-auth-actions .secondary {
  min-height: 42px;
  padding-inline: 18px;
}

.account-form-brand {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 22px;
}

.account-form-brand > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--brand-gradient);
  color: #ffffff;
  font-weight: 900;
  font-size: 19px;
  box-shadow: var(--brand-glow);
}

.account-form-brand strong,
.account-form-brand small {
  display: block;
}

.account-form-brand strong {
  font-size: 16px;
}

.account-form-brand small {
  margin-top: 3px;
  color: #667085;
}

.account-product-preview {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  min-height: 286px;
  max-width: 100%;
  max-height: min(360px, calc(100dvh - 48px));
  padding: 14px;
  border: 1px solid #dbe6ef;
  border-radius: 18px;
  background: #101828;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 22px 60px rgba(16, 24, 40, 0.16);
  overflow: hidden;
}

.account-preview-sidebar {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
}

.account-preview-sidebar span {
  display: block;
  height: 38px;
  border-radius: 11px;
  background: rgba(255,255,255,0.12);
}

.account-preview-sidebar span.active {
  background: #2f6db7;
}

.account-preview-main {
  display: grid;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  padding: 16px;
  border-radius: 16px;
  background: #f8fafc;
  overflow: hidden;
}

.account-preview-head,
.account-preview-grid,
.account-preview-workflow,
.account-preview-result {
  min-width: 0;
}

.account-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.account-preview-head strong {
  color: #101828;
}

.account-preview-head span {
  padding: 5px 9px;
  border-radius: 999px;
  background: #eaf2fb;
  color: #1d4a83;
  font-size: 12px;
  font-weight: 900;
}

.account-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.account-preview-grid div {
  padding: 12px;
  border: 1px solid #e1e7ef;
  border-radius: 12px;
  background: #ffffff;
}

.account-preview-grid b,
.account-preview-grid small {
  display: block;
}

.account-preview-grid b {
  font-size: 20px;
  color: #101828;
}

.account-preview-grid small {
  margin-top: 4px;
  color: #667085;
}

.account-preview-workflow {
  display: grid;
  grid-template-columns: 1fr 34px 1fr 34px 1fr;
  gap: 6px;
  align-items: center;
}

.account-preview-workflow span {
  min-height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #dbe7f0;
  border-radius: 12px;
  background: #ffffff;
  color: #344054;
  font-size: 12px;
  font-weight: 900;
}

.account-preview-workflow i {
  height: 2px;
  border-radius: 999px;
  background: #2f6db7;
}

.account-preview-result {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.account-preview-result span {
  min-height: 54px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(90, 166, 232, 0.2), rgba(37, 99, 167, 0.16)),
    #eef5f2;
  border: 1px solid #dbe7f0;
}

@media (max-width: 820px) {
  :root {
    --app-zoom: 1;
  }






}

/* Auth gate: polished SaaS-style entrance for closed beta testing. */

.account-preview-windowbar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}

.account-preview-windowbar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cbd5e1;
}

.account-preview-windowbar span:first-child {
  background: #ef4444;
}

.account-preview-windowbar span:nth-child(2) {
  background: #f59e0b;
}

.account-preview-windowbar span:nth-child(3) {
  background: #22c55e;
}

.account-preview-windowbar em {
  margin-left: auto;
  color: #64748b;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

/* 认证安全:滑块拼图验证 + 用户协议勾选(注册必选;登录在多次失败后自适应出现) */
.account-captcha-row {
  display: grid;
  gap: 8px;
}
.captcha-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-3);
  user-select: none;
}
.captcha-bg,
.captcha-piece {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.captcha-piece {
  right: auto;
  width: auto;
  filter: drop-shadow(0 2px 5px rgba(8, 14, 26, 0.45));
  will-change: transform;
}
.captcha-refresh {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: rgba(8, 14, 26, 0.42);
  color: #ffffff;
  font-size: 15px;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-ui);
}
.captcha-refresh:hover { background: rgba(8, 14, 26, 0.62); }
.captcha-track {
  position: relative;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  touch-action: none;
}
.captcha-track-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--accent-soft);
  border-radius: 999px;
  pointer-events: none;
}
.captcha-track-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--muted);
  pointer-events: none;
  transition: opacity var(--motion-fast) var(--ease-ui);
}
.captcha-track.moved .captcha-track-hint { opacity: 0; }
.captcha-handle {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 38px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  font-size: 15px;
  cursor: grab;
  box-shadow: 0 2px 8px rgba(47, 109, 183, 0.35);
  will-change: transform;
  touch-action: none;
}
.captcha-handle:active { cursor: grabbing; }
.captcha-handle:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* 拼图核销态:成功绿 / 失败红抖动 */
.captcha-track.ok { border-color: var(--ok); }
.captcha-track.ok .captcha-track-fill { background: color-mix(in srgb, var(--ok) 26%, transparent); }
.captcha-track.ok .captcha-handle { background: var(--ok); box-shadow: 0 2px 8px rgba(19, 121, 91, 0.4); }
.captcha-track.err { border-color: var(--danger); animation: captcha-shake 0.42s var(--ease-ui); }
.captcha-track.err .captcha-handle { background: var(--danger); }
@keyframes captcha-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* 表单里的「验证条」:点击弹出独立浮层 */
.captcha-verify-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-ui), background var(--motion-fast) var(--ease-ui), color var(--motion-fast) var(--ease-ui);
}
.captcha-verify-bar:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: var(--accent-soft); }
.captcha-verify-bar:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.captcha-verify-mark {
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--muted-2);
  border-radius: 5px;
  background: var(--surface);
  transition: border-color var(--motion-fast) var(--ease-ui), background var(--motion-fast) var(--ease-ui);
}
.captcha-verify-bar.verified {
  border-color: var(--ok);
  background: var(--ok-soft);
  color: var(--ok);
  cursor: default;
}
.captcha-verify-bar.verified .captcha-verify-mark {
  border-color: var(--ok);
  background: var(--ok)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* 独立验证浮层(遮罩 + 居中卡,层级高于 accountModal) */
.captcha-popover {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay) + 60);
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(8, 14, 26, 0.5);
  backdrop-filter: blur(3px);
  animation: hui-fade-in var(--motion-fast) var(--ease-ui);
}
.captcha-popover[hidden] { display: none; }
.captcha-popover-card {
  width: min(360px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--shadow-popover);
  animation: hui-pop-in var(--motion-base) var(--motion-premium-in);
}
.captcha-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.captcha-popover-close {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 19px;
  cursor: pointer;
}
.captcha-popover-close:hover { background: var(--surface-3); color: var(--text); }
.captcha-popover-card .captcha-stage { margin-bottom: 12px; }
@keyframes hui-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hui-pop-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

/* 登录卡底部的注册/登录切换条 */
.account-switch-strip {
  width: 100%;
  margin-top: 10px;
  padding: 11px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-ui), background var(--motion-fast) var(--ease-ui);
}
.account-switch-strip strong {
  margin-left: 4px;
  color: var(--accent);
  font-weight: 800;
}
.account-switch-strip:hover {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  background: var(--accent-soft);
}
/* 选择器提权:agree-row 是 <label>,会被 .account-modal-card label{display:grid} 压成单列、
   把复选框与条款堆成两行。用 .account-modal-card .account-agree-row(类×2)压过 label(类+标签),
   恢复 flex 一行,无需 !important。 */
.account-modal-card .account-agree-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12.5px;
  color: #5c728a;
  line-height: 1.55;
  cursor: pointer;
}
.account-agree-row input[type="checkbox"] {
  width: auto;
  margin-top: 2px;
  accent-color: var(--accent);
}
.account-agree-row a,
.account-auth-footnote a {
  color: var(--accent);
  text-decoration: none;
}
.account-agree-row a:hover,
.account-auth-footnote a:hover { text-decoration: underline; }

/* 《用户协议与免责声明》正文(弹窗内) */
.auth-terms-body { color: #34495f; }

/* 认证组件暗色镜像 */
body.theme-dark .captcha-stage {
  border-color: rgba(141, 149, 165, 0.34);
  background: #121b2b;
}
body.theme-dark .captcha-track {
  border-color: rgba(141, 149, 165, 0.3);
  background: rgba(16, 18, 26, 0.88);
}
body.theme-dark .captcha-track-fill { background: rgba(47, 109, 183, 0.28); }
body.theme-dark .captcha-track-hint { color: #8aa0bb; }
body.theme-dark .captcha-handle {
  background: #2f6db7;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
body.theme-dark .captcha-verify-bar {
  border-color: rgba(141, 149, 165, 0.3);
  background: rgba(16, 18, 26, 0.84);
  color: #9fb1c7;
}
body.theme-dark .captcha-verify-bar:hover {
  border-color: rgba(90, 166, 232, 0.45);
  background: rgba(47, 109, 183, 0.18);
}
body.theme-dark .captcha-verify-mark { border-color: #5b6b80; background: #0d1728; }
body.theme-dark .captcha-popover-close:hover { background: rgba(47, 109, 183, 0.18); }
body.theme-dark .account-switch-strip {
  border-color: rgba(141, 149, 165, 0.3);
  background: rgba(16, 18, 26, 0.84);
  color: #9fb1c7;
}
body.theme-dark .account-switch-strip strong { color: #9cc4ec; }
body.theme-dark .account-switch-strip:hover {
  border-color: rgba(90, 166, 232, 0.45);
  background: rgba(47, 109, 183, 0.18);
}
body.theme-dark .account-agree-row { color: #9fb1c7; }
body.theme-dark .account-agree-row input[type="checkbox"] {
  accent-color: #5aa6e8;
  color-scheme: dark;
  outline: 1px solid rgba(141, 149, 165, 0.55);
  outline-offset: -1px;
  border-radius: 3px;
}
body.theme-dark .auth-terms-body { color: #c7d4e6; }

/* 新手引导(首次登录三步上手) */
/* Bug 反馈 / 建议弹窗 */
.feedback-panel {
  width: min(520px, calc(100vw - 24px));
  display: grid;
  gap: 14px;
}
.feedback-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.feedback-head h2 { margin: 0; font-size: 17px; color: var(--text); }
.feedback-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.feedback-body { display: grid; gap: 12px; }
.feedback-type {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
  width: fit-content;
}
.feedback-type-btn {
  padding: 6px 16px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.feedback-type-btn.active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.12);
}
.feedback-field { display: grid; gap: 6px; }
.feedback-field > span { font-size: 12.5px; font-weight: 800; color: var(--text); }
.feedback-field textarea,
.feedback-field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}
.feedback-field textarea:focus,
.feedback-field input:focus {
  outline: none;
  border-color: var(--accent);
}
.feedback-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.feedback-img-thumb {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.feedback-img-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.feedback-img-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(16, 24, 40, 0.62);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.feedback-img-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 84px;
  height: 84px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}
.feedback-img-add span { font-size: 11.5px; font-weight: 600; }
.feedback-img-add:hover { border-color: var(--accent); color: var(--accent); }
.feedback-foot { display: flex; justify-content: flex-end; }
.feedback-foot .primary { min-width: 120px; }

/* 新手引导:左侧品牌渐变 Hero + 右侧内容的两栏大版式(贴合站点品牌色)。 */
/* ═══ 新手引导 v2:左「步骤清单」导轨 + 右「场景插画 + 要点」;细进度条;插画为抽象蓝图风(纯 CSS,克制动效) ═══ */
.onboarding-panel {
  position: relative;
  width: min(880px, calc(100vw - 28px));
  min-height: 496px;
  max-height: calc(100dvh - 28px);
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  border-radius: 24px;
  box-shadow: 0 30px 80px -34px rgba(15, 23, 42, 0.52), 0 10px 26px -14px rgba(15, 23, 42, 0.22);
  animation: obPanelIn 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes obPanelIn { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .onboarding-panel, .ob-slide { animation: none; } }
.onboarding-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 20px 18px;
  color: #fff;
  background: radial-gradient(120% 90% at 18% 0%, rgba(255, 255, 255, 0.16), transparent 52%),
    var(--brand-gradient, linear-gradient(135deg, #2f6db7 0%, #4f63dd 52%, #7a59e0 100%));
  overflow: hidden;
}
.onboarding-hero::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -70px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}
.onboarding-hero-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; }
.onboarding-logo {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  padding: 6px;
  background: #fff;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.3);
}
.onboarding-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.onboarding-hero-brand { display: flex; flex-direction: column; line-height: 1.2; }
.onboarding-hero-brand strong { font-size: 16px; font-weight: 800; }
.onboarding-hero-brand span { font-size: 12px; color: rgba(255, 255, 255, 0.78); }
/* 步骤清单导轨:当前高亮、已看打勾、全部可点跳转 */
.onboarding-rail { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.ob-rail-step {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  width: 100%;
  min-height: 44px;
  padding: 4px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ob-rail-step:hover { background: rgba(255, 255, 255, 0.1); }
.ob-rail-step.is-current { background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.ob-rail-step:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.92); outline-offset: 2px; }
.ob-rail-marker {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  font-size: 12.5px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.38);
  background: transparent;
}
.ob-rail-step.is-current .ob-rail-marker { background: #fff; color: var(--ob-accent, #2f6db7); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22); }
.ob-rail-step.is-done .ob-rail-marker { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7); }
.ob-rail-marker svg { width: 14px; height: 14px; }
.ob-rail-text { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; text-align: left; }
.ob-rail-text strong { font-size: 13.5px; line-height: 1.2; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-rail-text small { font-size: 11px; line-height: 1.25; color: rgba(255, 255, 255, 0.66); font-weight: 600; }
.ob-rail-step:not(.is-current) .ob-rail-text strong { color: rgba(255, 255, 255, 0.82); }
.onboarding-hero-tip { position: relative; z-index: 1; margin: auto 0 0; font-size: 11.5px; color: rgba(255, 255, 255, 0.6); line-height: 1.5; }

.onboarding-body {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 26px 20px;
  min-width: 0;
}
.onboarding-skip {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 5;
  background: transparent;
  border: 0;
  color: #8190a5;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 5px 11px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}
.onboarding-skip:hover { background: rgba(120, 135, 160, 0.14); color: #5c728a; }
.onboarding-stage {
  flex: 1;
  min-height: 0;
  display: grid;
  align-content: start;
  padding: 14px 0 8px;
}
.ob-slide { display: grid; gap: 16px; animation: obFade 0.28s ease; }
@keyframes obFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* 场景插画卡:淡强调色底 + 蓝图网格,内容为抽象几何 */
.ob-slide-scene {
  position: relative;
  height: 178px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ob-accent, #2f6db7) 16%, var(--border, #e3e9f2));
  background:
    linear-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px),
    linear-gradient(135deg, color-mix(in srgb, var(--ob-accent, #2f6db7) 7%, #fbfdff), color-mix(in srgb, var(--ob-accent, #2f6db7) 3%, #f6f9fd));
  background-size: 22px 22px, 22px 22px, auto;
}
.ob-scene { position: absolute; inset: 0; }
/* —— 场景1 总览:迷你应用窗 —— */
.ob-mock-window {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(300px, 74%);
  height: 128px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--ob-accent, #2f6db7) 55%, transparent);
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: 22px 1fr;
}
.ob-mock-dots { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; padding: 0 10px; border-bottom: 1px solid rgba(148, 163, 184, 0.2); }
.ob-mock-dots b { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--ob-accent, #2f6db7) 34%, #dbe4ef); }
.ob-mock-rail { display: flex; flex-direction: column; align-items: center; gap: 7px; padding-top: 10px; border-right: 1px solid rgba(148, 163, 184, 0.2); }
.ob-mock-rail b { width: 16px; height: 16px; border-radius: 6px; background: color-mix(in srgb, var(--ob-accent, #2f6db7) 16%, #edf2f8); }
.ob-mock-rail b:first-child { background: var(--ob-accent, #2f6db7); }
.ob-mock-content { padding: 10px 12px; display: grid; gap: 7px; align-content: start; }
.ob-mock-content b { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ob-accent, #2f6db7) 22%, #e6edf6); }
.ob-mock-content b.w60 { width: 60%; }
.ob-mock-content b.w40 { width: 40%; opacity: 0.7; }
.ob-mock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 2px; }
.ob-mock-grid u { display: block; height: 22px; border-radius: 6px; background: color-mix(in srgb, var(--ob-accent, #2f6db7) 12%, #eef3f9); }
/* —— 场景2 灵感广场:三张案例卡,主卡带 CTA —— */
.ob-scene-cases { display: flex; align-items: center; justify-content: center; gap: 14px; }
.ob-mock-case {
  width: 72px;
  height: 96px;
  border-radius: 12px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--ob-accent, #2f6db7) 22%, #eaf1f9), color-mix(in srgb, var(--ob-accent, #2f6db7) 9%, #f5f9fd));
  border: 1px solid rgba(148, 163, 184, 0.28);
  transform: translateY(6px);
}
.ob-mock-case.is-hero {
  position: relative;
  width: 96px;
  height: 122px;
  transform: none;
  background: linear-gradient(150deg, color-mix(in srgb, var(--ob-accent, #2f6db7) 58%, #6f92c9), color-mix(in srgb, var(--ob-accent, #2f6db7) 30%, #9db9dd));
  box-shadow: 0 18px 34px -16px color-mix(in srgb, var(--ob-accent, #2f6db7) 70%, transparent);
}
.ob-mock-cta {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--ob-accent, #2f6db7);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2);
}
/* —— 场景3 无限画布:节点连线 —— */
.ob-scene-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ob-scene-canvas svg path {
  fill: none;
  stroke: color-mix(in srgb, var(--ob-accent, #2f6db7) 66%, #9db9dd);
  stroke-width: 2;
  stroke-dasharray: 6 6;
  animation: obDashFlow 1.6s linear infinite;
}
@keyframes obDashFlow { to { stroke-dashoffset: -24; } }
.ob-mock-node {
  position: absolute;
  width: 64px;
  height: 48px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.32);
  box-shadow: 0 10px 22px -12px rgba(15, 23, 42, 0.3);
  padding: 7px 8px;
  display: grid;
  gap: 5px;
  align-content: start;
}
.ob-mock-node b { height: 7px; width: 70%; border-radius: 4px; background: var(--ob-accent, #2f6db7); opacity: 0.85; }
.ob-mock-node i { height: 14px; border-radius: 5px; background: color-mix(in srgb, var(--ob-accent, #2f6db7) 14%, #edf2f8); }
.ob-scene-canvas .n1 { left: 10%; top: 18%; }
.ob-scene-canvas .n2 { left: 39%; top: 42%; animation: obNodeFloat 3.4s ease-in-out infinite alternate; }
.ob-scene-canvas .n3 { left: 68%; top: 22%; }
@keyframes obNodeFloat { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
/* —— 场景4 工作流:流水线 —— */
.ob-mock-belt {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 2px;
  background: color-mix(in srgb, var(--ob-accent, #2f6db7) 34%, #cfdcec);
}
.ob-mock-machine {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  border-radius: 11px;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.32);
  box-shadow: 0 8px 18px -10px rgba(15, 23, 42, 0.28);
}
.ob-scene-workflow .m1 { left: 12%; }
.ob-scene-workflow .m2 { left: 34%; }
.ob-scene-workflow .m3 { left: 56%; }
.ob-scene-workflow .m4 { left: 78%; }
.ob-mock-machine.is-active {
  border-color: var(--ob-accent, #2f6db7);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ob-accent, #2f6db7) 16%, transparent), 0 10px 20px -10px color-mix(in srgb, var(--ob-accent, #2f6db7) 60%, transparent);
  background: linear-gradient(150deg, #fff, color-mix(in srgb, var(--ob-accent, #2f6db7) 12%, #fff));
}
.ob-mock-pulse {
  position: absolute;
  left: 12%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--ob-accent, #2f6db7);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ob-accent, #2f6db7) 22%, transparent);
  animation: obPulseMove 3s cubic-bezier(0.45, 0.05, 0.4, 0.95) infinite;
}
@keyframes obPulseMove {
  0% { transform: translateX(0); opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateX(min(58vw, 430px)); opacity: 0; }
}
.ob-scene-workflow { container-type: inline-size; }
@supports (width: 1cqw) {
  @keyframes obPulseMove {
    0% { transform: translateX(0); opacity: 0; }
    8% { opacity: 1; }
    92% { opacity: 1; }
    100% { transform: translateX(66cqw); opacity: 0; }
  }
}
/* —— 场景5 生成:进度卡 + 成图 —— */
.ob-mock-gen {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(280px, 72%);
  padding: 16px 16px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow: 0 16px 32px -16px color-mix(in srgb, var(--ob-accent, #2f6db7) 55%, transparent);
  display: grid;
  gap: 12px;
}
.ob-mock-genbar { display: block; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ob-accent, #2f6db7) 12%, #edf2f8); overflow: hidden; }
.ob-mock-genbar b { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ob-accent, #2f6db7), color-mix(in srgb, var(--ob-accent, #2f6db7) 60%, #9f8df0)); transform-origin: 0 50%; animation: obGenFill 2.6s cubic-bezier(0.3, 0.1, 0.3, 1) infinite; }
@keyframes obGenFill { 0% { transform: scaleX(0.08); } 78% { transform: scaleX(1); } 100% { transform: scaleX(1); } }
.ob-mock-genpics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ob-mock-genpics u { display: block; height: 44px; border-radius: 8px; background: linear-gradient(150deg, color-mix(in srgb, var(--ob-accent, #2f6db7) 30%, #dfe9f5), color-mix(in srgb, var(--ob-accent, #2f6db7) 12%, #eef4fa)); animation: obPicIn 2.6s ease infinite; opacity: 0; }
.ob-mock-genpics u:nth-child(2) { animation-delay: 0.25s; }
.ob-mock-genpics u:nth-child(3) { animation-delay: 0.5s; }
@keyframes obPicIn { 0% { opacity: 0; transform: translateY(4px); } 34% { opacity: 1; transform: none; } 92% { opacity: 1; } 100% { opacity: 1; } }
.ob-mock-spark { position: absolute; right: 14%; top: 18%; font-size: 18px; color: var(--ob-accent, #2f6db7); animation: obNodeFloat 2.8s ease-in-out infinite alternate; }

.ob-slide-copy { display: grid; gap: 9px; justify-items: start; }
.ob-slide-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--ob-accent, #2f6db7);
  background: color-mix(in srgb, var(--ob-accent, #2f6db7) 12%, var(--surface, #fff));
}
.ob-slide-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.3px; color: #1d2939; }
.ob-slide-desc { margin: 0; font-size: 13.5px; line-height: 1.6; color: #5c728a; }
.ob-slide-points { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.ob-slide-points li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.55; color: #45556c; }
.ob-slide-points li svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--ob-accent, #2f6db7); }
.onboarding-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.onboarding-progress { display: flex; align-items: center; gap: 10px; flex: 1 1 160px; min-width: 0; }
.onboarding-progress-count { flex: none; font-size: 12px; font-weight: 800; color: #8190a5; font-variant-numeric: tabular-nums; }
.onboarding-progress-track { flex: 1 1 auto; max-width: 180px; height: 4px; border-radius: 999px; background: rgba(120, 135, 160, 0.2); overflow: hidden; }
.onboarding-progress-track b { display: block; height: 100%; width: 20%; border-radius: inherit; background: var(--ob-accent, var(--accent, #2f6db7)); transition: width 0.3s cubic-bezier(0.3, 0.1, 0.3, 1); }
.onboarding-nav { display: flex; align-items: center; gap: 8px; }
.onboarding-nav .primary { min-width: 108px; }

/* 内容超高时右栏内部滚动,英雄栏 + 底部操作条不动(短窗口/长文案兜底) */
.onboarding-body { overflow: hidden; }
.onboarding-stage { overflow-y: auto; overscroll-behavior: contain; }

/* ============ 手机端:单列(顶部渐变头 + 横向步骤点,底部操作条) ============ */
@media (max-width: 680px) {
  .onboarding-panel {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
    width: calc(100vw - 20px);
    min-height: 0;
    max-height: calc(100dvh - 20px);
    border-radius: 20px;
  }
  .onboarding-hero { flex: none; gap: 12px; padding: 15px 16px 13px; }
  .onboarding-hero::after { display: none; }
  .onboarding-hero-tip { display: none; }
  /* 步骤导轨改横向:只留可点圆点(标签收进正文标题),当前步实心、已看打勾、未看描边 */
  .onboarding-rail { flex-direction: row; justify-content: center; gap: 12px; margin-top: 0; }
  .ob-rail-step { width: auto; padding: 0; border-radius: 999px; }
  .ob-rail-step:hover, .ob-rail-step.is-current { background: transparent; box-shadow: none; }
  .ob-rail-text { display: none; }
  .ob-rail-marker { width: 24px; height: 24px; font-size: 12px; }
  .onboarding-skip { color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.15); }
  .onboarding-skip:hover { color: #fff; background: rgba(255, 255, 255, 0.26); }
  .onboarding-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 16px 16px 14px; }
  .onboarding-stage { flex: 1; min-height: 0; padding: 4px 0 2px; overflow-y: auto; }
  .ob-slide { gap: 14px; }
  .ob-slide-scene { height: 148px; border-radius: 14px; }
  .ob-slide-title { font-size: 20px; }
  .ob-slide-desc { font-size: 13px; }
  .ob-slide-points li { font-size: 12.5px; }
  /* 步骤指示交给顶部圆点,底部只留操作按钮 */
  .onboarding-progress { display: none; }
  .onboarding-foot { margin-top: 12px; flex: none; }
  .onboarding-nav { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; }
  .onboarding-nav [data-ob-prev] { grid-column: 1; }
  .onboarding-nav .primary { grid-column: 2; min-width: 0; width: 100%; }
  .onboarding-nav [data-ob-cases] { grid-column: 1 / -1; width: 100%; }
}

/* ============ 暗色 ============ */
body.theme-dark .onboarding-skip { color: #9aa6b8; }
body.theme-dark .onboarding-skip:hover { color: #cdd6e4; background: rgba(148, 163, 184, 0.16); }
body.theme-dark .ob-slide-title { color: #eef2f8; }
body.theme-dark .ob-slide-desc { color: #a7b2c4; }
body.theme-dark .ob-slide-points li { color: #b9c3d4; }
body.theme-dark .ob-slide-eyebrow { background: color-mix(in srgb, var(--ob-accent, #2f6db7) 26%, rgba(20, 24, 33, 0.6)); color: color-mix(in srgb, var(--ob-accent, #2f6db7) 55%, #fff); }
body.theme-dark .ob-slide-scene {
  border-color: color-mix(in srgb, var(--ob-accent, #2f6db7) 28%, rgba(148, 163, 184, 0.28));
  background:
    linear-gradient(rgba(148, 163, 184, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.1) 1px, transparent 1px),
    linear-gradient(135deg, color-mix(in srgb, var(--ob-accent, #2f6db7) 22%, #12161f), color-mix(in srgb, var(--ob-accent, #2f6db7) 11%, #0d1017));
  background-size: 22px 22px, 22px 22px, auto;
}
body.theme-dark .onboarding-progress-count { color: #93a0b4; }
/* 全站暗色 button 规则(body.theme-dark:not(.auth-required) button:not([data-ui-compact-control]),特异度 0-3-2)
   会给导轨步骤塞底色、抹掉主按钮品牌渐变;这里用「加一层容器类 + button.类」把特异度顶到 0-4-x 收回,不走 !important。 */
body.theme-dark:not(.auth-required) .onboarding-rail button.ob-rail-step { background: transparent; }
body.theme-dark:not(.auth-required) .onboarding-rail button.ob-rail-step:hover { background: rgba(255, 255, 255, 0.1); }
body.theme-dark:not(.auth-required) .onboarding-rail button.ob-rail-step.is-current { background: rgba(255, 255, 255, 0.16); }
body.theme-dark:not(.auth-required) .onboarding-nav button.primary {
  background: linear-gradient(135deg, var(--ob-accent, #2f6db7), color-mix(in srgb, var(--ob-accent, #2f6db7) 52%, #7a59e0));
  color: #fff;
  border-color: transparent;
}

@media (max-width: 720px) {
  .onboarding-panel {
    width: min(460px, calc(100vw - 24px));
    min-height: 0;
    grid-template-columns: 1fr;
  }
  .onboarding-hero { gap: 12px; padding: 14px 16px 12px; }
  .onboarding-hero::after { display: none; }
  .onboarding-hero-tip { display: none; }
  /* 手机端导轨横排,只留圆点序号(文字省空间) */
  .onboarding-rail { flex-direction: row; justify-content: center; gap: 6px; margin-top: 0; }
  .ob-rail-step { width: auto; padding: 5px; border-radius: 999px; }
  .ob-rail-text { display: none; }
  .onboarding-body { padding: 16px 18px 14px; }
  .onboarding-stage { min-height: 0; padding: 10px 0 4px; }
  .ob-slide-scene { height: 128px; }
  .ob-slide-title { font-size: 19px; }
  .ob-mock-window { height: 104px; }
  .ob-mock-case { width: 56px; height: 76px; }
  .ob-mock-case.is-hero { width: 76px; height: 96px; }
}

/* 暗色:场景卡转深、文案提亮;插画里的白色元素改深面板色 */
body.theme-dark .ob-slide-title { color: #e7eef9; }
body.theme-dark .ob-slide-desc { color: #9fb1c7; }
body.theme-dark .ob-slide-points li { color: #c4d2e2; }
body.theme-dark .ob-slide-scene {
  border-color: color-mix(in srgb, var(--ob-accent, #2f6db7) 30%, rgba(152, 161, 178, 0.2));
  background:
    linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
    linear-gradient(135deg, color-mix(in srgb, var(--ob-accent, #2f6db7) 16%, #10141c), color-mix(in srgb, var(--ob-accent, #2f6db7) 7%, #0d1017));
  background-size: 22px 22px, 22px 22px, auto;
}
body.theme-dark :is(.ob-mock-window, .ob-mock-node, .ob-mock-machine, .ob-mock-gen) { background: #171b24; border-color: rgba(152, 161, 178, 0.28); }
body.theme-dark .ob-mock-machine.is-active { background: linear-gradient(150deg, #1b2029, color-mix(in srgb, var(--ob-accent, #2f6db7) 22%, #171b24)); }
body.theme-dark :is(.ob-mock-content b, .ob-mock-grid u, .ob-mock-node i, .ob-mock-genbar) { background: rgba(152, 161, 178, 0.16); }
body.theme-dark .ob-mock-rail b { background: rgba(152, 161, 178, 0.18); }
body.theme-dark .ob-mock-rail b:first-child { background: var(--ob-accent, #2f6db7); }
body.theme-dark .onboarding-progress-track { background: rgba(152, 161, 178, 0.2); }

@keyframes authShellIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes authCardIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

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

/* 绘流 AI 登录页：品牌深色背景铺满整屏，左侧不再作为独立大卡片。 */

/* 绘流 AI 内部工作台皮肤：统一登录后的页面基调，不改变功能结构。 */
body:not(.auth-required) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(241, 245, 249, 0.72)),
    linear-gradient(135deg, rgba(47, 109, 183, 0.05), rgba(37, 99, 167, 0.04)),
    linear-gradient(rgba(203, 213, 225, 0.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(203, 213, 225, 0.28) 1px, transparent 1px),
    #f5f8fb;
  background-size: auto, auto, 32px 32px, 32px 32px, auto;
}

body:not(.auth-required) .topbar {
  border-right-color: rgba(203, 213, 225, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95)),
    #ffffff;
  box-shadow: 10px 0 34px rgba(15, 23, 42, 0.06);
}

body:not(.auth-required) .brand-block {
  border-bottom-color: rgba(203, 213, 225, 0.72);
}

body:not(.auth-required) .brand-text h1 {
  color: #0f172a;
  font-size: 19px;
}

body:not(.auth-required) .brand-text p {
  color: #64748b;
  font-weight: 700;
}

body:not(.auth-required) .brand-text::before {
  border-color: rgba(47, 109, 183, 0.2);
  border-radius: 12px;
  background:
    radial-gradient(circle at 26% 24%, rgba(255, 255, 255, 0.95) 0 10%, transparent 11%),
    linear-gradient(135deg, #2f6db7 0%, #2563a7 100%);
  box-shadow: 0 14px 30px rgba(47, 109, 183, 0.18);
}

body:not(.auth-required) .module-tab,
body:not(.auth-required) .topbar .module-tab {
  min-height: 64px;
  border-color: #dce6ef;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

body:not(.auth-required) .module-tab:hover {
  border-color: rgba(47, 109, 183, 0.28);
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}

body:not(.auth-required) .module-tab.active {
  border-color: rgba(47, 109, 183, 0.4);
  background: linear-gradient(135deg, #eaf2fb 0%, #f6fbff 100%);
  box-shadow: inset 4px 0 0 #2f6db7, 0 10px 24px rgba(47, 109, 183, 0.08);
}

body:not(.auth-required) .module-tab strong {
  color: #0f172a;
}

body:not(.auth-required) .module-tab span {
  color: #64748b;
}

body:not(.auth-required) .panel,
body:not(.auth-required) .tool-card,
body:not(.auth-required) .workflow-sidebar,
body:not(.auth-required) .workflow-main,
body:not(.auth-required) .workflow-inspector,
body:not(.auth-required) .workflow-toolbar,
body:not(.auth-required) .infinite-canvas-main,
body:not(.auth-required) .infinite-canvas-inspector,
body:not(.auth-required) .infinite-canvas-toolbar,
body:not(.auth-required) .task-detail-panel {
  border-color: rgba(203, 213, 225, 0.86);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
}

body:not(.auth-required) .layout > .panel {
  overflow: hidden;
}

body:not(.auth-required) .tabs {
  padding: 6px;
  gap: 6px;
  border-color: #dce6ef;
  border-radius: 16px;
  background: #f4f8fb;
}

body:not(.auth-required) .tab {
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #475569;
  font-weight: 900;
}

body:not(.auth-required) .tab:hover {
  background: rgba(255, 255, 255, 0.76);
}

body:not(.auth-required) .tab.active {
  background: #ffffff;
  color: var(--accent-strong);
  box-shadow: inset 0 -2px 0 var(--accent), 0 1px 2px rgba(16, 24, 40, 0.10);
}

body:not(.auth-required) input,
body:not(.auth-required) select,
body:not(.auth-required) textarea {
  border-color: #d6e1eb;
  border-radius: 11px;
  background-color: rgba(255, 255, 255, 0.92);
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

body:not(.auth-required) input:hover,
body:not(.auth-required) select:hover,
body:not(.auth-required) textarea:hover {
  border-color: #b9c9d8;
  background-color: #ffffff;
}

body:not(.auth-required) input:focus,
body:not(.auth-required) select:focus,
body:not(.auth-required) textarea:focus {
  border-color: #2f6db7;
  box-shadow: 0 0 0 3px rgba(47, 109, 183, 0.12);
  outline: none;
}

body:not(.auth-required) .primary {
  border: 0;
  border-radius: 11px;
  background: var(--brand-gradient);
  color: #ffffff;
  box-shadow: var(--brand-glow);
}

body:not(.auth-required) .primary:hover {
  background: var(--brand-gradient-strong);
  box-shadow: var(--brand-glow-strong);
}

body:not(.auth-required) .secondary,
body:not(.auth-required) .job-reuse,
body:not(.auth-required) .job-favorite,
body:not(.auth-required) .icon-button {
  border-color: #cfe0f4;
  border-radius: 11px;
  background: #f8fbff;
  color: #2563a7;
}

body:not(.auth-required) .secondary:hover,
body:not(.auth-required) .job-reuse:hover,
body:not(.auth-required) .job-favorite:hover,
body:not(.auth-required) .icon-button:hover {
  border-color: #9fbce4;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(37, 99, 167, 0.11);
}

/* 媒体图上的磨砂图标按钮(.gen-icon-btn,含卡片悬浮删除)保持 .gen-tools 统一方块视觉,
   不吃这层 danger 皮肤;用 :where 豁免=零特异性,其余 danger 按钮层叠关系不变。 */
body:not(.auth-required) .danger:where(:not(.gen-icon-btn)) {
  border-color: #fecaca;
  border-radius: 11px;
  background: #fff7f7;
  color: #b42318;
}

body:not(.auth-required) .drop-zone,
body:not(.auth-required) .upload-box,
body:not(.auth-required) .file-summary,
body:not(.auth-required) .plan-summary-inline,
body:not(.auth-required) .advanced,
body:not(.auth-required) .workflow-check-panel,
body:not(.auth-required) .workflow-inspector-empty,
body:not(.auth-required) .workflow-media-library-card,
body:not(.auth-required) .workflow-project-item {
  border-color: #dbe7f0;
  border-radius: 14px;
  background: rgba(248, 251, 253, 0.82);
}

body:not(.auth-required) .drop-zone {
  border-style: dashed;
}

body:not(.auth-required) .drop-zone:hover,
body:not(.auth-required) .drop-zone.drag-over {
  border-color: rgba(47, 109, 183, 0.48);
  background: #f0faf5;
  box-shadow: inset 0 0 0 1px rgba(47, 109, 183, 0.08);
}

body:not(.auth-required) .monitor-header,
body:not(.auth-required) .workflow-head,
body:not(.auth-required) .infinite-canvas-head,
body:not(.auth-required) .tool-page-head {
  color: #0f172a;
}

body:not(.auth-required) .monitor-header h2,
body:not(.auth-required) .workflow-head h2,
body:not(.auth-required) .tool-page-head h2,
body:not(.auth-required) .workflow-inspector-head h2 {
  font-weight: 900;
}

body:not(.auth-required) .job-list {
  gap: 6px;
}

body:not(.auth-required) .job-row,
body:not(.auth-required) .job-select {
  border-radius: 11px;
}

body:not(.auth-required) .job-row.selected .job-select {
  border-color: rgba(47, 109, 183, 0.55);
  background: #eaf2fb;
  box-shadow: inset 3px 0 0 #2f6db7;
}

body:not(.auth-required) .job-meta span,
body:not(.auth-required) .state-pill,
body:not(.auth-required) .workflow-dirty-badge {
  border-radius: 999px;
  background: #f7fafc;
}

body:not(.auth-required) .workflow-shell {
  gap: 12px;
}

body:not(.auth-required) .workflow-sidebar,
body:not(.auth-required) .workflow-inspector,
body:not(.auth-required) .infinite-canvas-inspector {
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.07);
}

body:not(.auth-required) .workflow-lite-wrap,
body:not(.auth-required) .infinite-canvas-stage {
  border-color: rgba(213, 220, 229, 0.9);
  border-radius: 16px;
  background-color: #f4f7fa;
}

body:not(.auth-required) .workflow-toolbar,
body:not(.auth-required) .infinite-canvas-toolbar {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.055);
}

body:not(.auth-required) .infinite-canvas-toolbar {
  border: 0;
  background: transparent;
  box-shadow: none;
}

body:not(.auth-required) .infinite-canvas-stage {
  border: 0;
  border-radius: 0;
}

body:not(.auth-required) .layout.canvas-layout .infinite-canvas-main {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body:not(.auth-required) .layout.canvas-layout .infinite-canvas-stage {
  background-color: var(--canvas-surface);
  background-image: var(--canvas-grid-image);
  background-position: 0 0;
  background-size: var(--canvas-grid-size-current, 28px) var(--canvas-grid-size-current, 28px);
}

body:not(.auth-required) .infinite-canvas-stage.space-hand,
body:not(.auth-required) .infinite-canvas-stage.space-hand .infinite-card,
body:not(.auth-required) .infinite-canvas-stage.hand-tool,
body:not(.auth-required) .infinite-canvas-stage.hand-tool .infinite-card {
  cursor: grab !important;
}

body:not(.auth-required) .infinite-canvas-stage.panning,
body:not(.auth-required) .infinite-canvas-stage.panning .infinite-card {
  cursor: grabbing !important;
}

body:not(.auth-required) .infinite-canvas-stage.cut-tool,
body:not(.auth-required) .infinite-canvas-stage.cut-tool .infinite-card,
body:not(.auth-required) .infinite-canvas-stage.cut-tool .infinite-canvas-link {
  cursor: crosshair !important;
}

body:not(.auth-required) .infinite-canvas-selection-box.add {
  border-color: var(--canvas-selection-frame-color);
  background: var(--canvas-selection-frame-fill);
  box-shadow: inset 0 0 0 1px var(--canvas-selection-frame-inset);
}

body:not(.auth-required) .infinite-canvas-selection-box.subtract {
  border-color: var(--canvas-selection-subtract-frame-color);
  background: var(--canvas-selection-subtract-frame-fill);
  box-shadow: inset 0 0 0 1px var(--canvas-selection-frame-inset);
}

body:not(.auth-required) .infinite-canvas-cut-path {
  fill: none;
  stroke: #d92d20;
  stroke-width: 1.8;
  stroke-dasharray: 6 5;
  stroke-linecap: round;
  pointer-events: none;
}

body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row {
  left: 18px;
  right: auto;
  bottom: 18px;
  width: auto;
  height: auto;
  padding: 0;
  border-top: 0;
  background: transparent;
  justify-content: flex-start;
}

body:not(.auth-required) .workflow-check-item {
  border-radius: 12px;
}

body:not(.auth-required) .modal-panel {
  border-color: rgba(203, 213, 225, 0.9);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
}

body:not(.auth-required) .result-box,
body:not(.auth-required) .light-result {
  border-color: #dbe7f0;
  border-radius: 14px;
  background: #f8fbfd;
}

@media (max-width: 900px) {
  body:not(.auth-required) .panel,
  body:not(.auth-required) .tool-card,
  body:not(.auth-required) .workflow-sidebar,
  body:not(.auth-required) .workflow-main,
  body:not(.auth-required) .workflow-inspector {
    border-radius: 14px;
  }
}

@media (max-width: 1120px) {
  body:not(.auth-required) .topbar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar);
    height: 100vh;
    min-height: 100vh;
    border-right: 1px solid var(--border);
    border-bottom: 0;
  }

  body:not(.auth-required) .layout {
    margin-left: var(--sidebar);
  }
}

/* Final toolbar alignment: keep workflow and infinite canvas controls consistent after all overrides. */
body:not(.auth-required) .workflow-toolbar,
body:not(.auth-required) .layout.workflow-layout .workflow-toolbar {
  display: grid;
  grid-template-columns: minmax(190px, 300px) minmax(320px, 1fr);
  align-items: center;
  gap: 8px 10px;
  border: 1px solid rgba(213, 220, 229, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.055);
}

body:not(.auth-required) .workflow-toolbar > label,
body:not(.auth-required) .layout.workflow-layout .workflow-toolbar > label {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body:not(.auth-required) .workflow-toolbar > label > span,
body:not(.auth-required) .layout.workflow-layout .workflow-toolbar > label > span {
  white-space: nowrap;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

body:not(.auth-required) .workflow-toolbar > label input,
body:not(.auth-required) .layout.workflow-layout .workflow-toolbar > label input {
  width: 100%;
}

body:not(.auth-required) .canvas-side-dock,
body:not(.auth-required) .canvas-studio-shell .canvas-side-dock,
body:not(.auth-required) .layout.canvas-layout .canvas-side-dock {
  display: none !important;
}

body:not(.auth-required) .canvas-studio-shell .canvas-board-row,
body:not(.auth-required) .layout.canvas-layout .canvas-board-row {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  z-index: 24;
  width: auto;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, 300px) minmax(320px, 1fr);
  align-items: center;
  gap: 8px 10px;
  padding: 10px;
  border: 1px solid rgba(213, 220, 229, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.055);
  backdrop-filter: blur(18px);
  pointer-events: auto;
}

body:not(.auth-required) .canvas-studio-shell .canvas-board-row > label,
body:not(.auth-required) .layout.canvas-layout .canvas-board-row > label {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

body:not(.auth-required) .canvas-studio-shell .canvas-board-row > label > span,
body:not(.auth-required) .layout.canvas-layout .canvas-board-row > label > span {
  white-space: nowrap;
}

body:not(.auth-required) .canvas-studio-shell .canvas-board-row > label input,
body:not(.auth-required) .canvas-studio-shell .canvas-board-row > label select,
body:not(.auth-required) .layout.canvas-layout .canvas-board-row > label input,
body:not(.auth-required) .layout.canvas-layout .canvas-board-row > label select {
  width: 100%;
  min-height: 32px;
  border-radius: 11px;
  font-size: 13px;
}

body:not(.auth-required) .canvas-studio-shell .canvas-board-actions,
body:not(.auth-required) .layout.canvas-layout .canvas-board-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 1px 3px;
  scrollbar-width: thin;
}

body:not(.auth-required) .canvas-studio-shell .canvas-board-actions button,
body:not(.auth-required) .canvas-studio-shell .canvas-board-actions .workflow-dirty-badge,
body:not(.auth-required) .layout.canvas-layout .canvas-board-actions button,
body:not(.auth-required) .layout.canvas-layout .canvas-board-actions .workflow-dirty-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 31px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}

body:not(.auth-required) .canvas-studio-shell .canvas-board-actions #canvasHistoryBtn,
body:not(.auth-required) .canvas-studio-shell .canvas-board-actions #canvasMediaLibraryBtn,
body:not(.auth-required) .canvas-studio-shell .canvas-board-actions #canvasSaveBtn,
body:not(.auth-required) .canvas-studio-shell .canvas-board-actions #canvasQuickAddBtn,
body:not(.auth-required) .canvas-studio-shell .canvas-board-actions #canvasTemplateMenuBtn,
body:not(.auth-required) .canvas-studio-shell .canvas-board-actions #canvasFitBtn,
body:not(.auth-required) .canvas-studio-shell .canvas-board-actions #canvasHelpBtn,
body:not(.auth-required) .canvas-studio-shell .canvas-board-actions #canvasUndoBtn,
body:not(.auth-required) .canvas-studio-shell .canvas-board-actions #canvasRedoBtn,
body:not(.auth-required) .canvas-studio-shell .canvas-board-actions #canvasNewBoardBtn,
body:not(.auth-required) .canvas-studio-shell .canvas-board-actions #canvasDuplicateBoardBtn,
body:not(.auth-required) .layout.canvas-layout .canvas-board-actions #canvasHistoryBtn,
body:not(.auth-required) .layout.canvas-layout .canvas-board-actions #canvasMediaLibraryBtn,
body:not(.auth-required) .layout.canvas-layout .canvas-board-actions #canvasSaveBtn,
body:not(.auth-required) .layout.canvas-layout .canvas-board-actions #canvasQuickAddBtn,
body:not(.auth-required) .layout.canvas-layout .canvas-board-actions #canvasTemplateMenuBtn,
body:not(.auth-required) .layout.canvas-layout .canvas-board-actions #canvasFitBtn,
body:not(.auth-required) .layout.canvas-layout .canvas-board-actions #canvasHelpBtn,
body:not(.auth-required) .layout.canvas-layout .canvas-board-actions #canvasUndoBtn,
body:not(.auth-required) .layout.canvas-layout .canvas-board-actions #canvasRedoBtn,
body:not(.auth-required) .layout.canvas-layout .canvas-board-actions #canvasNewBoardBtn,
body:not(.auth-required) .layout.canvas-layout .canvas-board-actions #canvasDuplicateBoardBtn {
  display: inline-flex !important;
}

body:not(.auth-required) .canvas-studio-shell .canvas-board-actions .canvas-legacy-add,
body:not(.auth-required) .layout.canvas-layout .canvas-board-actions .canvas-legacy-add {
  display: none !important;
}

/* Unified bottom-left canvas controls for workflow and infinite canvas. */
body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-status-row,
body:not(.auth-required) .workflow-main > .workflow-status-row,
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row,
body:not(.auth-required) .canvas-studio-shell .infinite-canvas-status-row {
  position: absolute;
  left: 18px;
  right: auto;
  bottom: 18px;
  z-index: 24;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: auto;
  max-width: min(760px, calc(100% - 36px));
  height: auto;
  padding: 0;
  border: 0;
  border-top: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: none;
}

body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-status-row > *,
body:not(.auth-required) .workflow-main > .workflow-status-row > *,
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row > *,
body:not(.auth-required) .canvas-studio-shell .infinite-canvas-status-row > * {
  pointer-events: auto;
}

body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-status-row .file-summary,
body:not(.auth-required) .workflow-main > .workflow-status-row .file-summary,
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row .file-summary,
body:not(.auth-required) .canvas-studio-shell .infinite-canvas-status-row .file-summary {
  box-sizing: border-box;
  height: 38px;
  min-height: 38px;
  border: 1px solid rgba(213, 220, 229, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(16px);
  margin: 0 !important;
}

body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-status-row .file-summary,
body:not(.auth-required) .workflow-main > .workflow-status-row .file-summary,
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row .file-summary,
body:not(.auth-required) .canvas-studio-shell .infinite-canvas-status-row .file-summary {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  max-width: min(390px, 44vw);
  height: 38px;
  padding: 0 14px;
  overflow: hidden;
  color: #526174;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-status-row .workflow-history-actions,
body:not(.auth-required) .workflow-main > .workflow-status-row .workflow-history-actions,
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row .workflow-history-actions,
body:not(.auth-required) .canvas-studio-shell .infinite-canvas-status-row .workflow-history-actions {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 38px;
  min-height: 38px;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(213, 220, 229, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(16px);
  margin: 0 !important;
}

body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-status-row .workflow-history-actions button,
body:not(.auth-required) .workflow-main > .workflow-status-row .workflow-history-actions button,
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row .workflow-history-actions button,
body:not(.auth-required) .canvas-studio-shell .infinite-canvas-status-row .workflow-history-actions button {
  box-sizing: border-box;
  height: 30px;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  white-space: nowrap;
}

body:not(.auth-required) #infiniteCanvasDropHint,
body:not(.auth-required) .infinite-canvas-drop-hint {
  display: none !important;
}

/* Final studio shell unification: workflow uses the same outer frame as infinite canvas. */
body:not(.auth-required) .layout.workflow-layout .workflow-shell {
  --studio-frame-border: rgba(213, 220, 229, 0.9);
  --studio-frame-bg: linear-gradient(180deg, #f8fafc 0%, #eef2f6 100%);
  display: grid;
  /* 检查器已废弃：单列；填满高度链；内层不再当卡片(外观交给最外面的 workbench)，去掉壳套壳 */
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* 暗色镜像:工作流外框局部令牌(亮色定义在上一条) */
body.theme-dark:not(.auth-required) .layout.workflow-layout .workflow-shell {
  --studio-frame-border: rgba(141, 149, 165, 0.3);
  --studio-frame-bg: linear-gradient(180deg, #0e1726 0%, #0b121f 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 34px rgba(0, 0, 0, 0.35);
}

body:not(.auth-required) .layout.workflow-layout .workflow-main {
  position: relative;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body:not(.auth-required) .layout.workflow-layout .workflow-inspector {
  display: block;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 18px 16px;
  overflow: auto;
  border: 0;
  border-left: 1px solid rgba(213, 220, 229, 0.9);
  border-radius: 0 20px 20px 0;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: none;
  backdrop-filter: blur(18px);
}

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

body:not(.auth-required) .layout.workflow-layout .workflow-toolbar {
  top: 18px;
  left: 18px;
  right: 18px;
}

body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-status-row {
  left: 18px;
  bottom: 18px;
}

body:not(.auth-required) .layout.workflow-layout .workflow-minimap {
  right: 18px;
  bottom: 86px;
}

/* Infinite canvas generation editor: stable reference, prompt, fields and action stack. */
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) {
  --canvas-inline-unified-radius: 9px;
  --canvas-inline-control-pad-x: 6px;
  --canvas-inline-control-font: 11px;
  max-height: none;
  overflow: visible;
  padding: 9px;
  border-top-width: 2px;
  border-radius: var(--canvas-inline-unified-radius) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run)::before {
  display: none;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) > .infinite-inline-panel-head {
  display: none;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "refs refs"
    "prompt prompt"
    "fields actions";
  gap: 5px 8px;
  align-items: stretch;
  min-width: 0;
  padding: 0;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-inline-references {
  grid-area: refs;
  position: relative;
  width: 100%;
  max-width: 100%;
  justify-self: start;
  min-height: 34px;
  padding: 3px 5px;
  border-radius: var(--canvas-inline-unified-radius);
  border-color: rgba(47, 109, 183, 0.24);
  background: linear-gradient(180deg, rgba(240, 246, 252, 0.98), rgba(229, 238, 248, 0.98));
  box-shadow: inset 0 0 0 1px rgba(47, 109, 183, 0.04);
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-references-head {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 2;
  min-height: 0;
  margin: 0;
  pointer-events: none;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-references-head strong {
  display: none;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-grid {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 1px;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-grid [data-canvas-panel-ref] {
  /* 缩略图瓦片：34×34 正方形。瓦片是 div，不受全局按钮规则影响，普通声明即可（无需 !important）。 */
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: var(--canvas-inline-unified-radius);
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-grid .infinite-inline-reference-add {
  /* 加号按钮：与缩略图同尺寸 34×34 方形，只留「+」，从画布选择走 title 悬停提示 */
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: var(--canvas-inline-unified-radius);
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-references-actions {
  pointer-events: auto;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-pick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 0 9px;
  border: 1px dashed rgba(47, 109, 183, 0.5);
  border-radius: var(--canvas-inline-unified-radius);
  background: #f8fbff;
  color: #2f6db7;
  font-size: 11px;
  font-weight: 850;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-pick span {
  font-size: 15px;
  line-height: 1;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-pick small {
  font-size: 11px;
  font-weight: 850;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-pick.has-preview {
  min-width: 72px;
  padding: 3px 7px 3px 4px;
  border-style: solid;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.08);
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-pick.has-preview img,
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-pick.has-preview video {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 3px 9px rgba(15, 23, 42, 0.14);
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-pick.active,
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-add.active {
  border-color: rgba(47, 109, 183, 0.72);
  background: #eaf2fb;
  color: #2f6db7;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-empty {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 34px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: transparent;
  font-size: 0;
  line-height: 0;
}

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 {
  /* 缩略图铺满 34×34 方瓦片，不再被全局按钮 padding/flex 挤成竖条 */
  width: 34px !important;
  height: 34px !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
}

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

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-card-actions {
  grid-area: actions;
  z-index: 4;
  align-self: center;
  justify-self: end;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  pointer-events: auto;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field {
  /* 不再 grow 撑满；按字段类型给内容合适的固定宽度(下方按 data-canvas-config-key 细分)，
     可 shrink 以便空间不足时整体收窄 */
  flex: 0 1 auto;
  width: 96px;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0;
  min-width: 0;
  /* 根因式收紧字号：全局 input/select 用 font-size:var(--hui-control-font)!important，
     这里在字段作用域把该变量喂成 11px，控件自然变小，无需再写更高优先级 !important 对打 */
  --hui-control-font: var(--canvas-inline-control-font);
  min-height: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(202, 215, 229, 0.72);
  border-radius: var(--canvas-inline-unified-radius);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(10px);
}

/* 下拉三角已移除，字段同步回收原箭头槽位，不再保留无效右侧空白。 */
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;
  max-width: 106px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field:has([data-canvas-config-key="duration"]) {
  width: 62px;
}
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 0 auto;
  width: 42px;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field > span {
  display: none;
}

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 {
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  border-color: transparent;
  border-radius: var(--canvas-inline-unified-radius);
  background-color: transparent;
  /* 字号由上面字段作用域的 --hui-control-font:11px 经全局规则生效，这里不再写 font-size */
  font-weight: 700;
  font-family: inherit;
  font-size: var(--canvas-inline-control-font) !important;
  line-height: 1;
  padding-block: 0;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field select {
  /* 内联编辑面板不显示原生箭头，把窄字段的水平空间完整留给当前值。 */
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  padding-right: var(--canvas-inline-control-pad-x) !important;
  padding-left: var(--canvas-inline-control-pad-x) !important;
  text-overflow: ellipsis;
  text-align: center;
  text-align-last: center;
}

/* 自定义下拉在「有运行按钮」的字段药丸内：触发器透明铺满药丸，外观沿用药丸的边框/底色，
   弹层挂在药丸上方。打开时高亮整颗药丸（而非触发器内框）。 */
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field .infinite-card-cs {
  height: 100%;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field .infinite-card-cs-trigger {
  height: 100%;
  min-height: 0;
  padding: 0 var(--canvas-inline-control-pad-x);
  border-color: transparent;
  background: transparent;
  border-radius: var(--canvas-inline-unified-radius);
  box-shadow: none;
  font-weight: 700;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field .infinite-card-cs-label {
  font-family: inherit;
  font-size: var(--canvas-inline-control-font);
  line-height: 1;
  text-align: center;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field:has([data-canvas-config-key="model"]) .infinite-card-cs,
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field:has([data-canvas-config-key="model"]) .infinite-card-cs-trigger {
  width: fit-content;
  max-width: 100%;
  padding-inline: calc(var(--canvas-inline-control-pad-x) + 1px);
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field:has([data-canvas-config-key="model"]) .infinite-card-cs-label {
  flex: 0 1 auto;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field:has(.infinite-card-cs.cs-open) {
  border-color: rgba(47, 109, 183, 0.6);
  box-shadow: 0 0 0 2px rgba(47, 109, 183, 0.14);
}

/* ===== 「画质 / 比例」合并控件：汇总 pill + 弹层（画质分段 + 比例图标网格）=====
   不复用 .infinite-card-field 类，自带 pill 样式——否则 .infinite-card-field span{display:none}
   会把汇总文案/分区标题/比例图标这些 span 全隐藏。 */
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-qr {
  flex: 0 1 auto;
  width: 68px;
  position: relative;
  min-width: 0;
  min-height: 30px;
  height: 30px;
  border: 1px solid rgba(202, 215, 229, 0.72);
  border-radius: var(--canvas-inline-unified-radius);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(10px);
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-qr.qr-open {
  border-color: rgba(47, 109, 183, 0.6);
  box-shadow: 0 0 0 2px rgba(47, 109, 183, 0.14);
}

.infinite-card-qr-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  height: 100%;
  padding: 0 8px;
  border-radius: var(--canvas-inline-unified-radius);
  color: #2c3e52;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-qr-trigger {
  padding-inline: var(--canvas-inline-control-pad-x);
  font-family: inherit;
  font-size: var(--canvas-inline-control-font);
  line-height: 1;
}

.infinite-card-qr-trigger .infinite-card-qr-q,
.infinite-card-qr-trigger .infinite-card-qr-r,
.infinite-card-qr-trigger .infinite-card-qr-d {
  overflow: hidden;
  text-overflow: ellipsis;
}

.infinite-card-qr-trigger .infinite-card-qr-dot {
  color: #c0cad8;
}

.infinite-card-qr-caret {
  flex: 0 0 auto;
  color: #8497ab;
  margin-left: 1px;
  transition: transform 140ms ease;
}

.infinite-card-qr.qr-open .infinite-card-qr-caret {
  transform: rotate(180deg);
}

.infinite-card-qr-pop {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 0;
  z-index: 30;
  width: 250px;
  max-width: 72vw;
  padding: 12px;
  display: grid;
  gap: 11px;
  border: 1px solid rgba(202, 215, 229, 0.92);
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.2);
  cursor: default;
  animation: qrPopIn 130ms ease;
}

.infinite-card-qr.qr-pop-below .infinite-card-qr-pop {
  bottom: auto;
  top: calc(100% + 9px);
}

.infinite-card-qr-pop[hidden] {
  display: none;
}

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

.infinite-card-qr-sec {
  display: grid;
  gap: 7px;
}

.infinite-card-qr-sec-label {
  font-size: 11px;
  font-weight: 800;
  color: #5f7287;
  letter-spacing: 0.02em;
}

.infinite-card-qr-seg {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 11px;
  background: #eef2f7;
}

.infinite-card-qr-seg [data-qr-set] {
  flex: 1 1 0;
  display: grid;
  place-items: center;
  min-height: 28px;
  border-radius: 8px;
  color: #44546b;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.infinite-card-qr-seg [data-qr-set].active {
  background: #ffffff;
  color: #2f6db7;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.12);
}

.infinite-card-qr-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.infinite-card-qr-grid [data-qr-set] {
  display: grid;
  grid-template-rows: 18px auto;
  place-items: center;
  gap: 5px;
  padding: 7px 2px 5px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: #f5f8fb;
  color: #8497ab;
  cursor: pointer;
  user-select: none;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.infinite-card-qr-grid [data-qr-set]:hover {
  background: #eef3f8;
}

.infinite-card-qr-grid [data-qr-set].active {
  border-color: #2f6db7;
  background: #eaf2fb;
  color: #2f6db7;
}

.infinite-card-qr-ico {
  display: block;
  border: 1.6px solid currentColor;
  border-radius: 3px;
}

.infinite-card-qr-ico.is-auto {
  width: 17px;
  height: 17px;
  border-style: dashed;
}

.infinite-card-qr-grid small {
  font-size: 9px;
  font-weight: 700;
  color: #5f7287;
  line-height: 1;
}

.infinite-card-qr-grid [data-qr-set].active small {
  color: #2f6db7;
}

.infinite-card-qr-native {
  display: none;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > textarea {
  grid-area: prompt;
  z-index: 1;
  min-height: 104px;
  max-height: 320px;
  border: 1px solid rgba(188, 204, 221, 0.95);
  border-radius: var(--canvas-inline-unified-radius) !important;
  background: #ffffff;
  background-image: none !important;
  /* 放大键位于右下角，底部预留完整点击区，文字不会进入按钮下方。 */
  padding: 10px 11px 44px 11px !important;
  resize: none !important;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.02);
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > textarea:focus {
  border-color: rgba(47, 109, 183, 0.55);
  outline: none;
}

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;
  z-index: 2;
  align-self: end;
  justify-self: end;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 7px;
  padding: 0 !important;
  border: 1px solid rgba(207, 221, 235, 0.94);
  border-radius: var(--canvas-inline-unified-radius);
  background: rgba(247, 250, 253, 0.94);
  color: #5c7590;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-inline-prompt-expand:hover {
  border-color: rgba(47, 109, 183, 0.42);
  background: #edf4fb;
  color: #2f6db7;
}

.infinite-inline-prompt-expand .ui-icon,
.infinite-inline-prompt-expand svg {
  width: 15px;
  height: 15px;
}

/* 底部控件条保持原来的独立胶囊，全部 30px 等高。 */
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-card-fields > *,
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-card-actions > * {
  height: 30px !important;
  min-height: 30px !important;
  align-self: center;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-cs,
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-cs-trigger {
  height: 100%;
  min-height: 0;
}


body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body .infinite-card-run {
  min-width: 78px;
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 13px;
  border-radius: var(--canvas-inline-unified-radius) !important;
  font-size: 12px;
  font-weight: 900;
  font-family: inherit;
  line-height: 1;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(47, 109, 183, 0.22);
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-run-label,
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-run > .button-price,
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-run > .button-price .points-value {
  line-height: 1;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-run-label {
  display: inline-flex;
  align-items: center;
  height: 15px;
}

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;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-card-note {
  display: none;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:not(:has(.infinite-card-run)) {
  max-height: none;
  overflow: visible;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel textarea {
  box-sizing: border-box;
  resize: none;
  max-width: none;
  max-height: none;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) textarea {
  resize: none !important;
  max-width: 100%;
  background-image: none !important;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:not(:has(.infinite-card-run)) .infinite-inline-panel-body > textarea {
  min-width: 420px;
  min-height: 176px;
  border: 1px solid rgba(188, 204, 221, 0.95);
  border-radius: 14px;
  background: #ffffff;
  padding: 13px 14px;
  line-height: 1.55;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.02);
}

.infinite-canvas-prompt-editor-mask {
  z-index: 1280;
  padding: 24px;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(8px);
}

#infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-panel {
  width: min(1008px, calc(100vw - 48px));
  max-width: none;
  height: min(720px, calc(100dvh - 48px));
  max-height: none;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(194, 207, 221, 0.96);
  border-radius: 20px !important;
  background: #ffffff;
  box-shadow: 0 32px 90px rgba(15, 23, 42, 0.28);
}

.infinite-canvas-prompt-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 14px 12px 18px;
  border-bottom: 1px solid #e4ebf3;
  background: #ffffff;
}

#infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-head h2 {
  margin: 0;
  color: #172435;
  font-size: 17px !important;
  line-height: 1.3 !important;
}

#infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-close {
  flex: 0 0 36px;
  width: 36px;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border: 1px solid #dce5ef;
  border-radius: 10px !important;
  background: #f7f9fc;
  color: #52657a;
  font-size: 24px !important;
  font-weight: 400;
  line-height: 1 !important;
}

.infinite-canvas-prompt-editor-stage {
  min-height: 0;
  padding: 32px;
  background: #f3f6fa;
  display: grid;
}

#infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-stage textarea {
  width: 100%;
  min-width: 0;
  min-height: 0 !important;
  height: 100%;
  max-height: none !important;
  padding: 18px 20px !important;
  border: 1px solid #cfdae6;
  border-radius: 14px !important;
  outline: 0;
  background: #ffffff;
  background-image: none !important;
  color: #172435;
  font: inherit;
  font-size: 16px !important;
  line-height: 1.7 !important;
  resize: none !important;
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.06);
}

#infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-stage textarea:focus {
  border-color: rgba(47, 109, 183, 0.62);
  box-shadow: 0 0 0 3px rgba(47, 109, 183, 0.11), 0 12px 30px rgba(15, 23, 42, 0.08);
}

.infinite-canvas-prompt-editor-foot {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #e4ebf3;
  background: #ffffff;
}

#infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-foot button {
  min-width: 88px;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 850;
}

body.theme-dark .infinite-canvas-prompt-editor-panel,
body.theme-dark .infinite-canvas-prompt-editor-head,
body.theme-dark .infinite-canvas-prompt-editor-foot,
body.theme-dark .infinite-canvas-prompt-editor-stage textarea {
  border-color: rgba(148, 163, 184, 0.24);
  background: #111b28;
  color: #e6edf5;
}

body.theme-dark .infinite-canvas-prompt-editor-stage {
  background: #0c1420;
}

body.theme-dark .infinite-canvas-prompt-editor-head h2,
body.theme-dark .infinite-canvas-prompt-editor-stage textarea {
  color: #eef4fa;
}

@media (max-width: 980px) {
  body:not(.auth-required) .layout.workflow-layout .workflow-shell {
    grid-template-columns: 1fr;
  }

  body:not(.auth-required) .layout.workflow-layout .workflow-inspector {
    display: none;
  }

  body:not(.auth-required) .layout.workflow-layout .workflow-main,
  body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-stage-wrap.workflow-lite-wrap {
    border-radius: 20px;
  }
}

/* Infinite canvas top bar should match the workflow toolbar: full text buttons, not icon-only chips. */
body:not(.auth-required) .canvas-studio-shell .canvas-board-actions,
body:not(.auth-required) .layout.canvas-layout .canvas-board-actions {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 6px;
  padding: 1px 1px 3px;
}

body:not(.auth-required) .canvas-studio-shell .canvas-board-actions button,
body:not(.auth-required) .canvas-studio-shell .canvas-board-actions button.has-ui-icon,
body:not(.auth-required) .layout.canvas-layout .canvas-board-actions button,
body:not(.auth-required) .layout.canvas-layout .canvas-board-actions button.has-ui-icon {
  width: auto !important;
  min-width: 0 !important;
  min-height: 31px;
  padding: 0 10px !important;
  border-radius: 999px;
  font-size: 12px !important;
  font-weight: 850;
  line-height: 1;
  gap: 6px;
  white-space: nowrap;
}

body:not(.auth-required) .canvas-studio-shell .canvas-board-actions button.has-ui-icon .ui-icon,
body:not(.auth-required) .layout.canvas-layout .canvas-board-actions button.has-ui-icon .ui-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 0;
}

body:not(.auth-required) .canvas-studio-shell .canvas-board-actions .workflow-dirty-badge,
body:not(.auth-required) .layout.canvas-layout .canvas-board-actions .workflow-dirty-badge {
  min-height: 31px;
  max-width: none;
  padding: 0 10px;
}

/* Infinite canvas magnetic link handles: wider invisible hit area, dot follows the cursor nearby. */
body:not(.auth-required) .layout.canvas-layout .infinite-card-link-zone,
body:not(.auth-required) .canvas-studio-shell .infinite-card-link-zone {
  width: 56px;
  height: 56px;
  /* 圆形热区始终可响应：clip-path:circle 已把响应限制在圆内、圆外穿透；
     这样鼠标进圆就能磁吸+显示，不再因连接点离卡片有间隙、鼠标移过间隙时 .infinite-card:hover 断开而失效。 */
  pointer-events: auto;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-link-zone.left,
body:not(.auth-required) .canvas-studio-shell .infinite-card-link-zone.left {
  left: -68px;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-link-zone.right,
body:not(.auth-required) .canvas-studio-shell .infinite-card-link-zone.right {
  right: -68px;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card:hover .infinite-card-link-zone,
body:not(.auth-required) .layout.canvas-layout .infinite-card.selected .infinite-card-link-zone,
body:not(.auth-required) .layout.canvas-layout .infinite-card-link-zone:focus-within,
body:not(.auth-required) .layout.canvas-layout .infinite-card-link-zone:has(.infinite-card-link-handle:hover),
body:not(.auth-required) .layout.canvas-layout .infinite-card-link-zone:has(.infinite-card-link-handle.linking),
body:not(.auth-required) .canvas-studio-shell .infinite-card:hover .infinite-card-link-zone,
body:not(.auth-required) .canvas-studio-shell .infinite-card.selected .infinite-card-link-zone,
body:not(.auth-required) .canvas-studio-shell .infinite-card-link-zone:focus-within,
body:not(.auth-required) .canvas-studio-shell .infinite-card-link-zone:has(.infinite-card-link-handle:hover),
body:not(.auth-required) .canvas-studio-shell .infinite-card-link-zone:has(.infinite-card-link-handle.linking) {
  pointer-events: auto;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-link-zone::before,
body:not(.auth-required) .canvas-studio-shell .infinite-card-link-zone::before {
  inset: -10px 0;
  background: transparent;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-link-handle,
body:not(.auth-required) .canvas-studio-shell .infinite-card-link-handle {
  width: 27px;
  height: 27px;
  flex-basis: 27px;
  transform: translate(var(--link-magnet-x, 0px), var(--link-magnet-y, 0px)) scale(1);
  /* 离开鼠标(取消磁吸)时走这条慢过渡,平滑滑回去,不再「闪回」。 */
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), background-color 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
  cursor: crosshair;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-link-handle.magnetized,
body:not(.auth-required) .canvas-studio-shell .infinite-card-link-handle.magnetized {
  background: rgba(47, 109, 183, 0.3);
  border-color: rgba(47, 109, 183, 0.7);
  /* 吸附反馈只靠放大(scale 1.08)+ 加深底色/边框,不要任何光晕/落影(那圈像把连接点框住)。 */
  box-shadow: none;
  transform: translate(var(--link-magnet-x, 0px), var(--link-magnet-y, 0px)) scale(1.08);
  /* 磁吸跟随鼠标时要快、跟手(70ms);松开走上面基础态的 240ms 慢回。 */
  transition: transform 70ms ease-out;
}

body:not(.auth-required) .layout.canvas-layout .infinite-card-link-handle.linking,
body:not(.auth-required) .canvas-studio-shell .infinite-card-link-handle.linking {
  opacity: 0;
  transform: translate(var(--link-magnet-x, 0px), var(--link-magnet-y, 0px)) scale(0.72);
}

body:not(.auth-required) .layout.canvas-layout .infinite-card.media-card .infinite-card-meta,
body:not(.auth-required) .canvas-studio-shell .infinite-card.media-card .infinite-card-meta {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 2026-05-24: workflow floating inspector, denser shell, visible pricing and smoother media sorting. */

body:not(.auth-required) .module-nav,
body:not(.auth-required) .topbar .module-nav {
  gap: 7px;
}

body:not(.auth-required) .module-tab,
body:not(.auth-required) .topbar .module-tab,
.module-tab.has-ui-icon,
.topbar .module-tab.has-ui-icon {
  min-height: 53px;
  height: 53px;
  max-height: 53px;
  padding: 8px 10px;
  border-radius: 12px;
}

.module-tab.has-ui-icon,
.topbar .module-tab.has-ui-icon {
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 9px;
}

.module-tab.has-ui-icon > .ui-icon,
.topbar .module-tab.has-ui-icon > .ui-icon,
body.sidebar-collapsed .module-tab.has-ui-icon > .ui-icon,
body.sidebar-collapsed .topbar .module-tab.has-ui-icon > .ui-icon {
  width: 32px;
  height: 32px;
  padding: 7px;
  border-radius: 10px;
}

body:not(.auth-required) .module-tab strong,
body:not(.auth-required) .topbar .module-tab strong {
  font-size: 13px;
  line-height: 1.1;
}

body:not(.auth-required) .module-tab span:not(.ui-icon),
body:not(.auth-required) .topbar .module-tab span:not(.ui-icon) {
  font-size: 11px;
  line-height: 1.2;
}

body.sidebar-collapsed .module-tab.has-ui-icon,
body.sidebar-collapsed .topbar .module-tab.has-ui-icon {
  width: 44px;
  min-height: 44px;
  height: 44px;
  max-height: 44px;
}

body.sidebar-collapsed #refreshJobsBtn {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  align-self: center;
  font-size: 0;
}

body.sidebar-collapsed #themeToggleBtn {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  align-self: center;
  font-size: 0;
}

body.sidebar-collapsed #refreshJobsBtn .ui-icon {
  width: 17px;
  height: 17px;
}

/* Collapsed sidebar final layout: icon-only, square, no leaked label text. */
body.sidebar-collapsed .topbar {
  align-items: center;
  overflow-x: hidden;
}

body.sidebar-collapsed .brand-block {
  width: 100%;
  padding-bottom: 10px;
}

body.sidebar-collapsed .brand-row {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  gap: 9px;
}

body.sidebar-collapsed .brand-text {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

body.sidebar-collapsed .brand-text h1 {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #ffffff;
  font-size: 17px;
  line-height: 1;
}

body.sidebar-collapsed .brand-short {
  color: inherit;
  display: grid !important;
  place-items: center;
  overflow: visible;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.sidebar-collapsed .sidebar-toggle.has-ui-icon,
body.sidebar-collapsed .topbar .icon-button.has-ui-icon,
body.sidebar-collapsed #refreshJobsBtn,
body.sidebar-collapsed #themeToggleBtn,
body.sidebar-collapsed .account-summary {
  display: inline-grid;
  place-items: center;
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 13px;
  font-size: 0;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}

body.sidebar-collapsed .sidebar-toggle.has-ui-icon::before,
body.sidebar-collapsed .topbar .icon-button.has-ui-icon::before,
body.sidebar-collapsed #refreshJobsBtn::before,
body.sidebar-collapsed #themeToggleBtn::before {
  content: none !important;
  display: none !important;
}

body.sidebar-collapsed .sidebar-toggle.has-ui-icon .sidebar-toggle-label,
body.sidebar-collapsed #refreshJobsBtn .sidebar-toggle-label,
body.sidebar-collapsed #themeToggleBtn .sidebar-toggle-label {
  display: none !important;
}

body.sidebar-collapsed .sidebar-toggle.has-ui-icon .ui-icon,
body.sidebar-collapsed .topbar .icon-button.has-ui-icon .ui-icon,
body.sidebar-collapsed #refreshJobsBtn .ui-icon,
body.sidebar-collapsed #themeToggleBtn .ui-icon {
  display: inline-grid !important;
  width: 18px;
  height: 18px;
  margin: 0;
}

body.sidebar-collapsed .topbar .top-actions {
  display: grid;
  justify-items: center;
  align-items: end;
  width: 100%;
  gap: 9px;
}

body.sidebar-collapsed .account-bar {
  display: grid;
  justify-items: center;
  width: 100%;
  gap: 0;
  overflow: visible;
}

body.sidebar-collapsed .account-summary {
  border-color: #cfe0f0;
  background: #eaf2fb;
  color: #1d4a83;
}

body.sidebar-collapsed .account-summary::before {
  content: none !important;
  display: none !important;
}

body:not(.mobile-ui).sidebar-collapsed:not(.auth-required) .topbar .account-summary[data-account-tooltip]::after,
body:not(.mobile-ui):not(.auth-required).sidebar-collapsed .topbar .account-summary[data-account-tooltip]::after {
  content: attr(data-account-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  z-index: 120;
  display: block;
  width: max-content;
  max-width: 220px;
  padding: 7px 10px;
  border: 1px solid #d6e3ef;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 26px rgba(34, 64, 98, 0.16);
  color: #1b3658;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translate(4px, -50%);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

body:not(.mobile-ui).sidebar-collapsed:not(.auth-required) .topbar .account-summary[data-account-tooltip]:hover::after,
body:not(.mobile-ui).sidebar-collapsed:not(.auth-required) .topbar .account-summary[data-account-tooltip]:focus-visible::after,
body:not(.mobile-ui):not(.auth-required).sidebar-collapsed .topbar .account-summary[data-account-tooltip]:hover::after,
body:not(.mobile-ui):not(.auth-required).sidebar-collapsed .topbar .account-summary[data-account-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}

body.theme-dark:not(.mobile-ui).sidebar-collapsed:not(.auth-required) .topbar .account-summary[data-account-tooltip]::after,
body.theme-dark:not(.mobile-ui):not(.auth-required).sidebar-collapsed .topbar .account-summary[data-account-tooltip]::after {
  border-color: rgba(90, 166, 232, 0.28);
  background: rgba(18, 21, 28, 0.96);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.36);
  color: #dbe8f7;
}

body.sidebar-collapsed .account-summary-text {
  display: none !important;
}

body.sidebar-collapsed #refreshJobsBtn::after,
body.sidebar-collapsed #themeToggleBtn::after {
  content: none !important;
  display: none !important;
}

.text-chat-shell {
  grid-template-columns: 284px minmax(0, 1fr);
}

body:not(.auth-required) .layout.workflow-layout .workflow-shell {
  grid-template-columns: minmax(0, 1fr) 286px !important;
  position: relative;
}

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

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

body:not(.auth-required) .layout.workflow-layout .workflow-inspector {
  position: static;
  z-index: auto;
  align-self: stretch;
  width: auto;
  height: 100%;
  margin: 0;
  padding: 18px 16px;
  overflow: auto;
  border: 0;
  border-left: 1px solid rgba(213, 220, 229, 0.9);
  border-radius: 0 20px 20px 0;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: none;
  backdrop-filter: none;
}

body:not(.auth-required) .layout.workflow-layout .workflow-inspector-head {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: -14px -14px 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(213, 220, 229, 0.76);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
}

body:not(.auth-required) .workflow-empty-state {
  max-width: 420px;
  padding: 16px 20px;
  color: #475569;
  font-weight: 750;
  line-height: 1.55;
  text-align: center;
}

.workflow-media-overlay-thumb {
  transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1), opacity 120ms ease, border-color 120ms ease, background 120ms ease;
}

/* ⚠️ 这两个 class 曾经在这里自己做位移动画(translateX ± --workflow-media-sort-shift,
   吃上面那条 transition:transform 140ms)。那是**第二套让位动画** ——
   canvas 侧同时在用每帧 ×0.3 的指数缓动画同一批格子,两条曲线时长与形状都不同,
   于是拖动过程中「能点的区域」和「看到的像素」一直分家(实测中途差 33px)。
   现在位移统一由 canvas 那一帧的实际位置写成 inline transform(syncWorkflowSortHitZone),
   inline 天然压过 class,这里不再声明 transform;class 只保留语义,供样式/调试识别状态。
   别再把 transform 加回来 —— 加回来就又是两套。 */
.workflow-media-overlay-thumb.sort-shift-right,
.workflow-media-overlay-thumb.sort-shift-left {
  /* 位移交给 syncWorkflowSortHitZone,见上方说明 */
}

/* 被拿起的那张:**整个藏掉**,不留半透明占位块。
   用户要的是「真拿起来了」的手感——手上跟着一个幽灵,原位不该再有一个本体;
   其余缩略图靠 sort-shift-* 自动补位并在落点让出空档,所见即所得。
   用 visibility 而不是 opacity/display:
     · opacity 仍会参与合成、真机上出现过残影(见 card-selection-flash-gpu-compositing)
     · display:none 会让盒子消失,而落点索引正是按这些盒子的几何算的,一去掉索引就全乱。
   visibility:hidden 保留几何、不绘制,两边都满足。 */
/* 被拿起的那张:**整个拖动期间**都藏掉,不管指针此刻悬在哪个模块上。
   手上已经跟着一个幽灵了,原位再显示一个就是「同一张图出现两次」(用户说的「幽灵模式出现自己」)。
   ⚠️ 关键是挂在 .dragging 上而不是 .sort-placeholder:
     · .sort-placeholder 由让位预览打,而预览只在悬停**自己所在的 zone** 时才认(sameNode),
       一拖到别的模块就掉了 —— 于是跨模块拖动时原图又整个亮回来。
     · .dragging 是「这张已经被拿起来」这个事实本身,起拖时加、finish/cancel 统一在
       cleanupWorkflowMediaOverlayPointerDragState 里清,整个拖动期都成立。
   用 visibility 而不是 opacity(真机残影)也不是 display:none(盒子一没,落点索引按几何算就全乱)。 */
.workflow-media-overlay-thumb.dragging,
.workflow-media-overlay-thumb.sort-placeholder {
  visibility: hidden;
}

.selected-thumb {
  transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1), opacity 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.selected-thumb.drag-over:not(.dragging) {
  transform: translateX(10px);
  border-color: rgba(47, 109, 183, 0.65);
  box-shadow: -5px 0 0 rgba(47, 109, 183, 0.14), 0 10px 20px rgba(15, 23, 42, 0.08);
}

button .button-price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-left: 6px;
  padding-left: 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.32);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  opacity: 0.9;
}

button.has-button-price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

button.has-button-price > .button-label,
button.has-button-price > .button-price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 100%;
  min-height: 0;
  line-height: 1;
}

.button-price-separator {
  display: none;
  align-items: center;
  margin: 0 6px;
  opacity: 0.72;
  font-weight: 800;
}

button .button-price.button-price-text {
  gap: 2px;
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
  font-size: 11px;
  letter-spacing: 0;
  opacity: 0.96;
}

button .button-price.compact-points {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
  gap: 2px;
  opacity: 1;
}

button .button-price.compact-points::before {
  content: none;
}

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

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

.button-point-icon {
  width: 15px;
  height: 15px;
}

.button-point-icon svg {
  width: 13px;
  height: 13px;
}

.table-point-icon,
.redeem-points-inline .points-inline-icon,
.ledger-points-inline .points-inline-icon {
  width: 14px;
  height: 14px;
}

.table-point-icon svg,
.redeem-points-inline .points-inline-icon svg,
.ledger-points-inline .points-inline-icon svg {
  width: 12px;
  height: 12px;
}

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

button.primary .button-price,
button.primary .points-inline-icon {
  color: #ffffff;
}

button.primary .points-inline-icon {
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.22));
}

.workflow-run-estimate {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 0 8px;
  border: 1px solid rgba(202, 215, 229, 0.75);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: #2f6db7;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.workflow-run-estimate .context-price {
  margin-top: 0;
}

button .button-price::before,
.plan-summary-price::before,
.context-price::before {
  content: none;
}

.plan-summary-price,
.context-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  color: #2f6db7;
  font-weight: 850;
}

.context-price {
  margin: 0 0 0 6px;
  font-size: 11px;
}

.points-amount,
.redeem-points-inline,
.ledger-points-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.points-prefix,
.points-suffix {
  color: inherit;
  font-weight: 800;
}

button.secondary .button-price,
button.danger .button-price {
  border-left-color: rgba(37, 99, 167, 0.18);
}

button .button-price[hidden] {
  display: none;
}

.canvas-image-crop-panel,
.canvas-image-edit-panel,
.canvas-video-edit-panel {
  width: min(1180px, calc(100vw - 48px));
  height: min(820px, calc(100vh - 48px));
  height: min(820px, calc(100dvh - 48px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

/* 画布抠图弹层（本地 / AI 共用） */
.canvas-cutout-panel {
  width: min(660px, calc(100vw - 48px));
  height: min(680px, calc(100vh - 48px));
  height: min(680px, calc(100dvh - 48px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}
.canvas-cutout-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 16px;
  min-height: 0;
  overflow: auto;
  padding-top: 4px;
}
.canvas-cutout-preview {
  display: grid;
  place-items: center;
  border-radius: 14px;
  padding: 10px;
  min-height: 220px;
  background:
    linear-gradient(45deg, rgba(100, 116, 139, 0.5) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(100, 116, 139, 0.5) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(100, 116, 139, 0.5) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(100, 116, 139, 0.5) 75%),
    #eef2f6;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
  background-size: 18px 18px;
}
.canvas-cutout-preview img {
  max-width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: 8px;
}
.canvas-cutout-options { display: flex; flex-direction: column; gap: 13px; }
.canvas-cutout-note { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin: 0; }
.canvas-cutout-field { display: flex; flex-direction: column; gap: 7px; }
.canvas-cutout-field > label { font-size: 12.5px; font-weight: 600; color: var(--text); }
.canvas-cutout-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.canvas-cutout-chips button {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 6px;
  font-size: 12.5px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.canvas-cutout-chips button:hover { border-color: rgba(47, 109, 183, 0.45); }
.canvas-cutout-chips button.active {
  border-color: var(--accent);
  background: rgba(47, 109, 183, 0.1);
  color: var(--accent);
  font-weight: 600;
}
.canvas-cutout-aiprice { font-size: 11px; opacity: 0.82; margin-left: 3px; }
.canvas-cutout-field input[type="color"] { width: 56px; height: 32px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; }
.canvas-cutout-field input[type="range"] { width: 100%; }
.canvas-cutout-run { margin-top: 4px; }
.canvas-cutout-options textarea {
  width: 100%;
  resize: vertical;
  min-height: 48px;
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1.5;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
  color: var(--text);
  box-sizing: border-box;
}
.canvas-cutout-options textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 109, 183, 0.14); }
#canvasCutoutEditCanvas {
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.18);
  cursor: crosshair;
  touch-action: none;
  max-width: 100%;
  max-height: 100%;
}
.canvas-cutout-editbtns {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 8px;
  margin-top: 6px;
}
.canvas-cutout-editbtns button { min-height: 38px; }
body.theme-dark:not(.auth-required) .canvas-cutout-chips button { background: rgba(18, 21, 29, 0.6); color: #e7eef9; border-color: rgba(141, 149, 165, 0.32); }
body.theme-dark:not(.auth-required) .canvas-cutout-chips button.active { background: rgba(90, 166, 232, 0.16); color: #cfe6ff; border-color: rgba(90, 166, 232, 0.6); }
body.theme-dark:not(.auth-required) .canvas-cutout-options textarea { background: rgba(18, 21, 29, 0.6); color: #e7eef9; border-color: rgba(141, 149, 165, 0.32); }
@media (max-width: 640px) {
  .canvas-cutout-body { grid-template-columns: minmax(0, 1fr); }
}

.canvas-image-crop-layout,
.canvas-image-edit-layout,
.canvas-video-edit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 14px;
  min-height: 0;
  height: 100%;
  align-items: stretch;
  overflow: hidden;
}

.canvas-image-crop-stage,
.canvas-image-expand-stage {
  position: relative;
  min-height: 0;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 10px;
  border: 1px solid rgba(190, 205, 220, 0.82);
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbfd 0%, #eef6f3 100%);
}

.canvas-image-expand-stage {
  position: relative;
  overflow: hidden;
}

#canvasImageCropCanvas {
  max-width: 100%;
  max-height: calc(100vh - 240px);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
  cursor: default;
}

.canvas-image-crop-side,
.canvas-image-edit-side {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
  max-height: 100%;
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 16px;
  background: rgba(248, 251, 253, 0.94);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* 视频编辑弹层：设置区拉伸得比内容高，默认 grid 会在底部留一大块空白。
   仅在视频弹层(不影响图片裁剪)改成 flex 纵列，把操作按钮组沉到底——设置在上、动作在下，留白居中更像有意为之。 */
.canvas-video-edit-layout .canvas-image-crop-side {
  display: flex;
  flex-direction: column;
}
.canvas-video-edit-layout .canvas-image-crop-side #previewCanvasVideoClipBtn {
  margin-top: auto;
}

.canvas-image-crop-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.canvas-image-crop-presets button,
.canvas-image-crop-side button {
  min-height: 34px;
  border-radius: 10px;
}

.canvas-image-crop-presets button.active,
.canvas-image-edit-presets button.active {
  border-color: rgba(47, 109, 183, 0.72);
  background: rgba(47, 109, 183, 0.13);
  color: #1d4a83;
  box-shadow: inset 0 0 0 1px rgba(47, 109, 183, 0.18);
}

.canvas-image-crop-custom {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 850;
}

.canvas-image-crop-custom span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.canvas-image-crop-custom input {
  min-width: 0;
}

.canvas-image-crop-custom button {
  min-height: 32px;
  padding: 0 11px;
}

.canvas-image-crop-status {
  padding: 7px 9px;
  border: 1px dashed rgba(47, 109, 183, 0.32);
  border-radius: 10px;
  color: #1d4a83;
  background: rgba(234, 242, 251, 0.78);
  font-size: 12px;
  font-weight: 850;
}

.canvas-image-crop-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.canvas-image-crop-fields label {
  display: grid;
  gap: 5px;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.canvas-image-crop-fields input {
  min-width: 0;
}

.canvas-image-expand-scale {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 850;
}

.canvas-image-expand-scale input {
  min-width: 0;
}

.canvas-image-expand-scale-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.canvas-image-expand-scale.is-preview {
  color: #94a3b8;
}

.canvas-image-edit-hint {
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.5;
}

.canvas-image-angle-preview {
  min-height: 420px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  padding: 14px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 18px;
  background:
    radial-gradient(circle, rgba(15, 23, 42, 0.09) 1px, transparent 1px),
    #0a0f16;
  background-size: 18px 18px;
}

#canvasImageExpandCanvas {
  max-width: 100%;
  max-height: calc(100vh - 240px);
  border-radius: 10px;
  cursor: default;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}

.canvas-video-edit-preview {
  min-height: 390px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 16px;
  background: #f8fbfd;
}

.canvas-video-edit-stage {
  position: relative;
  min-height: 330px;
  display: grid;
  place-items: center;
}

.canvas-video-frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
  max-height: calc(100vh - 260px);
  border-radius: 12px;
  overflow: hidden;
  background: #0f172a;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
  contain: paint;
  isolation: isolate;
}

.canvas-video-edit-preview video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 260px);
  background: #0f172a;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.canvas-video-playback-controls {
  display: grid;
  grid-template-columns: 72px minmax(120px, 1fr) 104px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
}

.canvas-video-playback-controls .secondary {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 10px;
}

.canvas-video-playback-range {
  width: 100%;
  accent-color: #2f6db7;
  cursor: pointer;
}

.canvas-video-playback-time {
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.canvas-video-crop-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.canvas-video-crop-box {
  position: absolute;
  border: 2px solid rgba(47, 109, 183, 0.95);
  background: rgba(47, 109, 183, 0.08);
  border-radius: 10px;
  box-shadow: 0 0 0 999px rgba(15, 23, 42, 0.34);
  cursor: move;
  pointer-events: auto;
  /* left/top/width/height 不可合成,will-change 写它们只浪费图层提示(拖拽本就走布局) */
}

.canvas-video-crop-box span {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: #2f80ed;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.22);
}

.canvas-video-edit-mask.clip-previewing .canvas-video-crop-overlay {
  opacity: 0.42;
}

.canvas-video-edit-mask.clip-previewing .canvas-video-crop-box {
  pointer-events: none;
}

.canvas-video-edit-mask.video-playing .canvas-video-crop-box,
.canvas-video-edit-mask.clip-previewing .canvas-video-crop-box {
  background: rgba(47, 109, 183, 0.04);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.18);
}

.canvas-video-edit-mask.video-playing .canvas-video-crop-box span,
.canvas-video-edit-mask.clip-previewing .canvas-video-crop-box span {
  opacity: 0.72;
}

.canvas-video-crop-box [data-video-crop-handle="nw"] { left: -7px; top: -7px; cursor: nwse-resize; }
.canvas-video-crop-box [data-video-crop-handle="ne"] { right: -7px; top: -7px; cursor: nesw-resize; }
.canvas-video-crop-box [data-video-crop-handle="sw"] { left: -7px; bottom: -7px; cursor: nesw-resize; }
.canvas-video-crop-box [data-video-crop-handle="se"] { right: -7px; bottom: -7px; cursor: nwse-resize; }

.canvas-video-timeline {
  display: grid;
  gap: 7px;
  padding: 4px 6px 0;
}

.canvas-video-timeline-track {
  position: relative;
  height: 18px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.22);
  cursor: pointer;
}

.canvas-video-timeline-selection {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 999px;
  background: var(--accent);
}

.canvas-video-timeline-handle {
  position: absolute;
  top: 50%;
  width: 12px;
  min-width: 12px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  background: #2f6db7;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
  cursor: ew-resize;
}

.canvas-video-timeline .canvas-video-timeline-handle,
.canvas-video-timeline .canvas-video-timeline-handle:hover,
.canvas-video-timeline .canvas-video-timeline-handle:focus,
.canvas-video-timeline .canvas-video-timeline-handle:active {
  transform: translate(-50%, -50%) !important;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.canvas-video-timeline .canvas-video-timeline-handle:hover,
.canvas-video-timeline .canvas-video-timeline-handle:focus-visible {
  background: #2f6db7;
  box-shadow: 0 0 0 4px rgba(47, 109, 183, 0.16), 0 4px 14px rgba(15, 23, 42, 0.18);
}

.canvas-video-timeline.dragging,
.canvas-video-timeline.dragging * {
  cursor: ew-resize !important;
}

.canvas-video-timeline-labels {
  display: flex;
  justify-content: space-between;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.canvas-image-erase-panel {
  width: min(1180px, calc(100vw - 48px));
  height: min(820px, calc(100vh - 48px));
  height: min(820px, calc(100dvh - 48px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.canvas-image-erase-layout {
  grid-template-columns: minmax(0, 1fr) 270px;
}

.canvas-image-erase-stage {
  min-height: 0;
  height: 100%;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  padding: 14px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fbfd 0%, #eef6f3 100%);
}

#canvasImageEraseCanvas {
  max-width: 100%;
  max-height: calc(100vh - 240px);
  border-radius: 12px;
  cursor: crosshair;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.2);
}

.canvas-image-erase-side .secondary {
  min-height: 34px;
  border-radius: 10px;
}

.canvas-image-split-panel {
  width: min(860px, calc(100vw - 48px));
  height: min(680px, calc(100vh - 48px));
  height: min(680px, calc(100dvh - 48px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.canvas-image-split-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 14px;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.canvas-image-split-preview {
  position: relative;
  min-height: 0;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fbfd 0%, #eef6f3 100%);
}

.canvas-image-angle-preview {
  position: relative;
}

.canvas-edit-loading-state {
  position: absolute;
  inset: 12px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(47, 109, 183, 0.35);
  border-radius: 14px;
  background: color-mix(in srgb, #f8fbfd 88%, transparent);
  color: #1d4a83;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  pointer-events: none;
}

.canvas-edit-loading-state::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-bottom: 10px;
  border: 2px solid rgba(47, 109, 183, 0.22);
  border-top-color: #2f6db7;
  border-radius: 999px;
  animation: tool-run-spin 0.72s linear infinite;
}

.canvas-edit-loading-state[hidden] {
  display: none;
}

.canvas-edit-loading :is(.canvas-image-crop-stage, .canvas-image-expand-stage, .canvas-image-erase-stage, .canvas-image-split-preview, .canvas-image-angle-preview) {
  cursor: wait;
}

.canvas-image-split-frame {
  position: relative;
  display: grid;
  max-width: 100%;
  max-height: 100%;
}

.canvas-image-split-frame img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  box-shadow: 0 20px 52px rgba(15, 23, 42, 0.16);
}

.canvas-image-split-frame span {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 12px;
  border: 0 solid transparent;
  background-image:
    linear-gradient(to right, rgba(47, 109, 183, 0.72) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(47, 109, 183, 0.72) 1px, transparent 1px);
  background-size: calc(100% / var(--split-cols, 2)) calc(100% / var(--split-rows, 2));
}

.canvas-image-erase-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.canvas-image-erase-tools button {
  min-height: 34px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 900;
}

.canvas-image-erase-tools button.active {
  border-color: rgba(47, 109, 183, 0.48);
  color: #1d4a83;
  background: rgba(47, 109, 183, 0.12);
  box-shadow: inset 0 0 0 1px rgba(47, 109, 183, 0.16);
}

#canvasImageExpandCanvas:active {
  cursor: grabbing;
}

.canvas-image-edit-note {
  padding: 9px 10px;
  border: 1px dashed rgba(47, 109, 183, 0.28);
  border-radius: 12px;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  background: rgba(239, 246, 255, 0.62);
}

.canvas-image-edit-presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.canvas-image-edit-presets button {
  min-height: 34px;
  border-radius: 10px;
}

.canvas-image-edit-textarea-label {
  display: grid;
  gap: 7px;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}

.canvas-image-edit-textarea-label textarea {
  min-height: 92px;
  resize: vertical;
}

.canvas-image-angle-preview {
  min-height: 0;
  height: 100%;
  cursor: grab;
  perspective: 900px;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 50%, rgba(47, 109, 183, 0.18), transparent 32%),
    linear-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px),
    #0b1118;
  background-size: auto, 34px 34px, 34px 34px, auto;
}

.canvas-image-angle-preview:active {
  cursor: grabbing;
}

.canvas-image-angle-object {
  width: min(62%, 520px);
  display: grid;
  place-items: center;
  position: relative;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  transform-style: preserve-3d;
  transition: transform 120ms ease;
  z-index: 2;
}

.canvas-image-angle-object::before,
.canvas-image-angle-object::after {
  display: none;
}

.canvas-image-angle-object img {
  width: 100%;
  max-height: 340px;
  object-fit: contain;
  position: relative;
  z-index: 2;
  border-radius: 12px;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.18);
}

.canvas-image-angle-object.wide {
  box-shadow: 0 30px 80px rgba(47, 109, 183, 0.35), inset 0 0 0 1px rgba(96, 165, 250, 0.36);
}

#resetCanvasImageAngleBtn {
  position: absolute;
  left: 18px;
  bottom: 16px;
  color: rgba(255, 255, 255, 0.72);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
}

.canvas-image-angle-backdrop {
  position: absolute;
  inset: 22px;
  z-index: 1;
  pointer-events: none;
  border: 1px dashed rgba(148, 163, 184, 0.22);
  border-radius: 16px;
}

.canvas-image-angle-backdrop::before,
.canvas-image-angle-backdrop::after {
  content: "";
  position: absolute;
  background: rgba(148, 163, 184, 0.24);
}

.canvas-image-angle-backdrop::before {
  left: 50%;
  top: 18px;
  bottom: 18px;
  width: 1px;
}

.canvas-image-angle-backdrop::after {
  left: 18px;
  right: 18px;
  top: 50%;
  height: 1px;
}

.canvas-image-angle-backdrop span {
  position: absolute;
  padding: 4px 8px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.78);
  background: rgba(15, 23, 42, 0.58);
  font-size: 11px;
  font-weight: 900;
}

.canvas-image-angle-backdrop .top {
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.canvas-image-angle-backdrop .right {
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.canvas-image-angle-backdrop .bottom {
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.canvas-image-angle-backdrop .left {
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.canvas-image-angle-help {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 3;
  transform: translateX(-50%);
  padding: 7px 12px;
  border: 1px solid rgba(47, 109, 183, 0.26);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.86);
  background: rgba(15, 23, 42, 0.72);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  font-size: 12px;
  font-weight: 900;
}

.canvas-image-angle-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 9px;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}

.canvas-image-angle-row input[type="range"] {
  min-width: 0;
}

.canvas-image-angle-row output {
  justify-self: end;
  color: #0f172a;
  font-weight: 950;
}

.canvas-image-angle-toggle {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}

@media (max-width: 860px) {
  .canvas-image-crop-layout {
    grid-template-columns: 1fr;
  }

  .canvas-image-crop-side,
  .canvas-image-edit-layout {
    grid-template-columns: 1fr;
  }

  .canvas-image-edit-layout {
    display: grid;
  }
}

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

  body:not(.auth-required) .layout.workflow-layout .workflow-inspector {
    display: none;
  }
}

/* Professional dark theme: layered surfaces, visible canvas grids, and restrained contrast.
   v3(2026-07 高级化):底色从「蓝海军」转「石墨微冷」(去饱和,近中性)、描边收细成发丝线(alpha 0.26→0.16)、
   投影加深、品牌渐变压暗一档。散落各文件的硬编码深蓝面板色已按同一映射表整体平移(rgba(18,21,29) 族)。 */
body.theme-dark:not(.auth-required) {
  color-scheme: dark;
  --bg: #0a0c11;
  --panel: #12151c;
  --panel-soft: #151821;
  --surface: #12151d;
  --surface-2: #171a24;
  --surface-3: #1d212d;
  --topbar-bg: linear-gradient(180deg, rgba(20, 23, 32, 0.96), rgba(15, 17, 24, 0.94));
  --mobile-topbar-bg: linear-gradient(180deg, rgba(20, 23, 32, 0.97), rgba(13, 15, 21, 0.96));
  --mobile-topbar-border: rgba(152, 161, 178, 0.16);
  --mobile-topbar-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);
  --advanced-bg: rgba(16, 18, 26, 0.78);
  --advanced-open-bg: rgba(18, 21, 29, 0.86);
  --advanced-border: rgba(141, 149, 165, 0.3);
  --advanced-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --advanced-summary-bg: rgba(18, 21, 29, 0.88);
  --advanced-summary-open-bg: rgba(16, 18, 26, 0.94);
  --advanced-summary-color: #c8d7ea;
  --advanced-summary-hover-bg: rgba(47, 109, 183, 0.18);
  --advanced-summary-hover-color: #9cc4ec;
  --advanced-summary-shadow: none;
  --advanced-arrow: #9fb0c7;
  --mobile-chat-surface: rgba(18, 21, 29, 0.92);
  --mobile-chat-surface-2: rgba(16, 18, 26, 0.88);
  --mobile-chat-border: rgba(141, 149, 165, 0.28);
  --mobile-chat-sidebar-bg: rgba(18, 21, 29, 0.96);
  --mobile-chat-sidebar-shadow: 0 22px 54px rgba(0, 0, 0, 0.45);
  --text: #e9edf4;
  --muted: #98a3b5;
  --border: rgba(152, 161, 178, 0.16);
  --border-strong: rgba(152, 161, 178, 0.32);
  --brand-soft: rgba(47, 109, 183, 0.16);
  --blue-soft: rgba(59, 130, 246, 0.16);
  --danger-soft: rgba(248, 113, 113, 0.16);
  --danger-border: rgba(248, 113, 113, 0.42);
  --ok-soft: rgba(19, 121, 91, 0.2);
  --ok-border: rgba(52, 211, 153, 0.36);
  --warning-soft: rgba(217, 119, 6, 0.18);
  --warning-border: rgba(245, 158, 11, 0.36);
  --info: #7cc4ff;
  --info-soft: rgba(59, 130, 246, 0.16);
  --shadow: 0 22px 54px rgba(0, 0, 0, 0.5);
  /* v2 暗色:靛紫副色——降饱和,避免大色块过艳(2026-06-12 调) */
  --accent-2: #897fc4;
  --accent-2-strong: #6a60b0;
  --accent-2-soft: rgba(120, 112, 180, 0.2);
  --highlight: #f6ab55;
  --highlight-strong: #f2922f;
  --highlight-soft: rgba(242, 146, 47, 0.18);
  --brand-gradient: linear-gradient(135deg, #43679c 0%, #5160a8 52%, #6f5ba8 100%);
  --brand-gradient-strong: linear-gradient(135deg, #3a5c8d 0%, #474e93 52%, #5f4c96 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(47, 109, 183, 0.16), rgba(120, 112, 180, 0.16));
  --brand-glow: 0 12px 30px rgba(0, 0, 0, 0.4);
  --brand-glow-strong: 0 16px 36px rgba(0, 0, 0, 0.46);
  --sidebar-icon-color: #b8cce4;
  --sidebar-icon-border: rgba(90, 166, 232, 0.22);
  --sidebar-icon-bg: linear-gradient(180deg, rgba(27, 31, 41, 0.98), rgba(16, 19, 26, 0.98));
  --sidebar-icon-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --sidebar-icon-hover-color: #d7eaff;
  --sidebar-icon-hover-border: rgba(90, 166, 232, 0.38);
  --sidebar-icon-hover-bg: linear-gradient(180deg, rgba(47, 109, 183, 0.24), rgba(37, 90, 156, 0.22));
  --sidebar-icon-active-color: #eef7ff;
  --sidebar-icon-active-border: rgba(90, 166, 232, 0.58);
  --sidebar-icon-active-bg: linear-gradient(180deg, rgba(90, 166, 232, 0.3), rgba(37, 90, 156, 0.32));
  --sidebar-icon-active-shadow: inset 0 0 0 1px rgba(214, 235, 255, 0.08), 0 8px 22px rgba(47, 109, 183, 0.22);
  background:
    radial-gradient(circle at 16% -2%, rgba(47, 109, 183, 0.1), transparent 30%),
    radial-gradient(circle at 82% 4%, rgba(120, 112, 180, 0.07), transparent 34%),
    radial-gradient(circle at 60% 100%, rgba(99, 110, 180, 0.05), transparent 40%),
    linear-gradient(180deg, #0c0e14 0%, #090b10 100%);
  color: var(--text);
}

body.theme-dark:not(.auth-required) .layout,
body.theme-dark:not(.auth-required) .tab-panel {
  background: transparent;
  color: var(--text);
}

body.theme-dark:not(.auth-required) .topbar,
body.theme-dark:not(.auth-required) .panel,
body.theme-dark:not(.auth-required) .tool-card,
body.theme-dark:not(.auth-required) .task-detail-panel,
body.theme-dark:not(.auth-required) .workflow-sidebar,
body.theme-dark:not(.auth-required) .workflow-main,
body.theme-dark:not(.auth-required) .workflow-inspector,
body.theme-dark:not(.auth-required) .workflow-toolbar,
body.theme-dark:not(.auth-required) .infinite-canvas-main,
body.theme-dark:not(.auth-required) .infinite-canvas-inspector,
body.theme-dark:not(.auth-required) .text-chat-sidebar,
body.theme-dark:not(.auth-required) .text-chat-main,
body.theme-dark:not(.auth-required) .text-chat-composer,
body.theme-dark:not(.auth-required) .model-card,
body.theme-dark:not(.auth-required) .account-card {
  background: rgba(18, 21, 29, 0.92);
  border-color: var(--border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035), var(--shadow);
  color: var(--text);
}

body.theme-dark:not(.auth-required) .topbar {
  background: linear-gradient(180deg, rgba(20, 23, 32, 0.96), rgba(15, 17, 24, 0.94));
}

body.theme-dark:not(.auth-required) .module-tab,
body.theme-dark:not(.auth-required) .topbar .module-tab,
body.theme-dark:not(.auth-required) .task-row,
body.theme-dark:not(.auth-required) .result-card,
body.theme-dark:not(.auth-required) .case-card,
body.theme-dark:not(.auth-required) .media-library-card,
body.theme-dark:not(.auth-required) .favorite-case-card,
body.theme-dark:not(.auth-required) .workflow-status-row > *,
body.theme-dark:not(.auth-required) .infinite-canvas-status-row > *,
body.theme-dark:not(.auth-required) .workflow-history-actions,
body.theme-dark:not(.auth-required) .file-summary,
body.theme-dark:not(.auth-required) .infinite-canvas-layer-item,
body.theme-dark:not(.auth-required) .infinite-canvas-property-panel,
body.theme-dark:not(.auth-required) .infinite-canvas-tip,
body.theme-dark:not(.auth-required) .canvas-side-dock,
body.theme-dark:not(.auth-required) .message-bubble,
body.theme-dark:not(.auth-required) .text-chat-history-item {
  background: rgba(18, 27, 43, 0.82);
  border-color: var(--border);
  color: var(--text);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

body.theme-dark:not(.auth-required) .module-tab.active,
body.theme-dark:not(.auth-required) .topbar .module-tab.active,
body.theme-dark:not(.auth-required) .infinite-canvas-layer-item.selected {
  background: linear-gradient(180deg, rgba(47, 109, 183, 0.2), rgba(47, 109, 183, 0.11));
  border-color: rgba(90, 166, 232, 0.56);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

body.theme-dark:not(.auth-required) .text-chat-history-item.active {
  background: rgba(47, 109, 183, 0.18);
  border-color: rgba(90, 166, 232, 0.56);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

body.theme-dark:not(.auth-required) .text-chat-history-item.active::before {
  background: #5aa6e8;
}

body.theme-dark:not(.auth-required) h1,
body.theme-dark:not(.auth-required) h2,
body.theme-dark:not(.auth-required) h3,
body.theme-dark:not(.auth-required) h4,
body.theme-dark:not(.auth-required) strong,
body.theme-dark:not(.auth-required) label,
body.theme-dark:not(.auth-required) .brand-text h1,
body.theme-dark:not(.auth-required) .module-tab strong,
body.theme-dark:not(.auth-required) .task-title,
body.theme-dark:not(.auth-required) .canvas-title-input {
  color: #f4f8ff;
}

body.theme-dark:not(.auth-required) p,
body.theme-dark:not(.auth-required) small,
body.theme-dark:not(.auth-required) .muted,
body.theme-dark:not(.auth-required) .brand-text p,
body.theme-dark:not(.auth-required) .module-tab span,
body.theme-dark:not(.auth-required) .helper-text,
body.theme-dark:not(.auth-required) .task-meta,
body.theme-dark:not(.auth-required) .infinite-canvas-head p,
body.theme-dark:not(.auth-required) .canvas-subtitle-input {
  color: var(--muted);
}

body.theme-dark:not(.auth-required) input,
body.theme-dark:not(.auth-required) select,
body.theme-dark:not(.auth-required) textarea,
body.theme-dark:not(.auth-required) .input-like,
body.theme-dark:not(.auth-required) .editable-title {
  background: rgba(9, 11, 16, 0.72);
  border-color: var(--border-strong);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.theme-dark:not(.auth-required) input::placeholder,
body.theme-dark:not(.auth-required) textarea::placeholder {
  color: rgba(154, 168, 188, 0.72);
}

body.theme-dark:not(.auth-required) input:focus,
body.theme-dark:not(.auth-required) select:focus,
body.theme-dark:not(.auth-required) textarea:focus {
  border-color: rgba(90, 166, 232, 0.72);
  box-shadow: 0 0 0 3px rgba(90, 166, 232, 0.16);
}

body.theme-dark:not(.auth-required) button:not([data-ui-compact-control]),
body.theme-dark:not(.auth-required) .secondary,
body.theme-dark:not(.auth-required) .icon-button {
  background: rgba(17, 30, 50, 0.88);
  border-color: rgba(96, 165, 250, 0.34);
  color: #cfe3ff;
}

body.theme-dark:not(.auth-required) button:not([data-ui-compact-control]):hover,
body.theme-dark:not(.auth-required) .secondary:hover,
body.theme-dark:not(.auth-required) .icon-button:hover {
  background: rgba(37, 53, 78, 0.95);
  border-color: rgba(125, 183, 255, 0.58);
}

body.theme-dark:not(.auth-required) .primary {
  background: var(--brand-gradient);
  border-color: transparent;
  color: #f6f9ff;
  box-shadow: var(--brand-glow);
}

/* 同浅色:媒体图上的磨砂图标按钮(.gen-icon-btn)不吃 danger 皮肤。 */
body.theme-dark:not(.auth-required) .danger:where(:not(.gen-icon-btn)),
body.theme-dark:not(.auth-required) button.danger:where(:not(.gen-icon-btn)) {
  background: rgba(127, 29, 29, 0.36);
  border-color: rgba(248, 113, 113, 0.5);
  color: #fecaca;
}

body.theme-dark:not(.auth-required) .state-pill,
body.theme-dark:not(.auth-required) .badge,
body.theme-dark:not(.auth-required) .price-pill,
body.theme-dark:not(.auth-required) .credit-pill {
  background: rgba(47, 109, 183, 0.14);
  border-color: rgba(90, 166, 232, 0.42);
  color: #9cc4ec;
}

body.theme-dark:not(.auth-required) .workflow-stage-wrap,
body.theme-dark:not(.auth-required) .workflow-lite-wrap {
  background-color: var(--canvas-surface, var(--studio-canvas-surface-dark)) !important;
  background-image: var(--canvas-grid-image, var(--studio-canvas-grid-image-dark)) !important;
  background-size: var(--workflow-grid-size, var(--canvas-grid-size-current, 28px)) var(--workflow-grid-size, var(--canvas-grid-size-current, 28px)) !important;
  background-position: var(--workflow-grid-position-x, 0px) var(--workflow-grid-position-y, 0px) !important;
  border-color: var(--border) !important;
}

body.theme-dark:not(.auth-required) .workflow-stage-wrap.workflow-grid-layer-ready,
body.theme-dark:not(.auth-required) .workflow-lite-wrap.workflow-grid-layer-ready {
  background-image: none !important;
}

body.theme-dark:not(.auth-required) .workflow-lite-canvas {
  background: transparent !important;
}

body.theme-dark:not(.auth-required) .workflow-lite-wrap::before {
  background: radial-gradient(circle at 50% 0%, rgba(90, 166, 232, 0.07), transparent 34%);
}

body.theme-dark:not(.auth-required) .infinite-card,
body.theme-dark:not(.auth-required) .canvas-edit-panel,
body.theme-dark:not(.auth-required) .workflow-node,
body.theme-dark:not(.auth-required) .litegraph.litesearchbox,
body.theme-dark:not(.auth-required) .litegraph.graphdialog,
body.theme-dark:not(.auth-required) .context-menu,
body.theme-dark:not(.auth-required) .modal-panel,
body.theme-dark:not(.auth-required) .command-palette,
body.theme-dark:not(.auth-required) .canvas-add-menu,
body.theme-dark:not(.auth-required) .canvas-image-edit-modal,
body.theme-dark:not(.auth-required) .media-library-dialog {
  background: rgba(18, 21, 29, 0.97);
  border-color: var(--border-strong);
  color: var(--text);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.42);
}

body.theme-dark:not(.auth-required) .infinite-card {
  background: linear-gradient(180deg, rgba(18, 27, 43, 0.98), rgba(13, 22, 36, 0.98));
}

body.theme-dark:not(.auth-required) .workflow-node-body,
body.theme-dark:not(.auth-required) .infinite-card-body,
body.theme-dark:not(.auth-required) .canvas-edit-panel-body,
body.theme-dark:not(.auth-required) .media-drop-zone,
body.theme-dark:not(.auth-required) .reference-drop-zone {
  background: rgba(9, 17, 30, 0.64);
  border-color: var(--border);
  color: var(--text);
}

body.theme-dark:not(.auth-required) .context-menu button,
body.theme-dark:not(.auth-required) .canvas-add-menu button,
body.theme-dark:not(.auth-required) .command-palette-item,
body.theme-dark:not(.auth-required) .litegraph.litesearchbox.graphdialog.rounded .lite-search-item {
  background: rgba(18, 21, 29, 0.88) !important;
  color: var(--text) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
}

body.theme-dark:not(.auth-required) .context-menu button:hover,
body.theme-dark:not(.auth-required) .canvas-add-menu button:hover,
body.theme-dark:not(.auth-required) .command-palette-item:hover,
body.theme-dark:not(.auth-required) .litegraph.litesearchbox.graphdialog.rounded .lite-search-item:hover,
body.theme-dark:not(.auth-required) .litegraph.litesearchbox.graphdialog.rounded .lite-search-item.selected {
  background: rgba(47, 109, 183, 0.18) !important;
  color: #eaf4ff !important;
  border-color: rgba(90, 166, 232, 0.42) !important;
}

body.theme-dark:not(.auth-required) .infinite-canvas-link,
body.theme-dark:not(.auth-required) .workflow-edge-path {
  stroke: var(--wire-fx-line, #6f8db2);
}

body.theme-dark:not(.auth-required) .infinite-canvas-link.hovered,
body.theme-dark:not(.auth-required) .infinite-canvas-link.selected,
body.theme-dark:not(.auth-required) .infinite-canvas-link.energized,
body.theme-dark:not(.auth-required) .workflow-edge-path.selected {
  stroke: var(--wire-fx-line-selected, #8fb8df);
}

body.theme-dark:not(.auth-required) .infinite-canvas-link-hit,
body.theme-dark:not(.auth-required) .workflow-edge-hit {
  stroke: transparent;
}

body.theme-dark:not(.auth-required) .workflow-node.selected,
body.theme-dark:not(.auth-required) .infinite-card.selected {
  outline-color: rgba(90, 166, 232, 0.9);
  box-shadow: 0 0 0 2px rgba(90, 166, 232, 0.34), 0 18px 44px rgba(0, 0, 0, 0.38);
}

body.theme-dark:not(.auth-required) .modal-backdrop,
body.theme-dark:not(.auth-required) .image-preview-backdrop {
  background: rgba(3, 7, 18, 0.62);
  backdrop-filter: blur(14px);
}

body.theme-dark:not(.auth-required) table,
body.theme-dark:not(.auth-required) .settings-section,
body.theme-dark:not(.auth-required) .advanced-panel,
body.theme-dark:not(.auth-required) details,
body.theme-dark:not(.auth-required) .form-card {
  background: rgba(15, 17, 24, 0.68);
  border-color: var(--border);
  color: var(--text);
}

/* 接口管理两张顶卡:亮色是白底渐变,暗色必须同步否则白卡浮浅字 */
body.theme-dark:not(.auth-required) .gateway-card,
body.theme-dark:not(.auth-required) .settings-provider-card {
  background: linear-gradient(180deg, rgba(17, 27, 43, 0.95), rgba(13, 21, 35, 0.9));
  border-color: rgba(141, 149, 165, 0.3);
  color: var(--text);
}

body.theme-dark:not(.auth-required) hr,
body.theme-dark:not(.auth-required) .divider {
  border-color: var(--border);
}

body.theme-dark:not(.auth-required) ::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.72);
  border: 3px solid rgba(11, 17, 29, 0.92);
}

/* Dark theme final pass: each workspace keeps its own readable surface rules. */
body.theme-dark:not(.auth-required) .tool-shell,
body.theme-dark:not(.auth-required) .workspace-shell,
body.theme-dark:not(.auth-required) .image-layout,
body.theme-dark:not(.auth-required) .video-layout,
body.theme-dark:not(.auth-required) .audio-layout,
body.theme-dark:not(.auth-required) .task-panel,
body.theme-dark:not(.auth-required) .result-panel,
body.theme-dark:not(.auth-required) .task-list-panel,
body.theme-dark:not(.auth-required) .task-detail-panel {
  background: rgba(13, 21, 35, 0.92);
  border-color: rgba(141, 149, 165, 0.24);
  color: #e7eef9;
}

body.theme-dark:not(.auth-required) #textTab,
body.theme-dark:not(.auth-required) #imageTab,
body.theme-dark:not(.auth-required) #videoToolTab,
body.theme-dark:not(.auth-required) #audioToolTab,
body.theme-dark:not(.auth-required) .tab-panel.active {
  color: #e7eef9;
}

body.theme-dark:not(.auth-required) .tabs,
body.theme-dark:not(.auth-required) .tab-buttons,
body.theme-dark:not(.auth-required) .mode-tabs,
body.theme-dark:not(.auth-required) .tool-mode-tabs,
body.theme-dark:not(.auth-required) .sub-tabs,
body.theme-dark:not(.auth-required) .workflow-toolbar {
  background: rgba(18, 21, 29, 0.86);
  border-color: rgba(141, 149, 165, 0.26);
  color: #dbe7f5;
}

body.theme-dark:not(.auth-required) .tabs button,
body.theme-dark:not(.auth-required) .tab-buttons button,
body.theme-dark:not(.auth-required) .mode-tabs button,
body.theme-dark:not(.auth-required) .tool-mode-tab,
body.theme-dark:not(.auth-required) .sub-tabs button {
  background: rgba(17, 30, 50, 0.72);
  color: #b9c7da;
  border-color: rgba(141, 149, 165, 0.24);
}

body.theme-dark:not(.auth-required) .tabs button.active,
body.theme-dark:not(.auth-required) .tab-buttons button.active,
body.theme-dark:not(.auth-required) .mode-tabs button.active,
body.theme-dark:not(.auth-required) .tool-mode-tab.active,
body.theme-dark:not(.auth-required) .sub-tabs button.active {
  background: linear-gradient(180deg, rgba(90, 166, 232, 0.28), rgba(47, 109, 183, 0.14));
  color: #eaf4ff;
  border-color: rgba(90, 166, 232, 0.56);
  box-shadow: inset 0 -2px 0 #5aa6e8;
}

body.theme-dark:not(.auth-required) .layout.workflow-layout .workflow-toolbar,
body.theme-dark:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-toolbar {
  background: rgba(18, 21, 29, 0.82) !important;
  border-color: rgba(141, 149, 165, 0.3) !important;
  color: #e7eef9 !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28) !important;
}

body.theme-dark:not(.auth-required) .canvas-title-input,
body.theme-dark:not(.auth-required) .canvas-subtitle-input,
body.theme-dark:not(.auth-required) .workflow-toolbar input,
body.theme-dark:not(.auth-required) .workflow-toolbar textarea,
body.theme-dark:not(.auth-required) .infinite-canvas-toolbar input,
body.theme-dark:not(.auth-required) .infinite-canvas-toolbar textarea {
  background: rgba(9, 11, 16, 0.78) !important;
  border-color: rgba(141, 149, 165, 0.34) !important;
  color: #e7eef9 !important;
}

body.theme-dark:not(.auth-required) .canvas-board-row,
body.theme-dark:not(.auth-required) .workflow-board-row {
  background: rgba(18, 21, 29, 0.82) !important;
  border-color: rgba(141, 149, 165, 0.3) !important;
  color: #e7eef9 !important;
  /* 暗色阴影与工作流条统一(原本画布条无暗色阴影、沿用亮色近黑低透明阴影在暗底不可见) */
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28) !important;
}

body.theme-dark:not(.auth-required) .canvas-board-row label,
body.theme-dark:not(.auth-required) .workflow-board-row label,
body.theme-dark:not(.auth-required) .canvas-creator-bar label,
body.theme-dark:not(.auth-required) .workflow-toolbar label {
  color: #dbe7f5 !important;
}

body.theme-dark:not(.auth-required) label,
body.theme-dark:not(.auth-required) .form-grid label,
body.theme-dark:not(.auth-required) .options-grid label,
body.theme-dark:not(.auth-required) .quick-options label {
  color: #e7eef9;
}

body.theme-dark:not(.auth-required) .upload-box,
body.theme-dark:not(.auth-required) .drop-zone,
body.theme-dark:not(.auth-required) .selected-preview,
body.theme-dark:not(.auth-required) .reference-preview,
body.theme-dark:not(.auth-required) .file-summary,
body.theme-dark:not(.auth-required) .plan-summary-inline,
body.theme-dark:not(.auth-required) .advanced,
body.theme-dark:not(.auth-required) .advanced summary,
body.theme-dark:not(.auth-required) .options-grid,
body.theme-dark:not(.auth-required) .toggle-row,
body.theme-dark:not(.auth-required) .light-result {
  background: rgba(16, 18, 26, 0.84);
  border-color: rgba(141, 149, 165, 0.28);
  color: #dbe7f5;
}

body.theme-dark:not(.auth-required) .drop-zone {
  background:
    linear-gradient(180deg, rgba(47, 109, 183, 0.08), rgba(16, 18, 26, 0.84));
  border-style: dashed;
}

body.theme-dark:not(.auth-required) .drop-zone strong,
body.theme-dark:not(.auth-required) .upload-box strong {
  color: #f3f7fc;
}

body.theme-dark:not(.auth-required) .drop-zone p,
body.theme-dark:not(.auth-required) .file-summary,
body.theme-dark:not(.auth-required) .plan-summary-inline {
  color: #a7b5c9;
}

body.theme-dark:not(.auth-required) .selected-preview:empty,
body.theme-dark:not(.auth-required) .reference-preview:empty {
  background: rgba(9, 11, 16, 0.62);
}

body.theme-dark:not(.auth-required) .result-stats > *,
body.theme-dark:not(.auth-required) .stat-card,
body.theme-dark:not(.auth-required) .job-stat,
body.theme-dark:not(.auth-required) .task-summary-card,
body.theme-dark:not(.auth-required) .job-row,
body.theme-dark:not(.auth-required) .task-row {
  background: rgba(16, 18, 26, 0.88);
  border-color: rgba(141, 149, 165, 0.26);
  color: #e7eef9;
}

body.theme-dark:not(.auth-required) .text-chat-shell,
body.theme-dark:not(.auth-required) .text-chat-main,
body.theme-dark:not(.auth-required) .text-chat-thread,
body.theme-dark:not(.auth-required) .text-chat-footer {
  background: rgba(11, 18, 30, 0.94);
  border-color: rgba(141, 149, 165, 0.24);
  color: #e7eef9;
}

body.theme-dark:not(.auth-required) .text-chat-bubble {
  background: rgba(18, 29, 47, 0.96);
  border-color: rgba(141, 149, 165, 0.28);
  color: #e7eef9;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

body.theme-dark:not(.auth-required) .text-chat-message.user .text-chat-bubble {
  background: rgba(47, 109, 183, 0.16);
  border-color: rgba(90, 166, 232, 0.38);
}

body.theme-dark:not(.auth-required) .text-chat-message.system .text-chat-bubble {
  background: rgba(32, 36, 46, 0.86);
  color: #a7b5c9;
}

body.theme-dark:not(.auth-required) .text-chat-composer {
  background: rgba(16, 18, 26, 0.92);
  border-color: rgba(141, 149, 165, 0.34);
}

body.theme-dark:not(.auth-required) .workflow-main,
body.theme-dark:not(.auth-required) .layout.workflow-layout .workflow-main,
body.theme-dark:not(.auth-required) .infinite-canvas-main,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-canvas-main {
  background: rgba(8, 14, 24, 0.82);
  border-color: rgba(141, 149, 165, 0.25);
}

body.theme-dark:not(.auth-required) .infinite-canvas-stage:not(.picking-reference)::before {
  content: none !important;
  display: none !important;
}

body.theme-dark:not(.auth-required) .workflow-inspector,
body.theme-dark:not(.auth-required) .infinite-canvas-inspector {
  background: rgba(13, 21, 35, 0.96);
  border-color: rgba(141, 149, 165, 0.26);
}

body.theme-dark:not(.auth-required) .workflow-check-list,
body.theme-dark:not(.auth-required) .workflow-node-help,
body.theme-dark:not(.auth-required) .workflow-empty-state {
  background: rgba(16, 19, 26, 0.92);
  border-color: rgba(141, 149, 165, 0.28);
  color: #dbe7f5;
}

body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card {
  background: rgba(248, 251, 255, 0.97);
  border-color: rgba(125, 144, 168, 0.72);
  color: #102033;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card:hover,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card:hover {
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.34);
}

body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card.selected,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card.selected {
  border-color: #5aa6e8;
  box-shadow: 0 0 0 2px rgba(90, 166, 232, 0.34), 0 24px 58px rgba(0, 0, 0, 0.34);
}

body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body {
  background: transparent;
  color: #102033;
}

body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-summary strong,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-summary strong,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-note,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-note {
  color: #102033;
}

body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-summary span,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-summary small,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-summary span,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-summary small,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-meta,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-meta {
  color: #526176;
}

body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body textarea,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body input:not([type="range"]),
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body select,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body textarea,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body input:not([type="range"]),
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body select {
  background: #ffffff;
  border-color: #d7e2ef;
  color: #102033;
}

body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-media-box,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-drop-zone,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-media-box,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-drop-zone {
  background: rgba(241, 247, 250, 0.96);
  border-color: #d6e3ee;
  color: #526176;
}

body.theme-dark:not(.auth-required) .infinite-card-inline-panel,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel,
body.theme-dark:not(.auth-required) .canvas-edit-panel {
  background: rgba(248, 251, 255, 0.98);
  border-color: rgba(125, 144, 168, 0.62);
  color: #102033;
  box-shadow: 0 24px 68px rgba(0, 0, 0, 0.38);
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-inline-references {
  background: linear-gradient(180deg, rgba(234, 242, 251, 0.98), rgba(224, 236, 247, 0.98));
  border-color: rgba(47, 109, 183, 0.26);
  color: #102033;
}

body.theme-dark:not(.auth-required) .context-menu,
body.theme-dark:not(.auth-required) .canvas-add-menu,
body.theme-dark:not(.auth-required) .command-palette,
body.theme-dark:not(.auth-required) .modal-panel,
body.theme-dark:not(.auth-required) .media-library-dialog {
  background: rgba(18, 21, 29, 0.98);
  border-color: rgba(141, 149, 165, 0.32);
  color: #e7eef9;
}

body.theme-dark:not(.auth-required) .context-menu button,
body.theme-dark:not(.auth-required) .canvas-add-menu button,
body.theme-dark:not(.auth-required) .command-palette-item {
  background: rgba(18, 21, 29, 0.86) !important;
  color: #e7eef9 !important;
}

body.theme-dark:not(.auth-required) .context-menu button:hover,
body.theme-dark:not(.auth-required) .canvas-add-menu button:hover,
body.theme-dark:not(.auth-required) .command-palette-item:hover {
  background: rgba(90, 166, 232, 0.14) !important;
  color: #f8fffd !important;
}

body.theme-dark:not(.auth-required) .watermark-card,
body.theme-dark:not(.auth-required) .canvas-image-crop-modal,
body.theme-dark:not(.auth-required) .canvas-image-edit-modal,
body.theme-dark:not(.auth-required) .canvas-image-angle-panel,
body.theme-dark:not(.auth-required) .canvas-image-crop-side,
body.theme-dark:not(.auth-required) .canvas-image-edit-side {
  background: rgba(18, 21, 29, 0.98);
  border-color: rgba(141, 149, 165, 0.32);
  color: #e7eef9;
}

body.theme-dark:not(.auth-required) .canvas-image-crop-stage,
body.theme-dark:not(.auth-required) .canvas-image-expand-stage,
body.theme-dark:not(.auth-required) .canvas-image-erase-stage,
body.theme-dark:not(.auth-required) .canvas-image-split-preview,
body.theme-dark:not(.auth-required) .canvas-image-edit-stage,
body.theme-dark:not(.auth-required) .canvas-video-edit-preview,
body.theme-dark:not(.auth-required) .watermark-canvas-wrap {
  background: #0b1220;
  border-color: rgba(141, 149, 165, 0.28);
}

/* Dark theme workspace corrections. Keep each major tool readable instead of mixing white cards into dark pages. */
body.theme-dark:not(.auth-required) .stats-grid div,
body.theme-dark:not(.auth-required) .job-select,
body.theme-dark:not(.auth-required) .case-select,
body.theme-dark:not(.auth-required) .case-preview,
body.theme-dark:not(.auth-required) .empty-row,
body.theme-dark:not(.auth-required) .thumb,
body.theme-dark:not(.auth-required) .gallery-select-bar,
body.theme-dark:not(.auth-required) .media-output-card,
body.theme-dark:not(.auth-required) .item-row,
body.theme-dark:not(.auth-required) .shortcut-grid div {
  background: rgba(16, 18, 26, 0.9) !important;
  border-color: rgba(141, 149, 165, 0.3) !important;
  color: #e7eef9 !important;
  box-shadow: none;
}

body.theme-dark:not(.auth-required) .empty-row.error,
body.theme-dark:not(.auth-required) .workflow-project-empty.error,
body.theme-dark:not(.auth-required) .result-box.is-error,
body.theme-dark:not(.auth-required) .light-result.is-error,
body.theme-dark:not(.auth-required) .file-summary.is-error {
  background: rgba(69, 18, 18, 0.78) !important;
  border-color: rgba(248, 113, 113, 0.5) !important;
  color: #fecaca !important;
}

body.theme-dark:not(.auth-required) .empty-row.warn {
  background: rgba(69, 49, 18, 0.76) !important;
  border-color: rgba(245, 158, 11, 0.48) !important;
  color: #fde68a !important;
}

body.theme-dark:not(.auth-required) .routing-err {
  color: #fca5a5;
}

body.theme-dark:not(.auth-required) .job-row.selected .job-select,
body.theme-dark:not(.auth-required) .thumb.selected,
body.theme-dark:not(.auth-required) .workflow-media-library-card.is-selected,
body.theme-dark:not(.auth-required) .media-library-card.is-selected {
  background: linear-gradient(180deg, rgba(47, 109, 183, 0.18), rgba(16, 18, 26, 0.9)) !important;
  border-color: rgba(90, 166, 232, 0.62) !important;
  color: #eaf4ff !important;
  box-shadow: inset 3px 0 0 #5aa6e8, 0 12px 28px rgba(0, 0, 0, 0.22);
}

body.theme-dark:not(.auth-required) .job-row.selected .job-select span,
body.theme-dark:not(.auth-required) .job-select span,
body.theme-dark:not(.auth-required) .case-select .case-info > span:not(.case-param-list),
body.theme-dark:not(.auth-required) .stats-grid small,
body.theme-dark:not(.auth-required) .thumb-footer span,
body.theme-dark:not(.auth-required) .media-thumb-prompt,
body.theme-dark:not(.auth-required) .item-row p,
body.theme-dark:not(.auth-required) .gallery-select-bar span {
  color: #a9b8cc !important;
}

body.theme-dark:not(.auth-required) .job-select strong,
body.theme-dark:not(.auth-required) .case-select strong,
body.theme-dark:not(.auth-required) .stats-grid span,
body.theme-dark:not(.auth-required) .item-row b,
body.theme-dark:not(.auth-required) .media-output-card strong {
  color: #f4f8ff !important;
}

body.theme-dark:not(.auth-required) .case-param-list em,
body.theme-dark:not(.auth-required) .thumb-badge,
body.theme-dark:not(.auth-required) .media-play-badge {
  background: rgba(90, 166, 232, 0.14) !important;
  border-color: rgba(90, 166, 232, 0.38) !important;
  color: #9cc4ec !important;
}

body.theme-dark:not(.auth-required) .thumb-select span {
  background: rgba(16, 18, 26, 0.92) !important;
  border-color: rgba(148, 163, 184, 0.58) !important;
}

body.theme-dark:not(.auth-required) .thumb-select input:checked + span {
  background: #5aa6e8 !important;
  border-color: #9cc4ec !important;
}

body.theme-dark:not(.auth-required) .text-chat-shell {
  background: #0b1220 !important;
  border-color: rgba(141, 149, 165, 0.3) !important;
}

body.theme-dark:not(.auth-required) .text-chat-sidebar,
body.theme-dark:not(.auth-required) .text-chat-main,
body.theme-dark:not(.auth-required) .text-chat-topbar,
body.theme-dark:not(.auth-required) .text-chat-messages,
body.theme-dark:not(.auth-required) .text-chat-footer {
  background: rgba(11, 18, 30, 0.96) !important;
  border-color: rgba(141, 149, 165, 0.26) !important;
  color: #e7eef9 !important;
}

body.theme-dark:not(.auth-required) .text-chat-messages {
  background:
    radial-gradient(circle at 18% 8%, rgba(90, 166, 232, 0.08), transparent 32%),
    linear-gradient(180deg, #0d1625 0%, #0a111e 100%) !important;
}

body.theme-dark:not(.auth-required) .text-chat-param > span { color: #8aa0bb !important; }
body.theme-dark:not(.auth-required) .text-chat-param > input {
  background: rgba(15, 23, 42, 0.88) !important;
  border-color: rgba(141, 149, 165, 0.3) !important;
  color: #e7eef9 !important;
}

body.theme-dark:not(.auth-required) .text-chat-history-item,
body.theme-dark:not(.auth-required) .text-chat-empty,
body.theme-dark:not(.auth-required) .text-chat-empty-mini,
body.theme-dark:not(.auth-required) .text-chat-suggestions button,
body.theme-dark:not(.auth-required) .switch-row,
body.theme-dark:not(.auth-required) .text-chat-param,
body.theme-dark:not(.auth-required) .text-message-copy {
  background: rgba(16, 18, 26, 0.9) !important;
  border-color: rgba(141, 149, 165, 0.3) !important;
  color: #e7eef9 !important;
}

body.theme-dark:not(.auth-required) .text-chat-history-item.active {
  background: rgba(47, 109, 183, 0.2) !important;
  border-color: rgba(90, 166, 232, 0.56) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
}

body.theme-dark:not(.auth-required) .text-chat-history-item.active::before {
  background: #5aa6e8 !important;
}

body.theme-dark:not(.auth-required) .text-chat-history-preview,
body.theme-dark:not(.auth-required) .text-chat-history-meta time {
  color: #8aa0bb !important;
}

body.theme-dark:not(.auth-required) .text-chat-history-count {
  background: rgba(90, 166, 232, 0.12) !important;
  border-color: rgba(90, 166, 232, 0.28) !important;
  color: #9cc4ec !important;
}

body.theme-dark:not(.auth-required) .text-chat-delete-btn {
  background: rgba(90, 166, 232, 0.08) !important;
  border-color: rgba(90, 166, 232, 0.24) !important;
  color: #9cc4ec !important;
}

body.theme-dark:not(.auth-required) .text-chat-delete-btn:hover {
  background: rgba(220, 38, 38, 0.12) !important;
  border-color: rgba(243, 164, 164, 0.3) !important;
  color: #f3a4a4 !important;
}

body.theme-dark:not(.auth-required) .text-chat-history-item.active .text-chat-delete-btn:hover {
  background: rgba(220, 38, 38, 0.12) !important;
  border-color: rgba(243, 164, 164, 0.3) !important;
  color: #f3a4a4 !important;
}

body.theme-dark:not(.auth-required) .text-chat-bubble {
  background: #111c2d !important;
  border-color: rgba(141, 149, 165, 0.32) !important;
  color: #e7eef9 !important;
}

body.theme-dark:not(.auth-required) .text-chat-message.user .text-chat-bubble {
  background: rgba(47, 109, 183, 0.18) !important;
  border-color: rgba(90, 166, 232, 0.5) !important;
  color: #eaf4ff !important;
}

body.theme-dark:not(.auth-required) .text-chat-composer {
  background: rgba(9, 17, 30, 0.96) !important;
  border-color: rgba(141, 149, 165, 0.38) !important;
}

body.theme-dark:not(.auth-required) .text-chat-composer textarea {
  background: transparent !important;
  color: #e7eef9 !important;
}

body.theme-dark:not(.auth-required) .layout.workflow-layout .workflow-inspector,
body.theme-dark:not(.auth-required) .workflow-inspector,
body.theme-dark:not(.auth-required) .workflow-inspector-head,
body.theme-dark:not(.auth-required) .workflow-inspector-body {
  background: rgba(13, 21, 35, 0.98) !important;
  border-color: rgba(141, 149, 165, 0.3) !important;
  color: #e7eef9 !important;
}

body.theme-dark:not(.auth-required) .workflow-inspector-empty,
body.theme-dark:not(.auth-required) .workflow-check-list,
body.theme-dark:not(.auth-required) .workflow-node-help,
body.theme-dark:not(.auth-required) .workflow-toggle-field,
body.theme-dark:not(.auth-required) .workflow-meta-grid,
body.theme-dark:not(.auth-required) .workflow-task-estimate {
  background: rgba(16, 18, 26, 0.92) !important;
  border-color: rgba(141, 149, 165, 0.3) !important;
  color: #dbe7f5 !important;
}

body.theme-dark:not(.auth-required) .workflow-field,
body.theme-dark:not(.auth-required) .workflow-field span,
body.theme-dark:not(.auth-required) .workflow-help-grid,
body.theme-dark:not(.auth-required) .workflow-node-help p,
body.theme-dark:not(.auth-required) .workflow-check-item span {
  color: #dbe7f5 !important;
}

/* ===== 暗色补全第二轮(全菜单巡检):被高特异度浅色规则压住或此前从未覆盖的组件 ===== */
body.theme-dark:not(.auth-required) .model-capability-hint {
  border-color: rgba(141, 149, 165, 0.4);
  background: rgba(16, 18, 26, 0.88);
  color: #9fc0e0;
}
body.theme-dark:not(.auth-required) .model-capability-hint.capability-note-editable:hover { border-color: rgba(141, 149, 165, 0.7); }
body.theme-dark:not(.auth-required) .capability-note-editor {
  background: rgba(9, 12, 20, 0.95);
  color: #d6e4f4;
  border-color: rgba(141, 149, 165, 0.5);
}
body.theme-dark:not(.auth-required) .capability-note-btn {
  background: rgba(22, 26, 36, 0.9);
  border-color: rgba(141, 149, 165, 0.4);
  color: #9fc0e0;
}
body.theme-dark:not(.auth-required) .capability-note-btn.capability-note-save { background: #2f6fe0; border-color: #2f6fe0; color: #fff; }

body.theme-dark:not(.auth-required) .layout.media-tool-layout .tool-page-head {
  background: rgba(13, 21, 35, 0.95);
  border-bottom-color: rgba(141, 149, 165, 0.3);
}

body.theme-dark:not(.auth-required) .tool-mode-tabs {
  border-color: rgba(141, 149, 165, 0.3);
  background: rgba(16, 18, 26, 0.88);
}

body.theme-dark:not(.auth-required) .tool-mode-tab {
  color: #a7b5c9;
}

body.theme-dark:not(.auth-required) .tool-mode-tab:hover {
  background: rgba(32, 36, 46, 0.7);
  color: #dbe7f5;
}

body.theme-dark:not(.auth-required) .tool-mode-tab.active {
  background: rgba(47, 109, 183, 0.3);
  color: #e7eef9;
  box-shadow: inset 0 -2px 0 #5aa6e8;
}

body.theme-dark:not(.auth-required) .text-chat-avatar {
  background: rgba(47, 109, 183, 0.22);
  color: #9cc4ec;
}

body.theme-dark:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-status-row .file-summary,
body.theme-dark:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-status-row .workflow-history-actions,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row .file-summary,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row .workflow-history-actions,
body.theme-dark:not(.auth-required) .infinite-canvas-status-row .file-summary,
body.theme-dark:not(.auth-required) .infinite-canvas-status-row .workflow-history-actions {
  background: rgba(13, 21, 35, 0.92);
  border-color: rgba(141, 149, 165, 0.32);
  color: #dbe7f5;
}

body.theme-dark:not(.auth-required) .job-meta span {
  background: rgba(16, 18, 26, 0.88);
  border-color: rgba(141, 149, 165, 0.3);
  color: #c7d4e6;
}

body.theme-dark:not(.auth-required) .task-detail-panel .item-row b {
  background: rgba(47, 109, 183, 0.18);
  border-color: rgba(90, 166, 232, 0.35);
  color: #9cc4ec;
}

body.theme-dark:not(.auth-required) .settings-advanced-direct > summary {
  background: rgba(16, 18, 26, 0.88);
  color: #dbe7f5;
}

body.theme-dark:not(.auth-required) .workflow-check-panel,
body.theme-dark:not(.auth-required) .workflow-media-library-card,
body.theme-dark:not(.auth-required) .workflow-project-item {
  background: rgba(16, 18, 26, 0.9);
  border-color: rgba(141, 149, 165, 0.3);
}

body.theme-dark:not(.auth-required) .model-route-card {
  background: rgba(17, 27, 43, 0.92);
  border-color: rgba(141, 149, 165, 0.3);
  box-shadow: none;
}

body.theme-dark:not(.auth-required) .model-route-key-manager {
  background: rgba(11, 19, 33, 0.85);
  border-color: rgba(141, 149, 165, 0.3);
}

body.theme-dark:not(.auth-required) .workflow-media-library-icon {
  background: rgba(47, 109, 183, 0.2);
  color: #9cc4ec;
}

body.theme-dark:not(.auth-required) .workflow-media-library-icon.kind-audio {
  background: rgba(58, 100, 200, 0.25);
  color: #a9c4f5;
}

body.theme-dark:not(.auth-required) .workflow-media-library-icon.kind-text {
  background: rgba(90, 107, 130, 0.28);
  color: #b5c4d8;
}

/* ===== 工作流暗色补全:遗留硬编码浅色(拖拽虚影/拖放提示/运行飞行占位/生成库工具条) ===== */
body.theme-dark:not(.auth-required) .workflow-menu-drag-ghost {
  border-color: color-mix(in srgb, var(--menu-accent, #5aa6e8) 42%, rgba(141, 149, 165, 0.3));
  background: rgba(18, 21, 29, 0.96);
  color: #e7eef9;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.46);
}

body.theme-dark:not(.auth-required) .workflow-stage-wrap.workflow-lite-wrap.workflow-menu-drop-ready {
  outline-color: rgba(90, 166, 232, 0.55);
}

body.theme-dark:not(.auth-required) .workflow-lite-wrap.workflow-template-drop-target::after {
  border-color: rgba(90, 166, 232, 0.55);
  background: rgba(9, 17, 30, 0.74);
  color: #9cc4ec;
}

body.theme-dark:not(.auth-required) .workflow-fx-fly {
  background-color: #142138;
}

/* 生成库工具条亮色是白底,暗色面板里会浮出一条白带 */
body.theme-dark:not(.auth-required) .workflow-media-library-tools {
  background: transparent;
}

/* 节点帮助表里的 strong 亮色写死 #344054,暗色下几乎不可读 */
body.theme-dark:not(.auth-required) .workflow-help-grid strong {
  color: #dbe7f5;
}

body.theme-dark:not(.auth-required) .workflow-field input,
body.theme-dark:not(.auth-required) .workflow-field select,
body.theme-dark:not(.auth-required) .workflow-field textarea,
body.theme-dark:not(.auth-required) .workflow-folder-picker input[readonly],
body.theme-dark:not(.auth-required) .workflow-watermark-picker input[readonly] {
  background: rgba(9, 11, 16, 0.9) !important;
  border-color: rgba(141, 149, 165, 0.36) !important;
  color: #e7eef9 !important;
}

body.theme-dark:not(.auth-required) .canvas-studio-shell,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-canvas-shell.canvas-studio-shell {
  --canvas-surface: var(--studio-canvas-surface-dark);
  --canvas-grid-image: var(--studio-canvas-grid-image-dark);
  --canvas-glass-strong: rgba(18, 21, 29, 0.82);
  --canvas-glass-soft: rgba(18, 21, 29, 0.78);
  --canvas-border-strong: rgba(141, 149, 165, 0.32);
  --canvas-panel-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  --canvas-card-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
  background: var(--studio-canvas-surface-dark) !important;
  border-color: rgba(141, 149, 165, 0.34) !important;
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-canvas-stage,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-canvas-stage {
  background-color: var(--canvas-surface) !important;
  background-image: var(--canvas-grid-image) !important;
  background-size: var(--canvas-grid-size-current, 28px) var(--canvas-grid-size-current, 28px) !important;
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card {
  background: rgba(18, 28, 44, 0.98) !important;
  border-color: rgba(141, 149, 165, 0.4) !important;
  color: #e7eef9 !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32) !important;
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-summary strong,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-summary strong,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-note,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-note {
  color: #e7eef9 !important;
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-summary span,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-summary small,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-meta,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-summary span,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-summary small,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-meta {
  color: #a9b8cc !important;
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body textarea,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body input:not([type="range"]),
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body select,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body textarea,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body input:not([type="range"]),
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body select {
  background: rgba(9, 11, 16, 0.82) !important;
  border-color: rgba(141, 149, 165, 0.34) !important;
  color: #e7eef9 !important;
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-media-box,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-drop-zone,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-media-box,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-drop-zone {
  background: #1b1f28 !important;
  border-color: #454c5c !important;
  color: #a9b8cc !important;
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-inline-panel,
body.theme-dark:not(.auth-required) .canvas-edit-panel {
  background: rgba(18, 21, 29, 0.98) !important;
  border-color: rgba(141, 149, 165, 0.36) !important;
  color: #e7eef9 !important;
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-inline-references {
  background: rgba(13, 21, 35, 0.92) !important;
  border-color: rgba(90, 166, 232, 0.28) !important;
  color: #dbe9fa !important;
}

body.theme-dark:not(.auth-required) .infinite-canvas-stage.picking-reference {
  box-shadow: inset 0 0 0 2px rgba(90, 166, 232, 0.32) !important;
}

body.theme-dark:not(.auth-required) .infinite-canvas-stage.picking-reference::before {
  background: rgba(3, 7, 18, 0.12) !important;
  backdrop-filter: none !important;
}

/* 暗色只调压暗浓度这一个旋钮;压暗本身由 part1 的同底色蒙版统一实现。
   以前这里用 !important 又抄了一份 opacity + filter,等于把 part1 好不容易避开的
   「逐卡建渲染面」在暗色下原样加回来 —— 别再这么写。 */
body.theme-dark:not(.auth-required) .infinite-canvas-stage.picking-reference {
  --canvas-pick-dim: 34%;
}

body.theme-dark:not(.auth-required) .infinite-card.media-pickable,
body.theme-dark:not(.auth-required) .infinite-card.media-pick-target {
  opacity: 1 !important;
  filter: none !important;
}

/* Infinite canvas uses one grid definition; dark mode only changes the surface and line color. */
body.theme-dark:not(.auth-required) .canvas-studio-shell,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-canvas-shell.canvas-studio-shell {
  --canvas-surface: var(--studio-canvas-surface-dark);
  --canvas-grid-image: var(--studio-canvas-grid-image-dark);
  background: var(--studio-canvas-surface-dark) !important;
  border-color: rgba(141, 149, 165, 0.34) !important;
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-canvas-main {
  background: transparent !important;
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-canvas-stage,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-canvas-stage {
  background-color: var(--canvas-surface) !important;
  background-image: var(--canvas-grid-image) !important;
  /* background-position 交给 updateInfiniteCanvasTransform() 写的行内值，使暗色网格随平移跟随(与亮色一致)；不要在此用 !important 钉死 */
  background-size: var(--canvas-grid-size-current, 28px) var(--canvas-grid-size-current, 28px) !important;
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(125, 144, 168, 0.62) !important;
  color: #102033 !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14) !important;
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card.selected,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card.selected {
  border-color: rgba(47, 109, 183, 0.68) !important;
  box-shadow: 0 0 0 2px rgba(47, 109, 183, 0.2), 0 20px 48px rgba(15, 23, 42, 0.18) !important;
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-summary strong,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-summary strong,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-note,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-note {
  color: #102033 !important;
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-summary span,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-summary small,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-meta,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-summary span,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-summary small,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-meta {
  color: #526176 !important;
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body textarea,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body input:not([type="range"]),
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body select,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body textarea,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body input:not([type="range"]),
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body select {
  background: #ffffff !important;
  border-color: #d7e2ef !important;
  color: #102033 !important;
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-media-box,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-drop-zone,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-media-box,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-drop-zone {
  background: #f8fbfd !important;
  border-color: #dbe7f0 !important;
  color: #526176 !important;
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-inline-panel,
body.theme-dark:not(.auth-required) .canvas-edit-panel {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(125, 144, 168, 0.58) !important;
  color: #102033 !important;
  box-shadow: 0 24px 68px rgba(15, 23, 42, 0.22) !important;
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-inline-references {
  background: linear-gradient(180deg, rgba(234, 242, 251, 0.98), rgba(224, 236, 247, 0.98)) !important;
  border-color: rgba(47, 109, 183, 0.26) !important;
  color: #102033 !important;
}

body.theme-dark:not(.auth-required) .infinite-canvas-stage.picking-reference::before {
  background: rgba(15, 23, 42, 0.08) !important;
}

/* 压暗已统一由 part1 的同底色蒙版 + --canvas-pick-dim 实现,这里不再重复表达(原为 opacity/filter 覆盖)。 */

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-canvas-toolbar.canvas-creator-bar {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Dark theme dialogs and nested menus. */
body.theme-dark:not(.auth-required) .modal-mask {
  background: rgba(3, 7, 18, 0.58) !important;
  backdrop-filter: blur(12px);
}

body.theme-dark:not(.auth-required) .modal-panel,
body.theme-dark:not(.auth-required) .workflow-project-panel,
body.theme-dark:not(.auth-required) .workflow-media-library-panel,
body.theme-dark:not(.auth-required) .canvas-project-panel,
body.theme-dark:not(.auth-required) .command-palette-panel {
  background: rgba(18, 21, 29, 0.98) !important;
  border-color: rgba(141, 149, 165, 0.34) !important;
  color: #e7eef9 !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42) !important;
}

body.theme-dark:not(.auth-required) .modal-head,
body.theme-dark:not(.auth-required) .workflow-project-status,
body.theme-dark:not(.auth-required) .workflow-media-library-meta p,
body.theme-dark:not(.auth-required) .workflow-media-library-meta small,
body.theme-dark:not(.auth-required) .canvas-project-main p,
body.theme-dark:not(.auth-required) .canvas-project-main small,
body.theme-dark:not(.auth-required) .workflow-project-card p,
body.theme-dark:not(.auth-required) .workflow-project-card small {
  color: #a9b8cc !important;
}

body.theme-dark:not(.auth-required) .workflow-project-tools input,
body.theme-dark:not(.auth-required) .workflow-project-tools select,
body.theme-dark:not(.auth-required) .workflow-media-library-tools input,
body.theme-dark:not(.auth-required) .workflow-media-library-tools select,
body.theme-dark:not(.auth-required) .canvas-project-tools input,
body.theme-dark:not(.auth-required) .canvas-project-tools select,
body.theme-dark:not(.auth-required) .command-palette-search {
  background: rgba(9, 11, 16, 0.88) !important;
  border-color: rgba(141, 149, 165, 0.36) !important;
  color: #e7eef9 !important;
}

body.theme-dark:not(.auth-required) .workflow-media-library-card,
body.theme-dark:not(.auth-required) .workflow-project-card,
body.theme-dark:not(.auth-required) .canvas-project-card,
body.theme-dark:not(.auth-required) .workflow-project-empty {
  background: rgba(16, 18, 26, 0.92) !important;
  border-color: rgba(141, 149, 165, 0.32) !important;
  color: #e7eef9 !important;
  /* 选中闪烁根治(暗色):基态预留和 .is-selected/.active 完全相同几何的透明 box-shadow 槽,选中只染色、几何不变=不闪。 */
  box-shadow: inset 3px 0 0 transparent, 0 16px 36px transparent;
}

body.theme-dark:not(.auth-required) .workflow-project-card:hover,
body.theme-dark:not(.auth-required) .canvas-project-card:hover {
  border-color: rgba(90, 166, 232, 0.42) !important;
  background: rgba(19, 31, 50, 0.96) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24) !important;
}

body.theme-dark:not(.auth-required) .workflow-media-library-card.is-selected,
body.theme-dark:not(.auth-required) .workflow-project-card.active {
  background: linear-gradient(180deg, rgba(47, 109, 183, 0.2), rgba(16, 18, 26, 0.94)) !important;
  border-color: rgba(90, 166, 232, 0.62) !important;
  box-shadow: inset 3px 0 0 #5aa6e8, 0 16px 36px rgba(0, 0, 0, 0.26) !important;
}

body.theme-dark:not(.auth-required) .workflow-media-library-preview,
body.theme-dark:not(.auth-required) .canvas-project-preview {
  background: rgba(9, 11, 16, 0.86) !important;
  border-color: rgba(141, 149, 165, 0.28) !important;
}

body.theme-dark:not(.auth-required) .workflow-media-library-title strong,
body.theme-dark:not(.auth-required) .workflow-project-title-row strong,
body.theme-dark:not(.auth-required) .canvas-project-main strong,
body.theme-dark:not(.auth-required) .command-palette-item strong {
  color: #f4f8ff !important;
}

body.theme-dark:not(.auth-required) .workflow-media-library-title span,
body.theme-dark:not(.auth-required) .workflow-project-current,
body.theme-dark:not(.auth-required) .workflow-project-run {
  background: rgba(90, 166, 232, 0.14) !important;
  border-color: rgba(90, 166, 232, 0.28) !important;
  color: #9cc4ec !important;
}

body.theme-dark:not(.auth-required) .command-palette-category {
  background: transparent !important;
  border-color: transparent !important;
  color: #9cc4ec !important;
}

body.theme-dark:not(.auth-required) .workflow-media-library-select {
  background: rgba(9, 11, 16, 0.82) !important;
  border-color: rgba(90, 166, 232, 0.42) !important;
}

/* 项目库卡片新结构(封面点阵/统计行/底部图标动作)暗色补全 */
body.theme-dark:not(.auth-required) .canvas-project-preview {
  background:
    radial-gradient(rgba(90, 166, 232, 0.22) 1px, transparent 1.6px),
    linear-gradient(160deg, #141821 0%, #0f1219 100%) !important;
  background-size: 14px 14px, 100% 100% !important;
  border-color: rgba(141, 149, 165, 0.26) !important;
}

body.theme-dark:not(.auth-required) .account-map-node {
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

body.theme-dark:not(.auth-required) .project-card-foot {
  border-top-color: rgba(141, 149, 165, 0.2);
}

body.theme-dark:not(.auth-required) .project-card-meta,
body.theme-dark:not(.auth-required) .project-card-time {
  color: #8ea2ba !important;
}

body.theme-dark:not(.auth-required) .project-icon-btn {
  color: #a9b8cc;
}

body.theme-dark:not(.auth-required) .project-icon-btn:hover {
  background: rgba(90, 166, 232, 0.16);
  color: #cfe0f3;
}

body.theme-dark:not(.auth-required) .project-icon-btn.project-icon-danger:hover {
  background: rgba(255, 107, 107, 0.14);
  color: #ffa2a2;
}

body.theme-dark:not(.auth-required) .project-empty-icon {
  background: linear-gradient(160deg, #161b25, #10141d);
  color: #6f86a3;
}

body.theme-dark:not(.auth-required) .workflow-project-empty.project-empty strong {
  color: #e7eef9;
}

body.theme-dark:not(.auth-required) .workflow-media-library-select[aria-pressed="true"] {
  background: #2f6db7 !important;
  border-color: #9cc4ec !important;
}

body.theme-dark:not(.auth-required) .workflow-media-library-actions button,
body.theme-dark:not(.auth-required) .workflow-project-actions button,
body.theme-dark:not(.auth-required) .canvas-project-actions button {
  background: rgba(17, 30, 50, 0.88) !important;
  border-color: rgba(96, 165, 250, 0.34) !important;
  color: #cfe3ff !important;
}

body.theme-dark:not(.auth-required) .context-menu,
body.theme-dark:not(.auth-required) .context-menu.canvas-add-menu,
body.theme-dark:not(.auth-required) .context-menu.canvas-item-menu,
body.theme-dark:not(.auth-required) .layout.canvas-layout .context-menu,
body.theme-dark:not(.auth-required) .layout.canvas-layout .context-menu.canvas-add-menu,
body.theme-dark:not(.auth-required) .layout.canvas-layout .context-menu.canvas-item-menu {
  background: rgba(18, 21, 29, 0.98) !important;
  border-color: rgba(141, 149, 165, 0.34) !important;
  color: #e7eef9 !important;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.42) !important;
}

body.theme-dark:not(.auth-required) .context-menu button,
body.theme-dark:not(.auth-required) .context-menu button.module-create,
body.theme-dark:not(.auth-required) .layout.canvas-layout .context-menu button.module-create {
  background: transparent !important;
  border-color: transparent !important;
  color: #e7eef9 !important;
}

body.theme-dark:not(.auth-required) .context-menu button:hover,
body.theme-dark:not(.auth-required) .context-menu button.module-create:hover,
body.theme-dark:not(.auth-required) .layout.canvas-layout .context-menu button.module-create:hover {
  background: rgba(90, 166, 232, 0.13) !important;
  border-color: rgba(90, 166, 232, 0.3) !important;
  color: #f8fffd !important;
}

body.theme-dark:not(.auth-required) .context-menu .context-description,
body.theme-dark:not(.auth-required) .context-menu .shortcut-hint,
body.theme-dark:not(.auth-required) .context-menu-heading {
  color: #a9b8cc !important;
}

body.theme-dark:not(.auth-required) .context-menu-heading,
body.theme-dark:not(.auth-required) .context-menu-divider,
body.theme-dark:not(.auth-required) .command-palette-category {
  border-color: rgba(141, 149, 165, 0.24) !important;
}

body.theme-dark:not(.auth-required) .context-menu .context-icon {
  background: color-mix(in srgb, var(--menu-accent, #5aa6e8) 18%, #111a29) !important;
  color: color-mix(in srgb, var(--menu-accent, #5aa6e8) 65%, #e7eef9) !important;
}

body.theme-dark:not(.auth-required) .context-menu .context-tag {
  background: rgba(16, 18, 26, 0.9) !important;
  border-color: rgba(141, 149, 165, 0.32) !important;
  color: #cbd5e1 !important;
}

body.theme-dark:not(.auth-required) .command-palette-item {
  background: transparent !important;
  border-color: transparent !important;
  color: #e7eef9 !important;
}

body.theme-dark:not(.auth-required) .command-palette-item:hover,
body.theme-dark:not(.auth-required) .command-palette-item.active {
  background: rgba(90, 166, 232, 0.13) !important;
  border-color: rgba(90, 166, 232, 0.36) !important;
}

body.theme-dark:not(.auth-required) .command-palette-item small {
  color: #a9b8cc !important;
}

body.theme-dark:not(.auth-required) .litegraph.litecontextmenu,
body.theme-dark:not(.auth-required) .litegraph.litecontextmenu.dark {
  background: rgba(18, 21, 29, 0.98) !important;
  background-color: rgba(18, 21, 29, 0.98) !important;
  border-color: rgba(141, 149, 165, 0.34) !important;
  color: #e7eef9 !important;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.42) !important;
}

body.theme-dark:not(.auth-required) .litegraph.litecontextmenu .litemenu-title,
body.theme-dark:not(.auth-required) .litegraph.litecontextmenu .ai-lite-menu-drag-handle {
  color: #dbe7f5 !important;
  border-color: rgba(141, 149, 165, 0.24) !important;
}

body.theme-dark:not(.auth-required) .litegraph.litecontextmenu .litemenu-entry,
body.theme-dark:not(.auth-required) .litegraph.litecontextmenu .litemenu-entry.submenu,
body.theme-dark:not(.auth-required) .litegraph.litecontextmenu.dark .litemenu-entry,
body.theme-dark:not(.auth-required) .litegraph.litecontextmenu.dark .litemenu-entry.submenu,
body.theme-dark:not(.auth-required) .litegraph.litecontextmenu .ai-lite-menu-node {
  color: #e7eef9 !important;
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

body.theme-dark:not(.auth-required) .litegraph.litecontextmenu .litemenu-entry:hover:not(.disabled):not(.separator),
body.theme-dark:not(.auth-required) .litegraph.litecontextmenu.dark .litemenu-entry:hover:not(.disabled):not(.separator),
body.theme-dark:not(.auth-required) .litegraph.litecontextmenu .ai-lite-menu-node:hover {
  background: rgba(90, 166, 232, 0.13) !important;
  background-color: rgba(90, 166, 232, 0.13) !important;
  border-color: rgba(90, 166, 232, 0.3) !important;
  color: #f8fffd !important;
}

/* 暗色卡片配色与工作流节点同族(2026-07 定稿):机身 #252a34 比画布 #121316 亮一整档拉开层次,
   内嵌控件 #1b1f28 再深一档,描边 #454c5c;别改回 rgba(18,21,29) 近黑——和画布糊在一起(工作流 v2 的教训)。 */
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card {
  background: #252a34 !important;
  border-color: #454c5c !important;
  color: #e7eef9 !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5) !important;
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card:hover,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card:hover {
  border-color: rgba(90, 166, 232, 0.42) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.38) !important;
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card.selected,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card.selected {
  border-color: rgba(90, 166, 232, 0.78) !important;
  box-shadow: 0 0 0 2px rgba(90, 166, 232, 0.28), 0 22px 54px rgba(0, 0, 0, 0.4) !important;
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-summary strong,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-summary strong,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-note,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-note {
  color: #e7eef9 !important;
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-summary span,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-summary small,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-meta,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-summary span,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-summary small,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-meta {
  color: #a9b8cc !important;
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body textarea,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body input:not([type="range"]),
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body select,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body textarea,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body input:not([type="range"]),
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body select {
  background: #1b1f28 !important;
  border-color: #454c5c !important;
  color: #e7eef9 !important;
}

/* 暗色收口：文本 / 提示词模块的输入框同样与卡片合为一体（透明无边框无握把），
   文字颜色仍沿用上面的暗色规则，不在这里覆盖。特异度高于上面几条通用 textarea 暗色规则。 */
body.theme-dark:not(.auth-required) :is(.layout.canvas-layout, .canvas-studio-shell) .infinite-card[data-canvas-type="text"] .infinite-card-body textarea,
body.theme-dark:not(.auth-required) :is(.layout.canvas-layout, .canvas-studio-shell) .infinite-card[data-canvas-type="prompt"] .infinite-card-body textarea {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-media-box,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-drop-zone,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-media-box,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-drop-zone {
  background: #1b1f28 !important;
  border-color: #454c5c !important;
  color: #a9b8cc !important;
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-media img,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-media video,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-media-grid img,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-media-grid video,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-media img,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-media video,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-media-grid img,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-media-grid video {
  filter: none !important;
  opacity: 1 !important;
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-inline-panel,
body.theme-dark:not(.auth-required) .canvas-edit-panel {
  background: rgba(18, 21, 29, 0.98) !important;
  border-color: rgba(141, 149, 165, 0.36) !important;
  color: #e7eef9 !important;
  box-shadow: 0 24px 68px rgba(0, 0, 0, 0.42) !important;
}

body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-inline-references {
  background: rgba(13, 21, 35, 0.92) !important;
  border-color: rgba(90, 166, 232, 0.28) !important;
  color: #dbe9fa !important;
}

body.theme-dark:not(.auth-required) .infinite-canvas-stage.picking-reference::before {
  background: rgba(3, 7, 18, 0.18) !important;
}

/* 压暗已统一由 part1 的同底色蒙版 + --canvas-pick-dim 实现,这里不再重复表达(原为 opacity/filter 覆盖)。
   这是暗色下最后一个生效块:曾经同一条规则在本文件里被抄了三遍(0.68 / 0.82 / 0.72),
   改一处看不到效果、性能优化也白做。新的暗色差异只调 --canvas-pick-dim。 */

/* 绘流 AI 登录页最终排版：只覆盖未登录入口，避免影响主工作台。 */

/* 2026-05-28 登录页、动效和移动端最终适配。 */

button,
.secondary,
.primary,
.icon-button,
.module-tab,
.job-list button,
.workflow-toolbar button,
.infinite-canvas-toolbar button,
.modal-close,
.account-action {
  transition:
    background-color var(--motion-fast) var(--ease-ui),
    border-color var(--motion-fast) var(--ease-ui),
    color var(--motion-fast) var(--ease-ui),
    box-shadow var(--motion-fast) var(--ease-ui),
    opacity var(--motion-fast) var(--ease-ui);
}

@media (hover: hover) {
  .workflow-node-card:hover,
  .infinite-card:hover,
  .workflow-project-card:hover,
  .job-list li:hover {
    box-shadow: 0 12px 30px rgba(26, 32, 44, 0.10);
  }
}

.modal-mask:not([hidden]) .modal-panel,
.account-usage-modal:not([hidden]) .account-usage-panel,
.workflow-media-library-modal:not([hidden]) .workflow-media-library-panel {
  animation: uiPanelIn var(--motion-base) var(--ease-ui) both;
}

@keyframes uiPanelIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

@media (max-width: 900px) {
  body:not(.auth-required) {
    overflow: auto;
  }

  body:not(.auth-required) .topbar {
    position: sticky;
    top: 0;
    z-index: 80;
    width: 100% !important;
    height: auto;
    max-height: none;
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 28px rgba(26, 32, 44, 0.08);
  }

  body:not(.auth-required).sidebar-collapsed .topbar {
    width: 100% !important;
    padding: 12px;
  }

  body:not(.auth-required) .brand-row,
  body:not(.auth-required).sidebar-collapsed .brand-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

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

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

  body:not(.auth-required) .module-nav,
  body:not(.auth-required).sidebar-collapsed .module-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body:not(.auth-required) .module-tab,
  body:not(.auth-required) .topbar .module-tab,
  body:not(.auth-required).sidebar-collapsed .module-tab.has-ui-icon {
    min-height: 52px;
    grid-template-rows: auto;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 8px;
  }

  body:not(.auth-required) .module-tab strong,
  body:not(.auth-required).sidebar-collapsed .module-tab.has-ui-icon strong {
    display: block;
    font-size: 13px;
  }

  body:not(.auth-required) .module-tab span:not(.ui-icon),
  body:not(.auth-required).sidebar-collapsed .module-tab.has-ui-icon span:not(.ui-icon) {
    display: none;
  }

  body:not(.auth-required) .layout,
  body:not(.auth-required) .module-panel {
    /* 820–1120px 区间侧栏仍是固定左栏(margin-left=--sidebar 由后续规则保持)，
       layout 宽度必须 auto 自动收缩=包含块−侧栏。旧"topbar 变顶条"设计遗留的
       width:100% / margin-left:0 会无视该 margin 撑满整宽→右侧溢出(hScroll)，已删；
       ≤820 交给 mobile-ui 的 100vw/margin:0 接管。 */
    min-height: auto;
    grid-template-columns: 1fr !important;
    padding: 10px;
  }

  body:not(.auth-required) .layout.media-tool-layout,
  body:not(.auth-required) .layout.workflow-layout,
  body:not(.auth-required) .layout.canvas-layout,
  body:not(.auth-required) .layout.text-layout {
    grid-template-columns: 1fr !important;
  }

  body:not(.auth-required) .layout.media-tool-layout {
    height: auto;
    overflow: visible;
  }

  body:not(.auth-required) .workflow-toolbar,
  body:not(.auth-required) .infinite-canvas-toolbar,
  body:not(.auth-required) .canvas-creator-bar {
    position: relative;
    inset: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-radius: 18px;
  }

  body:not(.auth-required) .workflow-toolbar > label,
  body:not(.auth-required) .infinite-canvas-toolbar > label {
    flex: 1 1 240px;
  }

  body:not(.auth-required) .workflow-main,
  body:not(.auth-required) .infinite-canvas-main,
  body:not(.auth-required) .canvas-studio-shell {
    min-width: 0;
    overflow: auto;
  }

  body:not(.auth-required) .workflow-canvas-shell,
  body:not(.auth-required) .infinite-canvas-stage,
  body:not(.auth-required) .canvas-stage {
    min-height: 520px;
  }

}

@media (min-width: 901px) and (max-width: 1500px) {
  .layout.media-tool-layout #videoToolTab .quick-options,
  .layout.media-tool-layout #audioToolTab .quick-options,
  .layout.media-tool-layout #audioToolTab .music-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  body:not(.auth-required) .module-nav,
  body:not(.auth-required).sidebar-collapsed .module-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not(.auth-required) .layout,
  body:not(.auth-required) .module-panel {
    padding: 8px;
  }

  body:not(.auth-required) .panel,
  body:not(.auth-required) .settings-panel,
  body:not(.auth-required) .monitor-panel,
  body:not(.auth-required) .task-panel,
  body:not(.auth-required) .result-panel {
    padding: 12px;
    border-radius: 16px;
  }

  body:not(.auth-required) .form-grid,
  body:not(.auth-required) .options-grid,
  body:not(.auth-required) .stats-grid,
  body:not(.auth-required) .media-basic-grid,
  body:not(.auth-required) .model-category-panel,
  body:not(.auth-required) .settings-panel > .form-grid {
    grid-template-columns: 1fr !important;
  }

  body:not(.auth-required) .command-row,
  body:not(.auth-required) .toolbar-row,
  body:not(.auth-required) .result-actions {
    flex-wrap: wrap;
  }

  body:not(.auth-required) textarea {
    min-height: 132px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* 登录页 v2：参考成熟 SaaS 登录页的轻量产品入口，避免整块重色卡片压迫感。 */

/* 登录页 v3：左侧品牌栏与登录栏等高，形成完整登录组件。 */

/* 账号登录改为应用内悬浮窗：未登录不再进入单独登录页。 */
body.account-guest:not(.auth-required) .account-summary {
  border-color: rgba(47, 109, 183, 0.28);
  background: rgba(234, 242, 251, 0.95);
  color: #2f6db7;
}

body.account-guest:not(.auth-required) .account-summary:hover {
  border-color: rgba(47, 109, 183, 0.46);
  background: #d7e6f7;
}

body:not(.auth-required) .account-modal:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: var(--z-account);
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow-x: hidden;
  overflow-y: auto;
  background: rgba(15, 23, 42, 0.30);
  backdrop-filter: blur(14px);
}

body:not(.auth-required) .account-modal .account-auth-shell {
  width: min(430px, 100%);
  min-height: 0;
  display: block;
}

body:not(.auth-required) .account-modal .account-auth-intro {
  display: none !important;
}

body:not(.auth-required) .account-modal .account-modal-card {
  width: 100%;
  min-height: auto;
  display: grid;
  gap: 14px;
  padding: 28px;
  border-radius: 22px;
  border: 1px solid rgba(203, 213, 225, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 253, 0.96));
  box-shadow: 0 26px 86px rgba(15, 23, 42, 0.22);
  animation: uiPanelIn var(--motion-base) var(--ease-ui) both;
}

/* —— 登录/注册弹窗行距统一收口 ——
   弹窗态卡片是 grid，行距由上面的 gap 统一控制。历史上欢迎语 / 记住账号行 / 条款脚注 / 切换条
   仍残留按「流式布局」设计的 margin；grid 里 margin 不与 gap 合并而是叠加，导致这些行上下出现
   双倍空隙(典型：登录按钮上方≈30px = gap16 + 记住账号行 margin-bottom14)。这里清零这些残留
   margin，让 gap 成为唯一行距来源，间距整体均匀、收紧。 */
body:not(.auth-required) .account-modal .account-modal-card .account-auth-welcome,
body:not(.auth-required) .account-modal .account-modal-card .account-remember-row,
body:not(.auth-required) .account-modal .account-modal-card .account-agree-row,
body:not(.auth-required) .account-modal .account-modal-card .account-auth-footnote,
body:not(.auth-required) .account-modal .account-modal-card .account-switch-strip {
  margin: 0;
}

body:not(.auth-required) .account-modal .account-form-brand {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: center;
}

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

body:not(.auth-required) .account-modal .account-form-brand strong,
body:not(.auth-required) .account-modal .account-modal-card h2 {
  color: #0f172a;
}

body:not(.auth-required) .account-modal .account-form-brand small,
body:not(.auth-required) .account-modal .account-modal-card p,
body:not(.auth-required) .account-modal .account-auth-footnote {
  color: #64748b;
}

body:not(.auth-required) .account-modal .account-modal-card h2 {
  margin: 2px 0 0;
  font-size: 24px;
}

body:not(.auth-required) .account-modal .account-modal-card p {
  margin: 0;
  line-height: 1.65;
}

body:not(.auth-required) .account-modal .account-modal-card label:not(.account-agree-row):not(.account-remember-row) {
  display: grid;
  gap: 8px;
  margin: 0;
  color: #334155;
  font-weight: 850;
}

body:not(.auth-required) .account-modal .account-modal-card input {
  width: 100%;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid #cdd9e6;
  border-radius: 13px;
  background: #f8fafc;
  outline: none;
}

body:not(.auth-required) .account-modal .account-modal-card input:focus {
  border-color: #2f6db7;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(47, 109, 183, 0.14);
}

body:not(.auth-required) .account-modal .account-auth-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

body:not(.auth-required) .account-modal .account-auth-actions .primary {
  min-height: 46px;
  border-radius: 13px;
  background: var(--accent);
  box-shadow: 0 14px 28px rgba(47, 109, 183, 0.2);
}

/* 登录/注册页签由 JS 按 registrationEnabled 用 hidden 属性控制,CSS 不强制隐藏
   (历史上这里把页签一并 display:none,导致弹窗里找不到注册入口)。
   「去注册」切换按钮与页签功能重复,仅隐藏它。 */
body:not(.auth-required) .account-modal #accountSwitchBtn {
  display: none !important;
}

body:not(.auth-required) .account-modal .account-auth-footnote {
  padding: 11px;
  border: 1px solid #dce6ef;
  border-radius: 13px;
  background: #f8fafc;
  text-align: center;
}

body.theme-dark.account-guest:not(.auth-required) .account-summary {
  border-color: rgba(90, 166, 232, 0.38);
  background: rgba(47, 109, 183, 0.18);
  color: #dbe9fa;
}

body.theme-dark:not(.auth-required) .account-modal:not([hidden]) {
  background: rgba(3, 7, 18, 0.58);
  backdrop-filter: blur(16px);
}

body.theme-dark:not(.auth-required) .account-modal .account-modal-card {
  border-color: rgba(141, 149, 165, 0.34);
  background:
    linear-gradient(180deg, rgba(18, 21, 29, 0.98), rgba(11, 14, 20, 0.98));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
}

body.theme-dark:not(.auth-required) .account-modal .account-form-brand strong,
body.theme-dark:not(.auth-required) .account-modal .account-modal-card h2,
body.theme-dark:not(.auth-required) .account-modal .account-modal-card label {
  color: #e8eef8;
}

body.theme-dark:not(.auth-required) .account-modal .account-form-brand small,
body.theme-dark:not(.auth-required) .account-modal .account-modal-card p,
body.theme-dark:not(.auth-required) .account-modal .account-auth-footnote {
  color: #9fb0c7;
}

body.theme-dark:not(.auth-required) .account-modal .account-modal-card input {
  border-color: rgba(141, 149, 165, 0.34);
  background: rgba(4, 11, 22, 0.86);
  color: #e8eef8;
}

body.theme-dark:not(.auth-required) .account-modal .account-modal-card input:focus {
  border-color: rgba(90, 166, 232, 0.72);
  background: rgba(9, 11, 16, 0.96);
  box-shadow: 0 0 0 4px rgba(90, 166, 232, 0.12);
}

body.theme-dark:not(.auth-required) .account-modal .account-auth-footnote,
body.theme-dark:not(.auth-required) .account-modal .modal-close {
  border-color: rgba(141, 149, 165, 0.28);
  background: rgba(15, 23, 42, 0.88);
}

.admin-redeem-manager {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(47, 109, 183, 0.2);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(240, 247, 253, 0.92), rgba(248, 251, 253, 0.96));
}

.admin-redeem-head,
.admin-redeem-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.admin-redeem-head strong,
.admin-redeem-code strong {
  display: block;
  color: #0f172a;
  font-weight: 900;
}

.admin-redeem-head span,
.admin-redeem-code span,
.admin-redeem-note-text {
  color: #64748b;
  font-size: 12px;
}

.admin-redeem-grid {
  display: grid;
  /* 5 等宽列：第一行 前缀/后缀/额度/数量/次数；第二行 备注(占 4 列) + 生成按钮(第 5 列)。 */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: end;
}
.admin-redeem-grid .arc-note {
  grid-column: 1 / 5;
}
.admin-redeem-grid .arc-submit {
  grid-column: 5 / 6;
  height: 38px;
}
.admin-redeem-hint {
  margin: 10px 2px 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}
.admin-redeem-hint code {
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(47, 109, 183, 0.1);
  color: var(--accent);
  font-size: 11.5px;
}
body.theme-dark .admin-redeem-hint {
  color: #9fb0c7;
}
body.theme-dark .admin-redeem-hint code {
  background: rgba(90, 166, 232, 0.18);
  color: #9cc4ec;
}

.admin-redeem-grid label {
  display: grid;
  gap: 6px;
  margin: 0;
  color: #334155;
  font-weight: 850;
}

.admin-redeem-grid input {
  min-height: 34px;
}

/* 筛选行:状态 chips(带计数)+ 搜索,列表按状态/关键词纯前端过滤。 */
.admin-redeem-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}

.admin-redeem-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-2);
}

.admin-redeem-chips button {
  min-height: 26px;
  padding: 2px 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 830;
  white-space: nowrap;
  cursor: pointer;
}

.admin-redeem-chips button.is-active {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.admin-redeem-filter #adminRedeemSearch {
  flex: 1 1 200px;
  min-width: 160px;
  max-width: 320px;
  margin-left: auto;
  min-height: 32px;
}

.admin-redeem-list {
  display: grid;
  gap: 8px;
  max-height: none;
  overflow: visible;
}

.admin-redeem-row {
  grid-template-columns: minmax(180px, 0.95fr) minmax(220px, 1.35fr) auto;
  padding: 10px 10px 10px 13px;
  border: 1px solid #dce6ef;
  border-left-width: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
}

/* 行左色条+徽章同色系:一眼扫出码状态(未使用绿/部分橙/用完灰/停用红)。 */
.admin-redeem-row.is-fresh { border-left-color: #34a26b; }
.admin-redeem-row.is-partial { border-left-color: #e09a3c; }
.admin-redeem-row.is-used { border-left-color: #9aa7b5; }
.admin-redeem-row.is-disabled { border-left-color: #d97066; opacity: 0.82; }

.admin-redeem-code-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.3px;
  cursor: copy;
}

.admin-redeem-code-text:hover {
  color: var(--accent-strong);
  text-decoration: underline dashed;
  text-underline-offset: 3px;
}

.redeem-status-badge {
  display: inline-flex;
  align-items: center;
  margin-right: 7px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 860;
  vertical-align: middle;
}

.redeem-status-badge.is-fresh { background: rgba(52, 162, 107, 0.13); color: #1f7a4d; }
.redeem-status-badge.is-partial { background: rgba(224, 154, 60, 0.15); color: #a86a1a; }
.redeem-status-badge.is-used { background: rgba(154, 167, 181, 0.18); color: #5b6a7a; }
.redeem-status-badge.is-disabled { background: rgba(217, 112, 102, 0.14); color: #b2453a; }

.admin-redeem-usedby {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-redeem-usedby em {
  color: #334155;
  font-size: 12px;
  font-style: normal;
  font-weight: 860;
}

.admin-redeem-usedby > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.admin-redeem-user {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid rgba(47, 109, 183, 0.14);
  border-radius: 999px;
  background: rgba(234, 242, 251, 0.74);
  color: #1e3a5f;
}

.admin-redeem-user strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 880;
}

.admin-redeem-user small,
.admin-redeem-usedby > small {
  color: #64748b;
  font-size: 11px;
}

.admin-redeem-user.is-empty {
  color: #64748b;
  background: rgba(248, 250, 252, 0.86);
}

.admin-redeem-actions {
  display: inline-flex;
  gap: 6px;
}

body.theme-dark:not(.auth-required) .admin-redeem-manager {
  border-color: rgba(90, 166, 232, 0.24);
  background: linear-gradient(180deg, rgba(14, 36, 43, 0.86), rgba(12, 21, 34, 0.94));
}

body.theme-dark:not(.auth-required) .admin-redeem-head strong,
body.theme-dark:not(.auth-required) .admin-redeem-code strong,
body.theme-dark:not(.auth-required) .admin-redeem-grid label {
  color: #e8eef8;
}

body.theme-dark:not(.auth-required) .admin-redeem-head span,
body.theme-dark:not(.auth-required) .admin-redeem-code span,
body.theme-dark:not(.auth-required) .admin-redeem-note-text,
body.theme-dark:not(.auth-required) .admin-redeem-usedby > small,
body.theme-dark:not(.auth-required) .admin-redeem-user small {
  color: #9fb0c7;
}

body.theme-dark:not(.auth-required) .admin-redeem-row {
  border-color: rgba(141, 149, 165, 0.28);
  background: rgba(9, 11, 16, 0.76);
}

body.theme-dark:not(.auth-required) .admin-redeem-usedby em {
  color: #e8eef8;
}

body.theme-dark:not(.auth-required) .admin-redeem-user {
  border-color: rgba(90, 166, 232, 0.22);
  background: rgba(47, 109, 183, 0.16);
  color: #dbe9fa;
}

body.theme-dark:not(.auth-required) .admin-account-manager {
  border-color: var(--border);
  background: linear-gradient(180deg, var(--surface-2), var(--panel));
}

body.theme-dark:not(.auth-required) .admin-audit-manager {
  border-color: var(--border);
  background: linear-gradient(180deg, var(--surface-2), var(--panel));
}

body.theme-dark:not(.auth-required) .admin-recycle-manager {
  border-color: var(--border);
  background: linear-gradient(180deg, var(--surface-2), var(--panel));
}

body.theme-dark:not(.auth-required) .admin-account-create,
body.theme-dark:not(.auth-required) .admin-account-points,
body.theme-dark:not(.auth-required) .admin-account-grid label,
body.theme-dark:not(.auth-required) .admin-account-search,
body.theme-dark:not(.auth-required) .admin-account-main-compact strong,
body.theme-dark:not(.auth-required) .admin-detail-title strong,
body.theme-dark:not(.auth-required) .admin-detail-meta strong,
body.theme-dark:not(.auth-required) .admin-account-points strong,
body.theme-dark:not(.auth-required) .admin-audit-main strong,
body.theme-dark:not(.auth-required) .admin-audit-target strong,
body.theme-dark:not(.auth-required) .admin-audit-summary,
body.theme-dark:not(.auth-required) .admin-recycle-main strong,
body.theme-dark:not(.auth-required) .admin-recycle-owner strong,
body.theme-dark:not(.auth-required) .admin-recycle-detail {
  color: var(--text);
}

body.theme-dark:not(.auth-required) .admin-account-main-compact span,
body.theme-dark:not(.auth-required) .admin-detail-title span,
body.theme-dark:not(.auth-required) .admin-detail-meta,
body.theme-dark:not(.auth-required) .admin-account-points span,
body.theme-dark:not(.auth-required) .admin-account-count,
body.theme-dark:not(.auth-required) .admin-audit-main span,
body.theme-dark:not(.auth-required) .admin-audit-target span,
body.theme-dark:not(.auth-required) .admin-audit-meta span,
body.theme-dark:not(.auth-required) .admin-recycle-main span,
body.theme-dark:not(.auth-required) .admin-recycle-owner span,
body.theme-dark:not(.auth-required) .admin-recycle-meta span {
  color: var(--muted);
}

body.theme-dark:not(.auth-required) .admin-account-row,
body.theme-dark:not(.auth-required) .admin-audit-row,
body.theme-dark:not(.auth-required) .admin-recycle-row {
  border-color: var(--border);
  background: var(--surface);
}

body.theme-dark:not(.auth-required) .admin-detail-section,
body.theme-dark:not(.auth-required) .admin-detail-meta {
  border-color: var(--border);
  background: var(--surface-2);
}

body.theme-dark:not(.auth-required) .admin-account-avatar {
  border-color: var(--border-strong);
  background: var(--brand-soft);
  color: var(--info);
}

body.theme-dark:not(.auth-required) .admin-account-role-badge {
  background: var(--surface-3);
  color: var(--muted);
}

body.theme-dark:not(.auth-required) .admin-account-role-badge.is-admin {
  background: var(--brand-soft);
  color: var(--text);
}

@media (max-width: 980px) {
  .admin-account-head,
  .admin-account-head-actions,
  .admin-account-grid,
  .admin-redeem-grid,
  .admin-redeem-row {
    grid-template-columns: 1fr;
  }

  .admin-redeem-actions {
    justify-content: stretch;
  }

  .admin-redeem-actions button {
    flex: 1;
  }
}

@media (max-width: 520px) {
  body:not(.auth-required) .account-modal:not([hidden]) {
    align-items: end;
    padding: 10px;
  }

  body:not(.auth-required) .account-modal .account-auth-shell {
    width: 100%;
  }

  body:not(.auth-required) .account-modal .account-modal-card {
    padding: 22px;
    border-radius: 20px;
  }
}

/* 品牌 Logo：统一使用上传的新绘流 AI 标识，替换旧文字和渐变方块。 */
.brand-text {
  padding-left: 0 !important;
}

.brand-text::before,
.brand-text::after {
  content: none !important;
  display: none !important;
}

.brand-text h1 {
  display: flex;
  align-items: center;
  min-height: 38px;
}

.brand-logo {
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.brand-logo-full {
  width: min(136px, 100%);
  max-height: 40px;
}

.brand-logo-mark {
  width: 36px;
  height: 36px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:not(.auth-required) .brand-text h1 {
  font-size: 0;
  line-height: 1;
}

body.sidebar-collapsed .brand-text {
  display: grid;
  justify-items: center;
  width: 100%;
  height: auto;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.sidebar-collapsed .brand-text h1 {
  min-height: 38px;
  justify-content: center;
}

body.sidebar-collapsed .brand-text .brand-full {
  display: none !important;
}

body.sidebar-collapsed .brand-text .brand-short {
  display: grid !important;
  place-items: center;
  width: 36px;
  height: 36px;
  overflow: visible;
}

body.sidebar-collapsed .brand-logo-mark {
  width: 34px;
  height: 34px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.theme-dark:not(.auth-required) .brand-full {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* 暗色下:藏青文字不可见 → 换暗色专用 logo(蓝色标记保留本色、文字转白),不再整体转白丢色。
   mark 单标记本身就是蓝色,暗底清晰,无需任何滤镜。 */
body.theme-dark:not(.auth-required) .brand-logo-full {
  content: url("/assets/huiliu-logo-full-polished-dark.png?v=20260615-logo-polish-002");
  opacity: 1;
}

body.theme-dark:not(.auth-required) .brand-logo-mark {
  content: url("/assets/huiliu-logo-mark-polished-dark.png?v=20260615-logo-polish-002");
  opacity: 1 !important;
}

.account-auth-logo,
.account-form-brand > span,
body.auth-required .account-auth-logo,
body.auth-required .account-form-brand > span,
body:not(.auth-required) .account-modal .account-form-brand > span {
  font-size: 0 !important;
  color: transparent !important;
  background:
    url("/assets/huiliu-logo-mark-polished-light.png?v=20260615-logo-polish-002") center / 78% auto no-repeat,
    linear-gradient(135deg, #f7fbff, #ecfbff) !important;
  border: 1px solid rgba(22, 119, 255, 0.12);
  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.16);
}

body.sidebar-collapsed .brand-text,
body.sidebar-collapsed .brand-short,
body.sidebar-collapsed .brand-logo-mark {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Brand chrome must stay transparent during theme/sidebar transitions.
   The logo image swaps between light/dark assets; the container itself is not a card. */
body:not(.auth-required) .brand-block,
body.theme-dark:not(.auth-required) .brand-block,
body.sidebar-collapsed:not(.auth-required) .brand-block,
body.theme-dark.sidebar-collapsed:not(.auth-required) .brand-block {
  background: transparent !important;
  box-shadow: none !important;
}

body.theme-dark:not(.auth-required) .brand-block {
  border-bottom-color: rgba(141, 149, 165, 0.22) !important;
}

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

body.auth-required .account-form-brand > span,
body:not(.auth-required) .account-modal .account-form-brand > span {
  display: grid !important;
  place-items: center;
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px;
  background:
    url("/assets/huiliu-logo-mark-polished-light.png?v=20260615-logo-polish-002") center / 78% auto no-repeat,
    linear-gradient(135deg, #f7fbff, #ecfbff) !important;
  border: 1px solid rgba(22, 119, 255, 0.12);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.14);
  color: transparent !important;
  font-size: 0 !important;
}

/* logo 由上方 span 的背景图呈现；span 内若残留真实 <img>(历史遗留)无尺寸约束，
   会按原图自然尺寸(约 814×686)从 42px 容器溢出成大色块。logo 既已用背景图，
   这个 <img> 是多余来源，直接隐藏，而非再加 overflow/clip 去裁切。 */
.account-form-brand > span > img {
  display: none !important;
}

/* Mobile shell pass: phones use a compact top navigation and vertical task flow. */
@media (max-width: 820px) {
  :root {
    --shell-padding: 8px;
    --layout-padding: 8px;
    --layout-gap: 8px;
    --panel-padding: 12px;
    --control-height: 40px;
    --button-height: 40px;
    --tab-height: 42px;
    --font-ui: 13px;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body:not(.auth-required) .topbar,
  body:not(.auth-required).sidebar-collapsed .topbar {
    position: sticky !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none;
    z-index: 120;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 7px 10px;
    border-right: 0;
    border-bottom: 1px solid rgba(203, 213, 225, 0.88);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(14px);
    overflow: visible;
  }

  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);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  }

  body:not(.auth-required) .brand-block {
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  }

  body.theme-dark:not(.auth-required) .brand-block {
    border-bottom-color: rgba(141, 149, 165, 0.2);
  }

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

  body:not(.auth-required) .brand-text h1,
  body:not(.auth-required).sidebar-collapsed .brand-text h1 {
    min-height: 27px;
  }

  body:not(.auth-required) .brand-logo-full {
    width: 102px;
    max-height: 28px;
  }

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

  body:not(.auth-required) .sidebar-toggle,
  body:not(.auth-required).sidebar-collapsed .sidebar-toggle {
    min-width: 40px;
    width: 40px;
    min-height: 34px;
    padding: 0;
    border-radius: 12px;
    font-size: 0;
  }

  body:not(.auth-required) .sidebar-toggle::before,
  body:not(.auth-required).sidebar-collapsed .sidebar-toggle::before {
    content: "☰";
    font-size: 16px;
    line-height: 1;
  }

  body:not(.auth-required) .module-nav,
  body:not(.auth-required).sidebar-collapsed .module-nav {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 2px 4px;
    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).sidebar-collapsed .module-tab,
  body:not(.auth-required).sidebar-collapsed .module-tab.has-ui-icon {
    flex: 0 0 auto;
    min-width: 92px;
    min-height: 38px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-rows: 1fr;
    align-items: center;
    justify-items: start;
    gap: 7px;
    padding: 6px 9px;
    border-radius: 13px;
    scroll-snap-align: start;
  }

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

  body:not(.auth-required) .module-tab strong,
  body:not(.auth-required).sidebar-collapsed .module-tab.has-ui-icon 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).sidebar-collapsed .module-tab span:not(.ui-icon) {
    display: none !important;
  }

  body:not(.auth-required) .topbar .top-actions {
    display: flex;
    gap: 6px;
    margin: 0;
  }

  body:not(.auth-required) .topbar .state-pill,
  body:not(.auth-required) .topbar .icon-button {
    flex: 1 1 0;
    min-height: 34px;
    border-radius: 11px;
    font-size: 12px;
  }

  body:not(.auth-required).sidebar-collapsed .topbar .state-pill,
  body:not(.auth-required).sidebar-collapsed .topbar .icon-button {
    font-size: 13px;
    padding: 7px 8px;
  }

  body:not(.auth-required).sidebar-collapsed .topbar .state-pill::before,
  body:not(.auth-required).sidebar-collapsed .topbar .icon-button::before {
    display: none;
    content: "";
  }

  body:not(.auth-required) .layout,
  body:not(.auth-required) .module-panel,
  body:not(.auth-required).sidebar-collapsed .layout {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 8px !important;
    gap: 8px;
    grid-template-columns: 1fr !important;
    min-height: auto;
  }

  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;
    height: auto;
  }

  body:not(.auth-required) .layout.media-tool-layout {
    height: auto;
    overflow: visible;
  }

  body:not(.auth-required) .panel {
    border-radius: 16px;
  }

  body:not(.auth-required) .workbench,
  body:not(.auth-required) .monitor {
    overflow: visible;
  }

  body:not(.auth-required) .tabs {
    position: sticky;
    top: 0;
    z-index: 3;
    min-height: 42px;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    background: #ffffff;
  }

  body:not(.auth-required) .tab {
    min-height: 42px;
    padding: 10px 8px;
    font-size: 13px;
  }

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

  body:not(.auth-required) .form-grid,
  body:not(.auth-required) .options-grid,
  body:not(.auth-required) .quick-options,
  body:not(.auth-required) .stats-grid,
  body:not(.auth-required) .model-category-fields,
  body:not(.auth-required) .category-key-row,
  body:not(.auth-required) .category-key-add-row {
    grid-template-columns: 1fr !important;
  }

  /* 只给表单字段设移动端统一高度/圆角/字号。原来把 button/.button-link 也混进来一刀切 40px,
     导致图标/胶囊按钮被撑高、每加个特殊按钮都要到处 :not() 排除(病根)。移除 button/.button-link:
     按钮几何归各自专用规则(表单按钮走按钮几何、图标按钮走 .gen-icon-btn 等),字号仍由排版规则统一给。 */
  body:not(.auth-required) input,
  body:not(.auth-required) select,
  body:not(.auth-required) textarea {
    min-height: 40px;
    border-radius: 11px;
    font-size: 14px;
  }

  body:not(.auth-required) textarea {
    min-height: 146px;
    line-height: 1.55;
  }

  body:not(.auth-required) .drop-zone,
  body:not(.auth-required) .upload-box,
  body:not(.auth-required) .advanced,
  body:not(.auth-required) .file-summary,
  body:not(.auth-required) .plan-summary-inline {
    border-radius: 14px;
  }

  body:not(.auth-required) .command-row,
  body:not(.auth-required) .command-row.compact,
  body:not(.auth-required) .monitor-actions,
  body:not(.auth-required) .modal-tools,
  body:not(.auth-required) .watermark-template-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  body:not(.auth-required) .command-row > button,
  body:not(.auth-required) .command-row > .button-link {
    flex: 1 1 128px;
    justify-content: center;
  }

  body:not(.auth-required) .monitor {
    padding: 12px;
  }

  body:not(.auth-required) .monitor-header {
    display: grid;
    gap: 10px;
  }

  body:not(.auth-required) .monitor-actions {
    justify-content: stretch;
  }

  body:not(.auth-required) .monitor-actions button {
    flex: 1 1 0;
  }

  body:not(.auth-required) .monitor-body,
  body:not(.auth-required) .results-split {
    grid-template-columns: 1fr !important;
  }

  body:not(.auth-required) .job-list,
  body:not(.auth-required) .gallery,
  body:not(.auth-required) .item-table {
    max-height: none;
  }

  body:not(.auth-required) .selected-preview,
  body:not(.auth-required) .reference-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  body:not(.auth-required) .light-result {
    min-height: 240px;
  }
}