/* ================================================================
   MINDSTORM — Editorial Mist UI
   Black and white first; low-saturation cyan is reserved for small states.
   Loaded after the existing page styles; presentation only.
   ================================================================ */

:root {
  color-scheme: light;

  --mist-ink: #0e1110;
  --mist-ink-soft: #28312f;
  --mist-page: #f4f5f4;
  --mist-page-deep: #e7eae9;
  --mist-panel: #ffffff;
  --mist-panel-soft: #f7f8f7;
  --mist-line: #e1e4e2;
  --mist-line-strong: #cbd0cd;
  --mist-muted: #69716e;
  --mist-muted-light: #949b98;
  --mist-cyan-50: #edf5f4;
  --mist-cyan-100: #dcebea;
  --mist-cyan-200: #c7dfdc;
  --mist-cyan-300: #accbc7;
  --mist-cyan-500: #87aaa5;
  --mist-cyan-700: #5f817c;
  --mist-cyan-900: #405e59;
  --mist-danger: #a34f49;
  --mist-success: #557e70;
  --mist-shadow: 0 1px 2px rgba(14,17,16,.035);
  --mist-shadow-float: 0 14px 36px rgba(14,17,16,.09);

  --font-sans: "Inter", "SF Pro Text", "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ui: "Inter", "SF Pro Text", "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-number: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Existing visual-system aliases */
  --ms-ink: var(--mist-ink);
  --ms-ink-soft: var(--mist-ink-soft);
  --ms-teal-900: var(--mist-cyan-900);
  --ms-teal-800: var(--mist-cyan-700);
  --ms-teal-700: var(--mist-cyan-700);
  --ms-teal-600: var(--mist-cyan-500);
  --ms-teal-500: var(--mist-cyan-500);
  --ms-teal-300: var(--mist-cyan-300);
  --ms-teal-200: var(--mist-cyan-200);
  --ms-teal-100: var(--mist-cyan-100);
  --ms-teal-50: var(--mist-cyan-50);
  --ms-white: var(--mist-panel);
  --ms-canvas: var(--mist-page);
  --ms-surface-soft: var(--mist-panel-soft);
  --ms-border: var(--mist-line);
  --ms-border-strong: var(--mist-line-strong);
  --ms-muted: var(--mist-muted);
  --ms-muted-light: var(--mist-muted-light);
  --ms-success: var(--mist-success);
  --ms-shadow-sm: var(--mist-shadow);
  --ms-shadow-md: var(--mist-shadow-float);

  /* Component aliases */
  --color-primary: var(--mist-ink);
  --color-primary-hover: var(--mist-ink-soft);
  --color-primary-soft: var(--mist-cyan-100);
  --color-primary-softer: var(--mist-cyan-50);
  --color-primary-border: var(--mist-cyan-300);
  --color-primary-light: var(--mist-cyan-500);
  --color-surface-white: var(--mist-panel);
  --color-surface-page: var(--mist-page);
  --color-surface-secondary: var(--mist-panel-soft);
  --color-surface-tertiary: #f3f5f4;
  --color-surface-login: var(--mist-panel);
  --color-surface-purple: var(--mist-cyan-50);
  --color-surface-purple-soft: var(--mist-cyan-50);
  --color-surface-darkest: var(--mist-ink);
  --color-surface-panel: #171b1a;
  --color-surface-panel-2: #222927;
  --color-surface-panel-3: #303a37;
  --color-surface-dark: var(--mist-ink);
  --color-surface-banner: var(--mist-ink-soft);
  --color-surface-banner-hover: var(--mist-cyan-900);
  --color-text-primary: var(--mist-ink);
  --color-text-heading: var(--mist-ink);
  --color-text-label: #37403e;
  --color-text-muted: var(--mist-muted);
  --color-text-placeholder: var(--mist-muted-light);
  --color-border: var(--mist-line);
  --color-border-strong: var(--mist-line-strong);
  --color-border-light: #e5e9e7;
  --color-border-subtle: #e8ecea;
  --color-success: var(--mist-success);
  --color-success-bg: var(--mist-cyan-50);
  --color-info-bg: var(--mist-cyan-50);
  --color-history-image-bg: var(--mist-cyan-100);
  --color-history-video-bg: #e4e8e7;
  --sidebar-bg: var(--mist-ink);
  --sidebar-border: #2c3533;
  --bg-light: var(--mist-page);
  --panel-light: var(--mist-panel);
  --text-dark: var(--mist-ink);
  --text-muted: var(--mist-muted);
  --text-label: #37403e;
  --text-placeholder: var(--mist-muted-light);
  --brand: var(--mist-ink);
  --brand-h: var(--mist-ink-soft);
  --brand-indigo: var(--mist-ink);
  --brand-purple: var(--mist-muted);
  --brand-violet: var(--mist-muted);
  --brand-rose: var(--mist-muted-light);
  --brand-blue: var(--mist-ink-soft);
  --brand-gradient: none;
  --color-brand-gradient: none;
  --color-bottom-bar-gradient: none;
  --accent: var(--mist-cyan-700);
  --accent-h: var(--mist-cyan-900);
  --focus: var(--mist-cyan-700);
}

html,
body {
  background: var(--mist-page) !important;
}

body {
  color: var(--mist-ink);
  font-family: var(--font-ui);
  letter-spacing: -.012em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.main-content :where(a:not([class*="btn"])) {
  color: var(--mist-ink-soft);
  text-decoration-color: currentColor;
}

.main-content :where(a:not([class*="btn"])):hover {
  color: var(--mist-ink);
}

::selection {
  color: var(--mist-ink);
  background: var(--mist-cyan-200);
}

* {
  scrollbar-color: var(--mist-line-strong) transparent;
}

:where(button, a, input, textarea, select, [contenteditable="true"]):focus-visible {
  outline: 2px solid var(--mist-cyan-700) !important;
  outline-offset: 2px;
}

.main-content {
  color: var(--mist-ink) !important;
  background: #f8f9f8 !important;
  animation: mist-page-in 300ms ease-out both;
}

/* Editorial headers: white, flat and typographically quiet. */
:is(.home-header, .projects-header, .history-header, .profile-header, .canvas-header) {
  min-height: 64px;
  height: 64px;
  padding-inline: clamp(24px, 3vw, 48px) !important;
  background: #fff !important;
  border-color: var(--mist-line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  animation: mist-header-in 380ms cubic-bezier(.22, 1, .36, 1) both;
}

:is(.home-breadcrumb, .projects-breadcrumb, .history-breadcrumb, .profile-breadcrumb, .canvas-breadcrumb) {
  gap: 10px !important;
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: -.018em !important;
}

:is(.home-breadcrumb, .projects-breadcrumb, .history-breadcrumb, .profile-breadcrumb, .canvas-breadcrumb)
  :is(a, span, .home-breadcrumb-item) {
  color: var(--mist-muted-light) !important;
  font-weight: 450 !important;
  text-decoration: none !important;
}

:is(.home-breadcrumb, .projects-breadcrumb, .history-breadcrumb, .profile-breadcrumb, .canvas-breadcrumb)
  :is(.active, [aria-current="page"]) {
  color: var(--mist-ink) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: -.025em !important;
}

:is(.home-breadcrumb-sep, .profile-breadcrumb-sep) {
  color: var(--mist-line-strong) !important;
  font-weight: 400 !important;
}

:is(h1, h2, h3, .home-hero-title, .projects-title, .history-title, .profile-title) {
  font-family: var(--font-sans) !important;
  color: var(--mist-ink);
  letter-spacing: -.035em !important;
  text-wrap: balance;
}

:is(.home-hero-title, .projects-title, .history-title, .profile-title) {
  font-weight: 560 !important;
  line-height: 1.04 !important;
}

/* Shared header action: same treatment, motion and dimensions as the composer CTA. */
.header-library-btn,
.canvas-header-action-btn.header-library-btn {
  height: 36px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #fff !important;
  background: var(--mist-ink) !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-family: var(--font-ui) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, transform 180ms cubic-bezier(.22,1,.36,1) !important;
}

.header-library-btn:hover,
.canvas-header-action-btn.header-library-btn:hover {
  color: var(--mist-ink) !important;
  background: var(--mist-cyan-200) !important;
  transform: none !important;
}

.header-library-btn:active,
.canvas-header-action-btn.header-library-btn:active {
  transform: scale(.985) !important;
}

.header-library-btn svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  transition: transform 400ms cubic-bezier(.16,1,.3,1);
}

.header-library-btn:hover svg {
  transform: translateX(3px);
}

/* Near-black sidebar, with the muted cyan used only as a state signal. */
.sidebar {
  color: #f4f6f5 !important;
  background: var(--mist-ink) !important;
  border-color: #2b3432 !important;
}

.sidebar :is(.sidebar-nav-item, .sidebar-action-btn) {
  border: 1px solid transparent !important;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease !important;
}

.sidebar :is(.sidebar-nav-item, .sidebar-action-btn):hover {
  color: #fff !important;
  background: rgba(199,223,220,.075) !important;
  border-color: rgba(199,223,220,.12) !important;
}

.sidebar :is(.sidebar-nav-item.active, .sidebar-nav-item[aria-current="page"]) {
  color: #fff !important;
  background: rgba(135,170,165,.16) !important;
  border-color: rgba(172,203,199,.24) !important;
  box-shadow: inset 3px 0 var(--mist-cyan-300) !important;
}

/* Creation mode picker lives outside the sidebar DOM, so keep it explicitly light. */
.sidebar-create-panel {
  min-width: 190px !important;
  padding: 6px !important;
  color: var(--mist-ink) !important;
  background: #fff !important;
  border: 1px solid var(--mist-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 30px rgba(14,17,16,.10) !important;
  z-index: 220 !important;
}

.sidebar-create-option {
  color: var(--mist-ink) !important;
  background: #fff !important;
  border: 0 !important;
}

.sidebar-create-option:hover,
.sidebar-create-option:focus-visible {
  background: var(--mist-cyan-100) !important;
}

.sidebar-create-label {
  color: var(--mist-ink) !important;
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.sidebar-create-desc {
  color: var(--mist-muted) !important;
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

/* Primary actions stay black; cyan appears as a quiet hover response. */
:is(
  .home-start-btn,
  .home-agent-accept-btn,
  .header-library-btn,
  .projects-new-btn,
  .projects-empty-btn,
  .history-action-btn.primary,
  .profile-save-btn,
  .login-btn,
  .login-submit-btn,
  .download-btn,
  .ref-picker-confirm,
  .right-panel-submit-btn,
  .right-panel-generate-btn,
  .classic-submit-btn,
  .agent-chat-send,
  .profile-modal-save,
  .upgrade-tier-btn.primary,
  .upgrade-tier-btn.featured-btn,
  .project-card-btn.confirm,
  .primary-btn,
  .submit-btn,
  .btn-primary
) {
  color: #fff !important;
  background: var(--mist-ink) !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms cubic-bezier(.22,1,.36,1) !important;
}

:is(
  .home-start-btn,
  .home-agent-accept-btn,
  .header-library-btn,
  .projects-new-btn,
  .projects-empty-btn,
  .history-action-btn.primary,
  .profile-save-btn,
  .login-btn,
  .login-submit-btn,
  .download-btn,
  .ref-picker-confirm,
  .right-panel-submit-btn,
  .right-panel-generate-btn,
  .classic-submit-btn,
  .agent-chat-send,
  .profile-modal-save,
  .upgrade-tier-btn.primary,
  .upgrade-tier-btn.featured-btn,
  .project-card-btn.confirm,
  .primary-btn,
  .submit-btn,
  .btn-primary
):hover:not(:disabled) {
  color: var(--mist-ink) !important;
  background: var(--mist-cyan-200) !important;
  border: 0 !important;
  transform: none !important;
}

:is(
  .home-start-btn,
  .home-agent-accept-btn,
  .header-library-btn,
  .projects-new-btn,
  .history-action-btn.primary,
  .profile-save-btn,
  .login-btn,
  .login-submit-btn,
  .download-btn,
  .ref-picker-confirm,
  .right-panel-submit-btn,
  .right-panel-generate-btn,
  .classic-submit-btn,
  .agent-chat-send,
  .profile-modal-save,
  .project-card-btn.confirm,
  .primary-btn,
  .submit-btn,
  .btn-primary
):active:not(:disabled) {
  transform: translateY(0) scale(.99) !important;
}

#submitBtn {
  color: #fff !important;
  background: var(--mist-ink) !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: color 180ms ease, background 180ms ease, transform 180ms cubic-bezier(.22,1,.36,1) !important;
}

#submitBtn:hover:not(:disabled) {
  color: var(--mist-ink) !important;
  background: var(--mist-cyan-200) !important;
  transform: none !important;
}

/*
 * Button audit — secondary controls are filled surfaces, not outlined boxes.
 * Field-like controls (inputs, selects and dropdown triggers) intentionally keep
 * a boundary because their affordance is different from a command button.
 */
:is(
  .ghost-btn,
  .home-search-btn,
  .home-format-chip,
  .home-gen-opt,
  .home-task-action-btn,
  .home-task-more-btn,
  .home-bar-toggle,
  .ref-upload-btn,
  .ref-library-upload-btn,
  .history-tab,
  .history-action-btn:not(.primary):not(.danger),
  .project-card-btn:not(.confirm):not(.delete),
  .profile-modal-billing-btn,
  .profile-modal-cancel,
  .upgrade-tier-btn.outline,
  .upgrade-back-btn,
  .login-sms-btn,
  .login-social-btn,
  .rp-pop-chip,
  .right-panel-chip,
  .right-panel-preset-chip,
  .right-panel-media-lib-btn,
  .classic-download-btn,
  .preset-chip,
  .reference-item button,
  .media-card-actions .copy-btn,
  .sidebar-edge-toggle,
  .rp-media-pick-add-all,
  .rp-media-pick-cancel,
  .video-force-download-btn,
  .video-retry-btn
) {
  color: var(--mist-ink-soft) !important;
  background: #edf0ee !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: color 180ms ease, background 180ms ease, transform 180ms cubic-bezier(.22,1,.36,1) !important;
}

:is(
  .ghost-btn,
  .home-search-btn,
  .home-format-chip,
  .home-gen-opt,
  .home-task-action-btn,
  .home-task-more-btn,
  .home-bar-toggle,
  .ref-upload-btn,
  .ref-library-upload-btn,
  .history-tab,
  .history-action-btn:not(.primary):not(.danger),
  .project-card-btn:not(.confirm):not(.delete),
  .profile-modal-billing-btn,
  .profile-modal-cancel,
  .upgrade-tier-btn.outline,
  .upgrade-back-btn,
  .login-sms-btn,
  .login-social-btn,
  .rp-pop-chip,
  .right-panel-chip,
  .right-panel-preset-chip,
  .right-panel-media-lib-btn,
  .classic-download-btn,
  .preset-chip,
  .reference-item button,
  .media-card-actions .copy-btn,
  .sidebar-edge-toggle,
  .rp-media-pick-add-all,
  .rp-media-pick-cancel,
  .video-force-download-btn,
  .video-retry-btn
):hover:not(:disabled) {
  color: var(--mist-ink) !important;
  background: var(--mist-cyan-100) !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

#checkBtn {
  color: var(--mist-ink-soft) !important;
  background: #edf0ee !important;
  border: 0 !important;
  box-shadow: none !important;
}

#checkBtn:hover:not(:disabled) {
  color: var(--mist-ink) !important;
  background: var(--mist-cyan-100) !important;
}

:is(
  .history-tab.active,
  .home-format-chip.active,
  .home-format-chip[aria-selected="true"],
  .home-gen-opt.active,
  .home-gen-opt[aria-selected="true"],
  .rp-pop-chip.active,
  .right-panel-chip.active,
  .right-panel-preset-chip.active,
  .preset-chip.active,
  .canvas-tab-bar .top-tab.active
) {
  color: var(--mist-ink) !important;
  background: var(--mist-cyan-200) !important;
  border: 0 !important;
}

:is(
  .history-action-btn.danger,
  .project-card-btn.delete,
  .home-task-delete-btn,
  .sidebar-logout-btn,
  .media-card-actions .delete-btn
) {
  color: var(--mist-danger) !important;
  background: #f5e9e7 !important;
  border: 0 !important;
  box-shadow: none !important;
}

:is(
  .history-action-btn.danger,
  .project-card-btn.delete,
  .home-task-delete-btn,
  .sidebar-logout-btn,
  .media-card-actions .delete-btn
):hover:not(:disabled) {
  color: #7d3834 !important;
  background: #efd9d6 !important;
  border: 0 !important;
}

/* Icon-only actions use a quiet filled hit area; selected tools use cyan. */
:is(
  .toolbar-icon-btn,
  .zoom-util-btn,
  .right-panel-close,
  .slide-panel-close,
  .fullscreen-close,
  .block-btn,
  .ref-picker-close,
  .history-card-download,
  .history-lightbox-close,
  .profile-modal-close,
  .profile-modal-close-btn,
  .credits-modal-close,
  .upgrade-modal-close,
  .modal-close-btn,
  .home-lightbox-close
) {
  border: 0 !important;
  box-shadow: none !important;
}

:is(
  .toolbar-icon-btn,
  .zoom-util-btn,
  .right-panel-close,
  .slide-panel-close,
  .fullscreen-close,
  .ref-picker-close,
  .history-card-download,
  .profile-modal-close,
  .profile-modal-close-btn,
  .credits-modal-close,
  .upgrade-modal-close,
  .modal-close-btn
) {
  color: var(--mist-muted) !important;
  background: #edf0ee !important;
}

:is(
  .toolbar-icon-btn,
  .zoom-util-btn,
  .right-panel-close,
  .slide-panel-close,
  .fullscreen-close,
  .ref-picker-close,
  .history-card-download,
  .profile-modal-close,
  .profile-modal-close-btn,
  .credits-modal-close,
  .upgrade-modal-close,
  .modal-close-btn
):hover {
  color: var(--mist-ink) !important;
  background: var(--mist-cyan-100) !important;
}

.toolbar-icon-btn.active {
  color: var(--mist-ink) !important;
  background: var(--mist-cyan-200) !important;
  border: 0 !important;
}

/* The sidebar primary sits on black, so it inverts the main CTA treatment. */
.sidebar-new-project {
  color: var(--mist-ink) !important;
  background: #f1f3f2 !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: color 180ms ease, background 180ms ease, transform 180ms cubic-bezier(.22,1,.36,1) !important;
}

.sidebar-new-project:hover {
  color: var(--mist-ink) !important;
  background: var(--mist-cyan-200) !important;
  transform: none !important;
}

.sidebar-new-project:active {
  transform: scale(.99) !important;
}

.sub-banner-content button {
  color: var(--mist-ink) !important;
  background: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: color 180ms ease, background 180ms ease, transform 180ms cubic-bezier(.22,1,.36,1) !important;
}

.sub-banner-content button:hover {
  color: var(--mist-ink) !important;
  background: var(--mist-cyan-200) !important;
  border: 0 !important;
}

.canvas-tab-bar .top-tab {
  border: 0 !important;
  background: transparent !important;
}

.canvas-tab-bar .top-tab:hover {
  background: #edf0ee !important;
}

.canvas-tab-bar .top-tab.active {
  background: var(--mist-cyan-200) !important;
}

:is(input, textarea, select, [contenteditable="true"]):focus,
:is(input, textarea, select, [contenteditable="true"]):focus-visible {
  border-color: var(--mist-cyan-500) !important;
  box-shadow: 0 0 0 2px rgba(135,170,165,.12) !important;
}

/* Shared surfaces: flat white sheets on a cool gray canvas. */
:is(
  .home-prompt-box,
  .project-card,
  .history-card,
  .profile-card,
  .profile-modal,
  .credits-modal,
  .upgrade-modal,
  .ref-picker-panel
) {
  color: var(--mist-ink) !important;
  background: var(--mist-panel) !important;
  border-color: var(--mist-line) !important;
  box-shadow: var(--mist-shadow) !important;
}

:is(.project-card, .history-card, .profile-card) {
  border-radius: 18px !important;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms cubic-bezier(.22,1,.36,1) !important;
  animation: mist-item-in 380ms cubic-bezier(.22,1,.36,1) both;
}

:is(.project-card, .history-card, .profile-card):hover {
  border-color: var(--mist-cyan-500) !important;
  box-shadow: var(--mist-shadow) !important;
  transform: none !important;
}

:is(.projects-grid, .history-grid, .profile-content) > :nth-child(2) { animation-delay: 35ms; }
:is(.projects-grid, .history-grid, .profile-content) > :nth-child(3) { animation-delay: 65ms; }
:is(.projects-grid, .history-grid, .profile-content) > :nth-child(n + 4) { animation-delay: 90ms; }

/* Home composer and task stream remain function-first. */
.home-bottom-bar-inner {
  background: #fff !important;
  border-color: var(--mist-line) !important;
  box-shadow: 0 8px 24px rgba(14,17,16,.055) !important;
  backdrop-filter: none !important;
}

.home-prompt-box:focus-within {
  border-color: var(--mist-cyan-500) !important;
  box-shadow: 0 0 0 2px rgba(135,170,165,.10) !important;
}

/* The editor uses the outer composer as its focus ring; no inset second frame. */
.home-prompt-editor:focus,
.home-prompt-editor:focus-visible {
  width: 100% !important;
  margin-right: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Compact composer is one stable row; controls do not resize between states. */
.workspace-mode .home-bottom-bar.collapsed .home-bottom-bar-inner {
  max-width: 800px !important;
  width: calc(100% - 64px) !important;
}

.workspace-mode .home-bottom-bar.collapsed .home-prompt-box {
  position: relative;
  min-height: 52px !important;
  height: 52px;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: 52px !important;
  align-items: center !important;
  overflow: hidden !important;
}

.workspace-mode .home-bottom-bar.collapsed
  :is(.home-reference-entry, .home-ref-preview-bar, .home-agent-messages, .home-mode-area) {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  visibility: hidden !important;
}

.workspace-mode .home-bottom-bar.collapsed .home-prompt-editor {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  min-height: 52px !important;
  max-height: 52px !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 14px 12px 12px 18px !important;
  line-height: 26px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.workspace-mode .home-bottom-bar.collapsed .home-prompt-actions {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  height: 52px !important;
  min-width: 0 !important;
  padding: 8px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  border: 0 !important;
  gap: 8px !important;
}

.workspace-mode .home-bottom-bar.collapsed .home-prompt-right {
  flex-wrap: nowrap !important;
  gap: 8px !important;
  margin: 0 !important;
}

.workspace-mode .home-bottom-bar.collapsed .home-start-btn {
  width: auto !important;
  min-width: 0 !important;
  height: 36px !important;
  padding-inline: 20px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

.workspace-mode .home-bottom-bar.collapsed .home-bar-toggle {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
}

.workspace-mode .home-bottom-bar.collapsed .home-bar-toggle svg {
  width: 14px !important;
  height: 14px !important;
}

/* Remove the previous atmospheric layer. The workspace should read as paper. */
.home-center-group,
.workspace-mode .home-center-group {
  background: #f8f9f8 !important;
}

.home-center-group::before,
.home-center-group::after,
.home-hero::before {
  content: none !important;
  display: none !important;
  animation: none !important;
  background: none !important;
}

.home-workspace,
.home-task-list,
.home-tasks {
  background: transparent !important;
}

/* Field-like controls keep a quiet boundary; command buttons are filled above. */
:is(
  .home-format-trigger,
  .home-format-select
) {
  color: var(--mist-ink-soft) !important;
  background-color: #fff !important;
  border-color: var(--mist-line) !important;
  box-shadow: none !important;
}

:is(
  .home-format-trigger.active,
  .home-format-trigger[aria-expanded="true"],
  .home-format-select.active
) {
  color: var(--mist-ink) !important;
  background-color: var(--mist-cyan-100) !important;
  border-color: var(--mist-cyan-300) !important;
}

:is(.home-format-popover, .home-mention-panel, .home-task-more-menu) {
  background: #fff !important;
  border-color: var(--mist-line) !important;
  box-shadow: 0 12px 30px rgba(14,17,16,.09) !important;
}

:is(.home-format-popover, .home-mention-panel) :is(button, [role="option"], .home-format-chip) {
  background-color: #fff !important;
  background-image: none !important;
}

:is(.home-format-popover, .home-mention-panel) :is(button, [role="option"], .home-format-chip):hover,
:is(.home-format-popover, .home-mention-panel) :is(.active, [aria-selected="true"]) {
  background-color: var(--mist-cyan-100) !important;
}

.home-task-card,
.home-task-card:hover {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.home-task-meta,
.home-task-time {
  color: var(--mist-muted) !important;
}

:is(
  .home-format-trigger .home-format-trigger-val,
  .home-format-slider-label,
  .projects-count,
  .history-card-type,
  .profile-card-desc,
  .profile-field > span,
  .right-panel-upload-text,
  .drop-hint,
  .agent-chat-model-tag
) {
  color: var(--mist-muted) !important;
}

.home-task-status {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -.018em !important;
}

.home-task-prompt-preview {
  color: var(--mist-ink) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  letter-spacing: -.014em !important;
}

.home-task-card :is(.home-task-action-btn, .home-task-more-btn) {
  color: var(--mist-ink) !important;
  background: #edf0ee !important;
  border: 0 !important;
}

.home-task-card :is(.home-task-action-btn, .home-task-more-btn):hover {
  background: var(--mist-cyan-100) !important;
  border: 0 !important;
}

/* Project/history media moves only a fraction, avoiding the previous "floating card" feel. */
:is(.project-card-preview img, .history-card-media img, .history-card-media video) {
  transition: transform 520ms cubic-bezier(.22,1,.36,1), filter 260ms ease !important;
}

:is(.project-card, .history-card):hover :is(.project-card-preview img, .history-card-media img, .history-card-media video) {
  transform: scale(1.012);
  filter: saturate(.94);
}

.history-card.selected,
.project-card:focus-within {
  border-color: var(--mist-cyan-700) !important;
  box-shadow: 0 0 0 3px rgba(135,170,165,.16) !important;
}

/* Profile */
.profile-layout {
  width: min(1080px, calc(100% - 48px));
  margin-inline: auto;
  padding-inline: 0 !important;
}

.profile-nav {
  padding: 7px;
  border: 1px solid var(--mist-line);
  border-radius: 16px;
  background: rgba(248,249,248,.58);
}

.profile-nav-item.active {
  color: var(--mist-ink) !important;
  background: var(--mist-cyan-200) !important;
}

.profile-subscription-banner {
  color: #fff !important;
  background: var(--mist-ink) !important;
  border: 1px solid #293330 !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

/* Canvas: gray workspace, crisp white blocks, cyan only for connection states. */
.canvas-container {
  background: var(--mist-page-deep) !important;
}

.canvas-grid {
  opacity: .35 !important;
  background-image: radial-gradient(circle, rgba(95,129,124,.52) .8px, transparent .9px) !important;
}

:is(.canvas-bottom-toolbar, .canvas-zoom-utility, .canvas-right-panel, .slide-panel, .context-menu, .rp-pop) {
  color: var(--mist-ink) !important;
  background: rgba(248,249,248,.94) !important;
  border-color: var(--mist-line) !important;
  box-shadow: var(--mist-shadow-float) !important;
  backdrop-filter: blur(18px) saturate(108%) !important;
}

.battery-block {
  background: var(--mist-panel) !important;
  border-color: var(--mist-line) !important;
  box-shadow: var(--mist-shadow) !important;
}

.battery-block.selected {
  border-color: var(--mist-cyan-700) !important;
  box-shadow: 0 0 0 3px rgba(135,170,165,.2), var(--mist-shadow) !important;
}

.block-port:is(.connected, :hover),
.toolbar-icon-btn.active {
  border-color: var(--mist-cyan-700) !important;
}

/* Login: preserve the video artwork; simplify the form into a quiet white sheet. */
.login-form-panel {
  background: #f8f9f8 !important;
}

/* Flat color policy: no decorative color gradients. */
.sidebar-quota-bar-fill {
  background: var(--mist-cyan-300) !important;
}

.project-card-preview,
.project-card:nth-child(3n + 2) .project-card-preview,
.project-card:nth-child(3n + 3) .project-card-preview,
.right-panel-upload-gradient,
.block-canvas {
  background: var(--mist-page-deep) !important;
}

.profile-modal-banner,
.profile-subscription-banner {
  background: var(--mist-ink) !important;
}

.login-form-panel::before,
.login-btn::after,
.home-task-card-header::after,
.home-task-reference-media::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.home-task-card-header,
.home-task-card-header.success,
.home-task-card-header.failed,
.home-task-reference-media,
.home-task-result {
  background: transparent !important;
  background-image: none !important;
}

.home-task-card-header {
  border-color: var(--mist-line) !important;
}

.login-brand-name {
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  animation: none !important;
}

.login-form-inner {
  background: rgba(248,249,248,.92) !important;
  border-color: var(--mist-line) !important;
  box-shadow: var(--mist-shadow) !important;
  animation: mist-form-in 440ms cubic-bezier(.22,1,.36,1) both;
}

.login-tabs {
  background: var(--mist-panel-soft) !important;
  border-color: var(--mist-line) !important;
  border-radius: 999px !important;
}

.login-tab {
  border-radius: 999px !important;
}

.login-tab.active {
  color: var(--mist-ink) !important;
  background: var(--mist-panel) !important;
}

/* Modals: a small scale/fade only; no dramatic bounce. */
:is(.profile-modal-overlay, .credits-modal-overlay, .upgrade-modal-overlay, .ref-picker-overlay) {
  background: rgba(14,17,16,.48) !important;
  backdrop-filter: blur(8px) saturate(80%) !important;
}

:is(.profile-modal, .credits-modal, .upgrade-modal, .ref-picker-panel) {
  animation: mist-dialog-in 240ms cubic-bezier(.22,1,.36,1) both;
}

@keyframes mist-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mist-header-in {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: none; }
}

@keyframes mist-item-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes mist-form-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes mist-dialog-in {
  from { opacity: 0; transform: translateY(6px) scale(.992); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 768px) {
  :is(.home-header, .projects-header, .history-header, .profile-header, .canvas-header) {
    min-height: 52px;
    height: 52px;
    padding-inline: 20px !important;
  }

  .workspace-mode .home-bottom-bar.collapsed .home-bottom-bar-inner {
    width: calc(100% - 32px) !important;
  }

  .profile-layout {
    width: min(100% - 28px, 680px);
  }
  .profile-nav {
    width: 100%;
    overflow-x: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-content,
  :is(.home-header, .projects-header, .history-header, .profile-header, .canvas-header),
  :is(.project-card, .history-card, .profile-card),
  .login-form-inner,
  :is(.profile-modal, .credits-modal, .upgrade-modal, .ref-picker-panel) {
    animation: none !important;
  }
  :is(button, a, input, textarea, select, [contenteditable="true"], .project-card, .history-card, .profile-card) {
    transition-duration: .01ms !important;
  }
}