/* FIN NEXUS liquid-glass preview.
   Visual overrides only: no workflow hooks, form state or interaction logic. */

:root {
  --liquid-ink: #1e2b32;
  --liquid-muted: #64727a;
  --liquid-line: rgba(255, 255, 255, .7);
  --liquid-line-soft: rgba(112, 143, 153, .2);
  --liquid-glass: rgba(255, 255, 255, .56);
  --liquid-glass-strong: rgba(255, 255, 255, .72);
  --liquid-glass-soft: rgba(247, 252, 252, .42);
  --liquid-cyan: #3e8796;
  --liquid-cyan-soft: rgba(91, 170, 184, .15);
  --liquid-gold: #a7783e;
  --liquid-gold-soft: rgba(206, 164, 103, .16);
  --liquid-shadow: 0 18px 42px rgba(52, 78, 88, .12), 0 3px 10px rgba(52, 78, 88, .06), inset 0 1px 0 rgba(255, 255, 255, .88);
  --liquid-shadow-raised: 0 26px 58px rgba(43, 72, 83, .18), 0 8px 18px rgba(43, 72, 83, .08), inset 0 1px 0 rgba(255, 255, 255, .96);
  --liquid-blur: blur(24px) saturate(1.35);
  --surface: var(--liquid-glass);
  --surface-soft: rgba(255, 255, 255, .4);
  --ink: var(--liquid-ink);
  --muted: var(--liquid-muted);
  --line: var(--liquid-line-soft);
  --line-strong: rgba(92, 125, 136, .3);
  --gold: var(--liquid-gold);
  --gold-dark: #795326;
  --gold-soft: var(--liquid-gold-soft);
  --shadow: var(--liquid-shadow);
}

html {
  background: #e7eff0;
}

body {
  color: var(--liquid-ink);
  background:
    linear-gradient(124deg, rgba(209, 236, 239, .9) 0%, rgba(239, 245, 245, .52) 36%, rgba(250, 241, 229, .58) 72%, rgba(213, 233, 237, .72) 100%),
    #e9f0f1;
  background-attachment: fixed;
}

body,
.app-shell,
.main-content,
.view {
  min-width: 0;
}

.app-shell {
  background: transparent;
}

.main-content {
  position: relative;
  overflow-x: clip;
  background: transparent !important;
}

.main-content::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .22), transparent 34%),
    linear-gradient(292deg, rgba(95, 174, 187, .1), transparent 42%),
    linear-gradient(24deg, rgba(219, 170, 104, .09), transparent 38%);
}

/* Shared glass surfaces */
.sidebar,
.control-panel,
.media-workspace,
.commerce-workspace,
.image-workspace,
.outfit-workspace,
.talking-workspace,
.account-identity,
.account-detail,
.admin-section,
.admin-stat,
.chat-layout,
.seo-faq,
.beta-notice,
.install-guide,
.creation-item,
.gallery-card {
  border: 1px solid var(--liquid-line) !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, var(--liquid-glass-strong), var(--liquid-glass-soft)) !important;
  box-shadow: var(--liquid-shadow) !important;
  -webkit-backdrop-filter: var(--liquid-blur);
  backdrop-filter: var(--liquid-blur);
}

.control-panel,
.creation-item,
.account-detail-quota {
  border-top: 1px solid rgba(255, 255, 255, .9) !important;
}

.control-panel::before,
.media-workspace::before,
.admin-section::before,
.account-identity::before,
.seo-faq::before {
  display: none !important;
}

/* Navigation and page chrome */
.sidebar {
  margin: 12px 0 12px 12px;
  height: calc(100dvh - 24px);
  border-color: rgba(255, 255, 255, .78) !important;
  background: linear-gradient(160deg, rgba(255, 255, 255, .7), rgba(231, 243, 244, .44)) !important;
}

.brand {
  border-bottom-color: rgba(91, 123, 133, .15) !important;
}

.nav-list {
  gap: 7px;
}

.nav-item {
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #627178 !important;
  box-shadow: none !important;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.nav-item:hover {
  border-color: rgba(255, 255, 255, .68) !important;
  background: rgba(255, 255, 255, .38) !important;
  color: #28464e !important;
}

.nav-item.active {
  border-color: rgba(255, 255, 255, .92) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(139, 200, 209, .2)) !important;
  color: #244750 !important;
  box-shadow: 0 8px 20px rgba(49, 91, 101, .12), inset 0 1px 0 #fff !important;
}

.nav-icon {
  border-color: rgba(84, 138, 149, .24) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, .45) !important;
  color: #487b85 !important;
}

.nav-item.active .nav-icon {
  border-color: rgba(70, 137, 150, .32) !important;
  background: rgba(112, 184, 196, .18) !important;
  color: #285f69 !important;
}

.connection {
  border-color: rgba(255, 255, 255, .7) !important;
  background: rgba(255, 255, 255, .34) !important;
}

.topbar {
  border-bottom-color: rgba(81, 116, 126, .16) !important;
}

.topbar #pageTitle,
.toolkit-heading,
.section-heading h2,
.admin-header h2,
.chat-header h2,
.account-section-heading h2 {
  color: var(--liquid-ink) !important;
}

.account-button,
.intro-replay,
.icon-button {
  border: 1px solid rgba(255, 255, 255, .82) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .54) !important;
  color: #35565e !important;
  box-shadow: 0 7px 18px rgba(47, 80, 89, .1), inset 0 1px 0 rgba(255, 255, 255, .94) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
}

/* Workbench: a single glass material with distinct ambient color per card. */
#toolkitView .tool-card {
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .86) !important;
  border-top: 1px solid rgba(255, 255, 255, .98) !important;
  border-radius: 8px !important;
  clip-path: inset(0 round 8px) !important;
  background: linear-gradient(138deg, rgba(255, 255, 255, .7), rgba(229, 242, 244, .3)) !important;
  box-shadow: var(--liquid-shadow-raised) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.42);
  backdrop-filter: blur(26px) saturate(1.42);
  transition: transform 240ms cubic-bezier(.2,.75,.25,1), box-shadow 240ms ease, border-color 240ms ease !important;
}

#toolkitView .tool-card-media {
  inset: 1px !important;
  overflow: hidden !important;
  border-radius: 7px !important;
  clip-path: inset(0 round 7px) !important;
  transform: translateZ(0);
}

#toolkitView .tool-card-media img {
  border-radius: 7px !important;
}

#toolkitView .tool-card::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  content: "";
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .94), inset 0 -1px 0 rgba(64, 123, 134, .12);
}

@media (hover: hover) and (pointer: fine) {
  #toolkitView .tool-card:hover,
  .gallery-card:hover,
  .creation-item:hover,
  .account-detail:hover,
  .admin-stat:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 32px 66px rgba(43, 72, 83, .2), 0 10px 22px rgba(43, 72, 83, .09), inset 0 1px 0 #fff !important;
  }
}

.gallery-card,
.creation-item,
.account-detail,
.admin-stat {
  transition: transform 220ms cubic-bezier(.2,.75,.25,1), box-shadow 220ms ease, border-color 220ms ease;
}

/* Tool interiors */
.product-intro,
.toolkit-header,
.account-workspace,
.inspiration-header,
.tool-header-row,
.studio-heading {
  border-color: rgba(78, 115, 125, .15) !important;
}

.media-workspace,
.commerce-workspace,
.image-workspace,
.outfit-workspace,
.talking-workspace {
  color: var(--liquid-ink) !important;
}

.media-workspace h2,
.media-workspace .section-heading h2,
.dropzone-empty strong {
  color: var(--liquid-ink) !important;
}

.media-workspace .step-number,
.section-kicker,
.eyebrow,
.tool-index,
.control-index {
  color: var(--liquid-gold) !important;
}

.dropzone,
.image-reference-zone,
.talking-photo-zone,
.audio-dropzone,
.video-person-upload-source,
.commerce-dropzone {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, rgba(239, 248, 249, .54), rgba(255, 255, 255, .28)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88), inset 0 -16px 40px rgba(73, 143, 155, .05) !important;
}

.dropzone:hover,
.dropzone.dragging,
.image-reference-zone:hover,
.talking-photo-zone:hover,
.audio-dropzone:hover {
  border-color: rgba(68, 145, 159, .46) !important;
  background: rgba(255, 255, 255, .56) !important;
}

.result-stage,
.commerce-result-stage,
.image-result-stage,
.outfit-result-stage,
.talking-result-stage,
.video-person-result-stage,
.brand-ad-result-stage,
.image-preview-stage,
.video-preview-stage {
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 8px !important;
  background: linear-gradient(145deg, #17272d, #10191d) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 14px 32px rgba(29, 53, 61, .15);
}

.text-input,
textarea,
select,
.segmented-control,
.reference-source-tabs,
.ratio-options,
.option-checks label,
.control-summary,
.estimate-summary,
.actual-cost-summary,
.commerce-summary,
.image-summary,
.talking-summary {
  border-color: rgba(91, 127, 137, .22) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, .42) !important;
  color: var(--liquid-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62);
}

.text-input:focus,
textarea:focus,
select:focus,
.chat-composer:focus-within {
  border-color: rgba(62, 135, 150, .52) !important;
  background: rgba(255, 255, 255, .7) !important;
  box-shadow: 0 0 0 3px rgba(74, 155, 170, .12), inset 0 1px 0 rgba(255, 255, 255, .82) !important;
}

.segmented-control button,
.reference-source-tab,
.ratio-button {
  border-radius: 6px !important;
}

.segmented-control button.active,
.reference-source-tab.active,
.ratio-button.active {
  background: rgba(255, 255, 255, .78) !important;
  color: #285b65 !important;
  box-shadow: 0 5px 12px rgba(50, 91, 100, .12), inset 0 1px 0 #fff !important;
}

.primary-button,
.generate-button,
.auth-submit,
.install-guide-next,
.install-guide-install {
  border: 1px solid rgba(31, 85, 96, .4) !important;
  border-radius: 7px !important;
  background: linear-gradient(135deg, #2c6875, #23515b) !important;
  color: #fff !important;
  box-shadow: 0 9px 20px rgba(35, 81, 91, .2), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}

.secondary-button,
.reset-button,
.draft-button,
.text-button,
.chat-quick-prompts button {
  border-color: rgba(255, 255, 255, .82) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, .5) !important;
  color: #3c626b !important;
  box-shadow: 0 6px 14px rgba(48, 82, 90, .08), inset 0 1px 0 rgba(255, 255, 255, .86) !important;
}

/* Collections, account and admin */
.gallery-card,
.creation-item {
  overflow: hidden;
}

.account-avatar {
  background: linear-gradient(145deg, rgba(41, 100, 113, .94), rgba(31, 69, 78, .96)) !important;
  color: #f0d39d !important;
  box-shadow: 0 10px 24px rgba(37, 84, 94, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
}

.admin-list,
.faq-list {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .74) !important;
  border-radius: 7px !important;
  background: rgba(105, 140, 150, .12) !important;
}

.admin-row,
.faq-list details {
  background: rgba(255, 255, 255, .48) !important;
}

.faq-list details + details {
  border-top: 1px solid rgba(92, 126, 136, .15);
}

.faq-list summary::after {
  color: var(--liquid-cyan) !important;
}

/* Assistant uses the same light glass system instead of a separate dark UI. */
.chat-layout {
  overflow: hidden;
}

.chat-memory-panel {
  border-right: 1px solid rgba(255, 255, 255, .6) !important;
  background: linear-gradient(165deg, rgba(32, 78, 87, .9), rgba(35, 66, 73, .82)) !important;
}

.chat-workspace,
.chat-messages {
  background: rgba(248, 252, 252, .28) !important;
}

.chat-composer,
.chat-message.assistant,
.chat-empty > div b {
  border-color: rgba(255, 255, 255, .78) !important;
  background: rgba(255, 255, 255, .58) !important;
  box-shadow: 0 10px 24px rgba(43, 76, 85, .1), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}

.chat-message.user {
  background: linear-gradient(135deg, #326f7b, #274f58) !important;
}

/* Dialogs and sheets */
.settings-dialog,
.auth-dialog,
.comment-dialog,
.download-dialog,
.video-preview-dialog,
.image-preview-dialog,
.beta-feedback-dialog {
  border: 1px solid rgba(255, 255, 255, .84) !important;
  border-top: 1px solid rgba(255, 255, 255, .96) !important;
  border-radius: 8px !important;
  background: rgba(235, 246, 247, .68) !important;
  box-shadow: 0 34px 90px rgba(26, 54, 63, .28), inset 0 1px 0 #fff !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  backdrop-filter: blur(30px) saturate(1.4);
}

.settings-dialog::backdrop,
.auth-dialog::backdrop,
.comment-dialog::backdrop,
.download-dialog::backdrop,
.video-preview-dialog::backdrop,
.image-preview-dialog::backdrop,
.beta-feedback-dialog::backdrop {
  background: rgba(31, 48, 54, .34) !important;
  -webkit-backdrop-filter: blur(14px) saturate(.9);
  backdrop-filter: blur(14px) saturate(.9);
}

.settings-sheet,
.auth-sheet,
.comment-sheet,
.download-sheet,
.beta-feedback-sheet {
  background: transparent !important;
}

.video-preview-header,
.auth-brand-panel {
  background: linear-gradient(145deg, rgba(30, 73, 82, .94), rgba(27, 51, 58, .92)) !important;
}

/* Login sheet wordmark now uses the same transparent-background asset as
   the topbar, so no white-field blending hack is needed. */
.auth-brand-panel {
  isolation: isolate;
  background:
    radial-gradient(circle at 22% 30%, rgba(255, 255, 255, .72), transparent 48%),
    linear-gradient(145deg, rgba(232, 246, 247, .76), rgba(248, 244, 236, .5)) !important;
}

.auth-master-lockup {
  isolation: isolate;
  border-radius: 8px;
}

.auth-wordmark {
  display: block !important;
  max-width: 100% !important;
}

.download-progress-track,
.progress-track {
  overflow: hidden;
  background: rgba(75, 118, 128, .15) !important;
}

.download-progress-track > span,
.progress-track > span {
  background: linear-gradient(90deg, #4f9bab, #c69b60) !important;
}

.toast {
  border: 1px solid rgba(255, 255, 255, .64) !important;
  border-radius: 7px !important;
  background: rgba(31, 58, 65, .84) !important;
  box-shadow: 0 18px 42px rgba(27, 52, 59, .24) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

@media (max-width: 680px) {
  body {
    background:
      linear-gradient(132deg, rgba(211, 236, 239, .94), rgba(243, 246, 244, .72) 48%, rgba(248, 236, 221, .66) 100%),
      #e8f0f1;
    background-attachment: scroll;
  }

  .main-content {
    padding-bottom: 118px !important;
  }

  .sidebar {
    bottom: max(20px, calc(env(safe-area-inset-bottom) + 10px)) !important;
    height: 82px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nav-list {
    height: 72px !important;
    padding: 7px 5px max(7px, env(safe-area-inset-bottom)) !important;
    border: 1px solid rgba(255, 255, 255, .78) !important;
    border-radius: 8px !important;
    background: rgba(246, 251, 251, .66) !important;
    box-shadow: 0 17px 38px rgba(45, 76, 84, .2), inset 0 1px 0 #fff !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    backdrop-filter: blur(22px) saturate(1.3);
  }

  .nav-item {
    min-height: 56px !important;
    gap: 3px !important;
  }

  .nav-icon {
    width: 27px !important;
    height: 27px !important;
    margin-bottom: 1px !important;
    font-size: 18px !important;
  }

  #toolkitView .tool-card {
    border-radius: 8px !important;
    clip-path: inset(0 round 8px) !important;
    box-shadow: 0 13px 28px rgba(45, 74, 83, .14), 0 3px 8px rgba(45, 74, 83, .06), inset 0 1px 0 rgba(255, 255, 255, .92) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.22);
    backdrop-filter: blur(16px) saturate(1.22);
  }

  #toolkitView .tool-card-media,
  #toolkitView .tool-card-media img {
    border-radius: 7px !important;
    clip-path: inset(0 round 7px) !important;
  }

  .control-panel,
  .media-workspace,
  .commerce-workspace,
  .image-workspace,
  .outfit-workspace,
  .talking-workspace,
  .account-identity,
  .account-detail,
  .admin-section,
  .admin-stat,
  .chat-layout,
  .seo-faq,
  .creation-item,
  .gallery-card {
    -webkit-backdrop-filter: blur(15px) saturate(1.2);
    backdrop-filter: blur(15px) saturate(1.2);
    box-shadow: 0 12px 28px rgba(48, 77, 85, .11), inset 0 1px 0 rgba(255, 255, 255, .86) !important;
  }

  .chat-layout {
    border-radius: 8px !important;
  }

  .settings-dialog,
  .auth-dialog,
  .comment-dialog,
  .download-dialog,
  .video-preview-dialog,
  .image-preview-dialog,
  .beta-feedback-dialog {
    max-width: calc(100vw - 20px) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.25);
    backdrop-filter: blur(20px) saturate(1.25);
  }

  .auth-sheet {
    grid-template-rows: 118px minmax(0, 1fr) !important;
  }

  .auth-brand-panel {
    min-height: 118px !important;
    padding: 16px 20px !important;
    justify-content: center !important;
    background: rgba(247, 251, 251, .76) !important;
  }

  .auth-brand-panel {
    background:
      radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .86), transparent 66%),
      linear-gradient(145deg, rgba(235, 247, 248, .78), rgba(248, 244, 236, .52)) !important;
  }

  .auth-brand-panel::before,
  .auth-brand-panel::after,
  .auth-brand-footer {
    display: none !important;
  }

  .auth-master-lockup {
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .auth-wordmark {
    width: min(100%, 228px) !important;
  }

  .auth-product-name {
    display: none !important;
  }

  .auth-content {
    background: rgba(255, 255, 255, .48) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #toolkitView .tool-card,
  .gallery-card,
  .creation-item,
  .account-detail,
  .admin-stat,
  .nav-item {
    transition: none !important;
  }

  #toolkitView .tool-card:hover,
  .gallery-card:hover,
  .creation-item:hover,
  .account-detail:hover,
  .admin-stat:hover {
    transform: none !important;
  }
}

/* Archive and output surfaces: keep secondary pages on the same material
   system as the workbench without changing their content or data states. */
.talking-history,
.public-gallery,
.output-block,
.empty-state {
  border: 1px solid rgba(255, 255, 255, .72) !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .56), rgba(240, 248, 249, .34)) !important;
  box-shadow: var(--liquid-shadow) !important;
  -webkit-backdrop-filter: var(--liquid-blur);
  backdrop-filter: var(--liquid-blur);
}

.talking-history,
.public-gallery {
  margin-top: 22px !important;
  padding: 18px !important;
  border-top: 1px solid rgba(255, 255, 255, .86) !important;
}

.gallery-heading {
  min-height: 42px !important;
  margin-bottom: 12px !important;
}

.gallery-heading h2 {
  color: var(--liquid-ink) !important;
  font-size: 17px !important;
}

.refresh-button {
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(255, 255, 255, .84) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .52) !important;
  color: #35616b !important;
  box-shadow: 0 7px 16px rgba(45, 78, 87, .1), inset 0 1px 0 #fff !important;
}

.talking-history-card,
.gallery-card,
.creation-item {
  border-color: rgba(255, 255, 255, .84) !important;
  border-top: 1px solid rgba(255, 255, 255, .94) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .68), rgba(238, 247, 248, .38)) !important;
}

.talking-history-body,
.gallery-body,
.creation-info,
.creation-actions {
  color: var(--liquid-ink) !important;
}

.talking-history-body h3,
.gallery-body h3,
.creation-info h3,
.gallery-empty strong,
.empty-state h2 {
  color: var(--liquid-ink) !important;
}

.talking-history-body p,
.gallery-description,
.gallery-meta,
.creation-info p,
.creation-metrics {
  color: var(--liquid-muted) !important;
}

.talking-history-actions button,
.remix-button,
.gallery-actions .community-button {
  border-color: rgba(255, 255, 255, .86) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, .54) !important;
  color: #3d6871 !important;
  box-shadow: 0 5px 12px rgba(47, 81, 90, .08), inset 0 1px 0 #fff !important;
}

.gallery-empty {
  min-height: 190px !important;
  border: 1px dashed rgba(86, 135, 146, .3) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .28) !important;
  color: var(--liquid-muted) !important;
}

.empty-state {
  min-height: 300px !important;
  margin-top: 12px;
}

.output-block {
  padding: 18px !important;
}

.output-block .section-heading,
.output-block .output-header {
  border-color: rgba(93, 128, 138, .16) !important;
}

.status-badge {
  border: 1px solid rgba(255, 255, 255, .78) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76) !important;
}

.status-badge.running {
  background: rgba(112, 187, 200, .18) !important;
  color: #2c6975 !important;
}

.status-badge.success {
  background: rgba(113, 180, 132, .18) !important;
  color: #36734a !important;
}

.status-badge.failed {
  background: rgba(208, 119, 111, .16) !important;
  color: #9a4a44 !important;
}

.task-footer,
.task-meta {
  color: var(--liquid-muted) !important;
}

.audio-source-actions button {
  border-color: rgba(255, 255, 255, .76) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, .48) !important;
  color: #3a626b !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82) !important;
}

/* The title and brand lockup share one finite row on phones. Let the title
   use the remaining width so tool names stay readable instead of ellipsizing. */
@media (max-width: 680px) {
  .topbar > .topbar-primary {
    gap: 8px !important;
  }

  .topbar-title-copy {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    max-width: none !important;
  }

  body .topbar.topbar #pageTitle {
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: 26px !important;
  }

  body .topbar.topbar .topbar-primary > .mobile-brand-lockup {
    width: min(190px, 50vw) !important;
    flex: 0 0 min(190px, 50vw) !important;
  }

  .talking-history,
  .public-gallery,
  .output-block,
  .empty-state {
    margin-top: 14px !important;
    padding: 12px !important;
  }

  .output-block {
    padding: 12px !important;
  }

  .gallery-heading h2 {
    font-size: 15px !important;
  }

  .gallery-empty {
    min-height: 156px !important;
  }
}

@media (max-width: 380px) {
  body .topbar.topbar #pageTitle {
    font-size: 24px !important;
  }

  body .topbar.topbar .topbar-primary > .mobile-brand-lockup {
    width: min(170px, 48vw) !important;
    flex-basis: min(170px, 48vw) !important;
  }
}

@media (max-width: 680px) {
  #pageTitle {
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 26px !important;
  }

  .app-shell .topbar .topbar-primary > .mobile-brand-lockup {
    width: 190px !important;
    flex-basis: 190px !important;
  }
}

@media (max-width: 380px) {
  #pageTitle {
    font-size: 24px !important;
  }

  .app-shell .topbar .topbar-primary > .mobile-brand-lockup {
    width: 170px !important;
    flex-basis: 170px !important;
  }
}

@media (max-width: 680px) {
  body .topbar .topbar-primary > .mobile-brand-lockup {
    width: 190px !important;
    flex-basis: 190px !important;
  }

  body .topbar #pageTitle {
    max-width: none !important;
    font-size: 26px !important;
  }
}

@media (max-width: 380px) {
  body .topbar .topbar-primary > .mobile-brand-lockup {
    width: 170px !important;
    flex-basis: 170px !important;
  }

  body .topbar #pageTitle {
    font-size: 24px !important;
  }
}

/* iOS 27 preview theme A: liquid gold / shifting sand. */
html[data-preview-style="liquid-gold"] {
  --liquid-ink: #332a25;
  --liquid-muted: #78685d;
  --liquid-line: rgba(255, 249, 236, .82);
  --liquid-line-soft: rgba(151, 112, 67, .22);
  --liquid-glass: rgba(255, 247, 230, .58);
  --liquid-glass-strong: rgba(255, 250, 239, .78);
  --liquid-glass-soft: rgba(250, 226, 185, .38);
  --liquid-cyan: #ad7b43;
  --liquid-cyan-soft: rgba(191, 139, 67, .18);
  --liquid-gold: #bb8742;
  --liquid-gold-soft: rgba(215, 169, 90, .2);
  --liquid-shadow: 0 18px 42px rgba(107, 73, 34, .14), 0 4px 12px rgba(107, 73, 34, .08), inset 0 1px 0 rgba(255, 255, 255, .96);
  --liquid-shadow-raised: 0 28px 64px rgba(96, 62, 27, .22), 0 10px 24px rgba(96, 62, 27, .1), inset 0 1px 0 rgba(255, 255, 255, .98);
  --gold-dark: #795026;
  --gold-soft: rgba(215, 169, 90, .2);
  --ink: var(--liquid-ink);
  --muted: var(--liquid-muted);
  --line: var(--liquid-line-soft);
  --line-strong: rgba(151, 112, 67, .34);
  --gold: var(--liquid-gold);
  --shadow: var(--liquid-shadow);
}

html[data-preview-style="liquid-gold"] body {
  background:
    radial-gradient(ellipse at 8% 8%, rgba(255, 246, 220, .94), transparent 34%),
    radial-gradient(ellipse at 92% 16%, rgba(222, 178, 97, .22), transparent 32%),
    linear-gradient(128deg, #edf0e9 0%, #f7f0df 46%, #e7d4b4 100%) !important;
}

html[data-preview-style="liquid-gold"] .main-content::before {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .28), transparent 32%),
    linear-gradient(292deg, rgba(203, 151, 64, .14), transparent 43%),
    linear-gradient(24deg, rgba(150, 92, 31, .1), transparent 38%) !important;
}

html[data-preview-style="liquid-gold"] .sidebar {
  background: linear-gradient(160deg, rgba(255, 252, 241, .84), rgba(237, 215, 177, .5)) !important;
}

html[data-preview-style="liquid-gold"] .nav-item.active,
html[data-preview-style="liquid-gold"] #toolkitView .tool-card,
html[data-preview-style="liquid-gold"] .talking-history-card,
html[data-preview-style="liquid-gold"] .gallery-card,
html[data-preview-style="liquid-gold"] .creation-item {
  background: linear-gradient(138deg, rgba(255, 252, 242, .84), rgba(228, 193, 126, .3)) !important;
  box-shadow: var(--liquid-shadow-raised) !important;
}

html[data-preview-style="liquid-gold"] #toolkitView .tool-card:hover,
html[data-preview-style="liquid-gold"] .gallery-card:hover,
html[data-preview-style="liquid-gold"] .creation-item:hover,
html[data-preview-style="liquid-gold"] .account-detail:hover,
html[data-preview-style="liquid-gold"] .admin-stat:hover {
  box-shadow: 0 36px 76px rgba(97, 62, 26, .28), 0 12px 28px rgba(97, 62, 26, .12), inset 0 1px 0 #fff !important;
}

html[data-preview-style="liquid-gold"] .primary-button,
html[data-preview-style="liquid-gold"] .generate-button,
html[data-preview-style="liquid-gold"] .auth-submit,
html[data-preview-style="liquid-gold"] .install-guide-next,
html[data-preview-style="liquid-gold"] .install-guide-install {
  background: linear-gradient(135deg, #a96f31, #6f4426) !important;
  border-color: rgba(105, 64, 27, .5) !important;
  box-shadow: 0 12px 24px rgba(105, 64, 27, .24), inset 0 1px 0 rgba(255, 242, 204, .32) !important;
}

html[data-preview-style="liquid-gold"] .result-stage,
html[data-preview-style="liquid-gold"] .commerce-result-stage,
html[data-preview-style="liquid-gold"] .image-result-stage,
html[data-preview-style="liquid-gold"] .outfit-result-stage,
html[data-preview-style="liquid-gold"] .talking-result-stage,
html[data-preview-style="liquid-gold"] .video-person-result-stage,
html[data-preview-style="liquid-gold"] .brand-ad-result-stage {
  background: linear-gradient(145deg, #30251d, #181513) !important;
}

html[data-preview-style="liquid-gold"] .chat-memory-panel {
  background: linear-gradient(165deg, rgba(104, 69, 34, .94), rgba(55, 38, 28, .9)) !important;
}

html[data-preview-style="liquid-gold"] .chat-message.user {
  background: linear-gradient(135deg, #96643a, #60402d) !important;
}

html[data-preview-style="liquid-gold"] .video-preview-header,
html[data-preview-style="liquid-gold"] .auth-brand-panel {
  background: linear-gradient(145deg, rgba(112, 74, 35, .94), rgba(59, 40, 28, .92)) !important;
}

html[data-preview-style="liquid-gold"] .dropzone:hover,
html[data-preview-style="liquid-gold"] .dropzone.dragging,
html[data-preview-style="liquid-gold"] .image-reference-zone:hover,
html[data-preview-style="liquid-gold"] .talking-photo-zone:hover,
html[data-preview-style="liquid-gold"] .audio-dropzone:hover {
  border-color: rgba(183, 128, 48, .62) !important;
  background: rgba(255, 248, 225, .66) !important;
}

/* iOS 27 preview theme B: warm champagne glass. */
html[data-preview-style="warm-champagne"] {
  --liquid-ink: #392f2a;
  --liquid-muted: #86766d;
  --liquid-line: rgba(255, 253, 249, .86);
  --liquid-line-soft: rgba(174, 143, 122, .2);
  --liquid-glass: rgba(255, 252, 247, .6);
  --liquid-glass-strong: rgba(255, 254, 250, .82);
  --liquid-glass-soft: rgba(250, 225, 211, .34);
  --liquid-cyan: #a47760;
  --liquid-cyan-soft: rgba(203, 151, 119, .15);
  --liquid-gold: #bd8b65;
  --liquid-gold-soft: rgba(214, 170, 139, .18);
  --liquid-shadow: 0 18px 42px rgba(106, 77, 63, .12), 0 4px 12px rgba(106, 77, 63, .06), inset 0 1px 0 rgba(255, 255, 255, .98);
  --liquid-shadow-raised: 0 26px 60px rgba(102, 72, 57, .17), 0 9px 22px rgba(102, 72, 57, .08), inset 0 1px 0 rgba(255, 255, 255, .98);
  --gold-dark: #825b43;
  --gold-soft: rgba(214, 170, 139, .18);
  --ink: var(--liquid-ink);
  --muted: var(--liquid-muted);
  --line: var(--liquid-line-soft);
  --line-strong: rgba(174, 143, 122, .3);
  --gold: var(--liquid-gold);
  --shadow: var(--liquid-shadow);
}

html[data-preview-style="warm-champagne"] body {
  background:
    radial-gradient(ellipse at 14% 4%, rgba(255, 255, 250, .96), transparent 38%),
    radial-gradient(ellipse at 88% 16%, rgba(245, 214, 194, .3), transparent 34%),
    linear-gradient(128deg, #eef2ef 0%, #fbf3ed 52%, #eadcd3 100%) !important;
}

html[data-preview-style="warm-champagne"] .main-content::before {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .3), transparent 35%),
    linear-gradient(292deg, rgba(222, 179, 159, .12), transparent 42%),
    linear-gradient(24deg, rgba(191, 141, 113, .08), transparent 40%) !important;
}

html[data-preview-style="warm-champagne"] .sidebar {
  background: linear-gradient(160deg, rgba(255, 254, 251, .88), rgba(247, 230, 220, .48)) !important;
}

html[data-preview-style="warm-champagne"] .nav-item.active,
html[data-preview-style="warm-champagne"] #toolkitView .tool-card,
html[data-preview-style="warm-champagne"] .talking-history-card,
html[data-preview-style="warm-champagne"] .gallery-card,
html[data-preview-style="warm-champagne"] .creation-item {
  background: linear-gradient(138deg, rgba(255, 254, 251, .86), rgba(247, 221, 207, .32)) !important;
  box-shadow: var(--liquid-shadow-raised) !important;
}

html[data-preview-style="warm-champagne"] #toolkitView .tool-card:hover,
html[data-preview-style="warm-champagne"] .gallery-card:hover,
html[data-preview-style="warm-champagne"] .creation-item:hover,
html[data-preview-style="warm-champagne"] .account-detail:hover,
html[data-preview-style="warm-champagne"] .admin-stat:hover {
  box-shadow: 0 32px 68px rgba(103, 74, 59, .22), 0 10px 24px rgba(103, 74, 59, .1), inset 0 1px 0 #fff !important;
}

html[data-preview-style="warm-champagne"] .primary-button,
html[data-preview-style="warm-champagne"] .generate-button,
html[data-preview-style="warm-champagne"] .auth-submit,
html[data-preview-style="warm-champagne"] .install-guide-next,
html[data-preview-style="warm-champagne"] .install-guide-install {
  background: linear-gradient(135deg, #a97758, #765344) !important;
  border-color: rgba(112, 75, 57, .42) !important;
  box-shadow: 0 11px 22px rgba(112, 75, 57, .18), inset 0 1px 0 rgba(255, 247, 239, .34) !important;
}

html[data-preview-style="warm-champagne"] .result-stage,
html[data-preview-style="warm-champagne"] .commerce-result-stage,
html[data-preview-style="warm-champagne"] .image-result-stage,
html[data-preview-style="warm-champagne"] .outfit-result-stage,
html[data-preview-style="warm-champagne"] .talking-result-stage,
html[data-preview-style="warm-champagne"] .video-person-result-stage,
html[data-preview-style="warm-champagne"] .brand-ad-result-stage {
  background: linear-gradient(145deg, #332a28, #1e1918) !important;
}

html[data-preview-style="warm-champagne"] .chat-memory-panel {
  background: linear-gradient(165deg, rgba(121, 87, 72, .9), rgba(70, 51, 45, .86)) !important;
}

html[data-preview-style="warm-champagne"] .chat-message.user {
  background: linear-gradient(135deg, #a9795d, #785344) !important;
}

html[data-preview-style="warm-champagne"] .video-preview-header,
html[data-preview-style="warm-champagne"] .auth-brand-panel {
  background: linear-gradient(145deg, rgba(128, 91, 72, .92), rgba(72, 53, 46, .9)) !important;
}

html[data-preview-style="warm-champagne"] .dropzone:hover,
html[data-preview-style="warm-champagne"] .dropzone.dragging,
html[data-preview-style="warm-champagne"] .image-reference-zone:hover,
html[data-preview-style="warm-champagne"] .talking-photo-zone:hover,
html[data-preview-style="warm-champagne"] .audio-dropzone:hover {
  border-color: rgba(190, 137, 108, .52) !important;
  background: rgba(255, 251, 246, .7) !important;
}

html[data-preview-style="liquid-gold"] .auth-brand-panel,
html[data-preview-style="warm-champagne"] .auth-brand-panel {
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 255, 255, .2), transparent 60%),
    linear-gradient(145deg, rgba(111, 75, 42, .92), rgba(52, 39, 32, .9)) !important;
}

/* Material pass: make the theme visible as glass, not just as recolored
   text. Media remains visible beneath a translucent frosted reflection layer. */
html[data-preview-style="liquid-gold"] #toolkitView .tool-card,
html[data-preview-style="warm-champagne"] #toolkitView .tool-card {
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  border-top-color: rgba(255, 255, 255, .99) !important;
  overflow: hidden !important;
  background: rgba(255, 249, 238, .36) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.34) !important;
  backdrop-filter: blur(22px) saturate(1.34) !important;
}

html[data-preview-style="liquid-gold"] #toolkitView .tool-card::before,
html[data-preview-style="warm-champagne"] #toolkitView .tool-card::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(116deg, rgba(255, 255, 255, .54) 0%, rgba(255, 255, 255, .08) 34%, transparent 55%),
    linear-gradient(178deg, rgba(255, 255, 255, .34), transparent 32%, rgba(188, 119, 42, .1) 100%);
  -webkit-backdrop-filter: blur(3px) saturate(1.1);
  backdrop-filter: blur(3px) saturate(1.1);
}

html[data-preview-style="liquid-gold"] #toolkitView .tool-card-media,
html[data-preview-style="warm-champagne"] #toolkitView .tool-card-media {
  z-index: 0 !important;
  opacity: .76 !important;
  filter: saturate(.8) brightness(1.06) contrast(.97) !important;
}

html[data-preview-style="liquid-gold"] #toolkitView .tool-card:nth-child(3n + 1)::before {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .6), transparent 42%),
    linear-gradient(168deg, rgba(220, 171, 82, .18), transparent 66%);
}

html[data-preview-style="liquid-gold"] #toolkitView .tool-card:nth-child(3n + 2)::before {
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .56), transparent 38%),
    linear-gradient(170deg, rgba(172, 111, 39, .15), transparent 70%);
}

html[data-preview-style="warm-champagne"] #toolkitView .tool-card::before {
  background:
    linear-gradient(116deg, rgba(255, 255, 255, .64) 0%, rgba(255, 255, 255, .1) 38%, transparent 58%),
    linear-gradient(178deg, rgba(255, 255, 255, .38), transparent 38%, rgba(200, 142, 112, .08) 100%);
}

html[data-preview-style="liquid-gold"] .nav-list,
html[data-preview-style="warm-champagne"] .nav-list {
  border-color: rgba(255, 255, 255, .9) !important;
  background: rgba(255, 250, 240, .54) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.46) !important;
  backdrop-filter: blur(30px) saturate(1.46) !important;
}

html[data-preview-style="liquid-gold"] .nav-item,
html[data-preview-style="warm-champagne"] .nav-item {
  color: rgba(76, 61, 48, .78) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-preview-style="liquid-gold"] .nav-item.active,
html[data-preview-style="warm-champagne"] .nav-item.active {
  border-color: rgba(255, 255, 255, .96) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(221, 176, 99, .28)) !important;
  color: #65462c !important;
  box-shadow: 0 12px 24px rgba(112, 74, 34, .18), inset 0 1px 0 rgba(255, 255, 255, .98), inset 0 -1px 0 rgba(171, 113, 44, .12) !important;
  transform: translateY(-2px) !important;
}

html[data-preview-style="warm-champagne"] .nav-item.active {
  background: linear-gradient(145deg, rgba(255, 255, 255, .84), rgba(231, 194, 173, .3)) !important;
  color: #765441 !important;
  box-shadow: 0 11px 22px rgba(111, 78, 63, .15), inset 0 1px 0 rgba(255, 255, 255, .98), inset 0 -1px 0 rgba(175, 123, 99, .1) !important;
}

html[data-preview-style="liquid-gold"] .nav-icon,
html[data-preview-style="warm-champagne"] .nav-icon {
  border-color: rgba(169, 117, 54, .28) !important;
  background: rgba(255, 255, 255, .52) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 3px 8px rgba(112, 74, 34, .08) !important;
}

html[data-preview-style="warm-champagne"] .nav-icon {
  border-color: rgba(184, 137, 107, .26) !important;
}

html[data-preview-style="liquid-gold"] .account-button,
html[data-preview-style="warm-champagne"] .account-button,
html[data-preview-style="liquid-gold"] .refresh-button,
html[data-preview-style="warm-champagne"] .refresh-button {
  background: rgba(255, 250, 240, .62) !important;
  border-color: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 9px 20px rgba(106, 72, 34, .14), inset 0 1px 0 rgba(255, 255, 255, .98) !important;
}

@media (max-width: 680px) {
  html[data-preview-style="liquid-gold"] #toolkitView .tool-card,
  html[data-preview-style="warm-champagne"] #toolkitView .tool-card {
    box-shadow: 0 18px 34px rgba(96, 62, 27, .2), 0 5px 12px rgba(96, 62, 27, .1), inset 0 1px 0 rgba(255, 255, 255, .98) !important;
  }

  html[data-preview-style="warm-champagne"] #toolkitView .tool-card {
    box-shadow: 0 17px 32px rgba(102, 72, 57, .16), 0 5px 12px rgba(102, 72, 57, .08), inset 0 1px 0 rgba(255, 255, 255, .98) !important;
  }

  html[data-preview-style="liquid-gold"] .nav-list,
  html[data-preview-style="warm-champagne"] .nav-list {
    background: rgba(255, 251, 243, .66) !important;
    box-shadow: 0 24px 48px rgba(99, 66, 35, .24), inset 0 1px 0 #fff !important;
  }
}

/* ============================================================
   Upload-surface visibility boost (glacier-blue glass accents).
   Visual-only enhancement layer — added 2026-08-31.
   No workflow, form state or interaction logic is touched.
   ============================================================ */

/* 1. Upload containers: visible glacier-blue glass edges. */
.dropzone,
.reference-motion-source,
.video-upload-source,
.video-person-upload-source,
.commerce-dropzone,
.brand-ad-product-dropzone,
.image-reference-zone,
.talking-photo-zone,
.audio-dropzone {
  border: 1.5px solid rgba(62, 135, 150, .55) !important;
  border-top-color: rgba(128, 192, 204, .65) !important;
  border-left-color: rgba(96, 168, 181, .58) !important;
  background: linear-gradient(152deg, rgba(212, 239, 243, .68), rgba(255, 255, 255, .44) 78%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    inset 0 -22px 46px rgba(73, 143, 155, .14),
    0 10px 26px rgba(46, 96, 108, .1) !important;
}

.dropzone:hover,
.dropzone.dragging,
.image-reference-zone:hover,
.talking-photo-zone:hover,
.audio-dropzone:hover,
.commerce-dropzone:hover,
.brand-ad-product-dropzone:hover {
  border-color: rgba(44, 118, 133, .88) !important;
  background: linear-gradient(152deg, rgba(214, 241, 245, .84), rgba(255, 255, 255, .62)) !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 4px rgba(74, 155, 170, .16),
    0 18px 38px rgba(46, 96, 108, .16) !important;
}

/* 2. Upload grid cells: soft glass with a glacier hairline. */
.upload-grid > *,
.video-person-upload-grid > *,
.talking-upload-grid > *,
.commerce-upload-grid > * {
  border: 1px solid rgba(82, 148, 161, .3) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .36) !important;
  padding: 6px !important;
}

/* 3. Upload icon: glacier-glass orb with a deep-blue glyph. */
.upload-symbol {
  width: 52px !important;
  height: 52px !important;
  border: 1px solid rgba(74, 155, 170, .55) !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #ffffff, rgba(214, 240, 244, .85)) !important;
  color: #2b6570 !important;
  font-size: 24px !important;
  box-shadow: 0 8px 18px rgba(46, 96, 108, .2), inset 0 1px 0 #fff !important;
}

.upload-symbol.play {
  padding-left: 3px !important;
  font-size: 15px !important;
}

/* 4. Upload copy: stronger contrast against the glass. */
.dropzone-empty {
  color: #4c6d76 !important;
  gap: 9px !important;
}

.dropzone-empty strong {
  margin-top: 8px !important;
  color: #1e3a42 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.dropzone-empty span:last-child {
  font-size: 12px !important;
  color: #56777f !important;
}

/* 5. Section titles: crisper type on desktop. */
.media-workspace .section-heading h2,
.commerce-workspace .section-heading h2,
.image-workspace .section-heading h2,
.outfit-workspace .section-heading h2,
.talking-workspace .section-heading h2,
.video-person-workspace .section-heading h2 {
  color: #1c3a42 !important;
  font-size: 18px !important;
  letter-spacing: .01em !important;
}

.media-workspace .step-number,
.commerce-workspace .step-number,
.image-workspace .step-number,
.outfit-workspace .step-number,
.talking-workspace .step-number,
.video-person-workspace .step-number {
  font-size: 11px !important;
}

.workspace-product-lockup span {
  border-right-color: rgba(151, 106, 34, .55) !important;
  color: #486a73 !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
}

.workspace-product-lockup b {
  color: #2c6975 !important;
  font-size: 9px !important;
}

/* 6. Phones: keep titles readable, compact lockup and orbs. */
@media (max-width: 680px) {
  .media-workspace .section-heading h2,
  .commerce-workspace .section-heading h2,
  .image-workspace .section-heading h2,
  .outfit-workspace .section-heading h2,
  .talking-workspace .section-heading h2,
  .video-person-workspace .section-heading h2 {
    font-size: 16px !important;
  }

  .upload-symbol {
    width: 46px !important;
    height: 46px !important;
    font-size: 21px !important;
  }

  .dropzone-empty strong { font-size: 14px !important; }
  .dropzone-empty span:last-child { font-size: 10px !important; }

  .workspace-product-lockup span { font-size: 9px !important; }
  .workspace-product-lockup b { font-size: 8px !important; }
}

@media (max-width: 420px) {
  .media-workspace .section-heading h2,
  .commerce-workspace .section-heading h2,
  .image-workspace .section-heading h2,
  .outfit-workspace .section-heading h2,
  .talking-workspace .section-heading h2,
  .video-person-workspace .section-heading h2 {
    font-size: 15px !important;
  }

  .dropzone-empty strong { font-size: 13px !important; }
  .upload-symbol { width: 42px !important; height: 42px !important; font-size: 19px !important; }
  .workspace-product-lockup { padding-right: 0 !important; }
  .workspace-product-lockup span { padding-right: 6px !important; font-size: 8px !important; }
}


/* 移动端性能优化：液态玻璃轻量化（仅手机端生效，桌面端保持原样） */
@media (max-width: 680px) {
  :root { --liquid-blur: blur(10px) saturate(1.15); }
  .sidebar, .control-panel, .media-workspace, .commerce-workspace, .image-workspace, .outfit-workspace, .talking-workspace, .account-identity, .account-detail, .account-detail-quota, .admin-section, .admin-stat, .chat-layout, .seo-faq, .beta-notice, .install-guide, .creation-item, .section-block, .nav-list, .brand-product-card, .brand-product-rail, .inspiration-toolbar, .inspiration-card { -webkit-backdrop-filter: blur(8px) saturate(1.1) !important; backdrop-filter: blur(8px) saturate(1.1) !important; }
  .gallery-card { -webkit-backdrop-filter: blur(6px) saturate(1.05) !important; backdrop-filter: blur(6px) saturate(1.05) !important; }
  .tool-card { -webkit-backdrop-filter: blur(8px) saturate(1.1) !important; backdrop-filter: blur(8px) saturate(1.1) !important; }
  .topbar { -webkit-backdrop-filter: blur(10px) saturate(1.2) !important; backdrop-filter: blur(10px) saturate(1.2) !important; }
  .gallery-source, .preview-play, .remove-media, .media-name, .image-result-download, .icon-button, .upload-symbol { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}