:root {
  --color-ink: #0b1026;
  --color-primary: #6d4aff;
  --color-primary-hover: #5936e8;
  --color-pop-pink: #ff2d6f;
  --color-signal-blue: #1677ff;
  --color-spark-yellow: #ffb800;
  --color-background: #f7f8fc;
  --color-surface: #ffffff;
  --color-surface-subtle: #f0f2f7;
  --color-border: #e1e5ee;
  --color-border-strong: #c9cfdc;
  --color-text-primary: #0b1026;
  --color-text-secondary: #5f687c;
  --color-text-muted: #8a93a6;
  --color-text-disabled: #b6bdca;
  --color-success: #167a50;
  --color-warning: #a85b00;
  --color-danger: #d92d3a;
  --color-info: #1677ff;
  --color-canvas: #12162b;
  --color-toolbar: #1a1f38;
  --color-toolbar-border: #2b314d;
  --brand-gradient: linear-gradient(135deg, #ff2d6f 0%, #7a3df0 50%, #1677ff 100%);
  --ink: var(--color-ink);
  --paper: var(--color-background);
  --coral: var(--color-pop-pink);
  --lilac: #efeaff;
  --lime: #dff7ec;
  --blue: var(--color-primary);
  --blue-dark: var(--color-primary-hover);
  --line: var(--color-border);
}

html,
body {
  color: var(--color-text-primary);
  background: var(--color-background) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

body,
button,
input,
textarea,
select {
  font-family: inherit;
}

.display,
.access-card h1,
.project-card h2,
.project-stats b,
.metric-no,
.public-empty h1 {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

.display {
  font-weight: 700 !important;
}

/* One transparent horizontal brand lockup across every product surface. */
.brand-lockup {
  position: relative;
  display: inline-flex;
  width: 188px;
  height: 44px;
  flex: none;
  overflow: hidden;
  isolation: isolate;
}

.brand-lockup img {
  position: absolute;
  width: 106%;
  height: auto;
  max-width: none;
  left: 50%;
  top: 50%;
  transform: translate(-50.96%, -57.2%);
}

/* Theme-aware transparent logo assets. The wrapper never paints a backing box. */
.brand-lockup,
.public-brand-assets,
.theme-brand-pair {
  background: transparent !important;
}

.public-brand-assets,
.theme-brand-pair {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.theme-logo-dark {
  display: none !important;
}

html[data-theme="dark"] .theme-logo-light {
  display: none !important;
}

html[data-theme="dark"] .theme-logo-dark {
  display: inline-flex !important;
}

/* The supplied dark horizontal logo is already tightly cropped, unlike the
   padded light export, so centre it without the light asset's crop offset. */
.brand-lockup > img.theme-logo-dark,
.brand-lockup.theme-logo-dark img {
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.product-mark {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 10px;
}

.brand-name {
  color: var(--color-ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.sidebar-brand-link {
  min-width: 0;
}

.public-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--color-ink);
}

.public-brand-lockup {
  width: 188px;
  height: 42px;
}

.brand-lockup-stacked img {
  position: static;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  transform: none;
}

/* Exact button system. */
.btn-dark,
.access-submit,
.ai-generate-btn,
.task-form button {
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--color-primary) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.btn-dark:hover,
.access-submit:hover,
.ai-generate-btn:hover,
.task-form button:hover {
  background: var(--color-primary-hover) !important;
  transform: none !important;
}

.btn-light {
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 16px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 10px !important;
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.btn-light:hover {
  border-color: var(--color-border) !important;
  background: var(--color-surface-subtle) !important;
  color: var(--color-text-primary) !important;
}

.btn-danger,
.btn-danger-solid,
.project-design-actions button {
  border-color: var(--color-danger) !important;
  background: var(--color-danger) !important;
  color: #fff !important;
}

/* Controlled application shell. */
.app-shell {
  min-height: 100vh;
  background: var(--color-background) !important;
}

.app-shell .app-canvas {
  min-height: 100vh !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--color-background) !important;
  box-shadow: none !important;
}

.app-shell.has-sidebar main {
  margin-left: 260px !important;
}

.app-shell.no-sidebar main {
  margin-left: 0 !important;
}

.sidebar-shell {
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 260px !important;
  padding: 20px !important;
  border: 0 !important;
  border-right: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.sidebar-brand-row {
  min-height: 44px;
}

.beta-tag {
  padding: 3px 6px !important;
  border-radius: 6px !important;
  background: #efeaff !important;
  color: var(--color-primary-hover) !important;
  font-size: 8px !important;
  box-shadow: none !important;
}

.nav-label {
  color: var(--color-text-muted) !important;
}

.nav-item {
  min-height: 40px;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  color: var(--color-text-secondary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.nav-item > span,
.nav-item > i {
  color: var(--color-text-muted) !important;
}

.nav-item:hover {
  background: var(--color-surface-subtle) !important;
  color: var(--color-text-primary) !important;
}

.nav-item.active {
  background: #efeaff !important;
  color: var(--color-primary-hover) !important;
  box-shadow: none !important;
}

.nav-item.active > span,
.nav-item.active > i {
  color: var(--color-primary-hover) !important;
}

.profile-card {
  padding: 10px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 14px !important;
  background: var(--color-surface) !important;
  box-shadow: none !important;
}

.profile-avatar {
  background: #efeaff !important;
  color: var(--color-primary-hover) !important;
}

.logout-btn {
  border: 1px solid #f6b8bd !important;
  border-radius: 8px !important;
  background: #fff5f6 !important;
  color: var(--color-danger) !important;
  box-shadow: none !important;
}

.logout-btn:hover {
  background: var(--color-danger) !important;
  color: #fff !important;
  transform: none !important;
}

.glass-header,
.page-header,
.asset-header {
  min-height: 72px !important;
  height: 72px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-border) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px) !important;
}

.menu-toggle,
.round-btn,
.public-theme-toggle,
.global-theme-toggle {
  border: 1px solid var(--color-border) !important;
  border-radius: 10px !important;
  background: var(--color-surface) !important;
  color: var(--color-text-secondary) !important;
  box-shadow: none !important;
}

.global-search,
.page-search {
  border: 1px solid var(--color-border) !important;
  border-radius: 10px !important;
  background: var(--color-surface-subtle) !important;
  color: var(--color-text-muted) !important;
}

/* Dashboard hierarchy and neutral cards. */
.dashboard-section,
.page-section {
  padding: 32px !important;
}

.dashboard-intro {
  min-height: 156px !important;
  padding: 32px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 14px !important;
  background: var(--color-surface) !important;
  box-shadow: 0 1px 2px rgba(11, 16, 38, 0.04) !important;
}

.dashboard-intro::after {
  display: none !important;
}

.dashboard-intro .eyebrow {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.dashboard-intro .eyebrow i {
  background: var(--color-primary) !important;
  box-shadow: none !important;
}

.app-shell .display {
  color: var(--color-text-primary) !important;
  font-size: 32px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.035em !important;
}

.display span.brand-period,
.page-intro .display > span {
  color: var(--color-primary) !important;
}

.dashboard-intro p,
.page-intro > p:last-child {
  color: var(--color-text-secondary) !important;
}

.metric-grid {
  gap: 24px !important;
}

.metric,
.metric-coral,
.metric-lilac,
.metric-lime,
.metric-blue {
  height: 136px !important;
  padding: 20px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 14px !important;
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
  box-shadow: 0 1px 2px rgba(11, 16, 38, 0.04) !important;
}

.metric::after {
  display: none !important;
}

.metric:hover {
  transform: translateY(-2px) !important;
  border-color: var(--color-border-strong) !important;
  box-shadow: 0 4px 12px rgba(11, 16, 38, 0.08) !important;
}

.metric .metric-label,
.metric .metric-foot {
  color: var(--color-text-secondary) !important;
  opacity: 1 !important;
}

.metric .metric-no {
  margin-top: 8px;
  color: var(--color-text-primary) !important;
  font-size: 32px !important;
  font-weight: 700;
}

.metric-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.metric-coral .metric-icon { background: #fff1d6 !important; color: var(--color-warning) !important; }
.metric-lilac .metric-icon { background: #efeaff !important; color: var(--color-primary-hover) !important; }
.metric-lime .metric-icon { background: #dff7ec !important; color: var(--color-success) !important; }
.metric-blue .metric-icon { background: #e8f2ff !important; color: var(--color-signal-blue) !important; }

.queue-head .section-title {
  color: var(--color-text-primary);
  font-size: 24px !important;
  font-weight: 700 !important;
}

.filter-bar,
.feedback-filters {
  padding: 4px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 10px !important;
  background: var(--color-surface) !important;
  box-shadow: none !important;
}

.filter-bar a,
.filter-bar button,
.feedback-filters button {
  min-height: 32px;
  padding: 0 12px !important;
  border-radius: 8px !important;
  color: var(--color-text-secondary) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.filter-bar a.active,
.filter-bar button.active,
.feedback-filters button.active {
  background: #efeaff !important;
  color: var(--color-primary-hover) !important;
  box-shadow: none !important;
}

/* Uploaded work stays visually dominant. */
.creative-card {
  border: 1px solid var(--color-border) !important;
  border-radius: 14px !important;
  background: var(--color-surface) !important;
  box-shadow: 0 1px 2px rgba(11, 16, 38, 0.04) !important;
}

.creative-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--color-border-strong) !important;
  box-shadow: 0 6px 16px rgba(11, 16, 38, 0.08) !important;
}

.creative-cover,
.creative-card-tone-1 .creative-cover,
.creative-card-tone-2 .creative-cover,
.creative-card-tone-3 .creative-cover {
  height: 258px;
  margin: 8px !important;
  border-radius: 10px !important;
  background: var(--color-surface-subtle) !important;
}

.creative-cover img {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.creative-card:hover .creative-cover img {
  transform: scale(1.015) !important;
  filter: none !important;
}

.creative-orb {
  display: none !important;
}

.creative-body {
  padding: 12px 20px 20px !important;
}

.creative-meta {
  color: var(--color-text-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.creative-meta i {
  background: var(--color-border-strong) !important;
}

.creative-body h3 {
  margin-top: 6px !important;
  color: var(--color-text-primary) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
}

.creative-signals,
.creative-footer small {
  color: var(--color-text-muted) !important;
  font-size: 12px !important;
}

.creative-signals {
  border-color: var(--color-border) !important;
}

.creative-avatar {
  border-color: var(--color-surface) !important;
  background: var(--color-ink) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.review-arrow {
  border-radius: 8px !important;
  background: var(--color-surface-subtle) !important;
  color: var(--color-text-secondary) !important;
}

.creative-card:hover .review-arrow {
  background: #efeaff !important;
  color: var(--color-primary-hover) !important;
}

.media-pill {
  border: 1px solid var(--color-border) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--color-text-secondary) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

.creative-version {
  border-radius: 8px !important;
  background: var(--color-signal-blue) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Exact workflow status colours. */
.status {
  padding: 6px 8px !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.status-draft { background: #f0f2f7 !important; color: #5f687c !important; }
.status-in-review,
.status-ready-for-review { background: #efeaff !important; color: #5936e8 !important; }
.status-changes-requested { background: #fff1d6 !important; color: #a85b00 !important; }
.status-approved,
.status-completed { background: #dff7ec !important; color: #167a50 !important; }
.status-blocked { background: #ffe7e9 !important; color: #c4323c !important; }
.status-archived { background: #eaecf0 !important; color: #667085 !important; }

/* Project management and forms remain deliberately quiet. */
.project-grid {
  gap: 24px !important;
}

.project-card,
.project-card.tone-1,
.project-card.tone-2,
.project-card.tone-3 {
  min-height: 280px !important;
  padding: 24px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 14px !important;
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
  box-shadow: 0 1px 2px rgba(11, 16, 38, 0.04) !important;
}

.project-card::before {
  display: none !important;
}

.project-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--color-border-strong) !important;
  box-shadow: 0 6px 16px rgba(11, 16, 38, 0.08) !important;
}

.project-card-top span {
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #efeaff !important;
  box-shadow: none !important;
  font-size: 20px !important;
}

.project-card.tone-1 .project-card-top span { background: #fff1f6 !important; }
.project-card.tone-2 .project-card-top span { background: #e8f2ff !important; }
.project-card.tone-3 .project-card-top span { background: #fff1d6 !important; }

.project-card > p {
  margin-top: 24px !important;
  color: var(--color-text-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  opacity: 1 !important;
}

.project-card h2 {
  color: var(--color-text-primary) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
}

.project-card > small {
  max-width: 100% !important;
  color: var(--color-text-secondary) !important;
  font-size: 14px !important;
  opacity: 1 !important;
}

.project-stats {
  margin-top: 24px !important;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.project-stats b {
  font-size: 20px !important;
  font-weight: 600 !important;
}

.project-stats em {
  color: var(--color-text-muted) !important;
  font-family: Inter, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  opacity: 1 !important;
}

.form-layout {
  gap: 24px !important;
  padding: 48px 32px !important;
}

.form-story,
.form-story.coral,
.form-story.lilac,
.form-story.lime {
  min-height: 560px !important;
  padding: 32px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 14px !important;
  background: var(--color-surface-subtle) !important;
  color: var(--color-text-primary) !important;
}

.form-story::after {
  display: none !important;
}

.story-icons span {
  width: 56px !important;
  height: 56px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 14px !important;
  background: var(--color-surface) !important;
  box-shadow: none !important;
}

.form-card,
.panel,
.workflow-mini,
.empty-state,
.preview-caption,
.public-lifecycle,
.invite-result {
  border: 1px solid var(--color-border) !important;
  border-radius: 14px !important;
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
  box-shadow: 0 1px 2px rgba(11, 16, 38, 0.04) !important;
}

.form-card {
  padding: 24px !important;
}

.form-card h2 {
  font-size: 24px !important;
  font-weight: 700 !important;
}

.form-card label,
.field-label,
.public-composer label {
  color: var(--color-text-primary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.field,
.form-card input,
.form-card textarea,
.form-card select,
.task-form input {
  border: 1px solid var(--color-border) !important;
  border-radius: 10px !important;
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
  font-size: 14px !important;
  box-shadow: none !important;
}

.field:focus,
.form-card input:focus,
.form-card textarea:focus,
.form-card select:focus,
.task-form input:focus {
  border-color: var(--color-border-strong) !important;
  box-shadow: 0 0 0 3px rgba(109, 74, 255, 0.12) !important;
}

.dropzone,
.upload-zone {
  border: 1px dashed var(--color-border-strong) !important;
  border-radius: 14px !important;
  background: var(--color-surface-subtle) !important;
}

.dropzone:hover,
.upload-zone:hover {
  border-color: var(--color-primary) !important;
  background: #faf9ff !important;
}

.modal-card {
  border: 1px solid var(--color-border) !important;
  border-radius: 18px !important;
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
  box-shadow: 0 24px 70px rgba(11, 16, 38, 0.24) !important;
}

/* The review screen is the recognisable, Figma-like product moment. */
.asset-workspace-grid {
  background: var(--color-canvas) !important;
}

.asset-preview-panel {
  background: var(--color-canvas) !important;
  color: #fff !important;
}

.asset-toolbar {
  min-height: 56px;
  padding: 8px 12px;
  border: 1px solid var(--color-toolbar-border);
  border-radius: 10px;
  background: var(--color-toolbar);
}

.asset-toolbar .text-black\/40,
.asset-preview-panel .text-black\/40 {
  color: #aeb5c8 !important;
}

.preview-stage,
.public-design-stage {
  min-height: 560px !important;
  border: 1px solid var(--color-toolbar-border) !important;
  border-radius: 14px !important;
  background: var(--color-canvas) !important;
  box-shadow: none !important;
}

.preview-stage img,
.public-design-stage img {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35) !important;
}

.asset-preview-panel .preview-caption {
  border-color: var(--color-toolbar-border) !important;
  background: var(--color-toolbar) !important;
  color: #fff !important;
}

.asset-preview-panel .preview-caption p:last-child {
  color: #aeb5c8 !important;
}

.preview-policy,
.retention-pill {
  border-radius: 8px !important;
  background: rgba(22, 119, 255, 0.16) !important;
  color: #8fc0ff !important;
}

.feedback-rail {
  width: 390px;
  border-color: var(--color-border) !important;
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
}

.feedback-rail > div:first-child {
  border-color: var(--color-border) !important;
}

.feedback-rail > div:first-child button {
  color: var(--color-text-muted) !important;
  font-size: 14px !important;
}

.feedback-rail > div:first-child button.border-\[\#1178F2\] {
  border-color: var(--color-primary) !important;
  color: var(--color-text-primary) !important;
}

.ai-summary,
.ai-panel {
  border: 1px solid var(--color-border) !important;
  border-radius: 14px !important;
  background: var(--color-surface) !important;
  box-shadow: none !important;
}

.ai-spark {
  border-radius: 10px !important;
  background: #efeaff !important;
  color: var(--color-primary-hover) !important;
  box-shadow: none !important;
}

.composer {
  margin: 12px !important;
  padding: 12px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 14px !important;
  background: var(--color-surface) !important;
  box-shadow: none !important;
}

.composer:focus-within {
  border-color: var(--color-border-strong) !important;
  box-shadow: 0 0 0 3px rgba(109, 74, 255, 0.12) !important;
}

.comment-bubble {
  padding: 12px 14px !important;
  border-radius: 6px 14px 14px 14px !important;
  box-shadow: none !important;
  transform: none !important;
}

.comment-designer .comment-bubble {
  border-color: #cfe0ff !important;
  background: #f4f7ff !important;
}

.comment-client .comment-bubble {
  border-color: #ffc7d9 !important;
  background: #fff3f7 !important;
}

.comment-ai .comment-bubble,
.comment-lead .comment-bubble {
  border-color: #d9ceff !important;
  background: #f7f5ff !important;
}

.comment-copy {
  color: var(--color-text-primary) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.comment-time,
.reply-context,
.feedback-actions button {
  color: var(--color-text-muted) !important;
  font-size: 12px !important;
}

.role-pill {
  padding: 3px 7px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.role-designer { background: #e8f2ff !important; color: #0d62c7 !important; }
.role-client { background: #fff0f5 !important; color: #d81756 !important; }
.role-ai,
.role-lead { background: #efeaff !important; color: #5936e8 !important; }
.role-avatar-designer { background: var(--color-signal-blue) !important; color: #fff !important; }
.role-avatar-client { background: var(--color-pop-pink) !important; color: #fff !important; }
.role-avatar-ai,
.role-avatar-lead { background: var(--color-primary) !important; color: #fff !important; }

.thread-dot.dot-client,
.dot-client { background: var(--color-pop-pink) !important; }
.thread-dot.dot-designer,
.dot-designer { background: var(--color-signal-blue) !important; }

.reply-banner {
  border-radius: 8px !important;
  background: #efeaff !important;
  color: var(--color-primary-hover) !important;
}

.task {
  border-color: var(--color-border) !important;
  border-radius: 10px !important;
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
}

.task.done .checkbox {
  border-color: var(--color-success) !important;
  background: var(--color-success) !important;
}

.public-review {
  background: var(--color-background) !important;
}

.public-header {
  min-width: 0;
  gap: 12px;
  border-bottom: 1px solid var(--color-border) !important;
  background: var(--color-surface) !important;
}

.public-security-note {
  min-width: 0;
  max-width: min(440px, 38vw);
  margin-left: auto !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-theme-toggle {
  flex: none;
}

.public-feedback-panel {
  width: 380px;
}

.review-badge {
  flex: none;
  border-radius: 8px !important;
  background: #efeaff !important;
  color: var(--color-primary-hover) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Dark mode uses the same hierarchy without reintroducing colourful surfaces. */
html[data-theme="dark"],
html[data-theme="dark"] body {
  background: #0b1220 !important;
  color: #f4f6ff !important;
}

html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .app-shell .app-canvas,
html[data-theme="dark"] .public-review {
  background: #0b1220 !important;
  color: #f4f6ff !important;
}

html[data-theme="dark"] .sidebar-shell,
html[data-theme="dark"] .glass-header,
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .asset-header,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .project-card,
html[data-theme="dark"] .creative-card,
html[data-theme="dark"] .feedback-rail,
html[data-theme="dark"] .composer,
html[data-theme="dark"] .public-header,
html[data-theme="dark"] .public-lifecycle,
html[data-theme="dark"] .workflow-mini,
html[data-theme="dark"] .empty-state {
  border-color: #29364b !important;
  background: #111b2b !important;
  color: #f4f6ff !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .brand-name,
html[data-theme="dark"] .public-brand,
html[data-theme="dark"] .app-shell .display,
html[data-theme="dark"] .project-card h2,
html[data-theme="dark"] .creative-body h3,
html[data-theme="dark"] .metric .metric-no,
html[data-theme="dark"] .comment-copy {
  color: #f4f6ff !important;
}

html[data-theme="dark"] .nav-item {
  color: #aeb5c8 !important;
}

html[data-theme="dark"] .nav-item:hover {
  background: #1a2639 !important;
  color: #f4f6ff !important;
}

html[data-theme="dark"] .nav-item.active {
  background: rgba(109, 74, 255, 0.2) !important;
  color: #d3caff !important;
}

html[data-theme="dark"] .btn-dark,
html[data-theme="dark"] .access-submit,
html[data-theme="dark"] .ai-generate-btn,
html[data-theme="dark"] .task-form button {
  background: var(--color-primary) !important;
  color: #fff !important;
}

html[data-theme="dark"] .btn-dark:hover,
html[data-theme="dark"] .access-submit:hover {
  background: #8066ff !important;
}

html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .menu-toggle,
html[data-theme="dark"] .round-btn,
html[data-theme="dark"] .public-theme-toggle,
html[data-theme="dark"] .global-theme-toggle,
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .feedback-filters {
  border-color: #344159 !important;
  background: #151f31 !important;
  color: #d5dfed !important;
}

html[data-theme="dark"] .dashboard-intro {
  border-color: #29364b !important;
  background: #111b2b !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .metric,
html[data-theme="dark"] .metric-coral,
html[data-theme="dark"] .metric-lilac,
html[data-theme="dark"] .metric-lime,
html[data-theme="dark"] .metric-blue {
  border-color: #29364b !important;
  background: #111b2b !important;
}

html[data-theme="dark"] .creative-cover,
html[data-theme="dark"] .creative-card-tone-1 .creative-cover,
html[data-theme="dark"] .creative-card-tone-2 .creative-cover,
html[data-theme="dark"] .creative-card-tone-3 .creative-cover {
  background: #172235 !important;
}

html[data-theme="dark"] .form-story,
html[data-theme="dark"] .form-story.coral,
html[data-theme="dark"] .form-story.lilac,
html[data-theme="dark"] .form-story.lime {
  border-color: #29364b !important;
  background: #101a2a !important;
  color: #f4f6ff !important;
}

html[data-theme="dark"] .field,
html[data-theme="dark"] .form-card input,
html[data-theme="dark"] .form-card textarea,
html[data-theme="dark"] .form-card select,
html[data-theme="dark"] .task-form input,
html[data-theme="dark"] .task {
  border-color: #344159 !important;
  background: #101a2a !important;
  color: #f4f6ff !important;
}

html[data-theme="dark"] .dropzone,
html[data-theme="dark"] .upload-zone {
  border-color: #405069 !important;
  background: #101a2a !important;
}

html[data-theme="dark"] .modal-card {
  border-color: #344159 !important;
  background: #151f31 !important;
  color: #f4f6ff !important;
}

html[data-theme="dark"] .comment-designer .comment-bubble {
  border-color: #275071 !important;
  background: #172b43 !important;
}

html[data-theme="dark"] .comment-client .comment-bubble {
  border-color: #684052 !important;
  background: #382632 !important;
}

html[data-theme="dark"] .comment-ai .comment-bubble,
html[data-theme="dark"] .comment-lead .comment-bubble {
  border-color: #504577 !important;
  background: #2d2945 !important;
}

html[data-theme="dark"] .feedback-rail .text-black\/40,
html[data-theme="dark"] .app-shell .text-black\/40,
html[data-theme="dark"] .app-shell .text-black\/35,
html[data-theme="dark"] .app-shell .text-black\/45,
html[data-theme="dark"] .project-card > small,
html[data-theme="dark"] .project-card > p,
html[data-theme="dark"] .creative-meta,
html[data-theme="dark"] .creative-signals,
html[data-theme="dark"] .creative-footer small {
  color: #9eabc0 !important;
}

@media (max-width: 1000px) {
  .app-shell.has-sidebar main,
  .app-shell.no-sidebar main {
    margin-left: 0 !important;
  }

  .app-shell .app-canvas {
    margin: 0 !important;
  }

  .sidebar-shell {
    width: min(300px, calc(100vw - 40px)) !important;
    box-shadow: 16px 0 40px rgba(11, 16, 38, 0.16) !important;
  }
}

@media (max-width: 720px) {
  .dashboard-section,
  .page-section {
    padding: 24px 16px !important;
  }

  .dashboard-intro {
    padding: 24px !important;
  }

  .app-shell .display {
    font-size: 32px !important;
  }

  .metric-grid,
  .project-grid {
    gap: 16px !important;
  }

  .form-layout {
    padding: 24px 16px !important;
  }

  .asset-preview-panel {
    padding: 16px !important;
  }

  .preview-stage,
  .public-design-stage {
    min-height: 360px !important;
  }

  .public-feedback-panel,
  .feedback-rail {
    width: 100%;
  }
}

/* Final alignment pass: one header rhythm on every authenticated screen. */
.glass-header,
.page-header,
.asset-header {
  padding-right: 32px !important;
  padding-left: 32px !important;
  gap: 16px !important;
}

.page-header-actions,
.page-header > .project-header-actions,
.header-actions,
.dashboard-header-actions {
  min-width: max-content;
  min-height: 40px;
  display: flex !important;
  flex: none;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end;
  gap: 8px !important;
}

.dashboard-header-actions {
  margin-left: auto !important;
}

.page-header-actions {
  margin-left: auto !important;
}

body:has(.app-shell) > .global-theme-toggle,
body:has(.public-review) > .global-theme-toggle {
  display: none !important;
}

.page-header > .page-header-actions span,
.page-header > .project-header-actions span {
  color: inherit;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.header-theme-toggle,
.public-theme-toggle,
.global-theme-toggle {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 10px !important;
  background: var(--color-surface) !important;
  color: var(--color-primary-hover) !important;
  box-shadow: none !important;
}

.header-theme-toggle:hover,
.public-theme-toggle:hover,
.global-theme-toggle:hover {
  border-color: #cfc4ff !important;
  background: #f7f5ff !important;
  color: var(--color-primary-hover) !important;
  transform: none !important;
}

.header-theme-toggle .theme-toggle-icon,
.public-theme-toggle .theme-toggle-icon,
.global-theme-toggle .theme-toggle-icon {
  width: 19px !important;
  height: 19px !important;
}

.sidebar-brand-row {
  min-height: 52px;
  display: flex;
  align-items: center;
}

.sidebar-brand-link {
  height: 52px;
}

.sidebar-brand-lockup {
  width: 188px;
  height: 44px;
  border: 0;
  background: transparent;
}

.public-empty-brand {
  width: 174px;
  height: 118px;
}

/* Coloured workflow overview without turning the dashboard into a rainbow. */
.metric.metric-coral {
  border-color: #ffc7d9 !important;
  background: #fff3f7 !important;
  box-shadow: inset 0 3px 0 var(--color-pop-pink), 0 1px 2px rgba(11, 16, 38, 0.04) !important;
}

.metric.metric-lilac {
  border-color: #d9ceff !important;
  background: #f7f5ff !important;
  box-shadow: inset 0 3px 0 var(--color-primary), 0 1px 2px rgba(11, 16, 38, 0.04) !important;
}

.metric.metric-lime {
  border-color: #bfe9d6 !important;
  background: #f1fbf6 !important;
  box-shadow: inset 0 3px 0 var(--color-success), 0 1px 2px rgba(11, 16, 38, 0.04) !important;
}

.metric.metric-blue {
  border-color: #c9e0ff !important;
  background: #f1f7ff !important;
  box-shadow: inset 0 3px 0 var(--color-signal-blue), 0 1px 2px rgba(11, 16, 38, 0.04) !important;
}

.metric-coral .metric-no { color: #d81756 !important; }
.metric-lilac .metric-no { color: var(--color-primary-hover) !important; }
.metric-lime .metric-no { color: var(--color-success) !important; }
.metric-blue .metric-no { color: #0d62c7 !important; }

.metric-coral .metric-icon { background: #ffe1eb !important; color: #d81756 !important; }
.metric-lilac .metric-icon { background: #e9e3ff !important; color: var(--color-primary-hover) !important; }
.metric-lime .metric-icon { background: #d9f4e7 !important; color: var(--color-success) !important; }
.metric-blue .metric-icon { background: #dcecff !important; color: #0d62c7 !important; }

.filter-bar {
  min-height: 42px;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.filter-bar a,
.filter-bar button {
  min-height: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  white-space: nowrap;
}

.queue-head {
  gap: 24px;
}

html[data-theme="dark"] .header-theme-toggle,
html[data-theme="dark"] .public-theme-toggle,
html[data-theme="dark"] .global-theme-toggle {
  border-color: #3b4961 !important;
  background: #172338 !important;
  color: #d3caff !important;
}

@media (max-width: 900px) {
  .public-security-note {
    display: none;
  }

  .public-theme-toggle {
    margin-left: auto !important;
  }
}

@media (max-width: 560px) {
  .public-header {
    height: 80px;
    padding-right: 14px !important;
    padding-left: 14px !important;
    gap: 9px;
  }

  .public-brand-lockup {
    width: 72px;
    height: 54px;
  }

  .public-brand-lockup img {
    position: static;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    transform: none;
  }

  .public-header .review-badge {
    margin-left: 0;
    padding: 4px 6px;
  }
}

html[data-theme="dark"] .metric.metric-coral {
  border-color: #633448 !important;
  background: #281d2a !important;
  box-shadow: inset 0 3px 0 var(--color-pop-pink) !important;
}

html[data-theme="dark"] .metric.metric-lilac {
  border-color: #45386e !important;
  background: #211e35 !important;
  box-shadow: inset 0 3px 0 #8066ff !important;
}

html[data-theme="dark"] .metric.metric-lime {
  border-color: #285543 !important;
  background: #172b27 !important;
  box-shadow: inset 0 3px 0 #35a979 !important;
}

html[data-theme="dark"] .metric.metric-blue {
  border-color: #274c75 !important;
  background: #17263a !important;
  box-shadow: inset 0 3px 0 #4a9cff !important;
}

html[data-theme="dark"] .metric-coral .metric-no { color: #ff7ba6 !important; }
html[data-theme="dark"] .metric-lilac .metric-no { color: #a997ff !important; }
html[data-theme="dark"] .metric-lime .metric-no { color: #65d3a5 !important; }
html[data-theme="dark"] .metric-blue .metric-no { color: #72b3ff !important; }

html[data-theme="dark"] .filter-bar a.active,
html[data-theme="dark"] .filter-bar button.active,
html[data-theme="dark"] .feedback-filters button.active {
  background: rgba(109, 74, 255, 0.24) !important;
  color: #d3caff !important;
}

@media (max-width: 1000px) {
  .page-search {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .glass-header,
  .page-header,
  .asset-header {
    padding-right: 16px !important;
    padding-left: 16px !important;
    gap: 10px !important;
  }

  .glass-header .menu-toggle,
  .asset-header .menu-toggle {
    margin-right: 0 !important;
  }

  .dashboard-header-actions,
  .page-header-actions,
  .page-header > .project-header-actions,
  .header-actions {
    gap: 6px !important;
  }

  .page-header-actions .btn-dark,
  .header-actions .btn-dark {
    width: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  .header-action-label,
  .header-back-label,
  .upload-version-label {
    display: none !important;
  }

  .page-header-actions .header-back {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    font-size: 15px;
  }

  .asset-header-title {
    max-width: 112px;
  }

  .queue-head {
    gap: 16px;
  }

  .queue-head .filter-bar {
    width: 100%;
    margin-top: 0 !important;
  }

  .queue-head .filter-bar a {
    flex: 1 0 auto;
  }
}

/* Feedback-first review workspace. The conversation shares priority with the artwork. */
.review-workspace.asset-workspace-grid {
  height: calc(100vh - 72px) !important;
  grid-template-columns: minmax(0, 56fr) minmax(420px, 44fr) !important;
  overflow: hidden;
  border-top: 0;
  background: var(--color-background) !important;
}

.review-workspace .asset-preview-panel {
  min-width: 0;
  padding: 24px !important;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  border-right: 1px solid var(--color-border);
  background: var(--color-background) !important;
  color: var(--color-text-primary) !important;
}

.review-workspace .asset-toolbar {
  min-height: 52px;
  margin-bottom: 16px !important;
  padding: 8px 10px 8px 14px;
  flex: none;
  border: 1px solid var(--color-border) !important;
  border-radius: 12px;
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
  box-shadow: 0 1px 2px rgba(11, 16, 38, 0.04);
}

.review-workspace .asset-toolbar .text-black\/40,
.review-workspace .asset-preview-panel .text-black\/40 {
  color: var(--color-text-muted) !important;
}

.review-workspace .preview-stage,
.public-design-stage {
  min-width: 0;
  min-height: 340px !important;
  height: calc(100vh - 236px);
  padding: 20px !important;
  flex: 1 1 auto;
  overflow: hidden;
  border: 1px solid var(--color-border) !important;
  border-radius: 14px !important;
  background: var(--color-surface-subtle) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7) !important;
}

.review-workspace .preview-stage {
  position: relative;
  height: auto;
  flex: 1 1 0;
}

.review-workspace .preview-stage img,
.public-design-stage img {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(11, 16, 38, 0.14) !important;
}

.review-workspace .preview-stage img {
  position: absolute;
  inset: 20px;
  width: calc(100% - 40px) !important;
  height: calc(100% - 40px) !important;
}

.public-review-meta {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.public-review-meta #review-status {
  display: inline-flex;
}

.review-workspace .retention-pill {
  border-radius: 8px !important;
  background: #e8f2ff !important;
  color: #0d62c7 !important;
}

.review-feedback-panel.feedback-rail {
  width: auto !important;
  min-width: 0;
  height: 100%;
  border-left: 0 !important;
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
}

.review-feedback-panel .feedback-tabs {
  min-height: 62px;
  padding: 8px 20px 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex: none;
  overflow: visible !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.review-feedback-panel .feedback-tabs button {
  min-width: 0;
  padding: 0 8px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
  color: var(--color-text-muted) !important;
  font-size: 14px !important;
  white-space: nowrap;
}

.review-feedback-panel .feedback-tabs button.border-\[\#1178F2\] {
  border-color: var(--color-primary) !important;
  color: var(--color-text-primary) !important;
}

.review-feedback-panel .feedback-content {
  min-width: 0;
  padding: 20px 24px 18px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.review-feedback-panel .ai-summary.is-idle {
  padding: 16px !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  align-items: center;
}

.review-feedback-panel .ai-summary.is-idle > div:first-child {
  grid-column: 1 / -1;
}

.review-feedback-panel .ai-summary.is-idle > p {
  grid-column: 1;
  min-width: 0;
  margin-top: 12px !important;
  color: var(--color-text-secondary) !important;
  line-height: 1.55 !important;
}

.review-feedback-panel .ai-summary.is-idle > .ai-generate-btn {
  grid-column: 2;
  grid-row: 2;
  min-width: max-content;
  margin-top: 12px !important;
}

.review-feedback-panel .feedback-filter-row {
  min-width: 0;
  margin-top: 20px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.review-feedback-panel .feedback-filters {
  width: min(100%, 284px);
  min-width: 0;
  margin-left: auto !important;
  display: grid;
  grid-template-columns: 0.72fr 1.2fr 1fr;
  gap: 3px;
  overflow: hidden;
  border-radius: 10px !important;
}

.review-feedback-panel .feedback-filters button {
  min-width: 0;
  height: 32px;
  padding: 0 8px !important;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px !important;
  font-size: 11px !important;
}

.review-feedback-panel .feedback-thread {
  min-width: 0;
  padding-bottom: 8px;
}

.review-feedback-panel .comment {
  min-width: 0;
  gap: 10px;
}

.review-feedback-panel .comment-bubble {
  min-width: 0;
  padding: 13px 14px !important;
}

.review-feedback-panel .comment-meta {
  min-width: 0;
  gap: 6px;
}

.review-feedback-panel .comment-meta b {
  min-width: 0;
  max-width: 42%;
}

.review-feedback-panel .comment-time {
  flex: none;
}

.review-feedback-panel .feedback-composer {
  min-width: 0;
  margin: 0 20px 20px !important;
  padding: 12px 14px !important;
  flex: none;
  border-radius: 14px !important;
  background: var(--color-surface) !important;
  box-shadow: 0 -8px 24px rgba(11, 16, 38, 0.04) !important;
}

.review-feedback-panel .feedback-composer textarea {
  min-width: 0;
  height: 64px;
}

.review-feedback-panel .composer-tools {
  min-width: 0;
}

.review-feedback-panel .composer-tools > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-feedback-panel .feedback-composer .btn-dark {
  flex: none;
}

html[data-theme="dark"] .review-workspace.asset-workspace-grid,
html[data-theme="dark"] .review-workspace .asset-preview-panel {
  background: var(--color-canvas) !important;
  color: #fff !important;
}

html[data-theme="dark"] .review-workspace .asset-preview-panel {
  border-color: var(--color-toolbar-border) !important;
}

html[data-theme="dark"] .review-workspace .asset-toolbar {
  border-color: var(--color-toolbar-border) !important;
  background: var(--color-toolbar) !important;
  color: #fff !important;
}

html[data-theme="dark"] .review-workspace .preview-stage,
html[data-theme="dark"] .public-design-stage {
  border-color: var(--color-toolbar-border) !important;
  background: var(--color-canvas) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .review-feedback-panel.feedback-rail,
html[data-theme="dark"] .review-feedback-panel .feedback-composer {
  border-color: #29364b !important;
  background: #111b2b !important;
  color: #f4f6ff !important;
}

html[data-theme="dark"] .review-feedback-panel .feedback-tabs {
  border-color: #29364b !important;
}

@media (max-width: 1180px) {
  .review-workspace.asset-workspace-grid {
    grid-template-columns: minmax(0, 54fr) minmax(380px, 46fr) !important;
  }

  .review-feedback-panel .ai-summary.is-idle {
    grid-template-columns: 1fr;
  }

  .review-feedback-panel .ai-summary.is-idle > .ai-generate-btn {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
}

@media (max-width: 1000px) {
  .review-workspace.asset-workspace-grid {
    height: auto !important;
    grid-template-columns: 1fr !important;
    overflow: visible;
  }

  .review-workspace .asset-preview-panel {
    min-height: calc(100vh - 72px);
    overflow: visible !important;
  }

  .review-workspace .preview-stage {
    height: min(68vh, 680px);
    flex: none;
  }

  .review-feedback-panel.feedback-rail {
    min-height: 720px;
    border-top: 1px solid var(--color-border) !important;
  }
}

@media (max-width: 600px) {
  .review-workspace .asset-preview-panel {
    min-height: auto;
    padding: 16px !important;
  }

  .review-workspace .preview-stage {
    min-height: 320px !important;
    height: 56vh;
    padding: 12px !important;
  }

  .review-workspace .preview-stage img {
    inset: 12px;
    width: calc(100% - 24px) !important;
    height: calc(100% - 24px) !important;
  }

  .review-feedback-panel .feedback-content {
    padding: 16px !important;
  }

  .review-feedback-panel .feedback-filter-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .review-feedback-panel .feedback-filters {
    width: 100%;
    margin-left: 0 !important;
  }

  .review-feedback-panel .feedback-composer {
    margin: 0 12px 12px !important;
  }
}

/* Focused artwork preview shared by designer and client review screens. */
html.preview-open {
  overflow: hidden;
}

.review-preview-trigger {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: zoom-in;
  overflow: hidden;
}

/* Keep every client artwork fully visible inside the review stage. */
.public-design-stage .review-preview-trigger img {
  position: absolute !important;
  inset: 24px !important;
  width: calc(100% - 48px) !important;
  height: calc(100% - 48px) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

.review-preview-trigger img {
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.review-preview-trigger:hover img,
.review-preview-trigger:focus-visible img {
  transform: scale(1.012);
  filter: brightness(0.84);
  box-shadow: 0 18px 44px rgba(11, 16, 38, 0.22) !important;
}

.review-preview-trigger:focus-visible {
  outline: 3px solid rgba(109, 74, 255, 0.42);
  outline-offset: -3px;
}

.preview-zoom-affordance {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  min-height: 42px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 10px;
  background: rgba(11, 16, 38, 0.84);
  color: #fff;
  opacity: 0;
  transform: translate(-50%, -44%) scale(0.94);
  box-shadow: 0 12px 32px rgba(11, 16, 38, 0.28);
  backdrop-filter: blur(10px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.preview-zoom-affordance svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.preview-zoom-affordance b {
  font-size: 12px;
  font-weight: 600;
}

.review-preview-trigger:hover .preview-zoom-affordance,
.review-preview-trigger:focus-visible .preview-zoom-affordance {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  padding: 32px;
  display: grid;
  place-items: center;
  background: rgba(7, 10, 24, 0.9);
  backdrop-filter: blur(12px);
  cursor: zoom-out;
}

.image-lightbox-image {
  max-width: calc(100vw - 96px);
  max-height: calc(100vh - 96px);
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: zoom-out;
}

.image-lightbox-image img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 96px);
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.56);
}

.image-lightbox-close {
  position: absolute;
  right: 24px;
  top: 24px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  backdrop-filter: blur(10px);
}

.image-lightbox-close:hover,
.image-lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.18);
}

.image-lightbox-close svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.image-lightbox > p {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
}

@media (hover: none) {
  .preview-zoom-affordance {
    left: auto;
    right: 16px;
    top: auto;
    bottom: 16px;
    min-height: 38px;
    padding: 0 11px;
    opacity: 0.92;
    transform: none;
  }

  .review-preview-trigger:hover .preview-zoom-affordance,
  .review-preview-trigger:focus-visible .preview-zoom-affordance {
    transform: none;
  }
}

@media (max-width: 600px) {
  .image-lightbox {
    padding: 16px;
  }

  .image-lightbox-image {
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 72px);
  }

  .image-lightbox-image img {
    max-height: calc(100vh - 72px);
  }

  .image-lightbox-close {
    right: 14px;
    top: 14px;
  }

  .image-lightbox > p {
    bottom: 12px;
  }
}

@media (max-width: 720px) {
  .public-design-stage .review-preview-trigger img {
    inset: 16px !important;
    width: calc(100% - 32px) !important;
    height: calc(100% - 32px) !important;
  }
}