/* home-ui-v8: pure white full-bleed homepage rebuild.
   Visual only. Preserve all control IDs and JS hooks. */

:root {
  --w8-bg: #ffffff;
  --w8-panel: #ffffff;
  --w8-soft: #f6f7f8;
  --w8-soft-2: #eef0f2;
  --w8-ink: #111111;
  --w8-muted: #5b6168;
  --w8-line: #e5e7eb;
  --w8-line-strong: #d1d5db;
  --w8-primary: #111111;
  --w8-primary-text: #ffffff;
  --w8-danger: #c62828;
  --w8-danger-bg: #fff5f5;
  --w8-radius: 8px;
  --w8-radius-sm: 6px;
  --w8-control-h: 34px;
  --w8-gap: clamp(8px, 0.9vw, 12px);
  --w8-pad: clamp(12px, 1.2vw, 18px);
  --w8-side: clamp(300px, 27vw, 400px);
  --w8-font: "Segoe UI", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

html,
body {
  width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body,
html body.auth-locked {
  color: var(--w8-ink) !important;
  background: #ffffff !important;
  font-family: var(--w8-font) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

html body::before,
html body::after,
html body .app-shell::before,
html body .app-shell::after,
html body .sidebar::before,
html body .sidebar::after,
html body .content::before,
html body .content::after,
html body .sidebar > .section::before,
html body .content-top h2::before,
html body .content-top h2::after {
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}

html body.auth-locked .app-shell,
html body.auth-locked .multi-angle-shell,
html body.auth-locked .multi-task-shell,
html body.auth-locked .studio {
  filter: none !important;
  opacity: 1 !important;
}

html body.auth-locked .auth-modal {
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: none !important;
}

html body.auth-locked .auth-dialog {
  border: 1px solid var(--w8-line) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 16px 40px rgba(17, 17, 17, 0.08) !important;
}

/* Full-bleed shell */
html body .app-shell {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  height: 100vh !important;
  grid-template-columns: var(--w8-side) minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: stretch !important;
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Sidebar */
html body .app-shell .sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: auto !important;
  margin: 0 !important;
  padding: var(--w8-pad) !important;
  border: 0 !important;
  border-right: 1px solid var(--w8-line) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  color: var(--w8-ink) !important;
}

html body .app-shell .sidebar > .section,
html body .app-shell .sidebar > .section.quick-panel,
html body .app-shell .sidebar > .section.config-section {
  margin: 0 !important;
  padding: 12px !important;
  border: 1px solid var(--w8-line) !important;
  border-radius: var(--w8-radius) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html body .app-shell .sidebar .section-heading,
html body .app-shell .sidebar .quick-panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 32px !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body .app-shell .sidebar .quick-panel-head-main {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

html body .app-shell .sidebar .quick-panel-head-main span,
html body .app-shell .sidebar .field > span,
html body .app-shell .sidebar .retry-count-field > span,
html body .app-shell .sidebar .toggle-field span,
html body .app-shell .sidebar .inline-field span,
html body .app-shell .sidebar .advanced-group-kicker,
html body .app-shell .sidebar .retry-settings-tip {
  color: var(--w8-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

html body .app-shell .sidebar .quick-panel-head-main strong,
html body .app-shell .sidebar .section-heading h2,
html body .app-shell .sidebar .advanced-group-copy strong,
html body .app-shell .sidebar .task-reference-title,
html body .app-shell .sidebar .status {
  color: var(--w8-ink) !important;
}

html body .app-shell .sidebar .section-heading h2 {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body .app-shell .sidebar .field-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body .app-shell .sidebar .field-grid-single {
  grid-template-columns: minmax(0, 1fr) !important;
}

html body .app-shell .sidebar .field {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
}

html body .app-shell .sidebar select,
html body .app-shell .sidebar input[type="text"],
html body .app-shell .sidebar input[type="number"],
html body .app-shell .sidebar textarea,
html body .app-shell .sidebar .dir-picker-row input {
  width: 100% !important;
  min-height: var(--w8-control-h) !important;
  height: var(--w8-control-h) !important;
  padding: 0 10px !important;
  border: 1px solid var(--w8-line) !important;
  border-radius: var(--w8-radius-sm) !important;
  background: #ffffff !important;
  color: var(--w8-ink) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  outline: none !important;
}

html body .app-shell .sidebar textarea {
  height: auto !important;
  min-height: 88px !important;
  padding: 10px !important;
  line-height: 1.45 !important;
  resize: vertical !important;
}

html body .app-shell .sidebar select option {
  color: var(--w8-ink) !important;
  background: #ffffff !important;
}

html body .app-shell .sidebar select:focus,
html body .app-shell .sidebar input:focus,
html body .app-shell .sidebar textarea:focus {
  border-color: #111111 !important;
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.08) !important;
}

html body .app-shell .sidebar .dir-picker-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 6px !important;
  align-items: center !important;
}

html body .app-shell .sidebar .retry-settings-panel,
html body .app-shell .sidebar .toggle-row,
html body .app-shell .sidebar .advanced-group {
  border: 1px solid var(--w8-line) !important;
  border-radius: var(--w8-radius-sm) !important;
  background: var(--w8-soft) !important;
  box-shadow: none !important;
}

html body .app-shell .sidebar .retry-settings-panel {
  display: grid !important;
  gap: 8px !important;
  padding: 10px !important;
  margin-top: 8px !important;
}

html body .app-shell .sidebar .retry-settings-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: end !important;
}

html body .app-shell .sidebar .toggle-field {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  border: 1px solid var(--w8-line) !important;
}

html body .app-shell .sidebar .retry-settings-tip {
  margin: 0 !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  line-height: 1.4 !important;
}

html body .app-shell .sidebar .advanced-group {
  margin-top: 10px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body .app-shell .sidebar .advanced-group-summary {
  list-style: none !important;
  cursor: pointer !important;
  padding: 10px 12px !important;
  background: #ffffff !important;
  border-bottom: 1px solid transparent !important;
}

html body .app-shell .sidebar .advanced-group[open] .advanced-group-summary {
  border-bottom-color: var(--w8-line) !important;
}

html body .app-shell .sidebar .advanced-group-summary::-webkit-details-marker {
  display: none !important;
}

html body .app-shell .sidebar .advanced-group-body {
  padding: 10px 12px 12px !important;
  background: #ffffff !important;
}

html body .app-shell .sidebar .provider-switch {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  padding: 3px !important;
  border: 1px solid var(--w8-line) !important;
  border-radius: 8px !important;
  background: var(--w8-soft) !important;
}

/* Buttons */
html body .app-shell .button,
html body .app-shell button.button,
html body .app-shell .workspace-nav-link,
html body .app-shell .auth-button,
html body .app-shell .provider-switch-button,
html body .app-shell .icon-button,
html body .app-shell .preview-tool,
html body .app-shell .preview-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--w8-control-h) !important;
  height: var(--w8-control-h) !important;
  padding: 0 12px !important;
  border: 1px solid var(--w8-line) !important;
  border-radius: var(--w8-radius-sm) !important;
  background: #ffffff !important;
  color: var(--w8-ink) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease !important;
  transform: none !important;
}

html body .app-shell .button-mini,
html body .app-shell .button.button-mini {
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
}

html body .app-shell .button-primary,
html body .app-shell #generateButton,
html body .app-shell #exportAllButton,
html body .app-shell .auth-button:not(.secondary),
html body .app-shell .sidebar .button-primary {
  border-color: #111111 !important;
  background: #111111 !important;
  color: #ffffff !important;
}

html body .app-shell .button-secondary,
html body .app-shell .workspace-nav-link,
html body .app-shell .provider-switch-button,
html body .app-shell .auth-button.secondary {
  border-color: var(--w8-line) !important;
  background: #ffffff !important;
  color: var(--w8-ink) !important;
}

html body .app-shell .button-danger,
html body .app-shell #deleteGalleryGroupButton,
html body .app-shell #stopButton {
  border-color: #f0c7c7 !important;
  background: var(--w8-danger-bg) !important;
  color: var(--w8-danger) !important;
}

html body .app-shell .button:hover,
html body .app-shell .workspace-nav-link:hover,
html body .app-shell .provider-switch-button:hover {
  border-color: #c9cdd3 !important;
  background: var(--w8-soft) !important;
  color: var(--w8-ink) !important;
  transform: none !important;
}

html body .app-shell .button-primary:hover,
html body .app-shell #generateButton:hover,
html body .app-shell #exportAllButton:hover {
  border-color: #000000 !important;
  background: #000000 !important;
  color: #ffffff !important;
}

html body .app-shell .sidebar .provider-switch-button.active {
  border-color: #111111 !important;
  background: #111111 !important;
  color: #ffffff !important;
}

/* Task section fills remaining height */
html body .app-shell .sidebar > .section:nth-of-type(3) {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  background: #ffffff !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .section-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-list {
  display: grid !important;
  gap: 8px !important;
  min-height: 0 !important;
  overflow: auto !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-item {
  padding: 10px !important;
  border: 1px solid var(--w8-line) !important;
  border-radius: var(--w8-radius-sm) !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-prompt {
  min-height: 180px !important;
  height: auto !important;
  border: 1px solid var(--w8-line) !important;
  border-radius: var(--w8-radius-sm) !important;
  background: #ffffff !important;
  color: var(--w8-ink) !important;
}

html body .app-shell .sidebar .status {
  margin-top: 8px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--w8-line) !important;
  border-radius: var(--w8-radius-sm) !important;
  background: var(--w8-soft) !important;
  color: var(--w8-ink) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

html body .app-shell .sidebar .generation-progress {
  margin-top: 8px !important;
  padding: 10px !important;
  border: 1px solid var(--w8-line) !important;
  border-radius: var(--w8-radius-sm) !important;
  background: #ffffff !important;
}

html body .app-shell .sidebar .generation-progress-track {
  height: 8px !important;
  border-radius: 999px !important;
  background: var(--w8-soft-2) !important;
  overflow: hidden !important;
}

html body .app-shell .sidebar .generation-progress-bar {
  height: 100% !important;
  border-radius: 999px !important;
  background: #111111 !important;
}

/* Content area */
html body .app-shell .content {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

html body .app-shell .content > .content-top,
html body .app-shell .content > .content-top.home-toolbar-v6,
html body .app-shell .content > .content-top.home-toolbar-v8 {
  display: grid !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: var(--w8-pad) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--w8-line) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html body .app-shell .home-toolbar-v8-head,
html body .app-shell .home-toolbar-v6-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 40px !important;
  padding: 0 0 8px !important;
  border-bottom: 1px solid var(--w8-line) !important;
}

html body .app-shell .home-toolbar-v6-kicker,
html body .app-shell .home-toolbar-v8-kicker {
  display: none !important;
}

html body .app-shell .home-toolbar-v6-title-wrap h2,
html body .app-shell .home-toolbar-v8-title-wrap h2,
html body .app-shell .content > .content-top h2 {
  margin: 0 !important;
  color: var(--w8-ink) !important;
  font-size: clamp(16px, 1.35vw, 20px) !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}

html body .app-shell .content-heading-stack,
html body .app-shell .content-heading-stack.home-toolbar-v6-stack,
html body .app-shell .content-actions,
html body .app-shell .content-actions.home-toolbar-v6-actions,
html body .app-shell .home-toolbar-v8-stack,
html body .app-shell .home-toolbar-v8-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .app-shell .home-toolbar-v6-row,
html body .app-shell .home-toolbar-v8-row,
html body .app-shell .gallery-group-panel,
html body .app-shell .gallery-toolbar-group,
html body .app-shell .home-toolbar-chip,
html body .app-shell .workspace-nav,
html body .app-shell .gallery-batch-move-tools {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .app-shell .home-toolbar-chip {
  padding: 6px 8px !important;
  border: 1px solid var(--w8-line) !important;
  border-radius: 8px !important;
  background: var(--w8-soft) !important;
}

html body .app-shell .home-toolbar-chip-label {
  display: inline-flex !important;
  align-items: center !important;
  height: 24px !important;
  margin-right: 2px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid var(--w8-line) !important;
  color: var(--w8-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

html body .app-shell .gallery-group-field,
html body .app-shell .gallery-batch-move-field {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

html body .app-shell .gallery-group-field select,
html body .app-shell .gallery-batch-move-field select,
html body .app-shell .content select {
  min-height: 30px !important;
  height: 30px !important;
  min-width: 140px !important;
  padding: 0 10px !important;
  border: 1px solid var(--w8-line) !important;
  border-radius: var(--w8-radius-sm) !important;
  background: #ffffff !important;
  color: var(--w8-ink) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

html body .app-shell .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Gallery full remaining space */
html body .app-shell .gallery {
  display: grid !important;
  align-content: start !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: auto !important;
  margin: 0 !important;
  padding: var(--w8-pad) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

html body .app-shell .gallery-group-section {
  border: 1px solid var(--w8-line) !important;
  border-radius: var(--w8-radius) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html body .app-shell .gallery-group-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--w8-line) !important;
  background: var(--w8-soft) !important;
}

html body .app-shell .gallery-group-body {
  padding: 12px !important;
  background: #ffffff !important;
}

html body .app-shell .gallery-card {
  overflow: hidden !important;
  border: 1px solid var(--w8-line) !important;
  border-radius: var(--w8-radius-sm) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  transition: border-color 0.12s ease !important;
  transform: none !important;
}

html body .app-shell .gallery-card:hover {
  transform: none !important;
  border-color: #bdbdbd !important;
  box-shadow: none !important;
}

html body .app-shell .gallery-group-name,
html body .app-shell .gallery-prompt-label,
html body .app-shell .gallery-meta,
html body .app-shell .gallery-title,
html body .app-shell .status {
  color: var(--w8-ink) !important;
}

html body .app-shell .gallery-time,
html body .app-shell .gallery-credit,
html body .app-shell .gallery-group-count,
html body .app-shell .gallery-group-path-inline {
  color: var(--w8-muted) !important;
}

html body .app-shell .empty-state {
  border: 1px dashed var(--w8-line-strong) !important;
  border-radius: var(--w8-radius) !important;
  background: var(--w8-soft) !important;
  color: var(--w8-muted) !important;
}

/* Preview / modals */
html body .preview-sidebar,
html body .task-log-dialog,
html body .modal-dialog,
html body .auth-dialog {
  background: #ffffff !important;
  border: 1px solid var(--w8-line) !important;
  box-shadow: 0 16px 40px rgba(17, 17, 17, 0.08) !important;
  color: var(--w8-ink) !important;
}

html body .task-log-modal,
html body .preview-modal {
  background: rgba(17, 17, 17, 0.28) !important;
  backdrop-filter: none !important;
}

/* Adaptive */
@media (max-width: 1440px) {
  :root {
    --w8-side: clamp(280px, 30vw, 360px);
    --w8-control-h: 32px;
  }
}

@media (max-width: 1100px) {
  html body .app-shell {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 100vh !important;
  }

  html body .app-shell .sidebar,
  html body .app-shell .content {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  html body .app-shell .sidebar {
    border-right: 0 !important;
    border-bottom: 1px solid var(--w8-line) !important;
  }

  html body .app-shell .gallery {
    min-height: 52vh !important;
  }
}

@media (max-width: 760px) {
  :root {
    --w8-pad: 10px;
    --w8-gap: 8px;
  }

  html body .app-shell .sidebar .field-grid {
    grid-template-columns: 1fr !important;
  }

  html body .app-shell .sidebar .dir-picker-row,
  html body .app-shell .sidebar .retry-settings-row {
    grid-template-columns: 1fr !important;
  }

  html body .app-shell .home-toolbar-chip,
  html body .app-shell .gallery-toolbar-group,
  html body .app-shell .workspace-nav,
  html body .app-shell .gallery-group-field,
  html body .app-shell .gallery-batch-move-tools {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  html body .app-shell .home-toolbar-v6-head,
  html body .app-shell .home-toolbar-v8-head {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  html body .app-shell .gallery-group-field select,
  html body .app-shell .gallery-batch-move-field select,
  html body .app-shell .content select {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (min-width: 1600px) {
  :root {
    --w8-side: clamp(340px, 24vw, 430px);
    --w8-pad: 18px;
  }

  html body {
    font-size: 14px !important;
  }
}

@media (min-width: 1920px) {
  :root {
    --w8-side: clamp(360px, 22vw, 460px);
    --w8-control-h: 36px;
  }
}

/* =========================================================
   v8.1 layout hard fix
   - kill ui-enhance absolute / contents conflicts
   - one clean top account row
   - no tall empty task card
   ========================================================= */

html body .app-shell .sidebar > .section.quick-panel {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  position: relative !important;
  overflow: visible !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px !important;
  border: 1px solid var(--w8-line) !important;
  border-radius: var(--w8-radius) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
}

html body .app-shell .sidebar > .section.quick-panel::before,
html body .app-shell .sidebar > .section.quick-panel::after {
  display: none !important;
  content: none !important;
}

/* auth card injected first into quick-panel */
html body .app-shell .sidebar > .section.quick-panel > .auth-card,
html body .app-shell .sidebar .quick-panel .auth-card {
  order: 1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  border: 1px solid var(--w8-line) !important;
  border-radius: var(--w8-radius-sm) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  grid-area: auto !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
}

html body .app-shell .sidebar .quick-panel .auth-card-row,
html body .app-shell .sidebar .quick-panel .auth-card-row:first-child,
html body .app-shell .sidebar .quick-panel .auth-card-row:nth-child(2),
html body .app-shell .sidebar .quick-panel .auth-balance-row,
html body .app-shell .sidebar .quick-panel .auth-balance-actions,
html body .app-shell .sidebar .quick-panel .auth-balance-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  grid-area: auto !important;
}

html body .app-shell .sidebar .quick-panel .auth-card-row {
  flex: 0 1 auto !important;
}

html body .app-shell .sidebar .quick-panel .auth-card-row:first-child {
  order: 4 !important;
  margin-left: auto !important;
  justify-content: flex-end !important;
}

html body .app-shell .sidebar .quick-panel .auth-card-row:nth-child(2) {
  order: 1 !important;
  flex: 0 1 auto !important;
  max-width: 42% !important;
  justify-content: flex-start !important;
}

html body .app-shell .sidebar .quick-panel .auth-balance-row {
  order: 2 !important;
  flex: 1 1 auto !important;
  justify-content: flex-end !important;
  white-space: nowrap !important;
}

html body .app-shell .sidebar .quick-panel .auth-card-row:first-child small,
html body .app-shell .sidebar .quick-panel .auth-card-row:nth-child(2) > div,
html body .app-shell .sidebar .quick-panel .auth-balance-meta small,
html body .app-shell .sidebar .quick-panel .auth-balance-hint,
html body .app-shell .sidebar .quick-panel .auth-balance-price {
  display: none !important;
}

html body .app-shell .sidebar .quick-panel #authUsername,
html body .app-shell .sidebar .quick-panel .auth-card strong {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--w8-ink) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  grid-area: auto !important;
}

html body .app-shell .sidebar .quick-panel .auth-balance-value {
  color: var(--w8-ink) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

html body .app-shell .sidebar .quick-panel .auth-button,
html body .app-shell .sidebar .quick-panel .auth-button.secondary,
html body .app-shell .sidebar .quick-panel #authAdminLink,
html body .app-shell .sidebar .quick-panel #authBalanceRechargeButton,
html body .app-shell .sidebar .quick-panel #authLogoutButton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 10px !important;
  border: 1px solid var(--w8-line-strong) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--w8-ink) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  grid-area: auto !important;
}

html body .app-shell .sidebar .quick-panel #authBalanceRechargeButton,
html body .app-shell .sidebar .quick-panel .auth-button:not(.secondary) {
  border-color: #111111 !important;
  background: #111111 !important;
  color: #ffffff !important;
}

/* second row: channel + close */
html body .app-shell .sidebar > .section.quick-panel > .quick-panel-head {
  order: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  position: static !important;
  inset: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  width: 100% !important;
  min-height: 32px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  grid-area: auto !important;
}

html body .app-shell .sidebar > .section.quick-panel > .quick-panel-head-main,
html body .app-shell .sidebar .quick-panel .quick-panel-head-main {
  display: none !important;
}

html body .app-shell .sidebar > .section.quick-panel > .provider-switch {
  order: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: auto !important;
  min-width: 72px !important;
  min-height: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 3px !important;
  border: 1px solid var(--w8-line) !important;
  border-radius: 8px !important;
  background: var(--w8-soft) !important;
  grid-area: auto !important;
}

html body .app-shell .sidebar > .section.quick-panel > .quick-panel-head > .quick-panel-close-button,
html body .app-shell .sidebar .quick-panel .quick-panel-close-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 52px !important;
  min-height: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid var(--w8-line-strong) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: var(--w8-ink) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  grid-area: auto !important;
  position: static !important;
}

/* put channel switch and close side by side on one row */
html body .app-shell .sidebar > .section.quick-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  grid-template-areas:
    "auth auth auth"
    "switch close close" !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 8px !important;
}

html body .app-shell .sidebar > .section.quick-panel > .auth-card {
  grid-area: auth !important;
  order: unset !important;
}

html body .app-shell .sidebar > .section.quick-panel > .provider-switch {
  grid-area: switch !important;
  order: unset !important;
  justify-self: start !important;
}

html body .app-shell .sidebar > .section.quick-panel > .quick-panel-head {
  grid-area: close !important;
  order: unset !important;
  width: auto !important;
  min-width: 52px !important;
  justify-self: end !important;
  justify-content: flex-end !important;
}

html body .app-shell .sidebar .quick-panel .provider-switch-button {
  min-width: 56px !important;
  min-height: 26px !important;
  height: 26px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--w8-ink) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

html body .app-shell .sidebar .quick-panel .provider-switch-button.active {
  background: #111111 !important;
  color: #ffffff !important;
}

/* v8.10: full-screen prompt history picker */
html body .app-shell .task-prompt-ai-row .task-prompt-history-open {
  display: inline-flex !important;
}

html body .app-shell .task-reference-tools {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  min-width: 0 !important;
}

html body .app-shell .task-reference-tools .task-prompt-history-reference-open[hidden],
html body .app-shell .task-prompt-ai-row .task-prompt-history-open[hidden] {
  display: none !important;
}

html body #promptHistoryPickerModal {
  padding: 16px !important;
  background: #f5f5f5 !important;
  color: #111111 !important;
}

html body #promptHistoryPickerModal .prompt-history-picker-toolbar {
  flex: 0 0 auto !important;
  min-height: 56px !important;
  padding: 10px 12px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #111111 !important;
}

html body #promptHistoryPickerModal .prompt-history-picker-title {
  min-width: 0 !important;
}

html body #promptHistoryPickerModal .prompt-history-picker-title strong {
  font-size: 16px !important;
  font-weight: 750 !important;
}

html body #promptHistoryPickerModal .prompt-history-picker-count {
  color: #6b7280 !important;
  font-size: 12px !important;
}

html body #promptHistoryPickerModal .prompt-history-picker-search-field {
  display: block !important;
  width: min(320px, 34vw) !important;
}

html body #promptHistoryPickerModal #promptHistoryPickerSearch {
  width: 100% !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 11px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  outline: 0 !important;
  background: #ffffff !important;
  color: #111111 !important;
  font-size: 13px !important;
}

html body #promptHistoryPickerModal #promptHistoryPickerSearch:focus {
  border-color: #111111 !important;
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.08) !important;
}

html body #promptHistoryPickerModal .preview-tool,
html body #promptHistoryPickerModal .preview-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 13px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #111111 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

html body #promptHistoryPickerModal #promptHistoryPickerConfirm:not(:disabled) {
  border-color: #111111 !important;
  background: #111111 !important;
  color: #ffffff !important;
}

html body #promptHistoryPickerModal .prompt-history-picker-layout {
  display: block !important;
  min-height: 0 !important;
  margin-top: 12px !important;
}

html body #promptHistoryPickerModal .prompt-history-picker-panel {
  height: 100% !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 14px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}

html body #promptHistoryPickerModal .prompt-history-picker-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  align-content: start !important;
  gap: 12px !important;
}

html body #promptHistoryPickerModal .prompt-history-picker-item {
  display: grid !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 136px !important;
  padding: 12px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #111111 !important;
  cursor: pointer !important;
  text-align: left !important;
  box-shadow: none !important;
}

html body #promptHistoryPickerModal .prompt-history-picker-item:hover {
  border-color: #9ca3af !important;
  background: #fafafa !important;
}

html body #promptHistoryPickerModal .prompt-history-picker-item.is-selected {
  border-color: #111111 !important;
  box-shadow: 0 0 0 2px #111111 !important;
}

html body #promptHistoryPickerModal .prompt-history-picker-item-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  color: #6b7280 !important;
  font-size: 12px !important;
}

html body #promptHistoryPickerModal .prompt-history-picker-item-meta strong {
  color: #374151 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

html body #promptHistoryPickerModal .prompt-history-picker-item-text {
  display: block !important;
  max-height: 180px !important;
  overflow: auto !important;
  color: #111111 !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

html body #promptHistoryPickerModal .prompt-history-picker-empty {
  display: grid !important;
  place-items: center !important;
  grid-column: 1 / -1 !important;
  min-height: 280px !important;
  padding: 24px !important;
  border: 1px dashed #d1d5db !important;
  border-radius: 8px !important;
  background: #fafafa !important;
  color: #6b7280 !important;
  font-size: 13px !important;
}

@media (max-width: 760px) {
  html body #promptHistoryPickerModal {
    padding: 8px !important;
  }

  html body #promptHistoryPickerModal .prompt-history-picker-toolbar,
  html body #promptHistoryPickerModal .prompt-history-picker-toolbar > .preview-actions {
    width: 100% !important;
    align-items: stretch !important;
  }

  html body #promptHistoryPickerModal .prompt-history-picker-search-field {
    width: 100% !important;
  }

  html body #promptHistoryPickerModal .prompt-history-picker-list {
    grid-template-columns: 1fr !important;
  }
}

/* task section: fill remaining sidebar height so bottom is not empty */
html body .app-shell .sidebar {
  align-content: stretch !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
}

html body .app-shell .sidebar > .section.quick-panel,
html body .app-shell .sidebar > .section.config-section {
  flex: 0 0 auto !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 10px !important;
  overflow: hidden !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .section-heading {
  flex: 0 0 auto !important;
  margin: 0 !important;
  min-height: 32px !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .section-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-list {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: auto !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-list:empty {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 120px !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-item {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: 0 !important;
  height: 100% !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-prompt {
  flex: 1 1 auto !important;
  min-height: 180px !important;
  height: auto !important;
  max-height: none !important;
  resize: vertical !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .status {
  flex: 0 0 auto !important;
  margin: 0 !important;
  min-height: 34px !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .generation-progress {
  flex: 0 0 auto !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .generation-progress[hidden] {
  display: none !important;
}

/* no transparent spacer under task card */
html body .app-shell .sidebar::after {
  display: none !important;
  content: none !important;
  flex: 0 0 0 !important;
  height: 0 !important;
  min-height: 0 !important;
}

/* toolbar stay left-aligned and compact */
html body .app-shell .content > .content-actions,
html body .app-shell .content .home-toolbar-v8-actions,
html body .app-shell .content .home-toolbar-v6-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
}

html body .app-shell .content .home-toolbar-chip,
html body .app-shell .content .gallery-toolbar-group,
html body .app-shell .content .workspace-nav,
html body .app-shell .content .gallery-group-field,
html body .app-shell .content .gallery-batch-move-tools {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

/* ensure pure white auth/balance injected styles cannot recolor */
html body .app-shell .auth-card,
html body .app-shell .auth-balance-row,
html body .app-shell .auth-dialog {
  background: #ffffff !important;
  color: var(--w8-ink) !important;
  box-shadow: none !important;
}

html body .app-shell .auth-card strong,
html body .app-shell .auth-balance-value {
  color: var(--w8-ink) !important;
}

@media (max-width: 1100px) {
  html body .app-shell .sidebar > .section.quick-panel {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }
}

@media (max-width: 760px) {
  html body .app-shell .sidebar > .section.quick-panel {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "auth"
      "switch"
      "close" !important;
  }

  html body .app-shell .sidebar > .section.quick-panel > .provider-switch,
  html body .app-shell .sidebar > .section.quick-panel > .quick-panel-head {
    width: 100% !important;
    justify-self: stretch !important;
  }

  html body .app-shell .sidebar > .section.quick-panel > .quick-panel-head > .quick-panel-close-button {
    width: 100% !important;
  }
}

/* =========================================================
   v8.2 density + fill polish
   ========================================================= */

html body .app-shell .sidebar {
  gap: 8px !important;
  overflow: hidden !important;
}

html body .app-shell .sidebar > .section.quick-panel {
  padding: 8px !important;
  row-gap: 6px !important;
  column-gap: 6px !important;
}

html body .app-shell .sidebar > .section.config-section {
  flex: 0 1 auto !important;
  max-height: 46vh !important;
  overflow: auto !important;
  min-height: 0 !important;
  padding: 10px !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) {
  flex: 1 1 auto !important;
  min-height: 280px !important;
  padding: 10px !important;
  border: 1px solid var(--w8-line) !important;
  background: #ffffff !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-item {
  flex: 1 1 auto !important;
  min-height: 100% !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-prompt {
  flex: 1 1 auto !important;
  min-height: 220px !important;
  height: 100% !important;
}

html body .app-shell .sidebar .field-grid {
  gap: 8px !important;
}

html body .app-shell .sidebar .field {
  gap: 4px !important;
}

html body .app-shell .sidebar select,
html body .app-shell .sidebar input[type="text"],
html body .app-shell .sidebar input[type="number"],
html body .app-shell .sidebar .dir-picker-row input {
  min-height: 30px !important;
  height: 30px !important;
}

html body .app-shell .sidebar .retry-settings-panel,
html body .app-shell .sidebar .toggle-row,
html body .app-shell .sidebar .advanced-group {
  margin-top: 6px !important;
}

@media (max-height: 900px) {
  html body .app-shell .sidebar > .section.config-section {
    max-height: 40vh !important;
  }

  html body .app-shell .sidebar > .section:nth-of-type(3) .task-prompt {
    min-height: 160px !important;
  }
}

@media (min-height: 1000px) {
  html body .app-shell .sidebar > .section:nth-of-type(3) .task-prompt {
    min-height: 280px !important;
  }
}

/* =========================================================
   v8.3 professional sidebar fill
   - do NOT stretch prompt box
   - params fill middle and scroll
   - task docks to bottom, compact natural height
   - continuous full-height white column
   ========================================================= */

html body .app-shell {
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

html body .app-shell .sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-right: 1px solid var(--w8-line) !important;
  background: #ffffff !important;
}

/* remove floating-card look that creates dead voids */
html body .app-shell .sidebar > .section,
html body .app-shell .sidebar > .section.quick-panel,
html body .app-shell .sidebar > .section.config-section,
html body .app-shell .sidebar > .section:nth-of-type(3) {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #ffffff !important;
}

html body .app-shell .sidebar > .section.quick-panel {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  grid-template-areas:
    "auth auth auth"
    "switch close close" !important;
  gap: 8px !important;
  padding: 12px 12px 10px !important;
  border-bottom: 1px solid var(--w8-line) !important;
}

html body .app-shell .sidebar > .section.config-section {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
  padding: 12px !important;
  border-bottom: 1px solid var(--w8-line) !important;
}

/* task docks bottom - compact, no fake tall prompt */
html body .app-shell .sidebar > .section:nth-of-type(3) {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: 0 !important;
  max-height: 42vh !important;
  height: auto !important;
  overflow: hidden !important;
  padding: 12px !important;
  background: #fafafa !important;
  border-top: 1px solid var(--w8-line) !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .section-heading {
  flex: 0 0 auto !important;
  margin: 0 !important;
  min-height: 30px !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .section-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-list {
  flex: 0 1 auto !important;
  display: grid !important;
  gap: 8px !important;
  min-height: 0 !important;
  max-height: 28vh !important;
  overflow: auto !important;
  height: auto !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-list:empty {
  display: none !important;
  min-height: 0 !important;
  max-height: 0 !important;
  height: 0 !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-item {
  flex: 0 0 auto !important;
  display: grid !important;
  gap: 8px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 10px !important;
  border: 1px solid var(--w8-line) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-prompt {
  flex: 0 0 auto !important;
  min-height: 88px !important;
  height: 96px !important;
  max-height: 140px !important;
  resize: vertical !important;
  border: 1px solid var(--w8-line) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .status,
html body .app-shell .sidebar > .section:nth-of-type(3) .generation-progress {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .generation-progress[hidden] {
  display: none !important;
}

html body .app-shell .sidebar::before,
html body .app-shell .sidebar::after {
  display: none !important;
  content: none !important;
  flex: 0 !important;
  height: 0 !important;
}

/* config fields stay compact and aligned; fullness comes from panel fill */
html body .app-shell .sidebar > .section.config-section .section-heading {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  margin: 0 0 10px !important;
  padding: 0 0 10px !important;
  border-bottom: 1px solid var(--w8-line) !important;
  background: #ffffff !important;
}

html body .app-shell .sidebar > .section.config-section .field-grid {
  gap: 8px !important;
}

html body .app-shell .sidebar > .section.config-section .field {
  gap: 4px !important;
}

html body .app-shell .sidebar > .section.config-section select,
html body .app-shell .sidebar > .section.config-section input[type="text"],
html body .app-shell .sidebar > .section.config-section input[type="number"],
html body .app-shell .sidebar > .section.config-section .dir-picker-row input {
  min-height: 32px !important;
  height: 32px !important;
}

html body .app-shell .sidebar > .section.config-section .retry-settings-panel,
html body .app-shell .sidebar > .section.config-section .toggle-row,
html body .app-shell .sidebar > .section.config-section .advanced-group,
html body .app-shell .sidebar > .section.config-section .dir-picker-row {
  margin-top: 8px !important;
}

/* content side also full height, no orphan bottom void feel */
html body .app-shell .content {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

html body .app-shell .gallery {
  background: #ffffff !important;
}

html body .app-shell .gallery .empty-state {
  min-height: min(52vh, 520px) !important;
  display: grid !important;
  place-items: center !important;
  border: 1px dashed #d4d4d4 !important;
  border-radius: 12px !important;
  background: #fafafa !important;
  color: #737373 !important;
}

@media (max-height: 860px) {
  html body .app-shell .sidebar > .section:nth-of-type(3) {
    max-height: 38vh !important;
  }

  html body .app-shell .sidebar > .section:nth-of-type(3) .task-prompt {
    min-height: 72px !important;
    height: 80px !important;
  }
}

@media (max-width: 1100px) {
  html body .app-shell {
    height: auto !important;
    min-height: 100vh !important;
    overflow: auto !important;
  }

  html body .app-shell .sidebar,
  html body .app-shell .content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body .app-shell .sidebar > .section.config-section,
  html body .app-shell .sidebar > .section:nth-of-type(3) {
    flex: 0 0 auto !important;
    max-height: none !important;
  }
}
/* home-ui-v8.4
   pure white full-bleed
   - do NOT stretch prompt textarea
   - leftover height goes into task workspace + reference drop zone
   - params size to content, scroll only when needed
   - gallery empty state fills remaining right panel
*/

html body .app-shell {
  display: grid !important;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
  width: 100% !important;
  min-height: 100vh !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

html body .app-shell .sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-right: 1px solid #e5e7eb !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

html body .app-shell .sidebar::before,
html body .app-shell .sidebar::after {
  display: none !important;
  content: none !important;
}

/* kill floating cards / absolute leftovers that create voids */
html body .app-shell .sidebar > .section,
html body .app-shell .sidebar > .section.quick-panel,
html body .app-shell .sidebar > .section.config-section,
html body .app-shell .sidebar > .section:nth-of-type(3) {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #ffffff !important;
}

/* 1) account / channel - compact top band */
html body .app-shell .sidebar > .section.quick-panel {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 12px 14px 10px !important;
  border-bottom: 1px solid #e5e7eb !important;
  background: #ffffff !important;
}

html body .app-shell .sidebar > .section.quick-panel .auth-card,
html body .app-shell .sidebar > .section.quick-panel #authWidget {
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .app-shell .sidebar > .section.quick-panel .auth-card-row,
html body .app-shell .sidebar > .section.quick-panel .auth-balance-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .app-shell .sidebar > .section.quick-panel .quick-panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .app-shell .sidebar > .section.quick-panel .provider-switch {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
}

/* 2) params - content height only; no fake bottom blank */
html body .app-shell .sidebar > .section.config-section {
  flex: 0 1 auto !important;
  display: block !important;
  min-height: 0 !important;
  max-height: 46vh !important;
  overflow: auto !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid #e5e7eb !important;
  background: #ffffff !important;
}

html body .app-shell .sidebar > .section.config-section .section-heading {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 0 10px !important;
  padding: 0 0 8px !important;
  border-bottom: 1px solid #eceff3 !important;
  background: #ffffff !important;
}

html body .app-shell .sidebar > .section.config-section .section-heading h2 {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111111 !important;
}

html body .app-shell .sidebar > .section.config-section .field-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 0 8px !important;
}

html body .app-shell .sidebar > .section.config-section .field-grid-single {
  grid-template-columns: minmax(0, 1fr) !important;
}

html body .app-shell .sidebar > .section.config-section .field {
  display: grid !important;
  gap: 4px !important;
  margin: 0 !important;
}

html body .app-shell .sidebar > .section.config-section .field > span {
  font-size: 12px !important;
  line-height: 1.2 !important;
  color: #6b7280 !important;
}

html body .app-shell .sidebar > .section.config-section select,
html body .app-shell .sidebar > .section.config-section input[type="text"],
html body .app-shell .sidebar > .section.config-section input[type="number"],
html body .app-shell .sidebar > .section.config-section .dir-picker-row input {
  width: 100% !important;
  min-height: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #111111 !important;
  font-size: 13px !important;
}

html body .app-shell .sidebar > .section.config-section .retry-settings-panel,
html body .app-shell .sidebar > .section.config-section .toggle-row,
html body .app-shell .sidebar > .section.config-section .advanced-group,
html body .app-shell .sidebar > .section.config-section .dir-picker-row {
  margin-top: 8px !important;
}

html body .app-shell .sidebar > .section.config-section .retry-settings-panel {
  padding: 8px 10px !important;
  border: 1px solid #eceff3 !important;
  border-radius: 10px !important;
  background: #fafbfc !important;
}

html body .app-shell .sidebar > .section.config-section .advanced-group {
  border: 1px solid #eceff3 !important;
  border-radius: 10px !important;
  background: #fafbfc !important;
}

html body .app-shell .sidebar > .section.config-section .advanced-group-summary {
  padding: 8px 10px !important;
}

/* 3) task workspace fills remaining height */
html body .app-shell .sidebar > .section:nth-of-type(3) {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow: hidden !important;
  padding: 12px 14px 14px !important;
  background: #f7f8fa !important;
  border-top: 0 !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .section-heading {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 30px !important;
  margin: 0 !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .section-heading h2 {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111111 !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .section-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-list {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-list:empty {
  display: none !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-item {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-head,
html body .app-shell .sidebar > .section:nth-of-type(3) .task-prompt-tools,
html body .app-shell .sidebar > .section:nth-of-type(3) .task-prompt-ai-row {
  flex: 0 0 auto !important;
}

/* prompt stays natural height - never fake-fill */
html body .app-shell .sidebar > .section:nth-of-type(3) .task-prompt {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-height: 84px !important;
  height: 96px !important;
  max-height: 132px !important;
  resize: vertical !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #111111 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* reference drop zone absorbs leftover height purposefully */
html body .app-shell .sidebar > .section:nth-of-type(3) .task-reference-block {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: 120px !important;
  margin: 0 !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-reference-head {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-reference-title {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #4b5563 !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-reference-list {
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
  align-content: start !important;
  gap: 8px !important;
  min-height: 96px !important;
  margin: 0 !important;
  padding: 10px !important;
  overflow: auto !important;
  border: 1px dashed #d1d5db !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, #fcfcfd 0%, #f5f6f8 100%) !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-reference-list:empty::before {
  content: "拖入或添加参考图" !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-height: 72px !important;
  color: #9ca3af !important;
  font-size: 12px !important;
  grid-column: 1 / -1 !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .status,
html body .app-shell .sidebar > .section:nth-of-type(3) .generation-progress {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .generation-progress[hidden] {
  display: none !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) #generateButton,
html body .app-shell .sidebar > .section:nth-of-type(3) .button-primary {
  min-height: 34px !important;
  height: 34px !important;
}

/* right content fills viewport */
html body .app-shell .content {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
}

html body .app-shell .content > .content-top,
html body .app-shell .content > .content-top.home-toolbar-v6,
html body .app-shell .content > .content-top.home-toolbar-v8 {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 12px 16px 10px !important;
  border-bottom: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

html body .app-shell .gallery {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  margin: 0 !important;
  padding: 14px 16px 18px !important;
  background: #ffffff !important;
}

html body .app-shell .gallery .empty-state {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-height: calc(100vh - 170px) !important;
  margin: 0 !important;
  padding: 28px 20px !important;
  border: 1px dashed #d4d4d8 !important;
  border-radius: 14px !important;
  background: #fafafa !important;
  color: #737373 !important;
  font-size: 14px !important;
  text-align: center !important;
}

html body .app-shell .gallery-group-section {
  margin: 0 0 14px !important;
  border: 1px solid #eceff3 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
}

html body .app-shell .gallery-group-body {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 12px !important;
  padding: 12px !important;
}

html body .app-shell .gallery-card {
  border: 1px solid #eceff3 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

/* Restore the original square thumbnail card and group proportions. */
html body .app-shell .gallery-group-section {
  display: grid !important;
  gap: 6px !important;
  padding: 6px !important;
}

html body .app-shell .gallery-group-body {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 8px !important;
}

html body .app-shell .gallery-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
  min-width: 0 !important;
}

html body .app-shell .gallery-preview,
html body .app-shell .gallery-image {
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: 4 / 3 !important;
}

html body .app-shell .gallery-preview {
  justify-self: stretch !important;
  border-right: 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
}

html body .app-shell .gallery-image {
  object-fit: cover !important;
}

html body .app-shell .gallery-body {
  display: block !important;
  gap: normal !important;
  min-width: 0 !important;
  padding: 7px 7px 8px !important;
}

html body .app-shell .gallery-head {
  min-width: 0 !important;
  gap: 4px !important;
}

html body .app-shell .gallery-title {
  overflow: hidden !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .app-shell .gallery-time,
html body .app-shell .gallery-group-name,
html body .app-shell .gallery-credit {
  font-size: 8px !important;
  line-height: 1.2 !important;
}

html body .app-shell .gallery-time {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .app-shell .detail-grid {
  grid-template-columns: 1fr !important;
  gap: 5px !important;
  margin-top: 5px !important;
}

html body .app-shell .detail-box {
  min-height: 24px !important;
  overflow: hidden !important;
  padding: 4px 6px !important;
  border-radius: 8px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .app-shell .detail-box strong {
  overflow: hidden !important;
  font-size: 8px !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .app-shell .detail-text {
  display: none !important;
}

html body .app-shell .gallery-card .action-row {
  display: flex !important;
  gap: 3px !important;
  margin-top: 0 !important;
}

html body .app-shell .gallery-card .action-row .button {
  min-width: 0 !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 6px !important;
  overflow: hidden !important;
  font-size: 9px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  html body .app-shell .gallery-group-body {
    grid-template-columns: 1fr !important;
  }
}

@media (max-height: 860px) {
  html body .app-shell .sidebar > .section.config-section {
    max-height: 40vh !important;
  }

  html body .app-shell .sidebar > .section:nth-of-type(3) .task-prompt {
    min-height: 72px !important;
    height: 80px !important;
    max-height: 110px !important;
  }
}

@media (max-width: 1100px) {
  html body .app-shell {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: auto !important;
  }

  html body .app-shell .sidebar,
  html body .app-shell .content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body .app-shell .sidebar > .section.config-section,
  html body .app-shell .sidebar > .section:nth-of-type(3) {
    flex: 0 0 auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body .app-shell .sidebar > .section:nth-of-type(3) .task-list,
  html body .app-shell .sidebar > .section:nth-of-type(3) .task-item,
  html body .app-shell .sidebar > .section:nth-of-type(3) .task-reference-block,
  html body .app-shell .sidebar > .section:nth-of-type(3) .task-reference-list {
    flex: 0 0 auto !important;
    min-height: auto !important;
  }

  html body .app-shell .gallery .empty-state {
    min-height: 360px !important;
  }
}
/* =========================================================
   v8.5 restore natural proportions
   - back to original compact heights
   - NO forced stretch on prompt / task / reference
   - sidebar scrolls naturally like the first version
   - pure white + clean type only
   ========================================================= */

html body,
html body .app-shell,
html body .app-shell .sidebar,
html body .app-shell .content {
  height: auto !important;
  max-height: none !important;
}

html body .app-shell {
  display: grid !important;
  grid-template-columns: minmax(360px, 404px) minmax(0, 1fr) !important;
  gap: 16px !important;
  min-height: 100vh !important;
  padding: 16px !important;
  overflow: visible !important;
  background: #ffffff !important;
}

html body .app-shell .sidebar {
  position: sticky !important;
  top: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: auto !important;
  max-height: calc(100vh - 32px) !important;
  overflow: auto !important;
  margin: 0 !important;
  padding: 0 2px 0 0 !important;
  border: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .app-shell .sidebar::before,
html body .app-shell .sidebar::after {
  display: none !important;
  content: none !important;
}

html body .app-shell .sidebar > .section,
html body .app-shell .sidebar > .section.quick-panel,
html body .app-shell .sidebar > .section.config-section,
html body .app-shell .sidebar > .section:nth-of-type(3) {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  display: block !important;
  width: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 12px !important;
  overflow: visible !important;
  border: 1px solid #e8eaed !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

html body .app-shell .sidebar > .section.quick-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 10px 12px !important;
}

html body .app-shell .sidebar > .section.quick-panel .auth-card,
html body .app-shell .sidebar > .section.quick-panel #authWidget {
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .app-shell .sidebar > .section.quick-panel .auth-card-row,
html body .app-shell .sidebar > .section.quick-panel .auth-balance-row,
html body .app-shell .sidebar > .section.quick-panel .quick-panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .app-shell .sidebar > .section.config-section {
  padding: 12px !important;
  overflow: visible !important;
}

html body .app-shell .sidebar > .section.config-section .section-heading {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body .app-shell .sidebar > .section.config-section .field-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 0 8px !important;
}

html body .app-shell .sidebar > .section.config-section .field {
  gap: 4px !important;
}

html body .app-shell .sidebar > .section.config-section select,
html body .app-shell .sidebar > .section.config-section input[type="text"],
html body .app-shell .sidebar > .section.config-section input[type="number"],
html body .app-shell .sidebar > .section.config-section .dir-picker-row input {
  min-height: 34px !important;
  height: 34px !important;
}

/* task returns to original natural size */
html body .app-shell .sidebar > .section:nth-of-type(3) {
  display: block !important;
  gap: 0 !important;
  padding: 12px !important;
  background: #ffffff !important;
  border-top: 0 !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .section-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 30px !important;
  margin: 0 0 8px !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .section-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-list {
  display: grid !important;
  gap: 10px !important;
  margin-top: 8px !important;
  max-height: none !important;
  overflow: visible !important;
  height: auto !important;
  flex: none !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-list:empty {
  display: grid !important;
  min-height: 0 !important;
  height: auto !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-item {
  display: grid !important;
  gap: 8px !important;
  flex: none !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 10px !important;
  border: 1px solid #eceff3 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
}

/* original-like prompt height, not stretched */
html body .app-shell .sidebar > .section:nth-of-type(3) .task-prompt,
html body .app-shell .sidebar textarea.task-prompt {
  flex: none !important;
  width: 100% !important;
  min-height: 120px !important;
  height: auto !important;
  max-height: none !important;
  resize: vertical !important;
  margin: 0 !important;
  padding: 7px 9px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  line-height: 1.55 !important;
  font-size: 13px !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-reference-block,
html body .app-shell .sidebar > .section:nth-of-type(3) .task-reference-list {
  flex: none !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-reference-block {
  display: grid !important;
  gap: 8px !important;
  margin-top: 2px !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-reference-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .task-reference-list:empty::before {
  content: none !important;
  display: none !important;
}

html body .app-shell .sidebar > .section:nth-of-type(3) .status,
html body .app-shell .sidebar > .section:nth-of-type(3) .generation-progress {
  flex: none !important;
  margin-top: 8px !important;
}

/* right side natural again */
html body .app-shell .content {
  display: block !important;
  min-width: 0 !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

html body .app-shell .content > .content-top,
html body .app-shell .content > .content-top.home-toolbar-v6,
html body .app-shell .content > .content-top.home-toolbar-v8 {
  flex: none !important;
  margin: 0 0 12px !important;
  padding: 12px 14px !important;
  border: 1px solid #e8eaed !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

html body .app-shell .gallery {
  flex: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

html body .app-shell .gallery .empty-state {
  display: grid !important;
  place-items: center !important;
  min-height: 220px !important;
  margin: 0 !important;
  padding: 24px 16px !important;
  border: 1px dashed #d4d4d8 !important;
  border-radius: 12px !important;
  background: #fafafa !important;
  color: #737373 !important;
}

html body .app-shell .gallery-group-section {
  margin: 0 0 12px !important;
  border: 1px solid #e8eaed !important;
  border-radius: 12px !important;
  background: #ffffff !important;
}

html body .app-shell .gallery-group-body {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 12px !important;
  padding: 12px !important;
}

/* kill previous tall-screen stretch rules */
@media (min-height: 1000px) {
  html body .app-shell .sidebar > .section:nth-of-type(3) .task-prompt,
  html body .app-shell .sidebar textarea.task-prompt {
    min-height: 120px !important;
    height: auto !important;
  }
}

@media (max-height: 860px) {
  html body .app-shell .sidebar > .section:nth-of-type(3) {
    max-height: none !important;
  }

  html body .app-shell .sidebar > .section:nth-of-type(3) .task-prompt,
  html body .app-shell .sidebar textarea.task-prompt {
    min-height: 120px !important;
    height: auto !important;
    max-height: none !important;
  }
}

@media (max-width: 1100px) {
  html body .app-shell {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body .app-shell .sidebar {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    margin-bottom: 12px !important;
  }

  html body .app-shell .content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}
/* =========================================================
   v8.6 hard-fix top account panel ONLY
   Expected layout:
   row1: [admin] [¥xxxx] ............ [充值] [退出]
   row2: [通道1] ..................... [关闭]
   ========================================================= */

html body .app-shell .sidebar > .section.quick-panel {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  position: relative !important;
  width: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  overflow: visible !important;
  border: 1px solid #e8eaed !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
}

html body .app-shell .sidebar > .section.quick-panel::before,
html body .app-shell .sidebar > .section.quick-panel::after {
  display: none !important;
  content: none !important;
}

/* auth card becomes one compact horizontal strip */
html body .app-shell .sidebar > .section.quick-panel > .auth-card,
html body .app-shell .sidebar .quick-panel .auth-card,
html body .app-shell .sidebar > .section.quick-panel #authWidget {
  order: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  grid-area: auto !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
}

/* neutralize nested rows so children can sit in one line */
html body .app-shell .sidebar .quick-panel .auth-card-row,
html body .app-shell .sidebar .quick-panel .auth-card-row:first-child,
html body .app-shell .sidebar .quick-panel .auth-card-row:nth-child(2),
html body .app-shell .sidebar .quick-panel .auth-balance-row,
html body .app-shell .sidebar .quick-panel .auth-balance-actions,
html body .app-shell .sidebar .quick-panel .auth-balance-meta {
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  min-height: 0 !important;
  height: auto !important;
}

/* hide noisy labels */
html body .app-shell .sidebar .quick-panel .auth-card-row:first-child > small,
html body .app-shell .sidebar .quick-panel .auth-card-row:nth-child(2) > div,
html body .app-shell .sidebar .quick-panel .auth-balance-meta > small,
html body .app-shell .sidebar .quick-panel .auth-balance-hint,
html body .app-shell .sidebar .quick-panel .auth-balance-price,
html body .app-shell .sidebar .quick-panel #authRole,
html body .app-shell .sidebar .quick-panel #authAdminLink {
  display: none !important;
}

/* username left */
html body .app-shell .sidebar .quick-panel #authUsername,
html body .app-shell .sidebar .quick-panel .auth-card strong {
  order: 1 !important;
  display: inline-block !important;
  min-width: 0 !important;
  max-width: 28% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  margin: 0 !important;
  color: #111111 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* balance next to username */
html body .app-shell .sidebar .quick-panel .auth-balance-value,
html body .app-shell .sidebar .quick-panel #authBalanceValue {
  order: 2 !important;
  display: inline-block !important;
  margin: 0 !important;
  color: #111111 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

/* push action buttons to the right */
html body .app-shell .sidebar .quick-panel #authBalanceRechargeButton {
  order: 3 !important;
  margin-left: auto !important;
}

html body .app-shell .sidebar .quick-panel #authLogoutButton {
  order: 4 !important;
  margin-left: 0 !important;
}

html body .app-shell .sidebar .quick-panel .auth-button,
html body .app-shell .sidebar .quick-panel .auth-button.secondary,
html body .app-shell .sidebar .quick-panel #authBalanceRechargeButton,
html body .app-shell .sidebar .quick-panel #authLogoutButton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 52px !important;
  min-height: 28px !important;
  height: 28px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 12px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body .app-shell .sidebar .quick-panel #authBalanceRechargeButton,
html body .app-shell .sidebar .quick-panel .auth-button:not(.secondary) {
  color: #ffffff !important;
  background: #111111 !important;
  border-color: #111111 !important;
}

html body .app-shell .sidebar .quick-panel #authLogoutButton,
html body .app-shell .sidebar .quick-panel .auth-button.secondary {
  color: #111111 !important;
  background: #ffffff !important;
  border-color: #e5e7eb !important;
}

/* second row: channel + close */
html body .app-shell .sidebar > .section.quick-panel > .provider-switch {
  order: 2 !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  justify-self: start !important;
}

html body .app-shell .sidebar > .section.quick-panel > .quick-panel-head {
  order: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  width: 100% !important;
  min-height: 28px !important;
  margin: -36px 0 0 !important; /* sit on same visual row as channel switch */
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* hide "当前模型 / 通道1" title text, keep close button only */
html body .app-shell .sidebar > .section.quick-panel > .quick-panel-head > .quick-panel-head-main {
  display: none !important;
}

html body .app-shell .sidebar > .section.quick-panel > .quick-panel-head > .quick-panel-close-button,
html body .app-shell .sidebar .quick-panel .quick-panel-close-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 52px !important;
  min-height: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #111111 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

html body .app-shell .sidebar .quick-panel .provider-switch-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 56px !important;
  min-height: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f3f4f6 !important;
  color: #111111 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

html body .app-shell .sidebar .quick-panel .provider-switch-button.active {
  background: #111111 !important;
  color: #ffffff !important;
}

/* safer second-row alignment without negative margin if needed */
html body .app-shell .sidebar > .section.quick-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "auth auth"
    "switch close" !important;
  row-gap: 8px !important;
  column-gap: 8px !important;
}

html body .app-shell .sidebar > .section.quick-panel > .auth-card,
html body .app-shell .sidebar > .section.quick-panel #authWidget {
  grid-area: auth !important;
  order: unset !important;
}

html body .app-shell .sidebar > .section.quick-panel > .provider-switch {
  grid-area: switch !important;
  order: unset !important;
  justify-self: start !important;
  align-self: center !important;
}

html body .app-shell .sidebar > .section.quick-panel > .quick-panel-head {
  grid-area: close !important;
  order: unset !important;
  width: auto !important;
  margin: 0 !important;
  justify-self: end !important;
  align-self: center !important;
}

/* Final gallery restore: original vertical result cards, compact group header. */
html body .app-shell .gallery {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: start !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: auto !important;
  padding: 12px !important;
  background: #ffffff !important;
}

html body .app-shell .gallery-group-section {
  display: block !important;
  width: min(250px, 100%) !important;
  max-width: 250px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

html body .app-shell .gallery-group-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  justify-content: start !important;
  gap: 8px !important;
  padding: 12px 14px 10px !important;
  border-bottom: 1px solid #e5e7eb !important;
  background: #f8fafc !important;
}

html body .app-shell .gallery-group-summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 4px !important;
  min-width: 0 !important;
}

html body .app-shell .gallery-group-title {
  overflow: hidden !important;
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .app-shell .gallery-group-count {
  color: #374151 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

html body .app-shell .gallery-group-path-inline {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 22px !important;
  padding: 0 8px !important;
  overflow: hidden !important;
  border: 1px solid #dbeafe !important;
  border-radius: 6px !important;
  background: #eff6ff !important;
  color: #1e3a8a !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .app-shell .gallery-group-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  min-width: 0 !important;
}

html body .app-shell .gallery-group-actions .button {
  min-width: 0 !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 10px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

html body .app-shell .gallery-group-body {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  padding: 14px !important;
  background: #ffffff !important;
}

html body .app-shell .gallery-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  position: relative !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

html body .app-shell .gallery-select {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 28px !important;
  padding: 0 8px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #111827 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important;
}

html body .app-shell .gallery-preview {
  display: block !important;
  justify-self: start !important;
  width: 80px !important;
  height: 80px !important;
  min-width: 80px !important;
  min-height: 80px !important;
  max-width: 80px !important;
  max-height: 80px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: #f3f4f6 !important;
  aspect-ratio: 1 / 1 !important;
}

html body .app-shell .gallery-image {
  display: block !important;
  width: 80px !important;
  height: 80px !important;
  min-width: 80px !important;
  min-height: 80px !important;
  max-width: 80px !important;
  max-height: 80px !important;
  object-fit: cover !important;
  aspect-ratio: 1 / 1 !important;
}

html body .app-shell .gallery-body {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 10px !important;
}

html body .app-shell .gallery-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 6px !important;
  min-width: 0 !important;
}

html body .app-shell .gallery-title {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  white-space: normal !important;
  text-overflow: clip !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

html body .app-shell .gallery-time,
html body .app-shell .gallery-group-name,
html body .app-shell .gallery-credit {
  overflow: hidden !important;
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .app-shell .detail-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  margin: 0 !important;
}

html body .app-shell .detail-box {
  display: flex !important;
  align-items: center !important;
  min-height: 32px !important;
  padding: 6px 8px !important;
  overflow: hidden !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 7px !important;
  background: #f8fafc !important;
}

html body .app-shell .detail-box strong {
  display: block !important;
  overflow: hidden !important;
  color: #111827 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .app-shell .detail-text {
  display: none !important;
}

html body .app-shell .gallery-card-group-field {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: #6b7280 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

html body .app-shell .gallery-card-group {
  min-width: 0 !important;
  width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

html body .app-shell .gallery-card .action-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 6px !important;
  margin: 0 !important;
}

html body .app-shell .gallery-card .action-row .button {
  min-width: 0 !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 8px !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (min-width: 1280px) {
  html body .app-shell .gallery-group-section {
    width: 250px !important;
    max-width: 250px !important;
  }
}

/* Compact square result cards: image first, only essential controls below. */
html body .app-shell .gallery-group-head {
  gap: 6px !important;
  padding: 8px 10px !important;
}

html body .app-shell .gallery-group-summary {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 2px 6px !important;
}

html body .app-shell .gallery-group-path-inline {
  grid-column: 1 / -1 !important;
  min-height: 18px !important;
  padding: 0 6px !important;
  font-size: 9px !important;
}

html body .app-shell .gallery-group-actions {
  flex-wrap: nowrap !important;
  gap: 4px !important;
}

html body .app-shell .gallery-group-actions .button {
  min-height: 24px !important;
  height: 24px !important;
  padding: 0 8px !important;
  font-size: 10px !important;
}

html body .app-shell .gallery-group-body {
  gap: 8px !important;
  padding: 10px !important;
}

html body .app-shell .gallery-card {
  grid-template-rows: minmax(0, 1fr) 76px !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
}

html body .app-shell .gallery-preview,
html body .app-shell .gallery-image {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
}

html body .app-shell .gallery-preview {
  justify-self: stretch !important;
  border-bottom: 1px solid #e5e7eb !important;
}

html body .app-shell .gallery-image {
  object-fit: cover !important;
}

html body .app-shell .gallery-body {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: 24px 22px 22px !important;
  gap: 2px 5px !important;
  height: 76px !important;
  padding: 4px 5px !important;
}

html body .app-shell .gallery-head {
  grid-column: 1 / -1 !important;
  min-height: 0 !important;
  gap: 4px !important;
}

html body .app-shell .gallery-title {
  display: block !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .app-shell .gallery-time,
html body .app-shell .gallery-group-name,
html body .app-shell .gallery-credit {
  font-size: 8px !important;
  line-height: 1.1 !important;
}

html body .app-shell .gallery-group-name {
  display: none !important;
}

html body .app-shell .detail-grid,
html body .app-shell .detail-text {
  display: none !important;
}

html body .app-shell .gallery-card-group-field {
  grid-column: 1 / -1 !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 4px !important;
  font-size: 8px !important;
}

html body .app-shell .gallery-card-group {
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 6px !important;
  border-radius: 5px !important;
  font-size: 9px !important;
}

html body .app-shell .gallery-card .action-row {
  grid-column: 1 / -1 !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 4px !important;
}

html body .app-shell .gallery-card .action-row .button {
  min-height: 22px !important;
  height: 22px !important;
  padding: 0 5px !important;
  font-size: 9px !important;
}

html body .app-shell .gallery-select {
  top: 7px !important;
  left: 7px !important;
  min-height: 24px !important;
  padding: 0 7px !important;
  font-size: 10px !important;
}

/* Keep result metadata visible while reducing the card height. */
html body .app-shell .gallery-card {
  grid-template-rows: auto auto !important;
  aspect-ratio: auto !important;
}

html body .app-shell .gallery-preview {
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
}

html body .app-shell .gallery-image {
  height: 100% !important;
}

html body .app-shell .gallery-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: none !important;
  gap: 4px !important;
  height: auto !important;
  padding: 5px !important;
}

html body .app-shell .gallery-head,
html body .app-shell .gallery-card-group-field,
html body .app-shell .gallery-card .action-row {
  grid-column: 1 !important;
}

html body .app-shell .detail-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 3px !important;
  margin: 0 !important;
}

html body .app-shell .detail-box {
  min-height: 30px !important;
  padding: 3px 5px !important;
  border-radius: 5px !important;
}

html body .app-shell .detail-box strong {
  font-size: 8px !important;
  line-height: 1.15 !important;
}

html body .app-shell .gallery-prompt-summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 2px 4px !important;
  margin: 0 !important;
  padding: 3px 5px !important;
  border-radius: 5px !important;
}

html body .app-shell .gallery-prompt-text {
  grid-column: 1 / -1 !important;
  display: block !important;
  max-height: none !important;
  overflow: hidden !important;
  font-size: 8px !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .app-shell .gallery-prompt-copy {
  min-height: 18px !important;
  height: 18px !important;
  padding: 0 6px !important;
  border-radius: 4px !important;
  font-size: 8px !important;
}

/* Result groups and cards fill each row, then wrap at the window edge. */
html body .app-shell .gallery {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  align-items: start !important;
}

html body .app-shell .gallery-group-section {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

html body .app-shell .gallery-group-body {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  align-items: start !important;
}

@media (max-width: 760px) {
  html body .app-shell .gallery,
  html body .app-shell .gallery-group-body {
    grid-template-columns: 1fr !important;
  }
}

/* Keep the empty result group flush with the remaining workspace height. */
html body .app-shell .content {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

html body .app-shell .content > .content-top {
  flex: 0 0 auto !important;
}

html body .app-shell .content > .gallery {
  flex: 1 1 0 !important;
  height: auto !important;
}

html body .app-shell .gallery:has(> .gallery-group-section:only-child .gallery-group-empty) {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: stretch !important;
}

html body .app-shell .gallery > .gallery-group-section:only-child:has(.gallery-group-empty) {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-height: 100% !important;
}

html body .app-shell .gallery > .gallery-group-section:only-child > .gallery-group-body:has(.gallery-group-empty) {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  min-height: 0 !important;
}

html body .app-shell .gallery > .gallery-group-section:only-child .gallery-group-empty {
  width: 100% !important;
  min-height: 100% !important;
  height: 100% !important;
}